@dereekb/dbx-web 0.0.1 → 1.0.0

package/lib/interaction/prompt/prompt.confirm.directive.d.ts

@@ -1,21 +1,18 @@
-import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { Observable } from 'rxjs';
-import { DbNgxPromptConfirm } from './prompt.confirm';
-import { DbNgxPromptConfirmConfig } from './prompt.confirm.component';
-import { DbNgxPromptConfirmDialogComponent } from './prompt.confirm.dialog.component';
+import { DbxPromptConfirm } from './prompt.confirm';
+import { DbxPromptConfirmConfig } from './prompt.confirm.component';
 import * as i0 from "@angular/core";
 /**
  * Directive that when triggered shows a dialog to accept or reject.
  */
-export declare abstract class AbstractPromptConfirmDirective implements DbNgxPromptConfirm {
-    protected readonly dialog: MatDialog;
-    private static readonly DEFAULT_CONFIG;
-    config?: DbNgxPromptConfirmConfig;
+export declare abstract class AbstractPromptConfirmDirective implements DbxPromptConfirm {
+    protected readonly matDialog: MatDialog;
+    config?: DbxPromptConfirmConfig;
     private _dialogRef?;
     private _dialogPromise?;
-    constructor(dialog: MatDialog);
+    constructor(matDialog: MatDialog);
     showDialog(): Observable<boolean>;
-    protected _makeDialog(): MatDialogRef<DbNgxPromptConfirmDialogComponent, boolean>;
     protected _handleDialogResult(result: boolean): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<AbstractPromptConfirmDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<AbstractPromptConfirmDirective, never, never, {}, {}, never>;
@@ -23,9 +20,9 @@ export declare abstract class AbstractPromptConfirmDirective implements DbNgxPro
 /**
  * Directive that shows a confirmation screen.
  */
-export declare class DbNgxPromptConfirmDirective<T, O> extends AbstractPromptConfirmDirective {
-    config?: DbNgxPromptConfirmConfig;
+export declare class DbxPromptConfirmDirective<T, O> extends AbstractPromptConfirmDirective {
+    config?: DbxPromptConfirmConfig;
     constructor(dialog: MatDialog);
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxPromptConfirmDirective<any, any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbNgxPromptConfirmDirective<any, any>, "[dbxPromptConfirm]", never, { "config": "dbxPromptConfirm"; }, {}, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxPromptConfirmDirective<any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxPromptConfirmDirective<any, any>, "[dbxPromptConfirm]", never, { "config": "dbxPromptConfirm"; }, {}, never>;
 }

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

@@ -9,12 +9,14 @@ import * as i7 from "./prompt.confirm.directive";
 import * as i8 from "@angular/common";
 import * as i9 from "@angular/material/dialog";
 import * as i10 from "@angular/material/button";
-import * as i11 from "../../text/text.module";
+import * as i11 from "../../layout/text/text.module";
 import * as i12 from "../../button/button.module";
-import * as i13 from "../../layout/section/section.layout.module";
-import * as i14 from "../../layout/content/content.layout.module";
-export declare class DbNgxPromptModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxPromptModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbNgxPromptModule, [typeof i1.DbNgxPromptComponent, typeof i2.DbNgxPromptBoxComponent, typeof i3.DbNgxPromptPageComponent, typeof i4.DbNgxPromptConfirmComponent, typeof i5.DbNgxPromptConfirmButtonDirective, typeof i6.DbNgxPromptConfirmDialogComponent, typeof i7.DbNgxPromptConfirmDirective], [typeof i8.CommonModule, typeof i9.MatDialogModule, typeof i10.MatButtonModule, typeof i11.DbNgxTextModule, typeof i12.DbNgxButtonModule, typeof i13.DbNgxSectionLayoutModule, typeof i14.DbNgxContentLayoutModule], [typeof i1.DbNgxPromptComponent, typeof i2.DbNgxPromptBoxComponent, typeof i3.DbNgxPromptPageComponent, typeof i4.DbNgxPromptConfirmComponent, typeof i5.DbNgxPromptConfirmButtonDirective, typeof i7.DbNgxPromptConfirmDirective]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbNgxPromptModule>;
+import * as i13 from "@dereekb/dbx-core";
+import * as i14 from "../dialog/dialog.module";
+import * as i15 from "../../layout/section/section.layout.module";
+import * as i16 from "../../layout/content/content.layout.module";
+export declare class DbxPromptModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxPromptModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxPromptModule, [typeof i1.DbxPromptComponent, typeof i2.DbxPromptBoxComponent, typeof i3.DbxPromptPageComponent, typeof i4.DbxPromptConfirmComponent, typeof i5.DbxPromptConfirmButtonDirective, typeof i6.DbxPromptConfirmDialogComponent, typeof i7.DbxPromptConfirmDirective], [typeof i8.CommonModule, typeof i9.MatDialogModule, typeof i10.MatButtonModule, typeof i11.DbxTextModule, typeof i12.DbxButtonModule, typeof i13.DbxInjectedComponentModule, typeof i14.DbxDialogInteractionModule, typeof i15.DbxSectionLayoutModule, typeof i16.DbxContentLayoutModule], [typeof i1.DbxPromptComponent, typeof i2.DbxPromptBoxComponent, typeof i3.DbxPromptPageComponent, typeof i4.DbxPromptConfirmComponent, typeof i5.DbxPromptConfirmButtonDirective, typeof i7.DbxPromptConfirmDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxPromptModule>;
 }

package/lib/interaction/prompt/prompt.page.component.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-export declare class DbNgxPromptPageComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxPromptPageComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbNgxPromptPageComponent, "dbx-prompt-page", never, {}, {}, never, ["*"]>;
+export declare class DbxPromptPageComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxPromptPageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxPromptPageComponent, "dbx-prompt-page", never, {}, {}, never, ["*"]>;
 }

package/lib/interaction/style/_style.scss

@@ -0,0 +1,47 @@
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:color';
+@use '../../style/theming';
+
+// Sections
+@mixin core() {
+
+  .cdk-overlay-pane .mat-menu-panel {
+    max-width: 90vw;
+  }
+
+}
+
+@mixin color($theme-config) {
+  $color-config: theming.get-color-config($theme-config);
+  $background: map.get($color-config, 'background');
+  $foreground: map.get($color-config, 'foreground');
+  $cdk-background-color: theming.get-color-from-palette($background, 'background');
+  $cdk-text-color: theming.get-color-from-palette($foreground, 'text');
+  $cdk-border-color: color.adjust($color: $cdk-text-color, $alpha: -0.90);
+
+  .ng-overlay-container {
+    color: $cdk-text-color;
+    background: $cdk-background-color;
+    @include theming.elevation(8);
+    border: 1px solid $cdk-border-color;
+  }
+
+}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-interaction-style') {
+    $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/keypress/keydown.listener.directive.d.ts

@@ -1,12 +1,12 @@
 import { OnDestroy, EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class DbNgxWindowKeyDownListenerDirective implements OnDestroy {
+export declare class DbxWindowKeyDownListenerDirective implements OnDestroy {
     private _keysFilter?;
     appWindowKeyDownEnabled: boolean;
     keyPressed: EventEmitter<KeyboardEvent>;
     set appWindowKeyDownFilter(filterOnKeys: string[]);
     ngOnDestroy(): void;
     handleKeyboardEvent(event: KeyboardEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxWindowKeyDownListenerDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbNgxWindowKeyDownListenerDirective, "[dbxWindowKeyDownListener]", never, { "appWindowKeyDownEnabled": "appWindowKeyDownEnabled"; "appWindowKeyDownFilter": "appWindowKeyDownFilter"; }, { "keyPressed": "dbxWindowKeyDownListener"; }, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxWindowKeyDownListenerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxWindowKeyDownListenerDirective, "[dbxWindowKeyDownListener]", never, { "appWindowKeyDownEnabled": "appWindowKeyDownEnabled"; "appWindowKeyDownFilter": "appWindowKeyDownFilter"; }, { "keyPressed": "dbxWindowKeyDownListener"; }, never>;
 }

package/lib/keypress/keypress.module.d.ts

@@ -1,8 +1,8 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./keydown.listener.directive";
 import * as i2 from "@angular/common";
-export declare class DbNgxKeypressModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxKeypressModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbNgxKeypressModule, [typeof i1.DbNgxWindowKeyDownListenerDirective], [typeof i2.CommonModule], [typeof i1.DbNgxWindowKeyDownListenerDirective]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbNgxKeypressModule>;
+export declare class DbxKeypressModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxKeypressModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxKeypressModule, [typeof i1.DbxWindowKeyDownListenerDirective], [typeof i2.CommonModule], [typeof i1.DbxWindowKeyDownListenerDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxKeypressModule>;
 }

package/lib/layout/_layout.scss

@@ -0,0 +1,61 @@
+@use './bar/bar';
+@use './block/block';
+@use './card/card';
+@use './column/column';
+@use './content/content';
+@use './flag/flag';
+@use './flex/flex';
+@use './item/item';
+@use './list/list';
+@use './section/section';
+@use './step/step';
+@use './style/style';
+@use './text/text';
+
+@mixin all-layout-core() {
+  @include bar.core();
+  @include block.core();
+  @include card.core();
+  @include column.core();
+  @include content.core();
+  @include flag.core();
+  @include flex.core();
+  @include item.core();
+  @include list.core();
+  @include section.core();
+  @include step.core();
+  @include style.core();
+  @include text.core();
+}
+
+@mixin all-layout-typography($typography-config) {
+  @include bar.typography($typography-config);
+  @include block.typography($typography-config);
+  @include card.typography($typography-config);
+  @include column.typography($typography-config);
+  @include content.typography($typography-config);
+  @include flag.typography($typography-config);
+  @include flex.typography($typography-config);
+  @include item.typography($typography-config);
+  @include list.typography($typography-config);
+  @include section.typography($typography-config);
+  @include step.typography($typography-config);
+  @include style.typography($typography-config);
+  @include text.typography($typography-config);
+}
+
+@mixin all-layout-theme($theme-config) {
+  @include bar.theme($theme-config);
+  @include block.theme($theme-config);
+  @include card.theme($theme-config);
+  @include column.theme($theme-config);
+  @include content.theme($theme-config);
+  @include flag.theme($theme-config);
+  @include flex.theme($theme-config);
+  @include item.theme($theme-config);
+  @include list.theme($theme-config);
+  @include section.theme($theme-config);
+  @include step.theme($theme-config);
+  @include style.theme($theme-config);
+  @include text.theme($theme-config);
+}

package/lib/layout/bar/_bar.scss

@@ -0,0 +1,81 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '../../style/theming';
+
+// MARK: Variables
+$pagebar-height-var: theming.$page-navbar-height-var;
+$pagebar-height: theming.$page-navbar-height;
+$bar-vertical-padding: theming.$padding-1;
+
+// MARK: Mixin
+@mixin core() {
+
+  .dbx-banner {
+    @include theming.elevation(3);
+  }
+
+  .dbx-pagebar.mat-toolbar {
+    height: $pagebar-height;
+  }
+
+  .dbx-bar {
+    box-sizing: border-box;
+    padding: $bar-vertical-padding;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .dbx-pagebar-hide {
+    #{$pagebar-height-var}: 0px;
+
+    .dbx-pagebar {
+      display: none;
+    }
+  }
+
+}
+
+@mixin color($theme-config) {
+  $color-config: theming.get-color-config($theme-config);
+  $background: map.get($color-config, 'background');
+  $primary: map.get($color-config, 'primary');
+  $accent: map.get($color-config, 'accent');
+
+  $dbx-bar-bg-color: theming.get-color-from-palette($background, 'app-bar');
+  $dbx-bar-color: theming.get-color-from-palette($background, 'contrast');
+
+  .dbx-pagebar .mat-toolbar {
+    // todo?
+  }
+
+  .dbx-bar,
+  .dbx-bar-background {
+    background: $dbx-bar-bg-color;
+    color: $dbx-bar-color;
+  }
+
+}
+
+@mixin typography($typography-config) {
+
+  .dbx-bar {
+    font-size: theming.font-size($typography-config, 'caption');
+  }
+
+}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-layout-bar') {
+    $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/layout/bar/bar.d.ts

@@ -0,0 +1 @@
+export declare type DbxBarColor = 'primary' | 'accent' | 'warn' | 'background';

package/lib/layout/bar/bar.directive.d.ts

@@ -0,0 +1,11 @@
+import { Maybe } from '@dereekb/util';
+import { DbxBarColor } from './bar';
+import * as i0 from "@angular/core";
+/**
+ * Acts as a wrapper for content distributed along a bar.
+ */
+export declare class DbxBarDirective {
+    color?: Maybe<DbxBarColor>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxBarDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxBarDirective, "dbx-bar", never, { "color": "color"; }, {}, never>;
+}

package/lib/layout/bar/bar.header.component.d.ts

@@ -0,0 +1,13 @@
+import { Maybe } from '@dereekb/util';
+import { DbxBarColor } from './bar';
+import * as i0 from "@angular/core";
+/**
+ * Acts as a divider between content and centers a label within a background.
+ */
+export declare class DbxBarHeaderComponent {
+    text?: Maybe<string>;
+    icon?: Maybe<string>;
+    color?: Maybe<DbxBarColor>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxBarHeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxBarHeaderComponent, "dbx-bar-header", never, { "text": "text"; "icon": "icon"; "color": "color"; }, {}, never, never>;
+}

package/lib/layout/bar/bar.layout.module.d.ts

@@ -0,0 +1,15 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./bar.directive";
+import * as i2 from "./bar.header.component";
+import * as i3 from "./pagebar.component";
+import * as i4 from "@angular/common";
+import * as i5 from "@angular/material/toolbar";
+import * as i6 from "@angular/material/icon";
+/**
+ * Module for block components.
+ */
+export declare class DbxBarLayoutModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxBarLayoutModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxBarLayoutModule, [typeof i1.DbxBarDirective, typeof i2.DbxBarHeaderComponent, typeof i3.DbxPagebarComponent], [typeof i4.CommonModule, typeof i5.MatToolbarModule, typeof i6.MatIconModule], [typeof i1.DbxBarDirective, typeof i2.DbxBarHeaderComponent, typeof i3.DbxPagebarComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxBarLayoutModule>;
+}

package/lib/layout/bar/index.d.ts

@@ -0,0 +1,4 @@
+export * from './bar.layout.module';
+export * from './bar.directive';
+export * from './bar.header.component';
+export * from './pagebar.component';

package/lib/layout/bar/pagebar.component.d.ts

@@ -0,0 +1,8 @@
+import { Maybe } from '@dereekb/util';
+import { DbxBarColor } from './bar';
+import * as i0 from "@angular/core";
+export declare class DbxPagebarComponent {
+    color?: Maybe<DbxBarColor>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxPagebarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxPagebarComponent, "dbx-pagebar", never, { "color": "color"; }, {}, never, ["[left]", "[right]"]>;
+}

package/lib/layout/block/_block.scss

@@ -0,0 +1,39 @@
+@use '../../style/theming';
+
+// MARK: Variables
+
+
+// MARK: Mixin
+@mixin core() {
+
+  // todo
+
+  .two-blocks {
+    height: 100%;
+    --two-blocks-top-height: 50;
+  
+    .bottom-block {
+      height: calc(100% - var(--two-blocks-top-height));
+    }
+  }
+      
+}
+
+@mixin color($theme-config) {}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-layout-block') {
+    $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/layout/block/block.layout.module.d.ts

@@ -1,13 +1,13 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./two.block.component";
 import * as i2 from "@angular/common";
-import * as i3 from "../../router/anchor/anchor.module";
+import * as i3 from "../../router/layout/anchor/anchor.module";
 import * as i4 from "angular-resize-event";
 /**
  * Module for block components.
  */
-export declare class DbNgxBlockLayoutModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxBlockLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbNgxBlockLayoutModule, [typeof i1.DbNgxTwoBlocksComponent], [typeof i2.CommonModule, typeof i3.DbNgxAnchorModule, typeof i4.AngularResizeEventModule], [typeof i1.DbNgxTwoBlocksComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbNgxBlockLayoutModule>;
+export declare class DbxBlockLayoutModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxBlockLayoutModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxBlockLayoutModule, [typeof i1.DbxTwoBlocksComponent], [typeof i2.CommonModule, typeof i3.DbxAnchorModule, typeof i4.AngularResizeEventModule], [typeof i1.DbxTwoBlocksComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxBlockLayoutModule>;
 }

package/lib/layout/block/two.block.component.d.ts

@@ -8,9 +8,9 @@ import * as i0 from "@angular/core";
  * The block is made up of two divs, a top and a bottom. The top is assigned a static height, and the bottom is given the remainder.
  * The height is calculated from 100%.
  */
-export declare class DbNgxTwoBlocksComponent {
+export declare class DbxTwoBlocksComponent {
     twoElement: ElementRef;
     onResized(event: ResizedEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxTwoBlocksComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbNgxTwoBlocksComponent, "dbx-two-block", never, {}, {}, never, ["[top]", "*"]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoBlocksComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTwoBlocksComponent, "dbx-two-block", never, {}, {}, never, ["[top]", "*"]>;
 }

package/lib/layout/card/_card.scss

@@ -0,0 +1,26 @@
+@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-layout-card') {
+    $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/layout/card/card.box.component.d.ts

@@ -2,9 +2,9 @@ import * as i0 from "@angular/core";
 /**
  * Component that formats a card-box of content.
  */
-export declare class DbNgxCardBoxComponent {
+export declare class DbxCardBoxComponent {
     header?: string;
     icon?: string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxCardBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbNgxCardBoxComponent, "dbx-card-box", never, { "header": "header"; "icon": "icon"; }, {}, never, ["[sectionHeader]", "*"]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxCardBoxComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxCardBoxComponent, "dbx-card-box", never, { "header": "header"; "icon": "icon"; }, {}, never, ["[sectionHeader]", "*"]>;
 }

package/lib/layout/card/card.box.container.component.d.ts

@@ -2,7 +2,7 @@ import * as i0 from "@angular/core";
 /**
  * Component that wraps a card box and adds content padding.
  */
-export declare class DbNgxCardBoxContainerComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxCardBoxContainerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbNgxCardBoxContainerComponent, "dbx-card-box-container", never, {}, {}, never, ["*"]>;
+export declare class DbxCardBoxContainerComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxCardBoxContainerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxCardBoxContainerComponent, "dbx-card-box-container", never, {}, {}, never, ["*"]>;
 }

package/lib/layout/card/card.box.layout.module.d.ts

@@ -3,8 +3,8 @@ import * as i1 from "./card.box.component";
 import * as i2 from "./card.box.container.component";
 import * as i3 from "@angular/common";
 import * as i4 from "@angular/material/icon";
-export declare class DbNgxCardBoxLayoutModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxCardBoxLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbNgxCardBoxLayoutModule, [typeof i1.DbNgxCardBoxComponent, typeof i2.DbNgxCardBoxContainerComponent], [typeof i3.CommonModule, typeof i4.MatIconModule], [typeof i1.DbNgxCardBoxComponent, typeof i2.DbNgxCardBoxContainerComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbNgxCardBoxLayoutModule>;
+export declare class DbxCardBoxLayoutModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxCardBoxLayoutModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxCardBoxLayoutModule, [typeof i1.DbxCardBoxComponent, typeof i2.DbxCardBoxContainerComponent], [typeof i3.CommonModule, typeof i4.MatIconModule], [typeof i1.DbxCardBoxComponent, typeof i2.DbxCardBoxContainerComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxCardBoxLayoutModule>;
 }

package/lib/layout/column/_column.scss

@@ -0,0 +1,26 @@
+@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-layout-column') {
+    $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/layout/column/column.layout.module.d.ts

@@ -1,8 +1,8 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./one/one.column.module";
 import * as i2 from "./two/two.column.module";
-export declare class DbNgxColumnLayoutModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxColumnLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbNgxColumnLayoutModule, never, never, [typeof i1.DbNgxOneColumnLayoutModule, typeof i2.DbNgxTwoColumnLayoutModule]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbNgxColumnLayoutModule>;
+export declare class DbxColumnLayoutModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxColumnLayoutModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxColumnLayoutModule, never, never, [typeof i1.DbxOneColumnLayoutModule, typeof i2.DbxTwoColumnLayoutModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxColumnLayoutModule>;
 }

package/lib/layout/column/one/one.column.component.d.ts

@@ -3,10 +3,10 @@ import * as i0 from "@angular/core";
 /**
  * Pre-configured Two-columns view that only has a left view and shows full left.
  */
-export declare class DbNgxOneColumnComponent {
+export declare class DbxOneColumnComponent {
     readonly twoColumnsContextStore: TwoColumnsContextStore;
     constructor(twoColumnsContextStore: TwoColumnsContextStore);
     inSectionPage: boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxOneColumnComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbNgxOneColumnComponent, "dbx-one-column", ["columns"], { "inSectionPage": "inSectionPage"; }, {}, never, ["[top]", "*"]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxOneColumnComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxOneColumnComponent, "dbx-one-column", ["columns"], { "inSectionPage": "inSectionPage"; }, {}, never, ["[top]", "*"]>;
 }

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

@@ -2,8 +2,8 @@ import * as i0 from "@angular/core";
 import * as i1 from "./one.column.component";
 import * as i2 from "@angular/common";
 import * as i3 from "../two/two.column.module";
-export declare class DbNgxOneColumnLayoutModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxOneColumnLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbNgxOneColumnLayoutModule, [typeof i1.DbNgxOneColumnComponent], [typeof i2.CommonModule, typeof i3.DbNgxTwoColumnLayoutModule], [typeof i1.DbNgxOneColumnComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbNgxOneColumnLayoutModule>;
+export declare class DbxOneColumnLayoutModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxOneColumnLayoutModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxOneColumnLayoutModule, [typeof i1.DbxOneColumnComponent], [typeof i2.CommonModule, typeof i3.DbxTwoColumnLayoutModule], [typeof i1.DbxOneColumnComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxOneColumnLayoutModule>;
 }

package/lib/layout/column/two/two.column.back.directive.d.ts

@@ -3,14 +3,14 @@ import { AbstractSubscriptionDirective } from '@dereekb/dbx-core';
 import { TwoColumnsContextStore } from './two.column.store';
 import * as i0 from "@angular/core";
 /**
- * Used with an DbNgxTwoColumnsComponent to help respond to a "back" function.
+ * Used with an DbxTwoColumnsComponent to help respond to a "back" function.
  */
-export declare class DbNgxTwoColumnsBackDirective extends AbstractSubscriptionDirective implements OnInit {
+export declare class DbxTwoColumnsBackDirective extends AbstractSubscriptionDirective implements OnInit {
     readonly twoColumnsContextStore: TwoColumnsContextStore;
     back: EventEmitter<any>;
     constructor(twoColumnsContextStore: TwoColumnsContextStore);
     ngOnInit(): void;
     backClicked(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxTwoColumnsBackDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbNgxTwoColumnsBackDirective, "[dbxTwoColumnsBack]", never, {}, { "back": "dbxTwoColumnsBack"; }, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnsBackDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxTwoColumnsBackDirective, "[dbxTwoColumnsBack]", never, {}, { "back": "dbxTwoColumnsBack"; }, never>;
 }

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

@@ -8,7 +8,7 @@ import * as i0 from "@angular/core";
  *
  * Requires a TwoColumnsContextStore to be provided.
  */
-export declare class DbNgxTwoColumnsComponent {
+export declare class DbxTwoColumnsComponent {
     readonly twoColumnsContextStore: TwoColumnsContextStore;
     readonly showRight$: Observable<boolean>;
     readonly hideRight$: Observable<boolean>;
@@ -16,6 +16,6 @@ export declare class DbNgxTwoColumnsComponent {
     constructor(twoColumnsContextStore: TwoColumnsContextStore);
     reverseSizing: boolean;
     inSectionPage: boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxTwoColumnsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbNgxTwoColumnsComponent, "dbx-two-columns", ["columns"], { "reverseSizing": "reverseSizing"; "inSectionPage": "inSectionPage"; }, {}, never, ["[left]", "[right]"]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTwoColumnsComponent, "dbx-two-columns", ["columns"], { "reverseSizing": "reverseSizing"; "inSectionPage": "inSectionPage"; }, {}, never, ["[left]", "[right]"]>;
 }

package/lib/layout/column/two/two.column.full.left.directive.d.ts

@@ -3,9 +3,9 @@ import { OnDestroy } from '@angular/core';
 import { TwoColumnsContextStore } from './two.column.store';
 import * as i0 from "@angular/core";
 /**
- * Used with a DbNgxTwoColumnsComponent to set the full left to true.
+ * Used with a DbxTwoColumnsComponent to set the full left to true.
  */
-export declare class DbNgxTwoColumnsFullLeftDirective implements OnInit, OnDestroy {
+export declare class DbxTwoColumnsFullLeftDirective implements OnInit, OnDestroy {
     private readonly _twoColumnsContextStore;
     private _fullLeft;
     get fullLeft(): boolean;
@@ -13,6 +13,6 @@ export declare class DbNgxTwoColumnsFullLeftDirective implements OnInit, OnDestr
     constructor(_twoColumnsContextStore: TwoColumnsContextStore);
     ngOnInit(): void;
     ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxTwoColumnsFullLeftDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbNgxTwoColumnsFullLeftDirective, "[dbxTwoColumnsFullLeft]", never, { "fullLeft": "dbxTwoColumnsFullLeft"; }, {}, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnsFullLeftDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxTwoColumnsFullLeftDirective, "[dbxTwoColumnsFullLeft]", never, { "fullLeft": "dbxTwoColumnsFullLeft"; }, {}, never>;
 }