@dereekb/dbx-web 9.23.20 → 9.23.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/calendar/package.json +3 -3
- package/esm2020/lib/layout/style/style.mjs +7 -1
- package/esm2020/lib/router/layout/navbar/navbar.component.mjs +16 -6
- package/fesm2015/dereekb-dbx-web.mjs +20 -4
- package/fesm2015/dereekb-dbx-web.mjs.map +1 -1
- package/fesm2020/dereekb-dbx-web.mjs +20 -4
- package/fesm2020/dereekb-dbx-web.mjs.map +1 -1
- package/lib/layout/style/_style.scss +25 -0
- package/lib/layout/style/style.d.ts +1 -1
- package/lib/layout/text/_text.scss +5 -0
- package/lib/router/layout/navbar/navbar.component.d.ts +7 -1
- package/mapbox/package.json +3 -3
- package/package.json +3 -3
- package/table/package.json +3 -3
|
@@ -15,7 +15,7 @@ import * as i3 from '@angular/material/progress-spinner';
|
|
|
15
15
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
16
16
|
import * as i2$1 from '@angular/material/icon';
|
|
17
17
|
import { MatIconModule } from '@angular/material/icon';
|
|
18
|
-
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';
|
|
18
|
+
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';
|
|
19
19
|
import * as i3$1 from '@angular/material/progress-bar';
|
|
20
20
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
21
21
|
import * as i5 from '@angular/material/core';
|
|
@@ -1184,6 +1184,12 @@ function dbxColorBackground(color) {
|
|
|
1184
1184
|
case 'warn':
|
|
1185
1185
|
cssClass = 'dbx-warn-bg';
|
|
1186
1186
|
break;
|
|
1187
|
+
case 'grey':
|
|
1188
|
+
cssClass = 'dbx-grey-bg';
|
|
1189
|
+
break;
|
|
1190
|
+
case 'disabled':
|
|
1191
|
+
cssClass = 'dbx-disabled-bg';
|
|
1192
|
+
break;
|
|
1187
1193
|
}
|
|
1188
1194
|
return cssClass;
|
|
1189
1195
|
}
|
|
@@ -2871,6 +2877,7 @@ class DbxNavbarComponent extends AbstractTransitionDirective {
|
|
|
2871
2877
|
this._defaultIcon = new BehaviorSubject('menu');
|
|
2872
2878
|
this._defaultText = new BehaviorSubject(undefined);
|
|
2873
2879
|
this._inputMode = new BehaviorSubject(undefined);
|
|
2880
|
+
this._buttonMode = new BehaviorSubject('menu');
|
|
2874
2881
|
this._breakpoint = new BehaviorSubject('large');
|
|
2875
2882
|
this._anchors = new BehaviorSubject([]);
|
|
2876
2883
|
this.isBreakpointActive$ = this._dbxScreenMediaService.isBreakpointActive(this._breakpoint);
|
|
@@ -2887,9 +2894,12 @@ class DbxNavbarComponent extends AbstractTransitionDirective {
|
|
|
2887
2894
|
});
|
|
2888
2895
|
return applyBestFit(results, (x) => x.selected, (a, b) => this._dbxRouterService.comparePrecision(a.anchor, b.anchor), (nonBestFit) => ({ ...nonBestFit, selected: false }));
|
|
2889
2896
|
}), tapDetectChanges(this.cdRef), shareReplay(1));
|
|
2897
|
+
this.buttonMode$ = this._buttonMode.pipe(distinctUntilChanged(), shareReplay(1));
|
|
2890
2898
|
this.selectedAnchor$ = this.anchors$.pipe(map((x) => x.find((y) => y.selected)));
|
|
2899
|
+
this.nextRotateAnchor$ = this.anchors$.pipe(map((x) => findNext(x, (y) => y.selected) || x[0]));
|
|
2891
2900
|
this.hasNoAnchors$ = this.anchors$.pipe(map((x) => x.length === 0), distinctUntilChanged(), shareReplay(1));
|
|
2892
|
-
this.
|
|
2901
|
+
this.buttonNavAnchor$ = this.buttonMode$.pipe(switchMap((x) => (x === 'menu' ? this.selectedAnchor$ : this.nextRotateAnchor$)), distinctUntilChanged(), shareReplay(1));
|
|
2902
|
+
this.buttonDisplay$ = combineLatest([this._defaultIcon, this._icon, this._defaultText, this.buttonNavAnchor$, this.mode$]).pipe(map(([defaultIcon, icon, defaultText, selectedAnchor, mode]) => {
|
|
2893
2903
|
let content;
|
|
2894
2904
|
if (icon) {
|
|
2895
2905
|
content = { icon, text: defaultText };
|
|
@@ -2913,6 +2923,7 @@ class DbxNavbarComponent extends AbstractTransitionDirective {
|
|
|
2913
2923
|
this._defaultIcon.complete();
|
|
2914
2924
|
this._defaultText.complete();
|
|
2915
2925
|
this._inputMode.complete();
|
|
2926
|
+
this._buttonMode.complete();
|
|
2916
2927
|
this._breakpoint.complete();
|
|
2917
2928
|
this._anchors.complete();
|
|
2918
2929
|
}
|
|
@@ -2929,6 +2940,9 @@ class DbxNavbarComponent extends AbstractTransitionDirective {
|
|
|
2929
2940
|
set anchors(anchors) {
|
|
2930
2941
|
this._anchors.next(anchors ?? []);
|
|
2931
2942
|
}
|
|
2943
|
+
set buttonMode(mode) {
|
|
2944
|
+
this._buttonMode.next(mode ?? 'menu');
|
|
2945
|
+
}
|
|
2932
2946
|
set mode(mode) {
|
|
2933
2947
|
this._inputMode.next(mode);
|
|
2934
2948
|
}
|
|
@@ -2937,12 +2951,12 @@ class DbxNavbarComponent extends AbstractTransitionDirective {
|
|
|
2937
2951
|
}
|
|
2938
2952
|
}
|
|
2939
2953
|
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 });
|
|
2940
|
-
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
|
|
2954
|
+
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 });
|
|
2941
2955
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxNavbarComponent, decorators: [{
|
|
2942
2956
|
type: Component,
|
|
2943
2957
|
args: [{ selector: 'dbx-navbar', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2944
2958
|
class: 'dbx-navbar'
|
|
2945
|
-
}, 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
|
|
2959
|
+
}, 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" }]
|
|
2946
2960
|
}], ctorParameters: function () { return [{ type: i1$2.DbxRouterTransitionService }, { type: i0.ChangeDetectorRef }, { type: DbxScreenMediaService }, { type: i1$2.DbxRouterService }]; }, propDecorators: { navAlign: [{
|
|
2947
2961
|
type: Input
|
|
2948
2962
|
}], icon: [{
|
|
@@ -2953,6 +2967,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
2953
2967
|
type: Input
|
|
2954
2968
|
}], anchors: [{
|
|
2955
2969
|
type: Input
|
|
2970
|
+
}], buttonMode: [{
|
|
2971
|
+
type: Input
|
|
2956
2972
|
}], mode: [{
|
|
2957
2973
|
type: Input
|
|
2958
2974
|
}], breakpoint: [{
|