@limetech/lime-elements/dist/esm/limel-progress-flow-item.entry.js

Lime Elements

import { r as registerInstance, c as createEvent, h, g as getElement } from './index-2714248e.js';
import { g as getIconName } from './get-icon-props-37514418.js';

const progressFlowItemCss = "@charset \"UTF-8\";.flow-item{--step-background:var(\n      --progress-flow-step-background-color,\n      rgb(var(--contrast-600))\n  );--step-background--selected:var(\n      --progress-flow-step-background-color--selected,\n      var(--lime-primary-color, var(--limel-theme-primary-color))\n  );--step-background--passed:var(\n      --progress-flow-step-background-color--passed,\n      var(--step-background--selected)\n  );--step-text:var(\n      --progress-flow-step-text-color,\n      rgb(var(--contrast-1200))\n  );--step-text--selected:var(\n      --progress-flow-step-text-color--selected,\n      var(--lime-on-primary-color, var(--limel-theme-on-primary-color))\n  );--step-text--passed:var(\n      --progress-flow-step-text-color--passed,\n      var(--step-text--selected)\n  );--step-divider-color:var(\n      --progress-flow-step-divider-color,\n      rgb(var(--contrast-100))\n  );position:relative;width:100%;display:flex;flex-direction:column;align-items:stretch}.flow-item:not(.off-progress-item,.last) .divider:after{content:\"\"}.flow-item.off-progress-item{padding-left:0.5rem}.flow-item.first-off-progress-item{padding-left:1rem}.step{transition:background-color 0.2s ease, box-shadow 0.2s ease;display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:var(--step-height);border:none;font-size:var(--limel-theme-default-font-size)}.step.disabled{cursor:not-allowed}.step.disabled.readonly{opacity:1;cursor:default}.step:focus{outline:none}.step:focus-visible{box-shadow:var(--shadow-depth-8-focused)}.flow-item:not(.off-progress-item,.first) .step{padding-left:calc(var(--step-height) / 2)}.flow-item:not(.selected) .step:not(.disabled){cursor:pointer}.flow-item:not(.selected) .step:not(.disabled):hover{box-shadow:var(--button-shadow-normal)}.flow-item:not(.selected) .step:not(.disabled):active{box-shadow:var(--button-shadow-pressed)}.off-progress-item .step{border-radius:0.25rem;padding:0 0.75rem}.off-progress-item .step .icon{margin-left:0}.flow-item.first .step{border-top-left-radius:var(--step-height);border-bottom-left-radius:var(--step-height);padding-left:1.25rem}.flow-item.last .step{border-top-right-radius:var(--step-height);border-bottom-right-radius:var(--step-height);padding-right:1.25rem}.divider{display:flex;align-items:center;justify-content:center;width:var(--step-height);height:var(--step-height);position:absolute;z-index:1;right:calc(var(--step-height) / 2 * -1);overflow:hidden}.divider:after{position:absolute;display:block;box-sizing:border-box;transition:background-color 0.2s ease;width:100%;height:100%;right:calc(var(--step-height) / 5);transform:rotate(45deg);border-style:solid;border-width:0.125rem 0.125rem 0 0;border-radius:0 0.5rem 0 0;border-color:var(--step-divider-color)}.flow-item.last .divider{width:0}.text,.secondary-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:var(--max-text-width);z-index:2}.secondary-text{font-size:0.75rem;margin:auto;padding-left:calc(var(--step-height) / 2)}.icon{margin:0 0.5rem 0 0.25rem;z-index:2}.step:before,.step .lock-icon{pointer-events:none;box-sizing:border-box;z-index:2}.step::before{position:absolute;right:var(--selected-indicator-right);border-radius:50%}.last .step:before,.last .step .lock-icon{right:0.5rem}.flow-item:not(.off-progress-item) .step.selected:before{content:\"\";width:0.375rem;height:0.375rem;background-color:rgb(var(--contrast-700));opacity:0.7}.lock-icon{margin-left:0.25rem;margin-right:-0.5rem;width:0.75rem;color:currentColor;scale:0.8}.step{color:var(--step-text);background-color:var(--step-background)}.step .icon{color:var(--progress-flow-icon-color--inactive, var(--step-text))}.flow-item.selected .step{color:var(--step-text--selected);background-color:var(--step-background--selected)}.flow-item.selected .step .divider:after{background-color:var(--step-background--selected)}.flow-item.selected .step .icon{color:var(--step-text--selected)}.flow-item.passed .step{color:var(--step-text--passed);background-color:var(--step-background--passed)}.flow-item.passed .step .divider:after{background-color:var(--step-background--passed)}.flow-item.passed .step .icon{color:var(--step-text--passed)}.divider:after{border-color:var(--step-divider-color);background-color:var(--step-background)}";

const ProgressFlowItem = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.interact = createEvent(this, "interact", 7);
    this.handleClick = () => {
      this.interact.emit();
    };
    this.item = null;
    this.disabled = false;
    this.readonly = false;
    this.currentStep = false;
  }
  render() {
    var _a;
    if (!this.item) {
      return;
    }
    return [
      h("button", { tabindex: "0", title: this.getToolTipText(), type: "button", class: {
          step: true,
          selected: (_a = this.item) === null || _a === void 0 ? void 0 : _a.selected,
          disabled: this.isDisabled(),
          readonly: this.readonly,
        }, onClick: this.handleClick, disabled: this.isDisabled(), "aria-current": this.currentStep ? 'step' : null }, this.renderIcon(), h("span", { class: "text" }, this.item.text), this.renderDivider(), this.renderLockIcon()),
      this.renderSecondaryText(),
    ];
  }
  isDisabled() {
    var _a;
    return ((_a = this.item) === null || _a === void 0 ? void 0 : _a.disabled) || this.readonly || this.disabled;
  }
  getToolTipText() {
    if (!this.item.secondaryText) {
      return this.item.text;
    }
    return [this.item.text, this.item.secondaryText].join(' · ');
  }
  renderSecondaryText() {
    var _a;
    if (!((_a = this.item) === null || _a === void 0 ? void 0 : _a.secondaryText)) {
      return;
    }
    return h("div", { class: "secondary-text" }, this.item.secondaryText);
  }
  renderIcon() {
    if (!this.item.icon) {
      return;
    }
    const name = getIconName(this.item.icon);
    return h("limel-icon", { name: name, size: "small", class: "icon" });
  }
  renderDivider() {
    if (this.item.isOffProgress) {
      return;
    }
    return h("div", { class: "divider" });
  }
  renderLockIcon() {
    if (!this.isDisabled()) {
      return;
    }
    return h("limel-icon", { name: "lock", class: "lock-icon" });
  }
  get element() { return getElement(this); }
};
ProgressFlowItem.style = progressFlowItemCss;

export { ProgressFlowItem as limel_progress_flow_item };

//# sourceMappingURL=limel-progress-flow-item.entry.js.map