@globalpayments/vega 2.49.1 → 2.51.0

package/dist/collection/components/vega-code-block/slimmers/renderers/vega-code-block-renderer.js

@@ -0,0 +1,122 @@
+var __decorate = (this && this.__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;
+};
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { Fragment, h } from '@stencil/core';
+import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
+import trashCan from '../../../../global/icons/trash-can';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaChange, VegaClick } from '../../../../helpers/event-manager/event-id/vega-event-id';
+import { CodeLanguage } from '../../types';
+/**
+ * The code block editor renderer class.
+ */
+export class VegaCodeBlockRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.languageDropdownProps = {
+      searchable: false,
+    };
+    this.languageOptions = Object.keys(CodeLanguage).map((key) => {
+      return { id: CodeLanguage[key], displayName: key };
+    });
+    /**
+     * Handle the code language update.
+     *
+     * @param {HTMLVegaInputSelectElement} node - The language select element.
+     */
+    this.handleLanguageChange = (node) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaChange, (payload) => {
+        var _a;
+        this.valueController.updateValue((_a = this.value) === null || _a === void 0 ? void 0 : _a.code, payload.detail);
+      });
+    };
+    /**
+     * Handle the code language update.
+     *
+     * @param {HTMLVegaButtonCircleElement} node - The delete button.
+     */
+    this.handleDeleteClick = (node) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaClick, () => {
+        const event = this.removeEventEmitter.emit();
+        if (!event.defaultPrevented) {
+          this.host.remove();
+        }
+      });
+    };
+  }
+  /**
+   * Get the toolbar container element ref.
+   *
+   * @returns {HTMLDivElement} - The div element.
+   */
+  getToolbarContainerRef() {
+    return this.toolbarContainerRef;
+  }
+  /**
+   * Render the code block editor toolbar element or copy element.
+   *
+   * @returns {HTMLElement} - The code block operate action button.
+   */
+  render() {
+    return (h(Fragment, null,
+      h("div", { part: "editor-toolbar", contenteditable: false, class: {
+          'editor-toolbar': !this.readOnly,
+          'copy-button-container': this.showCopyButton && this.readOnly,
+        }, ref: (node) => (this.toolbarContainerRef = node) },
+        this.renderEditorToolbar(),
+        this.copyButtonRenderer.render()),
+      this.contentRenderer.render()));
+  }
+  /**
+   * Render a language select and delete button.
+   *
+   * @returns {Nullable<HTMLElement>} The editor toolbar container element.
+   */
+  renderEditorToolbar() {
+    var _a, _b;
+    if (!this.readOnly) {
+      return (h(Fragment, null,
+        h("vega-input-select", { source: this.languageOptions, value: (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.language) !== null && _b !== void 0 ? _b : '', disabled: this.disabled, placeholder: this.translationSlimmer.t('Select Language'), size: "small", vegaDropdownProps: this.languageDropdownProps, exportparts: "select-container, selected-box, placeholder, toggle-icon-container, toggle-icon", ref: this.handleLanguageChange }),
+        h("vega-button-circle", { key: "delete-button", disabled: this.disabled, label: this.translationSlimmer.t('Delete Code'), icon: VegaInternalIconManager.getIconKey('trash-can'), iconColor: "text-secondary", variant: "icon-only", size: "extra-small", ref: this.handleDeleteClick })));
+    }
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'trash-can': trashCan,
+  });
+})();
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockRenderer.prototype, "readOnly", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockRenderer.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockRenderer.prototype, "showCopyButton", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockRenderer.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockRenderer.prototype, "contentRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockRenderer.prototype, "valueController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockRenderer.prototype, "removeEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockRenderer.prototype, "translationSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockRenderer.prototype, "copyButtonRenderer", void 0);

package/dist/collection/components/vega-code-block/test/code-block-range.test.js

@@ -0,0 +1,81 @@
+import { mockRange } from '../../../polyfill/test-polyfill/unit/range';
+import { CodeBlockRange } from '../slimmers/controllers/code-block-range';
+const mockCodeNodes = [
+  { text: 'const', key: '0' },
+  { text: ' ', key: '1' },
+  { text: 'date', key: '2' },
+  { text: '=', key: '3' },
+  { text: 'new', key: '4' },
+  { text: ' ', key: '5' },
+  { text: 'Date()', key: '6' },
+];
+describe('CodeBlockRange', () => {
+  it('initial', () => {
+    const container = document.createElement('div');
+    const range = new CodeBlockRange(container);
+    expect(range).toBeDefined();
+    expect(range['codeContainerRef']).toEqual(container);
+  });
+  it('method updateRange should work properly', () => {
+    const container = document.createElement('div');
+    let range = new CodeBlockRange(container);
+    const startContainer = document.createElement('span');
+    const startOffset = 0;
+    range = range.updateRange(startContainer, startOffset, []);
+    expect(range.selectedText).toEqual('');
+    range = range.updateRange(startContainer, startOffset, [], 'test');
+    expect(range.selectedText).toEqual('test');
+  });
+  it('method getCodeContent should work properly', () => {
+    const container = document.createElement('div');
+    const range = new CodeBlockRange(container);
+    const content = range['getCodeContent'](mockCodeNodes);
+    expect(content).toEqual('const date=new Date()');
+  });
+  it('method getContentOffset should work properly', () => {
+    const container = document.createElement('code');
+    container.innerHTML =
+      '<span data-index="0">const</span><span data-index="1"> </span><span data-index="2">date</span>';
+    let range = new CodeBlockRange(container);
+    range = range.updateRange(container.querySelector('span:last-child').firstChild, 1, mockCodeNodes);
+    expect(range['getContentOffset'](container.querySelector('span:last-child').firstChild, 1, mockCodeNodes)).toEqual(7);
+    expect(range['getContentOffset'](container, 1, mockCodeNodes)).toEqual(5);
+  });
+  it('method createNextRange should work properly', () => {
+    const container = document.createElement('code');
+    container.innerHTML = '<span data-index="0">const</span><span data-index="1"> </span>';
+    let range = new CodeBlockRange(container);
+    range = range.updateRange(container.querySelector('span').firstChild, 6, mockCodeNodes);
+    spyOn(mockRange, 'setStart');
+    range.createNativeRange(mockCodeNodes);
+    expect(mockRange.setStart).toHaveBeenCalledWith(container.querySelector('span[data-index="1"]').firstChild, 1);
+    container.innerHTML = '<span data-index="0">1</span>';
+    range.createNativeRange([{ key: '0', text: '1' }]);
+    expect(mockRange.setStart).toHaveBeenCalledWith(container.querySelector('span').firstChild, 1);
+    range.updateContentOffset(1);
+    container.innerHTML = '<span data-index="0">\n</span><span data-index="1">1</span>';
+    range.createNativeRange([
+      { key: '0', text: '\n' },
+      { key: '1', text: ' ' },
+    ]);
+    expect(mockRange.setStart).toHaveBeenCalledWith(container.querySelector('span:last-child').firstChild, 0);
+    range.updateContentOffset(2);
+    container.innerHTML = '<span data-index="0">1</span><span data-index="1">\n</span>';
+    range.createNativeRange([
+      { key: '0', text: '1' },
+      { key: '1', text: '\n' },
+    ]);
+    expect(mockRange.setStart).toHaveBeenCalledWith(container.querySelector('span:last-child').firstChild, 1);
+  });
+  it('method update content offset should work properly', () => {
+    const container = document.createElement('code');
+    container.innerHTML = '<span data-index="0">const</span><span data-index="1"> </span>';
+    let range = new CodeBlockRange(container);
+    range = range.updateRange(container.querySelector('span:last-child').firstChild, 1, mockCodeNodes);
+    expect(range.contentOffset).toEqual(6);
+    range.updateContentOffset(4);
+    expect(range.contentOffset).toEqual(4);
+    range = range.updateRange(container.querySelector('span:last-child').firstChild, 0, mockCodeNodes);
+    expect(range.contentOffset).toEqual(5);
+  });
+});

package/dist/collection/components/vega-code-block/types.js

@@ -0,0 +1,10 @@
+export var CodeLanguage;
+(function (CodeLanguage) {
+  CodeLanguage["CSS"] = "css";
+  CodeLanguage["HTML"] = "html";
+  CodeLanguage["JavaScript"] = "js";
+  CodeLanguage["JSX"] = "jsx";
+  CodeLanguage["Plain Text"] = "plainText";
+  CodeLanguage["TypeScript"] = "ts";
+  CodeLanguage["TSX"] = "tsx";
+})(CodeLanguage || (CodeLanguage = {}));

package/dist/collection/components/vega-code-block/vega-code-block.css

@@ -0,0 +1,160 @@
+/* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
+/**
+ * Deprecated. Not for use in new websites.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
+ */
+:host {
+  display: block;
+  border-radius: 2px;
+  background-color: rgba(var(--v-bg-secondary, 245, 247, 247, 1));
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+:host code {
+  display: block;
+  box-sizing: border-box;
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+  text-align: left;
+  font-family: "Roboto Mono";
+  font-weight: 400;
+  line-height: 22px;
+  font-size: 16px;
+  white-space: pre-wrap;
+  min-height: 22px;
+  tab-size: 2px;
+  word-break: break-word;
+}
+:host code:focus-visible {
+  outline: none;
+}
+:host .editor-toolbar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 12px;
+  border: 1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));
+  border-top-width: 0px;
+  border-left-width: 0px;
+  border-right-width: 0px;
+  margin-bottom: 12px;
+  user-select: none;
+}
+:host .editor-toolbar vega-input-select {
+  width: auto;
+  min-width: 161px;
+}
+
+:host(.show-line-number) code .v-code-line-number::before {
+  content: attr(data-mark);
+  width: var(--v-code-line-number-width);
+  margin-left: var(--v-code-line-number-ml);
+  padding-right: 16px;
+  text-align: right;
+  user-select: none;
+  font-style: normal;
+  word-break: keep-all;
+  color: rgba(var(--v-text-secondary, 107, 116, 125, 1));
+  display: inline-block;
+}
+:host(.show-line-number) code {
+  padding-left: var(--v-code-block-pl);
+}
+
+:host::part(select-container) {
+  padding-top: 0px;
+  padding-bottom: 0px;
+  padding-left: 8px;
+  padding-right: 8px;
+  border-radius: 4px;
+}
+:host::part(selected-box), :host::part(placeholder) {
+  font-size: 14px;
+  user-select: none;
+}
+:host::part(toggle-icon-container) {
+  width: 12px;
+  height: 12px;
+  line-height: 12px;
+}
+:host::part(toggle-icon) {
+  width: 12px;
+  height: 12px;
+}
+
+:host(.readonly) .copy-button-container {
+  position: relative;
+}
+:host(.readonly) .copy-button-container .copy-code-button {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+}
+
+:host(.disabled:not(.highlight)) code {
+  color: rgba(var(--v-text-input-disabled, 107, 116, 125, 1));
+}
+
+:host(.disabled.highlight) {
+  opacity: 0.5;
+}
+
+:host(.focus:not(.disabled, .readonly)) {
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
+}
+
+:host(.highlight) code {
+  color: var(--code-neutral);
+}
+
+code .comment,
+code .prolog,
+code .doctype,
+code .cdata {
+  color: var(--code-gray);
+  font-style: italic;
+}
+code .namespace {
+  color: var(--code-neutral-7);
+}
+code .string,
+code .attr-value,
+code .builtin {
+  color: var(--code-green);
+}
+code .punctuation,
+code .operator,
+code .attr-equals {
+  color: var(--code-gray);
+}
+code .entity,
+code .url,
+code .symbol,
+code .number,
+code .boolean,
+code .variable,
+code .constant,
+code .property,
+code .regex,
+code .inserted {
+  color: var(--code-neutral-8);
+}
+code .atrule,
+code .function,
+code .attr-name {
+  color: var(--code-orange);
+}
+code .deleted {
+  color: var(--code-neutral);
+}
+code .function-variable {
+  color: #ff0000;
+}
+code .tag,
+code .selector,
+code .keyword {
+  color: var(--code-purple);
+}