Add PrimeNG

package.json

@@ -21,6 +21,8 @@
     "@angular/platform-browser": "^17.3.0",
     "@angular/platform-browser-dynamic": "^17.3.0",
     "@angular/router": "^17.3.0",
+    "primeicons": "^7.0.0",
+    "primeng": "^17.17.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

src/app/app.component.html

@@ -1 +1,12 @@
+<p-toolbar>
+  <div class="p-toolbar-group-start">
+    <p-button icon="pi pi-bars" class="mr-2" />
+    <h1>121 Portal</h1>
+  </div>
+  <div class="p-toolbar-group-end">
+    <p-button icon="pi pi-search" class="mr-2" />
+    <p-button icon="pi pi-notification" class="mr-2" />
+    <p-button icon="pi pi-person" class="mr-2" />
+  </div>
+</p-toolbar>
 <router-outlet />

src/app/app.component.ts

@@ -1,10 +1,13 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
+import { ButtonModule } from 'primeng/button';
+import { ToolbarModule } from 'primeng/toolbar';
+
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, ButtonModule, ToolbarModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })

src/app/pages/homepage/homepage.component.html

@@ -1 +1,2 @@
 <p>homepage works!</p>
+<p-button label="Submit" icon="pi pi-check" iconPos="right" />

src/app/pages/homepage/homepage.component.ts

@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
+import { ButtonModule } from 'primeng/button';
 
 @Component({
   selector: 'app-homepage',
   standalone: true,
-  imports: [],
+  imports: [ButtonModule],
   templateUrl: './homepage.component.html',
   styleUrl: './homepage.component.scss',
 })

src/styles.scss

@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+@import "./theme/theme.scss";
+@import "primeng/resources/primeng.css";
+@import "primeicons/primeicons.css";

src/theme/_extensions.scss

@@ -0,0 +1 @@
+/* Customizations to the designer theme should be defined here */

src/theme/_variables.scss

@@ -0,0 +1,75 @@
+// Theme Specific Variables
+$primaryColor: #4f22d7;
+$primaryDarkColor: #7355ed;
+$primaryDarkerColor: #361a8c;
+$primaryTextColor: #ffffff;
+
+// $colors: (
+//     "blue": #2196F3,
+//     "green": #4caf50,
+//     "yellow": #FBC02D,
+//     "cyan": #00BCD4,
+//     "pink": #E91E63,
+//     "indigo": #3F51B5,
+//     "teal": #009688,
+//     "orange": #F57C00,
+//     "bluegray": #607D8B,
+//     "purple": #361A8C,
+//     "red": #FF4032,
+//     "primary": $primaryColor
+// );
+
+// Mandatory Designer Variables
+@import "./variables/general";
+@import "./variables/form";
+@import "./variables/button";
+@import "./variables/panel";
+@import "./variables/_data";
+@import "./variables/_overlay";
+@import "./variables/_message";
+@import "./variables/_menu";
+@import "./variables/_media";
+@import "./variables/_misc";
+
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol";
+  --surface-a: #ffffff;
+  --surface-b: #f8f9fa;
+  --surface-c: #e9ecef;
+  --surface-d: #dee2e6;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #495057;
+  --text-color-secondary: #6c757d;
+  --primary-color: #2196f3;
+  --primary-color-text: #ffffff;
+  --surface-0: #ffffff;
+  --surface-50: #fafafa;
+  --surface-100: #f5f5f5;
+  --surface-200: #eeeeee;
+  --surface-300: #e0e0e0;
+  --surface-400: #bdbdbd;
+  --surface-500: #9e9e9e;
+  --surface-600: #757575;
+  --surface-700: #616161;
+  --surface-800: #424242;
+  --surface-900: #212121;
+  --content-padding: #{$panelContentPadding};
+  --inline-spacing: #{$inlineSpacing};
+  --border-radius: #{$borderRadius};
+  --surface-ground: #f8f9fa;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: #dee2e6;
+  --surface-hover: #e9ecef;
+  --maskbg: #{$maskBg};
+  --highlight-bg: #{$highlightBg};
+  --highlight-text-color: #{$highlightTextColor};
+  --focus-ring: #{$focusShadow};
+  color-scheme: light;
+}

src/theme/theme-base/_colors.scss

@@ -0,0 +1,18 @@
+:root {
+  @if variable-exists(colors) {
+    @each $name, $color in $colors {
+        @for $i from 0 through 5 {
+            @if ($i == 0) {
+                --#{$name}-50:#{tint($color, (5 - $i) * 19%)};
+            }
+            @else {
+                --#{$name}-#{$i * 100}:#{tint($color, (5 - $i) * 19%)};
+            }
+        }
+
+        @for $i from 1 through 4 {
+            --#{$name}-#{($i + 5) * 100}:#{shade($color, $i * 15%)};
+        }
+    }
+  }
+}

src/theme/theme-base/_common.scss

@@ -0,0 +1,75 @@
+* {
+	box-sizing: border-box;
+}
+
+.p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: $fontSize;
+    font-weight: $fontWeight;
+}
+
+.p-component-overlay {
+    background-color: $maskBg;
+    transition-duration: $transitionDuration;
+}
+
+.p-disabled, .p-component:disabled {
+    opacity: $disabledOpacity;
+}
+
+.p-error {
+    color: $errorColor;
+}
+
+.p-text-secondary {
+    color: $textSecondaryColor;
+}
+
+.pi {
+    font-size: $primeIconFontSize;
+}
+
+.p-icon {
+    width: $primeIconFontSize;
+    height: $primeIconFontSize;
+}
+
+.p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: $fontSize;
+    border-radius: $borderRadius;
+
+    &:focus-visible {
+        @include focused();
+    }
+}
+
+.p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+.p-component-overlay {
+    @keyframes p-component-overlay-enter-animation {
+        from {
+            background-color: transparent;
+        }
+        to {
+            background-color: var(--maskbg);
+        }
+    }
+
+    @keyframes p-component-overlay-leave-animation {
+        from {
+            background-color: var(--maskbg);
+        }
+        to {
+            background-color: transparent;
+        }
+    }
+}

src/theme/theme-base/_components.scss

@@ -0,0 +1,110 @@
+@import "_mixins";
+@import "_colors";
+
+@import "./components/input/_editor";
+
+@layer primeng {
+  @import "_common";
+
+  //Input
+  @import "./components/input/_autocomplete";
+  @import "./components/input/_calendar";
+  @import "./components/input/_cascadeselect";
+  @import "./components/input/_checkbox";
+  @import "./components/input/_chips";
+  @import "./components/input/_colorpicker";
+  @import "./components/input/_dropdown";
+  @import "./components/input/_iconfield";
+  @import "./components/input/_inputgroup";
+  @import "./components/input/_inputicon";
+  @import "./components/input/_inputmask";
+  @import "./components/input/_inputnumber";
+  @import "./components/input/_inputotp";
+  @import "./components/input/_inputswitch";
+  @import "./components/input/_inputtext";
+  @import "./components/input/_listbox";
+  @import "./components/input/_multiselect";
+  @import "./components/input/_password";
+  @import "./components/input/_radiobutton";
+  @import "./components/input/_rating";
+  @import "./components/input/_selectbutton";
+  @import "./components/input/_slider";
+  @import "./components/input/_togglebutton";
+  @import "./components/input/_treeselect";
+
+  //Button
+  @import "./components/button/_button";
+  @import "./components/button/_speeddial";
+  @import "./components/button/_splitbutton";
+
+  //Data
+  @import "./components/data/_carousel";
+  @import "./components/data/_datatable";
+  @import "./components/data/_dataview";
+  @import "./components/data/_filter";
+  @import "./components/data/_orderlist";
+  @import "./components/data/_organizationchart";
+  @import "./components/data/_paginator";
+  @import "./components/data/_picklist";
+  @import "./components/data/_timeline";
+  @import "./components/data/_tree";
+  @import "./components/data/_treetable";
+  @import "./components/data/_virtualscroller";
+
+  //Panel
+  @import "./components/panel/_accordion";
+  @import "./components/panel/_card";
+  @import "./components/panel/_divider";
+  @import "./components/panel/_fieldset";
+  @import "./components/panel/_panel";
+  @import "./components/panel/_scrollpanel";
+  @import "./components/panel/_splitter";
+  @import "./components/panel/_tabview";
+  @import "./components/panel/_toolbar";
+  @import "./components/panel/_stepper";
+
+  //Overlay
+  @import "./components/overlay/_confirmpopup";
+  @import "./components/overlay/_dialog";
+  @import "./components/overlay/_overlaypanel";
+  @import "./components/overlay/_sidebar";
+  @import "./components/overlay/_tooltip";
+
+  //File
+  @import "./components/file/_fileupload";
+
+  //Menu
+  @import "./components/menu/_breadcrumb";
+  @import "./components/menu/_contextmenu";
+  @import "./components/menu/_dock";
+  @import "./components/menu/_megamenu";
+  @import "./components/menu/_menu";
+  @import "./components/menu/_menubar";
+  @import "./components/menu/_panelmenu";
+  @import "./components/menu/_slidemenu";
+  @import "./components/menu/_steps";
+  @import "./components/menu/_tabmenu";
+  @import "./components/menu/_tieredmenu";
+
+  //Messages
+  @import "./components/messages/_inlinemessage";
+  @import "./components/messages/_message";
+  @import "components/messages/toast";
+
+  //MultiMedia
+  @import "./components/multimedia/_galleria";
+  @import "./components/multimedia/_image";
+
+  //Misc
+  @import "./components/misc/_avatar";
+  @import "./components/misc/_badge";
+  @import "./components/misc/_blockui";
+  @import "./components/misc/_chip";
+  @import "./components/misc/_inplace";
+  @import "./components/misc/_metergroup";
+  @import "./components/misc/_progressbar";
+  @import "./components/misc/_scrolltop";
+  @import "./components/misc/_skeleton";
+  @import "./components/misc/_tag";
+  @import "./components/misc/_terminal";
+}