@retalia/sidebar-navigation 21.1.7 → 21.1.9

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

@@ -1,153 +0,0 @@
-@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;
-  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

@@ -1,61 +0,0 @@
-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

@@ -1,29 +0,0 @@
-<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

@@ -1,176 +0,0 @@
-@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

@@ -1,76 +0,0 @@
-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

@@ -1,14 +0,0 @@
-/*
- * 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

@@ -1,53 +0,0 @@
-@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

@@ -1,15 +0,0 @@
-// 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

@@ -1,21 +0,0 @@
-/* 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

@@ -1,11 +0,0 @@
-/* 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

@@ -1,17 +0,0 @@
-/* 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"
-  ]
-}