@nuraly/lumenui 0.1.0

package/dist/src/components/skeleton/skeleton.component.js

@@ -0,0 +1,387 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+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 { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { styles } from './skeleton.style.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+/**
+ * # Skeleton Component
+ *
+ * Provides a placeholder while content is loading, or to visualize content that doesn't exist yet.
+ * Improves perceived performance and user experience during data fetching.
+ *
+ * ## Features
+ * - Multiple skeleton elements (Avatar, Title, Paragraph, Button, Input, Image)
+ * - Active animation effect
+ * - Customizable shapes (circle, square, round)
+ * - Configurable sizes (small, default, large)
+ * - Loading state management
+ * - Theme-aware styling
+ * - Flexible configuration options
+ *
+ * ## Usage
+ * ```html
+ * <!-- Basic skeleton -->
+ * <nr-skeleton></nr-skeleton>
+ *
+ * <!-- With active animation -->
+ * <nr-skeleton active></nr-skeleton>
+ *
+ * <!-- Complex skeleton with avatar -->
+ * <nr-skeleton avatar active></nr-skeleton>
+ *
+ * <!-- Loading state with content -->
+ * <nr-skeleton loading>
+ *   <div slot="content">
+ *     <h3>Article Title</h3>
+ *     <p>Article content goes here...</p>
+ *   </div>
+ * </nr-skeleton>
+ *
+ * <!-- Skeleton button -->
+ * <nr-skeleton element="button" active></nr-skeleton>
+ *
+ * <!-- Skeleton input -->
+ * <nr-skeleton element="input" block></nr-skeleton>
+ * ```
+ *
+ * @element nr-skeleton
+ *
+ * @slot content - Content to show when loading is false
+ *
+ * @cssproperty --nuraly-skeleton-background - Background color of skeleton elements
+ * @cssproperty --nuraly-skeleton-gradient-from - Start color of active animation gradient
+ * @cssproperty --nuraly-skeleton-gradient-to - End color of active animation gradient
+ * @cssproperty --nuraly-skeleton-icon-color - Color of image placeholder icon
+ */
+let NrSkeletonElement = class NrSkeletonElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Show animation effect
+         */
+        this.active = false;
+        /**
+         * Show avatar placeholder
+         */
+        this.avatar = false;
+        /**
+         * Avatar configuration
+         */
+        this.avatarConfig = {};
+        /**
+         * Display the skeleton when true
+         */
+        this.loading = true;
+        /**
+         * Show paragraph placeholder
+         */
+        this.paragraph = true;
+        /**
+         * Paragraph configuration
+         */
+        this.paragraphConfig = {};
+        /**
+         * Show paragraph and title radius when true
+         */
+        this.round = false;
+        /**
+         * Show title placeholder
+         */
+        this.showTitle = true;
+        /**
+         * Title configuration
+         */
+        this.titleConfig = {};
+        /**
+         * Button configuration
+         */
+        this.buttonConfig = {};
+        /**
+         * Input configuration
+         */
+        this.inputConfig = {};
+        /**
+         * Image configuration
+         */
+        this.imageConfig = {};
+        /**
+         * Block style for button/input
+         */
+        this.block = false;
+        /**
+         * Shape for standalone elements
+         */
+        this.shape = "default" /* SkeletonShape.Default */;
+        /**
+         * Size for standalone elements
+         */
+        this.size = "default" /* SkeletonSize.Default */;
+    }
+    /**
+     * Render avatar skeleton
+     */
+    renderAvatar() {
+        const config = typeof this.avatar === 'object' ? this.avatar : this.avatarConfig;
+        const shape = config.shape || "circle" /* SkeletonShape.Circle */;
+        const size = config.size || "default" /* SkeletonSize.Default */;
+        const sizeClass = typeof size === 'number' ? '' : size;
+        const customSize = typeof size === 'number' ? { width: `${size}px`, height: `${size}px` } : {};
+        return html `
+      <div
+        class=${classMap({
+            'skeleton-avatar': true,
+            [`skeleton-avatar--${shape}`]: true,
+            [`skeleton-avatar--${sizeClass}`]: !!sizeClass,
+        })}
+        style=${styleMap(customSize)}></div>
+    `;
+    }
+    /**
+     * Render title skeleton
+     */
+    renderTitle() {
+        const config = typeof this.showTitle === 'object' ? this.showTitle : this.titleConfig;
+        const width = config.width;
+        const customWidth = width ? { width: typeof width === 'number' ? `${width}px` : width } : { width: '38%' };
+        return html `
+      <div
+        class=${classMap({
+            'skeleton-title': true,
+            'skeleton-title--round': this.round,
+        })}
+        style=${styleMap(customWidth)}></div>
+    `;
+    }
+    /**
+     * Render paragraph skeleton
+     */
+    renderParagraph() {
+        const config = typeof this.paragraph === 'object' ? this.paragraph : this.paragraphConfig;
+        const rows = config.rows || 3;
+        const widthConfig = config.width;
+        const getLineWidth = (index) => {
+            if (Array.isArray(widthConfig)) {
+                const width = widthConfig[index];
+                return width ? { width: typeof width === 'number' ? `${width}px` : width } : {};
+            }
+            // Last line uses custom width or 61%
+            if (index === rows - 1) {
+                if (widthConfig) {
+                    return { width: typeof widthConfig === 'number' ? `${widthConfig}px` : widthConfig };
+                }
+                return { width: '61%' };
+            }
+            return {};
+        };
+        return html `
+      <div class="skeleton-paragraph">
+        ${Array.from({ length: rows }, (_, i) => html `
+          <div
+            class=${classMap({
+            'skeleton-paragraph-line': true,
+            'skeleton-paragraph-line--round': this.round,
+        })}
+            style=${styleMap(getLineWidth(i))}></div>
+        `)}
+      </div>
+    `;
+    }
+    /**
+     * Render button skeleton
+     */
+    renderButton() {
+        const config = this.buttonConfig;
+        const buttonShape = config.shape || this.shape;
+        const buttonSize = config.size || this.size;
+        const buttonBlock = config.block !== undefined ? config.block : this.block;
+        return html `
+      <div
+        class=${classMap({
+            'skeleton-button': true,
+            [`skeleton-button--${buttonShape}`]: true,
+            [`skeleton-button--${buttonSize}`]: true,
+            'skeleton-button--block': buttonBlock,
+        })}></div>
+    `;
+    }
+    /**
+     * Render input skeleton
+     */
+    renderInput() {
+        const config = this.inputConfig;
+        const inputSize = config.size || this.size;
+        const inputBlock = config.block !== undefined ? config.block : this.block;
+        return html `
+      <div
+        class=${classMap({
+            'skeleton-input': true,
+            [`skeleton-input--${inputSize}`]: true,
+            'skeleton-input--block': inputBlock,
+        })}></div>
+    `;
+    }
+    /**
+     * Render image skeleton
+     */
+    renderImage() {
+        return html `
+      <div class="skeleton-image">
+        <svg
+          class="skeleton-image-icon"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+          width="48"
+          height="48">
+          <path
+            d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zM338 304c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm513.9 437.1c-2.1 2.1-4.5 3.8-7 5.1-5.2 2.7-11.1 4.1-17.1 4.1H196.2c-6 0-11.9-1.4-17.1-4.1-2.5-1.3-4.9-3-7-5.1-4.4-4.4-7.1-10.5-7.1-17.1 0-3.7.8-7.4 2.5-10.8 1.6-3.4 4.1-6.4 7.1-8.8l112.3-97.5c8.8-7.6 22.1-7.6 30.9 0l148.5 129 203.9-177c8.8-7.6 22.1-7.6 30.9 0l179.8 156.1c3 2.6 5.5 5.7 7.1 9.3 1.7 3.7 2.5 7.6 2.5 11.6-.1 6.6-2.8 12.7-7.2 17.1z"
+            fill="currentColor" />
+        </svg>
+      </div>
+    `;
+    }
+    /**
+     * Render standalone element
+     */
+    renderStandaloneElement() {
+        switch (this.element) {
+            case "button" /* SkeletonElementType.Button */:
+                return this.renderButton();
+            case "input" /* SkeletonElementType.Input */:
+                return this.renderInput();
+            case "image" /* SkeletonElementType.Image */:
+                return this.renderImage();
+            case "avatar" /* SkeletonElementType.Avatar */:
+                return this.renderAvatar();
+            default:
+                return html ``;
+        }
+    }
+    /**
+     * Render full skeleton
+     */
+    renderSkeleton() {
+        // If element type is specified, render standalone element
+        if (this.element) {
+            return html `
+        <div
+          class=${classMap({
+                'skeleton': true,
+                'skeleton--active': this.active || (this.element === "avatar" /* SkeletonElementType.Avatar */ && !!this.avatarConfig.active),
+            })}>
+          ${this.renderStandaloneElement()}
+        </div>
+      `;
+        }
+        // Render full skeleton layout
+        return html `
+      <div
+        class=${classMap({
+            'skeleton': true,
+            'skeleton--active': this.active,
+        })}>
+        ${this.avatar || this.showTitle || this.paragraph
+            ? html `
+              ${this.avatar
+                ? html `
+                    <div class="skeleton-header">
+                      ${this.renderAvatar()}
+                      ${this.showTitle || this.paragraph
+                    ? html `
+                            <div class="skeleton-content">
+                              ${this.showTitle ? this.renderTitle() : ''}
+                              ${this.paragraph ? this.renderParagraph() : ''}
+                            </div>
+                          `
+                    : ''}
+                    </div>
+                  `
+                : html `
+                    <div class="skeleton-content">
+                      ${this.showTitle ? this.renderTitle() : ''}
+                      ${this.paragraph ? this.renderParagraph() : ''}
+                    </div>
+                  `}
+            `
+            : ''}
+      </div>
+    `;
+    }
+    render() {
+        // If loading is false, show slotted content
+        if (!this.loading) {
+            return html `
+        <div class="skeleton-wrapper">
+          <slot name="content"><slot></slot></slot>
+        </div>
+      `;
+        }
+        // Show skeleton
+        return this.renderSkeleton();
+    }
+};
+NrSkeletonElement.styles = styles;
+__decorate([
+    property({ type: Boolean })
+], NrSkeletonElement.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrSkeletonElement.prototype, "avatar", void 0);
+__decorate([
+    property({ type: Object, attribute: 'avatar-config' })
+], NrSkeletonElement.prototype, "avatarConfig", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrSkeletonElement.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrSkeletonElement.prototype, "paragraph", void 0);
+__decorate([
+    property({ type: Object, attribute: 'paragraph-config' })
+], NrSkeletonElement.prototype, "paragraphConfig", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrSkeletonElement.prototype, "round", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-title' })
+], NrSkeletonElement.prototype, "showTitle", void 0);
+__decorate([
+    property({ type: Object, attribute: 'title-config' })
+], NrSkeletonElement.prototype, "titleConfig", void 0);
+__decorate([
+    property({ type: String })
+], NrSkeletonElement.prototype, "element", void 0);
+__decorate([
+    property({ type: Object, attribute: 'button-config' })
+], NrSkeletonElement.prototype, "buttonConfig", void 0);
+__decorate([
+    property({ type: Object, attribute: 'input-config' })
+], NrSkeletonElement.prototype, "inputConfig", void 0);
+__decorate([
+    property({ type: Object, attribute: 'image-config' })
+], NrSkeletonElement.prototype, "imageConfig", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrSkeletonElement.prototype, "block", void 0);
+__decorate([
+    property({ type: String })
+], NrSkeletonElement.prototype, "shape", void 0);
+__decorate([
+    property({ type: String })
+], NrSkeletonElement.prototype, "size", void 0);
+NrSkeletonElement = __decorate([
+    customElement('nr-skeleton')
+], NrSkeletonElement);
+export { NrSkeletonElement };
+//# sourceMappingURL=skeleton.component.js.map

package/dist/src/components/skeleton/skeleton.style.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=skeleton.style.d.ts.map

package/dist/src/components/skeleton/skeleton.style.js

@@ -0,0 +1,224 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+  }
+
+  .skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .skeleton-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .skeleton-content {
+    flex: 1;
+  }
+
+  /* Avatar */
+  .skeleton-avatar {
+    flex-shrink: 0;
+    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    border-radius: 4px;
+  }
+
+  .skeleton-avatar--circle {
+    border-radius: 50%;
+  }
+
+  .skeleton-avatar--square {
+    border-radius: 4px;
+  }
+
+  .skeleton-avatar--small {
+    width: 32px;
+    height: 32px;
+  }
+
+  .skeleton-avatar--default {
+    width: 40px;
+    height: 40px;
+  }
+
+  .skeleton-avatar--large {
+    width: 48px;
+    height: 48px;
+  }
+
+  /* Title */
+  .skeleton-title {
+    height: 16px;
+    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    border-radius: 4px;
+    margin-bottom: 12px;
+  }
+
+  .skeleton-title--round {
+    border-radius: 8px;
+  }
+
+  /* Paragraph */
+  .skeleton-paragraph {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .skeleton-paragraph-line {
+    height: 16px;
+    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    border-radius: 4px;
+  }
+
+  .skeleton-paragraph-line--round {
+    border-radius: 8px;
+  }
+
+  /* Button */
+  .skeleton-button {
+    display: inline-block;
+    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    border-radius: 4px;
+  }
+
+  .skeleton-button--block {
+    display: block;
+    width: 100%;
+  }
+
+  .skeleton-button--circle {
+    border-radius: 50%;
+  }
+
+  .skeleton-button--round {
+    border-radius: 16px;
+  }
+
+  .skeleton-button--square {
+    border-radius: 4px;
+  }
+
+  .skeleton-button--small {
+    width: 64px;
+    height: 24px;
+  }
+
+  .skeleton-button--default {
+    width: 80px;
+    height: 32px;
+  }
+
+  .skeleton-button--large {
+    width: 96px;
+    height: 40px;
+  }
+
+  /* Input */
+  .skeleton-input {
+    display: block;
+    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    border-radius: 4px;
+  }
+
+  .skeleton-input--small {
+    height: 24px;
+  }
+
+  .skeleton-input--default {
+    height: 32px;
+  }
+
+  .skeleton-input--large {
+    height: 40px;
+  }
+
+  .skeleton-input--block {
+    width: 100%;
+  }
+
+  /* Image */
+  .skeleton-image {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    border-radius: 4px;
+    width: 100%;
+    height: 200px;
+  }
+
+  .skeleton-image-icon {
+    font-size: 48px;
+    color: var(--nuraly-skeleton-icon-color, rgba(0, 0, 0, 0.15));
+  }
+
+  /* Active animation */
+  @keyframes skeleton-loading {
+    0% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0 50%;
+    }
+  }
+
+  .skeleton--active .skeleton-avatar,
+  .skeleton--active .skeleton-title,
+  .skeleton--active .skeleton-paragraph-line,
+  .skeleton--active .skeleton-button,
+  .skeleton--active .skeleton-input,
+  .skeleton--active .skeleton-image {
+    background: linear-gradient(
+      90deg,
+      var(--nuraly-skeleton-gradient-from, rgba(0, 0, 0, 0.06)) 25%,
+      var(--nuraly-skeleton-gradient-to, rgba(0, 0, 0, 0.15)) 37%,
+      var(--nuraly-skeleton-gradient-from, rgba(0, 0, 0, 0.06)) 63%
+    );
+    background-size: 400% 100%;
+    animation: skeleton-loading 1.4s ease infinite;
+  }
+
+  /* Dark theme support */
+  :host([theme='carbon-dark']) .skeleton-avatar,
+  :host([theme='carbon-dark']) .skeleton-title,
+  :host([theme='carbon-dark']) .skeleton-paragraph-line,
+  :host([theme='carbon-dark']) .skeleton-button,
+  :host([theme='carbon-dark']) .skeleton-input,
+  :host([theme='carbon-dark']) .skeleton-image {
+    background: rgba(255, 255, 255, 0.08);
+  }
+
+  :host([theme='carbon-dark']) .skeleton-image-icon {
+    color: rgba(255, 255, 255, 0.15);
+  }
+
+  :host([theme='carbon-dark']) .skeleton--active .skeleton-avatar,
+  :host([theme='carbon-dark']) .skeleton--active .skeleton-title,
+  :host([theme='carbon-dark']) .skeleton--active .skeleton-paragraph-line,
+  :host([theme='carbon-dark']) .skeleton--active .skeleton-button,
+  :host([theme='carbon-dark']) .skeleton--active .skeleton-input,
+  :host([theme='carbon-dark']) .skeleton--active .skeleton-image {
+    background: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0.08) 25%,
+      rgba(255, 255, 255, 0.15) 37%,
+      rgba(255, 255, 255, 0.08) 63%
+    );
+    background-size: 400% 100%;
+  }
+
+  /* Content wrapper for loading state */
+  .skeleton-wrapper {
+    display: block;
+  }
+
+  .skeleton-wrapper--hidden {
+    display: none;
+  }
+`;
+//# sourceMappingURL=skeleton.style.js.map

package/dist/src/components/skeleton/skeleton.types.d.ts

@@ -0,0 +1,82 @@
+/**
+ * Skeleton shape types
+ */
+export declare const enum SkeletonShape {
+    Circle = "circle",
+    Square = "square",
+    Round = "round",
+    Default = "default"
+}
+/**
+ * Skeleton size types
+ */
+export declare const enum SkeletonSize {
+    Small = "small",
+    Default = "default",
+    Large = "large"
+}
+/**
+ * Skeleton element type
+ */
+export declare const enum SkeletonElementType {
+    Avatar = "avatar",
+    Button = "button",
+    Input = "input",
+    Image = "image"
+}
+/**
+ * Skeleton avatar configuration
+ */
+export interface SkeletonAvatarConfig {
+    active?: boolean;
+    shape?: SkeletonShape;
+    size?: SkeletonSize | number;
+}
+/**
+ * Skeleton title configuration
+ */
+export interface SkeletonTitleConfig {
+    width?: number | string;
+}
+/**
+ * Skeleton paragraph configuration
+ */
+export interface SkeletonParagraphConfig {
+    rows?: number;
+    width?: number | string | Array<number | string>;
+}
+/**
+ * Skeleton button configuration
+ */
+export interface SkeletonButtonConfig {
+    active?: boolean;
+    block?: boolean;
+    shape?: SkeletonShape;
+    size?: SkeletonSize;
+}
+/**
+ * Skeleton input configuration
+ */
+export interface SkeletonInputConfig {
+    active?: boolean;
+    size?: SkeletonSize;
+    block?: boolean;
+}
+/**
+ * Skeleton image configuration
+ */
+export interface SkeletonImageConfig {
+    active?: boolean;
+}
+/**
+ * Main skeleton configuration
+ */
+export interface SkeletonConfig {
+    active?: boolean;
+    avatar?: boolean | SkeletonAvatarConfig;
+    loading?: boolean;
+    paragraph?: boolean | SkeletonParagraphConfig;
+    round?: boolean;
+    title?: boolean | SkeletonTitleConfig;
+}
+//# sourceMappingURL=skeleton.types.d.ts.map

package/dist/src/components/skeleton/skeleton.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=skeleton.types.js.map