@krumio/trailhand-ui 1.5.0 → 1.7.0

package/dist/components/th-card/th-card.d.ts

@@ -1,78 +0,0 @@
-import { LitElement, TemplateResult } from 'lit';
-/**
- * Card variant types for different visual styles
- */
-export type CardVariant = 'default' | 'info' | 'outlined';
-/**
- * A flexible card component for displaying content in a contained box.
- * Supports multiple variants, dismissible mode, and various slots for content.
- *
- * @fires card-dismiss - Fired when the dismiss button is clicked (if dismissible)
- *
- * @slot icon - Slot for an icon in the header
- * @slot title - Slot for the card title
- * @slot subtitle - Slot for a subtitle (info variant)
- * @slot - Default slot for main body content
- * @slot action - Slot for action buttons
- * @slot footer - Slot for footer content (lists, links, etc.)
- */
-export declare class ThCard extends LitElement {
-    /**
-     * Visual variant/style of the card
-     */
-    variant: CardVariant;
-    /**
-     * Whether the card can be dismissed/closed
-     */
-    dismissible: boolean;
-    /**
-     * Unique identifier for the card (used in dismiss events)
-     */
-    cardId: string;
-    /**
-     * Card title (alternative to using title slot)
-     */
-    cardTitle: string;
-    /**
-     * Card subtitle (alternative to using subtitle slot)
-     */
-    subtitle: string;
-    /**
-     * Card description/body text (alternative to using default slot)
-     */
-    description: string;
-    /**
-     * Icon class name (e.g., 'icon-namespace') - alternative to icon slot
-     */
-    iconClass: string;
-    /**
-     * Icon URL (for image icons) - alternative to icon slot
-     */
-    iconSrc: string;
-    /**
-     * Whether the card is in a loading state
-     */
-    loading: boolean;
-    static styles: import("lit").CSSResult;
-    /**
-     * Handle dismiss button click
-     */
-    private _handleDismiss;
-    /**
-     * Render the dismiss button SVG icon
-     */
-    private _renderDismissIcon;
-    /**
-     * Render the icon based on iconClass, iconSrc, or slot
-     */
-    private _renderIcon;
-    /**
-     * Check if icon slot or props have content
-     */
-    private _hasIcon;
-    /**
-     * Render the component
-     */
-    render(): TemplateResult;
-}
-//# sourceMappingURL=th-card.d.ts.map

package/dist/components/th-card/th-card.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"th-card.d.ts","sourceRoot":"","sources":["../../../src/components/th-card/th-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAW,MAAM,KAAK,CAAC;AAGrE;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,CAAC;AAS1D;;;;;;;;;;;;GAYG;AACH,qBAAa,MAAO,SAAQ,UAAU;IACpC;;OAEG;IAEH,OAAO,EAAE,WAAW,CAAa;IAEjC;;OAEG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,MAAM,SAAM;IAEZ;;OAEG;IAEH,SAAS,SAAM;IAEf;;OAEG;IAEH,QAAQ,SAAM;IAEd;;OAEG;IAEH,WAAW,SAAM;IAEjB;;OAEG;IAEH,SAAS,SAAM;IAEf;;OAEG;IAEH,OAAO,SAAM;IAEb;;OAEG;IAEH,OAAO,UAAS;IAEhB,OAAgB,MAAM,0BAiNpB;IAEF;;OAEG;IACH,OAAO,CAAC,cAAc;IAWtB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAiB1B;;OAEG;IACH,OAAO,CAAC,WAAW;IAwBnB;;OAEG;IACH,OAAO,CAAC,QAAQ;IAIhB;;OAEG;IACM,MAAM,IAAI,cAAc;CAsFlC"}

package/dist/components/th-card/th-card.js

@@ -1,449 +0,0 @@
-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 { LitElement, html, css, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
-/**
- * A flexible card component for displaying content in a contained box.
- * Supports multiple variants, dismissible mode, and various slots for content.
- *
- * @fires card-dismiss - Fired when the dismiss button is clicked (if dismissible)
- *
- * @slot icon - Slot for an icon in the header
- * @slot title - Slot for the card title
- * @slot subtitle - Slot for a subtitle (info variant)
- * @slot - Default slot for main body content
- * @slot action - Slot for action buttons
- * @slot footer - Slot for footer content (lists, links, etc.)
- */
-export class ThCard extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Visual variant/style of the card
-         */
-        this.variant = 'default';
-        /**
-         * Whether the card can be dismissed/closed
-         */
-        this.dismissible = false;
-        /**
-         * Unique identifier for the card (used in dismiss events)
-         */
-        this.cardId = '';
-        /**
-         * Card title (alternative to using title slot)
-         */
-        this.cardTitle = '';
-        /**
-         * Card subtitle (alternative to using subtitle slot)
-         */
-        this.subtitle = '';
-        /**
-         * Card description/body text (alternative to using default slot)
-         */
-        this.description = '';
-        /**
-         * Icon class name (e.g., 'icon-namespace') - alternative to icon slot
-         */
-        this.iconClass = '';
-        /**
-         * Icon URL (for image icons) - alternative to icon slot
-         */
-        this.iconSrc = '';
-        /**
-         * Whether the card is in a loading state
-         */
-        this.loading = false;
-    }
-    /**
-     * Handle dismiss button click
-     */
-    _handleDismiss(e) {
-        e.stopPropagation();
-        const event = new CustomEvent('card-dismiss', {
-            bubbles: true,
-            composed: true,
-            detail: { id: this.cardId },
-        });
-        this.dispatchEvent(event);
-    }
-    /**
-     * Render the dismiss button SVG icon
-     */
-    _renderDismissIcon() {
-        return html `
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 20 20"
-        fill="currentColor"
-        aria-hidden="true"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-          clip-rule="evenodd"
-        />
-      </svg>
-    `;
-    }
-    /**
-     * Render the icon based on iconClass, iconSrc, or slot
-     */
-    _renderIcon() {
-        if (this.iconSrc) {
-            return html `
-        <div class="card__icon" part="icon">
-          <img src=${this.iconSrc} alt="" />
-        </div>
-      `;
-        }
-        if (this.iconClass) {
-            return html `
-        <div class="card__icon" part="icon">
-          <i class=${this.iconClass}></i>
-        </div>
-      `;
-        }
-        return html `
-      <div class="card__icon" part="icon">
-        <slot name="icon"></slot>
-      </div>
-    `;
-    }
-    /**
-     * Check if icon slot or props have content
-     */
-    _hasIcon() {
-        return !!(this.iconSrc || this.iconClass || this.querySelector('[slot="icon"]'));
-    }
-    /**
-     * Render the component
-     */
-    render() {
-        const classes = [
-            'card',
-            `card--${this.variant}`,
-            this.loading ? 'card--loading' : '',
-        ].filter(Boolean).join(' ');
-        if (this.loading) {
-            return html `
-        <div class=${classes} part="card">
-          <div class="card__spinner"></div>
-        </div>
-      `;
-        }
-        // Info variant - horizontal layout
-        if (this.variant === 'info') {
-            return html `
-        <div class=${classes} part="card">
-          ${this._hasIcon() ? this._renderIcon() : nothing}
-          <div class="card__header">
-            <div class="card__title-group">
-              <h3 class="card__title" part="title">
-                ${this.cardTitle || html `<slot name="title"></slot>`}
-              </h3>
-              ${this.subtitle
-                ? html `<p class="card__subtitle" part="subtitle">${this.subtitle}</p>`
-                : html `<slot name="subtitle"></slot>`}
-            </div>
-          </div>
-          ${this.dismissible
-                ? html `
-                <button
-                  class="card__dismiss"
-                  part="dismiss"
-                  type="button"
-                  aria-label="Dismiss card"
-                  @click=${this._handleDismiss}
-                >
-                  ${this._renderDismissIcon()}
-                </button>
-              `
-                : nothing}
-        </div>
-      `;
-        }
-        // Default/outlined variant - vertical layout
-        return html `
-      <div class=${classes} part="card">
-        <div class="card__header">
-          ${this._hasIcon() ? this._renderIcon() : nothing}
-          <div class="card__title-group">
-            <h3 class="card__title" part="title">
-              ${this.cardTitle || html `<slot name="title"></slot>`}
-            </h3>
-          </div>
-          ${this.dismissible
-            ? html `
-                <button
-                  class="card__dismiss"
-                  part="dismiss"
-                  type="button"
-                  aria-label="Dismiss card"
-                  @click=${this._handleDismiss}
-                >
-                  ${this._renderDismissIcon()}
-                </button>
-              `
-            : nothing}
-        </div>
-
-        <div class="card__body" part="body">
-          ${this.description || html `<slot></slot>`}
-        </div>
-
-        <div class="card__action" part="action">
-          <slot name="action"></slot>
-        </div>
-
-        <div class="card__footer" part="footer">
-          <slot name="footer"></slot>
-        </div>
-      </div>
-    `;
-    }
-}
-ThCard.styles = css `
-    :host {
-      display: block;
-    }
-
-    .card {
-      display: flex;
-      flex-direction: column;
-      background: var(--th-card-bg, #ffffff);
-      border-radius: var(--th-card-radius, 8px);
-      transition: box-shadow 0.2s ease;
-      height: 100%;
-    }
-
-    /* Variant styles */
-    .card--default {
-      border: 1px solid var(--th-card-border, #e5e7eb);
-      padding: var(--th-card-padding, 20px);
-    }
-
-    .card--outlined {
-      border: 1px solid var(--th-card-border, #e5e7eb);
-      padding: var(--th-card-padding, 20px);
-    }
-
-    .card--info {
-      border: 1px solid var(--th-card-border, #e5e7eb);
-      padding: var(--th-card-padding, 16px 20px);
-      flex-direction: row;
-      align-items: center;
-      gap: 12px;
-    }
-
-    .card:hover {
-      box-shadow: var(--th-card-hover-shadow, 0 2px 8px rgba(0, 0, 0, 0.08));
-    }
-
-    /* Header section */
-    .card__header {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      margin-bottom: 12px;
-    }
-
-    .card--info .card__header {
-      margin-bottom: 0;
-      flex: 1;
-    }
-
-    /* Icon styles */
-    .card__icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-    }
-
-    .card__icon img {
-      width: 40px;
-      height: 40px;
-      object-fit: contain;
-    }
-
-    .card__icon i {
-      font-size: 24px;
-      color: var(--th-card-icon-color, #3b82f6);
-    }
-
-    .card--info .card__icon img {
-      width: 48px;
-      height: 48px;
-    }
-
-    /* Title styles */
-    .card__title-group {
-      flex: 1;
-      min-width: 0;
-    }
-
-    .card__title {
-      margin: 0;
-      font-size: 18px;
-      font-weight: 600;
-      color: var(--th-card-title-color, #111827);
-      line-height: 1.3;
-    }
-
-    .card__title a {
-      color: inherit;
-      text-decoration: none;
-    }
-
-    .card__title a:hover {
-      color: var(--th-primary, #3b82f6);
-    }
-
-    .card--info .card__title {
-      font-size: 16px;
-      color: var(--th-primary, #3b82f6);
-    }
-
-    .card__subtitle {
-      margin: 4px 0 0 0;
-      font-size: 14px;
-      color: var(--th-card-subtitle-color, #6b7280);
-      line-height: 1.4;
-    }
-
-    /* Body content */
-    .card__body {
-      flex: 1;
-      font-size: 14px;
-      line-height: 1.6;
-      color: var(--th-card-text-color, #4b5563);
-      margin-bottom: 16px;
-    }
-
-    .card--info .card__body {
-      display: none;
-    }
-
-    /* Action section */
-    .card__action {
-      margin-bottom: 16px;
-    }
-
-    .card__action ::slotted(a),
-    .card__action ::slotted(button) {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      padding: 10px 20px;
-      font-size: 14px;
-      font-weight: 500;
-      border-radius: 6px;
-      text-decoration: none;
-      cursor: pointer;
-      transition: all 0.15s ease;
-    }
-
-    /* Footer section */
-    .card__footer {
-      border-top: 1px solid var(--th-card-border, #e5e7eb);
-      padding-top: 16px;
-      margin-top: auto;
-    }
-
-    .card__footer ::slotted(h3),
-    .card__footer ::slotted(h4) {
-      margin: 0 0 12px 0;
-      font-size: 14px;
-      font-weight: 600;
-      color: var(--th-card-title-color, #111827);
-    }
-
-    /* Dismiss button */
-    .card__dismiss {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: none;
-      border: none;
-      padding: 4px;
-      cursor: pointer;
-      color: var(--th-card-dismiss-color, #9ca3af);
-      opacity: 0.7;
-      transition: opacity 0.15s ease, color 0.15s ease;
-      flex-shrink: 0;
-    }
-
-    .card__dismiss:hover {
-      opacity: 1;
-      color: var(--th-card-dismiss-hover-color, #6b7280);
-    }
-
-    .card__dismiss svg {
-      width: 20px;
-      height: 20px;
-    }
-
-    /* Loading state */
-    .card--loading {
-      min-height: 200px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .card__spinner {
-      width: 32px;
-      height: 32px;
-      border: 3px solid var(--th-card-border, #e5e7eb);
-      border-top-color: var(--th-primary, #3b82f6);
-      border-radius: 50%;
-      animation: spin 0.8s linear infinite;
-    }
-
-    @keyframes spin {
-      to {
-        transform: rotate(360deg);
-      }
-    }
-
-    /* Empty slots handling */
-    .card__action:empty,
-    .card__footer:empty {
-      display: none;
-    }
-  `;
-__decorate([
-    property({ type: String })
-], ThCard.prototype, "variant", void 0);
-__decorate([
-    property({ type: Boolean })
-], ThCard.prototype, "dismissible", void 0);
-__decorate([
-    property({ type: String, attribute: 'card-id' })
-], ThCard.prototype, "cardId", void 0);
-__decorate([
-    property({ type: String })
-], ThCard.prototype, "cardTitle", void 0);
-__decorate([
-    property({ type: String })
-], ThCard.prototype, "subtitle", void 0);
-__decorate([
-    property({ type: String })
-], ThCard.prototype, "description", void 0);
-__decorate([
-    property({ type: String, attribute: 'icon-class' })
-], ThCard.prototype, "iconClass", void 0);
-__decorate([
-    property({ type: String, attribute: 'icon-src' })
-], ThCard.prototype, "iconSrc", void 0);
-__decorate([
-    property({ type: Boolean })
-], ThCard.prototype, "loading", void 0);
-// Register the element
-customElements.define('th-card', ThCard);
-//# sourceMappingURL=th-card.js.map

package/dist/components/th-card/th-card.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"th-card.js","sourceRoot":"","sources":["../../../src/components/th-card/th-card.ts"],"names":[],"mappings":"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"}