@tylertech/forge 2.0.0

package/esm/view-switcher/view-switcher.js

@@ -0,0 +1,73 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { CustomElement, attachShadowTemplate, coerceNumber, FoundationProperty } from '@tylertech/forge-core';
+import { ViewSwitcherAdapter } from './view-switcher-adapter';
+import { ViewSwitcherFoundation } from './view-switcher-foundation';
+import { VIEW_SWITCHER_CONSTANTS } from './view-switcher-constants';
+import { ViewComponent } from './view/view';
+import { BaseComponent } from '../core/base/base-component';
+const template = '<template><div class=\"forge-view-switcher\" part=\"root\"><slot></slot></div></template>';
+const styles = '.forge-view-switcher{height:auto;height:var(--forge-view-switcher-height,auto);position:relative;overflow:hidden;-webkit-transition:height var(--forge-view-switcher-animation-duration, 500ms) cubic-bezier(.35, 0, .25, 1);transition:height var(--forge-view-switcher-animation-duration, 500ms) cubic-bezier(.35, 0, .25, 1)}.forge-view-switcher ::slotted(.forge-view-switcher__view--hidden){position:absolute;top:0;right:0;bottom:0;left:0}:host{height:auto;height:var(--forge-view-switcher-height,auto);display:block}:host([hidden]){display:none}:host(.forge-view-switcher--slide) ::slotted(forge-view){-webkit-transition:-webkit-transform var(--forge-view-switcher-animation-duration, 500ms) cubic-bezier(.35, 0, .25, 1);transition:-webkit-transform var(--forge-view-switcher-animation-duration, 500ms) cubic-bezier(.35, 0, .25, 1);transition:transform var(--forge-view-switcher-animation-duration, 500ms) cubic-bezier(.35, 0, .25, 1);transition:transform var(--forge-view-switcher-animation-duration, 500ms) cubic-bezier(.35, 0, .25, 1),-webkit-transform var(--forge-view-switcher-animation-duration, 500ms) cubic-bezier(.35, 0, .25, 1);will-change:transform}:host(.forge-view-switcher--fade) ::slotted(forge-view){-webkit-transition:opacity var(--forge-view-switcher-animation-duration, 500ms) cubic-bezier(.35, 0, .25, 1);transition:opacity var(--forge-view-switcher-animation-duration, 500ms) cubic-bezier(.35, 0, .25, 1);will-change:opacity}:host(.forge-view-switcher--fade) ::slotted(.forge-view-switcher__view--hidden){opacity:0}';
+let ViewSwitcherComponent = class ViewSwitcherComponent extends BaseComponent {
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new ViewSwitcherFoundation(new ViewSwitcherAdapter(this));
+    }
+    static get observedAttributes() {
+        return [
+            VIEW_SWITCHER_CONSTANTS.attributes.INDEX,
+            VIEW_SWITCHER_CONSTANTS.attributes.ANIMATION_TYPE
+        ];
+    }
+    connectedCallback() {
+        // upgradeProperty(this, 'index');
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.disconnect();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case VIEW_SWITCHER_CONSTANTS.attributes.INDEX:
+                this.index = coerceNumber(newValue);
+                break;
+            case VIEW_SWITCHER_CONSTANTS.attributes.ANIMATION_TYPE:
+                this.animationType = newValue;
+                break;
+        }
+    }
+    /** Transitions to the next view. */
+    next() {
+        this._foundation.next();
+    }
+    /** Transitions to the previous view. */
+    previous() {
+        this._foundation.previous();
+    }
+    /** Transitions to the first view. */
+    goToStart() {
+        this._foundation.goToStart();
+    }
+    /** Transitions to the last view. */
+    goToEnd() {
+        this._foundation.goToEnd();
+    }
+};
+__decorate([
+    FoundationProperty()
+], ViewSwitcherComponent.prototype, "index", void 0);
+__decorate([
+    FoundationProperty()
+], ViewSwitcherComponent.prototype, "animationType", void 0);
+ViewSwitcherComponent = __decorate([
+    CustomElement({
+        name: VIEW_SWITCHER_CONSTANTS.elementName,
+        dependencies: [ViewComponent]
+    })
+], ViewSwitcherComponent);
+export { ViewSwitcherComponent };

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@tylertech/forge",
+  "description": "Forge Web Components library",
+  "version": "2.0.0",
+  "author": "Tyler Technologies, Inc.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tyler-technologies-oss/forge.git"
+  },
+  "main": "esm/index.js",
+  "module": "esm/index.js",
+  "typings": "esm/index.d.ts",
+  "sideEffects": false,
+  "dependencies": {
+    "@tylertech/forge-core": "^2.0.0",
+    "@tylertech/tyler-icons": "^1.12.0",
+    "imask": "^6.4.2",
+    "material-components-web": "^14.0.0",
+    "tslib": "^2.3.1"
+  }
+}

package/styles/app-bar/_mixins.scss

@@ -0,0 +1,242 @@
+/**
+ * @license
+ * Copyright 2022 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/icon-button/mixins' as mdc-icon-button-mixins;
+@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';
+
+@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) {
+    --mdc-theme-primary: var(--forge-app-bar-theme-on-background, #{variables.$on-background});
+  }
+
+  ::slotted(forge-button[type=outlined]),
+  ::slotted(forge-button:not([type])) {
+    --mdc-theme-primary: var(--forge-app-bar-theme-on-background, rgba(255, 255, 255, 0.87));
+  }
+}

package/styles/app-bar/_variables.scss

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright 2022 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

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2022 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

@@ -0,0 +1,238 @@
+/**
+ * @license
+ * Copyright 2022 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

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2022 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/app-bar/search/app-bar-search.scss

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

package/styles/autocomplete/autocomplete.scss

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}