@beacon-interactive-systems-llc/beacon-platform-ui 19.2.2 → 19.2.4

package/package.json

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

package/styles/_forms.scss

@@ -86,6 +86,13 @@ $platform_form_contrasts: (
   }
 }
 
+$control-width-options: 40px, 56px, 80px, 108px, 124px, 140px;
+@each $width-opt in $control-width-options {
+  .width--#{$width-opt} {
+    width: $width-opt !important;
+  }
+}
+
 .form {
   .form__group {
     position: relative;
@@ -137,6 +144,10 @@ $platform_form_contrasts: (
         @include font-color--default;
         content: "*";
       }
+
+      &.red-label {
+        @include font-color--red;
+      }
     }
 
     input.form-control {

package/styles/_material-tabs.scss

@@ -5,7 +5,8 @@ $platform_tab_contrasts: (
     tabLabelActive: $beacon-white,
     tabBackgroundActive: $beacon-dark-blue-400,
     tabBackgroundActiveAlt: $beacon-orange-200,
-    tabDividerBorder: $beacon-gray-300
+    tabDividerBorder: $beacon-gray-300,
+    tabRedCircleIcon: $beacon-orange-500
   ),
   dark: (
     popoverHeaderBackground: $beacon-gray-500,
@@ -13,7 +14,8 @@ $platform_tab_contrasts: (
     tabLabelActive: $beacon-gray-400,
     tabBackgroundActive: $beacon-dark-blue-700,
     tabBackgroundActiveAlt: $beacon-orange-700,
-    tabDividerBorder: $beacon-gray-700
+    tabDividerBorder: $beacon-gray-700,
+    tabRedCircleIcon: $beacon-orange-500
   ),
   highcontrast: (
     popoverHeaderBackground: $beacon-gray-700,
@@ -21,7 +23,8 @@ $platform_tab_contrasts: (
     tabLabelActive: $beacon-white,
     tabBackgroundActive: $beacon-dark-blue-700,
     tabBackgroundActiveAlt: $highcontrast-bright-orange-200,
-    tabDividerBorder: $beacon-gray-100
+    tabDividerBorder: $beacon-gray-100,
+    tabRedCircleIcon: $beacon-orange-500
   )
 );
 
@@ -214,6 +217,17 @@ $platform_tab_contrasts: (
       .mat-mdc-tab-labels {
         .mat-mdc-tab {
           @include platform-alt-tab-common-styles();
+
+          &.tab-with-circle-icon {
+            &.red::after {
+              @include material-icons-circle-sm();
+              top: -13px;
+              left: 40px;
+              @include themify($platform_tab_contrasts) {
+                color: apply('tabRedCircleIcon');
+              }
+            }
+          }
         }
       }
     }

package/styles/_mixins.scss

@@ -1,27 +1,36 @@
-@import "theming";
-
-@mixin inset-shadow {
-  box-shadow: inset 0 0px 10px 0px $platform-blue-300;
-}
-
-@mixin card-shadow {
-  box-shadow: 0px 3px 5px rgba(100,100,100, 0.2);
-}
-
-@mixin placeholder-color($color) {
-  &::placeholder {
-    color: $color !important;
-  }
-  &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-    color: $color !important;
-  }
-  &::-moz-placeholder { /* Firefox 19+ */
-    color: $color !important;
-  }
-  &:-ms-input-placeholder { /* IE 10+ */
-    color: $color !important;
-  }
-  &:-moz-placeholder { /* Firefox 18- */
-    color: $color !important;
-  }
-}
+@import "theming";
+
+@mixin inset-shadow {
+  box-shadow: inset 0 0px 10px 0px $platform-blue-300;
+}
+
+@mixin card-shadow {
+  box-shadow: 0px 3px 5px rgba(100,100,100, 0.2);
+}
+
+@mixin placeholder-color($color) {
+  &::placeholder {
+    color: $color !important;
+  }
+  &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+    color: $color !important;
+  }
+  &::-moz-placeholder { /* Firefox 19+ */
+    color: $color !important;
+  }
+  &:-ms-input-placeholder { /* IE 10+ */
+    color: $color !important;
+  }
+  &:-moz-placeholder { /* Firefox 18- */
+    color: $color !important;
+  }
+}
+
+@mixin material-icons-circle-sm {
+  font-family: "Material Icons";
+  content: "circle";
+  font-size: 6px;
+  height: 6px;
+  width: 6px;
+  position: absolute;
+}

package/styles/_widgets.scss

@@ -1,5 +1,4 @@
 @import "theming";
-
 $platform_widget_contrasts: (
   light: (
     widgetText: $beacon-black,
@@ -12,6 +11,7 @@ $platform_widget_contrasts: (
     widgetTitle: $beacon-dark-blue-300,
     widgetTitleDark: $beacon-dark-blue-500,
     widgetInfoBox: $beacon-gray-50,
+    widgetInfoBoxBorder: $beacon-dark-blue-200,
     pendingNotificationBackground: $beacon-gray-100,
     eventContainerBg: $beacon-gray-300,
     loginContainerBackground: $beacon-dark-blue-500,
@@ -23,7 +23,8 @@ $platform_widget_contrasts: (
     widgetSummarySelectionText: $beacon-black,
     widgetDropShadow: 0 0 4px 0 rgba(0, 0, 0, 0.12),
     selectedFilterBackground: $beacon-gray-100,
-    widgetLineChartText: $beacon-gray-500
+    widgetLineChartText: $beacon-gray-500,
+    widgetCircleIconRed: $beacon-orange-500
   ),
   dark: (
     widgetText: $beacon-gray-200,
@@ -36,6 +37,7 @@ $platform_widget_contrasts: (
     widgetTitle: $beacon-gray-300,
     widgetTitleDark: $beacon-dark-blue-300,
     widgetInfoBox: $beacon-gray-600,
+    widgetInfoBoxBorder: $beacon-gray-700,
     pendingNotificationBackground: $beacon-gray-700,
     eventContainerBg: $beacon-gray-400,
     loginContainerBackground: $beacon-dark-blue-500,
@@ -47,7 +49,8 @@ $platform_widget_contrasts: (
     widgetSummarySelectionText: $beacon-gray-300,
     widgetDropShadow: none,
     selectedFilterBackground: $beacon-gray-700,
-    widgetLineChartText: $beacon-gray-700
+    widgetLineChartText: $beacon-gray-700,
+    widgetCircleIconRed: $beacon-orange-500
   ),
   highcontrast: (
     widgetText: $beacon-white,
@@ -60,6 +63,7 @@ $platform_widget_contrasts: (
     widgetTitle: $beacon-white,
     widgetTitleDark: $highcontrast-bright-blue-200,
     widgetInfoBox: $beacon-gray-700,
+    widgetInfoBoxBorder: $beacon-gray-500,
     pendingNotificationBackground: $beacon-gray-700,
     eventContainerBg: $beacon-gray-400,
     loginContainerBackground: $beacon-dark-blue-500,
@@ -71,10 +75,20 @@ $platform_widget_contrasts: (
     widgetSummarySelectionText: $beacon-white,
     widgetDropShadow: none,
     selectedFilterBackground: $beacon-gray-600,
-    widgetLineChartText: $beacon-white
+    widgetLineChartText: $beacon-white,
+    widgetCircleIconRed: $beacon-orange-500
   )
 );
 
+.platform-widget-subcontainer {
+  @include themify($platform_widget_contrasts) {
+    background: apply('widgetInfoBox') !important;
+    border: 1px solid apply('widgetInfoBoxBorder');
+  }
+  border-radius: 5px;
+  padding: 12px;
+}
+
 .platform-widget {
   @include themify($platform_widget_contrasts) {
     background: apply('widgetBackground') !important;
@@ -660,6 +674,18 @@ $platform_widget_contrasts: (
       height: 310px !important;
     }
   }
+
+  .with-circle-icon {
+    &.red::after {
+      @include material-icons-circle-sm();
+      top: 0px;
+      right: 0px;
+      transform: translate(-157%, 139%);
+      @include themify($platform_widget_contrasts) {
+        color: apply('widgetCircleIconRed');
+      }
+    }
+  }
 }
 
 /*

package/styles/styles.scss

@@ -265,3 +265,12 @@ $border-radii: 3px, 5px, 8px, 10px, 12px;
   right: 0;
   z-index: 1050;
 }
+
+.text-align {
+  &-right {
+    text-align: right;
+  }
+  &-center {
+    text-align: center;
+  }
+}