Fixes & New Styles for example app

README.md

@@ -231,7 +231,7 @@ The datepicker supports 40+ locales out of the box. Set the `locale` attribute t
 
 #### Supported Locales
 
-`en`, `fr`, `fr-ch`, `ja`, `fi`, `es`, `hu`, `sv`, `nl`, `ru`, `uk`, `uz`, `no`, `tr`, `pt-br`, `de`, `de-ch`, `it`, `it-ch`, `pl`, `my`, `sk`, `sl`, `zh-cn`, `he`, `ro`, `ca`, `id`, `en-au`, `en-gb`, `am-et`, `cs`, `el`, `kk`, `th`, `ko-kr`, `da`, `lt`, `vi`, `bn`, `bg`, `hr`, `ar`, `is`, `tw`, `lv`, `et`
+`en`, `fr`, `fr-ch`, `ja`, `fi`, `es`, `hu`, `sv`, `nl`, `ru`, `uk`, `uz`, `no`, `tr`, `pt-br`, `pt`, `de`, `de-ch`, `it`, `it-ch`, `pl`, `my`, `ms`, `sk`, `sl`, `zh-cn`, `he`, `ro`, `ca`, `id`, `en-au`, `en-gb`, `am-et`, `cs`, `el`, `kk`, `th`, `ko-kr`, `da`, `lt`, `vi`, `bn`, `bg`, `hr`, `ar`, `is`, `tw`, `lv`, `et`
 
 > [!TIP]
 > To add a new locale, submit a PR updating the [locale service](https://github.com/gramli/angular-mydatepicker/blob/master/projects/angular-mydatepicker/src/lib/services/angular-mydatepicker.locale.service.ts).
@@ -422,4 +422,4 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 
 ## Credits
 
-Originally created by [kekeh](https://github.com/kekeh) and [nodro7](https://github.com/nodro7) and. Currently maintained by [Gramli](https://github.com/Gramli).
+Originally created by [kekeh](https://github.com/kekeh) and [nodro7](https://github.com/nodro7). Currently maintained by [Gramli](https://github.com/Gramli).

example/app/app.component.css

@@ -1,56 +1,202 @@
-.pagecontent {
-  margin: 20px 200px;
+:root {
+  --primary-color: #3b82f6;
+  --primary-dark: #2563eb;
+  --primary-light: #60a5fa;
+  --background: #f8fafc;
+  --surface: #ffffff;
+  --text-primary: #1e293b;
+  --text-secondary: #64748b;
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --spacing-xs: 8px;
+  --spacing-sm: 16px;
+  --spacing-md: 24px;
+  --spacing-lg: 32px;
+  --spacing-xl: 48px;
+  --transition: all 0.2s ease;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+.navbar {
+  background: #2b82b1;
+  padding: 0 var(--spacing-lg);
+  height: 60px;
+  display: flex;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.navbar-brand {
+  color: #ffffff;
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: -0.5px;
+  padding-left: 1rem;
 }
 
-.maintitle {
-  background-color: #EEE;
-  height: 180px;
-  border-bottom: 1px solid #CCC;
-  background: linear-gradient(to right, #2c539e 0%,rgba(44,83,158,1) 100%);
-  text-align: center;
+.navbar-buttons {
+  display: flex;
+  gap: 12px;
+  align-items: left;
+}
+
+.navbar-icons {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  padding-right: 1rem;
+}
+
+.icon-link {
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  border-radius: var(--radius-sm);
+  transition: var(--transition);
+  text-decoration: none;
 }
 
-.maintitle div {
-  display: inline-block;
-  color: #FFF;
-  font-size: 46px;
-  font-weight: bold;
-  line-height: 180px;
+.icon-link:hover {
+  background: rgba(255, 255, 255, 0.15);
+  transform: translateY(-2px);
+}
+
+.icon-link svg {
+  width: 24px;
+  height: 24px;
+}
+
+.nav-btn {
+  background: transparent;
+  color: #ffffff;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  padding: 8px 20px;
+  border-radius: 0.15rem;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition);
+}
+
+.nav-btn:hover {
+  background: #6d8f72;
+  border-color: rgba(255, 255, 255, 0.4);
+}
+
+.nav-btn.active {
+  background: #ffffff;
+  color: #000000;
+  border-color: transparent;
+}
+
+.pagecontent {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: var(--spacing-lg) var(--spacing-md);
+  margin-top: 2rem;
 }
 
 .maintext {
-  margin-bottom: 20px;
+  margin-bottom: var(--spacing-md);
+  color: var(--text-secondary);
+  line-height: 1.6;
+  font-size: 16px;
 }
 
 .normalmode {
   margin-bottom: 280px;
 }
 
 .inlinemode {
-  margin-bottom: 20px;
+  margin-bottom: var(--spacing-md);
 }
 
-.flexcontainer {
-  display: flex;
+.content-container {
+  margin-bottom: var(--spacing-xl);
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.flexitem {
-  width: 400px;
+.content-panel {
+  background: var(--surface);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-xl);
+  box-shadow: var(--shadow-md);
+  border: 2px solid var(--border-color);
 }
 
-@media screen and (max-width: 1200px) {
-  .pagecontent {
-    margin: 20px 10px;
-  }
+.panel-title {
+  font-size: clamp(20px, 2.5vw, 26px);
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 var(--spacing-xs) 0;
+  letter-spacing: -0.02em;
+  padding-bottom: 1rem;
 }
 
-@media screen and (max-width: 1000px) {
-  .flexcontainer {
-    display: block;
-  }
+.panel-subtitle {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin: 0 0 var(--spacing-lg) 0;
+  line-height: 1.5;
+}
 
-  .flexitem {
-    width: 50%;
-    margin: 0 auto;
+@media screen and (max-width: 768px) {
+  .navbar {
+    padding: 0 var(--spacing-sm);
+    height: auto;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    padding-top: var(--spacing-sm);
+    padding-bottom: var(--spacing-sm);
+  }
+
+  .navbar-buttons {
+    width: 100%;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .nav-btn {
+    flex: 1;
+    min-width: 100px;
+  }
+
+  .navbar-icons {
+    order: -1;
   }
+}
+
+.panel-title {
+  font-size: clamp(20px, 2.5vw, 26px);
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 var(--spacing-xs) 0;
+  letter-spacing: -0.02em;
+}
+
+.panel-subtitle {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin: 0;
+  line-height: 1.5;
 }

example/app/app.component.html

@@ -1,35 +1,55 @@
-<div class="maintitle">
-  <div>angular-mydatepicker</div>
-</div>
-<div class="pagecontent">
-  <div>
-    <h4>ngModel example</h4>
-    <div class="normalmode">
-      <date-picker-ngmodel>loading...</date-picker-ngmodel>
-    </div>
+<nav class="navbar">
+  <div class="navbar-brand">angular-mydatepicker</div>
+  <div class="navbar-buttons">
+    <button class="nav-btn" [class.active]="activeTab === 'ngmodel'" type="button" (click)="setActiveTab('ngmodel')">ngModel</button>
+    <button class="nav-btn" [class.active]="activeTab === 'reactive'" type="button"  (click)="setActiveTab('reactive')">Reactive Forms</button>
+    <button class="nav-btn" [class.active]="activeTab === 'divhost'" type="button" (click)="setActiveTab('divhost')">Div Host</button>
+    <button class="nav-btn" [class.active]="activeTab === 'inline'" type="button" (click)="setActiveTab('inline')">Inline</button>
   </div>
-  <div class="flexcontainer">
-    <div class="flexitem">
-        <h4>Reactive forms example</h4>
-        <div class="normalmode">
-          <date-picker-reactive-forms>loading...</date-picker-reactive-forms>
-        </div>
-    </div>
-
-    <div class="flexitem">
-        <h4>Div host element example</h4>
-        <div class="normalmode">
-            <date-picker-div-host-element>loading...</date-picker-div-host-element>
-        </div>
-    </div>
-
-    <div class="flexitem">
-        <h4>Inline example</h4>
-        <div class="normalmode">
-          <date-picker-inline>loading...</date-picker-inline>
-        </div>
-    </div>
+  <div class="navbar-icons">
+    <a href="https://github.com/Gramli/angular-mydatepicker" target="_blank" rel="noopener noreferrer" class="icon-link" title="View on GitHub">
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
+      </svg>
+    </a>
+    <a href="https://www.npmjs.com/package/gramli-angular-mydatepicker" target="_blank" rel="noopener noreferrer" class="icon-link" title="View on npm">
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0v1.336H8.001V8.667h5.334v5.332h-2.669v-.001zm12.001 0h-1.33v-4h-1.336v4h-1.335v-4h-1.33v4h-2.671V8.667h8.002v5.331zM10.665 10H12v2.667h-1.335V10z"/>
+      </svg>
+    </a>
+  </div>
+</nav>
 
+<div class="pagecontent">
+  <div class="content-container">
+    @if (activeTab === 'ngmodel') {
+      <div class="content-panel">
+        <h3 class="panel-title">ngModel Two-Way Binding</h3>
+        <p class="panel-subtitle">Complete feature showcase with extensive configuration options</p>
+        <date-picker-ngmodel>loading...</date-picker-ngmodel>
+      </div>
+    }
+    @if (activeTab === 'reactive') {
+      <div class="content-panel">
+        <h3 class="panel-title">Reactive Forms Integration</h3>
+        <p class="panel-subtitle">FormControl and FormGroup validation with reactive forms</p>
+        <date-picker-reactive-forms>loading...</date-picker-reactive-forms>
+      </div>
+    }
+    @if (activeTab === 'divhost') {
+      <div class="content-panel">
+        <h3 class="panel-title">Div Host Element</h3>
+        <p class="panel-subtitle">Custom host element instead of standard input field</p>
+        <date-picker-div-host-element>loading...</date-picker-div-host-element>
+      </div>
+    }
+    @if (activeTab === 'inline') {
+      <div class="content-panel">
+        <h3 class="panel-title">Inline Calendar</h3>
+        <p class="panel-subtitle">Always-visible calendar without input field</p>
+        <date-picker-inline>loading...</date-picker-inline>
+      </div>
+    }
   </div>
 </div>
 

example/app/app.component.ts

@@ -7,7 +7,13 @@ import { Component } from '@angular/core';
     standalone: false
 })
 export class AppComponent {
+  activeTab: string = 'ngmodel';
+
   constructor() {
     console.log('constructor: AppComponent()');
   }
+
+  setActiveTab(tab: string): void {
+    this.activeTab = tab;
+  }
 }