@heartlandone/vega 2.49.1 → 2.50.0-RTE-preview

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

@@ -0,0 +1,67 @@
+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 { h } from '@stencil/core';
+import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
+import copy from '../../assets/copy';
+import { VegaClick } from '../../../../helpers/event-manager/event-id/vega-event-id';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+export class VegaCodeBlockCopyButtonRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Copy the code.
+     *
+     * @param {HTMLVegaButtonCircleElement} node - The copy button.
+     */
+    this.handleCopyClick = (node) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaClick, async () => {
+        var _a;
+        const content = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.code) || '';
+        if (content && globalThis.navigator && globalThis.navigator.clipboard) {
+          clearTimeout(this.updateLabelTimer);
+          await globalThis.navigator.clipboard.writeText(content);
+          const oldTooltip = node.label;
+          node.label = this.translationSlimmer.t('Copied');
+          this.updateLabelTimer = setTimeout(() => {
+            if (node) {
+              node.label = oldTooltip;
+            }
+          }, VegaCodeBlockCopyButtonRenderer.RESET_TOOLTIP_TIME);
+        }
+      });
+    };
+  }
+  /**
+   * Render a copy button.
+   *
+   * @returns {Nullable<HTMLElement>} The button element.
+   */
+  render() {
+    if (this.showCopyButton && this.readOnly) {
+      return (h("vega-button-circle", { key: "copy-button", label: this.translationSlimmer.t('Copy Code'), class: "copy-code-button", icon: VegaInternalIconManager.getIconKey('copy'), iconColor: "text-secondary", variant: "icon-only", size: "extra-small", ref: this.handleCopyClick }));
+    }
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    copy: copy,
+  });
+})();
+VegaCodeBlockCopyButtonRenderer.RESET_TOOLTIP_TIME = 1000;
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockCopyButtonRenderer.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockCopyButtonRenderer.prototype, "readOnly", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockCopyButtonRenderer.prototype, "showCopyButton", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCodeBlockCopyButtonRenderer.prototype, "translationSlimmer", void 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/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,158 @@
+/* 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;
+}
+: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;
+  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: 0px;
+}
+
+: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);
+}