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

package/styles/field/_variables.scss

@@ -1,123 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use '@material/theme/theme-color' as mdc-theme-color;
-
-$theme-values: (
-  background: transparent
-);
-
-$field: (
-  height: (
-    roomy: 3.5rem,
-    default: 3rem,
-    dense: 1.5rem
-  )
-) !default;
-
-$outline: (
-  background-color: (
-    default: transparent
-  ),
-  border-radius: (
-    default: 4px,
-    shape-rounded: 28px
-  ),
-  border-width: (
-    default: 1px,
-    focused: 2px
-  )
-) !default;
-
-// No label at dense size
-$label: (
-  font-size: (
-    roomy: 1rem,
-    default: 1rem
-  ),
-  top: (
-    roomy: 1.285rem,
-    default: 1rem
-  ),
-  left: (
-    default: 12px,
-    leading: 44px,
-    shape-rounded: 32px
-  ),
-  padding: (
-    right: (
-      default: 12px,
-      shape-rounded: 32px
-    )
-  ),
-  float-y: (
-    roomy: 0.8rem,
-    default: 0.62rem,
-    scale-roomy: 0.72rem,
-    scale-default: 0.54rem
-  ),
-  float-scale: (
-    default: 0.8125
-  )
-) !default;
-
-$input: (
-  font-size: (
-    roomy: 1rem,
-    default: 1rem,
-    dense: 0.875rem
-  ),
-  padding: (
-    default: 0 12px,
-    top: (
-      roomy: 29px,
-      default: 24px
-    ),
-    bottom: (
-      roomy: 8px,
-      default: 3px
-    ),
-    left: (
-      leading: 0,
-      shape-rounded: 32px
-    ),
-    right: (
-      trailing: 0,
-      shape-rounded: 32px
-    ),
-  )
-) !default;
-
-$leading: (
-  margin: (
-    default: 0 4px
-  ),
-  padding: (
-    default: 6px
-  )
-) !default;
-
-$trailing: (
-  margin: (
-    default: 0 4px
-  ),
-  padding: (
-    default: 6px
-  )
-) !default;
-
-$helper-text: (
-  margin-left: (
-    default: 12px,
-    shape-rounded: 32px
-  ),
-  font-size: (
-    roomy: 0.875rem,
-    default: 0.75rem,
-    dense: 0.75rem
-  )
-) !default;
-
-$required-asterisk-margin: 4px !default;

package/styles/field-next/_core.scss

@@ -1,213 +0,0 @@
-/**
- * @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;
-  isolation: isolate;
-}
-
-@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: 1;
-
-  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/floating-label/_mixins.scss

@@ -1,291 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-//
-// Copyright 2018 Google Inc.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-//
-
-// Selector '.forge-*' should only be used in this project.
-// stylelint-disable selector-class-pattern
-
-@use '@material/rtl' as mdc-rtl-mixins;
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/feature-targeting/feature-targeting' as mdc-feature-targeting;
-@use '@material/animation/variables' as mdc-animation-variables;
-@use '@material/typography/typography' as mdc-typography;
-@use './variables';
-
-@mixin core-styles($query: mdc-feature-targeting.all()) {
-  .forge-floating-label {
-    @include base($query: $query);
-
-    &--float-above {
-      @include float($query: $query);
-    }
-
-    &--float-above-end-keyframe {
-      transition: none;
-      font-size: variables.$font-size * variables.$float-scale;
-      @include float(variables.$position-y, 0%, 1);
-    }
-
-    &--unfloat-above-start-keyframe {
-      transition: none;
-      font-size: variables.$font-size;
-      @include float(variables.$position-y, 0%, variables.$float-scale);
-    }
-
-    &--required {
-      @include required($query: $query);
-    }
-
-    &--shake {
-      @include shake-animation(standard, $query: $query);
-    }
-  }
-
-  @include shake-keyframes(standard, variables.$position-y, $query: $query);
-}
-
-@mixin base($query: mdc-feature-targeting.all()) {
-  $feat-structure: mdc-feature-targeting.create-target($query, structure);
-  $feat-animation: mdc-feature-targeting.create-target($query, animation);
-
-  @include mdc-typography.typography(subtitle1, $exclude-props: (line-height, font-size), $query: $query);
-  font-size: var(--mdc-typography-subtitle1-font-size, variables.$font-size);
-
-  @include mdc-feature-targeting.targets($feat-structure) {
-    position: absolute;
-    /* @noflip */
-    left: 0;
-    /* @noflip */
-    -webkit-transform-origin: left top;
-    /* @noflip */
-    transform-origin: left top;
-    line-height: 1.1rem;
-
-    text-align: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    cursor: text;
-    overflow: hidden;
-
-    /* @alternate */
-    // Force the label into its own layer to prevent visible layer promotion adjustments
-    // when the ripple is activated behind it.
-    will-change: transform;
-
-    @include mdc-rtl-mixins.rtl {
-      /* @noflip */
-      right: 0;
-      /* @noflip */
-      left: auto;
-      /* @noflip */
-      -webkit-transform-origin: right top;
-      /* @noflip */
-      transform-origin: right top;
-      /* @noflip */
-      text-align: right;
-    }
-  }
-
-  @include mdc-feature-targeting.targets($feat-animation) {
-    transition: transform variables.$transition-duration mdc-animation-variables.$standard-curve-timing-function,
-                color variables.$transition-duration mdc-animation-variables.$standard-curve-timing-function;
-  }
-}
-
-@mixin float($positionY: variables.$position-y, $positionX: 0%, $scale: variables.$float-scale, $query: mdc-feature-targeting.all()) {
-  $feat-structure: mdc-feature-targeting.create-target($query, structure);
-
-  @include float-position($positionY, $positionX, $scale, $query: $query);
-
-  @include mdc-feature-targeting.targets($feat-structure) {
-    cursor: auto;
-  }
-}
-
-@mixin required($query: mdc-feature-targeting.all()) {
-  &::after {
-    @include _required-content($query);
-  }
-
-  @include mdc-rtl-mixins.rtl {
-    &::after {
-      @include _required-content-rtl($query);
-    }
-  }
-}
-
-@mixin ink-color($color, $query: mdc-feature-targeting.all()) {
-  $feat-color: mdc-feature-targeting.create-target($query, color);
-
-  @include mdc-feature-targeting.targets($feat-color) {
-    @include mdc-theme.property(color, $color);
-  }
-}
-
-// Used for textarea in case of scrolling
-@mixin fill-color($color, $query: mdc-feature-targeting.all()) {
-  $feat-color: mdc-feature-targeting.create-target($query, color);
-
-  @include mdc-feature-targeting.targets($feat-color) {
-    @include mdc-theme.property(background-color, $color);
-  }
-}
-
-@mixin shake-keyframes(
-  $modifier,
-  $positionY,
-  $positionX: 0%,
-  $scale: variables.$float-scale,
-  $query: mdc-feature-targeting.all()
-) {
-  $feat-animation: mdc-feature-targeting.create-target($query, animation);
-
-  @include mdc-feature-targeting.targets($feat-animation) {
-    @keyframes mdc-floating-label-shake-float-above-#{$modifier} {
-      0% {
-        @include mdc-rtl-mixins.ignore-next-line();
-        transform: translateX(calc(0 - #{$positionX}))
-          translateY(-#{$positionY}) 
-          scale(#{$scale});
-      }
-
-      33% {
-        animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-        @include mdc-rtl-mixins.ignore-next-line();
-        transform: translateX(calc(4% - #{$positionX}))
-          translateY(-#{$positionY}) 
-          scale(#{$scale});
-      }
-
-      66% {
-        animation-timing-function: cubic-bezier(
-          0.302435,
-          0.381352,
-          0.55,
-          0.956352
-        );
-        @include mdc-rtl-mixins.ignore-next-line();
-        transform: translateX(calc(-4% - #{$positionX}))
-          translateY(-#{$positionY})
-          scale(#{$scale});
-      }
-
-      100% {
-        @include mdc-rtl-mixins.ignore-next-line();
-        transform: translateX(calc(0 - #{$positionX}))
-          translateY(-#{$positionY})
-          scale(#{$scale});
-      }
-    }
-  }
-}
-
-@mixin float-position(
-  $positionY,
-  $positionX: 0%,
-  $scale: variables.$float-scale,
-  $query: mdc-feature-targeting.all()
-) {
-  $feat-structure: mdc-feature-targeting.create-target($query, structure);
-
-  @include mdc-feature-targeting.targets($feat-structure) {
-    @if $positionX > 0 or $positionX < 0 {
-      @include mdc-rtl-mixins.ignore-next-line();
-      transform: translateY(-1 * $positionY)
-        translateX(-1 * $positionX)
-        scale($scale);
-
-      @include mdc-rtl-mixins.rtl {
-        @include mdc-rtl-mixins.ignore-next-line();
-        transform: translateY(-1 * $positionY)
-          translateX($positionX)
-          scale($scale);
-      }
-    } @else {
-      transform: translateY(-1 * $positionY) scale($scale);
-    }
-  }
-}
-
-@mixin shake-animation($modifier, $query: mdc-feature-targeting.all()) {
-  $feat-animation: mdc-feature-targeting.create-target($query, animation);
-
-  @include mdc-feature-targeting.targets($feat-animation) {
-    animation: mdc-floating-label-shake-float-above-#{$modifier} 250ms 1;
-  }
-}
-
-@mixin max-width($max-width, $query: mdc-feature-targeting.all()) {
-  $feat-structure: mdc-feature-targeting.create-target($query, structure);
-
-  @include mdc-feature-targeting.targets($feat-structure) {
-    max-width: $max-width;
-  }
-}
-
-///
-/// Sets the CSS transition for the floating animation.
-///
-/// @param {Number} $duration-ms - Duration (in ms) of the animation.
-/// @param {String} $timing-function - Optionally overrides the default animation timing function.
-///
-@mixin float-transition(
-  $duration-ms,
-  $timing-function: mdc-animation-variables.$standard-curve-timing-function,
-  $query: mdc-feature-targeting.all()
-) {
-  $feat-animation: mdc-feature-targeting.create-target($query, animation);
-
-  @include mdc-feature-targeting.targets($feat-animation) {
-    transition: color $duration-ms $timing-function,
-      transform $duration-ms $timing-function;
-  }
-}
-
-@mixin _required-content($query: mdc-feature-targeting.all()) {
-  $feat-structure: mdc-feature-targeting.create-target($query, structure);
-
-  @include mdc-feature-targeting.targets($feat-structure) {
-    @include mdc-rtl-mixins.ignore-next-line();
-    margin-left: 1px;
-    @include mdc-rtl-mixins.ignore-next-line();
-    margin-right: 0;
-    content: '*';
-  }
-}
-
-// Need to specify LTR/RTL manually since rtl mixins will add ::after[dir=rtl]
-// selector and that breaks some browsers
-@mixin _required-content-rtl($query: mdc-feature-targeting.all()) {
-  $feat-structure: mdc-feature-targeting.create-target($query, structure);
-
-  @include mdc-feature-targeting.targets($feat-structure) {
-    @include mdc-rtl-mixins.ignore-next-line();
-    margin-left: 0;
-    @include mdc-rtl-mixins.ignore-next-line();
-    margin-right: 1px;
-  }
-}

package/styles/floating-label/_variables.scss

@@ -1,15 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-$class-name: 'forge-floating-label' !default;
-
-///
-/// Y-axis position of label when it is afloat.
-/// 100% of the length of label and additional 6% for scaledown.
-///
-$position-y: 106% !default;
-$transition-duration: 150ms !default;
-$font-size: 1rem !default;
-$float-scale: 0.8125 !default;

package/styles/floating-label/forge-floating-label.scss

@@ -1,8 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use './mixins';
-
-@include mixins.core-styles;

package/styles/form-field/_mixins.scss

@@ -1,71 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use '@material/typography/typography' as mdc-typography;
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/form-field/mixins' as mdc-form-field;
-@use '@material/form-field/variables' as mdc-form-field-variables;
-@use '../typography/mixins' as typography-mixins;
-
-@mixin shadow-styles {
-  .forge-form-field {
-    @include base;
-
-    ::slotted([slot='label']) {
-      @include label;
-    }
-
-    forge-switch ~ ::slotted([slot='label']) {
-      padding-left: 8px;
-    }
-  }
-
-  .forge-form-field--align-end {
-    ::slotted([slot='label']) {
-      @include align-end;
-    }
-  }
-}
-
-@mixin core-styles() {
-  .forge-form-field {
-    @include base;
-
-    > label {
-      @include label;
-    }
-
-    forge-switch ~ label {
-      padding-left: 8px;
-    }
-  }
-
-  .forge-form-field--align-end {
-    > label {
-      @include align-end;
-    }
-  }
-}
-
-@mixin base() {
-  @include mdc-typography.typography(body2);
-  @include mdc-theme.property(color, text-primary-on-background);
-
-  display: inline-flex;
-  align-items: center;
-  vertical-align: middle;
-}
-
-@mixin label() {
-  order: 0;
-  margin-right: auto;
-  padding-left: mdc-form-field-variables.$item-spacing;
-}
-
-@mixin align-end() {
-  order: -1;
-  margin-left: auto;
-  padding-right: mdc-form-field-variables.$item-spacing;
-}