@vonage/vivid 3.40.0 → 3.42.0

package/shared/definition42.js

@@ -1,6 +1,14 @@
 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 Checkbox, a as checkboxRegistries } from './definition15.js';
+import { f as focusRegistries } from './definition58.js';
+import { a as radioRegistries } from './definition40.js';
+import { f as focusTemplateFactory } from './focus2.js';
+import { C as Connotation } from './enums.js';
+import { R as Radio } from './radio.js';
 import { c as classNames } from './class-names.js';
+import { w as when } from './when.js';
+
+const styles = "/**\n * Do not edit directly\n * Generated on Thu, 30 Nov 2023 11:42:28 GMT\n */\n@supports selector(:focus-visible) {\n  .base:focus-visible {\n    outline: none;\n  }\n}\n:host {\n  display: flex;\n}\n\n.base {\n  position: relative;\n  padding: var(--selectable-box-spacing, 16px);\n  border: 1px solid var(--_appearance-color-outline);\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  inline-size: 100%;\n  padding-block-start: calc(var(--selectable-box-spacing, 16px) + 36px);\n  text-align: start;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-selectable-box-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-selectable-box-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-selectable-box-cta-pale=var(--vvd-color-cta-300)] */\n  --_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));\n  /* @cssprop [--vvd-selectable-box-cta-fierce=var(--vvd-color-cta-700)] */\n  --_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));\n  /* @cssprop [--vvd-selectable-box-cta-faint=var(--vvd-color-cta-50)] */\n  --_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));\n}\n.base:not(.connotation-cta) {\n  /* @cssprop [--vvd-selectable-box-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-selectable-box-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-selectable-box-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-selectable-box-accent-fierce=var(--vvd-color-neutral-700)] */\n  --_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));\n  /* @cssprop [--vvd-selectable-box-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-fierce);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-fierce);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-fierce);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-fierce);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base.tight {\n  overflow: hidden;\n  min-height: calc(var(--selectable-box-spacing, 16px) * 2 + 22px);\n  padding: 0;\n}\n.base.clickable {\n  cursor: pointer;\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  --focus-inset: -1px;\n  pointer-events: none;\n}\n.base:not(:focus-visible) > .focus-indicator {\n  display: none;\n}\n\n.control {\n  position: absolute;\n  inset-block-start: var(--selectable-box-spacing, 16px);\n  inset-inline-end: var(--selectable-box-spacing, 16px);\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -13,97 +21,128 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class SideDrawer extends FoundationElement {
+class SelectableBox extends FoundationElement {
   constructor() {
     super(...arguments);
-    this.alternate = false;
-    this.modal = false;
-    this.open = false;
-    this.trailing = false;
+    this.ariaLabel = null;
+    this.checked = false;
+    this.clickable = false;
+    this.clickableBox = false;
+    this.tight = false;
   }
-  attributeChangedCallback(name, oldValue, newValue) {
-    super.attributeChangedCallback(name, oldValue, newValue);
-    switch (name) {
-      case "open": {
-        this.open ? this.#open() : this.#close();
-      }
-    }
+  /**
+   * @internal
+   */
+  _handleCheckedChange() {
+    if (this.controlType === "radio" && this.checked)
+      return;
+    this.checked = !this.checked;
+    if (this.clickableBox || this.clickable)
+      this.$emit("change");
   }
-  #close() {
-    this.$emit("close", void 0, { bubbles: false });
-  }
-  #open() {
-    this.$emit("open", void 0, { bubbles: false });
+  /**
+   * @internal
+   */
+  _handleKeydown(event) {
+    if ((event.code === "Space" || event.code === "Enter") && (this.clickableBox || this.clickable))
+      return this._handleCheckedChange();
+    return true;
   }
 }
 __decorateClass([
-  attr({
-    mode: "boolean"
-  })
-], SideDrawer.prototype, "alternate", 2);
+  attr({ attribute: "aria-label" })
+], SelectableBox.prototype, "ariaLabel", 2);
 __decorateClass([
-  attr({
-    mode: "boolean"
-  })
-], SideDrawer.prototype, "modal", 2);
+  attr({ mode: "boolean" })
+], SelectableBox.prototype, "checked", 2);
 __decorateClass([
-  attr({
-    mode: "boolean"
-  })
-], SideDrawer.prototype, "open", 2);
+  attr({ mode: "boolean" })
+], SelectableBox.prototype, "clickable", 2);
 __decorateClass([
-  attr({
-    mode: "boolean"
-  })
-], SideDrawer.prototype, "trailing", 2);
-
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 01 Nov 2023 12:16:28 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}";
+  attr({ attribute: "clickable-box", mode: "boolean" })
+], SelectableBox.prototype, "clickableBox", 2);
+__decorateClass([
+  attr
+], SelectableBox.prototype, "connotation", 2);
+__decorateClass([
+  attr({ attribute: "control-type" })
+], SelectableBox.prototype, "controlType", 2);
+__decorateClass([
+  attr({ mode: "boolean" })
+], SelectableBox.prototype, "tight", 2);
 
-const getClasses = ({
-  modal,
-  open,
-  trailing
-}) => classNames(
-  "control",
-  ["modal", modal],
-  ["open", open],
-  ["trailing", trailing]
+const getClasses = ({ connotation, tight, checked, clickableBox, clickable }) => classNames(
+  "base",
+  [`connotation-${connotation}`, Boolean(connotation)],
+  ["tight", tight],
+  ["selected", checked],
+  ["clickable", clickableBox || clickable],
+  ["readonly", !clickableBox && !clickable]
 );
-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>
+function handleControlChange(x) {
+  if (!x.clickableBox)
+    x._handleCheckedChange();
+}
+function checkbox(context) {
+  const checkboxTag = context.tagFor(Checkbox);
+  return html`${when((x) => x.controlType !== "radio", html`
+		<${checkboxTag}
+			aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
+			@change="${(x) => handleControlChange(x)}"
+			class="control checkbox" 
+			connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
+			:checked="${(x) => x.checked}"
+			inert="${(x) => x.clickableBox || x.clickable ? true : null}"
+		></${checkboxTag}>`)}
+	`;
+}
+function radio(context) {
+  const radioTag = context.tagFor(Radio);
+  return html`${when((x) => x.controlType === "radio", html`
+		<${radioTag}
+			aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
+			@change="${(x) => handleControlChange(x)}"
+			class="control radio" 
+			connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
+			:checked="${(x) => x.checked}"
+			inert="${(x) => x.clickableBox || x.clickable ? true : null}"
+		></${radioTag}>`)}
+	`;
+}
+const SelectableBoxTemplate = (context) => {
+  const focusTemplate = focusTemplateFactory(context);
+  return html`<template role="presentation">
+	<div
+		class="${getClasses}"
+		tabindex="${(x) => x.clickableBox || x.clickable ? "0" : null}"
+		role="${(x) => x.clickableBox || x.clickable ? "button" : null}"
+		aria-pressed="${(x) => (x.clickableBox || x.clickable) && x.checked ? x.checked : null}"
+		aria-label="${(x) => x.clickableBox || x.clickable ? x.ariaLabel : null}"
+		@keydown="${(x, c) => x._handleKeydown(c.event)}"
+		@click="${(x) => x.clickableBox || x.clickable ? x._handleCheckedChange() : null}"
+	>
+		${(x) => x.clickableBox || x.clickable ? focusTemplate : ""}
+		${checkbox(context)}
+		${radio(context)}
+		<slot></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;
-  }
+</template>`;
 };
 
-const sideDrawerDefinition = SideDrawer.compose({
-  baseName: "side-drawer",
-  template: sideDrawerTemplate,
-  styles
+const selectableBoxDefinition = SelectableBox.compose({
+  baseName: "selectable-box",
+  template: SelectableBoxTemplate,
+  styles,
+  shadowOptions: {
+    delegatesFocus: true
+  }
 });
-const sideDrawerRegistries = [sideDrawerDefinition()];
-const registerSideDrawer = registerFactory(sideDrawerRegistries);
+const selectableBoxRegistries = [
+  selectableBoxDefinition(),
+  ...checkboxRegistries,
+  ...focusRegistries,
+  ...radioRegistries
+];
+const registerSelectableBox = registerFactory(selectableBoxRegistries);
 
-export { sideDrawerRegistries as a, registerSideDrawer as r, sideDrawerDefinition as s };
+export { selectableBoxRegistries as a, registerSelectableBox as r, selectableBoxDefinition as s };