@viasat/beam-web-components 2.0.0

package/wip/TextField/TextField.js

@@ -0,0 +1,169 @@
+import { unsafeCSS as E, html as b } from "lit";
+import { property as c, queryAssignedElements as k, state as S } from "lit/decorators.js";
+import { ref as O } from "lit/directives/ref.js";
+import C from "clsx";
+import { p as f, a as z, g as A } from "../../chunks/classNames.Cq_tbDRp.js";
+import { t as P } from "../../chunks/constants.jOWREYQE.js";
+import { r as I } from "../../chunks/delegate.baxDQosr.js";
+import { c as T } from "../../chunks/register-custom-element.DHGKOhmA.js";
+import { s as $ } from "../../chunks/helpers.AwJwaZvv.js";
+import { FormField as W } from "../Form/Form.decorator.js";
+import "../../chunks/HelperText.CcVVOtA3.js";
+const L = ':root,:host,.bm-light,.bm-dark .bm-inverse,[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,[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)}';
+var R = Object.defineProperty, D = Object.getOwnPropertyDescriptor, B = (e) => {
+  throw TypeError(e);
+}, r = (e, o, i, a) => {
+  for (var l = a > 1 ? void 0 : a ? D(o, i) : o, n = e.length - 1, p; n >= 0; n--)
+    (p = e[n]) && (l = (a ? p(o, i, l) : p(l)) || l);
+  return a && l && R(o, i, l), l;
+}, 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;
+const { baseClassNamePrefix: N, subElementClassPrefix: u, classModifierPrefix: h } = A("text-field");
+let t = class extends W {
+  constructor() {
+    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, () => {
+      var e;
+      return !!(this.disabled || (e = this.formContext) != null && e.disabled);
+    }), s(this, v, () => {
+      var e;
+      return !!(this.readOnly || (e = this.formContext) != null && e.readOnly);
+    }), s(this, x, () => {
+      var e;
+      return !!(this.required || (e = this.formContext) != null && e.required);
+    }), s(this, y, () => {
+      const e = ({ target: o }) => {
+        this._hasContentBeforeSlot = $(o);
+      };
+      return m(this, _).call(this) ? b`
+          <div class="${u}content">
+            <slot name="content-before" @slotchange="${e}"></slot>
+          </div>
+        ` : b`<slot name="content-before" @slotchange="${e}"></slot>`;
+    }), s(this, w, () => {
+      const e = ({ target: o }) => {
+        this._hasContentAfterSlot = $(o);
+      };
+      return m(this, g).call(this) ? b`
+          <div class="${u}content">
+            <slot name="content-after" @slotchange="${e}"></slot>
+          </div>
+        ` : b`<slot name="content-after" @slotchange="${e}"></slot>`;
+    });
+  }
+  updated(e) {
+    const [o] = this._textFieldLabel, [i] = this._textFieldHelperText, { decorate: a } = z(o), { decorate: l } = z(i), n = f(e, ["value"]), p = f(e, ["validationRules"]), F = f(e, ["formContext", "disabled"]), M = f(e, [
+      "formContext",
+      "required",
+      "hideRequiredMarker"
+    ]), q = f(e, ["formContext"]) && this.contextInitialsChanged();
+    (n || q) && this.setContextValue(), F && (a({ disabled: m(this, d).call(this) }), l({ disabled: m(this, d).call(this) })), p && this.setContextValidation(), M && a({ required: m(this, x).call(this) && !this.hideRequiredMarker });
+  }
+  render() {
+    const { ariaInvalid: e } = this, { length: o } = this.validationErrors(), i = typeof this.error == "string" || !!o, a = C(
+      this.helperTextId,
+      this.error && this.errorId,
+      this.validationErrorShown() && this.validationErrorsId
+    ), l = C(
+      N,
+      i && `${h}error`,
+      this.theme && P(this.theme),
+      this.fluid && `${h}fluid`,
+      this.ellipse && `${h}ellipsis`,
+      m(this, d).call(this) && `${h}disabled`,
+      m(this, v).call(this) && `${h}read-only`
+    );
+    return b`
+      <div class="${l}" style="max-width: ${this.width}">
+        <slot name="label" id="${this.labelId}"></slot>
+        <div class="${u}field">
+          ${m(this, y).call(this)}
+          <input
+            id="${this.id}"
+            name="${this.name}"
+            type="${this.type}"
+            ${O(this.formFieldRef)}
+            inputmode="${this.inputMode}"
+            ?required="${m(this, x).call(this)}"
+            ?readonly="${m(this, v).call(this)}"
+            ?disabled="${m(this, d).call(this)}"
+            placeholder="${this.placeholder}"
+            aria-labelledby="${this.labelId}"
+            aria-label="${this.inputAriaLabel}"
+            @blur="${this.validateFieldOnBlur}"
+            @keydown="${this.submitFormByEnter}"
+            aria-describedby="${a}"
+            class="${u}input"
+            @input="${this.validateFieldOnChange}"
+            aria-invalid="${e || i}"
+          />
+          ${m(this, w).call(this)}
+        </div>
+        <slot name="helper-text" id="${this.helperTextId}"></slot>
+        ${this.renderError(this.error, m(this, d).call(this))}
+        ${this.renderValidationErrors()}
+      </div>
+    `;
+  }
+};
+g = /* @__PURE__ */ new WeakMap();
+_ = /* @__PURE__ */ new WeakMap();
+d = /* @__PURE__ */ new WeakMap();
+v = /* @__PURE__ */ new WeakMap();
+x = /* @__PURE__ */ new WeakMap();
+y = /* @__PURE__ */ new WeakMap();
+w = /* @__PURE__ */ new WeakMap();
+I(t);
+t.styles = E(L);
+r([
+  c({ type: String })
+], t.prototype, "placeholder", 2);
+r([
+  c({ type: Boolean })
+], t.prototype, "required", 2);
+r([
+  c({ type: Boolean })
+], t.prototype, "hideRequiredMarker", 2);
+r([
+  c({ type: String })
+], t.prototype, "error", 2);
+r([
+  c({ type: Boolean })
+], t.prototype, "readOnly", 2);
+r([
+  c({ type: Boolean })
+], t.prototype, "disabled", 2);
+r([
+  c({ type: Boolean })
+], t.prototype, "fluid", 2);
+r([
+  c({ type: String })
+], t.prototype, "width", 2);
+r([
+  c({ type: Boolean })
+], t.prototype, "ellipse", 2);
+r([
+  c({ type: String })
+], t.prototype, "theme", 2);
+r([
+  c({ type: String })
+], t.prototype, "type", 2);
+r([
+  c({ type: String })
+], t.prototype, "inputMode", 2);
+r([
+  k({ slot: "label" })
+], t.prototype, "_textFieldLabel", 2);
+r([
+  k({ slot: "helper-text" })
+], t.prototype, "_textFieldHelperText", 2);
+r([
+  S()
+], t.prototype, "_hasContentBeforeSlot", 2);
+r([
+  S()
+], t.prototype, "_hasContentAfterSlot", 2);
+t = r([
+  T("bm-text-field")
+], t);
+export {
+  t as BmTextField
+};

package/wip/TextField/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TextField';
+//# sourceMappingURL=index.d.ts.map

package/wip/TextField/index.js

@@ -0,0 +1,4 @@
+import { BmTextField as o } from "./TextField.js";
+export {
+  o as BmTextField
+};