bromcom-ui 2.7.38-rc.1 → 2.7.38-rc.10

package/dist/cjs/{stepper-states-bd774fce.js → stepper-states-fcc50d03.js}

@@ -4,8 +4,9 @@
  */
 'use strict';
 
-const index = require('./index-1d2ce51d.js');
-const generate = require('./generate-e98dfd99.js');
+const index = require('./index-56628fe5.js');
+const generate = require('./generate-79883e13.js');
+const index$1 = require('./index-7e2a5376.js');
 
 const { state } = index.createStore({
   value: new Map(),
@@ -18,7 +19,8 @@ const setValue = val => {
         .filter(data => !data.hidden)
         .map((item, index) => ({
         id: item.id || generate.Generate.UID(),
-        title: item.title || item._title || 'Step ' + (index + 1),
+        title: item.title || item._title,
+        _title: item.title || item._title || 'Step ' + (index + 1),
         description: item.description || '',
         status: item.status || 'default',
         disabled: val.linear ? (index == 0 ? false : true) : item.disabled || false,
@@ -48,14 +50,14 @@ const changeStepStatus = (id, stepId, status) => {
   const value = state.value.get(id);
   if (value && value.steps) {
     value.steps = value.steps.map(step => (Object.assign(Object.assign({}, step), { status: step.id === stepId ? status : step.status })));
-    value.el.tick = generate.Generate.UID();
+    index$1.forceUpdate(value.el);
   }
 };
 const changeStepDisabled = (id, stepId, disabled) => {
   const value = state.value.get(id);
   if (value && value.steps) {
     value.steps = value.steps.map(step => (Object.assign(Object.assign({}, step), { disabled: step.id === stepId ? disabled : step.disabled })));
-    value.el.tick = generate.Generate.UID();
+    index$1.forceUpdate(value.el);
   }
 };
 const setActiveIndex = (id, index) => state.value.get(id).active = index;
@@ -64,7 +66,7 @@ const stepperReset = id => {
   if (value) {
     value.active = 1;
     value.steps = value.steps.map((step, i) => (Object.assign(Object.assign({}, step), { active: i === 0, status: 'default', disabled: i !== 0, loading: false })));
-    value.el.tick = generate.Generate.UID();
+    index$1.forceUpdate(value.el);
   }
 };
 const getValue = id => generate.snq(() => state.value.get(id), {});

package/dist/cjs/{string-helper-145cd64f.js → string-helper-71b10c53.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const bcm = require('./bcm-f00ec62c.js');
+const bcm = require('./bcm-634604e3.js');
 const _commonjsHelpers = require('./_commonjsHelpers-bd20f4c0.js');
 
 var slugify = _commonjsHelpers.createCommonjsModule(function (module, exports) {
@@ -94,7 +94,7 @@ StringHelper.replace = (str, search, replace) => str.replace(search, replace);
 StringHelper.remove = (str, search) => str.replace(search, '');
 StringHelper.isNullOrEmpty = (str) => str === null || str === undefined || str === '';
 StringHelper.localizationMessage = (str, args) => str.replace(/{(\d+)}/g, (match, number) => (typeof args[number] != 'undefined' ? args[number] : match));
-StringHelper.getMessage = (type, args) => StringHelper.localizationMessage(bcm.Bcm$1.FormErrorMessages[type], args);
+StringHelper.getMessage = (type, args) => StringHelper.localizationMessage(bcm.Bcm.FormErrorMessages[type], args);
 StringHelper.split = (str, separator) => str.split(separator);
 StringHelper.textContains = (str, search) => str && str.indexOf(search) !== -1;
 StringHelper.textLimitter = (str, limit, newLine = false) => (str && str.length > limit ? `${str.substring(0, limit)}...` : str) + `${newLine ? ' <br /> ' : ''}`;

package/dist/cjs/{tooltip-helper-1418bb15.js → tooltip-helper-c195f187.js}

@@ -5,27 +5,40 @@
 'use strict';
 
 require('./element-dragger-a8562f82.js');
-const stringHelper = require('./string-helper-145cd64f.js');
-const floatingUi = require('./floating-ui-2a4a79ff.js');
+const stringHelper = require('./string-helper-71b10c53.js');
+const floatingUi = require('./floating-ui-c23acc6c.js');
 const colorHelper = require('./color-helper-c9882bd8.js');
 require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-e98dfd99.js');
-require('./number-helper-b80392ed.js');
-require('./validators-5514189b.js');
+const generate = require('./generate-79883e13.js');
+require('./number-helper-9b194170.js');
+require('./validators-21bbcbcc.js');
+const bcm = require('./bcm-634604e3.js');
 
 class Tooltip {
-  constructor({ message, targetId, placement = 'top', color = 'slate-700', trigger = 'none' }) {
+  constructor({ message, targetId, placement = "top", color = "slate-700", trigger = "none", size = "medium" }) {
     this.bgColor = () => colorHelper.ColorHelper.twColor(this.color, 700);
     this.target = () => document.getElementById(this.targetId);
+    this.sizeClass = () => {
+      switch (this.size) {
+        case bcm.Bcm$1.Size.small:
+          return "tw-text-1";
+        case bcm.Bcm$1.Size.medium:
+          return "tw-text-2";
+        case bcm.Bcm$1.Size.large:
+          return "tw-text-3";
+        default:
+          return "tw-text-2";
+      }
+    };
     this.init = () => {
-      this.el = generate.Generate.createElement('div', {
-        'id': `${this.targetId}-tooltip-box`,
-        'class': `
-            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-xs tw-py-1 tw-px-2 tw-rounded tw-bg-${this.bgColor()} tw-text-white tw-text-1 tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300`,
-        'role': 'tooltip',
-        'aria-hidden': 'true',
-        'style': `color: ${colorHelper.ColorHelper.twColorReverse(this.bgColor())}`,
-        'innerHTML': stringHelper.StringHelper.trim(this.message),
+      this.el = generate.Generate.createElement("div", {
+        "id": `${this.targetId}-tooltip-box`,
+        "class": `
+            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-xs tw-py-1 tw-px-2 tw-rounded tw-bg-${this.bgColor()} tw-text-white ${this.sizeClass()} tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300`,
+        "role": "tooltip",
+        "aria-hidden": "true",
+        "style": `color: ${colorHelper.ColorHelper.twColorReverse(this.bgColor())}`,
+        "innerHTML": stringHelper.StringHelper.trim(this.message),
       });
     };
     this.update = () => {
@@ -36,21 +49,21 @@ class Tooltip {
       }
     };
     this.listener = () => {
-      window.addEventListener('resize', this.calculatePosition.bind(this));
-      window.addEventListener('scroll', this.calculatePosition.bind(this), true);
-      window.addEventListener('wheel', this.calculatePosition.bind(this));
+      window.addEventListener("resize", this.calculatePosition.bind(this));
+      window.addEventListener("scroll", this.calculatePosition.bind(this), true);
+      window.addEventListener("wheel", this.calculatePosition.bind(this));
       if (this.trigger && this.target()) {
         switch (this.trigger) {
-          case 'click':
-            this.target().addEventListener('click', this.toggle.bind(this));
+          case "click":
+            this.target().addEventListener("click", this.toggle.bind(this));
             break;
-          case 'hover':
-            this.target().addEventListener('mouseenter', this.show.bind(this));
-            this.target().addEventListener('mouseleave', this.hide.bind(this));
+          case "hover":
+            this.target().addEventListener("mouseenter", this.show.bind(this));
+            this.target().addEventListener("mouseleave", this.hide.bind(this));
             break;
-          case 'focus':
-            this.target().addEventListener('focus', this.show.bind(this), true);
-            this.target().addEventListener('blur', this.hide.bind(this), true);
+          case "focus":
+            this.target().addEventListener("focus", this.show.bind(this), true);
+            this.target().addEventListener("blur", this.hide.bind(this), true);
             break;
         }
       }
@@ -97,8 +110,9 @@ class Tooltip {
     this.targetId = targetId;
     this.placement = placement;
     this.color = color;
-    this.id = targetId + '-tooltip-box';
+    this.id = targetId + "-tooltip-box";
     this.trigger = trigger;
+    this.size = size;
   }
 }
 

package/dist/cjs/{validators-5514189b.js → validators-21bbcbcc.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const generate = require('./generate-e98dfd99.js');
+const generate = require('./generate-79883e13.js');
 
 class Validators {
 }

package/dist/collection/collection-manifest.json

@@ -21,6 +21,8 @@
     "./components/molecules/checkbox/checkbox-lite.js",
     "./components/molecules/checkbox/checkbox.js",
     "./components/molecules/checkbox/group.js",
+    "./components/molecules/color-input/color-input.js",
+    "./components/molecules/colorful/colorful.js",
     "./components/molecules/drawer/drawer.js",
     "./components/molecules/dropdown/dropdown.js",
     "./components/molecules/empty/empty.js",
@@ -51,7 +53,6 @@
     "./components/molecules/timeline/timeline.js",
     "./components/molecules/tooltip/tooltip.js",
     "./components/organism/autocomplete/autocomplete.js",
-    "./components/organism/colorpicker/colorpicker.js",
     "./components/organism/date-picker/date-picker.js",
     "./components/organism/datetime-picker/datetime-picker.js",
     "./components/organism/form/form-group.js",
@@ -64,6 +65,7 @@
     "./components/other/default/default.js",
     "./components/other_deprecated/collapse/collapse.js",
     "./components/other_deprecated/collapse/group.js",
+    "./components/other_deprecated/colorpicker/colorpicker.js",
     "./components/other_deprecated/listbox/listbox-group.js",
     "./components/other_deprecated/listbox/listbox-item.js",
     "./components/other_deprecated/listbox/listbox.js",

package/dist/collection/components/atoms/avatar/avatar.css

@@ -123,7 +123,9 @@
   margin-right: 8px;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;

package/dist/collection/components/atoms/badge/badge.css

@@ -123,7 +123,9 @@
   margin-right: 8px;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;

package/dist/collection/components/atoms/button/button.css

@@ -123,7 +123,9 @@
   margin-right: 8px;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;

package/dist/collection/components/atoms/button/button.js

@@ -152,7 +152,7 @@ export class BcmButton {
       hidden,
       'full-width': fullWidth,
     });
-    return (h(Host, { class: hostClasses, tabindex: "-1", style: this.setColor(variantColor), onClick: () => !disabled && this.bcmClick.emit(this.el) }, h(ButtonTemplate, { type: type, value: value, componentClass: componentClass, disabled: disabled, href: href, target: target, icon: icon, loading: loading, iconSize: iconSize, isIconOnly: isIconOnly, iconPosition: iconPosition })));
+    return (h(Host, { class: hostClasses, style: this.setColor(variantColor), onClick: () => !disabled && this.bcmClick.emit(this.el) }, h(ButtonTemplate, { type: type, value: value, componentClass: componentClass, disabled: disabled, href: href, target: target, icon: icon, loading: loading, iconSize: iconSize, isIconOnly: isIconOnly, iconPosition: iconPosition })));
   }
   static get is() { return "bcm-button"; }
   static get originalStyleUrls() {

package/dist/collection/components/atoms/chip/chip.css

@@ -123,7 +123,9 @@
   margin-right: 8px;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;

package/dist/collection/components/atoms/chip/chip.js

@@ -12,7 +12,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
         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 { Host, h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { IsLoad } from '../../../decorators/is-load-decorator';
 import { Generate } from '../../../helper/generate';
 import cs from 'classnames';
@@ -27,6 +27,7 @@ export class BcmChip {
     this.disabled = undefined;
     this.color = undefined;
   }
+  // @ts-ignore
   setColor() {
     if (!this.color)
       return;
@@ -44,14 +45,23 @@ export class BcmChip {
       '--bcm-chip-background-color-disabled': ColorHelper.dsColor('slate' + '-100'),
     };
   }
+  handleDismiss(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.bcmChipDismiss.emit(this.el);
+  }
+  handleAddable(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.bcmChipAddable.emit(this.el);
+  }
   render() {
     const { type, size, avatar, disabled, color } = this;
     const hostClasses = cs('bcm-chip', `bcm-chip__type-${type}`, `bcm-chip__size-${size}`, {
       'bcm-chip--disabled': disabled,
       'bcm-chip--avatar': avatar,
     });
-    return (h(Host, { class: hostClasses, tabindex: "1", disabled: disabled, style: this.setColor() }, avatar &&
-      h("bcm-avatar", Object.assign({ size: size }, ((color && { color })), ((avatar && { image: avatar })))), h("slot", null), type === 'dismissable' && (h("span", { class: "bcm-chip__type-dismissable-icon" }, h("bcm-icon", { icon: "fal fa-times" })))));
+    return (h(Host, { class: hostClasses, tabindex: "0", disabled: disabled, style: this.setColor(), onClick: e => this.bcmChipSelect.emit(e) }, avatar && h("bcm-avatar", Object.assign({ size: size }, (color && { color }), (avatar && { image: avatar }))), type === 'addable' && (h("span", { class: "bcm-chip__left" }, h("bcm-icon", { onClick: e => this.handleAddable(e), icon: "far fa-plus" }))), h("slot", null), type === 'dismissable' && (h("span", { class: "bcm-chip__type-dismissable-icon" }, h("bcm-icon", { onClick: e => this.handleDismiss(e), icon: "fal fa-times" })))));
   }
   static get is() { return "bcm-chip"; }
   static get originalStyleUrls() {
@@ -190,6 +200,54 @@ export class BcmChip {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "bcmChipDismiss",
+        "name": "bcm-chip-dismiss",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "bcmChipSelect",
+        "name": "bcm-chip-select",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "bcmChipAddable",
+        "name": "bcm-chip-addable",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "el"; }
 }
 __decorate([

package/dist/collection/components/atoms/label/label.css

@@ -123,7 +123,9 @@
   margin-right: 8px;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;

package/dist/collection/components/atoms/link/link.css

@@ -123,7 +123,9 @@
   margin-right: 8px;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;

package/dist/collection/components/atoms/link/link.js

@@ -44,7 +44,7 @@ export class BcmLink {
       'suffix': this.linkIsExternal(href)
     });
     const ElementTagType = href ? 'a' : 'span';
-    return (h(Host, { disabled: disabled, class: hostClasses, tabindex: "-1" }, h(ElementTagType, { class: classes, href: href, target: this.linkIsExternal(href) ? '_blank' : target }, icon && iconPosition === Bcm.IconPosition.prefix && h("bcm-icon", { class: "prefix-icon", icon: icon }), h("slot", null), this.linkIsExternal(href) && h("bcm-icon", { class: "suffix-icon", icon: "far fa-external-link-alt" }))));
+    return (h(Host, { disabled: disabled, class: hostClasses }, h(ElementTagType, { class: classes, href: href, target: this.linkIsExternal(href) ? '_blank' : target }, icon && iconPosition === Bcm.IconPosition.prefix && h("bcm-icon", { class: "prefix-icon", icon: icon }), h("slot", null), this.linkIsExternal(href) && h("bcm-icon", { class: "suffix-icon", icon: "far fa-external-link-alt" }))));
   }
   static get is() { return "bcm-link"; }
   static get originalStyleUrls() {

package/dist/collection/components/molecules/button-group/button-group.css

@@ -123,7 +123,9 @@
   margin-right: 8px;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -412,7 +414,11 @@
   justify-content: flex-start;
   flex-wrap: nowrap;
 }
+.bcm-button-group__vertical .bcm-button {
+  width: 100%;
+}
 .bcm-button-group__vertical .bcm-button__container {
+  width: 100%;
   border-radius: 0;
 }
 .bcm-button-group__vertical .bcm-button:first-child .bcm-button__container {

package/dist/collection/components/molecules/card/card.css

@@ -123,7 +123,9 @@
   margin-right: 8px;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;

package/dist/collection/components/molecules/checkbox/checkbox.css

@@ -125,7 +125,9 @@
   margin-right: 8px;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -428,7 +430,9 @@
   min-height: calc(14px + 8px);
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -776,7 +780,9 @@
   margin: 0;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -1061,6 +1067,7 @@
   appearance: none;
   background-color: #fff;
   margin: 0;
+  display: none;
 }
 .bcm-checkbox__input {
   display: flex;

package/dist/collection/components/molecules/checkbox/checkbox.js

@@ -150,7 +150,7 @@ export class BcmCheckbox {
     });
     const bcmCheckboxLabelClass = cs('bcm-checkbox__label');
     const bcmCheckboxInputClass = cs('bcm-checkbox__input');
-    return (h(Host, { tabindex: "1", onFocus: () => this.focus.emit(this.el), onBlur: () => this.blur.emit(this.el), style: this.setColor(this.color), class: bcmCheckboxClass, disabled: disabled }, h("span", { hidden: true }, h("slot", null)), label && h("bcm-label", { htmlFor: `input-${_id}`, type: captionType, value: label, required: required }), h("div", { class: bcmCheckboxInputClass }, h("input", { id: `input-${_id}`, type: "checkbox", tabindex: "-1", checked: checked, disabled: disabled, required: required, readonly: readonly, onChange: () => { !disabled && !readonly && (this.handleChange()); }, ref: el => (this.inputElement = el) }), h("label", { class: bcmCheckboxLabelClass, htmlFor: `input-${_id}` }, h("span", { class: bcmCheckboxIconClass }, h("bcm-icon", { icon: "far fa-check" })), h(SlotTemplate, { className: "slot" }))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
+    return (h(Host, { tabindex: "0", onFocus: () => this.focus.emit(this.el), onBlur: () => this.blur.emit(this.el), style: this.setColor(this.color), class: bcmCheckboxClass, disabled: disabled }, h("span", { hidden: true }, h("slot", null)), label && h("bcm-label", { htmlFor: `input-${_id}`, type: captionType, value: label, required: required }), h("div", { class: bcmCheckboxInputClass }, h("input", { id: `input-${_id}`, type: "checkbox", checked: checked, disabled: disabled, required: required, readonly: readonly, onChange: () => { !disabled && !readonly && (this.handleChange()); }, ref: el => (this.inputElement = el) }), h("label", { class: bcmCheckboxLabelClass, htmlFor: `input-${_id}` }, h("span", { class: bcmCheckboxIconClass }, h("bcm-icon", { icon: "far fa-check" })), h(SlotTemplate, { className: "slot" }))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
   }
   static get is() { return "bcm-checkbox"; }
   static get originalStyleUrls() {

package/dist/collection/components/molecules/color-input/color-input.css

@@ -0,0 +1,127 @@
+@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;
+}
+
+/**
+ * Generator
+ */
+.input-size-large {
+  height: 40px;
+}
+
+.input-size-medium {
+  height: 32px;
+}
+
+.input-size-small {
+  height: 24px;
+}
+
+.resize-none textarea {
+  resize: none;
+}
+
+.resize-vertical textarea {
+  resize: vertical;
+}
+
+.resize-auto textarea {
+  height: auto;
+  resize: none;
+}
+
+.textarea-size-large {
+  padding: 4px 0 0 4px;
+  min-height: 40px;
+}
+.textarea-size-large .bcm-input-element {
+  min-height: calc((40px - 8px) + 2px);
+}
+.textarea-size-large .input-clear-button {
+  height: calc( 40px - 16px );
+  top: 8px;
+  padding: 0;
+  margin-right: 8px;
+}
+
+.textarea-size-medium {
+  padding: 4px 0 0 4px;
+  min-height: 32px;
+}
+.textarea-size-medium .bcm-input-element {
+  min-height: calc((32px - 8px) + 2px);
+}
+.textarea-size-medium .input-clear-button {
+  height: calc( 32px - 16px );
+  top: 8px;
+  padding: 0;
+  margin-right: 8px;
+}
+
+.textarea-size-small {
+  padding: 0px 0 0 4px;
+  min-height: 24px;
+}
+.textarea-size-small .bcm-input-element {
+  min-height: calc((24px - 8px) + 2px);
+}
+.textarea-size-small .input-clear-button {
+  height: calc( 24px - 16px );
+  top: 8px;
+  padding: 0;
+  margin-right: 8px;
+}
+
+:host {
+  display: block;
+}