@dereekb/dbx-web 13.41.0 → 13.43.0

package/lib/extension/_extension.scss

@@ -5,6 +5,7 @@
 @use './zip/zip';
 @use './help/help';
 @use './pdf/pdf';
+@use './download/download';
 
 @mixin all-extension-core($theme-config) {
   $calendar-enabled: 1;
@@ -36,6 +37,7 @@
   }
 
   @include pdf.core();
+  @include download.core();
 }
 
 @mixin all-extension-typography($theme-config-or-typography-config) {
@@ -71,4 +73,5 @@
   }
 
   @include pdf.theme($theme-config);
+  @include download.theme($theme-config);
 }

package/lib/extension/download/_download.scss

@@ -0,0 +1,23 @@
+@use '../../style/theming';
+
+// MARK: Mixin
+@mixin core() {
+  // The row borrows .dbx-list-item-padded/.dbx-list-two-line-item from _list.scss, so it only needs to be
+  // told to fill its container — otherwise a row placed in a flex column collapses to its content width.
+  .dbx-file-list,
+  .dbx-file-list-item {
+    width: 100%;
+  }
+
+  // the details line is assembled from separate spans (a label and a date), so the gap stands in for the
+  // space between them that the template has no reliable way to emit
+  .dbx-file-list-item .item-details {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    column-gap: var(--dbx-file-list-item-details-gap, 0.25em);
+  }
+}
+
+@mixin theme($theme-config) {
+}

package/lib/layout/flex/_flex.scss

@@ -9,13 +9,23 @@ $dbx-flex-group-columns-count: 6;
   /// @dbx-utility flex-bar
   /// @intent horizontal action bar — flex row that scrolls horizontally before wrapping
   /// @role flex
-  /// @see-also dbx-flex-center, dbx-flex-fill
+  /// @see-also dbx-flex-center, dbx-flex-fill, card-horizontal
   .dbx-flex-bar {
     display: flex;
     align-items: center;
     overflow-x: auto;
     overflow-y: hidden;
 
+    // `overflow-x: auto` makes this a scroll container, and a `box-shadow` never
+    // contributes to the scrollable overflow region — so an elevated child's shadow is
+    // CLIPPED at the edge rather than scrolled to. With `align-items: center` and no
+    // fixed height the bar hugs its tallest child exactly, putting the clip edge right on
+    // a raised button's border box. Reserve the shadow's reach as vertical padding so it
+    // lives INSIDE the padding box (the same fix `.dbx-card-horizontal` uses for its
+    // poking tab). Block axis only: `padding-inline` would push the first button off the
+    // bar's leading edge, and the horizontal cut is not what reads as broken.
+    padding-block: var(--dbx-shadow-gutter, 4px);
+
     // Constrain touch targets to prevent overflow scrollbar (48px default > 40px button)
     --mat-icon-button-touch-target-size: 40px;
     --mat-button-text-touch-target-size: 40px;

package/lib/layout/section/_section.scss

@@ -47,6 +47,13 @@ $header-left-reserved-space-small-screen: 120px;
 
       display: flex;
       align-items: center;
+
+      // The header row is a `.dbx-flex-bar`, so it carries the `--dbx-shadow-gutter`
+      // block padding that keeps a raised button's shadow from being clipped. Border-box
+      // makes the header's `min-height` / `height` absorb that gutter instead of adding
+      // to it, so the 48px row stays 48px (40px button + the gutter) rather than growing
+      // to 56px and overflowing a fixed-height section-page header.
+      box-sizing: border-box;
     }
   }
 
@@ -119,6 +126,14 @@ $header-left-reserved-space-small-screen: 120px;
         max-height: $content-navbar-height;
         max-width: 100%;
 
+        // Unlike the regular `.dbx-section` header (which only sets `min-height` and can
+        // absorb the gutter), this row is height-LOCKED to the navbar height and its title
+        // already fills it. The `.dbx-flex-bar` shadow gutter would eat 8px of that budget
+        // and shave the title, so opt this row out. A raised button in a section-PAGE
+        // header therefore still clips its shadow — the pre-existing behaviour; use a
+        // regular `.dbx-section` header when the action needs elevation.
+        #{theming.$shadow-gutter-var}: 0px;
+
         .dbx-section-header-content-title {
           max-width: calc(80% - var(--dbx-section-page-header-reserved-space, #{$header-left-reserved-space}));
           min-width: 48px;

package/lib/style/_root-variables.scss

@@ -31,6 +31,8 @@
     #{theming.$padding-4-var}: theming.get-dbx-layout-padding($theme-config, 4);
     #{theming.$padding-5-var}: theming.get-dbx-layout-padding($theme-config, 5);
 
+    #{theming.$shadow-gutter-var}: 4px;
+
     #{theming.$two-column-left-width-var}: theming.get-dbx-two-column-left-width($theme-config);
 
     #{theming.$dbx-app-height-additional-offset-var}: 0px;

package/lib/style/_variables.scss

@@ -43,6 +43,16 @@ $padding-4-var: --dbx-padding-4;
 /// @utility .dbx-p5, .dbx-mb5
 $padding-5-var: --dbx-padding-5;
 
+/// Shadow gutter — the room a clipping/scrolling container must reserve INSIDE its
+/// padding box so an elevated child's `box-shadow` isn't clipped at the edge.
+/// Sized against Material's raised-button elevation: the resting shadow reaches
+/// 2.5px below the border box and the hover shadow reaches 5px, so 4px clears the
+/// resting state outright and all but the faintest 12% hover layer. Raise it to 5px
+/// to clear hover completely, or set it to 0px to opt out.
+/// @intent shadow gutter, elevation room, keep box-shadow from being clipped
+/// @role spacing
+$shadow-gutter-var: --dbx-shadow-gutter;
+
 $two-column-left-width-var: --dbx-two-column-left-width;
 
 $dbx-color-var: --dbx-color-current;

package/mapbox/README.md

@@ -3,4 +3,53 @@
 
 The sources for this package are in the main [@dereekb/dbx-components](https://github.com/dereekb/dbx-components) repo. Please file issues and pull requests against that repo.
 
+## Required build asset: the mapbox-gl web worker
+
+Apps using `provideDbxMapbox()` must copy mapbox-gl's prebuilt CSP web worker into their
+assets. Add this entry to the `assets` array of the app's `build` target in `project.json`:
+
+```json
+{
+  "input": "node_modules/mapbox-gl/dist",
+  "glob": "mapbox-gl-csp-worker.js",
+  "output": "assets/mapbox-gl"
+}
+```
+
+`provideDbxMapbox()` registers an app initializer that points `mapboxgl.workerUrl` at
+`assets/mapbox-gl/mapbox-gl-csp-worker.js` before any map is created, and logs an error
+naming this snippet if the asset is not reachable.
+
+### Why
+
+mapbox-gl builds its web worker by stringifying two of its own functions into a `Blob`.
+Only those function *bodies* are serialized, so anything the bundler hoists to module scope
+is missing inside the worker. `@angular/build` unconditionally disables esbuild's
+`object-rest-spread` support (a V8 performance workaround, still present in Angular 22), which
+rewrites every object spread into exactly such a hoisted helper. From mapbox-gl **3.26.0** on
+there are object spreads in the serialized worker code, so the worker dies while loading tiles:
+
+```
+ReferenceError: __spreadValues is not defined   at Ie.loadTile
+```
+
+(In a production build the helper name is minified, so the same failure reads as
+`ReferenceError: <mangled> is not defined`.)
+
+Loading the worker from a real file instead of the generated blob — mapbox's own documented
+`workerUrl` escape hatch — avoids the problem entirely at any mapbox-gl version. Copying the
+asset out of the app's own `node_modules` keeps the worker in version lockstep with the
+`mapbox-gl` the app bundles.
+
+### Options
+
+`provideDbxMapbox({ worker })` accepts:
+
+- `workerUrl` — serve the asset from somewhere other than the default path.
+- `enabled: false` — restore mapbox-gl's stock blob worker. Only safe below mapbox-gl 3.26.0.
+
+Note the CSP worker does not support the dynamically loaded RTL text plugin
+(`setRTLTextPlugin`) or `addTileProvider` modules, which rely on a hook the blob worker
+provides. Apps needing those must set `enabled: false` and stay below mapbox-gl 3.26.0.
+
 License: MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dereekb/dbx-web",
-  "version": "13.41.0",
+  "version": "13.43.0",
   "sideEffects": [
     "*.scss",
     "*.css"
@@ -13,12 +13,12 @@
     "@angular/material": "^21.2.9",
     "@angular/platform-browser": "21.2.11",
     "@cantoo/pdf-lib": "^2.6.5",
-    "@dereekb/browser": "13.41.0",
-    "@dereekb/date": "13.41.0",
-    "@dereekb/dbx-core": "13.41.0",
-    "@dereekb/rxjs": "13.41.0",
-    "@dereekb/util": "13.41.0",
-    "@dereekb/vitest": "13.41.0",
+    "@dereekb/browser": "13.43.0",
+    "@dereekb/date": "13.43.0",
+    "@dereekb/dbx-core": "13.43.0",
+    "@dereekb/rxjs": "13.43.0",
+    "@dereekb/util": "13.43.0",
+    "@dereekb/vitest": "13.43.0",
     "@ngbracket/ngx-layout": "^21.0.0",
     "@ngrx/component-store": "^21.1.0",
     "@ngrx/effects": "^21.1.0",

package/types/dereekb-dbx-web-mapbox.d.ts

@@ -759,16 +759,98 @@ declare class DbxMapboxModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxMapboxModule>;
 }
 
+/**
+ * Relative url the mapbox-gl CSP web worker asset is expected to be served from.
+ *
+ * The asset itself is copied out of `node_modules/mapbox-gl/dist/mapbox-gl-csp-worker.js`
+ * by the consuming app's build configuration, which keeps it in version lockstep with the
+ * `mapbox-gl` the app actually bundles.
+ */
+declare const DEFAULT_DBX_MAPBOX_WORKER_URL = "assets/mapbox-gl/mapbox-gl-csp-worker.js";
+/**
+ * Configuration for {@link configureDbxMapboxWorker}.
+ */
+interface DbxMapboxWorkerConfig {
+    /**
+     * Whether or not to load mapbox-gl's web worker from a self-hosted asset instead of the
+     * default blob url.
+     *
+     * True by default. Set to false only to restore mapbox-gl's stock blob worker, which is
+     * broken in Angular/esbuild apps on mapbox-gl 3.26.0 and up.
+     */
+    readonly enabled?: Maybe<boolean>;
+    /**
+     * Url the mapbox-gl CSP web worker asset is served from.
+     *
+     * Defaults to {@link DEFAULT_DBX_MAPBOX_WORKER_URL}.
+     */
+    readonly workerUrl?: Maybe<string>;
+}
+/**
+ * Result of {@link configureDbxMapboxWorker}.
+ */
+interface DbxMapboxWorkerConfigurationResult {
+    /**
+     * Whether or not the self-hosted worker was configured on mapbox-gl.
+     */
+    readonly configured: boolean;
+    /**
+     * Url that was configured, if any.
+     */
+    readonly workerUrl: Maybe<string>;
+    /**
+     * Whether or not the configured worker asset could be retrieved.
+     *
+     * Null when no check was performed.
+     */
+    readonly available: Maybe<boolean>;
+}
+/**
+ * Checks whether the mapbox-gl web worker asset is actually served from the given url.
+ *
+ * @param workerUrl - Url the worker asset is expected at.
+ * @returns True when the asset responds successfully.
+ */
+declare function isDbxMapboxWorkerAssetAvailable(workerUrl: string): Promise<boolean>;
+/**
+ * Configures mapbox-gl to load its web worker from a self-hosted copy of mapbox's prebuilt
+ * CSP worker rather than from the blob url it generates itself.
+ *
+ * mapbox-gl's default worker is built by stringifying two of its own functions into a blob.
+ * Only those function bodies are serialized, so any helper the bundler hoists to module
+ * scope is missing at runtime. `@angular/build` unconditionally disables esbuild's
+ * `object-rest-spread` support, which rewrites every object spread in mapbox-gl 3.26.0+ into
+ * exactly such a hoisted helper, and the worker then dies with a `ReferenceError` while
+ * loading tiles. Pointing `workerUrl` at a real file — mapbox's own documented CSP escape
+ * hatch — sidesteps the bug entirely, at any mapbox-gl version.
+ *
+ * Must be applied before the first `Map` is constructed.
+ *
+ * @param inputConfig - Configuration. Optional.
+ * @returns The applied configuration.
+ */
+declare function configureDbxMapboxWorker(inputConfig?: Maybe<DbxMapboxWorkerConfig>): Promise<DbxMapboxWorkerConfigurationResult>;
+
 /**
  * Configuration for provideDbxMapbox().
  */
 interface ProvideDbxMapboxConfig {
     readonly dbxMapboxConfig: DbxMapboxConfig;
     readonly ngxMapboxGLModuleConfig: Parameters<typeof provideMapboxGL>[0];
+    /**
+     * Configuration for the self-hosted mapbox-gl web worker.
+     *
+     * Enabled by default. See {@link configureDbxMapboxWorker} for why it is needed and
+     * which build asset the app must copy.
+     */
+    readonly worker?: Maybe<DbxMapboxWorkerConfig>;
 }
 /**
  * Creates EnvironmentProviders for providing DbxMapboxConfig and configuring the NgxMapboxGLModule.
  *
+ * Also registers an app initializer that points mapbox-gl at the self-hosted CSP web worker
+ * asset before any map is created.
+ *
  * @param config - Configuration.
  * @returns EnvironmentProviders.
  */
@@ -785,5 +867,5 @@ interface DbxMapboxEnvironmentOptions extends DbxMapboxConfig {
  */
 type DbxMapboxOptions = DbxMapboxEnvironmentOptions;
 
-export { DEFAULT_MAPBOX_CENTER, DEFAULT_MAPBOX_LAYOUT_DRAWER_WIDTH, DEFAULT_MAPBOX_MAP_STORE_TIMER_REFRESH_PERIOD, DEFAULT_MAPBOX_STYLE, DEFAULT_MAPBOX_ZOOM, DbxMapboxChangeService, DbxMapboxConfig, DbxMapboxInjectionComponent, DbxMapboxInjectionStore, DbxMapboxInjectionStoreInjectionBlockDirective, DbxMapboxInjectionStoreProviderBlock, DbxMapboxLayoutComponent, DbxMapboxLayoutDrawerComponent, DbxMapboxLayoutVirtualResizeSyncComponent, DbxMapboxMapDirective, DbxMapboxMapStore, DbxMapboxMapStoreInjectionBlockDirective, DbxMapboxMapStoreProviderBlock, DbxMapboxMarkerComponent, DbxMapboxMarkersComponent, DbxMapboxMenuComponent, DbxMapboxModule, DbxMapboxService, KNOWN_MAPBOX_STYLES, MAPBOX_MAX_ZOOM_LEVEL, MAPBOX_MIN_ZOOM_LEVEL, dbxMapboxColoredDotStyle, filterByMapboxViewportBound, mapboxViewportBoundFunction, mapboxZoomLevel, provideDbxMapbox, provideMapboxInjectionStoreIfParentIsUnavailable, provideMapboxStoreIfParentIsUnavailable, updateDbxMapboxMapInjectionStoreStateWithInjectionConfig, updateDbxMapboxMapInjectionStoreStateWithRemovedKey };
-export type { DbxMapboxClickEvent, DbxMapboxEnvironmentOptions, DbxMapboxInjectionConfig, DbxMapboxInjectionKey, DbxMapboxLayoutMode, DbxMapboxLayoutSide, DbxMapboxMapInjectionStoreState, DbxMapboxMarginCalculationSizing, DbxMapboxMarker, DbxMapboxMarkerDisplayConfig, DbxMapboxMarkerFactory, DbxMapboxMarkerPresentation, DbxMapboxMarkerSize, DbxMapboxOptions, DbxMapboxStoreBoundRefreshSettings, DbxMapboxStoreBoundRefreshType, DbxMapboxStoreState, FilterMapboxBoundConfig, FilterMapboxBoundReadItemValueFunction, KnownMapboxStyle, MapboxBearing, MapboxEaseTo, MapboxEaseToOptions, MapboxEaseToPositionOptions, MapboxEventData, MapboxFitBounds, MapboxFitBoundsOptions, MapboxFitPositions, MapboxFlyTo, MapboxFlyToOptions, MapboxFlyToPositionOptions, MapboxJumpTo, MapboxJumpToPositionOptions, MapboxMapLifecycleState, MapboxMapMoveState, MapboxMapRotateState, MapboxMapZoomState, MapboxPitch, MapboxResetNorth, MapboxResetNorthPitch, MapboxRotateTo, MapboxSetStyleOptions, MapboxSnapToNorth, MapboxStyleConfig, MapboxTileSize, MapboxViewportBoundFunction, MapboxViewportBoundFunctionConfig, MapboxViewportBoundFunctionInput, MapboxViewportBoundFunctionItem, MapboxViewportBoundFunctionItemValue, MapboxZoomLevel, MapboxZoomLevelRange, ProvideDbxMapboxConfig, StringMapboxListenerPair, TypedMapboxListenerPair };
+export { DEFAULT_DBX_MAPBOX_WORKER_URL, DEFAULT_MAPBOX_CENTER, DEFAULT_MAPBOX_LAYOUT_DRAWER_WIDTH, DEFAULT_MAPBOX_MAP_STORE_TIMER_REFRESH_PERIOD, DEFAULT_MAPBOX_STYLE, DEFAULT_MAPBOX_ZOOM, DbxMapboxChangeService, DbxMapboxConfig, DbxMapboxInjectionComponent, DbxMapboxInjectionStore, DbxMapboxInjectionStoreInjectionBlockDirective, DbxMapboxInjectionStoreProviderBlock, DbxMapboxLayoutComponent, DbxMapboxLayoutDrawerComponent, DbxMapboxLayoutVirtualResizeSyncComponent, DbxMapboxMapDirective, DbxMapboxMapStore, DbxMapboxMapStoreInjectionBlockDirective, DbxMapboxMapStoreProviderBlock, DbxMapboxMarkerComponent, DbxMapboxMarkersComponent, DbxMapboxMenuComponent, DbxMapboxModule, DbxMapboxService, KNOWN_MAPBOX_STYLES, MAPBOX_MAX_ZOOM_LEVEL, MAPBOX_MIN_ZOOM_LEVEL, configureDbxMapboxWorker, dbxMapboxColoredDotStyle, filterByMapboxViewportBound, isDbxMapboxWorkerAssetAvailable, mapboxViewportBoundFunction, mapboxZoomLevel, provideDbxMapbox, provideMapboxInjectionStoreIfParentIsUnavailable, provideMapboxStoreIfParentIsUnavailable, updateDbxMapboxMapInjectionStoreStateWithInjectionConfig, updateDbxMapboxMapInjectionStoreStateWithRemovedKey };
+export type { DbxMapboxClickEvent, DbxMapboxEnvironmentOptions, DbxMapboxInjectionConfig, DbxMapboxInjectionKey, DbxMapboxLayoutMode, DbxMapboxLayoutSide, DbxMapboxMapInjectionStoreState, DbxMapboxMarginCalculationSizing, DbxMapboxMarker, DbxMapboxMarkerDisplayConfig, DbxMapboxMarkerFactory, DbxMapboxMarkerPresentation, DbxMapboxMarkerSize, DbxMapboxOptions, DbxMapboxStoreBoundRefreshSettings, DbxMapboxStoreBoundRefreshType, DbxMapboxStoreState, DbxMapboxWorkerConfig, DbxMapboxWorkerConfigurationResult, FilterMapboxBoundConfig, FilterMapboxBoundReadItemValueFunction, KnownMapboxStyle, MapboxBearing, MapboxEaseTo, MapboxEaseToOptions, MapboxEaseToPositionOptions, MapboxEventData, MapboxFitBounds, MapboxFitBoundsOptions, MapboxFitPositions, MapboxFlyTo, MapboxFlyToOptions, MapboxFlyToPositionOptions, MapboxJumpTo, MapboxJumpToPositionOptions, MapboxMapLifecycleState, MapboxMapMoveState, MapboxMapRotateState, MapboxMapZoomState, MapboxPitch, MapboxResetNorth, MapboxResetNorthPitch, MapboxRotateTo, MapboxSetStyleOptions, MapboxSnapToNorth, MapboxStyleConfig, MapboxTileSize, MapboxViewportBoundFunction, MapboxViewportBoundFunctionConfig, MapboxViewportBoundFunctionInput, MapboxViewportBoundFunctionItem, MapboxViewportBoundFunctionItemValue, MapboxZoomLevel, MapboxZoomLevelRange, ProvideDbxMapboxConfig, StringMapboxListenerPair, TypedMapboxListenerPair };