@tylertech/forge 3.0.0-next.13 → 3.0.0-next.15

package/styles/app-bar/_mixins.scss

@@ -1,254 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use 'sass:map';
-@use 'sass:string';
-@use '@material/typography/typography' as mdc-typography;
-@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/top-app-bar/mixins' as mdc-top-app-bar-mixins;
-@use '@material/top-app-bar/variables' as mdc-top-app-bar-variables;
-@use '../theme';
-@use './variables';
-@use '../tabs/tab-bar';
-@use '../tabs/tab';
-@use '../icon-button';
-
-@mixin provide-theme($theme) {
-  @include theme.theme-properties(app-bar, $theme, variables.$theme-values);
-}
-
-@mixin base() {
-  @include theme.css-custom-property(color, --forge-app-bar-theme-on-background, variables.$on-background);
-  @include theme.css-custom-property(background-color, --forge-app-bar-theme-background, variables.$background);
-  @include theme.z-index(header);
-
-  background-size: cover;
-  background-position: center;
-  display: grid;
-  grid-template-rows: 1fr auto;
-  grid-template-columns: minmax(0, 1fr);
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  transition: box-shadow 200ms linear;
-}
-
-@mixin row() {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  height: variables.$row-height;
-}
-
-@mixin row-two-column() {
-  grid-template-columns: 1fr auto;
-}
-
-@mixin section() {
-  display: inline-flex;
-  flex: 1 1 auto;
-  align-items: center;
-  min-width: 0;
-  padding: 0 4px;
-  height: variables.$row-height;
-  box-sizing: border-box;
-}
-
-@mixin section-align-start() {
-  justify-content: flex-start;
-  order: -1;
-  grid-column: 1;
-}
-
-@mixin section-align-center() {
-  grid-column: 2;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-@mixin section-align-end() {
-  justify-content: flex-end;
-  order: 1;
-  grid-column: 3;
-}
-
-@mixin title() {
-  @include mdc-typography.typography(headline5);
-  @include theme.css-custom-property(color, --forge-app-bar-theme-on-background, variables.$on-background);
-
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding-left: 8px;
-  padding-right: 8px;
-}
-
-@mixin fixed() {
-  transition: box-shadow 200ms linear;
-}
-
-@mixin raised() {
-  @include mdc-elevation-theme.elevation(4);
-}
-
-@mixin title-hover() {
-  background-color: rgba(255, 255, 255, 0.12);
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-@mixin title-active() {
-  background-color: rgba(255, 255, 255, 0.24);
-}
-
-/// Creates styles for the app-bar host element.
-@mixin host() {
-  @include theme.z-index(header);
-
-  position: relative;
-  display: block;
-  contain: layout style;
-}
-
-/// Creates the styles for the logo.
-@mixin logo() {
-  @include theme.css-custom-property(color, --forge-app-bar-theme-on-background, variables.$on-background);
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 0 8px;
-  font-size: 3rem;
-  overflow: visible;
-}
-
-@mixin bottom() {
-  padding: 0 4px;
-  display: flex;
-  align-items: center;
-  height: auto !important;
-  overflow: hidden;
-}
-
-@mixin no-center-align-end() {
-  grid-column: 2;
-}
-
-@mixin core-styles() {
-  .forge-app-bar {
-    @include base;
-
-    &__row {
-      @include row;
-
-      .forge-app-bar--no-center & {
-        @include row-two-column;
-      }
-    }
-
-    &__section {
-      @include section;
-
-      &--align-start {
-        @include section-align-start;
-      }
-
-      &--align-center {
-        @include section-align-center;
-      }
-
-      &--align-end {
-        @include section-align-end;
-      }
-    }
-
-    &--no-center {
-      .forge-app-bar__section--align-end {
-        @include no-center-align-end;
-      }
-    }
-    
-    ::slotted([slot=logo]) {
-      @include logo;
-    }
-
-    ::slotted([slot=profile]) {
-      margin-left: 4px;
-    }
-
-    ::slotted([slot=title]) {
-      @include title;
-    }
-
-    slot[name=user-action] {
-      display: inline-flex;
-      margin-right: 24px;
-    }
-
-    &__title {
-      @include title;
-
-      &--interactable {
-        &:hover {
-          @include title-hover;
-        }
-
-        &:active {
-          @include title-active;
-        }
-      }
-    }
-
-    &__bottom {
-      @include bottom;
-
-      grid-row: 2;
-    }
-
-    &--fixed {
-      @include fixed;
-    }
-
-    &--raised {
-      @include raised;
-    }
-  }
-}
-
-@mixin default-theme() {
-  ::slotted(*:not(forge-button)) {
-    --mdc-theme-on-primary: var(--forge-app-bar-theme-on-background, #{variables.$on-background});
-    --mdc-theme-on-surface: var(--forge-app-bar-theme-on-background, #{variables.$on-background});
-  }
-
-  --mdc-theme-text-secondary-on-background: var(--forge-app-bar-theme-secondary-on-background, #{variables.$secondary-on-background});
-  --mdc-theme-text-secondary-on-light: var(--forge-app-bar-theme-secondary-on-background, #{variables.$secondary-on-background});
-  --mdc-theme-text-disabled-on-background: var(--forge-app-bar-theme-disabled-on-background, #{variables.$disabled-on-background});
-  --mdc-theme-text-disabled-on-light: var(--forge-app-bar-theme-disabled-on-light, #{variables.$disabled-on-light});
-
-  ::slotted(forge-tab-bar) {
-    @include tab-bar.provide-theme(( divider-thickness: 0 ));
-
-    @include tab.provide-theme((
-      active-color: var(--forge-app-bar-theme-on-background, #{variables.$on-background}),
-      inactive-color: var(--forge-app-bar-theme-secondary-on-background, #{variables.$secondary-on-background})
-    ));
-  }
-
-  ::slotted(*) {
-    @include icon-button.provide-theme((
-      icon-color: var(--forge-app-bar-theme-on-background, #{variables.$on-background})
-    ));
-  }
-
-  ::slotted(forge-button:is(:not([variant]),[variant=outlined])) {
-    --forge-theme-primary: var(--forge-app-bar-theme-on-background, rgba(255, 255, 255, 0.87));
-  }
-}

package/styles/app-bar/_variables.scss

@@ -1,34 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use '@material/theme/color-palette' as mdc-color-palette;
-
-$background: mdc-color-palette.$indigo-800 !default;
-$on-background: #ffffff !default;
-$secondary-on-background: rgba(255, 255, 255, 0.54) !default;
-$disabled-on-background: rgba(255, 255, 255, 0.38) !default;
-$disabled-on-light: rgba(255, 255, 255, 0.12) !default;
-$row-height: 56px !default;
-
-$theme-values: (
-  background: $background,
-  on-background: $on-background,
-  secondary-on-background: $secondary-on-background,
-  disabled-on-background: $disabled-on-background,
-  disabled-on-light: $disabled-on-light
-) !default;
-
-$theme-values-white: (
-  background: #ffffff,
-  on-background: rgba(0, 0, 0, 0.87),
-  secondary-on-background: rgba(0, 0, 0, 0.54),
-  disabled-on-background: rgba(0, 0, 0, 0.38),
-  disabled-on-light: rgba(0, 0, 0, 0.12)
-) !default;
-
-$theme-values-dark: (
-  background: #{mdc-color-palette.$grey-900},
-  on-background: #ffffff
-) !default;

package/styles/app-bar/app-bar.scss

@@ -1,22 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use './variables';
-@use './mixins';
-
-@include mixins.core-styles;
-
-:host {
-  @include mixins.host;
-  @include mixins.default-theme;
-}
-
-:host([hidden]) {
-  display: none;
-}
-
-:host([theme=white]) {
-  @include mixins.provide-theme(variables.$theme-values-white);
-}

package/styles/app-bar/search/_mixins.scss

@@ -1,238 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '../../theme';
-@use './variables';
-
-@mixin provide-theme($theme) {
-  @include theme.theme-properties(app-bar-search, $theme, variables.$theme-values);
-}
-
-@mixin core-styles() {
-  ::slotted([slot=action]) {
-    margin-left: 8px;
-  }
-  
-  .forge-app-bar-search {
-    @include base;
-  
-    &__container {
-      @include container;
-  
-      ::slotted(input) {
-        @include input;
-      }
-    }
-    
-    &__global-icon-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin: 0 16px;
-    }
-  
-    &__search-icon-container {
-      @include icon-container;
-    }
-  
-    &__icon {
-      @include icon;
-    }
-  
-    &__actions {
-      @include actions;
-    }
-  
-    &__context {
-      height: 100%;
-      display: flex;
-      align-items: center;
-      margin-left: 8px;
-  
-      &-button {
-        @include mdc-theme.property(color, on-surface);
-  
-        outline: none;
-        border: none;
-        background: none;
-        min-width: 100px;
-        display: flex;
-        align-items: center;
-        height: 70%;
-        margin-left: 8px;
-        margin-right: 4px;
-        border-radius: 4px;
-        background-color: transparent;
-        transition: background-color 200ms ease-out;
-        will-change: background-color;
-        padding: 0;
-        padding-left: 8px;
-  
-        &:hover {
-          background-color: rgba(255, 255, 255, 0.12);
-        }
-  
-        &:focus {
-          background-color: rgba(255, 255, 255, 0.2);
-        }
-  
-        &-text {
-          flex: 1;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          overflow: hidden;
-        }
-      }
-    }
-  
-    &__vertical-divider {
-      @include mdc-theme.property(border-left-color, on-primary);
-  
-      display: inline-block;
-      position: absolute;
-      top: 8px;
-      bottom: 8px;
-      border-left-width: 1px;
-      border-left-style: solid;
-    }
-  
-    &--focused {
-      .forge-app-bar-search__container {
-        @include theme.css-custom-property(background-color, --forge-app-bar-search-theme-background-focused, variables.$background-focused);
-  
-        &::before {
-          opacity: 0.87;
-          border-width: 2px;
-          top: -1px;
-          right: -1px;
-          bottom: -1px;
-          left: -1px;
-        }
-      }
-    }
-  
-    &--disabled {
-      @include theme.css-custom-property(opacity, --forge-app-bar-search-theme-disabled-opacity, variables.$disabled-opacity);
-      
-      cursor: not-allowed;
-  
-      .forge-app-bar-search__container {
-        &:hover::before {
-          opacity: 54%;
-        }
-      }
-      
-      ::slotted(input) {
-        cursor: not-allowed;
-      }
-    }
-  }
-}
-
-@mixin host() {
-  display: block;
-  width: 100%;
-  contain: layout style;
-}
-
-@mixin base() {
-  display: flex;
-  height: 2.25rem;
-}
-
-@mixin container() {
-  @include theme.css-custom-property(background-color, --forge-app-bar-search-theme-background, variables.$background);
-  
-  width: 100%;
-  flex: 1 1 auto;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  position: relative;
-
-  &::before {
-    @include mdc-theme.property(border-color, on-primary);
-
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    border-radius: 2px;
-    border-width: 1px;
-    border-style: solid;
-    z-index: -1;
-    opacity: 0.54;
-    transition-property: border-color, opacity;
-    transition-duration: variables.$transition-duration;
-    transition-timing-function: variables.$timing-function;
-    will-change: border-color, border-width, opacity, top, left, bottom, right;
-  }
-
-  &:hover::before {
-    @include theme.css-custom-property(opacity, --forge-app-bar-search-theme-hover-opacity, variables.$hover-opacity);
-  }
-}
-
-@mixin icon-container() {
-  width: 56px;
-  height: variables.$height;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-}
-
-@mixin icon() {
-  @include mdc-theme.property(color, on-primary);
-}
-
-@mixin input() {
-  @include mdc-theme.property(color, on-primary);
-
-  display: block;
-  overflow: hidden;
-  background: none;
-  border: none;
-  font-size: 1rem;
-  flex: 1 1 auto;
-  margin: 0;
-  margin-left: -8px;
-  outline: none;
-  pointer-events: auto;
-  transition-property: color;
-  transition-duration: variables.$transition-duration;
-  transition-timing-function: variables.$timing-function;
-
-  &::placeholder {
-    @include mdc-theme.property(color, text-secondary-on-background);
-    
-    font-size: 1rem;
-    opacity: 1;
-  }
-}
-
-@mixin actions() {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-// Use this mixin to generate classes for creating your own custom input containers.
-@mixin custom-input-classes() {
-  .forge-app-bar-input {
-    @include input;
-
-    &__container {
-      @include container;
-
-      padding: 8px 16px;
-    }
-  }
-}

package/styles/app-bar/search/_variables.scss

@@ -1,18 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-$background: rgba(255, 255, 255, 0.08) !default;
-$background-focused: rgba(255, 255, 255, 0.12) !default;
-$disabled-opacity: 0.26;
-$hover-opacity: 0.87;
-$height: 36px !default;
-$transition-duration: 150ms !default;
-$timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
-$theme-values: (
-  background: $background,
-  background-focused: $background-focused,
-  disabled-opacity: $disabled-opacity,
-  hover-opacity: $hover-opacity
-);