@dereekb/dbx-web 0.0.1 → 1.0.0

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

@@ -2,9 +2,9 @@ import * as i0 from "@angular/core";
 /**
  * Two Columns related component that sits at the top of the content bodies and wraps content.
  */
-export declare class DbNgxTwoColumnsColumnHeadComponent {
+export declare class DbxTwoColumnsColumnHeadComponent {
     block?: boolean;
     full?: boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxTwoColumnsColumnHeadComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbNgxTwoColumnsColumnHeadComponent, "dbx-two-columns-head", never, { "block": "block"; "full": "full"; }, {}, never, ["*"]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnsColumnHeadComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTwoColumnsColumnHeadComponent, "dbx-two-columns-head", never, { "block": "block"; "full": "full"; }, {}, never, ["*"]>;
 }

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

@@ -8,10 +8,10 @@ import * as i6 from "./two.column.full.left.directive";
 import * as i7 from "@angular/common";
 import * as i8 from "@angular/material/icon";
 import * as i9 from "@angular/material/button";
-import * as i10 from "../../../router/anchor/anchor.module";
+import * as i10 from "../../../router/layout/anchor/anchor.module";
 import * as i11 from "../../content/content.layout.module";
-export declare class DbNgxTwoColumnLayoutModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxTwoColumnLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbNgxTwoColumnLayoutModule, [typeof i1.DbNgxTwoColumnsComponent, typeof i2.DbNgxTwoColumnsRightComponent, typeof i3.DbNgxTwoColumnsColumnHeadComponent, typeof i4.DbNgxTwoColumnsSrefDirective, typeof i5.DbNgxTwoColumnsBackDirective, typeof i6.DbNgxTwoColumnsFullLeftDirective], [typeof i7.CommonModule, typeof i8.MatIconModule, typeof i9.MatButtonModule, typeof i10.DbNgxAnchorModule, typeof i11.DbNgxContentLayoutModule], [typeof i1.DbNgxTwoColumnsComponent, typeof i2.DbNgxTwoColumnsRightComponent, typeof i3.DbNgxTwoColumnsColumnHeadComponent, typeof i4.DbNgxTwoColumnsSrefDirective, typeof i5.DbNgxTwoColumnsBackDirective, typeof i6.DbNgxTwoColumnsFullLeftDirective]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbNgxTwoColumnLayoutModule>;
+export declare class DbxTwoColumnLayoutModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnLayoutModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxTwoColumnLayoutModule, [typeof i1.DbxTwoColumnsComponent, typeof i2.DbxTwoColumnsRightComponent, typeof i3.DbxTwoColumnsColumnHeadComponent, typeof i4.DbxTwoColumnsSrefDirective, typeof i5.DbxTwoColumnsBackDirective, typeof i6.DbxTwoColumnsFullLeftDirective], [typeof i7.CommonModule, typeof i8.MatIconModule, typeof i9.MatButtonModule, typeof i10.DbxAnchorModule, typeof i11.DbxContentLayoutModule], [typeof i1.DbxTwoColumnsComponent, typeof i2.DbxTwoColumnsRightComponent, typeof i3.DbxTwoColumnsColumnHeadComponent, typeof i4.DbxTwoColumnsSrefDirective, typeof i5.DbxTwoColumnsBackDirective, typeof i6.DbxTwoColumnsFullLeftDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxTwoColumnLayoutModule>;
 }

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

@@ -7,7 +7,7 @@ import * as i0 from "@angular/core";
 /**
  * Optional responsive component that wraps content on the right side and shows a navigation bar.
  */
-export declare class DbNgxTwoColumnsRightComponent implements AfterViewInit, OnDestroy {
+export declare class DbxTwoColumnsRightComponent implements AfterViewInit, OnDestroy {
     private readonly twoColumnsContextStore;
     private _showBack;
     header?: string;
@@ -19,6 +19,6 @@ export declare class DbNgxTwoColumnsRightComponent implements AfterViewInit, OnD
     get showBack(): boolean;
     set showBack(showBack: boolean);
     backClicked(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxTwoColumnsRightComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbNgxTwoColumnsRightComponent, "dbx-two-columns-right", never, { "header": "header"; "showBack": "showBack"; }, {}, never, ["[nav]", "*"]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnsRightComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxTwoColumnsRightComponent, "dbx-two-columns-right", never, { "header": "header"; "showBack": "showBack"; }, {}, never, ["[nav]", "*"]>;
 }

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

@@ -2,13 +2,13 @@ import { SegueRef } from '@dereekb/dbx-core';
 import { TwoColumnsContextStore } from './two.column.store';
 import * as i0 from "@angular/core";
 /**
- * Used with a DbNgxTwoColumnsComponent to set the backRef of the TwoColumnsContextStore.
+ * Used with a DbxTwoColumnsComponent to set the backRef of the TwoColumnsContextStore.
  */
-export declare class DbNgxTwoColumnsSrefDirective {
+export declare class DbxTwoColumnsSrefDirective {
     private readonly _twoColumnsContextStore;
     constructor(_twoColumnsContextStore: TwoColumnsContextStore);
     set refString(ref: string);
     set ref(ref: SegueRef);
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxTwoColumnsSrefDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbNgxTwoColumnsSrefDirective, "[dbxTwoColumnsSref]", never, { "refString": "dbxTwoColumnsSref"; "ref": "ref"; }, {}, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxTwoColumnsSrefDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxTwoColumnsSrefDirective, "[dbxTwoColumnsSref]", never, { "refString": "dbxTwoColumnsSref"; "ref": "ref"; }, {}, never>;
 }

package/lib/layout/column/two.scss

@@ -0,0 +1,114 @@
+@import 'shared';
+
+.two-column {
+  height: 100%;
+  max-width: 100%;
+  display: flex;
+  flex-direction: row;
+  overflow-x: hidden;
+}
+
+.left-column,
+.right-column {
+  @include fillContentHeight(1, 0);
+
+  .dbx-section-page-two & {
+    @include fillContentWithAppPageHeaderHeight();
+  }
+}
+
+.left-column {
+  @include mat-elevation(1);
+
+  width: $two-left-column-width;
+  flex: 0 0 auto;
+
+  overflow: auto;
+  // background: red;
+
+  .two-column-reverse-sizing & {
+    width: calc(100% - #{$two-left-column-width});
+    overflow: hidden;
+  }
+
+  .full-left & {
+    width: 100% !important;
+
+    .right-shown & {
+      width: $two-left-column-width;
+    }
+  }
+
+  @include if-small-screen {
+    width: 100% !important;
+
+    .right-shown & {
+      display: none !important;
+    }
+  }
+}
+
+.right-column {
+  flex: 1 1 auto;
+  max-width: calc(100% - #{$two-left-column-width});
+  overflow: hidden;
+  // background: green;
+
+  .two-column-reverse-sizing & {
+    max-width: $two-left-column-width;
+  }
+
+  @include if-small-screen {
+    max-width: 100% !important;
+    width: 100% !important;
+    padding-left: 0 !important;
+  }
+}
+
+.dbx-two-columns-head {
+  padding: 0 6px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
+  height: $second-navbar-height;
+
+  display: flex;
+  align-items: center;
+  overflow-y: hidden;
+
+  &.block {
+    display: block;
+  }
+
+  &.full {
+    padding: 0;
+  }
+}
+
+.two-columns-right {
+  height: 100%;
+
+  .two-columns-right-content {
+    height: calc(100% - #{$second-navbar-height});
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .two-columns-right-content-bottom {
+    min-height: 12px;
+    height: 3vh;
+  }
+
+  $two-columns-right-padding-size: 6px;
+
+  .back-button {
+    margin-right: $two-columns-right-padding-size;
+  }
+
+  .right-spacer {
+    padding-right: 5vw;
+  }
+
+  .side-spacer {
+    padding-left: $two-columns-right-padding-size;
+  }
+
+}

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

@@ -4,11 +4,11 @@ import * as i0 from "@angular/core";
 /**
  * CompactContextStore provider.
  */
-export declare class DbNgxCompactDirective {
+export declare class DbxCompactDirective {
     readonly compactContextStore: CompactContextStore;
     mode$: import("rxjs").Observable<CompactMode>;
     constructor(compactContextStore: CompactContextStore);
     set mode(mode: CompactMode | boolean);
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxCompactDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DbNgxCompactDirective, "[dbxCompact]", ["compact"], { "mode": "dbxCompact"; }, {}, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxCompactDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxCompactDirective, "[dbxCompact]", ["compact"], { "mode": "dbxCompact"; }, {}, never>;
 }

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

@@ -4,8 +4,8 @@ import * as i2 from "@angular/common";
 /**
  * Module for block components.
  */
-export declare class DbNgxCompactLayoutModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxCompactLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbNgxCompactLayoutModule, [typeof i1.DbNgxCompactDirective], [typeof i2.CommonModule], [typeof i1.DbNgxCompactDirective]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbNgxCompactLayoutModule>;
+export declare class DbxCompactLayoutModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxCompactLayoutModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxCompactLayoutModule, [typeof i1.DbxCompactDirective], [typeof i2.CommonModule], [typeof i1.DbxCompactDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxCompactLayoutModule>;
 }

package/lib/layout/content/_content.scss

@@ -0,0 +1,136 @@
+@use 'sass:map';
+@use 'sass:color';
+@use '../../style/theming';
+
+$content-max-width: theming.$content-max-width;
+$content-border-inner-padding: theming.$padding-3;
+
+$box-bottom-margin: 2vh;
+$box-padding: theming.$padding-4;
+$box-max-width: theming.$box-max-width;
+
+$max-small-content-container-width: calc($content-max-width / 3);
+$max-medium-content-container-width: calc($content-max-width / 2);
+$max-content-container-width: $content-max-width;
+
+$content-container-padding: theming.$padding-4;
+$content-container-padding-small-screen: theming.$padding-2;
+
+@mixin core() {
+
+  .dbx-content-border {
+    padding: $content-border-inner-padding;
+  }
+
+  .dbx-content-elevate {
+    padding: $content-border-inner-padding;
+    @include theming.elevation(2);
+  }
+
+  .dbx-content-box {
+    margin: auto;
+    padding: $box-padding;
+    margin-bottom: $box-bottom-margin;
+    max-width: $box-max-width;
+  }
+
+  .dbx-content,
+  .dbx-content-page {                   //dbx-content page always has page height
+    @include theming.page-height();
+  }
+
+  .dbx-content .dbx-content,            // if a child of another dbx-content, give it content height instead of page height.
+  .dbx-content-page .dbx-content,
+  .dbx-content-without-content-navbar {
+    @include theming.content-height();
+  }
+
+  .dbx-content-scroll-lock {
+    height: 100%;
+    overflow: hidden;
+    padding: 0 2px; // Override padding
+  }
+
+  .dbx-content-container {
+    margin: auto;
+    padding: 0 $content-container-padding;
+
+    // NOTE: the order of these classes matters.
+
+    // padding
+    &.container-padding-none {
+      padding: 0;
+    }
+
+    &.container-padding-min {
+      padding: 0 2px;
+    }
+
+    &.container-padding-small {
+      padding: 0 calc($content-container-padding / 3);
+    }
+
+    // width
+    &.container-small {
+      max-width: $max-small-content-container-width;
+    }
+
+    &.container-medium {
+      max-width: $max-medium-content-container-width;
+    }
+
+    &.container-wide {
+      max-width: $max-content-container-width;
+    }
+
+    // type
+    &.normal-container-type {
+      // No restriction.
+    }
+
+    &.content-container-type {
+      // @include fillContentWithAppPageHeaderHeight();
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+
+  }
+
+}
+
+@mixin color($theme-config) {
+  $color-config: theming.get-color-config($theme-config);
+  $background: map.get($color-config, 'background');
+  $content-border-background: theming.get-color-from-palette($background, 'hover');
+
+  .dbx-content-border {
+    // border-radius: 6px;
+    border: 3px dashed $content-border-background;
+  }
+
+  .dbx-content-container {
+
+    @include theming.if-small-screen($theme-config) {
+      padding: 0 $content-container-padding-small-screen;
+    }
+
+  }
+
+}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-layout-content') {
+    $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/content/content.border.directive.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+/**
+ * Section used to wrap content in a border with internal padding.
+ */
+export declare class DbxContentBorderDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxContentBorderDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxContentBorderDirective, "dbx-content-border,[dbx-content-border]", never, {}, {}, never>;
+}

package/lib/layout/content/content.box.directive.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+/**
+ * Component used to wrap content in a box with optionally elevation.
+ */
+export declare class DbxContentBoxDirective {
+    elevated: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxContentBoxDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxContentBoxDirective, "dbx-content-box, [dbx-content-box]", never, { "elevated": "elevated"; }, {}, never>;
+}

package/lib/layout/content/content.container.directive.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+export declare type DbxContentContainerPadding = 'none' | 'min' | 'small' | 'normal';
+export declare type DbxContentContainerWidth = 'small' | 'medium' | 'wide' | 'full';
+/**
+ * Component that limits the max-width of the content.
+ */
+export declare class DbxContentContainerDirective {
+    grow: string;
+    padding: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxContentContainerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxContentContainerDirective, "dbx-content-container,[dbx-content-container],.dbx-content-container", never, { "grow": "grow"; "padding": "padding"; }, {}, never>;
+}

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

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+/**
+ * Directive that sets the height of it's content to fill the page.
+ */
+export declare class DbxContentDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxContentDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxContentDirective, "dbx-content,[dbx-content]", never, {}, {}, never>;
+}

package/lib/layout/content/content.elevate.directive.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+/**
+ * Section used to elevate content in a pre-configured manner.
+ */
+export declare class DbxContentElevateDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxContentElevateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxContentElevateDirective, "dbx-content-elevate,[dbx-content-elevate]", never, {}, {}, never>;
+}

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

@@ -1,14 +1,16 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./content.component";
-import * as i2 from "./content.container.component";
-import * as i3 from "./content.bordered.component";
-import * as i4 from "./content.container.fullwidth.component";
-import * as i5 from "@angular/common";
+import * as i1 from "./content.directive";
+import * as i2 from "./content.container.directive";
+import * as i3 from "./content.border.directive";
+import * as i4 from "./content.elevate.directive";
+import * as i5 from "./content.box.directive";
+import * as i6 from "./content.page.directive";
+import * as i7 from "@angular/common";
 /**
  * Module for container-type components.
  */
-export declare class DbNgxContentLayoutModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxContentLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbNgxContentLayoutModule, [typeof i1.DbNgxContentComponent, typeof i2.DbNgxContentContainerComponent, typeof i3.DbNgxBorderedContentComponent, typeof i4.DbNgxFullWidthContentContainerComponent], [typeof i5.CommonModule], [typeof i1.DbNgxContentComponent, typeof i2.DbNgxContentContainerComponent, typeof i3.DbNgxBorderedContentComponent, typeof i4.DbNgxFullWidthContentContainerComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbNgxContentLayoutModule>;
+export declare class DbxContentLayoutModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxContentLayoutModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxContentLayoutModule, [typeof i1.DbxContentDirective, typeof i2.DbxContentContainerDirective, typeof i3.DbxContentBorderDirective, typeof i4.DbxContentElevateDirective, typeof i5.DbxContentBoxDirective, typeof i6.DbxContentPageDirective], [typeof i7.CommonModule], [typeof i1.DbxContentDirective, typeof i2.DbxContentContainerDirective, typeof i3.DbxContentBorderDirective, typeof i4.DbxContentElevateDirective, typeof i5.DbxContentBoxDirective, typeof i6.DbxContentPageDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxContentLayoutModule>;
 }

package/lib/layout/content/content.page.directive.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+/**
+ * Directive that sets the height of it's content to fill the page.
+ */
+export declare class DbxContentPageDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxContentPageDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxContentPageDirective, "dbx-content-page,[dbx-content-page]", never, {}, {}, never>;
+}

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

@@ -1,5 +1,7 @@
+export * from './content.border.directive';
+export * from './content.box.directive';
+export * from './content.directive';
+export * from './content.container.directive';
+export * from './content.elevate.directive';
 export * from './content.layout.module';
-export * from './content.bordered.component';
-export * from './content.component';
-export * from './content.container.component';
-export * from './content.container.fullwidth.component';
+export * from './content.page.directive';

package/lib/layout/flag/_flag.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-flag') {
+    $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/flag/flag.component.d.ts

@@ -3,8 +3,8 @@ import * as i0 from "@angular/core";
 /**
  * Toolbar-like component that wraps content. Generally sits at the top of a page.
  */
-export declare class DbNgxFlagComponent {
+export declare class DbxFlagComponent {
     color: ThemePalette;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxFlagComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbNgxFlagComponent, "dbx-flag", never, { "color": "color"; }, {}, never, ["*"]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFlagComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFlagComponent, "dbx-flag", never, { "color": "color"; }, {}, never, ["*"]>;
 }

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

@@ -6,8 +6,8 @@ import * as i4 from "@angular/material/toolbar";
 /**
  * Module for block components.
  */
-export declare class DbNgxFlagLayoutModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxFlagLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DbNgxFlagLayoutModule, [typeof i1.DbNgxFlagComponent, typeof i2.DbNgxFlagPromptComponent], [typeof i3.CommonModule, typeof i4.MatToolbarModule], [typeof i1.DbNgxFlagComponent, typeof i2.DbNgxFlagPromptComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DbNgxFlagLayoutModule>;
+export declare class DbxFlagLayoutModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFlagLayoutModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFlagLayoutModule, [typeof i1.DbxFlagComponent, typeof i2.DbxFlagPromptComponent], [typeof i3.CommonModule, typeof i4.MatToolbarModule], [typeof i1.DbxFlagComponent, typeof i2.DbxFlagPromptComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxFlagLayoutModule>;
 }

package/lib/layout/flag/flag.prompt.component.d.ts

@@ -3,9 +3,9 @@ import * as i0 from "@angular/core";
 /**
  * Pre-configured dbx-flag prompt to do something.
  */
-export declare class DbNgxFlagPromptComponent {
+export declare class DbxFlagPromptComponent {
     color: ThemePalette;
     text?: string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DbNgxFlagPromptComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DbNgxFlagPromptComponent, "dbx-flag-prompt", never, { "color": "color"; "text": "text"; }, {}, never, ["*"]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFlagPromptComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DbxFlagPromptComponent, "dbx-flag-prompt", never, { "color": "color"; "text": "text"; }, {}, never, ["*"]>;
 }

package/lib/layout/flex/_flex.scss

@@ -0,0 +1,76 @@
+@use '../../style/theming';
+
+// MARK: Variables
+$dbx-flex-group-padding: 8px;
+$dbx-flex-group-columns-count: 6;
+
+// MARK: Mixin
+@mixin core() {
+
+  .dbx-flex-group {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    align-content: stretch;
+    box-sizing: border-box;
+
+    // padding: $dbx-flex-group-padding;
+    margin: 0 #{-$dbx-flex-group-padding} #{-$dbx-flex-group-padding} 0;
+    // padding: 0 $dbx-flex-group-padding $dbx-flex-group-padding 0;
+
+    >* {
+      box-sizing: border-box;
+      padding: 0 $dbx-flex-group-padding $dbx-flex-group-padding 0;
+    }
+
+    @for $i from 1 through 6 {
+      .dbx-flex-#{$i} {
+        box-sizing: border-box;
+        padding: 0 $dbx-flex-group-padding $dbx-flex-group-padding 0;
+        flex: 1 1 calc((100% * (#{$i}/#{$dbx-flex-group-columns-count})));
+        max-width: calc((100% * (#{$i}/#{$dbx-flex-group-columns-count})));
+      }
+    }
+
+  }
+
+  .dbx-flex-group-relative>.dbx-flex-group,
+  .dbx-flex-group.dbx-flex-group-relative {
+    @for $i from 1 through 6 {
+      .dbx-flex-#{$i} {
+        max-width: unset;
+      }
+    }
+  }
+
+  .dbx-flex-group-small>.dbx-flex-group,
+  .dbx-flex-group.dbx-flex-group-small {
+    @for $i from 1 through 5 {
+      .dbx-flex-#{$i} {
+        box-sizing: border-box;
+        flex: 1 1 calc(100%);
+        max-width: 100%;
+      }
+    }
+  }
+
+}
+
+@mixin color($theme-config) {}
+
+@mixin typography($typography-config) {}
+
+@mixin theme($theme-config) {
+  @include theming.private-check-duplicate-theme-styles($theme-config, 'dbx-layout-flex') {
+    $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/flex/flex.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Size from 1 to 6. A flex size of 6 will take up the entire space/row, while a flex of 1 will take up 1/6th of the space/row.
+ */
+export declare type DbxFlexSize = 1 | 2 | 3 | 4 | 5 | 6;

package/lib/layout/flex/flex.group.directive.d.ts

@@ -0,0 +1,24 @@
+import { ScreenMediaWidthType } from '../../screen/screen';
+import { DbxScreenMediaService } from '../../screen/screen.service';
+import { ChangeDetectorRef, OnInit } from '@angular/core';
+import { AbstractSubscriptionDirective } from '@dereekb/dbx-core';
+import { Maybe } from '@dereekb/util';
+import * as i0 from "@angular/core";
+/**
+ * Used to declare a dbxFlexGroup.
+ */
+export declare class DbxFlexGroupDirective extends AbstractSubscriptionDirective implements OnInit {
+    private readonly _dbxScreenMediaService;
+    readonly cdRef: ChangeDetectorRef;
+    content: boolean;
+    relative: boolean;
+    private _small;
+    private _breakpoint;
+    readonly isSmallScreen$: import("rxjs").Observable<boolean>;
+    get small(): boolean;
+    constructor(_dbxScreenMediaService: DbxScreenMediaService, cdRef: ChangeDetectorRef);
+    ngOnInit(): void;
+    set breakpoint(breakpoint: Maybe<ScreenMediaWidthType>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFlexGroupDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxFlexGroupDirective, "[dbxFlexGroup]", never, { "content": "content"; "relative": "relative"; "breakpoint": "breakpoint"; }, {}, never>;
+}

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

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./flex.group.directive";
+import * as i2 from "./flex.size.directive";
+import * as i3 from "@angular/common";
+export declare class DbxFlexLayoutModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFlexLayoutModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DbxFlexLayoutModule, [typeof i1.DbxFlexGroupDirective, typeof i2.DbxFlexSizeDirective], [typeof i3.CommonModule], [typeof i1.DbxFlexGroupDirective, typeof i2.DbxFlexSizeDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DbxFlexLayoutModule>;
+}

package/lib/layout/flex/flex.size.directive.d.ts

@@ -0,0 +1,10 @@
+import { DbxFlexSize } from './flex';
+import * as i0 from "@angular/core";
+/**
+ * Applies the proper dbx-flex size class based on the input.
+ */
+export declare class DbxFlexSizeDirective {
+    size: DbxFlexSize;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DbxFlexSizeDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DbxFlexSizeDirective, "[dbxFlexSize]", never, { "size": "dbxFlexSize"; }, {}, never>;
+}

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

@@ -0,0 +1,4 @@
+export * from './flex.group.directive';
+export * from './flex.size.directive';
+export * from './flex.layout.module';
+export * from './flex';