@beacon-interactive-systems-llc/beacon-platform-ui 20.0.1 → 20.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beacon-interactive-systems-llc/beacon-platform-ui",
-  "version": "20.0.1",
+  "version": "20.0.4",
   "peerDependencies": {
     "@angular/common": "^20.3.4",
     "@angular/core": "^20.3.4",

package/styles/_charts.scss

@@ -6,6 +6,16 @@ $platform_charts_contrasts: (
     filterChip: $beacon-green-100,
     filterChipText: $beacon-black,
     chartText: $beacon-black,
+    chartColorIndicatorChildOne: $beacon-blue-100,
+    chartColorIndicatorChildTwo: $beacon-dark-blue-500,
+    chartColorIndicatorChildThree: $beacon-green-600,
+    chartColorIndicatorChildFour: $beacon-orange-500,
+    chartColorIndicatorChildFive: $beacon-orange-300,
+    chartColorIndicatorChildSix: $beacon-cyan-300,
+    chartColorIndicatorChildSeven: $beacon-dark-blue-300,
+    chartColorIndicatorChildEight: $beacon-green-400,
+    chartColorIndicatorChildNine: $beacon-orange-100,
+    chartColorIndicatorChildTen: $beacon-green-200,
   ),
   dark: (
     toolbar: $beacon-gray-700,
@@ -14,6 +24,16 @@ $platform_charts_contrasts: (
     filterChip: $beacon-dark-blue-400,
     filterChipText: $beacon-gray-300,
     chartText: $beacon-gray-200,
+    chartColorIndicatorChildOne: $beacon-blue-300,
+    chartColorIndicatorChildTwo: $beacon-dark-blue-700,
+    chartColorIndicatorChildThree: $beacon-green-750,
+    chartColorIndicatorChildFour: $beacon-orange-700,
+    chartColorIndicatorChildFive: $beacon-orange-500,
+    chartColorIndicatorChildSix: $beacon-cyan-500,
+    chartColorIndicatorChildSeven: $beacon-dark-blue-500,
+    chartColorIndicatorChildEight: $beacon-green-600,
+    chartColorIndicatorChildNine: $beacon-orange-300,
+    chartColorIndicatorChildTen: $beacon-green-500,
   ),
   highcontrast: (
     toolbar: $beacon-black,
@@ -22,6 +42,16 @@ $platform_charts_contrasts: (
     filterChip: $highcontrast-bright-green-300,
     filterChipText: $beacon-black,
     chartText: $beacon-white,
+    chartColorIndicatorChildOne: $highcontrast-bright-blue-100,
+    chartColorIndicatorChildTwo: $highcontrast-bright-blue-300,
+    chartColorIndicatorChildThree: $highcontrast-bright-green-300,
+    chartColorIndicatorChildFour: $highcontrast-bright-orange-300,
+    chartColorIndicatorChildFive: $highcontrast-bright-orange-200,
+    chartColorIndicatorChildSix: $highcontrast-teal-100,
+    chartColorIndicatorChildSeven: $highcontrast-bright-blue-200,
+    chartColorIndicatorChildEight: $highcontrast-bright-green-200,
+    chartColorIndicatorChildNine: $highcontrast-bright-orange-100,    
+    chartColorIndicatorChildTen: $highcontrast-bright-green-100,
   )
 );
 
@@ -33,8 +63,59 @@ $platform_charts_contrasts: (
   --secondary-chart-light: #009CDE; // $beacon-cyan-500
   --secondary-chart-dark: #9FAAC4;  // $beacon-dark-blue-300
   --secondary-chart-highcontrast: #70D4FF; // $highcontrast-bright-blue-100
+  
+  --chart-color-child-1-light: #71A2FA; // $beacon-blue-100
+  --chart-color-child-2-light: #1C3775; // $beacon-dark-blue-500;
+  --chart-color-child-3-light: #258367; // $beacon-green-600;
+  --chart-color-child-4-light: #E35205; // $beacon-orange-500;
+  --chart-color-child-5-light: #FFB281; // $beacon-orange-300;
+  --chart-color-child-6-light: #62DDF5; // $beacon-cyan-300;
+  --chart-color-child-7-light: #9FAAC4; // $beacon-dark-blue-300;
+  --chart-color-child-8-light: #62D1A4; // $beacon-green-400;
+  --chart-color-child-9-light: #FFE8D7; // $beacon-orange-100;
+  --chart-color-child-10-light: #BFEFDB; // $beacon-green-200;
+  --chart-color-noitems-light: #E4E4E4; // $beacon-gray-200;
+
+  --chart-color-child-1-dark: #0044C4; //$beacon-blue-300;
+  --chart-color-child-2-dark: #0E1F54; // $beacon-dark-blue-700;
+  --chart-color-child-3-dark: #006158; // $beacon-green-750;
+  --chart-color-child-4-dark: #A32502;; // $beacon-orange-700;
+  --chart-color-child-5-dark: #E35205; // $beacon-orange-500; 
+  --chart-color-child-6-dark: #009CDE; // $beacon-cyan-500;
+  --chart-color-child-7-dark: #1C3775; // $beacon-dark-blue-500; 
+  --chart-color-child-8-dark: #258367; // $beacon-green-600;
+  --chart-color-child-9-dark: #FFB281; // $beacon-orange-300;
+  --chart-color-child-10-dark: #34B78F; // $beacon-green-500; 
+  --chart-color-noitems-dark: #4B4A48; // $beacon-gray-500:
+
+  --chart-color-child-1-highcontrast: #70D4FF; // $highcontrast-bright-blue-100;
+  --chart-color-child-2-highcontrast: #0089C4; // $highcontrast-bright-blue-300;
+  --chart-color-child-3-highcontrast: #00A907; // $highcontrast-bright-green-300;
+  --chart-color-child-4-highcontrast: #DC0000; // $highcontrast-bright-orange-300;
+  --chart-color-child-5-highcontrast: #FF6300; // $highcontrast-bright-orange-200;
+  --chart-color-child-6-highcontrast: #00FFE7; // $highcontrast-teal-100;
+  --chart-color-child-7-highcontrast: #26BEFF; // $highcontrast-bright-blue-200;
+  --chart-color-child-8-highcontrast: #00FF0A; // $highcontrast-bright-green-200;
+  --chart-color-child-9-highcontrast: #FFAA73; // $highcontrast-bright-orange-100;
+  --chart-color-child-10-highcontrast: #71FF76; // $highcontrast-bright-green-100;
+  --chart-color-noitems-highcontrast: #E4E4E4; // $beacon-gray-200;
 }
 
+.chart-color-indicator-child {
+  @include themify($platform_charts_contrasts) {
+    &-1 { border-left: 6px solid apply('chartColorIndicatorChildOne') !important; }
+    &-2 { border-left: 6px solid apply('chartColorIndicatorChildTwo') !important; }
+    &-3 { border-left: 6px solid apply('chartColorIndicatorChildThree') !important; }
+    &-4 { border-left: 6px solid apply('chartColorIndicatorChildFour') !important; }
+    &-5 { border-left: 6px solid apply('chartColorIndicatorChildFive') !important; }
+    &-6 { border-left: 6px solid apply('chartColorIndicatorChildSix') !important; }
+    &-7 { border-left: 6px solid apply('chartColorIndicatorChildSeven') !important; }
+    &-8 { border-left: 6px solid apply('chartColorIndicatorChildEight') !important; }
+    &-9 { border-left: 6px solid apply('chartColorIndicatorChildNine') !important; }
+    &-10 { border-left: 6px solid apply('chartColorIndicatorChildTen') !important; }
+  }
+} 
+
 .chart-page-container {
   .page-header-row {
     @include themify($platform_charts_contrasts) {

package/styles/_global-search.scss

@@ -218,6 +218,13 @@ $platform_globalsearch_contrasts: (
             height: 20px;
             text-indent: 8px;
 
+            span {
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              width: 200px;
+            }
+
             &:hover {
               @include themify($platform_globalsearch_contrasts) {
                 background: apply('searchResultsItemHighlighted');

package/styles/_layout.scss

@@ -627,6 +627,11 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
   height: 100vh;
   width: 100%;
 
+  &.showing-cui {
+    height: calc(100vh - 24px);
+    margin-top: 24px;
+  }
+
   .parent-row {
     @include themify($platform_layout_contrasts) {
       background: apply('fullDetailParentBackground');
@@ -698,7 +703,6 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
     flex-grow: 1;
     padding: 8px 16px;
     overflow-y: auto;
-    height: 100vh;
 
     .focused-detail-widget {
       @include widget-background-color;
@@ -732,7 +736,7 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
 .list-view-container-widget {
   .list-view-container {
     height: unset !important;
-  
+
     .nested-list-container {
       height: unset !important;
     }

package/styles/_widgets.scss

@@ -23,6 +23,7 @@ $platform_widget_contrasts: (
     widgetSummarySelectionText: $beacon-black,
     widgetDropShadow: 0 0 4px 0 rgba(0, 0, 0, 0.12),
     selectedFilterBackground: $beacon-gray-100,
+    selectedFilterAltBackground: $beacon-green-100,
     widgetLineChartText: $beacon-gray-500,
     widgetCircleIconRed: $beacon-orange-500
   ),
@@ -49,8 +50,9 @@ $platform_widget_contrasts: (
     widgetSummarySelectionText: $beacon-gray-300,
     widgetDropShadow: none,
     selectedFilterBackground: $beacon-gray-700,
+    selectedFilterAltBackground: $beacon-green-600,
     widgetLineChartText: $beacon-gray-700,
-    widgetCircleIconRed: $beacon-orange-500
+    widgetCircleIconRed: $beacon-orange-500,
   ),
   highcontrast: (
     widgetText: $beacon-white,
@@ -75,6 +77,7 @@ $platform_widget_contrasts: (
     widgetSummarySelectionText: $beacon-white,
     widgetDropShadow: none,
     selectedFilterBackground: $beacon-gray-600,
+    selectedFilterAltBackground: $highcontrast-bright-green-300,
     widgetLineChartText: $beacon-white,
     widgetCircleIconRed: $beacon-orange-500
   )
@@ -473,6 +476,46 @@ $platform_widget_contrasts: (
     }
   }
 
+  &.dual-pie-chart-widget {
+    min-height: 338px;
+    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;
+      }
+    }
+
+    .chart-container {
+      height: 205px;
+      display: flex;
+      align-items: anchor-center;
+      justify-content: center;
+      position: relative;
+
+      .donut-center-text {
+        position: absolute;
+        top: 90px;
+      }
+    }
+  }
+
   &.count-summary-widget {
     border-radius: 10px;
     height: 144px;

package/styles/styles.scss

@@ -257,6 +257,7 @@ $border-radii: 3px, 5px, 8px, 10px, 12px;
     background: apply('cuiBanner') !important;
     color: apply('accentGreenText') !important;
   }
+  height: 24px;
   text-align: center;
   padding: 0;
   position: fixed;