@vonage/vivid 4.13.0 → 4.14.0

package/shared/definition11.js

@@ -1,210 +1,14 @@
-import { F as FoundationElement, _ as __decorate, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition27.js';
-import { P as ProgressRing, a as progressRingRegistries } from './definition38.js';
+import { I as Icon, i as iconDefinition } from './definition27.js';
+import { P as ProgressRing, p as progressRingDefinition } from './definition37.js';
+import { a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
 import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import { V as VividFoundationButton } from './button.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { F as FormAssociated } from './form-associated.js';
-import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
-import { S as StartEnd } from './start-end.js';
 import { b as Size } from './enums.js';
-import { I as Icon } from './icon.js';
 import { w as when } from './when.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
-class _Button extends FoundationElement {
-}
-/**
- * A form-associated base class for the {@link @microsoft/fast-foundation#(Button:class)} component.
- *
- * @internal
- */
-class FormAssociatedButton extends FormAssociated(_Button) {
-    constructor() {
-        super(...arguments);
-        this.proxy = document.createElement("input");
-    }
-}
-
-/**
- * A Button Custom HTML Element.
- * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element }.
- *
- * @slot start - Content which can be provided before the button content
- * @slot end - Content which can be provided after the button content
- * @slot - The default slot for button content
- * @csspart control - The button element
- * @csspart content - The element wrapping button content
- *
- * @public
- */
-let Button$1 = class Button extends FormAssociatedButton {
-    constructor() {
-        super(...arguments);
-        /**
-         * Prevent events to propagate if disabled and has no slotted content wrapped in HTML elements
-         * @internal
-         */
-        this.handleClick = (e) => {
-            var _a;
-            if (this.disabled && ((_a = this.defaultSlottedContent) === null || _a === void 0 ? void 0 : _a.length) <= 1) {
-                e.stopPropagation();
-            }
-        };
-        /**
-         * Submits the parent form
-         */
-        this.handleSubmission = () => {
-            if (!this.form) {
-                return;
-            }
-            const attached = this.proxy.isConnected;
-            if (!attached) {
-                this.attachProxy();
-            }
-            // Browser support for requestSubmit is not comprehensive
-            // so click the proxy if it isn't supported
-            typeof this.form.requestSubmit === "function"
-                ? this.form.requestSubmit(this.proxy)
-                : this.proxy.click();
-            if (!attached) {
-                this.detachProxy();
-            }
-        };
-        /**
-         * Resets the parent form
-         */
-        this.handleFormReset = () => {
-            var _a;
-            (_a = this.form) === null || _a === void 0 ? void 0 : _a.reset();
-        };
-        /**
-         * Overrides the focus call for where delegatesFocus is unsupported.
-         * This check works for Chrome, Edge Chromium, FireFox, and Safari
-         * Relevant PR on the Firefox browser: https://phabricator.services.mozilla.com/D123858
-         */
-        this.handleUnsupportedDelegatesFocus = () => {
-            var _a;
-            // Check to see if delegatesFocus is supported
-            if (window.ShadowRoot &&
-                !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") &&
-                ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
-                this.focus = () => {
-                    this.control.focus();
-                };
-            }
-        };
-    }
-    formactionChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.formAction = this.formaction;
-        }
-    }
-    formenctypeChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.formEnctype = this.formenctype;
-        }
-    }
-    formmethodChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.formMethod = this.formmethod;
-        }
-    }
-    formnovalidateChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.formNoValidate = this.formnovalidate;
-        }
-    }
-    formtargetChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.formTarget = this.formtarget;
-        }
-    }
-    typeChanged(previous, next) {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.type = this.type;
-        }
-        next === "submit" && this.addEventListener("click", this.handleSubmission);
-        previous === "submit" && this.removeEventListener("click", this.handleSubmission);
-        next === "reset" && this.addEventListener("click", this.handleFormReset);
-        previous === "reset" && this.removeEventListener("click", this.handleFormReset);
-    }
-    /** {@inheritDoc (FormAssociated:interface).validate} */
-    validate() {
-        super.validate(this.control);
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        var _a;
-        super.connectedCallback();
-        this.proxy.setAttribute("type", this.type);
-        this.handleUnsupportedDelegatesFocus();
-        const elements = Array.from((_a = this.control) === null || _a === void 0 ? void 0 : _a.children);
-        if (elements) {
-            elements.forEach((span) => {
-                span.addEventListener("click", this.handleClick);
-            });
-        }
-    }
-    /**
-     * @internal
-     */
-    disconnectedCallback() {
-        var _a;
-        super.disconnectedCallback();
-        const elements = Array.from((_a = this.control) === null || _a === void 0 ? void 0 : _a.children);
-        if (elements) {
-            elements.forEach((span) => {
-                span.removeEventListener("click", this.handleClick);
-            });
-        }
-    }
-};
-__decorate([
-    attr({ mode: "boolean" })
-], Button$1.prototype, "autofocus", void 0);
-__decorate([
-    attr({ attribute: "form" })
-], Button$1.prototype, "formId", void 0);
-__decorate([
-    attr
-], Button$1.prototype, "formaction", void 0);
-__decorate([
-    attr
-], Button$1.prototype, "formenctype", void 0);
-__decorate([
-    attr
-], Button$1.prototype, "formmethod", void 0);
-__decorate([
-    attr({ mode: "boolean" })
-], Button$1.prototype, "formnovalidate", void 0);
-__decorate([
-    attr
-], Button$1.prototype, "formtarget", void 0);
-__decorate([
-    attr
-], Button$1.prototype, "type", void 0);
-__decorate([
-    observable
-], Button$1.prototype, "defaultSlottedContent", void 0);
-/**
- * Includes ARIA states and properties relating to the ARIA button role
- *
- * @public
- */
-class DelegatesARIAButton {
-}
-__decorate([
-    attr({ attribute: "aria-expanded" })
-], DelegatesARIAButton.prototype, "ariaExpanded", void 0);
-__decorate([
-    attr({ attribute: "aria-pressed" })
-], DelegatesARIAButton.prototype, "ariaPressed", void 0);
-applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
-applyMixins(Button$1, StartEnd, DelegatesARIAButton);
-
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0 ;
@@ -214,7 +18,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Button extends Button$1 {
+class Button extends VividFoundationButton {
   constructor() {
     super();
     this.stacked = false;
@@ -318,7 +122,8 @@ const getClasses = ({
   size,
   iconSlottedContent,
   ariaExpanded,
-  active
+  active,
+  dropdownIndicator
 }) => classNames(
   "control",
   [`connotation-${connotation}`, Boolean(connotation)],
@@ -328,7 +133,10 @@ const getClasses = ({
   ],
   [`shape-${shape}`, Boolean(shape)],
   [`size-${size}`, Boolean(size)],
-  ["icon-only", !label && !!(icon || iconSlottedContent?.length)],
+  [
+    "icon-only",
+    !label && !!(icon || iconSlottedContent?.length) && !dropdownIndicator
+  ],
   ["icon-trailing", iconTrailing],
   ["stacked", Boolean(stacked)],
   ["active", ariaExpanded === "true" || active]
@@ -431,20 +239,18 @@ const buttonTemplate = (context) => {
 	</template>`;
 };
 
-const buttonDefinition = Button.compose({
-  baseName: "button",
-  baseClass: Button$1,
-  template: buttonTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
+const buttonDefinition = defineVividComponent(
+  "button",
+  Button,
+  buttonTemplate,
+  [iconDefinition, progressRingDefinition],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
   }
-});
-const buttonRegistries = [
-  buttonDefinition(),
-  ...iconRegistries,
-  ...progressRingRegistries
-];
-const registerButton = registerFactory(buttonRegistries);
+);
+const registerButton = createRegisterFunction(buttonDefinition);
 
-export { Button$1 as B, buttonRegistries as a, buttonDefinition as b, Button as c, chevronTemplateFactory as d, registerButton as r };
+export { Button as B, buttonDefinition as b, chevronTemplateFactory as c, registerButton as r };

package/shared/definition12.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index.cjs');
+const defineVividComponent = require('./defineVividComponent.cjs');
 const calendarEvent = require('./calendar-event.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
@@ -22,27 +22,31 @@ const getStyles = ({ start, duration, overlapCount }) => {
   };
   return Object.entries(stylesObj).map((entry) => entry.join(":")).join(";");
 };
-const CalendarEventTemplate = () => index.html` <div
+const CalendarEventTemplate = defineVividComponent.html` <div
 	style="${getStyles}"
 	class="${getClasses}"
 	role="button"
 	tabindex="0"
 >
-	${when.when((x) => x.heading, index.html`<h2><strong>${(x) => x.heading}</strong></h2>`)}
-	${when.when((x) => x.description, index.html`<p>${(x) => x.description}</p>`)}
+	${when.when((x) => x.heading, defineVividComponent.html`<h2><strong>${(x) => x.heading}</strong></h2>`)}
+	${when.when((x) => x.description, defineVividComponent.html`<p>${(x) => x.description}</p>`)}
 </div>`;
 
-const calendarEventDefinition = calendarEvent.CalendarEvent.compose({
-  baseName: "calendar-event",
-  template: CalendarEventTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
+const calendarEventDefinition = defineVividComponent.defineVividComponent(
+  "calendar-event",
+  calendarEvent.CalendarEvent,
+  CalendarEventTemplate,
+  [],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
   }
-});
-const calendarEventRegistries = [calendarEventDefinition()];
-const registerCalendarEvent = index.registerFactory(calendarEventRegistries);
+);
+const registerCalendarEvent = defineVividComponent.createRegisterFunction(
+  calendarEventDefinition
+);
 
 exports.calendarEventDefinition = calendarEventDefinition;
-exports.calendarEventRegistries = calendarEventRegistries;
 exports.registerCalendarEvent = registerCalendarEvent;

package/shared/definition12.js

@@ -1,4 +1,4 @@
-import { h as html, r as registerFactory } from './index.js';
+import { h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
 import { C as CalendarEvent } from './calendar-event.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
@@ -20,7 +20,7 @@ const getStyles = ({ start, duration, overlapCount }) => {
   };
   return Object.entries(stylesObj).map((entry) => entry.join(":")).join(";");
 };
-const CalendarEventTemplate = () => html` <div
+const CalendarEventTemplate = html` <div
 	style="${getStyles}"
 	class="${getClasses}"
 	role="button"
@@ -30,15 +30,20 @@ const CalendarEventTemplate = () => html` <div
 	${when((x) => x.description, html`<p>${(x) => x.description}</p>`)}
 </div>`;
 
-const calendarEventDefinition = CalendarEvent.compose({
-  baseName: "calendar-event",
-  template: CalendarEventTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
+const calendarEventDefinition = defineVividComponent(
+  "calendar-event",
+  CalendarEvent,
+  CalendarEventTemplate,
+  [],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
   }
-});
-const calendarEventRegistries = [calendarEventDefinition()];
-const registerCalendarEvent = registerFactory(calendarEventRegistries);
+);
+const registerCalendarEvent = createRegisterFunction(
+  calendarEventDefinition
+);
 
-export { calendarEventRegistries as a, calendarEventDefinition as c, registerCalendarEvent as r };
+export { calendarEventDefinition as c, registerCalendarEvent as r };

package/shared/definition13.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
-const index = require('./index.cjs');
+const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const calendarEvent = require('./calendar-event.cjs');
 const _has = require('./_has.cjs');
 const repeat = require('./repeat.cjs');
@@ -599,7 +600,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Calendar extends index.FoundationElement {
+class Calendar extends vividElement.VividElement {
   constructor() {
     super(...arguments);
     this.hour12 = false;
@@ -686,16 +687,16 @@ class Calendar extends index.FoundationElement {
   }
 }
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], Calendar.prototype, "datetime");
 __decorateClass([
-  index.attr({ attribute: "start-day" })
+  defineVividComponent.attr({ attribute: "start-day" })
 ], Calendar.prototype, "startDay");
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], Calendar.prototype, "locales");
 __decorateClass([
-  index.attr({ mode: "boolean" })
+  defineVividComponent.attr({ mode: "boolean" })
 ], Calendar.prototype, "hour12");
 
 function getValidDateString(date) {
@@ -717,10 +718,10 @@ function getFirstDateOfTheWeek(date = /* @__PURE__ */ new Date(), startDay) {
 }
 
 const HoursTemplate = () => {
-  return index.html` <div class="row-headers" role="row">
+  return defineVividComponent.html` <div class="row-headers" role="row">
 		${repeat.repeat(
     (x) => x.hoursAsDatetime,
-    index.html`<span role="rowheader">
+    defineVividComponent.html`<span role="rowheader">
 				<time
 					datetime="${(x, c) => new Intl.DateTimeFormat(c.parent.locales, {
       hour: "numeric",
@@ -738,10 +739,10 @@ const HoursTemplate = () => {
 	</div>`;
 };
 const DaysTemplate = () => {
-  return index.html` <div class="column-headers" role="row">
+  return defineVividComponent.html` <div class="column-headers" role="row">
 		${repeat.repeat(
     (x) => x._generateDaysArr([getFirstDateOfTheWeek(x.datetime, x.startDay)]),
-    index.html` <div role="columnheader" tabindex="-1">
+    defineVividComponent.html` <div role="columnheader" tabindex="-1">
 				<time datetime=${(x) => getValidDateString(x)}>
 					<h2>
 						<!-- TODO add to column aria-labelledby or describedby to count
@@ -770,12 +771,12 @@ const DaysTemplate = () => {
   )}
 	</div>`;
 };
-const ColumnTemplate = index.html`
+const ColumnTemplate = defineVividComponent.html`
 	<div role="gridcell" tabindex="-1">
 		<slot name="day-${(_, c) => c.index}"></slot>
 	</div>
 `;
-const CalendarTemplate = () => index.html`
+const CalendarTemplate = defineVividComponent.html`
 	<div role="grid" @keydown=${(x, c) => x.onKeydown(c.event)}>
 		${DaysTemplate}
 		<div class="calendar-row" role="rowgroup">
@@ -784,7 +785,7 @@ const CalendarTemplate = () => index.html`
 				<div class="hours" role="list">
 					${repeat.repeat(
   (x) => Array.from({ length: x.hoursAsDatetime.length + 1 }),
-  index.html` <div role="listitem"></div>`
+  defineVividComponent.html` <div role="listitem"></div>`
 )}
 				</div>
 				<div class="columns" role="row">
@@ -798,19 +799,19 @@ const CalendarTemplate = () => index.html`
 	</div>
 `;
 
-const calendarDefinition = Calendar.compose(
+const calendarDefinition = defineVividComponent.defineVividComponent(
+  "calendar",
+  Calendar,
+  CalendarTemplate,
+  [],
   {
-    baseName: "calendar",
-    template: CalendarTemplate,
     styles,
     shadowOptions: {
       delegatesFocus: true
     }
   }
 );
-const calendarRegistries = [calendarDefinition()];
-const registerCalendar = index.registerFactory(calendarRegistries);
+const registerCalendar = defineVividComponent.createRegisterFunction(calendarDefinition);
 
 exports.calendarDefinition = calendarDefinition;
-exports.calendarRegistries = calendarRegistries;
 exports.registerCalendar = registerCalendar;

package/shared/definition13.js

@@ -1,4 +1,5 @@
-import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
+import { a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { V as VividElement } from './vivid-element.js';
 import { C as CalendarEvent } from './calendar-event.js';
 import { b as _has, _ as _curry1, a as _curry2 } from './_has.js';
 import { r as repeat } from './repeat.js';
@@ -597,7 +598,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Calendar extends FoundationElement {
+class Calendar extends VividElement {
   constructor() {
     super(...arguments);
     this.hour12 = false;
@@ -773,7 +774,7 @@ const ColumnTemplate = html`
 		<slot name="day-${(_, c) => c.index}"></slot>
 	</div>
 `;
-const CalendarTemplate = () => html`
+const CalendarTemplate = html`
 	<div role="grid" @keydown=${(x, c) => x.onKeydown(c.event)}>
 		${DaysTemplate}
 		<div class="calendar-row" role="rowgroup">
@@ -796,17 +797,18 @@ const CalendarTemplate = () => html`
 	</div>
 `;
 
-const calendarDefinition = Calendar.compose(
+const calendarDefinition = defineVividComponent(
+  "calendar",
+  Calendar,
+  CalendarTemplate,
+  [],
   {
-    baseName: "calendar",
-    template: CalendarTemplate,
     styles,
     shadowOptions: {
       delegatesFocus: true
     }
   }
 );
-const calendarRegistries = [calendarDefinition()];
-const registerCalendar = registerFactory(calendarRegistries);
+const registerCalendar = createRegisterFunction(calendarDefinition);
 
-export { calendarRegistries as a, calendarDefinition as c, registerCalendar as r };
+export { calendarDefinition as c, registerCalendar as r };