@n-isi-platform/design-system 1.0.1
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.
- package/README.md +109 -0
- package/fesm2022/n-isi-platform-design-system.mjs +2858 -0
- package/fesm2022/n-isi-platform-design-system.mjs.map +1 -0
- package/helpers/get-tomorrow-date.function.d.ts +7 -0
- package/helpers/is-object-empty.function.d.ts +7 -0
- package/index.d.ts +5 -0
- package/lib/accordion/accordion.component.d.ts +30 -0
- package/lib/breadcrumbs/breadcrumbs.component.d.ts +8 -0
- package/lib/button/button.component.d.ts +28 -0
- package/lib/button-link/button-link.component.d.ts +15 -0
- package/lib/card/card.component.d.ts +7 -0
- package/lib/checkbox/checkbox.component.d.ts +20 -0
- package/lib/confirm-modal/confirm-modal.component.d.ts +23 -0
- package/lib/custom-table/custom-table.component.d.ts +117 -0
- package/lib/date-input/date-input.component.d.ts +61 -0
- package/lib/divider/divider.component.d.ts +5 -0
- package/lib/dropdown/dropdown.component.d.ts +48 -0
- package/lib/error/error.component.d.ts +13 -0
- package/lib/expanded-table/expanded-table.component.d.ts +125 -0
- package/lib/filter-header/filter-header.component.d.ts +7 -0
- package/lib/footer/footer.component.d.ts +24 -0
- package/lib/generic-table/generic-table.component.d.ts +34 -0
- package/lib/icon-button/icon-button.component.d.ts +15 -0
- package/lib/input/input.component.d.ts +31 -0
- package/lib/input-mask/input-mask.component.d.ts +28 -0
- package/lib/loader/loader.component.d.ts +5 -0
- package/lib/main-menu/main-menu.component.d.ts +19 -0
- package/lib/modal/modal.component.d.ts +57 -0
- package/lib/navbar/navbar.component.d.ts +34 -0
- package/lib/picklist/picklist.component.d.ts +33 -0
- package/lib/progress-bar/progress-bar.component.d.ts +6 -0
- package/lib/tag/tag.component.d.ts +10 -0
- package/lib/textarea/textarea.component.d.ts +28 -0
- package/lib/toggle-switch/toggle-switch.component.d.ts +17 -0
- package/lib/tooltip/tooltip.component.d.ts +25 -0
- package/models/enums/button/button-color.enum.d.ts +10 -0
- package/models/enums/button/button-icon-position.enum.d.ts +4 -0
- package/models/enums/button/button-size.enum.d.ts +5 -0
- package/models/enums/confirm-modal/confirm-modal-color.enum.d.ts +7 -0
- package/models/enums/dropdown/dropdown-selection-mode.enum.d.ts +5 -0
- package/models/enums/expanded-table/expanded-table.enum.d.ts +5 -0
- package/models/enums/input/input-type.enum.d.ts +5 -0
- package/models/enums/table/caption-color.enum.d.ts +5 -0
- package/models/enums/tag/tag.enum.d.ts +8 -0
- package/models/enums/toast/toast-position-key.enum.d.ts +8 -0
- package/models/enums/toast/toast-severity.enum.d.ts +6 -0
- package/models/enums/tooltip/tooltip-hover-event.enum.d.ts +4 -0
- package/models/enums/tooltip/tooltip-position.enum.d.ts +6 -0
- package/models/interaces/confirm-modal/confirm-modal-service.interface.d.ts +10 -0
- package/models/interaces/custom-table/custom-table.interface.d.ts +20 -0
- package/models/interaces/navbar/navbar-link-list.interface.d.ts +3 -0
- package/models/interaces/shared/form-status.interface.d.ts +8 -0
- package/package.json +23 -0
- package/public-api.d.ts +37 -0
- package/services/app-config.service.d.ts +16 -0
- package/services/cache.service.d.ts +7 -0
- package/services/confirm-modal-service.d.ts +19 -0
- package/services/dynamic-route.service.d.ts +9 -0
- package/services/export.service.d.ts +12 -0
- package/services/local-storage.service.d.ts +34 -0
- package/services/no-internet.service.d.ts +11 -0
- package/services/translation.service.d.ts +13 -0
|
@@ -0,0 +1,2858 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { Injectable, SecurityContext, HostListener, ViewChild, Input, ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
|
|
3
|
+
import { BehaviorSubject, firstValueFrom, Subscription, take, interval } from 'rxjs';
|
|
4
|
+
import * as i1 from '@angular/common/http';
|
|
5
|
+
import * as i2 from '@ngx-translate/core';
|
|
6
|
+
import { TranslateModule } from '@ngx-translate/core';
|
|
7
|
+
import * as i1$1 from 'primeng/api';
|
|
8
|
+
import { ConfirmEventType, PrimeTemplate } from 'primeng/api';
|
|
9
|
+
import * as i1$2 from '@angular/router';
|
|
10
|
+
import * as XLSX from 'xlsx';
|
|
11
|
+
import * as i1$4 from '@angular/forms';
|
|
12
|
+
import { FormsModule, ReactiveFormsModule, FormGroup } from '@angular/forms';
|
|
13
|
+
import * as i1$9 from '@angular/common';
|
|
14
|
+
import { NgIf, NgClass, NgTemplateOutlet, NgFor, UpperCasePipe, NgStyle, DatePipe, CommonModule } from '@angular/common';
|
|
15
|
+
import { Tooltip } from 'primeng/tooltip';
|
|
16
|
+
import * as i1$3 from '@angular/platform-browser';
|
|
17
|
+
import { InputText, InputTextModule } from 'primeng/inputtext';
|
|
18
|
+
import * as i2$1 from 'primeng/textarea';
|
|
19
|
+
import { TextareaModule } from 'primeng/textarea';
|
|
20
|
+
import { Button } from 'primeng/button';
|
|
21
|
+
import { Dialog } from 'primeng/dialog';
|
|
22
|
+
import * as i5 from 'primeng/multiselect';
|
|
23
|
+
import { MultiSelectModule } from 'primeng/multiselect';
|
|
24
|
+
import * as i3 from 'primeng/select';
|
|
25
|
+
import { SelectModule } from 'primeng/select';
|
|
26
|
+
import { Breadcrumb } from 'primeng/breadcrumb';
|
|
27
|
+
import { Divider } from 'primeng/divider';
|
|
28
|
+
import * as i2$2 from 'primeng/datepicker';
|
|
29
|
+
import { DatePickerModule } from 'primeng/datepicker';
|
|
30
|
+
import { Checkbox } from 'primeng/checkbox';
|
|
31
|
+
import * as i1$5 from 'primeng/confirmdialog';
|
|
32
|
+
import { ConfirmDialogModule } from 'primeng/confirmdialog';
|
|
33
|
+
import * as i1$6 from 'primeng/table';
|
|
34
|
+
import { TableModule } from 'primeng/table';
|
|
35
|
+
import * as i2$3 from 'primeng/toggleswitch';
|
|
36
|
+
import { ToggleSwitchModule } from 'primeng/toggleswitch';
|
|
37
|
+
import { Tag } from 'primeng/tag';
|
|
38
|
+
import { ProgressSpinner } from 'primeng/progressspinner';
|
|
39
|
+
import * as i1$7 from 'primeng/accordion';
|
|
40
|
+
import { Accordion, AccordionModule } from 'primeng/accordion';
|
|
41
|
+
import { SelectButton } from 'primeng/selectbutton';
|
|
42
|
+
import * as i3$1 from 'primeng/popover';
|
|
43
|
+
import { PopoverModule } from 'primeng/popover';
|
|
44
|
+
import { ProgressBar } from 'primeng/progressbar';
|
|
45
|
+
import * as i1$8 from 'primeng/picklist';
|
|
46
|
+
import { PickListModule } from 'primeng/picklist';
|
|
47
|
+
import { Card } from 'primeng/card';
|
|
48
|
+
import { InputMask } from 'primeng/inputmask';
|
|
49
|
+
import * as i4 from 'primeng/chip';
|
|
50
|
+
import { ChipModule } from 'primeng/chip';
|
|
51
|
+
import * as i2$4 from 'primeng/menubar';
|
|
52
|
+
import { MenubarModule } from 'primeng/menubar';
|
|
53
|
+
|
|
54
|
+
class LocalStorageService {
|
|
55
|
+
storageChangeSubject = new BehaviorSubject(null);
|
|
56
|
+
constructor() {
|
|
57
|
+
window.addEventListener('storage', event => {
|
|
58
|
+
if (event.key === 'userData') {
|
|
59
|
+
this.storageChangeSubject.next(event.newValue);
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
getStorageChangeObservable() {
|
|
64
|
+
return this.storageChangeSubject.asObservable();
|
|
65
|
+
}
|
|
66
|
+
/**
|
|
67
|
+
* Retrieves an item from local storage.
|
|
68
|
+
*
|
|
69
|
+
* @param {string} key - The key of the item to retrieve.
|
|
70
|
+
* @returns {any|null} - The item retrieved from local storage, or null if the item does not exist.
|
|
71
|
+
*
|
|
72
|
+
*/
|
|
73
|
+
getItem(key) {
|
|
74
|
+
const item = localStorage.getItem(key);
|
|
75
|
+
// Mare; bugfix - da pohendla pravilno tudi primer da je lang = undefined
|
|
76
|
+
if (item === "undefined" || item === null) {
|
|
77
|
+
return null;
|
|
78
|
+
}
|
|
79
|
+
return item ? JSON.parse(item) : null;
|
|
80
|
+
}
|
|
81
|
+
/**
|
|
82
|
+
* Stores an item in local storage.
|
|
83
|
+
*
|
|
84
|
+
* @param {string} key - The key under which to store the item.
|
|
85
|
+
* @param {any} value - The item to store in local storage.
|
|
86
|
+
*
|
|
87
|
+
*/
|
|
88
|
+
setItem(key, value) {
|
|
89
|
+
localStorage.setItem(key, JSON.stringify(value));
|
|
90
|
+
this.storageChangeSubject.next(value);
|
|
91
|
+
}
|
|
92
|
+
/**
|
|
93
|
+
* Removes an item from local storage.
|
|
94
|
+
*
|
|
95
|
+
* @param {string} key - The key of the item to remove.
|
|
96
|
+
*
|
|
97
|
+
* @example
|
|
98
|
+
* removeItem('myKey');
|
|
99
|
+
*/
|
|
100
|
+
removeItem(key) {
|
|
101
|
+
localStorage.removeItem(key);
|
|
102
|
+
this.storageChangeSubject.next(null);
|
|
103
|
+
}
|
|
104
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: LocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
105
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: LocalStorageService, providedIn: 'root' });
|
|
106
|
+
}
|
|
107
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: LocalStorageService, decorators: [{
|
|
108
|
+
type: Injectable,
|
|
109
|
+
args: [{
|
|
110
|
+
providedIn: 'root',
|
|
111
|
+
}]
|
|
112
|
+
}], ctorParameters: () => [] });
|
|
113
|
+
|
|
114
|
+
class TranslationService {
|
|
115
|
+
http;
|
|
116
|
+
translateService;
|
|
117
|
+
translationsLoaded = new BehaviorSubject(true);
|
|
118
|
+
constructor(http, translateService) {
|
|
119
|
+
this.http = http;
|
|
120
|
+
this.translateService = translateService;
|
|
121
|
+
}
|
|
122
|
+
async loadTranslations(organisation, language) {
|
|
123
|
+
const translationPath = `assets/i18n/${language}.json`;
|
|
124
|
+
const translations = await firstValueFrom(this.http.get(translationPath));
|
|
125
|
+
this.translateService.setTranslation(language, translations);
|
|
126
|
+
this.translateService.use(language);
|
|
127
|
+
this.translationsLoaded.next(false);
|
|
128
|
+
}
|
|
129
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TranslationService, deps: [{ token: i1.HttpClient }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
130
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TranslationService, providedIn: 'root' });
|
|
131
|
+
}
|
|
132
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TranslationService, decorators: [{
|
|
133
|
+
type: Injectable,
|
|
134
|
+
args: [{
|
|
135
|
+
providedIn: 'root',
|
|
136
|
+
}]
|
|
137
|
+
}], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.TranslateService }] });
|
|
138
|
+
|
|
139
|
+
var PositionKey;
|
|
140
|
+
(function (PositionKey) {
|
|
141
|
+
PositionKey["topCenter"] = "topCenter";
|
|
142
|
+
PositionKey["topLeft"] = "topLeft";
|
|
143
|
+
PositionKey["topRight"] = "topRight";
|
|
144
|
+
PositionKey["bottomCenter"] = "bottomCenter";
|
|
145
|
+
PositionKey["bottomLeft"] = "bottomLeft";
|
|
146
|
+
PositionKey["bottomRight"] = "bottomRight";
|
|
147
|
+
})(PositionKey || (PositionKey = {}));
|
|
148
|
+
|
|
149
|
+
var ToastSeverity;
|
|
150
|
+
(function (ToastSeverity) {
|
|
151
|
+
ToastSeverity["success"] = "success";
|
|
152
|
+
ToastSeverity["info"] = "info";
|
|
153
|
+
ToastSeverity["warning"] = "warn";
|
|
154
|
+
ToastSeverity["error"] = "error";
|
|
155
|
+
})(ToastSeverity || (ToastSeverity = {}));
|
|
156
|
+
|
|
157
|
+
class ConfirmModalService {
|
|
158
|
+
confirmationService;
|
|
159
|
+
messageService;
|
|
160
|
+
translateService;
|
|
161
|
+
translationService;
|
|
162
|
+
// Key must be the same as key in confirm-modal.component.html toast !!
|
|
163
|
+
positionKey = PositionKey.topCenter;
|
|
164
|
+
modalContent$ = new Subscription();
|
|
165
|
+
content;
|
|
166
|
+
constructor(confirmationService, messageService, translateService, translationService) {
|
|
167
|
+
this.confirmationService = confirmationService;
|
|
168
|
+
this.messageService = messageService;
|
|
169
|
+
this.translateService = translateService;
|
|
170
|
+
this.translationService = translationService;
|
|
171
|
+
this.loadModalContent();
|
|
172
|
+
}
|
|
173
|
+
loadModalContent() {
|
|
174
|
+
this.modalContent$.add(this.translationService.translationsLoaded.pipe(take(1)).subscribe(() => {
|
|
175
|
+
this.translateService.get('confirmModalService').subscribe(contentText => {
|
|
176
|
+
this.content = {
|
|
177
|
+
message: contentText.message,
|
|
178
|
+
header: contentText.header,
|
|
179
|
+
acceptSummary: contentText.acceptSummary,
|
|
180
|
+
acceptDetail: contentText.acceptDetail,
|
|
181
|
+
rejectSummary: contentText.rejectSummary,
|
|
182
|
+
rejectDetail: contentText.rejectDetail,
|
|
183
|
+
cancelSummary: contentText.cancelSummary,
|
|
184
|
+
cancelDetail: contentText.cancelDetail,
|
|
185
|
+
};
|
|
186
|
+
});
|
|
187
|
+
}));
|
|
188
|
+
}
|
|
189
|
+
confirm() {
|
|
190
|
+
this.confirmationService.confirm({
|
|
191
|
+
message: this.content.message,
|
|
192
|
+
header: this.content.header,
|
|
193
|
+
icon: 'pi pi-exclamation-circle',
|
|
194
|
+
accept: () => {
|
|
195
|
+
this.messageService.add({
|
|
196
|
+
key: this.positionKey,
|
|
197
|
+
severity: ToastSeverity.info,
|
|
198
|
+
summary: this.content?.acceptSummary,
|
|
199
|
+
detail: this.content?.acceptDetail,
|
|
200
|
+
});
|
|
201
|
+
},
|
|
202
|
+
reject: (type) => {
|
|
203
|
+
switch (type) {
|
|
204
|
+
case ConfirmEventType.REJECT:
|
|
205
|
+
this.messageService.add({
|
|
206
|
+
key: this.positionKey,
|
|
207
|
+
severity: ToastSeverity.error,
|
|
208
|
+
summary: this.content?.rejectSummary,
|
|
209
|
+
detail: this.content?.rejectDetail,
|
|
210
|
+
});
|
|
211
|
+
break;
|
|
212
|
+
case ConfirmEventType.CANCEL:
|
|
213
|
+
this.messageService.add({
|
|
214
|
+
key: this.positionKey,
|
|
215
|
+
severity: ToastSeverity.warning,
|
|
216
|
+
summary: this.content?.cancelSummary,
|
|
217
|
+
detail: this.content?.cancelDetail,
|
|
218
|
+
});
|
|
219
|
+
break;
|
|
220
|
+
}
|
|
221
|
+
},
|
|
222
|
+
});
|
|
223
|
+
}
|
|
224
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ConfirmModalService, deps: [{ token: i1$1.ConfirmationService }, { token: i1$1.MessageService }, { token: i2.TranslateService }, { token: TranslationService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
225
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ConfirmModalService, providedIn: 'root' });
|
|
226
|
+
}
|
|
227
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ConfirmModalService, decorators: [{
|
|
228
|
+
type: Injectable,
|
|
229
|
+
args: [{
|
|
230
|
+
providedIn: 'root',
|
|
231
|
+
}]
|
|
232
|
+
}], ctorParameters: () => [{ type: i1$1.ConfirmationService }, { type: i1$1.MessageService }, { type: i2.TranslateService }, { type: TranslationService }] });
|
|
233
|
+
|
|
234
|
+
class DynamicRouteService {
|
|
235
|
+
router;
|
|
236
|
+
constructor(router) {
|
|
237
|
+
this.router = router;
|
|
238
|
+
}
|
|
239
|
+
getDynamicUrl(activatedRoute, url, queryParams, state) {
|
|
240
|
+
const organisation = activatedRoute.snapshot.url[0];
|
|
241
|
+
const language = activatedRoute.snapshot.url[1];
|
|
242
|
+
return this.router
|
|
243
|
+
.navigate([`/${organisation}/${language}/${url}`], { state: state, queryParams: queryParams })
|
|
244
|
+
.then();
|
|
245
|
+
}
|
|
246
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DynamicRouteService, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
247
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DynamicRouteService, providedIn: 'root' });
|
|
248
|
+
}
|
|
249
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DynamicRouteService, decorators: [{
|
|
250
|
+
type: Injectable,
|
|
251
|
+
args: [{
|
|
252
|
+
providedIn: 'root',
|
|
253
|
+
}]
|
|
254
|
+
}], ctorParameters: () => [{ type: i1$2.Router }] });
|
|
255
|
+
|
|
256
|
+
class NoInternetService {
|
|
257
|
+
translateService;
|
|
258
|
+
messageService;
|
|
259
|
+
constructor(translateService, messageService) {
|
|
260
|
+
this.translateService = translateService;
|
|
261
|
+
this.messageService = messageService;
|
|
262
|
+
}
|
|
263
|
+
checkInternetConnection() {
|
|
264
|
+
if (!navigator.onLine) {
|
|
265
|
+
this.messageService.add({
|
|
266
|
+
key: 'notification',
|
|
267
|
+
severity: 'error',
|
|
268
|
+
summary: this.translateService.instant('errors.noInternetConnection'),
|
|
269
|
+
life: 6000
|
|
270
|
+
});
|
|
271
|
+
return false;
|
|
272
|
+
}
|
|
273
|
+
return true;
|
|
274
|
+
}
|
|
275
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NoInternetService, deps: [{ token: i2.TranslateService }, { token: i1$1.MessageService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
276
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NoInternetService, providedIn: 'root' });
|
|
277
|
+
}
|
|
278
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NoInternetService, decorators: [{
|
|
279
|
+
type: Injectable,
|
|
280
|
+
args: [{
|
|
281
|
+
providedIn: 'root',
|
|
282
|
+
}]
|
|
283
|
+
}], ctorParameters: () => [{ type: i2.TranslateService }, { type: i1$1.MessageService }] });
|
|
284
|
+
|
|
285
|
+
class CacheService {
|
|
286
|
+
getCacheItem(key) {
|
|
287
|
+
const item = sessionStorage.getItem(key);
|
|
288
|
+
return item ? JSON.parse(item) : null;
|
|
289
|
+
}
|
|
290
|
+
cacheItem(key, value) {
|
|
291
|
+
sessionStorage.setItem(key, JSON.stringify(value));
|
|
292
|
+
}
|
|
293
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CacheService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
294
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CacheService, providedIn: 'root' });
|
|
295
|
+
}
|
|
296
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CacheService, decorators: [{
|
|
297
|
+
type: Injectable,
|
|
298
|
+
args: [{
|
|
299
|
+
providedIn: 'root',
|
|
300
|
+
}]
|
|
301
|
+
}] });
|
|
302
|
+
|
|
303
|
+
class AppConfigService {
|
|
304
|
+
config;
|
|
305
|
+
constructor() {
|
|
306
|
+
this.config = globalThis.APP_CONFIG;
|
|
307
|
+
}
|
|
308
|
+
getConfig() {
|
|
309
|
+
return this.config;
|
|
310
|
+
}
|
|
311
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AppConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
312
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AppConfigService, providedIn: 'root' });
|
|
313
|
+
}
|
|
314
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AppConfigService, decorators: [{
|
|
315
|
+
type: Injectable,
|
|
316
|
+
args: [{
|
|
317
|
+
providedIn: 'root',
|
|
318
|
+
}]
|
|
319
|
+
}], ctorParameters: () => [] });
|
|
320
|
+
|
|
321
|
+
class ExportService {
|
|
322
|
+
/**
|
|
323
|
+
* izračun širine stolpcev na podlagi vsebine
|
|
324
|
+
*/
|
|
325
|
+
calculateColumnWidths(objArray) {
|
|
326
|
+
const maxLengths = Object.keys(objArray[0]).map(key => {
|
|
327
|
+
return Math.max(key.length, // Dolžina headerja
|
|
328
|
+
...objArray.map(obj => (obj[key] ? obj[key].toString().length : 0)) // Dolžina podatkov v stolpcu
|
|
329
|
+
);
|
|
330
|
+
});
|
|
331
|
+
return maxLengths.map(length => ({ wch: length + 2 })); // Dodamo nekaj prostora (2 znaka)
|
|
332
|
+
}
|
|
333
|
+
exportExcel(objArray, filename) {
|
|
334
|
+
const ws = XLSX.utils.json_to_sheet(objArray);
|
|
335
|
+
ws['!cols'] = this.calculateColumnWidths(objArray); // da so širši stolpci
|
|
336
|
+
const wb = XLSX.utils.book_new();
|
|
337
|
+
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
|
|
338
|
+
XLSX.writeFile(wb, filename ?? 'izvoz.xlsx');
|
|
339
|
+
}
|
|
340
|
+
exportCSV(objArray) {
|
|
341
|
+
const header = Object.keys(objArray[0]).join(',') + '\n';
|
|
342
|
+
const rows = objArray
|
|
343
|
+
.map(obj => Object.values(obj)
|
|
344
|
+
.map(val => `"${val}"`)
|
|
345
|
+
.join(','))
|
|
346
|
+
.join('\n');
|
|
347
|
+
return header + rows;
|
|
348
|
+
}
|
|
349
|
+
exportXML(array) {
|
|
350
|
+
const rootTag = 'data';
|
|
351
|
+
const rowTag = 'record';
|
|
352
|
+
const rows = array
|
|
353
|
+
.map((obj) => {
|
|
354
|
+
const rowAttrs = Object.entries(obj)
|
|
355
|
+
.map(([key, val]) => `${key}="${val}"`)
|
|
356
|
+
.join(' ');
|
|
357
|
+
return `<${rowTag} ${rowAttrs} />`;
|
|
358
|
+
})
|
|
359
|
+
.join('\n');
|
|
360
|
+
return `<${rootTag}>\n${rows}\n</${rootTag}>`;
|
|
361
|
+
}
|
|
362
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
363
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ExportService, providedIn: 'root' });
|
|
364
|
+
}
|
|
365
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ExportService, decorators: [{
|
|
366
|
+
type: Injectable,
|
|
367
|
+
args: [{
|
|
368
|
+
providedIn: 'root',
|
|
369
|
+
}]
|
|
370
|
+
}] });
|
|
371
|
+
|
|
372
|
+
var TooltipPosition;
|
|
373
|
+
(function (TooltipPosition) {
|
|
374
|
+
TooltipPosition["left"] = "left";
|
|
375
|
+
TooltipPosition["right"] = "right";
|
|
376
|
+
TooltipPosition["top"] = "top";
|
|
377
|
+
TooltipPosition["bottom"] = "bottom";
|
|
378
|
+
})(TooltipPosition || (TooltipPosition = {}));
|
|
379
|
+
|
|
380
|
+
var InputType;
|
|
381
|
+
(function (InputType) {
|
|
382
|
+
InputType["text"] = "text";
|
|
383
|
+
InputType["number"] = "number";
|
|
384
|
+
InputType["email"] = "email";
|
|
385
|
+
})(InputType || (InputType = {}));
|
|
386
|
+
|
|
387
|
+
var TooltipHoverEventEnum;
|
|
388
|
+
(function (TooltipHoverEventEnum) {
|
|
389
|
+
TooltipHoverEventEnum["hover"] = "hover";
|
|
390
|
+
TooltipHoverEventEnum["focus"] = "focus";
|
|
391
|
+
})(TooltipHoverEventEnum || (TooltipHoverEventEnum = {}));
|
|
392
|
+
|
|
393
|
+
class TooltipComponent {
|
|
394
|
+
sanitizer;
|
|
395
|
+
icon = 'pi-info-circle';
|
|
396
|
+
htmlParser = false;
|
|
397
|
+
_text;
|
|
398
|
+
set text(value) {
|
|
399
|
+
if (value && this.htmlParser) {
|
|
400
|
+
const sanitizedValue = this.sanitizer.sanitize(SecurityContext.HTML, value) ?? '';
|
|
401
|
+
const parser = new DOMParser();
|
|
402
|
+
const decodedString = parser.parseFromString(sanitizedValue, 'text/html').documentElement
|
|
403
|
+
.textContent;
|
|
404
|
+
this._text = decodedString ?? '';
|
|
405
|
+
}
|
|
406
|
+
else {
|
|
407
|
+
this._text = value;
|
|
408
|
+
}
|
|
409
|
+
}
|
|
410
|
+
get text() {
|
|
411
|
+
return this._text;
|
|
412
|
+
}
|
|
413
|
+
position = TooltipPosition.right;
|
|
414
|
+
tooltipEvent;
|
|
415
|
+
autoHide = false;
|
|
416
|
+
htmlParse = true;
|
|
417
|
+
tooltip;
|
|
418
|
+
constructor(sanitizer) {
|
|
419
|
+
this.sanitizer = sanitizer;
|
|
420
|
+
}
|
|
421
|
+
ngOnInit() {
|
|
422
|
+
if (window.innerWidth > 768) {
|
|
423
|
+
this.tooltipEvent = TooltipHoverEventEnum.focus;
|
|
424
|
+
}
|
|
425
|
+
}
|
|
426
|
+
onClick() {
|
|
427
|
+
if (window.innerWidth <= 768) {
|
|
428
|
+
this.tooltip.activate();
|
|
429
|
+
}
|
|
430
|
+
}
|
|
431
|
+
onDocumentClick(event) {
|
|
432
|
+
if (!this.tooltip.el.nativeElement.contains(event.target)) {
|
|
433
|
+
this.tooltip.deactivate();
|
|
434
|
+
}
|
|
435
|
+
}
|
|
436
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TooltipComponent, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
437
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TooltipComponent, isStandalone: true, selector: " lib-tooltip", inputs: { icon: "icon", htmlParser: "htmlParser", text: "text", position: "position", tooltipEvent: "tooltipEvent", autoHide: "autoHide", htmlParse: "htmlParse" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: Tooltip, descendants: true }], ngImport: i0, template: "<i\r\n tabindex=\"0\"\r\n class=\"pi {{ icon }}\"\r\n pTooltip=\"{{ text }}\"\r\n [tooltipPosition]=\"position\"\r\n [tooltipEvent]='tooltipEvent'\r\n [autoHide]=\"autoHide\"\r\n [escape]=\"htmlParse\"\r\n (click)=\"onClick()\"\r\n [attr.aria-label]=\"text\"\r\n aria-describedby=\"tooltipId\"\r\n></i>\r\n\r\n<div id=\"tooltipId\" style=\"display: none;\">{{ text }}</div>\r\n\r\n", styles: ["i{color:#3e7c94}\n"], dependencies: [{ kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
438
|
+
}
|
|
439
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
440
|
+
type: Component,
|
|
441
|
+
args: [{ selector: ' lib-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, imports: [Tooltip], template: "<i\r\n tabindex=\"0\"\r\n class=\"pi {{ icon }}\"\r\n pTooltip=\"{{ text }}\"\r\n [tooltipPosition]=\"position\"\r\n [tooltipEvent]='tooltipEvent'\r\n [autoHide]=\"autoHide\"\r\n [escape]=\"htmlParse\"\r\n (click)=\"onClick()\"\r\n [attr.aria-label]=\"text\"\r\n aria-describedby=\"tooltipId\"\r\n></i>\r\n\r\n<div id=\"tooltipId\" style=\"display: none;\">{{ text }}</div>\r\n\r\n", styles: ["i{color:#3e7c94}\n"] }]
|
|
442
|
+
}], ctorParameters: () => [{ type: i1$3.DomSanitizer }], propDecorators: { icon: [{
|
|
443
|
+
type: Input
|
|
444
|
+
}], htmlParser: [{
|
|
445
|
+
type: Input
|
|
446
|
+
}], text: [{
|
|
447
|
+
type: Input
|
|
448
|
+
}], position: [{
|
|
449
|
+
type: Input
|
|
450
|
+
}], tooltipEvent: [{
|
|
451
|
+
type: Input
|
|
452
|
+
}], autoHide: [{
|
|
453
|
+
type: Input
|
|
454
|
+
}], htmlParse: [{
|
|
455
|
+
type: Input
|
|
456
|
+
}], tooltip: [{
|
|
457
|
+
type: ViewChild,
|
|
458
|
+
args: [Tooltip]
|
|
459
|
+
}], onDocumentClick: [{
|
|
460
|
+
type: HostListener,
|
|
461
|
+
args: ['document:click', ['$event']]
|
|
462
|
+
}] } });
|
|
463
|
+
|
|
464
|
+
class ErrorComponent {
|
|
465
|
+
// eslint-disable-next-line
|
|
466
|
+
hasError;
|
|
467
|
+
isTouched = false;
|
|
468
|
+
isSubmitTriggered = false;
|
|
469
|
+
isNestedFormSubmit = false;
|
|
470
|
+
isDirty = false;
|
|
471
|
+
isRequired = false;
|
|
472
|
+
hasGroupError = false;
|
|
473
|
+
errorId;
|
|
474
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
475
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ErrorComponent, isStandalone: true, selector: "lib-error", inputs: { hasError: "hasError", isTouched: "isTouched", isSubmitTriggered: "isSubmitTriggered", isNestedFormSubmit: "isNestedFormSubmit", isDirty: "isDirty", isRequired: "isRequired", hasGroupError: "hasGroupError", errorId: "errorId" }, ngImport: i0, template: "<small class=\"required\" aria-live=\"polite\" [id]=\"errorId\">\r\n <ng-container *ngIf=\"hasError\">\r\n <ng-container *ngIf=\"(isTouched || isSubmitTriggered || isNestedFormSubmit) && hasError.required\">\r\n {{ 'errors.isRequired' | translate }}\r\n </ng-container>\r\n <ng-container *ngIf=\"(isTouched || isSubmitTriggered || isNestedFormSubmit) && !hasError.required && hasError.isNotBlank\">\r\n {{ 'errors.isNotBlank' | translate }}\r\n </ng-container>\r\n <ng-container *ngIf=\"(isTouched || isSubmitTriggered || isNestedFormSubmit) && !hasError.required && !hasError.isNotBlank && hasError.isCoordinate\">\r\n {{ 'errors.isCoordinate' | translate }}\r\n </ng-container>\r\n <ng-container *ngIf=\"((isTouched || isSubmitTriggered || isNestedFormSubmit) && !hasError.required && hasError.isNotDecimal)\">\r\n {{ 'errors.decimal' | translate }}\r\n </ng-container>\r\n <ng-container *ngIf=\"((isTouched || isSubmitTriggered || isNestedFormSubmit) && !hasError.required && hasError.min)\">\r\n {{ 'errors.minNumber' | translate }}\r\n </ng-container>\r\n <ng-container *ngIf=\"((isTouched || isSubmitTriggered || isNestedFormSubmit) && !hasError.required && !hasError.min && hasError.max)\">\r\n {{ 'errors.maxNumber' | translate }}\r\n </ng-container>\r\n <ng-container *ngIf=\"((isTouched || isSubmitTriggered || isNestedFormSubmit) && !hasError.required && hasError.email)\">\r\n {{ 'errors.email' | translate }}\r\n </ng-container>\r\n <ng-container *ngIf=\"((isTouched || isSubmitTriggered || isNestedFormSubmit) && !hasError.required && !hasGroupError && hasError.isNotValidPhoneNumber)\">\r\n {{ 'errors.phoneNumber' | translate }}\r\n </ng-container>\r\n <ng-container *ngIf=\"((isTouched || isSubmitTriggered || isNestedFormSubmit) && !hasError.required && hasError.isMultipleOfFive)\">\r\n {{ 'errors.isMultipleOfFive' | translate }}\r\n </ng-container>\r\n </ng-container>\r\n</small>\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
476
|
+
}
|
|
477
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ErrorComponent, decorators: [{
|
|
478
|
+
type: Component,
|
|
479
|
+
args: [{ selector: 'lib-error', imports: [NgIf, TranslateModule], template: "<small class=\"required\" aria-live=\"polite\" [id]=\"errorId\">\r\n <ng-container *ngIf=\"hasError\">\r\n <ng-container *ngIf=\"(isTouched || isSubmitTriggered || isNestedFormSubmit) && hasError.required\">\r\n {{ 'errors.isRequired' | translate }}\r\n </ng-container>\r\n <ng-container *ngIf=\"(isTouched || isSubmitTriggered || isNestedFormSubmit) && !hasError.required && hasError.isNotBlank\">\r\n {{ 'errors.isNotBlank' | translate }}\r\n </ng-container>\r\n <ng-container *ngIf=\"(isTouched || isSubmitTriggered || isNestedFormSubmit) && !hasError.required && !hasError.isNotBlank && hasError.isCoordinate\">\r\n {{ 'errors.isCoordinate' | translate }}\r\n </ng-container>\r\n <ng-container *ngIf=\"((isTouched || isSubmitTriggered || isNestedFormSubmit) && !hasError.required && hasError.isNotDecimal)\">\r\n {{ 'errors.decimal' | translate }}\r\n </ng-container>\r\n <ng-container *ngIf=\"((isTouched || isSubmitTriggered || isNestedFormSubmit) && !hasError.required && hasError.min)\">\r\n {{ 'errors.minNumber' | translate }}\r\n </ng-container>\r\n <ng-container *ngIf=\"((isTouched || isSubmitTriggered || isNestedFormSubmit) && !hasError.required && !hasError.min && hasError.max)\">\r\n {{ 'errors.maxNumber' | translate }}\r\n </ng-container>\r\n <ng-container *ngIf=\"((isTouched || isSubmitTriggered || isNestedFormSubmit) && !hasError.required && hasError.email)\">\r\n {{ 'errors.email' | translate }}\r\n </ng-container>\r\n <ng-container *ngIf=\"((isTouched || isSubmitTriggered || isNestedFormSubmit) && !hasError.required && !hasGroupError && hasError.isNotValidPhoneNumber)\">\r\n {{ 'errors.phoneNumber' | translate }}\r\n </ng-container>\r\n <ng-container *ngIf=\"((isTouched || isSubmitTriggered || isNestedFormSubmit) && !hasError.required && hasError.isMultipleOfFive)\">\r\n {{ 'errors.isMultipleOfFive' | translate }}\r\n </ng-container>\r\n </ng-container>\r\n</small>\r\n" }]
|
|
480
|
+
}], propDecorators: { hasError: [{
|
|
481
|
+
type: Input
|
|
482
|
+
}], isTouched: [{
|
|
483
|
+
type: Input
|
|
484
|
+
}], isSubmitTriggered: [{
|
|
485
|
+
type: Input
|
|
486
|
+
}], isNestedFormSubmit: [{
|
|
487
|
+
type: Input
|
|
488
|
+
}], isDirty: [{
|
|
489
|
+
type: Input
|
|
490
|
+
}], isRequired: [{
|
|
491
|
+
type: Input
|
|
492
|
+
}], hasGroupError: [{
|
|
493
|
+
type: Input
|
|
494
|
+
}], errorId: [{
|
|
495
|
+
type: Input
|
|
496
|
+
}] } });
|
|
497
|
+
|
|
498
|
+
class InputComponent {
|
|
499
|
+
_isTooltipVisible;
|
|
500
|
+
name;
|
|
501
|
+
type = InputType.text;
|
|
502
|
+
label;
|
|
503
|
+
placeholder;
|
|
504
|
+
accessibilityText = '';
|
|
505
|
+
group;
|
|
506
|
+
controlName;
|
|
507
|
+
isRequired = true;
|
|
508
|
+
isLabelVisible = true;
|
|
509
|
+
tooltipPosition = TooltipPosition.right;
|
|
510
|
+
tooltipText = '';
|
|
511
|
+
formStatus;
|
|
512
|
+
groupError = false;
|
|
513
|
+
hasGap = true;
|
|
514
|
+
hasTitle = false;
|
|
515
|
+
maxLength = null;
|
|
516
|
+
ngOnInit() {
|
|
517
|
+
this._isTooltipVisible = !!this.tooltipText;
|
|
518
|
+
}
|
|
519
|
+
onNumberKeyDown(event) {
|
|
520
|
+
const invalidKeys = ['e', 'E', '+', '-', ',', '.'];
|
|
521
|
+
if (invalidKeys.includes(event.key)) {
|
|
522
|
+
event.preventDefault();
|
|
523
|
+
}
|
|
524
|
+
}
|
|
525
|
+
TooltipHoverEventEnum = TooltipHoverEventEnum;
|
|
526
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
527
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: InputComponent, isStandalone: true, selector: "lib-input[group][controlName][name]", inputs: { name: "name", type: "type", label: "label", placeholder: "placeholder", accessibilityText: "accessibilityText", group: "group", controlName: "controlName", isRequired: "isRequired", isLabelVisible: "isLabelVisible", tooltipPosition: "tooltipPosition", tooltipText: "tooltipText", formStatus: "formStatus", groupError: "groupError", hasGap: "hasGap", hasTitle: "hasTitle", maxLength: "maxLength" }, ngImport: i0, template: "<div class=\"flex flex-column\" [formGroup]=\"group\" [ngClass]=\"{ 'gap-1': hasGap }\">\r\n <div class=\"flex\" *ngIf=\"isLabelVisible\">\r\n <label [title]=\"hasTitle ? label : ''\" [for]='name' class=\"mr-2\">\r\n {{label}}<span class=\"required\" aria-label=\"Is required filed\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <lib-tooltip\r\n *ngIf=\"_isTooltipVisible\"\r\n [position]=\"tooltipPosition\"\r\n [text]=\"tooltipText!\"\r\n ></lib-tooltip>\r\n </div>\r\n <input\r\n [type]='type'\r\n [id]=\"name\"\r\n pInputText\r\n [placeholder]='placeholder ?? \" \"'\r\n [formControlName]=\"controlName\"\r\n [min]=\"type === 'number' && 1\"\r\n [max]=\"type === 'number' && 10\"\r\n [maxlength]=\"maxLength\" \r\n [attr.aria-label]=\"accessibilityText\"\r\n [ngClass]=\"{ 'ng-dirty ng-invalid': (group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered)) || groupError }\"\r\n (keydown)=\"type === 'number' ? onNumberKeyDown($event) : null\"\r\n [attr.aria-describedby]=\"name + 'Error'\"\r\n [attr.aria-invalid]=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered)) || groupError\"\r\n [attr.aria-required]=\"isRequired\"\r\n />\r\n</div>\r\n <lib-error\r\n *ngIf=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered)\"\r\n [hasError]=\"group.get(controlName)!.errors\"\r\n [isTouched]=\"group.get(controlName)!.touched\"\r\n [isSubmitTriggered]=\"formStatus!.isSubmitTriggered!\"\r\n [hasGroupError]=\"groupError\"\r\n [errorId]=\"name+'Error'\"\r\n ></lib-error>\r\n", styles: [".p-component{border:1.75px solid #3E7C94!important}.p-component::placeholder{font-style:italic!important;color:#848484!important}.p-component:hover{border:1.75px solid #ffa142!important}.p-component:focus{box-shadow:0 0 2px 3px #ffa142!important}label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TooltipComponent, selector: " lib-tooltip", inputs: ["icon", "htmlParser", "text", "position", "tooltipEvent", "autoHide", "htmlParse"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "component", type: ErrorComponent, selector: "lib-error", inputs: ["hasError", "isTouched", "isSubmitTriggered", "isNestedFormSubmit", "isDirty", "isRequired", "hasGroupError", "errorId"] }] });
|
|
528
|
+
}
|
|
529
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: InputComponent, decorators: [{
|
|
530
|
+
type: Component,
|
|
531
|
+
args: [{ selector: 'lib-input[group][controlName][name]', imports: [
|
|
532
|
+
FormsModule,
|
|
533
|
+
ReactiveFormsModule,
|
|
534
|
+
NgClass,
|
|
535
|
+
NgIf,
|
|
536
|
+
TooltipComponent,
|
|
537
|
+
InputText,
|
|
538
|
+
ErrorComponent,
|
|
539
|
+
], template: "<div class=\"flex flex-column\" [formGroup]=\"group\" [ngClass]=\"{ 'gap-1': hasGap }\">\r\n <div class=\"flex\" *ngIf=\"isLabelVisible\">\r\n <label [title]=\"hasTitle ? label : ''\" [for]='name' class=\"mr-2\">\r\n {{label}}<span class=\"required\" aria-label=\"Is required filed\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <lib-tooltip\r\n *ngIf=\"_isTooltipVisible\"\r\n [position]=\"tooltipPosition\"\r\n [text]=\"tooltipText!\"\r\n ></lib-tooltip>\r\n </div>\r\n <input\r\n [type]='type'\r\n [id]=\"name\"\r\n pInputText\r\n [placeholder]='placeholder ?? \" \"'\r\n [formControlName]=\"controlName\"\r\n [min]=\"type === 'number' && 1\"\r\n [max]=\"type === 'number' && 10\"\r\n [maxlength]=\"maxLength\" \r\n [attr.aria-label]=\"accessibilityText\"\r\n [ngClass]=\"{ 'ng-dirty ng-invalid': (group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered)) || groupError }\"\r\n (keydown)=\"type === 'number' ? onNumberKeyDown($event) : null\"\r\n [attr.aria-describedby]=\"name + 'Error'\"\r\n [attr.aria-invalid]=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered)) || groupError\"\r\n [attr.aria-required]=\"isRequired\"\r\n />\r\n</div>\r\n <lib-error\r\n *ngIf=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered)\"\r\n [hasError]=\"group.get(controlName)!.errors\"\r\n [isTouched]=\"group.get(controlName)!.touched\"\r\n [isSubmitTriggered]=\"formStatus!.isSubmitTriggered!\"\r\n [hasGroupError]=\"groupError\"\r\n [errorId]=\"name+'Error'\"\r\n ></lib-error>\r\n", styles: [".p-component{border:1.75px solid #3E7C94!important}.p-component::placeholder{font-style:italic!important;color:#848484!important}.p-component:hover{border:1.75px solid #ffa142!important}.p-component:focus{box-shadow:0 0 2px 3px #ffa142!important}label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
540
|
+
}], propDecorators: { name: [{
|
|
541
|
+
type: Input
|
|
542
|
+
}], type: [{
|
|
543
|
+
type: Input
|
|
544
|
+
}], label: [{
|
|
545
|
+
type: Input
|
|
546
|
+
}], placeholder: [{
|
|
547
|
+
type: Input
|
|
548
|
+
}], accessibilityText: [{
|
|
549
|
+
type: Input
|
|
550
|
+
}], group: [{
|
|
551
|
+
type: Input
|
|
552
|
+
}], controlName: [{
|
|
553
|
+
type: Input
|
|
554
|
+
}], isRequired: [{
|
|
555
|
+
type: Input
|
|
556
|
+
}], isLabelVisible: [{
|
|
557
|
+
type: Input
|
|
558
|
+
}], tooltipPosition: [{
|
|
559
|
+
type: Input
|
|
560
|
+
}], tooltipText: [{
|
|
561
|
+
type: Input
|
|
562
|
+
}], formStatus: [{
|
|
563
|
+
type: Input
|
|
564
|
+
}], groupError: [{
|
|
565
|
+
type: Input
|
|
566
|
+
}], hasGap: [{
|
|
567
|
+
type: Input
|
|
568
|
+
}], hasTitle: [{
|
|
569
|
+
type: Input
|
|
570
|
+
}], maxLength: [{
|
|
571
|
+
type: Input
|
|
572
|
+
}] } });
|
|
573
|
+
|
|
574
|
+
class TextareaComponent {
|
|
575
|
+
_isTooltipVisible;
|
|
576
|
+
name;
|
|
577
|
+
resize = false;
|
|
578
|
+
label;
|
|
579
|
+
placeholder = '';
|
|
580
|
+
accessibilityText = '';
|
|
581
|
+
rows = 5;
|
|
582
|
+
cols = 30;
|
|
583
|
+
tooltipPosition = TooltipPosition.right;
|
|
584
|
+
tooltipText = '';
|
|
585
|
+
group;
|
|
586
|
+
controlName;
|
|
587
|
+
isRequired = false;
|
|
588
|
+
formStatus;
|
|
589
|
+
hasGap = true;
|
|
590
|
+
// 2024-03-19; zato da je možno maxlength zaobit v določenih primerih (npr. inline forma na upravni-postopki)
|
|
591
|
+
customMaxLength = 255;
|
|
592
|
+
ngOnInit() {
|
|
593
|
+
this._isTooltipVisible = !!this.tooltipText;
|
|
594
|
+
}
|
|
595
|
+
TooltipHoverEventEnum = TooltipHoverEventEnum;
|
|
596
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
597
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TextareaComponent, isStandalone: true, selector: "lib-textarea[group][controlName][name]", inputs: { name: "name", resize: "resize", label: "label", placeholder: "placeholder", accessibilityText: "accessibilityText", rows: "rows", cols: "cols", tooltipPosition: "tooltipPosition", tooltipText: "tooltipText", group: "group", controlName: "controlName", isRequired: "isRequired", formStatus: "formStatus", hasGap: "hasGap", customMaxLength: "customMaxLength" }, ngImport: i0, template: "<div class=\"card flex flex-column gap-1\" [ngClass]=\"{\r\n 'resize-none': !resize,\r\n 'gap-1': hasGap,\r\n }\" [formGroup]=\"group\">\r\n <div class=\"flex\">\r\n <label [for]=\"name\" class=\"mr-2\">\r\n {{label}}<span class=\"required\" aria-label=\"Is required filed\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <lib-tooltip\r\n *ngIf=\"_isTooltipVisible\"\r\n [position]=\"tooltipPosition\"\r\n [text]=\"tooltipText!\"\r\n ></lib-tooltip>\r\n </div>\r\n <textarea [id]=\"name\"\r\n [rows]=\"rows\"\r\n [cols]=\"cols\"\r\n pTextarea \r\n [maxlength]=\"customMaxLength\"\r\n [placeholder]='placeholder'\r\n [formControlName]=\"controlName\"\r\n [ngClass]=\"{ 'ng-dirty': (group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered) }\"\r\n [attr.aria-label]=\"accessibilityText\"\r\n [attr.aria-describedby]=\"name + 'Error'\"\r\n [attr.aria-invalid]=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered))\"\r\n [attr.aria-required]=\"isRequired\"\r\n ></textarea>\r\n <lib-error\r\n *ngIf=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered)\"\r\n [hasError]=\"group.get(controlName)!.errors\"\r\n [isTouched]=\"group.get(controlName)!.touched\"\r\n [isSubmitTriggered]=\"formStatus!.isSubmitTriggered!\"\r\n [errorId]=\"name+'Error'\"\r\n ></lib-error>\r\n</div>\r\n", styles: [".resize-none textarea{resize:none}:host ::ng-deep .p-textarea{border:1.75px solid #3E7C94!important}:host ::ng-deep .p-textarea::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-textarea:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-textarea:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-inputtext{border:1px solid #1B495A;font-family:Republika,Roboto,sans-serif}:host ::ng-deep .p-inputtext::placeholder{color:#848484}:host ::ng-deep .card{padding:0!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i2$1.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TooltipComponent, selector: " lib-tooltip", inputs: ["icon", "htmlParser", "text", "position", "tooltipEvent", "autoHide", "htmlParse"] }, { kind: "component", type: ErrorComponent, selector: "lib-error", inputs: ["hasError", "isTouched", "isSubmitTriggered", "isNestedFormSubmit", "isDirty", "isRequired", "hasGroupError", "errorId"] }] });
|
|
598
|
+
}
|
|
599
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
600
|
+
type: Component,
|
|
601
|
+
args: [{ selector: 'lib-textarea[group][controlName][name]', imports: [
|
|
602
|
+
NgClass,
|
|
603
|
+
FormsModule,
|
|
604
|
+
ReactiveFormsModule,
|
|
605
|
+
TextareaModule,
|
|
606
|
+
NgIf,
|
|
607
|
+
TooltipComponent,
|
|
608
|
+
ErrorComponent,
|
|
609
|
+
], template: "<div class=\"card flex flex-column gap-1\" [ngClass]=\"{\r\n 'resize-none': !resize,\r\n 'gap-1': hasGap,\r\n }\" [formGroup]=\"group\">\r\n <div class=\"flex\">\r\n <label [for]=\"name\" class=\"mr-2\">\r\n {{label}}<span class=\"required\" aria-label=\"Is required filed\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <lib-tooltip\r\n *ngIf=\"_isTooltipVisible\"\r\n [position]=\"tooltipPosition\"\r\n [text]=\"tooltipText!\"\r\n ></lib-tooltip>\r\n </div>\r\n <textarea [id]=\"name\"\r\n [rows]=\"rows\"\r\n [cols]=\"cols\"\r\n pTextarea \r\n [maxlength]=\"customMaxLength\"\r\n [placeholder]='placeholder'\r\n [formControlName]=\"controlName\"\r\n [ngClass]=\"{ 'ng-dirty': (group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered) }\"\r\n [attr.aria-label]=\"accessibilityText\"\r\n [attr.aria-describedby]=\"name + 'Error'\"\r\n [attr.aria-invalid]=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered))\"\r\n [attr.aria-required]=\"isRequired\"\r\n ></textarea>\r\n <lib-error\r\n *ngIf=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered)\"\r\n [hasError]=\"group.get(controlName)!.errors\"\r\n [isTouched]=\"group.get(controlName)!.touched\"\r\n [isSubmitTriggered]=\"formStatus!.isSubmitTriggered!\"\r\n [errorId]=\"name+'Error'\"\r\n ></lib-error>\r\n</div>\r\n", styles: [".resize-none textarea{resize:none}:host ::ng-deep .p-textarea{border:1.75px solid #3E7C94!important}:host ::ng-deep .p-textarea::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-textarea:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-textarea:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-inputtext{border:1px solid #1B495A;font-family:Republika,Roboto,sans-serif}:host ::ng-deep .p-inputtext::placeholder{color:#848484}:host ::ng-deep .card{padding:0!important}\n"] }]
|
|
610
|
+
}], propDecorators: { name: [{
|
|
611
|
+
type: Input
|
|
612
|
+
}], resize: [{
|
|
613
|
+
type: Input
|
|
614
|
+
}], label: [{
|
|
615
|
+
type: Input
|
|
616
|
+
}], placeholder: [{
|
|
617
|
+
type: Input
|
|
618
|
+
}], accessibilityText: [{
|
|
619
|
+
type: Input
|
|
620
|
+
}], rows: [{
|
|
621
|
+
type: Input
|
|
622
|
+
}], cols: [{
|
|
623
|
+
type: Input
|
|
624
|
+
}], tooltipPosition: [{
|
|
625
|
+
type: Input
|
|
626
|
+
}], tooltipText: [{
|
|
627
|
+
type: Input
|
|
628
|
+
}], group: [{
|
|
629
|
+
type: Input
|
|
630
|
+
}], controlName: [{
|
|
631
|
+
type: Input
|
|
632
|
+
}], isRequired: [{
|
|
633
|
+
type: Input
|
|
634
|
+
}], formStatus: [{
|
|
635
|
+
type: Input
|
|
636
|
+
}], hasGap: [{
|
|
637
|
+
type: Input
|
|
638
|
+
}], customMaxLength: [{
|
|
639
|
+
type: Input
|
|
640
|
+
}] } });
|
|
641
|
+
|
|
642
|
+
var ButtonColor;
|
|
643
|
+
(function (ButtonColor) {
|
|
644
|
+
ButtonColor["primary"] = "primary";
|
|
645
|
+
ButtonColor["secondary"] = "secondary";
|
|
646
|
+
ButtonColor["success"] = "success";
|
|
647
|
+
ButtonColor["info"] = "info";
|
|
648
|
+
ButtonColor["warning"] = "warning";
|
|
649
|
+
ButtonColor["help"] = "help";
|
|
650
|
+
ButtonColor["danger"] = "danger";
|
|
651
|
+
ButtonColor["link"] = "link";
|
|
652
|
+
})(ButtonColor || (ButtonColor = {}));
|
|
653
|
+
|
|
654
|
+
var ButtonIconPosition;
|
|
655
|
+
(function (ButtonIconPosition) {
|
|
656
|
+
ButtonIconPosition["right"] = "right";
|
|
657
|
+
ButtonIconPosition["left"] = "left";
|
|
658
|
+
})(ButtonIconPosition || (ButtonIconPosition = {}));
|
|
659
|
+
|
|
660
|
+
var ButtonSize;
|
|
661
|
+
(function (ButtonSize) {
|
|
662
|
+
ButtonSize["small"] = "p-button p-button-sm";
|
|
663
|
+
ButtonSize["normal"] = "p-button";
|
|
664
|
+
ButtonSize["large"] = "p-button p-button-lg";
|
|
665
|
+
})(ButtonSize || (ButtonSize = {}));
|
|
666
|
+
|
|
667
|
+
class ButtonComponent {
|
|
668
|
+
hasIcon = false;
|
|
669
|
+
label;
|
|
670
|
+
color = ButtonColor.primary;
|
|
671
|
+
icon = 'pi-check';
|
|
672
|
+
iconPos = ButtonIconPosition.right;
|
|
673
|
+
disabled = false;
|
|
674
|
+
isLoading = false;
|
|
675
|
+
// You have the option to add multiple classes, but if you don't add any, the default class will be used instead.
|
|
676
|
+
// p-button-raised, p-button-outlined, p-button-text, p-button-rounded
|
|
677
|
+
styleClass;
|
|
678
|
+
size = ButtonSize.normal;
|
|
679
|
+
accessibilityText = '';
|
|
680
|
+
buttonType = 'button';
|
|
681
|
+
isAccessible = false;
|
|
682
|
+
isSelected = false;
|
|
683
|
+
ariaControlsId = null;
|
|
684
|
+
isExpanded = false;
|
|
685
|
+
clickEvent = new EventEmitter();
|
|
686
|
+
link = false;
|
|
687
|
+
isTextareaClear = false;
|
|
688
|
+
click(event) {
|
|
689
|
+
this.clickEvent.emit(event);
|
|
690
|
+
}
|
|
691
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
692
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ButtonComponent, isStandalone: true, selector: "lib-button", inputs: { hasIcon: "hasIcon", label: "label", color: "color", icon: "icon", iconPos: "iconPos", disabled: "disabled", isLoading: "isLoading", styleClass: "styleClass", size: "size", accessibilityText: "accessibilityText", buttonType: "buttonType", isAccessible: "isAccessible", isSelected: "isSelected", ariaControlsId: "ariaControlsId", isExpanded: "isExpanded", link: "link", isTextareaClear: "isTextareaClear" }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<p-button\r\n *ngIf='!hasIcon'\r\n label=\"{{label}}\"\r\n styleClass=\"p-button-{{color}} {{styleClass}} p-button-{{size}}\"\r\n [disabled]='disabled'\r\n [loading]=\"isLoading\"\r\n (click)='click($event)'\r\n [ariaLabel]=\"accessibilityText\"\r\n [type]=\"buttonType\"\r\n [ngClass]=\"{ 'selected ': isSelected, 'accessible-btn' : isAccessible }\"\r\n [attr.aria-controls]=\"ariaControlsId\"\r\n [attr.aria-expanded]=\"isExpanded\"\r\n [link]=\"link\"\r\n></p-button>\r\n<p-button\r\n *ngIf='hasIcon'\r\n label=\"{{label}}\"\r\n styleClass=\"p-button-{{color}} {{styleClass}} p-button-{{size}}\"\r\n icon='pi {{icon}}'\r\n [iconPos]='iconPos'\r\n [disabled]='disabled'\r\n [loading]=\"isLoading\"\r\n (click)=\"click($event)\"\r\n [ariaLabel]=\"accessibilityText\"\r\n [type]=\"buttonType\"\r\n [ngClass]=\"{ 'selected ': isSelected, 'accessible-btn' : isAccessible }\"\r\n [attr.aria-controls]=\"ariaControlsId\"\r\n [attr.aria-expanded]=\"isExpanded\"\r\n [link]=\"link\"\r\n></p-button>\r\n", styles: [":host ::ng-deep .p-button{width:100%}:host ::ng-deep .p-button:active{background:#1b495a}:host ::ng-deep .p-button.p-button-warning:hover{background:#ffa142;border:1px solid #ffa142}:host ::ng-deep .accessible-btn .p-button{border:15px solid transparent}:host ::ng-deep .selected .p-button{border:15px solid #000000;border-left-color:#6d7375;border-right-color:#6d7375;background-color:#fff;color:#000}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
693
|
+
}
|
|
694
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
695
|
+
type: Component,
|
|
696
|
+
args: [{ selector: 'lib-button', imports: [
|
|
697
|
+
NgIf,
|
|
698
|
+
Button,
|
|
699
|
+
NgClass,
|
|
700
|
+
], template: "<p-button\r\n *ngIf='!hasIcon'\r\n label=\"{{label}}\"\r\n styleClass=\"p-button-{{color}} {{styleClass}} p-button-{{size}}\"\r\n [disabled]='disabled'\r\n [loading]=\"isLoading\"\r\n (click)='click($event)'\r\n [ariaLabel]=\"accessibilityText\"\r\n [type]=\"buttonType\"\r\n [ngClass]=\"{ 'selected ': isSelected, 'accessible-btn' : isAccessible }\"\r\n [attr.aria-controls]=\"ariaControlsId\"\r\n [attr.aria-expanded]=\"isExpanded\"\r\n [link]=\"link\"\r\n></p-button>\r\n<p-button\r\n *ngIf='hasIcon'\r\n label=\"{{label}}\"\r\n styleClass=\"p-button-{{color}} {{styleClass}} p-button-{{size}}\"\r\n icon='pi {{icon}}'\r\n [iconPos]='iconPos'\r\n [disabled]='disabled'\r\n [loading]=\"isLoading\"\r\n (click)=\"click($event)\"\r\n [ariaLabel]=\"accessibilityText\"\r\n [type]=\"buttonType\"\r\n [ngClass]=\"{ 'selected ': isSelected, 'accessible-btn' : isAccessible }\"\r\n [attr.aria-controls]=\"ariaControlsId\"\r\n [attr.aria-expanded]=\"isExpanded\"\r\n [link]=\"link\"\r\n></p-button>\r\n", styles: [":host ::ng-deep .p-button{width:100%}:host ::ng-deep .p-button:active{background:#1b495a}:host ::ng-deep .p-button.p-button-warning:hover{background:#ffa142;border:1px solid #ffa142}:host ::ng-deep .accessible-btn .p-button{border:15px solid transparent}:host ::ng-deep .selected .p-button{border:15px solid #000000;border-left-color:#6d7375;border-right-color:#6d7375;background-color:#fff;color:#000}\n"] }]
|
|
701
|
+
}], propDecorators: { hasIcon: [{
|
|
702
|
+
type: Input
|
|
703
|
+
}], label: [{
|
|
704
|
+
type: Input
|
|
705
|
+
}], color: [{
|
|
706
|
+
type: Input
|
|
707
|
+
}], icon: [{
|
|
708
|
+
type: Input
|
|
709
|
+
}], iconPos: [{
|
|
710
|
+
type: Input
|
|
711
|
+
}], disabled: [{
|
|
712
|
+
type: Input
|
|
713
|
+
}], isLoading: [{
|
|
714
|
+
type: Input
|
|
715
|
+
}], styleClass: [{
|
|
716
|
+
type: Input
|
|
717
|
+
}], size: [{
|
|
718
|
+
type: Input
|
|
719
|
+
}], accessibilityText: [{
|
|
720
|
+
type: Input
|
|
721
|
+
}], buttonType: [{
|
|
722
|
+
type: Input
|
|
723
|
+
}], isAccessible: [{
|
|
724
|
+
type: Input
|
|
725
|
+
}], isSelected: [{
|
|
726
|
+
type: Input
|
|
727
|
+
}], ariaControlsId: [{
|
|
728
|
+
type: Input
|
|
729
|
+
}], isExpanded: [{
|
|
730
|
+
type: Input
|
|
731
|
+
}], clickEvent: [{
|
|
732
|
+
type: Output
|
|
733
|
+
}], link: [{
|
|
734
|
+
type: Input
|
|
735
|
+
}], isTextareaClear: [{
|
|
736
|
+
type: Input
|
|
737
|
+
}] } });
|
|
738
|
+
|
|
739
|
+
class IconButtonComponent {
|
|
740
|
+
icon = 'check';
|
|
741
|
+
disabled = false;
|
|
742
|
+
color = ButtonColor.primary;
|
|
743
|
+
// You have the option to add multiple classes, but if you don't add any, the default class will be used instead.
|
|
744
|
+
// p-button-raised, p-button-outlined, p-button-text, p-button-rounded
|
|
745
|
+
styleClass = 'p-button-raised';
|
|
746
|
+
size = ButtonSize.normal;
|
|
747
|
+
clickEvent = new EventEmitter();
|
|
748
|
+
click(event) {
|
|
749
|
+
this.clickEvent.emit(event);
|
|
750
|
+
}
|
|
751
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
752
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: IconButtonComponent, isStandalone: true, selector: "lib-icon-button", inputs: { icon: "icon", disabled: "disabled", color: "color", styleClass: "styleClass", size: "size" }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<p-button\r\n icon=\"pi pi-{{icon}}\"\r\n styleClass='p-button-{{color}}\r\n {{styleClass}} {{size}}'\r\n [disabled]='disabled'\r\n (click)='click($event)'\r\n></p-button>\r\n", styles: [""], dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }] });
|
|
753
|
+
}
|
|
754
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: IconButtonComponent, decorators: [{
|
|
755
|
+
type: Component,
|
|
756
|
+
args: [{ selector: 'lib-icon-button', imports: [Button], template: "<p-button\r\n icon=\"pi pi-{{icon}}\"\r\n styleClass='p-button-{{color}}\r\n {{styleClass}} {{size}}'\r\n [disabled]='disabled'\r\n (click)='click($event)'\r\n></p-button>\r\n" }]
|
|
757
|
+
}], propDecorators: { icon: [{
|
|
758
|
+
type: Input
|
|
759
|
+
}], disabled: [{
|
|
760
|
+
type: Input
|
|
761
|
+
}], color: [{
|
|
762
|
+
type: Input
|
|
763
|
+
}], styleClass: [{
|
|
764
|
+
type: Input
|
|
765
|
+
}], size: [{
|
|
766
|
+
type: Input
|
|
767
|
+
}], clickEvent: [{
|
|
768
|
+
type: Output
|
|
769
|
+
}] } });
|
|
770
|
+
|
|
771
|
+
var DialogColor;
|
|
772
|
+
(function (DialogColor) {
|
|
773
|
+
DialogColor["primary"] = "primary";
|
|
774
|
+
DialogColor["secondary"] = "secondary";
|
|
775
|
+
DialogColor["info"] = "info";
|
|
776
|
+
DialogColor["warning"] = "warning";
|
|
777
|
+
DialogColor["danger"] = "danger";
|
|
778
|
+
})(DialogColor || (DialogColor = {}));
|
|
779
|
+
|
|
780
|
+
class ModalComponent {
|
|
781
|
+
header = 'Header title';
|
|
782
|
+
headerColor = DialogColor.primary;
|
|
783
|
+
width = '50vw';
|
|
784
|
+
height = '';
|
|
785
|
+
dynamicContentTemplate;
|
|
786
|
+
resizable = false;
|
|
787
|
+
draggable = true;
|
|
788
|
+
visible;
|
|
789
|
+
closable = true;
|
|
790
|
+
modal = false;
|
|
791
|
+
body = 'Body content';
|
|
792
|
+
position = 'top';
|
|
793
|
+
btnLabel = 'Sem prebral/-a';
|
|
794
|
+
btnColor = ButtonColor.success;
|
|
795
|
+
btnIcon = 'pi pi-check';
|
|
796
|
+
hasIcon = true;
|
|
797
|
+
disabled = false;
|
|
798
|
+
hasLeftButton = false;
|
|
799
|
+
leftBtnLabel = 'Zapri';
|
|
800
|
+
leftBtnColor = ButtonColor.danger;
|
|
801
|
+
leftBtnIcon = 'pi pi-times';
|
|
802
|
+
leftHasIcon = true;
|
|
803
|
+
leftDisabled = false;
|
|
804
|
+
buttonClickEvent = new EventEmitter();
|
|
805
|
+
visibleChange = new EventEmitter();
|
|
806
|
+
leftButtonClickEvent = new EventEmitter();
|
|
807
|
+
scrollEvent = new EventEmitter();
|
|
808
|
+
modalClosed = new EventEmitter();
|
|
809
|
+
isFooterVisible = true;
|
|
810
|
+
dismissableMask = false;
|
|
811
|
+
headerClassMap = {
|
|
812
|
+
primary: 'primary',
|
|
813
|
+
secondary: 'secondary',
|
|
814
|
+
info: 'info',
|
|
815
|
+
warning: 'warning',
|
|
816
|
+
danger: 'danger',
|
|
817
|
+
};
|
|
818
|
+
/**
|
|
819
|
+
* Event emitted on clicking added button on bottom of modal
|
|
820
|
+
* @param event mouse click event
|
|
821
|
+
*/
|
|
822
|
+
buttonCloseModal(event) {
|
|
823
|
+
event.stopPropagation();
|
|
824
|
+
this.buttonClickEvent.emit(event);
|
|
825
|
+
}
|
|
826
|
+
/**
|
|
827
|
+
* Event emitted on clicking added button on bottom of modal
|
|
828
|
+
* @param event mouse click event
|
|
829
|
+
*/
|
|
830
|
+
leftButtonClick(event) {
|
|
831
|
+
event.stopPropagation();
|
|
832
|
+
this.leftButtonClickEvent.emit(event);
|
|
833
|
+
}
|
|
834
|
+
changeVisibility(newVisibility) {
|
|
835
|
+
this.visible = newVisibility;
|
|
836
|
+
this.visibleChange.emit(this.visible);
|
|
837
|
+
}
|
|
838
|
+
handleHide() {
|
|
839
|
+
this.changeVisibility(false);
|
|
840
|
+
}
|
|
841
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
842
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ModalComponent, isStandalone: true, selector: "lib-modal", inputs: { header: "header", headerColor: "headerColor", width: "width", height: "height", dynamicContentTemplate: "dynamicContentTemplate", resizable: "resizable", draggable: "draggable", visible: "visible", closable: "closable", modal: "modal", body: "body", position: "position", btnLabel: "btnLabel", btnColor: "btnColor", btnIcon: "btnIcon", hasIcon: "hasIcon", disabled: "disabled", hasLeftButton: "hasLeftButton", leftBtnLabel: "leftBtnLabel", leftBtnColor: "leftBtnColor", leftBtnIcon: "leftBtnIcon", leftHasIcon: "leftHasIcon", leftDisabled: "leftDisabled", isFooterVisible: "isFooterVisible", dismissableMask: "dismissableMask" }, outputs: { buttonClickEvent: "buttonClickEvent", visibleChange: "visibleChange", leftButtonClickEvent: "leftButtonClickEvent", scrollEvent: "scrollEvent", modalClosed: "modalClosed" }, ngImport: i0, template: "<p-dialog [header]='header' [position]='position' [(visible)]='visible' [modal]='modal' [draggable]='draggable'\r\n [resizable]='resizable' [style]=\"{width: width, height: height, zindex: 10000}\"\r\n [dismissableMask]=\"dismissableMask\"\r\n [ngClass]=\"headerClassMap[headerColor]\" [closable]=\"closable\"\r\n [footerTemplate]=\"isFooterVisible ? footer : undefined\"\r\n (onHide)=\"handleHide()\" closeTabindex=\"0\">\r\n <ng-template pTemplate=\"content\">\r\n <ng-container [ngTemplateOutlet]=\"dynamicContentTemplate\"></ng-container>\r\n </ng-template>\r\n</p-dialog>\r\n\r\n<ng-template #footer>\r\n <div class=\"w-full flex\"\r\n [ngClass]=\"{'justify-content-end': !hasLeftButton, 'justify-content-between': hasLeftButton}\">\r\n <lib-button\r\n *ngIf=\"hasLeftButton\"\r\n [disabled]=\"leftDisabled\"\r\n (click)=\"leftButtonClick($event)\"\r\n [label]=\"leftBtnLabel\"\r\n [color]=\"leftBtnColor\"\r\n [icon]=\"leftBtnIcon\"\r\n [hasIcon]=\"leftHasIcon\"\r\n ></lib-button>\r\n <lib-button\r\n [disabled]=\"disabled\"\r\n (click)=\"buttonCloseModal($event)\"\r\n [label]=\"btnLabel\"\r\n [color]=\"btnColor\"\r\n [icon]=\"btnIcon\"\r\n [hasIcon]=\"hasIcon\"\r\n ></lib-button>\r\n </div>\r\n</ng-template>\r\n\r\n", styles: [":host ::ng-deep .info .p-dialog .p-dialog-header{background:#529bda!important;color:#fff!important}:host ::ng-deep .info .p-dialog .p-dialog-header .p-dialog-header-icon{color:#fff!important}:host ::ng-deep .secondary .p-dialog .p-dialog-header{background:#facd9c!important}:host ::ng-deep .warning .p-dialog .p-dialog-header{background:#fdca40!important}:host ::ng-deep .danger .p-dialog .p-dialog-header{background:#b2414d!important;color:#fff!important}:host ::ng-deep .danger .p-dialog .p-dialog-header .p-dialog-header-icon{color:#fff!important}@media screen and (max-width: 768px){:host ::ng-deep .primary .p-dialog{width:90vw!important;height:90vh!important}}:host ::ng-deep .primary .p-dialog .p-dialog-header{background:#3e7c94!important;color:#fff!important}:host ::ng-deep .primary .p-dialog .p-dialog-header .p-dialog-header-icon{color:#fff!important}@media screen and (max-width: 768px){:host ::ng-deep .primary .p-dialog .p-dialog-header .p-dialog-title{font-weight:500;font-size:1rem}}@media screen and (max-width: 768px){:host ::ng-deep .primary .p-dialog .p-dialog-content{padding:1rem}:host ::ng-deep .primary .p-dialog .p-dialog-content p{font-size:15px}}:host ::ng-deep .p-dialog .p-dialog-footer button{margin:0!important}\n"], dependencies: [{ kind: "component", type: Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["hasIcon", "label", "color", "icon", "iconPos", "disabled", "isLoading", "styleClass", "size", "accessibilityText", "buttonType", "isAccessible", "isSelected", "ariaControlsId", "isExpanded", "link", "isTextareaClear"], outputs: ["clickEvent"] }] });
|
|
843
|
+
}
|
|
844
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ModalComponent, decorators: [{
|
|
845
|
+
type: Component,
|
|
846
|
+
args: [{ selector: 'lib-modal', imports: [
|
|
847
|
+
Dialog,
|
|
848
|
+
NgClass,
|
|
849
|
+
PrimeTemplate,
|
|
850
|
+
NgTemplateOutlet,
|
|
851
|
+
NgIf,
|
|
852
|
+
ButtonComponent,
|
|
853
|
+
], template: "<p-dialog [header]='header' [position]='position' [(visible)]='visible' [modal]='modal' [draggable]='draggable'\r\n [resizable]='resizable' [style]=\"{width: width, height: height, zindex: 10000}\"\r\n [dismissableMask]=\"dismissableMask\"\r\n [ngClass]=\"headerClassMap[headerColor]\" [closable]=\"closable\"\r\n [footerTemplate]=\"isFooterVisible ? footer : undefined\"\r\n (onHide)=\"handleHide()\" closeTabindex=\"0\">\r\n <ng-template pTemplate=\"content\">\r\n <ng-container [ngTemplateOutlet]=\"dynamicContentTemplate\"></ng-container>\r\n </ng-template>\r\n</p-dialog>\r\n\r\n<ng-template #footer>\r\n <div class=\"w-full flex\"\r\n [ngClass]=\"{'justify-content-end': !hasLeftButton, 'justify-content-between': hasLeftButton}\">\r\n <lib-button\r\n *ngIf=\"hasLeftButton\"\r\n [disabled]=\"leftDisabled\"\r\n (click)=\"leftButtonClick($event)\"\r\n [label]=\"leftBtnLabel\"\r\n [color]=\"leftBtnColor\"\r\n [icon]=\"leftBtnIcon\"\r\n [hasIcon]=\"leftHasIcon\"\r\n ></lib-button>\r\n <lib-button\r\n [disabled]=\"disabled\"\r\n (click)=\"buttonCloseModal($event)\"\r\n [label]=\"btnLabel\"\r\n [color]=\"btnColor\"\r\n [icon]=\"btnIcon\"\r\n [hasIcon]=\"hasIcon\"\r\n ></lib-button>\r\n </div>\r\n</ng-template>\r\n\r\n", styles: [":host ::ng-deep .info .p-dialog .p-dialog-header{background:#529bda!important;color:#fff!important}:host ::ng-deep .info .p-dialog .p-dialog-header .p-dialog-header-icon{color:#fff!important}:host ::ng-deep .secondary .p-dialog .p-dialog-header{background:#facd9c!important}:host ::ng-deep .warning .p-dialog .p-dialog-header{background:#fdca40!important}:host ::ng-deep .danger .p-dialog .p-dialog-header{background:#b2414d!important;color:#fff!important}:host ::ng-deep .danger .p-dialog .p-dialog-header .p-dialog-header-icon{color:#fff!important}@media screen and (max-width: 768px){:host ::ng-deep .primary .p-dialog{width:90vw!important;height:90vh!important}}:host ::ng-deep .primary .p-dialog .p-dialog-header{background:#3e7c94!important;color:#fff!important}:host ::ng-deep .primary .p-dialog .p-dialog-header .p-dialog-header-icon{color:#fff!important}@media screen and (max-width: 768px){:host ::ng-deep .primary .p-dialog .p-dialog-header .p-dialog-title{font-weight:500;font-size:1rem}}@media screen and (max-width: 768px){:host ::ng-deep .primary .p-dialog .p-dialog-content{padding:1rem}:host ::ng-deep .primary .p-dialog .p-dialog-content p{font-size:15px}}:host ::ng-deep .p-dialog .p-dialog-footer button{margin:0!important}\n"] }]
|
|
854
|
+
}], propDecorators: { header: [{
|
|
855
|
+
type: Input
|
|
856
|
+
}], headerColor: [{
|
|
857
|
+
type: Input
|
|
858
|
+
}], width: [{
|
|
859
|
+
type: Input
|
|
860
|
+
}], height: [{
|
|
861
|
+
type: Input
|
|
862
|
+
}], dynamicContentTemplate: [{
|
|
863
|
+
type: Input
|
|
864
|
+
}], resizable: [{
|
|
865
|
+
type: Input
|
|
866
|
+
}], draggable: [{
|
|
867
|
+
type: Input
|
|
868
|
+
}], visible: [{
|
|
869
|
+
type: Input
|
|
870
|
+
}], closable: [{
|
|
871
|
+
type: Input
|
|
872
|
+
}], modal: [{
|
|
873
|
+
type: Input
|
|
874
|
+
}], body: [{
|
|
875
|
+
type: Input
|
|
876
|
+
}], position: [{
|
|
877
|
+
type: Input
|
|
878
|
+
}], btnLabel: [{
|
|
879
|
+
type: Input
|
|
880
|
+
}], btnColor: [{
|
|
881
|
+
type: Input
|
|
882
|
+
}], btnIcon: [{
|
|
883
|
+
type: Input
|
|
884
|
+
}], hasIcon: [{
|
|
885
|
+
type: Input
|
|
886
|
+
}], disabled: [{
|
|
887
|
+
type: Input
|
|
888
|
+
}], hasLeftButton: [{
|
|
889
|
+
type: Input
|
|
890
|
+
}], leftBtnLabel: [{
|
|
891
|
+
type: Input
|
|
892
|
+
}], leftBtnColor: [{
|
|
893
|
+
type: Input
|
|
894
|
+
}], leftBtnIcon: [{
|
|
895
|
+
type: Input
|
|
896
|
+
}], leftHasIcon: [{
|
|
897
|
+
type: Input
|
|
898
|
+
}], leftDisabled: [{
|
|
899
|
+
type: Input
|
|
900
|
+
}], buttonClickEvent: [{
|
|
901
|
+
type: Output
|
|
902
|
+
}], visibleChange: [{
|
|
903
|
+
type: Output
|
|
904
|
+
}], leftButtonClickEvent: [{
|
|
905
|
+
type: Output
|
|
906
|
+
}], scrollEvent: [{
|
|
907
|
+
type: Output
|
|
908
|
+
}], modalClosed: [{
|
|
909
|
+
type: Output
|
|
910
|
+
}], isFooterVisible: [{
|
|
911
|
+
type: Input
|
|
912
|
+
}], dismissableMask: [{
|
|
913
|
+
type: Input
|
|
914
|
+
}] } });
|
|
915
|
+
|
|
916
|
+
class DropdownComponent {
|
|
917
|
+
translateService;
|
|
918
|
+
TooltipHoverEventEnum = TooltipHoverEventEnum;
|
|
919
|
+
_isTooltipVisible;
|
|
920
|
+
dynamicItemsLabel;
|
|
921
|
+
name;
|
|
922
|
+
isMultiselect = false;
|
|
923
|
+
selectedItemLabel = 'Izbrano število:';
|
|
924
|
+
group;
|
|
925
|
+
controlName;
|
|
926
|
+
label = '';
|
|
927
|
+
optionList = [];
|
|
928
|
+
optionLabel = 'name';
|
|
929
|
+
optionalValue = 'value';
|
|
930
|
+
placeholder = '';
|
|
931
|
+
accessibilityText = '';
|
|
932
|
+
filter = true;
|
|
933
|
+
filterBy = 'name';
|
|
934
|
+
showClear = true;
|
|
935
|
+
isRequired = true;
|
|
936
|
+
tooltipPosition = TooltipPosition.right;
|
|
937
|
+
tooltipText = '';
|
|
938
|
+
formStatus;
|
|
939
|
+
nestedGroup = false;
|
|
940
|
+
isLoading = false;
|
|
941
|
+
appendTo;
|
|
942
|
+
isLabelVisible = true;
|
|
943
|
+
emptyMessage;
|
|
944
|
+
virtualScroll = false;
|
|
945
|
+
ariaFilterLabel;
|
|
946
|
+
optionValue;
|
|
947
|
+
getValueEvent = new EventEmitter();
|
|
948
|
+
constructor(translateService) {
|
|
949
|
+
this.translateService = translateService;
|
|
950
|
+
}
|
|
951
|
+
getSelectedValue(event) {
|
|
952
|
+
this.getValueEvent.emit(event);
|
|
953
|
+
}
|
|
954
|
+
ngOnInit() {
|
|
955
|
+
this._isTooltipVisible = !!this.tooltipText;
|
|
956
|
+
this.dynamicItemsLabel = this.selectedItemLabel + ' {0}';
|
|
957
|
+
}
|
|
958
|
+
onClear() {
|
|
959
|
+
this.group.get(this.controlName)?.setValue(null);
|
|
960
|
+
}
|
|
961
|
+
get emptyDropdownMessage() {
|
|
962
|
+
if (this.emptyMessage) {
|
|
963
|
+
return this.emptyMessage;
|
|
964
|
+
}
|
|
965
|
+
else {
|
|
966
|
+
return this.translateService.instant('components.dropdown.emptyList');
|
|
967
|
+
}
|
|
968
|
+
}
|
|
969
|
+
get emptyFilterDropdownMessage() {
|
|
970
|
+
return this.translateService.instant('components.dropdown.emptyFilterList');
|
|
971
|
+
}
|
|
972
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DropdownComponent, deps: [{ token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
973
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: DropdownComponent, isStandalone: true, selector: "lib-dropdown[group][controlName][name]", inputs: { name: "name", isMultiselect: "isMultiselect", selectedItemLabel: "selectedItemLabel", group: "group", controlName: "controlName", label: "label", optionList: "optionList", optionLabel: "optionLabel", optionalValue: "optionalValue", placeholder: "placeholder", accessibilityText: "accessibilityText", filter: "filter", filterBy: "filterBy", showClear: "showClear", isRequired: "isRequired", tooltipPosition: "tooltipPosition", tooltipText: "tooltipText", formStatus: "formStatus", nestedGroup: "nestedGroup", isLoading: "isLoading", appendTo: "appendTo", isLabelVisible: "isLabelVisible", emptyMessage: "emptyMessage", virtualScroll: "virtualScroll", ariaFilterLabel: "ariaFilterLabel", optionValue: "optionValue" }, outputs: { getValueEvent: "getValueEvent" }, ngImport: i0, template: "<div class='flex flex-column gap-1' [formGroup]=\"group\">\r\n <div class=\"flex\" *ngIf=\"isLabelVisible\">\r\n <label [for]=\"name\" class=\"mr-2\">\r\n {{ label }}<span class=\"required\" aria-label=\"Is required filed\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <lib-tooltip\r\n *ngIf=\"_isTooltipVisible\"\r\n [position]=\"tooltipPosition\"\r\n [text]=\"tooltipText!\"\r\n ></lib-tooltip>\r\n </div>\r\n <p-select *ngIf=\"!isMultiselect\"\r\n [inputId]=\"name\"\r\n [appendTo]=\"appendTo\"\r\n (onChange)='getSelectedValue($event)'\r\n [options]=\"optionList\"\r\n [optionLabel]=\"!nestedGroup ? optionLabel : undefined\"\r\n [formControlName]=\"controlName\"\r\n [placeholder]='placeholder'\r\n [virtualScroll]=\"virtualScroll\"\r\n [virtualScrollItemSize]=\"38\"\r\n [group]=\"nestedGroup\"\r\n [filter]='filter'\r\n [filterBy]='filterBy'\r\n [showClear]=\"group.get(controlName)?.value && showClear\"\r\n [ngClass]=\"{ 'ng-dirty': (group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered || formStatus!.isNestedFormSubmit!) }\"\r\n [attr.aria-label]=\"accessibilityText\"\r\n (onClear)=\"onClear()\"\r\n [optionValue]=\"optionValue\"\r\n [emptyMessage]=\"emptyDropdownMessage\"\r\n [emptyFilterMessage]=\"emptyFilterDropdownMessage\"\r\n [dropdownIcon]=\"isLoading ? 'pi pi-spinner pi-spin' : 'pi pi-chevron-down'\"\r\n [ariaFilterLabel]=\"ariaFilterLabel!\"\r\n [attr.aria-describedby]=\"name + 'Error'\"\r\n [attr.aria-invalid]=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered))\"\r\n [attr.aria-required]=\"isRequired\"\r\n >\r\n <ng-template *ngIf=\"nestedGroup\" let-nestedGroup pTemplate=\"nestedGroup\">\r\n <div class=\"flex align-items-center\">\r\n <span>{{ nestedGroup.label }}</span>\r\n </div>\r\n </ng-template>\r\n </p-select>\r\n <p-multiselect\r\n *ngIf=\"isMultiselect\"\r\n [inputId]=\"name\"\r\n [appendTo]=\"appendTo\"\r\n (onChange)='getSelectedValue($event)'\r\n [options]=\"optionList\"\r\n [optionLabel]=\"!nestedGroup ? optionLabel : ''\"\r\n [formControlName]=\"controlName\"\r\n [optionValue]=\"optionValue\"\r\n [virtualScroll]=\"virtualScroll\"\r\n [virtualScrollItemSize]=\"38\"\r\n [group]=\"nestedGroup\"\r\n [filter]='filter'\r\n [filterBy]='filterBy'\r\n [selectedItemsLabel]=\"dynamicItemsLabel\"\r\n [placeholder]=\"placeholder\"\r\n [showClear]=\"group.get(controlName)!.value && showClear\"\r\n [ngClass]=\"{ 'ng-dirty': (group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered || formStatus!.isNestedFormSubmit!) }\"\r\n [attr.aria-label]=\"accessibilityText\"\r\n (onClear)=\"onClear()\"\r\n [emptyMessage]=\"emptyDropdownMessage\"\r\n [emptyFilterMessage]=\"emptyFilterDropdownMessage\"\r\n [dropdownIcon]=\"isLoading ? 'pi pi-spinner pi-spin' : 'pi pi-chevron-down'\"\r\n [attr.aria-describedby]=\"name + 'Error'\"\r\n [attr.aria-invalid]=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered))\"\r\n [attr.aria-required]=\"isRequired\"\r\n >\r\n <ng-template *ngIf=\"nestedGroup\" let-nestedGroup pTemplate=\"nestedGroup\">\r\n <div class=\"flex align-items-center\">\r\n <span>{{ nestedGroup.label }}</span>\r\n </div>\r\n </ng-template>\r\n </p-multiselect>\r\n <lib-error\r\n *ngIf=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered || formStatus!.isNestedFormSubmit!)\"\r\n [hasError]=\"group.get(controlName)!.errors\"\r\n [isDirty]=\"group.get(controlName)!.pristine\"\r\n [isTouched]=\"group.get(controlName)!.touched\"\r\n [isSubmitTriggered]=\"formStatus!.isSubmitTriggered!\"\r\n [isNestedFormSubmit]=\"formStatus!.isNestedFormSubmit!\"\r\n [errorId]=\"name+'Error'\"\r\n ></lib-error>\r\n</div>\r\n", styles: [":host ::ng-deep .p-select-filter{border:1.75px solid #3E7C94!important}:host ::ng-deep .p-select-filter::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-select-filter:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-select-filter:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-select{width:100%;height:39px;border:1.75px solid #3E7C94!important}:host ::ng-deep .p-select::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-select:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-select:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-select .p-select-item.p-ripple{white-space:normal}:host ::ng-deep .p-select:not(.p-disabled).p-focus{border:1.75px solid #1B495A;box-shadow:0 0 2px 3px #ffa142}:host ::ng-deep .p-select:not(.p-disabled).p-focus span{outline:none}:host ::ng-deep .p-select .p-select-header{background-color:#3e7c94}:host ::ng-deep .p-select .p-select-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-select .p-select-panel .p-select-items .p-select-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-select .p-select-panel .p-select-items .p-select-item.p-focus{background:#d3d3d3;color:#000}:host ::ng-deep .p-select .p-select-panel .p-select-items .p-select-item-group:hover{cursor:default}:host ::ng-deep .p-select .p-select-panel .p-select-header .p-select-filter-icon{top:.75rem}:host ::ng-deep .p-multiselect{width:100%;border:1.75px solid #3E7C94!important}:host ::ng-deep .p-multiselect::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-multiselect:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-multiselect:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-multiselect:not(.p-disabled).p-focus{border:1.75px solid #1B495A;box-shadow:0 0 2px 3px #ffa142}:host ::ng-deep .p-multiselect .p-multiselect-item{white-space:normal}:host ::ng-deep .p-multiselect .containerClass .p-multiselect .p-multiselect-label-container,:host ::ng-deep .p-multiselect .containerClass .p-multiselect .p-multiselect-label{width:100%;box-sizing:border-box}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item-group:hover{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TooltipComponent, selector: " lib-tooltip", inputs: ["icon", "htmlParser", "text", "position", "tooltipEvent", "autoHide", "htmlParse"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: ErrorComponent, selector: "lib-error", inputs: ["hasError", "isTouched", "isSubmitTriggered", "isNestedFormSubmit", "isDirty", "isRequired", "hasGroupError", "errorId"] }] });
|
|
974
|
+
}
|
|
975
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
976
|
+
type: Component,
|
|
977
|
+
args: [{ selector: 'lib-dropdown[group][controlName][name]', imports: [
|
|
978
|
+
FormsModule,
|
|
979
|
+
ReactiveFormsModule,
|
|
980
|
+
NgIf,
|
|
981
|
+
TooltipComponent,
|
|
982
|
+
SelectModule,
|
|
983
|
+
NgClass,
|
|
984
|
+
PrimeTemplate,
|
|
985
|
+
MultiSelectModule,
|
|
986
|
+
ErrorComponent,
|
|
987
|
+
], template: "<div class='flex flex-column gap-1' [formGroup]=\"group\">\r\n <div class=\"flex\" *ngIf=\"isLabelVisible\">\r\n <label [for]=\"name\" class=\"mr-2\">\r\n {{ label }}<span class=\"required\" aria-label=\"Is required filed\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <lib-tooltip\r\n *ngIf=\"_isTooltipVisible\"\r\n [position]=\"tooltipPosition\"\r\n [text]=\"tooltipText!\"\r\n ></lib-tooltip>\r\n </div>\r\n <p-select *ngIf=\"!isMultiselect\"\r\n [inputId]=\"name\"\r\n [appendTo]=\"appendTo\"\r\n (onChange)='getSelectedValue($event)'\r\n [options]=\"optionList\"\r\n [optionLabel]=\"!nestedGroup ? optionLabel : undefined\"\r\n [formControlName]=\"controlName\"\r\n [placeholder]='placeholder'\r\n [virtualScroll]=\"virtualScroll\"\r\n [virtualScrollItemSize]=\"38\"\r\n [group]=\"nestedGroup\"\r\n [filter]='filter'\r\n [filterBy]='filterBy'\r\n [showClear]=\"group.get(controlName)?.value && showClear\"\r\n [ngClass]=\"{ 'ng-dirty': (group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered || formStatus!.isNestedFormSubmit!) }\"\r\n [attr.aria-label]=\"accessibilityText\"\r\n (onClear)=\"onClear()\"\r\n [optionValue]=\"optionValue\"\r\n [emptyMessage]=\"emptyDropdownMessage\"\r\n [emptyFilterMessage]=\"emptyFilterDropdownMessage\"\r\n [dropdownIcon]=\"isLoading ? 'pi pi-spinner pi-spin' : 'pi pi-chevron-down'\"\r\n [ariaFilterLabel]=\"ariaFilterLabel!\"\r\n [attr.aria-describedby]=\"name + 'Error'\"\r\n [attr.aria-invalid]=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered))\"\r\n [attr.aria-required]=\"isRequired\"\r\n >\r\n <ng-template *ngIf=\"nestedGroup\" let-nestedGroup pTemplate=\"nestedGroup\">\r\n <div class=\"flex align-items-center\">\r\n <span>{{ nestedGroup.label }}</span>\r\n </div>\r\n </ng-template>\r\n </p-select>\r\n <p-multiselect\r\n *ngIf=\"isMultiselect\"\r\n [inputId]=\"name\"\r\n [appendTo]=\"appendTo\"\r\n (onChange)='getSelectedValue($event)'\r\n [options]=\"optionList\"\r\n [optionLabel]=\"!nestedGroup ? optionLabel : ''\"\r\n [formControlName]=\"controlName\"\r\n [optionValue]=\"optionValue\"\r\n [virtualScroll]=\"virtualScroll\"\r\n [virtualScrollItemSize]=\"38\"\r\n [group]=\"nestedGroup\"\r\n [filter]='filter'\r\n [filterBy]='filterBy'\r\n [selectedItemsLabel]=\"dynamicItemsLabel\"\r\n [placeholder]=\"placeholder\"\r\n [showClear]=\"group.get(controlName)!.value && showClear\"\r\n [ngClass]=\"{ 'ng-dirty': (group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered || formStatus!.isNestedFormSubmit!) }\"\r\n [attr.aria-label]=\"accessibilityText\"\r\n (onClear)=\"onClear()\"\r\n [emptyMessage]=\"emptyDropdownMessage\"\r\n [emptyFilterMessage]=\"emptyFilterDropdownMessage\"\r\n [dropdownIcon]=\"isLoading ? 'pi pi-spinner pi-spin' : 'pi pi-chevron-down'\"\r\n [attr.aria-describedby]=\"name + 'Error'\"\r\n [attr.aria-invalid]=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered))\"\r\n [attr.aria-required]=\"isRequired\"\r\n >\r\n <ng-template *ngIf=\"nestedGroup\" let-nestedGroup pTemplate=\"nestedGroup\">\r\n <div class=\"flex align-items-center\">\r\n <span>{{ nestedGroup.label }}</span>\r\n </div>\r\n </ng-template>\r\n </p-multiselect>\r\n <lib-error\r\n *ngIf=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered || formStatus!.isNestedFormSubmit!)\"\r\n [hasError]=\"group.get(controlName)!.errors\"\r\n [isDirty]=\"group.get(controlName)!.pristine\"\r\n [isTouched]=\"group.get(controlName)!.touched\"\r\n [isSubmitTriggered]=\"formStatus!.isSubmitTriggered!\"\r\n [isNestedFormSubmit]=\"formStatus!.isNestedFormSubmit!\"\r\n [errorId]=\"name+'Error'\"\r\n ></lib-error>\r\n</div>\r\n", styles: [":host ::ng-deep .p-select-filter{border:1.75px solid #3E7C94!important}:host ::ng-deep .p-select-filter::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-select-filter:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-select-filter:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-select{width:100%;height:39px;border:1.75px solid #3E7C94!important}:host ::ng-deep .p-select::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-select:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-select:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-select .p-select-item.p-ripple{white-space:normal}:host ::ng-deep .p-select:not(.p-disabled).p-focus{border:1.75px solid #1B495A;box-shadow:0 0 2px 3px #ffa142}:host ::ng-deep .p-select:not(.p-disabled).p-focus span{outline:none}:host ::ng-deep .p-select .p-select-header{background-color:#3e7c94}:host ::ng-deep .p-select .p-select-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-select .p-select-panel .p-select-items .p-select-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-select .p-select-panel .p-select-items .p-select-item.p-focus{background:#d3d3d3;color:#000}:host ::ng-deep .p-select .p-select-panel .p-select-items .p-select-item-group:hover{cursor:default}:host ::ng-deep .p-select .p-select-panel .p-select-header .p-select-filter-icon{top:.75rem}:host ::ng-deep .p-multiselect{width:100%;border:1.75px solid #3E7C94!important}:host ::ng-deep .p-multiselect::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-multiselect:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-multiselect:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-multiselect:not(.p-disabled).p-focus{border:1.75px solid #1B495A;box-shadow:0 0 2px 3px #ffa142}:host ::ng-deep .p-multiselect .p-multiselect-item{white-space:normal}:host ::ng-deep .p-multiselect .containerClass .p-multiselect .p-multiselect-label-container,:host ::ng-deep .p-multiselect .containerClass .p-multiselect .p-multiselect-label{width:100%;box-sizing:border-box}:host ::ng-deep .p-multiselect .p-multiselect-label.p-placeholder{font-style:italic;color:#848484}:host ::ng-deep .p-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight{background:#3e7c94}:host ::ng-deep .p-multiselect .p-multiselect-panel .p-multiselect-items .p-multiselect-item-group:hover{cursor:default}\n"] }]
|
|
988
|
+
}], ctorParameters: () => [{ type: i2.TranslateService }], propDecorators: { name: [{
|
|
989
|
+
type: Input
|
|
990
|
+
}], isMultiselect: [{
|
|
991
|
+
type: Input
|
|
992
|
+
}], selectedItemLabel: [{
|
|
993
|
+
type: Input
|
|
994
|
+
}], group: [{
|
|
995
|
+
type: Input
|
|
996
|
+
}], controlName: [{
|
|
997
|
+
type: Input
|
|
998
|
+
}], label: [{
|
|
999
|
+
type: Input
|
|
1000
|
+
}], optionList: [{
|
|
1001
|
+
type: Input
|
|
1002
|
+
}], optionLabel: [{
|
|
1003
|
+
type: Input
|
|
1004
|
+
}], optionalValue: [{
|
|
1005
|
+
type: Input
|
|
1006
|
+
}], placeholder: [{
|
|
1007
|
+
type: Input
|
|
1008
|
+
}], accessibilityText: [{
|
|
1009
|
+
type: Input
|
|
1010
|
+
}], filter: [{
|
|
1011
|
+
type: Input
|
|
1012
|
+
}], filterBy: [{
|
|
1013
|
+
type: Input
|
|
1014
|
+
}], showClear: [{
|
|
1015
|
+
type: Input
|
|
1016
|
+
}], isRequired: [{
|
|
1017
|
+
type: Input
|
|
1018
|
+
}], tooltipPosition: [{
|
|
1019
|
+
type: Input
|
|
1020
|
+
}], tooltipText: [{
|
|
1021
|
+
type: Input
|
|
1022
|
+
}], formStatus: [{
|
|
1023
|
+
type: Input
|
|
1024
|
+
}], nestedGroup: [{
|
|
1025
|
+
type: Input
|
|
1026
|
+
}], isLoading: [{
|
|
1027
|
+
type: Input
|
|
1028
|
+
}], appendTo: [{
|
|
1029
|
+
type: Input
|
|
1030
|
+
}], isLabelVisible: [{
|
|
1031
|
+
type: Input
|
|
1032
|
+
}], emptyMessage: [{
|
|
1033
|
+
type: Input
|
|
1034
|
+
}], virtualScroll: [{
|
|
1035
|
+
type: Input
|
|
1036
|
+
}], ariaFilterLabel: [{
|
|
1037
|
+
type: Input
|
|
1038
|
+
}], optionValue: [{
|
|
1039
|
+
type: Input
|
|
1040
|
+
}], getValueEvent: [{
|
|
1041
|
+
type: Output
|
|
1042
|
+
}] } });
|
|
1043
|
+
|
|
1044
|
+
class BreadcrumbsComponent {
|
|
1045
|
+
itemList = [];
|
|
1046
|
+
homeItem = {};
|
|
1047
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1048
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: BreadcrumbsComponent, isStandalone: true, selector: "lib-breadcrumbs[itemList][homeItem]", inputs: { itemList: "itemList", homeItem: "homeItem" }, ngImport: i0, template: "<p-breadcrumb\r\n class=\"max-w-full\"\r\n [model]=\"itemList\"\r\n [home]=\"homeItem\"\r\n>\r\n <ng-template pTemplate=\"separator\"> > </ng-template>\r\n</p-breadcrumb>\r\n<!--<lib-divider></lib-divider>-->\r\n", styles: [":host ::ng-deep .p-breadcrumb{background:transparent;padding:0}:host ::ng-deep .p-breadcrumb ul li .p-menuitem-link .p-menuitem-text{color:#1b495a}:host ::ng-deep .p-breadcrumb .p-element:hover{text-decoration:underline;color:#3e7c94}:host ::ng-deep .p-breadcrumb .p-element:last-child{pointer-events:none;color:#000}:host ::ng-deep .p-breadcrumb .p-element:last-child:hover{text-decoration:none}:host ::ng-deep .p-breadcrumb .p-breadcrumb-chevron:before{content:\">\";color:#1b495a}:host ::ng-deep .p-breadcrumb .p-icon-wrapper{display:none}:host ::ng-deep .p-breadcrumb .p-menuitem-text{color:#1b495a}\n"], dependencies: [{ kind: "component", type: Breadcrumb, selector: "p-breadcrumb", inputs: ["model", "style", "styleClass", "home", "homeAriaLabel"], outputs: ["onItemClick"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] });
|
|
1049
|
+
}
|
|
1050
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
|
|
1051
|
+
type: Component,
|
|
1052
|
+
args: [{ selector: 'lib-breadcrumbs[itemList][homeItem]', imports: [Breadcrumb, PrimeTemplate], template: "<p-breadcrumb\r\n class=\"max-w-full\"\r\n [model]=\"itemList\"\r\n [home]=\"homeItem\"\r\n>\r\n <ng-template pTemplate=\"separator\"> > </ng-template>\r\n</p-breadcrumb>\r\n<!--<lib-divider></lib-divider>-->\r\n", styles: [":host ::ng-deep .p-breadcrumb{background:transparent;padding:0}:host ::ng-deep .p-breadcrumb ul li .p-menuitem-link .p-menuitem-text{color:#1b495a}:host ::ng-deep .p-breadcrumb .p-element:hover{text-decoration:underline;color:#3e7c94}:host ::ng-deep .p-breadcrumb .p-element:last-child{pointer-events:none;color:#000}:host ::ng-deep .p-breadcrumb .p-element:last-child:hover{text-decoration:none}:host ::ng-deep .p-breadcrumb .p-breadcrumb-chevron:before{content:\">\";color:#1b495a}:host ::ng-deep .p-breadcrumb .p-icon-wrapper{display:none}:host ::ng-deep .p-breadcrumb .p-menuitem-text{color:#1b495a}\n"] }]
|
|
1053
|
+
}], propDecorators: { itemList: [{
|
|
1054
|
+
type: Input
|
|
1055
|
+
}], homeItem: [{
|
|
1056
|
+
type: Input
|
|
1057
|
+
}] } });
|
|
1058
|
+
|
|
1059
|
+
class DividerComponent {
|
|
1060
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1061
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: DividerComponent, isStandalone: true, selector: "lib-divider", ngImport: i0, template: "<p-divider aria-hidden=\"true\"></p-divider>\r\n", styles: [":host ::ng-deep .p-divider-horizontal:before{border-top:1.75px #3E7C94}\n"], dependencies: [{ kind: "component", type: Divider, selector: "p-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }] });
|
|
1062
|
+
}
|
|
1063
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DividerComponent, decorators: [{
|
|
1064
|
+
type: Component,
|
|
1065
|
+
args: [{ selector: 'lib-divider', imports: [Divider], template: "<p-divider aria-hidden=\"true\"></p-divider>\r\n", styles: [":host ::ng-deep .p-divider-horizontal:before{border-top:1.75px #3E7C94}\n"] }]
|
|
1066
|
+
}] });
|
|
1067
|
+
|
|
1068
|
+
class NavbarComponent {
|
|
1069
|
+
localStorageService;
|
|
1070
|
+
imageWidth = '189';
|
|
1071
|
+
imageHeight = '50';
|
|
1072
|
+
logoAltText = 'logo';
|
|
1073
|
+
multiLanguageEnabled = false;
|
|
1074
|
+
isLogoClick = new EventEmitter();
|
|
1075
|
+
isAccessibilityClicked = new EventEmitter();
|
|
1076
|
+
notificationList = [];
|
|
1077
|
+
// za urgent notifications
|
|
1078
|
+
currentLanguage = 'sl';
|
|
1079
|
+
currentNotification = '';
|
|
1080
|
+
currentIndex = 0;
|
|
1081
|
+
animationClass = 'fade-in';
|
|
1082
|
+
notificationChangeInterval = 5000;
|
|
1083
|
+
constructor(localStorageService) {
|
|
1084
|
+
this.localStorageService = localStorageService;
|
|
1085
|
+
}
|
|
1086
|
+
ngOnInit() {
|
|
1087
|
+
this.currentLanguage = this.localStorageService.getItem('lang') || 'sl'; // Simuliraj izbran jezik
|
|
1088
|
+
if (this.notificationList?.length > 0) {
|
|
1089
|
+
this.showUrgentNotifications();
|
|
1090
|
+
}
|
|
1091
|
+
}
|
|
1092
|
+
/**
|
|
1093
|
+
* prikaz nujnih obvestil
|
|
1094
|
+
*/
|
|
1095
|
+
showUrgentNotifications() {
|
|
1096
|
+
// prikaže obvestila
|
|
1097
|
+
this.displayNotification();
|
|
1098
|
+
// Menjaj obvestila vsakih N sekund, če jih je več
|
|
1099
|
+
if (this.notificationList.length > 1) {
|
|
1100
|
+
interval(this.notificationChangeInterval).subscribe(() => {
|
|
1101
|
+
this.changeNotification();
|
|
1102
|
+
});
|
|
1103
|
+
}
|
|
1104
|
+
}
|
|
1105
|
+
displayNotification() {
|
|
1106
|
+
const notification = this.notificationList[this.currentIndex];
|
|
1107
|
+
this.currentNotification = notification.notificationText;
|
|
1108
|
+
}
|
|
1109
|
+
changeNotification() {
|
|
1110
|
+
// Najprej uporabi fade-out
|
|
1111
|
+
this.animationClass = 'fade-out';
|
|
1112
|
+
// Počakaj, da se fade-out konča, nato posodobi obvestilo in uporabi fade-in
|
|
1113
|
+
setTimeout(() => {
|
|
1114
|
+
this.currentIndex = (this.currentIndex + 1) % this.notificationList.length;
|
|
1115
|
+
this.displayNotification();
|
|
1116
|
+
this.animationClass = 'fade-in';
|
|
1117
|
+
}, 1000); // 1 sekunda za fade-out
|
|
1118
|
+
}
|
|
1119
|
+
clickLogo(event) {
|
|
1120
|
+
event.preventDefault();
|
|
1121
|
+
this.isLogoClick.emit(event);
|
|
1122
|
+
}
|
|
1123
|
+
accessibilityClick(event) {
|
|
1124
|
+
event.preventDefault();
|
|
1125
|
+
this.isAccessibilityClicked.emit(event);
|
|
1126
|
+
}
|
|
1127
|
+
/**
|
|
1128
|
+
* Mare, 2024-09-13; safe version, da ne faila Checkmarx XSS check
|
|
1129
|
+
*/
|
|
1130
|
+
changeLanguage(event, language) {
|
|
1131
|
+
event.preventDefault();
|
|
1132
|
+
this.localStorageService.setItem('lang', language);
|
|
1133
|
+
const currentUrl = new URL(window.location.href);
|
|
1134
|
+
const urlParts = currentUrl.pathname.split('/');
|
|
1135
|
+
urlParts[2] = language; // jezik je vedno na 3. mestu
|
|
1136
|
+
// redirect na novi URL
|
|
1137
|
+
window.location.href = `${currentUrl.origin}${urlParts.join('/')}${currentUrl.search}${currentUrl.hash}`;
|
|
1138
|
+
}
|
|
1139
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NavbarComponent, deps: [{ token: LocalStorageService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1140
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: NavbarComponent, isStandalone: true, selector: "lib-navbar", inputs: { imageWidth: "imageWidth", imageHeight: "imageHeight", logoAltText: "logoAltText", multiLanguageEnabled: "multiLanguageEnabled", notificationList: "notificationList" }, outputs: { isLogoClick: "isLogoClick", isAccessibilityClicked: "isAccessibilityClicked" }, ngImport: i0, template: "<nav class=\"menu\">\r\n <div\r\n class=\"container flex sm:align-items-start sm:justify-content-start md:align-items-center md:justify-content-between flex-column md:flex-row\">\r\n <a href=\"#\" (click)=\"clickLogo($event)\" class=\"navbar-logo\">\r\n <svg id=\"a\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" width=\"189.01\" height=\"50\" viewBox=\"0 0 189.01 50\">\r\n <title>Navigacija na doma\u010Do stran, portala eSamonaro\u010Danje republike Slovenije.</title>\r\n <defs>\r\n <style>.b {\r\n fill: #fff;\r\n }</style>\r\n </defs>\r\n <path class=\"b\"\r\n d=\"M38.39,27.03c-.67,10.72-7.89,19.84-18.48,22.9C9.7,47.04,2.1,38.1,1.4,27.03L0,4.8C6.49,1.65,12.53,0,19.91,0,26.59,0,33.2,1.46,39.79,4.8m-2.83,.32l-1.37,21.72c-.57,9.06-6.46,17.11-15.68,20.16-8.68-2.8-15.07-10.59-15.68-20.16L2.83,5.12c-.35,.16-.89,.38-1.27,.57l1.34,21.25c.64,9.99,7.47,18.64,17.01,21.44,9.35-2.8,16.38-11.26,17.02-21.44l1.34-21.25c-.41-.19-.83-.38-1.3-.57M15.84,25.48l-2.83-3.78-6.71,9c.47,2.32,1.62,3.43,4.45,3.43,1.94,0,2.26-1.21,4.55-1.21s2.54,1.21,4.61,1.21,2.2-1.21,4.58-1.21,2.61,1.21,4.58,1.21c2.8,0,4.1-1.34,4.45-3.46l-6.74-8.97-2.83,3.78-4.04-8.08-4.07,8.08Zm13.23,11.8c.64,0,1.21-.13,1.72-.35,.38-.61,.64-1.08,.96-1.72-.8,.41-1.66,.73-2.67,.73-2.23,0-2.35-1.21-4.58-1.21s-2.42,1.21-4.61,1.21-2.29-1.21-4.58-1.21c-2.16,0-2.42,1.21-4.58,1.21-1.21,0-1.97-.45-2.7-.8,.32,.64,.67,1.21,1.05,1.81,.54,.19,1.12,.29,1.69,.29,2.35,0,2.32-1.21,4.55-1.21s2.42,1.24,4.58,1.24,2.48-1.24,4.61-1.24,2.39,1.24,4.58,1.24m-4.58,.57c-2.1,0-2.16,1.24-4.58,1.24-2.26,0-2.67-1.24-4.61-1.24-2.04,0-2.07,1.17-4.68,1.21,2.42,2.83,5.57,5.09,9.29,6.39,3.56-1.24,6.71-3.37,9.26-6.39-2.55,0-2.61-1.21-4.68-1.21M14.37,4.64l-1.72-.16,1.02,1.37-1.05,1.4,1.75-.19,.7,1.59,.7-1.59,1.75,.19-1.05-1.4,1.02-1.4-1.72,.19-.7-1.59-.7,1.59Zm4.83,6.42l-1.72-.16,1.02,1.37-1.05,1.4,1.75-.19,.7,1.59,.7-1.59,1.75,.19-1.05-1.4,1.02-1.4-1.72,.19-.7-1.59-.7,1.59Zm4.8-6.42l-1.72-.16,1.02,1.37-1.05,1.4,1.75-.19,.7,1.59,.7-1.59,1.75,.19-1.05-1.4,1.02-1.4-1.72,.19-.7-1.59-.7,1.59Z\"/>\r\n <g>\r\n <path class=\"b\"\r\n d=\"M81.43,19.46h-1.61V4.27h4.86c.86,0,1.61,.07,2.25,.21,.64,.14,1.16,.38,1.58,.7,.42,.33,.72,.76,.92,1.29s.3,1.2,.3,1.97c0,1.29-.26,2.27-.78,2.94-.52,.67-1.34,1.11-2.44,1.3l3.54,6.77h-1.85l-3.39-6.6h-3.37v6.6Zm0-7.96h3.12c.58,0,1.09-.04,1.53-.11,.44-.07,.81-.21,1.1-.42s.52-.51,.68-.91c.16-.39,.23-.9,.23-1.52s-.07-1.1-.22-1.48c-.15-.38-.37-.67-.66-.88s-.66-.36-1.1-.44c-.45-.08-.97-.12-1.56-.12h-3.12v5.88Z\"/>\r\n <path class=\"b\" d=\"M93.05,19.46V4.27h9.1v1.36h-7.49v5.49h6.49v1.36h-6.49v5.62h7.49v1.36h-9.1Z\"/>\r\n <path class=\"b\"\r\n d=\"M106.99,19.46h-1.61V4.27h4.75c.86,0,1.61,.07,2.25,.22,.64,.15,1.16,.39,1.58,.73s.72,.79,.92,1.34c.2,.55,.3,1.24,.3,2.06,0,1.65-.41,2.83-1.22,3.53-.81,.7-2.09,1.05-3.83,1.05h-3.14v6.26Zm0-7.62h3.01c.58,0,1.09-.04,1.53-.12s.81-.23,1.1-.45c.3-.22,.52-.53,.68-.94,.16-.41,.23-.94,.23-1.61s-.08-1.16-.22-1.55-.37-.71-.66-.94c-.29-.23-.66-.38-1.1-.46-.45-.08-.96-.12-1.56-.12h-3.01v6.17Z\"/>\r\n <path class=\"b\"\r\n d=\"M127.88,14.17c0,.98-.12,1.81-.36,2.51-.24,.7-.59,1.27-1.06,1.72s-1.03,.77-1.7,.99c-.67,.21-1.42,.32-2.27,.32-1.64,0-2.91-.42-3.81-1.26-.9-.84-1.35-2.19-1.35-4.04V4.27h1.61V14.24c0,1.46,.3,2.5,.9,3.13,.6,.63,1.52,.94,2.75,.94s2.13-.32,2.75-.95,.92-1.68,.92-3.12V4.27h1.61V14.17Z\"/>\r\n <path class=\"b\"\r\n d=\"M141.65,15.31c0,1.43-.4,2.48-1.2,3.14s-2.1,1-3.89,1h-4.84V4.27h4.84c1.71,0,2.94,.33,3.69,.99,.75,.66,1.12,1.64,1.12,2.95,0,1.74-.62,2.87-1.87,3.39v.08c.73,.28,1.28,.7,1.62,1.26s.52,1.35,.52,2.37Zm-1.91-6.97c0-1.05-.26-1.76-.79-2.14s-1.27-.57-2.22-.57h-3.39v5.41h3.39c.93,0,1.67-.19,2.21-.58,.54-.39,.81-1.09,.81-2.11Zm.28,6.88c0-.98-.25-1.7-.76-2.15s-1.29-.68-2.33-.68h-3.58v5.71h3.58c1.05,0,1.83-.23,2.33-.69,.51-.46,.76-1.19,.76-2.18Z\"/>\r\n <path class=\"b\" d=\"M144.92,19.46V4.27h1.61v13.83h7.09v1.36h-8.7Z\"/>\r\n <path class=\"b\" d=\"M156.24,19.46V4.27h1.61v15.19h-1.61Z\"/>\r\n <path class=\"b\"\r\n d=\"M162.06,4.27h1.61v6.7h1.42l4.94-6.7h1.87l-5.49,7.34,5.62,7.85h-1.95l-5.09-7.11h-1.32v7.11h-1.61V4.27Z\"/>\r\n <path class=\"b\"\r\n d=\"M181.91,15.74h-6.45l-1.17,3.71h-1.65l4.98-15.19h2.16l5.01,15.19h-1.7l-1.19-3.71Zm-6.02-1.36h5.6l-2.76-8.68h-.08l-2.76,8.68Z\"/>\r\n </g>\r\n <g>\r\n <path class=\"b\"\r\n d=\"M88.07,40.9c0,.76-.09,1.42-.26,1.96-.18,.54-.47,.99-.87,1.32-.4,.34-.92,.59-1.56,.74-.64,.15-1.41,.23-2.31,.23-.81,0-1.54-.06-2.21-.17-.67-.11-1.32-.29-1.95-.53l.34-1.38c.59,.21,1.23,.38,1.92,.5,.69,.12,1.38,.18,2.09,.18,.55,0,1.03-.04,1.42-.12,.4-.08,.72-.22,.99-.43,.26-.21,.46-.48,.58-.84s.19-.8,.19-1.34c0-.44-.05-.82-.14-1.13s-.26-.59-.51-.83c-.25-.23-.58-.44-1-.63s-.94-.37-1.58-.55c-.71-.2-1.33-.41-1.86-.65-.53-.23-.97-.52-1.32-.86s-.6-.74-.77-1.2c-.17-.46-.25-1.01-.25-1.64,0-1.36,.38-2.38,1.15-3.06,.76-.69,1.95-1.03,3.56-1.03,.67,0,1.33,.06,1.98,.18,.66,.12,1.28,.29,1.86,.52l-.28,1.36c-.58-.2-1.15-.35-1.7-.47-.55-.11-1.15-.17-1.8-.17-1.13,0-1.93,.2-2.41,.59-.47,.4-.71,1.05-.71,1.97,0,.47,.06,.86,.18,1.17,.12,.31,.3,.57,.54,.79,.24,.21,.54,.4,.91,.55,.37,.16,.8,.3,1.29,.45,.89,.28,1.63,.56,2.21,.82,.58,.26,1.04,.56,1.37,.89s.57,.72,.7,1.17c.13,.45,.2,.99,.2,1.62Z\"/>\r\n <path class=\"b\" d=\"M91.06,44.91v-15.19h1.61v13.83h7.08v1.36h-8.7Z\"/>\r\n <path class=\"b\"\r\n d=\"M106.67,45.16c-.99,0-1.85-.13-2.59-.39-.74-.26-1.34-.7-1.83-1.3-.48-.61-.84-1.41-1.08-2.41-.24-1-.36-2.23-.36-3.7s.12-2.71,.36-3.72c.24-1.01,.6-1.82,1.08-2.44,.48-.62,1.09-1.06,1.83-1.33,.73-.27,1.6-.4,2.59-.4s1.83,.13,2.56,.4c.73,.27,1.33,.71,1.81,1.32,.48,.61,.84,1.41,1.08,2.42s.36,2.23,.36,3.69-.12,2.73-.35,3.73-.59,1.81-1.06,2.43-1.08,1.05-1.81,1.31-1.6,.39-2.59,.39Zm-.02-1.42c.79,0,1.45-.12,1.98-.35,.53-.23,.95-.61,1.27-1.12,.32-.52,.54-1.19,.68-2.01,.13-.82,.2-1.82,.2-2.99s-.07-2.19-.2-3c-.13-.81-.36-1.47-.68-1.97s-.74-.86-1.27-1.08-1.19-.33-1.98-.33-1.45,.11-1.98,.33-.96,.58-1.27,1.08c-.32,.5-.54,1.16-.68,1.97-.13,.81-.2,1.81-.2,3s.07,2.17,.2,2.99c.13,.82,.36,1.49,.68,2.01,.32,.52,.74,.89,1.27,1.12,.53,.23,1.19,.35,1.98,.35Z\"/>\r\n <path class=\"b\" d=\"M113.97,29.72h1.66l4.07,13.62h.08l4.03-13.62h1.57l-4.56,15.19h-2.27l-4.58-15.19Z\"/>\r\n <path class=\"b\" d=\"M127.69,44.91v-15.19h9.1v1.36h-7.49v5.49h6.49v1.36h-6.49v5.62h7.49v1.36h-9.1Z\"/>\r\n <path class=\"b\"\r\n d=\"M141.59,31.44h-.08v13.47h-1.49v-15.19h2.38l6.81,13.45h.08v-13.45h1.49v15.19h-2.36l-6.83-13.47Z\"/>\r\n <path class=\"b\" d=\"M154.97,44.91v-15.19h1.61v15.19h-1.61Z\"/>\r\n <path class=\"b\"\r\n d=\"M162.84,29.72v13.98c0,.72-.06,1.36-.18,1.91-.12,.55-.33,1.03-.62,1.44s-.68,.76-1.16,1.06-1.08,.55-1.8,.76l-.42-1.36c.48-.14,.88-.32,1.21-.52,.33-.21,.59-.46,.8-.75s.35-.64,.43-1.04c.08-.4,.13-.86,.13-1.38v-14.11h1.61Z\"/>\r\n <path class=\"b\"\r\n d=\"M174.08,41.2h-6.45l-1.17,3.71h-1.65l4.98-15.19h2.16l5.01,15.19h-1.7l-1.19-3.71Zm-6.02-1.36h5.6l-2.76-8.68h-.08l-2.76,8.68Z\"/>\r\n </g>\r\n </svg>\r\n </a>\r\n <div class=\"nav-list\">\r\n <ul class=\"flex\">\r\n <li class=\"mx-2\" *ngIf=\"multiLanguageEnabled\" [ngClass]=\"this.localStorageService.getItem('lang') === 'sl' ?'font-bold' : ''\">\r\n <a href=\"#\" aria-label=\"Slovenian language\" (click)=\"changeLanguage($event, 'sl')\">SI</a>\r\n </li>\r\n <li class=\"mx-2\" *ngIf=\"multiLanguageEnabled\" [ngClass]=\"this.localStorageService.getItem('lang') === 'it' ?'font-bold' : ''\">\r\n <a href=\"#\" aria-label=\"Italian language\" (click)=\"changeLanguage($event, 'it')\">IT</a>\r\n </li>\r\n <li class=\"mx-2\" *ngIf=\"multiLanguageEnabled\" [ngClass]=\"this.localStorageService.getItem('lang') === 'hu' ?'font-bold' : ''\">\r\n <a href=\"#\" aria-label=\"Hungarian language\" (click)=\"changeLanguage($event, 'hu')\">HU</a>\r\n </li>\r\n <li class=\"mx-2\" *ngIf=\"multiLanguageEnabled\" [ngClass]=\"this.localStorageService.getItem('lang') === 'en' ?'font-bold' : ''\">\r\n <a href=\"#\" aria-label=\"English language\" (click)=\"changeLanguage($event, 'en')\">EN</a>\r\n </li>\r\n <li class=\"mx-2\">\r\n <a href=\"#\" (click)=\"accessibilityClick($event)\">\r\n {{ 'components.navbar.accessibility' | translate }}\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n</nav>\r\n\r\n<!-- prikaz nujnih obvestil: \u010De jih je ve\u010D se menjajo na N sekund -->\r\n<div class=\"urgent-notifications\" *ngIf=\"notificationList.length > 0\">\r\n <div class=\"banner\" [ngClass]=\"animationClass\">\r\n <p>{{ currentNotification }}</p>\r\n </div>\r\n</div>\r\n", styles: [".menu{background:#1b495a}.menu .container{padding:.5rem 1rem}.menu .container .nav-list a{font-size:1.2rem;text-decoration:none;color:#fff}.menu .container .nav-list a:hover{text-decoration:underline}.menu .container .nav-list a:active{color:#000;background:#ffa142}.urgent-notifications{background-color:#d9534f;position:relative;min-height:40px;overflow:hidden}.urgent-notifications .banner{max-width:1190px;margin:0 auto;position:relative;color:#fff;padding:.5rem 1rem;font-weight:700;font-size:18px;white-space:nowrap;transition:opacity 1s ease-in-out}.urgent-notifications .banner p{text-wrap:wrap}.urgent-notifications .fade-in{opacity:1}.urgent-notifications .fade-out{opacity:0}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
1141
|
+
}
|
|
1142
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: NavbarComponent, decorators: [{
|
|
1143
|
+
type: Component,
|
|
1144
|
+
args: [{ selector: 'lib-navbar', imports: [
|
|
1145
|
+
NgIf,
|
|
1146
|
+
NgClass,
|
|
1147
|
+
TranslateModule,
|
|
1148
|
+
], template: "<nav class=\"menu\">\r\n <div\r\n class=\"container flex sm:align-items-start sm:justify-content-start md:align-items-center md:justify-content-between flex-column md:flex-row\">\r\n <a href=\"#\" (click)=\"clickLogo($event)\" class=\"navbar-logo\">\r\n <svg id=\"a\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" width=\"189.01\" height=\"50\" viewBox=\"0 0 189.01 50\">\r\n <title>Navigacija na doma\u010Do stran, portala eSamonaro\u010Danje republike Slovenije.</title>\r\n <defs>\r\n <style>.b {\r\n fill: #fff;\r\n }</style>\r\n </defs>\r\n <path class=\"b\"\r\n d=\"M38.39,27.03c-.67,10.72-7.89,19.84-18.48,22.9C9.7,47.04,2.1,38.1,1.4,27.03L0,4.8C6.49,1.65,12.53,0,19.91,0,26.59,0,33.2,1.46,39.79,4.8m-2.83,.32l-1.37,21.72c-.57,9.06-6.46,17.11-15.68,20.16-8.68-2.8-15.07-10.59-15.68-20.16L2.83,5.12c-.35,.16-.89,.38-1.27,.57l1.34,21.25c.64,9.99,7.47,18.64,17.01,21.44,9.35-2.8,16.38-11.26,17.02-21.44l1.34-21.25c-.41-.19-.83-.38-1.3-.57M15.84,25.48l-2.83-3.78-6.71,9c.47,2.32,1.62,3.43,4.45,3.43,1.94,0,2.26-1.21,4.55-1.21s2.54,1.21,4.61,1.21,2.2-1.21,4.58-1.21,2.61,1.21,4.58,1.21c2.8,0,4.1-1.34,4.45-3.46l-6.74-8.97-2.83,3.78-4.04-8.08-4.07,8.08Zm13.23,11.8c.64,0,1.21-.13,1.72-.35,.38-.61,.64-1.08,.96-1.72-.8,.41-1.66,.73-2.67,.73-2.23,0-2.35-1.21-4.58-1.21s-2.42,1.21-4.61,1.21-2.29-1.21-4.58-1.21c-2.16,0-2.42,1.21-4.58,1.21-1.21,0-1.97-.45-2.7-.8,.32,.64,.67,1.21,1.05,1.81,.54,.19,1.12,.29,1.69,.29,2.35,0,2.32-1.21,4.55-1.21s2.42,1.24,4.58,1.24,2.48-1.24,4.61-1.24,2.39,1.24,4.58,1.24m-4.58,.57c-2.1,0-2.16,1.24-4.58,1.24-2.26,0-2.67-1.24-4.61-1.24-2.04,0-2.07,1.17-4.68,1.21,2.42,2.83,5.57,5.09,9.29,6.39,3.56-1.24,6.71-3.37,9.26-6.39-2.55,0-2.61-1.21-4.68-1.21M14.37,4.64l-1.72-.16,1.02,1.37-1.05,1.4,1.75-.19,.7,1.59,.7-1.59,1.75,.19-1.05-1.4,1.02-1.4-1.72,.19-.7-1.59-.7,1.59Zm4.83,6.42l-1.72-.16,1.02,1.37-1.05,1.4,1.75-.19,.7,1.59,.7-1.59,1.75,.19-1.05-1.4,1.02-1.4-1.72,.19-.7-1.59-.7,1.59Zm4.8-6.42l-1.72-.16,1.02,1.37-1.05,1.4,1.75-.19,.7,1.59,.7-1.59,1.75,.19-1.05-1.4,1.02-1.4-1.72,.19-.7-1.59-.7,1.59Z\"/>\r\n <g>\r\n <path class=\"b\"\r\n d=\"M81.43,19.46h-1.61V4.27h4.86c.86,0,1.61,.07,2.25,.21,.64,.14,1.16,.38,1.58,.7,.42,.33,.72,.76,.92,1.29s.3,1.2,.3,1.97c0,1.29-.26,2.27-.78,2.94-.52,.67-1.34,1.11-2.44,1.3l3.54,6.77h-1.85l-3.39-6.6h-3.37v6.6Zm0-7.96h3.12c.58,0,1.09-.04,1.53-.11,.44-.07,.81-.21,1.1-.42s.52-.51,.68-.91c.16-.39,.23-.9,.23-1.52s-.07-1.1-.22-1.48c-.15-.38-.37-.67-.66-.88s-.66-.36-1.1-.44c-.45-.08-.97-.12-1.56-.12h-3.12v5.88Z\"/>\r\n <path class=\"b\" d=\"M93.05,19.46V4.27h9.1v1.36h-7.49v5.49h6.49v1.36h-6.49v5.62h7.49v1.36h-9.1Z\"/>\r\n <path class=\"b\"\r\n d=\"M106.99,19.46h-1.61V4.27h4.75c.86,0,1.61,.07,2.25,.22,.64,.15,1.16,.39,1.58,.73s.72,.79,.92,1.34c.2,.55,.3,1.24,.3,2.06,0,1.65-.41,2.83-1.22,3.53-.81,.7-2.09,1.05-3.83,1.05h-3.14v6.26Zm0-7.62h3.01c.58,0,1.09-.04,1.53-.12s.81-.23,1.1-.45c.3-.22,.52-.53,.68-.94,.16-.41,.23-.94,.23-1.61s-.08-1.16-.22-1.55-.37-.71-.66-.94c-.29-.23-.66-.38-1.1-.46-.45-.08-.96-.12-1.56-.12h-3.01v6.17Z\"/>\r\n <path class=\"b\"\r\n d=\"M127.88,14.17c0,.98-.12,1.81-.36,2.51-.24,.7-.59,1.27-1.06,1.72s-1.03,.77-1.7,.99c-.67,.21-1.42,.32-2.27,.32-1.64,0-2.91-.42-3.81-1.26-.9-.84-1.35-2.19-1.35-4.04V4.27h1.61V14.24c0,1.46,.3,2.5,.9,3.13,.6,.63,1.52,.94,2.75,.94s2.13-.32,2.75-.95,.92-1.68,.92-3.12V4.27h1.61V14.17Z\"/>\r\n <path class=\"b\"\r\n d=\"M141.65,15.31c0,1.43-.4,2.48-1.2,3.14s-2.1,1-3.89,1h-4.84V4.27h4.84c1.71,0,2.94,.33,3.69,.99,.75,.66,1.12,1.64,1.12,2.95,0,1.74-.62,2.87-1.87,3.39v.08c.73,.28,1.28,.7,1.62,1.26s.52,1.35,.52,2.37Zm-1.91-6.97c0-1.05-.26-1.76-.79-2.14s-1.27-.57-2.22-.57h-3.39v5.41h3.39c.93,0,1.67-.19,2.21-.58,.54-.39,.81-1.09,.81-2.11Zm.28,6.88c0-.98-.25-1.7-.76-2.15s-1.29-.68-2.33-.68h-3.58v5.71h3.58c1.05,0,1.83-.23,2.33-.69,.51-.46,.76-1.19,.76-2.18Z\"/>\r\n <path class=\"b\" d=\"M144.92,19.46V4.27h1.61v13.83h7.09v1.36h-8.7Z\"/>\r\n <path class=\"b\" d=\"M156.24,19.46V4.27h1.61v15.19h-1.61Z\"/>\r\n <path class=\"b\"\r\n d=\"M162.06,4.27h1.61v6.7h1.42l4.94-6.7h1.87l-5.49,7.34,5.62,7.85h-1.95l-5.09-7.11h-1.32v7.11h-1.61V4.27Z\"/>\r\n <path class=\"b\"\r\n d=\"M181.91,15.74h-6.45l-1.17,3.71h-1.65l4.98-15.19h2.16l5.01,15.19h-1.7l-1.19-3.71Zm-6.02-1.36h5.6l-2.76-8.68h-.08l-2.76,8.68Z\"/>\r\n </g>\r\n <g>\r\n <path class=\"b\"\r\n d=\"M88.07,40.9c0,.76-.09,1.42-.26,1.96-.18,.54-.47,.99-.87,1.32-.4,.34-.92,.59-1.56,.74-.64,.15-1.41,.23-2.31,.23-.81,0-1.54-.06-2.21-.17-.67-.11-1.32-.29-1.95-.53l.34-1.38c.59,.21,1.23,.38,1.92,.5,.69,.12,1.38,.18,2.09,.18,.55,0,1.03-.04,1.42-.12,.4-.08,.72-.22,.99-.43,.26-.21,.46-.48,.58-.84s.19-.8,.19-1.34c0-.44-.05-.82-.14-1.13s-.26-.59-.51-.83c-.25-.23-.58-.44-1-.63s-.94-.37-1.58-.55c-.71-.2-1.33-.41-1.86-.65-.53-.23-.97-.52-1.32-.86s-.6-.74-.77-1.2c-.17-.46-.25-1.01-.25-1.64,0-1.36,.38-2.38,1.15-3.06,.76-.69,1.95-1.03,3.56-1.03,.67,0,1.33,.06,1.98,.18,.66,.12,1.28,.29,1.86,.52l-.28,1.36c-.58-.2-1.15-.35-1.7-.47-.55-.11-1.15-.17-1.8-.17-1.13,0-1.93,.2-2.41,.59-.47,.4-.71,1.05-.71,1.97,0,.47,.06,.86,.18,1.17,.12,.31,.3,.57,.54,.79,.24,.21,.54,.4,.91,.55,.37,.16,.8,.3,1.29,.45,.89,.28,1.63,.56,2.21,.82,.58,.26,1.04,.56,1.37,.89s.57,.72,.7,1.17c.13,.45,.2,.99,.2,1.62Z\"/>\r\n <path class=\"b\" d=\"M91.06,44.91v-15.19h1.61v13.83h7.08v1.36h-8.7Z\"/>\r\n <path class=\"b\"\r\n d=\"M106.67,45.16c-.99,0-1.85-.13-2.59-.39-.74-.26-1.34-.7-1.83-1.3-.48-.61-.84-1.41-1.08-2.41-.24-1-.36-2.23-.36-3.7s.12-2.71,.36-3.72c.24-1.01,.6-1.82,1.08-2.44,.48-.62,1.09-1.06,1.83-1.33,.73-.27,1.6-.4,2.59-.4s1.83,.13,2.56,.4c.73,.27,1.33,.71,1.81,1.32,.48,.61,.84,1.41,1.08,2.42s.36,2.23,.36,3.69-.12,2.73-.35,3.73-.59,1.81-1.06,2.43-1.08,1.05-1.81,1.31-1.6,.39-2.59,.39Zm-.02-1.42c.79,0,1.45-.12,1.98-.35,.53-.23,.95-.61,1.27-1.12,.32-.52,.54-1.19,.68-2.01,.13-.82,.2-1.82,.2-2.99s-.07-2.19-.2-3c-.13-.81-.36-1.47-.68-1.97s-.74-.86-1.27-1.08-1.19-.33-1.98-.33-1.45,.11-1.98,.33-.96,.58-1.27,1.08c-.32,.5-.54,1.16-.68,1.97-.13,.81-.2,1.81-.2,3s.07,2.17,.2,2.99c.13,.82,.36,1.49,.68,2.01,.32,.52,.74,.89,1.27,1.12,.53,.23,1.19,.35,1.98,.35Z\"/>\r\n <path class=\"b\" d=\"M113.97,29.72h1.66l4.07,13.62h.08l4.03-13.62h1.57l-4.56,15.19h-2.27l-4.58-15.19Z\"/>\r\n <path class=\"b\" d=\"M127.69,44.91v-15.19h9.1v1.36h-7.49v5.49h6.49v1.36h-6.49v5.62h7.49v1.36h-9.1Z\"/>\r\n <path class=\"b\"\r\n d=\"M141.59,31.44h-.08v13.47h-1.49v-15.19h2.38l6.81,13.45h.08v-13.45h1.49v15.19h-2.36l-6.83-13.47Z\"/>\r\n <path class=\"b\" d=\"M154.97,44.91v-15.19h1.61v15.19h-1.61Z\"/>\r\n <path class=\"b\"\r\n d=\"M162.84,29.72v13.98c0,.72-.06,1.36-.18,1.91-.12,.55-.33,1.03-.62,1.44s-.68,.76-1.16,1.06-1.08,.55-1.8,.76l-.42-1.36c.48-.14,.88-.32,1.21-.52,.33-.21,.59-.46,.8-.75s.35-.64,.43-1.04c.08-.4,.13-.86,.13-1.38v-14.11h1.61Z\"/>\r\n <path class=\"b\"\r\n d=\"M174.08,41.2h-6.45l-1.17,3.71h-1.65l4.98-15.19h2.16l5.01,15.19h-1.7l-1.19-3.71Zm-6.02-1.36h5.6l-2.76-8.68h-.08l-2.76,8.68Z\"/>\r\n </g>\r\n </svg>\r\n </a>\r\n <div class=\"nav-list\">\r\n <ul class=\"flex\">\r\n <li class=\"mx-2\" *ngIf=\"multiLanguageEnabled\" [ngClass]=\"this.localStorageService.getItem('lang') === 'sl' ?'font-bold' : ''\">\r\n <a href=\"#\" aria-label=\"Slovenian language\" (click)=\"changeLanguage($event, 'sl')\">SI</a>\r\n </li>\r\n <li class=\"mx-2\" *ngIf=\"multiLanguageEnabled\" [ngClass]=\"this.localStorageService.getItem('lang') === 'it' ?'font-bold' : ''\">\r\n <a href=\"#\" aria-label=\"Italian language\" (click)=\"changeLanguage($event, 'it')\">IT</a>\r\n </li>\r\n <li class=\"mx-2\" *ngIf=\"multiLanguageEnabled\" [ngClass]=\"this.localStorageService.getItem('lang') === 'hu' ?'font-bold' : ''\">\r\n <a href=\"#\" aria-label=\"Hungarian language\" (click)=\"changeLanguage($event, 'hu')\">HU</a>\r\n </li>\r\n <li class=\"mx-2\" *ngIf=\"multiLanguageEnabled\" [ngClass]=\"this.localStorageService.getItem('lang') === 'en' ?'font-bold' : ''\">\r\n <a href=\"#\" aria-label=\"English language\" (click)=\"changeLanguage($event, 'en')\">EN</a>\r\n </li>\r\n <li class=\"mx-2\">\r\n <a href=\"#\" (click)=\"accessibilityClick($event)\">\r\n {{ 'components.navbar.accessibility' | translate }}\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n</nav>\r\n\r\n<!-- prikaz nujnih obvestil: \u010De jih je ve\u010D se menjajo na N sekund -->\r\n<div class=\"urgent-notifications\" *ngIf=\"notificationList.length > 0\">\r\n <div class=\"banner\" [ngClass]=\"animationClass\">\r\n <p>{{ currentNotification }}</p>\r\n </div>\r\n</div>\r\n", styles: [".menu{background:#1b495a}.menu .container{padding:.5rem 1rem}.menu .container .nav-list a{font-size:1.2rem;text-decoration:none;color:#fff}.menu .container .nav-list a:hover{text-decoration:underline}.menu .container .nav-list a:active{color:#000;background:#ffa142}.urgent-notifications{background-color:#d9534f;position:relative;min-height:40px;overflow:hidden}.urgent-notifications .banner{max-width:1190px;margin:0 auto;position:relative;color:#fff;padding:.5rem 1rem;font-weight:700;font-size:18px;white-space:nowrap;transition:opacity 1s ease-in-out}.urgent-notifications .banner p{text-wrap:wrap}.urgent-notifications .fade-in{opacity:1}.urgent-notifications .fade-out{opacity:0}\n"] }]
|
|
1149
|
+
}], ctorParameters: () => [{ type: LocalStorageService }], propDecorators: { imageWidth: [{
|
|
1150
|
+
type: Input
|
|
1151
|
+
}], imageHeight: [{
|
|
1152
|
+
type: Input
|
|
1153
|
+
}], logoAltText: [{
|
|
1154
|
+
type: Input
|
|
1155
|
+
}], multiLanguageEnabled: [{
|
|
1156
|
+
type: Input
|
|
1157
|
+
}], isLogoClick: [{
|
|
1158
|
+
type: Output
|
|
1159
|
+
}], isAccessibilityClicked: [{
|
|
1160
|
+
type: Output
|
|
1161
|
+
}], notificationList: [{
|
|
1162
|
+
type: Input
|
|
1163
|
+
}] } });
|
|
1164
|
+
|
|
1165
|
+
var SelectionMode;
|
|
1166
|
+
(function (SelectionMode) {
|
|
1167
|
+
SelectionMode["single"] = "single";
|
|
1168
|
+
SelectionMode["range"] = "range";
|
|
1169
|
+
SelectionMode["multiple"] = "multiple";
|
|
1170
|
+
})(SelectionMode || (SelectionMode = {}));
|
|
1171
|
+
|
|
1172
|
+
/**
|
|
1173
|
+
* Returns the date of tomorrow, excluding specified disabled dates.
|
|
1174
|
+
*
|
|
1175
|
+
* @param {Date[]} disabledDates - An array of disabled dates.
|
|
1176
|
+
* @return {Date} The date of tomorrow, excluding disabled dates.
|
|
1177
|
+
*/
|
|
1178
|
+
function getTomorrowDate(disabledDates) {
|
|
1179
|
+
const today = new Date();
|
|
1180
|
+
let tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000);
|
|
1181
|
+
let day = tomorrow.getDay();
|
|
1182
|
+
const isDisabled = (date) => disabledDates.some(disabledDate => new Date(disabledDate).getDate() === date.getDate() &&
|
|
1183
|
+
new Date(disabledDate).getMonth() === date.getMonth() &&
|
|
1184
|
+
new Date(disabledDate).getFullYear() === date.getFullYear());
|
|
1185
|
+
// If tomorrow is Saturday or Sunday or in disabled dates
|
|
1186
|
+
while (day === 6 || day === 0 || isDisabled(tomorrow)) {
|
|
1187
|
+
tomorrow = new Date(tomorrow.getTime() + 24 * 60 * 60 * 1000);
|
|
1188
|
+
day = tomorrow.getDay();
|
|
1189
|
+
}
|
|
1190
|
+
return tomorrow;
|
|
1191
|
+
}
|
|
1192
|
+
|
|
1193
|
+
class DateInputComponent {
|
|
1194
|
+
TooltipHoverEventEnum = TooltipHoverEventEnum;
|
|
1195
|
+
_isTooltipVisible;
|
|
1196
|
+
isLabelVisible = true;
|
|
1197
|
+
name;
|
|
1198
|
+
label;
|
|
1199
|
+
placeholder = '';
|
|
1200
|
+
accessibilityText = '';
|
|
1201
|
+
isRequired = true;
|
|
1202
|
+
tooltipPosition = TooltipPosition.right;
|
|
1203
|
+
tooltipText = '';
|
|
1204
|
+
dateFormat = 'dd.mm.yy';
|
|
1205
|
+
group;
|
|
1206
|
+
controlName;
|
|
1207
|
+
showIcon = true;
|
|
1208
|
+
selectionMode = SelectionMode.single;
|
|
1209
|
+
touchUI = false;
|
|
1210
|
+
formStatus;
|
|
1211
|
+
showClear = false;
|
|
1212
|
+
isPublicDate = true;
|
|
1213
|
+
minDate;
|
|
1214
|
+
maxDate;
|
|
1215
|
+
minDateToday = false;
|
|
1216
|
+
maxDateSixMonths = false; // da je možno datum izbirat 6 mesecev vnaprej
|
|
1217
|
+
maxDateThreeMonths = false; // da je možno datum izbirat 3 mesece vnaprej
|
|
1218
|
+
setMinAndMax = false;
|
|
1219
|
+
hasGap = true;
|
|
1220
|
+
disabledDates;
|
|
1221
|
+
appendTo;
|
|
1222
|
+
groupError = false;
|
|
1223
|
+
showTime = false;
|
|
1224
|
+
// Mare: dnevi ko ni naročanja
|
|
1225
|
+
availableDates = [];
|
|
1226
|
+
// Mare; da je možno ročno nastavit disablane dneve, default ostane SOB, NED
|
|
1227
|
+
// -1 da ni noben disablan
|
|
1228
|
+
disabledDays = [];
|
|
1229
|
+
disabledWeekends = false;
|
|
1230
|
+
onSelect = new EventEmitter();
|
|
1231
|
+
ngOnInit() {
|
|
1232
|
+
this._isTooltipVisible = !!this.tooltipText;
|
|
1233
|
+
if (this.maxDateSixMonths) {
|
|
1234
|
+
this.maxDate = this.getDateInSixMonths();
|
|
1235
|
+
}
|
|
1236
|
+
else if (this.maxDateThreeMonths) {
|
|
1237
|
+
this.maxDate = this.getDateInThreeMonths();
|
|
1238
|
+
}
|
|
1239
|
+
if (this.disabledWeekends) {
|
|
1240
|
+
this.disabledDays = [0, 6];
|
|
1241
|
+
}
|
|
1242
|
+
if (this.minDateToday) {
|
|
1243
|
+
this.minDate = new Date();
|
|
1244
|
+
}
|
|
1245
|
+
}
|
|
1246
|
+
getDateInThreeMonths() {
|
|
1247
|
+
const currentDate = new Date();
|
|
1248
|
+
return new Date(currentDate.getFullYear(), currentDate.getMonth() + 3, currentDate.getDate());
|
|
1249
|
+
}
|
|
1250
|
+
getDateFifteenDaysAgo() {
|
|
1251
|
+
const currentDate = new Date();
|
|
1252
|
+
currentDate.setDate(currentDate.getDate() - 15);
|
|
1253
|
+
return currentDate;
|
|
1254
|
+
}
|
|
1255
|
+
getDateInSixMonths() {
|
|
1256
|
+
const currentDate = new Date();
|
|
1257
|
+
currentDate.setMonth(currentDate.getMonth() + 6);
|
|
1258
|
+
return currentDate;
|
|
1259
|
+
}
|
|
1260
|
+
getDateRangeUnlimited() {
|
|
1261
|
+
const currentDate = new Date();
|
|
1262
|
+
currentDate.setFullYear(currentDate.getFullYear() + 10);
|
|
1263
|
+
return currentDate;
|
|
1264
|
+
}
|
|
1265
|
+
getDateTomorrow(time) {
|
|
1266
|
+
const currentTime = new Date();
|
|
1267
|
+
const [hours, minutes] = time.split(':').map(Number);
|
|
1268
|
+
return new Date(currentTime.getFullYear(), currentTime.getMonth(), currentTime.getDate() + 1, hours, minutes);
|
|
1269
|
+
}
|
|
1270
|
+
/**
|
|
1271
|
+
* preverjanje, če je datum znotraj availableDates
|
|
1272
|
+
*/
|
|
1273
|
+
isAppointmentDateAvailable(date) {
|
|
1274
|
+
const dateString = `${date.year}-${(date.month + 1).toString().padStart(2, '0')}-${date.day.toString().padStart(2, '0')}`;
|
|
1275
|
+
return this.availableDates.includes(dateString);
|
|
1276
|
+
}
|
|
1277
|
+
getTomorrowDate = getTomorrowDate;
|
|
1278
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1279
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: DateInputComponent, isStandalone: true, selector: "lib-date-input[group][controlName][name]", inputs: { isLabelVisible: "isLabelVisible", name: "name", label: "label", placeholder: "placeholder", accessibilityText: "accessibilityText", isRequired: "isRequired", tooltipPosition: "tooltipPosition", tooltipText: "tooltipText", dateFormat: "dateFormat", group: "group", controlName: "controlName", showIcon: "showIcon", selectionMode: "selectionMode", touchUI: "touchUI", formStatus: "formStatus", showClear: "showClear", isPublicDate: "isPublicDate", minDate: "minDate", maxDate: "maxDate", minDateToday: "minDateToday", maxDateSixMonths: "maxDateSixMonths", maxDateThreeMonths: "maxDateThreeMonths", setMinAndMax: "setMinAndMax", hasGap: "hasGap", disabledDates: "disabledDates", appendTo: "appendTo", groupError: "groupError", showTime: "showTime", availableDates: "availableDates", disabledDays: "disabledDays", disabledWeekends: "disabledWeekends" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: "<div class='flex flex-column' [formGroup]=\"group\" [ngClass]=\"{ 'gap-1': hasGap }\">\r\n <div class=\"flex\" *ngIf=\"isLabelVisible\">\r\n <label [for]=\"name\" class=\"mr-2\">\r\n {{label}}<span class=\"required\" aria-label=\"Is required filed\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <lib-tooltip\r\n *ngIf=\"_isTooltipVisible\"\r\n [position]=\"tooltipPosition\"\r\n [text]=\"tooltipText!\"\r\n ></lib-tooltip>\r\n </div>\r\n\r\n <p-datepicker\r\n [class.ng-invalid.ng-dirty]=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered)) || groupError\"\r\n [appendTo]=\"appendTo\"\r\n *ngIf=\"setMinAndMax\"\r\n [inputId]=\"name\"\r\n (onSelect)=\"onSelect.emit($event)\"\r\n [placeholder]='placeholder'\r\n [dateFormat]=\"dateFormat\"\r\n [showIcon]=\"showIcon\"\r\n [selectionMode]=\"selectionMode\"\r\n [formControlName]=\"controlName\"\r\n [touchUI]=\"touchUI\"\r\n [minDate]=\"minDate || getDateFifteenDaysAgo()\"\r\n [maxDate]=\"maxDate\"\r\n [showClear]=\"showClear\"\r\n (onClear)=\"group.get(controlName)?.reset()\"\r\n [attr.aria-label]=\"accessibilityText\"\r\n [ngClass]=\"{ 'ng-dirty': (group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered) }\"\r\n [disabledDays]=\"disabledDays\"\r\n [disabledDates]=\"disabledDates\"\r\n [showTime]=\"showTime\"\r\n hourFormat=\"24\"\r\n [attr.aria-describedby]=\"name + 'Error'\"\r\n [attr.aria-invalid]=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered)) || groupError\"\r\n [attr.aria-required]=\"isRequired\"\r\n >\r\n <!-- Mare; ideja da barva dolo\u010Dene dneve (npr. takrat ki ni prostih terminov) -->\r\n <!-- 24.05.2024 Mare; zaenkrat ne potrebujemo ve\u010D, ker so neprosti dnevi kar disabled -->\r\n <ng-template pTemplate=\"date\" let-date>\r\n <div>{{date.day}}</div>\r\n </ng-template>\r\n </p-datepicker>\r\n\r\n <p-datepicker\r\n [class.ng-invalid.ng-dirty]=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered)) || groupError\"\r\n [appendTo]=\"appendTo\"\r\n *ngIf=\"!setMinAndMax\"\r\n (onSelect)=\"onSelect.emit($event)\"\r\n [inputId]=\"name\"\r\n [placeholder]='placeholder'\r\n [dateFormat]=\"dateFormat\"\r\n [showIcon]=\"showIcon\"\r\n [selectionMode]=\"selectionMode\"\r\n [formControlName]=\"controlName\"\r\n [touchUI]=\"touchUI\"\r\n [showClear]=\"showClear\"\r\n (onClear)=\"group.get(controlName)?.reset()\"\r\n [ngClass]=\"{ 'ng-dirty': (group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered) }\"\r\n [attr.aria-label]=\"accessibilityText\"\r\n [disabledDays]=\"disabledDays\"\r\n [disabledDates]=\"disabledDates\"\r\n [showTime]=\"showTime\"\r\n hourFormat=\"24\"\r\n [attr.aria-describedby]=\"name + 'Error'\"\r\n [attr.aria-invalid]=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered)) || groupError\"\r\n [attr.aria-required]=\"isRequired\"\r\n ></p-datepicker>\r\n</div>\r\n<lib-error\r\n *ngIf=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered)\"\r\n [hasError]=\"group.get(controlName)!.errors\"\r\n [isTouched]=\"group.get(controlName)!.touched\"\r\n [isSubmitTriggered]=\"formStatus!.isSubmitTriggered!\"\r\n [hasGroupError]=\"groupError\"\r\n [errorId]=\"name+'Error'\"\r\n></lib-error>\r\n", styles: [":host ::ng-deep{width:100%}:host ::ng-deep .p-datepicker-dropdown{background-color:#3e7c94;color:#fff;border-color:#3e7c94}:host ::ng-deep .p-datepicker-dropdown:hover{background-color:#1b495a!important;border-color:#1b495a!important;color:#fff!important}:host ::ng-deep .p-datepicker-title>*{color:#fff!important;font-weight:700}:host ::ng-deep .p-datepicker-clear-icon{padding-right:8px;color:#6d7375;cursor:pointer}:host ::ng-deep .p-datepicker{min-width:max-content!important;width:100%;border:1.75px solid #3E7C94!important}:host ::ng-deep .p-datepicker::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-datepicker:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-datepicker:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-datepicker table td>span.p-highlight{color:#000;background:#3e7c94}:host ::ng-deep .p-datepicker:not(.p-disabled).p-focus{border:1.75px solid #1B495A;box-shadow:0 0 2px 3px #ffa142}:host ::ng-deep .p-datepicker:not(.p-disabled).p-focus span{outline:none}:host ::ng-deep .p-datepicker-prev-button,:host ::ng-deep .p-datepicker-next-button{color:#fff!important}:host ::ng-deep .p-inputtext{border:none}:host ::ng-deep .appointment-not-available{background:#ff7373;width:100%;height:100%;display:flex;align-items:center;justify-content:center}:host ::ng-deep .appointment-available{background:#e0fde7;width:100%;height:100%;display:flex;align-items:center;justify-content:center}:host ::ng-deep .p-button{border-radius:0 8px 8px 0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TooltipComponent, selector: " lib-tooltip", inputs: ["icon", "htmlParser", "text", "position", "tooltipEvent", "autoHide", "htmlParse"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: ErrorComponent, selector: "lib-error", inputs: ["hasError", "isTouched", "isSubmitTriggered", "isNestedFormSubmit", "isDirty", "isRequired", "hasGroupError", "errorId"] }] });
|
|
1280
|
+
}
|
|
1281
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DateInputComponent, decorators: [{
|
|
1282
|
+
type: Component,
|
|
1283
|
+
args: [{ selector: 'lib-date-input[group][controlName][name]', imports: [
|
|
1284
|
+
FormsModule,
|
|
1285
|
+
ReactiveFormsModule,
|
|
1286
|
+
NgClass,
|
|
1287
|
+
NgIf,
|
|
1288
|
+
TooltipComponent,
|
|
1289
|
+
DatePickerModule,
|
|
1290
|
+
PrimeTemplate,
|
|
1291
|
+
ErrorComponent,
|
|
1292
|
+
], template: "<div class='flex flex-column' [formGroup]=\"group\" [ngClass]=\"{ 'gap-1': hasGap }\">\r\n <div class=\"flex\" *ngIf=\"isLabelVisible\">\r\n <label [for]=\"name\" class=\"mr-2\">\r\n {{label}}<span class=\"required\" aria-label=\"Is required filed\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <lib-tooltip\r\n *ngIf=\"_isTooltipVisible\"\r\n [position]=\"tooltipPosition\"\r\n [text]=\"tooltipText!\"\r\n ></lib-tooltip>\r\n </div>\r\n\r\n <p-datepicker\r\n [class.ng-invalid.ng-dirty]=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered)) || groupError\"\r\n [appendTo]=\"appendTo\"\r\n *ngIf=\"setMinAndMax\"\r\n [inputId]=\"name\"\r\n (onSelect)=\"onSelect.emit($event)\"\r\n [placeholder]='placeholder'\r\n [dateFormat]=\"dateFormat\"\r\n [showIcon]=\"showIcon\"\r\n [selectionMode]=\"selectionMode\"\r\n [formControlName]=\"controlName\"\r\n [touchUI]=\"touchUI\"\r\n [minDate]=\"minDate || getDateFifteenDaysAgo()\"\r\n [maxDate]=\"maxDate\"\r\n [showClear]=\"showClear\"\r\n (onClear)=\"group.get(controlName)?.reset()\"\r\n [attr.aria-label]=\"accessibilityText\"\r\n [ngClass]=\"{ 'ng-dirty': (group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered) }\"\r\n [disabledDays]=\"disabledDays\"\r\n [disabledDates]=\"disabledDates\"\r\n [showTime]=\"showTime\"\r\n hourFormat=\"24\"\r\n [attr.aria-describedby]=\"name + 'Error'\"\r\n [attr.aria-invalid]=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered)) || groupError\"\r\n [attr.aria-required]=\"isRequired\"\r\n >\r\n <!-- Mare; ideja da barva dolo\u010Dene dneve (npr. takrat ki ni prostih terminov) -->\r\n <!-- 24.05.2024 Mare; zaenkrat ne potrebujemo ve\u010D, ker so neprosti dnevi kar disabled -->\r\n <ng-template pTemplate=\"date\" let-date>\r\n <div>{{date.day}}</div>\r\n </ng-template>\r\n </p-datepicker>\r\n\r\n <p-datepicker\r\n [class.ng-invalid.ng-dirty]=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered)) || groupError\"\r\n [appendTo]=\"appendTo\"\r\n *ngIf=\"!setMinAndMax\"\r\n (onSelect)=\"onSelect.emit($event)\"\r\n [inputId]=\"name\"\r\n [placeholder]='placeholder'\r\n [dateFormat]=\"dateFormat\"\r\n [showIcon]=\"showIcon\"\r\n [selectionMode]=\"selectionMode\"\r\n [formControlName]=\"controlName\"\r\n [touchUI]=\"touchUI\"\r\n [showClear]=\"showClear\"\r\n (onClear)=\"group.get(controlName)?.reset()\"\r\n [ngClass]=\"{ 'ng-dirty': (group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered) }\"\r\n [attr.aria-label]=\"accessibilityText\"\r\n [disabledDays]=\"disabledDays\"\r\n [disabledDates]=\"disabledDates\"\r\n [showTime]=\"showTime\"\r\n hourFormat=\"24\"\r\n [attr.aria-describedby]=\"name + 'Error'\"\r\n [attr.aria-invalid]=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered)) || groupError\"\r\n [attr.aria-required]=\"isRequired\"\r\n ></p-datepicker>\r\n</div>\r\n<lib-error\r\n *ngIf=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered)\"\r\n [hasError]=\"group.get(controlName)!.errors\"\r\n [isTouched]=\"group.get(controlName)!.touched\"\r\n [isSubmitTriggered]=\"formStatus!.isSubmitTriggered!\"\r\n [hasGroupError]=\"groupError\"\r\n [errorId]=\"name+'Error'\"\r\n></lib-error>\r\n", styles: [":host ::ng-deep{width:100%}:host ::ng-deep .p-datepicker-dropdown{background-color:#3e7c94;color:#fff;border-color:#3e7c94}:host ::ng-deep .p-datepicker-dropdown:hover{background-color:#1b495a!important;border-color:#1b495a!important;color:#fff!important}:host ::ng-deep .p-datepicker-title>*{color:#fff!important;font-weight:700}:host ::ng-deep .p-datepicker-clear-icon{padding-right:8px;color:#6d7375;cursor:pointer}:host ::ng-deep .p-datepicker{min-width:max-content!important;width:100%;border:1.75px solid #3E7C94!important}:host ::ng-deep .p-datepicker::placeholder{font-style:italic!important;color:#848484!important}:host ::ng-deep .p-datepicker:hover{border:1.75px solid #ffa142!important}:host ::ng-deep .p-datepicker:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-datepicker table td>span.p-highlight{color:#000;background:#3e7c94}:host ::ng-deep .p-datepicker:not(.p-disabled).p-focus{border:1.75px solid #1B495A;box-shadow:0 0 2px 3px #ffa142}:host ::ng-deep .p-datepicker:not(.p-disabled).p-focus span{outline:none}:host ::ng-deep .p-datepicker-prev-button,:host ::ng-deep .p-datepicker-next-button{color:#fff!important}:host ::ng-deep .p-inputtext{border:none}:host ::ng-deep .appointment-not-available{background:#ff7373;width:100%;height:100%;display:flex;align-items:center;justify-content:center}:host ::ng-deep .appointment-available{background:#e0fde7;width:100%;height:100%;display:flex;align-items:center;justify-content:center}:host ::ng-deep .p-button{border-radius:0 8px 8px 0}\n"] }]
|
|
1293
|
+
}], propDecorators: { isLabelVisible: [{
|
|
1294
|
+
type: Input
|
|
1295
|
+
}], name: [{
|
|
1296
|
+
type: Input
|
|
1297
|
+
}], label: [{
|
|
1298
|
+
type: Input
|
|
1299
|
+
}], placeholder: [{
|
|
1300
|
+
type: Input
|
|
1301
|
+
}], accessibilityText: [{
|
|
1302
|
+
type: Input
|
|
1303
|
+
}], isRequired: [{
|
|
1304
|
+
type: Input
|
|
1305
|
+
}], tooltipPosition: [{
|
|
1306
|
+
type: Input
|
|
1307
|
+
}], tooltipText: [{
|
|
1308
|
+
type: Input
|
|
1309
|
+
}], dateFormat: [{
|
|
1310
|
+
type: Input
|
|
1311
|
+
}], group: [{
|
|
1312
|
+
type: Input
|
|
1313
|
+
}], controlName: [{
|
|
1314
|
+
type: Input
|
|
1315
|
+
}], showIcon: [{
|
|
1316
|
+
type: Input
|
|
1317
|
+
}], selectionMode: [{
|
|
1318
|
+
type: Input
|
|
1319
|
+
}], touchUI: [{
|
|
1320
|
+
type: Input
|
|
1321
|
+
}], formStatus: [{
|
|
1322
|
+
type: Input
|
|
1323
|
+
}], showClear: [{
|
|
1324
|
+
type: Input
|
|
1325
|
+
}], isPublicDate: [{
|
|
1326
|
+
type: Input
|
|
1327
|
+
}], minDate: [{
|
|
1328
|
+
type: Input
|
|
1329
|
+
}], maxDate: [{
|
|
1330
|
+
type: Input
|
|
1331
|
+
}], minDateToday: [{
|
|
1332
|
+
type: Input
|
|
1333
|
+
}], maxDateSixMonths: [{
|
|
1334
|
+
type: Input
|
|
1335
|
+
}], maxDateThreeMonths: [{
|
|
1336
|
+
type: Input
|
|
1337
|
+
}], setMinAndMax: [{
|
|
1338
|
+
type: Input
|
|
1339
|
+
}], hasGap: [{
|
|
1340
|
+
type: Input
|
|
1341
|
+
}], disabledDates: [{
|
|
1342
|
+
type: Input
|
|
1343
|
+
}], appendTo: [{
|
|
1344
|
+
type: Input
|
|
1345
|
+
}], groupError: [{
|
|
1346
|
+
type: Input
|
|
1347
|
+
}], showTime: [{
|
|
1348
|
+
type: Input
|
|
1349
|
+
}], availableDates: [{
|
|
1350
|
+
type: Input
|
|
1351
|
+
}], disabledDays: [{
|
|
1352
|
+
type: Input
|
|
1353
|
+
}], disabledWeekends: [{
|
|
1354
|
+
type: Input
|
|
1355
|
+
}], onSelect: [{
|
|
1356
|
+
type: Output
|
|
1357
|
+
}] } });
|
|
1358
|
+
|
|
1359
|
+
class FooterComponent {
|
|
1360
|
+
messageService;
|
|
1361
|
+
translateService;
|
|
1362
|
+
router;
|
|
1363
|
+
version;
|
|
1364
|
+
constructor(messageService, translateService, router) {
|
|
1365
|
+
this.messageService = messageService;
|
|
1366
|
+
this.translateService = translateService;
|
|
1367
|
+
this.router = router;
|
|
1368
|
+
}
|
|
1369
|
+
/**
|
|
1370
|
+
* @deprecated
|
|
1371
|
+
* @see openPersonalDataInfo()
|
|
1372
|
+
*/
|
|
1373
|
+
openGdpr(event) {
|
|
1374
|
+
event.preventDefault();
|
|
1375
|
+
this.messageService.add({
|
|
1376
|
+
key: 'notification',
|
|
1377
|
+
severity: 'info',
|
|
1378
|
+
summary: this.translateService?.instant('components.footer.modal.GDPR'),
|
|
1379
|
+
});
|
|
1380
|
+
}
|
|
1381
|
+
/**
|
|
1382
|
+
* ES-267 odpre stran z obvestilom glede osebnih podatkov
|
|
1383
|
+
* @param event
|
|
1384
|
+
*/
|
|
1385
|
+
openPersonalDataInfo(event) {
|
|
1386
|
+
event.preventDefault();
|
|
1387
|
+
const url = window.location.href;
|
|
1388
|
+
const organisation = url.split('/')[3];
|
|
1389
|
+
const language = url.split('/')[4];
|
|
1390
|
+
this.router.navigateByUrl(`${organisation}/${language}/obvestilo-glede-osebnih-podatkov`);
|
|
1391
|
+
}
|
|
1392
|
+
openAccessibilityInfo(event) {
|
|
1393
|
+
event.preventDefault();
|
|
1394
|
+
const url = window.location.href;
|
|
1395
|
+
const organisation = url.split('/')[3];
|
|
1396
|
+
const language = url.split('/')[4];
|
|
1397
|
+
this.router.navigateByUrl(`${organisation}/${language}/izjava-o-dostopnosti`);
|
|
1398
|
+
}
|
|
1399
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FooterComponent, deps: [{ token: i1$1.MessageService }, { token: i2.TranslateService }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
1400
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FooterComponent, isStandalone: true, selector: "lib-footer", inputs: { version: "version" }, ngImport: i0, template: "<footer class=\"footer\">\r\n <div class=\"footer-logo-list\">\r\n <p class=\"container text-white\">{{ 'components.footer.version' | translate }}: {{ version }}</p>\r\n </div>\r\n</footer>\r\n", styles: [".footer{background:#d7d7d7}.footer .footer-links a{word-break:break-word}.footer .footer-logo-list{background:#000;height:5rem}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
1401
|
+
}
|
|
1402
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FooterComponent, decorators: [{
|
|
1403
|
+
type: Component,
|
|
1404
|
+
args: [{ selector: 'lib-footer', imports: [TranslateModule], template: "<footer class=\"footer\">\r\n <div class=\"footer-logo-list\">\r\n <p class=\"container text-white\">{{ 'components.footer.version' | translate }}: {{ version }}</p>\r\n </div>\r\n</footer>\r\n", styles: [".footer{background:#d7d7d7}.footer .footer-links a{word-break:break-word}.footer .footer-logo-list{background:#000;height:5rem}\n"] }]
|
|
1405
|
+
}], ctorParameters: () => [{ type: i1$1.MessageService }, { type: i2.TranslateService }, { type: i1$2.Router }], propDecorators: { version: [{
|
|
1406
|
+
type: Input
|
|
1407
|
+
}] } });
|
|
1408
|
+
|
|
1409
|
+
class MainMenuComponent {
|
|
1410
|
+
openNavigation = false;
|
|
1411
|
+
navLinkList;
|
|
1412
|
+
buttonTitle = 'Vsebine';
|
|
1413
|
+
mainMenuTitle = 'Področja';
|
|
1414
|
+
/**
|
|
1415
|
+
* toggle menu
|
|
1416
|
+
*/
|
|
1417
|
+
openMenu() {
|
|
1418
|
+
this.openNavigation = !this.openNavigation;
|
|
1419
|
+
}
|
|
1420
|
+
/**
|
|
1421
|
+
* Listen to all clickEvents and if menu is open, and you click outside the menu or toggle-menu-button the close menu
|
|
1422
|
+
* @param event MouseEvent, click
|
|
1423
|
+
*/
|
|
1424
|
+
onClick(event) {
|
|
1425
|
+
if (this.openNavigation) {
|
|
1426
|
+
const menuContainer = document.querySelector('.menu-container');
|
|
1427
|
+
const navContainer = document.getElementById('toggle-menu-button');
|
|
1428
|
+
if (menuContainer &&
|
|
1429
|
+
navContainer &&
|
|
1430
|
+
!menuContainer.contains(event.target) &&
|
|
1431
|
+
!navContainer.contains(event.target)) {
|
|
1432
|
+
this.openNavigation = false;
|
|
1433
|
+
}
|
|
1434
|
+
}
|
|
1435
|
+
}
|
|
1436
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MainMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1437
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MainMenuComponent, isStandalone: true, selector: "lib-main-menu", inputs: { navLinkList: "navLinkList", buttonTitle: "buttonTitle", mainMenuTitle: "mainMenuTitle" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<nav class=\"navigation flex align-items-center\">\r\n <div class=\"nav-container\">\r\n <p-button id=\"toggle-menu-button\" aria-label=\"Click to open\" [ngClass]=\"{'openNavStyle': openNavigation}\"\r\n [label]=\"buttonTitle\"\r\n icon=\"pi pi-chevron-{{openNavigation ? 'up' : 'down'}}\" iconPos=\"right\" styleClass=\"p-button-text\"\r\n (click)=\"openMenu()\"></p-button>\r\n </div>\r\n</nav>\r\n\r\n<div *ngIf=\"openNavigation\" class=\"menu-container flex justify-content-center\" aria-expanded=\"true\">\r\n <div class=\"container grid p-0 m-0\">\r\n <h5 class=\"text-lg font-normal col-12 mb-3\">{{ mainMenuTitle | uppercase}}</h5>\r\n <div class=\"footer-links col-12 md:col-6 lg:col-4 xl:col-2\" *ngFor=\"let navColumn of navLinkList\">\r\n <ul>\r\n <li class=\"pb-1\" *ngFor=\"let link of navColumn.columnLinkList\">\r\n <span class=\"arrow-link\"></span><a href=\"#\" class=\"link\">{{ link }}</a>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".navigation{position:relative;height:3.5rem;background:#d7d7d7;width:100%;border-bottom:1px solid #cccccc;display:flex;justify-content:center}.nav-container{max-width:1200px;width:100%}.menu-container{z-index:10000;position:absolute;height:max-content;background:#fff;width:100%;padding:20px;box-shadow:0 6px 5px #1b495a4d}:host ::ng-deep .p-button{border-radius:0!important;height:3.5rem}.openNavStyle{display:inline-block;background:#fff!important;height:100%!important;width:max-content}\n"], dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }] });
|
|
1438
|
+
}
|
|
1439
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MainMenuComponent, decorators: [{
|
|
1440
|
+
type: Component,
|
|
1441
|
+
args: [{ selector: 'lib-main-menu', imports: [
|
|
1442
|
+
Button,
|
|
1443
|
+
NgClass,
|
|
1444
|
+
NgIf,
|
|
1445
|
+
NgFor,
|
|
1446
|
+
UpperCasePipe,
|
|
1447
|
+
], template: "<nav class=\"navigation flex align-items-center\">\r\n <div class=\"nav-container\">\r\n <p-button id=\"toggle-menu-button\" aria-label=\"Click to open\" [ngClass]=\"{'openNavStyle': openNavigation}\"\r\n [label]=\"buttonTitle\"\r\n icon=\"pi pi-chevron-{{openNavigation ? 'up' : 'down'}}\" iconPos=\"right\" styleClass=\"p-button-text\"\r\n (click)=\"openMenu()\"></p-button>\r\n </div>\r\n</nav>\r\n\r\n<div *ngIf=\"openNavigation\" class=\"menu-container flex justify-content-center\" aria-expanded=\"true\">\r\n <div class=\"container grid p-0 m-0\">\r\n <h5 class=\"text-lg font-normal col-12 mb-3\">{{ mainMenuTitle | uppercase}}</h5>\r\n <div class=\"footer-links col-12 md:col-6 lg:col-4 xl:col-2\" *ngFor=\"let navColumn of navLinkList\">\r\n <ul>\r\n <li class=\"pb-1\" *ngFor=\"let link of navColumn.columnLinkList\">\r\n <span class=\"arrow-link\"></span><a href=\"#\" class=\"link\">{{ link }}</a>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".navigation{position:relative;height:3.5rem;background:#d7d7d7;width:100%;border-bottom:1px solid #cccccc;display:flex;justify-content:center}.nav-container{max-width:1200px;width:100%}.menu-container{z-index:10000;position:absolute;height:max-content;background:#fff;width:100%;padding:20px;box-shadow:0 6px 5px #1b495a4d}:host ::ng-deep .p-button{border-radius:0!important;height:3.5rem}.openNavStyle{display:inline-block;background:#fff!important;height:100%!important;width:max-content}\n"] }]
|
|
1448
|
+
}], propDecorators: { navLinkList: [{
|
|
1449
|
+
type: Input
|
|
1450
|
+
}], buttonTitle: [{
|
|
1451
|
+
type: Input
|
|
1452
|
+
}], mainMenuTitle: [{
|
|
1453
|
+
type: Input
|
|
1454
|
+
}], onClick: [{
|
|
1455
|
+
type: HostListener,
|
|
1456
|
+
args: ['document:click', ['$event']]
|
|
1457
|
+
}] } });
|
|
1458
|
+
|
|
1459
|
+
class CheckboxComponent {
|
|
1460
|
+
label;
|
|
1461
|
+
group;
|
|
1462
|
+
controlName;
|
|
1463
|
+
value = false;
|
|
1464
|
+
clickCheckboxEvent = new EventEmitter();
|
|
1465
|
+
formStatus;
|
|
1466
|
+
ariaLabel = '';
|
|
1467
|
+
/**
|
|
1468
|
+
* Emit event on checkbox click
|
|
1469
|
+
* @param event
|
|
1470
|
+
*/
|
|
1471
|
+
clickCheckbox(event) {
|
|
1472
|
+
this.clickCheckboxEvent.emit(event);
|
|
1473
|
+
event.stopPropagation();
|
|
1474
|
+
}
|
|
1475
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1476
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: CheckboxComponent, isStandalone: true, selector: "lib-checkbox[group][controlName][label]", inputs: { label: "label", group: "group", controlName: "controlName", value: "value", formStatus: "formStatus", ariaLabel: "ariaLabel" }, outputs: { clickCheckboxEvent: "clickCheckboxEvent" }, ngImport: i0, template: "<div [formGroup]=\"group\">\r\n <p-checkbox [binary]=\"true\"\r\n (click)=\"clickCheckbox($event)\"\r\n [formControlName]=\"controlName\"\r\n [value]=\"value\"\r\n [inputId]=\"controlName\" \r\n [ariaLabel]=\"ariaLabel\"\r\n ></p-checkbox>\r\n <label [for]=\"controlName\" class=\"ml-2\">{{ label }}</label>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }] });
|
|
1477
|
+
}
|
|
1478
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
1479
|
+
type: Component,
|
|
1480
|
+
args: [{ selector: 'lib-checkbox[group][controlName][label]', imports: [
|
|
1481
|
+
FormsModule,
|
|
1482
|
+
ReactiveFormsModule,
|
|
1483
|
+
Checkbox,
|
|
1484
|
+
], template: "<div [formGroup]=\"group\">\r\n <p-checkbox [binary]=\"true\"\r\n (click)=\"clickCheckbox($event)\"\r\n [formControlName]=\"controlName\"\r\n [value]=\"value\"\r\n [inputId]=\"controlName\" \r\n [ariaLabel]=\"ariaLabel\"\r\n ></p-checkbox>\r\n <label [for]=\"controlName\" class=\"ml-2\">{{ label }}</label>\r\n</div>\r\n" }]
|
|
1485
|
+
}], propDecorators: { label: [{
|
|
1486
|
+
type: Input
|
|
1487
|
+
}], group: [{
|
|
1488
|
+
type: Input
|
|
1489
|
+
}], controlName: [{
|
|
1490
|
+
type: Input
|
|
1491
|
+
}], value: [{
|
|
1492
|
+
type: Input
|
|
1493
|
+
}], clickCheckboxEvent: [{
|
|
1494
|
+
type: Output
|
|
1495
|
+
}], formStatus: [{
|
|
1496
|
+
type: Input
|
|
1497
|
+
}], ariaLabel: [{
|
|
1498
|
+
type: Input
|
|
1499
|
+
}] } });
|
|
1500
|
+
|
|
1501
|
+
class ConfirmModalComponent {
|
|
1502
|
+
acceptBtnLabel = 'Da';
|
|
1503
|
+
acceptBtnIcon = 'pi pi-check';
|
|
1504
|
+
rejectBtnLabel = 'Ne';
|
|
1505
|
+
rejectBtnIcon = 'pi pi-times';
|
|
1506
|
+
dialogHeaderColor = DialogColor.danger;
|
|
1507
|
+
rejectClickEvent = new EventEmitter();
|
|
1508
|
+
acceptClickEvent = new EventEmitter();
|
|
1509
|
+
headerClassMap = {
|
|
1510
|
+
primary: 'primary',
|
|
1511
|
+
secondary: 'secondary',
|
|
1512
|
+
info: 'info',
|
|
1513
|
+
warning: 'warning',
|
|
1514
|
+
danger: 'danger',
|
|
1515
|
+
};
|
|
1516
|
+
reject(event) {
|
|
1517
|
+
this.rejectClickEvent.emit(event);
|
|
1518
|
+
}
|
|
1519
|
+
accept(event) {
|
|
1520
|
+
this.acceptClickEvent.emit(event);
|
|
1521
|
+
}
|
|
1522
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ConfirmModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1523
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ConfirmModalComponent, isStandalone: true, selector: "lib-confirm-modal", inputs: { acceptBtnLabel: "acceptBtnLabel", acceptBtnIcon: "acceptBtnIcon", rejectBtnLabel: "rejectBtnLabel", rejectBtnIcon: "rejectBtnIcon", dialogHeaderColor: "dialogHeaderColor" }, outputs: { rejectClickEvent: "rejectClickEvent", acceptClickEvent: "acceptClickEvent" }, ngImport: i0, template: "<p-confirmdialog [ngClass]=\"headerClassMap[dialogHeaderColor]\"\r\n #cd [style]=\"{width: 'max-content'}\">\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"confirm-button-container\">\r\n <p-button styleClass=\"p-button-danger\" [icon]=\"rejectBtnIcon\" [label]=\"rejectBtnLabel\" (click)=\"reject($event);\"></p-button>\r\n <p-button styleClass=\"p-button-primary\" [icon]=\"acceptBtnIcon\" [label]=\"acceptBtnLabel\" (click)=\"accept($event);\"></p-button>\r\n </div>\r\n </ng-template>\r\n</p-confirmdialog>\r\n", styles: [":host ::ng-deep .primary .p-dialog .p-dialog-header{background:#3e7c94!important;color:#fff!important}:host ::ng-deep .primary .p-dialog .p-dialog-header .p-dialog-header-icon{color:#fff!important}:host ::ng-deep .info .p-dialog .p-dialog-header{background:#529bda!important;color:#fff!important}:host ::ng-deep .info .p-dialog .p-dialog-header .p-dialog-header-icon{color:#fff!important}:host ::ng-deep .secondary .p-dialog .p-dialog-header{background:#facd9c!important}:host ::ng-deep .warning .p-dialog .p-dialog-header{background:#fdca40!important}:host ::ng-deep .danger .p-dialog .p-dialog-header{background:#b2414d!important;color:#fff!important}:host ::ng-deep .danger .p-dialog .p-dialog-header .p-dialog-header-icon{color:#fff!important}:host ::ng-deep .p-dialog{width:25vw!important}@media screen and (max-width: 768px){:host ::ng-deep .p-dialog{width:85vw!important}}:host ::ng-deep .p-dialog .p-dialog-header{border:none!important}:host ::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{color:#fff!important}@media screen and (max-width: 768px){:host ::ng-deep .p-dialog .p-dialog-header .p-dialog-title{font-weight:500;font-size:1rem}}:host ::ng-deep .p-dialog .p-dialog-footer .confirm-button-container{width:100%;display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i1$5.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }] });
|
|
1524
|
+
}
|
|
1525
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ConfirmModalComponent, decorators: [{
|
|
1526
|
+
type: Component,
|
|
1527
|
+
args: [{ selector: 'lib-confirm-modal', imports: [
|
|
1528
|
+
NgClass,
|
|
1529
|
+
PrimeTemplate,
|
|
1530
|
+
ConfirmDialogModule,
|
|
1531
|
+
Button,
|
|
1532
|
+
], template: "<p-confirmdialog [ngClass]=\"headerClassMap[dialogHeaderColor]\"\r\n #cd [style]=\"{width: 'max-content'}\">\r\n <ng-template pTemplate=\"footer\">\r\n <div class=\"confirm-button-container\">\r\n <p-button styleClass=\"p-button-danger\" [icon]=\"rejectBtnIcon\" [label]=\"rejectBtnLabel\" (click)=\"reject($event);\"></p-button>\r\n <p-button styleClass=\"p-button-primary\" [icon]=\"acceptBtnIcon\" [label]=\"acceptBtnLabel\" (click)=\"accept($event);\"></p-button>\r\n </div>\r\n </ng-template>\r\n</p-confirmdialog>\r\n", styles: [":host ::ng-deep .primary .p-dialog .p-dialog-header{background:#3e7c94!important;color:#fff!important}:host ::ng-deep .primary .p-dialog .p-dialog-header .p-dialog-header-icon{color:#fff!important}:host ::ng-deep .info .p-dialog .p-dialog-header{background:#529bda!important;color:#fff!important}:host ::ng-deep .info .p-dialog .p-dialog-header .p-dialog-header-icon{color:#fff!important}:host ::ng-deep .secondary .p-dialog .p-dialog-header{background:#facd9c!important}:host ::ng-deep .warning .p-dialog .p-dialog-header{background:#fdca40!important}:host ::ng-deep .danger .p-dialog .p-dialog-header{background:#b2414d!important;color:#fff!important}:host ::ng-deep .danger .p-dialog .p-dialog-header .p-dialog-header-icon{color:#fff!important}:host ::ng-deep .p-dialog{width:25vw!important}@media screen and (max-width: 768px){:host ::ng-deep .p-dialog{width:85vw!important}}:host ::ng-deep .p-dialog .p-dialog-header{border:none!important}:host ::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon{color:#fff!important}@media screen and (max-width: 768px){:host ::ng-deep .p-dialog .p-dialog-header .p-dialog-title{font-weight:500;font-size:1rem}}:host ::ng-deep .p-dialog .p-dialog-footer .confirm-button-container{width:100%;display:flex;justify-content:space-between}\n"] }]
|
|
1533
|
+
}], propDecorators: { acceptBtnLabel: [{
|
|
1534
|
+
type: Input
|
|
1535
|
+
}], acceptBtnIcon: [{
|
|
1536
|
+
type: Input
|
|
1537
|
+
}], rejectBtnLabel: [{
|
|
1538
|
+
type: Input
|
|
1539
|
+
}], rejectBtnIcon: [{
|
|
1540
|
+
type: Input
|
|
1541
|
+
}], dialogHeaderColor: [{
|
|
1542
|
+
type: Input
|
|
1543
|
+
}], rejectClickEvent: [{
|
|
1544
|
+
type: Output
|
|
1545
|
+
}], acceptClickEvent: [{
|
|
1546
|
+
type: Output
|
|
1547
|
+
}] } });
|
|
1548
|
+
|
|
1549
|
+
/**
|
|
1550
|
+
* Checks if the provided object is empty (has no properties of its own)
|
|
1551
|
+
*
|
|
1552
|
+
* @param {object} obj - The object to check
|
|
1553
|
+
* @returns {boolean} - Returns true if the object is empty, false otherwise
|
|
1554
|
+
*/
|
|
1555
|
+
function isEmpty(obj) {
|
|
1556
|
+
return Object.keys(obj).length === 0 && obj.constructor === Object;
|
|
1557
|
+
}
|
|
1558
|
+
|
|
1559
|
+
var CaptionColor;
|
|
1560
|
+
(function (CaptionColor) {
|
|
1561
|
+
CaptionColor["today"] = "today";
|
|
1562
|
+
CaptionColor["past"] = "past";
|
|
1563
|
+
CaptionColor["future"] = "future";
|
|
1564
|
+
})(CaptionColor || (CaptionColor = {}));
|
|
1565
|
+
|
|
1566
|
+
var TagColor;
|
|
1567
|
+
(function (TagColor) {
|
|
1568
|
+
TagColor["success"] = "success";
|
|
1569
|
+
TagColor["secondary"] = "secondary";
|
|
1570
|
+
TagColor["info"] = "info";
|
|
1571
|
+
TagColor["warning"] = "warning";
|
|
1572
|
+
TagColor["danger"] = "danger";
|
|
1573
|
+
TagColor["contrast"] = "contrast";
|
|
1574
|
+
})(TagColor || (TagColor = {}));
|
|
1575
|
+
|
|
1576
|
+
class ToggleSwitchComponent {
|
|
1577
|
+
group;
|
|
1578
|
+
controlName;
|
|
1579
|
+
isFormElement = true;
|
|
1580
|
+
checked;
|
|
1581
|
+
getValueEvent = new EventEmitter();
|
|
1582
|
+
checkedChanged = new EventEmitter();
|
|
1583
|
+
disabled;
|
|
1584
|
+
toggleValue($event, isForm) {
|
|
1585
|
+
this.getValueEvent.emit($event);
|
|
1586
|
+
if (!isForm) {
|
|
1587
|
+
this.handleToggle();
|
|
1588
|
+
}
|
|
1589
|
+
}
|
|
1590
|
+
changeChecked(newToggleValue) {
|
|
1591
|
+
this.checked = newToggleValue;
|
|
1592
|
+
this.checkedChanged.emit(this.checked);
|
|
1593
|
+
}
|
|
1594
|
+
handleToggle() {
|
|
1595
|
+
this.changeChecked(false);
|
|
1596
|
+
}
|
|
1597
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1598
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ToggleSwitchComponent, isStandalone: true, selector: "lib-toggle-switch", inputs: { group: "group", controlName: "controlName", isFormElement: "isFormElement", checked: "checked", disabled: "disabled" }, outputs: { getValueEvent: "getValueEvent", checkedChanged: "checkedChanged" }, ngImport: i0, template: "<div class=\"flex flex-column mt-2\" [formGroup]=\"group\" *ngIf=\"isFormElement\">\r\n <p-toggleswitch\r\n (onChange)=\"toggleValue($event, true)\"\r\n [formControlName]=\"controlName\"\r\n ></p-toggleswitch>\r\n</div>\r\n<div class=\"flex flex-column mt-2\" *ngIf=\"!isFormElement\">\r\n <p-toggleswitch [disabled]=\"disabled\" [(ngModel)]=\"checked\" (onChange)=\"toggleValue($event, false)\"></p-toggleswitch>\r\n</div>\r\n", styles: [":host ::ng-deep .p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider{background:#3e7c94!important}:host ::ng-deep .p-toggleswitch .p-toggleswitch-slider{border-radius:15px;background:#d7d7d7!important}:host ::ng-deep .p-toggleswitch .p-toggleswitch-slider:before{border-radius:50%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i2$3.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["style", "styleClass", "tabindex", "inputId", "name", "disabled", "readonly", "trueValue", "falseValue", "ariaLabel", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }] });
|
|
1599
|
+
}
|
|
1600
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleSwitchComponent, decorators: [{
|
|
1601
|
+
type: Component,
|
|
1602
|
+
args: [{ selector: 'lib-toggle-switch', imports: [
|
|
1603
|
+
NgIf,
|
|
1604
|
+
FormsModule,
|
|
1605
|
+
ReactiveFormsModule,
|
|
1606
|
+
ToggleSwitchModule,
|
|
1607
|
+
], template: "<div class=\"flex flex-column mt-2\" [formGroup]=\"group\" *ngIf=\"isFormElement\">\r\n <p-toggleswitch\r\n (onChange)=\"toggleValue($event, true)\"\r\n [formControlName]=\"controlName\"\r\n ></p-toggleswitch>\r\n</div>\r\n<div class=\"flex flex-column mt-2\" *ngIf=\"!isFormElement\">\r\n <p-toggleswitch [disabled]=\"disabled\" [(ngModel)]=\"checked\" (onChange)=\"toggleValue($event, false)\"></p-toggleswitch>\r\n</div>\r\n", styles: [":host ::ng-deep .p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider{background:#3e7c94!important}:host ::ng-deep .p-toggleswitch .p-toggleswitch-slider{border-radius:15px;background:#d7d7d7!important}:host ::ng-deep .p-toggleswitch .p-toggleswitch-slider:before{border-radius:50%}\n"] }]
|
|
1608
|
+
}], propDecorators: { group: [{
|
|
1609
|
+
type: Input
|
|
1610
|
+
}], controlName: [{
|
|
1611
|
+
type: Input
|
|
1612
|
+
}], isFormElement: [{
|
|
1613
|
+
type: Input
|
|
1614
|
+
}], checked: [{
|
|
1615
|
+
type: Input
|
|
1616
|
+
}], getValueEvent: [{
|
|
1617
|
+
type: Output
|
|
1618
|
+
}], checkedChanged: [{
|
|
1619
|
+
type: Output
|
|
1620
|
+
}], disabled: [{
|
|
1621
|
+
type: Input
|
|
1622
|
+
}] } });
|
|
1623
|
+
|
|
1624
|
+
class TagComponent {
|
|
1625
|
+
tagText;
|
|
1626
|
+
tagColor = TagColor.success;
|
|
1627
|
+
rounded = true;
|
|
1628
|
+
getColor() {
|
|
1629
|
+
return this.tagColor;
|
|
1630
|
+
}
|
|
1631
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1632
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TagComponent, isStandalone: true, selector: "lib-tag", inputs: { tagText: "tagText", tagColor: "tagColor", rounded: "rounded" }, ngImport: i0, template: "<p-tag\r\n [value]=\"tagText\"\r\n [severity]=\"getColor()\"\r\n [rounded]=\"rounded\"\r\n></p-tag>\r\n", styles: [""], dependencies: [{ kind: "component", type: Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }] });
|
|
1633
|
+
}
|
|
1634
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TagComponent, decorators: [{
|
|
1635
|
+
type: Component,
|
|
1636
|
+
args: [{ selector: 'lib-tag', imports: [Tag], template: "<p-tag\r\n [value]=\"tagText\"\r\n [severity]=\"getColor()\"\r\n [rounded]=\"rounded\"\r\n></p-tag>\r\n" }]
|
|
1637
|
+
}], propDecorators: { tagText: [{
|
|
1638
|
+
type: Input
|
|
1639
|
+
}], tagColor: [{
|
|
1640
|
+
type: Input
|
|
1641
|
+
}], rounded: [{
|
|
1642
|
+
type: Input
|
|
1643
|
+
}] } });
|
|
1644
|
+
|
|
1645
|
+
class ButtonLinkComponent {
|
|
1646
|
+
hasIcon = false;
|
|
1647
|
+
label;
|
|
1648
|
+
isDanger = false;
|
|
1649
|
+
isPrimary = false;
|
|
1650
|
+
icon = 'pi-check';
|
|
1651
|
+
target;
|
|
1652
|
+
accessibilityText = '';
|
|
1653
|
+
clickEvent = new EventEmitter();
|
|
1654
|
+
click(event) {
|
|
1655
|
+
this.clickEvent.emit(event);
|
|
1656
|
+
}
|
|
1657
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ButtonLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1658
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ButtonLinkComponent, isStandalone: true, selector: "lib-button-link", inputs: { hasIcon: "hasIcon", label: "label", isDanger: "isDanger", isPrimary: "isPrimary", icon: "icon", target: "target", accessibilityText: "accessibilityText" }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<ng-container *ngIf=\"isDanger\">\r\n <a href=\"#\"\r\n [target]=\"target\"\r\n [attr.aria-label]=\"accessibilityText\"\r\n (click)='click($event)'\r\n class=\"p-button-link p-button-link-danger text-center\">\r\n {{ label }} <i *ngIf=\"hasIcon\" class=\"pi\" [ngClass]=\"icon\"></i>\r\n </a>\r\n</ng-container>\r\n<ng-container *ngIf=\"isPrimary\">\r\n <a href=\"#\"\r\n [target]=\"target\"\r\n [attr.aria-label]=\"accessibilityText\"\r\n (click)='click($event)'\r\n class=\"p-button-link p-button-link-primary text-center\">\r\n {{ label }} <i *ngIf=\"hasIcon\" class=\"pi\" [ngClass]=\"icon\"></i>\r\n </a>\r\n</ng-container>\r\n\r\n", styles: [".p-button-link{border-radius:0;padding:.5rem .4rem;width:100%;text-decoration:none;display:block}.p-button-link.p-button-link-danger{background:#b2414d;color:#fff}.p-button-link.p-button-link-danger:focus{outline:none;box-shadow:0 0 0 .2rem #facd9c}.p-button-link.p-button-link-primary{background:#3e7c94;color:#fff}.p-button-link.p-button-link-primary:focus{outline:none;box-shadow:0 0 0 .2rem #facd9c}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1659
|
+
}
|
|
1660
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ButtonLinkComponent, decorators: [{
|
|
1661
|
+
type: Component,
|
|
1662
|
+
args: [{ selector: 'lib-button-link', imports: [NgIf, NgClass], template: "<ng-container *ngIf=\"isDanger\">\r\n <a href=\"#\"\r\n [target]=\"target\"\r\n [attr.aria-label]=\"accessibilityText\"\r\n (click)='click($event)'\r\n class=\"p-button-link p-button-link-danger text-center\">\r\n {{ label }} <i *ngIf=\"hasIcon\" class=\"pi\" [ngClass]=\"icon\"></i>\r\n </a>\r\n</ng-container>\r\n<ng-container *ngIf=\"isPrimary\">\r\n <a href=\"#\"\r\n [target]=\"target\"\r\n [attr.aria-label]=\"accessibilityText\"\r\n (click)='click($event)'\r\n class=\"p-button-link p-button-link-primary text-center\">\r\n {{ label }} <i *ngIf=\"hasIcon\" class=\"pi\" [ngClass]=\"icon\"></i>\r\n </a>\r\n</ng-container>\r\n\r\n", styles: [".p-button-link{border-radius:0;padding:.5rem .4rem;width:100%;text-decoration:none;display:block}.p-button-link.p-button-link-danger{background:#b2414d;color:#fff}.p-button-link.p-button-link-danger:focus{outline:none;box-shadow:0 0 0 .2rem #facd9c}.p-button-link.p-button-link-primary{background:#3e7c94;color:#fff}.p-button-link.p-button-link-primary:focus{outline:none;box-shadow:0 0 0 .2rem #facd9c}\n"] }]
|
|
1663
|
+
}], propDecorators: { hasIcon: [{
|
|
1664
|
+
type: Input
|
|
1665
|
+
}], label: [{
|
|
1666
|
+
type: Input
|
|
1667
|
+
}], isDanger: [{
|
|
1668
|
+
type: Input
|
|
1669
|
+
}], isPrimary: [{
|
|
1670
|
+
type: Input
|
|
1671
|
+
}], icon: [{
|
|
1672
|
+
type: Input
|
|
1673
|
+
}], target: [{
|
|
1674
|
+
type: Input
|
|
1675
|
+
}], accessibilityText: [{
|
|
1676
|
+
type: Input
|
|
1677
|
+
}], clickEvent: [{
|
|
1678
|
+
type: Output
|
|
1679
|
+
}] } });
|
|
1680
|
+
|
|
1681
|
+
class CustomTableComponent {
|
|
1682
|
+
table;
|
|
1683
|
+
// Table configuration
|
|
1684
|
+
tableData;
|
|
1685
|
+
tableColumns = [];
|
|
1686
|
+
isPaginatorVisible = false;
|
|
1687
|
+
tableRowCount = 10;
|
|
1688
|
+
scrollable = false;
|
|
1689
|
+
scrollHeight;
|
|
1690
|
+
selectedProducts = [];
|
|
1691
|
+
isEditingTable = false;
|
|
1692
|
+
isTableLoading = false;
|
|
1693
|
+
hideColumnsOnMobile = false;
|
|
1694
|
+
tableMinWidth = '15rem';
|
|
1695
|
+
isVirtualScrollButtonVisible = false;
|
|
1696
|
+
isVirtualScroll = false;
|
|
1697
|
+
virtualScrollRowSize = 60;
|
|
1698
|
+
// Caption
|
|
1699
|
+
tableCaption;
|
|
1700
|
+
captionColorClass = CaptionColor.today;
|
|
1701
|
+
isCaptionButtonVisible = false;
|
|
1702
|
+
captionButtonLabel;
|
|
1703
|
+
captionButtonColor = ButtonColor.primary;
|
|
1704
|
+
captionButtonClicked = new EventEmitter();
|
|
1705
|
+
// Table header
|
|
1706
|
+
isTableHeaderVisible = true;
|
|
1707
|
+
emptyHeaderColumnList = [];
|
|
1708
|
+
emptyColumnWidth;
|
|
1709
|
+
// Disable switch - toggle
|
|
1710
|
+
toggleTableHeaderName;
|
|
1711
|
+
toggleWidth = '100px';
|
|
1712
|
+
toggleTwoTableHeaderName;
|
|
1713
|
+
toggleTwoWidth = '100px';
|
|
1714
|
+
toggleThreeTableHeaderName;
|
|
1715
|
+
toggleThreeWidth = '100px';
|
|
1716
|
+
toggleFourTableHeaderName;
|
|
1717
|
+
toggleFourWidth = '100px';
|
|
1718
|
+
// Row color
|
|
1719
|
+
rowColor = '';
|
|
1720
|
+
// Form stuff
|
|
1721
|
+
formGroup;
|
|
1722
|
+
// Input
|
|
1723
|
+
type = InputType.text;
|
|
1724
|
+
formStatus;
|
|
1725
|
+
// Tag
|
|
1726
|
+
tagColor = TagColor.success;
|
|
1727
|
+
// Warning text in first column
|
|
1728
|
+
isWarningTextVisible = false;
|
|
1729
|
+
// Button column one
|
|
1730
|
+
isButtonOneVisible = false;
|
|
1731
|
+
buttonLabel;
|
|
1732
|
+
buttonOneLabel;
|
|
1733
|
+
buttonOneHasIcon;
|
|
1734
|
+
buttonOneEditIcon;
|
|
1735
|
+
buttonOneSaveIcon;
|
|
1736
|
+
buttonOneColor;
|
|
1737
|
+
buttonOneIcon;
|
|
1738
|
+
isPlainTableIconButtonOne;
|
|
1739
|
+
isPlainTableButtonOneLink = false;
|
|
1740
|
+
buttonEditClick = new EventEmitter();
|
|
1741
|
+
buttonSaveClick = new EventEmitter();
|
|
1742
|
+
buttonOneClick = new EventEmitter();
|
|
1743
|
+
// Button column two
|
|
1744
|
+
isButtonTwoVisible = false;
|
|
1745
|
+
buttonTwoLabel;
|
|
1746
|
+
buttonTwoHasIcon;
|
|
1747
|
+
buttonTwoDeleteIcon;
|
|
1748
|
+
buttonTwoCancelIcon;
|
|
1749
|
+
buttonTwoColor;
|
|
1750
|
+
buttonTwoIcon;
|
|
1751
|
+
isPlainTableIconButtonTwo;
|
|
1752
|
+
buttonDeleteClick = new EventEmitter();
|
|
1753
|
+
buttonTwoClick = new EventEmitter();
|
|
1754
|
+
// Deactivate toggle
|
|
1755
|
+
isDeactivateToggle = false;
|
|
1756
|
+
toggleSwitch = new EventEmitter();
|
|
1757
|
+
isDeactivateToggleTwo = false;
|
|
1758
|
+
toggleTwoSwitch = new EventEmitter();
|
|
1759
|
+
isDeactivateToggleThree = false;
|
|
1760
|
+
toggleThreeSwitch = new EventEmitter();
|
|
1761
|
+
isDeactivateToggleFour = false;
|
|
1762
|
+
toggleFourSwitch = new EventEmitter();
|
|
1763
|
+
showEllipsisFullText = false;
|
|
1764
|
+
checkboxOne = new EventEmitter();
|
|
1765
|
+
textDisplayStates = {};
|
|
1766
|
+
overviewList = [
|
|
1767
|
+
{ name: 'Moje naloge', value: 'Item1' },
|
|
1768
|
+
{ name: 'Zapadle naloge', value: 'Item1' },
|
|
1769
|
+
{ name: 'Tuje naloge', value: 'Item1' },
|
|
1770
|
+
{ name: 'Oddane naloge', value: 'Item1' },
|
|
1771
|
+
];
|
|
1772
|
+
// Editing table - BUTTONS
|
|
1773
|
+
onRowEdit(event) {
|
|
1774
|
+
this.table.editingRowKeys = { [event.id]: true };
|
|
1775
|
+
this.buttonEditClick.emit(event);
|
|
1776
|
+
}
|
|
1777
|
+
onRowSave(event, htmlTableRowElement) {
|
|
1778
|
+
this.buttonSaveClick.emit(event);
|
|
1779
|
+
setTimeout(() => {
|
|
1780
|
+
this.table.saveRowEdit(event, htmlTableRowElement);
|
|
1781
|
+
}, 200);
|
|
1782
|
+
}
|
|
1783
|
+
onRowDelete(event) {
|
|
1784
|
+
this.buttonDeleteClick.emit(event);
|
|
1785
|
+
}
|
|
1786
|
+
onRowCancel(event) {
|
|
1787
|
+
this.table.cancelRowEdit(event);
|
|
1788
|
+
}
|
|
1789
|
+
// Caption
|
|
1790
|
+
clickCaptionButton(event) {
|
|
1791
|
+
this.captionButtonClicked.emit(event);
|
|
1792
|
+
}
|
|
1793
|
+
// Button column one
|
|
1794
|
+
clickButtonOne(event) {
|
|
1795
|
+
this.buttonOneClick.emit(event);
|
|
1796
|
+
}
|
|
1797
|
+
// Button column one
|
|
1798
|
+
clickButtonTwo(event) {
|
|
1799
|
+
this.buttonTwoClick.emit(event);
|
|
1800
|
+
}
|
|
1801
|
+
// Deactivate toggle
|
|
1802
|
+
toggleEnable(event) {
|
|
1803
|
+
if (!event.$event.checked) {
|
|
1804
|
+
setTimeout(() => {
|
|
1805
|
+
this.onRowCancel(event.rowData);
|
|
1806
|
+
}, 100);
|
|
1807
|
+
}
|
|
1808
|
+
this.toggleSwitch.emit(event);
|
|
1809
|
+
}
|
|
1810
|
+
toggleTwoEnable(event) {
|
|
1811
|
+
if (!event.$event.checked) {
|
|
1812
|
+
setTimeout(() => {
|
|
1813
|
+
this.onRowCancel(event.rowData);
|
|
1814
|
+
}, 100);
|
|
1815
|
+
}
|
|
1816
|
+
this.toggleTwoSwitch.emit(event);
|
|
1817
|
+
}
|
|
1818
|
+
toggleThreeEnable(event) {
|
|
1819
|
+
if (!event.$event.checked) {
|
|
1820
|
+
setTimeout(() => {
|
|
1821
|
+
this.onRowCancel(event.rowData);
|
|
1822
|
+
}, 100);
|
|
1823
|
+
}
|
|
1824
|
+
this.toggleThreeSwitch.emit(event);
|
|
1825
|
+
}
|
|
1826
|
+
toggleFourEnable(event) {
|
|
1827
|
+
if (!event.$event.checked) {
|
|
1828
|
+
setTimeout(() => {
|
|
1829
|
+
this.onRowCancel(event.rowData);
|
|
1830
|
+
}, 100);
|
|
1831
|
+
}
|
|
1832
|
+
this.toggleFourSwitch.emit(event);
|
|
1833
|
+
}
|
|
1834
|
+
clickCheckboxOne(event, fieldValue) {
|
|
1835
|
+
this.checkboxOne.emit({ event: event, fieldValue: fieldValue });
|
|
1836
|
+
}
|
|
1837
|
+
// Helper method for nested field structures
|
|
1838
|
+
getNestedValue(data, field) {
|
|
1839
|
+
if (!field) {
|
|
1840
|
+
return null;
|
|
1841
|
+
}
|
|
1842
|
+
const fields = field.split('.');
|
|
1843
|
+
let value = data;
|
|
1844
|
+
for (const f of fields) {
|
|
1845
|
+
// eslint-disable-next-line no-prototype-builtins
|
|
1846
|
+
if (value && value.hasOwnProperty(f)) {
|
|
1847
|
+
value = value[f];
|
|
1848
|
+
}
|
|
1849
|
+
else {
|
|
1850
|
+
return null;
|
|
1851
|
+
}
|
|
1852
|
+
}
|
|
1853
|
+
return value;
|
|
1854
|
+
}
|
|
1855
|
+
isMobile() {
|
|
1856
|
+
return window.innerWidth <= 768;
|
|
1857
|
+
}
|
|
1858
|
+
ngOnInit() {
|
|
1859
|
+
const conditions = [this.isButtonOneVisible, this.isButtonTwoVisible];
|
|
1860
|
+
conditions.forEach((condition) => {
|
|
1861
|
+
if (condition) {
|
|
1862
|
+
this.emptyHeaderColumnList.push('');
|
|
1863
|
+
}
|
|
1864
|
+
});
|
|
1865
|
+
}
|
|
1866
|
+
/**
|
|
1867
|
+
* da skrije/prikaže poln oz. skrajšan tekst na 50 znakov
|
|
1868
|
+
* TODO: zaenkrat izpuščeno
|
|
1869
|
+
*/
|
|
1870
|
+
toggleTextDisplay(rowData) {
|
|
1871
|
+
if (!this.textDisplayStates.hasOwnProperty(rowData.id)) {
|
|
1872
|
+
this.textDisplayStates[rowData.id] = false; // default je komplet tekst
|
|
1873
|
+
}
|
|
1874
|
+
this.textDisplayStates[rowData.id] = !this.textDisplayStates[rowData.id];
|
|
1875
|
+
}
|
|
1876
|
+
/**
|
|
1877
|
+
* da skrije/prikaže poln oz. skrajšan tekst na 50 znakov
|
|
1878
|
+
* TODO: zaenkrat izpuščeno
|
|
1879
|
+
*/
|
|
1880
|
+
getDisplayText(rowData, field) {
|
|
1881
|
+
const isShortened = this.textDisplayStates[rowData.id];
|
|
1882
|
+
const text = this.getNestedValue(rowData, field);
|
|
1883
|
+
if (!isShortened || text.length <= 50) {
|
|
1884
|
+
return text; // poln text je default
|
|
1885
|
+
}
|
|
1886
|
+
else {
|
|
1887
|
+
return text.substring(0, 50) + ' ...'; // skrajšan text
|
|
1888
|
+
}
|
|
1889
|
+
}
|
|
1890
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CustomTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1891
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: CustomTableComponent, isStandalone: true, selector: "lib-custom-table[tableData][tableColumns]", inputs: { tableData: "tableData", tableColumns: "tableColumns", isPaginatorVisible: "isPaginatorVisible", tableRowCount: "tableRowCount", scrollable: "scrollable", scrollHeight: "scrollHeight", selectedProducts: "selectedProducts", isEditingTable: "isEditingTable", isTableLoading: "isTableLoading", hideColumnsOnMobile: "hideColumnsOnMobile", tableMinWidth: "tableMinWidth", isVirtualScrollButtonVisible: "isVirtualScrollButtonVisible", isVirtualScroll: "isVirtualScroll", virtualScrollRowSize: "virtualScrollRowSize", tableCaption: "tableCaption", captionColorClass: "captionColorClass", isCaptionButtonVisible: "isCaptionButtonVisible", captionButtonLabel: "captionButtonLabel", captionButtonColor: "captionButtonColor", isTableHeaderVisible: "isTableHeaderVisible", emptyColumnWidth: "emptyColumnWidth", toggleTableHeaderName: "toggleTableHeaderName", toggleWidth: "toggleWidth", toggleTwoTableHeaderName: "toggleTwoTableHeaderName", toggleTwoWidth: "toggleTwoWidth", toggleThreeTableHeaderName: "toggleThreeTableHeaderName", toggleThreeWidth: "toggleThreeWidth", toggleFourTableHeaderName: "toggleFourTableHeaderName", toggleFourWidth: "toggleFourWidth", rowColor: "rowColor", formGroup: "formGroup", type: "type", formStatus: "formStatus", tagColor: "tagColor", isWarningTextVisible: "isWarningTextVisible", isButtonOneVisible: "isButtonOneVisible", buttonLabel: "buttonLabel", buttonOneLabel: "buttonOneLabel", buttonOneHasIcon: "buttonOneHasIcon", buttonOneEditIcon: "buttonOneEditIcon", buttonOneSaveIcon: "buttonOneSaveIcon", buttonOneColor: "buttonOneColor", buttonOneIcon: "buttonOneIcon", isPlainTableIconButtonOne: "isPlainTableIconButtonOne", isPlainTableButtonOneLink: "isPlainTableButtonOneLink", isButtonTwoVisible: "isButtonTwoVisible", buttonTwoLabel: "buttonTwoLabel", buttonTwoHasIcon: "buttonTwoHasIcon", buttonTwoDeleteIcon: "buttonTwoDeleteIcon", buttonTwoCancelIcon: "buttonTwoCancelIcon", buttonTwoColor: "buttonTwoColor", buttonTwoIcon: "buttonTwoIcon", isPlainTableIconButtonTwo: "isPlainTableIconButtonTwo", isDeactivateToggle: "isDeactivateToggle", isDeactivateToggleTwo: "isDeactivateToggleTwo", isDeactivateToggleThree: "isDeactivateToggleThree", isDeactivateToggleFour: "isDeactivateToggleFour", showEllipsisFullText: "showEllipsisFullText" }, outputs: { captionButtonClicked: "captionButtonClicked", buttonEditClick: "buttonEditClick", buttonSaveClick: "buttonSaveClick", buttonOneClick: "buttonOneClick", buttonDeleteClick: "buttonDeleteClick", buttonTwoClick: "buttonTwoClick", toggleSwitch: "toggleSwitch", toggleTwoSwitch: "toggleTwoSwitch", toggleThreeSwitch: "toggleThreeSwitch", toggleFourSwitch: "toggleFourSwitch", checkboxOne: "checkboxOne" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<p-table\r\n #dt\r\n [value]=\"tableData\"\r\n [paginator]=\"isPaginatorVisible\"\r\n [rows]=\"tableRowCount\"\r\n [showCurrentPageReport]=\"false\"\r\n [scrollable]=\"scrollable\"\r\n [scrollHeight]=\"scrollHeight\"\r\n dataKey=\"id\"\r\n editMode=\"row\"\r\n [ngClass]=\"captionColorClass\"\r\n [loading]=\"isTableLoading\"\r\n [tableStyle]=\"{'min-width': tableMinWidth}\"\r\n [virtualScroll]=\"isVirtualScroll\"\r\n [virtualScrollItemSize]=\"virtualScrollRowSize\"\r\n aria-live=\"polite\"\r\n>\r\n <ng-template pTemplate=\"caption\" *ngIf=\"!!tableCaption\">\r\n <div class=\"flex align-items-center justify-content-between\">\r\n {{ tableCaption }}\r\n <span *ngIf=\"isVirtualScrollButtonVisible\"\r\n (click)=\"isVirtualScroll = !isVirtualScroll\"\r\n [ngStyle]=\"{'color': isVirtualScroll ? '' : 'lightgray'}\"\r\n class=\"pi pi-sort cursor-pointer\">\r\n </span>\r\n <lib-button\r\n *ngIf=\"isCaptionButtonVisible\"\r\n [label]=\"captionButtonLabel\"\r\n [color]=\"captionButtonColor\"\r\n (clickEvent)=\"clickCaptionButton($event)\"\r\n ></lib-button>\r\n </div>\r\n </ng-template>\r\n <ng-template pTemplate=\"header\" *ngIf=\"isTableHeaderVisible\">\r\n <tr>\r\n <ng-container *ngFor=\"let column of tableColumns\">\r\n <ng-container *ngIf=\"!(column.hideOnMobile && isMobile() && hideColumnsOnMobile)\">\r\n <th scope=\"col\" [style.width]=\"column.width\">\r\n {{ column.header | translate }}\r\n </th>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <th *ngFor=\"let _ of emptyHeaderColumnList\" [style.width]=\"emptyColumnWidth\" aria-hidden=\"true\"></th>\r\n <th *ngIf=\"!!toggleTableHeaderName\" scope=\"col\" [style.width]=\"toggleWidth\" class=\"vertical-align-middle\">\r\n {{ toggleTableHeaderName }}\r\n </th>\r\n <th *ngIf=\"!!toggleTwoTableHeaderName\" scope=\"col\" [style.width]=\"toggleTwoWidth\" class=\"vertical-align-middle\">\r\n {{ toggleTwoTableHeaderName }}\r\n </th>\r\n <th *ngIf=\"!!toggleThreeTableHeaderName\" scope=\"col\" [style.width]=\"toggleThreeWidth\" class=\"vertical-align-middle\">\r\n {{ toggleThreeTableHeaderName }}\r\n </th>\r\n <th *ngIf=\"!!toggleFourTableHeaderName\" scope=\"col\" [style.width]=\"toggleFourWidth\" class=\"vertical-align-middle\">\r\n {{ toggleFourTableHeaderName }}\r\n </th>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"body\" let-rowData let-editing=\"editing\" let-ri=\"rowIndex\">\r\n <!--\r\n Mare; 2024-09-19: dodajanje logike barvanja rowColor za /cms/notifications, delat mora pa tudi v /vsi-termini\r\n -->\r\n <tr [pEditableRow]=\"rowData\" #htmlTableRowElement\r\n [ngClass]=\"\r\n rowData?.cmsStatus ?\r\n (rowData?.cmsStatus === 'expired' ? 'disabled_row_color' :\r\n rowData?.cmsStatus === 'planned' ? '' :\r\n rowData?.cmsStatus === 'active' ? 'success_row_color' : '') :\r\n (!rowData?.registered ? rowColor : '')\r\n \">\r\n <ng-container *ngFor=\"let column of tableColumns; let colIndex = index\">\r\n <ng-container *ngIf=\"!(column.hideOnMobile && isMobile() && hideColumnsOnMobile)\">\r\n <td [class.disabled-row]=\"rowData?.isEnabled === false || rowData?.isEnabled === null\">\r\n <!-- Text input-->\r\n <ng-container *ngIf=\"column.editable && column.component === 'input'\">\r\n <p-cellEditor>\r\n <ng-template pTemplate=\"input\">\r\n <lib-input\r\n [group]=\"formGroup\"\r\n [controlName]=\"column.field\"\r\n [name]=\"column.field\"\r\n [type]=\"column.inputType ? column.inputType : type\"\r\n placeholder=\"{{ column.placeholder! |translate }}\"\r\n [isRequired]=\"false\"\r\n [formStatus]=\"formStatus\"\r\n [hasGap]=\"false\"\r\n ></lib-input>\r\n </ng-template>\r\n <ng-template pTemplate=\"output\">\r\n <ng-container *ngIf=\"rowData[column.field]; else emptyCell\">\r\n <ng-container *ngIf=\"column.isLink; else notLink\">\r\n <a href=\"{{ rowData[column.field] }}\" target=\"_blank\">\r\n {{ rowData[column.field] }}\r\n </a>\r\n </ng-container>\r\n <ng-template #notLink>\r\n {{ rowData[column.field] }} {{ column?.suffix }}\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-template #emptyCell>\r\n /\r\n </ng-template>\r\n </ng-template>\r\n </p-cellEditor>\r\n </ng-container>\r\n\r\n <!-- Date input-->\r\n <ng-container *ngIf=\"column.editable && column.component === 'date'\">\r\n <p-cellEditor>\r\n <ng-template pTemplate=\"input\">\r\n <lib-date-input\r\n appendTo=\"body\"\r\n [group]=\"formGroup\"\r\n [controlName]=\"column.field\"\r\n [name]=\"column.field\"\r\n [setMinAndMax]=\"false\"\r\n [isRequired]=\"false\"\r\n [formStatus]=\"formStatus\"\r\n [hasGap]=\"false\"\r\n placeholder=\"{{ column.placeholder! | translate }}\"\r\n ></lib-date-input>\r\n </ng-template>\r\n <ng-template pTemplate=\"output\">\r\n <ng-container *ngIf=\"rowData[column.field]; else emptyCell\">\r\n {{ rowData[column.field] | date: 'dd.MM.yyyy' }} {{ column?.suffix }}\r\n </ng-container>\r\n <ng-template #emptyCell>\r\n /\r\n </ng-template>\r\n </ng-template>\r\n </p-cellEditor>\r\n </ng-container>\r\n\r\n <!-- Date+Time output-->\r\n <ng-container *ngIf=\"column.editable && column.component === 'dateTime'\">\r\n <p-cellEditor>\r\n <ng-template pTemplate=\"output\">\r\n <ng-container *ngIf=\"rowData[column.field]; else emptyCell\">\r\n {{ rowData[column.field] | date: 'dd.MM.yyyy, HH:mm' }} {{ column?.suffix }}\r\n </ng-container>\r\n <ng-template #emptyCell>\r\n /\r\n </ng-template>\r\n </ng-template>\r\n </p-cellEditor>\r\n </ng-container>\r\n\r\n <!-- TextArea input-->\r\n <ng-container *ngIf=\"column.editable && column.component === 'textarea'\">\r\n <p-cellEditor>\r\n <ng-template pTemplate=\"input\">\r\n <lib-textarea *ngIf=\"column.maxLength === -1\"\r\n [customMaxLength]=\"null\"\r\n [group]=\"formGroup\"\r\n [controlName]=\"column.field\"\r\n [name]=\"column.field\"\r\n [isRequired]=\"false\"\r\n [formStatus]=\"formStatus\"\r\n [hasGap]=\"false\"\r\n placeholder=\"{{ column.placeholder! |translate }}\"\r\n ></lib-textarea>\r\n <lib-textarea *ngIf=\"column.maxLength !== -1\"\r\n [group]=\"formGroup\"\r\n [controlName]=\"column.field\"\r\n [name]=\"column.field\"\r\n [isRequired]=\"false\"\r\n [formStatus]=\"formStatus\"\r\n [hasGap]=\"false\"\r\n placeholder=\"{{ column.placeholder! |translate }}\"\r\n ></lib-textarea>\r\n </ng-template>\r\n <ng-template pTemplate=\"output\">\r\n <ng-container *ngIf=\"rowData[column.field]; else emptyCell\">\r\n <lib-tooltip\r\n [htmlParser]=\"true\"\r\n [text]=\"rowData[column.field]\"\r\n ></lib-tooltip>\r\n </ng-container>\r\n\r\n <ng-template #emptyCell>\r\n /\r\n </ng-template>\r\n </ng-template>\r\n </p-cellEditor>\r\n </ng-container>\r\n\r\n <!-- Dropdown input-->\r\n <ng-container *ngIf=\"column.editable && column.component === 'dropdown'\">\r\n <p-cellEditor>\r\n <ng-template pTemplate=\"input\">\r\n <lib-dropdown\r\n label=\"Moje naloge\"\r\n placeholder=\"Izberite\"\r\n optionLabel=\"name\"\r\n [showClear]=\"true\"\r\n [formStatus]=\"formStatus\"\r\n\r\n [group]=\"formGroup\"\r\n [controlName]=\"column.field\"\r\n [name]=\"column.field\"\r\n\r\n filterBy=\"name\"\r\n [isLoading]=\"false\"\r\n [optionList]=\"overviewList\"\r\n [filter]=\"true\"\r\n [isRequired]=\"false\"\r\n ></lib-dropdown>\r\n </ng-template>\r\n <ng-template pTemplate=\"output\">\r\n <ng-container *ngIf=\"rowData[column.field]; else emptyCell\">\r\n <lib-tooltip\r\n [htmlParser]=\"true\"\r\n [text]=\"rowData[column.field]\"\r\n ></lib-tooltip>\r\n </ng-container>\r\n\r\n <ng-template #emptyCell>\r\n /\r\n </ng-template>\r\n </ng-template>\r\n </p-cellEditor>\r\n </ng-container>\r\n\r\n <!-- Switch input-->\r\n <ng-container *ngIf=\"column.editable && column.component === 'switch'\">\r\n <p-cellEditor>\r\n <ng-template pTemplate=\"input\">\r\n <lib-toggle-switch\r\n [group]=\"formGroup\"\r\n [controlName]=\"column.field\"\r\n [checked]=\"rowData[column.field]\"\r\n ></lib-toggle-switch>\r\n </ng-template>\r\n <ng-template pTemplate=\"output\">\r\n <ng-container *ngIf=\"rowData[column.field]; else emptyCell\">\r\n {{ 'components.customTable.yes' | translate }}\r\n </ng-container>\r\n\r\n <ng-template #emptyCell>\r\n {{ 'components.customTable.no' | translate }}\r\n </ng-template>\r\n </ng-template>\r\n </p-cellEditor>\r\n </ng-container>\r\n\r\n <!-- Mare; dodal custom checkbox za izbiro vrstice -->\r\n <!-- [controlName] je oblike rowChecked_2024-04-11T11:35:00_c3cff776-dc06-40ec-bab5-7cab26e2014a -->\r\n <!-- column.field = rowChecked -->\r\n <!-- rowData[column?.control!] = 2024-04-11T11:35:00 (startDate) -->\r\n <!-- rowData[column?.control2!] = c3cff776-dc06-40ec-bab5-7cab26e2014a (uuid) -->\r\n <ng-container *ngIf=\"column.editable && column.component === 'checkbox'\">\r\n <lib-checkbox class=\"\"\r\n [group]=\"formGroup\"\r\n [controlName]=\"column.field + '_' + rowData[column?.control!] + '_' + rowData[column?.control2!]\"\r\n (clickCheckboxEvent)=\"clickCheckboxOne($event, rowData[column?.control!] + '_' + rowData[column?.control2!])\"\r\n label=\"\">\r\n </lib-checkbox>\r\n </ng-container>\r\n\r\n <!-- Plain table-->\r\n <ng-container *ngIf=\"!column.editable\">\r\n <ng-container *ngIf=\"column.tooltip || column.tag || column.status || column.ellipsis; else valueCell\">\r\n <!-- Tooltip -->\r\n <ng-container *ngIf=\"column.tooltip\">\r\n <ng-container *ngIf=\"getNestedValue(rowData, column.field)\">\r\n <lib-tooltip [htmlParser]=\"true\" [text]=\"getNestedValue(rowData, column.field)\"></lib-tooltip>\r\n </ng-container>\r\n <ng-container *ngIf=\"!getNestedValue(rowData, column.field)\">\r\n /\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- Ellipsis -->\r\n <ng-container *ngIf=\"column.ellipsis\">\r\n <ng-container *ngIf=\"getNestedValue(rowData, column.field)\">\r\n <span>\r\n {{ getNestedValue(rowData, column.field) }}\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"!getNestedValue(rowData, column.field)\">\r\n /\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- Tag -->\r\n <ng-container *ngIf=\"column.tag && getNestedValue(rowData, column.field)\">\r\n <lib-tag [tagText]=\"getNestedValue(rowData, column.field)\" [tagColor]=\"rowData.tagColor\" [rounded]=\"true\"></lib-tag>\r\n </ng-container>\r\n\r\n <!-- Status -->\r\n <ng-container *ngIf=\"column.status\">\r\n <ng-container *ngIf=\"getNestedValue(rowData, column.field)\">\r\n <div style=\"background-color: #66952E; height: 25px; width: 75px;\"></div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!getNestedValue(rowData, column.field)\">\r\n <div style=\"background-color: #f44336; height: 25px; width: 75px;\"></div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #valueCell>\r\n <ng-container *ngIf=\"getNestedValue(rowData, column.field); else emptyCell\">\r\n <!-- Mare; dodal izjemo za 'cmsStatus' -->\r\n <ng-container *ngIf=\"column.field === 'cmsStatus'; else defaultContent\">\r\n {{ 'pages.cms.cmsStatus.' + getNestedValue(rowData, column.field) | translate }}\r\n </ng-container>\r\n <!-- Privzeta vsebina za vse ostale stolpce -->\r\n <ng-template #defaultContent>\r\n {{ column.suffix ? getNestedValue(rowData, column.field) + ' ' + column.suffix : getNestedValue(rowData, column.field) }}\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #emptyCell>\r\n /\r\n </ng-template>\r\n </ng-template>\r\n </ng-container>\r\n\r\n <p class=\"text-red-500 custom-small-text\" *ngIf=\"colIndex === 0 && rowData?.administrativeProcedure?.localJurisdiction && isWarningTextVisible\">\r\n <br/> {{ 'components.customTable.notification' | translate }}\r\n </p>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- Button column one -->\r\n <td *ngIf=\"isButtonOneVisible\" [class.disabled-row]=\"rowData?.isEnabled === false || rowData?.isEnabled === null\">\r\n <!-- Editing table-->\r\n <ng-container *ngIf=\"isEditingTable; else plainTable\">\r\n <lib-icon-button\r\n *ngIf=\"!editing\"\r\n pInitEditableRow\r\n [color]=\"buttonOneColor\"\r\n [icon]=\"buttonOneEditIcon\"\r\n (click)='onRowEdit(rowData)'\r\n ></lib-icon-button>\r\n <lib-icon-button\r\n *ngIf=\"editing\"\r\n [color]=\"buttonOneColor!\"\r\n [icon]=\"buttonOneSaveIcon\"\r\n (click)='onRowSave(rowData, htmlTableRowElement)'\r\n ></lib-icon-button>\r\n </ng-container>\r\n\r\n <!-- Plain table-->\r\n <ng-template #plainTable>\r\n <ng-container\r\n *ngIf=\"(rowData?.administrativeProcedure === undefined || rowData?.administrativeProcedure?.detailsUrl !== null) && !isPlainTableIconButtonOne\"\r\n >\r\n <lib-button\r\n *ngIf=\"!isPlainTableButtonOneLink\"\r\n [label]=\"rowData?.buttonText ? rowData.buttonText : buttonOneLabel!\"\r\n [hasIcon]=\"buttonOneHasIcon!\"\r\n [color]=\"rowData?.buttonColor ? rowData.buttonColor : buttonOneColor!\"\r\n [icon]=\"buttonOneIcon!\"\r\n (click)='clickButtonOne(rowData)'\r\n ></lib-button>\r\n <lib-button-link\r\n *ngIf=\"isPlainTableButtonOneLink\"\r\n [label]=\"rowData?.buttonText ? rowData.buttonText : buttonOneLabel!\"\r\n [isPrimary]=\"true\"\r\n [hasIcon]=\"buttonOneHasIcon!\"\r\n [icon]=\"buttonOneIcon! + ' md:ml-2'\"\r\n (click)='clickButtonOne(rowData)'\r\n ></lib-button-link>\r\n </ng-container>\r\n <lib-icon-button\r\n *ngIf=\"isPlainTableIconButtonOne\"\r\n [color]=\"buttonOneColor!\"\r\n [icon]=\"buttonOneSaveIcon\"\r\n (click)='clickButtonOne(rowData)'\r\n ></lib-icon-button>\r\n </ng-template>\r\n </td>\r\n\r\n <!-- Button column two -->\r\n <td *ngIf=\"isButtonTwoVisible\" [class.disabled-row]=\"rowData?.isEnabled === false || rowData?.isEnabled === null\">\r\n <!-- Editing table-->\r\n <ng-container *ngIf=\"isEditingTable; else plainTable\">\r\n <lib-icon-button\r\n *ngIf=\"!editing\"\r\n [color]=\"buttonTwoColor\"\r\n [icon]=\"buttonTwoDeleteIcon\"\r\n (click)='onRowDelete(rowData)'\r\n ></lib-icon-button>\r\n <lib-icon-button\r\n *ngIf=\"editing\"\r\n [color]=\"buttonTwoColor\"\r\n [icon]=\"buttonTwoCancelIcon\"\r\n (click)=\"onRowCancel(rowData)\"\r\n ></lib-icon-button>\r\n </ng-container>\r\n\r\n <!-- Plain table-->\r\n <ng-template #plainTable>\r\n <lib-button\r\n *ngIf=\"!isPlainTableIconButtonTwo\"\r\n [label]=\"buttonTwoLabel!\"\r\n [hasIcon]=\"buttonTwoHasIcon!\"\r\n [color]=\"buttonTwoColor!\"\r\n [icon]=\"buttonTwoIcon!\"\r\n (click)='clickButtonTwo(rowData)'\r\n ></lib-button>\r\n <lib-icon-button\r\n *ngIf=\"isPlainTableIconButtonTwo\"\r\n [color]=\"buttonTwoColor!\"\r\n [icon]=\"buttonTwoDeleteIcon\"\r\n (click)='clickButtonTwo(rowData)'\r\n ></lib-icon-button>\r\n </ng-template>\r\n </td>\r\n\r\n <!-- Deactivate toggle -->\r\n <td *ngIf=\"isDeactivateToggle\" [ngStyle]=\"{ 'pointer-events': 'auto' }\">\r\n <lib-toggle-switch\r\n [isFormElement]=\"false\"\r\n [checked]=\"rowData.isEnabled\"\r\n (getValueEvent)=\"toggleEnable({ rowData, $event })\"\r\n ></lib-toggle-switch>\r\n </td>\r\n\r\n <!-- Deactivate toggle two -->\r\n <td *ngIf=\"isDeactivateToggleTwo\" [ngStyle]=\"{ 'pointer-events': 'auto' }\">\r\n <lib-toggle-switch\r\n [disabled]=\"!rowData.isEnabled\"\r\n [isFormElement]=\"false\"\r\n [checked]=\"rowData.isAppointmentEnabled\"\r\n (getValueEvent)=\"toggleTwoEnable({ rowData, $event })\"\r\n ></lib-toggle-switch>\r\n </td>\r\n\r\n <!-- Deactivate toggle three -->\r\n <td *ngIf=\"isDeactivateToggleThree\" [ngStyle]=\"{ 'pointer-events': 'auto' }\">\r\n <lib-toggle-switch\r\n [disabled]=\"!rowData.isEnabled\"\r\n [isFormElement]=\"false\"\r\n [checked]=\"rowData.isNotificationEnabled\"\r\n (getValueEvent)=\"toggleThreeEnable({ rowData, $event })\"\r\n ></lib-toggle-switch>\r\n </td>\r\n\r\n <!-- Deactivate toggle four -->\r\n <td *ngIf=\"isDeactivateToggleFour\" [ngStyle]=\"{ 'pointer-events': 'auto' }\">\r\n <lib-toggle-switch\r\n [disabled]=\"!rowData.isEnabled\"\r\n [isFormElement]=\"false\"\r\n [checked]=\"rowData.isVrstomatEnabled\"\r\n (getValueEvent)=\"toggleFourEnable({ rowData, $event })\"\r\n ></lib-toggle-switch>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n</p-table>\r\n", styles: [":host ::ng-deep .future .p-datatable-header{background:#b2414d}:host ::ng-deep .past .p-datatable-header{background:#6d7375}:host ::ng-deep .p-datatable{border:1px solid #3E7C94;border-radius:8px;overflow:hidden;padding:0}:host ::ng-deep .p-datatable .p-datatable-header{border:none;color:#fff;padding:.5rem 1rem}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th,:host ::ng-deep .p-datatable .p-datatable-thead>tr>td{background:#d9d9d9;border:none;color:#1b495a;font-weight:unset;padding:.5rem 1rem}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th.public-table:first-child,:host ::ng-deep .p-datatable .p-datatable-thead>tr>td.public-table:first-child{width:400px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th.public-table:nth-child(2),:host ::ng-deep .p-datatable .p-datatable-thead>tr>td.public-table:nth-child(2){width:150px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:transparent;height:50px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.success_row_color{background:#66952eb3}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.disabled_row_color{background:#b4b4b4b3}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{border-color:#3e7c94;padding:.5rem 1rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr:first-child>td{border-color:transparent}:host ::ng-deep .p-datatable .table-icon-button{width:50px}:host ::ng-deep .p-paginator{background:transparent}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:#3e7c94;border-color:#3e7c94}@media (max-width: 600px){:host ::ng-deep .p-datatable .p-datatable-header{padding:.5rem}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{padding:.5rem}}.disabled-row{opacity:.5;pointer-events:none}.custom-small-text{font-size:.8rem;line-height:.9}.ellipsis-text{cursor:n-resize}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i1$6.CellEditor, selector: "p-cellEditor" }, { kind: "directive", type: i1$6.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i1$6.InitEditableRow, selector: "[pInitEditableRow]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["hasIcon", "label", "color", "icon", "iconPos", "disabled", "isLoading", "styleClass", "size", "accessibilityText", "buttonType", "isAccessible", "isSelected", "ariaControlsId", "isExpanded", "link", "isTextareaClear"], outputs: ["clickEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: InputComponent, selector: "lib-input[group][controlName][name]", inputs: ["name", "type", "label", "placeholder", "accessibilityText", "group", "controlName", "isRequired", "isLabelVisible", "tooltipPosition", "tooltipText", "formStatus", "groupError", "hasGap", "hasTitle", "maxLength"] }, { kind: "component", type: DateInputComponent, selector: "lib-date-input[group][controlName][name]", inputs: ["isLabelVisible", "name", "label", "placeholder", "accessibilityText", "isRequired", "tooltipPosition", "tooltipText", "dateFormat", "group", "controlName", "showIcon", "selectionMode", "touchUI", "formStatus", "showClear", "isPublicDate", "minDate", "maxDate", "minDateToday", "maxDateSixMonths", "maxDateThreeMonths", "setMinAndMax", "hasGap", "disabledDates", "appendTo", "groupError", "showTime", "availableDates", "disabledDays", "disabledWeekends"], outputs: ["onSelect"] }, { kind: "component", type: TextareaComponent, selector: "lib-textarea[group][controlName][name]", inputs: ["name", "resize", "label", "placeholder", "accessibilityText", "rows", "cols", "tooltipPosition", "tooltipText", "group", "controlName", "isRequired", "formStatus", "hasGap", "customMaxLength"] }, { kind: "component", type: TooltipComponent, selector: " lib-tooltip", inputs: ["icon", "htmlParser", "text", "position", "tooltipEvent", "autoHide", "htmlParse"] }, { kind: "component", type: DropdownComponent, selector: "lib-dropdown[group][controlName][name]", inputs: ["name", "isMultiselect", "selectedItemLabel", "group", "controlName", "label", "optionList", "optionLabel", "optionalValue", "placeholder", "accessibilityText", "filter", "filterBy", "showClear", "isRequired", "tooltipPosition", "tooltipText", "formStatus", "nestedGroup", "isLoading", "appendTo", "isLabelVisible", "emptyMessage", "virtualScroll", "ariaFilterLabel", "optionValue"], outputs: ["getValueEvent"] }, { kind: "component", type: ToggleSwitchComponent, selector: "lib-toggle-switch", inputs: ["group", "controlName", "isFormElement", "checked", "disabled"], outputs: ["getValueEvent", "checkedChanged"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox[group][controlName][label]", inputs: ["label", "group", "controlName", "value", "formStatus", "ariaLabel"], outputs: ["clickCheckboxEvent"] }, { kind: "component", type: TagComponent, selector: "lib-tag", inputs: ["tagText", "tagColor", "rounded"] }, { kind: "component", type: IconButtonComponent, selector: "lib-icon-button", inputs: ["icon", "disabled", "color", "styleClass", "size"], outputs: ["clickEvent"] }, { kind: "component", type: ButtonLinkComponent, selector: "lib-button-link", inputs: ["hasIcon", "label", "isDanger", "isPrimary", "icon", "target", "accessibilityText"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "date" }] });
|
|
1892
|
+
}
|
|
1893
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CustomTableComponent, decorators: [{
|
|
1894
|
+
type: Component,
|
|
1895
|
+
args: [{ selector: 'lib-custom-table[tableData][tableColumns]', imports: [
|
|
1896
|
+
TableModule,
|
|
1897
|
+
NgClass,
|
|
1898
|
+
NgIf,
|
|
1899
|
+
PrimeTemplate,
|
|
1900
|
+
NgStyle,
|
|
1901
|
+
ButtonComponent,
|
|
1902
|
+
NgFor,
|
|
1903
|
+
InputComponent,
|
|
1904
|
+
DateInputComponent,
|
|
1905
|
+
TextareaComponent,
|
|
1906
|
+
TooltipComponent,
|
|
1907
|
+
DropdownComponent,
|
|
1908
|
+
ToggleSwitchComponent,
|
|
1909
|
+
CheckboxComponent,
|
|
1910
|
+
TagComponent,
|
|
1911
|
+
IconButtonComponent,
|
|
1912
|
+
ButtonLinkComponent,
|
|
1913
|
+
TranslateModule,
|
|
1914
|
+
DatePipe,
|
|
1915
|
+
], template: "<p-table\r\n #dt\r\n [value]=\"tableData\"\r\n [paginator]=\"isPaginatorVisible\"\r\n [rows]=\"tableRowCount\"\r\n [showCurrentPageReport]=\"false\"\r\n [scrollable]=\"scrollable\"\r\n [scrollHeight]=\"scrollHeight\"\r\n dataKey=\"id\"\r\n editMode=\"row\"\r\n [ngClass]=\"captionColorClass\"\r\n [loading]=\"isTableLoading\"\r\n [tableStyle]=\"{'min-width': tableMinWidth}\"\r\n [virtualScroll]=\"isVirtualScroll\"\r\n [virtualScrollItemSize]=\"virtualScrollRowSize\"\r\n aria-live=\"polite\"\r\n>\r\n <ng-template pTemplate=\"caption\" *ngIf=\"!!tableCaption\">\r\n <div class=\"flex align-items-center justify-content-between\">\r\n {{ tableCaption }}\r\n <span *ngIf=\"isVirtualScrollButtonVisible\"\r\n (click)=\"isVirtualScroll = !isVirtualScroll\"\r\n [ngStyle]=\"{'color': isVirtualScroll ? '' : 'lightgray'}\"\r\n class=\"pi pi-sort cursor-pointer\">\r\n </span>\r\n <lib-button\r\n *ngIf=\"isCaptionButtonVisible\"\r\n [label]=\"captionButtonLabel\"\r\n [color]=\"captionButtonColor\"\r\n (clickEvent)=\"clickCaptionButton($event)\"\r\n ></lib-button>\r\n </div>\r\n </ng-template>\r\n <ng-template pTemplate=\"header\" *ngIf=\"isTableHeaderVisible\">\r\n <tr>\r\n <ng-container *ngFor=\"let column of tableColumns\">\r\n <ng-container *ngIf=\"!(column.hideOnMobile && isMobile() && hideColumnsOnMobile)\">\r\n <th scope=\"col\" [style.width]=\"column.width\">\r\n {{ column.header | translate }}\r\n </th>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <th *ngFor=\"let _ of emptyHeaderColumnList\" [style.width]=\"emptyColumnWidth\" aria-hidden=\"true\"></th>\r\n <th *ngIf=\"!!toggleTableHeaderName\" scope=\"col\" [style.width]=\"toggleWidth\" class=\"vertical-align-middle\">\r\n {{ toggleTableHeaderName }}\r\n </th>\r\n <th *ngIf=\"!!toggleTwoTableHeaderName\" scope=\"col\" [style.width]=\"toggleTwoWidth\" class=\"vertical-align-middle\">\r\n {{ toggleTwoTableHeaderName }}\r\n </th>\r\n <th *ngIf=\"!!toggleThreeTableHeaderName\" scope=\"col\" [style.width]=\"toggleThreeWidth\" class=\"vertical-align-middle\">\r\n {{ toggleThreeTableHeaderName }}\r\n </th>\r\n <th *ngIf=\"!!toggleFourTableHeaderName\" scope=\"col\" [style.width]=\"toggleFourWidth\" class=\"vertical-align-middle\">\r\n {{ toggleFourTableHeaderName }}\r\n </th>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"body\" let-rowData let-editing=\"editing\" let-ri=\"rowIndex\">\r\n <!--\r\n Mare; 2024-09-19: dodajanje logike barvanja rowColor za /cms/notifications, delat mora pa tudi v /vsi-termini\r\n -->\r\n <tr [pEditableRow]=\"rowData\" #htmlTableRowElement\r\n [ngClass]=\"\r\n rowData?.cmsStatus ?\r\n (rowData?.cmsStatus === 'expired' ? 'disabled_row_color' :\r\n rowData?.cmsStatus === 'planned' ? '' :\r\n rowData?.cmsStatus === 'active' ? 'success_row_color' : '') :\r\n (!rowData?.registered ? rowColor : '')\r\n \">\r\n <ng-container *ngFor=\"let column of tableColumns; let colIndex = index\">\r\n <ng-container *ngIf=\"!(column.hideOnMobile && isMobile() && hideColumnsOnMobile)\">\r\n <td [class.disabled-row]=\"rowData?.isEnabled === false || rowData?.isEnabled === null\">\r\n <!-- Text input-->\r\n <ng-container *ngIf=\"column.editable && column.component === 'input'\">\r\n <p-cellEditor>\r\n <ng-template pTemplate=\"input\">\r\n <lib-input\r\n [group]=\"formGroup\"\r\n [controlName]=\"column.field\"\r\n [name]=\"column.field\"\r\n [type]=\"column.inputType ? column.inputType : type\"\r\n placeholder=\"{{ column.placeholder! |translate }}\"\r\n [isRequired]=\"false\"\r\n [formStatus]=\"formStatus\"\r\n [hasGap]=\"false\"\r\n ></lib-input>\r\n </ng-template>\r\n <ng-template pTemplate=\"output\">\r\n <ng-container *ngIf=\"rowData[column.field]; else emptyCell\">\r\n <ng-container *ngIf=\"column.isLink; else notLink\">\r\n <a href=\"{{ rowData[column.field] }}\" target=\"_blank\">\r\n {{ rowData[column.field] }}\r\n </a>\r\n </ng-container>\r\n <ng-template #notLink>\r\n {{ rowData[column.field] }} {{ column?.suffix }}\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-template #emptyCell>\r\n /\r\n </ng-template>\r\n </ng-template>\r\n </p-cellEditor>\r\n </ng-container>\r\n\r\n <!-- Date input-->\r\n <ng-container *ngIf=\"column.editable && column.component === 'date'\">\r\n <p-cellEditor>\r\n <ng-template pTemplate=\"input\">\r\n <lib-date-input\r\n appendTo=\"body\"\r\n [group]=\"formGroup\"\r\n [controlName]=\"column.field\"\r\n [name]=\"column.field\"\r\n [setMinAndMax]=\"false\"\r\n [isRequired]=\"false\"\r\n [formStatus]=\"formStatus\"\r\n [hasGap]=\"false\"\r\n placeholder=\"{{ column.placeholder! | translate }}\"\r\n ></lib-date-input>\r\n </ng-template>\r\n <ng-template pTemplate=\"output\">\r\n <ng-container *ngIf=\"rowData[column.field]; else emptyCell\">\r\n {{ rowData[column.field] | date: 'dd.MM.yyyy' }} {{ column?.suffix }}\r\n </ng-container>\r\n <ng-template #emptyCell>\r\n /\r\n </ng-template>\r\n </ng-template>\r\n </p-cellEditor>\r\n </ng-container>\r\n\r\n <!-- Date+Time output-->\r\n <ng-container *ngIf=\"column.editable && column.component === 'dateTime'\">\r\n <p-cellEditor>\r\n <ng-template pTemplate=\"output\">\r\n <ng-container *ngIf=\"rowData[column.field]; else emptyCell\">\r\n {{ rowData[column.field] | date: 'dd.MM.yyyy, HH:mm' }} {{ column?.suffix }}\r\n </ng-container>\r\n <ng-template #emptyCell>\r\n /\r\n </ng-template>\r\n </ng-template>\r\n </p-cellEditor>\r\n </ng-container>\r\n\r\n <!-- TextArea input-->\r\n <ng-container *ngIf=\"column.editable && column.component === 'textarea'\">\r\n <p-cellEditor>\r\n <ng-template pTemplate=\"input\">\r\n <lib-textarea *ngIf=\"column.maxLength === -1\"\r\n [customMaxLength]=\"null\"\r\n [group]=\"formGroup\"\r\n [controlName]=\"column.field\"\r\n [name]=\"column.field\"\r\n [isRequired]=\"false\"\r\n [formStatus]=\"formStatus\"\r\n [hasGap]=\"false\"\r\n placeholder=\"{{ column.placeholder! |translate }}\"\r\n ></lib-textarea>\r\n <lib-textarea *ngIf=\"column.maxLength !== -1\"\r\n [group]=\"formGroup\"\r\n [controlName]=\"column.field\"\r\n [name]=\"column.field\"\r\n [isRequired]=\"false\"\r\n [formStatus]=\"formStatus\"\r\n [hasGap]=\"false\"\r\n placeholder=\"{{ column.placeholder! |translate }}\"\r\n ></lib-textarea>\r\n </ng-template>\r\n <ng-template pTemplate=\"output\">\r\n <ng-container *ngIf=\"rowData[column.field]; else emptyCell\">\r\n <lib-tooltip\r\n [htmlParser]=\"true\"\r\n [text]=\"rowData[column.field]\"\r\n ></lib-tooltip>\r\n </ng-container>\r\n\r\n <ng-template #emptyCell>\r\n /\r\n </ng-template>\r\n </ng-template>\r\n </p-cellEditor>\r\n </ng-container>\r\n\r\n <!-- Dropdown input-->\r\n <ng-container *ngIf=\"column.editable && column.component === 'dropdown'\">\r\n <p-cellEditor>\r\n <ng-template pTemplate=\"input\">\r\n <lib-dropdown\r\n label=\"Moje naloge\"\r\n placeholder=\"Izberite\"\r\n optionLabel=\"name\"\r\n [showClear]=\"true\"\r\n [formStatus]=\"formStatus\"\r\n\r\n [group]=\"formGroup\"\r\n [controlName]=\"column.field\"\r\n [name]=\"column.field\"\r\n\r\n filterBy=\"name\"\r\n [isLoading]=\"false\"\r\n [optionList]=\"overviewList\"\r\n [filter]=\"true\"\r\n [isRequired]=\"false\"\r\n ></lib-dropdown>\r\n </ng-template>\r\n <ng-template pTemplate=\"output\">\r\n <ng-container *ngIf=\"rowData[column.field]; else emptyCell\">\r\n <lib-tooltip\r\n [htmlParser]=\"true\"\r\n [text]=\"rowData[column.field]\"\r\n ></lib-tooltip>\r\n </ng-container>\r\n\r\n <ng-template #emptyCell>\r\n /\r\n </ng-template>\r\n </ng-template>\r\n </p-cellEditor>\r\n </ng-container>\r\n\r\n <!-- Switch input-->\r\n <ng-container *ngIf=\"column.editable && column.component === 'switch'\">\r\n <p-cellEditor>\r\n <ng-template pTemplate=\"input\">\r\n <lib-toggle-switch\r\n [group]=\"formGroup\"\r\n [controlName]=\"column.field\"\r\n [checked]=\"rowData[column.field]\"\r\n ></lib-toggle-switch>\r\n </ng-template>\r\n <ng-template pTemplate=\"output\">\r\n <ng-container *ngIf=\"rowData[column.field]; else emptyCell\">\r\n {{ 'components.customTable.yes' | translate }}\r\n </ng-container>\r\n\r\n <ng-template #emptyCell>\r\n {{ 'components.customTable.no' | translate }}\r\n </ng-template>\r\n </ng-template>\r\n </p-cellEditor>\r\n </ng-container>\r\n\r\n <!-- Mare; dodal custom checkbox za izbiro vrstice -->\r\n <!-- [controlName] je oblike rowChecked_2024-04-11T11:35:00_c3cff776-dc06-40ec-bab5-7cab26e2014a -->\r\n <!-- column.field = rowChecked -->\r\n <!-- rowData[column?.control!] = 2024-04-11T11:35:00 (startDate) -->\r\n <!-- rowData[column?.control2!] = c3cff776-dc06-40ec-bab5-7cab26e2014a (uuid) -->\r\n <ng-container *ngIf=\"column.editable && column.component === 'checkbox'\">\r\n <lib-checkbox class=\"\"\r\n [group]=\"formGroup\"\r\n [controlName]=\"column.field + '_' + rowData[column?.control!] + '_' + rowData[column?.control2!]\"\r\n (clickCheckboxEvent)=\"clickCheckboxOne($event, rowData[column?.control!] + '_' + rowData[column?.control2!])\"\r\n label=\"\">\r\n </lib-checkbox>\r\n </ng-container>\r\n\r\n <!-- Plain table-->\r\n <ng-container *ngIf=\"!column.editable\">\r\n <ng-container *ngIf=\"column.tooltip || column.tag || column.status || column.ellipsis; else valueCell\">\r\n <!-- Tooltip -->\r\n <ng-container *ngIf=\"column.tooltip\">\r\n <ng-container *ngIf=\"getNestedValue(rowData, column.field)\">\r\n <lib-tooltip [htmlParser]=\"true\" [text]=\"getNestedValue(rowData, column.field)\"></lib-tooltip>\r\n </ng-container>\r\n <ng-container *ngIf=\"!getNestedValue(rowData, column.field)\">\r\n /\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- Ellipsis -->\r\n <ng-container *ngIf=\"column.ellipsis\">\r\n <ng-container *ngIf=\"getNestedValue(rowData, column.field)\">\r\n <span>\r\n {{ getNestedValue(rowData, column.field) }}\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"!getNestedValue(rowData, column.field)\">\r\n /\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- Tag -->\r\n <ng-container *ngIf=\"column.tag && getNestedValue(rowData, column.field)\">\r\n <lib-tag [tagText]=\"getNestedValue(rowData, column.field)\" [tagColor]=\"rowData.tagColor\" [rounded]=\"true\"></lib-tag>\r\n </ng-container>\r\n\r\n <!-- Status -->\r\n <ng-container *ngIf=\"column.status\">\r\n <ng-container *ngIf=\"getNestedValue(rowData, column.field)\">\r\n <div style=\"background-color: #66952E; height: 25px; width: 75px;\"></div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!getNestedValue(rowData, column.field)\">\r\n <div style=\"background-color: #f44336; height: 25px; width: 75px;\"></div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #valueCell>\r\n <ng-container *ngIf=\"getNestedValue(rowData, column.field); else emptyCell\">\r\n <!-- Mare; dodal izjemo za 'cmsStatus' -->\r\n <ng-container *ngIf=\"column.field === 'cmsStatus'; else defaultContent\">\r\n {{ 'pages.cms.cmsStatus.' + getNestedValue(rowData, column.field) | translate }}\r\n </ng-container>\r\n <!-- Privzeta vsebina za vse ostale stolpce -->\r\n <ng-template #defaultContent>\r\n {{ column.suffix ? getNestedValue(rowData, column.field) + ' ' + column.suffix : getNestedValue(rowData, column.field) }}\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #emptyCell>\r\n /\r\n </ng-template>\r\n </ng-template>\r\n </ng-container>\r\n\r\n <p class=\"text-red-500 custom-small-text\" *ngIf=\"colIndex === 0 && rowData?.administrativeProcedure?.localJurisdiction && isWarningTextVisible\">\r\n <br/> {{ 'components.customTable.notification' | translate }}\r\n </p>\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- Button column one -->\r\n <td *ngIf=\"isButtonOneVisible\" [class.disabled-row]=\"rowData?.isEnabled === false || rowData?.isEnabled === null\">\r\n <!-- Editing table-->\r\n <ng-container *ngIf=\"isEditingTable; else plainTable\">\r\n <lib-icon-button\r\n *ngIf=\"!editing\"\r\n pInitEditableRow\r\n [color]=\"buttonOneColor\"\r\n [icon]=\"buttonOneEditIcon\"\r\n (click)='onRowEdit(rowData)'\r\n ></lib-icon-button>\r\n <lib-icon-button\r\n *ngIf=\"editing\"\r\n [color]=\"buttonOneColor!\"\r\n [icon]=\"buttonOneSaveIcon\"\r\n (click)='onRowSave(rowData, htmlTableRowElement)'\r\n ></lib-icon-button>\r\n </ng-container>\r\n\r\n <!-- Plain table-->\r\n <ng-template #plainTable>\r\n <ng-container\r\n *ngIf=\"(rowData?.administrativeProcedure === undefined || rowData?.administrativeProcedure?.detailsUrl !== null) && !isPlainTableIconButtonOne\"\r\n >\r\n <lib-button\r\n *ngIf=\"!isPlainTableButtonOneLink\"\r\n [label]=\"rowData?.buttonText ? rowData.buttonText : buttonOneLabel!\"\r\n [hasIcon]=\"buttonOneHasIcon!\"\r\n [color]=\"rowData?.buttonColor ? rowData.buttonColor : buttonOneColor!\"\r\n [icon]=\"buttonOneIcon!\"\r\n (click)='clickButtonOne(rowData)'\r\n ></lib-button>\r\n <lib-button-link\r\n *ngIf=\"isPlainTableButtonOneLink\"\r\n [label]=\"rowData?.buttonText ? rowData.buttonText : buttonOneLabel!\"\r\n [isPrimary]=\"true\"\r\n [hasIcon]=\"buttonOneHasIcon!\"\r\n [icon]=\"buttonOneIcon! + ' md:ml-2'\"\r\n (click)='clickButtonOne(rowData)'\r\n ></lib-button-link>\r\n </ng-container>\r\n <lib-icon-button\r\n *ngIf=\"isPlainTableIconButtonOne\"\r\n [color]=\"buttonOneColor!\"\r\n [icon]=\"buttonOneSaveIcon\"\r\n (click)='clickButtonOne(rowData)'\r\n ></lib-icon-button>\r\n </ng-template>\r\n </td>\r\n\r\n <!-- Button column two -->\r\n <td *ngIf=\"isButtonTwoVisible\" [class.disabled-row]=\"rowData?.isEnabled === false || rowData?.isEnabled === null\">\r\n <!-- Editing table-->\r\n <ng-container *ngIf=\"isEditingTable; else plainTable\">\r\n <lib-icon-button\r\n *ngIf=\"!editing\"\r\n [color]=\"buttonTwoColor\"\r\n [icon]=\"buttonTwoDeleteIcon\"\r\n (click)='onRowDelete(rowData)'\r\n ></lib-icon-button>\r\n <lib-icon-button\r\n *ngIf=\"editing\"\r\n [color]=\"buttonTwoColor\"\r\n [icon]=\"buttonTwoCancelIcon\"\r\n (click)=\"onRowCancel(rowData)\"\r\n ></lib-icon-button>\r\n </ng-container>\r\n\r\n <!-- Plain table-->\r\n <ng-template #plainTable>\r\n <lib-button\r\n *ngIf=\"!isPlainTableIconButtonTwo\"\r\n [label]=\"buttonTwoLabel!\"\r\n [hasIcon]=\"buttonTwoHasIcon!\"\r\n [color]=\"buttonTwoColor!\"\r\n [icon]=\"buttonTwoIcon!\"\r\n (click)='clickButtonTwo(rowData)'\r\n ></lib-button>\r\n <lib-icon-button\r\n *ngIf=\"isPlainTableIconButtonTwo\"\r\n [color]=\"buttonTwoColor!\"\r\n [icon]=\"buttonTwoDeleteIcon\"\r\n (click)='clickButtonTwo(rowData)'\r\n ></lib-icon-button>\r\n </ng-template>\r\n </td>\r\n\r\n <!-- Deactivate toggle -->\r\n <td *ngIf=\"isDeactivateToggle\" [ngStyle]=\"{ 'pointer-events': 'auto' }\">\r\n <lib-toggle-switch\r\n [isFormElement]=\"false\"\r\n [checked]=\"rowData.isEnabled\"\r\n (getValueEvent)=\"toggleEnable({ rowData, $event })\"\r\n ></lib-toggle-switch>\r\n </td>\r\n\r\n <!-- Deactivate toggle two -->\r\n <td *ngIf=\"isDeactivateToggleTwo\" [ngStyle]=\"{ 'pointer-events': 'auto' }\">\r\n <lib-toggle-switch\r\n [disabled]=\"!rowData.isEnabled\"\r\n [isFormElement]=\"false\"\r\n [checked]=\"rowData.isAppointmentEnabled\"\r\n (getValueEvent)=\"toggleTwoEnable({ rowData, $event })\"\r\n ></lib-toggle-switch>\r\n </td>\r\n\r\n <!-- Deactivate toggle three -->\r\n <td *ngIf=\"isDeactivateToggleThree\" [ngStyle]=\"{ 'pointer-events': 'auto' }\">\r\n <lib-toggle-switch\r\n [disabled]=\"!rowData.isEnabled\"\r\n [isFormElement]=\"false\"\r\n [checked]=\"rowData.isNotificationEnabled\"\r\n (getValueEvent)=\"toggleThreeEnable({ rowData, $event })\"\r\n ></lib-toggle-switch>\r\n </td>\r\n\r\n <!-- Deactivate toggle four -->\r\n <td *ngIf=\"isDeactivateToggleFour\" [ngStyle]=\"{ 'pointer-events': 'auto' }\">\r\n <lib-toggle-switch\r\n [disabled]=\"!rowData.isEnabled\"\r\n [isFormElement]=\"false\"\r\n [checked]=\"rowData.isVrstomatEnabled\"\r\n (getValueEvent)=\"toggleFourEnable({ rowData, $event })\"\r\n ></lib-toggle-switch>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n</p-table>\r\n", styles: [":host ::ng-deep .future .p-datatable-header{background:#b2414d}:host ::ng-deep .past .p-datatable-header{background:#6d7375}:host ::ng-deep .p-datatable{border:1px solid #3E7C94;border-radius:8px;overflow:hidden;padding:0}:host ::ng-deep .p-datatable .p-datatable-header{border:none;color:#fff;padding:.5rem 1rem}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th,:host ::ng-deep .p-datatable .p-datatable-thead>tr>td{background:#d9d9d9;border:none;color:#1b495a;font-weight:unset;padding:.5rem 1rem}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th.public-table:first-child,:host ::ng-deep .p-datatable .p-datatable-thead>tr>td.public-table:first-child{width:400px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th.public-table:nth-child(2),:host ::ng-deep .p-datatable .p-datatable-thead>tr>td.public-table:nth-child(2){width:150px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:transparent;height:50px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.success_row_color{background:#66952eb3}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.disabled_row_color{background:#b4b4b4b3}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{border-color:#3e7c94;padding:.5rem 1rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr:first-child>td{border-color:transparent}:host ::ng-deep .p-datatable .table-icon-button{width:50px}:host ::ng-deep .p-paginator{background:transparent}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:#3e7c94;border-color:#3e7c94}@media (max-width: 600px){:host ::ng-deep .p-datatable .p-datatable-header{padding:.5rem}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{padding:.5rem}}.disabled-row{opacity:.5;pointer-events:none}.custom-small-text{font-size:.8rem;line-height:.9}.ellipsis-text{cursor:n-resize}\n"] }]
|
|
1916
|
+
}], propDecorators: { table: [{
|
|
1917
|
+
type: ViewChild,
|
|
1918
|
+
args: ['dt', { static: false }]
|
|
1919
|
+
}], tableData: [{
|
|
1920
|
+
type: Input
|
|
1921
|
+
}], tableColumns: [{
|
|
1922
|
+
type: Input
|
|
1923
|
+
}], isPaginatorVisible: [{
|
|
1924
|
+
type: Input
|
|
1925
|
+
}], tableRowCount: [{
|
|
1926
|
+
type: Input
|
|
1927
|
+
}], scrollable: [{
|
|
1928
|
+
type: Input
|
|
1929
|
+
}], scrollHeight: [{
|
|
1930
|
+
type: Input
|
|
1931
|
+
}], selectedProducts: [{
|
|
1932
|
+
type: Input
|
|
1933
|
+
}], isEditingTable: [{
|
|
1934
|
+
type: Input
|
|
1935
|
+
}], isTableLoading: [{
|
|
1936
|
+
type: Input
|
|
1937
|
+
}], hideColumnsOnMobile: [{
|
|
1938
|
+
type: Input
|
|
1939
|
+
}], tableMinWidth: [{
|
|
1940
|
+
type: Input
|
|
1941
|
+
}], isVirtualScrollButtonVisible: [{
|
|
1942
|
+
type: Input
|
|
1943
|
+
}], isVirtualScroll: [{
|
|
1944
|
+
type: Input
|
|
1945
|
+
}], virtualScrollRowSize: [{
|
|
1946
|
+
type: Input
|
|
1947
|
+
}], tableCaption: [{
|
|
1948
|
+
type: Input
|
|
1949
|
+
}], captionColorClass: [{
|
|
1950
|
+
type: Input
|
|
1951
|
+
}], isCaptionButtonVisible: [{
|
|
1952
|
+
type: Input
|
|
1953
|
+
}], captionButtonLabel: [{
|
|
1954
|
+
type: Input
|
|
1955
|
+
}], captionButtonColor: [{
|
|
1956
|
+
type: Input
|
|
1957
|
+
}], captionButtonClicked: [{
|
|
1958
|
+
type: Output
|
|
1959
|
+
}], isTableHeaderVisible: [{
|
|
1960
|
+
type: Input
|
|
1961
|
+
}], emptyColumnWidth: [{
|
|
1962
|
+
type: Input
|
|
1963
|
+
}], toggleTableHeaderName: [{
|
|
1964
|
+
type: Input
|
|
1965
|
+
}], toggleWidth: [{
|
|
1966
|
+
type: Input
|
|
1967
|
+
}], toggleTwoTableHeaderName: [{
|
|
1968
|
+
type: Input
|
|
1969
|
+
}], toggleTwoWidth: [{
|
|
1970
|
+
type: Input
|
|
1971
|
+
}], toggleThreeTableHeaderName: [{
|
|
1972
|
+
type: Input
|
|
1973
|
+
}], toggleThreeWidth: [{
|
|
1974
|
+
type: Input
|
|
1975
|
+
}], toggleFourTableHeaderName: [{
|
|
1976
|
+
type: Input
|
|
1977
|
+
}], toggleFourWidth: [{
|
|
1978
|
+
type: Input
|
|
1979
|
+
}], rowColor: [{
|
|
1980
|
+
type: Input
|
|
1981
|
+
}], formGroup: [{
|
|
1982
|
+
type: Input
|
|
1983
|
+
}], type: [{
|
|
1984
|
+
type: Input
|
|
1985
|
+
}], formStatus: [{
|
|
1986
|
+
type: Input
|
|
1987
|
+
}], tagColor: [{
|
|
1988
|
+
type: Input
|
|
1989
|
+
}], isWarningTextVisible: [{
|
|
1990
|
+
type: Input
|
|
1991
|
+
}], isButtonOneVisible: [{
|
|
1992
|
+
type: Input
|
|
1993
|
+
}], buttonLabel: [{
|
|
1994
|
+
type: Input
|
|
1995
|
+
}], buttonOneLabel: [{
|
|
1996
|
+
type: Input
|
|
1997
|
+
}], buttonOneHasIcon: [{
|
|
1998
|
+
type: Input
|
|
1999
|
+
}], buttonOneEditIcon: [{
|
|
2000
|
+
type: Input
|
|
2001
|
+
}], buttonOneSaveIcon: [{
|
|
2002
|
+
type: Input
|
|
2003
|
+
}], buttonOneColor: [{
|
|
2004
|
+
type: Input
|
|
2005
|
+
}], buttonOneIcon: [{
|
|
2006
|
+
type: Input
|
|
2007
|
+
}], isPlainTableIconButtonOne: [{
|
|
2008
|
+
type: Input
|
|
2009
|
+
}], isPlainTableButtonOneLink: [{
|
|
2010
|
+
type: Input
|
|
2011
|
+
}], buttonEditClick: [{
|
|
2012
|
+
type: Output
|
|
2013
|
+
}], buttonSaveClick: [{
|
|
2014
|
+
type: Output
|
|
2015
|
+
}], buttonOneClick: [{
|
|
2016
|
+
type: Output
|
|
2017
|
+
}], isButtonTwoVisible: [{
|
|
2018
|
+
type: Input
|
|
2019
|
+
}], buttonTwoLabel: [{
|
|
2020
|
+
type: Input
|
|
2021
|
+
}], buttonTwoHasIcon: [{
|
|
2022
|
+
type: Input
|
|
2023
|
+
}], buttonTwoDeleteIcon: [{
|
|
2024
|
+
type: Input
|
|
2025
|
+
}], buttonTwoCancelIcon: [{
|
|
2026
|
+
type: Input
|
|
2027
|
+
}], buttonTwoColor: [{
|
|
2028
|
+
type: Input
|
|
2029
|
+
}], buttonTwoIcon: [{
|
|
2030
|
+
type: Input
|
|
2031
|
+
}], isPlainTableIconButtonTwo: [{
|
|
2032
|
+
type: Input
|
|
2033
|
+
}], buttonDeleteClick: [{
|
|
2034
|
+
type: Output
|
|
2035
|
+
}], buttonTwoClick: [{
|
|
2036
|
+
type: Output
|
|
2037
|
+
}], isDeactivateToggle: [{
|
|
2038
|
+
type: Input
|
|
2039
|
+
}], toggleSwitch: [{
|
|
2040
|
+
type: Output
|
|
2041
|
+
}], isDeactivateToggleTwo: [{
|
|
2042
|
+
type: Input
|
|
2043
|
+
}], toggleTwoSwitch: [{
|
|
2044
|
+
type: Output
|
|
2045
|
+
}], isDeactivateToggleThree: [{
|
|
2046
|
+
type: Input
|
|
2047
|
+
}], toggleThreeSwitch: [{
|
|
2048
|
+
type: Output
|
|
2049
|
+
}], isDeactivateToggleFour: [{
|
|
2050
|
+
type: Input
|
|
2051
|
+
}], toggleFourSwitch: [{
|
|
2052
|
+
type: Output
|
|
2053
|
+
}], showEllipsisFullText: [{
|
|
2054
|
+
type: Input
|
|
2055
|
+
}], checkboxOne: [{
|
|
2056
|
+
type: Output
|
|
2057
|
+
}] } });
|
|
2058
|
+
|
|
2059
|
+
class ExpandedTableComponent {
|
|
2060
|
+
Array = Array;
|
|
2061
|
+
ButtonColor = ButtonColor;
|
|
2062
|
+
isEmpty = isEmpty;
|
|
2063
|
+
// Main Table configuration
|
|
2064
|
+
tableData;
|
|
2065
|
+
tableColumns = [];
|
|
2066
|
+
isPaginatorVisible = false;
|
|
2067
|
+
tableRowCount = 10;
|
|
2068
|
+
isEnabledTable = true;
|
|
2069
|
+
scrollable = false;
|
|
2070
|
+
scrollHeight;
|
|
2071
|
+
isTableLoading = false;
|
|
2072
|
+
mainCaptionColorClass;
|
|
2073
|
+
isEditingTable = false;
|
|
2074
|
+
hideColumnsOnMobile = false;
|
|
2075
|
+
innerTableHideColumnsOnMobile = false;
|
|
2076
|
+
// Main table data
|
|
2077
|
+
tableCaption;
|
|
2078
|
+
// Table header
|
|
2079
|
+
isTableHeaderVisible = true;
|
|
2080
|
+
emptyHeaderColumnList = [];
|
|
2081
|
+
emptyColumnWidth;
|
|
2082
|
+
rowColor;
|
|
2083
|
+
// Main table data - Column one button
|
|
2084
|
+
isButtonOneVisible = false;
|
|
2085
|
+
isPlainTableIconButtonOne = false;
|
|
2086
|
+
buttonLabel;
|
|
2087
|
+
buttonOneLabel;
|
|
2088
|
+
buttonOneHasIcon;
|
|
2089
|
+
buttonOneColor;
|
|
2090
|
+
buttonOneIcon;
|
|
2091
|
+
buttonOneClick = new EventEmitter();
|
|
2092
|
+
// Main table data - Column one button
|
|
2093
|
+
isButtonTwoVisible = false;
|
|
2094
|
+
buttonTwoLabel;
|
|
2095
|
+
buttonTwoHasIcon;
|
|
2096
|
+
buttonTwoColor;
|
|
2097
|
+
buttonTwoIcon;
|
|
2098
|
+
isButtonTwoToggle = true;
|
|
2099
|
+
buttonTwoClick = new EventEmitter();
|
|
2100
|
+
// Main table data - Arrow
|
|
2101
|
+
isArrowToggle = false;
|
|
2102
|
+
// Inner table
|
|
2103
|
+
table;
|
|
2104
|
+
innerTableStyle = '';
|
|
2105
|
+
// Table configuration
|
|
2106
|
+
innerTableColumns = [];
|
|
2107
|
+
innerIsPaginatorVisible = false;
|
|
2108
|
+
innerTableRowCount = 10;
|
|
2109
|
+
innerScrollable = false;
|
|
2110
|
+
innerScrollHeight;
|
|
2111
|
+
innerIsEditingTable = false;
|
|
2112
|
+
innerIsTableLoading = false;
|
|
2113
|
+
// Caption
|
|
2114
|
+
innerTableCaption;
|
|
2115
|
+
innerCaptionColorClass = CaptionColor.today;
|
|
2116
|
+
innerIsCaptionButtonVisible = false;
|
|
2117
|
+
innerCaptionButtonLabel;
|
|
2118
|
+
innerCaptionButtonColor = ButtonColor.primary;
|
|
2119
|
+
innerCaptionButtonClicked = new EventEmitter();
|
|
2120
|
+
// Table header
|
|
2121
|
+
innerIsTableHeaderVisible = true;
|
|
2122
|
+
innerEmptyHeaderColumnList = [];
|
|
2123
|
+
innerEmptyColumnWidth;
|
|
2124
|
+
// Disable switch - toggle
|
|
2125
|
+
innerToggleTableHeaderName;
|
|
2126
|
+
innerToggleWidth = '100px';
|
|
2127
|
+
// Disable switchTwo - toggle
|
|
2128
|
+
innerToggleTwoTableHeaderName;
|
|
2129
|
+
innerToggleTwoWidth = '100px';
|
|
2130
|
+
innerToggleThreeTableHeaderName;
|
|
2131
|
+
innerToggleThreeWidth = '100px';
|
|
2132
|
+
innerToggleFourTableHeaderName;
|
|
2133
|
+
innerToggleFourWidth = '100px';
|
|
2134
|
+
// Form stuff
|
|
2135
|
+
innerFormGroup = new FormGroup({});
|
|
2136
|
+
// Input
|
|
2137
|
+
innerType = InputType.text;
|
|
2138
|
+
innerFormStatus;
|
|
2139
|
+
// Button column one
|
|
2140
|
+
innerIsButtonOneVisible = false;
|
|
2141
|
+
innerIsPlainTableIconButtonOne = false;
|
|
2142
|
+
innerButtonOneLabel;
|
|
2143
|
+
innerButtonOneHasIcon;
|
|
2144
|
+
innerButtonOneEditIcon;
|
|
2145
|
+
innerButtonOneSaveIcon;
|
|
2146
|
+
innerButtonOneColor;
|
|
2147
|
+
innerButtonOneIcon;
|
|
2148
|
+
innerButtonEditClick = new EventEmitter();
|
|
2149
|
+
innerButtonSaveClick = new EventEmitter();
|
|
2150
|
+
innerButtonOneClick = new EventEmitter();
|
|
2151
|
+
// Button column two
|
|
2152
|
+
innerIsButtonTwoVisible = false;
|
|
2153
|
+
innerIsPlainTableIconButtonTwo = false;
|
|
2154
|
+
innerButtonTwoLabel;
|
|
2155
|
+
innerButtonTwoHasIcon;
|
|
2156
|
+
innerButtonTwoDeleteIcon;
|
|
2157
|
+
innerButtonTwoCancelIcon;
|
|
2158
|
+
innerButtonTwoColor;
|
|
2159
|
+
innerButtonTwoIcon;
|
|
2160
|
+
innerButtonDeleteClick = new EventEmitter();
|
|
2161
|
+
innerButtonTwoClick = new EventEmitter();
|
|
2162
|
+
// Deactivate toggle
|
|
2163
|
+
innerIsDeactivateToggle = false;
|
|
2164
|
+
innerToggleSwitch = new EventEmitter();
|
|
2165
|
+
innerIsDeactivateToggleTwo = false;
|
|
2166
|
+
innerToggleTwoSwitch = new EventEmitter();
|
|
2167
|
+
innerIsDeactivateToggleThree = false;
|
|
2168
|
+
innerToggleThreeSwitch = new EventEmitter();
|
|
2169
|
+
innerIsDeactivateToggleFour = false;
|
|
2170
|
+
innerToggleFourSwitch = new EventEmitter();
|
|
2171
|
+
// Main table functions
|
|
2172
|
+
clickButtonOne(event) {
|
|
2173
|
+
this.buttonOneClick.emit(event);
|
|
2174
|
+
}
|
|
2175
|
+
clickButtonTwo(event) {
|
|
2176
|
+
this.buttonTwoClick.emit(event);
|
|
2177
|
+
}
|
|
2178
|
+
// Inner Editing table - BUTTONS
|
|
2179
|
+
onRowEdit(event) {
|
|
2180
|
+
this.table.editingRowKeys = { [event.id]: true };
|
|
2181
|
+
this.innerButtonEditClick.emit(event);
|
|
2182
|
+
}
|
|
2183
|
+
onRowSave(event, htmlTableRowElement) {
|
|
2184
|
+
this.innerButtonSaveClick.emit(event);
|
|
2185
|
+
setTimeout(() => {
|
|
2186
|
+
this.table.saveRowEdit(event, htmlTableRowElement);
|
|
2187
|
+
}, 200);
|
|
2188
|
+
}
|
|
2189
|
+
onRowDelete(event) {
|
|
2190
|
+
this.innerButtonDeleteClick.emit(event);
|
|
2191
|
+
}
|
|
2192
|
+
onRowCancel(event) {
|
|
2193
|
+
this.table.cancelRowEdit(event);
|
|
2194
|
+
}
|
|
2195
|
+
// Inner Caption
|
|
2196
|
+
clickInnerCaptionButton(event) {
|
|
2197
|
+
this.innerCaptionButtonClicked.emit(event);
|
|
2198
|
+
}
|
|
2199
|
+
// Inner Button column one
|
|
2200
|
+
clickInnerButtonOne(event) {
|
|
2201
|
+
this.innerButtonOneClick.emit(event);
|
|
2202
|
+
}
|
|
2203
|
+
// Inner Button column one
|
|
2204
|
+
clickInnerButtonTwo(event) {
|
|
2205
|
+
this.innerButtonTwoClick.emit(event);
|
|
2206
|
+
}
|
|
2207
|
+
// Deactivate toggle
|
|
2208
|
+
toggleEnable(event) {
|
|
2209
|
+
if (!event.$event.checked) {
|
|
2210
|
+
setTimeout(() => {
|
|
2211
|
+
this.onRowCancel(event.rowData);
|
|
2212
|
+
}, 100);
|
|
2213
|
+
}
|
|
2214
|
+
this.innerToggleSwitch.emit(event);
|
|
2215
|
+
}
|
|
2216
|
+
toggleTwoEnable(event) {
|
|
2217
|
+
if (!event.$event.checked) {
|
|
2218
|
+
setTimeout(() => {
|
|
2219
|
+
this.onRowCancel(event.rowData);
|
|
2220
|
+
}, 100);
|
|
2221
|
+
}
|
|
2222
|
+
this.innerToggleTwoSwitch.emit(event);
|
|
2223
|
+
}
|
|
2224
|
+
toggleThreeEnable(event) {
|
|
2225
|
+
if (!event.$event.checked) {
|
|
2226
|
+
setTimeout(() => {
|
|
2227
|
+
this.onRowCancel(event.rowData);
|
|
2228
|
+
}, 100);
|
|
2229
|
+
}
|
|
2230
|
+
this.innerToggleThreeSwitch.emit(event);
|
|
2231
|
+
}
|
|
2232
|
+
toggleFourEnable(event) {
|
|
2233
|
+
if (!event.$event.checked) {
|
|
2234
|
+
setTimeout(() => {
|
|
2235
|
+
this.onRowCancel(event.rowData);
|
|
2236
|
+
}, 100);
|
|
2237
|
+
}
|
|
2238
|
+
this.innerToggleFourSwitch.emit(event);
|
|
2239
|
+
}
|
|
2240
|
+
// Helper method for nested field structures
|
|
2241
|
+
getNestedValue(data, field) {
|
|
2242
|
+
if (!field) {
|
|
2243
|
+
return null;
|
|
2244
|
+
}
|
|
2245
|
+
const fields = field.split('.');
|
|
2246
|
+
let value = data;
|
|
2247
|
+
for (const f of fields) {
|
|
2248
|
+
// eslint-disable-next-line no-prototype-builtins
|
|
2249
|
+
if (value && value.hasOwnProperty(f)) {
|
|
2250
|
+
value = value[f];
|
|
2251
|
+
}
|
|
2252
|
+
else {
|
|
2253
|
+
return null;
|
|
2254
|
+
}
|
|
2255
|
+
}
|
|
2256
|
+
return value;
|
|
2257
|
+
}
|
|
2258
|
+
isMobile() {
|
|
2259
|
+
return window.innerWidth <= 768;
|
|
2260
|
+
}
|
|
2261
|
+
ngOnInit() {
|
|
2262
|
+
// If there is button just add it to the end of header list array
|
|
2263
|
+
const conditions = [
|
|
2264
|
+
this.isButtonOneVisible,
|
|
2265
|
+
this.isButtonTwoVisible,
|
|
2266
|
+
this.isArrowToggle,
|
|
2267
|
+
];
|
|
2268
|
+
conditions.forEach((condition) => {
|
|
2269
|
+
if (condition) {
|
|
2270
|
+
this.emptyHeaderColumnList.push('');
|
|
2271
|
+
}
|
|
2272
|
+
});
|
|
2273
|
+
const conditionsInner = [this.innerIsButtonOneVisible, this.innerIsButtonTwoVisible];
|
|
2274
|
+
conditionsInner.forEach(condition => {
|
|
2275
|
+
if (condition) {
|
|
2276
|
+
this.innerEmptyHeaderColumnList.push('');
|
|
2277
|
+
}
|
|
2278
|
+
});
|
|
2279
|
+
}
|
|
2280
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ExpandedTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2281
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ExpandedTableComponent, isStandalone: true, selector: "lib-expanded-table[tableData]", inputs: { tableData: "tableData", tableColumns: "tableColumns", isPaginatorVisible: "isPaginatorVisible", tableRowCount: "tableRowCount", isEnabledTable: "isEnabledTable", scrollable: "scrollable", scrollHeight: "scrollHeight", isTableLoading: "isTableLoading", mainCaptionColorClass: "mainCaptionColorClass", isEditingTable: "isEditingTable", hideColumnsOnMobile: "hideColumnsOnMobile", innerTableHideColumnsOnMobile: "innerTableHideColumnsOnMobile", tableCaption: "tableCaption", isTableHeaderVisible: "isTableHeaderVisible", emptyColumnWidth: "emptyColumnWidth", rowColor: "rowColor", isButtonOneVisible: "isButtonOneVisible", isPlainTableIconButtonOne: "isPlainTableIconButtonOne", buttonLabel: "buttonLabel", buttonOneLabel: "buttonOneLabel", buttonOneHasIcon: "buttonOneHasIcon", buttonOneColor: "buttonOneColor", buttonOneIcon: "buttonOneIcon", isButtonTwoVisible: "isButtonTwoVisible", buttonTwoLabel: "buttonTwoLabel", buttonTwoHasIcon: "buttonTwoHasIcon", buttonTwoColor: "buttonTwoColor", buttonTwoIcon: "buttonTwoIcon", isButtonTwoToggle: "isButtonTwoToggle", isArrowToggle: "isArrowToggle", innerTableStyle: "innerTableStyle", innerTableColumns: "innerTableColumns", innerIsPaginatorVisible: "innerIsPaginatorVisible", innerTableRowCount: "innerTableRowCount", innerScrollable: "innerScrollable", innerScrollHeight: "innerScrollHeight", innerIsEditingTable: "innerIsEditingTable", innerIsTableLoading: "innerIsTableLoading", innerTableCaption: "innerTableCaption", innerCaptionColorClass: "innerCaptionColorClass", innerIsCaptionButtonVisible: "innerIsCaptionButtonVisible", innerCaptionButtonLabel: "innerCaptionButtonLabel", innerCaptionButtonColor: "innerCaptionButtonColor", innerIsTableHeaderVisible: "innerIsTableHeaderVisible", innerEmptyColumnWidth: "innerEmptyColumnWidth", innerToggleTableHeaderName: "innerToggleTableHeaderName", innerToggleWidth: "innerToggleWidth", innerToggleTwoTableHeaderName: "innerToggleTwoTableHeaderName", innerToggleTwoWidth: "innerToggleTwoWidth", innerToggleThreeTableHeaderName: "innerToggleThreeTableHeaderName", innerToggleThreeWidth: "innerToggleThreeWidth", innerToggleFourTableHeaderName: "innerToggleFourTableHeaderName", innerToggleFourWidth: "innerToggleFourWidth", innerFormGroup: "innerFormGroup", innerType: "innerType", innerFormStatus: "innerFormStatus", innerIsButtonOneVisible: "innerIsButtonOneVisible", innerIsPlainTableIconButtonOne: "innerIsPlainTableIconButtonOne", innerButtonOneLabel: "innerButtonOneLabel", innerButtonOneHasIcon: "innerButtonOneHasIcon", innerButtonOneEditIcon: "innerButtonOneEditIcon", innerButtonOneSaveIcon: "innerButtonOneSaveIcon", innerButtonOneColor: "innerButtonOneColor", innerButtonOneIcon: "innerButtonOneIcon", innerIsButtonTwoVisible: "innerIsButtonTwoVisible", innerIsPlainTableIconButtonTwo: "innerIsPlainTableIconButtonTwo", innerButtonTwoLabel: "innerButtonTwoLabel", innerButtonTwoHasIcon: "innerButtonTwoHasIcon", innerButtonTwoDeleteIcon: "innerButtonTwoDeleteIcon", innerButtonTwoCancelIcon: "innerButtonTwoCancelIcon", innerButtonTwoColor: "innerButtonTwoColor", innerButtonTwoIcon: "innerButtonTwoIcon", innerIsDeactivateToggle: "innerIsDeactivateToggle", innerIsDeactivateToggleTwo: "innerIsDeactivateToggleTwo", innerIsDeactivateToggleThree: "innerIsDeactivateToggleThree", innerIsDeactivateToggleFour: "innerIsDeactivateToggleFour" }, outputs: { buttonOneClick: "buttonOneClick", buttonTwoClick: "buttonTwoClick", innerCaptionButtonClicked: "innerCaptionButtonClicked", innerButtonEditClick: "innerButtonEditClick", innerButtonSaveClick: "innerButtonSaveClick", innerButtonOneClick: "innerButtonOneClick", innerButtonDeleteClick: "innerButtonDeleteClick", innerButtonTwoClick: "innerButtonTwoClick", innerToggleSwitch: "innerToggleSwitch", innerToggleTwoSwitch: "innerToggleTwoSwitch", innerToggleThreeSwitch: "innerToggleThreeSwitch", innerToggleFourSwitch: "innerToggleFourSwitch" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<p-table\r\n #dt\r\n [value]=\"tableData\"\r\n [paginator]=\"isPaginatorVisible\"\r\n [rows]=\"tableRowCount\"\r\n [showCurrentPageReport]=\"false\"\r\n [scrollable]=\"scrollable\"\r\n [scrollHeight]=\"scrollHeight\"\r\n [ngClass]=\"mainCaptionColorClass\"\r\n dataKey=\"id\"\r\n [loading]=\"isTableLoading\"\r\n>\r\n <ng-template pTemplate=\"caption\" *ngIf=\"!!tableCaption\">{{ tableCaption }}</ng-template>\r\n <ng-template pTemplate=\"header\" *ngIf=\"isTableHeaderVisible\">\r\n <tr>\r\n <ng-container *ngFor=\"let column of tableColumns\">\r\n <ng-container *ngIf=\"!(column.hideOnMobile && isMobile() && hideColumnsOnMobile)\">\r\n <th scope=\"col\" [style.width]=\"column.width\">\r\n {{ column.header | translate }}\r\n </th>\r\n </ng-container>\r\n\r\n </ng-container>\r\n <th *ngFor=\"let _ of emptyHeaderColumnList\" scope=\"col\" [style.width]=\"emptyColumnWidth\"></th>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"body\" let-rowData let-expanded=\"expanded\">\r\n <tr [ngClass]=\"rowColor\">\r\n <ng-container *ngFor=\"let column of tableColumns; let colIndex = index\">\r\n <ng-container *ngIf=\"!(column.hideOnMobile && isMobile() && hideColumnsOnMobile)\">\r\n <td [class.disabled-row]=\"isEditingTable && !rowData?.isEnabled\">\r\n {{ column.suffix ? getNestedValue(rowData, column.field) + ' ' + column.suffix : getNestedValue(rowData, column.field) }}\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- Main table - Button column one -->\r\n <ng-container *ngIf=\"isButtonOneVisible\">\r\n <td [class.disabled-row]=\"isEditingTable && !rowData?.isEnabled\">\r\n <lib-button\r\n [label]=\"buttonOneLabel!\"\r\n [hasIcon]=\"buttonOneHasIcon!\"\r\n [color]=\"buttonOneColor!\"\r\n [icon]=\"buttonOneIcon!\"\r\n (click)=\"clickButtonOne(rowData)\"\r\n ></lib-button>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Main table - Button column two -->\r\n <ng-container *ngIf=\"isButtonTwoVisible\">\r\n <td [class.disabled-row]=\"isEditingTable && !rowData?.isEnabled\">\r\n <lib-button\r\n [pRowToggler]=\"isButtonTwoToggle ? rowData : null\"\r\n [label]=\"buttonTwoLabel!\"\r\n [hasIcon]=\"buttonTwoHasIcon!\"\r\n [color]=\"buttonTwoColor!\"\r\n [icon]=\"buttonTwoIcon!\"\r\n (click)=\"clickButtonTwo(rowData)\"\r\n ></lib-button>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Main table - Button column three - Arrow -->\r\n <ng-container *ngIf=\"isArrowToggle\">\r\n <td [ngStyle]=\"{ 'width': '20px' }\">\r\n <i class=\"pi\" [ngClass]=\"expanded ? 'pi pi-chevron-up' : 'pi pi-chevron-down'\"\r\n [pRowToggler]=\"!rowData['isEnabled'] ? null : rowData\"></i>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- Inner table-->\r\n <ng-template pTemplate=\"rowexpansion\" let-rowData>\r\n <tr>\r\n <td colspan=\"7\">\r\n <lib-custom-table\r\n #dt\r\n #htmlTableRowElement\r\n [tableData]=\"rowData.other\"\r\n [tableColumns]=\"innerTableColumns\"\r\n [isPaginatorVisible]=\"innerIsPaginatorVisible\"\r\n [tableRowCount]=\"innerTableRowCount\"\r\n [isEditingTable]=\"innerIsEditingTable\"\r\n [isTableLoading]=\"innerIsTableLoading\"\r\n [scrollable]=\"true\"\r\n [hideColumnsOnMobile]=\"innerTableHideColumnsOnMobile\"\r\n tableMinWidth=\"10rem\"\r\n\r\n [tableCaption]=\"innerTableCaption\"\r\n [captionColorClass]=\"innerCaptionColorClass\"\r\n [isCaptionButtonVisible]=\"innerIsCaptionButtonVisible\"\r\n [captionButtonColor]=\"innerCaptionButtonColor\"\r\n (captionButtonClicked)=\"clickInnerCaptionButton($event)\"\r\n\r\n [isTableHeaderVisible]=\"innerIsTableHeaderVisible\"\r\n [emptyColumnWidth]=\"innerEmptyColumnWidth\"\r\n\r\n [toggleTableHeaderName]=\"innerToggleTableHeaderName\"\r\n [toggleWidth]=\"innerToggleWidth\"\r\n\r\n [toggleTwoTableHeaderName]=\"innerToggleTwoTableHeaderName\"\r\n [toggleTwoWidth]=\"innerToggleTwoWidth\"\r\n\r\n [toggleThreeTableHeaderName]=\"innerToggleThreeTableHeaderName\"\r\n [toggleThreeWidth]=\"innerToggleThreeWidth\"\r\n\r\n [toggleFourTableHeaderName]=\"innerToggleFourTableHeaderName\"\r\n [toggleFourWidth]=\"innerToggleFourWidth\"\r\n\r\n [formGroup]=\"innerFormGroup\"\r\n\r\n [type]=\"innerType\"\r\n [formStatus]=\"innerFormStatus\"\r\n\r\n [isButtonOneVisible]=\"innerIsButtonOneVisible\"\r\n [isPlainTableIconButtonOne]=\"innerIsPlainTableIconButtonOne\"\r\n [buttonOneLabel]=\"innerButtonOneLabel\"\r\n [buttonOneHasIcon]=\"innerButtonOneHasIcon\"\r\n [buttonOneEditIcon]=\"innerButtonOneEditIcon\"\r\n [buttonOneSaveIcon]=\"innerButtonOneSaveIcon\"\r\n [buttonOneColor]=\"innerButtonOneColor\"\r\n [buttonOneIcon]=\"innerButtonOneIcon\"\r\n (buttonEditClick)=\"onRowEdit($event)\"\r\n (buttonSaveClick)=\"onRowSave($event, htmlTableRowElement)\"\r\n (buttonOneClick)=\"clickInnerButtonOne($event)\"\r\n\r\n [isButtonTwoVisible]=\"innerIsButtonTwoVisible\"\r\n [isPlainTableIconButtonTwo]=\"innerIsPlainTableIconButtonTwo\"\r\n [buttonTwoLabel]=\"innerButtonTwoLabel\"\r\n [buttonTwoHasIcon]=\"innerButtonTwoHasIcon\"\r\n [buttonTwoDeleteIcon]=\"innerButtonTwoDeleteIcon\"\r\n [buttonTwoCancelIcon]=\"innerButtonTwoCancelIcon\"\r\n [buttonTwoColor]=\"innerButtonTwoColor\"\r\n [buttonTwoIcon]=\"innerButtonTwoIcon\"\r\n (buttonDeleteClick)=\"onRowDelete($event)\"\r\n (buttonTwoClick)=\"clickInnerButtonTwo($event)\"\r\n\r\n [isDeactivateToggle]=\"innerIsDeactivateToggle\"\r\n (toggleSwitch)=\"toggleEnable($event)\"\r\n\r\n [isDeactivateToggleTwo]=\"innerIsDeactivateToggleTwo\"\r\n (toggleTwoSwitch)=\"toggleTwoEnable($event)\"\r\n\r\n [isDeactivateToggleThree]=\"innerIsDeactivateToggleThree\"\r\n (toggleThreeSwitch)=\"toggleThreeEnable($event)\"\r\n\r\n [isDeactivateToggleFour]=\"innerIsDeactivateToggleFour\"\r\n (toggleFourSwitch)=\"toggleFourEnable($event)\"\r\n ></lib-custom-table>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n</p-table>\r\n\r\n", styles: [":host ::ng-deep .p-datatable{border:1px solid #3E7C94;border-radius:12px;overflow:hidden;padding:0}:host ::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0;border:none;color:#fff;padding:.5rem}:host ::ng-deep .p-datatable .p-datatable-header.danger_row_color{background:#f44336}:host ::ng-deep .p-datatable .p-datatable-header.warning_row_color{background:#fdca40}:host ::ng-deep .p-datatable .p-datatable-header.success_row_color{background:#66952e}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{background:#d9d9d9;border:none;color:#1b495a;font-weight:unset;padding:.5rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:transparent}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.danger_row_color{background:#f44336}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.warning_row_color{background:#fdca40}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.success_row_color{background:#66952e}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{border-color:#3e7c94;padding:.5rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr:first-child>td{border-color:transparent}:host ::ng-deep .p-paginator{background:transparent}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:#3e7c94;border-color:#3e7c94}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$6.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["hasIcon", "label", "color", "icon", "iconPos", "disabled", "isLoading", "styleClass", "size", "accessibilityText", "buttonType", "isAccessible", "isSelected", "ariaControlsId", "isExpanded", "link", "isTextareaClear"], outputs: ["clickEvent"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CustomTableComponent, selector: "lib-custom-table[tableData][tableColumns]", inputs: ["tableData", "tableColumns", "isPaginatorVisible", "tableRowCount", "scrollable", "scrollHeight", "selectedProducts", "isEditingTable", "isTableLoading", "hideColumnsOnMobile", "tableMinWidth", "isVirtualScrollButtonVisible", "isVirtualScroll", "virtualScrollRowSize", "tableCaption", "captionColorClass", "isCaptionButtonVisible", "captionButtonLabel", "captionButtonColor", "isTableHeaderVisible", "emptyColumnWidth", "toggleTableHeaderName", "toggleWidth", "toggleTwoTableHeaderName", "toggleTwoWidth", "toggleThreeTableHeaderName", "toggleThreeWidth", "toggleFourTableHeaderName", "toggleFourWidth", "rowColor", "formGroup", "type", "formStatus", "tagColor", "isWarningTextVisible", "isButtonOneVisible", "buttonLabel", "buttonOneLabel", "buttonOneHasIcon", "buttonOneEditIcon", "buttonOneSaveIcon", "buttonOneColor", "buttonOneIcon", "isPlainTableIconButtonOne", "isPlainTableButtonOneLink", "isButtonTwoVisible", "buttonTwoLabel", "buttonTwoHasIcon", "buttonTwoDeleteIcon", "buttonTwoCancelIcon", "buttonTwoColor", "buttonTwoIcon", "isPlainTableIconButtonTwo", "isDeactivateToggle", "isDeactivateToggleTwo", "isDeactivateToggleThree", "isDeactivateToggleFour", "showEllipsisFullText"], outputs: ["captionButtonClicked", "buttonEditClick", "buttonSaveClick", "buttonOneClick", "buttonDeleteClick", "buttonTwoClick", "toggleSwitch", "toggleTwoSwitch", "toggleThreeSwitch", "toggleFourSwitch", "checkboxOne"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
2282
|
+
}
|
|
2283
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ExpandedTableComponent, decorators: [{
|
|
2284
|
+
type: Component,
|
|
2285
|
+
args: [{ selector: 'lib-expanded-table[tableData]', imports: [
|
|
2286
|
+
TableModule,
|
|
2287
|
+
NgClass,
|
|
2288
|
+
NgIf,
|
|
2289
|
+
PrimeTemplate,
|
|
2290
|
+
NgFor,
|
|
2291
|
+
ButtonComponent,
|
|
2292
|
+
NgStyle,
|
|
2293
|
+
CustomTableComponent,
|
|
2294
|
+
FormsModule,
|
|
2295
|
+
ReactiveFormsModule,
|
|
2296
|
+
TranslateModule,
|
|
2297
|
+
], template: "<p-table\r\n #dt\r\n [value]=\"tableData\"\r\n [paginator]=\"isPaginatorVisible\"\r\n [rows]=\"tableRowCount\"\r\n [showCurrentPageReport]=\"false\"\r\n [scrollable]=\"scrollable\"\r\n [scrollHeight]=\"scrollHeight\"\r\n [ngClass]=\"mainCaptionColorClass\"\r\n dataKey=\"id\"\r\n [loading]=\"isTableLoading\"\r\n>\r\n <ng-template pTemplate=\"caption\" *ngIf=\"!!tableCaption\">{{ tableCaption }}</ng-template>\r\n <ng-template pTemplate=\"header\" *ngIf=\"isTableHeaderVisible\">\r\n <tr>\r\n <ng-container *ngFor=\"let column of tableColumns\">\r\n <ng-container *ngIf=\"!(column.hideOnMobile && isMobile() && hideColumnsOnMobile)\">\r\n <th scope=\"col\" [style.width]=\"column.width\">\r\n {{ column.header | translate }}\r\n </th>\r\n </ng-container>\r\n\r\n </ng-container>\r\n <th *ngFor=\"let _ of emptyHeaderColumnList\" scope=\"col\" [style.width]=\"emptyColumnWidth\"></th>\r\n </tr>\r\n </ng-template>\r\n <ng-template pTemplate=\"body\" let-rowData let-expanded=\"expanded\">\r\n <tr [ngClass]=\"rowColor\">\r\n <ng-container *ngFor=\"let column of tableColumns; let colIndex = index\">\r\n <ng-container *ngIf=\"!(column.hideOnMobile && isMobile() && hideColumnsOnMobile)\">\r\n <td [class.disabled-row]=\"isEditingTable && !rowData?.isEnabled\">\r\n {{ column.suffix ? getNestedValue(rowData, column.field) + ' ' + column.suffix : getNestedValue(rowData, column.field) }}\r\n </td>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- Main table - Button column one -->\r\n <ng-container *ngIf=\"isButtonOneVisible\">\r\n <td [class.disabled-row]=\"isEditingTable && !rowData?.isEnabled\">\r\n <lib-button\r\n [label]=\"buttonOneLabel!\"\r\n [hasIcon]=\"buttonOneHasIcon!\"\r\n [color]=\"buttonOneColor!\"\r\n [icon]=\"buttonOneIcon!\"\r\n (click)=\"clickButtonOne(rowData)\"\r\n ></lib-button>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Main table - Button column two -->\r\n <ng-container *ngIf=\"isButtonTwoVisible\">\r\n <td [class.disabled-row]=\"isEditingTable && !rowData?.isEnabled\">\r\n <lib-button\r\n [pRowToggler]=\"isButtonTwoToggle ? rowData : null\"\r\n [label]=\"buttonTwoLabel!\"\r\n [hasIcon]=\"buttonTwoHasIcon!\"\r\n [color]=\"buttonTwoColor!\"\r\n [icon]=\"buttonTwoIcon!\"\r\n (click)=\"clickButtonTwo(rowData)\"\r\n ></lib-button>\r\n </td>\r\n </ng-container>\r\n\r\n <!-- Main table - Button column three - Arrow -->\r\n <ng-container *ngIf=\"isArrowToggle\">\r\n <td [ngStyle]=\"{ 'width': '20px' }\">\r\n <i class=\"pi\" [ngClass]=\"expanded ? 'pi pi-chevron-up' : 'pi pi-chevron-down'\"\r\n [pRowToggler]=\"!rowData['isEnabled'] ? null : rowData\"></i>\r\n </td>\r\n </ng-container>\r\n </tr>\r\n </ng-template>\r\n\r\n <!-- Inner table-->\r\n <ng-template pTemplate=\"rowexpansion\" let-rowData>\r\n <tr>\r\n <td colspan=\"7\">\r\n <lib-custom-table\r\n #dt\r\n #htmlTableRowElement\r\n [tableData]=\"rowData.other\"\r\n [tableColumns]=\"innerTableColumns\"\r\n [isPaginatorVisible]=\"innerIsPaginatorVisible\"\r\n [tableRowCount]=\"innerTableRowCount\"\r\n [isEditingTable]=\"innerIsEditingTable\"\r\n [isTableLoading]=\"innerIsTableLoading\"\r\n [scrollable]=\"true\"\r\n [hideColumnsOnMobile]=\"innerTableHideColumnsOnMobile\"\r\n tableMinWidth=\"10rem\"\r\n\r\n [tableCaption]=\"innerTableCaption\"\r\n [captionColorClass]=\"innerCaptionColorClass\"\r\n [isCaptionButtonVisible]=\"innerIsCaptionButtonVisible\"\r\n [captionButtonColor]=\"innerCaptionButtonColor\"\r\n (captionButtonClicked)=\"clickInnerCaptionButton($event)\"\r\n\r\n [isTableHeaderVisible]=\"innerIsTableHeaderVisible\"\r\n [emptyColumnWidth]=\"innerEmptyColumnWidth\"\r\n\r\n [toggleTableHeaderName]=\"innerToggleTableHeaderName\"\r\n [toggleWidth]=\"innerToggleWidth\"\r\n\r\n [toggleTwoTableHeaderName]=\"innerToggleTwoTableHeaderName\"\r\n [toggleTwoWidth]=\"innerToggleTwoWidth\"\r\n\r\n [toggleThreeTableHeaderName]=\"innerToggleThreeTableHeaderName\"\r\n [toggleThreeWidth]=\"innerToggleThreeWidth\"\r\n\r\n [toggleFourTableHeaderName]=\"innerToggleFourTableHeaderName\"\r\n [toggleFourWidth]=\"innerToggleFourWidth\"\r\n\r\n [formGroup]=\"innerFormGroup\"\r\n\r\n [type]=\"innerType\"\r\n [formStatus]=\"innerFormStatus\"\r\n\r\n [isButtonOneVisible]=\"innerIsButtonOneVisible\"\r\n [isPlainTableIconButtonOne]=\"innerIsPlainTableIconButtonOne\"\r\n [buttonOneLabel]=\"innerButtonOneLabel\"\r\n [buttonOneHasIcon]=\"innerButtonOneHasIcon\"\r\n [buttonOneEditIcon]=\"innerButtonOneEditIcon\"\r\n [buttonOneSaveIcon]=\"innerButtonOneSaveIcon\"\r\n [buttonOneColor]=\"innerButtonOneColor\"\r\n [buttonOneIcon]=\"innerButtonOneIcon\"\r\n (buttonEditClick)=\"onRowEdit($event)\"\r\n (buttonSaveClick)=\"onRowSave($event, htmlTableRowElement)\"\r\n (buttonOneClick)=\"clickInnerButtonOne($event)\"\r\n\r\n [isButtonTwoVisible]=\"innerIsButtonTwoVisible\"\r\n [isPlainTableIconButtonTwo]=\"innerIsPlainTableIconButtonTwo\"\r\n [buttonTwoLabel]=\"innerButtonTwoLabel\"\r\n [buttonTwoHasIcon]=\"innerButtonTwoHasIcon\"\r\n [buttonTwoDeleteIcon]=\"innerButtonTwoDeleteIcon\"\r\n [buttonTwoCancelIcon]=\"innerButtonTwoCancelIcon\"\r\n [buttonTwoColor]=\"innerButtonTwoColor\"\r\n [buttonTwoIcon]=\"innerButtonTwoIcon\"\r\n (buttonDeleteClick)=\"onRowDelete($event)\"\r\n (buttonTwoClick)=\"clickInnerButtonTwo($event)\"\r\n\r\n [isDeactivateToggle]=\"innerIsDeactivateToggle\"\r\n (toggleSwitch)=\"toggleEnable($event)\"\r\n\r\n [isDeactivateToggleTwo]=\"innerIsDeactivateToggleTwo\"\r\n (toggleTwoSwitch)=\"toggleTwoEnable($event)\"\r\n\r\n [isDeactivateToggleThree]=\"innerIsDeactivateToggleThree\"\r\n (toggleThreeSwitch)=\"toggleThreeEnable($event)\"\r\n\r\n [isDeactivateToggleFour]=\"innerIsDeactivateToggleFour\"\r\n (toggleFourSwitch)=\"toggleFourEnable($event)\"\r\n ></lib-custom-table>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n</p-table>\r\n\r\n", styles: [":host ::ng-deep .p-datatable{border:1px solid #3E7C94;border-radius:12px;overflow:hidden;padding:0}:host ::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0;border:none;color:#fff;padding:.5rem}:host ::ng-deep .p-datatable .p-datatable-header.danger_row_color{background:#f44336}:host ::ng-deep .p-datatable .p-datatable-header.warning_row_color{background:#fdca40}:host ::ng-deep .p-datatable .p-datatable-header.success_row_color{background:#66952e}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{background:#d9d9d9;border:none;color:#1b495a;font-weight:unset;padding:.5rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:transparent}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.danger_row_color{background:#f44336}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.warning_row_color{background:#fdca40}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.success_row_color{background:#66952e}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{border-color:#3e7c94;padding:.5rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr:first-child>td{border-color:transparent}:host ::ng-deep .p-paginator{background:transparent}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-highlight{background:#3e7c94;border-color:#3e7c94}\n"] }]
|
|
2298
|
+
}], propDecorators: { tableData: [{
|
|
2299
|
+
type: Input
|
|
2300
|
+
}], tableColumns: [{
|
|
2301
|
+
type: Input
|
|
2302
|
+
}], isPaginatorVisible: [{
|
|
2303
|
+
type: Input
|
|
2304
|
+
}], tableRowCount: [{
|
|
2305
|
+
type: Input
|
|
2306
|
+
}], isEnabledTable: [{
|
|
2307
|
+
type: Input
|
|
2308
|
+
}], scrollable: [{
|
|
2309
|
+
type: Input
|
|
2310
|
+
}], scrollHeight: [{
|
|
2311
|
+
type: Input
|
|
2312
|
+
}], isTableLoading: [{
|
|
2313
|
+
type: Input
|
|
2314
|
+
}], mainCaptionColorClass: [{
|
|
2315
|
+
type: Input
|
|
2316
|
+
}], isEditingTable: [{
|
|
2317
|
+
type: Input
|
|
2318
|
+
}], hideColumnsOnMobile: [{
|
|
2319
|
+
type: Input
|
|
2320
|
+
}], innerTableHideColumnsOnMobile: [{
|
|
2321
|
+
type: Input
|
|
2322
|
+
}], tableCaption: [{
|
|
2323
|
+
type: Input
|
|
2324
|
+
}], isTableHeaderVisible: [{
|
|
2325
|
+
type: Input
|
|
2326
|
+
}], emptyColumnWidth: [{
|
|
2327
|
+
type: Input
|
|
2328
|
+
}], rowColor: [{
|
|
2329
|
+
type: Input
|
|
2330
|
+
}], isButtonOneVisible: [{
|
|
2331
|
+
type: Input
|
|
2332
|
+
}], isPlainTableIconButtonOne: [{
|
|
2333
|
+
type: Input
|
|
2334
|
+
}], buttonLabel: [{
|
|
2335
|
+
type: Input
|
|
2336
|
+
}], buttonOneLabel: [{
|
|
2337
|
+
type: Input
|
|
2338
|
+
}], buttonOneHasIcon: [{
|
|
2339
|
+
type: Input
|
|
2340
|
+
}], buttonOneColor: [{
|
|
2341
|
+
type: Input
|
|
2342
|
+
}], buttonOneIcon: [{
|
|
2343
|
+
type: Input
|
|
2344
|
+
}], buttonOneClick: [{
|
|
2345
|
+
type: Output
|
|
2346
|
+
}], isButtonTwoVisible: [{
|
|
2347
|
+
type: Input
|
|
2348
|
+
}], buttonTwoLabel: [{
|
|
2349
|
+
type: Input
|
|
2350
|
+
}], buttonTwoHasIcon: [{
|
|
2351
|
+
type: Input
|
|
2352
|
+
}], buttonTwoColor: [{
|
|
2353
|
+
type: Input
|
|
2354
|
+
}], buttonTwoIcon: [{
|
|
2355
|
+
type: Input
|
|
2356
|
+
}], isButtonTwoToggle: [{
|
|
2357
|
+
type: Input
|
|
2358
|
+
}], buttonTwoClick: [{
|
|
2359
|
+
type: Output
|
|
2360
|
+
}], isArrowToggle: [{
|
|
2361
|
+
type: Input
|
|
2362
|
+
}], table: [{
|
|
2363
|
+
type: ViewChild,
|
|
2364
|
+
args: ['dt', { static: false }]
|
|
2365
|
+
}], innerTableStyle: [{
|
|
2366
|
+
type: Input
|
|
2367
|
+
}], innerTableColumns: [{
|
|
2368
|
+
type: Input
|
|
2369
|
+
}], innerIsPaginatorVisible: [{
|
|
2370
|
+
type: Input
|
|
2371
|
+
}], innerTableRowCount: [{
|
|
2372
|
+
type: Input
|
|
2373
|
+
}], innerScrollable: [{
|
|
2374
|
+
type: Input
|
|
2375
|
+
}], innerScrollHeight: [{
|
|
2376
|
+
type: Input
|
|
2377
|
+
}], innerIsEditingTable: [{
|
|
2378
|
+
type: Input
|
|
2379
|
+
}], innerIsTableLoading: [{
|
|
2380
|
+
type: Input
|
|
2381
|
+
}], innerTableCaption: [{
|
|
2382
|
+
type: Input
|
|
2383
|
+
}], innerCaptionColorClass: [{
|
|
2384
|
+
type: Input
|
|
2385
|
+
}], innerIsCaptionButtonVisible: [{
|
|
2386
|
+
type: Input
|
|
2387
|
+
}], innerCaptionButtonLabel: [{
|
|
2388
|
+
type: Input
|
|
2389
|
+
}], innerCaptionButtonColor: [{
|
|
2390
|
+
type: Input
|
|
2391
|
+
}], innerCaptionButtonClicked: [{
|
|
2392
|
+
type: Output
|
|
2393
|
+
}], innerIsTableHeaderVisible: [{
|
|
2394
|
+
type: Input
|
|
2395
|
+
}], innerEmptyColumnWidth: [{
|
|
2396
|
+
type: Input
|
|
2397
|
+
}], innerToggleTableHeaderName: [{
|
|
2398
|
+
type: Input
|
|
2399
|
+
}], innerToggleWidth: [{
|
|
2400
|
+
type: Input
|
|
2401
|
+
}], innerToggleTwoTableHeaderName: [{
|
|
2402
|
+
type: Input
|
|
2403
|
+
}], innerToggleTwoWidth: [{
|
|
2404
|
+
type: Input
|
|
2405
|
+
}], innerToggleThreeTableHeaderName: [{
|
|
2406
|
+
type: Input
|
|
2407
|
+
}], innerToggleThreeWidth: [{
|
|
2408
|
+
type: Input
|
|
2409
|
+
}], innerToggleFourTableHeaderName: [{
|
|
2410
|
+
type: Input
|
|
2411
|
+
}], innerToggleFourWidth: [{
|
|
2412
|
+
type: Input
|
|
2413
|
+
}], innerFormGroup: [{
|
|
2414
|
+
type: Input
|
|
2415
|
+
}], innerType: [{
|
|
2416
|
+
type: Input
|
|
2417
|
+
}], innerFormStatus: [{
|
|
2418
|
+
type: Input
|
|
2419
|
+
}], innerIsButtonOneVisible: [{
|
|
2420
|
+
type: Input
|
|
2421
|
+
}], innerIsPlainTableIconButtonOne: [{
|
|
2422
|
+
type: Input
|
|
2423
|
+
}], innerButtonOneLabel: [{
|
|
2424
|
+
type: Input
|
|
2425
|
+
}], innerButtonOneHasIcon: [{
|
|
2426
|
+
type: Input
|
|
2427
|
+
}], innerButtonOneEditIcon: [{
|
|
2428
|
+
type: Input
|
|
2429
|
+
}], innerButtonOneSaveIcon: [{
|
|
2430
|
+
type: Input
|
|
2431
|
+
}], innerButtonOneColor: [{
|
|
2432
|
+
type: Input
|
|
2433
|
+
}], innerButtonOneIcon: [{
|
|
2434
|
+
type: Input
|
|
2435
|
+
}], innerButtonEditClick: [{
|
|
2436
|
+
type: Output
|
|
2437
|
+
}], innerButtonSaveClick: [{
|
|
2438
|
+
type: Output
|
|
2439
|
+
}], innerButtonOneClick: [{
|
|
2440
|
+
type: Output
|
|
2441
|
+
}], innerIsButtonTwoVisible: [{
|
|
2442
|
+
type: Input
|
|
2443
|
+
}], innerIsPlainTableIconButtonTwo: [{
|
|
2444
|
+
type: Input
|
|
2445
|
+
}], innerButtonTwoLabel: [{
|
|
2446
|
+
type: Input
|
|
2447
|
+
}], innerButtonTwoHasIcon: [{
|
|
2448
|
+
type: Input
|
|
2449
|
+
}], innerButtonTwoDeleteIcon: [{
|
|
2450
|
+
type: Input
|
|
2451
|
+
}], innerButtonTwoCancelIcon: [{
|
|
2452
|
+
type: Input
|
|
2453
|
+
}], innerButtonTwoColor: [{
|
|
2454
|
+
type: Input
|
|
2455
|
+
}], innerButtonTwoIcon: [{
|
|
2456
|
+
type: Input
|
|
2457
|
+
}], innerButtonDeleteClick: [{
|
|
2458
|
+
type: Output
|
|
2459
|
+
}], innerButtonTwoClick: [{
|
|
2460
|
+
type: Output
|
|
2461
|
+
}], innerIsDeactivateToggle: [{
|
|
2462
|
+
type: Input
|
|
2463
|
+
}], innerToggleSwitch: [{
|
|
2464
|
+
type: Output
|
|
2465
|
+
}], innerIsDeactivateToggleTwo: [{
|
|
2466
|
+
type: Input
|
|
2467
|
+
}], innerToggleTwoSwitch: [{
|
|
2468
|
+
type: Output
|
|
2469
|
+
}], innerIsDeactivateToggleThree: [{
|
|
2470
|
+
type: Input
|
|
2471
|
+
}], innerToggleThreeSwitch: [{
|
|
2472
|
+
type: Output
|
|
2473
|
+
}], innerIsDeactivateToggleFour: [{
|
|
2474
|
+
type: Input
|
|
2475
|
+
}], innerToggleFourSwitch: [{
|
|
2476
|
+
type: Output
|
|
2477
|
+
}] } });
|
|
2478
|
+
|
|
2479
|
+
class LoaderComponent {
|
|
2480
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2481
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: LoaderComponent, isStandalone: true, selector: "lib-loader", ngImport: i0, template: "<p-progressSpinner strokeWidth=\"5\" animationDuration=\"2.5s\"></p-progressSpinner>\r\n", styles: [":host ::ng-deep .p-progressspinner{width:35px;height:35px}:host ::ng-deep .p-progressspinner .p-progressspinner-spin .p-progressspinner-circle{stroke:#1b495a!important}\n"], dependencies: [{ kind: "component", type: ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }] });
|
|
2482
|
+
}
|
|
2483
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: LoaderComponent, decorators: [{
|
|
2484
|
+
type: Component,
|
|
2485
|
+
args: [{ selector: 'lib-loader', imports: [ProgressSpinner], template: "<p-progressSpinner strokeWidth=\"5\" animationDuration=\"2.5s\"></p-progressSpinner>\r\n", styles: [":host ::ng-deep .p-progressspinner{width:35px;height:35px}:host ::ng-deep .p-progressspinner .p-progressspinner-spin .p-progressspinner-circle{stroke:#1b495a!important}\n"] }]
|
|
2486
|
+
}] });
|
|
2487
|
+
|
|
2488
|
+
class AccordionComponent {
|
|
2489
|
+
isHeaderEditable = false;
|
|
2490
|
+
isAccordionDeletable = false;
|
|
2491
|
+
isAccordionCloneable = false;
|
|
2492
|
+
headerTitle;
|
|
2493
|
+
selected = false;
|
|
2494
|
+
icon;
|
|
2495
|
+
headerTitlePlaceholder;
|
|
2496
|
+
headerTitleEditable;
|
|
2497
|
+
group;
|
|
2498
|
+
controlName;
|
|
2499
|
+
name;
|
|
2500
|
+
canDisable = false;
|
|
2501
|
+
toggleLabel = 'Label';
|
|
2502
|
+
toggleControlName;
|
|
2503
|
+
clickEvent = new EventEmitter();
|
|
2504
|
+
clickToggleEvent = new EventEmitter();
|
|
2505
|
+
clickCloneEvent = new EventEmitter();
|
|
2506
|
+
stateOptions = [
|
|
2507
|
+
{ label: 'Ne', value: false },
|
|
2508
|
+
{ label: 'Da', value: true },
|
|
2509
|
+
];
|
|
2510
|
+
click(event) {
|
|
2511
|
+
this.clickEvent.emit(event);
|
|
2512
|
+
event.stopPropagation();
|
|
2513
|
+
}
|
|
2514
|
+
clickToggleButton(event) {
|
|
2515
|
+
this.clickToggleEvent.emit(event);
|
|
2516
|
+
event.stopPropagation();
|
|
2517
|
+
}
|
|
2518
|
+
clickCloneButton(event) {
|
|
2519
|
+
this.clickCloneEvent.emit(event);
|
|
2520
|
+
event.stopPropagation();
|
|
2521
|
+
}
|
|
2522
|
+
ButtonColor = ButtonColor;
|
|
2523
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2524
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: AccordionComponent, isStandalone: true, selector: "lib-accordion[headerTitle]", inputs: { isHeaderEditable: "isHeaderEditable", isAccordionDeletable: "isAccordionDeletable", isAccordionCloneable: "isAccordionCloneable", headerTitle: "headerTitle", selected: "selected", icon: "icon", headerTitlePlaceholder: "headerTitlePlaceholder", headerTitleEditable: "headerTitleEditable", group: "group", controlName: "controlName", name: "name", canDisable: "canDisable", toggleLabel: "toggleLabel", toggleControlName: "toggleControlName" }, outputs: { clickEvent: "clickEvent", clickToggleEvent: "clickToggleEvent", clickCloneEvent: "clickCloneEvent" }, ngImport: i0, template: "<p-accordion class=\"w-full\" [value]=\"selected ? 1 : 0\" [id]=\"headerTitle\">\r\n <p-accordion-panel [value]=\"1\">\r\n <p-accordion-header>\r\n <div class=\"flex justify-content-between align-items-center overflow-auto\">\r\n <ng-container>\r\n <div class=\"flex align-items-center\" *ngIf=\"!isHeaderEditable\">\r\n <i [ngClass]=\"icon\"></i>\r\n <span class=\"vertical-align-middle\">{{ headerTitle }}</span>\r\n </div>\r\n <div class=\"flex align-items-center\" *ngIf=\"isHeaderEditable\" [formGroup]=\"group\">\r\n <i [ngClass]=\"icon\"></i>\r\n <input type=\"text\" pInputText [formControlName]=\"controlName\" (click)=\"$event.stopPropagation()\"\r\n (keydown.space)=\"$event.stopPropagation()\"/>\r\n </div>\r\n <i class=\"pi pi-ellipsis-v controls-mobile\" (click)=\"controlsMenu.toggle($event)\"\r\n *ngIf=\"canDisable || isAccordionDeletable\"></i>\r\n <div class=\"controls-lg-screen\">\r\n <ng-container *ngIf=\"canDisable || isAccordionDeletable\" [ngTemplateOutlet]=\"controls\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </p-accordion-header>\r\n <p-accordion-content>\r\n <ng-content></ng-content>\r\n </p-accordion-content>\r\n </p-accordion-panel>\r\n</p-accordion>\r\n\r\n<p-popover #controlsMenu>\r\n <ng-container [ngTemplateOutlet]=\"smallerDevicesControls\"></ng-container>\r\n</p-popover>\r\n\r\n<ng-template #controls>\r\n <div class=\"controls\">\r\n <div class=\"flex align-items-center\">\r\n <form [formGroup]=\"group\" class=\"flex align-items-center ml-5\" *ngIf=\"canDisable\">\r\n <label class=\"mr-2\">{{ toggleLabel }}</label>\r\n <p-selectButton\r\n (click)=\"clickToggleButton($event)\"\r\n [options]=\"stateOptions\"\r\n [formControlName]=\"toggleControlName\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n ></p-selectButton>\r\n </form>\r\n <lib-button\r\n *ngIf=\"isAccordionCloneable\"\r\n class=\"ml-5 clone-button\"\r\n label=\"Kopiraj okence\"\r\n [hasIcon]=\"true\"\r\n icon=\"pi pi-clone\"\r\n (clickEvent)=\"clickCloneButton($event)\"\r\n [color]=\"ButtonColor.warning\"\r\n ></lib-button>\r\n </div>\r\n\r\n <lib-button\r\n *ngIf=\"isAccordionDeletable\"\r\n class=\"ml-5 delete-button\"\r\n label=\"Izbri\u0161i okence\"\r\n [hasIcon]=\"true\"\r\n icon=\"pi pi-trash\"\r\n (clickEvent)=\"click($event)\"\r\n [color]=\"ButtonColor.danger\"\r\n ></lib-button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #smallerDevicesControls>\r\n <div class=\"flex-column p-1\">\r\n <form [formGroup]=\"group\" class=\"flex align-items-center ml-5\" *ngIf=\"canDisable\">\r\n <label class=\"mr-2\">{{ toggleLabel }}</label>\r\n <p-selectButton\r\n (click)=\"clickToggleButton($event)\"\r\n [options]=\"stateOptions\"\r\n [formControlName]=\"toggleControlName\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n ></p-selectButton>\r\n </form>\r\n\r\n <div class=\"flex align-items-center mt-2\">\r\n <lib-button\r\n *ngIf=\"isAccordionCloneable\"\r\n class=\"clone-button\"\r\n label=\"Kopiraj okence\"\r\n [hasIcon]=\"true\"\r\n icon=\"pi pi-clone\"\r\n (clickEvent)=\"clickCloneButton($event)\"\r\n [color]=\"ButtonColor.warning\"\r\n ></lib-button>\r\n\r\n <lib-button\r\n *ngIf=\"isAccordionDeletable\"\r\n class=\"ml-2 delete-button\"\r\n label=\"Izbri\u0161i okence\"\r\n [hasIcon]=\"true\"\r\n icon=\"pi pi-trash\"\r\n (clickEvent)=\"click($event)\"\r\n [color]=\"ButtonColor.danger\"\r\n ></lib-button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [":host ::ng-deep .p-accordionpanel:not(.p-disabled).p-accordionpanel-active>.p-accordionheader{color:#fff!important;background-color:#3e7c94}:host ::ng-deep .p-accordion .p-accordionheader{background-color:#3e7c94;color:#fff}:host ::ng-deep .p-accordion .p-accordionheader:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-accordion .p-accordionheader:hover{background:#facd9c!important}:host ::ng-deep .p-accordion .p-accordionheader:not(.p-disabled).p-highlight .p-accordionheader-link{color:#fff}:host ::ng-deep .p-accordion .p-accordionheader .p-accordion-toggle-icon{margin-top:-8px;position:absolute;right:.5em;top:50%}:host ::ng-deep .p-accordion .p-accordionheader .delete-button{position:absolute;right:8em;top:50%;transform:translateY(-50%)}:host ::ng-deep .p-accordion .p-accordionheader .pi-chevron-right{transform:rotate(90deg)}:host ::ng-deep .p-accordion .p-accordionheader .pi-chevron-down{transform:rotate(180deg)}:host ::ng-deep .p-accordion .p-accordioncontent-content{margin-top:8px}@media screen and (max-width: 1260px){:host ::ng-deep .p-inputtext,:host ::ng-deep label{font-size:12px}:host ::ng-deep .delete-button .p-button,:host ::ng-deep .clone-button .p-button{font-size:12px}:host ::ng-deep .delete-button .p-button .p-button-label,:host ::ng-deep .clone-button .p-button .p-button-label{display:none}:host ::ng-deep .delete-button .p-button .p-button-icon,:host ::ng-deep .clone-button .p-button .p-button-icon{margin-left:0}}:host ::ng-deep .p-selectbutton .p-button{background:#fff;color:#3e7c94}@media screen and (max-width: 1260px){:host ::ng-deep .p-selectbutton .p-button{font-size:12px}}:host ::ng-deep .p-selectbutton .p-button.p-highlight{background:#ffa142;color:#fff}.controls{display:flex;align-items:center;justify-content:space-between}@media screen and (max-width: 1260px){.controls{flex-direction:column;justify-content:start;align-items:start}.controls form,.controls .delete-button{margin:0!important;padding:5px 15px!important}.controls form{border-bottom:1px solid #3E7C94}}.controls-mobile{display:none}@media screen and (max-width: 1260px){.controls-mobile{margin-left:15px;display:block}}.controls-lg-screen{display:block}@media screen and (max-width: 1260px){.controls-lg-screen{display:none}}\n"], dependencies: [{ kind: "component", type: Accordion, selector: "p-accordion", inputs: ["value", "multiple", "style", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "activeIndex", "headerAriaLevel"], outputs: ["valueChange", "activeIndexChange", "onClose", "onOpen"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i1$7.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i1$7.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i1$7.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "size", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["hasIcon", "label", "color", "icon", "iconPos", "disabled", "isLoading", "styleClass", "size", "accessibilityText", "buttonType", "isAccessible", "isSelected", "ariaControlsId", "isExpanded", "link", "isTextareaClear"], outputs: ["clickEvent"] }] });
|
|
2525
|
+
}
|
|
2526
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
2527
|
+
type: Component,
|
|
2528
|
+
args: [{ selector: 'lib-accordion[headerTitle]', imports: [
|
|
2529
|
+
Accordion,
|
|
2530
|
+
AccordionModule,
|
|
2531
|
+
NgIf,
|
|
2532
|
+
NgClass,
|
|
2533
|
+
FormsModule,
|
|
2534
|
+
ReactiveFormsModule,
|
|
2535
|
+
InputText,
|
|
2536
|
+
NgTemplateOutlet,
|
|
2537
|
+
PopoverModule,
|
|
2538
|
+
SelectButton,
|
|
2539
|
+
ButtonComponent,
|
|
2540
|
+
], template: "<p-accordion class=\"w-full\" [value]=\"selected ? 1 : 0\" [id]=\"headerTitle\">\r\n <p-accordion-panel [value]=\"1\">\r\n <p-accordion-header>\r\n <div class=\"flex justify-content-between align-items-center overflow-auto\">\r\n <ng-container>\r\n <div class=\"flex align-items-center\" *ngIf=\"!isHeaderEditable\">\r\n <i [ngClass]=\"icon\"></i>\r\n <span class=\"vertical-align-middle\">{{ headerTitle }}</span>\r\n </div>\r\n <div class=\"flex align-items-center\" *ngIf=\"isHeaderEditable\" [formGroup]=\"group\">\r\n <i [ngClass]=\"icon\"></i>\r\n <input type=\"text\" pInputText [formControlName]=\"controlName\" (click)=\"$event.stopPropagation()\"\r\n (keydown.space)=\"$event.stopPropagation()\"/>\r\n </div>\r\n <i class=\"pi pi-ellipsis-v controls-mobile\" (click)=\"controlsMenu.toggle($event)\"\r\n *ngIf=\"canDisable || isAccordionDeletable\"></i>\r\n <div class=\"controls-lg-screen\">\r\n <ng-container *ngIf=\"canDisable || isAccordionDeletable\" [ngTemplateOutlet]=\"controls\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </p-accordion-header>\r\n <p-accordion-content>\r\n <ng-content></ng-content>\r\n </p-accordion-content>\r\n </p-accordion-panel>\r\n</p-accordion>\r\n\r\n<p-popover #controlsMenu>\r\n <ng-container [ngTemplateOutlet]=\"smallerDevicesControls\"></ng-container>\r\n</p-popover>\r\n\r\n<ng-template #controls>\r\n <div class=\"controls\">\r\n <div class=\"flex align-items-center\">\r\n <form [formGroup]=\"group\" class=\"flex align-items-center ml-5\" *ngIf=\"canDisable\">\r\n <label class=\"mr-2\">{{ toggleLabel }}</label>\r\n <p-selectButton\r\n (click)=\"clickToggleButton($event)\"\r\n [options]=\"stateOptions\"\r\n [formControlName]=\"toggleControlName\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n ></p-selectButton>\r\n </form>\r\n <lib-button\r\n *ngIf=\"isAccordionCloneable\"\r\n class=\"ml-5 clone-button\"\r\n label=\"Kopiraj okence\"\r\n [hasIcon]=\"true\"\r\n icon=\"pi pi-clone\"\r\n (clickEvent)=\"clickCloneButton($event)\"\r\n [color]=\"ButtonColor.warning\"\r\n ></lib-button>\r\n </div>\r\n\r\n <lib-button\r\n *ngIf=\"isAccordionDeletable\"\r\n class=\"ml-5 delete-button\"\r\n label=\"Izbri\u0161i okence\"\r\n [hasIcon]=\"true\"\r\n icon=\"pi pi-trash\"\r\n (clickEvent)=\"click($event)\"\r\n [color]=\"ButtonColor.danger\"\r\n ></lib-button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #smallerDevicesControls>\r\n <div class=\"flex-column p-1\">\r\n <form [formGroup]=\"group\" class=\"flex align-items-center ml-5\" *ngIf=\"canDisable\">\r\n <label class=\"mr-2\">{{ toggleLabel }}</label>\r\n <p-selectButton\r\n (click)=\"clickToggleButton($event)\"\r\n [options]=\"stateOptions\"\r\n [formControlName]=\"toggleControlName\"\r\n optionLabel=\"label\"\r\n optionValue=\"value\"\r\n ></p-selectButton>\r\n </form>\r\n\r\n <div class=\"flex align-items-center mt-2\">\r\n <lib-button\r\n *ngIf=\"isAccordionCloneable\"\r\n class=\"clone-button\"\r\n label=\"Kopiraj okence\"\r\n [hasIcon]=\"true\"\r\n icon=\"pi pi-clone\"\r\n (clickEvent)=\"clickCloneButton($event)\"\r\n [color]=\"ButtonColor.warning\"\r\n ></lib-button>\r\n\r\n <lib-button\r\n *ngIf=\"isAccordionDeletable\"\r\n class=\"ml-2 delete-button\"\r\n label=\"Izbri\u0161i okence\"\r\n [hasIcon]=\"true\"\r\n icon=\"pi pi-trash\"\r\n (clickEvent)=\"click($event)\"\r\n [color]=\"ButtonColor.danger\"\r\n ></lib-button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [":host ::ng-deep .p-accordionpanel:not(.p-disabled).p-accordionpanel-active>.p-accordionheader{color:#fff!important;background-color:#3e7c94}:host ::ng-deep .p-accordion .p-accordionheader{background-color:#3e7c94;color:#fff}:host ::ng-deep .p-accordion .p-accordionheader:focus{box-shadow:0 0 2px 3px #ffa142!important}:host ::ng-deep .p-accordion .p-accordionheader:hover{background:#facd9c!important}:host ::ng-deep .p-accordion .p-accordionheader:not(.p-disabled).p-highlight .p-accordionheader-link{color:#fff}:host ::ng-deep .p-accordion .p-accordionheader .p-accordion-toggle-icon{margin-top:-8px;position:absolute;right:.5em;top:50%}:host ::ng-deep .p-accordion .p-accordionheader .delete-button{position:absolute;right:8em;top:50%;transform:translateY(-50%)}:host ::ng-deep .p-accordion .p-accordionheader .pi-chevron-right{transform:rotate(90deg)}:host ::ng-deep .p-accordion .p-accordionheader .pi-chevron-down{transform:rotate(180deg)}:host ::ng-deep .p-accordion .p-accordioncontent-content{margin-top:8px}@media screen and (max-width: 1260px){:host ::ng-deep .p-inputtext,:host ::ng-deep label{font-size:12px}:host ::ng-deep .delete-button .p-button,:host ::ng-deep .clone-button .p-button{font-size:12px}:host ::ng-deep .delete-button .p-button .p-button-label,:host ::ng-deep .clone-button .p-button .p-button-label{display:none}:host ::ng-deep .delete-button .p-button .p-button-icon,:host ::ng-deep .clone-button .p-button .p-button-icon{margin-left:0}}:host ::ng-deep .p-selectbutton .p-button{background:#fff;color:#3e7c94}@media screen and (max-width: 1260px){:host ::ng-deep .p-selectbutton .p-button{font-size:12px}}:host ::ng-deep .p-selectbutton .p-button.p-highlight{background:#ffa142;color:#fff}.controls{display:flex;align-items:center;justify-content:space-between}@media screen and (max-width: 1260px){.controls{flex-direction:column;justify-content:start;align-items:start}.controls form,.controls .delete-button{margin:0!important;padding:5px 15px!important}.controls form{border-bottom:1px solid #3E7C94}}.controls-mobile{display:none}@media screen and (max-width: 1260px){.controls-mobile{margin-left:15px;display:block}}.controls-lg-screen{display:block}@media screen and (max-width: 1260px){.controls-lg-screen{display:none}}\n"] }]
|
|
2541
|
+
}], propDecorators: { isHeaderEditable: [{
|
|
2542
|
+
type: Input
|
|
2543
|
+
}], isAccordionDeletable: [{
|
|
2544
|
+
type: Input
|
|
2545
|
+
}], isAccordionCloneable: [{
|
|
2546
|
+
type: Input
|
|
2547
|
+
}], headerTitle: [{
|
|
2548
|
+
type: Input
|
|
2549
|
+
}], selected: [{
|
|
2550
|
+
type: Input
|
|
2551
|
+
}], icon: [{
|
|
2552
|
+
type: Input
|
|
2553
|
+
}], headerTitlePlaceholder: [{
|
|
2554
|
+
type: Input
|
|
2555
|
+
}], headerTitleEditable: [{
|
|
2556
|
+
type: Input
|
|
2557
|
+
}], group: [{
|
|
2558
|
+
type: Input
|
|
2559
|
+
}], controlName: [{
|
|
2560
|
+
type: Input
|
|
2561
|
+
}], name: [{
|
|
2562
|
+
type: Input
|
|
2563
|
+
}], canDisable: [{
|
|
2564
|
+
type: Input
|
|
2565
|
+
}], toggleLabel: [{
|
|
2566
|
+
type: Input
|
|
2567
|
+
}], toggleControlName: [{
|
|
2568
|
+
type: Input
|
|
2569
|
+
}], clickEvent: [{
|
|
2570
|
+
type: Output
|
|
2571
|
+
}], clickToggleEvent: [{
|
|
2572
|
+
type: Output
|
|
2573
|
+
}], clickCloneEvent: [{
|
|
2574
|
+
type: Output
|
|
2575
|
+
}] } });
|
|
2576
|
+
|
|
2577
|
+
class ProgressBarComponent {
|
|
2578
|
+
value;
|
|
2579
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2580
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ProgressBarComponent, isStandalone: true, selector: "lib-progress-bar[value]", inputs: { value: "value" }, ngImport: i0, template: "<p-progressBar [value]=\"value\"></p-progressBar>\r\n", styles: [":host ::ng-deep .p-progressbar{background:#fff}\n"], dependencies: [{ kind: "component", type: ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "style", "unit", "mode", "color"] }] });
|
|
2581
|
+
}
|
|
2582
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
2583
|
+
type: Component,
|
|
2584
|
+
args: [{ selector: 'lib-progress-bar[value]', imports: [ProgressBar], template: "<p-progressBar [value]=\"value\"></p-progressBar>\r\n", styles: [":host ::ng-deep .p-progressbar{background:#fff}\n"] }]
|
|
2585
|
+
}], propDecorators: { value: [{
|
|
2586
|
+
type: Input
|
|
2587
|
+
}] } });
|
|
2588
|
+
|
|
2589
|
+
class PicklistComponent {
|
|
2590
|
+
// Dynamic class
|
|
2591
|
+
primaryPickList = 'primary-pick-list';
|
|
2592
|
+
sourceData;
|
|
2593
|
+
targetData;
|
|
2594
|
+
name;
|
|
2595
|
+
sourceFilterPlaceholder = 'Iščite...';
|
|
2596
|
+
targetFilterPlaceholder = 'Iščite...';
|
|
2597
|
+
sourceHeader = 'Na voljo';
|
|
2598
|
+
targetHeader = 'Izbrano';
|
|
2599
|
+
style = { height: '15rem' };
|
|
2600
|
+
dragdrop = true;
|
|
2601
|
+
responsive = true;
|
|
2602
|
+
showSourceControls = true;
|
|
2603
|
+
showTargetControls = true;
|
|
2604
|
+
moveToSourceClicked = new EventEmitter();
|
|
2605
|
+
moveToTargetClicked = new EventEmitter();
|
|
2606
|
+
moveToSourceAllClicked = new EventEmitter();
|
|
2607
|
+
moveToTargetAllClicked = new EventEmitter();
|
|
2608
|
+
// Custom headers
|
|
2609
|
+
isCustomSourceHeader = false;
|
|
2610
|
+
isCustomTargetHeader = false;
|
|
2611
|
+
sourceLength;
|
|
2612
|
+
targetLength;
|
|
2613
|
+
moveToSource(event) {
|
|
2614
|
+
this.moveToSourceClicked.emit(event);
|
|
2615
|
+
}
|
|
2616
|
+
moveToTarget(event) {
|
|
2617
|
+
this.moveToTargetClicked.emit(event);
|
|
2618
|
+
}
|
|
2619
|
+
moveAllToSource(event) {
|
|
2620
|
+
this.moveToSourceAllClicked.emit(event);
|
|
2621
|
+
}
|
|
2622
|
+
moveAllToTarget(event) {
|
|
2623
|
+
this.moveToTargetAllClicked.emit(event);
|
|
2624
|
+
}
|
|
2625
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PicklistComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2626
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: PicklistComponent, isStandalone: true, selector: "lib-picklist[sourceData][targetData][name]", inputs: { primaryPickList: "primaryPickList", sourceData: "sourceData", targetData: "targetData", name: "name", sourceFilterPlaceholder: "sourceFilterPlaceholder", targetFilterPlaceholder: "targetFilterPlaceholder", sourceHeader: "sourceHeader", targetHeader: "targetHeader", style: "style", dragdrop: "dragdrop", responsive: "responsive", showSourceControls: "showSourceControls", showTargetControls: "showTargetControls", isCustomSourceHeader: "isCustomSourceHeader", isCustomTargetHeader: "isCustomTargetHeader", sourceLength: "sourceLength", targetLength: "targetLength" }, outputs: { moveToSourceClicked: "moveToSourceClicked", moveToTargetClicked: "moveToTargetClicked", moveToSourceAllClicked: "moveToSourceAllClicked", moveToTargetAllClicked: "moveToTargetAllClicked" }, ngImport: i0, template: "<p-picklist\r\n [source]=\"sourceData\"\r\n [target]=\"targetData\"\r\n [sourceHeader]=\"sourceHeader\"\r\n [targetHeader]=\"targetHeader\"\r\n [dragdrop]=\"dragdrop\"\r\n [responsive]=\"responsive\"\r\n [sourceStyle]=\"style\"\r\n [showSourceControls]=\"showSourceControls\"\r\n [showTargetControls]=\"showTargetControls\"\r\n [targetStyle]=\"style\"\r\n [filterBy]=\"name\"\r\n [sourceFilterPlaceholder]=\"sourceFilterPlaceholder\"\r\n [targetFilterPlaceholder]=\"targetFilterPlaceholder\"\r\n breakpoint=\"1400px\"\r\n (onMoveToSource)=\"moveToSource($event)\"\r\n (onMoveToTarget)=\"moveToTarget($event)\"\r\n (onMoveAllToSource)=\"moveAllToSource($event)\"\r\n (onMoveAllToTarget)=\"moveAllToTarget($event)\"\r\n [class]=\"primaryPickList\"\r\n>\r\n <ng-template let-product pTemplate=\"item\">\r\n <div class=\"flex flex-wrap p-2 align-items-center gap-3\">\r\n <div class=\"flex-1 flex flex-column gap-2\">\r\n <span class=\"font-bold\">{{ product[name] }}</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- Header template for source list -->\r\n <ng-template let-product pTemplate=\"sourceHeader\" *ngIf=\"isCustomSourceHeader\">\r\n <div class=\"custom-picklist-header flex align-items-center justify-content-between\">\r\n <span>{{ sourceHeader }}</span>\r\n <span>{{ sourceLength }}</span>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- Header template for target list -->\r\n <ng-template let-product pTemplate=\"targetHeader\" *ngIf=\"isCustomTargetHeader\">\r\n <div class=\"custom-picklist-header flex align-items-center justify-content-between\">\r\n <span>{{ targetHeader }}</span>\r\n <span>{{ targetLength }}</span>\r\n </div>\r\n </ng-template>\r\n</p-picklist>\r\n", styles: [":host ::ng-deep .primary-pick-list .p-picklist .p-picklist-header{background:#3e7c94}:host ::ng-deep .primary-pick-list .p-picklist .p-picklist-header .p-picklist-title{color:#fff}:host ::ng-deep .disabled-pick-list .p-picklist .p-picklist-header{background:#6d7375}:host ::ng-deep .disabled-pick-list .p-picklist .p-picklist-header .p-picklist-title{color:#fff}.custom-picklist-header{background:#3e7c94;color:#fff;padding:0 10px;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: PickListModule }, { kind: "component", type: i1$8.PickList, selector: "p-pickList, p-picklist, p-pick-list", inputs: ["source", "target", "sourceHeader", "tabindex", "rightButtonAriaLabel", "leftButtonAriaLabel", "allRightButtonAriaLabel", "allLeftButtonAriaLabel", "upButtonAriaLabel", "downButtonAriaLabel", "topButtonAriaLabel", "bottomButtonAriaLabel", "targetHeader", "responsive", "filterBy", "filterLocale", "trackBy", "sourceTrackBy", "targetTrackBy", "showSourceFilter", "showTargetFilter", "metaKeySelection", "dragdrop", "style", "styleClass", "sourceStyle", "targetStyle", "showSourceControls", "showTargetControls", "sourceFilterPlaceholder", "targetFilterPlaceholder", "disabled", "sourceOptionDisabled", "targetOptionDisabled", "ariaSourceFilterLabel", "ariaTargetFilterLabel", "filterMatchMode", "stripedRows", "keepSelection", "scrollHeight", "autoOptionFocus", "buttonProps", "moveUpButtonProps", "moveTopButtonProps", "moveDownButtonProps", "moveBottomButtonProps", "moveToTargetProps", "moveAllToTargetProps", "moveToSourceProps", "moveAllToSourceProps", "breakpoint"], outputs: ["onMoveToSource", "onMoveAllToSource", "onMoveAllToTarget", "onMoveToTarget", "onSourceReorder", "onTargetReorder", "onSourceSelect", "onTargetSelect", "onSourceFilter", "onTargetFilter", "onFocus", "onBlur"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
2627
|
+
}
|
|
2628
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: PicklistComponent, decorators: [{
|
|
2629
|
+
type: Component,
|
|
2630
|
+
args: [{ selector: 'lib-picklist[sourceData][targetData][name]', imports: [
|
|
2631
|
+
PickListModule,
|
|
2632
|
+
PrimeTemplate,
|
|
2633
|
+
NgIf,
|
|
2634
|
+
], template: "<p-picklist\r\n [source]=\"sourceData\"\r\n [target]=\"targetData\"\r\n [sourceHeader]=\"sourceHeader\"\r\n [targetHeader]=\"targetHeader\"\r\n [dragdrop]=\"dragdrop\"\r\n [responsive]=\"responsive\"\r\n [sourceStyle]=\"style\"\r\n [showSourceControls]=\"showSourceControls\"\r\n [showTargetControls]=\"showTargetControls\"\r\n [targetStyle]=\"style\"\r\n [filterBy]=\"name\"\r\n [sourceFilterPlaceholder]=\"sourceFilterPlaceholder\"\r\n [targetFilterPlaceholder]=\"targetFilterPlaceholder\"\r\n breakpoint=\"1400px\"\r\n (onMoveToSource)=\"moveToSource($event)\"\r\n (onMoveToTarget)=\"moveToTarget($event)\"\r\n (onMoveAllToSource)=\"moveAllToSource($event)\"\r\n (onMoveAllToTarget)=\"moveAllToTarget($event)\"\r\n [class]=\"primaryPickList\"\r\n>\r\n <ng-template let-product pTemplate=\"item\">\r\n <div class=\"flex flex-wrap p-2 align-items-center gap-3\">\r\n <div class=\"flex-1 flex flex-column gap-2\">\r\n <span class=\"font-bold\">{{ product[name] }}</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- Header template for source list -->\r\n <ng-template let-product pTemplate=\"sourceHeader\" *ngIf=\"isCustomSourceHeader\">\r\n <div class=\"custom-picklist-header flex align-items-center justify-content-between\">\r\n <span>{{ sourceHeader }}</span>\r\n <span>{{ sourceLength }}</span>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- Header template for target list -->\r\n <ng-template let-product pTemplate=\"targetHeader\" *ngIf=\"isCustomTargetHeader\">\r\n <div class=\"custom-picklist-header flex align-items-center justify-content-between\">\r\n <span>{{ targetHeader }}</span>\r\n <span>{{ targetLength }}</span>\r\n </div>\r\n </ng-template>\r\n</p-picklist>\r\n", styles: [":host ::ng-deep .primary-pick-list .p-picklist .p-picklist-header{background:#3e7c94}:host ::ng-deep .primary-pick-list .p-picklist .p-picklist-header .p-picklist-title{color:#fff}:host ::ng-deep .disabled-pick-list .p-picklist .p-picklist-header{background:#6d7375}:host ::ng-deep .disabled-pick-list .p-picklist .p-picklist-header .p-picklist-title{color:#fff}.custom-picklist-header{background:#3e7c94;color:#fff;padding:0 10px;font-weight:600}\n"] }]
|
|
2635
|
+
}], propDecorators: { primaryPickList: [{
|
|
2636
|
+
type: Input
|
|
2637
|
+
}], sourceData: [{
|
|
2638
|
+
type: Input
|
|
2639
|
+
}], targetData: [{
|
|
2640
|
+
type: Input
|
|
2641
|
+
}], name: [{
|
|
2642
|
+
type: Input
|
|
2643
|
+
}], sourceFilterPlaceholder: [{
|
|
2644
|
+
type: Input
|
|
2645
|
+
}], targetFilterPlaceholder: [{
|
|
2646
|
+
type: Input
|
|
2647
|
+
}], sourceHeader: [{
|
|
2648
|
+
type: Input
|
|
2649
|
+
}], targetHeader: [{
|
|
2650
|
+
type: Input
|
|
2651
|
+
}], style: [{
|
|
2652
|
+
type: Input
|
|
2653
|
+
}], dragdrop: [{
|
|
2654
|
+
type: Input
|
|
2655
|
+
}], responsive: [{
|
|
2656
|
+
type: Input
|
|
2657
|
+
}], showSourceControls: [{
|
|
2658
|
+
type: Input
|
|
2659
|
+
}], showTargetControls: [{
|
|
2660
|
+
type: Input
|
|
2661
|
+
}], moveToSourceClicked: [{
|
|
2662
|
+
type: Output
|
|
2663
|
+
}], moveToTargetClicked: [{
|
|
2664
|
+
type: Output
|
|
2665
|
+
}], moveToSourceAllClicked: [{
|
|
2666
|
+
type: Output
|
|
2667
|
+
}], moveToTargetAllClicked: [{
|
|
2668
|
+
type: Output
|
|
2669
|
+
}], isCustomSourceHeader: [{
|
|
2670
|
+
type: Input
|
|
2671
|
+
}], isCustomTargetHeader: [{
|
|
2672
|
+
type: Input
|
|
2673
|
+
}], sourceLength: [{
|
|
2674
|
+
type: Input
|
|
2675
|
+
}], targetLength: [{
|
|
2676
|
+
type: Input
|
|
2677
|
+
}] } });
|
|
2678
|
+
|
|
2679
|
+
class CardComponent {
|
|
2680
|
+
title;
|
|
2681
|
+
cardBody;
|
|
2682
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2683
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: CardComponent, isStandalone: true, selector: "lib-card", inputs: { title: "title", cardBody: "cardBody" }, ngImport: i0, template: "<p-card header=\"{{ title }}\">\r\n <p class=\"m-0 flex align-items-center\"><i class=\"pi pi-exclamation-triangle mr-3\"></i>{{ cardBody }}</p>\r\n</p-card>\r\n", styles: [":host ::ng-deep .p-card{background:#facd9c;color:#000;font-weight:700}:host ::ng-deep .p-card .p-card-body{padding:0 15px}\n"], dependencies: [{ kind: "component", type: Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }] });
|
|
2684
|
+
}
|
|
2685
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: CardComponent, decorators: [{
|
|
2686
|
+
type: Component,
|
|
2687
|
+
args: [{ selector: 'lib-card', imports: [Card], template: "<p-card header=\"{{ title }}\">\r\n <p class=\"m-0 flex align-items-center\"><i class=\"pi pi-exclamation-triangle mr-3\"></i>{{ cardBody }}</p>\r\n</p-card>\r\n", styles: [":host ::ng-deep .p-card{background:#facd9c;color:#000;font-weight:700}:host ::ng-deep .p-card .p-card-body{padding:0 15px}\n"] }]
|
|
2688
|
+
}], propDecorators: { title: [{
|
|
2689
|
+
type: Input
|
|
2690
|
+
}], cardBody: [{
|
|
2691
|
+
type: Input
|
|
2692
|
+
}] } });
|
|
2693
|
+
|
|
2694
|
+
class InputMaskComponent {
|
|
2695
|
+
TooltipHoverEventEnum = TooltipHoverEventEnum;
|
|
2696
|
+
_isTooltipVisible;
|
|
2697
|
+
name;
|
|
2698
|
+
type = InputType.text;
|
|
2699
|
+
label;
|
|
2700
|
+
placeholder;
|
|
2701
|
+
accessibilityText = '';
|
|
2702
|
+
group;
|
|
2703
|
+
controlName;
|
|
2704
|
+
isRequired = true;
|
|
2705
|
+
tooltipPosition = TooltipPosition.right;
|
|
2706
|
+
tooltipText = '';
|
|
2707
|
+
formStatus;
|
|
2708
|
+
groupError = false;
|
|
2709
|
+
hasGap = true;
|
|
2710
|
+
mask;
|
|
2711
|
+
ngOnInit() {
|
|
2712
|
+
this._isTooltipVisible = !!this.tooltipText;
|
|
2713
|
+
}
|
|
2714
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: InputMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2715
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: InputMaskComponent, isStandalone: true, selector: "lib-input-mask", inputs: { name: "name", type: "type", label: "label", placeholder: "placeholder", accessibilityText: "accessibilityText", group: "group", controlName: "controlName", isRequired: "isRequired", tooltipPosition: "tooltipPosition", tooltipText: "tooltipText", formStatus: "formStatus", groupError: "groupError", hasGap: "hasGap", mask: "mask" }, ngImport: i0, template: "<div class=\"flex flex-column\" [formGroup]=\"group\" [ngClass]=\"{ 'gap-1': hasGap }\">\r\n <div class=\"flex\">\r\n <label [for]='name' class=\"mr-2\">\r\n {{label}}<span class=\"required\" aria-label=\"Is required filed\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <lib-tooltip\r\n *ngIf=\"_isTooltipVisible\"\r\n [position]=\"tooltipPosition\"\r\n [text]=\"tooltipText!\"\r\n ></lib-tooltip>\r\n </div>\r\n <p-inputMask\r\n [inputId]=\"name\"\r\n [formControlName]=\"controlName\"\r\n [mask]=\"mask\"\r\n [placeholder]='placeholder'\r\n [attr.aria-label]=\"accessibilityText\"\r\n [ngClass]=\"{ 'ng-dirty ng-invalid': (group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered)) || groupError }\"\r\n [attr.aria-describedby]=\"name + 'Error'\"\r\n [attr.aria-invalid]=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered)) || groupError\"\r\n [attr.aria-required]=\"isRequired\"\r\n ></p-inputMask>\r\n</div>\r\n<lib-error\r\n *ngIf=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered)\"\r\n [hasError]=\"group.get(controlName)!.errors\"\r\n [isTouched]=\"group.get(controlName)!.touched\"\r\n [isSubmitTriggered]=\"formStatus!.isSubmitTriggered!\"\r\n [hasGroupError]=\"groupError\"\r\n [errorId]=\"name+'Error'\"\r\n></lib-error>\r\n", styles: [":host ::ng-deep .p-inputtext{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TooltipComponent, selector: " lib-tooltip", inputs: ["icon", "htmlParser", "text", "position", "tooltipEvent", "autoHide", "htmlParse"] }, { kind: "component", type: InputMask, selector: "p-inputmask, p-inputMask, p-input-mask", inputs: ["type", "slotChar", "autoClear", "showClear", "style", "inputId", "styleClass", "placeholder", "size", "maxlength", "tabindex", "title", "variant", "ariaLabel", "ariaLabelledBy", "ariaRequired", "disabled", "readonly", "unmask", "name", "required", "characterPattern", "autofocus", "autoFocus", "autocomplete", "keepBuffer", "mask"], outputs: ["onComplete", "onFocus", "onBlur", "onInput", "onKeydown", "onClear"] }, { kind: "component", type: ErrorComponent, selector: "lib-error", inputs: ["hasError", "isTouched", "isSubmitTriggered", "isNestedFormSubmit", "isDirty", "isRequired", "hasGroupError", "errorId"] }] });
|
|
2716
|
+
}
|
|
2717
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: InputMaskComponent, decorators: [{
|
|
2718
|
+
type: Component,
|
|
2719
|
+
args: [{ selector: 'lib-input-mask', imports: [
|
|
2720
|
+
FormsModule,
|
|
2721
|
+
ReactiveFormsModule,
|
|
2722
|
+
NgClass,
|
|
2723
|
+
NgIf,
|
|
2724
|
+
TooltipComponent,
|
|
2725
|
+
InputMask,
|
|
2726
|
+
ErrorComponent,
|
|
2727
|
+
], template: "<div class=\"flex flex-column\" [formGroup]=\"group\" [ngClass]=\"{ 'gap-1': hasGap }\">\r\n <div class=\"flex\">\r\n <label [for]='name' class=\"mr-2\">\r\n {{label}}<span class=\"required\" aria-label=\"Is required filed\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <lib-tooltip\r\n *ngIf=\"_isTooltipVisible\"\r\n [position]=\"tooltipPosition\"\r\n [text]=\"tooltipText!\"\r\n ></lib-tooltip>\r\n </div>\r\n <p-inputMask\r\n [inputId]=\"name\"\r\n [formControlName]=\"controlName\"\r\n [mask]=\"mask\"\r\n [placeholder]='placeholder'\r\n [attr.aria-label]=\"accessibilityText\"\r\n [ngClass]=\"{ 'ng-dirty ng-invalid': (group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered)) || groupError }\"\r\n [attr.aria-describedby]=\"name + 'Error'\"\r\n [attr.aria-invalid]=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched || formStatus!.isSubmitTriggered)) || groupError\"\r\n [attr.aria-required]=\"isRequired\"\r\n ></p-inputMask>\r\n</div>\r\n<lib-error\r\n *ngIf=\"(group.get(controlName)!.errors && (group.get(controlName)!.touched) || formStatus!.isSubmitTriggered)\"\r\n [hasError]=\"group.get(controlName)!.errors\"\r\n [isTouched]=\"group.get(controlName)!.touched\"\r\n [isSubmitTriggered]=\"formStatus!.isSubmitTriggered!\"\r\n [hasGroupError]=\"groupError\"\r\n [errorId]=\"name+'Error'\"\r\n></lib-error>\r\n", styles: [":host ::ng-deep .p-inputtext{width:100%}\n"] }]
|
|
2728
|
+
}], propDecorators: { name: [{
|
|
2729
|
+
type: Input
|
|
2730
|
+
}], type: [{
|
|
2731
|
+
type: Input
|
|
2732
|
+
}], label: [{
|
|
2733
|
+
type: Input
|
|
2734
|
+
}], placeholder: [{
|
|
2735
|
+
type: Input
|
|
2736
|
+
}], accessibilityText: [{
|
|
2737
|
+
type: Input
|
|
2738
|
+
}], group: [{
|
|
2739
|
+
type: Input
|
|
2740
|
+
}], controlName: [{
|
|
2741
|
+
type: Input
|
|
2742
|
+
}], isRequired: [{
|
|
2743
|
+
type: Input
|
|
2744
|
+
}], tooltipPosition: [{
|
|
2745
|
+
type: Input
|
|
2746
|
+
}], tooltipText: [{
|
|
2747
|
+
type: Input
|
|
2748
|
+
}], formStatus: [{
|
|
2749
|
+
type: Input
|
|
2750
|
+
}], groupError: [{
|
|
2751
|
+
type: Input
|
|
2752
|
+
}], hasGap: [{
|
|
2753
|
+
type: Input
|
|
2754
|
+
}], mask: [{
|
|
2755
|
+
type: Input
|
|
2756
|
+
}] } });
|
|
2757
|
+
|
|
2758
|
+
class FilterHeaderComponent {
|
|
2759
|
+
filterItems = [];
|
|
2760
|
+
constructor() { }
|
|
2761
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FilterHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2762
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: FilterHeaderComponent, isStandalone: true, selector: "app-filter-header", inputs: { filterItems: "filterItems" }, ngImport: i0, template: "<!-- app.component.html -->\r\n\r\n<p-menubar class=\"accordion_menubar \">\r\n <ng-template pTemplate=\"start\">\r\n <div class=\"filter-chips\" >\r\n <p-chip\r\n *ngFor=\"let item of filterItems\"\r\n [label]=\"item\"\r\n styleClass=\"filter-chip\">\r\n </p-chip>\r\n </div>\r\n </ng-template>\r\n</p-menubar>\r\n", styles: [".accordion_menubar{border:none!important}:host ::ng-deep .p-menubar{border:none;width:auto}:host ::ng-deep .p-accordion .p-accordioncontent{max-height:260px}.date__fields{margin-top:1.5rem;display:flex;flex-flow:row;flex-wrap:wrap;justify-content:space-between;gap:.5rem;margin-bottom:1rem}.date__fields label{order:1;padding:.5rem}.date__fields .date-field :deep(.lib-datepicker),.date__fields .date-field :deep(.lib-datepicker input){display:flex;order:2;flex-direction:row;margin-bottom:1rem}.grid_container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:10rem}.grid_container .column :deep(.lib-dropdown){width:100%;height:45px}.grid_container .column :deep(.lib-dropdown) .lib-dropdown-label{padding:12px;line-height:21px}.grid_container .column :deep(.lib-dropdown) .lib-dropdown-trigger{width:45px;height:100%}@media screen and (min-width: 768px){.filter-accordion .date_fields{grid-template-columns:repeat(2,1fr)}}@media screen and (min-width: 1200px){.filter-accordion .date_fields{grid-template-columns:repeat(4,1fr)}.filter-accordion .grid_container{grid-template-columns:repeat(3,1fr)}}:host ::ng-deep .filter-chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem}:host ::ng-deep .filter-chips .p-chip{background:#f0f0f0;padding:.5rem}:host ::ng-deep .filter-chips .p-chip .p-chip-remove-icon{color:#666;margin-left:.5rem;cursor:pointer}:host ::ng-deep .filter-chips .p-chip .p-chip-remove-icon:hover{color:#333}:host ::ng-deep .filter-chips .p-chip .filter-value{margin-left:.5rem;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MenubarModule }, { kind: "component", type: i2$4.Menubar, selector: "p-menubar", inputs: ["model", "style", "styleClass", "autoZIndex", "baseZIndex", "autoDisplay", "autoHide", "breakpoint", "autoHideDelay", "id", "ariaLabel", "ariaLabelledBy"], outputs: ["onFocus", "onBlur"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i4.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }] });
|
|
2763
|
+
}
|
|
2764
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FilterHeaderComponent, decorators: [{
|
|
2765
|
+
type: Component,
|
|
2766
|
+
args: [{ selector: 'app-filter-header', imports: [
|
|
2767
|
+
InputTextModule,
|
|
2768
|
+
FormsModule,
|
|
2769
|
+
ReactiveFormsModule,
|
|
2770
|
+
CommonModule,
|
|
2771
|
+
MenubarModule,
|
|
2772
|
+
ChipModule,
|
|
2773
|
+
], template: "<!-- app.component.html -->\r\n\r\n<p-menubar class=\"accordion_menubar \">\r\n <ng-template pTemplate=\"start\">\r\n <div class=\"filter-chips\" >\r\n <p-chip\r\n *ngFor=\"let item of filterItems\"\r\n [label]=\"item\"\r\n styleClass=\"filter-chip\">\r\n </p-chip>\r\n </div>\r\n </ng-template>\r\n</p-menubar>\r\n", styles: [".accordion_menubar{border:none!important}:host ::ng-deep .p-menubar{border:none;width:auto}:host ::ng-deep .p-accordion .p-accordioncontent{max-height:260px}.date__fields{margin-top:1.5rem;display:flex;flex-flow:row;flex-wrap:wrap;justify-content:space-between;gap:.5rem;margin-bottom:1rem}.date__fields label{order:1;padding:.5rem}.date__fields .date-field :deep(.lib-datepicker),.date__fields .date-field :deep(.lib-datepicker input){display:flex;order:2;flex-direction:row;margin-bottom:1rem}.grid_container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:10rem}.grid_container .column :deep(.lib-dropdown){width:100%;height:45px}.grid_container .column :deep(.lib-dropdown) .lib-dropdown-label{padding:12px;line-height:21px}.grid_container .column :deep(.lib-dropdown) .lib-dropdown-trigger{width:45px;height:100%}@media screen and (min-width: 768px){.filter-accordion .date_fields{grid-template-columns:repeat(2,1fr)}}@media screen and (min-width: 1200px){.filter-accordion .date_fields{grid-template-columns:repeat(4,1fr)}.filter-accordion .grid_container{grid-template-columns:repeat(3,1fr)}}:host ::ng-deep .filter-chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem}:host ::ng-deep .filter-chips .p-chip{background:#f0f0f0;padding:.5rem}:host ::ng-deep .filter-chips .p-chip .p-chip-remove-icon{color:#666;margin-left:.5rem;cursor:pointer}:host ::ng-deep .filter-chips .p-chip .p-chip-remove-icon:hover{color:#333}:host ::ng-deep .filter-chips .p-chip .filter-value{margin-left:.5rem;font-weight:500}\n"] }]
|
|
2774
|
+
}], ctorParameters: () => [], propDecorators: { filterItems: [{
|
|
2775
|
+
type: Input
|
|
2776
|
+
}] } });
|
|
2777
|
+
|
|
2778
|
+
class GenericTableComponent {
|
|
2779
|
+
translateService;
|
|
2780
|
+
constructor(translateService) {
|
|
2781
|
+
this.translateService = translateService;
|
|
2782
|
+
}
|
|
2783
|
+
// stolpci tabele
|
|
2784
|
+
columns = [];
|
|
2785
|
+
// podatki tabele
|
|
2786
|
+
data = [];
|
|
2787
|
+
// ali prikaže filtre: privzeto v vrstici pod imeni stolpcev
|
|
2788
|
+
filtersEnabled = true;
|
|
2789
|
+
// sporočilo ki se pokaže v body tabele, če filtriranje, iskanje ne najde nič
|
|
2790
|
+
emptyMessage = '';
|
|
2791
|
+
// TODO: tole je, da bi lahko customiziral body tabele - ne deluje
|
|
2792
|
+
customBodyTemplate = null;
|
|
2793
|
+
// za checked vrstice
|
|
2794
|
+
_selectedRows = [];
|
|
2795
|
+
get selectedRows() {
|
|
2796
|
+
return this._selectedRows;
|
|
2797
|
+
}
|
|
2798
|
+
set selectedRows(value) {
|
|
2799
|
+
this._selectedRows = value;
|
|
2800
|
+
this.selectedRowsChange.emit(this._selectedRows); // Emitiramo dogodek ob spremembi
|
|
2801
|
+
}
|
|
2802
|
+
selectedRowsChange = new EventEmitter(); // Dogodek za dvosmerno vezavo
|
|
2803
|
+
ngOnInit() {
|
|
2804
|
+
if (!this.emptyMessage) {
|
|
2805
|
+
this.emptyMessage = this.translateService.instant('errors.table.noData');
|
|
2806
|
+
}
|
|
2807
|
+
}
|
|
2808
|
+
get globalFilterFields() {
|
|
2809
|
+
return this.columns.map(c => c.field);
|
|
2810
|
+
}
|
|
2811
|
+
clearOnEscape(event, filter) {
|
|
2812
|
+
if (event.key === 'Escape') {
|
|
2813
|
+
filter(''); // Počisti vrednost filtra
|
|
2814
|
+
event.target.value = ''; // Počisti vrednost vnosnega polja
|
|
2815
|
+
event.preventDefault(); // Prepreči privzeto vedenje
|
|
2816
|
+
}
|
|
2817
|
+
}
|
|
2818
|
+
// Inicializacija stolpcev (z možnostjo prevodov)
|
|
2819
|
+
initializeColumns(columnsConfig) {
|
|
2820
|
+
this.columns = columnsConfig.map(col => ({
|
|
2821
|
+
...col,
|
|
2822
|
+
header: this.translateService.instant(col.headerKey),
|
|
2823
|
+
}));
|
|
2824
|
+
}
|
|
2825
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GenericTableComponent, deps: [{ token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2826
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: GenericTableComponent, isStandalone: true, selector: "app-generic-table", inputs: { columns: "columns", data: "data", filtersEnabled: "filtersEnabled", emptyMessage: "emptyMessage", customBodyTemplate: "customBodyTemplate", selectedRows: "selectedRows" }, outputs: { selectedRowsChange: "selectedRowsChange" }, ngImport: i0, template: "<p-table\r\n [value]=\"data\"\r\n [globalFilterFields]=\"globalFilterFields\"\r\n class=\"p-datatable-gridlines\"\r\n [(selection)]=\"selectedRows\"\r\n>\r\n <!-- header tabele -->\r\n <ng-template pTemplate=\"header\">\r\n <!-- header vrstica kjer so imena fieldov -->\r\n <tr>\r\n <th *ngFor=\"let col of columns\">\r\n <ng-container *ngIf=\"col.selectable; else regularHeader\">\r\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n </ng-container>\r\n <ng-template #regularHeader>\r\n {{ col.header }}\r\n </ng-template>\r\n </th>\r\n </tr>\r\n <!-- filter vrstica kjer so vsi filtri -->\r\n <tr *ngIf=\"filtersEnabled\">\r\n <th *ngFor=\"let col of columns\">\r\n <!-- text filter -->\r\n <ng-container *ngIf=\"col.filterType === 'text'\">\r\n <p-columnFilter\r\n [field]=\"col.field\"\r\n [type]=\"'text'\"\r\n [showMenu]=\"false\"\r\n [placeholder]=\"col.placeholder || col.header\"\r\n [matchMode]=\"'contains'\"\r\n >\r\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n <input\r\n pInputText\r\n type=\"text\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"filter($event)\"\r\n (keydown)=\"clearOnEscape($event, filter)\"\r\n [placeholder]=\"col.placeholder || col.header\"\r\n />\r\n </ng-template>\r\n </p-columnFilter>\r\n </ng-container>\r\n\r\n <!-- dropdown filter -->\r\n <ng-container *ngIf=\"col.filterType === 'dropdown'\">\r\n <p-columnFilter [field]=\"col.field\" [showMenu]=\"false\">\r\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n <p-select\r\n [ngModel]=\"value\"\r\n [options]=\"col.options\"\r\n (onChange)=\"filter($event.value)\"\r\n placeholder=\"{{ col.placeholder || col.header }}\"\r\n [showClear]=\"true\"\r\n ></p-select>\r\n </ng-template>\r\n </p-columnFilter>\r\n </ng-container>\r\n </th>\r\n </tr>\r\n\r\n </ng-template>\r\n\r\n <!-- body tabele -->\r\n <ng-template pTemplate=\"body\" let-rowData>\r\n <tr>\r\n <td *ngFor=\"let col of columns\">\r\n <ng-container *ngIf=\"col.selectable; else regularCell\">\r\n <p-tableCheckbox [value]=\"rowData\"></p-tableCheckbox>\r\n </ng-container>\r\n <ng-template #regularCell>\r\n <ng-container *ngIf=\"!customBodyTemplate; else customBody\">\r\n {{ rowData[col.field] }}\r\n </ng-container>\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n\r\n\r\n\r\n <!-- TODO: tale del z $implicit: rowData ne deluje, me\u010De errorje -->\r\n <ng-template #customBody>\r\n<!-- <ng-container *ngTemplateOutlet=\"customBodyTemplate; context: { $implicit: rowData }\"></ng-container>-->\r\n </ng-template>\r\n\r\n <!-- empty message: \u010De ni podatkov -->\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr class=\"empty-message\">\r\n <td [attr.colspan]=\"columns.length\">{{ emptyMessage }}</td>\r\n </tr>\r\n </ng-template>\r\n</p-table>\r\n", styles: ["@charset \"UTF-8\";::ng-deep .p-datatable-table .p-select-list{padding:0}::ng-deep .p-datatable-table th,::ng-deep .p-datatable-table td{padding:.5rem!important}::ng-deep .p-datatable-table thead>tr>th{color:#fff!important;background-color:#3e7c94!important;border-width:1px 0 0 0!important}::ng-deep .p-datatable-table .p-datatable-tbody tr:nth-child(odd){background-color:#f1f1f1}::ng-deep .p-datatable-table .p-datatable-tbody tr:nth-child(2n){background-color:#fff}::ng-deep .p-datatable-table tr.empty-message>td{text-align:center!important;padding:2rem!important}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i1$6.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$6.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$6.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] });
|
|
2827
|
+
}
|
|
2828
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GenericTableComponent, decorators: [{
|
|
2829
|
+
type: Component,
|
|
2830
|
+
args: [{ selector: 'app-generic-table', imports: [TableModule, PrimeTemplate, NgFor, NgIf, FormsModule, InputText, SelectModule], template: "<p-table\r\n [value]=\"data\"\r\n [globalFilterFields]=\"globalFilterFields\"\r\n class=\"p-datatable-gridlines\"\r\n [(selection)]=\"selectedRows\"\r\n>\r\n <!-- header tabele -->\r\n <ng-template pTemplate=\"header\">\r\n <!-- header vrstica kjer so imena fieldov -->\r\n <tr>\r\n <th *ngFor=\"let col of columns\">\r\n <ng-container *ngIf=\"col.selectable; else regularHeader\">\r\n <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\r\n </ng-container>\r\n <ng-template #regularHeader>\r\n {{ col.header }}\r\n </ng-template>\r\n </th>\r\n </tr>\r\n <!-- filter vrstica kjer so vsi filtri -->\r\n <tr *ngIf=\"filtersEnabled\">\r\n <th *ngFor=\"let col of columns\">\r\n <!-- text filter -->\r\n <ng-container *ngIf=\"col.filterType === 'text'\">\r\n <p-columnFilter\r\n [field]=\"col.field\"\r\n [type]=\"'text'\"\r\n [showMenu]=\"false\"\r\n [placeholder]=\"col.placeholder || col.header\"\r\n [matchMode]=\"'contains'\"\r\n >\r\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n <input\r\n pInputText\r\n type=\"text\"\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"filter($event)\"\r\n (keydown)=\"clearOnEscape($event, filter)\"\r\n [placeholder]=\"col.placeholder || col.header\"\r\n />\r\n </ng-template>\r\n </p-columnFilter>\r\n </ng-container>\r\n\r\n <!-- dropdown filter -->\r\n <ng-container *ngIf=\"col.filterType === 'dropdown'\">\r\n <p-columnFilter [field]=\"col.field\" [showMenu]=\"false\">\r\n <ng-template pTemplate=\"filter\" let-value let-filter=\"filterCallback\">\r\n <p-select\r\n [ngModel]=\"value\"\r\n [options]=\"col.options\"\r\n (onChange)=\"filter($event.value)\"\r\n placeholder=\"{{ col.placeholder || col.header }}\"\r\n [showClear]=\"true\"\r\n ></p-select>\r\n </ng-template>\r\n </p-columnFilter>\r\n </ng-container>\r\n </th>\r\n </tr>\r\n\r\n </ng-template>\r\n\r\n <!-- body tabele -->\r\n <ng-template pTemplate=\"body\" let-rowData>\r\n <tr>\r\n <td *ngFor=\"let col of columns\">\r\n <ng-container *ngIf=\"col.selectable; else regularCell\">\r\n <p-tableCheckbox [value]=\"rowData\"></p-tableCheckbox>\r\n </ng-container>\r\n <ng-template #regularCell>\r\n <ng-container *ngIf=\"!customBodyTemplate; else customBody\">\r\n {{ rowData[col.field] }}\r\n </ng-container>\r\n </ng-template>\r\n </td>\r\n </tr>\r\n </ng-template>\r\n\r\n\r\n\r\n <!-- TODO: tale del z $implicit: rowData ne deluje, me\u010De errorje -->\r\n <ng-template #customBody>\r\n<!-- <ng-container *ngTemplateOutlet=\"customBodyTemplate; context: { $implicit: rowData }\"></ng-container>-->\r\n </ng-template>\r\n\r\n <!-- empty message: \u010De ni podatkov -->\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr class=\"empty-message\">\r\n <td [attr.colspan]=\"columns.length\">{{ emptyMessage }}</td>\r\n </tr>\r\n </ng-template>\r\n</p-table>\r\n", styles: ["@charset \"UTF-8\";::ng-deep .p-datatable-table .p-select-list{padding:0}::ng-deep .p-datatable-table th,::ng-deep .p-datatable-table td{padding:.5rem!important}::ng-deep .p-datatable-table thead>tr>th{color:#fff!important;background-color:#3e7c94!important;border-width:1px 0 0 0!important}::ng-deep .p-datatable-table .p-datatable-tbody tr:nth-child(odd){background-color:#f1f1f1}::ng-deep .p-datatable-table .p-datatable-tbody tr:nth-child(2n){background-color:#fff}::ng-deep .p-datatable-table tr.empty-message>td{text-align:center!important;padding:2rem!important}\n"] }]
|
|
2831
|
+
}], ctorParameters: () => [{ type: i2.TranslateService }], propDecorators: { columns: [{
|
|
2832
|
+
type: Input
|
|
2833
|
+
}], data: [{
|
|
2834
|
+
type: Input
|
|
2835
|
+
}], filtersEnabled: [{
|
|
2836
|
+
type: Input
|
|
2837
|
+
}], emptyMessage: [{
|
|
2838
|
+
type: Input
|
|
2839
|
+
}], customBodyTemplate: [{
|
|
2840
|
+
type: Input
|
|
2841
|
+
}], selectedRows: [{
|
|
2842
|
+
type: Input
|
|
2843
|
+
}], selectedRowsChange: [{
|
|
2844
|
+
type: Output
|
|
2845
|
+
}] } });
|
|
2846
|
+
|
|
2847
|
+
/*
|
|
2848
|
+
* Public API Surface of design-system
|
|
2849
|
+
*/
|
|
2850
|
+
// Services
|
|
2851
|
+
// Components
|
|
2852
|
+
|
|
2853
|
+
/**
|
|
2854
|
+
* Generated bundle index. Do not edit.
|
|
2855
|
+
*/
|
|
2856
|
+
|
|
2857
|
+
export { AccordionComponent, AppConfigService, BreadcrumbsComponent, ButtonComponent, ButtonLinkComponent, CacheService, CardComponent, CheckboxComponent, ConfirmModalComponent, ConfirmModalService, CustomTableComponent, DateInputComponent, DividerComponent, DropdownComponent, DynamicRouteService, ErrorComponent, ExpandedTableComponent, ExportService, FilterHeaderComponent, FooterComponent, GenericTableComponent, IconButtonComponent, InputComponent, InputMaskComponent, LoaderComponent, LocalStorageService, MainMenuComponent, ModalComponent, NavbarComponent, NoInternetService, PicklistComponent, ProgressBarComponent, TagComponent, TextareaComponent, ToggleSwitchComponent, TooltipComponent, TranslationService };
|
|
2858
|
+
//# sourceMappingURL=n-isi-platform-design-system.mjs.map
|