@dereekb/dbx-web 12.5.9 → 12.6.0

package/lib/extension/_extension.scss

@@ -2,14 +2,17 @@
 @use '../style/theming';
 @use './calendar/calendar';
 @use './table/table';
+@use './zip/zip';
 
 @mixin all-extension-core($theme-config) {
   $calendar-enabled: 1;
   $table-enabled: 1;
+  $zip-enabled: 1;
 
   @if ($theme-config != null) {
     $calendar-enabled: config.get-dbx-extension-calendar-enabled($theme-config);
     $table-enabled: config.get-dbx-extension-table-enabled($theme-config);
+    $zip-enabled: config.get-dbx-extension-zip-enabled($theme-config);
   }
 
   @if ($calendar-enabled == 1) {
@@ -19,11 +22,16 @@
   @if ($table-enabled == 1) {
     @include table.core();
   }
+
+  @if ($zip-enabled == 1) {
+    @include zip.core();
+  }
 }
 
 @mixin all-extension-typography($theme-config-or-typography-config) {
   $calendar-enabled: 1;
   $table-enabled: 1;
+  $zip-enabled: 1;
 
   @if ($theme-config-or-typography-config != null) {
     @if (theming.private-is-theme-object($theme-config-or-typography-config)) {
@@ -31,6 +39,7 @@
 
       $calendar-enabled: config.get-dbx-extension-calendar-enabled($theme-config);
       $table-enabled: config.get-dbx-extension-table-enabled($theme-config);
+      $zip-enabled: config.get-dbx-extension-zip-enabled($theme-config);
     }
 
     @if ($calendar-enabled == 1) {
@@ -40,16 +49,22 @@
     @if ($table-enabled == 1) {
       @include table.typography($theme-config-or-typography-config);
     }
+
+    @if ($zip-enabled == 1) {
+      @include zip.typography($theme-config-or-typography-config);
+    }
   }
 }
 
 @mixin all-extension-theme($theme-config) {
   $calendar-enabled: 1;
   $table-enabled: 1;
+  $zip-enabled: 1;
 
   @if ($theme-config != null) {
     $calendar-enabled: config.get-dbx-extension-calendar-enabled($theme-config);
     $table-enabled: config.get-dbx-extension-table-enabled($theme-config);
+    $zip-enabled: config.get-dbx-extension-zip-enabled($theme-config);
   }
 
   @if ($calendar-enabled == 1) {
@@ -59,4 +74,8 @@
   @if ($table-enabled == 1) {
     @include table.theme($theme-config);
   }
+
+  @if ($zip-enabled == 1) {
+    @include zip.theme($theme-config);
+  }
 }

package/lib/extension/download/blob/download.blob.button.component.d.ts

@@ -0,0 +1,55 @@
+import { ElementRef, OnDestroy } from '@angular/core';
+import { SafeResourceUrl } from '@angular/platform-browser';
+import { AbstractSubscriptionDirective, DbxButtonDisplay } from '@dereekb/dbx-core';
+import { type DbxButtonStyle } from '../../../button/button.component';
+import { Getter, Maybe, PromiseOrValue } from '@dereekb/util';
+import { Observable } from 'rxjs';
+import * as i0 from "@angular/core";
+export interface DbxDownloadBlobButtonConfig {
+    /**
+     * Button display customization.
+     */
+    readonly buttonDisplay?: Maybe<DbxButtonDisplay>;
+    /**
+     * Custom button style to use.
+     */
+    readonly buttonStyle?: Maybe<DbxButtonStyle>;
+    /**
+     * Name of the file to save when downloaded.
+     */
+    readonly fileName?: Maybe<string>;
+    /**
+     * Blob to download.
+     */
+    readonly blob?: Maybe<Blob>;
+    /**
+     * Getter for the blob to download.
+     */
+    readonly loadBlob?: Maybe<Getter<PromiseOrValue<Maybe<Blob>>>>;
+    /**
+     * Whether or not to preload the blob from the blobGetter instead of waiting for the button to be moused over.
+     *
+     * Ignored if blobGetter is not provided.
+     */
+    readonly preloadBlob?: Maybe<boolean>;
+}
+/**
+ * Button used for downloading an arbitrary blob based on the input configuration.
+ */
+export declare class DbxDownloadBlobButtonComponent extends AbstractSubscriptionDirective implements OnDestroy {
+    private readonly _sanitizer;
+    private readonly _browserObjectUrl;
+    readonly config: import("@angular/core").InputSignal<Maybe<DbxDownloadBlobButtonConfig>>;
+    readonly downloadButton: import("@angular/core").Signal<Maybe<ElementRef<any>>>;
+    readonly config$: Observable<Maybe<DbxDownloadBlobButtonConfig>>;
+    readonly blob$: Observable<Maybe<Blob>>;
+    readonly blobSignal: import("@angular/core").Signal<Maybe<Blob>>;
+    readonly fileUrlSignal: import("@angular/core").Signal<SafeResourceUrl | undefined>;
+    readonly fileNameSignal: import("@angular/core").Signal<string>;
+    readonly downloadReadySignal: import("@angular/core").Signal<boolean>;
+    readonly buttonDisplaySignal: import("@angular/core").Signal<DbxButtonDisplay>;
+    readonly buttonStyleSignal: import("@angular/core").Signal<DbxButtonStyle>;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxDownloadBlobButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxDownloadBlobButtonComponent, "dbx-download-blob-button", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/extension/download/blob/index.d.ts

@@ -0,0 +1 @@
+export * from './download.blob.button.component';

package/lib/extension/download/index.d.ts

@@ -1 +1,2 @@
+export * from './blob';
 export * from './text';

package/lib/extension/download/text/download.text.component.d.ts

@@ -1,18 +1,18 @@
-import { ElementRef } from '@angular/core';
+import { ElementRef, OnDestroy } from '@angular/core';
 import { WorkUsingObservable, LoadingState, MaybeObservableOrValue } from '@dereekb/rxjs';
 import { type Maybe } from '@dereekb/util';
 import { Observable } from 'rxjs';
 import { DownloadTextContent } from './download.text';
-import { SafeResourceUrl } from '@angular/platform-browser';
 import { AbstractSubscriptionDirective } from '@dereekb/dbx-core';
+import { DbxDownloadBlobButtonConfig } from '../blob/download.blob.button.component';
 import * as i0 from "@angular/core";
 /**
- * DbxStructureDirective used specifically on the body of the app.
+ * View for previewing and downloading arbitrary text content.
  */
-export declare class DbxDownloadTextViewComponent extends AbstractSubscriptionDirective {
+export declare class DbxDownloadTextViewComponent extends AbstractSubscriptionDirective implements OnDestroy {
     private readonly _clipboard;
     private readonly _matSnackbar;
-    private readonly _sanitizer;
+    private readonly _browserObjectUrl;
     readonly downloadButton: import("@angular/core").Signal<Maybe<ElementRef<any>>>;
     readonly loadingText: import("@angular/core").InputSignal<Maybe<string>>;
     readonly linear: import("@angular/core").InputSignal<Maybe<boolean>>;
@@ -27,11 +27,11 @@ export declare class DbxDownloadTextViewComponent extends AbstractSubscriptionDi
     readonly content$: Observable<Maybe<DownloadTextContent>>;
     readonly contentSignal: import("@angular/core").Signal<Maybe<DownloadTextContent>>;
     readonly contentDataSignal: import("@angular/core").Signal<string | undefined>;
-    readonly fileUrlSignal: import("@angular/core").Signal<SafeResourceUrl | undefined>;
     readonly fileNameSignal: import("@angular/core").Signal<string>;
-    readonly downloadReadySignal: import("@angular/core").Signal<boolean>;
+    readonly downloadConfigSignal: import("@angular/core").Signal<DbxDownloadBlobButtonConfig | undefined>;
     readonly context: import("@dereekb/rxjs").MutableLoadingStateContext<unknown, LoadingState<DownloadTextContent>, import("@dereekb/rxjs").LoadingContextEvent & LoadingState<DownloadTextContent>>;
     readonly handleCopyToClipboard: WorkUsingObservable;
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxDownloadTextViewComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DbxDownloadTextViewComponent, "dbx-download-text-view", never, { "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "linear": { "alias": "linear"; "required": false; "isSignal": true; }; "showTitle": { "alias": "showTitle"; "required": false; "isSignal": true; }; "showPreview": { "alias": "showPreview"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "contentState": { "alias": "contentState"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/lib/extension/index.d.ts

@@ -1,4 +1,6 @@
 export * from './model';
 export * from './download';
+export * from './preview';
 export * from './structure';
 export * from './widget';
+export * from './zip';

package/lib/extension/model/model.tracker.d.ts

@@ -1,4 +1,4 @@
-import { type UnixDateTimeNumber, type Maybe, type ModelKey, type ModelKeyTypeNamePair } from '@dereekb/util';
+import { type Maybe, type ModelKey, type ModelKeyTypeNamePair, type UnixDateTimeSecondsNumber } from '@dereekb/util';
 /**
  * String context in which a model was viewed.
  */
@@ -7,7 +7,7 @@ export interface DbxModelViewTrackerEvent {
     /**
      * Event time
      */
-    readonly d?: UnixDateTimeNumber;
+    readonly d?: UnixDateTimeSecondsNumber;
     /**
      * Context
      */
@@ -22,7 +22,7 @@ export interface DbxModelViewTrackerEventSet {
     /**
      * The latest date/time number.
      */
-    readonly l: UnixDateTimeNumber;
+    readonly l: UnixDateTimeSecondsNumber;
     /**
      * List of events.
      */

package/lib/extension/preview/index.d.ts

@@ -0,0 +1,3 @@
+export * from './webfilepreview';
+export * from './webfilepreview.service';
+export * from './webfilepreview.service.preset';

package/lib/extension/preview/webfilepreview.d.ts

@@ -0,0 +1,13 @@
+import { type MatDialog, type MatDialogRef } from '@angular/material/dialog';
+import { type WebsiteUrlWithPrefix, type Maybe, type ContentTypeMimeType, type ArrayOrValue, type MimeTypeWithoutParameters } from '@dereekb/util';
+/**
+ * Used for previewing a src url and embedMimeType.
+ */
+export type DbxWebFilePreviewServicePreviewFunction = (matDialog: MatDialog, srcUrl: WebsiteUrlWithPrefix, embedMimeType?: Maybe<ContentTypeMimeType | string>) => MatDialogRef<any, any>;
+export interface DbxWebFilePreviewServiceEntry {
+    /**
+     * The MimeType(s) to associate the preview function with.
+     */
+    readonly mimeType: ArrayOrValue<MimeTypeWithoutParameters | string>;
+    readonly previewFunction: DbxWebFilePreviewServicePreviewFunction;
+}

package/lib/extension/preview/webfilepreview.service.d.ts

@@ -0,0 +1,31 @@
+import { InjectionToken } from '@angular/core';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { WebsiteUrlWithPrefix, Maybe, ContentTypeMimeType, MimeTypeWithoutParameters, ArrayOrValue } from '@dereekb/util';
+import { DbxWebFilePreviewServiceEntry, DbxWebFilePreviewServicePreviewFunction } from './webfilepreview';
+import * as i0 from "@angular/core";
+/**
+ * Default entries to inject.
+ */
+export declare const DBX_WEB_FILE_PREVIEW_SERVICE_ENTRIES_TOKEN: InjectionToken<DbxWebFilePreviewServiceEntry[]>;
+export declare function provideDbxWebFilePreviewServiceEntries(entries: DbxWebFilePreviewServiceEntry[]): {
+    provide: InjectionToken<DbxWebFilePreviewServiceEntry[]>;
+    useValue: DbxWebFilePreviewServiceEntry[];
+};
+/**
+ * Service used for previewing files with given mime types.
+ */
+export declare class DbxWebFilePreviewService {
+    readonly matDialog: MatDialog;
+    private readonly _entries;
+    constructor(entries: DbxWebFilePreviewServiceEntry[]);
+    private _defaultPreviewFunction;
+    registerPreviewEntries(entries: ArrayOrValue<DbxWebFilePreviewServiceEntry>): void;
+    /**
+     * Registers a preview function for the given mime type(s).
+     */
+    registerPreviewFunctions(mimeType: ArrayOrValue<MimeTypeWithoutParameters | string>, previewFunction: DbxWebFilePreviewServicePreviewFunction): void;
+    setDefaultPreviewFunction(previewFunction: DbxWebFilePreviewServicePreviewFunction): void;
+    openPreviewDialog(srcUrl: WebsiteUrlWithPrefix, embedMimeType?: Maybe<ContentTypeMimeType | string>): MatDialogRef<any, any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxWebFilePreviewService, [{ optional: true; }]>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DbxWebFilePreviewService>;
+}

package/lib/extension/preview/webfilepreview.service.preset.d.ts

@@ -0,0 +1,13 @@
+import { type DbxWebFilePreviewServiceEntry, type DbxWebFilePreviewServicePreviewFunction } from './webfilepreview';
+/**
+ * Default preset for previewing a file using a DbxEmbedDialogComponent.
+ */
+export declare const DBX_WEB_FILE_PREVIEW_SERVICE_DEFAULT_PRESET: DbxWebFilePreviewServicePreviewFunction;
+/**
+ * Preset for previewing a zip file using a DbxZipPreviewDialogComponent.
+ */
+export declare const DBX_WEB_FILE_PREVIEW_SERVICE_ZIP_PRESET: DbxWebFilePreviewServicePreviewFunction;
+/**
+ * DbxWebFilePreviewServiceEntry for previewing a zip file using a DbxZipPreviewDialogComponent.
+ */
+export declare const DBX_WEB_FILE_PREVIEW_SERVICE_ZIP_PRESET_ENTRY: DbxWebFilePreviewServiceEntry;

package/lib/extension/widget/widget.service.d.ts

@@ -16,7 +16,7 @@ export interface DbxWidgetEntry {
  * Service used to register widgets.
  */
 export declare class DbxWidgetService {
-    private _entries;
+    private readonly _entries;
     /**
      * Used to register an entry. If an entry with the same type is already registered, this will override it by default.
      *

package/lib/extension/zip/_zip.scss

@@ -0,0 +1,35 @@
+@use 'sass:map';
+@use '../../style/theming';
+
+// MARK: Variables
+$dbx-zip-blob-preview-toolbar-height: 36px;
+$dbx-zip-blob-preview-path-height: 28px;
+
+// MARK: Mixin
+@mixin core() {
+  .dbx-zip-blob-preview-content {
+    height: calc(100% - #{$dbx-zip-blob-preview-toolbar-height} - #{$dbx-zip-blob-preview-path-height});
+  }
+}
+
+@mixin color($theme-config) {
+}
+
+@mixin typography($theme-config-or-typography-config) {
+}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-zip') {
+    $color: theming.m2-get-color-config($theme-config);
+    $density: theming.m2-get-density-config($theme-config);
+    $typography: theming.m2-get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($theme-config);
+    }
+  }
+}

package/lib/extension/zip/index.d.ts

@@ -0,0 +1,4 @@
+export * from './zip.blob.preview.component';
+export * from './zip.blob';
+export * from './zip.preview.component';
+export * from './zip.preview.dialog.component';

package/lib/extension/zip/zip.blob.d.ts

@@ -0,0 +1,9 @@
+import { type MimeTypeWithoutParameters, type SlashPathDirectoryTreeNode, type SlashPathDirectoryTreeNodeValue, type SlashPathDirectoryTreeRoot, type Maybe, type Getter } from '@dereekb/util';
+import { type Entry } from '@zip.js/zip.js';
+export type DbxZipBlobPreviewEntryNodeValue<T extends Entry = Entry> = SlashPathDirectoryTreeNodeValue<T> & {
+    readonly mimeType: Maybe<MimeTypeWithoutParameters>;
+    readonly getBlob?: Getter<Promise<Blob>>;
+};
+export type DbxZipBlobPreviewEntryTreeNode<T extends Entry = Entry> = SlashPathDirectoryTreeNode<T, DbxZipBlobPreviewEntryNodeValue<T>>;
+export type DbxZipBlobPreviewEntryTreeRoot = SlashPathDirectoryTreeRoot<Entry, DbxZipBlobPreviewEntryNodeValue<Entry>>;
+export declare function dbxZipBlobPreviewEntryTreeFromEntries(entries: Maybe<Entry[]>): DbxZipBlobPreviewEntryTreeRoot;

package/lib/extension/zip/zip.blob.preview.component.d.ts

@@ -0,0 +1,54 @@
+import { Signal, OnDestroy } from '@angular/core';
+import { Maybe } from '@dereekb/util';
+import { ZipReader, Entry, FileEntry } from '@zip.js/zip.js';
+import { Observable } from 'rxjs';
+import { LoadingState } from '@dereekb/rxjs';
+import { DbxZipBlobPreviewEntryTreeNode } from './zip.blob';
+import { DbxListTitleGroupData, DbxListTitleGroupTitleDelegate } from '../../layout';
+import { AnchorForValueFunction } from '../../router';
+import { DbxDownloadBlobButtonConfig } from '../download/blob/download.blob.button.component';
+import * as i0 from "@angular/core";
+export type DbxZipBlobPreviewMode = 'view_directory' | 'view_entry';
+export type DbxZipBlobPreviewGroupValue = 'directory' | 'file';
+export type DbxZipBlobPreviewGroupData = DbxListTitleGroupData<DbxZipBlobPreviewGroupValue> & {
+    sort: number;
+};
+/**
+ * Used to display a zip preview based on the input blob.
+ */
+export declare class DbxZipBlobPreviewComponent implements OnDestroy {
+    readonly blob: import("@angular/core").InputSignal<Maybe<Blob>>;
+    /**
+     * The download file name for the zip file.
+     *
+     * If not defined, then the file cannot be downloaded directly.
+     */
+    readonly downloadFileName: import("@angular/core").InputSignal<Maybe<string>>;
+    readonly hasBlob: Signal<boolean>;
+    readonly zipReader: Signal<ZipReader<unknown> | undefined>;
+    readonly downloadZipFileBlobButtonConfigSignal: Signal<DbxDownloadBlobButtonConfig | undefined>;
+    readonly zipReader$: Observable<ZipReader<unknown> | undefined>;
+    readonly allEntriesLoadingState$: Observable<LoadingState<Entry[]>>;
+    readonly allEntries$: Observable<Maybe<Entry[]>>;
+    readonly allEntriesRoot$: Observable<import("./zip.blob").DbxZipBlobPreviewEntryTreeRoot>;
+    readonly allEntriesRootSignal: Signal<import("./zip.blob").DbxZipBlobPreviewEntryTreeRoot | undefined>;
+    readonly selectedNodeSignal: import("@angular/core").WritableSignal<Maybe<DbxZipBlobPreviewEntryTreeNode>>;
+    readonly listTitleGroupDelegate: DbxListTitleGroupTitleDelegate<DbxZipBlobPreviewEntryTreeNode, DbxZipBlobPreviewGroupValue, DbxZipBlobPreviewGroupData>;
+    readonly mode: Signal<string>;
+    readonly listEntries: Signal<DbxZipBlobPreviewEntryTreeNode[]>;
+    readonly listEntries$: Observable<DbxZipBlobPreviewEntryTreeNode[]>;
+    readonly listEntriesState$: Observable<LoadingState<DbxZipBlobPreviewEntryTreeNode[]>>;
+    readonly selectedNodeIconSignal: Signal<string>;
+    readonly selectedNodePathSignal: Signal<string>;
+    readonly selectedFileNodeSignal: Signal<Maybe<DbxZipBlobPreviewEntryTreeNode<FileEntry>>>;
+    readonly selectedFileEntry$: Observable<Maybe<DbxZipBlobPreviewEntryTreeNode<FileEntry>>>;
+    readonly selectedFileEntryBlob$: Observable<Maybe<Blob>>;
+    readonly selectedFileEntryBlobSignal: Signal<Maybe<Blob>>;
+    readonly context: import("@dereekb/rxjs").MutableLoadingStateContext<unknown, LoadingState<Entry[]>, import("@dereekb/rxjs").LoadingContextEvent & LoadingState<Entry[]>>;
+    ngOnDestroy(): void;
+    readonly makeEntryAnchor: AnchorForValueFunction<DbxZipBlobPreviewEntryTreeNode>;
+    readonly homeClicked: () => void;
+    readonly backClicked: () => void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxZipBlobPreviewComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxZipBlobPreviewComponent, "dbx-zip-blob-preview", never, { "blob": { "alias": "blob"; "required": false; "isSignal": true; }; "downloadFileName": { "alias": "downloadFileName"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/extension/zip/zip.blob.preview.list.component.d.ts

@@ -0,0 +1,25 @@
+import { DbxValueAsListItem, AbstractDbxSelectionListWrapperDirective, AbstractDbxSelectionListViewDirective, DbxSelectionValueListViewConfig, AbstractDbxValueListViewItemComponent } from '../../layout';
+import { DbxZipBlobPreviewEntryTreeNode } from './zip.blob';
+import { DbxDownloadBlobButtonConfig } from '../download/blob/download.blob.button.component';
+import * as i0 from "@angular/core";
+export type DbxZipPreviewEntryWithSelection = DbxValueAsListItem<DbxZipBlobPreviewEntryTreeNode>;
+export declare function iconForDbxZipPreviewEntryWithSelection(entry: DbxZipBlobPreviewEntryTreeNode): "folder" | "note" | "question_mark";
+export declare class DbxZipPreviewEntryListComponent extends AbstractDbxSelectionListWrapperDirective<DbxZipPreviewEntryWithSelection> {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxZipPreviewEntryListComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxZipPreviewEntryListComponent, "dbx-zip-preview-file-entry-list", never, {}, {}, never, ["[top]", "[bottom]", "[empty]", "[emptyLoading]", "[end]"], true, never>;
+}
+export declare class DbxZipPreviewEntryListViewComponent extends AbstractDbxSelectionListViewDirective<DbxZipPreviewEntryWithSelection> {
+    readonly config: DbxSelectionValueListViewConfig<DbxZipPreviewEntryWithSelection>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxZipPreviewEntryListViewComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxZipPreviewEntryListViewComponent, "dbx-zip-preview-file-entry-list-view", never, {}, {}, never, never, true, never>;
+}
+export declare class DbxZipPreviewEntryListViewItemComponent extends AbstractDbxValueListViewItemComponent<DbxZipPreviewEntryWithSelection> {
+    get name(): string;
+    get lastModDate(): Date;
+    get isDirectory(): boolean;
+    get canDownload(): boolean;
+    get downloadBlobButtonConfig(): DbxDownloadBlobButtonConfig;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxZipPreviewEntryListViewItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxZipPreviewEntryListViewItemComponent, "dbx-zip-preview-file-entry-list-view-item", never, {}, {}, never, never, true, never>;
+}

package/lib/extension/zip/zip.preview.component.d.ts

@@ -0,0 +1,31 @@
+import { OnDestroy } from '@angular/core';
+import { Maybe } from '@dereekb/util';
+import { Observable } from 'rxjs';
+import { LoadingState } from '@dereekb/rxjs';
+import * as i0 from "@angular/core";
+/**
+ * Used to display a corresponding widget based on the input data.
+ */
+export declare class DbxZipPreviewComponent implements OnDestroy {
+    /**
+     * The URL to download the zip file from, if applicable.
+     */
+    readonly srcUrl: import("@angular/core").InputSignal<Maybe<string>>;
+    /**
+     * The blob to use for the zip file, if applicable.
+     */
+    readonly blob: import("@angular/core").InputSignal<Maybe<Blob>>;
+    /**
+     * The file name to use for the zip file.
+     */
+    readonly downloadFileName: import("@angular/core").InputSignal<Maybe<string>>;
+    readonly srcUrl$: Observable<Maybe<string>>;
+    readonly blob$: Observable<Maybe<Blob>>;
+    readonly zipFileBlobLoadingState$: Observable<LoadingState<Blob>>;
+    readonly zipFileBlob$: Observable<Maybe<Blob>>;
+    readonly zipFileBlobSignal: import("@angular/core").Signal<Maybe<Blob>>;
+    readonly context: import("@dereekb/rxjs").MutableLoadingStateContext<unknown, LoadingState<Blob>, import("@dereekb/rxjs").LoadingContextEvent & LoadingState<Blob>>;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxZipPreviewComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxZipPreviewComponent, "dbx-zip-preview", never, { "srcUrl": { "alias": "srcUrl"; "required": false; "isSignal": true; }; "blob": { "alias": "blob"; "required": false; "isSignal": true; }; "downloadFileName": { "alias": "downloadFileName"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/extension/zip/zip.preview.dialog.component.d.ts

@@ -0,0 +1,17 @@
+import { MatDialog, MatDialogRef, MatDialogConfig } from '@angular/material/dialog';
+import { WebsiteUrlWithPrefix, Maybe } from '@dereekb/util';
+import { AbstractDialogDirective } from '../../interaction/dialog';
+import * as i0 from "@angular/core";
+export interface DbxZipPreviewDialogConfig extends Omit<MatDialogConfig, 'data'> {
+    readonly srcUrl?: Maybe<WebsiteUrlWithPrefix>;
+    readonly blob?: Maybe<Blob>;
+    readonly downloadFileName?: Maybe<string>;
+}
+export declare class DbxZipPreviewDialogComponent extends AbstractDialogDirective<void, DbxZipPreviewDialogConfig> {
+    get srcUrl(): Maybe<string>;
+    get blob(): Maybe<Blob>;
+    get downloadFileName(): Maybe<string>;
+    static openDialog(matDialog: MatDialog, config: DbxZipPreviewDialogConfig): MatDialogRef<DbxZipPreviewDialogComponent, void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxZipPreviewDialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxZipPreviewDialogComponent, "ng-component", never, {}, {}, never, never, true, never>;
+}

package/lib/interaction/iframe/_iframe.scss

@@ -14,6 +14,19 @@ $dbx-iframe-height-var: --dbx-iframe-height;
     height: 100%;
     width: 100%;
   }
+
+  dbx-embed embed {
+    // because of the way embed works, the embed element itself must have weight/height set, but this can cause issues with images.
+    height: 100%;
+    width: 100%;
+  }
+
+  dbx-embed embed.embed-image {
+    // This class aims to retain the original aspect ratio of the image while ensuring it does not overflow the container.
+    width: unset;
+    max-width: 100%;
+    max-height: 100%;
+  }
 }
 
 @mixin color($theme-config) {

package/lib/interaction/iframe/embed.component.d.ts

@@ -0,0 +1,31 @@
+import { ElementRef, OnDestroy } from '@angular/core';
+import { Maybe } from '@dereekb/util';
+import { AbstractSubscriptionDirective } from '@dereekb/dbx-core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import * as i0 from "@angular/core";
+export declare class DbxEmbedComponent extends AbstractSubscriptionDirective implements OnDestroy {
+    private readonly _browserObjectUrlRef;
+    readonly sanitizer: DomSanitizer;
+    readonly root: import("@angular/core").Signal<ElementRef<HTMLSpanElement> | undefined>;
+    readonly sanitizeUrl: import("@angular/core").InputSignal<Maybe<boolean>>;
+    readonly srcUrl: import("@angular/core").InputSignal<Maybe<string | SafeResourceUrl>>;
+    readonly type: import("@angular/core").InputSignal<Maybe<string>>;
+    /**
+     * The input src blob or media source to use.
+     *
+     * If set, the srcUrl will be updated with the browser object URL.
+     */
+    readonly srcBlob: import("@angular/core").InputSignal<Maybe<Blob>>;
+    readonly srcUrlFromBlob: import("@angular/core").WritableSignal<Maybe<string>>;
+    readonly typeFromBlob: import("@angular/core").WritableSignal<Maybe<string>>;
+    readonly srcBlobEffect: import("@angular/core").EffectRef;
+    readonly srcUrlSignal: import("@angular/core").Signal<Maybe<string | SafeResourceUrl>>;
+    readonly typeSignal: import("@angular/core").Signal<Maybe<string>>;
+    readonly root$: import("rxjs").Observable<ElementRef<HTMLSpanElement> | undefined>;
+    readonly srcUrl$: import("rxjs").Observable<Maybe<string | SafeResourceUrl>>;
+    readonly type$: import("rxjs").Observable<Maybe<string>>;
+    constructor();
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxEmbedComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxEmbedComponent, "dbx-embed", never, { "sanitizeUrl": { "alias": "sanitizeUrl"; "required": false; "isSignal": true; }; "srcUrl": { "alias": "srcUrl"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "srcBlob": { "alias": "srcBlob"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/lib/interaction/iframe/embed.dialog.component.d.ts

@@ -0,0 +1,17 @@
+import { MatDialog, MatDialogRef, MatDialogConfig } from '@angular/material/dialog';
+import { ContentTypeMimeType, Maybe, WebsiteUrlWithPrefix } from '@dereekb/util';
+import { AbstractDialogDirective } from '../dialog/abstract.dialog.directive';
+import * as i0 from "@angular/core";
+export interface DbxEmbedDialogConfig extends Omit<MatDialogConfig, 'data'> {
+    readonly srcUrl: WebsiteUrlWithPrefix;
+    readonly embedMimeType?: Maybe<ContentTypeMimeType | string>;
+    readonly sanitizeUrl?: boolean;
+}
+export declare class DbxEmbedDialogComponent extends AbstractDialogDirective<void, DbxEmbedDialogConfig> {
+    get type(): Maybe<string>;
+    get srcUrl(): string;
+    get sanitizeUrl(): boolean | undefined;
+    static openDialog(matDialog: MatDialog, config: DbxEmbedDialogConfig): MatDialogRef<DbxEmbedDialogComponent, void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxEmbedDialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxEmbedDialogComponent, "ng-component", never, {}, {}, never, never, true, never>;
+}

package/lib/interaction/iframe/iframe.component.d.ts

@@ -4,7 +4,6 @@ import { Maybe } from '@dereekb/util';
 import { AbstractSubscriptionDirective } from '@dereekb/dbx-core';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import * as i0 from "@angular/core";
-export declare const DBX_IFRAME_COMPONENT_TEMPLATE = "<iframe #iframe src=\"about:blank\" frameborder=\"0\" [scrolling]=\"scrolling()\" allow=\"autoplay\"></iframe>";
 export declare class DbxIframeComponent extends AbstractSubscriptionDirective implements OnDestroy {
     readonly sanitizer: DomSanitizer;
     readonly iframeLocationChanged: import("@angular/core").OutputEmitterRef<ElementRef<HTMLIFrameElement>>;

package/lib/interaction/iframe/iframe.dialog.component.d.ts

@@ -0,0 +1,13 @@
+import { MatDialog, MatDialogRef, MatDialogConfig } from '@angular/material/dialog';
+import { WebsiteUrlWithPrefix } from '@dereekb/util';
+import { AbstractDialogDirective } from '../dialog/abstract.dialog.directive';
+import * as i0 from "@angular/core";
+export interface DbxIframeDialogConfig extends Omit<MatDialogConfig, 'data'> {
+    readonly contentUrl: WebsiteUrlWithPrefix;
+}
+export declare class DbxIframeDialogComponent extends AbstractDialogDirective<void, DbxIframeDialogConfig> {
+    get contentUrl(): string;
+    static openDialog(matDialog: MatDialog, config: DbxIframeDialogConfig): MatDialogRef<DbxIframeDialogComponent, void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxIframeDialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxIframeDialogComponent, "ng-component", never, {}, {}, never, never, true, never>;
+}

package/lib/interaction/iframe/index.d.ts

@@ -1 +1,4 @@
 export * from './iframe.component';
+export * from './iframe.dialog.component';
+export * from './embed.component';
+export * from './embed.dialog.component';

package/lib/layout/style/_style.scss

@@ -10,7 +10,8 @@
     flex: 1 1 auto;
   }
 
-  .decoration {
+  .decoration,
+  .pointer-disabled {
     pointer-events: none;
   }
 

package/lib/style/_config.scss

@@ -192,7 +192,9 @@ $default-notice-color: #f28600;
     // calendar enabled by default
     'calendar': 1,
     // table enabled by default
-    'table': 1
+    'table': 1,
+    // zip enabled by default
+    'zip': 1
   );
 
   @if ($input-dbx-theme-extension-config != null) {
@@ -217,3 +219,7 @@ $default-notice-color: #f28600;
 @function get-dbx-extension-table-enabled($theme-config) {
   @return get-dbx-extension-config-var($theme-config, 'table');
 }
+
+@function get-dbx-extension-zip-enabled($theme-config) {
+  @return get-dbx-extension-config-var($theme-config, 'zip');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dereekb/dbx-web",
-  "version": "12.5.9",
+  "version": "12.6.0",
   "peerDependencies": {
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",
@@ -21,7 +21,8 @@
     "@angular/platform-browser": "^18.0.0",
     "@uirouter/angular": "15.0.0",
     "change-case-all": "^2.1.0",
-    "class-validator": "^0.14.0"
+    "class-validator": "^0.14.0",
+    "@zip.js/zip.js": "^2.8.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"