@tylertech/forge 3.0.0-next.1 → 3.0.0-next.11

package/styles/circular-progress/_mixins.scss

@@ -1,320 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-//
-// Copyright 2020 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 '.mdc-*' should only be used in this project.
-// stylelint-disable selector-class-pattern
-
-@use 'sass:math';
-@use '@material/animation/functions' as mdc-animation-functions;
-@use '@material/feature-targeting/feature-targeting' as mdc-feature-targeting;
-@use '@material/theme/gss' as mdc-gss;
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/typography/typography' as mdc-typography;
-@use './variables';
-@use './keyframes';
-@use '../theme';
-@use '../theme/custom-properties';
-
-@mixin core-styles($query: mdc-feature-targeting.all()) {
-  $feat-structure: mdc-feature-targeting.create-target($query, structure);
-  $feat-animation: mdc-feature-targeting.create-target($query, animation);
-
-  @include color(variables.$color, $query);
-
-  // FORGE (modify): use custom property for determinate track color
-  $track-color-prop: custom-properties.create(--forge-circular-progress-track-color, variables.$track-color);
-  @include track-color($track-color-prop, $query: $query);
-
-  @include mdc-feature-targeting.targets($feat-animation) {
-    @include keyframes.container-rotate-keyframes_;
-    @include keyframes.spinner-layer-rotate-keyframes_;
-    @include keyframes.color-1-fade-in-out-keyframes_;
-    @include keyframes.color-2-fade-in-out-keyframes_;
-    @include keyframes.color-3-fade-in-out-keyframes_;
-    @include keyframes.color-4-fade-in-out-keyframes_;
-    @include keyframes.left-spin-keyframes_;
-    @include keyframes.right-spin-keyframes_;
-  }
-
-  .mdc-circular-progress {
-    // FORGE (new): added a custom property for setting the height and width together
-    @include theme.css-custom-property(height, --forge-circular-progress-size, variables.$size);
-    @include theme.css-custom-property(width, --forge-circular-progress-size, variables.$size);
-
-    @include mdc-feature-targeting.targets($feat-structure) {
-      display: inline-flex;
-      justify-content: center; // FORGE (new): centering slotted content
-      align-items: center; // FORGE (new): centering slotted content
-      position: relative;
-      /* @noflip */
-      direction: ltr;
-    }
-
-    @include mdc-feature-targeting.targets($feat-animation) {
-      transition: mdc-animation-functions.exit-temporary(opacity, 250ms);
-    }
-
-    // FORGE (new): added custom properties for setting stroke-width and radius
-    circle {
-      @include theme.css-custom-property(stroke-width, --forge-circular-progress-stroke-width, variables.$stroke-width);
-    }
-
-    ::slotted(*) {
-      @include mdc-typography.typography(body1);
-    }
-  }
-
-  .mdc-circular-progress__determinate-container,
-  .mdc-circular-progress__indeterminate-circle-graphic,
-  .mdc-circular-progress__indeterminate-container,
-  .mdc-circular-progress__spinner-layer {
-    @include mdc-feature-targeting.targets($feat-structure) {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .mdc-circular-progress__determinate-container {
-    @include mdc-feature-targeting.targets($feat-structure) {
-      transform: rotate(-90deg);
-    }
-  }
-
-  .mdc-circular-progress__indeterminate-container {
-    @include mdc-feature-targeting.targets($feat-structure) {
-      // Font size, letter spacing and nowrap are required in order to ignore
-      // whitespaces between HTML elements.
-      font-size: 0;
-      letter-spacing: 0;
-      white-space: nowrap;
-      opacity: 0;
-    }
-  }
-
-  .mdc-circular-progress__determinate-circle-graphic,
-  .mdc-circular-progress__indeterminate-circle-graphic {
-    @include mdc-feature-targeting.targets($feat-structure) {
-      fill: transparent;
-    }
-  }
-
-  .mdc-circular-progress__determinate-circle {
-    @include mdc-feature-targeting.targets($feat-animation) {
-      transition: mdc-animation-functions.enter(stroke-dashoffset, 500ms);
-    }
-  }
-
-  .mdc-circular-progress__gap-patch {
-    @include mdc-feature-targeting.targets($feat-structure) {
-      position: absolute;
-      top: 0;
-      /* @noflip */
-      left: 47.5%;
-      box-sizing: border-box;
-      width: 5%;
-      height: 100%;
-      overflow: hidden;
-    }
-
-    .mdc-circular-progress__indeterminate-circle-graphic {
-      @include mdc-feature-targeting.targets($feat-structure) {
-        /* @noflip */
-        left: -900%;
-        width: 2000%;
-        transform: rotate(180deg);
-      }
-    }
-  }
-
-  .mdc-circular-progress__circle-clipper {
-    @include mdc-feature-targeting.targets($feat-structure) {
-      display: inline-flex;
-      position: relative;
-      width: 50%;
-      height: 100%;
-      overflow: hidden;
-    }
-
-    .mdc-circular-progress__indeterminate-circle-graphic {
-      @include mdc-feature-targeting.targets($feat-structure) {
-        width: 200%;
-      }
-    }
-  }
-
-  .mdc-circular-progress__circle-right {
-    .mdc-circular-progress__indeterminate-circle-graphic {
-      @include mdc-feature-targeting.targets($feat-structure) {
-        /* @noflip */
-        left: -100%;
-      }
-    }
-  }
-
-  .mdc-circular-progress--indeterminate {
-    .mdc-circular-progress__determinate-container {
-      @include mdc-feature-targeting.targets($feat-structure) {
-        opacity: 0;
-      }
-    }
-
-    .mdc-circular-progress__indeterminate-container {
-      @include mdc-feature-targeting.targets($feat-structure) {
-        opacity: 1;
-      }
-    }
-
-    @include indeterminate-active-animations_($query);
-  }
-
-  .mdc-circular-progress--closed {
-    @include mdc-feature-targeting.targets($feat-structure) {
-      opacity: 0;
-    }
-  }
-}
-
-// Public mixins
-
-/// Customizes the stroke-color of the indicator. Applies to the
-/// determinate variant, and also the indeterminate variant unless the
-/// four-color mixin is applied.
-/// @param {Color} $color - The desired stroke color.
-/// @see {mixin} indeterminate-colors
-@mixin color($color, $query: mdc-feature-targeting.all()) {
-  $feat-color: mdc-feature-targeting.create-target($query, color);
-
-  .mdc-circular-progress__determinate-circle,
-  .mdc-circular-progress__indeterminate-circle-graphic {
-    @include mdc-feature-targeting.targets($feat-color) {
-      @include theme.property(stroke, $color);
-    }
-  }
-}
-
-/// Customizes the track color of the indicator. Applies to the
-/// determinate variant only.
-/// @param {Color} $color - The desired track color.
-@mixin track-color($color, $query: mdc-feature-targeting.all()) {
-  $feat-color: mdc-feature-targeting.create-target($query, color);
-
-  .mdc-circular-progress__determinate-track {
-    @include mdc-feature-targeting.targets($feat-color) {
-      @include mdc-theme.property(stroke, $color);
-    }
-  }
-}
-
-/// Applies four animated stroke-colors to the indeterminate indicator.
-/// Applicable to the indeterminate variant only and overrides any single color
-/// currently set.
-/// @param {List} $colors - A list of four desired colors.
-/// @see {mixin} color
-@mixin indeterminate-colors($colors, $query: mdc-feature-targeting.all()) {
-  $feat-color: mdc-feature-targeting.create-target($query, color);
-
-  @if length($colors) != 4 {
-    @error '`mdc-circular-progress-colors` accepts exactly 4 colors';
-  }
-
-  @for $i from 1 through 4 {
-    .mdc-circular-progress__color-#{$i}
-      .mdc-circular-progress__indeterminate-circle-graphic {
-      @include mdc-feature-targeting.targets($feat-color) {
-        @include mdc-theme.property(stroke, nth($colors, $i));
-      }
-    }
-  }
-}
-
-// Private mixins
-
-/// Sets the animations for the indicator in indeterminate mode.
-/// @access private
-@mixin indeterminate-active-animations_($query: mdc-feature-targeting.all()) {
-  $feat-animation: mdc-feature-targeting.create-target($query, animation);
-
-  .mdc-circular-progress__indeterminate-container {
-    @include mdc-feature-targeting.targets($feat-animation) {
-      $duration: math.div(360deg * variables.$arc-time, variables.$arc-start-rotation-interval + (360 - variables.$arc-size));
-
-      animation: mdc-circular-progress-container-rotate $duration linear
-        infinite;
-    }
-  }
-
-  $spinner-rotate-animation: mdc-circular-progress-spinner-layer-rotate 4 *
-    variables.$arc-time variables.$timing-function infinite both;
-
-  .mdc-circular-progress__spinner-layer {
-    @include mdc-feature-targeting.targets($feat-animation) {
-      animation: $spinner-rotate-animation;
-    }
-  }
-
-  @for $i from 1 through 4 {
-    $color-fade-in-out-animation: mdc-circular-progress-color-#{$i}-fade-in-out
-      4 *
-      variables.$arc-time
-      variables.$timing-function
-      infinite
-      both;
-
-    .mdc-circular-progress__color-#{$i} {
-      @include mdc-feature-targeting.targets($feat-animation) {
-        animation: $spinner-rotate-animation, $color-fade-in-out-animation;
-      }
-    }
-  }
-
-  .mdc-circular-progress__circle-left
-    .mdc-circular-progress__indeterminate-circle-graphic {
-    @include mdc-feature-targeting.targets($feat-animation) {
-      @include mdc-gss.annotate(
-        (
-          noflip: true,
-        )
-      );
-      animation: mdc-circular-progress-left-spin variables.$arc-time
-        variables.$timing-function infinite both;
-    }
-  }
-
-  .mdc-circular-progress__circle-right
-    .mdc-circular-progress__indeterminate-circle-graphic {
-    @include mdc-feature-targeting.targets($feat-animation) {
-      @include mdc-gss.annotate(
-        (
-          noflip: true,
-        )
-      );
-      animation: mdc-circular-progress-right-spin variables.$arc-time
-        variables.$timing-function infinite both;
-    }
-  }
-}

package/styles/circular-progress/_variables.scss

@@ -1,50 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-//
-// Copyright 2020 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.
-//
-
-$color: tertiary !default; // FORGE (modify): use tertiary theme by default
-$track-color: transparent !default;
-$size: 72px !default; // FORGE (new): added default size
-$stroke-width: 4; // FORGE (new): added default stroke-width
-
-/// The rotation position of the arcs that corresponds to their fully contracted state
-$base-angle: 135deg !default;
-/// Amount of circle the arc takes up
-$arc-size: 270deg !default;
-/// Time it takes to expand and contract arc
-$arc-time: 1333ms !default;
-/// Time for inactive indicator to disappear
-$shrink-time: 400ms !default;
-/// How much the start location of the arc should rotate each time; 216 gives
-/// us a 5 pointed star shape (it's 360/5 * 3)
-$arc-start-rotation-interval: 216deg !default;
-/// The timing function used for the core spinner animations.
-$timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;
-
-// FORGE (new): added additional theme properties map
-$theme-values: (
-  track: $track-color
-);

package/styles/linear-progress/_mixins.scss

@@ -1,11 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use '../theme';
-@use './variables';
-
-@mixin provide-theme($theme) {
-  @include theme.theme-properties(linear-progress, $theme, variables.$theme-values);
-}

package/styles/linear-progress/_variables.scss

@@ -1,15 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-$buffer-color: #ced5f7 !default;
-$buffer-dots-color: none;
-$theme-values: (
-  buffer: $buffer-color,
-  buffer-dots: $buffer-dots-color
-);
-$theme-values-dark: (
-  buffer: #7c704c,
-  buffer-dots: opacity(0.5)
-) !default;

package/styles/tabs/tab/_mixins.scss

@@ -1,165 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/typography/typography' as mdc-typography;
-@use '@material/ripple/ripple' as mdc-ripple;
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
-@use '../../typography/mixins' as typography-mixins;
-@use './variables';
-
-@mixin core-styles() {
-  .forge-tab {
-    @include base;
-
-    &:disabled {
-      @include disabled;
-    }
-
-    // Firefox still draws a dotted border around focused buttons unless specifically overridden
-    &::-moz-focus-inner {
-      padding: 0;
-      border: 0;
-    }
-
-    ::slotted([slot=top]) {
-      @include top;
-    }
-
-    ::slotted([slot=top]),
-    ::slotted([slot=leading]),
-    ::slotted([slot=trailing]) {
-      @include icon-base;
-    }
-
-    ::slotted([slot=leading]),
-    ::slotted([slot=trailing]) {
-      padding: 0 8px;
-    }
-
-    &__content {
-      @include content;
-    }
-
-    &__text {
-      @include text;
-    }
-  
-    &--active {
-      @include active;
-
-      ::slotted([slot=top]),
-      ::slotted([slot=leading]),
-      ::slotted([slot=trailing]) {
-        transition-delay: 100ms;
-      }
-    }
-
-    &__ripple {
-      @include mdc-ripple.surface();
-      @include mdc-ripple.radius-bounded();
-      @include mdc-ripple-theme.states($color: primary);
-
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-    }
-  }
-}
-
-@mixin host() {
-  display: inline-block;
-}
-
-@mixin host-stretch() {
-  flex: 1;
-}
-
-@mixin base() {
-  @include mdc-typography.typography(button);
-  @include mdc-theme.property(color, text-secondary-on-light);
-
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  flex: 1 0 auto;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
-  margin: 0; // To override safari default margin for button elements
-  padding-top: 0;
-  padding-bottom: 0;
-  border: none;
-  outline: none;
-  background: none;
-  text-align: center;
-  white-space: nowrap;
-  cursor: pointer;
-  -webkit-appearance: none;
-  z-index: 1;
-  padding-right: variables.$horizontal-padding;
-  padding-left: variables.$horizontal-padding;
-  height: 100%;
-  width: 100%;
-}
-
-@mixin disabled() {
-  @include mdc-theme.property(color, text-disabled-on-background);
-
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-@mixin top() {
-  padding-top: variables.$stacked-padding;
-}
-
-@mixin icon-base() {
-  transition: 150ms color linear;
-  fill: currentColor;
-  width: 24px;
-  height: 24px;
-  font-size: 24px;
-  z-index: 2;
-}
-
-@mixin content() {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: inherit;
-  pointer-events: none;
-}
-
-@mixin text() {
-  transition: 150ms color linear;
-  display: inline-block;
-  line-height: 1;
-  z-index: 2;
-}
-
-@mixin active() {
-  @include mdc-theme.property(color, primary);
-}
-
-@mixin host-theme($theme, $properties) {
-  :host([theme=#{$theme}]) {
-    @include theme($theme, $properties);
-  }
-}
-
-@mixin theme($theme, $properties) {
-  $defaultValue: map-get($properties, $theme);
-  --mdc-theme-primary: var(--mdc-theme-#{$theme}, $defaultValue);
-
-  // IE support
-  .forge-tab.forge-tab--active {
-    color: $defaultValue;
-  }
-}

package/styles/tabs/tab/_variables.scss

@@ -1,9 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-$horizontal-padding: 24px !default;
-$height: 48px !default;
-$height-stacked: 72px !default;
-$stacked-padding: 8px !default;

package/styles/tabs/tab-bar/_mixins.scss

@@ -1,78 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use '../../theme';
-@use '../tab/variables';
-
-@mixin core-styles() {
-  .forge-tab-bar {
-    @include base;
-
-    &--underlined {
-      &::after {
-        @include theme.property(border-bottom-color, border-color);
-  
-        content: '';
-        border-bottom-width: 1px;
-        border-bottom-style: solid;
-        box-sizing: border-box;
-        width: 100%;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-      }
-    }
-
-    &--align-center {
-      .mdc-tab-scroller__scroll-content {
-        justify-content: center;
-      }
-    }
-
-    &--align-end {
-      .mdc-tab-scroller__scroll-content {
-        justify-content: flex-end;
-      }
-    }
-
-    &--stacked {
-      @include stacked;
-
-      .mdc-tab-scroller {
-        height: 100%;
-      }
-    }
-  }
-
-  .mdc-tab-scroller {
-    z-index: 1;
-    width: 100%;
-
-    &__scroll-area {
-      height: 100%;
-      overflow-x: auto;
-      scrollbar-width: none; // Hide scrollbar in Firefox
-    }
-  }
-}
-
-@mixin host() {
-  display: block;
-  overflow: hidden;
-}
-
-@mixin base() {
-  @include theme.css-custom-property(height, --forge-tab-bar-height, variables.$height);
-
-  display: flex;
-  position: relative;
-}
-
-@mixin stacked() {
-  @include theme.css-custom-property(height, --forge-tab-bar-height, variables.$height-stacked);
-
-  align-items: center;
-}