@railzai/railz-visualizations
Version:
Railz.ai Visualizations
74 lines (69 loc) • 4.83 kB
JavaScript
/*!
* Accounting Data as a Service™ is the solution that makes sense of your business customers' financial data.
* Built with Stencil
* Copyright (c) FIS.
*/
import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
import { i as isEmpty } from './isEmpty.js';
/* eslint-disable @typescript-eslint/no-unused-vars */
function Arrow({ style, up = false, }) {
return (h("div", { style: Object.assign({ transform: up ? 'rotate(180deg)' : 'rotate(0deg)', width: '24px', height: '24px' }, style) },
h("svg", { focusable: "false", viewBox: "0 0 24 24", "aria-hidden": "true" },
h("path", { d: "M7 10l5 5 5-5z" }))));
}
const selectCss = "@font-face{font-family:Inter;src:url(\"../assets/fonts/Inter-italic-var.woff2\");font-family:Inter;src:url(\"../assets/fonts/Inter-upright-var.woff2\")}body,div[class^=railz-],div[class*=\" railz-\"]{font-family:Inter, Roboto, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.noselect{-webkit-touch-callout:none;user-select:none}.rv-select{position:relative;display:flex;font-family:Inter, Roboto, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgba(0, 0, 0, 0.87);border:0;margin:0;cursor:pointer}.rv-select-text{box-shadow:0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);display:flex;flex-direction:column;padding-top:8px;padding-bottom:8px;position:absolute;visibility:hidden;z-index:1;margin:2px;border-radius:4px;color:#fff;overflow-wrap:break-word;text-align:left;font-size:11px;background-color:white}.rv-select-text *{color:rgba(0, 0, 0, 0.87);background-color:rgba(0, 0, 0, 0);min-height:16px;min-width:calc(100% - 32px);font-size:16px;font-weight:400;line-height:1.5;padding:6px 16px;white-space:nowrap}.rv-select-text *:hover,.rv-select-text *:focus{background:rgba(0, 0, 0, 0.04)}.rv-select-text .rv-select-text-selected{background:rgba(0, 0, 0, 0.08)}.rv-right{top:24px;left:-2px}.rv-left{top:24px;right:-2px}.rv-center{top:24px;left:-60px}.rv-select-text-open{visibility:visible;flex-shrink:0}";
const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.selectedItem = createEvent(this, "selectedItem", 7);
/**
* The items to be listed
*/
this.items = ['Efficiency', 'Liquidity', 'Profitability', 'Reliability'];
/**
* Position of the Select text when opened
*/
this.selectStyle = { position: 'right' };
this.selectedIndex = 0;
this.open = false;
}
selectedItemHandler(selectedIndex) {
this.selectedItem.emit(selectedIndex);
}
render() {
var _a, _b, _c, _d, _e, _f, _g;
if (isEmpty(this.items)) {
return;
}
return (h("div", { class: "rv-select noselect", style: (_a = this.selectStyle) === null || _a === void 0 ? void 0 : _a.style, onClick: () => (this.open = !this.open) }, h("span", null, this.items[this.selectedIndex]), ' ', ((_c = (_b = this.selectStyle) === null || _b === void 0 ? void 0 : _b.arrow) === null || _c === void 0 ? void 0 : _c.visible) === false ? ('') : (h(Arrow, { up: this.open, style: (_e = (_d = this.selectStyle) === null || _d === void 0 ? void 0 : _d.arrow) === null || _e === void 0 ? void 0 : _e.style })), h("span", { class: `rv-select-text rv-${(_f = this.selectStyle) === null || _f === void 0 ? void 0 : _f.position} ${this.open && 'rv-select-text-open'}`, style: (_g = this.selectStyle) === null || _g === void 0 ? void 0 : _g.container }, this.items.map((item, index) => {
var _a, _b;
return (h("span", { class: this.selectedIndex === index && 'rv-select-text-selected', onClick: () => {
this.selectedItemHandler(index);
this.selectedIndex = index;
}, style: Object.assign(Object.assign({}, (_a = this.selectStyle) === null || _a === void 0 ? void 0 : _a.item), (this.selectedIndex === index && ((_b = this.selectStyle) === null || _b === void 0 ? void 0 : _b.selectedItem))) }, item));
}))));
}
static get style() { return selectCss; }
}, [1, "railz-select", {
"items": [16],
"selectStyle": [16],
"selectedIndex": [32],
"open": [32]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["railz-select"];
components.forEach(tagName => { switch (tagName) {
case "railz-select":
if (!customElements.get(tagName)) {
customElements.define(tagName, Select);
}
break;
} });
}
export { Select as S, defineCustomElement as d };
//# sourceMappingURL=select.js.map