@dereekb/dbx-web 13.19.0 → 13.21.0

package/fesm2022/dereekb-dbx-web.mjs

@@ -8980,9 +8980,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  * Wraps content in a recessed "pit" container with optional scrollable overflow and rounded corners.
  * Useful for displaying bounded content areas such as lists or previews with a constrained height.
  *
- * Pits round their corners by default. Pass `[rounded]="false"` to square the pit — this applies the
+ * Pits round their corners by default. Pass `[square]="true"` to square the pit — this applies the
  * common `.dbx-corners-none` opt-out utility rather than a pit-specific class.
  *
+ * When `[scrollable]` is set the pit frame (padding, background, corners) stays fixed and an inner
+ * `.dbx-content-pit-scrollable-content` wrapper does the scrolling — wrap the body in that element so
+ * the frame doesn't shift at the scroll extremes. The resolved max height is published as the
+ * `--dbx-content-pit-scrollable-max-height` custom property, which the inner wrapper reads.
+ *
  * @dbxWebComponent
  * @dbxWebSlug content-pit
  * @dbxWebCategory layout
@@ -8999,7 +9004,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  */
 class DbxContentPitDirective {
     scrollable = input(...(ngDevMode ? [undefined, { debugName: "scrollable" }] : /* istanbul ignore next */ []));
-    rounded = input(true, ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+    square = input(false, ...(ngDevMode ? [{ debugName: "square" }] : /* istanbul ignore next */ []));
     scrollableHeightSignal = computed(() => {
         let scrollable = this.scrollable();
         let scrollableHeight;
@@ -9029,8 +9034,12 @@ class DbxContentPitDirective {
         }
         return scrollableHeight ?? null;
     }, ...(ngDevMode ? [{ debugName: "scrollableHeightSignal" }] : /* istanbul ignore next */ []));
+    // The pit always publishes its own scroll cap so the `.dbx-content-pit-scrollable-content`
+    // wrapper reads it directly rather than inheriting the global `--dbx-content-pit-scrollable-max-height`
+    // default (140px) from the theme root. `none` when not scrollable lets the wrapper grow freely.
+    scrollableMaxHeightSignal = computed(() => this.scrollableHeightSignal() ?? 'none', ...(ngDevMode ? [{ debugName: "scrollableMaxHeightSignal" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxContentPitDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: DbxContentPitDirective, isStandalone: true, selector: "dbx-content-pit, [dbxContentPit]", inputs: { scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dbx-content-pit-scrollable": "scrollableHeightSignal() != null", "class.dbx-corners-none": "!rounded()", "style.max-height": "scrollableHeightSignal()" }, classAttribute: "d-block dbx-content-pit" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: DbxContentPitDirective, isStandalone: true, selector: "dbx-content-pit, [dbxContentPit]", inputs: { scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dbx-content-pit-scrollable": "scrollableHeightSignal() != null", "class.dbx-corners-none": "square()", "style.--dbx-content-pit-scrollable-max-height": "scrollableMaxHeightSignal()" }, classAttribute: "d-block dbx-content-pit" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxContentPitDirective, decorators: [{
             type: Directive,
@@ -9039,12 +9048,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                     host: {
                         class: 'd-block dbx-content-pit',
                         '[class.dbx-content-pit-scrollable]': 'scrollableHeightSignal() != null',
-                        '[class.dbx-corners-none]': '!rounded()',
-                        '[style.max-height]': 'scrollableHeightSignal()'
+                        '[class.dbx-corners-none]': 'square()',
+                        '[style.--dbx-content-pit-scrollable-max-height]': 'scrollableMaxHeightSignal()'
                     },
                     standalone: true
                 }]
-        }], propDecorators: { scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
+        }], propDecorators: { scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], square: [{ type: i0.Input, args: [{ isSignal: true, alias: "square", required: false }] }] } });
 
 /**
  * Displays a preview of text content with options to copy to clipboard and download as a file. Supports loading states for async content retrieval.
@@ -9108,11 +9117,11 @@ class DbxDownloadTextViewComponent extends AbstractDbxClipboardDirective {
         this.expandPreview.update((value) => !value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxDownloadTextViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxDownloadTextViewComponent, isStandalone: true, selector: "dbx-download-text-view", inputs: { showDownloadButton: { classPropertyName: "showDownloadButton", publicName: "showDownloadButton", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null }, showExpandPreviewButton: { classPropertyName: "showExpandPreviewButton", publicName: "showExpandPreviewButton", isSignal: true, isRequired: false, transformFunction: null }, expandPreview: { classPropertyName: "expandPreview", publicName: "expandPreview", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, contentState: { classPropertyName: "contentState", publicName: "contentState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandPreview: "expandPreviewChange" }, viewQueries: [{ propertyName: "downloadButton", first: true, predicate: ["downloadButton"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-download-text-view\">\n  <dbx-loading [context]=\"context\" [linear]=\"linear()\" [text]=\"loadingText()\">\n    <ng-container *ngTemplateOutlet=\"contentView\"></ng-container>\n  </dbx-loading>\n</div>\n\n<!-- Template -->\n<ng-template #contentView>\n  <div class=\"dbx-download-text-view-content\">\n    @if (showTitle()) {\n      <div class=\"dbx-download-text-view-content-title dbx-mb2 mat-subtitle-2\">{{ fileNameSignal() }}</div>\n    }\n    @if (showPreview()) {\n      <dbx-content-pit [scrollable]=\"!expandPreview()\" class=\"dbx-download-text-preview dbx-json dbx-mb3\">\n        @if (showExpandPreviewButton()) {\n          <dbx-button class=\"dbx-content-pit-floating-button\" [raised]=\"true\" [icon]=\"expandPreview() ? 'unfold_less' : 'unfold_more'\" (buttonClick)=\"toggleExpandPreview()\"></dbx-button>\n        }\n        {{ contentDataSignal() }}\n      </dbx-content-pit>\n    }\n    <div class=\"dbx-download-text-view-actions\">\n      <dbx-button dbxAction dbxActionValue [raised]=\"true\" [dbxActionHandler]=\"handleCopyToClipboard\" icon=\"content_copy\" dbxActionButton text=\"Copy To Clipboard\"></dbx-button>\n      @if (showDownloadButton()) {\n        <dbx-button-spacer></dbx-button-spacer>\n        <dbx-download-blob-button [config]=\"downloadConfigSignal()\"></dbx-download-blob-button>\n      }\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "diameter", "linear", "loading", "error", "context"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1$2.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$2.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: DbxDownloadBlobButtonComponent, selector: "dbx-download-blob-button", inputs: ["config"] }, { kind: "directive", type: DbxContentPitDirective, selector: "dbx-content-pit, [dbxContentPit]", inputs: ["scrollable", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxDownloadTextViewComponent, isStandalone: true, selector: "dbx-download-text-view", inputs: { showDownloadButton: { classPropertyName: "showDownloadButton", publicName: "showDownloadButton", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null }, showExpandPreviewButton: { classPropertyName: "showExpandPreviewButton", publicName: "showExpandPreviewButton", isSignal: true, isRequired: false, transformFunction: null }, expandPreview: { classPropertyName: "expandPreview", publicName: "expandPreview", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, contentState: { classPropertyName: "contentState", publicName: "contentState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandPreview: "expandPreviewChange" }, viewQueries: [{ propertyName: "downloadButton", first: true, predicate: ["downloadButton"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-download-text-view\">\n  <dbx-loading [context]=\"context\" [linear]=\"linear()\" [text]=\"loadingText()\">\n    <ng-container *ngTemplateOutlet=\"contentView\"></ng-container>\n  </dbx-loading>\n</div>\n\n<!-- Template -->\n<ng-template #contentView>\n  <div class=\"dbx-download-text-view-content\">\n    @if (showTitle()) {\n      <div class=\"dbx-download-text-view-content-title dbx-mb2 mat-subtitle-2\">{{ fileNameSignal() }}</div>\n    }\n    @if (showPreview()) {\n      <dbx-content-pit [scrollable]=\"!expandPreview()\" class=\"dbx-download-text-preview dbx-json dbx-mb3\">\n        <div class=\"dbx-content-pit-scrollable-content\">\n          @if (showExpandPreviewButton()) {\n            <dbx-button class=\"dbx-content-pit-floating-button\" [raised]=\"true\" [icon]=\"expandPreview() ? 'unfold_less' : 'unfold_more'\" (buttonClick)=\"toggleExpandPreview()\"></dbx-button>\n          }\n          {{ contentDataSignal() }}\n        </div>\n      </dbx-content-pit>\n    }\n    <div class=\"dbx-download-text-view-actions\">\n      <dbx-button dbxAction dbxActionValue [raised]=\"true\" [dbxActionHandler]=\"handleCopyToClipboard\" icon=\"content_copy\" dbxActionButton text=\"Copy To Clipboard\"></dbx-button>\n      @if (showDownloadButton()) {\n        <dbx-button-spacer></dbx-button-spacer>\n        <dbx-download-blob-button [config]=\"downloadConfigSignal()\"></dbx-download-blob-button>\n      }\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "diameter", "linear", "loading", "error", "context"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1$2.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$2.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "component", type: DbxDownloadBlobButtonComponent, selector: "dbx-download-blob-button", inputs: ["config"] }, { kind: "directive", type: DbxContentPitDirective, selector: "dbx-content-pit, [dbxContentPit]", inputs: ["scrollable", "square"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxDownloadTextViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dbx-download-text-view', standalone: true, imports: [NgTemplateOutlet, DbxLoadingComponent, DbxActionModule, DbxActionButtonDirective, DbxButtonComponent, DbxButtonSpacerDirective, DbxDownloadBlobButtonComponent, DbxContentPitDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dbx-download-text-view\">\n  <dbx-loading [context]=\"context\" [linear]=\"linear()\" [text]=\"loadingText()\">\n    <ng-container *ngTemplateOutlet=\"contentView\"></ng-container>\n  </dbx-loading>\n</div>\n\n<!-- Template -->\n<ng-template #contentView>\n  <div class=\"dbx-download-text-view-content\">\n    @if (showTitle()) {\n      <div class=\"dbx-download-text-view-content-title dbx-mb2 mat-subtitle-2\">{{ fileNameSignal() }}</div>\n    }\n    @if (showPreview()) {\n      <dbx-content-pit [scrollable]=\"!expandPreview()\" class=\"dbx-download-text-preview dbx-json dbx-mb3\">\n        @if (showExpandPreviewButton()) {\n          <dbx-button class=\"dbx-content-pit-floating-button\" [raised]=\"true\" [icon]=\"expandPreview() ? 'unfold_less' : 'unfold_more'\" (buttonClick)=\"toggleExpandPreview()\"></dbx-button>\n        }\n        {{ contentDataSignal() }}\n      </dbx-content-pit>\n    }\n    <div class=\"dbx-download-text-view-actions\">\n      <dbx-button dbxAction dbxActionValue [raised]=\"true\" [dbxActionHandler]=\"handleCopyToClipboard\" icon=\"content_copy\" dbxActionButton text=\"Copy To Clipboard\"></dbx-button>\n      @if (showDownloadButton()) {\n        <dbx-button-spacer></dbx-button-spacer>\n        <dbx-download-blob-button [config]=\"downloadConfigSignal()\"></dbx-download-blob-button>\n      }\n    </div>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'dbx-download-text-view', standalone: true, imports: [NgTemplateOutlet, DbxLoadingComponent, DbxActionModule, DbxActionButtonDirective, DbxButtonComponent, DbxButtonSpacerDirective, DbxDownloadBlobButtonComponent, DbxContentPitDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dbx-download-text-view\">\n  <dbx-loading [context]=\"context\" [linear]=\"linear()\" [text]=\"loadingText()\">\n    <ng-container *ngTemplateOutlet=\"contentView\"></ng-container>\n  </dbx-loading>\n</div>\n\n<!-- Template -->\n<ng-template #contentView>\n  <div class=\"dbx-download-text-view-content\">\n    @if (showTitle()) {\n      <div class=\"dbx-download-text-view-content-title dbx-mb2 mat-subtitle-2\">{{ fileNameSignal() }}</div>\n    }\n    @if (showPreview()) {\n      <dbx-content-pit [scrollable]=\"!expandPreview()\" class=\"dbx-download-text-preview dbx-json dbx-mb3\">\n        <div class=\"dbx-content-pit-scrollable-content\">\n          @if (showExpandPreviewButton()) {\n            <dbx-button class=\"dbx-content-pit-floating-button\" [raised]=\"true\" [icon]=\"expandPreview() ? 'unfold_less' : 'unfold_more'\" (buttonClick)=\"toggleExpandPreview()\"></dbx-button>\n          }\n          {{ contentDataSignal() }}\n        </div>\n      </dbx-content-pit>\n    }\n    <div class=\"dbx-download-text-view-actions\">\n      <dbx-button dbxAction dbxActionValue [raised]=\"true\" [dbxActionHandler]=\"handleCopyToClipboard\" icon=\"content_copy\" dbxActionButton text=\"Copy To Clipboard\"></dbx-button>\n      @if (showDownloadButton()) {\n        <dbx-button-spacer></dbx-button-spacer>\n        <dbx-download-blob-button [config]=\"downloadConfigSignal()\"></dbx-download-blob-button>\n      }\n    </div>\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { downloadButton: [{ type: i0.ViewChild, args: ['downloadButton', { ...{ read: ElementRef }, isSignal: true }] }], showDownloadButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDownloadButton", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], showTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTitle", required: false }] }], showPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPreview", required: false }] }], showExpandPreviewButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpandPreviewButton", required: false }] }], expandPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandPreview", required: false }] }, { type: i0.Output, args: ["expandPreviewChange"] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], contentState: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentState", required: false }] }] } });
 
 /**