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

package/styles/circular-progress/_mixins.scss

@@ -3,318 +3,24 @@
  * 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.
-//
+@use '../core/style-layer/circular-progress';
 
-// 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;
-    }
-  }
+@mixin host {
+  @include circular-progress.container;
 }
 
-// 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';
-  }
+@mixin core-styles {
+  @include circular-progress.styles;
 
-  @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));
-      }
-    }
+  .center-content {
+    @include center-content;
   }
 }
 
-// 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;
-    }
-  }
+@mixin center-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
 }

package/styles/circular-progress/circular-progress.scss

@@ -6,4 +6,12 @@
 @use 'mixins';
 @use '../theme';
 
+:host {
+  @include mixins.host;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
 @include mixins.core-styles;

package/styles/core/style-layer/circular-progress/_animations.scss

@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@mixin keyframes {
+  // Indeterminate mode is 3 animations composed together:
+  // 1. expand-arc: an arc is expanded/contracted between 10deg and 270deg.
+  // 2. rotate-arc: at the same time, the arc is rotated in increments of 270deg.
+  // 3. linear-rotate: that rotating arc is then linearly rotated to produce a spinning expanding/contracting arc.
+
+  // 1. expand-arc
+  // This is used on 2 divs which each represent half the desired 270deg arc with one offset by 50%. This creates an arc which expands from 10deg to 270deg.
+  @keyframes expand-arc {
+    0% {
+      transform: rotate(265deg);
+    }
+    50% {
+      transform: rotate(130deg);
+    }
+    100% {
+      transform: rotate(265deg);
+    }
+  }
+
+  // 2. rotate-arc
+  // The arc seamlessly travels around the circle indefinitely so it needs to end at a full rotation of the circle. This rotates the 270 deg
+  // (270/360 = 3/4) arc 4x (4 * 3/4 = 3) so it ends at (3 * 360 = 1080). This is sub-divided into increments of 135deg since the arc is
+  // rendered with 2 divs acting together.
+  @keyframes rotate-arc {
+    12.5% {
+      transform: rotate(135deg);
+    }
+    25% {
+      transform: rotate(270deg);
+    }
+    37.5% {
+      transform: rotate(405deg);
+    }
+    50% {
+      transform: rotate(540deg);
+    }
+    62.5% {
+      transform: rotate(675deg);
+    }
+    75% {
+      transform: rotate(810deg);
+    }
+    87.5% {
+      transform: rotate(945deg);
+    }
+    100% {
+      transform: rotate(1080deg);
+    }
+  }
+
+  // 3. linear-rotate
+  // The traveling expanding arc is linearly rotated to produce the spinner effect.
+  @keyframes linear-rotate {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

package/styles/core/style-layer/circular-progress/_core.scss

@@ -0,0 +1,131 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './variables';
+@use '../../../theme/theme-values';
+
+/// Configurable module-level variables
+$indeterminate-animation: linear infinite linear-rotate !default;
+$indeterminate-circle-animation: expand-arc !default;
+$determinate-animation: infinite both rotate-arc !default;
+
+///
+/// Initializes private configuration state CSS variables
+/// 
+@mixin configuration {
+  --_size: var(--#{variables.$prefix}-size, #{variables.$size});
+  --_spacing: var(--#{variables.$prefix}-padding, #{variables.$spacing});
+  --_track-width: var(--#{variables.$prefix}-indicator-width, #{variables.$track-width});
+  --_track-color: var(--#{variables.$prefix}-indicator-color, var(--forge-theme-tertiary, #{theme-values.$tertiary}));
+  --_track-background: var(--#{variables.$prefix}-indicator-background-color, var(--mdc-theme-text-disabled-on-background, #{theme-values.$text-disabled-on-background}));
+
+  --_arc-duration: 1333ms;
+  --_cycle-duration: calc(4 * var(--_arc-duration));
+  --_linear-duration: calc(var(--_arc-duration) * 360 / 306);
+}
+
+///
+/// Styles for the container/wrapper element to support the bounding box of the progress indicator
+/// 
+@mixin container {
+  display: inline-flex;
+  vertical-align: middle;
+  min-block-size: var(--#{variables.$prefix}-size, #{variables.$size});
+  min-inline-size: var(--#{variables.$prefix}-size, #{variables.$size});
+  position: relative;
+  align-items: center;
+  justify-content: center;
+
+  // `contain` and `content-visibility` are performance optimizations important here because progress indicators
+  // are often used when a CPU=intensive task is underway so it's especially important to minimize their CPU consumption.
+  contain: strict;
+  content-visibility: auto;
+}
+
+@mixin progress {
+  flex: 1;
+  align-self: stretch;
+  margin: var(--_spacing);
+}
+
+@mixin indeterminate {
+  will-change: transform;
+  animation: #{$indeterminate-animation};
+  animation-duration: var(--_linear-duration);
+}
+
+@mixin indeterminate-left {
+  overflow: hidden;
+  inset: 0 50% 0 0;
+}
+
+@mixin indeterminate-left-circle {
+  rotate: 135deg;
+  inset: 0 -100% 0 0;
+}
+
+@mixin indeterminate-right {
+  overflow: hidden;
+  inset: 0 0 0 50%;
+}
+
+@mixin indeterminate-circle {
+  box-sizing: border-box;
+  border-radius: 50%;
+  border: solid calc(var(--_size) * var(--_track-width) / 100);
+  border-color: var(--_track-color) var(--_track-color) transparent transparent;
+  will-change: transform;
+  animation: #{$indeterminate-circle-animation};
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+  animation-duration: var(--_arc-duration), var(--_cycle-duration);
+  animation-timing-function: #{variables.$indeterminate-easing};
+}
+
+@mixin indeterminate-right-circle {
+  rotate: 100deg;
+  inset: 0 0 0 -100%;
+  animation-delay: calc(-0.5 * var(--_arc-duration)), 0ms;
+}
+
+@mixin determinate-svg {
+  transform: rotate(-90deg);
+}
+
+@mixin determinate-svg-circle {
+  cx: 50%;
+  cy: 50%;
+  r: calc(50% * (1 - var(--_track-width) / 100));
+  // match size to indeterminate border width
+  stroke-width: calc(var(--_track-width) * 1%);
+  // note, pathLength is set so this can be normalized
+  stroke-dasharray: 100;
+  fill: transparent;
+}
+
+@mixin determinate-progress {
+  transition: stroke-dashoffset 500ms #{variables.$determinate-easing};
+  stroke: var(--_track-color);
+}
+
+@mixin determinate-track {
+  stroke: transparent;
+}
+
+@mixin determinate-track-background {
+  stroke: var(--_track-background);
+}
+
+@mixin determinate-spinner {
+  will-change: transform;
+  animation: #{$determinate-animation};
+  animation-duration: var(--_cycle-duration);
+  animation-timing-function: #{variables.$indeterminate-easing};
+}
+
+@mixin positioned {
+  position: absolute;
+  inset: 0;
+}

package/styles/core/style-layer/circular-progress/_variables.scss

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/config';
+
+$prefix: #{config.$prefix}-circular-progress !default;
+$track-width: 12 !default;
+$size: 48px !default;
+$spacing: 0 !default;
+$arc-duration: 1333ms;
+$indeterminate-easing: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$determinate-easing: cubic-bezier(0, 0, 0.2, 1) !default;

package/styles/core/style-layer/circular-progress/index.scss

@@ -0,0 +1,121 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './variables';
+@use './core';
+@use './animations';
+
+@forward './variables';
+@forward './core';
+@forward './animations';
+
+///
+/// Creates selectors for the standard circular progress structure
+/// 
+@mixin styles {
+  @include base-styles;
+  @include indeterminate-styles;
+  @include determinate-styles;
+  @include forced-colors;
+  @include animations.keyframes;
+}
+
+///
+/// Selectors for the base container structure
+/// 
+@mixin base-styles {
+  @layer base {
+    .#{variables.$prefix} {
+      @include core.configuration;
+      @include core.progress;
+
+      &--indeterminate {
+        @include core.indeterminate;
+      }
+    }
+
+    .#{variables.$prefix},
+    .spinner,
+    .left,
+    .right,
+    .circle,
+    svg {
+      @include core.positioned;
+    }
+  }
+}
+
+///
+/// Selectors for the indeterminate structure
+/// 
+@mixin indeterminate-styles {
+  @layer indeterminate {
+    .left {
+      @include core.indeterminate-left;
+
+      .circle {
+        @include core.indeterminate-left-circle;
+      }
+    }
+        
+    .right {
+      @include core.indeterminate-right;
+
+      .circle {
+        @include core.indeterminate-right-circle;
+      }
+    }
+
+    .circle {
+      @include core.indeterminate-circle;
+    }
+  }
+}
+
+///
+/// Selectors for the determinate structure
+/// 
+@mixin determinate-styles {
+  @layer determinate {
+    svg {
+      @include core.determinate-svg;
+
+      circle {
+        @include core.determinate-svg-circle;
+      }
+    }
+
+    .progress {
+      @include core.determinate-progress;
+    }
+
+    .track {
+      @include core.determinate-track;
+
+      &-background {
+        @include core.determinate-track-background;
+      }
+    }
+
+    .spinner {
+      @include core.determinate-spinner;
+    }
+  }
+}
+
+///
+/// Provides selectors to support forced-colors mode
+/// 
+@mixin forced-colors {
+  @media screen and (forced-colors: active) {
+    .progress {
+      stroke: CanvasText;
+    }
+
+    .circle {
+      border-color: CanvasText CanvasText Canvas Canvas;
+    }
+  }
+}

package/styles/core/style-layer/core/_config.scss

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+$prefix: forge !default;