blip-ds 1.201.0 → 1.201.1

package/dist/cjs/bds-chip-clickable_2.cjs.entry.js

@@ -1,391 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-5e324e44.js');
-const validations = require('./validations-431d75ca.js');
-
-const chipClickableCss = ":host{display:block;height:-webkit-max-content;height:-moz-max-content;height:max-content;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box}:host .chip_clickable{display:-ms-flexbox;display:flex;min-width:32px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:32px;border-radius:16px;padding:2px 4px;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-pack:center;justify-content:center;position:relative;z-index:0}:host .chip_clickable--hide{display:none;padding:0;border:none}:host .chip_clickable .chip_focus:focus{position:absolute;width:100%;height:100%;padding:2px;border-radius:4px;outline:#c226fb solid 2px}:host .chip_clickable--click{cursor:pointer}:host .chip_clickable--click .chip_darker{opacity:0;position:absolute;width:100%;height:100%;border-radius:inherit;z-index:1;-webkit-backdrop-filter:brightness(1);backdrop-filter:brightness(1);-webkit-box-sizing:border-box;box-sizing:border-box}:host .chip_clickable--click:hover .chip_darker{opacity:1;-webkit-backdrop-filter:brightness(0.9);backdrop-filter:brightness(0.9)}:host .chip_clickable--click:active .chip_darker{opacity:1;-webkit-backdrop-filter:brightness(0.8);backdrop-filter:brightness(0.8)}:host .chip_clickable--disabled{cursor:default;background-color:#f3f6fa}:host .chip_clickable--disabled .chip_clickable--icon{color:#505f79}:host .chip_clickable--disabled .chip_clickable--text{color:#505f79}:host .chip_clickable--disabled .chip_clickable--close{cursor:default}:host .chip_clickable--icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:20px;padding-left:4px;color:#202c44;z-index:2}:host .chip_clickable--close{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:20px;padding-right:4px;mix-blend-mode:hard-light;color:#202c44;opacity:0.7;z-index:2;position:relative;cursor:pointer}:host .chip_clickable--close .close_focus:focus{position:absolute;width:100%;height:100%;left:-2px;border-radius:4px;outline:#c226fb solid 2px}:host .chip_clickable--text{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:-webkit-max-content;width:-moz-max-content;width:max-content;height:20px;margin:0 8px;z-index:2;color:#202c44;font-family:\"Nunito Sans\", \"Tahoma\", \"Helvetica\", \"Arial\", sans-serif}:host .chip_clickable--tall{height:40px;border-radius:24px}:host .chip_clickable--default{background-color:#b3d4ff}:host .chip_clickable--info{background-color:#80e3eb}:host .chip_clickable--success{background-color:#90e6bc}:host .chip_clickable--warning{background-color:#fff6a8}:host .chip_clickable--danger{background-color:#ffa5a5}:host .chip_clickable--outline{background-color:#ffffff;border:1px solid #b9cbd3}:host .chip_clickable:focus-visible{outline:none}";
-
-const ChipClickable = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.chipClickableClose = index.createEvent(this, "chipClickableClose", 7);
-    this.chipClickableClick = index.createEvent(this, "chipClickableClick", 7);
-    this.visible = true;
-    /**
-     * used for change the color. Uses one of them.
-     */
-    this.color = 'default';
-    /**
-     * used for change the size chip. Uses one of them.
-     */
-    this.size = 'standard';
-    /**
-     * it makes the chip clickable.
-     */
-    this.clickable = false;
-    /**
-     * used for delete the chip.
-     */
-    this.close = false;
-    /**
-     * the chip gone stay disabled while this prop be true.
-     */
-    this.disabled = false;
-    /**
-     * Data test is the prop to specifically test the component action object.
-     */
-    this.dataTest = null;
-  }
-  handleClickKey(event) {
-    if ((event.key === 'Enter' || event.key === ' ') && !this.disabled) {
-      event.preventDefault();
-      this.chipClickableClick.emit();
-    }
-  }
-  handleClick(event) {
-    if (!this.disabled) {
-      event.preventDefault();
-      this.chipClickableClick.emit();
-    }
-  }
-  handleCloseChip(event) {
-    event.preventDefault();
-    this.chipClickableClose.emit({ id: this.element.id });
-  }
-  handleCloseKey(event) {
-    if ((event.key === 'Enter' || event.key === ' ') && !this.disabled) {
-      event.preventDefault();
-      this.chipClickableClose.emit({ id: this.element.id });
-    }
-  }
-  getSizeAvatarChip() {
-    if (this.size === 'tall') {
-      return 'extra-small';
-    }
-    else
-      return 'micro';
-  }
-  getSizeIconChip() {
-    if (this.size === 'tall') {
-      return 'medium';
-    }
-    else
-      return 'x-small';
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: {
-        chip_clickable: true,
-        [`chip_clickable--${this.color}`]: !this.disabled,
-        [`chip_clickable--${this.size}`]: true,
-        'chip_clickable--hide': !this.visible,
-        'chip_clickable--click': this.clickable,
-        'chip_clickable--disabled': this.disabled,
-      }, onClick: this.handleClick.bind(this), "data-test": this.dataTest }, this.clickable && !this.disabled && (index.h("div", { class: "chip_focus", onKeyDown: this.handleClickKey.bind(this), tabindex: "0" })), this.clickable && !this.disabled && index.h("div", { class: "chip_darker" }), this.icon && !this.avatar && (index.h("div", { class: "chip_clickable--icon" }, index.h("bds-icon", { size: this.getSizeIconChip(), name: this.icon }))), this.avatar && (index.h("div", { class: "chip_clickable--avatar" }, index.h("bds-avatar", { size: this.getSizeAvatarChip(), thumbnail: this.avatar }))), index.h("bds-typo", { class: "chip_clickable--text", variant: "fs-12", bold: "bold" }, index.h("slot", null)), this.close && (index.h("div", { class: "chip_clickable--close", onClick: this.handleCloseChip.bind(this) }, !this.disabled && (index.h("div", { class: "close_focus", onKeyDown: this.handleCloseKey.bind(this), tabindex: "0" })), index.h("bds-icon", { size: "x-small", theme: "solid", name: "error" }))))));
-  }
-  get element() { return index.getElement(this); }
-};
-ChipClickable.style = chipClickableCss;
-
-const inputCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%}:host input,:host textarea{-webkit-box-shadow:inherit;box-shadow:inherit}:host input::-webkit-input-placeholder,:host textarea::-webkit-input-placeholder{color:#b9cbd3;opacity:1}:host input::-moz-placeholder,:host textarea::-moz-placeholder{color:#b9cbd3;opacity:1}:host input:-ms-input-placeholder,:host textarea:-ms-input-placeholder{color:#b9cbd3;opacity:1}:host input::-ms-input-placeholder,:host textarea::-ms-input-placeholder{color:#b9cbd3;opacity:1}:host input::placeholder,:host textarea::placeholder{color:#b9cbd3;opacity:1}:host input::-webkit-input-placeholder,:host textarea::-webkit-input-placeholder{color:#b9cbd3;opacity:1}.input{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:8px 4px 9px 12px;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;background:#ffffff}.input--state-primary{border:1px solid #d2dfe6;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-primary:hover{border:1px solid #3f7de8;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-primary.input--pressed{border:1px solid #3f7de8;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;-webkit-box-shadow:0 0 0 2px rgba(63, 125, 232, 0.4);box-shadow:0 0 0 2px rgba(63, 125, 232, 0.4)}.input--state-primary .input__icon{color:#3f7de8;background-color:#e8f2ff}.input--state-primary .input__container__label{color:#8ca0b3}.input--state-primary .input__container__label--pressed{color:#3f7de8}.input--state-primary .input__container__text{caret-color:#3f7de8;color:#202c44}.input--state-danger{border:1px solid #ff4c4c;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-danger:hover{border:1px solid #ff4c4c;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-danger.input--pressed{border:1px solid #ff4c4c;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;-webkit-box-shadow:0 0 0 2px #ffa5a5;box-shadow:0 0 0 2px #ffa5a5}.input--state-danger .input__icon{color:#ff4c4c;background-color:#ffa5a5}.input--state-danger .input__container__label{color:#8ca0b3}.input--state-danger .input__container__label--pressed{color:#ff4c4c}.input--state-danger .input__container__text{caret-color:#ff4c4c;color:#202c44}.input--state-disabled{cursor:not-allowed;border:1px solid #e7edf4;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;background:#f3f6fa}.input--state-disabled:hover{border:1px solid #b9cbd3;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7edf4;box-sizing:border-box;border-radius:8px}.input--state-disabled.input--pressed{border:1px solid #b9cbd3;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;-webkit-box-shadow:0 0 0 2px #e7edf4;box-shadow:0 0 0 2px #e7edf4}.input--state-disabled .input__icon{color:#b9cbd3;background-color:#f8fbfb}.input--state-disabled .input__container__label{color:#b9cbd3}.input--state-disabled .input__container__label--pressed{color:#b9cbd3}.input--state-disabled .input__container__text{caret-color:#b9cbd3;color:#b9cbd3}.input--label{padding:7px 4px 8px 12px}.input__icon{cursor:inherit;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:8px;margin-right:8px;padding:2.5px}.input__icon--large{padding:4px}.input__container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;width:100%}.input__container__wrapper{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.input__container__wrapper__chips{display:inline;max-height:100px;overflow:auto}.input__container__wrapper__chips::-webkit-scrollbar{width:16px;background-color:transparent}.input__container__wrapper__chips::-webkit-scrollbar-thumb{border-radius:10px;border:4px solid transparent;border-radius:10px;background-clip:content-box;background-color:#b9cbd3}.input__container__label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.input__container__text{display:inline-block;margin:0;border:0;padding:0;width:auto;vertical-align:middle;white-space:normal;line-height:inherit;background:none;color:inherit;font-size:inherit;font-family:inherit;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;font-family:\"Nunito Sans\", \"Tahoma\", \"Helvetica\", \"Arial\", sans-serif;font-size:0.875rem;line-height:150%;resize:none;cursor:inherit}.input__container__text:focus{outline:0}.input__container__text::-webkit-file-upload-button{padding:0;border:0;background:none}.input__container__text:focus{outline:0}.input__container__text[type=checkbox],.input__container__text[type=radio]{width:13px;height:13px}.input__container__text[type=search]{-webkit-appearance:textfield;-webkit-box-sizing:content-box}::-webkit-search-decoration{display:none}.input__container__text[type=reset],.input__container__text[type=button],.input__container__text[type=submit]{overflow:visible}.input__container__text::-webkit-scrollbar{width:16px;background-color:transparent}.input__container__text::-webkit-scrollbar-thumb{border-radius:10px;border:4px solid transparent;border-radius:10px;background-clip:content-box;background-color:#b9cbd3}.input__message{display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;height:20px;margin:3.7px 2.5px;-webkit-transition:0.3s cubic-bezier(0.4, 0, 0.2, 1);transition:0.3s cubic-bezier(0.4, 0, 0.2, 1);color:#8ca0b3;word-break:break-word;height:auto;min-height:20px}.input__message bds-typo{margin-top:0px;-ms-flex-item-align:self-start;align-self:self-start}.input__message__icon{display:-ms-flexbox;display:flex;padding-right:4px;margin-top:0px;padding-top:2px}.input__message--danger{color:#ff4c4c}.input__container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;width:100%}.input__container__label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.input__container__wrapper{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.input__container__text{display:inline-block;margin:0;border:0;padding:0;width:auto;vertical-align:middle;white-space:normal;line-height:inherit;background:none;color:inherit;font-size:inherit;font-family:inherit;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;font-family:\"Nunito Sans\", \"Tahoma\", \"Helvetica\", \"Arial\", sans-serif;font-size:0.875rem;line-height:150%;width:100%;resize:none;cursor:inherit}.input__container__text:focus{outline:0}.input__container__text::-webkit-file-upload-button{padding:0;border:0;background:none}.input__container__text:focus{outline:0}.input__container__text[type=checkbox],.input__container__text[type=radio]{width:13px;height:13px}.input__container__text[type=search]{-webkit-appearance:textfield;-webkit-box-sizing:content-box}::-webkit-search-decoration{display:none}.input__container__text[type=reset],.input__container__text[type=button],.input__container__text[type=submit]{overflow:visible}.input__container__text__chips{width:auto;min-width:216px;max-width:216px}";
-
-const Input = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.bdsChange = index.createEvent(this, "bdsChange", 7);
-    this.bdsInput = index.createEvent(this, "bdsInput", 7);
-    this.bdsOnBlur = index.createEvent(this, "bdsOnBlur", 7);
-    this.bdsFocus = index.createEvent(this, "bdsFocus", 7);
-    this.bdsSubmit = index.createEvent(this, "bdsSubmit", 7);
-    this.bdsKeyDownBackspace = index.createEvent(this, "bdsKeyDownBackspace", 7);
-    /**
-     * Conditions the element to say whether it is pressed or not, to add styles.
-     */
-    this.isPressed = false;
-    /**
-     * Indicates if the input is password, adding the eye icon.
-     */
-    this.isPassword = false;
-    /**
-     * Used to set the error message setted by the internal validators
-     */
-    this.validationMesage = '';
-    /**
-     * Used to set the danger behavior by the internal validators
-     */
-    this.validationDanger = false;
-    /**
-     * Input Name
-     */
-    this.inputName = '';
-    /**
-     * Input type. Can be one of: "text", "password", "number" or "email".
-     */
-    this.type = 'text';
-    /**
-     *  label in input, with he the input size increases.
-     */
-    this.label = '';
-    /**
-     * A tip for the user who can enter no controls.
-     */
-    this.placeholder = '';
-    /**
-     * Capitalizes every word's second character.
-     */
-    this.autoCapitalize = 'off';
-    /**
-     * Hint for form autofill feature
-     */
-    this.autoComplete = 'off';
-    /**
-     * If `true`, the user cannot modify the value.
-     */
-    this.readonly = false;
-    /**
-     * Indicated to pass a help the user in complex filling.
-     */
-    this.helperMessage = '';
-    /**
-     * Indicated to pass an feeback to user.
-     */
-    this.errorMessage = '';
-    /**
-     * used for add icon in input left. Uses the bds-icon component.
-     */
-    this.icon = '';
-    /**
-     * Disabled input.
-     */
-    this.disabled = false;
-    /**
-     * Add state danger on input, use for use feedback.
-     */
-    this.danger = false;
-    /**
-     * The value of the input.
-     */
-    this.value = '';
-    /**
-     * Passing true to display a counter of available size, it is necessary to
-     * pass another maxlength property.
-     */
-    this.counterLength = false;
-    /**
-     * Make it possible to pass the base values to the warning level and exclude,
-     * using the values between min and max.
-     */
-    this.counterLengthRule = null;
-    /**
-     * If `true`, the user cannot modify the value.
-     */
-    this.isSubmit = false;
-    /**
-     * if `true` input switched to textarea
-     */
-    this.isTextarea = false;
-    /**
-     * The rows and cols attributes allow you to specify an exact size for the <textarea> to get. Setting this is a good idea for consistency, as the browser defaults may differ.
-     */
-    this.rows = 1;
-    /**
-     * The rows and cols attributes allow you to specify an exact size for the <textarea> to get. Setting this is a good idea for consistency, as the browser defaults may differ.
-     */
-    this.cols = 0;
-    /**
-     * Id to support Cypress.
-     */
-    this.dataTest = null;
-    this.keyPressWrapper = (event) => {
-      switch (event.key) {
-        case 'Enter':
-          this.bdsSubmit.emit({ event, value: this.value });
-          if (this.isSubmit) {
-            this.clearTextInput();
-            event.preventDefault();
-          }
-          break;
-        case 'Backspace' :
-          this.bdsKeyDownBackspace.emit({ event, value: this.value });
-          break;
-      }
-    };
-    this.onInput = (ev) => {
-      this.onBdsInputValidations();
-      const input = ev.target;
-      if (input) {
-        this.value = input.value || '';
-      }
-      this.bdsInput.emit(ev);
-    };
-    this.onBlur = () => {
-      this.onBlurValidations();
-      this.isPressed = false;
-      this.bdsOnBlur.emit();
-    };
-    this.onFocus = () => {
-      this.isPressed = true;
-      this.bdsFocus.emit();
-    };
-    this.onClickWrapper = () => {
-      this.onFocus();
-      if (this.nativeInput) {
-        this.nativeInput.focus();
-      }
-    };
-    this.clearTextInput = (ev) => {
-      if (!this.readonly && !this.disabled && ev) {
-        ev.preventDefault();
-        ev.stopPropagation();
-      }
-      this.value = '';
-      /**
-       * This is needed for clearOnEdit
-       * Otherwise the value will not be cleared
-       * if user is inside the input
-       */
-      if (this.nativeInput) {
-        this.nativeInput.value = '';
-      }
-    };
-  }
-  /**
-   * Update the native input element when the value changes
-   */
-  valueChanged() {
-    this.bdsChange.emit({ value: this.value == null ? this.value : this.value.toString() });
-  }
-  /**
-   * Sets focus on the specified `ion-input`. Use this method instead of the global
-   * `input.focus()`.
-   */
-  async setFocus() {
-    this.onClickWrapper();
-  }
-  async removeFocus() {
-    this.onBlur();
-  }
-  /**
-   * Returns the native `<input>` element used under the hood.
-   */
-  async getInputElement() {
-    return this.nativeInput;
-  }
-  /**
-   * Return the validity of the input.
-   */
-  async isValid() {
-    return this.nativeInput.validity.valid;
-  }
-  /**
-   * Return the validity of the input.
-   */
-  async clear() {
-    this.value = '';
-  }
-  renderIcon() {
-    return (this.icon && (index.h("div", { class: {
-        input__icon: true,
-        'input__icon--large': !!this.label,
-      } }, index.h("bds-icon", { size: this.label ? 'medium' : 'small', name: this.icon, color: "inherit" }))));
-  }
-  renderLabel() {
-    return (this.label && (index.h("label", { class: {
-        input__container__label: true,
-        'input__container__label--pressed': this.isPressed && !this.disabled,
-      } }, index.h("bds-typo", { variant: "fs-12", bold: "bold" }, this.label))));
-  }
-  renderMessage() {
-    const icon = this.danger ? 'error' : 'info';
-    let message = this.danger ? this.errorMessage : this.helperMessage;
-    if (!message && this.validationDanger)
-      message = this.validationMesage;
-    const styles = this.danger || this.validationDanger ? 'input__message input__message--danger' : 'input__message';
-    if (message) {
-      return (index.h("div", { class: styles, part: "input__message" }, index.h("div", { class: "input__message__icon" }, index.h("bds-icon", { size: "x-small", name: icon, theme: "solid", color: "inherit" })), index.h("bds-typo", { variant: "fs-12" }, message)));
-    }
-    return undefined;
-  }
-  onBlurValidations() {
-    this.required && this.requiredValidation();
-    (this.minlength || this.maxlength) && this.lengthValidation();
-    (this.min || this.max) && this.minMaxValidation();
-    this.checkValidity();
-  }
-  onBdsInputValidations() {
-    this.type === 'email' && this.emailValidation();
-    this.type === 'phonenumber' && this.numberValidation();
-    this.checkValidity();
-  }
-  requiredValidation() {
-    if (this.nativeInput.validity.valueMissing) {
-      this.validationMesage = this.requiredErrorMessage;
-      this.validationDanger = true;
-    }
-  }
-  lengthValidation() {
-    if (this.nativeInput.validity.tooShort) {
-      this.validationMesage = this.minlengthErrorMessage;
-      this.validationDanger = true;
-      return;
-    }
-    if (this.nativeInput.validity.tooLong) {
-      this.validationDanger = true;
-      return;
-    }
-  }
-  minMaxValidation() {
-    if (this.nativeInput.validity.rangeUnderflow) {
-      this.validationMesage = this.minErrorMessage;
-      this.validationDanger = true;
-      return;
-    }
-    if (this.nativeInput.validity.rangeOverflow) {
-      this.validationMesage = this.maxErrorMessage;
-      this.validationDanger = true;
-      return;
-    }
-  }
-  emailValidation() {
-    if (validations.emailValidation(this.nativeInput.value)) {
-      this.validationMesage = this.emailErrorMessage;
-      this.validationDanger = true;
-    }
-  }
-  numberValidation() {
-    if (validations.numberValidation(this.nativeInput.value)) {
-      this.validationMesage = this.numberErrorMessage;
-      this.validationDanger = true;
-    }
-  }
-  checkValidity() {
-    if (this.nativeInput.validity.valid) {
-      this.validationDanger = false;
-    }
-  }
-  componentDidUpdate() {
-    if (this.nativeInput && this.value != this.nativeInput.value) {
-      this.nativeInput.value = this.value;
-    }
-  }
-  render() {
-    const isPressed = this.isPressed && !this.disabled;
-    const Element = this.isTextarea ? 'textarea' : 'input';
-    return (index.h(index.Host, { "aria-disabled": this.disabled ? 'true' : null }, index.h("div", { class: {
-        input: true,
-        'input--state-primary': !this.danger && !this.validationDanger,
-        'input--state-danger': this.danger || this.validationDanger,
-        'input--state-disabled': this.disabled,
-        'input--label': !!this.label,
-        'input--pressed': isPressed,
-      }, onClick: this.onClickWrapper, onKeyDown: this.keyPressWrapper, part: "input-container" }, this.renderIcon(), index.h("slot", { name: "input-left" }), index.h("div", { class: "input__container" }, this.renderLabel(), index.h("div", { class: { input__container__wrapper: !this.chips, input__container__wrapper__chips: this.chips } }, index.h("slot", { name: "inside-input-left" }), index.h(Element, { class: { input__container__text: true, input__container__text__chips: this.chips }, ref: (input) => (this.nativeInput = input), rows: this.rows, cols: this.cols, autocapitalize: this.autoCapitalize, autocomplete: this.autoComplete, disabled: this.disabled, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, name: this.inputName, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, readOnly: this.readonly, type: this.type, value: this.value, pattern: this.pattern, required: this.required, part: "input", "data-test": this.dataTest }))), this.counterLength && (index.h("bds-counter-text", Object.assign({ length: this.value.length, max: this.maxlength, active: isPressed }, this.counterLengthRule))), index.h("slot", { name: "input-right" })), this.renderMessage()));
-  }
-  static get watchers() { return {
-    "value": ["valueChanged"]
-  }; }
-};
-Input.style = inputCss;
-
-exports.bds_chip_clickable = ChipClickable;
-exports.bds_input = Input;