v4web-components/dist/components/lab-ds-quantify2.js

Stencil Component Starter

import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$1 } from './lab-ds-icon-not-selectable2.js';

const labDsQuantifyCss = ".v4-quantify{display:flex;align-items:center;gap:var(--lab-ds-semantic-selectable-space-gap-s)}.v4-quantify button{padding:var(--lab-ds-semantic-selectable-space-padding-sm);cursor:pointer;color:var(--lab-ds-semantic-color-fg-default);outline:none;background-color:var(--lab-ds-semantic-selectable-color-bg-default);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border:var(--lab-ds-semantic-selectable-border-width-s) solid var(--lab-ds-semantic-selectable-color-border-default)}.v4-quantify-counter{display:flex;text-align:center;justify-content:center;padding-top:var(--lab-ds-semantic-selectable-space-padding-sm);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-sm);padding-left:var(--lab-ds-semantic-selectable-space-padding-s);padding-right:var(--lab-ds-semantic-selectable-space-padding-s);gap:var(--lab-ds-semantic-selectable-space-gap-xs);font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular);color:var(--lab-ds-semantic-color-fg-default);min-width:5.313rem;background-color:var(--lab-ds-semantic-selectable-color-bg-default);border-radius:var(--lab-ds-semantic-selectable-border-radius-xs);border:var(--lab-ds-semantic-selectable-border-width-s) solid var(--lab-ds-semantic-selectable-color-border-default)}.v4-quantify-option-divides{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-quantify-option-max-item{color:var(--lab-ds-semantic-color-fg-disabled)}.v4-quantify button:hover{background-color:var(--lab-ds-semantic-selectable-color-bg-hover);border-color:var(--lab-ds-semantic-selectable-color-border-default)}.v4-quantify button:active{background-color:var(--lab-ds-semantic-selectable-color-bg-default);border-color:var(--lab-ds-semantic-selectable-color-primary-press);color:var(--lab-ds-semantic-selectable-color-primary-press);outline:none}.v4-quantify button:focus{outline-style:solid;outline-offset:var(--lab-ds-semantic-selectable-space-padding-xxs);outline-color:var(--lab-ds-semantic-selectable-color-primary-focus);outline-width:var(--lab-ds-semantic-selectable-border-width-s);background-color:var(--lab-ds-semantic-selectable-color-bg-default)}.v4-quantify button:disabled{background-color:var(--lab-ds-semantic-selectable-color-bg-disabled);border-color:var(--lab-ds-semantic-selectable-color-border-disabled);color:var(--lab-ds-semantic-color-fg-disabled);cursor:not-allowed}";

const LabDsQuantify = /*@__PURE__*/ proxyCustomElement(class LabDsQuantify extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.handleCounterValue = createEvent(this, "handleCounterValue", 7);
    this.maxValue = undefined;
    this.value = 0;
  }
  handleIncreaseValueEmit() {
    this.handleCounterValue.emit(this.value + 1);
  }
  handleDecreaseValueEmit() {
    this.handleCounterValue.emit(this.value - 1);
  }
  render() {
    return (h("div", { class: "v4-quantify" }, h("button", { disabled: this.value < 1, onClick: () => this.handleDecreaseValueEmit() }, h("lab-ds-icon-not-selectable", { icon: "remove", size: "small" })), h("div", { class: "v4-quantify-counter" }, h("span", { class: "v4-quantify-option-counter" }, this.value), this.maxValue && h("span", { class: "v4-quantify-option-divides" }, "/"), this.maxValue && h("span", { class: "v4-quantify-option-max-item" }, this.maxValue)), h("button", { disabled: this.value >= this.maxValue, onClick: () => this.handleIncreaseValueEmit() }, h("lab-ds-icon-not-selectable", { icon: "add", size: "small" }))));
  }
  static get style() { return labDsQuantifyCss; }
}, [1, "lab-ds-quantify", {
    "maxValue": [2, "max-value"],
    "value": [2]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["lab-ds-quantify", "lab-ds-icon-not-selectable"];
  components.forEach(tagName => { switch (tagName) {
    case "lab-ds-quantify":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, LabDsQuantify);
      }
      break;
    case "lab-ds-icon-not-selectable":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}

export { LabDsQuantify as L, defineCustomElement as d };

//# sourceMappingURL=lab-ds-quantify2.js.map