@beacon-interactive-systems-llc/beacon-platform-ui 19.1.9 → 19.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beacon-interactive-systems-llc/beacon-platform-ui",
-  "version": "19.1.9",
+  "version": "19.1.10",
   "peerDependencies": {
     "@angular/common": "^19.2.14",
     "@angular/core": "^19.2.14",

package/styles/_forms.scss

@@ -19,7 +19,8 @@ $platform_form_contrasts: (
     formHighlightOrange: $beacon-orange-100,
     formHighlightOrangeText: $beacon-black,
     quillToolbar: $beacon-dark-blue-50,
-    quillButton: $beacon-gray-400
+    quillButton: $beacon-gray-400,
+    quillInlineContainerBorder: $beacon-dark-blue-200,
   ),
   dark: (
     formText: $beacon-gray-300,
@@ -39,7 +40,8 @@ $platform_form_contrasts: (
     formHighlightOrange: $beacon-green-700,
     formHighlightOrangeText: $beacon-gray-200,
     quillToolbar: $beacon-green-700,
-    quillButton: $beacon-gray-300
+    quillButton: $beacon-gray-300,
+    quillInlineContainerBorder: $beacon-gray-400,
   ),
   highcontrast: (
     formText: $beacon-white,
@@ -59,7 +61,8 @@ $platform_form_contrasts: (
     formHighlightOrange: $highcontrast-bright-orange-100,
     formHighlightOrangeText: $beacon-black,
     quillToolbar: $beacon-black,
-    quillButton: $beacon-white
+    quillButton: $beacon-white,
+    quillInlineContainerBorder: $beacon-white
   )
 );
 
@@ -143,6 +146,10 @@ $platform_form_contrasts: (
         @include placeholder-color(apply('formPlaceholderText'));
       }
       height: 32px;
+
+      &--sm {
+        height: 24px !important;
+      }
     }
 
     mat-icon.input-inline-icon {

package/styles/_layout.scss

@@ -26,7 +26,10 @@ $platform_layout_contrasts: (
     platformLinkTableStyle: $beacon-dark-blue-400,
     connectivityGreen: $beacon-green-550,
     connectivityRed: $beacon-orange-600,
-    connectivityYellow: $beacon-yellow-500
+    connectivityYellow: $beacon-yellow-500,
+    detailWidgetBackground: $beacon-gray-100,
+    widgetCheckColor: $beacon-green-300,
+    widgetUnCheckedColor: $beacon-gray-200
   ),
   dark: (
     detailBackground: $beacon-gray-700,
@@ -55,7 +58,10 @@ $platform_layout_contrasts: (
     platformLinkTableStyle: $beacon-dark-blue-300,
     connectivityGreen: $beacon-green-600,
     connectivityRed: $beacon-orange-700,
-    connectivityYellow: $beacon-yellow-600
+    connectivityYellow: $beacon-yellow-600,
+    detailWidgetBackground: $beacon-gray-500,
+    widgetCheckColor: $beacon-green-600,
+    widgetUnCheckedColor: $beacon-gray-500
   ),
   highcontrast: (
     detailBackground: $beacon-black,
@@ -84,7 +90,10 @@ $platform_layout_contrasts: (
     platformLinkTableStyle: $highcontrast-bright-blue-200,
     connectivityGreen: $highcontrast-bright-green-200,
     connectivityRed: $highcontrast-bright-orange-300,
-    connectivityYellow: $highcontrast-bright-yellow-200
+    connectivityYellow: $highcontrast-bright-yellow-200,
+    detailWidgetBackground: $beacon-gray-700,
+    widgetCheckColor: $highcontrast-bright-green-200,
+    widgetUnCheckedColor: $beacon-white
   )
 );
 
@@ -324,6 +333,19 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
           position: relative;
           top: 12px;
         }
+
+        &.header-status {
+          margin-left: -12px !important;
+          margin-right: -20px !important;
+          height: 48px;
+          margin-top: 4px;
+          margin-bottom: 4px;
+
+          @include themify($platform_layout_contrasts) {
+            box-shadow: apply('headerShadow');
+            border-bottom: apply('headerBorder');
+          }
+        }
       }
 
       mat-icon.three-dot-menu-trigger {
@@ -333,6 +355,10 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
         &--pill {
           top: 16px;
         }
+
+        &--compact {
+          top: 4px !important;
+        }
       }
     }
 
@@ -357,6 +383,10 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
       overflow: hidden;
       width: calc(100vw - $leftnav-collapsed-width - $detail-sidebar-width);
 
+      &--no-side-bar {
+        width: 100%;
+      }
+
       &__section {
         overflow: scroll;
         padding-top: 16px;
@@ -369,6 +399,15 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
           transition: width 0.5s ease-in-out;
           width: calc(100vw - $detail-sidebar-width - $leftnav-collapsed-width - 24px);
         }
+
+        &--no-side-bar {
+          display: inline !important;
+          width: calc(100vw - $leftnav-width - 24px) !important;
+
+          &--expanded {
+            width: calc(100vw - $leftnav-collapsed-width - 24px) !important;
+          }
+        }
       }
 
       &__sidebar {
@@ -438,6 +477,10 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
       &--full-height {
         min-height: calc(100vh - $header-height - $detail-header-height - 16px);
       }
+
+      &--fixed-height {
+        min-height: 160px !important;
+      }
     }
 
     .widget-title-color {
@@ -445,6 +488,29 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
         color: apply('detailWidgetTitle');
       }
     }
+
+    .widget-background-color {
+      @include themify($platform_layout_contrasts) {
+        background-color: apply('detailWidgetBackground');
+      }
+      border-radius: 5px;
+      padding: 12px;
+      width: 100%;
+    }
+
+    mat-icon.widget-check {
+      margin-top: -30px !important;
+      &-complete {
+        @include themify($platform_layout_contrasts) {
+          color: apply('widgetCheckColor');
+        }
+      }
+      &-pending {
+        @include themify($platform_layout_contrasts) {
+          color: apply('widgetUnCheckedColor');
+        }
+      } 
+    }
   }
 }
 

package/styles/_material-tabs.scss

@@ -121,6 +121,10 @@ $platform_tab_contrasts: (
   position: absolute;
   top: 128px;
 
+  &.xl-header {
+    top: 190px !important
+  }
+
   .mat-mdc-tab-group {
     @include platform-tab-common-styles();
 

package/styles/_ng-select.scss

@@ -183,6 +183,26 @@ $min-dropdown-panel-width: 215px;
       display: none;
     }
   }
+
+  &.ng-select--sm {
+    height: 24px;
+    font-size: 14px;
+
+    .ng-select-container {
+      min-height: 24px !important;
+      height: 24px !important;
+      line-height: 22px;
+      padding: 0 8px;
+
+      .ng-value-container {
+        padding-left: 0px;
+      }
+    }
+
+    .ng-input, .ng-clear-wrapper {
+      display: none;
+    }
+  }
 }
 
 /* Replace default dropdown triangle look with a mat-icon */

package/styles/_quill.scss

@@ -93,10 +93,11 @@ quill-editor {
   }
 
   &.inline-editor {
+    width: 100%;
     .ql-toolbar {
       @include themify($platform_form_contrasts) {
         background: apply('formInputBackground') !important;
-        border-bottom: 2px solid apply('formInputBorder') !important;
+        border-bottom: 1px solid apply('formInputBorder') !important;
       }
       border-left: none !important;
       border-right: none !important;
@@ -108,11 +109,23 @@ quill-editor {
 
       .ql-editor {
         min-height: 100px;
+        padding-bottom: 0;
       }
     }
   }
 }
 
+.quill-inline-container {
+  width: 100%;
+  @include themify($platform_form_contrasts) {
+    border: 1px solid apply('quillInlineContainerBorder');
+  }
+  border-radius: 5px;
+  padding: 6px 12px;
+  margin: 10px;
+  min-height: 100px;
+}
+
 quill-view {
   .ql-editor {
     padding: 0;

package/styles/styles.scss

@@ -155,6 +155,16 @@ button, a {
   }
 }
 
+.status {
+  @include themify($platform_contrasts) {
+    &--red { color: apply('accentRed') !important; }
+    &--yellow { color: apply('accentDarkYellow') !important; }
+    &--green { color: apply('accentGreen') !important; }
+    &--orange { color: apply('accentDarkOrange') !important; }
+    &--gray { color: apply('accentDarkGray') !important; }
+  }
+}
+
 .platform-notification-emblem {
   @include themify($platform_contrasts) {
     background: apply('grayBackground');