bruno-ui
Version:
Bruno UI Kit
1 lines • 16.9 kB
JavaScript
import{r as t,c as s,h as e,g as n}from"./p-f563ede8.js";const r=class{constructor(e){t(this,e),this.type="primary",this.changed=s(this,"changed",7)}render(){return e("label",null,e("input",{type:"checkbox",checked:this.checked,onChange:t=>this.OnChangeHandler(t)}),e("span",{class:`brn-checkbox__checkmark brn-checkbox__checkmark--${this.type}`}),e("span",{class:"brn-checkbox__text"},e("slot",null)))}OnChangeHandler(t){this.changed.emit(t.target.checked)}static get style(){return"brn-checkbox label{color:#02364c;position:relative;display:inline-block}brn-checkbox label input{display:none}brn-checkbox label input:checked~.brn-checkbox__checkmark.brn-checkbox__checkmark--primary{background-color:#3abeff}brn-checkbox label input:checked~.brn-checkbox__checkmark.brn-checkbox__checkmark--secondary{background-color:#808c9e}brn-checkbox label input:checked~.brn-checkbox__checkmark.brn-checkbox__checkmark--success{background-color:#59c17c}brn-checkbox label input:checked~.brn-checkbox__checkmark.brn-checkbox__checkmark--danger{background-color:#d64d61}brn-checkbox label input:checked~.brn-checkbox__checkmark.brn-checkbox__checkmark--warning{background-color:#f8a841}brn-checkbox label input:checked~.brn-checkbox__checkmark.brn-checkbox__checkmark--info{background-color:#89defa}brn-checkbox label input:checked~.brn-checkbox__checkmark.brn-checkbox__checkmark--dark{background-color:#02364c}brn-checkbox label input:checked~.brn-checkbox__checkmark.brn-checkbox__checkmark--light{background-color:#eaecf0}brn-checkbox label input:checked~.brn-checkbox__checkmark.brn-checkbox__checkmark--light:after{border-bottom:2px solid #02364c;border-right:2px solid #02364c}brn-checkbox label input:checked~.brn-checkbox__checkmark:after{opacity:1;visibility:visible}brn-checkbox label .brn-checkbox__checkmark{display:block;position:absolute;top:0;left:0;width:1rem;height:1rem;background-color:#eaecf0;-webkit-transition:color .2s ease-in-out,background-color .2s ease-in-out,opacity .2s ease-in-out,visibility .2s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:color .2s ease-in-out,background-color .2s ease-in-out,opacity .2s ease-in-out,visibility .2s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:color .2s ease-in-out,background-color .2s ease-in-out,box-shadow .15s ease-in-out,opacity .2s ease-in-out,visibility .2s ease-in-out;transition:color .2s ease-in-out,background-color .2s ease-in-out,box-shadow .15s ease-in-out,opacity .2s ease-in-out,visibility .2s ease-in-out,-webkit-box-shadow .15s ease-in-out;cursor:pointer;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;border-radius:2px;-ms-user-select:none;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}brn-checkbox label .brn-checkbox__checkmark:hover{background-color:#d7dde4}brn-checkbox label .brn-checkbox__checkmark:after{opacity:0;visibility:hidden;content:\"\";display:block;position:absolute;top:.16rem;left:.33rem;width:.2rem;height:.45rem;border-bottom:2px solid #fff;border-right:2px solid #fff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}brn-checkbox label .brn-checkbox__text{padding-left:1.5rem;margin-right:1rem}"}},i=class{constructor(s){t(this,s),this.active=!1,this._active=!1}ActiveWatchHandler(){this._active=this.active}componentDidLoad(){this._active=this.active}render(){return e("div",{class:{"brn-collapse":!0,"brn-collapse--active":this._active}},e("div",{class:"brn-collapse__header",onClick:()=>{this.Toggle()}},e("slot",{name:"header"})),e("div",{class:"brn-collapse__body"},e("slot",{name:"body"})))}Toggle(){this._active=!this._active}static get watchers(){return{active:["ActiveWatchHandler"]}}static get style(){return"brn-collapse>div,brn-collapse>div.brn-collapse--active .brn-collapse__body{display:block}brn-collapse>div .brn-collapse__body{display:none}"}},a=class{constructor(s){t(this,s)}render(){return this._el.style.width=`${this.CalculateWidth()}%`,e("div",null,e("slot",null))}CalculateWidth(){return this.total>0&&this.columns>0?100*this.columns/this.total:0}get _el(){return n(this)}static get style(){return"brn-column{display:block;padding:0 .5rem;position:relative}brn-column>.div{width:100%;height:100%}brn-column:first-child{padding-left:0}brn-column:last-child{padding-right:0}"}};class h{static GetId(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,t=>{let s=16*Math.random()|0;return("x"==t?s:3&s|8).toString(16)})}static GetIdWithPrefix(t){return`${t}--${h.GetId()}`}}const l=class{constructor(s){t(this,s),this.closeable=!0,this.active=!1,this._active=!1,this._id=h.GetIdWithPrefix("dropdown"),this._menuId=h.GetIdWithPrefix("dropdown__menu")}ActiveWatchHandler(t){this._active=t}componentDidLoad(){this._active=this.active}WindowClickHandler(t){this._active=this.IsCloseable(t)}render(){return e("div",{class:{"brn-dropdown--active":this._active},id:`${this._id}`},e("div",{class:"brn-dropdown__button",onClick:()=>{this.Toggle()}},e("slot",{name:"button"})),e("div",{class:"brn-dropdown__menu",id:`${this._menuId}`},e("slot",{name:"menu"})))}Toggle(){this._active=!this._active}IsCloseable(t){let s=!1;return this.closeable&&t.target.closest(`#${this._menuId}`)?s=!1:t.target.closest(`#${this._id}`)&&(s=this._active),s}get _element(){return n(this)}static get watchers(){return{active:["ActiveWatchHandler"]}}static get style(){return"brn-dropdown>div{display:inline-block;position:relative}brn-dropdown>div.brn-dropdown--active .brn-dropdown__menu{visibility:visible;opacity:1;top:auto;margin-top:.15rem}brn-dropdown>div .brn-dropdown__menu{visibility:hidden;opacity:0;position:absolute;left:0;width:-webkit-max-content;width:-moz-max-content;width:max-content;z-index:1;display:block;text-align:left;background-color:#fff;border:1px solid #d7dde4;padding:.5rem .8rem;margin-top:-.15rem;-webkit-transition:visibility .2s ease-in-out,opacity .2s ease-in-out,margin-top .2s ease-in-out;transition:visibility .2s ease-in-out,opacity .2s ease-in-out,margin-top .2s ease-in-out;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px}brn-dropdown>div .brn-dropdown__menu ul{margin:-.5rem -.8rem -.5rem -.8rem}brn-dropdown>div .brn-dropdown__menu ul li:hover{background-color:#eaecf0}brn-dropdown>div .brn-dropdown__menu ul li.divider{padding:0;margin:.15rem 0}brn-dropdown>div .brn-dropdown__menu ul li a{display:block;padding:.4rem .8rem}"}},c=class{constructor(e){t(this,e),this.type="primary",this.changed=s(this,"changed",7)}render(){return e("label",null,e("input",{type:"radio",name:this.name,checked:this.checked,onChange:t=>this.OnChangeHandler(t)}),e("span",{class:`brn-radio__checkmark brn-radio__checkmark--${this.type}`}),e("span",{class:"brn-radio__text"},e("slot",null)))}OnChangeHandler(t){this.changed.emit(t.target.checked)}static get style(){return"brn-radio label{color:#02364c;position:relative;display:inline-block}brn-radio label input{display:none}brn-radio label input:checked~.brn-radio__checkmark.brn-radio__checkmark--primary{background-color:#3abeff}brn-radio label input:checked~.brn-radio__checkmark.brn-radio__checkmark--secondary{background-color:#808c9e}brn-radio label input:checked~.brn-radio__checkmark.brn-radio__checkmark--success{background-color:#59c17c}brn-radio label input:checked~.brn-radio__checkmark.brn-radio__checkmark--danger{background-color:#d64d61}brn-radio label input:checked~.brn-radio__checkmark.brn-radio__checkmark--warning{background-color:#f8a841}brn-radio label input:checked~.brn-radio__checkmark.brn-radio__checkmark--info{background-color:#89defa}brn-radio label input:checked~.brn-radio__checkmark.brn-radio__checkmark--dark{background-color:#02364c}brn-radio label input:checked~.brn-radio__checkmark.brn-radio__checkmark--light{background-color:#eaecf0}brn-radio label input:checked~.brn-radio__checkmark.brn-radio__checkmark--light:after{background-color:#02364c}brn-radio label input:checked~.brn-radio__checkmark:after{opacity:1;visibility:visible}brn-radio label .brn-radio__checkmark{display:block;position:absolute;top:0;left:0;width:1rem;height:1rem;background-color:#eaecf0;-webkit-transition:color .2s ease-in-out,background-color .2s ease-in-out,opacity .2s ease-in-out,visibility .2s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:color .2s ease-in-out,background-color .2s ease-in-out,opacity .2s ease-in-out,visibility .2s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:color .2s ease-in-out,background-color .2s ease-in-out,box-shadow .15s ease-in-out,opacity .2s ease-in-out,visibility .2s ease-in-out;transition:color .2s ease-in-out,background-color .2s ease-in-out,box-shadow .15s ease-in-out,opacity .2s ease-in-out,visibility .2s ease-in-out,-webkit-box-shadow .15s ease-in-out;cursor:pointer;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;-ms-user-select:none;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}brn-radio label .brn-radio__checkmark:hover{background-color:#d7dde4}brn-radio label .brn-radio__checkmark:after{opacity:0;visibility:hidden;content:\"\";display:block;position:absolute;top:.24rem;left:.25rem;width:.5rem;height:.5rem;background-color:#fff;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}brn-radio label .brn-radio__text{padding-left:1.5rem;margin-right:1rem}"}},o=class{constructor(s){t(this,s)}render(){return e("div",null,e("slot",null))}static get style(){return"brn-row{display:block}brn-row>div{position:relative;width:100%;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;border:0;line-height:normal}"}},d=class{constructor(s){t(this,s),this._active=!1}MouseMoveHandler(t){this._active&&this.SetHandlePosition(t)}MouseUpHandler(){this._active=!1}componentDidLoad(){this.handle=this.GetHandle()}render(){return e("div",{class:"slider"},e("div",{class:"slider__bar",onClick:t=>{this.SetHandlePosition(t)}}),e("div",{class:"slider__handle",onMouseDown:()=>{this._active=!0}}))}GetHandle(){return this._element.getElementsByClassName("slider__handle")[0]}GetSlider(){return this._element.getElementsByClassName("slider")[0]}SetHandlePosition(t){let s=this.CalculatePosition(t);this.handle.style.left=`${s}px`}CalculatePosition(t){let s=this.GetSlider(),e=t.clientX-this._element.offsetLeft-this.handle.clientWidth/2;return e<this._element.offsetLeft?e=0:t.clientX>s.offsetWidth&&(e=s.offsetWidth-this._element.offsetLeft-this.handle.clientWidth/2),e}get _element(){return n(this)}static get style(){return"brn-slider .slider{position:relative}brn-slider .slider .slider__bar{display:block;height:.5rem;background-color:#eaecf0}brn-slider .slider .slider__bar,brn-slider .slider .slider__handle{-webkit-border-radius:1rem;-moz-border-radius:1rem;-ms-border-radius:1rem;border-radius:1rem}brn-slider .slider .slider__handle{top:-.25rem;left:0;position:absolute;width:1rem;height:1rem;background-color:#3abeff;cursor:pointer;-ms-user-select:none;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}"}},b=class{constructor(e){t(this,e),this.active=!1,this._active=!1,this.tabLoaded=s(this,"tabLoaded",7),this.tabChanged=s(this,"tabChanged",7)}ActiveChangeHandler(t){this._active=t,this.TabChanged()}componentWillLoad(){this._identifier=h.GetId(),this._active=this.active}componentDidLoad(){const t=this.GetTab();this.tabLoaded.emit(t)}render(){return e("div",{class:{"brn-tab--active":this._active}},e("slot",null))}TabChanged(){const t=this.GetTab();this.tabChanged.emit(t)}GetTab(){return{Identifier:this._identifier,Index:this.GetIndex(),Name:this.name,Active:this._active,OnActive:t=>{this._active=t}}}GetIndex(){const t=this._element.closest("brn-tabs");if(t){const s=t.getElementsByTagName("brn-tab");return Array.prototype.indexOf.call(s,this._element)}return console.warn('"brn-tab" components must be wrapped with "brn-tabs" component'),0}get _element(){return n(this)}static get watchers(){return{active:["ActiveChangeHandler"]}}static get style(){return"brn-tab>div{display:none}brn-tab>div.brn-tab--active{display:block}"}},u=class{constructor(s){t(this,s)}componentWillLoad(){this._tabs=[]}TabLoadedHandler(t){const s=t.detail;this._tabs.length-1<s.Index&&(this._tabs.length=s.Index+1),this._tabs[s.Index]=s,this._tabs=[...this._tabs]}TabChangedHandler(t){const s=t.detail;let e=this._tabs.findIndex(t=>t.Identifier==s.Identifier);this._tabs[e]=s,this._tabs=[...this._tabs]}render(){return e("div",null,e("div",{class:"brn-tabs"},this._tabs.filter(t=>t).map(t=>e("div",{class:{"brn-tabs__tab":!0,"brn-tabs__tab--active":t.Active},onClick:()=>{this.TabChangeHandler(t)}},t.Name))),e("div",{class:"brn-tabs__content"},e("slot",null)))}TabChangeHandler(t){this.DeactivateAllTabs(),t.Active=!0,t.OnActive(!0),this._tabs=[...this._tabs]}DeactivateAllTabs(){this._tabs.map(t=>{t.Active=!1,t.OnActive(!1)})}static get style(){return"brn-tabs .brn-tabs{display:block;border-bottom:1px solid #d7dde4;margin-bottom:.5rem}brn-tabs .brn-tabs__tab{position:relative;cursor:pointer;display:inline-block;text-decoration:none;color:#808c9e;font-size:.875rem;padding:0 .85rem .5rem .85rem;margin-bottom:-1px;-ms-user-select:none;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}brn-tabs .brn-tabs__tab--active{color:#02364c;border-bottom:1px solid #02364c}"}},_=class{constructor(e){t(this,e),this.type="primary",this.changed=s(this,"changed",7)}render(){return e("label",null,e("input",{type:"checkbox",checked:this.checked,onChange:t=>this.OnChangeHandler(t)}),e("span",{class:`brn-toggle__checkmark brn-toggle__checkmark--${this.type}`}),e("span",{class:"brn-toggle__text"},e("slot",null)))}OnChangeHandler(t){this.changed.emit(t.target.checked)}static get style(){return"brn-toggle label{color:#02364c;position:relative;display:inline-block}brn-toggle label input{display:none}brn-toggle label input:checked~.brn-toggle__checkmark.brn-toggle__checkmark--primary:after{background-color:#3abeff}brn-toggle label input:checked~.brn-toggle__checkmark.brn-toggle__checkmark--secondary:after{background-color:#808c9e}brn-toggle label input:checked~.brn-toggle__checkmark.brn-toggle__checkmark--success:after{background-color:#59c17c}brn-toggle label input:checked~.brn-toggle__checkmark.brn-toggle__checkmark--danger:after{background-color:#d64d61}brn-toggle label input:checked~.brn-toggle__checkmark.brn-toggle__checkmark--warning:after{background-color:#f8a841}brn-toggle label input:checked~.brn-toggle__checkmark.brn-toggle__checkmark--info:after{background-color:#89defa}brn-toggle label input:checked~.brn-toggle__checkmark.brn-toggle__checkmark--dark,brn-toggle label input:checked~.brn-toggle__checkmark.brn-toggle__checkmark--dark:after{background-color:#02364c}brn-toggle label input:checked~.brn-toggle__checkmark.brn-toggle__checkmark--dark:after{background-color:#3abeff}brn-toggle label input:checked~.brn-toggle__checkmark.brn-toggle__checkmark--light:after{background-color:#02364c}brn-toggle label input:checked~.brn-toggle__checkmark:after{margin-left:.7rem}brn-toggle label .brn-toggle__checkmark{display:block;position:absolute;top:0;left:0;width:1.75rem;height:1rem;background-color:#eaecf0;-webkit-transition:color .2s ease-in-out,background-color .2s ease-in-out,margin-left .2s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:color .2s ease-in-out,background-color .2s ease-in-out,margin-left .2s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:color .2s ease-in-out,background-color .2s ease-in-out,box-shadow .15s ease-in-out,margin-left .2s ease-in-out;transition:color .2s ease-in-out,background-color .2s ease-in-out,box-shadow .15s ease-in-out,margin-left .2s ease-in-out,-webkit-box-shadow .15s ease-in-out;cursor:pointer;-webkit-border-radius:2rem;-moz-border-radius:2rem;-ms-border-radius:2rem;border-radius:2rem;-ms-user-select:none;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}brn-toggle label .brn-toggle__checkmark:hover{background-color:#d7dde4}brn-toggle label .brn-toggle__checkmark:after{-webkit-transition:margin-left .2s ease-in-out,background-color .2s ease-in-out;transition:margin-left .2s ease-in-out,background-color .2s ease-in-out;content:\"\";display:block;position:absolute;top:.19rem;left:.23rem;width:.6rem;height:.6rem;background-color:#fff;-webkit-border-radius:.6rem;-moz-border-radius:.6rem;-ms-border-radius:.6rem;border-radius:.6rem}brn-toggle label .brn-toggle__checkmark.brn-toggle__checkmark--dark{background-color:#02364c}brn-toggle label .brn-toggle__checkmark.brn-toggle__checkmark--dark:hover{background-color:#042836}brn-toggle label .brn-toggle__text{padding-left:2.25rem;margin-right:1rem}"}};export{r as brn_checkbox,i as brn_collapse,a as brn_column,l as brn_dropdown,c as brn_radio,o as brn_row,d as brn_slider,b as brn_tab,u as brn_tabs,_ as brn_toggle};