@heartlandone/vega 2.0.0-temp-test-0.2 → 2.0.0

package/dist/cjs/vega-text.cjs.entry.js

@@ -0,0 +1,200 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1299d729.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-58eee093.js');
+const injectVegaGlobalSlimmer = require('./inject-vega-global-slimmer-c81bb784.js');
+const vegaSlimmer = require('./vega-slimmer-af488dc3.js');
+const ui = require('./ui-23cd9abb.js');
+const pageResizeObserverSlimmer = require('./pageResizeObserverSlimmer-9751395d.js');
+require('./log-5d8066e0.js');
+require('./breakpoints-97c1f5c8.js');
+require('./ui-ef822fe1.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;
+};
+/** The vega-text tooltip renderer slimmer */
+class VegaTextTooltipRenderer extends pageResizeObserverSlimmer.PageResizeObserverSlimmer {
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-text-with-long-text-change-screen-size}
+   */
+  constructor() {
+    /* eslint-disable jsdoc/require-jsdoc*/
+    super({
+      callback: /* istanbul ignore next */ () => {
+        if (this.overflow === 'ellipsis') {
+          if (this.tooltipRef) {
+            this.tooltipRef.innerText = this.content;
+          }
+          void this.handleTooltip();
+        }
+      },
+      isDeferred: true,
+    });
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-text-with-long-text}
+     * @see{module:vega-text-with-long-text-change-screen-size}
+     */
+    /* istanbul ignore next */
+    this.handleTooltip = async () => {
+      if (ui.isTextWrapped(this.host)) {
+        const tooltip = this.createTooltip();
+        void tooltip.componentOnReady().then(() => {
+          void this.updateTooltipDisplayText();
+        });
+      }
+      else {
+        if (this.tooltipRef && this.tooltipRef.classList.contains('hydrated')) {
+          this.host.innerText = this.content;
+          this.tooltipRef.remove();
+          this.tooltipRef = null;
+        }
+      }
+    };
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-text-with-long-text}
+     * @see{module:vega-text-with-long-text-change-screen-size}
+     */
+    /* istanbul ignore next */
+    this.createTooltip = () => {
+      var _a;
+      this.tooltipRef = this.host.querySelector('vega-tooltip');
+      if (!this.tooltipRef) {
+        this.tooltipRef = document.createElement('vega-tooltip');
+        this.tooltipRef.text = this.content;
+        this.tooltipRef.innerText = this.content;
+        this.tooltipRef.placement = (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.placement;
+        this.host.replaceChildren(this.tooltipRef);
+      }
+      return this.tooltipRef;
+    };
+    /** Calculate the number of displayed characters according to the screen width and font size.
+     * In order to avoid errors, recalculate whether the vega-tooltip displays a line break.
+     * If it has, gradually reduce the number of calculated characters until there is no line break.
+     * If there is no newline yet, incrementally increase the counted number of characters until the newline.
+     * The below method is e2e-test covered in
+     * @see{module:vega-text-with-long-text}
+     * @see{module:vega-text-with-long-text-change-screen-size}
+     */
+    /* istanbul ignore next */
+    this.updateTooltipDisplayText = async () => {
+      let fontSize = parseFloat(ui.getElementComputedStyle(this.host, 'font-size'));
+      fontSize = isNaN(fontSize) ? VegaTextTooltipRenderer.DEFAULT_FONT_SIZE : fontSize;
+      let textLength = Math.floor(this.host.getBoundingClientRect().width / Math.floor(fontSize / 2));
+      if (ui.isTextWrapped(this.tooltipRef)) {
+        while (ui.isTextWrapped(this.tooltipRef)) {
+          textLength = textLength - 1;
+          this.tooltipRef.textContent = this.truncateStringWithEllipsis(textLength);
+        }
+      }
+    };
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-text-with-long-text}
+     * @see{module:vega-text-with-long-text-change-screen-size}
+     */
+    /* istanbul ignore next */
+    this.truncateStringWithEllipsis = (textLength) => {
+      return this.content.substring(0, textLength) + '...';
+    };
+    this.initTextContent = () => {
+      this.content = this.host.textContent;
+    };
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]{@link VegaText.componentDidLoad}
+   */
+  componentDidLoad() {
+    this.initTextContent();
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-text-with-tooltip-placement}
+   */
+  /* istanbul ignore next */
+  /** Watching the tooltip prop. */
+  watchTooltip() {
+    var _a;
+    if (this.tooltipRef) {
+      this.tooltipRef.placement = (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.placement;
+    }
+  }
+}
+VegaTextTooltipRenderer.DEFAULT_FONT_SIZE = 16;
+__decorate$1([
+  vegaSlimmer.MapToComponentField()
+], VegaTextTooltipRenderer.prototype, "host", void 0);
+__decorate$1([
+  vegaSlimmer.MapToComponentField()
+], VegaTextTooltipRenderer.prototype, "tooltip", void 0);
+__decorate$1([
+  vegaSlimmer.MapToComponentField()
+], VegaTextTooltipRenderer.prototype, "overflow", void 0);
+__decorate$1([
+  vegaSlimmer.MapToComponentMethod('componentDidLoad')
+], VegaTextTooltipRenderer.prototype, "componentDidLoad", null);
+__decorate$1([
+  vegaSlimmer.MapToComponentMethod('watchTooltip')
+], VegaTextTooltipRenderer.prototype, "watchTooltip", null);
+
+const vegaTextCss = ":host{display:block}:host(.vega-container-text-newline){overflow-wrap:break-word}:host(.vega-container-text-ellipsis){word-break:break-all}";
+
+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 VegaText = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    this.tooltipRenderer = new VegaTextTooltipRenderer();
+    /**
+     * Specifies the behavior of text when it exceeds the
+     *    available space within its container.
+     */
+    this.overflow = 'newline';
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-text-with-tooltip-placement}
+   */
+  /* istanbul ignore next */
+  /** Watching the tooltip prop. */
+  watchTooltip() {
+  }
+  componentDidLoad() {
+  }
+  render() {
+    return (index.h(index.Host, { class: {
+        'vega-container-text-ellipsis': this.overflow === 'ellipsis',
+        'vega-container-text-newline': this.overflow === 'newline',
+      } }, index.h("slot", null)));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "tooltip": ["watchTooltip"]
+  }; }
+};
+__decorate([
+  injectVegaGlobalSlimmer.InjectVegaGlobalSlimmer()
+], VegaText.prototype, "globalSlimmers", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaText.prototype, "tooltipRenderer", void 0);
+VegaText.style = vegaTextCss;
+
+exports.vega_text = VegaText;

package/dist/cjs/vega-textarea.cjs.entry.js

@@ -2,25 +2,29 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4c1d8251.js');
-const featureFlagController = require('./featureFlagController-3b23a9cb.js');
+const index = require('./index-1299d729.js');
 const minStringLengthRule = require('./minStringLengthRule-66ee0c3c.js');
 const requiredFieldRule = require('./requiredFieldRule-56f10b25.js');
-const component = require('./component-a411c045.js');
-const vegaSlimmer = require('./vega-slimmer-281f0079.js');
-const placeholder = require('./placeholder-cb6d37ad.js');
-const formFieldControllerSlimmer = require('./formFieldControllerSlimmer-57d1a405.js');
+const component = require('./component-b50f0483.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-58eee093.js');
+const injectVegaGlobalSlimmer = require('./inject-vega-global-slimmer-c81bb784.js');
+const formFieldControllerSlimmer = require('./formFieldControllerSlimmer-69ea8396.js');
+const staticSubjectTitle = require('./staticSubjectTitle-b02c917c.js');
+const changeManager = require('./changeManager-1dd5ac2a.js');
+const eventEmitSlimmer = require('./eventEmitSlimmer-f0546f9d.js');
+const internalVegaEventManager = require('./internalVegaEventManager-cfb1df83.js');
+const childNodesEventPreventSlimmer = require('./childNodesEventPreventSlimmer-4b96b18b.js');
 require('./log-5d8066e0.js');
-require('./map-to-component-method-ec6546f1.js');
+require('./vega-slimmer-af488dc3.js');
 require('./string-21427167.js');
-require('./changeManager-91f1f24a.js');
-require('./observer-126f19d0.js');
-require('./ui-97068bc7.js');
-require('./misc-3d30df91.js');
-require('./dynamic-slimmer-e289eb0b.js');
-require('./pageResizeObserverSlimmer-a81a52b1.js');
-require('./breakpoints-89055ccc.js');
-require('./breakpoints-b5eab9c2.js');
+require('./ui-23cd9abb.js');
+require('./misc-0197689b.js');
+require('./dynamic-slimmer-c718b7d9.js');
+require('./pageResizeObserverSlimmer-9751395d.js');
+require('./breakpoints-97c1f5c8.js');
+require('./ui-ef822fe1.js');
+
+const vegaTextareaCss = ":host{display:inline-block;width:100%;text-align:left}:host .vega-textarea-container{display:flex;position:relative;width:100%;resize:vertical;box-sizing:border-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;overflow:hidden;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));min-height:50px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-textarea-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 .vega-textarea-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 .vega-textarea-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host textarea{display:block;position:relative;padding-top:12px;padding-right:16px;padding-bottom:32px;padding-left:16px;width:100%;resize:vertical;box-sizing:border-box;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border-radius:8px;outline:2px solid transparent;outline-offset:2px;border-style:none;overflow:auto;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));min-height:48px}@media screen and (min-width: 768px) and (max-width: 1023px){:host textarea{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 textarea{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 textarea{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host vega-field-label{margin-bottom:8px}:host .vega-textarea-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 .vega-textarea-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 .vega-textarea-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 .vega-textarea-counter{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .vega-textarea-counter.counter-exceed-max-length{background-color:rgba(var(--v-bg-textarea-counter-exceed-max-length, 214, 46, 81))}:host textarea::placeholder{color:rgba(var(--v-text-input-placeholder, 176, 180, 181, 1))}:host .vega-error{display:inline-block;padding-left:8px;padding-right:8px;padding-top:12px;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))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .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){:host .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){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host vega-text{padding-left:8px;padding-right:8px;padding-top:12px;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 .vega-textarea-container:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}:host .vega-textarea-container:focus-within{border:1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));box-shadow:0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25))}:host .vega-textarea-container.error{border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}:host .vega-textarea-container.error:hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}:host .vega-textarea-container.error:focus-within{border:1px solid rgba(var(--v-border-input-field-danger-focus, 233, 71, 104, 1));box-shadow:0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25))}:host(.disabled) textarea{color:rgba(var(--v-text-input-disabled, 107, 116, 125, 1));background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}:host(.disabled) .vega-textarea-container{border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}:host .vega-hidden{display:none}";
 
 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;
@@ -36,8 +40,10 @@ const VegaTextarea = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.vegaChange = index.createEvent(this, "vegaChange", 7);
-    this.vegaValidate = index.createEvent(this, "vegaValidate", 7);
+    this.change = index.createEvent(this, "change", 7);
     this.vegaBlur = index.createEvent(this, "vegaBlur", 7);
+    this.blur = index.createEvent(this, "blur", 7);
+    this.globalSlimmers = {};
     this.formFieldController = new formFieldControllerSlimmer.FormFieldControllerSlimmer({
       propertyRules: [
         {
@@ -53,12 +59,15 @@ const VegaTextarea = class {
           ruleFactory: (maxLength) => maxLength ? new minStringLengthRule.MaxStringLengthRule({ maxStrLength: maxLength }) : null,
         },
       ],
-      inputContainerSelector: '.vega-textarea-container',
-      touchableAreaSelector: 'textarea',
       validationRulesName: 'validationRules',
       defaultValue: '',
       attributeGetter: (propertyName) => this[propertyName],
+      inputContainerGetter: () => this.inputContainerRef,
+      touchableAreaGetter: () => [this.textareaRef],
     });
+    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaTextarea, internalVegaEventManager.VegaChange);
+    this.blurEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaTextarea, internalVegaEventManager.VegaBlur);
+    this.textareaEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([internalVegaEventManager.VegaChange], () => this.inputContainerRef);
     this.currentCharCount = 0;
     /**
      * Specifies a placeholder string that displays as a
@@ -125,7 +134,7 @@ const VegaTextarea = class {
      */
     this.validationRules = [];
     this.renderTextareaContainer = () => {
-      return (index.h("div", { class: "vega-textarea-container" }, index.h("textarea", { rows: 4, placeholder: this.placeholder, disabled: this.disabled, required: this.required, ref: this.setTextareaRef, maxLength: this.maxLength, minLength: this.minLength, value: this.value, onBlur: this.handleTextareaBlur, "aria-label": this.label || 'No label defined' }), this.showCounter && this.renderCharacterCounter()));
+      return (index.h("div", { class: "vega-textarea-container", ref: (e) => (this.inputContainerRef = e) }, index.h("textarea", { rows: 4, placeholder: this.placeholder, disabled: this.disabled, required: this.required, ref: this.setTextareaRef, maxLength: this.maxLength, minLength: this.minLength, value: this.value, onBlur: this.handleTextareaBlur, "aria-label": this.label || 'No label defined' }), this.showCounter && this.renderCharacterCounter()));
     };
     this.renderHintMessage = () => {
       return index.h("vega-text", null, this.hint);
@@ -152,21 +161,25 @@ const VegaTextarea = class {
     this.inputFocus = () => {
       this.textareaRef.focus();
     };
-    this.handleTextareaBlur = () => {
-      this.vegaBlur.emit();
+    this.handleTextareaBlur = (e) => {
+      this.blurEventEmitter.emit(undefined, e);
     };
     this.isExceedMaxLength = (value, maxLength) => {
       return maxLength != null ? value.length > maxLength : false;
     };
   }
   watchValue(value) {
-    this.vegaChange.emit(value);
+    this.changeEventEmitter.emit(value);
     if (this.textareaRef.value !== this.value) {
       this.textareaRef.value = this.value;
     }
     if (value) {
       this.currentCharCount = value.length;
     }
+    changeManager.ChangeManager.notify(staticSubjectTitle.FORM_ELEMENT_VALUE_CHANGE, {
+      host: this.host,
+      detail: value,
+    });
   }
   watchValidationRules() {
   }
@@ -182,17 +195,9 @@ const VegaTextarea = class {
     this.value = this.textareaRef.value;
     this.currentCharCount = this.value.length;
   }
-  /** Invoke this method to validate the input in the text area.
-   *
-   * @deprecated This property will be removed soon
-   */
-  async valid(showErrorText = true) {
-    return placeholder.methodPlaceholder(showErrorText);
-  }
   render() {
     return component.sanitizeVegaComponent(index.h(index.Host, { class: {
-        'disabled': this.disabled,
-        'v-inline-block v-w-full': featureFlagController.FeatureFlag.isEnabled('VEGA_FORM_FIELD.CHANGE_BLOCK_TO_INLINE_BLOCK'),
+        disabled: this.disabled,
       } }, this.renderLabelDom(), this.renderTextareaContainer(), this.hint && this.renderHintMessage()), this.host);
   }
   renderLabelDom() {
@@ -205,7 +210,20 @@ const VegaTextarea = class {
   }; }
 };
 __decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+  injectVegaGlobalSlimmer.InjectVegaGlobalSlimmer()
+], VegaTextarea.prototype, "globalSlimmers", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTextarea.prototype, "formFieldController", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaTextarea.prototype, "changeEventEmitter", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaTextarea.prototype, "blurEventEmitter", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaTextarea.prototype, "textareaEventPrevent", void 0);
+VegaTextarea.style = vegaTextareaCss;
 
 exports.vega_textarea = VegaTextarea;