@vonage/vivid 3.39.0 → 3.41.0

package/shared/definition35.js

@@ -1,13 +1,209 @@
-import { d as Size, S as Shape, B as Button, a as buttonRegistries } from './definition10.js';
-import { a as attr, F as FoundationElement, o as observable, v as volatile, h as html, r as registerFactory } from './index.js';
-import { e as elements } from './slotted.js';
-import { r as ref } from './ref.js';
-import { c as children } from './children.js';
-import { r as repeat } from './repeat.js';
-import { c as classNames } from './class-names.js';
+import { F as FoundationElement, O as Observable, _ as __decorate, o as observable, a as attr, h as html, r as registerFactory } from './index.js';
+import { a as iconRegistries } from './definition26.js';
+import { f as focusRegistries } from './definition58.js';
+import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
+import { S as StartEnd } from './start-end.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { i as isHTMLElement } from './dom.js';
+import { f as focusTemplateFactory } from './focus2.js';
+import './index2.js';
 import { w as when } from './when.js';
+import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Tue, 17 Oct 2023 15:27:52 GMT\n */\n.control {\n  display: inline-flex;\n  justify-content: space-between;\n}\n.control:not(.shape-pill) {\n  border-radius: 4px;\n}\n.control.shape-pill {\n  border-radius: 14px;\n}\n\n.buttons-wrapper {\n  display: flex;\n  column-gap: 4px;\n}\n\n.vwc-pagination-button[size=super-condensed] {\n  --base-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.vwc-pagination-button[size=condensed] {\n  --base-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.vwc-pagination-button[size=normal] {\n  --base-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.vwc-pagination-button::part(button) {\n  padding-inline: 0;\n}\n\n.dots {\n  align-self: center;\n  text-align: center;\n}\n.dots:not(.size-super-condensed) {\n  font: var(--vvd-typography-base-bold);\n}\n.dots.size-super-condensed {\n  font: var(--vvd-typography-base-condensed-bold);\n  inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.dots.size-condensed {\n  inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.dots.size-normal {\n  inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}";
+/**
+ * Determines if the element is a {@link (ListboxOption:class)}
+ *
+ * @param element - the element to test.
+ * @public
+ */
+function isListboxOption(el) {
+    return (isHTMLElement(el) &&
+        (el.getAttribute("role") === "option" ||
+            el instanceof HTMLOptionElement));
+}
+/**
+ * An Option Custom HTML Element.
+ * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option }.
+ *
+ * @slot start - Content which can be provided before the listbox option content
+ * @slot end - Content which can be provided after the listbox option content
+ * @slot - The default slot for listbox option content
+ * @csspart content - Wraps the listbox option content
+ *
+ * @public
+ */
+let ListboxOption$1 = class ListboxOption extends FoundationElement {
+    constructor(text, value, defaultSelected, selected) {
+        super();
+        /**
+         * The defaultSelected state of the option.
+         * @public
+         */
+        this.defaultSelected = false;
+        /**
+         * Tracks whether the "selected" property has been changed.
+         * @internal
+         */
+        this.dirtySelected = false;
+        /**
+         * The checked state of the control.
+         *
+         * @public
+         */
+        this.selected = this.defaultSelected;
+        /**
+         * Track whether the value has been changed from the initial value
+         */
+        this.dirtyValue = false;
+        if (text) {
+            this.textContent = text;
+        }
+        if (value) {
+            this.initialValue = value;
+        }
+        if (defaultSelected) {
+            this.defaultSelected = defaultSelected;
+        }
+        if (selected) {
+            this.selected = selected;
+        }
+        this.proxy = new Option(`${this.textContent}`, this.initialValue, this.defaultSelected, this.selected);
+        this.proxy.disabled = this.disabled;
+    }
+    /**
+     * Updates the ariaChecked property when the checked property changes.
+     *
+     * @param prev - the previous checked value
+     * @param next - the current checked value
+     *
+     * @public
+     */
+    checkedChanged(prev, next) {
+        if (typeof next === "boolean") {
+            this.ariaChecked = next ? "true" : "false";
+            return;
+        }
+        this.ariaChecked = null;
+    }
+    /**
+     * Updates the proxy's text content when the default slot changes.
+     * @param prev - the previous content value
+     * @param next - the current content value
+     *
+     * @internal
+     */
+    contentChanged(prev, next) {
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.textContent = this.textContent;
+        }
+        this.$emit("contentchange", null, { bubbles: true });
+    }
+    defaultSelectedChanged() {
+        if (!this.dirtySelected) {
+            this.selected = this.defaultSelected;
+            if (this.proxy instanceof HTMLOptionElement) {
+                this.proxy.selected = this.defaultSelected;
+            }
+        }
+    }
+    disabledChanged(prev, next) {
+        this.ariaDisabled = this.disabled ? "true" : "false";
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.disabled = this.disabled;
+        }
+    }
+    selectedAttributeChanged() {
+        this.defaultSelected = this.selectedAttribute;
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.defaultSelected = this.defaultSelected;
+        }
+    }
+    selectedChanged() {
+        this.ariaSelected = this.selected ? "true" : "false";
+        if (!this.dirtySelected) {
+            this.dirtySelected = true;
+        }
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.selected = this.selected;
+        }
+    }
+    initialValueChanged(previous, next) {
+        // If the value is clean and the component is connected to the DOM
+        // then set value equal to the attribute value.
+        if (!this.dirtyValue) {
+            this.value = this.initialValue;
+            this.dirtyValue = false;
+        }
+    }
+    get label() {
+        var _a;
+        return (_a = this.value) !== null && _a !== void 0 ? _a : this.text;
+    }
+    get text() {
+        var _a, _b;
+        return (_b = (_a = this.textContent) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, " ").trim()) !== null && _b !== void 0 ? _b : "";
+    }
+    set value(next) {
+        const newValue = `${next !== null && next !== void 0 ? next : ""}`;
+        this._value = newValue;
+        this.dirtyValue = true;
+        if (this.proxy instanceof HTMLOptionElement) {
+            this.proxy.value = newValue;
+        }
+        Observable.notify(this, "value");
+    }
+    get value() {
+        var _a;
+        Observable.track(this, "value");
+        return (_a = this._value) !== null && _a !== void 0 ? _a : this.text;
+    }
+    get form() {
+        return this.proxy ? this.proxy.form : null;
+    }
+};
+__decorate([
+    observable
+], ListboxOption$1.prototype, "checked", void 0);
+__decorate([
+    observable
+], ListboxOption$1.prototype, "content", void 0);
+__decorate([
+    observable
+], ListboxOption$1.prototype, "defaultSelected", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], ListboxOption$1.prototype, "disabled", void 0);
+__decorate([
+    attr({ attribute: "selected", mode: "boolean" })
+], ListboxOption$1.prototype, "selectedAttribute", void 0);
+__decorate([
+    observable
+], ListboxOption$1.prototype, "selected", void 0);
+__decorate([
+    attr({ attribute: "value", mode: "fromView" })
+], ListboxOption$1.prototype, "initialValue", void 0);
+/**
+ * States and properties relating to the ARIA `option` role.
+ *
+ * @public
+ */
+class DelegatesARIAListboxOption {
+}
+__decorate([
+    observable
+], DelegatesARIAListboxOption.prototype, "ariaChecked", void 0);
+__decorate([
+    observable
+], DelegatesARIAListboxOption.prototype, "ariaPosInSet", void 0);
+__decorate([
+    observable
+], DelegatesARIAListboxOption.prototype, "ariaSelected", void 0);
+__decorate([
+    observable
+], DelegatesARIAListboxOption.prototype, "ariaSetSize", void 0);
+applyMixins(DelegatesARIAListboxOption, ARIAGlobalStatesAndProperties);
+applyMixins(ListboxOption$1, StartEnd, DelegatesARIAListboxOption);
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -20,195 +216,74 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-const MAX_DIGITS_AND_PLACEHOLDERS = 7;
-const totalConverter = {
-  fromView: (value) => parseInt(value, 10),
-  toView: (value) => value.toString()
-};
-class Pagination extends FoundationElement {
-  constructor() {
-    super();
-    this.navIcons = false;
-    this.total = 0;
-    this.selectedIndex = 0;
-    this.addEventListener("tabpressed", (e) => {
-      const { value: currentLabel, shiftKey } = e.detail;
-      const index = this.paginationButtons.findIndex((button) => Number(button.label) === currentLabel);
-      const focusDirection = shiftKey ? -1 : 1;
-      const newIndex = index + focusDirection;
-      if (newIndex < 0) {
-        return this.prevButton.focus();
-      }
-      if (newIndex > this.paginationButtons.length - 1) {
-        return this.nextButton.focus();
-      }
-      this.paginationButtons && this.paginationButtons[index + focusDirection].focus();
-    });
-  }
-  get pagesList() {
-    return new Array(this.total < MAX_DIGITS_AND_PLACEHOLDERS ? this.total : MAX_DIGITS_AND_PLACEHOLDERS).fill(0).map((_, i, arr) => {
-      if (i === 0)
-        return 1;
-      if (i === arr.length - 1)
-        return this.total;
-      if (this.selectedIndex !== void 0 && this.total > MAX_DIGITS_AND_PLACEHOLDERS) {
-        if (this.selectedIndex < 4) {
-          if (i === MAX_DIGITS_AND_PLACEHOLDERS - 2)
-            return "...";
-        }
-        if (this.selectedIndex >= 4 && this.selectedIndex <= this.total - 5) {
-          if (i > 1 && i < MAX_DIGITS_AND_PLACEHOLDERS - 2)
-            return this.selectedIndex + (i - 2);
-          if (i === 1 || i === MAX_DIGITS_AND_PLACEHOLDERS - 2)
-            return "...";
-        }
-        if (this.selectedIndex > this.total - 5) {
-          if (i > 1)
-            return this.total - (6 - i);
-          if (i === 1)
-            return "...";
-        }
-      }
-      return i + 1;
-    });
+class ListboxOption extends ListboxOption$1 {
+  // #region overrides base class accessor
+  set text(value) {
+    this._text = value;
   }
-  totalChanged(_, newValue) {
-    if (newValue < 0) {
-      this.total = 0;
-    }
-    this.selectedIndex = 0;
+  get text() {
+    return this._text ?? "";
   }
-  selectedIndexChanged(oldValue, newValue) {
-    if (oldValue === void 0)
-      return;
-    this.$emit("pagination-change", { selectedIndex: newValue, total: this.total, oldIndex: oldValue });
+  get label() {
+    return this._label ?? this.text;
   }
-  paginationButtonsChanged(_, newValue) {
-    newValue.forEach((button) => {
-      button.shadowRoot.querySelector("button").setAttribute("part", "button");
-    });
+  set label(value) {
+    this._label = value;
   }
+  // #endregion overrides
 }
 __decorateClass([
-  attr
-], Pagination.prototype, "size", 2);
-__decorateClass([
-  attr
-], Pagination.prototype, "shape", 2);
-__decorateClass([
-  observable
-], Pagination.prototype, "paginationButtons", 2);
-__decorateClass([
-  observable
-], Pagination.prototype, "prevButton", 2);
-__decorateClass([
-  observable
-], Pagination.prototype, "nextButton", 2);
-__decorateClass([
-  attr({ attribute: "nav-icons", mode: "boolean" })
-], Pagination.prototype, "navIcons", 2);
+  attr({
+    attribute: "text"
+  })
+], ListboxOption.prototype, "_text", 2);
 __decorateClass([
-  volatile
-], Pagination.prototype, "pagesList", 1);
-__decorateClass([
-  attr({ mode: "reflect", converter: totalConverter })
-], Pagination.prototype, "total", 2);
-__decorateClass([
-  attr({ mode: "reflect", converter: totalConverter, attribute: "selected-index" })
-], Pagination.prototype, "selectedIndex", 2);
+  attr({
+    attribute: "label"
+  })
+], ListboxOption.prototype, "_label", 2);
+applyMixins(ListboxOption, AffixIconWithTrailing);
 
-const ALLOWED_SIZES = [Size.SuperCondensed, Size.Condensed, Size.Normal];
-const ALLOWED_SHAPES = [Shape.Rounded, Shape.Pill];
-const handleSelection = (value, { parent: x }) => {
-  return x.selectedIndex = Number(value) - 1;
-};
-const handleKeyDown = (value, { event, parent }) => {
-  if (event.key === " " || event.key === "Enter") {
-    handleSelection(value, { parent });
-  }
-  if (event.key === "Tab") {
-    event.target.dispatchEvent(
-      new CustomEvent("tabpressed", { detail: { value, shiftKey: event.shiftKey }, bubbles: true, composed: true })
-    );
-  }
-};
-const getClasses = (_) => classNames("control");
-function getButtonAppearance(value, { parent }) {
-  return parent.selectedIndex === Number(value) - 1 ? "filled" : "ghost";
-}
-const paginationButtonRenderer = (buttonTag) => html`
-	${when(
-  (value) => value !== "...",
-  html`
-		<${buttonTag} class="vwc-pagination-button"
-									label="${(value) => value}"
-									appearance="${getButtonAppearance}"
-									size="${(_, { parent: x }) => getPaginationSize(x)}"
-									shape="${(_, { parent: x }) => getPaginationShape(x)}"
-									style="inline-size: ${(value) => getPaginationButtonWidth(value)};"
-									tabindex="0"
-									aria-current="${(value, { parent }) => parent.selectedIndex === Number(value) - 1}"
-									@click="${handleSelection}"
-									@keydown="${handleKeyDown}">
-		</${buttonTag}>
-	`
-)}
-	${when(
-  (value) => value === "...",
-  html`
-		<div
-			class="dots size-${(_, { parent: x }) => getPaginationSize(x)}">
-			...
-		</div>`
-)}`;
-const getPaginationSize = (x) => {
-  if (!x.size || !ALLOWED_SIZES.includes(x.size)) {
-    return Size.SuperCondensed;
-  }
-  return x.size;
-};
-const getPaginationShape = (x) => {
-  if (!x.shape || !ALLOWED_SHAPES.includes(x.shape)) {
-    return Shape.Rounded;
-  }
-  return x.shape;
-};
-const getPaginationButtonWidth = (value) => {
-  return `calc(var(--base-size) + ${String(value).length - 1}ch)`;
-};
-const PaginationTemplate = (context) => {
-  const buttonTag = context.tagFor(Button);
-  const paginationButtonTemplate = paginationButtonRenderer(buttonTag);
+const getClasses = ({
+  icon,
+  disabled,
+  selected,
+  checked
+}) => classNames(
+  "base",
+  ["disabled", disabled],
+  ["selected", Boolean(selected)],
+  ["active", Boolean(checked)],
+  ["icon", Boolean(icon)]
+);
+const ListboxOptionTemplate = (context) => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  const focusTemplate = focusTemplateFactory(context);
   return html`
-	<div class="${getClasses}">
-		<${buttonTag} class="prev-button" ${ref("prevButton")}
-									label="${(x) => !x.navIcons ? "Previous" : null}"
-									icon="${(x) => x.navIcons ? "chevron-left-line" : null}"
-									size="${getPaginationSize}"
-									shape="${getPaginationShape}"
-									?disabled="${(x) => x.total === 0 || x.selectedIndex === 0}"
-									@click="${(x) => x.selectedIndex !== void 0 && x.selectedIndex--}"
-		></${buttonTag}>
-		<div id="buttons-wrapper" class="buttons-wrapper" ${children({ property: "paginationButtons", filter: elements(buttonTag) })}>
-			${repeat((x) => x.pagesList, paginationButtonTemplate, { positioning: true })}
+	<template
+		aria-checked="${(x) => x.ariaChecked}"
+		aria-disabled="${(x) => x.ariaDisabled}"
+		aria-posinset="${(x) => x.ariaPosInSet}"
+		aria-selected="${(x) => x.ariaSelected}"
+		aria-setsize="${(x) => x.ariaSetSize}"
+		role="option">
+		<div class="${getClasses}">
+			${() => focusTemplate}
+			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
+			${when((x) => x.text, html`<div class="text">${(x) => x.text}</div>`)}
 		</div>
-		<${buttonTag} class="next-button" ${ref("nextButton")}
-									label="${(x) => !x.navIcons ? "Next" : null}"
-									icon="${(x) => x.navIcons ? "chevron-right-line" : null}"
-									size="${getPaginationSize}"
-									shape="${getPaginationShape}"
-									?disabled="${(x) => x.total === 0 || x.selectedIndex === x.total - 1}"
-									@click="${(x) => x.selectedIndex !== void 0 && x.selectedIndex++}"
-		></${buttonTag}>
-</div>`;
+	</template>
+	`;
 };
 
-const paginationDefinition = Pagination.compose({
-  baseName: "pagination",
-  template: PaginationTemplate,
+const styles = "/**\n * Do not edit directly\n * Generated on Wed, 22 Nov 2023 16:09:43 GMT\n */\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n.base {\n  position: relative; /* this is needed for the focus */\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_option-appearance-color-text, var(--_appearance-color-text));\n  font: var(--vvd-typography-base);\n  gap: 12px;\n  hyphens: auto;\n  inline-size: 100%;\n  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  padding-inline: 16px;\n  vertical-align: middle;\n  word-break: break-word;\n}\n.base {\n  /* @cssprop [--vvd-option-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-option-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-option-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-option-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-option-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-option-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));\n  /* @cssprop [--vvd-option-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.base:where(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  cursor: pointer;\n}\n.base.disabled {\n  pointer-events: none;\n}\n.base .text {\n  font: var(--vvd-typography-base);\n}\n\nslot[name=icon] {\n  font-size: 20px;\n  line-height: 1;\n}\n.base:not(.disabled, .selected) slot[name=icon] {\n  color: var(--vvd-color-neutral-600);\n}\n\n.focus-indicator {\n  --focus-stroke-color: var(--vvd-color-neutral-500);\n  --focus-stroke-gap-color: transparent;\n}\n:host(:not([aria-checked=true])) .focus-indicator {\n  display: none;\n}";
+
+const listboxOptionDefinition = ListboxOption.compose({
+  baseName: "option",
+  template: ListboxOptionTemplate,
   styles
 });
-const paginationRegistries = [paginationDefinition(), buttonRegistries];
-const registerPagination = registerFactory(paginationRegistries);
+const listboxOptionRegistries = [listboxOptionDefinition(), ...iconRegistries, ...focusRegistries];
+const registerOption = registerFactory(listboxOptionRegistries);
 
-export { paginationRegistries as a, paginationDefinition as p, registerPagination as r };
+export { ListboxOption as L, listboxOptionRegistries as a, isListboxOption as i, listboxOptionDefinition as l, registerOption as r };