@coreui/angular
Version:
CoreUI Components Library for Angular
71 lines • 11.4 kB
JavaScript
import { NgClass, NgOptimizedImage } from '@angular/common';
import { Component, computed, input } from '@angular/core';
import { TextColorDirective } from '../utilities';
import * as i0 from "@angular/core";
import * as i1 from "../utilities/text-color.directive";
export class AvatarComponent {
constructor() {
/**
* Sets the background color context of the component to one of CoreUI’s themed colors.
* @type Colors
*/
this.color = input();
/**
* Select the shape of the component.
* @type Shapes
*/
this.shape = input();
/**
* Size the component small, large, or extra large.
* @default 'md'
*/
this.size = input('md');
/**
* The alt attribute for the img element alternate text.
* @type string
*/
this.alt = input('');
/**
* The src attribute for the img element.
* @type string
*/
this.src = input();
/**
* Sets the color context of the status indicator to one of CoreUI’s themed colors.
* @type Colors
*/
this.status = input();
/**
* Sets the text color of the component to one of CoreUI’s themed colors.
* via TextColorDirective
* @type TextColors
*/
this.textColor = input();
this.statusClass = computed(() => {
return {
'avatar-status': true,
[`bg-${this.status()}`]: !!this.status()
};
});
this.hostClasses = computed(() => {
return {
avatar: true,
[`avatar-${this.size()}`]: !!this.size(),
[`bg-${this.color()}`]: !!this.color(),
[`${this.shape()}`]: !!this.shape()
};
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: AvatarComponent, isStandalone: true, selector: "c-avatar", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" }, classAttribute: "avatar" }, hostDirectives: [{ directive: i1.TextColorDirective, inputs: ["cTextColor", "textColor"] }], ngImport: i0, template: "<ng-content>\n @if (src()) {\n @defer (prefetch on idle) {\n <img [ngSrc]=\"src() ?? ''\" fill=\"\" class=\"avatar-img\" alt=\"{{alt()}}\" />\n } @placeholder () {\n <svg aria-label=\"Avatar placeholder\"\n focusable=\"false\"\n preserveAspectRatio=\"xMidYMid slice\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"avatar-img\"\n style=\"position: absolute; width: 100%; height: 100%; inset: 0;\">\n <rect fill=\"#868e96\" height=\"100%\" width=\"100%\"></rect>\n </svg>\n }\n }\n</ng-content>\n@if (!!status()) {\n <span [ngClass]=\"statusClass()\"></span>\n}\n\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], deferBlockDependencies: [() => [NgOptimizedImage]] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: AvatarComponent, decorators: [{
type: Component,
args: [{ selector: 'c-avatar', standalone: true, imports: [NgClass, NgOptimizedImage], hostDirectives: [
{
directive: TextColorDirective,
inputs: ['cTextColor: textColor']
}
], host: { class: 'avatar', '[class]': 'hostClasses()' }, template: "<ng-content>\n @if (src()) {\n @defer (prefetch on idle) {\n <img [ngSrc]=\"src() ?? ''\" fill=\"\" class=\"avatar-img\" alt=\"{{alt()}}\" />\n } @placeholder () {\n <svg aria-label=\"Avatar placeholder\"\n focusable=\"false\"\n preserveAspectRatio=\"xMidYMid slice\"\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"avatar-img\"\n style=\"position: absolute; width: 100%; height: 100%; inset: 0;\">\n <rect fill=\"#868e96\" height=\"100%\" width=\"100%\"></rect>\n </svg>\n }\n }\n</ng-content>\n@if (!!status()) {\n <span [ngClass]=\"statusClass()\"></span>\n}\n\n" }]
}] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvcmV1aS1hbmd1bGFyL3NyYy9saWIvYXZhdGFyL2F2YXRhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb3JldWktYW5ndWxhci9zcmMvbGliL2F2YXRhci9hdmF0YXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQzVELE9BQU8sRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBZSxNQUFNLGVBQWUsQ0FBQztBQUd4RSxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxjQUFjLENBQUM7OztBQWVsRCxNQUFNLE9BQU8sZUFBZTtJQWI1QjtRQWNFOzs7V0FHRztRQUNNLFVBQUssR0FBb0MsS0FBSyxFQUFFLENBQUM7UUFFMUQ7OztXQUdHO1FBQ00sVUFBSyxHQUFvQyxLQUFLLEVBQUUsQ0FBQztRQUUxRDs7O1dBR0c7UUFDTSxTQUFJLEdBQW9DLEtBQUssQ0FBcUIsSUFBSSxDQUFDLENBQUM7UUFFakY7OztXQUdHO1FBQ00sUUFBRyxHQUF3QixLQUFLLENBQUMsRUFBRSxDQUFDLENBQUM7UUFFOUM7OztXQUdHO1FBQ00sUUFBRyxHQUFvQyxLQUFLLEVBQUUsQ0FBQztRQUV4RDs7O1dBR0c7UUFDTSxXQUFNLEdBQW9DLEtBQUssRUFBRSxDQUFDO1FBRTNEOzs7O1dBSUc7UUFDTSxjQUFTLEdBQXdDLEtBQUssRUFBRSxDQUFDO1FBRXpELGdCQUFXLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRTtZQUNuQyxPQUFPO2dCQUNMLGVBQWUsRUFBRSxJQUFJO2dCQUNyQixDQUFDLE1BQU0sSUFBSSxDQUFDLE1BQU0sRUFBRSxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRTthQUNkLENBQUM7UUFDL0IsQ0FBQyxDQUFDLENBQUM7UUFFTSxnQkFBVyxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUU7WUFDbkMsT0FBTztnQkFDTCxNQUFNLEVBQUUsSUFBSTtnQkFDWixDQUFDLFVBQVUsSUFBSSxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRTtnQkFDeEMsQ0FBQyxNQUFNLElBQUksQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUU7Z0JBQ3RDLENBQUMsR0FBRyxJQUFJLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFO2FBQ1QsQ0FBQztRQUMvQixDQUFDLENBQUMsQ0FBQztLQUNKOytHQTNEWSxlQUFlO21HQUFmLGVBQWUsbWtDQ25CNUIscXFCQXFCQSw0Q0RYWSxPQUFPLDBGQUFFLGdCQUFnQjs7NEZBU3hCLGVBQWU7a0JBYjNCLFNBQVM7K0JBQ0UsVUFBVSxjQUVSLElBQUksV0FDUCxDQUFDLE9BQU8sRUFBRSxnQkFBZ0IsQ0FBQyxrQkFDcEI7d0JBQ2Q7NEJBQ0UsU0FBUyxFQUFFLGtCQUFrQjs0QkFDN0IsTUFBTSxFQUFFLENBQUMsdUJBQXVCLENBQUM7eUJBQ2xDO3FCQUNGLFFBQ0ssRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLFNBQVMsRUFBRSxlQUFlLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ0NsYXNzLCBOZ09wdGltaXplZEltYWdlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENvbXBvbmVudCwgY29tcHV0ZWQsIGlucHV0LCBJbnB1dFNpZ25hbCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBDb2xvcnMsIFNoYXBlcywgU2l6ZXMsIFRleHRDb2xvcnMgfSBmcm9tICcuLi9jb3JldWkudHlwZXMnO1xuaW1wb3J0IHsgVGV4dENvbG9yRGlyZWN0aXZlIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYy1hdmF0YXInLFxuICB0ZW1wbGF0ZVVybDogJy4vYXZhdGFyLmNvbXBvbmVudC5odG1sJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW05nQ2xhc3MsIE5nT3B0aW1pemVkSW1hZ2VdLFxuICBob3N0RGlyZWN0aXZlczogW1xuICAgIHtcbiAgICAgIGRpcmVjdGl2ZTogVGV4dENvbG9yRGlyZWN0aXZlLFxuICAgICAgaW5wdXRzOiBbJ2NUZXh0Q29sb3I6IHRleHRDb2xvciddXG4gICAgfVxuICBdLFxuICBob3N0OiB7IGNsYXNzOiAnYXZhdGFyJywgJ1tjbGFzc10nOiAnaG9zdENsYXNzZXMoKScgfVxufSlcbmV4cG9ydCBjbGFzcyBBdmF0YXJDb21wb25lbnQge1xuICAvKipcbiAgICogU2V0cyB0aGUgYmFja2dyb3VuZCBjb2xvciBjb250ZXh0IG9mIHRoZSBjb21wb25lbnQgdG8gb25lIG9mIENvcmVVSeKAmXMgdGhlbWVkIGNvbG9ycy5cbiAgICogQHR5cGUgQ29sb3JzXG4gICAqL1xuICByZWFkb25seSBjb2xvcjogSW5wdXRTaWduYWw8Q29sb3JzIHwgdW5kZWZpbmVkPiA9IGlucHV0KCk7XG5cbiAgLyoqXG4gICAqIFNlbGVjdCB0aGUgc2hhcGUgb2YgdGhlIGNvbXBvbmVudC5cbiAgICogQHR5cGUgU2hhcGVzXG4gICAqL1xuICByZWFkb25seSBzaGFwZTogSW5wdXRTaWduYWw8U2hhcGVzIHwgdW5kZWZpbmVkPiA9IGlucHV0KCk7XG5cbiAgLyoqXG4gICAqIFNpemUgdGhlIGNvbXBvbmVudCBzbWFsbCwgbGFyZ2UsIG9yIGV4dHJhIGxhcmdlLlxuICAgKiBAZGVmYXVsdCAnbWQnXG4gICAqL1xuICByZWFkb25seSBzaXplOiBJbnB1dFNpZ25hbDxPbWl0PFNpemVzLCAneHhsJz4+ID0gaW5wdXQ8T21pdDxTaXplcywgJ3h4bCc+PignbWQnKTtcblxuICAvKipcbiAgICogVGhlIGFsdCBhdHRyaWJ1dGUgZm9yIHRoZSBpbWcgZWxlbWVudCBhbHRlcm5hdGUgdGV4dC5cbiAgICogQHR5cGUgc3RyaW5nXG4gICAqL1xuICByZWFkb25seSBhbHQ6IElucHV0U2lnbmFsPHN0cmluZz4gPSBpbnB1dCgnJyk7XG5cbiAgLyoqXG4gICAqIFRoZSBzcmMgYXR0cmlidXRlIGZvciB0aGUgaW1nIGVsZW1lbnQuXG4gICAqIEB0eXBlIHN0cmluZ1xuICAgKi9cbiAgcmVhZG9ubHkgc3JjOiBJbnB1dFNpZ25hbDxzdHJpbmcgfCB1bmRlZmluZWQ+ID0gaW5wdXQoKTtcblxuICAvKipcbiAgICogU2V0cyB0aGUgY29sb3IgY29udGV4dCBvZiB0aGUgc3RhdHVzIGluZGljYXRvciB0byBvbmUgb2YgQ29yZVVJ4oCZcyB0aGVtZWQgY29sb3JzLlxuICAgKiBAdHlwZSBDb2xvcnNcbiAgICovXG4gIHJlYWRvbmx5IHN0YXR1czogSW5wdXRTaWduYWw8Q29sb3JzIHwgdW5kZWZpbmVkPiA9IGlucHV0KCk7XG5cbiAgLyoqXG4gICAqIFNldHMgdGhlIHRleHQgY29sb3Igb2YgdGhlIGNvbXBvbmVudCB0byBvbmUgb2YgQ29yZVVJ4oCZcyB0aGVtZWQgY29sb3JzLlxuICAgKiB2aWEgVGV4dENvbG9yRGlyZWN0aXZlXG4gICAqIEB0eXBlIFRleHRDb2xvcnNcbiAgICovXG4gIHJlYWRvbmx5IHRleHRDb2xvcjogSW5wdXRTaWduYWw8VGV4dENvbG9ycyB8IHVuZGVmaW5lZD4gPSBpbnB1dCgpO1xuXG4gIHJlYWRvbmx5IHN0YXR1c0NsYXNzID0gY29tcHV0ZWQoKCkgPT4ge1xuICAgIHJldHVybiB7XG4gICAgICAnYXZhdGFyLXN0YXR1cyc6IHRydWUsXG4gICAgICBbYGJnLSR7dGhpcy5zdGF0dXMoKX1gXTogISF0aGlzLnN0YXR1cygpXG4gICAgfSBhcyBSZWNvcmQ8c3RyaW5nLCBib29sZWFuPjtcbiAgfSk7XG5cbiAgcmVhZG9ubHkgaG9zdENsYXNzZXMgPSBjb21wdXRlZCgoKSA9PiB7XG4gICAgcmV0dXJuIHtcbiAgICAgIGF2YXRhcjogdHJ1ZSxcbiAgICAgIFtgYXZhdGFyLSR7dGhpcy5zaXplKCl9YF06ICEhdGhpcy5zaXplKCksXG4gICAgICBbYGJnLSR7dGhpcy5jb2xvcigpfWBdOiAhIXRoaXMuY29sb3IoKSxcbiAgICAgIFtgJHt0aGlzLnNoYXBlKCl9YF06ICEhdGhpcy5zaGFwZSgpXG4gICAgfSBhcyBSZWNvcmQ8c3RyaW5nLCBib29sZWFuPjtcbiAgfSk7XG59XG4iLCI8bmctY29udGVudD5cbiAgQGlmIChzcmMoKSkge1xuICAgIEBkZWZlciAocHJlZmV0Y2ggb24gaWRsZSkge1xuICAgICAgPGltZyBbbmdTcmNdPVwic3JjKCkgPz8gJydcIiBmaWxsPVwiXCIgY2xhc3M9XCJhdmF0YXItaW1nXCIgYWx0PVwie3thbHQoKX19XCIgLz5cbiAgICB9IEBwbGFjZWhvbGRlciAoKSB7XG4gICAgICA8c3ZnIGFyaWEtbGFiZWw9XCJBdmF0YXIgcGxhY2Vob2xkZXJcIlxuICAgICAgICAgICBmb2N1c2FibGU9XCJmYWxzZVwiXG4gICAgICAgICAgIHByZXNlcnZlQXNwZWN0UmF0aW89XCJ4TWlkWU1pZCBzbGljZVwiXG4gICAgICAgICAgIHJvbGU9XCJpbWdcIlxuICAgICAgICAgICB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCJcbiAgICAgICAgICAgY2xhc3M9XCJhdmF0YXItaW1nXCJcbiAgICAgICAgICAgc3R5bGU9XCJwb3NpdGlvbjogYWJzb2x1dGU7IHdpZHRoOiAxMDAlOyBoZWlnaHQ6IDEwMCU7IGluc2V0OiAwO1wiPlxuICAgICAgICA8cmVjdCBmaWxsPVwiIzg2OGU5NlwiIGhlaWdodD1cIjEwMCVcIiB3aWR0aD1cIjEwMCVcIj48L3JlY3Q+XG4gICAgICA8L3N2Zz5cbiAgICB9XG4gIH1cbjwvbmctY29udGVudD5cbkBpZiAoISFzdGF0dXMoKSkge1xuICA8c3BhbiBbbmdDbGFzc109XCJzdGF0dXNDbGFzcygpXCI+PC9zcGFuPlxufVxuXG4iXX0=