@tylertech/forge 3.0.0-next.4 → 3.0.0-next.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.0.0-next.4",
+  "version": "3.0.0-next.6",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {
@@ -25,7 +25,6 @@
     "@material/feature-targeting": "^14.0.0",
     "@material/form-field": "^14.0.0",
     "@material/icon-button": "^14.0.0",
-    "@material/linear-progress": "^14.0.0",
     "@material/menu-surface": "^14.0.0",
     "@material/ripple": "^14.0.0",
     "@material/rtl": "^14.0.0",

package/styles/circular-progress/_mixins.scss

@@ -3,7 +3,20 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+@use 'sass:list';
 @use '../core/style-layer/circular-progress';
+@use './variables';
+
+@mixin provide-theme($theme) {
+  @each $key, $value in $theme {
+    @if list.index(variables.$supported-theme-properties, $key) == null {
+      @error 'Invalid theme property: #{$key}';
+    }
+    @if $value {
+      --#{circular-progress.$prefix}-#{$key}: #{$value};
+    }
+  }
+}
 
 @mixin host {
   @include circular-progress.container;

package/styles/circular-progress/_variables.scss

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+$supported-theme-properties: (
+  'size',
+  'padding',
+  'indicator-width',
+  'indicator-color',
+  'indicator-background-color'
+);

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

@@ -3,8 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use 'mixins';
-@use '../theme';
+@use './mixins';
 
 :host {
   @include mixins.host;

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

@@ -3,6 +3,11 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+///
+/// Adapted and influenced from [Material Web](https://github.com/material-components/material-web).
+/// The original source code can be found at [GitHub](https://github.com/material-components/material-web/blob/main/circularprogress/lib/_circular-progress.scss)
+///
+
 @mixin keyframes {
   // Indeterminate mode is 3 animations composed together:
   // 1. expand-arc: an arc is expanded/contracted between 10deg and 270deg.

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

@@ -3,6 +3,11 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+///
+/// Adapted and influenced from [Material Web](https://github.com/material-components/material-web).
+/// The original source code can be found at [GitHub](https://github.com/material-components/material-web/blob/main/circularprogress/lib/_circular-progress.scss)
+///
+
 @use './variables';
 @use '../../../theme/theme-values';
 

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

@@ -0,0 +1,131 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+///
+/// Adapted and influenced from [Material Web](https://github.com/material-components/material-web).
+/// The original source code can be found at [GitHub](https://github.com/material-components/material-web/blob/main/linearprogress/lib/_linear-progress.scss)
+///
+
+@use './variables';
+
+@mixin keyframes {
+  @include _directional-keyframes('ltr');
+  @include _directional-keyframes('rtl');
+
+  @keyframes primary-indeterminate-scale {
+    0% {
+      transform: scaleX(0.08);
+    }
+  
+    36.65% {
+      animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
+      transform: scaleX(0.08);
+    }
+  
+    69.15% {
+      animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
+      transform: scaleX(0.661479);
+    }
+  
+    100% {
+      transform: scaleX(0.08);
+    }
+  }
+  
+  @keyframes secondary-indeterminate-scale {
+    0% {
+      animation-timing-function: cubic-bezier(
+        0.205028,
+        0.057051,
+        0.57661,
+        0.453971
+      );
+      transform: scaleX(0.08);
+    }
+  
+    19.15% {
+      animation-timing-function: cubic-bezier(
+        0.152313,
+        0.196432,
+        0.648374,
+        1.00432
+      );
+      transform: scaleX(0.457104);
+    }
+  
+    44.15% {
+      animation-timing-function: cubic-bezier(
+        0.257759,
+        -0.003163,
+        0.211762,
+        1.38179
+      );
+      transform: scaleX(0.72796);
+    }
+  
+    100% {
+      transform: scaleX(0.08);
+    }
+  }
+}
+
+// Generates keyframes for ltr and rtl.
+@mixin _directional-keyframes($dir) {
+  $is-rtl: $dir == 'rtl';
+  $sign: if($is-rtl, -1, 1);
+  $suffix: if($is-rtl, '-rtl', '');
+
+  @keyframes buffering#{$suffix} {
+    0% {
+      transform: translateX(calc(#{$sign} * var(--_track-background-width)));
+    }
+  }
+
+  @keyframes primary-indeterminate-translate#{$suffix} {
+    0% {
+      transform: translateX(0);
+    }
+
+    20% {
+      animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
+      transform: translateX(0);
+    }
+
+    59.15% {
+      animation-timing-function: cubic-bezier(
+        0.302435,
+        0.381352,
+        0.55,
+        0.956352
+      );
+      transform: translateX(calc(#{$sign} * 83.6714%));
+    }
+
+    100% {
+      transform: translateX(calc(#{$sign} * 200.611%));
+    }
+  }
+
+  @keyframes secondary-indeterminate-translate#{$suffix} {
+    0% {
+      animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
+      transform: translateX(0);
+    }
+
+    25% {
+      animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
+      transform: translateX(calc(#{$sign} * 37.6519%));
+    }
+
+    48.35% {
+      animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
+      transform: translateX(calc(#{$sign} * 84.3862%));
+    }
+
+    100% {
+      transform: translateX(calc(#{$sign} * 160.278%));
+    }
+  }
+}

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

@@ -0,0 +1,125 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+///
+/// Adapted and influenced from [Material Web](https://github.com/material-components/material-web).
+/// The original source code can be found at [GitHub](https://github.com/material-components/material-web/blob/main/linearprogress/lib/_linear-progress.scss)
+///
+
+@use './variables';
+@use '../../../theme/theme-values';
+
+///
+/// Initializes private configuration state CSS variables
+/// 
+@mixin configuration {
+  --_track-height: var(--#{variables.$prefix}-height, #{variables.$track-height});
+  --_track-color: var(--#{variables.$prefix}-indicator-background-color, #{variables.$track-background-color});
+  --_active-indicator-color: var(--#{variables.$prefix}-indicator-color, var(--forge-theme-tertiary, #{theme-values.$tertiary}));
+
+  --_track-shape: 0;
+  --_active-indicator-height: var(--_track-height);
+  --_determinate-duration: #{variables.$determinate-duration};
+  --_indeterminate-duration: #{variables.$indeterminate-duration};
+  --_determinate-easing: #{variables.$determinate-easing};
+  --_track-dot-size: calc(var(--_track-height) / 2);
+  --_track-background-width: calc(var(--_track-dot-size) * 5);
+  --_track-background: 0 / var(--_track-background-width) 100%
+    radial-gradient(
+      circle at calc(var(--_track-dot-size) * 2),
+      var(--_track-color) 0,
+      var(--_track-color) var(--_track-dot-size),
+      transparent var(--_track-dot-size)
+    );
+}
+
+///
+/// Styles for the container/wrapper element to support the bounding box of the progress indicator
+/// 
+@mixin container {
+  display: block;
+  position: relative;
+  min-inline-size: 80px;
+  block-size: var(--#{variables.$prefix}-height, #{variables.$track-height});
+  content-visibility: auto;
+  contain: strict;
+}
+
+@mixin progress {
+  inset: 0;
+  outline: transparent solid 1px;
+  border-radius: var(--_track-shape);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+@mixin bar {
+  animation: none;
+  inline-size: 100%;
+  block-size: var(--_active-indicator-height);
+  transform-origin: left center;
+  will-change: transform;
+  transition: transform var(--_determinate-duration) var(--_determinate-easing);
+}
+
+@mixin secondary-bar {
+  display: none;
+}
+
+@mixin bar-inner {
+  inset: 0;
+  animation: none;
+  background: var(--_active-indicator-color);
+}
+
+@mixin buffer-bar {
+  background: var(--_track-color);
+  inset: 0;
+  will-change: transform;
+  transition: transform var(--_determinate-duration) var(--_determinate-easing);
+  transform-origin: left center;
+}
+
+@mixin track {
+  inset: 0;
+  will-change: transform;
+  animation: linear infinite var(--_determinate-duration);
+  animation-name: buffering;
+  background: var(--_track-background);
+}
+
+@mixin indeterminate-bar {
+  transition: none;
+}
+
+@mixin indeterminate-primary-bar {
+  inset-inline-start: -145.167%;
+  will-change: transform;
+  animation: linear infinite var(--_indeterminate-duration);
+  animation-name: primary-indeterminate-translate;
+}
+
+@mixin indeterminate-secondary-bar {
+  inset-inline-start: -54.8889%;
+  display: block;
+  will-change: transform;
+  animation: linear infinite var(--_indeterminate-duration);
+  animation-name: secondary-indeterminate-translate;
+}
+
+@mixin indeterminate-track {
+  display: none;
+}
+
+@mixin indeterminate-primary-bar-inner {
+  will-change: transform;
+  animation: linear infinite var(--_indeterminate-duration) primary-indeterminate-scale;
+}
+
+@mixin indeterminate-secondary-bar-inner {
+  will-change: transform;
+  animation: linear infinite var(--_indeterminate-duration) secondary-indeterminate-scale;
+}

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

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/config';
+
+$prefix: #{config.$prefix}-linear-progress !default;
+$track-height: 4px !default;
+$track-background-color: #ced5f7 !default;
+$track-background-color-dark: #7c704c !default;
+$determinate-duration: 250ms !default;
+$indeterminate-duration: 2s !default;
+$determinate-easing: cubic-bezier(0.4, 0, 0.6, 1) !default;
+

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

@@ -0,0 +1,145 @@
+/**
+ * @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 rtl;
+  @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;
+    }
+
+    .#{variables.$prefix},
+    .track,
+    .buffer-bar,
+    .bar,
+    .bar-inner {
+      position: absolute;
+    }
+
+    .bar {
+      @include core.bar;
+    }
+
+    .secondary-bar {
+      @include core.secondary-bar;
+    }
+
+    .bar-inner {
+      @include core.bar-inner;
+    }
+
+    .buffer-bar {
+      @include core.buffer-bar;
+    }
+
+    .track {
+      @include core.track;
+    }
+  }
+}
+
+///
+/// Selectors for the indeterminate structure
+/// 
+@mixin indeterminate-styles {
+  @layer indeterminate {
+    .#{variables.$prefix}--indeterminate {
+      .bar {
+        @include core.indeterminate-bar;
+      }
+    
+      .primary-bar {
+        @include core.indeterminate-primary-bar;
+      }
+    
+      .secondary-bar {
+        @include core.indeterminate-secondary-bar;
+      }
+    
+      .track {
+        @include core.indeterminate-track;
+      }
+    
+      .primary-bar > .bar-inner {
+        @include core.indeterminate-primary-bar-inner;
+      }
+    
+      .secondary-bar > .bar-inner {
+        @include core.indeterminate-secondary-bar-inner;
+      }
+    }
+  }
+}
+
+@mixin rtl {
+  $rtl-selectors: (
+    ':host-context([dir="rtl"]) .' + variables.$prefix,
+    ':host([dir="rtl"]) .' + variables.$prefix,
+    '.' + variables.$prefix + ':dir(rtl)'
+  );
+
+  @each $selector in $rtl-selectors {
+    #{$selector} {
+      .bar {
+        transform-origin: right center;
+      }
+
+      .buffer-bar {
+        transform-origin: right center;
+      }
+
+      .track {
+        animation-name: buffering-rtl;
+      }
+
+      &.forge-linear-progress--indeterminate .primary-bar {
+        animation-name: primary-indeterminate-translate-rtl;
+      }
+
+      &.forge-linear-progress--indeterminate .secondary-bar {
+        animation-name: secondary-indeterminate-translate-rtl;
+      }
+    }
+  }
+}
+
+///
+/// Provides selectors to support forced-colors mode
+/// 
+@mixin forced-colors {
+  @media screen and (forced-colors: active) {
+    .#{variables.$prefix} {
+      --_active-indicator-color: canvastext;
+      --_track-color: graytext;
+      border: 1px solid canvastext;
+    }
+
+    .#{variables.$prefix}--indeterminate.#{variables.$prefix} {
+      --_track-color: canvas;
+    }
+  }
+}