@nopwdio/ui/dist/components/ui-cards.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";
/**
 * `ui-cards` is a custom element that arranges its children in a column layout by default.
 * When the container's width is at least 600px, it switches to a row layout.
 *
 * @element ui-cards
 */
let UiCards = class UiCards 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 `<slot></slot>`;
    }
};
/**
 * Styles for the `ui-cards` element.
 * @type {import('lit').CSSResult[]}
 */
UiCards.styles = [
    css `
      :host {
        display: flex;
        flex-flow: column;
        gap: var(--np-gap);
      }

      @container (min-width: 600px) {
        :host {
          flex-flow: row;
        }
      }
    `,
];
UiCards = __decorate([
    customElement("ui-cards")
], UiCards);
export { UiCards };
//# sourceMappingURL=ui-cards.js.map