@flywheel-io/vision 0.16.0 → 1.0.0

package/README.md

@@ -1,61 +1,57 @@
-# Project Vision
+# Vision Component Library
 
-Flywheel UI elements provided as Angular components
+[![NPM Version](https://img.shields.io/npm/v/%40flywheel-io%2Fvision?style=flat&color=black)](https://www.npmjs.com/package/@flywheel-io/vision)
+[![storybook badge](https://img.shields.io/badge/Storybook-Storybook?style=flat&logo=storybook&color=black)](https://cdn.flywheel.io/docs/vision/latest/)
+[![gitlab badge](https://img.shields.io/badge/Gitlab-Gitlab?style=flat&logo=gitlab&color=black)](https://gitlab.com/flywheel-io/product/frontend/vision)
+[![figma badge](https://img.shields.io/badge/Figma-Figma?style=flat&logo=figma&color=black)](https://www.figma.com/file/yjtHt1Pn8c8t5moaab3pIH/Vision-Design-System?type=design&node-id=0-1&mode=design&t=uWLS8FwgwmsyB5ge-0)
+[![slack badge](https://img.shields.io/badge/Slack-Slack?style=flat&logo=slack&color=black)](https://flywheel-io.slack.com/archives/C06F731KZUG)
+[![jira badge](https://img.shields.io/badge/Jira-Jira?style=flat&logo=jira&color=black)](https://flywheelio.atlassian.net/jira/software/c/projects/VDS/boards/1219)
 
-## Installation
+Vision is Flywheel's Design System with the goal of unifying the look and feel of all applications throughout Flywheel. This is a collection of scss styles and angular components for aiding and simplifying frontend work.
 
-Install the package with NPM.
+# Installation
 
-```shell
-npm install @flywheel-io/vision
+To use vision first install it from npm
+
+```bash
+$ npm install --save @flywheel-io/vision
+```
+
+Then you need to do some scss setup, in your global scss stylesheet add:
+
+```scss
+@use '@flywheel-io/vision' as vision;
+
+@include vision.icons; // adds the icon font face and glyph classes
+@include vision.colors; // defines the colors vision relies on
+
+// optional inclusions
+@include vision.mat-theme; // uses the vision angular material theme
+@include vision.global-typography; // adds global styles for text elements
 ```
 
-### Dependencies
+For more info on colors and theming check out the [colors docs](https://cdn.flywheel.io/docs/vision/latest/?path=/docs/docs-colors--docs)
 
-If you're using NPM >= 7, peer dependencies for this package will be installed automatically if they're not in your project already.
-However, older versions of NPM will produce warnings about unmet peer dependencies but you will have to install them explictly yourself.
+And just like that, you're ready to use vision! 🥳
 
-## Usage
+# Using Components
 
-For an Angular application, import and add the modules you would like to use to your AppModule or other module.
+To use the components, you just need to import their module into the module you're working in
 
 ```ts
-import '@flywheel-io/vision/styles.scss'; // global styles and theme
-import { CommonModule } from '@angular/common';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import {
-  FwAlertModule, FwAvatarModule, FwBreadcrumbsModule,
-  FwButtonModule, FwButtonGroupModule, FwCardModule,
-  FwChipModule, FwDialogsModule, FwIconModule,
-  FwIconButtonModule, FwLayoutsModule, FwMenuModule,
-  FwSectionHeadingModule, FwSelectMenuModule,
-  FwStepperModule, FwTextInputModule
-} from '@flywheel-io/vision';
+import { FwAlertModule } from '@flywheel-io/vision';
 
 @NgModule({
   imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    CommonModule,
     FwAlertModule,
-    FwAvatarModule,
-    FwBreadcrumbsModule,
-    FwButtonModule,
-    FwButtonGroupModule,
-    FwCardModule,
-    FwChipModule,
-    FwDialogsModule,
-    FwIconModule,
-    FwIconButtonModule,
-    FwLayoutsModule,
-    FwMenuModule,
-    FwSectionHeadingModule,
-    FwSelectMenuModule,
-    FwStepperModule,
-    FwTextInputModule
-  ],
-})
-export class AppModule {
-}
+    ...anyOtherFwModulesYouMightNeed,
+  ...
 ```
+
+Then add it to your html
+
+```html
+<fw-alert description="Look I'm an alert"></fw-alert>
+```
+
+# For more details on using specific components, including their module name and selector, you can check out its docs page in [the storybook](https://cdn.flywheel.io/docs/vision/latest/)

package/components/alert/alert.component.d.ts

@@ -9,5 +9,5 @@ export declare class FwAlertComponent {
     showClose?: boolean;
     close?: EventEmitter<null>;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwAlertComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwAlertComponent, "fw-alert", never, { "description": "description"; "icon": "icon"; "severity": "severity"; "title": "title"; "variant": "variant"; "showClose": "showClose"; }, { "close": "close"; }, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwAlertComponent, "fw-alert", never, { "description": "description"; "icon": "icon"; "severity": "severity"; "title": "title"; "variant": "variant"; "showClose": "showClose"; }, { "close": "close"; }, never, ["*", "fw-button"], false>;
 }

package/components/app-icon/app-icon.component.d.ts

@@ -1,8 +1,9 @@
 import * as i0 from "@angular/core";
 export declare class FwAppIconComponent {
-    label?: string;
+    title?: string;
     icon?: string;
-    color?: 'primary' | 'dark' | 'light' | 'gradient';
+    imageUrl?: string;
+    color?: 'primary' | 'dark' | 'light' | 'gradient' | 'transparent';
     size?: 'small' | 'medium' | 'large' | 'extra-large';
     variant?: 'interactive' | 'hover' | 'focused' | 'static';
     badge?: string;
@@ -12,5 +13,5 @@ export declare class FwAppIconComponent {
     role: string;
     get cssClass(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwAppIconComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwAppIconComponent, "fw-app-icon", never, { "label": "label"; "icon": "icon"; "color": "color"; "size": "size"; "variant": "variant"; "badge": "badge"; "tabindex": "tabindex"; "locked": "locked"; "animated": "animated"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwAppIconComponent, "fw-app-icon", never, { "title": "title"; "icon": "icon"; "imageUrl": "imageUrl"; "color": "color"; "size": "size"; "variant": "variant"; "badge": "badge"; "tabindex": "tabindex"; "locked": "locked"; "animated": "animated"; }, {}, never, never, false>;
 }

package/components/badge/badge.component.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare class FwBadgeComponent {
+    color?: 'default' | 'primary' | 'secondary' | 'error' | 'warning' | 'success';
+    variant?: 'standard' | 'dot' | 'static';
+    value?: string;
+    get cssClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwBadgeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwBadgeComponent, "fw-badge", never, { "color": "color"; "variant": "variant"; "value": "value"; }, {}, never, ["*"], false>;
+}

package/components/badge/badge.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./badge.component";
+import * as i2 from "@angular/common";
+export declare class FwBadgeModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwBadgeModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FwBadgeModule, [typeof i1.FwBadgeComponent], [typeof i2.CommonModule], [typeof i1.FwBadgeComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<FwBadgeModule>;
+}

package/components/breadcrumbs/breadcrumbs.component.d.ts

@@ -0,0 +1,9 @@
+import { AfterContentInit, QueryList } from '@angular/core';
+import { FwCrumbComponent } from './crumb.component';
+import * as i0 from "@angular/core";
+export declare class FwBreadcrumbsComponent implements AfterContentInit {
+    crumbs: QueryList<FwCrumbComponent>;
+    ngAfterContentInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwBreadcrumbsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwBreadcrumbsComponent, "fw-breadcrumbs", never, {}, {}, ["crumbs"], ["fw-crumb"], false>;
+}

package/components/breadcrumbs/breadcrumbs.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./breadcrumbs.component";
+import * as i2 from "./crumb.component";
+import * as i3 from "@angular/common";
+import * as i4 from "../icon/icon.module";
+export declare class FwBreadcrumbsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwBreadcrumbsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FwBreadcrumbsModule, [typeof i1.FwBreadcrumbsComponent, typeof i2.FwCrumbComponent], [typeof i3.CommonModule, typeof i4.FwIconModule], [typeof i1.FwBreadcrumbsComponent, typeof i2.FwCrumbComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<FwBreadcrumbsModule>;
+}

package/components/breadcrumbs/crumb.component.d.ts

@@ -0,0 +1,12 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class FwCrumbComponent {
+    title: string;
+    description?: string;
+    href?: string;
+    last?: boolean;
+    click: EventEmitter<Event>;
+    handleClick(evt: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwCrumbComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwCrumbComponent, "fw-crumb", never, { "title": "title"; "description": "description"; "href": "href"; "last": "last"; }, { "click": "click"; }, never, never, false>;
+}

package/components/button/button.component.d.ts

@@ -3,11 +3,11 @@ export declare class FwButtonComponent {
     get classes(): string;
     color?: 'primary' | 'secondary' | 'danger' | 'slate' | 'skeleton' | 'warning' | 'success';
     size?: 'small' | 'medium' | 'large';
-    type?: 'ghost' | 'solid' | 'outline';
+    variant?: 'ghost' | 'solid' | 'outline';
     disabled?: boolean;
     fullWidth?: boolean;
     leftIcon?: string;
     rightIcon?: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwButtonComponent, "fw-button", never, { "color": "color"; "size": "size"; "type": "type"; "disabled": "disabled"; "fullWidth": "fullWidth"; "leftIcon": "leftIcon"; "rightIcon": "rightIcon"; }, {}, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwButtonComponent, "fw-button", never, { "color": "color"; "size": "size"; "variant": "variant"; "disabled": "disabled"; "fullWidth": "fullWidth"; "leftIcon": "leftIcon"; "rightIcon": "rightIcon"; }, {}, never, ["*"], false>;
 }

package/components/card/card-attribute/card-attribute.component.d.ts

@@ -1,7 +1,7 @@
 import * as i0 from "@angular/core";
 export declare class FwCardAttributeComponent {
     icon: string;
-    label: string;
+    title: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwCardAttributeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwCardAttributeComponent, "fw-card-attr", never, { "icon": "icon"; "label": "label"; }, {}, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwCardAttributeComponent, "fw-card-attr", never, { "icon": "icon"; "title": "title"; }, {}, never, ["*"], false>;
 }

package/components/card/card-header/card-header.component.d.ts

@@ -1,8 +1,8 @@
 import * as i0 from "@angular/core";
 export declare class FwCardHeaderComponent {
     title?: string;
-    subtitle?: string;
+    description?: string;
     leftIcon?: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwCardHeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwCardHeaderComponent, "fw-card-header", never, { "title": "title"; "subtitle": "subtitle"; "leftIcon": "leftIcon"; }, {}, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwCardHeaderComponent, "fw-card-header", never, { "title": "title"; "description": "description"; "leftIcon": "leftIcon"; }, {}, never, ["fw-app-icon", "*"], false>;
 }

package/components/chip/chip.component.d.ts

@@ -5,8 +5,8 @@ export declare class FwChipComponent {
     variant?: 'enabled' | 'hovered' | 'focused' | 'disabled';
     color?: 'slate' | 'primary' | 'secondary' | 'red' | 'green' | 'orange';
     icon?: string;
-    label?: string;
-    secondaryLabel?: string;
+    title?: string;
+    description?: string;
     showClose?: boolean;
     disabled?: boolean;
     selected?: boolean;
@@ -15,5 +15,5 @@ export declare class FwChipComponent {
     select?: EventEmitter<object | string>;
     handleClose(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwChipComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwChipComponent, "fw-chip", never, { "value": "value"; "variant": "variant"; "color": "color"; "icon": "icon"; "label": "label"; "secondaryLabel": "secondaryLabel"; "showClose": "showClose"; "disabled": "disabled"; "selected": "selected"; "selectable": "selectable"; }, { "close": "close"; "select": "select"; }, never, ["fw-avatar"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwChipComponent, "fw-chip", never, { "value": "value"; "variant": "variant"; "color": "color"; "icon": "icon"; "title": "title"; "description": "description"; "showClose": "showClose"; "disabled": "disabled"; "selected": "selected"; "selectable": "selectable"; }, { "close": "close"; "select": "select"; }, never, ["fw-avatar"], false>;
 }

package/components/dialog/dialog.service.d.ts

@@ -0,0 +1,17 @@
+import { Dialog, DialogConfig, DialogRef } from '@angular/cdk/dialog';
+import { ComponentType, Overlay, OverlayContainer } from '@angular/cdk/overlay';
+import { Injector } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class FwDialogService extends Dialog {
+    private overlay;
+    injector: Injector;
+    _overlayContainerRef: OverlayContainer;
+    dialogRef: DialogRef<any>;
+    constructor(overlay: Overlay, _injector: Injector, injector: Injector, _dialogConfig: DialogConfig, _overlayContainerRef: OverlayContainer, scrollStrategy: any, _parentDialog: Dialog, dialogRef: DialogRef<any>);
+    /**
+     * Open a custom component in an overlay and positioned near the top
+     */
+    openDialog<T>(component: ComponentType<T>, config?: DialogConfig, topOffset?: string): DialogRef<unknown, any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwDialogService, [null, null, null, { optional: true; }, null, null, { optional: true; skipSelf: true; }, { optional: true; }]>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<FwDialogService>;
+}

package/components/dialog/dialogs.module.d.ts

@@ -4,12 +4,12 @@ import * as i2 from "./dialog-confirm.component";
 import * as i3 from "./dialog-simple.component";
 import * as i4 from "@angular/common";
 import * as i5 from "@angular/cdk/dialog";
-import * as i6 from "../shared/pipes/pipes.module";
+import * as i6 from "../button/button.module";
 import * as i7 from "../icon-button/icon-button.module";
-import * as i8 from "../button/button.module";
-import * as i9 from "../icon/icon.module";
+import * as i8 from "../icon/icon.module";
+import * as i9 from "../shared/pipes/pipes.module";
 export declare class FwDialogsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<FwDialogsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<FwDialogsModule, [typeof i1.FwDialogComponent, typeof i1.FwDialogHeaderComponent, typeof i1.FwDialogContentComponent, typeof i1.FwDialogActionsComponent, typeof i2.FwDialogConfirmComponent, typeof i3.FwDialogSimpleComponent], [typeof i4.CommonModule, typeof i5.DialogModule, typeof i6.PipesModule, typeof i7.FwIconButtonModule, typeof i8.FwButtonModule, typeof i9.FwIconModule], [typeof i1.FwDialogComponent, typeof i1.FwDialogHeaderComponent, typeof i1.FwDialogContentComponent, typeof i1.FwDialogActionsComponent, typeof i2.FwDialogConfirmComponent, typeof i3.FwDialogSimpleComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FwDialogsModule, [typeof i1.FwDialogActionsComponent, typeof i1.FwDialogComponent, typeof i2.FwDialogConfirmComponent, typeof i1.FwDialogContentComponent, typeof i1.FwDialogHeaderComponent, typeof i3.FwDialogSimpleComponent], [typeof i4.CommonModule, typeof i5.DialogModule, typeof i6.FwButtonModule, typeof i7.FwIconButtonModule, typeof i8.FwIconModule, typeof i9.PipesModule], [typeof i1.FwDialogActionsComponent, typeof i1.FwDialogComponent, typeof i2.FwDialogConfirmComponent, typeof i1.FwDialogContentComponent, typeof i1.FwDialogHeaderComponent, typeof i3.FwDialogSimpleComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<FwDialogsModule>;
 }

package/components/layouts/grid/grid.component.d.ts

@@ -0,0 +1,19 @@
+import * as i0 from "@angular/core";
+export declare class FwGridComponent {
+    get cssClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwGridComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwGridComponent, "fw-grid", never, {}, {}, never, ["fw-grid-item"], false>;
+}
+export declare class FwGridItemComponent {
+    cols: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    padded?: boolean;
+    rounded?: boolean;
+    variant?: 'page-light' | 'page-shaded' | 'card-header' | 'card-background';
+    get cssClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwGridItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwGridItemComponent, "fw-grid-item", never, { "cols": "cols"; "sm": "sm"; "md": "md"; "lg": "lg"; "xl": "xl"; "padded": "padded"; "rounded": "rounded"; "variant": "variant"; }, {}, never, ["*"], false>;
+}

package/components/layouts/layouts.module.d.ts

@@ -2,10 +2,11 @@ import * as i0 from "@angular/core";
 import * as i1 from "./context/context.component";
 import * as i2 from "./toolbar/toolbar.component";
 import * as i3 from "./layout-group.component";
-import * as i4 from "@angular/common";
-import * as i5 from "../icon/icon.module";
+import * as i4 from "./grid/grid.component";
+import * as i5 from "@angular/common";
+import * as i6 from "../icon/icon.module";
 export declare class FwLayoutsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<FwLayoutsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<FwLayoutsModule, [typeof i1.FwLayoutContextComponent, typeof i2.FwLayoutToolbarComponent, typeof i3.FwLayoutGroupComponent], [typeof i4.CommonModule, typeof i5.FwIconModule], [typeof i1.FwLayoutContextComponent, typeof i2.FwLayoutToolbarComponent, typeof i3.FwLayoutGroupComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FwLayoutsModule, [typeof i1.FwLayoutContextComponent, typeof i2.FwLayoutToolbarComponent, typeof i3.FwLayoutGroupComponent, typeof i4.FwGridComponent, typeof i4.FwGridItemComponent], [typeof i5.CommonModule, typeof i6.FwIconModule], [typeof i1.FwLayoutContextComponent, typeof i2.FwLayoutToolbarComponent, typeof i3.FwLayoutGroupComponent, typeof i4.FwGridComponent, typeof i4.FwGridItemComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<FwLayoutsModule>;
 }

package/components/legacy/dialog/choice-dialog.component.d.ts

@@ -17,7 +17,7 @@ export interface FwChoiceDialogData {
 /**
  * @deprecated Legacy Vision: Please upgrade to the newer FwDialogComponent
  */
-export declare class FwChoiceDialogComponent {
+export declare class FwLegacyChoiceDialogComponent {
     private data;
     class: string;
     'test-id': string;
@@ -29,7 +29,7 @@ export declare class FwChoiceDialogComponent {
     constructor(data: FwChoiceDialogData);
     get showCloseButton(): boolean;
     getTestId(choice: Choice): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FwChoiceDialogComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwChoiceDialogComponent, "fw-dialog-choice-dialog", never, {}, {}, never, never, false>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwLegacyChoiceDialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwLegacyChoiceDialogComponent, "fw-legacy-dialog-choice-dialog", never, {}, {}, never, never, false>;
 }
 export {};

package/components/legacy/dialog/confirm-dialog.component.d.ts

@@ -7,7 +7,7 @@ export interface FwConfirmDialogData {
 /**
  * @deprecated Legacy Vision: Please upgrade to the newer FwDialogConfirmComponent
  */
-export declare class FwConfirmDialogComponent {
+export declare class FwLegacyConfirmDialogComponent {
     private data;
     class: string;
     'test-id': string;
@@ -15,6 +15,6 @@ export declare class FwConfirmDialogComponent {
     content: string;
     html: string;
     constructor(data: FwConfirmDialogData);
-    static ɵfac: i0.ɵɵFactoryDeclaration<FwConfirmDialogComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwConfirmDialogComponent, "fw-dialog-confirm-dialog", never, {}, {}, never, never, false>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwLegacyConfirmDialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwLegacyConfirmDialogComponent, "fw-dialog-confirm-dialog", never, {}, {}, never, never, false>;
 }

package/components/legacy/dialog/dialog.module.d.ts

@@ -12,8 +12,8 @@ import * as i10 from "@angular/cdk/portal";
 /**
  * @deprecated Legacy Vision: Please upgrade to the newer FwDialogsModule
  */
-export declare class FwDialogModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<FwDialogModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<FwDialogModule, [typeof i1.FwChoiceDialogComponent, typeof i2.FwConfirmDialogComponent, typeof i3.FwErrorDialogComponent, typeof i4.FwPortalDialogComponent], [typeof i5.CommonModule, typeof i6.MatButtonModule, typeof i7.MatDialogModule, typeof i8.MatIconModule, typeof i9.PipesModule, typeof i10.PortalModule], [typeof i1.FwChoiceDialogComponent, typeof i2.FwConfirmDialogComponent, typeof i3.FwErrorDialogComponent, typeof i4.FwPortalDialogComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<FwDialogModule>;
+export declare class FwLegacyDialogModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwLegacyDialogModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FwLegacyDialogModule, [typeof i1.FwLegacyChoiceDialogComponent, typeof i2.FwLegacyConfirmDialogComponent, typeof i3.FwLegacyErrorDialogComponent, typeof i4.FwLegacyPortalDialogComponent], [typeof i5.CommonModule, typeof i6.MatButtonModule, typeof i7.MatDialogModule, typeof i8.MatIconModule, typeof i9.PipesModule, typeof i10.PortalModule], [typeof i1.FwLegacyChoiceDialogComponent, typeof i2.FwLegacyConfirmDialogComponent, typeof i3.FwLegacyErrorDialogComponent, typeof i4.FwLegacyPortalDialogComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<FwLegacyDialogModule>;
 }

package/components/legacy/dialog/dialog.service.d.ts

@@ -12,7 +12,7 @@ export interface OpenDialog<T> {
 /**
  * @deprecated Legacy Vision: Please upgrade to the newer CdkDialogService
  */
-export declare class FwDialogService {
+export declare class FwLegacyDialogService {
     private matDialog;
     readonly dialogs: OpenDialog<unknown>[];
     private config;
@@ -20,6 +20,6 @@ export declare class FwDialogService {
     closeAll(component?: Type<unknown>): void;
     open<T, D, R>(component: Type<T>, config?: MatDialogConfig<D>): MatDialogRef<T, R>;
     registerDialog(component: Type<unknown>, config: DialogConfig<unknown>): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FwDialogService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<FwDialogService>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwLegacyDialogService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<FwLegacyDialogService>;
 }

package/components/legacy/dialog/error-dialog.component.d.ts

@@ -6,13 +6,13 @@ export interface FwErrorDialogData {
 /**
  * @deprecated Legacy Vision: Please upgrade to the newer FwDialogConfirmComponent
  */
-export declare class FwErrorDialogComponent {
+export declare class FwLegacyErrorDialogComponent {
     private data;
     private ref;
     class: string;
     'test-id': string;
     message: string;
-    constructor(data: FwErrorDialogData, ref: MatDialogRef<FwErrorDialogComponent>);
-    static ɵfac: i0.ɵɵFactoryDeclaration<FwErrorDialogComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwErrorDialogComponent, "fw-dialog-error-dialog", never, {}, {}, never, never, false>;
+    constructor(data: FwErrorDialogData, ref: MatDialogRef<FwLegacyErrorDialogComponent>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwLegacyErrorDialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwLegacyErrorDialogComponent, "fw-dialog-error-dialog", never, {}, {}, never, never, false>;
 }

package/components/legacy/dialog/portal-dialog.component.d.ts

@@ -15,7 +15,7 @@ export interface FwPortalDialogData {
 /**
  * @deprecated Legacy Vision: Please upgrade to the newer FwDialogComponent
  */
-export declare class FwPortalDialogComponent implements OnDestroy {
+export declare class FwLegacyPortalDialogComponent implements OnDestroy {
     private data;
     private viewContainerRef;
     class: string;
@@ -27,7 +27,7 @@ export declare class FwPortalDialogComponent implements OnDestroy {
     constructor(data: FwPortalDialogData, viewContainerRef: ViewContainerRef);
     ngOnDestroy(): void;
     attached(ref: CdkPortalOutletAttachedRef): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FwPortalDialogComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwPortalDialogComponent, "fw-dialog-portal-dialog", never, {}, {}, never, never, false>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwLegacyPortalDialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwLegacyPortalDialogComponent, "fw-dialog-portal-dialog", never, {}, {}, never, never, false>;
 }
 export {};

package/components/menu/menu-container/menu-container.component.d.ts

@@ -10,6 +10,7 @@ export declare class FwMenuContainerComponent implements AfterContentInit {
     shadow?: 'none' | 'small' | 'medium' | 'large' | 'extra-large' | 'inner';
     showFilter?: boolean;
     filterText?: string;
+    offset?: string;
     menu: FwMenuComponent;
     get classes(): string;
     get style(): SafeStyle;
@@ -17,5 +18,5 @@ export declare class FwMenuContainerComponent implements AfterContentInit {
     ngAfterContentInit(): void;
     filterTextChange(text: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwMenuContainerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwMenuContainerComponent, "fw-menu-container", never, { "width": "width"; "maxHeight": "maxHeight"; "border": "border"; "shadow": "shadow"; "showFilter": "showFilter"; "filterText": "filterText"; }, {}, ["menu"], ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwMenuContainerComponent, "fw-menu-container", never, { "width": "width"; "maxHeight": "maxHeight"; "border": "border"; "shadow": "shadow"; "showFilter": "showFilter"; "filterText": "filterText"; "offset": "offset"; }, {}, ["menu"], ["*"], false>;
 }

package/components/menu/menu-item/menu-item.component.d.ts

@@ -4,18 +4,19 @@ export declare class FwMenuItemComponent {
     value?: string;
     variant?: 'default' | 'modern' | 'button';
     size?: 'default' | 'compact';
-    label: string;
-    subtitle?: string;
+    title: string;
+    description?: string;
     icon?: string;
     disabled?: boolean;
     showCheckbox?: boolean;
     hidden?: boolean;
     collapsed?: boolean;
     href?: string;
+    target?: string;
     click: EventEmitter<string>;
     focused?: boolean;
     selected?: boolean;
     handleClick(evt: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwMenuItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwMenuItemComponent, "fw-menu-item", never, { "value": "value"; "variant": "variant"; "size": "size"; "label": "label"; "subtitle": "subtitle"; "icon": "icon"; "disabled": "disabled"; "showCheckbox": "showCheckbox"; "hidden": "hidden"; "collapsed": "collapsed"; "href": "href"; "focused": "focused"; "selected": "selected"; }, { "click": "click"; }, never, ["fw-avatar", "*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwMenuItemComponent, "fw-menu-item", never, { "value": "value"; "variant": "variant"; "size": "size"; "title": "title"; "description": "description"; "icon": "icon"; "disabled": "disabled"; "showCheckbox": "showCheckbox"; "hidden": "hidden"; "collapsed": "collapsed"; "href": "href"; "target": "target"; "focused": "focused"; "selected": "selected"; }, { "click": "click"; }, never, ["fw-avatar", "*"], false>;
 }

package/components/popover/popover-panel/popover-panel.component.d.ts

@@ -0,0 +1,10 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class FwPopoverPanelComponent {
+    position: 'above' | 'above-left' | 'above-right' | 'below' | 'below-left' | 'below-right' | 'left' | 'left-above' | 'left-below' | 'right' | 'right-above' | 'right-below';
+    mouseLeave: EventEmitter<MouseEvent>;
+    get classes(): string;
+    hidePopover(e: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwPopoverPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwPopoverPanelComponent, "fw-popover-panel", never, { "position": "position"; }, { "mouseLeave": "mouseLeave"; }, never, ["*"], false>;
+}

package/components/popover/popover.component.d.ts

@@ -0,0 +1,19 @@
+import { CdkOverlayOrigin, ConnectedPosition, FlexibleConnectedPositionStrategyOrigin } from '@angular/cdk/overlay';
+import { OnChanges } from '@angular/core';
+import { FwPopoverPanelComponent } from './popover-panel/popover-panel.component';
+import * as i0 from "@angular/core";
+export declare class FwPopoverComponent implements OnChanges {
+    position: 'above' | 'above-left' | 'above-right' | 'below' | 'below-left' | 'below-right' | 'left' | 'left-above' | 'left-below' | 'right' | 'right-above' | 'right-below';
+    trigger: CdkOverlayOrigin | FlexibleConnectedPositionStrategyOrigin;
+    isOpen: boolean;
+    action: 'mouseenter' | 'click';
+    flyoutPanel: FwPopoverPanelComponent;
+    positionMap: {
+        [key: string]: ConnectedPosition;
+    };
+    ngOnChanges(): void;
+    backdropClick(): void;
+    handlePanelLeave(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwPopoverComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwPopoverComponent, "fw-popover", never, { "position": "position"; "trigger": "trigger"; "isOpen": "isOpen"; "action": "action"; "flyoutPanel": "flyoutPanel"; }, {}, never, ["*"], false>;
+}

package/components/popover/popover.module.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./popover.component";
+import * as i2 from "./popover-panel/popover-panel.component";
+import * as i3 from "@angular/common";
+import * as i4 from "../layouts/layouts.module";
+import * as i5 from "@angular/cdk/overlay";
+export declare class FwPopoverModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwPopoverModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FwPopoverModule, [typeof i1.FwPopoverComponent, typeof i2.FwPopoverPanelComponent], [typeof i3.CommonModule, typeof i4.FwLayoutsModule, typeof i5.OverlayModule], [typeof i1.FwPopoverComponent, typeof i2.FwPopoverPanelComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<FwPopoverModule>;
+}

package/components/section-heading/back-button/back-button.component.d.ts

@@ -2,6 +2,7 @@ import { Location } from '@angular/common';
 import * as i0 from "@angular/core";
 export declare class BackButtonComponent {
     location: Location;
+    class: string;
     constructor(location: Location);
     static ɵfac: i0.ɵɵFactoryDeclaration<BackButtonComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BackButtonComponent, "fw-back-button", never, {}, {}, never, never, false>;

package/components/section-heading/section-heading.component.d.ts

@@ -1,10 +1,11 @@
 import * as i0 from "@angular/core";
 export declare class FwSectionHeadingComponent {
-    heading: string;
+    class: string;
+    title: string;
     description?: string;
     backButton?: boolean;
     icon?: string;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<FwSectionHeadingComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwSectionHeadingComponent, "fw-section-heading", never, { "heading": "heading"; "description": "description"; "backButton": "backButton"; "icon": "icon"; }, {}, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwSectionHeadingComponent, "fw-section-heading", never, { "title": "title"; "description": "description"; "backButton": "backButton"; "icon": "icon"; }, {}, never, ["fw-icon", "p", "*"], false>;
 }

package/components/section-heading/section-heading.module.d.ts

@@ -1,11 +1,12 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./section-heading.component";
-import * as i2 from "./back-button/back-button.component";
-import * as i3 from "@angular/common";
-import * as i4 from "../button/button.module";
-import * as i5 from "../icon/icon.module";
+import * as i1 from "./back-button/back-button.component";
+import * as i2 from "./section-heading.component";
+import * as i3 from "./subsection-heading/subsection-heading.component";
+import * as i4 from "@angular/common";
+import * as i5 from "../button/button.module";
+import * as i6 from "../icon/icon.module";
 export declare class FwSectionHeadingModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<FwSectionHeadingModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<FwSectionHeadingModule, [typeof i1.FwSectionHeadingComponent, typeof i2.BackButtonComponent], [typeof i3.CommonModule, typeof i4.FwButtonModule, typeof i5.FwIconModule], [typeof i1.FwSectionHeadingComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FwSectionHeadingModule, [typeof i1.BackButtonComponent, typeof i2.FwSectionHeadingComponent, typeof i3.FwSubsectionHeadingComponent], [typeof i4.CommonModule, typeof i5.FwButtonModule, typeof i6.FwIconModule], [typeof i2.FwSectionHeadingComponent, typeof i3.FwSubsectionHeadingComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<FwSectionHeadingModule>;
 }

package/components/section-heading/subsection-heading/subsection-heading.component.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+export declare class FwSubsectionHeadingComponent {
+    title: string;
+    icon?: string;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<FwSubsectionHeadingComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwSubsectionHeadingComponent, "fw-subsection-heading", never, { "title": "title"; "icon": "icon"; }, {}, never, ["*"], false>;
+}

package/components/select-menu/multi-select-menu/multi-select-menu.component.d.ts

@@ -7,7 +7,7 @@ import * as i0 from "@angular/core";
 export declare class FwMultiSelectMenuComponent implements ControlValueAccessor, AfterContentInit, OnChanges, OnDestroy {
     options: object[];
     valueProperty?: string;
-    labelProperty?: string;
+    titleProperty?: string;
     iconProperty?: string;
     disabled?: boolean;
     useCheckbox?: boolean;
@@ -50,5 +50,5 @@ export declare class FwMultiSelectMenuComponent implements ControlValueAccessor,
     handleKeyDown(event: KeyboardEvent): void;
     handleKeyUp(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FwMultiSelectMenuComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FwMultiSelectMenuComponent, "fw-multi-select", never, { "options": "options"; "valueProperty": "valueProperty"; "labelProperty": "labelProperty"; "iconProperty": "iconProperty"; "disabled": "disabled"; "useCheckbox": "useCheckbox"; "closeOnSelect": "closeOnSelect"; "filterItemsOnSelect": "filterItemsOnSelect"; "maxSelectedShown": "maxSelectedShown"; "width": "width"; "minHeight": "minHeight"; "maxHeight": "maxHeight"; "optionsWidth": "optionsWidth"; "maxOptionsHeight": "maxOptionsHeight"; "placeholder": "placeholder"; }, {}, ["menuItems"], ["[fw-menu-item, fw-menu-separator]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FwMultiSelectMenuComponent, "fw-multi-select", never, { "options": "options"; "valueProperty": "valueProperty"; "titleProperty": "titleProperty"; "iconProperty": "iconProperty"; "disabled": "disabled"; "useCheckbox": "useCheckbox"; "closeOnSelect": "closeOnSelect"; "filterItemsOnSelect": "filterItemsOnSelect"; "maxSelectedShown": "maxSelectedShown"; "width": "width"; "minHeight": "minHeight"; "maxHeight": "maxHeight"; "optionsWidth": "optionsWidth"; "maxOptionsHeight": "maxOptionsHeight"; "placeholder": "placeholder"; }, {}, ["menuItems"], ["[fw-menu-item, fw-menu-separator]"], false>;
 }