@vonage/vivid 5.15.1 → 5.16.0

package/unbundled/definition58.cjs

@@ -0,0 +1,146 @@
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_slottable_request = require("./slottable-request.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+//#region src/lib/rich-text-view/rich-text-view.scss?inline
+var rich_text_view_default = ":host{display:contents}.content{overflow-wrap:break-word;white-space:break-spaces;display:contents}";
+//#endregion
+//#region src/lib/rich-text-view/rich-text-view.ts
+/**
+* @public
+* @component rich-text-view
+* @dynamicSlot `@vonage/vivid#RteChildSlotProps` child - Used for custom rendered children.
+*/
+var RichTextView = class extends require_vivid_element.VividElement {
+	constructor(..._args) {
+		super(..._args);
+		this._slotCounter = 0;
+		this._slottedChildren = /* @__PURE__ */ new Set();
+		this._slotRequests = /* @__PURE__ */ new Set();
+		this._contentElement = null;
+	}
+	/**
+	* @internal
+	*/
+	viewChanged(oldView, newView) {
+		if (oldView) this._removeStyles();
+		if (newView) this._addStyles(newView);
+		this._updateView();
+	}
+	_addStyles(view) {
+		const config = view[require_slottable_request.impl].config[require_slottable_request.impl];
+		this._styles = new _microsoft_fast_element.ElementStyles(require_slottable_request.sortedContributions(config.features.flatMap((f) => f.getStyles())));
+		this._styles.addStylesTo(this.shadowRoot);
+	}
+	_removeStyles() {
+		if (this._styles) {
+			this._styles.removeStylesFrom(this.shadowRoot);
+			this._styles = void 0;
+		}
+	}
+	_cleanupLightDom() {
+		for (const el of this._slottedChildren) this.removeChild(el);
+		for (const slotName of this._slotRequests) require_slottable_request.dispatchSlottableRequest(this, "child", slotName, require_slottable_request.removeSymbol);
+		this._slottedChildren.clear();
+		this._slotRequests.clear();
+		this._slotCounter = 0;
+	}
+	_updateView() {
+		if (!this._contentElement) return;
+		this._contentElement.innerHTML = "";
+		this._cleanupLightDom();
+		if (this.view) this._contentElement.appendChild(this._renderView(this.view));
+	}
+	_renderView(rteView) {
+		const ctx = rteView[require_slottable_request.impl];
+		if (rteView.type === "node" && rteView.node.type === "doc") rteView = rteView.children;
+		if (rteView.type === "fragment") {
+			const frag = document.createDocumentFragment();
+			for (const child of rteView.content) frag.appendChild(this._renderView(child));
+			return frag;
+		}
+		const customRenderedView = ctx.options.renderChildView?.(rteView) ?? false;
+		if (customRenderedView) return this._handleCustomRender(rteView, customRenderedView);
+		else return this._renderDefault(rteView);
+	}
+	_handleCustomRender(rteView, customResult) {
+		const slotName = `child-view-${this._slotCounter++}`;
+		const slot = document.createElement("slot");
+		slot.setAttribute("name", slotName);
+		if (customResult === true) {
+			this._slotRequests.add(slotName);
+			require_slottable_request.dispatchSlottableRequest(this, "child", slotName, { view: rteView });
+		} else {
+			const { dom, contentDom = dom } = customResult;
+			const nestedView = document.createElement(this.tagName);
+			nestedView.view = rteView.children;
+			contentDom.appendChild(nestedView);
+			dom.setAttribute("slot", slotName);
+			this.appendChild(dom);
+			this._slottedChildren.add(dom);
+		}
+		return slot;
+	}
+	_renderDefault(view) {
+		const schema = view[require_slottable_request.impl].config[require_slottable_request.impl].schema;
+		if (view.type === "node" && view.node.type === "text") return document.createTextNode(view.node.text);
+		const item = view.type === "node" ? view.node : view.mark;
+		const pmItem = view.type === "node" ? require_slottable_request.Node.fromJSON(schema, item) : require_slottable_request.Mark.fromJSON(schema, item);
+		const spec = pmItem instanceof require_slottable_request.Node ? pmItem.type.spec.toDOM(pmItem) : pmItem.type.spec.toDOM(pmItem, true);
+		const { dom, contentDOM = dom } = require_slottable_request.DOMSerializer.renderSpec(document, spec);
+		const childrenRendered = this._renderView(view.children);
+		contentDOM.appendChild(childrenRendered);
+		return dom;
+	}
+	/**
+	* @internal
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		this._updateView();
+	}
+	/**
+	* @internal
+	*/
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._removeStyles();
+		this._cleanupLightDom();
+	}
+};
+require_decorate.__decorate([_microsoft_fast_element.observable], RichTextView.prototype, "view", void 0);
+//#endregion
+//#region src/lib/rich-text-view/rich-text-view.template.ts
+var RichTextViewTemplate = () => _microsoft_fast_element.html`<div class="content rich-text" ${(0, _microsoft_fast_element.ref)("_contentElement")}></div>`;
+//#endregion
+//#region src/lib/rich-text-view/definition.ts
+var richTextViewDefinition = require_vivid_element.defineVividComponent("rich-text-view", RichTextView, RichTextViewTemplate, [], {
+	styles: rich_text_view_default,
+	shadowOptions: { delegatesFocus: true }
+});
+/**
+* Registers the rich-text-view element with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerRichTextView = require_vivid_element.createRegisterFunction(richTextViewDefinition);
+//#endregion
+Object.defineProperty(exports, "RichTextView", {
+	enumerable: true,
+	get: function() {
+		return RichTextView;
+	}
+});
+Object.defineProperty(exports, "registerRichTextView", {
+	enumerable: true,
+	get: function() {
+		return registerRichTextView;
+	}
+});
+Object.defineProperty(exports, "richTextViewDefinition", {
+	enumerable: true,
+	get: function() {
+		return richTextViewDefinition;
+	}
+});

package/unbundled/definition58.js

@@ -0,0 +1,128 @@
+import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { t as __decorate } from "./decorate.js";
+import { c as sortedContributions, f as DOMSerializer, g as Node, m as Mark, n as removeSymbol, r as impl, t as dispatchSlottableRequest } from "./slottable-request.js";
+import { ElementStyles, html, observable, ref } from "@microsoft/fast-element";
+//#region src/lib/rich-text-view/rich-text-view.scss?inline
+var rich_text_view_default = ":host{display:contents}.content{overflow-wrap:break-word;white-space:break-spaces;display:contents}";
+//#endregion
+//#region src/lib/rich-text-view/rich-text-view.ts
+/**
+* @public
+* @component rich-text-view
+* @dynamicSlot `@vonage/vivid#RteChildSlotProps` child - Used for custom rendered children.
+*/
+var RichTextView = class extends VividElement {
+	constructor(..._args) {
+		super(..._args);
+		this._slotCounter = 0;
+		this._slottedChildren = /* @__PURE__ */ new Set();
+		this._slotRequests = /* @__PURE__ */ new Set();
+		this._contentElement = null;
+	}
+	/**
+	* @internal
+	*/
+	viewChanged(oldView, newView) {
+		if (oldView) this._removeStyles();
+		if (newView) this._addStyles(newView);
+		this._updateView();
+	}
+	_addStyles(view) {
+		const config = view[impl].config[impl];
+		this._styles = new ElementStyles(sortedContributions(config.features.flatMap((f) => f.getStyles())));
+		this._styles.addStylesTo(this.shadowRoot);
+	}
+	_removeStyles() {
+		if (this._styles) {
+			this._styles.removeStylesFrom(this.shadowRoot);
+			this._styles = void 0;
+		}
+	}
+	_cleanupLightDom() {
+		for (const el of this._slottedChildren) this.removeChild(el);
+		for (const slotName of this._slotRequests) dispatchSlottableRequest(this, "child", slotName, removeSymbol);
+		this._slottedChildren.clear();
+		this._slotRequests.clear();
+		this._slotCounter = 0;
+	}
+	_updateView() {
+		if (!this._contentElement) return;
+		this._contentElement.innerHTML = "";
+		this._cleanupLightDom();
+		if (this.view) this._contentElement.appendChild(this._renderView(this.view));
+	}
+	_renderView(rteView) {
+		const ctx = rteView[impl];
+		if (rteView.type === "node" && rteView.node.type === "doc") rteView = rteView.children;
+		if (rteView.type === "fragment") {
+			const frag = document.createDocumentFragment();
+			for (const child of rteView.content) frag.appendChild(this._renderView(child));
+			return frag;
+		}
+		const customRenderedView = ctx.options.renderChildView?.(rteView) ?? false;
+		if (customRenderedView) return this._handleCustomRender(rteView, customRenderedView);
+		else return this._renderDefault(rteView);
+	}
+	_handleCustomRender(rteView, customResult) {
+		const slotName = `child-view-${this._slotCounter++}`;
+		const slot = document.createElement("slot");
+		slot.setAttribute("name", slotName);
+		if (customResult === true) {
+			this._slotRequests.add(slotName);
+			dispatchSlottableRequest(this, "child", slotName, { view: rteView });
+		} else {
+			const { dom, contentDom = dom } = customResult;
+			const nestedView = document.createElement(this.tagName);
+			nestedView.view = rteView.children;
+			contentDom.appendChild(nestedView);
+			dom.setAttribute("slot", slotName);
+			this.appendChild(dom);
+			this._slottedChildren.add(dom);
+		}
+		return slot;
+	}
+	_renderDefault(view) {
+		const schema = view[impl].config[impl].schema;
+		if (view.type === "node" && view.node.type === "text") return document.createTextNode(view.node.text);
+		const item = view.type === "node" ? view.node : view.mark;
+		const pmItem = view.type === "node" ? Node.fromJSON(schema, item) : Mark.fromJSON(schema, item);
+		const spec = pmItem instanceof Node ? pmItem.type.spec.toDOM(pmItem) : pmItem.type.spec.toDOM(pmItem, true);
+		const { dom, contentDOM = dom } = DOMSerializer.renderSpec(document, spec);
+		const childrenRendered = this._renderView(view.children);
+		contentDOM.appendChild(childrenRendered);
+		return dom;
+	}
+	/**
+	* @internal
+	*/
+	connectedCallback() {
+		super.connectedCallback();
+		this._updateView();
+	}
+	/**
+	* @internal
+	*/
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._removeStyles();
+		this._cleanupLightDom();
+	}
+};
+__decorate([observable], RichTextView.prototype, "view", void 0);
+//#endregion
+//#region src/lib/rich-text-view/rich-text-view.template.ts
+var RichTextViewTemplate = () => html`<div class="content rich-text" ${ref("_contentElement")}></div>`;
+//#endregion
+//#region src/lib/rich-text-view/definition.ts
+var richTextViewDefinition = defineVividComponent("rich-text-view", RichTextView, RichTextViewTemplate, [], {
+	styles: rich_text_view_default,
+	shadowOptions: { delegatesFocus: true }
+});
+/**
+* Registers the rich-text-view element with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerRichTextView = createRegisterFunction(richTextViewDefinition);
+//#endregion
+export { richTextViewDefinition as n, RichTextView as r, registerRichTextView as t };