@heartlandone/vega 2.73.0 → 2.74.0-RTE-table-preview

package/dist/vega/vega-rich-text-image-editor.entry.js

@@ -0,0 +1,216 @@
+import { h, r as registerInstance, e as createEvent, g as Host, i as getElement } from './index-01a2f9c9.js';
+import { V as VegaSlimmer, b as MapToComponentField, M as MapToComponentMethod, e as InjectVegaGlobalSlimmer, a as InjectVegaSlimmer } from './vega-slimmer-core-83fd0e22.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer } from './component-usage-runtime-metrics-0513698f.js';
+import { s as sanitizeVegaComponent } from './component-0cff85cf.js';
+import { a as VegaInternalIconManager } from './internal-icon-manager-9279071a.js';
+import { t as trashCan } from './trash-can-8819a939.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-3b49c6b3.js';
+import { b as VegaPopoverShow, c as VegaPopoverHide, h as VegaChange, a as VegaClick } from './vega-event-id-61c8bd9f.js';
+import { f as findParent } from './ui-5f775fd9.js';
+import { C as ChangeManager } from './change-manager-b115783e.js';
+import { d as domNodeSubjectFactory } from './dom-node-subject-factory-5798693b.js';
+import { I as VegaInternalRichTextImageClick, J as VegaInternalRichTextImageDeleteButtonClicked } from './vega-internal-event-id-b65a01a3.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-61db3eef.js';
+import './index-9fdb7060.js';
+import { T as TranslationSlimmer } from './translation-slimmer-3c4e2876.js';
+import './create-public-api-runtime-metrics-slimmer-8565f08b.js';
+import './observer-3959f9dd.js';
+import './internal-vega-event-manager-826279b7.js';
+import './try-get-document-bef0f526.js';
+import './index-81ce67e2.js';
+import './static-subject-title-6fdf8c8b.js';
+
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaRichTextImageEditorRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.handleKeyDown = (e) => {
+      if (e.key === 'Enter') {
+        void this.formRef.getValue().then(({ alt }) => {
+          this.changeEventEmitter.emit({ action: 'edit', payload: { size: this.size, alt: alt } });
+        });
+        void this.popoverRef.hide();
+      }
+    };
+  }
+  render() {
+    return (h("vega-popover", { style: { width: '100%' }, trigger: "click", alignment: "start", placement: "bottom", showArrow: false, ref: (ref) => {
+        this.popoverRef = ref;
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverShow, () => {
+          this.selected = true;
+          this.notifyImageSelected();
+          void this.formRef.setValue({
+            alt: this.alt,
+          });
+        });
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverHide, () => {
+          this.currentPage = 1;
+          this.selected = false;
+          void this.formRef.reset();
+        });
+      } },
+      h("div", { slot: "popover-content" },
+        h("slot", null)),
+      h("div", { slot: "popover" },
+        this.renderImageEditor(),
+        this.renderAltTextEditor())));
+  }
+  findParentContainerRef() {
+    this.parentContainerRef = findParent(this.host, 'vega-rich-text-content');
+  }
+  renderImageEditor() {
+    return (h("vega-box", { display: this.currentPage === 1 ? 'block' : 'none' },
+      h("vega-flex", { gap: "size-12", alignItems: "center" },
+        h("vega-font", { variant: "font-field-label-sm", color: "text-primary" },
+          this.translationSlimmer.t('Size'),
+          ":"),
+        h("vega-segment-control", { size: "small", segments: [
+            { key: 'sm', text: this.translationSlimmer.t('Sm') },
+            { key: 'md', text: this.translationSlimmer.t('Md') },
+            { key: 'lg', text: this.translationSlimmer.t('Lg') },
+          ], selected: this.size, ref: (ref) => {
+            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (e) => {
+              // The below line is covered in `history.spec#should register history, and undo/redo for image size change`
+              // Prevent handling vegaChange triggered by DOM ref reuse (e.g., undo/redo) when the image editor is not visible.
+              if (!this.selected)
+                return;
+              const size = e.detail;
+              this.size = size;
+              this.changeEventEmitter.emit({
+                action: 'edit',
+                payload: { size: size, alt: this.alt },
+              });
+            });
+          } }),
+        h("vega-button-group", { variant: "tertiary", size: "small", ref: (ref) => {
+            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, (payload) => {
+              if (payload.detail === 'Alt Text') {
+                this.currentPage = 2;
+              }
+              else {
+                this.notifyImageDeleteButtonClicked();
+                this.changeEventEmitter.emit({ action: 'delete' });
+                void this.popoverRef.hide();
+              }
+            });
+          } },
+          h("vega-button-group-item", { label: this.translationSlimmer.t('Alt Text'), itemKey: "Alt Text" }),
+          h("vega-button-group-item", { label: this.translationSlimmer.t('Delete Image'), icon: VegaInternalIconManager.getIconKey('trash-can'), iconOnly: true, itemKey: "trash-can" })))));
+  }
+  renderAltTextEditor() {
+    return (h("vega-box", { display: this.currentPage === 2 ? 'block' : 'none' },
+      h("vega-form", { ref: (ref) => (this.formRef = ref) },
+        h("vega-input", { "data-vega-form": "alt", style: { width: '315px' }, label: this.translationSlimmer.t('Alt Text'), ref: (ref) => {
+            void ref.doFocus();
+          }, onKeyDown: this.handleKeyDown }))));
+  }
+  notifyImageSelected() {
+    if (this.parentContainerRef) {
+      ChangeManager.notify(domNodeSubjectFactory.getSubject(this.parentContainerRef, VegaInternalRichTextImageClick), { host: this.host });
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * {module:vega-rich-text-editor-image-click-delete-button}
+   */
+  /* istanbul ignore next */
+  notifyImageDeleteButtonClicked() {
+    if (this.parentContainerRef) {
+      ChangeManager.notify(domNodeSubjectFactory.getSubject(this.parentContainerRef, VegaInternalRichTextImageDeleteButtonClicked), { host: this.host });
+    }
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ 'trash-can': trashCan });
+})();
+__decorate$1([
+  MapToComponentField({ writable: true })
+], VegaRichTextImageEditorRenderer.prototype, "currentPage", void 0);
+__decorate$1([
+  MapToComponentField({ writable: true })
+], VegaRichTextImageEditorRenderer.prototype, "selected", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaRichTextImageEditorRenderer.prototype, "host", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaRichTextImageEditorRenderer.prototype, "alt", void 0);
+__decorate$1([
+  MapToComponentField({ writable: true })
+], VegaRichTextImageEditorRenderer.prototype, "size", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaRichTextImageEditorRenderer.prototype, "changeEventEmitter", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaRichTextImageEditorRenderer.prototype, "translationSlimmer", void 0);
+__decorate$1([
+  MapToComponentMethod('componentDidLoad')
+], VegaRichTextImageEditorRenderer.prototype, "findParentContainerRef", null);
+
+const vegaRichTextImageEditorCss = ":host{display:inline-block}:host(.rte-image-selected){outline:2px solid rgba(var(--v-border-color-tile-selected, 19, 98, 226, 1));outline-offset:-2px}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaRichTextImageEditor = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaChange = createEvent(this, "vegaChange", 7);
+    this.change = createEvent(this, "change", 7);
+    this.globalSlimmers = {};
+    this.translationSlimmer = new TranslationSlimmer();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.renderer = new VegaRichTextImageEditorRenderer();
+    this.changeEventEmitter = createEventEmitSlimmer(VegaRichTextImageEditor, VegaChange);
+    this.currentPage = 1;
+    this.selected = false;
+    /**
+     * Specifies the value of image alt
+     *
+     * @vegaVersion 2.34.0
+     */
+    this.alt = '';
+    /**
+     * Specifies the size of the image to the container
+     *
+     * @vegaVersion 2.34.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.size = 'md';
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, { class: { 'rte-image-selected': this.selected } }, this.renderer.render()), this.host);
+  }
+  get host() { return getElement(this); }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaRichTextImageEditor.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextImageEditor.prototype, "translationSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextImageEditor.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextImageEditor.prototype, "renderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextImageEditor.prototype, "changeEventEmitter", void 0);
+VegaRichTextImageEditor.style = vegaRichTextImageEditorCss;
+
+export { VegaRichTextImageEditor as vega_rich_text_image_editor };

package/dist/vega/vega-rich-text-link-editor.entry.js

@@ -0,0 +1,238 @@
+import { h, r as registerInstance, e as createEvent, g as Host, i as getElement } from './index-01a2f9c9.js';
+import { V as VegaSlimmer, b as MapToComponentField, M as MapToComponentMethod, m as methodPlaceholder, e as InjectVegaGlobalSlimmer, a as InjectVegaSlimmer } from './vega-slimmer-core-83fd0e22.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer } from './component-usage-runtime-metrics-0513698f.js';
+import { s as sanitizeVegaComponent } from './component-0cff85cf.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-3b49c6b3.js';
+import { b as VegaPopoverShow, c as VegaPopoverHide, a as VegaClick, h as VegaChange } from './vega-event-id-61c8bd9f.js';
+import { c as VegaInternalComponentDidRender, V as VegaInternalPopoverUpdateTarget } from './vega-internal-event-id-b65a01a3.js';
+import { d as domNodeSubjectFactory } from './dom-node-subject-factory-5798693b.js';
+import { C as ChangeManager } from './change-manager-b115783e.js';
+import { r as remoteInvocationRegistry } from './remote-invocation-registry-4219120b.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-61db3eef.js';
+import './index-9fdb7060.js';
+import { T as TranslationSlimmer } from './translation-slimmer-3c4e2876.js';
+import './observer-3959f9dd.js';
+import './ui-5f775fd9.js';
+import './internal-vega-event-manager-826279b7.js';
+import './try-get-document-bef0f526.js';
+import './index-81ce67e2.js';
+import './static-subject-title-6fdf8c8b.js';
+import './create-public-api-runtime-metrics-slimmer-8565f08b.js';
+
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaRichTextLinkEditorRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.handleKeyDown = (e) => {
+      if (e.key === 'Enter') {
+        void this.formRef.getValue().then(({ text, url }) => {
+          if (url.length > 0) {
+            this.changeEventEmitter.emit({
+              action: 'link',
+              payload: { text: text || url, url },
+            });
+            void this.popoverRef.hide();
+          }
+        });
+      }
+    };
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]{@link VegaRichTextLinkEditor.componentDidLoad}
+   */
+  componentDidLoad() {
+    this.updatePopoverTarget();
+  }
+  /**
+   * Component lifecycle - [componentDidRender]{@link VegaRichTextLinkEditor.componentDidRender}
+   */
+  componentDidRender() {
+    ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalComponentDidRender), {});
+  }
+  watchStatusChange() {
+    if (this.status === 'linkEdit') {
+      setTimeout(() => {
+        void this.urlInputRef.doFocus();
+      });
+    }
+  }
+  watchTargetChange() {
+    this.updatePopoverTarget();
+  }
+  getPopoverRef() {
+    return this.popoverRef;
+  }
+  render() {
+    return (h("vega-popover", { trigger: "click", alignment: "start", placement: "bottom", showArrow: false, ref: (ref) => {
+        this.popoverRef = ref;
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverShow, () => {
+          var _a, _b;
+          if (this.status === 'linkEdit') {
+            void this.urlInputRef.doFocus();
+          }
+          void this.formRef.setValue({
+            text: (_a = this.record) === null || _a === void 0 ? void 0 : _a.text,
+            url: (_b = this.record) === null || _b === void 0 ? void 0 : _b.url,
+          });
+        });
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverHide, () => {
+          void this.formRef.reset();
+          if (this.resetStatusAfterHide) {
+            this.status = 'editOrUnlinkSelection';
+          }
+        });
+      } },
+      h("span", { slot: "popover-content" },
+        h("slot", null)),
+      h("div", { slot: "popover" },
+        this.renderLinkUnlinkContent(),
+        this.renderLinkEditContent())));
+  }
+  renderLinkUnlinkContent() {
+    return (h("vega-box", { display: this.status === 'editOrUnlinkSelection' ? 'block' : 'none' },
+      h("vega-button-group", { size: "small", variant: "tertiary", ref: (node) => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaClick, ({ detail }) => {
+            switch (detail) {
+              case 'edit': {
+                this.status = 'linkEdit';
+                return;
+              }
+              case 'unlink': {
+                this.changeEventEmitter.emit({ action: 'unlink' });
+                void this.popoverRef.hide();
+              }
+            }
+          });
+        } },
+        h("vega-button-group-item", { label: this.translationSlimmer.t('Edit'), itemKey: "edit" }),
+        h("vega-button-group-item", { label: this.translationSlimmer.t('Unlink'), itemKey: "unlink" }))));
+  }
+  renderLinkEditContent() {
+    return (h("vega-box", { display: this.status === 'linkEdit' ? 'block' : 'none' },
+      h("vega-form", { ref: (ref) => (this.formRef = ref) },
+        h("vega-flex", { style: { width: '419px' }, direction: "col", gap: "size-16" },
+          h("vega-input", { "data-vega-form": "url", ref: (ref) => {
+              this.urlInputRef = ref;
+            }, size: "small", label: this.translationSlimmer.t('URL'), onKeyDown: this.handleKeyDown }),
+          h("vega-input", { size: "small", label: this.translationSlimmer.t('Text'), "data-vega-form": "text", onKeyDown: this.handleKeyDown })))));
+  }
+  updatePopoverTarget() {
+    remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(this.popoverRef, VegaInternalPopoverUpdateTarget), this.target);
+  }
+}
+__decorate$1([
+  MapToComponentField()
+], VegaRichTextLinkEditorRenderer.prototype, "host", void 0);
+__decorate$1([
+  MapToComponentField({ writable: true })
+], VegaRichTextLinkEditorRenderer.prototype, "status", void 0);
+__decorate$1([
+  MapToComponentField({ writable: true })
+], VegaRichTextLinkEditorRenderer.prototype, "record", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaRichTextLinkEditorRenderer.prototype, "changeEventEmitter", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaRichTextLinkEditorRenderer.prototype, "resetStatusAfterHide", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaRichTextLinkEditorRenderer.prototype, "translationSlimmer", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaRichTextLinkEditorRenderer.prototype, "target", void 0);
+__decorate$1([
+  MapToComponentMethod('componentDidLoad')
+], VegaRichTextLinkEditorRenderer.prototype, "componentDidLoad", null);
+__decorate$1([
+  MapToComponentMethod('componentDidRender')
+], VegaRichTextLinkEditorRenderer.prototype, "componentDidRender", null);
+__decorate$1([
+  MapToComponentMethod('watchStatusChange')
+], VegaRichTextLinkEditorRenderer.prototype, "watchStatusChange", null);
+__decorate$1([
+  MapToComponentMethod('watchTargetChange')
+], VegaRichTextLinkEditorRenderer.prototype, "watchTargetChange", null);
+
+const vegaRichTextLinkEditorCss = ":host{display:contents}:host vega-popover{display:inline}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaRichTextLinkEditor = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaChange = createEvent(this, "vegaChange", 7);
+    this.change = createEvent(this, "change", 7);
+    this.globalSlimmers = {};
+    this.translationSlimmer = new TranslationSlimmer();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.renderer = new VegaRichTextLinkEditorRenderer();
+    this.changeEventEmitter = createEventEmitSlimmer(VegaRichTextLinkEditor, VegaChange);
+    /**
+     * Specifies the status of the link editor
+     *
+     * @vegaVersion 2.34.0
+     */
+    // eslint-disable-next-line @stencil/strict-mutable
+    this.status = 'editOrUnlinkSelection';
+    /**
+     * Specifies whether the status will be reset after hide the popover
+     *
+     * @vegaVersion 2.34.0
+     */
+    this.resetStatusAfterHide = true;
+  }
+  watchStatusChange() {
+    methodPlaceholder();
+  }
+  watchTargetChange() {
+    methodPlaceholder();
+  }
+  /**
+   * Provide a method to show the link editor popover
+   *
+   * @vegaVersion 2.34.0
+   */
+  async show() {
+    await this.renderer.getPopoverRef().show();
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "status": ["watchStatusChange"],
+    "target": ["watchTargetChange"]
+  }; }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaRichTextLinkEditor.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextLinkEditor.prototype, "translationSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextLinkEditor.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextLinkEditor.prototype, "renderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextLinkEditor.prototype, "changeEventEmitter", void 0);
+VegaRichTextLinkEditor.style = vegaRichTextLinkEditorCss;
+
+export { VegaRichTextLinkEditor as vega_rich_text_link_editor };