dap-design-system/dist/components/form/input-group/input-group.component.js

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

import { clsx as c } from "../../../node_modules/clsx/dist/clsx.js";
import "../../../node_modules/@lit/reactive-element/reactive-element.js";
import "../../../node_modules/lit-html/lit-html.js";
import "../../../node_modules/lit-element/lit-element.js";
import { queryAssignedElements as b } from "../../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
import { ifDefined as o } from "../../../node_modules/lit-html/directives/if-defined.js";
import { html as s } from "../../../node_modules/lit-html/static.js";
import { GenericFormElement as h } from "../../../internal/mixin/genericFormElement.js";
import f from "../../feedback/feedback.component.js";
import m from "../../icon/icon.component.js";
import u from "../../icon-button/icon-button.component.js";
import $ from "../../tooltip/tooltip.component.js";
import g from "../../typography/typography.component.js";
import k from "../form-label/form-label.component.js";
import y from "./input-group.scss.js";
import { unsafeCSS as _ } from "../../../node_modules/@lit/reactive-element/css-tag.js";
var z = Object.defineProperty, C = (p, t, e, a) => {
  for (var i = void 0, l = p.length - 1, n; l >= 0; l--)
    (n = p[l]) && (i = n(t, e, i) || i);
  return i && z(t, e, i), i;
};
const d = class d extends h {
  handleLabelClick() {
    var e;
    const t = (e = this.allInputs.find((a) => a.checked)) != null ? e : this.allInputs[0];
    t == null || t.focus();
  }
  getItems() {
    return [
      ...this.querySelectorAll(
        "dap-ds-switch, dap-ds-checkbox"
      )
    ];
  }
  attributeChangedCallback(t, e, a) {
    super.attributeChangedCallback(t, e, a), (t === "disabled" || t === "invalid") && this.getItems().forEach((i) => {
      i[t] = a !== null;
    });
  }
  render() {
    return s`
      <fieldset
        id="input"
        class="input-group"
        part="base"
        .disabled=${this.disabled}
        aria-labelledby="label"
        aria-describedby=${`description ${this.feedbackId}`}
        aria-errormessage=${o(this.feedbackId)}>
        ${(this.label || this.tooltip) && s`<legend class="input-group__legend">
          <div class="label-container">
            ${this.label && s`<dap-ds-form-label
              part="label"
              id="label"
              .size=${this.size}
              .required=${this.required}
              .requiredLabel=${this.requiredLabel}
              .optional=${this.optional}
              .optionalLabel=${this.optionalLabel}
              .disabled=${this.disabled}
              .subtle=${this.subtle}
              .noMargin=${!!this.description}
              .hideLabel=${this.hideLabel}
              label=${o(this.label)}
              @click=${this.handleLabelClick}>
            </dap-ds-form-label>`}
            ${this.tooltip && s` <dap-ds-tooltip
              part="tooltip"
              content=${this.tooltip}
              mode="toggle"
              placement=${this.tooltipPlacement}>
              <dap-ds-icon-button
                clean
                class="input-group__toggle-button"
                slot="trigger"
                aria-label=${this.tooltipAriaLabel}
                size=${this.size}
                iconSize=${this.size === "xs" ? "16" : "22"}>
                <dap-ds-icon
                  name="information-line"
                  class="info-button"></dap-ds-icon>
              </dap-ds-icon-button>
            </dap-ds-tooltip>`}
          </div>
          ${this.description && s`
            <dap-ds-typography
              part="description"
              variant="description"
              class=${c("input-description")}
              size=${o(this.size)}
              id="description">
              ${this.description}
            </dap-ds-typography>
          `}
        </legend>`}
        <div part="container" class="input-group__items">
          <slot></slot>
        </div>
        ${this.feedback && this._renderFeedback()}
      </fieldset>
    `;
  }
  _handleSlotChange(t) {
    (t == null ? void 0 : t.target).setAttribute("slot", "icon");
  }
  _renderFeedback() {
    return s`
      <dap-ds-feedback
        part="feedback"
        feedbackType=${o(this.feedbackType)}
        feedbackSize="${o(this.size)}"
        id="feedback"
        .subtle=${this.subtle}>
        <slot
          name="feedback-icon"
          @slotchange="${this._handleSlotChange}"></slot>
        ${this.feedback}
      </dap-ds-feedback>
    `;
  }
};
d.tagName = "dap-ds-input-group", d.dependencies = {
  "dap-ds-form-label": k,
  "dap-ds-tooltip": $,
  "dap-ds-icon-button": u,
  "dap-ds-icon": m,
  "dap-ds-typography": g,
  "dap-ds-feedback": f
}, d.styles = _(y);
let r = d;
C([
  b()
], r.prototype, "allInputs");
export {
  r as default
};
//# sourceMappingURL=input-group.component.js.map