@vonage/vivid 3.48.0 → 3.49.0-preview.0

package/shared/definition5.cjs

@@ -0,0 +1,199 @@
+'use strict';
+
+const index = require('./index.cjs');
+const definition = require('./definition11.cjs');
+const definition$1 = require('./definition44.cjs');
+const definition$2 = require('./definition58.cjs');
+require('./affix.cjs');
+require('./index2.cjs');
+const localized = require('./localized.cjs');
+const applyMixins = require('./apply-mixins.cjs');
+const when = require('./when.cjs');
+const ref = require('./ref.cjs');
+const classNames = require('./class-names.cjs');
+
+const styles = ".base{display:inline-flex;align-items:center;padding:8px;color:var(--vvd-color-canvas-text);user-select:none}.base .slider{min-inline-size:var(--audio-player-min-inline-size, 200px)}.base .controls{display:flex;align-items:center;gap:16px}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{margin-inline:6px;min-inline-size:32px}\n";
+
+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;
+  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);
+  return result;
+};
+class AudioPlayer extends index.FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.playButtonAriaLabel = null;
+    this.pauseButtonAriaLabel = null;
+    this.sliderAriaLabel = null;
+    this.disabled = false;
+    this.notime = false;
+    this.paused = true;
+    /**
+     * @internal
+     */
+    this._rewind = () => {
+      this.paused = true;
+      if (this._playerEl) {
+        this._playerEl.pause();
+        this._playerEl.currentTime = this._playerEl.duration * (Number(this._sliderEl.value) / 100);
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("keydown", this._rewind);
+    this.addEventListener("mousedown", this._rewind);
+    this.addEventListener("keyup", this._rewind);
+    document.addEventListener("mouseup", this._rewind);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", this._rewind);
+    this.removeEventListener("mousedown", this._rewind);
+    this.removeEventListener("keyup", this._rewind);
+    document.removeEventListener("mouseup", this._rewind);
+  }
+  /**
+   * @internal
+   */
+  _togglePlay() {
+    if (this.paused) {
+      this._updateProgress();
+      this._playerEl.play();
+    } else {
+      this._playerEl.pause();
+    }
+    this.paused = !this.paused;
+  }
+  /**
+   * @internal
+   */
+  _updateProgress() {
+    let currentTime;
+    const current = this._playerEl.currentTime;
+    const percent = current / this._playerEl.duration * 100;
+    if (this._sliderEl) {
+      this._sliderEl.value = percent.toString();
+      this._sliderEl.ariaValuetext = this._formatTime(current);
+    }
+    if (percent === 100) {
+      this.paused = true;
+    }
+    if (this._timeStampEl) {
+      currentTime = this._timeStampEl.querySelector(".current-time");
+      if (currentTime)
+        currentTime.textContent = this._formatTime(current);
+    }
+  }
+  /**
+   * @internal
+   */
+  _updateTotalTime() {
+    let totalTime;
+    if (this._playerEl)
+      this.duration = this._playerEl.duration;
+    if (this._timeStampEl) {
+      totalTime = this._timeStampEl.querySelector(".total-time");
+      if (totalTime)
+        totalTime.textContent = this._formatTime(this._playerEl.duration);
+    }
+  }
+  /**
+   * @internal
+   */
+  _formatTime(time) {
+    const min = Math.floor(time / 60);
+    const sec = Math.floor(time % 60);
+    return min + ":" + (sec < 10 ? "0" + sec : sec);
+  }
+}
+__decorateClass([
+  index.attr({ attribute: "play-button-aria-label" })
+], AudioPlayer.prototype, "playButtonAriaLabel", 2);
+__decorateClass([
+  index.attr({ attribute: "pause-button-aria-label" })
+], AudioPlayer.prototype, "pauseButtonAriaLabel", 2);
+__decorateClass([
+  index.attr({ attribute: "slider-aria-label" })
+], AudioPlayer.prototype, "sliderAriaLabel", 2);
+__decorateClass([
+  index.attr
+], AudioPlayer.prototype, "connotation", 2);
+__decorateClass([
+  index.attr
+], AudioPlayer.prototype, "src", 2);
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], AudioPlayer.prototype, "disabled", 2);
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], AudioPlayer.prototype, "notime", 2);
+__decorateClass([
+  index.observable
+], AudioPlayer.prototype, "paused", 2);
+__decorateClass([
+  index.observable
+], AudioPlayer.prototype, "duration", 2);
+applyMixins.applyMixins(AudioPlayer, localized.Localized);
+
+const getClasses = ({ disabled, duration }) => classNames.classNames(
+  ["disabled", Boolean(disabled) || !Boolean(duration)]
+);
+function renderButton(context) {
+  const buttonTag = context.tagFor(definition.Button);
+  return index.html`<${buttonTag} class="pause" @click="${(x) => x._togglePlay()}"
+	icon="${(x) => x.paused ? "play-solid" : "pause-solid"}" 
+	aria-label="${(x) => x.paused ? x.playButtonAriaLabel || x.locale.audioPlayer.playButtonLabel : x.pauseButtonAriaLabel || x.locale.audioPlayer.playButtonLabel}" 
+	size='condensed' 
+	connotation="${(x) => x.connotation}"
+	?disabled="${(x) => x.disabled || !x.duration}" 
+  ></${buttonTag}>`;
+}
+function renderSlider(context) {
+  const sliderTag = context.tagFor(definition$1.Slider);
+  return index.html`<${sliderTag}
+	${ref.ref("_sliderEl")} class="slider" 
+	aria-label="${(x) => x.sliderAriaLabel || x.locale.audioPlayer.sliderLabel}"
+	value="0" max="100" 
+	connotation="${(x) => x.connotation}"
+	?disabled="${(x) => x.disabled || !x.duration}">
+	</${sliderTag}>`;
+}
+function renderTimestamp() {
+  return index.html`
+	<div class="time-stamp" ${ref.ref("_timeStampEl")}>
+		<span class="current-time">0:00</span>
+		<span>/</span>
+		<span class="total-time">0:00</span>
+	</div>`;
+}
+const AudioPlayerTemplate = (context) => {
+  return index.html`
+    <div class="base ${getClasses}">
+      <div class="controls">
+	  	${renderButton(context)}
+      	${when.when((x) => !x.notime, renderTimestamp())}
+		${renderSlider(context)}
+      </div>
+      <audio ${ref.ref("_playerEl")} src="${(x) => x.src}"
+      @timeupdate="${(x) => x._updateProgress()}" @loadedmetadata="${(x) => x._updateTotalTime()}"></audio>
+    </div>`;
+};
+
+const audioPlayerDefinition = AudioPlayer.compose({
+  baseName: "audio-player",
+  template: AudioPlayerTemplate,
+  styles
+});
+const audioPlayerRegistries = [audioPlayerDefinition(), ...definition.buttonRegistries, ...definition$1.sliderRegistries, ...definition$2.focusRegistries];
+const registerAudioPlayer = index.registerFactory(audioPlayerRegistries);
+
+exports.audioPlayerDefinition = audioPlayerDefinition;
+exports.audioPlayerRegistries = audioPlayerRegistries;
+exports.registerAudioPlayer = registerAudioPlayer;

package/shared/definition50.cjs

@@ -0,0 +1,52 @@
+'use strict';
+
+const index = require('./index.cjs');
+const classNames = require('./class-names.cjs');
+
+const styles = ".base{display:flex;flex-wrap:wrap;gap:8px}\n";
+
+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;
+  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);
+  return result;
+};
+class TagGroup extends index.FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.ariaLabel = null;
+  }
+}
+__decorateClass([
+  index.attr({ attribute: "aria-label" })
+], TagGroup.prototype, "ariaLabel", 2);
+
+const getClasses = (_) => classNames.classNames(
+  "base"
+);
+const TagGroupTemplate = () => {
+  return index.html`
+		<div class="${getClasses}" role="listbox" aria-orientation="horizontal" aria-label="${(x) => x.ariaLabel}">
+			<slot></slot>
+		</div>
+	`;
+};
+
+const tagGroupDefinition = TagGroup.compose(
+  {
+    baseName: "tag-group",
+    template: TagGroupTemplate,
+    styles
+  }
+);
+const tagGroupRegistries = [tagGroupDefinition()];
+const registerTagGroup = index.registerFactory(tagGroupRegistries);
+
+exports.registerTagGroup = registerTagGroup;
+exports.tagGroupDefinition = tagGroupDefinition;
+exports.tagGroupRegistries = tagGroupRegistries;

package/shared/definition51.cjs

@@ -0,0 +1,150 @@
+'use strict';
+
+const index = require('./index.cjs');
+const definition = require('./definition26.cjs');
+const definition$1 = require('./definition58.cjs');
+const affix = require('./affix.cjs');
+const applyMixins = require('./apply-mixins.cjs');
+const focus = require('./focus2.cjs');
+const icon = require('./icon.cjs');
+const when = require('./when.cjs');
+const classNames = require('./class-names.cjs');
+
+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;
+  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);
+  return result;
+};
+class Tag extends index.FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.removable = false;
+    this.disabled = false;
+    this.selectable = false;
+    this.selected = false;
+    this.#select = () => {
+      if (!this.selectable || this.disabled) {
+        return;
+      }
+      this.selected = !this.selected;
+      this.$emit("selected-change");
+    };
+  }
+  remove() {
+    if (!this.removable || this.selectable) {
+      return;
+    }
+    this.$emit("removed");
+    this.parentElement && this.parentElement.removeChild(this);
+  }
+  #select;
+  handleKeydown(e) {
+    if (e.key === "Enter") {
+      this.#select();
+    }
+    if (e.key === "Delete" || e.key === "Backspace") {
+      this.remove();
+    }
+    return true;
+  }
+  handleClick() {
+    this.#select();
+  }
+}
+__decorateClass([
+  index.attr
+], Tag.prototype, "connotation", 2);
+__decorateClass([
+  index.attr
+], Tag.prototype, "shape", 2);
+__decorateClass([
+  index.attr
+], Tag.prototype, "appearance", 2);
+__decorateClass([
+  index.attr
+], Tag.prototype, "label", 2);
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], Tag.prototype, "removable", 2);
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], Tag.prototype, "disabled", 2);
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], Tag.prototype, "selectable", 2);
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], Tag.prototype, "selected", 2);
+applyMixins.applyMixins(Tag, affix.AffixIcon);
+
+const styles = ".base{--tag-block-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:var(--tag-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-tag-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));--_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-tag-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(:active,.active):where(:not(:disabled,.disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(:disabled,.disabled).appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:14px}@supports selector(:focus-visible){.base:focus-visible{outline:none}}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{display:flex;align-items:center;background-color:var(--_appearance-color-fill);border-radius:inherit;cursor:pointer}.focus-indicator{--focus-stroke-gap-color: transparent}.base:not(:focus-visible) .focus-indicator{display:none}\n";
+
+const getClasses = ({
+  connotation,
+  appearance,
+  shape,
+  disabled,
+  selectable,
+  removable,
+  selected
+}) => classNames.classNames(
+  "base",
+  ["disabled", disabled],
+  ["selectable", selectable],
+  ["selected", selectable && selected],
+  ["removable", removable && !selectable],
+  [`connotation-${connotation}`, Boolean(connotation)],
+  [`appearance-${appearance}`, Boolean(appearance)],
+  [`shape-${shape}`, Boolean(shape)]
+);
+function renderDismissButton(iconTag) {
+  return index.html`
+	<span
+		aria-hidden="true"
+		class="dismiss-button"
+		@click="${(x) => x.remove()}">
+		<${iconTag} name="close-line"></${iconTag}>
+	</span>`;
+}
+const tagTemplate = (context) => {
+  const affixIconTemplate = affix.affixIconTemplateFactory(context);
+  const iconTag = context.tagFor(icon.Icon);
+  const focusTemplate = focus.focusTemplateFactory(context);
+  return index.html`
+	<span class="${getClasses}"
+	role="option"
+	aria-disabled="${(x) => x.disabled}"
+	aria-selected="${(x) => x.selectable}"
+	tabindex="${(x) => x.disabled ? null : 0}"
+	@keydown="${(x, c) => x.handleKeydown(c.event)}"
+	@click="${(x) => x.handleClick()}">
+		${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
+		${when.when((x) => x.label, (x) => index.html`<span class="label">${x.label}</span>`)}
+		${when.when((x) => x.removable && !x.selectable, renderDismissButton(iconTag))}
+		${when.when(
+    (x) => x.selectable && x.selected,
+    index.html`<${iconTag} class="selectable-icon" name="check-circle-solid"></${iconTag}>`
+  )}
+		${() => focusTemplate}
+	</span>`;
+};
+
+const tagDefinition = Tag.compose({
+  baseName: "tag",
+  template: tagTemplate,
+  styles,
+  shadowOptions: {
+    delegatesFocus: true
+  }
+});
+const tagRegistries = [tagDefinition(), ...definition.iconRegistries, ...definition$1.focusRegistries];
+const registerTag = index.registerFactory(tagRegistries);
+
+exports.registerTag = registerTag;
+exports.tagDefinition = tagDefinition;