@3mo/number-fields/dist/FieldPercent.js

A set of number field web components.

import { __decorate } from "tslib";
import { component, css, html, property } from '@a11d/lit';
import { FieldNumber } from './FieldNumber.js';
/**
 * @element mo-field-percent
 * @attr percentSign - The percent sign of the field.
 */
let FieldPercent = class FieldPercent extends FieldNumber {
    constructor() {
        super(...arguments);
        this.percentSign = '%';
        this.min = 0;
        this.max = 100;
        this.format = (value) => value.format({
            useGrouping: false,
            minimumFractionDigits: 0,
            maximumFractionDigits: 2,
        });
    }
    static get styles() {
        return css `
			${super.styles}

			span[slot=end] {
				font-size: 20px;
				font-weight: 600;
				color: var(--mo-color-gray);
				user-select: none;
			}
		`;
    }
    get endSlotTemplate() {
        return html `
			<span slot='end' @click=${() => this.focus()}>${this.percentSign}</span>
			${super.endSlotTemplate}
		`;
    }
};
__decorate([
    property()
], FieldPercent.prototype, "percentSign", void 0);
FieldPercent = __decorate([
    component('mo-field-percent')
], FieldPercent);
export { FieldPercent };