@beacon-interactive-systems-llc/beacon-platform-ui 19.3.1 → 19.3.4

package/package.json

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

package/styles/_filters.scss

@@ -7,11 +7,13 @@ $platform_filter_contrasts: (
     filterChip: $beacon-green-100,
     filterChipText: $beacon-black,
     filterDropdownFocus: $beacon-dark-blue-200,
+    filterDropdownActiveText: $beacon-cyan-600,
     filterDropdownText: $beacon-cyan-600,
     showingRowBg: $beacon-white,
     showingRowColor: $beacon-green-500,
     superTitleBg: $beacon-white,
     superTitleColor: $beacon-dark-blue-300,
+    filterChipClearIcon: $beacon-gray-400
   ),
   dark: (
     filterBackground: $beacon-gray-700,
@@ -21,25 +23,29 @@ $platform_filter_contrasts: (
     filterChip: $beacon-dark-blue-400,
     filterChipText: $beacon-gray-300,
     filterDropdownFocus: $beacon-gray-600,
+    filterDropdownActiveText: $beacon-green-650,
     filterDropdownText: $beacon-green-650,
     showingRowBg: $beacon-gray-700,
     showingRowColor: $beacon-green-650,
     superTitleBg: $beacon-gray-700,
     superTitleColor: $beacon-gray-300,
+    filterChipClearIcon: $beacon-gray-300
   ),
   highcontrast: (
     filterBackground: $beacon-black,
     filterBorder: $beacon-white,
     filterShadow: none,
     filterSearchIcon: $beacon-white,
-    filterChip: $highcontrast-bright-green-300,
+    filterChip: $highcontrast-bright-green-100,
     filterChipText: $beacon-black,
-    filterDropdownFocus: $highcontrast-bright-blue-200,
+    filterDropdownFocus: $highcontrast-teal-100,
+    filterDropdownActiveText: $beacon-black,
     filterDropdownText: $highcontrast-bright-green-200,
     showingRowBg: $beacon-black,
     showingRowColor: $highcontrast-bright-green-200,
     superTitleBg: $beacon-black,
     superTitleColor: $beacon-white,
+    filterChipClearIcon: $beacon-gray-400
   )
 );
 
@@ -160,7 +166,7 @@ $date-filter-width: calc(1em * 8);
 
       .filter-chip {
         @include font-size--default-md;
-        @include font-weight--semibold;
+        @include font-weight--regular;
         @include themify($platform_filter_contrasts) {
           background: apply('filterChip');
           color: apply('filterChipText');
@@ -173,13 +179,15 @@ $date-filter-width: calc(1em * 8);
         padding-right: .25rem;
 
         &::after {
-          @include font-color--semi-muted;
           content: "close";
           font-family: "Material Icons";
           position: relative;
           text-align: end;
           top: 0.1rem;
           z-index: 99;
+          @include themify($platform_filter_contrasts) {
+            color: apply('filterChipClearIcon');
+          }
         }
       }
     }

package/styles/_forms.scss

@@ -21,13 +21,14 @@ $platform_form_contrasts: (
     quillToolbar: $beacon-dark-blue-50,
     quillButton: $beacon-gray-400,
     quillInlineContainerBorder: $beacon-dark-blue-200,
+    pencilEditIconColor: $beacon-gray-300
   ),
   dark: (
     formText: $beacon-gray-300,
     formPlaceholderText: $beacon-gray-400,
     formInputBackground: $beacon-gray-600,
     formInputBackgroundHover: $beacon-gray-600,
-    formInputBorder: $beacon-gray-300,
+    formInputBorder: $beacon-gray-400,
     formInputBorderActive: $beacon-dark-blue-400,
     formControlSelected: $beacon-dark-blue-400,
     formControlSelectedText: $beacon-cyan-300,
@@ -42,11 +43,12 @@ $platform_form_contrasts: (
     quillToolbar: $beacon-green-700,
     quillButton: $beacon-gray-300,
     quillInlineContainerBorder: $beacon-gray-400,
+    pencilEditIconColor: $beacon-gray-300
   ),
   highcontrast: (
     formText: $beacon-white,
     formPlaceholderText: $beacon-white,
-    formInputBackground: $beacon-gray-700,
+    formInputBackground: $beacon-black,
     formInputBackgroundHover: $beacon-gray-700,
     formInputBorder: $beacon-white,
     formInputBorderActive: $highcontrast-teal-100,
@@ -62,7 +64,8 @@ $platform_form_contrasts: (
     formHighlightOrangeText: $beacon-black,
     quillToolbar: $beacon-black,
     quillButton: $beacon-white,
-    quillInlineContainerBorder: $beacon-white
+    quillInlineContainerBorder: $beacon-white,
+    pencilEditIconColor: $beacon-white
   )
 );
 
@@ -218,3 +221,15 @@ $control-width-options: 40px, 56px, 80px, 108px, 124px, 140px;
   border-radius: 5px;
   padding: 0.25rem;
 }
+
+.pencil-edit-icon {
+  height: 15px !important;
+  width: 15px !important;
+  font-size: 15px !important;
+  @include themify($platform_form_contrasts) {
+    color: apply('pencilEditIconColor') !important;
+  }
+  &:hover {
+    cursor: pointer;
+  }
+}

package/styles/_fullcalendar.scss

@@ -317,6 +317,10 @@ $platform_fullcalendar_contrasts: (
   &.fc-event.is-subevent {
     margin-left: 16px;
   }
+  
+  .event-info {
+    overflow: hidden !important;
+  }
 }
 
 .fc-daygrid-event, .fc-timegrid-event {
@@ -372,6 +376,44 @@ $platform_fullcalendar_contrasts: (
   }
 }
 
+.fc-more-link {
+  @include font-weight--semibold;
+  @include font-color--blue--light;
+}
+
+.fc-popover.fc-more-popover {
+  @include themify($platform_fullcalendar_contrasts) {
+    .fc-popover-header {
+      background: apply('fullcalendarToolbar');
+
+      .fc-popover-title {
+        color: apply('fullcalendarDateLabel');
+      }
+
+      .fc-popover-close {
+        color: apply('fullcalendarToolbarScroll');
+      }
+    }
+
+    .fc-popover-body {
+      background: apply('fullcalendarTodayMonthBackground');
+    }
+  }
+  border-radius: 5px;
+
+  .fc-popover-header {
+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
+  }
+  .fc-popover-body {
+    border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 5px;
+    max-height: 425px;
+    overflow: scroll;
+  }
+
+}
+
 // Other elements on calendar view
 .cal-popover-container {
   .popover-arrow {

package/styles/_gridstack.scss

@@ -23,7 +23,7 @@ $platform_gridstack_contrasts: (
     scrollerBorder: 0.5px solid $beacon-gray-300,
     scrollerIcon: $beacon-cyan-600,
     optionsButton: $beacon-orange-500,
-    optionsButtonText: $beacon-white,
+    optionsButtonText: $beacon-gray-300,
     optionsRowBorder: $beacon-gray-300,
     optionsTypeRow: $beacon-gray-600,
   ),
@@ -76,6 +76,9 @@ $platform_gridstack_contrasts: (
   margin-top: -12px;
   margin-left: -16px;
   margin-right: -16px;
+  position: sticky !important;
+  top: -11.7px !important;
+  z-index: 101 !important;
 
   .dashboard-buttons {
     display: flex;
@@ -96,7 +99,6 @@ $platform_gridstack_contrasts: (
       height: 30px;
       padding: 0px;
       width: 32px;
-
     }
 
     .dashboard-select {

package/styles/_layout.scss

@@ -74,7 +74,7 @@ $platform_layout_contrasts: (
     fullDetailParentBackground: $beacon-gray-700,
     fullDetailParentText: $beacon-gray-400,
     fullDetailTitleBackground: $beacon-dark-blue-600,
-    fullDetailTitleText: $beacon-white,
+    fullDetailTitleText: $beacon-gray-300,
     fullDetailStatusBackground: $beacon-gray-600,
     fullDetailScroller: $beacon-dark-blue-500,
     fullDetailScrollerBorder: none,
@@ -144,6 +144,8 @@ $detail-sidebar-width: 212px;
 $detail-tab-body-offset: 128px;
 $detail-tab-body-sm-offset: 140px;
 $detail-tab-body-xl-offset: 190px;
+$sidebar-sm-offset: 159px;
+$sidebar-xl-offset: 208px;
 
 $detail-container-padding: 1rem;
 $detail-view-width: calc(100vw - $leftnav-width);
@@ -319,7 +321,7 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
       }
 
       height: $detail-header-height;
-      padding: 12px 12px 0px;
+      padding: 12px 16px;
       position: absolute;
       width: 100%;
 
@@ -342,6 +344,9 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
 
       &.xl {
         height: $detail-header-xl-height;
+        .entity-info-header {
+          min-height: 31px !important;
+        }
       }
 
       .label {
@@ -418,8 +423,9 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
         }
 
         &.header-status {
-          margin-left: -12px !important;
-          margin-right: -20px !important;
+          margin-left: -16px;
+          margin-right: -16px;
+          padding-left: 16px;
           height: 48px;
           margin-top: 4px;
           margin-bottom: 4px;
@@ -427,6 +433,10 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
           @include themify($platform_layout_contrasts) {
             border-bottom: apply('headerBorder');
           }
+
+          button.platform-btn--pill {
+            padding: 0px 12px !important;
+          }
         }
       }
 
@@ -499,10 +509,10 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
 
         &--no-side-bar {
           display: inline !important;
-          width: calc(100vw - $leftnav-width - 24px) !important;
+          width: calc(100vw - $leftnav-width - 24px);
 
           &--expanded {
-            width: calc(100vw - $leftnav-collapsed-width - 24px) !important;
+            width: calc(100vw - $leftnav-collapsed-width - 24px);
           }
         }
       }
@@ -512,6 +522,15 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
           background: apply('containerSidebarBackground');
           border-left: apply('containerSidebarBorderLeft')
         }
+
+        &.sm-header {
+          top: $sidebar-sm-offset;
+        }
+
+        &.xl-header {
+          top: $sidebar-xl-offset;
+        }
+
         height: calc(100vh - $header-height - $detail-header-height);
         margin-left: 12px;
         overflow-y: auto;
@@ -623,10 +642,15 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
   }
 }
 
-// do not modify detail__body__section width for mobile based on leftnav open or closed
-.main-view-container.main-view-container--expanded.platform-mobile .detail-view-container .detail__body__section {
-  width: calc(100vw - $detail-sidebar-width - $leftnav-collapsed-width - 24px) !important;
-}
+// Do not modify detail__body__section width for mobile based on leftnav open or closed
+.main-view-container.main-view-container--expanded.platform-mobile .detail-view-container {
+  .detail__body__section {
+    width: calc(100vw - $detail-sidebar-width - $leftnav-collapsed-width - 24px) !important;
+  }
+  .detail__body__section--no-side-bar, .detail__body__section--no-side-bar--expanded {
+    width: calc(100vw - $leftnav-collapsed-width - 24px) !important;
+  }
+} 
 
 .list-view-container {
   @include themify($platform_layout_contrasts) {