npm - @sd-angular/core - Versions diffs - 19.0.0-beta.7 → 19.0.0-beta.70 - Mend

@sd-angular/core 19.0.0-beta.7 → 19.0.0-beta.70

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (232) hide show

package/fesm2022/sd-angular-core-components-anchor-v2.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sd-angular-core-components-anchor-v2.mjs","sources":["../../../projects/sd-angular/components/anchor-v2/src/components/anchor-item-v2/anchor-item-v2.component.ts","../../../projects/sd-angular/components/anchor-v2/src/components/anchor-item-v2/anchor-item-v2.component.html","../../../projects/sd-angular/components/anchor-v2/src/components/anchor-vertical-v2/anchor-vertical-list-v2.component.ts","../../../projects/sd-angular/components/anchor-v2/src/components/anchor-vertical-v2/anchor-vertical-list-v2.component.html","../../../projects/sd-angular/components/anchor-v2/src/components/anchor-v2/anchor-v2.component.ts","../../../projects/sd-angular/components/anchor-v2/src/components/anchor-v2/anchor-v2.component.html","../../../projects/sd-angular/components/anchor-v2/sd-angular-core-components-anchor-v2.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { Component, ElementRef, Input } from '@angular/core';\r\nimport { v4 as uuidv4 } from 'uuid';\r\nimport { IAnchorItemV2 } from '../../models';\r\n\r\n@Component({\r\n selector: 'sd-anchor-item-v2',\r\n templateUrl: './anchor-item-v2.component.html',\r\n styleUrls: ['./anchor-item-v2.component.scss'],\r\n imports: [CommonModule],\r\n standalone: true,\r\n})\r\nexport class SdAnchorItemV2 implements IAnchorItemV2 {\r\n @Input() title!: string;\r\n @Input() icon?: string;\r\n id: string = uuidv4();\r\n constructor(public elementRef: ElementRef) {}\r\n}\r\n","<section>\r\n <ng-content></ng-content>\r\n</section>\r\n","import { CommonModule } from '@angular/common';\r\nimport { Component, ContentChildren, EventEmitter, Input, OnInit, Output, QueryList } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { debounceTime, Subject, Subscription } from 'rxjs';\r\nimport { SdAnchorItemV2 } from '../anchor-item-v2/anchor-item-v2.component';\r\n\r\n@Component({\r\n selector: 'sd-anchor-vertical-list-v2',\r\n templateUrl: './anchor-vertical-list-v2.component.html',\r\n styleUrl: './anchor-vertical-list-v2.component.scss',\r\n imports: [CommonModule, MatIconModule],\r\n standalone: true,\r\n})\r\nexport class SdAnchorVerticalListV2 implements OnInit {\r\n constructor() {}\r\n @Input() sections!: QueryList<SdAnchorItemV2>;\r\n @Input() activeSectionId: string = '';\r\n @Input() ellipsis!: boolean;\r\n @Input() sidebarWidth!: string;\r\n\r\n @Output() sdClickSection = new EventEmitter<string>();\r\n\r\n #delay: number = 200;\r\n #clickSectionSubject = new Subject<string>();\r\n #subscription = new Subscription();\r\n\r\n ngOnInit() {\r\n this.#subscription.add(\r\n this.#clickSectionSubject.pipe(debounceTime(this.#delay)).subscribe((idSectionTarget: string) => {\r\n this.sdClickSection.emit(idSectionTarget);\r\n })\r\n );\r\n }\r\n\r\n onClickSection = (idSectionTarget: string): void => {\r\n this.#clickSectionSubject.next(idSectionTarget);\r\n };\r\n \r\n ngOnDestroy() {\r\n this.#subscription?.unsubscribe();\r\n }\r\n}\r\n","<div class=\"c-anchor-list\" [style.width]=\"sidebarWidth\">\r\n @for (section of sections; track section.id) {\r\n <div\r\n class=\"c-anchor-list-item\"\r\n [class.active]=\"section.id === activeSectionId\"\r\n (click)=\"onClickSection(section.id)\"\r\n (keydown.enter)=\"onClickSection(section.id)\"\r\n tabindex=\"0\">\r\n @if (section?.icon) {\r\n <mat-icon class=\"c-anchor-list-item-icon\">{{ section?.icon }}</mat-icon>\r\n }\r\n <div\r\n class=\"c-anchor-list-item-text\"\r\n [ngClass]=\"{\r\n ellipsis\r\n }\">\r\n {{ section.title }}\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n","import { AfterViewInit, Component, ContentChildren, ElementRef, Input, QueryList, Renderer2, ViewChild } from '@angular/core';\r\nimport { SdAnchorVerticalListV2 } from '../anchor-vertical-v2/anchor-vertical-list-v2.component';\r\nimport { SdAnchorItemV2 } from '../anchor-item-v2/anchor-item-v2.component';\r\nimport { auditTime, debounceTime, filter, fromEvent, map, Subscription, take } from 'rxjs';\r\nimport { CommonModule } from '@angular/common';\r\n\r\n@Component({\r\n selector: 'sd-anchor-v2',\r\n templateUrl: './anchor-v2.component.html',\r\n styleUrls: ['./anchor-v2.component.scss'],\r\n imports: [CommonModule, SdAnchorVerticalListV2],\r\n standalone: true,\r\n})\r\nexport class SdAnchorV2 implements AfterViewInit {\r\n constructor(private renderer: Renderer2) {}\r\n @ViewChild('wrapper', { static: false }) wrapper!: ElementRef;\r\n @ViewChild('anchorContent', { static: false }) anchorContent!: ElementRef;\r\n\r\n @ContentChildren(SdAnchorItemV2) sections!: QueryList<SdAnchorItemV2>; // Danh sách sd-anchor-v2 được khai báo\r\n\r\n @Input() type: 'vertical' \| 'horizontal' = 'vertical';\r\n @Input() sidebarWidth: string = '200px'; // Độ rộng của danh sách tiêu đề\r\n\r\n ellipsis = false; // Có thu gọn tiêu đề bằng dấu 3 chấm?\r\n @Input('ellipsis') set _ellipsis(value: '' \| boolean \| undefined \| null) {\r\n this.ellipsis = value === '' \|\| !!value;\r\n }\r\n\r\n isOverscroll = false; // Có cho phép scroll vượt qua sd-anchor và scroll tiếp đến phần tử bên ngoài?\r\n @Input('isOverscroll') set _isOverscroll(value: '' \| boolean \| undefined \| null) {\r\n this.isOverscroll = value === '' \|\| !!value;\r\n }\r\n\r\n isHiddenAnchorList = false; // Có ẩn danh sách tiêu đề section hay không?\r\n @Input('isHiddenAnchorList') set _isHiddenAnchorList(value: '' \| boolean \| undefined \| null) {\r\n this.isHiddenAnchorList = value === '' \|\| !!value;\r\n }\r\n\r\n // RxJS\r\n // Note : Scroll bằng con lăn chuột hay scroll bằng click thì tại 1 thời điểm chỉ được lắng nghe 1 Rxjs\r\n #scrollSubscription = new Subscription(); // Scroll bằng con lăn chuột\r\n #clickScrollSubscription = new Subscription(); // Scroll bằng click\r\n // End\r\n\r\n // Variables Private\r\n #delay: number = 100;\r\n #currentScrollTop: number = 0;\r\n #timeoutId: ReturnType<typeof setTimeout> \| null = null;\r\n // End\r\n\r\n // Variables Public\r\n activeSectionId: string = '';\r\n // End\r\n\r\n ngAfterViewInit(): void {\r\n if (!this.isHiddenAnchorList) {\r\n this.activeSectionId = this.sections?.first?.id ?? ''; // Active section đầu tiên\r\n this.#registerScrollSubscription(); // Đăng ký Rxjs Scroll bằng con lăn chuột\r\n this.#setWidthAnchorContent()\r\n }\r\n }\r\n\r\n #registerScrollSubscription = (): void => {\r\n this.#disposeResources(); // Giải phóng tất cả subscription và timer cũ\r\n const wrapperEl = this.wrapper.nativeElement;\r\n const scroll$ = fromEvent<UIEvent>(wrapperEl, 'scroll').pipe(debounceTime(this.#delay));\r\n this.#scrollSubscription = scroll$.subscribe((event: UIEvent) => {\r\n const elementTarget = event.target as HTMLElement;\r\n this.#currentScrollTop = this.#updateCurrentScroll(elementTarget); // Ví trí scroll hiện tại\r\n for (const section of this.sections) {\r\n // Vùng section chiếm diện tích\r\n const rect = section?.elementRef?.nativeElement;\r\n const rectTop = rect.offsetTop;\r\n const rectBottom = rectTop + rect.offsetHeight;\r\n // End\r\n if (this.#currentScrollTop >= rectTop && this.#currentScrollTop < rectBottom) {\r\n this.activeSectionId = section?.id;\r\n break;\r\n }\r\n }\r\n });\r\n };\r\n\r\n scrollSectionByClick(idSectionTarget: string): void {\r\n // Khi scrollByClick sẽ có 2 case xảy ra:\r\n // Case 1 : Được scroll (ElementTarget không nằm trong vùng viewport và được scroll đến vị trí)\r\n // Case 2 : Không được scroll (ElementTarget đã được scroll trước đó hoặc đã nằm trong vùng viewport luôn)\r\n\r\n this.activeSectionId = idSectionTarget;\r\n const targetSection = this.sections.find(s => s?.id === this.activeSectionId)?.elementRef;\r\n if (!targetSection) {\r\n return;\r\n }\r\n\r\n this.#disposeResources(); // Giải phóng tất cả subscription và timer cũ\r\n const wrapperEl = this.wrapper.nativeElement;\r\n const targetElement = targetSection.nativeElement;\r\n const prevScrollTop = this.#currentScrollTop; // Lưu lại ví trí trước khi scroll bởi event click\r\n\r\n // Case 1: Nếu được Scroll check điều kiện để đăng ký lại Rxjs Scroll bằng con lăn chuột\r\n const clickScrollEnd$ = fromEvent<UIEvent>(wrapperEl, 'scroll');\r\n this.#clickScrollSubscription = clickScrollEnd$\r\n .pipe(\r\n auditTime(this.#delay),\r\n map((event: UIEvent) => {\r\n const elementTarget = event.target as HTMLElement;\r\n this.#currentScrollTop = this.#updateCurrentScroll(elementTarget); // Cập nhật vị trí sau mỗi lần #delay\r\n const wrapperTop = wrapperEl.getBoundingClientRect().top;\r\n const targetRect = targetElement.getBoundingClientRect();\r\n const targetTop = targetRect.top;\r\n const isVisible = targetRect.top >= 0 && targetRect.bottom <= window.innerHeight; // Nằm trong viewPort\r\n return Math.abs(targetTop - wrapperTop) < 1 \|\| isVisible; // Đã được scroll tới hoặc element đã nằm trong vùng viewPort\r\n }),\r\n filter(Boolean),\r\n debounceTime(this.#delay + 100),\r\n take(1)\r\n )\r\n .subscribe(() => {\r\n this.#registerScrollSubscription(); // Đã xác nhận scroll xong thì mới đăng ký lại Rxjs Scroll bằng con lăn chuột\r\n });\r\n // // End\r\n\r\n // Case 2: Nếu không được scroll thì sau (#delay + 100) đăng ký lại Rxjs Scroll bằng con lăn chuột\r\n this.#timeoutId = setTimeout(() => {\r\n if (prevScrollTop === this.#currentScrollTop) {\r\n this.#registerScrollSubscription();\r\n }\r\n }, this.#delay + 100);\r\n\r\n wrapperEl.scrollTo({ top: targetElement.offsetTop, behavior: 'smooth' }); // Action scroll\r\n // End\r\n }\r\n\r\n #updateCurrentScroll(elementTarget: HTMLElement): number {\r\n const style = getComputedStyle(elementTarget);\r\n const paddingTop = parseFloat(style.paddingTop);\r\n const borderTop = parseFloat(style.borderTopWidth);\r\n return elementTarget.scrollTop + paddingTop + borderTop; // Vị trí scroll thực tế nếu có padding, border\r\n }\r\n\r\n // Giải phóng tất cả subscription và timer đang hoạt động\r\n #disposeResources = (): void => {\r\n if (this.#timeoutId) {\r\n clearTimeout(this.#timeoutId);\r\n }\r\n this.#scrollSubscription?.unsubscribe();\r\n this.#clickScrollSubscription?.unsubscribe();\r\n };\r\n\r\n // Thiết lập chiều rộng nội dung phụ thuộc vào chiều rộng danh sách tiêu đề section\r\n #setWidthAnchorContent = (): void => {\r\n const gap = '16px'; // Khoảng cách giữa nội dung và danh sách tiêu đề section\r\n this.renderer.setStyle(this.anchorContent.nativeElement, 'width', `calc(100% - ${this.sidebarWidth} - ${gap})`);\r\n };\r\n\r\n ngOnDestroy(): void {\r\n this.#disposeResources();\r\n }\r\n}\r\n","<div class=\"c-anchor-vertical\" [ngClass]=\"{ 'c-stop-scroll-propagation': !isOverscroll }\" #wrapper>\r\n <!-- Nội dung -->\r\n <div class=\"c-anchor-content\" #anchorContent>\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <!-- Danh sách tiêu đề các sections-->\r\n @if(!isHiddenAnchorList){\r\n <div class=\"c-anchor-list\" [style.width]=\"sidebarWidth\">\r\n <sd-anchor-vertical-list-v2\r\n [sections]=\"sections\"\r\n [ellipsis]=\"ellipsis\"\r\n [sidebarWidth]=\"sidebarWidth\"\r\n [activeSectionId]=\"activeSectionId\"\r\n (sdClickSection)=\"scrollSectionByClick($event)\">\r\n </sd-anchor-vertical-list-v2>\r\n </div>\r\n }\r\n</div>\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["uuidv4"],"mappings":"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"}
1	+ {"version":3,"file":"sd-angular-core-components-anchor-v2.mjs","sources":["../../../projects/sd-angular/components/anchor-v2/src/components/anchor-item-v2/anchor-item-v2.component.ts","../../../projects/sd-angular/components/anchor-v2/src/components/anchor-item-v2/anchor-item-v2.component.html","../../../projects/sd-angular/components/anchor-v2/src/components/anchor-vertical-v2/anchor-vertical-list-v2.component.ts","../../../projects/sd-angular/components/anchor-v2/src/components/anchor-vertical-v2/anchor-vertical-list-v2.component.html","../../../projects/sd-angular/components/anchor-v2/src/components/anchor-v2/anchor-v2.component.ts","../../../projects/sd-angular/components/anchor-v2/src/components/anchor-v2/anchor-v2.component.html","../../../projects/sd-angular/components/anchor-v2/sd-angular-core-components-anchor-v2.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport { Component, ElementRef, effect, inject, input } from '@angular/core';\r\nimport { v4 as uuidv4 } from 'uuid';\r\nimport { IAnchorItemV2 } from '../../models';\r\n\r\n@Component({\r\n selector: 'sd-anchor-item-v2',\r\n templateUrl: './anchor-item-v2.component.html',\r\n styleUrls: ['./anchor-item-v2.component.scss'],\r\n imports: [CommonModule],\r\n standalone: true,\r\n})\r\nexport class SdAnchorItemV2 implements IAnchorItemV2 {\r\n title = input.required<string>();\r\n icon = input<string \| undefined>();\r\n id: string = uuidv4();\r\n elementRef = inject(ElementRef);\r\n\r\n constructor() {\r\n effect(() => {\r\n if (this.title()) {\r\n this.elementRef.nativeElement.removeAttribute('title');\r\n }\r\n });\r\n }\r\n}\r\n","<section>\r\n <ng-content></ng-content>\r\n</section>\r\n","import { CommonModule } from '@angular/common';\r\nimport { Component, ContentChildren, EventEmitter, Input, OnInit, Output, QueryList } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { debounceTime, Subject, Subscription } from 'rxjs';\r\nimport { SdAnchorItemV2 } from '../anchor-item-v2/anchor-item-v2.component';\r\n\r\n@Component({\r\n selector: 'sd-anchor-vertical-list-v2',\r\n templateUrl: './anchor-vertical-list-v2.component.html',\r\n styleUrl: './anchor-vertical-list-v2.component.scss',\r\n imports: [CommonModule, MatIconModule],\r\n standalone: true,\r\n})\r\nexport class SdAnchorVerticalListV2 implements OnInit {\r\n constructor() {}\r\n @Input() sections!: QueryList<SdAnchorItemV2>;\r\n @Input() activeSectionId: string = '';\r\n @Input() ellipsis!: boolean;\r\n @Input() sidebarWidth!: string;\r\n\r\n @Output() sdClickSection = new EventEmitter<string>();\r\n\r\n #delay: number = 200;\r\n #clickSectionSubject = new Subject<string>();\r\n #subscription = new Subscription();\r\n\r\n ngOnInit() {\r\n this.#subscription.add(\r\n this.#clickSectionSubject.pipe(debounceTime(this.#delay)).subscribe((idSectionTarget: string) => {\r\n this.sdClickSection.emit(idSectionTarget);\r\n })\r\n );\r\n }\r\n\r\n onClickSection = (idSectionTarget: string): void => {\r\n this.#clickSectionSubject.next(idSectionTarget);\r\n };\r\n \r\n ngOnDestroy() {\r\n this.#subscription?.unsubscribe();\r\n }\r\n}\r\n","<div class=\"c-anchor-list\" [style.width]=\"sidebarWidth\">\r\n @for (section of sections; track section.id) {\r\n <div\r\n class=\"c-anchor-list-item\"\r\n [class.active]=\"section.id === activeSectionId\"\r\n (click)=\"onClickSection(section.id)\"\r\n (keydown.enter)=\"onClickSection(section.id)\"\r\n tabindex=\"0\">\r\n @if (section?.icon()) {\r\n <mat-icon class=\"c-anchor-list-item-icon\">{{ section?.icon() }}</mat-icon>\r\n }\r\n <div\r\n class=\"c-anchor-list-item-text\"\r\n [ngClass]=\"{\r\n ellipsis\r\n }\">\r\n {{ section.title() }}\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n","import { AfterViewInit, Component, ContentChildren, ElementRef, Input, QueryList, Renderer2, ViewChild } from '@angular/core';\r\nimport { SdAnchorVerticalListV2 } from '../anchor-vertical-v2/anchor-vertical-list-v2.component';\r\nimport { SdAnchorItemV2 } from '../anchor-item-v2/anchor-item-v2.component';\r\nimport { auditTime, debounceTime, filter, fromEvent, map, Subscription, take } from 'rxjs';\r\nimport { CommonModule } from '@angular/common';\r\n\r\n@Component({\r\n selector: 'sd-anchor-v2',\r\n templateUrl: './anchor-v2.component.html',\r\n styleUrls: ['./anchor-v2.component.scss'],\r\n imports: [CommonModule, SdAnchorVerticalListV2],\r\n standalone: true,\r\n})\r\nexport class SdAnchorV2 implements AfterViewInit {\r\n constructor(private renderer: Renderer2) {}\r\n @ViewChild('wrapper', { static: false }) wrapper!: ElementRef;\r\n @ViewChild('anchorContent', { static: false }) anchorContent!: ElementRef;\r\n\r\n @ContentChildren(SdAnchorItemV2) sections!: QueryList<SdAnchorItemV2>; // Danh sách sd-anchor-v2 được khai báo\r\n\r\n @Input() type: 'vertical' \| 'horizontal' = 'vertical';\r\n @Input() sidebarWidth: string = '200px'; // Độ rộng của danh sách tiêu đề\r\n\r\n ellipsis = false; // Có thu gọn tiêu đề bằng dấu 3 chấm?\r\n @Input('ellipsis') set _ellipsis(value: '' \| boolean \| undefined \| null) {\r\n this.ellipsis = value === '' \|\| !!value;\r\n }\r\n\r\n isOverscroll = false; // Có cho phép scroll vượt qua sd-anchor và scroll tiếp đến phần tử bên ngoài?\r\n @Input('isOverscroll') set _isOverscroll(value: '' \| boolean \| undefined \| null) {\r\n this.isOverscroll = value === '' \|\| !!value;\r\n }\r\n\r\n isHiddenAnchorList = false; // Có ẩn danh sách tiêu đề section hay không?\r\n @Input('isHiddenAnchorList') set _isHiddenAnchorList(value: '' \| boolean \| undefined \| null) {\r\n this.isHiddenAnchorList = value === '' \|\| !!value;\r\n }\r\n\r\n // RxJS\r\n // Note : Scroll bằng con lăn chuột hay scroll bằng click thì tại 1 thời điểm chỉ được lắng nghe 1 Rxjs\r\n #scrollSubscription = new Subscription(); // Scroll bằng con lăn chuột\r\n #clickScrollSubscription = new Subscription(); // Scroll bằng click\r\n // End\r\n\r\n // Variables Private\r\n #delay: number = 100;\r\n #currentScrollTop: number = 0;\r\n #timeoutId: ReturnType<typeof setTimeout> \| null = null;\r\n // End\r\n\r\n // Variables Public\r\n activeSectionId: string = '';\r\n // End\r\n\r\n ngAfterViewInit(): void {\r\n if (!this.isHiddenAnchorList) {\r\n this.activeSectionId = this.sections?.first?.id ?? ''; // Active section đầu tiên\r\n this.#registerScrollSubscription(); // Đăng ký Rxjs Scroll bằng con lăn chuột\r\n this.#setWidthAnchorContent()\r\n }\r\n }\r\n\r\n #registerScrollSubscription = (): void => {\r\n this.#disposeResources(); // Giải phóng tất cả subscription và timer cũ\r\n const wrapperEl = this.wrapper.nativeElement;\r\n const scroll$ = fromEvent<UIEvent>(wrapperEl, 'scroll').pipe(debounceTime(this.#delay));\r\n this.#scrollSubscription = scroll$.subscribe((event: UIEvent) => {\r\n const elementTarget = event.target as HTMLElement;\r\n this.#currentScrollTop = this.#updateCurrentScroll(elementTarget); // Ví trí scroll hiện tại\r\n for (const section of this.sections) {\r\n // Vùng section chiếm diện tích\r\n const rect = section?.elementRef?.nativeElement;\r\n const rectTop = rect.offsetTop;\r\n const rectBottom = rectTop + rect.offsetHeight;\r\n // End\r\n if (this.#currentScrollTop >= rectTop && this.#currentScrollTop < rectBottom) {\r\n this.activeSectionId = section?.id;\r\n break;\r\n }\r\n }\r\n });\r\n };\r\n\r\n scrollSectionByClick(idSectionTarget: string): void {\r\n // Khi scrollByClick sẽ có 2 case xảy ra:\r\n // Case 1 : Được scroll (ElementTarget không nằm trong vùng viewport và được scroll đến vị trí)\r\n // Case 2 : Không được scroll (ElementTarget đã được scroll trước đó hoặc đã nằm trong vùng viewport luôn)\r\n\r\n this.activeSectionId = idSectionTarget;\r\n const targetSection = this.sections.find(s => s?.id === this.activeSectionId)?.elementRef;\r\n if (!targetSection) {\r\n return;\r\n }\r\n\r\n this.#disposeResources(); // Giải phóng tất cả subscription và timer cũ\r\n const wrapperEl = this.wrapper.nativeElement;\r\n const targetElement = targetSection.nativeElement;\r\n const prevScrollTop = this.#currentScrollTop; // Lưu lại ví trí trước khi scroll bởi event click\r\n\r\n // Case 1: Nếu được Scroll check điều kiện để đăng ký lại Rxjs Scroll bằng con lăn chuột\r\n const clickScrollEnd$ = fromEvent<UIEvent>(wrapperEl, 'scroll');\r\n this.#clickScrollSubscription = clickScrollEnd$\r\n .pipe(\r\n auditTime(this.#delay),\r\n map((event: UIEvent) => {\r\n const elementTarget = event.target as HTMLElement;\r\n this.#currentScrollTop = this.#updateCurrentScroll(elementTarget); // Cập nhật vị trí sau mỗi lần #delay\r\n const wrapperTop = wrapperEl.getBoundingClientRect().top;\r\n const targetRect = targetElement.getBoundingClientRect();\r\n const targetTop = targetRect.top;\r\n const isVisible = targetRect.top >= 0 && targetRect.bottom <= window.innerHeight; // Nằm trong viewPort\r\n return Math.abs(targetTop - wrapperTop) < 1 \|\| isVisible; // Đã được scroll tới hoặc element đã nằm trong vùng viewPort\r\n }),\r\n filter(Boolean),\r\n debounceTime(this.#delay + 100),\r\n take(1)\r\n )\r\n .subscribe(() => {\r\n this.#registerScrollSubscription(); // Đã xác nhận scroll xong thì mới đăng ký lại Rxjs Scroll bằng con lăn chuột\r\n });\r\n // // End\r\n\r\n // Case 2: Nếu không được scroll thì sau (#delay + 100) đăng ký lại Rxjs Scroll bằng con lăn chuột\r\n this.#timeoutId = setTimeout(() => {\r\n if (prevScrollTop === this.#currentScrollTop) {\r\n this.#registerScrollSubscription();\r\n }\r\n }, this.#delay + 100);\r\n\r\n wrapperEl.scrollTo({ top: targetElement.offsetTop, behavior: 'smooth' }); // Action scroll\r\n // End\r\n }\r\n\r\n #updateCurrentScroll(elementTarget: HTMLElement): number {\r\n const style = getComputedStyle(elementTarget);\r\n const paddingTop = parseFloat(style.paddingTop);\r\n const borderTop = parseFloat(style.borderTopWidth);\r\n return elementTarget.scrollTop + paddingTop + borderTop; // Vị trí scroll thực tế nếu có padding, border\r\n }\r\n\r\n // Giải phóng tất cả subscription và timer đang hoạt động\r\n #disposeResources = (): void => {\r\n if (this.#timeoutId) {\r\n clearTimeout(this.#timeoutId);\r\n }\r\n this.#scrollSubscription?.unsubscribe();\r\n this.#clickScrollSubscription?.unsubscribe();\r\n };\r\n\r\n // Thiết lập chiều rộng nội dung phụ thuộc vào chiều rộng danh sách tiêu đề section\r\n #setWidthAnchorContent = (): void => {\r\n const gap = '16px'; // Khoảng cách giữa nội dung và danh sách tiêu đề section\r\n this.renderer.setStyle(this.anchorContent.nativeElement, 'width', `calc(100% - ${this.sidebarWidth} - ${gap})`);\r\n };\r\n\r\n ngOnDestroy(): void {\r\n this.#disposeResources();\r\n }\r\n}\r\n","<div class=\"c-anchor-vertical\" [ngClass]=\"{ 'c-stop-scroll-propagation': !isOverscroll }\" #wrapper>\r\n <!-- Nội dung -->\r\n <div class=\"c-anchor-content\" #anchorContent>\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <!-- Danh sách tiêu đề các sections-->\r\n @if(!isHiddenAnchorList){\r\n <div class=\"c-anchor-list\" [style.width]=\"sidebarWidth\">\r\n <sd-anchor-vertical-list-v2\r\n [sections]=\"sections\"\r\n [ellipsis]=\"ellipsis\"\r\n [sidebarWidth]=\"sidebarWidth\"\r\n [activeSectionId]=\"activeSectionId\"\r\n (sdClickSection)=\"scrollSectionByClick($event)\">\r\n </sd-anchor-vertical-list-v2>\r\n </div>\r\n }\r\n</div>\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["uuidv4"],"mappings":"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"}

package/fesm2022/sd-angular-core-components-avatar.mjs ADDED Viewed

@@ -0,0 +1,103 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, signal, effect, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+class SdAvatar {
+    /**
+     * The source string to be used for the avatar.
+     * - If it matches a URL pattern, an image is displayed.
+     * - If it is a string representing a name, initials and a colored background are generated.
+     * - If undefined, it falls back to a neutral ? initial.
+     */
+    src = input.required();
+    size = input(32);
+    #imageError = signal(false);
+    constructor() {
+        // Reset image error state whenever src changes
+        effect(() => {
+            this.src();
+            this.#imageError.set(false);
+        });
+    }
+    isUrl = computed(() => {
+        // If image has failed to load, treat it as a non-url to fallback to initials using the literal URL text
+        if (this.#imageError()) {
+            return false;
+        }
+        const val = this.src() || '';
+        const urlPattern = /^(http|https|data:image|\/)/;
+        return urlPattern.test(val);
+    });
+    bgColor = computed(() => {
+        if (this.isUrl()) {
+            return 'transparent';
+        }
+        const val = this.src() || '';
+        if (!val) {
+            return '#bdc3c7';
+        }
+        return this.#generateColor(val);
+    });
+    initials = computed(() => {
+        if (this.isUrl()) {
+            return '';
+        }
+        const val = this.src() || '';
+        if (!val) {
+            return '?';
+        }
+        return this.#getInitials(val);
+    });
+    handleError() {
+        this.#imageError.set(true);
+    }
+    #getInitials = (name) => {
+        const words = name.trim().split(' ').filter(Boolean);
+        if (!words.length)
+            return '';
+        if (words.length === 1)
+            return words[0][0].toUpperCase();
+        return (words[0][0] + words[words.length - 1][0]).toUpperCase();
+    };
+    #generateColor = (name) => {
+        const colors = [
+            '#1abc9c',
+            '#2ecc71',
+            '#3498db',
+            '#9b59b6',
+            '#34495e',
+            '#16a085',
+            '#27ae60',
+            '#2980b9',
+            '#8e44ad',
+            '#2c3e50',
+            '#f1c40f',
+            '#e67e22',
+            '#e74c3c',
+            '#95a5a6',
+            '#f39c12',
+            '#d35400',
+            '#c0392b',
+            '#bdc3c7',
+            '#7f8c8d',
+        ];
+        let hash = 0;
+        for (let i = 0; i < name.length; i++) {
+            hash = name.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        return colors[Math.abs(hash) % colors.length];
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdAvatar, isStandalone: true, selector: "sd-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"sd-avatar\" [style.width.px]=\"size()\" [style.height.px]=\"size()\" [style.line-height.px]=\"size()\" [style.backgroundColor]=\"bgColor()\">\n  @if (isUrl()) {\n    <img [src]=\"src()\" (error)=\"handleError()\" alt=\"avatar\" />\n  } @else {\n    <span class=\"sd-avatar-text\" [style.fontSize.px]=\"size() / 2.5\">\n      {{ initials() }}\n    </span>\n  }\n</div>\n", styles: [".sd-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;color:#fff;font-weight:500;-webkit-user-select:none;user-select:none;background-size:cover}.sd-avatar img{width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdAvatar, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-avatar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sd-avatar\" [style.width.px]=\"size()\" [style.height.px]=\"size()\" [style.line-height.px]=\"size()\" [style.backgroundColor]=\"bgColor()\">\n  @if (isUrl()) {\n    <img [src]=\"src()\" (error)=\"handleError()\" alt=\"avatar\" />\n  } @else {\n    <span class=\"sd-avatar-text\" [style.fontSize.px]=\"size() / 2.5\">\n      {{ initials() }}\n    </span>\n  }\n</div>\n", styles: [".sd-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;color:#fff;font-weight:500;-webkit-user-select:none;user-select:none;background-size:cover}.sd-avatar img{width:100%;height:100%;object-fit:cover}\n"] }]
+        }], ctorParameters: () => [] });
+/**
+ * Generated bundle index. Do not edit.
+ */
+export { SdAvatar };
+//# sourceMappingURL=sd-angular-core-components-avatar.mjs.map

package/fesm2022/sd-angular-core-components-avatar.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sd-angular-core-components-avatar.mjs","sources":["../../../projects/sd-angular/components/avatar/src/avatar.component.ts","../../../projects/sd-angular/components/avatar/src/avatar.component.html","../../../projects/sd-angular/components/avatar/sd-angular-core-components-avatar.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, effect, input, signal } from '@angular/core';\n\n@Component({\n selector: 'sd-avatar',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './avatar.component.html',\n styleUrls: ['./avatar.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SdAvatar {\n /**\n * The source string to be used for the avatar.\n * - If it matches a URL pattern, an image is displayed.\n * - If it is a string representing a name, initials and a colored background are generated.\n * - If undefined, it falls back to a neutral ? initial.\n */\n readonly src = input.required<string | undefined | null>();\n readonly size = input<number>(32);\n\n readonly #imageError = signal<boolean>(false);\n\n constructor() {\n // Reset image error state whenever src changes\n effect(() => {\n this.src();\n this.#imageError.set(false);\n });\n }\n\n readonly isUrl = computed(() => {\n // If image has failed to load, treat it as a non-url to fallback to initials using the literal URL text\n if (this.#imageError()) {\n return false;\n }\n const val = this.src() || '';\n const urlPattern = /^(http|https|data:image|\\/)/;\n return urlPattern.test(val);\n });\n\n readonly bgColor = computed(() => {\n if (this.isUrl()) {\n return 'transparent';\n }\n const val = this.src() || '';\n if (!val) {\n return '#bdc3c7';\n }\n return this.#generateColor(val);\n });\n\n readonly initials = computed(() => {\n if (this.isUrl()) {\n return '';\n }\n const val = this.src() || '';\n if (!val) {\n return '?';\n }\n return this.#getInitials(val);\n });\n\n handleError() {\n this.#imageError.set(true);\n }\n\n #getInitials = (name: string): string => {\n const words = name.trim().split(' ').filter(Boolean);\n if (!words.length) return '';\n if (words.length === 1) return words[0][0].toUpperCase();\n return (words[0][0] + words[words.length - 1][0]).toUpperCase();\n };\n\n #generateColor = (name: string): string => {\n const colors = [\n '#1abc9c',\n '#2ecc71',\n '#3498db',\n '#9b59b6',\n '#34495e',\n '#16a085',\n '#27ae60',\n '#2980b9',\n '#8e44ad',\n '#2c3e50',\n '#f1c40f',\n '#e67e22',\n '#e74c3c',\n '#95a5a6',\n '#f39c12',\n '#d35400',\n '#c0392b',\n '#bdc3c7',\n '#7f8c8d',\n ];\n let hash = 0;\n for (let i = 0; i < name.length; i++) {\n hash = name.charCodeAt(i) + ((hash << 5) - hash);\n }\n return colors[Math.abs(hash) % colors.length];\n };\n}\n","<div class=\"sd-avatar\" [style.width.px]=\"size()\" [style.height.px]=\"size()\" [style.line-height.px]=\"size()\" [style.backgroundColor]=\"bgColor()\">\n @if (isUrl()) {\n <img [src]=\"src()\" (error)=\"handleError()\" alt=\"avatar\" />\n } @else {\n <span class=\"sd-avatar-text\" [style.fontSize.px]=\"size() / 2.5\">\n {{ initials() }}\n </span>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sd-angular-core-components-badge.mjs CHANGED Viewed

@@ -1,108 +1,118 @@
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, booleanAttribute, EventEmitter, computed, Output, ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
-import * as i1 from '@angular/material/tooltip';
+import * as i2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 /* eslint-disable @angular-eslint/no-input-rename */
 class SdBadge {
     defaultIcon = 'fiber_manual_record';
-    type = 'icon';
-    set _type(type) {
-        this.type = type || 'icon';
-    }
-    color = 'secondary';
-    set _color(color) {
-        this.color = color || 'secondary';
-    }
-    // Hỗ trợ: <sd-button secondary> hoặc <sd-button [secondary]="condition">
-    set primary(value) {
-        if (value === '' || value) {
-            this.color = 'primary';
-        }
-    }
-    set secondary(value) {
-        // Nếu value là '' (viết tắt <sd-button secondary>) hoặc true
-        if (value === '' || value) {
-            this.color = 'secondary';
-        }
-    }
-    set success(value) {
-        // Nếu value là '' (viết tắt <sd-button secondary>) hoặc true
-        if (value === '' || value) {
-            this.color = 'success';
-        }
-    }
-    set info(value) {
-        // Nếu value là '' (viết tắt <sd-button secondary>) hoặc true
-        if (value === '' || value) {
-            this.color = 'info';
-        }
-    }
-    set warning(value) {
-        // Nếu value là '' (viết tắt <sd-button secondary>) hoặc true
-        if (value === '' || value) {
-            this.color = 'warning';
-        }
-    }
-    set error(value) {
-        // Nếu value là '' (viết tắt <sd-button secondary>) hoặc true
-        if (value === '' || value) {
-            this.color = 'error';
-        }
-    }
-    fontSet = 'material-icons';
-    set _fontSet(fontSet) {
-        this.fontSet = fontSet || 'material-icons';
-    }
-    title;
-    description;
-    tooltip;
-    icon;
-    size = 'sm';
-    sdClick = new EventEmitter();
+    // ==========================================
+    // 1. SIGNAL INPUTS
+    // ==========================================
+    type = input('icon', {
+        transform: value => value || 'icon',
+    });
+    color = input('secondary', {
+        transform: value => value || 'secondary',
+    });
+    primary = input(false, { transform: booleanAttribute });
+    secondary = input(false, { transform: booleanAttribute });
+    success = input(false, { transform: booleanAttribute });
+    info = input(false, { transform: booleanAttribute });
+    warning = input(false, { transform: booleanAttribute });
+    error = input(false, { transform: booleanAttribute });
+    fontSet = input('material-icons', {
+        transform: value => value || 'material-icons',
+    });
+    title = input();
+    description = input();
+    tooltip = input();
+    icon = input();
+    size = input('sm', {
+        transform: value => value || 'sm',
+    });
+    // ==========================================
+    // 2. OUTPUT
+    // ==========================================
+    click = new EventEmitter();
     onClick = (event) => {
-        this.sdClick.emit(event);
+        event.stopPropagation();
+        this.click.emit(event);
     };
+    // ==========================================
+    // 3. COMPUTED STATE
+    // ==========================================
+    effectiveColor = computed(() => {
+        if (this.primary())
+            return 'primary';
+        if (this.secondary())
+            return 'secondary';
+        if (this.success())
+            return 'success';
+        if (this.info())
+            return 'info';
+        if (this.warning())
+            return 'warning';
+        if (this.error())
+            return 'error';
+        return this.color();
+    });
+    baseColorClasses = computed(() => {
+        const c = this.effectiveColor();
+        return {
+            'c-primary': c === 'primary',
+            'c-secondary': c === 'secondary',
+            'c-info': c === 'info',
+            'c-success': c === 'success',
+            'c-warning': c === 'warning',
+            'c-error': c === 'error',
+        };
+    });
+    iconColorClasses = computed(() => {
+        const c = this.effectiveColor();
+        return {
+            'c-primary': c === 'primary',
+            'c-black400': c === 'secondary',
+            'c-info': c === 'info',
+            'c-success': c === 'success',
+            'c-warning': c === 'warning',
+            'c-error': c === 'error',
+        };
+    });
+    iconSizeAndFontClasses = computed(() => {
+        const s = this.size();
+        const f = this.fontSet();
+        return {
+            'c-xs': s === 'xs',
+            'c-sm': s === 'sm',
+            'c-md': s === 'md',
+            'c-lg': s === 'lg',
+            'material-icons': f === 'material-icons',
+            'material-icons-outlined': f === 'material-icons-outlined',
+            'material-icons-round': f === 'material-icons-round',
+            'material-icons-sharp': f === 'material-icons-sharp',
+        };
+    });
+    // GỘP CLASS CHO BADGE TYPE = 'TAG'
+    tagIconCombinedClasses = computed(() => ({
+        ...this.iconSizeAndFontClasses(),
+        ...this.baseColorClasses(),
+    }));
+    // GỘP CLASS CHO BADGE TYPE = 'ICON'
+    iconCombinedClasses = computed(() => ({
+        ...this.iconSizeAndFontClasses(),
+        ...this.iconColorClasses(),
+    }));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdBadge, isStandalone: true, selector: "sd-badge", inputs: { _type: ["type", "_type"], _color: ["color", "_color"], primary: "primary", secondary: "secondary", success: "success", info: "info", warning: "warning", error: "error", _fontSet: ["fontSet", "_fontSet"], title: "title", description: "description", tooltip: "tooltip", icon: "icon", size: "size" }, outputs: { sdClick: "sdClick" }, ngImport: i0, template: "@if (type === 'round') {\r\n  <div\r\n    class=\"c-badge\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tooltip\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-primary]=\"color === 'primary'\"\r\n    [class.c-secondary]=\"color === 'secondary'\"\r\n    [class.c-info]=\"color === 'info'\"\r\n    [class.c-success]=\"color === 'success'\"\r\n    [class.c-warning]=\"color === 'warning'\"\r\n    [class.c-error]=\"color === 'error'\"\r\n    [class.pointer]=\"!!sdClick.observers.length\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    {{ title }}\r\n  </div>\r\n} @else if (type === 'tag') {\r\n  <div\r\n    class=\"c-badge c-badge--tag\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tooltip\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-primary]=\"color === 'primary'\"\r\n    [class.c-secondary]=\"color === 'secondary'\"\r\n    [class.c-info]=\"color === 'info'\"\r\n    [class.c-success]=\"color === 'success'\"\r\n    [class.c-warning]=\"color === 'warning'\"\r\n    [class.c-error]=\"color === 'error'\"\r\n    [class.pointer]=\"!!sdClick.observers.length\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      @if (icon) {\r\n        <span\r\n          class=\"c-material-icon mr-4\"\r\n          [class]=\"{\r\n            'c-xs': size === 'xs',\r\n            'c-sm': size === 'sm',\r\n            'c-md': size === 'md',\r\n            'c-lg': size === 'lg',\r\n            'material-icons': fontSet === 'material-icons',\r\n            'material-icons-outlined': fontSet === 'material-icons-outlined',\r\n            'material-icons-round': fontSet === 'material-icons-round',\r\n            'material-icons-sharp': fontSet === 'material-icons-sharp'\r\n          }\"\r\n          [class.c-primary]=\"color === 'primary'\"\r\n          [class.c-secondary]=\"color === 'secondary'\"\r\n          [class.c-info]=\"color === 'info'\"\r\n          [class.c-success]=\"color === 'success'\"\r\n          [class.c-warning]=\"color === 'warning'\"\r\n          [class.c-error]=\"color === 'error'\">\r\n          {{ icon || defaultIcon }}\r\n        </span>\r\n      }\r\n      <div class=\"d-flex flex-column align-items-start\">\r\n        <span class=\"T14R c-badge-title\">{{ title }}</span>\r\n        @if (description) {\r\n          <span class=\"T12R c-badge-description\">{{ description }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <div\r\n    class=\"d-flex\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tooltip\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-badge-icon]=\"type === 'icon'\"\r\n    [class.c-primary]=\"color === 'primary'\"\r\n    [class.c-secondary]=\"color === 'secondary'\"\r\n    [class.c-info]=\"color === 'info'\"\r\n    [class.c-success]=\"color === 'success'\"\r\n    [class.c-warning]=\"color === 'warning'\"\r\n    [class.c-error]=\"color === 'error'\"\r\n    [class.pointer]=\"!!sdClick.observers.length\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      <span\r\n        class=\"c-material-icon mr-4\"\r\n        [class]=\"{\r\n          'c-xs': size === 'xs',\r\n          'c-sm': size === 'sm',\r\n          'c-md': size === 'md',\r\n          'c-lg': size === 'lg',\r\n          'material-icons': fontSet === 'material-icons',\r\n          'material-icons-outlined': fontSet === 'material-icons-outlined',\r\n          'material-icons-round': fontSet === 'material-icons-round',\r\n          'material-icons-sharp': fontSet === 'material-icons-sharp'\r\n        }\"\r\n        [class.c-primary]=\"color === 'primary'\"\r\n        [class.c-secondary]=\"color === 'secondary'\"\r\n        [class.c-info]=\"color === 'info'\"\r\n        [class.c-success]=\"color === 'success'\"\r\n        [class.c-warning]=\"color === 'warning'\"\r\n        [class.c-error]=\"color === 'error'\">\r\n        {{ icon || defaultIcon }}\r\n      </span>\r\n      <div class=\"d-flex flex-column\">\r\n        <span class=\"T14R c-badge-title\">{{ title }}</span>\r\n        @if (description) {\r\n          <span class=\"T12R c-badge-description\">{{ description }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-badge{border-radius:20px;padding:2px 10px;display:inline-block;text-align:center;overflow-wrap:break-word}.c-badge.c-primary{background:var(--sd-primary-light);color:var(--sd-primary)}.c-badge.c-primary.c-badge--tag{border:1px solid var(--sd-primary)}.c-badge.c-secondary{background:var(--sd-secondary-light);color:var(--sd-secondary)}.c-badge.c-secondary.c-badge--tag{border:1px solid var(--sd-secondary)}.c-badge.c-info{background:var(--sd-info-light);color:var(--sd-info)}.c-badge.c-info.c-badge--tag{border:1px solid var(--sd-info)}.c-badge.c-warning{background:var(--sd-warning-light);color:var(--sd-warning)}.c-badge.c-warning.c-badge--tag{border:1px solid var(--sd-warning)}.c-badge.c-success{background:var(--sd-success-light);color:var(--sd-success)}.c-badge.c-success.c-badge--tag{border:1px solid var(--sd-success)}.c-badge.c-error{background:var(--sd-error-light);color:var(--sd-error)}.c-badge.c-error.c-badge--tag{border:1px solid var(--sd-error)}.c-badge.c-badge--tag{border-radius:4px;padding:1px 7px}.c-badge.c-badge--tag .c-material-icon{padding:0}.c-badge.c-badge--tag .c-material-icon.c-xs,.c-badge.c-badge--tag .c-material-icon.c-sm,.c-badge.c-badge--tag .c-material-icon.c-md,.c-badge.c-badge--tag .c-material-icon.c-lg{line-height:20px}.c-badge-icon{min-width:50px}.c-badge-icon .c-material-icon{border-radius:50%;padding:2px 2px 2px 0}.c-badge-icon .c-material-icon.c-xs{width:18px;height:18px;font-size:14px}.c-badge-icon .c-material-icon.c-sm{width:20px;height:20px;font-size:16px}.c-badge-icon .c-material-icon.c-md{width:22px;height:22px;font-size:18px}.c-badge-icon .c-material-icon.c-lg{width:28px;height:28px;font-size:24px}.c-badge-icon .c-material-icon.c-primary{color:var(--sd-primary)}.c-badge-icon .c-material-icon.c-secondary{color:var(--sd-secondary)}.c-badge-icon .c-material-icon.c-info{color:var(--sd-info)}.c-badge-icon .c-material-icon.c-success{color:var(--sd-success)}.c-badge-icon .c-material-icon.c-error{color:var(--sd-error)}.c-badge-icon .c-material-icon.c-warning{color:var(--sd-warning)}.c-badge-description{color:var(--sd-secondary)}::ng-deep .sd-multiline-tooltip{white-space:pre-line}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdBadge, isStandalone: true, selector: "sd-badge", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, primary: { classPropertyName: "primary", publicName: "primary", isSignal: true, isRequired: false, transformFunction: null }, secondary: { classPropertyName: "secondary", publicName: "secondary", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, info: { classPropertyName: "info", publicName: "info", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, fontSet: { classPropertyName: "fontSet", publicName: "fontSet", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, ngImport: i0, template: "@let badgeType = type();\r\n@let tt = tooltip();\r\n@let titleText = title();\r\n@let descText = description();\r\n@let iconName = icon() || defaultIcon;\r\n@let isPointer = click.observed;\r\n\r\n@if (badgeType === 'round') {\r\n  <div\r\n    class=\"c-badge\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tt || ''\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [ngClass]=\"baseColorClasses()\"\r\n    [class.pointer]=\"isPointer\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    {{ titleText }}\r\n  </div>\r\n} @else if (badgeType === 'tag') {\r\n  <div\r\n    class=\"c-badge c-badge--tag\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tt || ''\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [ngClass]=\"baseColorClasses()\"\r\n    [class.pointer]=\"isPointer\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      @if (icon()) {\r\n        <span class=\"c-material-icon mr-4\" [ngClass]=\"tagIconCombinedClasses()\">\r\n          {{ iconName }}\r\n        </span>\r\n      }\r\n      <div class=\"d-flex flex-column align-items-start\">\r\n        <span class=\"T14R c-badge-title\">{{ titleText }}</span>\r\n        @if (descText) {\r\n          <span class=\"T12R c-badge-description\">{{ descText }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <div\r\n    class=\"d-flex\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tt || ''\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-badge-icon]=\"badgeType === 'icon'\"\r\n    [class.pointer]=\"isPointer\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      <span class=\"c-material-icon mr-4\" [ngClass]=\"iconCombinedClasses()\">\r\n        {{ iconName }}\r\n      </span>\r\n      <div class=\"d-flex flex-column\">\r\n        <span class=\"T14R c-badge-title\">{{ titleText }}</span>\r\n        @if (descText) {\r\n          <span class=\"T10R c-badge-description\">{{ descText }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-badge{border-radius:20px;padding:2px 10px;display:inline-block;text-align:center;overflow-wrap:break-word}.c-badge.c-primary{background:var(--sd-primary-light);color:var(--sd-primary)}.c-badge.c-primary.c-badge--tag{border:1px solid var(--sd-primary)}.c-badge.c-secondary{background:var(--sd-secondary-light);color:var(--sd-secondary)}.c-badge.c-secondary.c-badge--tag{border:1px solid var(--sd-secondary)}.c-badge.c-info{background:var(--sd-info-light);color:var(--sd-info)}.c-badge.c-info.c-badge--tag{border:1px solid var(--sd-info)}.c-badge.c-warning{background:var(--sd-warning-light);color:var(--sd-warning)}.c-badge.c-warning.c-badge--tag{border:1px solid var(--sd-warning)}.c-badge.c-success{background:var(--sd-success-light);color:var(--sd-success)}.c-badge.c-success.c-badge--tag{border:1px solid var(--sd-success)}.c-badge.c-error{background:var(--sd-error-light);color:var(--sd-error)}.c-badge.c-error.c-badge--tag{border:1px solid var(--sd-error)}.c-badge.c-badge--tag{border-radius:4px;padding:1px 7px}.c-badge.c-badge--tag .c-material-icon{padding:0}.c-badge.c-badge--tag .c-material-icon.c-xs,.c-badge.c-badge--tag .c-material-icon.c-sm,.c-badge.c-badge--tag .c-material-icon.c-md,.c-badge.c-badge--tag .c-material-icon.c-lg{line-height:20px}.c-badge-icon{min-width:50px}.c-badge-icon .c-material-icon{border-radius:50%;padding:2px 2px 2px 0}.c-badge-icon .c-material-icon.c-xs{width:18px;height:18px;font-size:14px}.c-badge-icon .c-material-icon.c-sm{width:20px;height:20px;font-size:16px}.c-badge-icon .c-material-icon.c-md{width:22px;height:22px;font-size:18px}.c-badge-icon .c-material-icon.c-lg{width:28px;height:28px;font-size:24px}.c-badge-icon .c-material-icon.c-primary{color:var(--sd-primary)}.c-badge-icon .c-material-icon.c-secondary{color:var(--sd-secondary)}.c-badge-icon .c-material-icon.c-black400{color:var(--sd-black400)}.c-badge-icon .c-material-icon.c-info{color:var(--sd-info)}.c-badge-icon .c-material-icon.c-success{color:var(--sd-success)}.c-badge-icon .c-material-icon.c-error{color:var(--sd-error)}.c-badge-icon .c-material-icon.c-warning{color:var(--sd-warning)}.c-badge-description{color:var(--sd-black400)}::ng-deep .sd-multiline-tooltip{white-space:pre-line}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdBadge, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-badge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, MatTooltipModule], template: "@if (type === 'round') {\r\n  <div\r\n    class=\"c-badge\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tooltip\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-primary]=\"color === 'primary'\"\r\n    [class.c-secondary]=\"color === 'secondary'\"\r\n    [class.c-info]=\"color === 'info'\"\r\n    [class.c-success]=\"color === 'success'\"\r\n    [class.c-warning]=\"color === 'warning'\"\r\n    [class.c-error]=\"color === 'error'\"\r\n    [class.pointer]=\"!!sdClick.observers.length\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    {{ title }}\r\n  </div>\r\n} @else if (type === 'tag') {\r\n  <div\r\n    class=\"c-badge c-badge--tag\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tooltip\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-primary]=\"color === 'primary'\"\r\n    [class.c-secondary]=\"color === 'secondary'\"\r\n    [class.c-info]=\"color === 'info'\"\r\n    [class.c-success]=\"color === 'success'\"\r\n    [class.c-warning]=\"color === 'warning'\"\r\n    [class.c-error]=\"color === 'error'\"\r\n    [class.pointer]=\"!!sdClick.observers.length\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      @if (icon) {\r\n        <span\r\n          class=\"c-material-icon mr-4\"\r\n          [class]=\"{\r\n            'c-xs': size === 'xs',\r\n            'c-sm': size === 'sm',\r\n            'c-md': size === 'md',\r\n            'c-lg': size === 'lg',\r\n            'material-icons': fontSet === 'material-icons',\r\n            'material-icons-outlined': fontSet === 'material-icons-outlined',\r\n            'material-icons-round': fontSet === 'material-icons-round',\r\n            'material-icons-sharp': fontSet === 'material-icons-sharp'\r\n          }\"\r\n          [class.c-primary]=\"color === 'primary'\"\r\n          [class.c-secondary]=\"color === 'secondary'\"\r\n          [class.c-info]=\"color === 'info'\"\r\n          [class.c-success]=\"color === 'success'\"\r\n          [class.c-warning]=\"color === 'warning'\"\r\n          [class.c-error]=\"color === 'error'\">\r\n          {{ icon || defaultIcon }}\r\n        </span>\r\n      }\r\n      <div class=\"d-flex flex-column align-items-start\">\r\n        <span class=\"T14R c-badge-title\">{{ title }}</span>\r\n        @if (description) {\r\n          <span class=\"T12R c-badge-description\">{{ description }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <div\r\n    class=\"d-flex\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tooltip\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-badge-icon]=\"type === 'icon'\"\r\n    [class.c-primary]=\"color === 'primary'\"\r\n    [class.c-secondary]=\"color === 'secondary'\"\r\n    [class.c-info]=\"color === 'info'\"\r\n    [class.c-success]=\"color === 'success'\"\r\n    [class.c-warning]=\"color === 'warning'\"\r\n    [class.c-error]=\"color === 'error'\"\r\n    [class.pointer]=\"!!sdClick.observers.length\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      <span\r\n        class=\"c-material-icon mr-4\"\r\n        [class]=\"{\r\n          'c-xs': size === 'xs',\r\n          'c-sm': size === 'sm',\r\n          'c-md': size === 'md',\r\n          'c-lg': size === 'lg',\r\n          'material-icons': fontSet === 'material-icons',\r\n          'material-icons-outlined': fontSet === 'material-icons-outlined',\r\n          'material-icons-round': fontSet === 'material-icons-round',\r\n          'material-icons-sharp': fontSet === 'material-icons-sharp'\r\n        }\"\r\n        [class.c-primary]=\"color === 'primary'\"\r\n        [class.c-secondary]=\"color === 'secondary'\"\r\n        [class.c-info]=\"color === 'info'\"\r\n        [class.c-success]=\"color === 'success'\"\r\n        [class.c-warning]=\"color === 'warning'\"\r\n        [class.c-error]=\"color === 'error'\">\r\n        {{ icon || defaultIcon }}\r\n      </span>\r\n      <div class=\"d-flex flex-column\">\r\n        <span class=\"T14R c-badge-title\">{{ title }}</span>\r\n        @if (description) {\r\n          <span class=\"T12R c-badge-description\">{{ description }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-badge{border-radius:20px;padding:2px 10px;display:inline-block;text-align:center;overflow-wrap:break-word}.c-badge.c-primary{background:var(--sd-primary-light);color:var(--sd-primary)}.c-badge.c-primary.c-badge--tag{border:1px solid var(--sd-primary)}.c-badge.c-secondary{background:var(--sd-secondary-light);color:var(--sd-secondary)}.c-badge.c-secondary.c-badge--tag{border:1px solid var(--sd-secondary)}.c-badge.c-info{background:var(--sd-info-light);color:var(--sd-info)}.c-badge.c-info.c-badge--tag{border:1px solid var(--sd-info)}.c-badge.c-warning{background:var(--sd-warning-light);color:var(--sd-warning)}.c-badge.c-warning.c-badge--tag{border:1px solid var(--sd-warning)}.c-badge.c-success{background:var(--sd-success-light);color:var(--sd-success)}.c-badge.c-success.c-badge--tag{border:1px solid var(--sd-success)}.c-badge.c-error{background:var(--sd-error-light);color:var(--sd-error)}.c-badge.c-error.c-badge--tag{border:1px solid var(--sd-error)}.c-badge.c-badge--tag{border-radius:4px;padding:1px 7px}.c-badge.c-badge--tag .c-material-icon{padding:0}.c-badge.c-badge--tag .c-material-icon.c-xs,.c-badge.c-badge--tag .c-material-icon.c-sm,.c-badge.c-badge--tag .c-material-icon.c-md,.c-badge.c-badge--tag .c-material-icon.c-lg{line-height:20px}.c-badge-icon{min-width:50px}.c-badge-icon .c-material-icon{border-radius:50%;padding:2px 2px 2px 0}.c-badge-icon .c-material-icon.c-xs{width:18px;height:18px;font-size:14px}.c-badge-icon .c-material-icon.c-sm{width:20px;height:20px;font-size:16px}.c-badge-icon .c-material-icon.c-md{width:22px;height:22px;font-size:18px}.c-badge-icon .c-material-icon.c-lg{width:28px;height:28px;font-size:24px}.c-badge-icon .c-material-icon.c-primary{color:var(--sd-primary)}.c-badge-icon .c-material-icon.c-secondary{color:var(--sd-secondary)}.c-badge-icon .c-material-icon.c-info{color:var(--sd-info)}.c-badge-icon .c-material-icon.c-success{color:var(--sd-success)}.c-badge-icon .c-material-icon.c-error{color:var(--sd-error)}.c-badge-icon .c-material-icon.c-warning{color:var(--sd-warning)}.c-badge-description{color:var(--sd-secondary)}::ng-deep .sd-multiline-tooltip{white-space:pre-line}\n"] }]
-        }], propDecorators: { _type: [{
-                type: Input,
-                args: ['type']
-            }], _color: [{
-                type: Input,
-                args: ['color']
-            }], primary: [{
-                type: Input
-            }], secondary: [{
-                type: Input
-            }], success: [{
-                type: Input
-            }], info: [{
-                type: Input
-            }], warning: [{
-                type: Input
-            }], error: [{
-                type: Input
-            }], _fontSet: [{
-                type: Input,
-                args: ['fontSet']
-            }], title: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], tooltip: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], sdClick: [{
+            args: [{ selector: 'sd-badge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, MatTooltipModule], template: "@let badgeType = type();\r\n@let tt = tooltip();\r\n@let titleText = title();\r\n@let descText = description();\r\n@let iconName = icon() || defaultIcon;\r\n@let isPointer = click.observed;\r\n\r\n@if (badgeType === 'round') {\r\n  <div\r\n    class=\"c-badge\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tt || ''\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [ngClass]=\"baseColorClasses()\"\r\n    [class.pointer]=\"isPointer\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    {{ titleText }}\r\n  </div>\r\n} @else if (badgeType === 'tag') {\r\n  <div\r\n    class=\"c-badge c-badge--tag\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tt || ''\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [ngClass]=\"baseColorClasses()\"\r\n    [class.pointer]=\"isPointer\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      @if (icon()) {\r\n        <span class=\"c-material-icon mr-4\" [ngClass]=\"tagIconCombinedClasses()\">\r\n          {{ iconName }}\r\n        </span>\r\n      }\r\n      <div class=\"d-flex flex-column align-items-start\">\r\n        <span class=\"T14R c-badge-title\">{{ titleText }}</span>\r\n        @if (descText) {\r\n          <span class=\"T12R c-badge-description\">{{ descText }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <div\r\n    class=\"d-flex\"\r\n    matTooltipPosition=\"above\"\r\n    [matTooltip]=\"tt || ''\"\r\n    matTooltipClass=\"sd-multiline-tooltip\"\r\n    [class.c-badge-icon]=\"badgeType === 'icon'\"\r\n    [class.pointer]=\"isPointer\"\r\n    (click)=\"onClick($event)\"\r\n    aria-hidden=\"true\">\r\n    <div class=\"c-icon d-flex align-items-center\">\r\n      <span class=\"c-material-icon mr-4\" [ngClass]=\"iconCombinedClasses()\">\r\n        {{ iconName }}\r\n      </span>\r\n      <div class=\"d-flex flex-column\">\r\n        <span class=\"T14R c-badge-title\">{{ titleText }}</span>\r\n        @if (descText) {\r\n          <span class=\"T10R c-badge-description\">{{ descText }}</span>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.c-badge{border-radius:20px;padding:2px 10px;display:inline-block;text-align:center;overflow-wrap:break-word}.c-badge.c-primary{background:var(--sd-primary-light);color:var(--sd-primary)}.c-badge.c-primary.c-badge--tag{border:1px solid var(--sd-primary)}.c-badge.c-secondary{background:var(--sd-secondary-light);color:var(--sd-secondary)}.c-badge.c-secondary.c-badge--tag{border:1px solid var(--sd-secondary)}.c-badge.c-info{background:var(--sd-info-light);color:var(--sd-info)}.c-badge.c-info.c-badge--tag{border:1px solid var(--sd-info)}.c-badge.c-warning{background:var(--sd-warning-light);color:var(--sd-warning)}.c-badge.c-warning.c-badge--tag{border:1px solid var(--sd-warning)}.c-badge.c-success{background:var(--sd-success-light);color:var(--sd-success)}.c-badge.c-success.c-badge--tag{border:1px solid var(--sd-success)}.c-badge.c-error{background:var(--sd-error-light);color:var(--sd-error)}.c-badge.c-error.c-badge--tag{border:1px solid var(--sd-error)}.c-badge.c-badge--tag{border-radius:4px;padding:1px 7px}.c-badge.c-badge--tag .c-material-icon{padding:0}.c-badge.c-badge--tag .c-material-icon.c-xs,.c-badge.c-badge--tag .c-material-icon.c-sm,.c-badge.c-badge--tag .c-material-icon.c-md,.c-badge.c-badge--tag .c-material-icon.c-lg{line-height:20px}.c-badge-icon{min-width:50px}.c-badge-icon .c-material-icon{border-radius:50%;padding:2px 2px 2px 0}.c-badge-icon .c-material-icon.c-xs{width:18px;height:18px;font-size:14px}.c-badge-icon .c-material-icon.c-sm{width:20px;height:20px;font-size:16px}.c-badge-icon .c-material-icon.c-md{width:22px;height:22px;font-size:18px}.c-badge-icon .c-material-icon.c-lg{width:28px;height:28px;font-size:24px}.c-badge-icon .c-material-icon.c-primary{color:var(--sd-primary)}.c-badge-icon .c-material-icon.c-secondary{color:var(--sd-secondary)}.c-badge-icon .c-material-icon.c-black400{color:var(--sd-black400)}.c-badge-icon .c-material-icon.c-info{color:var(--sd-info)}.c-badge-icon .c-material-icon.c-success{color:var(--sd-success)}.c-badge-icon .c-material-icon.c-error{color:var(--sd-error)}.c-badge-icon .c-material-icon.c-warning{color:var(--sd-warning)}.c-badge-description{color:var(--sd-black400)}::ng-deep .sd-multiline-tooltip{white-space:pre-line}\n"] }]
+        }], propDecorators: { click: [{
                 type: Output
             }] } });

package/fesm2022/sd-angular-core-components-badge.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sd-angular-core-components-badge.mjs","sources":["../../../projects/sd-angular/components/badge/src/badge.component.ts","../../../projects/sd-angular/components/badge/src/badge.component.html","../../../projects/sd-angular/components/badge/sd-angular-core-components-badge.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename /\r\nimport { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { SdColor, SdSize } from '@sd-angular/core/utilities/models';\r\n\r\n@Component({\r\n selector: 'sd-badge',\r\n templateUrl: './badge.component.html',\r\n styleUrls: ['./badge.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n standalone: true,\r\n imports: [CommonModule, MatIconModule, MatTooltipModule],\r\n})\r\nexport class SdBadge {\r\n defaultIcon = 'fiber_manual_record';\r\n\r\n type: 'tag' \| 'round' \| 'icon' = 'icon';\r\n @Input('type') set _type(type: 'tag' \| 'round' \| 'icon' \| undefined \| null) {\r\n this.type = type \|\| 'icon';\r\n }\r\n\r\n color: SdColor = 'secondary';\r\n @Input('color') set _color(color: SdColor \| undefined \| null) {\r\n this.color = color \|\| 'secondary';\r\n }\r\n\r\n // Hỗ trợ: <sd-button secondary> hoặc <sd-button [secondary]=\"condition\">\r\n @Input() set primary(value: boolean \| '') {\r\n if (value === '' \|\| value) {\r\n this.color = 'primary';\r\n }\r\n }\r\n\r\n @Input() set secondary(value: boolean \| '') {\r\n // Nếu value là '' (viết tắt <sd-button secondary>) hoặc true\r\n if (value === '' \|\| value) {\r\n this.color = 'secondary';\r\n }\r\n }\r\n\r\n @Input() set success(value: boolean \| '' \| undefined \| null) {\r\n // Nếu value là '' (viết tắt <sd-button secondary>) hoặc true\r\n if (value === '' \|\| value) {\r\n this.color = 'success';\r\n }\r\n }\r\n\r\n @Input() set info(value: boolean \| '' \| undefined \| null) {\r\n // Nếu value là '' (viết tắt <sd-button secondary>) hoặc true\r\n if (value === '' \|\| value) {\r\n this.color = 'info';\r\n }\r\n }\r\n\r\n @Input() set warning(value: boolean \| '' \| undefined \| null) {\r\n // Nếu value là '' (viết tắt <sd-button secondary>) hoặc true\r\n if (value === '' \|\| value) {\r\n this.color = 'warning';\r\n }\r\n }\r\n\r\n @Input() set error(value: boolean \| '' \| undefined \| null) {\r\n // Nếu value là '' (viết tắt <sd-button secondary>) hoặc true\r\n if (value === '' \|\| value) {\r\n this.color = 'error';\r\n }\r\n }\r\n\r\n fontSet: 'material-icons' \| 'material-icons-outlined' \| 'material-icons-round' \| 'material-icons-sharp' = 'material-icons';\r\n @Input('fontSet') set _fontSet(\r\n fontSet: 'material-icons' \| 'material-icons-outlined' \| 'material-icons-round' \| 'material-icons-sharp' \| undefined \| null\r\n ) {\r\n this.fontSet = fontSet \|\| 'material-icons';\r\n }\r\n @Input() title: string \| number \| undefined \| null;\r\n @Input() description: string \| undefined \| null;\r\n @Input() tooltip: string \| undefined \| null;\r\n @Input() icon: string \| undefined \| null;\r\n\r\n @Input() size: SdSize = 'sm';\r\n @Output() sdClick = new EventEmitter();\r\n onClick = (event: Event) => {\r\n this.sdClick.emit(event);\r\n };\r\n}\r\n","@if (type === 'round') {\r\n <div\r\n class=\"c-badge\"\r\n matTooltipPosition=\"above\"\r\n [matTooltip]=\"tooltip\"\r\n matTooltipClass=\"sd-multiline-tooltip\"\r\n [class.c-primary]=\"color === 'primary'\"\r\n [class.c-secondary]=\"color === 'secondary'\"\r\n [class.c-info]=\"color === 'info'\"\r\n [class.c-success]=\"color === 'success'\"\r\n [class.c-warning]=\"color === 'warning'\"\r\n [class.c-error]=\"color === 'error'\"\r\n [class.pointer]=\"!!sdClick.observers.length\"\r\n (click)=\"onClick($event)\"\r\n aria-hidden=\"true\">\r\n {{ title }}\r\n </div>\r\n} @else if (type === 'tag') {\r\n <div\r\n class=\"c-badge c-badge--tag\"\r\n matTooltipPosition=\"above\"\r\n [matTooltip]=\"tooltip\"\r\n matTooltipClass=\"sd-multiline-tooltip\"\r\n [class.c-primary]=\"color === 'primary'\"\r\n [class.c-secondary]=\"color === 'secondary'\"\r\n [class.c-info]=\"color === 'info'\"\r\n [class.c-success]=\"color === 'success'\"\r\n [class.c-warning]=\"color === 'warning'\"\r\n [class.c-error]=\"color === 'error'\"\r\n [class.pointer]=\"!!sdClick.observers.length\"\r\n (click)=\"onClick($event)\"\r\n aria-hidden=\"true\">\r\n <div class=\"c-icon d-flex align-items-center\">\r\n @if (icon) {\r\n <span\r\n class=\"c-material-icon mr-4\"\r\n [class]=\"{\r\n 'c-xs': size === 'xs',\r\n 'c-sm': size === 'sm',\r\n 'c-md': size === 'md',\r\n 'c-lg': size === 'lg',\r\n 'material-icons': fontSet === 'material-icons',\r\n 'material-icons-outlined': fontSet === 'material-icons-outlined',\r\n 'material-icons-round': fontSet === 'material-icons-round',\r\n 'material-icons-sharp': fontSet === 'material-icons-sharp'\r\n }\"\r\n [class.c-primary]=\"color === 'primary'\"\r\n [class.c-secondary]=\"color === 'secondary'\"\r\n [class.c-info]=\"color === 'info'\"\r\n [class.c-success]=\"color === 'success'\"\r\n [class.c-warning]=\"color === 'warning'\"\r\n [class.c-error]=\"color === 'error'\">\r\n {{ icon \|\| defaultIcon }}\r\n </span>\r\n }\r\n <div class=\"d-flex flex-column align-items-start\">\r\n <span class=\"T14R c-badge-title\">{{ title }}</span>\r\n @if (description) {\r\n <span class=\"T12R c-badge-description\">{{ description }}</span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n} @else {\r\n <div\r\n class=\"d-flex\"\r\n matTooltipPosition=\"above\"\r\n [matTooltip]=\"tooltip\"\r\n matTooltipClass=\"sd-multiline-tooltip\"\r\n [class.c-badge-icon]=\"type === 'icon'\"\r\n [class.c-primary]=\"color === 'primary'\"\r\n [class.c-secondary]=\"color === 'secondary'\"\r\n [class.c-info]=\"color === 'info'\"\r\n [class.c-success]=\"color === 'success'\"\r\n [class.c-warning]=\"color === 'warning'\"\r\n [class.c-error]=\"color === 'error'\"\r\n [class.pointer]=\"!!sdClick.observers.length\"\r\n (click)=\"onClick($event)\"\r\n aria-hidden=\"true\">\r\n <div class=\"c-icon d-flex align-items-center\">\r\n <span\r\n class=\"c-material-icon mr-4\"\r\n [class]=\"{\r\n 'c-xs': size === 'xs',\r\n 'c-sm': size === 'sm',\r\n 'c-md': size === 'md',\r\n 'c-lg': size === 'lg',\r\n 'material-icons': fontSet === 'material-icons',\r\n 'material-icons-outlined': fontSet === 'material-icons-outlined',\r\n 'material-icons-round': fontSet === 'material-icons-round',\r\n 'material-icons-sharp': fontSet === 'material-icons-sharp'\r\n }\"\r\n [class.c-primary]=\"color === 'primary'\"\r\n [class.c-secondary]=\"color === 'secondary'\"\r\n [class.c-info]=\"color === 'info'\"\r\n [class.c-success]=\"color === 'success'\"\r\n [class.c-warning]=\"color === 'warning'\"\r\n [class.c-error]=\"color === 'error'\">\r\n {{ icon \|\| defaultIcon }}\r\n </span>\r\n <div class=\"d-flex flex-column\">\r\n <span class=\"T14R c-badge-title\">{{ title }}</span>\r\n @if (description) {\r\n <span class=\"T12R c-badge-description\">{{ description }}</span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"sd-angular-core-components-badge.mjs","sources":["../../../projects/sd-angular/components/badge/src/badge.component.ts","../../../projects/sd-angular/components/badge/src/badge.component.html","../../../projects/sd-angular/components/badge/sd-angular-core-components-badge.ts"],"sourcesContent":["/* eslint-disable @angular-eslint/no-input-rename /\r\nimport { CommonModule } from '@angular/common';\r\nimport { ChangeDetectionStrategy, Component, EventEmitter, Output, booleanAttribute, computed, input } from '@angular/core';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { SdColor, SdSize } from '@sd-angular/core/utilities/models';\r\nimport { MaterialIconFontSet, DefaultMaterialIconFontSet } from '@sd-angular/core/utilities/models';\r\n\r\n// Export các Type để dùng chung\r\nexport type SdBadgeType = 'tag' \| 'round' \| 'icon';\r\n\r\n@Component({\r\n selector: 'sd-badge',\r\n templateUrl: './badge.component.html',\r\n styleUrls: ['./badge.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n standalone: true,\r\n imports: [CommonModule, MatIconModule, MatTooltipModule],\r\n})\r\nexport class SdBadge {\r\n defaultIcon = 'fiber_manual_record';\r\n\r\n // ==========================================\r\n // 1. SIGNAL INPUTS\r\n // ==========================================\r\n type = input<SdBadgeType, SdBadgeType \| undefined \| null>('icon', {\r\n transform: value => value \|\| 'icon',\r\n });\r\n\r\n color = input<SdColor, SdColor \| undefined \| null>('secondary', {\r\n transform: value => value \|\| 'secondary',\r\n });\r\n\r\n primary = input(false, { transform: booleanAttribute });\r\n secondary = input(false, { transform: booleanAttribute });\r\n success = input(false, { transform: booleanAttribute });\r\n info = input(false, { transform: booleanAttribute });\r\n warning = input(false, { transform: booleanAttribute });\r\n error = input(false, { transform: booleanAttribute });\r\n\r\n fontSet = input<MaterialIconFontSet, MaterialIconFontSet \| undefined \| null>('material-icons', {\r\n transform: value => value \|\| 'material-icons',\r\n });\r\n\r\n title = input<string \| number \| undefined \| null>();\r\n description = input<string \| undefined \| null>();\r\n tooltip = input<string \| undefined \| null>();\r\n icon = input<string \| undefined \| null>();\r\n\r\n size = input<SdSize, SdSize \| undefined \| null>('sm', {\r\n transform: value => value \|\| 'sm',\r\n });\r\n\r\n // ==========================================\r\n // 2. OUTPUT\r\n // ==========================================\r\n @Output() click = new EventEmitter<Event>();\r\n\r\n onClick = (event: Event) => {\r\n event.stopPropagation();\r\n this.click.emit(event);\r\n };\r\n\r\n // ==========================================\r\n // 3. COMPUTED STATE\r\n // ==========================================\r\n\r\n effectiveColor = computed(() => {\r\n if (this.primary()) return 'primary';\r\n if (this.secondary()) return 'secondary';\r\n if (this.success()) return 'success';\r\n if (this.info()) return 'info';\r\n if (this.warning()) return 'warning';\r\n if (this.error()) return 'error';\r\n return this.color();\r\n });\r\n\r\n baseColorClasses = computed(() => {\r\n const c = this.effectiveColor();\r\n return {\r\n 'c-primary': c === 'primary',\r\n 'c-secondary': c === 'secondary',\r\n 'c-info': c === 'info',\r\n 'c-success': c === 'success',\r\n 'c-warning': c === 'warning',\r\n 'c-error': c === 'error',\r\n };\r\n });\r\n\r\n iconColorClasses = computed(() => {\r\n const c = this.effectiveColor();\r\n return {\r\n 'c-primary': c === 'primary',\r\n 'c-black400': c === 'secondary',\r\n 'c-info': c === 'info',\r\n 'c-success': c === 'success',\r\n 'c-warning': c === 'warning',\r\n 'c-error': c === 'error',\r\n };\r\n });\r\n\r\n iconSizeAndFontClasses = computed(() => {\r\n const s = this.size();\r\n const f = this.fontSet();\r\n return {\r\n 'c-xs': s === 'xs',\r\n 'c-sm': s === 'sm',\r\n 'c-md': s === 'md',\r\n 'c-lg': s === 'lg',\r\n 'material-icons': f === 'material-icons',\r\n 'material-icons-outlined': f === 'material-icons-outlined',\r\n 'material-icons-round': f === 'material-icons-round',\r\n 'material-icons-sharp': f === 'material-icons-sharp',\r\n };\r\n });\r\n\r\n // GỘP CLASS CHO BADGE TYPE = 'TAG'\r\n tagIconCombinedClasses = computed(() => ({\r\n ...this.iconSizeAndFontClasses(),\r\n ...this.baseColorClasses(),\r\n }));\r\n\r\n // GỘP CLASS CHO BADGE TYPE = 'ICON'\r\n iconCombinedClasses = computed(() => ({\r\n ...this.iconSizeAndFontClasses(),\r\n ...this.iconColorClasses(),\r\n }));\r\n}\r\n","@let badgeType = type();\r\n@let tt = tooltip();\r\n@let titleText = title();\r\n@let descText = description();\r\n@let iconName = icon() \|\| defaultIcon;\r\n@let isPointer = click.observed;\r\n\r\n@if (badgeType === 'round') {\r\n <div\r\n class=\"c-badge\"\r\n matTooltipPosition=\"above\"\r\n [matTooltip]=\"tt \|\| ''\"\r\n matTooltipClass=\"sd-multiline-tooltip\"\r\n [ngClass]=\"baseColorClasses()\"\r\n [class.pointer]=\"isPointer\"\r\n (click)=\"onClick($event)\"\r\n aria-hidden=\"true\">\r\n {{ titleText }}\r\n </div>\r\n} @else if (badgeType === 'tag') {\r\n <div\r\n class=\"c-badge c-badge--tag\"\r\n matTooltipPosition=\"above\"\r\n [matTooltip]=\"tt \|\| ''\"\r\n matTooltipClass=\"sd-multiline-tooltip\"\r\n [ngClass]=\"baseColorClasses()\"\r\n [class.pointer]=\"isPointer\"\r\n (click)=\"onClick($event)\"\r\n aria-hidden=\"true\">\r\n <div class=\"c-icon d-flex align-items-center\">\r\n @if (icon()) {\r\n <span class=\"c-material-icon mr-4\" [ngClass]=\"tagIconCombinedClasses()\">\r\n {{ iconName }}\r\n </span>\r\n }\r\n <div class=\"d-flex flex-column align-items-start\">\r\n <span class=\"T14R c-badge-title\">{{ titleText }}</span>\r\n @if (descText) {\r\n <span class=\"T12R c-badge-description\">{{ descText }}</span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n} @else {\r\n <div\r\n class=\"d-flex\"\r\n matTooltipPosition=\"above\"\r\n [matTooltip]=\"tt \|\| ''\"\r\n matTooltipClass=\"sd-multiline-tooltip\"\r\n [class.c-badge-icon]=\"badgeType === 'icon'\"\r\n [class.pointer]=\"isPointer\"\r\n (click)=\"onClick($event)\"\r\n aria-hidden=\"true\">\r\n <div class=\"c-icon d-flex align-items-center\">\r\n <span class=\"c-material-icon mr-4\" [ngClass]=\"iconCombinedClasses()\">\r\n {{ iconName }}\r\n </span>\r\n <div class=\"d-flex flex-column\">\r\n <span class=\"T14R c-badge-title\">{{ titleText }}</span>\r\n @if (descText) {\r\n <span class=\"T10R c-badge-description\">{{ descText }}</span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}