@vonage/vivid 4.3.0 → 4.4.0

package/custom-elements.json

@@ -4364,7 +4364,9 @@
               {
                 "name": "modelValue",
                 "attributeName": "checked",
-                "eventName": "change",
+                "eventNames": [
+                  "change"
+                ],
                 "valueMapping": "(event.target as HTMLInputElement).checked"
               }
             ]
@@ -4521,7 +4523,9 @@
               {
                 "name": "modelValue",
                 "attributeName": "value",
-                "eventName": "change",
+                "eventNames": [
+                  "change"
+                ],
                 "valueMapping": "(event.target as HTMLInputElement).value"
               }
             ]
@@ -5598,7 +5602,9 @@
               {
                 "name": "modelValue",
                 "attributeName": "value",
-                "eventName": "input",
+                "eventNames": [
+                  "input"
+                ],
                 "valueMapping": "(event.target as HTMLInputElement).value"
               }
             ]
@@ -6156,13 +6162,17 @@
               {
                 "name": "start",
                 "attributeName": "start",
-                "eventName": "input:start",
+                "eventNames": [
+                  "input:start"
+                ],
                 "valueMapping": "(event.target as any).start"
               },
               {
                 "name": "end",
                 "attributeName": "end",
-                "eventName": "input:end",
+                "eventNames": [
+                  "input:end"
+                ],
                 "valueMapping": "(event.target as any).end"
               }
             ]
@@ -6583,7 +6593,9 @@
               {
                 "name": "modelValue",
                 "attributeName": "value",
-                "eventName": "input",
+                "eventNames": [
+                  "input"
+                ],
                 "valueMapping": "(event.target as any).value"
               }
             ]
@@ -6749,12 +6761,12 @@
             },
             {
               "kind": "field",
-              "name": "#modal",
-              "privacy": "private",
+              "name": "modal",
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Controls whether the dialog is modal."
             },
             {
               "kind": "field",
@@ -6793,26 +6805,29 @@
             },
             {
               "kind": "method",
-              "name": "#handleModal",
-              "parameters": [
-                {
-                  "name": "show",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ]
+              "name": "show"
             },
             {
               "kind": "method",
-              "name": "show"
+              "name": "showModal"
             },
             {
               "kind": "method",
-              "name": "showModal"
+              "name": "#closeDialog"
+            },
+            {
+              "kind": "method",
+              "name": "#showDialog"
             }
           ],
           "events": [
+            {
+              "type": {
+                "text": "CustomEvent<undefined>"
+              },
+              "description": "The `open` event fires when the dialog opens.",
+              "name": "open"
+            },
             {
               "type": {
                 "text": "CustomEvent<string>"
@@ -6889,6 +6904,14 @@
               },
               "default": "false",
               "fieldName": "noLightDismiss"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the dialog is modal.",
+              "fieldName": "modal"
             }
           ],
           "superclass": {
@@ -6897,7 +6920,18 @@
           },
           "vividComponent": {
             "public": true,
-            "name": "dialog"
+            "name": "dialog",
+            "vueModels": [
+              {
+                "name": "open",
+                "attributeName": "open",
+                "eventNames": [
+                  "open",
+                  "close"
+                ],
+                "valueMapping": "(event.target as any).open"
+              }
+            ]
           }
         }
       ],
@@ -7102,6 +7136,22 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "EmptyStateConnotation",
+          "declaration": {
+            "name": "EmptyStateConnotation",
+            "module": "./empty-state"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "EmptyStateIconDecoration",
+          "declaration": {
+            "name": "EmptyStateIconDecoration",
+            "module": "./empty-state"
+          }
+        },
         {
           "kind": "js",
           "name": "emptyStateDefinition",
@@ -7128,6 +7178,92 @@
           "kind": "class",
           "description": "An empty state element. Used when there is no data to display to the user.",
           "name": "EmptyState",
+          "cssProperties": [
+            {
+              "name": "--vvd-empty-state-cta-firm-all",
+              "default": "var(--vvd-color-cta-600)"
+            },
+            {
+              "name": "--vvd-empty-state-cta-dim",
+              "default": "var(--vvd-color-cta-200)"
+            },
+            {
+              "name": "--vvd-empty-state-cta-faint",
+              "default": "var(--vvd-color-cta-50)"
+            },
+            {
+              "name": "--vvd-empty-state-success-firm-all",
+              "default": "var(--vvd-color-success-600)"
+            },
+            {
+              "name": "--vvd-empty-state-success-dim",
+              "default": "var(--vvd-color-success-200)"
+            },
+            {
+              "name": "--vvd-empty-state-success-faint",
+              "default": "var(--vvd-color-success-50)"
+            },
+            {
+              "name": "--vvd-empty-state-alert-firm-all",
+              "default": "var(--vvd-color-alert-600)"
+            },
+            {
+              "name": "--vvd-empty-state-alert-dim",
+              "default": "var(--vvd-color-alert-200)"
+            },
+            {
+              "name": "--vvd-empty-state-alert-faint",
+              "default": "var(--vvd-color-alert-50)"
+            },
+            {
+              "name": "--vvd-empty-state-warning-firm-all",
+              "default": "var(--vvd-color-warning-600)"
+            },
+            {
+              "name": "--vvd-empty-state-warning-dim",
+              "default": "var(--vvd-color-warning-200)"
+            },
+            {
+              "name": "--vvd-empty-state-warning-faint",
+              "default": "var(--vvd-color-warning-50)"
+            },
+            {
+              "name": "--vvd-empty-state-information-firm-all",
+              "default": "var(--vvd-color-information-600)"
+            },
+            {
+              "name": "--vvd-empty-state-information-dim",
+              "default": "var(--vvd-color-information-200)"
+            },
+            {
+              "name": "--vvd-empty-state-information-faint",
+              "default": "var(--vvd-color-information-50)"
+            },
+            {
+              "name": "--vvd-empty-state-announcement-firm-all",
+              "default": "var(--vvd-color-announcement-600)"
+            },
+            {
+              "name": "--vvd-empty-state-announcement-dim",
+              "default": "var(--vvd-color-announcement-200)"
+            },
+            {
+              "name": "--vvd-empty-state-announcement-faint",
+              "default": "var(--vvd-color-announcement-50)"
+            },
+            {
+              "name": "--vvd-empty-state-accent-firm-all",
+              "default": "var(--vvd-color-neutral-600)"
+            },
+            {
+              "name": "--vvd-empty-state-accent-dim",
+              "default": "var(--vvd-color-neutral-200)"
+            },
+            {
+              "name": "--vvd-empty-state-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            }
+          ],
           "slots": [
             {
               "description": "The default slot controls the body text of the empty state",
@@ -7143,6 +7279,15 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "connotation",
+              "type": {
+                "text": "EmptyStateConnotation | undefined"
+              },
+              "description": "The connotation the empty state should have.",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "headline",
@@ -7160,9 +7305,26 @@
               },
               "description": "Icon for the empty state.",
               "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "iconDecoration",
+              "type": {
+                "text": "EmptyStateIconDecoration | undefined"
+              },
+              "description": "option to a new design for the icon circle",
+              "privacy": "public"
             }
           ],
           "attributes": [
+            {
+              "name": "connotation",
+              "type": {
+                "text": "EmptyStateConnotation | undefined"
+              },
+              "description": "The connotation the empty state should have.",
+              "fieldName": "connotation"
+            },
             {
               "name": "headline",
               "type": {
@@ -7178,6 +7340,14 @@
               },
               "description": "Icon for the empty state.",
               "fieldName": "icon"
+            },
+            {
+              "name": "icon-decoration",
+              "type": {
+                "text": "EmptyStateIconDecoration | undefined"
+              },
+              "description": "option to a new design for the icon circle",
+              "fieldName": "iconDecoration"
             }
           ],
           "superclass": {
@@ -9148,7 +9318,9 @@
               {
                 "name": "modelValue",
                 "attributeName": "checked",
-                "eventName": "change",
+                "eventNames": [
+                  "change"
+                ],
                 "valueMapping": "(event.target as HTMLInputElement).checked"
               }
             ]
@@ -10493,7 +10665,9 @@
               {
                 "name": "modelValue",
                 "attributeName": "value",
-                "eventName": "input",
+                "eventNames": [
+                  "input"
+                ],
                 "valueMapping": "(event.target as HTMLInputElement).value"
               }
             ]
@@ -10982,8 +11156,26 @@
     {
       "kind": "javascript-module",
       "path": "libs/components/src/lib/popup/popup.ts",
-      "declarations": [],
-      "exports": []
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "PlacementStrategy",
+          "type": {
+            "text": "{\n\tFlip: 'flip',\n\tAutoPlacementHorizontal: 'auto-placement-horizontal',\n\tAutoPlacementVertical: 'auto-placement-vertical',\n}"
+          },
+          "default": "{\n\tFlip: 'flip',\n\tAutoPlacementHorizontal: 'auto-placement-horizontal',\n\tAutoPlacementVertical: 'auto-placement-vertical',\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "PlacementStrategy",
+          "declaration": {
+            "name": "PlacementStrategy",
+            "module": "libs/components/src/lib/popup/popup.ts"
+          }
+        }
+      ]
     },
     {
       "kind": "javascript-module",
@@ -11596,7 +11788,9 @@
               {
                 "name": "modelValue",
                 "attributeName": "value",
-                "eventName": "change",
+                "eventNames": [
+                  "change"
+                ],
                 "valueMapping": "(event.target as HTMLInputElement).value"
               }
             ]
@@ -11901,6 +12095,16 @@
               "description": "The connotation of the component",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "pin",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Show current values on the thumbs.",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "valueTextFormatter",
@@ -11931,13 +12135,38 @@
               "readonly": true
             },
             {
-              "kind": "field",
-              "name": "#draggingThumb",
-              "privacy": "private",
-              "type": {
-                "text": "false | 'start' | 'end'"
+              "kind": "method",
+              "name": "#getThumbId",
+              "return": {
+                "type": {
+                  "text": "ThumbId"
+                }
               },
-              "default": "false"
+              "parameters": [
+                {
+                  "name": "thumb",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#getThumbIdFromEvent",
+              "return": {
+                "type": {
+                  "text": "ThumbId"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -11974,7 +12203,7 @@
                 {
                   "name": "thumb",
                   "type": {
-                    "text": "'start' | 'end'"
+                    "text": "ThumbId"
                   }
                 },
                 {
@@ -11985,6 +12214,27 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "#isNonVisibleFocus",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "#focusThumbNonVisibly",
+              "parameters": [
+                {
+                  "name": "thumb",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "#registerThumbListeners"
@@ -11993,6 +12243,26 @@
               "kind": "method",
               "name": "#unregisterThumbListeners"
             },
+            {
+              "kind": "field",
+              "name": "#onThumbFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#onThumbBlur",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#onMouseOver",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#onMouseOut",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "#onThumbMousedown",
@@ -12158,6 +12428,14 @@
               },
               "description": "The connotation of the component",
               "fieldName": "connotation"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Show current values on the thumbs.",
+              "fieldName": "pin"
             }
           ],
           "superclass": {
@@ -12171,13 +12449,17 @@
               {
                 "name": "start",
                 "attributeName": "start",
-                "eventName": "input:start",
+                "eventNames": [
+                  "input:start"
+                ],
                 "valueMapping": "(event.target as any).start"
               },
               {
                 "name": "end",
                 "attributeName": "end",
-                "eventName": "input:end",
+                "eventNames": [
+                  "input:end"
+                ],
                 "valueMapping": "(event.target as any).end"
               }
             ]
@@ -12451,7 +12733,9 @@
               {
                 "name": "modelValue",
                 "attributeName": "value",
-                "eventName": "input",
+                "eventNames": [
+                  "input"
+                ],
                 "valueMapping": "(event.target as HTMLInputElement).value"
               }
             ]
@@ -13003,6 +13287,16 @@
               "description": "Display markers on/off",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "pin",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Show current value on the thumb.",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "connotation",
@@ -13020,6 +13314,45 @@
               },
               "description": "Custom function that generates a string for the component's \"aria-valuetext\" attribute based on the current value.",
               "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "#isNonVisibleFocus",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "#registerThumbListeners"
+            },
+            {
+              "kind": "method",
+              "name": "#unregisterThumbListeners"
+            },
+            {
+              "kind": "field",
+              "name": "#onMouseOver",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#onMouseOut",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleMouseDown"
+            },
+            {
+              "kind": "field",
+              "name": "handleThumbMouseDown"
+            },
+            {
+              "kind": "field",
+              "name": "keypressHandler"
             }
           ],
           "events": [
@@ -13056,6 +13389,14 @@
               "description": "Display markers on/off",
               "fieldName": "markers"
             },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Show current value on the thumb.",
+              "fieldName": "pin"
+            },
             {
               "name": "connotation",
               "type": {
@@ -13076,7 +13417,9 @@
               {
                 "name": "modelValue",
                 "attributeName": "value",
-                "eventName": "change",
+                "eventNames": [
+                  "change"
+                ],
                 "valueMapping": "(event.target as HTMLInputElement).value"
               }
             ]
@@ -13841,7 +14184,9 @@
               {
                 "name": "modelValue",
                 "attributeName": "checked",
-                "eventName": "change",
+                "eventNames": [
+                  "change"
+                ],
                 "valueMapping": "(event.target as HTMLInputElement).checked"
               }
             ]
@@ -15219,7 +15564,9 @@
               {
                 "name": "modelValue",
                 "attributeName": "value",
-                "eventName": "input",
+                "eventNames": [
+                  "input"
+                ],
                 "valueMapping": "(event.target as HTMLInputElement).value"
               }
             ]
@@ -15470,7 +15817,9 @@
               {
                 "name": "modelValue",
                 "attributeName": "value",
-                "eventName": "input",
+                "eventNames": [
+                  "input"
+                ],
                 "valueMapping": "(event.target as HTMLInputElement).value"
               }
             ]
@@ -15843,7 +16192,9 @@
               {
                 "name": "modelValue",
                 "attributeName": "value",
-                "eventName": "input",
+                "eventNames": [
+                  "input"
+                ],
                 "valueMapping": "(event.target as HTMLInputElement).value"
               }
             ]

package/index.cjs

@@ -257,6 +257,7 @@ exports.Appearance = enums.Appearance;
 exports.AriaLive = enums.AriaLive;
 exports.Connotation = enums.Connotation;
 exports.ConnotationDecorative = enums.ConnotationDecorative;
+exports.IconDecoration = enums.IconDecoration;
 exports.LayoutSize = enums.LayoutSize;
 exports.MediaSkipBy = enums.MediaSkipBy;
 exports.Position = enums.Position;