@tylertech/forge 2.0.0

package/styles/skeleton/skeleton.scss

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

package/styles/slider/slider.scss

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '@material/slider/styles';
+@use '@material/theme/theme' as mdc-theme;
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+///
+/// Override default MDC disabled styles
+///
+.mdc-slider.mdc-slider--disabled {
+  cursor: not-allowed;
+}
+
+///
+/// Override default MDC value indicator styles (to support theming)
+///
+.mdc-slider .mdc-slider__value-indicator {
+  background-color: var(--mdc-theme-on-surface);
+
+  &::before {
+    border-top-color: var(--mdc-theme-on-surface);
+  }
+}

package/styles/stepper/step/_mixins.scss

@@ -0,0 +1,416 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '@material/typography/typography' as mdc-typography;
+@use '@material/theme/theme' as mdc-theme;
+@use '@material/ripple/ripple' as mdc-ripple;
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '../../theme';
+@use './variables';
+
+@mixin core-styles() {
+  .forge-step {
+    @include base();
+    @include forge-interactable();
+
+    &__container {
+      display: contents;
+    }
+
+    &__expansion-panel {
+      display: none;
+    }
+
+    &__expanded-icon {
+      @include theme.property(color, icon-color);
+
+      display: none;
+      margin-left: auto;
+    }
+
+    &__title {
+      @include label();
+    }
+
+    &__subtitle {
+      @include optional-label-slot-wrapper;
+
+      ::slotted(*) {
+        @include optional-label();
+      }
+    }
+
+    &__icon-container {
+      .forge-step-icon-content {
+        @include icon-content;
+      }
+    }
+
+    &:not(.forge-step--disabled) {
+      .forge-step-icon-content {
+        @include icon-content-color;
+      }
+    }
+
+    &--disabled {
+      cursor: not-allowed;
+
+      &.forge-step {
+        .forge-step__icon-container {
+          .forge-step-icon-content {
+            @include icon-content-disabled;
+          }
+        }
+      }
+
+      @include theme.property(color, form-field-text-disabled-on-background);
+      .forge-step__text-container {
+        .forge-step__title {
+          @include theme.property(color, form-field-text-disabled-on-background);
+        }
+
+        .forge-step__subtitle {
+          ::slotted(*) {
+            @include theme.property(color, form-field-text-disabled-on-background);
+          }
+        }
+      }
+    }
+
+    &--alternative {
+      flex-direction: column;
+
+      .forge-step__icon-container {
+        .forge-step-icon-content {
+          margin: 0;
+        }
+      }
+      .forge-step__text-container {
+        @include text-container-alternative;
+
+        place-items: center;
+      }
+    }
+
+    &:not(.forge-step--selected):not(.forge-step--disabled) {
+      &:not(.forge-step--editable):not(.forge-step--completed),
+      &.forge-step--editable:not(.forge-step--completed) {
+        &:not(.forge-step--error) {
+          .forge-step-icon-content {
+            @include icon-content-default-theme;
+            
+            .forge-step-index {
+              @include mdc-theme.property(color, primary);
+            }
+          }
+        }
+      }
+    }
+
+    &--selected {
+      &.forge-step--disabled {
+        .forge-step-icon-content {
+          @include icon-content-disabled();
+        }
+      }
+
+      &:not(.forge-step--disabled) {
+        .forge-step__icon-container {
+          .forge-step-icon-content {
+            @include icon-content-selected();
+          }
+        }
+      }
+
+      &:not(.forge-step--disabled) {
+        .forge-step__title {
+          @include label-selected();
+        }
+
+        .forge-step__subtitle {
+          ::slotted(*) {
+            @include optional-label-selected();
+          }
+        }
+      }
+    }
+
+    &--error {
+      &:not(.forge-step--disabled) {
+        .forge-step__title {
+          @include label-error();
+        }
+
+        .forge-step__subtitle {
+          ::slotted(*) {
+            @include optional-label-error();
+          }
+        }
+
+        .forge-step__icon-container {
+          .forge-step-icon-content {
+            @include icon-content-error();
+          }
+        }
+      }
+    }
+
+    &--completed {
+      &:not(.forge-step--disabled) {
+        &:not(.forge-step--error) {
+          &:not(.forge-step--editable) {
+            .forge-step-icon-content {
+              @include icon-content-completed();
+            }
+          }
+          &.forge-step--editable {
+            .forge-step-icon-content {
+              @include icon-content-completed();
+            }
+          }
+        }
+      }
+    }
+
+    &--expandable {
+      .forge-step__expanded-icon {
+        display: inline-block;
+        transition: transform 300ms ease-in-out;
+      }
+
+      &.forge-step--expanded {
+        .forge-step__expanded-icon {
+          transform: rotate(180deg);
+        }
+      }
+
+      .forge-step__icon-container {
+        .forge-step-icon-content {
+          margin: variables.$vertical-icon-margin;
+        }
+      }
+    }
+
+    &__text-container {
+      @include text-container();
+    }
+  }
+}
+
+@mixin base() {
+  padding: 12px 16px;
+  outline: none;
+  background: none;
+  border: none;
+  border-radius: 14px;
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  z-index: 1;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::-moz-focus-inner,
+  &::-moz-focus-outer {
+    padding: 0;
+    border: 0;
+  }
+}
+
+@mixin forge-interactable() {
+  @include mdc-ripple.surface;
+  @include mdc-ripple.radius-bounded;
+  @include mdc-ripple-theme.states;
+  @include mdc-ripple-theme.states-selected(primary);
+
+  cursor: pointer;
+
+  &.forge-step--error.forge-step {
+    @include mdc-ripple-theme.states-selected(error);
+  }
+
+  &--selected {
+    @include mdc-theme.property(color, primary);
+  }
+
+  &--disabled {
+    &::before,
+    &::after {
+      background-color: transparent;
+    }
+  }
+}
+
+@mixin icon-content-color {
+  @include mdc-theme.property(color, text-primary-on-background);
+}
+
+@mixin icon-content-default-theme {
+  @include mdc-theme.property(border-color, primary);
+}
+
+@mixin icon-content() {
+  border-style: solid;
+  border-width: 2px;
+  border-color: transparent;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  height: variables.$icon-size;
+  width: variables.$icon-size;
+  font-size: variables.$icon-font-size;
+  transition: background-color 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+  margin: variables.$icon-margin;
+  flex: none;
+
+  forge-icon {
+    font-size: 14px;
+  }
+}
+
+@mixin icon-content-selected() {
+  @include mdc-theme.property(background-color, primary);
+  @include mdc-theme.property(color, on-primary);
+}
+
+@mixin icon-content-completed() {
+  @include icon-content-selected();
+}
+
+@mixin icon-content-error {
+  @include mdc-theme.property(background-color, error);
+  @include mdc-theme.property(color, on-error);
+}
+
+@mixin icon-content-disabled {
+  @include mdc-theme.property(color, text-disabled-on-light);
+  @include theme.property(background-color, form-field-disabled-on-background);
+}
+
+@mixin line() {
+  @include theme.property(border-top-color, border-color);
+
+  border-top-style: solid;
+  border-top-width: 1px;
+  border-radius: 1px 0 0 1px;
+}
+
+@mixin step-line() {
+  @include theme.property(border-top-color, border-color);
+
+  content: '';
+  position: relative;
+  height: 0;
+  min-width: 10px;
+  flex: 1;
+  flex-basis: 0.000000001px;
+  border-top-style: solid;
+  border-top-width: 1px;
+  border-radius: 1px 0 0 1px;
+}
+
+@mixin text-container() {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin text-container-alternative {
+  margin-top: 8px;
+}
+
+@mixin label {
+  @include mdc-theme.property(color, text-primary-on-background);
+  @include mdc-typography.typography(body2);
+
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@mixin label-selected {
+  @include mdc-theme.property(color, primary);
+
+  font-weight: 500;
+}
+
+@mixin label-error {
+  @include mdc-theme.property(color, error);
+}
+
+@mixin optional-label {
+  @include mdc-theme.property(color, text-secondary-on-background);
+  @include mdc-typography.typography(caption);
+}
+
+@mixin optional-label-slot-wrapper {
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@mixin optional-label-selected {
+  @include mdc-theme.property(color, primary);
+  font-weight: 500;
+}
+
+@mixin optional-label-error {
+  @include mdc-theme.property(color, error);
+}
+
+@mixin border-psudo-styles($host-selector) {
+  :host(:not(:last-child)#{$host-selector}) {
+    &::after {
+      @content;
+    }
+  }
+
+  :host(:last-child#{$host-selector}) {
+    &::before {
+      @content;
+    }
+  }
+
+  :host(:not(:first-child):not(:last-child)#{$host-selector}) {
+    &::before,
+    &::after {
+      @content;
+    }
+  }
+}
+
+@mixin vertical-base {
+  width: 100%;
+  border-radius: 4px;
+  min-height: 52px;
+}
+
+@mixin vertical-host {
+  flex-direction: column;
+}
+
+@mixin expansion-panel-styles {
+  border-left-style: solid;
+  @include theme.property(border-color, border-color);
+  @include theme.css-custom-property(border-left-width, --forge-step-expansion-panel-border-left-width, variables.$expansion-panel-border-left-width);
+  @include theme.css-custom-property(margin-left, --forge-step-expansion-panel-margin-left, variables.$expansion-panel-margin-left);
+  @include theme.css-custom-property(margin-top, --forge-step-expansion-panel-margin-top, variables.$expansion-panel-margin-top);
+  @include theme.css-custom-property(margin-bottom, --forge-step-expansion-panel-margin-bottom, variables.$expansion-panel-margin-bottom);
+}
+
+@mixin forge-ignore-user-expansion {
+  .forge-step {
+    &__expanded-icon {
+      display: none;
+    }
+  }
+}

package/styles/stepper/step/_variables.scss

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+$spacer-margin: 8px !default;
+
+$icon-font-size: 14px !default;
+$icon-margin: 0 8px 0 0 !default;
+$vertical-icon-margin: 0 16px 0 0 !default;
+$icon-size: 24px !default;
+
+$label-font-size: 14px !default;
+$label-font-weight: 500 !default;
+
+$clusetered-border-min-width: 25px !default;
+
+$expansion-panel-margin-left: 60px !default;
+$expansion-panel-margin-top: 4px !default;
+$expansion-panel-margin-bottom: 4px !default;
+$expansion-panel-border-left-width: 1px !default;

package/styles/stepper/step/step.scss

@@ -0,0 +1,164 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../theme';
+@use './mixins';
+@use './variables';
+@use '@material/ripple/mdc-ripple';
+
+@include mixins.core-styles;
+
+:host(:first-child[alternative]) {
+  &::after {
+    align-self: flex-start;
+    top: 22px;
+    margin: 0;
+  }
+}
+:host(:last-child[alternative]) {
+  &::before {
+    align-self: flex-start;
+    top: 22px;
+    margin: 0;
+  }
+}
+
+:host(:not(:first-child):not(:last-child)[alternative]) {
+  &::before,
+  &::after {
+    align-self: flex-start;
+    top: 22px;
+    min-width: 7px;
+    margin: 0;
+  }
+}
+
+:host(:not(:last-child)[alternative]) {
+  .after {
+    align-self: flex-start;
+    top: 22px;
+    position: absolute;
+    width: calc(50% - 18px);
+    left: calc(50% + 18px);
+    height: 0;
+    right: 0;
+    
+    &::after {
+      content: '';
+      flex: 1;
+      flex-basis: 0.000000001px;
+      position: absolute;
+      right: 0;
+      left: 0;
+      min-width: 0;
+      width: 100%;
+
+      @include mixins.line();
+    }
+  }
+}
+
+:host(:not(:first-child)[alternative]) {
+  .before {
+    align-self: flex-start;
+    top: 22px;
+    position: absolute;
+    left: 0;
+    width: calc(50% - 18px);
+    height: 0;
+
+    &::before {
+      content: '';
+      left: 0;
+      min-width: 0;
+      width: 100%;
+      flex: 1;
+      flex-basis: 0.000000001px;
+      position: absolute;
+
+      @include mixins.line();
+    }
+  }
+}
+
+:host(:not(:first-child):not(:last-child)):host(:not([vertical])) {
+  &::before,
+  &::after {
+    @include mixins.step-line;
+    
+    margin: 0 -10px;
+  }
+}
+
+:host(:last-child):host(:not([vertical])) {
+  &::before {
+    @include mixins.step-line;
+    
+    margin: 0 -10px 0 0;
+  }
+}
+
+:host(:not(:last-child)):host(:not([vertical])) {
+  &::after {
+    @include mixins.step-line;
+    
+    margin: 0 0 0 -10px;
+  }
+}
+
+:host(:focus) {
+  outline: none;
+}
+
+:host([vertical]) {
+  @include mixins.vertical-host;
+  
+  &::after {
+    content: none;
+  }
+
+  &::before {
+    content: none;
+  }
+
+  .forge-step {
+    @include mixins.vertical-base;
+
+    &__text-container {
+      white-space: normal;
+    }
+  }
+
+  .forge-step__icon-container {
+    .forge-step-icon-content {
+      margin: variables.$vertical-icon-margin;
+    }
+  }
+}
+
+:host([vertical][expandable]) {
+  .forge-step__expansion-panel {
+    display: block;
+  }
+}
+
+:host([ignore-user-expansion]) {
+  @include mixins.forge-ignore-user-expansion;
+}
+
+forge-expansion-panel {
+  &::part(root) {
+    @include mixins.expansion-panel-styles;
+  }
+}
+
+@include mixins.border-psudo-styles('[clustered]') {
+  min-width: variables.$clusetered-border-min-width;
+}
+
+@include mixins.border-psudo-styles('[safari][alternative]') {
+  top: 24px;
+  margin: 0 -5px;
+}