@kodaris/krubble-components 1.0.46 → 1.0.48

package/dist/krubble-components.umd.min.js

@@ -290,7 +290,7 @@ const ve=1,be=2,me=3,ye=4,xe=e=>(...t)=>({_$litDirective$:e,values:t});let _e=cl
       outline: 2px solid #3b82f6;
       outline-offset: 2px;
     }
-  `,we([pe({type:String})],e.KRAlert.prototype,"type",void 0),we([pe({type:String})],e.KRAlert.prototype,"title",void 0),we([pe({type:Boolean})],e.KRAlert.prototype,"dismissible",void 0),we([pe({type:Boolean})],e.KRAlert.prototype,"visible",void 0),e.KRAlert=we([de("kr-alert")],e.KRAlert);var $e=function(e,t,i,o){var s,r=arguments.length,l=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,o);else for(var n=e.length-1;n>=0;n--)(s=e[n])&&(l=(r<3?s(l):r>3?s(t,i,l):s(t,i))||l);return r>3&&l&&Object.defineProperty(t,i,l),l};e.KRButton=class extends le{constructor(){super(...arguments),this.variant="flat",this.color="primary",this.size="medium",this.disabled=!1,this.options=[],this.iconPosition="left",this._state="idle",this._stateText="",this._dropdownOpened=!1,this._handleHostClick=e=>{this.options.length&&(e.stopPropagation(),this._toggleDropdown())},this._handleKeydown=e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.options.length?this._toggleDropdown():this.click()),"Escape"===e.key&&this._dropdownOpened&&(this._dropdownOpened=!1)},this._handleClickOutside=e=>{this._dropdownOpened&&!this.contains(e.target)&&(this._dropdownOpened=!1)}}connectedCallback(){super.connectedCallback(),this.setAttribute("role",this.href?"link":"button"),this.setAttribute("tabindex","0"),this.addEventListener("keydown",this._handleKeydown),this.addEventListener("click",this._handleHostClick),document.addEventListener("click",this._handleClickOutside)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this._handleKeydown),this.removeEventListener("click",this._handleHostClick),document.removeEventListener("click",this._handleClickOutside)}_toggleDropdown(){this._dropdownOpened=!this._dropdownOpened,this._dropdownOpened&&requestAnimationFrame((()=>{const e=this.shadowRoot?.querySelector(".dropdown");if(e){const t=this.getBoundingClientRect();e.style.top=t.bottom+4+"px",e.style.bottom="",e.style.left=t.left+"px",e.style.right="",e.style.minWidth=t.width+"px",e.style.transformOrigin="top left";const i=e.getBoundingClientRect();i.bottom>window.innerHeight?(e.style.top="",e.style.bottom=window.innerHeight-t.top+4+"px",e.style.transformOrigin="bottom left",e.classList.add("dropdown--above")):e.classList.remove("dropdown--above"),i.right>window.innerWidth&&(e.style.left="",e.style.right=window.innerWidth-t.right+"px",i.bottom>window.innerHeight?e.style.transformOrigin="bottom right":e.style.transformOrigin="top right")}}))}_handleOptionClick(e,t){t.stopPropagation(),this._dropdownOpened=!1,this.dispatchEvent(new CustomEvent("option-select",{detail:{id:e.id,label:e.label},bubbles:!0,composed:!0}))}showLoading(){this._clearStateTimeout(),this._state="loading",this._stateText=""}showSuccess(e="Success",t=2e3){this._clearStateTimeout(),this._state="success",this._stateText=e,t>0&&(this._stateTimeout=window.setTimeout((()=>this.reset()),t))}showError(e="Error",t=2e3){this._clearStateTimeout(),this._state="error",this._stateText=e,t>0&&(this._stateTimeout=window.setTimeout((()=>this.reset()),t))}reset(){this._clearStateTimeout(),this._state="idle",this._stateText=""}_clearStateTimeout(){this._stateTimeout&&(clearTimeout(this._stateTimeout),this._stateTimeout=void 0)}updated(e){this.classList.toggle("kr-button--loading","loading"===this._state),this.classList.toggle("kr-button--success","success"===this._state),this.classList.toggle("kr-button--error","error"===this._state),this.classList.toggle(`kr-button--${this.variant}`,!0),this.classList.toggle(`kr-button--${this.color}`,!0),this.classList.toggle("kr-button--small","small"===this.size),this.classList.toggle("kr-button--large","large"===this.size)}render(){const e=I`
+  `,we([pe({type:String})],e.KRAlert.prototype,"type",void 0),we([pe({type:String})],e.KRAlert.prototype,"title",void 0),we([pe({type:Boolean})],e.KRAlert.prototype,"dismissible",void 0),we([pe({type:Boolean})],e.KRAlert.prototype,"visible",void 0),e.KRAlert=we([de("kr-alert")],e.KRAlert);var $e=function(e,t,i,o){var s,r=arguments.length,l=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,o);else for(var n=e.length-1;n>=0;n--)(s=e[n])&&(l=(r<3?s(l):r>3?s(t,i,l):s(t,i))||l);return r>3&&l&&Object.defineProperty(t,i,l),l};e.KRButton=class extends le{constructor(){super(...arguments),this.variant="flat",this.color="primary",this.size="medium",this.disabled=!1,this.options=[],this.iconPosition="left",this._state="idle",this._stateText="",this._dropdownOpened=!1,this._handleHostClick=e=>{this.options.length&&(e.stopPropagation(),this._toggleDropdown())},this._handleKeydown=e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.options.length?this._toggleDropdown():this.click()),"Escape"===e.key&&this._dropdownOpened&&(this._dropdownOpened=!1)},this._handleClickOutside=e=>{this._dropdownOpened&&!this.contains(e.target)&&(this._dropdownOpened=!1)}}connectedCallback(){super.connectedCallback(),this.setAttribute("role",this.href?"link":"button"),this.setAttribute("tabindex","0"),this.addEventListener("keydown",this._handleKeydown),this.addEventListener("click",this._handleHostClick),document.addEventListener("click",this._handleClickOutside)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this._handleKeydown),this.removeEventListener("click",this._handleHostClick),document.removeEventListener("click",this._handleClickOutside)}_toggleDropdown(){this._dropdownOpened=!this._dropdownOpened,this._dropdownOpened&&requestAnimationFrame((()=>{const e=this.shadowRoot?.querySelector(".dropdown");if(e){const t=this.getBoundingClientRect();e.style.top=t.bottom+4+"px",e.style.bottom="",e.style.left=t.left+"px",e.style.right="",e.style.minWidth=t.width+"px",e.style.transformOrigin="top left";const i=e.getBoundingClientRect();i.bottom>window.innerHeight?(e.style.top="",e.style.bottom=window.innerHeight-t.top+4+"px",e.style.transformOrigin="bottom left",e.classList.add("dropdown--above")):e.classList.remove("dropdown--above"),i.right>window.innerWidth&&(e.style.left="",e.style.right=window.innerWidth-t.right+"px",i.bottom>window.innerHeight?e.style.transformOrigin="bottom right":e.style.transformOrigin="top right")}}))}_handleOptionClick(e,t){t.stopPropagation(),this._dropdownOpened=!1,this.dispatchEvent(new CustomEvent("option-select",{detail:{id:e.id,label:e.label},bubbles:!0,composed:!0}))}showLoading(){this._clearStateTimeout(),this._state="loading",this._stateText=""}showSuccess(e="Success",t=2e3){this._clearStateTimeout(),this._state="success",this._stateText=e,t>0&&(this._stateTimeout=window.setTimeout((()=>this.reset()),t))}showError(e="Error",t=2e3){this._clearStateTimeout(),this._state="error",this._stateText=e,t>0&&(this._stateTimeout=window.setTimeout((()=>this.reset()),t))}isLoading(){return"loading"===this._state}reset(){this._clearStateTimeout(),this._state="idle",this._stateText=""}_clearStateTimeout(){this._stateTimeout&&(clearTimeout(this._stateTimeout),this._stateTimeout=void 0)}updated(e){this.classList.toggle("kr-button--loading","loading"===this._state),this.classList.toggle("kr-button--success","success"===this._state),this.classList.toggle("kr-button--error","error"===this._state),this.classList.toggle(`kr-button--${this.variant}`,!0),this.classList.toggle(`kr-button--${this.color}`,!0),this.classList.toggle("kr-button--small","small"===this.size),this.classList.toggle("kr-button--large","large"===this.size)}render(){const e=I`
       <span class="content">
         <slot name="icon"></slot>
         <slot></slot>
@@ -1346,23 +1346,28 @@ const Te="important",Ee=" !"+Te,Ke=xe(class extends _e{constructor(e){if(super(e
                     ></div>`:q}</div>
               `))}
             </div>
-            ${this._data.map(((e,t)=>I`
-              <div
-                class=${ke({row:!0,"row--clickable":!!this._def.rowClickable})}
-                @mousedown=${()=>this._handleRowMouseDown()}
-                @click=${()=>this._handleRowClick(e,t)}
-              >
-                ${this.getDisplayedColumns().map(((i,o)=>I`
-                  <div
-                    class=${ke(this._getCellClasses(i,o))}
-                    style=${Ke(this._getCellStyle(i,o))}
-                    data-column-id=${i.id}
-                  >
-                    ${this._renderCellContent(i,e,t)}
-                  </div>
-                `))}
-              </div>
-            `))}
+            ${this._data.map(((e,t)=>{const i=this.getDisplayedColumns().map(((i,o)=>I`
+                <div
+                  class=${ke(this._getCellClasses(i,o))}
+                  style=${Ke(this._getCellStyle(i,o))}
+                  data-column-id=${i.id}
+                >
+                  ${this._renderCellContent(i,e,t)}
+                </div>
+              `));return this._def.rowHref?I`
+                  <a
+                    href=${this._def.rowHref(e)}
+                    class=${ke({row:!0,"row--clickable":!0,"row--link":!0})}
+                    @mousedown=${()=>this._handleRowMouseDown()}
+                    @click=${()=>this._handleRowClick(e,t)}
+                  >${i}</a>
+                `:I`
+                <div
+                  class=${ke({row:!0,"row--clickable":!!this._def.rowClickable})}
+                  @mousedown=${()=>this._handleRowMouseDown()}
+                  @click=${()=>this._handleRowClick(e,t)}
+                >${i}</div>
+              `}))}
           </div>
         </div>
       </div>
@@ -1696,6 +1701,11 @@ const Te="important",Ee=" !"+Te,Ke=xe(class extends _e{constructor(e){if(super(e
       cursor: pointer;
     }
 
+    .row--link {
+      color: inherit;
+      text-decoration: none;
+    }
+
     .header-row {
       display: contents;
     }
@@ -2329,9 +2339,6 @@ const Te="important",Ee=" !"+Te,Ke=xe(class extends _e{constructor(e){if(super(e
       fill: #000;
     }
 
-    .file-list__action--delete:hover {
-      fill: #dc3545;
-    }
 
     .file-list__empty {
       color: #000;