@vonage/vivid 4.24.0 → 4.26.0

package/shared/definition19.js

@@ -1,11 +1,10 @@
 import { b as buttonDefinition } from './definition11.js';
-import { p as popupDefinition } from './definition65.js';
-import { t as textFieldDefinition } from './definition57.js';
+import { p as popupDefinition } from './definition67.js';
+import { t as textFieldDefinition } from './definition58.js';
 import { d as dividerDefinition } from './definition23.js';
-import { a as attr, o as observable, v as volatile, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
+import { a as attr, o as observable, v as volatile, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { a as PickerField, P as PickerFieldTemplate, p as pickerFieldStyles } from './picker-field.template.js';
 import { f as formatPresentationDate, p as parsePresentationDate, M as MinMaxCalendarPicker, C as CalendarPicker, i as isValidDateStr, b as compareDateStr, a as CalendarPickerTemplate, c as calendarStyles } from './calendar-picker.template.js';
-import { e as errorText, f as formElements } from './form-elements.js';
 
 const formatRange = (from, to) => {
   return `${from} – ${to}`;
@@ -29,9 +28,6 @@ const parsePresentationDateRange = (presentationDateRange, locale) => {
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
@@ -40,25 +36,18 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _isInternalValueUpdate, _DateRangePicker_instances, updateValues_fn, handleChangedValues_fn, updateFormValue_fn, getVisibleRange_fn;
 const isFormAssociatedTryingToSetFormValue = (value) => typeof value === "string";
 function isDefined(value) {
   return !!value;
 }
-let DateRangePicker = class extends MinMaxCalendarPicker(
+class DateRangePicker extends MinMaxCalendarPicker(
   CalendarPicker(PickerField)
 ) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _DateRangePicker_instances);
     this.initialStart = "";
     this.initialEnd = "";
-    __privateAdd(this, _isInternalValueUpdate, false);
+    this.#isInternalValueUpdate = false;
     this.start = "";
     this.end = "";
     /**
@@ -98,6 +87,7 @@ let DateRangePicker = class extends MinMaxCalendarPicker(
       this.dirtyValue = false;
     }
   }
+  #isInternalValueUpdate;
   /**
    * @internal
    */
@@ -108,8 +98,8 @@ let DateRangePicker = class extends MinMaxCalendarPicker(
     }
     this.currentStart = this.start;
     this.dirtyValue = true;
-    if (!__privateGet(this, _isInternalValueUpdate)) {
-      __privateMethod(this, _DateRangePicker_instances, handleChangedValues_fn).call(this);
+    if (!this.#isInternalValueUpdate) {
+      this.#handleChangedValues();
     }
   }
   /**
@@ -122,8 +112,8 @@ let DateRangePicker = class extends MinMaxCalendarPicker(
     }
     this.currentEnd = this.end;
     this.dirtyValue = true;
-    if (!__privateGet(this, _isInternalValueUpdate)) {
-      __privateMethod(this, _DateRangePicker_instances, handleChangedValues_fn).call(this);
+    if (!this.#isInternalValueUpdate) {
+      this.#handleChangedValues();
     }
   }
   /**
@@ -138,6 +128,38 @@ let DateRangePicker = class extends MinMaxCalendarPicker(
   currentEndChanged() {
     this.end = this.currentEnd;
   }
+  #updateValues(range) {
+    this.#isInternalValueUpdate = true;
+    if (range.start !== void 0) {
+      this.start = range.start;
+      this.$emit("input:start");
+    }
+    if (range.end !== void 0) {
+      this.end = range.end;
+      this.$emit("input:end");
+    }
+    this.#isInternalValueUpdate = false;
+    this.$emit("input");
+    this.$emit("change");
+    this.#handleChangedValues();
+  }
+  #handleChangedValues() {
+    if (this.start && this.end) {
+      if (compareDateStr(this.start, this.end) > 0) {
+        this.#updateValues({ start: this.end, end: this.start });
+        return;
+      }
+      this.value = formatRange(this.start, this.end);
+    } else {
+      this.value = "";
+    }
+    this._updatePresentationValue();
+    const dateToEnsureVisibilityOf = this.start || this.end;
+    if (dateToEnsureVisibilityOf) {
+      this._adjustSelectedMonthToEnsureVisibilityOf(dateToEnsureVisibilityOf);
+    }
+    this.#updateFormValue();
+  }
   /**
    * @internal
    */
@@ -159,7 +181,17 @@ let DateRangePicker = class extends MinMaxCalendarPicker(
    */
   nameChanged(previous, next) {
     super.nameChanged(previous, next);
-    __privateMethod(this, _DateRangePicker_instances, updateFormValue_fn).call(this);
+    this.#updateFormValue();
+  }
+  #updateFormValue() {
+    if (!this.name || !this.start || !this.end) {
+      this.setFormValue(null);
+    } else {
+      const formData = new FormData();
+      formData.append(this.name, this.start);
+      formData.append(this.name, this.end);
+      this.setFormValue(formData);
+    }
   }
   /**
    * @internal
@@ -173,6 +205,15 @@ let DateRangePicker = class extends MinMaxCalendarPicker(
       this.end = this.initialEnd;
     }
   }
+  #getVisibleRange() {
+    const candidates = [this.start, this.end].filter(isDefined);
+    const isPartialRange = candidates.length === 1;
+    if (this._hoverDate && isPartialRange) {
+      candidates.push(this._hoverDate);
+    }
+    const [start, end] = candidates.sort(compareDateStr);
+    return { start, end };
+  }
   /**
    * @internal
    */
@@ -183,7 +224,7 @@ let DateRangePicker = class extends MinMaxCalendarPicker(
    * @internal
    */
   _isDateInSelectedRange(date) {
-    const { start, end } = __privateMethod(this, _DateRangePicker_instances, getVisibleRange_fn).call(this);
+    const { start, end } = this.#getVisibleRange();
     if (start && end) {
       return compareDateStr(date, start) >= 0 && compareDateStr(date, end) <= 0;
     }
@@ -193,13 +234,13 @@ let DateRangePicker = class extends MinMaxCalendarPicker(
    * @internal
    */
   _isDateRangeStart(date) {
-    return date === __privateMethod(this, _DateRangePicker_instances, getVisibleRange_fn).call(this).start;
+    return date === this.#getVisibleRange().start;
   }
   /**
    * @internal
    */
   _isDateRangeEnd(date) {
-    return date === __privateMethod(this, _DateRangePicker_instances, getVisibleRange_fn).call(this).end;
+    return date === this.#getVisibleRange().end;
   }
   /**
    * @internal
@@ -219,15 +260,15 @@ let DateRangePicker = class extends MinMaxCalendarPicker(
    */
   _onDateClick(date) {
     if (this.start && this.end) {
-      __privateMethod(this, _DateRangePicker_instances, updateValues_fn).call(this, { start: date, end: "" });
+      this.#updateValues({ start: date, end: "" });
     } else if (this.start) {
-      __privateMethod(this, _DateRangePicker_instances, updateValues_fn).call(this, { end: date });
+      this.#updateValues({ end: date });
       this._closePopup();
     } else if (this.end) {
-      __privateMethod(this, _DateRangePicker_instances, updateValues_fn).call(this, { start: date });
+      this.#updateValues({ start: date });
       this._closePopup();
     } else {
-      __privateMethod(this, _DateRangePicker_instances, updateValues_fn).call(this, { start: date });
+      this.#updateValues({ start: date });
     }
   }
   /**
@@ -244,7 +285,7 @@ let DateRangePicker = class extends MinMaxCalendarPicker(
    */
   _onTextFieldChange() {
     if (this._presentationValue === "") {
-      __privateMethod(this, _DateRangePicker_instances, updateValues_fn).call(this, { start: "", end: "" });
+      this.#updateValues({ start: "", end: "" });
       return;
     }
     try {
@@ -252,10 +293,10 @@ let DateRangePicker = class extends MinMaxCalendarPicker(
         this._presentationValue,
         this.locale.calendarPicker
       );
-      __privateMethod(this, _DateRangePicker_instances, updateValues_fn).call(this, { start, end });
+      this.#updateValues({ start, end });
     } catch (_) {
       const invalidPresentationValue = this._presentationValue;
-      __privateMethod(this, _DateRangePicker_instances, updateValues_fn).call(this, { start: "", end: "" });
+      this.#updateValues({ start: "", end: "" });
       this._presentationValue = invalidPresentationValue;
       return;
     }
@@ -312,14 +353,14 @@ let DateRangePicker = class extends MinMaxCalendarPicker(
    * @internal
    */
   _onClearClick() {
-    __privateMethod(this, _DateRangePicker_instances, updateValues_fn).call(this, { start: "", end: "" });
+    this.#updateValues({ start: "", end: "" });
     super._onClearClick();
   }
   /**
    * @internal
    */
   formResetCallback() {
-    __privateMethod(this, _DateRangePicker_instances, updateValues_fn).call(this, { start: this.initialStart, end: this.initialEnd });
+    this.#updateValues({ start: this.initialStart, end: this.initialEnd });
     super.formResetCallback();
   }
   get _pickerButtonLabel() {
@@ -357,60 +398,7 @@ let DateRangePicker = class extends MinMaxCalendarPicker(
   get _pickerButtonIcon() {
     return "calendar-line";
   }
-};
-_isInternalValueUpdate = new WeakMap();
-_DateRangePicker_instances = new WeakSet();
-updateValues_fn = function(range) {
-  __privateSet(this, _isInternalValueUpdate, true);
-  if (range.start !== void 0) {
-    this.start = range.start;
-    this.$emit("input:start");
-  }
-  if (range.end !== void 0) {
-    this.end = range.end;
-    this.$emit("input:end");
-  }
-  __privateSet(this, _isInternalValueUpdate, false);
-  this.$emit("input");
-  this.$emit("change");
-  __privateMethod(this, _DateRangePicker_instances, handleChangedValues_fn).call(this);
-};
-handleChangedValues_fn = function() {
-  if (this.start && this.end) {
-    if (compareDateStr(this.start, this.end) > 0) {
-      __privateMethod(this, _DateRangePicker_instances, updateValues_fn).call(this, { start: this.end, end: this.start });
-      return;
-    }
-    this.value = formatRange(this.start, this.end);
-  } else {
-    this.value = "";
-  }
-  this._updatePresentationValue();
-  const dateToEnsureVisibilityOf = this.start || this.end;
-  if (dateToEnsureVisibilityOf) {
-    this._adjustSelectedMonthToEnsureVisibilityOf(dateToEnsureVisibilityOf);
-  }
-  __privateMethod(this, _DateRangePicker_instances, updateFormValue_fn).call(this);
-};
-updateFormValue_fn = function() {
-  if (!this.name || !this.start || !this.end) {
-    this.setFormValue(null);
-  } else {
-    const formData = new FormData();
-    formData.append(this.name, this.start);
-    formData.append(this.name, this.end);
-    this.setFormValue(formData);
-  }
-};
-getVisibleRange_fn = function() {
-  const candidates = [this.start, this.end].filter(isDefined);
-  const isPartialRange = candidates.length === 1;
-  if (this._hoverDate && isPartialRange) {
-    candidates.push(this._hoverDate);
-  }
-  const [start, end] = candidates.sort(compareDateStr);
-  return { start, end };
-};
+}
 __decorateClass([
   attr({ mode: "fromView", attribute: "start" })
 ], DateRangePicker.prototype, "initialStart", 2);
@@ -438,10 +426,6 @@ __decorateClass([
 __decorateClass([
   volatile
 ], DateRangePicker.prototype, "_pickerButtonLabel", 1);
-DateRangePicker = __decorateClass([
-  errorText,
-  formElements
-], DateRangePicker);
 
 const DateRangePickerTemplate = (context) => {
   return PickerFieldTemplate(context, CalendarPickerTemplate(context), {

package/shared/definition2.js

@@ -1,4 +1,4 @@
-import { V as VividElement, a as attr, o as observable, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { A as AccordionItem, a as accordionItemDefinition } from './definition.js';
 import { d as keyEnd, g as keyHome, f as keyArrowDown, e as keyArrowUp } from './key-codes.js';
 import { w as wrapInBounds } from './numbers.js';

package/shared/definition20.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
-const definition$1 = require('./definition65.cjs');
+const definition$1 = require('./definition67.cjs');
 const definition = require('./definition11.cjs');
-const definition$2 = require('./definition57.cjs');
+const definition$2 = require('./definition58.cjs');
 const definition$3 = require('./definition23.cjs');
 const pickerField_template = require('./picker-field.template.cjs');
 const calendarPicker_template = require('./calendar-picker.template.cjs');
@@ -10,7 +10,6 @@ const vividElement = require('./vivid-element.cjs');
 const timeSelectionPicker_template = require('./time-selection-picker.template.cjs');
 const singleValuePicker = require('./single-value-picker.cjs');
 const singleDatePicker = require('./single-date-picker.cjs');
-const formElements = require('./form-elements.cjs');
 
 const styles = ".date-time-picker{display:flex;gap:28px;padding-inline-start:12px}.time-picker{padding-block:4px 12px}";
 
@@ -37,13 +36,12 @@ const parsePresentationDateTime = (presentationDateTime, locale, use12HourClock)
 };
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
   return result;
 };
 const ValidDateTimeFilter = {
@@ -57,7 +55,7 @@ const ValidDateTimeFilter = {
     return value;
   }
 };
-exports.DateTimePicker = class DateTimePicker extends timeSelectionPicker_template.TimeSelectionPicker(
+class DateTimePicker extends timeSelectionPicker_template.TimeSelectionPicker(
   singleDatePicker.SingleDatePickerMixin(singleValuePicker.SingleValuePicker(calendarPicker_template.CalendarPicker(pickerField_template.PickerField)))
 ) {
   constructor() {
@@ -217,29 +215,25 @@ exports.DateTimePicker = class DateTimePicker extends timeSelectionPicker_templa
   get _dialogLabel() {
     return this.locale.dateTimePicker.chooseDateTimeLabel;
   }
-};
+}
 __decorateClass([
   vividElement.attr({ converter: ValidDateTimeFilter })
-], exports.DateTimePicker.prototype, "min", 2);
+], DateTimePicker.prototype, "min");
 __decorateClass([
   vividElement.attr({ converter: timeSelectionPicker_template.ValidTimeFilter, attribute: "min-time" })
-], exports.DateTimePicker.prototype, "minTime", 2);
+], DateTimePicker.prototype, "minTime");
 __decorateClass([
   vividElement.attr({ converter: calendarPicker_template.ValidDateFilter, attribute: "min-date" })
-], exports.DateTimePicker.prototype, "minDate", 2);
+], DateTimePicker.prototype, "minDate");
 __decorateClass([
   vividElement.attr({ converter: ValidDateTimeFilter })
-], exports.DateTimePicker.prototype, "max", 2);
+], DateTimePicker.prototype, "max");
 __decorateClass([
   vividElement.attr({ converter: timeSelectionPicker_template.ValidTimeFilter, attribute: "max-time" })
-], exports.DateTimePicker.prototype, "maxTime", 2);
+], DateTimePicker.prototype, "maxTime");
 __decorateClass([
   vividElement.attr({ converter: calendarPicker_template.ValidDateFilter, attribute: "max-date" })
-], exports.DateTimePicker.prototype, "maxDate", 2);
-exports.DateTimePicker = __decorateClass([
-  formElements.errorText,
-  formElements.formElements
-], exports.DateTimePicker);
+], DateTimePicker.prototype, "maxDate");
 
 const DateTimePickerTemplate = (context) => {
   return pickerField_template.PickerFieldTemplate(
@@ -261,7 +255,7 @@ const DateTimePickerTemplate = (context) => {
 
 const dateTimePickerDefinition = vividElement.defineVividComponent(
   "date-time-picker",
-  exports.DateTimePicker,
+  DateTimePicker,
   DateTimePickerTemplate,
   [
     definition.buttonDefinition,
@@ -281,5 +275,6 @@ const registerDateTimePicker = vividElement.createRegisterFunction(
   dateTimePickerDefinition
 );
 
+exports.DateTimePicker = DateTimePicker;
 exports.dateTimePickerDefinition = dateTimePickerDefinition;
 exports.registerDateTimePicker = registerDateTimePicker;

package/shared/definition20.js

@@ -1,14 +1,13 @@
-import { p as popupDefinition } from './definition65.js';
+import { p as popupDefinition } from './definition67.js';
 import { b as buttonDefinition } from './definition11.js';
-import { t as textFieldDefinition } from './definition57.js';
+import { t as textFieldDefinition } from './definition58.js';
 import { d as dividerDefinition } from './definition23.js';
 import { a as PickerField, P as PickerFieldTemplate, p as pickerFieldStyles } from './picker-field.template.js';
 import { i as isValidDateStr, f as formatPresentationDate, p as parsePresentationDate, C as CalendarPicker, d as currentDateStr, b as compareDateStr, V as ValidDateFilter, a as CalendarPickerTemplate, c as calendarStyles } from './calendar-picker.template.js';
-import { a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
+import { a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { b as isValidTimeStr, f as formatPresentationTime, p as parsePresentationTime, c as TimeSelectionPicker, d as compareTimeStr, V as ValidTimeFilter, a as TimeSelectionPickerTemplate, i as inlineTimePickerDefinition } from './time-selection-picker.template.js';
 import { S as SingleValuePicker } from './single-value-picker.js';
 import { S as SingleDatePickerMixin } from './single-date-picker.js';
-import { e as errorText, f as formElements } from './form-elements.js';
 
 const styles = ".date-time-picker{display:flex;gap:28px;padding-inline-start:12px}.time-picker{padding-block:4px 12px}";
 
@@ -35,13 +34,12 @@ const parsePresentationDateTime = (presentationDateTime, locale, use12HourClock)
 };
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
   return result;
 };
 const ValidDateTimeFilter = {
@@ -55,7 +53,7 @@ const ValidDateTimeFilter = {
     return value;
   }
 };
-let DateTimePicker = class extends TimeSelectionPicker(
+class DateTimePicker extends TimeSelectionPicker(
   SingleDatePickerMixin(SingleValuePicker(CalendarPicker(PickerField)))
 ) {
   constructor() {
@@ -215,29 +213,25 @@ let DateTimePicker = class extends TimeSelectionPicker(
   get _dialogLabel() {
     return this.locale.dateTimePicker.chooseDateTimeLabel;
   }
-};
+}
 __decorateClass([
   attr({ converter: ValidDateTimeFilter })
-], DateTimePicker.prototype, "min", 2);
+], DateTimePicker.prototype, "min");
 __decorateClass([
   attr({ converter: ValidTimeFilter, attribute: "min-time" })
-], DateTimePicker.prototype, "minTime", 2);
+], DateTimePicker.prototype, "minTime");
 __decorateClass([
   attr({ converter: ValidDateFilter, attribute: "min-date" })
-], DateTimePicker.prototype, "minDate", 2);
+], DateTimePicker.prototype, "minDate");
 __decorateClass([
   attr({ converter: ValidDateTimeFilter })
-], DateTimePicker.prototype, "max", 2);
+], DateTimePicker.prototype, "max");
 __decorateClass([
   attr({ converter: ValidTimeFilter, attribute: "max-time" })
-], DateTimePicker.prototype, "maxTime", 2);
+], DateTimePicker.prototype, "maxTime");
 __decorateClass([
   attr({ converter: ValidDateFilter, attribute: "max-date" })
-], DateTimePicker.prototype, "maxDate", 2);
-DateTimePicker = __decorateClass([
-  errorText,
-  formElements
-], DateTimePicker);
+], DateTimePicker.prototype, "maxDate");
 
 const DateTimePickerTemplate = (context) => {
   return PickerFieldTemplate(

package/shared/definition21.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const definition = require('./definition11.cjs');
-const definition$2 = require('./definition57.cjs');
+const definition$2 = require('./definition58.cjs');
 const vividElement = require('./vivid-element.cjs');
 const definition$1 = require('./definition28.cjs');
 const localized = require('./localized.cjs');
@@ -43,6 +43,7 @@ class DialPad extends localized.Localized(vividElement.VividElement) {
     this._onDial = () => {
       this.callActive ? this.$emit("end-call") : this.$emit("dial");
     };
+    this.autofocus = false;
   }
   valueChanged(_oldValue, newValue) {
     if (newValue !== void 0 && newValue !== null && this._textFieldEl && newValue !== this._textFieldEl.value) {
@@ -50,6 +51,16 @@ class DialPad extends localized.Localized(vividElement.VividElement) {
       this._textFieldEl.reportValidity();
     }
   }
+  /**
+   * Moves focus into the diapl-pad.
+   *
+   * @public
+   */
+  focus() {
+    const digitBtns = this.shadowRoot?.querySelectorAll(".digits .digit-btn");
+    const firstFocusableEl = this._textFieldEl || digitBtns?.[0];
+    firstFocusableEl?.focus();
+  }
 }
 __decorateClass([
   vividElement.attr({ attribute: "helper-text" })
@@ -84,6 +95,9 @@ __decorateClass([
 __decorateClass([
   vividElement.attr({ attribute: "call-button-label" })
 ], DialPad.prototype, "callButtonLabel");
+__decorateClass([
+  vividElement.attr({ mode: "boolean" })
+], DialPad.prototype, "autofocus");
 
 class DialPadButton {
   constructor(value, label, ariaLabel, icon, id) {
@@ -149,7 +163,7 @@ function deleteLastCharacter(dialPad) {
   dialPad.$emit("input");
   dialPad.$emit("change");
   if (dialPad.value === "") {
-    dialPad._textFieldEl.focus();
+    dialPad._textFieldEl?.focus();
   }
 }
 function renderTextField(textFieldTag, buttonTag) {
@@ -164,14 +178,15 @@ function renderTextField(textFieldTag, buttonTag) {
 			@change="${syncFieldAndPadValues}"
 			@focus="${stopPropagation}"
 			@blur="${stopPropagation}"
+			?autofocus="${(x) => x.autofocus}"
 			>
          ${when.when(
     (x) => x.value && x.value.length && x.value.length > 0,
     vividElement.html`<${buttonTag}
-                				slot="action-items"
+                slot="action-items"
 								size='super-condensed'
 								icon="backspace-line"
-								aria-label="${(x) => x.deleteAriaLabel || x.locale.dialPad.deleteLabel}"
+								aria-label="${(x) => x.deleteAriaLabel || x.locale.dialPad.deleteButtonLabel}"
 								appearance='ghost'
 								?disabled="${(x) => x.disabled || x.callActive}"
 								@click="${(x) => deleteLastCharacter(x)}">
@@ -199,6 +214,7 @@ function renderDigits(buttonTag, iconTag) {
 					  label="${(x) => x.label === "&nbsp;" ? " " : x.label}"
 					  size='condensed'
 					  class="digit-btn"
+						?autofocus="${(_, c) => c.parent.autofocus && c.parent.noInput && c.index === 0}"
 					  aria-label="${(x, c) => c.parent.locale.dialPad[x.ariaLabel]}"
 					  ?disabled="${(_, c) => c.parent.disabled}"
 					  @click="${onDigitClick}">
@@ -206,7 +222,10 @@ function renderDigits(buttonTag, iconTag) {
 									name="${(x) => x.icon}"
 									class="digit-btn-num"></${iconTag}>
 					</${buttonTag}>
-		`
+		`,
+    {
+      positioning: true
+    }
   )}
 	`;
 }

package/shared/definition21.js

@@ -1,6 +1,6 @@
 import { B as Button, b as buttonDefinition } from './definition11.js';
-import { T as TextField, t as textFieldDefinition } from './definition57.js';
-import { V as VividElement, a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
+import { T as TextField, t as textFieldDefinition } from './definition58.js';
+import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { I as Icon, i as iconDefinition } from './definition28.js';
 import { L as Localized } from './localized.js';
 import { c as classNames } from './class-names.js';
@@ -41,6 +41,7 @@ class DialPad extends Localized(VividElement) {
     this._onDial = () => {
       this.callActive ? this.$emit("end-call") : this.$emit("dial");
     };
+    this.autofocus = false;
   }
   valueChanged(_oldValue, newValue) {
     if (newValue !== void 0 && newValue !== null && this._textFieldEl && newValue !== this._textFieldEl.value) {
@@ -48,6 +49,16 @@ class DialPad extends Localized(VividElement) {
       this._textFieldEl.reportValidity();
     }
   }
+  /**
+   * Moves focus into the diapl-pad.
+   *
+   * @public
+   */
+  focus() {
+    const digitBtns = this.shadowRoot?.querySelectorAll(".digits .digit-btn");
+    const firstFocusableEl = this._textFieldEl || digitBtns?.[0];
+    firstFocusableEl?.focus();
+  }
 }
 __decorateClass([
   attr({ attribute: "helper-text" })
@@ -82,6 +93,9 @@ __decorateClass([
 __decorateClass([
   attr({ attribute: "call-button-label" })
 ], DialPad.prototype, "callButtonLabel");
+__decorateClass([
+  attr({ mode: "boolean" })
+], DialPad.prototype, "autofocus");
 
 class DialPadButton {
   constructor(value, label, ariaLabel, icon, id) {
@@ -147,7 +161,7 @@ function deleteLastCharacter(dialPad) {
   dialPad.$emit("input");
   dialPad.$emit("change");
   if (dialPad.value === "") {
-    dialPad._textFieldEl.focus();
+    dialPad._textFieldEl?.focus();
   }
 }
 function renderTextField(textFieldTag, buttonTag) {
@@ -162,14 +176,15 @@ function renderTextField(textFieldTag, buttonTag) {
 			@change="${syncFieldAndPadValues}"
 			@focus="${stopPropagation}"
 			@blur="${stopPropagation}"
+			?autofocus="${(x) => x.autofocus}"
 			>
          ${when(
     (x) => x.value && x.value.length && x.value.length > 0,
     html`<${buttonTag}
-                				slot="action-items"
+                slot="action-items"
 								size='super-condensed'
 								icon="backspace-line"
-								aria-label="${(x) => x.deleteAriaLabel || x.locale.dialPad.deleteLabel}"
+								aria-label="${(x) => x.deleteAriaLabel || x.locale.dialPad.deleteButtonLabel}"
 								appearance='ghost'
 								?disabled="${(x) => x.disabled || x.callActive}"
 								@click="${(x) => deleteLastCharacter(x)}">
@@ -197,6 +212,7 @@ function renderDigits(buttonTag, iconTag) {
 					  label="${(x) => x.label === "&nbsp;" ? " " : x.label}"
 					  size='condensed'
 					  class="digit-btn"
+						?autofocus="${(_, c) => c.parent.autofocus && c.parent.noInput && c.index === 0}"
 					  aria-label="${(x, c) => c.parent.locale.dialPad[x.ariaLabel]}"
 					  ?disabled="${(_, c) => c.parent.disabled}"
 					  @click="${onDigitClick}">
@@ -204,7 +220,10 @@ function renderDigits(buttonTag, iconTag) {
 									name="${(x) => x.icon}"
 									class="digit-btn-num"></${iconTag}>
 					</${buttonTag}>
-		`
+		`,
+    {
+      positioning: true
+    }
   )}
 	`;
 }