@vonage/vivid 5.0.0 → 5.2.0

package/bundled/mixins.js

@@ -0,0 +1,226 @@
+import { d as k, h as d, V as _, a as y, H as $, D as F, O as f, o as x } from "./vivid-element.js";
+import { i as I, I as D } from "./definition2.js";
+import { v as w } from "./definition12.js";
+import { c as C } from "./class-names.js";
+import { w as u } from "./when.js";
+import { L as S } from "./localized.js";
+import { s as T } from "./slotted.js";
+const H = ":host{display:contents}.message{display:flex;contain:inline-size;font:var(--vvd-typography-base-condensed);gap:4px;grid-column:1/-1}.message.none-message{display:none}.message.helper-message{color:var(--_low-ink-color)}.message.error-message,.message.success-message{color:var(--vvd-color-canvas-text)}slot{display:inline}.icon{font-size:16px}.error-message .icon{color:var(--vvd-color-alert-500)}.success-message .icon{color:var(--vvd-color-success-500)}.announcement{display:contents}";
+var B = Object.defineProperty, U = (e, t, s, o) => {
+  for (var n = void 0, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (n = a(t, s, n) || n);
+  return n && B(t, s, n), n;
+};
+class l extends S(_) {
+  constructor() {
+    super(...arguments), this.type = "none";
+  }
+}
+U([
+  y
+], l.prototype, "type");
+function m(e, t, s) {
+  const o = e.tagFor(D);
+  return d`<${o} class="icon" name="${t}" label="${(n) => n.locale.feedbackMessage[s]}"></${o}>`;
+}
+function V(e) {
+  const t = {
+    none: "",
+    helper: "",
+    error: m(e, "info-line", "errorIconText"),
+    success: m(e, "check-circle-line", "successIconText")
+  };
+  return d`${(s) => t[s.type]}`;
+}
+const g = (e) => e === "error", M = (e) => {
+  const t = d`<div
+		class="${(s) => C("message", `${s.type}-message`)}"
+	>
+		${V(e)}<slot></slot>
+	</div>`;
+  return d`${u((s) => !g(s.type), t)}
+		<span class="announcement" role="status" aria-live="polite">
+			${u((s) => g(s.type), t)}
+		</span>`;
+}, Z = k(
+  "feedback-message",
+  l,
+  M,
+  [I, w],
+  {
+    styles: H
+  }
+);
+class P {
+  constructor(t, s) {
+    this.source = null, this.templateBindingObserver = f.binding(
+      t,
+      this,
+      s
+    );
+  }
+  bind(t, s) {
+    this.source = t, this.context = s, this.insertionPoint || (this.insertionPoint = document.createComment(""), t.appendChild(this.insertionPoint)), this.handleChange();
+  }
+  unbind() {
+    this.source = null, this.view.unbind(), this.templateBindingObserver.disconnect();
+  }
+  /**
+   * Handles change of the template itself.
+   */
+  handleChange() {
+    this.instantiateTemplate(
+      this.templateBindingObserver.observe(this.source, this.context)
+    );
+  }
+  instantiateTemplate(t) {
+    this.view && this.view.dispose(), this.view = t.create(), this.view.bind(this.source, this.context), this.view.insertBefore(this.insertionPoint);
+  }
+}
+class L extends $ {
+  constructor(t) {
+    super(), this.templateBinding = t, this.createPlaceholder = F.createBlockPlaceholder, this.isTemplateBindingVolatile = f.isVolatileBinding(t);
+  }
+  createBehavior() {
+    return new P(
+      this.templateBinding,
+      this.isTemplateBindingVolatile
+    );
+  }
+}
+function O(e) {
+  const t = typeof e == "function" ? e : () => e;
+  return new L(t);
+}
+const i = [];
+for (let e = 0; e < 256; ++e)
+  i.push((e + 256).toString(16).slice(1));
+function R(e, t = 0) {
+  return (i[e[t + 0]] + i[e[t + 1]] + i[e[t + 2]] + i[e[t + 3]] + "-" + i[e[t + 4]] + i[e[t + 5]] + "-" + i[e[t + 6]] + i[e[t + 7]] + "-" + i[e[t + 8]] + i[e[t + 9]] + "-" + i[e[t + 10]] + i[e[t + 11]] + i[e[t + 12]] + i[e[t + 13]] + i[e[t + 14]] + i[e[t + 15]]).toLowerCase();
+}
+let p;
+const E = new Uint8Array(16);
+function W() {
+  if (!p) {
+    if (typeof crypto > "u" || !crypto.getRandomValues)
+      throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
+    p = crypto.getRandomValues.bind(crypto);
+  }
+  return p(E);
+}
+const j = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), b = { randomUUID: j };
+function z(e, t, s) {
+  if (b.randomUUID && !e)
+    return b.randomUUID();
+  e = e || {};
+  const o = e.random ?? e.rng?.() ?? W();
+  if (o.length < 16)
+    throw new Error("Random bytes length must be >= 16");
+  return o[6] = o[6] & 15 | 64, o[8] = o[8] & 63 | 128, R(o);
+}
+const v = () => z();
+var A = Object.defineProperty, h = (e, t, s, o) => {
+  for (var n = void 0, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (n = a(t, s, n) || n);
+  return n && A(t, s, n), n;
+};
+const N = (e) => {
+  class t extends e {
+    /**
+     * Ids of the feedback content that the control should use for aria-describedby.
+     *
+     * @internal
+     */
+    get _feedbackDescribedBy() {
+      return "feedback slotted-helper-text-feedback";
+    }
+    /**
+     * @internal
+     */
+    _internalFeedback() {
+      const o = this._helperTextSlottedContent?.length ? "" : this.helperText, n = this.errorValidationMessage, r = this.successText;
+      return r ? { type: "success", message: r } : n ? { type: "error", message: n } : o ? { type: "helper", message: o } : { type: "none", message: "" };
+    }
+    /**
+     * @internal
+     */
+    _slottedHelperTextFeedbackType() {
+      return this._internalFeedback().type === "none" && this._helperTextSlottedContent?.length ? "helper" : "none";
+    }
+    /**
+     * @internal
+     */
+    _getFeedbackTemplate(o) {
+      const n = o.tagFor(l);
+      return d`
+				<${n} id="feedback" :type="${(r) => r._internalFeedback().type}">
+					${(r) => r._internalFeedback().message}
+				</${n}>
+				<${n}
+					id="slotted-helper-text-feedback"
+					:type="${(r) => r._slottedHelperTextFeedbackType()}"
+				>
+					<slot name="helper-text" ${T("_helperTextSlottedContent")}></slot>
+				</${n}>
+			`;
+    }
+  }
+  return h([
+    y({ attribute: "helper-text" })
+  ], t.prototype, "helperText"), h([
+    x
+  ], t.prototype, "_helperTextSlottedContent"), t;
+}, ee = (e) => {
+  const t = () => `vvd-feedback-${v()}`, s = () => `vvd-slotted-feedback-${v()}`;
+  class o extends N(e) {
+    constructor() {
+      super(...arguments), this._slottedHelperTextIds = [], this._feedbackId = t();
+    }
+    /**
+     * @internal
+     */
+    _helperTextSlottedContentChanged(r, a) {
+      for (const c of a)
+        c.id || (c.id = s());
+      this._slottedHelperTextIds = a.map((c) => c.id);
+    }
+    /**
+     * @internal
+     */
+    get _feedbackDescribedBy() {
+      return [this._feedbackId, ...this._slottedHelperTextIds].join(" ");
+    }
+    /**
+     * @internal
+     */
+    _getFeedbackTemplate(r) {
+      const a = r.tagFor(l);
+      return d`
+				<slot name="_feedback"></slot>
+				${O(d`<${a}
+					slot="_feedback"
+					id="${(c) => c._feedbackId}"
+					:type="${(c) => c._internalFeedback().type}"
+				>
+					${(c) => c._internalFeedback().message}
+				</${a}>`)}
+				<${a} :type="${(c) => c._slottedHelperTextFeedbackType()}">
+					<slot
+						name="helper-text"
+						${T("_helperTextSlottedContent")}
+					></slot>
+				</${a}>
+			`;
+    }
+  }
+  return h([
+    x
+  ], o.prototype, "_slottedHelperTextIds"), o;
+};
+export {
+  N as W,
+  ee as a,
+  Z as f,
+  v as g,
+  O as r
+};

package/bundled/numbers.cjs

@@ -0,0 +1 @@
+"use strict";function e(r,t,n){return n<r?t:n>t?r:n}function o(r,t,n){return Math.min(Math.max(n,r),t)}function s(r,t,n=0){return[t,n]=[t,n].sort((i,u)=>i-u),t<=r&&r<n}exports.inRange=s;exports.limit=o;exports.wrapInBounds=e;

package/bundled/numbers.js

@@ -0,0 +1,14 @@
+function o(t, r, n) {
+  return n < t ? r : n > r ? t : n;
+}
+function s(t, r, n) {
+  return Math.min(Math.max(n, t), r);
+}
+function u(t, r, n = 0) {
+  return [r, n] = [r, n].sort((i, e) => i - e), r <= t && t < n;
+}
+export {
+  u as i,
+  s as l,
+  o as w
+};

package/bundled/option.cjs

@@ -0,0 +1 @@
+"use strict";const d=require("./affix.cjs"),i=require("./vivid-element.cjs"),c=require("./host-semantics.cjs"),p=require("./dom.cjs");var f=Object.defineProperty,u=Object.getOwnPropertyDescriptor,s=(r,e,o,l)=>{for(var a=l>1?void 0:l?u(e,o):e,n=r.length-1,h;n>=0;n--)(h=r[n])&&(a=(l?h(e,o,a):h(a))||a);return l&&a&&f(e,o,a),a};function x(r){return p.isHTMLElement(r)&&(r.getAttribute("role")==="option"||r instanceof HTMLOptionElement||r instanceof t)}class t extends c.HostSemantics(d.AffixIconWithTrailing(i.VividElement)){constructor(e,o,l,a){super(),this.defaultSelected=!1,this.dirtySelected=!1,this.value="",this._highlighted=!1,this._displayCheckmark=!1,this._vvdSearchText="",this._isNotMatching=!1,e&&(this.text=e),o&&(this.value=o),l&&(this.defaultSelected=l),a&&(this.selected=a),this.proxy=new Option(this.text,this.value,this.defaultSelected,this.selected),this.proxy.disabled=this.disabled}defaultSelectedChanged(){this.dirtySelected||(this.selected=this.defaultSelected,this.proxy instanceof HTMLOptionElement&&(this.proxy.selected=this.defaultSelected)),this.proxy instanceof HTMLOptionElement&&(this.proxy.defaultSelected=this.defaultSelected)}disabledChanged(){this.proxy instanceof HTMLOptionElement&&(this.proxy.disabled=this.disabled)}get selectedAttribute(){return this.defaultSelected}set selectedAttribute(e){this.defaultSelected=e}selectedChanged(){this.dirtySelected||(this.dirtySelected=!0),this.proxy instanceof HTMLOptionElement&&(this.proxy.selected=this.selected)}valueChanged(){if(typeof this.value!="string"){this.value="";return}this.proxy instanceof HTMLOptionElement&&(this.proxy.value=this.value)}get label(){return this._label??this.text}set label(e){this._label=e}set text(e){this._text=e}get text(){return this._text??""}_getAccessibleName(){return this.ariaLabel||`${this.text}${this.textSecondary?` ${this.textSecondary}`:""}`}get form(){return null}get _hasMatchedText(){return!!(this.matchedText??this._vvdSearchText)}get _matchedRange(){const e=this.matchedText??this._vvdSearchText;if(e){const o=this.text.toLowerCase().indexOf(e.toLowerCase());return o===-1?{from:0,to:0}:{from:o,to:o+e.length}}return{from:0,to:0}}connectedCallback(){super.connectedCallback(),this.dirtySelected||(this.selected=this.defaultSelected,this.dirtySelected=!1)}}s([i.attr({converter:{fromView:r=>{if(r===!0||r==="true")return!0;if(r===!1||r==="false")return!1},toView:r=>r}})],t.prototype,"checked",2);s([i.attr({attribute:"selected",mode:"boolean"})],t.prototype,"defaultSelected",2);s([i.attr({mode:"boolean"})],t.prototype,"disabled",2);s([i.attr({attribute:"current-selected",mode:"boolean"})],t.prototype,"selected",2);s([i.attr({attribute:"value"})],t.prototype,"value",2);s([i.attr({attribute:"label"})],t.prototype,"_label",2);s([i.attr({attribute:"text"})],t.prototype,"_text",2);s([i.attr({attribute:"text-secondary"})],t.prototype,"textSecondary",2);s([i.observable],t.prototype,"_highlighted",2);s([i.observable],t.prototype,"_displayCheckmark",2);s([i.attr({attribute:"matched-text"})],t.prototype,"matchedText",2);s([i.observable],t.prototype,"_vvdSearchText",2);s([i.volatile],t.prototype,"_hasMatchedText",1);s([i.observable],t.prototype,"_isNotMatching",2);s([i.volatile],t.prototype,"_matchedRange",1);s([i.attr({attribute:"tag-connotation"})],t.prototype,"tagConnotation",2);exports.ListboxOption=t;exports.isListboxOption=x;

package/bundled/option.js

@@ -0,0 +1,158 @@
+import { A as p } from "./affix.js";
+import { V as f, a, o as h, v as c } from "./vivid-element.js";
+import { H as u } from "./host-semantics.js";
+import { i as x } from "./dom.js";
+var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (s, t, o, l) => {
+  for (var r = l > 1 ? void 0 : l ? b(t, o) : t, d = s.length - 1, n; d >= 0; d--)
+    (n = s[d]) && (r = (l ? n(t, o, r) : n(r)) || r);
+  return l && r && y(t, o, r), r;
+};
+function S(s) {
+  return x(s) && (s.getAttribute("role") === "option" || s instanceof HTMLOptionElement || s instanceof e);
+}
+class e extends u(
+  p(f)
+) {
+  constructor(t, o, l, r) {
+    super(), this.defaultSelected = !1, this.dirtySelected = !1, this.value = "", this._highlighted = !1, this._displayCheckmark = !1, this._vvdSearchText = "", this._isNotMatching = !1, t && (this.text = t), o && (this.value = o), l && (this.defaultSelected = l), r && (this.selected = r), this.proxy = new Option(
+      this.text,
+      this.value,
+      this.defaultSelected,
+      this.selected
+    ), this.proxy.disabled = this.disabled;
+  }
+  defaultSelectedChanged() {
+    this.dirtySelected || (this.selected = this.defaultSelected, this.proxy instanceof HTMLOptionElement && (this.proxy.selected = this.defaultSelected)), this.proxy instanceof HTMLOptionElement && (this.proxy.defaultSelected = this.defaultSelected);
+  }
+  disabledChanged() {
+    this.proxy instanceof HTMLOptionElement && (this.proxy.disabled = this.disabled);
+  }
+  /**
+   * @deprecated Use `defaultSelected` instead.
+   */
+  get selectedAttribute() {
+    return this.defaultSelected;
+  }
+  set selectedAttribute(t) {
+    this.defaultSelected = t;
+  }
+  selectedChanged() {
+    this.dirtySelected || (this.dirtySelected = !0), this.proxy instanceof HTMLOptionElement && (this.proxy.selected = this.selected);
+  }
+  valueChanged() {
+    if (typeof this.value != "string") {
+      this.value = "";
+      return;
+    }
+    this.proxy instanceof HTMLOptionElement && (this.proxy.value = this.value);
+  }
+  get label() {
+    return this._label ?? this.text;
+  }
+  set label(t) {
+    this._label = t;
+  }
+  set text(t) {
+    this._text = t;
+  }
+  get text() {
+    return this._text ?? "";
+  }
+  /**
+   * Provides an accessible name for use by parent components.
+   * Note: Does not implement full accessible name computation, e.g. slotted content is missed.
+   * @internal
+   */
+  _getAccessibleName() {
+    return this.ariaLabel || `${this.text}${this.textSecondary ? ` ${this.textSecondary}` : ""}`;
+  }
+  get form() {
+    return null;
+  }
+  get _hasMatchedText() {
+    return !!(this.matchedText ?? this._vvdSearchText);
+  }
+  get _matchedRange() {
+    const t = this.matchedText ?? this._vvdSearchText;
+    if (t) {
+      const o = this.text.toLowerCase().indexOf(t.toLowerCase());
+      return o === -1 ? { from: 0, to: 0 } : {
+        from: o,
+        to: o + t.length
+      };
+    }
+    return { from: 0, to: 0 };
+  }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback(), this.dirtySelected || (this.selected = this.defaultSelected, this.dirtySelected = !1);
+  }
+}
+i([
+  a({
+    converter: {
+      fromView: (s) => {
+        if (s === !0 || s === "true")
+          return !0;
+        if (s === !1 || s === "false")
+          return !1;
+      },
+      toView: (s) => s
+    }
+  })
+], e.prototype, "checked", 2);
+i([
+  a({ attribute: "selected", mode: "boolean" })
+], e.prototype, "defaultSelected", 2);
+i([
+  a({ mode: "boolean" })
+], e.prototype, "disabled", 2);
+i([
+  a({ attribute: "current-selected", mode: "boolean" })
+], e.prototype, "selected", 2);
+i([
+  a({ attribute: "value" })
+], e.prototype, "value", 2);
+i([
+  a({
+    attribute: "label"
+  })
+], e.prototype, "_label", 2);
+i([
+  a({
+    attribute: "text"
+  })
+], e.prototype, "_text", 2);
+i([
+  a({ attribute: "text-secondary" })
+], e.prototype, "textSecondary", 2);
+i([
+  h
+], e.prototype, "_highlighted", 2);
+i([
+  h
+], e.prototype, "_displayCheckmark", 2);
+i([
+  a({ attribute: "matched-text" })
+], e.prototype, "matchedText", 2);
+i([
+  h
+], e.prototype, "_vvdSearchText", 2);
+i([
+  c
+], e.prototype, "_hasMatchedText", 1);
+i([
+  h
+], e.prototype, "_isNotMatching", 2);
+i([
+  c
+], e.prototype, "_matchedRange", 1);
+i([
+  a({ attribute: "tag-connotation" })
+], e.prototype, "tagConnotation", 2);
+export {
+  e as L,
+  S as i
+};

package/bundled/picker-field.template.cjs

@@ -0,0 +1,67 @@
+"use strict";const _=require("./index.cjs"),v=require("./mixins.cjs"),g=require("./form-associated.cjs"),r=require("./vivid-element.cjs"),$=require("./with-contextual-help.cjs"),x=require("./with-error-text.cjs"),m=require("./form-element.cjs"),k=require("./localized.cjs"),F=require("./definition9.cjs"),E=require("./definition13.cjs"),y=require("./definition3.cjs"),p=require("./ref.cjs"),h=require("./slotted.cjs"),f=require("./class-names.cjs"),b=new WeakSet,C=l=>{b.add(l)},O=l=>{class t extends l{_trappedFocus(a,i){if(!b.has(a)&&a.key==="Tab"){const s=i(),o=s[0],e=s[s.length-1];if(a.shiftKey){if(this.shadowRoot.activeElement===o)return e.focus(),!0}else if(this.shadowRoot.activeElement===e)return o.focus(),!0}return!1}}return t},T=":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 P=Object.defineProperty,u=(l,t,n,a)=>{for(var i=void 0,s=l.length-1,o;s>=0;s--)(o=l[s])&&(i=o(t,n,i)||i);return i&&P(t,n,i),i};class c extends $.WithContextualHelp(v.WithFeedback(x.WithErrorText(m.FormElement(O(k.Localized(g.FormAssociated(r.VividElement))))))){constructor(){super(),this.readOnly=!1,this.#e=()=>{this.$emit("focus",void 0,{bubbles:!1})},this.#t=()=>{this.$emit("blur",void 0,{bubbles:!1})},this.proxy=document.createElement("input"),this.#l={handleChange:()=>{this._updatePresentationValue()}},this._popupOpen=!1,this.#o=t=>{if(!this._popupOpen)return;const n=t.composedPath();[this._dialogEl,this._pickerButtonEl].some(i=>n.includes(i))||this._closePopup(!1)},this._presentationValue="",this.value=""}readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly,this.validate())}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#o),this.addEventListener("focusin",this.#e),this.addEventListener("focusout",this.#t),this.#s()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.#o),this.removeEventListener("focusin",this.#e),this.removeEventListener("focusout",this.#t),this.#n()}#e;#t;validate(){this.proxy&&this.proxy.setCustomValidity(this._getCustomValidationError()??""),super.validate(this._textFieldEl?.querySelector("input")??void 0)}#l;#i;#s(){this.#i=r.Observable.binding(()=>this.locale,this.#l),this.#i.observe(this,r.defaultExecutionContext)}#n(){this.#i.disconnect()}#o;#a(){this.readOnly||(this._popupOpen=!0)}_closePopup(t=!0){this._popupOpen=!1,t&&this._textFieldEl.focus()}_onBaseKeyDown(t){return this._popupOpen&&_.handleEscapeKeyAndStopPropogation(t)?(this._closePopup(),!1):!this._trappedFocus(t,()=>this._focusableElsWithinDialog())}_presentationValueChanged(){this.dirtyValue=!0,this.validate()}_onTextFieldInput(t){const n=t.currentTarget;this._presentationValue=n.value}_onPickerButtonClick(){this._popupOpen?this._closePopup():this.#a()}_onOkClick(){this._closePopup()}_onClearClick(){this.$emit("clear-click")}}u([r.attr({attribute:"readonly",mode:"boolean"})],c.prototype,"readOnly");u([r.observable],c.prototype,"_popupOpen");u([r.observable],c.prototype,"_presentationValue");const q=(l,t,{withSeparator:n,padded:a})=>{const i=l.tagFor(F.Popup),s=l.tagFor(E.TextField),o=l.tagFor(y.Button);return r.html`
+		<div class='base' @keydown='${(e,{event:d})=>e._onBaseKeyDown(d)}'>
+			<${s} id='text-field'
+				${p.ref("_textFieldEl")}
+				class='control'
+				label='${e=>e.label}'
+				helper-text='${e=>e.helperText}'
+				error-text='${e=>e.errorValidationMessage}'
+				placeholder='${e=>e._textFieldPlaceholder}'
+				size='${e=>e._textFieldSize}'
+				current-value='${e=>e._presentationValue}'
+				?disabled='${e=>e.disabled}'
+				?readonly='${e=>e.readOnly}'
+				@input='${(e,d)=>e._onTextFieldInput(d.event)}'
+				@change='${e=>e._onTextFieldChange()}'
+			>
+				<slot
+					slot='${e=>e._helperTextSlottedContent?.length?"helper-text":void 0}'
+					name='helper-text'
+					${h.slotted("_helperTextSlottedContent")}
+				></slot>
+				<slot
+					slot='${e=>e._contextualHelpSlottedContent?.length?"contextual-help":void 0}'
+					name='contextual-help'
+					${h.slotted("_contextualHelpSlottedContent")}
+				></slot>
+				<${o}
+					id='picker-button'
+					${p.ref("_pickerButtonEl")}
+					slot='action-items'
+					size='condensed'
+					icon='${e=>e._pickerButtonIcon}'
+					appearance='ghost'
+					?disabled='${e=>e.disabled||e.readOnly}'
+					aria-label='${e=>e._pickerButtonLabel}'
+					@click='${e=>e._onPickerButtonClick()}'
+				></${o}>
+			</${s}>
+			<${i}
+				?open='${e=>e._popupOpen}'
+				:anchor='${e=>e._textFieldEl}'
+				offset='${e=>e._helperTextSlottedContent?.length||e.helperText||e.errorValidationMessage?8:null}'
+				placement='bottom-start'
+				class='popup'>
+				<div class="${()=>f.classNames("dialog",["dialog--padded",a])}" role='dialog' ${p.ref("_dialogEl")} aria-modal='true' aria-label='${e=>e._dialogLabel}'>
+					${()=>t}
+					<div class="${()=>f.classNames("footer",["footer--with-separator",n])}">
+						<${o}
+							id='clear-button'
+							tabindex='3'
+							class='vwc-button'
+							size='condensed'
+							label='${e=>e.locale.pickerField.clearLabel}'
+							@click='${e=>e._onClearClick()}'
+						></${o}>
+						<${o}
+							tabindex='3'
+							class='vwc-button'
+							size='condensed'
+							appearance='filled'
+							label='${e=>e.locale.pickerField.okLabel}'
+							@click='${e=>e._onOkClick()}'
+						></${o}>
+					</div>
+				</div>
+			</${i}>
+		</div>`};exports.PickerField=c;exports.PickerFieldTemplate=q;exports.ignoreEventInFocusTraps=C;exports.pickerFieldStyles=T;