npm - @testgorilla/tgo-ui - Versions diffs - 6.4.5-beta.1 → 7.0.0-beta.0 - Mend

@testgorilla/tgo-ui 6.4.5-beta.1 → 7.0.0-beta.0

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 (516) hide show

package/fesm2022/testgorilla-tgo-ui-components-tabs.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"testgorilla-tgo-ui-components-tabs.mjs","sources":["../../../components/tabs/tabs.model.ts","../../../components/tabs/tabs.component.ts","../../../components/tabs/tabs.component.html","../../../components/tabs/tab.directive.ts","../../../components/tabs/tabs.component.module.ts","../../../components/tabs/testgorilla-tgo-ui-components-tabs.ts"],"sourcesContent":["import { IconName } from '@testgorilla/tgo-ui/components/icon';\nimport { NgxSkeletonLoaderConfigTheme } from 'ngx-skeleton-loader';\n\nexport interface Tab {\n tabName: string;\n tabLabel: string;\n contentTemplateRef: any;\n iconLeft?: IconName;\n iconRight?: IconName;\n disabled?: boolean;\n canLeave?: (ctx?: { currentTab: Tab; nextTab: Tab }) => boolean \| Promise<boolean>;\n linkUrl?: string;\n ariaLabel?: string;\n order?: number;\n skeletonTheme?: NgxSkeletonLoaderConfigTheme;\n isSkeletonAiTheme?: boolean;\n}\n\nexport type TabsType = 'underlined' \| 'filled';\n\nexport const TAB_HEADER_SIZE = {\n BIG: 'big',\n MEDIUM: 'medium',\n SMALL: 'small',\n} as const;\n\nexport type TabHeaderSize = (typeof TAB_HEADER_SIZE)[keyof typeof TAB_HEADER_SIZE];\n","import { ENTER, hasModifierKey, SPACE } from '@angular/cdk/keycodes';\nimport {\n booleanAttribute,\n Component,\n EventEmitter,\n HostBinding,\n Inject,\n input,\n Input,\n Optional,\n Output,\n signal,\n ViewChild,\n AfterViewInit,\n} from '@angular/core';\nimport { MatTab, MatTabGroup } from '@angular/material/tabs';\nimport { ApplicationTheme, IS_MOBILE_TOKEN } from '@testgorilla/tgo-ui/components/core';\nimport { Observable } from 'rxjs';\nimport { Tab, TAB_HEADER_SIZE, TabHeaderSize, TabsType } from './tabs.model';\n\n@Component({\n selector: 'ui-tabs',\n templateUrl: './tabs.component.html',\n styleUrls: ['./tabs.component.scss'],\n standalone: false,\n})\nexport class TabsComponent implements AfterViewInit {\n /*\n Color of the Tabs.\n * Defaults to Test Gorilla primary color.\n \n @type {string}\n * @memberof TabsComponent\n /\n @HostBinding('style.--color')\n @Input()\n companyColor: string \| null = '#46A997';\n /\n Type the Tabs.\n * Defaults underlined.\n \n @type {TabsType}\n * @memberof TabsComponent\n /\n @Input() type: TabsType = 'underlined';\n\n /\n Animation duration when switching tabs\n \n @type {number}\n * @memberof TabsComponent\n /\n @Input() animationDuration = 300;\n\n /\n Sets the padding for content and header\n \n @type {number}\n * @memberof TabsComponent\n /\n @HostBinding('style.--header-content-padding')\n @Input({ transform: (value: number): string => `${value}px` })\n headerContentPadding = '32px';\n\n /\n Sets the dynamic height of the tab\n * @type {boolean}\n * @memberof TabsComponent\n /\n @Input({ transform: booleanAttribute }) dynamicHeight = true;\n\n /\n \n * Defines the application theme\n \n @type {ApplicationTheme}\n * @memberof TabsComponent\n /\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n tabHeaderSize = input<TabHeaderSize>(TAB_HEADER_SIZE.BIG);\n\n isLoading = input(false);\n\n @Output() selectedTabIndex = new EventEmitter<number>();\n @Output() selectedTab = new EventEmitter<Tab>();\n\n @ViewChild('tabGroup', { static: true }) tabGroup: MatTabGroup;\n\n protected tabs: Tab[] = [];\n readonly tabIndex = signal(0);\n protected tabIndexMap: Record<string, number> = {};\n\n // Counter for default ordering when order is not specified\n private insertionCounter = 0;\n private tabTransitionInProgress = false;\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,\n @Inject(IS_MOBILE_TOKEN) protected readonly isMobile$: Observable<boolean>\n ) {\n if (defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n }\n }\n\n ngAfterViewInit(): void {\n setTimeout(() => {\n const tabHeader = (this.tabGroup as any)._tabHeader;\n tabHeader._handleKeydown = async (event: KeyboardEvent) => {\n if (hasModifierKey(event) \|\| this.tabTransitionInProgress) {\n return;\n }\n switch (event.keyCode) {\n case ENTER:\n case SPACE:\n this.tabTransitionInProgress = true;\n try {\n const tabLabel = (event.target as HTMLElement).innerText;\n const currentTab = this.tabs[this.tabIndex()];\n const nextTab = this.tabs.find(tab => tab.tabLabel === tabLabel);\n\n if (!nextTab) {\n return;\n }\n\n const canLeave = (await currentTab.canLeave?.({ currentTab, nextTab })) ?? true;\n if (currentTab.tabName !== nextTab.tabName && canLeave) {\n const nextTabIndex = this.tabIndexMap[nextTab.tabName];\n this.tabIndex.set(nextTabIndex);\n this.selectedTabIndex.emit(nextTabIndex);\n this.selectedTab.emit(nextTab);\n }\n } finally {\n this.tabTransitionInProgress = false;\n }\n break;\n default:\n tabHeader._keyManager.onKeydown(event);\n }\n };\n\n (this.tabGroup as any)._handleClick = async (tab: MatTab, tabHeader: any, index: number) => {\n if (tab.disabled \|\| index === this.tabIndex() \|\| this.tabTransitionInProgress) {\n return;\n }\n this.tabTransitionInProgress = true;\n try {\n const currentTab = this.tabs[this.tabIndex()];\n const nextTab = this.tabs[index];\n const canLeave = (await currentTab.canLeave?.({ currentTab, nextTab })) ?? true;\n if (this.tabIndex() !== index && canLeave) {\n this.tabIndex.set(index);\n this.selectedTabIndex.emit(index);\n this.selectedTab.emit(nextTab);\n }\n } finally {\n this.tabTransitionInProgress = false;\n }\n };\n });\n }\n\n addTab(tab: Tab): void {\n // If no explicit order is provided, use the insertion counter\n if (tab.order === undefined) {\n tab.order = this.insertionCounter++;\n }\n\n // Add the tab and sort the tabs array\n this.tabs.push(tab);\n this.sortTabs();\n\n // Update the index map\n this.updateTabIndexMap();\n }\n\n private sortTabs(): void {\n // Sort by the order property (lowest first)\n this.tabs.sort((a, b) => {\n const orderA = a.order ?? Infinity;\n const orderB = b.order ?? Infinity;\n return orderA - orderB;\n });\n }\n\n private updateTabIndexMap(): void {\n // Update the index map after sorting\n this.tabs.forEach((tab, index) => {\n this.tabIndexMap[tab.tabName] = index;\n });\n }\n\n onTabChange(index: number): void {\n const selectedTab = this.tabs[index];\n const newIndex = this.tabIndexMap[selectedTab.tabName];\n if (this.tabIndex() === newIndex) {\n return;\n }\n this.tabIndex.set(newIndex);\n this.selectedTabIndex.emit(index);\n this.selectedTab.emit(selectedTab);\n }\n\n selectTab(tabName: string): void {\n const index = this.tabIndexMap[tabName];\n if (index !== undefined) {\n this.tabIndex.set(index);\n this.selectedTabIndex.emit(index);\n this.selectedTab.emit(this.tabs[index]);\n }\n }\n\n indexOf(tabName: string): number {\n return this.tabIndexMap[tabName] ?? -1;\n }\n\n trackByTabName(index: number, tab: Tab): string {\n return tab.tabName;\n }\n\n removeTab(tabName: string): void {\n const index = this.tabIndexMap[tabName];\n if (index !== undefined) {\n this.tabs.splice(index, 1);\n delete this.tabIndexMap[tabName];\n this.updateTabIndexMap();\n }\n }\n\n updateTab(tabName: string, tab: Partial<Omit<Tab, 'tabName'>>): void {\n const index = this.tabIndexMap[tabName];\n if (index !== undefined) {\n this.tabs[index] = { ...this.tabs[index], ...tab };\n\n // Re-sort if the order changed\n if (tab.order !== undefined) {\n this.sortTabs();\n this.updateTabIndexMap();\n }\n }\n }\n}\n","<mat-tab-group\n #tabGroup\n headerPosition=\"above\"\n class=\"tabs-container\"\n [ngClass]=\"['tabs-type-' + ((isMobile$ \| async) ? 'underlined' : type), 'tabs-header-size-' + tabHeaderSize()]\"\n [class.tabs-container-loading]=\"isLoading()\"\n [attr.theme]=\"applicationTheme\"\n [dynamicHeight]=\"dynamicHeight\"\n [selectedIndex]=\"tabIndex()\"\n [animationDuration]=\"animationDuration\"\n (selectedIndexChange)=\"onTabChange($event)\"\n role=\"tablist\"\n>\n <mat-tab\n ngFor=\"let tab of tabs; trackBy: trackByTabName; let i = index\"\n [disabled]=\"tab.disabled ?? false\"\n [attr.aria-label]=\"tab?.ariaLabel\"\n >\n <ng-template mat-tab-label>\n <a\n data-test-role=\"tab-link\"\n [attr.data-testid]=\"tab.tabName\"\n class=\"tab-name\"\n [href]=\"tab?.linkUrl ? tab.linkUrl : '#'\"\n (click)=\"$event.preventDefault()\"\n [attr.aria-selected]=\"i === tabIndex()\"\n [attr.aria-label]=\"tab.tabLabel + (i === tabIndex() ? ', ' + ('TABS.SELECTED' \| uiTranslate \| async) : '')\"\n role=\"tab\"\n >\n @if (isLoading()) {\n <ui-skeleton\n [count]=\"1\"\n [theme]=\"tab.skeletonTheme ?? {}\"\n [isAiTheme]=\"!!tab.isSkeletonAiTheme\"\n ></ui-skeleton>\n } @else {\n <ui-icon\n color=\"rebrand-black\"\n [size]=\"'24'\"\n [tabindex]=\"1\"\n class=\"left-icon\"\n [name]=\"tab.iconLeft!\"\n ngIf=\"tab?.iconLeft\"\n ></ui-icon>\n <span class=\"label\">{{ tab.tabLabel }}</span>\n <ui-icon\n color=\"rebrand-black\"\n [size]=\"'24'\"\n class=\"right-icon\"\n [name]=\"tab.iconRight!\"\n ngIf=\"tab?.iconRight\"\n ></ui-icon>\n }\n </a>\n </ng-template>\n <div role=\"tabpanel\" [attr.id]=\"'tabpanel-' + i\" [attr.aria-labelledby]=\"'tab-' + i\">\n <ng-container ngTemplateOutlet=\"tab.contentTemplateRef\"></ng-container>\n </div>\n </mat-tab>\n</mat-tab-group>\n","import { booleanAttribute, DestroyRef, Directive, effect, inject, input, OnInit, TemplateRef } from '@angular/core';\nimport { IconName } from '@testgorilla/tgo-ui/components/icon';\nimport { TabsComponent } from './tabs.component';\nimport { Tab } from './tabs.model';\nimport { NgxSkeletonLoaderConfigTheme } from 'ngx-skeleton-loader';\n\n@Directive({\n standalone: true,\n selector: 'ng-template[uiTab]',\n})\nexport class TabDirective implements OnInit {\n tabLabel = input.required<string>();\n tabName = input.required<string>();\n iconLeft = input<IconName>();\n iconRight = input<IconName>();\n disabled = input<boolean, string>(false, { transform: booleanAttribute });\n canLeave = input<(ctx?: { currentTab: Tab; nextTab: Tab }) => boolean \| Promise<boolean>>();\n linkUrl = input<string>();\n order = input<number>();\n skeletonTheme = input<NgxSkeletonLoaderConfigTheme>();\n isSkeletonAiTheme = input<boolean>();\n\n private tabsComponent = inject(TabsComponent);\n private template = inject(TemplateRef);\n\n private syncProps = effect(() => {\n this.tabsComponent.updateTab(this.tabName(), {\n tabLabel: this.tabLabel(),\n iconLeft: this.iconLeft(),\n iconRight: this.iconRight(),\n disabled: this.disabled(),\n canLeave: this.canLeave(),\n linkUrl: this.linkUrl(),\n order: this.order(),\n skeletonTheme: this.skeletonTheme(),\n isSkeletonAiTheme: this.isSkeletonAiTheme(),\n });\n });\n\n private cleanup = inject(DestroyRef).onDestroy(() => {\n this.tabsComponent.removeTab(this.tabName());\n });\n\n ngOnInit(): void {\n this.addTab();\n }\n\n private addTab(): void {\n this.tabsComponent.addTab({\n tabLabel: this.tabLabel(),\n tabName: this.tabName(),\n iconLeft: this.iconLeft(),\n iconRight: this.iconRight(),\n disabled: this.disabled(),\n contentTemplateRef: this.template,\n canLeave: this.canLeave(),\n linkUrl: this.linkUrl(),\n order: this.order(),\n skeletonTheme: this.skeletonTheme(),\n isSkeletonAiTheme: this.isSkeletonAiTheme(),\n });\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TabsComponent } from './tabs.component';\nimport { MatTabsModule } from '@angular/material/tabs';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { TabDirective } from './tab.directive';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { SkeletonComponent } from '@testgorilla/tgo-ui/components/skeleton';\n\n@NgModule({\n declarations: [TabsComponent],\n imports: [TabDirective, CommonModule, MatTabsModule, IconComponentModule, UiTranslatePipe, SkeletonComponent],\n exports: [TabsComponent, TabDirective],\n})\nexport class TabsComponentModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"testgorilla-tgo-ui-components-tabs.mjs","sources":["../../../components/tabs/tabs.model.ts","../../../components/tabs/tabs.component.ts","../../../components/tabs/tabs.component.html","../../../components/tabs/tab.directive.ts","../../../components/tabs/tabs.component.module.ts","../../../components/tabs/testgorilla-tgo-ui-components-tabs.ts"],"sourcesContent":["import { IconName } from '@testgorilla/tgo-ui/components/icon';\nimport { NgxSkeletonLoaderConfigTheme } from 'ngx-skeleton-loader';\n\nexport interface Tab {\n tabName: string;\n tabLabel: string;\n contentTemplateRef: any;\n iconLeft?: IconName;\n iconRight?: IconName;\n disabled?: boolean;\n canLeave?: (ctx?: { currentTab: Tab; nextTab: Tab }) => boolean \| Promise<boolean>;\n linkUrl?: string;\n ariaLabel?: string;\n order?: number;\n skeletonTheme?: NgxSkeletonLoaderConfigTheme;\n isSkeletonAiTheme?: boolean;\n}\n\nexport type TabsType = 'underlined' \| 'filled';\n\nexport const TAB_HEADER_SIZE = {\n BIG: 'big',\n MEDIUM: 'medium',\n SMALL: 'small',\n} as const;\n\nexport type TabHeaderSize = (typeof TAB_HEADER_SIZE)[keyof typeof TAB_HEADER_SIZE];\n","import { ENTER, hasModifierKey, SPACE } from '@angular/cdk/keycodes';\nimport {\n booleanAttribute,\n Component,\n EventEmitter,\n HostBinding,\n Inject,\n input,\n Input,\n Optional,\n Output,\n signal,\n ViewChild,\n AfterViewInit,\n} from '@angular/core';\nimport { MatTab, MatTabGroup } from '@angular/material/tabs';\nimport { ApplicationTheme, IS_MOBILE_TOKEN } from '@testgorilla/tgo-ui/components/core';\nimport { Observable } from 'rxjs';\nimport { Tab, TAB_HEADER_SIZE, TabHeaderSize, TabsType } from './tabs.model';\n\n@Component({\n selector: 'ui-tabs',\n templateUrl: './tabs.component.html',\n styleUrls: ['./tabs.component.scss'],\n standalone: false,\n})\nexport class TabsComponent implements AfterViewInit {\n /*\n Color of the Tabs.\n * Defaults to Test Gorilla primary color.\n \n @type {string}\n * @memberof TabsComponent\n /\n @HostBinding('style.--color')\n @Input()\n companyColor: string \| null = '#46A997';\n /\n Type the Tabs.\n * Defaults underlined.\n \n @type {TabsType}\n * @memberof TabsComponent\n /\n @Input() type: TabsType = 'underlined';\n\n /\n Animation duration when switching tabs\n \n @type {number}\n * @memberof TabsComponent\n /\n @Input() animationDuration = 300;\n\n /\n Sets the padding for content and header\n \n @type {number}\n * @memberof TabsComponent\n /\n @HostBinding('style.--header-content-padding')\n @Input({ transform: (value: number): string => `${value}px` })\n headerContentPadding = '32px';\n\n /\n Sets the dynamic height of the tab\n * @type {boolean}\n * @memberof TabsComponent\n /\n @Input({ transform: booleanAttribute }) dynamicHeight = true;\n\n /\n \n * Defines the application theme\n \n @type {ApplicationTheme}\n * @memberof TabsComponent\n /\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n tabHeaderSize = input<TabHeaderSize>(TAB_HEADER_SIZE.BIG);\n\n isLoading = input(false);\n\n @Output() selectedTabIndex = new EventEmitter<number>();\n @Output() selectedTab = new EventEmitter<Tab>();\n\n @ViewChild('tabGroup', { static: true }) tabGroup: MatTabGroup;\n\n protected tabs: Tab[] = [];\n readonly tabIndex = signal(0);\n protected tabIndexMap: Record<string, number> = {};\n\n // Counter for default ordering when order is not specified\n private insertionCounter = 0;\n private tabTransitionInProgress = false;\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,\n @Inject(IS_MOBILE_TOKEN) protected readonly isMobile$: Observable<boolean>\n ) {\n if (defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n }\n }\n\n ngAfterViewInit(): void {\n setTimeout(() => {\n const tabHeader = (this.tabGroup as any)._tabHeader;\n tabHeader._handleKeydown = async (event: KeyboardEvent) => {\n if (hasModifierKey(event) \|\| this.tabTransitionInProgress) {\n return;\n }\n switch (event.keyCode) {\n case ENTER:\n case SPACE:\n this.tabTransitionInProgress = true;\n try {\n const tabLabel = (event.target as HTMLElement).innerText;\n const currentTab = this.tabs[this.tabIndex()];\n const nextTab = this.tabs.find(tab => tab.tabLabel === tabLabel);\n\n if (!nextTab) {\n return;\n }\n\n const canLeave = (await currentTab.canLeave?.({ currentTab, nextTab })) ?? true;\n if (currentTab.tabName !== nextTab.tabName && canLeave) {\n const nextTabIndex = this.tabIndexMap[nextTab.tabName];\n this.tabIndex.set(nextTabIndex);\n this.selectedTabIndex.emit(nextTabIndex);\n this.selectedTab.emit(nextTab);\n }\n } finally {\n this.tabTransitionInProgress = false;\n }\n break;\n default:\n tabHeader._keyManager.onKeydown(event);\n }\n };\n\n (this.tabGroup as any)._handleClick = async (tab: MatTab, tabHeader: any, index: number) => {\n if (tab.disabled \|\| index === this.tabIndex() \|\| this.tabTransitionInProgress) {\n return;\n }\n this.tabTransitionInProgress = true;\n try {\n const currentTab = this.tabs[this.tabIndex()];\n const nextTab = this.tabs[index];\n const canLeave = (await currentTab.canLeave?.({ currentTab, nextTab })) ?? true;\n if (this.tabIndex() !== index && canLeave) {\n this.tabIndex.set(index);\n this.selectedTabIndex.emit(index);\n this.selectedTab.emit(nextTab);\n }\n } finally {\n this.tabTransitionInProgress = false;\n }\n };\n });\n }\n\n addTab(tab: Tab): void {\n // If no explicit order is provided, use the insertion counter\n if (tab.order === undefined) {\n tab.order = this.insertionCounter++;\n }\n\n // Add the tab and sort the tabs array\n this.tabs.push(tab);\n this.sortTabs();\n\n // Update the index map\n this.updateTabIndexMap();\n }\n\n private sortTabs(): void {\n // Sort by the order property (lowest first)\n this.tabs.sort((a, b) => {\n const orderA = a.order ?? Infinity;\n const orderB = b.order ?? Infinity;\n return orderA - orderB;\n });\n }\n\n private updateTabIndexMap(): void {\n // Update the index map after sorting\n this.tabs.forEach((tab, index) => {\n this.tabIndexMap[tab.tabName] = index;\n });\n }\n\n onTabChange(index: number): void {\n const selectedTab = this.tabs[index];\n const newIndex = this.tabIndexMap[selectedTab.tabName];\n if (this.tabIndex() === newIndex) {\n return;\n }\n this.tabIndex.set(newIndex);\n this.selectedTabIndex.emit(index);\n this.selectedTab.emit(selectedTab);\n }\n\n selectTab(tabName: string): void {\n const index = this.tabIndexMap[tabName];\n if (index !== undefined) {\n this.tabIndex.set(index);\n this.selectedTabIndex.emit(index);\n this.selectedTab.emit(this.tabs[index]);\n }\n }\n\n indexOf(tabName: string): number {\n return this.tabIndexMap[tabName] ?? -1;\n }\n\n trackByTabName(index: number, tab: Tab): string {\n return tab.tabName;\n }\n\n removeTab(tabName: string): void {\n const index = this.tabIndexMap[tabName];\n if (index !== undefined) {\n this.tabs.splice(index, 1);\n delete this.tabIndexMap[tabName];\n this.updateTabIndexMap();\n }\n }\n\n updateTab(tabName: string, tab: Partial<Omit<Tab, 'tabName'>>): void {\n const index = this.tabIndexMap[tabName];\n if (index !== undefined) {\n this.tabs[index] = { ...this.tabs[index], ...tab };\n\n // Re-sort if the order changed\n if (tab.order !== undefined) {\n this.sortTabs();\n this.updateTabIndexMap();\n }\n }\n }\n}\n","<mat-tab-group\n #tabGroup\n headerPosition=\"above\"\n class=\"tabs-container\"\n [ngClass]=\"['tabs-type-' + ((isMobile$ \| async) ? 'underlined' : type), 'tabs-header-size-' + tabHeaderSize()]\"\n [class.tabs-container-loading]=\"isLoading()\"\n [attr.theme]=\"applicationTheme\"\n [dynamicHeight]=\"dynamicHeight\"\n [selectedIndex]=\"tabIndex()\"\n [animationDuration]=\"animationDuration\"\n (selectedIndexChange)=\"onTabChange($event)\"\n role=\"tablist\"\n>\n @for (tab of tabs; track trackByTabName(i, tab); let i = $index) {\n <mat-tab [disabled]=\"tab.disabled ?? false\" [attr.aria-label]=\"tab?.ariaLabel\">\n <ng-template mat-tab-label>\n <a\n data-test-role=\"tab-link\"\n [attr.data-testid]=\"tab.tabName\"\n class=\"tab-name\"\n [href]=\"tab?.linkUrl ? tab.linkUrl : '#'\"\n (click)=\"$event.preventDefault()\"\n [attr.aria-selected]=\"i === tabIndex()\"\n [attr.aria-label]=\"tab.tabLabel + (i === tabIndex() ? ', ' + ('TABS.SELECTED' \| uiTranslate \| async) : '')\"\n role=\"tab\"\n >\n @if (isLoading()) {\n <ui-skeleton\n [count]=\"1\"\n [theme]=\"tab.skeletonTheme ?? {}\"\n [isAiTheme]=\"!!tab.isSkeletonAiTheme\"\n ></ui-skeleton>\n } @else {\n @if (tab?.iconLeft) {\n <ui-icon\n color=\"rebrand-black\"\n [size]=\"'24'\"\n [tabindex]=\"1\"\n class=\"left-icon\"\n [name]=\"tab.iconLeft!\"\n ></ui-icon>\n }\n <span class=\"label\">{{ tab.tabLabel }}</span>\n @if (tab?.iconRight) {\n <ui-icon color=\"rebrand-black\" [size]=\"'24'\" class=\"right-icon\" [name]=\"tab.iconRight!\"></ui-icon>\n }\n }\n </a>\n </ng-template>\n <div role=\"tabpanel\" [attr.id]=\"'tabpanel-' + i\" [attr.aria-labelledby]=\"'tab-' + i\">\n <ng-container ngTemplateOutlet=\"tab.contentTemplateRef\"></ng-container>\n </div>\n </mat-tab>\n }\n</mat-tab-group>\n","import { booleanAttribute, DestroyRef, Directive, effect, inject, input, OnInit, TemplateRef } from '@angular/core';\nimport { IconName } from '@testgorilla/tgo-ui/components/icon';\nimport { TabsComponent } from './tabs.component';\nimport { Tab } from './tabs.model';\nimport { NgxSkeletonLoaderConfigTheme } from 'ngx-skeleton-loader';\n\n@Directive({\n standalone: true,\n selector: 'ng-template[uiTab]',\n})\nexport class TabDirective implements OnInit {\n tabLabel = input.required<string>();\n tabName = input.required<string>();\n iconLeft = input<IconName>();\n iconRight = input<IconName>();\n disabled = input<boolean, string>(false, { transform: booleanAttribute });\n canLeave = input<(ctx?: { currentTab: Tab; nextTab: Tab }) => boolean \| Promise<boolean>>();\n linkUrl = input<string>();\n order = input<number>();\n skeletonTheme = input<NgxSkeletonLoaderConfigTheme>();\n isSkeletonAiTheme = input<boolean>();\n\n private tabsComponent = inject(TabsComponent);\n private template = inject(TemplateRef);\n\n private syncProps = effect(() => {\n this.tabsComponent.updateTab(this.tabName(), {\n tabLabel: this.tabLabel(),\n iconLeft: this.iconLeft(),\n iconRight: this.iconRight(),\n disabled: this.disabled(),\n canLeave: this.canLeave(),\n linkUrl: this.linkUrl(),\n order: this.order(),\n skeletonTheme: this.skeletonTheme(),\n isSkeletonAiTheme: this.isSkeletonAiTheme(),\n });\n });\n\n private cleanup = inject(DestroyRef).onDestroy(() => {\n this.tabsComponent.removeTab(this.tabName());\n });\n\n ngOnInit(): void {\n this.addTab();\n }\n\n private addTab(): void {\n this.tabsComponent.addTab({\n tabLabel: this.tabLabel(),\n tabName: this.tabName(),\n iconLeft: this.iconLeft(),\n iconRight: this.iconRight(),\n disabled: this.disabled(),\n contentTemplateRef: this.template,\n canLeave: this.canLeave(),\n linkUrl: this.linkUrl(),\n order: this.order(),\n skeletonTheme: this.skeletonTheme(),\n isSkeletonAiTheme: this.isSkeletonAiTheme(),\n });\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TabsComponent } from './tabs.component';\nimport { MatTabsModule } from '@angular/material/tabs';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { TabDirective } from './tab.directive';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { SkeletonComponent } from '@testgorilla/tgo-ui/components/skeleton';\n\n@NgModule({\n declarations: [TabsComponent],\n imports: [TabDirective, CommonModule, MatTabsModule, IconComponentModule, UiTranslatePipe, SkeletonComponent],\n exports: [TabsComponent, TabDirective],\n})\nexport class TabsComponentModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAoBO,MAAM,eAAe,GAAG;AAC7B,IAAA,GAAG,EAAE,KAAK;AACV,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,KAAK,EAAE,OAAO;;;MCGH,aAAa,CAAA;IAuExB,WAAA,CAC6E,eAAiC,EAChE,SAA8B,EAAA;QADC,IAAA,CAAA,eAAe,GAAf,eAAe;QAC9C,IAAA,CAAA,SAAS,GAAT,SAAS;AAxEvD;;;;;;AAMG;QAGH,IAAA,CAAA,YAAY,GAAkB,SAAS;AACvC;;;;;;AAMG;QACM,IAAA,CAAA,IAAI,GAAa,YAAY;AAEtC;;;;;AAKG;QACM,IAAA,CAAA,iBAAiB,GAAG,GAAG;AAEhC;;;;;AAKG;QAGH,IAAA,CAAA,oBAAoB,GAAG,MAAM;AAE7B;;;;AAIG;QACqC,IAAA,CAAA,aAAa,GAAG,IAAI;AAE5D;;;;;;AAMG;QACM,IAAA,CAAA,gBAAgB,GAAqB,OAAO;AAErD,QAAA,IAAA,CAAA,aAAa,GAAG,KAAK,CAAgB,eAAe,CAAC,GAAG,yDAAC;AAEzD,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAC,KAAK,qDAAC;AAEd,QAAA,IAAA,CAAA,gBAAgB,GAAG,IAAI,YAAY,EAAU;AAC7C,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAO;QAIrC,IAAA,CAAA,IAAI,GAAU,EAAE;AACjB,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,CAAC,oDAAC;QACnB,IAAA,CAAA,WAAW,GAA2B,EAAE;;QAG1C,IAAA,CAAA,gBAAgB,GAAG,CAAC;QACpB,IAAA,CAAA,uBAAuB,GAAG,KAAK;QAMrC,IAAI,eAAe,EAAE;AACnB,YAAA,IAAI,CAAC,gBAAgB,GAAG,eAAe;QACzC;IACF;IAEA,eAAe,GAAA;QACb,UAAU,CAAC,MAAK;AACd,YAAA,MAAM,SAAS,GAAI,IAAI,CAAC,QAAgB,CAAC,UAAU;AACnD,YAAA,SAAS,CAAC,cAAc,GAAG,OAAO,KAAoB,KAAI;gBACxD,IAAI,cAAc,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,uBAAuB,EAAE;oBACzD;gBACF;AACA,gBAAA,QAAQ,KAAK,CAAC,OAAO;AACnB,oBAAA,KAAK,KAAK;AACV,oBAAA,KAAK,KAAK;AACR,wBAAA,IAAI,CAAC,uBAAuB,GAAG,IAAI;AACnC,wBAAA,IAAI;AACF,4BAAA,MAAM,QAAQ,GAAI,KAAK,CAAC,MAAsB,CAAC,SAAS;4BACxD,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;AAC7C,4BAAA,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,QAAQ,KAAK,QAAQ,CAAC;4BAEhE,IAAI,CAAC,OAAO,EAAE;gCACZ;4BACF;AAEA,4BAAA,MAAM,QAAQ,GAAG,CAAC,MAAM,UAAU,CAAC,QAAQ,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,KAAK,IAAI;4BAC/E,IAAI,UAAU,CAAC,OAAO,KAAK,OAAO,CAAC,OAAO,IAAI,QAAQ,EAAE;gCACtD,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC;AACtD,gCAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,YAAY,CAAC;AAC/B,gCAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC;AACxC,gCAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;4BAChC;wBACF;gCAAU;AACR,4BAAA,IAAI,CAAC,uBAAuB,GAAG,KAAK;wBACtC;wBACA;AACF,oBAAA;AACE,wBAAA,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC;;AAE5C,YAAA,CAAC;AAEA,YAAA,IAAI,CAAC,QAAgB,CAAC,YAAY,GAAG,OAAO,GAAW,EAAE,SAAc,EAAE,KAAa,KAAI;AACzF,gBAAA,IAAI,GAAG,CAAC,QAAQ,IAAI,KAAK,KAAK,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,uBAAuB,EAAE;oBAC7E;gBACF;AACA,gBAAA,IAAI,CAAC,uBAAuB,GAAG,IAAI;AACnC,gBAAA,IAAI;oBACF,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAC7C,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AAChC,oBAAA,MAAM,QAAQ,GAAG,CAAC,MAAM,UAAU,CAAC,QAAQ,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,KAAK,IAAI;oBAC/E,IAAI,IAAI,CAAC,QAAQ,EAAE,KAAK,KAAK,IAAI,QAAQ,EAAE;AACzC,wBAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;AACxB,wBAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC;AACjC,wBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;oBAChC;gBACF;wBAAU;AACR,oBAAA,IAAI,CAAC,uBAAuB,GAAG,KAAK;gBACtC;AACF,YAAA,CAAC;AACH,QAAA,CAAC,CAAC;IACJ;AAEA,IAAA,MAAM,CAAC,GAAQ,EAAA;;AAEb,QAAA,IAAI,GAAG,CAAC,KAAK,KAAK,SAAS,EAAE;AAC3B,YAAA,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,gBAAgB,EAAE;QACrC;;AAGA,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;QACnB,IAAI,CAAC,QAAQ,EAAE;;QAGf,IAAI,CAAC,iBAAiB,EAAE;IAC1B;IAEQ,QAAQ,GAAA;;QAEd,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;AACtB,YAAA,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,QAAQ;AAClC,YAAA,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,IAAI,QAAQ;YAClC,OAAO,MAAM,GAAG,MAAM;AACxB,QAAA,CAAC,CAAC;IACJ;IAEQ,iBAAiB,GAAA;;QAEvB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,KAAI;YAC/B,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,KAAK;AACvC,QAAA,CAAC,CAAC;IACJ;AAEA,IAAA,WAAW,CAAC,KAAa,EAAA;QACvB,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;QACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,OAAO,CAAC;AACtD,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,KAAK,QAAQ,EAAE;YAChC;QACF;AACA,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC;AAC3B,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC;AACjC,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC;IACpC;AAEA,IAAA,SAAS,CAAC,OAAe,EAAA;QACvB,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;AACvC,QAAA,IAAI,KAAK,KAAK,SAAS,EAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;AACxB,YAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC;AACjC,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACzC;IACF;AAEA,IAAA,OAAO,CAAC,OAAe,EAAA;QACrB,OAAO,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACxC;IAEA,cAAc,CAAC,KAAa,EAAE,GAAQ,EAAA;QACpC,OAAO,GAAG,CAAC,OAAO;IACpB;AAEA,IAAA,SAAS,CAAC,OAAe,EAAA;QACvB,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;AACvC,QAAA,IAAI,KAAK,KAAK,SAAS,EAAE;YACvB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;AAC1B,YAAA,OAAO,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;YAChC,IAAI,CAAC,iBAAiB,EAAE;QAC1B;IACF;IAEA,SAAS,CAAC,OAAe,EAAE,GAAkC,EAAA;QAC3D,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;AACvC,QAAA,IAAI,KAAK,KAAK,SAAS,EAAE;AACvB,YAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,GAAG,EAAE;;AAGlD,YAAA,IAAI,GAAG,CAAC,KAAK,KAAK,SAAS,EAAE;gBAC3B,IAAI,CAAC,QAAQ,EAAE;gBACf,IAAI,CAAC,iBAAiB,EAAE;YAC1B;QACF;IACF;+GAvNW,aAAa,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAwEF,oCAAoC,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,KAAA,EAChD,eAAe,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAzEd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,aAAa,EAAA,YAAA,EAAA,KAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,UAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,oBAAA,EAAA,EAAA,iBAAA,EAAA,sBAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAmCJ,CAAC,KAAa,KAAa,CAAA,EAAG,KAAK,CAAA,EAAA,CAAI,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAQvC,gBAAgB,EAAA,EAAA,gBAAA,EAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,eAAA,EAAA,mBAAA,EAAA,gCAAA,EAAA,2BAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,UAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECrEtC,gnEAuDA,EAAA,MAAA,EAAA,CAAA,uiSAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,WAAA,EAAA,QAAA,EAAA,gCAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,OAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,WAAA,EAAA,IAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,WAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,oBAAA,EAAA,kBAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,eAAA,EAAA,gBAAA,EAAA,mBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,qBAAA,EAAA,aAAA,EAAA,eAAA,EAAA,mBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,OAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,iBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,YAAA,EAAA,WAAA,EAAA,kBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,IAAA,EAAA,OAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,IAAA,EAAA,aAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FD7Ba,aAAa,EAAA,UAAA,EAAA,CAAA;kBANzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,SAAS,cAGP,KAAK,EAAA,QAAA,EAAA,gnEAAA,EAAA,MAAA,EAAA,CAAA,uiSAAA,CAAA,EAAA;;0BA0Ed;;0BAAY,MAAM;2BAAC,oCAAoC;;0BACvD,MAAM;2BAAC,eAAe;;sBAjExB,WAAW;uBAAC,eAAe;;sBAC3B;;sBASA;;sBAQA;;sBAQA,WAAW;uBAAC,gCAAgC;;sBAC5C,KAAK;uBAAC,EAAE,SAAS,EAAE,CAAC,KAAa,KAAa,CAAA,EAAG,KAAK,CAAA,EAAA,CAAI,EAAE;;sBAQ5D,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;;sBASrC;;sBAMA;;sBACA;;sBAEA,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,UAAU,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;;;ME7E5B,YAAY,CAAA;AAJzB,IAAA,WAAA,GAAA;AAKE,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,QAAQ,mDAAU;AACnC,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,kDAAU;QAClC,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAY;QAC5B,IAAA,CAAA,SAAS,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAY;AAC7B,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAkB,KAAK,4CAAI,SAAS,EAAE,gBAAgB,EAAA,CAAA,GAAA,CAA7B,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAC;QACzE,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAA2E;QAC3F,IAAA,CAAA,OAAO,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;QACzB,IAAA,CAAA,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;QACvB,IAAA,CAAA,aAAa,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,eAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAgC;QACrD,IAAA,CAAA,iBAAiB,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,mBAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAW;AAE5B,QAAA,IAAA,CAAA,aAAa,GAAG,MAAM,CAAC,aAAa,CAAC;AACrC,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,WAAW,CAAC;AAE9B,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,MAAK;YAC9B,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE;AAC3C,gBAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;AACzB,gBAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;AACzB,gBAAA,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE;AAC3B,gBAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;AACzB,gBAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;AACzB,gBAAA,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;AACvB,gBAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;AACnB,gBAAA,aAAa,EAAE,IAAI,CAAC,aAAa,EAAE;AACnC,gBAAA,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EAAE;AAC5C,aAAA,CAAC;AACJ,QAAA,CAAC,qDAAC;QAEM,IAAA,CAAA,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,MAAK;YAClD,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;AAC9C,QAAA,CAAC,CAAC;AAqBH,IAAA;IAnBC,QAAQ,GAAA;QACN,IAAI,CAAC,MAAM,EAAE;IACf;IAEQ,MAAM,GAAA;AACZ,QAAA,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;AACxB,YAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;AACzB,YAAA,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;AACvB,YAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;AACzB,YAAA,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE;AAC3B,YAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;YACzB,kBAAkB,EAAE,IAAI,CAAC,QAAQ;AACjC,YAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;AACzB,YAAA,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;AACvB,YAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;AACnB,YAAA,aAAa,EAAE,IAAI,CAAC,aAAa,EAAE;AACnC,YAAA,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EAAE;AAC5C,SAAA,CAAC;IACJ;+GAnDW,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAZ,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,UAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;4FAAZ,YAAY,EAAA,UAAA,EAAA,CAAA;kBAJxB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,oBAAoB;AAC/B,iBAAA;;;MCKY,mBAAmB,CAAA;+GAAnB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,mBAAmB,iBAJf,aAAa,CAAA,EAAA,OAAA,EAAA,CAClB,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,eAAe,EAAE,iBAAiB,CAAA,EAAA,OAAA,EAAA,CAClG,aAAa,EAAE,YAAY,CAAA,EAAA,CAAA,CAAA;AAE1B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,mBAAmB,YAHN,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAmB,iBAAiB,CAAA,EAAA,CAAA,CAAA;;4FAGjG,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAL/B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,aAAa,CAAC;AAC7B,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,eAAe,EAAE,iBAAiB,CAAC;AAC7G,oBAAA,OAAO,EAAE,CAAC,aAAa,EAAE,YAAY,CAAC;AACvC,iBAAA;;;ACbD;;AAEG;;;;"}

package/fesm2022/testgorilla-tgo-ui-components-tag.mjs CHANGED Viewed

@@ -96,14 +96,14 @@ class TagComponent {
          * @default false
          * @memberof TagComponent
          */
-        this.showBadge = input(false);
+        this.showBadge = input(false, ...(ngDevMode ? [{ debugName: "showBadge" }] : []));
         /**
          * The notifications amount to be displayed on the badge.
          * @type {number}
          * @default 0
          * @memberof TagComponent
          */
-        this.notificationsAmount = input(0);
+        this.notificationsAmount = input(0, ...(ngDevMode ? [{ debugName: "notificationsAmount" }] : []));
         /**
          * Event triggered when the tag should be closed.
          *
@@ -139,7 +139,7 @@ class TagComponent {
         this.labelText = '';
         this.isHovered = false;
         this.shrink = false;
-        this.closeBtnFocused = signal(false);
+        this.closeBtnFocused = signal(false, ...(ngDevMode ? [{ debugName: "closeBtnFocused" }] : []));
         if (defaultAppTheme) {
             this.applicationTheme = defaultAppTheme;
         }
@@ -194,12 +194,12 @@ class TagComponent {
             this.onClose();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TagComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TagComponent, isStandalone: false, selector: "ui-tag", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, allowClose: { classPropertyName: "allowClose", publicName: "allowClose", isSignal: false, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: false, isRequired: false, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: false, isRequired: false, transformFunction: null }, showIconWhenSelected: { classPropertyName: "showIconWhenSelected", publicName: "showIconWhenSelected", isSignal: false, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaRequired: { classPropertyName: "ariaRequired", publicName: "ariaRequired", isSignal: false, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, notificationsAmount: { classPropertyName: "notificationsAmount", publicName: "notificationsAmount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", press: "press" }, viewQueries: [{ propertyName: "labelElement", first: true, predicate: ["labelElement"], descendants: true }], ngImport: i0, template: "<div class=\"tag-wrapper\">\n  <div\n    [matTooltip]=\"(isEllipseActiveObs$ | async) ? labelText : ''\"\n    [matTooltipClass]=\"applicationTheme\"\n    [tabindex]=\"tabIndex\"\n    class=\"tag-container\"\n    [attr.data-testid]=\"'tag--container'\"\n    [attr.theme]=\"applicationTheme\"\n    [ngClass]=\"{\n      filled: filled,\n      readonly: readOnly,\n      disabled: isDisabled,\n      outlined: !isSelected,\n      shrink,\n    }\"\n    (click)=\"onPress()\"\n    (mouseenter)=\"setHoverState(true)\"\n    (mouseleave)=\"setHoverState(false)\"\n    (mousedown)=\"setShrinkState(true)\"\n    (mouseup)=\"setShrinkState(false)\"\n    (touchstart)=\"setShrinkState(true)\"\n    (touchend)=\"setShrinkState(false)\"\n    (keydown)=\"onKeydown($event)\"\n    [attr.aria-label]=\"ariaLabel || labelText\"\n    [attr.aria-required]=\"ariaRequired\"\n  >\n    <ui-icon\n      *ngIf=\"icon\"\n      class=\"icon\"\n      [color]=\"iconColor\"\n      [name]=\"iconToPass\"\n      [applicationTheme]=\"applicationTheme\"\n    ></ui-icon>\n    <ui-icon\n      *ngIf=\"isSelected && showIconWhenSelected\"\n      [color]=\"iconColor\"\n      class=\"icon\"\n      [name]=\"'Check'\"\n      [applicationTheme]=\"applicationTheme\"\n    ></ui-icon>\n    <span class=\"tag-label\" #labelElement>{{ labelText }}</span>\n    @if (showBadge()) {\n      <ui-badge\n        [notificationsAmount]=\"notificationsAmount()\"\n        [applicationTheme]=\"applicationTheme\"\n        [variant]=\"'notification'\"\n      ></ui-badge>\n    }\n    <ui-icon\n      (focus)=\"closeBtnFocused.set(true)\"\n      (blur)=\"closeBtnFocused.set(false)\"\n      [tabindex]=\"tabIndex\"\n      *ngIf=\"allowClose\"\n      class=\"delete-icon\"\n      [attr.aria-label]=\"'TAG.REMOVE' | uiTranslate | async\"\n      [color]=\"iconColor\"\n      (click)=\"onClose()\"\n      [name]=\"'Close'\"\n      [applicationTheme]=\"applicationTheme\"\n    ></ui-icon>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host .tag-wrapper{max-width:264px}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host .tag-container{height:32px;max-width:264px;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0 8px;width:fit-content;cursor:pointer;margin:4px}:host .tag-container:focus-visible{outline:2px solid #242424;animation:focus-ring-animation .4s forwards;outline-offset:2px;position:relative}:host .tag-container:focus-visible:after{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:-2px;left:-2px;outline:2px solid #ffffff;border-radius:4px}:host .tag-container.outlined{border:1px solid #6894a0}:host .tag-container.filled{background:#e9f0f1;border:1px solid #e9f0f1}:host .tag-container.filled:hover{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled:active{background:#a9c2c9;border:1px solid #1b4754}:host .tag-container:hover{background:#f6f6f6;border:1px solid #6894a0}:host .tag-container:active{background:#e9f0f1}:host .tag-container.readonly{pointer-events:none}:host .tag-container.disabled{opacity:.5;border:1px solid #276678;background:#e9f0f1;pointer-events:none}:host .tag-container .tag-label{-webkit-user-select:none;user-select:none;font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tag-container .icon{height:16px;width:16px;min-width:16px;margin-right:8px}:host .tag-container ui-badge{margin-left:8px}:host .tag-container .delete-icon{display:flex;align-items:center;justify-content:center;margin-left:8px;text-align:center;border-radius:50px}:host .tag-container[theme=dark],:host .tag-container[theme=light]{background:#f4f4f4;border:2px solid transparent}:host .tag-container[theme=dark].filled,:host .tag-container[theme=light].filled{background-color:#fff;border-color:#242424}:host .tag-container[theme=dark]:hover,:host .tag-container[theme=light]:hover{background-color:#666;color:#fff;border-color:#666;border-width:2px}:host .tag-container[theme=dark].shrink,:host .tag-container[theme=light].shrink{transform:scale(.98)}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.BadgeComponent, selector: "ui-badge", inputs: ["label", "staticLabel", "icon", "color", "variant", "notificationsAmount", "applicationTheme", "rebrandColor", "truncateLabel", "enableAnimation"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.UiTranslatePipe, name: "uiTranslate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TagComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: TagComponent, isStandalone: false, selector: "ui-tag", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, allowClose: { classPropertyName: "allowClose", publicName: "allowClose", isSignal: false, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: false, isRequired: false, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: false, isRequired: false, transformFunction: null }, showIconWhenSelected: { classPropertyName: "showIconWhenSelected", publicName: "showIconWhenSelected", isSignal: false, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaRequired: { classPropertyName: "ariaRequired", publicName: "ariaRequired", isSignal: false, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, notificationsAmount: { classPropertyName: "notificationsAmount", publicName: "notificationsAmount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", press: "press" }, viewQueries: [{ propertyName: "labelElement", first: true, predicate: ["labelElement"], descendants: true }], ngImport: i0, template: "<div class=\"tag-wrapper\">\n  <div\n    [matTooltip]=\"(isEllipseActiveObs$ | async) ? labelText : ''\"\n    [matTooltipClass]=\"applicationTheme\"\n    [tabindex]=\"tabIndex\"\n    class=\"tag-container\"\n    [attr.data-testid]=\"'tag--container'\"\n    [attr.theme]=\"applicationTheme\"\n    [ngClass]=\"{\n      filled: filled,\n      readonly: readOnly,\n      disabled: isDisabled,\n      outlined: !isSelected,\n      shrink,\n    }\"\n    (click)=\"onPress()\"\n    (mouseenter)=\"setHoverState(true)\"\n    (mouseleave)=\"setHoverState(false)\"\n    (mousedown)=\"setShrinkState(true)\"\n    (mouseup)=\"setShrinkState(false)\"\n    (touchstart)=\"setShrinkState(true)\"\n    (touchend)=\"setShrinkState(false)\"\n    (keydown)=\"onKeydown($event)\"\n    [attr.aria-label]=\"ariaLabel || labelText\"\n    [attr.aria-required]=\"ariaRequired\"\n  >\n    @if (icon) {\n      <ui-icon class=\"icon\" [color]=\"iconColor\" [name]=\"iconToPass\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n    }\n    @if (isSelected && showIconWhenSelected) {\n      <ui-icon [color]=\"iconColor\" class=\"icon\" [name]=\"'Check'\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n    }\n    <span class=\"tag-label\" #labelElement>{{ labelText }}</span>\n    @if (showBadge()) {\n      <ui-badge\n        [notificationsAmount]=\"notificationsAmount()\"\n        [applicationTheme]=\"applicationTheme\"\n        [variant]=\"'notification'\"\n      ></ui-badge>\n    }\n    @if (allowClose) {\n      <ui-icon\n        (focus)=\"closeBtnFocused.set(true)\"\n        (blur)=\"closeBtnFocused.set(false)\"\n        [tabindex]=\"tabIndex\"\n        class=\"delete-icon\"\n        [attr.aria-label]=\"'TAG.REMOVE' | uiTranslate | async\"\n        [color]=\"iconColor\"\n        (click)=\"onClose()\"\n        [name]=\"'Close'\"\n        [applicationTheme]=\"applicationTheme\"\n      ></ui-icon>\n    }\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host .tag-wrapper{max-width:264px}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host .tag-container{height:32px;max-width:264px;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0 8px;width:fit-content;cursor:pointer;margin:4px}:host .tag-container:focus-visible{outline:2px solid #242424;animation:focus-ring-animation .4s forwards;outline-offset:2px;position:relative}:host .tag-container:focus-visible:after{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:-2px;left:-2px;outline:2px solid #ffffff;border-radius:4px}:host .tag-container.outlined{border:1px solid #6894a0}:host .tag-container.filled{background:#e9f0f1;border:1px solid #e9f0f1}:host .tag-container.filled:hover{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled:active{background:#a9c2c9;border:1px solid #1b4754}:host .tag-container:hover{background:#f6f6f6;border:1px solid #6894a0}:host .tag-container:active{background:#e9f0f1}:host .tag-container.readonly{pointer-events:none}:host .tag-container.disabled{opacity:.5;border:1px solid #276678;background:#e9f0f1;pointer-events:none}:host .tag-container .tag-label{-webkit-user-select:none;user-select:none;font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tag-container .icon{height:16px;width:16px;min-width:16px;margin-right:8px}:host .tag-container ui-badge{margin-left:8px}:host .tag-container .delete-icon{display:flex;align-items:center;justify-content:center;margin-left:8px;text-align:center;border-radius:50px}:host .tag-container[theme=dark],:host .tag-container[theme=light]{background:#f4f4f4;border:2px solid transparent}:host .tag-container[theme=dark].filled,:host .tag-container[theme=light].filled{background-color:#fff;border-color:#242424}:host .tag-container[theme=dark]:hover,:host .tag-container[theme=light]:hover{background-color:#666;color:#fff;border-color:#666;border-width:2px}:host .tag-container[theme=dark].shrink,:host .tag-container[theme=light].shrink{transform:scale(.98)}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mat-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.BadgeComponent, selector: "ui-badge", inputs: ["label", "staticLabel", "icon", "color", "variant", "notificationsAmount", "applicationTheme", "rebrandColor", "truncateLabel", "enableAnimation"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.UiTranslatePipe, name: "uiTranslate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TagComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-tag', standalone: false, template: "<div class=\"tag-wrapper\">\n  <div\n    [matTooltip]=\"(isEllipseActiveObs$ | async) ? labelText : ''\"\n    [matTooltipClass]=\"applicationTheme\"\n    [tabindex]=\"tabIndex\"\n    class=\"tag-container\"\n    [attr.data-testid]=\"'tag--container'\"\n    [attr.theme]=\"applicationTheme\"\n    [ngClass]=\"{\n      filled: filled,\n      readonly: readOnly,\n      disabled: isDisabled,\n      outlined: !isSelected,\n      shrink,\n    }\"\n    (click)=\"onPress()\"\n    (mouseenter)=\"setHoverState(true)\"\n    (mouseleave)=\"setHoverState(false)\"\n    (mousedown)=\"setShrinkState(true)\"\n    (mouseup)=\"setShrinkState(false)\"\n    (touchstart)=\"setShrinkState(true)\"\n    (touchend)=\"setShrinkState(false)\"\n    (keydown)=\"onKeydown($event)\"\n    [attr.aria-label]=\"ariaLabel || labelText\"\n    [attr.aria-required]=\"ariaRequired\"\n  >\n    <ui-icon\n      *ngIf=\"icon\"\n      class=\"icon\"\n      [color]=\"iconColor\"\n      [name]=\"iconToPass\"\n      [applicationTheme]=\"applicationTheme\"\n    ></ui-icon>\n    <ui-icon\n      *ngIf=\"isSelected && showIconWhenSelected\"\n      [color]=\"iconColor\"\n      class=\"icon\"\n      [name]=\"'Check'\"\n      [applicationTheme]=\"applicationTheme\"\n    ></ui-icon>\n    <span class=\"tag-label\" #labelElement>{{ labelText }}</span>\n    @if (showBadge()) {\n      <ui-badge\n        [notificationsAmount]=\"notificationsAmount()\"\n        [applicationTheme]=\"applicationTheme\"\n        [variant]=\"'notification'\"\n      ></ui-badge>\n    }\n    <ui-icon\n      (focus)=\"closeBtnFocused.set(true)\"\n      (blur)=\"closeBtnFocused.set(false)\"\n      [tabindex]=\"tabIndex\"\n      *ngIf=\"allowClose\"\n      class=\"delete-icon\"\n      [attr.aria-label]=\"'TAG.REMOVE' | uiTranslate | async\"\n      [color]=\"iconColor\"\n      (click)=\"onClose()\"\n      [name]=\"'Close'\"\n      [applicationTheme]=\"applicationTheme\"\n    ></ui-icon>\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host .tag-wrapper{max-width:264px}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host .tag-container{height:32px;max-width:264px;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0 8px;width:fit-content;cursor:pointer;margin:4px}:host .tag-container:focus-visible{outline:2px solid #242424;animation:focus-ring-animation .4s forwards;outline-offset:2px;position:relative}:host .tag-container:focus-visible:after{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:-2px;left:-2px;outline:2px solid #ffffff;border-radius:4px}:host .tag-container.outlined{border:1px solid #6894a0}:host .tag-container.filled{background:#e9f0f1;border:1px solid #e9f0f1}:host .tag-container.filled:hover{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled:active{background:#a9c2c9;border:1px solid #1b4754}:host .tag-container:hover{background:#f6f6f6;border:1px solid #6894a0}:host .tag-container:active{background:#e9f0f1}:host .tag-container.readonly{pointer-events:none}:host .tag-container.disabled{opacity:.5;border:1px solid #276678;background:#e9f0f1;pointer-events:none}:host .tag-container .tag-label{-webkit-user-select:none;user-select:none;font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tag-container .icon{height:16px;width:16px;min-width:16px;margin-right:8px}:host .tag-container ui-badge{margin-left:8px}:host .tag-container .delete-icon{display:flex;align-items:center;justify-content:center;margin-left:8px;text-align:center;border-radius:50px}:host .tag-container[theme=dark],:host .tag-container[theme=light]{background:#f4f4f4;border:2px solid transparent}:host .tag-container[theme=dark].filled,:host .tag-container[theme=light].filled{background-color:#fff;border-color:#242424}:host .tag-container[theme=dark]:hover,:host .tag-container[theme=light]:hover{background-color:#666;color:#fff;border-color:#666;border-width:2px}:host .tag-container[theme=dark].shrink,:host .tag-container[theme=light].shrink{transform:scale(.98)}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"] }]
+            args: [{ selector: 'ui-tag', standalone: false, template: "<div class=\"tag-wrapper\">\n  <div\n    [matTooltip]=\"(isEllipseActiveObs$ | async) ? labelText : ''\"\n    [matTooltipClass]=\"applicationTheme\"\n    [tabindex]=\"tabIndex\"\n    class=\"tag-container\"\n    [attr.data-testid]=\"'tag--container'\"\n    [attr.theme]=\"applicationTheme\"\n    [ngClass]=\"{\n      filled: filled,\n      readonly: readOnly,\n      disabled: isDisabled,\n      outlined: !isSelected,\n      shrink,\n    }\"\n    (click)=\"onPress()\"\n    (mouseenter)=\"setHoverState(true)\"\n    (mouseleave)=\"setHoverState(false)\"\n    (mousedown)=\"setShrinkState(true)\"\n    (mouseup)=\"setShrinkState(false)\"\n    (touchstart)=\"setShrinkState(true)\"\n    (touchend)=\"setShrinkState(false)\"\n    (keydown)=\"onKeydown($event)\"\n    [attr.aria-label]=\"ariaLabel || labelText\"\n    [attr.aria-required]=\"ariaRequired\"\n  >\n    @if (icon) {\n      <ui-icon class=\"icon\" [color]=\"iconColor\" [name]=\"iconToPass\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n    }\n    @if (isSelected && showIconWhenSelected) {\n      <ui-icon [color]=\"iconColor\" class=\"icon\" [name]=\"'Check'\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n    }\n    <span class=\"tag-label\" #labelElement>{{ labelText }}</span>\n    @if (showBadge()) {\n      <ui-badge\n        [notificationsAmount]=\"notificationsAmount()\"\n        [applicationTheme]=\"applicationTheme\"\n        [variant]=\"'notification'\"\n      ></ui-badge>\n    }\n    @if (allowClose) {\n      <ui-icon\n        (focus)=\"closeBtnFocused.set(true)\"\n        (blur)=\"closeBtnFocused.set(false)\"\n        [tabindex]=\"tabIndex\"\n        class=\"delete-icon\"\n        [attr.aria-label]=\"'TAG.REMOVE' | uiTranslate | async\"\n        [color]=\"iconColor\"\n        (click)=\"onClose()\"\n        [name]=\"'Close'\"\n        [applicationTheme]=\"applicationTheme\"\n      ></ui-icon>\n    }\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host .tag-wrapper{max-width:264px}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host .tag-container{height:32px;max-width:264px;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0 8px;width:fit-content;cursor:pointer;margin:4px}:host .tag-container:focus-visible{outline:2px solid #242424;animation:focus-ring-animation .4s forwards;outline-offset:2px;position:relative}:host .tag-container:focus-visible:after{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:-2px;left:-2px;outline:2px solid #ffffff;border-radius:4px}:host .tag-container.outlined{border:1px solid #6894a0}:host .tag-container.filled{background:#e9f0f1;border:1px solid #e9f0f1}:host .tag-container.filled:hover{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled:active{background:#a9c2c9;border:1px solid #1b4754}:host .tag-container:hover{background:#f6f6f6;border:1px solid #6894a0}:host .tag-container:active{background:#e9f0f1}:host .tag-container.readonly{pointer-events:none}:host .tag-container.disabled{opacity:.5;border:1px solid #276678;background:#e9f0f1;pointer-events:none}:host .tag-container .tag-label{-webkit-user-select:none;user-select:none;font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tag-container .icon{height:16px;width:16px;min-width:16px;margin-right:8px}:host .tag-container ui-badge{margin-left:8px}:host .tag-container .delete-icon{display:flex;align-items:center;justify-content:center;margin-left:8px;text-align:center;border-radius:50px}:host .tag-container[theme=dark],:host .tag-container[theme=light]{background:#f4f4f4;border:2px solid transparent}:host .tag-container[theme=dark].filled,:host .tag-container[theme=light].filled{background-color:#fff;border-color:#242424}:host .tag-container[theme=dark]:hover,:host .tag-container[theme=light]:hover{background-color:#666;color:#fff;border-color:#666;border-width:2px}:host .tag-container[theme=dark].shrink,:host .tag-container[theme=light].shrink{transform:scale(.98)}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mat-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -225,7 +225,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }], ariaRequired: [{
                 type: Input
-            }], close: [{
+            }], showBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBadge", required: false }] }], notificationsAmount: [{ type: i0.Input, args: [{ isSignal: true, alias: "notificationsAmount", required: false }] }], close: [{
                 type: Output
             }], press: [{
                 type: Output
@@ -235,22 +235,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }] } });
 class TagComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TagComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: TagComponentModule, declarations: [TagComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TagComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: TagComponentModule, declarations: [TagComponent], imports: [CommonModule,
             IconComponentModule,
             TooltipComponentModule,
             MatTooltipModule,
             MatInputModule,
             UiTranslatePipe,
             BadgeComponentModule], exports: [TagComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TagComponentModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TagComponentModule, imports: [CommonModule,
             IconComponentModule,
             TooltipComponentModule,
             MatTooltipModule,
             MatInputModule,
             BadgeComponentModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TagComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TagComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [TagComponent],

package/fesm2022/testgorilla-tgo-ui-components-tag.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"testgorilla-tgo-ui-components-tag.mjs","sources":["../../../components/tag/tag.component.ts","../../../components/tag/tag.component.html","../../../components/tag/tag.component.module.ts","../../../components/tag/testgorilla-tgo-ui-components-tag.ts"],"sourcesContent":["import {\n AfterViewInit,\n Component,\n ElementRef,\n EventEmitter,\n Inject,\n input,\n Input,\n OnInit,\n Optional,\n Output,\n signal,\n ViewChild,\n} from '@angular/core';\nimport { debounceTime, map, ReplaySubject } from 'rxjs';\nimport { IconColor, IconName } from '@testgorilla/tgo-ui/components/icon';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IKeyboardEvent } from '@testgorilla/tgo-ui/components/core';\n\n@Component({\n selector: 'ui-tag',\n templateUrl: './tag.component.html',\n styleUrls: ['./tag.component.scss'],\n standalone: false,\n})\nexport class TagComponent implements AfterViewInit, OnInit {\n /*\n Tag's label\n \n @memberof TagComponent\n /\n @Input() set label(value: string) {\n this.labelText = value;\n if (this.labelElement) {\n this.isLabelEllipseActive();\n }\n }\n\n /\n Icon\n \n @type {string}\n * @memberof TagComponent\n /\n @Input() icon: IconName = '';\n\n /\n Whether to allow the tag to be closed.\n \n @type {boolean}\n * @default false\n * @memberof TagComponent\n /\n @Input() allowClose = false;\n\n /\n Whether the tag is in read-only mode.\n \n @type {boolean}\n * @default false\n * @memberof TagComponent\n /\n @Input() readOnly = false;\n\n /\n Whether the tag is selected.\n \n @type {boolean}\n * @default false\n * @memberof TagComponent\n /\n @Input() isSelected = false;\n\n /\n Display icon when is selected\n \n @type {boolean}\n * @default false\n * @memberof TagComponent\n /\n @Input() showIconWhenSelected = false;\n\n /\n Specifies whether the element is disabled.\n \n @type {boolean}\n * @default false\n * @memberof TagComponent\n /\n @Input() isDisabled = false;\n\n /\n \n * Defines the application theme\n \n @type {ApplicationTheme}\n * @memberof TagComponent\n /\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /\n A string representing the ARIA label for accessibility.\n * This label is used to provide an accessible name for the input element.\n * @type {string}\n * @memberof TagComponent\n /\n @Input() ariaLabel: string;\n\n /\n A string representing the ARIA requirement for accessibility.\n * This attribute is used to indicate whether an input field is required for form submission.\n * @type {boolean}\n * @memberof TagComponent\n /\n @Input() ariaRequired = false;\n\n /\n Whether to show the badge on the tag.\n * @type {boolean}\n * @default false\n * @memberof TagComponent\n /\n showBadge = input<boolean>(false);\n\n /\n The notifications amount to be displayed on the badge.\n * @type {number}\n * @default 0\n * @memberof TagComponent\n /\n notificationsAmount = input<number>(0);\n\n /\n Event triggered when the tag should be closed.\n \n @event\n * @memberof TagComponent\n /\n @Output() close = new EventEmitter<void>();\n\n /\n Event triggered when a press action occurs.\n \n @event\n * @memberof TagComponent\n /\n @Output() press = new EventEmitter<boolean>();\n\n /\n Subject that needs to be triggered when Label input changes, to check if it's truncated\n * @private\n * @type {void}\n * @memberof TagComponent\n /\n private checkLabelEllipsis$ = new ReplaySubject<void>(1);\n\n /\n Observable that indicates if the Label is truncated\n * debounceTime is used to wait for view to be initialized after receiving a new Label input\n * @protected\n * @type {boolean}\n * @memberof TagComponent\n /\n protected isEllipseActiveObs$ = this.checkLabelEllipsis$.pipe(\n debounceTime(100),\n map(() => {\n const el = this.labelElement.nativeElement;\n return el.offsetWidth < el.scrollWidth;\n })\n );\n protected labelText = '';\n protected isHovered = false;\n protected shrink = false;\n protected iconToPass: IconName;\n protected iconColor: IconColor;\n protected closeBtnFocused = signal(false);\n\n @ViewChild('labelElement') labelElement: ElementRef<HTMLElement>;\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n ) {\n if (defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n }\n }\n\n ngOnInit(): void {\n this.iconToPass = this.icon;\n this.iconColor = 'black';\n }\n\n ngAfterViewInit(): void {\n this.isLabelEllipseActive();\n }\n\n onPress(): void {\n if (!this.readOnly && !this.allowClose) {\n this.isSelected = this.showIconWhenSelected ? !this.isSelected : false;\n this.press.emit(this.isSelected);\n }\n }\n\n setHoverState(state: boolean) {\n this.isHovered = state;\n if (this.applicationTheme !== 'classic') {\n if (state) {\n this.iconToPass = `${this.icon}-filled` as IconName;\n } else {\n this.iconToPass = this.icon;\n }\n this.iconColor = this.isHovered ? 'white' : 'black';\n }\n }\n\n setShrinkState(state: boolean) {\n this.shrink = state;\n }\n\n onClose(): void {\n this.close.emit();\n }\n\n private isLabelEllipseActive(): void {\n this.checkLabelEllipsis$.next();\n }\n\n get tabIndex(): number {\n return this.isDisabled \|\| this.readOnly ? -1 : 0;\n }\n\n get filled(): boolean {\n return this.readOnly \|\| this.allowClose \|\| this.isSelected;\n }\n\n onKeydown($event: KeyboardEvent): void {\n if (\n ($event.key === (IKeyboardEvent.ENTER as string) \|\| $event.key === (IKeyboardEvent.SPACE as string)) &&\n !this.closeBtnFocused()\n ) {\n this.onPress();\n } else if (\n this.closeBtnFocused() &&\n ($event.key === (IKeyboardEvent.ENTER as string) \|\| $event.key === (IKeyboardEvent.SPACE as string))\n ) {\n this.onClose();\n }\n }\n}\n","<div class=\"tag-wrapper\">\n <div\n [matTooltip]=\"(isEllipseActiveObs$ \| async) ? labelText : ''\"\n [matTooltipClass]=\"applicationTheme\"\n [tabindex]=\"tabIndex\"\n class=\"tag-container\"\n [attr.data-testid]=\"'tag--container'\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{\n filled: filled,\n readonly: readOnly,\n disabled: isDisabled,\n outlined: !isSelected,\n shrink,\n }\"\n (click)=\"onPress()\"\n (mouseenter)=\"setHoverState(true)\"\n (mouseleave)=\"setHoverState(false)\"\n (mousedown)=\"setShrinkState(true)\"\n (mouseup)=\"setShrinkState(false)\"\n (touchstart)=\"setShrinkState(true)\"\n (touchend)=\"setShrinkState(false)\"\n (keydown)=\"onKeydown($event)\"\n [attr.aria-label]=\"ariaLabel \|\| labelText\"\n [attr.aria-required]=\"ariaRequired\"\n >\n <ui-icon\n ngIf=\"icon\"\n class=\"icon\"\n [color]=\"iconColor\"\n [name]=\"iconToPass\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n <ui-icon\n ngIf=\"isSelected && showIconWhenSelected\"\n [color]=\"iconColor\"\n class=\"icon\"\n [name]=\"'Check'\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n <span class=\"tag-label\" #labelElement>{{ labelText }}</span>\n @if (showBadge()) {\n <ui-badge\n [notificationsAmount]=\"notificationsAmount()\"\n [applicationTheme]=\"applicationTheme\"\n [variant]=\"'notification'\"\n ></ui-badge>\n }\n <ui-icon\n (focus)=\"closeBtnFocused.set(true)\"\n (blur)=\"closeBtnFocused.set(false)\"\n [tabindex]=\"tabIndex\"\n ngIf=\"allowClose\"\n class=\"delete-icon\"\n [attr.aria-label]=\"'TAG.REMOVE' \| uiTranslate \| async\"\n [color]=\"iconColor\"\n (click)=\"onClose()\"\n [name]=\"'Close'\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n </div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { TooltipComponentModule } from '@testgorilla/tgo-ui/components/tooltip';\nimport { BadgeComponentModule } from '@testgorilla/tgo-ui/components/badge';\nimport { TagComponent } from './tag.component';\n\n@NgModule({\n declarations: [TagComponent],\n imports: [\n CommonModule,\n IconComponentModule,\n TooltipComponentModule,\n MatTooltipModule,\n MatInputModule,\n UiTranslatePipe,\n BadgeComponentModule,\n ],\n exports: [TagComponent],\n providers: [],\n})\nexport class TagComponentModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"testgorilla-tgo-ui-components-tag.mjs","sources":["../../../components/tag/tag.component.ts","../../../components/tag/tag.component.html","../../../components/tag/tag.component.module.ts","../../../components/tag/testgorilla-tgo-ui-components-tag.ts"],"sourcesContent":["import {\n AfterViewInit,\n Component,\n ElementRef,\n EventEmitter,\n Inject,\n input,\n Input,\n OnInit,\n Optional,\n Output,\n signal,\n ViewChild,\n} from '@angular/core';\nimport { debounceTime, map, ReplaySubject } from 'rxjs';\nimport { IconColor, IconName } from '@testgorilla/tgo-ui/components/icon';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IKeyboardEvent } from '@testgorilla/tgo-ui/components/core';\n\n@Component({\n selector: 'ui-tag',\n templateUrl: './tag.component.html',\n styleUrls: ['./tag.component.scss'],\n standalone: false,\n})\nexport class TagComponent implements AfterViewInit, OnInit {\n /*\n Tag's label\n \n @memberof TagComponent\n /\n @Input() set label(value: string) {\n this.labelText = value;\n if (this.labelElement) {\n this.isLabelEllipseActive();\n }\n }\n\n /\n Icon\n \n @type {string}\n * @memberof TagComponent\n /\n @Input() icon: IconName = '';\n\n /\n Whether to allow the tag to be closed.\n \n @type {boolean}\n * @default false\n * @memberof TagComponent\n /\n @Input() allowClose = false;\n\n /\n Whether the tag is in read-only mode.\n \n @type {boolean}\n * @default false\n * @memberof TagComponent\n /\n @Input() readOnly = false;\n\n /\n Whether the tag is selected.\n \n @type {boolean}\n * @default false\n * @memberof TagComponent\n /\n @Input() isSelected = false;\n\n /\n Display icon when is selected\n \n @type {boolean}\n * @default false\n * @memberof TagComponent\n /\n @Input() showIconWhenSelected = false;\n\n /\n Specifies whether the element is disabled.\n \n @type {boolean}\n * @default false\n * @memberof TagComponent\n /\n @Input() isDisabled = false;\n\n /\n \n * Defines the application theme\n \n @type {ApplicationTheme}\n * @memberof TagComponent\n /\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /\n A string representing the ARIA label for accessibility.\n * This label is used to provide an accessible name for the input element.\n * @type {string}\n * @memberof TagComponent\n /\n @Input() ariaLabel: string;\n\n /\n A string representing the ARIA requirement for accessibility.\n * This attribute is used to indicate whether an input field is required for form submission.\n * @type {boolean}\n * @memberof TagComponent\n /\n @Input() ariaRequired = false;\n\n /\n Whether to show the badge on the tag.\n * @type {boolean}\n * @default false\n * @memberof TagComponent\n /\n showBadge = input<boolean>(false);\n\n /\n The notifications amount to be displayed on the badge.\n * @type {number}\n * @default 0\n * @memberof TagComponent\n /\n notificationsAmount = input<number>(0);\n\n /\n Event triggered when the tag should be closed.\n \n @event\n * @memberof TagComponent\n /\n @Output() close = new EventEmitter<void>();\n\n /\n Event triggered when a press action occurs.\n \n @event\n * @memberof TagComponent\n /\n @Output() press = new EventEmitter<boolean>();\n\n /\n Subject that needs to be triggered when Label input changes, to check if it's truncated\n * @private\n * @type {void}\n * @memberof TagComponent\n /\n private checkLabelEllipsis$ = new ReplaySubject<void>(1);\n\n /\n Observable that indicates if the Label is truncated\n * debounceTime is used to wait for view to be initialized after receiving a new Label input\n * @protected\n * @type {boolean}\n * @memberof TagComponent\n /\n protected isEllipseActiveObs$ = this.checkLabelEllipsis$.pipe(\n debounceTime(100),\n map(() => {\n const el = this.labelElement.nativeElement;\n return el.offsetWidth < el.scrollWidth;\n })\n );\n protected labelText = '';\n protected isHovered = false;\n protected shrink = false;\n protected iconToPass: IconName;\n protected iconColor: IconColor;\n protected closeBtnFocused = signal(false);\n\n @ViewChild('labelElement') labelElement: ElementRef<HTMLElement>;\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n ) {\n if (defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n }\n }\n\n ngOnInit(): void {\n this.iconToPass = this.icon;\n this.iconColor = 'black';\n }\n\n ngAfterViewInit(): void {\n this.isLabelEllipseActive();\n }\n\n onPress(): void {\n if (!this.readOnly && !this.allowClose) {\n this.isSelected = this.showIconWhenSelected ? !this.isSelected : false;\n this.press.emit(this.isSelected);\n }\n }\n\n setHoverState(state: boolean) {\n this.isHovered = state;\n if (this.applicationTheme !== 'classic') {\n if (state) {\n this.iconToPass = `${this.icon}-filled` as IconName;\n } else {\n this.iconToPass = this.icon;\n }\n this.iconColor = this.isHovered ? 'white' : 'black';\n }\n }\n\n setShrinkState(state: boolean) {\n this.shrink = state;\n }\n\n onClose(): void {\n this.close.emit();\n }\n\n private isLabelEllipseActive(): void {\n this.checkLabelEllipsis$.next();\n }\n\n get tabIndex(): number {\n return this.isDisabled \|\| this.readOnly ? -1 : 0;\n }\n\n get filled(): boolean {\n return this.readOnly \|\| this.allowClose \|\| this.isSelected;\n }\n\n onKeydown($event: KeyboardEvent): void {\n if (\n ($event.key === (IKeyboardEvent.ENTER as string) \|\| $event.key === (IKeyboardEvent.SPACE as string)) &&\n !this.closeBtnFocused()\n ) {\n this.onPress();\n } else if (\n this.closeBtnFocused() &&\n ($event.key === (IKeyboardEvent.ENTER as string) \|\| $event.key === (IKeyboardEvent.SPACE as string))\n ) {\n this.onClose();\n }\n }\n}\n","<div class=\"tag-wrapper\">\n <div\n [matTooltip]=\"(isEllipseActiveObs$ \| async) ? labelText : ''\"\n [matTooltipClass]=\"applicationTheme\"\n [tabindex]=\"tabIndex\"\n class=\"tag-container\"\n [attr.data-testid]=\"'tag--container'\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{\n filled: filled,\n readonly: readOnly,\n disabled: isDisabled,\n outlined: !isSelected,\n shrink,\n }\"\n (click)=\"onPress()\"\n (mouseenter)=\"setHoverState(true)\"\n (mouseleave)=\"setHoverState(false)\"\n (mousedown)=\"setShrinkState(true)\"\n (mouseup)=\"setShrinkState(false)\"\n (touchstart)=\"setShrinkState(true)\"\n (touchend)=\"setShrinkState(false)\"\n (keydown)=\"onKeydown($event)\"\n [attr.aria-label]=\"ariaLabel \|\| labelText\"\n [attr.aria-required]=\"ariaRequired\"\n >\n @if (icon) {\n <ui-icon class=\"icon\" [color]=\"iconColor\" [name]=\"iconToPass\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n }\n @if (isSelected && showIconWhenSelected) {\n <ui-icon [color]=\"iconColor\" class=\"icon\" [name]=\"'Check'\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n }\n <span class=\"tag-label\" #labelElement>{{ labelText }}</span>\n @if (showBadge()) {\n <ui-badge\n [notificationsAmount]=\"notificationsAmount()\"\n [applicationTheme]=\"applicationTheme\"\n [variant]=\"'notification'\"\n ></ui-badge>\n }\n @if (allowClose) {\n <ui-icon\n (focus)=\"closeBtnFocused.set(true)\"\n (blur)=\"closeBtnFocused.set(false)\"\n [tabindex]=\"tabIndex\"\n class=\"delete-icon\"\n [attr.aria-label]=\"'TAG.REMOVE' \| uiTranslate \| async\"\n [color]=\"iconColor\"\n (click)=\"onClose()\"\n [name]=\"'Close'\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n }\n </div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { TooltipComponentModule } from '@testgorilla/tgo-ui/components/tooltip';\nimport { BadgeComponentModule } from '@testgorilla/tgo-ui/components/badge';\nimport { TagComponent } from './tag.component';\n\n@NgModule({\n declarations: [TagComponent],\n imports: [\n CommonModule,\n IconComponentModule,\n TooltipComponentModule,\n MatTooltipModule,\n MatInputModule,\n UiTranslatePipe,\n BadgeComponentModule,\n ],\n exports: [TagComponent],\n providers: [],\n})\nexport class TagComponentModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/testgorilla-tgo-ui-components-toggle.mjs CHANGED Viewed

@@ -140,16 +140,16 @@ class ToggleComponent {
     setClasses() {
         this.classes = `${this.disabled ? 'disabled' : ''} ${this.applicationTheme} ${this.loading ? 'loading' : ''} ${!this.label ? 'small-toggle' : ''}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ToggleComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: ToggleComponent, isStandalone: false, selector: "ui-toggle", inputs: { selected: "selected", disabled: "disabled", label: "label", message: "message", maxWidth: "maxWidth", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", preventClick: "preventClick", loading: "loading", ariaDescribedby: "ariaDescribedby" }, outputs: { toggle: "toggle" }, host: { properties: { "style.--max-width": "this.maxWidth" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ToggleComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: ToggleComponent, isStandalone: false, selector: "ui-toggle", inputs: { selected: "selected", disabled: "disabled", label: "label", message: "message", maxWidth: "maxWidth", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", preventClick: "preventClick", loading: "loading", ariaDescribedby: "ariaDescribedby" }, outputs: { toggle: "toggle" }, host: { properties: { "style.--max-width": "this.maxWidth" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ToggleComponent),
                 multi: true,
             },
-        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"toggle\" [ngClass]=\"classes\">\n  <div\n    [style.--max-width]=\"maxWidth + 'px'\"\n    tabindex=\"0\"\n    class=\"toggle-container\"\n    [ngClass]=\"{ active: selected }\"\n    (click)=\"onToggle()\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-required]=\"ariaRequired\"\n    (keydown)=\"onKeydown($event)\"\n    role=\"switch\"\n    [attr.aria-labelledby]=\"'label'\"\n    [attr.aria-describedby]=\"'ariaDescribedby'\"\n    [attr.aria-checked]=\"selected\"\n  >\n    <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n    <div\n      class=\"label\"\n      uiEllipseText\n      [matTooltipShowDelay]=\"800\"\n      [matTooltip]=\"showLabelTooltip ? label : ''\"\n      (onChangeTextState)=\"changeTextState($event)\"\n      id=\"label\"\n    >\n      {{ label }}\n    </div>\n    <div class=\"knob\" *ngIf=\"!loading; else loadingTemplate\" [ngClass]=\"{ selected }\">\n      <ui-icon\n        [color]=\"disabled ? 'grey' : 'white'\"\n        *ngIf=\"selected && !label\"\n        [size]=\"'16'\"\n        [name]=\"'Check-round-filled'\"\n      ></ui-icon>\n    </div>\n\n    <ng-template #loadingTemplate>\n      <ui-spinner [isLoader]=\"false\" [size]=\"'small'\" [applicationTheme]=\"'dark'\"></ui-spinner>\n    </ng-template>\n  </div>\n  <div *ngIf=\"message && selected\" class=\"message\">{{ message }}</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:fit-content;display:block}:host .toggle{height:auto;width:fit-content;display:flex;flex-direction:column;align-items:center}:host .toggle .toggle-container{border:1px solid transparent}:host .toggle.disabled{opacity:.5}:host .toggle.disabled .label{color:#242424!important}:host .toggle.disabled .toggle-container{background:#e0e0e0;pointer-events:none}:host .toggle.disabled .toggle-container:focus{outline:none}:host .toggle.dark.disabled .toggle-container.active,:host .toggle.light.disabled .toggle-container.active{background:#e9e9e9;border:1px solid #242424}:host .toggle.dark.disabled .toggle-container.active .knob:after,:host .toggle.light.disabled .toggle-container.active .knob:after{background:#242424}:host .toggle.dark .toggle-container,:host .toggle.light .toggle-container{background:transparent;border:1px solid #242424}:host .toggle.dark .toggle-container .label,:host .toggle.light .toggle-container .label{color:#242424}:host .toggle.dark .toggle-container .knob:after,:host .toggle.light .toggle-container .knob:after{background:#242424}:host .toggle.dark .toggle-container.active,:host .toggle.light .toggle-container.active{background:#d410aa;border:1px solid #d410aa}:host .toggle.dark .toggle-container.active .label,:host .toggle.light .toggle-container.active .label{color:#fff}:host .toggle.dark .toggle-container.active .knob:after,:host .toggle.light .toggle-container.active .knob:after{background:#fff}:host .toggle.dark .message,:host .toggle.light .message{color:#242424}:host .toggle.dark.disabled .toggle-container.active{border-color:#fff}:host .toggle.dark.disabled .toggle-container.active .knob:after{background:#fff}:host .toggle.dark .toggle-container{border-color:#fff}:host .toggle.dark .toggle-container .label{color:#fff}:host .toggle.dark .toggle-container .knob:after{background:#fff}:host .toggle.dark .message{color:#fff}:host .toggle .toggle-container{min-height:20px;max-height:24px;max-width:var(--max-width);padding:0 3px 0 20px;width:fit-content;min-width:36px;border-radius:16px;background:#888;display:flex;align-items:center;cursor:pointer;position:relative;transition:transform .3s,padding .3s,background .3s}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host .toggle .toggle-container:focus-visible{position:relative;outline:2px solid #242424;outline-offset:2px;animation:focus-ring-animation .4s forwards}:host .toggle .toggle-container:focus-visible:after{content:\"\";position:absolute;width:calc(100% + 2px);height:calc(100% + 2px);top:-1px;left:-1px;outline:2px solid #ffffff;border-radius:16px}:host .toggle .toggle-container .knob{height:100%;width:100%;position:absolute;left:-1px;top:0;display:flex;align-items:center;padding:3px;max-height:20px;transition:transform .3s}:host .toggle .toggle-container .knob:after{content:\"\";display:block;border-radius:16px;width:12px;height:12px;background:#fff;transition:background .3s}:host .toggle .toggle-container .label{z-index:1;font-size:8px;font-weight:700;color:#fff;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;pointer-events:visible;line-height:16px}:host .toggle .toggle-container.active{background:#276678;padding:0 20px 0 3px}:host .toggle .toggle-container.active .knob{transform:translate(calc(100% - 15px))}:host .toggle .message{margin-top:4px;font-weight:700;font-size:12px;line-height:16px;color:#276678;text-align:justify}:host .toggle.small-toggle .toggle-container .knob{left:0}:host .toggle.small-toggle .toggle-container .knob:after{width:10px;height:10px}:host .toggle.small-toggle .toggle-container .knob.selected{left:-8px}:host .toggle.small-toggle .toggle-container .knob.selected:after{display:none}:host .toggle.small-toggle .toggle-container .knob.selected ui-icon ::ng-deep svg{width:20px;height:20px}:host .toggle.loading .toggle-container{border-color:#d410aa;background-color:#d410aa;padding:0;display:flex;justify-content:center;cursor:default}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3.EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "component", type: i4.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i5.SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "text", "applicationTheme", "iconName", "iconSize"] }] }); }
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"toggle\" [ngClass]=\"classes\">\n  <div\n    [style.--max-width]=\"maxWidth + 'px'\"\n    tabindex=\"0\"\n    class=\"toggle-container\"\n    [ngClass]=\"{ active: selected }\"\n    (click)=\"onToggle()\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-required]=\"ariaRequired\"\n    (keydown)=\"onKeydown($event)\"\n    role=\"switch\"\n    [attr.aria-labelledby]=\"'label'\"\n    [attr.aria-describedby]=\"'ariaDescribedby'\"\n    [attr.aria-checked]=\"selected\"\n  >\n    <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n    <div\n      class=\"label\"\n      uiEllipseText\n      [matTooltipShowDelay]=\"800\"\n      [matTooltip]=\"showLabelTooltip ? label : ''\"\n      (onChangeTextState)=\"changeTextState($event)\"\n      id=\"label\"\n    >\n      {{ label }}\n    </div>\n    @if (!loading) {\n      <div class=\"knob\" [ngClass]=\"{ selected }\">\n        @if (selected && !label) {\n          <ui-icon [color]=\"disabled ? 'grey' : 'white'\" [size]=\"'16'\" [name]=\"'Check-round-filled'\"></ui-icon>\n        }\n      </div>\n    } @else {\n      <ui-spinner [isLoader]=\"false\" [size]=\"'small'\" [applicationTheme]=\"'dark'\"></ui-spinner>\n    }\n  </div>\n  @if (message && selected) {\n    <div class=\"message\">{{ message }}</div>\n  }\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:fit-content;display:block}:host .toggle{height:auto;width:fit-content;display:flex;flex-direction:column;align-items:center}:host .toggle .toggle-container{border:1px solid transparent}:host .toggle.disabled{opacity:.5}:host .toggle.disabled .label{color:#242424!important}:host .toggle.disabled .toggle-container{background:#e0e0e0;pointer-events:none}:host .toggle.disabled .toggle-container:focus{outline:none}:host .toggle.dark.disabled .toggle-container.active,:host .toggle.light.disabled .toggle-container.active{background:#e9e9e9;border:1px solid #242424}:host .toggle.dark.disabled .toggle-container.active .knob:after,:host .toggle.light.disabled .toggle-container.active .knob:after{background:#242424}:host .toggle.dark .toggle-container,:host .toggle.light .toggle-container{background:transparent;border:1px solid #242424}:host .toggle.dark .toggle-container .label,:host .toggle.light .toggle-container .label{color:#242424}:host .toggle.dark .toggle-container .knob:after,:host .toggle.light .toggle-container .knob:after{background:#242424}:host .toggle.dark .toggle-container.active,:host .toggle.light .toggle-container.active{background:#d410aa;border:1px solid #d410aa}:host .toggle.dark .toggle-container.active .label,:host .toggle.light .toggle-container.active .label{color:#fff}:host .toggle.dark .toggle-container.active .knob:after,:host .toggle.light .toggle-container.active .knob:after{background:#fff}:host .toggle.dark .message,:host .toggle.light .message{color:#242424}:host .toggle.dark.disabled .toggle-container.active{border-color:#fff}:host .toggle.dark.disabled .toggle-container.active .knob:after{background:#fff}:host .toggle.dark .toggle-container{border-color:#fff}:host .toggle.dark .toggle-container .label{color:#fff}:host .toggle.dark .toggle-container .knob:after{background:#fff}:host .toggle.dark .message{color:#fff}:host .toggle .toggle-container{min-height:20px;max-height:24px;max-width:var(--max-width);padding:0 3px 0 20px;width:fit-content;min-width:36px;border-radius:16px;background:#888;display:flex;align-items:center;cursor:pointer;position:relative;transition:transform .3s,padding .3s,background .3s}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host .toggle .toggle-container:focus-visible{position:relative;outline:2px solid #242424;outline-offset:2px;animation:focus-ring-animation .4s forwards}:host .toggle .toggle-container:focus-visible:after{content:\"\";position:absolute;width:calc(100% + 2px);height:calc(100% + 2px);top:-1px;left:-1px;outline:2px solid #ffffff;border-radius:16px}:host .toggle .toggle-container .knob{height:100%;width:100%;position:absolute;left:-1px;top:0;display:flex;align-items:center;padding:3px;max-height:20px;transition:transform .3s}:host .toggle .toggle-container .knob:after{content:\"\";display:block;border-radius:16px;width:12px;height:12px;background:#fff;transition:background .3s}:host .toggle .toggle-container .label{z-index:1;font-size:8px;font-weight:700;color:#fff;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;pointer-events:visible;line-height:16px}:host .toggle .toggle-container.active{background:#276678;padding:0 20px 0 3px}:host .toggle .toggle-container.active .knob{transform:translate(calc(100% - 15px))}:host .toggle .message{margin-top:4px;font-weight:700;font-size:12px;line-height:16px;color:#276678;text-align:justify}:host .toggle.small-toggle .toggle-container .knob{left:0}:host .toggle.small-toggle .toggle-container .knob:after{width:10px;height:10px}:host .toggle.small-toggle .toggle-container .knob.selected{left:-8px}:host .toggle.small-toggle .toggle-container .knob.selected:after{display:none}:host .toggle.small-toggle .toggle-container .knob.selected ui-icon ::ng-deep svg{width:20px;height:20px}:host .toggle.loading .toggle-container{border-color:#d410aa;background-color:#d410aa;padding:0;display:flex;justify-content:center;cursor:default}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mat-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3.EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "component", type: i4.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i5.SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "text", "applicationTheme", "iconName", "iconSize"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-toggle', providers: [
                         {
@@ -157,7 +157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                             useExisting: forwardRef(() => ToggleComponent),
                             multi: true,
                         },
-                    ], standalone: false, template: "<div class=\"toggle\" [ngClass]=\"classes\">\n  <div\n    [style.--max-width]=\"maxWidth + 'px'\"\n    tabindex=\"0\"\n    class=\"toggle-container\"\n    [ngClass]=\"{ active: selected }\"\n    (click)=\"onToggle()\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-required]=\"ariaRequired\"\n    (keydown)=\"onKeydown($event)\"\n    role=\"switch\"\n    [attr.aria-labelledby]=\"'label'\"\n    [attr.aria-describedby]=\"'ariaDescribedby'\"\n    [attr.aria-checked]=\"selected\"\n  >\n    <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n    <div\n      class=\"label\"\n      uiEllipseText\n      [matTooltipShowDelay]=\"800\"\n      [matTooltip]=\"showLabelTooltip ? label : ''\"\n      (onChangeTextState)=\"changeTextState($event)\"\n      id=\"label\"\n    >\n      {{ label }}\n    </div>\n    <div class=\"knob\" *ngIf=\"!loading; else loadingTemplate\" [ngClass]=\"{ selected }\">\n      <ui-icon\n        [color]=\"disabled ? 'grey' : 'white'\"\n        *ngIf=\"selected && !label\"\n        [size]=\"'16'\"\n        [name]=\"'Check-round-filled'\"\n      ></ui-icon>\n    </div>\n\n    <ng-template #loadingTemplate>\n      <ui-spinner [isLoader]=\"false\" [size]=\"'small'\" [applicationTheme]=\"'dark'\"></ui-spinner>\n    </ng-template>\n  </div>\n  <div *ngIf=\"message && selected\" class=\"message\">{{ message }}</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:fit-content;display:block}:host .toggle{height:auto;width:fit-content;display:flex;flex-direction:column;align-items:center}:host .toggle .toggle-container{border:1px solid transparent}:host .toggle.disabled{opacity:.5}:host .toggle.disabled .label{color:#242424!important}:host .toggle.disabled .toggle-container{background:#e0e0e0;pointer-events:none}:host .toggle.disabled .toggle-container:focus{outline:none}:host .toggle.dark.disabled .toggle-container.active,:host .toggle.light.disabled .toggle-container.active{background:#e9e9e9;border:1px solid #242424}:host .toggle.dark.disabled .toggle-container.active .knob:after,:host .toggle.light.disabled .toggle-container.active .knob:after{background:#242424}:host .toggle.dark .toggle-container,:host .toggle.light .toggle-container{background:transparent;border:1px solid #242424}:host .toggle.dark .toggle-container .label,:host .toggle.light .toggle-container .label{color:#242424}:host .toggle.dark .toggle-container .knob:after,:host .toggle.light .toggle-container .knob:after{background:#242424}:host .toggle.dark .toggle-container.active,:host .toggle.light .toggle-container.active{background:#d410aa;border:1px solid #d410aa}:host .toggle.dark .toggle-container.active .label,:host .toggle.light .toggle-container.active .label{color:#fff}:host .toggle.dark .toggle-container.active .knob:after,:host .toggle.light .toggle-container.active .knob:after{background:#fff}:host .toggle.dark .message,:host .toggle.light .message{color:#242424}:host .toggle.dark.disabled .toggle-container.active{border-color:#fff}:host .toggle.dark.disabled .toggle-container.active .knob:after{background:#fff}:host .toggle.dark .toggle-container{border-color:#fff}:host .toggle.dark .toggle-container .label{color:#fff}:host .toggle.dark .toggle-container .knob:after{background:#fff}:host .toggle.dark .message{color:#fff}:host .toggle .toggle-container{min-height:20px;max-height:24px;max-width:var(--max-width);padding:0 3px 0 20px;width:fit-content;min-width:36px;border-radius:16px;background:#888;display:flex;align-items:center;cursor:pointer;position:relative;transition:transform .3s,padding .3s,background .3s}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host .toggle .toggle-container:focus-visible{position:relative;outline:2px solid #242424;outline-offset:2px;animation:focus-ring-animation .4s forwards}:host .toggle .toggle-container:focus-visible:after{content:\"\";position:absolute;width:calc(100% + 2px);height:calc(100% + 2px);top:-1px;left:-1px;outline:2px solid #ffffff;border-radius:16px}:host .toggle .toggle-container .knob{height:100%;width:100%;position:absolute;left:-1px;top:0;display:flex;align-items:center;padding:3px;max-height:20px;transition:transform .3s}:host .toggle .toggle-container .knob:after{content:\"\";display:block;border-radius:16px;width:12px;height:12px;background:#fff;transition:background .3s}:host .toggle .toggle-container .label{z-index:1;font-size:8px;font-weight:700;color:#fff;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;pointer-events:visible;line-height:16px}:host .toggle .toggle-container.active{background:#276678;padding:0 20px 0 3px}:host .toggle .toggle-container.active .knob{transform:translate(calc(100% - 15px))}:host .toggle .message{margin-top:4px;font-weight:700;font-size:12px;line-height:16px;color:#276678;text-align:justify}:host .toggle.small-toggle .toggle-container .knob{left:0}:host .toggle.small-toggle .toggle-container .knob:after{width:10px;height:10px}:host .toggle.small-toggle .toggle-container .knob.selected{left:-8px}:host .toggle.small-toggle .toggle-container .knob.selected:after{display:none}:host .toggle.small-toggle .toggle-container .knob.selected ui-icon ::ng-deep svg{width:20px;height:20px}:host .toggle.loading .toggle-container{border-color:#d410aa;background-color:#d410aa;padding:0;display:flex;justify-content:center;cursor:default}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"] }]
+                    ], standalone: false, template: "<div class=\"toggle\" [ngClass]=\"classes\">\n  <div\n    [style.--max-width]=\"maxWidth + 'px'\"\n    tabindex=\"0\"\n    class=\"toggle-container\"\n    [ngClass]=\"{ active: selected }\"\n    (click)=\"onToggle()\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-required]=\"ariaRequired\"\n    (keydown)=\"onKeydown($event)\"\n    role=\"switch\"\n    [attr.aria-labelledby]=\"'label'\"\n    [attr.aria-describedby]=\"'ariaDescribedby'\"\n    [attr.aria-checked]=\"selected\"\n  >\n    <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n    <div\n      class=\"label\"\n      uiEllipseText\n      [matTooltipShowDelay]=\"800\"\n      [matTooltip]=\"showLabelTooltip ? label : ''\"\n      (onChangeTextState)=\"changeTextState($event)\"\n      id=\"label\"\n    >\n      {{ label }}\n    </div>\n    @if (!loading) {\n      <div class=\"knob\" [ngClass]=\"{ selected }\">\n        @if (selected && !label) {\n          <ui-icon [color]=\"disabled ? 'grey' : 'white'\" [size]=\"'16'\" [name]=\"'Check-round-filled'\"></ui-icon>\n        }\n      </div>\n    } @else {\n      <ui-spinner [isLoader]=\"false\" [size]=\"'small'\" [applicationTheme]=\"'dark'\"></ui-spinner>\n    }\n  </div>\n  @if (message && selected) {\n    <div class=\"message\">{{ message }}</div>\n  }\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:fit-content;display:block}:host .toggle{height:auto;width:fit-content;display:flex;flex-direction:column;align-items:center}:host .toggle .toggle-container{border:1px solid transparent}:host .toggle.disabled{opacity:.5}:host .toggle.disabled .label{color:#242424!important}:host .toggle.disabled .toggle-container{background:#e0e0e0;pointer-events:none}:host .toggle.disabled .toggle-container:focus{outline:none}:host .toggle.dark.disabled .toggle-container.active,:host .toggle.light.disabled .toggle-container.active{background:#e9e9e9;border:1px solid #242424}:host .toggle.dark.disabled .toggle-container.active .knob:after,:host .toggle.light.disabled .toggle-container.active .knob:after{background:#242424}:host .toggle.dark .toggle-container,:host .toggle.light .toggle-container{background:transparent;border:1px solid #242424}:host .toggle.dark .toggle-container .label,:host .toggle.light .toggle-container .label{color:#242424}:host .toggle.dark .toggle-container .knob:after,:host .toggle.light .toggle-container .knob:after{background:#242424}:host .toggle.dark .toggle-container.active,:host .toggle.light .toggle-container.active{background:#d410aa;border:1px solid #d410aa}:host .toggle.dark .toggle-container.active .label,:host .toggle.light .toggle-container.active .label{color:#fff}:host .toggle.dark .toggle-container.active .knob:after,:host .toggle.light .toggle-container.active .knob:after{background:#fff}:host .toggle.dark .message,:host .toggle.light .message{color:#242424}:host .toggle.dark.disabled .toggle-container.active{border-color:#fff}:host .toggle.dark.disabled .toggle-container.active .knob:after{background:#fff}:host .toggle.dark .toggle-container{border-color:#fff}:host .toggle.dark .toggle-container .label{color:#fff}:host .toggle.dark .toggle-container .knob:after{background:#fff}:host .toggle.dark .message{color:#fff}:host .toggle .toggle-container{min-height:20px;max-height:24px;max-width:var(--max-width);padding:0 3px 0 20px;width:fit-content;min-width:36px;border-radius:16px;background:#888;display:flex;align-items:center;cursor:pointer;position:relative;transition:transform .3s,padding .3s,background .3s}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host .toggle .toggle-container:focus-visible{position:relative;outline:2px solid #242424;outline-offset:2px;animation:focus-ring-animation .4s forwards}:host .toggle .toggle-container:focus-visible:after{content:\"\";position:absolute;width:calc(100% + 2px);height:calc(100% + 2px);top:-1px;left:-1px;outline:2px solid #ffffff;border-radius:16px}:host .toggle .toggle-container .knob{height:100%;width:100%;position:absolute;left:-1px;top:0;display:flex;align-items:center;padding:3px;max-height:20px;transition:transform .3s}:host .toggle .toggle-container .knob:after{content:\"\";display:block;border-radius:16px;width:12px;height:12px;background:#fff;transition:background .3s}:host .toggle .toggle-container .label{z-index:1;font-size:8px;font-weight:700;color:#fff;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;pointer-events:visible;line-height:16px}:host .toggle .toggle-container.active{background:#276678;padding:0 20px 0 3px}:host .toggle .toggle-container.active .knob{transform:translate(calc(100% - 15px))}:host .toggle .message{margin-top:4px;font-weight:700;font-size:12px;line-height:16px;color:#276678;text-align:justify}:host .toggle.small-toggle .toggle-container .knob{left:0}:host .toggle.small-toggle .toggle-container .knob:after{width:10px;height:10px}:host .toggle.small-toggle .toggle-container .knob.selected{left:-8px}:host .toggle.small-toggle .toggle-container .knob.selected:after{display:none}:host .toggle.small-toggle .toggle-container .knob.selected ui-icon ::ng-deep svg{width:20px;height:20px}:host .toggle.loading .toggle-container{border-color:#d410aa;background-color:#d410aa;padding:0;display:flex;justify-content:center;cursor:default}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mat-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -193,21 +193,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }] } });
 class ToggleComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ToggleComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: ToggleComponentModule, declarations: [ToggleComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ToggleComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: ToggleComponentModule, declarations: [ToggleComponent], imports: [CommonModule,
             MatTooltipModule,
             EllipseTextDirective,
             MatInputModule,
             UiTranslatePipe,
             IconComponentModule,
             SpinnerComponentModule], exports: [ToggleComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ToggleComponentModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ToggleComponentModule, imports: [CommonModule,
             MatTooltipModule,
             MatInputModule,
             IconComponentModule,
             SpinnerComponentModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ToggleComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ToggleComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ToggleComponent],

package/fesm2022/testgorilla-tgo-ui-components-toggle.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"testgorilla-tgo-ui-components-toggle.mjs","sources":["../../../components/toggle/toggle.component.ts","../../../components/toggle/toggle.component.html","../../../components/toggle/toggle.component.module.ts","../../../components/toggle/testgorilla-tgo-ui-components-toggle.ts"],"sourcesContent":["import {\n Component,\n EventEmitter,\n forwardRef,\n HostBinding,\n Inject,\n Input,\n OnChanges,\n OnInit,\n Optional,\n Output,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { RegisterFn } from './toggle.model';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IKeyboardEvent } from '@testgorilla/tgo-ui/components/core';\n\n@Component({\n selector: 'ui-toggle',\n templateUrl: './toggle.component.html',\n styleUrls: ['./toggle.component.scss'],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => ToggleComponent),\n multi: true,\n },\n ],\n standalone: false,\n})\nexport class ToggleComponent implements ControlValueAccessor, OnChanges, OnInit {\n /*\n The `selected` property determines the current state of the toggle switch.\n \n @type {boolean}\n * @default false\n * @memberof ToggleComponent\n /\n @Input() selected = false;\n\n /\n The `disabled` property determines whether the toggle switch is disabled.\n \n @type {boolean}\n * @default false\n * @memberof ToggleComponent\n /\n @Input() disabled = false;\n\n /\n Toggle label\n \n @type {string}\n * @default ''\n * @memberof ToggleComponent\n /\n @Input() label = '';\n\n /\n Message\n \n @type {string}\n * @default ''\n * @memberof ToggleComponent\n /\n @Input() message = '';\n\n /\n Max width of the toggle container\n \n @type {number}\n * @memberof ToggleComponent\n /\n @HostBinding('style.--max-width')\n @Input()\n maxWidth: number \| undefined;\n\n /\n \n * Defines the application theme\n \n @type {ApplicationTheme}\n * @memberof ToggleComponent\n /\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /\n The `toggle` event is triggered when the state of the toggle switch changes. It returns the new state.\n \n @type {event}\n * @memberof ToggleComponent\n /\n @Output() toggle = new EventEmitter<boolean>();\n\n /\n A string representing the ARIA label for accessibility.\n * This label is used to provide an accessible name for the input element.\n * @type {string}\n * @memberof ToggleComponent\n /\n @Input() ariaLabel: string;\n\n /\n A string representing the ARIA requirement for accessibility.\n * This attribute is used to indicate whether an input field is required for form submission.\n * @type {boolean}\n * @memberof ToggleComponent\n /\n @Input() ariaRequired = false;\n\n /\n disable/enable click on toggle\n * @type {boolean}\n * @memberof ToggleComponent\n /\n @Input() preventClick = false;\n\n /\n The loading state\n \n @type {boolean}\n * @memberof ToggleComponent\n /\n @Input() loading = false;\n\n /\n A string representing the ARIA requirement for accessibility.\n * This attribute is used to indicate whether an input field is required for form submission.\n * @type {string}\n * @memberof ToggleComponent\n /\n @Input() ariaDescribedby = '';\n\n protected showLabelTooltip = false;\n protected classes: string;\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n ) {\n if (defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n }\n }\n\n ngOnChanges(): void {\n this.setClasses();\n }\n\n ngOnInit(): void {\n this.setClasses();\n }\n\n onToggle(): void {\n if (this.preventClick) {\n this.toggle.emit(this.selected);\n }\n if (!this.disabled && !this.preventClick) {\n this.selected = !this.selected;\n this.toggle.emit(this.selected);\n this.onChange(this.selected);\n }\n }\n\n writeValue(state: boolean): void {\n if (state) {\n this.selected = state;\n }\n }\n\n registerOnChange(fn: RegisterFn): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: RegisterFn): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean) {\n this.disabled = isDisabled;\n }\n\n changeTextState(state: boolean): void {\n this.showLabelTooltip = state;\n }\n\n onKeydown($event: KeyboardEvent) {\n if ($event.key === (IKeyboardEvent.ENTER as string) \|\| $event.key === (IKeyboardEvent.SPACE as string)) {\n $event.stopPropagation();\n $event.preventDefault();\n this.onToggle();\n }\n }\n\n private onChange: RegisterFn = () => {};\n private onTouched: RegisterFn = () => {};\n\n private setClasses(): void {\n this.classes = `${this.disabled ? 'disabled' : ''} ${this.applicationTheme} ${this.loading ? 'loading' : ''} ${!this.label ? 'small-toggle' : ''}`;\n }\n}\n","<div class=\"toggle\" [ngClass]=\"classes\">\n <div\n [style.--max-width]=\"maxWidth + 'px'\"\n tabindex=\"0\"\n class=\"toggle-container\"\n [ngClass]=\"{ active: selected }\"\n (click)=\"onToggle()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n (keydown)=\"onKeydown($event)\"\n role=\"switch\"\n [attr.aria-labelledby]=\"'label'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n [attr.aria-checked]=\"selected\"\n >\n <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n <div\n class=\"label\"\n uiEllipseText\n [matTooltipShowDelay]=\"800\"\n [matTooltip]=\"showLabelTooltip ? label : ''\"\n (onChangeTextState)=\"changeTextState($event)\"\n id=\"label\"\n >\n {{ label }}\n </div>\n <div class=\"knob\" ngIf=\"!loading; else loadingTemplate\" [ngClass]=\"{ selected }\">\n <ui-icon\n [color]=\"disabled ? 'grey' : 'white'\"\n ngIf=\"selected && !label\"\n [size]=\"'16'\"\n [name]=\"'Check-round-filled'\"\n ></ui-icon>\n </div>\n\n <ng-template #loadingTemplate>\n <ui-spinner [isLoader]=\"false\" [size]=\"'small'\" [applicationTheme]=\"'dark'\"></ui-spinner>\n </ng-template>\n </div>\n <div ngIf=\"message && selected\" class=\"message\">{{ message }}</div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ToggleComponent } from './toggle.component';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { EllipseTextDirective } from '@testgorilla/tgo-ui/components/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { SpinnerComponentModule } from '@testgorilla/tgo-ui/components/spinner';\n\n@NgModule({\n declarations: [ToggleComponent],\n imports: [\n CommonModule,\n MatTooltipModule,\n EllipseTextDirective,\n MatInputModule,\n UiTranslatePipe,\n IconComponentModule,\n SpinnerComponentModule,\n ],\n exports: [ToggleComponent],\n})\nexport class ToggleComponentModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;MA8Ba,eAAe,CAAA;AA0G1B,IAAA,WAAA,CAC6E,eAAiC,EAAA;QAAjC,IAAA,CAAA,eAAe,GAAf,eAAe;AA1G5F;;;;;;AAMG;QACM,IAAA,CAAA,QAAQ,GAAG,KAAK;AAEzB;;;;;;AAMG;QACM,IAAA,CAAA,QAAQ,GAAG,KAAK;AAEzB;;;;;;AAMG;QACM,IAAA,CAAA,KAAK,GAAG,EAAE;AAEnB;;;;;;AAMG;QACM,IAAA,CAAA,OAAO,GAAG,EAAE;AAYrB;;;;;;AAMG;QACM,IAAA,CAAA,gBAAgB,GAAqB,OAAO;AAErD;;;;;AAKG;AACO,QAAA,IAAA,CAAA,MAAM,GAAG,IAAI,YAAY,EAAW;AAU9C;;;;;AAKG;QACM,IAAA,CAAA,YAAY,GAAG,KAAK;AAE7B;;;;AAIG;QACM,IAAA,CAAA,YAAY,GAAG,KAAK;AAE7B;;;;;AAKG;QACM,IAAA,CAAA,OAAO,GAAG,KAAK;AAExB;;;;;AAKG;QACM,IAAA,CAAA,eAAe,GAAG,EAAE;QAEnB,IAAA,CAAA,gBAAgB,GAAG,KAAK;AA4D1B,QAAA,IAAA,CAAA,QAAQ,GAAe,MAAK,EAAE,CAAC;AAC/B,QAAA,IAAA,CAAA,SAAS,GAAe,MAAK,EAAE,CAAC;QAvDtC,IAAI,eAAe,EAAE;AACnB,YAAA,IAAI,CAAC,gBAAgB,GAAG,eAAe;QACzC;IACF;IAEA,WAAW,GAAA;QACT,IAAI,CAAC,UAAU,EAAE;IACnB;IAEA,QAAQ,GAAA;QACN,IAAI,CAAC,UAAU,EAAE;IACnB;IAEA,QAAQ,GAAA;AACN,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QACjC;QACA,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACxC,YAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ;YAC9B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC/B,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC9B;IACF;AAEA,IAAA,UAAU,CAAC,KAAc,EAAA;QACvB,IAAI,KAAK,EAAE;AACT,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;QACvB;IACF;AAEA,IAAA,gBAAgB,CAAC,EAAc,EAAA;AAC7B,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;IACpB;AAEA,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AAEA,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,QAAQ,GAAG,UAAU;IAC5B;AAEA,IAAA,eAAe,CAAC,KAAc,EAAA;AAC5B,QAAA,IAAI,CAAC,gBAAgB,GAAG,KAAK;IAC/B;AAEA,IAAA,SAAS,CAAC,MAAqB,EAAA;AAC7B,QAAA,IAAI,MAAM,CAAC,GAAG,KAAM,cAAc,CAAC,KAAgB,IAAI,MAAM,CAAC,GAAG,KAAM,cAAc,CAAC,KAAgB,EAAE;YACtG,MAAM,CAAC,eAAe,EAAE;YACxB,MAAM,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,QAAQ,EAAE;QACjB;IACF;IAKQ,UAAU,GAAA;QAChB,IAAI,CAAC,OAAO,GAAG,CAAA,EAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAA,CAAA,EAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,cAAc,GAAG,EAAE,CAAA,CAAE;IACpJ;AAxKW,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,kBA2GJ,oCAAoC,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AA3G/C,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,EAAA,YAAA,EAAA,KAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,KAAA,EAAA,OAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,SAAA,EAAA,WAAA,EAAA,YAAA,EAAA,cAAA,EAAA,YAAA,EAAA,cAAA,EAAA,OAAA,EAAA,SAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,mBAAA,EAAA,eAAA,EAAA,EAAA,EAAA,SAAA,EATf;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,eAAe,CAAC;AAC9C,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;AACF,SAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC3BH,82CAyCA,EAAA,MAAA,EAAA,CAAA,04MAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,eAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,OAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,iBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FDXa,eAAe,EAAA,UAAA,EAAA,CAAA;kBAb3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAAA,SAAA,EAGV;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,qBAAqB,CAAC;AAC9C,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;AACF,qBAAA,EAAA,UAAA,EACW,KAAK,EAAA,QAAA,EAAA,82CAAA,EAAA,MAAA,EAAA,CAAA,04MAAA,CAAA,EAAA;;0BA6Gd;;0BAAY,MAAM;2BAAC,oCAAoC;yCAnGjD,QAAQ,EAAA,CAAA;sBAAhB;gBASQ,QAAQ,EAAA,CAAA;sBAAhB;gBASQ,KAAK,EAAA,CAAA;sBAAb;gBASQ,OAAO,EAAA,CAAA;sBAAf;gBAUD,QAAQ,EAAA,CAAA;sBAFP,WAAW;uBAAC,mBAAmB;;sBAC/B;gBAUQ,gBAAgB,EAAA,CAAA;sBAAxB;gBAQS,MAAM,EAAA,CAAA;sBAAf;gBAQQ,SAAS,EAAA,CAAA;sBAAjB;gBAQQ,YAAY,EAAA,CAAA;sBAApB;gBAOQ,YAAY,EAAA,CAAA;sBAApB;gBAQQ,OAAO,EAAA,CAAA;sBAAf;gBAQQ,eAAe,EAAA,CAAA;sBAAvB;;;ME5GU,qBAAqB,CAAA;+GAArB,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;gHAArB,qBAAqB,EAAA,YAAA,EAAA,CAZjB,eAAe,CAAA,EAAA,OAAA,EAAA,CAE5B,YAAY;YACZ,gBAAgB;YAChB,oBAAoB;YACpB,cAAc;YACd,eAAe;YACf,mBAAmB;AACnB,YAAA,sBAAsB,aAEd,eAAe,CAAA,EAAA,CAAA,CAAA;AAEd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,qBAAqB,YAV9B,YAAY;YACZ,gBAAgB;YAEhB,cAAc;YAEd,mBAAmB;YACnB,sBAAsB,CAAA,EAAA,CAAA,CAAA;;4FAIb,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAbjC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,eAAe,CAAC;AAC/B,oBAAA,OAAO,EAAE;wBACP,YAAY;wBACZ,gBAAgB;wBAChB,oBAAoB;wBACpB,cAAc;wBACd,eAAe;wBACf,mBAAmB;wBACnB,sBAAsB;AACvB,qBAAA;oBACD,OAAO,EAAE,CAAC,eAAe,CAAC;AAC3B,iBAAA;;;ACtBD;;AAEG;;;;"}
1	+ {"version":3,"file":"testgorilla-tgo-ui-components-toggle.mjs","sources":["../../../components/toggle/toggle.component.ts","../../../components/toggle/toggle.component.html","../../../components/toggle/toggle.component.module.ts","../../../components/toggle/testgorilla-tgo-ui-components-toggle.ts"],"sourcesContent":["import {\n Component,\n EventEmitter,\n forwardRef,\n HostBinding,\n Inject,\n Input,\n OnChanges,\n OnInit,\n Optional,\n Output,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { RegisterFn } from './toggle.model';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IKeyboardEvent } from '@testgorilla/tgo-ui/components/core';\n\n@Component({\n selector: 'ui-toggle',\n templateUrl: './toggle.component.html',\n styleUrls: ['./toggle.component.scss'],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => ToggleComponent),\n multi: true,\n },\n ],\n standalone: false,\n})\nexport class ToggleComponent implements ControlValueAccessor, OnChanges, OnInit {\n /*\n The `selected` property determines the current state of the toggle switch.\n \n @type {boolean}\n * @default false\n * @memberof ToggleComponent\n /\n @Input() selected = false;\n\n /\n The `disabled` property determines whether the toggle switch is disabled.\n \n @type {boolean}\n * @default false\n * @memberof ToggleComponent\n /\n @Input() disabled = false;\n\n /\n Toggle label\n \n @type {string}\n * @default ''\n * @memberof ToggleComponent\n /\n @Input() label = '';\n\n /\n Message\n \n @type {string}\n * @default ''\n * @memberof ToggleComponent\n /\n @Input() message = '';\n\n /\n Max width of the toggle container\n \n @type {number}\n * @memberof ToggleComponent\n /\n @HostBinding('style.--max-width')\n @Input()\n maxWidth: number \| undefined;\n\n /\n \n * Defines the application theme\n \n @type {ApplicationTheme}\n * @memberof ToggleComponent\n /\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /\n The `toggle` event is triggered when the state of the toggle switch changes. It returns the new state.\n \n @type {event}\n * @memberof ToggleComponent\n /\n @Output() toggle = new EventEmitter<boolean>();\n\n /\n A string representing the ARIA label for accessibility.\n * This label is used to provide an accessible name for the input element.\n * @type {string}\n * @memberof ToggleComponent\n /\n @Input() ariaLabel: string;\n\n /\n A string representing the ARIA requirement for accessibility.\n * This attribute is used to indicate whether an input field is required for form submission.\n * @type {boolean}\n * @memberof ToggleComponent\n /\n @Input() ariaRequired = false;\n\n /\n disable/enable click on toggle\n * @type {boolean}\n * @memberof ToggleComponent\n /\n @Input() preventClick = false;\n\n /\n The loading state\n \n @type {boolean}\n * @memberof ToggleComponent\n /\n @Input() loading = false;\n\n /\n A string representing the ARIA requirement for accessibility.\n * This attribute is used to indicate whether an input field is required for form submission.\n * @type {string}\n * @memberof ToggleComponent\n /\n @Input() ariaDescribedby = '';\n\n protected showLabelTooltip = false;\n protected classes: string;\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n ) {\n if (defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n }\n }\n\n ngOnChanges(): void {\n this.setClasses();\n }\n\n ngOnInit(): void {\n this.setClasses();\n }\n\n onToggle(): void {\n if (this.preventClick) {\n this.toggle.emit(this.selected);\n }\n if (!this.disabled && !this.preventClick) {\n this.selected = !this.selected;\n this.toggle.emit(this.selected);\n this.onChange(this.selected);\n }\n }\n\n writeValue(state: boolean): void {\n if (state) {\n this.selected = state;\n }\n }\n\n registerOnChange(fn: RegisterFn): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: RegisterFn): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean) {\n this.disabled = isDisabled;\n }\n\n changeTextState(state: boolean): void {\n this.showLabelTooltip = state;\n }\n\n onKeydown($event: KeyboardEvent) {\n if ($event.key === (IKeyboardEvent.ENTER as string) \|\| $event.key === (IKeyboardEvent.SPACE as string)) {\n $event.stopPropagation();\n $event.preventDefault();\n this.onToggle();\n }\n }\n\n private onChange: RegisterFn = () => {};\n private onTouched: RegisterFn = () => {};\n\n private setClasses(): void {\n this.classes = `${this.disabled ? 'disabled' : ''} ${this.applicationTheme} ${this.loading ? 'loading' : ''} ${!this.label ? 'small-toggle' : ''}`;\n }\n}\n","<div class=\"toggle\" [ngClass]=\"classes\">\n <div\n [style.--max-width]=\"maxWidth + 'px'\"\n tabindex=\"0\"\n class=\"toggle-container\"\n [ngClass]=\"{ active: selected }\"\n (click)=\"onToggle()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n (keydown)=\"onKeydown($event)\"\n role=\"switch\"\n [attr.aria-labelledby]=\"'label'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n [attr.aria-checked]=\"selected\"\n >\n <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n <div\n class=\"label\"\n uiEllipseText\n [matTooltipShowDelay]=\"800\"\n [matTooltip]=\"showLabelTooltip ? label : ''\"\n (onChangeTextState)=\"changeTextState($event)\"\n id=\"label\"\n >\n {{ label }}\n </div>\n @if (!loading) {\n <div class=\"knob\" [ngClass]=\"{ selected }\">\n @if (selected && !label) {\n <ui-icon [color]=\"disabled ? 'grey' : 'white'\" [size]=\"'16'\" [name]=\"'Check-round-filled'\"></ui-icon>\n }\n </div>\n } @else {\n <ui-spinner [isLoader]=\"false\" [size]=\"'small'\" [applicationTheme]=\"'dark'\"></ui-spinner>\n }\n </div>\n @if (message && selected) {\n <div class=\"message\">{{ message }}</div>\n }\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ToggleComponent } from './toggle.component';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { EllipseTextDirective } from '@testgorilla/tgo-ui/components/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { SpinnerComponentModule } from '@testgorilla/tgo-ui/components/spinner';\n\n@NgModule({\n declarations: [ToggleComponent],\n imports: [\n CommonModule,\n MatTooltipModule,\n EllipseTextDirective,\n MatInputModule,\n UiTranslatePipe,\n IconComponentModule,\n SpinnerComponentModule,\n ],\n exports: [ToggleComponent],\n})\nexport class ToggleComponentModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}