OZG-6423 OZG-6975 Add button toggle component

* replace toggles in vorgang-filter

alfa-client/libs/design-component/src/index.ts

 export * from './lib/button-with-spinner/button-with-spinner.component';
 export * from './lib/download-button/download-button.component';
+export * from './lib/form/button-toggle-group/button-toggle-group.component';
 export * from './lib/form/checkbox-editor/checkbox-editor.component';
 export * from './lib/form/file-upload-editor/file-upload-editor.component';
 export * from './lib/form/formcontrol-editor.abstract.component';

alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-filter-menu-container/vorgang-filter-menu/vorgang-filter-menu-item/vorgang-filter-menu-item.component.spec.ts → alfa-client/libs/design-component/src/lib/form/button-toggle-group/button-toggle-group.component.spec.ts

 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatIcon } from '@angular/material/icon';
-import { VorgangFilterMenuItemComponent } from './vorgang-filter-menu-item.component';
+import { ButtonToggleGroupComponent } from './button-toggle-group.component';
 
-describe('VorgangFilterMenuItemComponent', () => {
-  let component: VorgangFilterMenuItemComponent;
-  let fixture: ComponentFixture<VorgangFilterMenuItemComponent>;
+describe('ButtonToggleGroupComponent', () => {
+  let component: ButtonToggleGroupComponent;
+  let fixture: ComponentFixture<ButtonToggleGroupComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [VorgangFilterMenuItemComponent],
-      imports: [MatIcon],
+      imports: [ButtonToggleGroupComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(VorgangFilterMenuItemComponent);
+    fixture = TestBed.createComponent(ButtonToggleGroupComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

alfa-client/libs/design-component/src/lib/form/button-toggle-group/button-toggle-group.component.ts

+import { CommonModule } from '@angular/common';
+import { Component, ContentChildren, QueryList } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { ButtonToggleComponent } from '@ods/system';
+import { FormControlEditorAbstractComponent } from '../formcontrol-editor.abstract.component';
+
+@Component({
+  selector: 'ods-button-toggle-group',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<div
+    class="flex divide-x divide-neutral-300 overflow-hidden rounded-full border border-neutral-300 bg-white dark:divide-neutral-600 dark:border-neutral-600 dark:bg-neutral-700"
+    role="group"
+  >
+    <ng-content></ng-content>
+  </div>`,
+})
+export class ButtonToggleGroupComponent extends FormControlEditorAbstractComponent {
+  @ContentChildren(ButtonToggleComponent) buttonToggles!: QueryList<ButtonToggleComponent>;
+
+  ngAfterContentInit(): void {
+    this.buttonToggles.forEach((toggleButton) => {
+      toggleButton.onClick = this.setFormControlValue(toggleButton.value);
+      toggleButton.isSelected = this.isValueSelected();
+    });
+  }
+
+  setFormControlValue(value: string) {
+    const formControl: FormControl = this.fieldControl;
+    return () => {
+      if (formControl.value !== value) formControl.setValue(value);
+    };
+  }
+
+  isValueSelected() {
+    const formControl: FormControl = this.fieldControl;
+    return (value: string) => formControl.value === value;
+  }
+}

alfa-client/libs/design-system/src/index.ts

@@ -7,6 +7,7 @@ export * from './lib/button-card/button-card.component';
 export * from './lib/button/button.component';
 export * from './lib/dropdown-menu/dropdown-menu-button/dropdown-menu-button.component';
 export * from './lib/dropdown-menu/dropdown-menu/dropdown-menu.component';
+export * from './lib/form/button-toggle/button-toggle.component';
 export * from './lib/form/checkbox/checkbox.component';
 export * from './lib/form/error-message/error-message.component';
 export * from './lib/form/fieldset/fieldset.component';
@@ -18,6 +19,7 @@ export * from './lib/icons/admin-logo-icon/admin-logo-icon.component';
 export * from './lib/icons/attachment-icon/attachment-icon.component';
 export * from './lib/icons/bescheid-generate-icon/bescheid-generate-icon.component';
 export * from './lib/icons/bescheid-upload-icon/bescheid-upload-icon.component';
+export * from './lib/icons/check-icon/check-icon.component';
 export * from './lib/icons/close-icon/close-icon.component';
 export * from './lib/icons/exclamation-icon/exclamation-icon.component';
 export * from './lib/icons/file-icon/file-icon.component';

alfa-client/libs/design-system/src/lib/form/button-toggle/button-toggle.component.spec.ts

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

alfa-client/libs/design-system/src/lib/form/button-toggle/button-toggle.component.ts

+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { CheckIconComponent } from '../../icons/check-icon/check-icon.component';
+
+@Component({
+  selector: 'ods-button-toggle',
+  standalone: true,
+  imports: [CommonModule, CheckIconComponent],
+  template: `<button
+    class="flex cursor-pointer items-center gap-1 px-3 py-1.5 outline-none hover:bg-neutral-300 focus-visible:bg-neutral-300 dark:hover:bg-neutral-600 dark:focus-visible:bg-neutral-600"
+    [ngClass]="{
+      'bg-neutral-200 font-bold hover:bg-neutral-200 focus-visible:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:focus-visible:bg-neutral-800':
+        isSelected(value),
+    }"
+    [value]="value"
+    (click)="onClick()"
+  >
+    <ods-check-icon size="small" *ngIf="isSelected(value)" />
+    <p class="text-sm">{{ label }}</p>
+  </button>`,
+})
+export class ButtonToggleComponent {
+  @Input({ required: true }) label!: string;
+  @Input({ required: true }) value!: string;
+  @Input() selected: boolean = false;
+  @Input() onClick: () => void;
+  @Input() isSelected: (value: string) => boolean = () => false;
+}

alfa-client/libs/design-system/src/lib/icons/check-icon/check-icon.component.spec.ts

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

alfa-client/libs/design-system/src/lib/icons/check-icon/check-icon.component.ts

+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { iconVariants, IconVariants } from '../iconVariants';
+
+@Component({
+  selector: 'ods-check-icon',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<svg
+    viewBox="0 0 24 24"
+    [ngClass]="[twMerge(iconVariants({ size }), 'fill-text', class)]"
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M9.55 18L3.85 12.3L5.275 10.875L9.55 15.15L18.725 5.975L20.15 7.4L9.55 18Z" />
+  </svg>`,
+})
+export class CheckIconComponent {
+  @Input() size: IconVariants['size'] = 'medium';
+  @Input() class: string = undefined;
+
+  readonly iconVariants = iconVariants;
+  readonly twMerge = twMerge;
+}

alfa-client/libs/design-system/src/lib/icons/check-icon/check-icon.stories.ts

+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { CheckIconComponent } from './check-icon.component';
+
+const meta: Meta<CheckIconComponent> = {
+  title: 'Icons/Check icon',
+  component: CheckIconComponent,
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<CheckIconComponent>;
+
+export const Default: Story = {
+  args: { size: 'medium' },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'extra-large', 'full'],
+      description: 'Size of icon. Property "full" means 100%',
+      table: {
+        defaultValue: { summary: 'medium' },
+      },
+    },
+  },
+};

alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-filter-menu-container/vorgang-filter-menu/vorgang-filter-menu-item/vorgang-filter-menu-item.component.html

-<div class="filter-item-content">
-  <mat-icon [inline]="true">check</mat-icon>
-  <span>{{ label }}</span>
-</div>

alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-filter-menu-container/vorgang-filter-menu/vorgang-filter-menu-item/vorgang-filter-menu-item.component.ts

-import { Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'alfa-vorgang-filter-menu-item',
-  templateUrl: './vorgang-filter-menu-item.component.html',
-  styleUrls: ['./vorgang-filter-menu-item.component.scss'],
-})
-export class VorgangFilterMenuItemComponent {
-  @Input() label: string;
-}

alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-filter-menu-container/vorgang-filter-menu/vorgang-filter-menu.component.html

@@ -23,41 +23,22 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<form
-  [formGroup]="formService.form"
-  *ngIf="multipleFilterAvailable"
-  data-test-id="vorgang-filter-form"
->
-  <mat-button-toggle-group [formControlName]="filterName" multiple="false">
-    <mat-button-toggle
+<form [formGroup]="formService.form" *ngIf="multipleFilterAvailable" data-test-id="vorgang-filter-form">
+  <ods-button-toggle-group [formControlName]="filterName">
+    <ods-button-toggle
       *ngIf="apiRootStateResource.resource | hasLink: apiRootLinkRel.MEINE_VORGAENGE"
-      data-test-id="meine-vorgaenge-filter-toggle-button"
       [value]="formService.FILTER_MEINE_VALUE"
-    >
-      <alfa-vorgang-filter-menu-item
       label="Meine Vorgänge"
-        data-test-id="meine-vorgaenge-filter-item"
-      ></alfa-vorgang-filter-menu-item>
-    </mat-button-toggle>
-    <mat-button-toggle
+    ></ods-button-toggle>
+    <ods-button-toggle
       *ngIf="apiRootStateResource.resource | hasLink: apiRootLinkRel.ALLE_VORGAENGE"
-      data-test-id="alle-filter-toggle-button"
       [value]="formService.FILTER_ALLE_VALUE"
-    >
-      <alfa-vorgang-filter-menu-item
       label="Alle"
-        data-test-id="alle-filter-item"
-      ></alfa-vorgang-filter-menu-item>
-    </mat-button-toggle>
-    <mat-button-toggle
+    ></ods-button-toggle>
+    <ods-button-toggle
       *ngIf="apiRootStateResource.resource | hasLink: apiRootLinkRel.UNASSIGNED"
-      data-test-id="nicht-zugewiesen-filter-toggle-button"
       [value]="formService.FILTER_UNASSIGNED_VALUE"
-    >
-      <alfa-vorgang-filter-menu-item
       label="Nicht zugewiesen"
-        data-test-id="unassigned-filter-toggle-button"
-      ></alfa-vorgang-filter-menu-item>
-    </mat-button-toggle>
-  </mat-button-toggle-group>
+    ></ods-button-toggle>
+  </ods-button-toggle-group>
 </form>

alfa-client/libs/vorgang/src/lib/vorgang-list-page-container/vorgang-list-page/vorgang-filter-menu-container/vorgang-filter-menu/vorgang-filter-menu.component.ts

@@ -21,9 +21,9 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { Component, Input } from '@angular/core';
 import { ApiRootLinkRel, ApiRootResource } from '@alfa-client/api-root-shared';
 import { StateResource } from '@alfa-client/tech-shared';
+import { Component, Input } from '@angular/core';
 import { hasLink } from '@ngxp/rest';
 import { VorgangFilterFormService } from './vorgang-filter-menu.formservice';
 

alfa-client/libs/vorgang/src/lib/vorgang.module.ts

@@ -33,6 +33,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { RouterModule, Routes } from '@angular/router';
+import { ButtonToggleGroupComponent } from '@ods/component';
+import { ButtonToggleComponent } from '@ods/system';
 import { vorgangFilterViewGuard } from './vorgang-filter-view.guard';
 import { VorgangListContainerComponent } from './vorgang-list-container/vorgang-list-container.component';
 import { EmptyListComponent } from './vorgang-list-container/vorgang-list/empty-list/empty-list.component';
@@ -43,7 +45,6 @@ import { VorgangNextFristButtonComponent } from './vorgang-list-container/vorgan
 import { VorgangListComponent } from './vorgang-list-container/vorgang-list/vorgang-list.component';
 import { VorgangListPageContainerComponent } from './vorgang-list-page-container/vorgang-list-page-container.component';
 import { VorgangFilterMenuContainerComponent } from './vorgang-list-page-container/vorgang-list-page/vorgang-filter-menu-container/vorgang-filter-menu-container.component';
-import { VorgangFilterMenuItemComponent } from './vorgang-list-page-container/vorgang-list-page/vorgang-filter-menu-container/vorgang-filter-menu/vorgang-filter-menu-item/vorgang-filter-menu-item.component';
 import { VorgangFilterMenuComponent } from './vorgang-list-page-container/vorgang-list-page/vorgang-filter-menu-container/vorgang-filter-menu/vorgang-filter-menu.component';
 import { VorgangListPageComponent } from './vorgang-list-page-container/vorgang-list-page/vorgang-list-page.component';
 import { VorgangViewsMenuContainerComponent } from './vorgang-list-page-container/vorgang-list-page/vorgang-views-menu-container/vorgang-views-menu-container.component';
@@ -177,6 +178,8 @@ const routes: Routes = [
     UserProfileModule,
     MatButtonToggleModule,
     HintModule,
+    ButtonToggleComponent,
+    ButtonToggleGroupComponent,
   ],
   declarations: [
     VorgangListComponent,
@@ -192,7 +195,6 @@ const routes: Routes = [
     VorgangSearchViewItemComponent,
     VorgangSearchViewItemContainerComponent,
     VorgangListSearchContainerComponent,
-    VorgangFilterMenuItemComponent,
     VorgangCreatedAtComponent,
     VorgangViewItemContainerComponent,
     VorgangViewItemComponent,