From 9524efd01a53bc47d0667d92c32bf4b0d7748739 Mon Sep 17 00:00:00 2001
From: Bogdan Gromov <14brother@gmail.com>
Date: Sun, 30 Jun 2024 14:12:48 +0300
Subject: [PATCH] feat: add portfolio block page and compnent

---
 .../portfolio-block.component.css             |  0
 .../portfolio-block.component.html            |  1 +
 .../portfolio-block.component.spec.ts         | 23 ++++++++++
 .../portfolio-block.component.ts              | 12 ++++++
 .../portfolio-block-page.component.css        |  0
 .../portfolio-block-page.component.html       | 43 +++++++++++++++++++
 .../portfolio-block-page.component.spec.ts    | 23 ++++++++++
 .../portfolio-block-page.component.ts         | 24 +++++++++++
 8 files changed, 126 insertions(+)
 create mode 100644 src/app/features/portfolio-block/portfolio-block.component.css
 create mode 100644 src/app/features/portfolio-block/portfolio-block.component.html
 create mode 100644 src/app/features/portfolio-block/portfolio-block.component.spec.ts
 create mode 100644 src/app/features/portfolio-block/portfolio-block.component.ts
 create mode 100644 src/app/pages/portfolio-block-page/portfolio-block-page.component.css
 create mode 100644 src/app/pages/portfolio-block-page/portfolio-block-page.component.html
 create mode 100644 src/app/pages/portfolio-block-page/portfolio-block-page.component.spec.ts
 create mode 100644 src/app/pages/portfolio-block-page/portfolio-block-page.component.ts

diff --git a/src/app/features/portfolio-block/portfolio-block.component.css b/src/app/features/portfolio-block/portfolio-block.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/features/portfolio-block/portfolio-block.component.html b/src/app/features/portfolio-block/portfolio-block.component.html
new file mode 100644
index 0000000..a202702
--- /dev/null
+++ b/src/app/features/portfolio-block/portfolio-block.component.html
@@ -0,0 +1 @@
+<p>portfolio-block works!</p>
diff --git a/src/app/features/portfolio-block/portfolio-block.component.spec.ts b/src/app/features/portfolio-block/portfolio-block.component.spec.ts
new file mode 100644
index 0000000..4afe15d
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/features/portfolio-block/portfolio-block.component.ts b/src/app/features/portfolio-block/portfolio-block.component.ts
new file mode 100644
index 0000000..f58876f
--- /dev/null
+++ b/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 {
+
+}
diff --git a/src/app/pages/portfolio-block-page/portfolio-block-page.component.css b/src/app/pages/portfolio-block-page/portfolio-block-page.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/portfolio-block-page/portfolio-block-page.component.html b/src/app/pages/portfolio-block-page/portfolio-block-page.component.html
new file mode 100644
index 0000000..0376d01
--- /dev/null
+++ b/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>
diff --git a/src/app/pages/portfolio-block-page/portfolio-block-page.component.spec.ts b/src/app/pages/portfolio-block-page/portfolio-block-page.component.spec.ts
new file mode 100644
index 0000000..4fdca50
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/pages/portfolio-block-page/portfolio-block-page.component.ts b/src/app/pages/portfolio-block-page/portfolio-block-page.component.ts
new file mode 100644
index 0000000..7e6f0b4
--- /dev/null
+++ b/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);
+  }
+}