@globalpayments/vega 2.33.0 → 2.34.1

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-editor-toolbar-button/vega-rich-text-editor-toolbar-button.js

@@ -0,0 +1,246 @@
+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 { Element, Component, Host, h, Prop, Event } from '@stencil/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
+import { sanitizeVegaComponent } from '../../../utils/component';
+import { createEventEmitSlimmer, } from '../../../helpers/event-manager/slimmers/event-emit-slimmer';
+import { VegaClick } from '../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaRichTextEditorToolbarButtonRenderer } from './slimmers/renderers/vega-rich-text-editor-toolbar-button-renderer';
+import { ChildNodesEventPreventSlimmer } from '../../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
+/**
++ * @vegaVersion 2.34.0
++ */
+/**
+ * This is an internal used component and shouldn't be used by clients,
+ *    it doesn't show up in storybook either.
+ */
+export class VegaRichTextEditorToolbarButton {
+  constructor() {
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.clickEventEmitter = createEventEmitSlimmer(VegaRichTextEditorToolbarButton, VegaClick);
+    this.eventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host, {
+      useCapture: true,
+      customPreventHandle: (e) => {
+        if (this.disabled) {
+          e.stopImmediatePropagation();
+        }
+      },
+    });
+    this.renderer = new VegaRichTextEditorToolbarButtonRenderer();
+    /**
+     * Specifies whether the rich text editor toolbar button element is disabled.
+     *
+     * @vegaVersion 2.34.0
+     */
+    this.disabled = false;
+    /**
+     * Specifies whether the rich text editor toolbar button element is selected.
+     *
+     * @vegaVersion 2.34.0
+     */
+    this.selected = false;
+    /**
+     * Specifies whether the rich text editor toolbar button element is showArrowIcon.
+     *
+     * @vegaVersion 2.34.0
+     */
+    this.showArrowIcon = false;
+    /**
+     * Specifies whether the toolbar button in the rich text editor is represented by an icon.
+     *
+     * @vegaVersion 2.34.0
+     */
+    this.icon = '';
+    /**
+     * Specifies the color of the toolbar button icon in the rich text editor.
+     *
+     * @vegaVersion 2.34.0
+     */
+    this.iconColor = 'text-primary';
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
+  }
+  static get is() { return "vega-rich-text-editor-toolbar-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-rich-text-editor-toolbar-button.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-rich-text-editor-toolbar-button.css"]
+  }; }
+  static get properties() { return {
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.34.0"
+          }],
+        "text": "Specifies whether the rich text editor toolbar button element is disabled."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "selected": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.34.0"
+          }],
+        "text": "Specifies whether the rich text editor toolbar button element is selected."
+      },
+      "attribute": "selected",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "showArrowIcon": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.34.0"
+          }],
+        "text": "Specifies whether the rich text editor toolbar button element is showArrowIcon."
+      },
+      "attribute": "show-arrow-icon",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.34.0"
+          }],
+        "text": "Specifies whether the toolbar button in the rich text editor is represented by an icon."
+      },
+      "attribute": "icon",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "iconColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "TextColorsTokenType",
+        "resolved": "\"text-primary\" | \"text-secondary\" | \"text-inverted-primary\" | \"text-inverted-secondary\" | \"text-black\" | \"text-white\" | \"text-brand\" | \"text-danger-link\" | \"text-danger-link-hover\" | \"text-danger-link-active\" | \"text-danger-link-focus\" | \"text-danger-link-visited\" | \"text-disabled\" | \"text-error\" | \"text-input-disabled\" | \"text-input-placeholder\" | \"text-link\" | \"text-link-hover\" | \"text-link-active\" | \"text-link-focus\" | \"text-link-visited\" | \"text-on-action\" | \"text-on-danger\" | \"text-on-disabled\" | \"text-sidebar-link\" | \"text-sidebar-link-hover\" | \"text-sidebar-link-selected\" | \"text-site-footer-link\" | \"text-site-footer-link-hover\" | \"text-site-footer-link-active\" | \"text-success\" | \"text-inverted-success\" | \"text-accent1-primary\" | \"text-accent2-primary\" | \"text-accent3-primary\" | \"text-accent4-primary\" | \"text-accent5-primary\" | \"text-accent6-primary\" | \"text-accent7-primary\" | \"text-accent8-primary\" | \"text-accent9-primary\" | \"text-accent10-primary\"",
+        "references": {
+          "TextColorsTokenType": {
+            "location": "import",
+            "path": "../../../types/design-token.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.34.0"
+          }],
+        "text": "Specifies the color of the toolbar button icon in the rich text editor."
+      },
+      "attribute": "icon-color",
+      "reflect": false,
+      "defaultValue": "'text-primary'"
+    }
+  }; }
+  static get events() { return [{
+      "method": "vegaClick",
+      "name": "vegaClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.34.0"
+          }],
+        "text": "An event emitter notifying the click event of the button."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "click",
+      "name": "click",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.34.0"
+          }],
+        "text": "An event emitter notifying the click event of the button."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+}
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaRichTextEditorToolbarButton.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextEditorToolbarButton.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextEditorToolbarButton.prototype, "clickEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextEditorToolbarButton.prototype, "eventPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextEditorToolbarButton.prototype, "renderer", void 0);

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-editor.css

@@ -0,0 +1,264 @@
+/* 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;
+}
+
+:host vega-field-label {
+  margin-bottom: 8px;
+}
+
+:host vega-text {
+  margin-bottom: 16px;
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0px;
+  color: rgba(var(--v-text-secondary, 107, 116, 125, 1));
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host vega-text {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host vega-text {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host vega-text {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0px;
+  }
+}
+
+:host .rich-text-editor-container {
+  display: flex;
+  box-sizing: content-box;
+  position: relative;
+  box-sizing: content-box;
+  background-color: rgba(var(--v-bg-primary, 252, 252, 252, 1));
+  border: 1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));
+  border-radius: 8px;
+  font-family: "Inter", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0px;
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+  margin-top: 12px;
+  overflow: auto;
+  resize: vertical;
+  padding-top: 12px;
+  padding-right: 16px;
+  padding-bottom: 32px;
+  padding-left: 16px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host .rich-text-editor-container {
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host .rich-text-editor-container {
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host .rich-text-editor-container {
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+:host .rich-text-editor-container:hover {
+  border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
+}
+:host .rich-text-editor-container:focus-within {
+  border: 1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
+  border: 1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));
+}
+:host .rich-text-editor-container.disabled {
+  background-color: rgba(var(--v-bg-secondary, 245, 247, 247, 1));
+  border: 1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));
+}
+:host .rich-text-editor-container.disabled:hover, :host .rich-text-editor-container.disabled:focus-within {
+  border: 1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));
+}
+:host .rich-text-editor-container.disabled:focus-within {
+  outline: none;
+}
+:host .rich-text-editor-container.error {
+  border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
+}
+:host .rich-text-editor-container.error:hover {
+  border: 1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1));
+}
+:host .rich-text-editor-container.error:focus-within {
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 2px;
+  border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
+}
+:host .rich-text-editor-container .text-editor-counter {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  display: flex;
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  border-radius: 4px;
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0px;
+  color: rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));
+  background-color: rgba(var(--v-bg-textarea-count, 4, 4, 28, 0.6));
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host .rich-text-editor-container .text-editor-counter {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host .rich-text-editor-container .text-editor-counter {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host .rich-text-editor-container .text-editor-counter {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0px;
+  }
+}
+:host .rich-text-editor-container .text-editor-counter.counter-exceed-max-length {
+  background-color: rgba(var(--v-bg-textarea-counter-exceed-max-length, 214, 46, 81));
+}
+
+.toolbar-btn-group {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.toolbar-btn-group > *:not(:first-child):not(:last-child) ::part(rich-text-editor-toolbar-button) {
+  border-radius: 0px;
+}
+.toolbar-btn-group > *:first-child:not(:last-child) ::part(rich-text-editor-toolbar-button) {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+.toolbar-btn-group > *:last-child:not(:first-child) ::part(rich-text-editor-toolbar-button) {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.toolbar-btn-group > *:not(:first-child) ::part(rich-text-editor-toolbar-button) {
+  margin-left: -1px;
+}
+.toolbar-btn-group .toolbar-btn-color-preview-box {
+  display: flex;
+  border: 1px solid rgba(var(--v-border-chip, 205, 209, 211, 1));
+  box-sizing: border-box;
+  border-radius: 4px;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+  margin-left: 6px;
+}
+.toolbar-btn-group .toolbar-btn-link-wrapper {
+  position: relative;
+}
+.toolbar-btn-group .toolbar-btn-link-wrapper vega-rich-text-link-editor {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.vega-error {
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0px;
+  color: rgba(var(--v-text-error, 189, 41, 71, 1));
+  display: block;
+  margin-top: 12px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .vega-error {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  .vega-error {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  .vega-error {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0px;
+  }
+}
+
+.vega-hidden {
+  display: none;
+}