igniteui-webcomponents/components/progress/base.js

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

var __decorate = (this && this.__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;
};
import { html, LitElement, nothing } from 'lit';
import { property, query, state } from 'lit/decorators.js';
import { addInternalsController } from '../common/controllers/internals.js';
import { watch } from '../common/decorators/watch.js';
import { partMap } from '../common/part-map.js';
import { asPercent, clamp, formatString } from '../common/util.js';
export class IgcProgressBaseComponent extends LitElement {
    constructor() {
        super(...arguments);
        this._internals = addInternalsController(this, {
            initialARIA: {
                role: 'progressbar',
                ariaValueMin: '0',
                ariaValueNow: '0',
            },
        });
        this._percentage = 0;
        this._progress = 0;
        this._hasFraction = false;
        this._styleInfo = {
            '--_progress-whole': '0.00',
            '--_progress-integer': '0',
            '--_progress-fraction': '0',
            '--_transition-duration': '0ms',
        };
        this.max = 100;
        this.value = 0;
        this.variant = 'primary';
        this.animationDuration = 500;
        this.indeterminate = false;
        this.hideLabel = false;
    }
    _indeterminateChange() {
        if (!this.indeterminate) {
            this._updateProgress();
        }
    }
    _maxChange() {
        this.max = Math.max(0, this.max);
        if (this.value > this.max) {
            this.value = this.max;
        }
        if (!this.indeterminate) {
            this._updateProgress();
        }
    }
    _valueChange() {
        this.value = clamp(this.value, 0, this.max);
        if (!this.indeterminate) {
            this._updateProgress();
        }
    }
    updated() {
        this._updateARIA();
    }
    _updateARIA() {
        const text = this.labelFormat
            ? this._renderLabelFormat()
            : `${this.value}%`;
        this._internals.setARIA({
            ariaValueMax: this.max.toString(),
            ariaValueNow: this.indeterminate ? null : this.value.toString(),
            ariaValueText: this.indeterminate ? null : text,
        });
    }
    _updateProgress() {
        const percentage = asPercent(this.value, Math.max(1, this.max));
        const fractionValue = Math.round((percentage % 1) * 100);
        this._hasFraction = fractionValue > 0;
        this._styleInfo = {
            '--_progress-whole': percentage.toFixed(2),
            '--_progress-integer': Math.floor(percentage),
            '--_progress-fraction': fractionValue,
            '--_transition-duration': `${this.animationDuration}ms`,
        };
    }
    _renderLabel() {
        const parts = {
            label: true,
            value: true,
            fraction: this._hasFraction,
        };
        return this.labelFormat
            ? html `<span part=${partMap(parts)}>${this._renderLabelFormat()}</span>`
            : html `<span part=${partMap({ ...parts, counter: true })}></span>`;
    }
    _renderLabelFormat() {
        return formatString(this.labelFormat, this.value, this.max);
    }
    _renderDefaultSlot() {
        const hideDefaultLabel = this.indeterminate ||
            this.hideLabel ||
            this._slots.hasAssignedElements('[default]');
        return html `
      <slot part="label"></slot>
      ${hideDefaultLabel ? nothing : this._renderLabel()}
    `;
    }
}
__decorate([
    query('[part="base"]', true)
], IgcProgressBaseComponent.prototype, "_base", void 0);
__decorate([
    state()
], IgcProgressBaseComponent.prototype, "_percentage", void 0);
__decorate([
    state()
], IgcProgressBaseComponent.prototype, "_progress", void 0);
__decorate([
    state()
], IgcProgressBaseComponent.prototype, "_hasFraction", void 0);
__decorate([
    state()
], IgcProgressBaseComponent.prototype, "_styleInfo", void 0);
__decorate([
    property({ type: Number })
], IgcProgressBaseComponent.prototype, "max", void 0);
__decorate([
    property({ type: Number })
], IgcProgressBaseComponent.prototype, "value", void 0);
__decorate([
    property({ reflect: true })
], IgcProgressBaseComponent.prototype, "variant", void 0);
__decorate([
    property({ type: Number, attribute: 'animation-duration' })
], IgcProgressBaseComponent.prototype, "animationDuration", void 0);
__decorate([
    property({ type: Boolean, reflect: false })
], IgcProgressBaseComponent.prototype, "indeterminate", void 0);
__decorate([
    property({ type: Boolean, attribute: 'hide-label', reflect: false })
], IgcProgressBaseComponent.prototype, "hideLabel", void 0);
__decorate([
    property({ attribute: 'label-format' })
], IgcProgressBaseComponent.prototype, "labelFormat", void 0);
__decorate([
    watch('indeterminate')
], IgcProgressBaseComponent.prototype, "_indeterminateChange", null);
__decorate([
    watch('max')
], IgcProgressBaseComponent.prototype, "_maxChange", null);
__decorate([
    watch('value')
], IgcProgressBaseComponent.prototype, "_valueChange", null);
//# sourceMappingURL=base.js.map