@tylertech/forge 2.13.2 → 2.14.0-dev.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Forge Web Components library",
-  "version": "2.13.2",
+  "version": "2.14.0-dev.1",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,11 +13,38 @@
   "typings": "esm/index.d.ts",
   "sideEffects": false,
   "dependencies": {
+    "@material/animation": "^14.0.0",
+    "@material/button": "^14.0.0",
+    "@material/card": "^14.0.0",
+    "@material/checkbox": "^14.0.0",
+    "@material/circular-progress": "^14.0.0",
+    "@material/chips": "^14.0.0",
+    "@material/density": "^14.0.0",
+    "@material/dom": "^14.0.0",
+    "@material/drawer": "^14.0.0",
+    "@material/elevation": "^14.0.0",
+    "@material/feature-targeting": "^14.0.0",
+    "@material/form-field": "^14.0.0",
+    "@material/icon-button": "^14.0.0",
+    "@material/linear-progress": "^14.0.0",
+    "@material/menu-surface": "^14.0.0",
+    "@material/ripple": "^14.0.0",
+    "@material/rtl": "^14.0.0",
+    "@material/select": "^14.0.0",
+    "@material/shape": "^14.0.0",
+    "@material/slider": "^14.0.0",
+    "@material/switch": "^14.0.0",
+    "@material/tab-indicator": "^14.0.0",
+    "@material/tab-scroller": "^14.0.0",
+    "@material/theme": "^14.0.0",
+    "@material/tokens": "^14.0.0",
+    "@material/top-app-bar": "^14.0.0",
+    "@material/touch-target": "^14.0.0",
+    "@material/typography": "^14.0.0",
     "@tylertech/forge-core": "^2.1.0",
     "@tylertech/tyler-icons": "^1.12.0",
-    "imask": "^6.4.3",
-    "material-components-web": "^14.0.0",
+    "imask": "^6.6.1",
     "tslib": "^2.3.1"
   },
   "customElements": "custom-elements.json"
-}
+}

package/styles/busy-indicator/_mixins.scss

@@ -141,6 +141,7 @@
   @include mdc-theme.property(color, text-secondary-on-background);
 
   flex: 1 auto;
+  margin-block: 0;
 
   &:nth-child(2) {
     margin-left: 16px;

package/styles/chip-field/_selector.scss

@@ -7,19 +7,18 @@
 @use './base';
 
 @mixin field {
-  .forge-chip-field {
-    // Core
-    @include base.field-core;
-    // Height
-    &:not(.forge-field--dense):not(.forge-field--roomy) {
-      @include base.field-height(default, --forge-chip-field-height);
-    }
-    &.forge-field--roomy:not(.forge-field--dense) {
-      @include base.field-height(roomy, --forge-chip-field-height);
-    }
-    &.forge-field--dense:not(.forge-field--roomy) {
-      @include base.field-height(dense, --forge-chip-field-height);
-    }
+  // Core
+  @include base.field-core;
+
+  // Height
+  &:not(.forge-field--dense):not(.forge-field--roomy) {
+    @include base.field-height(default, --forge-chip-field-height);
+  }
+  &.forge-field--roomy:not(.forge-field--dense) {
+    @include base.field-height(roomy, --forge-chip-field-height);
+  }
+  &.forge-field--dense:not(.forge-field--roomy) {
+    @include base.field-height(dense, --forge-chip-field-height);
   }
 }
 

package/styles/chip-field/chip-field.scss

@@ -5,7 +5,7 @@
  */
 @use './mixins';
 
-@include mixins.core-styles();
+@include mixins.core-styles;
 
 :host {
   @include mixins.host;

package/styles/chips/chip/_mixins.scss

@@ -17,9 +17,14 @@
   .forge-chip {
     @include base;
 
-    &:disabled {
+    &.forge-chip--disabled {
       @include button-mixins.outlined-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;
       }
@@ -33,6 +38,10 @@
 
     &__content {
       flex-grow: 1;
+
+      &:focus {
+        outline: none;
+      }
     }
 
     ::slotted([slot='leading']) {
@@ -78,11 +87,11 @@
     &--input,
     &--choice {
       &.forge-chip--selected {
-        &:not(:disabled) {
+        &:not(.forge-chip--disabled) {
           @include selected;
         }
 
-        &:disabled {
+        &.forge-chip--disabled {
           @include selected-disabled;
         }
 
@@ -116,7 +125,7 @@
         }
       }
 
-      &.forge-chip--invalid:not(:disabled) {
+      &.forge-chip--invalid:not(.forge-chip--disabled) {
         .forge-chip__delete-button {
           @include mdc-theme.property(color, error);
 
@@ -127,7 +136,7 @@
         }
       }
 
-      &:disabled {
+      &.forge-chip--disabled {
         .forge-chip__delete-button {
           @include mdc-theme.property(color, text-secondary-on-background);
         }
@@ -165,7 +174,7 @@
       }
     }
 
-    &--invalid:not(:disabled) {
+    &--invalid:not(.forge-chip--disabled) {
       @include invalid;
 
       .forge-chip__delete-button {
@@ -239,6 +248,10 @@
   outline: none;
   line-height: inherit;
   position: relative;
+
+  &:focus {
+    outline: currentColor solid 2px;
+  }
 }
 
 @mixin checkmark() {

package/styles/field/_base.scss

@@ -65,7 +65,7 @@
 }
 
 // Outline
-@mixin outline-core($custom-prop-text-field-background) {
+@mixin outline-core($custom-prop-text-field-background, $custom-prop-border-style) {
   display: flex;
   position: absolute;
   top: 0;
@@ -77,7 +77,7 @@
   max-width: 100%;
   height: 100%;
   pointer-events: none;
-  border-style: solid;
+  @include theme.css-custom-property(border-style, $custom-prop-border-style, solid);
   border-width: map.get(variables.$outline, border-width, default);
   transition: mdc-animation.enter(border-color, 200ms);
   @include theme.css-custom-property(

package/styles/field/_selector.scss

@@ -40,7 +40,7 @@
   @if list.index($exclude, core) == null {
     &::before {
       content: '';
-      @include base.outline-core(--#{$component-selector}-theme-background);
+      @include base.outline-core(--#{$component-selector}-theme-background, --#{$component-selector}-border-style);
     }
   }
   // Border Color

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

@@ -3,7 +3,6 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '@material/list/evolution-variables' as mdc-evolution-variables;
 @use '@material/rtl/rtl' as mdc-rtl;
 @use '@material/theme/theme' as mdc-theme;
 @use '@material/typography' as mdc-typography;
@@ -42,12 +41,6 @@
       }
     }
   
-    &--wrap {
-      .forge-list-item__text {
-        @include text-wrap;
-      }
-    }
-  
     &__text {
       @include text;
     }
@@ -60,7 +53,7 @@
     ::slotted([slot=tertiary-title]) {
       @include subtitle;
     }
-  
+
     &--two-line {
       @include two-line;
     }
@@ -86,6 +79,18 @@
       }
     }
   
+    &--wrap {
+      @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$single-line-height);
+      @include theme.css-custom-property(height, --forge-list-item-height, auto);
+
+      ::slotted([slot=title]),
+      ::slotted([slot=subtitle]),
+      ::slotted([slot=tertiary-title]),
+      .forge-list-item__text {
+        @include text-wrap;
+      }
+    }
+
     &--indented {
       @include indented;
     }
@@ -142,11 +147,13 @@
     }
 
     &--two-line {
-      height: variables.$two-line-height - 8px;
+      @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$two-line-height - 8px);
+      @include theme.css-custom-property(height, --forge-list-item-height, variables.$two-line-height - 8px);
     }
 
     &--three-line {
-      height: variables.$three-line-height - 8px;
+      @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$three-line-height - 8px);
+      @include theme.css-custom-property(height, --forge-list-item-height, variables.$three-line-height - 8px);
     }
 
     &:nth-child(1) {
@@ -167,6 +174,12 @@
       }
     }
 
+    &--wrap {
+      @include theme.css-custom-property(height, --forge-list-item-height, auto);
+      @include theme.css-custom-property(padding, --forge-list-item-padding, 4px variables.$drawer-inline-padding);
+      @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$drawer-single-line-height);
+    }
+
     &--disabled {
       @include theme.css-custom-property(cursor, --forge-list-item-cursor, not-allowed);
     }
@@ -180,10 +193,10 @@
 }
 
 @mixin base() {
-  @include theme.css-custom-property(min-height, --forge-list-item-min-height, auto);
-  @include theme.css-custom-property(max-height, --forge-list-item-max-height, auto);
+  @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$single-line-height);
+  @include theme.css-custom-property(max-height, --forge-list-item-max-height, none);
   @include theme.css-custom-property(height, --forge-list-item-height, variables.$single-line-height);
-  @include theme.css-custom-property(padding, --forge-list-item-padding, 0 mdc-evolution-variables.$side-padding);
+  @include theme.css-custom-property(padding, --forge-list-item-padding, #{variables.$block-padding variables.$inline-padding});
   @include theme.css-custom-property(margin-left, --forge-list-item-indent, 0);
   @include theme.css-custom-property(align-items, --forge-list-item-align-items, center);
 
@@ -256,13 +269,13 @@
 
 @mixin drawer {
   @include theme.css-custom-property(margin, --forge-list-item-margin, variables.$margin-drawer);
-  @include theme.css-custom-property(padding, --forge-list-item-padding, 0 8px);
+  @include theme.css-custom-property(padding, --forge-list-item-padding, 0 variables.$drawer-inline-padding);
   @include theme.css-custom-property(border-radius, --forge-list-item-border-radius, 4px);
   @include theme.css-custom-property(cursor, --forge-list-item-cursor, pointer);
+  @include theme.css-custom-property(height, --forge-list-item-height, variables.$drawer-single-line-height);
 
   font-size: 0.875rem;
   font-weight: 500;
-  height: 40px;
 }
 
 @mixin leading() {
@@ -309,8 +322,6 @@
 @mixin subtitle() {
   @include mdc-typography.typography(body2);
   @include mdc-typography.overflow-ellipsis;
-  @include mdc-typography.baseline-top(20);
-
   @include mdc-theme.property(color, text-secondary-on-background);
 
   display: block;

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

@@ -3,17 +3,26 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+@use 'sass:math';
+
+$block-padding: 8px;
+$inline-padding: 16px;
+$drawer-inline-padding: #{math.div($inline-padding, 2)};
+
 /// The default height for a single line list item.
-$single-line-height: 48px !default;
+$single-line-height: #{48px - $block-padding * 2} !default;
+
+/// The default min-height for a single line list item in a drawer context.
+$drawer-single-line-height: 40px !default;
 
 /// The default height for a two-line list item.
-$two-line-height: 72px !default;
+$two-line-height: #{72px - $block-padding * 2} !default;
 
 /// The default height for a three-line list item.
-$three-line-height: 88px !default;
+$three-line-height: #{88px - $block-padding * 2} !default;
 
 /// The default height for the dense single-line list item
-$dense-height: 32px !default;
+$dense-height: #{32px - $block-padding * 2} !default;
 
 /// The default margin for list items when placed in a drawer
 $margin-drawer: 8px !default;

package/styles/popup/popup.scss

@@ -14,3 +14,7 @@
 :host([hidden]) {
   display: none;
 }
+
+:host([constrain-viewport-width]) {
+  max-width: 100vw;
+}

package/styles/stack/_mixins.scss

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../theme';
+@use './variables';
+
+@mixin core-styles() {
+  .forge-stack {
+    @include base();
+    @include stretch();
+    @include theme.css-custom-property(gap, --forge-stack-gap, variables.$gap);
+    @include theme.css-custom-property(height, --forge-stack-height, 100%);
+  }
+}
+
+@mixin base() {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+@mixin inline() {
+  flex-direction: row;
+  --forge-stack-height: auto;
+}
+
+@mixin wrap() {
+  flex-wrap: wrap;
+}
+
+@mixin stretch() {
+  ::slotted(*) {
+    flex-grow: var(--forge-stack-stretch, 0);
+  }
+}
+
+@mixin justify-start() {
+  justify-content: start;
+}
+
+@mixin justify-center() {
+  justify-content: center;
+}
+
+@mixin justify-end() {
+  justify-content: end;
+}

package/styles/stack/_variables.scss

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+$gap: 16px !default;

package/styles/stack/stack.scss

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './mixins';
+@include mixins.core-styles;
+
+:host {
+  display: block;
+  height: 100%;
+}
+
+:host([inline]) {
+  .forge-stack {
+    @include mixins.inline;
+  }
+}
+
+:host([inline][wrap]) {
+  .forge-stack {
+    @include mixins.wrap;
+  }
+}
+
+:host([stretch]) {
+  --forge-stack-stretch: 1;
+}
+
+:host([alignment=start]) {
+  .forge-stack {
+    @include mixins.justify-start;
+  }
+}
+
+:host([alignment=center]) {
+  .forge-stack {
+    @include mixins.justify-center;
+  }
+}
+
+:host([alignment=end]) {
+  .forge-stack {
+    @include mixins.justify-end;
+  }
+}

package/styles/toolbar/_mixins.scss

@@ -11,8 +11,7 @@
   @include mdc-theme.property(background-color, surface);
   @include theme.css-custom-property(min-height, --forge-toolbar-min-height, variables.$min-height);
   @include theme.css-custom-property(height, --forge-toolbar-height, variables.$height);
-  @include theme.css-custom-property(padding-left, --forge-toolbar-padding, variables.$padding);
-  @include theme.css-custom-property(padding-right, --forge-toolbar-padding, variables.$padding);
+  @include theme.css-custom-property(padding-inline, --forge-toolbar-padding, variables.$padding);
   @include theme.css-custom-property(border-bottom, --forge-toolbar-border-bottom, variables.$border-bottom);
   @include theme.css-custom-property(border-top-left-radius, --forge-toolbar-border-top-left-radius, 0);
   @include theme.css-custom-property(border-top-right-radius, --forge-toolbar-border-top-right-radius, 0);

package/styles/toolbar/toolbar.scss

@@ -3,6 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+@use '../theme';
 @use './mixins';
 
 @include mixins.core-styles;
@@ -22,6 +23,18 @@
   }
 }
 
+:host([no-padding]) {
+  .forge-toolbar {
+    @include theme.css-custom-property(padding-inline, --forge-toolbar-padding, 0);
+  }
+}
+
+:host([auto-height]) {
+  .forge-toolbar {
+    @include theme.css-custom-property(height, --forge-toolbar-height, auto);
+  }
+}
+
 /// Remove margin from all commonly used native elements that have default margin
 .forge-toolbar {
   ::slotted(h1) { margin: 0; }

package/styles/view-switcher/_mixins.scss

@@ -18,12 +18,14 @@
 
 @mixin host() {
   @include theme.css-custom-property(height, --forge-view-switcher-height, auto);
+  @include theme.css-custom-property(width, --forge-view-switcher-width, auto);
 
   display: block;
 }
 
 @mixin base() {
   @include theme.css-custom-property(height, --forge-view-switcher-height, auto);
+  @include theme.css-custom-property(width, --forge-view-switcher-width, auto);
 
   position: relative;
   overflow: hidden;

package/dist/esm/chunks/chunk.2CEW64ZM.js

@@ -1,7 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import{a as x}from"./chunk.MIYZJUXH.js";import{a as v}from"./chunk.5PXABBKU.js";import{a as g}from"./chunk.B3IJU6XJ.js";import{a as h,b as k}from"./chunk.OOW3UKT4.js";import{a as l,e as p,g as b,l as u}from"./chunk.MMVZJLXE.js";import{f as m,g as c}from"./chunk.R4NDFXVA.js";import{k as d}from"./chunk.G76HB2FK.js";import{f as a}from"./chunk.MCIQXNKY.js";var C=`${k}badge`,w={DOT:"dot",OPEN:"open",THEME:"theme",STRONG:"strong"},_={DOT:"forge-badge--dot",OPEN:"forge-badge--open"},B={ROOT:".forge-badge"},e={elementName:C,attributes:w,classes:_,selectors:B};var n=class extends v{constructor(t){super(t);this._rootElement=b(t,e.selectors.ROOT)}setRootClass(t){m(t,this._rootElement)}removeRootClass(t){c(t,this._rootElement)}};var s=class{constructor(o){this._adapter=o;this._dot=!1;this._open=!0}initialize(){this._applyDot(),this._setOpen()}_applyDot(){this._dot?(this._adapter.setRootClass(e.classes.DOT),this._adapter.setHostAttribute(e.attributes.DOT)):(this._adapter.removeRootClass(e.classes.DOT),this._adapter.removeHostAttribute(e.attributes.DOT))}_setOpen(){this._open?(this._adapter.setRootClass(e.classes.OPEN),this._adapter.setHostAttribute(e.attributes.OPEN)):(this._adapter.removeRootClass(e.classes.OPEN),this._adapter.removeHostAttribute(e.attributes.OPEN))}get dot(){return this._dot}set dot(o){this._dot!==o&&(this._dot=o,this._applyDot())}get open(){return this._open}set open(o){this._open!==o&&(this._open=o,this._setOpen())}};var O='<template><div class="forge-badge forge-badge--open" part="root"><slot name="leading"></slot><slot></slot><slot name="trailing"></slot></div></template>',I='.forge-badge{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);height:1.25rem;height:var(--forge-badge-height,1.25rem);line-height:1.25rem;line-height:var(--forge-badge-line-height, 1.25rem);min-width:0;min-width:var(--forge-badge-min-width,0);max-width:auto;max-width:var(--forge-badge-max-width,auto);border:none;border:var(--forge-badge-border,none);display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;gap:4px;-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out;-webkit-transform:scale(0);transform:scale(0);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;border-radius:16px;padding:0 8px;font-weight:700}.forge-badge--elevated{box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.forge-badge--open{-webkit-transform:scale(1);transform:scale(1)}.forge-badge--dot{height:.5rem;width:.5rem;min-width:auto;padding:0}:host{--forge-icon-font-size:14px;display:-webkit-box;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box}:host([hidden]){display:none}:host([positioned]){position:absolute;top:0;left:100%;-webkit-transform:translateX(-1.25rem);transform:translateX(-1.25rem)}:host([dot]){top:.5rem}:host([dot]) .forge-badge>slot{display:none}:host([static]){position:static}:host(:not([theme])) .forge-badge,:host([theme=""]) .forge-badge{background:#ffc107;background:var(--forge-badge-theme-default-muted-background,#ffc107);color:rgba(0,0,0,.87);color:var(--forge-badge-theme-default-muted-color,rgba(0,0,0,.87))}:host(:not([theme])[strong]) .forge-badge,:host([theme=""][strong]) .forge-badge{background:#3d5afe;background:var(--forge-badge-theme-default-strong-background,#3d5afe);color:#fff;color:var(--forge-badge-theme-default-strong-color,#fff)}:host([theme=default]) .forge-badge{background:#ffc107;background:var(--forge-badge-theme-default-muted-background,#ffc107);color:rgba(0,0,0,.87);color:var(--forge-badge-theme-default-muted-color,rgba(0,0,0,.87))}:host([theme=default][strong]) .forge-badge{background:#3d5afe;background:var(--forge-badge-theme-default-strong-background,#3d5afe);color:#fff;color:var(--forge-badge-theme-default-strong-color,#fff)}:host([theme=danger]) .forge-badge{background:#ffcdd2;background:var(--forge-badge-theme-danger-muted-background,#ffcdd2);color:#a22d0e;color:var(--forge-badge-theme-danger-muted-color,#a22d0e)}:host([theme=danger][strong]) .forge-badge{background:#b00020;background:var(--forge-badge-theme-danger-strong-background,#b00020);color:#fff;color:var(--forge-badge-theme-danger-strong-color,#fff)}:host([theme=warning]) .forge-badge{background:#ffdba6;background:var(--forge-badge-theme-warning-muted-background,#ffdba6);color:#a03a03;color:var(--forge-badge-theme-warning-muted-color,#a03a03)}:host([theme=warning][strong]) .forge-badge{background:#d14900;background:var(--forge-badge-theme-warning-strong-background,#d14900);color:#fff;color:var(--forge-badge-theme-warning-strong-color,#fff)}:host([theme=success]) .forge-badge{background:#a5d6a7;background:var(--forge-badge-theme-success-muted-background,#a5d6a7);color:#1b5e20;color:var(--forge-badge-theme-success-muted-color,#1b5e20)}:host([theme=success][strong]) .forge-badge{background:#2e7d32;background:var(--forge-badge-theme-success-strong-background,#2e7d32);color:#fff;color:var(--forge-badge-theme-success-strong-color,#fff)}:host([theme=info-primary]) .forge-badge{background:#bbdefb;background:var(--forge-badge-theme-info-primary-muted-background,#bbdefb);color:#1a237e;color:var(--forge-badge-theme-info-primary-muted-color,#1a237e)}:host([theme=info-primary][strong]) .forge-badge{background:#1a237e;background:var(--forge-badge-theme-info-primary-strong-background,#1a237e);color:#fff;color:var(--forge-badge-theme-info-primary-strong-color,#fff)}:host([theme=info-secondary]) .forge-badge{background:#e0e0e0;background:var(--forge-badge-theme-info-secondary-muted-background,#e0e0e0);color:#000;color:var(--forge-badge-theme-info-secondary-muted-color,#000)}:host([theme=info-secondary][strong]) .forge-badge{background:#000;background:var(--forge-badge-theme-info-secondary-strong-background,#000);color:#fff;color:var(--forge-badge-theme-info-secondary-strong-color,#fff)}',r=class extends u{constructor(){super();p(this,O,I),this._foundation=new s(new n(this))}static get observedAttributes(){return[e.attributes.DOT,e.attributes.OPEN]}connectedCallback(){this._foundation.initialize()}attributeChangedCallback(t,E,f){switch(t){case e.attributes.DOT:this.dot=d(f);break;case e.attributes.OPEN:this.open=d(f);break}}};a([g()],r.prototype,"dot",2),a([g()],r.prototype,"open",2),r=a([h({name:e.elementName})],r);var y=class extends x{constructor(o){super(o)}_build(){return document.createElement(e.elementName)}};function Y(){l(r)}export{e as a,n as b,s as c,r as d,y as e,Y as f};
-//# sourceMappingURL=chunk.2CEW64ZM.js.map

package/dist/esm/chunks/chunk.2CEW64ZM.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/badge/badge-constants.ts", "../../src/badge/badge-adapter.ts", "../../src/badge/badge-foundation.ts", "../../src/badge/badge.ts", "../../src/badge/badge-component-delegate.ts", "../../src/badge/index.ts"],
-  "sourcesContent": ["import { COMPONENT_NAME_PREFIX } from '../constants';\r\n\r\nconst elementName: keyof HTMLElementTagNameMap = `${COMPONENT_NAME_PREFIX}badge`;\r\n\r\nconst attributes = {\r\n  DOT: 'dot',\r\n  OPEN: 'open',\r\n  THEME: 'theme',\r\n  STRONG: 'strong'\r\n};\r\n\r\nconst classes = {\r\n  DOT: 'forge-badge--dot',\r\n  OPEN: 'forge-badge--open'\r\n};\r\n\r\nconst selectors = {\r\n  ROOT: '.forge-badge'\r\n};\r\n\r\nexport const BADGE_CONSTANTS = {\r\n  elementName,\r\n  attributes,\r\n  classes,\r\n  selectors\r\n};\r\n", "import { addClass, getShadowElement, removeClass } from '@tylertech/forge-core';\nimport { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';\nimport { IBadgeComponent } from './badge';\nimport { BADGE_CONSTANTS } from './badge-constants';\n\nexport interface IBadgeAdapter extends IBaseAdapter {\n  setRootClass(classes: string | string[]): void;\n  removeRootClass(classes: string | string[]): void;\n}\n\nexport class BadgeAdapter extends BaseAdapter<IBadgeComponent> implements IBadgeAdapter {\n  private _rootElement: HTMLElement;\n\n  constructor(component: IBadgeComponent) {\n    super(component);\n    this._rootElement = getShadowElement(component, BADGE_CONSTANTS.selectors.ROOT);\n  }\n\n  public setRootClass(classes: string | string[]): void {\n    addClass(classes, this._rootElement);\n  }\n\n  public removeRootClass(classes: string | string[]): void {\n    removeClass(classes, this._rootElement);\n  }\n}\n", "import { ICustomElementFoundation } from '@tylertech/forge-core';\n\nimport { IBadgeAdapter } from './badge-adapter';\nimport { BADGE_CONSTANTS } from './badge-constants';\n\nexport interface IBadgeFoundation extends ICustomElementFoundation {\n  dot: boolean;\n  open: boolean;\n}\n\nexport class BadgeFoundation implements IBadgeFoundation {\n  private _dot = false;\n  private _open = true;\n\n  constructor(private _adapter: IBadgeAdapter) {}\n\n  public initialize(): void {\n    this._applyDot();\n    this._setOpen();\n  }\n\n  private _applyDot(): void {\n    if (this._dot) {\n      this._adapter.setRootClass(BADGE_CONSTANTS.classes.DOT);\n      this._adapter.setHostAttribute(BADGE_CONSTANTS.attributes.DOT);\n    } else {\n      this._adapter.removeRootClass(BADGE_CONSTANTS.classes.DOT);\n      this._adapter.removeHostAttribute(BADGE_CONSTANTS.attributes.DOT);\n    }\n  }\n\n  private _setOpen(): void {\n    if (this._open) {\n      this._adapter.setRootClass(BADGE_CONSTANTS.classes.OPEN);\n      this._adapter.setHostAttribute(BADGE_CONSTANTS.attributes.OPEN);\n    } else {\n      this._adapter.removeRootClass(BADGE_CONSTANTS.classes.OPEN);\n      this._adapter.removeHostAttribute(BADGE_CONSTANTS.attributes.OPEN);\n    }\n  }\n\n  public get dot(): boolean {\n    return this._dot;\n  }\n  public set dot(value: boolean) {\n    if (this._dot !== value) {\n      this._dot = value;\n      this._applyDot();\n    }\n  }\n\n  public get open(): boolean {\n    return this._open;\n  }\n  public set open(value: boolean) {\n    if (this._open !== value) {\n      this._open = value;\n      this._setOpen();\n    }\n  }\n}\n", "import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';\r\nimport { BaseComponent, IBaseComponent } from '../core/base/base-component';\r\nimport { BadgeAdapter } from './badge-adapter';\r\nimport { BADGE_CONSTANTS } from './badge-constants';\r\nimport { BadgeFoundation } from './badge-foundation';\r\n\r\nconst template = '<template><div class=\\\"forge-badge forge-badge--open\\\" part=\\\"root\\\"><slot name=\\\"leading\\\"></slot><slot></slot><slot name=\\\"trailing\\\"></slot></div></template>';\r\nconst styles = '.forge-badge{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);height:1.25rem;height:var(--forge-badge-height,1.25rem);line-height:1.25rem;line-height:var(--forge-badge-line-height, 1.25rem);min-width:0;min-width:var(--forge-badge-min-width,0);max-width:auto;max-width:var(--forge-badge-max-width,auto);border:none;border:var(--forge-badge-border,none);display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;gap:4px;-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out;-webkit-transform:scale(0);transform:scale(0);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;border-radius:16px;padding:0 8px;font-weight:700}.forge-badge--elevated{box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.forge-badge--open{-webkit-transform:scale(1);transform:scale(1)}.forge-badge--dot{height:.5rem;width:.5rem;min-width:auto;padding:0}:host{--forge-icon-font-size:14px;display:-webkit-box;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box}:host([hidden]){display:none}:host([positioned]){position:absolute;top:0;left:100%;-webkit-transform:translateX(-1.25rem);transform:translateX(-1.25rem)}:host([dot]){top:.5rem}:host([dot]) .forge-badge>slot{display:none}:host([static]){position:static}:host(:not([theme])) .forge-badge,:host([theme=\\\"\\\"]) .forge-badge{background:#ffc107;background:var(--forge-badge-theme-default-muted-background,#ffc107);color:rgba(0,0,0,.87);color:var(--forge-badge-theme-default-muted-color,rgba(0,0,0,.87))}:host(:not([theme])[strong]) .forge-badge,:host([theme=\\\"\\\"][strong]) .forge-badge{background:#3d5afe;background:var(--forge-badge-theme-default-strong-background,#3d5afe);color:#fff;color:var(--forge-badge-theme-default-strong-color,#fff)}:host([theme=default]) .forge-badge{background:#ffc107;background:var(--forge-badge-theme-default-muted-background,#ffc107);color:rgba(0,0,0,.87);color:var(--forge-badge-theme-default-muted-color,rgba(0,0,0,.87))}:host([theme=default][strong]) .forge-badge{background:#3d5afe;background:var(--forge-badge-theme-default-strong-background,#3d5afe);color:#fff;color:var(--forge-badge-theme-default-strong-color,#fff)}:host([theme=danger]) .forge-badge{background:#ffcdd2;background:var(--forge-badge-theme-danger-muted-background,#ffcdd2);color:#a22d0e;color:var(--forge-badge-theme-danger-muted-color,#a22d0e)}:host([theme=danger][strong]) .forge-badge{background:#b00020;background:var(--forge-badge-theme-danger-strong-background,#b00020);color:#fff;color:var(--forge-badge-theme-danger-strong-color,#fff)}:host([theme=warning]) .forge-badge{background:#ffdba6;background:var(--forge-badge-theme-warning-muted-background,#ffdba6);color:#a03a03;color:var(--forge-badge-theme-warning-muted-color,#a03a03)}:host([theme=warning][strong]) .forge-badge{background:#d14900;background:var(--forge-badge-theme-warning-strong-background,#d14900);color:#fff;color:var(--forge-badge-theme-warning-strong-color,#fff)}:host([theme=success]) .forge-badge{background:#a5d6a7;background:var(--forge-badge-theme-success-muted-background,#a5d6a7);color:#1b5e20;color:var(--forge-badge-theme-success-muted-color,#1b5e20)}:host([theme=success][strong]) .forge-badge{background:#2e7d32;background:var(--forge-badge-theme-success-strong-background,#2e7d32);color:#fff;color:var(--forge-badge-theme-success-strong-color,#fff)}:host([theme=info-primary]) .forge-badge{background:#bbdefb;background:var(--forge-badge-theme-info-primary-muted-background,#bbdefb);color:#1a237e;color:var(--forge-badge-theme-info-primary-muted-color,#1a237e)}:host([theme=info-primary][strong]) .forge-badge{background:#1a237e;background:var(--forge-badge-theme-info-primary-strong-background,#1a237e);color:#fff;color:var(--forge-badge-theme-info-primary-strong-color,#fff)}:host([theme=info-secondary]) .forge-badge{background:#e0e0e0;background:var(--forge-badge-theme-info-secondary-muted-background,#e0e0e0);color:#000;color:var(--forge-badge-theme-info-secondary-muted-color,#000)}:host([theme=info-secondary][strong]) .forge-badge{background:#000;background:var(--forge-badge-theme-info-secondary-strong-background,#000);color:#fff;color:var(--forge-badge-theme-info-secondary-strong-color,#fff)}';\r\n\r\nexport interface IBadgeComponent extends IBaseComponent {\r\n  dot: boolean;\r\n  open: boolean;\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    'forge-badge': IBadgeComponent;\r\n  }\r\n}\r\n\r\n/**\r\n * The web component class behind the `<forge-badge>` custom element.\r\n * \r\n * @tag forge-badge\r\n */\r\n@CustomElement({\r\n  name: BADGE_CONSTANTS.elementName\r\n})\r\nexport class BadgeComponent extends BaseComponent implements IBadgeComponent {\r\n  public static get observedAttributes(): string[] {\r\n    return [\r\n      BADGE_CONSTANTS.attributes.DOT,\r\n      BADGE_CONSTANTS.attributes.OPEN\r\n    ];\r\n  }\r\n\r\n  private _foundation: BadgeFoundation;\r\n\r\n  constructor() {\r\n    super();\r\n    attachShadowTemplate(this, template, styles);\r\n    this._foundation = new BadgeFoundation(new BadgeAdapter(this));\r\n  }\r\n\r\n  public connectedCallback(): void {\r\n    this._foundation.initialize();\r\n  }\r\n\r\n  public attributeChangedCallback(name: string, oldValue: string, newValue: string): void {\r\n    switch (name) {\r\n      case BADGE_CONSTANTS.attributes.DOT:\r\n        this.dot = coerceBoolean(newValue);\r\n        break;\r\n      case BADGE_CONSTANTS.attributes.OPEN:\r\n        this.open = coerceBoolean(newValue);\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** Controls whether the component renders a simple dot/circle, or allows for content. */\r\n  @FoundationProperty()\r\n  public declare dot: boolean;\r\n\r\n  /** Controls the visibility state. */\r\n  @FoundationProperty()\r\n  public declare open: boolean;\r\n}\r\n", "import { BaseComponentDelegate, IBaseComponentDelegateConfig, IBaseComponentDelegateOptions } from '../core/delegates/base-component-delegate';\nimport { IBadgeComponent } from './badge';\nimport { BADGE_CONSTANTS } from './badge-constants';\n\nexport type BadgeComponentDelegateProps = Partial<IBadgeComponent>;\nexport interface IBadgeComponentDelegateOptions extends IBaseComponentDelegateOptions {}\nexport interface IBadgeComponentDelegateConfig extends IBaseComponentDelegateConfig<IBadgeComponent, IBadgeComponentDelegateOptions> {}\n\nexport class BadgeComponentDelegate extends BaseComponentDelegate<IBadgeComponent, IBadgeComponentDelegateOptions> {\n  constructor(config?: IBadgeComponentDelegateConfig) {\n    super(config);\n  }\n\n  protected _build(): IBadgeComponent {\n    return document.createElement(BADGE_CONSTANTS.elementName);\n  }\n}\n", "import { defineCustomElement } from '@tylertech/forge-core';\r\n\r\nimport { BadgeComponent } from './badge';\r\n\r\nexport * from './badge-adapter';\r\nexport * from './badge-constants';\r\nexport * from './badge-foundation';\r\nexport * from './badge';\r\nexport * from './badge-component-delegate';\r\n\r\nexport function defineBadgeComponent(): void {\r\n  defineCustomElement(BadgeComponent);\r\n}\r\n"],
-  "mappings": "mWAEA,GAAM,GAA2C,GAAG,SAE9C,EAAa,CACjB,IAAK,MACL,KAAM,OACN,MAAO,QACP,OAAQ,QACV,EAEM,EAAU,CACd,IAAK,mBACL,KAAM,mBACR,EAEM,EAAY,CAChB,KAAM,cACR,EAEa,EAAkB,CAC7B,cACA,aACA,UACA,WACF,ECfO,GAAM,GAAN,aAA2B,EAAsD,CAGtF,YAAY,EAA4B,CACtC,MAAM,CAAS,EACf,KAAK,aAAe,EAAiB,EAAW,EAAgB,UAAU,IAAI,CAChF,CAEA,AAAO,aAAa,EAAkC,CACpD,EAAS,EAAS,KAAK,YAAY,CACrC,CAEA,AAAO,gBAAgB,EAAkC,CACvD,EAAY,EAAS,KAAK,YAAY,CACxC,CACF,ECfO,GAAM,GAAN,KAAkD,CAIvD,YAAoB,EAAyB,CAAzB,gBAHpB,KAAQ,KAAO,GACf,KAAQ,MAAQ,EAE8B,CAE9C,AAAO,YAAmB,CACxB,KAAK,UAAU,EACf,KAAK,SAAS,CAChB,CAEA,AAAQ,WAAkB,CACxB,AAAI,KAAK,KACP,MAAK,SAAS,aAAa,EAAgB,QAAQ,GAAG,EACtD,KAAK,SAAS,iBAAiB,EAAgB,WAAW,GAAG,GAE7D,MAAK,SAAS,gBAAgB,EAAgB,QAAQ,GAAG,EACzD,KAAK,SAAS,oBAAoB,EAAgB,WAAW,GAAG,EAEpE,CAEA,AAAQ,UAAiB,CACvB,AAAI,KAAK,MACP,MAAK,SAAS,aAAa,EAAgB,QAAQ,IAAI,EACvD,KAAK,SAAS,iBAAiB,EAAgB,WAAW,IAAI,GAE9D,MAAK,SAAS,gBAAgB,EAAgB,QAAQ,IAAI,EAC1D,KAAK,SAAS,oBAAoB,EAAgB,WAAW,IAAI,EAErE,CAEA,GAAW,MAAe,CACxB,MAAO,MAAK,IACd,CACA,GAAW,KAAI,EAAgB,CAC7B,AAAI,KAAK,OAAS,GAChB,MAAK,KAAO,EACZ,KAAK,UAAU,EAEnB,CAEA,GAAW,OAAgB,CACzB,MAAO,MAAK,KACd,CACA,GAAW,MAAK,EAAgB,CAC9B,AAAI,KAAK,QAAU,GACjB,MAAK,MAAQ,EACb,KAAK,SAAS,EAElB,CACF,ECtDA,GAAM,GAAW,2JACX,EAAS,iiKAqBF,EAAN,aAA6B,EAAyC,CAU3E,aAAc,CACZ,MAAM,EACN,EAAqB,KAAM,EAAU,CAAM,EAC3C,KAAK,YAAc,GAAI,GAAgB,GAAI,GAAa,IAAI,CAAC,CAC/D,CAbA,UAAkB,qBAA+B,CAC/C,MAAO,CACL,EAAgB,WAAW,IAC3B,EAAgB,WAAW,IAC7B,CACF,CAUA,AAAO,mBAA0B,CAC/B,KAAK,YAAY,WAAW,CAC9B,CAEA,AAAO,yBAAyB,EAAc,EAAkB,EAAwB,CACtF,OAAQ,OACD,GAAgB,WAAW,IAC9B,KAAK,IAAM,EAAc,CAAQ,EACjC,UACG,GAAgB,WAAW,KAC9B,KAAK,KAAO,EAAc,CAAQ,EAClC,MAEN,CASF,EALiB,GADf,AAAC,EAAmB,GACL,AAjCJ,EAiCI,mBAIA,GADf,AAAC,EAAmB,GACL,AArCJ,EAqCI,oBArCJ,EAAN,GAHP,AAAC,EAAc,CACb,KAAM,EAAgB,WACxB,CAAC,GACY,GCpBN,GAAM,GAAN,aAAqC,EAAuE,CACjH,YAAY,EAAwC,CAClD,MAAM,CAAM,CACd,CAEA,AAAU,QAA0B,CAClC,MAAO,UAAS,cAAc,EAAgB,WAAW,CAC3D,CACF,ECNO,YAAsC,CAC3C,EAAoB,CAAc,CACpC",
-  "names": []
-}