// #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 { addInheritanceProviderController } from '../../../Controllers/InheritanceProviderController';
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 { listingElementTemplate } from './ListingElementTemplate';
import { LISTING_INHERITANCE_CONTEXT } from './ListingInheritanceContext';
import { listingElementCosmopolitanStyle } from './Themes/ListingElement.Cosmopolitan';
import { listingElementJoyStyle } from './Themes/ListingElement.Joy';
import { listingElementMemphisStyle } from './Themes/ListingElement.Memphis';
// #endregion
/**
 * Listing - A unified list component supporting both ordered and unordered display modes.
 *
 * @description
 * The Listing component renders a list container that can be configured as either ordered (numbered)
 * or unordered (bulleted). It replaces the separate `<ol>` and `<ul>` components with
 * a single unified API. The listing provides its configuration to child `<mosaik-listing-item>`
 * elements via an inheritance context, enabling automatic marker rendering.
 *
 * @name Listing
 * @element mosaik-listing
 * @category Primitives
 *
 * @slot - Default slot for `<mosaik-listing-item>` children.
 *
 * @csspart list - The inner list container element.
 *
 * @cssprop {String} --listing-background-color - The background color of the list container.
 * @cssprop {String} --listing-font-family - The font family for list content.
 * @cssprop {String} --listing-font-letter-spacing - The font letter spacing CSS custom property.
 * @cssprop {String} --listing-font-line-height - The line height for list content.
 * @cssprop {String} --listing-font-size - The font size for list content.
 * @cssprop {String} --listing-font-text-decoration - The font text decoration CSS custom property.
 * @cssprop {String} --listing-font-text-transform - The font text transform CSS custom property.
 * @cssprop {String} --listing-font-weight - The font weight for list content.
 * @cssprop {String} --listing-foreground-color - The text color of the list.
 * @cssprop {String} --listing-gap - The spacing between list items.
 * @cssprop {String} --listing-padding-bottom - The bottom padding inside the list.
 * @cssprop {String} --listing-padding-left - The left padding inside the list.
 * @cssprop {String} --listing-padding-right - The right padding inside the list.
 * @cssprop {String} --listing-padding-top - The top padding inside the list.
 * @cssprop {String} --listing-shadow - The shadow CSS custom property.
 * @cssprop {String} --listing-shadow-blur - The shadow blur CSS custom property.
 * @cssprop {String} --listing-shadow-color - The shadow color CSS custom property.
 * @cssprop {String} --listing-shadow-offset-x - The shadow offset x CSS custom property.
 * @cssprop {String} --listing-shadow-offset-y - The shadow offset y CSS custom property.
 * @cssprop {String} --listing-shadow-spread - The shadow spread CSS custom property.
 * @cssprop {String} --listing-transition-duration - The duration of transition animations.
 * @cssprop {String} --listing-transition-mode - The timing function for transition animations.
 * @cssprop {String} --listing-transition-property - The CSS properties to animate during transitions.
 * @cssprop {String} --listing-translate - The translate CSS custom property.
 *
 * @example
 * Ordered listing:
 * ```html
 * <mosaik-listing type="ordered">
 *   <mosaik-listing-item>First item</mosaik-listing-item>
 *   <mosaik-listing-item>Second item</mosaik-listing-item>
 *   <mosaik-listing-item>Third item</mosaik-listing-item>
 * </mosaik-listing>
 * ```
 *
 * @example
 * Unordered listing with variant:
 * ```html
 * <mosaik-listing type="unordered" variant="primary" appearance="soft">
 *   <mosaik-listing-item>Milk</mosaik-listing-item>
 *   <mosaik-listing-item>Eggs</mosaik-listing-item>
 *   <mosaik-listing-item>Bread</mosaik-listing-item>
 * </mosaik-listing>
 * ```
 *
 * @public
 */
let ListingElement = class ListingElement extends Themeable(Appearanceable(Variantable(Sizeable(Disableable(CustomElement))))) {
    // #region Fields
    _provider = addInheritanceProviderController(this, {
        context: LISTING_INHERITANCE_CONTEXT,
        values: () => ({
            type: this.type,
            numberingType: this.numberingType,
            bulletType: this.bulletType,
            disabled: this.disabled,
            appearance: this.appearance,
            variant: this.variant,
            size: this.size,
            reversed: this.reversed,
            start: this.start
        })
    });
    _type;
    _numberingType;
    _bulletType;
    _reversed;
    _start;
    // #endregion
    // #region Ctor
    constructor() {
        super();
        this._type = ListType.Unordered;
        this._numberingType = ListNumberingType.Decimal;
        this._bulletType = ListBulletType.Disc;
        this._reversed = false;
        this._start = null;
    }
    // #endregion
    // #region Properties
    static get is() {
        return 'mosaik-listing';
    }
    /**
     * Gets or sets the type of listing (ordered or unordered).
     * 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 for ordered listings.
     * 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 for unordered listings.
     * 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 whether the ordering is reversed.
     * Only meaningful when `type` is `'ordered'`.
     * The default value is `false`.
     *
     * @public
     * @attr
     */
    get reversed() {
        return this._reversed;
    }
    set reversed(value) {
        if (this._reversed !== value) {
            this._reversed = value;
            this.requestUpdate('reversed');
        }
    }
    /**
     * Gets or sets the starting number for ordered listings.
     * The default value is `null` (starts at 1).
     *
     * @public
     * @attr
     */
    get start() {
        return this._start;
    }
    set start(value) {
        if (this._start !== value) {
            this._start = value;
            this.requestUpdate('start');
        }
    }
};
__decorate([
    Attribute({
        type: String
    }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], ListingElement.prototype, "type", null);
__decorate([
    Attribute({
        type: String
    }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], ListingElement.prototype, "numberingType", null);
__decorate([
    Attribute({
        type: String
    }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], ListingElement.prototype, "bulletType", null);
__decorate([
    Attribute({
        type: Boolean
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], ListingElement.prototype, "reversed", null);
__decorate([
    Attribute({
        type: Number
    }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], ListingElement.prototype, "start", null);
ListingElement = __decorate([
    Component({
        selector: 'mosaik-listing',
        template: listingElementTemplate,
        themes: {
            joy: listingElementJoyStyle,
            memphis: listingElementMemphisStyle,
            cosmopolitan: listingElementCosmopolitanStyle
        },
        host: {
            'role': 'list'
        },
        imports: []
    }),
    __metadata("design:paramtypes", [])
], ListingElement);
export { ListingElement };
//# sourceMappingURL=ListingElement.js.map