@tylertech/forge 2.0.0 → 2.1.0

package/dist/esm/chunks/chunk.BZPQIDQP.js

@@ -0,0 +1,602 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import {
+  TextFieldComponentDelegate
+} from "./chunk.Q4YMHFRY.js";
+import {
+  IconButtonComponent,
+  IconButtonComponentDelegate
+} from "./chunk.7Y4NHCJH.js";
+import {
+  tylIconControlPoint,
+  tylIconRemoveCircleOutline
+} from "./chunk.GS2AXUCN.js";
+import {
+  Platform
+} from "./chunk.BYN27JXZ.js";
+import {
+  IconRegistry
+} from "./chunk.P43Z3YAS.js";
+import {
+  FormFieldComponentDelegate
+} from "./chunk.HZISALRH.js";
+import {
+  BaseAdapter
+} from "./chunk.KZATVOA6.js";
+import {
+  FoundationProperty
+} from "./chunk.MMIZOYAS.js";
+import {
+  COMPONENT_NAME_PREFIX,
+  CustomElement
+} from "./chunk.35U3UPDV.js";
+import {
+  BaseComponent
+} from "./chunk.VK6LIH3B.js";
+import {
+  attachShadowTemplate,
+  defineCustomElement,
+  getShadowElement
+} from "./chunk.K2PCTUVN.js";
+import {
+  coerceBoolean
+} from "./chunk.MEFT5FQC.js";
+import {
+  __decorateClass,
+  __spreadProps,
+  __spreadValues
+} from "./chunk.LM5TVNZY.js";
+
+// dist/build/lib/staging/src/quantity-field/quantity-field-constants.ts
+var elementName = `${COMPONENT_NAME_PREFIX}quantity-field`;
+var attributes = {
+  INVALID: "invalid",
+  REQUIRED: "required",
+  DISABLED: "disabled"
+};
+var classes = {
+  ROOT: "forge-quantity-field",
+  INVALID: "forge-quantity-field--invalid",
+  REQUIRED: "forge-quantity-field--required"
+};
+var slots = {
+  INCREMENT_BUTTON: "increment-button",
+  DECREMENT_BUTTON: "decrement-button",
+  LABEL: "label",
+  HELPER_TEXT: "helper-text"
+};
+var selectors = {
+  ROOT: `.${classes.ROOT}`,
+  INCREMENT_BUTTON_SLOT: `slot[name=${slots.INCREMENT_BUTTON}]`,
+  DECREMENT_BUTTON_SLOT: `slot[name=${slots.DECREMENT_BUTTON}]`,
+  INCREMENT_BUTTON: `[slot=${slots.INCREMENT_BUTTON}] button, button[slot=${slots.INCREMENT_BUTTON}]`,
+  DECREMENT_BUTTON: `[slot=${slots.DECREMENT_BUTTON}] button, button[slot=${slots.DECREMENT_BUTTON}]`,
+  TEXT_FIELD: "forge-text-field",
+  INPUT: "input[type=number]",
+  LABEL: `[slot=${slots.LABEL}]`,
+  HELPER_TEXT: `[slot=${slots.HELPER_TEXT}]`
+};
+var QUANTITY_FIELD_CONSTANTS = {
+  elementName,
+  classes,
+  slots,
+  selectors,
+  attributes
+};
+
+// dist/build/lib/staging/src/quantity-field/quantity-field-adapter.ts
+var QuantityFieldAdapter = class extends BaseAdapter {
+  constructor(component) {
+    super(component);
+    this._rootElement = getShadowElement(component, QUANTITY_FIELD_CONSTANTS.selectors.ROOT);
+    this._incrementButtonSlot = getShadowElement(this._component, QUANTITY_FIELD_CONSTANTS.selectors.INCREMENT_BUTTON_SLOT);
+    this._decrementButtonSlot = getShadowElement(this._component, QUANTITY_FIELD_CONSTANTS.selectors.DECREMENT_BUTTON_SLOT);
+  }
+  addRootClass(name) {
+    this._rootElement.classList.add(name);
+  }
+  removeRootClass(name) {
+    this._rootElement.classList.remove(name);
+  }
+  inputHasAttribute(name) {
+    if (!this.inputElement) {
+      return false;
+    }
+    return this.inputElement.hasAttribute(name);
+  }
+  addIncrementButtonSlotListener(listener) {
+    this._incrementButtonSlot.addEventListener("slotchange", listener);
+  }
+  removeIncrementButtonSlotListener(listener) {
+    if (this._incrementButtonSlot) {
+      this._incrementButtonSlot.removeEventListener("slotchange", listener);
+    }
+  }
+  addDecrementButtonSlotListener(listener) {
+    this._decrementButtonSlot.addEventListener("slotchange", listener);
+  }
+  removeDecrementButtonSlotListener(listener) {
+    if (this._decrementButtonSlot) {
+      this._decrementButtonSlot.removeEventListener("slotchange", listener);
+    }
+  }
+  addTextFieldAttribute(name, value = "") {
+    if (this._textFieldComponent) {
+      this._textFieldComponent.setAttribute(name, value);
+    }
+  }
+  removeTextFieldAttribute(name) {
+    if (this._textFieldComponent) {
+      this._textFieldComponent.removeAttribute(name);
+    }
+  }
+  addIncrementEventListener(event, callback) {
+    this._incrementButtonElement.addEventListener(event, callback);
+  }
+  removeIncrementEventListener(event, callback) {
+    if (this._incrementButtonElement) {
+      this._incrementButtonElement.removeEventListener(event, callback);
+    }
+  }
+  addDecrementEventListener(event, callback) {
+    this._decrementButtonElement.addEventListener(event, callback);
+  }
+  removeDecrementEventListener(event, callback) {
+    if (this._decrementButtonElement) {
+      this._decrementButtonElement.removeEventListener(event, callback);
+    }
+  }
+  addIncrementButtonAttribute(name, value = "") {
+    this._incrementButtonElement.setAttribute(name, value);
+  }
+  removeIncrementButtonAttribute(name) {
+    this._incrementButtonElement.removeAttribute(name);
+  }
+  addDecrementButtonAttribute(name, value = "") {
+    this._decrementButtonElement.setAttribute(name, value);
+  }
+  removeDecrementButtonAttribute(name) {
+    this._decrementButtonElement.removeAttribute(name);
+  }
+  setLabelAsRequired(required) {
+    const labelElement = this._component.querySelector(QUANTITY_FIELD_CONSTANTS.selectors.LABEL);
+    if (required && Platform.WEBKIT && labelElement && !labelElement.innerText.endsWith("*")) {
+      const asterisk = document.createElement("span");
+      asterisk.style.color = "var(--mdc-theme-error)";
+      asterisk.style.marginLeft = "1px";
+      asterisk.textContent = "*";
+      labelElement.appendChild(asterisk);
+    }
+  }
+  increment() {
+    const input = this.inputElement;
+    if (!input) {
+      return;
+    }
+    const curValue = +input.value;
+    const precision = this._calcPrecision(this._inputStep);
+    let newValue = parseFloat((curValue + this._inputStep).toFixed(precision));
+    if (!!this._inputMax && this._inputMax < newValue) {
+      newValue = this._inputMax;
+    }
+    this._setInputValue(newValue);
+  }
+  decrement() {
+    const input = this.inputElement;
+    if (!input) {
+      return;
+    }
+    const curValue = +input.value;
+    const precision = this._calcPrecision(this._inputStep);
+    let newValue = parseFloat((curValue - this._inputStep).toFixed(precision));
+    if (!!this._inputMin && this._inputMin > newValue) {
+      newValue = this._inputMin;
+    }
+    this._setInputValue(newValue);
+  }
+  addInputDisabledAttributeChangeListener(callback) {
+    this._setupInputDisabledAttributeMutationObserver(callback);
+  }
+  removeInputDisabledAttributeChangeListener() {
+    this._cleanupInputDisabledAttributeMutationObserver();
+  }
+  _setInputValue(value) {
+    if (!this.inputElement) {
+      return;
+    }
+    this.inputElement.value = `${value}`;
+    this.inputElement.dispatchEvent(new Event("input"));
+    this.inputElement.dispatchEvent(new Event("change"));
+  }
+  _isNullOrUndefinedOrEmpty(value) {
+    return value === null || value === void 0 || value === "";
+  }
+  _setupInputDisabledAttributeMutationObserver(callback) {
+    if (!this.inputElement) {
+      return;
+    }
+    this._cleanupInputDisabledAttributeMutationObserver();
+    const mutationCallback = (mutationRecords) => this._inputDisabledAttributeMutationCallback(mutationRecords, callback);
+    this._inputAttributeMutationObserver = new MutationObserver(mutationCallback);
+    const mutationOptions = {
+      attributes: true,
+      attributeOldValue: true,
+      attributeFilter: [QUANTITY_FIELD_CONSTANTS.attributes.DISABLED]
+    };
+    this._inputAttributeMutationObserver.observe(this.inputElement, mutationOptions);
+  }
+  _cleanupInputDisabledAttributeMutationObserver() {
+    if (this._inputAttributeMutationObserver) {
+      this._inputAttributeMutationObserver.disconnect();
+      delete this._inputAttributeMutationObserver;
+    }
+  }
+  _inputDisabledAttributeMutationCallback(mutationRecords, callback) {
+    for (const mutationRecord of mutationRecords) {
+      if (mutationRecord.type !== "attributes" || !mutationRecord.attributeName || mutationRecord.attributeName !== QUANTITY_FIELD_CONSTANTS.attributes.DISABLED || mutationRecord.target[mutationRecord.attributeName] === mutationRecord.oldValue) {
+        continue;
+      }
+      callback();
+    }
+  }
+  get _incrementButtonElement() {
+    if (!this._incrementButton) {
+      this._incrementButton = this._component.querySelector(QUANTITY_FIELD_CONSTANTS.selectors.INCREMENT_BUTTON);
+    }
+    return this._incrementButton;
+  }
+  get _decrementButtonElement() {
+    if (!this._decrementButton) {
+      this._decrementButton = this._component.querySelector(QUANTITY_FIELD_CONSTANTS.selectors.DECREMENT_BUTTON);
+    }
+    return this._decrementButton;
+  }
+  get _textFieldComponent() {
+    if (!this._textField) {
+      this._textField = this._component.querySelector(QUANTITY_FIELD_CONSTANTS.selectors.TEXT_FIELD);
+    }
+    return this._textField;
+  }
+  get inputElement() {
+    if (!this._inputElement) {
+      this._inputElement = this._component.querySelector(QUANTITY_FIELD_CONSTANTS.selectors.INPUT);
+    }
+    return this._inputElement;
+  }
+  get _inputStep() {
+    const input = this.inputElement;
+    if (!input || this._isNullOrUndefinedOrEmpty(input.step)) {
+      return 1;
+    }
+    return +input.step;
+  }
+  get _inputMax() {
+    const input = this.inputElement;
+    if (!input || this._isNullOrUndefinedOrEmpty(input.max)) {
+      return null;
+    }
+    return +input.max;
+  }
+  get _inputMin() {
+    const input = this.inputElement;
+    if (!input || this._isNullOrUndefinedOrEmpty(input.min)) {
+      return null;
+    }
+    return +input.min;
+  }
+  _calcPrecision(value) {
+    const strVal = String(value);
+    if (strVal.includes(".")) {
+      return strVal.split(".")[1].length;
+    }
+    return 0;
+  }
+};
+
+// dist/build/lib/staging/src/quantity-field/quantity-field-foundation.ts
+var QuantityFieldFoundation = class {
+  constructor(_adapter) {
+    this._adapter = _adapter;
+    this._incrementValue = () => this._adapter.increment();
+    this._decrementValue = () => this._adapter.decrement();
+    this._incrementButtonSlotChanged = () => this._onIncrementButtonSlotChanged();
+    this._decrementButtonSlotChanged = () => this._onDecrementButtonSlotChanged();
+    this._adapter.addIncrementButtonSlotListener(this._incrementButtonSlotChanged);
+    this._adapter.addDecrementButtonSlotListener(this._decrementButtonSlotChanged);
+  }
+  connect() {
+    this._adapter.addInputDisabledAttributeChangeListener(() => this._syncDisabledStateOfButtons());
+    this._syncDisabledStateOfButtons();
+  }
+  disconnect() {
+    this._removeIncrementEventListener();
+    this._removeDecrementEventListener();
+    this._removeIncrementButtonSlotListener();
+    this._removeDecrementButtonSlotListener();
+    this._adapter.removeInputDisabledAttributeChangeListener();
+  }
+  _onIncrementButtonSlotChanged() {
+    this._addIncrementEventListener();
+  }
+  _onDecrementButtonSlotChanged() {
+    this._addDecrementEventListener();
+  }
+  _addIncrementEventListener() {
+    this._adapter.addIncrementEventListener("click", this._incrementValue);
+  }
+  _addDecrementEventListener() {
+    this._adapter.addDecrementEventListener("click", this._decrementValue);
+  }
+  _removeIncrementEventListener() {
+    this._adapter.removeIncrementEventListener("click", this._incrementValue);
+  }
+  _removeDecrementEventListener() {
+    this._adapter.removeDecrementEventListener("click", this._decrementValue);
+  }
+  _removeIncrementButtonSlotListener() {
+    this._adapter.removeIncrementButtonSlotListener(this._incrementButtonSlotChanged);
+  }
+  _removeDecrementButtonSlotListener() {
+    this._adapter.removeDecrementButtonSlotListener(this._decrementButtonSlotChanged);
+  }
+  _syncDisabledStateOfButtons() {
+    const isDisabled = this._adapter.inputHasAttribute(QUANTITY_FIELD_CONSTANTS.attributes.DISABLED);
+    if (isDisabled) {
+      this._adapter.addDecrementButtonAttribute(QUANTITY_FIELD_CONSTANTS.attributes.DISABLED);
+      this._adapter.addIncrementButtonAttribute(QUANTITY_FIELD_CONSTANTS.attributes.DISABLED);
+    } else {
+      this._adapter.removeIncrementButtonAttribute(QUANTITY_FIELD_CONSTANTS.attributes.DISABLED);
+      this._adapter.removeDecrementButtonAttribute(QUANTITY_FIELD_CONSTANTS.attributes.DISABLED);
+    }
+  }
+  get required() {
+    return this._required;
+  }
+  set required(value) {
+    if (this._required === value) {
+      return;
+    }
+    this._required = value;
+    if (this._required) {
+      this._adapter.setHostAttribute(QUANTITY_FIELD_CONSTANTS.attributes.REQUIRED);
+      this._adapter.addRootClass(QUANTITY_FIELD_CONSTANTS.classes.REQUIRED);
+    } else {
+      this._adapter.removeHostAttribute(QUANTITY_FIELD_CONSTANTS.attributes.REQUIRED);
+      this._adapter.removeRootClass(QUANTITY_FIELD_CONSTANTS.classes.REQUIRED);
+    }
+    this._adapter.setLabelAsRequired(this._required);
+  }
+  get invalid() {
+    return this._invalid;
+  }
+  set invalid(value) {
+    if (this._invalid === value) {
+      return;
+    }
+    this._invalid = value;
+    if (this._invalid) {
+      this._adapter.setHostAttribute(QUANTITY_FIELD_CONSTANTS.attributes.INVALID);
+      this._adapter.addRootClass(QUANTITY_FIELD_CONSTANTS.classes.INVALID);
+      this._adapter.addTextFieldAttribute(QUANTITY_FIELD_CONSTANTS.attributes.INVALID);
+    } else {
+      this._adapter.removeHostAttribute(QUANTITY_FIELD_CONSTANTS.attributes.INVALID);
+      this._adapter.removeRootClass(QUANTITY_FIELD_CONSTANTS.classes.INVALID);
+      this._adapter.removeTextFieldAttribute(QUANTITY_FIELD_CONSTANTS.attributes.INVALID);
+    }
+  }
+};
+
+// dist/build/lib/staging/src/quantity-field/quantity-field.ts
+var template = '<template><div class="forge-quantity-field" part="root"><slot name="label"></slot><div class="forge-quantity-field__row" part="row"><slot name="decrement-button"></slot><slot></slot><slot name="increment-button"></slot></div><slot name="helper-text"></slot></div></template>';
+var styles = '.forge-quantity-field ::slotted([slot=label]){-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);color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-quantity-field ::slotted([slot=helper-text]){-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:1rem;color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.forge-quantity-field ::slotted([slot=helper-text])::before{display:inline-block;width:0;height:16px;content:"";vertical-align:0}.forge-quantity-field__row{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-box-align:center;align-items:center}.forge-quantity-field ::slotted(forge-icon-button:first-of-type){color:var(--mdc-theme-text-secondary-on-light);margin-right:4px}.forge-quantity-field ::slotted(forge-icon-button:last-of-type){color:var(--mdc-theme-text-secondary-on-light);margin-left:4px}.forge-quantity-field ::slotted(forge-text-field){--forge-text-field-margin-top:0;--forge-text-field-margin-bottom:0}.forge-quantity-field--required ::slotted([slot=label])::before{color:#b00020;color:var(--mdc-theme-error,#b00020);content:"*";margin-right:1px}.forge-quantity-field--invalid ::slotted([slot=label]){-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);color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-quantity-field--invalid ::slotted([slot=helper-text]){-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:1rem;color:#b00020;color:var(--mdc-theme-error,#b00020)}.forge-quantity-field--invalid ::slotted([slot=helper-text])::before{display:inline-block;width:0;height:16px;content:"";vertical-align:0}:host{display:inline-block}:host([hidden]){display:none}';
+var QuantityFieldComponent = class extends BaseComponent {
+  constructor() {
+    super();
+    attachShadowTemplate(this, template, styles);
+    this._foundation = new QuantityFieldFoundation(new QuantityFieldAdapter(this));
+  }
+  static get observedAttributes() {
+    return [
+      QUANTITY_FIELD_CONSTANTS.attributes.INVALID,
+      QUANTITY_FIELD_CONSTANTS.attributes.REQUIRED
+    ];
+  }
+  connectedCallback() {
+    if (this._requiredElementsPresent()) {
+      this._foundation.connect();
+    } else {
+      this._ensureElementsPresent().then(() => {
+        this._foundation.connect();
+      });
+    }
+  }
+  disconnectedCallback() {
+    this._foundation.disconnect();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    switch (name) {
+      case QUANTITY_FIELD_CONSTANTS.attributes.INVALID:
+        this.invalid = coerceBoolean(newValue);
+        break;
+      case QUANTITY_FIELD_CONSTANTS.attributes.REQUIRED:
+        this.required = coerceBoolean(newValue);
+        break;
+    }
+  }
+  _ensureElementsPresent() {
+    return new Promise((resolve) => {
+      if (this._requiredElementsPresent()) {
+        resolve();
+        return;
+      }
+      const observer = new MutationObserver((changes) => {
+        const hasAddedNodes = changes.reduce((prev, curr) => prev + curr.addedNodes.length, 0) > 0;
+        if (hasAddedNodes) {
+          if (this._requiredElementsPresent()) {
+            observer.disconnect();
+            resolve();
+          }
+        }
+      });
+      observer.observe(this, { childList: true, subtree: true });
+    });
+  }
+  _requiredElementsPresent() {
+    const inputElement = this.querySelector(QUANTITY_FIELD_CONSTANTS.selectors.INPUT);
+    const decrementElement = this.querySelector(QUANTITY_FIELD_CONSTANTS.selectors.DECREMENT_BUTTON);
+    const incrementElement = this.querySelector(QUANTITY_FIELD_CONSTANTS.selectors.INCREMENT_BUTTON);
+    return !!inputElement && !!decrementElement && !!incrementElement;
+  }
+};
+__decorateClass([
+  FoundationProperty()
+], QuantityFieldComponent.prototype, "invalid", 2);
+__decorateClass([
+  FoundationProperty()
+], QuantityFieldComponent.prototype, "required", 2);
+QuantityFieldComponent = __decorateClass([
+  CustomElement({
+    name: QUANTITY_FIELD_CONSTANTS.elementName,
+    dependencies: [
+      IconButtonComponent
+    ]
+  })
+], QuantityFieldComponent);
+
+// dist/build/lib/staging/src/quantity-field/quantity-field-component-delegate.ts
+var QuantityFieldComponentDelegate = class extends FormFieldComponentDelegate {
+  constructor(config) {
+    super(config);
+    IconRegistry.define([tylIconRemoveCircleOutline, tylIconControlPoint]);
+  }
+  _build() {
+    const quantityField = document.createElement(QUANTITY_FIELD_CONSTANTS.elementName);
+    this._attachButton(quantityField, tylIconRemoveCircleOutline.name, "decrement-button");
+    this._attachTextField(quantityField);
+    this._attachButton(quantityField, tylIconControlPoint.name, "increment-button");
+    return quantityField;
+  }
+  _configure() {
+    var _a, _b, _c, _d, _e;
+    this.inputElement.value = (_b = (_a = this._config.options) == null ? void 0 : _a.value) != null ? _b : "0";
+    this.inputElement.style.textAlign = "center";
+    this.inputElement.style.width = "64px";
+    if ((_c = this._config.options) == null ? void 0 : _c.helperText) {
+      this.setHelperText(this._config.options.helperText);
+    }
+    if (typeof ((_d = this._config.options) == null ? void 0 : _d.label) === "string") {
+      this._createLabel(this._config.options.label);
+    }
+    if (((_e = this._config.options) == null ? void 0 : _e.step) !== void 0) {
+      this.inputElement.step = this._config.options.step;
+    }
+  }
+  get value() {
+    return this._textFieldDelegate.inputElement.value;
+  }
+  set value(value) {
+    this._textFieldDelegate.inputElement.value = value;
+  }
+  get disabled() {
+    return this._textFieldDelegate.inputElement.disabled;
+  }
+  set disabled(value) {
+    this._textFieldDelegate.inputElement.disabled = value;
+  }
+  get invalid() {
+    return this._element.invalid || false;
+  }
+  set invalid(value) {
+    this._element.invalid = value;
+  }
+  get inputElement() {
+    return this._textFieldDelegate.inputElement;
+  }
+  get labelElement() {
+    return this._labelElement;
+  }
+  onChange(listener) {
+    this._textFieldDelegate.inputElement.addEventListener("input", (evt) => listener(evt.target.value));
+  }
+  onFocus(listener) {
+    this._textFieldDelegate.inputElement.addEventListener("focus", (evt) => listener(evt));
+  }
+  onBlur(listener) {
+    this._textFieldDelegate.inputElement.addEventListener("blur", (evt) => listener(evt));
+  }
+  _attachTextField(quantityField) {
+    var _a, _b, _c, _d, _e;
+    const textFieldConfig = {
+      props: __spreadValues({}, (_b = (_a = this._config.options) == null ? void 0 : _a.textFieldDelegateConfig) == null ? void 0 : _b.props),
+      options: __spreadProps(__spreadValues({}, (_d = (_c = this._config.options) == null ? void 0 : _c.textFieldDelegateConfig) == null ? void 0 : _d.options), {
+        id: (_e = this._config.options) == null ? void 0 : _e.id,
+        type: "number"
+      })
+    };
+    this._textFieldDelegate = new TextFieldComponentDelegate(textFieldConfig);
+    quantityField.appendChild(this._textFieldDelegate.element);
+  }
+  setLabel(text) {
+    if (text) {
+      if (this._labelElement) {
+        this._labelElement.textContent = text;
+      } else {
+        this._createLabel(text);
+      }
+    } else if (this._labelElement) {
+      this._element.removeChild(this._labelElement);
+      this._labelElement = void 0;
+    }
+  }
+  setHelperText(text) {
+    if (text) {
+      if (!this._helperTextElement) {
+        this._helperTextElement = document.createElement("span");
+        this._helperTextElement.slot = "helper-text";
+        this._element.appendChild(this._helperTextElement);
+      }
+      this._helperTextElement.textContent = text;
+    } else if (this._helperTextElement) {
+      this._element.removeChild(this._helperTextElement);
+      this._helperTextElement = void 0;
+    }
+  }
+  _createLabel(text) {
+    var _a;
+    this._labelElement = document.createElement("label");
+    this._labelElement.textContent = text;
+    this._labelElement.slot = "label";
+    if ((_a = this._config.options) == null ? void 0 : _a.id) {
+      this._labelElement.setAttribute("for", this._config.options.id);
+    }
+    this._element.appendChild(this._labelElement);
+  }
+  _attachButton(parent, iconName, slot) {
+    const iconButtonDelegate = new IconButtonComponentDelegate({
+      options: {
+        iconName,
+        parent,
+        attributes: { slot }
+      }
+    });
+    return iconButtonDelegate;
+  }
+};
+
+// dist/build/lib/staging/src/quantity-field/index.ts
+function defineQuantityFieldComponent() {
+  defineCustomElement(QuantityFieldComponent);
+}
+
+export {
+  QUANTITY_FIELD_CONSTANTS,
+  QuantityFieldAdapter,
+  QuantityFieldFoundation,
+  QuantityFieldComponent,
+  QuantityFieldComponentDelegate,
+  defineQuantityFieldComponent
+};
+//# sourceMappingURL=chunk.BZPQIDQP.js.map