@dereekb/dbx-web 9.24.38 → 9.24.40
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 +2 -2
- package/esm2020/lib/button/button.component.mjs +3 -3
- package/esm2020/lib/button/icon/icon.button.component.mjs +17 -4
- package/esm2020/lib/router/layout/navbar/navbar.component.mjs +11 -4
- package/fesm2015/dereekb-dbx-web.mjs +28 -8
- package/fesm2015/dereekb-dbx-web.mjs.map +1 -1
- package/fesm2020/dereekb-dbx-web.mjs +28 -8
- package/fesm2020/dereekb-dbx-web.mjs.map +1 -1
- package/lib/button/_button.scss +29 -0
- package/lib/button/icon/icon.button.component.d.ts +1 -1
- package/lib/router/layout/navbar/navbar.component.d.ts +5 -1
- package/mapbox/package.json +3 -3
- package/package.json +3 -3
- package/table/package.json +3 -3
|
@@ -294,7 +294,7 @@ class DbxButtonComponent extends AbstractDbxButtonDirective {
|
|
|
294
294
|
}
|
|
295
295
|
DbxButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
296
296
|
DbxButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxButtonComponent, selector: "dbx-button", inputs: { type: "type", raised: "raised", stroked: "stroked", flat: "flat", iconOnly: "iconOnly", color: "color", customButtonColor: "customButtonColor", customTextColor: "customTextColor", customSpinnerColor: "customSpinnerColor" }, providers: provideDbxButton(DbxButtonComponent), usesInheritance: true, ngImport: i0, template: `
|
|
297
|
-
<dbx-spinner-button
|
|
297
|
+
<dbx-spinner-button (btnClick)="clickButton()" [options]="btnOptions">
|
|
298
298
|
<ng-content></ng-content>
|
|
299
299
|
</dbx-spinner-button>
|
|
300
300
|
`, isInline: true, dependencies: [{ kind: "component", type: DbxSpinnerButtonComponent, selector: "dbx-spinner-button" }] });
|
|
@@ -303,7 +303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
303
303
|
args: [{
|
|
304
304
|
selector: 'dbx-button',
|
|
305
305
|
template: `
|
|
306
|
-
<dbx-spinner-button
|
|
306
|
+
<dbx-spinner-button (btnClick)="clickButton()" [options]="btnOptions">
|
|
307
307
|
<ng-content></ng-content>
|
|
308
308
|
</dbx-spinner-button>
|
|
309
309
|
`,
|
|
@@ -715,17 +715,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
715
715
|
class DbxIconButtonComponent extends AbstractDbxButtonDirective {
|
|
716
716
|
}
|
|
717
717
|
DbxIconButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxIconButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
718
|
-
DbxIconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxIconButtonComponent, selector: "dbx-icon-button", providers: provideDbxButton(DbxIconButtonComponent), usesInheritance: true, ngImport: i0, template: `
|
|
718
|
+
DbxIconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxIconButtonComponent, selector: "dbx-icon-button", host: { classAttribute: "dbx-icon-button" }, providers: provideDbxButton(DbxIconButtonComponent), usesInheritance: true, ngImport: i0, template: `
|
|
719
719
|
<ng-container [ngSwitch]="buttonDisplayType">
|
|
720
720
|
<button *ngSwitchCase="'text_button'" mat-button [disabled]="disabled" (click)="clickButton()">
|
|
721
721
|
<mat-icon class="dbx-icon-spacer" *ngIf="icon">{{ icon }}</mat-icon>
|
|
722
722
|
<span>{{ text }}</span>
|
|
723
|
+
<ng-container *ngTemplateOutlet="content"></ng-container>
|
|
723
724
|
</button>
|
|
724
725
|
<button *ngSwitchCase="'icon_button'" mat-icon-button [disabled]="disabled" (click)="clickButton()">
|
|
725
726
|
<mat-icon>{{ icon }}</mat-icon>
|
|
727
|
+
<ng-container *ngTemplateOutlet="content"></ng-container>
|
|
726
728
|
</button>
|
|
727
729
|
</ng-container>
|
|
728
|
-
|
|
730
|
+
<ng-template #content>
|
|
731
|
+
<ng-content></ng-content>
|
|
732
|
+
</ng-template>
|
|
733
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
729
734
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxIconButtonComponent, decorators: [{
|
|
730
735
|
type: Component,
|
|
731
736
|
args: [{
|
|
@@ -735,14 +740,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
735
740
|
<button *ngSwitchCase="'text_button'" mat-button [disabled]="disabled" (click)="clickButton()">
|
|
736
741
|
<mat-icon class="dbx-icon-spacer" *ngIf="icon">{{ icon }}</mat-icon>
|
|
737
742
|
<span>{{ text }}</span>
|
|
743
|
+
<ng-container *ngTemplateOutlet="content"></ng-container>
|
|
738
744
|
</button>
|
|
739
745
|
<button *ngSwitchCase="'icon_button'" mat-icon-button [disabled]="disabled" (click)="clickButton()">
|
|
740
746
|
<mat-icon>{{ icon }}</mat-icon>
|
|
747
|
+
<ng-container *ngTemplateOutlet="content"></ng-container>
|
|
741
748
|
</button>
|
|
742
749
|
</ng-container>
|
|
750
|
+
<ng-template #content>
|
|
751
|
+
<ng-content></ng-content>
|
|
752
|
+
</ng-template>
|
|
743
753
|
`,
|
|
744
754
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
745
|
-
providers: provideDbxButton(DbxIconButtonComponent)
|
|
755
|
+
providers: provideDbxButton(DbxIconButtonComponent),
|
|
756
|
+
host: {
|
|
757
|
+
class: 'dbx-icon-button'
|
|
758
|
+
}
|
|
746
759
|
}]
|
|
747
760
|
}] });
|
|
748
761
|
|
|
@@ -2942,11 +2955,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
|
|
|
2942
2955
|
* Component that displays a navbar.
|
|
2943
2956
|
*/
|
|
2944
2957
|
class DbxNavbarComponent extends AbstractTransitionDirective {
|
|
2958
|
+
// TODO: potentially make the caret depending on the current button display.
|
|
2945
2959
|
constructor(dbxRouterTransitionService, cdRef, _dbxScreenMediaService, _dbxRouterService) {
|
|
2946
2960
|
super(dbxRouterTransitionService);
|
|
2947
2961
|
this.cdRef = cdRef;
|
|
2948
2962
|
this._dbxScreenMediaService = _dbxScreenMediaService;
|
|
2949
2963
|
this._dbxRouterService = _dbxRouterService;
|
|
2964
|
+
/**
|
|
2965
|
+
* Whether or not to show the dropwdown caret for a menu
|
|
2966
|
+
*/
|
|
2967
|
+
this.showMenuCaret = false;
|
|
2950
2968
|
this.navAlign = 'center';
|
|
2951
2969
|
this._icon = new BehaviorSubject(undefined);
|
|
2952
2970
|
this._defaultIcon = new BehaviorSubject('menu');
|
|
@@ -3026,13 +3044,15 @@ class DbxNavbarComponent extends AbstractTransitionDirective {
|
|
|
3026
3044
|
}
|
|
3027
3045
|
}
|
|
3028
3046
|
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 });
|
|
3029
|
-
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\"
|
|
3047
|
+
DbxNavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxNavbarComponent, selector: "dbx-navbar", inputs: { showMenuCaret: "showMenuCaret", 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\">\n <mat-icon *ngIf=\"showMenuCaret\">arrow_drop_down</mat-icon>\n </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$3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$3.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 });
|
|
3030
3048
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxNavbarComponent, decorators: [{
|
|
3031
3049
|
type: Component,
|
|
3032
3050
|
args: [{ selector: 'dbx-navbar', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3033
3051
|
class: 'dbx-navbar'
|
|
3034
|
-
}, 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\"
|
|
3035
|
-
}], ctorParameters: function () { return [{ type: i1$2.DbxRouterTransitionService }, { type: i0.ChangeDetectorRef }, { type: DbxScreenMediaService }, { type: i1$2.DbxRouterService }]; }, propDecorators: {
|
|
3052
|
+
}, 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\">\n <mat-icon *ngIf=\"showMenuCaret\">arrow_drop_down</mat-icon>\n </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" }]
|
|
3053
|
+
}], ctorParameters: function () { return [{ type: i1$2.DbxRouterTransitionService }, { type: i0.ChangeDetectorRef }, { type: DbxScreenMediaService }, { type: i1$2.DbxRouterService }]; }, propDecorators: { showMenuCaret: [{
|
|
3054
|
+
type: Input
|
|
3055
|
+
}], navAlign: [{
|
|
3036
3056
|
type: Input
|
|
3037
3057
|
}], icon: [{
|
|
3038
3058
|
type: Input
|