@indice/ng-components 0.2.173-beta.16 → 0.2.173-beta.18
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/_styles.scss +13 -1
- package/esm2020/lib/controls/advanced-search/advanced-search.component.mjs +43 -5
- package/esm2020/lib/controls/advanced-search/models.mjs +22 -3
- package/esm2020/lib/controls/drop-down-menu/drop-down-menu.component.mjs +2 -2
- package/esm2020/lib/controls/list-view/list-view.component.mjs +1 -1
- package/esm2020/lib/controls/toggle-buttons-list/toggle-buttons-list.component.mjs +6 -3
- package/fesm2015/indice-ng-components.mjs +72 -9
- package/fesm2015/indice-ng-components.mjs.map +1 -1
- package/fesm2020/indice-ng-components.mjs +69 -9
- package/fesm2020/indice-ng-components.mjs.map +1 -1
- package/lib/controls/advanced-search/advanced-search.component.d.ts +15 -1
- package/lib/controls/advanced-search/models.d.ts +8 -0
- package/lib/controls/toggle-buttons-list/toggle-buttons-list.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -202,7 +202,7 @@ class DropDownMenuComponent {
|
|
|
202
202
|
this.selectedValue = null;
|
|
203
203
|
this.multiple = false;
|
|
204
204
|
this.placeholder = 'Παρακαλώ επιλέξτε...';
|
|
205
|
-
this.showIcons =
|
|
205
|
+
this.showIcons = true;
|
|
206
206
|
this.selectedOption$ = null;
|
|
207
207
|
this.selectedChange = new EventEmitter();
|
|
208
208
|
this.selectedChanged = new EventEmitter();
|
|
@@ -880,6 +880,10 @@ var QueryParameters;
|
|
|
880
880
|
QueryParameters["FILTER_FROM"] = "from";
|
|
881
881
|
QueryParameters["FILTER_TO"] = "to";
|
|
882
882
|
})(QueryParameters || (QueryParameters = {}));
|
|
883
|
+
const OperatorOptions = {
|
|
884
|
+
'string': [Operators.EQUALS, Operators.NOT_EQUALS, Operators.CONTAINS],
|
|
885
|
+
'array': [Operators.EQUALS, Operators.NOT_EQUALS]
|
|
886
|
+
};
|
|
883
887
|
class FilterClause {
|
|
884
888
|
constructor(member, value, operator, dataType, searchOptions) {
|
|
885
889
|
this.member = member;
|
|
@@ -902,8 +906,23 @@ class FilterClause {
|
|
|
902
906
|
this.uiName = fo.name;
|
|
903
907
|
}
|
|
904
908
|
}
|
|
905
|
-
// uiOperator
|
|
906
|
-
|
|
909
|
+
// We don't want a uiOperator for the datetime dataType. For strings and arrays we have the equals/not-equals/contains operators. The switch case can be expanded for more data types/operators when needed.
|
|
910
|
+
if (this.dataType === 'datetime') {
|
|
911
|
+
this.uiOperator = '';
|
|
912
|
+
}
|
|
913
|
+
else {
|
|
914
|
+
switch (this.operator) {
|
|
915
|
+
case (Operators.EQUALS.value):
|
|
916
|
+
this.uiOperator = Operators.EQUALS.label;
|
|
917
|
+
break;
|
|
918
|
+
case (Operators.NOT_EQUALS.value):
|
|
919
|
+
this.uiOperator = Operators.NOT_EQUALS.label;
|
|
920
|
+
break;
|
|
921
|
+
case (Operators.CONTAINS.value):
|
|
922
|
+
this.uiOperator = Operators.CONTAINS.label;
|
|
923
|
+
break;
|
|
924
|
+
}
|
|
925
|
+
}
|
|
907
926
|
// uiValue
|
|
908
927
|
this.uiValue = this.value;
|
|
909
928
|
if ((this.dataType === 'datetime')) {
|
|
@@ -1236,8 +1255,12 @@ class AdvancedSearchComponent {
|
|
|
1236
1255
|
constructor() {
|
|
1237
1256
|
this.advancedSearchChanged = new EventEmitter();
|
|
1238
1257
|
this.searchOptions = [];
|
|
1258
|
+
this.operatorsDisabled = false;
|
|
1239
1259
|
this.filters = [];
|
|
1240
1260
|
this.menuOptions = [];
|
|
1261
|
+
this.operatorMenuOptions = [];
|
|
1262
|
+
this.operatorOptions = OperatorOptions;
|
|
1263
|
+
this.operators = {};
|
|
1241
1264
|
this.menuOptionsDictionary = {};
|
|
1242
1265
|
}
|
|
1243
1266
|
ngOnInit() {
|
|
@@ -1266,8 +1289,29 @@ class AdvancedSearchComponent {
|
|
|
1266
1289
|
}
|
|
1267
1290
|
selectedFieldChanged(field) {
|
|
1268
1291
|
this.selectedField = this.searchOptions.find((searchOption) => searchOption.field === field);
|
|
1292
|
+
this.selectedOperator = undefined;
|
|
1293
|
+
// Since we have special UI handling for the daterange, we don't need to fill the operatorMenuOptions in that case.
|
|
1294
|
+
if (this.selectedField?.dataType != 'daterange') {
|
|
1295
|
+
let operatorMenuOpts = [];
|
|
1296
|
+
// based on the data type that we are filtering, fill the operator dropdown with the correct operators. The default is the string with equals/not-equals/contains
|
|
1297
|
+
this.operatorOptions[this.selectedField?.dataType ?? 'string'].forEach(x => {
|
|
1298
|
+
operatorMenuOpts.push({
|
|
1299
|
+
text: x.description ?? x.label,
|
|
1300
|
+
value: x.value,
|
|
1301
|
+
data: undefined,
|
|
1302
|
+
description: x.description,
|
|
1303
|
+
icon: undefined
|
|
1304
|
+
});
|
|
1305
|
+
});
|
|
1306
|
+
this.operatorMenuOptions = operatorMenuOpts;
|
|
1307
|
+
// Preselect the first option from the operators menu so there will always be a default value, which is the 'equals' operator for all data types for now.
|
|
1308
|
+
this.selectedOperator = this.operatorMenuOptions[0].value;
|
|
1309
|
+
}
|
|
1269
1310
|
this.fieldValue = undefined;
|
|
1270
1311
|
}
|
|
1312
|
+
selectedOperatorChanged(operator) {
|
|
1313
|
+
this.selectedOperator = operator;
|
|
1314
|
+
}
|
|
1271
1315
|
selectedFieldValueChanged(fieldValue) {
|
|
1272
1316
|
this.fieldValue = fieldValue;
|
|
1273
1317
|
}
|
|
@@ -1296,8 +1340,10 @@ class AdvancedSearchComponent {
|
|
|
1296
1340
|
if (this.fieldValue === undefined) { // handle empty field value
|
|
1297
1341
|
return;
|
|
1298
1342
|
}
|
|
1343
|
+
// if no operator was provided, it falls back to the default 'equals' operator
|
|
1344
|
+
this.selectedOperator = this.selectedOperator ?? Operators.EQUALS.value;
|
|
1299
1345
|
// create the filterClause
|
|
1300
|
-
const filterClause = new FilterClause(this.selectedField.field, this.fieldValue,
|
|
1346
|
+
const filterClause = new FilterClause(this.selectedField.field, this.fieldValue, this.selectedOperator, this.selectedField.dataType, this.searchOptions);
|
|
1301
1347
|
if (!this.selectedField.multiTerm) { // multiTerm means that we can have multiple filter values of the SAME filter clause (eg "filter case types that are Phone OR Address")
|
|
1302
1348
|
this.filters = this.filters.filter((f) => {
|
|
1303
1349
|
return f.member !== this.selectedField.field;
|
|
@@ -1320,25 +1366,36 @@ class AdvancedSearchComponent {
|
|
|
1320
1366
|
this.advancedSearchChanged.emit(this.filters);
|
|
1321
1367
|
}
|
|
1322
1368
|
}
|
|
1369
|
+
isDateValueUnpicked() {
|
|
1370
|
+
return this.fieldValueDateFrom === undefined && this.fieldValueDateTo === undefined;
|
|
1371
|
+
}
|
|
1372
|
+
isFieldAndOperatorUnpicked() {
|
|
1373
|
+
// if the operators are enabled we need to check for both the field value and the operator value
|
|
1374
|
+
return this.operatorsDisabled ? this.fieldValue === undefined : (this.fieldValue === undefined || this.selectedOperator === undefined);
|
|
1375
|
+
}
|
|
1323
1376
|
clear() {
|
|
1324
1377
|
this.fieldValueDateFrom = undefined;
|
|
1325
1378
|
this.fieldValueDateTo = undefined;
|
|
1326
1379
|
this.selectedField = undefined;
|
|
1327
1380
|
this.fieldValue = undefined;
|
|
1381
|
+
this.selectedOperator = undefined;
|
|
1328
1382
|
this.filters = [];
|
|
1329
1383
|
this.advancedSearchChanged.emit(this.filters);
|
|
1330
1384
|
}
|
|
1331
1385
|
}
|
|
1332
1386
|
AdvancedSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: AdvancedSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1333
|
-
AdvancedSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: { searchOptions: ["search-options", "searchOptions"], filters: "filters" }, outputs: { advancedSearchChanged: "advancedSearchChanged" }, ngImport: i0, template: "<div class=\"advanced-search-container\">\r\n <div class=\"advanced-search-filter\">\r\n <!--SEARCH FIELDS-->\r\n <div class=\"advanced-search-filter-field-container\">\r\n <label class=\"advanced-search-filter-field-label\"\r\n for=\"selectedField\">\r\n \u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7 \u03B1\u03BD\u03AC:\r\n </label>\r\n <lib-drop-down-menu [options]=\"menuOptions\"\r\n (selectedChanged)=\"selectedFieldChanged($event)\"></lib-drop-down-menu>\r\n </div>\r\n <!--SEARCH FIELDS INPUT-->\r\n <div *ngIf=\"selectedField\"\r\n class=\"advanced-search-filter-value-container\">\r\n <div *ngIf=\"selectedField.dataType === 'array'\">\r\n <label class=\"advanced-search-filter-value-label\"\r\n for=\"fieldValue\">\r\n \r\n </label>\r\n <lib-drop-down-menu [options]=\"menuOptionsDictionary[selectedField.field]\"\r\n [selected]=\"fieldValue\"\r\n (selectedChanged)=\"selectedFieldValueChanged($event)\"></lib-drop-down-menu>\r\n </div>\r\n <div *ngIf=\"selectedField.dataType === 'string'\">\r\n <label class=\"advanced-search-filter-value-label\"\r\n for=\"fieldValue\">\r\n \r\n </label>\r\n <input (keyup.enter)=\"search()\"\r\n [(ngModel)]=\"fieldValue\"\r\n name=\"fieldValue\"\r\n type=\"text\"\r\n placeholder=\"\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7\"\r\n maxlength=\"300\"\r\n class=\"advanced-search-filter-value-input\">\r\n </div>\r\n <ng-container *ngIf=\"selectedField.dataType === 'daterange'\">\r\n <div>\r\n <span class=\"advanced-search-filter-value-input-daterange-from\">\r\n \u0391\u03C0\u03CC:\r\n </span>\r\n <lib-date-picker [maxDate]=\"fieldValueDateTo\"\r\n [(ngModel)]=\"fieldValueDateFrom\"\r\n [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n </div>\r\n <div *ngIf=\"selectedField.dataType === 'daterange'\">\r\n <span class=\"advanced-search-filter-value-input-daterange-to\">\r\n \u0388\u03C9\u03C2:\r\n </span>\r\n <lib-date-picker [minDate]=\"fieldValueDateFrom\"\r\n [(ngModel)]=\"fieldValueDateTo\"\r\n [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"selectedField\">\r\n <!--DO SEARCH-->\r\n <button type=\"button\"\r\n [ngClass]=\"{'opacity-50 cursor-not-allowed':
|
|
1387
|
+
AdvancedSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: { searchOptions: ["search-options", "searchOptions"], operatorsDisabled: ["operators-disabled", "operatorsDisabled"], filters: "filters" }, outputs: { advancedSearchChanged: "advancedSearchChanged" }, ngImport: i0, template: "<div class=\"advanced-search-container\">\r\n <div class=\"advanced-search-filter\">\r\n <!--SEARCH FIELDS-->\r\n <div class=\"advanced-search-filter-field-container\">\r\n <label class=\"advanced-search-filter-field-label\"\r\n for=\"selectedField\">\r\n \u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7 \u03B1\u03BD\u03AC:\r\n </label>\r\n <lib-drop-down-menu [options]=\"menuOptions\"\r\n (selectedChanged)=\"selectedFieldChanged($event)\"></lib-drop-down-menu>\r\n </div>\r\n <!--SEARCH FIELDS OPERATOR MENU-->\r\n <div *ngIf=\"!operatorsDisabled && selectedField\"\r\n class=\"advanced-search-filter-operator-container\">\r\n <div *ngIf=\"selectedField.dataType === 'array' || selectedField.dataType === 'string'\">\r\n <label class=\"advanced-search-filter-operator-label\"\r\n for=\"selectedOperator\">\r\n \r\n </label>\r\n <lib-drop-down-menu [options]=\"operatorMenuOptions\"\r\n [selected]=\"selectedOperator\"\r\n (selectedChanged)=\"selectedOperatorChanged($event)\"></lib-drop-down-menu>\r\n </div>\r\n </div>\r\n <!--SEARCH FIELDS INPUT-->\r\n <div *ngIf=\"selectedField\"\r\n class=\"advanced-search-filter-value-container\">\r\n <div *ngIf=\"selectedField.dataType === 'array'\">\r\n <label class=\"advanced-search-filter-value-label\"\r\n for=\"fieldValue\">\r\n \r\n </label>\r\n <lib-drop-down-menu [options]=\"menuOptionsDictionary[selectedField.field]\"\r\n [selected]=\"fieldValue\"\r\n (selectedChanged)=\"selectedFieldValueChanged($event)\"></lib-drop-down-menu>\r\n </div>\r\n <div *ngIf=\"selectedField.dataType === 'string'\">\r\n <label class=\"advanced-search-filter-value-label\"\r\n for=\"fieldValue\">\r\n \r\n </label>\r\n <input (keyup.enter)=\"search()\"\r\n [(ngModel)]=\"fieldValue\"\r\n name=\"fieldValue\"\r\n type=\"text\"\r\n placeholder=\"\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7\"\r\n maxlength=\"300\"\r\n class=\"advanced-search-filter-value-input\">\r\n </div>\r\n <ng-container *ngIf=\"selectedField.dataType === 'daterange'\">\r\n <div>\r\n <span class=\"advanced-search-filter-value-input-daterange-from\">\r\n \u0391\u03C0\u03CC:\r\n </span>\r\n <lib-date-picker [maxDate]=\"fieldValueDateTo\"\r\n [(ngModel)]=\"fieldValueDateFrom\"\r\n [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n </div>\r\n <div *ngIf=\"selectedField.dataType === 'daterange'\">\r\n <span class=\"advanced-search-filter-value-input-daterange-to\">\r\n \u0388\u03C9\u03C2:\r\n </span>\r\n <lib-date-picker [minDate]=\"fieldValueDateFrom\"\r\n [(ngModel)]=\"fieldValueDateTo\"\r\n [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"selectedField\">\r\n <!--DO SEARCH-->\r\n <button type=\"button\"\r\n [ngClass]=\"{'opacity-50 cursor-not-allowed': isDateValueUnpicked() && isFieldAndOperatorUnpicked()}\"\r\n [disabled]=\"isDateValueUnpicked() && isFieldAndOperatorUnpicked()\"\r\n (click)=\"search()\">\r\n <i [class]=\"'ms-Icon ms-Icon--Search'\"></i>\r\n </button>\r\n <!--CLEAR-->\r\n <button type=\"button\"\r\n (click)=\"clear()\">\r\n <i [class]=\"'ms-Icon ms-Icon--Cancel'\"></i>\r\n </button>\r\n </ng-container>\r\n </div>\r\n <!--FILTER CHIPS-->\r\n <!-- This example requires Tailwind CSS v2.0+ -->\r\n <ng-container *ngFor=\"let filter of filters; let i = index\">\r\n <span *ngIf=\"filter && filter.member\"\r\n class=\"advanced-search-chips\">\r\n {{ filter.uiName }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\r\n <button (click)=\"removeFilter(i)\"\r\n type=\"button\"\r\n class=\"advanced-search-chips-remove-filter\">\r\n <span class=\"sr-only\">Remove large option</span>\r\n <svg class=\"h-2 w-2\"\r\n stroke=\"currentColor\"\r\n fill=\"none\"\r\n viewBox=\"0 0 8 8\">\r\n <path stroke-linecap=\"round\"\r\n stroke-width=\"1.5\"\r\n d=\"M1 1l6 6m0-6L1 7\" />\r\n </svg>\r\n </button>\r\n </span>\r\n </ng-container>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DatepickerComponent, selector: "lib-date-picker", inputs: ["readonly", "disabled", "inline", "display-format", "placeholder", "value", "minDate", "maxDate"], outputs: ["valueChange"] }, { kind: "component", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder", "show-icons"], outputs: ["selectedChange", "selectedChanged"] }] });
|
|
1334
1388
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: AdvancedSearchComponent, decorators: [{
|
|
1335
1389
|
type: Component,
|
|
1336
|
-
args: [{ selector: 'lib-advanced-search', template: "<div class=\"advanced-search-container\">\r\n <div class=\"advanced-search-filter\">\r\n <!--SEARCH FIELDS-->\r\n <div class=\"advanced-search-filter-field-container\">\r\n <label class=\"advanced-search-filter-field-label\"\r\n for=\"selectedField\">\r\n \u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7 \u03B1\u03BD\u03AC:\r\n </label>\r\n <lib-drop-down-menu [options]=\"menuOptions\"\r\n (selectedChanged)=\"selectedFieldChanged($event)\"></lib-drop-down-menu>\r\n </div>\r\n <!--SEARCH FIELDS INPUT-->\r\n <div *ngIf=\"selectedField\"\r\n class=\"advanced-search-filter-value-container\">\r\n <div *ngIf=\"selectedField.dataType === 'array'\">\r\n <label class=\"advanced-search-filter-value-label\"\r\n for=\"fieldValue\">\r\n \r\n </label>\r\n <lib-drop-down-menu [options]=\"menuOptionsDictionary[selectedField.field]\"\r\n [selected]=\"fieldValue\"\r\n (selectedChanged)=\"selectedFieldValueChanged($event)\"></lib-drop-down-menu>\r\n </div>\r\n <div *ngIf=\"selectedField.dataType === 'string'\">\r\n <label class=\"advanced-search-filter-value-label\"\r\n for=\"fieldValue\">\r\n \r\n </label>\r\n <input (keyup.enter)=\"search()\"\r\n [(ngModel)]=\"fieldValue\"\r\n name=\"fieldValue\"\r\n type=\"text\"\r\n placeholder=\"\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7\"\r\n maxlength=\"300\"\r\n class=\"advanced-search-filter-value-input\">\r\n </div>\r\n <ng-container *ngIf=\"selectedField.dataType === 'daterange'\">\r\n <div>\r\n <span class=\"advanced-search-filter-value-input-daterange-from\">\r\n \u0391\u03C0\u03CC:\r\n </span>\r\n <lib-date-picker [maxDate]=\"fieldValueDateTo\"\r\n [(ngModel)]=\"fieldValueDateFrom\"\r\n [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n </div>\r\n <div *ngIf=\"selectedField.dataType === 'daterange'\">\r\n <span class=\"advanced-search-filter-value-input-daterange-to\">\r\n \u0388\u03C9\u03C2:\r\n </span>\r\n <lib-date-picker [minDate]=\"fieldValueDateFrom\"\r\n [(ngModel)]=\"fieldValueDateTo\"\r\n [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"selectedField\">\r\n <!--DO SEARCH-->\r\n <button type=\"button\"\r\n [ngClass]=\"{'opacity-50 cursor-not-allowed':
|
|
1390
|
+
args: [{ selector: 'lib-advanced-search', template: "<div class=\"advanced-search-container\">\r\n <div class=\"advanced-search-filter\">\r\n <!--SEARCH FIELDS-->\r\n <div class=\"advanced-search-filter-field-container\">\r\n <label class=\"advanced-search-filter-field-label\"\r\n for=\"selectedField\">\r\n \u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7 \u03B1\u03BD\u03AC:\r\n </label>\r\n <lib-drop-down-menu [options]=\"menuOptions\"\r\n (selectedChanged)=\"selectedFieldChanged($event)\"></lib-drop-down-menu>\r\n </div>\r\n <!--SEARCH FIELDS OPERATOR MENU-->\r\n <div *ngIf=\"!operatorsDisabled && selectedField\"\r\n class=\"advanced-search-filter-operator-container\">\r\n <div *ngIf=\"selectedField.dataType === 'array' || selectedField.dataType === 'string'\">\r\n <label class=\"advanced-search-filter-operator-label\"\r\n for=\"selectedOperator\">\r\n \r\n </label>\r\n <lib-drop-down-menu [options]=\"operatorMenuOptions\"\r\n [selected]=\"selectedOperator\"\r\n (selectedChanged)=\"selectedOperatorChanged($event)\"></lib-drop-down-menu>\r\n </div>\r\n </div>\r\n <!--SEARCH FIELDS INPUT-->\r\n <div *ngIf=\"selectedField\"\r\n class=\"advanced-search-filter-value-container\">\r\n <div *ngIf=\"selectedField.dataType === 'array'\">\r\n <label class=\"advanced-search-filter-value-label\"\r\n for=\"fieldValue\">\r\n \r\n </label>\r\n <lib-drop-down-menu [options]=\"menuOptionsDictionary[selectedField.field]\"\r\n [selected]=\"fieldValue\"\r\n (selectedChanged)=\"selectedFieldValueChanged($event)\"></lib-drop-down-menu>\r\n </div>\r\n <div *ngIf=\"selectedField.dataType === 'string'\">\r\n <label class=\"advanced-search-filter-value-label\"\r\n for=\"fieldValue\">\r\n \r\n </label>\r\n <input (keyup.enter)=\"search()\"\r\n [(ngModel)]=\"fieldValue\"\r\n name=\"fieldValue\"\r\n type=\"text\"\r\n placeholder=\"\u0391\u03BD\u03B1\u03B6\u03AE\u03C4\u03B7\u03C3\u03B7\"\r\n maxlength=\"300\"\r\n class=\"advanced-search-filter-value-input\">\r\n </div>\r\n <ng-container *ngIf=\"selectedField.dataType === 'daterange'\">\r\n <div>\r\n <span class=\"advanced-search-filter-value-input-daterange-from\">\r\n \u0391\u03C0\u03CC:\r\n </span>\r\n <lib-date-picker [maxDate]=\"fieldValueDateTo\"\r\n [(ngModel)]=\"fieldValueDateFrom\"\r\n [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n </div>\r\n <div *ngIf=\"selectedField.dataType === 'daterange'\">\r\n <span class=\"advanced-search-filter-value-input-daterange-to\">\r\n \u0388\u03C9\u03C2:\r\n </span>\r\n <lib-date-picker [minDate]=\"fieldValueDateFrom\"\r\n [(ngModel)]=\"fieldValueDateTo\"\r\n [placeholder]=\"'01/01/2022'\"></lib-date-picker>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"selectedField\">\r\n <!--DO SEARCH-->\r\n <button type=\"button\"\r\n [ngClass]=\"{'opacity-50 cursor-not-allowed': isDateValueUnpicked() && isFieldAndOperatorUnpicked()}\"\r\n [disabled]=\"isDateValueUnpicked() && isFieldAndOperatorUnpicked()\"\r\n (click)=\"search()\">\r\n <i [class]=\"'ms-Icon ms-Icon--Search'\"></i>\r\n </button>\r\n <!--CLEAR-->\r\n <button type=\"button\"\r\n (click)=\"clear()\">\r\n <i [class]=\"'ms-Icon ms-Icon--Cancel'\"></i>\r\n </button>\r\n </ng-container>\r\n </div>\r\n <!--FILTER CHIPS-->\r\n <!-- This example requires Tailwind CSS v2.0+ -->\r\n <ng-container *ngFor=\"let filter of filters; let i = index\">\r\n <span *ngIf=\"filter && filter.member\"\r\n class=\"advanced-search-chips\">\r\n {{ filter.uiName }} {{ filter.uiOperator }} '{{ filter.uiValue }}'\r\n <button (click)=\"removeFilter(i)\"\r\n type=\"button\"\r\n class=\"advanced-search-chips-remove-filter\">\r\n <span class=\"sr-only\">Remove large option</span>\r\n <svg class=\"h-2 w-2\"\r\n stroke=\"currentColor\"\r\n fill=\"none\"\r\n viewBox=\"0 0 8 8\">\r\n <path stroke-linecap=\"round\"\r\n stroke-width=\"1.5\"\r\n d=\"M1 1l6 6m0-6L1 7\" />\r\n </svg>\r\n </button>\r\n </span>\r\n </ng-container>\r\n</div>" }]
|
|
1337
1391
|
}], ctorParameters: function () { return []; }, propDecorators: { advancedSearchChanged: [{
|
|
1338
1392
|
type: Output
|
|
1339
1393
|
}], searchOptions: [{
|
|
1340
1394
|
type: Input,
|
|
1341
1395
|
args: ['search-options']
|
|
1396
|
+
}], operatorsDisabled: [{
|
|
1397
|
+
type: Input,
|
|
1398
|
+
args: ['operators-disabled']
|
|
1342
1399
|
}], filters: [{
|
|
1343
1400
|
type: Input
|
|
1344
1401
|
}] } });
|
|
@@ -1517,7 +1574,7 @@ class ListViewComponent {
|
|
|
1517
1574
|
}
|
|
1518
1575
|
}
|
|
1519
1576
|
ListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1520
|
-
ListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ListViewComponent, selector: "lib-list-view", inputs: { searchOptions: ["search-options", "searchOptions"], filters: "filters", busy: "busy", items: "items", count: "count", page: "page", view: "view", sort: "sort", pageSize: ["page-size", "pageSize"], pageSizeOptions: ["page-size-options", "pageSizeOptions"], sortOptions: ["sort-options", "sortOptions"], sortdir: ["sort-dir", "sortdir"], tilesCount: ["tiles-count", "tilesCount"], showPager: ["show-pager", "showPager"], pagerPosition: ["pager-position", "pagerPosition"], detailsSectionPropertyCount: ["details-section-property-count", "detailsSectionPropertyCount"] }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", detailsOpened: "detailsOpened", sortChanged: "sortChanged", sortdirChanged: "sortdirChanged", advancedSearchChanged: "advancedSearchChanged" }, queries: [{ propertyName: "tiles", first: true, predicate: ListTileComponent, descendants: true, read: ListTileComponent }, { propertyName: "details", first: true, predicate: ListDetailsSectionComponent, descendants: true, read: ListDetailsSectionComponent }, { propertyName: "cols", predicate: ListColumnComponent, read: ListColumnComponent }], usesOnChanges: true, ngImport: i0, template: "<div>\r\n <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\r\n [search-options]=\"searchOptions\"\r\n [filters]=\"filters\"\r\n (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\">\r\n </lib-advanced-search>\r\n\r\n <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\r\n [page]=\"page\"\r\n [page-size]=\"pageSize\"\r\n [count]=\"count\"\r\n [sort-options]=\"sortOptions\"\r\n [sort]=\"sort\"\r\n [sort-dir]=\"sortdir\"\r\n [busy]=\"busy\"\r\n (pageChanged)=\"emitPageChanged($event)\"\r\n (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n (sortChanged)=\"emitSortChanged($event)\"\r\n (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n <ng-content select=\"[pager-near-content]\" ngProjectAs=\"[pager-near-content]\"></ng-content>\r\n </lib-pager>\r\n</div>\r\n\r\n<ng-container [ngSwitch]=\"view\">\r\n\r\n <ng-container *ngSwitchCase=\"'tiles'\">\r\n <div [class]=\"tilesDeckClass\">\r\n\r\n <lib-skeleton-loader *ngIf=\"busy\"\r\n [count]=\"5\"\r\n [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n <ng-container *ngIf=\"items && items.length > 0\">\r\n <ng-container *ngFor=\"let item of items\">\r\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <!-- *ngSwitchCase=\"'gallery'\" -->\r\n <ng-container *ngSwitchCase=\"'gallery'\">\r\n <ul role=\"list\"\r\n [class]=\"tilesDeckClass\">\r\n\r\n <lib-skeleton-loader *ngIf=\"busy\"\r\n [count]=\"5\"\r\n [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n <ng-container *ngFor=\"let item of items\">\r\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n </ng-container>\r\n\r\n <!-- *ngSwitchCase=\"'table'\" -->\r\n <ng-container *ngSwitchDefault>\r\n\r\n <div class=\"list-view-container\">\r\n <div class=\"list-view-container-inner\">\r\n <table class=\"list-view-table\">\r\n <thead class=\"list-view-thead\">\r\n <tr>\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <th class=\"list-view-th-details\"></th>\r\n </ng-container>\r\n <ng-container *ngFor=\"let col of columns\">\r\n <th scope=\"col\"\r\n [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\r\n {{col.title}}\r\n </th>\r\n </ng-container>\r\n </tr>\r\n </thead>\r\n <tbody class=\"list-view-tbody\"\r\n *ngIf=\"busy\">\r\n <ng-container *ngFor=\"let item of loaderItems;let i=index\">\r\n <tr class=\"list-view-tr\">\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <td class=\"list-view-td-details\"\r\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n <button disabled\r\n type=\"button\"\r\n class=\"expand-collapse-button\">\r\n <!-- Heroicon name: solid/plus -->\r\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n </button>\r\n </td>\r\n <ng-template #hiddenDetailsButton>\r\n <td class=\"list-view-td-details\"></td>\r\n </ng-template>\r\n </ng-container>\r\n <td *ngFor=\"let col of columns\"\r\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <tr *ngIf=\"item.detailsExpanded\">\r\n <td [colSpan]=\"columns.length + 1\"\r\n class=\"list-view-td bg-gray-100\">\r\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </tbody>\r\n <tbody class=\"list-view-tbody\"\r\n *ngIf=\"!busy\">\r\n <ng-container *ngFor=\"let item of items;let i=index\">\r\n <tr class=\"list-view-tr\">\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <td class=\"list-view-td-details\"\r\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n <button (click)=\"toggleDetails(item)\"\r\n type=\"button\"\r\n class=\"expand-collapse-button\">\r\n <!-- Heroicon name: solid/plus -->\r\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n </button>\r\n </td>\r\n <ng-template #hiddenDetailsButton>\r\n <td class=\"list-view-td-details\"></td>\r\n </ng-template>\r\n </ng-container>\r\n <td *ngFor=\"let col of columns\"\r\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n <ng-template [ngTemplateOutlet]=\"col.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <tr *ngIf=\"item.detailsExpanded\">\r\n <td [colSpan]=\"columns.length + 1\"\r\n class=\"list-view-td bg-gray-100\">\r\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!busy && items && items.length === 0\">\r\n <div class=\"cards-deck-1\">\r\n <lib-list-view-empty-state></lib-list-view-empty-state>\r\n </div>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div class=\"px-2 mt-2\"\r\n *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\">\r\n <lib-pager [page]=\"page\"\r\n [page-size]=\"pageSize\"\r\n [count]=\"count\"\r\n [sort-options]=\"sortOptions\"\r\n [sort]=\"sort\"\r\n [sort-dir]=\"sortdir\"\r\n [busy]=\"busy\"\r\n (pageChanged)=\"emitPageChanged($event)\"\r\n (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n (sortChanged)=\"emitSortChanged($event)\"\r\n (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n </lib-pager>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: ["search-options", "filters"], outputs: ["advancedSearchChanged"] }, { kind: "component", type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: ["title", "sub-title", "new-item-label"] }, { kind: "component", type: PagerComponent, selector: "lib-pager", inputs: ["busy", "count", "page", "page-size", "page-size-options", "sort-options", "sort", "sort-dir"], outputs: ["pageChanged", "pageSizeChanged", "sortChanged", "sortdirChanged"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: ["count", "type"] }] });
|
|
1577
|
+
ListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ListViewComponent, selector: "lib-list-view", inputs: { searchOptions: ["search-options", "searchOptions"], filters: "filters", busy: "busy", items: "items", count: "count", page: "page", view: "view", sort: "sort", pageSize: ["page-size", "pageSize"], pageSizeOptions: ["page-size-options", "pageSizeOptions"], sortOptions: ["sort-options", "sortOptions"], sortdir: ["sort-dir", "sortdir"], tilesCount: ["tiles-count", "tilesCount"], showPager: ["show-pager", "showPager"], pagerPosition: ["pager-position", "pagerPosition"], detailsSectionPropertyCount: ["details-section-property-count", "detailsSectionPropertyCount"] }, outputs: { pageChanged: "pageChanged", pageSizeChanged: "pageSizeChanged", detailsOpened: "detailsOpened", sortChanged: "sortChanged", sortdirChanged: "sortdirChanged", advancedSearchChanged: "advancedSearchChanged" }, queries: [{ propertyName: "tiles", first: true, predicate: ListTileComponent, descendants: true, read: ListTileComponent }, { propertyName: "details", first: true, predicate: ListDetailsSectionComponent, descendants: true, read: ListDetailsSectionComponent }, { propertyName: "cols", predicate: ListColumnComponent, read: ListColumnComponent }], usesOnChanges: true, ngImport: i0, template: "<div>\r\n <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\r\n [search-options]=\"searchOptions\"\r\n [filters]=\"filters\"\r\n (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\">\r\n </lib-advanced-search>\r\n\r\n <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\r\n [page]=\"page\"\r\n [page-size]=\"pageSize\"\r\n [count]=\"count\"\r\n [sort-options]=\"sortOptions\"\r\n [sort]=\"sort\"\r\n [sort-dir]=\"sortdir\"\r\n [busy]=\"busy\"\r\n (pageChanged)=\"emitPageChanged($event)\"\r\n (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n (sortChanged)=\"emitSortChanged($event)\"\r\n (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n <ng-content select=\"[pager-near-content]\" ngProjectAs=\"[pager-near-content]\"></ng-content>\r\n </lib-pager>\r\n</div>\r\n\r\n<ng-container [ngSwitch]=\"view\">\r\n\r\n <ng-container *ngSwitchCase=\"'tiles'\">\r\n <div [class]=\"tilesDeckClass\">\r\n\r\n <lib-skeleton-loader *ngIf=\"busy\"\r\n [count]=\"5\"\r\n [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n <ng-container *ngIf=\"items && items.length > 0\">\r\n <ng-container *ngFor=\"let item of items\">\r\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <!-- *ngSwitchCase=\"'gallery'\" -->\r\n <ng-container *ngSwitchCase=\"'gallery'\">\r\n <ul role=\"list\"\r\n [class]=\"tilesDeckClass\">\r\n\r\n <lib-skeleton-loader *ngIf=\"busy\"\r\n [count]=\"5\"\r\n [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n <ng-container *ngFor=\"let item of items\">\r\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n </ng-container>\r\n\r\n <!-- *ngSwitchCase=\"'table'\" -->\r\n <ng-container *ngSwitchDefault>\r\n\r\n <div class=\"list-view-container\">\r\n <div class=\"list-view-container-inner\">\r\n <table class=\"list-view-table\">\r\n <thead class=\"list-view-thead\">\r\n <tr>\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <th class=\"list-view-th-details\"></th>\r\n </ng-container>\r\n <ng-container *ngFor=\"let col of columns\">\r\n <th scope=\"col\"\r\n [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\r\n {{col.title}}\r\n </th>\r\n </ng-container>\r\n </tr>\r\n </thead>\r\n <tbody class=\"list-view-tbody\"\r\n *ngIf=\"busy\">\r\n <ng-container *ngFor=\"let item of loaderItems;let i=index\">\r\n <tr class=\"list-view-tr\">\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <td class=\"list-view-td-details\"\r\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n <button disabled\r\n type=\"button\"\r\n class=\"expand-collapse-button\">\r\n <!-- Heroicon name: solid/plus -->\r\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n </button>\r\n </td>\r\n <ng-template #hiddenDetailsButton>\r\n <td class=\"list-view-td-details\"></td>\r\n </ng-template>\r\n </ng-container>\r\n <td *ngFor=\"let col of columns\"\r\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <tr *ngIf=\"item.detailsExpanded\">\r\n <td [colSpan]=\"columns.length + 1\"\r\n class=\"list-view-td bg-gray-100\">\r\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </tbody>\r\n <tbody class=\"list-view-tbody\"\r\n *ngIf=\"!busy\">\r\n <ng-container *ngFor=\"let item of items;let i=index\">\r\n <tr class=\"list-view-tr\">\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <td class=\"list-view-td-details\"\r\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n <button (click)=\"toggleDetails(item)\"\r\n type=\"button\"\r\n class=\"expand-collapse-button\">\r\n <!-- Heroicon name: solid/plus -->\r\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n </button>\r\n </td>\r\n <ng-template #hiddenDetailsButton>\r\n <td class=\"list-view-td-details\"></td>\r\n </ng-template>\r\n </ng-container>\r\n <td *ngFor=\"let col of columns\"\r\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n <ng-template [ngTemplateOutlet]=\"col.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <tr *ngIf=\"item.detailsExpanded\">\r\n <td [colSpan]=\"columns.length + 1\"\r\n class=\"list-view-td bg-gray-100\">\r\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!busy && items && items.length === 0\">\r\n <div class=\"cards-deck-1\">\r\n <lib-list-view-empty-state></lib-list-view-empty-state>\r\n </div>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div class=\"px-2 mt-2\"\r\n *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\">\r\n <lib-pager [page]=\"page\"\r\n [page-size]=\"pageSize\"\r\n [count]=\"count\"\r\n [sort-options]=\"sortOptions\"\r\n [sort]=\"sort\"\r\n [sort-dir]=\"sortdir\"\r\n [busy]=\"busy\"\r\n (pageChanged)=\"emitPageChanged($event)\"\r\n (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n (sortChanged)=\"emitSortChanged($event)\"\r\n (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n </lib-pager>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: AdvancedSearchComponent, selector: "lib-advanced-search", inputs: ["search-options", "operators-disabled", "filters"], outputs: ["advancedSearchChanged"] }, { kind: "component", type: ListViewEmptyStateComponent, selector: "lib-list-view-empty-state", inputs: ["title", "sub-title", "new-item-label"] }, { kind: "component", type: PagerComponent, selector: "lib-pager", inputs: ["busy", "count", "page", "page-size", "page-size-options", "sort-options", "sort", "sort-dir"], outputs: ["pageChanged", "pageSizeChanged", "sortChanged", "sortdirChanged"] }, { kind: "component", type: SkeletonLoaderComponent, selector: "lib-skeleton-loader", inputs: ["count", "type"] }] });
|
|
1521
1578
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ListViewComponent, decorators: [{
|
|
1522
1579
|
type: Component,
|
|
1523
1580
|
args: [{ selector: 'lib-list-view', template: "<div>\r\n <lib-advanced-search *ngIf=\"searchOptions && searchOptions.length > 0\"\r\n [search-options]=\"searchOptions\"\r\n [filters]=\"filters\"\r\n (advancedSearchChanged)=\"emitAdvancedSearchChanged($event)\">\r\n </lib-advanced-search>\r\n\r\n <lib-pager *ngIf=\"showPager && (pagerPosition == 'top' || pagerPosition == 'both')\"\r\n [page]=\"page\"\r\n [page-size]=\"pageSize\"\r\n [count]=\"count\"\r\n [sort-options]=\"sortOptions\"\r\n [sort]=\"sort\"\r\n [sort-dir]=\"sortdir\"\r\n [busy]=\"busy\"\r\n (pageChanged)=\"emitPageChanged($event)\"\r\n (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n (sortChanged)=\"emitSortChanged($event)\"\r\n (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n <ng-content select=\"[pager-near-content]\" ngProjectAs=\"[pager-near-content]\"></ng-content>\r\n </lib-pager>\r\n</div>\r\n\r\n<ng-container [ngSwitch]=\"view\">\r\n\r\n <ng-container *ngSwitchCase=\"'tiles'\">\r\n <div [class]=\"tilesDeckClass\">\r\n\r\n <lib-skeleton-loader *ngIf=\"busy\"\r\n [count]=\"5\"\r\n [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n <ng-container *ngIf=\"items && items.length > 0\">\r\n <ng-container *ngFor=\"let item of items\">\r\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <!-- *ngSwitchCase=\"'gallery'\" -->\r\n <ng-container *ngSwitchCase=\"'gallery'\">\r\n <ul role=\"list\"\r\n [class]=\"tilesDeckClass\">\r\n\r\n <lib-skeleton-loader *ngIf=\"busy\"\r\n [count]=\"5\"\r\n [type]=\"'tiles'\"></lib-skeleton-loader>\r\n\r\n <ng-container *ngIf=\"!busy && items && items.length > 0\">\r\n <ng-container *ngFor=\"let item of items\">\r\n <span *ngIf=\"!tileTemplate || !tileTemplate.template\">template missing..</span>\r\n <ng-template [ngTemplateOutlet]=\"tileTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n </ng-container>\r\n\r\n <!-- *ngSwitchCase=\"'table'\" -->\r\n <ng-container *ngSwitchDefault>\r\n\r\n <div class=\"list-view-container\">\r\n <div class=\"list-view-container-inner\">\r\n <table class=\"list-view-table\">\r\n <thead class=\"list-view-thead\">\r\n <tr>\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <th class=\"list-view-th-details\"></th>\r\n </ng-container>\r\n <ng-container *ngFor=\"let col of columns\">\r\n <th scope=\"col\"\r\n [class]=\"col.fullWidth ? fullWidthTHClass : 'list-view-th'\">\r\n {{col.title}}\r\n </th>\r\n </ng-container>\r\n </tr>\r\n </thead>\r\n <tbody class=\"list-view-tbody\"\r\n *ngIf=\"busy\">\r\n <ng-container *ngFor=\"let item of loaderItems;let i=index\">\r\n <tr class=\"list-view-tr\">\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <td class=\"list-view-td-details\"\r\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n <button disabled\r\n type=\"button\"\r\n class=\"expand-collapse-button\">\r\n <!-- Heroicon name: solid/plus -->\r\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n </button>\r\n </td>\r\n <ng-template #hiddenDetailsButton>\r\n <td class=\"list-view-td-details\"></td>\r\n </ng-template>\r\n </ng-container>\r\n <td *ngFor=\"let col of columns\"\r\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n <div class=\"w-full animate-pulse h-8 bg-gray-200 rounded\"></div>\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <tr *ngIf=\"item.detailsExpanded\">\r\n <td [colSpan]=\"columns.length + 1\"\r\n class=\"list-view-td bg-gray-100\">\r\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </tbody>\r\n <tbody class=\"list-view-tbody\"\r\n *ngIf=\"!busy\">\r\n <ng-container *ngFor=\"let item of items;let i=index\">\r\n <tr class=\"list-view-tr\">\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <td class=\"list-view-td-details\"\r\n *ngIf=\"detailsSectionPropertyCount !== null ? item[detailsSectionPropertyCount] !== 0 : true; else hiddenDetailsButton\">\r\n <button (click)=\"toggleDetails(item)\"\r\n type=\"button\"\r\n class=\"expand-collapse-button\">\r\n <!-- Heroicon name: solid/plus -->\r\n <i [class]=\"item.detailsExpanded ? collapseIcon : expandIcon\"></i>\r\n </button>\r\n </td>\r\n <ng-template #hiddenDetailsButton>\r\n <td class=\"list-view-td-details\"></td>\r\n </ng-template>\r\n </ng-container>\r\n <td *ngFor=\"let col of columns\"\r\n [class]=\"col.fullWidth ? fullWidthTDClass : 'list-view-td'\">\r\n <ng-template [ngTemplateOutlet]=\"col.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </td>\r\n </tr>\r\n <ng-container *ngIf=\"detailsSectionSupported\">\r\n <tr *ngIf=\"item.detailsExpanded\">\r\n <td [colSpan]=\"columns.length + 1\"\r\n class=\"list-view-td bg-gray-100\">\r\n <ng-template [ngTemplateOutlet]=\"detailsTemplate.template\"\r\n [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-template>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!busy && items && items.length === 0\">\r\n <div class=\"cards-deck-1\">\r\n <lib-list-view-empty-state></lib-list-view-empty-state>\r\n </div>\r\n </ng-container>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div class=\"px-2 mt-2\"\r\n *ngIf=\"items && items.length !== 0 && showPager && (pagerPosition == 'bottom' || pagerPosition == 'both')\">\r\n <lib-pager [page]=\"page\"\r\n [page-size]=\"pageSize\"\r\n [count]=\"count\"\r\n [sort-options]=\"sortOptions\"\r\n [sort]=\"sort\"\r\n [sort-dir]=\"sortdir\"\r\n [busy]=\"busy\"\r\n (pageChanged)=\"emitPageChanged($event)\"\r\n (pageSizeChanged)=\"emitPageSizeChanged($event)\"\r\n (sortChanged)=\"emitSortChanged($event)\"\r\n (sortdirChanged)=\"emitSortdirChanged($event)\">\r\n </lib-pager>\r\n</div>" }]
|
|
@@ -2482,6 +2539,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImpor
|
|
|
2482
2539
|
class ToggleButtonsListComponent {
|
|
2483
2540
|
constructor() {
|
|
2484
2541
|
this.icon = undefined;
|
|
2542
|
+
this.compact = true;
|
|
2485
2543
|
this.valueChange = new EventEmitter(undefined);
|
|
2486
2544
|
}
|
|
2487
2545
|
ngOnInit() {
|
|
@@ -2492,16 +2550,18 @@ class ToggleButtonsListComponent {
|
|
|
2492
2550
|
}
|
|
2493
2551
|
}
|
|
2494
2552
|
ToggleButtonsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ToggleButtonsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2495
|
-
ToggleButtonsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ToggleButtonsListComponent, selector: "lib-toggle-buttons-list", inputs: { icon: "icon", options: "options", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"relative items-center inline-flex\">\n <div class=\"toggle-buttons-list-icon-container\" *ngIf=\"icon\">\n <i [class]=\"icon\"></i>\n </div>\n <div class=\"toggle-buttons-list-drop-down-contaner\">\n <lib-drop-down-menu class=\"toggle-buttons-list-drop-down\" [(selected)]=\"value\" (selectedChange)=\"selectOption($event)\" [options]=\"options\">\n </lib-drop-down-menu>\n </div>\n <div class=\"toggle-buttons-list\">\n <ng-template ngFor let-option [ngForOf]=\"options\" let-i=\"index\">\n <!-- [tooltip]=\"option.description\" -->\n <button type=\"button\"\n [disabled]=\"option.value === value\"\n [class.toggle-buttons-list-button-selected]=\"option.value === value\"\n class=\"toggle-buttons-list-button\"\n (click)=\"selectOption(option.value)\">\n <div class=\"toggle-buttons-list-button-icon-container\" *ngIf=\"option.icon\">\n <i [class]=\"option.icon\"></i>\n </div>\n <span class=\"toggle-buttons-list-button-button-text\">{{option.text}}</span>\n <span *ngIf=\"option.data && option.data.count\"\n
|
|
2553
|
+
ToggleButtonsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.3", type: ToggleButtonsListComponent, selector: "lib-toggle-buttons-list", inputs: { icon: "icon", options: "options", value: "value", compact: "compact" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"relative items-center inline-flex\">\n <div class=\"toggle-buttons-list-icon-container\" *ngIf=\"icon\">\n <i [class]=\"icon\"></i>\n </div>\n <div class=\"toggle-buttons-list-drop-down-compact-container\" *ngIf=\"compact\">\n <lib-drop-down-menu class=\"toggle-buttons-list-drop-down\" [(selected)]=\"value\" (selectedChange)=\"selectOption($event)\" [options]=\"options\">\n </lib-drop-down-menu>\n </div>\n\n <div class=\"toggle-buttons-list-drop-down-contaner\" *ngIf=\"!compact\">\n <lib-drop-down-menu class=\"toggle-buttons-list-drop-down\" [(selected)]=\"value\" (selectedChange)=\"selectOption($event)\" [options]=\"options\">\n </lib-drop-down-menu>\n </div>\n <div class=\"toggle-buttons-list\" *ngIf=\"!compact\">\n <ng-template ngFor let-option [ngForOf]=\"options\" let-i=\"index\">\n <!-- [tooltip]=\"option.description\" -->\n <button type=\"button\"\n [disabled]=\"option.value === value\"\n [class.toggle-buttons-list-button-selected]=\"option.value === value\"\n class=\"toggle-buttons-list-button\"\n (click)=\"selectOption(option.value)\">\n <div class=\"toggle-buttons-list-button-icon-container\" *ngIf=\"option.icon\">\n <i [class]=\"option.icon\"></i>\n </div>\n <span class=\"toggle-buttons-list-button-button-text\">{{option.text}}</span>\n <span *ngIf=\"option.data && option.data.count\"\n class=\"toggle-buttons-list-button-button-count\">{{option.data.count}}\n </span>\n </button>\n </ng-template>\n </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder", "show-icons"], outputs: ["selectedChange", "selectedChanged"] }] });
|
|
2496
2554
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.3", ngImport: i0, type: ToggleButtonsListComponent, decorators: [{
|
|
2497
2555
|
type: Component,
|
|
2498
|
-
args: [{ selector: 'lib-toggle-buttons-list', template: "<div class=\"relative items-center inline-flex\">\n <div class=\"toggle-buttons-list-icon-container\" *ngIf=\"icon\">\n <i [class]=\"icon\"></i>\n </div>\n <div class=\"toggle-buttons-list-drop-down-contaner\">\n <lib-drop-down-menu class=\"toggle-buttons-list-drop-down\" [(selected)]=\"value\" (selectedChange)=\"selectOption($event)\" [options]=\"options\">\n </lib-drop-down-menu>\n </div>\n <div class=\"toggle-buttons-list\">\n <ng-template ngFor let-option [ngForOf]=\"options\" let-i=\"index\">\n <!-- [tooltip]=\"option.description\" -->\n <button type=\"button\"\n [disabled]=\"option.value === value\"\n [class.toggle-buttons-list-button-selected]=\"option.value === value\"\n class=\"toggle-buttons-list-button\"\n (click)=\"selectOption(option.value)\">\n <div class=\"toggle-buttons-list-button-icon-container\" *ngIf=\"option.icon\">\n <i [class]=\"option.icon\"></i>\n </div>\n <span class=\"toggle-buttons-list-button-button-text\">{{option.text}}</span>\n <span *ngIf=\"option.data && option.data.count\"\n
|
|
2556
|
+
args: [{ selector: 'lib-toggle-buttons-list', template: "<div class=\"relative items-center inline-flex\">\n <div class=\"toggle-buttons-list-icon-container\" *ngIf=\"icon\">\n <i [class]=\"icon\"></i>\n </div>\n <div class=\"toggle-buttons-list-drop-down-compact-container\" *ngIf=\"compact\">\n <lib-drop-down-menu class=\"toggle-buttons-list-drop-down\" [(selected)]=\"value\" (selectedChange)=\"selectOption($event)\" [options]=\"options\">\n </lib-drop-down-menu>\n </div>\n\n <div class=\"toggle-buttons-list-drop-down-contaner\" *ngIf=\"!compact\">\n <lib-drop-down-menu class=\"toggle-buttons-list-drop-down\" [(selected)]=\"value\" (selectedChange)=\"selectOption($event)\" [options]=\"options\">\n </lib-drop-down-menu>\n </div>\n <div class=\"toggle-buttons-list\" *ngIf=\"!compact\">\n <ng-template ngFor let-option [ngForOf]=\"options\" let-i=\"index\">\n <!-- [tooltip]=\"option.description\" -->\n <button type=\"button\"\n [disabled]=\"option.value === value\"\n [class.toggle-buttons-list-button-selected]=\"option.value === value\"\n class=\"toggle-buttons-list-button\"\n (click)=\"selectOption(option.value)\">\n <div class=\"toggle-buttons-list-button-icon-container\" *ngIf=\"option.icon\">\n <i [class]=\"option.icon\"></i>\n </div>\n <span class=\"toggle-buttons-list-button-button-text\">{{option.text}}</span>\n <span *ngIf=\"option.data && option.data.count\"\n class=\"toggle-buttons-list-button-button-count\">{{option.data.count}}\n </span>\n </button>\n </ng-template>\n </div>\n</div>" }]
|
|
2499
2557
|
}], ctorParameters: function () { return []; }, propDecorators: { icon: [{
|
|
2500
2558
|
type: Input
|
|
2501
2559
|
}], options: [{
|
|
2502
2560
|
type: Input
|
|
2503
2561
|
}], value: [{
|
|
2504
2562
|
type: Input
|
|
2563
|
+
}], compact: [{
|
|
2564
|
+
type: Input
|
|
2505
2565
|
}], valueChange: [{
|
|
2506
2566
|
type: Output
|
|
2507
2567
|
}] } });
|