import{__decorate as t}from"tslib";import{html as e}from"lit";import{property as r,customElement as i}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{s as a}from"./nile-skeleton-loader.css.esm.js";import{N as n}from"../internal/nile-element.esm.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";let o=class extends n{constructor(){super(...arguments),this.variant="text",this.width="",this.height="",this.borderRadius=""}static get styles(){return[a]}formatDimension(t){if(!t)return"";if("number"==typeof t)return`${t}px`;const e=String(t).trim();return/^\d+(\.\d+)?$/.test(e)?`${e}px`:e}getComputedWidth(){const t=this.formatDimension(this.width);return t||("circular"===this.variant?"40px":"calc(100% - 20px)")}getComputedHeight(){const t=this.formatDimension(this.height);return t||("circular"===this.variant?"40px":"text"===this.variant?"1em":"20px")}getComputedBorderRadius(){return this.borderRadius?this.borderRadius:"circular"===this.variant?"50%":"rounded"===this.variant?"var(--nile-radius-radius-md, var(--ng-radius-md, 4px))":"text"===this.variant?"var(--nile-radius-radius-xs, var(--ng-radius-xs, 2px))":"var(--nile-radius-radius-xs, var(--ng-radius-xs))"}render(){return e`
      <div
        part="base"
        class="skeleton-loader"
      >
        <div
          part="skeleton"
          class=${s({skeleton:!0,"skeleton--text":"text"===this.variant,"skeleton--circular":"circular"===this.variant,"skeleton--rectangular":"rectangular"===this.variant,"skeleton--rounded":"rounded"===this.variant})}
          style="
            width: ${this.getComputedWidth()};
            height: ${this.getComputedHeight()};
            border-radius: ${this.getComputedBorderRadius()};
          "
        ></div>
      </div>
    `}};t([r({reflect:!0})],o.prototype,"variant",void 0),t([r({type:String})],o.prototype,"width",void 0),t([r({type:String})],o.prototype,"height",void 0),t([r({type:String,attribute:"border-radius"})],o.prototype,"borderRadius",void 0),o=t([i("nile-skeleton-loader")],o);export{o as N};
