@tylertech/forge 3.0.0-next.21 → 3.0.0-next.22

package/styles/dialog/dialog.scss

@@ -3,14 +3,364 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
+@use './core' as *;
+@use './animations';
+@use '../backdrop';
+@use '../core/styles/theme';
 
-@include mixins.core-styles;
+$can-animate: '[visible]:not([animation-type=none])';
 
-:host {
-  display: block;
+@layer base, nonmodal, animation, placement, size-strategy, preset, fullscreen, position-strategy, media;
+
+//
+// Base
+//
+
+@layer base {
+  //
+  // Host styles
+  //
+
+  :host {
+    @include host;
+
+    @include theme.provide((
+      surface: theme.variable(surface-bright)
+    ));
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  //
+  // Base
+  //
+
+  .forge-dialog {
+    @include tokens;
+  }
+
+  .forge-dialog {
+    @include dialog-base;
+  }
+
+  .container {
+    @include container;
+  }
+
+  .surface {
+    @include surface;
+  }
+
+  //
+  // Backdrop
+  //
+
+  dialog.forge-dialog {
+    &::backdrop {
+      display: none; // Hide the native backdrop
+    }
+  }
+
+  forge-backdrop {
+    @include backdrop.provide-theme((
+      opacity: #{token(backdrop-opacity)},
+      enter-animation-duration: #{token(enter-animation-duration)},
+      enter-animation-easing: #{token(enter-animation-easing)},
+      exit-animation-duration: #{token(exit-animation-duration)},
+      exit-animation-easing: #{token(exit-animation-easing)}
+    ));
+  }
+
+  //
+  // Moveable
+  //
+  
+  :host(:not([moveable])) {
+    .move-handle {
+      display: none;
+    }
+  }
+
+  :host([moveable]:not([fullscreen]):not([preset])) {
+    .surface {
+      @include surface-moveable;
+
+      &:not(:hover) {
+        .move-handle-container {
+          display: none; // Only show the move handle when the dialog surface is hovered
+        }
+      }
+    }
+
+    .surface.moved {
+      @include surface-moved;
+    }
+
+    .surface.moving {
+      @include surface-moving;
+    }
+
+    .move-handle-container {
+      @include move-handle-container;
+
+      .move-handle {
+        @include move-handle;
+    
+        svg {
+          fill: currentColor;
+        }
+      }
+    }
+
+  }
+
+  //
+  // Open
+  //
+
+  :host([visible]) {
+    @include host-open;
+  }
+}
+
+//
+// Non-modal
+//
+
+@layer nonmodal {
+  :host([mode=nonmodal]) {
+    .forge-dialog {
+      @include nonmodal-dialog-base;
+    }
+
+    .container {
+      display: contents;
+    }
+
+    .surface {
+      @include nonmodal-surface;
+    }
+
+    forge-backdrop {
+      display: none;
+    }
+  }
 }
 
-:host([hidden]) {
-  display: none;
+//
+// Animation
+//
+
+@layer animation {
+  :host(#{$can-animate}) {
+    dialog.forge-dialog[open] {
+      .surface {
+        @include enter;
+
+        &.exiting {
+          @include exit;
+        }
+      }
+    }
+  }
+
+  // Zoom (default)
+  :host(#{$can-animate}:is(:not([animation-type]),[animation-type=zoom])) {
+    dialog.forge-dialog[open] {
+      .surface {
+        animation-name: zoom-in;
+
+        &.exiting {
+          animation-name: zoom-out;
+        }
+      }
+    }
+  }
+
+  // Fade
+  :host(#{$can-animate}[animation-type=fade]) {
+    dialog.forge-dialog[open] {
+      .surface {
+        animation-name: fade-in;
+
+        &.exiting {
+          animation-name: fade-out;
+        }
+      }
+    }
+  }
+
+  // Slide
+  :host(#{$can-animate}[animation-type=slide]) {
+    dialog.forge-dialog[open] {
+      .surface {
+        animation-name: slide-in;
+
+        &.exiting {
+          animation-name: slide-out;
+        }
+      }
+    }
+  }
+}
+
+//
+// Placement
+//
+
+@layer placement {
+  @each $placement in ('custom', 'top', 'top-right', 'top-left', 'bottom', 'bottom-right', 'bottom-left') {
+    :host([placement=#{$placement}]) {
+      .surface {
+        @include placement($placement);
+      }
+    }
+  }
+}
+
+//
+// Size strategy
+//
+
+@layer size-strategy {
+  :host([size-strategy=container-inline]) {
+    .surface {
+      width: 100%;
+    }
+  }
+
+  :host([size-strategy=container-block]) {
+    .surface {
+      height: 100%;
+    }
+  }
+}
+
+//
+// Preset
+//
+
+@layer preset {
+  :host(#{$can-animate}:is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) {
+    .forge-dialog {
+      @include preset-sheet-dialog-base;
+    }
+
+    .surface {
+      animation-name: slide-in;
+
+      &.exiting {
+        animation-name: slide-out;
+      }
+    }
+  }
+
+  :host(:is([preset=left-sheet],[preset=right-sheet],[preset=top-sheet],[preset=bottom-sheet])) {
+    .surface {
+      @include preset-sheet-surface-base;
+    }
+  }
+
+  :host([preset=left-sheet]) {
+    .forge-dialog {
+      @include override(slide-translate, -100% 0, value);
+    }
+
+    .surface {
+      @include preset-left-sheet-surface;
+    }
+
+  }
+
+  :host([preset=right-sheet]) {
+    .forge-dialog {
+      @include override(slide-translate, 100% 0, value);
+    }
+
+    .surface {
+      @include preset-right-sheet-surface;
+    }
+  }
+
+  :host([preset=top-sheet]) {
+    .forge-dialog {
+      @include override(slide-translate, 0 -100%, value);
+    }
+
+    .surface {
+      @include preset-top-sheet-surface;
+    }
+  }
+
+  :host([preset=bottom-sheet]) {
+    .forge-dialog {
+      @include override(slide-translate, 0 100%, value);
+    }
+
+    .surface {
+      @include preset-bottom-sheet-surface;
+    }
+  }
+}
+
+//
+// Full screen
+//
+
+@layer fullscreen {
+  :host([fullscreen]) {
+    .forge-dialog {
+      @include fullscreen-dialog-base;
+    }
+
+    .surface {
+      @include fullscreen-surface;
+    }
+
+    forge-backdrop {
+      display: none;
+    }
+  }
+}
+
+//
+// Position strategy
+//
+
+@layer position-strategy {
+  :host([position-strategy=viewport]) {
+    .forge-dialog {
+      position: fixed;
+    }
+  }
+
+  :host([position-strategy=container]) {
+    .forge-dialog {
+      position: absolute;
+    }
+  }
+
+  :host([position-strategy=container][preset$=-sheet]) {
+    .forge-dialog {
+      contain: content;
+    }
+  }
+}
+
+//
+// Media
+//
+
+@layer media {
+  @media (prefers-reduced-motion: reduce) {
+    .surface {
+      animation-name: fade-in;
+
+      &.exiting {
+        animation-name: fade-out;
+      }
+    }
+  }
 }

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

@@ -3,29 +3,46 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
+// @deprecated - This file is deprecated and will be removed in the next major version of the library.
+
+@use '../core/styles/theme';
 
 .forge-dialog {
   &--scrollable {
     .forge-dialog__title,
     .forge-dialog__footer {
-      border-color: rgba(0, 0, 0, 0.12);
+      border-color: #{theme.variable(outline)};
     }
   }
 
   &__header {
-    @include mixins.header;
+    margin: 0;
+    padding: 0 24px 8px;
+    border-bottom: 1px solid transparent;
   }
 
   &__title {
-    @include mixins.title;
+    box-sizing: border-box;
+    margin: 0;
   }
 
   &__body {
-    @include mixins.body;
+    padding-top: 20px;
+    padding: 0 24px 24px;
+    overflow: auto;
   }
 
   &__footer {
-    @include mixins.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: 8px;
+    border-top: 1px solid transparent;
   }
 }

package/styles/dialog/index.scss

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@forward './animations';
+@forward './core';

package/styles/{field-next → field}/_core.layout.scss

@@ -70,6 +70,7 @@
     @include typography.style(body2);
     @include override('label-color', 'inset-label-color');
 
+    pointer-events: none;
     overflow: hidden;
 
     grid-area: center;
@@ -141,7 +142,7 @@ $resize-container-input-padding-block-end-base: 8px;
   align-items: start;
 
   border-radius: inherit;
-  
+
   min-inline-size: #{token(multiline-min-inline-size)};
   max-inline-size: #{token(multiline-max-inline-size)};
   min-block-size: #{token(multiline-min-block-size)};
@@ -152,21 +153,20 @@ $resize-container-input-padding-block-end-base: 8px;
 }
 
 @mixin resize-container-inset-label {
-  z-index: 2;
   pointer-events: none;
   inline-size: fit-content;
 }
 
 @mixin resize-container-inset-label-slot {
   display: block;
-  z-index: 1;
 }
 
 @mixin resize-container-inset-label-background {
     @include floating-animation(resize-container-inset-label-background-animation);
     
     position: absolute;
-    inset-inline-start: 0;
+    z-index: -1;
+    inset-inline-start: #{token(border-width)};
 
     transition-duration: #{token(container-animation-duration)};
     transition-property: background;
@@ -278,6 +278,8 @@ $floating-offset: #{calc($floating-offset-base + $floating-offset-adjustment)};
 }
 
 @mixin slotted-floating-input {
+  // Computes the block start padding for the input element to space it
+  // apart from label by the block size of the label content element
   padding-block-start: calc($floating-offset * 2) !important; // TODO: find a way to remove this !important
 }