chore(components-angular): add missing components markup to Angular consumer-app

packages/components-angular/projects/consumer-app/src/app/app.component.html

@@ -1,5 +1,119 @@
-<header class="palette palette-alternate">
-  <nav class="container py-8">
+<post-header>
+  <!-- Logo -->
+  <post-logo slot="post-logo" url="/">Homepage</post-logo>
+
+  <!-- Target Group -->
+  <ul slot="target-group" class="target-group">
+    <li>
+      <a href="#" class="active">Private customers</a>
+    </li>
+    <li>
+      <a href="#">Business customers</a>
+    </li>
+  </ul>
+
+  <!-- Global controls (Search) -->
+  <ul class="list-inline" slot="global-controls">
+    <li>
+      <a href="">
+        <span>Search</span>
+        <post-icon aria-hidden="true" name="search"></post-icon>
+      </a>
+    </li>
+  </ul>
+
+  <!-- Meta navigation -->
+  <ul class="list-inline" slot="meta-navigation">
+    <li>
+      <a href="">
+        Jobs
+        <post-icon name="jobs" aria-hidden="true"></post-icon>
+      </a>
+    </li>
+    <li>
+      <a href="">
+        Create Account
+        <post-icon name="adduser" aria-hidden="true"></post-icon>
+      </a>
+    </li>
+  </ul>
+
+  <!-- Language switch -->
+  <post-language-switch
+    caption="Change the language"
+    description="The currently selected language is English."
+    variant="list"
+    name="language-switch-example"
+    slot="post-language-switch"
+  >
+    <post-language-option code="de" name="German">de</post-language-option>
+    <post-language-option code="fr" name="French">fr</post-language-option>
+    <post-language-option code="it" name="Italian">it</post-language-option>
+    <post-language-option active="true" code="en" name="English">en</post-language-option>
+  </post-language-switch>
+
+  <!-- Global header login/user menu -->
+
+  <a href="" slot="global-login">
+    <span>Login</span>
+    <post-icon name="login"></post-icon>
+  </a>
+
+  <!-- Menu button for mobile -->
+  <post-togglebutton slot="post-togglebutton">
+    <span>Menu</span>
+    <post-icon aria-hidden="true" name="burger" data-showwhen="untoggled"></post-icon>
+    <post-icon aria-hidden="true" name="closex" data-showwhen="toggled"></post-icon>
+  </post-togglebutton>
+
+  <!-- Main navigation -->
+  <post-mainnavigation caption="Main navigation">
+    <post-list title-hidden="">
+      <h2>Main Navigation</h2>
+      <!-- Link only level 1 -->
+      <post-list-item slot="post-list-item">
+        <a href="/letters">Letters</a>
+      </post-list-item>
+      <post-list-item slot="post-list-item">
+        <a href="/packages">Packages</a>
+      </post-list-item>
+
+      <!-- Level 1 with megadropdown -->
+      @for (dropdown of megadropdowns; track dropdown.id) {
+        <post-list-item slot="post-list-item">
+          <post-megadropdown-trigger [for]="dropdown.id">{{ dropdown.trigger }}</post-megadropdown-trigger>
+          <post-megadropdown [id]="dropdown.id">
+            <button slot="back-button" class="btn btn-tertiary px-0 btn-sm">
+              <post-icon name="arrowleft"></post-icon>
+              Back
+            </button>
+            <post-closebutton slot="close-button">Close</post-closebutton>
+            <h2 slot="megadropdown-title">{{ dropdown.title }}</h2>
+            <a slot="megadropdown-overview-link" [href]="dropdown.overviewLink">Overview {{ dropdown.trigger }}</a>
+            @for (section of dropdown.sections; track section.title) {
+              <post-list>
+                @if (section.titleLink) {
+                  <h3><a [href]="section.titleLink">{{ section.title }}</a></h3>
+                } @else {
+                  <h3>{{ section.title }}</h3>
+                }
+                @for (link of section.links; track link.text) {
+                  <post-list-item slot="post-list-item">
+                    <a [href]="link.url">{{ link.text }}</a>
+                  </post-list-item>
+                }
+              </post-list>
+            }
+          </post-megadropdown>
+        </post-list-item>
+      }
+    </post-list>
+  </post-mainnavigation>
+</post-header>
+
+<header class="palette palette-alternate my-24">
+  <nav class="container py-12">
+    <p class="mb-12"><strong>Component Showcase Routes:</strong></p>
     <ul class="d-flex flex-wrap row-gap-4 column-gap-16 m-0 list-unstyled">
       <li *ngFor="let route of navigationRoutes">
         <a [routerLink]="route.path">{{ route.title }}</a>
@@ -8,7 +122,112 @@
   </nav>
 </header>
 
+<div class="container">
+  <post-breadcrumbs
+    home-url="/"
+    home-text="Home"
+    label="Breadcrumbs"
+    menu-label="More breadcrumb items"
+  >
+    <post-breadcrumb-item url="/section1">Section 1</post-breadcrumb-item>
+    <post-breadcrumb-item url="/section2">Section 2</post-breadcrumb-item>
+    <post-breadcrumb-item url="/section3">Section 3</post-breadcrumb-item>
+  </post-breadcrumbs>
+</div>
+
 <main class="container my-16">
   <h1>Hurray, it works!</h1>
   <router-outlet></router-outlet>
 </main>
+
+<post-back-to-top label="Back to top button"></post-back-to-top>
+
+<post-footer label="Footer label">
+  @for (grid of footerGrids; track grid.slot) {
+    <span [attr.slot]="grid.slot + '-title'">{{ grid.title }}</span>
+    <post-list [attr.slot]="grid.slot" [attr.id]="grid.slot">
+      <h3>{{ grid.title }}</h3>
+      @for (link of footerLinks.slice(0, grid.linkCount); track link.text) {
+        <post-list-item>
+          <a [href]="link.url">{{ link.text }}</a>
+        </post-list-item>
+      }
+    </post-list>
+  }
+
+  <post-list slot="socialmedia">
+    <h3>Follow us</h3>
+    @for (social of socialMediaLinks; track social.name) {
+      <post-list-item>
+        <a [href]="social.url" class="btn btn-primary btn-icon">
+          <post-icon aria-hidden="true" [name]="social.icon"></post-icon>
+          <span class="visually-hidden">{{ social.name }}</span>
+        </a>
+      </post-list-item>
+    }
+  </post-list>
+
+  <post-list slot="app">
+    <h3>Download app</h3>
+    <post-list-item>
+      <a
+        class="app-store-badge"
+        href="https://play.google.com/store/apps/details?id=com.nth.swisspost&amp;hl=de_CH&amp;pli=1"
+      >
+        <img
+          width="135"
+          height="40"
+          src="https://next.design-system.post.ch/assets/images/google-play-badge.svg"
+          alt="Google Play Store badge"
+        />
+        <span class="visually-hidden">Download the App on Google Play</span>
+      </a>
+    </post-list-item>
+    <post-list-item>
+      <a
+        class="app-store-badge"
+        href="https://apps.apple.com/ch/app/die-post/id378676700"
+      >
+        <img
+          width="120"
+          height="40"
+          src="https://next.design-system.post.ch/assets/images/apple-store-badge.svg"
+          alt="Apple App Store badge"
+        />
+        <span class="visually-hidden">Download the App on the Apple Store</span>
+      </a>
+    </post-list-item>
+  </post-list>
+
+  <post-list slot="businesssectors">
+    <h3>Die schweizerische Post AG</h3>
+    <post-list-item>
+      <a href="https://www.postauto.ch">PostAuto</a>
+    </post-list-item>
+    <post-list-item>
+      <a href="https://www.postfinance.ch">PostFinance</a>
+    </post-list-item>
+  </post-list>
+
+  <post-list slot="meta" title-hidden="">
+    <h3>Meta</h3>
+    @for (meta of metaLinks; track meta.text) {
+      <post-list-item>
+        <a [href]="meta.url">{{ meta.text }}</a>
+      </post-list-item>
+    }
+    <post-list-item>
+      <button
+        class="btn btn-link"
+        [style.minHeight]="0"
+        [style.border]="'0 none'"
+        [style.fontWeight]="'inherit'"
+      >
+        Cookie Settings
+      </button>
+    </post-list-item>
+  </post-list>
+
+  <span slot="copyright">© Copyright 2024 by Swiss Post Ltd.</span>
+  <span slot="copyright">All rights reserved.</span>
+</post-footer>

packages/components-angular/projects/consumer-app/src/app/app.component.ts

@@ -1,16 +1,150 @@
 import { Component, OnInit } from '@angular/core';
-import { Route, Router } from '@angular/router';
+import { Route, Router, RouterOutlet, RouterLink } from '@angular/router';
+import {
+  PostBackToTop,
+  PostBreadcrumbItem,
+  PostBreadcrumbs,
+  PostClosebutton,
+  PostFooter,
+  PostHeader,
+  PostIcon,
+  PostLanguageOption,
+  PostLanguageSwitch,
+  PostList,
+  PostListItem,
+  PostLogo,
+  PostMainnavigation,
+  PostMegadropdown,
+  PostMegadropdownTrigger,
+  PostTogglebutton,
+} from 'components';
+import { CommonModule } from '@angular/common';
 
 @Component({
-    selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.scss'],
-    standalone: false
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    RouterOutlet,
+    RouterLink,
+    PostBackToTop,
+    PostBreadcrumbItem,
+    PostBreadcrumbs,
+    PostClosebutton,
+    PostFooter,
+    PostHeader,
+    PostIcon,
+    PostLanguageOption,
+    PostLanguageSwitch,
+    PostList,
+    PostListItem,
+    PostLogo,
+    PostMainnavigation,
+    PostMegadropdown,
+    PostMegadropdownTrigger,
+    PostTogglebutton,
+  ]
 })
 export class AppComponent implements OnInit {
   title = 'consumer-app';
   public navigationRoutes: Route[] = [];
 
+  // Shared links for megadropdown sections (Header)
+  private megadropdownLinks = {
+    standard: [
+      { text: 'Letters Switzerland', url: '/sch' },
+      { text: 'Small items abroad', url: '/kl' },
+      { text: 'Goods abroad', url: '' },
+      { text: 'Express and courier', url: '' },
+    ],
+    packages: [
+      { text: 'Packages Switzerland', url: '/sch' },
+      { text: 'Small items abroad', url: '/kl' },
+      { text: 'Goods abroad', url: '' },
+      { text: 'Express and courier', url: '' },
+    ]
+  };
+
+  // Header megadropdown data
+  public megadropdowns = [
+    {
+      id: 'letters',
+      trigger: 'Letters',
+      title: 'Letters title',
+      overviewLink: '/letters',
+      sections: [
+        {
+          title: 'Send letters',
+          links: this.megadropdownLinks.standard
+        },
+        {
+          title: 'Step by step',
+          titleLink: '/step-by-step',
+          links: this.megadropdownLinks.packages
+        }
+      ]
+    },
+    {
+      id: 'packages',
+      trigger: 'Packages',
+      title: 'Packages title',
+      overviewLink: '/packages',
+      sections: [
+        {
+          title: 'Send packages',
+          links: this.megadropdownLinks.packages
+        },
+        {
+          title: 'Step by step',
+          titleLink: '/step-by-step',
+          links: this.megadropdownLinks.packages
+        }
+      ]
+    }
+  ];
+
+  // Reusable links array for footer grids
+  public footerLinks = [
+    { text: 'Link 1', url: '#test' },
+    { text: 'Link 2', url: '#test' },
+    { text: 'Link 3', url: '#test' },
+    { text: 'Link 4', url: '#test' },
+    { text: 'Link 5', url: '#test' },
+    { text: 'Link 6', url: '#test' },
+    { text: 'Link 7', url: '#test' },
+    { text: 'Link 8', url: '#test' },
+  ];
+
+  // Footer grid sections metadata
+  public footerGrids = [
+    { slot: 'grid-1', title: 'Title 1', linkCount: 6 },
+    { slot: 'grid-2', title: 'Title 2', linkCount: 8 },
+    { slot: 'grid-3', title: 'Title 3', linkCount: 8 },
+    { slot: 'grid-4', title: 'Title 4', linkCount: 5 },
+  ];
+
+  // Social media links (Footer)
+  public socialMediaLinks = [
+    { name: 'Facebook', url: '#facebook', icon: '8004' },
+    { name: 'Instagram', url: '#instagram', icon: '8007' },
+    { name: 'Youtube', url: '#youtube', icon: '8002' },
+    { name: 'Snapchat', url: '#snapchat', icon: '8017' },
+    { name: 'Twitter X', url: '#twitter-x', icon: '8000' },
+    { name: 'Linkedin', url: '#linkedin', icon: '8005' },
+    { name: 'Xing', url: '#xing', icon: '8001' },
+    { name: 'E-Mail', url: 'mailto:[email protected]', icon: 'letter' },
+  ];
+
+  // Meta links (Footer)
+  public metaLinks = [
+    { text: 'Accessibility', url: 'https://www.post.ch/en/pages/footer/accessibility-at-swiss-post' },
+    { text: 'General Terms and Conditions', url: 'https://www.post.ch/en/pages/footer/general-terms-and-conditions-gtc' },
+    { text: 'Data protection and disclaimer', url: 'https://www.post.ch/en/pages/footer/data-protection-and-disclaimer' },
+    { text: 'Publication details', url: 'https://www.post.ch/en/pages/footer/publication-details' },
+  ];
+
   constructor(private router: Router) {}
 
   ngOnInit(): void {