@limetech/lime-elements/dist/cjs/limel-action-bar-item_2.cjs.entry.js

Lime Elements

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-174a078a.js');
const randomString = require('./random-string-27fb6c74.js');
const makeEnterClickable = require('./make-enter-clickable-39af24ec.js');
const getIconProps = require('./get-icon-props-65f39e40.js');

const actionBarItemCss = "@charset \"UTF-8\";limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0;pointer-events:none}button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);color:var(--limel-action-bar-item-text-color);border-radius:var(--action-bar-item-height);font-size:var(--limel-theme-default-font-size);padding:0 0.25rem}button:not([disabled]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover,button:not([disabled]):focus,button:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}button:not([disabled]):hover,button:not([disabled]):focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover{box-shadow:var(--button-shadow-hovered)}button:not([disabled]):active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed)}button:not([disabled]):hover,button:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}button.is-selected{color:var(--lime-primary-color, var(--limel-theme-primary-color)) !important}button.is-selected:not(:hover){box-shadow:var(--button-shadow-inset)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}hr{all:unset;width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){hr{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}";

const ActionBarButton = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.select = index.createEvent(this, "select", 7);
    this.handleClick = (event) => {
      event.stopPropagation();
      this.select.emit(this.item);
    };
    this.item = undefined;
    this.isVisible = true;
    this.selected = false;
    this.tooltipId = randomString.createRandomString();
  }
  componentWillLoad() {
    makeEnterClickable.makeEnterClickable(this.host);
  }
  componentDidLoad() {
    this.triggerIconColorWarning();
  }
  disconnectedCallback() {
    makeEnterClickable.removeEnterClickable(this.host);
  }
  render() {
    if (!this.isItem(this.item) && this.item.separator) {
      return index.h("hr", null);
    }
    return (index.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 = getIconProps.getIconName(this.item.icon);
      const color = getIconProps.getIconColor(this.item.icon, this.item.iconColor);
      const title = getIconProps.getIconTitle(this.item.icon);
      return (index.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 index.h("span", { class: "text" }, this.item.text);
  }
  renderTooltip() {
    if (!this.isItem(this.item)) {
      return;
    }
    return (index.h("limel-tooltip", { elementId: this.tooltipId, label: this.getTooltipLabel(this.item), helperLabel: this.item.commandText }));
  }
  getTooltipLabel(item) {
    const iconTitle = getIconProps.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'}`.");
    }
  }
  get host() { return index.getElement(this); }
};
ActionBarButton.style = actionBarItemCss;

const ActionBarOverflowMenu = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.select = index.createEvent(this, "select", 7);
    this.getOverflowTriggerContent = () => {
      if (this.overFlowIcon) {
        const { color, name, title } = this.overFlowIcon;
        return (index.h("limel-icon", { style: {
            color: color,
          }, name: name, "aria-label": title }));
      }
      return `+${this.numberOfMenuItems}`;
    };
    this.handleSelect = (event) => {
      event.stopPropagation();
      this.select.emit(event.detail);
    };
    this.items = undefined;
    this.openDirection = 'bottom-end';
    this.overFlowIcon = undefined;
  }
  render() {
    return [
      index.h("limel-menu", { openDirection: this.openDirection, items: this.items, onSelect: this.handleSelect }, index.h("button", { slot: "trigger" }, this.getOverflowTriggerContent())),
    ];
  }
  get numberOfMenuItems() {
    return this.items.filter((item) => this.isMenuItem(item)).length;
  }
  isMenuItem(item) {
    return !('separator' in item);
  }
};

exports.limel_action_bar_item = ActionBarButton;
exports.limel_action_bar_overflow_menu = ActionBarOverflowMenu;

//# sourceMappingURL=limel-action-bar-item_2.cjs.entry.js.map