maxzilla-ui-core
Version:
Core web components library for Maxzilla UI built with Lit Element
270 lines (241 loc) • 7.2 kB
JavaScript
import { css as c, LitElement as p, html as v } from "lit";
import { property as e, customElement as m } from "lit/decorators.js";
import { classMap as h } from "lit/directives/class-map.js";
import { b as g } from "./base-CQAGJ0rS.js";
import { a as u } from "./animations-DVdvSNId.js";
var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, r = (o, i, n, d) => {
for (var t = d > 1 ? void 0 : d ? b(i, n) : i, s = o.length - 1, l; s >= 0; s--)
(l = o[s]) && (t = (d ? l(i, n, t) : l(t)) || t);
return d && t && f(i, n, t), t;
};
let a = class extends p {
constructor() {
super(...arguments), this.elevation = "sm", this.variant = "default", this.interactive = !1, this.loading = !1, this.disabled = !1, this.compact = !1, this.fullHeight = !1, this.handleClick = (o) => {
this.disabled || this.loading || !this.interactive || this.dispatchEvent(
new CustomEvent("mz-card-click", {
detail: { originalEvent: o },
bubbles: !0,
composed: !0
})
);
};
}
render() {
const o = {
card: !0,
[`card--${this.variant}`]: this.variant !== "default",
"card--interactive": this.interactive
};
return v`
<div
class=${h(o)}
=${this.handleClick}
>
<slot name="image"></slot>
<slot name="header"></slot>
<div class="card-content">
<slot></slot>
</div>
<slot name="actions"></slot>
<slot name="footer"></slot>
</div>
`;
}
};
a.styles = [
g,
u,
c`
:host {
display: block;
position: relative;
--card-background: var(--mz-color-neutral-0);
--card-border: 1px solid var(--mz-color-neutral-200);
--card-border-radius: var(--mz-radius-lg);
--card-padding: var(--mz-space-6);
--card-shadow: var(--mz-shadow-sm);
--card-transition: all var(--mz-transition-normal);
}
.card {
width: 100%;
background: var(--card-background);
border: var(--card-border);
border-radius: var(--card-border-radius);
padding: var(--card-padding);
box-shadow: var(--card-shadow);
transition: var(--card-transition);
position: relative;
overflow: hidden;
}
/* Elevation variants */
:host([elevation='none']) {
--card-shadow: none;
}
:host([elevation='sm']) {
--card-shadow: var(--mz-shadow-sm);
}
:host([elevation='md']) {
--card-shadow: var(--mz-shadow-md);
}
:host([elevation='lg']) {
--card-shadow: var(--mz-shadow-lg);
}
:host([elevation='xl']) {
--card-shadow: var(--mz-shadow-xl);
}
/* Card variants */
.card--outlined {
--card-border: 1px solid var(--mz-color-neutral-300);
--card-shadow: none;
}
.card--elevated {
--card-border: none;
--card-shadow: var(--mz-shadow-lg);
}
.card--interactive {
cursor: pointer;
transition: all var(--mz-transition-normal);
}
.card--interactive:hover {
transform: translateY(-2px);
box-shadow: var(--mz-shadow-xl);
border-color: var(--mz-color-primary-300);
}
.card--interactive::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(6, 182, 212, 0.1) 0%,
transparent 50%,
rgba(34, 197, 94, 0.1) 100%
);
opacity: 0;
transition: opacity var(--mz-transition-normal);
pointer-events: none;
}
.card--interactive:hover::before {
opacity: 1;
}
.card--interactive:active {
transform: translateY(-1px);
}
/* Hover glow effect */
.card--interactive:hover {
box-shadow: var(--mz-shadow-xl), 0 0 30px rgba(6, 182, 212, 0.15);
}
/* Header slot */
::slotted([slot='header']) {
margin: calc(-1 * var(--card-padding)) calc(-1 * var(--card-padding)) var(--mz-space-4) calc(-1 * var(--card-padding));
padding: var(--mz-space-4) var(--card-padding);
border-bottom: 1px solid var(--mz-color-neutral-200);
font-weight: 600;
font-size: var(--mz-text-lg);
}
/* Footer slot */
::slotted([slot='footer']) {
margin: var(--mz-space-4) calc(-1 * var(--card-padding)) calc(-1 * var(--card-padding)) calc(-1 * var(--card-padding));
padding: var(--mz-space-4) var(--card-padding);
border-top: 1px solid var(--mz-color-neutral-200);
background: var(--mz-color-neutral-50);
}
/* Image slot */
::slotted([slot='image']) {
margin: calc(-1 * var(--card-padding)) calc(-1 * var(--card-padding)) var(--mz-space-4) calc(-1 * var(--card-padding));
width: calc(100% + 2 * var(--card-padding));
border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
}
/* Actions slot */
::slotted([slot='actions']) {
margin-top: var(--mz-space-4);
display: flex;
gap: var(--mz-space-2);
align-items: center;
}
/* Content spacing */
.card-content {
display: block;
}
.card-content::slotted(*:first-child) {
margin-top: 0;
}
.card-content::slotted(*:last-child) {
margin-bottom: 0;
}
/* Loading state */
:host([loading]) .card {
position: relative;
overflow: hidden;
}
:host([loading]) .card::before {
content: '';
position: absolute;
top: 0;
left: -200px;
width: 200px;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent
);
animation: mz-shimmer 2s infinite linear;
}
/* Disabled state */
:host([disabled]) {
opacity: 0.5;
pointer-events: none;
}
/* Compact padding */
:host([compact]) {
--card-padding: var(--mz-space-4);
}
/* Full height */
:host([full-height]) {
height: 100%;
}
:host([full-height]) .card {
height: 100%;
display: flex;
flex-direction: column;
}
:host([full-height]) .card-content {
flex: 1;
display: flex;
flex-direction: column;
}
`
];
r([
e({ type: String, reflect: !0 })
], a.prototype, "elevation", 2);
r([
e({ type: String, reflect: !0 })
], a.prototype, "variant", 2);
r([
e({ type: Boolean, reflect: !0 })
], a.prototype, "interactive", 2);
r([
e({ type: Boolean, reflect: !0 })
], a.prototype, "loading", 2);
r([
e({ type: Boolean, reflect: !0 })
], a.prototype, "disabled", 2);
r([
e({ type: Boolean, reflect: !0 })
], a.prototype, "compact", 2);
r([
e({ type: Boolean, reflect: !0, attribute: "full-height" })
], a.prototype, "fullHeight", 2);
a = r([
m("mz-card")
], a);
export {
a as M
};
//# sourceMappingURL=mz-card-l6yEgd2K.js.map