import { h, H as Host, F as Fragment, r as registerInstance, g as getElement } from './index-090d31ca.js';
import { c as MapToComponentField, V as VegaSlimmer } from './global-slimmer-registry-0a7aa308.js';
import { I as InjectVegaSlimmer } from './inject-vega-slimmer-caffc2aa.js';
import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-4202784a.js';
import { s as sanitizeVegaComponent } from './component-d58ca1d0.js';
import { p as parseToPixelString } from './pixel-f32c07ce.js';

var __decorate$8 = (undefined && undefined.__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;
};
/**
 * Skeleton host renderer
 */
class VegaSkeletonRendererBase extends VegaSlimmer {
  render() {
    return sanitizeVegaComponent(h(Host, { class: { animated: this.animated }, style: this.assignHostStyle() }, this.renderChildren()), this.host);
  }
}
__decorate$8([
  MapToComponentField()
], VegaSkeletonRendererBase.prototype, "host", void 0);
__decorate$8([
  MapToComponentField()
], VegaSkeletonRendererBase.prototype, "animated", void 0);

var __decorate$7 = (undefined && undefined.__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;
};
/**
 * Text Skeleton renderer
 */
class VegaSkeletonTextRenderer extends VegaSkeletonRendererBase {
  assignHostStyle() {
    const { width = '180px' } = this;
    const widthWithUnit = parseToPixelString(width);
    return {
      width: widthWithUnit,
    };
  }
  renderChildren() {
    return h("div", { class: "vega-skeleton-text" });
  }
}
__decorate$7([
  MapToComponentField()
], VegaSkeletonTextRenderer.prototype, "width", void 0);

var __decorate$6 = (undefined && undefined.__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;
};
/**
 * Paragraph Skeleton renderer
 */
class VegaSkeletonParagraphRenderer extends VegaSkeletonRendererBase {
  assignHostStyle() {
    return { width: this.getWidthWithUnit() };
  }
  renderChildren() {
    return (h("vega-flex", { gap: "size-16", direction: "col" },
      h("div", { class: "vega-skeleton-text" }),
      h("div", { class: "vega-skeleton-text", style: { width: `calc(${this.getWidthWithUnit()} * 0.8)` } }),
      h("div", { class: "vega-skeleton-text", style: { width: `calc(${this.getWidthWithUnit()} * 0.6)` } })));
  }
  getWidthWithUnit() {
    const { width = '320px' } = this;
    return parseToPixelString(width);
  }
}
__decorate$6([
  MapToComponentField()
], VegaSkeletonParagraphRenderer.prototype, "width", void 0);

var __decorate$5 = (undefined && undefined.__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;
};
/**
 * Full width paragraph Skeleton renderer
 */
class VegaSkeletonFullWidthParagraphRenderer extends VegaSkeletonRendererBase {
  assignHostStyle() {
    const { width = '100%' } = this;
    const widthWithUnit = parseToPixelString(width);
    return { width: widthWithUnit };
  }
  renderChildren() {
    return (h("vega-flex", { gap: "size-16", direction: "col" },
      h("div", { class: "vega-skeleton-text full-width" }),
      h("div", { class: "vega-skeleton-text full-width" }),
      h("div", { class: "vega-skeleton-text full-width" })));
  }
}
__decorate$5([
  MapToComponentField()
], VegaSkeletonFullWidthParagraphRenderer.prototype, "width", void 0);

var __decorate$4 = (undefined && undefined.__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;
};
/**
 * Image Skeleton renderer
 */
class VegaSkeletonImageRenderer extends VegaSkeletonRendererBase {
  assignHostStyle() {
    const { width = '180px', height = '120px' } = this;
    const widthWithUnit = parseToPixelString(width);
    const heightWithUnit = parseToPixelString(height);
    return {
      width: widthWithUnit,
      height: heightWithUnit,
    };
  }
  renderChildren() {
    return h("vega-box", { class: "vega-skeleton-image", corners: this.corners });
  }
}
__decorate$4([
  MapToComponentField()
], VegaSkeletonImageRenderer.prototype, "height", void 0);
__decorate$4([
  MapToComponentField()
], VegaSkeletonImageRenderer.prototype, "width", void 0);
__decorate$4([
  MapToComponentField()
], VegaSkeletonImageRenderer.prototype, "corners", void 0);

var __decorate$3 = (undefined && undefined.__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;
};
/**
 * Table Skeleton renderer
 */
class VegaSkeletonTableRenderer extends VegaSkeletonRendererBase {
  constructor() {
    super(...arguments);
    this.rows = 4;
    this.cells = 5;
    this.renderCells = () => {
      return (h(Fragment, null, [...Array(this.cells).keys()].map((cell) => {
        return (h("td", { class: "vega-skeleton-table-cell", key: cell },
          h("vega-skeleton", { type: "text", width: "100%", animated: this.animated })));
      })));
    };
  }
  assignHostStyle() {
    const { width = '100%' } = this;
    const widthWithUnit = parseToPixelString(width);
    return { width: widthWithUnit };
  }
  renderChildren() {
    return (h("table", { class: "vega-skeleton-table" },
      h("thead", { class: "vega-skeleton-table-head" },
        h("tr", { class: "vega-skeleton-table-row" }, this.renderCells())),
      h("tbody", { class: "vega-skeleton-table-body" }, [...Array(this.rows).keys()].map((row) => {
        return (h("tr", { class: "vega-skeleton-table-row", key: row }, this.renderCells()));
      }))));
  }
}
__decorate$3([
  MapToComponentField()
], VegaSkeletonTableRenderer.prototype, "width", void 0);

var __decorate$2 = (undefined && undefined.__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;
};
/**
 * Skeleton renderer by type
 */
class VegaSkeletonRendererManager extends VegaSlimmer {
  render() {
    switch (this.type) {
      case 'text':
        return this.vegaSkeletonTextRenderer.render();
      case 'paragraph':
        return this.vegaSkeletonParagraphRenderer.render();
      case 'full-width-paragraph':
        return this.vegaSkeletonFullWidthParagraphRenderer.render();
      case 'ellipse':
        return this.vegaSkeletonEllipseRenderer.render();
      case 'image':
        return this.vegaSkeletonImageRenderer.render();
      case 'table':
        return this.vegaSkeletonTableRenderer.render();
    }
  }
}
__decorate$2([
  MapToComponentField()
], VegaSkeletonRendererManager.prototype, "type", void 0);
__decorate$2([
  MapToComponentField()
], VegaSkeletonRendererManager.prototype, "vegaSkeletonTextRenderer", void 0);
__decorate$2([
  MapToComponentField()
], VegaSkeletonRendererManager.prototype, "vegaSkeletonParagraphRenderer", void 0);
__decorate$2([
  MapToComponentField()
], VegaSkeletonRendererManager.prototype, "vegaSkeletonFullWidthParagraphRenderer", void 0);
__decorate$2([
  MapToComponentField()
], VegaSkeletonRendererManager.prototype, "vegaSkeletonEllipseRenderer", void 0);
__decorate$2([
  MapToComponentField()
], VegaSkeletonRendererManager.prototype, "vegaSkeletonImageRenderer", void 0);
__decorate$2([
  MapToComponentField()
], VegaSkeletonRendererManager.prototype, "vegaSkeletonTableRenderer", void 0);

var __decorate$1 = (undefined && undefined.__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;
};
/**
 * Ellipse Skeleton renderer
 */
class VegaSkeletonEllipseRenderer extends VegaSkeletonRendererBase {
  assignHostStyle() {
    const { width = '120px', height = '120px' } = this;
    const widthWithUnit = parseToPixelString(width);
    const heightWithUnit = parseToPixelString(height);
    return {
      width: widthWithUnit,
      height: heightWithUnit,
    };
  }
  renderChildren() {
    return h("div", { class: "vega-skeleton-ellipse" });
  }
}
__decorate$1([
  MapToComponentField()
], VegaSkeletonEllipseRenderer.prototype, "width", void 0);
__decorate$1([
  MapToComponentField()
], VegaSkeletonEllipseRenderer.prototype, "height", void 0);

const vegaSkeletonCss = ":host{display:block}:host([type=text]),:host([type=image]),:host([type=ellipse]){display:inline-block}@keyframes v-skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}.vega-skeleton-bg-base,.vega-skeleton-image,.vega-skeleton-ellipse,.vega-skeleton-text-base,.vega-skeleton-text{background-color:rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1))}:host(.animated) .vega-skeleton-bg-base,:host(.animated) .vega-skeleton-image,:host(.animated) .vega-skeleton-ellipse,:host(.animated) .vega-skeleton-text-base,:host(.animated) .vega-skeleton-text{animation:v-skeleton-loading 1750ms cubic-bezier(0.56, 0, 0.38, 0.98) infinite;animation-delay:1ms;background:linear-gradient(90deg, rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1)) 25%, rgba(var(--v-bg-action-quaternary-hover, 239, 239, 239, 1)) 37%, rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1)) 63%);background-size:400% 100%}.vega-skeleton-text-base,.vega-skeleton-text{border-radius:9999px;height:16px}.vega-skeleton-text.full-width{width:100%}.vega-skeleton-ellipse{border-radius:9999px;width:100%;height:100%}.vega-skeleton-image{width:100%;height:100%}.vega-skeleton-table{width:100%;border-spacing:0;border-top-left-radius:12px;border-top-right-radius:12px;overflow:hidden}.vega-skeleton-table .vega-skeleton-table-head{background-color:rgba(var(--v-bg-table-header, 240, 243, 247, 1))}.vega-skeleton-table .vega-skeleton-table-body{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1))}.vega-skeleton-table .vega-skeleton-table-cell{box-sizing:border-box;padding:16px}.vega-skeleton-table .vega-skeleton-table-cell:nth-of-type(4),.vega-skeleton-table .vega-skeleton-table-cell:nth-of-type(5){display:none}@media (min-width: 768px){.vega-skeleton-table .vega-skeleton-table-cell:nth-of-type(4),.vega-skeleton-table .vega-skeleton-table-cell:nth-of-type(5){display:table-cell}}";

var __decorate = (undefined && undefined.__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;
};
const VegaSkeleton = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.globalSlimmers = {};
    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
    this.vegaSkeletonTextRenderer = new VegaSkeletonTextRenderer();
    this.vegaSkeletonParagraphRenderer = new VegaSkeletonParagraphRenderer();
    this.vegaSkeletonFullWidthParagraphRenderer = new VegaSkeletonFullWidthParagraphRenderer();
    this.vegaSkeletonEllipseRenderer = new VegaSkeletonEllipseRenderer();
    this.vegaSkeletonImageRenderer = new VegaSkeletonImageRenderer();
    this.vegaSkeletonTableRenderer = new VegaSkeletonTableRenderer();
    this.vegaSkeletonRendererManager = new VegaSkeletonRendererManager();
    /**
     * Specifies the type of the skeleton.
     *
     * @vegaVersion 2.15.0
     */
    this.type = 'text';
    /**
     * Indicates whether the skeleton displays an animation effect.
     *
     * @vegaVersion 2.15.0
     */
    this.animated = false;
    /**
     * Defines the corner of the skeleton.
     *    It accepts a string value representing a valid
     *    border radius token.
     * @VegaHint This property is only valid for image types.
     *
     * @vegaVersion 2.45.0
     */
    this.corners = 'rounded-12';
  }
  render() {
    return this.vegaSkeletonRendererManager.render();
  }
  get host() { return getElement(this); }
};
__decorate([
  InjectVegaGlobalSlimmer()
], VegaSkeleton.prototype, "globalSlimmers", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaSkeleton.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaSkeleton.prototype, "vegaSkeletonTextRenderer", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaSkeleton.prototype, "vegaSkeletonParagraphRenderer", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaSkeleton.prototype, "vegaSkeletonFullWidthParagraphRenderer", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaSkeleton.prototype, "vegaSkeletonEllipseRenderer", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaSkeleton.prototype, "vegaSkeletonImageRenderer", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaSkeleton.prototype, "vegaSkeletonTableRenderer", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaSkeleton.prototype, "vegaSkeletonRendererManager", void 0);
VegaSkeleton.style = vegaSkeletonCss;

export { VegaSkeleton as vega_skeleton };
