@vonage/vivid 3.48.0 → 3.49.0-preview.0

package/shared/definition4.cjs

@@ -0,0 +1,198 @@
+'use strict';
+
+const index = require('./index.cjs');
+const definition$2 = require('./definition11.cjs');
+const definition = require('./definition59.cjs');
+const definition$1 = require('./definition26.cjs');
+const enums = require('./enums.cjs');
+const affix = require('./affix.cjs');
+require('./index2.cjs');
+const localized = require('./localized.cjs');
+const applyMixins = require('./apply-mixins.cjs');
+const button = require('./button.cjs');
+const when = require('./when.cjs');
+const classNames = require('./class-names.cjs');
+
+const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline-end:0;inset-inline-start:0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block-end:auto;inset-block-start:0}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}.base{display:flex;align-items:center;padding:16px;background-color:var(--vvd-color-neutral-50);border-radius:8px;color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base .icon{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start: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;
+};
+const connotationIconMap = /* @__PURE__ */ new Map([
+  [enums.Connotation.Accent, "megaphone-line"],
+  [enums.Connotation.Information, "info-line"],
+  [enums.Connotation.Success, "check-circle-line"],
+  [enums.Connotation.Warning, "warning-line"],
+  [enums.Connotation.Alert, "error-line"]
+]);
+class Alert extends index.FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.dismissButtonAriaLabel = null;
+    this.removable = false;
+    this.placement = "bottom";
+    this.timeoutms = 0;
+    this.open = false;
+    this.#closeOnEscape = (e) => {
+      if (this.removable && e.key === "Escape")
+        this.open = false;
+    };
+    this.#onTransitionEnd = () => {
+      if (!this.open) {
+        this.style.display = "none";
+      }
+    };
+  }
+  // timeout to close the alert
+  #timeoutID;
+  openChanged(oldValue, newValue) {
+    if (oldValue === void 0)
+      return;
+    this.$emit(newValue ? "open" : "close");
+    this.#setupTimeout();
+    if (newValue) {
+      this.style.display = "inline";
+      const alertText = this.shadowRoot.querySelector(".alert-text");
+      if (this.removable && alertText) {
+        alertText.setAttribute("tabindex", "0");
+        alertText.focus();
+        alertText.removeAttribute("tabindex");
+      }
+    } else {
+      this.style.display = "none";
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("keydown", this.#closeOnEscape);
+    this.controlEl = this.shadowRoot.querySelector(".control");
+    if (this.controlEl)
+      this.controlEl.addEventListener("transitionend", this.#onTransitionEnd);
+    this.#setupTimeout();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.#timeoutID)
+      clearTimeout(this.#timeoutID);
+    this.removeEventListener("keydown", this.#closeOnEscape);
+    if (this.controlEl)
+      this.controlEl.removeEventListener("transitionend", this.#onTransitionEnd);
+  }
+  get conditionedIcon() {
+    return this.icon || connotationIconMap.get(this.connotation);
+  }
+  #setupTimeout() {
+    if (this.#timeoutID)
+      clearTimeout(this.#timeoutID);
+    if (this.open && this.timeoutms > 0) {
+      this.#timeoutID = setTimeout(() => this.open = false, this.timeoutms);
+    }
+  }
+  #closeOnEscape;
+  #onTransitionEnd;
+}
+__decorateClass([
+  index.attr({ attribute: "dismiss-button-aria-label" })
+], Alert.prototype, "dismissButtonAriaLabel", 2);
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], Alert.prototype, "removable", 2);
+__decorateClass([
+  index.attr({ mode: "fromView" })
+], Alert.prototype, "placement", 2);
+__decorateClass([
+  index.attr
+], Alert.prototype, "headline", 2);
+__decorateClass([
+  index.attr
+], Alert.prototype, "text", 2);
+__decorateClass([
+  index.attr
+], Alert.prototype, "icon", 2);
+__decorateClass([
+  index.attr({
+    mode: "fromView",
+    converter: index.nullableNumberConverter
+  })
+], Alert.prototype, "timeoutms", 2);
+__decorateClass([
+  index.attr
+], Alert.prototype, "connotation", 2);
+__decorateClass([
+  index.attr
+], Alert.prototype, "strategy", 2);
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], Alert.prototype, "open", 2);
+applyMixins.applyMixins(Alert, affix.AffixIcon);
+applyMixins.applyMixins(Alert, localized.Localized);
+
+const getClasses = ({ connotation }) => classNames.classNames(
+  "base",
+  [`connotation-${connotation}`, Boolean(connotation)]
+);
+const getControlClasses = ({ open, placement, strategy }) => classNames.classNames(
+  "control",
+  ["open", open],
+  [`placement-${placement}`, Boolean(placement)],
+  [`strategy-${strategy}`, Boolean(strategy)]
+);
+function renderIcon(context) {
+  const affixIconTemplate = affix.affixIconTemplateFactory(context);
+  return index.html`${(x) => affixIconTemplate(x.conditionedIcon)}`;
+}
+function renderDismissButton(buttonTag) {
+  return index.html`
+		<${buttonTag}
+			aria-label="${(x) => x.dismissButtonAriaLabel || x.locale.alert.dismissButtonLabel}"
+			size="condensed"
+			class="dismiss-button"
+			icon="close-line"
+			@click="${(x) => x.open = false}">
+		</${buttonTag}>`;
+}
+const AlertTemplate = (context) => {
+  const elevationTag = context.tagFor(definition.Elevation);
+  const buttonTag = context.tagFor(button.Button);
+  return index.html`
+	<${elevationTag} class="elevation" dp='8' exportparts="vvd-theme-alternate">
+		<div
+			class="${getControlClasses}"
+			role="${(x) => x.removable ? "alertdialog" : "alert"}"
+			aria-live="assertive"
+		>
+			<div part="vvd-theme-alternate" class="${getClasses}">
+				${when.when((x) => x.icon || x.connotation, renderIcon(context))}
+				<div class="alert-text">
+					${when.when((x) => x.headline, index.html`<header class="headline">${(x) => x.headline}</header>`)}
+					${when.when((x) => x.text, index.html`<div class="main-text">${(x) => x.text}</div>`)}
+					<slot name="main">
+					</slot>
+				</div>
+				<slot class="action-items" name="action-items"></slot>
+				${when.when((x) => x.removable, renderDismissButton(buttonTag))}
+			</div>
+		</div>
+	</${elevationTag}>
+	`;
+};
+
+const alertDefinition = Alert.compose({
+  baseName: "alert",
+  template: AlertTemplate,
+  styles
+});
+const alertRegistries = [alertDefinition(), ...definition$1.iconRegistries, ...definition$2.buttonRegistries, ...definition.elevationRegistries];
+const registerAlert = index.registerFactory(alertRegistries);
+
+exports.alertDefinition = alertDefinition;
+exports.alertRegistries = alertRegistries;
+exports.registerAlert = registerAlert;

package/shared/definition40.cjs

@@ -0,0 +1,49 @@
+'use strict';
+
+const index = require('./index.cjs');
+const definition = require('./definition58.cjs');
+const radio = require('./radio.cjs');
+const focus = require('./focus2.cjs');
+const when = require('./when.cjs');
+const classNames = require('./class-names.cjs');
+
+const styles = "@supports selector(:focus-visible){:host(:focus-visible){outline:none}}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}.base.connotation-cta{--_connotation-color-primary: var(--vvd-radio-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-radio-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-radio-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-backdrop: var(--vvd-radio-cta-backdrop, var(--vvd-color-cta-50));--_connotation-color-firm: var(--vvd-radio-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-radio-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-radio-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-radio-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-backdrop: var(--vvd-radio-accent-backdrop, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-radio-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(:checked,.checked):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(:checked,.checked):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.readonly):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:50%;box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;background-color:var(--_appearance-color-outline);border-radius:inherit;content:\"\";inset:5px;opacity:1;transition:opacity .2s}.base:not(.checked) .control:after{opacity:0}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}.focus-indicator{--focus-inset: -3px;--focus-stroke-gap-color: transparent;border-radius:50%}:host(:not(:focus-visible)) .focus-indicator{display:none}\n";
+
+const getClasses = ({ connotation, checked, readOnly, disabled }) => classNames.classNames(
+  "base",
+  [`connotation-${connotation}`, Boolean(connotation)],
+  ["checked", Boolean(checked)],
+  ["readonly", Boolean(readOnly)],
+  ["disabled", Boolean(disabled)]
+);
+const RadioTemplate = (context) => {
+  const focusTemplate = focus.focusTemplateFactory(context);
+  return index.html`<template role="${(x) => x.ariaLabel ? "presentation" : null}">
+	<div class="${getClasses}"
+		role="radio"
+		aria-label="${(x) => x.ariaLabel}"
+		aria-checked="${(x) => x.checked}"
+		aria-required="${(x) => x.required}"
+		aria-disabled="${(x) => x.disabled}"
+		@keypress="${(x, c) => x.keypressHandler(c.event)}"
+		@click="${(x, c) => x.clickHandler(c.event)}"
+	>
+		<div class="control">
+			${() => focusTemplate}
+		</div>
+		${when.when((x) => x.label, index.html`<label class="label">${(x) => x.label}</label>`)}
+	</div>
+</template>`;
+};
+
+const radioDefinition = radio.Radio.compose({
+  baseName: "radio",
+  template: RadioTemplate,
+  styles
+});
+const radioRegistries = [radioDefinition(), ...definition.focusRegistries];
+const registerRadio = index.registerFactory(radioRegistries);
+
+exports.radioDefinition = radioDefinition;
+exports.radioRegistries = radioRegistries;
+exports.registerRadio = registerRadio;