@dereekb/dbx-web 8.11.1 → 8.12.1

package/lib/extension/calendar/style/month/calendar-month-view.scss

@@ -0,0 +1,221 @@
+@use 'sass:map';
+@use '../variables';
+
+@mixin cal-month-view-core() {
+  .cal-month-view {
+    .cal-header {
+      text-align: center;
+      font-weight: bolder;
+    }
+
+    .cal-header .cal-cell {
+      padding: 5px 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: block;
+      white-space: nowrap;
+    }
+
+    .cal-days {
+      border: 1px solid;
+      border-bottom: 0;
+    }
+
+    .cal-cell-top {
+      min-height: 78px;
+      flex: 1;
+    }
+
+    .cal-cell-row {
+      display: flex;
+    }
+
+    .cal-cell {
+      float: left;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+
+      .cal-event {
+        pointer-events: all !important;
+      }
+    }
+
+    .cal-day-cell {
+      min-height: 100px;
+
+      // ie11 hack for https://github.com/mattlewis92/angular-calendar/issues/501
+      @media all and (-ms-high-contrast: none) {
+        display: block;
+      }
+    }
+
+    .cal-day-cell:not(:last-child) {
+      border-right: 1px solid;
+
+      [dir='rtl'] & {
+        border-right: initial;
+        border-left: 1px solid;
+      }
+    }
+
+    .cal-days .cal-cell-row {
+      border-bottom: 1px solid;
+    }
+
+    .cal-day-badge {
+      margin-top: 18px;
+      margin-left: 10px;
+      display: inline-block;
+      min-width: 10px;
+      padding: 3px 7px;
+      font-size: 12px;
+      font-weight: 700;
+      line-height: 1;
+      text-align: center;
+      white-space: nowrap;
+      vertical-align: middle;
+      border-radius: 10px;
+    }
+
+    .cal-day-number {
+      font-size: 1.2em;
+      font-weight: 400;
+      opacity: variables.$cal-hint-opacity;
+      margin-top: 15px;
+      margin-right: 15px;
+      float: right;
+      margin-bottom: 10px;
+    }
+
+    .cal-events {
+      flex: 1;
+      align-items: flex-end;
+      margin: 3px;
+      line-height: 10px;
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .cal-event {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      display: inline-block;
+      margin: 2px;
+    }
+
+    .cal-day-cell.cal-in-month.cal-has-events {
+      cursor: pointer;
+    }
+
+    .cal-day-cell.cal-out-month .cal-day-number {
+      opacity: variables.$cal-out-month-hint-opacity;
+      cursor: default;
+    }
+
+    .cal-day-cell.cal-today .cal-day-number {
+      font-size: 1.9em;
+    }
+
+    .cal-open-day-events {
+      padding: 15px;
+    }
+
+    .cal-open-day-events .cal-event {
+      position: relative;
+      top: 2px;
+    }
+
+    .cal-out-month {
+      .cal-day-badge,
+      .cal-event {
+        opacity: 0.5;
+      }
+    }
+
+    .cal-draggable {
+      cursor: move;
+    }
+
+    .cal-drag-active * {
+      pointer-events: none;
+    }
+
+    .cal-event-title {
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+@mixin cal-month-view-theme($overrides) {
+  $theme: map-merge(variables.$cal-vars, $overrides);
+
+  .cal-month-view {
+    background-color: map-get($theme, bg-primary);
+
+    .cal-cell-row:hover {
+      background-color: map-get($theme, bg-secondary);
+    }
+
+    .cal-cell-row .cal-cell:hover,
+    .cal-cell.cal-has-events.cal-open {
+      background-color: map-get($theme, bg-active);
+    }
+
+    .cal-days {
+      border-color: map-get($theme, border-color);
+    }
+
+    .cal-day-cell.cal-in-month.cal-event-highlight {
+      background: map-get($theme, bg-highlight) !important;
+    }
+
+    .cal-day-cell:not(:last-child) {
+      border-right-color: map-get($theme, border-color);
+
+      [dir='rtl'] & {
+        border-right-color: initial;
+        border-left-color: map-get($theme, border-color);
+      }
+    }
+
+    .cal-days .cal-cell-row {
+      border-bottom-color: map-get($theme, border-color);
+    }
+
+    .cal-day-badge {
+      background-color: map-get($theme, badge-color);
+      color: map-get($theme, white);
+    }
+
+    .cal-event {
+      background-color: map-get($theme, event-icon-color);
+      border-color: map-get($theme, event-color-secondary);
+      color: map-get($theme, white);
+    }
+
+    .cal-day-cell.cal-weekend .cal-day-number {
+      color: map-get($theme, weekend-color);
+    }
+
+    .cal-day-cell.cal-today {
+      background-color: map-get($theme, today-bg);
+    }
+
+    .cal-day-cell.cal-drag-over {
+      background-color: map-get($theme, bg-active-dragover);
+    }
+
+    .cal-open-day-events {
+      color: map-get($theme, white);
+      background-color: map-get($theme, gray);
+      box-shadow: map-get($theme, gradient);
+    }
+  }
+}

package/lib/extension/calendar/style/week/calendar-week-view.scss

@@ -0,0 +1,377 @@
+@use 'sass:map';
+@use '../variables';
+
+@mixin cal-week-view-core() {
+  .cal-week-view {
+    * {
+      box-sizing: border-box;
+    }
+
+    .cal-day-headers {
+      display: flex;
+      padding-left: 70px;
+      border: 1px solid;
+
+      [dir='rtl'] & {
+        padding-left: initial;
+        padding-right: 70px;
+      }
+    }
+
+    .cal-day-headers .cal-header {
+      flex: 1;
+      text-align: center;
+      padding: 5px;
+
+      &:not(:last-child) {
+        border-right: 1px solid;
+
+        [dir='rtl'] & {
+          border-right: initial;
+          border-left: 1px solid;
+        }
+      }
+
+      &:first-child {
+        border-left: 1px solid;
+
+        [dir='rtl'] & {
+          border-left: initial;
+          border-right: 1px solid;
+        }
+      }
+    }
+
+    .cal-day-headers span {
+      font-weight: 400;
+      opacity: variables.$cal-hint-opacity;
+    }
+
+    .cal-day-column {
+      flex-grow: 1;
+      border-left: solid 1px;
+
+      [dir='rtl'] & {
+        border-left: initial;
+        border-right: solid 1px;
+      }
+    }
+
+    .cal-event {
+      font-size: 12px;
+      border: 1px solid;
+      direction: ltr;
+    }
+
+    .cal-time-label-column {
+      width: 70px;
+      height: 100%;
+    }
+
+    .cal-current-time-marker {
+      position: absolute;
+      // width: 100%; // breaks out of box sometimes
+      height: 2px;
+      z-index: 2;
+    }
+
+    .cal-all-day-events {
+      border: solid 1px;
+      border-top: 0;
+      border-bottom-width: 3px;
+      padding-top: 3px;
+      position: relative;
+
+      .cal-day-columns {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        position: absolute;
+        top: 0;
+        z-index: 0;
+      }
+
+      .cal-events-row {
+        position: relative;
+        height: 31px;
+        margin-left: 70px;
+
+        [dir='rtl'] & {
+          margin-left: initial;
+          margin-right: 70px;
+        }
+      }
+
+      .cal-event-container {
+        display: inline-block;
+        position: absolute;
+
+        &.resize-active {
+          z-index: 1;
+          pointer-events: none;
+        }
+      }
+
+      .cal-event {
+        padding: 0 5px;
+        margin-left: 2px;
+        margin-right: 2px;
+        height: 28px;
+        line-height: 28px;
+      }
+
+      .cal-starts-within-week .cal-event {
+        border-top-left-radius: 5px;
+        border-bottom-left-radius: 5px;
+
+        [dir='rtl'] & {
+          border-top-left-radius: initial;
+          border-bottom-left-radius: initial;
+          border-top-right-radius: 5px !important;
+          border-bottom-right-radius: 5px !important;
+        }
+      }
+
+      .cal-ends-within-week .cal-event {
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+
+        [dir='rtl'] & {
+          border-top-right-radius: initial;
+          border-bottom-right-radius: initial;
+          border-top-left-radius: 5px;
+          border-bottom-left-radius: 5px;
+        }
+      }
+
+      .cal-time-label-column {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+      }
+
+      .cal-resize-handle {
+        width: 6px;
+        height: 100%;
+        cursor: col-resize;
+        position: absolute;
+        top: 0;
+
+        &.cal-resize-handle-after-end {
+          right: 0;
+
+          [dir='rtl'] & {
+            right: initial;
+            left: 0;
+          }
+        }
+      }
+    }
+
+    .cal-event,
+    .cal-header {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .cal-drag-active {
+      pointer-events: none;
+      z-index: 1;
+
+      & * {
+        pointer-events: none;
+      }
+    }
+
+    .cal-time-events {
+      position: relative;
+      border: solid 1px;
+      border-top: 0;
+      display: flex;
+
+      .cal-day-columns {
+        display: flex;
+        flex-grow: 1;
+      }
+
+      .cal-day-column {
+        position: relative;
+      }
+
+      .cal-events-container {
+        position: relative;
+      }
+
+      .cal-event-container {
+        position: absolute;
+        z-index: 1;
+      }
+
+      .cal-event {
+        width: calc(100% - 2px);
+        height: calc(100% - 2px);
+        margin: 1px;
+        padding: 0 5px;
+        line-height: 25px;
+      }
+
+      .cal-resize-handle {
+        width: 100%;
+        height: 4px;
+        cursor: row-resize;
+        position: absolute;
+
+        &.cal-resize-handle-after-end {
+          bottom: 0;
+        }
+      }
+    }
+
+    .cal-hour-segment {
+      position: relative;
+
+      &::after {
+        content: '\00a0';
+      }
+    }
+
+    .cal-event-container:not(.cal-draggable) {
+      cursor: pointer;
+    }
+
+    .cal-draggable {
+      cursor: move;
+    }
+
+    /* stylelint-disable-next-line selector-type-no-unknown */
+    mwl-calendar-week-view-hour-segment, /* fix for https://github.com/mattlewis92/angular-calendar/issues/260*/
+    .cal-hour-segment {
+      display: block;
+    }
+
+    .cal-hour:not(:last-child) .cal-hour-segment,
+    .cal-hour:last-child :not(:last-child) .cal-hour-segment {
+      border-bottom: thin dashed;
+    }
+
+    .cal-time {
+      font-weight: bold;
+      padding-top: 5px;
+      width: 70px;
+      text-align: center;
+    }
+
+    .cal-hour-segment.cal-after-hour-start {
+      .cal-time {
+        display: none;
+      }
+    }
+
+    .cal-starts-within-day .cal-event {
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+    }
+
+    .cal-ends-within-day .cal-event {
+      border-bottom-left-radius: 5px;
+      border-bottom-right-radius: 5px;
+    }
+  }
+}
+
+@mixin cal-week-view-theme($overrides) {
+  $theme: map-merge(variables.$cal-vars, $overrides);
+
+  .cal-week-view {
+    background-color: map-get($theme, bg-primary);
+    border-top: solid 1px map-get($theme, border-color);
+
+    .cal-day-headers {
+      border-color: map-get($theme, border-color);
+      // border-top: 0;
+    }
+
+    .cal-day-headers .cal-header {
+      &:not(:last-child) {
+        border-right-color: map-get($theme, border-color);
+
+        [dir='rtl'] & {
+          border-right-color: initial;
+          border-left: solid 1px map-get($theme, border-color) !important;
+        }
+      }
+
+      &:first-child {
+        border-left-color: map-get($theme, border-color);
+
+        [dir='rtl'] & {
+          border-left-color: initial;
+          border-right-color: map-get($theme, border-color);
+        }
+      }
+    }
+
+    .cal-day-headers .cal-header:hover,
+    .cal-day-headers .cal-drag-over {
+      background-color: map-get($theme, bg-active);
+    }
+
+    .cal-day-column {
+      border-left-color: map-get($theme, border-color);
+
+      [dir='rtl'] & {
+        border-left-color: initial;
+        border-right-color: map-get($theme, border-color);
+      }
+    }
+
+    .cal-event {
+      background-color: map-get($theme, event-color-secondary);
+      border-color: map-get($theme, event-color-primary);
+      color: map-get($theme, event-color-primary);
+    }
+
+    .cal-all-day-events {
+      border-color: map-get($theme, border-color);
+    }
+
+    .cal-header.cal-today {
+      background-color: map-get($theme, today-bg);
+    }
+
+    .cal-header.cal-weekend span {
+      color: map-get($theme, weekend-color);
+    }
+
+    .cal-time-events {
+      border-color: map-get($theme, border-color);
+
+      .cal-day-columns {
+        &:not(.cal-resize-active) {
+          .cal-hour-segment:hover {
+            background-color: map-get($theme, bg-active);
+          }
+        }
+      }
+    }
+
+    .cal-hour-odd {
+      background-color: map-get($theme, bg-secondary);
+    }
+
+    .cal-drag-over .cal-hour-segment {
+      background-color: map-get($theme, bg-active);
+    }
+
+    .cal-hour:not(:last-child) .cal-hour-segment,
+    .cal-hour:last-child :not(:last-child) .cal-hour-segment {
+      border-bottom-color: map-get($theme, border-color);
+    }
+
+    .cal-current-time-marker {
+      background-color: map-get($theme, current-time-marker-color);
+    }
+  }
+}

package/lib/extension/index.d.ts

@@ -0,0 +1 @@
+export * from './calendar';

package/lib/index.d.ts

@@ -1,6 +1,7 @@
 export * from './action';
 export * from './button';
 export * from './error';
+export * from './extension';
 export * from './interaction';
 export * from './keypress';
 export * from './loading';

package/lib/layout/column/_column.scss

@@ -27,11 +27,6 @@ $two-columns-right-padding-size: 6px;
 
       overflow: auto;
       // background: red;
-
-      .two-column-reverse-sizing & {
-        width: calc(100% - #{$two-column-left-width});
-        overflow: hidden;
-      }
     }
 
     .right-column {
@@ -67,6 +62,23 @@ $two-columns-right-padding-size: 6px;
     }
   }
 
+  .dbx-two-column.two-column-reverse-sizing {
+    .left-column {
+      width: calc(100% - #{$two-column-left-width});
+      overflow: hidden;
+    }
+
+    .right-column {
+      max-width: $two-column-left-width;
+    }
+
+    &.hide-left-column {
+      .right-column {
+        max-width: 100%;
+      }
+    }
+  }
+
   .dbx-two-column-head {
     padding: 0 6px; // only padded on the left
     border-bottom: 1px solid rgba(0, 0, 0, 0.14);

package/lib/layout/column/two/two.column.component.d.ts

@@ -23,8 +23,8 @@ export declare class DbxTwoColumnComponent extends AbstractSubscriptionDirective
     private elementRef;
     readonly cdRef: ChangeDetectorRef;
     private _view;
-    private _reverseSizing;
     private _inSectionPage;
+    readonly reverseSizing$: Observable<boolean>;
     readonly hideLeftColumn$: Observable<boolean>;
     readonly showRight$: Observable<boolean>;
     readonly showFullLeft$: Observable<boolean>;

package/lib/layout/column/two/two.column.store.d.ts

@@ -4,6 +4,13 @@ import { SegueRef } from '@dereekb/dbx-core';
 import { Maybe } from '@dereekb/util';
 import * as i0 from "@angular/core";
 export interface TwoColumnsState {
+    /**
+     * Whether or not to reverse the sizing.
+     */
+    reverseSizing: boolean;
+    /**
+     * Whether or not the right side should be shown.
+     */
     showRight: boolean;
     /**
      * Whether or not to allow the left to fill up the screen when no right is shown.
@@ -27,6 +34,10 @@ export declare class TwoColumnsContextStore extends ComponentStore<TwoColumnsSta
     private readonly _back;
     constructor();
     readonly hideLeft$: import("rxjs").Observable<boolean>;
+    /**
+     * Pipes the current state of reverseSizing.
+     */
+    readonly reverseSizing$: import("rxjs").Observable<boolean>;
     /**
      * Pipes the current state of showRight.
      */
@@ -55,6 +66,10 @@ export declare class TwoColumnsContextStore extends ComponentStore<TwoColumnsSta
      * Completely resets the store.
      */
     readonly reset: () => void;
+    /**
+     * Changes the state to show right or not.
+     */
+    readonly setReverseSizing: (() => void) | ((observableOrValue: Maybe<boolean> | import("rxjs").Observable<Maybe<boolean>>) => import("rxjs").Subscription);
     /**
      * Changes the state to show right or not.
      */

package/lib/style/_all-core.scss

@@ -4,13 +4,15 @@
 @use '../interaction/interaction';
 @use '../layout/layout';
 @use '../router/router';
+@use '../extension/extension';
 
 // Includes all theming config
-@mixin all-component-core() {
+@mixin all-component-core($theme-config) {
   @include button.core();
   @include error.core();
   @include action.all-action-core();
   @include interaction.all-interaction-core();
   @include layout.all-layout-core();
   @include router.all-router-core();
+  @include extension.all-extension-core($theme-config);
 }

package/lib/style/_all-theme.scss

@@ -5,6 +5,7 @@
 @use '../interaction/interaction';
 @use '../layout/layout';
 @use '../router/router';
+@use '../extension/extension';
 
 // Includes all theming config
 @mixin all-component-themes($theme-config) {
@@ -14,4 +15,5 @@
   @include interaction.all-interaction-theme($theme-config);
   @include layout.all-layout-theme($theme-config);
   @include router.all-router-theme($theme-config);
+  @include extension.all-extension-theme($theme-config);
 }