spiderly 19.3.0 → 19.4.0-preview.0

package/lib/components/layout/layout.component.d.ts

@@ -19,6 +19,10 @@ export declare class SpiderlyLayoutComponent implements OnDestroy {
      * for root top menu items. Defaults to `false`.
      */
     showHoverBgOnRootTopMenuItems: boolean;
+    /**
+     * default max-width for the main content area.
+     */
+    maxWidth: string;
     overlayMenuOpenSubscription: Subscription;
     menuOutsideClickListener: any;
     profileMenuOutsideClickListener: any;
@@ -45,5 +49,5 @@ export declare class SpiderlyLayoutComponent implements OnDestroy {
     ngOnDestroy(): void;
     onAfterNgDestroy: () => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SpiderlyLayoutComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SpiderlyLayoutComponent, "spiderly-layout", never, { "menu": { "alias": "menu"; "required": false; }; "isSideMenuLayout": { "alias": "isSideMenuLayout"; "required": false; }; "showHoverBgOnRootTopMenuItems": { "alias": "showHoverBgOnRootTopMenuItems"; "required": false; }; }, {}, never, ["[ACTIONS]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SpiderlyLayoutComponent, "spiderly-layout", never, { "menu": { "alias": "menu"; "required": false; }; "isSideMenuLayout": { "alias": "isSideMenuLayout"; "required": false; }; "showHoverBgOnRootTopMenuItems": { "alias": "showHoverBgOnRootTopMenuItems"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; }, {}, never, ["[ACTIONS]"], true, never>;
 }

package/lib/components/spiderly-data-table/spiderly-data-table.component.d.ts

@@ -65,6 +65,18 @@ export declare class SpiderlyDataTableComponent implements OnInit {
     additionalIndexes: any;
     onRowSelect: EventEmitter<RowClickEvent>;
     onRowUnselect: EventEmitter<RowClickEvent>;
+    /**
+   * if true, clicking a row will navigate to the details page.
+   * Set to false to disable row navigation.
+   * Default is false.
+   */
+    navigateOnRowClick: boolean;
+    /**
+     * Path to navigate to when clicking a row.
+     * If not provided, it will use the current route with the row ID.
+     * Example: 'details' will navigate to '/details/{rowId}'.
+     */
+    rowNavigationPath: string;
     constructor(router: Router, dialogService: DialogService, route: ActivatedRoute, messageService: SpiderlyMessageService, translocoService: TranslocoService, locale: string);
     ngOnInit(): void;
     lazyLoad(event: TableLazyLoadEvent): void;
@@ -77,6 +89,7 @@ export declare class SpiderlyDataTableComponent implements OnInit {
     getColMatchMode(filterType: string): any;
     isDropOrMulti(filterType: string): boolean;
     navigateToDetails(rowId: number): void;
+    onRowClick(row: any): void;
     deleteObject(rowId: number): void;
     reload(): void;
     showActions(): boolean;
@@ -97,7 +110,7 @@ export declare class SpiderlyDataTableComponent implements OnInit {
     rowUnselect(id: number): void;
     getFormArrayControlByIndex(formControlName: string, index: number): SpiderlyFormControl;
     static ɵfac: i0.ɵɵFactoryDeclaration<SpiderlyDataTableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SpiderlyDataTableComponent, "spiderly-data-table", never, { "tableTitle": { "alias": "tableTitle"; "required": false; }; "tableIcon": { "alias": "tableIcon"; "required": false; }; "items": { "alias": "items"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "cols": { "alias": "cols"; "required": false; }; "showPaginator": { "alias": "showPaginator"; "required": false; }; "showCardWrapper": { "alias": "showCardWrapper"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "idField": { "alias": "idField"; "required": false; }; "getPaginatedListObservableMethod": { "alias": "getPaginatedListObservableMethod"; "required": false; }; "exportListToExcelObservableMethod": { "alias": "exportListToExcelObservableMethod"; "required": false; }; "deleteItemFromTableObservableMethod": { "alias": "deleteItemFromTableObservableMethod"; "required": false; }; "newlySelectedItems": { "alias": "newlySelectedItems"; "required": false; }; "unselectedItems": { "alias": "unselectedItems"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "selectedLazyLoadObservableMethod": { "alias": "selectedLazyLoadObservableMethod"; "required": false; }; "additionalFilterIdLong": { "alias": "additionalFilterIdLong"; "required": false; }; "showAddButton": { "alias": "showAddButton"; "required": false; }; "showExportToExcelButton": { "alias": "showExportToExcelButton"; "required": false; }; "showReloadTableButton": { "alias": "showReloadTableButton"; "required": false; }; "getFormArrayItems": { "alias": "getFormArrayItems"; "required": false; }; "hasLazyLoad": { "alias": "hasLazyLoad"; "required": false; }; "getAlreadySelectedItemIds": { "alias": "getAlreadySelectedItemIds"; "required": false; }; "getAlreadySelectedItems": { "alias": "getAlreadySelectedItems"; "required": false; }; "getFormControl": { "alias": "getFormControl"; "required": false; }; "additionalIndexes": { "alias": "additionalIndexes"; "required": false; }; }, { "onTotalRecordsChange": "onTotalRecordsChange"; "onLazyLoad": "onLazyLoad"; "onIsAllSelectedChange": "onIsAllSelectedChange"; "onRowSelect": "onRowSelect"; "onRowUnselect": "onRowUnselect"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SpiderlyDataTableComponent, "spiderly-data-table", never, { "tableTitle": { "alias": "tableTitle"; "required": false; }; "tableIcon": { "alias": "tableIcon"; "required": false; }; "items": { "alias": "items"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "cols": { "alias": "cols"; "required": false; }; "showPaginator": { "alias": "showPaginator"; "required": false; }; "showCardWrapper": { "alias": "showCardWrapper"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "idField": { "alias": "idField"; "required": false; }; "getPaginatedListObservableMethod": { "alias": "getPaginatedListObservableMethod"; "required": false; }; "exportListToExcelObservableMethod": { "alias": "exportListToExcelObservableMethod"; "required": false; }; "deleteItemFromTableObservableMethod": { "alias": "deleteItemFromTableObservableMethod"; "required": false; }; "newlySelectedItems": { "alias": "newlySelectedItems"; "required": false; }; "unselectedItems": { "alias": "unselectedItems"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "selectedLazyLoadObservableMethod": { "alias": "selectedLazyLoadObservableMethod"; "required": false; }; "additionalFilterIdLong": { "alias": "additionalFilterIdLong"; "required": false; }; "showAddButton": { "alias": "showAddButton"; "required": false; }; "showExportToExcelButton": { "alias": "showExportToExcelButton"; "required": false; }; "showReloadTableButton": { "alias": "showReloadTableButton"; "required": false; }; "getFormArrayItems": { "alias": "getFormArrayItems"; "required": false; }; "hasLazyLoad": { "alias": "hasLazyLoad"; "required": false; }; "getAlreadySelectedItemIds": { "alias": "getAlreadySelectedItemIds"; "required": false; }; "getAlreadySelectedItems": { "alias": "getAlreadySelectedItems"; "required": false; }; "getFormControl": { "alias": "getFormControl"; "required": false; }; "additionalIndexes": { "alias": "additionalIndexes"; "required": false; }; "navigateOnRowClick": { "alias": "navigateOnRowClick"; "required": false; }; "rowNavigationPath": { "alias": "rowNavigationPath"; "required": false; }; }, { "onTotalRecordsChange": "onTotalRecordsChange"; "onLazyLoad": "onLazyLoad"; "onIsAllSelectedChange": "onIsAllSelectedChange"; "onRowSelect": "onRowSelect"; "onRowUnselect": "onRowUnselect"; }, never, never, true, never>;
 }
 export declare class Action {
     name?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spiderly",
-  "version": "19.3.0",
+  "version": "19.4.0-preview.0",
   "author": "Filip Trivan",
   "license": "MIT",
   "description": "Spiderly Angular Library to use in combination with Spiderly.",

package/styles/components/info-card/info-card.component.scss

@@ -1,61 +1,61 @@
-.info-card {
-  background-color: var(--p-primary-100);
-  position: relative;
-  overflow: hidden;
-
-  &__content {
-    display: flex;
-    align-items: center;
-    gap: 21px;
-    position: relative;
-    z-index: 2;
-  }
-
-  &__icon {
-    font-size: 21px;
-    color: var(--p-primary-color);
-  }
-
-  &__header {
-    display: flex;
-    gap: 8px;
-    color: var(--p-primary-color);
-    font-weight: 600;
-    text-align: left;
-    font-size: 17.5px;
-  }
-
-  &__body {
-    text-align: left;
-    margin-top: 8px;
-  }
-
-  &__background-icon {
-    text-align: center;
-    transform: rotate(30deg);
-    color: var(--p-primary-400);
-    opacity: 0.2;
-    position: absolute; 
-    overflow: hidden; 
-    right: -30px; 
-    top: -25px; 
-    z-index: 1;
-    
-    i {
-      font-size: 270px;
-    }
-  }
-}
-
-::ng-deep{
-  html.dark .info-card {
-    background-color: var(--p-primary-950);
-
-    &__header {
-      color: var(--p-primary-400);
-    }
-    &__icon {
-      color: var(--p-primary-400);
-    }
-  }
+.info-card {
+  background-color: var(--p-primary-100);
+  position: relative;
+  overflow: hidden;
+
+  &__content {
+    display: flex;
+    align-items: center;
+    gap: 21px;
+    position: relative;
+    z-index: 2;
+  }
+
+  &__icon {
+    font-size: 21px;
+    color: var(--p-primary-color);
+  }
+
+  &__header {
+    display: flex;
+    gap: 8px;
+    color: var(--p-primary-color);
+    font-weight: 600;
+    text-align: left;
+    font-size: 17.5px;
+  }
+
+  &__body {
+    text-align: left;
+    margin-top: 8px;
+  }
+
+  &__background-icon {
+    text-align: center;
+    transform: rotate(30deg);
+    color: var(--p-primary-400);
+    opacity: 0.2;
+    position: absolute; 
+    overflow: hidden; 
+    right: -30px; 
+    top: -25px; 
+    z-index: 1;
+    
+    i {
+      font-size: 270px;
+    }
+  }
+}
+
+::ng-deep{
+  html.dark .info-card {
+    background-color: var(--p-primary-950);
+
+    &__header {
+      color: var(--p-primary-400);
+    }
+    &__icon {
+      color: var(--p-primary-400);
+    }
+  }
 }

package/styles/components/layout/profile-avatar/profile-avatar.component.scss

@@ -1,9 +1,9 @@
-.side-menu-profile-dialog {
-    right: 26px;
-    top: 60px;
-}
-
-.top-menu-profile-dialog {
-    right: 0px;
-    top: 40px;
+.side-menu-profile-dialog {
+    right: 26px;
+    top: 60px;
+}
+
+.top-menu-profile-dialog {
+    right: 0px;
+    top: 40px;
 }

package/styles/components/layout/topbar/topbar.component.scss

@@ -1,39 +1,39 @@
-.topbar-wrapper {
-  background-color: var(--p-content-background); 
-  width: 100%; 
-  border-bottom: 1px solid var(--p-content-border-color); 
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  position: sticky; 
-  top: 0; 
-  left: 0; 
-  z-index: 1000;
-}
-
-.topbar {
-  max-width: 1100px;
-  margin: auto;
-}
-
-::ng-deep{
-  .show-hover-bg-on-root-items {
-    .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content {
-      background-color: transparent !important;
-    }
-  }
-  .p-menubar-item-link {
-    background-color: transparent !important;
-    padding: 10px !important;
-    font-size: 15px !important;
-    .pi {
-      font-size: 15px;
-    }
-  }
-  .p-menubar-button {
-    width: 35px !important;
-    height: 35px !important;
-    .p-icon {
-      width: 16px;
-      height: 16px;
-    }
-  }
+.topbar-wrapper {
+  background-color: var(--p-content-background); 
+  width: 100%; 
+  border-bottom: 1px solid var(--p-content-border-color); 
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  position: sticky; 
+  top: 0; 
+  left: 0; 
+  z-index: 1000;
+}
+
+.topbar {
+  max-width: 1100px;
+  margin: auto;
+}
+
+::ng-deep{
+  .show-hover-bg-on-root-items {
+    .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content {
+      background-color: transparent !important;
+    }
+  }
+  .p-menubar-item-link {
+    background-color: transparent !important;
+    padding: 10px !important;
+    font-size: 15px !important;
+    .pi {
+      font-size: 15px;
+    }
+  }
+  .p-menubar-button {
+    width: 35px !important;
+    height: 35px !important;
+    .p-icon {
+      width: 16px;
+      height: 16px;
+    }
+  }
 }

package/styles/components/spiderly-data-table/spiderly-data-table.component.scss

@@ -1,49 +1,49 @@
-.table-header {
-	display: flex;
-	justify-content: space-between; 
-	align-items: center;
-}
-
-@media (max-width: 640px) {
-	.table-header {
-		display: flex;
-		flex-direction: column;
-		align-items: start;
-		gap: 14px;
-	}
-}
-
-.spiderly-table {
-	.p-paginator {
-		padding: 1rem;
-	}
-	.p-paginator-left-content {
-		@media (min-width: 1400px) {			
-			position: absolute;
-			padding: 14px;
-			left: 0;
-		}
-	}
-	.p-paginator-right-content {
-		@media (min-width: 1400px) {			
-			position: absolute;
-			padding: 14px;
-			right: 0;
-		}
-	}
-}
-
-:host {
-	::ng-deep {
-		.p-datatable-thead{
-			position: unset !important;
-		}
-		.p-datatable-header{
-			border-radius: 6px 6px 0 0;
-		}
-		.p-datatable {
-			border-radius: var(--p-content-border-radius);
-			border: 1px solid var(--p-datatable-border-color);
-		}
-	}
+.table-header {
+	display: flex;
+	justify-content: space-between; 
+	align-items: center;
+}
+
+@media (max-width: 640px) {
+	.table-header {
+		display: flex;
+		flex-direction: column;
+		align-items: start;
+		gap: 14px;
+	}
+}
+
+.spiderly-table {
+	.p-paginator {
+		padding: 1rem;
+	}
+	.p-paginator-left-content {
+		@media (min-width: 1400px) {			
+			position: absolute;
+			padding: 14px;
+			left: 0;
+		}
+	}
+	.p-paginator-right-content {
+		@media (min-width: 1400px) {			
+			position: absolute;
+			padding: 14px;
+			right: 0;
+		}
+	}
+}
+
+:host {
+	::ng-deep {
+		.p-datatable-thead{
+			position: unset !important;
+		}
+		.p-datatable-header{
+			border-radius: 6px 6px 0 0;
+		}
+		.p-datatable {
+			border-radius: var(--p-content-border-radius);
+			border: 1px solid var(--p-datatable-border-color);
+		}
+	}
 }

package/styles/components/spiderly-data-view/spiderly-data-view.component.scss

@@ -1,56 +1,56 @@
-
-::ng-deep{
-	.p-datatable-tbody {
-		display: flex;
-		flex-direction: column;
-		gap: 18px;
-	}
-
-	.p-datatable-header {
-		margin-bottom: 36px;
-		border: 0 !important;
-		padding: 0 !important;
-		background-color: transparent !important;
-	}
-
-	.p-paginator {
-		padding: 18px 9px 0px 9px !important;
-	}
-
-	.p-fluid {
-		width: 100% !important;
-	}
-
-	.p-inputtext {
-		width: 100% !important;
-	}
-
-	.p-inputnumber {
-		width: 100% !important;
-	}
-
-	.p-datepicker {
-		width: 100% !important;
-	}
-}
-
-
-.data-view-grid {
-    display: grid;
-    gap: 18px;
-    grid-template-columns: 1fr 1fr 1fr;
-	margin-bottom: 18px;
-}
-
-@media (max-width: 1080px) {
-    .data-view-grid {
-        gap: 12px;
-        grid-template-columns: 1fr 1fr;
-    }
-}
-
-@media (max-width: 500px) {
-    .data-view-grid {
-        grid-template-columns: 1fr;
-    }
+
+::ng-deep{
+	.p-datatable-tbody {
+		display: flex;
+		flex-direction: column;
+		gap: 18px;
+	}
+
+	.p-datatable-header {
+		margin-bottom: 36px;
+		border: 0 !important;
+		padding: 0 !important;
+		background-color: transparent !important;
+	}
+
+	.p-paginator {
+		padding: 18px 9px 0px 9px !important;
+	}
+
+	.p-fluid {
+		width: 100% !important;
+	}
+
+	.p-inputtext {
+		width: 100% !important;
+	}
+
+	.p-inputnumber {
+		width: 100% !important;
+	}
+
+	.p-datepicker {
+		width: 100% !important;
+	}
+}
+
+
+.data-view-grid {
+    display: grid;
+    gap: 18px;
+    grid-template-columns: 1fr 1fr 1fr;
+	margin-bottom: 18px;
+}
+
+@media (max-width: 1080px) {
+    .data-view-grid {
+        gap: 12px;
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+@media (max-width: 500px) {
+    .data-view-grid {
+        grid-template-columns: 1fr;
+    }
 }

package/styles/components/spiderly-panels/panel-body/panel-body.component.scss

@@ -1,9 +1,9 @@
-.non-grid-panel-bottom-padding{
-	padding-bottom: 14px;
-}
-
-@media (max-width: 600px) {
-	.non-grid-panel-bottom-padding{
-		padding-bottom: 0px;
-	}
+.non-grid-panel-bottom-padding{
+	padding-bottom: 14px;
+}
+
+@media (max-width: 600px) {
+	.non-grid-panel-bottom-padding{
+		padding-bottom: 0px;
+	}
 }

package/styles/components/spiderly-panels/panel-footer/panel-footer.component.scss

@@ -1,17 +1,17 @@
-.spiderly-panel-footer{
-    display: flex; 
-    align-items: center; 
-    justify-content: space-between; 
-    gap: 10px; 
-    border-top: 1px solid var(--p-content-border-color);
-    border-bottom-right-radius: var(--p-content-border-radius);
-    border-bottom-left-radius: var(--p-content-border-radius);
-    padding: 18px;
-}
-
-.buttons-wrapper{
-    gap: 0.5rem;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
+.spiderly-panel-footer{
+    display: flex; 
+    align-items: center; 
+    justify-content: space-between; 
+    gap: 10px; 
+    border-top: 1px solid var(--p-content-border-color);
+    border-bottom-right-radius: var(--p-content-border-radius);
+    border-bottom-left-radius: var(--p-content-border-radius);
+    padding: 18px;
+}
+
+.buttons-wrapper{
+    gap: 0.5rem;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
 }