+
+
+
+
+
{{ 'dashboard.typographySelection.custom.primaryFont' | translate }}
-
+
{{
selectedPrimaryFont || ('dashboard.typographySelection.custom.notSelected' | translate)
}}
-
-
+
+
+
+
{{ 'dashboard.typographySelection.custom.secondaryFont' | translate }}
-
+
{{
selectedSecondaryFont ||
('dashboard.typographySelection.custom.notSelected' | translate)
@@ -81,26 +66,16 @@
-
-
+
+
+
Search and select fonts to apply:
+
+
diff --git a/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-custom-creator/typography-custom-creator.ts b/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-custom-creator/typography-custom-creator.ts
index 8cf8744f3..426d7fd25 100644
--- a/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-custom-creator/typography-custom-creator.ts
+++ b/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-custom-creator/typography-custom-creator.ts
@@ -1,7 +1,6 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
-import { TypographyModel } from '../../../../../models/brand-identity.model';
import {
TypographyPreview,
GoogleFont,
@@ -16,22 +15,13 @@ import { TypographySearchComponent } from '../typography-search/typography-searc
styleUrls: ['./typography-custom-creator.css'],
})
export class TypographyCustomCreatorComponent {
- @Input() customTypographies: TypographyPreview[] = [];
- @Input() selectedCustomTypography: TypographyPreview | null = null;
@Input() selectedPrimaryFont = '';
@Input() selectedSecondaryFont = '';
@Input() searchResults: GoogleFont[] = [];
@Input() isSearching = false;
- @Input() canCreateCustom = false;
- @Output() customTypographySelected = new EventEmitter
();
@Output() searchInput = new EventEmitter();
@Output() fontSelected = new EventEmitter<{ font: GoogleFont; type: 'primary' | 'secondary' }>();
- @Output() customTypographyCreated = new EventEmitter();
-
- onCustomTypographySelected(typography: TypographyPreview): void {
- this.customTypographySelected.emit(typography);
- }
onSearchInput(query: string): void {
this.searchInput.emit(query);
@@ -40,12 +30,4 @@ export class TypographyCustomCreatorComponent {
onFontSelected(event: { font: GoogleFont; type: 'primary' | 'secondary' }): void {
this.fontSelected.emit(event);
}
-
- onCreateCustomTypography(): void {
- this.customTypographyCreated.emit();
- }
-
- trackCustomTypography(index: number, typography: TypographyPreview): string {
- return typography.id;
- }
}
diff --git a/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-generated-list/typography-generated-list.ts b/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-generated-list/typography-generated-list.ts
index fef76ec7e..9fecfada0 100644
--- a/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-generated-list/typography-generated-list.ts
+++ b/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-generated-list/typography-generated-list.ts
@@ -2,13 +2,12 @@ import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { TypographyModel } from '../../../../../models/brand-identity.model';
-import { CarouselComponent } from '../../../../../../../shared/components/carousel/carousel.component';
import { TypographyCardComponent } from '../typography-card/typography-card';
@Component({
selector: 'app-typography-generated-list',
standalone: true,
- imports: [CommonModule, TranslateModule, CarouselComponent, TypographyCardComponent],
+ imports: [CommonModule, TranslateModule, TypographyCardComponent],
templateUrl: './typography-generated-list.html',
styleUrls: ['./typography-generated-list.css'],
})
diff --git a/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-preview-panel/typography-preview-panel.css b/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-preview-panel/typography-preview-panel.css
deleted file mode 100644
index a94507019..000000000
--- a/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-preview-panel/typography-preview-panel.css
+++ /dev/null
@@ -1 +0,0 @@
-/* Typography Preview Panel Component Styles */
diff --git a/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-preview-panel/typography-preview-panel.html b/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-preview-panel/typography-preview-panel.html
deleted file mode 100644
index 756051bd8..000000000
--- a/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-preview-panel/typography-preview-panel.html
+++ /dev/null
@@ -1,49 +0,0 @@
-
diff --git a/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-preview-panel/typography-preview-panel.ts b/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-preview-panel/typography-preview-panel.ts
deleted file mode 100644
index 96605f350..000000000
--- a/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-preview-panel/typography-preview-panel.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Component, Input, signal } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
-import { TypographyModel } from '../../../../../models/brand-identity.model';
-
-@Component({
- selector: 'app-typography-preview-panel',
- standalone: true,
- imports: [CommonModule, TranslateModule],
- templateUrl: './typography-preview-panel.html',
- styleUrls: ['./typography-preview-panel.css'],
-})
-export class TypographyPreviewPanelComponent {
- @Input() typography: TypographyModel | null = null;
- @Input() previewText = signal('Your Brand Name');
- @Input() selectedPrimaryFont = '';
- @Input() selectedSecondaryFont = '';
-
- get primaryFont(): string {
- return this.typography?.primaryFont || this.selectedPrimaryFont || 'inherit';
- }
-
- get secondaryFont(): string {
- return this.typography?.secondaryFont || this.selectedSecondaryFont || 'inherit';
- }
-}
diff --git a/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-preview/typography-preview.html b/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-preview/typography-preview.html
index b339c679e..64d1d3198 100644
--- a/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-preview/typography-preview.html
+++ b/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-preview/typography-preview.html
@@ -1,67 +1,71 @@
-@if (typography) {
+
-} @else {
-
-
+ @if (typography) {
-
+
+
+
+
+ {{ previewText() }}
+
+
+ {{ 'dashboard.typographySelection.preview.heroSubtitle' | translate }}
+
+
+
+
+
+
+
+ "{{ 'dashboard.typographySelection.preview.quote' | translate }}"
+
+
+ — {{ 'dashboard.typographySelection.preview.author' | translate }}
+
+
+
+
+ } @else {
+
+
+
+
+ {{ 'dashboard.typographySelection.selectToPreview' | translate }}
+
+
Select fonts to see the preview
+
-
- {{ 'dashboard.typographySelection.selectToPreview' | translate }}
-
-
- Click any font card on the left to see the magic happen
-
-
+ }
-}
+
diff --git a/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-selection.html b/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-selection.html
index 7e47f6036..9480a7ee8 100644
--- a/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-selection.html
+++ b/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-selection.html
@@ -102,89 +102,25 @@
(typographySelected)="onTypographySelected($event)"
(regenerateRequest)="onRegenerateTypographies()"
>
- }
- @else if (activeTab() === 'custom') {
+ } @else if (activeTab() === 'custom') {
}
- @if (activeTab() === 'generated' || activeTab() === 'popular') {
-
-
- } @else if (activeTab() === 'custom') {
-
-
- }
-
-
-
-
-
-
-
-
-
-
+
diff --git a/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-selection.ts b/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-selection.ts
index ec1e2d58d..a9c57749e 100644
--- a/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-selection.ts
+++ b/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-selection.ts
@@ -22,7 +22,6 @@ import { ProjectService } from '../../../../services/project.service';
import { debounceTime, distinctUntilChanged, switchMap, takeUntil } from 'rxjs/operators';
import { Subject, of } from 'rxjs';
import { TypographyPreviewComponent } from './typography-preview/typography-preview';
-import { PopularTypographyListComponent } from './popular-typography-list/popular-typography-list';
import { ProjectModel } from '../../../../models/project.model';
import { BrandingService } from '../../../../services/ai-agents/branding.service';
@@ -30,7 +29,6 @@ import { BrandingService } from '../../../../services/ai-agents/branding.service
import { TypographyTabsComponent, TypographyTab } from './typography-tabs/typography-tabs';
import { TypographyGeneratedListComponent } from './typography-generated-list/typography-generated-list';
import { TypographyCustomCreatorComponent } from './typography-custom-creator/typography-custom-creator';
-import { TypographyPreviewPanelComponent } from './typography-preview-panel/typography-preview-panel';
@Component({
selector: 'app-typography-selection',
@@ -40,11 +38,9 @@ import { TypographyPreviewPanelComponent } from './typography-preview-panel/typo
FormsModule,
TranslateModule,
TypographyPreviewComponent,
- PopularTypographyListComponent,
TypographyTabsComponent,
TypographyGeneratedListComponent,
TypographyCustomCreatorComponent,
- TypographyPreviewPanelComponent,
],
templateUrl: './typography-selection.html',
styleUrls: ['./typography-selection.css'],
@@ -63,8 +59,7 @@ export class TypographySelectionComponent implements OnInit, OnDestroy {
// Outputs
@Output() readonly typographySelected = new EventEmitter
();
@Output() readonly projectUpdate = new EventEmitter>();
- @Output() readonly nextStep = new EventEmitter();
- @Output() readonly previousStep = new EventEmitter();
+ @Output() readonly typographySelectionChanged = new EventEmitter();
// Signals
protected activeTab = signal('generated');
@@ -73,11 +68,12 @@ export class TypographySelectionComponent implements OnInit, OnDestroy {
protected isGenerating = signal(false);
protected typographyModels = signal([]);
protected selectedTypographyId = signal(null);
- protected popularTypographies = signal([]);
- protected customTypographies = signal([]);
- protected selectedCustomTypography = signal(null);
+
+ // Custom Selection Signals
protected selectedPrimaryFont = signal('');
protected selectedSecondaryFont = signal('');
+
+ // Search Signals
protected searchResults = signal([]);
protected isSearching = signal(false);
protected searchQuery = signal('');
@@ -86,60 +82,50 @@ export class TypographySelectionComponent implements OnInit, OnDestroy {
// Computed properties
protected hasGeneratedTypographies = computed(() => this.typographyModels().length > 0);
- protected canCreateCustom = computed(
- () => this.selectedPrimaryFont().length > 0 && this.selectedSecondaryFont().length > 0,
- );
+
protected canContinue = computed(() => {
- return (
- this.selectedTypographyId() !== null ||
- this.selectedCustomTypography() !== null ||
- (this.selectedPrimaryFont() && this.selectedSecondaryFont())
- );
+ if (this.activeTab() === 'generated') {
+ return this.selectedTypographyId() !== null;
+ }
+ // For custom tab, we need both fonts selected
+ return this.selectedPrimaryFont().length > 0 && this.selectedSecondaryFont().length > 0;
});
- protected currentSelectedTypography = computed(() =>
- this.typographyModels().find((t) => t.id === this.selectedTypographyId()),
- );
- protected customPreviewTypography = computed(() => {
- if (this.selectedCustomTypography()) {
+ protected currentSelectedTypography = computed(() => {
+ if (this.activeTab() === 'generated') {
+ return this.typographyModels().find(
+ (t: TypographyModel) => t.id === this.selectedTypographyId(),
+ );
+ }
+
+ // For custom tab, return a live preview object
+ if (this.selectedPrimaryFont() || this.selectedSecondaryFont()) {
return {
- id: this.selectedCustomTypography()!.id,
- name: this.selectedCustomTypography()!.name,
- primaryFont: this.selectedCustomTypography()!.primaryFont,
- secondaryFont: this.selectedCustomTypography()!.secondaryFont,
- description: '',
+ id: 'custom-preview',
+ name: 'Custom Selection',
+ primaryFont: this.selectedPrimaryFont() || 'Inter', // Fallback for preview
+ secondaryFont: this.selectedSecondaryFont() || 'Inter', // Fallback for preview
+ description: 'Your custom font combination',
} as TypographyModel;
}
- return {
- id: 'preview',
- name: 'Custom Preview',
- primaryFont: this.selectedPrimaryFont(),
- secondaryFont: this.selectedSecondaryFont(),
- description: 'Preview of your custom selection',
- } as TypographyModel;
+ return null;
});
// Event handlers for new template
protected onTabChanged(tab: TypographyTab): void {
this.activeTab.set(tab);
+ // If switching to generated, ensure something is selected if possible
+ if (tab === 'generated' && !this.selectedTypographyId() && this.typographyModels().length > 0) {
+ this.selectedTypographyId.set(this.typographyModels()[0].id);
+ this.notifySelectionChange();
+ }
}
protected onTypographySelected(typography: TypographyModel): void {
this.selectedTypographyId.set(typography.id);
this.typographySelected.emit(typography);
- }
-
- protected onPopularTypographySelected(typography: TypographyPreview): void {
- const typographyModel: TypographyModel = {
- id: typography.id,
- name: typography.name,
- primaryFont: typography.primaryFont,
- secondaryFont: typography.secondaryFont,
- description: `Popular typography: ${typography.name}`,
- };
- this.selectedTypographyId.set(typography.id);
- this.typographySelected.emit(typographyModel);
+ this.notifySelectionChange();
}
protected onRegenerateTypographies(): void {
@@ -152,44 +138,50 @@ export class TypographySelectionComponent implements OnInit, OnDestroy {
this.initializeTypographies();
}
- protected goBack(): void {
- this.previousStep.emit();
- }
+ // Method to prepare and emit project data when parent requests it
+ public prepareTypographyData(): Partial | null {
+ const selectedTypography = this.currentSelectedTypography();
+ if (!selectedTypography) return null;
+
+ // For custom typography, add it to the generatedTypography list so it can be found in project-summary
+ let updatedGeneratedTypography =
+ this.project.analysisResultModel?.branding?.generatedTypography || [];
- protected saveAsDraft(): void {
- const selectedTypography = this.currentSelectedTypography() || this.customPreviewTypography();
- const draftData: Partial = {
+ if (this.activeTab() === 'custom' && selectedTypography.id === 'custom-preview') {
+ // Create a proper custom typography with unique ID
+ const customTypography: TypographyModel = {
+ ...selectedTypography,
+ id: `custom-${Date.now()}`, // Unique ID for custom typography
+ };
+
+ // Add custom typography to the list if not already present
+ const existingCustomIndex = updatedGeneratedTypography.findIndex((t) =>
+ t.id.startsWith('custom-'),
+ );
+ if (existingCustomIndex >= 0) {
+ updatedGeneratedTypography[existingCustomIndex] = customTypography;
+ } else {
+ updatedGeneratedTypography = [...updatedGeneratedTypography, customTypography];
+ }
+
+ selectedTypography.id = customTypography.id; // Update the selected typography ID
+ }
+
+ return {
analysisResultModel: {
...this.project.analysisResultModel,
branding: {
...this.project.analysisResultModel?.branding,
typography: selectedTypography,
+ generatedTypography: updatedGeneratedTypography,
},
},
};
- this.projectUpdate.emit(draftData);
- }
-
- protected continueToNext(): void {
- if (this.canContinue()) {
- const selectedTypography = this.currentSelectedTypography() || this.customPreviewTypography();
- const projectData: Partial = {
- analysisResultModel: {
- ...this.project.analysisResultModel,
- branding: {
- ...this.project.analysisResultModel?.branding,
- typography: selectedTypography,
- },
- },
- };
- this.projectUpdate.emit(projectData);
- this.nextStep.emit();
- }
}
- protected selectCustomTypography(typography: TypographyPreview): void {
- this.selectedCustomTypography.set(typography);
- this.selectedTypographyId.set(null);
+ // Notify parent about selection state changes
+ private notifySelectionChange(): void {
+ this.typographySelectionChanged.emit(this.canContinue());
}
protected onSearchInput(query: string): void {
@@ -205,31 +197,12 @@ export class TypographySelectionComponent implements OnInit, OnDestroy {
this.selectedSecondaryFont.set(font.family);
}
this.typographyService.loadGoogleFont(font.family);
- }
-
- protected createCustomTypography(): void {
- if (!this.canCreateCustom()) return;
-
- const customTypography: TypographyPreview = {
- id: `custom-${Date.now()}`,
- name: `${this.selectedPrimaryFont()} + ${this.selectedSecondaryFont()}`,
- primaryFont: this.selectedPrimaryFont(),
- secondaryFont: this.selectedSecondaryFont(),
- category: 'custom',
- isLoaded: true,
- };
-
- const current = this.customTypographies();
- this.customTypographies.set([...current, customTypography]);
- this.selectedCustomTypography.set(customTypography);
- this.selectedPrimaryFont.set('');
- this.selectedSecondaryFont.set('');
+ this.notifySelectionChange();
}
ngOnInit(): void {
this.initializeTypographies();
this.setupSearch();
- this.loadPopularTypographies();
}
ngOnDestroy(): void {
@@ -244,6 +217,11 @@ export class TypographySelectionComponent implements OnInit, OnDestroy {
if (generatedTypography && generatedTypography.length > 0) {
this.typographyModels.set(generatedTypography);
this.isLoading.set(false);
+ // Auto-select first typography if none selected
+ if (!this.selectedTypographyId()) {
+ this.selectedTypographyId.set(generatedTypography[0].id);
+ this.notifySelectionChange();
+ }
} else {
this.regenerateTypographies();
}
@@ -281,14 +259,14 @@ export class TypographySelectionComponent implements OnInit, OnDestroy {
this.typographyModels.set(mockTypographies);
this.isGenerating.set(false);
+ // Auto-select first item
+ if (mockTypographies.length > 0) {
+ this.selectedTypographyId.set(mockTypographies[0].id);
+ this.notifySelectionChange();
+ }
}, 2000);
}
- private loadPopularTypographies(): void {
- const popular = this.typographyService.getPopularTypographies();
- this.popularTypographies.set(popular);
- }
-
private setupSearch(): void {
this.searchSubject
.pipe(
diff --git a/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-tabs/typography-tabs.ts b/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-tabs/typography-tabs.ts
index de3d0d02e..e9387fe00 100644
--- a/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-tabs/typography-tabs.ts
+++ b/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/components/typography-selection/typography-tabs/typography-tabs.ts
@@ -2,7 +2,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
-export type TypographyTab = 'generated' | 'popular' | 'custom';
+export type TypographyTab = 'generated' | 'custom';
@Component({
selector: 'app-typography-tabs',
diff --git a/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/create-project.html b/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/create-project.html
index 01673fd34..be3dcb41c 100644
--- a/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/create-project.html
+++ b/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/create-project.html
@@ -54,9 +54,8 @@
@if (isStepActive(3)) {
}
@if (isStepActive(4)) {
@@ -86,7 +85,7 @@
[project]="project()"
[selectedLogo]="project().analysisResultModel.branding.logo.id || ''"
[selectedColor]="project().analysisResultModel.branding.colors.id || ''"
- [selectedTypography]="project().analysisResultModel.branding.typography.id || ''"
+ [selectedTypography]="project().analysisResultModel?.branding?.typography?.id || ''"
[logos]="project().analysisResultModel.branding.generatedLogos || []"
[colorPalettes]="project().analysisResultModel.branding.generatedColors || []"
[typographyOptions]="project().analysisResultModel.branding.generatedTypography || []"
diff --git a/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/create-project.ts b/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/create-project.ts
index 6d2b072f2..b4b993331 100644
--- a/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/create-project.ts
+++ b/apps/main-dashboard/src/app/modules/dashboard/pages/create-project/create-project.ts
@@ -1,4 +1,4 @@
-import { Component, inject, OnInit, signal, computed } from '@angular/core';
+import { Component, inject, OnInit, signal, computed, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router } from '@angular/router';
import { ProjectModel } from '../../models/project.model';
@@ -110,6 +110,12 @@ export class CreateProjectComponent implements OnInit {
marketing: false,
});
+ // Step-specific validation state
+ protected readonly typographySelectionValid = signal(false);
+
+ // ViewChild to access typography component
+ @ViewChild(TypographySelectionComponent) typographyComponent?: TypographySelectionComponent;
+
// Static data
protected readonly projectTypes = CreateProjectDatas.groupedProjectTypes;
protected readonly targets = CreateProjectDatas.groupedTargets;
@@ -160,7 +166,7 @@ export class CreateProjectComponent implements OnInit {
case 'colors':
return !!project.analysisResultModel?.branding?.generatedColors?.length;
case 'typography':
- return !!project.analysisResultModel?.branding?.typography;
+ return this.typographySelectionValid();
case 'logo':
return !!project.analysisResultModel?.branding?.logo;
case 'variations':
@@ -185,10 +191,26 @@ export class CreateProjectComponent implements OnInit {
}
}
+ /**
+ * Handle typography selection change
+ */
+ protected onTypographySelectionChanged(isValid: boolean): void {
+ this.typographySelectionValid.set(isValid);
+ }
+
/**
* Navigate to next step
*/
protected goToNextStep(): void {
+ // For typography step, prepare and save typography data before proceeding
+ if (this.currentStepIndex() === 3 && this.typographyComponent) {
+ // Typography step
+ const typographyData = this.typographyComponent.prepareTypographyData();
+ if (typographyData) {
+ this.onProjectUpdate(typographyData);
+ }
+ }
+
if (this.canGoNext()) {
const nextIndex = this.currentStepIndex() + 1;
if (nextIndex < this.steps.length) {