import { __esDecorate, __runInitializers } from "tslib";
import { html } from 'lit';
import { property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { styleMap } from 'lit/directives/style-map.js';
import { UiRange } from './Range.js';
import { isDisabled, setDisabled } from '../../../lib/disabled.js';
import { floatConverter } from '../../../lib/AttributeConverters.js';
let UiProgress = (() => {
    let _classSuper = UiRange;
    let _instanceExtraInitializers = [];
    let _set_disabled_decorators;
    let _secondaryProgress_decorators;
    let _secondaryProgress_initializers = [];
    let _secondaryProgress_extraInitializers = [];
    let _indeterminate_decorators;
    let _indeterminate_initializers = [];
    let _indeterminate_extraInitializers = [];
    return class UiProgress extends _classSuper {
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _set_disabled_decorators = [property({ reflect: true, type: Boolean })];
            _secondaryProgress_decorators = [property({ type: Number, converter: floatConverter })];
            _indeterminate_decorators = [property({ reflect: true, type: Boolean })];
            __esDecorate(this, null, _set_disabled_decorators, { kind: "setter", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
            __esDecorate(this, null, _secondaryProgress_decorators, { kind: "accessor", name: "secondaryProgress", static: false, private: false, access: { has: obj => "secondaryProgress" in obj, get: obj => obj.secondaryProgress, set: (obj, value) => { obj.secondaryProgress = value; } }, metadata: _metadata }, _secondaryProgress_initializers, _secondaryProgress_extraInitializers);
            __esDecorate(this, null, _indeterminate_decorators, { kind: "accessor", name: "indeterminate", static: false, private: false, access: { has: obj => "indeterminate" in obj, get: obj => obj.indeterminate, set: (obj, value) => { obj.indeterminate = value; } }, metadata: _metadata }, _indeterminate_initializers, _indeterminate_extraInitializers);
            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        secondaryRatioInternal = __runInitializers(this, _instanceExtraInitializers);
        get disabled() {
            return isDisabled(this);
        }
        /**
         * When set, the button is a disabled state.
         * @attribute
         */
        set disabled(value) {
            const old = isDisabled(this);
            setDisabled(this, value);
            this.requestUpdate('disabled', old);
        }
        #secondaryProgress_accessor_storage = __runInitializers(this, _secondaryProgress_initializers, void 0);
        /**
         * The number that represents the current secondary progress.
         * @attr
         */
        get secondaryProgress() { return this.#secondaryProgress_accessor_storage; }
        set secondaryProgress(value) { this.#secondaryProgress_accessor_storage = value; }
        #indeterminate_accessor_storage = (__runInitializers(this, _secondaryProgress_extraInitializers), __runInitializers(this, _indeterminate_initializers, void 0));
        /**
         * Use an indeterminate progress indicator.
         * @attr
         */
        get indeterminate() { return this.#indeterminate_accessor_storage; }
        set indeterminate(value) { this.#indeterminate_accessor_storage = value; }
        /**
         * @returns The ratio of the secondary progress.
         */
        get secondaryRatio() {
            return this.secondaryRatioInternal || 0;
        }
        connectedCallback() {
            super.connectedCallback();
            if (!this.hasAttribute('role')) {
                this.setAttribute('role', 'progressbar');
            }
        }
        willUpdate(cp) {
            super.willUpdate(cp);
            if (cp.has('secondaryProgress') || cp.has('indeterminate')) {
                this.rangeChanged();
            }
        }
        updated(cp) {
            if (cp.has('min')) {
                this.setAttribute('aria-valuemin', String(this.min));
            }
            if (cp.has('max')) {
                this.setAttribute('aria-valuemax', String(this.max));
            }
            if (cp.has('indeterminate') || cp.has('value')) {
                if (this.indeterminate) {
                    this.removeAttribute('aria-valuenow');
                }
                else {
                    this.setAttribute('aria-valuenow', String(this.value));
                }
            }
        }
        rangeChanged() {
            super.rangeChanged();
            const { secondaryProgress: sp } = this;
            if (typeof sp === 'number') {
                const secondary = this.clampValue(sp);
                this.secondaryRatioInternal = this.computeRatio(secondary) * 100;
            }
            else {
                this.secondaryRatioInternal = undefined;
            }
        }
        render() {
            const { secondaryRatio = 0, indeterminate = false, ratio = 0, disabled = false } = this;
            const primaryClasses = {
                primary: true,
                indeterminate: !disabled && indeterminate,
                linear: !indeterminate,
            };
            const primaryStyle = {};
            if (!indeterminate) {
                primaryStyle.transform = `scaleX(${ratio / 100})`;
            }
            const secondaryStyle = {
                transform: `scaleX(${secondaryRatio / 100})`,
            };
            const containerClasses = {
                container: true,
                disabled,
            };
            return html `
      <div class="${classMap(containerClasses)}">
        <div class="secondary" ?hidden="${secondaryRatio === 0}" style="${styleMap(secondaryStyle)}"></div>
        <div class="${classMap(primaryClasses)}" style="${styleMap(primaryStyle)}"></div>
      </div>
    `;
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _indeterminate_extraInitializers);
        }
    };
})();
export default UiProgress;
//# sourceMappingURL=UiProgress.js.map