@vonage/vivid 5.15.1 → 5.17.0

package/unbundled/picker-field.template.cjs

@@ -1,209 +1,170 @@
-'use strict';
-
-const fastElement = require('@microsoft/fast-element');
-const index = require('./index.cjs');
-const mixins = require('./mixins.cjs');
-const formAssociated = require('./form-associated.cjs');
-const vividElement = require('./vivid-element.cjs');
-const withContextualHelp = require('./with-contextual-help.cjs');
-const withErrorText = require('./with-error-text.cjs');
-const formElement = require('./form-element.cjs');
-const trappedFocus = require('./trapped-focus.cjs');
-const localized = require('./localized.cjs');
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-const popup_definition = require('./definition5.cjs');
-const textField_definition = require('../text-field/definition.cjs');
-const button_definition = require('./definition2.cjs');
-
-const pickerFieldStyles = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog--padded{padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_form_associated = require("./form-associated.cjs");
+const require_form_element = require("./form-element.cjs");
+const require_with_error_text = require("./with-error-text.cjs");
+const require_with_contextual_help = require("./with-contextual-help.cjs");
+const require_localized = require("./localized.cjs");
+const require_trapped_focus = require("./trapped-focus.cjs");
+const require_definition = require("./definition7.cjs");
+const require_dialog = require("./dialog.cjs");
+const require_definition$1 = require("./definition10.cjs");
+const require_mixins = require("./mixins.cjs");
+const require_definition$2 = require("./definition26.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/shared/picker-field/picker-field.scss?inline
+var picker_field_default = ":host{display:inline-block}.base{inline-size:100%;display:inline-block}.control{inline-size:100%}.dialog{flex-direction:column;display:inline-flex}.dialog--padded{gap:12px;padding:12px}.dialog .footer{justify-content:flex-end;align-items:center;gap:8px;padding:8px;display:flex}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}";
+//#endregion
+//#region src/shared/picker-field/picker-field.ts
+/**
+* Base class for picker fields. Picker fields consist of a text field with a button that opens a popup that allows
+* picking values.
+* @testAction clear clearPicker
+* @testRef control shadowTextField [data-vvd-component=text-field].control
+* @testRef pickerButton shadowButton #picker-button
+* @testRef clearButton shadowButton #clear-button
+*/
+var PickerField = class extends require_with_contextual_help.WithContextualHelp(require_mixins.WithFeedback(require_with_error_text.WithErrorText(require_form_element.FormElement(require_trapped_focus.TrappedFocus(require_localized.Localized(require_form_associated.FormAssociated(require_vivid_element.VividElement))))))) {
+	/**
+	* @internal
+	*/
+	readOnlyChanged() {
+		if (this.proxy instanceof HTMLInputElement) {
+			this.proxy.readOnly = this.readOnly;
+			this.validate();
+		}
+	}
+	constructor() {
+		super();
+		this.readOnly = false;
+		this.proxy = document.createElement("input");
+		this._popupOpen = false;
+		this._presentationValue = "";
+		this.value = "";
+	}
+	/**
+	* @internal
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		document.addEventListener("click", this.#dismissOnClickOutside);
+		this.addEventListener("focusin", this.#onFocusIn);
+		this.addEventListener("focusout", this.#onFocusOut);
+		this.#startObservingLocaleChanges();
+	}
+	/**
+	* @internal
+	*/
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		document.removeEventListener("click", this.#dismissOnClickOutside);
+		this.removeEventListener("focusin", this.#onFocusIn);
+		this.removeEventListener("focusout", this.#onFocusOut);
+		this.#stopObservingLocaleChanges();
+	}
+	#onFocusIn = () => {
+		this.$emit("focus", void 0, { bubbles: false });
+	};
+	#onFocusOut = () => {
+		this.$emit("blur", void 0, { bubbles: false });
+	};
+	/**
+	* @internal
+	*/
+	validate() {
+		if (this.proxy) this.proxy.setCustomValidity(this._getCustomValidationError() ?? "");
+		super.validate(this._textFieldEl?.querySelector("input") ?? void 0);
+	}
+	#localeChangeHandler = { handleChange: () => {
+		this._updatePresentationValue();
+	} };
+	#localeChangeObserver;
+	#startObservingLocaleChanges() {
+		this.#localeChangeObserver = _microsoft_fast_element.Observable.binding(() => this.locale, this.#localeChangeHandler);
+		this.#localeChangeObserver.observe(this, _microsoft_fast_element.ExecutionContext.default);
+	}
+	#stopObservingLocaleChanges() {
+		this.#localeChangeObserver.dispose();
+	}
+	#dismissOnClickOutside = (event) => {
+		if (!this._popupOpen) return;
+		const path = event.composedPath();
+		if (![this._dialogEl, this._pickerButtonEl].some((element) => path.includes(element))) this._closePopup(false);
+	};
+	#openPopupIfPossible() {
+		/* v8 ignore else -- @preserve */
+		if (!this.readOnly) this._popupOpen = true;
+	}
+	/**
+	* @internal
+	*/
+	_closePopup(restoreFocusToTextField = true) {
+		this._popupOpen = false;
+		if (restoreFocusToTextField) this._textFieldEl.focus();
+	}
+	/**
+	* On keydown anywhere in the picker.
+	* @internal
+	*/
+	_onBaseKeyDown(event) {
+		if (this._popupOpen && require_dialog.handleEscapeKeyAndStopPropogation(event)) {
+			this._closePopup();
+			return false;
+		}
+		if (this._trappedFocus(event, () => this._focusableElsWithinDialog())) return false;
+		return true;
+	}
+	/**
+	* @internal
+	*/
+	_presentationValueChanged() {
+		this.dirtyValue = true;
+		this.validate();
+	}
+	/**
+	* @internal
+	*/
+	_onTextFieldInput(event) {
+		this._presentationValue = event.currentTarget.value;
+	}
+	/**
+	* @internal
+	*/
+	_onPickerButtonClick() {
+		if (this._popupOpen) this._closePopup();
+		else this.#openPopupIfPossible();
+	}
+	/**
+	* @internal
+	*/
+	_onOkClick() {
+		this._closePopup();
+	}
+	/**
+	* @internal
+	*/
+	_onClearClick() {
+		this.$emit("clear-click");
+	}
 };
-class PickerField extends withContextualHelp.WithContextualHelp(
-  mixins.WithFeedback(
-    withErrorText.WithErrorText(
-      formElement.FormElement(trappedFocus.TrappedFocus(localized.Localized(formAssociated.FormAssociated(vividElement.VividElement))))
-    )
-  )
-) {
-  // --- Core ---
-  constructor() {
-    super();
-    this.readOnly = false;
-    this.#onFocusIn = () => {
-      this.$emit("focus", void 0, { bubbles: false });
-    };
-    this.#onFocusOut = () => {
-      this.$emit("blur", void 0, { bubbles: false });
-    };
-    /**
-     * @internal
-     */
-    this.proxy = document.createElement("input");
-    // Reformat the presentation value when the locale changes
-    this.#localeChangeHandler = {
-      handleChange: () => {
-        this._updatePresentationValue();
-      }
-    };
-    this._popupOpen = false;
-    this.#dismissOnClickOutside = (event) => {
-      if (!this._popupOpen) {
-        return;
-      }
-      const path = event.composedPath();
-      const elementsToIgnoreClicksOn = [this._dialogEl, this._pickerButtonEl];
-      if (!elementsToIgnoreClicksOn.some((element) => path.includes(element))) {
-        this._closePopup(false);
-      }
-    };
-    this._presentationValue = "";
-    this.value = "";
-  }
-  /**
-   * @internal
-   */
-  readOnlyChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.readOnly = this.readOnly;
-      this.validate();
-    }
-  }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    document.addEventListener("click", this.#dismissOnClickOutside);
-    this.addEventListener("focusin", this.#onFocusIn);
-    this.addEventListener("focusout", this.#onFocusOut);
-    this.#startObservingLocaleChanges();
-  }
-  /**
-   * @internal
-   */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.removeEventListener("click", this.#dismissOnClickOutside);
-    this.removeEventListener("focusin", this.#onFocusIn);
-    this.removeEventListener("focusout", this.#onFocusOut);
-    this.#stopObservingLocaleChanges();
-  }
-  #onFocusIn;
-  #onFocusOut;
-  /**
-   * @internal
-   */
-  validate() {
-    if (this.proxy) {
-      this.proxy.setCustomValidity(this._getCustomValidationError() ?? "");
-    }
-    super.validate(this._textFieldEl?.querySelector("input") ?? void 0);
-  }
-  #localeChangeHandler;
-  #localeChangeObserver;
-  #startObservingLocaleChanges() {
-    this.#localeChangeObserver = fastElement.Observable.binding(
-      () => this.locale,
-      this.#localeChangeHandler
-    );
-    this.#localeChangeObserver.observe(this, fastElement.ExecutionContext.default);
-  }
-  #stopObservingLocaleChanges() {
-    this.#localeChangeObserver.dispose();
-  }
-  #dismissOnClickOutside;
-  #openPopupIfPossible() {
-    if (!this.readOnly) {
-      this._popupOpen = true;
-    }
-  }
-  /**
-   * @internal
-   */
-  _closePopup(restoreFocusToTextField = true) {
-    this._popupOpen = false;
-    if (restoreFocusToTextField) {
-      this._textFieldEl.focus();
-    }
-  }
-  /**
-   * On keydown anywhere in the picker.
-   * @internal
-   */
-  _onBaseKeyDown(event) {
-    if (this._popupOpen && index.handleEscapeKeyAndStopPropogation(event)) {
-      this._closePopup();
-      return false;
-    }
-    if (this._trappedFocus(event, () => this._focusableElsWithinDialog())) {
-      return false;
-    }
-    return true;
-  }
-  /**
-   * @internal
-   */
-  _presentationValueChanged() {
-    this.dirtyValue = true;
-    this.validate();
-  }
-  /**
-   * @internal
-   */
-  _onTextFieldInput(event) {
-    const textField = event.currentTarget;
-    this._presentationValue = textField.value;
-  }
-  /**
-   * @internal
-   */
-  _onPickerButtonClick() {
-    if (this._popupOpen) {
-      this._closePopup();
-    } else {
-      this.#openPopupIfPossible();
-    }
-  }
-  // --- Dialog footer ---
-  /**
-   * @internal
-   */
-  _onOkClick() {
-    this._closePopup();
-  }
-  /**
-   * @internal
-   */
-  _onClearClick() {
-    this.$emit("clear-click");
-  }
-}
-__decorateClass([
-  fastElement.attr({ attribute: "readonly", mode: "boolean" })
-], PickerField.prototype, "readOnly");
-__decorateClass([
-  fastElement.observable
-], PickerField.prototype, "_popupOpen");
-__decorateClass([
-  fastElement.observable
-], PickerField.prototype, "_presentationValue");
-
-const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, padded }) => {
-  const popupTag = context.tagFor(popup_definition.Popup);
-  const textFieldTag = context.tagFor(textField_definition.VwcTextFieldElement);
-  const buttonTag = context.tagFor(button_definition.Button);
-  return fastElement.html`
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "readonly",
+	mode: "boolean"
+})], PickerField.prototype, "readOnly", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], PickerField.prototype, "_popupOpen", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], PickerField.prototype, "_presentationValue", void 0);
+//#endregion
+//#region src/shared/picker-field/picker-field.template.ts
+var PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, padded }) => {
+	const popupTag = context.tagFor(require_definition$1.Popup);
+	const textFieldTag = context.tagFor(require_definition$2.TextField);
+	const buttonTag = context.tagFor(require_definition.Button);
+	return _microsoft_fast_element.html`
 		<div class='base' @keydown='${(x, { event }) => x._onBaseKeyDown(event)}'>
 			<${textFieldTag} id='text-field'
-				${fastElement.ref("_textFieldEl")}
+				${(0, _microsoft_fast_element.ref)("_textFieldEl")}
 				class='control'
 				label='${(x) => x.label}'
 				helper-text='${(x) => x.helperText}'
@@ -219,16 +180,16 @@ const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, pad
 				<slot
 					slot='${(x) => x._helperTextSlottedContent?.length ? "helper-text" : void 0}'
 					name='helper-text'
-					${fastElement.slotted("_helperTextSlottedContent")}
+					${(0, _microsoft_fast_element.slotted)("_helperTextSlottedContent")}
 				></slot>
 				<slot
 					slot='${(x) => x._contextualHelpSlottedContent?.length ? "contextual-help" : void 0}'
 					name='contextual-help'
-					${fastElement.slotted("_contextualHelpSlottedContent")}
+					${(0, _microsoft_fast_element.slotted)("_contextualHelpSlottedContent")}
 				></slot>
 				<${buttonTag}
 					id='picker-button'
-					${fastElement.ref("_pickerButtonEl")}
+					${(0, _microsoft_fast_element.ref)("_pickerButtonEl")}
 					slot='action-items'
 					size='condensed'
 					icon='${(x) => x._pickerButtonIcon}'
@@ -244,14 +205,9 @@ const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, pad
 				offset='${(x) => x._helperTextSlottedContent?.length || x.helperText || x.errorValidationMessage ? 8 : null}'
 				placement='bottom-start'
 				class='popup'>
-				<div class="${() => fastWebUtilities.classNames("dialog", [
-    "dialog--padded",
-    padded
-  ])}" role='dialog' ${fastElement.ref(
-    "_dialogEl"
-  )} aria-modal='true' aria-label='${(x) => x._dialogLabel}'>
+				<div class="${() => (0, _microsoft_fast_web_utilities.classNames)("dialog", ["dialog--padded", padded])}" role='dialog' ${(0, _microsoft_fast_element.ref)("_dialogEl")} aria-modal='true' aria-label='${(x) => x._dialogLabel}'>
 					${() => popupContentTemplate}
-					<div class="${() => fastWebUtilities.classNames("footer", ["footer--with-separator", withSeparator])}">
+					<div class="${() => (0, _microsoft_fast_web_utilities.classNames)("footer", ["footer--with-separator", withSeparator])}">
 						<${buttonTag}
 							id='clear-button'
 							tabindex='3'
@@ -273,7 +229,22 @@ const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, pad
 			</${popupTag}>
 		</div>`;
 };
-
-exports.PickerField = PickerField;
-exports.PickerFieldTemplate = PickerFieldTemplate;
-exports.pickerFieldStyles = pickerFieldStyles;
+//#endregion
+Object.defineProperty(exports, "PickerField", {
+	enumerable: true,
+	get: function() {
+		return PickerField;
+	}
+});
+Object.defineProperty(exports, "PickerFieldTemplate", {
+	enumerable: true,
+	get: function() {
+		return PickerFieldTemplate;
+	}
+});
+Object.defineProperty(exports, "picker_field_default", {
+	enumerable: true,
+	get: function() {
+		return picker_field_default;
+	}
+});