primeng
Version:
PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,
180 lines (175 loc) • 8.97 kB
JavaScript
export * from 'primeng/types/tag';
import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, InjectionToken, inject, input, booleanAttribute, contentChild, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { SharedModule } from 'primeng/api';
import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { style } from '@primeuix/styles/tag';
import { BaseStyle } from 'primeng/base';
const classes = {
root: ({ instance }) => {
const severity = instance.severity();
const rounded = instance.rounded();
return [
'p-tag p-component',
{
'p-tag-info': severity === 'info',
'p-tag-success': severity === 'success',
'p-tag-warn': severity === 'warn',
'p-tag-danger': severity === 'danger',
'p-tag-secondary': severity === 'secondary',
'p-tag-contrast': severity === 'contrast',
'p-tag-rounded': rounded
}
];
},
icon: 'p-tag-icon',
label: 'p-tag-label'
};
class TagStyle extends BaseStyle {
name = 'tag';
style = style;
classes = classes;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TagStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TagStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TagStyle, decorators: [{
type: Injectable
}] });
/**
*
* Tag component is used to categorize content.
*
* [Live Demo](https://www.primeng.org/tag)
*
* @module tagstyle
*
*/
var TagClasses;
(function (TagClasses) {
/**
* Class name of the root element
*/
TagClasses["root"] = "p-tag";
/**
* Class name of the icon element
*/
TagClasses["icon"] = "p-tag-icon";
/**
* Class name of the label element
*/
TagClasses["label"] = "p-tag-label";
})(TagClasses || (TagClasses = {}));
const TAG_INSTANCE = new InjectionToken('TAG_INSTANCE');
/**
* Tag component is used to categorize content.
* @group Components
*/
class Tag extends BaseComponent {
componentName = 'Tag';
$pcTag = inject(TAG_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
bindDirectiveInstance = inject(Bind, { self: true });
/**
* Severity type of the tag.
* @group Props
*/
severity = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "severity" }] : /* istanbul ignore next */ []));
/**
* Value to display inside the tag.
* @group Props
*/
value = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
/**
* Icon of the tag to display next to the value.
* @group Props
*/
icon = input(/* @ts-ignore */
...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
/**
* Whether the corners of the tag are rounded.
* @group Props
*/
rounded = input(false, { ...(ngDevMode ? { debugName: "rounded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
/**
* Custom icon template.
* @group Templates
*/
iconTemplate = contentChild('icon', { ...(ngDevMode ? { debugName: "iconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
_componentStyle = inject(TagStyle);
dataP = computed(() => {
const severity = this.severity();
const rounded = this.rounded();
return this.cn({
rounded,
[severity]: severity
});
}, /* @ts-ignore */
...(ngDevMode ? [{ debugName: "dataP" }] : /* istanbul ignore next */ []));
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: Tag, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: Tag, isStandalone: true, selector: "p-tag", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cx('root')", "attr.data-p": "dataP()" } }, providers: [TagStyle, { provide: TAG_INSTANCE, useExisting: Tag }, { provide: PARENT_INSTANCE, useExisting: Tag }], queries: [{ propertyName: "iconTemplate", first: true, predicate: ["icon"], isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
<ng-content></ng-content>
(!iconTemplate()) {
(icon()) {
<span [class]="cn(cx('icon'), icon())" [pBind]="ptm('icon')"></span>
}
} {
<span [class]="cx('icon')" [pBind]="ptm('icon')">
<ng-container [ngTemplateOutlet]="iconTemplate()!"></ng-container>
</span>
}
<span [class]="cx('label')" [pBind]="ptm('label')">{{ value() }}</span>
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: Tag, decorators: [{
type: Component,
args: [{
selector: 'p-tag',
standalone: true,
imports: [NgTemplateOutlet, SharedModule, Bind],
template: `
<ng-content></ng-content>
(!iconTemplate()) {
(icon()) {
<span [class]="cn(cx('icon'), icon())" [pBind]="ptm('icon')"></span>
}
} {
<span [class]="cx('icon')" [pBind]="ptm('icon')">
<ng-container [ngTemplateOutlet]="iconTemplate()!"></ng-container>
</span>
}
<span [class]="cx('label')" [pBind]="ptm('label')">{{ value() }}</span>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [TagStyle, { provide: TAG_INSTANCE, useExisting: Tag }, { provide: PARENT_INSTANCE, useExisting: Tag }],
host: {
'[class]': "cx('root')",
'[attr.data-p]': 'dataP()'
},
hostDirectives: [Bind]
}]
}], propDecorators: { severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], iconTemplate: [{ type: i0.ContentChild, args: ['icon', { ...{ descendants: false }, isSignal: true }] }] } });
class TagModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TagModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: TagModule, imports: [Tag, SharedModule], exports: [Tag, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TagModule, imports: [Tag, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TagModule, decorators: [{
type: NgModule,
args: [{
imports: [Tag, SharedModule],
exports: [Tag, SharedModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Tag, TagClasses, TagModule, TagStyle };
//# sourceMappingURL=primeng-tag.mjs.map