@webilix/ngx-helper-m3 0.0.6 → 0.0.8

package/lib/components/card/ngx-helper-card.component.d.ts

@@ -33,6 +33,7 @@ export declare class NgxHelperCardComponent implements OnInit, OnChanges {
     actions: NgxHelperAction[];
     padding: string;
     backgroundColor?: string;
+    hasShadow: boolean;
     isMobile: boolean;
     buttons: Button[];
     private componentConfig;
@@ -41,6 +42,6 @@ export declare class NgxHelperCardComponent implements OnInit, OnChanges {
     ngOnChanges(changes: SimpleChanges): void;
     onResize(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxHelperCardComponent, [null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgxHelperCardComponent, "ngx-helper-card", never, { "title": { "alias": "title"; "required": true; }; "subTitle": { "alias": "subTitle"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; "padding": { "alias": "padding"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxHelperCardComponent, "ngx-helper-card", never, { "title": { "alias": "title"; "required": true; }; "subTitle": { "alias": "subTitle"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; "padding": { "alias": "padding"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "hasShadow": { "alias": "hasShadow"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 export {};

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

@@ -0,0 +1,43 @@
+import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Router } from '@angular/router';
+import { INgxHelperConfig } from '../../../ngx-helper.config';
+import { ComponentService } from '../../component.service';
+import { INgxHelperValue } from '../ngx-helper-value.interface';
+import * as i0 from "@angular/core";
+export declare class NgxHelperValueBoxComponent implements OnInit, OnChanges {
+    private readonly router;
+    private readonly componentService;
+    private readonly config?;
+    private className;
+    private gridTemplateColumns;
+    private boxGap;
+    values: INgxHelperValue[];
+    column?: number | {
+        desktop?: number;
+        mobile?: number;
+    };
+    clearBox: boolean;
+    emptyText: string;
+    gapSize: string;
+    hideShadow: boolean;
+    data: {
+        title: string;
+        value: string;
+        action?: () => string[] | void;
+        copyToClipboard?: boolean;
+        ltr?: boolean;
+        english?: boolean;
+    }[];
+    copyIndex?: number;
+    private copyTimeout;
+    private componentConfig;
+    private pipeTransform;
+    constructor(router: Router, componentService: ComponentService, config?: Partial<INgxHelperConfig> | undefined);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    onResize(): void;
+    onClick(action?: () => string[] | void): void;
+    onCopy(event: Event, index: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxHelperValueBoxComponent, [null, null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxHelperValueBoxComponent, "ngx-helper-value-box", never, { "values": { "alias": "values"; "required": true; }; "column": { "alias": "column"; "required": false; }; "clearBox": { "alias": "clearBox"; "required": false; }; "emptyText": { "alias": "emptyText"; "required": false; }; "gapSize": { "alias": "gapSize"; "required": false; }; "hideShadow": { "alias": "hideShadow"; "required": false; }; }, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,28 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import { Router } from '@angular/router';
+import { INgxHelperValue } from '../ngx-helper-value.interface';
+import * as i0 from "@angular/core";
+export declare class NgxHelperValueListComponent implements OnChanges {
+    private readonly router;
+    private className;
+    values: INgxHelperValue[];
+    titleWidth: string;
+    emptyText: string;
+    data: {
+        title: string;
+        value: string;
+        action?: () => string[] | void;
+        copyToClipboard?: boolean;
+        ltr?: boolean;
+        english?: boolean;
+    }[];
+    copyIndex?: number;
+    private copyTimeout;
+    private pipeTransform;
+    constructor(router: Router);
+    ngOnChanges(changes: SimpleChanges): void;
+    onClick(action?: () => string[] | void): void;
+    onCopy(event: Event, index: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxHelperValueListComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxHelperValueListComponent, "ngx-helper-value-list", never, { "values": { "alias": "values"; "required": true; }; "titleWidth": { "alias": "titleWidth"; "required": false; }; "emptyText": { "alias": "emptyText"; "required": false; }; }, {}, never, never, true, never>;
+}

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

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

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

@@ -0,0 +1,76 @@
+import { DateFormats, DurationFormats } from '../../pipe.types';
+export type NgxHelperValue = {
+    type: 'BANK-CARD';
+    value?: string;
+    view?: 'CARD' | 'BANK';
+    join?: string;
+    english?: boolean;
+} | {
+    type: 'DATE';
+    value?: Date | number;
+    format?: DateFormats;
+    timezone?: string;
+} | {
+    type: 'DURATION';
+    value?: number | Date | {
+        from: Date;
+    } | {
+        to: Date;
+    } | {
+        from: Date;
+        to: Date;
+    };
+    format?: DurationFormats;
+    english?: boolean;
+} | {
+    type: 'FILE-SIZE';
+    value?: number;
+    english?: boolean;
+} | {
+    type: 'MOBILE';
+    value?: string;
+    join?: string;
+    english?: boolean;
+} | {
+    type: 'NUMBER';
+    value?: number;
+    fractionDigits?: number;
+    english?: boolean;
+} | {
+    type: 'PERIOD';
+    value?: Date | {
+        from: Date;
+    } | {
+        to: Date;
+    } | {
+        from: Date;
+        to: Date;
+    };
+    timezone?: string;
+} | {
+    type: 'PRICE';
+    value?: number;
+    currency?: string;
+    short?: boolean;
+    english?: boolean;
+} | {
+    type: 'STRING';
+    value?: string;
+    english?: boolean;
+} | {
+    type: 'VOLUME';
+    value?: number;
+    short?: boolean;
+    english?: boolean;
+} | {
+    type: 'WEIGHT';
+    value?: number;
+    short?: boolean;
+    english?: boolean;
+};
+export interface INgxHelperValue {
+    readonly title: string;
+    readonly value?: string | NgxHelperValue;
+    readonly action?: () => string[] | void;
+    readonly copyToClipboard?: boolean;
+}

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

@@ -0,0 +1,10 @@
+import { PipeTransform } from '@angular/core';
+import { NgxHelperValue } from './ngx-helper-value.interface';
+import * as i0 from "@angular/core";
+export declare class NgxHelperValuePipe implements PipeTransform {
+    transform(value?: NgxHelperValue, options?: {
+        emptyText?: string;
+    }): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxHelperValuePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<NgxHelperValuePipe, "ngxHelperValue", true>;
+}

package/lib/pipe.types.d.ts

@@ -0,0 +1,2 @@
+export type DateFormats = string | 'FULL' | 'SHORT' | 'DATE' | 'TIME' | 'WEEK' | 'MONTH' | 'YEAR';
+export type DurationFormats = 'TEXT' | 'FULL' | 'DAY' | 'HOUR' | 'MINUTE' | 'SECOND';

package/lib/pipes/bank-card.pipe.d.ts

@@ -1,7 +1,7 @@
 import { PipeTransform } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class NgxHelperBankCardPipe implements PipeTransform {
-    transform(value: string, options?: {
+    transform(value?: string | null, options?: {
         view?: 'CARD' | 'BANK';
         join?: string;
     }): string;

package/lib/pipes/date.pipe.d.ts

@@ -1,16 +1,15 @@
 import { PipeTransform } from '@angular/core';
+import { DateFormats } from '../pipe.types';
 import * as i0 from "@angular/core";
-type Formats = string | 'FULL' | 'SHORT' | 'DATE' | 'TIME' | 'WEEK' | 'MONTH' | 'YEAR';
 export declare class NgxHelperDatePipe implements PipeTransform {
-    transform(value: Date, options?: {
-        format?: Formats;
+    transform(value?: Date | null, options?: {
+        format?: DateFormats;
         timezone?: string;
     }): string;
-    transform(value: number, options?: {
-        format?: Formats;
+    transform(value?: number | null, options?: {
+        format?: DateFormats;
         timezone?: string;
     }): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxHelperDatePipe, never>;
     static ɵpipe: i0.ɵɵPipeDeclaration<NgxHelperDatePipe, "ngxHelperDate", true>;
 }
-export {};

package/lib/pipes/duration.pipe.d.ts

@@ -1,35 +1,34 @@
 import { PipeTransform } from '@angular/core';
+import { DurationFormats } from '../pipe.types';
 import * as i0 from "@angular/core";
-type Formats = 'TEXT' | 'FULL' | 'DAY' | 'HOUR' | 'MINUTE' | 'SECOND';
 export declare class NgxHelperDurationPipe implements PipeTransform {
-    transform(value: number, options?: {
-        format?: Formats;
+    transform(value?: number | null, options?: {
+        format?: DurationFormats;
         english?: boolean;
     }): string;
-    transform(value: Date, options?: {
-        format?: Formats;
+    transform(value?: Date | null, options?: {
+        format?: DurationFormats;
         english?: boolean;
     }): string;
-    transform(value: {
+    transform(value?: {
         from: Date;
-    }, options?: {
-        format?: Formats;
+    } | null, options?: {
+        format?: DurationFormats;
         english?: boolean;
     }): string;
-    transform(value: {
+    transform(value?: {
         to: Date;
-    }, options?: {
-        format?: Formats;
+    } | null, options?: {
+        format?: DurationFormats;
         english?: boolean;
     }): string;
-    transform(value: {
+    transform(value?: {
         from: Date;
         to: Date;
-    }, options?: {
-        format?: Formats;
+    } | null, options?: {
+        format?: DurationFormats;
         english?: boolean;
     }): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxHelperDurationPipe, never>;
     static ɵpipe: i0.ɵɵPipeDeclaration<NgxHelperDurationPipe, "ngxHelperDuration", true>;
 }
-export {};

package/lib/pipes/file-size.pipe.d.ts

@@ -1,7 +1,7 @@
 import { PipeTransform } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class NgxHelperFileSizePipe implements PipeTransform {
-    transform(size: number, options?: {
+    transform(value?: number | null, options?: {
         english?: boolean;
     }): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxHelperFileSizePipe, never>;

package/lib/pipes/mobile.pipe.d.ts

@@ -1,7 +1,7 @@
 import { PipeTransform } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class NgxHelperMobilePipe implements PipeTransform {
-    transform(value: string, options?: {
+    transform(value?: string | null, options?: {
         join?: string;
     }): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxHelperMobilePipe, never>;

package/lib/pipes/multi-line.pipe.d.ts

@@ -2,9 +2,9 @@ import { PipeTransform } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import * as i0 from "@angular/core";
 export declare class NgxHelperMultiLinePipe implements PipeTransform {
-    private readonly sanitizer;
-    constructor(sanitizer: DomSanitizer);
-    transform(value: string, options?: {
+    private readonly domSanitizer;
+    constructor(domSanitizer: DomSanitizer);
+    transform(value?: string | null, options?: {
         html?: boolean;
     }): string | SafeHtml;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxHelperMultiLinePipe, never>;

package/lib/pipes/number.pipe.d.ts

@@ -1,7 +1,7 @@
 import { PipeTransform } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class NgxHelperNumberPipe implements PipeTransform {
-    transform(value: number, options?: {
+    transform(value?: number | null, options?: {
         fractionDigits?: number;
         english?: boolean;
     }): string;

package/lib/pipes/period.pipe.d.ts

@@ -1,23 +1,23 @@
 import { PipeTransform } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class NgxHelperPeriodPipe implements PipeTransform {
-    transform(value: Date, options?: {
+    transform(value?: Date | null, options?: {
         timezone?: string;
     }): string;
-    transform(value: {
+    transform(value?: {
         from: Date;
-    }, options?: {
+    } | null, options?: {
         timezone?: string;
     }): string;
-    transform(value: {
+    transform(value?: {
         to: Date;
-    }, options?: {
+    } | null, options?: {
         timezone?: string;
     }): string;
-    transform(value: {
+    transform(value?: {
         from: Date;
         to: Date;
-    }, options?: {
+    } | null, options?: {
         timezone?: string;
     }): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxHelperPeriodPipe, never>;

package/lib/pipes/price.pipe.d.ts

@@ -1,7 +1,7 @@
 import { PipeTransform } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class NgxHelperPricePipe implements PipeTransform {
-    transform(value: number, options?: {
+    transform(value?: number | null, options?: {
         currency?: string;
         short?: boolean;
         english?: boolean;

package/lib/pipes/safe.pipe.d.ts

@@ -5,7 +5,7 @@ type Types = 'HTML' | 'STYLE' | 'SCRIPT' | 'URL' | 'RESOURCE_URL';
 export declare class NgxHelperSafePipe implements PipeTransform {
     private readonly domSanitizer;
     constructor(domSanitizer: DomSanitizer);
-    transform(value: string, options?: {
+    transform(value?: string | null, options?: {
         type?: Types;
     }): string | SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxHelperSafePipe, never>;

package/lib/pipes/volume.pipe.d.ts

@@ -1,7 +1,7 @@
 import { PipeTransform } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class NgxHelperVolumePipe implements PipeTransform {
-    transform(value: number, options?: {
+    transform(value?: number | null, options?: {
         short?: boolean;
         english?: boolean;
     }): string;

package/lib/pipes/weight.pipe.d.ts

@@ -1,7 +1,7 @@
 import { PipeTransform } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class NgxHelperWeightPipe implements PipeTransform {
-    transform(value: number, options?: {
+    transform(value?: number | null, options?: {
         short?: boolean;
         english?: boolean;
     }): string;

package/ngx-helper-m3.css

@@ -204,6 +204,8 @@
     display: block;
     direction: rtl;
 
+    overflow: hidden;
+    position: relative;
     border-radius: 8px;
     border: 1px solid var(--outline-variant);
 
@@ -296,3 +298,193 @@
         background-color: var(--surface-container-low);
     }
 }
+.ngx-helper-m3-card.has-shadow::after {
+    display: block;
+    content: ' ';
+
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    pointer-events: none;
+    box-shadow: inset 0 0 5px 0 var(--outline-variant);
+}
+
+/* NGX HELPER VALUE BOX */
+.ngx-helper-m3-value-box {
+    display: grid;
+    row-gap: var(--gap-size);
+    column-gap: var(--gap-size);
+
+    direction: rtl;
+
+    .box {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        position: relative;
+
+        .title {
+            width: 100%;
+            font-size: var(--ngx-helper-m3-font-small);
+            font-weight: 500;
+            padding: 1rem 1rem 0.5rem 1rem;
+            text-align: center;
+            box-sizing: border-box;
+        }
+
+        .value {
+            width: 100%;
+            font-weight: normal;
+            padding: 0 1rem 1rem 1rem;
+            text-align: center;
+            box-sizing: border-box;
+        }
+
+        .value.en {
+            direction: ltr;
+            font-family: Roboto, 'Helvetica Neue', sans-serif;
+        }
+
+        .value.empty {
+            opacity: 0.75;
+            font-style: italic;
+            font-size: var(--ngx-helper-m3-font-small);
+        }
+
+        button {
+            position: absolute;
+            top: 0;
+            left: 0;
+
+            font-size: 100%;
+            line-height: 1;
+
+            mat-icon {
+                font-size: 100%;
+                line-height: 1;
+            }
+        }
+    }
+
+    .box.click {
+        cursor: pointer;
+    }
+
+    .box:not(.clear-box) {
+        border-radius: 4px;
+        border: 1px solid var(--outline-variant);
+        background-color: var(--surface-container-low);
+    }
+}
+.ngx-helper-m3-value-box:not(.hide-shadow) {
+    .box:not(.clear-box)::after {
+        display: block;
+        content: ' ';
+
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        pointer-events: none;
+        box-shadow: inset 0 0 5px 0 var(--outline-variant);
+    }
+}
+
+/* NGX HELPER VALUE LIST */
+.ngx-helper-m3-value-list {
+    display: flex;
+    flex-direction: column;
+    direction: rtl;
+
+    .item {
+        display: flex;
+        align-items: flex-start;
+        column-gap: 1rem;
+
+        min-height: 40px;
+
+        .title {
+            font-size: var(--ngx-helper-m3-font-small);
+            font-weight: 500;
+            padding: 0.5rem 1rem 0.5rem 0;
+
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .value {
+            flex: 1;
+
+            display: flex;
+            align-items: center;
+            font-weight: normal;
+
+            min-height: 40px;
+
+            .en {
+                direction: ltr;
+                font-family: Roboto, 'Helvetica Neue', sans-serif;
+            }
+
+            .empty {
+                opacity: 0.75;
+                font-style: italic;
+                font-size: var(--ngx-helper-m3-font-small);
+            }
+
+            .click {
+                cursor: pointer;
+            }
+        }
+
+        button {
+            font-size: 100%;
+            line-height: 1;
+
+            mat-icon {
+                font-size: 100%;
+                line-height: 1;
+            }
+        }
+    }
+
+    .item.odd {
+        background-color: var(--surface-container);
+    }
+
+    .item.even {
+        background-color: var(--background);
+    }
+}
+
+/* NGX HELPER VALUE LIST */
+.ngx-helper-m3-box {
+    display: block;
+    direction: rtl;
+
+    position: relative;
+    overflow: hidden;
+    border-radius: 4px;
+    border: 1px solid var(--outline-variant);
+    background-color: var(--surface-container-low);
+}
+.ngx-helper-m3-box:not(.hide-shadow)::after {
+    display: block;
+    content: ' ';
+
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    pointer-events: none;
+    box-shadow: inset 0 0 5px 0 var(--outline-variant);
+}

package/package.json

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

package/public-api.d.ts

@@ -1,4 +1,6 @@
 export * from './lib/ngx-helper.config';
+export * from './lib/components/box/ngx-helper-box.component';
+export * from './lib/components/box/ngx-helper-box.interface';
 export * from './lib/components/card/ngx-helper-card.component';
 export * from './lib/components/card/ngx-helper-card.interface';
 export * from './lib/components/loader/ngx-helper-loader.component';
@@ -7,6 +9,10 @@ export * from './lib/components/page-group/ngx-helper-page-group.interface';
 export * from './lib/components/section/ngx-helper-section-sticky.directive';
 export * from './lib/components/section/ngx-helper-section.component';
 export * from './lib/components/section/column/ngx-helper-section-column.component';
+export * from './lib/components/value/box/ngx-helper-value-box.component';
+export * from './lib/components/value/list/ngx-helper-value-list.component';
+export * from './lib/components/value/ngx-helper-value.interface';
+export * from './lib/components/value/ngx-helper-value.pipe';
 export * from './lib/pipes/bank-card.pipe';
 export * from './lib/pipes/date.pipe';
 export * from './lib/pipes/duration.pipe';