novo-elements 8.1.0-next.4 → 8.1.0-next.6

package/addons/ace-editor/AceEditor.scss

@@ -1,4 +1,4 @@
-novo-ace-editor {
+:host {
   display: block;
   width: 100%;
   min-height: 200px;

package/addons/ckeditor/CKEditor.scss

@@ -1,5 +1,8 @@
-novo-editor {
-  .cke {
+@import "../../styles/variables.scss";
+
+// novo-editor {
+:host {
+  ::ng-deep .cke {
     font: inherit !important;
     box-shadow: none;
     border-color: var(--background-muted);
@@ -36,11 +39,11 @@ novo-editor {
   }
 }
 
-.theme-dark {
-  .cke_button {
+:host-context(.theme-dark) {
+  ::ng-deep .cke_button {
     filter: invert(1);
   }
-  .cke_combo {
+  ::ng-deep .cke_combo {
     a.cke_combo_button {
       &:hover,
       &:active,

package/elements/category-dropdown/CategoryDropdown.scss

@@ -1,4 +1,6 @@
-novo-category-dropdown {
+@import "../../styles/variables.scss";
+
+:host {
   display: block;
   position: relative;
   button {

package/elements/chips/Chip.scss

@@ -41,15 +41,10 @@ $chip-spacing: (
   box-sizing: border-box;
   -webkit-tap-highlight-color: transparent;
   // Chips could be set on buttons so we need to reset the user agent styles.
-  border: none;
   -webkit-appearance: none;
   -moz-appearance: none;
-}
-
-.novo-chip {
   @include novo-body-text();
   background: var(--background-main);
-  box-sizing: border-box;
   border: 1px solid transparent;
   transition: all 200ms ease-in-out;
   display: inline-flex;
@@ -106,22 +101,6 @@ $chip-spacing: (
     }
   }
 
-  // &.novo-chip-with-trailing-icon.novo-chip-with-avatar,
-  // &.novo-chip-with-avatar {
-  //   padding-top: $novo-chip-avatar-vertical-padding;
-  //   padding-bottom: $novo-chip-avatar-vertical-padding;
-  // }
-
-  // &.novo-chip-with-trailing-icon.novo-chip-with-avatar {
-  //   padding-right: $novo-chip-remove-after-padding;
-  //   padding-left: $novo-chip-avatar-before-padding;
-  // }
-
-  // &.novo-chip-with-avatar {
-  //   padding-left: $novo-chip-avatar-before-padding;
-  //   padding-right: $novo-chip-horizontal-padding;
-  // }
-
   .novo-chip-avatar::not(novo-icon) {
     width: $novo-chip-avatar-size;
     height: $novo-chip-avatar-size;

package/elements/chips/Chips.scss

@@ -1,10 +1,6 @@
-@import "./ChipList.scss";
 @import "../common/typography/text.mixins.scss";
 
-chips,
-novo-chips,
-entity-chips,
-novo-entity-chips {
+:host {
   width: 100%;
   display: flex;
   align-items: center;
@@ -13,7 +9,7 @@ novo-entity-chips {
   border-bottom: 1px solid lighten($dark, 45%);
   transition: all 200ms ease-in-out;
   position: relative;
-  padding: 5px 20px 5px 0;
+  padding: 2px 0;
   &.with-value {
     margin-bottom: 20px;
   }
@@ -47,15 +43,6 @@ novo-entity-chips {
     flex-flow: row wrap;
     gap: 0.4rem;
   }
-  novo-picker {
-    position: inherit;
-    > i {
-      display: none;
-    }
-    div.picker-results-container {
-      left: 0;
-    }
-  }
   label.clear-all {
     flex: 1 100%;
     position: absolute;
@@ -82,37 +69,34 @@ novo-entity-chips {
     //   bottom: 14px;
     // }
   }
-}
 
-chips,
-novo-chips,
-entity-chips,
-novo-entity-chips {
   & + i {
     position: absolute;
     right: 0;
     bottom: 7px;
   }
-  padding: 2px 0;
+  &.with-value {
+    margin-bottom: 0;
+  }
+
   novo-picker {
+    position: inherit;
     padding-bottom: 0;
-    > input {
+    > ::ng-deep input {
       border: none;
       border-bottom: none !important;
       &:disabled {
         border-bottom: none !important;
       }
     }
+    > ::ng-deep i {
+      display: none;
+    }
+    div.picker-results-container {
+      left: 0;
+    }
   }
-  &.with-value {
-    margin-bottom: 0;
-  }
-}
 
-chips,
-novo-chips,
-entity-chips,
-novo-entity-chips {
   picker-results {
     position: absolute;
     color: black;
@@ -212,71 +196,3 @@ novo-entity-chips {
 entity-chip-results {
   max-width: none !important;
 }
-
-novo-row-chips {
-  display: flex;
-  flex-flow: column;
-  gap: 0.8rem;
-
-  .novo-row-chips-columns {
-    display: flex;
-    align-items: flex-end;
-    margin-bottom: 1em;
-    .column-label {
-      @include novo-label-text();
-      display: flex;
-      flex: 1;
-      margin-right: 1em;
-      &:first-of-type {
-        flex: 0 0 275px;
-      }
-    }
-    .column-data {
-      display: flex;
-      align-items: center;
-      background: transparent !important;
-      border: none;
-      border-bottom: 1px dashed lighten($dark, 30%);
-      border-radius: 0;
-      outline: none;
-      height: 2em;
-      width: 100%;
-      margin: 0 1em 0 0;
-      &.editable {
-        border-bottom: none;
-        input {
-          background: none;
-          border: none;
-        }
-      }
-      &:first-of-type {
-        flex: 0 0 275px;
-      }
-      span {
-        color: inherit;
-        align-items: flex-start;
-        display: flex;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        -webkit-line-clamp: 2;
-        line-clamp: 2;
-        line-height: 1em;
-        max-height: 2em;
-        min-height: 1em;
-      }
-    }
-    i.bhi-delete-o {
-      color: $negative;
-    }
-  }
-  .novo-chip.novo-row-chip {
-    padding: 0;
-  }
-  .novo-row-chips-empty-message {
-    font-style: italic;
-    color: $grey;
-  }
-  i {
-    cursor: pointer;
-  }
-}

package/elements/chips/RowChips.scss

@@ -0,0 +1,70 @@
+@import "../../styles/variables.scss";
+@import "../common/typography/text.mixins.scss";
+
+:host {
+  display: flex;
+  flex-flow: column;
+  gap: 0.8rem;
+
+  ::ng-deep .novo-row-chips-columns {
+    display: flex;
+    align-items: flex-end;
+    margin-bottom: 1em;
+    .column-label {
+      @include novo-label-text();
+      display: flex;
+      flex: 1;
+      margin-right: 1em;
+      &:first-of-type {
+        flex: 0 0 275px;
+      }
+    }
+    .column-data {
+      display: flex;
+      align-items: center;
+      background: transparent !important;
+      border: none;
+      border-bottom: 1px dashed lighten($dark, 30%);
+      border-radius: 0;
+      outline: none;
+      height: 2em;
+      width: 100%;
+      margin: 0 1em 0 0;
+      &.editable {
+        border-bottom: none;
+        input {
+          background: none;
+          border: none;
+        }
+      }
+      &:first-of-type {
+        flex: 0 0 275px;
+      }
+      span {
+        color: inherit;
+        align-items: flex-start;
+        display: flex;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        line-height: 1em;
+        max-height: 2em;
+        min-height: 1em;
+      }
+    }
+    i.bhi-delete-o {
+      color: $negative;
+    }
+  }
+  .novo-chip.novo-row-chip {
+    padding: 0;
+  }
+  .novo-row-chips-empty-message {
+    font-style: italic;
+    color: $grey;
+  }
+  i {
+    cursor: pointer;
+  }
+}

package/elements/data-table/data-table.component.scss

@@ -1,3 +1,6 @@
+@import "../../styles/variables.scss";
+@import "../../styles/reset";
+
 $table-bg-accent: var(--background-bright, $off-white);
 $novo-row-horizontal-padding: 20px;
 $table-header-font-weight: 400;
@@ -516,127 +519,6 @@ novo-data-table {
   }
 }
 
-novo-data-table-pagination {
-  &.basic,
-  &.basic-wide {
-    display: flex;
-    align-items: center;
-    flex: 1;
-    novo-tiles > .tile-container .tile {
-      padding: 7px 10px;
-    }
-    > .novo-data-table-pagination-size {
-      padding-right: 10px;
-    }
-    > .novo-data-table-range-label-long,
-    > .novo-data-table-range-label-short {
-      padding-right: 10px;
-      white-space: nowrap;
-    }
-    > .novo-data-table-range-label-long {
-      display: none;
-      @media (min-width: $breakpoint) {
-        display: block;
-      }
-    }
-    > .novo-data-table-spacer {
-      width: 100%;
-    }
-    > .novo-data-table-range-label-short {
-      display: block;
-      @media (min-width: $breakpoint) {
-        display: none;
-      }
-    }
-    > button:first-of-type {
-      margin-right: 5px;
-    }
-    > button {
-      span {
-        display: none;
-        @media (min-width: $breakpoint) {
-          display: block;
-        }
-      }
-    }
-    > button[theme][theme="dialogue"][icon][side="left"] {
-      padding: 5px;
-      @media (min-width: $breakpoint) {
-        padding: 5px 15px 5px 5px;
-      }
-    }
-    > button[theme][theme="dialogue"][icon][side="right"] {
-      padding: 5px;
-      @media (min-width: $breakpoint) {
-        padding: 5px 5px 5px 15px;
-      }
-    }
-  }
-  &.standard {
-    display: flex;
-    flex-flow: row nowrap;
-    flex: 1;
-    > * {
-      margin: auto 5px;
-    }
-    h5.rows {
-      padding: 0;
-      font-size: 12px;
-      opacity: 0.75;
-      letter-spacing: 0.1px;
-    }
-    span.spacer {
-      flex: 1;
-    }
-    novo-select {
-      max-width: 100px;
-      min-width: 100px;
-      div[type="button"] {
-        &:hover {
-          i {
-            opacity: 0.75;
-          }
-        }
-        &:active,
-        &:focus {
-          i {
-            opacity: 1;
-          }
-        }
-        i {
-          opacity: 0.45;
-        }
-      }
-    }
-    .pager {
-      list-style-type: none;
-      user-select: none;
-      display: flex;
-      .page {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 2.4rem;
-        height: 2.4rem;
-        font-size: var(--font-size-text);
-        border-radius: 2px;
-        list-style-type: none;
-        cursor: pointer;
-        color: $company;
-        &.disabled {
-          opacity: 0.3;
-          pointer-events: none;
-        }
-      }
-      .page.active {
-        color: $company;
-        background-color: rgba($black, 0.1);
-        opacity: 1;
-      }
-    }
-  }
-}
-
 .dropdown-container.data-table-dropdown {
   min-width: 220px;
   max-width: 280px;

package/elements/data-table/pagination/data-table-pagination.component.scss

@@ -0,0 +1,124 @@
+@import "../../../styles/variables.scss";
+
+$breakpoint: 1000px;
+
+:host {
+  &.basic,
+  &.basic-wide {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    ::ng-deep novo-tiles.pagination-tiles > .tile-container .tile {
+      padding: 7px 10px;
+    }
+    > .novo-data-table-pagination-size {
+      padding-right: 10px;
+    }
+    > .novo-data-table-range-label-long,
+    > .novo-data-table-range-label-short {
+      padding-right: 10px;
+      white-space: nowrap;
+    }
+    > .novo-data-table-range-label-long {
+      display: none;
+      @media (min-width: $breakpoint) {
+        display: block;
+      }
+    }
+    > .novo-data-table-spacer {
+      width: 100%;
+    }
+    > .novo-data-table-range-label-short {
+      display: block;
+      @media (min-width: $breakpoint) {
+        display: none;
+      }
+    }
+    > button:first-of-type {
+      margin-right: 5px;
+    }
+    > button {
+      span {
+        display: none;
+        @media (min-width: $breakpoint) {
+          display: block;
+        }
+      }
+    }
+    > button[theme][theme="dialogue"][icon][side="left"] {
+      padding: 5px;
+      @media (min-width: $breakpoint) {
+        padding: 5px 15px 5px 5px;
+      }
+    }
+    > button[theme][theme="dialogue"][icon][side="right"] {
+      padding: 5px;
+      @media (min-width: $breakpoint) {
+        padding: 5px 5px 5px 15px;
+      }
+    }
+  }
+  &.standard {
+    display: flex;
+    flex-flow: row nowrap;
+    flex: 1;
+    > * {
+      margin: auto 5px;
+    }
+    h5.rows {
+      padding: 0;
+      font-size: 12px;
+      opacity: 0.75;
+      letter-spacing: 0.1px;
+    }
+    span.spacer {
+      flex: 1;
+    }
+    novo-select {
+      max-width: 100px;
+      min-width: 100px;
+      div[type="button"] {
+        &:hover {
+          i {
+            opacity: 0.75;
+          }
+        }
+        &:active,
+        &:focus {
+          i {
+            opacity: 1;
+          }
+        }
+        i {
+          opacity: 0.45;
+        }
+      }
+    }
+    .pager {
+      list-style-type: none;
+      user-select: none;
+      display: flex;
+      .page {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 2.4rem;
+        height: 2.4rem;
+        font-size: var(--font-size-text);
+        border-radius: 2px;
+        list-style-type: none;
+        cursor: pointer;
+        color: $company;
+        &.disabled {
+          opacity: 0.3;
+          pointer-events: none;
+        }
+      }
+      .page.active {
+        color: $company;
+        background-color: rgba($black, 0.1);
+        opacity: 1;
+      }
+    }
+  }
+}

package/elements/date-picker/MultiDateInput.scss

@@ -1,9 +1,6 @@
 @import "../../styles/variables.scss";
-@import "../chips/Chips";
 
 :host {
-  @extend chips;
-
   .chip-input-container {
     padding-top: 10px;
     .placeholder {

package/elements/dropdown/Dropdown.scss

@@ -33,7 +33,7 @@
   &.has-height {
     overflow: auto;
   }
-  list {
+  ::ng-deep list {
     dropdown-item-header {
       color: #9e9e9e;
       font-size: 0.8em;

package/elements/form/ControlGroup.scss

@@ -1,3 +1,5 @@
+@import "../../styles/variables.scss";
+
 novo-control-group {
   display: block;
   margin-bottom: 0.5em;

package/elements/form/Form.scss

@@ -1,29 +1,7 @@
-@import "./extras/address/Address";
-@import "./extras/file/FileInput";
-@import "./ControlGroup";
-.novo-form-control-label {
-  font-weight: 500;
-  word-break: word-break;
-  overflow-wrap: break-word;
-  line-height: 1.375;
-  color: var(--text-muted);
-  font-size: var(--font-size-label);
-  // original
-  flex: 1;
-  max-width: 130px;
-  min-width: 130px;
-  transition: 200ms ease-out;
-  margin-right: 35px;
-  padding-top: 8px;
-
-  &.encrypted {
-    max-width: 110px;
-    min-width: 110px;
-  }
-}
+@import "../../styles/variables.scss";
 
-novo-dynamic-form,
-novo-form {
+novo-form,
+novo-dynamic-form {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -796,8 +774,10 @@ novo-form {
   }
 }
 
-novo-dynamic-form .novo-form-container form div.novo-form-row novo-control.address .field-message {
-  margin-left: 0px;
+novo-dynamic-form {
+  .novo-form-container form div.novo-form-row novo-control.address .field-message {
+    margin-left: 0px;
+  }
 }
 
 control-confirm-modal,
@@ -819,21 +799,23 @@ control-prompt-modal {
   }
 }
 
-// Isolate styles
-.novo-fieldset-header {
-  background: var(--background-muted);
-  box-sizing: content-box;
-  padding: 1rem 1rem 1rem 0.5rem;
-  margin-bottom: 2rem;
-  display: flex;
-  margin-left: -1.5rem;
-  margin-right: -1.5rem;
-  font-size: 1.8rem;
-  i,
-  novo-icon {
-    margin: 1px 10px 1px 6px;
-  }
-  &.hidden {
-    display: none;
+.novo-form-control-label {
+  font-weight: 500;
+  word-break: word-break;
+  overflow-wrap: break-word;
+  line-height: 1.375;
+  color: var(--text-muted);
+  font-size: var(--font-size-label);
+  // original
+  flex: 1;
+  max-width: 130px;
+  min-width: 130px;
+  transition: 200ms ease-out;
+  margin-right: 35px;
+  padding-top: 8px;
+
+  &.encrypted {
+    max-width: 110px;
+    min-width: 110px;
   }
 }