// #region Imports
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;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { Appearanceable } from '../../../Behaviors/Appearanceable';
import { Disableable } from '../../../Behaviors/Disableable';
import { Sizeable } from '../../../Behaviors/Sizeable';
import { Themeable } from '../../../Behaviors/Themeable';
import { Variantable } from '../../../Behaviors/Variantable';
import { Attribute } from '../../../Decorators/AttributeDecorator';
import { Component } from '../../../Decorators/ComponentDecorator';
import { ListBulletType } from '../../../Types/ListBulletType';
import { ListNumberingType } from '../../../Types/ListNumberingType';
import { ListType } from '../../../Types/ListType';
import { CustomElement } from '../../Abstracts/CustomElement';
import { markerElementTemplate } from './MarkerElementTemplate';
import { markerElementCosmopolitanStyle } from './Themes/MarkerElement.Cosmopolitan';
import { markerElementJoyStyle } from './Themes/MarkerElement.Joy';
import { markerElementMemphisStyle } from './Themes/MarkerElement.Memphis';
// #endregion
/**
 * Marker - A standalone marker element with a round badge-like appearance.
 *
 * @description
 * The Marker component renders either a numbered/lettered indicator for ordered lists or
 * a bullet glyph for unordered lists. It uses the same visual design as `BadgeElement` but
 * is always round (`border-radius: 50%`). The component is standalone and reusable in
 * listings, timelines, steps, tables of contents, and navigation elements.
 *
 * @name Marker
 * @element mosaik-marker
 * @category Primitives
 *
 * @csspart label - The text content of the marker (number, letter, or bullet).
 *
 * @cssprop {String} --marker-background-color - The background color of the marker.
 * @cssprop {String} --marker-foreground-color - The text color of the marker.
 * @cssprop {String} --marker-border-color - The border color of the marker.
 * @cssprop {String} --marker-border-radius - The border radius (always `50%` by default).
 * @cssprop {String} --marker-border-width - The border width.
 * @cssprop {String} --marker-border-style - The border style.
 * @cssprop {String} --marker-font-family - The font family for the marker label.
 * @cssprop {String} --marker-font-size - The font size for the marker label.
 * @cssprop {String} --marker-font-weight - The font weight for the marker label.
 * @cssprop {String} --marker-font-line-height - The line height for the marker label.
 * @cssprop {String} --marker-font-letter-spacing - The letter spacing for the marker label.
 * @cssprop {String} --marker-height - The height of the marker.
 * @cssprop {String} --marker-gap - The gap inside the marker.
 * @cssprop {String} --marker-padding-top - The top padding inside the marker.
 * @cssprop {String} --marker-padding-right - The right padding inside the marker.
 * @cssprop {String} --marker-padding-bottom - The bottom padding inside the marker.
 * @cssprop {String} --marker-padding-left - The left padding inside the marker.
 * @cssprop {String} --marker-transition-duration - The transition duration.
 * @cssprop {String} --marker-transition-mode - The transition timing function.
 * @cssprop {String} --marker-transition-property - The transition properties.
 *
 * @example
 * Ordered marker (number):
 * ```html
 * <mosaik-marker type="ordered" index="1"></mosaik-marker>
 * ```
 *
 * @example
 * Unordered marker (bullet):
 * ```html
 * <mosaik-marker type="unordered" bullet-type="disc"></mosaik-marker>
 * ```
 *
 * @example
 * Styled marker with variant:
 * ```html
 * <mosaik-marker type="ordered" index="3" variant="primary" appearance="solid"></mosaik-marker>
 * ```
 *
 * @public
 */
let MarkerElement = class MarkerElement extends Themeable(Appearanceable(Variantable(Sizeable(Disableable(CustomElement))))) {
    // #region Fields
    _type;
    _numberingType;
    _bulletType;
    _index;
    // #endregion
    // #region Ctor
    constructor() {
        super();
        this._type = ListType.Unordered;
        this._numberingType = ListNumberingType.Decimal;
        this._bulletType = ListBulletType.Disc;
        this._index = 1;
    }
    // #endregion
    // #region Properties
    static get is() {
        return 'mosaik-marker';
    }
    /**
     * Gets or sets the type of listing this marker represents.
     * The default value is `'unordered'`.
     *
     * @public
     * @attr
     */
    get type() {
        return this._type;
    }
    set type(value) {
        if (this._type !== value) {
            this._type = value;
            this.requestUpdate('type');
        }
    }
    /**
     * Gets or sets the numbering type used when `type` is `'ordered'`.
     * The default value is `'1'` (decimal).
     *
     * @public
     * @attr numbering-type
     */
    get numberingType() {
        return this._numberingType;
    }
    set numberingType(value) {
        if (this._numberingType !== value) {
            this._numberingType = value;
            this.requestUpdate('numberingType');
        }
    }
    /**
     * Gets or sets the bullet type used when `type` is `'unordered'`.
     * The default value is `'disc'`.
     *
     * @public
     * @attr bullet-type
     */
    get bulletType() {
        return this._bulletType;
    }
    set bulletType(value) {
        if (this._bulletType !== value) {
            this._bulletType = value;
            this.requestUpdate('bulletType');
        }
    }
    /**
     * Gets or sets the ordinal index (1-based) of the marker.
     * Only relevant when `type` is `'ordered'`.
     * The default value is `1`.
     *
     * @public
     * @attr
     */
    get index() {
        return this._index;
    }
    set index(value) {
        if (this._index !== value) {
            this._index = value;
            this.requestUpdate('index');
        }
    }
    // #endregion
    // #region Methods
    /**
     * Formats the index according to the current `numberingType`.
     *
     * @returns The formatted marker label string.
     *
     * @internal
     */
    formatIndex() {
        switch (this._numberingType) {
            case ListNumberingType.Decimal:
                return String(this._index);
            case ListNumberingType.LowerAlpha:
                return this.toAlpha(this._index, false);
            case ListNumberingType.UpperAlpha:
                return this.toAlpha(this._index, true);
            case ListNumberingType.LowerRoman:
                return this.toRoman(this._index, false);
            case ListNumberingType.UpperRoman:
                return this.toRoman(this._index, true);
            default:
                return String(this._index);
        }
    }
    /**
     * Returns the bullet glyph corresponding to the current `bulletType`.
     *
     * @returns The bullet character string.
     *
     * @internal
     */
    getBulletGlyph() {
        switch (this._bulletType) {
            case ListBulletType.Disc:
                return '\u2022';
            case ListBulletType.Circle:
                return '\u25CB';
            case ListBulletType.Square:
                return '\u25A0';
            case ListBulletType.Dash:
                return '\u2013';
            case ListBulletType.None:
                return '';
            default:
                return '\u2022';
        }
    }
    /**
     * Converts a 1-based number to an alphabetical representation.
     *
     * @param value - The 1-based ordinal value.
     * @param upper - Whether to return uppercase letters.
     * @returns The alphabetical representation.
     */
    toAlpha(value, upper) {
        const base = upper ? 65 : 97;
        let result = '';
        let remaining = value;
        while (remaining > 0) {
            remaining--;
            result = String.fromCharCode(base + (remaining % 26)) + result;
            remaining = Math.floor(remaining / 26);
        }
        return result;
    }
    /**
     * Converts a number to a Roman numeral representation.
     *
     * @param value - The ordinal value.
     * @param upper - Whether to return uppercase Roman numerals.
     * @returns The Roman numeral representation.
     */
    toRoman(value, upper) {
        const pairs = [
            [1000, 'M'], [900, 'CM'], [500, 'D'], [400, 'CD'],
            [100, 'C'], [90, 'XC'], [50, 'L'], [40, 'XL'],
            [10, 'X'], [9, 'IX'], [5, 'V'], [4, 'IV'], [1, 'I']
        ];
        let result = '';
        let remaining = value;
        for (const [threshold, numeral] of pairs) {
            while (remaining >= threshold) {
                result += numeral;
                remaining -= threshold;
            }
        }
        return upper ? result : result.toLowerCase();
    }
};
__decorate([
    Attribute({
        type: String
    }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], MarkerElement.prototype, "type", null);
__decorate([
    Attribute({
        type: String
    }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], MarkerElement.prototype, "numberingType", null);
__decorate([
    Attribute({
        type: String
    }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], MarkerElement.prototype, "bulletType", null);
__decorate([
    Attribute({
        type: Number
    }),
    __metadata("design:type", Number),
    __metadata("design:paramtypes", [Number])
], MarkerElement.prototype, "index", null);
MarkerElement = __decorate([
    Component({
        selector: 'mosaik-marker',
        template: markerElementTemplate,
        themes: {
            joy: markerElementJoyStyle,
            memphis: markerElementMemphisStyle,
            cosmopolitan: markerElementCosmopolitanStyle
        },
        imports: []
    }),
    __metadata("design:paramtypes", [])
], MarkerElement);
export { MarkerElement };
//# sourceMappingURL=MarkerElement.js.map