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

Lime Elements

'use strict';

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

const index = require('./index-174a078a.js');

const helpCss = "@charset \"UTF-8\";limel-popover{display:flex;--popover-surface-width:min(calc(100vw - 4rem), 22rem)}button[slot=trigger]{all:unset;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(--lime-elevated-surface-background-color);box-sizing:border-box;display:flex;align-items:center;justify-content:center;color:rgb(var(--color-sky-default));border-radius:50%;box-shadow:0 0 0 1px rgb(var(--color-sky-lighter), 0.7);width:0.875rem;height:0.875rem;font-size:0.75rem}button[slot=trigger]:hover,button[slot=trigger]:focus,button[slot=trigger]:focus-visible{will-change:color, background-color, box-shadow, transform}button[slot=trigger]:hover,button[slot=trigger]:focus-visible{transform:translate3d(0, 0.01rem, 0);color:rgb(var(--color-sky-dark));background-color:var(--lime-elevated-surface-background-color)}button[slot=trigger]:hover{box-shadow:var(--button-shadow-hovered)}button[slot=trigger]: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[slot=trigger]:hover,button[slot=trigger]:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button[slot=trigger]:focus{outline:none}button[slot=trigger]:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button[slot=trigger].is-open{color:rgb(var(--color-white));background-color:rgb(var(--color-sky-default));box-shadow:var(--button-shadow-inset)}";

const HelpComponent = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.openPopover = (event) => {
      event.stopPropagation();
      this.isOpen = true;
    };
    this.onPopoverClose = (event) => {
      event.stopPropagation();
      this.isOpen = false;
    };
    this.value = undefined;
    this.trigger = '?';
    this.readMoreLink = undefined;
    this.openDirection = 'top-start';
    this.isOpen = false;
  }
  render() {
    return [
      index.h("limel-popover", { open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, index.h("button", { slot: "trigger", onClick: this.openPopover, class: {
          'is-open': this.isOpen,
        } }, this.trigger), index.h("limel-help-content", { value: this.value, readMoreLink: this.readMoreLink })),
    ];
  }
};
HelpComponent.style = helpCss;

exports.limel_help = HelpComponent;

//# sourceMappingURL=limel-help.cjs.entry.js.map