@beacon-interactive-systems-llc/beacon-platform-ui 19.2.9 → 19.2.12

package/package.json

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

package/styles/_layout.scss

@@ -545,6 +545,10 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
       &--fixed-height {
         min-height: 160px !important;
       }
+
+      &--no-min-height {
+        min-height: unset;
+      }
     }
 
     .widget-title-color {
@@ -731,6 +735,10 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
       }
     }
   }
+
+  .list-view-container.nested-list-container {
+    height: unset !important;
+  }
 }
 
 .list-view-container-widget {

package/styles/_popover.scss

@@ -7,7 +7,12 @@ $platform_popover_contrasts: (
     popoverListBody: $beacon-white,
     popoverListFooter: $beacon-white,
     popoverListBorder: transparent,
-    popoverListSectionBorder: $beacon-gray-300
+    popoverListSectionBorder: $beacon-gray-300,
+    popoverFormHeader: $beacon-dark-blue-50,
+    popoverFormBody: $beacon-white,
+    popoverFormFooter: $beacon-white,
+    popoverFormBorder: transparent,
+    popoverFormSectionBorder: $beacon-gray-300,
   ),
   dark: (
     popoverBackground: $beacon-black,
@@ -17,7 +22,12 @@ $platform_popover_contrasts: (
     popoverListBody: $beacon-gray-700,
     popoverListFooter: $beacon-gray-700,
     popoverListBorder: $beacon-gray-400,
-    popoverListSectionBorder: $beacon-gray-400
+    popoverListSectionBorder: $beacon-gray-400,
+    popoverFormHeader: $beacon-gray-600,
+    popoverFormBody: $beacon-gray-700,
+    popoverFormFooter: $beacon-gray-700,
+    popoverFormBorder: $beacon-gray-400,
+    popoverFormSectionBorder: $beacon-gray-400,
   ),
   highcontrast: (
     popoverBackground: $beacon-black,
@@ -27,7 +37,12 @@ $platform_popover_contrasts: (
     popoverListBody: $beacon-black,
     popoverListFooter: $beacon-black,
     popoverListBorder: $beacon-white,
-    popoverListSectionBorder: $beacon-white
+    popoverListSectionBorder: $beacon-white,
+    popoverFormHeader: $beacon-black,
+    popoverFormBody: $beacon-black,
+    popoverFormFooter: $beacon-black,
+    popoverFormBorder: $beacon-white,
+    popoverFormSectionBorder: $beacon-white,
   )
 );
 
@@ -169,3 +184,58 @@ $platform_popover_contrasts: (
     }
   }
 }
+
+.form-popover-container {
+  .popover-arrow {
+    display: none;
+  }
+
+  .popover-content {
+    border-radius: 8px;
+    padding: 0px;
+
+    .form-popover {
+      &--header {
+        @include themify($platform_popover_contrasts) {
+          background-color: apply('popoverFormHeader');
+          border-bottom: 0.5px solid apply('popoverFormSectionBorder');
+        }
+
+        border-top-right-radius: 8px;
+        border-top-left-radius: 8px;
+        display: flex;
+        min-height: 48px;
+        padding-left: 16px;
+        padding-right: 8px;
+      }
+
+      .modal-content {
+        @include themify($platform_popover_contrasts) {
+          border: 1px solid apply('popoverFormBorder');
+        }
+        border-radius: 8px;
+      }
+
+      &--body {
+        @include themify($platform_popover_contrasts) {
+          background-color: apply('popoverFormBody');
+        }
+
+        padding: 16px;
+      }
+
+      &--footer {
+        @include themify($platform_popover_contrasts) {
+          background-color: apply('popoverFormFooter');
+        }
+        border-bottom-right-radius: 8px;
+        border-bottom-left-radius: 8px;
+        display: flex;
+        align-items: center;
+        height: 65px;
+        padding: 8px 16px;
+        border-top: none;
+      }
+    }
+  }
+}

package/styles/_quill.scss

@@ -126,6 +126,18 @@ quill-editor {
   min-height: 100px;
 }
 
+.highlighted-inline-edit-container {
+  @include themify($platform_form_contrasts) {
+    border: 2px solid apply('formInputBorderActive');
+  }
+  border-radius: 5px;
+  padding: 12px;
+
+  .quill-inline-container {
+    border: none;
+  }
+}
+
 quill-view {
   .ql-editor {
     padding: 0;

package/styles/_tables.scss

@@ -18,6 +18,7 @@ $platform_table_contrasts: (
     tableDotGray: $beacon-gray-300,
     tableDotGreen: $beacon-green-400,
     tableDotYellow: $beacon-yellow-400,
+    tableDotOrange: $beacon-orange-300,
     tableDotRed: $beacon-orange-500,
     tableDotDarkRed: $beacon-orange-700
   ),
@@ -35,6 +36,7 @@ $platform_table_contrasts: (
     tableDotGray: $beacon-gray-300,
     tableDotGreen: $beacon-green-400,
     tableDotYellow: $beacon-yellow-400,
+    tableDotOrange: $beacon-orange-400,
     tableDotRed: $beacon-orange-500,
     tableDotDarkRed: $beacon-orange-700
   ),
@@ -52,6 +54,7 @@ $platform_table_contrasts: (
     tableDotGray: $beacon-gray-300,
     tableDotGreen: $beacon-green-400,
     tableDotYellow: $beacon-yellow-400,
+    tableDotOrange: $highcontrast-bright-orange-200,
     tableDotRed: $beacon-orange-500,
     tableDotDarkRed: $beacon-orange-700
   )
@@ -171,6 +174,13 @@ table.platform-table {
         }
       }
       padding: 4px 16px;
+
+      &.truncate-cell {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 300px;
+      }
     }
   }
 
@@ -386,6 +396,15 @@ table.platform-table {
     }
   }
 
+  &.orange {
+    &::before {
+      @include status-dot-positioning();
+      @include themify($platform_table_contrasts) {
+        color: apply('tableDotOrange');
+      }
+    }
+  }
+
   &.red {
     &::before {
       @include status-dot-positioning();

package/styles/_typography.scss

@@ -111,6 +111,7 @@ $font-sizes: 8px, 10px, 12px, 14px, 16px, 18px, 20px, 22px, 24px, 28px, 32px;
     &--blue { color: apply('textBlue') !important; }
     &--dark-blue { color: apply('textBlueDark') !important; }
     &--light-blue { color: apply('textBlueHighlight') !important; }
+    &--blue-light { color: apply('textBlueLight') !important; }
     &--green { color: apply('textGreen') !important; }
     &--dark-green { color: apply('textGreenDark') !important; }
     &--cyan { color: apply('textCyan') !important; }

package/styles/_widgets.scss

@@ -434,6 +434,29 @@ $platform_widget_contrasts: (
     }
   }
 
+  @mixin widget-filter-chip {
+    .filter-chip {
+      @include themify($platform_widget_contrasts) {
+        background-color: apply('selectedFilterAltBackground');
+      }
+      height: 18px;
+      border-radius: 2px;
+      margin-left: 4px !important;
+      padding: 2px 4px 2px 4px;
+      display: flex;
+      align-items: center;
+
+      &.clear-icon::after {
+        content: "close";
+        font-family: "Material Icons";
+        height: 8.5px;
+        width: 8.5px;
+        font-size: 8.5px;
+        margin: 0px 2px 2px 4px !important;
+      }
+    }
+  }
+
   &.pie-chart-widget {
     height: 414px;
     width: 100%;
@@ -477,30 +500,10 @@ $platform_widget_contrasts: (
   }
 
   &.dual-pie-chart-widget {
-    min-height: 338px;
+    height: 445px !important;
     width: 100%;
     @include widget-filter-container();
-
-    .filter-chip {
-      @include themify($platform_widget_contrasts) {
-        background-color: apply('selectedFilterAltBackground');
-      }
-      height: 18px;
-      border-radius: 2px;
-      margin-left: 4px !important;
-      padding: 2px 4px 2px 4px;
-      display: flex;
-      align-items: center;
-
-      &.clear-icon::after {
-        content: "close";
-        font-family: "Material Icons";
-        height: 8.5px;
-        width: 8.5px;
-        font-size: 8.5px;
-        margin: 0px 2px 2px 4px !important;
-      }
-    }
+    @include widget-filter-chip();
 
     .chart-container {
       height: 205px;
@@ -718,6 +721,50 @@ $platform_widget_contrasts: (
     }
   }
 
+  &.line-chart-widget-lg {
+    height: 555px !important;
+    width: 100% !important;
+
+    @include widget-filter-container();
+    @include widget-filter-chip();
+    .gridline-path {
+      stroke-dasharray: 1, 4;
+    }
+
+    .partial-border--bottom-dark {
+      border-bottom: 1px solid #707070 !important;
+    }
+
+    .tick text {
+      font-size: 9px !important;
+      transform: rotate(0);
+      @include themify($platform_widget_contrasts) {
+        fill: apply('widgetLineChartText') !important;
+      }
+      @include font-weight--bold;
+    }
+
+    ngx-charts-line-chart {
+      path.area {
+        fill-opacity: 0 !important;
+      }
+    }
+
+    .chart-wrapper {
+      width: 100%;
+      flex: 1 1 auto;
+      height: 100px;
+    }
+
+    .hidden-datpicker-input {
+      position: absolute;
+      top: -8px;
+      right: -28px;
+      opacity: 0;
+      pointer-events: none !important;
+    }
+  }
+
   .with-circle-icon {
     &.red::after {
       @include material-icons-circle-sm();