igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
1 lines • 10.9 kB
Source Map (JSON)
{"version":3,"file":"igniteui-angular-badge.mjs","sources":["../../../projects/igniteui-angular/badge/src/badge/badge.component.ts","../../../projects/igniteui-angular/badge/src/badge/badge.component.html","../../../projects/igniteui-angular/badge/src/badge/badge.module.ts","../../../projects/igniteui-angular/badge/src/igniteui-angular-badge.ts"],"sourcesContent":["import { booleanAttribute, Component, HostBinding, Input } from '@angular/core';\nimport { IgxIconComponent } from 'igniteui-angular/icon';\n\nlet NEXT_ID = 0;\n\n/**\n * Determines the igxBadge type\n */\nexport const IgxBadgeType = {\n PRIMARY: 'primary',\n INFO: 'info',\n SUCCESS: 'success',\n WARNING: 'warning',\n ERROR: 'error'\n} as const;\nexport type IgxBadgeType = (typeof IgxBadgeType)[keyof typeof IgxBadgeType];\n/**\n * Badge provides visual notifications used to decorate avatars, menus, etc.\n *\n * @igxModule IgxBadgeModule\n *\n * @igxTheme igx-badge-theme\n *\n * @igxKeywords badge, icon, notification\n *\n * @igxGroup Data Entry & Display\n *\n * @remarks\n * The Ignite UI Badge is used to decorate avatars, navigation menus, or other components in the\n * application when visual notification is needed. They are usually designed as icons with a predefined\n * style to communicate information, success, warnings, or errors.\n *\n * @example\n * ```html\n * <igx-avatar>\n * <igx-badge icon=\"check\" type=\"success\"></igx-badge>\n * </igx-avatar>\n */\n@Component({\n selector: 'igx-badge',\n templateUrl: 'badge.component.html',\n imports: [IgxIconComponent]\n})\nexport class IgxBadgeComponent {\n\n /**\n * Sets/gets the `id` of the badge.\n *\n * @remarks\n * If not set, the `id` will have value `\"igx-badge-0\"`.\n *\n * @example\n * ```html\n * <igx-badge id=\"igx-badge-2\"></igx-badge>\n * ```\n */\n @HostBinding('attr.id')\n @Input()\n public id = `igx-badge-${NEXT_ID++}`;\n\n /**\n * Sets/gets the type of the badge.\n *\n * @remarks\n * Allowed values are `primary`, `info`, `success`, `warning`, `error`.\n * Providing an invalid value won't display a badge.\n *\n * @example\n * ```html\n * <igx-badge type=\"success\"></igx-badge>\n * ```\n */\n @Input()\n public type: string | IgxBadgeType = IgxBadgeType.PRIMARY;\n\n /**\n * Sets/gets the value to be displayed inside the badge.\n *\n * @remarks\n * If an `icon` property is already set the `icon` will be displayed.\n * If neither a `value` nor an `icon` is set the content of the badge will be empty.\n *\n * @example\n * ```html\n * <igx-badge value=\"11\"></igx-badge>\n * ```\n */\n @Input()\n public value: string | number = '';\n\n /**\n * Sets/gets an icon for the badge from the material icons set.\n *\n * @remarks\n * Has priority over the `value` property.\n * If neither a `value` nor an `icon` is set the content of the badge will be empty.\n * Providing an invalid value won't display anything.\n *\n * @example\n * ```html\n * <igx-badge icon=\"check\"></igx-badge>\n * ```\n */\n @Input()\n public icon: string;\n\n /**\n * The name of the icon set. Used in case the icon is from a different icon set.\n */\n @Input()\n public iconSet: string;\n\n /**\n * Sets/gets the role attribute value.\n *\n * @example\n * ```typescript\n * @ViewChild(\"MyBadge\", { read: IgxBadgeComponent })\n * public badge: IgxBadgeComponent;\n *\n * badge.role = 'status';\n * ```\n */\n @HostBinding('attr.role')\n public role = 'status';\n\n /**\n * Sets/gets the css class to use on the badge.\n *\n * @example\n * ```typescript\n * @ViewChild(\"MyBadge\", { read: IgxBadgeComponent })\n * public badge: IgxBadgeComponent;\n *\n * badge.cssClass = 'my-badge-class';\n * ```\n */\n @HostBinding('class.igx-badge')\n public cssClass = 'igx-badge';\n\n /**\n * Sets a square shape to the badge, if `shape` is set to `square`.\n * By default the shape of the badge is rounded.\n *\n * @example\n * ```html\n * <igx-badge shape=\"square\"></igx-badge>\n * ```\n */\n @Input()\n public shape: 'rounded' | 'square' = 'rounded';\n\n /** @hidden @internal */\n @HostBinding('class.igx-badge--square')\n public get _squareShape(): boolean {\n if (!this.dot) {\n return this.shape === 'square';\n }\n }\n\n /**\n * Sets/gets the aria-label attribute value.\n *\n * @example\n * ```typescript\n * @ViewChild(\"MyBadge\", { read: IgxBadgeComponent })\n * public badge: IgxBadgeComponent;\n *\n * badge.label = 'badge';\n * ```\n */\n @HostBinding('attr.aria-label')\n public label = 'badge';\n\n /**\n * Sets/gets whether the badge is outlined.\n * Default value is `false`.\n *\n * @example\n * ```html\n * <igx-badge outlined></igx-badge>\n * ```\n */\n @Input({transform: booleanAttribute})\n @HostBinding('class.igx-badge--outlined')\n public outlined = false;\n\n /**\n * Sets/gets whether the badge is displayed as a dot.\n * When true, the badge will be rendered as a minimal 8px indicator without any content.\n * Default value is `false`.\n *\n * @example\n * ```html\n * <igx-badge dot type=\"success\"></igx-badge>\n * ```\n */\n @Input({transform: booleanAttribute})\n @HostBinding('class.igx-badge--dot')\n public dot = false;\n\n /**\n * Defines a human-readable, accessor, author-localized description for\n * the `type` and the `icon` or `value` of the element.\n *\n * @hidden\n * @internal\n */\n @HostBinding('attr.aria-roledescription')\n public get roleDescription() {\n if (this.icon) {\n return this.type + ' type badge with icon type ' + this.icon;\n } else if (this.value || this.value === 0) {\n return this.type + ' badge type with value ' + this.value;\n }\n return this.type + ' badge type without value';\n }\n\n @HostBinding('class.igx-badge--info')\n public get infoClass() {\n return this.type === IgxBadgeType.INFO;\n }\n\n @HostBinding('class.igx-badge--success')\n public get successClass() {\n return this.type === IgxBadgeType.SUCCESS;\n }\n\n @HostBinding('class.igx-badge--warning')\n public get warningClass() {\n return this.type === IgxBadgeType.WARNING;\n }\n\n @HostBinding('class.igx-badge--error')\n public get errorClass() {\n return this.type === IgxBadgeType.ERROR;\n }\n}\n","@if (value || value === 0 && !icon) {\n <span class=\"igx-badge__value\">{{value}}</span>\n}\n@if (icon && !iconSet) {\n <igx-icon>{{icon}}</igx-icon>\n}\n@if (icon && iconSet) {\n <igx-icon [family]=\"iconSet\" [name]=\"icon\">{{icon}}</igx-icon>\n}\n<ng-content></ng-content>\n","import { NgModule } from '@angular/core';\nimport { IgxBadgeComponent } from './badge.component';\n\n/**\n * @hidden\n * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components\n */\n@NgModule({\n exports: [IgxBadgeComponent],\n imports: [IgxBadgeComponent]\n})\nexport class IgxBadgeModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}