bromcom-ui 2.3.54 → 2.3.58

package/dist/esm/bcm-textarea.entry.js

@@ -1,132 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8fe7aea4.js';
-import { c as classnames } from './index-e58a2d48.js';
-
-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}.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 textarea{border:1px solid var(--bcm-color-red-6) !important}";
-
-let id = 0;
-const BcmTextarea = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.focus = createEvent(this, "bcm-focus", 7);
-    this.blur = createEvent(this, "bcm-blur", 7);
-    this.clear = createEvent(this, "bcm-clear", 7);
-    this.change = createEvent(this, "bcm-change", 7);
-    this.input = createEvent(this, "bcm-input", 7);
-    this.textareaId = `textarea-${++id}`;
-    this.valueLength = 0;
-    this.noCaption = false;
-    this.rows = 1;
-    this.size = 'medium';
-    this.resize = 'vertical';
-    this.hidden = false;
-    this.required = false;
-    this.hasFocus = false;
-  }
-  async setFocus() {
-    this.textarea.focus();
-  }
-  async removeFocus() {
-    this.textarea.blur();
-  }
-  async select() {
-    return this.textarea.select();
-  }
-  async setValue(value) {
-    this.textarea.value = value;
-    this.value = value;
-    this.handleChange();
-    return value;
-  }
-  async setClear() {
-    this.textarea.value = '';
-    this.value = '';
-  }
-  async resetCaption() {
-    this.caption = this.captionCache;
-    this.captionType = this.captionTypeCache;
-    this.captionError = null;
-  }
-  async getValue() {
-    return this.value;
-  }
-  handleFocus() {
-    this.hasFocus = true;
-    this.focus.emit();
-  }
-  handleBlur() {
-    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.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 { 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 textareaClasses = classnames('size-' + size, {
-      'size-3': size === 'large',
-      'size-2': size === 'small' || size === 'medium',
-      'clearable': clearable
-    });
-    const hostClasses = classnames(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses }, h("div", { class: wrapperClasses }, label && h("label", { class: "label size-1", htmlFor: this.textareaId }, " ", label, " ", required && ('*'), " "), 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" }, captionType == "error"
-      ? h("span", { class: captionClasses }, " ", captionError, " ")
-      : caption && h("span", { class: captionClasses }, " ", caption, " "), maxLength && h("span", { class: "count" }, " ", `${valueLength}/${maxLength}`, " "))) : null)));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "value": ["watchValue"]
-  }; }
-};
-BcmTextarea.style = textareaCss;
-
-export { BcmTextarea as bcm_textarea };

package/dist/esm/bcm-tooltip-box.entry.js

@@ -1,32 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-8fe7aea4.js';
-import { c as classnames } from './index-e58a2d48.js';
-
-const tooltipBoxCss = "@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}:host{display:inline-flex}:host(.hidden){display:none}:host(:focus){outline:none}.tooltip-box{position:relative;}.tooltip-box .box{position:absolute;display:none;box-sizing:border-box;background-color:#262626;border:1px solid #262626;border-radius:2px;z-index:10700;width:max-content;padding:4px 8px;color:var(--bcm-color-grey-1)}.tooltip-box::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10700}.tooltip-box.open .box,.tooltip-box.open::after{display:block}.tooltip-box.top .box{bottom:100%;margin-bottom:8px}.tooltip-box.top::after{bottom:100%;margin-bottom:-4px;border-color:#262626 transparent transparent transparent}.tooltip-box.bottom .box{top:100%;margin-top:8px}.tooltip-box.bottom::after{top:100%;margin-top:-4px;border-color:transparent transparent #262626 transparent}.tooltip-box.left .box{right:100%;margin-right:8px}.tooltip-box.left::after{right:100%;margin-right:-4px;border-color:transparent transparent transparent #262626}.tooltip-box.right .box{left:100%;margin-left:8px}.tooltip-box.right::after{left:100%;margin-left:-4px;border-color:transparent #262626 transparent transparent}.tooltip-box.top.center .box,.tooltip-box.bottom.center .box{left:50%;transform:translateX(-50%)}.tooltip-box.top.center::after,.tooltip-box.bottom.center::after{left:50%;transform:translateX(-50%)}.tooltip-box.top.start .box,.tooltip-box.bottom.start .box{left:0}.tooltip-box.top.start::after,.tooltip-box.bottom.start::after{left:8px}.tooltip-box.top.end .box,.tooltip-box.bottom.end .box{right:0}.tooltip-box.top.end::after,.tooltip-box.bottom.end::after{right:8px}.tooltip-box.left.center .box,.tooltip-box.right.center .box{top:50%;transform:translateY(-50%)}.tooltip-box.left.center::after,.tooltip-box.right.center::after{top:50%;transform:translateY(-50%)}.tooltip-box.left.start .box,.tooltip-box.right.start .box{top:0}.tooltip-box.left.start::after,.tooltip-box.right.start::after{top:4px}.tooltip-box.left.end .box,.tooltip-box.right.end .box{bottom:0}.tooltip-box.left.end::after,.tooltip-box.right.end::after{bottom:4px}.tooltip-box a{color:var(--bcm-color-grey-1)}";
-
-const BcmTooltipBox = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.hidden = false;
-  }
-  connectedCallback() { }
-  disconnectedCallback() { }
-  componentWillLoad() { }
-  componentDidLoad() { }
-  componentWillRender() { }
-  componentDidRender() { }
-  componentWillUpdate() { }
-  componentDidUpdate() { }
-  async openBox(open) {
-    this.open = open;
-  }
-  render() {
-    const classes = classnames('tooltip-box', this.open, this.placement);
-    const boxClasses = classnames('box');
-    const hostClasses = classnames(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses }, h("div", { class: classes }, h("div", { class: boxClasses, innerHTML: this.message }))));
-  }
-  get el() { return getElement(this); }
-};
-BcmTooltipBox.style = tooltipBoxCss;
-
-export { BcmTooltipBox as bcm_tooltip_box };