aril 0.0.6 → 0.0.7

package/fesm2022/aril-ui-treeTable.mjs

@@ -1,61 +1,57 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output } from '@angular/core';
+import { input, EventEmitter, Component, ChangeDetectionStrategy, Output, ContentChildren } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { NgFor, NgForOf, NgTemplateOutlet } from '@angular/common';
 import * as i1 from 'primeng/treetable';
 import { TreeTableModule } from 'primeng/treetable';
+import * as FileSaver from 'file-saver';
+import { ButtonComponent } from 'aril/ui/button';
+import { TextComponent } from 'aril/ui/text';
+import { TableColumnComponent } from 'aril/ui/table';
 import * as i2 from 'primeng/api';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
+const pageOptions = [10, 20, 50, 100];
 class TreeTableComponent {
     constructor() {
-        this.rows = 10;
-        this.rowsPerPageOptions = [10, 20, 50, 100];
-        this.scrollable = false;
-        this.loading = false;
-        this.sortMode = "single";
-        this.filterMode = "lenient";
-        this.selectionMode = "single";
-        this.selectEvent = new EventEmitter();
+        this.data = input.required();
+        this.checkboxSelection = input();
+        this.pageSize = input(10);
+        this.scrollable = input(false);
+        this.scrollHeight = input();
+        this.expandEvent = new EventEmitter();
+        this.selectionEvent = new EventEmitter();
+        this.pageOptions = pageOptions;
     }
-    getFilterTargetValue(event) {
-        const inputElement = event.target;
-        return inputElement.value;
+    excelExport() {
+        import('xlsx').then((xlsx) => {
+            const worksheet = xlsx.utils.json_to_sheet(this.data());
+            const workbook = { Sheets: { data: worksheet }, SheetNames: ['data'] };
+            const excelBuffer = xlsx.write(workbook, { bookType: 'xlsx', type: 'array' });
+            this.saveAsExcelFile(excelBuffer, 'excel_worksheet');
+        });
     }
-    emitSelectedRows() {
-        if (!this.selectedNodes)
-            return;
-        this.selectEvent.emit(this.selectedNodes);
-        this.selectedNodes = null;
+    saveAsExcelFile(buffer, fileName) {
+        const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
+        const EXCEL_EXTENSION = '.xlsx';
+        const data = new Blob([buffer], {
+            type: EXCEL_TYPE
+        });
+        FileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TreeTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: TreeTableComponent, isStandalone: true, selector: "aril-tree-table", inputs: { items: "items", columns: "columns", rows: "rows", rowsPerPageOptions: "rowsPerPageOptions", scrollable: "scrollable", scrollHeight: "scrollHeight", loading: "loading", sortMode: "sortMode", filterMode: "filterMode", selectionMode: "selectionMode" }, outputs: { selectEvent: "selectEvent" }, ngImport: i0, template: "@if (items && columns) {\r\n\t<p-treeTable\r\n\t\t#ref\r\n\t\t[value]=\"items\"\r\n\t\t[columns]=\"columns\"\r\n\t\t[rows]=\"rows\"\r\n\t\t[paginator]=\"true\"\r\n\t\t[rowsPerPageOptions]=\"rowsPerPageOptions\"\r\n\t\t[scrollable]=\"scrollable\"\r\n\t\t[scrollHeight]=\"scrollHeight\"\r\n\t\t[sortMode]=\"sortMode\"\r\n\t\t[filterMode]=\"filterMode\"\r\n\t\t[loading]=\"loading\"\r\n\t\t[selectionMode]=\"selectionMode\"\r\n\t\t[(selection)]=\"selectedNodes\"\r\n\t\tstyleClass=\"p-treetable-sm\">\r\n\t\t<ng-template pTemplate=\"caption\">\r\n\t\t\t<div class=\"flex justify-content-between align-items-center\">\r\n\t\t\t\t<div class=\"flex\">\r\n\t\t\t\t\t<p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>\r\n\t\t\t\t\t<span class=\"ml-2\">T\u00FCm\u00FCn\u00FC se\u00E7</span>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div class=\"p-input-icon-left\">\r\n\t\t\t\t\t<i class=\"pi pi-search\"></i>\r\n\t\t\t\t\t<input\r\n\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\tpInputText\r\n\t\t\t\t\t\tplaceholder=\"Arama\"\r\n\t\t\t\t\t\t(input)=\"\r\n\t\t\t\t\t\t\tref.filterGlobal(getFilterTargetValue($event), 'contains')\r\n\t\t\t\t\t\t\" />\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</ng-template>\r\n\t\t<ng-template pTemplate=\"header\" let-columns>\r\n\t\t\t<tr>\r\n\t\t\t\t@for (col of columns; track col) {\r\n\t\t\t\t\t<th [ttSortableColumn]=\"col.field\">\r\n\t\t\t\t\t\t<span>{{ col.header }}</span>\r\n\t\t\t\t\t\t<p-treeTableSortIcon [field]=\"col.field\"></p-treeTableSortIcon>\r\n\t\t\t\t\t</th>\r\n\t\t\t\t}\r\n\t\t\t</tr>\r\n\t\t</ng-template>\r\n\t\t<ng-template\r\n\t\t\tpTemplate=\"body\"\r\n\t\t\tlet-rowNode\r\n\t\t\tlet-rowData=\"rowData\"\r\n\t\t\tlet-columns=\"columns\">\r\n\t\t\t<tr [ttRow]=\"rowNode\">\r\n\t\t\t\t@for (col of columns; track col; let first = $first) {\r\n\t\t\t\t\t<td>\r\n\t\t\t\t\t\t@if (first) {\r\n\t\t\t\t\t\t\t<p-treeTableToggler [rowNode]=\"rowNode\"></p-treeTableToggler>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t@if (first) {\r\n\t\t\t\t\t\t\t<p-treeTableCheckbox [value]=\"rowNode\"></p-treeTableCheckbox>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t{{ rowData[col.field] }}\r\n\t\t\t\t\t</td>\r\n\t\t\t\t}\r\n\t\t\t</tr>\r\n\t\t</ng-template>\r\n\t\t<ng-template pTemplate=\"summary\">\r\n\t\t\t<div class=\"flex justify-content-end\">\r\n\t\t\t\t<div [attr.role]=\"'none'\" (click)=\"emitSelectedRows()\">\r\n\t\t\t\t\t<ng-content select=\"[exportBtn]\"></ng-content>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</ng-template>\r\n\t\t<ng-template pTemplate=\"emptymessage\">\r\n\t\t\t<tr>\r\n\t\t\t\t<td [attr.colspan]=\"columns.length\">Veri bulunamad\u0131..</td>\r\n\t\t\t</tr>\r\n\t\t</ng-template>\r\n\t</p-treeTable>\r\n}\r\n", styles: [":host ::ng-deep .p-icon-wrapper{display:inline-block!important}\n"], dependencies: [{ kind: "ngmodule", type: TreeTableModule }, { kind: "component", type: i1.TreeTable, selector: "p-treeTable", inputs: ["columns", "style", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i1.TreeTableToggler, selector: "p-treeTableToggler", inputs: ["rowNode"] }, { kind: "directive", type: i1.TTSortableColumn, selector: "[ttSortableColumn]", inputs: ["ttSortableColumn", "ttSortableColumnDisabled"] }, { kind: "component", type: i1.TTSortIcon, selector: "p-treeTableSortIcon", inputs: ["field", "ariaLabelDesc", "ariaLabelAsc"] }, { kind: "directive", type: i1.TTRow, selector: "[ttRow]", inputs: ["ttRow"] }, { kind: "component", type: i1.TTCheckbox, selector: "p-treeTableCheckbox", inputs: ["disabled", "value"] }, { kind: "component", type: i1.TTHeaderCheckbox, selector: "p-treeTableHeaderCheckbox" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: TreeTableComponent, isStandalone: true, selector: "aril-tree-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, checkboxSelection: { classPropertyName: "checkboxSelection", publicName: "checkboxSelection", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandEvent: "expandEvent", selectionEvent: "selectionEvent" }, queries: [{ propertyName: "columns", predicate: TableColumnComponent }], ngImport: i0, template: "<p-treeTable\r\n\t#ref\r\n\t[value]=\"data()\"\r\n\t[columns]=\"columns._results\"\r\n\t[rows]=\"pageSize()\"\r\n\t[rowHover]=\"true\"\r\n\t[paginator]=\"true\"\r\n\t[rowsPerPageOptions]=\"pageOptions\"\r\n\t[filterDelay]=\"0\"\r\n\tsortMode=\"multiple\"\r\n\t[scrollable]=\"scrollable()\"\r\n\t[scrollHeight]=\"scrollHeight()\"\r\n\t[(selection)]=\"selectedNodes\"\r\n\t(onNodeExpand)=\"expandEvent.emit($event.node)\"\r\n\t(selectionChange)=\"selectionEvent.emit(selectedNodes)\"\r\n\t[showCurrentPageReport]=\"true\"\r\n\tcurrentPageReportTemplate=\"Toplam : {totalRecords} kay\u0131t | Sayfa : {currentPage} / {totalPages}\"\r\n\tstyleClass=\"p-treetable-gridlines p-treetable-striped p-treetable-sm\">\r\n\t<ng-template pTemplate=\"caption\">\r\n\t\t<div class=\"flex\">\r\n\t\t\t<aril-button\r\n\t\t\t\tsize=\"sm\"\r\n\t\t\t\ticon=\"FILE_EXCEL\"\r\n\t\t\t\tcolor=\"primary\"\r\n\t\t\t\tpTooltip=\"XLS\"\r\n\t\t\t\ttooltipPosition=\"top\"\r\n\t\t\t\t(clickEvent)=\"excelExport()\">\r\n\t\t\t</aril-button>\r\n\t\t\t<!-- <span class=\"p-input-icon-left ml-auto\">\r\n\t\t\t\t<aril-text\r\n\t\t\t\t\ticon=\"SEARCH\"\r\n\t\t\t\t\ticonPos=\"left\"\r\n\t\t\t\t\tplaceholder=\"Arama\"\r\n\t\t\t\t\t[ngModel]=\"filterText\"\r\n\t\t\t\t\t(ngModelChange)=\"ref.filterGlobal($event, 'contains')\">\r\n\t\t\t\t</aril-text>\r\n\t\t\t</span> -->\r\n\t\t</div>\r\n\t</ng-template>\r\n\t<ng-template pTemplate=\"header\" let-columns>\r\n\t\t<tr>\r\n\t\t\t@if (checkboxSelection()) {\r\n\t\t\t\t<th>\r\n\t\t\t\t\t<p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>\r\n\t\t\t\t</th>\r\n\t\t\t}\r\n\t\t\t@for (column of columns; track $index) {\r\n\t\t\t\t@if (column.isOperation) {\r\n\t\t\t\t\t<th>\r\n\t\t\t\t\t\t<div class=\"flex justify-content-center\">Operations</div>\r\n\t\t\t\t\t</th>\r\n\t\t\t\t} @else {\r\n\t\t\t\t\t<th [ttSortableColumn]=\"column.field\">\r\n\t\t\t\t\t\t<div class=\"flex justify-content-between align-items-center\">\r\n\t\t\t\t\t\t\t{{ column.header }}\r\n\t\t\t\t\t\t\t<!-- <p-treeTableSortIcon [field]=\"column.field\"></p-treeTableSortIcon> -->\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</th>\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t</tr>\r\n\t</ng-template>\r\n\t<ng-template\r\n\t\tpTemplate=\"body\"\r\n\t\tlet-rowNode\r\n\t\tlet-rowData=\"rowData\"\r\n\t\tlet-columns=\"columns\">\r\n\t\t<tr [ttRow]=\"rowNode\">\r\n\t\t\t@if (checkboxSelection()) {\r\n\t\t\t\t<td>\r\n\t\t\t\t\t<p-treeTableCheckbox [value]=\"rowNode\"></p-treeTableCheckbox>\r\n\t\t\t\t</td>\r\n\t\t\t}\r\n\t\t\t@for (column of columns; track $index) {\r\n\t\t\t\t<td>\r\n\t\t\t\t\t@if ($first) {\r\n\t\t\t\t\t\t<p-treeTableToggler [rowNode]=\"rowNode\"></p-treeTableToggler>\r\n\t\t\t\t\t}\r\n\t\t\t\t\t<ng-template\r\n\t\t\t\t\t\tngFor\r\n\t\t\t\t\t\t[ngForOf]=\"[rowNode.node]\"\r\n\t\t\t\t\t\t[ngForTemplate]=\"column.template\">\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t</td>\r\n\t\t\t}\r\n\t\t</tr>\r\n\t</ng-template>\r\n\t<ng-template pTemplate=\"summary\">\r\n\t\t<ng-content select=\"[footer]\"></ng-content>\r\n\t</ng-template>\r\n\t<ng-template pTemplate=\"emptymessage\">\r\n\t\t<tr>\r\n\t\t\t<td [attr.colspan]=\"columns._results.length\">No Data Found</td>\r\n\t\t</tr>\r\n\t</ng-template>\r\n</p-treeTable>\r\n", dependencies: [{ kind: "ngmodule", type: TreeTableModule }, { kind: "component", type: i1.TreeTable, selector: "p-treeTable", inputs: ["columns", "style", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i1.TreeTableToggler, selector: "p-treeTableToggler", inputs: ["rowNode"] }, { kind: "directive", type: i1.TTSortableColumn, selector: "[ttSortableColumn]", inputs: ["ttSortableColumn", "ttSortableColumnDisabled"] }, { kind: "directive", type: i1.TTRow, selector: "[ttRow]", inputs: ["ttRow"] }, { kind: "component", type: i1.TTCheckbox, selector: "p-treeTableCheckbox", inputs: ["disabled", "value"] }, { kind: "component", type: i1.TTHeaderCheckbox, selector: "p-treeTableHeaderCheckbox" }, { kind: "component", type: ButtonComponent, selector: "aril-button:not([click])", inputs: ["label", "loading", "disabled", "raised", "outlined", "badge", "size", "icon", "color"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TreeTableComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'aril-tree-table', imports: [TreeTableModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (items && columns) {\r\n\t<p-treeTable\r\n\t\t#ref\r\n\t\t[value]=\"items\"\r\n\t\t[columns]=\"columns\"\r\n\t\t[rows]=\"rows\"\r\n\t\t[paginator]=\"true\"\r\n\t\t[rowsPerPageOptions]=\"rowsPerPageOptions\"\r\n\t\t[scrollable]=\"scrollable\"\r\n\t\t[scrollHeight]=\"scrollHeight\"\r\n\t\t[sortMode]=\"sortMode\"\r\n\t\t[filterMode]=\"filterMode\"\r\n\t\t[loading]=\"loading\"\r\n\t\t[selectionMode]=\"selectionMode\"\r\n\t\t[(selection)]=\"selectedNodes\"\r\n\t\tstyleClass=\"p-treetable-sm\">\r\n\t\t<ng-template pTemplate=\"caption\">\r\n\t\t\t<div class=\"flex justify-content-between align-items-center\">\r\n\t\t\t\t<div class=\"flex\">\r\n\t\t\t\t\t<p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>\r\n\t\t\t\t\t<span class=\"ml-2\">T\u00FCm\u00FCn\u00FC se\u00E7</span>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div class=\"p-input-icon-left\">\r\n\t\t\t\t\t<i class=\"pi pi-search\"></i>\r\n\t\t\t\t\t<input\r\n\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\tpInputText\r\n\t\t\t\t\t\tplaceholder=\"Arama\"\r\n\t\t\t\t\t\t(input)=\"\r\n\t\t\t\t\t\t\tref.filterGlobal(getFilterTargetValue($event), 'contains')\r\n\t\t\t\t\t\t\" />\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</ng-template>\r\n\t\t<ng-template pTemplate=\"header\" let-columns>\r\n\t\t\t<tr>\r\n\t\t\t\t@for (col of columns; track col) {\r\n\t\t\t\t\t<th [ttSortableColumn]=\"col.field\">\r\n\t\t\t\t\t\t<span>{{ col.header }}</span>\r\n\t\t\t\t\t\t<p-treeTableSortIcon [field]=\"col.field\"></p-treeTableSortIcon>\r\n\t\t\t\t\t</th>\r\n\t\t\t\t}\r\n\t\t\t</tr>\r\n\t\t</ng-template>\r\n\t\t<ng-template\r\n\t\t\tpTemplate=\"body\"\r\n\t\t\tlet-rowNode\r\n\t\t\tlet-rowData=\"rowData\"\r\n\t\t\tlet-columns=\"columns\">\r\n\t\t\t<tr [ttRow]=\"rowNode\">\r\n\t\t\t\t@for (col of columns; track col; let first = $first) {\r\n\t\t\t\t\t<td>\r\n\t\t\t\t\t\t@if (first) {\r\n\t\t\t\t\t\t\t<p-treeTableToggler [rowNode]=\"rowNode\"></p-treeTableToggler>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t@if (first) {\r\n\t\t\t\t\t\t\t<p-treeTableCheckbox [value]=\"rowNode\"></p-treeTableCheckbox>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t{{ rowData[col.field] }}\r\n\t\t\t\t\t</td>\r\n\t\t\t\t}\r\n\t\t\t</tr>\r\n\t\t</ng-template>\r\n\t\t<ng-template pTemplate=\"summary\">\r\n\t\t\t<div class=\"flex justify-content-end\">\r\n\t\t\t\t<div [attr.role]=\"'none'\" (click)=\"emitSelectedRows()\">\r\n\t\t\t\t\t<ng-content select=\"[exportBtn]\"></ng-content>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</ng-template>\r\n\t\t<ng-template pTemplate=\"emptymessage\">\r\n\t\t\t<tr>\r\n\t\t\t\t<td [attr.colspan]=\"columns.length\">Veri bulunamad\u0131..</td>\r\n\t\t\t</tr>\r\n\t\t</ng-template>\r\n\t</p-treeTable>\r\n}\r\n", styles: [":host ::ng-deep .p-icon-wrapper{display:inline-block!important}\n"] }]
-        }], propDecorators: { items: [{
-                type: Input,
-                args: [{ required: true }]
-            }], columns: [{
-                type: Input,
-                args: [{ required: true }]
-            }], rows: [{
-                type: Input
-            }], rowsPerPageOptions: [{
-                type: Input
-            }], scrollable: [{
-                type: Input
-            }], scrollHeight: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], sortMode: [{
-                type: Input
-            }], filterMode: [{
-                type: Input
-            }], selectionMode: [{
-                type: Input
-            }], selectEvent: [{
+            args: [{ standalone: true, selector: 'aril-tree-table', imports: [TreeTableModule, ButtonComponent, TextComponent, FormsModule, NgFor, NgForOf, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-treeTable\r\n\t#ref\r\n\t[value]=\"data()\"\r\n\t[columns]=\"columns._results\"\r\n\t[rows]=\"pageSize()\"\r\n\t[rowHover]=\"true\"\r\n\t[paginator]=\"true\"\r\n\t[rowsPerPageOptions]=\"pageOptions\"\r\n\t[filterDelay]=\"0\"\r\n\tsortMode=\"multiple\"\r\n\t[scrollable]=\"scrollable()\"\r\n\t[scrollHeight]=\"scrollHeight()\"\r\n\t[(selection)]=\"selectedNodes\"\r\n\t(onNodeExpand)=\"expandEvent.emit($event.node)\"\r\n\t(selectionChange)=\"selectionEvent.emit(selectedNodes)\"\r\n\t[showCurrentPageReport]=\"true\"\r\n\tcurrentPageReportTemplate=\"Toplam : {totalRecords} kay\u0131t | Sayfa : {currentPage} / {totalPages}\"\r\n\tstyleClass=\"p-treetable-gridlines p-treetable-striped p-treetable-sm\">\r\n\t<ng-template pTemplate=\"caption\">\r\n\t\t<div class=\"flex\">\r\n\t\t\t<aril-button\r\n\t\t\t\tsize=\"sm\"\r\n\t\t\t\ticon=\"FILE_EXCEL\"\r\n\t\t\t\tcolor=\"primary\"\r\n\t\t\t\tpTooltip=\"XLS\"\r\n\t\t\t\ttooltipPosition=\"top\"\r\n\t\t\t\t(clickEvent)=\"excelExport()\">\r\n\t\t\t</aril-button>\r\n\t\t\t<!-- <span class=\"p-input-icon-left ml-auto\">\r\n\t\t\t\t<aril-text\r\n\t\t\t\t\ticon=\"SEARCH\"\r\n\t\t\t\t\ticonPos=\"left\"\r\n\t\t\t\t\tplaceholder=\"Arama\"\r\n\t\t\t\t\t[ngModel]=\"filterText\"\r\n\t\t\t\t\t(ngModelChange)=\"ref.filterGlobal($event, 'contains')\">\r\n\t\t\t\t</aril-text>\r\n\t\t\t</span> -->\r\n\t\t</div>\r\n\t</ng-template>\r\n\t<ng-template pTemplate=\"header\" let-columns>\r\n\t\t<tr>\r\n\t\t\t@if (checkboxSelection()) {\r\n\t\t\t\t<th>\r\n\t\t\t\t\t<p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>\r\n\t\t\t\t</th>\r\n\t\t\t}\r\n\t\t\t@for (column of columns; track $index) {\r\n\t\t\t\t@if (column.isOperation) {\r\n\t\t\t\t\t<th>\r\n\t\t\t\t\t\t<div class=\"flex justify-content-center\">Operations</div>\r\n\t\t\t\t\t</th>\r\n\t\t\t\t} @else {\r\n\t\t\t\t\t<th [ttSortableColumn]=\"column.field\">\r\n\t\t\t\t\t\t<div class=\"flex justify-content-between align-items-center\">\r\n\t\t\t\t\t\t\t{{ column.header }}\r\n\t\t\t\t\t\t\t<!-- <p-treeTableSortIcon [field]=\"column.field\"></p-treeTableSortIcon> -->\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</th>\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t</tr>\r\n\t</ng-template>\r\n\t<ng-template\r\n\t\tpTemplate=\"body\"\r\n\t\tlet-rowNode\r\n\t\tlet-rowData=\"rowData\"\r\n\t\tlet-columns=\"columns\">\r\n\t\t<tr [ttRow]=\"rowNode\">\r\n\t\t\t@if (checkboxSelection()) {\r\n\t\t\t\t<td>\r\n\t\t\t\t\t<p-treeTableCheckbox [value]=\"rowNode\"></p-treeTableCheckbox>\r\n\t\t\t\t</td>\r\n\t\t\t}\r\n\t\t\t@for (column of columns; track $index) {\r\n\t\t\t\t<td>\r\n\t\t\t\t\t@if ($first) {\r\n\t\t\t\t\t\t<p-treeTableToggler [rowNode]=\"rowNode\"></p-treeTableToggler>\r\n\t\t\t\t\t}\r\n\t\t\t\t\t<ng-template\r\n\t\t\t\t\t\tngFor\r\n\t\t\t\t\t\t[ngForOf]=\"[rowNode.node]\"\r\n\t\t\t\t\t\t[ngForTemplate]=\"column.template\">\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t</td>\r\n\t\t\t}\r\n\t\t</tr>\r\n\t</ng-template>\r\n\t<ng-template pTemplate=\"summary\">\r\n\t\t<ng-content select=\"[footer]\"></ng-content>\r\n\t</ng-template>\r\n\t<ng-template pTemplate=\"emptymessage\">\r\n\t\t<tr>\r\n\t\t\t<td [attr.colspan]=\"columns._results.length\">No Data Found</td>\r\n\t\t</tr>\r\n\t</ng-template>\r\n</p-treeTable>\r\n" }]
+        }], propDecorators: { expandEvent: [{
+                type: Output
+            }], selectionEvent: [{
                 type: Output
+            }], columns: [{
+                type: ContentChildren,
+                args: [TableColumnComponent]
             }] } });
 
 /**

package/fesm2022/aril-ui-treeTable.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"aril-ui-treeTable.mjs","sources":["../../projects/aril/ui/treeTable/src/tree-table.component.ts","../../projects/aril/ui/treeTable/src/tree-table.component.html","../../projects/aril/ui/treeTable/aril-ui-treeTable.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\r\n\r\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\r\nimport { TreeNode, TreeTableNode } from 'primeng/api';\r\nimport { TreeTableModule } from 'primeng/treetable';\r\n\r\n/* TODO : \r\n    1. InputSignal\r\n    2. ContentProjection\r\n    3. ContextMenu ?\r\n*/\r\n\r\ntype SortMode = 'single' | 'multiple';\r\ntype FilterMode = 'lenient' | 'strict';\r\ntype SelectionModes = 'single' | 'multiple' | 'checkbox';\r\n\r\n@Component({\r\n  standalone: true,\r\n  selector: 'aril-tree-table',\r\n  templateUrl: './tree-table.component.html',\r\n  styles: [`\r\n    :host ::ng-deep .p-icon-wrapper {\r\n        display: inline-block !important;\r\n    }`\r\n  ],\r\n  imports: [TreeTableModule],\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class TreeTableComponent {\r\n  @Input({ required: true }) items!: TreeNode[];\r\n  @Input({ required: true }) columns!: Array<object>;\r\n  @Input() rows = 10;\r\n  @Input() rowsPerPageOptions = [10, 20, 50, 100];\r\n  @Input() scrollable = false;\r\n  @Input() scrollHeight!: string;\r\n  @Input() loading = false;\r\n  @Input() sortMode: SortMode = \"single\";\r\n  @Input() filterMode: FilterMode = \"lenient\";\r\n  @Input() selectionMode: SelectionModes = \"single\";\r\n\r\n  @Output() selectEvent: EventEmitter<any> = new EventEmitter();\r\n\r\n  selectedNodes!: TreeTableNode<any> | TreeTableNode<any>[] | null;\r\n\r\n  getFilterTargetValue(event: Event) {\r\n    const inputElement = event.target as HTMLInputElement;\r\n    return inputElement.value;\r\n  }\r\n\r\n  emitSelectedRows() {\r\n    if (!this.selectedNodes) return;\r\n\r\n    this.selectEvent.emit(this.selectedNodes);\r\n    this.selectedNodes = null;\r\n  }\r\n}\r\n","@if (items && columns) {\r\n\t<p-treeTable\r\n\t\t#ref\r\n\t\t[value]=\"items\"\r\n\t\t[columns]=\"columns\"\r\n\t\t[rows]=\"rows\"\r\n\t\t[paginator]=\"true\"\r\n\t\t[rowsPerPageOptions]=\"rowsPerPageOptions\"\r\n\t\t[scrollable]=\"scrollable\"\r\n\t\t[scrollHeight]=\"scrollHeight\"\r\n\t\t[sortMode]=\"sortMode\"\r\n\t\t[filterMode]=\"filterMode\"\r\n\t\t[loading]=\"loading\"\r\n\t\t[selectionMode]=\"selectionMode\"\r\n\t\t[(selection)]=\"selectedNodes\"\r\n\t\tstyleClass=\"p-treetable-sm\">\r\n\t\t<ng-template pTemplate=\"caption\">\r\n\t\t\t<div class=\"flex justify-content-between align-items-center\">\r\n\t\t\t\t<div class=\"flex\">\r\n\t\t\t\t\t<p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>\r\n\t\t\t\t\t<span class=\"ml-2\">Tümünü seç</span>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div class=\"p-input-icon-left\">\r\n\t\t\t\t\t<i class=\"pi pi-search\"></i>\r\n\t\t\t\t\t<input\r\n\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\tpInputText\r\n\t\t\t\t\t\tplaceholder=\"Arama\"\r\n\t\t\t\t\t\t(input)=\"\r\n\t\t\t\t\t\t\tref.filterGlobal(getFilterTargetValue($event), 'contains')\r\n\t\t\t\t\t\t\" />\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</ng-template>\r\n\t\t<ng-template pTemplate=\"header\" let-columns>\r\n\t\t\t<tr>\r\n\t\t\t\t@for (col of columns; track col) {\r\n\t\t\t\t\t<th [ttSortableColumn]=\"col.field\">\r\n\t\t\t\t\t\t<span>{{ col.header }}</span>\r\n\t\t\t\t\t\t<p-treeTableSortIcon [field]=\"col.field\"></p-treeTableSortIcon>\r\n\t\t\t\t\t</th>\r\n\t\t\t\t}\r\n\t\t\t</tr>\r\n\t\t</ng-template>\r\n\t\t<ng-template\r\n\t\t\tpTemplate=\"body\"\r\n\t\t\tlet-rowNode\r\n\t\t\tlet-rowData=\"rowData\"\r\n\t\t\tlet-columns=\"columns\">\r\n\t\t\t<tr [ttRow]=\"rowNode\">\r\n\t\t\t\t@for (col of columns; track col; let first = $first) {\r\n\t\t\t\t\t<td>\r\n\t\t\t\t\t\t@if (first) {\r\n\t\t\t\t\t\t\t<p-treeTableToggler [rowNode]=\"rowNode\"></p-treeTableToggler>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t@if (first) {\r\n\t\t\t\t\t\t\t<p-treeTableCheckbox [value]=\"rowNode\"></p-treeTableCheckbox>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t{{ rowData[col.field] }}\r\n\t\t\t\t\t</td>\r\n\t\t\t\t}\r\n\t\t\t</tr>\r\n\t\t</ng-template>\r\n\t\t<ng-template pTemplate=\"summary\">\r\n\t\t\t<div class=\"flex justify-content-end\">\r\n\t\t\t\t<div [attr.role]=\"'none'\" (click)=\"emitSelectedRows()\">\r\n\t\t\t\t\t<ng-content select=\"[exportBtn]\"></ng-content>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</ng-template>\r\n\t\t<ng-template pTemplate=\"emptymessage\">\r\n\t\t\t<tr>\r\n\t\t\t\t<td [attr.colspan]=\"columns.length\">Veri bulunamadı..</td>\r\n\t\t\t</tr>\r\n\t\t</ng-template>\r\n\t</p-treeTable>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"aril-ui-treeTable.mjs","sources":["../../projects/aril/ui/treeTable/src/tree-table.component.ts","../../projects/aril/ui/treeTable/src/tree-table.component.html","../../projects/aril/ui/treeTable/aril-ui-treeTable.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\r\n\r\nimport { ChangeDetectionStrategy, Component, ContentChildren, EventEmitter, input, Output } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { NgFor, NgForOf, NgTemplateOutlet } from '@angular/common';\r\nimport { TreeNode, TreeTableNode } from 'primeng/api';\r\nimport { TreeTableModule } from 'primeng/treetable';\r\nimport * as FileSaver from 'file-saver';\r\nimport { ButtonComponent } from 'aril/ui/button';\r\nimport { TextComponent } from 'aril/ui/text';\r\nimport { TableColumnComponent, TableColumns } from 'aril/ui/table';\r\n\r\nconst pageOptions = [10, 20, 50, 100];\r\n\r\n@Component({\r\n  standalone: true,\r\n  selector: 'aril-tree-table',\r\n  templateUrl: './tree-table.component.html',\r\n  imports: [TreeTableModule, ButtonComponent, TextComponent, FormsModule, NgFor, NgForOf, NgTemplateOutlet],\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class TreeTableComponent {\r\n  data = input.required<TreeNode[]>();\r\n  checkboxSelection = input<boolean>();\r\n  pageSize = input<typeof pageOptions[number]>(10);\r\n  scrollable = input<boolean>(false);\r\n  scrollHeight = input<string>();\r\n\r\n  @Output() expandEvent: EventEmitter<unknown> = new EventEmitter();\r\n  @Output() selectionEvent: EventEmitter<any> = new EventEmitter<any>();\r\n\r\n  @ContentChildren(TableColumnComponent) columns!: TableColumns;\r\n\r\n  filterText!: string;\r\n  pageOptions = pageOptions;\r\n  selectedNodes!: TreeTableNode<any> | TreeTableNode<any>[] | null;\r\n\r\n  excelExport() {\r\n    import('xlsx').then((xlsx) => {\r\n      const worksheet = xlsx.utils.json_to_sheet(this.data());\r\n      const workbook = { Sheets: { data: worksheet }, SheetNames: ['data'] };\r\n      const excelBuffer: any = xlsx.write(workbook, { bookType: 'xlsx', type: 'array' });\r\n      this.saveAsExcelFile(excelBuffer, 'excel_worksheet');\r\n    });\r\n  }\r\n\r\n  saveAsExcelFile(buffer: any, fileName: string): void {\r\n    const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';\r\n    const EXCEL_EXTENSION = '.xlsx';\r\n    const data: Blob = new Blob([buffer], {\r\n      type: EXCEL_TYPE\r\n    });\r\n    FileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION);\r\n  }\r\n}\r\n","<p-treeTable\r\n\t#ref\r\n\t[value]=\"data()\"\r\n\t[columns]=\"columns._results\"\r\n\t[rows]=\"pageSize()\"\r\n\t[rowHover]=\"true\"\r\n\t[paginator]=\"true\"\r\n\t[rowsPerPageOptions]=\"pageOptions\"\r\n\t[filterDelay]=\"0\"\r\n\tsortMode=\"multiple\"\r\n\t[scrollable]=\"scrollable()\"\r\n\t[scrollHeight]=\"scrollHeight()\"\r\n\t[(selection)]=\"selectedNodes\"\r\n\t(onNodeExpand)=\"expandEvent.emit($event.node)\"\r\n\t(selectionChange)=\"selectionEvent.emit(selectedNodes)\"\r\n\t[showCurrentPageReport]=\"true\"\r\n\tcurrentPageReportTemplate=\"Toplam : {totalRecords} kayıt | Sayfa : {currentPage} / {totalPages}\"\r\n\tstyleClass=\"p-treetable-gridlines p-treetable-striped p-treetable-sm\">\r\n\t<ng-template pTemplate=\"caption\">\r\n\t\t<div class=\"flex\">\r\n\t\t\t<aril-button\r\n\t\t\t\tsize=\"sm\"\r\n\t\t\t\ticon=\"FILE_EXCEL\"\r\n\t\t\t\tcolor=\"primary\"\r\n\t\t\t\tpTooltip=\"XLS\"\r\n\t\t\t\ttooltipPosition=\"top\"\r\n\t\t\t\t(clickEvent)=\"excelExport()\">\r\n\t\t\t</aril-button>\r\n\t\t\t<!-- <span class=\"p-input-icon-left ml-auto\">\r\n\t\t\t\t<aril-text\r\n\t\t\t\t\ticon=\"SEARCH\"\r\n\t\t\t\t\ticonPos=\"left\"\r\n\t\t\t\t\tplaceholder=\"Arama\"\r\n\t\t\t\t\t[ngModel]=\"filterText\"\r\n\t\t\t\t\t(ngModelChange)=\"ref.filterGlobal($event, 'contains')\">\r\n\t\t\t\t</aril-text>\r\n\t\t\t</span> -->\r\n\t\t</div>\r\n\t</ng-template>\r\n\t<ng-template pTemplate=\"header\" let-columns>\r\n\t\t<tr>\r\n\t\t\t@if (checkboxSelection()) {\r\n\t\t\t\t<th>\r\n\t\t\t\t\t<p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>\r\n\t\t\t\t</th>\r\n\t\t\t}\r\n\t\t\t@for (column of columns; track $index) {\r\n\t\t\t\t@if (column.isOperation) {\r\n\t\t\t\t\t<th>\r\n\t\t\t\t\t\t<div class=\"flex justify-content-center\">Operations</div>\r\n\t\t\t\t\t</th>\r\n\t\t\t\t} @else {\r\n\t\t\t\t\t<th [ttSortableColumn]=\"column.field\">\r\n\t\t\t\t\t\t<div class=\"flex justify-content-between align-items-center\">\r\n\t\t\t\t\t\t\t{{ column.header }}\r\n\t\t\t\t\t\t\t<!-- <p-treeTableSortIcon [field]=\"column.field\"></p-treeTableSortIcon> -->\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</th>\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t</tr>\r\n\t</ng-template>\r\n\t<ng-template\r\n\t\tpTemplate=\"body\"\r\n\t\tlet-rowNode\r\n\t\tlet-rowData=\"rowData\"\r\n\t\tlet-columns=\"columns\">\r\n\t\t<tr [ttRow]=\"rowNode\">\r\n\t\t\t@if (checkboxSelection()) {\r\n\t\t\t\t<td>\r\n\t\t\t\t\t<p-treeTableCheckbox [value]=\"rowNode\"></p-treeTableCheckbox>\r\n\t\t\t\t</td>\r\n\t\t\t}\r\n\t\t\t@for (column of columns; track $index) {\r\n\t\t\t\t<td>\r\n\t\t\t\t\t@if ($first) {\r\n\t\t\t\t\t\t<p-treeTableToggler [rowNode]=\"rowNode\"></p-treeTableToggler>\r\n\t\t\t\t\t}\r\n\t\t\t\t\t<ng-template\r\n\t\t\t\t\t\tngFor\r\n\t\t\t\t\t\t[ngForOf]=\"[rowNode.node]\"\r\n\t\t\t\t\t\t[ngForTemplate]=\"column.template\">\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t</td>\r\n\t\t\t}\r\n\t\t</tr>\r\n\t</ng-template>\r\n\t<ng-template pTemplate=\"summary\">\r\n\t\t<ng-content select=\"[footer]\"></ng-content>\r\n\t</ng-template>\r\n\t<ng-template pTemplate=\"emptymessage\">\r\n\t\t<tr>\r\n\t\t\t<td [attr.colspan]=\"columns._results.length\">No Data Found</td>\r\n\t\t</tr>\r\n\t</ng-template>\r\n</p-treeTable>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/aril-ui-value.mjs

@@ -34,11 +34,11 @@ class ValueComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ValueComponent, isStandalone: true, selector: "aril-value", inputs: { model: "model", type: "type", format: "format", color: "color" }, usesOnChanges: true, ngImport: i0, template: "@if (model == undefined || model == null) {\n\t<span>\n\t\t<i class=\"pi pi-minus\" style=\"color: red\" pTooltip=\"No item to show\"></i>\n\t</span>\n} @else {\n\t<div style=\"display: inline-block\">\n\t\t@if (type == 'bool') {\n\t\t\t<span>\n\t\t\t\t@if (!!model) {\n\t\t\t\t\t<i class=\"pi pi-check\" style=\"color: green\"></i>\n\t\t\t\t} @else {\n\t\t\t\t\t<i class=\"pi pi-times\" style=\"color: crimson\"></i>\n\t\t\t\t}\n\t\t\t</span>\n\t\t} @else {\n\t\t\t@if (display == undefined) {\n\t\t\t\t<span>\n\t\t\t\t\t<i\n\t\t\t\t\t\tclass=\"pi pi-exclamation-circle\"\n\t\t\t\t\t\tstyle=\"color: red\"\n\t\t\t\t\t\tpTooltip=\"Invalid Data\">\n\t\t\t\t\t</i>\n\t\t\t\t</span>\n\t\t\t} @else {\n\t\t\t\t<span [style.color]=\"color\">\n\t\t\t\t\t{{ display }}\n\t\t\t\t</span>\n\t\t\t}\n\t\t}\n\t</div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ValueComponent, isStandalone: true, selector: "aril-value", inputs: { model: "model", type: "type", format: "format", color: "color" }, usesOnChanges: true, ngImport: i0, template: "@if (model == undefined || model == null) {\n\t<i class=\"pi pi-minus\" style=\"color: red\" pTooltip=\"No item to show\"></i>\n} @else {\n\t@if (type == 'bool') {\n\t\t@if (!!model) {\n\t\t\t<i class=\"pi pi-check\" style=\"color: green\"></i>\n\t\t} @else {\n\t\t\t<i class=\"pi pi-times\" style=\"color: crimson\"></i>\n\t\t}\n\t} @else {\n\t\t@if (display == undefined) {\n\t\t\t<i\n\t\t\t\tclass=\"pi pi-exclamation-circle\"\n\t\t\t\tstyle=\"color: red\"\n\t\t\t\tpTooltip=\"Invalid Data\">\n\t\t\t</i>\n\t\t} @else {\n\t\t\t<span [style.color]=\"color\">\n\t\t\t\t{{ display }}\n\t\t\t</span>\n\t\t}\n\t}\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ValueComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'aril-value', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (model == undefined || model == null) {\n\t<span>\n\t\t<i class=\"pi pi-minus\" style=\"color: red\" pTooltip=\"No item to show\"></i>\n\t</span>\n} @else {\n\t<div style=\"display: inline-block\">\n\t\t@if (type == 'bool') {\n\t\t\t<span>\n\t\t\t\t@if (!!model) {\n\t\t\t\t\t<i class=\"pi pi-check\" style=\"color: green\"></i>\n\t\t\t\t} @else {\n\t\t\t\t\t<i class=\"pi pi-times\" style=\"color: crimson\"></i>\n\t\t\t\t}\n\t\t\t</span>\n\t\t} @else {\n\t\t\t@if (display == undefined) {\n\t\t\t\t<span>\n\t\t\t\t\t<i\n\t\t\t\t\t\tclass=\"pi pi-exclamation-circle\"\n\t\t\t\t\t\tstyle=\"color: red\"\n\t\t\t\t\t\tpTooltip=\"Invalid Data\">\n\t\t\t\t\t</i>\n\t\t\t\t</span>\n\t\t\t} @else {\n\t\t\t\t<span [style.color]=\"color\">\n\t\t\t\t\t{{ display }}\n\t\t\t\t</span>\n\t\t\t}\n\t\t}\n\t</div>\n}\n" }]
+            args: [{ standalone: true, selector: 'aril-value', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (model == undefined || model == null) {\n\t<i class=\"pi pi-minus\" style=\"color: red\" pTooltip=\"No item to show\"></i>\n} @else {\n\t@if (type == 'bool') {\n\t\t@if (!!model) {\n\t\t\t<i class=\"pi pi-check\" style=\"color: green\"></i>\n\t\t} @else {\n\t\t\t<i class=\"pi pi-times\" style=\"color: crimson\"></i>\n\t\t}\n\t} @else {\n\t\t@if (display == undefined) {\n\t\t\t<i\n\t\t\t\tclass=\"pi pi-exclamation-circle\"\n\t\t\t\tstyle=\"color: red\"\n\t\t\t\tpTooltip=\"Invalid Data\">\n\t\t\t</i>\n\t\t} @else {\n\t\t\t<span [style.color]=\"color\">\n\t\t\t\t{{ display }}\n\t\t\t</span>\n\t\t}\n\t}\n}\n" }]
         }], propDecorators: { model: [{
                 type: Input,
                 args: [{ required: true }]

package/fesm2022/aril-ui-value.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"aril-ui-value.mjs","sources":["../../projects/aril/ui/value/src/value.component.ts","../../projects/aril/ui/value/src/value.component.html","../../projects/aril/ui/value/aril-ui-value.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';\r\nimport \"aril/util/primitive-extensions\";\r\n\r\n/* TODO : \r\n    1. InputSignal\r\n*/\r\n\r\n/* number-format.js */\r\ndeclare const format: Function;\r\n\r\ntype ValueTypes = 'text' | 'number' | 'bool' | 'decimal' | 'date' | 'password';\r\n\r\n@Component({\r\n  standalone: true,\r\n  selector: 'aril-value',\r\n  templateUrl: './value.component.html',\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class ValueComponent implements OnChanges {\r\n\r\n  @Input({ required: true }) model!: string | number | boolean;\r\n  @Input() type: ValueTypes = \"text\";\r\n  @Input() format!: string;\r\n  @Input() color: string = \"#333\";\r\n\r\n  display = \"\";\r\n\r\n  ngOnChanges(changes: any) {\r\n    switch (this.type) {\r\n      case \"text\":\r\n        this.display = this.model as string;\r\n        break;\r\n      case \"number\":\r\n        this.format = this.format || '0.###';\r\n        this.display = format(this.format, this.model);\r\n        break;\r\n      case \"decimal\":\r\n        this.format = this.format || '#.##0,###';\r\n        this.display = format(this.format, this.model);\r\n        break;\r\n      case \"date\":\r\n        this.format = this.format || 'time';\r\n        this.display = (<number>this.model).longToString(this.format) as string;\r\n        break;\r\n      case \"password\":\r\n        this.display = (<string>this.model).replace(/./g, \"*\");\r\n        break;\r\n      default:\r\n        console.error(\"Invalid type: '\" + this.type + \"'\");\r\n        break;\r\n    }\r\n  }\r\n}\r\n","@if (model == undefined || model == null) {\n\t<span>\n\t\t<i class=\"pi pi-minus\" style=\"color: red\" pTooltip=\"No item to show\"></i>\n\t</span>\n} @else {\n\t<div style=\"display: inline-block\">\n\t\t@if (type == 'bool') {\n\t\t\t<span>\n\t\t\t\t@if (!!model) {\n\t\t\t\t\t<i class=\"pi pi-check\" style=\"color: green\"></i>\n\t\t\t\t} @else {\n\t\t\t\t\t<i class=\"pi pi-times\" style=\"color: crimson\"></i>\n\t\t\t\t}\n\t\t\t</span>\n\t\t} @else {\n\t\t\t@if (display == undefined) {\n\t\t\t\t<span>\n\t\t\t\t\t<i\n\t\t\t\t\t\tclass=\"pi pi-exclamation-circle\"\n\t\t\t\t\t\tstyle=\"color: red\"\n\t\t\t\t\t\tpTooltip=\"Invalid Data\">\n\t\t\t\t\t</i>\n\t\t\t\t</span>\n\t\t\t} @else {\n\t\t\t\t<span [style.color]=\"color\">\n\t\t\t\t\t{{ display }}\n\t\t\t\t</span>\n\t\t\t}\n\t\t}\n\t</div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAkBa,cAAc,CAAA;AAN3B,IAAA,WAAA,GAAA;QASW,IAAI,CAAA,IAAA,GAAe,MAAM,CAAC;QAE1B,IAAK,CAAA,KAAA,GAAW,MAAM,CAAC;QAEhC,IAAO,CAAA,OAAA,GAAG,EAAE,CAAC;AA2Bd,KAAA;AAzBC,IAAA,WAAW,CAAC,OAAY,EAAA;AACtB,QAAA,QAAQ,IAAI,CAAC,IAAI;AACf,YAAA,KAAK,MAAM;AACT,gBAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAe,CAAC;gBACpC,MAAM;AACR,YAAA,KAAK,QAAQ;gBACX,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,OAAO,CAAC;AACrC,gBAAA,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC/C,MAAM;AACR,YAAA,KAAK,SAAS;gBACZ,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,WAAW,CAAC;AACzC,gBAAA,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC/C,MAAM;AACR,YAAA,KAAK,MAAM;gBACT,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC;AACpC,gBAAA,IAAI,CAAC,OAAO,GAAY,IAAI,CAAC,KAAM,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAW,CAAC;gBACxE,MAAM;AACR,YAAA,KAAK,UAAU;AACb,gBAAA,IAAI,CAAC,OAAO,GAAY,IAAI,CAAC,KAAM,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;gBACvD,MAAM;AACR,YAAA;gBACE,OAAO,CAAC,KAAK,CAAC,iBAAiB,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,CAAC;gBACnD,MAAM;SACT;KACF;8GAjCU,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,uKClB3B,2yBA+BA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FDba,cAAc,EAAA,UAAA,EAAA,CAAA;kBAN1B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,EACN,QAAA,EAAA,YAAY,EAEL,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,2yBAAA,EAAA,CAAA;8BAIpB,KAAK,EAAA,CAAA;sBAA/B,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA;gBAChB,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,MAAM,EAAA,CAAA;sBAAd,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;;;AEvBR;;AAEG;;;;"}
+{"version":3,"file":"aril-ui-value.mjs","sources":["../../projects/aril/ui/value/src/value.component.ts","../../projects/aril/ui/value/src/value.component.html","../../projects/aril/ui/value/aril-ui-value.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';\r\n\r\nimport \"aril/util/primitive-extensions\";\r\n\r\n/* TODO : \r\n    1. InputSignal\r\n*/\r\n\r\n/* number-format.js */\r\ndeclare const format: Function;\r\n\r\ntype ValueTypes = 'text' | 'number' | 'bool' | 'decimal' | 'date' | 'password';\r\n\r\n@Component({\r\n  standalone: true,\r\n  selector: 'aril-value',\r\n  templateUrl: './value.component.html',\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class ValueComponent implements OnChanges {\r\n\r\n  @Input({ required: true }) model!: string | number | boolean;\r\n  @Input() type: ValueTypes = \"text\";\r\n  @Input() format!: string;\r\n  @Input() color: string = \"#333\";\r\n\r\n  display = \"\";\r\n\r\n  ngOnChanges(changes: any) {\r\n    switch (this.type) {\r\n      case \"text\":\r\n        this.display = this.model as string;\r\n        break;\r\n      case \"number\":\r\n        this.format = this.format || '0.###';\r\n        this.display = format(this.format, this.model);\r\n        break;\r\n      case \"decimal\":\r\n        this.format = this.format || '#.##0,###';\r\n        this.display = format(this.format, this.model);\r\n        break;\r\n      case \"date\":\r\n        this.format = this.format || 'time';\r\n        this.display = (<number>this.model).longToString(this.format) as string;\r\n        break;\r\n      case \"password\":\r\n        this.display = (<string>this.model).replace(/./g, \"*\");\r\n        break;\r\n      default:\r\n        console.error(\"Invalid type: '\" + this.type + \"'\");\r\n        break;\r\n    }\r\n  }\r\n}\r\n","@if (model == undefined || model == null) {\n\t<i class=\"pi pi-minus\" style=\"color: red\" pTooltip=\"No item to show\"></i>\n} @else {\n\t@if (type == 'bool') {\n\t\t@if (!!model) {\n\t\t\t<i class=\"pi pi-check\" style=\"color: green\"></i>\n\t\t} @else {\n\t\t\t<i class=\"pi pi-times\" style=\"color: crimson\"></i>\n\t\t}\n\t} @else {\n\t\t@if (display == undefined) {\n\t\t\t<i\n\t\t\t\tclass=\"pi pi-exclamation-circle\"\n\t\t\t\tstyle=\"color: red\"\n\t\t\t\tpTooltip=\"Invalid Data\">\n\t\t\t</i>\n\t\t} @else {\n\t\t\t<span [style.color]=\"color\">\n\t\t\t\t{{ display }}\n\t\t\t</span>\n\t\t}\n\t}\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAmBa,cAAc,CAAA;AAN3B,IAAA,WAAA,GAAA;QASW,IAAI,CAAA,IAAA,GAAe,MAAM,CAAC;QAE1B,IAAK,CAAA,KAAA,GAAW,MAAM,CAAC;QAEhC,IAAO,CAAA,OAAA,GAAG,EAAE,CAAC;AA2Bd,KAAA;AAzBC,IAAA,WAAW,CAAC,OAAY,EAAA;AACtB,QAAA,QAAQ,IAAI,CAAC,IAAI;AACf,YAAA,KAAK,MAAM;AACT,gBAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAe,CAAC;gBACpC,MAAM;AACR,YAAA,KAAK,QAAQ;gBACX,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,OAAO,CAAC;AACrC,gBAAA,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC/C,MAAM;AACR,YAAA,KAAK,SAAS;gBACZ,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,WAAW,CAAC;AACzC,gBAAA,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC/C,MAAM;AACR,YAAA,KAAK,MAAM;gBACT,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC;AACpC,gBAAA,IAAI,CAAC,OAAO,GAAY,IAAI,CAAC,KAAM,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAW,CAAC;gBACxE,MAAM;AACR,YAAA,KAAK,UAAU;AACb,gBAAA,IAAI,CAAC,OAAO,GAAY,IAAI,CAAC,KAAM,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;gBACvD,MAAM;AACR,YAAA;gBACE,OAAO,CAAC,KAAK,CAAC,iBAAiB,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,CAAC;gBACnD,MAAM;SACT;KACF;8GAjCU,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,uKCnB3B,ymBAuBA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FDJa,cAAc,EAAA,UAAA,EAAA,CAAA;kBAN1B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,EACN,QAAA,EAAA,YAAY,EAEL,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,ymBAAA,EAAA,CAAA;8BAIpB,KAAK,EAAA,CAAA;sBAA/B,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA;gBAChB,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,MAAM,EAAA,CAAA;sBAAd,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;;;AExBR;;AAEG;;;;"}

package/http/lib/enums.d.ts

@@ -1,6 +1,7 @@
 export declare enum HTTPMethods {
     GET = "GET",
     POST = "POST",
+    PUT = "PUT",
     DELETE = "DELETE"
 }
 export declare enum APIs {

package/http/lib/interfaces.d.ts

@@ -1,9 +1,11 @@
+import { Subject } from "rxjs";
 import { ProxyTypes } from "./enums";
 export interface ServiceCallStates {
     serviceCalled: boolean;
     waitingForResponse: boolean;
     responseIsRecieved: boolean;
     serviceCallFailed: boolean;
+    errorEvent?: Subject<any>;
 }
 export type ServiceCallStateMap<T> = {
     [K in keyof T]?: T[K] extends Function ? ServiceCallStates : never;

package/http/src/serviceStateMethods.d.ts

@@ -1,4 +1,5 @@
+import { HttpErrorResponse } from "@angular/common/http";
 import { ServiceCallStateMap } from "../lib/interfaces";
 export declare const callState: (states: ServiceCallStateMap<any>, serviceName: any) => void;
 export declare const successState: (states: ServiceCallStateMap<any>, serviceName: any) => void;
-export declare const errorState: (states: ServiceCallStateMap<any>, serviceName: any) => void;
+export declare const errorState: (states: ServiceCallStateMap<any>, serviceName: any, error: HttpErrorResponse) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aril",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "peerDependencies": {
     "@angular/common": "^17.1.0",
     "@angular/core": "^17.1.0",
@@ -48,6 +48,12 @@
       "esm": "./esm2022/util/aril-util.mjs",
       "default": "./fesm2022/aril-util.mjs"
     },
+    "./theme/layout": {
+      "types": "./theme/layout/index.d.ts",
+      "esm2022": "./esm2022/theme/layout/aril-theme-layout.mjs",
+      "esm": "./esm2022/theme/layout/aril-theme-layout.mjs",
+      "default": "./fesm2022/aril-theme-layout.mjs"
+    },
     "./ui/badge": {
       "types": "./ui/badge/index.d.ts",
       "esm2022": "./esm2022/ui/badge/aril-ui-badge.mjs",

package/theme/layout/app/breadcrumb/app.breadcrumb.component.d.ts

@@ -0,0 +1,16 @@
+import { Router } from '@angular/router';
+import * as i0 from "@angular/core";
+interface Breadcrumb {
+    label: string;
+    url?: string;
+}
+export declare class AppBreadcrumbComponent {
+    private router;
+    private readonly _breadcrumbs$;
+    readonly breadcrumbs$: import("rxjs").Observable<Breadcrumb[]>;
+    constructor(router: Router);
+    private addBreadcrumb;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AppBreadcrumbComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AppBreadcrumbComponent, "app-breadcrumb", never, {}, {}, never, never, true, never>;
+}
+export {};

package/theme/layout/app/breadcrumb/app.breadcrumb.component.html

@@ -0,0 +1,10 @@
+<nav class="layout-breadcrumb">
+	<ol>
+		@for (item of breadcrumbs$ | async; track item; let last = $last) {
+			<li>{{ item.label }}</li>
+			@if (!last) {
+				<li class="layout-breadcrumb-chevron">/</li>
+			}
+		}
+	</ol>
+</nav>

package/theme/layout/app/breadcrumb/app.breadcrumb.component.ts

@@ -0,0 +1,52 @@
+import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
+import { Component } from '@angular/core';
+import { ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';
+
+import { BehaviorSubject } from 'rxjs';
+import { filter } from 'rxjs/operators';
+
+interface Breadcrumb {
+	label: string;
+	url?: string;
+}
+
+@Component({
+	standalone: true,
+	selector: 'app-breadcrumb',
+	imports: [NgTemplateOutlet, AsyncPipe],
+	templateUrl: './app.breadcrumb.component.html'
+})
+export class AppBreadcrumbComponent {
+
+	private readonly _breadcrumbs$ = new BehaviorSubject<Breadcrumb[]>([]);
+
+	readonly breadcrumbs$ = this._breadcrumbs$.asObservable();
+
+	constructor(private router: Router) {
+		this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(event => {
+			const root = this.router.routerState.snapshot.root;
+			const breadcrumbs: Breadcrumb[] = [];
+			this.addBreadcrumb(root, [], breadcrumbs);
+
+			this._breadcrumbs$.next(breadcrumbs);
+		});
+	}
+
+	private addBreadcrumb(route: ActivatedRouteSnapshot, parentUrl: string[], breadcrumbs: Breadcrumb[]) {
+		const routeUrl = parentUrl.concat(route.url.map(url => url.path));
+		const breadcrumb = route.data['breadcrumb'];
+		const parentBreadcrumb = route.parent && route.parent.data ? route.parent.data['breadcrumb'] : null;
+
+		if (breadcrumb && breadcrumb !== parentBreadcrumb) {
+			breadcrumbs.push({
+				label: route.data['breadcrumb'],
+				url: '/' + routeUrl.join('/')
+			});
+		}
+
+		if (route.firstChild) {
+			this.addBreadcrumb(route.firstChild, routeUrl, breadcrumbs);
+		}
+	}
+
+}

package/theme/layout/app/config/app.config.component.d.ts

@@ -0,0 +1,36 @@
+import { OnInit } from '@angular/core';
+import { MenuService } from '../../service/app.menu.service';
+import { ColorScheme, LayoutService, MenuColorScheme, MenuMode } from '../../service/app.layout.service';
+import * as i0 from "@angular/core";
+export declare class AppConfigComponent implements OnInit {
+    layoutService: LayoutService;
+    menuService: MenuService;
+    minimal: boolean;
+    componentThemes: any[];
+    scales: number[];
+    constructor(layoutService: LayoutService, menuService: MenuService);
+    get visible(): boolean;
+    set visible(_val: boolean);
+    get scale(): number;
+    set scale(_val: number);
+    get menuMode(): MenuMode;
+    set menuMode(_val: MenuMode);
+    get colorScheme(): ColorScheme;
+    set colorScheme(_val: ColorScheme);
+    get inputStyle(): string;
+    set inputStyle(_val: string);
+    get ripple(): boolean;
+    set ripple(_val: boolean);
+    get menuTheme(): MenuColorScheme;
+    set menuTheme(_val: MenuColorScheme);
+    get theme(): string;
+    set theme(_val: string);
+    ngOnInit(): void;
+    onConfigButtonClick(): void;
+    changeColorScheme(colorScheme: ColorScheme): void;
+    changeTheme(theme: string): void;
+    decrementScale(): void;
+    incrementScale(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AppConfigComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AppConfigComponent, "app-config", never, { "minimal": { "alias": "minimal"; "required": false; }; }, {}, never, never, true, never>;
+}

package/theme/layout/app/config/app.config.component.html

@@ -0,0 +1,191 @@
+<button
+	class="layout-config-button p-link"
+	type="button"
+	(click)="onConfigButtonClick()">
+	<i class="pi pi-cog"></i>
+</button>
+
+<p-sidebar
+	[(visible)]="visible"
+	position="right"
+	[transitionOptions]="'.3s cubic-bezier(0, 0, 0.2, 1)'"
+	styleClass="layout-config-sidebar w-18rem">
+	<h5>Themes</h5>
+	<div class="flex flex-wrap row-gap-3">
+		@for (theme of componentThemes; track theme) {
+			<div class="w-3">
+				<button
+					type="button"
+					class="cursor-pointer p-link w-2rem h-2rem border-circle flex-shrink-0 flex align-items-center justify-content-center"
+					(click)="changeTheme(theme.name)"
+					[ngStyle]="{ 'background-color': theme.color }">
+					@if (theme.name == this.layoutService.config().theme) {
+						<i class="pi pi-check text-white"></i>
+					}
+				</button>
+			</div>
+		}
+	</div>
+
+	<h5>Scale</h5>
+	<div class="flex align-items-center">
+		<button
+			icon="pi pi-minus"
+			type="button"
+			pButton
+			(click)="decrementScale()"
+			class="p-button-text p-button-rounded w-2rem h-2rem mr-2"
+			[disabled]="scale === scales[0]"></button>
+		<div class="flex gap-2 align-items-center">
+			@for (s of scales; track s) {
+				<i
+					class="pi pi-circle-fill text-300"
+					[ngClass]="{ 'text-primary-500': s === scale }"></i>
+			}
+		</div>
+		<button
+			icon="pi pi-plus"
+			type="button"
+			pButton
+			(click)="incrementScale()"
+			class="p-button-text p-button-rounded w-2rem h-2rem ml-2"
+			[disabled]="scale === scales[scales.length - 1]"></button>
+	</div>
+
+	@if (!minimal) {
+		<h5>Menu Type</h5>
+		<div class="flex flex-wrap row-gap-3">
+			<div class="flex align-items-center gap-2 w-6">
+				<p-radioButton
+					name="menuMode"
+					value="static"
+					[(ngModel)]="menuMode"
+					inputId="mode1"></p-radioButton>
+				<label for="mode1">Static</label>
+			</div>
+			<div class="flex align-items-center gap-2 w-6">
+				<p-radioButton
+					name="menuMode"
+					value="overlay"
+					[(ngModel)]="menuMode"
+					inputId="mode2"></p-radioButton>
+				<label for="mode2">Overlay</label>
+			</div>
+			<div class="flex align-items-center gap-2 w-6">
+				<p-radioButton
+					name="menuMode"
+					value="slim"
+					[(ngModel)]="menuMode"
+					inputId="mode3"></p-radioButton>
+				<label for="mode3">Slim</label>
+			</div>
+			<div class="flex align-items-center gap-2 w-6">
+				<p-radioButton
+					name="menuMode"
+					value="slim-plus"
+					[(ngModel)]="menuMode"
+					inputId="mode4"></p-radioButton>
+				<label for="mode3">Slim +</label>
+			</div>
+			<div class="flex align-items-center gap-2 w-6">
+				<p-radioButton
+					name="menuMode"
+					value="reveal"
+					[(ngModel)]="menuMode"
+					inputId="mode6"></p-radioButton>
+				<label for="mode5">Reveal</label>
+			</div>
+			<div class="flex align-items-center gap-2 w-6">
+				<p-radioButton
+					name="menuMode"
+					value="drawer"
+					[(ngModel)]="menuMode"
+					inputId="mode7"></p-radioButton>
+				<label for="mode6">Drawer</label>
+			</div>
+			<div class="flex align-items-center gap-2 w-6">
+				<p-radioButton
+					name="menuMode"
+					value="horizontal"
+					[(ngModel)]="menuMode"
+					inputId="mode5"></p-radioButton>
+				<label for="mode4">Horizontal</label>
+			</div>
+		</div>
+		<h5>Menu Theme</h5>
+		<div class="field-radiobutton">
+			<p-radioButton
+				name="menuTheme"
+				value="colorScheme"
+				[(ngModel)]="menuTheme"
+				inputId="menutheme-colorscheme"></p-radioButton>
+			<label for="menutheme-colorscheme">Color Scheme</label>
+		</div>
+		<div class="field-radiobutton">
+			<p-radioButton
+				name="menuTheme"
+				value="primaryColor"
+				[(ngModel)]="menuTheme"
+				inputId="menutheme-primarycolor"></p-radioButton>
+			<label for="menutheme-primarycolor">Primary Color</label>
+		</div>
+		<div class="field-radiobutton">
+			<p-radioButton
+				name="menuTheme"
+				value="transparent"
+				[(ngModel)]="menuTheme"
+				inputId="menutheme-transparent"></p-radioButton>
+			<label for="menutheme-transparent">Transparent</label>
+		</div>
+	}
+
+	<h5>Color Scheme</h5>
+	<div class="field-radiobutton">
+		<p-radioButton
+			name="colorScheme"
+			value="light"
+			[(ngModel)]="colorScheme"
+			inputId="mode-light"></p-radioButton>
+		<label for="mode-light">Light</label>
+	</div>
+	<div class="field-radiobutton">
+		<p-radioButton
+			name="colorScheme"
+			value="dim"
+			[(ngModel)]="colorScheme"
+			inputId="mode-dim"></p-radioButton>
+		<label for="mode-dim">Dim</label>
+	</div>
+	<div class="field-radiobutton">
+		<p-radioButton
+			name="colorScheme"
+			value="dark"
+			[(ngModel)]="colorScheme"
+			inputId="mode-dark"></p-radioButton>
+		<label for="mode-dark">Dark</label>
+	</div>
+
+	@if (!minimal) {
+		<h5>Input Style</h5>
+		<div class="flex">
+			<div class="field-radiobutton flex-1">
+				<p-radioButton
+					name="inputStyle"
+					value="outlined"
+					[(ngModel)]="inputStyle"
+					inputId="outlined_input"></p-radioButton>
+				<label for="outlined_input">Outlined</label>
+			</div>
+			<div class="field-radiobutton flex-1">
+				<p-radioButton
+					name="inputStyle"
+					value="filled"
+					[(ngModel)]="inputStyle"
+					inputId="filled_input"></p-radioButton>
+				<label for="filled_input">Filled</label>
+			</div>
+		</div>
+		<h5>Ripple Effect</h5>
+		<p-inputSwitch [(ngModel)]="ripple"></p-inputSwitch>
+	}
+</p-sidebar>