@limetech/lime-elements/dist/cjs/limel-icon-button.cjs.entry.js

Lime Elements

'use strict';

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

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

const iconButtonCss = "@charset \"UTF-8\";:host([hidden]){display:none}:host([aria-expanded=true]) button,:host([aria-expanded]:not([aria-expanded=false])) button{box-shadow:var(--button-shadow-inset-pressed) !important}button{all:unset;display:inline-flex;align-items:center;justify-content:center;height:2.25rem;width:2.25rem;border-radius:50%}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-theme-on-surface-color);background-color:var(--icon-background-color, transparent)}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.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-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);box-shadow:var(--button-shadow-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:disabled{cursor:not-allowed;color:var(--limel-theme-text-disabled-on-background-color)}:host([elevated]) button{box-shadow:var(--button-shadow-normal)}:host([elevated]) button:disabled{box-shadow:var(--button-shadow-normal)}limel-icon{padding:0.25rem;width:1.75rem}";

const IconButton = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.tooltipId = randomString.createRandomString();
    this.filterClickWhenDisabled = (e) => {
      if (this.disabled) {
        e.preventDefault();
      }
    };
    this.icon = undefined;
    this.elevated = false;
    this.label = undefined;
    this.disabled = false;
  }
  connectedCallback() {
    this.initialize();
  }
  componentWillLoad() {
    makeEnterClickable.makeEnterClickable(this.host);
  }
  disconnectedCallback() {
    makeEnterClickable.removeEnterClickable(this.host);
  }
  componentDidLoad() {
    this.initialize();
  }
  initialize() {
    const element = this.host.shadowRoot.querySelector('.mdc-icon-button');
    if (!element) {
      return;
    }
  }
  render() {
    const buttonAttributes = {};
    if (this.host.hasAttribute('tabindex')) {
      buttonAttributes.tabindex = this.host.getAttribute('tabindex');
    }
    return (index.h(index.Host, { onClick: this.filterClickWhenDisabled }, index.h("button", Object.assign({ disabled: this.disabled, id: this.tooltipId }, buttonAttributes), this.renderIcon(), this.renderTooltip(this.tooltipId))));
  }
  renderIcon() {
    var _a, _b;
    const icon = getIconProps.getIconName(this.icon);
    const title = getIconProps.getIconTitle(this.icon);
    return (index.h("limel-icon", { name: icon, "aria-label": title, "aria-hidden": title ? null : 'true', style: {
        color: `${(_a = this.icon) === null || _a === void 0 ? void 0 : _a.color}`,
        '--icon-background-color': `${(_b = this.icon) === null || _b === void 0 ? void 0 : _b.backgroundColor}`,
      } }));
  }
  renderTooltip(tooltipId) {
    if (this.label) {
      return index.h("limel-tooltip", { elementId: tooltipId, label: this.label });
    }
  }
  static get delegatesFocus() { return true; }
  get host() { return index.getElement(this); }
};
IconButton.style = iconButtonCss;

exports.limel_icon_button = IconButton;

//# sourceMappingURL=limel-icon-button.cjs.entry.js.map