From d0530a7c59c98007484e73352b568dee78f79499 Mon Sep 17 00:00:00 2001 From: Thomas Pourchel Date: Fri, 23 Feb 2024 16:30:18 +0100 Subject: [PATCH] =?UTF-8?q?cr=C3=A9ation=20component=20steps=20+=20modifs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/lib/ngx-cream-lib.module.ts | 4 +- .../src/lib/steps/steps.component.css | 29 +++++++++++++ .../src/lib/steps/steps.component.html | 34 +++++++++++++++ .../src/lib/steps/steps.component.spec.ts | 23 ++++++++++ .../src/lib/steps/steps.component.ts | 10 +++++ src/app/app-routing.module.ts | 6 +++ src/app/app.module.ts | 2 + .../pages/steps-page/steps-page.component.css | 0 .../steps-page/steps-page.component.html | 42 +++++++++++++++++++ .../pages/steps-page/steps-page.component.ts | 15 +++++++ 10 files changed, 164 insertions(+), 1 deletion(-) create mode 100644 projects/ngx-cream-lib/src/lib/steps/steps.component.css create mode 100644 projects/ngx-cream-lib/src/lib/steps/steps.component.html create mode 100644 projects/ngx-cream-lib/src/lib/steps/steps.component.spec.ts create mode 100644 projects/ngx-cream-lib/src/lib/steps/steps.component.ts create mode 100644 src/app/pages/steps-page/steps-page.component.css create mode 100644 src/app/pages/steps-page/steps-page.component.html create mode 100644 src/app/pages/steps-page/steps-page.component.ts diff --git a/projects/ngx-cream-lib/src/lib/ngx-cream-lib.module.ts b/projects/ngx-cream-lib/src/lib/ngx-cream-lib.module.ts index 0e81461..bd00e7d 100644 --- a/projects/ngx-cream-lib/src/lib/ngx-cream-lib.module.ts +++ b/projects/ngx-cream-lib/src/lib/ngx-cream-lib.module.ts @@ -26,6 +26,7 @@ import { IconButtonComponent } from './icon-button/icon-button.component'; import { TooltipDirective } from './directives/tooltip.directive'; import { CheckAllDirective } from './directives/check-all.directive'; import { AutocompleteComponent } from './autocomplete/autocomplete.component'; +import { StepsComponent } from './steps/steps.component'; const components = [ AccordionComponent, @@ -50,10 +51,11 @@ const components = [ TooltipDirective, CheckAllDirective, AutocompleteComponent, + StepsComponent, ]; @NgModule({ - declarations: [...components], + declarations: [...components, StepsComponent], imports: [CommonModule, RouterModule, DragDropModule, BrowserModule, BrowserAnimationsModule], exports: [...components], schemas: [CUSTOM_ELEMENTS_SCHEMA], diff --git a/projects/ngx-cream-lib/src/lib/steps/steps.component.css b/projects/ngx-cream-lib/src/lib/steps/steps.component.css new file mode 100644 index 0000000..1d8ef15 --- /dev/null +++ b/projects/ngx-cream-lib/src/lib/steps/steps.component.css @@ -0,0 +1,29 @@ +.steps { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} + +.steps div{ + padding: 0.5rem; +} + +.steps div p{ + padding: 0.5rem; +} + +.steps div p a { + padding: 0.6rem 1rem; + border-radius: 100%; + background-color: var(--main-color); + color: var(--text-inv); +} + +@media (min-width: 550px) { + .steps { + display: flex; + flex-direction: row; + justify-content: space-around; + } +} diff --git a/projects/ngx-cream-lib/src/lib/steps/steps.component.html b/projects/ngx-cream-lib/src/lib/steps/steps.component.html new file mode 100644 index 0000000..9d8f53d --- /dev/null +++ b/projects/ngx-cream-lib/src/lib/steps/steps.component.html @@ -0,0 +1,34 @@ +
+
+

+ 1 +

+

+ {{ titles[0] }} +

+
+
+

+ 2 +

+

+ {{ titles[1] }} +

+
+
+

+ 3 +

+

+ {{ titles[2] }} +

+
+
+

+ 4 +

+

+ {{ titles[3] }} +

+
+
diff --git a/projects/ngx-cream-lib/src/lib/steps/steps.component.spec.ts b/projects/ngx-cream-lib/src/lib/steps/steps.component.spec.ts new file mode 100644 index 0000000..80d5544 --- /dev/null +++ b/projects/ngx-cream-lib/src/lib/steps/steps.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { StepsComponent } from './steps.component'; + +describe('StepsComponent', () => { + let component: StepsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ StepsComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(StepsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ngx-cream-lib/src/lib/steps/steps.component.ts b/projects/ngx-cream-lib/src/lib/steps/steps.component.ts new file mode 100644 index 0000000..e6381b9 --- /dev/null +++ b/projects/ngx-cream-lib/src/lib/steps/steps.component.ts @@ -0,0 +1,10 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'c3m-steps', + templateUrl: './steps.component.html', + styleUrls: ['./steps.component.css'], +}) +export class StepsComponent { + @Input() titles: Array = []; +} diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 230c35e..8f9585e 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -23,6 +23,7 @@ import { FormDesignPageComponent } from './pages/form-design-page/form-design-pa import { IconographyPageComponent } from './pages/iconography-page/iconography-page.component'; import { FocusOnChangePageComponent } from './pages/focus-on-change-page/focus-on-change-page.component'; import { AutocompletePageComponent } from './pages/autocomplete-page/autocomplete-page.component'; +import { StepsPageComponent } from './pages/steps-page/steps-page.component'; const routes: Routes = [ //Portal (doc) routes goes here @@ -75,6 +76,11 @@ const routes: Routes = [ component: SnackbarPageComponent, data: { title: 'Snackbar' }, }, + { + path: 'steps', + component: StepsPageComponent, + data: { title: 'Steps' }, + }, { path: 'toast', component: ToastPageComponent, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1631ff3..f17b119 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -31,6 +31,7 @@ import { AutofocusPageComponent } from './pages/autofocus-page/autofocus-page.co import { FocusOnChangePageComponent } from './pages/focus-on-change-page/focus-on-change-page.component'; import { CheckAllPageComponent } from './pages/check-all-page/check-all-page.component'; import { AutocompletePageComponent } from './pages/autocomplete-page/autocomplete-page.component'; +import { StepsPageComponent } from './pages/steps-page/steps-page.component'; @NgModule({ declarations: [ @@ -63,6 +64,7 @@ import { AutocompletePageComponent } from './pages/autocomplete-page/autocomplet FocusOnChangePageComponent, CheckAllPageComponent, AutocompletePageComponent, + StepsPageComponent, ], imports: [BrowserModule, AppRoutingModule, NgxCreamLibModule], providers: [], diff --git a/src/app/pages/steps-page/steps-page.component.css b/src/app/pages/steps-page/steps-page.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/steps-page/steps-page.component.html b/src/app/pages/steps-page/steps-page.component.html new file mode 100644 index 0000000..54a2df6 --- /dev/null +++ b/src/app/pages/steps-page/steps-page.component.html @@ -0,0 +1,42 @@ +
+

General component

+ + + + + + + 

+    
+  
+

+
+

+  
Properties and Events

+
+  
+    
+    
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+    
+  

+      Properties applicable to the component
+      c3m-steps
+    
NameTypeDefaultDescription

+  
* mandatory properties

+

diff --git a/src/app/pages/steps-page/steps-page.component.ts b/src/app/pages/steps-page/steps-page.component.ts
new file mode 100644
index 0000000..0ba4de7
--- /dev/null
+++ b/src/app/pages/steps-page/steps-page.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { CreamPage } from '../cream-page';
+
+@Component({
+  selector: 'app-steps-page',
+  templateUrl: './steps-page.component.html',
+  styleUrls: ['./steps-page.component.css'],
+})
+export class StepsPageComponent implements CreamPage {
+  pageTitle = 'Steps';
+  componentName = 'c3m-steps';
+  resourceType = 'Component';
+
+  titles = ['Personal', 'Seat', 'Payment', 'Confirmation'];
+}