@vonage/vivid 4.31.0 → 5.1.0

package/bundled/localized.js

@@ -0,0 +1,459 @@
+import { o as J } from "./vivid-element.js";
+const s = "Play", l = "Pause", c = "Replay", d = "Duration", u = "LIVE", p = "Loaded", b = "Progress", g = "Fullscreen", m = "Mute", h = "Unmute", y = "Subtitles", f = "Captions", L = "Chapters", S = "Descriptions", P = "Close", T = "Text", w = "White", v = "Black", k = "Red", C = "Green", M = "Blue", D = "Yellow", B = "Magenta", E = "Cyan", x = "Background", F = "Window", $ = "Transparent", A = "Opaque", R = "None", O = "Raised", I = "Depressed", Y = "Uniform", N = "Casual", W = "Script", U = "Reset", z = "Done", V = "Color", G = "Opacity", H = {
+  "Audio Player": "Audio Player",
+  "Video Player": "Video Player",
+  Play: s,
+  Pause: l,
+  Replay: c,
+  "Current Time": "Current Time",
+  Duration: d,
+  "Remaining Time": "Remaining Time",
+  "Stream Type": "Stream Type",
+  LIVE: u,
+  "Seek to live, currently behind live": "Seek to live, currently behind live",
+  "Seek to live, currently playing live": "Seek to live, currently playing live",
+  Loaded: p,
+  Progress: b,
+  "Progress Bar": "Progress Bar",
+  "progress bar timing: currentTime={1} duration={2}": "{1} of {2}",
+  Fullscreen: g,
+  "Exit Fullscreen": "Exit Fullscreen",
+  Mute: m,
+  Unmute: h,
+  "Playback Rate": "Playback Rate",
+  Subtitles: y,
+  "subtitles off": "subtitles off",
+  Captions: f,
+  "captions off": "captions off",
+  Chapters: L,
+  Descriptions: S,
+  "descriptions off": "descriptions off",
+  "Audio Track": "Audio Track",
+  "Volume Level": "Volume Level",
+  "You aborted the media playback": "You aborted the media playback",
+  "A network error caused the media download to fail part-way.": "A network error caused the media download to fail part-way.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "The media could not be loaded, either because the server or network failed or because the format is not supported.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.",
+  "No compatible source was found for this media.": "No compatible source was found for this media.",
+  "The media is encrypted and we do not have the keys to decrypt it.": "The media is encrypted and we do not have the keys to decrypt it.",
+  "Play Video": "Play Video",
+  Close: P,
+  "Close Modal Dialog": "Close Modal Dialog",
+  "Modal Window": "Modal Window",
+  "This is a modal window": "This is a modal window",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "This modal can be closed by pressing the Escape key or activating the close button.",
+  ", opens captions settings dialog": ", opens captions settings dialog",
+  ", opens subtitles settings dialog": ", opens subtitles settings dialog",
+  ", opens descriptions settings dialog": ", opens descriptions settings dialog",
+  ", selected": ", selected",
+  "captions settings": "captions settings",
+  "subtitles settings": "subtitles settings",
+  "descriptions settings": "descriptions settings",
+  Text: T,
+  White: w,
+  Black: v,
+  Red: k,
+  Green: C,
+  Blue: M,
+  Yellow: D,
+  Magenta: B,
+  Cyan: E,
+  Background: x,
+  Window: F,
+  Transparent: $,
+  "Semi-Transparent": "Semi-Transparent",
+  Opaque: A,
+  "Font Size": "Font Size",
+  "Text Edge Style": "Text Edge Style",
+  None: R,
+  Raised: O,
+  Depressed: I,
+  Uniform: Y,
+  "Drop shadow": "Drop shadow",
+  "Font Family": "Font Family",
+  "Proportional Sans-Serif": "Proportional Sans-Serif",
+  "Monospace Sans-Serif": "Monospace Sans-Serif",
+  "Proportional Serif": "Proportional Serif",
+  "Monospace Serif": "Monospace Serif",
+  Casual: N,
+  Script: W,
+  "Small Caps": "Small Caps",
+  Reset: U,
+  "restore all settings to the default values": "restore all settings to the default values",
+  Done: z,
+  "Caption Settings Dialog": "Caption Settings Dialog",
+  "Beginning of dialog window. Escape will cancel and close the window.": "Beginning of dialog window. Escape will cancel and close the window.",
+  "End of dialog window.": "End of dialog window.",
+  "{1} is loading.": "{1} is loading.",
+  "Exit Picture-in-Picture": "Exit Picture-in-Picture",
+  "Picture-in-Picture": "Picture-in-Picture",
+  "No content": "No content",
+  Color: V,
+  Opacity: G,
+  "Text Background": "Text Background",
+  "Caption Area Background": "Caption Area Background",
+  "Playing in Picture-in-Picture": "Playing in Picture-in-Picture",
+  "Skip backward {1} seconds": "Skip backward {1} seconds",
+  "Skip forward {1} seconds": "Skip forward {1} seconds"
+}, j = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Background: x,
+  Black: v,
+  Blue: M,
+  Captions: f,
+  Casual: N,
+  Chapters: L,
+  Close: P,
+  Color: V,
+  Cyan: E,
+  Depressed: I,
+  Descriptions: S,
+  Done: z,
+  Duration: d,
+  Fullscreen: g,
+  Green: C,
+  LIVE: u,
+  Loaded: p,
+  Magenta: B,
+  Mute: m,
+  None: R,
+  Opacity: G,
+  Opaque: A,
+  Pause: l,
+  Play: s,
+  Progress: b,
+  Raised: O,
+  Red: k,
+  Replay: c,
+  Reset: U,
+  Script: W,
+  Subtitles: y,
+  Text: T,
+  Transparent: $,
+  Uniform: Y,
+  Unmute: h,
+  White: w,
+  Window: F,
+  Yellow: D,
+  default: H
+}, Symbol.toStringTag, { value: "Module" })), q = {
+  lang: "en-US",
+  common: {
+    useCommaAsDecimalSeparator: !1
+  },
+  pickerField: {
+    clearLabel: "Clear",
+    okLabel: "OK"
+  },
+  calendarPicker: {
+    months: {
+      name: [
+        "January",
+        "February",
+        "March",
+        "April",
+        "May",
+        "June",
+        "July",
+        "August",
+        "September",
+        "October",
+        "November",
+        "December"
+      ],
+      shorthand: [
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr",
+        "May",
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sep",
+        "Oct",
+        "Nov",
+        "Dec"
+      ]
+    },
+    weekdays: {
+      name: [
+        "Sunday",
+        "Monday",
+        "Tuesday",
+        "Wednesday",
+        "Thursday",
+        "Friday",
+        "Saturday"
+      ],
+      shorthand: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
+    },
+    firstDayOfWeek: 0,
+    dateFormat: "MM/dd/yyyy",
+    dateFormatPlaceholder: "MM/DD/YYYY",
+    chooseDateLabel: "Choose date",
+    changeDateLabel: (
+      /* istanbul ignore next */
+      (e) => `Change date, ${e}`
+    ),
+    chooseDatesLabel: "Choose dates",
+    changeDatesLabel: (
+      /* istanbul ignore next */
+      (e) => `Change dates, ${e}`
+    ),
+    prevYearLabel: "Previous year",
+    prevMonthLabel: "Previous month",
+    nextMonthLabel: "Next month",
+    nextYearLabel: "Next year",
+    todayLabel: "today",
+    selectedLabel: "selected",
+    currentLabel: "current",
+    changeMonthLabel: (
+      /* istanbul ignore next */
+      (e) => `Change month, ${e} selected`
+    ),
+    showCalendarForMonthLabel: (
+      /* istanbul ignore next */
+      (e) => `Show calendar for ${e}`
+    ),
+    invalidDateError: "Please enter a valid date.",
+    invalidDateRangeError: "Please enter a valid date range.",
+    startDateAfterMinDateError: (
+      /* istanbul ignore next */
+      (e) => `The start date must be ${e} or later.`
+    ),
+    endDateBeforeMaxDateError: (
+      /* istanbul ignore next */
+      (e) => `The end date must be ${e} or earlier.`
+    )
+  },
+  timePicker: {
+    defaultTo12HourClock: !0,
+    chooseTimeLabel: "Choose time",
+    changeTimeLabel: (
+      /* istanbul ignore next */
+      (e) => `Change time, ${e}`
+    ),
+    hoursLabel: "hours",
+    minutesLabel: "minutes",
+    secondsLabel: "seconds",
+    meridiesLabel: "AM/PM",
+    invalidTimeError: "Please enter a valid time."
+  },
+  dateTimePicker: {
+    chooseDateTimeLabel: "Choose date and time",
+    changeDateTimeLabel: (
+      /* istanbul ignore next */
+      (e) => `Change date and time, ${e}`
+    ),
+    invalidDateTimeError: "Please enter a valid date and time.",
+    dateBeforeMinDateError: (
+      /* istanbul ignore next */
+      (e) => `Date must be ${e} or later.`
+    ),
+    dateAfterMaxDateError: (
+      /* istanbul ignore next */
+      (e) => `Date must be ${e} or earlier.`
+    ),
+    timeBeforeMinTimeError: (
+      /* istanbul ignore next */
+      (e) => `Time must be ${e} or later.`
+    ),
+    timeAfterMaxTimeError: (
+      /* istanbul ignore next */
+      (e) => `Time must be ${e} or earlier.`
+    )
+  },
+  filePicker: {
+    invalidFileTypeError: "You can't select files of this type.",
+    maxFilesExceededError: "You can't select any more files.",
+    fileTooBigError: "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.",
+    removeFileLabel: "Remove file",
+    invalidFilesError: "One or more selected files are invalid. Please, upload only valid file types under the size limit.",
+    uploadFilesLabel: "Upload files"
+  },
+  audioPlayer: {
+    playButtonLabel: "Play",
+    pauseButtonLabel: "Pause",
+    sliderLabel: "Audio progress bar",
+    skipForwardButton: "Skip Forward",
+    skipBackwardButton: "Skip Backward"
+  },
+  alert: {
+    dismissButtonLabel: "Close"
+  },
+  dialog: {
+    dismissButtonLabel: "Close"
+  },
+  banner: {
+    dismissButtonLabel: "Close"
+  },
+  numberField: {
+    incrementButtonLabel: (
+      /* istanbul ignore next */
+      (e) => e === 1 ? "Increase value" : `Increase value by ${e}`
+    ),
+    decrementButtonLabel: (
+      /* istanbul ignore next */
+      (e) => e === 1 ? "Decrease value" : `Decrease value by ${e}`
+    ),
+    updatedValueAnnouncement: (
+      /* istanbul ignore next */
+      (e) => `Updated value: ${e}`
+    )
+  },
+  splitButton: {
+    showMoreActionsLabel: "Show more actions"
+  },
+  videoPlayer: j,
+  rangeSlider: {
+    startThumbLabel: "min",
+    endThumbLabel: "max"
+  },
+  dialPad: {
+    inputLabel: "Phone number",
+    deleteButtonLabel: "Delete last digit",
+    callButtonLabel: "Call",
+    endCallButtonLabel: "End call",
+    digitOneLabel: "1",
+    digitTwoLabel: "2 ABC",
+    digitThreeLabel: "3 DEF",
+    digitFourLabel: "4 GHI",
+    digitFiveLabel: "5 JKL",
+    digitSixLabel: "6 MNO",
+    digitSevenLabel: "7 PQRS",
+    digitEightLabel: "8 TUV",
+    digitNineLabel: "9 WXYZ",
+    digitAsteriskLabel: "*",
+    digitZeroLabel: "0",
+    digitHashtagLabel: "#"
+  },
+  tab: {
+    dismissButtonLabel: "Press the DELETE key to close this tab"
+  },
+  searchableSelect: {
+    clearButtonLabel: "Clear selection",
+    noOptionsMessage: "No options",
+    noMatchesMessage: "No options found",
+    loadingOptionsMessage: "Loading...",
+    removeTagButtonLabel: (
+      /* istanbul ignore next */
+      (e) => `Remove ${e}`
+    ),
+    optionSelectedMessage: (
+      /* istanbul ignore next */
+      (e) => `Option ${e} selected.`
+    ),
+    optionDeselectedMessage: (
+      /* istanbul ignore next */
+      (e) => `Option ${e} deselected.`
+    ),
+    optionFocusedMessage: (
+      /* istanbul ignore next */
+      (e, t, a, n) => `Option ${e} focused, ${n ? "selected, " : ""}${t} of ${a}.`
+    ),
+    maxSelectedMessage: (
+      /* istanbul ignore next */
+      (e, t) => `${e} of ${t} selected.`
+    )
+  },
+  richTextEditor: {
+    textBlockType: "Text Block Type",
+    textSize: "Text Size",
+    bold: "Bold",
+    italics: "Italics",
+    underline: "Underline",
+    strikethrough: "Strikethrough",
+    monospace: "Monospace",
+    dragAndDropFilesHere: "Drag&Drop files here"
+  },
+  button: {
+    pendingLabel: "Loading..."
+  },
+  feedbackMessage: {
+    errorIconText: "Error:",
+    successIconText: "Success:"
+  },
+  connotationAnnoncement: {
+    accentIcon: "Accent:",
+    alertIcon: "Alert:",
+    informationIcon: "Information:",
+    successIcon: "Success:",
+    warningIcon: "Warning:",
+    announcementIcon: "Announcement:",
+    ctaIcon: "Call to action:"
+  },
+  charCount: {
+    charactersLimitMessage: (
+      /* istanbul ignore next */
+      (e) => `You can enter up to ${e} characters`
+    ),
+    charactersRemainingMessage: (
+      /* istanbul ignore next */
+      (e) => `You have ${e} characters remaining`
+    )
+  },
+  dataGrid: {
+    cell: {
+      selected: "Selected",
+      button: "(button)"
+    }
+  },
+  pagination: {
+    previousPageLabel: "Go to previous page",
+    nextPageLabel: "Go to next page",
+    goToPageLabel: (
+      /* istanbul ignore next */
+      (e) => `Go to page ${e}`
+    )
+  },
+  tag: {
+    remove: (
+      /* istanbul ignore next */
+      (e) => `Remove ${e}`
+    )
+  },
+  toggletip: {
+    anchorLabel: (
+      /* istanbul ignore next */
+      (e) => e ? `Show more information about ${e}` : "Show more information"
+    )
+  },
+  simpleColorPicker: {
+    colorPaletteLabel: "Color palette",
+    colorSwatchLabel: (
+      /* istanbul ignore next */
+      (e, t, a) => {
+        let n = t ? `Select ${t}, hex: ${e}` : `Select ${e}`;
+        return a && (n += ", selected."), n;
+      }
+    )
+  }
+};
+var K = Object.defineProperty, Z = (e, t, a, n) => {
+  for (var o = void 0, i = e.length - 1, r; i >= 0; i--)
+    (r = e[i]) && (o = r(t, a, o) || o);
+  return o && K(t, a, o), o;
+};
+class _ {
+  constructor() {
+    this.locale = q;
+  }
+}
+Z([
+  J
+], _.prototype, "locale");
+const Q = new _(), ee = (e) => {
+  class t extends e {
+    /**
+     * @internal
+     */
+    get locale() {
+      return Q.locale;
+    }
+  }
+  return t;
+};
+export {
+  ee as L
+};

package/bundled/mixins.cjs

@@ -0,0 +1,33 @@
+"use strict";const a=require("./vivid-element.cjs"),y=require("./definition2.cjs"),T=require("./definition12.cjs"),_=require("./class-names.cjs"),m=require("./when.cjs"),$=require("./localized.cjs"),x=require("./slotted.cjs"),F=":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 I=Object.defineProperty,D=(e,t,s,o)=>{for(var n=void 0,i=e.length-1,c;i>=0;i--)(c=e[i])&&(n=c(t,s,n)||n);return n&&I(t,s,n),n};class d extends $.Localized(a.VividElement){constructor(){super(...arguments),this.type="none"}}D([a.attr],d.prototype,"type");function g(e,t,s){const o=e.tagFor(y.Icon);return a.html`<${o} class="icon" name="${t}" label="${n=>n.locale.feedbackMessage[s]}"></${o}>`}function w(e){const t={none:"",helper:"",error:g(e,"info-line","errorIconText"),success:g(e,"check-circle-line","successIconText")};return a.html`${s=>t[s.type]}`}const b=e=>e==="error",C=e=>{const t=a.html`<div
+		class="${s=>_.classNames("message",`${s.type}-message`)}"
+	>
+		${w(e)}<slot></slot>
+	</div>`;return a.html`${m.when(s=>!b(s.type),t)}
+		<span class="announcement" role="status" aria-live="polite">
+			${m.when(s=>b(s.type),t)}
+		</span>`},S=a.defineVividComponent("feedback-message",d,C,[y.iconDefinition,T.visuallyHiddenDefinition],{styles:F});class M{constructor(t,s){this.source=null,this.templateBindingObserver=a.Observable.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()}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 B extends a.HTMLDirective{constructor(t){super(),this.templateBinding=t,this.createPlaceholder=a.DOM.createBlockPlaceholder,this.isTemplateBindingVolatile=a.Observable.isVolatileBinding(t)}createBehavior(){return new M(this.templateBinding,this.isTemplateBindingVolatile)}}function f(e){const t=typeof e=="function"?e:()=>e;return new B(t)}const r=[];for(let e=0;e<256;++e)r.push((e+256).toString(16).slice(1));function H(e,t=0){return(r[e[t+0]]+r[e[t+1]]+r[e[t+2]]+r[e[t+3]]+"-"+r[e[t+4]]+r[e[t+5]]+"-"+r[e[t+6]]+r[e[t+7]]+"-"+r[e[t+8]]+r[e[t+9]]+"-"+r[e[t+10]]+r[e[t+11]]+r[e[t+12]]+r[e[t+13]]+r[e[t+14]]+r[e[t+15]]).toLowerCase()}let h;const O=new Uint8Array(16);function U(){if(!h){if(typeof crypto>"u"||!crypto.getRandomValues)throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");h=crypto.getRandomValues.bind(crypto)}return h(O)}const L=typeof crypto<"u"&&crypto.randomUUID&&crypto.randomUUID.bind(crypto),v={randomUUID:L};function P(e,t,s){if(v.randomUUID&&!e)return v.randomUUID();e=e||{};const o=e.random??e.rng?.()??U();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,H(o)}const p=()=>P();var V=Object.defineProperty,u=(e,t,s,o)=>{for(var n=void 0,i=e.length-1,c;i>=0;i--)(c=e[i])&&(n=c(t,s,n)||n);return n&&V(t,s,n),n};const k=e=>{class t extends e{get _feedbackDescribedBy(){return"feedback slotted-helper-text-feedback"}_internalFeedback(){const o=this._helperTextSlottedContent?.length?"":this.helperText,n=this.errorValidationMessage,i=this.successText;return i?{type:"success",message:i}:n?{type:"error",message:n}:o?{type:"helper",message:o}:{type:"none",message:""}}_slottedHelperTextFeedbackType(){return this._internalFeedback().type==="none"&&this._helperTextSlottedContent?.length?"helper":"none"}_getFeedbackTemplate(o){const n=o.tagFor(d);return a.html`
+				<${n} id="feedback" :type="${i=>i._internalFeedback().type}">
+					${i=>i._internalFeedback().message}
+				</${n}>
+				<${n}
+					id="slotted-helper-text-feedback"
+					:type="${i=>i._slottedHelperTextFeedbackType()}"
+				>
+					<slot name="helper-text" ${x.slotted("_helperTextSlottedContent")}></slot>
+				</${n}>
+			`}}return u([a.attr({attribute:"helper-text"})],t.prototype,"helperText"),u([a.observable],t.prototype,"_helperTextSlottedContent"),t},R=e=>{const t=()=>`vvd-feedback-${p()}`,s=()=>`vvd-slotted-feedback-${p()}`;class o extends k(e){constructor(){super(...arguments),this._slottedHelperTextIds=[],this._feedbackId=t()}_helperTextSlottedContentChanged(i,c){for(const l of c)l.id||(l.id=s());this._slottedHelperTextIds=c.map(l=>l.id)}get _feedbackDescribedBy(){return[this._feedbackId,...this._slottedHelperTextIds].join(" ")}_getFeedbackTemplate(i){const c=i.tagFor(d);return a.html`
+				<slot name="_feedback"></slot>
+				${f(a.html`<${c}
+					slot="_feedback"
+					id="${l=>l._feedbackId}"
+					:type="${l=>l._internalFeedback().type}"
+				>
+					${l=>l._internalFeedback().message}
+				</${c}>`)}
+				<${c} :type="${l=>l._slottedHelperTextFeedbackType()}">
+					<slot
+						name="helper-text"
+						${x.slotted("_helperTextSlottedContent")}
+					></slot>
+				</${c}>
+			`}}return u([a.observable],o.prototype,"_slottedHelperTextIds"),o};exports.WithFeedback=k;exports.WithLightDOMFeedback=R;exports.feedbackMessageDefinition=S;exports.generateRandomId=p;exports.renderInLightDOM=f;