@kodaris/krubble-components 1.0.73 → 1.0.74

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

@@ -290,7 +290,7 @@ const ve=1,_e=2,ye=3,me=4,xe=e=>(...t)=>({_$litDirective$:e,values:t});let ke=cl
       outline: 2px solid #3b82f6;
       outline-offset: 2px;
     }
-  `,$e([pe({type:String})],Ce.prototype,"type",void 0),$e([pe({type:String})],Ce.prototype,"title",void 0),$e([pe({type:Boolean})],Ce.prototype,"dismissible",void 0),$e([pe({type:Boolean})],Ce.prototype,"visible",void 0),Ce=$e([de("kr-alert")],Ce);var Se=function(e,t,i,s){var o,r=arguments.length,a=r<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,s);else for(var l=e.length-1;l>=0;l--)(o=e[l])&&(a=(r<3?o(a):r>3?o(t,i,a):o(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a};let Ee=class extends ae{constructor(){super(...arguments),this.variant="flat",this.color="primary",this.size="medium",this.disabled=!1,this.options=[],this.iconPosition="left",this.split=!1,this._state="idle",this._stateText="",this._dropdownOpened=!1,this._handleHostClick=e=>{this.split&&this.options.length||this.options.length&&(e.stopPropagation(),this._toggleDropdown())},this._handleKeydown=e=>{if("Escape"===e.key&&this._dropdownOpened)this._dropdownOpened=!1;else{if("Enter"===e.key||" "===e.key){if(e.preventDefault(),this.split&&this.options.length)return void this.dispatchEvent(new MouseEvent("click",{bubbles:!0,composed:!0}));this.options.length?this._toggleDropdown():this.click()}this.split&&this.options.length&&"ArrowDown"===e.key&&(e.preventDefault(),this._dropdownOpened||this._toggleDropdown())}},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)}_handleSplitPrimaryClick(e){e.stopPropagation(),this._dropdownOpened&&(this._dropdownOpened=!1),this.dispatchEvent(new MouseEvent("click",{bubbles:!0,composed:!0}))}_handleSplitTriggerClick(e){e.stopPropagation(),this._toggleDropdown()}_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),this.classList.toggle("kr-button--split",this.split&&!!this.options.length)}render(){if(this.split&&this.options.length)return j`
+  `,$e([pe({type:String})],Ce.prototype,"type",void 0),$e([pe({type:String})],Ce.prototype,"title",void 0),$e([pe({type:Boolean})],Ce.prototype,"dismissible",void 0),$e([pe({type:Boolean})],Ce.prototype,"visible",void 0),Ce=$e([de("kr-alert")],Ce);var Se=function(e,t,i,s){var o,r=arguments.length,a=r<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,s);else for(var l=e.length-1;l>=0;l--)(o=e[l])&&(a=(r<3?o(a):r>3?o(t,i,a):o(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a};let Ee=class extends ae{constructor(){super(...arguments),this.variant="flat",this.color="primary",this.size="medium",this.disabled=!1,this.options=[],this.iconPosition="left",this.split=!1,this._state="idle",this._stateText="",this._dropdownOpened=!1,this._handleHostClick=e=>{this.split&&this.options.length||this.options.length&&(e.stopPropagation(),this._toggleDropdown())},this._handleKeydown=e=>{if("Escape"===e.key&&this._dropdownOpened)this._dropdownOpened=!1;else{if("Enter"===e.key||" "===e.key){if(e.preventDefault(),this.split&&this.options.length)return void this.dispatchEvent(new MouseEvent("click",{bubbles:!0,composed:!0}));this.options.length?this._toggleDropdown():this.click()}this.split&&this.options.length&&"ArrowDown"===e.key&&(e.preventDefault(),this._dropdownOpened||this._toggleDropdown())}},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)}_handleSplitPrimaryClick(e){e.stopPropagation(),this._dropdownOpened&&(this._dropdownOpened=!1),this.dispatchEvent(new MouseEvent("click",{bubbles:!0,composed:!0}))}_handleSplitTriggerClick(e){e.stopPropagation(),this._toggleDropdown()}_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",e.style.maxHeight="",e.style.overflowY="";const i=e.getBoundingClientRect();i.height>window.innerHeight-t.bottom-8&&t.top>window.innerHeight-t.bottom?(e.style.top="",e.style.bottom=window.innerHeight-t.top+4+"px",e.style.transformOrigin="bottom left",e.classList.add("dropdown--above"),i.height>t.top-8&&(e.style.maxHeight=t.top-8+"px",e.style.overflowY="auto")):(e.classList.remove("dropdown--above"),i.height>window.innerHeight-t.bottom-8&&(e.style.maxHeight=window.innerHeight-t.bottom-8+"px",e.style.overflowY="auto")),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),this.classList.toggle("kr-button--split",this.split&&!!this.options.length)}render(){if(this.split&&this.options.length)return j`
         <div class="split-primary" @click=${e=>this._handleSplitPrimaryClick(e)}>
           <span class="content">
             <slot name="icon"></slot>
@@ -502,6 +502,7 @@ const ve=1,_e=2,ye=3,me=4,xe=e=>(...t)=>({_$litDirective$:e,values:t});let ke=cl
     .dropdown {
       position: fixed;
       min-width: 100%;
+      box-sizing: border-box;
       background: white;
       border: 1px solid #9ba7b6;
       border-radius: 8px;