@limetech/lime-elements/dist/collection/components/action-bar/action-bar-item/action-bar-item.js

Lime Elements

import { h, } from '@stencil/core';
import { createRandomString } from '../../../util/random-string';
import { makeEnterClickable, removeEnterClickable, } from '../../../util/make-enter-clickable';
import { getIconColor, getIconName, getIconTitle, } from '../../icon/get-icon-props';
/**
 * @private
 */
export class ActionBarButton {
  constructor() {
    this.handleClick = (event) => {
      event.stopPropagation();
      this.select.emit(this.item);
    };
    this.item = undefined;
    this.isVisible = true;
    this.selected = false;
    this.tooltipId = createRandomString();
  }
  componentWillLoad() {
    makeEnterClickable(this.host);
  }
  componentDidLoad() {
    this.triggerIconColorWarning();
  }
  disconnectedCallback() {
    removeEnterClickable(this.host);
  }
  render() {
    if (!this.isItem(this.item) && this.item.separator) {
      return h("hr", null);
    }
    return (h("button", { id: this.tooltipId, type: "button", onClick: this.handleClick, disabled: this.isDisabled(), class: {
        'is-selected': this.isItem(this.item) && this.item.selected,
      } }, this.renderIcon(), this.renderLabel(), this.renderTooltip()));
  }
  isItem(item) {
    return !('separator' in item);
  }
  isDisabled() {
    if (this.isItem(this.item) && this.item.disabled) {
      return true;
    }
    if (!this.isVisible) {
      return true;
    }
  }
  renderIcon() {
    if (this.isItem(this.item) && !this.item.icon) {
      return;
    }
    if ('icon' in this.item) {
      const name = getIconName(this.item.icon);
      const color = getIconColor(this.item.icon, this.item.iconColor);
      const title = getIconTitle(this.item.icon);
      return (h("limel-icon", { name: name, "aria-label": title, "aria-hidden": title ? null : 'true', style: {
          '--action-bar-item-icon-color': `${color}`,
        } }));
    }
  }
  renderLabel() {
    if (!this.isItem(this.item) || this.item.iconOnly) {
      return;
    }
    return h("span", { class: "text" }, this.item.text);
  }
  renderTooltip() {
    if (!this.isItem(this.item)) {
      return;
    }
    return (h("limel-tooltip", { elementId: this.tooltipId, label: this.getTooltipLabel(this.item), helperLabel: this.item.commandText }));
  }
  getTooltipLabel(item) {
    const iconTitle = getIconTitle(item.icon);
    const tooltipLabel = item.text;
    if (iconTitle && tooltipLabel) {
      return `${iconTitle} ${tooltipLabel}`;
    }
    return tooltipLabel;
  }
  triggerIconColorWarning() {
    if (this.isItem(this.item) && this.item.iconColor) {
      console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.");
    }
  }
  static get is() { return "limel-action-bar-item"; }
  static get originalStyleUrls() {
    return {
      "$": ["action-bar-item.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["action-bar-item.css"]
    };
  }
  static get properties() {
    return {
      "item": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "ActionBarItem | ListSeparator",
          "resolved": "ActionBarItemOnlyIcon<any> | ActionBarItemWithLabel<any> | ListSeparator",
          "references": {
            "ActionBarItem": {
              "location": "import",
              "path": "../../action-bar/action-bar.types"
            },
            "ListSeparator": {
              "location": "import",
              "path": "../../list/list-item.types"
            }
          }
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Item that is placed in the action bar."
        }
      },
      "isVisible": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "When the item is displayed in the available width,\nthis will be `false`."
        },
        "attribute": "is-visible",
        "reflect": true,
        "defaultValue": "true"
      },
      "selected": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "When the item is selected, this will be `true`."
        },
        "attribute": "selected",
        "reflect": true,
        "defaultValue": "false"
      }
    };
  }
  static get events() {
    return [{
        "method": "select",
        "name": "select",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [{
              "name": "public",
              "text": undefined
            }],
          "text": "Fired when a action bar item has been clicked."
        },
        "complexType": {
          "original": "ActionBarItem | ListSeparator",
          "resolved": "ActionBarItemOnlyIcon<any> | ActionBarItemWithLabel<any> | ListSeparator",
          "references": {
            "ActionBarItem": {
              "location": "import",
              "path": "../../action-bar/action-bar.types"
            },
            "ListSeparator": {
              "location": "import",
              "path": "../../list/list-item.types"
            }
          }
        }
      }];
  }
  static get elementRef() { return "host"; }
}
//# sourceMappingURL=action-bar-item.js.map