@dereekb/dbx-web 13.42.0 → 14.0.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/package.json

@@ -1,30 +1,30 @@
 {
   "name": "@dereekb/dbx-web",
-  "version": "13.42.0",
+  "version": "14.0.0",
   "sideEffects": [
     "*.scss",
     "*.css"
   ],
   "peerDependencies": {
-    "@angular/cdk": "^21.2.9",
-    "@angular/common": "21.2.11",
-    "@angular/core": "21.2.11",
-    "@angular/forms": "21.2.11",
-    "@angular/material": "^21.2.9",
-    "@angular/platform-browser": "21.2.11",
+    "@angular/cdk": "^22.1.4",
+    "@angular/common": "22.1.4",
+    "@angular/core": "22.1.4",
+    "@angular/forms": "22.1.4",
+    "@angular/material": "^22.1.4",
+    "@angular/platform-browser": "22.1.4",
     "@cantoo/pdf-lib": "^2.6.5",
-    "@dereekb/browser": "13.42.0",
-    "@dereekb/date": "13.42.0",
-    "@dereekb/dbx-core": "13.42.0",
-    "@dereekb/rxjs": "13.42.0",
-    "@dereekb/util": "13.42.0",
-    "@dereekb/vitest": "13.42.0",
-    "@ngbracket/ngx-layout": "^21.0.0",
-    "@ngrx/component-store": "^21.1.0",
-    "@ngrx/effects": "^21.1.0",
-    "@ngrx/store": "^21.1.0",
+    "@dereekb/browser": "14.0.0",
+    "@dereekb/date": "14.0.0",
+    "@dereekb/dbx-core": "14.0.0",
+    "@dereekb/rxjs": "14.0.0",
+    "@dereekb/util": "14.0.0",
+    "@dereekb/vitest": "14.0.0",
+    "@ngbracket/ngx-layout": "^22.0.1",
+    "@ngrx/component-store": "^22.0.0",
+    "@ngrx/effects": "^22.0.0",
+    "@ngrx/store": "^22.0.0",
     "@placemarkio/geo-viewport": "^1.0.2",
-    "@uirouter/angular": "21.0.0",
+    "@uirouter/angular": "22.0.0",
     "@uirouter/core": "^6.1.2",
     "@zip.js/zip.js": "^2.8.26",
     "angular-calendar": "^0.32.2",
@@ -32,8 +32,8 @@
     "date-fns": "^4.1.0",
     "linkify-string": "^4.3.2",
     "mapbox-gl": "^3.22.0",
-    "ng-overlay-container": "^21.0.1",
-    "ngx-infinite-scroll": "^21.0.0",
+    "ng-overlay-container": "^22.0.1",
+    "ngx-infinite-scroll": "^22.0.0",
     "ngx-mapbox-gl": "git+https://git@github.com/dereekb/ngx-mapbox-gl#3f1d25b0661bc48abbd415dc79ca7f66568bae2e",
     "rxjs": "^7.8.2"
   },

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

@@ -862,10 +862,6 @@ declare function provideDbxMapbox(config: ProvideDbxMapboxConfig): EnvironmentPr
 interface DbxMapboxEnvironmentOptions extends DbxMapboxConfig {
     readonly token: string;
 }
-/**
- * @deprecated use DbxMapboxEnvironmentOptions instead.
- */
-type DbxMapboxOptions = DbxMapboxEnvironmentOptions;
 
 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 };
+export type { DbxMapboxClickEvent, DbxMapboxEnvironmentOptions, DbxMapboxInjectionConfig, DbxMapboxInjectionKey, DbxMapboxLayoutMode, DbxMapboxLayoutSide, DbxMapboxMapInjectionStoreState, DbxMapboxMarginCalculationSizing, DbxMapboxMarker, DbxMapboxMarkerDisplayConfig, DbxMapboxMarkerFactory, DbxMapboxMarkerPresentation, DbxMapboxMarkerSize, 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 };