bromcom-ui 2.3.57 → 2.3.58

package/dist/cjs/bcm-checkbox-group.cjs.entry.js

@@ -1,273 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ce8878ec.js');
-const index$1 = require('./index-2f62bdaf.js');
-
-const groupCss = "@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:block;width:100%}:host(.hidden){display:none}:host(.error) .label{color:var(--bcm-color-red-6) !important}.group-container{display:flex;gap:24px}.group-container.vertical{gap:unset;flex-direction:column}.group-container.button{gap:unset}.group-container.full-width{max-width:100%}.indeterminate{padding:0 0 16px 0;margin-bottom:16px;border-bottom:1px solid #efefef;}.indeterminate input{display:none}.indeterminate label{display:flex;align-items:center;font-size:14px;color:var(--bcm-color-grey-8);cursor:pointer}.indeterminate label .icon-checked{display:none}.indeterminate span{position:relative;display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:1px solid #D9D9D9;margin-right:8px;border-radius:2px}.indeterminate span:after{content:\"\";position:absolute;top:50%;left:50%;width:10px;height:10px;background-color:var(--bcm-color-prime-blue-6);transform:translate(-50%, -50%);opacity:0}.indeterminate bcm-icon{filter:brightness(0) invert(1)}.indeterminate input[disabled]+label{cursor:not-allowed}.indeterminate input[disabled]+label span{background-color:var(--bcm-color-grey-3);border-color:var(--bcm-color-grey-5)}.indeterminate input[disabled]+label span:after{background-color:var(--bcm-color-grey-6)}.indeterminate input[disabled]+label bcm-icon{filter:brightness(0);opacity:0.3}.indeterminate input:not([disabled])+label:hover span{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}.indeterminate.bcm-uncheck label span{background-color:#ffffff}.indeterminate.bcm-determinate bcm-icon{display:block}.indeterminate.bcm-determinate label span{background-color:var(--bcm-color-prime-blue-6);border-color:transparent}.indeterminate.bcm-determinate label span:after{opacity:0}.indeterminate.bcm-indeterminate bcm-icon{display:none !important}.indeterminate.bcm-indeterminate label span{background-color:#ffffff}.indeterminate.bcm-indeterminate label span:after{opacity:1}.label{display:flex;flex-direction:column;color:var(--bcm-color-grey-9);margin-bottom:8px}";
-
-const BcmCheckboxGroup = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.groupChange = index.createEvent(this, "bcm-group-change", 7);
-    this.groupCheckedList = index.createEvent(this, "bcm-group-checked-list", 7);
-    /**
-     * Private variables
-     */
-    this.checkboxes = [];
-    /**
-     * Component Properties
-     */
-    this.direction = 'horizontal';
-    this.items = [];
-    this.indeterminate = false;
-    this.disabled = false;
-    this.hidden = false;
-    this.required = false;
-    this.label = null;
-    this.gap = null;
-    this.fullWidth = "false";
-    this.optionType = 'default';
-    this.buttonStyle = 'solid';
-    this.size = 'medium';
-    this.noCaption = false;
-    this.captionType = 'default';
-    /**
-     * Component State Variables
-     */
-    this.indeterminateState = 'uncheck';
-    this.checkboxesProp = [];
-  }
-  /**
-   * @ComponentMethod
-   */
-  componentWillLoad() {
-    this.parseItems(this.items);
-    this.parseOptions();
-  }
-  /**
-   * @ComponentMethod
-   */
-  connectedCallback() { }
-  componentDidLoad() {
-    let checkboxesInit = [];
-    checkboxesInit = this.getAllInputs();
-    checkboxesInit.map(checkbox => {
-      if (this.fullWidth != "false") {
-        if (this.fullWidth === "flex") {
-          checkbox.style.flex = "auto";
-        }
-        else {
-          checkbox.style.width = "100%";
-        }
-      }
-      this.optionType && (checkbox.optionType = this.optionType);
-      this.buttonStyle && (checkbox.buttonStyle = this.buttonStyle);
-      this.size && (checkbox.size = this.size);
-      // this.required == true && checkbox.required == true && (
-      //     checkbox.required = true
-      // )
-      this.disabled == true && (checkbox.disabled = true);
-    });
-    this.groupChecked().then(values => this.value = values);
-  }
-  async setClear() {
-    const checkboxesInit = this.getAllInputs();
-    checkboxesInit.map(checkbox => {
-      checkbox.setClear();
-      checkbox.noCaption = this.noCaption;
-    });
-  }
-  async resetCaption() {
-    const checkboxesInit = this.getAllInputs();
-    checkboxesInit.map(checkbox => {
-      checkbox.resetCaption();
-      checkbox.noCaption = this.noCaption;
-    });
-  }
-  /**
-  * @ComponentMethod
-  */
-  componentDidRender() {
-    let slotElements;
-    slotElements = this.el.shadowRoot.querySelector('slot').assignedElements();
-    this.checkboxes = [];
-    // Get only bcm-checkbox elements from 
-    // slot childs
-    slotElements.map(element => {
-      String(element.tagName).toLowerCase() == 'bcm-checkbox'
-        && this.checkboxes.push(element);
-    });
-    this.setIndeterminateState();
-    if (this.items.length > 0) {
-      let checkboxesInit = [];
-      checkboxesInit = this.getAllInputs();
-      checkboxesInit.map(checkbox => {
-        this.defaultValueState && (this.defaultValueState.find(e => e === checkbox.name) && checkbox.check(checkbox.name));
-      });
-    }
-  }
-  componentDidUpdate() {
-    this.handleChange();
-  }
-  /**
-   * @desc
-   */
-  inputChange() {
-    this.groupChecked().then(values => this.value = values);
-    this.setIndeterminateState();
-  }
-  /**
-   * @desc Returns merged slot and prop
-   * checkbox items
-   * @returns {Array<BcmCheckbox>}
-   */
-  getAllInputs() {
-    return [
-      ...this.checkboxes,
-      ...this.el.shadowRoot.querySelectorAll('bcm-checkbox')
-    ];
-  }
-  /**
-   * @desc
-   * @returns {void}
-   */
-  setIndeterminateState() {
-    let state = 'uncheck';
-    let allChecked = true;
-    let allUnchecked = true;
-    this.getAllInputs().map((checkbox) => {
-      checkbox.checked && (allUnchecked = false);
-      !checkbox.checked && (allChecked = false);
-    });
-    !allChecked && !allUnchecked
-      ? state = 'indeterminate'
-      : allChecked
-        ? state = 'determinate'
-        : state = 'uncheck';
-    this.indeterminateState = state;
-  }
-  /**
-   * @desc
-   * @param event
-   */
-  indeterminateClick() {
-    if (this.disabled == false) {
-      let checkAll = true;
-      if (this.indeterminateState == 'determinate') {
-        checkAll = false;
-      }
-      this.getAllInputs().map((checkbox) => {
-        checkbox.check(checkAll);
-      });
-    }
-  }
-  parseOptions() {
-    if (this.defaultValue) {
-      this.defaultValueState = JSON.parse(this.defaultValue);
-    }
-  }
-  /**
-   * @desc
-   * @param newValue
-   * @returns {void}
-   */
-  parseItems(newValue) {
-    if (newValue) {
-      typeof newValue == 'string'
-        ? this.checkboxesProp = JSON.parse(newValue)
-        : this.checkboxesProp = newValue;
-    }
-  }
-  /**
-   * @desc
-   * @param name -
-   * @returns {boolean | Array<any>}
-   */
-  async check(options) {
-    if (options) {
-      typeof options == 'string'
-        ? options = JSON.parse(options)
-        : options = options;
-    }
-    let checkboxes = [];
-    checkboxes = this.getAllInputs();
-    const inBoth = (list1, list2) => list1.filter(a => true === list2.some(b => a.name === b.name));
-    let optionsArray = options;
-    inBoth(checkboxes, options).map(item => {
-      item.check(optionsArray.find(x => x.name === item.name).checked);
-    });
-  }
-  /**
-   * @desc
-   * @param name -
-   * @returns {boolean | Array<any>}
-   */
-  async groupChecked(name) {
-    let retVal = null;
-    let checkeds = {};
-    let checkboxes = [];
-    if (typeof retVal != 'boolean' && !retVal) {
-      retVal = checkeds;
-    }
-    // Merge slotted items with prop items
-    // #
-    checkboxes = this.getAllInputs();
-    checkboxes.map(checkbox => {
-      checkbox.checked && (checkeds[checkbox.name] = {
-        value: true,
-        name: checkbox.name
-      });
-      !checkbox.checked && (checkeds[checkbox.name] = {
-        value: false,
-        name: checkbox.name
-      });
-      if (checkbox.name === name) {
-        retVal = checkbox.checked;
-      }
-    });
-    return retVal;
-  }
-  handleChange() {
-    let checkeds = {};
-    let changes = {};
-    let checkboxes = [];
-    checkboxes = this.getAllInputs();
-    checkboxes.map(checkbox => {
-      checkbox.checked && (checkeds[checkbox.name] = {
-        value: true,
-        name: checkbox.name
-      });
-      changes[checkbox.name] = {
-        value: checkbox.checked ? true : false,
-        name: checkbox.name
-      };
-    });
-    this.groupChange.emit(changes);
-    this.groupCheckedList.emit(checkeds);
-  }
-  render() {
-    const { checkboxesProp, indeterminate, disabled, label, required, captionType } = this;
-    const groupContainerClasses = index$1.classnames('group-container', this.direction, this.optionType, this.fullWidth, {
-      'full-width': this.fullWidth
-    });
-    const indeterminateClasses = index$1.classnames('indeterminate', 'bcm-' + this.indeterminateState, {
-      'disabled': disabled
-    });
-    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null, {
-      'error': captionType == 'error' ? true : false
-    });
-    var customStyle = {};
-    this.gap && (customStyle = { 'gap': this.gap });
-    return (index.h(index.Host, { class: hostClasses, "on-bcm-change": () => this.inputChange() }, label && index.h("label", { class: "label size-1" }, " ", label, " ", required && ('*'), "  "), indeterminate && (index.h("div", { class: indeterminateClasses }, index.h("input", { id: "bcm-indeterminate-element", type: "checkbox", disabled: disabled }), index.h("label", { htmlFor: "bcm-indeterminate-element", "on-click": () => this.indeterminateClick() }, index.h("span", null, index.h("bcm-icon", { class: "icon-checked", icon: "component-check", size: "small", type: "default" })), "Check All"))), index.h("div", { class: groupContainerClasses, style: customStyle }, checkboxesProp && this.checkboxesProp.map((checkbox) => index.h("bcm-checkbox", { name: checkbox.name, checked: checkbox.checked, disabled: checkbox.disabled, required: this.required === true && checkbox.required === true && (true), noCaption: this.noCaption, optionType: this.optionType, buttonStyle: this.buttonStyle, size: this.size, "full-width": this.fullWidth }, checkbox.label)), index.h("slot", null))));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "defaultValue": ["parseOptions"],
-    "items": ["parseItems"]
-  }; }
-};
-BcmCheckboxGroup.style = groupCss;
-
-exports.bcm_checkbox_group = BcmCheckboxGroup;

package/dist/cjs/bcm-checkbox.cjs.entry.js

@@ -1,143 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ce8878ec.js');
-const index$1 = require('./index-2f62bdaf.js');
-const colors = require('./colors-7fb8d76f.js');
-const utils = require('./utils-60414768.js');
-
-/**
- * 'color' prop predefined values
- */
-var ColorProps;
-(function (ColorProps) {
-  ColorProps["black"] = "black";
-  ColorProps["white"] = "white";
-  ColorProps["prime-blue"] = "prime-blue";
-  ColorProps["grey"] = "grey";
-  ColorProps["blue"] = "blue";
-  ColorProps["warmyellow"] = "warmyellow";
-  ColorProps["yellow"] = "yellow";
-  ColorProps["limegreen"] = "limegreen";
-  ColorProps["red"] = "red";
-  ColorProps["darkorange"] = "darkorange";
-  ColorProps["orange"] = "orange";
-  ColorProps["green"] = "green";
-  ColorProps["turquosie"] = "turquosie";
-  ColorProps["cobaltblue"] = "cobaltblue";
-  ColorProps["magenta"] = "magenta";
-  ColorProps["purple"] = "purple";
-  ColorProps["bc-red"] = "bc-red";
-  ColorProps["bc-blue"] = "bc-blue";
-  ColorProps["bc-green"] = "bc-green";
-  ColorProps["bc-orange"] = "bc-orange";
-})(ColorProps || (ColorProps = {}));
-
-const checkboxCss = "@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}:host(.hidden){display:none}input{display:none}.svg-icon{filter:brightness(0) invert(1);width:12px;height:12px}label{display:flex;align-items:flex-start;font-size:14px;color:var(--bcm-color-grey-8);cursor:pointer}label span.icon{display:flex;align-items:center;justify-content:center;min-width:16px;min-height:16px;border:1px solid #D9D9D9;margin-right:8px;border-radius:2px;margin-top:2px;background-color:var(--bcm-color-grey-1)}:host(.indeterminate) label span.icon{position:relative}:host(.indeterminate) label span.icon::after{content:\"\";position:absolute;top:50%;left:8px;width:10px;height:10px;background-color:var(--bcm-color-prime-blue-6);transform:translate(-50%, -50%);opacity:1;z-index:1}:host(.indeterminate) label span.icon::before{content:\"\";position:absolute;top:-1px;left:-1px;width:16px;height:100%;border-radius:2px;background-color:var(--bcm-color-grey-1);border:1px solid var(--bcm-color-grey-5);opacity:1;z-index:1}:host(.indeterminate) label span.icon:hover:not(.disabled):before{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}input:checked+label span.icon{background-color:var(--bcm-color-prime-blue-6);border-color:transparent}input:checked+label .icon-checked{display:block}bcm-icon{filter:brightness(0) invert(1)}input[disabled]+label{cursor:not-allowed}input[disabled]+label span.icon{background-color:var(--bcm-color-grey-3);border-color:var(--bcm-color-grey-5)}input[disabled]+label bcm-icon{filter:brightness(0);opacity:0.3}input:not([disabled])+label:hover span.icon{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}:host(.error) input:not([disabled])+label span.icon{border-color:var(--bcm-color-red-6)}.caption-area{margin-bottom:8px;min-height:20px;display:block}.input-caption{display:block}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.radio-button{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-grey-8);border:1px solid var(--bcm-color-grey-5);padding:0 16px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.radio-button>span.icon{display:none}.radio-button>span.slot{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;user-select:none}.radio-button:hover:not(.disabled){color:var(--bcm-color-prime-blue-5)}.radio-button:active:not(.disabled){color:var(--bcm-color-prime-blue-7)}.radio-button.disabled{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-6);cursor:not-allowed}.radio-button.checked.disabled{background-color:var(--bcm-color-grey-4);color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.radio-button.checked.solid{color:var(--bcm-color-grey-1);background-color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.radio-button.checked.solid:hover{background-color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.radio-button.checked.solid:active{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.radio-button.checked.outline{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.radio-button.checked.outline:hover{color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.radio-button.checked.outline:active{color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.radio-button.large{height:40px}.radio-button.medium{height:32px}.radio-button.small{height:24px}";
-
-const BcmCheckbox = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.blur = index.createEvent(this, "bcm-blur", 7);
-    this.focus = index.createEvent(this, "bcm-focus", 7);
-    this.change = index.createEvent(this, "bcm-change", 7);
-    /**
-     * Component Properties
-     */
-    this.value = '';
-    this.name = 'checkbox';
-    this.checked = false;
-    this.disabled = false;
-    this.readOnly = false;
-    this.hidden = false;
-    this.required = false;
-    this.optionType = 'default';
-    this.buttonStyle = 'solid';
-    this.size = 'medium';
-    this.noCaption = false;
-    this.captionType = 'default';
-  }
-  /**
-  * @ComponentMethod
-  */
-  connectedCallback() {
-    this.handleChange = this.handleChange.bind(this);
-    this.captionCache = this.caption;
-    this.captionTypeCache = this.captionType;
-  }
-  async setClear() {
-    if (this.inputElement.checked == true) {
-      this.inputElement.checked = false;
-      this.handleChange();
-    }
-  }
-  async resetCaption() {
-    this.caption = this.captionCache;
-    this.captionType = this.captionTypeCache;
-    this.captionError = null;
-  }
-  componentDidLoad() {
-    this.value = this.inputElement.checked;
-    this.checked = this.value;
-  }
-  /**
-   * @desc
-   * @param event
-   * @returns
-   */
-  handleChange() {
-    this.value = this.inputElement.checked;
-    this.checked = this.value;
-    this.change.emit({
-      name: this.name,
-      value: this.value
-    });
-  }
-  handleFocus() {
-    this.focus.emit();
-  }
-  handleBlur() {
-    this.blur.emit();
-  }
-  /**
-   * @desc
-   * @param name -
-   * @returns {void}
-   */
-  async check(uncheck) {
-    this.inputElement.checked = uncheck;
-    this.handleChange();
-  }
-  getColor(color) {
-    if (this.color !== 'default' && this.optionType == 'button' && this.checked)
-      return {
-        // color:              extractColor(ColorPalette, ColorProps[color] + '-6'),
-        borderColor: utils.extractColor(colors.ColorPalette, ColorProps[color] + '-5'),
-        backgroundColor: utils.extractColor(colors.ColorPalette, ColorProps[color] + '-5')
-      };
-  }
-  render() {
-    const { disabled, checked, readOnly, name, handleChange, required, caption, captionError, captionType, noCaption, buttonStyle, size, optionType } = this;
-    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null, {
-      'error': captionType == 'error' ? true : false
-    });
-    const captionClasses = index$1.classnames('size-1', 'input-caption', 'caption-' + captionType);
-    const defaultClasses = index$1.classnames();
-    const buttonClasses = index$1.classnames('radio-button', buttonStyle, size, {
-      'size-2': size === 'small' || size === 'medium',
-      'size-3': size === 'large',
-      'checked': checked,
-      'disabled': disabled,
-    });
-    var fontColor = utils.extractColor(colors.ColorPalette, ColorProps[this.color] + '-6');
-    var style = "<style>.radio-button:not(.checked):hover{color: " + fontColor + "} </style>";
-    return (index.h(index.Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }, index.h("input", { id: name, type: "checkbox", checked: checked, disabled: disabled, required: required, readOnly: readOnly, onChange: handleChange, ref: el => (this.inputElement = el) }), optionType == 'button' && (index.h("span", { innerHTML: style })), index.h("label", { title: optionType == 'button' ? this.el.innerHTML : null, htmlFor: name, class: optionType == 'default' ? defaultClasses : buttonClasses, style: this.getColor(this.color) }, index.h("span", { class: "icon" }, index.h("bcm-icon", { class: "icon-checked", icon: "component-check", size: "small", type: "default" })), index.h("span", { class: "slot" }, index.h("slot", null))), !noCaption && (index.h("div", { class: "caption-area" }, captionType == "error"
-      ? index.h("span", { class: captionClasses }, " ", captionError, " ")
-      : caption && index.h("span", { class: captionClasses }, " ", caption, " ")))));
-  }
-  get el() { return index.getElement(this); }
-};
-BcmCheckbox.style = checkboxCss;
-
-exports.bcm_checkbox = BcmCheckbox;

package/dist/cjs/bcm-switch.cjs.entry.js

@@ -1,86 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ce8878ec.js');
-const index$1 = require('./index-2f62bdaf.js');
-
-const switchCss = "@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-block;width:100%;margin:0 0 8px 0}:host(.hidden){display:none}*{box-sizing:border-box}.wrapper{display:inline-flex;padding-top:0px;padding-bottom:5px}.wrapper .active-text{color:var(--bcm-color-prime-blue-6);margin-left:4px}.wrapper .inactive-text{color:var(--bcm-color-grey-6);margin-right:4px}.container{display:flex;justify-content:space-between;align-items:center;border-radius:16px;background-color:var(--bcm-color-grey-6);position:relative}.container .handle{padding:1px;position:absolute;background-color:var(--bcm-color-grey-1);display:inline-flex;align-items:center;justify-content:center;border-radius:16px;transition:all 0.2s ease-in-out;box-shadow:0px 2px 2px rgba(0, 0, 0, 0.1), 0px 3px 1px rgba(0, 0, 0, 0.05), 0px 1px 5px rgba(0, 0, 0, 0.1)}.container .icon-active{opacity:0}.container .icon-inactive{opacity:1}.container.small{width:28px;min-width:28px;height:16px;padding:4px}.container.small .handle{width:12px;height:12px;left:4px}.container.small.switch-checked .handle{left:12px}.container.small:active:not(.disabled) .handle{width:16px}.container.small:active.switch-checked:not(.disabled) .handle{left:8px}.container.small .spinner{box-sizing:border-box;display:inline-flex;width:9px;height:9px;border-radius:50%;border:1px solid var(--bcm-color-grey-1);border-top-color:var(--bcm-color-grey-6);animation:spinner 1.5s linear infinite}.container.medium{width:44px;min-width:44px;height:22px;padding:4px}.container.medium .handle{width:16px;height:16px;left:4px}.container.medium.switch-checked .handle{left:24px}.container.medium:active:not(.disabled) .handle{width:22px}.container.medium:active.switch-checked:not(.disabled) .handle{left:18px}.container.medium .spinner{box-sizing:border-box;display:inline-flex;width:13px;height:13px;border-radius:50%;border:1px solid var(--bcm-color-grey-1);border-top-color:var(--bcm-color-grey-6);animation:spinner 1.5s linear infinite}.container.switch-checked{background-color:var(--bcm-color-prime-blue-6)}.container.switch-checked .icon-active{color:var(--bcm-color-grey-1);opacity:1}.container.switch-checked .icon-inactive{opacity:0}.container.switch-checked .spinner{border-top-color:var(--bcm-color-prime-blue-6)}.wrapper.disabled{opacity:40%;cursor:not-allowed}@keyframes spinner{to{transform:rotate(360deg)}}input[type=checkbox]{position:absolute;width:0;height:0;opacity:0}.label{display:flex;flex-direction:column;color:var(--bcm-color-grey-9);padding-right:4px;margin-right:8px;margin-bottom:8px}.caption-area{min-height:20px}.input-caption{display:block}:host(.error) .label{color:var(--bcm-color-red-6) !important}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}";
-
-const BcmSwitch = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.change = index.createEvent(this, "bcm-change", 7);
-    this.focus = index.createEvent(this, "bcm-focus", 7);
-    this.blur = index.createEvent(this, "bcm-blur", 7);
-    this.checked = false;
-    this.size = 'medium';
-    this.pending = false;
-    this.disabled = false;
-    this.hidden = false;
-    this.value = '';
-    this.label = null;
-    this.required = false;
-    this.noCaption = false;
-    this.captionType = 'default';
-  }
-  connectedCallback() {
-    this.captionCache = this.caption;
-    this.captionTypeCache = this.captionType;
-  }
-  handleClick() {
-    this.checked = this.input.checked;
-    this.value = this.checked;
-    this.change.emit(this.checked);
-  }
-  componentDidLoad() {
-    this.value = this.checked;
-  }
-  handleFocus() {
-    this.focus.emit();
-  }
-  handleBlur() {
-    this.blur.emit();
-  }
-  componentWillRender() {
-    if (this.pending) {
-      this.disabled = true;
-    }
-  }
-  async setClear() {
-    if (this.input.checked == true) {
-      this.input.checked = false;
-      this.checked = this.input.checked;
-      this.value = this.checked;
-      this.change.emit(this.checked);
-    }
-  }
-  async resetCaption() {
-    this.caption = this.captionCache;
-    this.captionType = this.captionTypeCache;
-    this.captionError = null;
-  }
-  render() {
-    const { checked, size, activeIcon, inactiveIcon, activeText, inactiveText, pending, disabled, label, required, noCaption, captionType, captionError, caption } = this;
-    const classes = index$1.classnames('container', size, {
-      'switch-checked': checked,
-      'disabled': disabled
-    });
-    const wrapperClass = index$1.classnames('wrapper', {
-      'checked': checked,
-      'disabled': disabled
-    });
-    const captionClasses = index$1.classnames('size-1', 'input-caption', 'caption-' + captionType);
-    const isPermitted = (condition) => {
-      return (condition && size === 'medium');
-    };
-    const isMedium = size === 'medium';
-    const hostClasses = index$1.classnames('switch', this.hidden ? 'hidden' : null);
-    return (index.h(index.Host, { class: hostClasses }, label && index.h("label", { class: "label size-1" }, " ", label, " ", required && ('*'), "  "), index.h("label", { class: wrapperClass }, isPermitted(inactiveText) && index.h("span", { class: "inactive-text size-1" }, inactiveText), index.h("div", { class: classes }, isMedium && index.h("bcm-icon", { icon: activeIcon, size: 14, class: "icon-active" }), index.h("span", { class: "handle" }, pending && index.h("span", { class: "spinner" })), isMedium && index.h("bcm-icon", { icon: inactiveIcon, size: 14, class: "icon-inactive" })), index.h("input", { onClick: () => this.handleClick(), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur(), ref: el => (this.input = el), checked: checked, type: "checkbox", class: "switch", disabled: disabled }), isPermitted(activeText) && index.h("span", { class: "active-text size-1" }, activeText)), !noCaption && (index.h("div", { class: "caption-area" }, captionType == "error"
-      ? index.h("span", { class: captionClasses }, " ", captionError, " ")
-      : caption && index.h("span", { class: captionClasses }, " ", caption, " ")))));
-  }
-};
-BcmSwitch.style = switchCss;
-
-exports.bcm_switch = BcmSwitch;

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

@@ -1,36 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ce8878ec.js');
-const index$1 = require('./index-2f62bdaf.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) {
-    index.registerInstance(this, hostRef);
-    this.hidden = false;
-  }
-  connectedCallback() { }
-  disconnectedCallback() { }
-  componentWillLoad() { }
-  componentDidLoad() { }
-  componentWillRender() { }
-  componentDidRender() { }
-  componentWillUpdate() { }
-  componentDidUpdate() { }
-  async openBox(open) {
-    this.open = open;
-  }
-  render() {
-    const classes = index$1.classnames('tooltip-box', this.open, this.placement);
-    const boxClasses = index$1.classnames('box');
-    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null);
-    return (index.h(index.Host, { class: hostClasses }, index.h("div", { class: classes }, index.h("div", { class: boxClasses, innerHTML: this.message }))));
-  }
-  get el() { return index.getElement(this); }
-};
-BcmTooltipBox.style = tooltipBoxCss;
-
-exports.bcm_tooltip_box = BcmTooltipBox;