feat(design)!: shard sidebar component (#2670)

BREAKING CHANGE: `DaffSidebarModule` has moved to its own package. Update imports to `@daffodil/design/sidebar`

apps/daffio/src/app/core/sidebar/actions/sidebar.actions.ts

@@ -1,6 +1,6 @@
 import { Action } from '@ngrx/store';
 
-import { DaffSidebarMode } from '@daffodil/design';
+import { DaffSidebarMode } from '@daffodil/design/sidebar';
 
 export enum SidebarActionTypes {
   ToggleSidebarAction = '[Daffio-Sidebar] Toggle Sidebar Action',

apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.spec.ts

@@ -19,7 +19,7 @@ import {
   DaffSidebarModule,
   DaffSidebarViewportComponent,
   DaffSidebarComponent,
-} from '@daffodil/design';
+} from '@daffodil/design/sidebar';
 
 import { DaffioSidebarViewportContainer } from './sidebar-viewport.component';
 import {

apps/daffio/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.ts

@@ -11,7 +11,7 @@ import { DaffioDoc } from 'apps/daffio/src/app/docs/models/doc';
 import { DaffioDocsService } from 'apps/daffio/src/app/docs/services/docs.service';
 import { Observable } from 'rxjs';
 
-import { DaffSidebarMode } from '@daffodil/design';
+import { DaffSidebarMode } from '@daffodil/design/sidebar';
 
 import { DaffioGuideList } from '../../../../docs/models/guide-list';
 import {

apps/daffio/src/app/core/sidebar/effects/sidebar-routing-mode.effects.ts

@@ -6,41 +6,29 @@ import {
   ofType,
 } from '@ngrx/effects';
 import {
-  ROUTER_NAVIGATION,
   ROUTER_NAVIGATED,
   RouterNavigatedAction,
 } from '@ngrx/router-store';
 import { Action } from '@ngrx/store';
 import {
   Observable,
-  of,
-  asyncScheduler,
   combineLatest,
 } from 'rxjs';
-import {
-  switchMap,
-  delay,
-  map,
-  tap,
-} from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 
-import {
-  DaffBreakpoints,
-  DaffSidebarModeEnum,
-} from '@daffodil/design';
+import { DaffBreakpoints } from '@daffodil/design';
+import { DaffSidebarModeEnum } from '@daffodil/design/sidebar';
 
 import * as SidebarActions from '../actions/sidebar.actions';
 import { computeDeepestSidebarMode } from '../helpers/computeDeepestSidebarMode';
 
-
 @Injectable()
 export class DaffioSidebarRoutingModeEffects {
   constructor(
     private actions$: Actions,
     private breakpointsObserver: BreakpointObserver,
   ) { }
 
-
   changeModeWhenVisitingConfiguredRoute$ = createEffect(() => (): Observable<Action> => combineLatest(
     this.actions$.pipe<RouterNavigatedAction>(ofType(ROUTER_NAVIGATED)),
     this.breakpointsObserver.observe(DaffBreakpoints.TABLET),

apps/daffio/src/app/core/sidebar/helpers/computeDeepestSidebarMode.ts

@@ -1,7 +1,6 @@
 import { ActivatedRouteSnapshot } from '@angular/router';
 
-import { DaffSidebarMode } from '@daffodil/design';
-
+import { DaffSidebarMode } from '@daffodil/design/sidebar';
 
 export const computeDeepestSidebarMode = (snapshot: ActivatedRouteSnapshot): DaffSidebarMode => {
   if(snapshot.firstChild){

apps/daffio/src/app/core/sidebar/reducers/index.ts

@@ -5,7 +5,7 @@ import {
   MemoizedSelector,
 } from '@ngrx/store';
 
-import { DaffSidebarMode } from '@daffodil/design';
+import { DaffSidebarMode } from '@daffodil/design/sidebar';
 
 import * as fromDaffioSidebar from './sidebar.reducer';
 

apps/daffio/src/app/core/sidebar/reducers/sidebar.reducer.ts

@@ -1,4 +1,4 @@
-import { DaffSidebarMode } from '@daffodil/design';
+import { DaffSidebarMode } from '@daffodil/design/sidebar';
 
 import {
   SidebarActionTypes,

apps/daffio/src/app/core/sidebar/sidebar.module.ts

@@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { DaffSidebarModule } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffSidebarModule } from '@daffodil/design/sidebar';
 
 import { DaffioSidebarViewportContainer } from './containers/sidebar-viewport/sidebar-viewport.component';
 import { DaffioSidebarStateModule } from './sidebar.state.module';

apps/demo/src/app/core/sidebar/containers/sidebar-viewport/sidebar-viewport.component.spec.ts

@@ -18,8 +18,8 @@ import {
   DaffSidebarModule,
   DaffSidebarSide,
   DaffSidebarViewportComponent,
-} from '@daffodil/design';
-import { DaffSidebarMode } from '@daffodil/design';
+  DaffSidebarMode,
+} from '@daffodil/design/sidebar';
 
 import { SidebarViewportContainer } from './sidebar-viewport.component';
 import {

apps/demo/src/app/core/sidebar/containers/sidebar/sidebar.component.spec.ts

@@ -10,12 +10,12 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { provideMockStore } from '@ngrx/store/testing';
 import { of } from 'rxjs';
 
+import { DaffLinkSetModule } from '@daffodil/design';
+import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
 import {
   DaffSidebarModule,
   DaffSidebarComponent,
-  DaffLinkSetModule,
-} from '@daffodil/design';
-import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
+} from '@daffodil/design/sidebar';
 import { DaffNavigationTree } from '@daffodil/navigation';
 import { DaffNavigationLoad } from '@daffodil/navigation/state';
 import {

apps/demo/src/app/core/sidebar/containers/sidebar/sidebar.component.ts

@@ -15,7 +15,7 @@ import {
   DaffSidebarSide,
   DaffSidebarMode,
   DaffSidebarComponent,
-} from '@daffodil/design';
+} from '@daffodil/design/sidebar';
 import { DaffNavigationTree } from '@daffodil/navigation';
 import {
   DaffNavigationFacade,

apps/demo/src/app/core/sidebar/sidebar.module.ts

@@ -3,11 +3,9 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
-import {
-  DaffSidebarModule,
-  DaffLinkSetModule,
-} from '@daffodil/design';
+import { DaffLinkSetModule } from '@daffodil/design';
 import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
+import { DaffSidebarModule } from '@daffodil/design/sidebar';
 import { DaffNavigationStateModule } from '@daffodil/navigation/state';
 
 import { SidebarListComponent } from './components/sidebar-list/sidebar-list.component';

apps/demo/src/app/core/template/template/template.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { DaffSidebarModule } from '@daffodil/design';
+import { DaffSidebarModule } from '@daffodil/design/sidebar';
 
 import { TemplateComponent } from './template.component';
 import { NewsletterModule } from '../../../newsletter/newsletter.module';

apps/design-land/src/app/app.module.ts

@@ -5,13 +5,13 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 import {
-  DaffSidebarModule,
   DaffLinkSetModule,
   DAFF_THEME_INITIALIZER,
   DaffNavbarModule,
 } from '@daffodil/design';
 import { DaffArticleModule } from '@daffodil/design/article';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffSidebarModule } from '@daffodil/design/sidebar';
 import { DaffThemeSwitchButtonModule } from '@daffodil/theme-switch';
 
 import { DesignLandAppRoutingModule } from './app-routing.module';

apps/design-land/src/app/core/sidebar-viewport/sidebar-viewport.component.spec.ts

@@ -13,7 +13,7 @@ import {
   DaffSidebarModule,
   DaffSidebarViewportComponent,
   DaffSidebarComponent,
-} from '@daffodil/design';
+} from '@daffodil/design/sidebar';
 
 import { DesignLandSidebarViewportComponent } from './sidebar-viewport.component';
 

apps/design-land/src/app/core/sidebar-viewport/sidebar-viewport.component.ts

@@ -10,11 +10,11 @@ import {
   Observable,
 } from 'rxjs';
 
+import { DaffBreakpoints } from '@daffodil/design';
 import {
-  DaffBreakpoints,
   DaffSidebarMode,
   DaffSidebarModeEnum,
-} from '@daffodil/design';
+} from '@daffodil/design/sidebar';
 
 @Component({
   selector: 'design-land-sidebar-viewport',

apps/design-land/src/app/core/sidebar-viewport/sidebar-viewport.module.ts

@@ -4,12 +4,10 @@ import { RouterModule } from '@angular/router';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 import { DaffLogoModule } from '@daffodil/branding';
-import {
-  DaffNavbarModule,
-  DaffSidebarModule,
-} from '@daffodil/design';
+import { DaffNavbarModule } from '@daffodil/design';
 import { DaffArticleModule } from '@daffodil/design/article';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffSidebarModule } from '@daffodil/design/sidebar';
 import { DaffThemeSwitchButtonModule } from '@daffodil/theme-switch';
 
 import { DesignLandSidebarViewportComponent } from './sidebar-viewport.component';

libs/design/scss/theme.scss

@@ -37,8 +37,7 @@
 @use '../src/molecules/navbar/navbar-theme' as navbar;
 @use '../notification/src/notification-theme' as notification;
 @use '../src/molecules/paginator/paginator-theme' as paginator;
-@use '../src/molecules/sidebar/sidebar/sidebar-theme' as sidebar;
-@use '../src/molecules/sidebar/sidebar-viewport/sidebar-viewport-theme' as sidebar-viewport;
+@use '../sidebar/src/sidebar-theme' as sidebar;
 @use '../scss/state/skeleton/mixins' as skeleton;
 @use '../tree/src/tree-theme' as tree;
 
@@ -81,6 +80,5 @@
 	@include notification.daff-notification-theme($theme);
 	@include paginator.daff-paginator-theme($theme);
 	@include sidebar.daff-sidebar-theme($theme);
-	@include sidebar-viewport.daff-sidebar-viewport-theme($theme);
 	@include tree.daff-tree-theme($theme);
 }

libs/design/sidebar/examples/src/basic-sidebar/basic-sidebar.module.ts

@@ -1,10 +1,10 @@
 import { NgModule } from '@angular/core';
 
 import {
-  DaffSidebarModule,
   DaffNavbarModule,
   DaffLinkSetModule,
 } from '@daffodil/design';
+import { DaffSidebarModule } from '@daffodil/design/sidebar';
 
 import { BasicSidebarComponent } from './basic-sidebar.component';
 

libs/design/sidebar/examples/src/over-and-under-sidebars/over-and-under-sidebars.module.ts

@@ -3,11 +3,11 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 import {
-  DaffSidebarModule,
   DaffNavbarModule,
   DaffLinkSetModule,
 } from '@daffodil/design';
 import { DaffButtonModule } from '@daffodil/design/button';
+import { DaffSidebarModule } from '@daffodil/design/sidebar';
 
 import { OverandUnderSidebarsComponent } from './over-and-under-sidebars.component';
 

libs/design/sidebar/examples/src/side-fixed-sidebar/side-fixed-sidebar.module.ts

@@ -1,10 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import {
-  DaffNavbarModule,
-  DaffSidebarModule,
-} from '@daffodil/design';
+import { DaffNavbarModule } from '@daffodil/design';
+import { DaffSidebarModule } from '@daffodil/design/sidebar';
 
 import { SideFixedSidebarComponent } from './side-fixed-sidebar.component';
 

libs/design/sidebar/examples/src/sidebar-with-sticky-content/sidebar-with-sticky-content.module.ts

@@ -1,9 +1,7 @@
 import { NgModule } from '@angular/core';
 
-import {
-  DaffNavbarModule,
-  DaffSidebarModule,
-} from '@daffodil/design';
+import { DaffNavbarModule } from '@daffodil/design';
+import { DaffSidebarModule } from '@daffodil/design/sidebar';
 
 import { SidebarWithStickyContentComponent } from './sidebar-with-sticky-content.component';
 

libs/design/sidebar/ng-package.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/design/sidebar",
+  "deleteDestPath": false,
+  "lib": {
+    "entryFile": "src/index.ts",
+    "styleIncludePaths": ["../src/scss"]
+  }
+} 

libs/design/src/molecules/sidebar/animation/sidebar-viewport-animation-state.ts → libs/design/sidebar/src/animation/sidebar-viewport-animation-state.ts

@@ -1,6 +1,6 @@
+import { AnimationStateWithParams } from '@daffodil/design';
+
 import { DaffSidebarAnimationStates } from './sidebar-animation';
-import { DaffSidebarAnimationState } from './sidebar-animation-state';
-import { AnimationStateWithParams } from '../../../core/public_api';
 
 export type DaffSidebarViewportAnimationState = DaffSidebarAnimationStates.OPEN | DaffSidebarAnimationStates.CLOSED;
 

libs/design/sidebar/src/index.ts

@@ -0,0 +1 @@
+export * from './public_api';

libs/design/src/molecules/sidebar/sidebar-header/sidebar-header.component.scss → libs/design/sidebar/src/sidebar-header/sidebar-header.component.scss

@@ -1,4 +1,4 @@
-@use '../../../../scss/typography' as t;
+@use '../../../scss/typography' as t;
 
 .daff-sidebar-header {
 	display: flex;

libs/design/src/molecules/sidebar/sidebar-header/sidebar-header.component.ts → libs/design/sidebar/src/sidebar-header/sidebar-header.component.ts

@@ -2,14 +2,8 @@ import {
   Component,
   HostBinding,
   ChangeDetectionStrategy,
-  Output,
-  EventEmitter,
-  Input,
   ViewEncapsulation,
-  ContentChild,
-  ElementRef,
 } from '@angular/core';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'daff-sidebar-header',

libs/design/src/molecules/sidebar/sidebar/sidebar-theme.scss → libs/design/sidebar/src/sidebar-theme.scss

@@ -1,4 +1,4 @@
-@use '../../../../scss/core';
+@use '../../scss/core';
 
 @mixin daff-sidebar-theme($theme) {
 	$base: core.daff-map-deep-get($theme, 'core.base');
@@ -9,4 +9,14 @@
 		background: $base;
 		color: $font-color;
 	}
+
+	.daff-sidebar-viewport {
+		background: $base;
+		color: $base-contrast;
+
+		&__content {
+			background: $base;
+			color: $base-contrast;
+		}
+	}
 }

libs/design/src/molecules/sidebar/sidebar-viewport/sidebar-viewport.component.spec.ts → libs/design/sidebar/src/sidebar-viewport/sidebar-viewport.component.spec.ts

@@ -12,12 +12,13 @@ import {
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
-import { DaffNavPlacement } from './nav-placement';
-import { DaffSidebarViewportComponent } from './sidebar-viewport.component';
 import {
   DaffBackdropComponent,
   DaffBackdropModule,
-} from '../../backdrop/public_api';
+} from '@daffodil/design';
+
+import { DaffNavPlacement } from './nav-placement';
+import { DaffSidebarViewportComponent } from './sidebar-viewport.component';
 import { DaffSidebarComponent } from '../sidebar/sidebar.component';
 
 @Component({ template: `

libs/design/src/molecules/sidebar/sidebar-viewport/specs/defaults.spec.ts → libs/design/sidebar/src/sidebar-viewport/specs/defaults.spec.ts

@@ -6,8 +6,9 @@ import {
 } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
+import { DaffBackdropModule } from '@daffodil/design';
+
 import { DaffSidebarViewportComponent } from './../sidebar-viewport.component';
-import { DaffBackdropModule } from '../../../backdrop/public_api';
 import { DaffSidebarAnimationStates } from '../../animation/sidebar-animation';
 import { DaffSidebarComponent } from '../../sidebar/sidebar.component';
 

libs/design/src/molecules/sidebar/sidebar.module.ts → libs/design/sidebar/src/sidebar.module.ts

@@ -2,13 +2,14 @@ import { A11yModule } from '@angular/cdk/a11y';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
+import { DaffBackdropModule } from '@daffodil/design';
+
 import { DaffSidebarComponent } from './sidebar/sidebar.component';
 import { DaffSidebarFooterComponent } from './sidebar-footer/sidebar-footer.component';
 import { DaffSidebarHeaderActionDirective } from './sidebar-header/sidebar-header-action/sidebar-header-action.directive';
 import { DaffSidebarHeaderTitleDirective } from './sidebar-header/sidebar-header-title/sidebar-header-title.directive';
 import { DaffSidebarHeaderComponent } from './sidebar-header/sidebar-header.component';
 import { DaffSidebarViewportComponent } from './sidebar-viewport/sidebar-viewport.component';
-import { DaffBackdropModule } from '../backdrop/backdrop.module';
 
 @NgModule({
   imports: [