@vonage/vivid 2.26.0 → 3.0.0-next.2

package/README.md

@@ -0,0 +1,7 @@
+# components
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test components` to execute the unit tests via [Jest](https://jestjs.io).

package/badge/index.js

@@ -0,0 +1,55 @@
+import '../shared/index.js';
+import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index2.js';
+import '../shared/web.dom-collections.iterator.js';
+import { P as PrefixOrSuffix, p as prefixOrSuffixTemplate } from '../shared/affix.js';
+import { a as applyMixins } from '../shared/apply-mixins.js';
+import { s as styleInject } from '../shared/style-inject.es.js';
+import { c as classNames } from '../shared/class-names.js';
+
+class Badge extends FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.text = '';
+  }
+
+}
+
+__decorate([attr, __metadata("design:type", String)], Badge.prototype, "connotation", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Badge.prototype, "shape", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Badge.prototype, "appearance", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Badge.prototype, "size", void 0);
+
+__decorate([attr, __metadata("design:type", Object)], Badge.prototype, "text", void 0);
+
+applyMixins(Badge, PrefixOrSuffix);
+
+var css_248z = "/*\n  Do not edit directly\n  Generated on Sun, 23 Jan 2022 11:15:05 GMT\n*/\n.control.appearance-filled, .control:not(.appearance-outlined):not(.appearance-soft) {\n  --appearance-color-fill: var(--connotation);\n  --appearance-color-text: var(--on-connotation);\n}\n\n.control.appearance-outlined {\n  --appearance-color-fill: transparent;\n  --appearance-color-outline: var(--connotation);\n  --appearance-color-text: var(--connotation-contrast);\n}\n\n.control.appearance-soft {\n  --appearance-color-fill: var(--connotation-soft);\n  --appearance-color-text: var(--connotation-contrast);\n}\n\n.control {\n  font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--appearance-color-fill);\n  box-shadow: inset 0 0 0 1px var(--appearance-color-outline);\n  color: var(--appearance-color-text);\n  column-gap: 8px;\n  vertical-align: middle;\n}\n.control:not(.connotation-cta):not(.connotation-success):not(.connotation-alert):not(.connotation-warning):not(.connotation-info) {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n  --connotation-soft: var(--vvd-color-neutral-20);\n  --connotation-contrast: var(--vvd-color-primary);\n}\n\n.control.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n  --connotation-soft: var(--vvd-color-cta-20);\n  --connotation-contrast: var(--vvd-color-cta-90);\n}\n\n.control.connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n  --connotation-soft: var(--vvd-color-success-20);\n  --connotation-contrast: var(--vvd-color-success-90);\n}\n\n.control.connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n  --connotation-soft: var(--vvd-color-alert-20);\n  --connotation-contrast: var(--vvd-color-alert-90);\n}\n\n.control.connotation-warning {\n  --connotation: var(--vvd-color-warning);\n  --on-connotation: var(--vvd-color-on-warning);\n  --connotation-soft: var(--vvd-color-warning-20);\n  --connotation-contrast: var(--vvd-color-warning-90);\n}\n\n.control.connotation-info {\n  --connotation: var(--vvd-color-info);\n  --on-connotation: var(--vvd-color-on-info);\n  --connotation-soft: var(--vvd-color-info-20);\n  --connotation-contrast: var(--vvd-color-info-90);\n}\n\n/* Size */\n.control:not(.size-base-small):not(.size-base-large) {\n  block-size: 24px;\n  padding-inline: 10px;\n}\n\n.control.size-base-small {\n  block-size: 20px;\n  padding-inline: 8px;\n}\n\n.control.size-base-large {\n  block-size: 28px;\n  padding-inline: 12px;\n}\n\n/* Shape */\n.control:not(.shape-pill) {\n  border-radius: 4px;\n}\n\n.control.shape-pill {\n  border-radius: 14px;\n}\n\n/* Icon */\n.icon.icon-trailing {\n  order: 1;\n}";
+styleInject(css_248z);
+
+let _ = t => t,
+    _t;
+
+const getClasses = ({
+  connotation,
+  appearance,
+  shape,
+  size
+}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], [`size-${size}`, Boolean(size)]);
+
+const badgeTemplate = context => html(_t || (_t = _`
+    <span class="${0}">
+      ${0}
+      ${0}
+		</span>`), getClasses, () => prefixOrSuffixTemplate(context), x => x.text);
+
+const VIVIDBadge = Badge.compose({
+  baseName: 'badge',
+  template: badgeTemplate,
+  styles: css_248z
+});
+designSystem.register(VIVIDBadge());
+
+export { VIVIDBadge };

package/breadcrumb-item/index.js

@@ -0,0 +1,48 @@
+import { _ as __decorate, o as observable, b as __metadata, h as html, d as designSystem } from '../shared/index2.js';
+import { s as styleInject } from '../shared/style-inject.es.js';
+import { T as TextAnchor, t as textAnchorTemplate } from '../shared/text-anchor.template.js';
+import { w as when } from '../shared/index.js';
+import { c as classNames } from '../shared/class-names.js';
+import '../shared/web.dom-collections.iterator.js';
+import '../shared/anchor.js';
+import '../shared/apply-mixins.js';
+import '../shared/aria-global.js';
+
+var css_248z = "/*\n  Do not edit directly\n  Generated on Sun, 23 Jan 2022 11:15:05 GMT\n*/\n.breadcrumb-item {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  display: flex;\n  align-items: center;\n  color: var(--vvd-color-neutral-70);\n}\n.breadcrumb-item a {\n  color: var(--vvd-color-cta-70);\n  text-decoration: none;\n}\n.breadcrumb-item a:hover {\n  text-decoration: underline;\n}\n.breadcrumb-item vwc-icon {\n  margin: 0 16px;\n  color: var(--vvd-color-on-canvas);\n}";
+styleInject(css_248z);
+
+class BreadcrumbItem extends TextAnchor {
+  constructor() {
+    super();
+    this.separator = true;
+  }
+
+}
+
+__decorate([observable, __metadata("design:type", Boolean)], BreadcrumbItem.prototype, "separator", void 0);
+
+let _2 = t => t,
+    _t,
+    _t2,
+    _t3,
+    _t4;
+
+const getClasses = _ => classNames('control', 'breadcrumb-item');
+
+const BreadcrumbItemTemplate = (context, definition) => html(_t || (_t = _2`
+      <div roll="listitem" part="listitem" class="${0}">
+        ${0}
+
+  ${0}
+
+        ${0}
+      </div>`), getClasses, when(x => x.text && !x.href, html(_t2 || (_t2 = _2`${0}`), x => x.text)), when(x => x.text && x.href && x.href.length > 0, html(_t3 || (_t3 = _2`${0}`), textAnchorTemplate())), when(x => x.separator, html(_t4 || (_t4 = _2`<vwc-icon type="chevron-right-line"></vwc-icon>`))));
+
+const vividBreadcrumbItem = BreadcrumbItem.compose({
+  baseName: 'breadcrumb-item',
+  template: BreadcrumbItemTemplate,
+  styles: css_248z
+});
+designSystem.register(vividBreadcrumbItem());
+
+export { vividBreadcrumbItem };