blip-ds 1.153.0 → 1.154.2

package/dist/cjs/bds-accordion-body.cjs.entry.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8825be35.js');
+
+const accordionCss = "@import url(\"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap\"); .accordion_header{display:grid;grid-auto-flow:column;gap:24px;-ms-flex-pack:start;justify-content:start;-ms-flex-align:center;align-items:center;padding:24px;padding-right:56px;position:relative;color:#202c44;cursor:pointer}.accordion_header .accButton{position:absolute;right:24px;top:calc(50% - 16px);border-radius:8px;contain:inherit;-webkit-transition:height 0.5s, all 0.3s;-moz-transition:height 0.5s, all 0.3s;transition:height 0.5s, all 0.3s}.accordion_header .accButton__isopen{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.accordion_header .accButton::before{content:\"\";position:absolute;inset:-4px;border:2px solid transparent;border-radius:4px}.accordion_header .accButton:focus{outline:none}.accordion_header .accButton:focus::before{border-color:#c226fb}.accordion_header .accButton:hover{background-color:#f2f2f2}.accordion_header .accButton:active{background-color:#e6e6e6}.accordion_body{height:0;overflow:hidden;border-bottom:1px solid #b9cbd3;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.accordion_body .container{padding:0 24px 48px;position:relative;color:#202c44}";
+
+const AccordionBody = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.container = null;
+    this.isOpen = false;
+    this.numberElement = null;
+    this.refContainer = (el) => {
+      this.container = el;
+    };
+  }
+  async toggle() {
+    this.isOpen = !this.isOpen;
+  }
+  async close() {
+    this.isOpen = false;
+  }
+  async reciveNumber(number) {
+    this.numberElement = number;
+  }
+  isOpenChanged() {
+    this.heightContainer = this.isOpen ? this.container.offsetHeight : 0;
+  }
+  render() {
+    return (index.h("div", { class: "accordion_body", style: { height: `${this.heightContainer}px` } }, index.h("div", { class: "container", ref: (el) => this.refContainer(el) }, index.h("slot", null))));
+  }
+  static get watchers() { return {
+    "isOpen": ["isOpenChanged"]
+  }; }
+};
+AccordionBody.style = accordionCss;
+
+exports.bds_accordion_body = AccordionBody;

package/dist/cjs/bds-accordion-group.cjs.entry.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8825be35.js');
+
+const accordionCss = "@import url(\"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap\"); .accordion_header{display:grid;grid-auto-flow:column;gap:24px;-ms-flex-pack:start;justify-content:start;-ms-flex-align:center;align-items:center;padding:24px;padding-right:56px;position:relative;color:#202c44;cursor:pointer}.accordion_header .accButton{position:absolute;right:24px;top:calc(50% - 16px);border-radius:8px;contain:inherit;-webkit-transition:height 0.5s, all 0.3s;-moz-transition:height 0.5s, all 0.3s;transition:height 0.5s, all 0.3s}.accordion_header .accButton__isopen{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.accordion_header .accButton::before{content:\"\";position:absolute;inset:-4px;border:2px solid transparent;border-radius:4px}.accordion_header .accButton:focus{outline:none}.accordion_header .accButton:focus::before{border-color:#c226fb}.accordion_header .accButton:hover{background-color:#f2f2f2}.accordion_header .accButton:active{background-color:#e6e6e6}.accordion_body{height:0;overflow:hidden;border-bottom:1px solid #b9cbd3;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.accordion_body .container{padding:0 24px 48px;position:relative;color:#202c44}";
+
+const AccordionGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.accheaders = null;
+    this.accBodies = null;
+    /**
+     * Focus Selected. Used to add title in header accordion.
+     */
+    this.collapse = 'default';
+  }
+  async closeAll(actNumber) {
+    if (this.collapse == 'default') {
+      for (let i = 0; i < this.accBodies.length; i++) {
+        if (actNumber != i)
+          this.accBodies[i].close() && this.accheaders[i].close();
+      }
+    }
+  }
+  componentWillRender() {
+    this.accheaders = this.element.getElementsByTagName('bds-accordion-header');
+    this.accBodies = this.element.getElementsByTagName('bds-accordion-body');
+    for (let i = 0; i < this.accheaders.length; i++) {
+      this.accheaders[i].reciveNumber(i);
+      this.accBodies[i].reciveNumber(i);
+    }
+  }
+  render() {
+    return (index.h("div", { class: "accordion_group" }, index.h("slot", null)));
+  }
+  get element() { return index.getElement(this); }
+};
+AccordionGroup.style = accordionCss;
+
+exports.bds_accordion_group = AccordionGroup;

package/dist/cjs/bds-accordion-header.cjs.entry.js

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8825be35.js');
+
+const accordionCss = "@import url(\"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap\"); .accordion_header{display:grid;grid-auto-flow:column;gap:24px;-ms-flex-pack:start;justify-content:start;-ms-flex-align:center;align-items:center;padding:24px;padding-right:56px;position:relative;color:#202c44;cursor:pointer}.accordion_header .accButton{position:absolute;right:24px;top:calc(50% - 16px);border-radius:8px;contain:inherit;-webkit-transition:height 0.5s, all 0.3s;-moz-transition:height 0.5s, all 0.3s;transition:height 0.5s, all 0.3s}.accordion_header .accButton__isopen{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.accordion_header .accButton::before{content:\"\";position:absolute;inset:-4px;border:2px solid transparent;border-radius:4px}.accordion_header .accButton:focus{outline:none}.accordion_header .accButton:focus::before{border-color:#c226fb}.accordion_header .accButton:hover{background-color:#f2f2f2}.accordion_header .accButton:active{background-color:#e6e6e6}.accordion_body{height:0;overflow:hidden;border-bottom:1px solid #b9cbd3;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.accordion_body .container{padding:0 24px 48px;position:relative;color:#202c44}";
+
+const AccordionHeader = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.accGroup = null;
+    this.accNextBody = null;
+    this.isOpen = false;
+    this.numberElement = null;
+    /**
+     * Accordion Title. Used to add title in header accordion.
+     */
+    this.accordionTitle = null;
+    /**
+     * Icon. Used to add icon in header accordion.
+     */
+    this.icon = null;
+    /**
+     * Avatar Name. Used to add avatar in header accordion.
+     */
+    this.avatarName = null;
+    /**
+     * Avatar Thumb. Used to add avatar in header accordion.
+     */
+    this.avatarThumb = null;
+    this.toggle = () => {
+      var _a, _b;
+      this.isOpen = !this.isOpen;
+      (_a = this.accNextBody) === null || _a === void 0 ? void 0 : _a.toggle();
+      (_b = this.accGroup) === null || _b === void 0 ? void 0 : _b.closeAll(this.numberElement);
+    };
+  }
+  async close() {
+    this.isOpen = false;
+  }
+  async reciveNumber(number) {
+    this.numberElement = number;
+  }
+  componentWillRender() {
+    this.accGroup = this.element.parentElement;
+    this.accNextBody = this.element.nextElementSibling;
+  }
+  render() {
+    return (index.h("div", { onClick: this.toggle, class: { accordion_header: true } }, this.avatarName || this.avatarThumb ? (index.h("bds-avatar", { name: this.avatarName, thumbnail: this.avatarThumb, size: "extra-small" })) : (this.icon && index.h("bds-icon", { size: "x-large", name: "tag", color: "inherit" })), this.accordionTitle && (index.h("bds-typo", { bold: "bold", variant: "fs-16" }, this.accordionTitle)), index.h("slot", null), this.accNextBody && (index.h("bds-icon", { class: {
+        accButton: true,
+        accButton__isopen: this.isOpen,
+      }, size: "x-large", name: "arrow-down", color: "inherit", tabindex: "0", onKeyPress: this.toggle }))));
+  }
+  get element() { return index.getElement(this); }
+};
+AccordionHeader.style = accordionCss;
+
+exports.bds_accordion_header = AccordionHeader;

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

@@ -33,23 +33,29 @@ const ChipClickable = class {
      */
     this.disabled = false;
   }
-  handleClick(event) {
-    if (event.key === 'Enter' && !this.disabled) {
+  handleClickKey(event) {
+    if ((event.key === 'Enter' || event.key === ' ') && !this.disabled) {
       event.preventDefault();
       this.chipClickableClick.emit();
     }
   }
-  handleCloseChip(event) {
-    const key = 'Enter';
-    if (event.key === key && !this.disabled) {
+  handleClick(event) {
+    if (!this.disabled) {
       event.preventDefault();
-      this.chipClickableClose.emit({ id: this.element.id });
+      this.chipClickableClick.emit();
     }
-    else {
+  }
+  handleCloseChip(event) {
+    event.preventDefault();
+    this.chipClickableClose.emit({ id: this.element.id });
+    this.visible = false;
+  }
+  handleCloseKey(event) {
+    if ((event.key === 'Enter' || event.key === ' ') && !this.disabled) {
       event.preventDefault();
       this.chipClickableClose.emit({ id: this.element.id });
+      this.visible = false;
     }
-    this.visible = false;
   }
   getSizeAvatarChip() {
     if (this.size === 'tall') {
@@ -73,7 +79,7 @@ const ChipClickable = class {
         'chip_clickable--hide': !this.visible,
         'chip_clickable--click': this.clickable,
         'chip_clickable--disabled': this.disabled,
-      }, onClick: this.handleClick.bind(this) }, this.clickable && !this.disabled && (index.h("div", { class: "chip_focus", onKeyDown: this.handleClick.bind(this), tabindex: "0" })), this.clickable && !this.disabled && index.h("div", { class: "chip_darker" }), this.icon && !this.avatar && (index.h("div", { class: "chip_clickable--icon" }, index.h("bds-icon", { size: this.getSizeIconChip(), name: this.icon }))), this.avatar && (index.h("div", { class: "chip_clickable--avatar" }, index.h("bds-avatar", { size: this.getSizeAvatarChip(), thumbnail: this.avatar }))), index.h("bds-typo", { class: "chip_clickable--text", variant: "fs-12", bold: "bold" }, index.h("slot", null)), this.close && (index.h("div", { class: "chip_clickable--close", onClick: this.handleCloseChip.bind(this) }, !this.disabled && (index.h("div", { class: "close_focus", onKeyDown: this.handleCloseChip.bind(this), tabindex: "0" })), index.h("bds-icon", { size: "x-small", theme: "solid", name: "error" }))))));
+      }, onClick: this.handleClick.bind(this) }, this.clickable && !this.disabled && (index.h("div", { class: "chip_focus", onKeyDown: this.handleClickKey.bind(this), tabindex: "0" })), this.clickable && !this.disabled && index.h("div", { class: "chip_darker" }), this.icon && !this.avatar && (index.h("div", { class: "chip_clickable--icon" }, index.h("bds-icon", { size: this.getSizeIconChip(), name: this.icon }))), this.avatar && (index.h("div", { class: "chip_clickable--avatar" }, index.h("bds-avatar", { size: this.getSizeAvatarChip(), thumbnail: this.avatar }))), index.h("bds-typo", { class: "chip_clickable--text", variant: "fs-12", bold: "bold" }, index.h("slot", null)), this.close && (index.h("div", { class: "chip_clickable--close", onClick: this.handleCloseChip.bind(this) }, !this.disabled && (index.h("div", { class: "close_focus", onKeyDown: this.handleCloseKey.bind(this), tabindex: "0" })), index.h("bds-icon", { size: "x-small", theme: "solid", name: "error" }))))));
   }
   get element() { return index.getElement(this); }
 };

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-8825be35.js');
 
-const chipSelectedCss = "@import url(\"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap\"); :host(:focus){border:2px solid #c226fb;padding:2px}:host{display:-ms-flexbox;display:flex;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:4px;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box}:host .chip{display:-ms-flexbox;display:flex;min-width:32px;width:-webkit-max-content;width:-moz-max-content;width:max-content;height:32px;border-radius:16px;padding:2px 4px;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-pack:center;justify-content:center;position:relative;z-index:0}:host .chip .chip_darker{position:absolute;width:100%;height:100%;border-radius:inherit;z-index:1;-webkit-backdrop-filter:brightness(1);backdrop-filter:brightness(1);-webkit-box-sizing:border-box;box-sizing:border-box}:host .chip--icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-left:4px;width:16px;height:20px;color:#202c44;z-index:2}:host .chip--text{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:20px;z-index:2;margin:0 8px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;color:#202c44;font-family:\"Nunito Sans\", \"Tahoma\", \"Helvetica\", \"Arial\", sans-serif}:host .chip--tall{height:40px;border-radius:24px}:host .chip--default{background-color:#b3d4ff}:host .chip--info{background-color:#80e3eb}:host .chip--success{background-color:#90e6bc}:host .chip--warning{background-color:#fff6a8}:host .chip--danger{background-color:#ffa5a5}:host .chip--outline{background-color:#ffffff;border:1px solid #b9cbd3;padding:2px 3px}:host .chip--outline .chip_darker{height:calc(100% + 2px)}:host .chip:hover{cursor:pointer}:host .chip:hover .chip_darker{-webkit-backdrop-filter:brightness(0.9);backdrop-filter:brightness(0.9)}:host .chip:active{cursor:pointer}:host .chip:active .chip_darker{-webkit-backdrop-filter:brightness(0.8);backdrop-filter:brightness(0.8)}:host .chip:focus-visible{outline:none}:host .chip_selected{display:-ms-flexbox;display:flex;min-width:32px;width:-webkit-max-content;width:-moz-max-content;width:max-content;height:32px;border-radius:16px;padding:2px;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#ffffff;border:2px solid #3f7de8}:host .chip_selected--icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:16px;height:20px;padding-left:4px;color:#125ad5}:host .chip_selected--text{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:20px;margin:0 8px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;color:#125ad5;font-family:\"Nunito Sans\", \"Tahoma\", \"Helvetica\", \"Arial\", sans-serif}:host .chip_selected--tall{height:40px;border-radius:24px}:host .chip_selected:hover{background-color:#e8f2ff;cursor:pointer}:host .chip_selected:active{background-color:#d1e3fa}:host .chip_disabled{display:-ms-flexbox;display:flex;min-width:32px;width:-webkit-max-content;width:-moz-max-content;width:max-content;height:32px;border-radius:16px;padding:2px 4px;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-pack:center;justify-content:center;position:relative;z-index:0;background-color:#f3f6fa}:host .chip_disabled--icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-left:4px;width:16px;height:20px;color:#505f79;z-index:2}:host .chip_disabled--text{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:20px;z-index:2;margin:0 8px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;color:#505f79;font-family:\"Nunito Sans\", \"Tahoma\", \"Helvetica\", \"Arial\", sans-serif}:host .chip_disabled--tall{height:40px;border-radius:24px}:host .chip_disabled:hover{cursor:default}";
+const chipSelectedCss = "@import url(\"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap\"); :host{display:-ms-flexbox;display:flex;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-max-content;width:-moz-max-content;width:max-content;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box}:host .chip{display:-ms-flexbox;display:flex;min-width:32px;width:-webkit-max-content;width:-moz-max-content;width:max-content;height:32px;border-radius:16px;padding:2px 4px;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-pack:center;justify-content:center;position:relative;z-index:0}:host .chip .chip_focus:focus{position:absolute;width:100%;height:100%;padding:2px;border-radius:4px;outline:#c226fb solid 2px}:host .chip .chip_darker{position:absolute;width:100%;height:100%;border-radius:inherit;z-index:1;-webkit-backdrop-filter:brightness(1);backdrop-filter:brightness(1);-webkit-box-sizing:border-box;box-sizing:border-box}:host .chip--icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-left:4px;height:20px;color:#202c44;z-index:2}:host .chip--text{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:20px;z-index:2;margin:0 8px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;color:#202c44;font-family:\"Nunito Sans\", \"Tahoma\", \"Helvetica\", \"Arial\", sans-serif}:host .chip--tall{height:40px;border-radius:24px}:host .chip--default{background-color:#b3d4ff}:host .chip--info{background-color:#80e3eb}:host .chip--success{background-color:#90e6bc}:host .chip--warning{background-color:#fff6a8}:host .chip--danger{background-color:#ffa5a5}:host .chip--outline{background-color:#ffffff;border:1px solid #b9cbd3;padding:2px 3px}:host .chip--outline .chip_darker{height:calc(100% + 2px)}:host .chip:hover{cursor:pointer}:host .chip:hover .chip_darker{-webkit-backdrop-filter:brightness(0.9);backdrop-filter:brightness(0.9)}:host .chip:active{cursor:pointer}:host .chip:active .chip_darker{-webkit-backdrop-filter:brightness(0.8);backdrop-filter:brightness(0.8)}:host .chip:focus-visible{outline:none}:host .chip_selected{display:-ms-flexbox;display:flex;min-width:32px;width:-webkit-max-content;width:-moz-max-content;width:max-content;height:32px;border-radius:16px;padding:2px;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#ffffff;border:2px solid #3f7de8}:host .chip_selected--icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:20px;padding-left:4px;color:#125ad5}:host .chip_selected--text{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:20px;margin:0 8px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;color:#125ad5;font-family:\"Nunito Sans\", \"Tahoma\", \"Helvetica\", \"Arial\", sans-serif}:host .chip_selected--tall{height:40px;border-radius:24px}:host .chip_selected:hover{background-color:#e8f2ff;cursor:pointer}:host .chip_selected:active{background-color:#d1e3fa}:host .chip_disabled{display:-ms-flexbox;display:flex;min-width:32px;width:-webkit-max-content;width:-moz-max-content;width:max-content;height:32px;border-radius:16px;padding:2px 4px;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-pack:center;justify-content:center;position:relative;z-index:0;background-color:#f3f6fa}:host .chip_disabled--icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-left:4px;width:16px;height:20px;color:#505f79;z-index:2}:host .chip_disabled--text{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:20px;z-index:2;margin:0 8px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;color:#505f79;font-family:\"Nunito Sans\", \"Tahoma\", \"Helvetica\", \"Arial\", sans-serif}:host .chip_disabled--tall{height:40px;border-radius:24px}:host .chip_disabled:hover{cursor:default}";
 
 const ChipSelected = class {
   constructor(hostRef) {
@@ -28,11 +28,9 @@ const ChipSelected = class {
      */
     this.disabled = false;
   }
-  handleKeyDown(ev) {
-    if (ev.key === ' ') {
-      if (this.disabled)
-        return;
-      ev.preventDefault();
+  handleKeyDown(event) {
+    if (event.key === ' ' && !this.disabled) {
+      event.preventDefault();
       if (this.isSelected) {
         return (this.isSelected = false);
       }
@@ -70,8 +68,15 @@ const ChipSelected = class {
       return chipSelected;
     }
   }
+  getSizeIconChip() {
+    if (this.size === 'tall') {
+      return 'medium';
+    }
+    else
+      return 'x-small';
+  }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: Object.assign(Object.assign({ chip: true }, this.getStyleChip()), this.getDisabledChip()), onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabindex: "0" }, !this.isSelected && !this.disabled && index.h("div", { class: "chip_darker" }), this.icon && !this.isSelected && (index.h("div", { class: "chip--icon" }, index.h("bds-icon", { size: "x-small", name: this.icon }))), this.isSelected && (index.h("div", { class: "chip_selected--icon" }, index.h("bds-icon", { size: "x-small", name: "checkball" }))), index.h("bds-typo", { class: Object.assign({ 'chip--text': true }, this.getStyleText()), variant: "fs-12", "no-wrap": true, bold: "bold" }, index.h("slot", null)))));
+    return (index.h(index.Host, null, index.h("div", { class: Object.assign(Object.assign({ chip: true }, this.getStyleChip()), this.getDisabledChip()), onClick: this.handleClick }, !this.disabled && index.h("div", { class: "chip_focus", onKeyDown: this.handleKeyDown.bind(this), tabindex: "0" }), !this.isSelected && !this.disabled && index.h("div", { class: "chip_darker" }), this.icon && !this.isSelected && (index.h("div", { class: "chip--icon" }, index.h("bds-icon", { size: this.getSizeIconChip(), name: this.icon }))), this.isSelected && (index.h("div", { class: "chip_selected--icon" }, index.h("bds-icon", { size: this.getSizeIconChip(), name: "checkball" }))), index.h("bds-typo", { class: Object.assign({ 'chip--text': true }, this.getStyleText()), variant: "fs-12", "no-wrap": true, bold: "bold" }, index.h("slot", null)))));
   }
   get el() { return index.getElement(this); }
 };