@vonage/vivid 3.32.0 → 3.35.0

package/shared/definition4.js

@@ -1,17 +1,162 @@
-import { h as html, r as registerFactory } from './index.js';
-import { F as Focus } from './focus.js';
+import { a as attr, F as FoundationElement, n as nullableNumberConverter, h as html, r as registerFactory } from './index.js';
+import { C as Connotation, a as buttonRegistries } from './definition10.js';
+import { E as Elevation, e as elevationRegistries } from './definition56.js';
+import { a as iconRegistries } from './definition24.js';
+import { A as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
+import { a as applyMixins } from './apply-mixins.js';
+import './index2.js';
+import { B as Button$1 } from './button.js';
+import { w as when } from './when.js';
+import { c as classNames } from './class-names.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 22 Aug 2023 13:37:39 GMT\n */\n:host {\n  display: contents;\n  border-radius: inherit;\n}\n\n.control {\n  position: absolute;\n  z-index: 1;\n  box-sizing: border-box;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);\n  inset: var(--focus-inset, 0);\n  outline: 2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));\n  outline-offset: -2px;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Wed, 06 Sep 2023 09:40:36 GMT\n */\n.control {\n  position: fixed;\n  z-index: 10;\n  border-radius: 6px;\n  inline-size: max-content;\n  inset-block-end: 0;\n  inset-inline-end: 0;\n  inset-inline-start: 0;\n  margin-block: 16px;\n  margin-inline: auto;\n  max-inline-size: var(--alert-max-inline-size, fit-content);\n  min-inline-size: var(--alert-min-inline-size, 420px);\n  transition: opacity 150ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n}\n.control.placement-top, .control.placement-top-start, .control.placement-top-end {\n  inset-block-end: auto;\n  inset-block-start: 0;\n}\n.control.placement-top-start, .control.placement-bottom-start {\n  right: auto;\n  inset-inline-end: auto;\n  margin-inline: 16px;\n}\n.control.placement-top-end, .control.placement-bottom-end {\n  inset-inline-start: auto;\n  margin-inline: 16px;\n}\n.control:not(.open) {\n  opacity: 0;\n  transform: scale(0.8);\n}\n.control.open {\n  opacity: 1;\n  transform: scale(1);\n}\n\n.base {\n  display: flex;\n  align-items: center;\n  padding: 16px;\n  background-color: var(--vvd-color-neutral-50);\n  border-radius: 6px;\n  color: var(--vvd-color-canvas-text);\n  column-gap: 16px;\n}\n.base.connotation-success {\n  /* @cssprop [--vvd-alert-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-alert-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas));\n}\n.base.connotation-information {\n  /* @cssprop [--vvd-alert-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-alert-information-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas));\n}\n.base.connotation-alert {\n  /* @cssprop [--vvd-alert-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-alert-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas));\n}\n.base.connotation-warning {\n  /* @cssprop [--vvd-alert-warning-primary=var(--vvd-color-warning-300)] */\n  --_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-alert-warning-primary-text=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text));\n}\n.base:not(.connotation-success, .connotation-information, .connotation-alert, .connotation-warning) {\n  /* @cssprop [--vvd-alert-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-alert-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.base .alert-text {\n  margin-inline-end: auto;\n}\n.base .alert-text .headline {\n  font: var(--vvd-typography-base-bold);\n  margin-block-end: 4px;\n}\n.base .alert-text .main-text {\n  font: var(--vvd-typography-base);\n}\n.base .icon {\n  flex-shrink: 0;\n  color: var(--_appearance-color-fill);\n  font-size: 24px;\n  line-height: 1;\n}\n.base .dismiss-button {\n  border-left: 1px solid var(--vvd-color-neutral-200);\n  padding-inline-start: 8px;\n}";
 
-const focusTemplate = () => html`
-        <span class="control"></span>`;
+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([
+  [Connotation.Accent, "megaphone-line"],
+  [Connotation.Information, "info-line"],
+  [Connotation.Success, "check-circle-line"],
+  [Connotation.Warning, "warning-line"],
+  [Connotation.Alert, "error-line"]
+]);
+class Alert extends FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.removable = false;
+    this.placement = "bottom";
+    this.timeoutms = 0;
+    this.open = false;
+    this.#closeOnEscape = (e) => {
+      if (this.removable && e.key === "Escape")
+        this.open = false;
+    };
+  }
+  // timeout to close the alert
+  #timeoutID;
+  openChanged(oldValue, newValue) {
+    if (oldValue === void 0)
+      return;
+    this.$emit(newValue ? "open" : "close");
+    this.#setupTimeout();
+  }
+  connectedCallback() {
+    this.#setupTimeout();
+    this.addEventListener("keydown", this.#closeOnEscape);
+    super.connectedCallback();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.#timeoutID)
+      clearTimeout(this.#timeoutID);
+    this.removeEventListener("keydown", this.#closeOnEscape);
+  }
+  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;
+}
+__decorateClass([
+  attr({ mode: "boolean" })
+], Alert.prototype, "removable", 2);
+__decorateClass([
+  attr({ mode: "fromView" })
+], Alert.prototype, "placement", 2);
+__decorateClass([
+  attr
+], Alert.prototype, "headline", 2);
+__decorateClass([
+  attr
+], Alert.prototype, "text", 2);
+__decorateClass([
+  attr
+], Alert.prototype, "icon", 2);
+__decorateClass([
+  attr({
+    mode: "fromView",
+    converter: nullableNumberConverter
+  })
+], Alert.prototype, "timeoutms", 2);
+__decorateClass([
+  attr
+], Alert.prototype, "connotation", 2);
+__decorateClass([
+  attr({ mode: "boolean" })
+], Alert.prototype, "open", 2);
+applyMixins(Alert, AffixIcon);
 
-const focusDefinition = Focus.compose({
-  baseName: 'focus',
-  template: focusTemplate,
-  styles: css_248z
+const getClasses = ({ connotation }) => classNames(
+  "base",
+  [`connotation-${connotation}`, Boolean(connotation)]
+);
+const getControlClasses = ({ open, placement }) => classNames(
+  "control",
+  ["open", open],
+  [`placement-${placement}`, Boolean(placement)]
+);
+function renderIcon(context) {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  return html`${(x) => affixIconTemplate(x.conditionedIcon)}`;
+}
+function renderDismissButton(buttonTag) {
+  return html`
+		<${buttonTag}
+			size="condensed"
+			class="dismiss-button"
+			icon="close-line"
+			@click="${(x) => x.open = false}">
+		</${buttonTag}>`;
+}
+const AlertTemplate = (context) => {
+  const elevationTag = context.tagFor(Elevation);
+  const buttonTag = context.tagFor(Button$1);
+  return html`
+	<${elevationTag} class="elevation" dp='8' exportparts="vvd-theme-alternate">
+		<div class="${getControlClasses}" role="alert" aria-live="assertive">
+			<div part="vvd-theme-alternate" class="${getClasses}">
+				${when((x) => x.icon || x.connotation, renderIcon(context))}
+				<div class="alert-text">
+					${when(
+    (x) => x.headline,
+    html`<header class="headline">${(x) => x.headline}</header>`
+  )}
+					${when(
+    (x) => x.text,
+    html`<div class="main-text">${(x) => x.text}</div>`
+  )}
+					<slot name="main">
+					</slot>
+				</div>
+				<slot class="action-items" name="action-items"></slot>
+				${when((x) => x.removable, renderDismissButton(buttonTag))}
+			</div>
+		</div>
+	</${elevationTag}>
+	`;
+};
+
+const alertDefinition = Alert.compose({
+  baseName: "alert",
+  template: AlertTemplate,
+  styles
 });
-const focusRegistries = [focusDefinition()];
-const registerFocus = registerFactory(focusRegistries);
+const alertRegistries = [alertDefinition(), ...iconRegistries, ...buttonRegistries, ...elevationRegistries];
+const registerAlert = registerFactory(alertRegistries);
 
-export { focusRegistries as f, registerFocus as r };
+export { alertDefinition as a, alertRegistries as b, registerAlert as r };

package/shared/definition40.js

@@ -1,62 +1,109 @@
-import { _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
-import { B as BaseProgress } from './base-progress.js';
+import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 22 Aug 2023 13:37:39 GMT\n */\n.base {\n  height: 6px;\n  align-items: center;\n  margin: 0;\n  outline: none;\n}\n.base:not(.connotation-pacific).connotation-cta {\n  /* @cssprop [--vvd-progress-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-progress-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-progress-cta-soft=var(--vvd-color-cta-100)] */\n  --_connotation-color-soft: var(--vvd-progress-cta-soft, var(--vvd-color-cta-100));\n}\n.base:not(.connotation-pacific).connotation-alert {\n  /* @cssprop [--vvd-progress-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-progress-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-progress-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-progress-alert-soft, var(--vvd-color-alert-100));\n}\n.base:not(.connotation-pacific).connotation-success {\n  /* @cssprop [--vvd-progress-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-progress-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-progress-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-progress-success-soft, var(--vvd-color-success-100));\n}\n.base:not(.connotation-pacific):not(.connotation-cta, .connotation-alert, .connotation-success) {\n  /* @cssprop [--vvd-progress-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-progress-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-progress-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-progress-accent-soft, var(--vvd-color-neutral-100));\n}\n.base:not(.connotation-pacific) {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.base.connotation-pacific {\n  --_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600));\n}\n\n.progress {\n  position: relative;\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  block-size: 100%;\n  inline-size: 100%;\n  /* Shape */\n}\n.base:not(.connotation-pacific) .progress {\n  background-color: var(--_appearance-color-fill);\n}\n.base.connotation-pacific .progress {\n  background-color: var(--vvd-color-neutral-100);\n}\n.base:not(.shape-sharp) .progress {\n  border-radius: 3px;\n}\n\n.indeterminate {\n  display: flex;\n  background-color: var(--_connotation-color-primary);\n  block-size: 100%;\n  border-radius: inherit;\n  inline-size: 100%;\n}\n\n.determinate {\n  background-color: var(--_connotation-color-primary);\n  block-size: 100%;\n  border-radius: inherit;\n  transition: all 0.2s ease-in-out;\n}\n.connotation-pacific .determinate {\n  background-image: var(--_connotation-color-primary);\n}\n.reverse .determinate {\n  position: absolute;\n  right: 0;\n}\n.paused .determinate {\n  background: var(--vvd-color-neutral-300);\n}\n\n.indicator-1 {\n  animation: indeterminate-1 2s infinite;\n  inline-size: 30%;\n}\n\n.indicator-2 {\n  animation: indeterminate-2 2s infinite;\n  inline-size: 60%;\n}\n\n.indicator-1,\n.indicator-2 {\n  position: absolute;\n  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);\n  background-color: var(--vvd-color-neutral-100);\n  block-size: 100%;\n  opacity: 0;\n}\n.connotation-pacific .indicator-1,\n.connotation-pacific .indicator-2 {\n  background-image: var(--_connotation-color-primary);\n}\n.paused .indicator-1,\n.paused .indicator-2 {\n  animation-play-state: paused;\n  background-color: var(--_connotation-color-primary);\n}\n.reverse .indicator-1,\n.reverse .indicator-2 {\n  animation-direction: reverse;\n}\n\n@keyframes indeterminate-1 {\n  0% {\n    opacity: 1;\n    transform: translateX(-100%);\n  }\n  70% {\n    opacity: 1;\n    transform: translateX(300%);\n  }\n  70.01% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    transform: translateX(300%);\n  }\n}\n@keyframes indeterminate-2 {\n  0% {\n    opacity: 0;\n    transform: translateX(-150%);\n  }\n  29.99% {\n    opacity: 0;\n  }\n  30% {\n    opacity: 1;\n    transform: translateX(-150%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(166.66%);\n  }\n}";
-
-class Progress extends BaseProgress {
+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 SideDrawer extends FoundationElement {
   constructor() {
     super(...arguments);
-    this.reverse = false;
+    this.alternate = false;
+    this.modal = false;
+    this.open = false;
+    this.trailing = false;
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback(name, oldValue, newValue);
+    switch (name) {
+      case "open": {
+        this.open ? this.#open() : this.#close();
+      }
+    }
+  }
+  #close() {
+    this.$emit("close", void 0, { bubbles: false });
+  }
+  #open() {
+    this.$emit("open", void 0, { bubbles: false });
   }
 }
-__decorate([attr(), __metadata("design:type", String)], Progress.prototype, "shape", void 0);
-__decorate([attr(), __metadata("design:type", String)], Progress.prototype, "connotation", void 0);
-__decorate([attr({
-  mode: 'boolean'
-}), __metadata("design:type", Object)], Progress.prototype, "reverse", void 0);
+__decorateClass([
+  attr({
+    mode: "boolean"
+  })
+], SideDrawer.prototype, "alternate", 2);
+__decorateClass([
+  attr({
+    mode: "boolean"
+  })
+], SideDrawer.prototype, "modal", 2);
+__decorateClass([
+  attr({
+    mode: "boolean"
+  })
+], SideDrawer.prototype, "open", 2);
+__decorateClass([
+  attr({
+    mode: "boolean"
+  })
+], SideDrawer.prototype, "trailing", 2);
+
+const styles = "/**\n * Do not edit directly\n * Generated on Wed, 06 Sep 2023 09:40:36 GMT\n */\n.control {\n  position: fixed;\n  z-index: 1;\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  inline-size: 280px;\n  inset-block: 0;\n  overflow-y: auto;\n}\n.control[part~=vvd-theme-alternate] {\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  color-scheme: var(--vvd-color-scheme);\n}\n.control.trailing {\n  inset-inline-end: 0;\n}\n.control:not(.open).trailing {\n  transform: translateX(100%);\n}\n.control:not(.open):not(.trailing) {\n  transform: translateX(-100%);\n}\n.control.open:not(.modal).trailing + .side-drawer-app-content {\n  margin-inline-end: var(--side-drawer-app-content-offset, 280px);\n}\n.control.open:not(.modal):not(.trailing) + .side-drawer-app-content {\n  margin-inline-start: var(--side-drawer-app-content-offset, 280px);\n}\n@media (prefers-reduced-motion: no-preference) {\n  .control {\n    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n}\n\n.scrim {\n  background-color: var(--vvd-color-canvas-text, currentColor);\n  opacity: 0.5;\n  position: fixed;\n  inset: 0;\n}\n.scrim:not(.open) {\n  display: none;\n}";
 
 const getClasses = ({
-  connotation,
-  shape,
-  reverse,
-  paused
-}) => classNames('base', [`connotation-${connotation}`, Boolean(connotation)], [`shape-${shape}`, Boolean(shape)], ['reverse', Boolean(reverse)], ['paused', Boolean(paused)]);
-function determinate() {
-  return html`
-		<span class="determinate" style="width: ${x => x.percentComplete}%"></span>`;
-}
-function indeterminate() {
-  return html`
-		<span class="indeterminate" name="indeterminate">
-			<span class="indicator-1"></span>
-			<span class="indicator-2"></span>
-		 </span>`;
-}
-const ProgressTemplate = _ => {
-  return html`
-    <div
-      role="progressbar"
-      aria-valuenow="${x => x.value}"
-      aria-valuemin="${x => x.min}"
-      aria-valuemax="${x => x.max}"
-      class="${getClasses}"
-    >
-		<div class="progress">
-		  ${when(x => typeof x.value === 'number', determinate())}
-		  ${when(x => typeof x.value !== 'number', indeterminate())}
-    	</div>
+  modal,
+  open,
+  trailing
+}) => classNames(
+  "control",
+  ["modal", modal],
+  ["open", open],
+  ["trailing", trailing]
+);
+const getScrimClasses = ({
+  open
+}) => classNames(
+  "scrim",
+  ["open", open]
+);
+const sideDrawerTemplate = () => html`
+	<aside class="${getClasses}" part="base ${(x) => x.alternate ? "vvd-theme-alternate" : ""}"
+	 @keydown="${(x, c) => handleKeydown(x, c.event)}">
+    <slot></slot>
+	</aside>
+
+	<div class="side-drawer-app-content" ?inert="${(x) => x.open && x.modal}">
+		<slot name="app-content"></slot>
 	</div>
-  `;
+
+	${when(
+  (x) => x.modal,
+  html`<div class="${getScrimClasses}" @click="${(x) => x.open = false}"></div>`
+)}
+`;
+const handleKeydown = (x, { key }) => {
+  if (key === "Escape") {
+    x.open = false;
+  } else {
+    return true;
+  }
 };
 
-const progressDefinition = Progress.compose({
-  baseName: 'progress',
-  template: ProgressTemplate,
-  styles: css_248z
+const sideDrawerDefinition = SideDrawer.compose({
+  baseName: "side-drawer",
+  template: sideDrawerTemplate,
+  styles
 });
-const progressRegistries = [progressDefinition()];
-const registerProgress = registerFactory(progressRegistries);
+const sideDrawerRegistries = [sideDrawerDefinition()];
+const registerSideDrawer = registerFactory(sideDrawerRegistries);
 
-export { progressRegistries as a, progressDefinition as p, registerProgress as r };
+export { sideDrawerRegistries as a, registerSideDrawer as r, sideDrawerDefinition as s };