@retalia/sidebar-navigation 21.1.13 → 21.1.14

package/src/lib/sidebar/sub-item/sub-item.component.scss

@@ -0,0 +1,154 @@
+@import url('https://fonts.googleapis.com/css?family=Chakra+Petch:400,700&display=swap');
+@import "../../../styles/app.scss";
+
+.sub-item,
+.item-group {
+  position: relative;
+  list-style: none;
+  pointer-events: all;
+  text-transform: capitalize;
+  font-family: "Chakra Petch", Arial, sans-serif;
+  color: imagine-color(nav-inactive-text-color); // module text colour
+  transition: color 0.15s ease-in-out;
+  width: 258px;
+  text-indent: 40px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+    font-weight: 400;
+
+  @include responsive(mobileonly) {
+    width: 100%;
+    line-height: 45px;
+  }
+
+}
+
+.item-group > * {
+  text-indent: 30px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+}
+
+.sub-item {
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 200%;
+  letter-spacing: 0;
+
+  &:hover {
+    font-weight: 700;
+  }
+}
+
+.item-label {
+  display: block;
+  position: relative;
+  transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
+    transform 0.15s ease-in-out;
+}
+
+.item-icon {
+  width: 14px;
+  height: 14px;
+  margin-right: 8px;
+  vertical-align: middle;
+  object-fit: contain;
+}
+
+.item {
+  display: inline-block;
+  position: relative;
+  list-style: none;
+  text-indent: 12px;
+  align-items: center;
+  font-family: "Chakra Petch", Arial, sans-serif;
+  line-height: 35px;
+  border: 0px;
+  cursor: pointer;
+  font-weight: 400;
+  font-size: 18px;
+  color: imagine-color(nav-active-text-color); // module text colour
+  transition: color 0.15s ease-in-out;
+  padding: 6px 0px;
+  padding-right: 15px !important;
+  width: 245px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  @include responsive(mobileonly) {
+    width: 100%;
+    padding: 10px 0px !important;
+  }
+
+}
+
+.item:hover > .item-label,
+.sub-item:hover > .item-label,
+.item-group:hover > .item-label {
+  background: rgba(imagine-color(retalia-purple), 0.08); // softer branded hover state
+ // box-shadow: inset 2px 0 0 rgba(imagine-color(retalia-purple), 0.28);
+  transform: translateX(2px);
+}
+
+.sub-item-arrow {
+  position: absolute !important;
+  all: initial;
+  pointer-events: none; // Forces click on module row, not icon
+  height: 5px;
+  right: 10px;
+  padding: 12px 0px;
+  transition: 0.1s linear all;
+  user-select: none; // Prevent user from highlighting arrow
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+  transform: rotate(180deg);
+}
+
+.rotated {
+  transform: rotate(0deg);
+}
+
+.active > .item-label {
+  color: imagine-color(retalia-blue); // brighter text for the active parent row
+  background: rgba(imagine-color(nav-active-background), 0.8); // active row background only
+  font-weight: 600; // bolder text
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); // subtle text shadow
+  transform: scale(1.02); // slight zoom effect
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 6px;
+    background: imagine-color(retalia-blue); 
+    border-radius: 0 6px 6px 0;
+    pointer-events: none;
+  }
+}
+
+.selected-sub-item > .item-label {
+  padding-left: 14px;
+
+  &::before {
+    content: "\2022";
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 14px;
+    line-height: 1;
+  }
+}
+
+
+
+ 

package/src/lib/sidebar/sub-item/sub-item.component.ts

@@ -0,0 +1,61 @@
+import { Component, Input } from '@angular/core';
+import { ModuleItem, SidebarEntry } from '../../models/module';
+import { SubItemService } from '../../services/sub-item.service';
+
+@Component({
+    selector: 'sub-item',
+    templateUrl: './sub-item.component.html',
+    styleUrls: ['./sub-item.component.scss'],
+    standalone: false
+})
+export class SubItemComponent {
+  @Input() items: ModuleItem[] | SidebarEntry[];
+  activeItem = 'Yes';
+  constructor(private subItemService: SubItemService) {}
+
+  getClass = (item, items) => {
+    let className = `item ${item.name}`;
+    if (item.children.length > 0 && !items[0].authorizationId) {
+      className = `item-group ${item.name}`;
+    } else if (!item.authorizationId) {
+      className = `sub-item ${item.name}`;
+    }
+
+    if (
+      item.children.length > 0 &&
+      (item.active || this.checkVisibleSubItems(item))
+    ) {
+      className += ' active';
+    }
+
+    if (item.active && item.children.length === 0) {
+      className += ' selected-sub-item';
+    }
+
+    return className;
+  };
+
+  subItemClicked(e, item): void {
+    e.stopPropagation();
+    item.children.length > 0
+      ? this.toggleSubItems(item)
+      : this.onSubItemClick(item);
+  }
+
+  onSubItemClick(item: ModuleItem): void {
+    this.subItemService.subItemclicked(item);
+  }
+
+  toggleSubItems(item: ModuleItem): void {
+    item.children.map((si) => {
+      si.visible = !si.visible;
+      if (si.children && !si.visible) {
+        si.children.map((si2) => (si2.visible = false)); // ensure nested items close with parent
+      }
+    });
+  }
+
+  checkVisibleSubItems(item: ModuleItem | SidebarEntry): boolean {
+    return item && item.visible && item.children.some((se) => se.visible);
+  }
+}

package/src/lib/topbar/topbar.component.html

@@ -0,0 +1,29 @@
+<nav class="top-menu">
+
+  <div id="profile">
+
+    <div id="avatar" (click)="showDropdownOptions('profile')" data-testid="nav-profile">
+      <svg class="profile-icon" width="24" height="24" viewBox="0 0 32 32" fill="#213244"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M16 20C20.4183 20 24 16.4183 24 12C24 7.58172 20.4183 4 16 4C11.5817 4 8 7.58172 8 12C8 16.4183 11.5817 20 16 20Z"
+          stroke="white" stroke-width="2" stroke-miterlimit="10" />
+          <path
+            d="M3.87354 26.9988C5.10299 24.8708 6.8708 23.1037 8.99939 21.8752C11.128 20.6467 13.5424 20 16.0001 20C18.4577 20 20.8721 20.6468 23.0007 21.8754C25.1292 23.1039 26.897 24.871 28.1264 26.9991"
+            stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </div>
+        @if (showProfileDropdown) {
+          <div class="dropdown-items">
+            <div class="option-text" (click)="clickDetails($event)"  data-testid="nav-profile-settings">
+              <img class="dropdown-icon" src="assets/icons/topbar-settings.svg" />
+              Update details
+            </div>
+            <div class="option-text" (click)="logout()"  data-testid="nav-profile-logout">
+              <img class="dropdown-icon" src="assets/icons/topbar-logout.svg" />
+              Logout
+            </div>
+          </div>
+        }
+      </div>
+    </nav>

package/src/lib/topbar/topbar.component.scss

@@ -0,0 +1,176 @@
+@import "../../styles/app.scss";
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('../../assets/fonts/Poppins-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('../../assets/fonts/Poppins-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('../../assets/fonts/Poppins-Italic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Poppins';
+  src: url('../../assets/fonts/Poppins-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+#item-name {
+  font-family: "Poppins", sans-serif;
+  font-size: 24px;
+  font-weight: 700;
+  padding-left: 20px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-transform: capitalize;
+
+  @include responsive(mobileonly) {
+    padding-left: 70px;
+  }
+}
+
+.top-menu {
+  z-index: 20;
+  margin: 0;
+  top: 0;
+  position: fixed;
+  display: flex;
+  align-items: center;
+  height: 67px;
+  width: 100vw;
+  overflow: hidden;
+  background-color: none;
+
+  @include responsive(mobileonly) {
+    min-height: 60px;
+    height: 60px;
+  }
+
+  .dropdown-items {
+    position: fixed;
+    list-style-type: none;
+    white-space: nowrap;
+    padding: 0;
+    min-width: 120px;
+    border-radius: 10px;
+    border: 1px solid #d8dde6;
+    background-color: white;
+    box-shadow: 0 2px 3px 0 imagine-color(shadow-gray);
+    text-align-last: center;
+
+    @include responsive(mobileonly) {
+      top: 110px;
+    }
+
+    .option-text {
+      cursor: pointer;
+      font-family: "Poppins", sans-serif;
+      font-size: 12px;
+      text-align: left;
+      margin: 0;
+      padding: 10px 0px;
+      color: black;
+
+      &:hover {
+        background-color: #f5f5f5;
+        border-radius: 10px;
+      }
+    }
+  }
+
+  .dropdown-icon {
+    pointer-events: none; /* Forces click on item row, not icon */
+    float: left;
+    margin-top: 2px;
+    padding: 0px 8px;
+    height: 10px;
+  }
+
+  #profile {
+    position: fixed;
+    right: 20px;
+    display: flex;
+    align-items: center;
+
+    @include responsive(mobileonly) {
+      height: 60px;
+    }
+
+    img {
+      margin-left: 0px;
+    }
+
+    #avatar {
+      cursor: pointer;
+      position: relative;
+      height: 30px;
+      width: 30px;
+      transition: 0.2s linear;
+      border-radius: 50%;
+      padding: 5px;
+      background-color: #213244;
+
+      &:hover {
+        background-color: imagine-color(nav-active-text-color);
+      }
+
+      .profile-icon {
+        margin: 0;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        -ms-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
+        pointer-events: none;
+      }
+    }
+
+    #info {
+      cursor: pointer;
+      height: 30px;
+      transition: 0.2s linear all;
+
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+
+    .admin-group {
+      right: 110px !important;
+    }
+
+    .info-group {
+      right: 10px !important;
+    }
+
+    .dropdown-items {
+      position: fixed;
+      top: 70px;
+      right: 30px;
+
+      @include responsive(mobileonly) {
+        top: 70px;
+      }
+    }
+  }
+}
+
+@media print {
+  .top-menu {
+    display: none;
+  }
+}

package/src/lib/topbar/topbar.component.ts

@@ -0,0 +1,76 @@
+import { Component, HostListener, Input } from '@angular/core';
+import { Environment } from '../models/environment';
+import { AuthService } from '../services/auth.service';
+import { ModuleService } from '../services/module.service';
+
+@Component({
+    selector: 'topbar',
+    templateUrl: './topbar.component.html',
+    styleUrls: ['./topbar.component.scss'],
+    standalone: false
+})
+export class TopbarComponent {
+  @Input() environment: Environment;
+  currentRouteName: string;
+  isTenantAdmin = false;
+  showProfileDropdown = false;
+
+  constructor(
+    private moduleService: ModuleService,
+    private authService: AuthService
+  ) {
+    this.moduleService.storedModuleFlagsChange.subscribe((value) => {
+      value ? (this.isTenantAdmin = value.includes('TenantAdmin')) : '';
+    });
+    this.moduleService.currentRouteName.subscribe((value) => {
+      this.currentRouteName = value;
+    });
+  }
+
+  @HostListener('document:click', ['$event'])
+  clickout(event: Event): void {
+    this.closeDropdown(event);
+  }
+
+  public showDropdownOptions(dropdownName: string): void {
+    if (dropdownName === 'profile') {
+      this.showProfileDropdown = true;
+    }
+  }
+
+  public closeDropdown(event: Event): void {
+    if (!(event.target instanceof Element)) {
+      this.showProfileDropdown = false;
+      return;
+    }
+
+    const element = event.composedPath()[0];
+    if (!(element instanceof Element)) {
+      this.showProfileDropdown = false;
+      return;
+    }
+
+    if (event.target.id !== 'avatar' && element.id !== 'avatar') {
+      this.showProfileDropdown = false;
+    }
+  }
+
+  public clickDetails(e: Event): void {
+    if (this.environment.portalUrl.slice(-1) !== `/`) {
+      this.environment.portalUrl += `/`;
+    }
+
+    const detailsUrl = this.environment.portalUrl + 'profile/general';
+    window.location.href = detailsUrl;
+  }
+
+  public logout(): void {
+    if (this.environment.portalUrl.slice(-1) !== `/`) {
+      this.environment.portalUrl += `/`;
+    }
+
+    this.authService.logout();
+    const loginUrl = this.environment.portalUrl + 'auth/login';
+    window.location.href = loginUrl;
+  }
+}

package/src/public-api.ts

@@ -0,0 +1,14 @@
+/*
+ * Public API Surface of sidebar-navigation
+ */
+
+export * from './lib/navigation-lib.service';
+export * from './lib/navigation-lib.component';
+export * from './lib/navigation-lib.module';
+
+export * from './lib/models/module';
+
+export * from './lib/services/auth.service';
+export * from './lib/services/http.service';
+export * from './lib/services/module.service';
+export * from './lib/services/sub-item.service';

package/src/styles/app.scss

@@ -0,0 +1,53 @@
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;1,300;1,400;1,600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;700&display=swap');
+@mixin responsive($point) {
+    @if $point == desktop {
+      @media (min-width: 70em) {
+        @content;
+      }
+    } @else if $point == laptop {
+      @media (min-width: 64em) {
+        @content;
+      }
+    } @else if $point == tablet {
+      @media (min-width: 50em) {
+        @content;
+      }
+    } @else if $point == phablet {
+      @media (min-width: 37.5em) {
+        @content;
+      }
+    } @else if $point == mobileonly {
+      @media (max-width: 37.5em) {
+        @content;
+      }
+    }
+  }
+  
+  @mixin rotate($degrees) {
+    -webkit-transform: rotate($degrees);
+    -moz-transform: rotate($degrees);
+    -ms-transform: rotate($degrees);
+    -o-transform: rotate($degrees);
+    transform: rotate($degrees);
+  }
+  
+  $imagine-colors: (
+  nav-active-background: #FBF9FF,
+  nav-inactive-background: #ffffff,
+  nav-active-text-color: #545454,
+  nav-inactive-text-color: #A5A5A5,
+  nav-hover: #17293a,
+  sidebar-border: #d4d6e4,
+  bg-color: #fafbfc,
+  retalia-blue: #B27BFB,
+  retalia-purple: #5B02C7
+);
+
+@function imagine-color($key) {
+  @return map-get($imagine-colors, $key);
+}
+
+.imagine-body {
+  background-color: imagine-color(bg-color);
+}

package/src/test.ts

@@ -0,0 +1,15 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);

package/tsconfig.lib.json

@@ -0,0 +1,21 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableResourceInlining": true,
+    "fullTemplateTypeCheck": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}
+

package/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}