/*
 * Copyright 2015-2024 Ritense BV, the Netherlands.
 *
 * Licensed under EUPL, Version 1.2 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" basis,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { Component, EventEmitter, Input, Output, ViewChild, } from '@angular/core';
import { BehaviorSubject, fromEvent } from 'rxjs';
import { debounceTime, take } from 'rxjs/operators';
import { get as _get } from 'lodash';
import * as i0 from "@angular/core";
import * as i1 from "../view-content/view-content.service";
import * as i2 from "ngx-logger";
import * as i3 from "@angular/common";
import * as i4 from "@ng-bootstrap/ng-bootstrap";
import * as i5 from "@angular/forms";
import * as i6 from "@ngx-translate/core";
import * as i7 from "./ListFilterPipe.directive";
/**
 * @deprecated This component is deprecated. Please switch to using valtimo-carbon-list.
 */
export class ListComponent {
    static { this.PAGINATION_SIZE = 'PaginationSize'; }
    constructor(viewContentService, logger) {
        this.viewContentService = viewContentService;
        this.logger = logger;
        this.actions = [];
        this.rowClicked = new EventEmitter();
        this.paginationClicked = new EventEmitter();
        this.paginationSet = new EventEmitter();
        this.search = new EventEmitter();
        this.sortChanged = new EventEmitter();
        this.headerProvided = false;
        this.regExpStringRemoveUnderscore = /_/g;
        this.sort$ = new BehaviorSubject({
            state: { name: '', direction: 'DESC' },
            isSorting: false,
        });
        this.viewListAs = localStorage.getItem('viewListAs') || 'table';
    }
    loadPaginationSize() {
        const entries = localStorage.getItem(`${this.paginationIdentifier}${ListComponent.PAGINATION_SIZE}`);
        if (entries !== null) {
            this.pagination.size = +entries;
            this.paginationSet.emit(+entries);
            this.logger.debug('Pagination loaded from local storage for this list. Current: ', entries);
        }
        else {
            this.logger.debug('Pagination does NOT exist in local storage for this list. Will use default. Change it to create an entry.');
            this.paginationSet.emit(10);
        }
    }
    setPaginationSize(numberOfEntries) {
        localStorage.setItem(`${this.paginationIdentifier}${ListComponent.PAGINATION_SIZE}`, numberOfEntries);
        this.pagination.size = numberOfEntries;
        this.logger.debug('Pagination set in local storage for this list: ', numberOfEntries);
        this.paginationSet.emit(numberOfEntries);
    }
    ngOnInit() {
        if (this.pagination) {
            this.loadPaginationSize();
        }
        if (this.initialSortState) {
            this.sort$.next(this.initialSortState);
        }
    }
    ngOnChanges(changes) {
        if (changes.items && changes.items.currentValue) {
            this.transformListItemsMatchFields();
        }
        if (changes?.initialSortState?.currentValue) {
            this.sort$.next(changes?.initialSortState?.currentValue);
        }
    }
    ngAfterViewInit() {
        if (this.isSearchable) {
            fromEvent(this.searchBox.nativeElement, 'keyup')
                .pipe(debounceTime(500))
                .subscribe(() => {
                const value = this.searchBox.nativeElement.value;
                if (this.search.observers.length > 0) {
                    // custom search callbak is specified, perhaps to query on the server side
                    this.search.emit(value);
                }
                else {
                    this.searchModel = value;
                }
            });
        }
    }
    transformListItemsMatchFields() {
        if (this.items && this.fields) {
            this.items.forEach(item => {
                item.listItemFields = this.fields.map(field => ({
                    key: field.key,
                    label: field.label,
                    type: field.type || '',
                    value: this.resolveObject(field, item),
                }));
            });
        }
    }
    onClickRow(item) {
        this.rowClicked.emit(item);
    }
    resolveObject(definition, obj) {
        const definitionKey = definition.key;
        const customPropString = '$.';
        const key = definitionKey.includes(customPropString)
            ? definitionKey.split(customPropString)[1]
            : definitionKey;
        const resolvedObjValue = _get(obj, key, null);
        return this.viewContentService.get(resolvedObjValue, definition);
    }
    switchView(type) {
        localStorage.setItem('viewListAs', type);
        this.viewListAs = type;
    }
    getTotalPageCount() {
        return Math.ceil(this.pagination.collectionSize / this.pagination.size);
    }
    onClickPagination(page) {
        this.paginationClicked.emit(page);
    }
    handleFieldClick(key, sortable) {
        const desc = 'DESC';
        const asc = 'ASC';
        if (!sortable) {
            return;
        }
        this.sort$.pipe(take(1)).subscribe(sort => {
            let newState;
            if (sort.state.name === key) {
                if (!sort.isSorting) {
                    newState = { state: { ...sort.state, direction: desc }, isSorting: true };
                }
                else {
                    if (sort.state.direction === desc) {
                        newState = { ...sort, state: { ...sort.state, direction: asc } };
                    }
                    else {
                        newState = { state: { ...sort.state, direction: desc }, isSorting: false };
                    }
                }
            }
            else {
                newState = { state: { name: key, direction: desc }, isSorting: true };
            }
            this.sort$.next(newState);
            this.sortChanged.emit(newState);
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ListComponent, deps: [{ token: i1.ViewContentService }, { token: i2.NGXLogger }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ListComponent, selector: "valtimo-list", inputs: { items: "items", fields: "fields", pagination: "pagination", viewMode: "viewMode", isSearchable: "isSearchable", header: "header", actions: "actions", paginationIdentifier: "paginationIdentifier", initialSortState: "initialSortState", lastColumnTemplate: "lastColumnTemplate" }, outputs: { rowClicked: "rowClicked", paginationClicked: "paginationClicked", paginationSet: "paginationSet", search: "search", sortChanged: "sortChanged" }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div>\n  <div *ngIf=\"(items?.length > 0 && fields?.length > 0) || header\">\n    <div\n      class=\"d-flex align-items-center search-holder bg-light\"\n      [ngClass]=\"{'pb-4 pt-4': !header}\"\n      *ngIf=\"isSearchable || viewMode || header\"\n    >\n      <div class=\"align-self-start\">\n        <ng-content select=\"[header]\"></ng-content>\n      </div>\n\n      <div class=\"ml-auto row\">\n        <input\n          *ngIf=\"isSearchable\"\n          class=\"form-control col-sm-8\"\n          type=\"text\"\n          placeholder=\"{{ 'list.search' | translate }}\"\n          #searchBox\n        />\n\n        <div\n          class=\"switch-view-holder btn-group col-sm-4 mt-1 mt-sm-0\"\n          role=\"group\"\n          *ngIf=\"viewMode\"\n        >\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'table' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('table')\"\n          >\n            <i class=\"icon mdi mdi-view-headline view-icon\"></i>\n          </button>\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'tile' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('tile')\"\n          >\n            <i class=\"icon mdi mdi-view-module view-icon\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <div *ngIf=\"items?.length > 0 && fields?.length > 0\">\n    <div class=\"table-responsive noSwipe\" *ngIf=\"!viewMode || viewListAs === 'table'\">\n      <table class=\"table table-striped table-hover m-0\" *ngIf=\"sort$ | async as sort\">\n        <thead>\n          <tr>\n            <th\n              *ngFor=\"let field of fields\"\n              (click)=\"handleFieldClick(field.key, field.sortable)\"\n              [ngClass]=\"{\n                sortable: field.sortable,\n                'is-being-sorted': field.key === sort.state.name && sort.isSorting,\n                ascending: sort.state.direction === 'ASC',\n              }\"\n            >\n              {{ field.label }}\n            </th>\n            <th *ngFor=\"let action of actions\">\n              {{ action.columnName }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            [ngClass]=\"{'click-able': this.rowClicked.observers.length > 0}\"\n            *ngFor=\"let item of items | listFilter: searchModel; let i = index\"\n            (click)=\"onClickRow(item)\"\n          >\n            <td class=\"align-top\" *ngFor=\"let listItemField of item.listItemFields\">\n              <ng-container\n                *ngIf=\"\n                  listItemField.type === '' && {\n                    valueTranslationKey: 'viewTypeConverter.' + listItemField.value,\n                    valueTranslation: 'viewTypeConverter.' + listItemField.value | translate,\n                  } as vars\n                \"\n              >\n                {{\n                  listItemField.value\n                    ? vars.valueTranslation !== vars.valueTranslationKey\n                      ? vars.valueTranslation\n                      : listItemField.value\n                    : '-'\n                }}\n              </ng-container>\n\n              <ng-container\n                *ngIf=\"listItemField.type === 'dropdownActions'\"\n                [ngTemplateOutlet]=\"dropdownActions\"\n                [ngTemplateOutletContext]=\"{listItemField: listItemField, item: item}\"\n              ></ng-container>\n            </td>\n            <td class=\"align-top\" *ngFor=\"let action of actions\">\n              <i\n                class=\"action-icon\"\n                style=\"cursor: pointer\"\n                [ngClass]=\"action.iconClass\"\n                (click)=\"action.callback(item, $event)\"\n              ></i>\n            </td>\n            <td *ngIf=\"lastColumnTemplate\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  lastColumnTemplate;\n                  context: {index: i, length: items.length, item: item}\n                \"\n              ></ng-container>\n            </td>\n          </tr>\n          <tr>\n            <td *ngIf=\"(items | listFilter: searchModel).length === 0\" [colSpan]=\"fields.length\">\n              {{ 'list.noMatchingItems' | translate }}<i>\"{{ searchModel }}\"</i>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <div class=\"container-fluid\" *ngIf=\"viewMode && viewListAs === 'tile'\">\n      <div class=\"row p-2\">\n        <div\n          class=\"col-12 col-sm-6 col-xl-4 p-2\"\n          *ngFor=\"let item of items | listFilter: searchModel\"\n          (click)=\"onClickRow(item)\"\n        >\n          <div class=\"click-able tile-holder p-4\">\n            <dl class=\"row mb-0\" *ngFor=\"let listItemField of item.listItemFields\">\n              <dt class=\"col-12 col-md-5 text-xl-right\">{{ listItemField.label }}</dt>\n              <dd class=\"col-12 col-md-7\">{{ listItemField.value || '-' }}</dd>\n            </dl>\n          </div>\n        </div>\n        <div class=\"col-12\" *ngIf=\"(items | listFilter: searchModel).length === 0\">\n          {{ 'list.noMatchingItems' | translate }}<i>\"{{ searchModel }}\"</i>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"pagination-holder bg-light px-4 pt-4 pb-2 overflow-auto row mr-0 ml-0\"\n    *ngIf=\"pagination && items?.length > 0 && fields?.length > 0\"\n  >\n    <div class=\"float-left page-count col-4\">\n      <strong>{{\n        'list.currentPage'\n          | translate\n            : {current: pagination.page > 0 ? pagination.page : 1, total: getTotalPageCount()}\n      }}</strong>\n      {{\n        pagination.collectionSize === 1\n          ? ('list.showingResult' | translate: {number: (items | listFilter: searchModel).length})\n          : ('list.showingResults'\n            | translate\n              : {\n                  number: (items | listFilter: searchModel).length,\n                  total: pagination.collectionSize,\n                })\n      }}\n    </div>\n    <div class=\"col-4 text-center\">\n      {{ 'list.show' | translate }}\n      <select [(ngModel)]=\"pagination.size\" (ngModelChange)=\"setPaginationSize($event)\">\n        <option [ngValue]=\"10\">10</option>\n        <option [ngValue]=\"25\">25</option>\n        <option [ngValue]=\"50\">50</option>\n        <option [ngValue]=\"100\">100</option>\n      </select>\n      {{ 'list.entries' | translate }}\n    </div>\n    <div class=\"col-4\">\n      <ngb-pagination\n        *ngIf=\"pagination.collectionSize > pagination.size\"\n        class=\"float-right\"\n        [collectionSize]=\"pagination.collectionSize\"\n        [(page)]=\"pagination.page\"\n        [pageSize]=\"pagination.size\"\n        [rotate]=\"true\"\n        (pageChange)=\"onClickPagination(pagination.page)\"\n      ></ngb-pagination>\n    </div>\n  </div>\n\n  <div id=\"no-results\" class=\"p-5\" *ngIf=\"items?.length === 0\">\n    {{ 'list.noResults' | translate }}\n  </div>\n\n  <div id=\"no-field-definitions\" class=\"p-5\" *ngIf=\"items?.length > 0 && fields?.length === 0\">\n    {{ 'list.noFieldDefinitions' | translate }}\n  </div>\n</div>\n\n<ng-template #dropdownActions let-listItemField=\"listItemField\" let-item=\"item\">\n  <div class=\"dropdown\" *ngIf=\"listItemField?.value.length > 0\">\n    <a\n      style=\"cursor: pointer\"\n      class=\"dropdown-toggle d-block\"\n      id=\"dropdownMenu\"\n      data-toggle=\"dropdown\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\"\n    >\n      <i class=\"action-icon icon mdi mdi-dots-vertical\"></i>\n    </a>\n    <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenu\">\n      <a\n        (click)=\"action.callback(item, $event)\"\n        class=\"dropdown-item p-2\"\n        *ngFor=\"let action of listItemField.value\"\n      >\n        <ng-container *ngIf=\"action.iconClass !== null\">\n          <i [ngClass]=\"action.iconClass\"></i>\n        </ng-container>\n        {{ action?.label || '-' }}\n      </a>\n    </div>\n  </div>\n</ng-template>\n", styles: [".table{table-layout:fixed}.table-responsive{overflow-x:visible}.click-able{cursor:pointer}.pagination-holder{border-top:1px solid #dee2e6}.search-holder{border-bottom:1px solid #dee2e6;padding-left:18px;padding-right:18px;height:80px}.switch-view-holder i{font-size:1.8rem;line-height:1.2rem;margin-top:9px}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}.page-count{margin-bottom:1rem;display:flex;flex-direction:column}.page-count strong:first-child{margin-bottom:6px}th:first-child,td:first-child{padding-left:25px}th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}th.sortable:after{font-family:\"Font Awesome 5 Free\";content:\" \\f0dd\";position:absolute;margin:auto 0 auto 5px;opacity:0;transition:all .15s ease}th.sortable.is-being-sorted.ascending:after{transform:rotate(-180deg)}th.sortable:hover:after{opacity:.5}th.sortable.is-being-sorted:after{opacity:1}.action-icon,.view-icon{font-size:16px!important}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i7.ListFilterPipe, name: "listFilter" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'valtimo-list', template: "<!--\n  ~ Copyright 2015-2024 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div>\n  <div *ngIf=\"(items?.length > 0 && fields?.length > 0) || header\">\n    <div\n      class=\"d-flex align-items-center search-holder bg-light\"\n      [ngClass]=\"{'pb-4 pt-4': !header}\"\n      *ngIf=\"isSearchable || viewMode || header\"\n    >\n      <div class=\"align-self-start\">\n        <ng-content select=\"[header]\"></ng-content>\n      </div>\n\n      <div class=\"ml-auto row\">\n        <input\n          *ngIf=\"isSearchable\"\n          class=\"form-control col-sm-8\"\n          type=\"text\"\n          placeholder=\"{{ 'list.search' | translate }}\"\n          #searchBox\n        />\n\n        <div\n          class=\"switch-view-holder btn-group col-sm-4 mt-1 mt-sm-0\"\n          role=\"group\"\n          *ngIf=\"viewMode\"\n        >\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'table' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('table')\"\n          >\n            <i class=\"icon mdi mdi-view-headline view-icon\"></i>\n          </button>\n          <button\n            class=\"btn\"\n            [ngClass]=\"viewListAs === 'tile' ? 'btn-primary' : 'btn-default'\"\n            (click)=\"switchView('tile')\"\n          >\n            <i class=\"icon mdi mdi-view-module view-icon\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-content select=\"[tabs]\"></ng-content>\n\n  <div *ngIf=\"items?.length > 0 && fields?.length > 0\">\n    <div class=\"table-responsive noSwipe\" *ngIf=\"!viewMode || viewListAs === 'table'\">\n      <table class=\"table table-striped table-hover m-0\" *ngIf=\"sort$ | async as sort\">\n        <thead>\n          <tr>\n            <th\n              *ngFor=\"let field of fields\"\n              (click)=\"handleFieldClick(field.key, field.sortable)\"\n              [ngClass]=\"{\n                sortable: field.sortable,\n                'is-being-sorted': field.key === sort.state.name && sort.isSorting,\n                ascending: sort.state.direction === 'ASC',\n              }\"\n            >\n              {{ field.label }}\n            </th>\n            <th *ngFor=\"let action of actions\">\n              {{ action.columnName }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr\n            [ngClass]=\"{'click-able': this.rowClicked.observers.length > 0}\"\n            *ngFor=\"let item of items | listFilter: searchModel; let i = index\"\n            (click)=\"onClickRow(item)\"\n          >\n            <td class=\"align-top\" *ngFor=\"let listItemField of item.listItemFields\">\n              <ng-container\n                *ngIf=\"\n                  listItemField.type === '' && {\n                    valueTranslationKey: 'viewTypeConverter.' + listItemField.value,\n                    valueTranslation: 'viewTypeConverter.' + listItemField.value | translate,\n                  } as vars\n                \"\n              >\n                {{\n                  listItemField.value\n                    ? vars.valueTranslation !== vars.valueTranslationKey\n                      ? vars.valueTranslation\n                      : listItemField.value\n                    : '-'\n                }}\n              </ng-container>\n\n              <ng-container\n                *ngIf=\"listItemField.type === 'dropdownActions'\"\n                [ngTemplateOutlet]=\"dropdownActions\"\n                [ngTemplateOutletContext]=\"{listItemField: listItemField, item: item}\"\n              ></ng-container>\n            </td>\n            <td class=\"align-top\" *ngFor=\"let action of actions\">\n              <i\n                class=\"action-icon\"\n                style=\"cursor: pointer\"\n                [ngClass]=\"action.iconClass\"\n                (click)=\"action.callback(item, $event)\"\n              ></i>\n            </td>\n            <td *ngIf=\"lastColumnTemplate\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  lastColumnTemplate;\n                  context: {index: i, length: items.length, item: item}\n                \"\n              ></ng-container>\n            </td>\n          </tr>\n          <tr>\n            <td *ngIf=\"(items | listFilter: searchModel).length === 0\" [colSpan]=\"fields.length\">\n              {{ 'list.noMatchingItems' | translate }}<i>\"{{ searchModel }}\"</i>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <div class=\"container-fluid\" *ngIf=\"viewMode && viewListAs === 'tile'\">\n      <div class=\"row p-2\">\n        <div\n          class=\"col-12 col-sm-6 col-xl-4 p-2\"\n          *ngFor=\"let item of items | listFilter: searchModel\"\n          (click)=\"onClickRow(item)\"\n        >\n          <div class=\"click-able tile-holder p-4\">\n            <dl class=\"row mb-0\" *ngFor=\"let listItemField of item.listItemFields\">\n              <dt class=\"col-12 col-md-5 text-xl-right\">{{ listItemField.label }}</dt>\n              <dd class=\"col-12 col-md-7\">{{ listItemField.value || '-' }}</dd>\n            </dl>\n          </div>\n        </div>\n        <div class=\"col-12\" *ngIf=\"(items | listFilter: searchModel).length === 0\">\n          {{ 'list.noMatchingItems' | translate }}<i>\"{{ searchModel }}\"</i>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div\n    class=\"pagination-holder bg-light px-4 pt-4 pb-2 overflow-auto row mr-0 ml-0\"\n    *ngIf=\"pagination && items?.length > 0 && fields?.length > 0\"\n  >\n    <div class=\"float-left page-count col-4\">\n      <strong>{{\n        'list.currentPage'\n          | translate\n            : {current: pagination.page > 0 ? pagination.page : 1, total: getTotalPageCount()}\n      }}</strong>\n      {{\n        pagination.collectionSize === 1\n          ? ('list.showingResult' | translate: {number: (items | listFilter: searchModel).length})\n          : ('list.showingResults'\n            | translate\n              : {\n                  number: (items | listFilter: searchModel).length,\n                  total: pagination.collectionSize,\n                })\n      }}\n    </div>\n    <div class=\"col-4 text-center\">\n      {{ 'list.show' | translate }}\n      <select [(ngModel)]=\"pagination.size\" (ngModelChange)=\"setPaginationSize($event)\">\n        <option [ngValue]=\"10\">10</option>\n        <option [ngValue]=\"25\">25</option>\n        <option [ngValue]=\"50\">50</option>\n        <option [ngValue]=\"100\">100</option>\n      </select>\n      {{ 'list.entries' | translate }}\n    </div>\n    <div class=\"col-4\">\n      <ngb-pagination\n        *ngIf=\"pagination.collectionSize > pagination.size\"\n        class=\"float-right\"\n        [collectionSize]=\"pagination.collectionSize\"\n        [(page)]=\"pagination.page\"\n        [pageSize]=\"pagination.size\"\n        [rotate]=\"true\"\n        (pageChange)=\"onClickPagination(pagination.page)\"\n      ></ngb-pagination>\n    </div>\n  </div>\n\n  <div id=\"no-results\" class=\"p-5\" *ngIf=\"items?.length === 0\">\n    {{ 'list.noResults' | translate }}\n  </div>\n\n  <div id=\"no-field-definitions\" class=\"p-5\" *ngIf=\"items?.length > 0 && fields?.length === 0\">\n    {{ 'list.noFieldDefinitions' | translate }}\n  </div>\n</div>\n\n<ng-template #dropdownActions let-listItemField=\"listItemField\" let-item=\"item\">\n  <div class=\"dropdown\" *ngIf=\"listItemField?.value.length > 0\">\n    <a\n      style=\"cursor: pointer\"\n      class=\"dropdown-toggle d-block\"\n      id=\"dropdownMenu\"\n      data-toggle=\"dropdown\"\n      aria-haspopup=\"true\"\n      aria-expanded=\"false\"\n    >\n      <i class=\"action-icon icon mdi mdi-dots-vertical\"></i>\n    </a>\n    <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenu\">\n      <a\n        (click)=\"action.callback(item, $event)\"\n        class=\"dropdown-item p-2\"\n        *ngFor=\"let action of listItemField.value\"\n      >\n        <ng-container *ngIf=\"action.iconClass !== null\">\n          <i [ngClass]=\"action.iconClass\"></i>\n        </ng-container>\n        {{ action?.label || '-' }}\n      </a>\n    </div>\n  </div>\n</ng-template>\n", styles: [".table{table-layout:fixed}.table-responsive{overflow-x:visible}.click-able{cursor:pointer}.pagination-holder{border-top:1px solid #dee2e6}.search-holder{border-bottom:1px solid #dee2e6;padding-left:18px;padding-right:18px;height:80px}.switch-view-holder i{font-size:1.8rem;line-height:1.2rem;margin-top:9px}.tile-holder{background-color:#f5f5f5;border:1px solid transparent}.tile-holder:hover{background-color:#eee;border:1px solid #dee2e6}.page-count{margin-bottom:1rem;display:flex;flex-direction:column}.page-count strong:first-child{margin-bottom:6px}th:first-child,td:first-child{padding-left:25px}th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}th.sortable:after{font-family:\"Font Awesome 5 Free\";content:\" \\f0dd\";position:absolute;margin:auto 0 auto 5px;opacity:0;transition:all .15s ease}th.sortable.is-being-sorted.ascending:after{transform:rotate(-180deg)}th.sortable:hover:after{opacity:.5}th.sortable.is-being-sorted:after{opacity:1}.action-icon,.view-icon{font-size:16px!important}\n/*!\n * Copyright 2015-2024 Ritense BV, the Netherlands.\n *\n * Licensed under EUPL, Version 1.2 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" basis,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n"] }]
        }], ctorParameters: () => [{ type: i1.ViewContentService }, { type: i2.NGXLogger }], propDecorators: { items: [{
                type: Input
            }], fields: [{
                type: Input
            }], pagination: [{
                type: Input
            }], viewMode: [{
                type: Input
            }], isSearchable: [{
                type: Input
            }], header: [{
                type: Input
            }], actions: [{
                type: Input
            }], paginationIdentifier: [{
                type: Input
            }], initialSortState: [{
                type: Input
            }], lastColumnTemplate: [{
                type: Input
            }], rowClicked: [{
                type: Output
            }], paginationClicked: [{
                type: Output
            }], paginationSet: [{
                type: Output
            }], search: [{
                type: Output
            }], sortChanged: [{
                type: Output
            }], searchBox: [{
                type: ViewChild,
                args: ['searchBox']
            }] } });
//# sourceMappingURL=data:application/json;base64, 