@webilix/ngx-helper-m3 0.0.10 → 0.0.12

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

@@ -1,4 +1,5 @@
 import { INgxHelperConfig } from '../ngx-helper.config';
+import { INgxHelperValue } from './value/ngx-helper-value.interface';
 import * as i0 from "@angular/core";
 export interface IComponentConfig {
     readonly mobileWidth: number;
@@ -14,8 +15,18 @@ export interface IComponentConfig {
         };
     };
 }
+export interface IValueComponentData {
+    readonly title: string;
+    readonly value: string;
+    readonly color?: string;
+    readonly action?: () => string[] | void;
+    readonly copyToClipboard?: boolean;
+    readonly ltr?: boolean;
+    readonly english?: boolean;
+}
 export declare class ComponentService {
     getComponentConfig(config?: Partial<INgxHelperConfig>): IComponentConfig;
+    getValueData(values: INgxHelperValue[]): IValueComponentData[];
     static ɵfac: i0.ɵɵFactoryDeclaration<ComponentService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ComponentService>;
 }

package/lib/components/page-group/ngx-helper-page-group.component.d.ts

@@ -2,7 +2,7 @@ import { EventEmitter, Injector, OnChanges, OnInit, SimpleChanges } from '@angul
 import { ActivatedRoute, Router } from '@angular/router';
 import { INgxHelperConfig } from '../../ngx-helper.config';
 import { ComponentService, IComponentConfig } from '../component.service';
-import { INgxHelperPageGroup } from './ngx-helper-page-group.interface';
+import { INgxHelperPageGroup, INgxHelperPageGroupItem } from './ngx-helper-page-group.interface';
 import * as i0 from "@angular/core";
 export declare class NgxHelperPageGroupComponent implements OnInit, OnChanges {
     private readonly activatedRoute;
@@ -12,11 +12,12 @@ export declare class NgxHelperPageGroupComponent implements OnInit, OnChanges {
     private className;
     display: string;
     pageGroup: INgxHelperPageGroup;
-    pageIndex: number;
+    pageId: string;
     data?: any;
-    pageIndexChanged: EventEmitter<number>;
+    pageChanged: EventEmitter<INgxHelperPageGroupItem>;
     dataChanged: EventEmitter<any>;
     isMobile: boolean;
+    pages: string[];
     injector: Injector;
     sidebarWidth: string;
     componentConfig: IComponentConfig;
@@ -25,7 +26,8 @@ export declare class NgxHelperPageGroupComponent implements OnInit, OnChanges {
     ngOnChanges(changes: SimpleChanges): void;
     onResize(): void;
     setInjector(): void;
-    setPage(index: number): void;
+    setPage(id: string): void;
+    triggerPageChanged(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxHelperPageGroupComponent, [null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgxHelperPageGroupComponent, "ngx-helper-page-group", never, { "pageGroup": { "alias": "pageGroup"; "required": true; }; "pageIndex": { "alias": "pageIndex"; "required": false; }; "data": { "alias": "data"; "required": false; }; }, { "pageIndexChanged": "pageIndexChanged"; "dataChanged": "dataChanged"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxHelperPageGroupComponent, "ngx-helper-page-group", never, { "pageGroup": { "alias": "pageGroup"; "required": true; }; "pageId": { "alias": "pageId"; "required": false; }; "data": { "alias": "data"; "required": false; }; }, { "pageChanged": "pageChanged"; "dataChanged": "dataChanged"; }, never, never, true, never>;
 }

package/lib/components/page-group/ngx-helper-page-group.interface.d.ts

@@ -8,11 +8,14 @@ interface IPage {
 export interface INgxHelperPageGroup {
     readonly route?: string[];
     readonly header?: ComponentType<any>;
-    readonly pages: IPage[];
+    readonly pages: {
+        [key: string]: IPage;
+    };
     readonly sidebarWidth?: string;
 }
 export interface INgxHelperPageGroupItem {
     readonly index: number;
+    readonly id: string;
     readonly title: string;
     readonly icon: string;
 }

package/lib/components/value/box/ngx-helper-value-box.component.d.ts

@@ -1,7 +1,7 @@
 import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { Router } from '@angular/router';
 import { INgxHelperConfig } from '../../../ngx-helper.config';
-import { ComponentService } from '../../component.service';
+import { ComponentService, IValueComponentData } from '../../component.service';
 import { INgxHelperValue } from '../ngx-helper-value.interface';
 import * as i0 from "@angular/core";
 export declare class NgxHelperValueBoxComponent implements OnInit, OnChanges {
@@ -20,18 +20,10 @@ export declare class NgxHelperValueBoxComponent implements OnInit, OnChanges {
     emptyText: string;
     gapSize: string;
     hideShadow: boolean;
-    data: {
-        title: string;
-        value: string;
-        action?: () => string[] | void;
-        copyToClipboard?: boolean;
-        ltr?: boolean;
-        english?: boolean;
-    }[];
+    data: IValueComponentData[];
     copyIndex?: number;
     private copyTimeout;
     private componentConfig;
-    private pipeTransform;
     constructor(router: Router, componentService: ComponentService, config?: Partial<INgxHelperConfig> | undefined);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;

package/lib/components/value/list/ngx-helper-value-list.component.d.ts

@@ -1,25 +1,19 @@
 import { OnChanges, SimpleChanges } from '@angular/core';
 import { Router } from '@angular/router';
+import { ComponentService, IValueComponentData } from '../../component.service';
 import { INgxHelperValue } from '../ngx-helper-value.interface';
 import * as i0 from "@angular/core";
 export declare class NgxHelperValueListComponent implements OnChanges {
     private readonly router;
+    private readonly componentService;
     private className;
     values: INgxHelperValue[];
     titleWidth: string;
     emptyText: string;
-    data: {
-        title: string;
-        value: string;
-        action?: () => string[] | void;
-        copyToClipboard?: boolean;
-        ltr?: boolean;
-        english?: boolean;
-    }[];
+    data: IValueComponentData[];
     copyIndex?: number;
     private copyTimeout;
-    private pipeTransform;
-    constructor(router: Router);
+    constructor(router: Router, componentService: ComponentService);
     ngOnChanges(changes: SimpleChanges): void;
     onClick(action?: () => string[] | void): void;
     onCopy(event: Event, index: number): void;

package/lib/components/value/ngx-helper-value.interface.d.ts

@@ -71,6 +71,7 @@ export type NgxHelperValue = {
 export interface INgxHelperValue {
     readonly title: string;
     readonly value?: string | NgxHelperValue;
+    readonly color?: string;
     readonly action?: () => string[] | void;
     readonly copyToClipboard?: boolean;
 }

package/lib/http/ngx-helper-http.interface.d.ts

@@ -0,0 +1,9 @@
+export interface INgxHelperHttpUploadConfig {
+    readonly method: 'POST' | 'PUT' | 'PATCH';
+    readonly header: {
+        [key: string]: any;
+    };
+    readonly body: {
+        [key: string]: any;
+    };
+}

package/lib/http/ngx-helper-http.service.d.ts

@@ -0,0 +1,16 @@
+import { ApplicationRef, Injector } from '@angular/core';
+import { HttpStatusCode } from '@angular/common/http';
+import { INgxHelperHttpUploadConfig } from './ngx-helper-http.interface';
+import * as i0 from "@angular/core";
+export declare class NgxHelperHttpService {
+    private readonly applicationRef;
+    private readonly injector;
+    private components;
+    constructor(applicationRef: ApplicationRef, injector: Injector);
+    private getId;
+    private updatePositions;
+    upload<R, E>(file: File, url: string, onSuccess: (response: R | undefined, status: HttpStatusCode) => void, onError: (error: E | undefined, status: HttpStatusCode) => void): void;
+    upload<R, E>(file: File, url: string, config: Partial<INgxHelperHttpUploadConfig>, onSuccess: (response: R, status: HttpStatusCode) => void, onError: (error: E, status: HttpStatusCode) => void): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxHelperHttpService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<NgxHelperHttpService>;
+}

package/lib/http/upload/upload.component.d.ts

@@ -0,0 +1,21 @@
+import { AfterViewInit } from '@angular/core';
+import { HttpClient, HttpStatusCode } from '@angular/common/http';
+import { INgxHelperHttpUploadConfig } from '../ngx-helper-http.interface';
+import * as i0 from "@angular/core";
+export declare class UploadComponent<R, E> implements AfterViewInit {
+    private readonly httpClient;
+    private className;
+    private host;
+    bottom: string;
+    id: string;
+    file: File;
+    url: string;
+    config: Partial<INgxHelperHttpUploadConfig>;
+    close: (type: 'RESPONSE' | 'ERROR', result: any, status: HttpStatusCode) => void;
+    progress: number;
+    constructor(httpClient: HttpClient);
+    ngAfterViewInit(): void;
+    upload(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UploadComponent<any, any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UploadComponent<any, any>, "ng-component", never, {}, {}, never, never, true, never>;
+}

package/ngx-helper-m3.css

@@ -1,6 +1,6 @@
 /* GLOBAL VALUES */
 :root {
-    --ngx-helper-m3-toolbar-height: 40px;
+    --ngx-helper-m3-page-group-toolbar-height: 40px;
 }
 
 /* NGX HELPER CONFIRM */
@@ -79,6 +79,64 @@
     }
 }
 
+/* NGX HELPER HTTP (UPLOAD / DOWNLOAD) */
+.ngx-helper-m3-http {
+    position: fixed;
+    left: 1rem;
+
+    direction: ltr;
+    display: block;
+    height: 40px;
+    overflow: hidden;
+    width: calc(100vw - 4rem);
+    max-width: 250px;
+    transition: all 0.35s ease-out;
+    z-index: 5000;
+
+    border-radius: 8px;
+    border: 1px solid var(--outline-variant);
+    background-color: var(--surface-container);
+
+    .content {
+        display: flex;
+        align-items: center;
+        column-gap: 0.5rem;
+
+        height: 37px;
+        padding: 0 0.5rem;
+
+        .file {
+            flex: 1;
+
+            font-size: 90%;
+
+            text-align: left;
+            direction: ltr;
+
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+
+    .progress-container {
+        width: 100%;
+        height: 3px;
+        background-color: var(--outline-variant);
+        position: relative;
+
+        .progress-value {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+
+            background-color: var(--primary);
+            transition: all 0.35s ease-out;
+        }
+    }
+}
+
 /* NGX HELPER VALUE LIST */
 .ngx-helper-m3-box {
     display: block;
@@ -158,6 +216,7 @@
                 justify-content: center;
                 column-gap: 0.25rem;
 
+                border-radius: 0;
                 padding: 0 0.75rem;
                 min-width: auto;
                 height: 55px;
@@ -274,7 +333,8 @@
         flex: 1;
         display: block;
 
-        header {
+        .header {
+            z-index: 1;
             background-color: var(--background);
 
             .spacer {
@@ -296,7 +356,7 @@
 
         box-sizing: border-box;
         background-color: var(--surface-container-high);
-        height: calc(var(--ngx-helper-m3-toolbar-height));
+        height: calc(var(--ngx-helper-m3-page-group-toolbar-height));
         overflow: hidden;
         width: 100%;
         z-index: 2;
@@ -307,7 +367,7 @@
             column-gap: 0.25rem;
 
             padding: 0 1rem;
-            height: var(--ngx-helper-m3-toolbar-height);
+            height: var(--ngx-helper-m3-page-group-toolbar-height);
             transition: all 0.3s ease-in-out;
 
             .title {
@@ -332,6 +392,7 @@
     }
 
     .page-group-spacer {
+        z-index: 1;
         height: 1rem;
         width: 100%;
         background-color: var(--background);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webilix/ngx-helper-m3",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "author": "Ali Amirnezhad",
   "description": "Helper library for Angular and Material 3",
   "repository": {

package/public-api.d.ts

@@ -29,3 +29,5 @@ export * from './lib/confirm/confirm.interface';
 export * from './lib/confirm/confirm.service';
 export * from './lib/container/container.interface';
 export * from './lib/container/container.service';
+export * from './lib/http/ngx-helper-http.interface';
+export * from './lib/http/ngx-helper-http.service';

package/lib/components/value/ngx-helper-value.info.d.ts

@@ -1,2 +0,0 @@
-import { NgxHelperValue } from './ngx-helper-value.interface';
-export declare const ltrValues: NgxHelperValue['type'][];