/**
 * @license
 * Copyright 2023 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 = '.forge-skeleton{display:block;width:100%;height:100%}.forge-skeleton::after{display:block;position:absolute;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(--forge-skeleton-theme-gradient,rgba(255,255,255,.3))),to(transparent));background-image:linear-gradient(90deg,transparent,var(--forge-skeleton-theme-gradient,rgba(255,255,255,.3)),transparent);-webkit-animation:loading 1.5s ease-in infinite;animation:loading 1.5s ease-in infinite;content:\"\"}@-webkit-keyframes loading{100%,25%{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes loading{100%,25%{-webkit-transform:translateX(100%);transform:translateX(100%)}}:host{height:48px;height:var(--forge-skeleton-height,48px);margin:16px 0;margin:var(--forge-skeleton-margin,16px 0);border-radius:4px;border-radius:var(--forge-skeleton-border-radius,4px);background-color:rgba(0,0,0,.12);background-color:var(--forge-skeleton-theme-background,rgba(0,0,0,.12));display:block;position:relative;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}:host([hidden]){display:none}:host([avatar]){height:48px;height:var(--forge-skeleton-avatar-size,48px);width:48px;width:var(--forge-skeleton-avatar-size,48px);border-radius:50%}:host([list-item]){height:32px;height:var(--forge-skeleton-list-item-height,32px);margin:12px 8px;margin:var(--forge-skeleton-list-item-margin,12px 8px)}:host([text]){height:16px;height:var(--forge-skeleton-text-height,16px)}:host([stretch]){height:100%;width:100%}:host([chip]){height:32px;height:var(--forge-skeleton-chip-height,32px);width:72px;width:var(--forge-skeleton-chip-width,72px);border-radius:16px}:host([button]){height:36px;height:var(--forge-skeleton-button-height,36px);width:72px;width:var(--forge-skeleton-button-width,72px)}:host([form-field]){height:40px;height:var(--forge-skeleton-form-field-height,40px);width:256px;width:var(--forge-skeleton-form-field-width,256px)}';
/**
 * The web component class behind the `<forge-skeleton>` custom element.
 *
 * @tag forge-skeleton
 */
let SkeletonComponent = class SkeletonComponent extends BaseComponent {
    constructor() {
        super();
        attachShadowTemplate(this, template, styles);
    }
};
SkeletonComponent = __decorate([
    CustomElement({
        name: SKELETON_CONSTANTS.elementName
    })
], SkeletonComponent);
export { SkeletonComponent };
