@vonage/vivid 3.48.0 → 3.49.0-preview.0

package/shared/definition7.cjs

@@ -0,0 +1,72 @@
+'use strict';
+
+const index = require('./index.cjs');
+const definition = require('./definition26.cjs');
+const affix = require('./affix.cjs');
+const applyMixins = require('./apply-mixins.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 Badge extends index.FoundationElement {
+}
+__decorateClass([
+  index.attr
+], Badge.prototype, "connotation", 2);
+__decorateClass([
+  index.attr
+], Badge.prototype, "shape", 2);
+__decorateClass([
+  index.attr
+], Badge.prototype, "appearance", 2);
+__decorateClass([
+  index.attr
+], Badge.prototype, "text", 2);
+applyMixins.applyMixins(Badge, affix.AffixIconWithTrailing);
+
+const styles = ":host{display:inline-block}.base{--_badge-block-size:calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:var(--_badge-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-condensed-bold);inline-size:100%;padding-inline:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-badge-cta-firm, var(--vvd-color-cta-600))}.base.connotation-success{--_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-badge-success-firm, var(--vvd-color-success-600))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-badge-alert-firm, var(--vvd-color-alert-600))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-firm: var(--vvd-badge-warning-firm, var(--vvd-color-warning-600))}.base.connotation-information{--_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));--_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));--_connotation-color-firm: var(--vvd-badge-information-firm, var(--vvd-color-information-600))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information){--_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-badge-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_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.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.base.icon-only{inline-size:var(--_badge-block-size)}}.text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:14px}slot[name=icon]{flex-shrink:0;font-size:calc(var(--_badge-block-size) / 1.6667);line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}\n";
+
+const getClasses = ({
+  connotation,
+  appearance,
+  shape,
+  iconTrailing,
+  text,
+  icon
+}) => classNames.classNames(
+  "base",
+  [`connotation-${connotation}`, Boolean(connotation)],
+  [`appearance-${appearance}`, Boolean(appearance)],
+  [`shape-${shape}`, Boolean(shape)],
+  ["icon-trailing", iconTrailing],
+  ["icon-only", !text && Boolean(icon)]
+);
+const badgeTemplate = (context) => {
+  const affixIconTemplate = affix.affixIconTemplateFactory(context);
+  return index.html`
+    <span class="${getClasses}">
+      ${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
+			${when.when((x) => x.text, (x) => index.html`<span class="text">${x.text}</span>`)}
+	</span>`;
+};
+
+const badgeDefinition = Badge.compose({
+  baseName: "badge",
+  template: badgeTemplate,
+  styles
+});
+const badgeRegistries = [badgeDefinition(), ...definition.iconRegistries];
+const registerBadge = index.registerFactory(badgeRegistries);
+
+exports.badgeDefinition = badgeDefinition;
+exports.registerBadge = registerBadge;

package/shared/definition8.cjs

@@ -0,0 +1,152 @@
+'use strict';
+
+const index = require('./index.cjs');
+const definition = require('./definition11.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 slotted = require('./slotted.cjs');
+const when = require('./when.cjs');
+const classNames = require('./class-names.cjs');
+
+const styles = ":host{display:block}.control{overflow:hidden;max-height:160px;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);transition:max-height var(--transition-delay, .2s)}.control.connotation-success{--_connotation-color-primary: var(--vvd-banner-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-banner-success-primary-text, var(--vvd-color-canvas))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-banner-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-banner-alert-primary-text, var(--vvd-color-canvas))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-banner-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-banner-announcement-primary-text, var(--vvd-color-canvas))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-banner-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-banner-warning-primary-text, var(--vvd-color-canvas-text))}.control:not(.connotation-success,.connotation-alert,.connotation-announcement,.connotation-warning){--_connotation-color-primary: var(--vvd-banner-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-banner-information-primary-text, var(--vvd-color-canvas))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.removing{max-height:0}.header{display:flex;min-height:calc(1px*(60 + 4*clamp(-1,var(--vvd-size-density, 0),2)));align-items:center;font:var(--vvd-typography-base-bold);inline-size:100%}.header .content{display:flex;flex-grow:1;align-items:center;justify-content:center;column-gap:16px;inline-size:100%;padding-inline:16px}.header .content slot[name=icon]{flex-shrink:0;font-size:20px;line-height:1}.header .content .action-items{flex-shrink:0}.header .dismiss-button{flex-shrink:0;margin-inline-end: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.Information, "info-solid"],
+  [enums.Connotation.Announcement, "megaphone-solid"],
+  [enums.Connotation.Success, "check-circle-solid"],
+  [enums.Connotation.Warning, "warning-solid"],
+  [enums.Connotation.Alert, "error-solid"]
+]);
+const defaultConnotation = (connotation = enums.Connotation.Information) => connotationIconMap.get(connotation);
+class Banner extends index.FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.dismissButtonAriaLabel = null;
+    this.role = null;
+    this.removable = false;
+    this.#handleRemoveEnd = () => {
+      this.$emit("removed");
+      this.parentElement && this.parentElement.removeChild(this);
+    };
+    this.#closeOnKeyDown = (e) => {
+      if (e.key !== "Escape" || !this.removable) {
+        return;
+      }
+      this.remove();
+    };
+  }
+  get conditionedIcon() {
+    return this.icon ?? defaultConnotation(this.connotation);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("keydown", this.#closeOnKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", this.#closeOnKeyDown);
+  }
+  remove() {
+    this.$emit("removing");
+    const banner = this.shadowRoot && this.shadowRoot.querySelector(".control");
+    if (banner) {
+      banner.classList.add("removing");
+      banner.addEventListener("transitionend", this.#handleRemoveEnd);
+    }
+  }
+  #handleRemoveEnd;
+  #closeOnKeyDown;
+}
+__decorateClass([
+  index.attr({ attribute: "dismiss-aria-label" })
+], Banner.prototype, "dismissButtonAriaLabel", 2);
+__decorateClass([
+  index.attr
+], Banner.prototype, "role", 2);
+__decorateClass([
+  index.attr({ attribute: "action-href" })
+], Banner.prototype, "actionHref", 2);
+__decorateClass([
+  index.attr({ attribute: "action-text" })
+], Banner.prototype, "actionText", 2);
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], Banner.prototype, "removable", 2);
+__decorateClass([
+  index.attr({ attribute: "aria-live" })
+], Banner.prototype, "ariaLive", 2);
+__decorateClass([
+  index.attr()
+], Banner.prototype, "text", 2);
+__decorateClass([
+  index.attr()
+], Banner.prototype, "connotation", 2);
+__decorateClass([
+  index.observable
+], Banner.prototype, "actionItemsSlottedContent", 2);
+applyMixins.applyMixins(Banner, affix.AffixIcon);
+applyMixins.applyMixins(Banner, localized.Localized);
+
+const getClasses = (_) => classNames.classNames(
+  "control",
+  [`connotation-${_.connotation}`, !!_.connotation]
+);
+function renderDismissButton(buttonTag) {
+  return index.html`
+	  <${buttonTag}
+	  		aria-label="${(x) => x.dismissButtonAriaLabel || x.locale.banner.dismissButtonLabel}"
+			part="vvd-theme-alternate"
+			size="condensed"
+			class="dismiss-button"
+			icon="close-line"
+			@click="${(x) => x.remove()}">
+	  </${buttonTag}>`;
+}
+const BannerTemplate = (context) => {
+  const affixIconTemplate = affix.affixIconTemplateFactory(context);
+  const buttonTag = context.tagFor(definition.Button);
+  return index.html`
+	  <div class="${getClasses}">
+		  <header class="header">
+					<div class="content">
+            ${(x) => affixIconTemplate(x.conditionedIcon, affix.IconWrapper.Slot)}
+						<div class="banner-message"
+						 role="${(x) => x.role ? x.role : "status"}"
+						 aria-live="${(x) => x.ariaLive ? x.ariaLive : "polite"}">
+									${(x) => x.text}
+            </div>
+						<slot class="action-items" ${slotted.slotted("actionItemsSlottedContent")} name="action-items"></slot>
+					</div>
+
+			  ${when.when((x) => x.removable, renderDismissButton(buttonTag))}
+		  </header>
+	  </div>
+	`;
+};
+
+const bannerDefinition = Banner.compose({
+  baseName: "banner",
+  template: BannerTemplate,
+  styles
+});
+const bannerRegistries = [bannerDefinition(), ...definition$1.iconRegistries, ...definition.buttonRegistries];
+const registerBanner = index.registerFactory(bannerRegistries);
+
+exports.bannerDefinition = bannerDefinition;
+exports.bannerRegistries = bannerRegistries;
+exports.registerBanner = registerBanner;

package/shared/definition9.cjs

@@ -0,0 +1,69 @@
+'use strict';
+
+const index = require('./index.cjs');
+const definition = require('./definition26.cjs');
+const definition$1 = require('./definition58.cjs');
+const breadcrumbItem = require('./breadcrumb-item.cjs');
+const textAnchor_template = require('./text-anchor.template.cjs');
+const icon = require('./icon.cjs');
+const when = require('./when.cjs');
+const classNames = require('./class-names.cjs');
+
+const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{font:inherit}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -4px;border-radius:2px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}.control:any-link:hover{text-decoration:underline}\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 BreadcrumbItem extends breadcrumbItem.BreadcrumbItem {
+  constructor() {
+    super();
+  }
+}
+__decorateClass([
+  index.attr
+], BreadcrumbItem.prototype, "text", 2);
+
+const getClasses = (_) => classNames.classNames("base");
+const BreadcrumbItemTemplate = (context, definition) => {
+  const iconTag = context.tagFor(icon.Icon);
+  return index.html`
+	<div role="listitem" class="${getClasses}">
+		${when.when(
+    (x) => x.text && !x.href,
+    index.html`${(x) => x.text}`
+  )}
+
+		${when.when(
+    (x) => x.text && x.href && x.href.length > 0,
+    index.html`${textAnchor_template.textAnchorTemplate(context)}`
+  )}
+
+		${when.when(
+    (x) => x.separator,
+    index.html`<${iconTag} class="separator" name="chevron-right-solid"></${iconTag}>`
+  )}
+	</div>`;
+};
+
+const breadcrumbItemDefinition = BreadcrumbItem.compose({
+  baseName: "breadcrumb-item",
+  template: BreadcrumbItemTemplate,
+  styles,
+  shadowOptions: {
+    delegatesFocus: true
+  }
+});
+const breadcrumbItemRegistries = [breadcrumbItemDefinition(), ...definition.iconRegistries, ...definition$1.focusRegistries];
+const registerBreadcrumbItem = index.registerFactory(breadcrumbItemRegistries);
+
+exports.breadcrumbItemDefinition = breadcrumbItemDefinition;
+exports.breadcrumbItemRegistries = breadcrumbItemRegistries;
+exports.registerBreadcrumbItem = registerBreadcrumbItem;