@nopwdio/ui/dist/components/ui-card.js

Nopwd Design System

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { css, html, LitElement } from "lit";
import { customElement } from "lit/decorators.js";
import { chevronDoubleRight } from "../icons/outline.js";
/**
 * `ui-card` is a custom element that displays a card with a title and description.
 * The card includes a link and an icon.
 *
 * @element ui-card
 */
let UiCard = class UiCard extends LitElement {
    /**
     * Called when the element is added to a document.
     * @returns {void}
     */
    connectedCallback() {
        super.connectedCallback();
    }
    /**
     * Renders the content of the element.
     * @returns {import('lit').TemplateResult}
     */
    render() {
        return html `
      <a href=${this.getAttribute("href") || "#"}>
        <h3><slot name="title">No Title</slot> ${chevronDoubleRight}</h3>
        <p><slot name="desc">No desc</slot></p>
      </a>
    `;
    }
};
/**
 * Styles for the `ui-card` element.
 */
UiCard.styles = [
    css `
      :host {
        display: flex;
        flex: 1;

        border-radius: var(--np-border-radius);
        background-color: var(--np-bg-color-muted);
        transition: all var(--np-transition-duration) ease;
      }

      :host(:hover) {
        background-color: var(--np-bg-color-emphasis);
      }

      a {
        display: flex;
        flex: 1;
        flex-direction: column;
        padding: var(--np-padding-emphasis);
        gap: var(--np-gap-emphasis);
        text-decoration: none;
      }

      h3 {
        display: flex;
        justify-content: space-between;
        gap: var(--np-gap);
        color: var(--np-text-color);
        font-size: var(--np-text-size);
        font-weight: var(--np-text-weight-emphasis);
        margin: 0;
        padding: 0;
      }

      :host h3 .icon {
        color: var(--np-text-color-muted);
        transition: all var(--np-transition-duration) ease;
      }
      :host(:hover) h3 .icon {
        color: var(--np-fill-color);
      }

      p {
        font-size: var(--np-text-size-muted);
        font-weight: var(--np-text-weight);
        color: var(--np-text-color-muted);
        margin: 0;
        padding: 0;
        transition: all var(--np-transition-duration) ease;
      }

      :host(:hover) p {
        border-color: var(--np-fill-color-accent);
        color: var(--np-text-color);
      }

      button {
        display: flex;
        align-items: center;
        background: transparent;
        padding: var(--np-padding-muted) var(--np-padding);
        margin: 0;
        border: none;
        border-radius: var(--np-border-radius-emphasis);
        color: var(--np-text-color-muted);
        font-size: var(--np-text-size);
        transition: all var(--np-transition-duration-muted) ease;
      }

      button:hover {
        color: var(--np-text-color);
        transition: all var(--np-transition-duration) ease;
      }

      button[data-selected] {
        background-color: var(--np-bg-color-emphasis);
        box-shadow: var(--np-shadow-muted);
        color: var(--np-text-color);
      }

      .icon {
        width: 1em;
        height: 1em;
      }
    `,
];
UiCard = __decorate([
    customElement("ui-card")
], UiCard);
export { UiCard };
//# sourceMappingURL=ui-card.js.map