@updevs/components 1.0.0-alpha.8 → 1.0.0-alpha.9

package/table/src/table.component.ts

@@ -0,0 +1,434 @@
+import { Component, inject, signal, computed, effect, OnInit, Signal, model, ElementRef, viewChild } from '@angular/core';
+import { TablerIconsType } from '@updevs/icons';
+import { TextService } from '@updevs/sdk';
+import { SelectionModel, Tools, ServerResponseService } from '@updevs/sdk/core';
+import { OptionalType } from '@updevs/sdk/types';
+import { BaseComponent, ButtonModel, ButtonSizeType } from '@updevs/sdk/layout';
+import { SearchRequestModel, BaseSearchStore, ColumnSort, SortDirectionEnum, SearchResponseModel } from '@updevs/sdk/stores';
+import { ModalService, ModalRef, ModalAlertService } from '@updevs/components/modal';
+import { DropdownItem, DropdownActionClickedModel } from '@updevs/components/dropdown';
+import { distinctUntilChanged, tap, switchMap, finalize, Subject, catchError, of } from 'rxjs';
+
+import { TableConfig } from './models/table.config';
+import { TableConfigModel } from './models/table-config.model';
+import { BaseColumnModel } from './abstractions/base-column.model';
+import { FilterItemModel } from './models/filter-item.model';
+import { ColumnsManagerComponent } from './components/columns-manager/columns-manager.component';
+import { SaveSearchComponent } from './components/save-search/save-search.component';
+import { SavedViewModel } from './models/saved-view.model';
+import { SavedViewsStorage } from './services/storages/saved-views.storage';
+
+import Utils = Tools.Utils;
+
+@Component({
+    selector: 'upd-table',
+    templateUrl: './table.component.html',
+    styleUrl: './table.component.scss'
+})
+export class TableComponent<T> extends BaseComponent implements OnInit {
+    savedViewsRef = viewChild('savedViewsBtn', { read: ElementRef });
+    config = model.required<TableConfig<T>>();
+    isSearching = signal<boolean>(false);
+    selectedItems = computed<T[]>(() => this.selectionModel().selected());
+    activeSavedView = signal<OptionalType<SavedViewModel>>(undefined);
+    isMainCheckboxChecked = false;
+    isMainCheckboxIndeterminate = false;
+    isSavedViewsDropdownOpen = false;
+    get numberOfColumns(): number {
+        return this.columns().length + (this.configModel().hasCheckboxColumn ? 1 : 0) + (!!this.pendingWidthColClass ? 1 : 0);
+    }
+    get hasWidth(): boolean {
+        return this.columns().some(rec => !!rec.width);
+    }
+    get pendingWidthColClass(): string {
+        if (!this.hasWidth || this.isWidthInPixels) {
+            return '';
+        }
+
+        const isGrid = this.columns().some(rec => !!rec.width?.gridColumn);
+        const total = isGrid ? 12 : 100;
+        const remainingSize = total - this.columns().reduce((acc, item) => acc + item.widthSize, 0);
+
+        return remainingSize > 0 ? `${(isGrid ? 'col' : 'w')}-${remainingSize}` : '';
+    }
+    get isWidthInPixels(): boolean {
+        return this.columns().some(rec => !!rec.width?.pixels);
+    }
+
+    readonly searchRequest = model<SearchRequestModel>({});
+    readonly activeFilters = model<FilterItemModel[]>([]);
+    readonly hasSearchChanged = signal(false);
+    readonly currentPage = model<number>(1);
+    readonly totalRecords = signal<number>(0);
+    readonly pageSize = model<number>(0);
+    readonly configModel = computed(() => new TableConfigModel(this.config()));
+    readonly data: Signal<T[]> = computed(() => this.configModel().data.length > 0 ? this.configModel().data : this.currentData());
+    readonly selectionModel = computed(() => new SelectionModel<T>(this.configModel().getIdFunction));
+    readonly currentSorting = signal<OptionalType<ColumnSort>>(undefined);
+    readonly hiddenColumns = computed(() =>
+        this.configModel().canManageColumns ? this.configModel().columns.filter(c => c.isHidden).length : 0
+    );
+    readonly columns = signal<BaseColumnModel[]>([]);
+    readonly searchRequestSubject = new Subject<SearchRequestModel>();
+    readonly textService = inject(TextService);
+    readonly savedViewsOptions = computed<DropdownItem[]>(() => {
+        const allSavedViewsOptions: DropdownItem[] = [];
+        this.allSavedViews().forEach(sv => allSavedViewsOptions.push(this.getSavedViewOption(sv)));
+
+        return allSavedViewsOptions;
+    });
+
+    private get isRemote(): boolean {
+        return !!this.configModel().store;
+    }
+    private get store(): BaseSearchStore<T> {
+        return this.configModel().store!;
+    }
+    private shouldForceSearch = false;
+    private columnsBackup: BaseColumnModel[] = [];
+
+    private readonly currentData = signal<T[]>([]);
+    private readonly currentFavoriteButtons = computed<ButtonModel[]>(() => this.favoriteButtons);
+    private readonly smallSizeSignal = signal<ButtonSizeType>('small');
+    private readonly allSavedViews = computed(() => this.savedViewsStorage.getAll(this.configModel().name)());
+    private readonly favoriteButtons: ButtonModel[] = [];
+    private readonly serverResponseService = inject(ServerResponseService);
+    private readonly savedViewsStorage = inject(SavedViewsStorage);
+    private readonly modalService = inject(ModalService);
+    private readonly modalAlertService = inject(ModalAlertService);
+
+    constructor() {
+        super();
+
+        effect(() => {
+            if (this.data().length > 0 && this.configModel().data.length > 0) {
+                this.setupPreSelected();
+            }
+
+            if (this.selectedItems().length > 0) {
+                if (this.selectedItems().length !== this.data().length) {
+                    this.isMainCheckboxChecked = false;
+                    this.isMainCheckboxIndeterminate = true;
+                } else {
+                    this.isMainCheckboxIndeterminate = false;
+                    this.isMainCheckboxChecked = true;
+                }
+            } else {
+                this.isMainCheckboxChecked = false;
+                this.isMainCheckboxIndeterminate = false;
+            }
+        });
+    }
+
+    ngOnInit(): void {
+        this.columnsBackup = [...this.config().columns];
+        const searchSubjectSub = this.searchRequestSubject
+            .pipe(
+                distinctUntilChanged((prev, curr) => !this.shouldForceSearch || Utils.areEqual(prev, curr)),
+                tap((request) => {
+                    this.isSearching.set(true);
+                    this.currentData.set([]);
+                    this.searchRequest.set(request);
+
+                    if (
+                        (request.filters?.length || 0) > 0
+                        || (request.description || '').length > 0
+                        || (request.sortings?.length || 0) > 0
+                    ) {
+                        this.hasSearchChanged.set(true);
+                    }
+                }),
+                switchMap(() =>
+                    this.store.search(this.searchRequest()).pipe(
+                        catchError(() => of()) // Already handled by the ServerResponseService.
+                    )
+                ),
+                finalize(() => this.shouldForceSearch = false)
+            )
+            .subscribe(resp => this.setupSearchResults(resp));
+        const serverResponseSub = this.serverResponseService.onError.subscribe(error => {
+            if (!!error) {
+                this.isSearching.set(false);
+            }
+        });
+
+        if (this.configModel().shouldAutoSearch && this.isRemote) {
+            this.shouldForceSearch = true;
+            this.searchRequestSubject.next({});
+        }
+
+        this.updateColumns(this.configModel().columns);
+        this.addSubscriptions(searchSubjectSub, serverResponseSub);
+    }
+
+    toggleAllSelection(isChecked: boolean): void {
+        if (isChecked) {
+            this.selectionModel().select(...this.currentData());
+        } else {
+            this.selectionModel().clearSelection();
+        }
+    }
+
+    toggleItemSelection(record: T): void {
+        if (this.selectionModel().isSelected(record)) {
+            this.selectionModel().deselect(record);
+        } else {
+            this.selectionModel().select(record);
+        }
+    }
+
+    canSortColumn(columnName: string): boolean {
+        return this.getColumnByName(columnName).allowSort;
+    }
+
+    sortByColumn(columnName: string): void {
+        if (!this.currentSorting()) {
+            this.currentSorting.set(new ColumnSort({ column: columnName }));
+        } else {
+            this.currentSorting.set(
+                new ColumnSort({
+                    column: columnName,
+                    direction: this.currentSorting()!.column === columnName
+                        ? (this.currentSorting()!.direction === SortDirectionEnum.Asc ? SortDirectionEnum.Desc : SortDirectionEnum.Asc)
+                        : SortDirectionEnum.Asc
+                })
+            );
+        }
+
+        if (this.isRemote) {
+            this.searchRequest.set({
+                ...this.searchRequest(),
+                sortings: [this.currentSorting()!]
+            });
+            this.searchRequestSubject.next(this.searchRequest());
+        } else {
+            const col = this.getColumnByName(columnName);
+            // TODO: local sort
+        }
+    }
+
+    getSortingIcon(columnName: string): TablerIconsType {
+        return !!this.currentSorting() && this.currentSorting()!.column === columnName
+            ? (this.currentSorting()!.direction === SortDirectionEnum.Asc ? 'sort-ascending' : 'sort-descending')
+            : 'arrows-sort';
+    }
+
+    onPageSettingsChanged(): void {
+        this.searchRequest.set({
+            ...this.searchRequest(),
+            pageSize: this.pageSize(),
+            pageIndex: this.currentPage()
+        });
+        this.searchRequestSubject.next(this.searchRequest());
+    }
+
+    getRecordId(record: T): any {
+        return this.configModel().getIdFunction(record);
+    }
+
+    openColumnsManagerModal(): void {
+        const ref: ModalRef = this.modalService.open(undefined, {
+            bodyContentType: ColumnsManagerComponent,
+            showCloseButton: false,
+            showCancelButton: true,
+            data: this.config(),
+            isTextCentered: false,
+            actionButtons: [
+                new ButtonModel({
+                    text: signal({ text: 'UpDevs.Table.ColumnsManager.Apply', isTranslated: false }),
+                    colorStyle: signal('primary'),
+                    iconModel: signal({ tablerIcon: 'checks' }),
+                    clickFunction: () => ref.close()
+                })
+            ]
+        });
+        ref.afterClose = () => {
+            const result = ref.getBodyInstance<ColumnsManagerComponent<T>>()?.columns();
+
+            if (!!result) {
+                const previousVisibleColumnsOrder = this.columns().map(c => c.name);
+                const visibleColumnsNames = result.find(c => c.name === 'visible')?.items().map(i => i.name) || [];
+                const newColumns: BaseColumnModel[] = [];
+
+                this.config.update(config => {
+                    visibleColumnsNames.forEach(name => {
+                        const col = config.columns.find(c => c.name === name)!;
+                        col.isHidden = false;
+
+                        newColumns.push(col);
+                    });
+                    config.columns.forEach(c => {
+                        if (!visibleColumnsNames.includes(c.name)) {
+                            c.isHidden = true;
+                            newColumns.push(c);
+                        }
+                    });
+
+                    return { ...config, columns: [...newColumns] };
+                });
+                this.updateColumns(newColumns);
+
+                const newVisibleColumnsOrder = newColumns.map(c => c.name);
+
+                if (previousVisibleColumnsOrder.length !== newVisibleColumnsOrder.length
+                    || !previousVisibleColumnsOrder.every((v, i) => v === newVisibleColumnsOrder[i])) {
+                    this.hasSearchChanged.set(true);
+                }
+            }
+        };
+    }
+
+    openSaveSearchModal(data?: SavedViewModel): void {
+        data = data || {
+            tableName: this.configModel().name,
+            request: this.searchRequest(),
+            columns: this.configModel().columns
+        };
+        this.modalService.open(SaveSearchComponent, { showCloseButton: false, data });
+    }
+
+    selectSavedView(item: DropdownItem): void {
+        const savedView = this.savedViewsStorage.getById(this.configModel().name, item.id)();
+        this.isSavedViewsDropdownOpen = false;
+
+        if (!!savedView) {
+            this.updateColumns(savedView.columns);
+            this.config.update(curr => {
+                curr.columns = savedView.columns;
+                return { ...curr };
+            });
+            this.activeSavedView.set(savedView);
+            this.searchRequestSubject.next({ ...savedView.request });
+        }
+    }
+
+    resetViewState(): void {
+        this.activeSavedView.set(undefined);
+        this.updateColumns(this.columnsBackup);
+        this.config.update(curr => {
+            curr.columns = this.columnsBackup;
+            return { ...curr };
+        });
+        this.searchRequestSubject.next({});
+    }
+
+    private updateColumns(columns: BaseColumnModel[]): void {
+        this.columns.set(columns.filter(c => !c.isHidden).map(c => new BaseColumnModel(c.type, { ...c })));
+    }
+
+    private getColumnByName(columnName: string): BaseColumnModel {
+        const col = this.columns().find(c => c.name === columnName);
+
+        if (!col) {
+            throw Error('Tried accessing non existing column');
+        }
+
+        return col;
+    }
+
+    private setupPreSelected(): void {
+        this.configModel().preSelectedItems.forEach(item => {
+            const id = this.getRecordId(item);
+
+            if (this.data().find(d => this.getRecordId(d) === id) && !this.selectionModel().isSelected(item)) {
+                this.selectionModel().select(item);
+            }
+        });
+    }
+
+    private setupSearchResults(resp: SearchResponseModel<T>): void {
+        this.isSearching.set(false);
+        this.currentData.set(resp.records);
+        this.totalRecords.set(resp.totalRecords || 0);
+        this.currentPage.set(resp.pageIndex || 0);
+        this.pageSize.set(resp.pageSize || 0);
+        this.setupPreSelected();
+    }
+
+    private getActionButtons(currentFavoriteButtons: Signal<ButtonModel[]>, savedView: SavedViewModel): ButtonModel[] {
+        return [
+            new ButtonModel({
+                isIcon: signal(true),
+                isGhost: signal(true),
+                colorStyle: signal('primary'),
+                size: this.smallSizeSignal,
+                title: signal({ text: 'UpDevs.Table.SavedViews.MarkAsDefault', isTranslated: false }),
+                isActive: signal(savedView.isDefault || false),
+                iconModel: signal({ tablerIcon: 'heart' }),
+                clickFunction: (evt) => {
+                    const btnModel = (evt.data as DropdownActionClickedModel);
+                    const isButtonActive = btnModel.button.isActive();
+
+                    if (!isButtonActive) {
+                        this.savedViewsStorage.resetAllIsDefault(this.configModel().name);
+                    }
+
+                    savedView.isDefault = !isButtonActive;
+
+                    currentFavoriteButtons().forEach(cfb => cfb.isActive.set(false));
+                    btnModel.button.isActive.set(!isButtonActive);
+                    this.savedViewsStorage.saveView(savedView);
+                }
+            }),
+            new ButtonModel({
+                isIcon: signal(true),
+                isGhost: signal(true),
+                colorStyle: signal('secondary'),
+                size: this.smallSizeSignal,
+                title: signal({ text: 'UpDevs.Table.SavedViews.Duplicate', isTranslated: false }),
+                iconModel: signal({ tablerIcon: 'copy' }),
+                clickFunction: () => {
+                    const duplicateView = {
+                        ...savedView,
+                        id: Tools.Guid.generate(),
+                        name: savedView.name +
+                            ` (${this.textService.getText({ text: 'UpDevs.Table.SavedViews.DuplicateSuffix', isTranslated: false })})`
+                    };
+                    this.openSaveSearchModal(duplicateView);
+                }
+            }),
+            new ButtonModel({
+                isIcon: signal(true),
+                isGhost: signal(true),
+                colorStyle: signal('secondary'),
+                size: this.smallSizeSignal,
+                title: signal({ text: 'UpDevs.Table.SavedViews.Edit', isTranslated: false }),
+                iconModel: signal({ tablerIcon: 'edit' }),
+                clickFunction: () => this.openSaveSearchModal(savedView)
+            }),
+            new ButtonModel({
+                isIcon: signal(true),
+                isGhost: signal(true),
+                colorStyle: signal('danger'),
+                size: this.smallSizeSignal,
+                title: signal({ text: 'UpDevs.Table.SavedViews.Remove', isTranslated: false }),
+                iconModel: signal({ tablerIcon: 'x' }),
+                clickFunction: () => {
+                    const title = this.textService.getText(
+                        { text: 'UpDevs.Table.SavedViews.ConfirmRemove', isTranslated: false },
+                        { view: savedView.name }
+                    );
+                    this.modalAlertService.showConfirm({ text: title, isTranslated: true }).subscribe(isConfirmed => {
+                        if (isConfirmed) {
+                            this.savedViewsStorage.removeViews(this.configModel().name, savedView.id!);
+                        }
+                    });
+                }
+            })
+        ];
+    }
+
+    private getSavedViewOption(savedView: SavedViewModel): DropdownItem {
+        const actionButtons = this.getActionButtons(this.currentFavoriteButtons, savedView);
+        this.favoriteButtons.push(actionButtons.find(ab => ab.iconModel?.().tablerIcon === 'heart')!);
+
+        return {
+            id: savedView.id,
+            type: 'with-toolbar',
+            text: { text: savedView.name! },
+            toolbarType: 'spaced',
+            isActive: this.activeSavedView()?.id === savedView.id,
+            actionButtons
+        };
+    }
+}

package/table/src/tools/filters.tools.ts

@@ -0,0 +1,67 @@
+import {
+    BaseFilter,
+    DataTypeEnum,
+    BooleanColumnFilter,
+    FilterBooleanOperandEnum,
+    DateColumnFilter,
+    FilterDateOperandEnum,
+    NumberColumnFilter,
+    FilterNumberOperandEnum,
+    GuidColumnFilter,
+    FilterOperandEnum,
+    StringColumnFilter
+} from '@updevs/sdk/stores';
+import { NonNullableDictionaryType } from '@updevs/sdk/types';
+
+import { FilterItemModel } from '../models/filter-item.model';
+import { BaseColumnModel } from '../abstractions/base-column.model';
+import { FilterOperandConfig } from '../models/filter-operand.config';
+
+export class FilterTools {
+    static convertToFilterItem(filters: BaseFilter[], operands: NonNullableDictionaryType<FilterOperandConfig[]>): FilterItemModel[] {
+        return filters.map(f => ({
+            name: f.column,
+            value: f.value,
+            operandConfig: operands[f.dataType].find(op => op.operand === f.operand)
+        }));
+    }
+
+    static convertToRequestFilter(filters: FilterItemModel[], columns: BaseColumnModel[]): BaseFilter[] {
+        return filters.map(af => {
+            const col = columns.find(c => c.name === af.name);
+
+            switch (col?.dataType) {
+                case DataTypeEnum.Boolean:
+                    return new BooleanColumnFilter({
+                        column: af.name,
+                        value: af.value,
+                        operand: !!af.operandConfig ? <FilterBooleanOperandEnum> af.operandConfig.operand : undefined
+                    });
+                case DataTypeEnum.Date:
+                    return new DateColumnFilter({
+                        column: af.name,
+                        value: af.value,
+                        operand: !!af.operandConfig ? <FilterDateOperandEnum> af.operandConfig.operand : undefined
+                    });
+                case DataTypeEnum.Number:
+                    return new NumberColumnFilter({
+                        column: af.name,
+                        value: af.value,
+                        operand: !!af.operandConfig ? <FilterNumberOperandEnum> af.operandConfig.operand : undefined
+                    });
+                case DataTypeEnum.Guid:
+                    return new GuidColumnFilter({
+                        column: af.name,
+                        value: af.value,
+                        operand: !!af.operandConfig ? <FilterOperandEnum> af.operandConfig.operand : undefined
+                    });
+                default:
+                    return new StringColumnFilter({
+                        column: af.name,
+                        value: af.value,
+                        operand: !!af.operandConfig ? <FilterOperandEnum> af.operandConfig.operand : undefined
+                    });
+            }
+        });
+    }
+}

package/table/src/tools/table.constants.ts

@@ -0,0 +1,18 @@
+import { InjectionToken } from '@angular/core';
+
+import { UpdTableConfig } from '../models/upd-table.config';
+
+/**
+ * Table constants.
+ */
+export class TableConstants {
+    /**
+     * Key to inject the default configuration.
+     */
+    static defaultOptionsKey = 'upd-table-default-options';
+
+    /**
+     * Injection token for the default configuration.
+     */
+    static defaultOptionsInjectionToken = new InjectionToken<UpdTableConfig>(TableConstants.defaultOptionsKey);
+}

package/table/src/upd-table.module.ts

@@ -0,0 +1,104 @@
+import { NgModule, ModuleWithProviders, Provider } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UpdIconsModule } from '@updevs/icons';
+import { UpdButtonModule } from '@updevs/components/button';
+import { UpdModalModule } from '@updevs/components/modal';
+import { UpdPaginatorModule } from '@updevs/components/paginator';
+import { UpdInputModule } from '@updevs/components/form-controls/input';
+import { UpdCheckboxModule } from '@updevs/components/form-controls/checkbox';
+import { UpdSelectModule } from '@updevs/components/form-controls/select';
+import { UpdTimePickerModule } from '@updevs/components/form-controls/time-picker';
+import { UpdDragAndDropModule } from '@updevs/components/drag-and-drop';
+import { UpdFormModule } from '@updevs/components/form';
+import { UpdBadgeModule } from '@updevs/components/badge';
+import { UpdPopoverModule } from '@updevs/components/popover';
+import { UpdDropdownModule } from '@updevs/components/dropdown';
+import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
+
+import * as en from './assets/i18n/en.json';
+import * as pt from './assets/i18n/pt.json';
+import { TableComponent } from './table.component';
+import { DefaultFiltersOperandsService } from './services/default-filters-operands.service';
+import { UpdTableConfig } from './models/upd-table.config';
+import { TableConstants } from './tools/table.constants';
+import { FiltersOperandsService } from './abstractions/filters-operands.service';
+import { UpdTableConfigService } from './services/upd-table-config.service';
+import { FiltersOperandsStore } from './services/stores/filters-operands.store';
+import { SearchSectionComponent } from './components/search-section/search-section.component';
+import { FilterRowComponent } from './components/filter-row/filter-row.component';
+import { TableColumnDirective } from './directives/table-column.directive';
+import { NumberColumnComponent } from './components/columns/number-column/number-column.component';
+import { DateTimeColumnComponent } from './components/columns/date-time-column/date-time-column.component';
+import { BooleanColumnComponent } from './components/columns/boolean-column/boolean-column.component';
+import { TextColumnComponent } from './components/columns/text-column/text-column.component';
+import { ColumnsManagerComponent } from './components/columns-manager/columns-manager.component';
+import { SaveSearchComponent } from './components/save-search/save-search.component';
+import { SavedViewsStorage } from './services/storages/saved-views.storage';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TranslocoDirective,
+        UpdIconsModule,
+        UpdButtonModule,
+        UpdModalModule,
+        UpdPaginatorModule,
+        UpdInputModule,
+        UpdCheckboxModule,
+        UpdSelectModule,
+        UpdDragAndDropModule,
+        UpdFormModule,
+        UpdDropdownModule,
+        UpdTimePickerModule,
+        UpdBadgeModule,
+        UpdPopoverModule
+    ],
+    declarations: [
+        TableComponent,
+        SearchSectionComponent,
+        FilterRowComponent,
+        TableColumnDirective,
+        NumberColumnComponent,
+        DateTimeColumnComponent,
+        BooleanColumnComponent,
+        TextColumnComponent,
+        ColumnsManagerComponent,
+        SaveSearchComponent
+    ],
+    exports: [
+        TableComponent,
+        TableColumnDirective
+    ],
+    providers: [
+        UpdTableConfigService,
+        FiltersOperandsStore,
+        SavedViewsStorage
+    ]
+})
+export class UpdTableModule {
+    constructor(translocoService: TranslocoService) {
+        translocoService.setTranslation(en, 'en');
+        translocoService.setTranslation(pt, 'pt');
+    }
+
+    /**
+     * Sets up the table module with the provided configuration.
+     * @param config Configuration.
+     */
+    static forRoot(config: UpdTableConfig): ModuleWithProviders<UpdTableModule> {
+        const customizableProviders: Provider[] = [
+            config.filtersOperandsService || {
+                provide: FiltersOperandsService,
+                useClass: DefaultFiltersOperandsService
+            }
+        ];
+
+        return {
+            ngModule: UpdTableModule,
+            providers: [
+                { provide: TableConstants.defaultOptionsInjectionToken, useValue: config },
+                ...customizableProviders
+            ]
+        };
+    }
+}

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+    "compilerOptions": {
+        "target": "es2022",
+        "useDefineForClassFields": false,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "files": [],
+    "include": [],
+    "references": [
+        {
+            "path": "./tsconfig.lib.json"
+        },
+        {
+            "path": "./tsconfig.spec.json"
+        }
+    ],
+    "extends": "../../tsconfig.base.json",
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "strictTemplates": true
+    }
+}

package/tsconfig.lib.json

@@ -0,0 +1,18 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../dist/out-tsc",
+        "declaration": true,
+        "declarationMap": true,
+        "inlineSources": true
+    },
+    "exclude": [
+        "src/**/*.spec.ts",
+        "src/test-setup.ts",
+        "jest.config.ts",
+        "src/**/*.test.ts"
+    ],
+    "include": [
+        "*/**/*.ts"
+    ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,9 @@
+{
+    "extends": "./tsconfig.lib.json",
+    "compilerOptions": {
+        "declarationMap": false
+    },
+    "angularCompilerOptions": {
+        "compilationMode": "partial"
+    }
+}