dap-design-system/dist/internal/mixin/labelableMixin.js

Official design system for the DÁP (dap.gov.hu)

import { clsx as d } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { html as r } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as e } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { ifDefined as b } from "../../node_modules/lit-html/directives/if-defined.js";
import "../../localization/localization.js";
import { t as h } from "../../node_modules/i18next/dist/esm/i18next.js";
var c = Object.defineProperty, o = (l, t, p, a) => {
  for (var i = void 0, s = l.length - 1, n; s >= 0; s--)
    (n = l[s]) && (i = n(t, p, i) || i);
  return i && c(t, p, i), i;
};
const g = (l) => {
  class t extends l {
    constructor() {
      super(...arguments), this.hideLabel = !1, this.tooltipPlacement = "bottom", this.size = "sm", this.optional = !1, this.optionalLabel = h("label.optional"), this.subtle = !1, this.required = !1, this.requiredLabel = "*", this.disabled = !1, this.tooltipAriaLabel = h("label.tooltip");
    }
    renderLabel(a, i) {
      return r` <div class="label-container">
      ${this.label && r`<dap-ds-form-label
          part="label"
          id=${a != null ? a : "label"}
          exportparts="base: label-base, required: label-required, optional: label-optional"
          .size=${this.size}
          .required=${this.required}
          .requiredLabel=${this.requiredLabel}
          .disabled=${this.disabled}
          .subtle=${this.subtle}
          .optional=${this.optional}
          .optionalLabel=${this.optionalLabel}
          .hideLabel=${this.hideLabel}
          class=${d("label")}
          .noMargin=${!!this.description}
          for="input"
          label=${b(this.label)}></dap-ds-form-label>`}
      </dap-ds-form-label>
      ${this.tooltip && r` <dap-ds-tooltip
          part="tooltip"
          content=${this.tooltip}
          mode="toggle"
          placement=${this.tooltipPlacement}>
          <dap-ds-icon-button
            slot="trigger"
            size=${this.size}
            iconSize=${this.size === "xs" ? "16" : "22"}
            clean
            aria-label=${this.tooltipAriaLabel}>
            <dap-ds-icon
              name="information-line"
              aria-hidden="true"
              class="info-button"></dap-ds-icon>
          </dap-ds-icon-button>
        </dap-ds-tooltip>`}
    </div>
    ${this.description && r`
        <dap-ds-typography
          part="description"
          variant="description"
          class=${d("input-description")}
          size=${b(this.size)}
          id="description">
          ${this.description}
        </dap-ds-typography>
      `}
      ${i}`;
    }
  }
  return o([
    e()
  ], t.prototype, "label"), o([
    e({ type: Boolean, reflect: !0 })
  ], t.prototype, "hideLabel"), o([
    e()
  ], t.prototype, "description"), o([
    e()
  ], t.prototype, "tooltip"), o([
    e()
  ], t.prototype, "tooltipPlacement"), o([
    e()
  ], t.prototype, "size"), o([
    e({ type: Boolean, reflect: !0 })
  ], t.prototype, "optional"), o([
    e()
  ], t.prototype, "optionalLabel"), o([
    e({ type: Boolean, reflect: !0 })
  ], t.prototype, "subtle"), o([
    e({ type: Boolean, reflect: !0 })
  ], t.prototype, "required"), o([
    e()
  ], t.prototype, "requiredLabel"), o([
    e({ type: Boolean, reflect: !0 })
  ], t.prototype, "disabled"), o([
    e({ type: String })
  ], t.prototype, "tooltipAriaLabel"), t;
};
export {
  g as LabelableMixin
};
//# sourceMappingURL=labelableMixin.js.map