@dereekb/dbx-web 9.23.20 → 9.23.22

package/fesm2015/dereekb-dbx-web.mjs

@@ -15,7 +15,7 @@ import * as i3 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i2$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import { getValueFromGetter, mergeObjects, splitCommaSeparatedStringToSet, asPromise, objectHasNoKeys, modifier, combineMaps, addModifiers, removeModifiers, applyBestFit, filterMaybeValues, asArray, firstValue, filterUndefinedValues, isMaybeNot, isNotNullOrEmptyString, mapIterable, toReadableError, isDefaultReadableError, build, ServerErrorResponse, UnauthorizedServerErrorResponse, maybeModifierMapToFunction, ModelRelationUtility, encodeModelKeyTypePair, useIterableOrValue } from '@dereekb/util';
+import { getValueFromGetter, mergeObjects, splitCommaSeparatedStringToSet, asPromise, objectHasNoKeys, modifier, combineMaps, addModifiers, removeModifiers, applyBestFit, findNext, filterMaybeValues, asArray, firstValue, filterUndefinedValues, isMaybeNot, isNotNullOrEmptyString, mapIterable, toReadableError, isDefaultReadableError, build, ServerErrorResponse, UnauthorizedServerErrorResponse, maybeModifierMapToFunction, ModelRelationUtility, encodeModelKeyTypePair, useIterableOrValue } from '@dereekb/util';
 import * as i3$1 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i5 from '@angular/material/core';
@@ -1189,6 +1189,12 @@ function dbxColorBackground(color) {
         case 'warn':
             cssClass = 'dbx-warn-bg';
             break;
+        case 'grey':
+            cssClass = 'dbx-grey-bg';
+            break;
+        case 'disabled':
+            cssClass = 'dbx-disabled-bg';
+            break;
     }
     return cssClass;
 }
@@ -2877,6 +2883,7 @@ class DbxNavbarComponent extends AbstractTransitionDirective {
         this._defaultIcon = new BehaviorSubject('menu');
         this._defaultText = new BehaviorSubject(undefined);
         this._inputMode = new BehaviorSubject(undefined);
+        this._buttonMode = new BehaviorSubject('menu');
         this._breakpoint = new BehaviorSubject('large');
         this._anchors = new BehaviorSubject([]);
         this.isBreakpointActive$ = this._dbxScreenMediaService.isBreakpointActive(this._breakpoint);
@@ -2893,9 +2900,12 @@ class DbxNavbarComponent extends AbstractTransitionDirective {
             });
             return applyBestFit(results, (x) => x.selected, (a, b) => this._dbxRouterService.comparePrecision(a.anchor, b.anchor), (nonBestFit) => (Object.assign(Object.assign({}, nonBestFit), { selected: false })));
         }), tapDetectChanges(this.cdRef), shareReplay(1));
+        this.buttonMode$ = this._buttonMode.pipe(distinctUntilChanged(), shareReplay(1));
         this.selectedAnchor$ = this.anchors$.pipe(map((x) => x.find((y) => y.selected)));
+        this.nextRotateAnchor$ = this.anchors$.pipe(map((x) => findNext(x, (y) => y.selected) || x[0]));
         this.hasNoAnchors$ = this.anchors$.pipe(map((x) => x.length === 0), distinctUntilChanged(), shareReplay(1));
-        this.buttonDisplay$ = combineLatest([this._defaultIcon, this._icon, this._defaultText, this.selectedAnchor$, this.mode$]).pipe(map(([defaultIcon, icon, defaultText, selectedAnchor, mode]) => {
+        this.buttonNavAnchor$ = this.buttonMode$.pipe(switchMap((x) => (x === 'menu' ? this.selectedAnchor$ : this.nextRotateAnchor$)), distinctUntilChanged(), shareReplay(1));
+        this.buttonDisplay$ = combineLatest([this._defaultIcon, this._icon, this._defaultText, this.buttonNavAnchor$, this.mode$]).pipe(map(([defaultIcon, icon, defaultText, selectedAnchor, mode]) => {
             var _a;
             let content;
             if (icon) {
@@ -2920,6 +2930,7 @@ class DbxNavbarComponent extends AbstractTransitionDirective {
         this._defaultIcon.complete();
         this._defaultText.complete();
         this._inputMode.complete();
+        this._buttonMode.complete();
         this._breakpoint.complete();
         this._anchors.complete();
     }
@@ -2936,6 +2947,9 @@ class DbxNavbarComponent extends AbstractTransitionDirective {
     set anchors(anchors) {
         this._anchors.next(anchors !== null && anchors !== void 0 ? anchors : []);
     }
+    set buttonMode(mode) {
+        this._buttonMode.next(mode !== null && mode !== void 0 ? mode : 'menu');
+    }
     set mode(mode) {
         this._inputMode.next(mode);
     }
@@ -2944,12 +2958,12 @@ class DbxNavbarComponent extends AbstractTransitionDirective {
     }
 }
 DbxNavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxNavbarComponent, deps: [{ token: i1$2.DbxRouterTransitionService }, { token: i0.ChangeDetectorRef }, { token: DbxScreenMediaService }, { token: i1$2.DbxRouterService }], target: i0.ɵɵFactoryTarget.Component });
-DbxNavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxNavbarComponent, selector: "dbx-navbar", inputs: { navAlign: "navAlign", icon: "icon", defaultIcon: "defaultIcon", defaultText: "defaultText", anchors: "anchors", mode: "mode", breakpoint: "breakpoint" }, host: { classAttribute: "dbx-navbar" }, usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"mode$ | async\">\n  <!-- Button -->\n  <ng-container *ngSwitchDefault>\n    <dbx-icon-button class=\"nav-menu-button\" aria-label=\"open navigation\" [buttonDisplay]=\"buttonDisplay$ | async\" [matMenuTriggerFor]=\"menu\" [disabled]=\"hasNoAnchors$ | async\"></dbx-icon-button>\n    <mat-menu #menu>\n      <dbx-anchor *ngFor=\"let x of anchors$ | async\" [anchor]=\"x.anchor\">\n        <button mat-menu-item [ngClass]=\"x.selected ? 'active' : ''\">\n          <mat-icon *ngIf=\"x.anchor.icon\">{{ x.anchor.icon }}</mat-icon>\n          {{ x.anchor.title }}\n        </button>\n      </dbx-anchor>\n    </mat-menu>\n  </ng-container>\n  <!-- Bar -->\n  <nav *ngSwitchCase=\"'bar'\" mat-tab-nav-bar [attr.mat-align-tabs]=\"navAlign\">\n    <dbx-anchor *ngFor=\"let x of anchors$ | async\" [anchor]=\"x.anchor\">\n      <a mat-tab-link [active]=\"x.selected\">{{ x.anchor.title }}</a>\n    </dbx-anchor>\n  </nav>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: DbxIconButtonComponent, selector: "dbx-icon-button" }, { kind: "component", type: i5$1.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "directive", type: i5$1.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matTabLink"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DbxNavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxNavbarComponent, selector: "dbx-navbar", inputs: { navAlign: "navAlign", icon: "icon", defaultIcon: "defaultIcon", defaultText: "defaultText", anchors: "anchors", buttonMode: "buttonMode", mode: "mode", breakpoint: "breakpoint" }, host: { classAttribute: "dbx-navbar" }, usesInheritance: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"mode$ | async\">\n  <!-- Button -->\n  <ng-container *ngSwitchDefault>\n    <ng-container [ngSwitch]=\"buttonMode$ | async\">\n      <ng-container *ngSwitchCase=\"'menu'\">\n        <dbx-icon-button class=\"nav-menu-button\" aria-label=\"open navigation\" [buttonDisplay]=\"buttonDisplay$ | async\" [matMenuTriggerFor]=\"menu\" [disabled]=\"hasNoAnchors$ | async\"></dbx-icon-button>\n        <mat-menu #menu>\n          <dbx-anchor *ngFor=\"let x of anchors$ | async\" [anchor]=\"x.anchor\">\n            <button mat-menu-item [ngClass]=\"x.selected ? 'active' : ''\">\n              <mat-icon *ngIf=\"x.anchor.icon\">{{ x.anchor.icon }}</mat-icon>\n              {{ x.anchor.title }}\n            </button>\n          </dbx-anchor>\n        </mat-menu>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'rotate'\">\n        <dbx-anchor [anchor]=\"(nextRotateAnchor$ | async)?.anchor\">\n          <dbx-icon-button class=\"nav-menu-button\" aria-label=\"open navigation\" [buttonDisplay]=\"buttonDisplay$ | async\" [disabled]=\"hasNoAnchors$ | async\"></dbx-icon-button>\n        </dbx-anchor>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n  <!-- Bar -->\n  <nav *ngSwitchCase=\"'bar'\" mat-tab-nav-bar [attr.mat-align-tabs]=\"navAlign\">\n    <dbx-anchor *ngFor=\"let x of anchors$ | async\" [anchor]=\"x.anchor\">\n      <a mat-tab-link [active]=\"x.selected\">{{ x.anchor.title }}</a>\n    </dbx-anchor>\n  </nav>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: DbxIconButtonComponent, selector: "dbx-icon-button" }, { kind: "component", type: i5$1.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "directive", type: i5$1.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matTabLink"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxNavbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-navbar', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'dbx-navbar'
-                    }, template: "<ng-container [ngSwitch]=\"mode$ | async\">\n  <!-- Button -->\n  <ng-container *ngSwitchDefault>\n    <dbx-icon-button class=\"nav-menu-button\" aria-label=\"open navigation\" [buttonDisplay]=\"buttonDisplay$ | async\" [matMenuTriggerFor]=\"menu\" [disabled]=\"hasNoAnchors$ | async\"></dbx-icon-button>\n    <mat-menu #menu>\n      <dbx-anchor *ngFor=\"let x of anchors$ | async\" [anchor]=\"x.anchor\">\n        <button mat-menu-item [ngClass]=\"x.selected ? 'active' : ''\">\n          <mat-icon *ngIf=\"x.anchor.icon\">{{ x.anchor.icon }}</mat-icon>\n          {{ x.anchor.title }}\n        </button>\n      </dbx-anchor>\n    </mat-menu>\n  </ng-container>\n  <!-- Bar -->\n  <nav *ngSwitchCase=\"'bar'\" mat-tab-nav-bar [attr.mat-align-tabs]=\"navAlign\">\n    <dbx-anchor *ngFor=\"let x of anchors$ | async\" [anchor]=\"x.anchor\">\n      <a mat-tab-link [active]=\"x.selected\">{{ x.anchor.title }}</a>\n    </dbx-anchor>\n  </nav>\n</ng-container>\n" }]
+                    }, template: "<ng-container [ngSwitch]=\"mode$ | async\">\n  <!-- Button -->\n  <ng-container *ngSwitchDefault>\n    <ng-container [ngSwitch]=\"buttonMode$ | async\">\n      <ng-container *ngSwitchCase=\"'menu'\">\n        <dbx-icon-button class=\"nav-menu-button\" aria-label=\"open navigation\" [buttonDisplay]=\"buttonDisplay$ | async\" [matMenuTriggerFor]=\"menu\" [disabled]=\"hasNoAnchors$ | async\"></dbx-icon-button>\n        <mat-menu #menu>\n          <dbx-anchor *ngFor=\"let x of anchors$ | async\" [anchor]=\"x.anchor\">\n            <button mat-menu-item [ngClass]=\"x.selected ? 'active' : ''\">\n              <mat-icon *ngIf=\"x.anchor.icon\">{{ x.anchor.icon }}</mat-icon>\n              {{ x.anchor.title }}\n            </button>\n          </dbx-anchor>\n        </mat-menu>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'rotate'\">\n        <dbx-anchor [anchor]=\"(nextRotateAnchor$ | async)?.anchor\">\n          <dbx-icon-button class=\"nav-menu-button\" aria-label=\"open navigation\" [buttonDisplay]=\"buttonDisplay$ | async\" [disabled]=\"hasNoAnchors$ | async\"></dbx-icon-button>\n        </dbx-anchor>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n  <!-- Bar -->\n  <nav *ngSwitchCase=\"'bar'\" mat-tab-nav-bar [attr.mat-align-tabs]=\"navAlign\">\n    <dbx-anchor *ngFor=\"let x of anchors$ | async\" [anchor]=\"x.anchor\">\n      <a mat-tab-link [active]=\"x.selected\">{{ x.anchor.title }}</a>\n    </dbx-anchor>\n  </nav>\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: i1$2.DbxRouterTransitionService }, { type: i0.ChangeDetectorRef }, { type: DbxScreenMediaService }, { type: i1$2.DbxRouterService }]; }, propDecorators: { navAlign: [{
                 type: Input
             }], icon: [{
@@ -2960,6 +2974,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Input
             }], anchors: [{
                 type: Input
+            }], buttonMode: [{
+                type: Input
             }], mode: [{
                 type: Input
             }], breakpoint: [{