@tylertech/forge 2.0.0

package/styles/dialog/_mixins.scss

@@ -0,0 +1,199 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '@material/animation/animation' as mdc-animation;
+@use '@material/elevation/elevation-theme';
+@use '@material/shape/shape';
+@use '@material/theme/theme' as mdc-theme;
+@use '@material/typography/typography' as mdc-typography;
+@use '../typography/mixins' as typography;
+@use '../utils/mixins' as utils;
+@use '../theme';
+@use '../utils/mixins-media';
+@use './variables';
+
+@mixin core-styles() {
+  .forge-dialog {
+    @include base;
+  
+    &--moveable:not(.forge-dialog--fullscreen) {
+      ::slotted([forge-dialog-move-target]) {
+        cursor: move;
+      }
+    }
+  
+    &--animating {
+      @include animating;
+  
+      .forge-dialog--open .forge-dialog__surface {
+        @include surface-open-animating;
+      }
+  
+      .forge-dialog__surface {
+        @include surface-animating;
+      }
+    }
+  
+    &--scrollable {
+      .forge-dialog__title,
+      .forge-dialog__footer {
+        border-color: rgba(0, 0, 0, 0.12);
+      }
+    }
+  
+    &--open {
+      @include open;
+  
+      .forge-dialog__surface {
+        @include surface-open;
+      }
+    }
+  
+    &__surface {
+      @include surface;
+    }
+  
+    &__header {
+      @include header;
+    }
+  
+    &__title {
+      @include title;
+    }
+  
+    &__body {
+      @include body;
+  
+      &--scrollable {
+        @include body-scrollable;
+      }
+    }
+  
+    &__footer {
+      @include footer;
+    }
+  
+    &--fullscreen {
+      @include fullscreen;
+  
+      .forge-dialog__surface {
+        @include surface-fullscreen;
+      }
+    }
+  }
+}
+
+@mixin base() {
+  @include utils.position-abs-zero(fixed);
+  @include theme.z-index(dialog);
+  @include theme.css-custom-property(align-items, --forge-dialog-align-items, center);
+  @include theme.css-custom-property(top, --forge-dialog-top, 0);
+  @include theme.css-custom-property(padding, --forge-dialog-padding, variables.$padding);
+
+  display: flex;
+  justify-content: center;
+  visibility: hidden;
+
+  @include mixins-media.phone-only {
+    @include fullscreen;
+  }
+}
+
+@mixin fullscreen() {
+  padding: 0;
+}
+
+@mixin surface() {
+  @include elevation-theme.elevation(24);
+  @include mdc-theme.property(background-color, surface);
+  @include theme.css-custom-property(width, --forge-dialog-width, auto);
+  @include theme.css-custom-property(height, --forge-dialog-height, auto);
+  @include theme.css-custom-property(min-width, --forge-dialog-min-width, variables.$surface-min-width);
+  @include theme.css-custom-property(max-width, --forge-dialog-max-width, 100%);
+  @include theme.css-custom-property(max-height, --forge-dialog-max-height, 100%);
+  @include theme.css-custom-property(border-radius, --forge-dialog-border-radius, shape.resolve-radius(medium));
+  
+  display: inline-flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  transform: variables.$surface-transform;
+  opacity: 0;
+  overflow: hidden;
+  z-index: inherit;
+}
+
+@mixin surface-fullscreen() {
+  height: 100%;
+  width: 100%;
+  min-width: auto;
+  max-width: 100%;
+  border-radius: 0;
+}
+
+@mixin animating() {
+  visibility: visible;
+}
+
+@mixin surface-open-animating() {
+  transition: mdc-animation.enter(transform, variables.$transition-duration);
+}
+
+@mixin surface-animating() {
+  transition: mdc-animation.enter(transform, variables.$transition-duration);
+}
+
+@mixin open() {
+  visibility: visible !important;
+}
+
+@mixin surface-open() {
+  transform: scale(1);
+  opacity: 1;
+}
+
+@mixin header() {
+  margin: 0;
+  padding: 0 24px 9px;
+  border-bottom: 1px solid transparent;
+}
+
+@mixin title() {
+  @include mdc-typography.baseline-top(40px);
+  @include typography.typography(title);
+
+  box-sizing: border-box;
+  margin: 0;
+}
+
+@mixin body() {
+  @include mdc-typography.typography(body1);
+
+  padding-top: variables.$body-margin-top;
+  padding: variables.$body-padding;
+  overflow: auto;
+}
+
+@mixin body-scrollable() {
+  max-height: variables.$scrollable-max-height;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  overflow-x: auto;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+
+@mixin footer() {
+  display: flex;
+  position: relative;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  min-height: 52px;
+  margin: 0;
+  padding: variables.$footer-padding;
+  border-top: 1px solid transparent;
+}

package/styles/dialog/_variables.scss

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+$transition-duration: 150ms !default;
+
+$padding: 24px !default;
+
+$surface-width: calc(100% - 30px) !default;
+$surface-min-width: 280px !default;
+$surface-max-width: 865px !default;
+$surface-transform: scale(0.8) !default;
+$surface-border-radius: 4px !default;
+
+$header-padding: 24px 24px 0 !default;
+$body-padding: 0 24px 24px !default;
+$footer-padding: 8px !default;
+
+$body-margin-top: 20px !default;
+
+$scrollable-max-height: 195px !default;

package/styles/dialog/dialog.scss

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './mixins';
+
+@include mixins.core-styles;
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}

package/styles/dialog/forge-dialog-utils.scss

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './mixins';
+
+.forge-dialog {
+  &--scrollable {
+    .forge-dialog__title,
+    .forge-dialog__footer {
+      border-color: rgba(0, 0, 0, 0.12);
+    }
+  }
+
+  &__header {
+    @include mixins.header;
+  }
+
+  &__title {
+    @include mixins.title;
+  }
+
+  &__body {
+    @include mixins.body;
+  }
+
+  &__footer {
+    @include mixins.footer;
+  }
+}

package/styles/dialog/forge-dialog.scss

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+body[forge-dialog-open=true] {
+  overflow: hidden;
+}

package/styles/divider/_mixins.scss

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../theme';
+@use './variables';
+
+@mixin core-styles() {
+  .forge-divider {
+    @include base;
+  }
+}
+
+@mixin host() {
+  display: block;
+  contain: content;
+}
+
+@mixin base() {
+  border: none;
+
+  @include theme.property(border-bottom-color, border-color);
+  @include theme.css-custom-property(border-bottom-width, --forge-divider-width, variables.$width);
+  @include theme.css-custom-property(margin, --forge-divider-margin, variables.$margin);
+
+  height: 0;
+  border-bottom-style: solid;
+}
+
+@mixin vertical-base() {
+  border: none;
+
+  @include theme.property(border-right-color, border-color);
+  @include theme.css-custom-property(border-right-width, --forge-divider-width, variables.$width);
+  @include theme.css-custom-property(margin, --forge-divider-margin, variables.$margin);
+
+  height: 100%;
+  width: 0;
+  border-right-style: solid;
+}
+
+@mixin vertical-host {
+  display: inline-block;
+  // needed for non-flex areas
+  height: 100%;
+}

package/styles/divider/_variables.scss

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+$width: 1px !default;
+$margin: 0 !default;

package/styles/divider/divider.scss

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './mixins';
+
+@include mixins.core-styles;
+
+:host {
+  @include mixins.host;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host-context(forge-drawer) {
+  .forge-divider {
+    margin: var(--forge-divider-drawer-margin, 4px) 0;
+  }
+}
+
+:host([vertical]) {
+  @include mixins.vertical-host;
+
+  .forge-divider {
+    @include mixins.vertical-base;
+  }
+}
+

package/styles/drawer/base/_mixins.scss

@@ -0,0 +1,137 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '@material/theme/theme' as mdc-theme;
+@use '@material/animation/variables' as mdc-animation-variables;
+@use '../../theme';
+@use './variables';
+
+@mixin core-styles() {
+  .forge-drawer {
+    @include base;
+  
+    ::slotted([slot='header']) {
+      @include header;
+    }
+  
+    ::slotted([slot='footer']) {
+      @include footer;
+    }
+  
+    &__content {
+      @include content;
+    }
+  
+    &--left {
+      @include left;
+    }
+  
+    &--right {
+      @include right;
+
+      &.forge-drawer--closing {
+        @include closing(right);
+      }
+
+      &.forge-drawer--closed {
+        @include closed(right);
+      }
+    }
+
+    &--closing {
+      @include closing(left);
+    }
+
+    &--closed {
+      @include closed(left);
+    }
+  
+    &--no-transition {
+      transition: none !important;
+    }
+  }
+}
+
+@mixin host() {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  height: 100%;
+  overflow: hidden !important; // Using important to ensure that it overrides the scaffold overflow style
+}
+
+@mixin base() {
+  @include theme.css-custom-property(width, --forge-drawer-width, variables.$width);
+  @include theme.property(border-color, border-color);
+  @include mdc-theme.property(background-color, surface);
+
+  height: 100%;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto 1fr auto;
+  overflow: hidden;
+  transition-property: transform;
+  transition-duration: variables.$transition-duration;
+  transition-timing-function: mdc-animation-variables.$standard-curve-timing-function;
+}
+
+@mixin header() {
+  grid-row: 1;
+}
+
+@mixin content() {
+  @include theme.scrollbar;
+
+  overflow-x: auto;
+  -webkit-overflow-scrolling: 'touch';
+  display: flex;
+  flex-direction: column;
+  grid-row: 2;
+}
+
+@mixin footer() {
+  grid-row: 3;
+}
+
+
+@mixin left() {
+  border-right-width: variables.$border-width;
+  border-right-style: solid;
+}
+
+@mixin right() {
+  border-left-width: variables.$border-width;
+  border-left-style: solid;
+}
+
+@mixin closed($direction: left) {
+  @include closed-direction($direction);
+
+  width: 0;
+  border: none;
+}
+
+@mixin closing($direction: left) {
+  @include closed-direction($direction);
+  @include theme.z-index(surface);
+
+  position: absolute;
+  top: 0;
+  right: 0;
+  transition-duration: variables.$transition-duration-close;
+
+}
+
+@mixin closed-direction($direction: left) {
+  @if $direction == right {
+    transform: translateX(100%);
+    right: 0;
+    left: auto;
+  } @else {
+    transform: translateX(-100%);
+    left: 0;
+  }
+}

package/styles/drawer/base/_variables.scss

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '@material/drawer/variables' as mdc-drawer-variables;
+
+$border-width: 1px !default;
+$width: mdc-drawer-variables.$width !default;
+$transition-duration: 250ms !default;
+$transition-duration-close: 200ms !default;

package/styles/drawer/drawer/_mixins.scss

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../base/mixins' as base-mixins;
+
+@mixin core-styles() {
+  @include base-mixins.core-styles;
+}

package/styles/drawer/drawer/_variables.scss

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '@material/drawer/variables' as mdc-drawer-variables;
+
+$border-width: 1px !default;
+$width: mdc-drawer-variables.$width !default;
+$mini-width: 56px !default;
+$mini-transition-delay: 300ms !default;
+$transition-duration: 300ms !default;

package/styles/drawer/drawer/drawer.scss

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './mixins';
+@use '../base/mixins' as base-mixins;
+
+@include mixins.core-styles;
+
+:host {
+  @include base-mixins.host;
+}
+
+/// 
+/// Safari fix for triggering reflow after transition completes (as of Safari 14)
+///
+// stylelint-disable-next-line unit-allowed-list
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance:none) and (stroke-color: transparent) {
+    :host([open]) {
+      transform: translateZ(0);
+    }
+  }
+}

package/styles/drawer/mini-drawer/_mixins.scss

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '@material/animation/animation' as mdc-animation;
+@use './variables';
+@use '../base/mixins' as base-mixins;
+@use '../base/variables' as base-variables;
+@use '../../theme';
+
+@mixin core-styles() {
+  @include base-mixins.core-styles;
+
+  .forge-drawer__root {
+    @include root;
+  }
+
+  .forge-drawer {
+    &--mini {
+      @include base;
+  
+      .forge-drawer__content {
+        overflow: hidden;
+      }
+    }
+
+    &--closed {
+      width: 0;
+    }
+  }
+}
+
+@mixin host() {
+  @include base-mixins.host;
+  @include theme.css-custom-property(width, --forge-drawer-mini-width, variables.$width);
+
+  overflow: visible !important;
+}
+
+@mixin host-right {
+  @include theme.css-custom-property(min-width, --forge-drawer-mini-width, variables.$width);
+  
+  width: auto;
+}
+
+@mixin base() {
+  @include theme.css-custom-property(width, --forge-drawer-mini-width, variables.$width);
+  @include theme.z-index(surface);
+
+  transform: translateX(0);
+  transition-property: transform, width;
+  transition: width 200ms mdc-animation.$standard-curve-timing-function;
+}
+
+@mixin root() {
+  @include theme.z-index(surface);
+
+  height: 100%;
+}
+
+@mixin hover() {
+  @include theme.css-custom-property(width, --forge-drawer-width, base-variables.$width, true);
+
+  transition: width 300ms mdc-animation.$standard-curve-timing-function variables.$transition-delay;
+}

package/styles/drawer/mini-drawer/_variables.scss

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+$width: 56px;
+$transition-delay: 300ms;

package/styles/drawer/mini-drawer/mini-drawer.scss

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './mixins';
+
+@include mixins.core-styles;
+
+:host {
+  @include mixins.host;
+}
+
+:host([direction=right]) {
+  @include mixins.host-right;
+
+  .forge-drawer__root {
+    position: relative;
+  }
+}
+
+:host(:not([open])) {
+  display: none;
+}
+
+:host([hover]) {
+  .forge-drawer--right {
+    position: absolute;
+    right: 0;
+  }
+
+  .forge-drawer:hover {
+    @include mixins.hover;
+
+    .forge-drawer__content {
+      overflow: auto;
+      overflow: overlay; // Only supported by Chrome, Safari, Opera
+    }
+  }
+}