@beacon-interactive-systems-llc/beacon-platform-ui 19.0.0 → 19.0.2

package/package.json

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

package/styles/_buttons.scss

@@ -251,6 +251,7 @@ button.platform-btn {
       background: apply('buttonDisabled');
       color: apply('buttonDisabledText');
       border: apply('buttonDisabledBorder');
+      box-shadow: none !important;
     }
   }
 

package/styles/_filters.scss

@@ -1,229 +1,229 @@
-$platform_filter_contrasts: (
-  light: (
-    filterBackground: $beacon-dark-blue-50,
-    filterBorder: $beacon-gray-border,
-    filterShadow: 0px 3px 3px $beacon-black,
-    filterSearchIcon: $beacon-gray-400,
-    filterChip: $beacon-green-100,
-    filterChipText: $beacon-black,
-    filterDropdownFocus: $beacon-dark-blue-200,
-    filterDropdownText: $beacon-cyan-600,
-    showingRowBg: $beacon-white,
-    showingRowColor: $beacon-green-500,
-    superTitleBg: $beacon-white,
-    superTitleColor: $beacon-dark-blue-300,
-  ),
-  dark: (
-    filterBackground: $beacon-gray-700,
-    filterBorder: $beacon-gray-400,
-    filterShadow: none,
-    filterSearchIcon: $beacon-gray-300,
-    filterChip: $beacon-dark-blue-400,
-    filterChipText: $beacon-gray-300,
-    filterDropdownFocus: $beacon-gray-600,
-    filterDropdownText: $beacon-green-650,
-    showingRowBg: $beacon-gray-700,
-    showingRowColor: $beacon-green-650,
-    superTitleBg: $beacon-gray-700,
-    superTitleColor: $beacon-gray-300,
-  ),
-  highcontrast: (
-    filterBackground: $beacon-black,
-    filterBorder: $beacon-white,
-    filterShadow: none,
-    filterSearchIcon: $beacon-white,
-    filterChip: $highcontrast-bright-green-300,
-    filterChipText: $beacon-black,
-    filterDropdownFocus: $highcontrast-bright-blue-200,
-    filterDropdownText: $highcontrast-bright-green-200,
-    showingRowBg: $beacon-black,
-    showingRowColor: $highcontrast-bright-green-200,
-    superTitleBg: $beacon-black,
-    superTitleColor: $beacon-white,
-  )
-);
-
-$min-filter-input-width: calc(1em * 11);
-$max-filter-input-width: calc(1em * 15);
-$date-filter-min-width: calc(1em * 5);
-$date-filter-width: calc(1em * 8);
-
-.filter-bar {
-  @include themify($platform_filter_contrasts) {
-    border: 0.5px solid apply('filterBorder');
-    box-shadow: apply('filterShadow');
-  }
-  border-radius: 3px;
-  height: 57px;
-
-  .row.filter-row {
-    height: 54px;
-  }
-
-  &__nested {
-    height: auto;
-  }
-
-  &--table-header {
-    @include themify($platform_filter_contrasts) {
-      border-color: apply('filterBorder');
-      border-style: solid;
-      border-width: 0.5px 0.5px 0.5px 0.5px;
-    }
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    height: auto;
-
-    // Optional row with larger title and some extra filter/list actions above the filter form
-    .supertitle-row {
-      @include themify($platform_filter_contrasts) {
-        background: apply('superTitleBg');
-        border-bottom: 0.5px solid apply('filterBorder');
-
-        .supertitle {
-          color: apply('superTitleColor');
-        }
-      }
-      border-top-left-radius: inherit;
-      border-top-right-radius: inherit;
-      display: flex;
-      height: auto;
-      min-height: 48px;
-      padding: 12px 16px;
-
-      .supertitle {
-        @include font-size--md;
-      }
-    }
-
-    .form-row {
-      @include themify($platform_filter_contrasts) {
-        background: apply('filterBackground');
-      }
-      display: flex;
-      height: auto;
-      min-height: 48px;
-      padding: 8px 16px;
-      border-top-left-radius: inherit;
-      border-top-right-radius: inherit;
-
-      .form {
-        display: flex;
-        align-items: center;
-        flex-grow: 1;
-
-        .filter-container {
-          display: flex;
-          margin-left: 32px;
-        }
-      }
-
-      .ng-select-container {
-        width: auto;
-        border: none !important;
-      }
-    }
-
-    .showing-row {
-      @include font-color--default;
-      @include themify($platform_filter_contrasts) {
-        border-top: 0.5px solid apply('filterBorder');
-        background: apply('showingRowBg');
-      }
-      padding: 6px 8px;
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      height: auto;
-      min-height: 40px;
-
-      .showing-label {
-        @include font-size--default-md;
-        @include themify($platform_filter_contrasts) {
-          color: apply('showingRowColor');
-        }
-
-        &:first-of-type {
-          padding-left: 8px;
-        }
-      }
-
-      .filter-chip-label {
-        @include font-size--default-md;
-        @include font-color--semi-muted;
-        margin-left: 8px;
-      }
-
-      .filter-chip {
-        @include font-size--default-md;
-        @include font-weight--semibold;
-        @include themify($platform_filter_contrasts) {
-          background: apply('filterChip');
-          color: apply('filterChipText');
-        }
-
-        border-radius: 2px;
-        height: 25px;
-        margin-left: 4px;
-        padding-left: .25rem;
-        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;
-        }
-      }
-    }
-  }
-}
-
-.filter-input {
-  font-size: 14px;
-  min-width: $min-filter-input-width;
-  max-width: $max-filter-input-width;
-  padding-left: 26px;
-}
-
-.date-filter {
-  min-width: $date-filter-min-width;
-  max-width: $date-filter-width;
-}
-
-.search-icon {
-  width: 0px;
-  &::before {
-    @include themify($platform_filter_contrasts) {
-      color: apply('filterSearchIcon');
-    }
-    content: "search";
-    font-family: "Material Icons";
-    font-size: 16px;
-    position: relative;
-    left: 8px;
-    top: 0.4rem;
-    z-index: 99;
-  }
-}
-
-// popover stuff
-.popover.table-filters {
-  max-width: unset;
-  top: 8px !important;
-}
-
-.table-filters {
-  @include card-shadow;
-  @include themify($platform_filter_contrasts) {
-    background: apply('filterBackground');
-  }
-  width: 200px;
-
-  .popover-arrow {
-    display: none;
-  }
-}
+$platform_filter_contrasts: (
+  light: (
+    filterBackground: $beacon-dark-blue-50,
+    filterBorder: $beacon-gray-border,
+    filterShadow: 0px 3px 3px $beacon-black,
+    filterSearchIcon: $beacon-gray-400,
+    filterChip: $beacon-green-100,
+    filterChipText: $beacon-black,
+    filterDropdownFocus: $beacon-dark-blue-200,
+    filterDropdownText: $beacon-cyan-600,
+    showingRowBg: $beacon-white,
+    showingRowColor: $beacon-green-500,
+    superTitleBg: $beacon-white,
+    superTitleColor: $beacon-dark-blue-300,
+  ),
+  dark: (
+    filterBackground: $beacon-gray-700,
+    filterBorder: $beacon-gray-400,
+    filterShadow: none,
+    filterSearchIcon: $beacon-gray-300,
+    filterChip: $beacon-dark-blue-400,
+    filterChipText: $beacon-gray-300,
+    filterDropdownFocus: $beacon-gray-600,
+    filterDropdownText: $beacon-green-650,
+    showingRowBg: $beacon-gray-700,
+    showingRowColor: $beacon-green-650,
+    superTitleBg: $beacon-gray-700,
+    superTitleColor: $beacon-gray-300,
+  ),
+  highcontrast: (
+    filterBackground: $beacon-black,
+    filterBorder: $beacon-white,
+    filterShadow: none,
+    filterSearchIcon: $beacon-white,
+    filterChip: $highcontrast-bright-green-300,
+    filterChipText: $beacon-black,
+    filterDropdownFocus: $highcontrast-bright-blue-200,
+    filterDropdownText: $highcontrast-bright-green-200,
+    showingRowBg: $beacon-black,
+    showingRowColor: $highcontrast-bright-green-200,
+    superTitleBg: $beacon-black,
+    superTitleColor: $beacon-white,
+  )
+);
+
+$min-filter-input-width: calc(1em * 11);
+$max-filter-input-width: calc(1em * 13.2);
+$date-filter-min-width: calc(1em * 5);
+$date-filter-width: calc(1em * 8);
+
+.filter-bar {
+  @include themify($platform_filter_contrasts) {
+    border: 0.5px solid apply('filterBorder');
+    box-shadow: apply('filterShadow');
+  }
+  border-radius: 3px;
+  height: 57px;
+
+  .row.filter-row {
+    height: 54px;
+  }
+
+  &__nested {
+    height: auto;
+  }
+
+  &--table-header {
+    @include themify($platform_filter_contrasts) {
+      border-color: apply('filterBorder');
+      border-style: solid;
+      border-width: 0.5px 0.5px 0.5px 0.5px;
+    }
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    height: auto;
+
+    // Optional row with larger title and some extra filter/list actions above the filter form
+    .supertitle-row {
+      @include themify($platform_filter_contrasts) {
+        background: apply('superTitleBg');
+        border-bottom: 0.5px solid apply('filterBorder');
+
+        .supertitle {
+          color: apply('superTitleColor');
+        }
+      }
+      border-top-left-radius: inherit;
+      border-top-right-radius: inherit;
+      display: flex;
+      height: auto;
+      min-height: 48px;
+      padding: 12px 16px;
+
+      .supertitle {
+        @include font-size--md;
+      }
+    }
+
+    .form-row {
+      @include themify($platform_filter_contrasts) {
+        background: apply('filterBackground');
+      }
+      display: flex;
+      height: auto;
+      min-height: 48px;
+      padding: 8px 16px;
+      border-top-left-radius: inherit;
+      border-top-right-radius: inherit;
+
+      .form {
+        display: flex;
+        align-items: center;
+        flex-grow: 1;
+
+        .filter-container {
+          display: flex;
+          margin-left: 16px;
+        }
+      }
+
+      .ng-select-container {
+        width: auto;
+        border: none !important;
+      }
+    }
+
+    .showing-row {
+      @include font-color--default;
+      @include themify($platform_filter_contrasts) {
+        border-top: 0.5px solid apply('filterBorder');
+        background: apply('showingRowBg');
+      }
+      padding: 6px 8px;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      height: auto;
+      min-height: 40px;
+
+      .showing-label {
+        @include font-size--default-md;
+        @include themify($platform_filter_contrasts) {
+          color: apply('showingRowColor');
+        }
+
+        &:first-of-type {
+          padding-left: 8px;
+        }
+      }
+
+      .filter-chip-label {
+        @include font-size--default-md;
+        @include font-color--semi-muted;
+        margin-left: 8px;
+      }
+
+      .filter-chip {
+        @include font-size--default-md;
+        @include font-weight--semibold;
+        @include themify($platform_filter_contrasts) {
+          background: apply('filterChip');
+          color: apply('filterChipText');
+        }
+
+        border-radius: 2px;
+        height: 25px;
+        margin-left: 4px;
+        padding-left: .25rem;
+        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;
+        }
+      }
+    }
+  }
+}
+
+.filter-input {
+  font-size: 14px;
+  min-width: $min-filter-input-width;
+  max-width: $max-filter-input-width;
+  padding-left: 26px;
+}
+
+.date-filter {
+  min-width: $date-filter-min-width;
+  max-width: $date-filter-width;
+}
+
+.search-icon {
+  width: 0px;
+  &::before {
+    @include themify($platform_filter_contrasts) {
+      color: apply('filterSearchIcon');
+    }
+    content: "search";
+    font-family: "Material Icons";
+    font-size: 16px;
+    position: relative;
+    left: 8px;
+    top: 0.4rem;
+    z-index: 99;
+  }
+}
+
+// popover stuff
+.popover.table-filters {
+  max-width: unset;
+  top: 8px !important;
+}
+
+.table-filters {
+  @include card-shadow;
+  @include themify($platform_filter_contrasts) {
+    background: apply('filterBackground');
+  }
+  width: 200px;
+
+  .popover-arrow {
+    display: none;
+  }
+}

package/styles/_layout.scss

@@ -94,7 +94,7 @@ $detail-header-height: 78px;
 $min-detail-width: 1400px;
 $leftnav-width: 212px;
 $leftnav-collapsed-width: 50px;
-$detail-sidebar-width: 300px;
+$detail-sidebar-width: 212px;
 
 $detail-container-padding: 1rem;
 $detail-view-width: calc(100vw - $leftnav-width);
@@ -106,11 +106,35 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
   width: calc(100vw - $leftnav-width);
   transition: all 0.5s ease-in-out;
 
+  &:not(.main-view-container--expanded) .detail-view-container .list-view-container.nested-list-container {
+    width: calc(100vw - 212px - 32px) !important;
+  }
+
+  &:not(.main-view-container--expanded) .drawer__body.search__drawer {
+    width: calc(100vw - 212px);
+    position: relative;
+    left: calc(162px);
+  }
+
+  .detail-view-container .detail__body .detail__body__section .list-view-container.nested-list-container {
+    width: 100% !important;
+  }
+
   &--expanded {
     left: calc(#{$leftnav-collapsed-width});
     width: calc(100vw - $leftnav-collapsed-width);
     transition: all 0.5s ease-in-out;
 
+    .detail-view-container .list-view-container.nested-list-container {
+      width: calc(100vw - 50px - 32px);
+    }
+
+    .drawer__body.search__drawer {
+      position: relative;
+      left: 0;
+      width: calc(100vw - 50px);
+    }
+
     .list-view-container, .detail-view-container, .navbar__header {
       width: calc(100vw - $leftnav-collapsed-width);
       transition: all 0.5s ease-in-out;
@@ -301,8 +325,25 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
       .header-text {
         display: flex;
         align-items: center;
-        white-space: pre-wrap;
 
+        .header-prefix, .header-suffix {
+          flex: 0 0 auto;
+          text-wrap: nowrap;
+          display: flex;
+          align-items: center;
+        }
+
+        .header-suffix {
+          margin-left: auto;
+        }
+
+        .header-body {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          flex: 0 1 auto;
+        }
+        
         .pending-request-warning {
           position: relative;
           top: 12px;
@@ -316,7 +357,7 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
               height: 16px;
               width: 16px;
               font-size: 16px !important;
-              margin-right: 0px !important;
+              margin-right: 4px !important;
             }
           }
         }
@@ -359,11 +400,11 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
         position: relative;
         top: -16px;
         transition: width 0.5s ease-in-out;
-        width: calc(100vw - $detail-sidebar-width - $leftnav-width - 32px);
+        width: calc(100vw - $detail-sidebar-width - $leftnav-width - 24px);
 
         &--expanded {
           transition: width 0.5s ease-in-out;
-          width: calc(100vw - $detail-sidebar-width - $leftnav-collapsed-width - 32px);
+          width: calc(100vw - $detail-sidebar-width - $leftnav-collapsed-width - 24px);
         }
       }
 
@@ -373,7 +414,7 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
           border-left: apply('containerSidebarBorderLeft')
         }
         height: calc(100vh - $header-height - $detail-header-height);
-        margin-left: 16px;
+        margin-left: 12px;
         overflow-y: auto;
         padding: 16px;
         position: fixed;
@@ -414,9 +455,9 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
         border: 1px solid apply('containerBorder');
       }
       border-radius: 5px;
-      margin-bottom: 16px;
+      margin-bottom: 12px;
       min-height: 80px;
-      padding: 12px 16px;
+      padding: 12px;
       width: 100%;
 
       &__title {
@@ -458,17 +499,17 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
   margin-top: 50px;
   height: calc(100vh - $header-height);
   width: calc(100vw - $leftnav-width);
-  min-width: 800px;
+  min-width: 600px;
   overflow-y: scroll;
-  transition: all 0.5s ease-in-out;
+  transition: width 0.5s ease-in-out !important;
 
   &.nested-list-container {
     box-shadow: none;
     margin-top: 0px !important;
     padding: 0px !important;
-    width: 100%;
     height: calc(100vh - ($header-height + $detail-header-height + 1rem));  // Container fluid padding: 1rem
-    transition: none;
+    width: 100%;
+    transition: width 0.5s ease-in-out !important;
   }
 }
 
@@ -517,3 +558,7 @@ $detail-view-width-expanded: calc(100vw - $leftnav-collapsed-width);
     }
   }
 }
+
+.drawer__body.search__drawer {
+  transition: all 0.5s ease-in-out;
+}

package/styles/_material-drawer.scss

@@ -32,7 +32,7 @@ $platform_drawer_contrasts: (
   }
 
   &--width-double {
-    width: 1180px !important;
+    width: 1133px !important;
   }
 
   &--width-full {
@@ -41,6 +41,10 @@ $platform_drawer_contrasts: (
 
   &__body {
     padding: 32px;
+
+    .form__group {
+      margin-bottom: 12px;
+    }
   }
 
   .cui-banner &__body {

package/styles/_ng-select.scss

@@ -43,6 +43,7 @@ $min-dropdown-panel-width: 215px;
   .ng-dropdown-panel {
     min-width: $min-dropdown-panel-width;
     max-height: 200px;
+    width: fit-content;
 
     .ng-dropdown-panel-items .ng-option {
       display: flex;

package/styles/_tables.scss

@@ -4,7 +4,7 @@ $platform_table_contrasts: (
   light: (
     tableBorder: $beacon-gray-border,
     tableHeader: $beacon-dark-blue-100,
-    tableHeaderText: $beacon-black,
+    tableHeaderText: $beacon-gray-400,
     tableSortArrow: $beacon-gray-300,
     tableSortArrowActive: $beacon-blue-200,
     tableHeaderFiltering: $beacon-green-300,
@@ -84,6 +84,7 @@ table.platform-table {
         border-left: 0.5px solid apply('tableBorder');
         border-bottom: 0.5px solid apply('tableBorder');
         color: apply('tableHeaderText');
+        @include font-weight--semibold;
 
         &:last-of-type {
           border-right: 0.5px solid apply('tableBorder');