@vonage/vivid 3.32.0 → 3.34.0

package/shared/definition24.js

@@ -1,124 +1,35 @@
-import { _ as __decorate, a as attr, b as __metadata, o as observable, h as html, r as registerFactory } from './index.js';
-import { f as focusRegistries } from './definition4.js';
-import { i as iconRegistries } from './definition3.js';
-import { b as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
-import './focus.js';
-import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount, g as getFeedbackTemplate } from './index2.js';
-import { T as TextField$1 } from './text-field2.js';
-import { a as applyMixins } from './apply-mixins.js';
-import { c as css_248z } from './text-field.js';
-import { f as focusTemplateFactory } from './focus2.js';
-import { w as when } from './when.js';
-import { r as ref } from './ref.js';
-import { s as slotted } from './slotted.js';
+import { h as html, r as registerFactory } from './index.js';
+import { I as Icon } from './icon.js';
 import { c as classNames } from './class-names.js';
+import { w as when } from './when.js';
+
+const styles = ":host {\n  display: inline-block;\n  vertical-align: sub;\n}\n\n.control {\n  display: flex;\n  margin: unset;\n  block-size: var(--_icon-block-size);\n  color: currentColor;\n  contain: strict;\n  inline-size: var(--_icon-block-size);\n}\n.control.connotation-accent {\n  /* @cssprop [--vvd-icon-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-icon-accent-primary, var(--vvd-color-canvas-text));\n}\n.control.connotation-announcement {\n  /* @cssprop [--vvd-icon-announcement-primary=var(--vvd-color-announcement-500)] */\n  --_connotation-color-primary: var(--vvd-icon-announcement-primary, var(--vvd-color-announcement-500));\n}\n.control.connotation-cta {\n  /* @cssprop [--vvd-icon-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-icon-cta-primary, var(--vvd-color-cta-500));\n}\n.control.connotation-success {\n  /* @cssprop [--vvd-icon-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-icon-success-primary, var(--vvd-color-success-500));\n}\n.control.connotation-alert {\n  /* @cssprop [--vvd-icon-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-icon-alert-primary, var(--vvd-color-alert-500));\n}\n.control.connotation-information {\n  /* @cssprop [--vvd-icon-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-icon-information-primary, var(--vvd-color-information-500));\n}\n.control.size--6 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.control.size--5 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n}\n.control.size--4 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.control.size--3 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 12));\n}\n.control.size--2 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.control.size--1 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 4));\n}\n.control.size-0 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.control.size-1 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 4));\n}\n.control.size-2 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n}\n.control.size-3 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 12));\n}\n.control.size-4 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16));\n}\n.control.size-5 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 20));\n}\n.control:not(.size--6, .size--5, .size--4, .size--3, .size--2, .size--1, .size-0, .size-1, .size-2, .size-3, .size-4, .size-5) {\n  --_icon-block-size: 1em;\n}\n\n.control[class*=connotation] {\n  color: var(--_connotation-color-primary);\n}\n\nslot, svg, ::slotted(:where(svg, img)) {\n  margin: auto;\n  block-size: inherit;\n  inline-size: inherit;\n}";
 
-let TextField = class TextField extends TextField$1 {};
-__decorate([attr, __metadata("design:type", String)], TextField.prototype, "appearance", void 0);
-__decorate([attr, __metadata("design:type", String)], TextField.prototype, "shape", void 0);
-__decorate([attr, __metadata("design:type", String)], TextField.prototype, "autoComplete", void 0);
-__decorate([observable, __metadata("design:type", Array)], TextField.prototype, "actionItemsSlottedContent", void 0);
-TextField = __decorate([errorText, formElements], TextField);
-applyMixins(TextField, AffixIcon, FormElementCharCount, FormElementHelperText, FormElementSuccessText);
+const getClasses = ({
+  connotation,
+  size
+}) => classNames(
+  "control",
+  [`connotation-${connotation}`, Boolean(connotation)],
+  [`size-${size}`, Boolean(size)]
+);
+const iconTemplate = () => html`
 
-const getStateClasses = ({
-  errorValidationMessage,
-  disabled,
-  value,
-  readOnly,
-  placeholder,
-  appearance,
-  shape,
-  label,
-  successText,
-  actionItemsSlottedContent
-}) => classNames(['error connotation-alert', Boolean(errorValidationMessage)], ['disabled', disabled], ['has-value', Boolean(value)], ['readonly', readOnly], ['placeholder', Boolean(placeholder)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], ['no-label', !label], ['success connotation-success', Boolean(successText)], ['action-items', !!(actionItemsSlottedContent === null || actionItemsSlottedContent === void 0 ? void 0 : actionItemsSlottedContent.length)]);
-function renderLabel() {
-  return html`
-	  <label for="control" class="label">
-		  ${x => x.label}
-	  </label>`;
-}
-function renderCharCount() {
-  return html`
-		<span class="char-count">${x => x.value ? x.value.length : 0} / ${x => x.maxlength}</span>
-	`;
-}
-const TextfieldTemplate = context => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  const focusTemplate = focusTemplateFactory(context);
-  return html`
-	<div class="base ${getStateClasses}">
-    ${when(x => x.charCount && x.maxlength, renderCharCount())}
-    ${when(x => x.label, renderLabel())}
-    <div class="fieldset">
-      ${x => affixIconTemplate(x.icon)}
-			<div class="wrapper">
-				<input class="control"
-            id="control"
-            @input="${x => x.handleTextInput()}"
-            @change="${x => x.handleChange()}"
-            ?autofocus="${x => x.autofocus}"
-            ?disabled="${x => x.disabled}"
-            list="${x => x.list}"
-            maxlength="${x => x.maxlength}"
-            minlength="${x => x.minlength}"
-            pattern="${x => x.pattern}"
-            placeholder="${x => x.placeholder}"
-            ?readonly="${x => x.readOnly}"
-            ?required="${x => x.required}"
-            size="${x => x.size}"
-            autocomplete="${x => x.autoComplete}"
-            name="${x => x.name}"
-            ?spellcheck="${x => x.spellcheck}"
-            :value="${x => x.value}"
-            type="${x => x.type}"
-            aria-atomic="${x => x.ariaAtomic}"
-            aria-busy="${x => x.ariaBusy}"
-            aria-controls="${x => x.ariaControls}"
-            aria-current="${x => x.ariaCurrent}"
-            aria-describedby="${x => x.ariaDescribedby}"
-            aria-details="${x => x.ariaDetails}"
-            aria-disabled="${x => x.ariaDisabled}"
-            aria-errormessage="${x => x.ariaErrormessage}"
-            aria-flowto="${x => x.ariaFlowto}"
-            aria-haspopup="${x => x.ariaHaspopup}"
-            aria-hidden="${x => x.ariaHidden}"
-            aria-invalid="${x => x.ariaInvalid}"
-            aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
-            aria-label="${x => x.ariaLabel}"
-            aria-labelledby="${x => x.ariaLabelledby}"
-            aria-live="${x => x.ariaLive}"
-            aria-owns="${x => x.ariaOwns}"
-            aria-relevant="${x => x.ariaRelevant}"
-            aria-roledescription="${x => x.ariaRoledescription}"
-            ${ref('control')}
-      />
-      	${() => focusTemplate}
-			</div>
-			<div class="action-items-wrapper">
-				<slot name="action-items"  ${slotted('actionItemsSlottedContent')}></slot>
-			</div>
+	<figure class="${getClasses}">
+		<slot>
+			${when((x) => !x.iconLoaded, html`<img alt="${(x) => x.name}" src="${(x) => x.iconUrl}"/>`)}
+			${when((x) => x.iconLoaded && x._svg, (x) => html`${x._svg}`)}
+		</slot>
+	</figure>
 
-    </div>
-	  ${when(x => {
-    var _a;
-    return !x.successText && !x.errorValidationMessage && ((_a = x.helperText) === null || _a === void 0 ? void 0 : _a.length);
-  }, getFeedbackTemplate('helper', context))}
-	  ${when(x => !x.successText && x.errorValidationMessage, getFeedbackTemplate('error', context))}
-	  ${when(x => x.successText, getFeedbackTemplate('success', context))}
-	</div>`;
-};
+`;
 
-const textFieldDefinition = TextField.compose({
-  baseName: 'text-field',
-  template: TextfieldTemplate,
-  styles: css_248z,
-  shadowOptions: {
-    delegatesFocus: true
-  }
+const iconDefinition = Icon.compose({
+  baseName: "icon",
+  template: iconTemplate,
+  styles
 });
-const textFieldRegistries = [textFieldDefinition(), ...iconRegistries, ...focusRegistries];
-const registerTextField = registerFactory(textFieldRegistries);
+const iconRegistries = [iconDefinition()];
+const registerIcon = registerFactory(iconRegistries);
 
-export { TextField as T, textFieldDefinition as a, registerTextField as r, textFieldRegistries as t };
+export { iconRegistries as a, iconDefinition as i, registerIcon as r };

package/shared/definition25.js

@@ -1,76 +1,62 @@
-import { F as FoundationElement, _ as __decorate, a as attr, h as html, r as registerFactory } from './index.js';
-import { O as Orientation } from './aria.js';
+import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
 import { c as classNames } from './class-names.js';
 
-/**
- * Divider roles
- * @public
- */
-const DividerRole = {
-    /**
-     * The divider semantically separates content
-     */
-    separator: "separator",
-    /**
-     * The divider has no semantic value and is for visual presentation only.
-     */
-    presentation: "presentation",
+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;
 };
-
-/**
- * A Divider Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#separator | ARIA separator } or {@link https://www.w3.org/TR/wai-aria-1.1/#presentation | ARIA presentation}.
- *
- * @public
- */
-class Divider$1 extends FoundationElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The role of the element.
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: role
-         */
-        this.role = DividerRole.separator;
-        /**
-         * The orientation of the divider.
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: orientation
-         */
-        this.orientation = Orientation.horizontal;
-    }
+class Layout extends FoundationElement {
 }
-__decorate([
-    attr
-], Divider$1.prototype, "role", void 0);
-__decorate([
-    attr
-], Divider$1.prototype, "orientation", void 0);
-
-var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 22 Aug 2023 13:37:39 GMT\n */\n:host {\n  display: block;\n}\n\n.base {\n  display: block;\n  background-color: var(--vvd-color-neutral-200);\n}\n.base:not(.vertical) {\n  block-size: 1px;\n  inline-size: 100%;\n}\n.base.vertical {\n  block-size: 100%;\n  inline-size: 1px;\n}";
+__decorateClass([
+  attr
+], Layout.prototype, "gutters", 2);
+__decorateClass([
+  attr({ attribute: "column-basis" })
+], Layout.prototype, "columnBasis", 2);
+__decorateClass([
+  attr({ attribute: "column-spacing" })
+], Layout.prototype, "columnSpacing", 2);
+__decorateClass([
+  attr({ attribute: "row-spacing" })
+], Layout.prototype, "rowSpacing", 2);
+__decorateClass([
+  attr({ attribute: "auto-sizing" })
+], Layout.prototype, "autoSizing", 2);
 
-class Divider extends Divider$1 {}
+const styles = "/* #region SIZEs */\n/* #region BASES */\n/* #region SPACES */\n.control {\n  display: grid;\n  grid-auto-rows: var(--layout-grid-template-rows, min-content);\n}\n.control.column-basis-small {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(160px, 1fr)));\n}\n.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block), .control.column-basis-medium {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(320px, 1fr)));\n}\n.control.column-basis-large {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(380px, 1fr)));\n}\n.control.column-basis-block {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(1fr, 1fr)));\n}\n.control.column-spacing-small {\n  column-gap: var(--layout-column-gap, calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))));\n}\n.control.column-spacing-small-inline {\n  column-gap: var(--layout-column-gap, 0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))));\n}\n.control.column-spacing-small-block {\n  column-gap: var(--layout-column-gap, calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))) 0);\n}\n.control:not(.column-spacing-small):not(.column-spacing-small-inline):not(.column-spacing-small-block):not(.column-spacing-medium):not(.column-spacing-medium-inline):not(.column-spacing-medium-block):not(.column-spacing-large):not(.column-spacing-large-inline):not(.column-spacing-large-block), .control.column-spacing-medium {\n  column-gap: var(--layout-column-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.column-spacing-medium-inline {\n  column-gap: var(--layout-column-gap, 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.column-spacing-medium-block {\n  column-gap: var(--layout-column-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)) 0);\n}\n.control.column-spacing-large {\n  column-gap: var(--layout-column-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)));\n}\n.control.column-spacing-large-inline {\n  column-gap: var(--layout-column-gap, 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)));\n}\n.control.column-spacing-large-block {\n  column-gap: var(--layout-column-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) 0);\n}\n.control.row-spacing-small {\n  row-gap: var(--layout-row-gap, calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))));\n}\n.control.row-spacing-small-inline {\n  row-gap: var(--layout-row-gap, 0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))));\n}\n.control.row-spacing-small-block {\n  row-gap: var(--layout-row-gap, calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))) 0);\n}\n.control:not(.row-spacing-small):not(.row-spacing-small-inline):not(.row-spacing-small-block):not(.row-spacing-medium):not(.row-spacing-medium-inline):not(.row-spacing-medium-block):not(.row-spacing-large):not(.row-spacing-large-inline):not(.row-spacing-large-block), .control.row-spacing-medium {\n  row-gap: var(--layout-row-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.row-spacing-medium-inline {\n  row-gap: var(--layout-row-gap, 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.row-spacing-medium-block {\n  row-gap: var(--layout-row-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)) 0);\n}\n.control.row-spacing-large {\n  row-gap: var(--layout-row-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)));\n}\n.control.row-spacing-large-inline {\n  row-gap: var(--layout-row-gap, 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)));\n}\n.control.row-spacing-large-block {\n  row-gap: var(--layout-row-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) 0);\n}\n.control.gutters-small {\n  margin: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.gutters-small-inline {\n  margin: 0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.gutters-small-block {\n  margin: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))) 0;\n}\n.control.gutters-medium {\n  margin: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.control.gutters-medium-inline {\n  margin: 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.control.gutters-medium-block {\n  margin: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)) 0;\n}\n.control.gutters-large {\n  margin: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.control.gutters-large-inline {\n  margin: 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.control.gutters-large-block {\n  margin: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) 0;\n}\n.control.auto-sizing-fill {\n  --_auto-sizing: auto-fill;\n}\n.control:not(.auto-sizing-fill):not(.auto-sizing-fit), .control.auto-sizing-fit {\n  --_auto-sizing: auto-fit;\n}";
 
 const getClasses = ({
-  orientation
-}) => classNames('base', [`${orientation}`, Boolean(orientation)]);
-const DividerTemplate = () => html` 
-  <span
-  class="${getClasses}"
-  	orientation="${x => x.orientation}"
-  	role="${x => x.role}"
-  ></span>`;
+  columnBasis,
+  gutters,
+  columnSpacing,
+  autoSizing,
+  rowSpacing
+}) => classNames(
+  "control",
+  [`column-basis-${columnBasis}`, Boolean(columnBasis)],
+  [`gutters-${gutters}`, Boolean(gutters)],
+  [`column-spacing-${columnSpacing}`, Boolean(columnSpacing)],
+  [`row-spacing-${rowSpacing ? rowSpacing : columnSpacing}`, Boolean(rowSpacing) || Boolean(columnSpacing)],
+  [`auto-sizing-${autoSizing}`, Boolean(autoSizing)]
+);
+const layoutTemplate = () => html`
+        <div class="${getClasses}">
+			<slot></slot>
+		</div>`;
 
-const dividerDefinition = Divider.compose({
-  baseName: 'divider',
-  template: DividerTemplate,
-  styles: css_248z
+const layoutDefinition = Layout.compose({
+  baseName: "layout",
+  template: layoutTemplate,
+  styles
 });
-const dividerRegistries = [dividerDefinition()];
-const registerDivider = registerFactory(dividerRegistries);
+const layoutRegistries = [layoutDefinition()];
+const registerLayout = registerFactory(layoutRegistries);
 
-export { Divider as D, dividerDefinition as a, dividerRegistries as d, registerDivider as r };
+export { layoutRegistries as a, layoutDefinition as l, registerLayout as r };