@vonage/vivid 4.13.0 → 4.14.0

package/shared/definition36.js

@@ -1,260 +1,227 @@
-import { F as FoundationElement, O as Observable, o as observable, a as attr, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition27.js';
-import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { A as ARIAGlobalStatesAndProperties } from './aria-global2.js';
-import { a as applyMixins } from './apply-mixins.js';
-import { I as Icon } from './icon.js';
-import { w as when } from './when.js';
+import { B as Button, b as buttonDefinition } from './definition11.js';
+import { a as attr, o as observable, v as volatile, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { V as VividElement } from './vivid-element.js';
+import { b as Size, S as Shape } from './enums.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 { w as when } from './when.js';
+
+const styles = ".control{display:inline-flex;justify-content:space-between}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{display:flex;column-gap:4px}.vwc-pagination-button[size=super-condensed]{--base-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=condensed]{--base-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=normal]{--base-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button::part(button){padding-inline:0}.dots{align-self:center;text-align:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-condensed{inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-normal{inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}";
 
 var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
+  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 = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
-class ListboxOption extends FoundationElement {
-  constructor(text, value, defaultSelected, selected) {
+const MAX_DIGITS_AND_PLACEHOLDERS = 7;
+const totalConverter = {
+  fromView: (value) => parseInt(value, 10),
+  toView: (value) => value.toString()
+};
+class Pagination extends VividElement {
+  constructor() {
     super();
-    this.defaultSelected = false;
-    /**
-     * Tracks whether the "selected" property has been changed.
-     * @internal
-     */
-    this.dirtySelected = false;
-    this.selected = this.defaultSelected;
-    /**
-     * Track whether the value has been changed from the initial value
-     */
-    this.dirtyValue = false;
-    this._highlighted = false;
-    this._displayCheckmark = false;
-    this._matchedRange = null;
-    if (text) {
-      this.text = text;
-    }
-    if (value) {
-      this.initialValue = value;
-    }
-    if (defaultSelected) {
-      this.defaultSelected = defaultSelected;
-    }
-    if (selected) {
-      this.selected = selected;
-    }
-    this.proxy = new Option(
-      this.text,
-      // @ts-expect-error Propery is used before it is assigned
-      this.initialValue,
-      this.defaultSelected,
-      this.selected
-    );
-    this.proxy.disabled = this.disabled;
-  }
-  /**
-   * Updates the ariaChecked property when the checked property changes.
-   *
-   * @param _ - the previous checked value
-   * @param next - the current checked value
-   *
-   * @public
-   */
-  checkedChanged(_, next) {
-    if (typeof next === "boolean") {
-      this.ariaChecked = next ? "true" : "false";
-      return;
-    }
-    this.ariaChecked = null;
-  }
-  defaultSelectedChanged() {
-    if (!this.dirtySelected) {
-      this.selected = this.defaultSelected;
-      if (this.proxy instanceof HTMLOptionElement) {
-        this.proxy.selected = this.defaultSelected;
+    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();
       }
-    }
-  }
-  disabledChanged() {
-    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() {
-    if (!this.dirtyValue) {
-      this.value = this.initialValue;
-      this.dirtyValue = false;
-    }
-  }
-  get label() {
-    return this._label ?? this.text;
-  }
-  set label(value) {
-    this._label = value;
-  }
-  set text(value) {
-    this._text = value;
+      if (newIndex > this.paginationButtons.length - 1) {
+        return this.nextButton.focus();
+      }
+      this.paginationButtons && this.paginationButtons[index + focusDirection].focus();
+    });
   }
-  get text() {
-    return this._text ?? "";
+  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;
+    });
   }
-  set value(next) {
-    const newValue = `${next ?? ""}`;
-    this._value = newValue;
-    this.dirtyValue = true;
-    if (this.proxy instanceof HTMLOptionElement) {
-      this.proxy.value = newValue;
+  totalChanged(_, newValue) {
+    if (newValue < 0) {
+      this.total = 0;
     }
-    Observable.notify(this, "value");
-  }
-  get value() {
-    Observable.track(this, "value");
-    return this._value ?? this.text;
+    this.selectedIndex = 0;
   }
-  get form() {
-    return null;
+  selectedIndexChanged(oldValue, newValue) {
+    if (oldValue === void 0) return;
+    this.$emit("pagination-change", {
+      selectedIndex: newValue,
+      total: this.total,
+      oldIndex: oldValue
+    });
   }
-  /**
-   * @internal
-   */
-  get _matchedRangeSafe() {
-    return this._matchedRange ?? { from: 0, to: 0 };
+  paginationButtonsChanged(_, newValue) {
+    newValue.forEach((button) => {
+      button.shadowRoot.querySelector("button").setAttribute("part", "button");
+    });
   }
 }
 __decorateClass([
-  observable
-], ListboxOption.prototype, "checked");
-__decorateClass([
-  observable
-], ListboxOption.prototype, "defaultSelected");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  attr({ mode: "boolean" })
-], ListboxOption.prototype, "disabled");
-// @ts-expect-error Type is incorrectly non-optional
+  attr
+], Pagination.prototype, "size", 2);
 __decorateClass([
-  attr({ attribute: "selected", mode: "boolean" })
-], ListboxOption.prototype, "selectedAttribute");
+  attr
+], Pagination.prototype, "shape", 2);
 __decorateClass([
   observable
-], ListboxOption.prototype, "selected");
-__decorateClass([
-  attr({ attribute: "value", mode: "fromView" })
-], ListboxOption.prototype, "initialValue");
-__decorateClass([
-  attr({
-    attribute: "label"
-  })
-], ListboxOption.prototype, "_label");
-__decorateClass([
-  attr({
-    attribute: "text"
-  })
-], ListboxOption.prototype, "_text");
-__decorateClass([
-  observable
-], ListboxOption.prototype, "_highlighted");
+], Pagination.prototype, "paginationButtons", 2);
 __decorateClass([
   observable
-], ListboxOption.prototype, "_displayCheckmark");
+], Pagination.prototype, "prevButton", 2);
 __decorateClass([
   observable
-], ListboxOption.prototype, "_matchedRange");
-class DelegatesARIAListboxOption {
-}
-// @ts-expect-error Type is incorrectly non-optional
+], Pagination.prototype, "nextButton", 2);
 __decorateClass([
-  observable
-], DelegatesARIAListboxOption.prototype, "ariaChecked");
-// @ts-expect-error Type is incorrectly non-optional
+  attr({ attribute: "nav-icons", mode: "boolean" })
+], Pagination.prototype, "navIcons", 2);
 __decorateClass([
-  observable
-], DelegatesARIAListboxOption.prototype, "ariaPosInSet");
-// @ts-expect-error Type is incorrectly non-optional
+  volatile
+], Pagination.prototype, "pagesList", 1);
 __decorateClass([
-  observable
-], DelegatesARIAListboxOption.prototype, "ariaSelected");
-// @ts-expect-error Type is incorrectly non-optional
+  attr({ mode: "reflect", converter: totalConverter })
+], Pagination.prototype, "total", 2);
 __decorateClass([
-  observable
-], DelegatesARIAListboxOption.prototype, "ariaSetSize");
-applyMixins(DelegatesARIAListboxOption, ARIAGlobalStatesAndProperties);
-applyMixins(ListboxOption, AffixIconWithTrailing, DelegatesARIAListboxOption);
+  attr({
+    mode: "reflect",
+    converter: totalConverter,
+    attribute: "selected-index"
+  })
+], Pagination.prototype, "selectedIndex", 2);
 
-const getClasses = (x) => classNames(
-  "base",
-  ["disabled", x.disabled],
-  ["selected", Boolean(x.selected)],
-  ["hover", Boolean(x._highlighted)],
-  ["active", Boolean(x.checked)],
-  ["icon", Boolean(x.icon)]
-);
-const ListboxOptionTemplate = (context) => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  const iconTag = context.tagFor(Icon);
+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);
   return html`
-		<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}">
-				${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
-				${when(
-    (x) => x.text,
-    html`<div class="text">
-						${when(
-      (x) => x._matchedRange,
-      html`${(x) => x.text.slice(0, x._matchedRangeSafe.from)}<span class="match"
-									>${(x) => x.text.slice(
-        x._matchedRangeSafe.from,
-        x._matchedRangeSafe.to
-      )}</span
-								>`
-    )}${(x) => x.text.slice(x._matchedRangeSafe.to)}
-					</div>`
-  )}
-				${when(
-    (x) => x._displayCheckmark && x.selected,
-    html`<${iconTag} class="checkmark" name="check-line"></${iconTag}>`
-  )}
-			</div>
-		</template>
-	`;
+	<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 })}
+		</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>`;
 };
 
-const styles = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-neutral-500);--focus-stroke-gap-color: transparent;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))}.text{font:var(--vvd-typography-base)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{margin-left:auto;font-size:var(--_option-icon-size)}";
-
-const listboxOptionDefinition = ListboxOption.compose({
-  baseName: "option",
-  template: ListboxOptionTemplate,
-  styles
-});
-const listboxOptionRegistries = [
-  listboxOptionDefinition(),
-  ...iconRegistries
-];
-const registerOption = registerFactory(listboxOptionRegistries);
+const paginationDefinition = defineVividComponent(
+  "pagination",
+  Pagination,
+  PaginationTemplate,
+  [buttonDefinition],
+  {
+    styles
+  }
+);
+const registerPagination = createRegisterFunction(paginationDefinition);
 
-export { ListboxOption as L, listboxOptionRegistries as a, listboxOptionDefinition as l, registerOption as r };
+export { paginationDefinition as p, registerPagination as r };