dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
107 lines (105 loc) • 3.51 kB
JavaScript
import { clsx as i } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { nothing as g } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as r } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { ifDefined as f } from "../../node_modules/lit-html/directives/if-defined.js";
import { unsafeStatic as m, html as n } from "../../node_modules/lit-html/static.js";
import { DdsElement as u } from "../../internal/dds-hu-element.js";
import { SizedMixin as v } from "../../internal/mixin/sizedMixin.js";
import "../../localization/localization.js";
import y from "./_styles/card.scss.js";
import { t as b } from "../../node_modules/i18next/dist/esm/i18next.js";
import { unsafeCSS as _ } from "../../node_modules/@lit/reactive-element/css-tag.js";
var $ = Object.defineProperty, e = (c, o, a, h) => {
for (var s = void 0, p = c.length - 1, l; p >= 0; p--)
(l = c[p]) && (s = l(o, a, s) || s);
return s && $(o, a, s), s;
};
const d = class d extends v(u) {
constructor() {
super(...arguments), this.interactive = !1, this.renderAs = "a", this.disabled = !1, this.noBorder = !1, this.noPadding = !1, this.target = "_self", this.rel = "noreferrer noopener";
}
focus(o) {
var a, h;
this.interactive && ((h = (a = this.shadowRoot) == null ? void 0 : a.querySelector(".card")) == null || h.focus(o));
}
render() {
var o;
return n`
${this.interactive ? n`<${m(this.renderAs)}
part="base"
class=${i("card", {
"card--interactive": !0,
"card--disabled": this.disabled,
"card--no-border": this.noBorder,
"card--no-padding": this.noPadding,
[`card--${this.effectiveSize}`]: !0
})}
aria-label=${f(this.ariaLabel) || ""}
target=${this.target}
href=${f(this.href)}
rel=${this.target}>
<div
part="high-contrast"
class=${i({
card__highcontrast: !0,
"card__highcontrast--hover": !0,
"card__highcontrast--noborder": !this.noBorder
})}></div>
<slot></slot>
${this.target === "_blank" ? n`<span class="sr-only">
${(o = this.targetBlankText) != null ? o : b("opensInNewTab")}</span
>` : g}
</${m(this.renderAs)}>` : n`<div
part="base"
class="${i("card", {
[`card--${this.effectiveSize}`]: !0,
"card--disabled": this.disabled,
"card--no-border": this.noBorder
})}">
<div
part="high-contrast"
class=${i({
card__highcontrast: !0,
"card__highcontrast--hover": !0,
"card__highcontrast--noborder": !this.noBorder
})}></div>
<slot></slot>
</div>`}
`;
}
};
d.tagName = "dap-ds-card", d.styles = _(y);
let t = d;
e([
r({ type: Boolean })
], t.prototype, "interactive");
e([
r({ type: String })
], t.prototype, "renderAs");
e([
r({ type: Boolean, reflect: !0 })
], t.prototype, "disabled");
e([
r({ type: Boolean })
], t.prototype, "noBorder");
e([
r({ type: Boolean })
], t.prototype, "noPadding");
e([
r({ type: String })
], t.prototype, "targetBlankText");
e([
r()
], t.prototype, "target");
e([
r()
], t.prototype, "href");
e([
r()
], t.prototype, "rel");
export {
t as default
};
//# sourceMappingURL=card.component.js.map