From 5887b992512b11090bd542ae34acc000e9dab558 Mon Sep 17 00:00:00 2001
From: Kalyani Rajawat <kalyani_rajawat@epam.com>
Date: Tue, 4 Mar 2025 19:48:46 +0530
Subject: [PATCH 1/4] feat: added accodion component
---
.../common/accordion/accordion.component.html | 34 +++++++++++++
.../common/accordion/accordion.component.scss | 50 +++++++++++++++++++
.../accordion/accordion.component.spec.ts | 23 +++++++++
.../common/accordion/accordion.component.ts | 13 +++++
ui/package-lock.json | 6 +++
5 files changed, 126 insertions(+)
create mode 100644 indigo-frontend/src/core/components/common/accordion/accordion.component.html
create mode 100644 indigo-frontend/src/core/components/common/accordion/accordion.component.scss
create mode 100644 indigo-frontend/src/core/components/common/accordion/accordion.component.spec.ts
create mode 100644 indigo-frontend/src/core/components/common/accordion/accordion.component.ts
diff --git a/indigo-frontend/src/core/components/common/accordion/accordion.component.html b/indigo-frontend/src/core/components/common/accordion/accordion.component.html
new file mode 100644
index 000000000..3334b92b2
--- /dev/null
+++ b/indigo-frontend/src/core/components/common/accordion/accordion.component.html
@@ -0,0 +1,34 @@
+<cdk-accordion class="example-accordion">
+ @for (item of items; track item; let index = $index) {
+ <cdk-accordion-item #accordionItem="cdkAccordionItem" class="example-accordion-item">
+ <button
+ class="example-accordion-item-header"
+ (click)="accordionItem.toggle()"
+ tabindex="0"
+ [attr.id]="'accordion-header-' + index"
+ [attr.aria-expanded]="accordionItem.expanded"
+ [attr.aria-controls]="'accordion-body-' + index">
+ {{ item.title }}
+ <span class="example-accordion-item-description">
+ <em
+ [class.indicon-chevron_up]="!accordionItem.expanded"
+ [class.indicon-chevron_down]="accordionItem.expanded"
+ ></em>
+ </span>
+ </button>
+ @if(accordionItem.expanded) {
+ <div
+ class="example-accordion-item-body"
+ role="region"
+ [style.display]="accordionItem.expanded ? '' : 'none'"
+ [attr.id]="'accordion-body-' + index"
+ [attr.aria-labelledby]="'accordion-header-' + index"
+ >{{ item.description }} Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Perferendis excepturi incidunt ipsum
+ deleniti labore, tempore non nam doloribus blanditiis veritatis illo autem iure aliquid ullam
+ rem tenetur deserunt velit culpa?
+ </div>
+ }
+ </cdk-accordion-item>
+ }
+ </cdk-accordion>
+
\ No newline at end of file
diff --git a/indigo-frontend/src/core/components/common/accordion/accordion.component.scss b/indigo-frontend/src/core/components/common/accordion/accordion.component.scss
new file mode 100644
index 000000000..dd8990a23
--- /dev/null
+++ b/indigo-frontend/src/core/components/common/accordion/accordion.component.scss
@@ -0,0 +1,50 @@
+.example-accordion {
+ display: block;
+ max-width: 500px;
+ }
+
+ .example-accordion-item {
+ display: block;
+ border: solid 1px #ccc;
+ }
+
+ .example-accordion-item + .example-accordion-item {
+ border-top: none;
+ }
+
+ .example-accordion-item-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ background: none;
+ border: none;
+ padding: 16px;
+ text-align: left;
+
+ }
+
+ .example-accordion-item-description {
+ font-size: 0.85em;
+ color: #999;
+ }
+
+ .example-accordion-item-body {
+ padding: 16px;
+ }
+
+ .example-accordion-item-header:hover {
+ cursor: pointer;
+ background-color: #eee;
+ }
+
+ .example-accordion-item:first-child {
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ }
+
+ .example-accordion-item:last-child {
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ }
+
\ No newline at end of file
diff --git a/indigo-frontend/src/core/components/common/accordion/accordion.component.spec.ts b/indigo-frontend/src/core/components/common/accordion/accordion.component.spec.ts
new file mode 100644
index 000000000..a3f455b33
--- /dev/null
+++ b/indigo-frontend/src/core/components/common/accordion/accordion.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccordionComponent } from './accordion.component';
+
+describe('AccordionComponent', () => {
+ let component: AccordionComponent;
+ let fixture: ComponentFixture<AccordionComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [AccordionComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(AccordionComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/indigo-frontend/src/core/components/common/accordion/accordion.component.ts b/indigo-frontend/src/core/components/common/accordion/accordion.component.ts
new file mode 100644
index 000000000..ca018286f
--- /dev/null
+++ b/indigo-frontend/src/core/components/common/accordion/accordion.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import {CdkAccordionModule} from '@angular/cdk/accordion';
+
+@Component({
+ selector: 'app-accordion',
+ imports: [CdkAccordionModule],
+ templateUrl: './accordion.component.html',
+ styleUrl: './accordion.component.scss'
+})
+export class AccordionComponent {
+ items = [{title: 'Item 1', description: 'Description'}, {title: 'Item 2', description: 'Description'}, {title: 'Item 3',description: 'Description'}, {title: 'Item 4',description: 'Description'}, {title: 'Item 5', description: 'Description'}];
+ expandedIndex = 0;
+}
diff --git a/ui/package-lock.json b/ui/package-lock.json
index b08bb2ae2..1bc26c8f3 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -1601,6 +1601,12 @@
"resolved": "https://registry.npmjs.org/blob/-/blob-0.0.4.tgz",
"integrity": "sha1-vPEwUspURj8w+fx+lbmkdjCpSSE="
},
+ "node_modules/Blob.js": {
+ "name": "blob-tmp",
+ "version": "1.0.0",
+ "resolved": "git+ssh://git@github.com/alferov/Blob.js.git#27f997cefd4000a664ce1768591fe282c6a02930",
+ "license": "MIT"
+ },
"node_modules/bluebird": {
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.1.tgz",
From 3d5ece69ee563a59a74b9a8ff3f0b01e3a0fc00e Mon Sep 17 00:00:00 2001
From: Kalyani Rajawat <kalyani_rajawat@epam.com>
Date: Fri, 7 Mar 2025 19:21:31 +0530
Subject: [PATCH 2/4] converted scss to tailwind css and added description of
accordion to dynamic html
---
.../common/accordion/accordion.component.html | 54 ++++++++-----------
.../common/accordion/accordion.component.scss | 50 -----------------
.../accordion/accordion.component.spec.ts | 23 --------
.../common/accordion/accordion.component.ts | 7 +--
4 files changed, 25 insertions(+), 109 deletions(-)
delete mode 100644 indigo-frontend/src/core/components/common/accordion/accordion.component.scss
delete mode 100644 indigo-frontend/src/core/components/common/accordion/accordion.component.spec.ts
diff --git a/indigo-frontend/src/core/components/common/accordion/accordion.component.html b/indigo-frontend/src/core/components/common/accordion/accordion.component.html
index 3334b92b2..091902d15 100644
--- a/indigo-frontend/src/core/components/common/accordion/accordion.component.html
+++ b/indigo-frontend/src/core/components/common/accordion/accordion.component.html
@@ -1,34 +1,22 @@
-<cdk-accordion class="example-accordion">
- @for (item of items; track item; let index = $index) {
- <cdk-accordion-item #accordionItem="cdkAccordionItem" class="example-accordion-item">
- <button
- class="example-accordion-item-header"
- (click)="accordionItem.toggle()"
- tabindex="0"
- [attr.id]="'accordion-header-' + index"
- [attr.aria-expanded]="accordionItem.expanded"
- [attr.aria-controls]="'accordion-body-' + index">
- {{ item.title }}
- <span class="example-accordion-item-description">
- <em
- [class.indicon-chevron_up]="!accordionItem.expanded"
- [class.indicon-chevron_down]="accordionItem.expanded"
- ></em>
- </span>
- </button>
- @if(accordionItem.expanded) {
- <div
- class="example-accordion-item-body"
- role="region"
- [style.display]="accordionItem.expanded ? '' : 'none'"
- [attr.id]="'accordion-body-' + index"
- [attr.aria-labelledby]="'accordion-header-' + index"
- >{{ item.description }} Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Perferendis excepturi incidunt ipsum
- deleniti labore, tempore non nam doloribus blanditiis veritatis illo autem iure aliquid ullam
- rem tenetur deserunt velit culpa?
- </div>
- }
- </cdk-accordion-item>
+<cdk-accordion class="block max-w-[500px]">
+ @for (item of items; track item; let index = $index) {
+ <cdk-accordion-item #accordionItem="cdkAccordionItem"
+ class="block border border-gray-300 first:rounded-t-lg last:rounded-b-lg">
+ <button
+ class="flex items-center justify-between w-full bg-none border-none p-4 text-left hover:cursor-pointer hover:bg-gray-200"
+ (click)="accordionItem.toggle()" tabindex="0" [attr.id]="'accordion-header-' + index"
+ [attr.aria-expanded]="accordionItem.expanded" [attr.aria-controls]="'accordion-body-' + index">
+ {{ item.title }}
+ <span class="text-sm text-gray-600">
+ <em [class.indicon-chevron_up]="!accordionItem.expanded"
+ [class.indicon-chevron_down]="accordionItem.expanded"></em>
+ </span>
+ </button>
+ @if(accordionItem.expanded) {
+ <div class="p-4" role="region" [style.display]="accordionItem.expanded ? '' : 'none'"
+ [attr.id]="'accordion-body-' + index" [attr.aria-labelledby]="'accordion-header-' + index" [innerHTML]="item.description">
+ </div>
}
- </cdk-accordion>
-
\ No newline at end of file
+ </cdk-accordion-item>
+ }
+</cdk-accordion>
\ No newline at end of file
diff --git a/indigo-frontend/src/core/components/common/accordion/accordion.component.scss b/indigo-frontend/src/core/components/common/accordion/accordion.component.scss
deleted file mode 100644
index dd8990a23..000000000
--- a/indigo-frontend/src/core/components/common/accordion/accordion.component.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-.example-accordion {
- display: block;
- max-width: 500px;
- }
-
- .example-accordion-item {
- display: block;
- border: solid 1px #ccc;
- }
-
- .example-accordion-item + .example-accordion-item {
- border-top: none;
- }
-
- .example-accordion-item-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- width: 100%;
- background: none;
- border: none;
- padding: 16px;
- text-align: left;
-
- }
-
- .example-accordion-item-description {
- font-size: 0.85em;
- color: #999;
- }
-
- .example-accordion-item-body {
- padding: 16px;
- }
-
- .example-accordion-item-header:hover {
- cursor: pointer;
- background-color: #eee;
- }
-
- .example-accordion-item:first-child {
- border-top-left-radius: 4px;
- border-top-right-radius: 4px;
- }
-
- .example-accordion-item:last-child {
- border-bottom-left-radius: 4px;
- border-bottom-right-radius: 4px;
- }
-
\ No newline at end of file
diff --git a/indigo-frontend/src/core/components/common/accordion/accordion.component.spec.ts b/indigo-frontend/src/core/components/common/accordion/accordion.component.spec.ts
deleted file mode 100644
index a3f455b33..000000000
--- a/indigo-frontend/src/core/components/common/accordion/accordion.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AccordionComponent } from './accordion.component';
-
-describe('AccordionComponent', () => {
- let component: AccordionComponent;
- let fixture: ComponentFixture<AccordionComponent>;
-
- beforeEach(async () => {
- await TestBed.configureTestingModule({
- imports: [AccordionComponent]
- })
- .compileComponents();
-
- fixture = TestBed.createComponent(AccordionComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/indigo-frontend/src/core/components/common/accordion/accordion.component.ts b/indigo-frontend/src/core/components/common/accordion/accordion.component.ts
index ca018286f..f2abcf1f7 100644
--- a/indigo-frontend/src/core/components/common/accordion/accordion.component.ts
+++ b/indigo-frontend/src/core/components/common/accordion/accordion.component.ts
@@ -4,10 +4,11 @@ import {CdkAccordionModule} from '@angular/cdk/accordion';
@Component({
selector: 'app-accordion',
imports: [CdkAccordionModule],
- templateUrl: './accordion.component.html',
- styleUrl: './accordion.component.scss'
+ templateUrl: './accordion.component.html'
})
export class AccordionComponent {
- items = [{title: 'Item 1', description: 'Description'}, {title: 'Item 2', description: 'Description'}, {title: 'Item 3',description: 'Description'}, {title: 'Item 4',description: 'Description'}, {title: 'Item 5', description: 'Description'}];
+ items = [{title: 'Item 1', description: '<table><thead><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr></thead><tbody><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr></tbody></table>'},
+ {title: 'Item 2', description: '<div class="text-lg text-gray-600">Description</div>'}
+ ];
expandedIndex = 0;
}
From a84243f5a0c9f00ae4d657821cb1787745270715 Mon Sep 17 00:00:00 2001
From: Kalyani Rajawat <kalyani_rajawat@epam.com>
Date: Fri, 7 Mar 2025 19:30:35 +0530
Subject: [PATCH 3/4] reverted package-lock.json changes
---
ui/package-lock.json | 6 ------
1 file changed, 6 deletions(-)
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 1bc26c8f3..b08bb2ae2 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -1601,12 +1601,6 @@
"resolved": "https://registry.npmjs.org/blob/-/blob-0.0.4.tgz",
"integrity": "sha1-vPEwUspURj8w+fx+lbmkdjCpSSE="
},
- "node_modules/Blob.js": {
- "name": "blob-tmp",
- "version": "1.0.0",
- "resolved": "git+ssh://git@github.com/alferov/Blob.js.git#27f997cefd4000a664ce1768591fe282c6a02930",
- "license": "MIT"
- },
"node_modules/bluebird": {
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.1.tgz",
From e2263fa7b095a03d2361877535b3df4ce161839b Mon Sep 17 00:00:00 2001
From: Kalyani Rajawat <kalyani_rajawat@epam.com>
Date: Thu, 13 Mar 2025 20:16:41 +0530
Subject: [PATCH 4/4] added ng content instead of innerhtml and removed items
static from here
---
.../common/accordion/accordion.component.html | 15 +++++++--------
.../common/accordion/accordion.component.ts | 10 ++++------
2 files changed, 11 insertions(+), 14 deletions(-)
diff --git a/indigo-frontend/src/core/components/common/accordion/accordion.component.html b/indigo-frontend/src/core/components/common/accordion/accordion.component.html
index 091902d15..76950677d 100644
--- a/indigo-frontend/src/core/components/common/accordion/accordion.component.html
+++ b/indigo-frontend/src/core/components/common/accordion/accordion.component.html
@@ -1,22 +1,21 @@
<cdk-accordion class="block max-w-[500px]">
- @for (item of items; track item; let index = $index) {
<cdk-accordion-item #accordionItem="cdkAccordionItem"
class="block border border-gray-300 first:rounded-t-lg last:rounded-b-lg">
<button
class="flex items-center justify-between w-full bg-none border-none p-4 text-left hover:cursor-pointer hover:bg-gray-200"
- (click)="accordionItem.toggle()" tabindex="0" [attr.id]="'accordion-header-' + index"
- [attr.aria-expanded]="accordionItem.expanded" [attr.aria-controls]="'accordion-body-' + index">
- {{ item.title }}
+ (click)="accordionItem.toggle()" tabindex="0" [attr.id]="'accordion-header-'"
+ [attr.aria-expanded]="accordionItem.expanded" [attr.aria-controls]="'accordion-body-'">
+ <ng-content select="header"></ng-content>
<span class="text-sm text-gray-600">
- <em [class.indicon-chevron_up]="!accordionItem.expanded"
- [class.indicon-chevron_down]="accordionItem.expanded"></em>
+ <em [class.indicon-chevron_up]="accordionItem.expanded"
+ [class.indicon-chevron_down]="!accordionItem.expanded"></em>
</span>
</button>
@if(accordionItem.expanded) {
<div class="p-4" role="region" [style.display]="accordionItem.expanded ? '' : 'none'"
- [attr.id]="'accordion-body-' + index" [attr.aria-labelledby]="'accordion-header-' + index" [innerHTML]="item.description">
+ [attr.id]="'accordion-body-'" [attr.aria-labelledby]="'accordion-header-'">
+ <ng-content select="body"></ng-content>
</div>
}
</cdk-accordion-item>
- }
</cdk-accordion>
\ No newline at end of file
diff --git a/indigo-frontend/src/core/components/common/accordion/accordion.component.ts b/indigo-frontend/src/core/components/common/accordion/accordion.component.ts
index f2abcf1f7..a7aabc5b0 100644
--- a/indigo-frontend/src/core/components/common/accordion/accordion.component.ts
+++ b/indigo-frontend/src/core/components/common/accordion/accordion.component.ts
@@ -1,5 +1,5 @@
-import { Component } from '@angular/core';
-import {CdkAccordionModule} from '@angular/cdk/accordion';
+import { Component, ContentChild, ElementRef, TemplateRef } from '@angular/core';
+import { CdkAccordionModule } from '@angular/cdk/accordion';
@Component({
selector: 'app-accordion',
@@ -7,8 +7,6 @@ import {CdkAccordionModule} from '@angular/cdk/accordion';
templateUrl: './accordion.component.html'
})
export class AccordionComponent {
- items = [{title: 'Item 1', description: '<table><thead><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr></thead><tbody><tr><td>Data 1</td><td>Data 2</td><td>Data 3</td></tr></tbody></table>'},
- {title: 'Item 2', description: '<div class="text-lg text-gray-600">Description</div>'}
- ];
- expandedIndex = 0;
+ @ContentChild('header') header: TemplateRef<unknown> | null = null;
+ @ContentChild('body') body: TemplateRef<unknown> | null = null;
}