novo-elements 8.0.1 → 9.0.0-next.1

package/elements/date-picker/DatePickerInput.scss

@@ -0,0 +1,45 @@
+@import "../../styles/variables.scss";
+
+:host {
+  flex: 1;
+  position: relative;
+  display: block !important;
+  &.disabled {
+    pointer-events: none;
+    opacity: 1;
+  }
+  input {
+    font-size: 1em;
+    border: none;
+    border-bottom: 1px solid $light;
+    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: $dark;
+    &:focus {
+      border-bottom: 1px solid $ocean;
+    }
+  }
+  span.error-text {
+    color: $negative;
+    padding-top: 10px;
+    flex: 1;
+    display: flex;
+  }
+  > i.bhi-clock,
+  > i.bhi-search,
+  > i.bhi-times,
+  > i.bhi-calendar {
+    position: absolute;
+    right: 0;
+    top: 0px;
+    font-size: 1.2rem;
+  }
+}

package/elements/date-picker/DateRangeInput.scss

@@ -0,0 +1,55 @@
+@import "../../styles/variables.scss";
+
+:host {
+  flex: 1;
+  position: relative;
+  // display: block;
+  display: flex;
+  flex-flow: row nowrap;
+  height: min-content;
+
+  &.disabled {
+    pointer-events: none;
+    opacity: 1;
+  }
+  .date-range-input-container {
+    position: relative;
+    height: min-content;
+  }
+  .date-range-input-divider {
+    font-weight: 800;
+    margin: 0 0.5em;
+    align-self: center;
+    height: min-content;
+  }
+
+  input {
+    font-size: 1em;
+    border: none;
+    border-bottom: 1px solid var(--border);
+    background: transparent !important;
+    border-radius: 0;
+    outline: none;
+    height: 2rem;
+    width: 9em;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    box-sizing: content-box;
+    transition: all 300ms;
+    color: var(--text-main);
+    &:focus {
+      border-bottom: 1px solid $ocean;
+    }
+  }
+  novo-icon {
+    position: absolute;
+    right: 0;
+    top: 0;
+    font-size: 1em;
+  }
+  novo-icon[size="small"] {
+    top: calc(50% - 0.75em);
+    font-size: 0.5em;
+  }
+}

package/elements/date-picker/MultiDateInput.scss

@@ -0,0 +1,50 @@
+@import "../../styles/variables.scss";
+@import "../chips/Chips";
+
+:host {
+  @extend chips;
+
+  .chip-input-container {
+    padding-top: 10px;
+    .placeholder {
+      color: var(--form-placeholder);
+    }
+  }
+
+  .panel-toggle {
+    padding: 0.2em;
+    i {
+      margin: 0px;
+    }
+    &.selected {
+      background: $light;
+      border-radius: 50%;
+    }
+  }
+
+  ul.summary {
+    display: inline;
+    list-style: none;
+    color: darken(#d2d2d2, 30%);
+    padding: 0 10px 0;
+
+    li {
+      display: inline;
+      padding: 0 3px;
+    }
+
+    li:after {
+      content: ", ";
+    }
+
+    li:last-child:after {
+      content: " ";
+    }
+  }
+
+  chip {
+    span {
+      text-transform: capitalize;
+    }
+  }
+}

package/elements/date-time-picker/DateTimePickerInput.scss

@@ -0,0 +1,14 @@
+:host {
+  flex: 1;
+  position: relative;
+  display: flex;
+  flex-flow: row nowrap;
+  max-width: 340px;
+
+  novo-date-picker-input {
+    margin-right: 20px;
+  }
+  novo-time-picker-input {
+    max-width: 130px;
+  }
+}

package/elements/date-time-picker/_DateTimePicker.scss

@@ -1,21 +1,8 @@
-$time-select-height: 45px;
-
-novo-date-time-picker-input {
-  flex: 1;
-  position: relative;
-  display: flex;
-  flex-flow: row nowrap;
-  max-width: 340px;
+@import "../../styles/variables.scss";
 
-  novo-date-picker-input {
-    margin-right: 20px;
-  }
-  novo-time-picker-input {
-    max-width: 130px;
-  }
-}
+$time-select-height: 45px;
 
-novo-date-time-picker {
+:host {
   display: block;
   width: min-content;
   overflow: hidden;
@@ -28,7 +15,7 @@ novo-date-time-picker {
     .view-container {
       position: relative;
     }
-    .time-picker {
+    ::ng-deep .time-picker {
       position: absolute;
       height: 100%;
       width: 100%;

package/elements/dropdown/Dropdown.scss

@@ -1,6 +1,6 @@
 @import "../common/typography/text.mixins";
 
-novo-dropdown {
+:host {
   display: inline-block;
   position: relative;
   outline: none;
@@ -8,8 +8,8 @@ novo-dropdown {
     cursor: pointer;
     -webkit-appearance: none;
   }
-  button,
-  novo-button {
+  ::ng-deep button,
+  ::ng-deep novo-button {
     position: relative;
     z-index: 0;
     .novo-button-icon {

package/elements/header/Header.scss

@@ -1,4 +1,7 @@
-.novo-header {
+@import "../../styles/variables.scss";
+@import "../common/typography/text.mixins.scss";
+
+:host {
   display: block;
   background-color: var(--background-bright, $white);
 
@@ -40,7 +43,7 @@
       max-width: calc(100% - 40px);
       gap: $spacing-sm;
 
-      novo-icon {
+      ::ng-deep novo-icon {
         margin-right: 1rem;
       }
     }
@@ -64,19 +67,19 @@
         padding-right: 20px;
       }
     }
-    > section {
+    > ::ng-deep section {
       flex: 2 2 250px;
       min-width: 100px;
     }
-    utils,
-    novo-utils {
+    ::ng-deep utils,
+    ::ng-deep novo-utils {
       display: flex;
       align-items: center;
       justify-content: flex-start;
       gap: $spacing-sm;
     }
 
-    .novo-action {
+    ::ng-deep .novo-action {
       display: flex;
     }
   }
@@ -85,7 +88,7 @@
     &.novo-accent-#{$name} {
       .header-titles,
       .header-title {
-        .novo-icon {
+        ::ng-deep .novo-icon {
           color: $color;
         }
       }
@@ -99,10 +102,10 @@
         color: $contrast;
         border-bottom: none;
       }
-      .novo-title {
+      ::ng-deep .novo-title {
         color: inherit;
       }
-      .novo-action {
+      ::ng-deep .novo-action {
         button,
         .novo-button {
           color: inherit;
@@ -114,7 +117,7 @@
   & > main {
     padding: 4px 16px 4px 32px;
   }
-  & > novo-nav {
+  & > ::ng-deep novo-nav {
     padding-left: 16px;
     &.block {
       padding-left: 0;
@@ -128,7 +131,7 @@
     > section {
       height: 3.6rem;
     }
-    .novo-icon {
+    ::ng-deep .novo-icon {
       margin-right: 0.5rem !important;
       font-size: 1.8rem;
     }
@@ -139,11 +142,3 @@
     flex-flow: row nowrap;
   }
 }
-
-header-spacer {
-  display: inline-block;
-  height: 1.8em;
-  width: 2px;
-  margin: 0 0.6em;
-  background-color: rgba(0, 0, 0, 0.25);
-}

package/elements/header/HeaderSpacer.scss

@@ -0,0 +1,7 @@
+:host {
+  display: inline-block;
+  height: 1.8em;
+  width: 2px;
+  margin: 0 0.6em;
+  background-color: rgba(0, 0, 0, 0.25);
+}

package/elements/icon/Icon.scss

@@ -8,7 +8,7 @@ $medium-icon-size: 1.8em;
 $large-icon-size: 2.1em;
 $icon-border-radius: 0.3em;
 
-novo-icon {
+:host {
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/elements/list/List.scss

@@ -1,4 +1,6 @@
-.novo-list {
+@import "../../styles/variables.scss";
+
+:host {
   display: flex;
   &.vertical-list {
     flex-direction: column;
@@ -6,122 +8,14 @@
   &.horizontal-list {
     flex-direction: row;
   }
-
-  a[list-item],
-  button[list-item],
-  .novo-list-item {
-    outline: none;
-    &:hover {
-      background: rgba($positive, 0.2);
-    }
-    &.active {
-      background: rgba($positive, 0.3);
-    }
-  }
-  @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
-    $contrast: getContrastColor($name);
-    &[theme="#{$name}"] {
-      .novo-list-item,
-      a[list-item],
-      button[list-item] {
-        background: $color;
-        color: $contrast;
-        border: unset;
-        border-bottom: 1px solid rgba(#fff, 0.1);
-        item-title h6,
-        i {
-          color: $contrast;
-        }
-        item-content {
-          > * {
-            color: rgba(#fff, 0.65);
-          }
-        }
-      }
-      a[list-item],
-      button[list-item] {
-        outline: none;
-        &:hover,
-        &:active {
-          background: lighten($color, 20%);
-        }
-      }
-    }
-  }
 }
 
+
 .novo-list-item,
 a[list-item],
 button[list-item] {
-  border-bottom: 1px solid var(--border, #f4f4f4);
-  padding: 1rem;
-  display: flex;
-  flex-direction: row;
-  &:last-child {
-    border-bottom: none;
-  }
-  .list-item {
-    display: flex;
-    flex-direction: column;
-    flex: 1 0 100%;
-  }
-  .novo-item-header {
-    .novo-item-header-container {
-      display: flex;
-      align-items: center;
-    }
-    .novo-item-avatar {
-      margin-right: 0.5em;
-      i {
-        @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
-          &.#{$name} {
-            color: $color;
-          }
-        }
-      }
-    }
-    .novo-item-title {
-      flex: 2 0 0;
-      h6 {
-        margin: 0;
-        color: #434343;
-        padding: 0;
-      }
-    }
-    .novo-item-header-end {
-      flex: 1 0 0;
-      text-align: right;
-    }
-  }
+
   .avatar .novo-item-content {
     margin-left: 2.7em;
   }
-  .novo-item-content {
-    display: flex;
-    margin-left: 0.2em;
-    > * {
-      color: rgba(#434343, 0.85);
-    }
-    i {
-      @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
-        &.#{$name} {
-          color: $color;
-        }
-      }
-    }
-    &.vertical-list {
-      flex-direction: column;
-    }
-    &.horizontal-list {
-      flex-direction: row;
-    }
-  }
-  .novo-item-end {
-    align-self: center;
-    flex: 1;
-    text-align: right;
-    i {
-      line-height: 1.4em;
-    }
-  }
 }

package/elements/list/list-item-content.scss

@@ -0,0 +1,34 @@
+@import "../../styles/variables.scss";
+
+@include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
+  :host-context([theme="#{$name}"]) {
+    > ::ng-deep * {
+      color: rgba(#fff, 0.65);
+    }
+  }
+}
+
+:host-context(.novo-list.avatar) {
+  margin-left: 2.7em;
+}
+
+:host {
+  display: flex;
+  margin-left: 0.2em;
+  > * {
+    color: rgba(#434343, 0.85);
+  }
+  ::ng-deep i {
+    @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
+      &.#{$name} {
+        color: $color;
+      }
+    }
+  }
+  &.vertical-list {
+    flex-direction: column;
+  }
+  &.horizontal-list {
+    flex-direction: row;
+  }
+}

package/elements/list/list-item-end.scss

@@ -0,0 +1,8 @@
+:host {
+  align-self: center;
+  flex: 1;
+  text-align: right;
+  i {
+    line-height: 1.4em;
+  }
+}

package/elements/list/list-item-header-avatar.scss

@@ -0,0 +1,12 @@
+@import "../../styles/variables.scss";
+
+:host {
+  margin-right: 0.5em;
+  i {
+    @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
+      &.#{$name} {
+        color: $color;
+      }
+    }
+  }
+}

package/elements/list/list-item-header-end.scss

@@ -0,0 +1,4 @@
+:host {
+  flex: 1 0 0;
+  text-align: right;
+}

package/elements/list/list-item-header-title.scss

@@ -0,0 +1,16 @@
+@import "../../styles/variables.scss";
+
+@include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
+  :host-context([theme="#{$name}"]) {
+    color: $contrast;
+    i {
+      color: $contrast;
+    }
+  }
+}
+
+:host {
+  display: contents;
+  color: inherit;
+  font-size: inherit;
+}

package/elements/list/list-item-header.scss

@@ -0,0 +1,17 @@
+@import "../../styles/variables.scss";
+
+@include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
+  :host-context([theme="#{$name}"]) {
+    color: $contrast;
+    h6, i {
+      color: $contrast;
+    }
+  }
+}
+
+:host {
+  .novo-item-header-container {
+    display: flex;
+    align-items: center;
+  }
+}

package/elements/list/list-item.scss

@@ -0,0 +1,47 @@
+@import "../../styles/variables.scss";
+
+@include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
+  $contrast: getContrastColor($name);
+  :host-context([theme="#{$name}"]) {
+    background: $color;
+    color: $contrast;
+    border: unset;
+    border-bottom: 1px solid rgba(#fff, 0.1);
+    outline: none;
+    item-title h6,
+    i {
+      color: $contrast;
+    }
+    item-content {
+      > * {
+        color: rgba(#fff, 0.65);
+      }
+    }
+    &:hover,
+    &:active {
+      background: lighten($color, 20%);
+    }
+  }
+}
+
+:host {
+  border-bottom: 1px solid var(--border, #f4f4f4);
+  padding: 1rem;
+  display: flex;
+  flex-direction: row;
+  outline: none;
+  &:hover {
+    background: rgba($positive, 0.2);
+  }
+  &.active {
+    background: rgba($positive, 0.3);
+  }
+  &:last-child {
+    border-bottom: none;
+  }
+  .list-item {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 100%;
+  }
+}

package/elements/loading/Loading.scss

@@ -1,4 +1,7 @@
-novo-loading {
+@import "../../styles/variables";
+@import "../../styles/global/functions";
+
+:host {
   padding: 20px;
   display: flex;
   flex-direction: row;

package/elements/loading/NovoSpinner.scss

@@ -1,8 +1,10 @@
+@import "../../styles/variables";
+
 $small-spinner-size: 1.2em;
 $medium-spinner-size: 1.8em;
 $large-spinner-size: 2.1em;
 
-novo-spinner {
+:host {
   display: inline-block;
   width: $medium-spinner-size;
   height: $medium-spinner-size;