@vonage/vivid 5.7.0 → 5.9.0

package/lib/popover/popover.template.d.ts

@@ -0,0 +1,3 @@
+import type { VividElementDefinitionContext } from '../../shared/design-system/defineVividComponent';
+import { Popover } from './popover';
+export declare const popoverTemplate: (context: VividElementDefinitionContext) => import("@microsoft/fast-element").ViewTemplate<Popover, any>;

package/lib/rich-text-editor/locale.d.ts

@@ -27,7 +27,6 @@ export interface RichTextEditorLocale {
     close: string;
     edit: string;
     delete: string;
-    clickHere: string;
     imageSizes: {
         small: string;
         fit: string;

package/lib/rich-text-editor/rte/config.d.ts

@@ -4,9 +4,12 @@ import { RteInstance, type RteInstanceOptions } from './instance';
 import { RteFeature, RteFeatureImpl } from './feature';
 import { TextblockAttrs } from './utils/textblock-attrs';
 import { TextblockMarks } from './utils/textblock-marks';
+import type { RteDocument } from './document';
+import { type RteView, type RteViewOptions } from './view';
 export declare class RteConfig {
     constructor(features: RteFeature[]);
     instantiateEditor(options?: RteInstanceOptions): RteInstance;
+    instantiateView(document: RteDocument, options?: RteViewOptions): RteView;
 }
 export declare class RteConfigImpl {
     schema: Schema;

package/lib/rich-text-editor/rte/document.d.ts

@@ -21,6 +21,8 @@ type RegularNode = {
     marks?: Mark[];
     content?: Array<RteNode>;
 };
+export type RteTextNode = TextNode;
+export type RteRegularNode = RegularNode;
 export type RteNode = TextNode | RegularNode;
 export type RteMark = Mark;
 export type RteDocument = Doc;

package/lib/rich-text-editor/rte/exports.d.ts

@@ -21,3 +21,4 @@ export { RteHtmlParser } from './html-parser';
 export { RteHtmlSerializer } from './html-serializer';
 export type { RteInstance } from './instance';
 export type { RteDocument, RteFragment, RteNode, RteMark } from './document';
+export type { RteView, RteViewOptions } from './view';

package/lib/rich-text-editor/rte/view.d.ts

@@ -0,0 +1,30 @@
+import type { RteConfig } from './config';
+import type { RteDocument, RteMark, RteNode } from './document';
+import { impl } from './utils/impl';
+export type RteView = ({
+    type: 'node';
+    node: RteDocument | RteNode;
+    children: RteView;
+} | {
+    type: 'mark';
+    mark: RteMark;
+    children: RteView;
+} | {
+    type: 'fragment';
+    content: RteView[];
+}) & {
+    [impl]: RteViewCtx;
+};
+export type RteViewCtx = {
+    config: RteConfig;
+    options: RteViewOptions;
+};
+export type RteViewOptions = {
+    renderChildView?: (view: RteView & {
+        type: 'node' | 'mark';
+    }) => {
+        dom: HTMLElement;
+        contentDom?: HTMLElement;
+    } | false;
+};
+export declare const convertToView: (doc: RteDocument, ctx: RteViewCtx) => RteView;

package/lib/rich-text-view/definition.d.ts

@@ -0,0 +1,4 @@
+import { RichTextView } from './rich-text-view';
+export declare const richTextViewDefinition: import("../../shared/design-system/defineVividComponent").VividComponentDefinition;
+export declare const registerRichTextView: (prefix?: string) => void;
+export { RichTextView as VwcRichTextViewElement };

package/lib/rich-text-view/rich-text-view.d.ts

@@ -0,0 +1,15 @@
+import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
+import type { RteView } from '../rich-text-editor/rte/view';
+export declare class RichTextView extends VividElement {
+    view?: RteView;
+    private _styles?;
+    private _addStyles;
+    private _removeStyles;
+    private _slotCounter;
+    private _slottedChildren;
+    private _cleanupLightDom;
+    private _updateView;
+    private _renderView;
+    private _handleCustomRender;
+    private _renderDefault;
+}

package/lib/rich-text-view/rich-text-view.template.d.ts

@@ -0,0 +1,3 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { RichTextView } from './rich-text-view';
+export declare const RichTextViewTemplate: () => ViewTemplate<RichTextView>;

package/lib/tag-name-map.d.ts

@@ -1,4 +1,4 @@
-import type { VwcAccordionElement, VwcAccordionItemElement, VwcActionGroupElement, VwcAlertElement, VwcAudioPlayerElement, VwcAvatarElement, VwcBadgeElement, VwcBannerElement, VwcBreadcrumbElement, VwcBreadcrumbItemElement, VwcButtonElement, VwcCalendarElement, VwcCalendarEventElement, VwcCardElement, VwcCheckboxElement, VwcColorPickerElement, VwcComboboxElement, VwcDataGridCellElement, VwcDataGridElement, VwcDataGridRowElement, VwcDatePickerElement, VwcDateRangePickerElement, VwcDateTimePickerElement, VwcDialogElement, VwcDialPadElement, VwcDividerElement, VwcEmptyStateElement, VwcFabElement, VwcFilePickerElement, VwcHeaderElement, VwcIconElement, VwcLayoutElement, VwcMenuElement, VwcMenuItemElement, VwcNavDisclosureElement, VwcNavElement, VwcNavItemElement, VwcNoteElement, VwcNumberFieldElement, VwcOptionElement, VwcPaginationElement, VwcProgressElement, VwcProgressRingElement, VwcRadioElement, VwcRadioGroupElement, VwcRangeSliderElement, VwcRichTextEditorElement, VwcSearchableSelectElement, VwcSelectableBoxElement, VwcSelectElement, VwcSideDrawerElement, VwcSimpleColorPickerElement, VwcSliderElement, VwcSplitButtonElement, VwcSwitchElement, VwcTabElement, VwcTabPanelElement, VwcTabsElement, VwcTagElement, VwcTagGroupElement, VwcTextAreaElement, VwcTextFieldElement, VwcTimePickerElement, VwcToggletipElement, VwcTooltipElement, VwcTreeItemElement, VwcTreeViewElement, VwcVideoPlayerElement } from './components';
+import type { VwcAccordionElement, VwcAccordionItemElement, VwcActionGroupElement, VwcAlertElement, VwcAudioPlayerElement, VwcAvatarElement, VwcBadgeElement, VwcBannerElement, VwcBreadcrumbElement, VwcBreadcrumbItemElement, VwcButtonElement, VwcCalendarElement, VwcCalendarEventElement, VwcCardElement, VwcCheckboxElement, VwcColorPickerElement, VwcComboboxElement, VwcContextualHelpElement, VwcDataGridCellElement, VwcDataGridElement, VwcDataGridRowElement, VwcDatePickerElement, VwcDateRangePickerElement, VwcDateTimePickerElement, VwcDialogElement, VwcDialPadElement, VwcDividerElement, VwcEmptyStateElement, VwcFabElement, VwcFilePickerElement, VwcHeaderElement, VwcIconElement, VwcLayoutElement, VwcMenuElement, VwcMenuItemElement, VwcNavDisclosureElement, VwcNavElement, VwcNavItemElement, VwcNoteElement, VwcNumberFieldElement, VwcOptionElement, VwcPaginationElement, VwcPopoverElement, VwcProgressElement, VwcProgressRingElement, VwcRadioElement, VwcRadioGroupElement, VwcRangeSliderElement, VwcRichTextEditorElement, VwcRichTextViewElement, VwcSearchableSelectElement, VwcSelectableBoxElement, VwcSelectElement, VwcSideDrawerElement, VwcSimpleColorPickerElement, VwcSliderElement, VwcSplitButtonElement, VwcSwitchElement, VwcTabElement, VwcTableBodyElement, VwcTableCellElement, VwcTableElement, VwcTableHeadElement, VwcTableHeaderCellElement, VwcTableRowElement, VwcTabPanelElement, VwcTabsElement, VwcTagElement, VwcTagGroupElement, VwcTextAreaElement, VwcTextFieldElement, VwcTimePickerElement, VwcToggletipElement, VwcTooltipElement, VwcTreeItemElement, VwcTreeViewElement, VwcVideoPlayerElement } from './components';
 type DefaultVividTagNameMap = {
     'vwc-accordion': VwcAccordionElement;
     'vwc-accordion-item': VwcAccordionItemElement;
@@ -16,10 +16,17 @@ type DefaultVividTagNameMap = {
     'vwc-card': VwcCardElement;
     'vwc-checkbox': VwcCheckboxElement;
     'vwc-color-picker': VwcColorPickerElement;
+    'vwc-contextual-help': VwcContextualHelpElement;
     'vwc-combobox': VwcComboboxElement;
     'vwc-data-grid-cell': VwcDataGridCellElement;
     'vwc-data-grid': VwcDataGridElement;
     'vwc-data-grid-row': VwcDataGridRowElement;
+    'vwc-table': VwcTableElement;
+    'vwc-table-body': VwcTableBodyElement;
+    'vwc-table-cell': VwcTableCellElement;
+    'vwc-table-head': VwcTableHeadElement;
+    'vwc-table-header-cell': VwcTableHeaderCellElement;
+    'vwc-table-row': VwcTableRowElement;
     'vwc-date-picker': VwcDatePickerElement;
     'vwc-date-range-picker': VwcDateRangePickerElement;
     'vwc-date-time-picker': VwcDateTimePickerElement;
@@ -41,11 +48,13 @@ type DefaultVividTagNameMap = {
     'vwc-number-field': VwcNumberFieldElement;
     'vwc-option': VwcOptionElement;
     'vwc-pagination': VwcPaginationElement;
+    'vwc-popover': VwcPopoverElement;
     'vwc-progress': VwcProgressElement;
     'vwc-progress-ring': VwcProgressRingElement;
     'vwc-radio': VwcRadioElement;
     'vwc-radio-group': VwcRadioGroupElement;
     'vwc-range-slider': VwcRangeSliderElement;
+    'vwc-rich-text-view': VwcRichTextViewElement;
     'vwc-rich-text-editor': VwcRichTextEditorElement;
     'vwc-searchable-select': VwcSearchableSelectElement;
     'vwc-selectable-box': VwcSelectableBoxElement;

package/locales/de-DE.cjs

@@ -328,6 +328,9 @@ const deDE = {
   dialog: {
     dismissButtonLabel: "Schließen"
   },
+  popover: {
+    dismissButtonLabel: "Schließen"
+  },
   banner: {
     dismissButtonLabel: "Schließen"
   },
@@ -434,7 +437,6 @@ const deDE = {
     close: "Schließen",
     edit: "Bearbeiten",
     delete: "Löschen",
-    clickHere: "Hier klicken",
     imageSizes: {
       small: "Klein",
       fit: "Anpassen",

package/locales/de-DE.js

@@ -326,6 +326,9 @@ const deDE = {
   dialog: {
     dismissButtonLabel: "Schließen"
   },
+  popover: {
+    dismissButtonLabel: "Schließen"
+  },
   banner: {
     dismissButtonLabel: "Schließen"
   },
@@ -432,7 +435,6 @@ const deDE = {
     close: "Schließen",
     edit: "Bearbeiten",
     delete: "Löschen",
-    clickHere: "Hier klicken",
     imageSizes: {
       small: "Klein",
       fit: "Anpassen",

package/locales/en-GB.cjs

@@ -160,6 +160,9 @@ const enGB = {
   dialog: {
     dismissButtonLabel: "Close"
   },
+  popover: {
+    dismissButtonLabel: "Close"
+  },
   banner: {
     dismissButtonLabel: "Close"
   },
@@ -266,7 +269,6 @@ const enGB = {
     close: "Close",
     edit: "Edit",
     delete: "Delete",
-    clickHere: "Click here",
     imageSizes: {
       small: "Small",
       fit: "Fit",

package/locales/en-GB.js

@@ -158,6 +158,9 @@ const enGB = {
   dialog: {
     dismissButtonLabel: "Close"
   },
+  popover: {
+    dismissButtonLabel: "Close"
+  },
   banner: {
     dismissButtonLabel: "Close"
   },
@@ -264,7 +267,6 @@ const enGB = {
     close: "Close",
     edit: "Edit",
     delete: "Delete",
-    clickHere: "Click here",
     imageSizes: {
       small: "Small",
       fit: "Fit",

package/locales/en-US.cjs

@@ -328,6 +328,9 @@ const enUS = {
   dialog: {
     dismissButtonLabel: "Close"
   },
+  popover: {
+    dismissButtonLabel: "Close"
+  },
   banner: {
     dismissButtonLabel: "Close"
   },
@@ -434,7 +437,6 @@ const enUS = {
     close: "Close",
     edit: "Edit",
     delete: "Delete",
-    clickHere: "Click here",
     imageSizes: {
       small: "Small",
       fit: "Fit",

package/locales/en-US.js

@@ -326,6 +326,9 @@ const enUS = {
   dialog: {
     dismissButtonLabel: "Close"
   },
+  popover: {
+    dismissButtonLabel: "Close"
+  },
   banner: {
     dismissButtonLabel: "Close"
   },
@@ -432,7 +435,6 @@ const enUS = {
     close: "Close",
     edit: "Edit",
     delete: "Delete",
-    clickHere: "Click here",
     imageSizes: {
       small: "Small",
       fit: "Fit",

package/locales/ja-JP.cjs

@@ -327,6 +327,9 @@ const jaJP = {
   dialog: {
     dismissButtonLabel: "閉じる"
   },
+  popover: {
+    dismissButtonLabel: "閉じる"
+  },
   banner: {
     dismissButtonLabel: "閉じる"
   },
@@ -433,7 +436,6 @@ const jaJP = {
     close: "閉じる",
     edit: "編集",
     delete: "削除",
-    clickHere: "ここをクリック",
     imageSizes: {
       small: "小",
       fit: "フィット",

package/locales/ja-JP.js

@@ -325,6 +325,9 @@ const jaJP = {
   dialog: {
     dismissButtonLabel: "閉じる"
   },
+  popover: {
+    dismissButtonLabel: "閉じる"
+  },
   banner: {
     dismissButtonLabel: "閉じる"
   },
@@ -431,7 +434,6 @@ const jaJP = {
     close: "閉じる",
     edit: "編集",
     delete: "削除",
-    clickHere: "ここをクリック",
     imageSizes: {
       small: "小",
       fit: "フィット",

package/locales/zh-CN.cjs

@@ -329,6 +329,9 @@ const zhCN = {
   dialog: {
     dismissButtonLabel: "关"
   },
+  popover: {
+    dismissButtonLabel: "关"
+  },
   banner: {
     dismissButtonLabel: "关"
   },
@@ -435,7 +438,6 @@ const zhCN = {
     close: "关闭",
     edit: "编辑",
     delete: "删除",
-    clickHere: "点击这里",
     imageSizes: {
       small: "小",
       fit: "适应",

package/locales/zh-CN.js

@@ -327,6 +327,9 @@ const zhCN = {
   dialog: {
     dismissButtonLabel: "关"
   },
+  popover: {
+    dismissButtonLabel: "关"
+  },
   banner: {
     dismissButtonLabel: "关"
   },
@@ -433,7 +436,6 @@ const zhCN = {
     close: "关闭",
     edit: "编辑",
     delete: "删除",
-    clickHere: "点击这里",
     imageSizes: {
       small: "小",
       fit: "适应",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "5.7.0",
+  "version": "5.9.0",
   "homepage": "https://vivid.deno.dev",
   "bugs": {
     "url": "https://github.com/Vonage/vivid-3/issues"
@@ -55,7 +55,8 @@
     "prosemirror-view": "^1.40.1",
     "ramda": "^0.32.0",
     "uuid": "^11.1.0",
-    "vanilla-colorful": "^0.7.2"
+    "vanilla-colorful": "^0.7.2",
+    "video.js": "^8.23.4"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.5.7",
@@ -64,8 +65,6 @@
     "@playwright/test": "1.57.0",
     "@testing-library/dom": "^8.20.1",
     "@testing-library/user-event": "^14.6.1",
-    "@types/jsdom": "^21.1.7",
-    "@types/markdown-it": "^13.0.9",
     "@types/node": "^20.19.25",
     "@types/ramda": "^0.30.2",
     "@types/uuid": "^10.0.0",
@@ -77,13 +76,10 @@
     "dialog-polyfill": "^0.5.6",
     "element-internals-polyfill": "^1.3.13",
     "http-server": "^14.1.1",
-    "jsdom": "^23.2.0",
-    "markdown-it": "^13.0.2",
     "playwright": "1.57.0",
     "sass": "^1.94.2",
     "tsx": "^4.20.6",
     "typescript": "5.9.3",
-    "video.js": "^8.23.4",
     "vite": "^5.4.18",
     "vite-plugin-dts": "~2.3.0",
     "vite-plugin-static-copy": "^1.0.6",
@@ -93,15 +89,15 @@
     "wait-on": "^8.0.5",
     "@repo/cem-analyzer-plugins": "1.0.0",
     "@repo/consts": "1.0.0",
+    "@repo/shared": "1.0.0",
+    "@repo/eslint-config": "1.0.0",
     "@repo/eslint-plugin-repo": "1.0.0",
+    "@repo/tokens": "1.0.0",
     "@repo/stylelint-config": "1.0.0",
-    "@repo/eslint-config": "1.0.0",
-    "@repo/shared": "1.0.0",
     "@repo/styles": "1.0.0",
-    "@repo/tokens": "1.0.0",
     "@repo/tools": "1.0.0",
-    "@repo/vitest-config": "1.0.0",
-    "@repo/typescript-config": "1.0.0"
+    "@repo/typescript-config": "1.0.0",
+    "@repo/vitest-config": "1.0.0"
   },
   "customElements": "custom-elements.json",
   "scripts": {