UNPKG

bruno-ui

Version:
396 lines (395 loc) 26.2 kB
var __spreadArrays = (this && this.__spreadArrays) || function () { for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length; for (var r = Array(s), k = 0, i = 0; i < il; i++) for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) r[k] = a[j]; return r; }; import { r as registerInstance, c as createEvent, h, g as getElement } from './core-f8c619bf.js'; var CheckboxComponent = /** @class */ (function () { function CheckboxComponent(hostRef) { registerInstance(this, hostRef); this.type = "primary"; this.changed = createEvent(this, "changed", 7); } CheckboxComponent.prototype.render = function () { var _this = this; return (h("label", null, h("input", { type: "checkbox", checked: this.checked, onChange: function (e) { return _this.OnChangeHandler(e); } }), h("span", { class: "brn-checkbox__checkmark brn-checkbox__checkmark--" + this.type }), h("span", { class: "brn-checkbox__text" }, h("slot", null)))); }; CheckboxComponent.prototype.OnChangeHandler = function (event) { this.changed.emit(event.target.checked); }; Object.defineProperty(CheckboxComponent, "style", { get: function () { 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}"; }, enumerable: true, configurable: true }); return CheckboxComponent; }()); var CollapseComponent = /** @class */ (function () { function CollapseComponent(hostRef) { registerInstance(this, hostRef); this.active = false; this._active = false; } CollapseComponent.prototype.ActiveWatchHandler = function () { this._active = this.active; }; CollapseComponent.prototype.componentDidLoad = function () { this._active = this.active; }; CollapseComponent.prototype.render = function () { var _this = this; return (h("div", { class: { "brn-collapse": true, "brn-collapse--active": this._active } }, h("div", { class: "brn-collapse__header", onClick: function () { _this.Toggle(); } }, h("slot", { name: "header" })), h("div", { class: "brn-collapse__body" }, h("slot", { name: "body" })))); }; CollapseComponent.prototype.Toggle = function () { this._active = !this._active; }; Object.defineProperty(CollapseComponent, "watchers", { get: function () { return { "active": ["ActiveWatchHandler"] }; }, enumerable: true, configurable: true }); Object.defineProperty(CollapseComponent, "style", { get: function () { return "brn-collapse>div,brn-collapse>div.brn-collapse--active .brn-collapse__body{display:block}brn-collapse>div .brn-collapse__body{display:none}"; }, enumerable: true, configurable: true }); return CollapseComponent; }()); var ColumnComponent = /** @class */ (function () { function ColumnComponent(hostRef) { registerInstance(this, hostRef); } ColumnComponent.prototype.render = function () { this._el.style.width = this.CalculateWidth() + "%"; return (h("div", null, h("slot", null))); }; ColumnComponent.prototype.CalculateWidth = function () { return this.total > 0 && this.columns > 0 ? (this.columns * 100) / this.total : 0; }; Object.defineProperty(ColumnComponent.prototype, "_el", { get: function () { return getElement(this); }, enumerable: true, configurable: true }); Object.defineProperty(ColumnComponent, "style", { get: function () { 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}"; }, enumerable: true, configurable: true }); return ColumnComponent; }()); var AppHelper = /** @class */ (function () { function AppHelper() { } AppHelper.GetId = function () { return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (result) { var random = (Math.random() * 16) | 0, value = result == "x" ? random : (random & 0x3) | 0x8; return value.toString(16); }); }; AppHelper.GetIdWithPrefix = function (prefix) { return prefix + "--" + AppHelper.GetId(); }; return AppHelper; }()); var DropdownComponent = /** @class */ (function () { function DropdownComponent(hostRef) { registerInstance(this, hostRef); this.closeable = true; this.active = false; this._active = false; this._id = AppHelper.GetIdWithPrefix("dropdown"); this._menuId = AppHelper.GetIdWithPrefix("dropdown__menu"); } DropdownComponent.prototype.ActiveWatchHandler = function (newValue) { this._active = newValue; }; DropdownComponent.prototype.componentDidLoad = function () { this._active = this.active; }; DropdownComponent.prototype.WindowClickHandler = function (event) { this._active = this.IsCloseable(event); }; DropdownComponent.prototype.render = function () { var _this = this; return (h("div", { class: { "brn-dropdown--active": this._active }, id: "" + this._id }, h("div", { class: "brn-dropdown__button", onClick: function () { _this.Toggle(); } }, h("slot", { name: "button" })), h("div", { class: "brn-dropdown__menu", id: "" + this._menuId }, h("slot", { name: "menu" })))); }; DropdownComponent.prototype.Toggle = function () { this._active = !this._active; }; DropdownComponent.prototype.IsCloseable = function (event) { var result = false; if (this.closeable && event.target.closest("#" + this._menuId)) { result = false; } else if (event.target.closest("#" + this._id)) { result = this._active; } return result; }; Object.defineProperty(DropdownComponent.prototype, "_element", { get: function () { return getElement(this); }, enumerable: true, configurable: true }); Object.defineProperty(DropdownComponent, "watchers", { get: function () { return { "active": ["ActiveWatchHandler"] }; }, enumerable: true, configurable: true }); Object.defineProperty(DropdownComponent, "style", { get: function () { 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}"; }, enumerable: true, configurable: true }); return DropdownComponent; }()); var RadioButtonComponent = /** @class */ (function () { function RadioButtonComponent(hostRef) { registerInstance(this, hostRef); this.type = "primary"; this.changed = createEvent(this, "changed", 7); } RadioButtonComponent.prototype.render = function () { var _this = this; return (h("label", null, h("input", { type: "radio", name: this.name, checked: this.checked, onChange: function (e) { return _this.OnChangeHandler(e); } }), h("span", { class: "brn-radio__checkmark brn-radio__checkmark--" + this.type }), h("span", { class: "brn-radio__text" }, h("slot", null)))); }; RadioButtonComponent.prototype.OnChangeHandler = function (event) { this.changed.emit(event.target.checked); }; Object.defineProperty(RadioButtonComponent, "style", { get: function () { 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}"; }, enumerable: true, configurable: true }); return RadioButtonComponent; }()); var RowComponent = /** @class */ (function () { function RowComponent(hostRef) { registerInstance(this, hostRef); } RowComponent.prototype.render = function () { return (h("div", null, h("slot", null))); }; Object.defineProperty(RowComponent, "style", { get: function () { 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}"; }, enumerable: true, configurable: true }); return RowComponent; }()); var SliderComponent = /** @class */ (function () { function SliderComponent(hostRef) { registerInstance(this, hostRef); this._active = false; } SliderComponent.prototype.MouseMoveHandler = function (e) { if (this._active) { this.SetHandlePosition(e); } }; SliderComponent.prototype.MouseUpHandler = function () { this._active = false; }; SliderComponent.prototype.componentDidLoad = function () { this.handle = this.GetHandle(); }; SliderComponent.prototype.render = function () { var _this = this; return (h("div", { class: "slider" }, h("div", { class: "slider__bar", onClick: function (e) { _this.SetHandlePosition(e); } }), h("div", { class: "slider__handle", onMouseDown: function () { _this._active = true; } }))); }; SliderComponent.prototype.GetHandle = function () { return this._element.getElementsByClassName("slider__handle")[0]; }; SliderComponent.prototype.GetSlider = function () { return this._element.getElementsByClassName("slider")[0]; }; SliderComponent.prototype.SetHandlePosition = function (e) { var position = this.CalculatePosition(e); this.handle.style.left = position + "px"; }; SliderComponent.prototype.CalculatePosition = function (e) { var slider = this.GetSlider(); var position = e.clientX - this._element.offsetLeft - this.handle.clientWidth / 2; if (position < this._element.offsetLeft) { position = 0; } else if (e.clientX > slider.offsetWidth) { position = slider.offsetWidth - this._element.offsetLeft - this.handle.clientWidth / 2; } return position; }; Object.defineProperty(SliderComponent.prototype, "_element", { get: function () { return getElement(this); }, enumerable: true, configurable: true }); Object.defineProperty(SliderComponent, "style", { get: function () { 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}"; }, enumerable: true, configurable: true }); return SliderComponent; }()); var TabComponent = /** @class */ (function () { function TabComponent(hostRef) { registerInstance(this, hostRef); this.active = false; this._active = false; this.tabLoaded = createEvent(this, "tabLoaded", 7); this.tabChanged = createEvent(this, "tabChanged", 7); } TabComponent.prototype.ActiveChangeHandler = function (value) { this._active = value; this.TabChanged(); }; TabComponent.prototype.componentWillLoad = function () { this._identifier = AppHelper.GetId(); this._active = this.active; }; TabComponent.prototype.componentDidLoad = function () { var tab = this.GetTab(); this.tabLoaded.emit(tab); }; TabComponent.prototype.render = function () { return (h("div", { class: { 'brn-tab--active': this._active } }, h("slot", null))); }; TabComponent.prototype.TabChanged = function () { var tab = this.GetTab(); this.tabChanged.emit(tab); }; TabComponent.prototype.GetTab = function () { var _this = this; var tab = { Identifier: this._identifier, Index: this.GetIndex(), Name: this.name, Active: this._active, OnActive: function (value) { _this._active = value; } }; return tab; }; TabComponent.prototype.GetIndex = function () { var parent = this._element.closest("brn-tabs"); if (parent) { var tabs = parent.getElementsByTagName('brn-tab'); return Array.prototype.indexOf.call(tabs, this._element); } console.warn('"brn-tab" components must be wrapped with "brn-tabs" component'); return 0; }; Object.defineProperty(TabComponent.prototype, "_element", { get: function () { return getElement(this); }, enumerable: true, configurable: true }); Object.defineProperty(TabComponent, "watchers", { get: function () { return { "active": ["ActiveChangeHandler"] }; }, enumerable: true, configurable: true }); Object.defineProperty(TabComponent, "style", { get: function () { return "brn-tab>div{display:none}brn-tab>div.brn-tab--active{display:block}"; }, enumerable: true, configurable: true }); return TabComponent; }()); var TabsComponent = /** @class */ (function () { function TabsComponent(hostRef) { registerInstance(this, hostRef); } TabsComponent.prototype.componentWillLoad = function () { this._tabs = []; }; TabsComponent.prototype.TabLoadedHandler = function (event) { var tab = event.detail; if (this._tabs.length - 1 < tab.Index) { this._tabs.length = tab.Index + 1; } this._tabs[tab.Index] = tab; this._tabs = __spreadArrays(this._tabs); }; TabsComponent.prototype.TabChangedHandler = function (event) { var tab = event.detail; var index = this._tabs.findIndex(function (x) { return x.Identifier == tab.Identifier; }); this._tabs[index] = tab; this._tabs = __spreadArrays(this._tabs); }; TabsComponent.prototype.render = function () { var _this = this; return (h("div", null, h("div", { class: "brn-tabs" }, this._tabs.filter(function (x) { return x; }).map(function (tab) { return (h("div", { class: { "brn-tabs__tab": true, 'brn-tabs__tab--active': tab.Active }, onClick: function () { _this.TabChangeHandler(tab); } }, tab.Name)); })), h("div", { class: "brn-tabs__content" }, h("slot", null)))); }; TabsComponent.prototype.TabChangeHandler = function (tab) { this.DeactivateAllTabs(); tab.Active = true; tab.OnActive(true); this._tabs = __spreadArrays(this._tabs); }; TabsComponent.prototype.DeactivateAllTabs = function () { this._tabs.map(function (x) { x.Active = false; x.OnActive(false); }); }; Object.defineProperty(TabsComponent, "style", { get: function () { 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}"; }, enumerable: true, configurable: true }); return TabsComponent; }()); var ToggleComponent = /** @class */ (function () { function ToggleComponent(hostRef) { registerInstance(this, hostRef); this.type = "primary"; this.changed = createEvent(this, "changed", 7); } ToggleComponent.prototype.render = function () { var _this = this; return (h("label", null, h("input", { type: "checkbox", checked: this.checked, onChange: function (e) { return _this.OnChangeHandler(e); } }), h("span", { class: "brn-toggle__checkmark brn-toggle__checkmark--" + this.type }), h("span", { class: "brn-toggle__text" }, h("slot", null)))); }; ToggleComponent.prototype.OnChangeHandler = function (event) { this.changed.emit(event.target.checked); }; Object.defineProperty(ToggleComponent, "style", { get: function () { 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}"; }, enumerable: true, configurable: true }); return ToggleComponent; }()); export { CheckboxComponent as brn_checkbox, CollapseComponent as brn_collapse, ColumnComponent as brn_column, DropdownComponent as brn_dropdown, RadioButtonComponent as brn_radio, RowComponent as brn_row, SliderComponent as brn_slider, TabComponent as brn_tab, TabsComponent as brn_tabs, ToggleComponent as brn_toggle };