blip-ds 1.198.2 → 1.200.0

package/dist/blip-ds/bds-avatar-group.entry.js

@@ -1,16 +1,27 @@
-import { r as registerInstance, h, f as Host } from './index-bda47b0f.js';
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-bda47b0f.js';
 
-const avatarGroupCss = ".avatar__group{display:-ms-flexbox;display:flex}.avatar__group>*:nth-child(1){z-index:5}.avatar__group>*:nth-child(2){z-index:4}.avatar__group>*:nth-child(3){z-index:3}.avatar__group>*:nth-child(4){z-index:2}.avatar__group>*:nth-child(5){z-index:1}.avatar__group .avatar{border:2px solid #ffffff;position:relative}.avatar__group__size--extra-small{margin-left:4px}.avatar__group__size--extra-small>*{margin-left:-4px}.avatar__group__size--extra-small .avatar{width:32px;height:32px}.avatar__group__size--small{margin-left:8px}.avatar__group__size--small>*{margin-left:-8px}.avatar__group__size--small .avatar{width:40px;height:40px}.avatar__group__size--standard{margin-left:12px}.avatar__group__size--standard>*{margin-left:-12px}.avatar__group__size--standard .avatar{width:56px;height:56px}";
+const avatarGroupCss = ".host{position:relative;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.avatar__group{display:-ms-flexbox;display:flex}.avatar__group>*:nth-child(1){z-index:1}.avatar__group>*:nth-child(2){z-index:2}.avatar__group>*:nth-child(3){z-index:3}.avatar__group>*:nth-child(4){z-index:4}.avatar__group>*:nth-child(5){z-index:5}.avatar__group>*:nth-child(6){z-index:6;width:auto}.avatar__group>*:nth-child(6) div{background-color:#1a2437;padding:0 16px;width:auto}.avatar__group__click--true{cursor:pointer}.avatar__group .avatar{position:relative}.avatar__group__size--extra-small{margin-left:8px}.avatar__group__size--extra-small>*{margin-left:-8px}.avatar__group__size--extra-small>*:nth-child(6) div{padding:0 8px}.avatar__group__size--extra-small .avatar{height:32px;padding:0 8px}.avatar__group__size--small{margin-left:8px}.avatar__group__size--small>*{margin-left:-8px}.avatar__group__size--small .avatar{height:40px;padding:0 8px}.avatar__group__size--standard{margin-left:16px}.avatar__group__size--standard>*{margin-left:-16px}.avatar__group__size--standard .avatar{height:56px;padding:0 8px}.avatar__group__size--large{margin-left:16px}.avatar__group__size--large>*{margin-left:-16px}.avatar__group__size--large .avatar{height:64px;padding:0 8px}.avatar__group__size--extra-large{margin-left:16px}.avatar__group__size--extra-large>*{margin-left:-16px}.avatar__group__size--extra-large .avatar{height:72px;padding:0 8px}.focus:focus-visible{display:-ms-flexbox;display:flex;position:absolute;border:2px solid #c226fb;border-radius:4px;width:100%;height:100%;top:-4px;left:-4px;padding-right:4px;padding-bottom:4px;outline:none}";
 
 const AvatarGroup = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.bdsClickAvatarGroup = createEvent(this, "bdsClickAvatarGroup", 7);
     /**
      * Size. Entered as one of the size. Can be one of:
      * 'extra-small', 'small', 'standard', 'large', 'extra-large'.
      */
     this.size = 'standard';
   }
+  handleClickGroup(e) {
+    e.preventDefault();
+    this.bdsClickAvatarGroup.emit(e);
+  }
+  handleClickKey(event) {
+    if ((event.key === 'Enter' || event.key === ' ') && this.canClick) {
+      event.preventDefault();
+      this.bdsClickAvatarGroup.emit();
+    }
+  }
   parseUsers() {
     if (this.users) {
       try {
@@ -23,15 +34,16 @@ const AvatarGroup = class {
   }
   componentWillLoad() {
     this.users && this.parseUsers();
-    this.leftoversUsers = this.internalUsers.length - 4;
+    this.leftoversUsers = this.internalUsers.length - 5;
   }
   render() {
-    return (h(Host, null, h("div", { class: {
+    return (h(Host, { class: "host" }, h("div", { class: {
         avatar__group: true,
         [`avatar__group__size--${this.size}`]: true,
-      } }, this.internalUsers ? (this.internalUsers
-      .slice(0, 5)
-      .map((user, i, row) => i + 1 === row.length && this.internalUsers.length > 5 ? (h("bds-avatar", { size: this.size, ellipsis: this.leftoversUsers })) : (h("bds-avatar", { id: user.id, name: user.name, thumbnail: user.thumbnail, size: this.size })))) : (h("slot", null)))));
+        [`avatar__group__click--${this.canClick}`]: true,
+      }, onClick: () => this.handleClickGroup }, this.internalUsers ? (this.internalUsers
+      .slice(0, 6)
+      .map((user, i, row) => i + 1 === row.length && this.internalUsers.length > 5 ? (h("bds-avatar", { size: this.size, ellipsis: this.leftoversUsers })) : (h("bds-avatar", { id: user.id, name: user.name, thumbnail: user.thumbnail, size: this.size })))) : (h("slot", null))), this.canClick ? h("div", { class: "focus", tabindex: "0", onClick: () => this.handleClickKey }) : ''));
   }
 };
 AvatarGroup.style = avatarGroupCss;

package/dist/blip-ds/bds-avatar-group.system.entry.js

@@ -1 +1 @@
-System.register(["./index-461526c7.system.js"],(function(a){"use strict";var t,r,s;return{setters:[function(a){t=a.r;r=a.h;s=a.f}],execute:function(){var e=".avatar__group{display:-ms-flexbox;display:flex}.avatar__group>*:nth-child(1){z-index:5}.avatar__group>*:nth-child(2){z-index:4}.avatar__group>*:nth-child(3){z-index:3}.avatar__group>*:nth-child(4){z-index:2}.avatar__group>*:nth-child(5){z-index:1}.avatar__group .avatar{border:2px solid #ffffff;position:relative}.avatar__group__size--extra-small{margin-left:4px}.avatar__group__size--extra-small>*{margin-left:-4px}.avatar__group__size--extra-small .avatar{width:32px;height:32px}.avatar__group__size--small{margin-left:8px}.avatar__group__size--small>*{margin-left:-8px}.avatar__group__size--small .avatar{width:40px;height:40px}.avatar__group__size--standard{margin-left:12px}.avatar__group__size--standard>*{margin-left:-12px}.avatar__group__size--standard .avatar{width:56px;height:56px}";var i=a("bds_avatar_group",function(){function a(a){t(this,a);this.size="standard"}a.prototype.parseUsers=function(){if(this.users){try{this.internalUsers=typeof this.users==="string"?JSON.parse(this.users):this.users}catch(a){this.internalUsers=[]}}};a.prototype.componentWillLoad=function(){this.users&&this.parseUsers();this.leftoversUsers=this.internalUsers.length-4};a.prototype.render=function(){var a;var t=this;return r(s,null,r("div",{class:(a={avatar__group:true},a["avatar__group__size--".concat(this.size)]=true,a)},this.internalUsers?this.internalUsers.slice(0,5).map((function(a,s,e){return s+1===e.length&&t.internalUsers.length>5?r("bds-avatar",{size:t.size,ellipsis:t.leftoversUsers}):r("bds-avatar",{id:a.id,name:a.name,thumbnail:a.thumbnail,size:t.size})})):r("slot",null)))};return a}());i.style=e}}}));
+System.register(["./index-461526c7.system.js"],(function(a){"use strict";var t,r,i,e;return{setters:[function(a){t=a.r;r=a.e;i=a.h;e=a.f}],execute:function(){var s=".host{position:relative;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.avatar__group{display:-ms-flexbox;display:flex}.avatar__group>*:nth-child(1){z-index:1}.avatar__group>*:nth-child(2){z-index:2}.avatar__group>*:nth-child(3){z-index:3}.avatar__group>*:nth-child(4){z-index:4}.avatar__group>*:nth-child(5){z-index:5}.avatar__group>*:nth-child(6){z-index:6;width:auto}.avatar__group>*:nth-child(6) div{background-color:#1a2437;padding:0 16px;width:auto}.avatar__group__click--true{cursor:pointer}.avatar__group .avatar{position:relative}.avatar__group__size--extra-small{margin-left:8px}.avatar__group__size--extra-small>*{margin-left:-8px}.avatar__group__size--extra-small>*:nth-child(6) div{padding:0 8px}.avatar__group__size--extra-small .avatar{height:32px;padding:0 8px}.avatar__group__size--small{margin-left:8px}.avatar__group__size--small>*{margin-left:-8px}.avatar__group__size--small .avatar{height:40px;padding:0 8px}.avatar__group__size--standard{margin-left:16px}.avatar__group__size--standard>*{margin-left:-16px}.avatar__group__size--standard .avatar{height:56px;padding:0 8px}.avatar__group__size--large{margin-left:16px}.avatar__group__size--large>*{margin-left:-16px}.avatar__group__size--large .avatar{height:64px;padding:0 8px}.avatar__group__size--extra-large{margin-left:16px}.avatar__group__size--extra-large>*{margin-left:-16px}.avatar__group__size--extra-large .avatar{height:72px;padding:0 8px}.focus:focus-visible{display:-ms-flexbox;display:flex;position:absolute;border:2px solid #c226fb;border-radius:4px;width:100%;height:100%;top:-4px;left:-4px;padding-right:4px;padding-bottom:4px;outline:none}";var n=a("bds_avatar_group",function(){function a(a){t(this,a);this.bdsClickAvatarGroup=r(this,"bdsClickAvatarGroup",7);this.size="standard"}a.prototype.handleClickGroup=function(a){a.preventDefault();this.bdsClickAvatarGroup.emit(a)};a.prototype.handleClickKey=function(a){if((a.key==="Enter"||a.key===" ")&&this.canClick){a.preventDefault();this.bdsClickAvatarGroup.emit()}};a.prototype.parseUsers=function(){if(this.users){try{this.internalUsers=typeof this.users==="string"?JSON.parse(this.users):this.users}catch(a){this.internalUsers=[]}}};a.prototype.componentWillLoad=function(){this.users&&this.parseUsers();this.leftoversUsers=this.internalUsers.length-5};a.prototype.render=function(){var a;var t=this;return i(e,{class:"host"},i("div",{class:(a={avatar__group:true},a["avatar__group__size--".concat(this.size)]=true,a["avatar__group__click--".concat(this.canClick)]=true,a),onClick:function(){return t.handleClickGroup}},this.internalUsers?this.internalUsers.slice(0,6).map((function(a,r,e){return r+1===e.length&&t.internalUsers.length>5?i("bds-avatar",{size:t.size,ellipsis:t.leftoversUsers}):i("bds-avatar",{id:a.id,name:a.name,thumbnail:a.thumbnail,size:t.size})})):i("slot",null)),this.canClick?i("div",{class:"focus",tabindex:"0",onClick:function(){return t.handleClickKey}}):"")};return a}());n.style=s}}}));

package/dist/blip-ds/bds-avatar.entry.js

@@ -1,10 +1,11 @@
-import { r as registerInstance, h } from './index-bda47b0f.js';
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-bda47b0f.js';
 
-const avatarCss = ".avatar{margin:0;font-family:\"Nunito Sans\", \"Tahoma\", \"Helvetica\", \"Arial\", sans-serif;font-style:normal;font-weight:normal;margin:0;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0;margin-inline-end:0;padding:0;border:0;border-radius:72px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;overflow:hidden}.avatar__text{color:#ffffff}.avatar__icon{color:#8ca0b3}.avatar__img{width:100%;height:auto}.avatar__ellipsis{color:#505f79}.avatar__btn{position:relative;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.avatar__btn__img{width:100%;height:auto}.avatar__btn__text{color:#ffffff;opacity:1;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__icon{color:#8ca0b3;opacity:1;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__thumb{position:absolute;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;top:0;left:0;background-color:rgba(80, 95, 121, 0.5);cursor:pointer;opacity:0;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__thumb__icon{color:#ffffff}.avatar__btn__name{position:absolute;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;top:0;left:0;cursor:pointer;opacity:0;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__name__icon{color:#ffffff}.avatar__btn__empty{position:absolute;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;top:0;left:0;cursor:pointer;opacity:0;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__empty__icon{color:#8ca0b3}.avatar__size--micro{width:24px;height:24px}.avatar__size--extra-small{width:32px;height:32px}.avatar__size--small{width:40px;height:40px}.avatar__size--standard{width:56px;height:56px}.avatar__size--large{width:64px;height:64px}.avatar__size--extra-large{width:72px;height:72px}.avatar__color--neutral{background-color:#d2dfe6}.avatar__color--purple{background-color:#c226fb}.avatar__color--brand{background-color:#00c6d7}.avatar__color--green{background-color:#c226fb}.avatar__color--brown{background-color:#f6a721}.avatar__color--pink{background-color:#fb5a8b}.avatar:hover .avatar__btn__thumb{opacity:1}.avatar:hover .avatar__btn__text{opacity:0}.avatar:hover .avatar__btn__icon{opacity:0}.avatar:hover .avatar__btn__name{opacity:1}.avatar:hover .avatar__btn__empty{opacity:1}";
+const avatarCss = ".host{position:relative}.avatar{border-radius:40px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:100%}.avatar__text{color:#202c44}.avatar__icon{color:#202c44}.avatar__img{width:100%;height:auto}.avatar__ellipsis{color:#ffffff}.avatar__btn{position:relative;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.avatar__btn__img{width:100%;height:auto}.avatar__btn__text{color:#202c44;opacity:1;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__icon{color:#202c44;opacity:1;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__thumb{position:absolute;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;top:0;left:0;background-color:#ffffff;cursor:pointer;opacity:0;-webkit-transition:all 0.5s;transition:all 0.5s}.avatar__btn__thumb__icon{color:#202c44}.avatar__btn__name{position:absolute;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;top:0;left:0;cursor:pointer;opacity:0;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__name__icon{color:#202c44}.avatar__btn__empty{position:absolute;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;top:0;left:0;cursor:pointer;opacity:0;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__empty__icon{color:#202c44}.avatar__size--micro{width:24px;height:24px}.avatar__size--extra-small{width:32px;height:32px;min-width:32px}.avatar__size--small{width:40px;height:40px;min-width:40px}.avatar__size--standard{width:56px;height:56px;min-width:56px}.avatar__size--large{width:64px;height:64px;min-width:64px}.avatar__size--extra-large{width:72px;height:72px;min-width:72px}.avatar__color--neutral{background-color:#e7edf4}.avatar__color--yellow{background-color:#fff6a8}.avatar__color--blue{background-color:#80e3eb}.avatar__color--green{background-color:#90e6bc}.avatar__color--brown{background-color:#ffd29e}.avatar__color--pink{background-color:#fdacc5}.avatar:hover .avatar__btn__thumb{opacity:0.65}.avatar:hover .avatar__btn__text{opacity:0}.avatar:hover .avatar__btn__icon{opacity:0}.avatar:hover .avatar__btn__name{opacity:1}.avatar:hover .avatar__btn__empty{opacity:1}.focus:focus-visible{display:-ms-flexbox;display:flex;position:absolute;border:2px solid #c226fb;border-radius:4px;width:100%;height:100%;top:-4px;left:-4px;padding-right:4px;padding-bottom:4px;outline:none}";
 
 const BdsAvatar = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.bdsClickAvatar = createEvent(this, "bdsClickAvatar", 7);
     this.typoSize = 'fs-20';
     this.iconSize = 'large';
     /**
@@ -44,7 +45,7 @@ const BdsAvatar = class {
           break;
         case 'small':
           this.typoSize = 'fs-16';
-          this.iconSize = 'small';
+          this.iconSize = 'x-small';
           break;
         case 'standard':
           this.typoSize = 'fs-20';
@@ -52,11 +53,11 @@ const BdsAvatar = class {
           break;
         case 'large':
           this.typoSize = 'fs-24';
-          this.iconSize = 'large';
+          this.iconSize = 'xxx-large';
           break;
         case 'extra-large':
           this.typoSize = 'fs-32';
-          this.iconSize = 'x-large';
+          this.iconSize = 'xxx-large';
           break;
         default:
           this.typoSize = 'fs-20';
@@ -64,21 +65,29 @@ const BdsAvatar = class {
       }
     };
   }
+  onUploadClick(e) {
+    e.preventDefault();
+    this.bdsClickAvatar.emit(e);
+  }
+  handleClickKey(event) {
+    if ((event.key === 'Enter' || event.key === ' ') && this.upload) {
+      event.preventDefault();
+      this.bdsClickAvatar.emit();
+    }
+  }
   render() {
-    const avatarColor = ['purple', 'brand', 'green', 'brown', 'pink'];
+    const avatarColor = ['yellow', 'blue', 'green', 'brown', 'pink'];
     const randColor = avatarColor[Math.floor(Math.random() * avatarColor.length)];
     const avatarBgColor = !this.name || this.ellipsis ? 'neutral' : randColor;
     const arrayName = this.name ? this.name.split(' ') : [];
     const firstName = arrayName.length ? arrayName.shift().charAt(0) : '';
     const lastName = arrayName.length ? arrayName.pop().charAt(0) : '';
-    const Element = this.upload ? 'button' : 'div';
     this.selectTypoSize(this.size);
-    return (h(Element, { class: {
+    return (h(Host, { class: { host: true, [`avatar__size--${this.size}`]: true } }, h("div", { class: {
         avatar: true,
-        [`avatar__size--${this.size}`]: true,
         [`avatar__color--${avatarBgColor}`]: true,
         upload: this.upload,
-      }, "data-test": this.dataTest }, this.ellipsis ? (h("bds-typo", { class: "avatar__ellipsis", variant: this.typoSize, tag: "span" }, `+${this.ellipsis}`)) : this.thumbnail ? (this.upload ? (h("div", { class: "avatar__btn" }, h("img", { class: "avatar__btn__img", src: this.thumbnail }), h("div", { class: "avatar__btn__thumb" }, h("bds-icon", { class: "avatar__btn__thumb__icon", name: "edit", theme: "outline", size: this.iconSize })))) : (h("img", { class: "avatar__img", src: this.thumbnail }))) : this.name ? (this.upload ? (h("div", { class: "avatar__btn" }, h("bds-typo", { class: "avatar__btn__text", variant: this.typoSize, tag: "span" }, firstName + lastName), h("div", { class: "avatar__btn__name" }, h("bds-icon", { class: "avatar__btn__name__icon", name: "upload", theme: "outline", size: this.iconSize })))) : (h("bds-typo", { class: "avatar__text", variant: this.typoSize, tag: "span" }, firstName + lastName))) : this.upload ? (h("div", { class: "avatar__btn" }, h("bds-icon", { class: "avatar__btn__icon", name: "user-default", theme: "outline", size: this.iconSize }), h("div", { class: "avatar__btn__empty" }, h("bds-icon", { class: "avatar__btn__empty__icon", name: "upload", theme: "outline", size: this.iconSize })))) : (h("bds-icon", { class: "avatar__icon", name: "user-default", theme: "outline", size: this.iconSize }))));
+      }, "data-test": this.dataTest }, this.ellipsis ? (h("bds-typo", { margin: false, class: "avatar__ellipsis", variant: this.typoSize, tag: "span" }, `+${this.ellipsis}`)) : this.thumbnail ? (this.upload && this.size !== 'micro' ? (h("div", { class: "avatar__btn", onClick: () => this.onUploadClick }, h("img", { class: "avatar__btn__img", src: this.thumbnail }), h("div", { class: "avatar__btn__thumb" }, h("bds-icon", { class: "avatar__btn__thumb__icon", name: "upload", theme: "outline", size: this.iconSize })))) : (h("img", { class: "avatar__img", src: this.thumbnail }))) : this.name ? (this.upload && this.size !== 'micro' ? (h("div", { class: "avatar__btn", onClick: () => this.onUploadClick }, h("bds-typo", { margin: false, class: "avatar__btn__text", variant: this.typoSize, tag: "span" }, firstName + lastName), h("div", { class: "avatar__btn__name" }, h("bds-icon", { class: "avatar__btn__name__icon", name: "upload", theme: "outline", size: this.iconSize })))) : (h("bds-typo", { margin: false, class: "avatar__text", variant: this.typoSize, tag: "span" }, firstName + lastName))) : this.upload && this.size !== 'micro' ? (h("div", { class: "avatar__btn", onClick: () => this.onUploadClick }, h("bds-icon", { class: "avatar__btn__icon", name: "user-default", theme: "outline", size: this.iconSize }), h("div", { class: "avatar__btn__empty" }, h("bds-icon", { class: "avatar__btn__empty__icon", name: "upload", theme: "outline", size: this.iconSize })))) : (h("bds-icon", { class: "avatar__icon", name: "user-default", theme: "outline", size: this.iconSize }))), this.upload && this.size !== 'micro' ? (h("div", { tabindex: "0", onClick: () => this.handleClickKey, class: "focus" })) : ('')));
   }
 };
 BdsAvatar.style = avatarCss;

package/dist/blip-ds/bds-avatar.system.entry.js

@@ -1 +1 @@
-System.register(["./index-461526c7.system.js"],(function(a){"use strict";var t,i;return{setters:[function(a){t=a.r;i=a.h}],execute:function(){var e='.avatar{margin:0;font-family:"Nunito Sans", "Tahoma", "Helvetica", "Arial", sans-serif;font-style:normal;font-weight:normal;margin:0;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0;margin-inline-end:0;padding:0;border:0;border-radius:72px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;overflow:hidden}.avatar__text{color:#ffffff}.avatar__icon{color:#8ca0b3}.avatar__img{width:100%;height:auto}.avatar__ellipsis{color:#505f79}.avatar__btn{position:relative;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.avatar__btn__img{width:100%;height:auto}.avatar__btn__text{color:#ffffff;opacity:1;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__icon{color:#8ca0b3;opacity:1;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__thumb{position:absolute;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;top:0;left:0;background-color:rgba(80, 95, 121, 0.5);cursor:pointer;opacity:0;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__thumb__icon{color:#ffffff}.avatar__btn__name{position:absolute;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;top:0;left:0;cursor:pointer;opacity:0;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__name__icon{color:#ffffff}.avatar__btn__empty{position:absolute;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;top:0;left:0;cursor:pointer;opacity:0;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__empty__icon{color:#8ca0b3}.avatar__size--micro{width:24px;height:24px}.avatar__size--extra-small{width:32px;height:32px}.avatar__size--small{width:40px;height:40px}.avatar__size--standard{width:56px;height:56px}.avatar__size--large{width:64px;height:64px}.avatar__size--extra-large{width:72px;height:72px}.avatar__color--neutral{background-color:#d2dfe6}.avatar__color--purple{background-color:#c226fb}.avatar__color--brand{background-color:#00c6d7}.avatar__color--green{background-color:#c226fb}.avatar__color--brown{background-color:#f6a721}.avatar__color--pink{background-color:#fb5a8b}.avatar:hover .avatar__btn__thumb{opacity:1}.avatar:hover .avatar__btn__text{opacity:0}.avatar:hover .avatar__btn__icon{opacity:0}.avatar:hover .avatar__btn__name{opacity:1}.avatar:hover .avatar__btn__empty{opacity:1}';var s=a("bds_avatar",function(){function a(a){var i=this;t(this,a);this.typoSize="fs-20";this.iconSize="large";this.name=null;this.thumbnail=null;this.size="standard";this.upload=false;this.ellipsis=null;this.dataTest=null;this.selectTypoSize=function(a){switch(a){case"micro":i.typoSize="fs-12";i.iconSize="xx-small";break;case"extra-small":i.typoSize="fs-14";i.iconSize="x-small";break;case"small":i.typoSize="fs-16";i.iconSize="small";break;case"standard":i.typoSize="fs-20";i.iconSize="medium";break;case"large":i.typoSize="fs-24";i.iconSize="large";break;case"extra-large":i.typoSize="fs-32";i.iconSize="x-large";break;default:i.typoSize="fs-20";i.iconSize="medium"}}}a.prototype.render=function(){var a;var t=["purple","brand","green","brown","pink"];var e=t[Math.floor(Math.random()*t.length)];var s=!this.name||this.ellipsis?"neutral":e;var n=this.name?this.name.split(" "):[];var r=n.length?n.shift().charAt(0):"";var o=n.length?n.pop().charAt(0):"";var l=this.upload?"button":"div";this.selectTypoSize(this.size);return i(l,{class:(a={avatar:true},a["avatar__size--".concat(this.size)]=true,a["avatar__color--".concat(s)]=true,a.upload=this.upload,a),"data-test":this.dataTest},this.ellipsis?i("bds-typo",{class:"avatar__ellipsis",variant:this.typoSize,tag:"span"},"+".concat(this.ellipsis)):this.thumbnail?this.upload?i("div",{class:"avatar__btn"},i("img",{class:"avatar__btn__img",src:this.thumbnail}),i("div",{class:"avatar__btn__thumb"},i("bds-icon",{class:"avatar__btn__thumb__icon",name:"edit",theme:"outline",size:this.iconSize}))):i("img",{class:"avatar__img",src:this.thumbnail}):this.name?this.upload?i("div",{class:"avatar__btn"},i("bds-typo",{class:"avatar__btn__text",variant:this.typoSize,tag:"span"},r+o),i("div",{class:"avatar__btn__name"},i("bds-icon",{class:"avatar__btn__name__icon",name:"upload",theme:"outline",size:this.iconSize}))):i("bds-typo",{class:"avatar__text",variant:this.typoSize,tag:"span"},r+o):this.upload?i("div",{class:"avatar__btn"},i("bds-icon",{class:"avatar__btn__icon",name:"user-default",theme:"outline",size:this.iconSize}),i("div",{class:"avatar__btn__empty"},i("bds-icon",{class:"avatar__btn__empty__icon",name:"upload",theme:"outline",size:this.iconSize}))):i("bds-icon",{class:"avatar__icon",name:"user-default",theme:"outline",size:this.iconSize}))};return a}());s.style=e}}}));
+System.register(["./index-461526c7.system.js"],(function(a){"use strict";var t,i,e,s;return{setters:[function(a){t=a.r;i=a.e;e=a.h;s=a.f}],execute:function(){var n=".host{position:relative}.avatar{border-radius:40px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:100%}.avatar__text{color:#202c44}.avatar__icon{color:#202c44}.avatar__img{width:100%;height:auto}.avatar__ellipsis{color:#ffffff}.avatar__btn{position:relative;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.avatar__btn__img{width:100%;height:auto}.avatar__btn__text{color:#202c44;opacity:1;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__icon{color:#202c44;opacity:1;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__thumb{position:absolute;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;top:0;left:0;background-color:#ffffff;cursor:pointer;opacity:0;-webkit-transition:all 0.5s;transition:all 0.5s}.avatar__btn__thumb__icon{color:#202c44}.avatar__btn__name{position:absolute;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;top:0;left:0;cursor:pointer;opacity:0;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__name__icon{color:#202c44}.avatar__btn__empty{position:absolute;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;top:0;left:0;cursor:pointer;opacity:0;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__empty__icon{color:#202c44}.avatar__size--micro{width:24px;height:24px}.avatar__size--extra-small{width:32px;height:32px;min-width:32px}.avatar__size--small{width:40px;height:40px;min-width:40px}.avatar__size--standard{width:56px;height:56px;min-width:56px}.avatar__size--large{width:64px;height:64px;min-width:64px}.avatar__size--extra-large{width:72px;height:72px;min-width:72px}.avatar__color--neutral{background-color:#e7edf4}.avatar__color--yellow{background-color:#fff6a8}.avatar__color--blue{background-color:#80e3eb}.avatar__color--green{background-color:#90e6bc}.avatar__color--brown{background-color:#ffd29e}.avatar__color--pink{background-color:#fdacc5}.avatar:hover .avatar__btn__thumb{opacity:0.65}.avatar:hover .avatar__btn__text{opacity:0}.avatar:hover .avatar__btn__icon{opacity:0}.avatar:hover .avatar__btn__name{opacity:1}.avatar:hover .avatar__btn__empty{opacity:1}.focus:focus-visible{display:-ms-flexbox;display:flex;position:absolute;border:2px solid #c226fb;border-radius:4px;width:100%;height:100%;top:-4px;left:-4px;padding-right:4px;padding-bottom:4px;outline:none}";var o=a("bds_avatar",function(){function a(a){var e=this;t(this,a);this.bdsClickAvatar=i(this,"bdsClickAvatar",7);this.typoSize="fs-20";this.iconSize="large";this.name=null;this.thumbnail=null;this.size="standard";this.upload=false;this.ellipsis=null;this.dataTest=null;this.selectTypoSize=function(a){switch(a){case"micro":e.typoSize="fs-12";e.iconSize="xx-small";break;case"extra-small":e.typoSize="fs-14";e.iconSize="x-small";break;case"small":e.typoSize="fs-16";e.iconSize="x-small";break;case"standard":e.typoSize="fs-20";e.iconSize="medium";break;case"large":e.typoSize="fs-24";e.iconSize="xxx-large";break;case"extra-large":e.typoSize="fs-32";e.iconSize="xxx-large";break;default:e.typoSize="fs-20";e.iconSize="medium"}}}a.prototype.onUploadClick=function(a){a.preventDefault();this.bdsClickAvatar.emit(a)};a.prototype.handleClickKey=function(a){if((a.key==="Enter"||a.key===" ")&&this.upload){a.preventDefault();this.bdsClickAvatar.emit()}};a.prototype.render=function(){var a,t;var i=this;var n=["yellow","blue","green","brown","pink"];var o=n[Math.floor(Math.random()*n.length)];var r=!this.name||this.ellipsis?"neutral":o;var l=this.name?this.name.split(" "):[];var c=l.length?l.shift().charAt(0):"";var _=l.length?l.pop().charAt(0):"";this.selectTypoSize(this.size);return e(s,{class:(a={host:true},a["avatar__size--".concat(this.size)]=true,a)},e("div",{class:(t={avatar:true},t["avatar__color--".concat(r)]=true,t.upload=this.upload,t),"data-test":this.dataTest},this.ellipsis?e("bds-typo",{margin:false,class:"avatar__ellipsis",variant:this.typoSize,tag:"span"},"+".concat(this.ellipsis)):this.thumbnail?this.upload&&this.size!=="micro"?e("div",{class:"avatar__btn",onClick:function(){return i.onUploadClick}},e("img",{class:"avatar__btn__img",src:this.thumbnail}),e("div",{class:"avatar__btn__thumb"},e("bds-icon",{class:"avatar__btn__thumb__icon",name:"upload",theme:"outline",size:this.iconSize}))):e("img",{class:"avatar__img",src:this.thumbnail}):this.name?this.upload&&this.size!=="micro"?e("div",{class:"avatar__btn",onClick:function(){return i.onUploadClick}},e("bds-typo",{margin:false,class:"avatar__btn__text",variant:this.typoSize,tag:"span"},c+_),e("div",{class:"avatar__btn__name"},e("bds-icon",{class:"avatar__btn__name__icon",name:"upload",theme:"outline",size:this.iconSize}))):e("bds-typo",{margin:false,class:"avatar__text",variant:this.typoSize,tag:"span"},c+_):this.upload&&this.size!=="micro"?e("div",{class:"avatar__btn",onClick:function(){return i.onUploadClick}},e("bds-icon",{class:"avatar__btn__icon",name:"user-default",theme:"outline",size:this.iconSize}),e("div",{class:"avatar__btn__empty"},e("bds-icon",{class:"avatar__btn__empty__icon",name:"upload",theme:"outline",size:this.iconSize}))):e("bds-icon",{class:"avatar__icon",name:"user-default",theme:"outline",size:this.iconSize})),this.upload&&this.size!=="micro"?e("div",{tabindex:"0",onClick:function(){return i.handleClickKey},class:"focus"}):"")};return a}());o.style=n}}}));

package/dist/blip-ds/bds-input-editable.entry.js

@@ -1,11 +1,40 @@
 import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-bda47b0f.js';
 
-const inputEditableCss = ".input__editable{display:block}.input__editable--static{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;cursor:pointer}.input__editable--static:hover .input__editable--static__typo{border:1px solid #3f7de8}.input__editable--static:hover .input__editable--static__icon{color:#3f7de8}.input__editable--static__typo{border:1px solid transparent;margin:0;padding:8px;border-radius:8px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:80%}.input__editable--static__icon{margin-left:8px;color:#8ca0b3}.input__editable--active{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.input__editable--active bds-input{min-width:120px;margin-right:4px}.input__editable--active bds-input.expanded{max-width:100%}.input__editable--active bds-input.fixed{max-width:140px}.input__editable--active bds-input.short::part(input){font-size:1rem;line-height:0px}.input__editable--active bds-input.standard::part(input){font-size:1.5rem;line-height:0px}.input__editable--active bds-input.tall::part(input){font-size:2.5rem;line-height:0px}.input__editable--active bds-input::part(input-container){padding:4px 4px 5px 12px}.input__editable--active bds-input::part(input__message){min-width:180px}.input__editable--active bds-icon{cursor:pointer}.input__editable--active__icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin:auto 0}.input__editable--active__icon--error{color:#ff4c4c}.input__editable--active__icon--error:hover{color:#a01c2c}.input__editable--active__icon--checkball{color:#3f7de8}.input__editable--active__icon--checkball:hover{color:#125ad5}.input__editable--active__icon--checkball--error{color:#8ca0b3}.input__editable--active__icon--checkball--error:hover{color:#8ca0b3}.input__editable--hidden{display:none}";
+const inputEditableCss = ".element_input{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%}.element_input input{-webkit-box-shadow:inherit;box-shadow:inherit}.element_input input::-webkit-input-placeholder{color:#b9cbd3;opacity:1}.element_input input::-moz-placeholder{color:#b9cbd3;opacity:1}.element_input input:-ms-input-placeholder{color:#b9cbd3;opacity:1}.element_input input::-ms-input-placeholder{color:#b9cbd3;opacity:1}.element_input input::placeholder{color:#b9cbd3;opacity:1}.element_input input::-webkit-input-placeholder{color:#b9cbd3;opacity:1}.input{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:8px 4px 9px 12px;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;background:#ffffff}.input--state-primary{border:1px solid #d2dfe6;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-primary:hover{border:1px solid #3f7de8;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-primary.input--pressed{border:1px solid #3f7de8;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;-webkit-box-shadow:0 0 0 2px rgba(63, 125, 232, 0.4);box-shadow:0 0 0 2px rgba(63, 125, 232, 0.4)}.input--state-primary .input__icon{color:#3f7de8;background-color:#e8f2ff}.input--state-primary .input__container__label{color:#8ca0b3}.input--state-primary .input__container__label--pressed{color:#3f7de8}.input--state-primary .input__container__text{caret-color:#3f7de8;color:#202c44}.input--state-danger{border:1px solid #ff4c4c;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-danger:hover{border:1px solid #ff4c4c;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-danger.input--pressed{border:1px solid #ff4c4c;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;-webkit-box-shadow:0 0 0 2px #ffa5a5;box-shadow:0 0 0 2px #ffa5a5}.input--state-danger .input__icon{color:#ff4c4c;background-color:#ffa5a5}.input--state-danger .input__container__label{color:#8ca0b3}.input--state-danger .input__container__label--pressed{color:#ff4c4c}.input--state-danger .input__container__text{caret-color:#ff4c4c;color:#202c44}.input--state-disabled{cursor:not-allowed;border:1px solid #e7edf4;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;background:#f3f6fa}.input--state-disabled:hover{border:1px solid #b9cbd3;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7edf4;box-sizing:border-box;border-radius:8px}.input--state-disabled.input--pressed{border:1px solid #b9cbd3;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;-webkit-box-shadow:0 0 0 2px #e7edf4;box-shadow:0 0 0 2px #e7edf4}.input--state-disabled .input__icon{color:#b9cbd3;background-color:#f8fbfb}.input--state-disabled .input__container__label{color:#b9cbd3}.input--state-disabled .input__container__label--pressed{color:#b9cbd3}.input--state-disabled .input__container__text{caret-color:#b9cbd3;color:#b9cbd3}.input--label{padding:7px 4px 8px 12px}.input__icon{cursor:inherit;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:8px;margin-right:8px;padding:2.5px}.input__icon--large{padding:4px}.input__container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;width:100%}.input__container__wrapper{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.input__container__wrapper__chips{display:inline;max-height:100px;overflow:auto}.input__container__wrapper__chips::-webkit-scrollbar{width:16px;background-color:transparent}.input__container__wrapper__chips::-webkit-scrollbar-thumb{border-radius:10px;border:4px solid transparent;border-radius:10px;background-clip:content-box;background-color:#b9cbd3}.input__container__label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.input__container__text{display:inline-block;margin:0;border:0;padding:0;width:auto;vertical-align:middle;white-space:normal;line-height:inherit;background:none;color:inherit;font-size:inherit;font-family:inherit;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;font-family:\"Nunito Sans\", \"Tahoma\", \"Helvetica\", \"Arial\", sans-serif;font-size:0.875rem;line-height:150%;resize:none;cursor:inherit}.input__container__text:focus{outline:0}.input__container__text::-webkit-file-upload-button{padding:0;border:0;background:none}.input__container__text:focus{outline:0}.input__container__text[type=checkbox],.input__container__text[type=radio]{width:13px;height:13px}.input__container__text[type=search]{-webkit-appearance:textfield;-webkit-box-sizing:content-box}::-webkit-search-decoration{display:none}.input__container__text[type=reset],.input__container__text[type=button],.input__container__text[type=submit]{overflow:visible}.input__container__text::-webkit-scrollbar{width:16px;background-color:transparent}.input__container__text::-webkit-scrollbar-thumb{border-radius:10px;border:4px solid transparent;border-radius:10px;background-clip:content-box;background-color:#b9cbd3}.input__message{display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;height:20px;margin:3.7px 2.5px;-webkit-transition:0.3s cubic-bezier(0.4, 0, 0.2, 1);transition:0.3s cubic-bezier(0.4, 0, 0.2, 1);color:#8ca0b3;word-break:break-word;height:auto;min-height:20px}.input__message bds-typo{margin-top:0px;-ms-flex-item-align:self-start;align-self:self-start}.input__message__icon{display:-ms-flexbox;display:flex;padding-right:4px;margin-top:0px;padding-top:2px}.input__message--danger{color:#ff4c4c}.input__editable{display:block}.input__editable--static{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;cursor:pointer}.input__editable--static:hover .input__editable--static__typo{border:1px solid #3f7de8}.input__editable--static:hover .input__editable--static__icon{color:#3f7de8}.input__editable--static__typo{border:1px solid transparent;margin:0;padding:8px;border-radius:8px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:80%}.input__editable--static__icon{margin-left:8px;color:#8ca0b3}.input__editable--active{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.input__editable--active .element_input{min-width:120px;margin-right:4px}.input__editable--active .element_input.expanded{max-width:100%}.input__editable--active .element_input.fixed{max-width:140px}.input__editable--active .element_input.short input{font-size:1rem;line-height:0px}.input__editable--active .element_input.standard input{font-size:1.5rem;line-height:0px}.input__editable--active .element_input.tall input{font-size:2.5rem;line-height:0px}.input__editable--active .element_input::part(input-container){padding:4px 4px 5px 12px}.input__editable--active .element_input::part(input__message){min-width:180px}.input__editable--active bds-icon{cursor:pointer}.input__editable--active__icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin:auto 0}.input__editable--active__icon--error{color:#ff4c4c}.input__editable--active__icon--error:hover{color:#a01c2c}.input__editable--active__icon--checkball{color:#3f7de8}.input__editable--active__icon--checkball:hover{color:#125ad5}.input__editable--active__icon--checkball--error{color:#8ca0b3}.input__editable--active__icon--checkball--error:hover{color:#8ca0b3}.input__editable--hidden{display:none}";
 
 const InputEditable = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.bdsInputEditableSave = createEvent(this, "bdsInputEditableSave", 7);
+    this.bdsChange = createEvent(this, "bdsChange", 7);
+    this.bdsInput = createEvent(this, "bdsInput", 7);
+    this.bdsCancel = createEvent(this, "bdsCancel", 7);
+    this.bdsFocus = createEvent(this, "bdsFocus", 7);
+    this.bdsBlur = createEvent(this, "bdsBlur", 7);
+    /**
+     * Conditions the element to say whether it is pressed or not, to add styles.
+     */
+    this.isEditing = false;
+    /**
+     * Used to block the confirm icon.
+     */
+    this.isValid = true;
+    /**
+     * Used to validate it is pressed.
+     */
+    this.isPressed = false;
+    /**
+     * Used to validate it is focused.
+     */
+    this.isFocused = false;
+    /**
+     * Used to set the error message setted by the internal validators
+     */
+    this.validationMesage = '';
+    /**
+     * Used to set the danger behavior by the internal validators
+     */
+    this.validationDanger = false;
     /**
      * Set the component size. Can be one of:
      * 'short' | 'standard' | 'tall';
@@ -19,14 +48,6 @@ const InputEditable = class {
      * Data test is the prop to specifically test the component action object.
      */
     this.dataTest = null;
-    /**
-     * Conditions the element to say whether it is pressed or not, to add styles.
-     */
-    this.isEditing = false;
-    /**
-     * Used to block the confirm icon.
-     */
-    this.isValid = true;
     /**
      * Input Name
      */
@@ -47,20 +68,14 @@ const InputEditable = class {
      * Indicated to pass a help to the user in complex filling.
      */
     this.helperMessage = '';
+    /**
+     * Placeholder for native input element.
+     */
+    this.placeholder = '';
     /**
      * Add state danger on input, use for use feedback. If true avoid save confirmation.
      */
     this.danger = false;
-    this.onInputChange = (event) => {
-      if (event.detail) {
-        if (event.detail.value.length < Number(this.minlength)) {
-          this.isValid = false;
-        }
-        else {
-          this.isValid = true;
-        }
-      }
-    };
     this.handleEditing = () => {
       this.toggleEditing();
     };
@@ -68,13 +83,44 @@ const InputEditable = class {
       this.isEditing = !this.isEditing;
     };
     this.handleSaveText = () => {
-      const newValue = this.el.shadowRoot.querySelector('bds-input').value;
+      const newValue = this.nativeInput.value;
       if (newValue.length > 0 && newValue.length >= this.minlength && !this.danger) {
         this.bdsInputEditableSave.emit({ value: newValue, oldValue: this.value });
         this.value = newValue;
         this.toggleEditing();
       }
     };
+    this.changedInputValue = async (ev) => {
+      const input = ev.target;
+      this.checkValidity();
+      if (input) {
+        this.value = input.value || '';
+        if (input.value.length < Number(this.minlength)) {
+          this.isValid = false;
+        }
+        else {
+          this.isValid = true;
+        }
+      }
+      this.bdsInput.emit(ev);
+      this.bdsChange.emit({ value: this.nativeInput.value, oldValue: this.value });
+    };
+    this.onFocus = () => {
+      this.isFocused = true;
+      this.isPressed = true;
+      this.bdsFocus.emit();
+    };
+    this.onBlur = () => {
+      this.onBlurValidations();
+      this.bdsBlur.emit();
+      this.isPressed = false;
+    };
+    this.onClickWrapper = () => {
+      this.onFocus();
+      if (this.nativeInput) {
+        this.nativeInput.focus();
+      }
+    };
     this.getExpand = () => {
       if (this.expand) {
         return 'expanded';
@@ -84,6 +130,33 @@ const InputEditable = class {
       }
     };
   }
+  onBlurValidations() {
+    this.requiredValidation();
+    (this.minlength || this.maxlength) && this.lengthValidation();
+    this.checkValidity();
+  }
+  requiredValidation() {
+    if (this.nativeInput.validity.valueMissing) {
+      this.validationMesage = this.requiredErrorMessage;
+      this.validationDanger = true;
+    }
+  }
+  lengthValidation() {
+    if (this.nativeInput.validity.tooShort) {
+      this.validationMesage = this.minlengthErrorMessage;
+      this.validationDanger = true;
+      return;
+    }
+    if (this.nativeInput.validity.tooLong) {
+      this.validationDanger = true;
+      return;
+    }
+  }
+  checkValidity() {
+    if (this.nativeInput.validity.valid) {
+      this.validationDanger = false;
+    }
+  }
   getFontSizeClass() {
     if (this.size == 'short') {
       return 'fs-16';
@@ -98,10 +171,27 @@ const InputEditable = class {
       return 'fs-24';
     }
   }
+  renderMessage() {
+    const icon = this.danger ? 'error' : 'info';
+    let message = this.danger ? this.errorMessage : this.helperMessage;
+    if (!message && this.validationDanger)
+      message = this.validationMesage;
+    const styles = this.danger || this.validationDanger ? 'input__message input__message--danger' : 'input__message';
+    if (message) {
+      return (h("div", { class: styles, part: "input__message" }, h("div", { class: "input__message__icon" }, h("bds-icon", { size: "x-small", name: icon, theme: "solid", color: "inherit" })), h("bds-typo", { variant: "fs-12" }, message)));
+    }
+    return undefined;
+  }
   render() {
     const variant = this.getFontSizeClass();
     const inputExpand = this.getExpand();
-    return (h(Host, null, h("div", { class: "input__editable" }, h("div", { class: { 'input__editable--static': true, 'input__editable--hidden': this.isEditing }, onClick: this.handleEditing }, h("bds-typo", { tag: "span", part: "input__editable--static__typo", class: "input__editable--static__typo", variant: variant }, this.value), h("bds-icon", { key: "edit-icon", class: "input__editable--static__icon", name: "edit" })), h("div", { class: { 'input__editable--active': true, 'input__editable--hidden': !this.isEditing } }, h("bds-input", { class: { [inputExpand]: true, [this.size]: true }, type: "text", "input-name": this.inputName, value: this.value, minlength: this.minlength, minlengthErrorMessage: this.minlengthErrorMessage, maxlength: this.maxlength, required: true, "required-error-message": this.requiredErrorMessage, "error-message": this.errorMessage, onBdsChange: this.onInputChange, danger: this.danger, helperMessage: this.helperMessage, "data-test": this.dataTest }), h("div", { class: "input__editable--active__icon" }, h("bds-icon", { key: "error-icon", class: "input__editable--active__icon--error", theme: "solid", name: "error", onClick: this.handleEditing }), h("bds-icon", { key: "checkball-icon", class: {
+    return (h(Host, null, h("div", { class: "input__editable" }, h("div", { class: { 'input__editable--static': true, 'input__editable--hidden': this.isEditing }, onClick: this.handleEditing }, h("bds-typo", { tag: "span", part: "input__editable--static__typo", class: "input__editable--static__typo", variant: variant }, this.value), h("bds-icon", { key: "edit-icon", class: "input__editable--static__icon", name: "edit" })), h("div", { class: { 'input__editable--active': true, 'input__editable--hidden': !this.isEditing } }, h("div", { class: { element_input: true, [inputExpand]: true, [this.size]: true } }, h("div", { class: {
+        input: true,
+        select: true,
+        'input--state-primary': !this.danger && !this.validationDanger,
+        'input--state-danger': this.danger || this.validationDanger,
+        'input--pressed': this.isPressed,
+      }, onClick: this.onClickWrapper }, h("div", { class: "input__container", tabindex: "0" }, h("input", { class: { input__container__text: true }, ref: (input) => (this.nativeInput = input), minLength: this.minlength, maxLength: this.maxlength, name: this.inputName, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.changedInputValue, placeholder: this.placeholder, value: this.value, required: true, part: "input", "data-test": this.dataTest }))), this.renderMessage()), h("div", { class: "input__editable--active__icon" }, h("bds-icon", { key: "error-icon", class: "input__editable--active__icon--error", theme: "solid", name: "error", onClick: this.handleEditing }), h("bds-icon", { key: "checkball-icon", class: {
         'input__editable--active__icon--checkball': true,
         'input__editable--active__icon--checkball--error': !this.isValid,
       }, theme: "solid", name: "checkball", onClick: this.handleSaveText }))))));

package/dist/blip-ds/bds-input-editable.system.entry.js

@@ -1 +1 @@
-System.register(["./index-461526c7.system.js"],(function(e){"use strict";var t,i,a,n,s;return{setters:[function(e){t=e.r;i=e.e;a=e.h;n=e.f;s=e.g}],execute:function(){var l=".input__editable{display:block}.input__editable--static{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;cursor:pointer}.input__editable--static:hover .input__editable--static__typo{border:1px solid #3f7de8}.input__editable--static:hover .input__editable--static__icon{color:#3f7de8}.input__editable--static__typo{border:1px solid transparent;margin:0;padding:8px;border-radius:8px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:80%}.input__editable--static__icon{margin-left:8px;color:#8ca0b3}.input__editable--active{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.input__editable--active bds-input{min-width:120px;margin-right:4px}.input__editable--active bds-input.expanded{max-width:100%}.input__editable--active bds-input.fixed{max-width:140px}.input__editable--active bds-input.short::part(input){font-size:1rem;line-height:0px}.input__editable--active bds-input.standard::part(input){font-size:1.5rem;line-height:0px}.input__editable--active bds-input.tall::part(input){font-size:2.5rem;line-height:0px}.input__editable--active bds-input::part(input-container){padding:4px 4px 5px 12px}.input__editable--active bds-input::part(input__message){min-width:180px}.input__editable--active bds-icon{cursor:pointer}.input__editable--active__icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin:auto 0}.input__editable--active__icon--error{color:#ff4c4c}.input__editable--active__icon--error:hover{color:#a01c2c}.input__editable--active__icon--checkball{color:#3f7de8}.input__editable--active__icon--checkball:hover{color:#125ad5}.input__editable--active__icon--checkball--error{color:#8ca0b3}.input__editable--active__icon--checkball--error:hover{color:#8ca0b3}.input__editable--hidden{display:none}";var r=e("bds_input_editable",function(){function e(e){var a=this;t(this,e);this.bdsInputEditableSave=i(this,"bdsInputEditableSave",7);this.size="standard";this.expand=false;this.dataTest=null;this.isEditing=false;this.isValid=true;this.inputName="";this.value="";this.minlength=0;this.errorMessage="";this.helperMessage="";this.danger=false;this.onInputChange=function(e){if(e.detail){if(e.detail.value.length<Number(a.minlength)){a.isValid=false}else{a.isValid=true}}};this.handleEditing=function(){a.toggleEditing()};this.toggleEditing=function(){a.isEditing=!a.isEditing};this.handleSaveText=function(){var e=a.el.shadowRoot.querySelector("bds-input").value;if(e.length>0&&e.length>=a.minlength&&!a.danger){a.bdsInputEditableSave.emit({value:e,oldValue:a.value});a.value=e;a.toggleEditing()}};this.getExpand=function(){if(a.expand){return"expanded"}else{return"fixed"}}}e.prototype.getFontSizeClass=function(){if(this.size=="short"){return"fs-16"}else if(this.size=="standard"){return"fs-24"}else if(this.size=="tall"){return"fs-40"}else{return"fs-24"}};e.prototype.render=function(){var e;var t=this.getFontSizeClass();var i=this.getExpand();return a(n,null,a("div",{class:"input__editable"},a("div",{class:{"input__editable--static":true,"input__editable--hidden":this.isEditing},onClick:this.handleEditing},a("bds-typo",{tag:"span",part:"input__editable--static__typo",class:"input__editable--static__typo",variant:t},this.value),a("bds-icon",{key:"edit-icon",class:"input__editable--static__icon",name:"edit"})),a("div",{class:{"input__editable--active":true,"input__editable--hidden":!this.isEditing}},a("bds-input",{class:(e={},e[i]=true,e[this.size]=true,e),type:"text","input-name":this.inputName,value:this.value,minlength:this.minlength,minlengthErrorMessage:this.minlengthErrorMessage,maxlength:this.maxlength,required:true,"required-error-message":this.requiredErrorMessage,"error-message":this.errorMessage,onBdsChange:this.onInputChange,danger:this.danger,helperMessage:this.helperMessage,"data-test":this.dataTest}),a("div",{class:"input__editable--active__icon"},a("bds-icon",{key:"error-icon",class:"input__editable--active__icon--error",theme:"solid",name:"error",onClick:this.handleEditing}),a("bds-icon",{key:"checkball-icon",class:{"input__editable--active__icon--checkball":true,"input__editable--active__icon--checkball--error":!this.isValid},theme:"solid",name:"checkball",onClick:this.handleSaveText})))))};Object.defineProperty(e.prototype,"el",{get:function(){return s(this)},enumerable:false,configurable:true});return e}());r.style=l}}}));
+var __awaiter=this&&this.__awaiter||function(e,i,t,n){function a(e){return e instanceof t?e:new t((function(i){i(e)}))}return new(t||(t=Promise))((function(t,r){function o(e){try{l(n.next(e))}catch(i){r(i)}}function s(e){try{l(n["throw"](e))}catch(i){r(i)}}function l(e){e.done?t(e.value):a(e.value).then(o,s)}l((n=n.apply(e,i||[])).next())}))};var __generator=this&&this.__generator||function(e,i){var t={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},n,a,r,o;return o={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function s(e){return function(i){return l([e,i])}}function l(o){if(n)throw new TypeError("Generator is already executing.");while(t)try{if(n=1,a&&(r=o[0]&2?a["return"]:o[0]?a["throw"]||((r=a["return"])&&r.call(a),0):a.next)&&!(r=r.call(a,o[1])).done)return r;if(a=0,r)o=[o[0]&2,r.value];switch(o[0]){case 0:case 1:r=o;break;case 4:t.label++;return{value:o[1],done:false};case 5:t.label++;a=o[1];o=[0];continue;case 7:o=t.ops.pop();t.trys.pop();continue;default:if(!(r=t.trys,r=r.length>0&&r[r.length-1])&&(o[0]===6||o[0]===2)){t=0;continue}if(o[0]===3&&(!r||o[1]>r[0]&&o[1]<r[3])){t.label=o[1];break}if(o[0]===6&&t.label<r[1]){t.label=r[1];r=o;break}if(r&&t.label<r[2]){t.label=r[2];t.ops.push(o);break}if(r[2])t.ops.pop();t.trys.pop();continue}o=i.call(e,t)}catch(s){o=[6,s];a=0}finally{n=r=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};System.register(["./index-461526c7.system.js"],(function(e){"use strict";var i,t,n,a,r;return{setters:[function(e){i=e.r;t=e.e;n=e.h;a=e.f;r=e.g}],execute:function(){var o='.element_input{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%}.element_input input{-webkit-box-shadow:inherit;box-shadow:inherit}.element_input input::-webkit-input-placeholder{color:#b9cbd3;opacity:1}.element_input input::-moz-placeholder{color:#b9cbd3;opacity:1}.element_input input:-ms-input-placeholder{color:#b9cbd3;opacity:1}.element_input input::-ms-input-placeholder{color:#b9cbd3;opacity:1}.element_input input::placeholder{color:#b9cbd3;opacity:1}.element_input input::-webkit-input-placeholder{color:#b9cbd3;opacity:1}.input{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:8px 4px 9px 12px;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;background:#ffffff}.input--state-primary{border:1px solid #d2dfe6;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-primary:hover{border:1px solid #3f7de8;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-primary.input--pressed{border:1px solid #3f7de8;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;-webkit-box-shadow:0 0 0 2px rgba(63, 125, 232, 0.4);box-shadow:0 0 0 2px rgba(63, 125, 232, 0.4)}.input--state-primary .input__icon{color:#3f7de8;background-color:#e8f2ff}.input--state-primary .input__container__label{color:#8ca0b3}.input--state-primary .input__container__label--pressed{color:#3f7de8}.input--state-primary .input__container__text{caret-color:#3f7de8;color:#202c44}.input--state-danger{border:1px solid #ff4c4c;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-danger:hover{border:1px solid #ff4c4c;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-danger.input--pressed{border:1px solid #ff4c4c;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;-webkit-box-shadow:0 0 0 2px #ffa5a5;box-shadow:0 0 0 2px #ffa5a5}.input--state-danger .input__icon{color:#ff4c4c;background-color:#ffa5a5}.input--state-danger .input__container__label{color:#8ca0b3}.input--state-danger .input__container__label--pressed{color:#ff4c4c}.input--state-danger .input__container__text{caret-color:#ff4c4c;color:#202c44}.input--state-disabled{cursor:not-allowed;border:1px solid #e7edf4;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;background:#f3f6fa}.input--state-disabled:hover{border:1px solid #b9cbd3;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7edf4;box-sizing:border-box;border-radius:8px}.input--state-disabled.input--pressed{border:1px solid #b9cbd3;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;-webkit-box-shadow:0 0 0 2px #e7edf4;box-shadow:0 0 0 2px #e7edf4}.input--state-disabled .input__icon{color:#b9cbd3;background-color:#f8fbfb}.input--state-disabled .input__container__label{color:#b9cbd3}.input--state-disabled .input__container__label--pressed{color:#b9cbd3}.input--state-disabled .input__container__text{caret-color:#b9cbd3;color:#b9cbd3}.input--label{padding:7px 4px 8px 12px}.input__icon{cursor:inherit;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:8px;margin-right:8px;padding:2.5px}.input__icon--large{padding:4px}.input__container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;width:100%}.input__container__wrapper{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.input__container__wrapper__chips{display:inline;max-height:100px;overflow:auto}.input__container__wrapper__chips::-webkit-scrollbar{width:16px;background-color:transparent}.input__container__wrapper__chips::-webkit-scrollbar-thumb{border-radius:10px;border:4px solid transparent;border-radius:10px;background-clip:content-box;background-color:#b9cbd3}.input__container__label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.input__container__text{display:inline-block;margin:0;border:0;padding:0;width:auto;vertical-align:middle;white-space:normal;line-height:inherit;background:none;color:inherit;font-size:inherit;font-family:inherit;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;font-family:"Nunito Sans", "Tahoma", "Helvetica", "Arial", sans-serif;font-size:0.875rem;line-height:150%;resize:none;cursor:inherit}.input__container__text:focus{outline:0}.input__container__text::-webkit-file-upload-button{padding:0;border:0;background:none}.input__container__text:focus{outline:0}.input__container__text[type=checkbox],.input__container__text[type=radio]{width:13px;height:13px}.input__container__text[type=search]{-webkit-appearance:textfield;-webkit-box-sizing:content-box}::-webkit-search-decoration{display:none}.input__container__text[type=reset],.input__container__text[type=button],.input__container__text[type=submit]{overflow:visible}.input__container__text::-webkit-scrollbar{width:16px;background-color:transparent}.input__container__text::-webkit-scrollbar-thumb{border-radius:10px;border:4px solid transparent;border-radius:10px;background-clip:content-box;background-color:#b9cbd3}.input__message{display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;height:20px;margin:3.7px 2.5px;-webkit-transition:0.3s cubic-bezier(0.4, 0, 0.2, 1);transition:0.3s cubic-bezier(0.4, 0, 0.2, 1);color:#8ca0b3;word-break:break-word;height:auto;min-height:20px}.input__message bds-typo{margin-top:0px;-ms-flex-item-align:self-start;align-self:self-start}.input__message__icon{display:-ms-flexbox;display:flex;padding-right:4px;margin-top:0px;padding-top:2px}.input__message--danger{color:#ff4c4c}.input__editable{display:block}.input__editable--static{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;cursor:pointer}.input__editable--static:hover .input__editable--static__typo{border:1px solid #3f7de8}.input__editable--static:hover .input__editable--static__icon{color:#3f7de8}.input__editable--static__typo{border:1px solid transparent;margin:0;padding:8px;border-radius:8px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:80%}.input__editable--static__icon{margin-left:8px;color:#8ca0b3}.input__editable--active{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.input__editable--active .element_input{min-width:120px;margin-right:4px}.input__editable--active .element_input.expanded{max-width:100%}.input__editable--active .element_input.fixed{max-width:140px}.input__editable--active .element_input.short input{font-size:1rem;line-height:0px}.input__editable--active .element_input.standard input{font-size:1.5rem;line-height:0px}.input__editable--active .element_input.tall input{font-size:2.5rem;line-height:0px}.input__editable--active .element_input::part(input-container){padding:4px 4px 5px 12px}.input__editable--active .element_input::part(input__message){min-width:180px}.input__editable--active bds-icon{cursor:pointer}.input__editable--active__icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin:auto 0}.input__editable--active__icon--error{color:#ff4c4c}.input__editable--active__icon--error:hover{color:#a01c2c}.input__editable--active__icon--checkball{color:#3f7de8}.input__editable--active__icon--checkball:hover{color:#125ad5}.input__editable--active__icon--checkball--error{color:#8ca0b3}.input__editable--active__icon--checkball--error:hover{color:#8ca0b3}.input__editable--hidden{display:none}';var s=e("bds_input_editable",function(){function e(e){var n=this;i(this,e);this.bdsInputEditableSave=t(this,"bdsInputEditableSave",7);this.bdsChange=t(this,"bdsChange",7);this.bdsInput=t(this,"bdsInput",7);this.bdsCancel=t(this,"bdsCancel",7);this.bdsFocus=t(this,"bdsFocus",7);this.bdsBlur=t(this,"bdsBlur",7);this.isEditing=false;this.isValid=true;this.isPressed=false;this.isFocused=false;this.validationMesage="";this.validationDanger=false;this.size="standard";this.expand=false;this.dataTest=null;this.inputName="";this.value="";this.minlength=0;this.errorMessage="";this.helperMessage="";this.placeholder="";this.danger=false;this.handleEditing=function(){n.toggleEditing()};this.toggleEditing=function(){n.isEditing=!n.isEditing};this.handleSaveText=function(){var e=n.nativeInput.value;if(e.length>0&&e.length>=n.minlength&&!n.danger){n.bdsInputEditableSave.emit({value:e,oldValue:n.value});n.value=e;n.toggleEditing()}};this.changedInputValue=function(e){return __awaiter(n,void 0,void 0,(function(){var i;return __generator(this,(function(t){i=e.target;this.checkValidity();if(i){this.value=i.value||"";if(i.value.length<Number(this.minlength)){this.isValid=false}else{this.isValid=true}}this.bdsInput.emit(e);this.bdsChange.emit({value:this.nativeInput.value,oldValue:this.value});return[2]}))}))};this.onFocus=function(){n.isFocused=true;n.isPressed=true;n.bdsFocus.emit()};this.onBlur=function(){n.onBlurValidations();n.bdsBlur.emit();n.isPressed=false};this.onClickWrapper=function(){n.onFocus();if(n.nativeInput){n.nativeInput.focus()}};this.getExpand=function(){if(n.expand){return"expanded"}else{return"fixed"}}}e.prototype.onBlurValidations=function(){this.requiredValidation();(this.minlength||this.maxlength)&&this.lengthValidation();this.checkValidity()};e.prototype.requiredValidation=function(){if(this.nativeInput.validity.valueMissing){this.validationMesage=this.requiredErrorMessage;this.validationDanger=true}};e.prototype.lengthValidation=function(){if(this.nativeInput.validity.tooShort){this.validationMesage=this.minlengthErrorMessage;this.validationDanger=true;return}if(this.nativeInput.validity.tooLong){this.validationDanger=true;return}};e.prototype.checkValidity=function(){if(this.nativeInput.validity.valid){this.validationDanger=false}};e.prototype.getFontSizeClass=function(){if(this.size=="short"){return"fs-16"}else if(this.size=="standard"){return"fs-24"}else if(this.size=="tall"){return"fs-40"}else{return"fs-24"}};e.prototype.renderMessage=function(){var e=this.danger?"error":"info";var i=this.danger?this.errorMessage:this.helperMessage;if(!i&&this.validationDanger)i=this.validationMesage;var t=this.danger||this.validationDanger?"input__message input__message--danger":"input__message";if(i){return n("div",{class:t,part:"input__message"},n("div",{class:"input__message__icon"},n("bds-icon",{size:"x-small",name:e,theme:"solid",color:"inherit"})),n("bds-typo",{variant:"fs-12"},i))}return undefined};e.prototype.render=function(){var e;var i=this;var t=this.getFontSizeClass();var r=this.getExpand();return n(a,null,n("div",{class:"input__editable"},n("div",{class:{"input__editable--static":true,"input__editable--hidden":this.isEditing},onClick:this.handleEditing},n("bds-typo",{tag:"span",part:"input__editable--static__typo",class:"input__editable--static__typo",variant:t},this.value),n("bds-icon",{key:"edit-icon",class:"input__editable--static__icon",name:"edit"})),n("div",{class:{"input__editable--active":true,"input__editable--hidden":!this.isEditing}},n("div",{class:(e={element_input:true},e[r]=true,e[this.size]=true,e)},n("div",{class:{input:true,select:true,"input--state-primary":!this.danger&&!this.validationDanger,"input--state-danger":this.danger||this.validationDanger,"input--pressed":this.isPressed},onClick:this.onClickWrapper},n("div",{class:"input__container",tabindex:"0"},n("input",{class:{input__container__text:true},ref:function(e){return i.nativeInput=e},minLength:this.minlength,maxLength:this.maxlength,name:this.inputName,onBlur:this.onBlur,onFocus:this.onFocus,onInput:this.changedInputValue,placeholder:this.placeholder,value:this.value,required:true,part:"input","data-test":this.dataTest}))),this.renderMessage()),n("div",{class:"input__editable--active__icon"},n("bds-icon",{key:"error-icon",class:"input__editable--active__icon--error",theme:"solid",name:"error",onClick:this.handleEditing}),n("bds-icon",{key:"checkball-icon",class:{"input__editable--active__icon--checkball":true,"input__editable--active__icon--checkball--error":!this.isValid},theme:"solid",name:"checkball",onClick:this.handleSaveText})))))};Object.defineProperty(e.prototype,"el",{get:function(){return r(this)},enumerable:false,configurable:true});return e}());s.style=o}}}));

package/dist/blip-ds/bds-radio.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, e as createEvent, h } from './index-bda47b0f.js';
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-bda47b0f.js';
 
-const radioCss = ".radio{cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}.radio [type=radio]{display:none}.radio [type=radio]:focus{outline:0}.radio__circle{-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:0s;transition-delay:0s;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:16px;height:16px;-ms-flex-negative:0;flex-shrink:0;border:1px solid #3f7de8;border-radius:100%;background:#ffffff}.radio__circle__pointer{-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:0s;transition-delay:0s;border-radius:100%;background:#ffffff;height:10px;width:10px}.radio__circle:hover{border-color:#125ad5}.radio__text{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;padding-left:8px;color:#505f79}.radio__input[type=radio]:checked~.radio__circle{background:#ffffff}.radio__input[type=radio]:checked~.radio__circle .radio__circle__pointer{background-color:#3f7de8}.radio__input[type=radio]:checked~.radio__circle:hover{border-color:#125ad5}.radio__input[type=radio]:checked~.radio__circle:hover .radio__circle__pointer{background-color:#125ad5}.radio__input[type=radio]:disabled~.radio__circle{border-color:#637798;background-color:#e8f2ff}.radio__input[type=radio]:disabled~.radio__circle .radio__circle__pointer--checked{background-color:#637798}.radio__input[type=radio]:disabled~.radio__text,.radio__input[type=radio]:disabled~.radio__circle{cursor:not-allowed}";
+const radioCss = ":host{display:-ms-flexbox;display:flex}.radio{display:-ms-flexbox;display:flex;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}.radio [type=radio]{display:none}.radio [type=radio]:focus{outline:0}.radio__circle{-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:0s;transition-delay:0s;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:24px;height:24px;-ms-flex-negative:0;flex-shrink:0;border:2px solid #505f79;padding:4px;border-radius:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;position:relative}.radio__circle__pointer{-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:0s;transition-delay:0s;border-radius:100%;background:transparent;height:10px;width:10px}.radio__circle:hover{border-color:#6e7b91}.radio__circle:hover .hover{display:-ms-flexbox;display:flex;background-color:#202c44;position:absolute;width:40px;height:40px;opacity:0.1;border-radius:24px}.radio__circle .focus:focus-visible{display:-ms-flexbox;display:flex;position:absolute;border:2px solid #c226fb;border-radius:4px;padding:4px;width:100%;height:100%;outline:none}.radio__text{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;padding-left:8px;color:#202c44}.radio__input[type=radio]:checked~.radio__circle{background:transparent}.radio__input[type=radio]:checked~.radio__circle .radio__circle__pointer{background-color:#3f7de8}.radio__input[type=radio]:checked~.radio__circle:hover{border-color:#125ad5}.radio__input[type=radio]:checked~.radio__circle:hover .radio__circle__pointer{background-color:#125ad5}.radio__input[type=radio]:disabled~.radio__circle{border-color:#6e7b91;background-color:#d2dfe6}.radio__input[type=radio]:disabled~.radio__circle .radio__circle__pointer{background-color:transparent}.radio__input[type=radio]:disabled:hover~.radio__circle{border-color:#6e7b91;background-color:#d2dfe6}.radio__input[type=radio]:disabled:hover~.radio__circle .radio__circle__pointer{background-color:transparent}.radio__input[type=radio]:disabled:checked~.radio__circle{border-color:#6e7b91;background-color:#d2dfe6}.radio__input[type=radio]:disabled:checked~.radio__circle .radio__circle__pointer{background-color:#505f79}.radio__input[type=radio]:disabled:checked:hover~.radio__circle{border-color:#6e7b91;background-color:#d2dfe6}.radio__input[type=radio]:disabled:checked:hover~.radio__circle .radio__circle__pointer{background-color:#505f79}.radio__input[type=radio]:disabled~.radio__text{color:#505f79;cursor:not-allowed}.radio__input[type=radio]:disabled~.radio__circle{cursor:not-allowed}";
 
 let radioButtonIds = 0;
 const Radio = class {
@@ -41,8 +41,15 @@ const Radio = class {
   connectedCallback() {
     this.radioId = this.refer || `bds-radio-${radioButtonIds++}`;
   }
+  handleClickKey(event) {
+    if ((event.key === 'Enter' || event.key === ' ') && !this.disabled) {
+      this.onClick(event);
+      event.preventDefault();
+      this.bdsClickChange.emit({ checked: this.checked });
+    }
+  }
   render() {
-    return (h("label", { class: "radio", htmlFor: this.radioId }, h("input", { class: "radio__input", type: "radio", ref: this.refNativeInput, id: this.radioId, onClick: this.onClick, disabled: this.disabled, checked: this.checked, value: this.value, name: this.name, "data-test": this.dataTest }), h("div", { class: "radio__circle" }, h("div", { class: "radio__circle__pointer" })), this.label && (h("bds-typo", { class: "radio__text", variant: "fs-14", tag: "span" }, this.label)), h("slot", null)));
+    return (h(Host, null, h("label", { class: "radio", htmlFor: this.radioId }, h("input", { class: "radio__input", type: "radio", ref: this.refNativeInput, id: this.radioId, onClick: this.onClick, disabled: this.disabled, checked: this.checked, value: this.value, name: this.name, "data-test": this.dataTest }), h("div", { class: "radio__circle" }, !this.disabled ? h("div", { class: "focus", tabindex: "0", onKeyDown: this.handleClickKey.bind(this) }) : '', !this.disabled ? h("div", { class: "hover" }) : '', h("div", { class: "radio__circle__pointer" })), this.label && (h("bds-typo", { class: "radio__text", variant: "fs-14", bold: this.checked ? 'bold' : 'regular', tag: "span" }, this.label)), h("slot", null))));
   }
   static get watchers() { return {
     "checked": ["checkedChanged"]

package/dist/blip-ds/bds-radio.system.entry.js

@@ -1 +1 @@
-System.register(["./index-461526c7.system.js"],(function(e){"use strict";var i,t,r;return{setters:[function(e){i=e.r;t=e.e;r=e.h}],execute:function(){var n=".radio{cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}.radio [type=radio]{display:none}.radio [type=radio]:focus{outline:0}.radio__circle{-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:0s;transition-delay:0s;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:16px;height:16px;-ms-flex-negative:0;flex-shrink:0;border:1px solid #3f7de8;border-radius:100%;background:#ffffff}.radio__circle__pointer{-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:0s;transition-delay:0s;border-radius:100%;background:#ffffff;height:10px;width:10px}.radio__circle:hover{border-color:#125ad5}.radio__text{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;padding-left:8px;color:#505f79}.radio__input[type=radio]:checked~.radio__circle{background:#ffffff}.radio__input[type=radio]:checked~.radio__circle .radio__circle__pointer{background-color:#3f7de8}.radio__input[type=radio]:checked~.radio__circle:hover{border-color:#125ad5}.radio__input[type=radio]:checked~.radio__circle:hover .radio__circle__pointer{background-color:#125ad5}.radio__input[type=radio]:disabled~.radio__circle{border-color:#637798;background-color:#e8f2ff}.radio__input[type=radio]:disabled~.radio__circle .radio__circle__pointer--checked{background-color:#637798}.radio__input[type=radio]:disabled~.radio__text,.radio__input[type=radio]:disabled~.radio__circle{cursor:not-allowed}";var o=0;var a=e("bds_radio",function(){function e(e){var r=this;i(this,e);this.bdsChange=t(this,"bdsChange",7);this.bdsClickChange=t(this,"bdsClickChange",7);this.checked=false;this.disabled=false;this.dataTest=null;this.onClick=function(e){r.checked=!r.checked;r.bdsClickChange.emit({checked:r.checked});e.stopPropagation()};this.refNativeInput=function(e){r.nativeInput=e}}e.prototype.checkedChanged=function(e){this.bdsChange.emit({checked:e})};e.prototype.getInputElement=function(){return Promise.resolve(this.nativeInput)};e.prototype.getValue=function(){return Promise.resolve(this.nativeInput.checked)};e.prototype.connectedCallback=function(){this.radioId=this.refer||"bds-radio-".concat(o++)};e.prototype.render=function(){return r("label",{class:"radio",htmlFor:this.radioId},r("input",{class:"radio__input",type:"radio",ref:this.refNativeInput,id:this.radioId,onClick:this.onClick,disabled:this.disabled,checked:this.checked,value:this.value,name:this.name,"data-test":this.dataTest}),r("div",{class:"radio__circle"},r("div",{class:"radio__circle__pointer"})),this.label&&r("bds-typo",{class:"radio__text",variant:"fs-14",tag:"span"},this.label),r("slot",null))};Object.defineProperty(e,"watchers",{get:function(){return{checked:["checkedChanged"]}},enumerable:false,configurable:true});return e}());a.style=n}}}));
+System.register(["./index-461526c7.system.js"],(function(e){"use strict";var i,r,t,o;return{setters:[function(e){i=e.r;r=e.e;t=e.h;o=e.f}],execute:function(){var a=":host{display:-ms-flexbox;display:flex}.radio{display:-ms-flexbox;display:flex;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}.radio [type=radio]{display:none}.radio [type=radio]:focus{outline:0}.radio__circle{-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:0s;transition-delay:0s;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:24px;height:24px;-ms-flex-negative:0;flex-shrink:0;border:2px solid #505f79;padding:4px;border-radius:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;position:relative}.radio__circle__pointer{-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:0s;transition-delay:0s;border-radius:100%;background:transparent;height:10px;width:10px}.radio__circle:hover{border-color:#6e7b91}.radio__circle:hover .hover{display:-ms-flexbox;display:flex;background-color:#202c44;position:absolute;width:40px;height:40px;opacity:0.1;border-radius:24px}.radio__circle .focus:focus-visible{display:-ms-flexbox;display:flex;position:absolute;border:2px solid #c226fb;border-radius:4px;padding:4px;width:100%;height:100%;outline:none}.radio__text{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;padding-left:8px;color:#202c44}.radio__input[type=radio]:checked~.radio__circle{background:transparent}.radio__input[type=radio]:checked~.radio__circle .radio__circle__pointer{background-color:#3f7de8}.radio__input[type=radio]:checked~.radio__circle:hover{border-color:#125ad5}.radio__input[type=radio]:checked~.radio__circle:hover .radio__circle__pointer{background-color:#125ad5}.radio__input[type=radio]:disabled~.radio__circle{border-color:#6e7b91;background-color:#d2dfe6}.radio__input[type=radio]:disabled~.radio__circle .radio__circle__pointer{background-color:transparent}.radio__input[type=radio]:disabled:hover~.radio__circle{border-color:#6e7b91;background-color:#d2dfe6}.radio__input[type=radio]:disabled:hover~.radio__circle .radio__circle__pointer{background-color:transparent}.radio__input[type=radio]:disabled:checked~.radio__circle{border-color:#6e7b91;background-color:#d2dfe6}.radio__input[type=radio]:disabled:checked~.radio__circle .radio__circle__pointer{background-color:#505f79}.radio__input[type=radio]:disabled:checked:hover~.radio__circle{border-color:#6e7b91;background-color:#d2dfe6}.radio__input[type=radio]:disabled:checked:hover~.radio__circle .radio__circle__pointer{background-color:#505f79}.radio__input[type=radio]:disabled~.radio__text{color:#505f79;cursor:not-allowed}.radio__input[type=radio]:disabled~.radio__circle{cursor:not-allowed}";var d=0;var n=e("bds_radio",function(){function e(e){var t=this;i(this,e);this.bdsChange=r(this,"bdsChange",7);this.bdsClickChange=r(this,"bdsClickChange",7);this.checked=false;this.disabled=false;this.dataTest=null;this.onClick=function(e){t.checked=!t.checked;t.bdsClickChange.emit({checked:t.checked});e.stopPropagation()};this.refNativeInput=function(e){t.nativeInput=e}}e.prototype.checkedChanged=function(e){this.bdsChange.emit({checked:e})};e.prototype.getInputElement=function(){return Promise.resolve(this.nativeInput)};e.prototype.getValue=function(){return Promise.resolve(this.nativeInput.checked)};e.prototype.connectedCallback=function(){this.radioId=this.refer||"bds-radio-".concat(d++)};e.prototype.handleClickKey=function(e){if((e.key==="Enter"||e.key===" ")&&!this.disabled){this.onClick(e);e.preventDefault();this.bdsClickChange.emit({checked:this.checked})}};e.prototype.render=function(){return t(o,null,t("label",{class:"radio",htmlFor:this.radioId},t("input",{class:"radio__input",type:"radio",ref:this.refNativeInput,id:this.radioId,onClick:this.onClick,disabled:this.disabled,checked:this.checked,value:this.value,name:this.name,"data-test":this.dataTest}),t("div",{class:"radio__circle"},!this.disabled?t("div",{class:"focus",tabindex:"0",onKeyDown:this.handleClickKey.bind(this)}):"",!this.disabled?t("div",{class:"hover"}):"",t("div",{class:"radio__circle__pointer"})),this.label&&t("bds-typo",{class:"radio__text",variant:"fs-14",bold:this.checked?"bold":"regular",tag:"span"},this.label),t("slot",null)))};Object.defineProperty(e,"watchers",{get:function(){return{checked:["checkedChanged"]}},enumerable:false,configurable:true});return e}());n.style=a}}}));