novo-elements 8.0.1 → 8.1.0-next.2

package/elements/agenda/common/AgendaDateChange.scss

@@ -1,4 +1,6 @@
-novo-agenda-date-change {
+@import "../../../styles/variables.scss";
+
+:host {
   display: inline-block;
 
   .cal-date-change {

package/elements/agenda/common/AgendaHoursLayout.scss

@@ -0,0 +1,52 @@
+@import "../../../styles/variables.scss";
+
+:host {
+  ::ng-deep .cal-day-view,
+  ::ng-deep .cal-week-view {
+    .cal-hour-rows {
+      width: 100%;
+      border: solid 1px #e1e1e1;
+      overflow-x: scroll;
+      position: relative;
+    }
+
+    .cal-hour:nth-child(even) {
+      background-color: $off-white;
+    }
+    .cal-hour:nth-child(odd) {
+      background-color: $white;
+    }
+
+    .cal-hour-segment {
+      height: 30px;
+    }
+
+    .cal-hour-segment::after {
+      content: "\00a0";
+    }
+
+    .cal-hour:not(:last-child) .cal-hour-segment,
+    .cal-hour:last-child :not(:last-child) .cal-hour-segment {
+      border-bottom: thin dashed #e1e1e1;
+    }
+
+    .cal-time {
+      font-weight: bold;
+      padding-top: 5px;
+      width: 70px;
+      text-align: center;
+      color: $grey;
+    }
+
+    .cal-hour-segment.cal-after-hour-start {
+      .cal-time {
+        display: none;
+      }
+    }
+
+    .cal-hour-segment:hover,
+    .cal-drag-over .cal-hour-segment {
+      background-color: #ededed;
+    }
+  }
+}

package/elements/agenda/day/AgendaDayView.scss

@@ -1,97 +1,52 @@
-.cal-day-view,
-.cal-week-view {
-  .cal-hour-rows {
-    width: 100%;
-    border: solid 1px #e1e1e1;
-    overflow-x: scroll;
-    position: relative;
-  }
-
-  .cal-hour:nth-child(even) {
-    background-color: $off-white;
-  }
-  .cal-hour:nth-child(odd) {
-    background-color: $white;
-  }
+@import "../../../styles/variables.scss";
 
-  .cal-hour-segment {
-    height: 30px;
-  }
-
-  .cal-hour-segment::after {
-    content: "\00a0";
-  }
-
-  .cal-hour:not(:last-child) .cal-hour-segment,
-  .cal-hour:last-child :not(:last-child) .cal-hour-segment {
-    border-bottom: thin dashed #e1e1e1;
-  }
-
-  .cal-time {
-    font-weight: bold;
-    padding-top: 5px;
-    width: 70px;
-    text-align: center;
-    color: $grey;
-  }
-
-  .cal-hour-segment.cal-after-hour-start {
-    .cal-time {
-      display: none;
+:host {
+  ::ng-deep .cal-day-view {
+    .cal-event-container {
+      position: absolute;
     }
-  }
 
-  .cal-hour-segment:hover,
-  .cal-drag-over .cal-hour-segment {
-    background-color: #ededed;
-  }
-}
-
-.cal-day-view {
-  .cal-event-container {
-    position: absolute;
-  }
-
-  novo-agenda-day-event {
-    height: inherit;
-
-    .cal-event {
+    novo-agenda-day-event {
       height: inherit;
-      font-size: 12px;
-      margin-left: 2px;
-      margin-right: 2px;
-      min-height: 30px;
-      display: flex;
-      flex-flow: row nowrap;
-      background-color: $off-white;
 
-      .cal-event-ribbon {
-        width: 4px;
-        min-height: 100%;
-      }
-      .cal-event-group {
-        overflow: hidden;
-        flex: 1;
-        padding: 2px 10px;
+      .cal-event {
+        height: inherit;
+        font-size: 12px;
+        margin-left: 2px;
+        margin-right: 2px;
+        min-height: 30px;
         display: flex;
-        flex-flow: column;
-      }
-      .cal-event-title {
-        line-height: 26px;
-      }
-      .cal-event-description {
-        font-size: 10px;
-        line-height: 13px;
+        flex-flow: row nowrap;
+        background-color: $off-white;
+
+        .cal-event-ribbon {
+          width: 4px;
+          min-height: 100%;
+        }
+        .cal-event-group {
+          overflow: hidden;
+          flex: 1;
+          padding: 2px 10px;
+          display: flex;
+          flex-flow: column;
+        }
+        .cal-event-title {
+          line-height: 26px;
+        }
+        .cal-event-description {
+          font-size: 10px;
+          line-height: 13px;
+        }
       }
     }
-  }
 
-  .cal-draggable {
-    cursor: move;
-  }
+    .cal-draggable {
+      cursor: move;
+    }
 
-  .cal-all-day-event {
-    padding: 8px;
-    border: solid 1px;
+    .cal-all-day-event {
+      padding: 8px;
+      border: solid 1px;
+    }
   }
 }

package/elements/agenda/month/AgendaMonthView.scss

@@ -1,169 +1,173 @@
-.agenda-month-view {
-  background-color: $white;
-
-  .agenda-header {
-    display: flex;
-    flex-flow: column;
-    text-align: center;
-    font-weight: bolder;
-    border-bottom: 2px solid #e1e1e1;
-    .agenda-header-top {
-      display: flex;
-      flex-flow: row nowrap;
-      align-items: center;
-      justify-content: space-around;
+@import "../../../styles/variables.scss";
+
+:host {
+  ::ng-deep .agenda-month-view {
+    background-color: $white;
 
-      .agenda-month {
-        font-size: 180%;
+    .agenda-header {
+      display: flex;
+      flex-flow: column;
+      text-align: center;
+      font-weight: bolder;
+      border-bottom: 2px solid #e1e1e1;
+      .agenda-header-top {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        justify-content: space-around;
+
+        .agenda-month {
+          font-size: 180%;
+        }
+        .agenda-year {
+          color: #999;
+        }
       }
-      .agenda-year {
-        color: #999;
+      .agenda-weekdays {
+        display: flex;
+        flex-flow: row nowrap;
+        .agenda-weekday {
+          padding: 5px 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: block;
+          white-space: nowrap;
+          flex: 1;
+        }
       }
     }
-    .agenda-weekdays {
+
+    .agenda-cell-row {
       display: flex;
-      flex-flow: row nowrap;
-      .agenda-weekday {
-        padding: 5px 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: block;
-        white-space: nowrap;
-        flex: 1;
+      &:hover {
+        background-color: #fafafa;
       }
     }
-  }
 
-  .agenda-cell-row {
-    display: flex;
-    &:hover {
-      background-color: #fafafa;
+    .agenda-cell-row .agenda-cell:hover,
+    .agenda-cell.agenda-has-events.agenda-open {
+      background-color: #ededed;
     }
-  }
-
-  .agenda-cell-row .agenda-cell:hover,
-  .agenda-cell.agenda-has-events.agenda-open {
-    background-color: #ededed;
-  }
 
-  .agenda-days {
-    border: 1px solid #e1e1e1;
-    border-bottom: 0;
-  }
+    .agenda-days {
+      border: 1px solid #e1e1e1;
+      border-bottom: 0;
+    }
 
-  .agenda-day-top {
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-    justify-content: flex-end;
-  }
-  .agenda-cell:hover {
-    .agenda-actions {
+    .agenda-day-top {
       display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      justify-content: flex-end;
+    }
+    .agenda-cell:hover {
+      .agenda-actions {
+        display: flex;
+      }
     }
-  }
 
-  .agenda-cell {
-    float: left;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    position: relative;
-  }
+    .agenda-cell {
+      float: left;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      position: relative;
+    }
 
-  .agenda-day-cell {
-    min-height: 56px;
+    .agenda-day-cell {
+      min-height: 56px;
 
-    &:not(:last-child) {
-      border-right: 1px solid #e1e1e1;
+      &:not(:last-child) {
+        border-right: 1px solid #e1e1e1;
+      }
     }
-  }
 
-  .agenda-days .agenda-cell-row {
-    border-bottom: 1px solid #e1e1e1;
-  }
+    .agenda-days .agenda-cell-row {
+      border-bottom: 1px solid #e1e1e1;
+    }
 
-  .agenda-day-badge {
-    background-color: #b94a48;
-    display: inline-block;
-    min-width: 10px;
-    padding: 3px 7px;
-    font-size: 12px;
-    font-weight: 700;
-    line-height: 1;
-    color: white;
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: middle;
-    border-radius: 10px;
-  }
+    .agenda-day-badge {
+      background-color: #b94a48;
+      display: inline-block;
+      min-width: 10px;
+      padding: 3px 7px;
+      font-size: 12px;
+      font-weight: 700;
+      line-height: 1;
+      color: white;
+      text-align: center;
+      white-space: nowrap;
+      vertical-align: middle;
+      border-radius: 10px;
+    }
 
-  .agenda-day-number {
-    font-size: 1.2em;
-    font-weight: 400;
-    opacity: 0.5;
-    padding: 4px;
-  }
+    .agenda-day-number {
+      font-size: 1.2em;
+      font-weight: 400;
+      opacity: 0.5;
+      padding: 4px;
+    }
 
-  .agenda-event {
-    width: 22px;
-    height: 22px;
-    border-radius: 4px;
-    display: inline-block;
-    margin: 2px;
-    vertical-align: middle;
-    text-align: center;
-    line-height: 22px;
-    font-size: 12px;
-    color: $white;
-  }
+    .agenda-event {
+      width: 22px;
+      height: 22px;
+      border-radius: 4px;
+      display: inline-block;
+      margin: 2px;
+      vertical-align: middle;
+      text-align: center;
+      line-height: 22px;
+      font-size: 12px;
+      color: $white;
+    }
 
-  .agenda-day-cell.agenda-in-month.agenda-has-events {
-    cursor: pointer;
-  }
+    .agenda-day-cell.agenda-in-month.agenda-has-events {
+      cursor: pointer;
+    }
 
-  .agenda-day-cell.agenda-out-month .agenda-day-number {
-    opacity: 0.1;
-    cursor: default;
-  }
+    .agenda-day-cell.agenda-out-month .agenda-day-number {
+      opacity: 0.1;
+      cursor: default;
+    }
 
-  .agenda-day-cell.agenda-weekend .agenda-day-number {
-    color: darkred;
-  }
+    .agenda-day-cell.agenda-weekend .agenda-day-number {
+      color: darkred;
+    }
 
-  .agenda-day-cell.agenda-today {
-    background-color: #e8fde7;
-  }
+    .agenda-day-cell.agenda-today {
+      background-color: #e8fde7;
+    }
 
-  .agenda-day-cell.agenda-today .agenda-day-number {
-    color: $dark;
-  }
+    .agenda-day-cell.agenda-today .agenda-day-number {
+      color: $dark;
+    }
 
-  .agenda-day-cell.agenda-drag-over {
-    background-color: darken(#ededed, 5%) !important;
-  }
+    .agenda-day-cell.agenda-drag-over {
+      background-color: darken(#ededed, 5%) !important;
+    }
 
-  .agenda-open-day-events {
-    padding: 15px;
-    color: white;
-    background-color: #555;
-    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.5);
-  }
+    .agenda-open-day-events {
+      padding: 15px;
+      color: white;
+      background-color: #555;
+      box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.5);
+    }
 
-  .agenda-open-day-events .agenda-event {
-    position: relative;
-    top: 2px;
-  }
+    .agenda-open-day-events .agenda-event {
+      position: relative;
+      top: 2px;
+    }
 
-  .agenda-event-title {
-    color: white;
-  }
+    .agenda-event-title {
+      color: white;
+    }
 
-  .agenda-out-month {
-    .agenda-day-badge,
-    .agenda-event {
-      opacity: 0.3;
+    .agenda-out-month {
+      .agenda-day-badge,
+      .agenda-event {
+        opacity: 0.3;
+      }
     }
   }
 }

package/elements/agenda/week/AgendaWeekView.scss

@@ -1,86 +1,90 @@
-.cal-week-view {
-  position: relative;
+@import "../../../styles/variables.scss";
 
-  .cal-day-headers {
-    display: flex;
-    border: 1px solid #e1e1e1;
-  }
-
-  .cal-day-headers .cal-header {
-    flex: 1;
-    text-align: center;
-    padding: 5px;
-    background-color: $off-white;
-  }
+:host {
+  ::ng-deep .cal-week-view {
+    position: relative;
 
-  .cal-day-headers .cal-header:not(:last-child) {
-    border-right: 1px solid #e1e1e1;
-  }
+    .cal-day-headers {
+      display: flex;
+      border: 1px solid #e1e1e1;
+    }
 
-  .cal-day-headers .cal-header:hover,
-  .cal-day-headers .cal-drag-over {
-    background-color: #ededed;
-  }
+    .cal-day-headers .cal-header {
+      flex: 1;
+      text-align: center;
+      padding: 5px;
+      background-color: $off-white;
+    }
 
-  .cal-day-headers span {
-    font-weight: 400;
-    opacity: 0.5;
-  }
+    .cal-day-headers .cal-header:not(:last-child) {
+      border-right: 1px solid #e1e1e1;
+    }
 
-  .cal-event-container {
-    position: absolute;
+    .cal-day-headers .cal-header:hover,
+    .cal-day-headers .cal-drag-over {
+      background-color: #ededed;
+    }
 
-    &:nth-child(n + 2) {
-      border-left: 1px solid $dark;
+    .cal-day-headers span {
+      font-weight: 400;
+      opacity: 0.5;
     }
 
-    novo-agenda-week-event {
-      height: inherit;
+    .cal-event-container {
+      position: absolute;
+
+      &:nth-child(n + 2) {
+        border-left: 1px solid $dark;
+      }
 
-      .cal-event {
+      novo-agenda-week-event {
         height: inherit;
-        font-size: 12px;
-        min-height: 30px;
-        display: flex;
-        flex-flow: column;
-        background-color: $off-white;
 
-        .cal-event-ribbon {
-          min-height: 4px;
-          width: 100%;
-        }
-        .cal-event-title {
-          padding: 0px 0px 0px 10px;
-          line-height: 26px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-        .cal-event-description {
-          font-size: 10px;
-          line-height: 13px;
-          padding: 0px 0px 0px 10px;
-          overflow: hidden;
-          text-overflow: ellipsis;
+        .cal-event {
+          height: inherit;
+          font-size: 12px;
+          min-height: 30px;
+          display: flex;
+          flex-flow: column;
+          background-color: $off-white;
+
+          .cal-event-ribbon {
+            min-height: 4px;
+            width: 100%;
+          }
+          .cal-event-title {
+            padding: 0px 0px 0px 10px;
+            line-height: 26px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+          .cal-event-description {
+            font-size: 10px;
+            line-height: 13px;
+            padding: 0px 0px 0px 10px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
         }
       }
     }
-  }
 
-  .cal-draggable {
-    cursor: move;
-  }
+    .cal-draggable {
+      cursor: move;
+    }
 
-  .cal-header.cal-today {
-    background-color: #e8fde7;
-  }
+    .cal-header.cal-today {
+      background-color: #e8fde7;
+    }
 
-  .cal-header.cal-weekend span {
-    color: #8b0000;
-  }
+    .cal-header.cal-weekend span {
+      color: #8b0000;
+    }
 
-  .cal-event,
-  .cal-header {
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    .cal-event,
+    .cal-header {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 }

package/elements/card/Card.d.ts

@@ -11,7 +11,7 @@ export declare class CardActionsElement {
 export declare class CardContentElement {
     condensed: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<CardContentElement, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CardContentElement, "novo-card-content, [novo-card-content], [novoCardContent]", never, { "condensed": "condensed"; }, {}, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CardContentElement, "novo-card-content, [novo-card-content], [novoCardContent]", never, { "condensed": "condensed"; }, {}, never, ["*"]>;
 }
 /**
  * Content of a card, needed as it's used as a selector in the API.
@@ -22,7 +22,7 @@ export declare class CardHeaderElement {
 }
 export declare class CardFooterElement {
     static ɵfac: i0.ɵɵFactoryDeclaration<CardFooterElement, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CardFooterElement, "novo-card-footer, [novo-card-footer], [novoCardFooter]", never, {}, {}, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CardFooterElement, "novo-card-footer, [novo-card-footer], [novoCardFooter]", never, {}, {}, never, ["*"]>;
 }
 export declare class CardElement implements OnChanges, OnInit {
     padding: boolean;