@one-paragon/angular-utilities 2.2.4 → 2.2.6

package/src/table-builder/components/in-filter/in-filter.component.ts

@@ -0,0 +1,65 @@
+import { ChangeDetectionStrategy, Component, ChangeDetectorRef, inject, input } from '@angular/core';
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { FieldType } from '../../interfaces/report-def';
+import { AutoFocusDirective } from '../../../utilities';
+
+@Component({
+  selector: 'lib-in-filter',
+  templateUrl: './in-filter.component.html',
+  styleUrls: ['./in-filter.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: InFilterComponent,
+    multi: true
+  }],
+  imports: [
+    FormsModule, AutoFocusDirective
+  ]
+})
+export class InFilterComponent implements ControlValueAccessor {
+  private ref = inject(ChangeDetectorRef);
+
+  FieldType = FieldType;
+  $type = input.required<FieldType>({ alias: 'type' })
+  value: (string | number | undefined)[] = [undefined];
+
+  constructor() {
+    this.value = [undefined];
+  }
+  writeValue(obj: any[]): void {
+    if(!obj?.length) obj = [undefined];
+    this.value = obj;
+    this.ref.markForCheck();
+  }
+  onChange = (_: any) => { };
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  onTouched = () => { };
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  addInput(){
+    this.value = [...this.value, undefined];
+    this.ref.markForCheck();
+    this.onChange(this.value);
+  }
+
+  removeInput(index: number){
+    this.value = [...this.value];
+    this.value.splice(index, 1);
+    this.ref.markForCheck();
+    this.onChange(this.value);
+  }
+
+  onValueChange(i:number, value: number | string){
+    this.value = [...this.value];
+    this.value[i] = value;
+    this.ref.markForCheck();
+    this.onChange(this.value);
+  }
+
+}

package/{table-builder/components/index.d.ts → src/table-builder/components/index.ts}

@@ -1,9 +1,9 @@
-export * from './date-filter/date-filter.component';
-export * from './filter/filter.component';
-export * from './gen-col-displayer/gen-col-displayer.component';
-export * from './table-container-filter/gen-filter-displayer/gen-filter-displayer.component';
-export * from './table-container-filter/filter-list/filter-list.component';
-export * from './generic-table/generic-table.component';
-export * from './table-container/table-container.component';
-export * from './generic-table/paginator.component';
-export * from './group-by-list/group-by-list.component';
+export * from './date-filter/date-filter.component';
+export * from './filter/filter.component';
+export * from './gen-col-displayer/gen-col-displayer.component';
+export * from './table-container-filter/gen-filter-displayer/gen-filter-displayer.component';
+export * from './table-container-filter/filter-list/filter-list.component';
+export * from './generic-table/generic-table.component';
+export * from './table-container/table-container.component';
+export * from './generic-table/paginator.component';
+export * from './group-by-list/group-by-list.component';

package/src/table-builder/components/initialization-component/initialization.component.html

@@ -0,0 +1,78 @@
+<ng-template #link  let-value='value' let-element='element' let-additional="additional" let-styles="innerStyles">
+  @let link = additional.link | func : element;
+  @if(link)
+  {
+    <tb-link-column [element]="element" [additional]="additional" [link]="$any(link)">
+      <span [styler]="styles" [element]="element">{{value}}</span>
+    </tb-link-column>
+  }
+  @else
+  {
+    <span [styler]="styles" [element]="element">{{value}}</span>
+  }
+</ng-template>
+
+<ng-template #routerLink  let-value='value' let-element='element' let-additional="additional" let-styles="innerStyles">
+  @let link = additional.link | func : element;
+  @if(link)
+  {
+    <tb-router-link-column [element]="element" [additional]="additional" [link]="$any(link)">
+      <span [styler]="styles" [element]="element">{{value}}</span>
+    </tb-router-link-column>
+  }
+  @else
+  {
+    <span [styler]="styles" [element]="element">{{value}}</span>
+  }
+
+</ng-template>
+
+<ng-template #linkWithIcon  let-value='value' let-element='element' let-additional="additional" let-styles="innerStyles">
+  @let link = additional.link | func : element;
+  @if(link)
+  {
+    <tb-link-column [element]="element" [additional]="additional"  [link]="$any(link)">
+      <mat-icon [styler]="styles" [element]="element">{{ value}}</mat-icon>
+    </tb-link-column>
+  }
+  @else
+  {
+    <span [styler]="styles" [element]="element">{{value}}</span>
+  }
+</ng-template>
+
+<ng-template #routerLinkWithIcon  let-value='value' let-element='element' let-additional="additional" let-styles="innerStyles">
+  @let link = additional.link | func : element;
+  @if(link)
+  {
+    <tb-link-column [element]="element" [additional]="additional"  [link]="$any(link)">
+      <mat-icon [styler]="styles" [element]="element">{{ value}}</mat-icon>
+    </tb-link-column>
+  }
+  @else
+  {
+    <mat-icon [styler]="styles" [element]="element">{{ value}}</mat-icon>
+  }
+</ng-template>
+
+<ng-template #imageUrl  let-value='value'>
+  <span>
+    <img height="75px" width="75px" [src]="value" />
+  </span>
+</ng-template>
+
+<ng-template #arrayNewLine let-value='value' let-element='element' let-additional="additional" let-styles="innerStyles">
+  <tb-new-line-array-column [value]='value' [additional]='additional' [styler]="styles" [element]="element"/>
+</ng-template>
+
+<ng-template #arrayComma let-value='value' let-element='element' let-additional="additional" let-styles="innerStyles">
+  <tb-comma-array-column [value]='value' [additional]='additional' [styler]="styles" [element]="element"/>
+</ng-template>
+
+<ng-template #default let-value='value' let-element='element' let-styles="innerStyles">
+  <span [styler]="styles" [element]="element">{{value}}</span>
+</ng-template>
+
+<ng-template #defaultWithIcon  let-value='value' let-element='element' let-styles="innerStyles">
+  <mat-icon [styler]="styles" [element]="element">{{value}}</mat-icon>
+</ng-template>

package/src/table-builder/components/initialization-component/initialization.component.ts

@@ -0,0 +1,27 @@
+import { Component, TemplateRef, viewChild } from "@angular/core";
+import { LinkColumnComponent, RouterLinkColumnComponent } from "../link-column.component";
+import { ArrayCommaColumnComponent, ArrayNewLineColumnComponent } from "../array-column.component";
+import { MatIcon } from "@angular/material/icon";
+import { StylerDirective } from "../../../utilities/directives/styler";
+import { FunctionPipe } from "../../../utilities";
+
+@Component({
+  selector: 'initialization',
+  templateUrl: './initialization.component.html',
+  imports: [
+    LinkColumnComponent, ArrayCommaColumnComponent, MatIcon,
+    RouterLinkColumnComponent, ArrayNewLineColumnComponent,
+    StylerDirective, FunctionPipe
+  ]
+})
+export class InitializationComponent {
+  $linkTemplate = viewChild.required<TemplateRef<any>>('link');
+  $routerLinkTemplate = viewChild.required<TemplateRef<any>>('routerLink');
+  $linkWithIconTemplate = viewChild.required<TemplateRef<any>>('linkWithIcon');
+  $routerLinkWithIconTemplate = viewChild.required<TemplateRef<any>>('routerLinkWithIcon');
+  $imageUrlTemplate = viewChild.required<TemplateRef<any>>('imageUrl');
+  $arrayNewLineTemplate = viewChild.required<TemplateRef<any>>('arrayNewLine');
+  $arrayCommaTemplate = viewChild.required<TemplateRef<any>>('arrayComma');
+  $defaultTemplate = viewChild.required<TemplateRef<any>>('default');
+  $defaultWithIcon = viewChild.required<TemplateRef<any>>('defaultWithIcon');
+}

package/src/table-builder/components/link-column.component.ts

@@ -0,0 +1,42 @@
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { LinkInfo } from "../services/link-creator.service";
+
+@Component({
+  selector: "tb-router-link-column",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    RouterModule
+  ],
+  template: `
+  <a target="{{additional().target}}"
+    [routerLink]=" [link()]"
+    [queryParams]="queryParams()"
+    [fragment]="routerLinkOptions().fragment"
+    [preserveFragment]="routerLinkOptions().preserveFragment"
+    [queryParamsHandling]="routerLinkOptions().queryParamsHandling"
+  >
+    <ng-content></ng-content>
+  </a>
+  `
+}) export class RouterLinkColumnComponent {
+  additional = input.required<LinkInfo>();
+  element = input.required<any>();
+  queryParams = computed(() => this.additional().routerLinkOptions!.queryParams(this.element()));
+  routerLinkOptions = computed(() => this.additional().routerLinkOptions!);
+  link = input.required<string>();
+}
+
+@Component({
+  selector: "tb-link-column",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <a target="{{additional().target}}" href="{{link()}}">
+    <ng-content></ng-content>
+  </a>
+  `
+}) export class LinkColumnComponent {
+  element = input.required<any>();
+  additional = input.required<LinkInfo>();
+  link = input.required<string>();
+}

package/src/table-builder/components/number-filter/number-filter.component.css

@@ -0,0 +1,10 @@
+.switch {
+    display: inline-block;
+}
+
+.my-filter {
+    margin-right: 15px;
+}
+.inline{
+  display: inline-block;
+}

package/src/table-builder/components/number-filter/number-filter.component.html

@@ -0,0 +1,25 @@
+@let CurrentFilterType = $currentFilterType();
+@let info = $info();
+
+@if(CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In)
+{
+  <mat-form-field class="my-filter">
+    <input matInput name="filterValue" type="number" [ngModel]="info.filterValue"/>
+  </mat-form-field>
+}
+@if(CurrentFilterType === FilterType.NumberBetween)
+{
+  <ng-container ngModelGroup="filterValue"  >
+    <mat-form-field class="my-filter">
+      <input matInput name="Start" placeholder="Start" type="number" [ngModel]="info.filterValue?.Start"/>
+    </mat-form-field>
+    <mat-form-field class="my-filter">
+      <input matInput name="End" placeholder="End" type="number" [ngModel]="info.filterValue?.End"/>
+    </mat-form-field>
+  </ng-container>
+}
+
+@if (CurrentFilterType === FilterType.In)
+{
+  <lib-in-filter name='filterValue' [type]="FieldType.Number" [(ngModel)]='info.filterValue' />
+}

package/src/table-builder/components/number-filter/number-filter.component.spec.ts

@@ -0,0 +1,30 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FieldType } from 'projects/angular-utilities/src/public-api';
+
+import { NumberFilterComponent } from './number-filter.component';
+
+describe('NumberFilterComponent', () => {
+  let component: NumberFilterComponent;
+  let fixture: ComponentFixture<NumberFilterComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [NumberFilterComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NumberFilterComponent);
+    component = fixture.componentInstance;
+    component.info = {
+      key: '',
+      fieldType: FieldType.Unknown
+    };
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/table-builder/components/number-filter/number-filter.component.ts

@@ -0,0 +1,25 @@
+import { Component, ChangeDetectionStrategy, input } from '@angular/core';
+import { FilterType } from '../../enums/filterTypes';
+import { ControlContainer, FormsModule, NgForm } from '@angular/forms';
+import { PartialFilter } from '../../classes/filter-info';
+import { FieldType } from '../../interfaces/report-def';
+import { MatInputModule } from '@angular/material/input';
+import { InFilterComponent } from '../in-filter/in-filter.component';
+
+
+@Component({
+  selector: 'tb-number-filter',
+  templateUrl: './number-filter.component.html',
+  styleUrls: ['./number-filter.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
+  imports: [
+    MatInputModule, FormsModule, InFilterComponent
+  ]
+})
+export class NumberFilterComponent {
+  FilterType = FilterType;
+  FieldType = FieldType;
+  $currentFilterType = input.required<FilterType>({ alias: 'CurrentFilterType' });
+  $info = input.required<PartialFilter>({ alias: 'info' })
+}

package/src/table-builder/components/profiles-menu/profiles-menu.component.html

@@ -0,0 +1,77 @@
+@if(!$isMatMenuChild())
+{
+  <button #trigger="matMenuTrigger" color="primary" mat-icon-button [matMenuTriggerFor]="menu" [matTooltip]="'Profiles'">
+    <mat-icon color="primary">people</mat-icon>
+  </button>
+}
+<mat-menu #menu="matMenu" (closed)="addedKey.value = null; allProfilesPanelOpened.set(false); newProfilePanelOpened.set(false)">
+  @if(!!$currentProfile())
+  {
+    <div mat-menu-item mat-stroked-button [matTooltip]="'Save Profile'" (click)="saveState($currentProfile()!)">
+      <mat-icon color="primary">save</mat-icon>
+      <span>{{$currentProfile()}}</span>
+    </div>
+  }
+  @else
+  {
+    <div class="profile-line">
+      <button color="primary" class="first-in-line first-button" mat-stroked-button (click)="addState(defaultName, m.checked);">
+        <mat-icon class="save-for-default-icon button-save-icon" color="primary">save</mat-icon>
+        <span>Save as <span class="current-name">{{defaultName}}</span> </span>
+      </button>
+      <button stop-propagation mat-icon-button [matTooltip]="'Toggle Profile Being Created As Default'" (click)="m.toggle()" >
+        <mat-icon style="color: green;">{{m.checked ? 'star' : 'star_border'}}</mat-icon>
+      </button>
+      <mat-checkbox #m class="display-none" [checked]="true" />
+    </div>
+  }
+  @if (allProfilesPanelOpened()) {<hr class="divider"/>}
+  <div mat-menu-item stop-propagation [class]="{ hide: !$keys().length, 'all-profile-row': true }" (click)="allProfilesPanelOpened.set(!allProfilesPanelOpened())">
+    <div class="all-profiles">
+      <span>All Profiles</span>
+      <span class="arrow" [class]="`${(allProfilesPanelOpened() ? 'all-profile-arrow-close' : 'all-profile-arrow-open')} all-profile-arrow`"></span>
+    </div>
+  </div>
+  <div [class]="{ hide: !allProfilesPanelOpened(), panel: true }">
+    @for (key of $keys() ; track key)
+    {
+      <div class="profile-line" [class]="key === $currentProfile() ? 'current-in-list' : 'not-current-in-list'">
+        <button class="menu-item first-in-line" mat-stroked-button [matTooltip]="'Select Profile'" (click)='stateService.setLocalCurrentState({ tableId: $tableId(), currentStateKey: key})'>
+          <span>{{key}}</span>
+        </button>
+        @if(key !== $defaultProfile())
+        {
+          <button stop-propagation mat-icon-button [matTooltip]="'Toggle Profile Being Default'" (click)="setDefault(key)">
+            <mat-icon style="color: green;">star_border</mat-icon>
+          </button>
+        }
+        @else
+        {
+          <button stop-propagation mat-icon-button [matTooltip]="'Toggle Profile Being Default'" (click)="unsetDefault()">
+            <mat-icon style="color: green;">star</mat-icon>
+          </button>
+        }
+        <button color="warn" class="last-in-line" stop-propagation mat-icon-button [matTooltip]="'Delete Profile'" (click)='stateService.deleteProfileFromLocalAndStorage($tableId(), key)'>
+          <mat-icon color='warn'>delete_forever</mat-icon>
+        </button>
+      </div>
+    }
+    <hr class="divider"/>
+  </div>
+  <div class="add-new-profile-row" mat-menu-item stop-propagation (click)="newProfilePanelOpened.set(!newProfilePanelOpened()); addedKey.focus()">Add New Profile</div>
+  <div [class]="{ hide: !newProfilePanelOpened(), panel: true }" >
+    <div class="profile-line" stop-propagation>
+      <div class="new-name-input">
+        <i class="input-hint">Enter New Name</i>
+        <input #addedKey="matInput" matInput [name]="'key'" />
+      </div>
+      <button stop-propagation mat-icon-button [matTooltip]="'Toggle Profile Being Created As Default'" (click)="m2.toggle()" >
+        <mat-icon style="color: green;">{{m2.checked ? 'star' : 'star_border'}}</mat-icon>
+      </button>
+      <mat-checkbox #m2 class="display-none" [ngModel]="!$defaultProfile()" />
+    </div>
+    <button class="add-button" color="primary" mat-raised-button [matTooltip]="'Create New Profile'" [disabled]="!addedKey.value" (click)="addState(addedKey.value, m2.checked); addedKey.value = null">
+      Add
+    </button>
+  </div>
+</mat-menu>

package/src/table-builder/components/profiles-menu/profiles-menu.component.scss

@@ -0,0 +1,126 @@
+
+:host ::ng-deep .mat-expansion-panel-header{
+  padding: 0;
+}
+.current-name{
+  color: var(tb-current-profile, blue);
+}
+.menu-item{
+  display: inline-flex;
+  width: initial;
+  flex-grow: 1;
+}
+.profile-line{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.first-in-line{
+  --f-b: 2rem;
+  margin-left: var(--mat-menu-item-with-icon-leading-spacing);
+  &.first-button{
+    height: var(--f-b);
+    margin: .2rem;
+  }
+  .button-save-icon{
+    height: var(--f-b);
+    width: var(--f-b);
+    font-size: var(--f-b);
+  }
+}
+.main-save-button{
+  height: 4rem;
+  width: 4rem;
+  padding: .5rem;
+  mat-icon{
+    height: 3rem;
+    width: 3rem;
+    font-size: 3rem;
+  }
+}
+.save-for-default-icon{
+  margin: 0;
+}
+.display-none{
+  display: none;
+}
+.last-in-line{
+  padding-right: var(--mat-menu-item-with-icon-trailing-spacing);
+}
+.default-cursor{
+  cursor: default;
+}
+.as-def{
+  padding-left: var(--mat-menu-item-with-icon-leading-spacing);
+}
+.divider{
+  margin: .2px 0;
+}
+.add-key{
+  max-width: 8.5rem;
+  margin-left: 2px;
+  ::ng-deep{
+    .mdc-text-field{
+      padding: 0;
+    }
+  }
+}
+.panel{
+  transition: height .1s
+}
+.hide{
+  height: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+.open-panel-button{
+  width: 100%;
+  height: 2.5rem;
+}
+.current-in-list{
+  border-left: 3px solid blue;
+  background-color: #0000ff0d;
+}
+.not-current-in-list{
+  border-left: 3px solid rgba(255, 255, 255, 0);
+}
+.add-new-profile-row, .all-profile-row{
+  border-top: rgb(128 128 128 / 25%) solid 1px;
+}
+.all-profiles{
+  display: flex;
+  justify-content: space-between;
+  &:has(.all-profile-arrow-close){
+    align-items: center;
+  }
+}
+.all-profile-arrow{
+  display: inline-block;
+  height: .7rem;
+  width: .7rem;
+  border-color: black;
+  transform: rotate(-45deg);
+  &-open{
+    border-left: solid 2px;
+    border-bottom: solid 2px;
+  }
+  &-close{
+    border-right: solid 2px;
+    border-top: solid 2px;
+  }
+}
+.new-name-input{
+  margin-left: 3px;
+  display: flex;
+  flex-direction: column;
+  .input-hint{
+    font-size: smaller;
+    font-weight: 200;
+    color: gray;
+  }
+}
+.add-button{
+  height: 20px;
+  line-height: 20px;
+  margin: 3px 0 0 3px;
+}

package/src/table-builder/components/profiles-menu/profiles-menu.component.spec.ts

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

package/src/table-builder/components/profiles-menu/profiles-menu.component.ts

@@ -0,0 +1,63 @@
+import { Component, computed, inject, input, output, signal, viewChild } from '@angular/core';
+import { TableBuilderStateStore } from '../../ngrx/tableBuilderStateStore';
+import { MatMenu, MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
+import { MatIcon } from '@angular/material/icon';
+import { TableStore } from '../../classes/table-store';
+import { MatTooltip } from '@angular/material/tooltip';
+import { MatButton, MatIconButton } from '@angular/material/button';
+import { StopPropagationDirective } from '../../../utilities';
+import { MatInput, MatInputModule } from '@angular/material/input';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { Subject } from 'rxjs';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'tb-profiles-menu',
+  imports: [MatIcon, MatTooltip, MatIconButton, MatMenuModule, MatButton, MatInput,
+    MatCheckbox, StopPropagationDirective, MatInputModule, FormsModule
+  ],
+  templateUrl: './profiles-menu.component.html',
+  styleUrl: './profiles-menu.component.scss'
+})
+export class ProfilesMenuComponent {
+  stateService = inject(TableBuilderStateStore);
+  tableStore = inject(TableStore);
+  $tableId = input.required<string>({ alias: 'tableId' });
+  $isMatMenuChild = input<boolean>(false, { alias: 'isMatMenuChild' });
+  trigger = viewChild<MatMenuTrigger>('trigger');
+  menu = viewChild.required(MatMenu)
+  allProfilesPanelOpened = signal(false);
+  newProfilePanelOpened = signal(false);
+  $currentProfile = computed(() => this.stateService.$selectLocalProfileCurrentKey(this.$tableId())());
+  $defaultProfile = computed(() => this.stateService.$selectLocalProfileDefaultKey(this.$tableId())());
+  $keys = computed(() => this.stateService.$selectLocalProfileKeys(this.$tableId())());
+  saveState(key: string) {
+    const tableState = this.tableStore.$savableState();
+    this.stateService.saveTableSettingsToLocalAndStorage(this.$tableId(), key, tableState);
+  }
+
+  addState(key: string, asDefault: boolean){
+    const tableState = this.tableStore.$savableState();
+    this.stateService.addNewStateToLocalAndStorage(this.$tableId(), key, tableState, asDefault);
+  }
+
+  setDefault(key: string){
+    this.stateService.setDefaultInLocalAndStorage(this.$tableId(), key);
+  }
+
+  unsetDefault(){
+    this.stateService.unsetDefaultFromLocalAndStorage(this.$tableId());
+  }
+
+  defaultName = 'My Profile';
+  position$ = new Subject<{ top: string, right: string} | undefined>();
+  setPosition = (e: HTMLElement) => {
+    const rect = e.getBoundingClientRect();
+    if(rect.top === 0) return;
+    const a = {
+      right: `${(window.innerWidth - rect.right)}px`,
+      top: `${rect.top}px`,
+    }
+    return a;
+  }
+}

package/src/table-builder/components/reset-menu/reset-menu.component.css

@@ -0,0 +1,3 @@
+:host{
+  display: contents;
+}

package/src/table-builder/components/reset-menu/reset-menu.component.html

@@ -0,0 +1,10 @@
+<mat-menu #menu2="matMenu">
+  @if($set().length > 1)
+  {
+    <button mat-menu-item (click)="state.resetState()">All</button>
+  }
+  @for (item of $set(); track $index)
+  {
+    <button mat-menu-item (click)="state.resetPart(item)">Reset {{item}}</button>
+  }
+</mat-menu>