spiderly 19.0.3 → 19.0.4

package/lib/components/layout/{layout-base.component.d.ts → layout.component.d.ts}

@@ -1,20 +1,28 @@
-import { OnDestroy, Renderer2 } from '@angular/core';
+import { ElementRef, OnDestroy, Renderer2 } from '@angular/core';
 import { Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { AppSidebarComponent } from './sidebar/sidebar.component';
-import { AppTopBarComponent } from './topbar/topbar.component';
+import { SideMenuTopBarComponent } from './sidemenu-topbar/sidemenu-topbar.component';
 import { LayoutBaseService } from '../../services/app-layout-base.service';
+import { SpiderlyMenuItem } from './sidebar/sidebar-menu.component';
+import { MenuItem } from 'primeng/api';
 import * as i0 from "@angular/core";
-export declare class LayoutBaseComponent implements OnDestroy {
+export declare class SpiderlyLayoutComponent implements OnDestroy {
     protected layoutService: LayoutBaseService;
     protected renderer: Renderer2;
     protected router: Router;
+    menu: SpiderlyMenuItem[];
+    sideMenu: MenuItem[];
+    topMenu: MenuItem[];
+    isSideMenuLayout: boolean;
     overlayMenuOpenSubscription: Subscription;
     menuOutsideClickListener: any;
     profileMenuOutsideClickListener: any;
     appSidebar: AppSidebarComponent;
-    appTopbar: AppTopBarComponent;
+    sidemenuTopbar: SideMenuTopBarComponent;
+    topbarmenu: ElementRef;
     constructor(layoutService: LayoutBaseService, renderer: Renderer2, router: Router);
+    ngOnInit(): void;
     hideMenu(): void;
     hideProfileMenu(): void;
     blockBodyScroll(): void;
@@ -32,6 +40,6 @@ export declare class LayoutBaseComponent implements OnDestroy {
     };
     ngOnDestroy(): void;
     onAfterNgDestroy: () => void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutBaseComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutBaseComponent, "layout-base", never, {}, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SpiderlyLayoutComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SpiderlyLayoutComponent, "spiderly-layout", never, { "menu": { "alias": "menu"; "required": false; }; "isSideMenuLayout": { "alias": "isSideMenuLayout"; "required": false; }; }, {}, never, ["[ACTIONS]"], true, never>;
 }

package/lib/components/layout/profile-avatar/profile-avatar.component.d.ts

@@ -0,0 +1,42 @@
+import { ElementRef } from '@angular/core';
+import { Router } from '@angular/router';
+import { LayoutBaseService } from '../../../services/app-layout-base.service';
+import { User } from '../../../entities/security-entities';
+import { AuthBaseService } from '../../../services/auth-base.service';
+import { TranslocoService } from '@jsverse/transloco';
+import { ConfigBaseService } from '../../../services/config-base.service';
+import * as i0 from "@angular/core";
+interface ProfileAvatarModalMenuItem {
+    label?: string;
+    icon?: string;
+    showSeparator?: boolean;
+    onClick?: () => void;
+    showNotificationBadge?: boolean;
+}
+export declare class ProfileAvatarComponent {
+    layoutService: LayoutBaseService;
+    private authService;
+    protected router: Router;
+    private translocoService;
+    config: ConfigBaseService;
+    isSideMenuLayout: boolean;
+    private initTopBarSubscription;
+    currentUser: User;
+    userProfilePath: string;
+    unreadNotificationsCount: number;
+    menuItems: ProfileAvatarModalMenuItem[];
+    avatarLabel: string;
+    showProfileIcon: boolean;
+    notificationMenuItem: ProfileAvatarModalMenuItem;
+    menu: ElementRef;
+    topbarProfileDropdownMenuButton: ElementRef;
+    constructor(layoutService: LayoutBaseService, authService: AuthBaseService, router: Router, translocoService: TranslocoService, config: ConfigBaseService);
+    ngOnInit(): Promise<void>;
+    onAfterNgOnInit: () => void;
+    onDocumentClick(event: any): void;
+    routeToUserPage(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ProfileAvatarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ProfileAvatarComponent, "spiderly-profile-avatar", never, { "isSideMenuLayout": { "alias": "isSideMenuLayout"; "required": false; }; }, {}, never, never, true, never>;
+}
+export {};

package/lib/components/layout/sidemenu-topbar/sidemenu-topbar.component.d.ts

@@ -0,0 +1,18 @@
+import { ConfigBaseService } from '../../../services/config-base.service';
+import { TranslocoService } from '@jsverse/transloco';
+import { Router } from '@angular/router';
+import { ElementRef } from '@angular/core';
+import { LayoutBaseService } from '../../../services/app-layout-base.service';
+import * as i0 from "@angular/core";
+export declare class SideMenuTopBarComponent {
+    layoutService: LayoutBaseService;
+    protected router: Router;
+    private config;
+    private translocoService;
+    companyName: string;
+    menuButton: ElementRef;
+    constructor(layoutService: LayoutBaseService, router: Router, config: ConfigBaseService, translocoService: TranslocoService);
+    ngOnInit(): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SideMenuTopBarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SideMenuTopBarComponent, "spiderly-sidemenu-topbar", never, {}, {}, never, never, true, never>;
+}

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

@@ -1,45 +1,14 @@
-import { TranslocoService } from '@jsverse/transloco';
-import { Router } from '@angular/router';
-import { ElementRef, OnDestroy } from '@angular/core';
-import { AuthBaseService } from '../../../services/auth-base.service';
-import { LayoutBaseService } from '../../../services/app-layout-base.service';
-import { ApiSecurityService } from '../../../services/api.service.security';
 import { ConfigBaseService } from '../../../services/config-base.service';
-import { User } from '../../../entities/security-entities';
+import { MenuItem } from 'primeng/api';
 import * as i0 from "@angular/core";
-interface SpiderlyMenuItem {
-    label?: string;
-    icon?: string;
-    showSeparator?: boolean;
-    onClick?: () => void;
-    showNotificationBadge?: boolean;
-}
-export declare class AppTopBarComponent implements OnDestroy {
-    layoutService: LayoutBaseService;
-    private authService;
-    private apiService;
-    protected router: Router;
-    private translocoService;
+export declare class TopBarComponent {
     private config;
-    private initTopBarSubscription;
-    currentUser: User;
-    userProfilePath: string;
-    unreadNotificationsCount: number;
-    menuItems: SpiderlyMenuItem[];
-    avatarLabel: string;
+    menu: MenuItem[];
     companyName: string;
-    showProfileIcon: boolean;
-    notificationMenuItem: SpiderlyMenuItem;
-    menuButton: ElementRef;
-    menu: ElementRef;
-    topbarProfileDropdownMenuButton: ElementRef;
-    constructor(layoutService: LayoutBaseService, authService: AuthBaseService, apiService: ApiSecurityService, router: Router, translocoService: TranslocoService, config: ConfigBaseService);
-    ngOnInit(): Promise<void>;
-    onAfterNgOnInit: () => void;
-    onDocumentClick(event: any): void;
-    routeToUserPage(): void;
-    ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AppTopBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AppTopBarComponent, "topbar", never, {}, {}, never, never, true, never>;
+    logoPath: string;
+    isSideMenuActive: boolean;
+    constructor(config: ConfigBaseService);
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TopBarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TopBarComponent, "spiderly-topbar", never, { "menu": { "alias": "menu"; "required": false; }; }, {}, never, ["[ACTIONS]"], true, never>;
 }
-export {};

package/lib/components/not-found/not-found.component.d.ts

@@ -3,6 +3,7 @@ import * as i0 from "@angular/core";
 export declare class NotFoundComponent {
     private config;
     companyName: string;
+    logoPath: string;
     constructor(config: ConfigBaseService);
     static ɵfac: i0.ɵɵFactoryDeclaration<NotFoundComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NotFoundComponent, "not-found", never, {}, {}, never, never, true, never>;

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

@@ -73,7 +73,7 @@ export declare class SpiderlyDataTableComponent implements OnInit {
     private loadFormArrayItems;
     getColHeaderWidth(filterType: string): "min-width: 12rem;" | "min-width: 10rem;" | "min-width: 8rem;" | "width: 0rem;";
     getColMatchModeOptions(filterType: string): SelectItem<any>[];
-    getColMatchMode(filterType: string): "equals" | "contains" | "in";
+    getColMatchMode(filterType: string): any;
     isDropOrMulti(filterType: string): boolean;
     navigateToDetails(rowId: number): void;
     deleteObject(rowId: number): void;
@@ -112,7 +112,7 @@ export declare class Action {
     });
 }
 export declare class Column<T = any> {
-    name: string;
+    name?: string;
     field?: string & keyof T;
     filterField?: string & keyof T;
     filterType?: 'text' | 'date' | 'multiselect' | 'boolean' | 'numeric';

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

@@ -0,0 +1,59 @@
+import { EventEmitter, OnInit, TemplateRef } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Table, TableFilterEvent, TableLazyLoadEvent } from 'primeng/table';
+import { Observable } from 'rxjs';
+import { TranslocoService } from '@jsverse/transloco';
+import { TableResponse } from '../../entities/table-response';
+import { TableFilter } from '../../entities/table-filter';
+import { Action } from '../spiderly-data-table/spiderly-data-table.component';
+import { SelectItem } from 'primeng/api';
+import { BaseEntity } from '../../entities/base-entity';
+import { PrimengOption } from '../../entities/primeng-option';
+import * as i0 from "@angular/core";
+export declare class SpiderlyDataViewComponent<T> implements OnInit {
+    private router;
+    private route;
+    private translocoService;
+    private locale;
+    table: Table;
+    items: T[];
+    rows: number;
+    filters: Filter<T>[];
+    totalRecords: number;
+    showCardWrapper: boolean;
+    onLazyLoad: EventEmitter<TableFilter>;
+    getTableDataObservableMethod: (tableFilter: TableFilter) => Observable<TableResponse>;
+    lastLazyLoadEvent: TableLazyLoadEvent;
+    loading: boolean;
+    matchModeDateOptions: SelectItem[];
+    matchModeNumberOptions: SelectItem[];
+    cardBody: TemplateRef<any>;
+    constructor(router: Router, route: ActivatedRoute, translocoService: TranslocoService, locale: string);
+    ngOnInit(): void;
+    lazyLoad(event: TableLazyLoadEvent): void;
+    filter(event: TableFilterEvent): void;
+    getDefaultMatchMode(filterType: string): any;
+    getMatchModeOptions(filterType: string): SelectItem<any>[];
+    navigateToDetails(rowId: number): void;
+    reload(): void;
+    colTrackByFn(index: any, item: any): any;
+    actionTrackByFn(index: any, item: Action): string;
+    applyFilters: () => void;
+    clearFilters(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SpiderlyDataViewComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SpiderlyDataViewComponent<any>, "spiderly-data-view", never, { "items": { "alias": "items"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "filters": { "alias": "filters"; "required": false; }; "showCardWrapper": { "alias": "showCardWrapper"; "required": false; }; "getTableDataObservableMethod": { "alias": "getTableDataObservableMethod"; "required": false; }; }, { "onLazyLoad": "onLazyLoad"; }, ["cardBody"], never, true, never>;
+}
+export interface DataViewCardBody<T> {
+    $implicit: T;
+    item: T;
+    index: number;
+}
+export interface Filter<T extends BaseEntity> {
+    name?: string;
+    field?: string & keyof T;
+    filterField?: string & keyof T;
+    filterType?: 'text' | 'date' | 'multiselect' | 'boolean' | 'numeric';
+    filterPlaceholder?: string;
+    showMatchModes?: boolean;
+    dropdownOrMultiselectValues?: PrimengOption[];
+}

package/lib/components/spiderly-form-control/spiderly-form-control.d.ts

@@ -8,19 +8,19 @@ export declare class SpiderlyFormControl<T = any> extends FormControl<T> {
     label: string;
     labelForDisplay: string;
     required: boolean;
+    parentClassName: string;
     private _spiderlyValidator;
     constructor(value: any, opts?: FormControlOptions, required?: boolean);
     getRawValue(): T;
     get validator(): SpiderlyValidatorFn | null;
     set validator(validator: SpiderlyValidatorFn | null);
 }
+type SpiderlyControlsOfType<TValue> = {
+    [P in keyof TValue]: SpiderlyFormControl<TValue[P]>;
+};
 export declare class SpiderlyFormGroup<TValue = any> extends FormGroup {
-    controls: {
-        [P in keyof TValue]: SpiderlyFormControl<TValue[P]>;
-    };
-    constructor(controls: {
-        [P in keyof TValue]: SpiderlyFormControl<TValue[P]>;
-    });
+    controls: SpiderlyControlsOfType<TValue>;
+    constructor(controls: SpiderlyControlsOfType<TValue>);
     getRawValue(): TValue;
     name?: string;
     mainDTOName?: string;
@@ -35,3 +35,4 @@ export declare class SpiderlyFormArray<TValue = any> extends FormArray {
     translationKey: string;
     controlNamesFromHtml?: string[];
 }
+export {};

package/lib/controls/spiderly-autocomplete/spiderly-autocomplete.component.d.ts

@@ -1,18 +1,25 @@
 import { OnInit } from '@angular/core';
-import { AutoCompleteCompleteEvent } from 'primeng/autocomplete';
+import { AutoCompleteCompleteEvent, AutoCompleteSelectEvent } from 'primeng/autocomplete';
 import { BaseAutocompleteControl } from '../base-autocomplete-control';
 import { TranslocoService } from '@jsverse/transloco';
+import { ValidatorAbstractService } from '../../services/validator-abstract.service';
+import { SpiderlyFormControl } from '../../components/spiderly-form-control/spiderly-form-control';
+import { PrimengOption } from '../../entities/primeng-option';
 import * as i0 from "@angular/core";
 export declare class SpiderlyAutocompleteComponent extends BaseAutocompleteControl implements OnInit {
     protected translocoService: TranslocoService;
+    private validatorService;
     appendTo: any;
     showClear: boolean;
     emptyMessage: string;
     displayName: string;
-    constructor(translocoService: TranslocoService);
+    helperFormControl: SpiderlyFormControl<PrimengOption>;
+    constructor(translocoService: TranslocoService, validatorService: ValidatorAbstractService);
     ngOnInit(): void;
     search(event: AutoCompleteCompleteEvent): void;
-    select(event: any): void;
+    select(event: AutoCompleteSelectEvent): void;
+    clear(): void;
+    autocompleteMarkAsDirty(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SpiderlyAutocompleteComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SpiderlyAutocompleteComponent, "spiderly-autocomplete", never, { "appendTo": { "alias": "appendTo"; "required": false; }; "showClear": { "alias": "showClear"; "required": false; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; }; "displayName": { "alias": "displayName"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/directives/template-type.directive.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+export declare class SpiderlyTemplateTypeDirective<T> {
+    templateType?: T;
+    static ngTemplateContextGuard<T>(dir: SpiderlyTemplateTypeDirective<T>, ctx: unknown): ctx is T;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SpiderlyTemplateTypeDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SpiderlyTemplateTypeDirective<any>, "[templateType]", never, { "templateType": { "alias": "templateType"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/entities/base-entity.d.ts

@@ -1,14 +1,4 @@
 export declare class BaseEntity {
-    pipedProperties?: PipedProperty[];
     typeName?: string;
     constructor(typeName: string);
 }
-export declare class PipedProperty {
-    pipe: PropertyPipes;
-    control: string;
-    constructor(p: PropertyPipes, c: string);
-}
-export declare enum PropertyPipes {
-    IntegerPipe = 0,
-    DecimalPipe = 1
-}

package/lib/entities/table-filter-context.d.ts

@@ -1,5 +1,8 @@
-export declare class TableFilterContext {
-    Value: any;
-    MatchMode: string;
-    Operator: string;
+import { MatchModeCodes } from "../enums/match-mode-enum-codes";
+export declare class TableFilterContext<T = any> {
+    matchMode: AllowedMatchModes<T>;
+    value: T;
+    operator?: string;
 }
+type AllowedMatchModes<T> = T extends string ? MatchModeCodes.Contains | MatchModeCodes.StartsWith | MatchModeCodes.Equals : T extends boolean ? MatchModeCodes.Equals : T extends Date ? MatchModeCodes.Equals | MatchModeCodes.GreaterThan | MatchModeCodes.LessThan : T extends number ? MatchModeCodes.Equals | MatchModeCodes.GreaterThan | MatchModeCodes.LessThan | MatchModeCodes.In : MatchModeCodes;
+export {};

package/lib/entities/table-filter-sort-meta.d.ts

@@ -1,4 +1,4 @@
 export declare class TableFilterSortMeta {
-    Field: string;
-    Order: number;
+    field: string;
+    order: number;
 }

package/lib/entities/table-filter.d.ts

@@ -1,8 +1,13 @@
 import { BaseEntity } from "../entities/base-entity";
-import { TableFilterContext } from "../entities/table-filter-context";
 import { TableFilterSortMeta } from "../entities/table-filter-sort-meta";
-export declare class TableFilter extends BaseEntity {
-    filters?: Map<string, TableFilterContext[]>;
+import { MatchModeCodes } from "../enums/match-mode-enum-codes";
+export declare class TableFilter<T extends BaseEntity = any> extends BaseEntity {
+    filters?: {
+        [K in keyof T]?: {
+            value: any;
+            matchMode: MatchModeCodes;
+        }[];
+    };
     first?: number;
     rows?: number;
     sortField?: string;
@@ -11,7 +16,12 @@ export declare class TableFilter extends BaseEntity {
     additionalFilterIdInt?: number;
     additionalFilterIdLong?: number;
     constructor({ filters, first, rows, sortField, sortOrder, multiSortMeta, additionalFilterIdInt, additionalFilterIdLong, }?: {
-        filters?: Map<string, TableFilterContext[]>;
+        filters?: {
+            [K in keyof T]?: {
+                value: any;
+                matchMode: MatchModeCodes;
+            }[];
+        };
         first?: number;
         rows?: number;
         sortField?: string;

package/lib/enums/match-mode-enum-codes.d.ts

@@ -0,0 +1,8 @@
+export declare enum MatchModeCodes {
+    StartsWith = 0,
+    Contains = 1,
+    Equals = 2,
+    LessThan = 3,
+    GreaterThan = 4,
+    In = 5
+}

package/lib/services/config-base.service.d.ts

@@ -18,6 +18,7 @@ export declare class ConfigBaseService {
         headers: HttpHeaders;
         params: HttpParams;
     };
+    logoPath: string;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<ConfigBaseService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ConfigBaseService>;

package/package.json

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

package/public-api.d.ts

@@ -36,6 +36,7 @@ export * from './lib/components/spiderly-buttons/spiderly-button/spiderly-button
 export * from './lib/components/spiderly-buttons/spiderly-split-button/spiderly-split-button.component';
 export * from './lib/components/spiderly-buttons/spiderly-button-base/spiderly-button-base';
 export * from './lib/components/spiderly-data-table/spiderly-data-table.component';
+export * from './lib/components/spiderly-data-view/spiderly-data-view.component';
 export * from './lib/components/spiderly-delete-dialog/spiderly-delete-confirmation.component';
 export * from './lib/components/spiderly-form-control/spiderly-form-control';
 export * from './lib/components/spiderly-panels/panel-body/panel-body.component';
@@ -47,8 +48,9 @@ export * from './lib/components/spiderly-panels/spiderly-panels.module';
 export * from './lib/components/layout/sidebar/sidebar-menu.component';
 export * from './lib/components/layout/sidebar/menuitem.component';
 export * from './lib/components/layout/sidebar/sidebar.component';
+export * from './lib/components/layout/sidemenu-topbar/sidemenu-topbar.component';
+export * from './lib/components/layout/layout.component';
 export * from './lib/components/layout/topbar/topbar.component';
-export * from './lib/components/layout/layout-base.component';
 export * from './lib/entities/base-entity';
 export * from './lib/entities/codebook';
 export * from './lib/entities/last-menu-icon-index-clicked';
@@ -69,6 +71,7 @@ export * from './lib/entities/init-top-bar-data';
 export * from './lib/entities/is-authorized-for-save-event';
 export * from './lib/enums/security-enums';
 export * from './lib/enums/verification-type-codes';
+export * from './lib/enums/match-mode-enum-codes';
 export * from './lib/guards/auth.guard';
 export * from './lib/guards/not-auth.guard';
 export * from './lib/handlers/spiderly-error-handler';
@@ -88,3 +91,4 @@ export * from './lib/services/spiderly-transloco-loader';
 export * from './lib/services/translate-labels-abstract.service';
 export * from './lib/services/validator-abstract.service';
 export * from './lib/services/app-layout-base.service';
+export * from './lib/directives/template-type.directive';

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

@@ -0,0 +1,33 @@
+.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{
+  .p-menubar-item-link {
+    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-view/spiderly-data-view.component.scss

@@ -0,0 +1,50 @@
+::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-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-footer/panel-footer.component.scss

@@ -3,7 +3,7 @@
     align-items: center; 
     justify-content: space-between; 
     gap: 10px; 
-    border-top: 1px solid #dee2e6;
+    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;

package/styles/styles/layout/_main.scss

@@ -21,6 +21,10 @@ body {
     -moz-osx-font-smoothing: grayscale;
 }
 
+.dark body {
+    background-color: var(--p-surface-950);
+}
+
 a {
     text-decoration: none;
     color: var(--p-primary-color);

package/styles/styles/layout/_menu.scss

@@ -86,7 +86,7 @@
             }
 
             &:hover {
-                background-color: var(--p-surface-100);
+                background-color: var(--p-content-hover-background);
             }
 
             &:focus {

package/styles/styles/layout/_topbar.scss

@@ -51,7 +51,7 @@
   
       &:hover {
         color: var(--p-text-color);
-        background-color: var(--p-surface-100);
+        background-color: var(--p-content-hover-background);
       }
   
       &:focus {
@@ -210,7 +210,7 @@
   
       &:hover {
         color: var(--p-text-color);
-        background-color: var(--p-surface-100);
+        background-color: var(--p-content-hover-background);
       }
   
       &:focus {

package/styles/styles/layout/layout.scss

@@ -4,7 +4,6 @@
 @use "./_main";
 @use "./_topbar";
 @use "./_menu";
-@use "./_config";
 @use "./_content";
 @use "./_footer";
 @use "./_responsive";

package/styles/styles/shared.scss

@@ -276,13 +276,13 @@
 }
 
 .gray-separator{
-	border-top: 1px solid $shade400;
+	border-top: 1px solid var(--p-content-border-color);
 	width: 100%;
 }
 
 // FT: You need to manually adjust the height
 .vertical-gray-separator{
-	border-left: 1px solid $shade400;
+	border-left: 1px solid var(--p-content-border-color);
 }
 
 .hover-card {
@@ -292,7 +292,7 @@
 }
 
 .hover-card:hover {
-	background-color: var(--p-surface-100);
+	background-color: var(--p-content-hover-background);
 }
 
 .dialog{
@@ -428,7 +428,7 @@
 }
 
 .icon-hover:hover {
-	background-color: $shade200;
+	background-color: var(--p-content-hover-background);
 }
 
 .gray-color {
@@ -541,4 +541,10 @@
   @media (min-width: 600px) {
     font-size: 4.5rem;
   }
+}
+
+ul, ol {
+  padding-left: 25px;
+  margin-top: 10px;
+  margin-bottom: 10px;
 }