@tylertech/forge 3.0.0-next.19 → 3.0.0-next.20

package/esm/product-icon/product-icon-foundation.js

@@ -1,116 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { coerceNumber } from '@tylertech/forge-core';
-import { COLOR_CONSTANTS } from '../theme';
-import { PRODUCT_ICON_CONSTANTS } from './product-icon-constants';
-export class ProductIconFoundation {
-    constructor(_adapter) {
-        this._adapter = _adapter;
-        this._colorValue = PRODUCT_ICON_CONSTANTS.strings.DEFAULT_COLOR_VALUE;
-        this._colorPalette = PRODUCT_ICON_CONSTANTS.strings.DEFAULT_COLOR_PALETTE;
-        this._colorShade = PRODUCT_ICON_CONSTANTS.strings.DEFAULT_COLOR_SHADE;
-        this._size = PRODUCT_ICON_CONSTANTS.numbers.DEFAULT_SIZE;
-        this._shadow = true;
-        this._backgroundColor = PRODUCT_ICON_CONSTANTS.strings.DEFAULT_BACKGROUND_COLOR;
-        this._iterations = PRODUCT_ICON_CONSTANTS.numbers.DEFAULT_ITERATIONS;
-        this._usingCustomIterations = false;
-    }
-    initialize() {
-        this._adapter.setElementSize(this._size);
-        this._updateFontSize();
-        this._parseColor();
-        this._render();
-    }
-    _parseColor() {
-        if (this._colorValue.includes('-')) {
-            this._colorPalette = this._colorValue.split('-')[0];
-            this._colorShade = coerceNumber(this._colorValue.split('-')[1]);
-        }
-        else {
-            this._colorPalette = this._colorValue;
-            this._colorShade = PRODUCT_ICON_CONSTANTS.strings.DEFAULT_COLOR_SHADE;
-        }
-    }
-    _updateSize() {
-        this._adapter.setElementSize(this._size);
-        // If not using a custom iteration value, then we need to adjust the shadow length
-        if (!this._usingCustomIterations) {
-            this._iterations = this._size / 2;
-            this._updateShadow();
-        }
-    }
-    _updateFontSize() {
-        this._adapter.setFontSize(this._size);
-    }
-    _updateShadow() {
-        if (this._shadow) {
-            this._adapter.setTextShadow(this._shadow, this._iterations, this._shadowColor);
-        }
-    }
-    _render() {
-        if (!this._colorValue) {
-            return;
-        }
-        const iconColor = this._colorShade <= PRODUCT_ICON_CONSTANTS.numbers.ACCESSIBILITY_COLOR_THRESHOLD ? '#000000' : '#ffffff';
-        const shadowIncrement = this._colorShade + 300;
-        if (!COLOR_CONSTANTS[`${this._colorPalette}Palette`]) {
-            this._colorPalette = PRODUCT_ICON_CONSTANTS.strings.DEFAULT_COLOR_PALETTE;
-        }
-        this._backgroundColor = COLOR_CONSTANTS[`${this._colorPalette}Palette`][this._colorShade];
-        this._shadowColor = COLOR_CONSTANTS[`${this._colorPalette}Palette`][shadowIncrement];
-        this._adapter.setBackgroundColor(this._backgroundColor);
-        this._adapter.setIconColor(iconColor);
-        this._updateShadow();
-    }
-    get color() {
-        return this._colorValue;
-    }
-    set color(value) {
-        if (this._colorValue !== value) {
-            this._colorValue = value;
-            this._parseColor();
-            this._render();
-            this._adapter.setHostAttribute(PRODUCT_ICON_CONSTANTS.attributes.COLOR, this._colorValue);
-        }
-    }
-    get size() {
-        return this._size;
-    }
-    set size(value) {
-        if (this._size !== value) {
-            this._size = value;
-            this._updateSize();
-            this._updateFontSize();
-            this._adapter.setHostAttribute(PRODUCT_ICON_CONSTANTS.attributes.SIZE, this._size.toString());
-        }
-    }
-    get shadow() {
-        return this._shadow;
-    }
-    set shadow(value) {
-        if (this._shadow !== value) {
-            this._shadow = value;
-            this._adapter.setTextShadow(this._shadow, this._iterations, this._shadowColor);
-            if (this._shadow) {
-                this._adapter.setHostAttribute(PRODUCT_ICON_CONSTANTS.attributes.SHADOW, '');
-            }
-            else {
-                this._adapter.removeIconClass(PRODUCT_ICON_CONSTANTS.attributes.SHADOW);
-            }
-        }
-    }
-    get iterations() {
-        return this._iterations;
-    }
-    set iterations(value) {
-        if (this._iterations !== value) {
-            this._usingCustomIterations = true;
-            this._iterations = value;
-            this._updateShadow();
-            this._adapter.setHostAttribute(PRODUCT_ICON_CONSTANTS.attributes.ITERATIONS, this._iterations.toString());
-        }
-    }
-}

package/esm/product-icon/product-icon.d.ts

@@ -1,37 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { BaseComponent, IBaseComponent } from '../core/base/base-component';
-export interface IProductIconComponent extends IBaseComponent {
-    color: string;
-    size: number;
-    shadow: boolean;
-    iterations: number;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'forge-product-icon': IProductIconComponent;
-    }
-}
-/**
- * The web component class behind the `<forge-product-icon>` custom element.
- *
- * @tag forge-product-icon
- */
-export declare class ProductIconComponent extends BaseComponent implements IProductIconComponent {
-    static get observedAttributes(): string[];
-    private _foundation;
-    constructor();
-    connectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    /** The color of the container element from the material color palette. */
-    color: string;
-    /** Controls the height and width of the container element. */
-    size: number;
-    /** Controls the visibility of the text shadow. */
-    shadow: boolean;
-    /** The number of iterations to apply the text shadow. */
-    iterations: number;
-}

package/esm/product-icon/product-icon.js

@@ -1,70 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import { __decorate } from "tslib";
-import { CustomElement, attachShadowTemplate, coerceNumber, coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
-import { ProductIconAdapter } from './product-icon-adapter';
-import { ProductIconFoundation } from './product-icon-foundation';
-import { PRODUCT_ICON_CONSTANTS } from './product-icon-constants';
-import { BaseComponent } from '../core/base/base-component';
-const template = '<template><div class=\"forge-product-icon__background\" part=\"root\"><div class=\"forge-product-icon__container\" part=\"container\"><span class=\"forge-product-icon__icon\" part=\"icon-container\"><slot></slot></span><span class=\"forge-product-icon__text\" part=\"text-container\"><slot name=\"text\"></slot></span></div></div></template>';
-const styles = '.forge-product-icon__background{border-radius:50%;border-radius:var(--forge-product-icon-border-radius,50%);height:64px;width:64px;overflow:hidden}.forge-product-icon__container{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;height:100%;width:100%}.forge-product-icon__icon ::slotted(*),.forge-product-icon__text ::slotted(*){display:-webkit-box!important;display:flex!important;color:#fff!important;font-size:var(--forge-product-icon-font-size, 48px)!important}:host{display:inline-block}:host([hidden]){display:none}';
-/**
- * The web component class behind the `<forge-product-icon>` custom element.
- *
- * @tag forge-product-icon
- */
-let ProductIconComponent = class ProductIconComponent extends BaseComponent {
-    static get observedAttributes() {
-        return [
-            PRODUCT_ICON_CONSTANTS.attributes.COLOR,
-            PRODUCT_ICON_CONSTANTS.attributes.SIZE,
-            PRODUCT_ICON_CONSTANTS.attributes.SHADOW,
-            PRODUCT_ICON_CONSTANTS.attributes.ITERATIONS
-        ];
-    }
-    constructor() {
-        super();
-        attachShadowTemplate(this, template, styles);
-        this._foundation = new ProductIconFoundation(new ProductIconAdapter(this));
-    }
-    connectedCallback() {
-        this._foundation.initialize();
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        switch (name) {
-            case PRODUCT_ICON_CONSTANTS.attributes.COLOR:
-                this.color = newValue;
-                break;
-            case PRODUCT_ICON_CONSTANTS.attributes.SIZE:
-                this.size = coerceNumber(newValue);
-                break;
-            case PRODUCT_ICON_CONSTANTS.attributes.SHADOW:
-                this.shadow = coerceBoolean(newValue);
-                break;
-            case PRODUCT_ICON_CONSTANTS.attributes.ITERATIONS:
-                this.iterations = coerceNumber(newValue);
-                break;
-        }
-    }
-};
-__decorate([
-    FoundationProperty()
-], ProductIconComponent.prototype, "color", void 0);
-__decorate([
-    FoundationProperty()
-], ProductIconComponent.prototype, "size", void 0);
-__decorate([
-    FoundationProperty()
-], ProductIconComponent.prototype, "shadow", void 0);
-__decorate([
-    FoundationProperty()
-], ProductIconComponent.prototype, "iterations", void 0);
-ProductIconComponent = __decorate([
-    CustomElement({
-        name: PRODUCT_ICON_CONSTANTS.elementName
-    })
-], ProductIconComponent);
-export { ProductIconComponent };

package/styles/button-area/_mixins.scss

@@ -1,47 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use '@material/ripple/ripple' as mdc-ripple;
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
-@use '../utils/mixins' as utils;
-@use '../ripple/forge-ripple';
-
-@mixin core-styles() {
-  .forge-button-area {
-    @include base;
-
-    &:not(.forge-button-area--disabled) {
-      &.forge-button-area {
-        @include enabled;
-      }
-    }
-
-    &__button {
-      @include button;
-    }
-  }
-}
-
-@mixin host() {
-  display: block;
-}
-
-@mixin base() {
-  overflow: hidden;
-}
-
-@mixin enabled() {
-  @include mdc-ripple.surface;
-  @include mdc-ripple.radius-bounded;
-  @include mdc-ripple-theme.states(primary);
-  @include mdc-ripple-theme.states-activated(primary);
-  @include mdc-ripple-theme.states-selected(primary);
-
-  cursor: pointer;
-}
-
-@mixin button() {
-  @include utils.visually-hidden;
-}

package/styles/chips/chip/_mixins.scss

@@ -1,306 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use '@material/chips/chip-theme' as mdc-chip-theme;
-@use '@material/ripple/ripple' as mdc-ripple;
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
-@use '@material/animation/animation' as mdc-animation;
-@use '@material/theme/theme' as mdc-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 '@material/checkbox/checkbox' as mdc-checkbox;
-@use '../../theme';
-@use './variables';
-
-@mixin core-styles() {
-  .forge-chip {
-    @include base;
-
-    &.forge-chip--disabled {
-      @include theme.property(border-color, border-color);
-      @include mdc-theme.property(color, text-disabled-on-light);
-      cursor: default;
-      pointer-events: none;
-
-      .forge-chip__delete-button {
-        opacity: 0.54;
-      }
-    }
-
-    &__leading {
-      &--hidden {
-        display: none;
-      }
-    }
-
-    &__content {
-      flex-grow: 1;
-      text-align: center;
-
-      &:focus {
-        outline: none;
-      }
-    }
-
-    ::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(.forge-chip--disabled) {
-          @include selected;
-        }
-
-        &.forge-chip--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(.forge-chip--disabled) {
-        .forge-chip__delete-button {
-          @include mdc-theme.property(color, error);
-
-          &:focus,
-          &:hover {
-            @include mdc-theme.property(color, text-primary-on-background);
-          }
-        }
-      }
-
-      &.forge-chip--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(min-height, --forge-chip-min-height, variables.$dense-field-min-height);
-        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(.forge-chip--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 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);
-
-  @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, auto);
-  @include theme.css-custom-property(min-height, --forge-chip-min-height, variables.$min-height);
-  
-  box-sizing: border-box;
-  transition: mdc-animation.enter(background-color, 150ms);
-  text-transform: none;
-  overflow: hidden;
-}
-
-@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;
-
-  &:focus {
-    outline: currentColor solid 2px;
-  }
-}
-
-@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(min-height, --forge-chip-min-height, variables.$dense-min-height);
-}

package/styles/chips/chip/_variables.scss

@@ -1,8 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-$min-height: 36px !default;
-$dense-min-height: 28px !default;
-$dense-field-min-height: 20px !default;

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

@@ -1,40 +0,0 @@
-/**
- * @license
- * Copyright 2023 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/divider/_mixins.scss

@@ -1,47 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use '../theme';
-@use './variables';
-
-@mixin core-styles() {
-  .forge-divider {
-    @include base;
-  }
-}
-
-@mixin host() {
-  display: block;
-  contain: content;
-}
-
-@mixin base() {
-  border: none;
-
-  @include theme.property(border-bottom-color, border-color);
-  @include theme.css-custom-property(border-bottom-width, --forge-divider-width, variables.$width);
-  @include theme.css-custom-property(margin, --forge-divider-margin, variables.$margin);
-
-  height: 0;
-  border-bottom-style: solid;
-}
-
-@mixin vertical-base() {
-  border: none;
-
-  @include theme.property(border-right-color, border-color);
-  @include theme.css-custom-property(border-right-width, --forge-divider-width, variables.$width);
-  @include theme.css-custom-property(margin, --forge-divider-margin, variables.$margin);
-
-  height: 100%;
-  width: 0;
-  border-right-style: solid;
-}
-
-@mixin vertical-host {
-  display: inline-block;
-  // needed for non-flex areas
-  height: 100%;
-}