import { __decorate } from "tslib";
import { html, } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { styles } from './nile-skeleton-loader.css';
import NileElement from '../internal/nile-element';
let NileSkeletonLoader = class NileSkeletonLoader extends NileElement {
    constructor() {
        super(...arguments);
        this.variant = 'text';
        this.width = '';
        this.height = '';
        this.borderRadius = '';
    }
    static get styles() {
        return [styles];
    }
    formatDimension(value) {
        if (!value)
            return '';
        if (typeof value === 'number') {
            return `${value}px`;
        }
        const trimmed = String(value).trim();
        if (/^\d+(\.\d+)?$/.test(trimmed)) {
            return `${trimmed}px`;
        }
        return trimmed;
    }
    getComputedWidth() {
        const formattedWidth = this.formatDimension(this.width);
        if (formattedWidth) {
            return formattedWidth;
        }
        return this.variant === 'circular' ? '40px' : 'calc(100% - 20px)';
    }
    getComputedHeight() {
        const formattedHeight = this.formatDimension(this.height);
        if (formattedHeight) {
            return formattedHeight;
        }
        if (this.variant === 'circular') {
            return '40px';
        }
        return this.variant === 'text' ? '1em' : '20px';
    }
    getComputedBorderRadius() {
        if (this.borderRadius) {
            return this.borderRadius;
        }
        if (this.variant === 'circular') {
            return '50%';
        }
        if (this.variant === 'rounded') {
            return 'var(--nile-radius-radius-md, var(--ng-radius-md, 4px))';
        }
        if (this.variant === 'text') {
            return 'var(--nile-radius-radius-xs, var(--ng-radius-xs, 2px))';
        }
        return 'var(--nile-radius-radius-xs, var(--ng-radius-xs))';
    }
    render() {
        return html `
      <div
        part="base"
        class="skeleton-loader"
      >
        <div
          part="skeleton"
          class=${classMap({
            skeleton: true,
            'skeleton--text': this.variant === 'text',
            'skeleton--circular': this.variant === 'circular',
            'skeleton--rectangular': this.variant === 'rectangular',
            'skeleton--rounded': this.variant === 'rounded',
        })}
          style="
            width: ${this.getComputedWidth()};
            height: ${this.getComputedHeight()};
            border-radius: ${this.getComputedBorderRadius()};
          "
        ></div>
      </div>
    `;
    }
};
__decorate([
    property({ reflect: true })
], NileSkeletonLoader.prototype, "variant", void 0);
__decorate([
    property({ type: String })
], NileSkeletonLoader.prototype, "width", void 0);
__decorate([
    property({ type: String })
], NileSkeletonLoader.prototype, "height", void 0);
__decorate([
    property({ type: String, attribute: 'border-radius' })
], NileSkeletonLoader.prototype, "borderRadius", void 0);
NileSkeletonLoader = __decorate([
    customElement('nile-skeleton-loader')
], NileSkeletonLoader);
export { NileSkeletonLoader };
export default NileSkeletonLoader;
//# sourceMappingURL=nile-skeleton-loader.js.map