@tylertech/forge 2.0.0

package/styles/chips/chip/_mixins.scss

@@ -0,0 +1,277 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
+@use '@material/chips/chip-theme' as mdc-chip-theme;
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '@material/animation/animation' as mdc-animation;
+@use '@material/theme/theme' as mdc-theme;
+@use '../../button/mixins' as button-mixins;
+@use '@material/checkbox/checkbox' as mdc-checkbox;
+@use '../../theme';
+@use './variables';
+
+@mixin core-styles() {
+  .forge-chip {
+    @include base;
+
+    &:disabled {
+      @include button-mixins.outlined-disabled;
+
+      .forge-chip__delete-button {
+        opacity: 0.54;
+      }
+    }
+
+    &__leading {
+      &--hidden {
+        display: none;
+      }
+    }
+
+    &__content {
+      flex-grow: 1;
+    }
+
+    ::slotted([slot='leading']) {
+      @include leading;
+    }
+
+    ::slotted(forge-avatar[slot]) {
+      --forge-avatar-size: 24px;
+    }
+
+    ::slotted([slot='trailing']) {
+      @include trailing;
+    }
+
+    &__checkmark {
+      @include checkmark;
+    }
+
+    &__delete-button {
+      @include delete-button;
+
+      border-radius: 50%;
+
+      &:focus,
+      &:hover {
+        @include mdc-theme.property(color, text-primary-on-background);
+      }
+
+      &:active {
+        opacity: 0.75;
+      }
+
+      &__touch-target {
+        position: absolute;
+        top: -6px;
+        left: -6px;
+        width: calc(100% + 12px);
+        height: calc(100% + 12px);
+      }
+    }
+
+    &--filter,
+    &--input,
+    &--choice {
+      &.forge-chip--selected {
+        &:not(:disabled) {
+          @include selected;
+        }
+
+        &:disabled {
+          @include selected-disabled;
+        }
+
+        ::slotted([slot='leading']) {
+          @include mdc-theme.property(color, on-primary);
+        }
+
+        ::slotted([slot='trailing']) {
+          @include mdc-theme.property(color, on-primary);
+        }
+
+        .forge-chip__delete-button {
+          @include mdc-theme.property(color, on-primary);
+        }
+
+        &.forge-chip--filter {
+          .forge-chip__checkmark {
+            @include checkmark-selected;
+          }
+        }
+      }
+    }
+
+    &--field {
+      .forge-chip__delete-button {
+        @include mdc-theme.property(color, primary);
+
+        &:focus,
+        &:hover {
+          @include mdc-theme.property(color, text-primary-on-background);
+        }
+      }
+
+      &.forge-chip--invalid:not(:disabled) {
+        .forge-chip__delete-button {
+          @include mdc-theme.property(color, error);
+
+          &:focus,
+          &:hover {
+            @include mdc-theme.property(color, text-primary-on-background);
+          }
+        }
+      }
+
+      &:disabled {
+        .forge-chip__delete-button {
+          @include mdc-theme.property(color, text-secondary-on-background);
+        }
+      }
+    }
+
+    &--dense {
+      @include dense;
+
+      &.forge-chip--field {
+        @include theme.css-custom-property(height, --forge-chip-height, 20px);
+        padding: 0;
+        margin: 0;
+        display: flex;
+        flex-direction: row;
+
+        ::slotted([slot='leading']) {
+          margin: 0 0 0 2px;
+          font-size: 18px !important;
+        }
+
+        .forge-chip__content {
+          font-size: 12px;
+          padding: 0 8px;
+        }
+
+        ::slotted([slot='trailing']) {
+          font-size: 18px !important;
+        }
+
+        .forge-chip__delete-button {
+          margin: 0 2px 0 0;
+          font-size: 18px;
+        }
+      }
+    }
+
+    &--invalid:not(:disabled) {
+      @include invalid;
+
+      .forge-chip__delete-button {
+        @include mdc-theme.property(color, error);
+      }
+
+      &.forge-chip--selected {
+        @include invalid-selected;
+
+        .forge-chip__delete-button {
+          @include mdc-theme.property(color, on-primary);
+        }
+      }
+    }
+  }
+}
+
+@mixin host() {
+  display: inline-block;
+}
+
+@mixin base() {
+  @include button-mixins.base;
+  @include button-mixins.outlined;
+  @include mdc-chip-theme.shape-radius(50%);
+  @include theme.css-custom-property(width, --forge-chip-width, auto);
+  @include theme.css-custom-property(height, --forge-chip-height, variables.$height);
+
+  box-sizing: border-box;
+  transition: mdc-animation.enter(background-color, 150ms);
+}
+
+@mixin invalid() {
+  @include mdc-ripple-theme.states(error, false);
+  @include mdc-button-outlined-theme.outline-color(error);
+  @include mdc-theme.property(color, error);
+}
+
+@mixin invalid-selected() {
+  @include mdc-theme.property(background-color, error);
+}
+
+@mixin selected() {
+  @include mdc-ripple-theme.states(on-primary, false);
+  @include mdc-theme.property(background-color, primary);
+  @include mdc-theme.property(color, text-primary-on-dark);
+}
+
+@mixin selected-disabled() {
+  @include selected;
+
+  opacity: 0.37;
+}
+
+@mixin leading() {
+  margin-left: -6px;
+  margin-right: 4px;
+}
+
+@mixin trailing() {
+  margin-left: 4px;
+  margin-right: -8px;
+}
+
+@mixin delete-button() {
+  @include mdc-theme.property(color, text-secondary-on-background);
+  @include trailing;
+
+  transition: color 150ms linear;
+  outline: none;
+  line-height: inherit;
+  position: relative;
+}
+
+@mixin checkmark() {
+  height: 24px;
+
+  &-svg {
+    width: 0;
+    height: 24px;
+    transition: width 150ms mdc-animation.$standard-curve-timing-function;
+  }
+
+  &-path {
+    @include mdc-theme.property(stroke, on-primary);
+
+    transition: mdc-checkbox.transition-exit(stroke-dashoffset, 0, 150ms);
+    stroke-width: 2px;
+    stroke-dashoffset: mdc-checkbox.$mark-path-length_;
+    stroke-dasharray: mdc-checkbox.$mark-path-length_;
+  }
+}
+
+@mixin checkmark-selected() {
+  @include leading;
+
+  &-svg {
+    width: 24px;
+  }
+
+  &-path {
+    transition: mdc-checkbox.transition-exit(stroke-dashoffset, 50ms, 150ms);
+    stroke-dashoffset: 0;
+  }
+}
+
+@mixin dense() {
+  @include theme.css-custom-property(height, --forge-chip-height, variables.$dense-height);
+}

package/styles/chips/chip/_variables.scss

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+$height: 36px !default;
+$dense-height: 28px !default;

package/styles/chips/chip/chip.scss

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../theme';
+@use './mixins';
+@use '../../ripple/forge-ripple';
+
+@include mixins.core-styles;
+
+:host {
+  @include mixins.host;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host([theme=error]) {
+  --mdc-theme-primary: var(--mdc-theme-error);
+}

package/styles/chips/chip-set/_mixins.scss

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../theme';
+@use './variables';
+
+@mixin core-styles() {
+  .forge-chip-set {
+    @include base;
+
+    ::slotted(forge-chip:not(:last-child)) {
+      @include theme.css-custom-property(margin-right, --forge-chip-set-spacing, variables.$spacing);
+    }
+
+    &--vertical {
+      @include vertical;
+
+      ::slotted(forge-chip:not(:last-child)) {
+        @include theme.css-custom-property(margin-bottom, --forge-chip-set-spacing, variables.$spacing);
+      }
+    }
+  }
+}
+
+@mixin host() {
+  display: inline-block;
+}
+
+@mixin base() {
+  @include theme.css-custom-property(gap, --forge-chip-set-spacing, variables.$spacing);
+
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@mixin vertical() {
+  flex-direction: column;
+}

package/styles/chips/chip-set/_variables.scss

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+$spacing: 4px !default;

package/styles/chips/chip-set/chip-set.scss

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './mixins';
+
+@include mixins.core-styles;
+
+:host {
+  @include mixins.host;
+}
+
+:host([hidden]) {
+  display: none;
+}

package/styles/circular-progress/_keyframes.scss

@@ -0,0 +1,185 @@
+/**
+ * @license
+ * Copyright 2022 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 './variables';
+
+/// Keyframes for the persistent rotation of the outermost container
+/// @access private
+@mixin container-rotate-keyframes_ {
+  @keyframes mdc-circular-progress-container-rotate {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}
+
+/// Keyframes for the rotation of the spinner layer
+/// @access private
+@mixin spinner-layer-rotate-keyframes_ {
+  @keyframes mdc-circular-progress-spinner-layer-rotate {
+    @for $i from 1 through 8 {
+      #{$i * 12.5}% {
+        transform: rotate($i * 0.5 * variables.$arc-size);
+      }
+    }
+  }
+}
+
+/// Keyframes for the fade-in and fade-out of the first color.
+/// .99 opacity is used to force subpixel rendering.
+/// @access private
+@mixin color-1-fade-in-out-keyframes_ {
+  @keyframes mdc-circular-progress-color-1-fade-in-out {
+    from {
+      opacity: 0.99;
+    }
+    25% {
+      opacity: 0.99;
+    }
+    26% {
+      opacity: 0;
+    }
+    89% {
+      opacity: 0;
+    }
+    90% {
+      opacity: 0.99;
+    }
+    to {
+      opacity: 0.99;
+    }
+  }
+}
+
+/// Keyframes for the fade-in and fade-out of the second color.
+/// .99 opacity is used to force subpixel rendering.
+/// @access private
+@mixin color-2-fade-in-out-keyframes_ {
+  @keyframes mdc-circular-progress-color-2-fade-in-out {
+    from {
+      opacity: 0;
+    }
+    15% {
+      opacity: 0;
+    }
+    25% {
+      opacity: 0.99;
+    }
+    50% {
+      opacity: 0.99;
+    }
+    51% {
+      opacity: 0;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+}
+
+/// Keyframes for the fade-in and fade-out of the third color.
+/// .99 opacity is used to force subpixel rendering.
+/// @access private
+@mixin color-3-fade-in-out-keyframes_ {
+  @keyframes mdc-circular-progress-color-3-fade-in-out {
+    from {
+      opacity: 0;
+    }
+    40% {
+      opacity: 0;
+    }
+    50% {
+      opacity: 0.99;
+    }
+    75% {
+      opacity: 0.99;
+    }
+    76% {
+      opacity: 0;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+}
+
+/// Keyframes for the fade-in and fade-out of the fourth color.
+/// .99 opacity is used to force subpixel rendering.
+/// @access private
+@mixin color-4-fade-in-out-keyframes_ {
+  @keyframes mdc-circular-progress-color-4-fade-in-out {
+    from {
+      opacity: 0;
+    }
+    65% {
+      opacity: 0;
+    }
+    75% {
+      opacity: 0.99;
+    }
+    90% {
+      opacity: 0.99;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+}
+
+/// Keyframes for the expansion and contraction of the arc for the
+/// left semi-circle.
+/// @access private
+@mixin left-spin-keyframes_ {
+  @keyframes mdc-circular-progress-left-spin {
+    from {
+      transform: rotate(265deg);
+    }
+    50% {
+      transform: rotate(130deg);
+    }
+    to {
+      transform: rotate(265deg);
+    }
+  }
+}
+
+/// Keyframes for the expansion and contraction of the arc for the
+/// right semi-circle.
+/// @access private
+@mixin right-spin-keyframes_ {
+  @keyframes mdc-circular-progress-right-spin {
+    from {
+      transform: rotate(-265deg);
+    }
+    50% {
+      transform: rotate(-130deg);
+    }
+    to {
+      transform: rotate(-265deg);
+    }
+  }
+}