@dereekb/dbx-web 0.0.1 → 1.2.0

package/lib/router/layout/navbar/_navbar.scss

@@ -0,0 +1,27 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '../../../style/theming';
+
+// MARK: Variables
+
+
+// MARK: Mixin
+@mixin core() {}
+
+@mixin color($theme-config) {}
+  
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-router-navbar') {
+    $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/navbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './navbar.component';
+export * from './navbar.module';

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

@@ -0,0 +1,37 @@
+import { Observable } from 'rxjs';
+import { ScreenMediaWidthType } from './../../../screen/screen';
+import { DbxScreenMediaService } from '../../../screen/screen.service';
+import { Maybe } from '@dereekb/util';
+import { OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { ClickableAnchorLink, DbxRouterService, DbxRouterTransitionService, AbstractTransitionDirective } from '@dereekb/dbx-core';
+import { HorizontalConnectionPos } from '@angular/cdk/overlay';
+import * as i0 from "@angular/core";
+interface NavAnchorLink {
+    selected: boolean;
+    anchor: ClickableAnchorLink;
+}
+export declare type NavBarContentAlign = 'center' | 'left' | 'right';
+export declare type NavbarMode = 'bar' | 'button';
+/**
+ * Component that displays a navbar.
+ */
+export declare class DbxNavbarComponent extends AbstractTransitionDirective implements OnDestroy {
+    private cdRef;
+    private readonly _dbxScreenMediaService;
+    private readonly _dbxRouterService;
+    navAlign: HorizontalConnectionPos;
+    private _inputMode;
+    private _breakpoint;
+    private _anchors;
+    readonly isBreakpointActive$: Observable<boolean>;
+    readonly mode$: Observable<NavbarMode>;
+    readonly anchors$: Observable<NavAnchorLink[]>;
+    constructor(dbxRouterTransitionService: DbxRouterTransitionService, cdRef: ChangeDetectorRef, _dbxScreenMediaService: DbxScreenMediaService, _dbxRouterService: DbxRouterService);
+    ngOnDestroy(): void;
+    set anchors(anchors: Maybe<ClickableAnchorLink[]>);
+    set mode(mode: Maybe<NavbarMode>);
+    set breakpoint(breakpoint: ScreenMediaWidthType);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxNavbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxNavbarComponent, "dbx-navbar", never, { "navAlign": "navAlign"; "anchors": "anchors"; "mode": "mode"; "breakpoint": "breakpoint"; }, {}, never, never>;
+}
+export {};

package/lib/router/layout/navbar/navbar.module.d.ts

@@ -0,0 +1,13 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./navbar.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/material/tabs";
+import * as i4 from "@angular/material/button";
+import * as i5 from "@angular/material/icon";
+import * as i6 from "@angular/material/menu";
+import * as i7 from "../anchor/anchor.module";
+export declare class DbxNavbarModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxNavbarModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxNavbarModule, [typeof i1.DbxNavbarComponent], [typeof i2.CommonModule, typeof i3.MatTabsModule, typeof i4.MatButtonModule, typeof i5.MatIconModule, typeof i6.MatMenuModule, typeof i7.DbxAnchorModule], [typeof i1.DbxNavbarComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxNavbarModule>;
+}

package/lib/router/layout/sidenav/_sidenav.scss

@@ -0,0 +1,189 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '../../../style/theming';
+@use '../anchorlist/anchorlist';
+
+// MARK: Variables
+$width: 240px;
+$mobile-width: 80vw;
+$icon-only-width: 65px;
+$mat-list-item-height: 48px;
+$active-border-left-width: 2px;
+$dbx-sidenav-nav-bottom-padding: 24px;
+
+// MARK: Mixin
+@mixin core() {
+
+  .dbx-sidenav {
+    height: 100%;
+
+    mat-sidenav {
+      width: $width;
+
+      .mat-drawer-inner-container {
+        box-sizing: border-box;
+        padding-bottom: 24px;
+      }
+    }
+
+    &.dbx-sidenav-mobile {
+      mat-sidenav {
+        width: $mobile-width;
+      }
+    }
+
+    &.dbx-sidenav-icon {
+      mat-sidenav {
+        width: $icon-only-width;
+      }
+
+      mat-sidenav-content {
+        margin-left: $icon-only-width;
+      }
+    }
+
+    &.dbx-sidenav-full {
+      mat-sidenav {
+        width: $width;
+      }
+
+      mat-sidenav-content {
+        margin-left: $width;
+      }
+    }
+
+    .mat-sidenav .mat-drawer-inner-container {
+      overflow-y: scroll !important
+    }
+
+    .dbx-sidenav-nav {
+      .dbx-sidenav-nav-end {
+        padding-bottom: $dbx-sidenav-nav-bottom-padding;
+      }
+    }
+
+    .mat-nav-list.dbx-anchor-list {
+      padding-top: 0;
+    }
+
+  }
+
+  .dbx-sidenav-page {
+    height: 100%;
+    max-height: 100%;
+    overflow: hidden;
+
+    .dbx-sidenav-page-content {
+      overflow: auto;
+    }
+  }
+
+}
+
+@mixin color($theme-config) {
+  $color-config: theming.get-color-config($theme-config);
+  $primary: map.get($color-config, 'primary');
+  $accent: map.get($color-config, 'accent');
+
+  $background: map.get($color-config, 'background');
+  $inactive-text-color: theming.get-color-from-palette($primary, '800-contrast');
+  $active-icon-color: theming.get-color-from-palette($accent, 400);
+
+  .dbx-sidenav {
+    mat-sidenav {
+      background-color: theming.get-color-from-palette($primary, 800);
+
+      .mat-drawer-inner-container {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        height: 100%;
+        min-height: 320px;
+      }
+
+      .dbx-anchor-list.mat-nav-list {
+        color: $inactive-text-color;
+
+        .mat-list-item {
+          color: $inactive-text-color;
+          height: $mat-list-item-height;
+        }
+
+        .dbx-anchor-active-eq {
+
+          .mat-list-item {
+            border-left: $active-border-left-width solid $active-icon-color;
+
+            .mat-list-icon {
+              color: $active-icon-color;
+
+              // Offset the added border by clearing the default padding width (4px)
+              padding-left: anchorlist.$active-root-item-left-padding - $active-border-left-width;
+            }
+          }
+
+          .dbx-anchor-list-child {
+            padding-left: anchorlist.$active-child-item-left-padding - $active-border-left-width;
+          }
+        }
+      }
+    }
+  }
+
+  /*
+    .active {
+      &.mat-list-item {
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+
+      mat-icon {
+        color: $sidenav-active-color;
+      }
+    }
+
+    $app-side-nav-bar-padding: 14px;
+
+    .app-side-nav-bar-title {
+      // text-align: center;
+      padding: $app-side-nav-bar-padding;
+
+      .app-side-nav-bar-title-header {
+        display: flex;
+
+        >img {
+          width: 32px;
+          height: 32px;
+          padding-left: 2px;
+          padding-right: 16px;
+        }
+
+        span {
+          @include mat-typography-level-to-styles($color-config, title);
+          font-weight: 300;
+        }
+      }
+
+    }
+
+    .app-side-nav-bar-title-content {
+      padding-top: $app-side-nav-bar-padding;
+    }
+    */
+}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-router-sidenav') {
+    $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/sidenav/index.d.ts

@@ -0,0 +1,5 @@
+export * from './sidenav.component';
+export * from './sidenav.module';
+export * from './sidenav.button.component';
+export * from './sidenav.pagebar.component';
+export * from './sidenav.page.component';

package/lib/router/layout/sidenav/sidenav.button.component.d.ts

@@ -0,0 +1,14 @@
+import { DbxSidenavComponent, SideNavDisplayMode } from './sidenav.component';
+import * as i0 from "@angular/core";
+/**
+ * Button used to interface with a parent sidenav.
+ */
+export declare class DbxSidenavButtonComponent {
+    readonly parent: DbxSidenavComponent;
+    readonly mode$: import("rxjs").Observable<SideNavDisplayMode>;
+    readonly showMenuButton$: import("rxjs").Observable<boolean>;
+    constructor(parent: DbxSidenavComponent);
+    toggleNav(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxSidenavButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxSidenavButtonComponent, "dbx-sidenav-button", never, {}, {}, never, never>;
+}

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

@@ -0,0 +1,42 @@
+import { NgZone, OnDestroy, OnInit } from '@angular/core';
+import { MatDrawerMode, MatSidenav } from '@angular/material/sidenav';
+import { DbxScreenMediaService } from '../../../screen';
+import { AbstractTransitionWatcherDirective, DbxRouterTransitionService, ClickableAnchorLinkTree } from '@dereekb/dbx-core';
+import { Maybe } from '@dereekb/util';
+import { Observable } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare enum SideNavDisplayMode {
+    NONE = "none",
+    MOBILE = "mobile",
+    ICON = "icon",
+    FULL = "full"
+}
+export interface DbxSidenavSidebarState {
+    mode: SideNavDisplayMode;
+    drawer: MatDrawerMode;
+    open?: boolean;
+}
+/**
+ * Navigation component that sits at the side of an app.
+ */
+export declare class DbxSidenavComponent extends AbstractTransitionWatcherDirective implements OnInit, OnDestroy {
+    private _screenMediaService;
+    anchors?: Maybe<ClickableAnchorLinkTree[]>;
+    readonly sidenav: MatSidenav;
+    readonly mode$: Observable<SideNavDisplayMode>;
+    readonly disableBackdrop$: Observable<boolean>;
+    readonly sizeClass$: Observable<string>;
+    readonly state$: Observable<DbxSidenavSidebarState>;
+    readonly drawer$: Observable<MatDrawerMode>;
+    private _watcherSub;
+    private _stateSub;
+    constructor(dbxRouterTransitionService: DbxRouterTransitionService, ngZone: NgZone, _screenMediaService: DbxScreenMediaService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    protected updateForSuccessfulTransition(): void;
+    closeNav(): void;
+    toggleNav(open?: boolean): void;
+    private _toggleNav;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxSidenavComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxSidenavComponent, "dbx-sidenav", ["sidenav"], { "anchors": "anchors"; }, {}, never, ["[top]", "[bottom]", "*"]>;
+}

package/lib/router/layout/sidenav/sidenav.module.d.ts

@@ -0,0 +1,23 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./sidenav.component";
+import * as i2 from "./sidenav.button.component";
+import * as i3 from "./sidenav.pagebar.component";
+import * as i4 from "./sidenav.page.component";
+import * as i5 from "@angular/common";
+import * as i6 from "../../../layout/bar/bar.layout.module";
+import * as i7 from "../anchor/anchor.module";
+import * as i8 from "../anchorlist/anchorlist.module";
+import * as i9 from "../../../button/button.module";
+import * as i10 from "../../../layout/content/content.layout.module";
+import * as i11 from "@angular/material/toolbar";
+import * as i12 from "@angular/material/button";
+import * as i13 from "@angular/material/icon";
+import * as i14 from "@angular/material/sidenav";
+import * as i15 from "@angular/material/list";
+import * as i16 from "@angular/material/divider";
+import * as i17 from "@uirouter/angular";
+export declare class DbxSidenavModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxSidenavModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxSidenavModule, [typeof i1.DbxSidenavComponent, typeof i2.DbxSidenavButtonComponent, typeof i3.DbxSidenavPagebarComponent, typeof i4.DbxSidenavPageComponent], [typeof i5.CommonModule, typeof i6.DbxBarLayoutModule, typeof i7.DbxAnchorModule, typeof i8.DbxAnchorListModule, typeof i9.DbxButtonModule, typeof i10.DbxContentLayoutModule, typeof i11.MatToolbarModule, typeof i12.MatButtonModule, typeof i13.MatIconModule, typeof i14.MatSidenavModule, typeof i15.MatListModule, typeof i16.MatDividerModule, typeof i17.UIRouterModule], [typeof i1.DbxSidenavComponent, typeof i2.DbxSidenavButtonComponent, typeof i3.DbxSidenavPagebarComponent, typeof i4.DbxSidenavPageComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxSidenavModule>;
+}

package/lib/router/layout/sidenav/sidenav.page.component.d.ts

@@ -0,0 +1,20 @@
+import { DbxSidenavComponent } from './sidenav.component';
+import { Maybe } from '@dereekb/util';
+import { DbxBarColor } from '../../../layout/bar/bar';
+import * as i0 from "@angular/core";
+/**
+ * Pre-configured page used with DbxSidenavComponent.
+ *
+ * Can optionally be configured to only show the pagebar while in mobile mode.
+ */
+export declare class DbxSidenavPageComponent {
+    readonly parent: DbxSidenavComponent;
+    color?: Maybe<DbxBarColor>;
+    private _mobileOnly;
+    constructor(parent: DbxSidenavComponent);
+    readonly hidePagebar$: import("rxjs").Observable<boolean>;
+    get mobileOnly(): boolean;
+    set mobileOnly(mobileOnly: boolean);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxSidenavPageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxSidenavPageComponent, "dbx-sidenav-page", never, { "color": "color"; "mobileOnly": "mobileOnly"; }, {}, never, ["[navLeft]", "[navRight]", "*"]>;
+}

package/lib/router/layout/sidenav/sidenav.pagebar.component.d.ts

@@ -0,0 +1,9 @@
+import { DbxPagebarComponent } from '../../../layout/bar/pagebar.component';
+import * as i0 from "@angular/core";
+/**
+ * Pre-configured pagebar used with DbxSidenavComponent.
+ */
+export declare class DbxSidenavPagebarComponent extends DbxPagebarComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxSidenavPagebarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxSidenavPagebarComponent, "dbx-sidenav-pagebar", never, {}, {}, never, ["*", "*"]>;
+}

package/lib/router/provider/ngrouter/anchor.component.d.ts

@@ -1,9 +1,9 @@
-import { AbstractDbNgxSegueAnchorDirective } from '../../anchor/anchor.segue.directive';
+import { AbstractDbxSegueAnchorDirective } from '../../layout/anchor/anchor.segue.directive';
 import * as i0 from "@angular/core";
 /**
  * SegueAnchor implementation for Angular Router.
  */
-export declare class DbNgxAngularRouterSegueAnchorComponent extends AbstractDbNgxSegueAnchorDirective {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxAngularRouterSegueAnchorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbNgxAngularRouterSegueAnchorComponent, "ng-component", never, {}, {}, never, never>;
+export declare class DbxAngularRouterSegueAnchorComponent extends AbstractDbxSegueAnchorDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxAngularRouterSegueAnchorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxAngularRouterSegueAnchorComponent, "ng-component", never, {}, {}, never, never>;
 }

package/lib/router/provider/ngrouter/angular.router.module.d.ts

@@ -4,9 +4,9 @@ import * as i1 from "./anchor.component";
 import * as i2 from "@angular/common";
 import * as i3 from "@uirouter/angular";
 import * as i4 from "@dereekb/dbx-core";
-export declare class DbNgxWebAngularRouterModule {
-    static forRoot(): ModuleWithProviders<DbNgxWebAngularRouterModule>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxWebAngularRouterModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbNgxWebAngularRouterModule, [typeof i1.DbNgxAngularRouterSegueAnchorComponent], [typeof i2.CommonModule, typeof i3.UIRouterModule, typeof i4.DbNgxInjectedComponentModule], [typeof i1.DbNgxAngularRouterSegueAnchorComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbNgxWebAngularRouterModule>;
+export declare class DbxWebAngularRouterModule {
+    static forRoot(): ModuleWithProviders<DbxWebAngularRouterModule>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxWebAngularRouterModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxWebAngularRouterModule, [typeof i1.DbxAngularRouterSegueAnchorComponent], [typeof i2.CommonModule, typeof i3.UIRouterModule, typeof i4.DbxInjectedComponentModule], [typeof i1.DbxAngularRouterSegueAnchorComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxWebAngularRouterModule>;
 }

package/lib/router/provider/router.provider.config.d.ts

@@ -1,7 +1,7 @@
-import { DbNgxInjectedComponentConfig } from "@dereekb/dbx-core";
-export declare abstract class DbNgxRouterWebProviderConfig {
+import { DbxInjectedComponentConfig } from "@dereekb/dbx-core";
+export declare abstract class DbxRouterWebProviderConfig {
     /**
      * Component used by the Anchor component to render a SegueRef link.
      */
-    abstract anchorSegueRefComponent: DbNgxInjectedComponentConfig;
+    abstract anchorSegueRefComponent: DbxInjectedComponentConfig;
 }

package/lib/router/provider/uirouter/anchor.component.d.ts

@@ -1,9 +1,9 @@
-import { AbstractDbNgxSegueAnchorDirective } from '../../anchor/anchor.segue.directive';
+import { AbstractDbxSegueAnchorDirective } from '../../layout/anchor/anchor.segue.directive';
 import * as i0 from "@angular/core";
 /**
  * SegueAnchor implementation for UIRouter.
  */
-export declare class DbNgxUIRouterSegueAnchorComponent extends AbstractDbNgxSegueAnchorDirective {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxUIRouterSegueAnchorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbNgxUIRouterSegueAnchorComponent, "ng-component", never, {}, {}, never, never>;
+export declare class DbxUIRouterSegueAnchorComponent extends AbstractDbxSegueAnchorDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxUIRouterSegueAnchorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxUIRouterSegueAnchorComponent, "ng-component", never, {}, {}, never, never>;
 }

package/lib/router/provider/uirouter/uirouter.router.module.d.ts

@@ -4,9 +4,9 @@ import * as i1 from "./anchor.component";
 import * as i2 from "@angular/common";
 import * as i3 from "@uirouter/angular";
 import * as i4 from "@dereekb/dbx-core";
-export declare class DbNgxWebUIRouterModule {
-    static forRoot(): ModuleWithProviders<DbNgxWebUIRouterModule>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxWebUIRouterModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbNgxWebUIRouterModule, [typeof i1.DbNgxUIRouterSegueAnchorComponent], [typeof i2.CommonModule, typeof i3.UIRouterModule, typeof i4.DbNgxInjectedComponentModule], [typeof i1.DbNgxUIRouterSegueAnchorComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbNgxWebUIRouterModule>;
+export declare class DbxWebUIRouterModule {
+    static forRoot(): ModuleWithProviders<DbxWebUIRouterModule>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxWebUIRouterModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxWebUIRouterModule, [typeof i1.DbxUIRouterSegueAnchorComponent], [typeof i2.CommonModule, typeof i3.UIRouterModule, typeof i4.DbxInjectedComponentModule], [typeof i1.DbxUIRouterSegueAnchorComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxWebUIRouterModule>;
 }

package/lib/screen/index.d.ts

@@ -0,0 +1,3 @@
+export * from './screen';
+export * from './screen.service';
+export * from './screen.module';

package/lib/screen/screen.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Set of screen media width types. Their pixel sizes correspond with the DbxScreenMediaService's configuration.
+ *
+ * Values:
+ * - micro: Screen is considered mobile.
+ * - small: Screen is consider small, but larger than mobile.
+ * - tablet: Screen is considered tablet size.
+ * - large: Screen is considered large than a tablet, but not full size.
+ * - full: Screen is greater than large.
+ */
+export declare type ScreenMediaWidthType = 'micro' | 'small' | 'tablet' | 'large' | 'full';
+export declare const SCREEN_MEDIA_WIDTH_TYPE_SIZE_MAP: {
+    micro: number;
+    small: number;
+    tablet: number;
+    large: number;
+    full: number;
+};
+/**
+ * Describes the current screen's vertical space.
+ *
+ * Values:
+ * - tiny: Screen height is tiny, potentially the size of the navigation alone.
+ * - normal: Screen has a normal height.
+ */
+export declare type ScreenMediaHeightType = 'tiny' | 'normal';
+/**
+ * Compares the breakpoint with the current width and determines if it is "active" or not.
+ *
+ * The current is considered active if it is bigger or equal to the breakpoint.
+ *
+ * @param current
+ * @param breakpoint
+ */
+export declare function screenMediaWidthTypeIsActive(current: ScreenMediaWidthType, breakpoint: ScreenMediaWidthType): boolean;
+export declare function compareScreenMediaWidthTypes(a: ScreenMediaWidthType, b: ScreenMediaWidthType, compare: (a: number, b: number) => boolean): boolean;

package/lib/screen/screen.module.d.ts

@@ -0,0 +1,9 @@
+import { ModuleWithProviders } from '@angular/core';
+import { DbxScreenMediaServiceConfig } from './screen.service';
+import * as i0 from "@angular/core";
+export declare class DbxScreenModule {
+    static forRoot(config?: DbxScreenMediaServiceConfig): ModuleWithProviders<DbxScreenModule>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxScreenModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxScreenModule, never, never, never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxScreenModule>;
+}

package/lib/screen/screen.service.d.ts

@@ -0,0 +1,60 @@
+import { Destroyable } from '@dereekb/util';
+import { MediaMatcher } from "@angular/cdk/layout";
+import { ObservableGetter } from '@dereekb/rxjs';
+import { Observable } from "rxjs";
+import { ScreenMediaWidthType, ScreenMediaHeightType } from "./screen";
+import * as i0 from "@angular/core";
+/**
+ * ScreenMediaService configuration.
+ */
+export declare abstract class DbxScreenMediaServiceConfig {
+    /**
+     * The maximum size of a micro screen. Any size bigger than this is considered a small screen or larger.
+     */
+    abstract microScreenWidthMax: number;
+    /**
+     * The maximum size of a small screen. Any size bigger than this is considered a tablet screen or larger.
+     */
+    abstract smallScreenWidthMax: number;
+    /**
+     * The maximum size of a tablet screen. Any size bigger than this is considered a large screen or larger.
+     */
+    abstract tabletScreenWidthMax: number;
+    /**
+     * The maximum size of a large screen. Any size bigger than this is considered full.
+     */
+    abstract largeScreenWidthMax: number;
+    /**
+     * The maximum size of a tiny screen. Any size bigger than this is considered normal.
+     */
+    abstract tinyScreenHeightMax: number;
+}
+export declare const DEFAULT_SCREEN_MEDIA_SERVICE_CONFIG: DbxScreenMediaServiceConfig;
+/**
+ * Service that emits the current view type based on the configuration.
+ */
+export declare class DbxScreenMediaService implements Destroyable {
+    private readonly _media;
+    private _microQuery;
+    private _smallQuery;
+    private _tabletQuery;
+    private _largeQuery;
+    private _tinyHeightQuery;
+    private _updateWidth;
+    private _updateHeight;
+    readonly widthType$: Observable<ScreenMediaWidthType>;
+    readonly heightType$: Observable<ScreenMediaHeightType>;
+    constructor(_media: MediaMatcher, config: DbxScreenMediaServiceConfig);
+    destroy(): void;
+    /**
+     * Returns an observable that detects whether or no the current width is greater or equal to the given breakpoint.
+     *
+     * @param inputBreakpoint
+     * @returns
+     */
+    isBreakpointActive(inputBreakpoint: ObservableGetter<ScreenMediaWidthType>): Observable<boolean>;
+    private _readWidthType;
+    private _readHeightType;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxScreenMediaService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DbxScreenMediaService>;
+}

package/lib/style/_all-core.scss

@@ -0,0 +1,14 @@
+@use '../button/button';
+@use '../error/error';
+@use '../interaction/interaction';
+@use '../layout/layout';
+@use '../router/router';
+
+// Includes all theming config
+@mixin all-component-core() {
+  @include button.core();
+  @include error.core();
+  @include interaction.all-interaction-core();
+  @include layout.all-layout-core();
+  @include router.all-router-core();
+}

package/lib/style/_all-theme.scss

@@ -0,0 +1,15 @@
+@use './theming';
+@use '../button/button';
+@use '../error/error';
+@use '../interaction/interaction';
+@use '../layout/layout';
+@use '../router/router';
+
+// Includes all theming config
+@mixin all-component-themes($theme-config) {
+  @include button.theme($theme-config);
+  @include error.theme($theme-config);
+  @include interaction.all-interaction-theme($theme-config);
+  @include layout.all-layout-theme($theme-config);
+  @include router.all-router-theme($theme-config);
+}

package/lib/style/_all-typography.scss

@@ -0,0 +1,15 @@
+@use './theming';
+@use '../button/button';
+@use '../error/error';
+@use '../interaction/interaction';
+@use '../layout/layout';
+@use '../router/router';
+
+// Includes all of the typographic styles.
+@mixin all-component-typographies($typography-config) {
+  @include button.typography($typography-config);
+  @include error.typography($typography-config);
+  @include interaction.all-interaction-typography($typography-config);
+  @include layout.all-layout-typography($typography-config);
+  @include router.all-router-typography($typography-config);
+}