'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-abfd8c86.js');

const loadingBarCss = ":host{display:block}.loading_bar{-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;border-radius:32px;border:1px solid var(--color-content-disable, #636363);margin-bottom:8px}.loading_bar.size_small{height:8px}.loading_bar.size_small .bar_behind .loading{border-radius:1px}.loading_bar.size_default{height:16px}.loading_bar.size_default .bar_behind .loading{border-radius:2px}.loading_bar .bar_behind{position:absolute;inset:0.5px 1px 1px 0.5px;border-radius:16px;overflow:hidden}.loading_bar .bar_behind .loading{position:absolute;height:100%;background-color:#1968F0;-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:0s;transition-delay:0s;overflow:hidden}.loading_bar .bar_behind .loading .loader{position:absolute;left:-16px;width:calc(100% + 16px);height:100%;background:rgb(255, 255, 255);background:-webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(75%, rgba(255, 255, 255, 0)), color-stop(75%, rgba(0, 0, 0, 0.26)));background:linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(0, 0, 0, 0.26) 75%);background-size:4px;-webkit-transform:skewX(-15deg);transform:skewX(-15deg);-webkit-animation-name:load;animation-name:load;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.typo_loading{padding-left:8px;padding-right:8px;color:var(--color-content-default, #454545)}@-webkit-keyframes load{from{left:-16px}to{left:0}}@keyframes load{from{left:-16px}to{left:0}}";

const BdsloadingBar = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.percent = 0;
        this.size = 'default';
        this.text = '';
        this.dataTest = null;
    }
    render() {
        const styles = { width: `${this.percent ? (this.percent > 100 ? 100 : this.percent) : 0}%` };
        return (index.h(index.Host, { key: '9c9d84cebc52ee1e2f9249393bc7811c4183a61b' }, index.h("div", { key: '7663fbc9cf0eaca89540f1a12f05f412de4ba6b4', class: { loading_bar: true, [`size_${this.size}`]: true }, "data-test": this.dataTest }, index.h("div", { key: '74f29ba0b5f62ee1575b8acb0b43fe023162853a', class: { bar_behind: true } }, index.h("div", { key: 'b4cc73c07df3ea2b308fb234ed2034d0f2a9c5e1', class: { loading: true }, style: styles }, index.h("div", { key: 'e9d89dbad0266fdb2b59db14e09034b67bc0150b', class: "loader" }))))));
    }
};
BdsloadingBar.style = loadingBarCss;

exports.bds_loading_bar = BdsloadingBar;

//# sourceMappingURL=bds-loading-bar.cjs.entry.js.map