aril 1.0.39 → 1.0.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aril",
-  "version": "1.0.39",
+  "version": "1.0.41",
   "peerDependencies": {
     "@angular/cdk": "~17.1.0",
     "@angular/common": "^17.1.0",
@@ -20,7 +20,8 @@
     "@amcharts/amcharts5": "^5.10.8",
     "highcharts-angular": "^4.0.1",
     "monaco-editor": "^0.44.0",
-    "ngx-monaco-editor-v2": "^17.0.1"
+    "ngx-monaco-editor-v2": "^17.0.1",
+    "jsondiffpatch": "^0.5.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
@@ -47,11 +48,11 @@
       "esm": "./esm2022/boot/aril-boot.mjs",
       "default": "./fesm2022/aril-boot.mjs"
     },
-    "./keycloak": {
-      "types": "./keycloak/index.d.ts",
-      "esm2022": "./esm2022/keycloak/aril-keycloak.mjs",
-      "esm": "./esm2022/keycloak/aril-keycloak.mjs",
-      "default": "./fesm2022/aril-keycloak.mjs"
+    "./http": {
+      "types": "./http/index.d.ts",
+      "esm2022": "./esm2022/http/aril-http.mjs",
+      "esm": "./esm2022/http/aril-http.mjs",
+      "default": "./fesm2022/aril-http.mjs"
     },
     "./i18n": {
       "types": "./i18n/index.d.ts",
@@ -59,17 +60,23 @@
       "esm": "./esm2022/i18n/aril-i18n.mjs",
       "default": "./fesm2022/aril-i18n.mjs"
     },
+    "./keycloak": {
+      "types": "./keycloak/index.d.ts",
+      "esm2022": "./esm2022/keycloak/aril-keycloak.mjs",
+      "esm": "./esm2022/keycloak/aril-keycloak.mjs",
+      "default": "./fesm2022/aril-keycloak.mjs"
+    },
     "./provider": {
       "types": "./provider/index.d.ts",
       "esm2022": "./esm2022/provider/aril-provider.mjs",
       "esm": "./esm2022/provider/aril-provider.mjs",
       "default": "./fesm2022/aril-provider.mjs"
     },
-    "./http": {
-      "types": "./http/index.d.ts",
-      "esm2022": "./esm2022/http/aril-http.mjs",
-      "esm": "./esm2022/http/aril-http.mjs",
-      "default": "./fesm2022/aril-http.mjs"
+    "./theme": {
+      "types": "./theme/index.d.ts",
+      "esm2022": "./esm2022/theme/aril-theme.mjs",
+      "esm": "./esm2022/theme/aril-theme.mjs",
+      "default": "./fesm2022/aril-theme.mjs"
     },
     "./ui": {
       "types": "./ui/index.d.ts",
@@ -77,12 +84,6 @@
       "esm": "./esm2022/ui/aril-ui.mjs",
       "default": "./fesm2022/aril-ui.mjs"
     },
-    "./theme": {
-      "types": "./theme/index.d.ts",
-      "esm2022": "./esm2022/theme/aril-theme.mjs",
-      "esm": "./esm2022/theme/aril-theme.mjs",
-      "default": "./fesm2022/aril-theme.mjs"
-    },
     "./ui-business": {
       "types": "./ui-business/index.d.ts",
       "esm2022": "./esm2022/ui-business/aril-ui-business.mjs",
@@ -107,6 +108,12 @@
       "esm": "./esm2022/boot/mfe/aril-boot-mfe.mjs",
       "default": "./fesm2022/aril-boot-mfe.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/autoComplete": {
       "types": "./ui/autoComplete/index.d.ts",
       "esm2022": "./esm2022/ui/autoComplete/aril-ui-autoComplete.mjs",
@@ -149,6 +156,12 @@
       "esm": "./esm2022/ui/chip/aril-ui-chip.mjs",
       "default": "./fesm2022/aril-ui-chip.mjs"
     },
+    "./ui/dxField": {
+      "types": "./ui/dxField/index.d.ts",
+      "esm2022": "./esm2022/ui/dxField/aril-ui-dxField.mjs",
+      "esm": "./esm2022/ui/dxField/aril-ui-dxField.mjs",
+      "default": "./fesm2022/aril-ui-dxField.mjs"
+    },
     "./ui/dxEditor": {
       "types": "./ui/dxEditor/index.d.ts",
       "esm2022": "./esm2022/ui/dxEditor/aril-ui-dxEditor.mjs",
@@ -161,12 +174,6 @@
       "esm": "./esm2022/ui/editor/aril-ui-editor.mjs",
       "default": "./fesm2022/aril-ui-editor.mjs"
     },
-    "./ui/dxField": {
-      "types": "./ui/dxField/index.d.ts",
-      "esm2022": "./esm2022/ui/dxField/aril-ui-dxField.mjs",
-      "esm": "./esm2022/ui/dxField/aril-ui-dxField.mjs",
-      "default": "./fesm2022/aril-ui-dxField.mjs"
-    },
     "./ui/field": {
       "types": "./ui/field/index.d.ts",
       "esm2022": "./esm2022/ui/field/aril-ui-field.mjs",
@@ -221,18 +228,18 @@
       "esm": "./esm2022/ui/multiSelect/aril-ui-multiSelect.mjs",
       "default": "./fesm2022/aril-ui-multiSelect.mjs"
     },
-    "./ui/number": {
-      "types": "./ui/number/index.d.ts",
-      "esm2022": "./esm2022/ui/number/aril-ui-number.mjs",
-      "esm": "./esm2022/ui/number/aril-ui-number.mjs",
-      "default": "./fesm2022/aril-ui-number.mjs"
-    },
     "./ui/operation-types-dialog": {
       "types": "./ui/operation-types-dialog/index.d.ts",
       "esm2022": "./esm2022/ui/operation-types-dialog/aril-ui-operation-types-dialog.mjs",
       "esm": "./esm2022/ui/operation-types-dialog/aril-ui-operation-types-dialog.mjs",
       "default": "./fesm2022/aril-ui-operation-types-dialog.mjs"
     },
+    "./ui/number": {
+      "types": "./ui/number/index.d.ts",
+      "esm2022": "./esm2022/ui/number/aril-ui-number.mjs",
+      "esm": "./esm2022/ui/number/aril-ui-number.mjs",
+      "default": "./fesm2022/aril-ui-number.mjs"
+    },
     "./ui/overlayPanel": {
       "types": "./ui/overlayPanel/index.d.ts",
       "esm2022": "./esm2022/ui/overlayPanel/aril-ui-overlayPanel.mjs",
@@ -257,18 +264,18 @@
       "esm": "./esm2022/ui/pdf-viewer/aril-ui-pdf-viewer.mjs",
       "default": "./fesm2022/aril-ui-pdf-viewer.mjs"
     },
-    "./ui/progressbar": {
-      "types": "./ui/progressbar/index.d.ts",
-      "esm2022": "./esm2022/ui/progressbar/aril-ui-progressbar.mjs",
-      "esm": "./esm2022/ui/progressbar/aril-ui-progressbar.mjs",
-      "default": "./fesm2022/aril-ui-progressbar.mjs"
-    },
     "./ui/radioButton": {
       "types": "./ui/radioButton/index.d.ts",
       "esm2022": "./esm2022/ui/radioButton/aril-ui-radioButton.mjs",
       "esm": "./esm2022/ui/radioButton/aril-ui-radioButton.mjs",
       "default": "./fesm2022/aril-ui-radioButton.mjs"
     },
+    "./ui/progressbar": {
+      "types": "./ui/progressbar/index.d.ts",
+      "esm2022": "./esm2022/ui/progressbar/aril-ui-progressbar.mjs",
+      "esm": "./esm2022/ui/progressbar/aril-ui-progressbar.mjs",
+      "default": "./fesm2022/aril-ui-progressbar.mjs"
+    },
     "./ui/relativeDateSelector": {
       "types": "./ui/relativeDateSelector/index.d.ts",
       "esm2022": "./esm2022/ui/relativeDateSelector/aril-ui-relativeDateSelector.mjs",
@@ -305,23 +312,17 @@
       "esm": "./esm2022/ui/tag/aril-ui-tag.mjs",
       "default": "./fesm2022/aril-ui-tag.mjs"
     },
-    "./ui/tagBox": {
-      "types": "./ui/tagBox/index.d.ts",
-      "esm2022": "./esm2022/ui/tagBox/aril-ui-tagBox.mjs",
-      "esm": "./esm2022/ui/tagBox/aril-ui-tagBox.mjs",
-      "default": "./fesm2022/aril-ui-tagBox.mjs"
-    },
     "./ui/text": {
       "types": "./ui/text/index.d.ts",
       "esm2022": "./esm2022/ui/text/aril-ui-text.mjs",
       "esm": "./esm2022/ui/text/aril-ui-text.mjs",
       "default": "./fesm2022/aril-ui-text.mjs"
     },
-    "./ui/textArea": {
-      "types": "./ui/textArea/index.d.ts",
-      "esm2022": "./esm2022/ui/textArea/aril-ui-textArea.mjs",
-      "esm": "./esm2022/ui/textArea/aril-ui-textArea.mjs",
-      "default": "./fesm2022/aril-ui-textArea.mjs"
+    "./ui/tagBox": {
+      "types": "./ui/tagBox/index.d.ts",
+      "esm2022": "./esm2022/ui/tagBox/aril-ui-tagBox.mjs",
+      "esm": "./esm2022/ui/tagBox/aril-ui-tagBox.mjs",
+      "default": "./fesm2022/aril-ui-tagBox.mjs"
     },
     "./ui/toggle-button": {
       "types": "./ui/toggle-button/index.d.ts",
@@ -329,6 +330,12 @@
       "esm": "./esm2022/ui/toggle-button/aril-ui-toggle-button.mjs",
       "default": "./fesm2022/aril-ui-toggle-button.mjs"
     },
+    "./ui/textArea": {
+      "types": "./ui/textArea/index.d.ts",
+      "esm2022": "./esm2022/ui/textArea/aril-ui-textArea.mjs",
+      "esm": "./esm2022/ui/textArea/aril-ui-textArea.mjs",
+      "default": "./fesm2022/aril-ui-textArea.mjs"
+    },
     "./ui/tooltip": {
       "types": "./ui/tooltip/index.d.ts",
       "esm2022": "./esm2022/ui/tooltip/aril-ui-tooltip.mjs",
@@ -341,18 +348,18 @@
       "esm": "./esm2022/ui/translate-input/aril-ui-translate-input.mjs",
       "default": "./fesm2022/aril-ui-translate-input.mjs"
     },
-    "./ui/treeSelect": {
-      "types": "./ui/treeSelect/index.d.ts",
-      "esm2022": "./esm2022/ui/treeSelect/aril-ui-treeSelect.mjs",
-      "esm": "./esm2022/ui/treeSelect/aril-ui-treeSelect.mjs",
-      "default": "./fesm2022/aril-ui-treeSelect.mjs"
-    },
     "./ui/tree": {
       "types": "./ui/tree/index.d.ts",
       "esm2022": "./esm2022/ui/tree/aril-ui-tree.mjs",
       "esm": "./esm2022/ui/tree/aril-ui-tree.mjs",
       "default": "./fesm2022/aril-ui-tree.mjs"
     },
+    "./ui/treeSelect": {
+      "types": "./ui/treeSelect/index.d.ts",
+      "esm2022": "./esm2022/ui/treeSelect/aril-ui-treeSelect.mjs",
+      "esm": "./esm2022/ui/treeSelect/aril-ui-treeSelect.mjs",
+      "default": "./fesm2022/aril-ui-treeSelect.mjs"
+    },
     "./ui/treeTable": {
       "types": "./ui/treeTable/index.d.ts",
       "esm2022": "./esm2022/ui/treeTable/aril-ui-treeTable.mjs",
@@ -365,12 +372,6 @@
       "esm": "./esm2022/ui/value/aril-ui-value.mjs",
       "default": "./fesm2022/aril-ui-value.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-business/detailed-overlay-panel": {
       "types": "./ui-business/detailed-overlay-panel/index.d.ts",
       "esm2022": "./esm2022/ui-business/detailed-overlay-panel/aril-ui-business-detailed-overlay-panel.mjs",
@@ -383,6 +384,12 @@
       "esm": "./esm2022/ui-business/enumPicker/aril-ui-business-enumPicker.mjs",
       "default": "./fesm2022/aril-ui-business-enumPicker.mjs"
     },
+    "./ui-business/assetPicker": {
+      "types": "./ui-business/assetPicker/index.d.ts",
+      "esm2022": "./esm2022/ui-business/assetPicker/aril-ui-business-assetPicker.mjs",
+      "esm": "./esm2022/ui-business/assetPicker/aril-ui-business-assetPicker.mjs",
+      "default": "./fesm2022/aril-ui-business-assetPicker.mjs"
+    },
     "./ui-business/multiple-ref-value": {
       "types": "./ui-business/multiple-ref-value/index.d.ts",
       "esm2022": "./esm2022/ui-business/multiple-ref-value/aril-ui-business-multiple-ref-value.mjs",
@@ -431,36 +438,36 @@
       "esm": "./esm2022/util/init-event/aril-util-init-event.mjs",
       "default": "./fesm2022/aril-util-init-event.mjs"
     },
+    "./util/pipes": {
+      "types": "./util/pipes/index.d.ts",
+      "esm2022": "./esm2022/util/pipes/aril-util-pipes.mjs",
+      "esm": "./esm2022/util/pipes/aril-util-pipes.mjs",
+      "default": "./fesm2022/aril-util-pipes.mjs"
+    },
     "./util/loaders": {
       "types": "./util/loaders/index.d.ts",
       "esm2022": "./esm2022/util/loaders/aril-util-loaders.mjs",
       "esm": "./esm2022/util/loaders/aril-util-loaders.mjs",
       "default": "./fesm2022/aril-util-loaders.mjs"
     },
+    "./util/primitive-extensions": {
+      "types": "./util/primitive-extensions/index.d.ts",
+      "esm2022": "./esm2022/util/primitive-extensions/aril-util-primitive-extensions.mjs",
+      "esm": "./esm2022/util/primitive-extensions/aril-util-primitive-extensions.mjs",
+      "default": "./fesm2022/aril-util-primitive-extensions.mjs"
+    },
     "./util/lib": {
       "types": "./util/lib/index.d.ts",
       "esm2022": "./esm2022/util/lib/aril-util-lib.mjs",
       "esm": "./esm2022/util/lib/aril-util-lib.mjs",
       "default": "./fesm2022/aril-util-lib.mjs"
     },
-    "./util/pipes": {
-      "types": "./util/pipes/index.d.ts",
-      "esm2022": "./esm2022/util/pipes/aril-util-pipes.mjs",
-      "esm": "./esm2022/util/pipes/aril-util-pipes.mjs",
-      "default": "./fesm2022/aril-util-pipes.mjs"
-    },
     "./util/pub-sub": {
       "types": "./util/pub-sub/index.d.ts",
       "esm2022": "./esm2022/util/pub-sub/aril-util-pub-sub.mjs",
       "esm": "./esm2022/util/pub-sub/aril-util-pub-sub.mjs",
       "default": "./fesm2022/aril-util-pub-sub.mjs"
     },
-    "./util/primitive-extensions": {
-      "types": "./util/primitive-extensions/index.d.ts",
-      "esm2022": "./esm2022/util/primitive-extensions/aril-util-primitive-extensions.mjs",
-      "esm": "./esm2022/util/primitive-extensions/aril-util-primitive-extensions.mjs",
-      "default": "./fesm2022/aril-util-primitive-extensions.mjs"
-    },
     "./util/unwrap": {
       "types": "./util/unwrap/index.d.ts",
       "esm2022": "./esm2022/util/unwrap/aril-util-unwrap.mjs",
@@ -473,29 +480,23 @@
       "esm": "./esm2022/boot/config/api/aril-boot-config-api.mjs",
       "default": "./fesm2022/aril-boot-config-api.mjs"
     },
-    "./boot/config/apps": {
-      "types": "./boot/config/apps/index.d.ts",
-      "esm2022": "./esm2022/boot/config/apps/aril-boot-config-apps.mjs",
-      "esm": "./esm2022/boot/config/apps/aril-boot-config-apps.mjs",
-      "default": "./fesm2022/aril-boot-config-apps.mjs"
-    },
     "./boot/config/plugins": {
       "types": "./boot/config/plugins/index.d.ts",
       "esm2022": "./esm2022/boot/config/plugins/aril-boot-config-plugins.mjs",
       "esm": "./esm2022/boot/config/plugins/aril-boot-config-plugins.mjs",
       "default": "./fesm2022/aril-boot-config-plugins.mjs"
     },
+    "./boot/config/apps": {
+      "types": "./boot/config/apps/index.d.ts",
+      "esm2022": "./esm2022/boot/config/apps/aril-boot-config-apps.mjs",
+      "esm": "./esm2022/boot/config/apps/aril-boot-config-apps.mjs",
+      "default": "./fesm2022/aril-boot-config-apps.mjs"
+    },
     "./ui/business-components/assetPicker": {
       "types": "./ui/business-components/assetPicker/index.d.ts",
       "esm2022": "./esm2022/ui/business-components/assetPicker/aril-ui-business-components-assetPicker.mjs",
       "esm": "./esm2022/ui/business-components/assetPicker/aril-ui-business-components-assetPicker.mjs",
       "default": "./fesm2022/aril-ui-business-components-assetPicker.mjs"
-    },
-    "./ui-business/assetPicker": {
-      "types": "./ui-business/assetPicker/index.d.ts",
-      "esm2022": "./esm2022/ui-business/assetPicker/aril-ui-business-assetPicker.mjs",
-      "esm": "./esm2022/ui-business/assetPicker/aril-ui-business-assetPicker.mjs",
-      "default": "./fesm2022/aril-ui-business-assetPicker.mjs"
     }
   }
 }

package/theme/layout/app/favorite-pages/favorite-pages-sidebar.component.d.ts

@@ -0,0 +1,42 @@
+import { OnInit } from '@angular/core';
+import { ConfirmationService, MessageService } from 'primeng/api';
+import { DialogService } from 'primeng/dynamicdialog';
+import { TranslocoService } from '@ngneat/transloco';
+import { LayoutService } from '../../service/app.layout.service';
+import { FavoritePageResponseDTO, FavoritePagesService } from './favorite-pages.service';
+import * as i0 from "@angular/core";
+export declare class FavoritePagesSidebarComponent implements OnInit {
+    layoutService: LayoutService;
+    private favoritePagesService;
+    private confirmationService;
+    private messageService;
+    private dialogService;
+    private translocoService;
+    favoritePages: import("@angular/core").WritableSignal<FavoritePageResponseDTO[]>;
+    allFavoritePages: import("@angular/core").WritableSignal<FavoritePageResponseDTO[]>;
+    isCurrentPageFavorited: import("@angular/core").WritableSignal<boolean>;
+    currentPage: import("@angular/core").WritableSignal<number>;
+    pageSize: import("@angular/core").WritableSignal<number>;
+    totalItems: import("@angular/core").WritableSignal<number>;
+    totalPages: import("@angular/core").WritableSignal<number>;
+    private subjects;
+    loadAllFavoritesService: import("@angular/core").Signal<import("../../../../../../dist/http").ServiceResponse<import("./favorite-pages.service").SearchResultDTO<FavoritePageResponseDTO>> | undefined>;
+    deleteFavoriteService: import("@angular/core").Signal<import("../../../../../../dist/http").ServiceResponse<boolean> | undefined>;
+    constructor(layoutService: LayoutService, favoritePagesService: FavoritePagesService, confirmationService: ConfirmationService, messageService: MessageService, dialogService: DialogService, translocoService: TranslocoService);
+    ngOnInit(): void;
+    private initializeEffects;
+    get visible(): boolean;
+    set visible(value: boolean);
+    private loadFavoritePages;
+    private updateClientSidePagination;
+    private checkCurrentPageStatus;
+    addCurrentPageToFavorites(): void;
+    removeCurrentPageFromFavorites(): void;
+    editFavorite(favorite: FavoritePageResponseDTO, event: Event): void;
+    deleteFavorite(favorite: FavoritePageResponseDTO, event: Event): void;
+    navigateToFavorite(favorite: FavoritePageResponseDTO): void;
+    trackByFavoriteId(index: number, favorite: FavoritePageResponseDTO): number;
+    onPageChange(event: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FavoritePagesSidebarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FavoritePagesSidebarComponent, "app-favorite-pages-sidebar", never, {}, {}, never, never, true, never>;
+}

package/theme/layout/app/favorite-pages/favorite-pages-sidebar.component.html

@@ -0,0 +1,106 @@
+<p-sidebar
+	[(visible)]="visible"
+	position="right"
+	[transitionOptions]="'.3s cubic-bezier(0, 0, 0.2, 1)'"
+	styleClass="layout-favorite-pages-sidebar w-full sm:w-30rem"
+	*transloco="let t; read: 'favoritePages'">
+	<ng-template pTemplate="header">
+		<div class="flex align-items-center justify-content-between w-full">
+			<div class="flex align-items-center">
+				<i class="pi pi-heart text-primary text-xl"></i>
+				<span class="font-bold text-lg">{{ t('favoritePages') }}</span>
+			</div>
+		</div>
+	</ng-template>
+
+	<div class="favorite-pages-content">
+		@if (isCurrentPageFavorited()) {
+			<div class="current-favorited-message">
+				<div class="message-content">
+					<i class="pi pi-check-circle text-green-500"></i>
+					<span>{{ t('currentPageFavorited') }}</span>
+				</div>
+			</div>
+		}
+
+		<div class="add-section">
+			@if (!isCurrentPageFavorited()) {
+				<aril-button
+					[label]="t('addCurrentPage')"
+					icon="PLUS"
+					color="primary"
+					size="sm"
+					(clickEvent)="addCurrentPageToFavorites()">
+				</aril-button>
+			} @else {
+				<aril-button
+					[label]="t('removeCurrentPage')"
+					icon="TIMES"
+					color="danger"
+					size="sm"
+					(clickEvent)="removeCurrentPageFromFavorites()">
+				</aril-button>
+			}
+		</div>
+
+		@if (favoritePages().length > 0) {
+			<div class="favorites-list">
+				<p-scrollPanel [style]="{ width: '100%', height: '100%' }">
+					<div class="favorites-items">
+						@for (favorite of favoritePages(); track trackByFavoriteId($index, favorite)) {
+							<div class="favorite-item" [class.default-item]="favorite.id < 0" (click)="navigateToFavorite(favorite)">
+								<div class="item-content">
+									<div class="item-header">
+										<div class="item-title">
+											<i class="pi pi-external-link text-primary mr-2"></i>
+											<span class="title-text">{{ favorite.label }}</span>
+										</div>
+										<aril-button
+											icon="PENCIL"
+											color="warning"
+											size="sm"
+											class="mr-1"
+											[pTooltip]="t('editFavorite')"
+											tooltipPosition="left"
+											(clickEvent)="editFavorite(favorite, $event)">
+										</aril-button>
+										<aril-button
+											icon="TIMES"
+											color="danger"
+											size="sm"
+											[pTooltip]="t('deleteFavorite')"
+											tooltipPosition="left"
+											(clickEvent)="deleteFavorite(favorite, $event)">
+										</aril-button>
+									</div>
+								</div>
+							</div>
+						}
+					</div>
+				</p-scrollPanel>
+			</div>
+		} @else {
+			<div class="empty-state">
+				<div class="empty-content">
+					<i class="pi pi-heart empty-icon"></i>
+					<h3 class="empty-title">{{ t('noFavorites') }}</h3>
+					<p class="empty-message">{{ t('startAddingFavorites') }}</p>
+				</div>
+			</div>
+		}
+		<div>
+			<p-paginator
+				[first]="(currentPage() - 1) * pageSize()"
+				[rows]="pageSize()"
+				[totalRecords]="totalItems()"
+				[showCurrentPageReport]="true"
+				[currentPageReportTemplate]="t('paginatorTemplate')"
+				[showFirstLastIcon]="false"
+				[showPageLinks]="false"
+				(onPageChange)="onPageChange($event)">
+			</p-paginator>
+		</div>
+	</div>
+
+	<p-confirmDialog></p-confirmDialog>
+</p-sidebar>

package/theme/layout/app/favorite-pages/favorite-pages-sidebar.component.scss

@@ -0,0 +1,181 @@
+:host ::ng-deep {
+	.layout-favorite-pages-sidebar {
+		.p-sidebar-content {
+			padding: 0;
+			background: var(--surface-ground);
+		}
+
+		.p-sidebar-header {
+			background: var(--primary-color);
+			color: var(--primary-color-text);
+			border-bottom: 1px solid var(--primary-600);
+			padding: 1rem 1.5rem;
+
+			span {
+				font-size: 1.1rem;
+				font-weight: 600;
+			}
+		}
+	}
+}
+
+.favorite-pages-content {
+	display: flex;
+	flex-direction: column;
+	height: 92vh;
+	background: var(--surface-0);
+}
+
+.current-favorited-message {
+	padding: 1rem;
+	border-bottom: 1px solid var(--surface-border);
+	background: var(--green-50);
+
+	.message-content {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		color: var(--green-700);
+		font-size: 0.9rem;
+		font-weight: 500;
+	}
+}
+
+.add-section {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 1rem;
+	border-bottom: 1px solid var(--surface-border);
+	background: var(--surface-0);
+}
+
+.favorites-list {
+	flex: 1;
+	overflow: hidden;
+}
+
+.favorites-items {
+	padding: 0.5rem;
+}
+
+.favorite-item {
+	background: var(--surface-0);
+	border: 1px solid var(--surface-border);
+	border-radius: 8px;
+	margin-bottom: 0.5rem;
+	cursor: pointer;
+	transition: all 0.2s ease;
+	position: relative;
+	overflow: hidden;
+
+	&:hover {
+		border-color: var(--primary-200);
+		background: var(--primary-50);
+		transform: translateY(-1px);
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+		.action-btn {
+			opacity: 1;
+		}
+	}
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+
+	&.default-item {
+		background: var(--blue-50);
+		border-left: 3px solid var(--blue-500);
+
+		&:hover {
+			background: var(--blue-100);
+			border-color: var(--blue-300);
+		}
+
+		.title-text {
+			font-weight: 600;
+			color: var(--blue-700);
+		}
+	}
+}
+
+.item-content {
+	padding: 0.5rem 0.75rem;
+}
+
+.item-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.item-title {
+	display: flex;
+	align-items: center;
+	flex: 1;
+	min-width: 0;
+
+	.title-text {
+		font-weight: 600;
+		color: var(--text-color);
+		font-size: 1rem;
+		line-height: 1.3;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+
+.empty-state {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 2rem;
+}
+
+.empty-content {
+	text-align: center;
+	max-width: 300px;
+
+	.empty-icon {
+		font-size: 3rem;
+		color: var(--text-color-secondary);
+		margin-bottom: 1rem;
+		opacity: 0.5;
+	}
+
+	.empty-title {
+		font-size: 1.1rem;
+		font-weight: 600;
+		color: var(--text-color);
+		margin-bottom: 0.5rem;
+	}
+
+	.empty-message {
+		font-size: 0.9rem;
+		color: var(--text-color-secondary);
+		line-height: 1.4;
+		margin-bottom: 1.5rem;
+	}
+}
+
+// Responsive Design
+@media (max-width: 768px) {
+	.add-section {
+		padding: 0.75rem;
+
+		.button-label {
+			font-size: 0.8rem;
+		}
+	}
+
+	.item-content {
+		padding: 0.5rem;
+	}
+
+	.item-title .title-text {
+		font-size: 0.85rem;
+	}
+}