@coreui/angular
Version:
CoreUI Components Library for Angular
77 lines • 9.93 kB
JavaScript
import { Component, computed, input } from '@angular/core';
import { TextBgColorDirective, TextColorDirective } from '../utilities';
import * as i0 from "@angular/core";
import * as i1 from "../utilities/text-color.directive";
import * as i2 from "../utilities/text-bg-color.directive";
export class BadgeComponent {
constructor() {
/**
* Sets the color context of the component to one of CoreUI’s themed colors.
* @type Colors
*/
this.color = input();
/**
* Position badge in one of the corners of a link or button.
* @type BadgePositions
*/
this.position = input();
/**
* Select the shape of the component.
* @type Shapes
*/
this.shape = input();
/**
* Size the component small.
*/
this.size = input();
/**
* Sets the text color of the component to one of CoreUI’s themed colors.
* via TextColorDirective
* @type TextColors
*/
this.textColor = input();
/**
* Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.
* via TextBgColorDirective
* @type Colors
* @since 5.0.0
*/
this.textBgColor = input();
this.hostClasses = computed(() => {
const position = this.position();
const positionClasses = {
'position-absolute': !!position,
'translate-middle': !!position,
'top-0': position?.includes('top'),
'top-100': position?.includes('bottom'),
'start-100': position?.includes('end'),
'start-0': position?.includes('start')
};
return Object.assign({
badge: true,
[`bg-${this.color()}`]: !!this.color(),
[`badge-${this.size()}`]: !!this.size(),
[`${this.shape()}`]: !!this.shape()
}, !!position ? positionClasses : {});
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.12", type: BadgeComponent, isStandalone: true, selector: "c-badge", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", 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 }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, textBgColor: { classPropertyName: "textBgColor", publicName: "textBgColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" }, classAttribute: "badge" }, hostDirectives: [{ directive: i1.TextColorDirective, inputs: ["cTextColor", "textColor"] }, { directive: i2.TextBgColorDirective, inputs: ["cTextBgColor", "textBgColor"] }], ngImport: i0, template: '<ng-content />', isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BadgeComponent, decorators: [{
type: Component,
args: [{
selector: 'c-badge',
template: '<ng-content />',
standalone: true,
hostDirectives: [
{ directive: TextColorDirective, inputs: ['cTextColor: textColor'] },
{ directive: TextBgColorDirective, inputs: ['cTextBgColor: textBgColor'] }
],
host: {
class: 'badge',
'[class]': 'hostClasses()'
}
}]
}] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29yZXVpLWFuZ3VsYXIvc3JjL2xpYi9iYWRnZS9iYWRnZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsS0FBSyxFQUFlLE1BQU0sZUFBZSxDQUFDO0FBRXhFLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxrQkFBa0IsRUFBRSxNQUFNLGNBQWMsQ0FBQzs7OztBQWV4RSxNQUFNLE9BQU8sY0FBYztJQWIzQjtRQWNFOzs7V0FHRztRQUNNLFVBQUssR0FBb0MsS0FBSyxFQUFFLENBQUM7UUFDMUQ7OztXQUdHO1FBQ00sYUFBUSxHQUE0QyxLQUFLLEVBQUUsQ0FBQztRQUVyRTs7O1dBR0c7UUFDTSxVQUFLLEdBQW9DLEtBQUssRUFBRSxDQUFDO1FBRTFEOztXQUVHO1FBQ00sU0FBSSxHQUFrQyxLQUFLLEVBQUUsQ0FBQztRQUV2RDs7OztXQUlHO1FBQ00sY0FBUyxHQUF3QyxLQUFLLEVBQUUsQ0FBQztRQUVsRTs7Ozs7V0FLRztRQUNNLGdCQUFXLEdBQW9DLEtBQUssRUFBRSxDQUFDO1FBRXZELGdCQUFXLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRTtZQUNuQyxNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7WUFDakMsTUFBTSxlQUFlLEdBQUc7Z0JBQ3RCLG1CQUFtQixFQUFFLENBQUMsQ0FBQyxRQUFRO2dCQUMvQixrQkFBa0IsRUFBRSxDQUFDLENBQUMsUUFBUTtnQkFDOUIsT0FBTyxFQUFFLFFBQVEsRUFBRSxRQUFRLENBQUMsS0FBSyxDQUFDO2dCQUNsQyxTQUFTLEVBQUUsUUFBUSxFQUFFLFFBQVEsQ0FBQyxRQUFRLENBQUM7Z0JBQ3ZDLFdBQVcsRUFBRSxRQUFRLEVBQUUsUUFBUSxDQUFDLEtBQUssQ0FBQztnQkFDdEMsU0FBUyxFQUFFLFFBQVEsRUFBRSxRQUFRLENBQUMsT0FBTyxDQUFDO2FBQ3ZDLENBQUM7WUFFRixPQUFPLE1BQU0sQ0FBQyxNQUFNLENBQ2xCO2dCQUNFLEtBQUssRUFBRSxJQUFJO2dCQUNYLENBQUMsTUFBTSxJQUFJLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFO2dCQUN0QyxDQUFDLFNBQVMsSUFBSSxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRTtnQkFDdkMsQ0FBQyxHQUFHLElBQUksQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUU7YUFDcEMsRUFDRCxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxlQUFlLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FDUCxDQUFDO1FBQy9CLENBQUMsQ0FBQyxDQUFDO0tBQ0o7K0dBM0RZLGNBQWM7bUdBQWQsY0FBYyw4akNBWGYsZ0JBQWdCOzs0RkFXZixjQUFjO2tCQWIxQixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxTQUFTO29CQUNuQixRQUFRLEVBQUUsZ0JBQWdCO29CQUMxQixVQUFVLEVBQUUsSUFBSTtvQkFDaEIsY0FBYyxFQUFFO3dCQUNkLEVBQUUsU0FBUyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sRUFBRSxDQUFDLHVCQUF1QixDQUFDLEVBQUU7d0JBQ3BFLEVBQUUsU0FBUyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sRUFBRSxDQUFDLDJCQUEyQixDQUFDLEVBQUU7cUJBQzNFO29CQUNELElBQUksRUFBRTt3QkFDSixLQUFLLEVBQUUsT0FBTzt3QkFDZCxTQUFTLEVBQUUsZUFBZTtxQkFDM0I7aUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIGNvbXB1dGVkLCBpbnB1dCwgSW5wdXRTaWduYWwgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEJhZGdlUG9zaXRpb25zLCBDb2xvcnMsIFNoYXBlcywgVGV4dENvbG9ycyB9IGZyb20gJy4uL2NvcmV1aS50eXBlcyc7XG5pbXBvcnQgeyBUZXh0QmdDb2xvckRpcmVjdGl2ZSwgVGV4dENvbG9yRGlyZWN0aXZlIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYy1iYWRnZScsXG4gIHRlbXBsYXRlOiAnPG5nLWNvbnRlbnQgLz4nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBob3N0RGlyZWN0aXZlczogW1xuICAgIHsgZGlyZWN0aXZlOiBUZXh0Q29sb3JEaXJlY3RpdmUsIGlucHV0czogWydjVGV4dENvbG9yOiB0ZXh0Q29sb3InXSB9LFxuICAgIHsgZGlyZWN0aXZlOiBUZXh0QmdDb2xvckRpcmVjdGl2ZSwgaW5wdXRzOiBbJ2NUZXh0QmdDb2xvcjogdGV4dEJnQ29sb3InXSB9XG4gIF0sXG4gIGhvc3Q6IHtcbiAgICBjbGFzczogJ2JhZGdlJyxcbiAgICAnW2NsYXNzXSc6ICdob3N0Q2xhc3NlcygpJ1xuICB9XG59KVxuZXhwb3J0IGNsYXNzIEJhZGdlQ29tcG9uZW50IHtcbiAgLyoqXG4gICAqIFNldHMgdGhlIGNvbG9yIGNvbnRleHQgb2YgdGhlIGNvbXBvbmVudCB0byBvbmUgb2YgQ29yZVVJ4oCZcyB0aGVtZWQgY29sb3JzLlxuICAgKiBAdHlwZSBDb2xvcnNcbiAgICovXG4gIHJlYWRvbmx5IGNvbG9yOiBJbnB1dFNpZ25hbDxDb2xvcnMgfCB1bmRlZmluZWQ+ID0gaW5wdXQoKTtcbiAgLyoqXG4gICAqIFBvc2l0aW9uIGJhZGdlIGluIG9uZSBvZiB0aGUgY29ybmVycyBvZiBhIGxpbmsgb3IgYnV0dG9uLlxuICAgKiBAdHlwZSBCYWRnZVBvc2l0aW9uc1xuICAgKi9cbiAgcmVhZG9ubHkgcG9zaXRpb246IElucHV0U2lnbmFsPEJhZGdlUG9zaXRpb25zIHwgdW5kZWZpbmVkPiA9IGlucHV0KCk7XG5cbiAgLyoqXG4gICAqIFNlbGVjdCB0aGUgc2hhcGUgb2YgdGhlIGNvbXBvbmVudC5cbiAgICogQHR5cGUgU2hhcGVzXG4gICAqL1xuICByZWFkb25seSBzaGFwZTogSW5wdXRTaWduYWw8U2hhcGVzIHwgdW5kZWZpbmVkPiA9IGlucHV0KCk7XG5cbiAgLyoqXG4gICAqIFNpemUgdGhlIGNvbXBvbmVudCBzbWFsbC5cbiAgICovXG4gIHJlYWRvbmx5IHNpemU6IElucHV0U2lnbmFsPCdzbScgfCB1bmRlZmluZWQ+ID0gaW5wdXQoKTtcblxuICAvKipcbiAgICogU2V0cyB0aGUgdGV4dCBjb2xvciBvZiB0aGUgY29tcG9uZW50IHRvIG9uZSBvZiBDb3JlVUnigJlzIHRoZW1lZCBjb2xvcnMuXG4gICAqIHZpYSBUZXh0Q29sb3JEaXJlY3RpdmVcbiAgICogQHR5cGUgVGV4dENvbG9yc1xuICAgKi9cbiAgcmVhZG9ubHkgdGV4dENvbG9yOiBJbnB1dFNpZ25hbDxUZXh0Q29sb3JzIHwgdW5kZWZpbmVkPiA9IGlucHV0KCk7XG5cbiAgLyoqXG4gICAqIFNldHMgdGhlIGNvbXBvbmVudCdzIGNvbG9yIHNjaGVtZSB0byBvbmUgb2YgQ29yZVVJJ3MgdGhlbWVkIGNvbG9ycywgZW5zdXJpbmcgdGhlIHRleHQgY29sb3IgY29udHJhc3QgYWRoZXJlcyB0byB0aGUgV0NBRyA0LjU6MSBjb250cmFzdCByYXRpbyBzdGFuZGFyZCBmb3IgYWNjZXNzaWJpbGl0eS5cbiAgICogdmlhIFRleHRCZ0NvbG9yRGlyZWN0aXZlXG4gICAqIEB0eXBlIENvbG9yc1xuICAgKiBAc2luY2UgNS4wLjBcbiAgICovXG4gIHJlYWRvbmx5IHRleHRCZ0NvbG9yOiBJbnB1dFNpZ25hbDxDb2xvcnMgfCB1bmRlZmluZWQ+ID0gaW5wdXQoKTtcblxuICByZWFkb25seSBob3N0Q2xhc3NlcyA9IGNvbXB1dGVkKCgpID0+IHtcbiAgICBjb25zdCBwb3NpdGlvbiA9IHRoaXMucG9zaXRpb24oKTtcbiAgICBjb25zdCBwb3NpdGlvbkNsYXNzZXMgPSB7XG4gICAgICAncG9zaXRpb24tYWJzb2x1dGUnOiAhIXBvc2l0aW9uLFxuICAgICAgJ3RyYW5zbGF0ZS1taWRkbGUnOiAhIXBvc2l0aW9uLFxuICAgICAgJ3RvcC0wJzogcG9zaXRpb24/LmluY2x1ZGVzKCd0b3AnKSxcbiAgICAgICd0b3AtMTAwJzogcG9zaXRpb24/LmluY2x1ZGVzKCdib3R0b20nKSxcbiAgICAgICdzdGFydC0xMDAnOiBwb3NpdGlvbj8uaW5jbHVkZXMoJ2VuZCcpLFxuICAgICAgJ3N0YXJ0LTAnOiBwb3NpdGlvbj8uaW5jbHVkZXMoJ3N0YXJ0JylcbiAgICB9O1xuXG4gICAgcmV0dXJuIE9iamVjdC5hc3NpZ24oXG4gICAgICB7XG4gICAgICAgIGJhZGdlOiB0cnVlLFxuICAgICAgICBbYGJnLSR7dGhpcy5jb2xvcigpfWBdOiAhIXRoaXMuY29sb3IoKSxcbiAgICAgICAgW2BiYWRnZS0ke3RoaXMuc2l6ZSgpfWBdOiAhIXRoaXMuc2l6ZSgpLFxuICAgICAgICBbYCR7dGhpcy5zaGFwZSgpfWBdOiAhIXRoaXMuc2hhcGUoKVxuICAgICAgfSxcbiAgICAgICEhcG9zaXRpb24gPyBwb3NpdGlvbkNsYXNzZXMgOiB7fVxuICAgICkgYXMgUmVjb3JkPHN0cmluZywgYm9vbGVhbj47XG4gIH0pO1xufVxuIl19