@tylertech/forge 2.8.0 → 2.10.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Forge Web Components library",
-  "version": "2.8.0",
+  "version": "2.10.0",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,7 +13,7 @@
   "typings": "esm/index.d.ts",
   "sideEffects": false,
   "dependencies": {
-    "@tylertech/forge-core": "^2.0.0",
+    "@tylertech/forge-core": "^2.1.0",
     "@tylertech/tyler-icons": "^1.12.0",
     "imask": "^6.4.2",
     "material-components-web": "^14.0.0",

package/styles/chip-field/_base.scss

@@ -167,11 +167,11 @@
 
   // Default
   @if $layout-state == default or $layout-state == shape-rounded {
-    --forge-chip-height: #{map.get(variables.$member, height, default)};
+    --forge-chip-min-height: #{map.get(variables.$member, min-height, default)};
   }
   // Dense
   @else if $layout-state == dense or $layout-state == shape-rounded-dense {
-    --forge-chip-height: #{map.get(variables.$member, height, dense)};
+    --forge-chip-min-height: #{map.get(variables.$member, min-height, dense)};
   }
   // Roomy uses the default chip height
   @include field-utils.error-layout-state(member-height, $layout-state);

package/styles/chip-field/_selector.scss

@@ -125,7 +125,7 @@
 @mixin input {
   // Base
   // chip-field input should have no padding, so we exclude padding from the base.
-  @include field-selector.input('::slotted(input)', $exclude: (padding, padding-top, padding-right, padding-bottom, padding-left));
+  @include field-selector.input('::slotted(input)', $exclude: (padding, padding-top, padding-right, padding-bottom, padding-left), $component-name: 'forge-chip-field');
   // Core
   ::slotted(input) {
     @include base.input-core;

package/styles/chip-field/_variables.scss

@@ -28,7 +28,7 @@ $input-container: (
 ) !default;
 
 $member: (
-  height: (
+  min-height: (
     default: 20px,
     dense: 16px
   ),

package/styles/chips/chip/_mixins.scss

@@ -138,7 +138,7 @@
       @include dense;
 
       &.forge-chip--field {
-        @include theme.css-custom-property(height, --forge-chip-height, 20px);
+        @include theme.css-custom-property(min-height, --forge-chip-min-height, variables.$dense-field-min-height);
         padding: 0;
         margin: 0;
         display: flex;
@@ -192,7 +192,8 @@
   @include button-mixins.outlined;
   @include mdc-chip-theme.shape-radius(50%);
   @include theme.css-custom-property(width, --forge-chip-width, auto);
-  @include theme.css-custom-property(height, --forge-chip-height, variables.$height);
+  @include theme.css-custom-property(height, --forge-chip-height, auto);
+  @include theme.css-custom-property(min-height, --forge-chip-min-height, variables.$min-height);
 
   box-sizing: border-box;
   transition: mdc-animation.enter(background-color, 150ms);
@@ -273,5 +274,5 @@
 }
 
 @mixin dense() {
-  @include theme.css-custom-property(height, --forge-chip-height, variables.$dense-height);
+  @include theme.css-custom-property(min-height, --forge-chip-min-height, variables.$dense-min-height);
 }

package/styles/chips/chip/_variables.scss

@@ -3,5 +3,6 @@
  * Copyright 2022 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-$height: 36px !default;
-$dense-height: 28px !default;
+$min-height: 36px !default;
+$dense-min-height: 28px !default;
+$dense-field-min-height: 20px !default;

package/styles/field/_base.scss

@@ -380,18 +380,30 @@
   @include utils.error-theme-state(input-color, $theme-state);
 }
 
-@mixin input-font-size($layout-state) {
+@mixin input-font-size($layout-state, $custom-prop-font-size) {
   // Default
   @if $layout-state == default or $layout-state == shape-rounded {
-    font-size: map.get(variables.$input, font-size, default);
+    @include theme.css-custom-property(
+      font-size,
+      $custom-prop-font-size,
+      map.get(variables.$input, font-size, default)
+    );
   }
   // Roomy
   @else if $layout-state == roomy or $layout-state == shape-rounded-roomy {
-    font-size: map.get(variables.$input, font-size, roomy);
+    @include theme.css-custom-property(
+      font-size,
+      $custom-prop-font-size,
+      map.get(variables.$input, font-size, roomy)
+    );
   }
   // Dense
   @else if $layout-state == dense or $layout-state == shape-rounded-dense {
-    font-size: map.get(variables.$input, font-size, dense);
+    @include theme.css-custom-property(
+      font-size,
+      $custom-prop-font-size,
+      map.get(variables.$input, font-size, dense)
+    );
   }
   @include utils.error-layout-state(input-font-size, $layout-state);
 }

package/styles/field/_selector.scss

@@ -272,7 +272,7 @@
   }
 }
 
-@mixin input($input-selector: '::slotted(input)', $exclude: ()) {
+@mixin input($input-selector: '::slotted(input)', $exclude: (), $component-name: 'forge-field') {
   // Core
   @if list.index($exclude, core) == null {
     #{$input-selector} {
@@ -296,17 +296,17 @@
   @if list.index($exclude, font-size) == null {
     &:not(.forge-field--dense):not(.forge-field--roomy) {
       #{$input-selector} {
-        @include base.input-font-size(default);
+        @include base.input-font-size(default, --#{$component-name}-font-size);
       }
     }
     &--roomy:not(.forge-field--dense) {
       #{$input-selector} {
-        @include base.input-font-size(roomy);
+        @include base.input-font-size(roomy, --#{$component-name}-font-size);
       }
     }
     &--dense:not(.forge-field--roomy) {
       #{$input-selector} {
-        @include base.input-font-size(dense);
+        @include base.input-font-size(dense, --#{$component-name}-font-size);
       }
     }
   }

package/styles/quantity-field/_mixins.scss

@@ -77,7 +77,7 @@
   &::before {
     @include mdc-theme.property(color, error);
     content: '*';
-    margin-right: 1px;
+    margin-right: 4px;
   }
 }
 

package/styles/select/select/_selector.scss

@@ -21,7 +21,7 @@
   }
 
   // Field Input Styles
-  @include field-selector.input('.forge-select__selected-text', $exclude: (core, padding-right));
+  @include field-selector.input('.forge-select__selected-text', $exclude: (core, padding-right), $component-name: 'forge-select');
 
   // Line Height
   &:not(.forge-field--label) {

package/styles/split-view/split-view/_mixins.scss

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../theme/theme';
+
+@mixin core-styles() {
+  .forge-split-view {
+    @include base;
+  }
+}
+
+@mixin horizontal-styles() {
+  .forge-split-view {
+    @include base-horizontal;
+  }
+}
+
+@mixin vertical-styles() {
+  .forge-split-view {
+    @include base-vertical;
+  }
+}
+
+@mixin host() {
+  --forge-split-view-handle-width: 8px;
+
+  display: block;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  contain: paint size;
+}
+
+@mixin base() {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+@mixin base-horizontal() {
+  flex-direction: row;
+}
+
+@mixin base-vertical() {
+  flex-direction: column;
+}

package/styles/split-view/split-view/split-view.scss

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './mixins';
+@use '../../ripple/forge-ripple.scss';
+
+@include mixins.core-styles;
+
+:host {
+  @include mixins.host;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host([orientation=horizontal]) {
+  @include mixins.horizontal-styles;
+}
+
+:host([orientation=vertical]) {
+  @include mixins.vertical-styles;
+}

package/styles/split-view/split-view-panel/_mixins.scss

@@ -0,0 +1,260 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '@material/animation/variables' as mdc-animation-variables;
+@use './variables';
+@use '../../theme/theme';
+
+@mixin core-styles() {
+  .forge-split-view-panel {
+    @include base;
+
+    &__handle {
+      @include handle;
+    }
+
+    &__content {
+      @include content;
+    }
+
+    &--closed {
+      @include closed;
+    }
+
+    &--disabled {
+      // Use an id selector to increase specificity
+      #handle {
+        @include handle-disabled;
+      }
+
+      .forge-split-view-panel__icon {
+        @include icon-disabled;
+      }
+    }
+  }
+}
+
+@mixin horizontal-styles() {
+  .forge-split-view-panel[orientation=horizontal] {
+    @include base-horizontal;
+
+    .forge-split-view-panel {
+      &__handle {
+        @include handle-orientation(horizontal);
+        @include cursor(horizontal);
+      }
+    }
+
+    &.forge-split-view-panel--closing {
+      &[resizable=end] {
+        @include closing($direction: left);
+      }
+
+      &[resizable=start] {
+        @include closing($direction: right);
+      }
+    }
+
+    &.forge-split-view-panel--opening {
+      &[resizable=end] {
+        @include opening($direction: left);
+      }
+
+      &[resizable=start] {
+        @include opening($direction: right);
+      }
+    }
+  }
+}
+
+@mixin vertical-styles() {
+  .forge-split-view-panel[orientation=vertical] {
+    @include base-vertical;
+
+    .forge-split-view-panel {
+      &__handle {
+        @include handle-orientation(vertical);
+        @include cursor(vertical);
+      }
+    }
+
+    &.forge-split-view-panel--closing {
+      &[resizable=end] {
+        @include closing($direction: top);
+      }
+
+      &[resizable=start] {
+        @include closing($direction: bottom);
+      }
+    }
+
+    &.forge-split-view-panel--opening {
+      &[resizable=end] {
+        @include opening($direction: top);
+      }
+
+      &[resizable=start] {
+        @include opening($direction: bottom);
+      }
+    }
+  }
+}
+
+@mixin static-styles() {
+  @include host-static;
+
+  .forge-split-view-panel {
+    @include base-static;
+
+    &__handle {
+      @include handle-static;
+    }
+  }
+}
+
+@mixin host() {
+  // There is no fallback value for the animating layer
+  @include theme.css-custom-property(z-index, --forge-split-view-animating-layer, $important: true);
+
+  display: block;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  flex: 0;
+}
+
+@mixin host-static() {
+  flex: 1;
+}
+
+@mixin base() {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  contain: paint size;
+}
+
+@mixin base-horizontal() {
+  @include theme.css-custom-property(min-width, --forge-split-view-handle-width, variables.$handle-width);
+
+  width: calc(var(--forge-split-view-panel-size, unset) + var(--forge-split-view-handle-width, variables.$handle-width));
+  flex-direction: row;
+}
+
+@mixin base-vertical() {
+  @include theme.css-custom-property(min-height, --forge-split-view-handle-width, variables.$handle-width);
+
+  height: calc(var(--forge-split-view-panel-size, unset) + var(--forge-split-view-handle-width, variables.$handle-width));
+  flex-direction: column;
+}
+
+@mixin base-static() {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+@mixin handle() {
+  @include theme.property(color, text-secondary-on-light);
+  @include theme.property(background-color, border-color);
+
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  outline: none;
+}
+
+@mixin handle-orientation($orientation: horizontal) {
+  @if $orientation == horizontal {
+    @include theme.css-custom-property(width, --forge-split-view-handle-width, variables.$handle-width);
+  } @else {
+    @include theme.css-custom-property(height, --forge-split-view-handle-width, variables.$handle-width);
+  }
+}
+
+@mixin handle-disabled() {
+  pointer-events: none;
+}
+
+@mixin handle-static() {
+  display: none;
+}
+
+@mixin icon-disabled() {
+  display: none;
+}
+
+@mixin content() {
+  flex: 1;
+  overflow: hidden;
+}
+
+@mixin cursor($orientation: horizontal) {
+  // There is no fallback value for the panel cursor
+  @include theme.css-custom-property(cursor, --forge-split-view-panel-cursor);
+}
+
+@mixin closed() {
+  display: none;
+}
+
+@mixin closing($direction: right) {
+  @include closing-animation($direction);
+}
+
+@mixin opening($direction: right) {
+  @include closing-animation($direction);
+
+  animation-direction: reverse;
+}
+
+@mixin closing-animation($direction: right) {
+  @include animating-position($direction);
+
+  $animation-name: unique-id();
+
+  animation-name: $animation-name;
+  animation-duration: variables.$animation-duration;
+  animation-timing-function: mdc-animation-variables.$standard-curve-timing-function;
+
+  @keyframes #{$animation-name} {
+    from {
+      transform: none;
+    }
+  
+    to {
+      @if ($direction == right) {
+        transform: translateX(100%);
+      } @else if ($direction == left) {
+        transform: translateX(-100%);
+      } @else if ($direction == top) {
+        transform: translateY(-100%);
+      } @else {
+        transform: translateY(100%);
+      }
+    }
+  }
+}
+
+@mixin animating-position($direction: right) {
+  position: absolute;
+
+  @if ($direction == right) {
+    top: 0;
+    right: 0;
+  } @else if ($direction == left) {
+    top: 0;
+    left: 0;
+  } @else if ($direction == top) {
+    top: 0;
+    left: 0;
+  } @else {
+    bottom: 0;
+    left: 0;
+  }
+}

package/styles/split-view/split-view-panel/_variables.scss

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+$animation-duration: 300ms;
+$handle-width: 8px;

package/styles/split-view/split-view-panel/split-view-panel.scss

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './mixins';
+@use '../../ripple/forge-ripple.scss';
+
+@include mixins.core-styles;
+@include mixins.horizontal-styles;
+@include mixins.vertical-styles;
+
+:host {
+  @include mixins.host;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host(:not([resizable=start], [resizable=end])) {
+  @include mixins.static-styles;
+}

package/styles/table/_mixins.scss

@@ -365,6 +365,8 @@
 
 @mixin head-filter() {
   --forge-text-field-height: 2.5rem;
+  --forge-select-height: 2.5rem;
+
   .forge-table-head__cell-container {
     padding: 8px 0;
   }