@elderbyte/ngx-starter 15.9.9 → 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/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/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.9",
+  "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/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                                                                 *