@open-rlb/ng-bootstrap 3.2.0 → 3.3.0

package/assets/scss/custom/components/_root.scss

@@ -28,6 +28,16 @@
 
     --#{$prefix}display-none:                           #{$display-none};
     --#{$prefix}display-block:                          #{$display-block};
+
+    --#{$prefix}card-box-shadow:                        #{$card-box-shadow};
+    --#{$prefix}input-box-shadow:                       #{$input-box-shadow};
+
+    // Sidebar
+    --rlb-sidebar-width:                                #{$sidebar-width};
+    --rlb-sidebar-bg:                                   #{$sidebar-bg};
+    --rlb-menu-item-color:                              #{$sidebar-menu-item-color};
+    --rlb-menu-item-hover-color:                        #{$sidebar-menu-item-hover-color};
+    --rlb-menu-item-active-color:                       #{$sidebar-menu-item-active-color};
 }
 
 //theme dark
@@ -63,6 +73,15 @@
         --#{$prefix}display-none:                           #{$display-none-dark};
         --#{$prefix}display-block:                          #{$display-block-dark};
 
+        --#{$prefix}card-box-shadow:                        #{$card-box-shadow};
+        --#{$prefix}input-box-shadow:                       #{$input-box-shadow};
+
+        // Sidebar
+        --rlb-sidebar-bg:                               #{$sidebar-dark-bg};
+        --rlb-menu-item-color:                          #{$sidebar-dark-menu-item-color};
+        --rlb-menu-item-hover-color:                    #{$sidebar-dark-menu-item-hover-color};
+        --rlb-menu-item-active-color:                   #{$sidebar-dark-menu-item-active-color};
+
         .btn-light {
             --#{$prefix}btn-color:                                         #{$body-secondary-color-dark};
             --#{$prefix}btn-bg:                                            #{$body-tertiary-bg-dark};

package/fesm2022/open-rlb-ng-bootstrap.mjs

@@ -9019,39 +9019,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
 
 class DndDirective {
     constructor() {
-        this.multi = input(false, { ...(ngDevMode ? { debugName: "multi" } : /* istanbul ignore next */ {}), alias: 'multiple', transform: booleanAttribute });
+        this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.fileDropped = output();
-        this.fileOver = signal(false, ...(ngDevMode ? [{ debugName: "fileOver" }] : /* istanbul ignore next */ []));
+        this.isOver = signal(false, ...(ngDevMode ? [{ debugName: "isOver" }] : /* istanbul ignore next */ []));
     }
     onDragOver(evt) {
         evt.preventDefault();
         evt.stopPropagation();
-        this.fileOver.set(true);
+        this.isOver.set(true);
     }
     onDragLeave(evt) {
         evt.preventDefault();
         evt.stopPropagation();
-        this.fileOver.set(false);
+        this.isOver.set(false);
     }
     onDrop(evt) {
         evt.preventDefault();
         evt.stopPropagation();
-        this.fileOver.set(false);
-        let files = evt.dataTransfer?.files;
+        this.isOver.set(false);
+        const files = evt.dataTransfer?.files;
         if (files && files.length > 0) {
-            const _f = [];
-            if (files.length > 1 && !this.multi()) {
-                _f.push(files[0]);
-            }
-            else {
-                for (let i = 0; i < files.length; i++)
-                    _f.push(files[i]);
-            }
-            this.fileDropped.emit(_f);
+            const fileArray = Array.from(files);
+            const result = this.multiple() ? fileArray : [fileArray[0]];
+            this.fileDropped.emit(result);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: DndDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.7", type: DndDirective, isStandalone: false, selector: "[rlb-dnd]", inputs: { multi: { classPropertyName: "multi", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileDropped: "fileDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.fileover": "fileOver()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.7", type: DndDirective, isStandalone: false, selector: "[rlb-dnd]", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileDropped: "fileDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.rlb-dnd-over": "isOver()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: DndDirective, decorators: [{
             type: Directive,
@@ -9059,126 +9053,208 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
                     selector: '[rlb-dnd]',
                     standalone: false,
                     host: {
-                        '[class.fileover]': 'fileOver()',
+                        '[class.rlb-dnd-over]': 'isOver()',
                         '(dragover)': 'onDragOver($event)',
                         '(dragleave)': 'onDragLeave($event)',
-                        '(drop)': 'onDrop($event)'
-                    }
+                        '(drop)': 'onDrop($event)',
+                    },
                 }]
-        }], propDecorators: { multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], fileDropped: [{ type: i0.Output, args: ["fileDropped"] }] } });
+        }], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], fileDropped: [{ type: i0.Output, args: ["fileDropped"] }] } });
 
 class FileDndComponent {
     constructor() {
-        this.files = [];
+        this.files = signal([], ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
         this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.data = input({}, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-        this.userDefinedId = input('', { ...(ngDevMode ? { debugName: "userDefinedId" } : /* istanbul ignore next */ {}), alias: 'id', transform: (v) => v || '' });
+        this.idService = inject(UniqueIdService);
+        this.userDefinedId = input(`dnd${this.idService.id}`, { ...(ngDevMode ? { debugName: "userDefinedId" } : /* istanbul ignore next */ {}), alias: 'id' });
         this.filesChange = output({ alias: 'files' });
-        this.fileDropEl = viewChild('fileDropRef', ...(ngDevMode ? [{ debugName: "fileDropEl" }] : /* istanbul ignore next */ []));
     }
-    onFileDropped(files) {
-        if (this.multiple()) {
-            this.files = files;
-        }
-        else {
-            this.files = [files[files.length - 1]];
-        }
-        this.filesChange.emit(this.files);
-        const el = this.fileDropEl();
-        if (el) {
-            el.nativeElement.value = "";
-        }
+    onFileDropped(newFiles) {
+        this.updateFiles(newFiles);
     }
     fileBrowseHandler(event) {
-        const _target = event.target;
-        if (_target.files && _target.files?.length) {
-            let _f = [];
-            if (this.multiple()) {
-                for (let i = 0; i < _target.files.length; i++)
-                    _f.push(_target.files[i]);
-            }
-            else {
-                for (let i = 0; i < _target.files.length; i++)
-                    _f = [_target.files[i]];
-            }
-            this.files = _f;
-            this.filesChange.emit(this.files);
-            const el = this.fileDropEl();
-            if (el) {
-                el.nativeElement.value = "";
-            }
+        const target = event.target;
+        if (target.files) {
+            this.updateFiles(Array.from(target.files));
+            target.value = '';
         }
     }
-    deleteFile(index) {
-        this.files.splice(this.files.indexOf(index), 1);
-        this.filesChange.emit(this.files);
+    updateFiles(incoming) {
+        this.files.update(current => {
+            const updated = this.multiple() ? [...current, ...incoming] : [incoming[incoming.length - 1]];
+            this.filesChange.emit(updated);
+            return updated;
+        });
     }
-    formatBytes(bytes, decimals = 2) {
-        if (bytes === 0) {
-            return "0 Bytes";
-        }
+    deleteFile(fileToRemove) {
+        this.files.update(current => {
+            const updated = current.filter(f => f !== fileToRemove);
+            this.filesChange.emit(updated);
+            return updated;
+        });
+    }
+    formatBytes(bytes) {
+        if (bytes === 0)
+            return '0 Bytes';
         const k = 1024;
-        const dm = decimals <= 0 ? 0 : decimals;
-        const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
         const i = Math.floor(Math.log(bytes) / Math.log(k));
-        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FileDndComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: FileDndComponent, isStandalone: false, selector: "rlb-file-dnd", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, userDefinedId: { classPropertyName: "userDefinedId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesChange: "files" }, viewQueries: [{ propertyName: "fileDropEl", first: true, predicate: ["fileDropRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div class="rlb-file-dnd" rlb-dnd [multiple]="multiple()" (fileDropped)="onFileDropped($event)">
-      <input type="file" #fileDropRef id="fileDropRef" [attr.multiple]="multiple() ? '' : undefined" (change)="fileBrowseHandler($event)" />
-      <i class="bi bi-upload"></i>
-      <h3>{{ data()?.content?.drag }}</h3>
-      <h3>-</h3>
-      <label class="btn btn-primary" for="fileDropRef">{{ data()?.content?.button }}</label>
-    </div>
-    <div class="rlb-file-dnd-list">
-      @for (file of files; track file; let i = $index) {
-        <div class="single-file">
-          <i class="bi bi-file-earmark-image" style="font-size: 36px;"></i>
-          <div class="info">
-            <span class="d-block name"> {{ file.name }} </span>
-            <span class="d-block size">{{ formatBytes(file.size) }}</span>
-            <rlb-progress [height]="3" [value]="10" animated ></rlb-progress>
-          </div>
-          <button rlb-button outline class="p-0 mb-auto border-0">
-            <i class="bi bi-trash" (click)="deleteFile(file)"></i>
-          </button>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: FileDndComponent, isStandalone: false, selector: "rlb-file-dnd", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, userDefinedId: { classPropertyName: "userDefinedId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesChange: "files" }, ngImport: i0, template: `
+    <div
+      class="rlb-dnd-container"
+      rlb-dnd
+      [multiple]="multiple()"
+      (fileDropped)="onFileDropped($event)"
+    >
+      <input
+        type="file"
+        #fileDropRef
+        class="d-none"
+        [id]="userDefinedId()"
+        [attr.multiple]="multiple() ? '' : null"
+        (change)="fileBrowseHandler($event)"
+      />
+
+      <!-- Empty State -->
+      <div class="d-flex flex-column align-items-center justify-content-center">
+        <div
+          class="mb-1"
+          style="font-size: 5rem"
+        >
+          <i class="bi bi-cloud-arrow-up"></i>
         </div>
-      }
-    </div>`, isInline: true, dependencies: [{ kind: "directive", type: DndDirective, selector: "[rlb-dnd]", inputs: ["multiple"], outputs: ["fileDropped"] }, { kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "component", type: ProgressComponent, selector: "rlb-progress", inputs: ["max", "min", "value", "height", "animated", "striped", "infinite", "aria-label", "showValue", "color", "text-color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        <h3 class="fs-2 fw-bold m-0">{{ data()?.content?.drag || 'Drag & Drop files here' }}</h3>
+        <p class="fs-4 fw-normal mb-4">
+          {{ multiple() ? 'Supports multiple files' : 'Select a single file' }}
+        </p>
+
+        <label
+          [for]="userDefinedId()"
+          class="btn btn-primary px-4 py-2"
+        >
+          {{ data()?.content?.button || 'Browse Files' }}
+        </label>
+      </div>
+    </div>
+
+    <!-- File List Implementation -->
+    @if (files().length > 0) {
+      <div class="mt-3">
+        @for (file of files(); track file.name + file.size) {
+          <rlb-card>
+            <rlb-card-body class="d-flex align-items-center">
+              <div class="fs-3">
+                <i class="bi bi-file-earmark-text"></i>
+              </div>
+
+              <div class="mx-3 flex-grow-1">
+                <div class="d-flex justify-content-between align-items-center mb-1">
+                  <span class="fw-bold text-truncate">{{ file.name }}</span>
+                  <span class="text-secondary">{{ formatBytes(file.size) }}</span>
+                </div>
+                <rlb-progress
+                  [height]="4"
+                  [value]="100"
+                ></rlb-progress>
+              </div>
+
+              <button
+                rlb-button
+                outline
+                color="danger"
+                (click)="deleteFile(file)"
+                aria-label="Remove file"
+              >
+                <i class="bi bi-x-lg"></i>
+              </button>
+            </rlb-card-body>
+          </rlb-card>
+        }
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:block}.rlb-dnd-container{border:2px dashed rgba(255,255,255,.15);border-radius:1rem;padding:3rem 2rem;cursor:pointer}.rlb-dnd-over{border-color:var(--bs-border-color);background:#6366f11a;transform:scale(1.01)}\n"], dependencies: [{ kind: "directive", type: DndDirective, selector: "[rlb-dnd]", inputs: ["multiple"], outputs: ["fileDropped"] }, { kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "component", type: CardBodyComponent, selector: "rlb-card-body" }, { kind: "component", type: CardComponent, selector: "rlb-card", inputs: ["align", "overlay", "background", "border"] }, { kind: "component", type: ProgressComponent, selector: "rlb-progress", inputs: ["max", "min", "value", "height", "animated", "striped", "infinite", "aria-label", "showValue", "color", "text-color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FileDndComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'rlb-file-dnd',
-                    template: `
-    <div class="rlb-file-dnd" rlb-dnd [multiple]="multiple()" (fileDropped)="onFileDropped($event)">
-      <input type="file" #fileDropRef id="fileDropRef" [attr.multiple]="multiple() ? '' : undefined" (change)="fileBrowseHandler($event)" />
-      <i class="bi bi-upload"></i>
-      <h3>{{ data()?.content?.drag }}</h3>
-      <h3>-</h3>
-      <label class="btn btn-primary" for="fileDropRef">{{ data()?.content?.button }}</label>
-    </div>
-    <div class="rlb-file-dnd-list">
-      @for (file of files; track file; let i = $index) {
-        <div class="single-file">
-          <i class="bi bi-file-earmark-image" style="font-size: 36px;"></i>
-          <div class="info">
-            <span class="d-block name"> {{ file.name }} </span>
-            <span class="d-block size">{{ formatBytes(file.size) }}</span>
-            <rlb-progress [height]="3" [value]="10" animated ></rlb-progress>
-          </div>
-          <button rlb-button outline class="p-0 mb-auto border-0">
-            <i class="bi bi-trash" (click)="deleteFile(file)"></i>
-          </button>
+            args: [{ selector: 'rlb-file-dnd', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      class="rlb-dnd-container"
+      rlb-dnd
+      [multiple]="multiple()"
+      (fileDropped)="onFileDropped($event)"
+    >
+      <input
+        type="file"
+        #fileDropRef
+        class="d-none"
+        [id]="userDefinedId()"
+        [attr.multiple]="multiple() ? '' : null"
+        (change)="fileBrowseHandler($event)"
+      />
+
+      <!-- Empty State -->
+      <div class="d-flex flex-column align-items-center justify-content-center">
+        <div
+          class="mb-1"
+          style="font-size: 5rem"
+        >
+          <i class="bi bi-cloud-arrow-up"></i>
         </div>
-      }
-    </div>`,
-                    standalone: false,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], userDefinedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], filesChange: [{ type: i0.Output, args: ["files"] }], fileDropEl: [{ type: i0.ViewChild, args: ['fileDropRef', { isSignal: true }] }] } });
+        <h3 class="fs-2 fw-bold m-0">{{ data()?.content?.drag || 'Drag & Drop files here' }}</h3>
+        <p class="fs-4 fw-normal mb-4">
+          {{ multiple() ? 'Supports multiple files' : 'Select a single file' }}
+        </p>
+
+        <label
+          [for]="userDefinedId()"
+          class="btn btn-primary px-4 py-2"
+        >
+          {{ data()?.content?.button || 'Browse Files' }}
+        </label>
+      </div>
+    </div>
+
+    <!-- File List Implementation -->
+    @if (files().length > 0) {
+      <div class="mt-3">
+        @for (file of files(); track file.name + file.size) {
+          <rlb-card>
+            <rlb-card-body class="d-flex align-items-center">
+              <div class="fs-3">
+                <i class="bi bi-file-earmark-text"></i>
+              </div>
+
+              <div class="mx-3 flex-grow-1">
+                <div class="d-flex justify-content-between align-items-center mb-1">
+                  <span class="fw-bold text-truncate">{{ file.name }}</span>
+                  <span class="text-secondary">{{ formatBytes(file.size) }}</span>
+                </div>
+                <rlb-progress
+                  [height]="4"
+                  [value]="100"
+                ></rlb-progress>
+              </div>
+
+              <button
+                rlb-button
+                outline
+                color="danger"
+                (click)="deleteFile(file)"
+                aria-label="Remove file"
+              >
+                <i class="bi bi-x-lg"></i>
+              </button>
+            </rlb-card-body>
+          </rlb-card>
+        }
+      </div>
+    }
+  `, styles: [":host{display:block}.rlb-dnd-container{border:2px dashed rgba(255,255,255,.15);border-radius:1rem;padding:3rem 2rem;cursor:pointer}.rlb-dnd-over{border-color:var(--bs-border-color);background:#6366f11a;transform:scale(1.01)}\n"] }]
+        }], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], userDefinedId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], filesChange: [{ type: i0.Output, args: ["files"] }] } });
 
 class FileComponent extends AbstractComponent {
     constructor() {