@vonage/vivid 4.31.0 → 5.1.0

package/date-time-picker/index.js

@@ -1,3 +1,216 @@
-import { r as registerDateTimePicker } from '../shared/definition20.js';
-
-registerDateTimePicker();
+import { p as v } from "../bundled/definition9.js";
+import { b as k } from "../bundled/definition3.js";
+import { t as x } from "../bundled/definition13.js";
+import { d as V } from "../bundled/definition14.js";
+import { P as S, a as g, p as M } from "../bundled/picker-field.template.js";
+import { i as y, f as h, p as b, C as F, d as $, b as u, V as _, a as C, c as E } from "../bundled/calendar-picker.template.js";
+import { a as l, h as w, c as L, d as B } from "../bundled/vivid-element.js";
+import { i as A, f as p, p as j, T as I, c as T, V as P, a as O, b as U } from "../bundled/time-selection-picker.template.js";
+import { v as q } from "../bundled/definition12.js";
+import { S as z } from "../bundled/single-value-picker.js";
+import { S as H } from "../bundled/single-date-picker.js";
+const R = ".date-time-picker{display:flex;gap:28px;padding-inline-start:12px}.time-picker{padding-block:4px 12px}", o = (e) => e.split("T")[0] || "", d = (e) => e.split("T")[1] || "", f = (e) => {
+  const [t = "", a = ""] = e.split("T");
+  return y(t) && A(a);
+}, W = (e, t, a, m) => {
+  const [i, r] = e.split("T");
+  return `${h(i, t)} ${p(
+    r,
+    a,
+    m
+  )}`;
+}, G = (e, t, a) => {
+  const [m, ...i] = e.split(" "), r = b(m, t), c = j(i.join(" "), a);
+  return `${r}T${c}`;
+};
+var J = Object.defineProperty, n = (e, t, a, m) => {
+  for (var i = void 0, r = e.length - 1, c; r >= 0; r--)
+    (c = e[r]) && (i = c(t, a, i) || i);
+  return i && J(t, a, i), i;
+};
+const D = {
+  fromView: (e) => e && f(e) ? e : "",
+  toView(e) {
+    return e;
+  }
+};
+class s extends I(
+  H(z(F(S)))
+) {
+  constructor() {
+    super(), this._isValidValue = f, this._textFieldSize = "30", this.proxy.type = "datetime-local", this.proxy.step = "1", this.min = "", this.minDate = "", this.minTime = "", this.max = "", this.maxDate = "", this.maxTime = "";
+  }
+  get _resolvedMinDate() {
+    return this.minDate || o(this.min);
+  }
+  get _resolvedMaxDate() {
+    return this.maxDate || o(this.max);
+  }
+  get _resolvedMinTime() {
+    return this.minTime || this.min && o(this.min) === this._dateValue() && d(this.min) || "";
+  }
+  get _resolvedMaxTime() {
+    return this.maxTime || this.max && o(this.max) === this._dateValue() && d(this.max) || "";
+  }
+  /**
+   * @internal
+   */
+  _toPresentationValue(t) {
+    return W(
+      t,
+      this.locale.calendarPicker,
+      this._displaySeconds,
+      this._use12hClock
+    );
+  }
+  /**
+   * @internal
+   */
+  _parsePresentationValue(t) {
+    return G(
+      t,
+      this.locale.calendarPicker,
+      this._use12hClock
+    );
+  }
+  /**
+   * @internal
+   */
+  _dateValue() {
+    return o(this.value);
+  }
+  /**
+   * @internal
+   */
+  _withUpdatedDate(t) {
+    return `${t}T${d(this.value) || "00:00:00"}`;
+  }
+  /**
+   * @internal
+   */
+  get _timeValue() {
+    return d(this.value);
+  }
+  /**
+   * @internal
+   */
+  _withUpdatedTime(t) {
+    return `${o(this.value) || $()}T${t}`;
+  }
+  /**
+   * @internal
+   */
+  _getCustomValidationError() {
+    return this._isPresentationValueInvalid() ? this.locale.dateTimePicker.invalidDateTimeError : this._dateValue() && this._resolvedMinDate && u(this._dateValue(), this._resolvedMinDate) < 0 ? this.locale.dateTimePicker.dateBeforeMinDateError(
+      h(
+        this._resolvedMinDate,
+        this.locale.calendarPicker
+      )
+    ) : this._dateValue() && this._resolvedMaxDate && u(this._dateValue(), this._resolvedMaxDate) > 0 ? this.locale.dateTimePicker.dateAfterMaxDateError(
+      h(
+        this._resolvedMaxDate,
+        this.locale.calendarPicker
+      )
+    ) : this._timeValue && this._resolvedMinTime && T(this._timeValue, this._resolvedMinTime) < 0 ? this.locale.dateTimePicker.timeBeforeMinTimeError(
+      p(
+        this._resolvedMinTime,
+        this._displaySeconds,
+        this._use12hClock
+      )
+    ) : this._timeValue && this._resolvedMaxTime && T(this._timeValue, this._resolvedMaxTime) > 0 ? this.locale.dateTimePicker.timeAfterMaxTimeError(
+      p(
+        this._resolvedMaxTime,
+        this._displaySeconds,
+        this._use12hClock
+      )
+    ) : null;
+  }
+  /**
+   * @internal
+   */
+  get _textFieldPlaceholder() {
+    return `${this.locale.calendarPicker.dateFormatPlaceholder} ${this._timePlaceholder}`;
+  }
+  /**
+   * @internal
+   */
+  get _pickerButtonLabel() {
+    return this.value ? this.locale.dateTimePicker.changeDateTimeLabel(
+      this._toPresentationValue(this.value)
+    ) : this.locale.dateTimePicker.chooseDateTimeLabel;
+  }
+  /**
+   * @internal
+   */
+  _focusableElsWithinDialog() {
+    return this._dialogEl.querySelectorAll(
+      "#inline-time-picker, button, .vwc-button"
+    );
+  }
+  /**
+   * @internal
+   */
+  get _pickerButtonIcon() {
+    return "calendar-clock-line";
+  }
+  /**
+   * @internal
+   */
+  get _dialogLabel() {
+    return this.locale.dateTimePicker.chooseDateTimeLabel;
+  }
+}
+n([
+  l({ converter: D })
+], s.prototype, "min");
+n([
+  l({ converter: P, attribute: "min-time" })
+], s.prototype, "minTime");
+n([
+  l({ converter: _, attribute: "min-date" })
+], s.prototype, "minDate");
+n([
+  l({ converter: D })
+], s.prototype, "max");
+n([
+  l({ converter: P, attribute: "max-time" })
+], s.prototype, "maxTime");
+n([
+  l({ converter: _, attribute: "max-date" })
+], s.prototype, "maxDate");
+const K = (e) => g(
+  e,
+  w`
+			<div class="date-time-picker">
+				${() => C(e)}
+				<div class="time-picker">
+					${() => O(e, 9)}
+				</div>
+			</div>
+		`,
+  {
+    withSeparator: !1,
+    padded: !1
+  }
+), N = B(
+  "date-time-picker",
+  s,
+  K,
+  [
+    k,
+    v,
+    x,
+    V,
+    U,
+    q
+  ],
+  {
+    styles: [M, E, R],
+    shadowOptions: {
+      delegatesFocus: !0
+    }
+  }
+), Q = L(
+  N
+);
+Q();

package/{shared/definition21.cjs → dial-pad/definition.cjs}

@@ -1,17 +1,16 @@
 'use strict';
 
-const definition = require('./definition11.cjs');
-const definition$2 = require('./definition58.cjs');
-const vividElement = require('./vivid-element.cjs');
-const definition$1 = require('./definition28.cjs');
-const localized = require('./localized.cjs');
-const classNames = require('./class-names.cjs');
-const when = require('./when.cjs');
-const repeat = require('./repeat.cjs');
-const ref = require('./ref.cjs');
-const keyCodes = require('./key-codes.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const styles = ":host{display:inline-block;margin:16px;inline-size:230px}.base{display:grid;box-sizing:border-box;grid-template-rows:80px 1fr auto}.base.no-input{grid-template-rows:1fr auto}.digits{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inline-size:100%}.phone-field{align-self:flex-start;grid-column:1/-1}.digit-btn{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.digit-btn:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.digit-btn:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast: var(--vvd-dial-pad-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-dial-pad-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-dial-pad-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-dial-pad-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-dial-pad-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-dial-pad-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-dial-pad-accent-dim, var(--vvd-color-neutral-200))}.digit-btn{--vvd-button-accent-firm: var(--_appearance-color-text);display:flex;overflow:hidden;flex-direction:column;border-radius:16px;box-shadow:0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.digit-btn:focus-within{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.call-btn{margin-top:32px;grid-column:1/-1}";
+const button_definition = require('../unbundled/definition.cjs');
+const textField_definition = require('../text-field/definition.cjs');
+const vividElement = require('../unbundled/vivid-element.cjs');
+const icon_definition = require('../icon/definition.cjs');
+const fastElement = require('@microsoft/fast-element');
+const localized = require('../unbundled/localized.cjs');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+
+const styles = ":host{display:inline-block;margin:16px;inline-size:230px}.base{display:grid;box-sizing:border-box;grid-template-rows:80px 1fr auto}.base.no-input{grid-template-rows:1fr auto}.digits{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inline-size:100%}.phone-field{align-self:flex-start;grid-column:1/-1}.digit-btn{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.digit-btn:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.digit-btn.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.digit-btn:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast: var(--vvd-dial-pad-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-dial-pad-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-dial-pad-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-dial-pad-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-dial-pad-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-dial-pad-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-dial-pad-accent-dim, var(--vvd-color-neutral-200))}.digit-btn{--vvd-button-accent-firm: var(--_appearance-color-text);display:flex;overflow:hidden;flex-direction:column;border-radius:16px;box-shadow:0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.digit-btn:focus-within{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.call-btn{margin-top:32px;grid-column:1/-1}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -63,40 +62,40 @@ class DialPad extends localized.Localized(vividElement.VividElement) {
   }
 }
 __decorateClass([
-  vividElement.attr({ attribute: "helper-text" })
+  fastElement.attr({ attribute: "helper-text" })
 ], DialPad.prototype, "helperText");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], DialPad.prototype, "placeholder");
 __decorateClass([
-  vividElement.attr({ mode: "fromView" })
+  fastElement.attr({ mode: "fromView" })
 ], DialPad.prototype, "value");
 __decorateClass([
-  vividElement.attr({ mode: "fromView" })
+  fastElement.attr({ mode: "fromView" })
 ], DialPad.prototype, "pattern");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], DialPad.prototype, "disabled");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], DialPad.prototype, "pending");
 __decorateClass([
-  vividElement.attr({ attribute: "call-active", mode: "boolean" })
+  fastElement.attr({ attribute: "call-active", mode: "boolean" })
 ], DialPad.prototype, "callActive");
 __decorateClass([
-  vividElement.attr({ mode: "boolean", attribute: "no-call" })
+  fastElement.attr({ mode: "boolean", attribute: "no-call" })
 ], DialPad.prototype, "noCall");
 __decorateClass([
-  vividElement.attr({ mode: "boolean", attribute: "no-input" })
+  fastElement.attr({ mode: "boolean", attribute: "no-input" })
 ], DialPad.prototype, "noInput");
 __decorateClass([
-  vividElement.attr({ attribute: "end-call-button-label" })
+  fastElement.attr({ attribute: "end-call-button-label" })
 ], DialPad.prototype, "endCallButtonLabel");
 __decorateClass([
-  vividElement.attr({ attribute: "call-button-label" })
+  fastElement.attr({ attribute: "call-button-label" })
 ], DialPad.prototype, "callButtonLabel");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], DialPad.prototype, "autofocus");
 
 class DialPadButton {
@@ -134,9 +133,9 @@ const DIAL_PAD_BUTTONS = [
     "btnHashtag"
   )
 ];
-const getClasses = ({ noInput }) => classNames.classNames("base", ["no-input", Boolean(noInput)]);
+const getClasses = ({ noInput }) => fastWebUtilities.classNames("base", ["no-input", Boolean(noInput)]);
 function handleKeyDown(x, e) {
-  if (e.key === keyCodes.keyEnter && !x.pending && !x.disabled && !x.callActive && !x.noCall && x.value.length > 0 && e.target instanceof HTMLInputElement) {
+  if (e.key === fastWebUtilities.keyEnter && !x.pending && !x.disabled && !x.callActive && !x.noCall && x.value.length > 0 && e.target instanceof HTMLInputElement) {
     x._onDial();
   } else {
     const elementIndex = DIAL_PAD_BUTTONS.findIndex((x2) => x2.value === e.key);
@@ -167,7 +166,7 @@ function deleteLastCharacter(dialPad) {
   }
 }
 function renderTextField(textFieldTag, buttonTag) {
-  return vividElement.html`<${textFieldTag} ${ref.ref(
+  return fastElement.html`<${textFieldTag} ${fastElement.ref(
     "_textFieldEl"
   )} class="phone-field" internal-part type="tel"
         value="${(x) => x.value}" placeholder="${(x) => x.placeholder}"
@@ -180,9 +179,9 @@ function renderTextField(textFieldTag, buttonTag) {
 			@blur="${stopPropagation}"
 			?autofocus="${(x) => x.autofocus}"
 			>
-         ${when.when(
+         ${fastElement.when(
     (x) => x.value && x.value.length && x.value.length > 0,
-    vividElement.html`<${buttonTag}
+    fastElement.html`<${buttonTag}
                 slot="action-items"
 								size='super-condensed'
 								icon="backspace-line"
@@ -201,10 +200,10 @@ function onDigitClick(digit, { parent: dialPad, event }) {
   dialPad.$emit("change");
 }
 function renderDigits(buttonTag, iconTag) {
-  return vividElement.html`
-		${repeat.repeat(
+  return fastElement.html`
+		${fastElement.repeat(
     (_) => DIAL_PAD_BUTTONS,
-    vividElement.html`
+    fastElement.html`
 			<${buttonTag}
 					  id="${(x) => x.id}"
 					  value="${(x) => x.value}"
@@ -230,7 +229,7 @@ function renderDigits(buttonTag, iconTag) {
 	`;
 }
 function renderDialButton(buttonTag) {
-  return vividElement.html`<${buttonTag} class="call-btn"
+  return fastElement.html`<${buttonTag} class="call-btn"
         size="expanded"
         appearance="filled"
         icon="${(x) => x.callActive ? "disable-call-line" : "call-line"}"
@@ -242,13 +241,13 @@ function renderDialButton(buttonTag) {
     </${buttonTag}>`;
 }
 const DialPadTemplate = (context) => {
-  const buttonTag = context.tagFor(definition.Button);
-  const iconTag = context.tagFor(definition$1.Icon);
-  const textFieldTag = context.tagFor(definition$2.TextField);
-  return vividElement.html` <div class="${getClasses}">
-		${when.when((x) => !x.noInput, renderTextField(textFieldTag, buttonTag))}
+  const buttonTag = context.tagFor(button_definition.Button);
+  const iconTag = context.tagFor(icon_definition.VwcIconElement);
+  const textFieldTag = context.tagFor(textField_definition.VwcTextFieldElement);
+  return fastElement.html` <div class="${getClasses}">
+		${fastElement.when((x) => !x.noInput, renderTextField(textFieldTag, buttonTag))}
 		<div class="digits">${renderDigits(buttonTag, iconTag)}</div>
-		${when.when((x) => !x.noCall, renderDialButton(buttonTag))}
+		${fastElement.when((x) => !x.noCall, renderDialButton(buttonTag))}
 	</div>`;
 };
 
@@ -256,13 +255,13 @@ const dialPadDefinition = vividElement.defineVividComponent(
   "dial-pad",
   DialPad,
   DialPadTemplate,
-  [definition.buttonDefinition, definition$2.textFieldDefinition, definition$1.iconDefinition],
+  [button_definition.buttonDefinition, textField_definition.textFieldDefinition, icon_definition.iconDefinition],
   {
     styles
   }
 );
 const registerDialPad = vividElement.createRegisterFunction(dialPadDefinition);
 
-exports.DialPad = DialPad;
+exports.VwcDialPadElement = DialPad;
 exports.dialPadDefinition = dialPadDefinition;
 exports.registerDialPad = registerDialPad;

package/{shared/definition21.js → dial-pad/definition.js}

@@ -1,15 +1,12 @@
-import { B as Button, b as buttonDefinition } from './definition11.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';
-import { w as when } from './when.js';
-import { r as repeat } from './repeat.js';
-import { r as ref } from './ref.js';
-import { k as keyEnter } from './key-codes.js';
+import { B as Button, b as buttonDefinition } from '../unbundled/definition.js';
+import { VwcTextFieldElement as TextField, textFieldDefinition } from '../text-field/definition.js';
+import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
+import { attr, when, html, repeat, ref } from '@microsoft/fast-element';
+import { L as Localized } from '../unbundled/localized.js';
+import { classNames, keyEnter } from '@microsoft/fast-web-utilities';
 
-const styles = ":host{display:inline-block;margin:16px;inline-size:230px}.base{display:grid;box-sizing:border-box;grid-template-rows:80px 1fr auto}.base.no-input{grid-template-rows:1fr auto}.digits{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inline-size:100%}.phone-field{align-self:flex-start;grid-column:1/-1}.digit-btn{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.digit-btn:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.digit-btn:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast: var(--vvd-dial-pad-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-dial-pad-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-dial-pad-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-dial-pad-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-dial-pad-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-dial-pad-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-dial-pad-accent-dim, var(--vvd-color-neutral-200))}.digit-btn{--vvd-button-accent-firm: var(--_appearance-color-text);display:flex;overflow:hidden;flex-direction:column;border-radius:16px;box-shadow:0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.digit-btn:focus-within{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.call-btn{margin-top:32px;grid-column:1/-1}";
+const styles = ":host{display:inline-block;margin:16px;inline-size:230px}.base{display:grid;box-sizing:border-box;grid-template-rows:80px 1fr auto}.base.no-input{grid-template-rows:1fr auto}.digits{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inline-size:100%}.phone-field{align-self:flex-start;grid-column:1/-1}.digit-btn{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.digit-btn:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.digit-btn.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.digit-btn:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast: var(--vvd-dial-pad-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-dial-pad-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-dial-pad-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-dial-pad-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-dial-pad-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-dial-pad-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-dial-pad-accent-dim, var(--vvd-color-neutral-200))}.digit-btn{--vvd-button-accent-firm: var(--_appearance-color-text);display:flex;overflow:hidden;flex-direction:column;border-radius:16px;box-shadow:0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.digit-btn:focus-within{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.call-btn{margin-top:32px;grid-column:1/-1}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -261,4 +258,4 @@ const dialPadDefinition = defineVividComponent(
 );
 const registerDialPad = createRegisterFunction(dialPadDefinition);
 
-export { DialPad as D, dialPadDefinition as d, registerDialPad as r };
+export { DialPad as VwcDialPadElement, dialPadDefinition, registerDialPad };

package/dial-pad/index.cjs

@@ -1,5 +1,54 @@
-'use strict';
-
-const definition = require('../shared/definition21.cjs');
-
-definition.registerDialPad();
+"use strict";const b=require("../bundled/definition3.cjs"),f=require("../bundled/definition13.cjs"),l=require("../bundled/vivid-element.cjs"),h=require("../bundled/definition2.cjs"),m=require("../bundled/localized.cjs"),$=require("../bundled/class-names.cjs"),s=require("../bundled/when.cjs"),_=require("../bundled/repeat.cjs"),x=require("../bundled/ref.cjs"),y=require("../bundled/key-codes.cjs"),w=":host{display:inline-block;margin:16px;inline-size:230px}.base{display:grid;box-sizing:border-box;grid-template-rows:80px 1fr auto}.base.no-input{grid-template-rows:1fr auto}.digits{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inline-size:100%}.phone-field{align-self:flex-start;grid-column:1/-1}.digit-btn{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.digit-btn:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.digit-btn.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.digit-btn:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast: var(--vvd-dial-pad-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-dial-pad-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-dial-pad-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-dial-pad-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-dial-pad-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-dial-pad-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-dial-pad-accent-dim, var(--vvd-color-neutral-200))}.digit-btn{--vvd-button-accent-firm: var(--_appearance-color-text);display:flex;overflow:hidden;flex-direction:column;border-radius:16px;box-shadow:0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.digit-btn:focus-within{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.call-btn{margin-top:32px;grid-column:1/-1}";var L=Object.defineProperty,c=(a,t,e,o)=>{for(var n=void 0,d=a.length-1,p;d>=0;d--)(p=a[d])&&(n=p(t,e,n)||n);return n&&L(t,e,n),n};class i extends m.Localized(l.VividElement){constructor(){super(...arguments),this.helperText=null,this.placeholder=null,this.value="",this.pattern="^[0-9#*]*$",this.disabled=!1,this.pending=!1,this.callActive=!1,this.noCall=!1,this.noInput=!1,this.endCallButtonLabel=null,this.callButtonLabel=null,this._onDial=()=>{this.callActive?this.$emit("end-call"):this.$emit("dial")},this.autofocus=!1}valueChanged(t,e){e!=null&&this._textFieldEl&&e!==this._textFieldEl.value&&(this._textFieldEl.value=e,this._textFieldEl.reportValidity())}focus(){const t=this.shadowRoot?.querySelectorAll(".digits .digit-btn");(this._textFieldEl||t?.[0])?.focus()}}c([l.attr({attribute:"helper-text"})],i.prototype,"helperText");c([l.attr],i.prototype,"placeholder");c([l.attr({mode:"fromView"})],i.prototype,"value");c([l.attr({mode:"fromView"})],i.prototype,"pattern");c([l.attr({mode:"boolean"})],i.prototype,"disabled");c([l.attr({mode:"boolean"})],i.prototype,"pending");c([l.attr({attribute:"call-active",mode:"boolean"})],i.prototype,"callActive");c([l.attr({mode:"boolean",attribute:"no-call"})],i.prototype,"noCall");c([l.attr({mode:"boolean",attribute:"no-input"})],i.prototype,"noInput");c([l.attr({attribute:"end-call-button-label"})],i.prototype,"endCallButtonLabel");c([l.attr({attribute:"call-button-label"})],i.prototype,"callButtonLabel");c([l.attr({mode:"boolean"})],i.prototype,"autofocus");class r{constructor(t,e,o,n,d){this.value=t,this.label=e,this.ariaLabel=o,this.icon=n,this.id=d}}const g=[new r("1","&nbsp;","digitOneLabel","one-solid","btn1"),new r("2","ABC","digitTwoLabel","two-solid","btn2"),new r("3","DEF","digitThreeLabel","three-solid","btn3"),new r("4","GHI","digitFourLabel","four-solid","btn4"),new r("5","JKL","digitFiveLabel","five-solid","btn5"),new r("6","MNO","digitSixLabel","six-solid","btn6"),new r("7","PQRS","digitSevenLabel","seven-solid","btn7"),new r("8","TUV","digitEightLabel","eight-solid","btn8"),new r("9","WXYZ","digitNineLabel","nine-solid","btn9"),new r("*",null,"digitAsteriskLabel","asterisk-2-solid","btnAsterisk"),new r("0","+","digitZeroLabel","zero-solid","btn0"),new r("#",null,"digitHashtagLabel","hashtag-solid","btnHashtag")],F=({noInput:a})=>$.classNames("base",["no-input",!!a]);function k(a,t){if(t.key===y.keyEnter&&!a.pending&&!a.disabled&&!a.callActive&&!a.noCall&&a.value.length>0&&t.target instanceof HTMLInputElement)a._onDial();else{const e=g.findIndex(o=>o.value===t.key);if(e>-1){const o=a.shadowRoot.querySelector(".digits").children[e];o&&(o.active=!0,setTimeout(()=>{o.active=!1},200))}}return!0}function u(a){a.value=a._textFieldEl.value}function v(a,{event:t}){t.stopImmediatePropagation()}function D(a){a.value=a.value.slice(0,-1),a.$emit("input"),a.$emit("change"),a.value===""&&a._textFieldEl?.focus()}function C(a,t){return l.html`<${a} ${x.ref("_textFieldEl")} class="phone-field" internal-part type="tel"
+        value="${e=>e.value}" placeholder="${e=>e.placeholder}"
+            ?disabled="${e=>e.disabled}" helper-text="${e=>e.helperText}" pattern="${e=>e.pattern}"
+            aria-label="${e=>e.locale.dialPad.inputLabel}"
+            @keydown="${(e,o)=>k(e,o.event)}"
+            @input="${u}"
+			@change="${u}"
+			@focus="${v}"
+			@blur="${v}"
+			?autofocus="${e=>e.autofocus}"
+			>
+         ${s.when(e=>e.value&&e.value.length&&e.value.length>0,l.html`<${t}
+                slot="action-items"
+								size='super-condensed'
+								icon="backspace-line"
+								aria-label="${e=>e.deleteAriaLabel||e.locale.dialPad.deleteButtonLabel}"
+								appearance='ghost'
+								?disabled="${e=>e.disabled||e.callActive}"
+								@click="${e=>D(e)}">
+            </${t}>`)}
+        </${a}>`}function A(a,{parent:t,event:e}){t.value+=a.value,t.$emit("keypad-click",e.currentTarget),t.$emit("input"),t.$emit("change")}function B(a,t){return l.html`
+		${_.repeat(e=>g,l.html`
+			<${a}
+					  id="${e=>e.id}"
+					  value="${e=>e.value}"
+					  stacked
+					  appearance="ghost-light"
+					  shape="pill"
+					  label="${e=>e.label==="&nbsp;"?" ":e.label}"
+					  size='condensed'
+					  class="digit-btn"
+						?autofocus="${(e,o)=>o.parent.autofocus&&o.parent.noInput&&o.index===0}"
+					  aria-label="${(e,o)=>o.parent.locale.dialPad[e.ariaLabel]}"
+					  ?disabled="${(e,o)=>o.parent.disabled}"
+					  @click="${A}">
+					  	<${t} slot="icon"
+									name="${e=>e.icon}"
+									class="digit-btn-num"></${t}>
+					</${a}>
+		`,{positioning:!0})}
+	`}function E(a){return l.html`<${a} class="call-btn"
+        size="expanded"
+        appearance="filled"
+        icon="${t=>t.callActive?"disable-call-line":"call-line"}"
+        connotation="${t=>t.callActive?"alert":"cta"}"
+        ?disabled="${t=>t.disabled}"
+		?pending="${t=>t.pending}"
+        @click="${t=>t._onDial()}"
+        label="${t=>t.callActive?t.endCallButtonLabel||t.locale.dialPad.endCallButtonLabel:t.callButtonLabel||t.locale.dialPad.callButtonLabel}">
+    </${a}>`}const q=a=>{const t=a.tagFor(b.Button),e=a.tagFor(h.Icon),o=a.tagFor(f.TextField);return l.html` <div class="${F}">
+		${s.when(n=>!n.noInput,C(o,t))}
+		<div class="digits">${B(t,e)}</div>
+		${s.when(n=>!n.noCall,E(t))}
+	</div>`},T=l.defineVividComponent("dial-pad",i,q,[b.buttonDefinition,f.textFieldDefinition,h.iconDefinition],{styles:w}),I=l.createRegisterFunction(T);I();