@elderbyte/ngx-starter 15.9.8 → 15.10.0

package/lib/common/theme-sizes.d.ts

@@ -1,4 +1,4 @@
 /**
- * Defined in _elder-defautls.scss
+ * Defined in _elder-defaults.scss
  */
 export declare type ElderSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';

package/lib/components/badge/elder-badge/elder-badge.component.d.ts

@@ -0,0 +1,14 @@
+import { BehaviorSubject } from "rxjs";
+import { ThemePalette } from "@angular/material/core";
+import * as i0 from "@angular/core";
+export declare class ElderBadgeComponent {
+    readonly content$: BehaviorSubject<string>;
+    set content(count: string);
+    elementClass: string[];
+    setCssClass(val: string): void;
+    getColor(): ThemePalette;
+    private isContentANumberAndBiggerThanZero;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderBadgeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderBadgeComponent, "elder-badge", never, { "content": "content"; "setCssClass": "cssClass"; }, {}, never, never, false, never>;
+}

package/lib/components/badge/elder-badge.directive.d.ts

@@ -0,0 +1,19 @@
+import { ElementRef, ViewContainerRef, OnInit } from "@angular/core";
+import { DomSanitizer, SafeStyle } from "@angular/platform-browser";
+import { Subject } from "rxjs";
+import { MatBadge } from "@angular/material/badge";
+import * as i0 from "@angular/core";
+export declare class ElderBadgeDirective implements OnInit {
+    private element;
+    private sanitizer;
+    private viewContainerRef;
+    private matBadge;
+    private readonly elderBadge$;
+    readonly unsubscribe$: Subject<void>;
+    constructor(element: ElementRef, sanitizer: DomSanitizer, viewContainerRef: ViewContainerRef, matBadge: MatBadge);
+    style: SafeStyle;
+    set elderBadge(elderBadge: string);
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderBadgeDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderBadgeDirective, "[elderBadge]", never, { "elderBadge": "elderBadge"; }, {}, never, never, false, never>;
+}

package/lib/components/badge/elder-badge.module.d.ts

@@ -0,0 +1,13 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./elder-badge.directive";
+import * as i2 from "./elder-badge/elder-badge.component";
+import * as i3 from "@angular/material/chips";
+import * as i4 from "../chips/elder-chips.module";
+import * as i5 from "@angular/common";
+export * from './elder-badge/elder-badge.component';
+export * from './elder-badge.directive';
+export declare class ElderBadgeModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderBadgeModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderBadgeModule, [typeof i1.ElderBadgeDirective, typeof i2.ElderBadgeComponent], [typeof i3.MatChipsModule, typeof i4.ElderChipsModule, typeof i5.AsyncPipe, typeof i5.NgIf], [typeof i1.ElderBadgeDirective, typeof i2.ElderBadgeComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ElderBadgeModule>;
+}

package/lib/components/data-view/common/elder-data-common.module.d.ts

@@ -16,6 +16,7 @@ import * as i14 from "@angular/material/progress-bar";
 import * as i15 from "@angular/material/dialog";
 import * as i16 from "@angular/material/tooltip";
 import * as i17 from "@ngx-translate/core";
+import * as i18 from "../../badge/elder-badge.module";
 export { ElderSingleSortComponent } from './elder-single-sort/elder-single-sort.component';
 export { ElderDataToolbarComponent, ElderToolbarContentDirective, ElderToolbarContentSlot } from './elder-data-toolbar/elder-data-toolbar.component';
 export { ElderSelectionMasterCheckboxComponent } from './selection/elder-selection-master-checkbox/elder-selection-master-checkbox.component';
@@ -24,6 +25,6 @@ export { DataContextSelectionDirective } from './selection/data-context-selectio
 export { DataContextStateIndicatorComponent } from './data-context-state-indicator/data-context-state-indicator.component';
 export declare class ElderDataCommonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderDataCommonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderDataCommonModule, [typeof i1.ElderDataToolbarComponent, typeof i1.ElderToolbarContentDirective, typeof i2.ElderSingleSortComponent, typeof i3.ElderSelectionMasterCheckboxComponent, typeof i4.DataContextSelectionDirective, typeof i5.DataContextStateIndicatorComponent], [typeof i6.CommonModule, typeof i7.RouterModule, typeof i8.MatDividerModule, typeof i9.MatCheckboxModule, typeof i10.MatMenuModule, typeof i11.MatButtonModule, typeof i12.MatIconModule, typeof i13.MatBadgeModule, typeof i14.MatProgressBarModule, typeof i15.MatDialogModule, typeof i16.MatTooltipModule, typeof i17.TranslateModule], [typeof i1.ElderDataToolbarComponent, typeof i1.ElderToolbarContentDirective, typeof i2.ElderSingleSortComponent, typeof i3.ElderSelectionMasterCheckboxComponent, typeof i4.DataContextSelectionDirective, typeof i5.DataContextStateIndicatorComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderDataCommonModule, [typeof i1.ElderDataToolbarComponent, typeof i1.ElderToolbarContentDirective, typeof i2.ElderSingleSortComponent, typeof i3.ElderSelectionMasterCheckboxComponent, typeof i4.DataContextSelectionDirective, typeof i5.DataContextStateIndicatorComponent], [typeof i6.CommonModule, typeof i7.RouterModule, typeof i8.MatDividerModule, typeof i9.MatCheckboxModule, typeof i10.MatMenuModule, typeof i11.MatButtonModule, typeof i12.MatIconModule, typeof i13.MatBadgeModule, typeof i14.MatProgressBarModule, typeof i15.MatDialogModule, typeof i16.MatTooltipModule, typeof i17.TranslateModule, typeof i18.ElderBadgeModule], [typeof i1.ElderDataToolbarComponent, typeof i1.ElderToolbarContentDirective, typeof i2.ElderSingleSortComponent, typeof i3.ElderSelectionMasterCheckboxComponent, typeof i4.DataContextSelectionDirective, typeof i5.DataContextStateIndicatorComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ElderDataCommonModule>;
 }

package/lib/components/files/drag-n-drop/elder-drop-zone/elder-drop-zone.component.d.ts

@@ -0,0 +1,24 @@
+import { EventEmitter } from '@angular/core';
+import { FileEntry } from '../../listing/file-entry';
+import * as i0 from "@angular/core";
+export declare class ElderDropZoneComponent {
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private readonly logger;
+    readonly filesDropped: EventEmitter<FileEntry[]>;
+    readonly dragOver: EventEmitter<DragEvent>;
+    readonly dragEnd: EventEmitter<DragEvent>;
+    icon: string;
+    prompt: string;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderDropZoneComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderDropZoneComponent, "elder-drop-zone", never, { "icon": "icon"; "prompt": "prompt"; }, { "filesDropped": "filesDropped"; "dragOver": "dragOver"; "dragEnd": "dragEnd"; }, never, ["*"], false, never>;
+}

package/lib/components/files/drag-n-drop/global-drag-drop.service.d.ts

@@ -0,0 +1,40 @@
+import { Observable } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare class GlobalDragDropService {
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private readonly _onDragOver$;
+    private readonly _onDragLeave$;
+    private readonly _onDrop$;
+    private preventDefaultsSub;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor();
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    get dragOver$(): Observable<DragEvent>;
+    get dragLeave$(): Observable<DragEvent>;
+    get drop$(): Observable<DragEvent>;
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    /**
+     * Prevents the browser from loading dropped files. If the user accidentally
+     * missed a drop zone and drops files anywhere in the active app, the browser would
+     * load the file and loose the current app context.
+     */
+    preventDefaultFileLoading(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GlobalDragDropService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<GlobalDragDropService>;
+}

package/lib/components/files/elder-file-drop-zone.directive.d.ts

@@ -12,6 +12,8 @@ export declare class ElderFileDropZoneDirective {
      **************************************************************************/
     private readonly logger;
     readonly elderFileDropZoneChange: EventEmitter<FileEntry[]>;
+    readonly dragOver: EventEmitter<DragEvent>;
+    readonly dragEnd: EventEmitter<DragEvent>;
     dragOverClass: string;
     /***************************************************************************
      *                                                                         *
@@ -32,8 +34,8 @@ export declare class ElderFileDropZoneDirective {
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
-    private dragEnd;
+    private handleDragEnd;
     private collectFilesAsync;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderFileDropZoneDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderFileDropZoneDirective, "[elderFileDropZone]", never, { "dragOverClass": "dragOverClass"; }, { "elderFileDropZoneChange": "elderFileDropZoneChange"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderFileDropZoneDirective, "[elderFileDropZone]", never, { "dragOverClass": "dragOverClass"; }, { "elderFileDropZoneChange": "elderFileDropZoneChange"; "dragOver": "dragOver"; "dragEnd": "dragEnd"; }, never, never, false, never>;
 }

package/lib/components/files/elder-file.module.d.ts

@@ -4,22 +4,26 @@ import * as i2 from "./file-upload/file-upload.component";
 import * as i3 from "./elder-file-select.directive";
 import * as i4 from "./elder-file-drop-zone.directive";
 import * as i5 from "./blob-viewer/elder-blob-viewer.component";
-import * as i6 from "@angular/common";
-import * as i7 from "@angular/material/list";
-import * as i8 from "@angular/material/button";
-import * as i9 from "@angular/material/icon";
-import * as i10 from "@angular/material/progress-bar";
-import * as i11 from "../../pipes/elder-pipes.module";
+import * as i6 from "./drag-n-drop/elder-drop-zone/elder-drop-zone.component";
+import * as i7 from "@angular/common";
+import * as i8 from "@angular/material/list";
+import * as i9 from "@angular/material/button";
+import * as i10 from "@angular/material/icon";
+import * as i11 from "@angular/material/progress-bar";
+import * as i12 from "../../pipes/elder-pipes.module";
+import * as i13 from "@ngx-translate/core";
 export { ElderFileSelectComponent } from './file-select/file-select.component';
 export { ElderFileUploadComponent } from './file-upload/file-upload.component';
 export { ElderFileSelectDirective } from './elder-file-select.directive';
 export { ElderFileDropZoneDirective } from './elder-file-drop-zone.directive';
 export { ElderBlobViewerComponent } from './blob-viewer/elder-blob-viewer.component';
+export { ElderDropZoneComponent } from './drag-n-drop/elder-drop-zone/elder-drop-zone.component';
+export * from './drag-n-drop/global-drag-drop.service';
 export * from './blob-url';
 export * from './listing/file-entry';
 export * from './listing/file-listing-rx';
 export declare class ElderFileModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderFileModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderFileModule, [typeof i1.ElderFileSelectComponent, typeof i2.ElderFileUploadComponent, typeof i3.ElderFileSelectDirective, typeof i4.ElderFileDropZoneDirective, typeof i5.ElderBlobViewerComponent], [typeof i6.CommonModule, typeof i7.MatListModule, typeof i8.MatButtonModule, typeof i9.MatIconModule, typeof i10.MatProgressBarModule, typeof i11.ElderPipesModule], [typeof i1.ElderFileSelectComponent, typeof i2.ElderFileUploadComponent, typeof i3.ElderFileSelectDirective, typeof i4.ElderFileDropZoneDirective, typeof i5.ElderBlobViewerComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderFileModule, [typeof i1.ElderFileSelectComponent, typeof i2.ElderFileUploadComponent, typeof i3.ElderFileSelectDirective, typeof i4.ElderFileDropZoneDirective, typeof i5.ElderBlobViewerComponent, typeof i6.ElderDropZoneComponent], [typeof i7.CommonModule, typeof i8.MatListModule, typeof i9.MatButtonModule, typeof i10.MatIconModule, typeof i11.MatProgressBarModule, typeof i12.ElderPipesModule, typeof i13.TranslateModule], [typeof i1.ElderFileSelectComponent, typeof i2.ElderFileUploadComponent, typeof i3.ElderFileSelectDirective, typeof i4.ElderFileDropZoneDirective, typeof i5.ElderBlobViewerComponent, typeof i6.ElderDropZoneComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ElderFileModule>;
 }

package/lib/components/files/listing/file-entry.d.ts

@@ -13,7 +13,7 @@ export declare class FileEntry {
     /**
      * Creates a file Entry without an explicit relative parent.
      *
-     * However, depending how the file was selected, some browsers
+     * However, depending on how the file was selected, some browsers
      * encode the relative parent path in the property 'webkitRelativePath'
      * which is also supported by this method.
      */

package/lib/components/public_api.d.ts

@@ -38,3 +38,4 @@ export * from './iframes/elder-iframe.module';
 export * from './errors/elder-error.module';
 export * from './auditing/elder-audit.module';
 export * from './tabs/elder-tab.module';
+export * from './badge/elder-badge.module';

package/lib/components/shell/shell/elder-shell.component.d.ts

@@ -5,6 +5,7 @@ import { ElderRouteOutletDrawerService } from '../drawers/elder-route-outlet-dra
 import { BehaviorSubject, Observable } from 'rxjs';
 import { ThemePalette } from '@angular/material/core';
 import { ElderThemeService } from '../../theme/elder-theme.service';
+import { GlobalDragDropService } from '../../files/drag-n-drop/global-drag-drop.service';
 import * as i0 from "@angular/core";
 export declare class ElderShellSideLeftDirective {
     templateRef: TemplateRef<any>;
@@ -32,6 +33,7 @@ export declare class ElderShellComponent implements OnInit, OnDestroy {
     private outletDrawerService;
     private changeDetectorRef;
     private themeService;
+    private globalDragDropService;
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
@@ -60,7 +62,7 @@ export declare class ElderShellComponent implements OnInit, OnDestroy {
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(shellService: ElderShellService, outletDrawerService: ElderRouteOutletDrawerService, changeDetectorRef: ChangeDetectorRef, themeService: ElderThemeService);
+    constructor(shellService: ElderShellService, outletDrawerService: ElderRouteOutletDrawerService, changeDetectorRef: ChangeDetectorRef, themeService: ElderThemeService, globalDragDropService: GlobalDragDropService);
     /***************************************************************************
      *                                                                         *
      * Life Cycle                                                              *

package/lib/components/toasts/elder-toast.module.d.ts

@@ -5,8 +5,9 @@ import * as i3 from "@angular/material/snack-bar";
 import * as i4 from "@angular/material/icon";
 import * as i5 from "@angular/material/button";
 export * from './elder-toast.service';
+export { StandardToastComponent } from './standard-toast/standard-toast.component';
 export declare class ElderToastModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderToastModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderToastModule, [typeof i1.StandardToastComponent], [typeof i2.CommonModule, typeof i3.MatSnackBarModule, typeof i4.MatIconModule, typeof i5.MatButtonModule], never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderToastModule, [typeof i1.StandardToastComponent], [typeof i2.CommonModule, typeof i3.MatSnackBarModule, typeof i4.MatIconModule, typeof i5.MatButtonModule], [typeof i1.StandardToastComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ElderToastModule>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "15.9.8",
+  "version": "15.10.0",
   "peerDependencies": {
     "@angular/core": "^15.0.0 || ^16.0.0",
     "@angular/common": "^15.0.0 || ^16.0.0",

package/src/lib/components/badge/elder-badge/elder-badge.component.scss

@@ -0,0 +1,84 @@
+.elder-badge {
+  position: absolute !important;
+  width: unset !important;
+  max-width: unset !important;
+  box-sizing: border-box;
+  font-weight: 600;
+
+  .mdc-evolution-chip,
+  .mdc-evolution-chip__cell,
+  .mdc-evolution-chip__action {
+    justify-content: center;
+  }
+}
+
+// Small styling
+.mat-badge-small .elder-badge.mat-badge-content {
+  border-radius: 16px;
+  min-width: 16px;
+}
+.mat-badge-small.mat-badge-above .elder-badge.mat-badge-content {
+  top: -7px !important;
+}
+.mat-badge-small.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content {
+  right: -5px;
+  transform: translate(100%) !important;
+}
+.mat-badge-small.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content {
+  left: -5px;
+  transform: translate(-100%) !important;
+}
+.mat-badge-small .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary {
+  padding: 0 3px !important;
+}
+.mat-badge-small .elder-badge.mat-badge-content {
+  line-height: 14px !important;
+}
+
+// Medium styling
+.mat-badge-medium .elder-badge.mat-badge-content {
+  border-radius: 22px;
+  min-width: 22px;
+}
+.mat-badge-medium.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content {
+  right: -5px;
+  transform: translate(100%) !important;
+}
+.mat-badge-medium.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content {
+  left: -5px;
+  transform: translate(-100%) !important;
+}
+.mat-badge-medium .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary {
+  padding: 0 6px !important;
+}
+.mat-badge-medium .elder-badge.mat-badge-content {
+  line-height: 20px !important;
+}
+
+// Large styling
+.mat-badge-large .elder-badge.mat-badge-content {
+  border-radius: 28px;
+  min-width: 28px;
+}
+.mat-badge-large.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content {
+  right: -5px;
+  transform: translate(100%) !important;
+}
+.mat-badge-large.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content {
+  left: -5px;
+  transform: translate(-100%) !important;
+}
+.mat-badge-large .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary {
+  padding: 0 6px !important;
+}
+.mat-badge-large .elder-badge.mat-badge-content {
+  line-height: 26px !important;
+}
+
+.elder-badge.mat-badge-content {
+  transform: unset !important;
+}
+//
+//.elder-badge.elder-chip-label.color-primary.md3 {
+//  background-color: rgb(203 208 216) !important;
+//}

package/src/lib/components/files/drag-n-drop/elder-drop-zone/elder-drop-zone.component.scss

@@ -0,0 +1,48 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '@material/theme/theme-color' as mdc-theme-color;
+
+$colorStateNone: rgb(0, 0, 0);
+
+
+@mixin theme($config-or-theme) {
+
+  $primary: map-get($config-or-theme, primary);
+  $accent: map-get($config-or-theme, accent);
+  $warn: map-get($config-or-theme, warn);
+
+
+  .elder-drop-zone {
+    border: 4px dashed rgba($colorStateNone, 0.40);
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    background-color: rgba($colorStateNone, 0.25);
+    cursor: pointer;
+
+    .elder-drop-zone-icon {
+      color: mat.get-color-from-palette($primary, default, 0.75);
+      font-size: 28px;
+      width: 28px;
+      height: 28px;
+    }
+
+    .elder-drop-zone-prompt {
+      color: mat.get-color-from-palette($primary, default, 0.75);
+    }
+
+  }
+
+  .elder-drop-zone.is-dragover {
+    border: 4px solid mat.get-color-from-palette($accent, default, 0.40);
+    background-color: mat.get-color-from-palette($accent, default, 0.25);
+
+    .elder-drop-zone-icon {
+      color: mat.get-color-from-palette($accent, default, 0.75);
+    }
+
+    .elder-drop-zone-prompt {
+      color: mat.get-color-from-palette($accent, default, 0.75);
+    }
+
+  }
+}

package/theming/_elder-common.scss

@@ -273,6 +273,16 @@
     padding: 0;
   }
 
+  /***************************************************************************
+   *                                                                         *
+   * Padding                                                                 *
+   *                                                                         *
+   **************************************************************************/
+
+  .elder-default-content:not(:only-child) {
+    display: none;
+  }
+
   /***************************************************************************
    *                                                                         *
    * Padding                                                                 *