@beacon-interactive-systems-llc/beacon-platform-ui 0.0.21 → 17.0.0

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/platform-ui'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/platform-ui",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": ["./styles/*.*","./assets/**/*.*"]
+}

package/package.json

@@ -1,38 +1,24 @@
-{
-  "name": "@beacon-interactive-systems-llc/beacon-platform-ui",
-  "version": "0.0.21",
-  "peerDependencies": {
-    "@angular/common": "^17.3.0",
-    "@angular/core": "^17.3.0",
-    "@angular/forms": "^17.3.0",
-    "@angular/material": "^17.3.10",
-    "bootstrap": "5.3.3",
-    "ngx-autosize": "2.0.4",
-    "ngx-bootstrap": "12.0.0",
-    "ngx-infinite-scroll": "17.0.1",
-    "@ng-select/ng-select": "12.0.7",
-    "@ngx-pwa/local-storage": "17.0.0",
-    "angular-mentions": "1.5.0",
-    "ngx-mask": "17.1.8",
-    "ngx-quill": "25.3.2",
-    "ngx-toastr": "19.0.0",
-    "quill": "2.0.0"
-  },
-  "dependencies": {
-    "tslib": "2.3.0"
-  },
-  "module": "fesm2022/beacon-interactive-systems-llc-beacon-platform-ui.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/beacon-interactive-systems-llc-beacon-platform-ui.mjs",
-      "esm": "./esm2022/beacon-interactive-systems-llc-beacon-platform-ui.mjs",
-      "default": "./fesm2022/beacon-interactive-systems-llc-beacon-platform-ui.mjs"
-    }
-  },
-  "sideEffects": false
-}
+{
+  "name": "@beacon-interactive-systems-llc/beacon-platform-ui",
+  "version": "17.0.0",
+  "peerDependencies": {
+    "@angular/common": "^17.3.0",
+    "@angular/core": "^17.3.0",
+    "@angular/forms": "^17.3.0",
+    "@angular/material": "^17.3.10",
+    "bootstrap": "5.3.3",
+    "ngx-autosize": "2.0.4",
+    "ngx-bootstrap": "12.0.0",
+    "ngx-infinite-scroll": "17.0.1",
+    "@ng-select/ng-select": "12.0.7",
+    "@ngx-pwa/local-storage": "17.0.0",
+    "angular-mentions": "1.5.0",
+    "ngx-mask": "17.1.8",
+    "ngx-quill": "25.3.2",
+    "ngx-toastr": "19.0.0",
+    "quill": "2.0.0"
+  },
+  "dependencies": {
+    "tslib": "2.3.0"
+  }
+}

package/src/lib/device-detector.service.ts

@@ -0,0 +1,46 @@
+import { Injectable } from '@angular/core';
+
+const CUTOFFS = {
+  mobile: 767,
+  tablet: 1200
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DeviceDetectorService {
+  get isMobile() { return window.screen.width <= CUTOFFS.mobile }
+
+  get isTablet() {
+    return window.screen.width >= CUTOFFS.mobile && window.screen.width <= CUTOFFS.tablet;
+   }
+
+  // assume desktop is anything > 1200
+  get isDesktop() { return window.screen.width > CUTOFFS.tablet }
+
+
+  getBrowser() {
+    if (!!navigator.userAgent.match(/Chrome/) && !navigator.userAgent.match(/Edg/)) { return "Chrome"; }
+    else if (!!navigator.userAgent.match(/Opera/) || !!navigator.userAgent.match(/OPR/)) { return "Opera"; }
+    else if (!!navigator.userAgent.match(/Firefox/) && !navigator.userAgent.match(/Safari/)) { return "Firefox"; }
+    else if (!!navigator.userAgent.match(/Safari/) && !navigator.userAgent.match(/Edg/)) { return "Safari"; }
+    else if (!!navigator.userAgent.match(/MSIE/)) { return "IE"; }
+    else if (!!navigator.userAgent.match(/Edg/)) { return "Microsoft Edge"; }
+    else { return "Unknown" }
+  }
+
+  getOperatingSystem() {
+    if (!!navigator.userAgent.match(/Win/)) { return "Windows OS"; }
+    else if (!!navigator.userAgent.match(/Mac/)) { return "MacOS"; }
+    else if (!!navigator.userAgent.match(/X11/)) { return "UNIX OS"; }
+    else if (!!navigator.userAgent.match(/Linux/)) { return "Linux OS"; }
+    else { return "Unknown"; }
+  }
+
+  getDeviceType() {
+    if (this.isDesktop) { return "Desktop"; }
+    else if (this.isMobile) { return "Mobile"; }
+    else if (this.isTablet) { return "Tablet"; }
+    else { return "Unknown"; }
+  }
+}

package/src/lib/network-connection.service.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+declare const window: any;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NetworkConnectionService {
+  constructor() {
+    window.addEventListener('online', () => this.updateOnlineStatus());
+    window.addEventListener('offline', () => this.updateOnlineStatus());
+  }
+
+  private networkConnectionChange = new Subject<boolean>();
+  public connectionChanged$ = this.networkConnectionChange.asObservable();
+  public lastOnlineAt: Date = new Date();
+
+  get isOnline() {
+    return !!window.navigator.onLine;
+  }
+
+  get isOffline() {
+    return !this.isOnline;
+  }
+
+  private updateOnlineStatus() {
+    this.networkConnectionChange.next(window.navigator.onLine);
+    if (window.navigator.offLine) this.lastOnlineAt = new Date();
+  }
+}

package/src/lib/platform-ui.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlatformUiComponent } from './platform-ui.component';
+
+describe('PlatformUiComponent', () => {
+  let component: PlatformUiComponent;
+  let fixture: ComponentFixture<PlatformUiComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PlatformUiComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PlatformUiComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/platform-ui.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-platform-ui',
+  template: `
+    <p>
+      platform-ui works!
+    </p>
+  `,
+  styles: [
+  ]
+})
+export class PlatformUiComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/platform-ui.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { PlatformUiComponent } from './platform-ui.component';
+
+
+
+@NgModule({
+  declarations: [
+    PlatformUiComponent
+  ],
+  imports: [
+  ],
+  exports: [
+    PlatformUiComponent
+  ]
+})
+export class PlatformUiModule { }

package/src/lib/platform-ui.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PlatformUiService } from './platform-ui.service';
+
+describe('PlatformUiService', () => {
+  let service: PlatformUiService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(PlatformUiService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/platform-ui.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PlatformUiService {
+
+  constructor() { }
+}

package/{public-api.d.ts → src/public-api.ts}

@@ -1,5 +1,7 @@
-export * from './lib/network-connection.service';
-export * from './lib/device-detector.service';
-export * from './lib/platform-ui.service';
-export * from './lib/platform-ui.component';
-export * from './lib/platform-ui.module';
+export * from './lib/network-connection.service';
+export * from './lib/device-detector.service';
+
+// defaults
+export * from './lib/platform-ui.service';
+export * from './lib/platform-ui.component';
+export * from './lib/platform-ui.module';

package/src/test.ts

@@ -0,0 +1,27 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().forEach(context);

package/styles/_bootstrap-tabs.scss

@@ -1,4 +1,6 @@
-$platform_tab_contrasts: (
+// May not be in use - Material Tabs are preferred
+
+$platform_bootstraptab_contrasts: (
   light: (
     tabBorder: $beacon-gray-200,
     tabActive: $beacon-orange-400
@@ -27,13 +29,13 @@ tabset.tab-container {
         width: 160px;
 
         &:not(.active){
-          @include themify($platform_tab_contrasts) {
+          @include themify($platform_bootstraptab_contrasts) {
             background: apply('tabBorder');
           }
         }
 
         &.active {
-          @include themify($platform_tab_contrasts) {
+          @include themify($platform_bootstraptab_contrasts) {
             border-bottom: 1px solid apply('tabBorder');
             border-top: 1px solid apply('tabActive');
           }
@@ -45,7 +47,7 @@ tabset.tab-container {
   }
 
   .tab-content {
-    @include themify($platform_tab_contrasts) {
+    @include themify($platform_bootstraptab_contrasts) {
       border-bottom: 1px solid apply('tabBorder');
       border-left: 1px solid apply('tabBorder');
       border-right: 1px solid apply('tabBorder');

package/styles/_buttons.scss

@@ -194,18 +194,18 @@ button.platform-btn {
     @include themify($platform_button_contrasts) {
       background: apply('buttonAmbient');
       color: apply('buttonAmbientAccent');
-      border: 1px solid ('buttonAmbientAccent');
+      border: 1px solid apply('buttonAmbientAccent');
 
       &:hover {
         background: apply('buttonAmbient');
         color: apply('buttonAmbientAccent');
-        border: 1px solid ('buttonAmbientAccent');
+        border: 1px solid apply('buttonAmbientAccent');
       }
 
       &:focus {
         background: apply('buttonAmbient');
         color: apply('buttonAmbientAccent');
-        border: 1px solid ('buttonAmbientAccent');
+        border: 1px solid apply('buttonAmbientAccent');
       }
     }
 
@@ -284,31 +284,40 @@ button.platform-btn {
   }
 }
 
-.btn-group.platform-toggle-btn-group {
+.btn-group.icon-toggle-btn-group {
   @include themify($platform_button_contrasts) {
-    background: apply('buttonAmbient');
-    color: apply('buttonAmbientAccent');
+    background-color: apply('buttonAmbient') !important;
   }
-  border-radius: 10px;
+  border-radius: 20px;
 
-  .toggle-btn {
+  .icon-toggle-btn {
     @include themify($platform_button_contrasts) {
-      background: apply('buttonAmbient');
+      background-color: apply('buttonAmbient') !important;
       color: apply('buttonAmbientAccent');
     }
     border: none;
-    border-radius: 10px;
-    height: 20px;
+    border-radius: 20px !important;
+    height: 30px;
     line-height: 10px;
-    width: 55px;
+    width: auto;
+    font-size: 0.8rem !important;
 
     &--selected {
       @include themify($platform_button_contrasts) {
-        background: apply('buttonBlueAccent');
-        color: apply('buttonBlue');
-        border: 2px solid apply('buttonBlue')
+        background-color: apply('buttonGreen') !important;
+        color: apply('buttonGreenAccent');
+        border: 1px solid apply('buttonGreenAccent');
       }
       font-weight: bold;
+      z-index: 100;
+    }
+
+    mat-icon {
+      position: relative;
+      top: -3px;
+      width: 24px;
+      height: 1.7rem;
+      font-size: 24px
     }
   }
 }

package/styles/_calendar.scss

@@ -64,11 +64,10 @@ $platform_calendar_contrasts: (
   // Potential other things that need to incorporate the color style go here
 }
 
-@mixin event-tile-styles($color, $text-color: $platform-graytone-500) {
+@mixin event-tile-styles($color, $text-color) {
   border: 2px solid $color;
 
   &.selected {
-    @include card-shadow;
     background-color: $color;
     color: $text-color;
   }
@@ -91,6 +90,7 @@ $platform_calendar_contrasts: (
     margin-bottom: 0.25rem;
 
     .title {
+      @include font-color--default;
       font-weight: bold;
     }
 
@@ -151,6 +151,7 @@ $platform_calendar_contrasts: (
         }
 
         .event-item {
+          @include font-color--default;
           @include font-weight--bold;
           @include font-size--sm;
           display: flex;

package/styles/_checkboxes.scss

@@ -1,7 +1,21 @@
-.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
-.mat-checkbox-checked.mat-accent .mat-checkbox-background {
+.mat-mdc-list-option .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,
+.mat-mdc-list-option .mdc-checkbox:active:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,
+.mat-mdc-list-option .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background {
   @include themify($platform_contrasts) {
+    border-color: apply('checkboxColor');
     background: apply('checkboxColor');
+
+    .mat-ripple-element {
+      background: apply('checkboxColor');
+    }
+  }
+}
+
+.mat-mdc-list-option
+.mdc-checkbox
+.mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background {
+  @include themify($platform_contrasts) {
+    border-color: apply('checkboxColor');
   }
 }
 

package/styles/_forms.scss

@@ -1,10 +1,12 @@
+@import "theming";
+
 $platform_form_contrasts: (
   light: (
     formText: $beacon-gray-600,
     formInputBackground: $beacon-white,
     formInputBottomBorder: $beacon-dark-blue-400,
     formInputSurroundBorder: $beacon-gray-400,
-    formControlFocus: $beacon-blue-200,
+    formControlFocus: $beacon-dark-blue-200,
     formInvalid: $beacon-orange-500,
     formInputDisabled: $beacon-gray-200,
     formSelectOpened: $beacon-blue-100,
@@ -15,7 +17,7 @@ $platform_form_contrasts: (
     formInputBackground: $beacon-gray-600,
     formInputBottomBorder: $beacon-dark-blue-300,
     formInputSurroundBorder: $beacon-gray-400,
-    formControlFocus: $beacon-blue-300,
+    formControlFocus: $beacon-dark-blue-400,
     formInvalid: $beacon-orange-600,
     formInputDisabled: $beacon-gray-500,
     formSelectOpened: $beacon-blue-100,
@@ -26,7 +28,7 @@ $platform_form_contrasts: (
     formInputBackground: $beacon-gray-700,
     formInputBottomBorder: $highcontrast-bright-yellow-200,
     formInputSurroundBorder: $beacon-white,
-    formControlFocus: $highcontrast-bright-blue-100,
+    formControlFocus: $highcontrast-bright-blue-200,
     formInvalid: $highcontrast-bright-orange-300,
     formInputDisabled: $beacon-gray-600,
     formSelectOpened: $highcontrast-bright-blue-100,

package/styles/_layout.scss

@@ -5,7 +5,6 @@ $platform_layout_contrasts: (
     containerBorder: $beacon-dark-blue-300,
     containerShadow: inset 3px 0px 5px 0px $beacon-dark-blue-300,
     headerBackground: $beacon-dark-blue-400,
-    headerShadow: 0px 3px 6px $beacon-black,
     headerText: $beacon-white,
     headerModule: $beacon-dark-blue-500,
     headerIconHover: $beacon-dark-blue-200
@@ -16,7 +15,6 @@ $platform_layout_contrasts: (
     containerBorder: $beacon-dark-blue-400,
     containerShadow: none,
     headerBackground: $beacon-dark-blue-500,
-    headerShadow: none,
     headerText: $beacon-gray-300,
     headerModule: $beacon-dark-blue-600,
     headerIconHover: $beacon-dark-blue-500
@@ -27,7 +25,6 @@ $platform_layout_contrasts: (
     containerBorder: $highcontrast-bright-blue-300,
     containerShadow: none,
     headerBackground: $beacon-gray-700,
-    headerShadow: none,
     headerText: $beacon-white,
     headerModule: $beacon-gray-600,
     headerIconHover: $beacon-white
@@ -38,6 +35,7 @@ $header-height: 50px;
 $min-detail-width: 1400px;
 $leftnav-width: 212px;
 $connector-width: 315px;
+$detail-container-padding: 1rem;
 // 100vw - leftnav
 $detail-view-width: calc(100vw - 212px);
 
@@ -45,7 +43,6 @@ $detail-view-width: calc(100vw - 212px);
   &__header {
     @include themify($platform_layout_contrasts) {
       background: apply('headerBackground');
-      box-shadow: apply('headerShadow');
       color: apply('headerText');
     }
     height: $header-height;
@@ -114,20 +111,21 @@ $detail-view-width: calc(100vw - 212px);
   @include themify($platform_layout_contrasts) {
     background: apply('containerBackground');
   }
+  padding: $detail-container-padding;
   margin-top: 50px;
   height: calc(100vh - 50px);
-  width: $detail-view-width;
+  width: $detail-view-width ;
   overflow-y: scroll;
 
   .detail {
-    width: $detail-view-width;
+    width: calc($detail-view-width - (2*$detail-container-padding));
 
     &__header {
       @include themify($platform_layout_contrasts) {
-        background: apply('containerInfoBackground');
+        background: apply('containerBackground');
       }
       height: fit-content;
-      padding: 18px 12px 60px 12px;
+      padding: 18px 12px 18px 12px;
       width: inherit;
 
       .label {
@@ -148,6 +146,7 @@ $detail-view-width: calc(100vw - 212px);
         }
         border-radius: 4px;
         height: 48px;
+        display: flex;
 
         .value {
           font-size: 14px;
@@ -176,36 +175,23 @@ $detail-view-width: calc(100vw - 212px);
     }
 
     &__tabs {
-      position: relative;
-      top: -48px;
+      min-width: 1002px;
 
       .action-bar {
-        position: absolute;
-        right: 10px;
-        top: 10px;
-
-        .platform-action-btn {
-          @include themify($platform_button_contrasts) {
-            background: apply('buttonAmbient');
-            border: 1px solid apply('buttonAmbientAccent');
-          }
-          width: 28px;
-          height: 28px;
-
-          .mat-icon {
-            position: relative;
-            left: -8px;
-            top: -2px;
-            font-size: 18px;
-            width: 18px;
-            height: 18px;
-          }
-        }
+        //position: absolute;
+        //right: 10px;
+        //top: 10px;
       }
     }
   }
 }
 
+.mat-drawer-container .mat-drawer-content .main-view-container {
+  @include themify($platform_layout_contrasts) {
+    background: apply('containerBackground');
+  }
+}
+
 .list-view-container {
   @include themify($platform_layout_contrasts) {
     background: apply('containerBackground');

package/styles/_leftnav.scss

@@ -136,7 +136,6 @@ $icon-container-width: 50px;
   .navbar--light {
     @include themify($platform_leftnav_contrasts) {
       background: apply('navBarLight') 0% 0% no-repeat padding-box;
-      box-shadow: apply('navBarLightShadow');
     }
     height: 50px;
     line-height: 50px;

package/styles/_material-drawer.scss

@@ -10,11 +10,11 @@
   position: fixed !important;
 
   &--width-standard {
-    width: 592px;
+    width: 592px !important;
   }
 
   &--width-double {
-    width: 1180px;
+    width: 1180px !important;
   }
 
   &__body {