@dereekb/dbx-web 9.15.7 → 9.16.0

package/lib/interaction/filter/filter.module.d.ts

@@ -2,14 +2,20 @@ import * as i0 from "@angular/core";
 import * as i1 from "./filter.popover.component";
 import * as i2 from "./filter.popover.button.component";
 import * as i3 from "./filter.wrapper.component";
-import * as i4 from "@angular/common";
-import * as i5 from "../popover/popover.module";
-import * as i6 from "@dereekb/dbx-core";
-import * as i7 from "@angular/flex-layout";
-import * as i8 from "@angular/material/icon";
-import * as i9 from "@angular/material/button";
+import * as i4 from "./filter.preset.list.component";
+import * as i5 from "./filter.preset.menu.component";
+import * as i6 from "@angular/common";
+import * as i7 from "../popover/popover.module";
+import * as i8 from "@dereekb/dbx-core";
+import * as i9 from "../../button/button.module";
+import * as i10 from "../../router/layout/anchor/anchor.module";
+import * as i11 from "../../router/layout/anchorlist/anchorlist.module";
+import * as i12 from "@angular/flex-layout";
+import * as i13 from "@angular/material/menu";
+import * as i14 from "@angular/material/icon";
+import * as i15 from "@angular/material/button";
 export declare class DbxFilterInteractionModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFilterInteractionModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFilterInteractionModule, [typeof i1.DbxFilterPopoverComponent, typeof i2.DbxFilterPopoverButtonComponent, typeof i3.DbxFilterWrapperComponent], [typeof i4.CommonModule, typeof i5.DbxPopoverInteractionModule, typeof i6.DbxCoreFilterModule, typeof i6.DbxInjectionComponentModule, typeof i7.FlexLayoutModule, typeof i8.MatIconModule, typeof i9.MatButtonModule], [typeof i6.DbxCoreFilterModule, typeof i2.DbxFilterPopoverButtonComponent, typeof i3.DbxFilterWrapperComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFilterInteractionModule, [typeof i1.DbxFilterPopoverComponent, typeof i2.DbxFilterPopoverButtonComponent, typeof i3.DbxFilterWrapperComponent, typeof i4.DbxPresetFilterListComponent, typeof i5.DbxPresetFilterMenuComponent], [typeof i6.CommonModule, typeof i7.DbxPopoverInteractionModule, typeof i8.DbxCoreFilterModule, typeof i9.DbxButtonModule, typeof i10.DbxRouterAnchorModule, typeof i11.DbxRouterAnchorListModule, typeof i8.DbxInjectionComponentModule, typeof i12.FlexLayoutModule, typeof i13.MatMenuModule, typeof i14.MatIconModule, typeof i15.MatButtonModule], [typeof i8.DbxCoreFilterModule, typeof i2.DbxFilterPopoverButtonComponent, typeof i3.DbxFilterWrapperComponent, typeof i4.DbxPresetFilterListComponent, typeof i5.DbxPresetFilterMenuComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxFilterInteractionModule>;
 }

package/lib/interaction/filter/filter.popover.button.component.d.ts

@@ -1,7 +1,7 @@
 import { ElementRef } from '@angular/core';
 import { AbstractFilterPopoverButtonDirective } from './filter.popover.button.directive';
 import * as i0 from "@angular/core";
-export declare class DbxFilterPopoverButtonComponent<F = object> extends AbstractFilterPopoverButtonDirective<F> {
+export declare class DbxFilterPopoverButtonComponent<F extends object = object> extends AbstractFilterPopoverButtonDirective<F> {
     buttonElement: ElementRef;
     showFilterPopover(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxFilterPopoverButtonComponent<any>, never>;

package/lib/interaction/filter/filter.popover.button.directive.d.ts

@@ -3,8 +3,8 @@ import { DbxPopoverService } from '../popover/popover.service';
 import { AbstractSubscriptionDirective } from '@dereekb/dbx-core';
 import { DbxFilterComponentParams } from './filter.popover.component';
 import * as i0 from "@angular/core";
-export declare type DbxFilterButtonConfig<F> = DbxFilterComponentParams<F>;
-export declare abstract class AbstractFilterPopoverButtonDirective<F> extends AbstractSubscriptionDirective {
+export declare type DbxFilterButtonConfig<F extends object> = DbxFilterComponentParams<F>;
+export declare abstract class AbstractFilterPopoverButtonDirective<F extends object> extends AbstractSubscriptionDirective {
     private readonly popupService;
     config?: DbxFilterButtonConfig<F>;
     private _popoverRef?;

package/lib/interaction/filter/filter.popover.component.d.ts

@@ -8,7 +8,7 @@ import { DbxPopoverService } from '../popover/popover.service';
 import { FilterSource, FilterSourceConnector, PresetFilterSource } from '@dereekb/rxjs';
 import { DbxPopoverKey } from '../popover/popover';
 import * as i0 from "@angular/core";
-export interface DbxFilterComponentParams<F = object> {
+export interface DbxFilterComponentParams<F extends object = object, P extends string = string> {
     /**
      * Custom filter component to initialize.
      */
@@ -16,7 +16,7 @@ export interface DbxFilterComponentParams<F = object> {
     /**
      * Preset filter component to initialize.
      */
-    presetFilterComponentClass?: Type<PresetFilterSource<F>>;
+    presetFilterComponentClass?: Type<PresetFilterSource<F, P>>;
     /**
      * The connector to use.
      */
@@ -25,15 +25,22 @@ export interface DbxFilterComponentParams<F = object> {
      * (Optional) Inital filter to pass to the filter source.
      */
     initialFilterObs?: Observable<F>;
+    /**
+     * (Optional) Whether or not to close the component if the filter changes.
+     *
+     * True by default.
+     */
+    closeOnFilterChange?: boolean;
 }
-export interface DbxFilterPopoverComponentParams<F = object> extends DbxFilterComponentParams<F> {
+export interface DbxFilterPopoverComponentParams<F extends object = object> extends DbxFilterComponentParams<F> {
     /**
      * Origin to add the popover to.
      */
     origin: ElementRef;
 }
 export declare const DEFAULT_FILTER_POPOVER_KEY = "filter";
-export declare class DbxFilterPopoverComponent<F> extends AbstractPopoverDirective<unknown, DbxFilterComponentParams<F>> implements OnInit, OnDestroy {
+export declare class DbxFilterPopoverComponent<F extends object> extends AbstractPopoverDirective<unknown, DbxFilterComponentParams<F>> implements OnInit, OnDestroy {
+    private _closeOnChangeSub;
     /**
      * Whether or not to display buttons to toggle between custom and preset filters.
      */
@@ -41,7 +48,7 @@ export declare class DbxFilterPopoverComponent<F> extends AbstractPopoverDirecti
     private _showPreset;
     readonly showPreset$: Observable<boolean>;
     readonly config$: Observable<DbxInjectionComponentConfig<FilterSource<F>>>;
-    static openPopover<F>(popupService: DbxPopoverService, { origin, initialFilterObs: inputSource, connector, customFilterComponentClass, presetFilterComponentClass }: DbxFilterPopoverComponentParams<F>, popoverKey?: DbxPopoverKey): NgPopoverRef;
+    static openPopover<F extends object>(popupService: DbxPopoverService, { origin, initialFilterObs: inputSource, connector, customFilterComponentClass, presetFilterComponentClass }: DbxFilterPopoverComponentParams<F>, popoverKey?: DbxPopoverKey): NgPopoverRef;
     constructor(popover: DbxPopoverComponent<unknown, DbxFilterComponentParams<F>>);
     get config(): DbxFilterComponentParams<F>;
     ngOnInit(): void;

package/lib/interaction/filter/filter.preset.d.ts

@@ -0,0 +1,24 @@
+import { Observable } from 'rxjs';
+import { OnDestroy } from '@angular/core';
+import { ClickableFilterPreset, ClickableAnchorLink, FilterSourceDirective } from '@dereekb/dbx-core';
+import { Maybe } from '@dereekb/util';
+import { FilterWithPreset } from '@dereekb/rxjs';
+import * as i0 from "@angular/core";
+/**
+ * Displays a button and menu for filtering presets.
+ */
+export declare abstract class AbstractDbxPresetFilterMenuComponent<F extends FilterWithPreset> implements OnDestroy {
+    readonly filterSourceDirective: FilterSourceDirective<F>;
+    private _presets;
+    readonly selected$: Observable<Maybe<F>>;
+    readonly selectedPresetString$: Observable<Maybe<string>>;
+    readonly presetAnchors$: Observable<ClickableAnchorLink[]>;
+    readonly selectedPreset$: Observable<Maybe<ClickableFilterPreset<F>>>;
+    get presets(): ClickableFilterPreset<F>[];
+    set presets(presets: ClickableFilterPreset<F>[]);
+    constructor(filterSourceDirective: FilterSourceDirective<F>);
+    selectPreset(preset: ClickableFilterPreset<F>): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AbstractDbxPresetFilterMenuComponent<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractDbxPresetFilterMenuComponent<any>, never, never, { "presets": "presets"; }, {}, never, never, false>;
+}

package/lib/interaction/filter/filter.preset.list.component.d.ts

@@ -0,0 +1,7 @@
+import { FilterWithPreset } from '@dereekb/rxjs';
+import { AbstractDbxPresetFilterMenuComponent } from './filter.preset';
+import * as i0 from "@angular/core";
+export declare class DbxPresetFilterListComponent<F extends FilterWithPreset> extends AbstractDbxPresetFilterMenuComponent<F> {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxPresetFilterListComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxPresetFilterListComponent<any>, "dbx-preset-filter-list", never, {}, {}, never, never, false>;
+}

package/lib/interaction/filter/filter.preset.menu.component.d.ts

@@ -0,0 +1,28 @@
+import { Observable } from 'rxjs';
+import { FilterWithPreset } from '@dereekb/rxjs';
+import { AbstractDbxPresetFilterMenuComponent } from './filter.preset';
+import * as i0 from "@angular/core";
+export interface DbxPresetFilterMenuConfig {
+    unknownSelectionText?: string;
+    /**
+     * The icon to use for the filter, or false if no icon should be shown.
+     */
+    filterIcon?: string | false;
+    /**
+     * Whether or not to use the preset's icon if one is defined. If filterIcon is false, the icon will only appear when an item is selected.
+     */
+    usePresetIcon?: boolean;
+}
+/**
+ * Displays a button and menu for filtering presets.
+ */
+export declare class DbxPresetFilterMenuComponent<F extends FilterWithPreset> extends AbstractDbxPresetFilterMenuComponent<F> {
+    private _config;
+    readonly buttonText$: Observable<string>;
+    readonly buttonIcon$: Observable<string | undefined>;
+    get config(): DbxPresetFilterMenuConfig;
+    set config(config: DbxPresetFilterMenuConfig);
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxPresetFilterMenuComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxPresetFilterMenuComponent<any>, "dbx-preset-filter-menu", never, { "config": "config"; }, {}, never, never, false>;
+}

package/lib/interaction/filter/filter.wrapper.component.d.ts

@@ -1,14 +1,18 @@
-import { EventEmitter } from '@angular/core';
+import { AbstractDbxActionHandlerDirective, DbxActionContextStoreSourceInstance, FilterSourceDirective } from '@dereekb/dbx-core';
 import * as i0 from "@angular/core";
 /**
- * Used for adding a reset and filter button to a form.
+ * Action component used to simplify creating a filter form.
+ *
+ * Provides a DbxAction and configures the action to set the filter on a FilterSourceDirective when triggered.
  */
-export declare class DbxFilterWrapperComponent {
-    modified?: boolean;
-    readonly applyFilter: EventEmitter<any>;
-    readonly resetFilter: EventEmitter<any>;
-    filterClicked(): void;
-    resetClicked(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFilterWrapperComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFilterWrapperComponent, "dbx-filter-wrapper", never, { "modified": "modified"; }, { "applyFilter": "applyFilter"; "resetFilter": "resetFilter"; }, never, ["*"], false>;
+export declare class DbxFilterWrapperComponent<F = unknown> extends AbstractDbxActionHandlerDirective<F> {
+    readonly filterSourceDirective: FilterSourceDirective<F>;
+    applyRaised: boolean;
+    applyIcon: string;
+    applyText: string;
+    constructor(source: DbxActionContextStoreSourceInstance<F>, filterSourceDirective: FilterSourceDirective<F>);
+    applyFilter(): void;
+    resetFilter(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFilterWrapperComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFilterWrapperComponent<any>, "dbx-filter-wrapper", never, { "applyRaised": "applyRaised"; "applyIcon": "applyIcon"; "applyText": "applyText"; }, {}, never, ["*"], false>;
 }

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

@@ -3,3 +3,5 @@ export * from './filter.popover.button.component';
 export * from './filter.popover.button.directive';
 export * from './filter.popover.component';
 export * from './filter.wrapper.component';
+export * from './filter.preset.list.component';
+export * from './filter.preset.menu.component';

package/lib/layout/column/two/index.d.ts

@@ -7,3 +7,4 @@ export * from './two.column.module';
 export * from './two.column.right.component';
 export * from './two.column.sref.directive';
 export * from './two.column.store';
+export * from './two.column.sref.showright.directive';

package/lib/layout/column/two/two.column.module.d.ts

@@ -6,14 +6,15 @@ import * as i4 from "./two.column.sref.directive";
 import * as i5 from "./two.column.back.directive";
 import * as i6 from "./two.column.full.left.directive";
 import * as i7 from "./two.column.context.directive";
-import * as i8 from "@angular/common";
-import * as i9 from "@angular/material/icon";
-import * as i10 from "@angular/material/button";
-import * as i11 from "../../../router/layout/anchor/anchor.module";
-import * as i12 from "../../content/content.layout.module";
-import * as i13 from "angular-resize-event";
+import * as i8 from "./two.column.sref.showright.directive";
+import * as i9 from "@angular/common";
+import * as i10 from "@angular/material/icon";
+import * as i11 from "@angular/material/button";
+import * as i12 from "../../../router/layout/anchor/anchor.module";
+import * as i13 from "../../content/content.layout.module";
+import * as i14 from "angular-resize-event";
 export declare class DbxTwoColumnLayoutModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxTwoColumnLayoutModule, [typeof i1.DbxTwoColumnComponent, typeof i2.DbxTwoColumnRightComponent, typeof i3.DbxTwoColumnColumnHeadComponent, typeof i4.DbxTwoColumnSrefDirective, typeof i5.DbxTwoColumnBackDirective, typeof i6.DbxTwoColumnFullLeftDirective, typeof i7.DbxTwoColumnContextDirective], [typeof i8.CommonModule, typeof i9.MatIconModule, typeof i10.MatButtonModule, typeof i11.DbxRouterAnchorModule, typeof i12.DbxContentLayoutModule, typeof i13.AngularResizeEventModule], [typeof i1.DbxTwoColumnComponent, typeof i2.DbxTwoColumnRightComponent, typeof i3.DbxTwoColumnColumnHeadComponent, typeof i4.DbxTwoColumnSrefDirective, typeof i5.DbxTwoColumnBackDirective, typeof i6.DbxTwoColumnFullLeftDirective, typeof i7.DbxTwoColumnContextDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxTwoColumnLayoutModule, [typeof i1.DbxTwoColumnComponent, typeof i2.DbxTwoColumnRightComponent, typeof i3.DbxTwoColumnColumnHeadComponent, typeof i4.DbxTwoColumnSrefDirective, typeof i5.DbxTwoColumnBackDirective, typeof i6.DbxTwoColumnFullLeftDirective, typeof i7.DbxTwoColumnContextDirective, typeof i8.DbxTwoColumnSrefShowRightDirective], [typeof i9.CommonModule, typeof i10.MatIconModule, typeof i11.MatButtonModule, typeof i12.DbxRouterAnchorModule, typeof i13.DbxContentLayoutModule, typeof i14.AngularResizeEventModule], [typeof i1.DbxTwoColumnComponent, typeof i2.DbxTwoColumnRightComponent, typeof i3.DbxTwoColumnColumnHeadComponent, typeof i4.DbxTwoColumnSrefDirective, typeof i5.DbxTwoColumnBackDirective, typeof i6.DbxTwoColumnFullLeftDirective, typeof i7.DbxTwoColumnContextDirective, typeof i8.DbxTwoColumnSrefShowRightDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DbxTwoColumnLayoutModule>;
 }

package/lib/layout/column/two/two.column.sref.showright.directive.d.ts

@@ -0,0 +1,16 @@
+import { OnInit, OnDestroy } from '@angular/core';
+import { AbstractSubscriptionDirective, DbxRouterService } from '@dereekb/dbx-core';
+import { TwoColumnsContextStore } from './two.column.store';
+import * as i0 from "@angular/core";
+/**
+ * Used with a DbxTwoColumnComponent to control showing right when the current route is a child of the backRef.
+ */
+export declare class DbxTwoColumnSrefShowRightDirective extends AbstractSubscriptionDirective implements OnInit, OnDestroy {
+    private readonly _twoColumnsContextStore;
+    private readonly _dbxRouterService;
+    readonly showRight$: import("rxjs").Observable<boolean>;
+    constructor(_twoColumnsContextStore: TwoColumnsContextStore, _dbxRouterService: DbxRouterService);
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnSrefShowRightDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxTwoColumnSrefShowRightDirective, "[dbxTwoColumnSrefShowRight]", never, {}, {}, never, never, false>;
+}

package/lib/router/layout/anchor/_anchor.scss

@@ -4,7 +4,7 @@
 
 // MARK: Mixin
 @mixin core() {
-  .dbx-anchor a {
+  a.dbx-anchor-a {
     color: inherit;
     text-decoration: none;
 
@@ -43,5 +43,15 @@
 
 @mixin theme($theme-config) {
   @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-router-anchor') {
+    $color: theming.get-color-config($theme-config);
+    $typography: theming.get-typography-config($theme-config);
+
+    @if $color !=null {
+      @include color($theme-config);
+    }
+
+    @if $typography !=null {
+      @include typography($typography);
+    }
   }
 }

package/lib/router/layout/anchor/anchor.component.d.ts

@@ -15,6 +15,7 @@ export declare class DbxAnchorComponent extends AbstractDbxAnchorDirective imple
     set templateRef(templateRef: Maybe<TemplateRef<unknown>>);
     readonly url$: import("rxjs").Observable<string | undefined>;
     readonly target$: import("rxjs").Observable<string | undefined>;
+    readonly selectedClass$: import("rxjs").Observable<"" | "dbx-anchor-selected">;
     constructor(dbNgxRouterWebProviderConfig: DbxRouterWebProviderConfig);
     ngOnDestroy(): void;
     get srefAnchorConfig(): DbxInjectionComponentConfig;

package/lib/router/layout/anchorlist/_anchorlist.scss

@@ -13,11 +13,16 @@ $active-child-item-left-padding: 5px;
 
 @mixin color($theme-config) {
   $color-config: theming.get-color-config($theme-config);
+  $foreground: map.get($color-config, 'foreground');
+  $primary: map.get($color-config, 'primary');
+
   $background: map.get($color-config, 'background');
   $background-hover-color: theming.get-color-from-palette($background, 'hover');
   $background-disabled-color: theming.get-color-from-palette($background, 'contrast');
 
   .dbx-anchor-list.mat-nav-list {
+    padding-top: 0;
+
     // MARK: Muting
     // items that are not active are muted
     .mat-list-item {
@@ -36,6 +41,14 @@ $active-child-item-left-padding: 5px;
       }
     }
 
+    // selected
+    .dbx-anchor-selected {
+      .mat-list-item {
+        opacity: 1;
+        background: color.scale($color: $background-hover-color, $alpha: 10%);
+      }
+    }
+
     // active route
     .dbx-anchor-active-eq {
       .mat-list-item {

package/mapbox/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@dereekb/dbx-web/mapbox",
-  "version": "9.15.7",
+  "version": "9.16.0",
   "peerDependencies": {
     "@angular/common": "^14.1.0",
     "@angular/core": "^14.1.0",
-    "@dereekb/dbx-core": "9.15.7",
-    "@dereekb/dbx-web": "9.15.7",
+    "@dereekb/dbx-core": "9.16.0",
+    "@dereekb/dbx-web": "9.16.0",
     "ngx-mapbox-gl": "^9.1.0",
     "mapbox-gl": "^2.9.2",
     "@mapbox/geo-viewport": "git+https://git@github.com/dereekb/geo-viewport#165513972f87dca23a20c177f4d173edc51b5e2f"

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@dereekb/dbx-web",
-  "version": "9.15.7",
+  "version": "9.16.0",
   "peerDependencies": {
     "@angular/common": "^14.0.0",
     "@angular/core": "^14.0.0",
     "linkify-string": "4.0.0-beta.5",
     "linkifyjs": "^4.0.0-beta.5",
     "@angular/material": "^14.0.0",
-    "@dereekb/rxjs": "9.15.7",
-    "@dereekb/dbx-core": "9.15.7",
+    "@dereekb/rxjs": "9.16.0",
+    "@dereekb/dbx-core": "9.16.0",
     "angular-calendar": "^0.30.1",
     "@angular/flex-layout": "^14.0.0-beta.40",
     "ng-overlay-container": "^14.0.0",