@tylertech/forge 3.0.0-next.14 → 3.0.0-next.16

package/esm/tooltip/tooltip-utils.js

@@ -1,53 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { positionElementAsync } from '@tylertech/forge-core';
-import { TOOLTIP_CONSTANTS } from './tooltip-constants';
-/**
- * Attaches a positioned tooltip to the provided target element.
- * @param targetElement The element to position the tooltip around.
- * @param placement The placement of the tooltip relative to the target element.
- * @param content The content of the tooltip.
- */
-export function attachTooltip(targetElement, placement, content) {
-    if (typeof content === 'string') {
-        content = document.createTextNode(content);
-    }
-    const element = document.createElement('div');
-    element.setAttribute('role', 'tooltip');
-    element.classList.add(TOOLTIP_CONSTANTS.classes.TOOLTIP);
-    element.appendChild(content);
-    element.setAttribute('role', 'tooltip');
-    element.setAttribute('aria-hidden', 'true');
-    const hostDocument = targetElement.ownerDocument || document;
-    hostDocument.body.appendChild(element);
-    const offset = { x: 0, y: 0 };
-    const offsetAmount = 4;
-    switch (placement) {
-        case 'top':
-            offset.y = -offsetAmount;
-            element.classList.add(TOOLTIP_CONSTANTS.classes.TOOLTIP_TOP);
-            break;
-        case 'right':
-            offset.x = offsetAmount;
-            element.classList.add(TOOLTIP_CONSTANTS.classes.TOOLTIP_RIGHT);
-            break;
-        case 'bottom':
-            offset.y = offsetAmount;
-            element.classList.add(TOOLTIP_CONSTANTS.classes.TOOLTIP_BOTTOM);
-            break;
-        case 'left':
-            offset.x = -offsetAmount;
-            element.classList.add(TOOLTIP_CONSTANTS.classes.TOOLTIP_LEFT);
-            break;
-    }
-    window.requestAnimationFrame(() => {
-        window.requestAnimationFrame(() => {
-            element.classList.add(TOOLTIP_CONSTANTS.classes.TOOLTIP_OPEN);
-            positionElementAsync({ element, targetElement, placement, transform: false, offset });
-        });
-    });
-    return element;
-}

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

@@ -1,16 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use './token-utils' as *;
-
-$host-tokens: [background foreground];
-
-@mixin host-configuration {
-  @include tokens($includes: $host-tokens);
-}
-
-@mixin configuration {
-  @include tokens($excludes: $host-tokens);
-}

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
-);

package/styles/button/_configuration.scss

@@ -1,16 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use './token-utils' as *;
-
-$host-tokens: [display disabled-cursor];
-
-@mixin host-configuration {
-  @include tokens($includes: $host-tokens);
-}
-
-@mixin configuration {
-  @include tokens($excludes: $host-tokens);
-}

package/styles/button-toggle/button-toggle/_mixins.scss

@@ -1,117 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/animation/functions' as mdc-animation;
-@use '@material/ripple/ripple' as mdc-ripple;
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
-@use '@material/feature-targeting/feature-targeting' as mdc-feature-targeting;
-@use '@material/button/button-base' as mdc-button-base;
-@use '@material/button/button-shared-theme' as mdc-button-shared-theme;
-@use '@material/button/button-outlined' as mdc-button-outlined;
-@use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
-@use '../../theme';
-
-@mixin host() {
-  display: inline-block;
-}
-
-@mixin core-styles() {
-  .forge-button-toggle {
-    @include base;
-
-    &:disabled {
-      @include theme.property(border-color, border-color);
-      @include mdc-theme.property(color, text-disabled-on-light);
-    }
-
-    &__selected:not(:disabled) {
-      @include selected;
-    }
-
-    &__selected:disabled {
-      @include selected;
-      opacity: 0.37;
-    }
-
-    ::slotted([slot=leading]) {
-      @include icon;
-
-      margin-right: 4px;
-    }
-
-    ::slotted([slot=trailing]) {
-      @include icon;
-
-      margin-left: 4px;
-    }
-
-    &--dense {
-      @include dense;
-
-      ::slotted([slot=leading]) {
-        @include icon-dense;
-      }
-
-      ::slotted([slot=trailing]) {
-        @include icon-dense;
-      }
-    }
-  }
-}
-
-@mixin base() {
-  @include mdc-ripple.surface();
-  @include mdc-ripple.radius-bounded();
-  @include mdc-ripple-theme.states(primary, false);
-  @include mdc-button-base.base(mdc-feature-targeting.all());
-  @include mdc-button-shared-theme.shape-radius(small);
-  @include mdc-button-shared-theme.container-fill-color(transparent);
-  @include mdc-button-shared-theme.ink-color(primary);
-  @include mdc-button-shared-theme.density(0);
-  @include mdc-button-outlined.outlined(mdc-feature-targeting.all());
-  @include mdc-button-outlined-theme.outline-width(mdc-button-outlined-theme.$outlined-border-width);
-  @include mdc-button-outlined-theme.outline-color(primary);
-
-  text-transform: none;
-  overflow: hidden;
-  width: 100%;
-  box-sizing: border-box;
-  transition: mdc-animation.enter(background-color, 150ms);
-  border-radius: 0;
-  border-bottom-width: var(--forge-button-toggle-border-bottom-width, 1px);
-  border-right-width: var(--forge-button-toggle-border-right-width, 1px);
-  border-top-left-radius: var(--forge-button-toggle-border-top-left-radius, 4px);
-  border-bottom-left-radius: var(--forge-button-toggle-border-bottom-left-radius, 4px);
-  border-top-right-radius: var(--forge-button-toggle-border-top-right-radius, 4px);
-  border-bottom-right-radius: var(--forge-button-toggle-border-bottom-right-radius, 4px);
-}
-
-@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 dense() {
-  @include mdc-button-shared-theme.density(-3);
-
-  height: 1.5rem;
-  font-size: 0.75rem;
-}
-
-@mixin icon() {
-  display: inline-block;
-  width: 1.125rem;
-  height: 1.125rem;
-  font-size: 1.125rem !important;
-  vertical-align: top;
-}
-
-@mixin icon-dense() {
-  width: 0.875rem;
-  height: 0.875rem;
-  font-size: 0.875rem !important;
-}

package/styles/button-toggle/button-toggle-group/_mixins.scss

@@ -1,79 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@mixin host() {
-  display: block;
-}
-
-@mixin core-styles() {
-  .forge-button-toggle-group {
-    @include base;
-
-    ::slotted(:not(:last-child)) {
-      --forge-button-toggle-border-right-width: 0;
-      --forge-button-toggle-border-top-left-radius: 0;
-      --forge-button-toggle-border-bottom-left-radius: 0;
-      --forge-button-toggle-border-top-right-radius: 0;
-      --forge-button-toggle-border-bottom-right-radius: 0;
-    }
-
-    ::slotted(:first-child) {
-      --forge-button-toggle-border-top-left-radius: 4px;
-      --forge-button-toggle-border-bottom-left-radius: 4px;
-    }
-
-    ::slotted(:last-child) {
-      --forge-button-toggle-border-top-left-radius: 0;
-      --forge-button-toggle-border-bottom-left-radius: 0;
-      --forge-button-toggle-border-top-right-radius: 4px;
-      --forge-button-toggle-border-bottom-right-radius: 4px;
-    }
-
-    &--vertical {
-      @include vertical;
-
-      ::slotted(:not(:last-child)) {
-        --forge-button-toggle-border-right-width: 1px;
-        --forge-button-toggle-border-bottom-width: 0;
-        --forge-button-toggle-border-top-left-radius: 0;
-        --forge-button-toggle-border-bottom-left-radius: 0;
-        --forge-button-toggle-border-top-right-radius: 0;
-        --forge-button-toggle-border-bottom-right-radius: 0;
-      }
-
-      ::slotted(:first-child) {
-        --forge-button-toggle-border-top-left-radius: 4px;
-        --forge-button-toggle-border-top-right-radius: 4px;
-      }
-  
-      ::slotted(:last-child) {
-        --forge-button-toggle-border-top-left-radius: 0;
-        --forge-button-toggle-border-top-right-radius: 0;
-        --forge-button-toggle-border-bottom-left-radius: 4px;
-        --forge-button-toggle-border-bottom-right-radius: 4px;
-      }
-    }
-
-    // Keep this below the vertical class
-    ::slotted(:only-child) {
-      --forge-button-toggle-border-top-left-radius: 4px;
-      --forge-button-toggle-border-bottom-left-radius: 4px;
-      --forge-button-toggle-border-top-right-radius: 4px;
-      --forge-button-toggle-border-bottom-right-radius: 4px;
-    }
-
-    &--stretch {
-      width: 100%;
-    }
-  }
-}
-
-@mixin base() {
-  display: flex;
-}
-
-@mixin vertical() {
-  flex-direction: column;
-}

package/styles/circular-progress/_configuration.scss

@@ -1,16 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use './token-utils' as *;
-
-$_host-tokens: [size];
-
-@mixin host-configuration {
-  @include tokens($includes: $_host-tokens);
-}
-
-@mixin configuration {
-  @include tokens($excludes: $_host-tokens);
-}

package/styles/floating-action-button/_configuration.scss

@@ -1,16 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use './token-utils' as *;
-
-$host-tokens: [display disabled-cursor];
-
-@mixin host-configuration {
-  @include tokens($includes: $host-tokens);
-}
-
-@mixin configuration {
-  @include tokens($excludes: $host-tokens);
-}

package/styles/icon-button/_configuration.scss

@@ -1,16 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use './token-utils' as *;
-
-$host-tokens: [display disabled-cursor];
-
-@mixin host-configuration {
-  @include tokens($includes: $host-tokens);
-}
-
-@mixin configuration {
-  @include tokens($excludes: $host-tokens);
-}

package/styles/linear-progress/_configuration.scss

@@ -1,28 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use './token-utils' as *;
-
-$_host-tokens: [track-height];
-
-@mixin host-configuration {
-  @include tokens($includes: $_host-tokens);
-}
-
-@mixin configuration {
-  // Token vars
-  @include tokens($excludes: $_host-tokens);
-
-  // State vars
-  #{declare(track-dot-size)}: calc(#{token(track-height)} / 2);
-  #{declare(track-background-width)}: calc(#{token(track-dot-size, custom)} * 5);
-  #{declare(track-background)}: 0 / #{token(track-background-width, custom)} 100%
-    radial-gradient(
-      circle at calc(#{token(track-dot-size, custom)} * 2),
-      #{token(track-color)} 0,
-      #{token(track-color)} #{token(track-dot-size, custom)},
-      transparent #{token(track-dot-size, custom)}
-    );
-}

package/styles/list/list-item/_configuration.scss

@@ -1,16 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use './token-utils' as *;
-
-$_host-tokens: [indent dense-indent];
-
-@mixin host {
-  @include tokens($includes: $_host-tokens);
-}
-
-@mixin configuration {
-  @include tokens($excludes: $_host-tokens);
-}