@vonage/vivid 3.0.0 → 3.0.1

package/shared/definition8.js

@@ -0,0 +1,113 @@
+import { F as FoundationElement, U as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
+import { B as Button, b as buttonRegistries } from './definition9.js';
+import { i as iconRegistries } from './definition3.js';
+import { C as Connotation } from './enums.js';
+import { b as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { w as when } from './when.js';
+import { c as classNames } from './class-names.js';
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 30 Jan 2023 11:28:31 GMT\n */\n.control {\n  overflow: hidden;\n  max-height: 160px;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  transition: max-height var(--transition-delay, 200ms);\n}\n.control.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n}\n.control.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n}\n.control.connotation-announcement {\n  --_connotation-color-primary: var(--vvd-color-announcement-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n}\n.control.connotation-warning {\n  --_connotation-color-primary: var(--vvd-color-warning-300);\n  --_connotation-color-primary-text: var(--vvd-color-canvas-text);\n}\n.control:not(.connotation-success, .connotation-alert, .connotation-announcement, .connotation-warning) {\n  --_connotation-color-primary: var(--vvd-color-information-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control.removing {\n  max-height: 0;\n}\n.control > .header {\n  display: flex;\n  min-height: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 20));\n  align-items: center;\n  justify-content: flex-start;\n  font: var(--vvd-typography-base-bold);\n}\n.control > .header > .user-content {\n  display: flex;\n  flex: 1 0;\n  align-items: center;\n  justify-content: center;\n  padding-inline: 16px;\n}\n.control > .header > .user-content > .icon {\n  flex: 0 0 auto;\n  font-size: 20px;\n  line-height: 1;\n  margin-inline-end: 15px;\n}\n.control > .header > .user-content > .action-items {\n  display: inline-block;\n  flex: 0 0 auto;\n  padding-inline-start: 15px;\n}\n.control > .header > .user-content > .message {\n  padding: 20px 0;\n}\n.control > .header > .dismiss-button {\n  --vvd-icon-button-color: inherit;\n  flex: 0 0 auto;\n  margin-inline-end: 8px;\n}";
+
+var _Banner_handleRemoveEnd, _Banner_closeOnKeyDown;
+const connotationIconMap = new Map([[Connotation.Information, 'info-solid'], [Connotation.Announcement, 'megaphone-solid'], [Connotation.Success, 'check-circle-solid'], [Connotation.Warning, 'warning-solid'], [Connotation.Alert, 'error-solid']]);
+const defaultConnotation = (connotation = Connotation.Information) => connotationIconMap.get(connotation);
+class Banner extends FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.removable = false;
+    _Banner_handleRemoveEnd.set(this, () => {
+      this.$emit('removed');
+      this.parentElement && this.parentElement.removeChild(this);
+    });
+    _Banner_closeOnKeyDown.set(this, e => {
+      if (e.key !== 'Escape' || !this.removable) {
+        return;
+      }
+      this.remove();
+    });
+  }
+  get conditionedIcon() {
+    var _a;
+    return (_a = this.icon) !== null && _a !== void 0 ? _a : defaultConnotation(this.connotation);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('keydown', __classPrivateFieldGet(this, _Banner_closeOnKeyDown, "f"));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('keydown', __classPrivateFieldGet(this, _Banner_closeOnKeyDown, "f"));
+  }
+  remove() {
+    this.$emit('removing');
+    const banner = this.shadowRoot && this.shadowRoot.querySelector('.banner');
+    if (banner) {
+      banner.classList.add('removing');
+      banner.addEventListener('transitionend', __classPrivateFieldGet(this, _Banner_handleRemoveEnd, "f"));
+    }
+  }
+}
+_Banner_handleRemoveEnd = new WeakMap(), _Banner_closeOnKeyDown = new WeakMap();
+__decorate([attr({
+  attribute: 'action-href'
+}), __metadata("design:type", Object)], Banner.prototype, "actionHref", void 0);
+__decorate([attr({
+  attribute: 'action-text'
+}), __metadata("design:type", Object)], Banner.prototype, "actionText", void 0);
+__decorate([attr({
+  mode: 'boolean'
+}), __metadata("design:type", Object)], Banner.prototype, "removable", void 0);
+__decorate([attr({
+  attribute: 'aria-live'
+}), __metadata("design:type", Object)], Banner.prototype, "ariaLive", void 0);
+__decorate([attr(), __metadata("design:type", Object)], Banner.prototype, "role", void 0);
+__decorate([attr(), __metadata("design:type", Object)], Banner.prototype, "text", void 0);
+__decorate([attr(), __metadata("design:type", Object)], Banner.prototype, "connotation", void 0);
+applyMixins(Banner, AffixIcon);
+
+let _2 = t => t,
+  _t,
+  _t2;
+const getClasses = _ => classNames('control', [`connotation-${_.connotation}`, !!_.connotation]);
+function renderDismissButton(buttonTag) {
+  return html(_t || (_t = _2`
+	  <${0}
+				part="vvd-theme-alternate"
+			  size="condensed"
+			  class="dismiss-button"
+			  icon="close-line"
+			  @click="${0}">
+	  </${0}>`), buttonTag, x => x.remove(), buttonTag);
+}
+const BannerTemplate = context => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  const buttonTag = context.tagFor(Button);
+  return html(_t2 || (_t2 = _2`
+	  <div class="banner ${0}" tabindex="0">
+		  <header class="header">
+					<div class="user-content">
+            ${0}
+						<div class="banner--message"
+				 role="${0}"
+				 aria-live="${0}">
+              ${0}
+            </div>
+						<slot class="action-items" name="action-items"></slot>
+					</div>
+
+			  ${0}
+		  </header>
+	  </div>
+	`), getClasses, x => affixIconTemplate(x.conditionedIcon), x => x.role ? x.role : 'status', x => x.ariaLive ? x.ariaLive : 'polite', x => x.text, when(x => x.removable, renderDismissButton(buttonTag)));
+};
+
+const bannerDefinition = Banner.compose({
+  baseName: 'banner',
+  template: BannerTemplate,
+  styles: css_248z
+});
+const bannerRegistries = [bannerDefinition(), ...iconRegistries, ...buttonRegistries];
+const registerBanner = registerFactory(bannerRegistries);
+
+export { bannerRegistries as a, bannerDefinition as b, registerBanner as r };

package/shared/definition9.js

@@ -0,0 +1,107 @@
+import { _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
+import { i as iconRegistries } from './definition3.js';
+import { f as focusRegistries } from './definition4.js';
+import { A as AffixIconWithTrailing, a as affixIconTemplateFactory } from './affix.js';
+import { B as Button$1 } from './button.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { f as focusTemplateFactory } from './focus2.js';
+import { r as ref } from './ref.js';
+import { c as classNames } from './class-names.js';
+
+class Button extends Button$1 {
+  constructor() {
+    super(...arguments);
+    this.stacked = false;
+  }
+}
+__decorate([attr, __metadata("design:type", String)], Button.prototype, "connotation", void 0);
+__decorate([attr, __metadata("design:type", String)], Button.prototype, "shape", void 0);
+__decorate([attr, __metadata("design:type", String)], Button.prototype, "appearance", void 0);
+__decorate([attr, __metadata("design:type", String)], Button.prototype, "size", void 0);
+__decorate([attr({
+  mode: 'boolean',
+  attribute: 'stacked'
+}), __metadata("design:type", Object)], Button.prototype, "stacked", void 0);
+__decorate([attr, __metadata("design:type", String)], Button.prototype, "label", void 0);
+applyMixins(Button, AffixIconWithTrailing);
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 30 Jan 2023 11:28:31 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.control {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  justify-content: center;\n  border: 0 none;\n  margin: 0;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_button-block-size);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  gap: var(--_button-icon-gap);\n  vertical-align: middle;\n  white-space: nowrap;\n  /* Size */\n}\n.control.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-cta-600);\n  --_connotation-color-contrast: var(--vvd-color-cta-800);\n  --_connotation-color-fierce: var(--vvd-color-cta-700);\n  --_connotation-color-firm: var(--vvd-color-cta-600);\n  --_connotation-color-soft: var(--vvd-color-cta-100);\n  --_connotation-color-faint: var(--vvd-color-cta-50);\n}\n.control.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-success-600);\n  --_connotation-color-contrast: var(--vvd-color-success-800);\n  --_connotation-color-fierce: var(--vvd-color-success-700);\n  --_connotation-color-firm: var(--vvd-color-success-600);\n  --_connotation-color-soft: var(--vvd-color-success-100);\n  --_connotation-color-faint: var(--vvd-color-success-50);\n}\n.control.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-alert-600);\n  --_connotation-color-contrast: var(--vvd-color-alert-800);\n  --_connotation-color-fierce: var(--vvd-color-alert-700);\n  --_connotation-color-firm: var(--vvd-color-alert-600);\n  --_connotation-color-soft: var(--vvd-color-alert-100);\n  --_connotation-color-faint: var(--vvd-color-alert-50);\n}\n.control:not(.connotation-cta, .connotation-success, .connotation-alert) {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-neutral-800);\n  --_connotation-color-contrast: var(--vvd-color-neutral-800);\n  --_connotation-color-fierce: var(--vvd-color-neutral-700);\n  --_connotation-color-firm: var(--vvd-color-canvas-text);\n  --_connotation-color-soft: var(--vvd-color-neutral-100);\n  --_connotation-color-faint: var(--vvd-color-neutral-50);\n}\n.control.appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control.appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control: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.control:where(:disabled, .disabled).appearance-filled {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled).appearance-outlined {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control: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.control:not(.icon-only) {\n  inline-size: 100%;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .control {\n    user-select: none;\n  }\n}\n.control:not(:disabled) {\n  cursor: pointer;\n}\n.control:disabled {\n  cursor: not-allowed;\n}\n.control.icon-only {\n  contain: size;\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .control.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .control.icon-only {\n    inline-size: var(--_button-block-size);\n  }\n}\n.control:not(.stacked).size-condensed {\n  --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.control:not(.stacked).size-condensed:not(.icon-only) {\n  --_button-icon-gap: 8px;\n  padding-inline: 12px;\n}\n.control:not(.stacked).size-expanded {\n  --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n  font: var(--vvd-typography-base-extended-bold);\n}\n.control:not(.stacked).size-expanded:not(.icon-only) {\n  --_button-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control:not(.stacked):not(.size-condensed, .size-expanded) {\n  --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  font: var(--vvd-typography-base-bold);\n}\n.control:not(.stacked):not(.size-condensed, .size-expanded):not(.icon-only) {\n  --_button-icon-gap: 8px;\n  padding-inline: 16px;\n}\n.control.stacked {\n  flex-direction: column;\n  justify-content: center;\n  --_button-block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8)) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)));\n  font: var(--vvd-typography-base-bold);\n}\n.control.stacked:not(.icon-only) {\n  --_button-icon-gap: 10px;\n  padding-inline: 16px;\n}\n\n/* Shape */\n.control:not(.shape-pill:not(.stacked)) {\n  border-radius: 6px;\n}\n\n.control.shape-pill:not(.stacked):not(.icon-only) {\n  border-radius: 24px;\n}\n.control.shape-pill:not(.stacked).icon-only {\n  border-radius: 50%;\n}\n\n/* Icon */\n.icon {\n  line-height: 1;\n}\n.icon-trailing .icon {\n  order: 1;\n}\n.control.stacked > .icon {\n  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n}\n.control:not(.stacked) > .icon {\n  font-size: calc(var(--_button-block-size) / 2);\n}\n\n:not(:focus-visible) > .focus-indicator {\n  display: none;\n}\n.appearance-outlined .focus-indicator, .appearance-ghost .focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}";
+
+let _ = t => t,
+  _t;
+const getAppearanceClassName = (appearance, disabled) => {
+  let className = `appearance-${appearance}`;
+  disabled && (className += ' disabled');
+  return className;
+};
+const getClasses = ({
+  connotation,
+  appearance,
+  shape,
+  iconTrailing,
+  icon,
+  label,
+  disabled,
+  stacked,
+  size
+}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [getAppearanceClassName(appearance, disabled), Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], [`size-${size}`, Boolean(size)], ['icon-only', !label && !!icon], ['icon-trailing', iconTrailing], ['stacked', Boolean(stacked)]);
+const buttonTemplate = context => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  const focusTemplate = focusTemplateFactory(context);
+  return html(_t || (_t = _`
+    <button
+        class="${0}"
+        ?autofocus="${0}"
+        ?disabled="${0}"
+        form="${0}"
+        formaction="${0}"
+        formenctype="${0}"
+        formmethod="${0}"
+        formnovalidate="${0}"
+        formtarget="${0}"
+        name="${0}"
+        type="${0}"
+        value="${0}"
+        aria-atomic="${0}"
+        aria-busy="${0}"
+        aria-controls="${0}"
+        aria-current="${0}"
+        aria-describedby="${0}"
+        aria-details="${0}"
+        aria-disabled="${0}"
+        aria-errormessage="${0}"
+        aria-expanded="${0}"
+        aria-flowto="${0}"
+        aria-haspopup="${0}"
+        aria-hidden="${0}"
+        aria-invalid="${0}"
+        aria-keyshortcuts="${0}"
+        aria-label="${0}"
+        aria-labelledby="${0}"
+        aria-live="${0}"
+        aria-owns="${0}"
+        aria-pressed="${0}"
+        aria-relevant="${0}"
+        aria-roledescription="${0}"
+        ${0}
+    >
+        ${0}
+        ${0}
+        ${0}
+    </button>
+`), getClasses, x => x.autofocus, x => x.disabled, x => x.formId, x => x.formaction, x => x.formenctype, x => x.formmethod, x => x.formnovalidate, x => x.formtarget, x => x.name, x => x.type, x => x.value, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaExpanded, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaPressed, x => x.ariaRelevant, x => x.ariaRoledescription, ref('control'), () => focusTemplate, x => affixIconTemplate(x.icon), x => x.label);
+};
+
+const buttonDefinition = Button.compose({
+  baseName: 'button',
+  baseClass: Button$1,
+  template: buttonTemplate,
+  styles: css_248z,
+  shadowOptions: {
+    delegatesFocus: true
+  }
+});
+const buttonRegistries = [buttonDefinition(), ...iconRegistries, ...focusRegistries];
+const registerButton = registerFactory(buttonRegistries);
+
+export { Button as B, buttonDefinition as a, buttonRegistries as b, registerButton as r };

package/shared/design-system/index.d.ts

@@ -1,3 +1,3 @@
 import { DesignSystem } from '@microsoft/fast-foundation';
-export declare function provideVividDesignSystem(element?: HTMLElement): DesignSystem;
 export declare const designSystem: DesignSystem;
+export declare const registerFactory: (registries: any[]) => (prefix?: string) => DesignSystem;