Add custom picker placeholder in headers (#11)

Author: jordivx

projects/ngx-appshell-example/src/app/screens/basic-shell/basic-shell.component.html

@@ -14,6 +14,9 @@
   (userLoggedIn)="onUserLoggedIn()"
   (userLoggedOut)="onUserLoggedOut()"
   (userPick)="onUserPick($event)">
+  <div id="extra-picker-ctn" ngProjectAs="extra-picker-header">
+    <appshell-icon [icon]="'counter_3'"></appshell-icon>
+  </div>
   <div id="extra-icons-ctn" ngProjectAs="extra-icons-header">
     <button class="extra-icon-btn" (click)="extraHeaderIconClick('1')"><appshell-icon [icon]="'counter_1'"></appshell-icon></button>
     <button class="extra-icon-btn" (click)="extraHeaderIconClick('2')"><appshell-icon [icon]="'counter_2'"></appshell-icon></button>

projects/ngx-appshell-example/src/app/screens/basic-shell/basic-shell.component.scss

@@ -3,6 +3,15 @@ appshell-layout {
     flex-direction: column;
     min-height: 100vh;
 
+    #extra-picker-ctn {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin: 0 1rem;
+        color: var(--header-link-color);
+        font-size: .875rem;
+    }
+
     #extra-icons-ctn {
         display: flex;
         flex-direction: row;

projects/ngx-appshell-example/src/app/screens/platform-shell/platform-shell.component.html

@@ -18,6 +18,9 @@
   (userLoggedOut)="logout()"
   (userProjectPick)="projectPickerChanged($event)"
   (userSecondaryPick)="secondaryPickerChanged($event)">
+  <div id="extra-picker-ctn" ngProjectAs="extra-picker-header">
+    <appshell-icon [icon]="'counter_3'"></appshell-icon>
+  </div>
   <div id="extra-icons-ctn" ngProjectAs="extra-icons-header">
     <button class="extra-icon-btn" (click)="extraHeaderIconClick('1')"><appshell-icon [icon]="'counter_1'"></appshell-icon></button>
     <button class="extra-icon-btn" (click)="extraHeaderIconClick('2')"><appshell-icon [icon]="'counter_2'"></appshell-icon></button>

projects/ngx-appshell-example/src/app/screens/platform-shell/platform-shell.component.scss

@@ -3,6 +3,15 @@ appshell-platform-layout {
     flex-direction: column;
     min-height: 100vh;
 
+    #extra-picker-ctn {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-right: 2rem;
+        color: var(--header-link-color);
+        font-size: .875rem;
+    }
+
     #extra-icons-ctn {
         display: flex;
         flex-direction: row;

projects/ngx-appshell/README.md

@@ -2,7 +2,7 @@
 
 A comprehensive Angular library providing pre-built UI components, directives, and schematics for building modern enterprise applications with Material Design.
 
-**Version:** 19.0.13
+**Version:** 19.0.14
 **Angular:** >=19.0.0
 
 ## Features

projects/ngx-appshell/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendevstack/ngx-appshell",
-  "version": "19.0.13",
+  "version": "19.0.14",
   "description": "A comprehensive Angular library providing pre-built UI components, directives, and schematics for building modern enterprise applications with Material Design.",
   "author": "OpenDevStack",
   "repository": {

projects/ngx-appshell/src/lib/components/appshell-header/appshell-header.component.html

@@ -20,6 +20,7 @@ <h1>{{applicationName()}}</h1>
             {{link.label}}
         </a>
     }
+    <ng-content select="extra-picker"></ng-content>
     @if (picker()) {
         <appshell-header-picker [picker]="picker()!" (pick)="userPick.emit($event)" />
     }

projects/ngx-appshell/src/lib/components/appshell-layout/appshell-layout.component.html

@@ -12,6 +12,7 @@
     (userLoggedIn)="userLoggedIn.emit()"
     (userLoggedOut)="userLoggedOut.emit()"
     (userPick)="userPick.emit($event)">
+    <ng-content select="extra-picker-header" ngProjectAs="extra-picker"></ng-content>
     <ng-content select="extra-icons-header" ngProjectAs="extra-icons"></ng-content>
 </appshell-header>
 

projects/ngx-appshell/src/lib/components/appshell-platform-header/appshell-platform-header.component.html

@@ -15,6 +15,7 @@
         <h1>{{ applicationName() }}</h1>
     </div>
 
+    <ng-content select="extra-picker"></ng-content>
 
     @if (projectPicker() && projectPicker()?.label) {
         <appshell-header-picker

projects/ngx-appshell/src/lib/components/appshell-platform-layout/appshell-platform-layout.component.html

@@ -17,6 +17,7 @@
     (platformPickerClick)="platformPickerClick.emit()"
     (userProjectPick)="userProjectPick.emit($event)"
     (userSecondaryPick)="userSecondaryPick.emit($event)">
+    <ng-content select="extra-picker-header" ngProjectAs="extra-picker"></ng-content>
     <ng-content select="extra-icons-header" ngProjectAs="extra-icons"></ng-content>
 </appshell-platform-header>