@vonage/vivid 4.12.1 → 4.14.0

package/shared/key-codes.cjs

@@ -9,8 +9,13 @@ const keyArrowRight = "ArrowRight";
 const keyArrowUp = "ArrowUp";
 const keyEnd = "End";
 const keyEnter = "Enter";
+const keyEscape = "Escape";
 const keyHome = "Home";
+const keyFunction2 = "F2";
+const keyPageDown = "PageDown";
+const keyPageUp = "PageUp";
 const keySpace = " ";
+const keyTab = "Tab";
 
 exports.keyArrowDown = keyArrowDown;
 exports.keyArrowLeft = keyArrowLeft;
@@ -18,5 +23,10 @@ exports.keyArrowRight = keyArrowRight;
 exports.keyArrowUp = keyArrowUp;
 exports.keyEnd = keyEnd;
 exports.keyEnter = keyEnter;
+exports.keyEscape = keyEscape;
+exports.keyFunction2 = keyFunction2;
 exports.keyHome = keyHome;
+exports.keyPageDown = keyPageDown;
+exports.keyPageUp = keyPageUp;
 exports.keySpace = keySpace;
+exports.keyTab = keyTab;

package/shared/key-codes.js

@@ -7,7 +7,12 @@ const keyArrowRight = "ArrowRight";
 const keyArrowUp = "ArrowUp";
 const keyEnd = "End";
 const keyEnter = "Enter";
+const keyEscape = "Escape";
 const keyHome = "Home";
+const keyFunction2 = "F2";
+const keyPageDown = "PageDown";
+const keyPageUp = "PageUp";
 const keySpace = " ";
+const keyTab = "Tab";
 
-export { keyEnd as a, keyHome as b, keyArrowDown as c, keyArrowUp as d, keyArrowLeft as e, keyArrowRight as f, keyEnter as g, keySpace as k };
+export { keySpace as a, keyEscape as b, keyTab as c, keyEnd as d, keyArrowUp as e, keyArrowDown as f, keyHome as g, keyArrowLeft as h, keyArrowRight as i, keyPageDown as j, keyEnter as k, keyPageUp as l, keyFunction2 as m };

package/shared/key-codes2.cjs

@@ -1,5 +1,54 @@
 'use strict';
 
+const defineVividComponent = require('./defineVividComponent.cjs');
+const ref = require('./ref.cjs');
+
+/**
+ * A mixin class implementing start and end elements.
+ * These are generally used to decorate text elements with icons or other visual indicators.
+ * @public
+ */
+class StartEnd {
+    handleStartContentChange() {
+        this.startContainer.classList.toggle("start", this.start.assignedNodes().length > 0);
+    }
+    handleEndContentChange() {
+        this.endContainer.classList.toggle("end", this.end.assignedNodes().length > 0);
+    }
+}
+/**
+ * The template for the end element.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ * @deprecated - use endSlotTemplate
+ */
+defineVividComponent.html `
+    <span part="end" ${ref.ref("endContainer")}>
+        <slot
+            name="end"
+            ${ref.ref("end")}
+            @slotchange="${x => x.handleEndContentChange()}"
+        ></slot>
+    </span>
+`;
+/**
+ * The template for the start element.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ * @deprecated - use startSlotTemplate
+ */
+defineVividComponent.html `
+    <span part="start" ${ref.ref("startContainer")}>
+        <slot
+            name="start"
+            ${ref.ref("start")}
+            @slotchange="${x => x.handleStartContentChange()}"
+        ></slot>
+    </span>
+`;
+
 /**
  * Key Code values
  * @deprecated - KeyCodes are deprecated, use individual string key exports
@@ -87,12 +136,10 @@ const keyEnter = "Enter";
 const keyEscape = "Escape";
 const keyHome = "Home";
 const keyEnd = "End";
-const keyFunction2 = "F2";
-const keyPageDown = "PageDown";
-const keyPageUp = "PageUp";
 const keySpace = " ";
 const keyTab = "Tab";
 
+exports.StartEnd = StartEnd;
 exports.keyArrowDown = keyArrowDown;
 exports.keyArrowLeft = keyArrowLeft;
 exports.keyArrowRight = keyArrowRight;
@@ -100,9 +147,6 @@ exports.keyArrowUp = keyArrowUp;
 exports.keyEnd = keyEnd;
 exports.keyEnter = keyEnter;
 exports.keyEscape = keyEscape;
-exports.keyFunction2 = keyFunction2;
 exports.keyHome = keyHome;
-exports.keyPageDown = keyPageDown;
-exports.keyPageUp = keyPageUp;
 exports.keySpace = keySpace;
 exports.keyTab = keyTab;

package/shared/key-codes2.js

@@ -1,3 +1,52 @@
+import { h as html } from './defineVividComponent.js';
+import { r as ref } from './ref.js';
+
+/**
+ * A mixin class implementing start and end elements.
+ * These are generally used to decorate text elements with icons or other visual indicators.
+ * @public
+ */
+class StartEnd {
+    handleStartContentChange() {
+        this.startContainer.classList.toggle("start", this.start.assignedNodes().length > 0);
+    }
+    handleEndContentChange() {
+        this.endContainer.classList.toggle("end", this.end.assignedNodes().length > 0);
+    }
+}
+/**
+ * The template for the end element.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ * @deprecated - use endSlotTemplate
+ */
+html `
+    <span part="end" ${ref("endContainer")}>
+        <slot
+            name="end"
+            ${ref("end")}
+            @slotchange="${x => x.handleEndContentChange()}"
+        ></slot>
+    </span>
+`;
+/**
+ * The template for the start element.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ * @deprecated - use startSlotTemplate
+ */
+html `
+    <span part="start" ${ref("startContainer")}>
+        <slot
+            name="start"
+            ${ref("start")}
+            @slotchange="${x => x.handleStartContentChange()}"
+        ></slot>
+    </span>
+`;
+
 /**
  * Key Code values
  * @deprecated - KeyCodes are deprecated, use individual string key exports
@@ -85,10 +134,7 @@ const keyEnter = "Enter";
 const keyEscape = "Escape";
 const keyHome = "Home";
 const keyEnd = "End";
-const keyFunction2 = "F2";
-const keyPageDown = "PageDown";
-const keyPageUp = "PageUp";
 const keySpace = " ";
 const keyTab = "Tab";
 
-export { keySpace as a, keyEscape as b, keyTab as c, keyEnd as d, keyArrowUp as e, keyArrowDown as f, keyHome as g, keyArrowRight as h, keyArrowLeft as i, keyPageDown as j, keyEnter as k, keyPageUp as l, keyFunction2 as m };
+export { StartEnd as S, keyArrowRight as a, keyArrowLeft as b, keyArrowDown as c, keyArrowUp as d, keyEnd as e, keyHome as f, keySpace as g, keyEscape as h, keyTab as i, keyEnter as k };