import { r as registerInstance, h } from './index-baa5e267.js';
import { i as initI18n } from './index-41363fa6.js';
import '@sankhyalabs/core';

const ALLOWED_ANIMATIONS = ['progress', 'pulse', 'false'];
const ALLOWED_VARIANTS = ['circle', 'rect', 'text'];
const DEFAULT_VALUES = {
  COUNT: 1,
  VARIANT: 'text',
  ANIMATION: 'progress'
};
const SKELETON_ARIA = {
  DATA_BUSY: 'true',
  DATA_VALUEMIN: '0',
  DATA_VALUEMAX: '100',
  ROLE: 'progressbar',
  TABINDEX: '0'
};
const VARIANT_TYPES = {
  CIRCLE: 'circle',
  RECT: 'rect',
  TEXT: 'text'
};
const ANIMATION_TYPES = {
  PROGRESS: 'progress',
  PULSE: 'pulse',
  FALSE: 'false'
};

const ezSkeletonCss = ".skeleton {\n  background: var(--skeleton-background, #f0f3f7) no-repeat;\n  border-radius: var(--skeleton-border-radius, 12px);\n  width: var(--skeleton-width, 100%);\n  height: var(--skeleton-height, 20px);\n  display: inline-block;\n  margin-bottom: var(--skeleton-margin-bottom, 0px);\n\tmargin-top: var(--skeleton-margin-top, 0px);\n\tmargin-right: var(--skeleton-margin-right, 0px);\n\tmargin-left: var(--skeleton-margin-left, 0px);\n  box-sizing: border-box;\n  outline: none;\n  overflow: hidden;\n  position: relative;\n  -webkit-will-change: transform;\n  -moz-will-change: transform;\n  will-change: transform;\n\n  &:after,\n  &:before {\n    box-sizing: border-box;\n  }\n\n  &.circle {\n    width: var(--skeleton-width, 40px);\n    height: var(--skeleton-height, 40px);\n    margin-bottom: var(--skeleton-margin-bottom, 0px);\n    border-radius: var(--skeleton-border-radius, 50%);\n  }\n\n  &.rect {\n    border-radius: var(--skeleton-border-radius, 0px);\n  }\n\n  &.progress,\n  &.progress-dark {\n    -webkit-animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n    -moz-animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n    -ms-animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n    animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n    background-size: 200px 100%;\n  }\n\n  &.progress {\n    background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0), var(--skeleton-background-image, #e4eaf1), rgba(255, 255, 255, 0));\n    background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0), var(--skeleton-background-image, #e4eaf1), rgba(255, 255, 255, 0));\n    background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0), var(--skeleton-background-image, #e4eaf1), rgba(255, 255, 255, 0));\n    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--skeleton-background-image, #e4eaf1), rgba(255, 255, 255, 0));\n  }\n\n  &.progress-dark {\n    background-image: -webkit-linear-gradient(90deg, transparent, hsla(0, 0%, 0%, 0.2), transparent);\n    background-image: -moz-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);\n    background-image: -ms-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);\n    background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);\n  }\n\n  &.pulse {\n    -webkit-animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n    -moz-animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n    -ms-animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n    animation-delay: 0.5s;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    &.pulse,\n    &.progress-dark,\n    &.progress {\n      animation: none;\n    }\n\n    &.progress,\n    &.progress-dark {\n      background-image: none;\n    }\n  }\n}\n\n@-webkit-keyframes progress {\n  0% {\n    background-position: -200px 0;\n  }\n  100% {\n    background-position: calc(200px + 100%) 0;\n  }\n}\n@-moz-keyframes progress {\n  0% {\n    background-position: -200px 0;\n  }\n  100% {\n    background-position: calc(200px + 100%) 0;\n  }\n}\n@-ms-keyframes progress {\n  0% {\n    background-position: -200px 0;\n  }\n  100% {\n    background-position: calc(200px + 100%) 0;\n  }\n}\n@keyframes progress {\n  0% {\n    background-position: -200px 0;\n  }\n  100% {\n    background-position: calc(200px + 100%) 0;\n  }\n}\n\n@-webkit-keyframes pulse {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@-moz-keyframes pulse {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@-ms-keyframes pulse {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes pulse {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n";

const EzSkeleton = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.items = [];
    this.template = undefined;
    this.count = DEFAULT_VALUES.COUNT;
    this.variant = DEFAULT_VALUES.VARIANT;
    this.width = null;
    this.height = null;
    this.marginTop = null;
    this.marginRight = null;
    this.marginBottom = null;
    this.marginLeft = null;
    this.animation = DEFAULT_VALUES.ANIMATION;
  }
  async componentWillLoad() {
    this.i18n = await initI18n();
    this.initializeItems();
  }
  componentWillUpdate() {
    this.initializeItems();
  }
  initializeItems() {
    this.items = Array(this.count).fill(1);
  }
  getSkeletonConfig(props) {
    if (!props)
      return;
    if ((props === null || props === void 0 ? void 0 : props.variant) == VARIANT_TYPES.CIRCLE) {
      props.width = props.width || 'var(--skeleton-width, 40px)';
      props.height = props.height || 'var(--skeleton-height, 40px)';
    }
    else {
      props.width = props.width || 'var(--skeleton-width, 100%)';
    }
    const width = (props.marginRight || props.marginLeft) && props.width && props.variant != VARIANT_TYPES.CIRCLE
      ? `calc(${props.width} ${props.marginRight ? `- ${props.marginRight}` : ''} ${props.marginLeft ? `- ${props.marginLeft}` : ''})`
      : props.width;
    return {
      skeletonClasses: {
        skeleton: true,
        circle: props.variant === VARIANT_TYPES.CIRCLE,
        rect: props.variant === VARIANT_TYPES.RECT,
        progress: props.animation === ANIMATION_TYPES.PROGRESS,
        pulse: props.animation === ANIMATION_TYPES.PULSE,
      },
      styles: {
        width,
        height: props.height,
        marginTop: props.marginTop,
        marginRight: props.marginRight,
        marginBottom: props.marginBottom,
        marginLeft: props.marginLeft,
      },
    };
  }
  validateVariant(variant) {
    return ALLOWED_VARIANTS.includes(variant) ? variant : DEFAULT_VALUES.VARIANT;
  }
  validateAnimation(animation) {
    return ALLOWED_ANIMATIONS.includes(animation) ? animation : DEFAULT_VALUES.ANIMATION;
  }
  renderSkeletonTemplate(templateContent) {
    var _a;
    const innerHTMLTemp = ((_a = templateContent['$attrs']) === null || _a === void 0 ? void 0 : _a.innerHTML) || templateContent;
    if (typeof innerHTMLTemp === 'string') {
      const tempDiv = document.createElement('div');
      tempDiv.innerHTML = innerHTMLTemp;
      const elements = (tempDiv === null || tempDiv === void 0 ? void 0 : tempDiv.querySelectorAll(':not(.skeleton) > *')) || [];
      return Array.from(elements).map(element => {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
        if ((_a = element === null || element === void 0 ? void 0 : element.classList) === null || _a === void 0 ? void 0 : _a.contains('skeleton')) {
          const skeletonConfig = this.getSkeletonConfig({
            variant: this.validateVariant(((_b = element.getAttribute('variant')) === null || _b === void 0 ? void 0 : _b.replace(/[{}]/g, '')) || this.variant),
            width: ((_c = element.getAttribute('width')) === null || _c === void 0 ? void 0 : _c.replace(/[{}]/g, '')) || this.width,
            height: ((_d = element.getAttribute('height')) === null || _d === void 0 ? void 0 : _d.replace(/[{}]/g, '')) || this.height,
            marginTop: ((_e = element.getAttribute('marginTop')) === null || _e === void 0 ? void 0 : _e.replace(/[{}]/g, '')) || this.marginTop,
            marginLeft: ((_f = element.getAttribute('marginLeft')) === null || _f === void 0 ? void 0 : _f.replace(/[{}]/g, '')) || this.marginLeft,
            marginRight: ((_g = element.getAttribute('marginRight')) === null || _g === void 0 ? void 0 : _g.replace(/[{}]/g, '')) || this.marginRight,
            marginBottom: ((_h = element.getAttribute('marginBottom')) === null || _h === void 0 ? void 0 : _h.replace(/[{}]/g, '')) || this.marginBottom,
            animation: this.validateAnimation(((_j = element.getAttribute('animation')) === null || _j === void 0 ? void 0 : _j.replace(/[{}]/g, '')) || this.animation),
          });
          const count = Number((_k = element.getAttribute('count')) === null || _k === void 0 ? void 0 : _k.replace(/[{}]/g, '')) || 1;
          return Array(count)
            .fill(1)
            .map((_, index) => this.renderSkeletonItem(index, skeletonConfig));
        }
        return h("div", { innerHTML: element.outerHTML });
      });
    }
    return templateContent;
  }
  renderSkeletonItem(index, skeletonConfig) {
    const config = skeletonConfig ||
      this.getSkeletonConfig({
        variant: this.validateVariant(this.variant),
        animation: this.validateAnimation(this.animation),
        width: this.width,
        height: this.height,
        marginTop: this.marginTop,
        marginRight: this.marginRight,
        marginBottom: this.marginBottom,
        marginLeft: this.marginLeft,
      });
    return this.renderSkeletonSpan(index, config);
  }
  renderSkeletonSpan(index, config) {
    return (h("span", { key: index, class: config === null || config === void 0 ? void 0 : config.skeletonClasses, style: config === null || config === void 0 ? void 0 : config.styles, "data-busy": SKELETON_ARIA.DATA_BUSY, "data-valuemin": SKELETON_ARIA.DATA_VALUEMIN, "data-valuemax": SKELETON_ARIA.DATA_VALUEMAX, "data-valuetext": this.i18n("app.loading"), role: SKELETON_ARIA.ROLE, tabindex: SKELETON_ARIA.TABINDEX }));
  }
  render() {
    return !this.template ? this.items.map((_, index) => this.renderSkeletonItem(index)) : this.renderSkeletonTemplate(this.template);
  }
};
EzSkeleton.style = ezSkeletonCss;

export { EzSkeleton as ez_skeleton };
