bromcom-ui 2.3.70 → 2.3.71

package/dist/bromcom-ui/bcm-textarea.entry.js

@@ -1,21 +1,9 @@
-import { r as registerInstance, e as createEvent, h, f as Host } from './index-dbc63c66.js';
-import { G as Generate } from './generate-8e440fc4.js';
-import './_commonjsHelpers-2088bffa.js';
-import { c as classnames } from './index-55174f2a.js';
-import { B as Bcm } from './bcm-ad02f9c9.js';
-import { C as CaptionTemplate } from './caption-template-2d4ffc88.js';
-import { I as InputTemplate } from './input-template-487d3243.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
 
-var ResizeType;
-(function (ResizeType) {
-  ResizeType["none"] = "none";
-  ResizeType["both"] = "both";
-  ResizeType["horizontal"] = "horizontal";
-  ResizeType["vertical"] = "vertical";
-  ResizeType["initial"] = "initial";
-  ResizeType["inherit"] = "inherit";
-})(ResizeType || (ResizeType = {}));
+const textareaCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:inline-block;width:100%;margin:0 0 8px 0}:host(.hidden){display:none}.textarea-wrapper{width:256px}.textarea-wrapper.full-width{width:100%}.textarea-wrapper:hover .clear-button{opacity:1}.textarea-container{position:relative;width:100%;border:1px solid var(--bcm-color-grey-5);border-radius:2px}.textarea-container.empty .clear-button{display:none}.textarea-container.focused:not(.disabled){outline:none;border-color:var(--bcm-color-prime-blue-5);box-shadow:0px 0px 4px var(--bcm-color-prime-blue-6)}.textarea-container:hover:not(:disabled){border-color:var(--bcm-color-prime-blue-6)}.textarea-container textarea{resize:vertical;display:flex;flex:1 1 auto;align-items:center;color:var(--bcm-color-grey-8);width:100%;background-color:var(--bcm-color-grey-1);border:none;border-radius:2px;box-shadow:none;font-family:\"Roboto\", sans-serif;-webkit-appearance:none;box-sizing:border-box}.textarea-container textarea::-webkit-search-decoration,.textarea-container textarea::-webkit-search-cancel-button,.textarea-container textarea::-webkit-search-results-button,.textarea-container textarea::-webkit-search-results-decoration{-webkit-appearance:none}.textarea-container textarea::placeholder{color:var(--bcm-color-grey-6);user-select:none}.textarea-container textarea:focus:not(:disabled){outline:none;border-color:none;box-shadow:none}.textarea-container textarea:hover:not(:disabled){border-color:none}.textarea-container textarea:disabled{background-color:var(--bcm-color-grey-3);cursor:not-allowed}.textarea-container textarea.clearable{padding-right:32px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.label{display:flex;flex-direction:column;color:var(--bcm-color-grey-9);margin-bottom:4px}.caption-area{min-height:20px;display:flex;flex-direction:row;justify-content:space-between}.input-caption{display:block}.clear-button{position:absolute;opacity:0;right:10px;top:7px;display:inline-flex;align-items:center;border:none;background:none;padding:0;cursor:pointer}.clear-button:focus{outline:none}.textarea-footer{display:flex;justify-content:space-between;margin-bottom:8px;min-height:20px}.textarea-footer .count{color:var(--bcm-color-grey-7);margin-left:4px}.textarea-footer .count:only-child{margin-left:auto}.size-large{padding:7px 12px;min-height:38px}.size-large~.clear-button{top:12px}.size-medium{padding:4px 12px;min-height:30px}.size-medium~.clear-button{top:7px}.size-small{padding:0px 12px;min-height:20px}.size-small~.clear-button{top:2px}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.error .label{color:var(--bcm-color-red-6) !important}.error .textarea-container{border:1px solid var(--bcm-color-red-6) !important}";
 
+let id = 0;
 const BcmTextarea = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -24,32 +12,25 @@ const BcmTextarea = class {
     this.clear = createEvent(this, "bcm-clear", 7);
     this.change = createEvent(this, "bcm-change", 7);
     this.input = createEvent(this, "bcm-input", 7);
-    /** Props **/
-    this._id = Generate.UID();
-    this._internal_id = Generate.UID();
-    this.hidden = false;
-    this.required = false;
+    this.textareaId = `textarea-${++id}`;
+    this.valueLength = 0;
     this.noCaption = false;
-    this.captionType = Bcm.Status.default;
+    this.captionType = 'default';
     this.rows = 1;
-    this.size = Bcm.Size.medium;
-    this.readonly = false;
-    this.resize = ResizeType.vertical;
-    this.fullWidth = false;
-    this.focused = false;
-  }
-  connectedCallback() {
-    this.captionCache = this.caption;
-    this.captionTypeCache = this.captionType;
+    this.size = 'medium';
+    this.resize = 'vertical';
+    this.hidden = false;
+    this.required = false;
+    this.hasFocus = false;
   }
-  async onBcmFocus() {
+  async setFocus() {
     this.textarea.focus();
   }
-  async onBcmBlur() {
+  async removeFocus() {
     this.textarea.blur();
   }
-  async onBcmSelect() {
-    this.textarea.select();
+  async select() {
+    return this.textarea.select();
   }
   async setValue(value) {
     this.textarea.value = value;
@@ -69,43 +50,85 @@ const BcmTextarea = class {
   async getValue() {
     return this.value;
   }
-  watchValue() {
-    this.handleChange();
-  }
   handleFocus() {
-    this.focused = true;
+    this.hasFocus = true;
     this.focus.emit();
   }
   handleBlur() {
-    this.focused = false;
+    this.hasFocus = false;
     this.blur.emit();
   }
   handleChange() {
     this.value = this.textarea.value;
     this.change.emit(this.value);
   }
+  watchValue() {
+    this.handleChange();
+  }
   handleInput() {
     this.value = this.textarea.value;
+    this.setTextareaHeight();
     this.input.emit(this.value);
   }
   handleClear(e) {
-    this.textarea.value = '';
     this.value = '';
     this.clear.emit();
     this.textarea.focus();
     e.stopPropagation();
   }
+  setTextareaHeight() {
+    if (this.resize === 'auto') {
+      this.textarea.style.height = 'auto';
+      this.textarea.style.height = (this.textarea.scrollHeight + 2) + 'px';
+    }
+    else {
+      this.textarea.style.height = undefined;
+    }
+  }
+  connectedCallback() {
+    this.handleChange = this.handleChange.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleInput = this.handleInput.bind(this);
+    this.handleClear = this.handleClear.bind(this);
+    this.setTextareaHeight = this.setTextareaHeight.bind(this);
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
+  }
+  componentWillRender() {
+    this.valueLength = this.value ? this.value.length : 0;
+    // this.fullWidth 
+    //     ? this.el.style.width = '100%'
+    //     : this.el.style.width = 'initial'
+  }
   render() {
-    const { _id, hidden, readonly, fullWidth, size, rows, disabled, clearable, label, focused, noCaption, caption, captionError, captionType, value, resize, maxLength, placeholder, required } = this;
-    const hostClasses = classnames('bcm-input', {
-      hidden,
+    const { fullWidth, size, rows, disabled, clearable, label, hasFocus, noCaption, caption, captionError, captionType, value, resize, maxLength, placeholder, valueLength, required } = this;
+    const wrapperClasses = classnames('textarea-wrapper', {
       'full-width': fullWidth,
+      'error': captionType == 'error' ? true : false
+    });
+    const contanerClasses = classnames('textarea-container', 'resize-' + resize, 'textarea-' + size, {
+      'empty': (value === null || value === void 0 ? void 0 : value.length) < 1,
+      'focused': hasFocus,
+      'disabled': disabled,
+    });
+    const captionClasses = classnames('size-1', 'input-caption', 'caption-' + captionType);
+    const countClasses = classnames('size-1', 'input-caption', 'caption-default');
+    const textareaClasses = classnames('size-' + size, {
+      'size-3': size === 'large',
+      'size-2': size === 'small' || size === 'medium',
+      'clearable': clearable
     });
-    return (h(Host, { class: hostClasses }, label && h("bcm-label", { type: captionType, value: label, required: required, htmlFor: _id }), h(InputTemplate, { elementType: Bcm.HtmlElementType.textarea, id: _id, value: value, rows: rows, disabled: disabled, maxLength: maxLength, placeholder: placeholder, clearable: clearable, resize: resize, readonly: readonly, size: size, focused: focused, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleInput: () => this.handleInput(), handleClear: (e) => this.handleClear(e), ref: (el) => this.textarea = el }), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, value: value, maxLength: maxLength })));
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses }, h("div", { class: wrapperClasses }, label && h("div", null, h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: this.textareaId })), h("div", { class: contanerClasses }, h("textarea", { ref: el => (this.textarea = el), onInput: this.handleInput, onFocus: this.handleFocus, onChange: this.handleChange, onBlur: this.handleBlur, class: textareaClasses, id: this.textareaId, value: value, rows: rows, disabled: disabled, maxlength: maxLength, placeholder: placeholder }), clearable && (h("button", { class: "clear-button", onClick: this.handleClear }, h("bcm-icon", { icon: "close-circle", type: "fill", size: 18, color: "grey-7" })))), !noCaption || maxLength ? (h("div", { class: "caption-area" }, h("span", null, captionType == "error"
+      ? h("span", { class: captionClasses }, " ", captionError, " ")
+      : caption && h("span", { class: captionClasses }, " ", caption, " ")), maxLength && h("span", { class: countClasses }, " ", `${valueLength}/${maxLength}`, " "))) : null)));
   }
+  get el() { return getElement(this); }
   static get watchers() { return {
     "value": ["watchValue"]
   }; }
 };
+BcmTextarea.style = textareaCss;
 
 export { BcmTextarea as bcm_textarea };