@viasat/beam-web-components 2.25.0 → 2.26.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/{wip/TextField → TextField}/TextField.d.ts +8 -2
  2. package/{wip/TextField → TextField}/TextField.js +81 -91
  3. package/custom-elements.json +2125 -2121
  4. package/local/{wip/TextField → TextField}/TextField.js +81 -91
  5. package/local/wip/Form/Form.decorator.js +23 -19
  6. package/package.json +6 -6
  7. package/vscode.html-custom-data.json +308 -300
  8. package/wip/Form/Form.decorator.js +23 -19
  9. /package/{wip/TextField → TextField}/index.d.ts +0 -0
  10. /package/{local/wip/TextField → TextField}/index.js +0 -0
  11. /package/{wip → local}/TextField/index.js +0 -0
package/{wip/TextField → TextField}/TextField.d.ts RENAMED
@@ -1,7 +1,7 @@
1
1
  import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
2
2
  import { Optional } from '@viasat/beam-shared/utils/types';
3
- import { NullableTemplate } from '../../../utils/mixins/types';
4
- import { FormField } from '../Form/Form.decorator';
3
+ import { NullableTemplate } from '../../utils/mixins/types';
4
+ import { FormField } from '../wip/Form/Form.decorator';
5
5
  /**
6
6
  * @summary `bm-text-field`
7
7
  *
@@ -52,7 +52,13 @@ export declare class BmTextField extends FormField {
52
52
  * Specify the theme of the TextField. By default it inherits the theme from the parent
53
53
  */
54
54
  theme: Optional<ThemeTypes>;
55
+ /**
56
+ * Specify the input type (e.g. text, email, password, number, tel, url)
57
+ */
55
58
  type: string;
59
+ /**
60
+ * Specify the virtual keyboard type for mobile browsers (e.g. numeric, tel, url)
61
+ */
56
62
  inputMode: string;
57
63
  static styles: import('lit').CSSResult;
58
64
  private _textFieldLabel;
package/{wip/TextField → TextField}/TextField.js RENAMED
@@ -1,168 +1,158 @@
1
- import { unsafeCSS as E, html as p } from "lit";
2
- import { property as c, queryAssignedElements as k, state as S } from "lit/decorators.js";
3
- import { ref as O } from "lit/directives/ref.js";
4
- import C from "clsx";
5
- import { p as h, a as z, g as A } from "../../chunks/classNames.Cq_tbDRp.js";
6
- import { t as P } from "../../chunks/constants.jOWREYQE.js";
7
- import { r as I } from "../../chunks/delegate.baxDQosr.js";
8
- import { c as T } from "../../chunks/register-custom-element.DHGKOhmA.js";
9
- import { s as $ } from "../../chunks/helpers.AwJwaZvv.js";
10
- import { FormField as W } from "../Form/Form.decorator.js";
11
- import "../../chunks/HelperText.SJGM6Q5H.js";
12
- const L = ':root,:host,.bm-light,.bm-dark .bm-inverse,.bm-dark.bm-inverse,[data-bm-theme~=bm-dark] .bm-inverse,[data-bm-theme~=bm-dark].bm-inverse,.bm-enterprise,.bm-consumer,[data-bm-theme~=bm-light]{--bm-comp-input-color-bg: var(--bm-sem-color-surface-01, #ffffff);--bm-comp-input-color-bg-disabled: var( --bm-sem-color-surface-highlight, rgba(159, 175, 188, .16) );--bm-comp-input-color-border: var(--bm-sem-color-border-strong, #8697a5);--bm-comp-input-color-border-error: var( --bm-sem-color-border-negative-strong, #cc2429 );--bm-comp-input-color-border-disabled: rgba(134, 151, 165, .4);--bm-comp-input-color-text: var(--bm-sem-color-text-primary, #141d24);--bm-comp-input-color-text-placeholder: var( --bm-sem-color-text-secondary, #576775 );--bm-comp-input-color-text-disabled: var( --bm-sem-color-text-disabled, rgba(87, 103, 117, .4) );--bm-comp-input-color-icon-disabled: var( --bm-sem-color-text-disabled, rgba(87, 103, 117, .4) );--bm-comp-input-color-icon: var(--bm-sem-color-icon-secondary, #576775);--bm-comp-input-color-icon-error: var( --bm-sem-color-icon-negative-strong, #cc2429 );--bm-comp-input-color-divider: var(--bm-sem-color-border-02, #d1dae0);--bm-comp-input-color-choice-checkbox-selected-bg: var( --bm-utility-color-accent-default, #00768f );--bm-comp-input-color-choice-checkbox-selected-icon: var( --bm-sem-color-icon-primary-inverse, #ffffff );--bm-comp-input-color-choice-checkbox-selected-bg-error: var( --bm-sem-color-surface-negative-strong, #cc2429 );--bm-comp-input-color-choice-checkbox-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-switch-selected-bg: var( --bm-utility-color-accent-default, #00768f );--bm-comp-input-color-choice-switch-selected-icon: var( --bm-sem-color-icon-primary-inverse, #ffffff );--bm-comp-input-color-choice-switch-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-radio-selected-bg: var( --bm-sem-color-surface-01, #ffffff );--bm-comp-input-color-choice-radio-selected-border: var( --bm-utility-color-accent-default, #00768f );--bm-comp-input-color-choice-radio-selected-inner-circle: var( --bm-utility-color-accent-default, #00768f );--bm-comp-input-color-choice-radio-selected-bg-error: var( --bm-sem-color-surface-01, #ffffff );--bm-comp-input-color-choice-radio-selected-border-error: var( --bm-sem-color-surface-negative-strong, #cc2429 );--bm-comp-input-color-choice-radio-selected-inner-circle-error: var( --bm-sem-color-surface-negative-strong, #cc2429 );--bm-comp-input-typo-default: var( --bm-sem-typo-compact-body-md, 400 1rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-character-count: var( --bm-sem-typo-body-sm, 400 .875rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-label-choice: var( --bm-sem-typo-body-md, 400 1rem/1.5rem "Source Sans Pro" );--bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-field-y: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-field-gap: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-x: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-choice-nudge: var( --bm-primitive-dimension-12, .125rem );--bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);--bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);--bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);--bm-comp-input-size-field-text-area-height: var( --bm-primitive-dimension-475, 4.75rem );--bm-comp-input-size-choice-checkbox: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio-inside: var( --bm-primitive-dimension-50, .5rem );--bm-comp-input-size-choice-switch-height: var( --bm-sem-size-icon-md, 1.25rem );--bm-comp-input-size-choice-switch-width: var( --bm-primitive-dimension-250, 2.5rem );--bm-comp-input-size-choice-switch-knob: var( --bm-primitive-dimension-87, .875rem );--bm-comp-input-radius-field: var(--bm-sem-radius-input-md, .25rem);--bm-comp-input-radius-choice-checkbox: var( --bm-sem-radius-input-sm, .125rem );--bm-comp-input-radius-choice-radio: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-radius-choice-switch: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-border-width-field-default: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-border-width-field-error: var( --bm-sem-border-width-lg, .125rem );--bm-comp-input-border-width-choice: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-shadow-field: var( --bm-sem-shadow-none, 0 0 0 0 rgb(0, 0, 0, 0) )}:host,.bm-dark,.bm-light .bm-inverse,.bm-light.bm-inverse,[data-bm-theme~=bm-light] .bm-inverse,[data-bm-theme~=bm-light].bm-inverse,.bm-enterprise,.bm-consumer,[data-bm-theme~=bm-dark]{--bm-comp-input-color-bg: var(--bm-sem-color-surface-01, #202e39);--bm-comp-input-color-bg-disabled: var( --bm-sem-color-surface-highlight, rgba(134, 151, 165, .16) );--bm-comp-input-color-border: var(--bm-sem-color-border-strong, #9fafbc);--bm-comp-input-color-border-error: var( --bm-sem-color-border-negative-strong, #f67378 );--bm-comp-input-color-border-disabled: rgba(159, 175, 188, .4);--bm-comp-input-color-text: var(--bm-sem-color-text-primary, #ffffff);--bm-comp-input-color-text-placeholder: var( --bm-sem-color-text-secondary, #c3cdd5 );--bm-comp-input-color-text-disabled: var( --bm-sem-color-text-disabled, rgba(195, 205, 213, .4) );--bm-comp-input-color-icon-disabled: var( --bm-sem-color-text-disabled, rgba(195, 205, 213, .4) );--bm-comp-input-color-icon: var(--bm-sem-color-icon-secondary, #c3cdd5);--bm-comp-input-color-icon-error: var( --bm-sem-color-icon-negative-strong, #f67378 );--bm-comp-input-color-divider: var(--bm-sem-color-border-02, #465967);--bm-comp-input-color-choice-checkbox-selected-bg: var( --bm-utility-color-accent-default, #43bfd6 );--bm-comp-input-color-choice-checkbox-selected-icon: var( --bm-sem-color-icon-primary-inverse, #141d24 );--bm-comp-input-color-choice-checkbox-selected-bg-error: var( --bm-sem-color-surface-negative-strong, #f67378 );--bm-comp-input-color-choice-checkbox-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-switch-selected-bg: var( --bm-utility-color-accent-default, #43bfd6 );--bm-comp-input-color-choice-switch-selected-icon: var( --bm-sem-color-icon-primary-inverse, #141d24 );--bm-comp-input-color-choice-switch-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-radio-selected-bg: var( --bm-sem-color-surface-01, #202e39 );--bm-comp-input-color-choice-radio-selected-border: var( --bm-utility-color-accent-default, #43bfd6 );--bm-comp-input-color-choice-radio-selected-inner-circle: var( --bm-utility-color-accent-default, #43bfd6 );--bm-comp-input-color-choice-radio-selected-bg-error: var( --bm-sem-color-surface-01, #202e39 );--bm-comp-input-color-choice-radio-selected-border-error: var( --bm-sem-color-surface-negative-strong, #f67378 );--bm-comp-input-color-choice-radio-selected-inner-circle-error: var( --bm-sem-color-surface-negative-strong, #f67378 );--bm-comp-input-typo-default: var( --bm-sem-typo-compact-body-md, 400 1rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-character-count: var( --bm-sem-typo-body-sm, 400 .875rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-label-choice: var( --bm-sem-typo-body-md, 400 1rem/1.5rem "Source Sans Pro" );--bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-field-y: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-field-gap: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-x: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-choice-nudge: var( --bm-primitive-dimension-12, .125rem );--bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);--bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);--bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);--bm-comp-input-size-field-text-area-height: var( --bm-primitive-dimension-475, 4.75rem );--bm-comp-input-size-choice-checkbox: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio-inside: var( --bm-primitive-dimension-50, .5rem );--bm-comp-input-size-choice-switch-height: var( --bm-sem-size-icon-md, 1.25rem );--bm-comp-input-size-choice-switch-width: var( --bm-primitive-dimension-250, 2.5rem );--bm-comp-input-size-choice-switch-knob: var( --bm-primitive-dimension-87, .875rem );--bm-comp-input-radius-field: var(--bm-sem-radius-input-md, .25rem);--bm-comp-input-radius-choice-checkbox: var( --bm-sem-radius-input-sm, .125rem );--bm-comp-input-radius-choice-radio: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-radius-choice-switch: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-border-width-field-default: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-border-width-field-error: var( --bm-sem-border-width-lg, .125rem );--bm-comp-input-border-width-choice: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-shadow-field: var( --bm-sem-shadow-none, 0 0 0 0 rgb(0, 0, 0, 0) )}.bm-text-field{--bm-label-cursor: pointer;max-width:var(--bm-comp-input-size-field-width);--bm-label-space-bottom: var(--bm-comp-label-space-bottom);--bm-helper-text-space-top: var(--bm-comp-helper-text-space-top)}.bm-text-field--disabled{--bm-label-cursor: not-allowed;--bm-label-pointer-events: auto;--bm-text-field-cursor: not-allowed;--bm-text-field-input-cursor: not-allowed}.bm-text-field--error .bm-text-field__field{border-color:var(--bm-comp-input-color-border-error);background-color:var(--bm-comp-input-color-bg);outline-offset:calc(0px - var(--bm-comp-input-border-width-field-error));outline:var(--bm-comp-input-border-width-field-error) solid var(--bm-comp-input-color-border-error)}.bm-text-field--error .bm-text-field__field .bm-text-field__input{color:var(--bm-comp-input-color-text)}.bm-text-field--error .bm-text-field__field .bm-text-field__input::placeholder{color:var(--bm-comp-input-color-text-placeholder)}.bm-text-field--read-only .bm-text-field__field{border-color:var(--bm-comp-input-color-border-disabled);background-color:var(--bm-comp-input-color-bg-disabled)}.bm-text-field--read-only .bm-text-field__field .bm-text-field__input{color:var(--bm-comp-input-color-text)}.bm-text-field--read-only .bm-text-field__field .bm-text-field__input::placeholder{color:var(--bm-comp-input-color-text-placeholder)}.bm-text-field--read-only .bm-text-field__field .bm-text-field__content svg,.bm-text-field--read-only .bm-text-field__field .bm-text-field__content ::slotted([slot*=content]){color:var(--bm-comp-input-color-icon)}.bm-text-field--disabled .bm-text-field__field{border-color:var(--bm-comp-input-color-border-disabled);background-color:var(--bm-comp-input-color-bg-disabled)}.bm-text-field--disabled .bm-text-field__field .bm-text-field__input{color:var(--bm-comp-input-color-text-disabled)}.bm-text-field--disabled .bm-text-field__field .bm-text-field__input::placeholder{color:var(--bm-comp-input-color-text-disabled)}.bm-text-field--disabled .bm-text-field__field .bm-text-field__content{opacity:var(--bm-sem-opacity-disabled)}.bm-text-field--disabled .bm-text-field__field .bm-text-field__content svg,.bm-text-field--disabled .bm-text-field__field .bm-text-field__content ::slotted([slot*=content]){color:var(--bm-comp-input-color-text-disabled)}.bm-text-field--fluid{max-width:100%}.bm-text-field--ellipsis .bm-text-field__field .bm-text-field__input{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.bm-text-field__field{display:flex;flex-wrap:nowrap;align-items:center;box-sizing:border-box;transform:translate3d(var(--bm-sem-space-0),var(--bm-sem-space-0),var(--bm-sem-space-0));border-style:solid;border-color:var(--bm-comp-input-color-border);border-radius:var(--bm-comp-input-radius-field);border-width:var(--bm-comp-input-border-width-field-default);cursor:var(--bm-text-field-cursor, default);gap:var(--bm-comp-input-space-field-gap);box-shadow:var(--bm-comp-input-shadow-field);background-color:var(--bm-comp-input-color-bg);height:var(--bm-comp-input-size-field-md-height);padding:var(--bm-comp-input-space-field-y) var(--bm-comp-input-space-field-x)}.bm-text-field__field:focus-within{outline-offset:calc(0px - var(--bm-sem-size-focus-offset));outline:var(--bm-sem-border-width-focus) solid var(--bm-sem-color-border-focus)}.bm-text-field__field .bm-text-field__input{border:none;outline:none;background:none;width:100%;padding:var(--bm-sem-space-0);color:var(--bm-comp-input-color-text);font:var(--bm-comp-input-typo-default);cursor:var(--bm-text-field-input-cursor, text)}.bm-text-field__field .bm-text-field__input:-webkit-autofill{caret-color:var(--bm-comp-input-color-text);-webkit-text-fill-color:var(--bm-comp-input-color-text);box-shadow:0 0 0 var(--bm-comp-input-size-field-md-height) var(--bm-comp-input-color-bg) inset}.bm-text-field__field .bm-text-field__input::placeholder{color:var(--bm-comp-input-color-text-placeholder)}.bm-text-field__field .bm-text-field__content{display:flex;align-items:center}.bm-text-field__field .bm-text-field__content svg,.bm-text-field__field .bm-text-field__content ::slotted([slot*=content]){color:var(--bm-comp-input-color-icon);width:var(--bm-comp-input-size-field-icon);height:var(--bm-comp-input-size-field-icon)}';
13
- var R = Object.defineProperty, D = Object.getOwnPropertyDescriptor, B = (e) => {
1
+ import { unsafeCSS as q, nothing as p, html as g } from "lit";
2
+ import { property as a, queryAssignedElements as z, state as $ } from "lit/decorators.js";
3
+ import { ref as E } from "lit/directives/ref.js";
4
+ import y from "clsx";
5
+ import { p as n, a as w, g as F } from "../chunks/classNames.Cq_tbDRp.js";
6
+ import { t as M } from "../chunks/constants.jOWREYQE.js";
7
+ import { r as O } from "../chunks/delegate.baxDQosr.js";
8
+ import { c as P } from "../chunks/register-custom-element.DHGKOhmA.js";
9
+ import { s as I } from "../chunks/helpers.AwJwaZvv.js";
10
+ import { FormField as A } from "../wip/Form/Form.decorator.js";
11
+ import "../chunks/HelperText.SJGM6Q5H.js";
12
+ const T = ':root,:host,.bm-light,.bm-dark .bm-inverse,.bm-dark.bm-inverse,[data-bm-theme~=bm-dark] .bm-inverse,[data-bm-theme~=bm-dark].bm-inverse,.bm-enterprise,.bm-consumer,[data-bm-theme~=bm-light]{--bm-comp-input-color-bg: var(--bm-sem-color-surface-01, #ffffff);--bm-comp-input-color-bg-disabled: var( --bm-sem-color-surface-highlight, rgba(159, 175, 188, .16) );--bm-comp-input-color-border: var(--bm-sem-color-border-strong, #8697a5);--bm-comp-input-color-border-error: var( --bm-sem-color-border-negative-strong, #cc2429 );--bm-comp-input-color-border-disabled: rgba(134, 151, 165, .4);--bm-comp-input-color-text: var(--bm-sem-color-text-primary, #141d24);--bm-comp-input-color-text-placeholder: var( --bm-sem-color-text-secondary, #576775 );--bm-comp-input-color-text-disabled: var( --bm-sem-color-text-disabled, rgba(87, 103, 117, .4) );--bm-comp-input-color-icon-disabled: var( --bm-sem-color-text-disabled, rgba(87, 103, 117, .4) );--bm-comp-input-color-icon: var(--bm-sem-color-icon-secondary, #576775);--bm-comp-input-color-icon-error: var( --bm-sem-color-icon-negative-strong, #cc2429 );--bm-comp-input-color-divider: var(--bm-sem-color-border-02, #d1dae0);--bm-comp-input-color-choice-checkbox-selected-bg: var( --bm-utility-color-accent-default, #00768f );--bm-comp-input-color-choice-checkbox-selected-icon: var( --bm-sem-color-icon-primary-inverse, #ffffff );--bm-comp-input-color-choice-checkbox-selected-bg-error: var( --bm-sem-color-surface-negative-strong, #cc2429 );--bm-comp-input-color-choice-checkbox-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-switch-selected-bg: var( --bm-utility-color-accent-default, #00768f );--bm-comp-input-color-choice-switch-selected-icon: var( --bm-sem-color-icon-primary-inverse, #ffffff );--bm-comp-input-color-choice-switch-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-radio-selected-bg: var( --bm-sem-color-surface-01, #ffffff );--bm-comp-input-color-choice-radio-selected-border: var( --bm-utility-color-accent-default, #00768f );--bm-comp-input-color-choice-radio-selected-inner-circle: var( --bm-utility-color-accent-default, #00768f );--bm-comp-input-color-choice-radio-selected-bg-error: var( --bm-sem-color-surface-01, #ffffff );--bm-comp-input-color-choice-radio-selected-border-error: var( --bm-sem-color-surface-negative-strong, #cc2429 );--bm-comp-input-color-choice-radio-selected-inner-circle-error: var( --bm-sem-color-surface-negative-strong, #cc2429 );--bm-comp-input-typo-default: var( --bm-sem-typo-compact-body-md, 400 1rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-character-count: var( --bm-sem-typo-body-sm, 400 .875rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-label-choice: var( --bm-sem-typo-body-md, 400 1rem/1.5rem "Source Sans Pro" );--bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-field-y: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-field-gap: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-x: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-choice-nudge: var( --bm-primitive-dimension-12, .125rem );--bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);--bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);--bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);--bm-comp-input-size-field-text-area-height: var( --bm-primitive-dimension-475, 4.75rem );--bm-comp-input-size-choice-checkbox: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio-inside: var( --bm-primitive-dimension-50, .5rem );--bm-comp-input-size-choice-switch-height: var( --bm-sem-size-icon-md, 1.25rem );--bm-comp-input-size-choice-switch-width: var( --bm-primitive-dimension-250, 2.5rem );--bm-comp-input-size-choice-switch-knob: var( --bm-primitive-dimension-87, .875rem );--bm-comp-input-radius-field: var(--bm-sem-radius-input-md, .25rem);--bm-comp-input-radius-choice-checkbox: var( --bm-sem-radius-input-sm, .125rem );--bm-comp-input-radius-choice-radio: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-radius-choice-switch: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-border-width-field-default: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-border-width-field-error: var( --bm-sem-border-width-lg, .125rem );--bm-comp-input-border-width-choice: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-shadow-field: var( --bm-sem-shadow-none, 0 0 0 0 rgb(0, 0, 0, 0) )}:host,.bm-dark,.bm-light .bm-inverse,.bm-light.bm-inverse,[data-bm-theme~=bm-light] .bm-inverse,[data-bm-theme~=bm-light].bm-inverse,.bm-enterprise,.bm-consumer,[data-bm-theme~=bm-dark]{--bm-comp-input-color-bg: var(--bm-sem-color-surface-01, #202e39);--bm-comp-input-color-bg-disabled: var( --bm-sem-color-surface-highlight, rgba(134, 151, 165, .16) );--bm-comp-input-color-border: var(--bm-sem-color-border-strong, #9fafbc);--bm-comp-input-color-border-error: var( --bm-sem-color-border-negative-strong, #f67378 );--bm-comp-input-color-border-disabled: rgba(159, 175, 188, .4);--bm-comp-input-color-text: var(--bm-sem-color-text-primary, #ffffff);--bm-comp-input-color-text-placeholder: var( --bm-sem-color-text-secondary, #c3cdd5 );--bm-comp-input-color-text-disabled: var( --bm-sem-color-text-disabled, rgba(195, 205, 213, .4) );--bm-comp-input-color-icon-disabled: var( --bm-sem-color-text-disabled, rgba(195, 205, 213, .4) );--bm-comp-input-color-icon: var(--bm-sem-color-icon-secondary, #c3cdd5);--bm-comp-input-color-icon-error: var( --bm-sem-color-icon-negative-strong, #f67378 );--bm-comp-input-color-divider: var(--bm-sem-color-border-02, #465967);--bm-comp-input-color-choice-checkbox-selected-bg: var( --bm-utility-color-accent-default, #43bfd6 );--bm-comp-input-color-choice-checkbox-selected-icon: var( --bm-sem-color-icon-primary-inverse, #141d24 );--bm-comp-input-color-choice-checkbox-selected-bg-error: var( --bm-sem-color-surface-negative-strong, #f67378 );--bm-comp-input-color-choice-checkbox-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-switch-selected-bg: var( --bm-utility-color-accent-default, #43bfd6 );--bm-comp-input-color-choice-switch-selected-icon: var( --bm-sem-color-icon-primary-inverse, #141d24 );--bm-comp-input-color-choice-switch-selected-border: var( --bm-sem-color-none, #ffffff00 );--bm-comp-input-color-choice-radio-selected-bg: var( --bm-sem-color-surface-01, #202e39 );--bm-comp-input-color-choice-radio-selected-border: var( --bm-utility-color-accent-default, #43bfd6 );--bm-comp-input-color-choice-radio-selected-inner-circle: var( --bm-utility-color-accent-default, #43bfd6 );--bm-comp-input-color-choice-radio-selected-bg-error: var( --bm-sem-color-surface-01, #202e39 );--bm-comp-input-color-choice-radio-selected-border-error: var( --bm-sem-color-surface-negative-strong, #f67378 );--bm-comp-input-color-choice-radio-selected-inner-circle-error: var( --bm-sem-color-surface-negative-strong, #f67378 );--bm-comp-input-typo-default: var( --bm-sem-typo-compact-body-md, 400 1rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-character-count: var( --bm-sem-typo-body-sm, 400 .875rem/1.25rem "Source Sans Pro" );--bm-comp-input-typo-label-choice: var( --bm-sem-typo-body-md, 400 1rem/1.5rem "Source Sans Pro" );--bm-comp-input-space-field-x: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-field-y: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-field-gap: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-inside: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-y: var(--bm-sem-space-50, .5rem);--bm-comp-input-space-choice-gap-items-x: var(--bm-sem-space-100, 1rem);--bm-comp-input-space-choice-nudge: var( --bm-primitive-dimension-12, .125rem );--bm-comp-input-size-field-md-height: var(--bm-sem-size-height-md, 2.5rem);--bm-comp-input-size-field-width: var(--bm-primitive-dimension-1800, 18rem);--bm-comp-input-size-field-icon: var(--bm-sem-size-icon-md, 1.25rem);--bm-comp-input-size-field-text-area-height: var( --bm-primitive-dimension-475, 4.75rem );--bm-comp-input-size-choice-checkbox: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio: var(--bm-sem-size-icon-sm, 1rem);--bm-comp-input-size-choice-radio-inside: var( --bm-primitive-dimension-50, .5rem );--bm-comp-input-size-choice-switch-height: var( --bm-sem-size-icon-md, 1.25rem );--bm-comp-input-size-choice-switch-width: var( --bm-primitive-dimension-250, 2.5rem );--bm-comp-input-size-choice-switch-knob: var( --bm-primitive-dimension-87, .875rem );--bm-comp-input-radius-field: var(--bm-sem-radius-input-md, .25rem);--bm-comp-input-radius-choice-checkbox: var( --bm-sem-radius-input-sm, .125rem );--bm-comp-input-radius-choice-radio: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-radius-choice-switch: var( --bm-sem-radius-input-lg, 624.938rem );--bm-comp-input-border-width-field-default: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-border-width-field-error: var( --bm-sem-border-width-lg, .125rem );--bm-comp-input-border-width-choice: var( --bm-sem-border-width-input, .063rem );--bm-comp-input-shadow-field: var( --bm-sem-shadow-none, 0 0 0 0 rgb(0, 0, 0, 0) )}.bm-text-field{--bm-label-cursor: pointer;max-width:var(--bm-comp-input-size-field-width);--bm-label-space-bottom: var(--bm-comp-label-space-bottom);--bm-helper-text-space-top: var(--bm-comp-helper-text-space-top)}.bm-text-field--disabled{--bm-label-cursor: not-allowed;--bm-label-pointer-events: auto;--bm-text-field-cursor: not-allowed;--bm-text-field-input-cursor: not-allowed}.bm-text-field--error .bm-text-field__field{border-color:var(--bm-comp-input-color-border-error);background-color:var(--bm-comp-input-color-bg);outline-offset:calc(0px - var(--bm-comp-input-border-width-field-error));outline:var(--bm-comp-input-border-width-field-error) solid var(--bm-comp-input-color-border-error)}.bm-text-field--error .bm-text-field__field .bm-text-field__input{color:var(--bm-comp-input-color-text)}.bm-text-field--error .bm-text-field__field .bm-text-field__input::placeholder{color:var(--bm-comp-input-color-text-placeholder)}.bm-text-field--read-only .bm-text-field__field{border-color:var(--bm-comp-input-color-border-disabled);background-color:var(--bm-comp-input-color-bg-disabled)}.bm-text-field--read-only .bm-text-field__field .bm-text-field__input{color:var(--bm-comp-input-color-text)}.bm-text-field--read-only .bm-text-field__field .bm-text-field__input::placeholder{color:var(--bm-comp-input-color-text-placeholder)}.bm-text-field--read-only .bm-text-field__field .bm-text-field__content svg,.bm-text-field--read-only .bm-text-field__field .bm-text-field__content ::slotted([slot*=content]){color:var(--bm-comp-input-color-icon)}.bm-text-field--disabled .bm-text-field__field{border-color:var(--bm-comp-input-color-border-disabled);background-color:var(--bm-comp-input-color-bg-disabled)}.bm-text-field--disabled .bm-text-field__field .bm-text-field__input{color:var(--bm-comp-input-color-text-disabled)}.bm-text-field--disabled .bm-text-field__field .bm-text-field__input::placeholder{color:var(--bm-comp-input-color-text-disabled)}.bm-text-field--disabled .bm-text-field__field .bm-text-field__content{opacity:var(--bm-sem-opacity-disabled)}.bm-text-field--disabled .bm-text-field__field .bm-text-field__content svg,.bm-text-field--disabled .bm-text-field__field .bm-text-field__content ::slotted([slot*=content]){color:var(--bm-comp-input-color-text-disabled)}.bm-text-field--fluid{max-width:100%}.bm-text-field--ellipsis .bm-text-field__field .bm-text-field__input{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.bm-text-field__field{display:flex;flex-wrap:nowrap;align-items:center;box-sizing:border-box;transform:translate3d(var(--bm-sem-space-0),var(--bm-sem-space-0),var(--bm-sem-space-0));border-style:solid;border-color:var(--bm-comp-input-color-border);border-radius:var(--bm-comp-input-radius-field);border-width:var(--bm-comp-input-border-width-field-default);cursor:var(--bm-text-field-cursor, default);gap:var(--bm-comp-input-space-field-gap);box-shadow:var(--bm-comp-input-shadow-field);background-color:var(--bm-comp-input-color-bg);height:var(--bm-comp-input-size-field-md-height);padding:var(--bm-comp-input-space-field-y) var(--bm-comp-input-space-field-x)}.bm-text-field__field:focus-within{outline-offset:calc(0px - var(--bm-sem-size-focus-offset));outline:var(--bm-sem-border-width-focus) solid var(--bm-sem-color-border-focus)}.bm-text-field__field .bm-text-field__input{border:none;outline:none;background:none;width:100%;padding:var(--bm-sem-space-0);color:var(--bm-comp-input-color-text);font:var(--bm-comp-input-typo-default);cursor:var(--bm-text-field-input-cursor, text)}.bm-text-field__field .bm-text-field__input:-webkit-autofill{caret-color:var(--bm-comp-input-color-text);-webkit-text-fill-color:var(--bm-comp-input-color-text);box-shadow:0 0 0 var(--bm-comp-input-size-field-md-height) var(--bm-comp-input-color-bg) inset}.bm-text-field__field .bm-text-field__input::placeholder{color:var(--bm-comp-input-color-text-placeholder)}.bm-text-field__field .bm-text-field__content{display:flex;align-items:center}.bm-text-field__field .bm-text-field__content svg,.bm-text-field__field .bm-text-field__content ::slotted([slot*=content]){color:var(--bm-comp-input-color-icon);width:var(--bm-comp-input-size-field-icon);height:var(--bm-comp-input-size-field-icon)}';
13
+ var L = Object.defineProperty, R = Object.getOwnPropertyDescriptor, C = (e) => {
14
14
  throw TypeError(e);
15
- }, r = (e, o, i, l) => {
16
- for (var a = l > 1 ? void 0 : l ? D(o, i) : o, n = e.length - 1, b; n >= 0; n--)
17
- (b = e[n]) && (a = (l ? b(o, i, a) : b(a)) || a);
18
- return l && a && R(o, i, a), a;
19
- }, H = (e, o, i) => o.has(e) || B("Cannot " + i), m = (e, o, i) => (H(e, o, "read from private field"), i ? i.call(e) : o.get(e)), s = (e, o, i) => o.has(e) ? B("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(e) : o.set(e, i), g, _, d, v, x, y, w;
20
- const { baseClassNamePrefix: N, subElementClassPrefix: u, classModifierPrefix: f } = A("text-field");
21
- let t = class extends W {
15
+ }, r = (e, o, i, c) => {
16
+ for (var m = c > 1 ? void 0 : c ? R(o, i) : o, s = e.length - 1, b; s >= 0; s--)
17
+ (b = e[s]) && (m = (c ? b(o, i, m) : b(m)) || m);
18
+ return c && m && L(o, i, m), m;
19
+ }, W = (e, o, i) => o.has(e) || C("Cannot " + i), l = (e, o, i) => (W(e, o, "read from private field"), i ? i.call(e) : o.get(e)), f = (e, o, i) => o.has(e) ? C("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(e) : o.set(e, i), d, u, v, x;
20
+ const { baseClassNamePrefix: D, subElementClassPrefix: _, classModifierPrefix: h } = F("text-field");
21
+ let t = class extends A {
22
22
  constructor() {
23
- super(...arguments), this.required = !1, this.hideRequiredMarker = !1, this.readOnly = !1, this.disabled = !1, this.fluid = !1, this.ellipse = !1, this.type = "text", this.inputMode = "text", this._hasContentBeforeSlot = !1, this._hasContentAfterSlot = !1, s(this, g, () => !!this._hasContentAfterSlot), s(this, _, () => !!this._hasContentBeforeSlot), s(this, d, () => {
23
+ super(...arguments), this.required = !1, this.hideRequiredMarker = !1, this.readOnly = !1, this.disabled = !1, this.fluid = !1, this.ellipse = !1, this.type = "text", this.inputMode = "text", this._hasContentBeforeSlot = !1, this._hasContentAfterSlot = !1, f(this, d, () => {
24
24
  var e;
25
25
  return !!(this.disabled || (e = this.formContext) != null && e.disabled);
26
- }), s(this, v, () => {
26
+ }), f(this, u, () => {
27
27
  var e;
28
28
  return !!(this.readOnly || (e = this.formContext) != null && e.readOnly);
29
- }), s(this, x, () => {
29
+ }), f(this, v, () => {
30
30
  var e;
31
31
  return !!(this.required || (e = this.formContext) != null && e.required);
32
- }), s(this, y, () => {
33
- const e = ({ target: o }) => {
34
- this._hasContentBeforeSlot = $(o);
35
- };
36
- return m(this, _).call(this) ? p`
37
- <div class="${u}content">
38
- <slot name="content-before" @slotchange="${e}"></slot>
39
- </div>
40
- ` : p`<slot name="content-before" @slotchange="${e}"></slot>`;
41
- }), s(this, w, () => {
42
- const e = ({ target: o }) => {
43
- this._hasContentAfterSlot = $(o);
44
- };
45
- return m(this, g).call(this) ? p`
46
- <div class="${u}content">
47
- <slot name="content-after" @slotchange="${e}"></slot>
48
- </div>
49
- ` : p`<slot name="content-after" @slotchange="${e}"></slot>`;
32
+ }), f(this, x, (e) => {
33
+ const o = e === "before" ? "_hasContentBeforeSlot" : "_hasContentAfterSlot", c = g`<slot
34
+ name="content-${e}"
35
+ @slotchange="${({ target: m }) => {
36
+ this[o] = I(m);
37
+ }}"
38
+ ></slot>`;
39
+ return this[o] ? g`<div class="${_}content">${c}</div>` : c;
50
40
  });
51
41
  }
52
42
  updated(e) {
53
- const [o] = this._textFieldLabel, [i] = this._textFieldHelperText, { decorate: l } = z(o), { decorate: a } = z(i), n = h(e, ["value"]), b = h(e, ["validationRules"]), F = h(e, ["formContext", "disabled"]), M = h(e, [
43
+ const [o] = this._textFieldLabel, [i] = this._textFieldHelperText, { decorate: c } = w(o), { decorate: m } = w(i), s = n(e, ["value"]), b = n(e, ["validationRules"]), k = n(e, ["formContext", "disabled"]), S = n(e, [
54
44
  "formContext",
55
45
  "required",
56
46
  "hideRequiredMarker"
57
- ]), q = h(e, ["formContext"]) && this.contextInitialsChanged();
58
- (n || q) && this.setContextValue(), F && (l({ disabled: m(this, d).call(this) }), a({ disabled: m(this, d).call(this) })), b && this.setContextValidation(), M && l({ required: m(this, x).call(this) && !this.hideRequiredMarker });
47
+ ]), B = n(e, ["formContext"]) && this.contextInitialsChanged();
48
+ (s || B) && this.setContextValue(), k && (c({ disabled: l(this, d).call(this) }), m({ disabled: l(this, d).call(this) })), b && this.setContextValidation(), S && c({ required: l(this, v).call(this) && !this.hideRequiredMarker });
59
49
  }
60
50
  render() {
61
- const { ariaInvalid: e } = this, { length: o } = this.validationErrors(), i = typeof this.error == "string" || !!o, l = C(
62
- this.helperTextId,
51
+ const { ariaInvalid: e } = this, { length: o } = this.validationErrors(), i = typeof this.error == "string" || !!o, c = this.helperTextId, m = this.error || this.validationErrorShown() ? y(
63
52
  this.error && this.errorId,
64
53
  this.validationErrorShown() && this.validationErrorsId
65
- ), a = C(
66
- N,
67
- i && `${f}error`,
68
- this.theme && P(this.theme),
69
- this.fluid && `${f}fluid`,
70
- this.ellipse && `${f}ellipsis`,
71
- m(this, d).call(this) && `${f}disabled`,
72
- m(this, v).call(this) && `${f}read-only`
54
+ ) : void 0, s = y(
55
+ D,
56
+ i && `${h}error`,
57
+ this.theme && M(this.theme),
58
+ this.fluid && `${h}fluid`,
59
+ this.ellipse && `${h}ellipsis`,
60
+ l(this, d).call(this) && `${h}disabled`,
61
+ l(this, u).call(this) && `${h}read-only`
73
62
  );
74
- return p`
75
- <div class="${a}" style="max-width: ${this.width}">
63
+ return g`
64
+ <div
65
+ class="${s}"
66
+ style="${this.width ? `max-width: ${this.width}` : p}"
67
+ >
76
68
  <slot name="label" id="${this.labelId}"></slot>
77
- <div class="${u}field">
78
- ${m(this, y).call(this)}
69
+ <div class="${_}field">
70
+ ${l(this, x).call(this, "before")}
79
71
  <input
80
72
  id="${this.id}"
81
73
  name="${this.name}"
82
74
  type="${this.type}"
83
- ${O(this.formFieldRef)}
75
+ ${E(this.formFieldRef)}
84
76
  inputmode="${this.inputMode}"
85
- ?required="${m(this, x).call(this)}"
86
- ?readonly="${m(this, v).call(this)}"
87
- ?disabled="${m(this, d).call(this)}"
88
- placeholder="${this.placeholder}"
77
+ ?required="${l(this, v).call(this)}"
78
+ ?readonly="${l(this, u).call(this)}"
79
+ ?disabled="${l(this, d).call(this)}"
80
+ placeholder="${this.placeholder ?? p}"
89
81
  aria-labelledby="${this.labelId}"
90
- aria-label="${this.inputAriaLabel}"
82
+ aria-label="${this.inputAriaLabel ?? p}"
91
83
  @blur="${this.validateFieldOnBlur}"
92
84
  @keydown="${this.submitFormByEnter}"
93
- aria-describedby="${l}"
94
- class="${u}input"
85
+ aria-describedby="${c ?? p}"
86
+ aria-errormessage="${m ?? p}"
87
+ class="${_}input"
95
88
  @input="${this.validateFieldOnChange}"
96
89
  aria-invalid="${e || i}"
97
90
  />
98
- ${m(this, w).call(this)}
91
+ ${l(this, x).call(this, "after")}
99
92
  </div>
100
93
  <slot name="helper-text" id="${this.helperTextId}"></slot>
101
- ${this.renderError(this.error, m(this, d).call(this))}
94
+ ${this.renderError(this.error, l(this, d).call(this))}
102
95
  ${this.renderValidationErrors()}
103
96
  </div>
104
97
  `;
105
98
  }
106
99
  };
107
- g = /* @__PURE__ */ new WeakMap();
108
- _ = /* @__PURE__ */ new WeakMap();
109
100
  d = /* @__PURE__ */ new WeakMap();
101
+ u = /* @__PURE__ */ new WeakMap();
110
102
  v = /* @__PURE__ */ new WeakMap();
111
103
  x = /* @__PURE__ */ new WeakMap();
112
- y = /* @__PURE__ */ new WeakMap();
113
- w = /* @__PURE__ */ new WeakMap();
114
- I(t);
115
- t.styles = E(L);
104
+ O(t);
105
+ t.styles = q(T);
116
106
  r([
117
- c({ type: String })
107
+ a({ type: String })
118
108
  ], t.prototype, "placeholder", 2);
119
109
  r([
120
- c({ type: Boolean })
110
+ a({ type: Boolean })
121
111
  ], t.prototype, "required", 2);
122
112
  r([
123
- c({ type: Boolean })
113
+ a({ type: Boolean })
124
114
  ], t.prototype, "hideRequiredMarker", 2);
125
115
  r([
126
- c({ type: String })
116
+ a({ type: String })
127
117
  ], t.prototype, "error", 2);
128
118
  r([
129
- c({ type: Boolean })
119
+ a({ type: Boolean })
130
120
  ], t.prototype, "readOnly", 2);
131
121
  r([
132
- c({ type: Boolean })
122
+ a({ type: Boolean })
133
123
  ], t.prototype, "disabled", 2);
134
124
  r([
135
- c({ type: Boolean })
125
+ a({ type: Boolean })
136
126
  ], t.prototype, "fluid", 2);
137
127
  r([
138
- c({ type: String })
128
+ a({ type: String })
139
129
  ], t.prototype, "width", 2);
140
130
  r([
141
- c({ type: Boolean })
131
+ a({ type: Boolean })
142
132
  ], t.prototype, "ellipse", 2);
143
133
  r([
144
- c({ type: String })
134
+ a({ type: String })
145
135
  ], t.prototype, "theme", 2);
146
136
  r([
147
- c({ type: String })
137
+ a({ type: String })
148
138
  ], t.prototype, "type", 2);
149
139
  r([
150
- c({ type: String })
140
+ a({ type: String })
151
141
  ], t.prototype, "inputMode", 2);
152
142
  r([
153
- k({ slot: "label" })
143
+ z({ slot: "label" })
154
144
  ], t.prototype, "_textFieldLabel", 2);
155
145
  r([
156
- k({ slot: "helper-text" })
146
+ z({ slot: "helper-text" })
157
147
  ], t.prototype, "_textFieldHelperText", 2);
158
148
  r([
159
- S()
149
+ $()
160
150
  ], t.prototype, "_hasContentBeforeSlot", 2);
161
151
  r([
162
- S()
152
+ $()
163
153
  ], t.prototype, "_hasContentAfterSlot", 2);
164
154
  t = r([
165
- T("bm-text-field")
155
+ P("bm-text-field")
166
156
  ], t);
167
157
  export {
168
158
  t as BmTextField