feat: add portfolio block page and compnent

src/app/features/portfolio-block/portfolio-block.component.html

@@ -0,0 +1 @@
+<p>portfolio-block works!</p>

src/app/features/portfolio-block/portfolio-block.component.spec.ts

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

src/app/features/portfolio-block/portfolio-block.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-portfolio-block',
+  standalone: true,
+  imports: [],
+  templateUrl: './portfolio-block.component.html',
+  styleUrl: './portfolio-block.component.css'
+})
+export class PortfolioBlockComponent {
+
+}

src/app/pages/portfolio-block-page/portfolio-block-page.component.html

@@ -0,0 +1,43 @@
+Commercial Luxury Corporate Industrial Videoclip Food Fashion Documentary Short
+films Sport Backstage
+
+<section>
+  <mat-checkbox
+    [checked]="hideSingleSelectionIndicator()"
+    (change)="toggleSingleSelectionIndicator()"
+  >
+    Hide Single Selection Indicator
+  </mat-checkbox>
+  <mat-checkbox
+    [checked]="hideMultipleSelectionIndicator()"
+    (change)="toggleMultipleSelectionIndicator()"
+  >
+    Hide Multiple Selection Indicator
+  </mat-checkbox>
+</section>
+
+<section>
+  <h3>Single selection</h3>
+  <mat-button-toggle-group
+    name="favoriteColor"
+    aria-label="Favorite Color"
+    [hideSingleSelectionIndicator]="hideSingleSelectionIndicator()"
+  >
+    <mat-button-toggle value="red">Red</mat-button-toggle>
+    <mat-button-toggle value="green">Green</mat-button-toggle>
+    <mat-button-toggle value="blue">Blue</mat-button-toggle>
+  </mat-button-toggle-group>
+</section>
+<section>
+  <h3>Multiple selection</h3>
+  <mat-button-toggle-group
+    name="ingredients"
+    aria-label="Ingredients"
+    [hideMultipleSelectionIndicator]="hideMultipleSelectionIndicator()"
+    multiple
+  >
+    <mat-button-toggle value="flour">Flour</mat-button-toggle>
+    <mat-button-toggle value="eggs">Eggs</mat-button-toggle>
+    <mat-button-toggle value="sugar">Sugar</mat-button-toggle>
+  </mat-button-toggle-group>
+</section>

src/app/pages/portfolio-block-page/portfolio-block-page.component.spec.ts

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

src/app/pages/portfolio-block-page/portfolio-block-page.component.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+
+@Component({
+  selector: 'app-portfolio-block-page',
+  standalone: true,
+  imports: [MatButtonToggleModule, MatCheckboxModule],
+  templateUrl: './portfolio-block-page.component.html',
+  styleUrl: './portfolio-block-page.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PortfolioBlockPageComponent {
+  hideSingleSelectionIndicator = signal(false);
+  hideMultipleSelectionIndicator = signal(false);
+
+  toggleSingleSelectionIndicator() {
+    this.hideSingleSelectionIndicator.update(value => !value);
+  }
+
+  toggleMultipleSelectionIndicator() {
+    this.hideMultipleSelectionIndicator.update(value => !value);
+  }
+}