spiderly 0.0.2

package/lib/services/app-initializer.d.ts

@@ -0,0 +1,4 @@
+import { Observable } from 'rxjs';
+import { AuthBaseService } from './auth-base.service';
+import { AuthResult } from '../entities/security-entities';
+export declare function authInitializer(authService: AuthBaseService): () => Observable<AuthResult>;

package/lib/services/app-layout-base.service.d.ts

@@ -0,0 +1,60 @@
+import { AuthBaseService } from './auth-base.service';
+import { ApiSecurityService } from './api.service.security';
+import { OnDestroy } from '@angular/core';
+import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+import { InitTopBarData } from '../entities/init-top-bar-data';
+import { ConfigBaseService } from './config-base.service';
+import { PrimengOption } from '../entities/primeng-option';
+import { AutoCompleteCompleteEvent } from 'primeng/autocomplete';
+import * as i0 from "@angular/core";
+export interface AppConfig {
+    inputStyle: string;
+    colorScheme: string;
+    theme: string;
+    ripple: boolean;
+    menuMode: string;
+    scale: number;
+    color: string;
+}
+interface LayoutState {
+    staticMenuDesktopInactive: boolean;
+    overlayMenuActive: boolean;
+    profileSidebarVisible: boolean;
+    profileDropdownSidebarVisible: boolean;
+    configSidebarVisible: boolean;
+    staticMenuMobileActive: boolean;
+    menuHoverActive: boolean;
+}
+export declare class LayoutBaseService implements OnDestroy {
+    protected apiService: ApiSecurityService;
+    protected config: ConfigBaseService;
+    protected authService: AuthBaseService;
+    userSubscription: Subscription;
+    protected _unreadNotificationsNumber: BehaviorSubject<number>;
+    unreadNotificationsCount$: Observable<number>;
+    layoutConfig: AppConfig;
+    state: LayoutState;
+    private configUpdate;
+    private overlayOpen;
+    configUpdate$: Observable<AppConfig>;
+    overlayOpen$: Observable<any>;
+    constructor(apiService: ApiSecurityService, config: ConfigBaseService, authService: AuthBaseService);
+    initUnreadNotificationsCountForCurrentUser: () => void;
+    initUnreadNotificationsCountForCurrentUserObservable: () => Observable<any>;
+    setUnreadNotificationsCountForCurrentUser: () => Observable<any>;
+    onMenuToggle(): void;
+    showProfileSidebar(): void;
+    showProfileDropdownSidebar(): void;
+    showConfigSidebar(): void;
+    isOverlay(): boolean;
+    isDesktop(): boolean;
+    isMobile(): boolean;
+    onConfigUpdate(): void;
+    initTopBarData: () => Observable<InitTopBarData>;
+    searchPartners: (event: AutoCompleteCompleteEvent) => Observable<PrimengOption[]>;
+    partnersAutocompleteButtonClick: (selectedPartner: PrimengOption) => void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LayoutBaseService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<LayoutBaseService>;
+}
+export {};

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

@@ -0,0 +1,55 @@
+import { OnDestroy } from '@angular/core';
+import { Router } from '@angular/router';
+import { HttpClient } from '@angular/common/http';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { SocialUser, SocialAuthService } from '@abacritt/angularx-social-login';
+import { ExternalProvider, Login, VerificationTokenRequest, AuthResult, Registration, RegistrationVerificationResult, User } from '../entities/security-entities';
+import { ConfigBaseService } from './config-base.service';
+import { ApiSecurityService } from './api.service.security';
+import { InitCompanyAuthDialogDetails } from '../entities/init-company-auth-dialog-details';
+import * as i0 from "@angular/core";
+export declare class AuthBaseService implements OnDestroy {
+    protected router: Router;
+    protected http: HttpClient;
+    protected externalAuthService: SocialAuthService;
+    protected apiService: ApiSecurityService;
+    protected config: ConfigBaseService;
+    private readonly apiUrl;
+    private timer?;
+    protected _currentUserPermissionCodes: BehaviorSubject<string[]>;
+    currentUserPermissionCodes$: Observable<string[]>;
+    protected _user: BehaviorSubject<User>;
+    user$: Observable<User>;
+    private authChangeSub;
+    private extAuthChangeSub;
+    authChanged: Observable<boolean>;
+    extAuthChanged: Observable<SocialUser>;
+    constructor(router: Router, http: HttpClient, externalAuthService: SocialAuthService, apiService: ApiSecurityService, config: ConfigBaseService);
+    private storageEventListener;
+    sendLoginVerificationEmail(body: Login): Observable<any>;
+    login(body: VerificationTokenRequest): Observable<Promise<AuthResult>>;
+    loginExternal(body: ExternalProvider): Observable<Promise<AuthResult>>;
+    sendRegistrationVerificationEmail(body: Registration): Observable<RegistrationVerificationResult>;
+    register(body: VerificationTokenRequest): Observable<Promise<AuthResult>>;
+    handleLoginResult(loginResultObservable: Observable<AuthResult>): Observable<Promise<AuthResult>>;
+    logout(): void;
+    onAfterLogout: () => void;
+    refreshToken(): Observable<AuthResult>;
+    onAfterRefreshToken: () => void;
+    setLocalStorage(loginResult: AuthResult): void;
+    clearLocalStorage(): void;
+    getBrowserId(): string;
+    isAccessTokenExpired(): Observable<boolean>;
+    getTokenRemainingTime(): number;
+    getAccessToken(): string;
+    private startTokenTimer;
+    private stopTokenTimer;
+    navigateToDashboard(): void;
+    logoutGoogle: () => void;
+    initCompanyAuthDialogDetails: () => Observable<InitCompanyAuthDialogDetails>;
+    setCurrentUserPermissionCodes(): Observable<string[]>;
+    ngOnDestroy(): void;
+    onAfterNgOnDestroy: () => void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AuthBaseService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<AuthBaseService>;
+}

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

@@ -0,0 +1,27 @@
+import { TranslocoService } from '@jsverse/transloco';
+import { SpiderlyFormArray, SpiderlyFormGroup } from '../components/spiderly-form-control/spiderly-form-control';
+import { BaseEntity } from '../entities/base-entity';
+import { TranslateLabelsAbstractService } from './translate-labels-abstract.service';
+import { ValidatorAbstractService } from './validator-abstract.service';
+import { SpiderlyMessageService } from './spiderly-message.service';
+import * as i0 from "@angular/core";
+export declare class BaseFormService {
+    private translateLabelsService;
+    private validatorService;
+    private messageService;
+    private translocoService;
+    constructor(translateLabelsService: TranslateLabelsAbstractService, validatorService: ValidatorAbstractService, messageService: SpiderlyMessageService, translocoService: TranslocoService);
+    addFormGroup: <T>(formGroup: SpiderlyFormGroup<T>, parentFormGroup: SpiderlyFormGroup, modelConstructor: any, propertyNameInSaveBody: string, updateOnChangeControls?: (keyof T)[]) => SpiderlyFormGroup<T>;
+    initFormGroup: <T>(formGroup: SpiderlyFormGroup<T>, modelConstructor: T & BaseEntity, updateOnChangeControls?: (keyof T)[]) => SpiderlyFormGroup<T>;
+    getTranslatedLabel(formControlName: string): string;
+    getFormArrayGroups<T>(formArray: SpiderlyFormArray<T>): SpiderlyFormGroup<T>[];
+    addNewFormGroupToFormArray<T>(formArray: SpiderlyFormArray<T>, modelConstructor: T & BaseEntity, index: number): SpiderlyFormGroup;
+    initFormArray<T>(parentFormGroup: SpiderlyFormGroup, modelList: (T & BaseEntity)[], modelConstructor: T & BaseEntity, formArraySaveBodyName: string, formArrayTranslationKey: string, required?: boolean): SpiderlyFormArray<T>;
+    disableAllFormControls<T>(formArray: SpiderlyFormArray<T>): void;
+    enableAllFormControls<T>(formArray: SpiderlyFormArray<T>): void;
+    checkFormGroupValidity: <T>(formGroup: SpiderlyFormGroup<T>) => boolean;
+    showInvalidFieldsMessage: () => void;
+    generateNewNegativeId<T extends BaseEntity>(formArray: SpiderlyFormArray<T>): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseFormService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<BaseFormService>;
+}

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

@@ -0,0 +1,24 @@
+import { HttpHeaders, HttpParams } from "@angular/common/http";
+import * as i0 from "@angular/core";
+export declare class ConfigBaseService {
+    production: boolean;
+    apiUrl: string;
+    frontendUrl: string;
+    googleClientId: string;
+    companyName: string;
+    primaryColor: string;
+    googleAuth: boolean;
+    usersCanRegister: boolean;
+    loginSlug: string;
+    accessTokenKey: string;
+    refreshTokenKey: string;
+    browserIdKey: string;
+    httpOptions: {};
+    httpSkipSpinnerOptions: {
+        headers: HttpHeaders;
+        params: HttpParams;
+    };
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConfigBaseService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ConfigBaseService>;
+}

package/lib/services/helper-functions.d.ts

@@ -0,0 +1,37 @@
+import { Action, Column } from "../components/spiderly-data-table/spiderly-data-table.component";
+import { HttpResponse } from "@angular/common/http";
+import { BaseEntity } from "../entities/base-entity";
+import { SpiderlyFormGroup } from "../components/spiderly-form-control/spiderly-form-control";
+import { Observable } from 'rxjs';
+import { TableFilter } from "../entities/table-filter";
+import { Namebook } from "../entities/namebook";
+import { Codebook } from "../entities/codebook";
+import { PrimengOption } from "../entities/primeng-option";
+import { SpiderlyTab } from "../components/spiderly-panels/panel-header/panel-header.component";
+export declare function validatePrecisionScale(value: any, precision: number, scale: number, ignoreTrailingZeros: boolean): boolean;
+export declare function getMimeTypeForFileName(fileName: string): string;
+export declare function adjustColor(color: string, percent: number): string;
+export declare function getHtmlImgDisplayString64(base64String: string): string;
+export declare function nameof<TObject>(obj: TObject, key: keyof TObject): string;
+export declare function nameof<TObject>(key: keyof TObject): string;
+export declare function nameOf<TObject extends {
+    name: S;
+}, S extends string>(funcOrClass: TObject): S;
+export declare function getParentUrl(currentUrl: string): string;
+export declare function capitalizeFirstLetter(inputString: string): string;
+export declare function getMonth(numberOfTheMonth: number): string;
+export declare function singleOrDefault<T>(array: T[], predicate: (item: T) => boolean): T | undefined;
+export declare function pushAction(cols: Column[], action: Action): void;
+export declare function deleteAction(cols: Column[], actionField: string): void;
+export declare function getFileNameFromContentDisposition(resp: HttpResponse<Blob>, defaultName: string): string;
+export declare const getControl: <T extends BaseEntity>(formControlName: string & keyof T, formGroup: SpiderlyFormGroup<T>) => { [P in keyof T]: import("../components/spiderly-form-control/spiderly-form-control").SpiderlyFormControl<T[P]>; }[string & keyof T];
+export declare function toCommaSeparatedString<T>(input: T[]): string;
+export declare function isImageFileType(mimeType: string): boolean;
+export declare function isExcelFileType(mimeType: string): boolean;
+export declare function exportListToExcel(exportTableDataToExcelObservableMethod: (tableFilter: TableFilter) => Observable<any>, tableFilter: TableFilter): void;
+export declare function getPrimengDropdownNamebookOptions(getDropdownListObservable: (parentEntityId?: number) => Observable<Namebook[]>, parentEntityId?: number): Observable<PrimengOption[]>;
+export declare function getPrimengDropdownCodebookOptions(getDropdownListObservable: () => Observable<Codebook[]>): Observable<PrimengOption[]>;
+export declare function getPrimengAutocompleteNamebookOptions(getAutocompleteListObservable: (limit: number, query: string, parentEntityId?: number) => Observable<Namebook[]>, limit: number, query: string, parentEntityId?: number): Observable<PrimengOption[]>;
+export declare function getPrimengAutocompleteCodebookOptions(getAutocompleteListObservable: (limit: number, query: string) => Observable<Codebook[]>, limit: number, query: string): Observable<PrimengOption[]>;
+export declare const isNullOrEmpty: (input: string) => boolean;
+export declare const selectedTab: (tabs: SpiderlyTab[]) => number;

package/lib/services/spiderly-message.service.d.ts

@@ -0,0 +1,17 @@
+import { TranslocoService } from '@jsverse/transloco';
+import { NgZone } from '@angular/core';
+import { MessageService } from 'primeng/api';
+import * as i0 from "@angular/core";
+export declare class SpiderlyMessageService {
+    private messageService;
+    private translocoService;
+    private ngZone;
+    constructor(messageService: MessageService, translocoService: TranslocoService, ngZone: NgZone);
+    successMessage(detail: string, title?: string): void;
+    warningMessage(detail: string, title?: string, sticky?: boolean): void;
+    warningMessageWithTimeout(detail: string, title?: string): void;
+    errorMessage(detail: string, title?: string): void;
+    infoMessage(detail: string, title?: string, sticky?: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SpiderlyMessageService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SpiderlyMessageService>;
+}

package/lib/services/spiderly-transloco-loader.d.ts

@@ -0,0 +1,10 @@
+import { TranslocoLoader } from '@jsverse/transloco';
+import { HttpClient } from '@angular/common/http';
+import * as i0 from "@angular/core";
+export declare class SpiderlyTranslocoLoader implements TranslocoLoader {
+    private http;
+    constructor(http: HttpClient);
+    getTranslation(lang: string): import("rxjs").Observable<Object>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SpiderlyTranslocoLoader, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SpiderlyTranslocoLoader>;
+}

package/lib/services/translate-labels-abstract.service.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+export declare abstract class TranslateLabelsAbstractService {
+    constructor();
+    abstract translate(name: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TranslateLabelsAbstractService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<TranslateLabelsAbstractService>;
+}

package/lib/services/validator-abstract.service.d.ts

@@ -0,0 +1,13 @@
+import { TranslocoService } from '@jsverse/transloco';
+import { SpiderlyFormArray, SpiderlyFormControl, SpiderlyValidatorFn } from "../components/spiderly-form-control/spiderly-form-control";
+import * as i0 from "@angular/core";
+export declare abstract class ValidatorAbstractService {
+    protected translocoService: TranslocoService;
+    constructor(translocoService: TranslocoService);
+    abstract setValidator(formControl: SpiderlyFormControl, className: string): SpiderlyValidatorFn;
+    isArrayEmpty: (control: SpiderlyFormControl) => SpiderlyValidatorFn;
+    notEmpty: (control: SpiderlyFormControl) => void;
+    isFormArrayEmpty: (control: SpiderlyFormArray) => SpiderlyValidatorFn;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ValidatorAbstractService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ValidatorAbstractService>;
+}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "spiderly",
+  "version": "0.0.2",
+  "author": "Filip Trivan",
+  "license": "MIT",
+  "description": "Angular Library to use in combination with Spiderly.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/filiptrivan/spiderly/tree/main/Angular"
+  },
+  "keywords": [
+    "spiderly",
+    "spiderly framework",
+    "spiderly angular",
+    "angular spiderly",
+    "angular spiderly framework",
+    "spiderly framework angular"
+  ],
+  "private": false,
+  "peerDependencies": {
+    "@abacritt/angularx-social-login": "2.2.0",
+    "@angular/animations": "17.3.12",
+    "@angular/cdk": "17.3.10",
+    "@angular/common": "17.3.12",
+    "@angular/compiler": "17.3.12",
+    "@angular/core": "17.3.12",
+    "@angular/forms": "17.3.12",
+    "@angular/platform-browser": "17.3.12",
+    "@angular/platform-browser-dynamic": "17.3.12",
+    "@angular/router": "17.3.12",
+    "@jsverse/transloco": "7.5.0",
+    "file-saver": "2.0.5",
+    "json-parser": "3.1.2",
+    "ngx-spinner": "17.0.0",
+    "primeflex": "3.3.1",
+    "primeicons": "7.0.0",
+    "primeng": "17.18.9",
+    "quill": "2.0.2",
+    "rxjs": "7.8.1",
+    "webpack-dev-server": "4.15.1",
+    "zone.js": "0.14.10"
+  },
+  "dependencies": {
+    "tslib": "2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/spiderly.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/spiderly.mjs",
+      "esm": "./esm2022/spiderly.mjs",
+      "default": "./fesm2022/spiderly.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1,90 @@
+export * from './lib/modules/core.module';
+export * from './lib/modules/primeng.module';
+export * from './lib/modules/spiderly-transloco.module';
+export * from './lib/components/auth/auth.module';
+export * from './lib/controls/spiderly-autocomplete/spiderly-autocomplete.component';
+export * from './lib/controls/spiderly-calendar/spiderly-calendar.component';
+export * from './lib/controls/spiderly-checkbox/spiderly-checkbox.component';
+export * from './lib/controls/spiderly-colorpick/spiderly-colorpick.component';
+export * from './lib/controls/spiderly-dropdown/spiderly-dropdown.component';
+export * from './lib/controls/spiderly-editor/spiderly-editor.component';
+export * from './lib/controls/spiderly-file/spiderly-file.component';
+export * from './lib/controls/spiderly-multiautocomplete/spiderly-multiautocomplete.component';
+export * from './lib/controls/spiderly-multiselect/spiderly-multiselect.component';
+export * from './lib/controls/spiderly-number/spiderly-number.component';
+export * from './lib/controls/spiderly-password/spiderly-password.component';
+export * from './lib/controls/spiderly-textarea/spiderly-textarea.component';
+export * from './lib/controls/spiderly-textbox/spiderly-textbox.component';
+export * from './lib/controls/base-control';
+export * from './lib/controls/base-autocomplete-control';
+export * from './lib/controls/base-dropdown-control';
+export * from './lib/controls/spiderly-controls.module';
+export * from './lib/components/base-details/role-base-details.component';
+export * from './lib/components/base-form/base-form copy';
+export * from './lib/components/card-skeleton/card-skeleton.component';
+export * from './lib/components/auth/partials/login-verification.component';
+export * from './lib/components/auth/partials/registration-verification.component';
+export * from './lib/components/auth/partials/verification-wrapper.component';
+export * from './lib/components/footer/footer.component';
+export * from './lib/components/spiderly-buttons/google-button/google-button.component';
+export * from './lib/components/index-card/index-card.component';
+export * from './lib/components/info-card/info-card.component';
+export * from './lib/components/not-found/not-found.component';
+export * from './lib/components/required/required.component';
+export * from './lib/components/spiderly-buttons/return-button/return-button.component';
+export * from './lib/components/spiderly-buttons/spiderly-button/spiderly-button.component';
+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-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';
+export * from './lib/components/spiderly-panels/panel-footer/panel-footer.component';
+export * from './lib/components/spiderly-panels/panel-header/panel-header.component';
+export * from './lib/components/spiderly-panels/spiderly-card/spiderly-card.component';
+export * from './lib/components/spiderly-panels/spiderly-panel/spiderly-panel.component';
+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/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';
+export * from './lib/entities/lazy-load-selected-ids-result';
+export * from './lib/entities/menuchangeevent';
+export * from './lib/entities/mime-type';
+export * from './lib/entities/namebook';
+export * from './lib/entities/primeng-option';
+export * from './lib/entities/security-entities';
+export * from './lib/entities/simple-save-result';
+export * from './lib/entities/spiderly-button';
+export * from './lib/entities/table-filter';
+export * from './lib/entities/table-filter-context';
+export * from './lib/entities/table-filter-sort-meta';
+export * from './lib/entities/table-response';
+export * from './lib/entities/init-company-auth-dialog-details';
+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/guards/auth.guard';
+export * from './lib/guards/not-auth.guard';
+export * from './lib/handlers/spiderly-error-handler';
+export * from './lib/handlers/spiderly-transloco-fallback-strategy';
+export * from './lib/interceptors/http-loading.interceptor';
+export * from './lib/interceptors/json-parser.interceptor';
+export * from './lib/interceptors/jwt.interceptor';
+export * from './lib/interceptors/unauthorized.interceptor';
+export * from './lib/services/api.service.security';
+export * from './lib/services/app-initializer';
+export * from './lib/services/auth-base.service';
+export * from './lib/services/base-form.service';
+export * from './lib/services/config-base.service';
+export * from './lib/services/helper-functions';
+export * from './lib/services/spiderly-message.service';
+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';

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

@@ -0,0 +1,34 @@
+.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;
+		}
+	}
+}

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

@@ -0,0 +1,10 @@
+.spiderly-panel-footer{
+    display: flex; 
+    align-items: center; 
+    justify-content: space-between; 
+    gap: 10px; 
+    border-top: 1px solid #dee2e6;
+    border-bottom-right-radius: 12px;
+    border-bottom-left-radius: 12px;
+    padding: 1rem;
+}

package/styles/styles/layout/_config.scss

@@ -0,0 +1,42 @@
+.layout-config-button {
+    display: block;
+    position: fixed;
+    width: 3rem;
+    height: 3rem;
+    line-height: 3rem;
+    background: var(--primary-color);
+    color: var(--primary-color-text);
+    text-align: center;
+    top: 50%;
+    right: 0;
+    margin-top: -1.5rem;
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    transition: background-color var(--transition-duration);
+    overflow: hidden;
+    cursor: pointer;
+    z-index: 999;
+    box-shadow: -.25rem 0 1rem rgba(0,0,0,.15);
+
+    i {
+        font-size: 2rem;
+        line-height: inherit;
+        transform: rotate(0deg);
+        transition: transform 1s;
+    }
+    
+    &:hover {
+        background: var(--primary-400);
+    }
+}
+
+.layout-config-sidebar {
+    &.p-sidebar {
+        .p-sidebar-content {
+            padding-left: 2rem;
+            padding-right: 2rem;
+        }
+    }
+}

package/styles/styles/layout/_content.scss

@@ -0,0 +1,12 @@
+.layout-main-container {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    justify-content: space-between;
+    padding: 7rem 2rem 2rem 4rem;
+    transition: margin-left $transitionDuration;
+}
+
+.layout-main {
+    flex: 1 1 auto;
+}

package/styles/styles/layout/_footer.scss

@@ -0,0 +1,9 @@
+.layout-footer {
+    transition: margin-left $transitionDuration;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--surface-border);
+    margin-top: 2rem;
+}

package/styles/styles/layout/_main.scss

@@ -0,0 +1,28 @@
+* {
+    box-sizing: border-box;
+}
+
+html {
+    height: 100%;
+    font-size: $scale;
+}
+
+body {
+    font-family: var(--font-family);
+    color: var(--text-color);
+    background-color: var(--surface-ground);
+    margin: 0;
+    padding: 0;
+    min-height: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+    text-decoration: none;
+    color: var(--primary-color);
+}
+
+.layout-wrapper {
+    min-height: 100vh;
+}