/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
import { __decorate } from "tslib";
import { CustomElement, attachShadowTemplate } from '@tylertech/forge-core';
import { BaseComponent } from '../core/base/base-component';
import { SKELETON_CONSTANTS } from './skeleton-constants';
const template = '<template><div class=\"forge-skeleton\" part=\"root\"></div></template>';
const styles = '@-webkit-keyframes loading{100%,25%{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes loading{100%,25%{-webkit-transform:translateX(100%);transform:translateX(100%)}}:host{--_skeleton-animation-duration:var(--forge-skeleton-animation-duration, 1500ms);--_skeleton-width:var(--forge-skeleton-width, auto);--_skeleton-height:var(--forge-skeleton-height, 48px);--_skeleton-background:var(--forge-skeleton-background, var(--forge-theme-surface-container, #e0e0e0));--_skeleton-shape:var(--forge-skeleton-shape, var(--forge-shape-medium, 4px));--_skeleton-margin:var(--forge-skeleton-margin, var(--forge-spacing-medium, 16px) 0);--_skeleton-button-height:var(--forge-skeleton-button-height, var(--forge-button-height, 36px));--_skeleton-button-width:var(--forge-skeleton-button-width, 72px);--_skeleton-form-field-height:var(--forge-skeleton-form-field-height, 40px);--_skeleton-form-field-width:var(--forge-skeleton-form-field-width, 256px);--_skeleton-chip-height:var(--forge-skeleton-chip-height, 32px);--_skeleton-chip-width:var(--forge-skeleton-chip-width, 72px);--_skeleton-chip-shape:var(--forge-skeleton-chip-shape, var(--forge-shape-extra-large, 16px));--_skeleton-list-item-height:var(--forge-skeleton-list-item-height, 32px);--_skeleton-list-item-margin:var(--forge-skeleton-list-item-margin, 12px 8px);--_skeleton-text-height:var(--forge-skeleton-text-height, 1rem);--_skeleton-gradient-color:var(--forge-skeleton-gradient-color, var(--forge-theme-surface-container-low, #ebebeb));--_skeleton-avatar-size:var(--forge-skeleton-avatar-size, var(--forge-avatar-size, 40px));--_skeleton-avatar-shape:var(--forge-skeleton-avatar-shape, var(--forge-avatar-shape, var(--forge-shape-round, 50%)))}:host{height:var(--_skeleton-height);width:var(--_skeleton-width);margin:var(--_skeleton-margin);border-radius:var(--_skeleton-shape);background-color:var(--_skeleton-background);position:relative;display:block;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}:host([hidden]){display:none}.forge-skeleton{display:block}.forge-skeleton::after{position:absolute;display:block;width:100%;height:100%;-webkit-transform:translateX(-100%);transform:translateX(-100%);background-repeat:no-repeat;background-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(var(--_skeleton-gradient-color)),to(transparent));background-image:linear-gradient(90deg,transparent,var(--_skeleton-gradient-color),transparent);-webkit-animation:loading var(--_skeleton-animation-duration) ease-in infinite;animation:loading var(--_skeleton-animation-duration) ease-in infinite;content:\"\"}:host([avatar]){--_skeleton-height:var(--_skeleton-avatar-size);--_skeleton-width:var(--_skeleton-avatar-size);--_skeleton-shape:var(--_skeleton-avatar-shape)}:host([list-item]){--_skeleton-height:var(--_skeleton-list-item-height);--_skeleton-margin:var(--_skeleton-list-item-margin)}:host([text]){--_skeleton-height:var(--_skeleton-text-height)}:host([stretch]){height:100%;width:100%}:host([chip]){--_skeleton-height:var(--_skeleton-chip-height);--_skeleton-width:var(--_skeleton-chip-width);--_skeleton-shape:var(--_skeleton-chip-shape)}:host([button]){--_skeleton-height:var(--_skeleton-button-height);--_skeleton-width:var(--_skeleton-button-width)}:host([form-field]){--_skeleton-height:var(--_skeleton-form-field-height);--_skeleton-width:var(--_skeleton-form-field-width)}';
/**
 * @tag forge-skeleton
 *
 * @summary Skeleton is used to provide a placeholder for content that is loading.
 *
 * @attribute {string} form-field - Apply form field styles to the skeleton.
 * @attribute {string} button - Apply button styles to the skeleton.
 * @attribute {string} chip - Apply chip styles to the skeleton.
 * @attribute {string} list-item - Apply list item styles to the skeleton.
 * @attribute {string} text - Apply text styles to the skeleton.
 * @attribute {string} avatar - Apply avatar styles to the skeleton.
 * @attribute {string} stretch - Apply stretch styles to the skeleton.
 *
 * @cssproperty --forge-skeleton-animation-duration - The duration of the skeleton animation.
 * @cssproperty --forge-skeleton-width - The width of the skeleton.
 * @cssproperty --forge-skeleton-height - The height of the skeleton.
 * @cssproperty --forge-skeleton-background - The background color of the skeleton.
 * @cssproperty --forge-skeleton-shape - The shape of the skeleton.
 * @cssproperty --forge-skeleton-margin - The margin of the skeleton.
 * @cssproperty --forge-skeleton-button-height - The height of the button skeleton.
 * @cssproperty --forge-skeleton-button-width - The width of the button skeleton.
 * @cssproperty --forge-skeleton-form-field-height - The height of the form field skeleton.
 * @cssproperty --forge-skeleton-form-field-width - The width of the form field skeleton.
 * @cssproperty --forge-skeleton-chip-height - The height of the chip skeleton.
 * @cssproperty --forge-skeleton-chip-width - The width of the chip skeleton.
 * @cssproperty --forge-skeleton-chip-shape - The shape of the chip skeleton.
 * @cssproperty --forge-skeleton-list-item-height - The height of the list item skeleton.
 * @cssproperty --forge-skeleton-list-item-margin - The margin of the list item skeleton.
 * @cssproperty --forge-skeleton-text-height - The height of the text skeleton.
 * @cssproperty --forge-skeleton-gradient-color - The color of the gradient skeleton.
 * @cssproperty --forge-skeleton-avatar-size - The size of the avatar skeleton.
 * @cssproperty --forge-skeleton-avatar-shape - The shape of the avatar skeleton.
 *
 * @csspart root - The root element of the skeleton.
 */
let SkeletonComponent = class SkeletonComponent extends BaseComponent {
    constructor() {
        super();
        attachShadowTemplate(this, template, styles);
    }
};
SkeletonComponent = __decorate([
    CustomElement({
        name: SKELETON_CONSTANTS.elementName
    })
], SkeletonComponent);
export { SkeletonComponent };
