blip-ds 1.153.0 → 1.154.2

package/dist/collection/components/chip-clickable/chip-clickable.js

@@ -23,23 +23,29 @@ export class ChipClickable {
      */
     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') {
@@ -65,7 +71,7 @@ export class ChipClickable {
           'chip_clickable--click': this.clickable,
           'chip_clickable--disabled': this.disabled,
         }, onClick: this.handleClick.bind(this) },
-        this.clickable && !this.disabled && (h("div", { class: "chip_focus", onKeyDown: this.handleClick.bind(this), tabindex: "0" })),
+        this.clickable && !this.disabled && (h("div", { class: "chip_focus", onKeyDown: this.handleClickKey.bind(this), tabindex: "0" })),
         this.clickable && !this.disabled && h("div", { class: "chip_darker" }),
         this.icon && !this.avatar && (h("div", { class: "chip_clickable--icon" },
           h("bds-icon", { size: this.getSizeIconChip(), name: this.icon }))),
@@ -74,7 +80,7 @@ export class ChipClickable {
         h("bds-typo", { class: "chip_clickable--text", variant: "fs-12", bold: "bold" },
           h("slot", null)),
         this.close && (h("div", { class: "chip_clickable--close", onClick: this.handleCloseChip.bind(this) },
-          !this.disabled && (h("div", { class: "close_focus", onKeyDown: this.handleCloseChip.bind(this), tabindex: "0" })),
+          !this.disabled && (h("div", { class: "close_focus", onKeyDown: this.handleCloseKey.bind(this), tabindex: "0" })),
           h("bds-icon", { size: "x-small", theme: "solid", name: "error" }))))));
   }
   static get is() { return "bds-chip-clickable"; }

package/dist/collection/components/chip-selected/chip-selected.css

@@ -24,16 +24,10 @@
 /*
   Font sizes have been converted to rem considering a base size of 16px.
 */
-:host(:focus) {
-  border: 2px solid #c226fb;
-  padding: 2px;
-}
-
 :host {
   display: flex;
   height: fit-content;
   width: max-content;
-  padding: 4px;
   border-radius: 4px;
   box-sizing: border-box;
 }
@@ -50,6 +44,14 @@
   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%;
@@ -63,7 +65,6 @@
   display: flex;
   align-items: center;
   padding-left: 4px;
-  width: 16px;
   height: 20px;
   color: #202c44;
   z-index: 2;
@@ -135,7 +136,6 @@
 :host .chip_selected--icon {
   display: flex;
   align-items: center;
-  width: 16px;
   height: 20px;
   padding-left: 4px;
   color: #125ad5;

package/dist/collection/components/chip-selected/chip-selected.js

@@ -19,11 +19,9 @@ export class ChipSelected {
      */
     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);
       }
@@ -61,14 +59,22 @@ export class ChipSelected {
       return chipSelected;
     }
   }
+  getSizeIconChip() {
+    if (this.size === 'tall') {
+      return 'medium';
+    }
+    else
+      return 'x-small';
+  }
   render() {
     return (h(Host, null,
-      h("div", { class: Object.assign(Object.assign({ chip: true }, this.getStyleChip()), this.getDisabledChip()), onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabindex: "0" },
+      h("div", { class: Object.assign(Object.assign({ chip: true }, this.getStyleChip()), this.getDisabledChip()), onClick: this.handleClick },
+        !this.disabled && h("div", { class: "chip_focus", onKeyDown: this.handleKeyDown.bind(this), tabindex: "0" }),
         !this.isSelected && !this.disabled && h("div", { class: "chip_darker" }),
         this.icon && !this.isSelected && (h("div", { class: "chip--icon" },
-          h("bds-icon", { size: "x-small", name: this.icon }))),
+          h("bds-icon", { size: this.getSizeIconChip(), name: this.icon }))),
         this.isSelected && (h("div", { class: "chip_selected--icon" },
-          h("bds-icon", { size: "x-small", name: "checkball" }))),
+          h("bds-icon", { size: this.getSizeIconChip(), name: "checkball" }))),
         h("bds-typo", { class: Object.assign({ 'chip--text': true }, this.getStyleText()), variant: "fs-12", "no-wrap": true, bold: "bold" },
           h("slot", null)))));
   }
@@ -200,12 +206,6 @@ export class ChipSelected {
     }]; }
   static get elementRef() { return "el"; }
   static get listeners() { return [{
-      "name": "keydown",
-      "method": "handleKeyDown",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
       "name": "click",
       "method": "handleClick",
       "target": undefined,

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

@@ -0,0 +1,36 @@
+import { r as registerInstance, h } from './index-a2cd05b6.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) {
+    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 (h("div", { class: "accordion_body", style: { height: `${this.heightContainer}px` } }, h("div", { class: "container", ref: (el) => this.refContainer(el) }, h("slot", null))));
+  }
+  static get watchers() { return {
+    "isOpen": ["isOpenChanged"]
+  }; }
+};
+AccordionBody.style = accordionCss;
+
+export { AccordionBody as bds_accordion_body };

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

@@ -0,0 +1,38 @@
+import { r as registerInstance, h, g as getElement } from './index-a2cd05b6.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) {
+    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 (h("div", { class: "accordion_group" }, h("slot", null)));
+  }
+  get element() { return getElement(this); }
+};
+AccordionGroup.style = accordionCss;
+
+export { AccordionGroup as bds_accordion_group };

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

@@ -0,0 +1,55 @@
+import { r as registerInstance, h, g as getElement } from './index-a2cd05b6.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) {
+    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 (h("div", { onClick: this.toggle, class: { accordion_header: true } }, this.avatarName || this.avatarThumb ? (h("bds-avatar", { name: this.avatarName, thumbnail: this.avatarThumb, size: "extra-small" })) : (this.icon && h("bds-icon", { size: "x-large", name: "tag", color: "inherit" })), this.accordionTitle && (h("bds-typo", { bold: "bold", variant: "fs-16" }, this.accordionTitle)), h("slot", null), this.accNextBody && (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 getElement(this); }
+};
+AccordionHeader.style = accordionCss;
+
+export { AccordionHeader as bds_accordion_header };

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

@@ -29,23 +29,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') {
@@ -69,7 +75,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 && (h("div", { class: "chip_focus", onKeyDown: this.handleClick.bind(this), tabindex: "0" })), this.clickable && !this.disabled && h("div", { class: "chip_darker" }), this.icon && !this.avatar && (h("div", { class: "chip_clickable--icon" }, h("bds-icon", { size: this.getSizeIconChip(), name: this.icon }))), this.avatar && (h("div", { class: "chip_clickable--avatar" }, h("bds-avatar", { size: this.getSizeAvatarChip(), thumbnail: this.avatar }))), h("bds-typo", { class: "chip_clickable--text", variant: "fs-12", bold: "bold" }, h("slot", null)), this.close && (h("div", { class: "chip_clickable--close", onClick: this.handleCloseChip.bind(this) }, !this.disabled && (h("div", { class: "close_focus", onKeyDown: this.handleCloseChip.bind(this), tabindex: "0" })), h("bds-icon", { size: "x-small", theme: "solid", name: "error" }))))));
+      }, onClick: this.handleClick.bind(this) }, this.clickable && !this.disabled && (h("div", { class: "chip_focus", onKeyDown: this.handleClickKey.bind(this), tabindex: "0" })), this.clickable && !this.disabled && h("div", { class: "chip_darker" }), this.icon && !this.avatar && (h("div", { class: "chip_clickable--icon" }, h("bds-icon", { size: this.getSizeIconChip(), name: this.icon }))), this.avatar && (h("div", { class: "chip_clickable--avatar" }, h("bds-avatar", { size: this.getSizeAvatarChip(), thumbnail: this.avatar }))), h("bds-typo", { class: "chip_clickable--text", variant: "fs-12", bold: "bold" }, h("slot", null)), this.close && (h("div", { class: "chip_clickable--close", onClick: this.handleCloseChip.bind(this) }, !this.disabled && (h("div", { class: "close_focus", onKeyDown: this.handleCloseKey.bind(this), tabindex: "0" })), h("bds-icon", { size: "x-small", theme: "solid", name: "error" }))))));
   }
   get element() { return getElement(this); }
 };

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-a2cd05b6.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) {
@@ -24,11 +24,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);
       }
@@ -66,8 +64,15 @@ const ChipSelected = class {
       return chipSelected;
     }
   }
+  getSizeIconChip() {
+    if (this.size === 'tall') {
+      return 'medium';
+    }
+    else
+      return 'x-small';
+  }
   render() {
-    return (h(Host, null, 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 && h("div", { class: "chip_darker" }), this.icon && !this.isSelected && (h("div", { class: "chip--icon" }, h("bds-icon", { size: "x-small", name: this.icon }))), this.isSelected && (h("div", { class: "chip_selected--icon" }, h("bds-icon", { size: "x-small", name: "checkball" }))), h("bds-typo", { class: Object.assign({ 'chip--text': true }, this.getStyleText()), variant: "fs-12", "no-wrap": true, bold: "bold" }, h("slot", null)))));
+    return (h(Host, null, h("div", { class: Object.assign(Object.assign({ chip: true }, this.getStyleChip()), this.getDisabledChip()), onClick: this.handleClick }, !this.disabled && h("div", { class: "chip_focus", onKeyDown: this.handleKeyDown.bind(this), tabindex: "0" }), !this.isSelected && !this.disabled && h("div", { class: "chip_darker" }), this.icon && !this.isSelected && (h("div", { class: "chip--icon" }, h("bds-icon", { size: this.getSizeIconChip(), name: this.icon }))), this.isSelected && (h("div", { class: "chip_selected--icon" }, h("bds-icon", { size: this.getSizeIconChip(), name: "checkball" }))), h("bds-typo", { class: Object.assign({ 'chip--text': true }, this.getStyleText()), variant: "fs-12", "no-wrap": true, bold: "bold" }, h("slot", null)))));
   }
   get el() { return getElement(this); }
 };