+
+
+
+ @if (isPlatformBrowser) {
+ @for (
+ layer of roadmapLayers();
+ track layer.parentNode.id;
+ let last = $last
+ ) {
+
+
+
+ `,
+})
+export class RoadmapBottomsheetAdditionalDescriptionComponent {
+ title = input.required
+
+ + {{ additionalDescription().introduction }} +
+-
+ @for (
+ listElement of additionalDescription().toPrepareList;
+ track $index
+ ) {
+
- {{ listElement }} + } +
+ {{ additionalDescription().ending }} +
+
+
+ `,
+})
+export class RoadmapBottomsheetCreatorsComponent {
+ title = input.required-
+ @for (creator of creators(); track creator.name) {
+
- + + {{ creator.name }} + + + } +
+
+ `,
+})
+export class RoadmapBottomsheetDescriptionComponent {
+ title = input.required
+
+ {{ description() }}
+
+
+ `,
+})
+export class RoadmapBottomsheetFooterComponent {
+ readonly title = input.required
+ @for (item of items(); track item.href) {
+
+
+
+
diff --git a/libs/blog/roadmap/ui-roadmap-bottomsheet/src/lib/roadmap-bottomsheet-header/roadmap-bottomsheet-header.component.scss b/libs/blog/roadmap/ui-roadmap-bottomsheet/src/lib/roadmap-bottomsheet-header/roadmap-bottomsheet-header.component.scss
new file mode 100644
index 00000000..714391af
--- /dev/null
+++ b/libs/blog/roadmap/ui-roadmap-bottomsheet/src/lib/roadmap-bottomsheet-header/roadmap-bottomsheet-header.component.scss
@@ -0,0 +1,4 @@
+:host {
+ --secondary-color: #66002b;
+ --gradient-color: #481cab;
+}
diff --git a/libs/blog/roadmap/ui-roadmap-bottomsheet/src/lib/roadmap-bottomsheet-header/roadmap-bottomsheet-header.component.ts b/libs/blog/roadmap/ui-roadmap-bottomsheet/src/lib/roadmap-bottomsheet-header/roadmap-bottomsheet-header.component.ts
new file mode 100644
index 00000000..6fb00978
--- /dev/null
+++ b/libs/blog/roadmap/ui-roadmap-bottomsheet/src/lib/roadmap-bottomsheet-header/roadmap-bottomsheet-header.component.ts
@@ -0,0 +1,16 @@
+import { NgClass, TitleCasePipe } from '@angular/common';
+import { Component, input } from '@angular/core';
+
+import { RoadmapNodeDTO } from '@angular-love/blog/contracts/roadmap';
+import { RoadmapStandardNode } from '@angular-love/blog/roadmap/ui-roadmap-node';
+
+@Component({
+ selector: 'al-roadmap-bottomsheet-header',
+ imports: [TitleCasePipe, NgClass],
+ templateUrl: './roadmap-bottomsheet-header.component.html',
+ styleUrl: 'roadmap-bottomsheet-header.component.scss',
+})
+export class RoadmapBottomsheetHeaderComponent {
+ nodeType = input.required{{ title() | titlecase }}
+
+
+ `,
+})
+export class RoadmapBottomsheetRegularContentComponent {
+ title = input.required-
+ @for (resource of resources(); track resource.name) {
+
- + + {{ resource.name }} + + + } +
{{ title() }}
+ + `, + host: { + class: 'flex items-center gap-4', + }, +}) +export class RoadmapBottomsheetSubtitleComponent { + title = input.required
+
diff --git a/libs/blog/roadmap/ui-roadmap-bottomsheet/src/lib/roadmap-bottomsheet.component.ts b/libs/blog/roadmap/ui-roadmap-bottomsheet/src/lib/roadmap-bottomsheet.component.ts
new file mode 100644
index 00000000..9476b0bc
--- /dev/null
+++ b/libs/blog/roadmap/ui-roadmap-bottomsheet/src/lib/roadmap-bottomsheet.component.ts
@@ -0,0 +1,122 @@
+import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
+import {
+ Component,
+ computed,
+ effect,
+ ElementRef,
+ inject,
+ signal,
+ viewChild,
+} from '@angular/core';
+import { Router } from '@angular/router';
+
+import {
+ AngularLoveNode,
+ RoadmapRegularNode,
+ RoadmapStandardNode,
+} from '@angular-love/blog/roadmap/ui-roadmap-node';
+import { ButtonComponent } from '@angular-love/blog/shared/ui-button';
+
+import { RoadmapBottomsheetAdditionalDescriptionComponent } from './roadmap-bottomsheet-additional-description/roadmap-bottomsheet-additional-description.component';
+import { RoadmapBottomsheetCreatorsComponent } from './roadmap-bottomsheet-creators/roadmap-bottomsheet-creators.component';
+import { RoadmapBottomsheetDescriptionComponent } from './roadmap-bottomsheet-description/roadmap-bottomsheet-description.component';
+import { RoadmapBottomsheetFooterComponent } from './roadmap-bottomsheet-footer/roadmap-bottomsheet-footer.component';
+import { RoadmapBottomsheetHeaderComponent } from './roadmap-bottomsheet-header/roadmap-bottomsheet-header.component';
+import { RoadmapBottomsheetRegularContentComponent } from './roadmap-bottomsheet-regular-content/roadmap-bottomsheet-regular-content.component';
+
+function isAngularNode(node: RoadmapStandardNode): node is AngularLoveNode {
+ return node.nodeType === 'angular-love';
+}
+
+function isRegularNode(node: RoadmapStandardNode): node is RoadmapRegularNode {
+ return node.nodeType !== 'angular-love';
+}
+
+@Component({
+ imports: [
+ RoadmapBottomsheetHeaderComponent,
+ RoadmapBottomsheetDescriptionComponent,
+ RoadmapBottomsheetRegularContentComponent,
+ RoadmapBottomsheetCreatorsComponent,
+ ButtonComponent,
+ RoadmapBottomsheetFooterComponent,
+ RoadmapBottomsheetAdditionalDescriptionComponent,
+ ],
+ selector: 'al-roadmap-bottomsheet',
+ templateUrl: './roadmap-bottomsheet.component.html',
+ styles: `
+ .bottomsheet {
+ animation: fadeInBottom 0.4s ease-out forwards;
+ }
+
+ @keyframes fadeInBottom {
+ from {
+ opacity: 0;
+ transform: translateY(100%);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+ `,
+})
+export class RoadmapBottomsheetComponent {
+ private _router = inject(Router);
+ private _dialogRef = inject(DialogRef
+
+
+
+
+ } @else {
+
+
+ `,
+ styleUrl: 'roadmap-basic-node.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ imports: [RoadmapNodeLabelComponent],
+ host: {
+ class: 'relative',
+ },
+})
+export class RoadmapBasicNodeComponent {
+ private readonly difference = 5;
+ protected readonly _roadmapBottomSheetNotifierService = inject(
+ RoadmapBottomSheetNotifierService,
+ );
+ protected readonly pointerDown = signal<{ x: number; y: number }>({
+ x: 0,
+ y: 0,
+ });
+
+ readonly node = input.required
+ {{ node().title }}
+
+
+
+
+ {{ cluster().title }}
+
+ @for (clusterNode of cluster().clusteredNodes; track clusterNode.id) {
+
+ `,
+ host: {
+ class:
+ 'block bg-gradient-to-br from-[#100F15] to-[#3B0019] rounded-lg text-center border-2 border-[#FDF5FD]',
+ },
+ styleUrl: 'roadmap-cluster.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RoadmapClusterComponent {
+ protected readonly _roadmapBottomSheetNotifierService = inject(
+ RoadmapBottomSheetNotifierService,
+ );
+ readonly cluster = input.required
+
+ }
+
+
+ {{ clusterNode.title }}
+
+ {{ label() }}
+
+ `,
+ styleUrl: 'roadmap-node-label.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class RoadmapNodeLabelComponent {
+ readonly label = input.required