@tylertech/forge 3.0.0-next.19 → 3.0.0-next.20

package/styles/field-next/_core.layout.scss

@@ -0,0 +1,350 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:string';
+@use '../core/styles/typography';
+@use './token-utils' as *;
+
+//
+// Grid
+//
+
+@mixin block-start {
+  grid-template-areas:
+    'label'
+    'container'
+    'support-text';
+  grid-template-columns: 1fr;
+  grid-template-rows: auto auto auto;
+}
+
+@mixin inline-start {
+  grid-template-areas:
+    'label container'
+    '. support-text';
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto auto;
+}
+
+@mixin inline-end {
+  grid-template-areas:
+    'container label'
+    'support-text .';
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto auto;
+}
+
+@mixin inset {
+  grid-template-areas:
+    'container'
+    'support-text';
+  grid-template-columns: 1fr;
+  grid-template-rows: auto auto;
+}
+
+@mixin no-label {
+  grid-template-areas:
+    'container'
+    'support-text';
+  grid-template-columns: 1fr;
+  grid-template-rows: auto auto;
+}
+
+//
+// Label position
+//
+
+@mixin label-position($position) {
+  @if $position == inline-start {
+    margin-inline-end: #{token(label-margin-inline)};
+    line-height: normal;
+  } @else if $position == inline-end {
+    margin-inline-start: #{token(label-margin-inline)};
+    line-height: normal;
+  } @else if $position == block-start {
+    margin-block-end: #{token(label-margin-block)};
+    line-height: normal;
+  } @else if $position == inset {
+    @include typography.style(body2);
+    @include override('label-color', 'inset-label-color');
+
+    overflow: hidden;
+
+    grid-area: center;
+
+    padding-inline-start: #{token(main-content-padding-start, custom)};
+    padding-inline-end: #{token(main-content-padding-end, custom)};
+
+    white-space: nowrap;
+  }
+}
+
+//
+// Label alignment
+//
+
+@mixin label-alignment($alignment, $direction, $baseline-override: false) {
+  @if $direction == inline {
+    @if $alignment == baseline {
+      align-self: center;
+      @if $baseline-override {
+        padding-block-start: $baseline-override;
+      } @else {
+        padding-block-start: calc(typography.variable(body2, line-height) - typography.variable(label2, line-height));
+      }
+    } @else {
+      align-self: #{$alignment};
+    }
+  } @else {
+    @if $alignment == baseline {
+      justify-self: start;
+      @if $baseline-override {
+        padding-inline-start: $baseline-override;
+      } @else {
+        padding-inline-start: #{token(container-padding-inline-start)};;
+      }
+    } @else {
+      justify-self: #{$alignment};
+    }
+  }
+}
+
+//
+// Support text
+//
+
+@mixin support-text-inset($inset-direction: none) {
+  @if $inset-direction == 'both' or $inset-direction == 'start' {
+    padding-inline-start: #{token(container-padding-inline-start)};
+  }
+
+  @if $inset-direction == 'both' or $inset-direction == 'end' {
+    padding-inline-end: #{token(container-padding-inline-start)};
+  }
+}
+
+//
+// Multiline
+//
+
+$resize-container-input-offset-base: calc((token('height', custom) - typography.variable(body2, line-height)) / 2);
+$resize-container-input-padding-block-end-base: 8px;
+
+@mixin container-multiline {
+  display: block;
+  block-size: fit-content;
+}
+
+@mixin resize-container {
+  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)};
+  max-block-size: #{token(multiline-max-block-size)};
+
+  overflow: hidden;
+  resize: #{token(multiline-resize)};
+}
+
+@mixin resize-container-inset-input {
+  z-index: unset;
+}
+
+@mixin resize-container-inset-label {
+  z-index: 9999;
+  pointer-events: none;
+  inline-size: fit-content;
+}
+
+@mixin resize-container-inset-label-slot {
+  display: block;
+  z-index: 9999;
+}
+
+@mixin resize-container-inset-label-background {
+    @include floating-animation(resize-container-inset-label-background-animation);
+    
+    position: absolute;
+    inset-inline-start: 0;
+
+    transition-duration: #{token(container-animation-duration)};
+    transition-property: background;
+    transition-timing-function: #{token(container-animation-timing)};
+    
+    background: #{token(resize-container-inset-label-background, custom)};
+    
+    inline-size: 100%;
+    block-size: typography.variable(body2, line-height);
+
+    filter: blur(2px);
+
+    content: '';
+}
+
+@mixin resize-container-slotted-input {
+  padding-block-start: $resize-container-input-offset-base;
+  padding-block-end: calc($floating-offset + $resize-container-input-padding-block-end-base);
+}
+
+@mixin resize-container-slotted-floating-input {
+  padding-block-start: calc($floating-offset + ($resize-container-input-offset-base)) !important; // TODO: find a way to remove this !important
+  padding-block-end: #{$resize-container-input-padding-block-end-base} !important;
+}
+
+@mixin resize-container-child {
+  align-items: center;
+  block-size: #{token('height', custom)};
+}
+
+@mixin resize-container-accessory-slot {
+  @include resize-container-child;
+
+  display: flex;
+  align-self: start;
+}
+
+//
+// Container
+//
+
+@mixin container-layout {
+  display: grid;
+  position: relative;
+
+  flex-grow: 1;
+
+  grid-template-areas: 'start center end popover-icon accessory';
+  grid-template-columns: auto 1fr auto auto auto;
+}
+
+@mixin last-container-element {
+  padding-inline-end: #{token('container-padding-inline-end')};
+}
+
+@mixin main-content-padding-inline($side, $next-sibling) {
+  @if $side == 'start' and $next-sibling == 'start' {
+    @include override('main-content-padding-start', token('start-padding-inline-end'), value);
+  } @else if $side == 'end' {
+    @if $next-sibling == 'end' {
+      @include override('main-content-padding-end', token('end-padding-inline-start'), value);
+    } @else if $next-sibling == 'popover-icon' {
+      @include override('main-content-padding-end', token('popover-icon-padding-inline-start'), value);
+    } @else if $next-sibling == 'accessory' {
+      @include override('main-content-padding-end', token('accessory-padding-inline-start'), value);
+    }
+  }
+}
+
+//
+// Floating label
+//
+
+// The floating label and input are offset away from each other by half the larger of the two line
+// heights. Additional space is added or subtracted to account for the block size of the container
+// -- one pixel for every 8 pixels above or below 56 pixels.
+$floating-offset-base: #{calc(max(typography.variable(body2, line-height), typography.variable(label2, line-height)) / 2)};
+$floating-offset-adjustment: #{calc((token('height', custom) - 56px) / 8)};
+$floating-offset: #{calc($floating-offset-base + $floating-offset-adjustment)};
+
+// Sets a custom property used for the floating animation and final position of the floating label
+@mixin floatable-label {
+  @include override('floating-label-translation', 0 calc($floating-offset * -1), value);
+}
+
+@mixin floating-label {
+  @include typography.style(label2);
+  translate: #{token(floating-label-translation, custom)};
+}
+
+@mixin float-in-label {
+  @include floating-animation(float-in-label-animation);
+}
+
+@mixin float-out-label {
+  @include floating-animation(float-out-label-animation);
+}
+
+@mixin floating-input {
+  box-sizing: border-box;
+}
+
+@mixin float-in-input {
+  @include floating-animation(float-in-input-animation);
+}
+
+@mixin float-out-input {
+  @include floating-animation(float-out-input-animation);
+}
+
+@mixin slotted-floating-input {
+  padding-block-start: calc($floating-offset * 2) !important; // TODO: find a way to remove this !important
+}
+
+@mixin floating-animation($animation-name) {
+  animation-name: #{$animation-name};
+  animation-duration: #{token(floating-animation-duration)};
+  animation-timing-function: #{token(floating-animation-timing)};
+}
+
+//
+// Animation keyframes
+//
+
+@keyframes float-in-label-animation {
+  from {
+    translate: 0;
+    opacity: 40%;
+  }
+
+  to {
+    translate: #{token(floating-label-translation, custom)};
+    opacity: 100%;
+  }
+}
+
+@keyframes float-out-label-animation {
+  from {
+    translate: #{token(floating-label-translation, custom)};
+    opacity: 40%;
+  }
+
+  to {
+    translate: 0;
+    opacity: 100%;
+  }
+}
+
+@keyframes float-in-input-animation {
+  from {
+    translate: 0;
+  }
+
+  to {
+    translate: 0 $floating-offset;
+  }
+}
+
+@keyframes float-out-input-animation {
+  from {
+    translate: 0 $floating-offset;
+  }
+
+  to {
+    translate: 0;
+  }
+}
+
+@keyframes resize-container-inset-label-background-animation {
+  from {
+    opacity: 0%;
+  }
+
+  to {
+    opacity: 100%;
+  }
+}

package/styles/field-next/_core.scss

@@ -0,0 +1,212 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/typography';
+@use './token-utils' as *;
+@forward './core.layout';
+@forward './core.shape';
+@forward './core.slotted';
+@forward './core.state';
+@forward './core.variant';
+
+@mixin configuration {
+  @include tokens;
+}
+
+@mixin host {
+  display: block;
+}
+
+@mixin base {
+  @include override('input-color', #{token(text-color)}, value);
+  @include override('main-content-padding-start', #{token(container-padding-inline-start)}, value);
+  @include override('main-content-padding-end', #{token(container-padding-inline-end)}, value);
+
+  display: grid;
+  position: relative;
+}
+
+@mixin field-disabled {
+  cursor: not-allowed;
+}
+
+@mixin field-part-disabled {
+  opacity: #{token(disabled-opacity)};
+}
+
+@mixin container-background-disabled {
+  background: #{token(disabled-surface-color)};
+}
+
+@mixin container {
+  @include typography.style(body2);
+
+  box-sizing: border-box;
+
+  grid-area: container;
+  align-items: center;
+
+
+  border-radius: #{token(shape)};
+
+  inline-size: 100%;
+  block-size: #{token(height, custom)};
+}
+
+@mixin container-background {
+  position: absolute;
+
+  transition-duration: #{token(container-animation-duration)};
+  transition-property: background, outline-color;
+  transition-timing-function: #{token(container-animation-timing)};
+
+  border-radius: inherit;
+  
+  pointer-events: none;
+
+  inline-size: 100%;
+  block-size: 100%;
+
+  content: '';
+}
+
+@mixin input {
+  display: flex;
+  grid-area: center;
+
+  // z-index is set to ensure the input is never rendered unclickable by the inset label
+  z-index: 9999;
+
+  block-size: 100%;
+  inline-size: 100%;
+
+  color: #{token(input-color, value)};
+}
+
+@mixin label {
+  @include typography.style(label2);
+
+  display: inline-flex;
+  position: relative;
+
+  gap: #{token(label-gap)};
+  grid-area: label;
+
+  block-size: fit-content;
+
+  color: #{token(label-color)};
+}
+
+@mixin label-before {
+  color: #{token(required-color)};
+  content: #{token(required-content)};
+}
+
+@mixin label-after {
+  color: #{token(optional-color)};
+  content: #{token(optional-content)};
+}
+
+@mixin popover-icon {
+  isolation: isolate;
+  align-items: center;
+
+  display: flex;
+  grid-area: popover-icon;
+
+  block-size: 100%;
+  padding-inline-end: #{token(popover-icon-padding-inline-end)};
+
+  & > * {
+    transition: rotate #{token(popover-icon-transition-duration)} #{token(popover-icon-transition-timing)};
+  }
+}
+
+@mixin popover-icon-arrow {
+  fill: inherit;
+}
+
+@mixin popover-target {
+  position: absolute;
+  bottom: calc(#{token(focus-indicator-width)} * -1);
+  left: 0;
+  right: 0;
+}
+
+@mixin start {
+  display: flex;
+  grid-area: start;
+  align-items: center;
+
+  padding-inline-start: #{token(container-padding-inline-start)};
+}
+
+@mixin end {
+  display: flex;
+  grid-area: end;
+  align-items: center;
+
+  padding-inline-end: #{token(end-padding-inline-end)};
+}
+
+@mixin accessory {
+  position: relative;
+  align-items: center;
+  
+  display: flex;
+  grid-area: accessory;
+
+  block-size: 100%;
+  padding-inline-end: #{token(accessory-padding-inline-end)};
+
+  &::before {
+    transition-duration: #{token(container-animation-duration)};
+    transition-property: border-color;
+    transition-timing-function: #{token(container-animation-timing)};
+    
+    border-inline-start-style: #{token(border-style)};
+    border-inline-start-width: #{token(border-width)};
+    border-inline-start-color: #{token(inner-border-color, value)};
+
+    padding-inline-end: #{token(accessory-padding-inline-start)};
+    
+    block-size: 100%;
+
+    content: '';
+  }
+}
+
+@mixin support-text {
+  @include typography.style(label1);
+
+  justify-content: space-between;
+
+  display: grid;
+  grid-template-areas: 'start end';
+  grid-template-columns: 1fr auto;
+  grid-area: support-text;
+
+  margin-block-start: #{token(support-text-margin-block)};
+
+  line-height: normal;
+}
+
+@mixin support-text-both {
+  gap: #{token(support-text-gap)};
+}
+
+@mixin support-text-start {
+  display: inline-block;
+  grid-area: start;
+}
+
+@mixin support-text-end {
+  display: inline-block;
+  grid-area: end;
+}
+
+@mixin reduced-motion {
+  @include override('floating-animation-duration', '0s', value);
+}

package/styles/field-next/_core.shape.scss

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/shape';
+@use './token-utils' as *;
+
+@mixin density($density, $inset: false) {
+  @if $inset {
+    @include override('height', #{token(inset-height-#{$density}, custom)}, value);
+  } @else {
+    @include override('height', #{token(height-#{$density}, custom)}, value);
+  }
+}
+
+@mixin shape($shape) {
+  @if $shape == 'squared' {
+    @include override('shape', 0, value);
+  } @else if $shape == 'rounded' {
+    @include override('shape', shape.variable(full), value);
+    @include override('container-padding-inline-start', #{token(rounded-container-padding-inline-start)}, value);
+    @include override('container-padding-inline-end', #{token(rounded-container-padding-inline-end)}, value);
+  }
+}

package/styles/field-next/_core.slotted.scss

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@mixin default-slot-content {
+  box-sizing: border-box;
+
+  margin: 0;
+
+  outline: none;
+  border: none;
+
+  background-color: transparent;
+
+  padding-block: 0;
+  padding-inline: 0;
+  inline-size: 100%;
+  block-size: 100%;
+
+  color: inherit;
+  font: inherit;
+  text-overflow: ellipsis;
+}
+
+@mixin first-default-slot-content {
+  padding-inline-start: #{token(main-content-padding-start, custom)};
+}
+
+@mixin last-default-slot-content {
+  padding-inline-end: #{token(main-content-padding-end, custom)};
+}
+
+@mixin default-slot-textarea {
+  resize: none;
+}
+
+@mixin slotted-inset-label {
+  max-inline-size: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@mixin slotted-forge-label {
+  font: inherit;
+}
+
+@mixin default-slot-disabled {
+  cursor: not-allowed;
+}
+
+@mixin slotted-multi-input-separator {
+  align-self: center;
+
+  padding-inline: 4px;
+  block-size: fit-content;
+  inline-size: fit-content;
+}