bromcom-ui 2.7.38-rc.9 → 2.8.0-rc.0

package/dist/components/bcm-popover.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { I as IsLoad } from './is-load-decorator.js';
 import { C as ColorHelper } from './color-helper.js';
 import './validators.js';
@@ -11,31 +11,39 @@ import './number-helper.js';
 import { S as StringHelper } from './string-helper.js';
 import './element-dragger.js';
 import { a as Bcm } from './bcm.js';
+import { d as delay } from './utils.js';
 import { F as FloatingUI } from './floating-ui.js';
 
 class Popover {
-  constructor({ content, message, targetId, placement = 'top', color = 'slate-700', trigger = 'none' }) {
+  constructor({ content, message, targetId, placement = "top", color = "slate-700", trigger = "none", openDelay = 0, closeDelay = 0, emitShow = () => { }, emitHide = () => { } }) {
+    this.destroy = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        this.el.remove();
+        this.emitHide();
+      }
+      this.removeListener();
+    };
     this.bgColor = () => ColorHelper.twColor(this.color, 700);
     this.exepcitonColors = {
-      white: 'slate-300',
-      black: 'slate-700',
+      white: "slate-300",
+      black: "slate-700",
     };
     this.target = () => document.getElementById(this.targetId);
     this.init = () => {
-      console.log(this.content, this.message);
       const inner = `<div class="tw-z-[1] tw-rounded tw-py-2 tw-bg-${this.bgColor()}">
-            ${this.message ? `<div class="tw-font-medium tw-w-full tw-pb-1 tw-px-4">${StringHelper.trim(this.message)}</div>` : ''}
-            ${this.content ? `<div class="tw-font-normal tw-px-4">${StringHelper.trim(this.content)}</div>` : ''}
+            ${this.message ? `<div class="tw-font-medium tw-w-full tw-pb-1 tw-px-4">${StringHelper.trim(this.message)}</div>` : ""}
+            ${this.content ? `<div class="tw-font-normal tw-px-4">${StringHelper.trim(this.content)}</div>` : ""}
         </div>`;
-      this.el = Generate.createElement('div', {
-        'id': `${this.targetId}-popover-box`,
-        'class': `
+      this.el = Generate.createElement("div", {
+        "id": `${this.targetId}-popover-box`,
+        "class": `
             tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-[256px] tw-rounded tw-bg-${this.bgColor()} tw-text-white tw-text-3 tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300
             tw-shadow`,
-        'role': 'popover',
-        'aria-hidden': 'true',
-        'style': `color: ${ColorHelper.twColorReverse(this.bgColor())}`,
-        'innerHTML': inner,
+        "role": "popover",
+        "aria-hidden": "true",
+        "style": `color: ${ColorHelper.twColorReverse(this.bgColor())}`,
+        "innerHTML": inner,
       });
     };
     this.update = () => {
@@ -46,26 +54,38 @@ class Popover {
       }
     };
     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;
         }
       }
       this.calculatePosition();
     };
+    this.removeListener = () => {
+      window.removeEventListener("resize", this.calculatePosition.bind(this));
+      window.removeEventListener("scroll", this.calculatePosition.bind(this), true);
+      window.removeEventListener("wheel", this.calculatePosition.bind(this));
+      if (this.target()) {
+        this.target().removeEventListener("click", this.toggle.bind(this));
+        this.target().removeEventListener("mouseenter", this.show.bind(this));
+        this.target().removeEventListener("mouseleave", this.hide.bind(this));
+        this.target().removeEventListener("focus", this.show.bind(this), true);
+        this.target().removeEventListener("blur", this.hide.bind(this), true);
+      }
+    };
     this.calculatePosition = () => {
       this.el = document.getElementById(this.id);
       if (this.el) {
@@ -79,19 +99,23 @@ class Popover {
         });
       }
     };
-    this.show = () => {
+    this.show = async () => {
       if (this.message) {
         this.init();
+        await delay(this.openDelay);
         this.calculatePosition();
+        this.emitShow();
       }
       else {
         this.hide();
       }
     };
-    this.hide = () => {
+    this.hide = async () => {
       this.el = document.getElementById(this.id);
       if (this.el) {
+        await delay(this.closeDelay);
         this.el.remove();
+        this.emitHide();
       }
     };
     this.toggle = () => {
@@ -109,7 +133,12 @@ class Popover {
     this.placement = placement;
     this.color = color;
     this.trigger = trigger;
-    this.id = targetId + '-popover-box';
+    this.id = targetId + "-popover-box";
+    this.openDelay = openDelay;
+    this.closeDelay = closeDelay;
+    this.emitShow = emitShow;
+    this.emitHide = emitHide;
+    Generate.observeElementRemoval(document.getElementById(this.targetId), this.destroy.bind(this));
   }
 }
 
@@ -127,6 +156,8 @@ const BcmPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   constructor() {
     super();
     this.__registerHost();
+    this.bcmPopoverShow = createEvent(this, "bcmPopoverShow", 7);
+    this.bcmPopoverHide = createEvent(this, "bcmPopoverHide", 7);
     this._id = Generate.UID();
     this.message = "";
     this.content = "";
@@ -134,13 +165,29 @@ const BcmPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.trigger = Bcm.TriggerType.click;
     this.open = false;
     this.color = "white";
+    this.targetId = undefined;
+    this.openDelay = 0;
+    this.closeDelay = 0;
+    this.popover = undefined;
+  }
+  emitShow() {
+    this.bcmPopoverShow.emit();
+  }
+  emitHide() {
+    this.bcmPopoverHide.emit();
+  }
+  componentWillLoad() {
     this.popover = new Popover({
-      targetId: this._id,
+      targetId: this.targetId || this._id,
       content: this.content,
       message: this.message,
       placement: this.placement,
       color: this.color,
       trigger: this.trigger,
+      openDelay: this.openDelay,
+      closeDelay: this.closeDelay,
+      emitShow: () => this.emitShow(),
+      emitHide: () => this.emitHide(),
     });
   }
   componentDidLoad() {
@@ -155,6 +202,9 @@ const BcmPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.popover.trigger = trigger;
     this.popover.update();
   }
+  disconnectedCallback() {
+    this.popover.destroy();
+  }
   async show() {
     this.popover.show();
   }
@@ -165,7 +215,7 @@ const BcmPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.popover.toggle();
   }
   render() {
-    return (h(Host, { "aria-describedby": "popover", tabindex: "-1", class: "tw-inline-flex tw-h-fit tw-w-fit" }, h("slot", null)));
+    return (h(Host, { "aria-describedby": "popover", class: "tw-inline-flex tw-h-fit tw-w-fit" }, h("slot", null)));
   }
   get el() { return this; }
 }, [4, "bcm-popover", {
@@ -176,6 +226,9 @@ const BcmPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "trigger": [1],
     "open": [1028],
     "color": [1],
+    "targetId": [1, "target-id"],
+    "openDelay": [2, "open-delay"],
+    "closeDelay": [2, "close-delay"],
     "popover": [32],
     "show": [64],
     "hide": [64],

package/dist/components/bcm-select.js

@@ -1207,7 +1207,7 @@ const BcmSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       'overflow': 'hidden',
       'display': 'block'
     };
-    return (h(Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }, h("div", { class: container }, label && h("bcm-label", { onClick: () => this.handleOpen(false), tooltip: this.tooltip, type: captionType, value: label, required: required }), h("div", { id: "selected-container", class: selected, onClick: (e) => this.handleOpen(e), tabIndex: -1 }, h("span", { class: selectedText, title: this.selectText && (this.selectText) }, (this.selectText && (this.selectText)), ((!this.selectText && (this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0)) && (h("span", { id: "tagcontainer", class: "tag-container" }, h("span", null, this.onShowVisibleTags.map((item) => (h("bcm-old-tag", { _internal_id: this._internal_id, customStyle: customStyleTag, onClick: () => this.handleClickTag(), type: "dissmisable", value: item[this.objectMapping['text']], title: item[this.objectMapping['text']], id: item[this.objectMapping['id']], class: "tag" })))), h("span", null, this.onShowHiddenTags.length > 0 && (h("bcm-old-tag", { _internal_id: this._internal_id, title: this.hiddenTagsString, customStyle: customStyleOtherTag, onClick: (e) => this.showHiddenTags(e), color: this.otherTagStatus ? 'prime-blue' : 'grey-9', type: "dissmisable", value: "+ " + this.onShowHiddenTags.length + " item" + (this.onShowHiddenTags.length > 1 ? 's' : '') + " selected", id: "other-tag" })))))), (!(this.selectText || this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0) && placeholder && (h("span", { class: "placeholder" }, " ", placeholder, " ")))), h("div", { class: "buttons" }, clearable && value && (h("button", { class: "select-clear-button", onClick: (e) => this.clickClear(e) }, h("svg", { style: { "fill": "#595959", "width": "14px", "height": "14px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { d: "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z" })))), h("span", { class: this.isOpen ? 'open' : 'close' }, h("svg", { style: { "fill": "#595959", "width": "14px", "height": "14px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" }, h("path", { d: "M168.5 164.2l148 146.8c4.7 4.7 4.7 12.3 0 17l-19.8 19.8c-4.7 4.7-12.3 4.7-17 0L160 229.3 40.3 347.8c-4.7 4.7-12.3 4.7-17 0L3.5 328c-4.7-4.7-4.7-12.3 0-17l148-146.8c4.7-4.7 12.3-4.7 17 0z" }))))), h("div", { class: menu, style: optionViewportStyle }, h("div", { class: optionsViewport })), !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
+    return (h(Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }, h("div", { class: container }, label && h("bcm-label", { onClick: () => this.handleOpen(false), tooltip: this.tooltip, type: captionType, value: label, required: required }), h("div", { id: "selected-container", class: selected, onClick: (e) => this.handleOpen(e) }, h("span", { class: selectedText, title: this.selectText && (this.selectText) }, (this.selectText && (this.selectText)), ((!this.selectText && (this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0)) && (h("span", { id: "tagcontainer", class: "tag-container" }, h("span", null, this.onShowVisibleTags.map((item) => (h("bcm-old-tag", { _internal_id: this._internal_id, customStyle: customStyleTag, onClick: () => this.handleClickTag(), type: "dissmisable", value: item[this.objectMapping['text']], title: item[this.objectMapping['text']], id: item[this.objectMapping['id']], class: "tag" })))), h("span", null, this.onShowHiddenTags.length > 0 && (h("bcm-old-tag", { _internal_id: this._internal_id, title: this.hiddenTagsString, customStyle: customStyleOtherTag, onClick: (e) => this.showHiddenTags(e), color: this.otherTagStatus ? 'prime-blue' : 'grey-9', type: "dissmisable", value: "+ " + this.onShowHiddenTags.length + " item" + (this.onShowHiddenTags.length > 1 ? 's' : '') + " selected", id: "other-tag" })))))), (!(this.selectText || this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0) && placeholder && (h("span", { class: "placeholder" }, " ", placeholder, " ")))), h("div", { class: "buttons" }, clearable && value && (h("button", { class: "select-clear-button", onClick: (e) => this.clickClear(e) }, h("svg", { style: { "fill": "#595959", "width": "14px", "height": "14px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { d: "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z" })))), h("span", { class: this.isOpen ? 'open' : 'close' }, h("svg", { style: { "fill": "#595959", "width": "14px", "height": "14px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" }, h("path", { d: "M168.5 164.2l148 146.8c4.7 4.7 4.7 12.3 0 17l-19.8 19.8c-4.7 4.7-12.3 4.7-17 0L160 229.3 40.3 347.8c-4.7 4.7-12.3 4.7-17 0L3.5 328c-4.7-4.7-4.7-12.3 0-17l148-146.8c4.7-4.7 12.3-4.7 17 0z" }))))), h("div", { class: menu, style: optionViewportStyle }, h("div", { class: optionsViewport })), !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
       ? h("span", { class: captionClasses }, " ", captionError, " ")
       : caption && h("span", { class: captionClasses }, " ", caption, " "))))));
   }

package/dist/components/bcm-stepper.js

@@ -3,13 +3,19 @@
  * Copyright (c) Bromcom.
  */
 import { h, proxyCustomElement, HTMLElement, createEvent, forceUpdate, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
 import { G as Generate, s as snq } from './generate.js';
+import { c as classnames } from './index2.js';
+import './color-helper.js';
+import './validators.js';
+import './number-helper.js';
+import './string-helper.js';
+import './element-dragger.js';
+import { g as getChildElements, d as delay } from './utils.js';
+import { a as Bcm } from './bcm.js';
 import { I as IsLoad } from './is-load-decorator.js';
-import { B as Bcm } from './bcm.js';
-import { g as getChildElements } from './utils.js';
+import './types.js';
+import './types2.js';
 import { s as stepperStates, d as defineCustomElement$2 } from './step.js';
-import { d as defineCustomElement$3 } from './icon.js';
 
 const StepperHeaderTemplate = ({ _title, description, status, valid, index, loading, active, stepChange, statusIcon, icon, disabled, headerHidden, }) => {
   const classes = classnames('bcm-stepper__header-item', `bcm-stepper__header-item--${status}`, {
@@ -89,14 +95,14 @@ const BcmStepper$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.setSteps(this.getItems());
   }
   setSteps(steps) {
-    const slots = getChildElements(this.el, 'bcm-step');
+    const slots = getChildElements(this.el, "bcm-step");
     if (slots.length > 0) {
       slots.forEach((item, index) => {
         const step = steps.find(step => !item.headerHidden && step.id === item.id);
         if (step) {
-          Generate.setAttributes(item, Object.assign({ title: '', _title: step.title || step._title || '', status: step.status || 'default', disabled: step.disabled || false, valid: step.valid || true, loading: step.loading || false, index: step.index || index, active: step.active || false, innerHtml: step.innerHtml || '' }, (item.hidden == true && { headerHidden: true })));
+          Generate.setAttributes(item, Object.assign({ title: "", _title: step.title || step._title || "", status: step.status || "default", disabled: step.disabled || false, valid: step.valid || true, loading: step.loading || false, index: step.index || index, active: step.active || false, innerHtml: step.innerHtml || "" }, (item.hidden == true && { headerHidden: true })));
           if ((item.hidden = false)) {
-            item.removeAttribute('hidden');
+            item.removeAttribute("hidden");
           }
         }
       });
@@ -112,7 +118,7 @@ const BcmStepper$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     return stepperStates.getActiveIndex(this.stepperId);
   }
   getSlotElements() {
-    return snq(() => getChildElements(this.el, 'bcm-step'), []);
+    return snq(() => getChildElements(this.el, "bcm-step"), []);
   }
   async onStepChange(index) {
     if (index) {
@@ -143,36 +149,53 @@ const BcmStepper$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     const step = await this.getCurrentStep();
     const lastStep = this.getItems()[this.getItems().length - 1];
     if (step.valid) {
-      this.linear && lastStep.id != step.id && (step.status = 'success');
+      this.linear && lastStep.id != step.id && (step.status = "success");
       if (index < this.getItems().length) {
         await this.onStepChange(index + 1);
       }
     }
     else {
-      step.status = 'error';
+      step.status = "error";
     }
     forceUpdate(this.el);
     return Promise.resolve(this.getActiveIndex());
   }
-  async setActive(index) {
+  async setActive(index, force = false) {
     if (!index)
       return;
-    if (this.linear) {
-      const prevStepIsValid = this.getItems()
-        .filter(item => item.index < index)
-        .map(item => ({
-        id: item.id,
-        status: item.status,
-        disabled: item.disabled,
-      }))
-        .every(item => !item.disabled && (item.status === 'success' || item.status === 'default'));
-      if (prevStepIsValid) {
-        await this.next(index - 1);
+    if (force) {
+      if (this.getActiveIndex() < index) {
+        while (this.getActiveIndex() < index) {
+          await this.next();
+          await delay(100);
+        }
+      }
+      else {
+        while (this.getActiveIndex() > index) {
+          await this.prev();
+          await delay(100);
+        }
       }
     }
     else {
-      stepperStates.setActiveIndex(this.stepperId, index);
-      await this.next(index - 1);
+      if (this.linear) {
+        const prevStepIsValid = this.getItems()
+          .filter(item => item.index < index)
+          .map(item => ({
+          id: item.id,
+          status: item.status,
+          disabled: item.disabled,
+        }))
+          .every(item => !item.disabled && (item.status === "success" || item.status === "default"));
+        console.log("prevStepIsValid", prevStepIsValid);
+        if (prevStepIsValid) {
+          await this.next(index - 1);
+        }
+      }
+      else {
+        stepperStates.setActiveIndex(this.stepperId, index);
+        await this.next(index - 1);
+      }
     }
   }
   async reset() {
@@ -192,11 +215,11 @@ const BcmStepper$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   render() {
     const { hidden, direction, linear, size } = this;
-    const hostClasses = classnames('bcm-stepper', 'bcm-stepper__direction-' + direction, 'bcm-stepper__size-' + size, {
-      'bcm-stepper__linear': linear,
+    const hostClasses = classnames("bcm-stepper", "bcm-stepper__direction-" + direction, "bcm-stepper__size-" + size, {
+      "bcm-stepper__linear": linear,
       hidden,
     });
-    const lineClasses = item => classnames('bcm-stepper__header-line', `bcm-stepper__header-line--${(item === null || item === void 0 ? void 0 : item.disabled) ? 'disabled' : (item === null || item === void 0 ? void 0 : item.status) === 'error' ? 'default' : item === null || item === void 0 ? void 0 : item.status}`);
+    const lineClasses = item => classnames("bcm-stepper__header-line", `bcm-stepper__header-line--${(item === null || item === void 0 ? void 0 : item.disabled) ? "disabled" : (item === null || item === void 0 ? void 0 : item.status) === "error" ? "default" : item === null || item === void 0 ? void 0 : item.status}`);
     const items = this.getItems();
     return (h(Host, { class: hostClasses }, h("span", { hidden: true, id: `bcm-stepper__steps-${this._id}` }, h("slot", null)), h("main", null, h("header", { class: "bcm-stepper__header" }, items === null || items === void 0 ? void 0 : items.map((item, index) => [
       h(StepperHeaderTemplate, Object.assign({}, item, { stepChange: step => this.onStepChange(step) })),
@@ -233,18 +256,13 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["bcm-stepper", "bcm-icon", "bcm-step"];
+  const components = ["bcm-stepper", "bcm-step"];
   components.forEach(tagName => { switch (tagName) {
     case "bcm-stepper":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, BcmStepper$1);
       }
       break;
-    case "bcm-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
     case "bcm-step":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();

package/dist/components/bcm-switch.js

@@ -136,7 +136,7 @@ const BcmSwitch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const bcmSwitchContainer = classnames('bcm-switch__container', `bcm-switch__container--${this.labelPosition}`);
     const switchText = (text) => (size != Bcm.Size.small && (activeText || inactiveText)) && (h("span", { class: text + '-text' }, text == 'active' ? activeText : inactiveText));
     const switchIcon = (text) => (size != Bcm.Size.small && (activeIcon || inactiveIcon)) && h("bcm-icon", { icon: text == 'active' ? activeIcon : inactiveIcon, class: ' icon-' + text });
-    return (h(Host, { tabindex: "1", onFocus: () => this.focus.emit(this.el), onBlur: () => this.blur.emit(this.el), class: bcmSwitchClasses }, h("span", { hidden: true }, h("slot", null)), h("div", { class: bcmSwitchContainer }, label && h("bcm-label", { htmlFor: _internal_id, tooltip: this.tooltip, type: captionType, value: label, required: required }), h("input", { id: _internal_id, onChange: () => this.handleChange(), ref: el => (this.inputElement = el), checked: checked, type: "checkbox", class: "switch", disabled: disabled || readonly }), h("label", { htmlFor: _internal_id, class: bcmSwitchLabel }, switchText('inactive'), h("div", { class: classes }, switchIcon('active'), h("span", { class: "handle" }, pending && h("span", { class: "switch-spinner" })), switchIcon('inactive')), switchText('active'))), 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), class: bcmSwitchClasses }, h("span", { hidden: true }, h("slot", null)), h("div", { class: bcmSwitchContainer }, label && h("bcm-label", { htmlFor: _internal_id, tooltip: this.tooltip, type: captionType, value: label, required: required }), h("input", { id: _internal_id, onChange: () => this.handleChange(), ref: el => (this.inputElement = el), checked: checked, type: "checkbox", class: "switch", disabled: disabled || readonly }), h("label", { htmlFor: _internal_id, class: bcmSwitchLabel }, switchText('inactive'), h("div", { class: classes }, switchIcon('active'), h("span", { class: "handle" }, pending && h("span", { class: "switch-spinner" })), switchIcon('inactive')), switchText('active'))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
   }
   get el() { return this; }
   static get style() { return switchCss; }