@tylertech/forge 3.3.4 → 3.3.6

package/esm/time-picker/time-picker-adapter.js

@@ -24,7 +24,9 @@ export class TimePickerAdapter extends BaseAdapter {
     }
     initializeMask(options) {
         this.destroyMask();
-        this._inputMask = new TimeInputMask(this._inputElement, options);
+        if (this._inputElement) {
+            this._inputMask = new TimeInputMask(this._inputElement, options);
+        }
     }
     destroy() {
         this._targetElement = undefined;
@@ -36,25 +38,25 @@ export class TimePickerAdapter extends BaseAdapter {
         this._inputMask = undefined;
     }
     initializeAccessibility(identifier) {
-        this._inputElement.setAttribute('autocomplete', 'off');
-        this._inputElement.setAttribute('autocorrect', 'off');
-        this._inputElement.setAttribute('autocapitalize', 'off');
-        this._inputElement.setAttribute('spellcheck', 'false');
-        this._inputElement.setAttribute('role', 'combobox');
-        this._inputElement.setAttribute('aria-live', 'assertive');
-        this._inputElement.setAttribute('aria-atomic', 'true');
-        this._inputElement.setAttribute('aria-haspopup', 'true');
-        this._inputElement.setAttribute('aria-expanded', 'false');
+        this._inputElement?.setAttribute('autocomplete', 'off');
+        this._inputElement?.setAttribute('autocorrect', 'off');
+        this._inputElement?.setAttribute('autocapitalize', 'off');
+        this._inputElement?.setAttribute('spellcheck', 'false');
+        this._inputElement?.setAttribute('role', 'combobox');
+        this._inputElement?.setAttribute('aria-live', 'assertive');
+        this._inputElement?.setAttribute('aria-atomic', 'true');
+        this._inputElement?.setAttribute('aria-haspopup', 'true');
+        this._inputElement?.setAttribute('aria-expanded', 'false');
         tryCreateAriaControlsPlaceholder();
-        setAriaControls(this._inputElement);
+        if (this._inputElement) {
+            setAriaControls(this._inputElement);
+        }
     }
     addInputListener(type, listener, capture) {
-        this._inputElement.addEventListener(type, listener, { capture });
+        this._inputElement?.addEventListener(type, listener, { capture });
     }
     removeInputListener(type, listener, capture) {
-        if (this._inputElement) {
-            this._inputElement.removeEventListener(type, listener, { capture });
-        }
+        this._inputElement?.removeEventListener(type, listener, { capture });
     }
     addToggleListener(type, listener) {
         if (this._toggleElement) {
@@ -96,26 +98,28 @@ export class TimePickerAdapter extends BaseAdapter {
         }
     }
     tryFocusInput() {
-        this._inputElement.select();
+        this._inputElement?.select();
     }
     tryBlurInput() {
-        this._inputElement.blur();
+        this._inputElement?.blur();
     }
     selectInputText() {
-        this._inputElement.select();
+        this._inputElement?.select();
     }
     isInputDisabled() {
-        return this._inputElement.disabled;
+        return this._inputElement?.disabled ?? false;
     }
     isInputFocused() {
         const activeElement = getActiveElement(this._component.ownerDocument);
         return activeElement === this._inputElement;
     }
     setInputValue(value, emitEvents) {
-        if (this._inputElement.value === value) {
+        if (this._inputElement?.value === value) {
             return;
         }
-        this._inputElement.value = value;
+        if (this._inputElement) {
+            this._inputElement.value = value;
+        }
         if (this._inputMask) {
             this._inputMask.update();
         }
@@ -125,11 +129,13 @@ export class TimePickerAdapter extends BaseAdapter {
         }
     }
     getInputValue() {
-        return this._inputMask ? this._inputMask.maskedValue : this._inputElement.value;
+        return this._inputMask ? this._inputMask.maskedValue : (this._inputElement?.value ?? '');
     }
     setDisabled(isDisabled) {
-        this._inputElement.disabled = isDisabled;
-        this._inputElement.setAttribute('aria-disabled', isDisabled.toString());
+        if (this._inputElement) {
+            this._inputElement.disabled = isDisabled;
+            this._inputElement.setAttribute('aria-disabled', isDisabled.toString());
+        }
         this.setToggleDisabled(isDisabled);
     }
     attachDropdown(config) {
@@ -138,7 +144,7 @@ export class TimePickerAdapter extends BaseAdapter {
         }
         this._listDropdown = new ListDropdown(this._targetElement, config);
         this._listDropdown.open();
-        this._inputElement.setAttribute('aria-controls', `list-dropdown-popup-${config.id}`);
+        this._inputElement?.setAttribute('aria-controls', `list-dropdown-popup-${config.id}`);
     }
     async detachDropdown({ destroy = false } = {}) {
         if (this._listDropdown) {
@@ -150,26 +156,34 @@ export class TimePickerAdapter extends BaseAdapter {
             }
             this._listDropdown = undefined;
         }
-        setAriaControls(this._inputElement);
+        if (this._inputElement) {
+            setAriaControls(this._inputElement);
+        }
     }
     propagateKey(key) {
         this._listDropdown?.handleKey(key);
     }
     setActiveDescendant(id) {
-        toggleAttribute(this._inputElement, !!id, 'aria-activedescendant', id);
+        if (this._inputElement) {
+            toggleAttribute(this._inputElement, !!id, 'aria-activedescendant', id);
+        }
     }
     getTargetElementWidth(selector) {
         const targetElement = this._getTargetElement(selector);
         return targetElement.getBoundingClientRect().width;
     }
     _emitInputEvent(type) {
-        this._inputElement.dispatchEvent(new Event(type));
+        this._inputElement?.dispatchEvent(new Event(type));
     }
     emitInputEvent(type, data) {
-        emitEvent(this._inputElement, type, data);
+        if (this._inputElement) {
+            emitEvent(this._inputElement, type, data);
+        }
     }
     setInputReadonly(value) {
-        this._inputElement.readOnly = value;
+        if (this._inputElement) {
+            this._inputElement.readOnly = value;
+        }
     }
     setToggleDisabled(value) {
         if (this._toggleElement) {

package/esm/time-picker/time-picker-core.js

@@ -455,7 +455,7 @@ export class TimePickerCore {
     }
     _openDropdown() {
         const options = this._generateTimeOptions();
-        if (!this.allowDropdown || !options.length) {
+        if (!this.allowDropdown || !options.length || !this._adapter.inputElement) {
             return;
         }
         this._formatInputValue();

package/esm/time-picker/time-picker.d.ts

@@ -45,33 +45,6 @@ declare global {
 }
 /**
  * @tag forge-time-picker
- *
- * @property {string | null | undefined} [value=undefined] - The current value of the time picker.
- * @property {boolean} [open=false] - Whether or not the time picker is open.
- * @property {boolean} [allowSeconds=false] - Whether or not to allow seconds in the time picker.
- * @property {boolean} [masked=false] - Whether or not the time picker input should be masked.
- * @property {boolean} [showMaskFormat=false] - Whether or not to show the mask format in the input.
- * @property {boolean} [use24HourTime=false] - Whether or not to use 24-hour time.
- * @property {boolean} [allowInvalidTime=false] - Whether or not to allow invalid times.
- * @property {string | null | undefined} [min=undefined] - The minimum time that can be selected.
- * @property {string | null | undefined} [max=undefined] - The maximum time that can be selected.
- * @property {string[]} [restrictedTimes=[]] - An array of times that cannot be selected.
- * @property {string | null | undefined} [startTime=undefined] - The time to start the time picker at.
- * @property {number} [step=undefined] - The step interval for the time picker.
- * @property {boolean} [allowInput=false] - Whether or not to allow manual input of the time.
- * @property {boolean} [showNow=false] - Whether or not to show a "Now" button.
- * @property {boolean} [showHourOptions=false] - Whether or not to display hour options in dropdown.
- * @property {ITimePickerOption[]} [customOptions=[]] - An array of custom time picker options.
- * @property {TimePickerValidationCallback} [validationCallback=undefined] - A callback function to validate the time.
- * @property {TimePickerParseCallback} [parseCallback=undefined] - A callback function to parse the time.
- * @property {TimePickerFormatCallback} [formatCallback=undefined] - A callback function to format the time.
- * @property {TimePickerCoercionCallback} [coercionCallback=undefined] - A callback function to coerce the time.
- * @property {TimePickerPrepareMaskCallback} [prepareMaskCallback=undefined] - A callback function to prepare the mask.
- * @property {boolean} [disabled=false] - Whether or not the time picker is disabled.
- * @property {string | string[]} [popupClasses=undefined] - The classes to apply to the time picker popup.
- * @property {boolean} [allowDropdown=false] - Whether or not to allow the time picker to be a dropdown.
- * @property {string} [popupTarget=undefined] - The target element to attach the popup to.
- *
  */
 export declare class TimePickerComponent extends BaseComponent implements ITimePickerComponent {
     static get observedAttributes(): string[];
@@ -80,30 +53,154 @@ export declare class TimePickerComponent extends BaseComponent implements ITimeP
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /**
+     * The current value of the time picker.
+     * @default undefined
+     * @attribute
+     */
     value: string | null | undefined;
+    /**
+     * Whether or not the time picker is open.
+     * @default false
+     * @attribute
+     */
     open: boolean;
+    /**
+     * Whether or not to allow seconds in the time picker.
+     * @default false
+     * @attribute allow-seconds
+     */
     allowSeconds: boolean;
+    /**
+     * Whether or not the time picker input should be masked.
+     * @default false
+     * @attribute
+     */
     masked: boolean;
+    /**
+     * Whether or not to show the mask format in the input.
+     * @default false
+     * @attribute show-mask-format
+     */
     showMaskFormat: boolean;
+    /**
+     * Whether or not to use 24-hour time.
+     * @default false
+     * @attribute use-24-hour-time
+     */
     use24HourTime: boolean;
+    /**
+     * Whether or not to allow invalid times.
+     * @default false
+     * @attribute allow-invalid-time
+     */
     allowInvalidTime: boolean;
+    /**
+     * The minimum time that can be selected.
+     * @default undefined
+     * @attribute
+     */
     min: string | null | undefined;
+    /**
+     * The maximum time that can be selected.
+     * @default undefined
+     * @attribute
+     */
     max: string | null | undefined;
+    /**
+     * An array of times that cannot be selected.
+     * @default []
+     * @attribute restricted-times
+     */
     restrictedTimes: string[];
+    /**
+     * The time to start the time picker at.
+     * @default undefined
+     * @attribute start-time
+     */
     startTime: string | null | undefined;
+    /**
+     * The step interval for the time picker.
+     * @default undefined
+     * @attribute
+     */
     step: number;
+    /**
+     * Whether or not to allow manual input of the time.
+     * @default false
+     * @attribute allow-input
+     */
     allowInput: boolean;
+    /**
+     * Whether or not to show a "Now" button.
+     * @default false
+     * @attribute show-now
+     */
     showNow: boolean;
-    /** Whether or not to display hour options in dropdown */
+    /**
+     * Whether or not to display hour options in dropdown.
+     * @default false
+     * @attribute show-hour-options
+     */
     showHourOptions: boolean;
+    /**
+     * An array of custom time picker options.
+     * @default []
+     * @attribute custom-options
+     */
     customOptions: ITimePickerOption[];
+    /**
+     * A callback function to validate the time.
+     * @default undefined
+     * @attribute validation-callback
+     */
     validationCallback: TimePickerValidationCallback;
+    /**
+     * A callback function to parse the time.
+     * @default undefined
+     * @attribute parse-callback
+     */
     parseCallback: TimePickerParseCallback;
+    /**
+     * A callback function to format the time.
+     * @default undefined
+     * @attribute format-callback
+     */
     formatCallback: TimePickerFormatCallback;
+    /**
+     * A callback function to coerce the time.
+     * @default undefined
+     * @attribute coercion-callback
+     */
     coercionCallback: TimePickerCoercionCallback;
+    /**
+     * A callback function to prepare the mask.
+     * @default undefined
+     * @attribute prepare-mask-callback
+     */
     prepareMaskCallback: TimePickerPrepareMaskCallback;
+    /**
+     * Whether or not the time picker is disabled.
+     * @default false
+     * @attribute disabled
+     */
     disabled: boolean;
+    /**
+     * The classes to apply to the time picker popup.
+     * @default undefined
+     * @attribute popup-classes
+     */
     popupClasses: string | string[];
+    /**
+     * Whether or not to allow the time picker to be a dropdown.
+     * @default false
+     * @attribute allow-dropdown
+     */
     allowDropdown: boolean;
+    /**
+     * The target element to attach the popup to.
+     * @default undefined
+     * @attribute popup-target
+     */
     popupTarget: string;
 }

package/esm/time-picker/time-picker.js

@@ -20,33 +20,6 @@ const template = '<template><slot></slot></template>';
 const styles = ':host{display:block}:host([hidden]){display:none}';
 /**
  * @tag forge-time-picker
- *
- * @property {string | null | undefined} [value=undefined] - The current value of the time picker.
- * @property {boolean} [open=false] - Whether or not the time picker is open.
- * @property {boolean} [allowSeconds=false] - Whether or not to allow seconds in the time picker.
- * @property {boolean} [masked=false] - Whether or not the time picker input should be masked.
- * @property {boolean} [showMaskFormat=false] - Whether or not to show the mask format in the input.
- * @property {boolean} [use24HourTime=false] - Whether or not to use 24-hour time.
- * @property {boolean} [allowInvalidTime=false] - Whether or not to allow invalid times.
- * @property {string | null | undefined} [min=undefined] - The minimum time that can be selected.
- * @property {string | null | undefined} [max=undefined] - The maximum time that can be selected.
- * @property {string[]} [restrictedTimes=[]] - An array of times that cannot be selected.
- * @property {string | null | undefined} [startTime=undefined] - The time to start the time picker at.
- * @property {number} [step=undefined] - The step interval for the time picker.
- * @property {boolean} [allowInput=false] - Whether or not to allow manual input of the time.
- * @property {boolean} [showNow=false] - Whether or not to show a "Now" button.
- * @property {boolean} [showHourOptions=false] - Whether or not to display hour options in dropdown.
- * @property {ITimePickerOption[]} [customOptions=[]] - An array of custom time picker options.
- * @property {TimePickerValidationCallback} [validationCallback=undefined] - A callback function to validate the time.
- * @property {TimePickerParseCallback} [parseCallback=undefined] - A callback function to parse the time.
- * @property {TimePickerFormatCallback} [formatCallback=undefined] - A callback function to format the time.
- * @property {TimePickerCoercionCallback} [coercionCallback=undefined] - A callback function to coerce the time.
- * @property {TimePickerPrepareMaskCallback} [prepareMaskCallback=undefined] - A callback function to prepare the mask.
- * @property {boolean} [disabled=false] - Whether or not the time picker is disabled.
- * @property {string | string[]} [popupClasses=undefined] - The classes to apply to the time picker popup.
- * @property {boolean} [allowDropdown=false] - Whether or not to allow the time picker to be a dropdown.
- * @property {string} [popupTarget=undefined] - The target element to attach the popup to.
- *
  */
 let TimePickerComponent = class TimePickerComponent extends BaseComponent {
     static get observedAttributes() {

package/esm/view-switcher/view-switcher.d.ts

@@ -39,7 +39,7 @@ export declare class ViewSwitcherComponent extends BaseComponent implements IVie
     /**
      * Gets/sets the animation type.
      * @default "none"
-     * @attribute
+     * @attribute animation-type
      */
     animationType: `${ViewSwitcherAnimationType}` | ViewSwitcherAnimation;
     /** Transitions to the next view. */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.3.4",
+  "version": "3.3.6",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,11 +13,11 @@
   "typings": "esm/index.d.ts",
   "sideEffects": false,
   "dependencies": {
-    "@floating-ui/dom": "^1.6.10",
-    "@tylertech/forge-core": "^3.0.1",
+    "@floating-ui/dom": "^1.6.12",
+    "@tylertech/forge-core": "^3.1.0",
     "@tylertech/tyler-icons": "^1.12.0",
     "imask": "^6.6.1",
-    "tslib": "^2.7.0"
+    "tslib": "^2.8.1"
   },
   "customElements": "custom-elements.json"
 }

package/sass/core/styles/_utils.scss

@@ -164,7 +164,7 @@
 ///
 /// Rounds a number to the specified number of decimal places.
 ///
-@function round($value, $fractionDigits: 0) {
+@function round-fraction($value, $fractionDigits: 0) {
   $power: math.pow(10, $fractionDigits);
   @return math.div(math.round($power * $value), $power);
 }

package/sass/core/styles/theme/_utils.scss

@@ -74,7 +74,7 @@
 /// Computes the hue, saturation, lightness (and optionally alpha) values for the provided color and returns a string in HSL format.
 ///
 @function hsl-values($color, $with-alpha: false) {
-  $value: utils.round(color.hue($color), 2) utils.round(color.saturation($color), 2) utils.round(color.lightness($color), 2);
+  $value: utils.round-fraction(color.hue($color), 2) utils.round-fraction(color.saturation($color), 2) utils.round-fraction(color.lightness($color), 2);
   @if $with-alpha {
     $value: string.unquote($value + ' / ' + alpha($color));
   }

package/sass/core/styles/tokens/list/list/_tokens.scss

@@ -3,6 +3,7 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+@use 'sass:map';
 @use '../../../utils';
 @use '../../../spacing';
 @use '../../../shape';
@@ -23,5 +24,5 @@ $tokens: (
 ) !default;
 
 @function get($key) {
-  @return map-get($tokens, $key);
+  @return map.get($tokens, $key);
 }

package/sass/field/_core.animation.scss

@@ -41,26 +41,6 @@
       opacity: 100%;
     }
   }
-
-  @keyframes float-in-input-animation {
-    from {
-      translate: 0;
-    }
-
-    to {
-      translate: 0 $offset;
-    }
-  }
-
-  @keyframes float-out-input-animation {
-    from {
-      translate: 0 $offset;
-    }
-
-    to {
-      translate: 0;
-    }
-  }
 }
 
 @mixin multiline-inset-label-background-animation-keyframes {

package/sass/field/_core.layout.scss

@@ -158,7 +158,6 @@
 //
 
 $multiline-input-offset-base: calc((token(height, custom) - typography.variable(body2, line-height)) / 2);
-$multiline-input-padding-block-end-base: 8px;
 
 @mixin multiline-container {
   align-items: start;
@@ -216,12 +215,12 @@ $multiline-input-padding-block-end-base: 8px;
 
 @mixin multiline-slotted-input {
   padding-block-start: $multiline-input-offset-base;
-  padding-block-end: calc($floating-offset + $multiline-input-padding-block-end-base);
+  padding-block-end: calc($floating-offset + $multiline-input-offset-base);
 }
 
 @mixin multiline-slotted-floating-input {
   padding-block-start: calc($floating-offset + ($multiline-input-offset-base)) !important; // TODO: find a way to remove this !important
-  padding-block-end: #{$multiline-input-padding-block-end-base} !important;
+  padding-block-end: #{$multiline-input-offset-base} !important;
 }
 
 //
@@ -258,11 +257,7 @@ $floating-offset: #{calc($floating-offset-base + $floating-offset-adjustment)};
 }
 
 @mixin float-in-input {
-  @include animation.floating-animation(float-in-input-animation);
-}
-
-@mixin float-out-input {
-  @include animation.floating-animation(float-out-input-animation);
+  padding-block-start: calc($floating-offset * 2) !important;
 }
 
 @mixin slotted-floating-input {

package/sass/field/_core.scss

@@ -132,6 +132,7 @@
 
   block-size: 100%;
   inline-size: 100%;
+  min-inline-size: 0;
 
   color: theme.variable(text-high);
 }

package/sass/field/_core.slotted.scss

@@ -24,20 +24,16 @@
   font: inherit;
   font-size: #{token(font-size)};
   text-overflow: ellipsis;
+
+  padding-block-start: 0;
+  padding-block-end: 0;
+  transition: padding-block #{token(floating-animation-duration)} #{token(floating-animation-timing)};
 }
 
 @mixin default-slot-textarea {
   resize: none;
 }
 
-@mixin default-slot-floating-in {
-  position: absolute;
-  inset-block-start: calc(#{token(height)} * -0.5);
-
-  block-size: 100%;
-  padding-block: #{token(height)};
-}
-
 @mixin slotted-inset-label {
   max-inline-size: 100%;
   overflow: hidden;

package/sass/field/field.scss

@@ -447,10 +447,8 @@ $variants: (
       }
 
       .input {
-        @include core.float-in-input;
-
         ::slotted(:is(input, [data-forge-field-input], [data-forge-multi-input-separator])) {
-          @include core.default-slot-floating-in;
+          @include core.float-in-input;
         }
       }
     }
@@ -470,15 +468,11 @@ $variants: (
     .label {
       @include core.float-out-label;
     }
-
-    .input {
-      @include core.float-out-input;
-    }
   }
 }
 
 :host(#{map.get($label-positions, inset)}[float-label][multiline]) {
-  .has-label:not(.floating-in) {
+  .has-label {
     ::slotted(textarea) {
       @include core.multiline-slotted-floating-input;
     }
@@ -536,6 +530,12 @@ $variants: (
       @include core.multiline-inset-label-background;
     }
   }
+
+  .forge-field:not(.has-label) {
+    .label::after {
+      display: none;
+    }
+  }
 }
 
 //

package/sass/radio/index.scss

@@ -3,4 +3,4 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@forward './radio/index.scss';
+@forward './radio';