@railzai/railz-visualizations/dist/collection/elements/select/select.js

Railz.ai Visualizations

/*!
 * Accounting Data as a Service™ is the solution that makes sense of your business customers' financial data.
 * Built with Stencil
 * Copyright (c) FIS.
 */
/* eslint-disable react/jsx-no-bind */
/* eslint-disable @typescript-eslint/no-unused-vars */
import { Component, Event, h, Prop, State } from '@stencil/core';
import { isEmpty } from 'lodash-es';
import { Arrow } from './arrow';
export class Select {
  constructor() {
    /**
     * 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 is() { return "railz-select"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["select.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["select.css"]
  }; }
  static get properties() { return {
    "items": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "string[]",
        "resolved": "string[]",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The items to be listed"
      },
      "defaultValue": "['Efficiency', 'Liquidity', 'Profitability', 'Reliability']"
    },
    "selectStyle": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "RVSelectStyle",
        "resolved": "RVSelectStyle",
        "references": {
          "RVSelectStyle": {
            "location": "import",
            "path": "../../types"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Position of the Select text when opened"
      },
      "defaultValue": "{ position: 'right' }"
    }
  }; }
  static get states() { return {
    "selectedIndex": {},
    "open": {}
  }; }
  static get events() { return [{
      "method": "selectedItem",
      "name": "selectedItem",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      }
    }]; }
}
//# sourceMappingURL=select.js.map