@beacon-interactive-systems-llc/beacon-platform-ui 19.0.19 → 19.1.1

package/package.json

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

package/styles/_buttons.scss

@@ -38,7 +38,9 @@ $platform_button_contrasts: (
     buttonDisabledText: $beacon-white,
     buttonDisabledBorder: 1px solid $beacon-gray-300,
     buttonShadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16),
-    buttonBorder: $beacon-gray-border
+    buttonBorder: $beacon-gray-border,
+
+    buttonIconColor: $beacon-dark-blue-300
   ),
   dark: (
     buttonBlue: $beacon-blue-200,
@@ -79,7 +81,9 @@ $platform_button_contrasts: (
     buttonDisabledText: $beacon-gray-600,
     buttonDisabledBorder: 1px solid $beacon-gray-600,
     buttonShadow: none,
-    buttonBorder: $beacon-gray-border
+    buttonBorder: $beacon-gray-border,
+
+    buttonIconColor: $beacon-dark-blue-400
   ),
   highcontrast: (
     buttonBlue: $highcontrast-bright-blue-200,
@@ -120,7 +124,9 @@ $platform_button_contrasts: (
     buttonDisabledText: $beacon-black,
     buttonDisabledBorder: 1px solid $beacon-gray-500,
     buttonShadow: none,
-    buttonBorder: $beacon-gray-border
+    buttonBorder: $beacon-gray-border,
+
+    buttonIconColor: $highcontrast-bright-blue-300
   )
 );
 
@@ -159,6 +165,16 @@ $platform_button_contrasts: (
   }
 }
 
+@mixin hover-button-styles($hover, $text) {
+  background: apply('buttonAmbient');
+  color: apply('buttonAmbientText');
+
+  &:hover, &:active  {
+    background: $hover;
+    color: $text;
+  }
+}
+
 button.platform-btn {
   height: 32px;
   min-width: 48px;
@@ -218,18 +234,36 @@ button.platform-btn {
     }
   }
 
+  &--hover-blue {
+    @include themify($platform_button_contrasts) {
+      @include hover-button-styles(apply('buttonBlue'), apply('buttonBlueText'));
+    }
+  }
+
   &--bg-green {
     @include themify($platform_button_contrasts) {
       @include button-color-styles(apply('buttonGreen'), apply('buttonGreenHover'), apply('buttonGreenActive'), apply('buttonGreenText'));
     }
   }
 
+  &--hover-green {
+    @include themify($platform_button_contrasts) {
+      @include hover-button-styles(apply('buttonGreen'), apply('buttonGreenText'));
+    }
+  }
+
   &--bg-red {
     @include themify($platform_button_contrasts) {
       @include button-color-styles(apply('buttonRed'), apply('buttonRedHover'), apply('buttonRedActive'), apply('buttonRedText'));
     }
   }
 
+  &--hover-red {
+    @include themify($platform_button_contrasts) {
+      @include hover-button-styles(apply('buttonRed'), apply('buttonRedText'));
+    }
+  }
+
   &--bg-ambient {
     @include themify($platform_button_contrasts) {
       background: apply('buttonAmbient');
@@ -264,15 +298,6 @@ button.platform-btn {
     }
   }
 
-  &:disabled {
-    @include themify($platform_button_contrasts) {
-      background: apply('buttonDisabled');
-      color: apply('buttonDisabledText');
-      border: apply('buttonDisabledBorder');
-      box-shadow: none !important;
-    }
-  }
-
   mat-icon {
     font-size: 12px;
     height: 12px;
@@ -282,6 +307,26 @@ button.platform-btn {
     width: 12px;
   }
 
+  &--icon {
+    @include themify($platform_button_contrasts) {
+      color: apply('buttonIconColor');
+    }
+    border: none;
+    border-radius: 4px;
+    min-width: unset;
+    padding: 2px 4px;
+    top: 4px;
+  }
+
+  &:disabled {
+    @include themify($platform_button_contrasts) {
+      background: apply('buttonDisabled');
+      color: apply('buttonDisabledText');
+      border: apply('buttonDisabledBorder');
+      box-shadow: none !important;
+    }
+  }
+
   span.text {
     position: relative;
     left: 2px;

package/styles/_filters.scss

@@ -44,6 +44,7 @@ $platform_filter_contrasts: (
 );
 
 $min-filter-input-width: calc(1em * 11);
+$min-filter-input-width-wide: calc(1.2em * 12.3);
 $max-filter-input-width: calc(1em * 13.2);
 $date-filter-min-width: calc(1em * 5);
 $date-filter-width: calc(1em * 8);
@@ -74,6 +75,10 @@ $date-filter-width: calc(1em * 8);
     border-top-right-radius: 5px;
     height: auto;
 
+    &.standalone {
+      border-radius: 10px;
+    }
+
     // Optional row with larger title and some extra filter/list actions above the filter form
     .supertitle-row {
       @include themify($platform_filter_contrasts) {
@@ -104,8 +109,7 @@ $date-filter-width: calc(1em * 8);
       height: auto;
       min-height: 48px;
       padding: 8px 16px;
-      border-top-left-radius: inherit;
-      border-top-right-radius: inherit;
+      border-radius: inherit;
 
       .form {
         display: flex;
@@ -187,6 +191,10 @@ $date-filter-width: calc(1em * 8);
   min-width: $min-filter-input-width;
   max-width: $max-filter-input-width;
   padding-left: 26px;
+
+  &.wide {
+    min-width: $min-filter-input-width-wide !important;
+  }
 }
 
 .date-filter {

package/styles/_notes.scss

@@ -1,18 +1,113 @@
 $platform_note_contrasts: (
   light: (
     letterCircleBackground: $beacon-gray-400,
-    letterCircleText: $beacon-gray-100
+    letterCircleText: $beacon-gray-100,
+    noteSubjectRowBorder: $beacon-dark-blue-200,
+    noteSubjectRowBackground: $beacon-dark-blue-50,
+    noteInfoText: $beacon-dark-blue-400,
   ),
   dark: (
     letterCircleBackground: $beacon-gray-500,
-    letterCircleText: $beacon-gray-200
+    letterCircleText: $beacon-gray-200,
+    noteSubjectRowBorder: $beacon-gray-400,
+    noteSubjectRowBackground: $beacon-dark-blue-700,
+    noteInfoText: $beacon-dark-blue-300,
   ),
   highcontrast: (
     letterCircleBackground: $beacon-gray-600,
-    letterCircleText: $beacon-white
+    letterCircleText: $beacon-white,
+    noteSubjectRowBorder: $beacon-white,
+    noteSubjectRowBackground: $beacon-black,
+    noteInfoText: $highcontrast-bright-blue-300,
   )
 );
 
+.note-widget {
+  border-radius: 10px !important;
+  margin-top: 16px;
+  padding: 0px !important;
+
+  .note-subject-row {
+    @include themify($platform_note_contrasts) {
+      background: apply('noteSubjectRowBackground');
+      border-bottom: 1px solid apply('noteSubjectRowBorder');
+    }
+    border-top-left-radius: 9px;
+    border-top-right-radius: 9px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+
+    .note-subject {
+      @include font-weight--bold;
+      width: auto;
+    }
+
+    .note-subject-input {
+      flex-grow: 1;
+      padding-right: 16px;
+
+      .note-subject-control {
+        @include font-color--default;
+        @include font-weight--bold;
+        border: none;
+        background: transparent;
+        width: 100%;
+      }
+    }
+
+    .note-info {
+      @include themify($platform_note_contrasts) {
+        color: apply('noteInfoText');
+      }
+      display: flex;
+      align-items: center;
+      width: auto;
+
+      .note-actions {
+        display: inline;
+        margin-left: 32px;
+      }
+
+      ng-select, ng-dropdown-panel {
+        width: 175px !important;
+        min-width: unset;
+      }
+    }
+  }
+
+  .note-content-row {
+    padding: 16px;
+    position: relative;
+
+    &.editing-note {
+      padding: 0px;
+    }
+
+    .note-editor-buttons {
+      display: flex;
+      gap: 8px;
+      justify-content: space-between;
+      position: absolute;
+      top: 8px;
+      right: 10px;
+    }
+
+    quill-editor.note-form-editor {
+      .ql-toolbar, .ql-container {
+        border: none;
+      }
+
+      &:has(.ql-editor:focus) {
+        .ql-toolbar {
+          border: none !important;
+        }
+      }
+    }
+  }
+}
+
 .note {
   &__initials {
     display: inline;

package/styles/_quill.scss

@@ -82,6 +82,14 @@ quill-editor {
         min-height: 80px;
       }
     }
+
+    &.tall-editor .ql-container .ql-editor {
+      min-height: 500px;
+
+      @media (min-width: 1024px) and (max-width: 1024px) {
+        min-height: 330px;
+      }
+    }
   }
 
   &.inline-editor {