bromcom-ui 2.8.0-rc.10-c → 2.8.0-rc.10-e

package/dist/collection/collection-manifest.json

@@ -1,14 +1,17 @@
 {
   "entries": [
-    "./components/molecules/radio/radio-group.js",
+    "./components/molecules/radio/group.js",
     "./components/atoms/avatar/avatar.js",
     "./components/atoms/badge/badge.js",
+    "./components/atoms/box/box.js",
     "./components/atoms/button/button.js",
     "./components/atoms/chip/chip.js",
     "./components/atoms/divider/divider.js",
     "./components/atoms/icon/icon.js",
     "./components/atoms/label/label.js",
     "./components/atoms/link/link.js",
+    "./components/atoms/tag/tag.js",
+    "./components/atoms/typography/typography.js",
     "./components/molecules/accordion/accordion.js",
     "./components/molecules/stepper/stepper.js",
     "./components/molecules/alert/alert.js",
@@ -18,8 +21,6 @@
     "./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",
@@ -45,13 +46,12 @@
     "./components/molecules/stepper/step.js",
     "./components/molecules/switch/switch.js",
     "./components/molecules/tab-group/tab-group.js",
-    "./components/molecules/tab-group/tab-item-header.js",
-    "./components/molecules/tab-group/tab-item.js",
     "./components/molecules/textarea/textarea.js",
     "./components/molecules/timeline/timeline-item.js",
     "./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",
@@ -60,20 +60,10 @@
     "./components/organism/list/list.js",
     "./components/organism/time-picker/time-picker.js",
     "./components/other/attendance/attendance.js",
-    "./components/other/box/box.js",
     "./components/other/data-table/table.js",
     "./components/other/default/default.js",
-    "./components/other/input-custom/input-custom.js",
-    "./components/other/modal-2/modal-2-footer.js",
-    "./components/other/modal-2/modal-2-header.js",
-    "./components/other/modal-2/modal-2.js",
-    "./components/other/overlay/overlay.js",
-    "./components/other/scroll-area/scroll-area.js",
-    "./components/other/toast/toast.js",
-    "./components/other/typography/typography.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",
@@ -90,7 +80,6 @@
     "./components/other_deprecated/tabs/tab.js",
     "./components/other_deprecated/tabs/tabs-content.js",
     "./components/other_deprecated/tabs/tabs.js",
-    "./components/other_deprecated/tag/tag.js",
     "./components/other_deprecated/text/text.js",
     "./components/other_deprecated/treeview/treeview-group.js",
     "./components/other_deprecated/treeview/treeview-item.js",

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

@@ -123,9 +123,7 @@
   margin-right: 8px;
 }
 
-:root,
-::after,
-::before {
+:root {
   --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,9 +123,7 @@
   margin-right: 8px;
 }
 
-:root,
-::after,
-::before {
+:root {
   --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,9 +123,7 @@
   margin-right: 8px;
 }
 
-:root,
-::after,
-::before {
+:root {
   --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, 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, 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 })));
   }
   static get is() { return "bcm-button"; }
   static get originalStyleUrls() {

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

@@ -123,9 +123,7 @@
   margin-right: 8px;
 }
 
-:root,
-::after,
-::before {
+:root {
   --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 { h, Host } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 import { IsLoad } from '../../../decorators/is-load-decorator';
 import { Generate } from '../../../helper/generate';
 import cs from 'classnames';
@@ -27,7 +27,6 @@ export class BcmChip {
     this.disabled = undefined;
     this.color = undefined;
   }
-  // @ts-ignore
   setColor() {
     if (!this.color)
       return;
@@ -51,7 +50,8 @@ export class BcmChip {
       'bcm-chip--disabled': disabled,
       'bcm-chip--avatar': avatar,
     });
-    return (h(Host, { class: hostClasses, tabindex: "0", disabled: disabled, style: this.setColor() }, avatar && h("bcm-avatar", Object.assign({ size: size }, (color && { color }), (avatar && { image: avatar }))), type === 'addable' && (h("span", { class: "bcm-chip__left" }, h("bcm-icon", { icon: "far fa-plus" }))), 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: "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" })))));
   }
   static get is() { return "bcm-chip"; }
   static get originalStyleUrls() {

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

@@ -123,9 +123,7 @@
   margin-right: 8px;
 }
 
-:root,
-::after,
-::before {
+:root {
   --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,9 +123,7 @@
   margin-right: 8px;
 }
 
-:root,
-::after,
-::before {
+:root {
   --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 }, 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, 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" }))));
   }
   static get is() { return "bcm-link"; }
   static get originalStyleUrls() {

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

@@ -123,9 +123,7 @@
   margin-right: 8px;
 }
 
-:root,
-::after,
-::before {
+:root {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -414,11 +412,7 @@
   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,9 +123,7 @@
   margin-right: 8px;
 }
 
-:root,
-::after,
-::before {
+:root {
   --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,9 +125,7 @@
   margin-right: 8px;
 }
 
-:root,
-::after,
-::before {
+:root {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -430,9 +428,7 @@
   min-height: calc(14px + 8px);
 }
 
-:root,
-::after,
-::before {
+:root {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -780,9 +776,7 @@
   margin: 0;
 }
 
-:root,
-::after,
-::before {
+:root {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -1067,7 +1061,6 @@
   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: "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 })));
+    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 })));
   }
   static get is() { return "bcm-checkbox"; }
   static get originalStyleUrls() {

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

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

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

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

package/dist/collection/components/molecules/error-layout/error-layout.css

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

package/dist/collection/components/molecules/expansion-panel/expansion-panel.css

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

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

@@ -125,9 +125,7 @@
   margin-right: 8px;
 }
 
-:root,
-::after,
-::before {
+:root {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -430,9 +428,7 @@
   min-height: calc(14px + 8px);
 }
 
-:root,
-::after,
-::before {
+:root {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -780,9 +776,7 @@
   margin: 0;
 }
 
-:root,
-::after,
-::before {
+:root {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -1171,7 +1165,6 @@
 }
 .bcm-input__container .input-suffix:not(:empty) {
   min-width: 24px;
-  padding-right: 4px;
 }
 .bcm-input__container .input-prefix:not(:empty),
 .bcm-input__container .input-suffix:not(:empty) {
@@ -1179,11 +1172,11 @@
   align-items: center;
   justify-content: center;
   cursor: default;
-  color: #64748a;
+  color: var(--bcm-color-grey-8);
 }
 .bcm-input__container .input-prefix:not(:empty) .unit-prefix,
 .bcm-input__container .input-suffix:not(:empty) .unit-prefix {
-  color: #64748a;
+  color: var(--bcm-color-grey-8);
 }
 .bcm-input__container .input-prefix-button:not(:empty),
 .bcm-input__container .input-suffix-button:not(:empty) {

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

@@ -138,8 +138,7 @@ export class BcmInput {
   async getValue() {
     return this.value;
   }
-  watchValue(newValue) {
-    this.inputElement.value = newValue;
+  watchValue() {
     if (!this.disableWatchValue && this.type != "number") {
       this.handleChange();
     }
@@ -305,32 +304,6 @@ export class BcmInput {
     }
     return val;
   }
-  eyeDropper() {
-    const eyeDropper = new window.EyeDropper();
-    eyeDropper
-      .open()
-      .then((color) => {
-      console.log("color: ", color.sRGBHex);
-      this.setValue(color.sRGBHex);
-    })
-      .catch((error) => {
-      if (error.name === "NotAllowedError") {
-        console.log("Permission to access sensor was denied.");
-      }
-      else if (error.name === "NotSupportedError") {
-        console.log("Sensor not supported.");
-      }
-    });
-  }
-  isEyeDropperSupported() {
-    return typeof window !== "undefined" && "EyeDropper" in window;
-  }
-  toggleLinked() {
-    const linkedElement = document.getElementById(`${this._id}-linked`);
-    if (linkedElement) {
-      linkedElement.toggle();
-    }
-  }
   render() {
     const { value, size, label, type, captionType, caption, captionError, placeholder, fullWidth, disabled, readonly, clearable, passwordToggle, isPasswordVisible, noDefaultIcon, unit, inValid, focused, unitPrefix, noCaption, required, hidden, _id, autocomplete } = this;
     const isActiveClearable = (value === null || value === void 0 ? void 0 : value.length) > 0 && clearable;
@@ -339,8 +312,7 @@ export class BcmInput {
       // 'no-margin': noMargin,
       'full-width': fullWidth
     });
-    return (h(Host, { onfocus: () => this.onBcmFocus(), class: hostClasses, onClick: () => this.onBcmFocus() }, label && h("bcm-label", { onClick: () => this.toggleLinked(), tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: _id }), h(InputTemplate, { id: _id, type: type, value: value, pattern: this.pattern, placeholder: placeholder, disabled: disabled, readonly: readonly, clearable: isActiveClearable, passwordToggle: passwordToggle, isPasswordVisible: isPasswordVisible, noDefaultIcon: noDefaultIcon, focused: focused, inValid: inValid, unitPrefix: unitPrefix, maxLength: this.maxLength, internalId: this._internal_id, captionType: captionType, unit: unit, size: size, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleInput: () => this.handleInput(), steps: (e) => this.stepUpOrDown(e), changePasswordVisibility: () => this.changePasswordVisibility(), handleClear: (e) => this.handleClear(e), eyeDropper: () => this.eyeDropper(), isEyeDropperSupported: () => this.isEyeDropperSupported(), ref: (el) => this.inputElement = el, _suffix: this._suffix, _prefix: this._prefix, autocomplete: autocomplete }), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.customErrorMessage }), type == Bcm.InputType.color &&
-      h("bcm-linked", { targetId: this._id + "-container", id: this._id + "-linked" }, h("bcm-colorful", { id: this._id + "-picker", color: this.value, onBcmChange: e => this.setValue(e.detail) }))));
+    return (h(Host, { tabindex: "-1", onfocus: () => this.onBcmFocus(), class: hostClasses, onClick: () => this.onBcmFocus() }, label && h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: _id }), h(InputTemplate, { id: _id, type: type, value: value, pattern: this.pattern, placeholder: placeholder, disabled: disabled, readonly: readonly, clearable: isActiveClearable, passwordToggle: passwordToggle, isPasswordVisible: isPasswordVisible, noDefaultIcon: noDefaultIcon, focused: focused, inValid: inValid, unitPrefix: unitPrefix, maxLength: this.maxLength, internalId: this._internal_id, captionType: captionType, unit: unit, size: size, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleInput: () => this.handleInput(), steps: (e) => this.stepUpOrDown(e), changePasswordVisibility: () => this.changePasswordVisibility(), handleClear: (e) => this.handleClear(e), ref: (el) => this.inputElement = el, _suffix: this._suffix, _prefix: this._prefix, autocomplete: autocomplete }), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.customErrorMessage })));
   }
   static get is() { return "bcm-input"; }
   static get originalStyleUrls() {
@@ -594,7 +566,7 @@ export class BcmInput {
         "mutable": true,
         "complexType": {
           "original": "InputTypes",
-          "resolved": "\"color\" | \"email\" | \"hidden\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+          "resolved": "\"email\" | \"hidden\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
           "references": {
             "InputTypes": {
               "location": "import",

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

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