@vonage/vivid 3.48.0 → 3.49.0-preview.1

package/shared/definition25.cjs

@@ -0,0 +1,75 @@
+'use strict';
+
+const index = require('./index.cjs');
+const definition = require('./definition59.cjs');
+const classNames = require('./class-names.cjs');
+
+const styles = ".base{z-index:1;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{display:inline-flex;align-items:center;column-gap:4px}.container{display:flex;box-sizing:border-box;justify-content:space-between;background-color:var(--header-bg-color, var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);column-gap:12px;padding-block:8px;padding-inline:16px}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) + 1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}\n";
+
+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;
+};
+class Header extends index.FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.elevationShadow = false;
+    this.alternate = false;
+  }
+}
+__decorateClass([
+  index.attr({
+    attribute: "elevation-shadow",
+    mode: "boolean"
+  })
+], Header.prototype, "elevationShadow", 2);
+__decorateClass([
+  index.attr({
+    mode: "boolean"
+  })
+], Header.prototype, "alternate", 2);
+
+const getPartAlternate = ({ alternate }) => classNames.classNames(
+  ["vvd-theme-alternate", Boolean(alternate)]
+);
+const headerTemplate = (context) => {
+  const elevationTag = context.tagFor(definition.Elevation);
+  return index.html`
+    <${elevationTag} dp="4" ?no-shadow=${(x) => !x.elevationShadow}>
+      <header class="base" part="base">
+        <!-- a container is needed to distinguish the surface background color of the
+        element from its shadow when applying elevation with alternate -->
+        <div class="container" part="${getPartAlternate}">
+          <section class="header-content">
+            <slot></slot>
+          </section>
+          <section class="header-content">
+            <slot name="action-items"></slot>
+          </section>
+        </div>
+      </header>
+    </${elevationTag}>
+    <div class="app-content">
+      <slot name="app-content"></slot>
+    </div>
+	`;
+};
+
+const headerDefinition = Header.compose({
+  baseName: "header",
+  template: headerTemplate,
+  styles
+});
+const headerRegistries = [headerDefinition(), ...definition.elevationRegistries];
+const registerHeader = index.registerFactory(headerRegistries);
+
+exports.headerDefinition = headerDefinition;
+exports.headerRegistries = headerRegistries;
+exports.registerHeader = registerHeader;

package/shared/definition26.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+const index = require('./index.cjs');
+const icon = require('./icon.cjs');
+const classNames = require('./class-names.cjs');
+const when = require('./when.cjs');
+
+const styles = ":host{display:inline-block;vertical-align:sub}.control{display:flex;margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size)}.control.connotation-accent{--_connotation-color-primary: var(--vvd-icon-accent-primary, var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-icon-announcement-primary, var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-icon-cta-primary, var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary: var(--vvd-icon-success-primary, var(--vvd-color-success-500))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-icon-alert-primary, var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary: var(--vvd-icon-information-primary, var(--vvd-color-information-500))}.control.size--6{--_icon-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.size--5{--_icon-block-size:calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size--4{--_icon-block-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size--3{--_icon-block-size:calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size--2{--_icon-block-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size--1{--_icon-block-size:calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-0{--_icon-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-1{--_icon-block-size:calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-2{--_icon-block-size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-3{--_icon-block-size:calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-4{--_icon-block-size:calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-5{--_icon-block-size:calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.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){--_icon-block-size: 1em}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){margin:auto;block-size:inherit;inline-size:inherit}\n";
+
+const getClasses = ({
+  connotation,
+  size
+}) => classNames.classNames(
+  "control",
+  [`connotation-${connotation}`, Boolean(connotation)],
+  [`size-${size}`, Boolean(size)]
+);
+const iconTemplate = () => index.html`
+
+	<figure class="${getClasses}">
+		<slot>
+			${when.when((x) => !x.iconLoaded, index.html`<img alt="${(x) => x.name}" src="${(x) => x.iconUrl}"/>`)}
+			${when.when((x) => x.iconLoaded && x._svg, (x) => index.html`${x._svg}`)}
+		</slot>
+	</figure>
+
+`;
+
+const iconDefinition = icon.Icon.compose({
+  baseName: "icon",
+  template: iconTemplate,
+  styles
+});
+const iconRegistries = [iconDefinition()];
+const registerIcon = index.registerFactory(iconRegistries);
+
+exports.iconDefinition = iconDefinition;
+exports.iconRegistries = iconRegistries;
+exports.registerIcon = registerIcon;

package/shared/definition27.cjs

@@ -0,0 +1,66 @@
+'use strict';
+
+const index = require('./index.cjs');
+const classNames = require('./class-names.cjs');
+
+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;
+};
+class Layout extends index.FoundationElement {
+}
+__decorateClass([
+  index.attr
+], Layout.prototype, "gutters", 2);
+__decorateClass([
+  index.attr({ attribute: "column-basis" })
+], Layout.prototype, "columnBasis", 2);
+__decorateClass([
+  index.attr({ attribute: "column-spacing" })
+], Layout.prototype, "columnSpacing", 2);
+__decorateClass([
+  index.attr({ attribute: "row-spacing" })
+], Layout.prototype, "rowSpacing", 2);
+__decorateClass([
+  index.attr({ attribute: "auto-sizing" })
+], Layout.prototype, "autoSizing", 2);
+
+const styles = ".control{display:grid;grid-auto-rows:var(--layout-grid-template-rows, min-content)}.control.column-basis-small{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(160px, 1fr)))}.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block),.control.column-basis-medium{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(320px, 1fr)))}.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(380px, 1fr)))}.control.column-basis-block{grid-template-columns:var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(1fr, 1fr)))}.control.column-spacing-small{column-gap:var(--layout-column-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))))}.control.column-spacing-small-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))))}.control.column-spacing-small-block{column-gap:var(--layout-column-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) 0)}.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{column-gap:var(--layout-column-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.column-spacing-medium-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.column-spacing-medium-block{column-gap:var(--layout-column-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.column-spacing-large{column-gap:var(--layout-column-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.column-spacing-large-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.column-spacing-large-block{column-gap:var(--layout-column-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.row-spacing-small{row-gap:var(--layout-row-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))))}.control.row-spacing-small-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))))}.control.row-spacing-small-block{row-gap:var(--layout-row-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) 0)}.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{row-gap:var(--layout-row-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.row-spacing-medium-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.row-spacing-medium-block{row-gap:var(--layout-row-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.row-spacing-large{row-gap:var(--layout-row-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.row-spacing-large-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.row-spacing-large-block{row-gap:var(--layout-row-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.gutters-small{margin:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.control.gutters-small-inline{margin:0 calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.control.gutters-small-block{margin:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))) 0}.control.gutters-medium{margin:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-medium-inline{margin:0 calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-medium-block{margin:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) 0}.control.gutters-large{margin:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-large-inline{margin:0 calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-large-block{margin:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))) 0}.control.auto-sizing-fill{--_auto-sizing: auto-fill}.control:not(.auto-sizing-fill):not(.auto-sizing-fit),.control.auto-sizing-fit{--_auto-sizing: auto-fit}\n";
+
+const getClasses = ({
+  columnBasis,
+  gutters,
+  columnSpacing,
+  autoSizing,
+  rowSpacing
+}) => classNames.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 = () => index.html`
+        <div class="${getClasses}">
+			<slot></slot>
+		</div>`;
+
+const layoutDefinition = Layout.compose({
+  baseName: "layout",
+  template: layoutTemplate,
+  styles
+});
+const layoutRegistries = [layoutDefinition()];
+const registerLayout = index.registerFactory(layoutRegistries);
+
+exports.layoutDefinition = layoutDefinition;
+exports.layoutRegistries = layoutRegistries;
+exports.registerLayout = registerLayout;