@vonage/vivid 3.47.0 → 3.49.0-preview.0

package/shared/definition23.cjs

@@ -0,0 +1,106 @@
+'use strict';
+
+const index = require('./index.cjs');
+const definition = require('./definition26.cjs');
+const definition$1 = require('./definition58.cjs');
+const affix = require('./affix.cjs');
+const applyMixins = require('./apply-mixins.cjs');
+const button = require('./button.cjs');
+const ref = require('./ref.cjs');
+const classNames = require('./class-names.cjs');
+
+const styles = ".control{display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);border-radius:var(--_fab-border-radius);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:not(.connotation-accent,.connotation-cta){--focus-stroke-gap-color: transparent}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size:calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control:not(.size-expanded){--_fab-border-radius: 24px;--_fab-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.icon-only{border-radius:50%;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px;padding-inline:20px}.control:disabled{--_elevation-fill: var(--vvd-color-surface-0dp);--_elevation-shadow: var(--vvd-shadow-surface-0dp);cursor:not-allowed}.control:not(:disabled){--_elevation-fill: var(--vvd-color-surface-4dp);--_elevation-shadow: var(--vvd-shadow-surface-4dp);cursor:pointer}.control:not(:disabled):hover{--_elevation-fill: var(--vvd-color-surface-12dp);--_elevation-shadow: var(--vvd-shadow-surface-12dp)}.control:not(:disabled):active{--_elevation-fill: var(--vvd-color-surface-24dp);--_elevation-shadow: var(--vvd-shadow-surface-24dp)}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/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 Fab extends button.Button {
+}
+__decorateClass([
+  index.attr
+], Fab.prototype, "connotation", 2);
+__decorateClass([
+  index.attr
+], Fab.prototype, "size", 2);
+__decorateClass([
+  index.attr
+], Fab.prototype, "label", 2);
+applyMixins.applyMixins(Fab, affix.AffixIconWithTrailing);
+
+const getClasses = ({
+  connotation,
+  size,
+  icon,
+  label,
+  iconTrailing,
+  disabled,
+  iconSlottedContent
+}) => classNames.classNames(
+  "control",
+  [`connotation-${connotation}`, Boolean(connotation)],
+  [`size-${size}`, Boolean(size)],
+  ["icon-only", !label && !!(icon || iconSlottedContent?.length)],
+  ["icon-trailing", iconTrailing],
+  ["disabled", disabled]
+);
+const FabTemplate = (context) => {
+  const affixIconTemplate = affix.affixIconTemplateFactory(context);
+  return index.html`
+        <button
+            class="${getClasses} "
+            ?autofocus="${(x) => x.autofocus}"
+            ?disabled="${(x) => x.disabled}"
+            form="${(x) => x.formId}"
+            formaction="${(x) => x.formaction}"
+            formenctype="${(x) => x.formenctype}"
+            formmethod="${(x) => x.formmethod}"
+            formnovalidate="${(x) => x.formnovalidate}"
+            formtarget="${(x) => x.formtarget}"
+            name="${(x) => x.name}"
+            type="${(x) => x.type}"
+            value="${(x) => x.value}"
+            aria-atomic="${(x) => x.ariaAtomic}"
+            aria-busy="${(x) => x.ariaBusy}"
+            aria-current="${(x) => x.ariaCurrent}"
+            aria-details="${(x) => x.ariaDetails}"
+            aria-disabled="${(x) => x.ariaDisabled}"
+            aria-expanded="${(x) => x.ariaExpanded}"
+            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-live="${(x) => x.ariaLive}"
+            aria-pressed="${(x) => x.ariaPressed}"
+            aria-relevant="${(x) => x.ariaRelevant}"
+            aria-roledescription="${(x) => x.ariaRoledescription}"
+            ${ref.ref("control")}
+        >
+					  ${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
+            ${(x) => x.label}
+        </button>
+`;
+};
+
+const fabDefinition = Fab.compose({
+  baseName: "fab",
+  template: FabTemplate,
+  styles,
+  shadowOptions: {
+    delegatesFocus: true
+  }
+});
+const fabRegistries = [fabDefinition(), ...definition.iconRegistries, ...definition$1.focusRegistries];
+const registerFab = index.registerFactory(fabRegistries);
+
+exports.fabDefinition = fabDefinition;
+exports.fabRegistries = fabRegistries;
+exports.registerFab = registerFab;