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

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

import { clsx as f } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { html as n } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as i } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { ifDefined as l } from "../../node_modules/lit-html/directives/if-defined.js";
var b = Object.defineProperty, a = (r, e, o, s) => {
  for (var t = void 0, c = r.length - 1, d; c >= 0; c--)
    (d = r[c]) && (t = d(e, o, t) || t);
  return t && b(e, o, t), t;
};
function v(r) {
  class e extends r {
    constructor() {
      super(...arguments), this.feedbackSize = "sm", this.feedbackType = "positive", this.feedbackSubtle = !1, this.feedbackNoMargin = !1;
    }
    renderFeedback() {
      return n`<div
        part="base"
        class=${f(
        "feedback",
        `feedback--${this.feedbackType}`,
        `feedback--${this.feedbackSize}`,
        {
          "feedback--subtle": this.feedbackSubtle,
          "feedback--no-margin": this.feedbackNoMargin
        }
      )}>
        <slot name="icon" class="feedback__icon">
          <dap-ds-icon
            part="icon"
            aria-hidden="true"
            size="${l(this.feedbackSize)}"
            name="${this._iconType(this.feedbackType)}">
          </dap-ds-icon>
        </slot>
        <div part="text" class="feedback__text" role="alert" aria-live="polite">
          <slot></slot>
        </div>
      </div> `;
    }
    _iconType(s) {
      switch (s) {
        case "positive":
          return `checkbox-circle-${this.feedbackSubtle ? "line" : "fill"}`;
        case "negative":
          return `error-warning-${this.feedbackSubtle ? "line" : "fill"}`;
        case "warning":
          return `alert-${this.feedbackSubtle ? "line" : "fill"}`;
        default:
          return `information-${this.feedbackSubtle ? "line" : "fill"}`;
      }
    }
  }
  return a([
    i()
  ], e.prototype, "feedbackSize"), a([
    i()
  ], e.prototype, "feedback"), a([
    i()
  ], e.prototype, "feedbackType"), a([
    i({ type: Boolean, reflect: !0 })
  ], e.prototype, "feedbackSubtle"), a([
    i({ type: Boolean })
  ], e.prototype, "feedbackNoMargin"), a([
    i()
  ], e.prototype, "feedbackId"), e;
}
export {
  v as FeedbackMixin
};
//# sourceMappingURL=feedbackMixin.js.map