@alyle/ui/fesm2022/alyle-ui-avatar.mjs

Minimal Design, a set of components for Angular

import * as i0 from '@angular/core';
import { InjectionToken, Input, Optional, Inject, Directive, NgModule } from '@angular/core';
import * as i1 from '@alyle/ui';
import { st2c, mixinStyleUpdater, mixinBg, mixinColor, mixinRaised, mixinOutlined, mixinElevation, mixinShadowColor, StyleRenderer, LyCommonModule } from '@alyle/ui';

const STYLE_PRIORITY = -2;
const DEFAULT_SIZE = 40;
const DEFAULT_BG = 'action';
const LY_AVATAR_DEFAULT_OPTIONS = new InjectionToken('LY_AVATAR_DEFAULT_OPTIONS');
const STYLES = (theme) => {
    return {
        $name: LyAvatar.и,
        $priority: STYLE_PRIORITY,
        root: (_className) => `${_className}{display:inline-flex;position:relative;font-size:1.25em;flex-shrink:0;align-items:center;user-select:none;border-radius:50%;text-align:center;justify-content:center;}${_className}>img{width:100%;height:100%;border-radius:50%;display:block;object-fit:cover;-webkit-background-clip:padding-box;}${st2c(((theme.avatar
            && theme.avatar.root
            && theme.avatar.root())), `${_className}`)}`
    };
};
/** @docs-private */
class LyAvatarBase {
    constructor(_theme) {
        this._theme = _theme;
    }
}
/** @docs-private */
const LyAvatarMixinBase = mixinStyleUpdater(mixinBg(mixinColor(mixinRaised(mixinOutlined(mixinElevation(mixinShadowColor(LyAvatarBase)))))));
class LyAvatar extends LyAvatarMixinBase {
    /** @docs-private */
    static { this.и = 'LyAvatar'; }
    /** Avatar size */
    set size(val) {
        if (val !== this.size) {
            this._size = val;
            this[0x1] = this.sRenderer.add(`${LyAvatar.и}-size-${val}`, () => ((_className) => `${_className}{width:${val}px;height:${val}px;}`), STYLE_PRIORITY, this[0x1]);
            // const newClass = this._theme.renderStyle(`${LyAvatar.и}.size:${val}`, () => (
            //   (_className: string) => `${_className}{ ;`
            // ), STYLE_PRIORITY);
            // this._sizeClass = this._hostClass.update(newClass, this._sizeClass);
        }
    }
    get size() {
        return this._size;
    }
    constructor(theme, renderer, _elementRef, sRenderer, _defaults) {
        super(theme);
        this._elementRef = _elementRef;
        this.sRenderer = sRenderer;
        this._defaults = _defaults;
        /** @docs-private */
        this.classes = this._theme.renderStyleSheet(STYLES);
        this.setAutoContrast();
        renderer.addClass(_elementRef.nativeElement, this.classes.root);
    }
    ngOnChanges() {
        this.updateStyle(this._elementRef.nativeElement);
    }
    ngOnInit() {
        if (!this.bg) {
            this.bg = (this._defaults && this._defaults.bg) || DEFAULT_BG;
            this.ngOnChanges();
        }
        if (!this.size) {
            this.size = (this._defaults && this._defaults.size) || DEFAULT_SIZE;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyAvatar, deps: [{ token: i1.LyTheme2 }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.StyleRenderer }, { token: LY_AVATAR_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: LyAvatar, isStandalone: false, selector: "ly-avatar", inputs: { bg: "bg", color: "color", raised: "raised", outlined: "outlined", elevation: "elevation", shadowColor: "shadowColor", size: "size" }, providers: [
            StyleRenderer
        ], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyAvatar, decorators: [{
            type: Directive,
            args: [{
                    selector: 'ly-avatar',
                    inputs: [
                        'bg',
                        'color',
                        'raised',
                        'outlined',
                        'elevation',
                        'shadowColor',
                    ],
                    providers: [
                        StyleRenderer
                    ],
                    standalone: false
                }]
        }], ctorParameters: () => [{ type: i1.LyTheme2 }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.StyleRenderer }, { type: undefined, decorators: [{
                    type: Optional
                }, {
                    type: Inject,
                    args: [LY_AVATAR_DEFAULT_OPTIONS]
                }] }], propDecorators: { size: [{
                type: Input
            }] } });

class LyAvatarModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: LyAvatarModule, declarations: [LyAvatar], exports: [LyAvatar, LyCommonModule] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyAvatarModule, imports: [LyCommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LyAvatarModule, decorators: [{
            type: NgModule,
            args: [{
                    exports: [LyAvatar, LyCommonModule],
                    declarations: [LyAvatar]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { LY_AVATAR_DEFAULT_OPTIONS, LyAvatar, LyAvatarBase, LyAvatarMixinBase, LyAvatarModule, STYLES };
//# sourceMappingURL=alyle-ui-avatar.mjs.map