@vonage/vivid 4.24.0 → 4.25.0

package/shared/form-elements.js

@@ -1,202 +0,0 @@
-import { I as Icon } from './definition28.js';
-import { h as html, a as attr, o as observable } from './vivid-element.js';
-import { s as slotted } from './slotted.js';
-import { c as classNames } from './class-names.js';
-import { w as when } from './when.js';
-
-const messageStyles = ".sr-only{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.message{display:none;contain:inline-size;font:var(--vvd-typography-base-condensed);gap:4px;grid-column:1/-1}.message--visible{display:flex}.message-text{color:var(--vvd-color-canvas-text)}.helper-message .message-text{color:var(--_low-ink-color)}.message-icon{font-size:16px}.success-message .message-icon{color:var(--vvd-color-success-500)}.error-message .message-icon{color:var(--vvd-color-alert-500)}";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  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);
-  return result;
-};
-class FormElementHelperText {
-}
-__decorateClass([
-  attr({ attribute: "helper-text" })
-], FormElementHelperText.prototype, "helperText");
-__decorateClass([
-  observable
-], FormElementHelperText.prototype, "_helperTextSlottedContent");
-class FormElementSuccessText {
-}
-__decorateClass([
-  attr({ attribute: "success-text" })
-], FormElementSuccessText.prototype, "successText");
-class FormElementCharCount {
-  constructor() {
-    this.charCount = false;
-  }
-}
-__decorateClass([
-  attr({
-    attribute: "char-count",
-    mode: "boolean"
-  })
-], FormElementCharCount.prototype, "charCount");
-function formElements(constructor) {
-  class FormElement extends constructor {
-    constructor(...args) {
-      super(...args);
-      this.errorValidationMessage = "";
-      this.#forceErrorDisplay = false;
-      this.#hasBeenTouched = false;
-      this.#handleInvalidEvent = () => {
-        this.#forceErrorDisplay = true;
-        this.validate();
-      };
-      this.validate = () => {
-        super.validate();
-        const shouldShowValidationError = this.#forceErrorDisplay || this.#hasBeenTouched && this.dirtyValue;
-        this.errorValidationMessage = shouldShowValidationError ? this.validationMessage : "";
-      };
-      this.addEventListener("blur", () => {
-        this.#hasBeenTouched = true;
-        this.#forceErrorDisplay = false;
-        this.validate();
-      });
-      this.addEventListener("focus", () => {
-        this.#hasBeenTouched = false;
-      });
-      this.addEventListener("invalid", () => {
-        this.proxy.dispatchEvent(new Event("invalid"));
-      });
-    }
-    #forceErrorDisplay;
-    #hasBeenTouched;
-    connectedCallback() {
-      super.connectedCallback();
-      this.proxy.addEventListener("invalid", this.#handleInvalidEvent);
-    }
-    #handleInvalidEvent;
-    disconnectedCallback() {
-      super.disconnectedCallback();
-      this.proxy.removeEventListener("invalid", this.#handleInvalidEvent);
-    }
-    formResetCallback() {
-      this.#forceErrorDisplay = false;
-      super.formResetCallback();
-      this.validate();
-    }
-  }
-  __decorateClass([
-    attr
-  ], FormElement.prototype, "label");
-  __decorateClass([
-    observable
-  ], FormElement.prototype, "errorValidationMessage");
-  return FormElement;
-}
-const feedback = {
-  helper: {
-    messageProperty: "helperText",
-    className: "helper",
-    slot: {
-      name: "helper-text",
-      slottedContentProperty: "_helperTextSlottedContent"
-    },
-    role: "none"
-  },
-  error: {
-    messageProperty: "errorValidationMessage",
-    className: "error",
-    iconType: "info-line",
-    role: "status"
-  },
-  success: {
-    messageProperty: "successText",
-    className: "success",
-    iconType: "check-circle-line",
-    role: "none"
-  }
-};
-const isFeedbackAvailable = (config, x) => Boolean(
-  x[config.messageProperty] || config.slot && x[config.slot.slottedContentProperty]?.length
-);
-function getFeedbackTemplate(context) {
-  return html`
-		<style>
-			${messageStyles}
-		</style>
-		${getFeedbackTypeTemplate(
-    context,
-    feedback.helper,
-    (x) => isFeedbackAvailable(feedback.helper, x) && !isFeedbackAvailable(feedback.error, x) && !isFeedbackAvailable(feedback.success, x)
-  )}
-		${getFeedbackTypeTemplate(
-    context,
-    feedback.error,
-    (x) => isFeedbackAvailable(feedback.error, x) && !isFeedbackAvailable(feedback.success, x)
-  )}
-		${getFeedbackTypeTemplate(
-    context,
-    feedback.success,
-    (x) => isFeedbackAvailable(feedback.success, x)
-  )}
-	`;
-}
-function getFeedbackTypeTemplate(context, config, shouldShow) {
-  const iconTag = context.tagFor(Icon);
-  const messageTemplate = html`${(x) => x[config.messageProperty]}`;
-  const innerTemplate = config.slot ? html`<slot
-				name="${config.slot.name}"
-				${slotted(config.slot.slottedContentProperty)}
-				>${messageTemplate}</slot
-		  >` : messageTemplate;
-  return html`<div
-		class="${(x) => classNames(
-    "message",
-    `${config.className}-message`,
-    ["message--visible", config.role === "status" || shouldShow(x)],
-    ["sr-only", !shouldShow(x)]
-  )}"
-		role="${config.role}"
-		aria-atomic="false"
-	>
-		${when(
-    (x) => shouldShow(x) && config.iconType,
-    html`<${iconTag} class="message-icon" name="${config.iconType}"></${iconTag}>`
-  )}
-		<span class="message-text">${innerTemplate}</span>
-	</div>`;
-}
-function errorText(constructor) {
-  class ErrorText extends constructor {
-    #blockValidateCalls = false;
-    constructor(...args) {
-      super(...args);
-      this._validate = this.validate;
-      this.validate = () => {
-        if (!this.#blockValidateCalls) this._validate();
-      };
-    }
-    errorTextChanged(_, newErrorText) {
-      if (newErrorText) {
-        this.#forceCustomError(newErrorText);
-      } else {
-        this.#clearCustomErrorAndRevalidate();
-      }
-    }
-    #forceCustomError(errorMessage) {
-      this.setValidity({ customError: true }, errorMessage, this.control);
-      this.errorValidationMessage = errorMessage;
-      this.#blockValidateCalls = true;
-    }
-    #clearCustomErrorAndRevalidate() {
-      this.setValidity({}, "", this.control);
-      this.#blockValidateCalls = false;
-      this.validate();
-    }
-  }
-  __decorateClass([
-    attr({ attribute: "error-text" })
-  ], ErrorText.prototype, "errorText");
-  return ErrorText;
-}
-
-export { FormElementSuccessText as F, FormElementHelperText as a, FormElementCharCount as b, errorText as e, formElements as f, getFeedbackTemplate as g };

package/shared/foundation/anchor/anchor.d.ts

@@ -1,11 +0,0 @@
-export declare class Anchor {
-    download: string;
-    href: string;
-    hreflang: string;
-    ping: string;
-    referrerpolicy: string;
-    rel: string;
-    target: '_self' | '_blank' | '_parent' | '_top';
-    type: string;
-    control: HTMLAnchorElement | undefined;
-}

package/shared/foundation/utilities/apply-mixins.d.ts

@@ -1 +0,0 @@
-export declare function applyMixins(derivedCtor: any, ...baseCtors: any[]): void;

package/shared/patterns/form-elements/form-elements.d.ts

@@ -1,58 +0,0 @@
-import type { VividElementDefinitionContext } from '../../design-system/defineVividComponent';
-export interface FormElement {
-    errorValidationMessage: string;
-    label: string;
-    userValid: boolean;
-    dirtyValue: boolean;
-}
-export interface FormElementHelperText {
-    helperText?: string;
-    _helperTextSlottedContent?: HTMLElement[];
-}
-export interface FormElementSuccessText {
-    successText?: string;
-}
-export interface FormElementCharCount {
-    charCount: boolean;
-}
-export interface ErrorText {
-    errorText: string;
-}
-export declare class FormElementHelperText {
-    helperText?: string;
-}
-export declare class FormElementSuccessText {
-    successText?: string;
-}
-export declare class FormElementCharCount {
-    charCount: boolean;
-}
-export declare function formElements<T extends {
-    new (...args: any[]): Record<string, any>;
-}>(constructor: T): {
-    new (...args: any[]): {
-        [x: string]: any;
-        label?: string | undefined;
-        errorValidationMessage: string;
-        "__#2@#forceErrorDisplay": boolean;
-        "__#2@#hasBeenTouched": boolean;
-        connectedCallback(): void;
-        "__#2@#handleInvalidEvent": () => void;
-        disconnectedCallback(): void;
-        formResetCallback(): void;
-        validate: () => void;
-    };
-} & T;
-export declare function getFeedbackTemplate(context: VividElementDefinitionContext): import("@microsoft/fast-element").ViewTemplate<Partial<FormElement & FormElementHelperText & FormElementSuccessText & ErrorText>, any>;
-export declare function errorText<T extends {
-    new (...args: any[]): Record<string, any>;
-}>(constructor: T): {
-    new (...args: any[]): {
-        [x: string]: any;
-        errorText?: string | undefined;
-        "__#3@#blockValidateCalls": boolean;
-        errorTextChanged(_: string, newErrorText: string | undefined): void;
-        "__#3@#forceCustomError"(errorMessage: string): void;
-        "__#3@#clearCustomErrorAndRevalidate"(): void;
-    };
-} & T;

package/shared/picker-field/picker-field.form-associated.d.ts

@@ -1,11 +0,0 @@
-import { FormAssociated } from '../foundation/form-associated/form-associated';
-import { VividElement } from '../foundation/vivid-element/vivid-element';
-declare class _PickerField extends VividElement {
-}
-interface _PickerField extends FormAssociated {
-}
-declare const FormAssociatedPickerField_base: typeof _PickerField;
-export declare class FormAssociatedPickerField extends FormAssociatedPickerField_base {
-    proxy: HTMLInputElement;
-}
-export {};

package/shared/text-anchor.cjs

@@ -1,38 +0,0 @@
-'use strict';
-
-const vividElement = require('./vivid-element.cjs');
-const affix = require('./affix.cjs');
-const applyMixins = require('./apply-mixins.cjs');
-const anchor = require('./anchor.cjs');
-const delegatesAria = require('./delegates-aria.cjs');
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  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);
-  return result;
-};
-class TextAnchor extends affix.AffixIcon(delegatesAria.DelegatesAria(vividElement.VividElement)) {
-  /**
-   * Allows subclasses to provide a body template that will be rendered inside the anchor.
-   * @internal
-   */
-  getBodyTemplate() {
-    return void 0;
-  }
-}
-__decorateClass([
-  vividElement.attr
-], TextAnchor.prototype, "text");
-__decorateClass([
-  vividElement.attr
-], TextAnchor.prototype, "connotation");
-__decorateClass([
-  vividElement.attr
-], TextAnchor.prototype, "appearance");
-applyMixins.applyMixins(TextAnchor, anchor.Anchor);
-
-exports.TextAnchor = TextAnchor;

package/shared/text-anchor.js

@@ -1,36 +0,0 @@
-import { V as VividElement, a as attr } from './vivid-element.js';
-import { b as AffixIcon } from './affix.js';
-import { a as applyMixins } from './apply-mixins.js';
-import { A as Anchor } from './anchor.js';
-import { D as DelegatesAria } from './delegates-aria.js';
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  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);
-  return result;
-};
-class TextAnchor extends AffixIcon(DelegatesAria(VividElement)) {
-  /**
-   * Allows subclasses to provide a body template that will be rendered inside the anchor.
-   * @internal
-   */
-  getBodyTemplate() {
-    return void 0;
-  }
-}
-__decorateClass([
-  attr
-], TextAnchor.prototype, "text");
-__decorateClass([
-  attr
-], TextAnchor.prototype, "connotation");
-__decorateClass([
-  attr
-], TextAnchor.prototype, "appearance");
-applyMixins(TextAnchor, Anchor);
-
-export { TextAnchor as T };

package/shared/text-anchor.template.cjs

@@ -1,35 +0,0 @@
-'use strict';
-
-const affix = require('./affix.cjs');
-const delegatesAria = require('./delegates-aria.cjs');
-const classNames = require('./class-names.cjs');
-const ref = require('./ref.cjs');
-const vividElement = require('./vivid-element.cjs');
-
-const getClasses = ({ text, connotation, appearance }) => classNames.classNames(
-  "control",
-  ["icon-only", !text],
-  [`connotation-${connotation}`, Boolean(connotation)],
-  [`appearance-${appearance}`, Boolean(appearance)]
-);
-const textAnchorTemplate = (context) => {
-  const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return vividElement.html`<a
-		class="${getClasses}"
-		download="${(x) => x.download}"
-		href="${(x) => x.href}"
-		hreflang="${(x) => x.hreflang}"
-		ping="${(x) => x.ping}"
-		referrerpolicy="${(x) => x.referrerpolicy}"
-		rel="${(x) => x.rel}"
-		target="${(x) => x.target}"
-		type="${(x) => x.type}"
-		${delegatesAria.delegateAria()}
-		${ref.ref("control")}
-	>
-		${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)} ${(x) => x.text}
-		${(x) => x.getBodyTemplate?.() ?? ""}
-	</a> `;
-};
-
-exports.textAnchorTemplate = textAnchorTemplate;

package/shared/text-anchor.template.js

@@ -1,33 +0,0 @@
-import { a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { d as delegateAria } from './delegates-aria.js';
-import { c as classNames } from './class-names.js';
-import { r as ref } from './ref.js';
-import { h as html } from './vivid-element.js';
-
-const getClasses = ({ text, connotation, appearance }) => classNames(
-  "control",
-  ["icon-only", !text],
-  [`connotation-${connotation}`, Boolean(connotation)],
-  [`appearance-${appearance}`, Boolean(appearance)]
-);
-const textAnchorTemplate = (context) => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  return html`<a
-		class="${getClasses}"
-		download="${(x) => x.download}"
-		href="${(x) => x.href}"
-		hreflang="${(x) => x.hreflang}"
-		ping="${(x) => x.ping}"
-		referrerpolicy="${(x) => x.referrerpolicy}"
-		rel="${(x) => x.rel}"
-		target="${(x) => x.target}"
-		type="${(x) => x.type}"
-		${delegateAria()}
-		${ref("control")}
-	>
-		${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)} ${(x) => x.text}
-		${(x) => x.getBodyTemplate?.() ?? ""}
-	</a> `;
-};
-
-export { textAnchorTemplate as t };

package/shared/utils/applyMixinsWithObservables.d.ts

@@ -1 +0,0 @@
-export declare function applyMixinsWithObservables(derivedCtor: any, ...baseCtors: any[]): void;

package/text-anchor/index.cjs

@@ -1,17 +0,0 @@
-'use strict';
-
-const definition = require('../shared/definition28.cjs');
-const vividElement = require('../shared/vivid-element.cjs');
-const textAnchor = require('../shared/text-anchor.cjs');
-const textAnchor_template = require('../shared/text-anchor.template.cjs');
-
-const textAnchorDefinition = vividElement.defineVividComponent(
-  "text-anchor",
-  textAnchor.TextAnchor,
-  textAnchor_template.textAnchorTemplate,
-  [definition.iconDefinition],
-  {}
-);
-const registerTextAnchor = vividElement.createRegisterFunction(textAnchorDefinition);
-
-registerTextAnchor();

package/text-anchor/index.js

@@ -1,15 +0,0 @@
-import { i as iconDefinition } from '../shared/definition28.js';
-import { g as createRegisterFunction, i as defineVividComponent } from '../shared/vivid-element.js';
-import { T as TextAnchor } from '../shared/text-anchor.js';
-import { t as textAnchorTemplate } from '../shared/text-anchor.template.js';
-
-const textAnchorDefinition = defineVividComponent(
-  "text-anchor",
-  TextAnchor,
-  textAnchorTemplate,
-  [iconDefinition],
-  {}
-);
-const registerTextAnchor = createRegisterFunction(textAnchorDefinition);
-
-registerTextAnchor();