novo-elements 8.0.1 → 8.1.0-next.2

package/elements/tabbed-group-picker/TabbedGroupPicker.scss

@@ -1,162 +1,164 @@
 @import "../../styles/variables";
 
-.tabbed-group-picker-button {
-  .tabbed-group-picker-button-label {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    min-width: 100px;
-    width: 100%;
+:host {
+  .tabbed-group-picker-button {
+    .tabbed-group-picker-button-label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 100px;
+      width: 100%;
+    }
   }
 }
 
-.tabbed-group-picker-search {
-  width: 100%;
-  padding: 0.5em;
-  border-bottom: 0.1em solid #ccc;
-  position: relative;
-  input {
-    font-size: 1.2em;
-    background: transparent;
-    border: none;
-    border-radius: 0;
-    outline: none;
-    height: 2rem;
-    width: 95%;
-    margin: 0 0 0 1em;
-    padding: 0;
-    box-shadow: none;
-    box-sizing: content-box;
-    transition: all 300ms;
-    color: $dark;
-    &::placeholder {
-      color: var(--form-placeholder);
+::ng-deep .dropdown-container {
+  .tabbed-group-picker-search {
+    width: 100%;
+    padding: 0.5em;
+    border-bottom: 0.1em solid #ccc;
+    position: relative;
+    input {
+      background: transparent;
+      border: none;
+      border-radius: 0;
+      outline: none;
+      height: 2rem;
+      width: 95%;
+      padding: 0;
+      box-shadow: none;
+      box-sizing: content-box;
+      transition: all 300ms;
+      color: $dark;
+      &::placeholder {
+        color: var(--form-placeholder);
+      }
+    }
+    i.bhi-search,
+    i.bhi-times {
+      position: absolute;
+      bottom: 1em;
+      right: 0.5em;
+      color: $grey;
+      font-size: 1.2rem;
+      margin-right: 1em;
+    }
+    i.bhi-times {
+      cursor: pointer;
     }
   }
-  i.bhi-search,
-  i.bhi-times {
-    position: absolute;
-    bottom: 1em;
-    right: 0.5em;
-    color: $grey;
-    font-size: 1.2rem;
-    margin-right: 1em;
-  }
-  i.bhi-times {
-    cursor: pointer;
-  }
-}
-
-.tabbed-group-picker-column-container {
-  display: flex;
-  flex-direction: row;
 
-  .tabbed-group-picker-column {
+  .tabbed-group-picker-column-container {
     display: flex;
-    flex-direction: column;
-    align-items: center;
+    flex-direction: row;
 
-    &.left {
-      border-right: 1px solid $light;
-      justify-content: space-between;
+    .tabbed-group-picker-column {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
 
-      .clear-all-button {
-        margin-bottom: 0.5em;
-      }
+      &.left {
+        border-right: 1px solid $light;
+        justify-content: space-between;
 
-      novo-nav {
-        overflow: auto;
+        .clear-all-button {
+          margin-bottom: 0.5em;
+        }
 
-        > novo-tab {
-          min-height: 3em;
+        novo-nav {
+          overflow: auto;
 
-          > .novo-tab-link {
-            max-width: 100%;
-            height: 100%;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-          }
-          &.active {
-            .novo-tab-link {
-              font-weight: 400;
+          > novo-tab {
+            min-height: 3em;
+
+            > .novo-tab-link {
+              max-width: 100%;
+              height: 100%;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
             }
-            &:hover {
+            &.active {
               .novo-tab-link {
                 font-weight: 400;
-                color: $positive;
+              }
+              &:hover {
+                .novo-tab-link {
+                  font-weight: 400;
+                  color: $positive;
+                }
               }
             }
-          }
-          &:hover {
-            .novo-tab-link {
-              font-weight: 400;
-              color: $black;
-              opacity: 1;
+            &:hover {
+              .novo-tab-link {
+                font-weight: 400;
+                color: $black;
+                opacity: 1;
+              }
             }
           }
         }
       }
-    }
-
-    &.right {
-      display: block;
-      width: 23em;
-      overflow: hidden;
 
-      .quick-select {
-        font-weight: 500;
+      &.right {
+        display: block;
+        width: 23em;
+        overflow: hidden;
 
-        .quick-select-label {
-          padding: 0.7em 1.9em 0 1.9em;
-          background: lighten($light, 10%);
-          text-transform: uppercase;
-          font-size: 0.8em;
-        }
+        .quick-select {
+          font-weight: 500;
 
-        .quick-select-list {
-          .quick-select-item {
+          .quick-select-label {
+            padding: 0.7em 1.9em 0 1.9em;
             background: lighten($light, 10%);
-            padding: 0.5em 1.75em;
-            border-bottom: none;
+            text-transform: uppercase;
+            font-size: 0.8em;
           }
-        }
-      }
-      novo-optgroup {
-        cdk-virtual-scroll-viewport {
-          height: 27em;
-          overflow-x: hidden;
-          @media (max-height: 720px) {
-            height: 18em;
+
+          .quick-select-list {
+            .quick-select-item {
+              background: lighten($light, 10%);
+              padding: 0.5em 1.75em;
+              border-bottom: none;
+            }
           }
         }
+        novo-optgroup {
+          cdk-virtual-scroll-viewport {
+            height: 27em;
+            overflow-x: hidden;
+            @media (max-height: 720px) {
+              height: 18em;
+            }
+          }
 
-        novo-option {
-          &:hover.novo-option-inert {
-            background: var(--background-main, rgba($ocean, 0.1));
+          novo-option {
+            &:hover.novo-option-inert {
+              background: var(--background-main, rgba($ocean, 0.1));
+            }
           }
         }
-      }
 
-      .tabbed-group-picker-empty-item {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        color: $grey;
-        width: 100%;
-        height: 27em;
-
-        i {
-          padding-bottom: 0.2em;
-          font-size: 3em;
-        }
-        .empty-item-main-message {
-          font-weight: 500;
-          color: $dark;
-        }
-        .empty-item-sub-message {
-          font-size: 0.9em;
+        .tabbed-group-picker-empty-item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          color: $grey;
+          width: 100%;
+          height: 27em;
+
+          i {
+            padding-bottom: 0.2em;
+            font-size: 3em;
+          }
+          .empty-item-main-message {
+            font-weight: 500;
+            color: $dark;
+          }
+          .empty-item-sub-message {
+            font-size: 0.9em;
+          }
         }
       }
     }

package/elements/table/extras/table-footer/table-footer.scss

@@ -0,0 +1,3 @@
+:host {
+  display: flex;
+}

package/elements/table/extras/table-header/table-header.scss

@@ -0,0 +1,9 @@
+:host {
+  padding: 10px;
+  ::ng-deep button {
+    margin-right: 10px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}

package/elements/tabs/tab-button.scss

@@ -0,0 +1,54 @@
+@import "../common/typography/text.mixins";
+
+:host {
+  padding: var(--spacing-md);
+  cursor: pointer;
+  transition: all 120ms ease-in-out;
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    &:hover {
+      opacity: 0.5;
+    }
+  }
+}
+
+// inside color
+:host-context(novo-nav[theme="neutral"]),
+:host-context(novo-nav[theme="color"]) {
+  color: rgba(255, 255, 255, 0.75);
+  &.active {
+    color: #fff;
+    background: rgba(0, 0, 0, 0.2);
+  }
+  &:hover {
+    background: rgba(0, 0, 0, 0.1);
+  }
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    &:hover {
+      opacity: 0.5;
+    }
+  }
+}
+
+:host-context(novo-nav[theme="white"]) {
+  color: var(--color-text);
+  opacity: 0.75;
+  &.active {
+    color: var(--color-selection);
+    background: rgba(0, 0, 0, 0.05);
+    opacity: 1;
+  }
+  &:hover {
+    opacity: 1;
+  }
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    &:hover {
+      opacity: 0.5;
+    }
+  }
+}

package/elements/tabs/tab-content.scss

@@ -0,0 +1,6 @@
+:host {
+  display: none;
+  &.active {
+    display: block;
+  }
+}

package/elements/tabs/tab-header.scss

@@ -0,0 +1,6 @@
+:host {
+  display: block;
+  padding: var(--spacing-sm);
+  margin: var(--spacing-sm);
+  border: 1px solid #333;
+}

package/elements/tabs/tab-nav.scss

@@ -0,0 +1,39 @@
+@import "../common/typography/text.mixins";
+
+:host {
+  padding: 0;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 0;
+
+  &[type="button-bar"] {
+    display: inline-flex;
+    border-radius: 3px;
+    border: 2px solid #fff;
+  }
+
+  &[theme="neutral"], // temporarily added back for backwards compatibility
+  &[theme="color"] {
+    background: rgba(0, 0, 0, 0.2);
+    &[type="button-bar"] {
+      border: 2px solid #fff;
+    }
+  }
+
+  &[theme="white"] {
+    background-color: $white;
+    &[direction="vertical"] {
+      background: transparent;
+    }
+    &[type="button-bar"] {
+      border: 2px solid $light;
+    }
+  }
+
+  &[direction="vertical"] {
+    flex-direction: column;
+    width: auto;
+  }
+}

package/elements/tabs/tab-outlet.scss

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/elements/tabs/tab.scss

@@ -0,0 +1,190 @@
+@import "../common/typography/text.mixins.scss";
+
+:host {
+  @include theme-text-colors();
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  position: relative;
+  &.disabled {
+    .novo-tab-link {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    &:hover {
+      .novo-tab-link {
+        opacity: 0.5;
+      }
+    }
+  }
+  .novo-tab-link {
+    @include novo-label-text();
+    font-size: var(--font-size-tab);
+    padding: $spacing-md;
+    display: flex;
+    align-items: center;
+    gap: $spacing-xs;
+    cursor: pointer;
+    text-transform: uppercase;
+    &:focus {
+      outline: none;
+    }
+  }
+  .indicator {
+    position: absolute;
+    bottom: 0;
+    width: 0;
+    height: 3px;
+    display: block;
+    background: transparent;
+    transition: all 220ms ease-in-out;
+  }
+  &.active,
+  &.router-link-active {
+    .novo-tab-link {
+      opacity: 1;
+      font-weight: 500;
+    }
+    .indicator {
+      background: var(--focus);
+      width: 100%;
+    }
+  }
+  &:hover {
+    .novo-tab-link {
+      opacity: 1;
+    }
+  }
+  &:focus {
+    outline: none;
+  }
+}
+
+:host-context(novo-nav[direction="vertical"]) {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  min-width: 12rem;
+  justify-content: space-between;
+  transition: all 120ms ease-in-out;
+  .novo-tab-link {
+    order: 2;
+    flex: 1;
+    width: 100%;
+    display: flex;
+    flex-flow: row nowrap;
+    gap: $spacing-xs;
+    max-width: 90%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    opacity: 0.75;
+  }
+  .indicator {
+    order: 1;
+    width: 4px;
+    height: 0;
+    display: block;
+    background: transparent;
+    transition: all 220ms ease-in-out;
+  }
+  &.active,
+  &.router-link-active {
+    background: rgba(0, 0, 0, 0.05);
+    .novo-tab-link {
+      opacity: 1;
+    }
+    .indicator {
+      height: 100%;
+      top: 0;
+      bottom: 0;
+    }
+  }
+  &:hover {
+    .novo-tab-link {
+      opacity: 1;
+    }
+  }
+  &.disabled {
+    .novo-tab-link {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    &:hover {
+      .novo-tab-link {
+        opacity: 0.5;
+      }
+    }
+  }
+}
+
+:host-context(novo-nav[theme="white"]) {
+  height: auto;
+  &.disabled {
+    .novo-tab-link {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    &:hover {
+      .novo-tab-link {
+        opacity: 0.5;
+        font-weight: 400;
+      }
+    }
+  }
+  .novo-tab-link {
+    color: var(--text-main);
+    opacity: 0.75;
+  }
+  &.active,
+  &.router-link-active {
+    color: var(--selection);
+    .novo-tab-link {
+      color: var(--selection);
+      opacity: 1;
+    }
+    .indicator {
+      background: currentColor;
+    }
+  }
+  &:hover {
+    .novo-tab-link {
+      font-weight: 500;
+    }
+  }
+}
+
+
+:host-context(novo-nav[theme="color"]),
+:host-context(novo-nav[theme="neutral"]) {
+  .novo-tab-link {
+    color: #fff;
+  }
+  &.active,
+  &.router-link-active {
+    .indicator {
+      background: #fff;
+    }
+  }
+  &.disabled {
+    .novo-tab-link {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    &:hover {
+      .novo-tab-link {
+        opacity: 0.5;
+      }
+    }
+  }
+}
+
+:host-context(novo-nav.condensed) {
+  font-size: 1rem;
+  .novo-tab-link {
+    padding: $spacing-sm;
+  }
+}

package/elements/tiles/Tiles.scss

@@ -1,4 +1,6 @@
-novo-tiles {
+@import "../../styles/variables.scss";
+
+:host {
   $border-width: 0.2em;
   $border-radius: 3px;
   $positive-lighter: lighten($positive, 20%);

package/elements/time-picker/TimePicker.scss

@@ -1,49 +1,6 @@
-novo-time-picker-input {
-  flex: 1;
-  position: relative;
-  display: block;
-  max-width: 130px;
-
-  &.disabled {
-    pointer-events: none;
-    opacity: 1;
-  }
-
-  input {
-    font-size: 1em;
-    border: none;
-    border-bottom: 1px solid var(--border);
-    background: transparent !important;
-    border-radius: 0;
-    outline: none;
-    height: 2rem;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    box-shadow: none;
-    box-sizing: content-box;
-    transition: all 300ms;
-    color: var(--text-main);
-
-    &:focus {
-      border-bottom: 1px solid var(--selection);
-    }
-  }
-  > i.bhi-clock,
-  > i.bhi-search,
-  > i.bhi-times,
-  > i.bhi-calendar {
-    position: absolute;
-    right: 0;
-    top: 0px;
-    font-size: 1.2rem;
-  }
-  > i.bhi-times {
-    cursor: pointer;
-  }
-}
+@import "../../styles/variables.scss";
 
-novo-time-picker {
+:host {
   display: block;
   // width: 250px;
   // min-width: 250px;
@@ -140,7 +97,7 @@ novo-time-picker {
       width: 50px;
       scroll-snap-align: start;
 
-      .list-item {
+      ::ng-deep .list-item {
         line-height: 19px;
       }
       &:focus,