Filter menu shell

libs/design-system/tune-menu/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

libs/design-system/tune-menu/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/tune-menu.component';

libs/design-system/tune-menu/src/lib/tune-menu.component.html

@@ -0,0 +1,91 @@
+@if (!menuOptions().hideHeaderSection) {
+  <div hraFeature="filters" class="header-section">
+    <div class="drawer-header">
+      <span class="drawer-title">{{ menuOptions().headline }}</span>
+      <div class="filler"></div>
+      @if (!isWideScreen() || !menuOptions().hideCloseButton) {
+        <button
+          hraFeature="toggle"
+          [hraClickEvent]="{ opened: formClosed() }"
+          hraHoverEvent
+          mat-icon-button
+          (click)="toggleForm.emit()"
+          aria-label="Open or close tune menu"
+        >
+          <hra-icon class="menu-icon" fontIcon="close" />
+        </button>
+      }
+    </div>
+    <div class="header-subtext">{{ menuOptions().subtext }}</div>
+  </div>
+}
+<ng-scrollbar hraScrollOverflowFade>
+  <form>
+    @if (!menuOptions().hideCustomizeSection) {
+      <div class="customize-section" [formGroup]="form().controls.customize">
+        <div class="customize-header">
+          <hra-icon class="customize-icon" fontIcon="tune" />
+          <span class="customize-title">Customize</span>
+        </div>
+        @let categories = menuOptions().toggleCategories;
+        @if (categories) {
+          <mat-button-toggle-group
+            formControlName="toggle"
+            [value]="form().value.customize?.toggle"
+            class="toggle-group"
+          >
+            @for (category of categories; track category.id) {
+              <mat-button-toggle hraClickEvent [hraFeature]="category.id" [value]="category">
+                {{ category.label }}
+              </mat-button-toggle>
+            }
+          </mat-button-toggle-group>
+        }
+        @if (menuOptions().viewAsOptions) {
+          <mat-form-field subscriptSizing="dynamic">
+            <hra-icon class="select-icon" matPrefix>table_view</hra-icon>
+            <mat-label>View as</mat-label>
+            <mat-select formControlName="viewAs">
+              @for (option of menuOptions().viewAsOptions; track option) {
+                <mat-option [value]="option.id">{{ option.label }}</mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        }
+
+        <mat-form-field subscriptSizing="dynamic">
+          <hra-icon class="select-icon" matPrefix>sort</hra-icon>
+          <mat-label>Sort by</mat-label>
+          <mat-select formControlName="sortBy">
+            @for (option of menuOptions().sortByOptions; track option) {
+              <mat-option [value]="option.id">{{ option.label }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+
+        <mat-form-field subscriptSizing="dynamic">
+          <hra-icon class="select-icon" matPrefix>category</hra-icon>
+          <mat-label>Group by</mat-label>
+          <mat-select formControlName="groupBy">
+            @for (option of menuOptions().groupByOptions; track option) {
+              <mat-option [value]="option.id">{{ option.label }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      </div>
+    }
+    <div class="filters-section">
+      <div class="filters-header">
+        <hra-icon class="filter-icon" fontIcon="filter_list" />
+        <span class="filters-title">Filters</span>
+      </div>
+      @for (value of formValues(); track $index) {
+        @if ($index > 0) {
+          <mat-divider />
+        }
+        <div class="placeholder">{{ value[0] }}</div>
+      }
+    </div>
+    <div class="menu-content"></div>
+  </form>
+</ng-scrollbar>

libs/design-system/tune-menu/src/lib/tune-menu.component.scss

@@ -0,0 +1,121 @@
+@use '@angular/material' as mat;
+@use '../../../styles/utils';
+@use '../../../styles/vars';
+
+:host {
+  display: flex;
+  flex-direction: column;
+  color: vars.$secondary;
+  padding: 1.5rem;
+  height: 100%;
+
+  .header-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    padding-bottom: 1.5rem;
+
+    .filler {
+      flex-grow: 1;
+    }
+
+    .header-subtext {
+      @include utils.use-font(body, medium);
+      color: vars.$primary;
+    }
+  }
+
+  .drawer-title,
+  .customize-title,
+  .filters-title {
+    @include utils.use-font(title, small);
+    padding: 0.5rem 0;
+  }
+
+  .customize-header,
+  .drawer-header,
+  .filters-header {
+    display: flex;
+    align-items: center;
+  }
+
+  .filters-header {
+    margin-bottom: 1rem;
+  }
+
+  .filter-icon,
+  .customize-icon {
+    padding: 0.5rem;
+  }
+
+  .menu-icon,
+  .menu-content {
+    transition: 0.3s;
+  }
+
+  .menu-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    opacity: 1;
+  }
+
+  ng-scrollbar {
+    padding-top: 1rem;
+  }
+
+  mat-button-toggle-group {
+    width: fit-content;
+  }
+
+  .customize-section {
+    padding-bottom: 2.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .select-icon {
+    padding-left: 0.75rem;
+    padding-right: 0.5rem;
+  }
+
+  &.closed {
+    .menu-icon {
+      transform: rotate(180deg);
+    }
+
+    .menu-content {
+      pointer-events: none;
+      opacity: 0;
+    }
+
+    ng-scrollbar {
+      overflow-y: hidden;
+    }
+
+    ::ng-deep scrollbars {
+      display: none;
+    }
+
+    ::ng-deep .ng-scroll-content {
+      --_viewport-padding-right: 0.75rem;
+    }
+  }
+
+  mat-label {
+    @include utils.use-font(label, medium);
+  }
+
+  mat-divider {
+    border-top-color: vars.$outline-variant;
+  }
+
+  .placeholder {
+    height: 2.5rem;
+    @include utils.use-font(label, medium);
+    padding: 0.25rem 0.75rem;
+    align-content: center;
+    pointer-events: none;
+  }
+}

libs/design-system/tune-menu/src/lib/tune-menu.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TuneMenuComponent } from './tune-menu.component';
+
+describe('TuneMenuComponent', () => {
+  let component: TuneMenuComponent;
+  let fixture: ComponentFixture<TuneMenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TuneMenuComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TuneMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

libs/design-system/tune-menu/src/lib/tune-menu.component.stories.ts

@@ -0,0 +1,25 @@
+import { type Meta, type StoryObj } from '@storybook/angular';
+
+import { TuneMenuComponent } from './tune-menu.component';
+
+const meta: Meta<TuneMenuComponent> = {
+  component: TuneMenuComponent,
+  title: 'Design System / Tune Menu',
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/gQEMLugLjweDvbsNNUVffD/HRA-Design-System-Repository?node-id=12494-166042&t=U6WxS9uCkPILoojn-4',
+    },
+  },
+};
+export default meta;
+export const Primary: StoryObj<TuneMenuComponent> = {
+  render: () => ({
+    styles: [
+      `.hra-app {
+          margin: -1rem;
+          height: 100vh;
+      }`,
+    ],
+  }),
+};