@tylertech/forge 2.0.0

package/styles/switch/switch.scss

@@ -0,0 +1,80 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../form-field/mixins' as form-field-mixins;
+@use '@material/dom/dom' as mdc-dom;
+@use '@material/typography/typography' as mdc-typography;
+@use '@material/theme/theme' as mdc-theme;
+@use '../theme';
+@use '../theme/theme-values';
+@use './switch-theme';
+@use './switch-mixins' as switch;
+
+@include switch.static-styles();
+
+.mdc-switch {
+  @include switch-theme.theme-styles(switch-theme.$light-theme);
+}
+
+@include mdc-dom.forced-colors-mode {
+  .mdc-switch {
+    @include switch-theme.theme-styles(switch-theme.$forced-colors-theme);
+  }
+}
+
+@include form-field-mixins.core-styles;
+
+.forge-switch__container {
+  display: flex;
+  align-items: center;
+
+  &.forge-switch--label-position-start {
+    flex-flow: row-reverse;
+
+    .forge-switch__label {
+      margin-left: auto;
+      padding-right: 8px;
+    }
+  }
+}
+
+:host {
+  display: inline-block;
+
+  * {
+    cursor: pointer;
+  }
+  
+  .forge-switch__label {
+    @include mdc-typography.typography(caption);
+
+    padding-left: 8px;
+  }
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host([dense]) {
+  .mdc-switch__ripple {
+    $density: switch-theme.density(minimum);
+    $size: map.get($density, state-layer-size);
+
+    @include mdc-theme.property(height, $size);
+    @include mdc-theme.property(width, $size);
+  }
+}
+
+:host([disabled]) {
+  * {
+    cursor: not-allowed;
+  }
+
+  .forge-switch__label {
+    @include theme.property(color, label-disabled-on-background);
+  }
+}

package/styles/table/_mixins.scss

@@ -0,0 +1,527 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '@material/animation/animation' as mdc-animation;
+@use '@material/elevation/elevation' as mdc-elevation;
+@use '@material/theme/theme' as mdc-theme;
+@use '../theme';
+@use '../typography/mixins' as typography-mixins;
+@use './variables';
+
+@mixin provide-theme($theme) {
+  @include theme.theme-properties(table, $theme, variables.$theme-values);
+}
+
+@mixin core-styles() {
+  .forge-table {
+    @include base;
+  
+    &--dense {
+      .forge-table-row {
+        @include row-dense;
+      }
+    }
+  
+    &--roomy {
+      .forge-table-row {
+        @include row-roomy;
+      }
+    }
+  
+    &--resizable {
+      .forge-table-head__cell {
+        position: relative;
+  
+        &:hover {
+          .forge-table__resize-handle {
+            display: block;
+          }
+        }
+      }
+  
+      .forge-table__resize-handle {
+        @include resize-handle;
+      }
+  
+      .forge-table__resize-handle:hover {
+        @include resize-handle-hover;
+      }
+    }
+  
+    &--resizing {
+      -webkit-user-drag: none;
+      user-select: none;
+    }
+  
+    &--layout-fixed {
+      table-layout: fixed;
+    }
+  
+    &--no-wrap-content {
+      &.forge-table--dense {
+        .forge-table-row,
+        .forge-table-cell__container {
+          height: variables.$thead-dense-row-height;
+        }
+      }
+  
+      .forge-table-cell__container > .forge-table-cell__container-text {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+  
+    &--filter-visible {
+      .forge-table-head__row {
+        height: variables.$thead-filter-row-height;
+  
+        .forge-table-head__cell {
+          border: none;
+          vertical-align: bottom;
+        }
+      }
+    }
+  
+    &-head {
+      &__row {
+        @include head-row;
+
+        &__filter {
+          @include head-filter;
+        }
+      }
+  
+      &__cell {
+        @include head-cell;
+  
+        &-container {
+          @include head-cell-container;
+        }
+  
+        &--sorted-ascending,
+        &--sorted-descending {
+          .forge-table-head__cell-text {
+            @include head-cell-text-sorted;
+          }
+        }
+  
+        &__sort-order {
+          &--hidden {
+            display: none;
+          }
+        }
+  
+        &--sortable {
+          @include head-cell-sortable(forge-table-head__cell-sort-icon, forge-table-head__cell__sort-order);
+  
+          &.forge-table-head__cell--sorted-ascending {
+            .forge-table-head__cell-sort-icon {
+              @include head-cell-sort-icon-ascending;
+            }
+          }
+        }
+  
+        &-sort-icon {
+          @include head-cell-sort-icon;
+  
+          &--active {
+            @include head-cell-sort-icon-active;
+          }
+        }
+  
+        &-text {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  
+    &-row {
+      @include row-base(forge-table-cell, forge-table-cell__select);
+  
+      &--expanded {
+        .forge-table-body__cell {
+          border-bottom: none;
+        }
+      }
+  
+      &__expandable-content {
+        height: auto !important;
+  
+        &:hover {
+          background-color: inherit !important;
+        }
+      }
+    }
+  
+    &-body {
+      &__row {
+        @include body-row;
+  
+        &--selected {
+          @include body-row-selected;
+        }
+  
+        &--clickable {
+          @include body-row-clickable;
+        }
+      }
+  
+      &__cell {
+        @include body-row-cell;
+      }
+    }
+  
+    &-cell {
+      @include cell-base(forge-table-cell__select);
+  
+      &--resizing {
+        position: relative;
+  
+        &::before {
+          content: '';
+          @include cell-resizing;
+        }
+      }
+  
+      &__select {
+        @include cell-select;
+  
+        &-checkbox {
+          &-container {
+            @include cell-checkbox-container;
+          }
+        }
+      }
+  
+      &__container {
+        @include cell-container;
+      }
+  
+      &--center {
+        @include cell-center;
+      }
+  
+      &--right {
+        @include cell-right;
+      }
+    }
+  
+    &--fixed {
+      @include fixed;
+  
+      .forge-table-head__cell {
+        @include fixed-head-cell;
+      }
+  
+      .forge-table-head__row__filter {
+        .forge-table-head__cell {
+          top: variables.$thead-filter-row-height;
+        }
+      }
+    }
+  }
+}
+
+@mixin host() {
+  display: block;
+}
+
+/// The base styles for the `<table>` element.
+@mixin base() {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+/// The base styles for the rows of the table.
+@mixin row-base($cell-class-name, $select-class-name) {
+  // Finds the first table cell that is not the select cell
+  > .#{$cell-class-name}:not(.#{$select-class-name}):first-child,
+  .#{$cell-class-name}.#{$select-class-name} + .#{$cell-class-name}:not(.#{$select-class-name}) {
+    padding-right: 24px;
+  }
+
+  > .#{$cell-class-name}:last-child {
+    padding-right: 24px;
+  }
+}
+
+@mixin fixed() {
+  position: relative;
+}
+
+@mixin fixed-head-cell() {
+  @include mdc-theme.property(background-color, surface);
+
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  z-index: var(--forge-z-index-surface, 1);
+
+  &::after {
+    @include theme.property(border-color, border-color);
+
+    content: '';
+    border-width: 0;
+    border-bottom-width: 1px;
+    border-style: solid;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    height: 1px;
+    box-sizing: border-box;
+  }
+}
+
+/// The dense styles for all table rows.
+@mixin row-dense() {
+  height: variables.$thead-dense-row-height;
+}
+
+/// The roomy styles for all table rows.
+@mixin row-roomy() {
+  height: variables.$thead-roomy-row-height;
+}
+
+/// The base styles for the cells within the table.
+@mixin cell-base($select-class-name) {
+  padding-right: 56px;
+  border-bottom: variables.$border;
+  @include theme.property(border-bottom-color, border-color);
+
+  &:first-child:not(.#{$select-class-name}) {
+    padding-left: 24px;
+  }
+}
+
+@mixin cell() {
+  padding-right: 56px;
+  padding-left: 24px;
+  border-bottom: variables.$border;
+  @include theme.property(border-bottom-color, border-color);
+}
+
+/// Creates styles for container element that is placed within each cell.
+@mixin cell-container() {
+  display: flex;
+  align-items: center;
+}
+
+/// Centers the content within a table cell.
+@mixin cell-center() {
+  justify-content: center;
+}
+
+/// Right justifies the content within a table cell.
+@mixin cell-right() {
+  justify-content: flex-end;
+}
+
+/// Provides base styles for the select checkbox container element.
+@mixin cell-select() {
+  text-align: center !important;
+  box-sizing: border-box;
+  width: 66px;
+  padding-right: 12px;
+  padding-left: 16px;
+}
+
+/// Styles the select checkbox wrapper element.
+@mixin cell-checkbox-container() {
+  display: flex;
+  &--align-left {
+    justify-content: flex-start;
+  }
+  &--align-right {
+    justify-content: flex-end;
+  }
+  &--align-center {
+    justify-content: center;
+  }
+}
+
+@mixin cell-resizing() {
+  @include mdc-theme.property(border-right-color, primary);
+
+  display: block;
+  height: 100%;
+  position: absolute;
+  right: 4px;
+  top: 0;
+  bottom: 0;
+  border-right-width: 2px;
+  border-right-style: solid;
+}
+
+/// The default table head row styles.
+@mixin head-row() {
+  height: variables.$thead-row-height;
+}
+
+@mixin head-filter() {
+  --forge-text-field-height: 2.5rem;
+  .forge-table-head__cell-container {
+    padding: 8px 0;
+  }
+}
+
+/// Removes the border on all `th` and `td` elements.
+@mixin row-no-border() {
+  th,
+  td {
+    border-bottom: none;
+  }
+}
+
+/// The base styles for the cells within the table head.
+@mixin head-cell() {
+  @include mdc-theme.property(color, text-secondary-on-background);
+
+  font-weight: bold;
+  text-align: left;
+  font-size: 12px;
+  box-sizing: border-box;
+}
+
+/// The sorted state styles for the column header cells.
+@mixin head-cell-text-sorted() {
+  @include mdc-theme.property(color, text-primary-on-background);
+
+  font-weight: 600 !important;
+}
+
+/// Creates styles for the sort icon within the table head cells.
+@mixin head-cell-sort-icon() {
+  @include mdc-theme.property(color, text-primary-on-background);
+
+  font-size: 18px !important;
+  height: 18px;
+  width: 18px;
+  margin-left: 5px;
+  transition: transform 250ms;
+  display: none !important;
+  font-weight: 600;
+}
+
+/// The active sort icon styles.
+@mixin head-cell-sort-icon-active() {
+  display: inline !important;
+}
+
+/// Rotates the sort icon using a transform when in ascending direction.
+@mixin head-cell-sort-icon-ascending() {
+  transform: rotate(180deg);
+}
+
+/// The table head cell wrapper element styles for alignment purposes.
+@mixin head-cell-container() {
+  display: flex;
+  align-items: center;
+}
+
+/// Base styles for a table header cell when the column is sortable.
+@mixin head-cell-sortable($icon-class-name, $sort-order-class-name) {
+  cursor: pointer;
+
+  :hover {
+    .#{$icon-class-name},
+    .#{$sort-order-class-name} {
+      @include mdc-theme.property(color, text-icon-on-background);
+    }
+  }
+}
+
+/// The base table body row styles for row interactions.
+@mixin body-row() {
+  height: variables.$tbody-row-height;
+  transition: background-color 200ms;
+
+  &:hover {
+    @include theme.css-custom-property(background-color, --forge-table-theme-row-hover-background, variables.$row-hover-background);
+  }
+
+  &--selected:hover {
+    @include theme.css-custom-property(background-color, --forge-table-theme-row-selected-hover-background, variables.$row-selected-hover-background);
+  }
+}
+
+/// Sets the selected state styles on a row.
+@mixin body-row-selected() {
+  @include theme.css-custom-property(background-color, --forge-table-theme-row-selected-background, variables.$row-selected-background);
+
+  &:hover {
+    @include theme.css-custom-property(background-color, --forge-table-theme-row-selected-hover-background, variables.$row-selected-hover-background);
+  }
+}
+
+// Sets the styles for a clickable row.
+@mixin body-row-clickable() {
+  cursor: pointer;
+
+  &:active {
+    @include theme.css-custom-property(background-color, --forge-table-theme-row-active-background, variables.$row-active-background);
+  }
+  
+  &.forge-table-body__row--selected:active {
+    @include theme.css-custom-property(background-color, --forge-table-theme-row-selected-active-background, variables.$row-selected-active-background);
+  }
+}
+
+/// The cell styles for all tbody rows.
+@mixin body-row-cell() {
+  @include mdc-theme.property(color, on-surface);
+
+  font-size: variables.$cell-font-size;
+}
+
+@mixin resize-handle() {
+  @include mdc-theme.property(border-color, primary);
+
+  display: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 8px;
+  border-right-width: 2px;
+  border-right-style: solid;
+  box-sizing: border-box;
+  margin-right: 4px;
+  transition: mdc-animation.enter(border-right-width, 150ms);
+}
+
+@mixin resize-handle-hover() {
+  border-right-width: 4px;
+  cursor: col-resize;
+}
+
+@mixin forge-table() {
+  @include base;
+
+  thead {
+    tr {
+      @include head-row;
+
+      th {
+        @include cell;
+        @include head-cell;
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      @include body-row;
+
+      td {
+        @include cell;
+        @include body-row-cell;
+      }
+    }
+  }
+}

package/styles/table/_variables.scss

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '@material/theme/color-palette' as mdc-color-palette;
+@use '../theme/theme-values';
+
+/// The default row height within the table body.
+$tbody-row-height: 48px !default;
+
+/// The default row height within the table head.
+$thead-row-height: 48px !default;
+
+/// The default row height within the table head.
+$thead-dense-row-height: 36px !default;
+
+/// The roomy row height within the table head.
+$thead-roomy-row-height: 56px !default;
+
+/// The height of the table head cells when the filter row is applied
+$thead-filter-row-height: 32px !default;
+
+/// The padding for each table row.
+$row-padding: 0 24px !default;
+
+/// The border style for the table cells.
+$border: 1px solid theme-values.$border-color !default;
+
+/// The width of the table filter inputs.
+$filter-input-width: 80px !default;
+
+/// The default font size for the table cell data.
+$cell-font-size: 14px !default;
+
+/// Theme values
+$row-hover-background: rgba(0, 0, 0, 0.04) !default;
+$row-active-background: rgba(0, 0, 0, 0.08) !default;
+$row-selected-background: rgba(theme-values.$primary, 0.08) !default;
+$row-selected-hover-background: rgba(theme-values.$primary, 0.12) !default;
+$row-selected-active-background: rgba(theme-values.$primary, 0.16) !default;
+
+$theme-values: (
+  row-hover-background: $row-hover-background,
+  row-active-background: $row-active-background,
+  row-selected-background: $row-selected-background,
+  row-selected-hover-background: $row-selected-hover-background,
+  row-selected-active-background: $row-selected-active-background
+) !default;
+
+$theme-values-dark: (
+  row-hover-background: rgba(255, 255, 255, 0.04),
+  row-active-background: rgba(255, 255, 255, 0.08),
+  row-selected-background: rgba(mdc-color-palette.$indigo-a100, 0.16),
+  row-selected-hover-background: rgba(mdc-color-palette.$indigo-a100, 0.24),
+  row-selected-active-background: rgba(mdc-color-palette.$indigo-a100, 0.32)
+) !default;

package/styles/table/forge-table.scss

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './mixins';
+
+forge-table {
+  @include mixins.host;
+}
+
+@include mixins.core-styles;