// #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 { DomServiceLocator } from '../../../../Dom/Dom';
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 { addInheritanceConsumerController } from '../../../Controllers/InheritanceConsumerController';
import { Attribute } from '../../../Decorators/AttributeDecorator';
import { Component } from '../../../Decorators/ComponentDecorator';
import { Property } from '../../../Decorators/PropertyDecorator';
import { Watch } from '../../../Decorators/WatchDecorator';
import { CustomElement } from '../../Abstracts/CustomElement';
import { TextElement } from '../../Primitives/Text/TextElement';
import { IconElement } from '../Icon/IconElement';
import { ImageElement } from '../Image/ImageElement';
import { avatarElementTemplate } from './AvatarElementTemplate';
import { AVATAR_GROUP_INHERITANCE_CONTEXT } from './AvatarGroupInheritanceContext';
import { avatarElementCosmopolitanStyle } from './Themes/AvatarElement.Cosmopolitan';
import { avatarElementJoyStyle } from './Themes/AvatarElement.Joy';
import { avatarElementMemphisStyle } from './Themes/AvatarElement.Memphis';
// #endregion
/**
 * Avatar - A circular profile representation displaying user identity through images, initials, or icons.
 *
 * Renders user avatars with multiple fallback options: image, text initials, or icon.
 * Automatically generates initials from names and provides consistent sizing across different contexts.
 * Supports status badges, various appearances, and accessibility features for user identification.
 *
 * @name AvatarElement
 * @element mosaik-avatar
 * @category Media
 *
 * @slot - Default content for avatar display (overrides automatic text/icon generation)
 * @slot badge - Status indicator or notification badge positioned on the avatar
 *
 * @csspart image - The avatar image container when using image source
 * @csspart icon - The fallback icon element when no image or text available
 * @csspart text - The text/initials container for text-based avatars
 * @csspart backplate - The circular background container for all avatar content
 *
 * @cssprop {String} --avatar-size - Size of the avatar (width and height)
 * @cssprop {Color} --avatar-background-color - Background color for text/icon avatars
 * @cssprop {Color} --avatar-foreground-color - Text and icon color
 * @cssprop {String} --avatar-border-radius - Border radius (typically 50% for circular)
 * @cssprop {String} --avatar-font-size - Font size for initials text
 * @cssprop {String} --avatar-font-weight - Font weight for initials text
 *
 * @dependency TextElement - For rendering initials and text content
 * @dependency IconElement - For fallback icon display
 * @dependency ImageElement - For profile image rendering
 *
 * @example
 * ```html
 * <!-- Image avatar -->
 * <mosaik-avatar src="user-photo.jpg" alt="John Doe"></mosaik-avatar>
 *
 * <!-- Text initials avatar -->
 * <mosaik-avatar text="Jane Smith"></mosaik-avatar>
 *
 * <!-- Custom initials -->
 * <mosaik-avatar initials="JS"></mosaik-avatar>
 *
 * <!-- Avatar with status badge -->
 * <mosaik-avatar text="Alex Johnson">
 *   <mosaik-badge slot="badge" appearance="success" dot></mosaik-badge>
 * </mosaik-avatar>
 *
 * <!-- Different sizes and appearances -->
 * <mosaik-avatar text="Sarah Wilson" size="sm" appearance="soft"></mosaik-avatar>
 * <mosaik-avatar text="Mike Brown" size="lg" appearance="solid"></mosaik-avatar>
 *
 * <!-- Icon fallback avatar -->
 * <mosaik-avatar icon="user-icon-path"></mosaik-avatar>
 * ```
 *
 * @public
 */
let AvatarElement = class AvatarElement extends Themeable(Sizeable(Appearanceable(Variantable(Disableable(CustomElement))))) {
    // #region Fields
    _inheritance = addInheritanceConsumerController(this, {
        context: AVATAR_GROUP_INHERITANCE_CONTEXT
    });
    _text;
    _textAccessor;
    _icon;
    _src;
    _displayMode;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        this._text = '';
        this._textAccessor = (text) => {
            // gets the first letter of each word
            // e.g. "John Peter Doe" => "JD"
            // e.g. "John Doe" => "JD"
            // e.g. "John" => "Jo"
            // e.g. "J" => "J"
            // Split the text by spaces
            const words = text.split(' ');
            if (words.length > 1) {
                // If there are multiple words, return the first letter of the first word
                // and the first letter of the last word
                return words[0][0] + words[words.length - 1][0];
            }
            // If there's only one word, return the first two characters
            return text.substring(0, 2);
        };
        this._icon = '';
        this._src = '';
        this._displayMode = null;
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `is` property.
     *
     * @public
     * @static
     * @readonly
    */
    static get is() {
        return 'mosaik-avatar';
    }
    /**
     * @public
     */
    get text() {
        return this._text;
    }
    set text(value) {
        if (this._text !== value) {
            this._text = value;
            this.requestUpdate('text');
        }
    }
    /**
     * @public
     */
    get icon() {
        return this._icon;
    }
    set icon(value) {
        if (this._icon !== value) {
            this._icon = value;
            this.requestUpdate('icon');
        }
    }
    /**
     * @public
     */
    get src() {
        return this._src;
    }
    set src(value) {
        if (this._src !== value) {
            this._src = value;
            this.requestUpdate('src');
        }
    }
    /**
     * Returns the `displayMode` property.
     *
     * @public
     * @readonly
     * @attr
     */
    get displayMode() {
        return this._displayMode;
    }
    set displayMode(value) {
        if (this._displayMode !== value) {
            this._displayMode = value;
            this.requestUpdate('displayMode');
        }
    }
    /**
     * Gets or sets the `textAccessor` property.
     *
     * @public
     * @readonly
     */
    get textAccessor() {
        return this._textAccessor;
    }
    set textAccessor(value) {
        if (this._textAccessor !== value) {
            this._textAccessor = value;
            this.requestUpdate('textAccessor');
        }
    }
    /**
     * @public
     * @override
     */
    get size() {
        return this._inheritance.get('size', super.size);
    }
    set size(value) {
        this._inheritance.markExplicit('size');
        super.size = value;
    }
    /**
     * @public
     * @override
     */
    get disabled() {
        return this._inheritance.get('disabled', super.disabled);
    }
    set disabled(value) {
        this._inheritance.markExplicit('disabled');
        super.disabled = value;
    }
    /**
     * @public
     * @override
     */
    get variant() {
        return this._inheritance.get('variant', super.variant);
    }
    set variant(value) {
        this._inheritance.markExplicit('variant');
        super.variant = value;
    }
    /**
     * @public
     * @override
     */
    get appearance() {
        return this._inheritance.get('appearance', super.appearance);
    }
    set appearance(value) {
        this._inheritance.markExplicit('appearance');
        super.appearance = value;
    }
    /**
     * Returns the `hasBadge` property.
     *
     * @public
     * @readonly
     * @attr
     */
    get hasBadge() {
        const slotElement = DomServiceLocator.current.findDescendant(this.renderRoot, 'slot[name="badge"]');
        return slotElement ? slotElement.assignedElements().length > 0 : false;
    }
    // #endregion
    // #region Methods
    /**
     * @public
     *
     * changes the text accessor.
     */
    changeTextAccessor(accessor) {
        this.textAccessor = accessor;
    }
    /**
     * @protected
     */
    onTextPropertyChanged() {
        this.displayMode = this.getDisplayMode();
    }
    /**
     * @protected
     */
    onIconPropertyChanged() {
        this.displayMode = this.getDisplayMode();
    }
    /**
     * @protected
     */
    onSrcPropertyChanged() {
        this.displayMode = this.getDisplayMode();
    }
    /**
     * @private
     */
    getDisplayMode() {
        if (this.src) {
            return 'image';
        }
        if (this.icon) {
            return 'icon';
        }
        if (this.text) {
            return 'text';
        }
        return null;
    }
};
__decorate([
    Property({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], AvatarElement.prototype, "text", null);
__decorate([
    Property({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], AvatarElement.prototype, "icon", null);
__decorate([
    Property({ type: String }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], AvatarElement.prototype, "src", null);
__decorate([
    Attribute({ type: String }),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [Object])
], AvatarElement.prototype, "displayMode", null);
__decorate([
    Property({ type: Function }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Function])
], AvatarElement.prototype, "textAccessor", null);
__decorate([
    Attribute({
        type: Boolean,
        useDefault: true
    }),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [])
], AvatarElement.prototype, "hasBadge", null);
__decorate([
    Watch('text'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], AvatarElement.prototype, "onTextPropertyChanged", null);
__decorate([
    Watch('icon'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], AvatarElement.prototype, "onIconPropertyChanged", null);
__decorate([
    Watch('src'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], AvatarElement.prototype, "onSrcPropertyChanged", null);
AvatarElement = __decorate([
    Component({
        selector: 'mosaik-avatar',
        template: avatarElementTemplate,
        themes: {
            joy: avatarElementJoyStyle,
            memphis: avatarElementMemphisStyle,
            cosmopolitan: avatarElementCosmopolitanStyle
        },
        imports: [
            TextElement,
            IconElement,
            ImageElement
        ]
    }),
    __metadata("design:paramtypes", [])
], AvatarElement);
export { AvatarElement };
//# sourceMappingURL=AvatarElement.js.map