npm - @testgorilla/tgo-ui - Versions diffs - 7.2.4 → 7.2.5 - Mend

@testgorilla/tgo-ui 7.2.4 → 7.2.5

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

package/mcp/catalog.json +1 -1
package/package.json +21 -21

package/mcp/catalog.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":"7.2.4","generatedAt":"2026-04-08T13:14:50.243Z","components":{"accordion":{"name":"AccordionComponent","selector":"ui-accordion","category":"accordion","description":"To use the Accordion component, you need to import the `AccordionComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/accordion","moduleName":"AccordionComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"label","type":"string","defaultValue":null,"required":true,"alias":null,"transform":null,"description":"The label displayed for the accordion.","isSignal":false},{"name":"open","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":"booleanAttribute","description":"Determines whether the accordion is initially open.","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":"booleanAttribute","description":"Disables the accordion if set to true.","isSignal":false},{"name":"showPremiumIcon","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":"booleanAttribute","description":"Indicates whether to show a premium icon.","isSignal":false},{"name":"premiumTooltipText","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"The tooltip text for the premium icon.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme where accordion is used","isSignal":false},{"name":"labelIcon","type":"IconName","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Changed premium icon on this icon","isSignal":false},{"name":"variant","type":"AccordionVariant","defaultValue":"'standard'","required":false,"alias":null,"transform":null,"description":"Select accordion variant. Don`t work on Classic theme","isSignal":false},{"name":"allowCustomHeader","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Projects content with attribute 'customHeader'","isSignal":false},{"name":"noBackgroundColor","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Sets background color of content to none","isSignal":false},{"name":"toggleIconPosition","type":"ToggleIconPosition","defaultValue":"'right'","required":false,"alias":null,"transform":null,"description":"Defines the toggle icon position","isSignal":false}],"outputs":[{"name":"closed","eventType":"void","alias":null,"description":"","isSignal":false},{"name":"opened","eventType":"void","alias":null,"description":"","isSignal":false}],"module":{"name":"AccordionComponentModule","imports":["CommonModule","IconComponentModule","ButtonComponentModule","MatTooltipModule","MatExpansionModule"],"exports":["AccordionComponent"],"declarations":["AccordionComponent"],"providers":[]},"types":{"typeAliases":[{"name":"AccordionVariant","value":"'standard' \| 'filter' \| 'table'"},{"name":"ToggleIconPosition","value":"'left' \| 'right'"}],"interfaces":[],"enums":[]},"examples":[{"name":"Default","template":"<ui-accordion ${argsToTemplate(args)} applicationTheme=\"${_theme}\">\n <div actions>\n <ui-icon applicationTheme=\"${_theme}\" name=\"${_theme === 'classic' ? 'Premium' : 'Premium-circle'}\">\n </ui-icon>\n </div>\n <div style=\"padding: 20px\">\n ${accordionText}\n </div>\n </ui-accordion>","props":{"label":"'Label'"}},{"name":"LeftToggleIcon","template":"<ui-accordion ${argsToTemplate(args)} applicationTheme=\"${_theme}\">\n <div actions>\n <ui-icon applicationTheme=\"${_theme}\" name=\"${_theme === 'classic' ? 'Premium' : 'Premium-circle'}\">\n </ui-icon>\n </div>\n <div style=\"padding: 20px\">\n ${accordionText}\n </div>\n </ui-accordion>","props":{"label":"'Label'","toggleIconPosition":"'left'"}},{"name":"NoBackgroundColor","template":"<ui-accordion ${argsToTemplate(args)} applicationTheme=\"${_theme}\">\n <div actions>\n <ui-icon applicationTheme=\"${_theme}\" name=\"${_theme === 'classic' ? 'Premium' : 'Premium-circle'}\">\n </ui-icon>\n </div>\n <div style=\"padding: 20px\">\n ${accordionText}\n </div>\n </ui-accordion>","props":{"noBackgroundColor":"true"}},{"name":"Disabled","template":"<ui-accordion ${argsToTemplate(args)} applicationTheme=\"${_theme}\">\n <div actions>\n <ui-icon applicationTheme=\"${_theme}\" name=\"${_theme === 'classic' ? 'Premium' : 'Premium-circle'}\">\n </ui-icon>\n </div>\n <div style=\"padding: 20px\">\n ${accordionText}\n </div>\n </ui-accordion>","props":{"disabled":"true","open":"true","label":"'Label'"}},{"name":"WithCustomActions","template":"<ui-accordion ${argsToTemplate(args)} applicationTheme=\"${_theme}\">\n <div actions>\n <ui-icon applicationTheme=\"${_theme}\" name=\"${_theme === 'classic' ? 'Premium' : 'Premium-circle'}\">\n </ui-icon>\n </div>\n <div style=\"padding: 20px\">\n ${accordionText}\n </div>\n </ui-accordion>","props":{"label":"'Label'"}},{"name":"WithCustomHeader","template":"<ui-accordion ${argsToTemplate(args)} applicationTheme=\"${_theme}\">\n <div customHeader style=\"padding: 8px; display: flex\">\n <ui-button applicationTheme=\"${_theme}\" variant=\"primary\" label=\"Primary\" style=\"padding-right: 8px\"></ui-button>\n <ui-button applicationTheme=\"${_theme}\" variant=\"ghost\" label=\"Ghost\"></ui-button>\n </div>\n <div style=\"padding: 20px\">\n ${accordionText}\n </div>\n </ui-accordion>","props":{"label":"'Label'","allowCustomHeader":"true"}},{"name":"Premium","template":"<ui-accordion ${argsToTemplate(args)} applicationTheme=\"${_theme}\">\n </ui-accordion>","props":{"label":"'Label'","showPremiumIcon":"true","premiumTooltipText":"'Buy Premium'"}},{"name":"RebrandFilter","template":"<ui-accordion ${argsToTemplate(args)} applicationTheme=\"dark\">\n <div [style]=\"'display: flex; gap: 10px; flex-direction: column'\">\n <ui-radio-button applicationTheme=\"${_theme}\" [label]=\"'Option'\"></ui-radio-button>\n <ui-radio-button applicationTheme=\"${_theme}\" [label]=\"'Option 1'\"></ui-radio-button>\n <ui-radio-button applicationTheme=\"${_theme}\" [label]=\"'Option 2'\"></ui-radio-button>\n <ui-radio-button applicationTheme=\"${_theme}\" [label]=\"'Option 3'\"></ui-radio-button>\n </div>\n </ui-accordion>","props":{"label":"'Label'","variant":"'filter'","labelIcon":"'Info'","premiumTooltipText":"'Label Icon'"}},{"name":"RebrandTable","template":"<ui-accordion ${argsToTemplate(args)} applicationTheme=\"dark\">\n <div actions style=\"display: flex; width: 300px;justify-content: space-between; align-items: center\">\n <div>Column info</div>\n <ui-icon size=\"24\" applicationTheme=\"${_theme}\" name=\"Delete\"></ui-icon>\n </div>\n <div [style]=\"'display: flex; flex-direction: column'\">\n <div style=\"border-top: 1px solid #D3D3D3; width: 100%; height: 64px; display: flex; align-items: center;\">\n <div style=\"display: flex;gap: 8px; align-items: center; margin-left: 60px\">\n <ui-icon size=\"24\" applicationTheme=\"${_theme}\" name=\"Document\"></ui-icon>\n <div>Iternal Label</div>\n </div>\n </div>\n <div style=\"border-top: 1px solid #D3D3D3; width: 100%; height: 64px; display: flex; align-items: center;\">\n <div style=\"display: flex;gap: 8px; align-items: center; margin-left: 60px\">\n <ui-icon size=\"24\" applicationTheme=\"${_theme}\" name=\"Document\"></ui-icon>\n <div>Iternal Label</div>\n </div>\n </div>\n </div>\n </ui-accordion>","props":{"label":"'Label'","variant":"'table'","labelIcon":"'Info'","premiumTooltipText":"'Label Icon'"}}],"documentation":"## How to use\n\nTo use the Accordion component, you need to import the `AccordionComponentModule` in your module:\n\n```typescript\nimport { AccordionComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n AccordionComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-accordion label=\"My Accordion\" applicationTheme=\"light\">\n <div>Content goes here</div>\n</ui-accordion>\n```","template":"<mat-accordion\n class=\"accordion-wrapper\"\n [class.disabled]=\"disabled\"\n [ngClass]=\"variant\"\n [attr.theme]=\"applicationTheme\"\n>\n <mat-expansion-panel\n [expanded]=\"open\"\n [class.bgcolor-none]=\"noBackgroundColor\"\n (opened)=\"toggle(true)\"\n (closed)=\"toggle(false)\"\n >\n <mat-expansion-panel-header\n [tabIndex]=\"disabled ? -1 : 0\"\n [class.custom-height]=\"allowCustomHeader\"\n [class.left-toggle]=\"toggleIconPosition === 'left'\"\n [attr.aria-label]=\"label\"\n >\n <mat-panel-title ngIf=\"!allowCustomHeader; else customHeader\">\n <div ngIf=\"variant === 'table' && applicationTheme !== 'classic'; else default\" class=\"table-container\">\n <ui-icon [size]=\"'24'\" [ngClass]=\"{ open }\" [name]=\"'Arrow-chevron-down-filled'\"></ui-icon>\n <div class=\"accordion-label\">\n {{ label }}\n </div>\n </div>\n <ng-template #default>\n <div class=\"accordion-label\">\n {{ label }}\n <ng-content select=\"[subHeader]\"></ng-content>\n <ui-icon\n [matTooltipClass]=\"applicationTheme\"\n [matTooltip]=\"premiumTooltipText\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"labelIcon ? labelIcon : applicationTheme === 'classic' ? 'Premium' : 'Premium-circle-in-line'\"\n ngIf=\"showPremiumIcon \|\| labelIcon\"\n ></ui-icon>\n </div>\n </ng-template>\n </mat-panel-title>\n <ng-template #customHeader>\n <ng-content select=\"[customHeader]\"></ng-content>\n </ng-template>\n <mat-panel-description>\n <div class=\"accordion-actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </mat-panel-description>\n </mat-expansion-panel-header>\n <ng-content></ng-content>\n </mat-expansion-panel>\n</mat-accordion>\n","queryGuide":{"roles":["group","region"],"ariaAttributes":["aria-label"],"dataTestIds":[],"materialComponents":["mat-accordion","mat-expansion-panel","mat-expansion-panel-header","mat-panel-title","mat-panel-description"],"childUIComponents":["ui-icon"],"suggestedQueries":["screen.getByRole('group')","screen.getByRole('region')","screen.getByLabelText('label text')"]},"filePath":"components/accordion/accordion.component.ts","supportsTheme":true,"lastModified":1775654032744.924},"ai-audio-circle":{"name":"AiAudioCircleComponent","selector":"ui-ai-audio-circle","category":"ai-audio-circle","description":"A voice-reactive animation visualizer component that displays animated pulse and ring effects based on audio input.","importPath":"@testgorilla/tgo-ui/components/ai-audio-circle","moduleName":"AiAudioCircleModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"audioTrack","type":"MediaStreamTrack","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"candidateAudioTrack","type":"MediaStreamTrack","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"canvasSize","type":"number","defaultValue":"350","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"animated","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"state","type":"InterviewState","defaultValue":"InterviewState.AiListening","required":false,"alias":null,"transform":null,"description":"","isSignal":true}],"outputs":[{"name":"stateChange","eventType":"InterviewState","alias":null,"description":"Two-way binding change event for state","isSignal":true}],"module":{"name":"AiAudioCircleModule","imports":["CommonModule"],"exports":["AiAudioCircleComponent"],"declarations":["AiAudioCircleComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"A voice-reactive animation visualizer component that displays animated pulse and ring effects based on audio input.\n\n## Features\n\n- Voice-Reactive Animations: Real-time visual feedback based on audio input levels\n- Multiple States: Supports different interview states (AI listening, AI speaking, candidate speaking)\n- Canvas-Based Rendering: High-performance animations using HTML5 Canvas\n- Dual Audio Track Support: Can process both AI and candidate audio tracks simultaneously\n- Customizable Colors: Pre-configured color schemes for pulse and ring animations\n\n## Usage\n\n### Basic Usage\n\n```typescript\nimport { AiAudioCircleModule } from '@testgorilla/tgo-ui/components/ai-audio-circle';\n\n@Component({\n selector: 'app-interview',\n template: `\n <ui-ai-audio-circle\n [audioTrack]=\"aiAudioTrack\"\n [candidateAudioTrack]=\"candidateAudioTrack\"\n [state]=\"currentState\">\n </ui-ai-audio-circle>\n `,\n imports: [AiAudioCircleModule],\n})\nexport class InterviewComponent {\n aiAudioTrack?: MediaStreamTrack;\n candidateAudioTrack?: MediaStreamTrack;\n currentState: InterviewState = 'ai-listening';\n}\n```\n\n### With Audio Tracks\n\nTo connect real audio tracks, obtain MediaStreamTrack objects from getUserMedia or other audio sources:\n\n```typescript\nasync setupAudioTracks() {\n const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n this.candidateAudioTrack = stream.getAudioTracks()[0];\n}\n```\n\n## Properties\n\n\| Property \| Type \| Default \| Description \|\n\|----------\|------\|---------\|-------------\|\n\| `audioTrack` \| `MediaStreamTrack` \| `undefined` \| AI audio track for visualization \|\n\| `candidateAudioTrack` \| `MediaStreamTrack` \| `undefined` \| Candidate audio track for visualization \|\n\| `state` \| `InterviewState` \| `undefined` \| Current interview state ('candidate-speaking' \\\| 'ai-listening' \\\| 'ai-speaking') \|\n\n## Signals\n\n\| Signal \| Type \| Description \|\n\|--------\|------\|-------------\|\n\| `isSpeaking` \| `boolean` \| Indicates if audio is currently being detected \|\n\| `scaleValue` \| `number` \| Current scale value for animations (1.0 = default) \|\n\| `currentState` \| `InterviewState` \| Current state of the component \|\n\n## Animation Details\n\n- Pulse Canvas: Inner animated blob that reacts to audio amplitude\n\nColor schemes are predefined for consistent branding:\n- Pulse: Blue (#277CFD), Light Blue (#99C1FE), Magenta (#D410AA)\n\n## Performance\n\nThe component uses requestAnimationFrame for smooth 60fps animations and efficiently manages canvas rendering contexts. Audio analysis is performed using the Web Audio API's AnalyserNode for minimal CPU overhead.\n","template":"<div class=\"ai-audio-visualizer\">\n <div class=\"canvas-container\">\n <canvas #pulseCanvas></canvas>\n </div>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":[],"suggestedQueries":[]},"filePath":"components/ai-audio-circle/ai-audio-circle.component.ts","supportsTheme":false,"lastModified":1775654032744.924},"ai-caveat":{"name":"AiCaveatComponent","selector":"ui-ai-caveat","category":"ai-caveat","description":"The AI Caveat component is a standardized, reusable UI element designed to be displayed beneath all AI-generated content. It promotes responsible AI usage by informing users that content should be verified for accuracy, thereby reducing risk and managing user expectations regarding AI reliability.","importPath":"@testgorilla/tgo-ui/components/ai-caveat","moduleName":"AiCaveatComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false}],"outputs":[],"module":{"name":"AiCaveatComponentModule","imports":["CommonModule","IconComponentModule","UiTranslatePipe"],"exports":["AiCaveatComponent"],"declarations":["AiCaveatComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[{"name":"Default","template":"<div class=\"content-container\">\n <div class=\"ai-content\">\n <h4>AI-Generated Summary</h4>\n <p>\n This candidate demonstrates strong problem-solving skills and technical expertise.\n They have 5 years of experience in software development and show excellent\n communication abilities. Recommended for the senior developer position.\n </p>\n </div>\n <ui-ai-caveat applicationTheme=\"${_theme}\"></ui-ai-caveat>\n </div>","props":{}},{"name":"WithContent","template":"<div class=\"content-container\">\n <div class=\"ai-content\">\n <h4>AI-Generated Summary</h4>\n <p>\n This candidate demonstrates strong problem-solving skills and technical expertise.\n They have 5 years of experience in software development and show excellent\n communication abilities. Recommended for the senior developer position.\n </p>\n </div>\n <ui-ai-caveat applicationTheme=\"${_theme}\"></ui-ai-caveat>\n </div>","props":{}}],"documentation":"## Overview\n\nThe AI Caveat component is a standardized, reusable UI element designed to be displayed beneath all AI-generated content. It promotes responsible AI usage by informing users that content should be verified for accuracy, thereby reducing risk and managing user expectations regarding AI reliability.\n\n## Purpose\n\n- Transparency: Clearly indicates that content is AI-generated\n- Accuracy Disclaimer: Reminds users to review content for accuracy\n- Risk Management: Reduces legal and reputational risk\n- User Expectations: Sets appropriate expectations about AI reliability\n\n## Usage Guidelines\n\n### When to Use\n\n- Display beneath all AI-generated content blocks\n- Include in reports, summaries, or recommendations generated by AI\n- Place in candidate assessments, scoring explanations, or automated feedback\n\n### When Not to Use\n\n- Do not use for human-generated content\n- Do not use for hybrid content without clear AI attribution\n- Avoid using in contexts where AI generation is not relevant\n\n","template":"<div class=\"ai-caveat-container\" role=\"status\" aria-live=\"polite\">\n <ui-icon [name]=\"'Info-in-line'\" [size]=\"'16'\" color=\"gray\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n <span class=\"ai-caveat-text\">{{ disclaimerKey \| uiTranslate \| async }}</span>\n</div>\n","queryGuide":{"roles":["status"],"ariaAttributes":["aria-live"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon"],"suggestedQueries":["screen.getByRole('status')"]},"filePath":"components/ai-caveat/ai-caveat.component.ts","supportsTheme":true,"lastModified":1775654032745.924},"ai-feedback":{"name":"AiFeedbackComponent","selector":"ui-ai-feedback","category":"ai-feedback","description":"To use the AI Feedback component, you need to import the `AiFeedbackModule` in your module:","importPath":"@testgorilla/tgo-ui/components/ai-feedback","moduleName":"AiFeedbackModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"positiveConfig","type":"AiFeedbackConfig","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"negativeConfig","type":"AiFeedbackConfig","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"skipPanelForPositive","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"variant","type":"AiFeedbackVariant","defaultValue":"'default'","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"isRatingDisabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"enableAutoEmit","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"isPositiveFeedback","type":"boolean \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"","isSignal":true}],"outputs":[{"name":"selectionChange","eventType":"boolean \| null","alias":null,"description":"","isSignal":true},{"name":"feedbackSubmitted","eventType":"AiFeedbackData","alias":null,"description":"","isSignal":true},{"name":"feedbackCancelled","eventType":"AiFeedbackData","alias":null,"description":"","isSignal":true},{"name":"feedbackChanged","eventType":"AiFeedbackData","alias":null,"description":"","isSignal":true},{"name":"isPositiveFeedbackChange","eventType":"boolean \| null","alias":null,"description":"Two-way binding change event for isPositiveFeedback","isSignal":true}],"module":{"name":"AiFeedbackModule","imports":["CommonModule","AsyncPipe","ReactiveFormsModule","ButtonComponentModule","CardComponentModule","TagComponentModule","FieldComponentModule","AiCaveatComponentModule","IconComponentModule","UiTranslatePipe","MemoizeFuncPipe"],"exports":["AiFeedbackComponent"],"declarations":["AiFeedbackComponent"],"providers":[]},"types":{"typeAliases":[{"name":"AiFeedbackVariant","value":"'default' \| 'panel' \| 'input-only'"}],"interfaces":[{"name":"AiFeedbackOption","properties":[{"name":"id","type":"string","optional":false},{"name":"label","type":"string","optional":false}]},{"name":"AiFeedbackConfig","properties":[{"name":"title","type":"string","optional":false},{"name":"options","type":"AiFeedbackOption[]","optional":true},{"name":"otherPlaceholder","type":"string","optional":true}]},{"name":"AiFeedbackData","properties":[{"name":"isPositiveFeedback","type":"boolean \| null","optional":false},{"name":"selectedOptions","type":"string[]","optional":true},{"name":"otherText","type":"string","optional":true}]}],"enums":[{"name":"AiFeedbackPanelType","members":[{"name":"POSITIVE","value":"'positive'"},{"name":"NEGATIVE","value":"'negative'"}]}]},"examples":[],"documentation":"## How to use\n\nTo use the AI Feedback component, you need to import the `AiFeedbackModule` in your module:\n\n```typescript\nimport { AiFeedbackModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n AiFeedbackModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-ai-feedback></ui-ai-feedback>\n```\n","template":"<div class=\"ai-feedback-wrapper\">\n <div class=\"ai-feedback\" [attr.aria-label]=\"translationContext + 'TITLE' \| uiTranslate\" role=\"group\">\n <ui-ai-caveat [applicationTheme]=\"applicationTheme()\"></ui-ai-caveat>\n\n <div class=\"ai-feedback-buttons-section\">\n @if (isRatingDisabled()) {\n <div class=\"ai-feedback-saved\">\n <span class=\"ai-feedback-saved-text\">{{ translationContext + 'RATING_SAVED' \| uiTranslate \| async }}</span>\n <ui-icon\n [name]=\"isPositiveFeedback() ? 'Thumb-up-filled' : 'Thumb-down-filled'\"\n [filled]=\"true\"\n [applicationTheme]=\"applicationTheme()\"\n [color]=\"'gray'\"\n />\n </div>\n } @else {\n <span class=\"ai-feedback-label\">{{ translationContext + 'TITLE' \| uiTranslate \| async }}</span>\n\n <div\n class=\"ai-feedback-buttons\"\n role=\"group\"\n [attr.aria-expanded]=\"showPanel()\"\n [attr.aria-controls]=\"showPanel() ? 'feedback-panel' : null\"\n >\n <ui-button\n class=\"ai-feedback-button-positive\"\n data-testid=\"ai-feedback-button-positive\"\n [justIcon]=\"true\"\n [iconName]=\"'Thumb-up-in-line'\"\n [size]=\"'small'\"\n [tooltip]=\"('COMMON.YES' \| uiTranslate \| async)!\"\n [ariaLabel]=\"('COMMON.YES' \| uiTranslate \| async)!\"\n [iconFilled]=\"isPositiveFeedback() === true\"\n (buttonClickEvent)=\"onSelectionChange(true)\"\n variant=\"icon-button\"\n role=\"button\"\n >\n </ui-button>\n\n <ui-button\n data-testid=\"ai-feedback-button-negative\"\n [justIcon]=\"true\"\n [iconName]=\"'Thumb-down-in-line'\"\n [size]=\"'small'\"\n [tooltip]=\"('COMMON.NO' \| uiTranslate \| async)!\"\n [ariaLabel]=\"('COMMON.NO' \| uiTranslate \| async)!\"\n [iconFilled]=\"isPositiveFeedback() === false\"\n (buttonClickEvent)=\"onSelectionChange(false)\"\n variant=\"icon-button\"\n role=\"button\"\n >\n </ui-button>\n </div>\n }\n </div>\n </div>\n\n @if (showPanel()) {\n @let panelTitle =\n activeConfig()?.title ??\n (panelType() \| memoizeFunc: getDefaultPanelTitleTranslation : this \| uiTranslate \| async);\n\n <ui-card\n id=\"feedback-panel\"\n class=\"feedback-panel\"\n [class.arrow-left]=\"arrowPosition() === 'left'\"\n [class.arrow-right]=\"arrowPosition() === 'right'\"\n [applicationTheme]=\"applicationTheme()\"\n [size]=\"isMobile() ? 'small' : 'medium'\"\n role=\"region\"\n [attr.aria-label]=\"panelTitle\"\n [@slideDown]\n >\n <div class=\"feedback-panel-arrow\"></div>\n\n <div class=\"feedback-panel-content\">\n <div class=\"feedback-panel-title-container\">\n <h4 class=\"feedback-panel-title\">\n {{ panelTitle }}\n </h4>\n\n <ui-button\n [justIcon]=\"true\"\n [iconName]=\"'Close-filled'\"\n [size]=\"'small'\"\n [ariaLabel]=\"'Close feedback panel'\"\n variant=\"icon-button\"\n (buttonClickEvent)=\"closePanel()\"\n >\n </ui-button>\n </div>\n\n @if (variant() === 'panel' && activeConfig()?.options && activeConfig()!.options!.length > 0) {\n <div class=\"feedback-options\">\n @for (option of activeConfig()?.options; track option.id) {\n <ui-tag\n [label]=\"option.label\"\n [isSelected]=\"isOptionSelected(option.id)\"\n [showIconWhenSelected]=\"true\"\n [applicationTheme]=\"applicationTheme()\"\n (press)=\"toggleOption(option.id)\"\n >\n </ui-tag>\n }\n </div>\n }\n\n @if (showOtherField()) {\n <ui-field\n class=\"feedback-field\"\n type=\"text\"\n [label]=\"\n activeConfig()?.otherPlaceholder ?? (translationContext + 'OTHER_PLACEHOLDER' \| uiTranslate \| async) ?? ''\n \"\n [formControl]=\"otherTextControl\"\n [applicationTheme]=\"applicationTheme()\"\n [fullWidth]=\"true\"\n [showBottomContent]=\"false\"\n >\n </ui-field>\n }\n\n <div class=\"feedback-submit-container\">\n <ui-button\n [label]=\"(translationContext + 'SUBMIT' \| uiTranslate \| async) \|\| ''\"\n [disabled]=\"isSubmitDisabled()\"\n [size]=\"'small'\"\n [fullWidth]=\"isMobile()\"\n (buttonClickEvent)=\"onSubmit()\"\n variant=\"primary\"\n >\n </ui-button>\n </div>\n </div>\n </ui-card>\n }\n</div>\n","queryGuide":{"roles":["group","button","region"],"ariaAttributes":["aria-label","aria-expanded","aria-controls"],"dataTestIds":["ai-feedback-button-positive","ai-feedback-button-negative"],"materialComponents":[],"childUIComponents":["ui-ai-caveat","ui-icon","ui-button","ui-card","ui-tag","ui-field"],"suggestedQueries":["screen.getByRole('group')","screen.getByRole('button')","screen.getByRole('region')","screen.getByLabelText('label text')","screen.getByTestId('ai-feedback-button-positive')","screen.getByTestId('ai-feedback-button-negative')"]},"filePath":"components/ai-feedback/ai-feedback.component.ts","supportsTheme":true,"lastModified":1775654032745.924},"alert-banner":{"name":"AlertBannerComponent","selector":"ui-alert-banner","category":"bars","description":"To use the Alert Banner component, you need to import the `AlertBannerComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/alert-banner","moduleName":"AlertBannerComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"alertType","type":"AlertBarType","defaultValue":"'success'","required":false,"alias":null,"transform":null,"description":"Alert Banner type","isSignal":false},{"name":"alertVariant","type":"AlertVariant","defaultValue":"'banner'","required":false,"alias":null,"transform":null,"description":"Alert Banner variant","isSignal":false},{"name":"message","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Alert banner message","isSignal":false},{"name":"includeDismissButton","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Include dismmiss button","isSignal":false},{"name":"shadow","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Include shadow or not","isSignal":false},{"name":"linkText","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Link text that will appended at the end of message","isSignal":false},{"name":"linkUrl","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Link url","isSignal":false},{"name":"linkTarget","type":"LinkTargetType","defaultValue":"'_blank'","required":false,"alias":null,"transform":null,"description":"Link target","isSignal":false},{"name":"actions","type":"AlertBannerAction[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"Optional action buttons displayed on the right side of the banner.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"isFullWidth","type":"boolean \| undefined","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Sets the full width","isSignal":false},{"name":"closeButtonTooltip","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Close button tooltip","isSignal":false},{"name":"hasIcon","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Shows icon","isSignal":false},{"name":"isLoading","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Controls loading state for spinner visibility.","isSignal":false},{"name":"fixed","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Sets the alert banner position","isSignal":false},{"name":"ariaDescribedby","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"secondaryAlerts","type":"string[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"","isSignal":false}],"outputs":[],"module":{"name":"AlertBannerComponentModule","imports":["CommonModule","ButtonComponentModule","IconComponentModule","SpinnerComponentModule","UiTranslatePipe"],"exports":["AlertBannerComponent"],"declarations":["AlertBannerComponent"],"providers":[]},"types":{"typeAliases":[{"name":"LinkTargetType","value":"'' \| '_self' \| '_blank' \| '_parent' \| '_top'"}],"interfaces":[{"name":"AlertBannerAction","properties":[{"name":"label","type":"string","optional":false},{"name":"onClick","type":"($event: Event) => void","optional":false},{"name":"disabled","type":"boolean","optional":true}]}],"enums":[]},"examples":[{"name":"Default","template":"<ui-alert-banner applicationTheme=\"${_theme}\" alertType=\"info\" message=\"This is a info alert type\"></ui-alert-banner>\n <ui-alert-banner applicationTheme=\"${_theme}\" alertType=\"success\" message=\"This is a success alert type\"></ui-alert-banner>\n <ui-alert-banner applicationTheme=\"${_theme}\" alertType=\"warning\" message=\"This is a warning alert type\"></ui-alert-banner>\n <ui-alert-banner applicationTheme=\"${_theme}\" alertType=\"error\" message=\"This is a error alert type\"></ui-alert-banner>","props":{"message":"'This is a alert banner info type'","alertType":"'info'"}},{"name":"Types","template":"<ui-alert-banner applicationTheme=\"${_theme}\" alertType=\"info\" message=\"This is a info alert type\"></ui-alert-banner>\n <ui-alert-banner applicationTheme=\"${_theme}\" alertType=\"success\" message=\"This is a success alert type\"></ui-alert-banner>\n <ui-alert-banner applicationTheme=\"${_theme}\" alertType=\"warning\" message=\"This is a warning alert type\"></ui-alert-banner>\n <ui-alert-banner applicationTheme=\"${_theme}\" alertType=\"error\" message=\"This is a error alert type\"></ui-alert-banner>","props":{"message":"'This is a callout variation'","alertVariant":"'callout'"}}],"documentation":"## How to use\n\nTo use the Alert Banner component, you need to import the `AlertBannerComponentModule` in your module:\n\n```typescript\nimport { AlertBannerComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n AlertBannerComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-alert-banner \n alertType=\"info\" \n message=\"This is an alert message\" \n applicationTheme=\"light\">\n</ui-alert-banner>\n```","template":"<div\n [ngClass]=\"cssClass\"\n [@openClose]\n ngIf=\"visible\"\n role=\"alert\"\n class=\"alert-container\"\n [attr.theme]=\"applicationTheme\"\n [class.shadow]=\"alertVariant === 'callout' && shadow\"\n [attr.aria-live]=\"alertType === 'error' \|\| alertType === 'warning' ? 'assertive' : 'polite'\"\n [attr.aria-describedby]=\"'describedby'\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [tabIndex]=\"0\"\n>\n <span style=\"position: absolute; left: -9999px\" id=\"labelledby\">{{\n 'ALERT_BANNER.' + (alertType \| uppercase) \| uiTranslate \| async\n }}</span>\n <span [style.display]=\"'none'\" id=\"describedby\">{{ ariaDescribedby }}</span>\n <div class=\"primary-alert-container\">\n <div class=\"alert-text\">\n @if (hasIcon) {\n <ui-icon class=\"left-icon\" [name]=\"iconName\" size=\"24\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n }\n @if (isLoading) {\n <ui-spinner\n class=\"loading-spinner\"\n size=\"small\"\n [isLoader]=\"false\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-spinner>\n }\n <span [innerHTML]=\"message\"></span>\n <a ngIf=\"!!linkText\" [target]=\"linkTarget\" [href]=\"linkUrl\">{{ linkText }}</a>\n </div>\n @if (actions.length > 0) {\n <div class=\"actions-container\">\n @for (action of actions; track $index) {\n <ui-button\n class=\"action-button\"\n [variant]=\"'text-inline'\"\n [label]=\"action.label\"\n size=\"medium\"\n [disabled]=\"!!action.disabled\"\n [applicationTheme]=\"applicationTheme\"\n (buttonClickEvent)=\"action.onClick($event)\"\n ></ui-button>\n }\n </div>\n }\n <ui-button\n ngIf=\"includeDismissButton && applicationTheme === 'classic'\"\n variant=\"text\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n (buttonClickEvent)=\"dismissClick()\"\n ></ui-button>\n <ui-button\n ngIf=\"includeDismissButton && applicationTheme !== 'classic' && alertVariant !== 'callout'\"\n class=\"right-icon\"\n [variant]=\"'icon-button'\"\n [applicationTheme]=\"applicationTheme\"\n [iconName]=\"'Close'\"\n [size]=\"'small'\"\n [justIcon]=\"true\"\n [tooltip]=\"(closeButtonTooltip \|\| ('COMMON.CLOSE' \| uiTranslate \| async))!\"\n (click)=\"dismissClick()\"\n ></ui-button>\n </div>\n @if (secondaryAlerts.length > 0) {\n <div class=\"secondary-alerts-container\">\n <ul>\n @for (alert of secondaryAlerts; track alert) {\n <li class=\"secondary-alert-item\" [innerHTML]=\"alert\"></li>\n }\n </ul>\n </div>\n }\n</div>\n","queryGuide":{"roles":["alert"],"ariaAttributes":["aria-live","aria-describedby","aria-labelledby"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon","ui-spinner","ui-button"],"suggestedQueries":["screen.getByRole('alert')"]},"filePath":"components/alert-banner/alert-banner.component.ts","supportsTheme":true,"lastModified":1775654032746.924},"audio-waveform":{"name":"AudioWaveformComponent","selector":"ui-audio-waveform","category":"audio-waveform","description":"A lightweight audio waveform visualizer that displays animated bars representing microphone input levels. Uses Canopy AI gradient colors (pink to blue) and a symmetric distribution where middle bars respond with higher amplitude.","importPath":"@testgorilla/tgo-ui/components/audio-waveform","moduleName":"AudioWaveformModule","standalone":true,"changeDetection":"OnPush","inputs":[{"name":"width","type":"number","defaultValue":"40","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"height","type":"number","defaultValue":"22","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"gap","type":"number","defaultValue":"3","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"minScale","type":"number","defaultValue":"0.08","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"smoothing","type":"number","defaultValue":"DEFAULT_AUDIO_WAVEFORM_CONFIG.smoothing","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"bars","type":"number[] \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"When provided, the component operates in controlled mode —\nit renders externally-supplied bar values instead of managing the mic itself.","isSignal":true},{"name":"active","type":"boolean \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"Mirror of `bars` for controlled mode; required when `bars` is set.","isSignal":true}],"outputs":[],"module":{"name":"AudioWaveformModule","imports":["AudioWaveformComponent"],"exports":["AudioWaveformComponent"],"declarations":[],"providers":[]},"types":{"typeAliases":[],"interfaces":[{"name":"AudioWaveformConfig","properties":[{"name":"barCount","type":"number","optional":false},{"name":"smoothing","type":"number","optional":false},{"name":"fftSize","type":"number","optional":false}]}],"enums":[]},"examples":[],"documentation":"A lightweight audio waveform visualizer that displays animated bars representing microphone input levels. Uses Canopy AI gradient colors (pink to blue) and a symmetric distribution where middle bars respond with higher amplitude.\n\n## Features\n\n- Standalone mode: The component manages its own `AudioWaveformService` lifecycle.\n- Controlled mode: Pass `bars` and `active` inputs to render externally-managed audio data.\n- Symmetric visualization: Middle bars show higher amplitude for a natural waveform look.\n- Fixed 5-bar layout; configurable dimensions and smoothing.\n\n## Usage\n\n### Standalone (self-managed mic)\n\n```html\n<ui-audio-waveform [width]=\"40\" [height]=\"22\" [gap]=\"3\" />\n```\n\n### Controlled (external data)\n\n```html\n<ui-audio-waveform [bars]=\"externalBars()\" [active]=\"isRecording()\" />\n```\n","template":"<div\n class=\"waveform\"\n [style.width.px]=\"width()\"\n [style.height.px]=\"height()\"\n [style.gap.px]=\"gap()\"\n role=\"img\"\n [attr.aria-label]=\"effectiveActive() ? 'Audio waveform active' : 'Audio waveform inactive'\"\n>\n @for (item of effectiveBars(); track $index) {\n <div\n class=\"waveform-bar\"\n [style.width.px]=\"barWidth()\"\n [style.height.px]=\"barHeight(barValue($index))\"\n [style.border-radius.px]=\"barRadius()\"\n [style.background-color]=\"barColor($index)\"\n ></div>\n }\n</div>\n","queryGuide":{"roles":["img"],"ariaAttributes":["aria-label"],"dataTestIds":[],"materialComponents":[],"childUIComponents":[],"suggestedQueries":["screen.getByRole('img')","screen.getByLabelText('label text')"]},"filePath":"components/audio-waveform/audio-waveform.component.ts","supportsTheme":false,"lastModified":1775654032746.924},"autocomplete":{"name":"AutocompleteComponent","selector":"ui-autocomplete","category":"autocomplete","description":"To use the Autocomplete component, you need to import the `AutocompleteComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/autocomplete","moduleName":"AutocompleteComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"itemsList","type":"any[] \| { groupName: string; items: any[]; isGroup: boolean }[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"suggestionsList","type":"any[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"allowAdd","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"textField","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"valueField","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"placeholder","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"type","type":"AutocompleteType","defaultValue":"'multi'","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"minCharactersSearch","type":"number","defaultValue":"3","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"variant","type":"DropdownVariationType","defaultValue":"DropdownVariation.AUTOCOMPLETE","required":true,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"showBottomContent","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Show reserved content below form field","isSignal":false},{"name":"valuePrimitive","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Return full object if true","isSignal":false},{"name":"fullWidth","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Indicator of the autocomplete width","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"required","type":"boolean","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Autocomplete is required or not","isSignal":false},{"name":"companyColor","type":"string \| null","defaultValue":"'#FFF2FC'","required":false,"alias":null,"transform":null,"description":"Color of the option hover.\nDefaults to Test Gorilla primary color.","isSignal":false},{"name":"hideBuiltInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Hide in-build errors for Reactive Forms","isSignal":false},{"name":"hideLabelInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Hide label in errors","isSignal":false},{"name":"virtualScroll","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":"booleanAttribute","description":"Sets dropdown list to virtual scroll mode","isSignal":false},{"name":"compareWith","type":"(a: any, b: any) => boolean","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"dropdownPanelClass","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"closeOnScroll","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"size","type":"AutocompleteSize","defaultValue":"'medium'","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"allowUserInput","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"clearable","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"exactMatchSelect","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"maxItemSelected","type":"unknown","defaultValue":"Infinity","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"maxLength","type":"number","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"isDynamicFilteringEnabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"dynamicFilterLoading","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"dynamicFilteredList","type":"any[] \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"infiniteScroll","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"hasMoreOptionsForInfiniteScroll","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"itemValue","type":"any","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"errors","type":"string[]","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input field errors","isSignal":false}],"outputs":[{"name":"selectionChange","eventType":"any","alias":null,"description":"","isSignal":false},{"name":"searchTextChange","eventType":"string","alias":null,"description":"","isSignal":false},{"name":"blur","eventType":"void","alias":null,"description":"","isSignal":false},{"name":"focus","eventType":"void","alias":null,"description":"","isSignal":false},{"name":"scrollViewportBottomReached","eventType":"void","alias":null,"description":"","isSignal":false},{"name":"scrollViewportBottomReachedFiltered","eventType":"void","alias":null,"description":"","isSignal":false}],"module":{"name":"AutocompleteComponentModule","imports":["CommonModule","MatFormFieldModule","MatAutocompleteModule","MatInputModule","FormsModule","TagComponentModule","MatChipsModule","IconComponentModule","UiTranslatePipe","ValidationErrorModule","HasValidationErrorPipe","CdkVirtualForOf","CdkVirtualScrollViewport","CdkFixedSizeVirtualScroll","PreventInputDirective","SpinnerComponentModule"],"exports":["AutocompleteComponent"],"declarations":["AutocompleteComponent","TransformItemPipe","IncludesPipe","SelectTextDirective"],"providers":["TransformItemPipe","IncludesPipe","SelectTextDirective"]},"types":{"typeAliases":[{"name":"AutocompleteType","value":"'single' \| 'multi' \| 'large'"},{"name":"DropdownVariationType","value":"`${DropdownVariation}`"},{"name":"AutocompleteSize","value":"'small' \| 'medium'"}],"interfaces":[],"enums":[{"name":"Autocomplete","members":[{"name":"SINGLE","value":"'single'"},{"name":"MULTI","value":"'multi'"},{"name":"LARGE","value":"'large'"}]},{"name":"Padding","members":[{"name":"AUTOCOMPLETE_CONTAINER","value":"40"},{"name":"DROPDOWN_CONTAINER","value":"60"},{"name":"AUTOCOMPLETE_SPACE_CONTAINER","value":"65"},{"name":"DROPDOWN_SPACE_CONTAINER","value":"85"}]},{"name":"Timeout","members":[{"name":"VIEW_INITIALIZED_AFTER_ACTION","value":"150"},{"name":"VIEW_INITIALIZED_COMPONENT_LOAD","value":"600"}]},{"name":"DropdownVariation","members":[{"name":"AUTOCOMPLETE","value":"'autocomplete'"},{"name":"DROPDOWN","value":"'dropdown'"}]}]},"examples":[],"documentation":"## How to use\n\nTo use the Autocomplete component, you need to import the `AutocompleteComponentModule` in your module:\n\n```typescript\nimport { AutocompleteComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n AutocompleteComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-autocomplete \n [itemsList]=\"items\"\n [suggestionsList]=\"suggestions\"\n [textField]=\"'label'\"\n [valueField]=\"'value'\"\n [variant]=\"'autocomplete'\"\n [type]=\"'multi'\"\n applicationTheme=\"light\">\n</ui-autocomplete>\n```","template":"<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n <mat-form-field\n [color]=\"\n safeErrors.length \|\|\n (ngControl?.errors && ngControl?.touched) \|\|\n (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected \|\|\n ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n ? 'warn'\n : 'accent'\n \"\n [appearance]=\"'outline'\"\n [ngClass]=\"{\n 'large-size': type === autocompleteType.LARGE,\n 'hide-bottom-content': !showBottomContent,\n 'keyboard-focused': keyboardFocused(),\n 'has-label': !!label,\n }\"\n >\n <mat-label ngIf=\"label\">{{ label }} <span ngIf=\"required\"></span></mat-label>\n <div #formField class=\"input-container\">\n <span\n style=\"position: absolute; left: -9999px\"\n ngIf=\"textField ? value?.[textField] : value === inputValue\"\n aria-live=\"polite\"\n >{{ ('SELECTED' \| uiTranslate \| async) + ' ' + inputValue }}</span\n >\n\n <input\n #trigger=\"matAutocompleteTrigger\"\n #matInput\n [attr.maxlength]=\"maxLength !== null && maxLength !== undefined ? maxLength : null\"\n [uiPreventInput]=\"!allowUserInput\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'unset-margin': value && type === autocompleteType.LARGE, 'no-caret': !allowUserInput }\"\n (blur)=\"refillInput()\"\n (focusin)=\"onFocus()\"\n [attr.aria-label]=\"\n (translationContext + 'SELECTED' \| uiTranslate \| async) + ' ' + (value \| transformItem: textField : true)\n \"\n [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n matInput\n [placeholder]=\"value && value.length ? '' : placeholder\"\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [(ngModel)]=\"inputValue\"\n />\n <div\n class=\"selected-items\"\n #tagContainer\n ngIf=\"\n (type === autocompleteType.LARGE && value) \|\|\n (!(inputValue && isInputFocus) && value && type !== autocompleteType.SINGLE)\n \"\n >\n <ui-tag\n class=\"value-tag\"\n [id]=\"'ui-tag-' + i\"\n ngFor=\"let valueItem of value; let i = index\"\n [label]=\"valueItem \| transformItem: textField\"\n [allowClose]=\"true\"\n [applicationTheme]=\"applicationTheme\"\n [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n [style.display]=\"\n (isOverLapping && i > 0 && i >= overlapIndex) \|\| (size === 'small' && value.length > 1) ? 'none' : 'block'\n \"\n [ngStyle]=\"{ '--tag-max-width': type === autocompleteType.LARGE ? 'fit-content' : firstTagMaxWidth + 'px' }\"\n [ngClass]=\"{\n 'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI,\n }\"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n @if (size === 'small') {\n <div class=\"selected-count\" ngIf=\"value.length > 1\">\n {{\n translationContext + 'SELECTED_AMOUNT'\n \| uiTranslate: { numberSelected: (value \| slice: overlapIndex).length }\n \| async\n }}\n </div>\n } @else {\n <div ngIf=\"value.length > 1 && isOverLapping\" class=\"overlap-count\">\n <ui-tag [applicationTheme]=\"applicationTheme\" [label]=\"'+' + (value.length - overlapIndex)\"></ui-tag>\n </div>\n }\n </div>\n </div>\n\n <ui-icon\n ngIf=\"\n (clearable && type === autocompleteType.SINGLE && (value?.length \|\| hasObjectValue)) \|\|\n (type !== autocompleteType.SINGLE &&\n value &&\n value.length > 1 &&\n ((AutocompleteUtils.isPrimitive(value) && value.length) \|\|\n (!AutocompleteUtils.isPrimitive(value) &&\n ((AutocompleteUtils.isArray(value) && value.length) \|\|\n (!AutocompleteUtils.isArray(value) && !value.length)))))\n \"\n class=\"remove-selected\"\n [tabIndex]=\"disabled ? -1 : 0\"\n (keydown.enter)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n (keydown.space)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n (click)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n [size]=\"'24'\"\n [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n [attr.aria-label]=\"'COMMON.CLEAR' \| uiTranslate \| async\"\n [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n ></ui-icon>\n\n <ui-icon\n class=\"arrow-state\"\n [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n ngIf=\"isDropdown\"\n [size]=\"'24'\"\n [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n (click)=\"onChevronClick(autocomplete)\"\n ></ui-icon>\n\n <mat-autocomplete\n #autocomplete\n [class]=\"applicationTheme + ' ' + dropdownPanelClass\"\n (optionSelected)=\"onOptionSelected($event)\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [hideSingleSelectionIndicator]=\"false\"\n (opened)=\"gotoUp()\"\n >\n @if (type !== autocompleteType.MULTI \|\| value?.length < maxItemSelected) {\n <ng-container ngIf=\"(searchResult$ \| async) === false\">\n <ng-container ngIf=\"!isDropdown; else dropdownList\">\n <mat-optgroup\n [label]=\"(translationContext + 'SUGGESTED' \| uiTranslate \| async)! \| uppercase\"\n ngIf=\"suggestionsList.length\"\n >\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': suggested \| includes: value : valueField }\"\n ngFor=\"let suggested of suggestionsList\"\n [value]=\"suggested\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ suggested \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup\n [label]=\"(translationContext + 'SELECTED' \| uiTranslate \| async)! \| uppercase\"\n ngIf=\"value?.length && type !== autocompleteType.SINGLE\"\n >\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n ngFor=\"let item of value\"\n [value]=\"item\"\n >\n <span>{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n @if (isGrouped) {\n @for (group of itemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n ngFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n ngFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n\n <mat-optgroup\n [label]=\"(translationContext + 'SELECTED' \| uiTranslate \| async)! \| uppercase\"\n ngIf=\"value?.length && type === autocompleteType.SINGLE\"\n >\n <mat-option (mousedown)=\"$event.preventDefault()\" [class]=\"'selected-option'\" [value]=\"value\">\n <span [selectText]=\"userInput$ \| async\">{{ value \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-container>\n\n <ng-template #dropdownList>\n <cdk-virtual-scroll-viewport\n ngIf=\"virtualScroll \|\| infiniteScroll; else defaultViewPort\"\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(itemsList.length)\"\n class=\"virtual-scroll\"\n >\n @if (!isGrouped) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n cdkVirtualFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n\n @if (infiniteScroll && hasMoreOptionsForInfiniteScroll) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n }\n } @else {\n @for (group of itemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n cdkVirtualFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n cdkVirtualFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n </cdk-virtual-scroll-viewport>\n\n <ng-template #defaultViewPort>\n @if (!isGrouped) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n ngFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n } @else {\n @for (group of itemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n ngFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n ngFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container ngIf=\"filteredSuggestionList$ \| async as filteredSuggestionList\">\n <ng-container ngIf=\"filteredItemsList$ \| async as filteredItemsList\">\n <ng-container ngIf=\"virtualScroll \|\| infiniteScroll; else filteredWithoutVirtualScroll\">\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(filteredItemsList.length)\"\n class=\"virtual-scroll\"\n >\n @if (isGrouped && filteredItemsList.length) {\n @for (group of filteredItemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n cdkVirtualFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n cdkVirtualFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n\n <mat-optgroup\n [label]=\"(translationContext + 'SUGGESTED' \| uiTranslate \| async)! \| uppercase\"\n ngIf=\"filteredSuggestionList.length\"\n >\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n cdkVirtualFor=\"let item of filteredSuggestionList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <ng-container ngIf=\"!filteredSuggestionList.length && !isGrouped; else showItemListWithGroupVirtual\">\n @for (item of filteredItemsList; let idx = $index; track item[valueField] \|\| idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </ng-container>\n\n <ng-template #showItemListWithGroupVirtual>\n <mat-optgroup\n [label]=\"(translationContext + 'ALL_ITEMS' \| uiTranslate \| async)! \| uppercase\"\n ngIf=\"filteredItemsList.length && !isGrouped\"\n >\n @for (item of filteredItemsList; let idx = $index; track item[valueField] \|\| idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n </ng-template>\n\n @if (isDynamicFilteringEnabled && dynamicFilterLoading) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n } @else if (inputValue) {\n @if (allowAdd && !isAlreadyAdded) {\n <mat-option (mousedown)=\"$event.preventDefault()\" [value]=\"inputValue\">\n <span>{{ 'COMMON.ADD' \| uiTranslate \| async }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' \| uiTranslate \| async }}</span>\n </mat-option>\n }\n }\n </cdk-virtual-scroll-viewport>\n </ng-container>\n\n <ng-template #filteredWithoutVirtualScroll>\n @if (isGrouped && filteredItemsList.length) {\n @for (group of filteredItemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n ngFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n ngFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n\n @if (isGrouped && filteredItemsList.length) {\n @for (group of filteredItemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n ngFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n ngFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n\n <mat-optgroup\n [label]=\"(translationContext + 'SUGGESTED' \| uiTranslate \| async)! \| uppercase\"\n ngIf=\"filteredSuggestionList.length\"\n >\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n ngFor=\"let item of filteredSuggestionList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <ng-container ngIf=\"!filteredSuggestionList.length && !isGrouped; else showItemListWithGroup\">\n @for (item of filteredItemsList; let idx = $index; track item[valueField] \|\| idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </ng-container>\n\n <ng-template #showItemListWithGroup>\n <mat-optgroup\n [label]=\"(translationContext + 'ALL_ITEMS' \| uiTranslate \| async)! \| uppercase\"\n ngIf=\"filteredItemsList.length && !isGrouped\"\n >\n @for (item of filteredItemsList; let idx = $index; track item[valueField] \|\| idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n </ng-template>\n\n @if (isDynamicFilteringEnabled && dynamicFilterLoading) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n } @else if (inputValue) {\n @if (allowAdd && !isAlreadyAdded) {\n <mat-option (mousedown)=\"$event.preventDefault()\" [value]=\"inputValue\">\n <span>{{ 'COMMON.ADD' \| uiTranslate \| async }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' \| uiTranslate \| async }}</span>\n </mat-option>\n }\n }\n </ng-template>\n </ng-container>\n </ng-container>\n }\n </mat-autocomplete>\n <mat-hint\n class=\"error\"\n ngIf=\"\n safeErrors.length \|\|\n (ngControl?.errors \| hasValidationError) \|\|\n (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected \|\|\n ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n \"\n >\n <div\n class=\"errors\"\n ngIf=\"\n (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected \|\|\n ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n \"\n >\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{ translationContext + 'MAX_SELECTED_ERROR' \| uiTranslate: { max: maxItemSelected } \| async }}</span>\n </div>\n <ng-container ngIf=\"safeErrors.length\">\n <div class=\"errors\" ngFor=\"let error of safeErrors; trackBy: trackByFn\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n </ng-container>\n <ui-validation-error\n ngIf=\"ngControl && !hideBuiltInErrors\"\n [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors ? null : label\"\n ></ui-validation-error>\n </mat-hint>\n </mat-form-field>\n </div>\n</ng-container>\n","queryGuide":{"roles":["option"],"ariaAttributes":["aria-live","aria-label"],"dataTestIds":[],"materialComponents":["mat-form-field","mat-label","mat-autocomplete","mat-optgroup","mat-option","mat-hint"],"childUIComponents":["ui-tag","ui-icon","ui-spinner","ui-validation-error"],"suggestedQueries":["screen.getByRole('option')","screen.getByLabelText('label text')"]},"filePath":"components/autocomplete/autocomplete.component.ts","supportsTheme":true,"lastModified":1775654032747.924},"avatar":{"name":"AvatarComponent","selector":"ui-avatar","category":"avatar","description":"To use the Avatar component, you need to import the `AvatarComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/avatar","moduleName":"AvatarComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"size","type":"AvatarSizeType","defaultValue":"AvatarSize.SMALL","required":false,"alias":null,"transform":null,"description":"Input property for specifying the size of the avatar.","isSignal":false},{"name":"imageUrl","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Input property for specifying the URL of the image to display in the avatar.","isSignal":false},{"name":"name","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Input property for specifying the initials to display in the avatar.","isSignal":false},{"name":"tooltipText","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Input property for specifying the tooltip text for edit.","isSignal":false},{"name":"allowEdit","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Input property that makes avatar editable.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme where","isSignal":false},{"name":"backgroundColor","type":"BackgroundAvatarColorType","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Defines the background color","isSignal":false}],"outputs":[{"name":"editClick","eventType":"Event","alias":null,"description":"Event emitted when the edit button is clicked.","isSignal":false}],"module":{"name":"AvatarComponentModule","imports":["CommonModule","IconComponentModule","MatTooltipModule","ButtonComponentModule","UiTranslatePipe"],"exports":["AvatarComponent"],"declarations":["AvatarComponent","NameInitialsPipe"],"providers":[]},"types":{"typeAliases":[{"name":"AvatarSizeType","value":"`${AvatarSize}`"},{"name":"BackgroundAvatarColorType","value":"'red' \| 'blue' \| 'green' \| 'orange' \| 'pink'"}],"interfaces":[],"enums":[{"name":"AvatarSize","members":[{"name":"SMALL","value":"'small'"},{"name":"SMALL_MEDIUM","value":"'smallMedium'"},{"name":"MEDIUM","value":"'medium'"},{"name":"MEDIUM_LARGE","value":"'mediumLarge'"},{"name":"LARGE","value":"'large'"}]},{"name":"AvatarBackgroundColor","members":[{"name":"PINK","value":"'#FFE6FA'"},{"name":"BLUE","value":"'#D9E8FF'"},{"name":"GREEN","value":"'#D4F2C3'"},{"name":"ORANGE","value":"'#FFE1B3'"},{"name":"RED","value":"'#FFAC9A'"}]}]},"examples":[{"name":"Default","template":"<ui-avatar [applicationTheme]=\"${_theme}\" size=\"small\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"smallMedium\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"medium\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"mediumLarge\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"large\"></ui-avatar>","props":{"size":"AvatarSize.LARGE","allowEdit":"true","tooltipText":"'Edit'"}},{"name":"Editable","template":"<ui-avatar [applicationTheme]=\"${_theme}\" size=\"small\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"smallMedium\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"medium\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"mediumLarge\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"large\"></ui-avatar>","props":{"size":"AvatarSize.LARGE","allowEdit":"true","tooltipText":"'Edit'"}},{"name":"MultipleDefaultAvatar","template":"<ui-avatar [applicationTheme]=\"${_theme}\" size=\"small\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"smallMedium\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"medium\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"mediumLarge\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"large\"></ui-avatar>","props":{"size":"AvatarSize.SMALL"}},{"name":"MultipleImageAvatar","template":"<ui-avatar [applicationTheme]=\"${_theme}\" size=\"small\" imageUrl=\"/images/Avatar.png\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"smallMedium\" imageUrl=\"/images/Avatar.png\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"medium\" imageUrl=\"/images/Avatar.png\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"mediumLarge\" imageUrl=\"/images/Avatar.png\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"large\" imageUrl=\"/images/Avatar.png\"></ui-avatar>","props":{"size":"AvatarSize.SMALL"}},{"name":"MultipleInitialsAvatar","template":"<ui-avatar [applicationTheme]=\"${_theme}\" [backgroundColor]=\"'RED'\" size=\"small\" name=\"LS\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"smallMedium\" name=\"LS\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"medium\" name=\"LS\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"mediumLarge\" name=\"LS\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"large\" name=\"LS\"></ui-avatar>","props":{"size":"AvatarSize.SMALL"}}],"documentation":"## Import\n\nTo use the Avatar component, you need to import the `AvatarComponentModule` in your module:\n\n```typescript\nimport { AvatarComponentModule } from '@testgorilla/tgo-ui';\n\n\n@NgModule({\n imports: [\n AvatarComponentModule,\n // ...\n ]\n})\nexport class YourModule { }\n```\n\n## Template Example\n\n```html\n<!-- Default Avatar -->\n<ui-avatar></ui-avatar>\n\n<!-- Avatar with Image -->\n<ui-avatar imageUrl=\"/path/to/image.jpg\"></ui-avatar>\n\n<!-- Avatar with Initials -->\n<ui-avatar name=\"John Doe\"></ui-avatar>\n\n<!-- Customized Size -->\n<ui-avatar size=\"large\" name=\"John Doe\"></ui-avatar>\n\n<!-- Editable Avatar with Custom Background -->\n<ui-avatar\n size=\"large\"\n backgroundColor=\"red\"\n allowEdit=\"true\"\n tooltipText=\"Edit profile picture\"\n (editClick)=\"onEditClick($event)\">\n</ui-avatar>\n```","template":"<div\n class=\"avatar-container\"\n [attr.type]=\"!imageUrl && !name ? 'icon' : 'initials'\"\n [ngClass]=\"[size]\"\n [attr.theme]=\"applicationTheme\"\n [ngStyle]=\"{ backgroundColor: backgroundAvatarColor }\"\n>\n <span class=\"initials\" ngIf=\"name && !imageUrl\">\n {{ name \| nameInitials }}\n </span>\n <img [attr.aria-hidden]=\"true\" ngIf=\"imageUrl\" [attr.src]=\"imageUrl\" [alt]=\"\" />\n <ui-icon\n ngIf=\"!imageUrl && !name\"\n [attr.aria-hidden]=\"true\"\n [color]=\"applicationTheme === 'classic' ? 'dark' : 'rebrand-black'\"\n [applicationTheme]=\"applicationTheme\"\n [size]=\"iconSize[size]\"\n [name]=\"'User-profile'\"\n ></ui-icon>\n <div class=\"edit-avatar\" ngIf=\"allowEdit && (size === avatarSize.LARGE \|\| size === avatarSize.MEDIUM_LARGE)\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n [companyColor]=\"'black'\"\n [size]=\"'small'\"\n [iconName]=\"'Edit'\"\n [variant]=\"'icon-button'\"\n [tooltip]=\"tooltipText\"\n [ariaLabel]=\"('AVATAR.EDIT_AVATAR' \| uiTranslate \| async)!\"\n (buttonClickEvent)=\"onEditClick($event)\"\n ></ui-button>\n </div>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":["aria-hidden"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon","ui-button"],"suggestedQueries":[]},"filePath":"components/avatar/avatar.component.ts","supportsTheme":true,"lastModified":1775654032748.924},"badge":{"name":"BadgeComponent","selector":"ui-badge","category":"badge","description":"To use the Badge component, you need to import the `BadgeComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/badge","moduleName":"BadgeComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"The label to be displayed on the badge.","isSignal":false},{"name":"staticLabel","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A static label always displayed after the main label, never truncated.\nIntended for short suffixes (max 4 chars, e.g. \"100%\").\nWhen the main label is truncated, the tooltip shows both labels in full.","isSignal":false},{"name":"icon","type":"IconName","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"The icon name to be displayed on the badge.","isSignal":false},{"name":"color","type":"BadgeColor","defaultValue":"'petrol'","required":false,"alias":null,"transform":null,"description":"The color of the badge. Defaults to 'petrol'.","isSignal":false},{"name":"variant","type":"BadgeVariant","defaultValue":"'primary'","required":false,"alias":null,"transform":null,"description":"The variant of the badge. Defaults to 'primary'.","isSignal":false},{"name":"notificationsAmount","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"The amount of notifications to be displayed on the badge.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"rebrandColor","type":"RebrandBadgeColor","defaultValue":"'brand'","required":false,"alias":null,"transform":null,"description":"The color of the badge on new theme. Defaults to 'brand'.","isSignal":false},{"name":"truncateLabel","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"enableAnimation","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether to enable the animation when label changes from empty to having content.","isSignal":false}],"outputs":[],"module":{"name":"BadgeComponentModule","imports":["CommonModule","IconComponentModule","MatTooltipModule"],"exports":["BadgeComponent"],"declarations":["BadgeComponent"],"providers":[]},"types":{"typeAliases":[{"name":"BadgeVariant","value":"'primary' \| 'secondary' \| 'notification' \| 'primary-ai' \| 'secondary-ai'"},{"name":"BadgeColor","value":"\| 'red'\n \| 'grey-medium'\n \| 'teal'\n \| 'yellow'\n \| 'petrol'\n \| 'teal-60w'\n \| 'petrol-90w'\n \| 'petrol-60w'\n \| 'grey-dark'\n \| 'blue-20'\n \| 'blue-40'\n \| 'pink-30'\n \| 'blue-10'"},{"name":"RebrandBadgeColor","value":"\| 'success'\n \| 'warning'\n \| 'negative'\n \| 'info'\n \| 'brand'\n \| 'neutral'\n \| 'blue-20'\n \| 'blue-40'\n \| 'pink-30'\n \| 'blue-10'\n \| 'grey-10'\n \| 'grey-20'\n \| 'grey-30'"}],"interfaces":[],"enums":[{"name":"BadgeColorEnum","members":[{"name":"RED","value":"'red'"},{"name":"GREY_MEDIUM","value":"'grey-medium'"},{"name":"TEAL","value":"'teal'"},{"name":"YELLOW","value":"'yellow'"},{"name":"PETROL","value":"'petrol'"},{"name":"TEAL_60W","value":"'teal-60w'"},{"name":"PETROL_90W","value":"'petrol-90w'"},{"name":"PETROL_60W","value":"'petrol-60w'"},{"name":"GREY_DARK","value":"'grey-dark'"},{"name":"BLUE_20","value":"'blue-20'"},{"name":"BLUE_40","value":"'blue-40'"}]},{"name":"RebrandBadgeColorEnum","members":[{"name":"SUCCESS","value":"'success'"},{"name":"WARNING","value":"'warning'"},{"name":"NEGATIVE","value":"'negative'"},{"name":"INFO","value":"'info'"},{"name":"BRAND","value":"'brand'"},{"name":"NEUTRAL","value":"'neutral'"},{"name":"BLUE_40","value":"'blue-40'"},{"name":"BLUE_20","value":"'blue-20'"},{"name":"PINK_30","value":"'pink-30'"},{"name":"BLUE_10","value":"'blue-10'"},{"name":"GREY_30","value":"'grey-30'"},{"name":"GREY_20","value":"'grey-20'"},{"name":"GREY_10","value":"'grey-10'"}]},{"name":"BadgeVariantEnum","members":[{"name":"PRIMARY","value":"'primary'"},{"name":"PRIMARY_AI","value":"'primary-ai'"},{"name":"SECONDARY","value":"'secondary'"},{"name":"SECONDARY_AI","value":"'secondary-ai'"},{"name":"NOTIFICATION","value":"'notification'"}]}]},"examples":[],"documentation":"## How to use\n\nTo use the Badge component, you need to import the `BadgeComponentModule` in your module:\n\n```typescript\nimport { BadgeComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n BadgeComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-badge \n label=\"Hello\" \n icon=\"Info\" \n color=\"petrol\" \n variant=\"primary\" \n applicationTheme=\"light\">\n</ui-badge>\n```","template":"<div\n [class]=\"'badge badge-container-' + variant\"\n [class.no-label]=\"!label && !staticLabel\"\n [attr.aria-label]=\"label + (staticLabel ? ' ' + staticLabel : '')\"\n [attr.theme]=\"applicationTheme\"\n [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n [matTooltip]=\"\n label.length > 25 - (staticLabel.length < 4 ? staticLabel.length : 4)\n ? label + (staticLabel ? ' ' + staticLabel : '')\n : ''\n \"\n [matTooltipClass]=\"applicationTheme\"\n>\n <ng-container [ngSwitch]=\"variant\">\n <ng-container ngSwitchCase=\"badgeVariant.PRIMARY\">\n <ui-icon ngIf=\"icon\" [class.badge-icon]=\"!!label\" [name]=\"icon\" [color]=\"iconColor\"></ui-icon>\n </ng-container>\n <ng-container ngSwitchCase=\"badgeVariant.PRIMARY_AI\">\n <ng-container [ngTemplateOutlet]=\"aiIconTpl\"></ng-container>\n </ng-container>\n <ng-container ngSwitchCase=\"badgeVariant.SECONDARY_AI\">\n <ng-container [ngTemplateOutlet]=\"aiIconTpl\"></ng-container>\n </ng-container>\n <div\n ngSwitchCase=\"badgeVariant.SECONDARY\"\n class=\"point\"\n [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n ></div>\n <div ngSwitchCase=\"badgeVariant.NOTIFICATION\" class=\"number-notification\">{{ notificationsAmount }}</div>\n </ng-container>\n <div\n class=\"label\"\n ngIf=\"variant !== badgeVariant.NOTIFICATION\"\n [class.empty]=\"!label && !staticLabel\"\n [class.animated]=\"enableAnimation\"\n >\n {{\n label.length > 25 - (staticLabel.length < 4 ? staticLabel.length : 4) && truncateLabel\n ? (label \| slice: 0 : 25 - (staticLabel.length < 4 ? staticLabel.length : 4)) + '...'\n : label\n }}\n </div>\n <span ngIf=\"staticLabel && variant !== badgeVariant.NOTIFICATION\" class=\"static-label\">{{\n staticLabel \| slice: 0 : 4\n }}</span>\n</div>\n\n<ng-template #aiIconTpl>\n <ui-icon class=\"badge-icon\" [name]=\"'Sparkle-in-line'\" [color]=\"'ai'\"></ui-icon>\n</ng-template>\n","queryGuide":{"roles":[],"ariaAttributes":["aria-label"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon"],"suggestedQueries":["screen.getByLabelText('label text')"]},"filePath":"components/badge/badge.component.ts","supportsTheme":true,"lastModified":1775654032748.924},"breadcrumb":{"name":"BreadcrumbComponent","selector":"ui-breadcrumb","category":"breadcrumb","description":"To use the Breadcrumb component, you need to import the `BreadcrumbComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/breadcrumb","moduleName":"BreadcrumbComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"size","type":"BreadcrumbSize","defaultValue":"'large'","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"items","type":"BreadcrumbItem[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"includeBackButton","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"isLoading","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"numberOfLoadingItems","type":"number","defaultValue":"3","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"maxItemLength","type":"number","defaultValue":"18","required":false,"alias":null,"transform":null,"description":"","isSignal":true}],"outputs":[{"name":"selectItem","eventType":"string","alias":null,"description":"","isSignal":false},{"name":"backButtonClickEvent","eventType":"Event","alias":null,"description":"","isSignal":false}],"module":{"name":"BreadcrumbComponentModule","imports":["CommonModule","IconComponentModule","MatTooltipModule","OverflowMenuComponentModule","ButtonComponentModule","SkeletonComponent","UiTranslatePipe","TruncatePipe"],"exports":["BreadcrumbComponent"],"declarations":["BreadcrumbComponent"],"providers":[]},"types":{"typeAliases":[{"name":"BreadcrumbSize","value":"'small' \| 'medium' \| 'large'"}],"interfaces":[{"name":"BreadcrumbItem","properties":[{"name":"label","type":"string","optional":false},{"name":"value","type":"string","optional":false}]}],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Breadcrumb component, you need to import the `BreadcrumbComponentModule` in your module:\n\n```typescript\nimport { BreadcrumbComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n BreadcrumbComponentModule,\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule {}\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-breadcrumb\n [items]=\"breadcrumbItems\"\n [size]=\"'large'\"\n [applicationTheme]=\"'light'\"\n (selectItem)=\"onBreadcrumbItemClick($event)\"\n>\n</ui-breadcrumb>\n```\n\nFor component setup:\n\n```typescript\nimport { BreadcrumbItem } from '@testgorilla/tgo-ui';\n\nexport class MyComponent {\n breadcrumbItems: BreadcrumbItem[] = [\n { label: 'Home', value: 'home' },\n { label: 'Products', value: 'products' },\n { label: 'Category', value: 'category' },\n { label: 'Current Page', value: 'current-page' },\n ];\n\n onBreadcrumbItemClick(value: string): void {\n // Handle navigation logic\n console.log('Breadcrumb item clicked:', value);\n }\n}\n```\n\nDifferent sizes:\n\n```html\n<ui-breadcrumb [items]=\"items\" [size]=\"'small'\"></ui-breadcrumb>\n<ui-breadcrumb [items]=\"items\" [size]=\"'medium'\"></ui-breadcrumb>\n<ui-breadcrumb [items]=\"items\" [size]=\"'large'\"></ui-breadcrumb>\n```\n\nThe breadcrumb component automatically handles overflow by moving items to a dropdown menu when space is limited, and provides intelligent truncation for long labels.\n","template":"@if (!isLoading()) {\n <div class=\"breadcrumb\" [attr.theme]=\"applicationTheme()\" #breadcrumbContainer [class]=\"'breadcrumb-' + size()\">\n @if (includeBackButton()) {\n <ui-button\n [variant]=\"'icon-button'\"\n [tooltip]=\"('COMMON.BACK' \| uiTranslate \| async)!\"\n [iconName]=\"'Arrow-chevron-left-filled'\"\n (buttonClickEvent)=\"backButtonClickEvent.emit($event)\"\n ></ui-button>\n }\n @if (isOverflowing()) {\n <ui-overflow-menu\n [applicationTheme]=\"applicationTheme()\"\n [contentTemplateRef]=\"overflowMenu\"\n [buttons]=\"overflowButtonItems()\"\n [matTooltip]=\"('COMMON.OPTIONS' \| uiTranslate \| async)!\"\n [matTooltipClass]=\"applicationTheme()\"\n [isDynamicMenu]=\"true\"\n (selectItem)=\"selectItem.emit($event)\"\n class=\"breadcrumb-overflow-menu\"\n ></ui-overflow-menu>\n <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n }\n @for (item of visibleItems(); track item.value) {\n @if (!$last) {\n <span\n class=\"breadcrumb-item\"\n tabindex=\"0\"\n [matTooltip]=\"item.label.length > maxItemLength() ? item.label : ''\"\n [matTooltipClass]=\"applicationTheme()\"\n [attr.aria-label]=\"item.label\"\n (click)=\"selectItem.emit(item.value)\"\n (keydown.enter)=\"selectItem.emit(item.value)\"\n >\n {{ item.label \| truncate: maxItemLength() : '...' }}\n </span>\n <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n } @else {\n <strong\n class=\"breadcrumb-item-active\"\n tabindex=\"0\"\n [matTooltip]=\"shouldTruncateLastItem() ? item.label : ''\"\n [matTooltipClass]=\"applicationTheme()\"\n [class.breadcrumb-item-active-truncated]=\"shouldTruncateLastItem()\"\n [attr.aria-label]=\"item.label\"\n [attr.aria-current]=\"'page'\"\n (click)=\"selectItem.emit(item.value)\"\n (keydown.enter)=\"selectItem.emit(item.value)\"\n >\n {{ item.label }}\n </strong>\n }\n }\n </div>\n} @else {\n <div class=\"breadcrumb\">\n @for (i of loadingItems(); track $index) {\n <ui-skeleton count=\"1\" [theme]=\"{ width: '160px', margin: '10px 0 0' }\"></ui-skeleton>\n @if ($index !== numberOfLoadingItems() - 1) {\n <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n }\n }\n </div>\n}\n<ng-template #overflowMenu>\n <div class=\"breadcrumb-item breadcrumb-overflow\" [class]=\"'breadcrumb-' + size()\">...</div>\n</ng-template>\n","queryGuide":{"roles":[],"ariaAttributes":["aria-label","aria-current"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-button","ui-overflow-menu","ui-icon","ui-skeleton"],"suggestedQueries":["screen.getByLabelText('label text')"]},"filePath":"components/breadcrumb/breadcrumb.component.ts","supportsTheme":true,"lastModified":1775654032749.924},"button":{"name":"ButtonComponent","selector":"ui-button","category":"button","description":"To use the Button component, you need to import the `ButtonComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/button","moduleName":"ButtonComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"size","type":"ButtonSize","defaultValue":"'big'","required":false,"alias":null,"transform":null,"description":"Define button height","isSignal":false},{"name":"variant","type":"ButtonColor","defaultValue":"'primary'","required":false,"alias":null,"transform":null,"description":"Background color of the button while in active state","isSignal":false},{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Text content to appear on the button","isSignal":false},{"name":"iconPosition","type":"ButtonIconPosition","defaultValue":"'right'","required":false,"alias":null,"transform":null,"description":"Positioning of the icon (when existant)","isSignal":false},{"name":"justIcon","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Define if button has only icon without text","isSignal":false},{"name":"iconName","type":"IconName \| undefined","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Name of ui-icon","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Indicator if the button should be disabled","isSignal":false},{"name":"loading","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Indicator if the loading icon should be shown","isSignal":false},{"name":"fullWidth","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Indicator of the button width","isSignal":false},{"name":"url","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Url of button if it is a link","isSignal":false},{"name":"urlTarget","type":"LinkUrlTarget","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Url's target of button if it is a link","isSignal":false},{"name":"value","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Button value","isSignal":false},{"name":"tooltip","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"isPremium","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"type","type":"ButtonType","defaultValue":"'button'","required":false,"alias":null,"transform":null,"description":"The type of the button.","isSignal":false},{"name":"companyColor","type":"string \| null","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Color of the button.\nDefaults to Test Gorilla primary color.","isSignal":false},{"name":"buttonBadgeConfig","type":"ButtonBadgeConfig \| undefined","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Config for the button badge variation","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme where buttons is used","isSignal":false},{"name":"disabledScaleOnClick","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Disabled button scale on click","isSignal":false},{"name":"ariaLabel","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"A string representing the ARIA label for accessibility.\nThis label is used to provide an accessible name for the input element.","isSignal":false},{"name":"ariaRequired","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"ariaLabelledby","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"ariaDescribedby","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"preventDefault","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":"booleanAttribute","description":"Prevents default button click behavior","isSignal":false},{"name":"hasBackground","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":"booleanAttribute","description":"Ghost variant with white background","isSignal":false},{"name":"tooltipPosition","type":"TooltipPosition","defaultValue":"'below'","required":false,"alias":null,"transform":null,"description":"Sets tooltip position","isSignal":false},{"name":"role","type":"unknown","defaultValue":"'button'","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"iconFilled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false}],"outputs":[{"name":"buttonClickEvent","eventType":"Event","alias":null,"description":"","isSignal":false},{"name":"buttonHoverEvent","eventType":"Event","alias":null,"description":"","isSignal":false}],"module":{"name":"ButtonComponentModule","imports":["CommonModule","MatButtonModule","IconComponentModule","MatProgressSpinnerModule","MatTooltipModule","BadgeComponentModule","EllipseTextDirective","MatRadioModule","UiTranslatePipe"],"exports":["ButtonComponent"],"declarations":["ButtonComponent"],"providers":[]},"types":{"typeAliases":[{"name":"ButtonIconPosition","value":"'left' \| 'right'"},{"name":"ButtonColor","value":"\| 'primary'\n \| 'secondary'\n \| 'secondary-inverted'\n \| 'ghost'\n \| 'ghost-ai'\n \| 'outlined'\n \| 'destructive'\n \| 'tertiary'\n \| 'link'\n \| 'tab'\n \| 'text'\n \| 'text-inline'\n \| 'menuTrigger'\n \| 'menuCell'\n \| 'icon-button'\n \| 'linkedin'"},{"name":"ButtonSize","value":"'big' \| 'medium' \| 'small'"},{"name":"LinkUrlTarget","value":"'' \| '_self' \| '_blank' \| '_parent' \| '_top'"},{"name":"IconButtonSize","value":"'24' \| '32' \| '40'"},{"name":"ButtonType","value":"'button' \| 'submit' \| 'reset'"},{"name":"ButtonState","value":"'hover' \| 'pressed' \| 'disabled' \| 'default'"}],"interfaces":[{"name":"ButtonBadgeConfig","properties":[{"name":"badgeType","type":"BadgeVariant \| null","optional":false},{"name":"badgeLabel","type":"string","optional":true},{"name":"badgeNotificationAmount","type":"number","optional":false},{"name":"rebrandColor","type":"RebrandBadgeColor","optional":true}]}],"enums":[]},"examples":[{"name":"Basic","template":"<div class=\"row\">\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"primary\" label=\"Primary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"secondary\" label=\"Secondary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"secondary-inverted\" label=\"Secondary Inverted\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"ghost\" label=\"Ghost\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" iconName=\"Book\" variant=\"destructive\" label=\"Destructive\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"tertiary\" label=\"Tertiary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"tab\" label=\"Tab\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"text\" label=\"Text\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"text-inline\" label=\"Text-inline\"></ui-button></div>\n </div>","props":{"label":"'Button'","variant":"'primary'","iconName":"'Book'"}},{"name":"ButtonOnlyLabel","template":"<div class=\"row\">\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"primary\" label=\"Primary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"secondary\" label=\"Secondary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"secondary-inverted\" label=\"Secondary Inverted\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"ghost\" label=\"Ghost\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" iconName=\"Book\" variant=\"destructive\" label=\"Destructive\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"tertiary\" label=\"Tertiary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"tab\" label=\"Tab\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"text\" label=\"Text\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"text-inline\" label=\"Text-inline\"></ui-button></div>\n </div>","props":{"iconPosition":"'left'"}},{"name":"ButtonAsLink","template":"<div>\n <p>Big size</p>\n Sample sentance with <ui-button applicationTheme=\"${_theme}\" variant=\"link\" urlTarget=\"_blank\" href=\"https://www.testgorilla.com/\" label=\"Large\"></ui-button> link</div>\n <hr>\n <div>\n <p>Medium size</p>\n Sample sentance with <ui-button applicationTheme=\"${_theme}\" size=\"medium\" variant=\"link\" urlTarget=\"_blank\" href=\"https://www.testgorilla.com/\" label=\"Medium\"></ui-button> link\n <hr>\n <p>Small size</p>\n Sample sentance with <ui-button applicationTheme=\"${_theme}\" size=\"small\" variant=\"link\" urlTarget=\"_blank\" href=\"https://www.testgorilla.com/\" label=\"Small\"></ui-button> link\n <hr>\n </div>","props":{"iconPosition":"'left'"}},{"name":"Disabled","template":"<div class=\"row\"><div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" iconName=\"Book\" variant=\"primary\" [disabled]=\"true\" label=\"Primary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"secondary\" iconName=\"Book\" [disabled]=\"true\" label=\"Secondary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"ghost\" iconName=\"Book\" [disabled]=\"true\" label=\"Ghost\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"destructive\" iconName=\"Book\" [disabled]=\"true\" label=\"Destructive\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"tertiary\" iconName=\"Book\" [disabled]=\"true\" label=\"Tertiary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"tab\" iconName=\"Book\" [disabled]=\"true\" label=\"Tab\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"text\" iconName=\"Book\" [disabled]=\"true\" label=\"Text\"></ui-button></div></div>\n <h4>Only icon</h4>\n <div class=\"row\">\n <div class=\"colum\"> <ui-button applicationTheme=\"${_theme}\" variant=\"primary\" [disabled]=\"true\" [justIcon]=\"true\" iconName=\"Test\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"secondary\" [disabled]=\"true\" [justIcon]=\"true\" iconName=\"Test\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"ghost\" [disabled]=\"true\" [justIcon]=\"true\" iconName=\"Test\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"destructive\" [disabled]=\"true\" [justIcon]=\"true\" iconName=\"Test\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"tertiary\" [disabled]=\"true\" [justIcon]=\"true\" iconName=\"Test\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"tab\" [disabled]=\"true\" [justIcon]=\"true\" iconName=\"Test\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"text\" [disabled]=\"true\" [justIcon]=\"true\" iconName=\"Test\"></ui-button></div></div>","props":{"iconPosition":"'left'"}},{"name":"LabelIconLeft","template":"<div class=\"row\"><div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"primary\" iconName=\"Book\" iconPosition=\"left\" label=\"Primary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"secondary\" iconName=\"Book\" iconPosition=\"left\" label=\"Secondary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"ghost\" iconName=\"Book\" iconPosition=\"left\" label=\"Ghost\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"ghost-ai\" iconName=\"Sparkle\" iconPosition=\"left\" label=\"Ghost AI\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"destructive\" iconName=\"Book\" iconPosition=\"left\" label=\"Destructive\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"tertiary\" iconName=\"Book\" iconPosition=\"left\" label=\"Tertiary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"tab\" iconName=\"Book\" iconPosition=\"left\" label=\"Tab\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"text\" iconName=\"Book\" iconPosition=\"left\" label=\"Text\"></ui-button></div></div>","props":{"iconPosition":"'left'"}},{"name":"LabelIconRight","template":"<div class=\"row\"><div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"primary\" iconName=\"Close\" iconPosition=\"right\" label=\"Primary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"secondary\" iconName=\"Close\" iconPosition=\"right\" label=\"Secondary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"ghost\" iconName=\"Close\" iconPosition=\"right\" label=\"Ghost\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"ghost-ai\" iconName=\"Sparkle\" iconPosition=\"right\" label=\"Ghost AI\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"destructive\" iconName=\"Close\" iconPosition=\"right\" label=\"Destructive\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"tertiary\" iconName=\"Close\" iconPosition=\"right\" label=\"Tertiary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"tab\" iconName=\"Close\" iconPosition=\"right\" label=\"Tab\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"text\" iconName=\"Close\" iconPosition=\"right\" label=\"Text\"></ui-button></div></div>","props":{"iconPosition":"'right'"}},{"name":"OnlyIcon","template":"<div class=\"row\"><div class=\"colum\">\n <ui-button variant=\"primary\" [justIcon]=\"true\" applicationTheme=\"${_theme}\" iconName=\"Book\"></ui-button></div>\n <div class=\"colum\"><ui-button variant=\"secondary\" applicationTheme=\"${_theme}\" [justIcon]=\"true\" iconName=\"Book\"></ui-button></div>\n <div class=\"colum\"><ui-button variant=\"ghost\" applicationTheme=\"${_theme}\" [justIcon]=\"true\" iconName=\"Book\"></ui-button></div>\n <div class=\"colum\"><ui-button variant=\"destructive\" applicationTheme=\"${_theme}\" [justIcon]=\"true\" iconName=\"Book\"></ui-button></div>\n <div class=\"colum\"><ui-button variant=\"tertiary\" applicationTheme=\"${_theme}\" [justIcon]=\"true\" iconName=\"Book\"></ui-button></div>\n <div class=\"colum\"><ui-button variant=\"tab\" applicationTheme=\"${_theme}\" [justIcon]=\"true\" iconName=\"Book\"></ui-button></div>\n <div class=\"colum\"><ui-button variant=\"text\" applicationTheme=\"${_theme}\" [justIcon]=\"true\" iconName=\"Book\"></ui-button></div></div>","props":{"justIcon":"true","iconName":"'Book'"}},{"name":"Loading","template":"<div class=\"row\"><div class=\"colum\">\n <ui-button applicationTheme=\"${_theme}\" variant=\"primary\" ${argsToTemplate(args)}></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"secondary\" ${argsToTemplate(args)}></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"ghost\" ${argsToTemplate(args)}></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"destructive\" iconName=\"Test\" ${argsToTemplate(args)}></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"tertiary\" ${argsToTemplate(args)}></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"text\" ${argsToTemplate(args)}></ui-button></div></div>","props":{"loading":"true"}},{"name":"Small","template":"<div class=\"row\"><div class=\"colum\">\n <ui-button variant=\"primary\" size=\"small\" applicationTheme=\"${_theme}\" [loading]=\"true\"></ui-button></div>\n <div class=\"colum\"><ui-button size=\"small\" applicationTheme=\"${_theme}\" variant=\"secondary\" label=\"Secondary\" iconName=\"Add\" [justIcon]=\"true\"></ui-button></div>\n <div class=\"colum\"><ui-button size=\"small\" applicationTheme=\"${_theme}\" variant=\"ghost\" iconName=\"Close\" iconPosition=\"right\" label=\"Ghost\"></ui-button></div>\n <div class=\"colum\"><ui-button size=\"small\" applicationTheme=\"${_theme}\" variant=\"destructive\" iconName=\"Devices\" iconPosition=\"left\" label=\"Destructive\"></ui-button></div>\n <div class=\"colum\"><ui-button size=\"small\" applicationTheme=\"${_theme}\" variant=\"tertiary\" label=\"Tertiary\"></ui-button></div>\n <div class=\"colum\"><ui-button size=\"small\" applicationTheme=\"${_theme}\" variant=\"tab\" label=\"Tab\"></ui-button></div>\n <div class=\"colum\"><ui-button size=\"small\" applicationTheme=\"${_theme}\" variant=\"text\" label=\"Text\"></ui-button></div>\n <div class=\"colum\"><ui-button size=\"small\" applicationTheme=\"${_theme}\" variant=\"text-inline\" label=\"Text-inline\"></ui-button></div></div>","props":{"size":"'small'"}},{"name":"FullWidth","template":"<div class=\"row\">\n <ui-button variant=\"primary\" applicationTheme=\"${_theme}\" [fullWidth]=\"true\" label=\"Primary\"></ui-button>\n <ui-button variant=\"secondary\" applicationTheme=\"${_theme}\" [fullWidth]=\"true\" iconName=\"Devices\" iconPosition=\"right\" label=\"Secondary\"></ui-button>\n <ui-button variant=\"ghost\" applicationTheme=\"${_theme}\" [fullWidth]=\"true\" iconName=\"Close\" iconPosition=\"left\" label=\"Ghost\"></ui-button></div>","props":{"fullWidth":"true"}},{"name":"MenuTrigger","template":"<div class=\"row\">\n <div class=\"colum\"><ui-button variant=\"menuTrigger\" [justIcon]=\"true\" iconName=\"Settings\"></ui-button></div>\n <div class=\"colum\"><ui-button variant=\"menuTrigger\" [justIcon]=\"true\" iconName=\"Menu-ellipsis\"></ui-button></div>\n <div class=\"colum\"><ui-button variant=\"menuTrigger\" [justIcon]=\"true\" iconName=\"Folder\"></ui-button></div>\n <div class=\"colum\"><ui-button variant=\"menuTrigger\" [justIcon]=\"true\" iconName=\"Plus\"></ui-button></div></div>","props":{"variant":"'menuTrigger'","justIcon":"true","iconName":"'Settings'"}},{"name":"MenuCell","template":"<div class=\"row\">\n <div class=\"colum\"><ui-button variant=\"menuCell\" iconPosition=\"left\" iconName=\"Copy\" label=\"Copy\"></ui-button></div>\n <div class=\"colum\"><ui-button variant=\"menuCell\" iconPosition=\"left\" iconName=\"Edit\" label=\"Edit\"></ui-button></div>\n <div class=\"colum\"><ui-button variant=\"menuCell\" iconPosition=\"left\" iconName=\"Delete\" label=\"Delete\"></ui-button></div></div>","props":{"variant":"'icon-button'","tooltip":"'Icon Button Tooltip'","iconName":"'Settings'"}},{"name":"IconButton","template":"<div>\n <h4>Enabled: </h4>\n <ui-button ${argsToTemplate(args)} applicationTheme=\"${_theme}\"></ui-button>\n </div>\n <div>\n <h4>Disabled: </h4>\n <ui-button ${argsToTemplate(args)} applicationTheme=\"${_theme}\" disabled=\"true\"></ui-button>\n </div>","props":{"variant":"'icon-button'","tooltip":"'Icon Button Tooltip'","iconName":"'Settings'"}},{"name":"PremiumButton","template":"<div class=\"row\"><div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" ${argsToTemplate(args)} variant=\"primary\" label=\"Primary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" ${argsToTemplate(args)} variant=\"secondary\" label=\"Secondary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" ${argsToTemplate(args)} variant=\"ghost\" label=\"Ghost\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" ${argsToTemplate(args)} iconName=\"Test\" variant=\"destructive\" label=\"Destructive\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" ${argsToTemplate(args)} variant=\"icon-button\" [justIcon]=\"true\" iconName=\"Book\" tooltip=\"Premium Icon Button\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" ${argsToTemplate(args)} variant=\"icon-button\" [justIcon]=\"true\" [disabled]=\"true\" iconName=\"Book\" tooltip=\"Premium Icon Button Disabled\"></ui-button></div>","props":{"isPremium":"true"}},{"name":"BadgeButton","template":"<div class=\"row\"><div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" [buttonBadgeConfig]='{\"badgeType\": \"primary\", \"badgeLabel\": \"Primary\"}' variant=\"primary\" label=\"Primary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" [buttonBadgeConfig]='{\"badgeType\": \"primary\", \"badgeLabel\": \"Primary\"}' variant=\"secondary\" label=\"Secondary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" [buttonBadgeConfig]='{\"badgeType\": \"notification\", \"badgeNotificationAmount\": \"9\"}' variant=\"ghost\" label=\"Ghost\"></ui-button></div>","props":{"buttonBadgeConfig":"{","badgeType":"'primary'","badgeLabel":"'Primary'","badgeNotificationAmount":"0"}},{"name":"LongTruncatedLabel","template":"<div class=\"row\">\n <div class=\"colum\">\n <ui-button\n applicationTheme=\"${_theme}\"\n [buttonBadgeConfig]='{\"badgeLabel\": \"Primary\"}'\n variant=\"primary\"\n ${argsToTemplate(args)}\n >\n\n </ui-button>\n </div>\n </div>","props":{"label":"'Some very long label that should be multilined and truncated to test the tooltip'"}},{"name":"LinkedIn","template":"<h4>Default</h4>\n <div class=\"row\">\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"linkedin\" size=\"small\" iconName=\"Linkedin-brand\" iconPosition=\"left\" label=\"Add to profile\"></ui-button></div>\n </div>\n <h4>Disabled</h4>\n <div class=\"row\">\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"linkedin\" size=\"small\" iconName=\"Linkedin-brand\" iconPosition=\"left\" [disabled]=\"true\" label=\"Add to profile\"></ui-button></div>\n </div>\n <h4>Big size</h4>\n <div class=\"row\">\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"linkedin\" size=\"big\" iconName=\"Linkedin-brand\" iconPosition=\"left\" label=\"Add to profile\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"linkedin\" size=\"big\" iconName=\"Linkedin-brand\" iconPosition=\"left\" [disabled]=\"true\" label=\"Add to profile\"></ui-button></div>\n </div>","props":{"label":"'Some very long label that should be multilined for buttons that has long width'"}},{"name":"LongLabelMultilined","template":"<div class=\"row\">\n <div class=\"colum\">\n <ui-button\n applicationTheme=\"${_theme}\"\n [buttonBadgeConfig]='{\"badgeLabel\": \"Primary\"}'\n variant=\"primary\"\n ${argsToTemplate(args)}\n >\n\n </ui-button>\n </div>\n </div>","props":{"label":"'Some very long label that should be multilined for buttons that has long width'"}}],"documentation":"## How to use\n\nTo use the Button component, you need to import the `ButtonComponentModule` in your module:\n\n```typescript\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n ButtonComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-button label=\"Button Label\" applicationTheme=\"light\"></ui-button>\n```","template":"<div\n #tooltipElement\n class=\"tooltip\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n></div>\n<div\n class=\"button-wrapper\"\n [ngClass]=\"{\n 'full-width': fullWidth,\n 'rounded-icon': applicationTheme !== 'classic' && icon && !label,\n link: !isButtonLink,\n }\"\n>\n <div\n class=\"button-container\"\n [ngClass]=\"{\n disabled: disabled,\n 'button-scale': buttonState === 'pressed' && applicationTheme !== 'classic' && !disabledScaleOnClick,\n }\"\n >\n <span ngIf=\"isPremium && typeIncluded\" class=\"right-top\">\n <img [attr.src]=\"'/images/premium.svg'\" [alt]=\"'premium-icon'\" />\n </span>\n <ui-badge\n id=\"badge\"\n ngIf=\"buttonBadgeConfig?.badgeType\"\n [rebrandColor]=\"buttonBadgeConfig?.rebrandColor ?? 'brand'\"\n [variant]=\"buttonBadgeConfig!.badgeType!\"\n [label]=\"buttonBadgeConfig?.badgeLabel ?? ''\"\n [notificationsAmount]=\"buttonBadgeConfig?.badgeNotificationAmount ?? 0\"\n class=\"right-top\"\n [ngClass]=\"[\n buttonBadgeConfig?.badgeType === 'primary' ? 'badge-primary' : '',\n buttonBadgeConfig?.badgeType === 'notification' ? 'badge-notification' : '',\n variant,\n ]\"\n ></ui-badge>\n <button\n [style]=\"'--icon-button-size:' + iconButtonSize + 'px'\"\n [ngClass]=\"classCss\"\n [ngStyle]=\"styleCss\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick($event)\"\n (mouseleave)=\"buttonHover($event)\"\n (mouseenter)=\"buttonHover($event)\"\n (mousedown)=\"onPressed($event)\"\n (mouseup)=\"onPressed($event)\"\n (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\"\n ngIf=\"isButtonLink\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledbyId\"\n [attr.aria-describedby]=\"'describedby'\"\n [attr.aria-disabled]=\"disabled\"\n [type]=\"type\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n [matTooltipPosition]=\"tooltipPosition\"\n #buttonElement\n [attr.role]=\"role\"\n mat-flat-button\n >\n <span id=\"describedby\" [style.display]=\"'none'\">\n {{ isPremium ? label + ' ' + ('BUTTON.PREMIUM_FEATURE' \| uiTranslate \| async) : ariaDescribedby }}\n </span>\n <span [id]=\"ariaLabelledbyId\" [style.display]=\"'none'\">\n {{ ariaLabelledby }}\n </span>\n <ng-container ngIf=\"showSpinner; else icons\">\n <span class=\"spinner-wrapper\">\n <mat-spinner class=\"position-spinner\" aria-label=\"loading\" mode=\"indeterminate\" diameter=\"24\"></mat-spinner>\n </span>\n </ng-container>\n <ng-template #icons>\n <span class=\"icon-only-wrapper\" ngIf=\"justIcon && !!icon\">\n <span class=\"icon only\" role=\"label\">\n <ui-icon\n [color]=\"variant === 'ghost-ai' ? 'ai' : 'inherit'\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"icon\"\n [filled]=\"isFilledIcon \|\| iconFilled\"\n [useFullIconName]=\"variant === 'primary' \|\| variant === 'secondary' \|\| variant === 'linkedin'\"\n [size]=\"size === 'small' ? '16' : '24'\"\n ></ui-icon>\n </span>\n </span>\n\n <span class=\"icon-label-wrapper\" [ngClass]=\"{ 'center-text': iconName === '' }\" ngIf=\"!justIcon\">\n <span class=\"icon\" ngIf=\"iconPosition === 'left' && !!iconName\" aria-hidden=\"true\">\n <ui-icon\n [color]=\"variant === 'ghost-ai' ? 'ai' : 'inherit'\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"icon\"\n [filled]=\"isFilledIcon \|\| iconFilled\"\n [useFullIconName]=\"variant === 'primary' \|\| variant === 'secondary' \|\| variant === 'linkedin'\"\n [size]=\"size === 'small' ? '16' : '24'\"\n ></ui-icon>\n </span>\n <span\n ngIf=\"isLabel\"\n class=\"label\"\n id=\"label\"\n uiEllipseText\n [isMultiline]=\"true\"\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n >\n {{ label }}\n </span>\n <span class=\"icon\" ngIf=\"iconPosition === 'right' && !!icon\" aria-hidden=\"true\"\n ><ui-icon\n [color]=\"variant === 'ghost-ai' ? 'ai' : 'inherit'\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"icon\"\n [filled]=\"isFilledIcon \|\| iconFilled\"\n [size]=\"size === 'small' ? '16' : '24'\"\n [useFullIconName]=\"variant === 'primary' \|\| variant === 'secondary' \|\| variant === 'linkedin'\"\n ></ui-icon\n ></span>\n </span>\n </ng-template>\n </button>\n <a\n #buttonElement\n [ngClass]=\"classCss\"\n [ngStyle]=\"styleCss\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick($event)\"\n (mouseenter)=\"buttonHover($event)\"\n (mouseleave)=\"buttonHover($event)\"\n (mousedown)=\"onPressed($event)\"\n (mouseup)=\"onPressed($event)\"\n (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\"\n [disableRipple]=\"true\"\n ngIf=\"!isButtonLink\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledbyId\"\n [attr.aria-describedby]=\"'describedby-link'\"\n [attr.aria-disabled]=\"disabled\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n role=\"link\"\n [href]=\"url\"\n [target]=\"urlTarget\"\n mat-flat-button\n >\n <span id=\"describedby-link\" [style.display]=\"'none'\">\n {{ ariaDescribedby }}\n </span>\n <span [id]=\"ariaLabelledbyId\" [style.display]=\"'none'\">\n {{ ariaLabelledby }}\n </span>\n <span class=\"icon-label-wrapper\">\n {{ label }}\n </span>\n </a>\n </div>\n</div>\n","queryGuide":{"roles":["label","link","progressbar"],"ariaAttributes":["aria-label","aria-hidden","aria-required","aria-labelledby","aria-describedby","aria-disabled"],"dataTestIds":[],"materialComponents":["mat-spinner"],"childUIComponents":["ui-badge","ui-icon"],"suggestedQueries":["screen.getByRole('label')","screen.getByRole('link')","screen.getByRole('progressbar')","screen.getByLabelText('label text')"]},"filePath":"components/button/button.component.ts","supportsTheme":true,"lastModified":1775654032749.924},"card":{"name":"CardComponent","selector":"ui-card","category":"card","description":"To use the Card component, you need to import the `CardComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/card","moduleName":"CardComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"size","type":"CardSize","defaultValue":"'medium'","required":false,"alias":null,"transform":null,"description":"Card size. Defaults \"medium\".","isSignal":false},{"name":"sizeVariant","type":"CardSizeVariant","defaultValue":"'regular'","required":false,"alias":null,"transform":null,"description":"Card size variant. Defaults \"default\".","isSignal":false},{"name":"variant","type":"CardVariant","defaultValue":"'default'","required":false,"alias":null,"transform":null,"description":"Card variants. Defaults \"default\".","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"errorsSize","type":"unknown","defaultValue":"'default'","required":false,"alias":null,"transform":null,"description":"Errors size","isSignal":false},{"name":"selected","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Marks card as selected","isSignal":false},{"name":"allowSelect","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Marks card as readonly. Defaults \"false\".","isSignal":false},{"name":"allowFocus","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Marks card as focusable. Defaults \"true\".","isSignal":false},{"name":"errors","type":"string[]","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Show errors below card.","isSignal":false}],"outputs":[{"name":"cardSelected","eventType":"boolean","alias":null,"description":"Emits when card is being selected","isSignal":false}],"module":{"name":"CardComponentModule","imports":["CommonModule","IconComponentModule"],"exports":["CardComponent"],"declarations":["CardComponent"],"providers":[]},"types":{"typeAliases":[{"name":"CardSize","value":"'small' \| 'medium' \| 'large'"},{"name":"CardSizeVariant","value":"'regular' \| 'condensed'"},{"name":"CardVariant","value":"\| 'default'\n \| 'shadow'\n \| 'state'\n \| 'error'\n \| 'educative'\n \| 'premium'\n \| 'ai'\n \| 'actionDriver'\n \| 'neutral'\n \| 'neutral-state'"}],"interfaces":[],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Card component, you need to import the `CardComponentModule` in your module:\n\n```typescript\nimport { CardComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n CardComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-card applicationTheme=\"light\" variant=\"default\">\n <div>Content goes here</div>\n</ui-card>\n```","template":"<div\n class=\"card-container\"\n (keydown.enter)=\"selectCard()\"\n (keydown.space)=\"selectCard()\"\n (click)=\"selectCard()\"\n [ngClass]=\"[classes, isSelected ? 'selected' : '']\"\n [attr.theme]=\"applicationTheme\"\n [attr.tabindex]=\"allowFocus ? 0 : null\"\n>\n <ng-content></ng-content>\n</div>\n@if (safeErrors?.length) {\n <div class=\"errors\" [class.errors-small]=\"errorsSize === 'small'\">\n @for (error of safeErrors; track error) {\n <div class=\"error\">\n <ui-icon [size]=\"errorIconSize\" [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n }\n </div>\n}\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon"],"suggestedQueries":[]},"filePath":"components/card/card.component.ts","supportsTheme":true,"lastModified":1775654032750.924},"checkbox":{"name":"CheckboxComponent","selector":"ui-checkbox","category":"forms","description":"To use the Checkbox component, you need to import the `CheckboxComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/checkbox","moduleName":"CheckboxComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Determines whether the checkbox is disabled.\nDefault: false.","isSignal":false},{"name":"checked","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Determines whether the checkbox is checked.\nDefault: false.","isSignal":false},{"name":"indeterminate","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Determines whether the checkbox is indeterminate.\nIt can be used to represent a checkbox with three states, e.g. a checkbox that represents a nested list of checkable items.\nDefault: false.","isSignal":false},{"name":"companyColor","type":"string \| null","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Determines whether the checkbox color.\nDefault: Test Gorilla primary color.","isSignal":false},{"name":"name","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Name value will be applied to the input element if present.","isSignal":false},{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Text content will be applied to the input element if present.","isSignal":false},{"name":"multiple","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Determines whether the checkbox is a multiple choice cell.\nDefault: false","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"ariaLabel","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"A string representing the ARIA label for accessibility.\nThis label is used to provide an accessible name for the input element.","isSignal":false},{"name":"ariaRequired","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"hasError","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Defines if checkbox has error","isSignal":false},{"name":"hideBuiltInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Hide in-build errors for Reactive Forms","isSignal":false},{"name":"hideLabelInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Hide label in errors","isSignal":false},{"name":"ariaLabelledby","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"ariaDescribedby","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"truncateText","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Truncate text if it is too long","isSignal":false},{"name":"alignment","type":"Alignment","defaultValue":"'center'","required":false,"alias":null,"transform":null,"description":"Text alignment","isSignal":false},{"name":"tabIndex","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"Sets the tab index for the checkbox component.\nThis determines the order in which elements receive focus when the user navigates through them using the Tab key.\nDefault value is 0.","isSignal":false}],"outputs":[{"name":"changed","eventType":"boolean","alias":null,"description":"Event emitted when the checkbox's checked value changes.","isSignal":false}],"module":{"name":"CheckboxComponentModule","imports":["CommonModule","MatCheckboxModule","FormsModule","ReactiveFormsModule","MatInputModule","IconComponentModule","UiTranslatePipe","ValidationErrorModule","HasValidationErrorPipe","EllipseTextDirective","MatTooltipModule","FocusVisibleDirective"],"exports":["CheckboxComponent"],"declarations":["CheckboxComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[{"name":"Default","template":"<ui-checkbox applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - unselected\" [checked]=\"false\"></ui-checkbox>\n <br>\n <ui-checkbox applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - selected\" [checked]=\"true\"></ui-checkbox>","props":{"disabled":"false","checked":"false","indeterminate":"false"}},{"name":"Disabled","template":"<ui-checkbox applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - unselected\" [checked]=\"false\"></ui-checkbox>\n <br>\n <ui-checkbox applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - selected\" [checked]=\"true\"></ui-checkbox>","props":{"disabled":"true"}},{"name":"Selected","template":"<ui-checkbox applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - unselected\" [checked]=\"false\"></ui-checkbox>\n <br>\n <ui-checkbox applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - selected\" [checked]=\"true\"></ui-checkbox>","props":{"checked":"true"}},{"name":"Indeterminate","template":"<ui-checkbox applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - unselected\" [checked]=\"false\"></ui-checkbox>\n <br>\n <ui-checkbox applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - selected\" [checked]=\"true\"></ui-checkbox>","props":{"indeterminate":"true"}},{"name":"WithLabel","template":"<ui-checkbox applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - unselected\" [checked]=\"false\"></ui-checkbox>\n <br>\n <ui-checkbox applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - selected\" [checked]=\"true\"></ui-checkbox>","props":{"checked":"true","label":"'Some text.'"}},{"name":"MultipleChoice","template":"<ui-checkbox applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - unselected\" [checked]=\"false\"></ui-checkbox>\n <br>\n <ui-checkbox applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - selected\" [checked]=\"true\"></ui-checkbox>","props":{}},{"name":"WithErrorMultiple","template":"<ui-checkbox [hasError]=\"true\" applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - unselected\" [checked]=\"false\"></ui-checkbox>\n <ui-checkbox [hasError]=\"true\" applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - unselected\" [checked]=\"false\"></ui-checkbox>","props":{}},{"name":"WithErrorSingle","template":"<ui-checkbox [hasError]=\"true\" applicationTheme=\"${_theme}\" [multiple]=\"false\" label=\"Single selection - unselected\" [checked]=\"false\"></ui-checkbox>\n <ui-checkbox [hasError]=\"true\" applicationTheme=\"${_theme}\" [multiple]=\"false\" label=\"Single selection - unselected\" [checked]=\"false\"></ui-checkbox>","props":{}}],"documentation":"## How to use\n\nTo use the Checkbox component, you need to import the `CheckboxComponentModule` in your module:\n\n```typescript\nimport { CheckboxComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n CheckboxComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-checkbox\n label=\"Accept terms and conditions\"\n [checked]=\"isAccepted\"\n [disabled]=\"isDisabled\"\n [multiple]=\"false\"\n applicationTheme=\"light\"\n (checkedChange)=\"onCheckboxChange($event)\">\n</ui-checkbox>\n```\n\nYou can also use it with reactive forms:\n\n```html\n<ui-checkbox\n formControlName=\"acceptTerms\"\n label=\"Accept terms and conditions\">\n</ui-checkbox>\n```\n\nThe checkbox component supports standard, multiple choice, and indeterminate states.","template":"<div\n #checkboxContainer\n tabindex=\"0\"\n [class]=\"multiple ? 'checkbox-container' : 'checkbox'\"\n [ngClass]=\"classMultiple\"\n [attr.alignment]=\"alignment\"\n [attr.truncate-text]=\"truncateText\"\n [attr.theme]=\"applicationTheme\"\n [attr.hasError]=\"hasError\"\n (keydown.enter)=\"toggleChecked(); checkboxContainer.focus()\"\n (keydown.space)=\"toggleChecked(); checkboxContainer.focus()\"\n>\n <mat-checkbox\n #checkbox\n (mouseleave)=\"checkbox.disableRipple = true\"\n (mouseenter)=\"checkbox.disableRipple = false\"\n [indeterminate]=\"indeterminate\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [tabIndex]=\"tabIndex\"\n [name]=\"name\"\n [ngClass]=\"[checkbox.disableRipple ? 'disable-ripple' : '', origin ? 'cdk-' + origin + '-focused' : '']\"\n [aria-label]=\"ariaLabel\"\n [aria-labelledby]=\"ariaLabelledby ? ariaLabelledby : label\"\n [aria-describedby]=\"ariaDescribedby \|\| 'ariaDescribedby'\"\n (click)=\"toggleChecked()\"\n (keydown.enter)=\"$event.preventDefault()\"\n (keydown.space)=\"$event.preventDefault()\"\n class=\"checkbox\"\n >\n @if (label) {\n <span\n #tooltip=\"matTooltip\"\n class=\"label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n [matTooltip]=\"showTooltip && truncateText ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >\n {{ label }}\n </span>\n }\n <ng-content select=\"[checkbox-label]\"></ng-content>\n </mat-checkbox>\n\n <mat-hint class=\"error\" ngIf=\"ngControl?.errors \| hasValidationError\">\n <ui-validation-error\n ngIf=\"ngControl && !hideBuiltInErrors\"\n [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors ? null : label\"\n ></ui-validation-error>\n </mat-hint>\n</div>\n","queryGuide":{"roles":["checkbox"],"ariaAttributes":[],"dataTestIds":[],"materialComponents":["mat-checkbox","mat-hint"],"childUIComponents":["ui-validation-error"],"suggestedQueries":["screen.getByRole('checkbox')"]},"filePath":"components/checkbox/checkbox.component.ts","supportsTheme":true,"lastModified":1775654032750.924},"checklist":{"name":"ChecklistComponent","selector":"ui-checklist","category":"checklist","description":"To use the Checklist component, you need to import the component in your module:","importPath":"@testgorilla/tgo-ui/components/checklist","moduleName":"ChecklistComponentModule","standalone":true,"changeDetection":"OnPush","inputs":[{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Label for the checklist","isSignal":true},{"name":"description","type":"string \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"Sub title/Description for the checklist","isSignal":true},{"name":"applicationTheme","type":"ApplicationTheme \| undefined","defaultValue":"undefined","required":false,"alias":null,"transform":null,"description":"Application theme","isSignal":true},{"name":"footerButtonLabel","type":"string \| undefined","defaultValue":"undefined","required":false,"alias":null,"transform":null,"description":"Confirm button label","isSignal":true},{"name":"ariaLabel","type":"string \| undefined","defaultValue":"undefined","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":true},{"name":"language","type":"unknown","defaultValue":"LanguageService.defaultLanguage","required":false,"alias":null,"transform":null,"description":"The language to be used","isSignal":true},{"name":"autocheck","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"A boolean property that determines whether the checklist items should be automatically checked.","isSignal":true},{"name":"items","type":"ChecklistItem[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"Items for the checklist","isSignal":true},{"name":"selectedItem","type":"ChecklistItem","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Represents the currently selected item in the checklist.\nThis is an instance of the `ChecklistItem` supports two-way binding.","isSignal":true}],"outputs":[{"name":"footerButtonClicked","eventType":"void","alias":null,"description":"Event emitter that triggers when the footer button is clicked.\nEmits a void event.","isSignal":true},{"name":"completed","eventType":"void","alias":null,"description":"An output event emitter that signifies the completion of a task or process.\nThis event does not carry any payload.","isSignal":true},{"name":"itemsChange","eventType":"ChecklistItem[]","alias":null,"description":"Two-way binding change event for items","isSignal":true},{"name":"selectedItemChange","eventType":"ChecklistItem","alias":null,"description":"Two-way binding change event for selectedItem","isSignal":true}],"module":{"name":"","imports":[],"exports":[],"declarations":[],"providers":[]},"types":{"typeAliases":[],"interfaces":[{"name":"ChecklistItem","properties":[{"name":"label","type":"string","optional":false},{"name":"value","type":"string","optional":false},{"name":"checked","type":"boolean","optional":false},{"name":"description","type":"string","optional":true},{"name":"hasLink","type":"boolean","optional":true},{"name":"disabled","type":"boolean","optional":true},{"name":"reselect","type":"boolean","optional":true}]}],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Checklist component, you need to import the component in your module:\n\n```typescript\nimport { ChecklistComponent } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n ChecklistComponent\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-checklist \n [items]=\"items\"\n label=\"My Checklist\"\n [applicationTheme]=\"theme\"\n footerButtonLabel=\"Continue\"\n (footerButtonClicked)=\"onButtonClick()\"\n (completed)=\"onCompleted()\">\n</ui-checklist>\n```","template":"@if (label()) {\n <h4 [attr.aria-label]=\"ariaLabel() ?? label()\">{{ label() }}</h4>\n}\n@if (description()) {\n <div aria-label=\"description\" class=\"description\" [innerHTML]=\"description()\"></div>\n}\n\n<ui-progress-bar [showPercentage]=\"true\" [progress]=\"progress()\"></ui-progress-bar>\n\n<div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ 'COMMON.PROGRESS' \| uiTranslate: { progress: progress() } \| async }}\n</div>\n\n<ui-divider size=\"small\" companyColor=\"#d3d3d3\"> </ui-divider>\n\n<div class=\"checklist-container\" data-testid=\"checklist-container\">\n @for (item of items(); track item.value + item.checked; let i = $index) {\n <div\n data-testid=\"checklist-item\"\n class=\"checklist-item\"\n [class.disabled]=\"item.disabled\"\n [class.checked]=\"item.checked\"\n [class.active]=\"item === selectedItem() && !autocheck()\"\n [attr.aria-labelledby]=\"'item-' + item.value\"\n [tabindex]=\"item?.disabled ? -1 : 0\"\n (click)=\"selectItem(item)\"\n (keydown)=\"keydownHandler($event, item)\"\n >\n <div class=\"content\">\n <ui-icon\n [name]=\"item.checked ? 'Check-in-line' : 'Circle-in-line'\"\n [filled]=\"item.checked\"\n class=\"checked\"\n [applicationTheme]=\"theme()\"\n [size]=\"'16'\"\n [color]=\"item.checked ? 'white' : item.disabled ? '#919191' : 'dark'\"\n ></ui-icon>\n <div class=\"label-and-description\">\n <span [id]=\"'item-' + item.value\" class=\"label\">{{ item.label }}</span>\n @if (item.description) {\n <span class=\"item-description\">{{ item.description }}</span>\n }\n </div>\n </div>\n\n @if (item.hasLink && !item.disabled) {\n <div class=\"navigation\">\n <ui-icon\n [tabindex]=\"-1\"\n class=\"link\"\n [name]=\"'Arrow-chevron-right-filled'\"\n [applicationTheme]=\"theme()\"\n [size]=\"'24'\"\n color=\"rebrand-black\"\n ></ui-icon>\n </div>\n }\n </div>\n }\n</div>\n@if (footerButtonLabel()) {\n <div class=\"action-btn\">\n <ui-button\n data-testid=\"checklist-footer-button\"\n [label]=\"footerButtonLabel()!\"\n [variant]=\"'link'\"\n [companyColor]=\"'#000'\"\n (buttonClickEvent)=\"footerButtonClick($event)\"\n ></ui-button>\n </div>\n}\n","queryGuide":{"roles":[],"ariaAttributes":["aria-label","aria-live","aria-labelledby"],"dataTestIds":["checklist-container","checklist-item","checklist-footer-button"],"materialComponents":[],"childUIComponents":["ui-progress-bar","ui-divider","ui-icon","ui-button"],"suggestedQueries":["screen.getByLabelText('label text')","screen.getByTestId('checklist-container')","screen.getByTestId('checklist-item')","screen.getByTestId('checklist-footer-button')"]},"filePath":"components/checklist/checklist.component.ts","supportsTheme":true,"lastModified":1775654032751.924},"datepicker":{"name":"DatepickerComponent","selector":"ui-datepicker","category":"forms","description":"To use the Datepicker component, you need to import the `DatepickerComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/datepicker","moduleName":"DatepickerComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Form field label","isSignal":false},{"name":"fieldName","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input name attribute","isSignal":false},{"name":"placeholder","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Input placeholder","isSignal":false},{"name":"id","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Input id","isSignal":false},{"name":"value","type":"Array<Date \| null> \| Date","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input value","isSignal":false},{"name":"isRange","type":"boolean","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Determines if input is date range","isSignal":false},{"name":"setSingleDateRangeOnBlur","type":"boolean","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Determines if on blur of calendar and no end date is selected, set the end date as the start date","isSignal":false},{"name":"showInnerErrors","type":"boolean","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Determines if inner errors should be shown","isSignal":false},{"name":"innerErrorsMessage","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Determines inner errors message","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Determines if input is disabled","isSignal":false},{"name":"required","type":"boolean","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input is required or not","isSignal":false},{"name":"hintMessage","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Hint text","isSignal":false},{"name":"updateOnBlur","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Input is update only on blur","isSignal":false},{"name":"showBottomContent","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Show reserved content below form field","isSignal":false},{"name":"fullWidth","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Set full width DatepickerComponent","isSignal":false},{"name":"minDate","type":"Date \| undefined","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Set min date for Datepicker","isSignal":false},{"name":"maxDate","type":"Date \| undefined","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Set max date for Datepicker","isSignal":false},{"name":"monthPicker","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Show and pick date without day","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"hideBuiltInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Hide in-build errors for Reactive Forms","isSignal":false},{"name":"hideLabelInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Hide label in errors","isSignal":false},{"name":"preventUserInput","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Prevent user input","isSignal":false},{"name":"companyColor","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Color of the option hover.\nDefaults to Test Gorilla primary color.","isSignal":false},{"name":"errors","type":"string[]","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input field errors","isSignal":false},{"name":"browserTimezone","type":"boolean","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Use browser timezone","isSignal":false}],"outputs":[{"name":"changed","eventType":"Date \| Date[]","alias":null,"description":"Event emitted when the value is change - when used outside of form","isSignal":false}],"module":{"name":"DatepickerComponentModule","imports":["CommonModule","MatFormFieldModule","MatInputModule","IconComponentModule","FormsModule","ReactiveFormsModule","MatDatepickerModule","MatNativeDateModule","UiTranslatePipe","NoDateFormatDirective","HasValidationErrorPipe","ValidationErrorModule"],"exports":["DatepickerComponent"],"declarations":["DatepickerComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[{"name":"Basic","template":"<ui-datepicker\n data-testid=\"datepicker\"\n ${argsToTemplate(args)}\n applicationTheme=\"${_theme}\"\n (changed)=\"changed($event)\"\n ></ui-datepicker>","props":{"label":"'Date'"}},{"name":"WithValue","template":"<ui-datepicker\n data-testid=\"datepicker\"\n ${argsToTemplate(args)}\n applicationTheme=\"${_theme}\"\n (changed)=\"changed($event)\"\n ></ui-datepicker>","props":{"label":"'Date'","value":"new Date(2025, 3, 15)"}},{"name":"WithRange","template":"<ui-datepicker\n data-testid=\"datepicker\"\n ${argsToTemplate(args)}\n applicationTheme=\"${_theme}\"\n (changed)=\"changed($event)\"\n ></ui-datepicker>","props":{"label":"'Date'","isRange":"true","browserTimezone":"true"}},{"name":"WithSingleDateRangeOnBlur","template":"<ui-datepicker\n data-testid=\"datepicker\"\n ${argsToTemplate(args)}\n applicationTheme=\"${_theme}\"\n (changed)=\"changed($event)\"\n ></ui-datepicker>","props":{"label":"'Date'","isRange":"true","setSingleDateRangeOnBlur":"true","browserTimezone":"true"}},{"name":"WithPlaceholder","template":"<ui-datepicker\n data-testid=\"datepicker\"\n ${argsToTemplate(args)}\n applicationTheme=\"${_theme}\"\n (changed)=\"changed($event)\"\n ></ui-datepicker>","props":{"label":"'Date'","placeholder":"'DD/MM/YYYY'"}},{"name":"WithErrors","template":"<ui-datepicker \n ${argsToTemplate(args)}\n applicationTheme=\"${_theme}\"\n (changed)=\"changed($event)\"\n ></ui-datepicker>","props":{"errors":"['Lorem ipsum dolor sit amet, consectetur adipiscing elit']"}},{"name":"WithDisable","template":"<ui-datepicker \n ${argsToTemplate(args)}\n applicationTheme=\"${_theme}\"\n (changed)=\"changed($event)\"\n ></ui-datepicker>","props":{"disabled":"true"}}],"documentation":"## How to use\n\nTo use the Datepicker component, you need to import the `DatepickerComponentModule` in your module:\n\n```typescript\nimport { DatepickerComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n DatepickerComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-datepicker\n label=\"Select Date\"\n [value]=\"selectedDate\"\n [isRange]=\"false\"\n [required]=\"true\"\n applicationTheme=\"light\"\n (changed)=\"onDateChanged($event)\">\n</ui-datepicker>\n```\n\nFor date ranges:\n\n```html\n<ui-datepicker\n label=\"Date Range\"\n [isRange]=\"true\"\n applicationTheme=\"light\"\n (changed)=\"onRangeChanged($event)\">\n</ui-datepicker>\n```\n\nThe datepicker component supports both single date selection and date ranges.","template":"@if (monthPicker) {\n <mat-form-field\n appNoDateFormat\n appearance=\"outline\"\n [color]=\"errorsLength \|\| (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n >\n <mat-label ngIf=\"label\">\n <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n </mat-label>\n\n <input\n matInput\n [id]=\"id!\"\n (blur)=\"onTouch()\"\n [placeholder]=\"placeholder!\"\n [matDatepicker]=\"dp\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [name]=\"fieldName!\"\n [min]=\"minDate\"\n [max]=\"maxDate\"\n [readonly]=\"preventUserInput\"\n (change)=\"onInput($event)\"\n (dateChange)=\"onValueChange($event.value)\"\n />\n <mat-datepicker-toggle matIconSuffix [for]=\"dp\">\n <ui-icon\n matDatepickerToggleIcon\n [applicationTheme]=\"applicationTheme\"\n name=\"Calendar\"\n size=\"24\"\n color=\"inherit\"\n ></ui-icon>\n </mat-datepicker-toggle>\n <mat-datepicker\n panelClass=\"month-picker\"\n #dp\n startView=\"multi-year\"\n (monthSelected)=\"setMonthAndYear($event, dp)\"\n ></mat-datepicker>\n\n <mat-hint class=\"info\" ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors \| hasValidationError))\"\n >{{ hint }}\n </mat-hint>\n <mat-hint class=\"error\" ngIf=\"errorsLength \|\| (ngControl?.touched && (ngControl?.errors \| hasValidationError))\">\n <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n </mat-hint>\n </mat-form-field>\n} @else {\n @if (isRange) {\n <mat-form-field\n appearance=\"outline\"\n [color]=\"errorsLength \|\| (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n class=\"range-datepicker\"\n >\n <mat-label ngIf=\"label\">\n <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n </mat-label>\n\n <mat-date-range-input [formGroup]=\"range\" [rangePicker]=\"rangePicker\" [min]=\"minDate\" [max]=\"maxDate\">\n <input\n matStartDate\n formControlName=\"start\"\n [placeholder]=\"translationContext + 'START_DATE' \| uiTranslate \| async\"\n (dateChange)=\"dateRangeChange()\"\n (blur)=\"setSingleDateRangeOnBlur && fillSingleDateRange(true)\"\n />\n <input\n matEndDate\n formControlName=\"end\"\n [placeholder]=\"translationContext + 'END_DATE' \| uiTranslate \| async\"\n (dateChange)=\"dateRangeChange()\"\n (blur)=\"setSingleDateRangeOnBlur && fillSingleDateRange(false)\"\n />\n </mat-date-range-input>\n <mat-datepicker-toggle matIconSuffix [for]=\"rangePicker\">\n <ui-icon\n matDatepickerToggleIcon\n [applicationTheme]=\"applicationTheme\"\n name=\"Calendar\"\n size=\"24\"\n color=\"inherit\"\n ></ui-icon>\n </mat-datepicker-toggle>\n <mat-date-range-picker #rangePicker (closed)=\"handleCloseRangePicker()\"></mat-date-range-picker>\n\n <mat-hint\n class=\"info\"\n ngIf=\"\n hint &&\n !_errors &&\n !(ngControl?.touched && (ngControl?.errors \| hasValidationError)) &&\n !(range?.invalid && showInnerErrors)\n \"\n >{{ hint }}\n </mat-hint>\n <mat-hint\n class=\"error\"\n ngIf=\"\n errorsLength \|\|\n (ngControl?.touched && (ngControl?.errors \| hasValidationError)) \|\|\n (range?.invalid && showInnerErrors)\n \"\n >\n <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n </mat-hint>\n </mat-form-field>\n } @else {\n <mat-form-field\n appearance=\"outline\"\n [color]=\"errorsLength \|\| (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n >\n <mat-label ngIf=\"label\">\n <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n </mat-label>\n <input\n matInput\n [matDatepicker]=\"picker\"\n (blur)=\"onTouch()\"\n (dateChange)=\"onValueChange($event.value)\"\n [id]=\"id!\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [name]=\"fieldName!\"\n [readonly]=\"preventUserInput\"\n [min]=\"minDate\"\n [max]=\"maxDate\"\n />\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n <ui-icon\n matDatepickerToggleIcon\n [applicationTheme]=\"applicationTheme\"\n name=\"Calendar\"\n size=\"24\"\n color=\"inherit\"\n ></ui-icon>\n </mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n\n <mat-hint\n class=\"info\"\n ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors \| hasValidationError))\"\n >{{ hint }}\n </mat-hint>\n <mat-hint class=\"error\" ngIf=\"errorsLength \|\| (ngControl?.touched && (ngControl?.errors \| hasValidationError))\">\n <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n </mat-hint>\n </mat-form-field>\n }\n}\n\n<ng-template #labelTpl>{{ label }}<span ngIf=\"required\"> </span></ng-template>\n<ng-template #hintsTpl>\n @if (errorsLength) {\n <div class=\"errors\" ngFor=\"let error of _errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" name=\"Error\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n }\n @if (ngControl && !hideBuiltInErrors) {\n <ui-validation-error [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n }\n @if (showInnerErrors) {\n @if (isRange) {\n <div class=\"errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" name=\"Error\"></ui-icon>\n <span [innerHTML]=\"innerErrorsMessage\"></span>\n </div>\n }\n }\n</ng-template>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":["mat-form-field","mat-label","mat-datepicker-toggle","mat-datepicker","mat-hint","mat-date-range-input","mat-date-range-picker"],"childUIComponents":["ui-icon","ui-validation-error"],"suggestedQueries":[]},"filePath":"components/datepicker/datepicker.component.ts","supportsTheme":true,"lastModified":1775654032759.924},"dialog":{"name":"DialogComponent","selector":"ui-dialog","category":"dialog","description":"To use the Dialog component, you need to import the `DialogComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/dialog","moduleName":"DialogComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"title","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Dialog title","isSignal":false},{"name":"showCloseButton","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Show close button","isSignal":false},{"name":"canCloseFn","type":"() => boolean","defaultValue":"() => true","required":false,"alias":null,"transform":null,"description":"Fuction called before dialgo is closed","isSignal":false},{"name":"secondaryButtonLabel","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Secondary button label","isSignal":false},{"name":"footerMessage","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Footer dialog message","isSignal":false},{"name":"primaryButtonLabel","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Primary button label","isSignal":false},{"name":"primaryButtonIconName","type":"IconName \| ''","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Primary button icon name","isSignal":false},{"name":"secondaryButtonType","type":"ButtonColor","defaultValue":"'ghost'","required":false,"alias":null,"transform":null,"description":"Secondary button type","isSignal":false},{"name":"primaryButtonType","type":"ButtonColor","defaultValue":"'primary'","required":false,"alias":null,"transform":null,"description":"Primary button type","isSignal":false},{"name":"primaryButtonDataTestId","type":"string \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"Primary button test id","isSignal":false},{"name":"secondaryButtonDataTestId","type":"string \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"Secondary button test id","isSignal":false},{"name":"companyColor","type":"string \| null","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Color of the dialog.\nDefaults to Test Gorilla primary color.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"disablePrimaryButton","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Disable primary button","isSignal":false},{"name":"disableClose","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Disable close button","isSignal":false},{"name":"shouldDisableButtons","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Disable button when canCloseFn is used","isSignal":false},{"name":"ariaLabelledby","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"ariaDescribedby","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"keyboardOpen","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Defines how modal was opened (with keyboard or not)","isSignal":false},{"name":"primaryButtonIconPosition","type":"ButtonIconPosition","defaultValue":"'left'","required":false,"alias":null,"transform":null,"description":"","isSignal":true}],"outputs":[{"name":"closeEvent","eventType":"Event","alias":null,"description":"","isSignal":false},{"name":"secondaryButtonClickEvent","eventType":"Event","alias":null,"description":"","isSignal":false},{"name":"primaryButtonClickEvent","eventType":"Event","alias":null,"description":"","isSignal":false}],"module":{"name":"DialogComponentModule","imports":["CommonModule","MatDialogModule","ButtonComponentModule","UiTranslatePipe"],"exports":["DialogComponent"],"declarations":["DialogComponent"],"providers":["{ provide: MAT_DIALOG_DATA, useValue: {} }","{ provide: MatDialogRef, useValue: {} }","DialogService"]},"types":{"typeAliases":[],"interfaces":[{"name":"DialogConfig","properties":[{"name":"applicationTheme","type":"ApplicationTheme","optional":true},{"name":"size","type":"DialogSize","optional":true},{"name":"panelClass","type":"string","optional":true},{"name":"extraData","type":"T","optional":true},{"name":"backdropClass","type":"string","optional":true},{"name":"keyboardOpen","type":"boolean","optional":true},{"name":"config","type":"MatDialogConfig","optional":true}]}],"enums":[]},"examples":[{"name":"Default","template":"<ui-dialog ${argsToTemplate(args)} applicationTheme=\"${_theme}\">\n <div>This is the content of the dialog</div>\n </ui-dialog>","props":{"title":"'Modal title'","primaryButtonLabel":"'Confirm'","secondaryButtonLabel":"'Cancel'"}},{"name":"WithPrimaryButtonIcon","template":"<ui-dialog ${argsToTemplate(args)} applicationTheme=\"${_theme}\">\n <div>This is the content of the dialog</div>\n </ui-dialog>","props":{"title":"'Modal title'","primaryButtonLabel":"'Confirm'","secondaryButtonLabel":"'Cancel'","primaryButtonIconName":"'Info-in-line'","primaryButtonIconPosition":"'right'"}}],"documentation":"## How to use\n\nTo use the Dialog component, you need to import the `DialogComponentModule` in your module:\n\n```typescript\nimport { DialogComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n DialogComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-dialog \n [title]=\"'Your Dialog Title'\" \n [primaryButtonLabel]=\"'Confirm'\"\n [secondaryButtonLabel]=\"'Cancel'\"\n [applicationTheme]=\"'light'\"\n (closeEvent)=\"onClose()\"\n (primaryButtonClickEvent)=\"onConfirm()\"\n (secondaryButtonClickEvent)=\"onCancel()\">\n Your dialog content goes here\n</ui-dialog>\n```","template":"<div class=\"dialog-container\" [attr.theme]=\"applicationTheme\">\n <div\n mat-dialog-title\n class=\"dialog-title\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n >\n <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n\n <!-- Default header content -->\n <ng-container ngIf=\"!hasCustomHeader\">\n <h3 class=\"bold\" id=\"labelledby\">{{ title }}</h3>\n <div ngIf=\"showCloseButton\">\n <ui-button\n #closeButton\n [variant]=\"'icon-button'\"\n [iconName]=\"'Close'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"('COMMON.CLOSE' \| uiTranslate \| async)!\"\n (click)=\"onClose($event)\"\n (buttonClickEvent)=\"dismiss()\"\n id=\"dialog-close-button\"\n ></ui-button>\n </div>\n </ng-container>\n\n <!-- Custom header content projection -->\n <ng-content select=\"[dialogHeader]\"></ng-content>\n </div>\n <mat-dialog-content>\n <ng-content></ng-content>\n </mat-dialog-content>\n <div\n mat-dialog-actions\n ngIf=\"secondaryButtonLabel !== '' \|\| primaryButtonLabel !== ''\"\n [class.dialog-action-w-message]=\"!!footerMessage\"\n >\n @if (footerMessage) {\n <div class=\"actions-footer-message\">{{ footerMessage }}</div>\n }\n <ui-button\n ngIf=\"!!secondaryButtonLabel\"\n [companyColor]=\"companyColor\"\n [variant]=\"secondaryButtonType\"\n [applicationTheme]=\"applicationTheme\"\n [label]=\"secondaryButtonLabel\"\n [attr.data-testid]=\"secondaryButtonDataTestId\"\n (click)=\"onSecondaryButtonClick($event)\"\n ></ui-button>\n <ui-button\n ngIf=\"!!primaryButtonLabel\"\n [iconPosition]=\"primaryButtonIconPosition()\"\n [iconName]=\"primaryButtonIconName ? primaryButtonIconName : undefined\"\n [variant]=\"primaryButtonType\"\n [disabled]=\"disableButtons \|\| disablePrimaryButton\"\n [applicationTheme]=\"applicationTheme\"\n (click)=\"onPrimaryButtonClick($event)\"\n [label]=\"primaryButtonLabel\"\n [companyColor]=\"companyColor\"\n [attr.data-testid]=\"primaryButtonDataTestId\"\n (buttonClickEvent)=\"dismiss()\"\n ></ui-button>\n </div>\n\n <!-- This is announcement for screen reader that dialog was closed-->\n <div aria-live=\"assertive\" role=\"alert\" style=\"position: absolute; left: -9999px\">\n <span ngIf=\"modalClosed\">{{ 'DIALOG.CLOSED' \| uiTranslate \| async }}</span>\n </div>\n</div>\n","queryGuide":{"roles":["alert"],"ariaAttributes":["aria-live","aria-modal","aria-labelledby","aria-describedby"],"dataTestIds":[],"materialComponents":["mat-dialog-content"],"childUIComponents":["ui-button"],"suggestedQueries":["screen.getByRole('alert')"]},"filePath":"components/dialog/dialog.component.ts","supportsTheme":true,"lastModified":1775654032760.924},"confirm-dialog":{"name":"ConfirmDialogComponent","selector":"ui-confirm-dialog","category":"dialog","description":"ConfirmDialogComponent component","importPath":"@testgorilla/tgo-ui/components/confirm-dialog","moduleName":"ConfirmDialogComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false}],"outputs":[],"module":{"name":"ConfirmDialogComponentModule","imports":["CommonModule","MatDialogModule","ButtonComponentModule","DialogComponentModule","UiTranslatePipe"],"exports":["ConfirmDialogComponent"],"declarations":["ConfirmDialogComponent"],"providers":["{ provide: MAT_DIALOG_DATA, useValue: {} }","{ provide: MatDialogRef, useValue: {} }"]},"types":{"typeAliases":[],"interfaces":[{"name":"ConfirmDialogData","properties":[{"name":"message","type":"string","optional":true},{"name":"confirmButtonText","type":"string","optional":true},{"name":"cancelButtonText","type":"string","optional":true},{"name":"title","type":"string","optional":true},{"name":"color","type":"string","optional":true},{"name":"language","type":"Language","optional":true},{"name":"messageHtml","type":"string","optional":true},{"name":"showCloseButton","type":"boolean","optional":true},{"name":"showSecondaryButton","type":"boolean","optional":true},{"name":"primaryButtonType","type":"ButtonColor","optional":true},{"name":"primaryButtonIconPosition","type":"ButtonIconPosition","optional":true},{"name":"secondaryButtonType","type":"ButtonColor","optional":true},{"name":"primaryButtonIconName","type":"IconName","optional":true},{"name":"primaryButtonDataTestId","type":"string","optional":true},{"name":"secondaryButtonDataTestId","type":"string","optional":true},{"name":"onConfirm","type":"() => void","optional":true}]}],"enums":[]},"examples":[],"documentation":"","template":"<ng-container>\n <ui-dialog\n [title]=\"title ?? ('COMMON.CONFIRM' \| uiTranslate \| async)!\"\n [primaryButtonLabel]=\"confirmButtonText ?? ('COMMON.YES' \| uiTranslate \| async)!\"\n [secondaryButtonLabel]=\"\n showSecondaryButton ? (cancelButtonText ?? ('COMMON.CANCEL' \| uiTranslate \| async)!) : undefined\n \"\n (primaryButtonClickEvent)=\"onConfirm()\"\n (secondaryButtonClickEvent)=\"dialogRef.close(false)\"\n (closeEvent)=\"dialogRef.close(null)\"\n [primaryButtonType]=\"primaryButtonType\"\n [primaryButtonIconName]=\"primaryButtonIconName\"\n [secondaryButtonType]=\"secondaryButtonType\"\n [applicationTheme]=\"applicationTheme\"\n [showCloseButton]=\"showCloseButton\"\n [companyColor]=\"color\"\n [primaryButtonDataTestId]=\"primaryButtonDataTestId\"\n [secondaryButtonDataTestId]=\"secondaryButtonDataTestId\"\n [primaryButtonIconPosition]=\"primaryButtonIconPosition\"\n >\n <div class=\"message\">{{ confirmMessage }}</div>\n @if (confirmMessageHtml) {\n <div class=\"message\" [innerHTML]=\"confirmMessageHtml\"></div>\n }\n </ui-dialog>\n</ng-container>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-dialog"],"suggestedQueries":[]},"filePath":"components/confirm-dialog/confirm-dialog.component.ts","supportsTheme":true,"lastModified":1775654032759.924},"dialog-custom":{"name":"DialogCustomComponent","selector":"ui-dialog-custom","category":"dialog","description":"To use the Custom Dialog component, you need to import the `DialogCustomComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/dialog-custom","moduleName":"DialogCustomComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false}],"outputs":[],"module":{"name":"DialogCustomComponentModule","imports":["CommonModule","DialogComponentModule","ButtonComponentModule"],"exports":["DialogCustomComponent"],"declarations":["DialogCustomComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Custom Dialog component, you need to import the `DialogCustomComponentModule` in your module:\n\n```typescript\nimport { DialogCustomComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n DialogCustomComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component with the DialogService:\n\n```typescript\nimport { DialogService } from '@testgorilla/tgo-ui';\n\n@Component({\n // ...\n})\nexport class YourComponent {\n constructor(private dialogService: DialogService) {}\n\n openCustomDialog(): void {\n const dialogConfig = {\n applicationTheme: 'light',\n size: 'small',\n extraData: {\n type: 'custom-header',\n }\n };\n\n this.dialogService\n .open(DialogCustomComponent, dialogConfig)\n .afterClosed()\n .subscribe(result => {\n // Handle dialog close\n });\n }\n}\n```","template":"<ui-dialog\n [title]=\"data.title\"\n [showCloseButton]=\"data.showCloseButton\"\n [applicationTheme]=\"applicationTheme\"\n [primaryButtonLabel]=\"'OK'\"\n [secondaryButtonLabel]=\"'Cancel'\"\n [canCloseFn]=\"canClose\"\n [keyboardOpen]=\"data.keyboardOpen\"\n [footerMessage]=\"data.footerMessage\"\n>\n <!-- Custom header content -->\n <div ngIf=\"data.type === 'custom-header'\" dialogHeader class=\"custom-header\">\n <div class=\"button-group\">\n <ui-button label=\"Action 1\" [variant]=\"'ghost'\" [applicationTheme]=\"applicationTheme\"></ui-button>\n <ui-button label=\"Action 2\" [variant]=\"'primary'\" [applicationTheme]=\"applicationTheme\"></ui-button>\n </div>\n </div>\n\n <!-- Dialog content -->\n <div class=\"dialog-content\">\n <p ngIf=\"data.type === 'default'\" class=\"dialog-message\">\n This is a default dialog example with a standard header.\n </p>\n <p ngIf=\"data.type === 'custom-header'\" class=\"dialog-message\">\n This dialog uses a custom header with content projection.\n </p>\n <p class=\"dialog-message\">The dialog will be closeable in 2 seconds (demonstrating canCloseFn).</p>\n </div>\n</ui-dialog>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-dialog","ui-button"],"suggestedQueries":[]},"filePath":"components/dialog-custom/dialog-custom.component.ts","supportsTheme":true,"lastModified":1775654032759.924},"divider":{"name":"DividerComponent","selector":"ui-divider","category":"divider","description":"To use the Divider component, you need to import the `DividerComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/divider","moduleName":"DividerComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"size","type":"DividerSize","defaultValue":"'large'","required":false,"alias":null,"transform":null,"description":"Divider size","isSignal":false},{"name":"companyColor","type":"string \| null","defaultValue":"'#46A997'","required":false,"alias":null,"transform":null,"description":"Determines whether the checkbox color.\nDefault: Test Gorilla primary color.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Text content in the center of the divider","isSignal":false}],"outputs":[],"module":{"name":"DividerComponentModule","imports":["CommonModule","MatDividerModule"],"exports":["DividerComponent"],"declarations":["DividerComponent"],"providers":[]},"types":{"typeAliases":[{"name":"DividerSize","value":"'small' \| 'large'"}],"interfaces":[],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Divider component, you need to import the `DividerComponentModule` in your module:\n\n```typescript\nimport { DividerComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n DividerComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-divider \n [size]=\"'large'\" \n [applicationTheme]=\"theme\" \n [label]=\"'Optional Label'\">\n</ui-divider>\n```","template":"<div class=\"ui-divider-wrapper\">\n <ng-container ngIf=\"!label; else withLabel\">\n <mat-divider aria-hidden=\"true\" [class]=\"applicationTheme\" [ngClass]=\"size\"></mat-divider>\n </ng-container>\n\n <ng-template #withLabel>\n <div class=\"container\">\n <div class=\"line\" aria-hidden=\"true\"><mat-divider [class]=\"applicationTheme\" [ngClass]=\"size\"></mat-divider></div>\n <div [class]=\"'label' + ' ' + size\">{{ label }}</div>\n <div class=\"line\" aria-hidden=\"true\"><mat-divider [class]=\"applicationTheme\" [ngClass]=\"size\"></mat-divider></div>\n </div>\n </ng-template>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":["aria-hidden"],"dataTestIds":[],"materialComponents":["mat-divider"],"childUIComponents":[],"suggestedQueries":[]},"filePath":"components/divider/divider.component.ts","supportsTheme":true,"lastModified":1775654032760.924},"donut-chart":{"name":"DonutChartComponent","selector":"ui-donut-chart","category":"charts","description":"DonutChartComponent component","importPath":"@testgorilla/tgo-ui/components/donut-chart","moduleName":"DonutChartComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"donutChartData","type":"DonutChartData","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"","isSignal":true}],"outputs":[],"module":{"name":"DonutChartComponentModule","imports":["NgChartsModule"],"exports":["DonutChartComponent"],"declarations":["DonutChartComponent"],"providers":[]},"types":{"typeAliases":[{"name":"DonutChartData","value":"{\n labels: string[];\n data: number[];\n backgroundColor?: Color[];\n}"}],"interfaces":[],"enums":[]},"examples":[],"documentation":"","template":"<div style=\"height: 200px\">\n <canvas baseChart [data]=\"chartData()\" type=\"doughnut\" [options]=\"donutChartOptions\" [plugins]=\"donutChartPlugins\">\n </canvas>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":[],"suggestedQueries":[]},"filePath":"components/donut-chart/donut-chart.component.ts","supportsTheme":true,"lastModified":1775654032761.924},"dropdown":{"name":"DropdownComponent","selector":"ui-dropdown","category":"forms","description":"To use the Dropdown component, you need to import the `DropdownComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/dropdown","moduleName":"DropdownComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Text content will be applied to the input element if present.","isSignal":false},{"name":"labelIcon","type":"IconName","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Icon to display alongside the label","isSignal":false},{"name":"isAIVariant","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Indicates if this field is filled by AI","isSignal":false},{"name":"name","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input name attribute","isSignal":false},{"name":"placeholder","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Placeholder to be shown if no value has been selected.","isSignal":false},{"name":"id","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Unique id of the element.","isSignal":false},{"name":"value","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input value","isSignal":false},{"name":"errors","type":"string[]","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Whether the component is in an error state.","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether the component is disabled.\nDefault: false.","isSignal":false},{"name":"valueList","type":"OptionType[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"List of options.","isSignal":false},{"name":"allowClear","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Whether the user should be allowed to clear the values.\nDefault: true.","isSignal":false},{"name":"allowMultipleSelection","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"This will allow the user to select multiple values at once.\nDefault: true.","isSignal":false},{"name":"required","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether the component is required.\nDefault: false.","isSignal":false},{"name":"showBottomContent","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Show reserved content below form field","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"hideBuiltInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Hide in build errors for Reactive Forms","isSignal":false},{"name":"hideLabelInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Hide label in errors","isSignal":false},{"name":"textField","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"valueField","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"hasError","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"companyColor","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Color of the option hover.\nDefaults to Test Gorilla primary color.","isSignal":false},{"name":"panelClass","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Class to be applied to the panel.","isSignal":false}],"outputs":[{"name":"closed","eventType":"void","alias":null,"description":"","isSignal":false},{"name":"opened","eventType":"void","alias":null,"description":"","isSignal":false}],"module":{"name":"DropdownComponentModule","imports":["CommonModule","MatFormFieldModule","MatInputModule","IconComponentModule","FormsModule","ReactiveFormsModule","ButtonComponentModule","MatSelectModule","UiTranslatePipe","ValidationErrorModule","HasValidationErrorPipe"],"exports":["DropdownComponent"],"declarations":["DropdownComponent"],"providers":[]},"types":{"typeAliases":[{"name":"OptionType","value":"{\n value?: string;\n displayValue?: string;\n sectionTitle?: string;\n isAISuggested?: boolean;\n} & Record<string, any>"}],"interfaces":[],"enums":[]},"examples":[{"name":"Default","template":"<ui-dropdown\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [valueList]=\"valueList\"\n [valueField]=\"valueField\"\n applicationTheme=\"${_theme}\">\n <ng-template #customSelectedOptionTemplate let-option>\n <div>\n <div>\n Selected: {{ option?.name }}\n </div>\n </div>\n </ng-template>\n\n <ng-template #customOptionTemplate let-option>\n <div>\n <div>\n <div>{{ option.name }} - {{ option.description }}</div>\n </div>\n </div>\n </ng-template>\n </ui-dropdown>","props":{"placeholder":"'Placeholder'","label":"'Label'","valueList":"Options","allowMultipleSelection":"false"}},{"name":"WithOptionSection","template":"<ui-dropdown\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [valueList]=\"valueList\"\n [valueField]=\"valueField\"\n applicationTheme=\"${_theme}\">\n <ng-template #customSelectedOptionTemplate let-option>\n <div>\n <div>\n Selected: {{ option?.name }}\n </div>\n </div>\n </ng-template>\n\n <ng-template #customOptionTemplate let-option>\n <div>\n <div>\n <div>{{ option.name }} - {{ option.description }}</div>\n </div>\n </div>\n </ng-template>\n </ui-dropdown>","props":{"placeholder":"'Placeholder'","label":"'Label'","valueList":"OptionsWithSection","allowMultipleSelection":"false"}},{"name":"Disabled","template":"<ui-dropdown\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [valueList]=\"valueList\"\n [valueField]=\"valueField\"\n applicationTheme=\"${_theme}\">\n <ng-template #customSelectedOptionTemplate let-option>\n <div>\n <div>\n Selected: {{ option?.name }}\n </div>\n </div>\n </ng-template>\n\n <ng-template #customOptionTemplate let-option>\n <div>\n <div>\n <div>{{ option.name }} - {{ option.description }}</div>\n </div>\n </div>\n </ng-template>\n </ui-dropdown>","props":{"placeholder":"'Placeholder'","label":"'Label'","valueList":"Options","disabled":"true"}},{"name":"Multiple","template":"<ui-dropdown\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [valueList]=\"valueList\"\n [valueField]=\"valueField\"\n applicationTheme=\"${_theme}\">\n <ng-template #customSelectedOptionTemplate let-option>\n <div>\n <div>\n Selected: {{ option?.name }}\n </div>\n </div>\n </ng-template>\n\n <ng-template #customOptionTemplate let-option>\n <div>\n <div>\n <div>{{ option.name }} - {{ option.description }}</div>\n </div>\n </div>\n </ng-template>\n </ui-dropdown>","props":{"placeholder":"'Placeholder'","label":"'Label'","valueList":"Options","allowMultipleSelection":"true"}},{"name":"MultipleWithErrors","template":"<ui-dropdown\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [valueList]=\"valueList\"\n [valueField]=\"valueField\"\n applicationTheme=\"${_theme}\">\n <ng-template #customSelectedOptionTemplate let-option>\n <div>\n <div>\n Selected: {{ option?.name }}\n </div>\n </div>\n </ng-template>\n\n <ng-template #customOptionTemplate let-option>\n <div>\n <div>\n <div>{{ option.name }} - {{ option.description }}</div>\n </div>\n </div>\n </ng-template>\n </ui-dropdown>","props":{"placeholder":"'Placeholder'","label":"'Label'","valueList":"Options","allowMultipleSelection":"true","errors":"['Helper text']"}},{"name":"WithErrors","template":"<ui-dropdown\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [valueList]=\"valueList\"\n [valueField]=\"valueField\"\n applicationTheme=\"${_theme}\">\n <ng-template #customSelectedOptionTemplate let-option>\n <div>\n <div>\n Selected: {{ option?.name }}\n </div>\n </div>\n </ng-template>\n\n <ng-template #customOptionTemplate let-option>\n <div>\n <div>\n <div>{{ option.name }} - {{ option.description }}</div>\n </div>\n </div>\n </ng-template>\n </ui-dropdown>","props":{"placeholder":"'Placeholder'","label":"'Label'","valueList":"Options","errors":"['Helper text']"}},{"name":"WithoutLabel","template":"<ui-dropdown\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [valueList]=\"valueList\"\n [valueField]=\"valueField\"\n applicationTheme=\"${_theme}\">\n <ng-template #customSelectedOptionTemplate let-option>\n <div>\n <div>\n Selected: {{ option?.name }}\n </div>\n </div>\n </ng-template>\n\n <ng-template #customOptionTemplate let-option>\n <div>\n <div>\n <div>{{ option.name }} - {{ option.description }}</div>\n </div>\n </div>\n </ng-template>\n </ui-dropdown>","props":{"placeholder":"'Label'","valueList":"Options","errors":"['Helper text']"}},{"name":"WithDisplayValue","template":"<ui-dropdown\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [valueList]=\"valueList\"\n [valueField]=\"valueField\"\n applicationTheme=\"${_theme}\">\n <ng-template #customSelectedOptionTemplate let-option>\n <div>\n <div>\n Selected: {{ option?.name }}\n </div>\n </div>\n </ng-template>\n\n <ng-template #customOptionTemplate let-option>\n <div>\n <div>\n <div>{{ option.name }} - {{ option.description }}</div>\n </div>\n </div>\n </ng-template>\n </ui-dropdown>","props":{"placeholder":"'Label'","label":"'Label'","valueList":"OptionsWithDisplayValue"}},{"name":"WithCustomField","template":"<ui-dropdown\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [valueList]=\"valueList\"\n [valueField]=\"valueField\"\n applicationTheme=\"${_theme}\">\n <ng-template #customSelectedOptionTemplate let-option>\n <div>\n <div>\n Selected: {{ option?.name }}\n </div>\n </div>\n </ng-template>\n\n <ng-template #customOptionTemplate let-option>\n <div>\n <div>\n <div>{{ option.name }} - {{ option.description }}</div>\n </div>\n </div>\n </ng-template>\n </ui-dropdown>","props":{"placeholder":"'Label'","label":"'Label'","textField":"'myName'","valueField":"'myValue'","valueList":"OPTIONS_CUSTOM_FIELDS"}},{"name":"WithCustomTemplate","template":"<ui-dropdown\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [valueList]=\"valueList\"\n [valueField]=\"valueField\"\n applicationTheme=\"${_theme}\">\n <ng-template #customSelectedOptionTemplate let-option>\n <div>\n <div>\n Selected: {{ option?.name }}\n </div>\n </div>\n </ng-template>\n\n <ng-template #customOptionTemplate let-option>\n <div>\n <div>\n <div>{{ option.name }} - {{ option.description }}</div>\n </div>\n </div>\n </ng-template>\n </ui-dropdown>","props":{"placeholder":"'Select an option'","label":"'Category'","labelIcon":"'Settings'","valueList":"Options","allowMultipleSelection":"false"}}],"documentation":"## How to use\n\nTo use the Dropdown component, you need to import the `DropdownComponentModule` in your module:\n\n```typescript\nimport { DropdownComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n DropdownComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-dropdown\n label=\"Country\"\n placeholder=\"Select a country\"\n [valueList]=\"countries\"\n [allowMultipleSelection]=\"false\"\n applicationTheme=\"light\"\n (valueChange)=\"onCountrySelected($event)\">\n</ui-dropdown>\n```\n\nFor custom display values:\n\n```html\n<ui-dropdown\n label=\"Country\"\n [valueList]=\"countries\"\n textField=\"name\"\n valueField=\"code\"\n applicationTheme=\"light\">\n</ui-dropdown>\n```\n\nThe dropdown component supports single and multiple selection, sections, custom fields, and custom templates.","template":"<ng-container>\n <mat-form-field\n appearance=\"outline\"\n [attr.theme]=\"applicationTheme\"\n [color]=\"errorsLength \|\| (ngControl?.errors && ngControl?.touched) \|\| hasError ? 'warn' : 'accent'\"\n [ngClass]=\"{\n 'hide-bottom-content': !showBottomContent,\n 'without-label': !label,\n 'keyboard-focused': keyboardFocused(),\n 'has-label': !!label,\n }\"\n >\n <mat-label class=\"label-with-icon\">\n @if (isAIVariant \|\| labelIcon) {\n <ui-icon [name]=\"isAIVariant ? 'Sparkle-in-line' : labelIcon!\" [size]=\"'16'\" class=\"label-icon\"></ui-icon>\n }\n {{ label }}\n @if (required) {\n <span></span>\n }\n </mat-label>\n <mat-select\n (closed)=\"onClosed()\"\n (opened)=\"onOpened()\"\n #matSelect\n [id]=\"id!\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [panelClass]=\"'ui-dropdown-list' + ' ' + applicationTheme + (panelClass ? ' ' + panelClass : '')\"\n [disabled]=\"disabled\"\n [multiple]=\"!!allowMultipleSelection\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n (selectionChange)=\"onChangeOption($event)\"\n [attr.name]=\"name\"\n data-testid=\"ui-dropdown-select\"\n >\n @if (customSelectedOptionTemplate && valueField) {\n <mat-select-trigger>\n <ng-container\n [ngTemplateOutlet]=\"customSelectedOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: valueList.find(findValueByValueField) }\"\n ></ng-container>\n </mat-select-trigger>\n }\n\n @if (customOptionTemplate && valueField) {\n @for (item of valueList; track item[valueField]) {\n <mat-option [value]=\"item[valueField]\">\n <ng-container\n [ngTemplateOutlet]=\"customOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n ></ng-container>\n </mat-option>\n }\n } @else {\n <div class=\"mat-option-section\" ngFor=\"let section of valueList\">\n <span ngIf=\"section.sectionTitle\" class=\"section-title\">{{ section.sectionTitle }}</span>\n <mat-option\n ngIf=\"section\"\n #matOption\n [value]=\"valueField ? section[valueField] : textField && !valueField ? section : section.value\"\n >\n <div class=\"option-content\">\n <span class=\"option-text\">{{\n textField ? section[textField] : (section.displayValue ?? section.value)\n }}</span>\n @if (section.isAISuggested) {\n <ui-icon [name]=\"'Sparkle-in-line'\" [size]=\"'16'\"> </ui-icon>\n }\n </div>\n </mat-option>\n </div>\n }\n </mat-select>\n <ui-button\n [ariaLabel]=\"('COMMON.CLEAR' \| uiTranslate \| async)!\"\n ngIf=\"allowClear && !matSelect.empty\"\n variant=\"secondary\"\n [justIcon]=\"true\"\n class=\"clear\"\n [iconName]=\"applicationTheme === 'classic' ? 'Close' : 'Close-filled'\"\n [label]=\"('COMMON.CLEAR' \| uiTranslate \| async)!\"\n (click)=\"clearValue($event)\"\n ></ui-button>\n <ui-icon\n class=\"chevron-icon\"\n ngIf=\"!matSelect.panelOpen\"\n size=\"24\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-filled'\"\n ></ui-icon>\n <ui-icon\n class=\"chevron-icon\"\n ngIf=\"matSelect.panelOpen\"\n size=\"24\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Arrow_up' : 'Arrow-chevron-up-filled'\"\n ></ui-icon>\n <mat-hint class=\"error\" ngIf=\"errorsLength \|\| (ngControl?.errors \| hasValidationError)\">\n <ng-container ngIf=\"errorsLength\">\n <div class=\"errors\" ngFor=\"let error of errors\">\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"\n ></ui-icon\n >{{ error }}\n </div>\n </ng-container>\n\n <ui-validation-error\n ngIf=\"ngControl && !hideBuiltInErrors\"\n [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors ? null : label\"\n ></ui-validation-error>\n </mat-hint>\n </mat-form-field>\n</ng-container>\n","queryGuide":{"roles":["combobox","option"],"ariaAttributes":[],"dataTestIds":["ui-dropdown-select"],"materialComponents":["mat-form-field","mat-label","mat-select","mat-select-trigger","mat-option","mat-hint"],"childUIComponents":["ui-icon","ui-button","ui-validation-error"],"suggestedQueries":["screen.getByRole('combobox')","screen.getByRole('option')","// Open dropdown: await userEvent.click(screen.getByRole('combobox'))","// Select option: await userEvent.click(await screen.findByText('Option'))","screen.getByTestId('ui-dropdown-select')"]},"filePath":"components/dropdown/dropdown.component.ts","supportsTheme":true,"lastModified":1775654032761.924},"elevation-shadow":{"name":"ElevationShadowComponent","selector":"ui-elevation-shadow","category":"elevation-shadow","description":"To use the Elevation Shadow component, you need to import the `ElevationShadowComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/elevation-shadow","moduleName":"ElevationShadowComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"elevationType","type":"Elevation","defaultValue":"ElevationType.DEFAULT","required":false,"alias":null,"transform":null,"description":"The type of elevation shadow.\nDefault: default.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false}],"outputs":[],"module":{"name":"ElevationShadowComponentModule","imports":["CommonModule"],"exports":["ElevationShadowComponent"],"declarations":["ElevationShadowComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[{"name":"Default","template":"<ui-elevation-shadow ${argsToTemplate(args)} [applicationTheme]=\"_theme\">\n <p class=\"text\"></p>\n </ui-elevation-shadow>","props":{"elevationType":"ElevationType.DEFAULT"}},{"name":"Modal","template":"<ui-elevation-shadow ${argsToTemplate(args)} [applicationTheme]=\"_theme\">\n <p class=\"text\"></p>\n </ui-elevation-shadow>","props":{"elevationType":"ElevationType.MODAL"}}],"documentation":"## How to use\n\nTo use the Elevation Shadow component, you need to import the `ElevationShadowComponentModule` in your module:\n\n```typescript\nimport { ElevationShadowComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n ElevationShadowComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-elevation-shadow [elevationType]=\"'default'\" [applicationTheme]=\"theme\">\n <div>Content goes here</div>\n</ui-elevation-shadow>\n```","template":"<div class=\"elevation-shadow\" [ngClass]=\"elevationType\" [attr.theme]=\"applicationTheme\">\n <ng-content></ng-content>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":[],"suggestedQueries":[]},"filePath":"components/elevation-shadow/elevation-shadow.component.ts","supportsTheme":true,"lastModified":1775654032762.924},"empty-state":{"name":"EmptyStateComponent","selector":"ui-empty-state","category":"empty-state","description":"To use the Empty State component, you need to import the `EmptyStateComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/empty-state","moduleName":"EmptyStateComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"showIllustration","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"illustrationVariant","type":"IllustrationVariant","defaultValue":"'Empty-search'","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"icon","type":"IconName","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"emptyStateVariant","type":"EmptyStateVariant","defaultValue":"'desktop'","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"title","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"bodyText","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"primaryButtonText","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"primaryButtonVariant","type":"ButtonVariant","defaultValue":"'pink'","required":false,"alias":null,"transform":null,"description":"Primary button variant - only for new theme.","isSignal":false},{"name":"generalButtonVariation","type":"ButtonColor","defaultValue":"'primary'","required":false,"alias":null,"transform":null,"description":"General button variation - only for new theme.","isSignal":false},{"name":"primaryButtonIconName","type":"IconName","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"primaryButtonIconPosition","type":"ButtonIconPosition","defaultValue":"'left'","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"secondaryButtonText","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"secondaryButtonVariant","type":"ButtonVariant","defaultValue":"'black'","required":false,"alias":null,"transform":null,"description":"Secondary button variant - only for new theme.","isSignal":false},{"name":"secondaryButtonIconName","type":"IconName","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"secondaryButtonIconPosition","type":"ButtonIconPosition","defaultValue":"'left'","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"tertiaryButtonText","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"tertiaryButtonVariant","type":"ButtonVariant","defaultValue":"'ghost'","required":false,"alias":null,"transform":null,"description":"Tertiary button variant - only for new theme.","isSignal":false},{"name":"tertiaryButtonIconName","type":"IconName","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"tertiaryButtonIconPosition","type":"ButtonIconPosition","defaultValue":"'left'","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"generalVariationButtonText","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"generalVariationButtonSize","type":"ButtonSize","defaultValue":"'big'","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"generalVariationButtonIconName","type":"IconName","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"generalVariationButtonIconPosition","type":"ButtonIconPosition","defaultValue":"'left'","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"generalVariationButtonDisabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false}],"outputs":[{"name":"primaryButtonClick","eventType":"Event","alias":null,"description":"Event triggered when the primary button is clicked.","isSignal":false},{"name":"secondaryButtonClick","eventType":"Event","alias":null,"description":"Event triggered when the secondary button is clicked.","isSignal":false},{"name":"tertiaryButtonClick","eventType":"Event","alias":null,"description":"Event triggered when the tertiary button is clicked.","isSignal":false},{"name":"generalVariationButtonClick","eventType":"Event","alias":null,"description":"Event triggered when the general variation button is clicked.","isSignal":false}],"module":{"name":"EmptyStateComponentModule","imports":["CommonModule","IconComponentModule","NgOptimizedImage","ButtonComponentModule","UiTranslatePipe"],"exports":["EmptyStateComponent"],"declarations":["EmptyStateComponent"],"providers":[]},"types":{"typeAliases":[{"name":"ButtonVariant","value":"'pink' \| 'black' \| 'ghost'"},{"name":"IllustrationVariant","value":"'Empty-search' \| 'Lost-found-404' \| 'Disconnected' \| 'Messages'"},{"name":"EmptyStateVariant","value":"'mobile' \| 'desktop'"}],"interfaces":[],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Empty State component, you need to import the `EmptyStateComponentModule` in your module:\n\n```typescript\nimport { EmptyStateComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n EmptyStateComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-empty-state\n [title]=\"'No results found'\"\n [bodyText]=\"'Try a different search term or adjust your filters.'\"\n [showIllustration]=\"true\"\n [illustrationVariant]=\"'Empty-search'\"\n [primaryButtonText]=\"'Clear filters'\"\n [applicationTheme]=\"theme\"\n (primaryButtonClick)=\"onPrimaryButtonClick($event)\">\n</ui-empty-state>\n```","template":"<ng-container>\n <div class=\"empty-state-container\" [attr.theme]=\"applicationTheme\" [class.mobile]=\"emptyStateVariant === 'mobile'\">\n <div class=\"illustration\" ngIf=\"showIllustration\" [attr.aria-hidden]=\"true\">\n <img\n ngIf=\"applicationTheme === 'classic'\"\n [attr.src]=\"'/images/empty-state-default.svg'\"\n [width]=\"160\"\n [height]=\"160\"\n alt=\"illustration\"\n />\n <img\n ngIf=\"applicationTheme !== 'classic'\"\n [attr.src]=\"'/icons/rebrand/' + illustrationVariant + '-in-line.svg'\"\n [width]=\"160\"\n [height]=\"160\"\n alt=\"illustration\"\n />\n </div>\n\n <div class=\"icon\" ngIf=\"icon\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"icon\" size=\"40\"></ui-icon>\n </div>\n\n <div class=\"text-content\">\n <div class=\"title\">{{ title ? title : ('COMMON.NO_RESULTS' \| uiTranslate \| async) }}</div>\n @if (bodyText) {\n <div class=\"body-text\" [innerHTML]=\"bodyText\"></div>\n }\n </div>\n\n <div class=\"actions\">\n <ui-button\n [fullWidth]=\"emptyStateVariant === 'mobile'\"\n [applicationTheme]=\"buttonApplicationTheme\"\n class=\"action-button\"\n ngIf=\"primaryButtonText\"\n [variant]=\"applicationTheme !== 'classic' ? getVariant(primaryButtonVariant) : 'primary'\"\n [label]=\"primaryButtonText\"\n [iconName]=\"primaryButtonIconName\"\n [iconPosition]=\"primaryButtonIconPosition\"\n (buttonClickEvent)=\"onPrimaryButtonClick($event)\"\n ></ui-button>\n <ui-button\n [fullWidth]=\"emptyStateVariant === 'mobile'\"\n [applicationTheme]=\"buttonApplicationTheme\"\n class=\"action-button\"\n ngIf=\"secondaryButtonText\"\n [variant]=\"applicationTheme !== 'classic' ? getVariant(secondaryButtonVariant) : 'secondary'\"\n [label]=\"secondaryButtonText\"\n [iconName]=\"secondaryButtonIconName\"\n [iconPosition]=\"secondaryButtonIconPosition\"\n (buttonClickEvent)=\"onSecondaryButtonClick($event)\"\n ></ui-button>\n <ui-button\n [fullWidth]=\"emptyStateVariant === 'mobile'\"\n [applicationTheme]=\"buttonApplicationTheme\"\n class=\"action-button\"\n ngIf=\"tertiaryButtonText\"\n [variant]=\"applicationTheme !== 'classic' ? getVariant(tertiaryButtonVariant) : 'tertiary'\"\n [label]=\"tertiaryButtonText\"\n [iconName]=\"tertiaryButtonIconName\"\n [iconPosition]=\"tertiaryButtonIconPosition\"\n (buttonClickEvent)=\"onTertiaryButtonClick($event)\"\n ></ui-button>\n @if (generalVariationButtonText) {\n <ui-button\n class=\"action-button\"\n [fullWidth]=\"emptyStateVariant === 'mobile'\"\n [applicationTheme]=\"buttonApplicationTheme\"\n [variant]=\"generalButtonVariation\"\n [label]=\"generalVariationButtonText\"\n [iconName]=\"generalVariationButtonIconName\"\n [iconPosition]=\"generalVariationButtonIconPosition\"\n [disabled]=\"generalVariationButtonDisabled\"\n [size]=\"generalVariationButtonSize\"\n (buttonClickEvent)=\"onGeneralVariationButtonClick($event)\"\n ></ui-button>\n }\n </div>\n </div>\n</ng-container>\n","queryGuide":{"roles":[],"ariaAttributes":["aria-hidden"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon","ui-button"],"suggestedQueries":[]},"filePath":"components/empty-state/empty-state.component.ts","supportsTheme":true,"lastModified":1775654032762.924},"field":{"name":"FieldComponent","selector":"ui-field","category":"forms","description":"To use the Field component, you need to import the `FieldComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/field","moduleName":"FieldComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"fullWidth","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Indicator of the autocomplete width","isSignal":false},{"name":"fullHeight","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Indicator of the field height","isSignal":false},{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Form field label","isSignal":false},{"name":"labelIcon","type":"IconName","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Icon to display alongside the label","isSignal":false},{"name":"fieldName","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input name attribute","isSignal":false},{"name":"placeholder","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Input placeholder","isSignal":false},{"name":"value","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Input value","isSignal":false},{"name":"badgeVariant","type":"BadgeVariant \| undefined","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Variant of badge to use","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Determines if input is disabled","isSignal":false},{"name":"required","type":"boolean","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input is required or not","isSignal":false},{"name":"readOnly","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Input is readonly or not","isSignal":false},{"name":"hintMessage","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Hint text","isSignal":false},{"name":"type","type":"FieldType","defaultValue":"'text'","required":false,"alias":null,"transform":null,"description":"Input type","isSignal":false},{"name":"updateOnBlur","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Input is update only on blur","isSignal":false},{"name":"allowOnlyDigits","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"allow only digits in input","isSignal":false},{"name":"isAutocompleteOff","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"allow autocomplete off in input","isSignal":false},{"name":"allowNegative","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"allow negative numbers","isSignal":false},{"name":"showBottomContent","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Show reserved content below form field","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"ariaLabel","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"A string representing the ARIA label for accessibility.\nThis label is used to provide an accessible name for the input element.","isSignal":false},{"name":"loading","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Show loading button. Only for text","isSignal":false},{"name":"isValid","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Show icon when field is valid","isSignal":false},{"name":"maxCharacters","type":"number","defaultValue":"255","required":false,"alias":null,"transform":null,"description":"Max characters number","isSignal":false},{"name":"trimOnBlur","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Trim text on blur","isSignal":false},{"name":"trimOnSubmit","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Trim text on submit","isSignal":false},{"name":"maxRows","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"Max rows for multi-line type","isSignal":false},{"name":"hasTextAreaCounter","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"has text area counter","isSignal":false},{"name":"hideBuiltInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Hide in build errors for Reactive Forms","isSignal":false},{"name":"hideLabelInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Hide label in errors","isSignal":false},{"name":"max","type":"number \| undefined","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Set maximum number","isSignal":false},{"name":"min","type":"number \| undefined","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Set minimum number","isSignal":false},{"name":"textareaHeight","type":"number","defaultValue":"110","required":false,"alias":null,"transform":null,"description":"Sets textarea height. Default 110","isSignal":false},{"name":"borderless","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Sets textarea borderless. Default false","isSignal":false},{"name":"autosizableTextarea","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"isAIVariant","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Indicates if this field is filled by AI","isSignal":false},{"name":"hasError","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Show state of error","isSignal":false},{"name":"errors","type":"string[]","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input field errors","isSignal":false},{"name":"labelHtml","type":"string \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"Form field label from html","isSignal":true},{"name":"id","type":"unknown","defaultValue":"`field-${fieldID++}`","required":false,"alias":null,"transform":null,"description":"Input id","isSignal":true},{"name":"ariaLabelledby","type":"string \| undefined","defaultValue":"undefined","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used for input field Aria LabeledBy Text.","isSignal":true},{"name":"ariaDescribedby","type":"string \| undefined","defaultValue":"undefined","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used for input field Aria DescribedBy Text.","isSignal":true}],"outputs":[{"name":"validateEvent","eventType":"string","alias":null,"description":"","isSignal":false},{"name":"fieldBlur","eventType":"void","alias":null,"description":"","isSignal":false}],"module":{"name":"FieldComponentModule","imports":["CommonModule","MatFormFieldModule","MatInputModule","IconComponentModule","FormsModule","ReactiveFormsModule","ButtonComponentModule","MatIconModule","UiTranslatePipe","ValidationErrorModule","HasValidationErrorPipe","DigitsOnlyDirective","BadgeComponentModule"],"exports":["FieldComponent"],"declarations":["FieldComponent"],"providers":[]},"types":{"typeAliases":[{"name":"FieldType","value":"\| 'text'\n \| 'password'\n \| 'email'\n \| 'number'\n \| 'tel'\n \| 'search'\n \| 'collapsed-search'\n \| 'validation-text'\n \| 'textarea'\n \| 'textarea-scrollable'\n \| 'multi-line'"}],"interfaces":[],"enums":[]},"examples":[{"name":"Text","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'text'","placeholder":"'Placeholder'","label":"'Input text label'","hintMessage":"'Donec posuere ultrices feugiat. Suspendisse potenti.'"}},{"name":"Password","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'password'","label":"'Password label'"}},{"name":"Search","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'search'","placeholder":"'Search'"}},{"name":"CollapsedSearch","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'collapsed-search'","placeholder":"'Collapsed search'","label":"'Search'"}},{"name":"Email","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'email'","placeholder":"'Placeholder'","label":"'email label'"}},{"name":"NumberType","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'number'","placeholder":"'Placeholder'","label":"'Number label'","allowOnlyDigits":"true","allowNegative":"false"}},{"name":"Tel","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'tel'","placeholder":"'Placeholder'","label":"'Tel label'"}},{"name":"WithoutLabel","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'text'","placeholder":"'Placeholder'"}},{"name":"WithLabelHtml","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'text'","placeholder":"'Placeholder'","labelHtml":"'This number <b>6</b> is very important'"}},{"name":"WithErrors","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'text'","placeholder":"'Placeholder'","errors":"["}},{"name":"WithDisable","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'text'","placeholder":"'Placeholder'","disabled":"true","label":"'Label'"}},{"name":"WithRequire","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'text'","placeholder":"'Placeholder'","required":"true","label":"'Label require'"}},{"name":"ValitateText","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'validation-text'","placeholder":"'Validation text'","label":"'Label'"}},{"name":"Textarea","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'textarea'","placeholder":"'Textarea'","label":"'Label'"}},{"name":"TextareaScrollable","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'textarea-scrollable'","label":"'Scrollable textarea'","placeholder":"'Add details here'","textareaHeight":"200","value":"'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam quam id tincidunt dapibus. ' +"}},{"name":"AIVariant","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'text'","placeholder":"'Your text goes here'","label":"'Label'","isAIVariant":"true"}},{"name":"WithBadge","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'text'","placeholder":"'Placeholder'","label":"'Label'","badgeVariant":"'primary-ai'"}},{"name":"MultiLine","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'multi-line'","placeholder":"'MultiLine'","label":"'Label'"}},{"name":"TextAreaBorderless","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'textarea'","label":"'Label'","borderless":"true","hasTextAreaCounter":"false","textareaHeight":"200","value":"'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam quam id tincidunt dapibus.'"}},{"name":"FullHeightTextarea","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'multi-line'","label":"'Full Height Textarea'","placeholder":"'Enter your text here...'","fullHeight":"true","hasTextAreaCounter":"true","value":"'This textarea will expand to fill the full height of its container. Perfect for forms where you need a large text input area that adapts to the available space.'"}}],"documentation":"## How to use\n\nTo use the Field component, you need to import the `FieldComponentModule` in your module:\n\n```typescript\nimport { FieldComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n FieldComponentModule,\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule {}\n```\n\n## Basic Usage\n\nYou can use the component in your templates:\n\n```html\n<ui-field type=\"text\" label=\"Username\" placeholder=\"Enter your username\"> </ui-field>\n```\n\n## Field Types\n\nThe Field component supports various input types:\n\n- text: Regular text input\n- password: Password input with show/hide toggle\n- search: Search input with clear button\n- collapsed-search: Collapsible search input\n- email: Email input with validation\n- number: Numeric input (can be restricted to digits only)\n- tel: Telephone number input\n- textarea: Multi-line text area\n- textarea-scrollable: Scrollable text area with custom scrollbar styling\n- multi-line: Another multi-line input option\n- validation-text: Text input with validation display\n\n## Features\n\n- Form integration: Works with both Template-driven and Reactive forms\n- Validation: Displays error messages\n- Accessibility: Supports ARIA attributes for accessibility\n- Theming: Supports different application themes (light/dark/classic)\n- Configurable: Numerous input options for customization\n\n## Examples\n\n### Text input with label and hint\n\n```html\n<ui-field\n type=\"text\"\n label=\"First Name\"\n placeholder=\"Enter your first name\"\n hintMessage=\"Your first name as it appears on your ID\"\n>\n</ui-field>\n```\n\n### Text input with label from html\n\n```html\n<ui-field type=\"text\" labelHtml=\"First <b>Name</b>\" placeholder=\"Enter your first name\"> </ui-field>\n```\n\n### Password input\n\n```html\n<ui-field type=\"password\" label=\"Password\" placeholder=\"Enter your password\"> </ui-field>\n```\n\n### Number input with restrictions\n\n```html\n<ui-field\n type=\"number\"\n label=\"Age\"\n placeholder=\"Enter your age\"\n [allowOnlyDigits]=\"true\"\n [allowNegative]=\"false\"\n [min]=\"0\"\n [max]=\"120\"\n>\n</ui-field>\n```\n\n### Search field\n\n```html\n<ui-field type=\"search\" placeholder=\"Search...\"> </ui-field>\n```\n\n### Field with error messages\n\n```html\n<ui-field type=\"email\" label=\"Email\" placeholder=\"Enter your email\" [errors]=\"['Please enter a valid email address']\">\n</ui-field>\n```\n\n### Text area\n\n```html\n<ui-field type=\"textarea\" label=\"Comments\" placeholder=\"Enter your comments\" [maxCharacters]=\"500\"> </ui-field>\n```\n\n### Required field\n\n```html\n<ui-field type=\"text\" label=\"Username\" placeholder=\"Enter your username\" [required]=\"true\"> </ui-field>\n```\n","template":"<ng-container>\n <mat-form-field\n [ngStyle]=\"{\n '--textarea-height': textareaHeight - 10 + 'px',\n '--textarea-height-container': textareaHeight + 'px',\n }\"\n #uiField\n appearance=\"outline\"\n hideRequiredMarker=\"true\"\n [color]=\"errorsLength \|\| (ngControl?.errors && ngControl?.touched) \|\| hasError ? 'warn' : 'accent'\"\n [ngClass]=\"{\n 'hide-bottom-content': !showBottomContent,\n textarea: type === 'textarea' \|\| type === 'textarea-scrollable',\n 'textarea-scrollable': type === 'textarea-scrollable',\n 'multi-line': type === 'multi-line',\n 'multi-line-textarea': type === 'multi-line' && autosizableTextarea && borderless,\n 'keyboard-focused': keyboardFocused(),\n 'has-label': !!label,\n 'has-value': !!value,\n 'text-area-borderless': borderless && (type === 'textarea' \|\| type === 'textarea-scrollable'),\n }\"\n (mouseenter)=\"onActive(true, 'hover')\"\n (mouseleave)=\"onActive(false, 'hover')\"\n >\n <span [style.display]=\"'none'\" [id]=\"ariaDescribedbyId()\">\n @if (required) {\n <span>{{ 'ERRORS.REQUIRED' \| uiTranslate \| async }}</span>\n }\n {{ ariaDescribedby() }}\n </span>\n <span [style.display]=\"'none'\" [id]=\"ariaLabelledbyId()\">\n {{ ariaLabelledby() ?? label }}\n </span>\n <mat-label\n ngIf=\"\n (label \|\| labelHtml()) &&\n ((type !== 'search' && applicationTheme === 'classic') \|\| applicationTheme !== 'classic')\n \"\n class=\"label-with-icon\"\n >\n @if (isAIVariant \|\| labelIcon) {\n <ui-icon [name]=\"isAIVariant ? 'Sparkle-in-line' : labelIcon!\" [size]=\"'16'\" class=\"label-icon\"></ui-icon>\n }\n <span>\n @if (labelHtml()) {\n <span [innerHTML]=\"labelHtml()\"></span>\n } @else {\n {{ label }}\n }\n @if (required) {\n <span></span>\n }\n </span>\n </mat-label>\n <mat-icon\n ngIf=\"type === 'search' \|\| type === 'collapsed-search'\"\n matIconPrefix\n class=\"search-icon\"\n [svgIcon]=\"'Search'\"\n ></mat-icon>\n <input\n [readonly]=\"readOnly\"\n ngIf=\"type !== 'textarea' && type !== 'textarea-scrollable' && type !== 'multi-line'; else textarea\"\n matInput\n #inputElement\n (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n (input)=\"onInput($event)\"\n [id]=\"id()\"\n (keyup)=\"onChangeInputSearch()\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled \|\| loading\"\n [type]=\"currentType\"\n (keyup.enter)=\"onSubmit()\"\n [max]=\"max\"\n [min]=\"min\"\n [name]=\"fieldName!\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-invalid]=\"errorsLength \|\| (ngControl?.errors && ngControl?.touched) \|\| hasError\"\n [attr.aria-labelledby]=\"ariaLabelledbyId()\"\n [attr.aria-describedby]=\"ariaDescribedbyId()\"\n role=\"textbox\"\n digitsOnly\n [autocomplete]=\"isAutocompleteOff ? 'off' : 'on'\"\n [allowOnlyDigits]=\"allowOnlyDigits\"\n [allowNegative]=\"allowNegative\"\n (focusin)=\"onActive(true, 'focus')\"\n />\n\n <ng-template #textarea>\n <textarea\n matInput\n #inputElement\n #autosize=\"cdkTextareaAutosize\"\n [readonly]=\"readOnly\"\n (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n (input)=\"onInput($event)\"\n [id]=\"id()\"\n (keyup)=\"onChangeInputSearch()\"\n (keyup.enter)=\"onSubmit()\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [name]=\"fieldName!\"\n [required]=\"required\"\n [attr.aria-label]=\"!label ? ariaLabel : ''\"\n [attr.aria-invalid]=\"errorsLength \|\| (ngControl?.errors && ngControl?.touched) \|\| hasError\"\n [attr.aria-labelledby]=\"ariaLabelledbyId()\"\n [attr.aria-describedby]=\"ariaDescribedbyId()\"\n role=\"textbox\"\n [cdkTextareaAutosize]=\"type === 'multi-line'\"\n [cdkAutosizeMinRows]=\"type === 'multi-line' ? 1 : 5\"\n [cdkAutosizeMaxRows]=\"type === 'multi-line' ? maxRows : 5\"\n [attr.maxlength]=\"maxCharacters\"\n (focusin)=\"onActive(true, 'focus')\"\n ></textarea>\n </ng-template>\n\n <div\n class=\"options\"\n ngIf=\"type === 'search' \|\| type === 'collapsed-search' \|\| type === 'password' \|\| type === 'validation-text'\"\n >\n <div class=\"options-container\">\n <ui-button\n ngIf=\"showClose\"\n variant=\"secondary\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n [label]=\"('COMMON.CLEAR' \| uiTranslate \| async)!\"\n (buttonClickEvent)=\"clearValue()\"\n [ariaLabel]=\"ariaLabel + '--' + ('COMMON.CLEAR' \| uiTranslate \| async)\"\n ></ui-button>\n <ui-button\n class=\"password\"\n variant=\"secondary\"\n [tooltip]=\"((showPassword ? 'FIELD.HIDE_PASSWORD' : 'FIELD.SHOW_PASSWORD') \| uiTranslate \| async)!\"\n ngIf=\"type === 'password'\"\n [justIcon]=\"true\"\n role=\"switch\"\n [attr.aria-checked]=\"showPassword\"\n [iconName]=\"getPasswordIcon\"\n [applicationTheme]=\"applicationTheme\"\n (click)=\"showPasswordClick()\"\n #btn\n (keydown.enter)=\"refocusPasswordButton(btn)\"\n (keydown.space)=\"refocusPasswordButton(btn)\"\n ></ui-button>\n\n <ng-container\n ngIf=\"\n type === 'validation-text' && (applicationTheme === 'dark' \|\| applicationTheme === 'light') && value.length\n \"\n >\n <ui-button\n ngIf=\"!isValid\"\n class=\"validation\"\n [variant]=\"'text'\"\n [applicationTheme]=\"'light'\"\n [label]=\"'Validate'\"\n [loading]=\"loading\"\n (click)=\"validate()\"\n [disabled]=\"disabled\"\n [size]=\"'small'\"\n ></ui-button>\n <ui-icon class=\"valid\" [color]=\"'white'\" applicationTheme=\"light\" [name]=\"'Check'\" ngIf=\"isValid\"></ui-icon>\n </ng-container>\n </div>\n </div>\n @if (hasTextAreaCounter) {\n <mat-hint\n class=\"info\"\n ngIf=\"\n (type === 'textarea' \|\| type === 'textarea-scrollable') &&\n !errorsLength &&\n !(ngControl?.errors \| hasValidationError)\n \"\n >{{ value.length }} / {{ maxCharacters }}</mat-hint\n >\n }\n\n <mat-hint\n class=\"info\"\n ngIf=\"\n hintMessage &&\n !errorsLength &&\n !(ngControl?.errors \| hasValidationError) &&\n type !== 'textarea' &&\n type !== 'textarea-scrollable'\n \"\n >{{ hintMessage }}</mat-hint\n >\n <mat-hint class=\"error\" ngIf=\"errorsLength \|\| (ngControl?.errors \| hasValidationError)\">\n <ng-template [ngIf]=\"errorsLength\">\n <div class=\"errors\" ngFor=\"let error of _errors; trackBy: trackByFn\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n </ng-template>\n\n <ui-validation-error\n ngIf=\"ngControl && !hideBuiltInErrors\"\n [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors ? null : label\"\n ></ui-validation-error>\n </mat-hint>\n\n @if (badgeVariant) {\n <ui-badge class=\"field-badge\" [variant]=\"badgeVariant\"></ui-badge>\n }\n </mat-form-field>\n</ng-container>\n","queryGuide":{"roles":["textbox","switch"],"ariaAttributes":["aria-label","aria-invalid","aria-labelledby","aria-describedby","aria-checked"],"dataTestIds":[],"materialComponents":["mat-form-field","mat-label","mat-icon","mat-hint"],"childUIComponents":["ui-icon","ui-button","ui-validation-error","ui-badge"],"suggestedQueries":["screen.getByRole('textbox')","screen.getByRole('switch')","screen.getByLabelText('label text')"]},"filePath":"components/field/field.component.ts","supportsTheme":true,"lastModified":1775654032763.924},"file-upload":{"name":"FileUploadComponent","selector":"ui-file-upload","category":"file upload","description":"FileUploadComponent component","importPath":"@testgorilla/tgo-ui/components/file-upload","moduleName":"FileUploadComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"maxFileSizeMB","type":"number","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"minFileSizeMB","type":"number","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"supportedFileTypes","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Supported files for input field","isSignal":false},{"name":"uploadProgress","type":"number","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Upload progress","isSignal":false},{"name":"showUploadProgress","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Show Upload progress percentage or not","isSignal":false},{"name":"fileProcessingMessage","type":"string \| undefined","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Custom progress message","isSignal":false},{"name":"errors","type":"string[] \| null","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"File upload errors","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"File upload disabled","isSignal":false},{"name":"file","type":"File \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"Existing file information","isSignal":false},{"name":"companyColor","type":"string \| null","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Color of the file upload.\nDefaults to Test Gorilla primary color.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"ariaLabel","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"A string representing the ARIA label for accessibility.\nThis label is used to provide an accessible name for the input element.","isSignal":false},{"name":"ariaRequired","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"showFileSize","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Whether to show the file size information.","isSignal":false}],"outputs":[{"name":"OnDrop","eventType":"File","alias":null,"description":"","isSignal":false}],"module":{"name":"FileUploadComponentModule","imports":["CommonModule","MatFormFieldModule","MatInputModule","IconComponentModule","ProgressBarComponentModule","UiTranslatePipe"],"exports":["FileUploadComponent"],"declarations":["FileUploadComponent","DragDropDirective"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"","template":"<ng-container>\n <div\n class=\"upload-file-container\"\n uiDragDrop\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ 'upload-errors': !!errors \|\| isMissedMinSize, 'upload-file-container-disabled': disabled }\"\n (fileDropped)=\"onFileDropped($event)\"\n tabindex=\"0\"\n [tabIndex]=\"0\"\n (keydown)=\"onKeydown($event)\"\n (click)=\"fileDrop?.nativeElement?.click()\"\n >\n <div ngIf=\"browse && !(success && !!file && progress)\" [@inOutAnimation] class=\"upload-files\">\n <div class=\"upload-browse\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n\n <div class=\"errors\" ngIf=\"!!errors \|\| isMissedMinSize\" role=\"alert\">\n <ng-container ngIf=\"!!errors\">\n <span ngFor=\"let error of errors\"><ui-icon name=\"Error\" class=\"error-icon\"></ui-icon> {{ error }}</span>\n </ng-container>\n\n <span ngIf=\"isMissedMinSize\">\n <ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>\n {{ translationContext + 'MIN_SIZE_ERROR' \| uiTranslate: { min: minFileSizeMB } \| async }}\n </span>\n </div>\n <input\n [attr.aria-labelledby]=\"success \|\| progress ? '' : 'drag-and-drop'\"\n [attr.aria-describedby]=\"'upload-supported-files'\"\n [tabIndex]=\"-1\"\n class=\"form-control\"\n #fileDrop\n type=\"file\"\n id=\"file\"\n [accept]=\"supportedFileTypes\"\n [disabled]=\"disabled\"\n (change)=\"onChangeUpload($event)\"\n />\n <p ngIf=\"applicationTheme === 'classic'; else rebrandedDnDCopyTpl\">\n {{ translationContext + 'DRAG_AND_DROP_OR' \| uiTranslate \| async }}\n <span class=\"semibold\"> {{ translationContext + 'BROWSE' \| uiTranslate \| async \| lowercase }}</span>\n {{ translationContext + 'YOUR_FILES' \| uiTranslate \| async }}\n </p>\n <span class=\"upload-text\">{{ maxFileSizeMB }}{{ translationContext + 'MAX_SIZE' \| uiTranslate \| async }}</span>\n <span ngIf=\"minFileSizeMB\" class=\"upload-text\"\n >{{ minFileSizeMB }}{{ translationContext + 'MIN_SIZE' \| uiTranslate \| async }}</span\n >\n </div>\n </div>\n @if (success) {\n <div class=\"upload-success\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n <span class=\"upload-success-text\"\n ><ui-icon name=\"Check-round-in-line\" [color]=\"colorUploadSuccess\"></ui-icon\n >{{ translationContext + 'FILE_UPLOADING_SUCCESS' \| uiTranslate \| async }}</span\n >\n <input\n [tabIndex]=\"-1\"\n [attr.aria-labelledby]=\"success \|\| progress ? '' : 'drag-and-drop'\"\n [attr.aria-describedby]=\"success \|\| progress ? '' : 'supported-file-types'\"\n class=\"form-control\"\n #fileDrop\n type=\"file\"\n id=\"fileTest\"\n [accept]=\"supportedFileTypes\"\n (change)=\"onChangeUpload($event)\"\n [disabled]=\"disabled\"\n />\n <span class=\"upload-text\">{{ file?.name }}</span>\n @if (showFileSize) {\n <span class=\"upload-text\">{{\n translationContext + 'FILE_SIZE' \| uiTranslate: { fileSize: fileSizeInMB } \| async\n }}</span>\n }\n </div>\n }\n <div class=\"upload-progress\" [@inOutAnimationProgress] ngIf=\"!!progress && !!file && !success\">\n <p>{{ file.name }}</p>\n <ui-progress-bar\n [progress]=\"uploadProgress\"\n [companyColor]=\"compColor\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-progress-bar>\n <p class=\"upload-text\">\n {{ fileProcessingMessage ?? (translationContext + 'UPLOADING' \| uiTranslate \| async) }}\n @if (showUploadProgress) {\n <span>{{ uploadProgress }}</span\n >%\n }\n </p>\n </div>\n\n <ng-template #iconTpl>\n <ui-icon\n ngIf=\"applicationTheme === 'classic'; else rebrandedIconTpl\"\n class=\"upload-icon\"\n name=\"File-upload\"\n ></ui-icon>\n <ng-template #rebrandedIconTpl>\n <ui-icon class=\"upload-icon\" name=\"Upload\" [size]=\"'24'\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n </ng-template>\n </ng-template>\n <ng-template #rebrandedDnDCopyTpl>\n <p id=\"'drag-and-drop'\">{{ translationContext + 'DRAG_AND_DROP' \| uiTranslate \| async }}</p>\n </ng-template>\n\n <div\n ngIf=\"!!supportedFileTypes\"\n [attr.theme]=\"applicationTheme\"\n class=\"upload-supported-files\"\n id=\"upload-supported-files\"\n >\n <span>{{ translationContext + 'SUPPORTED_FILE_TYPES' \| uiTranslate \| async }}</span\n >{{ supportedFileTypes }}\n </div>\n </div>\n</ng-container>\n","queryGuide":{"roles":["alert"],"ariaAttributes":["aria-label","aria-required","aria-labelledby","aria-describedby"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon","ui-progress-bar"],"suggestedQueries":["screen.getByRole('alert')","screen.getByLabelText('label text')"]},"filePath":"components/file-upload/file-upload.component.ts","supportsTheme":true,"lastModified":1775654032763.924},"filter-button":{"name":"FilterButtonComponent","selector":"ui-filter-button","category":"forms","description":"To use the Filter Button component, you need to import the `FilterButtonComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/filter-button","moduleName":"FilterButtonComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"The button label when no value is selected.","isSignal":false},{"name":"message","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Optional message to display on the overflow bottom.","isSignal":false},{"name":"value","type":"FilterValue[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"List of selected values.","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether the component is disabled.\nDefault: false.","isSignal":false},{"name":"allowClear","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Whether the user should be allowed to clear the values.\nDefault: true.","isSignal":false},{"name":"singleSelection","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether the user should be allowed to select single or multiple values.\nDefault: false.","isSignal":false},{"name":"iconName","type":"IconName","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"The icon name to display.","isSignal":false},{"name":"iconPosition","type":"ButtonIconPosition","defaultValue":"'right'","required":false,"alias":null,"transform":null,"description":"The position of the icon.\nDefault: 'right'.","isSignal":false},{"name":"noOptionsMessage","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Optional message to display if there are no options to select available","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"options","type":"FilterButtonOption[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"List of options.","isSignal":true}],"outputs":[{"name":"changed","eventType":"FilterValue[]","alias":null,"description":"Emits the list of selected values when the selection changes.","isSignal":false},{"name":"optionChange","eventType":"OptionChangeEvent","alias":null,"description":"Emits the option change event","isSignal":false}],"module":{"name":"FilterButtonComponentModule","imports":["CommonModule","FormsModule","MatTooltipModule","OverlayModule","UiTranslatePipe","ButtonComponentModule","IconComponentModule","CheckboxComponentModule","FieldComponentModule","EllipseTextDirective","RadioButtonComponentModule"],"exports":["FilterButtonComponent"],"declarations":["FilterButtonComponent"],"providers":[]},"types":{"typeAliases":[{"name":"FilterValue","value":"string \| number"}],"interfaces":[{"name":"FilterButtonOption","properties":[{"name":"value","type":"FilterValue","optional":false},{"name":"label","type":"string","optional":false},{"name":"labelNumber","type":"number","optional":true},{"name":"icon","type":"IconName","optional":true},{"name":"sectionTitle","type":"string","optional":true}]},{"name":"OptionChangeEvent","properties":[{"name":"selected","type":"boolean","optional":false},{"name":"option","type":"FilterButtonOption","optional":false}]}],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Filter Button component, you need to import the `FilterButtonComponentModule` in your module:\n\n```typescript\nimport { FilterButtonComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n FilterButtonComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-filter-button\n label=\"Categories\"\n [options]=\"[\n { label: 'Option 1', value: 'op1', labelNumber: 5 },\n { label: 'Option 2', value: 'op2', labelNumber: 3 },\n { label: 'Option 3', value: 'op3', labelNumber: 12 }\n ]\"\n [singleSelection]=\"false\" \n applicationTheme=\"light\"\n (selectionChange)=\"onFilterChange($event)\">\n</ui-filter-button>\n```\n\nThe filter button component provides an interactive dropdown for selecting filter options, with support for single or multiple selection.","template":"<ng-container>\n <ui-button\n [matTooltip]=\"tooltip()\"\n [matTooltipClass]=\"'tooltip-multi-line ' + applicationTheme\"\n [matTooltipPosition]=\"'above'\"\n class=\"ui-filter-button-trigger\"\n [class.button-opened]=\"isOpen()\"\n [variant]=\"value.length \|\| isOpen() ? 'secondary' : 'ghost'\"\n [label]=\"displayedLabel() \|\| label\"\n [disabled]=\"disabled \|\| (options().length === 0 && !noOptionsMessage)\"\n (click)=\"toggle()\"\n type=\"button\"\n size=\"small\"\n [role]=\"'combobox'\"\n [tooltip]=\"value.length ? ' ' : ''\"\n [attr.aria-expanded]=\"isOpen()\"\n [iconName]=\"iconName \|\| (isOpen() ? 'Arrow-chevron-up-filled' : 'Arrow-chevron-down-filled')\"\n [iconPosition]=\"iconPosition\"\n [applicationTheme]=\"applicationTheme\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n ></ui-button>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"outsideClick()\"\n >\n @if (displayedOptions().length) {\n <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n {{\n translationContext + 'ACTIVE_ITEM'\n \| uiTranslate: { active: (keyManager.activeItemIndex ?? 0) + 1, total: filterOptions.length }\n \| async\n }}\n </div>\n <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n {{\n (value.includes(displayedOptions()[keyManager.activeItemIndex ?? 0].value)\n ? translationContext + 'SELECTED'\n : translationContext + 'DESELECTED'\n )\n \| uiTranslate\n \| async\n }}\n </div>\n }\n <div class=\"ui-filter-button\" #overlayContainer>\n <div class=\"ui-filter-button-header\" ngIf=\"options().length > MIN_OPTIONS_LENGTH_FOR_SEARCH\">\n <ui-field\n type=\"search\"\n [showBottomContent]=\"false\"\n [ngModel]=\"search()\"\n (ngModelChange)=\"search.set($event)\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-field>\n </div>\n <div class=\"ui-filter-button-list\" #list tabindex=\"0\" (keydown)=\"keyDownHandler($event)\">\n @if (!displayedOptions().length && options().length) {\n <div class=\"no-results-found\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' \| uiTranslate \| async }}</span>\n </div>\n } @else {\n <div ngFor=\"let section of displayedOptions(); index as i\">\n <div\n ngIf=\"section.sectionTitle && section.sectionTitle !== displayedOptions()[i - 1]?.sectionTitle\"\n class=\"section-title\"\n >\n {{ section.sectionTitle }}\n </div>\n <div\n class=\"item\"\n [class.item-selected]=\"isSelected(section.value)\"\n tabindex=\"0\"\n (click)=\"optionChanged(!isSelected(section.value), section)\"\n (keydown.enter)=\"optionChanged(!isSelected(section.value), section)\"\n >\n <ui-radio-button\n (click)=\"$event.stopPropagation()\"\n ngIf=\"singleSelection\"\n [tabIndex]=\"i === 0 ? 0 : -1\"\n [selected]=\"isSelected(section.value)\"\n (changeRadio)=\"optionChanged($event.optionChecked, section)\"\n [applicationTheme]=\"applicationTheme\"\n #filterOption\n >\n </ui-radio-button>\n <ui-checkbox\n (click)=\"$event.stopPropagation()\"\n [class.with-label-number]=\"section.labelNumber !== undefined\"\n ngIf=\"!singleSelection\"\n [tabIndex]=\"i === 0 ? 0 : -1\"\n [checked]=\"isSelected(section.value)\"\n (changed)=\"optionChanged($event, section)\"\n [applicationTheme]=\"applicationTheme\"\n #filterOption\n ></ui-checkbox>\n <ui-icon ngIf=\"section.icon\" [applicationTheme]=\"applicationTheme\" [name]=\"section.icon\"></ui-icon>\n <span\n #tooltip=\"matTooltip\"\n class=\"item-label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event, section.value)\"\n [matTooltip]=\"showTooltip[section.value] ? section.label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >\n {{ section.label }}\n </span>\n <span class=\"item-number\" ngIf=\"section.labelNumber !== undefined\">({{ section.labelNumber }})</span>\n </div>\n </div>\n }\n </div>\n @if (!options().length && !!noOptionsMessage) {\n <div class=\"ui-filter-button-no-options\" [innerHTML]=\"noOptionsMessage\"></div>\n } @else {\n <div class=\"ui-filter-button-footer\" ngIf=\"allowClear \|\| message\">\n <ui-button\n ngIf=\"allowClear\"\n variant=\"text\"\n size=\"small\"\n [label]=\"('COMMON.RESET' \| uiTranslate \| async)!\"\n (click)=\"clearValue()\"\n [applicationTheme]=\"applicationTheme\"\n (keydown.escape)=\"toggle()\"\n ></ui-button>\n <div class=\"ui-filter-button-footer-message\">\n {{ message }}\n </div>\n </div>\n }\n </div>\n </ng-template>\n</ng-container>\n","queryGuide":{"roles":[],"ariaAttributes":["aria-expanded","aria-live"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-button","ui-field","ui-radio-button","ui-checkbox","ui-icon"],"suggestedQueries":[]},"filePath":"components/filter-button/filter-button.component.ts","supportsTheme":true,"lastModified":1775654032764.924},"gaussian-chart":{"name":"GaussianChartComponent","selector":"ui-gaussian-chart","category":"charts","description":"GaussianChartComponent component","importPath":"@testgorilla/tgo-ui/components/gaussian-chart","moduleName":"GaussianChartComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"score","type":"number","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"The candidate score to be displayed on the chart.","isSignal":false},{"name":"bestCandidateScore","type":"number","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"The best candidate score to be displayed on the chart.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"legendPosition","type":"LegendPosition","defaultValue":"'bottom-start'","required":false,"alias":null,"transform":null,"description":"Controls the position of the legend relative to the chart.","isSignal":false}],"outputs":[],"module":{"name":"GaussianChartComponentModule","imports":["NgClass","UiTranslatePipe","NgChartsModule","MatTooltipModule","CommonModule","IconComponentModule","MemoizeFuncPipe"],"exports":["GaussianChartComponent"],"declarations":["GaussianChartComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"","template":"<div\n class=\"chart-section\"\n ngIf=\"score\"\n [attr.aria-label]=\"\n translationContext + 'ARIA_LABEL'\n \| uiTranslate\n : {\n score: score,\n activeBucket: getScoreTranslationKey(score) \| uiTranslate \| async,\n bestCandidateScore: bestCandidateScore,\n activeBucketBestScore: getScoreTranslationKey(bestCandidateScore) \| uiTranslate \| async,\n }\n \| async\n \"\n tabindex=\"0\"\n>\n <!-- Legend positioned at top -->\n @if (legendPosition === 'top-start' \|\| legendPosition === 'top-end') {\n <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n }\n\n <div class=\"chart-range-wrapper\">\n <div class=\"normal-chart-container\">\n <div class=\"normal-chart\">\n <canvas baseChart [data]=\"gaussianChartData\" [options]=\"gaussianChartOptions\" type=\"line\" class=\"chart\">\n </canvas>\n <div\n class=\"overlay-icon\"\n [style.bottom]=\"[overlayYValue, 3, 'subtract'] \| memoizeFunc: getCalcPosition\"\n [style.left]=\"[overlayXValue, 20, 'subtract'] \| memoizeFunc: getCalcPosition\"\n >\n <div class=\"drop-icon\">\n <ui-icon name=\"Pin-marker\" size=\"40\"></ui-icon>\n <span class=\"curve-score\">{{ score }}</span>\n </div>\n </div>\n <div\n class=\"best-score\"\n [style.height]=\"[100 - overlayYBestScoreValue, normalContainerPadding, 'add'] \| memoizeFunc: getCalcPosition\"\n [style.bottom]=\"overlayYBestScoreValue + '%'\"\n [style.left]=\"overlayXBestScoreValue + '%'\"\n >\n <div\n class=\"best-score-content\"\n [style.left]=\"bestCandidateScore \| memoizeFunc: getBestScoreContentPosition : this\"\n >\n <ui-icon name=\"Trophy\"></ui-icon>\n {{ bestCandidateScore }}\n </div>\n </div>\n </div>\n <div class=\"overlay\">\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWEST\">\n <div\n class=\"column-item\"\n [class.text-bold]=\"activeBucket === PercentileThreshold.LOWEST\"\n [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST_TOOLTIP' \| uiTranslate \| async) \|\| ''\"\n >\n {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST' \| uiTranslate \| async }}\n </div>\n </div>\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWER\">\n <div\n class=\"column-item\"\n [class.text-bold]=\"activeBucket === PercentileThreshold.LOWER\"\n [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER_TOOLTIP' \| uiTranslate \| async) \|\| ''\"\n >\n {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER' \| uiTranslate \| async }}\n </div>\n </div>\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.AVERAGE\">\n <div\n class=\"column-item\"\n [class.text-bold]=\"activeBucket === PercentileThreshold.AVERAGE\"\n [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE_TOOLTIP' \| uiTranslate \| async) \|\| ''\"\n >\n {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE' \| uiTranslate \| async }}\n </div>\n </div>\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHER\">\n <div\n class=\"column-item\"\n [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHER\"\n [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER_TOOLTIP' \| uiTranslate \| async) \|\| ''\"\n >\n {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER' \| uiTranslate \| async }}\n </div>\n </div>\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHEST\">\n <div\n class=\"column-item\"\n [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHEST\"\n [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST_TOOLTIP' \| uiTranslate \| async) \|\| ''\"\n >\n {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST' \| uiTranslate \| async }}\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"range\">\n <div>1</div>\n <div>20</div>\n <div>40</div>\n <div>60</div>\n <div>80</div>\n <div>99</div>\n </div>\n </div>\n\n <!-- Legend positioned at bottom -->\n @if (legendPosition === 'bottom-start' \|\| legendPosition === 'bottom-end') {\n <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n }\n</div>\n\n<!-- Reusable legend template -->\n<ng-template #legendTemplate>\n <div class=\"legend-container\" [ngClass]=\"'legend-' + legendPosition\">\n <div class=\"legend\">\n <ui-icon name=\"Dot\" color=\"gray\"></ui-icon>\n {{ translationContext + 'CANDIDATE_SCORE' \| uiTranslate \| async }}\n </div>\n <div class=\"legend\">\n <ui-icon name=\"Trophy\" color=\"gray\"></ui-icon>\n {{ translationContext + 'HIGHEST_SCORE' \| uiTranslate \| async }}\n </div>\n </div>\n</ng-template>\n","queryGuide":{"roles":[],"ariaAttributes":["aria-label"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon"],"suggestedQueries":["screen.getByLabelText('label text')"]},"filePath":"components/gaussian-chart/gaussian-chart.component.ts","supportsTheme":true,"lastModified":1775654032764.924},"icon":{"name":"IconComponent","selector":"ui-icon","category":"icons","description":"IconComponent component","importPath":"@testgorilla/tgo-ui/components/icon","moduleName":"IconComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"size","type":"IconSize","defaultValue":"'16'","required":false,"alias":null,"transform":null,"description":"Icon size","isSignal":false},{"name":"cssClass","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Icon css class","isSignal":false},{"name":"name","type":"IconName","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Icon name","isSignal":false},{"name":"color","type":"IconColor","defaultValue":"'black'","required":false,"alias":null,"transform":null,"description":"Icon color","isSignal":false},{"name":"filled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Icon filled","isSignal":false},{"name":"toggleIconStyle","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"useFullIconName","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":false}],"outputs":[],"module":{"name":"IconComponentModule","imports":["CommonModule","MatIconModule","HttpClientModule"],"exports":["IconComponent"],"declarations":["IconComponent"],"providers":["HttpClientModule"]},"types":{"typeAliases":[{"name":"TgoIcons","value":"(typeof tgoIcons)[number]"},{"name":"TgoRebrandIcons","value":"(typeof tgoRebrandIcons)[number]"},{"name":"IconSize","value":"'16' \| '24' \| '40' \| '80'"},{"name":"IconName","value":"TgoRebrandIcons \| TgoIcons \| ''"},{"name":"IconColor","value":"string"}],"interfaces":[],"enums":[]},"examples":[],"documentation":"","template":"@if (isIconLoaded) {\n <mat-icon [svgIcon]=\"_name\" [attr.class]=\"customCssClass\" [ngStyle]=\"cssStyle\"></mat-icon>\n} @else {\n <div class=\"empty-icon-placeholder\"></div>\n}\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":["mat-icon"],"childUIComponents":[],"suggestedQueries":[]},"filePath":"components/icon/icon.component.ts","supportsTheme":true,"lastModified":1775654032767.924},"icon-label":{"name":"IconLabelComponent","selector":"ui-icon-label","category":"icons","description":"IconLabelComponent component","importPath":"@testgorilla/tgo-ui/components/icon-label","moduleName":"IconLabelComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"iconSize","type":"IconSize","defaultValue":"'16'","required":false,"alias":null,"transform":null,"description":"Icon size","isSignal":false},{"name":"iconName","type":"IconName","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Icon name","isSignal":false},{"name":"text","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Label","isSignal":false},{"name":"iconColor","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Icon color","isSignal":false},{"name":"iconIndent","type":"unknown","defaultValue":"'8'","required":false,"alias":null,"transform":null,"description":"Indent between icon and label","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false}],"outputs":[],"module":{"name":"IconLabelComponentModule","imports":["CommonModule","IconComponentModule"],"exports":["IconLabelComponent"],"declarations":["IconLabelComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"","template":"<ui-icon [name]=\"iconName\" [size]=\"iconSize\" [color]=\"iconColor\" aria-hidden=\"true\"></ui-icon>\n<span>{{ text }}</span>\n","queryGuide":{"roles":[],"ariaAttributes":["aria-hidden"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon"],"suggestedQueries":[]},"filePath":"components/icon-label/icon-label.component.ts","supportsTheme":true,"lastModified":1775654032764.924},"inline-field":{"name":"InlineFieldComponent","selector":"ui-inline-field","category":"forms","description":"The Inline Field component enables users to make quick edits to text content with explicit save/cancel confirmation, without navigating to a separate form or modal.","importPath":"@testgorilla/tgo-ui/components/inline-field","moduleName":"InlineFieldComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"id","type":"unknown","defaultValue":"`inline-field-${inlineFieldID++}`","required":false,"alias":null,"transform":null,"description":"Component ID for accessibility","isSignal":true},{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Field label","isSignal":true},{"name":"placeholder","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Field placeholder","isSignal":true},{"name":"value","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Current value","isSignal":true},{"name":"required","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether the field is required","isSignal":true},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether the field is disabled","isSignal":true},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Application theme","isSignal":true},{"name":"fieldType","type":"FieldType","defaultValue":"'text'","required":false,"alias":null,"transform":null,"description":"Field type","isSignal":true},{"name":"maxRows","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"Field type","isSignal":true},{"name":"errors","type":"string[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"Error messages","isSignal":true},{"name":"showErrors","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Whether to show errors","isSignal":true},{"name":"buttonConfig","type":"InlineFieldButtonConfig","defaultValue":"{\n saveLabel: 'Save',\n cancelLabel: 'Cancel',\n saveIcon: 'Check-filled',\n cancelIcon: 'Close-filled',\n }","required":false,"alias":null,"transform":null,"description":"Button configuration","isSignal":true},{"name":"validation","type":"InlineFieldValidation","defaultValue":"{}","required":false,"alias":null,"transform":null,"description":"Validation configuration","isSignal":true},{"name":"ariaLabel","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"ARIA label","isSignal":true},{"name":"fullWidth","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Full width","isSignal":true}],"outputs":[{"name":"save","eventType":"InlineFieldChangeEvent","alias":null,"description":"Emitted when save button is clicked","isSignal":true},{"name":"cancel","eventType":"void","alias":null,"description":"Emitted when cancel button is clicked","isSignal":true},{"name":"valueChange","eventType":"string","alias":null,"description":"Emitted when value changes","isSignal":true},{"name":"editingModeChange","eventType":"boolean","alias":null,"description":"Emitted when editing mode changes","isSignal":true},{"name":"focusEvent","eventType":"void","alias":null,"description":"Emitted on focus","isSignal":true},{"name":"blurEvent","eventType":"void","alias":null,"description":"Emitted on blur","isSignal":true}],"module":{"name":"InlineFieldComponentModule","imports":["CommonModule","FormsModule","ReactiveFormsModule","MatInputModule","ButtonComponentModule","FieldComponentModule","IconComponentModule"],"exports":["InlineFieldComponent"],"declarations":["InlineFieldComponent"],"providers":[]},"types":{"typeAliases":[{"name":"InlineFieldState","value":"'default' \| 'focused' \| 'editing' \| 'error' \| 'disabled' \| 'loading'"}],"interfaces":[{"name":"InlineFieldEvents","properties":[{"name":"onSave","type":"EventEmitter<string>","optional":false},{"name":"onCancel","type":"EventEmitter<void>","optional":false},{"name":"onValueChange","type":"EventEmitter<string>","optional":false},{"name":"onEditingModeChange","type":"EventEmitter<boolean>","optional":false},{"name":"onFocus","type":"EventEmitter<void>","optional":false},{"name":"onBlur","type":"EventEmitter<void>","optional":false}]},{"name":"InlineFieldButtonConfig","properties":[{"name":"saveLabel","type":"string","optional":true},{"name":"cancelLabel","type":"string","optional":true},{"name":"saveIcon","type":"IconName","optional":true},{"name":"cancelIcon","type":"IconName","optional":true},{"name":"showOnHoverOnly","type":"boolean","optional":true}]},{"name":"InlineFieldValidation","properties":[{"name":"required","type":"boolean","optional":true},{"name":"minLength","type":"number","optional":true},{"name":"maxLength","type":"number","optional":true},{"name":"pattern","type":"RegExp","optional":true},{"name":"customValidator","type":"(value: string) => boolean","optional":true}]},{"name":"InlineFieldChangeEvent","properties":[{"name":"value","type":"string","optional":false},{"name":"saved","type":"boolean","optional":false},{"name":"previousValue","type":"string","optional":false}]}],"enums":[]},"examples":[],"documentation":"# Inline Field Component\n\nThe Inline Field component enables users to make quick edits to text content with explicit save/cancel confirmation, without navigating to a separate form or modal.\n\n## When to Use\n\n- Quick edits to short text (titles, labels, single-line fields) inside pages, lists, tables, or cards\n- Edits that can affect other data, need validation, or could be destructive and require save/cancel confirmation\n- Inside compound controls (e.g., tags/suggestions box) where users switch between viewing and editing modes\n- Renaming items in lists, tables, or card layouts\n\n## When NOT to Use\n\n- Long, multi-step edits → use a dedicated form or modal instead\n- Trivial changes that can auto-save safely → use standard input with autosave pattern\n- Complex form fields with multiple inputs → use full form components\n\n## Installation & Import\n\n```typescript\nimport { InlineFieldComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n InlineFieldComponentModule\n ]\n})\nexport class YourModule { }\n```\n\n## Basic Usage\n\n### Simple Inline Field\n```html\n<ui-inline-field\n label=\"Title\"\n [(value)]=\"title\"\n placeholder=\"Enter title\"\n (save)=\"onSave($event)\"\n (cancel)=\"onCancel()\">\n</ui-inline-field>\n```\n\n### Required Field with Validation\n```html\n<ui-inline-field\n label=\"Email Address\"\n [(value)]=\"email\"\n [required]=\"true\"\n [validation]=\"{\n required: true,\n pattern: /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\n }\"\n placeholder=\"Enter email address\"\n (save)=\"onEmailSave($event)\">\n</ui-inline-field>\n```\n\n### Different Field Types\n```html\n<ui-inline-field\n label=\"Password\"\n [(value)]=\"password\"\n [fieldType]=\"'password'\"\n placeholder=\"Enter password\"\n (save)=\"onPasswordSave($event)\">\n</ui-inline-field>\n```\n\n### Custom Button Labels\n```html\n<ui-inline-field\n label=\"Assessment Name\"\n [(value)]=\"assessmentName\"\n [buttonConfig]=\"{\n saveLabel: 'Apply',\n cancelLabel: 'Discard',\n saveIcon: 'Book-filled',\n cancelIcon: 'Upload-filled'\n }\"\n (save)=\"onAssessmentNameSave($event)\">\n</ui-inline-field>\n```\n\n## API Reference\n\n### Inputs\n\n\| Property \| Type \| Default \| Description \|\n\|----------\|------\|---------\|-------------\|\n\| `id` \| `string` \| `'inline-field-{counter}'` \| Unique component ID for accessibility \|\n\| `label` \| `string` \| `''` \| Field label displayed above the input \|\n\| `value` \| `string` \| `''` \| Current field value \|\n\| `placeholder` \| `string` \| `''` \| Placeholder text when field is empty \|\n\| `required` \| `boolean` \| `false` \| Whether the field is required \|\n\| `disabled` \| `boolean` \| `false` \| Whether the field is disabled \|\n\| `fieldType` \| `FieldType` \| `'text'` \| Field type (text, password, email, etc.) \|\n\| `maxRows` \| `number` \| `0` \| Maximum rows for textarea fields \|\n\| `applicationTheme` \| `ApplicationTheme` \| `'light'` \| Application theme (light/dark/classic) \|\n\| `errors` \| `string[]` \| `[]` \| Array of error messages to display \|\n\| `showErrors` \| `boolean` \| `true` \| Whether to display error messages \|\n\| `fullWidth` \| `boolean` \| `false` \| Whether field takes full container width \|\n\| `ariaLabel` \| `string` \| `''` \| ARIA label for accessibility \|\n\| `buttonConfig` \| `InlineFieldButtonConfig` \| See below \| Save/cancel button configuration \|\n\| `validation` \| `InlineFieldValidation` \| `{}` \| Validation rules configuration \|\n\n### Button Configuration (`InlineFieldButtonConfig`)\n\n\| Property \| Type \| Default \| Description \|\n\|----------\|------\|---------\|-------------\|\n\| `saveLabel` \| `string` \| `'Save'` \| Save button label \|\n\| `cancelLabel` \| `string` \| `'Cancel'` \| Cancel button label \|\n\| `saveIcon` \| `IconName` \| `'Check-filled'` \| Save button icon name \|\n\| `cancelIcon` \| `IconName` \| `'Close-filled'` \| Cancel button icon name \|\n\| `showOnHoverOnly` \| `boolean` \| `false` \| Show buttons only on hover (styling support only) \|\n\nNote: Buttons are automatically styled with `secondary-inverted` variant and `small` size.\n\n### Validation Configuration (`InlineFieldValidation`)\n\n\| Property \| Type \| Description \|\n\|----------\|------\|-------------\|\n\| `required` \| `boolean` \| Field is required \|\n\| `minLength` \| `number` \| Minimum character length \|\n\| `maxLength` \| `number` \| Maximum character length \|\n\| `pattern` \| `RegExp` \| Validation pattern \|\n\| `customValidator` \| `(value: string) => string \\\| null` \| Custom validation function \|\n\n### Outputs\n\n\| Event \| Type \| Description \|\n\|-------\|------\|-------------\|\n\| `save` \| `InlineFieldChangeEvent` \| Emitted when save button is clicked \|\n\| `cancel` \| `void` \| Emitted when cancel button is clicked \|\n\| `valueChange` \| `string` \| Emitted when field value changes \|\n\| `editingModeChange` \| `boolean` \| Emitted when editing mode toggles \|\n\| `focusEvent` \| `void` \| Emitted when field receives focus \|\n\| `blurEvent` \| `void` \| Emitted when field loses focus \|\n\n### Change Event (`InlineFieldChangeEvent`)\n\n```typescript\ninterface InlineFieldChangeEvent {\n value: string; // The new value\n saved: boolean; // Whether change was saved (true) or cancelled (false)\n previousValue: string; // Previous value before the change\n}\n```\n\n## Examples\n\n### Form Integration\n\n```typescript\n// Component\nexport class MyComponent {\n userForm = this.fb.group({\n firstName: ['', [Validators.required]],\n lastName: ['', [Validators.required, Validators.minLength(2)]],\n email: ['', [Validators.required, Validators.email]]\n });\n\n onFieldSave(field: string, event: InlineFieldChangeEvent) {\n this.userForm.patchValue({ [field]: event.value });\n // Perform API save\n this.saveUser(this.userForm.value);\n }\n\n getFieldErrors(fieldName: string): string[] {\n const control = this.userForm.get(fieldName);\n if (control?.errors && control?.touched) {\n const errors = [];\n if (control.errors['required']) errors.push('This field is required');\n if (control.errors['minlength']) errors.push('Minimum length not met');\n if (control.errors['email']) errors.push('Invalid email format');\n return errors;\n }\n return [];\n }\n}\n```\n\n```html\n<!-- Template -->\n<div class=\"user-profile\">\n <ui-inline-field\n label=\"First Name\"\n [value]=\"userForm.get('firstName')?.value\"\n [required]=\"true\"\n [validation]=\"{ required: true }\"\n [errors]=\"getFieldErrors('firstName')\"\n (save)=\"onFieldSave('firstName', $event)\">\n </ui-inline-field>\n\n <ui-inline-field\n label=\"Last Name\"\n [value]=\"userForm.get('lastName')?.value\"\n [required]=\"true\"\n [validation]=\"{ required: true, minLength: 2 }\"\n [errors]=\"getFieldErrors('lastName')\"\n (save)=\"onFieldSave('lastName', $event)\">\n </ui-inline-field>\n\n <ui-inline-field\n label=\"Email\"\n [value]=\"userForm.get('email')?.value\"\n [required]=\"true\"\n [validation]=\"{ \n required: true,\n pattern: /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\n }\"\n [errors]=\"getFieldErrors('email')\"\n (save)=\"onFieldSave('email', $event)\">\n </ui-inline-field>\n</div>\n```\n\n### List Item Editing\n\n```html\n<div class=\"criteria-list\">\n @for (let criterion of criteria; trackBy: trackByCriterionId) {\n <div class=\"criterion-item\">\n <ui-checkbox \n [(ngModel)]=\"criterion.selected\">\n </ui-checkbox>\n \n <ui-inline-field\n [value]=\"criterion.name\"\n placeholder=\"Enter criterion name\"\n [fullWidth]=\"true\"\n [buttonConfig]=\"{\n saveLabel: 'Save',\n cancelLabel: 'Cancel'\n }\"\n (save)=\"updateCriterion(criterion.id, $event.value)\"\n (cancel)=\"onCancelEdit()\">\n </ui-inline-field>\n </div>\n }\n</div>\n```\n\n### Custom Validation\n\n```typescript\nexport class ValidationExample {\n // Custom validation function\n validateSkillName = (value: string): string \| null => {\n if (!value) return 'Skill name is required';\n if (value.length < 3) return 'Skill name must be at least 3 characters';\n if (this.existingSkills.includes(value.toLowerCase())) {\n return 'This skill already exists';\n }\n return null;\n };\n\n existingSkills = ['javascript', 'typescript', 'angular'];\n}\n```\n\n```html\n<ui-inline-field\n label=\"Skill Name\"\n [value]=\"newSkillName\"\n [validation]=\"{\n customValidator: validateSkillName\n }\"\n placeholder=\"Enter skill name\"\n (save)=\"addSkill($event.value)\">\n</ui-inline-field>\n```\n\n## Keyboard Navigation\n\nThe Inline Field component supports comprehensive keyboard navigation:\n\n- Click or Focus on the field → Enter edit mode\n- Escape in edit mode → Cancel changes and exit edit mode \n- Enter in edit mode → Save changes and exit edit mode (except with Shift+Enter)\n- Tab in edit mode → Navigate to Save button → Cancel button → next focusable element\n- Focus out of component → Automatically cancel changes and exit edit mode\n\n## Accessibility\n\n### ARIA Support\n- `role=\"button\"` on display mode for screen readers\n- `aria-label` for describing the field purpose\n- `aria-describedby` linking to error messages\n- `aria-live=\"polite\"` for error announcements\n\n### Screen Reader Instructions\n- Clear instructions for keyboard navigation\n- Proper labeling of edit states\n- Error message announcements\n\n### High Contrast & Reduced Motion\n- High contrast mode support with enhanced borders\n- Respects `prefers-reduced-motion` settings\n- Keyboard focus indicators\n\n## Theming\n\n### Light Theme (Default)\n- White background with dark borders\n- Black text and focus indicators\n- Standard button styling\n\n### Dark Theme\n```html\n<ui-inline-field\n applicationTheme=\"dark\"\n label=\"Dark Theme Field\"\n [(value)]=\"value\">\n</ui-inline-field>\n```\n\n### Classic Theme\n```html\n<ui-inline-field\n applicationTheme=\"classic\"\n label=\"Classic Theme Field\"\n [(value)]=\"value\">\n</ui-inline-field>\n```\n\n## Best Practices\n\n### ✅ Do\n- Use for short, single-line text edits\n- Provide clear validation feedback\n- Use appropriate button labels for context\n- Implement proper error handling\n- Test keyboard navigation thoroughly\n- Use `fullWidth` for fields in constrained layouts\n- Provide meaningful ARIA labels for accessibility\n- Handle focus-out events appropriately\n\n### ❌ Don't\n- Use for complex, multi-field forms\n- Auto-save without explicit user confirmation\n- Use for very long text content\n- Skip validation for important fields\n- Ignore accessibility requirements\n- Use without proper error handling\n- Forget to handle the automatic cancel on focus-out\n\n## Migration from Standard Field\n\nIf migrating from a standard field to inline field:\n\n```typescript\n// Before: Standard field\n<ui-field\n label=\"Title\"\n [(ngModel)]=\"title\"\n (blur)=\"saveTitle()\">\n</ui-field>\n\n// After: Inline field\n<ui-inline-field\n label=\"Title\"\n [(value)]=\"title\"\n (save)=\"saveTitle($event.value)\">\n</ui-inline-field>\n```\n\n## Troubleshooting\n\n### Common Issues\n\nQ: Buttons don't appear when editing\nA: Ensure the component has enough space for button positioning. Check CSS overflow properties. Buttons are positioned absolutely below the field.\n\nQ: Validation doesn't work\nA: Verify validation configuration is properly set and error handling is implemented. Make sure to handle validation errors in the `save` event.\n\nQ: Field exits edit mode unexpectedly\nA: This is intended behavior when focus leaves the component. Use proper save handling to prevent data loss.\n\nQ: Keyboard navigation issues\nA: Ensure proper tab order and no conflicting keyboard event handlers. The component handles Enter, Escape, and Tab keys.\n\nQ: Custom icons don't show\nA: Ensure you're using valid `IconName` values from the icon library. Check that the icon names exist in your icon set.\n\nFor more help, check the Storybook examples or contact the design system team.\n","template":"<div class=\"inline-field-container\">\n <div class=\"field-wrapper\" [ngClass]=\"{ 'is-editing': isEditing() }\">\n <ui-field\n [id]=\"id() + '-input'\"\n [label]=\"label()\"\n [placeholder]=\"placeholder()\"\n [value]=\"currentValue()\"\n [required]=\"required()\"\n [disabled]=\"disabled()\"\n [errors]=\"errors()\"\n [showBottomContent]=\"showErrors()\"\n [ariaLabel]=\"ariaLabel()\"\n [applicationTheme]=\"applicationTheme()\"\n [fullWidth]=\"true\"\n [isAutocompleteOff]=\"true\"\n [type]=\"fieldType()\"\n [maxRows]=\"maxRows()\"\n (input)=\"onInputChange($event)\"\n (fieldBlur)=\"onInputBlur()\"\n (focusin)=\"onInputFocus()\"\n #fieldElement\n data-testid=\"inline-field\"\n ></ui-field>\n\n <div ngIf=\"isEditing()\" class=\"action-buttons\">\n <ui-button\n [label]=\"saveButtonConfig().label\"\n [iconName]=\"saveButtonConfig().iconName\"\n [variant]=\"saveButtonConfig().variant\"\n [size]=\"saveButtonConfig().size\"\n [disabled]=\"saveButtonConfig().disabled\"\n [applicationTheme]=\"applicationTheme()\"\n [iconPosition]=\"'left'\"\n (buttonClickEvent)=\"saveEdit()\"\n [attr.aria-label]=\"'Save ' + (label() \|\| 'field')\"\n class=\"save-button\"\n ></ui-button>\n\n <ui-button\n [label]=\"cancelButtonConfig().label\"\n [iconName]=\"cancelButtonConfig().iconName\"\n [variant]=\"cancelButtonConfig().variant\"\n [size]=\"cancelButtonConfig().size\"\n [disabled]=\"cancelButtonConfig().disabled\"\n [applicationTheme]=\"applicationTheme()\"\n [iconPosition]=\"'left'\"\n (buttonClickEvent)=\"cancelEdit()\"\n [attr.aria-label]=\"'Cancel editing ' + (label() \|\| 'field')\"\n class=\"cancel-button\"\n ></ui-button>\n </div>\n </div>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":["aria-label"],"dataTestIds":["inline-field"],"materialComponents":[],"childUIComponents":["ui-field","ui-button"],"suggestedQueries":["screen.getByLabelText('label text')","screen.getByTestId('inline-field')"]},"filePath":"components/inline-field/inline-field.component.ts","supportsTheme":true,"lastModified":1775654032768.924},"logo":{"name":"LogoComponent","selector":"ui-logo","category":"logo","description":"To use the Logo component, you need to import the `LogoComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/logo","moduleName":"LogoComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"type","type":"LogoTypeEnum","defaultValue":"LogoTypeEnum.DEFAULT","required":false,"alias":null,"transform":null,"description":"Logo type","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"label","type":"unknown","defaultValue":"'POWERED BY'","required":false,"alias":null,"transform":null,"description":"Label. Only for ppoweredby type","isSignal":false},{"name":"width","type":"number","defaultValue":"200","required":false,"alias":null,"transform":null,"description":"Set logo width","isSignal":false},{"name":"allowResizing","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Allow change logo width","isSignal":false}],"outputs":[],"module":{"name":"LogoComponentModule","imports":["NgIf"],"exports":["LogoComponent"],"declarations":["LogoComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[{"name":"LogoTypeEnum","members":[{"name":"DEFAULT","value":"'default'"},{"name":"POWEREDBY","value":"'poweredby'"},{"name":"REVERSE","value":"'reverse'"},{"name":"PRIMARY_BRANDMARK_PINK","value":"'primary-brandmark-pink'"},{"name":"PRIMARY_LOCKUP_PINK","value":"'primary-lockup-pink'"},{"name":"PRIMARY_WORDMARK_PINK","value":"'primary-wordmark-pink'"},{"name":"SECONDARY_BRANDMARK_BLACK","value":"'secondary-brandmark-black'"},{"name":"SECONDARY_BRANDMARK_CREAM","value":"'secondary-brandmark-cream'"},{"name":"SECONDARY_LOCKUP_BLACK","value":"'secondary-lockup-black'"},{"name":"SECONDARY_LOCKUP_CREAM","value":"'secondary-lockup-cream'"},{"name":"SECONDARY_WORDMARK_BLACK","value":"'secondary-wordmark-black'"},{"name":"SECONDARY_WORDMARK_CREAM","value":"'secondary-wordmark-cream'"}]},{"name":"LogoPathEnum","members":[{"name":"DEFAULT","value":"'/images/testgorilla.svg'"},{"name":"POWEREDBY","value":"'/images/poweredbyTG.svg'"},{"name":"REVERSE","value":"'/images/reverseTG.svg'"},{"name":"PRIMARY_BRANDMARK_PINK","value":"'/images/rebrand-logo/primary_brandmark_pink.svg'"},{"name":"PRIMARY_LOCKUP_PINK","value":"'/images/rebrand-logo/primary_lockup_pink.svg'"},{"name":"PRIMARY_WORDMARK_PINK","value":"'/images/rebrand-logo/primary_wordmark_pink.svg'"},{"name":"SECONDARY_BRANDMARK_BLACK","value":"'/images/rebrand-logo/secondary_brandmark_black.svg'"},{"name":"SECONDARY_BRANDMARK_CREAM","value":"'/images/rebrand-logo/secondary_brandmark_cream.svg'"},{"name":"SECONDARY_LOCKUP_BLACK","value":"'/images/rebrand-logo/secondary_lockup_black.svg'"},{"name":"SECONDARY_LOCKUP_CREAM","value":"'/images/rebrand-logo/secondary_lockup_cream.svg'"},{"name":"SECONDARY_WORDMARK_BLACK","value":"'/images/rebrand-logo/secondary_wordmark_black.svg'"},{"name":"SECONDARY_WORDMARK_CREAM","value":"'/images/rebrand-logo/secondary_wordmark_cream.svg'"},{"name":"REBRAND_POWEREDBY","value":"'/images/rebrand-logo/powered-by.svg'"}]}]},"examples":[],"documentation":"## How to use\n\nTo use the Logo component, you need to import the `LogoComponentModule` in your module:\n\n```typescript\nimport { LogoComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n LogoComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-logo \n [type]=\"LogoTypeEnum.DEFAULT\" \n [applicationTheme]=\"theme\" \n [width]=\"200\">\n</ui-logo>\n```","template":"<ng-container ngIf=\"applicationTheme === 'classic'; else rebrandLogo\">\n <img [attr.src]=\"logoURL\" [alt]=\"type\" />\n</ng-container>\n\n<ng-template #rebrandLogo>\n <div ngIf=\"label && type === LogoTypeEnum.POWEREDBY; else others\" class=\"logo-label\" [style.width.px]=\"width\">\n <h3 class=\"bold\" [style.margin-left.px]=\"width 0.175\" [style.font-size.px]=\"width * 0.1\">\n {{ label }}\n </h3>\n <img [attr.src]=\"logoURL\" [alt]=\"type\" [width]=\"width\" />\n </div>\n\n <ng-template #others>\n <img [attr.src]=\"logoURL\" [alt]=\"type\" [width]=\"width\" />\n </ng-template>\n</ng-template>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":[],"suggestedQueries":[]},"filePath":"components/logo/logo.component.ts","supportsTheme":true,"lastModified":1775654032768.924},"media-card":{"name":"MediaCardComponent","selector":"ui-media-card","category":"media-card","description":"To use the Media Card component, you need to import it in your component:","importPath":"@testgorilla/tgo-ui/components/media-card","moduleName":"MediaCardComponentModule","standalone":true,"changeDetection":"Default","inputs":[{"name":"title","type":"string","defaultValue":null,"required":true,"alias":null,"transform":null,"description":"The title of the card","isSignal":false},{"name":"description","type":"string","defaultValue":null,"required":true,"alias":null,"transform":null,"description":"The description of the card","isSignal":false},{"name":"image","type":"string","defaultValue":null,"required":true,"alias":null,"transform":null,"description":"The image of the card","isSignal":false},{"name":"buttonLabel","type":"string","defaultValue":"''","required":true,"alias":null,"transform":null,"description":"The label of the button","isSignal":false}],"outputs":[{"name":"buttonClick","eventType":"void","alias":null,"description":"","isSignal":false}],"module":{"name":"","imports":[],"exports":[],"declarations":[],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Media Card component, you need to import it in your component:\n\n```typescript\nimport { MediaCardComponent } from '@testgorilla/tgo-ui';\n\n@Component({\n // ... other component properties\n imports: [\n // ... other imports\n MediaCardComponent\n ],\n // ...\n})\nexport class YourComponent { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-media-card\n title=\"Card Title\"\n description=\"Card description text goes here\"\n image=\"/path/to/image.svg\"\n buttonLabel=\"Click me\"\n (buttonClick)=\"onButtonClick()\">\n</ui-media-card>\n```","template":"<img [attr.src]=\"image\" alt=\"card image\" />\n\n<div class=\"media-card-content\">\n <div\n class=\"media-card-title\"\n [isMultiline]=\"true\"\n [matTooltip]=\"showTitleTooltip ? title : ''\"\n uiEllipseText\n (onChangeTextState)=\"showTitleTooltip = $event\"\n >\n {{ title }}\n </div>\n\n <div class=\"media-card-description\">\n {{ description }}\n </div>\n</div>\n\n<ui-divider [size]=\"'small'\"></ui-divider>\n\n<div class=\"media-card-action\">\n <ui-button [variant]=\"'ghost'\" [label]=\"buttonLabel\" (buttonClickEvent)=\"buttonClick.emit()\"></ui-button>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-divider","ui-button"],"suggestedQueries":[]},"filePath":"components/media-card/media-card.component.ts","supportsTheme":false,"lastModified":1775654032768.924},"media-dialog":{"name":"MediaDialogComponent","selector":"ui-media-dialog","category":"dialog","description":"To use the Media Dialog component, you need to import the `MediaDialogComponent` in your module:","importPath":"@testgorilla/tgo-ui/components/media-dialog","moduleName":"MediaDialogComponentModule","standalone":true,"changeDetection":"Default","inputs":[],"outputs":[],"module":{"name":"","imports":[],"exports":[],"declarations":[],"providers":[]},"types":{"typeAliases":[],"interfaces":[{"name":"MediaDialogStep","properties":[{"name":"subheader","type":"string","optional":true},{"name":"title","type":"string","optional":false},{"name":"body","type":"string","optional":false},{"name":"mediaContainer","type":"TemplateRef<any>","optional":false},{"name":"primaryButtonLabel","type":"string","optional":false},{"name":"secondaryButtonLabel","type":"string","optional":true},{"name":"backButtonLabel","type":"string","optional":true},{"name":"primaryButtonDataTestId","type":"string","optional":true},{"name":"secondaryButtonDataTestId","type":"string","optional":true},{"name":"backButtonDataTestId","type":"string","optional":true}]},{"name":"MediaDialogData","properties":[{"name":"steps","type":"MediaDialogStep[]","optional":true}]}],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Media Dialog component, you need to import the `MediaDialogComponent` in your module:\n\n```typescript\nimport { MediaDialogComponent } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n MediaDialogComponent\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component with the DialogService:\n\n```typescript\nimport { DialogService } from '@testgorilla/tgo-ui';\n\n@Component({\n // ...\n})\nexport class YourComponent {\n constructor(private dialogService: DialogService) {}\n\n openMediaDialog(): void {\n const dialogConfig = {\n size: 'small',\n extraData: {\n steps: [\n ...\n ],\n }\n };\n\n this.dialogService\n .open(MediaDialogComponent, dialogConfig)\n .afterClosed()\n .subscribe(result => {\n // Handle dialog close\n });\n }\n}\n```\n","template":"<ng-container>\n @if (steps && steps.length > 1) {\n <ui-progress-bar [progress]=\"(currentStepIndex + 1) * (100 / steps.length)\"></ui-progress-bar>\n }\n\n <ui-dialog [title]=\"title\" (closeEvent)=\"dialogRef.close(null)\" [showCloseButton]=\"true\">\n @if (mediaContainer) {\n <div class=\"media-container\">\n <ng-container [ngTemplateOutlet]=\"mediaContainer\"></ng-container>\n </div>\n }\n\n @if (subheader) {\n <h4 class=\"subheader\">{{ subheader }}</h4>\n }\n\n @if (body) {\n <div [innerHTML]=\"body\"></div>\n }\n\n <div mat-dialog-actions class=\"footer\">\n <div>\n @if (backButtonLabel && currentStepIndex > 0) {\n <ui-button\n variant=\"text-inline\"\n size=\"medium\"\n [label]=\"backButtonLabel\"\n [attr.data-testid]=\"backButtonDataTestId\"\n (click)=\"onBackButtonClick()\"\n ></ui-button>\n }\n </div>\n\n <div class=\"action-buttons\">\n @if (secondaryButtonLabel) {\n <ui-button\n variant=\"ghost\"\n [label]=\"secondaryButtonLabel\"\n [attr.data-testid]=\"secondaryButtonDataTestId\"\n (click)=\"onSecondaryButtonClick()\"\n ></ui-button>\n }\n @if (primaryButtonLabel) {\n <ui-button\n variant=\"primary\"\n [label]=\"primaryButtonLabel\"\n [attr.data-testid]=\"primaryButtonDataTestId\"\n (click)=\"onPrimaryButtonClick()\"\n ></ui-button>\n }\n </div>\n </div>\n </ui-dialog>\n</ng-container>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-progress-bar","ui-dialog","ui-button"],"suggestedQueries":[]},"filePath":"components/media-dialog/media-dialog.component.ts","supportsTheme":false,"lastModified":1775654032769.924},"multi-input":{"name":"MultiInputComponent","selector":"ui-multi-input","category":"multi-input","description":"To use the Multi Input component, you need to import the `MultiInputComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/multi-input","moduleName":"MultiInputComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"fullWidth","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"itemsList","type":"Record<string, string \| null \| number>[]","defaultValue":null,"required":true,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"itemTextField","type":"string","defaultValue":null,"required":true,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"itemValueField","type":"string","defaultValue":null,"required":true,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"value","type":"MultiInputValue","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"required","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"placeholder","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"allowDecimal","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"allowNegative","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"errors","type":"string[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"hideBuiltInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"hideLabelInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"maxCharacters","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"validators","type":"ValidatorFn[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"hasCustomErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true}],"outputs":[{"name":"valueChange","eventType":"MultiInputValue","alias":null,"description":"","isSignal":false}],"module":{"name":"MultiInputComponentModule","imports":["CommonModule","MatInputModule","MatSelectModule","DividerComponentModule","IconComponentModule","DropdownComponentModule","ReactiveFormsModule","DigitsOnlyDirective","HasValidationErrorPipe","ValidationErrorModule","FieldComponentModule"],"exports":["MultiInputComponent"],"declarations":["MultiInputComponent"],"providers":[]},"types":{"typeAliases":[{"name":"MultiInputValue","value":"{\n value: T;\n [key: string]: any;\n}"}],"interfaces":[],"enums":[]},"examples":[{"name":"Default","template":"<form [formGroup]=\"form\">\n <ui-multi-input\n formControlName=\"currency\"\n label=\"Currency\"\n itemTextField=\"label\"\n itemValueField=\"code\"\n [itemsList]=\"itemsList\"\n [required]=\"true\"\n [hasCustomErrors]=\"true\"\n applicationTheme=\"${_theme}\"\n >\n <div custom-errors>\n <ui-validation-error\n [ngControl]=\"form.controls.currency\"\n [touchedOn]=\"form.controls.currency.touched\"\n label=\"Currency\"\n applicationTheme=\"${_theme}\"\n ></ui-validation-error>\n </div>\n </ui-multi-input>\n </form>","props":{"label":"'Currency'","itemTextField":"'label'","itemValueField":"'code'","value":"{ value: 100, code: 'usd'"}},{"name":"WithError","template":"<form [formGroup]=\"form\">\n <ui-multi-input\n formControlName=\"currency\"\n label=\"Currency\"\n itemTextField=\"label\"\n itemValueField=\"code\"\n [itemsList]=\"itemsList\"\n [required]=\"true\"\n [hasCustomErrors]=\"true\"\n applicationTheme=\"${_theme}\"\n >\n <div custom-errors>\n <ui-validation-error\n [ngControl]=\"form.controls.currency\"\n [touchedOn]=\"form.controls.currency.touched\"\n label=\"Currency\"\n applicationTheme=\"${_theme}\"\n ></ui-validation-error>\n </div>\n </ui-multi-input>\n </form>","props":{"label":"'Currency'","itemTextField":"'label'","itemValueField":"'code'","value":"{ value: 100, code: 'usd'"}},{"name":"WithCustomValidationErrors","template":"<form [formGroup]=\"form\">\n <ui-multi-input\n formControlName=\"currency\"\n label=\"Currency\"\n itemTextField=\"label\"\n itemValueField=\"code\"\n [itemsList]=\"itemsList\"\n [required]=\"true\"\n [hasCustomErrors]=\"true\"\n applicationTheme=\"${_theme}\"\n >\n <div custom-errors>\n <ui-validation-error\n [ngControl]=\"form.controls.currency\"\n [touchedOn]=\"form.controls.currency.touched\"\n label=\"Currency\"\n applicationTheme=\"${_theme}\"\n ></ui-validation-error>\n </div>\n </ui-multi-input>\n </form>","props":{}}],"documentation":"## How to use\n\nTo use the Multi Input component, you need to import the `MultiInputComponentModule` in your module:\n\n```typescript\nimport { MultiInputComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n MultiInputComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-multi-input\n label=\"Currency\"\n itemTextField=\"label\"\n itemValueField=\"code\"\n [itemsList]=\"[\n { code: 'usd', label: 'USD ($)' },\n { code: 'eur', label: 'EUR (€)' }\n ]\"\n [value]=\"{ value: 100, code: 'usd' }\"\n applicationTheme=\"light\">\n</ui-multi-input>\n```","template":"<div [formGroup]=\"multiInputForm\">\n <div class=\"controls-wrapper\">\n <ui-dropdown\n [hasError]=\"controlHasError\"\n [formControlName]=\"itemValueField()\"\n [valueList]=\"itemsList()\"\n [textField]=\"itemTextField()\"\n [valueField]=\"itemValueField()\"\n [showBottomContent]=\"false\"\n [allowClear]=\"false\"\n (closed)=\"markAsTouched()\"\n ></ui-dropdown>\n\n <ui-field\n [hasError]=\"controlHasError\"\n formControlName=\"value\"\n [label]=\"label()\"\n [placeholder]=\"placeholder()\"\n [required]=\"required()\"\n [hideBuiltInErrors]=\"true\"\n [showBottomContent]=\"false\"\n [allowOnlyDigits]=\"true\"\n [fullWidth]=\"fullWidth\"\n [allowNegative]=\"allowNegative()\"\n (focusout)=\"markAsTouched()\"\n ></ui-field>\n </div>\n\n @if (!hasCustomErrors()) {\n <mat-hint class=\"info\" ngIf=\"!controlHasError && maxCharacters() && !errors()?.length\"\n >{{ getValueLength() }} / {{ maxCharacters() }}</mat-hint\n >\n\n @if (errors()?.length \|\| (ngControl?.errors \| hasValidationError)) {\n <mat-hint class=\"error\">\n @for (error of errors(); track error) {\n <ui-icon name=\"Error-in-line\"></ui-icon>{{ error }}\n }\n @if ((ngControl?.errors \| hasValidationError) && !hideBuiltInErrors()) {\n <ui-validation-error\n [touchedOn]=\"!controlHasError\"\n [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors() ? null : label()\"\n ></ui-validation-error>\n }\n </mat-hint>\n }\n }\n <ng-content select=\"[custom-errors]\"></ng-content>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":["mat-hint"],"childUIComponents":["ui-dropdown","ui-field","ui-icon","ui-validation-error"],"suggestedQueries":[]},"filePath":"components/multi-input/multi-input.component.ts","supportsTheme":false,"lastModified":1775654032769.924},"navbar":{"name":"NavbarComponent","selector":"ui-navbar","category":"navbar","description":"To use the Navbar component, you need to import the `NavbarComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/navbar","moduleName":"NavbarComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"routes","type":"IRoute[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"Routes object","isSignal":false},{"name":"userName","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"User first name and last name","isSignal":false},{"name":"email","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"User email","isSignal":false},{"name":"menuItems","type":"MenuItem[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"Menu items to show in menu above the Log out button","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"contentTemplateRef","type":"TemplateRef<any>","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"It's ng-content for mobile version","isSignal":false},{"name":"userInfoExtraTemplateRef","type":"TemplateRef<any>","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Additional info template reference for the extra user info in the dropdown/sidesheet","isSignal":false},{"name":"menuContentTemplateRef","type":"TemplateRef<any>","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Custom content template reference for the menu section between user info and menu items.\nUse this to add custom components like credits display.","isSignal":false},{"name":"isAvatar","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Show avatar with user initials","isSignal":false},{"name":"menuClass","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Sets class for the menu","isSignal":false},{"name":"mobileBreakpoint","type":"number","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Mobile breakpoint","isSignal":false},{"name":"activedRoute","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Actived route id","isSignal":true}],"outputs":[{"name":"navigateEvent","eventType":"string","alias":null,"description":"","isSignal":false},{"name":"menuItemClicked","eventType":"string","alias":null,"description":"","isSignal":false},{"name":"logoutEvent","eventType":"void","alias":null,"description":"","isSignal":false},{"name":"menuState","eventType":"MenuState","alias":null,"description":"","isSignal":false}],"module":{"name":"NavbarComponentModule","imports":["CommonModule","MatToolbarModule","MatIconModule","MatButtonModule","MatRippleModule","MatMenuModule","LogoComponentModule","IconComponentModule","UiTranslatePipe","AvatarComponentModule","SideSheetComponentModule","ButtonComponentModule","MobileNavbarSideSheetComponent","BadgeComponentModule"],"exports":["NavbarComponent"],"declarations":["NavbarComponent"],"providers":[]},"types":{"typeAliases":[{"name":"ScreenSize","value":"'mobile' \| 'tablet' \| 'desktop'"}],"interfaces":[{"name":"IRoute","properties":[{"name":"id","type":"string","optional":false},{"name":"title","type":"string","optional":false},{"name":"badgeOptions","type":"RouteBadge","optional":true}]},{"name":"RouteBadge","properties":[{"name":"color","type":"RebrandBadgeColor","optional":false},{"name":"text","type":"string","optional":true},{"name":"variant","type":"BadgeVariant","optional":true},{"name":"notificationsAmount","type":"number","optional":true}]},{"name":"MenuItem","properties":[{"name":"id","type":"string","optional":false},{"name":"icon","type":"IconName","optional":false},{"name":"text","type":"string","optional":false}]},{"name":"MenuState","properties":[{"name":"screenSize","type":"ScreenSize","optional":false},{"name":"isOpened","type":"boolean","optional":false}]}],"enums":[]},"examples":[{"name":"Default","template":"<ng-template #temp>\n <ui-button applicationTheme=\"${_theme}\" label=\"Press\"></ui-button>\n </ng-template>\n <ui-navbar applicationTheme=\"${_theme}\"\n [contentTemplateRef]=\"temp\"\n [userName]=\"'Markus Letterman'\"\n [routes]=\"[\n {\n id: 'assessments',\n title: 'Assessments',\n },\n {\n id: 'results',\n title: 'Results',\n },\n ]\"\n [menuItems]=\"[{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n }]\"\n activedRoute=\"${ROUTES[0].id}\">\n <ui-button actions size=\"small\" applicationTheme=\"${_theme}\" label=\"PressMe\"></ui-button>\n </ui-navbar>","props":{"userName":"'Markus Letterman'","routes":"ROUTES","activedRoute":"ROUTES[0].id","email":"'markusletterman@gmail.com'","menuItems":"[","id":"'profile'","icon":"'User-profile'","text":"'Edit profile info'"}},{"name":"WithNotificationBadge","template":"<ng-template #temp>\n <ui-button applicationTheme=\"${_theme}\" label=\"Press\"></ui-button>\n </ng-template>\n <ui-navbar applicationTheme=\"${_theme}\"\n [contentTemplateRef]=\"temp\"\n [userName]=\"'Markus Letterman'\"\n [routes]=\"[\n {\n id: 'assessments',\n title: 'Assessments',\n },\n {\n id: 'results',\n title: 'Results',\n },\n ]\"\n [menuItems]=\"[{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n }]\"\n activedRoute=\"${ROUTES[0].id}\">\n <ui-button actions size=\"small\" applicationTheme=\"${_theme}\" label=\"PressMe\"></ui-button>\n </ui-navbar>","props":{"userName":"'Markus Letterman'","routes":"ROUTES_WITH_NOTIFICATION","activedRoute":"ROUTES_WITH_NOTIFICATION[0].id","email":"'markusletterman@gmail.com'","menuItems":"[","id":"'profile'","icon":"'User-profile'","text":"'Edit profile info'"}},{"name":"WithContent","template":"<ng-template #temp>\n <ui-button applicationTheme=\"${_theme}\" label=\"Press\"></ui-button>\n </ng-template>\n <ui-navbar applicationTheme=\"${_theme}\"\n [contentTemplateRef]=\"temp\"\n [userName]=\"'Markus Letterman'\"\n [routes]=\"[\n {\n id: 'assessments',\n title: 'Assessments',\n },\n {\n id: 'results',\n title: 'Results',\n },\n ]\"\n [menuItems]=\"[{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n }]\"\n activedRoute=\"${ROUTES[0].id}\">\n <ui-button actions size=\"small\" applicationTheme=\"${_theme}\" label=\"PressMe\"></ui-button>\n </ui-navbar>","props":{"userName":"'Markus Letterman'","routes":"ROUTES","isAvatar":"true","activedRoute":"ROUTES[0].id","email":"'markusletterman@gmail.com'","menuItems":"[","id":"'profile'","icon":"'User-profile'","text":"'Edit profile info'"}},{"name":"WithAvatar","template":"<ng-template #extraContent>\n User info extra content\n </ng-template>\n <ui-navbar applicationTheme=\"${_theme}\"\n [userName]=\"'Markus Letterman'\"\n [routes]=\"[\n {\n id: 'assessments',\n title: 'Assessments',\n },\n {\n id: 'results',\n title: 'Results',\n },\n ]\"\n [menuItems]=\"[{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n }]\"\n activedRoute=\"${ROUTES[0].id}\"\n email=\"markusletterman@gmail.com\"\n [userInfoExtraTemplateRef]=\"extraContent\">\n </ui-navbar>","props":{"userName":"'Markus Letterman'","routes":"ROUTES","isAvatar":"true","activedRoute":"ROUTES[0].id","email":"'markusletterman@gmail.com'","menuItems":"[","id":"'profile'","icon":"'User-profile'","text":"'Edit profile info'"}},{"name":"WithUserInfoExtra","template":"<ng-template #extraContent>\n User info extra content\n </ng-template>\n <ui-navbar applicationTheme=\"${_theme}\"\n [userName]=\"'Markus Letterman'\"\n [routes]=\"[\n {\n id: 'assessments',\n title: 'Assessments',\n },\n {\n id: 'results',\n title: 'Results',\n },\n ]\"\n [menuItems]=\"[{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n }]\"\n activedRoute=\"${ROUTES[0].id}\"\n email=\"markusletterman@gmail.com\"\n [userInfoExtraTemplateRef]=\"extraContent\">\n </ui-navbar>","props":{}},{"name":"WithMenuContent","template":"<ng-template #menuContent>\n <div class=\"credits-container\">\n <div class=\"credits-header\">\n <span class=\"credits-label\">Credits</span>\n <div class=\"credits-value\">\n <span class=\"credits-count\">360 left</span>\n <ui-icon name=\"Arrow-chevron-right-in-line\" size=\"16\"></ui-icon>\n </div>\n </div>\n <div class=\"credits-progress-bar\">\n <div class=\"credits-progress-fill\"></div>\n </div>\n </div>\n </ng-template>\n <ui-navbar applicationTheme=\"${_theme}\"\n [menuContentTemplateRef]=\"menuContent\"\n [userName]=\"'Markus Letterman'\"\n [email]=\"'Markus.letterman@email.com'\"\n [routes]=\"[{ id: 'assessments', title: 'Assessments' }]\"\n [menuItems]=\"[\n { id: 'invite', icon: 'User-profile', text: 'Invite team' },\n { id: 'settings', icon: 'User-profile', text: 'Settings' }\n ]\"\n activedRoute=\"assessments\">\n </ui-navbar>\n <style>\n .credits-container {\n margin: 0 16px 16px 16px;\n padding: 16px;\n background: #F5F5F5;\n border-radius: 12px;\n cursor: pointer;\n }\n .credits-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n }\n .credits-label {\n font-weight: 700;\n font-size: 14px;\n font-family: 'ModernGothic', sans-serif;\n color: #242424;\n }\n .credits-value {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n .credits-count {\n font-size: 14px;\n color: #666;\n }\n .credits-progress-bar {\n margin-top: 12px;\n height: 8px;\n background: #E0E0E0;\n border-radius: 4px;\n overflow: hidden;\n }\n .credits-progress-fill {\n width: 70%;\n height: 100%;\n background: linear-gradient(90deg, #E91E8C, #FF69B4);\n border-radius: 4px;\n }\n </style>","props":{}}],"documentation":"## How to use\n\nTo use the Navbar component, you need to import the `NavbarComponentModule` in your module:\n\n```typescript\nimport { NavbarComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n NavbarComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-navbar\n [userName]=\"'John Doe'\"\n [routes]=\"routes\"\n [activedRoute]=\"currentRoute\"\n [menuItems]=\"menuItems\"\n (navigateEvent)=\"onNavigate($event)\"\n (menuItemClicked)=\"onMenuItemClicked($event)\"\n (logoutEvent)=\"logout()\">\n</ui-navbar>\n```","template":"<ui-side-sheet\n [applicationTheme]=\"applicationTheme\"\n (openChange)=\"onChangeMenuState($event, screenSize)\"\n [position]=\"(isMobile$ \| async) ? 'start' : 'end'\"\n>\n <mat-toolbar [attr.theme]=\"applicationTheme\">\n <div class=\"custom-toolbar row\">\n <ui-logo\n [applicationTheme]=\"applicationTheme\"\n class=\"logo\"\n (click)=\"navigate('')\"\n [allowResizing]=\"true\"\n [width]=\"(isMobile$ \| async) ? 160 : (isTablet$ \| async) ? 30 : 160\"\n [type]=\"\n (isMobile$ \| async)\n ? logoType.DEFAULT\n : (isTablet$ \| async)\n ? logoType.PRIMARY_BRANDMARK_PINK\n : logoType.DEFAULT\n \"\n ></ui-logo>\n\n <ui-button\n (click)=\"openMobileMenu()\"\n ngIf=\"isMobile$ \| async\"\n [variant]=\"'text'\"\n [companyColor]=\"'#242424'\"\n [applicationTheme]=\"'light'\"\n [iconName]=\"isOpened ? 'Close-in-line' : 'Menu-burger-in-line'\"\n [justIcon]=\"true\"\n ></ui-button>\n\n <div class=\"navigation row\">\n <a\n ngFor=\"let route of routes\"\n (click)=\"navigate(route.id); $event.preventDefault()\"\n [href]=\"route.id\"\n [attr.data-testid]=\"route.id\"\n data-test-role=\"nav-route\"\n [ngClass]=\"{ active: activeRoutesMap().get(route.id) }\"\n >\n <ui-badge\n ngIf=\"route?.badgeOptions\"\n [label]=\"route.badgeOptions!.text ?? ''\"\n [rebrandColor]=\"route.badgeOptions!.color\"\n [variant]=\"route.badgeOptions!.variant ?? 'primary'\"\n [notificationsAmount]=\"route.badgeOptions!.notificationsAmount ?? 0\"\n ></ui-badge>\n <span>{{ route.title }}</span>\n </a>\n </div>\n\n <div class=\"actions\">\n <div class=\"custom-actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n\n <button mat-button class=\"profile-menu\" ngIf=\"isTablet$ \| async; else pc\" (click)=\"openMobileMenu()\">\n <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n </button>\n\n <ng-template #pc>\n <button\n mat-button\n class=\"profile-menu\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n (menuOpened)=\"onChangeMenuState(true, 'desktop')\"\n (menuClosed)=\"onChangeMenuState(false, 'desktop')\"\n [matMenuTriggerFor]=\"menu\"\n >\n <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n </button>\n </ng-template>\n\n <ng-template #buttonContent>\n <div class=\"profile-button-content\">\n <ng-container ngIf=\"isAvatar; else onlyName\">\n <ui-avatar\n data-testid=\"profile-button\"\n [ngClass]=\"{ opened: menu._panelAnimationState !== 'void' }\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"userName\"\n [size]=\"AvatarSize.SMALL_MEDIUM\"\n ></ui-avatar>\n </ng-container>\n\n <ng-template #onlyName>\n {{ userName }}\n </ng-template>\n\n <mat-icon ngIf=\"applicationTheme === 'classic'; else newThemeIcon\" iconPositionEnd>expand_more</mat-icon>\n <ng-template #newThemeIcon>\n <ui-icon\n [size]=\"'24'\"\n ngIf=\"!isAvatar\"\n [name]=\"menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n </ng-template>\n </div>\n </ng-template>\n </div>\n </div>\n </mat-toolbar>\n\n <ng-content></ng-content>\n\n <mat-menu [class]=\"menuClass\" #menu=\"matMenu\">\n <ng-container ngIf=\"applicationTheme === 'classic'; else newTheme\">\n <button\n ngFor=\"let e of menuItems\"\n mat-menu-item\n (click)=\"clickMenuItem(e.id)\"\n [attr.data-testid]=\"e.id\"\n data-test-role=\"profile-menu-item\"\n >\n <div class=\"menu-item\">\n <ui-icon ngIf=\"e?.icon\" [name]=\"e.icon\" size=\"24\"></ui-icon>\n {{ e.text }}\n </div>\n </button>\n\n <button data-testid=\"logout-button\" mat-menu-item (click)=\"logout()\">\n <mat-icon>power_settings_new</mat-icon>\n {{ translationContext + 'LOG_OUT' \| uiTranslate \| async }}\n </button>\n </ng-container>\n\n <ng-template #newTheme>\n <ui-mobile-navbar-side-sheet\n [isDesktop]=\"true\"\n [menuItems]=\"menuItems\"\n [userName]=\"userName\"\n [routes]=\"routes\"\n [activedRoute]=\"activedRoute()\"\n [email]=\"email\"\n [applicationTheme]=\"applicationTheme\"\n [contentTemplateRef]=\"contentTemplateRef\"\n [userInfoExtraTemplateRef]=\"userInfoExtraTemplateRef\"\n [menuContentTemplateRef]=\"menuContentTemplateRef\"\n (menuItemClicked)=\"clickMenuItem($event)\"\n (logoutEvent)=\"logout()\"\n >\n </ui-mobile-navbar-side-sheet>\n </ng-template>\n </mat-menu>\n</ui-side-sheet>\n","queryGuide":{"roles":["nav-route","profile-menu-item","menu"],"ariaAttributes":[],"dataTestIds":["profile-button","logout-button"],"materialComponents":["mat-toolbar","mat-icon","mat-menu"],"childUIComponents":["ui-side-sheet","ui-logo","ui-button","ui-badge","ui-avatar","ui-icon","ui-mobile-navbar-side-sheet"],"suggestedQueries":["screen.getByRole('nav-route')","screen.getByRole('profile-menu-item')","screen.getByRole('menu')","screen.getByTestId('profile-button')","screen.getByTestId('logout-button')"]},"filePath":"components/navbar/navbar.component.ts","supportsTheme":true,"lastModified":1775654032770.924},"mobile-navbar-side-sheet":{"name":"MobileNavbarSideSheetComponent","selector":"ui-mobile-navbar-side-sheet","category":"mobile-navbar-side-sheet","description":"MobileNavbarSideSheetComponent component","importPath":"@testgorilla/tgo-ui/components/mobile-navbar-side-sheet","moduleName":"MobileNavbarSideSheetComponentModule","standalone":true,"changeDetection":"Default","inputs":[{"name":"routes","type":"IRoute[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"email","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"userName","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"menuItems","type":"MenuItem[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"contentTemplateRef","type":"TemplateRef<any>","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"userInfoExtraTemplateRef","type":"TemplateRef<any>","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"menuContentTemplateRef","type":"TemplateRef<any>","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"isDesktop","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"activedRoute","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":true}],"outputs":[{"name":"navigateEvent","eventType":"string","alias":null,"description":"","isSignal":false},{"name":"menuItemClicked","eventType":"string","alias":null,"description":"","isSignal":false},{"name":"logoutEvent","eventType":"void","alias":null,"description":"","isSignal":false}],"module":{"name":"","imports":[],"exports":[],"declarations":[],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"","template":"<div class=\"mobile-navbar-container\">\n <ng-container ngIf=\"isDesktop\" [ngTemplateOutlet]=\"userInfo\"></ng-container>\n\n @if (menuContentTemplateRef) {\n <ng-container [ngTemplateOutlet]=\"menuContentTemplateRef\"></ng-container>\n }\n\n <div class=\"routes\">\n <div\n ngFor=\"let route of routes\"\n [attr.data-testid]=\"route.id\"\n data-test-role=\"nav-route\"\n tabindex=\"0\"\n (click)=\"navigate(route.id)\"\n (keydown.enter)=\"navigate(route.id)\"\n class=\"route\"\n [ngClass]=\"{ active: activeRoutesMap().get(route.id) }\"\n >\n <span>{{ route.title }}</span>\n </div>\n </div>\n\n <div class=\"settings\">\n <ng-container ngFor=\"let e of menuItems\">\n <div ngIf=\"e\" class=\"menu-item\">\n <ui-button\n [attr.data-testid]=\"e.id\"\n data-test-role=\"menu-item\"\n [applicationTheme]=\"applicationTheme\"\n [fullWidth]=\"true\"\n [disabledScaleOnClick]=\"true\"\n [variant]=\"'menuCell'\"\n iconPosition=\"left\"\n [iconName]=\"e.icon\"\n [label]=\"e.text\"\n (buttonClickEvent)=\"clickMenuItem(e.id)\"\n (keydown.Tab)=\"$event.stopPropagation()\"\n (keydown.shift.tab)=\"$event.stopPropagation()\"\n [ariaLabel]=\"e.text + '--' + e.text\"\n ></ui-button>\n </div>\n </ng-container>\n </div>\n</div>\n\n<div class=\"bottom-content\" [ngClass]=\"{ desktop: isDesktop }\">\n <ng-container ngIf=\"!isDesktop\" [ngTemplateOutlet]=\"contentTemplateRef\"></ng-container>\n <ng-container ngIf=\"isDesktop; else tablet\">\n <div class=\"menu-item\">\n <ui-button\n data-testid=\"logout-button\"\n [applicationTheme]=\"applicationTheme\"\n [fullWidth]=\"true\"\n [disabledScaleOnClick]=\"true\"\n [variant]=\"'menuCell'\"\n iconPosition=\"left\"\n [iconName]=\"'Logout-in-line'\"\n [label]=\"(translationContext + 'LOG_OUT' \| uiTranslate \| async)!\"\n (buttonClickEvent)=\"logout()\"\n (keydown.Tab)=\"$event.stopPropagation()\"\n (keydown.shift.tab)=\"$event.stopPropagation()\"\n ></ui-button>\n </div>\n </ng-container>\n\n <ng-template #tablet>\n <ng-container [ngTemplateOutlet]=\"userInfo\"></ng-container>\n </ng-template>\n</div>\n\n<ng-template #userInfo>\n <div class=\"user-info\" [ngClass]=\"{ desktop: isDesktop }\">\n <ui-avatar [size]=\"avatarSize.MEDIUM\" [name]=\"userName\"></ui-avatar>\n <div class=\"details-container\">\n <div class=\"name-container\">\n <span class=\"user-name dd-privacy-mask\">{{ userName }}</span>\n <span class=\"user-email dd-privacy-mask\">{{ email }}</span>\n @if (userInfoExtraTemplateRef) {\n <ng-container [ngTemplateOutlet]=\"userInfoExtraTemplateRef\"></ng-container>\n }\n </div>\n <ui-button\n ngIf=\"!isDesktop\"\n data-testid=\"logout-button\"\n [tooltip]=\"(translationContext + 'LOG_OUT' \| uiTranslate \| async)!\"\n [iconName]=\"'Logout-in-line'\"\n [applicationTheme]=\"'light'\"\n [variant]=\"'icon-button'\"\n (click)=\"logout()\"\n ></ui-button>\n </div>\n </div>\n</ng-template>\n","queryGuide":{"roles":["nav-route","menu-item"],"ariaAttributes":[],"dataTestIds":["logout-button"],"materialComponents":[],"childUIComponents":["ui-button","ui-avatar"],"suggestedQueries":["screen.getByRole('nav-route')","screen.getByRole('menu-item')","screen.getByTestId('logout-button')"]},"filePath":"components/mobile-navbar-side-sheet/mobile-navbar-side-sheet.component.ts","supportsTheme":true,"lastModified":1775654032770.924},"overflow-menu":{"name":"OverflowMenuComponent","selector":"ui-overflow-menu","category":"overflow-menu","description":"To use the Overflow Menu component, you need to import the `OverflowMenuComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/overflow-menu","moduleName":"OverflowMenuComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"buttons","type":"OverflowMenuButtonsType[]","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Menu buttons","isSignal":false},{"name":"iconTrigger","type":"IconName","defaultValue":"'Menu-ellipsis'","required":false,"alias":null,"transform":null,"description":"Menu icon trigger","isSignal":false},{"name":"menuLabel","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Label menu","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"ariaLabel","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"A string representing the ARIA label for accessibility.\nThis label is used to provide an accessible name for the input element.","isSignal":false},{"name":"ariaRequired","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"describedby","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input for description.","isSignal":false},{"name":"contentTemplateRef","type":"TemplateRef<any>","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Custom template for the button (optional)","isSignal":false},{"name":"buttonVariant","type":"ButtonColor \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"Button variant for the overflow menu trigger\nWhen null, uses the default icon rendering","isSignal":false},{"name":"buttonSize","type":"ButtonSize","defaultValue":"'medium'","required":false,"alias":null,"transform":null,"description":"Button size for the overflow menu trigger","isSignal":false},{"name":"menuConfig","type":"MenuConfig","defaultValue":"DEFAULT_MENU_CONFIG","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"isDynamicMenu","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"withRemovableOption","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false}],"outputs":[{"name":"selectItem","eventType":"string","alias":null,"description":"","isSignal":false},{"name":"menuOpened","eventType":"void","alias":null,"description":"","isSignal":false},{"name":"menuClosed","eventType":"void","alias":null,"description":"","isSignal":false}],"module":{"name":"OverflowMenuComponentModule","imports":["CommonModule","ButtonComponentModule","IconComponentModule","MatMenuModule","MatButtonModule","MatTooltipModule","EllipseTextDirective","UiTranslatePipe"],"exports":["OverflowMenuComponent"],"declarations":["OverflowMenuComponent"],"providers":[]},"types":{"typeAliases":[{"name":"OverflowMenuButtonsType","value":"{\n icon?: IconName;\n label: string;\n isDestructive?: boolean;\n value: string;\n disabled?: boolean;\n btnTemplate?: TemplateRef<any>;\n subMenu?: OverflowMenuButtonsType[] \| number;\n action?: number \| string;\n describedby?: string;\n ariaLabel?: string;\n tooltipText?: string;\n isTitleButton?: boolean;\n hideTitleButton?: boolean;\n isPremium?: boolean;\n}"},{"name":"ButtonOptions","value":"{\n isTextEllipsed?: boolean;\n isFocused?: boolean;\n isHovered?: boolean;\n}"},{"name":"MenuConfig","value":"{\n xPosition: MenuPositionX;\n yPosition: MenuPositionY;\n overlapTrigger: boolean;\n panelClass: string;\n}"},{"name":"OverflowMenuButtonModify","value":"OverflowMenuButtonsType & ButtonOptions"}],"interfaces":[],"enums":[]},"examples":[{"name":"Default","template":"<ng-template #temp>\n <h4>Custom content</h4>\n </ng-template>\n <div style=\"width: fit-content\">\n <ui-overflow-menu applicationTheme=\"${_theme}\"\n [contentTemplateRef]=\"temp\"\n [buttons]=\"[\n {\n icon: 'Copy',\n disabled: true,\n label: 'Copy',\n value: 'Copy value',\n },\n {\n icon: 'Delete',\n label: 'Delete',\n value: 'Delete value',\n isDestructive: true,\n }\n ]\"\n >\n </ui-overflow-menu>\n </div>","props":{"iconTrigger":"'Menu-ellipsis'","buttons":"[","icon":"'Edit'","label":"'Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit EditEdit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit'","value":"'Edit value'","subMenu":"["}},{"name":"Opened","template":"<ng-template #temp>\n <h4>Custom content</h4>\n </ng-template>\n <div style=\"width: fit-content\">\n <ui-overflow-menu applicationTheme=\"${_theme}\"\n [contentTemplateRef]=\"temp\"\n [buttons]=\"[\n {\n icon: 'Copy',\n disabled: true,\n label: 'Copy',\n value: 'Copy value',\n },\n {\n icon: 'Delete',\n label: 'Delete',\n value: 'Delete value',\n isDestructive: true,\n }\n ]\"\n >\n </ui-overflow-menu>\n </div>","props":{"iconTrigger":"'Menu-ellipsis'","buttons":"[","icon":"'Edit'","label":"'Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit EditEdit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit'","value":"'Edit value'","subMenu":"["}},{"name":"CustomContent","template":"<ng-template #temp>\n <h4>Custom content</h4>\n </ng-template>\n <div style=\"width: fit-content\">\n <ui-overflow-menu applicationTheme=\"${_theme}\"\n [contentTemplateRef]=\"temp\"\n [buttons]=\"[\n {\n icon: 'Copy',\n disabled: true,\n label: 'Copy',\n value: 'Copy value',\n },\n {\n icon: 'Delete',\n label: 'Delete',\n value: 'Delete value',\n isDestructive: true,\n }\n ]\"\n >\n </ui-overflow-menu>\n </div>","props":{"buttonVariant":"'ghost'","buttons":"[","icon":"'Copy'","label":"'Copy item'","value":"'copy'"}}],"documentation":"## How to use\n\nTo use the Overflow Menu component, you need to import the `OverflowMenuComponentModule` in your module:\n\n```typescript\nimport { OverflowMenuComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n OverflowMenuComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-overflow-menu\n iconTrigger=\"Menu-ellipsis\"\n [buttons]=\"[\n {\n icon: 'Edit',\n label: 'Edit',\n value: 'edit_action'\n },\n {\n icon: 'Delete',\n label: 'Delete',\n value: 'delete_action',\n isDestructive: true\n }\n ]\"\n applicationTheme=\"light\"\n (itemSelected)=\"handleMenuSelection($event)\">\n</ui-overflow-menu>\n```\n\nThe component supports nested sub-menus and various button states including disabled and destructive actions.","template":"<div class=\"overflow-menu-container\" [attr.theme]=\"applicationTheme\">\n <button\n #buttonElement\n [ngClass]=\"{\n 'icon-button': !contentTemplateRef && !buttonVariant,\n 'content-template': contentTemplateRef,\n 'no-hover': buttonVariant,\n }\"\n ngIf=\"isMenuRendered()\"\n [matMenuTriggerFor]=\"matmenus.first\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.aria-describedby]=\"'describedby'\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"isMenuOpened()\"\n (menuOpened)=\"onMenuOpened()\"\n (menuClosed)=\"onMenuClosed()\"\n class=\"overflow-menu-opener\"\n [matTooltip]=\"menuLabel\"\n >\n <span [id]=\"'describedby'\" [style.display]=\"'none'\">{{ describedby }}</span>\n @if (buttonVariant) {\n <ui-button\n [variant]=\"buttonVariant\"\n [justIcon]=\"true\"\n [iconName]=\"iconTrigger\"\n [applicationTheme]=\"applicationTheme\"\n [disabled]=\"false\"\n [size]=\"buttonSize\"\n >\n </ui-button>\n } @else if (contentTemplateRef) {\n <ng-container [ngTemplateOutlet]=\"contentTemplateRef\"></ng-container>\n } @else {\n <ui-icon\n [name]=\"iconTrigger\"\n [applicationTheme]=\"applicationTheme\"\n [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n ></ui-icon>\n }\n </button>\n\n @for (menu of submenus; track submenus[$index]) {\n <mat-menu\n [xPosition]=\"menuConfig.xPosition\"\n [yPosition]=\"menuConfig.yPosition\"\n #matMenu\n [class]=\"'overflow-menu ' + menuConfig.panelClass\"\n [overlapTrigger]=\"menuConfig.overlapTrigger\"\n backdropClass=\"overflow-menu-backdrop\"\n >\n <ng-container ngFor=\"let button of menu; index as id; trackBy: trackByButton\">\n @if (button.btnTemplate) {\n <!-- Menu option by provided button template-->\n <ng-container\n [ngTemplateOutlet]=\"button.btnTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: button }\"\n ></ng-container>\n } @else if (withRemovableOption) {\n <!-- Simple menu option that can be removed dynamically -->\n <div class=\"menu-option\" [ngClass]=\"{ 'is-destructive': button.isDestructive, disabled: button.disabled }\">\n <span\n [id]=\"'labelledby-' + button.label + id\"\n class=\"label\"\n uiEllipseText\n [refresh]=\"isMenuOpened()\"\n [maxDiffPixels]=\"1\"\n [isMultiline]=\"true\"\n (onChangeTextState)=\"button.isTextEllipsed = $event\"\n >{{ button.label }}\n </span>\n\n @if (button.icon) {\n <ui-button\n variant=\"icon-button\"\n [applicationTheme]=\"applicationTheme\"\n [iconName]=\"button.icon\"\n [tooltip]=\"button.tooltipText ? button.tooltipText : button.isTextEllipsed ? button.label : ''\"\n [tooltipPosition]=\"'above'\"\n [size]=\"'medium'\"\n (focus)=\"onButtonFocus(button)\"\n (blur)=\"onButtonBlur(button)\"\n (mouseenter)=\"onButtonHover(button, true)\"\n (mouseleave)=\"onButtonHover(button, false)\"\n (click)=\"onSelectItem($event, button.value)\"\n >\n </ui-button>\n }\n </div>\n } @else {\n <!-- Default non-removable menu option -->\n @if (button.isTitleButton && !button.hideTitleButton) {\n <div class=\"menu-title\">{{ button.label }}</div>\n }\n\n @if (!button.isTitleButton) {\n <button\n mat-menu-item\n [matMenuTriggerFor]=\"getMenu(button.subMenu)\"\n (menuOpened)=\"onSubmenuOpened()\"\n (focus)=\"onButtonFocus(button)\"\n (blur)=\"onButtonBlur(button)\"\n (mouseenter)=\"onButtonHover(button, true)\"\n (mouseleave)=\"onButtonHover(button, false)\"\n [ngClass]=\"{ 'is-destructive': button.isDestructive, disabled: button.disabled }\"\n disableRipple\n (click)=\"onButtonClick(button, $event)\"\n [matTooltip]=\"button.tooltipText ? button.tooltipText : button.isTextEllipsed ? button.label : ''\"\n [attr.aria-labelledby]=\"'labelledby-' + button.label + id\"\n [attr.aria-describedby]=\"'describedby-' + button.label + id\"\n [attr.aria-label]=\"button.ariaLabel \|\| null\"\n role=\"menuitem\"\n matTooltipPosition=\"right\"\n >\n <span [id]=\"'describedby-' + button.label + id\" [style.display]=\"'none'\">\n {{\n button.disabled\n ? ('MENU.MENUITEM_DISABLED' \| uiTranslate \| async) + ' ' + (button.describedby \|\| '')\n : button.describedby\n }}\n </span>\n @if (button.icon) {\n <ui-icon\n [name]=\"button.icon\"\n [toggleIconStyle]=\"true\"\n [filled]=\"\n button.disabled ? false : button.isHovered ? true : menuItemHasHovered ? false : !!button.isFocused\n \"\n [applicationTheme]=\"applicationTheme\"\n [size]=\"'24'\"\n [color]=\"button.disabled ? 'dark' : button.isDestructive ? 'red' : 'rebrand-black'\"\n ></ui-icon>\n }\n <span\n [id]=\"'labelledby-' + button.label + id\"\n class=\"label\"\n uiEllipseText\n [refresh]=\"isMenuOpened()\"\n [maxDiffPixels]=\"1\"\n [isMultiline]=\"true\"\n (onChangeTextState)=\"button.isTextEllipsed = $event\"\n >{{ button.label }}</span\n >\n @if (button.isPremium) {\n <ui-icon\n [name]=\"'Premium-circle-in-line'\"\n [applicationTheme]=\"applicationTheme\"\n [size]=\"'24'\"\n class=\"premium-icon\"\n ></ui-icon>\n }\n </button>\n }\n }\n </ng-container>\n\n <ng-content select=\"[menu-content]\"></ng-content>\n </mat-menu>\n }\n</div>\n","queryGuide":{"roles":["menuitem","menu"],"ariaAttributes":["aria-label","aria-required","aria-describedby","aria-haspopup","aria-expanded","aria-labelledby"],"dataTestIds":[],"materialComponents":["mat-menu"],"childUIComponents":["ui-button","ui-icon"],"suggestedQueries":["screen.getByRole('menuitem')","screen.getByRole('menu')","screen.getByLabelText('label text')"]},"filePath":"components/overflow-menu/overflow-menu.component.ts","supportsTheme":true,"lastModified":1775654032771.924},"page-header":{"name":"PageHeaderComponent","selector":"ui-page-header","category":"page-header","description":"PageHeaderComponent component","importPath":"@testgorilla/tgo-ui/components/page-header","moduleName":"PageHeaderModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"showBackButton","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":"booleanAttribute","description":"Flag to determine whether the \"Back\" button should be displayed.","isSignal":false},{"name":"tooltip","type":"unknown","defaultValue":"'COMMON.BACK'","required":false,"alias":null,"transform":null,"description":"Back button tooltip for mobile variation","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false}],"outputs":[{"name":"back","eventType":"void","alias":null,"description":"Event triggered when the \"Back\" button is clicked.","isSignal":false}],"module":{"name":"PageHeaderModule","imports":["CommonModule","ButtonComponentModule","UiTranslatePipe"],"exports":["PageHeaderComponent"],"declarations":["PageHeaderComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[{"name":"HeaderWithTemplate","template":"<ui-page-header ${argsToTemplate(mergedArgs)}>\n <div content style=\"display: flex\">\n <ui-avatar style=\"margin-right: 16px\" content size=\"medium\" imageUrl=\"/images/Avatar.png\"></ui-avatar>\n <div style=\"display: flex; flex-direction: column; justify-content: space-between\">\n <div style=\"font-weight: bold; font-size: 20px\">Title</div>\n <div>Text</div>\n </div>\n </div>\n <div right-side style=\"display: flex\">\n <ui-button applicationTheme=\"${_theme}\" style=\"margin-right: 16px\" variant=\"ghost\" label=\"Button\"></ui-button>\n <ui-button applicationTheme=\"${_theme}\" label=\"Button\"></ui-button>\n </div>\n </ui-page-header>","props":{}}],"documentation":"","template":"<ng-container>\n <div class=\"page-header-container\">\n <div class=\"page-header-content\">\n @if ((isMobile$ \| async) === false) {\n @if (showBackButton) {\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"('COMMON.BACK' \| uiTranslate \| async)!\"\n (click)=\"onBack()\"\n [ariaLabel]=\"('COMMON.BACK' \| uiTranslate \| async)!\"\n [variant]=\"'ghost'\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n }\n } @else {\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n class=\"mobile-back-btn\"\n [tooltip]=\"('COMMON.BACK' \| uiTranslate \| async)!\"\n [variant]=\"'icon-button'\"\n [ariaLabel]=\"('COMMON.BACK' \| uiTranslate \| async)!\"\n (click)=\"onBack()\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n }\n\n <div class=\"main-content\" [ngClass]=\"{ 'remove-margin': !showBackButton }\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n\n <div class=\"right-side\">\n <ng-content select=\"[right-side]\"></ng-content>\n </div>\n </div>\n </div>\n</ng-container>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-button"],"suggestedQueries":[]},"filePath":"components/page-header/page-header.component.ts","supportsTheme":true,"lastModified":1775654032771.924},"paginator":{"name":"PaginatorComponent","selector":"ui-paginator","category":"paginator","description":"To use the Paginator component, you need to import the `PaginatorComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/paginator","moduleName":"PaginatorComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"pageSizeOptions","type":"unknown","defaultValue":"[10, 25, 50]","required":false,"alias":null,"transform":null,"description":"Paginator size options","isSignal":false},{"name":"length","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"Data length","isSignal":false},{"name":"pageSize","type":"number","defaultValue":"25","required":false,"alias":null,"transform":null,"description":"Page size","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Disabled","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"currentPage","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"Defines the current page","isSignal":false}],"outputs":[{"name":"paginatorChange","eventType":"PageEvent","alias":null,"description":"","isSignal":false}],"module":{"name":"PaginatorComponentModule","imports":["CommonModule","MatPaginatorModule"],"exports":["PaginatorComponent"],"declarations":["PaginatorComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Paginator component, you need to import the `PaginatorComponentModule` in your module:\n\n```typescript\nimport { PaginatorComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n PaginatorComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-paginator\n [length]=\"100\"\n [pageSize]=\"10\"\n [pageSizeOptions]=\"[5, 10, 25, 50]\"\n [showFirstLastButtons]=\"true\"\n (page)=\"onPageChange($event)\"\n></ui-paginator>\n```","template":"<mat-paginator\n [disabled]=\"disabled\"\n [length]=\"length\"\n [pageIndex]=\"currentPage ? currentPage : 0\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [attr.theme]=\"applicationTheme\"\n [selectConfig]=\"selectConfig\"\n [color]=\"'accent'\"\n (page)=\"onPaginatorChange($event)\"\n></mat-paginator>\n","queryGuide":{"roles":["navigation"],"ariaAttributes":[],"dataTestIds":[],"materialComponents":["mat-paginator"],"childUIComponents":[],"suggestedQueries":["screen.getByRole('navigation')"]},"filePath":"components/paginator/paginator.component.ts","supportsTheme":true,"lastModified":1775654032772.924},"password-criteria":{"name":"PasswordComponent","selector":"ui-password-criteria","category":"password-criteria","description":"PasswordComponent component","importPath":"@testgorilla/tgo-ui/components/password-criteria","moduleName":"PasswordComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"showCriteria","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Show criteria for password. Defaults true","isSignal":false},{"name":"required","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Password is required or not","isSignal":false}],"outputs":[{"name":"passwordChange","eventType":"string","alias":null,"description":"","isSignal":false},{"name":"allCriteriaPassed","eventType":"boolean","alias":null,"description":"","isSignal":false}],"module":{"name":"","imports":[],"exports":[],"declarations":[],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"","template":"<div class=\"password-criteria-container\">\n <ui-field\n [applicationTheme]=\"'dark'\"\n [formControl]=\"formControl\"\n [ariaLabel]=\"requiredCriteria?.nativeElement?.innerText ?? ''\"\n [type]=\"'password'\"\n [placeholder]=\"('PASSWORD.PASSWORD_PLACEHOLDER' \| uiTranslate \| async) + (required ? ' ' : '')\"\n (keydown.enter)=\"showError = true\"\n (focusout)=\"showError = true\"\n ></ui-field>\n\n <div class=\"criteria-container\" ngIf=\"showCriteria\" #requiredCriteria>\n <div class=\"progress\">\n <ui-progress-bar\n [progress]=\"progressValue === 1 ? 0 : progressValue\"\n [applicationTheme]=\"'dark'\"\n ></ui-progress-bar>\n </div>\n\n <span ngIf=\"allRequirementsMet\" style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">{{\n 'FIELD.ALL_PASSWORD_REQ_PASSED' \| uiTranslate \| async\n }}</span>\n\n <div\n ngFor=\"let criterion of criteria\"\n class=\"criterion\"\n [attr.aria-live]=\"!allRequirementsMet ? 'polite' : ''\"\n [ngClass]=\"{ passed: criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] && showError }\"\n >\n <ui-icon\n [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] && showError ? 'Info-in-line' : 'Check-round-in-line'\"\n applicationTheme=\"dark\"\n ></ui-icon>\n <span>{{ criterion.translateKey \| uiTranslate \| async }}</span>\n <span style=\"position: absolute; left: -9999px\">{{\n (criteriaPassed[criterion.key] ? 'COMMON.PASSED' : 'COMMON.FAILED') \| uiTranslate \| async\n }}</span>\n </div>\n </div>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":["aria-live"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-field","ui-progress-bar","ui-icon"],"suggestedQueries":[]},"filePath":"components/password-criteria/password-criteria.component.ts","supportsTheme":false,"lastModified":1775654032772.924},"password-strength":{"name":"PasswordStrengthComponent","selector":"ui-password-strength","category":"password-strength","description":"To use the Password Strength component, you need to import the `PasswordStrengthComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/password-strength","moduleName":"PasswordStrengthComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"password","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"The password that needs to be checked","isSignal":false}],"outputs":[{"name":"validationCheck","eventType":"boolean","alias":null,"description":"Event that outputs validation check result","isSignal":false}],"module":{"name":"PasswordStrengthComponentModule","imports":["CommonModule","IconComponentModule","ProgressBarComponentModule","UiTranslatePipe"],"exports":["PasswordStrengthComponent"],"declarations":["PasswordStrengthComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Password Strength component, you need to import the `PasswordStrengthComponentModule` in your module:\n\n```typescript\nimport { PasswordStrengthComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n PasswordStrengthComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-password-strength \n [password]=\"myPassword\" \n applicationTheme=\"light\"\n (strengthChange)=\"handleStrengthChange($event)\">\n</ui-password-strength>\n```\n\nThe component provides visual feedback on password strength based on defined criteria.","template":"<div class=\"criteria-container\">\n <div class=\"progress\">\n <ui-progress-bar\n [progress]=\"progressValue === 1 ? 0 : progressValue\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-progress-bar>\n </div>\n\n <div\n ngFor=\"let criterion of criteria\"\n class=\"criterion\"\n [ngClass]=\"{ passed: criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] }\"\n >\n <ui-icon\n [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] ? infoIcon : checkIcon\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n <span>{{ criterion.translateKey \| uiTranslate \| async }}</span>\n </div>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-progress-bar","ui-icon"],"suggestedQueries":[]},"filePath":"components/password-strength/password-strength.component.ts","supportsTheme":true,"lastModified":1775654032772.924},"phone-input":{"name":"PhoneInputComponent","selector":"ui-phone-input","category":"phone-input","description":"To use the Phone Input component, you need to import the `PhoneInputComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/phone-input","moduleName":"PhoneInputComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"disabled","type":"boolean","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Determines if input is disabled","isSignal":false},{"name":"required","type":"boolean","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input is required or not","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"fullWidth","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Indicator of the phone input width","isSignal":false},{"name":"hideBuiltInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Hide in build errors for Reactive Forms","isSignal":false},{"name":"hideLabelInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Hide label in errors","isSignal":false},{"name":"value","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Phone number","isSignal":false},{"name":"countryList","type":"UICountry[]","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Country list for select","isSignal":false},{"name":"placeholder","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Placeholder input","isSignal":false},{"name":"errors","type":"string[]","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input field errors","isSignal":false}],"outputs":[],"module":{"name":"PhoneInputComponentModule","imports":["CommonModule","MatProgressSpinnerModule","ReactiveFormsModule","MatSelectModule","MatIconModule","MatInputModule","NgxMatSelectSearchModule","IconComponentModule","SpinnerComponentModule","UiTranslatePipe","ValidationErrorModule","HasValidationErrorPipe"],"exports":["PhoneInputComponent"],"declarations":["PhoneInputComponent","JoinStringsPipe"],"providers":[]},"types":{"typeAliases":[],"interfaces":[{"name":"UICountry","properties":[{"name":"name","type":"string","optional":false},{"name":"alpha2Code","type":"string","optional":false},{"name":"callingCode","type":"string","optional":false}]}],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Phone Input component, you need to import the `PhoneInputComponentModule` in your module:\n\n```typescript\nimport { PhoneInputComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n PhoneInputComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-phone-input\n [countryList]=\"countryList\"\n [(value)]=\"phoneNumber\"\n applicationTheme=\"light\"\n (valueChange)=\"onPhoneNumberChange($event)\">\n</ui-phone-input>\n```\n\nThe component allows users to input phone numbers with country code selection.","template":"<mat-form-field\n [formGroup]=\"form\"\n appearance=\"outline\"\n [color]=\"errorsLength \|\| (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n [ngClass]=\"{ disabled: form.disabled \|\| disabled, 'full-width': fullWidth }\"\n>\n <mat-label>{{ 'COMMON.PHONE_NUMBER' \| uiTranslate \| async }} <span ngIf=\"required\"></span></mat-label>\n\n <div matPrefix class=\"country\">\n <button class=\"selected-flag\" matPrefix ngIf=\"selectedCountry\">\n <img\n [height]=\"20\"\n [width]=\"24\"\n [attr.src]=\"countryFlagSrc + selectedCountry?.alpha2Code?.toLowerCase() + '.svg'\"\n [alt]=\"'Country flag ' + selectedCountry?.alpha2Code?.toLowerCase()\"\n />\n </button>\n <mat-select\n #select\n (selectionChange)=\"onOptionsSelected($event.value)\"\n [value]=\"selectedCountry\"\n [disableOptionCentering]=\"true\"\n [panelClass]=\"'phone-number-select' + ' ' + applicationTheme\"\n [ngClass]=\"{ opened: select.panelOpen }\"\n >\n <mat-select-trigger>{{ selectedCountry?.callingCode }}</mat-select-trigger>\n <mat-option>\n <ngx-mat-select-search\n [formControl]=\"selectFilterCtrl\"\n ngDefaultControl\n placeholderLabel=\"\"\n noEntriesFoundLabel=\"\"\n >\n <ui-icon ngxMatSelectSearchClear size=\"24\" [name]=\"'Close-in-line'\"></ui-icon>\n </ngx-mat-select-search>\n </mat-option>\n <mat-option ngFor=\"let country of countries$ \| async; trackBy: filteredCountryTrackByMethod\" [value]=\"country\">\n <div class=\"country-option\">\n <img\n [height]=\"20\"\n [width]=\"24\"\n [attr.src]=\"countryFlagSrc + country?.alpha2Code?.toLowerCase()! + '.svg'\"\n [alt]=\"'Country flag ' + country?.alpha2Code?.toLowerCase()!\"\n />\n <small>{{ $any([country?.name, '(' + country?.callingCode + ')']) \| joinStrings: ' ' }}</small>\n </div>\n </mat-option>\n </mat-select>\n </div>\n\n <input\n (input)=\"onInput(form.get('phone_number')!.value)\"\n formControlName=\"phone_number\"\n (click)=\"disableClick($event)\"\n [ngStyle]=\"{ opacity: disabled ? 0.5 : 1 }\"\n [required]=\"required\"\n matInput\n type=\"text\"\n />\n\n <mat-hint class=\"error\" ngIf=\"errorsLength \|\| (ngControl?.errors \| hasValidationError)\">\n <ng-container ngIf=\"errorsLength\">\n <div class=\"errors\" ngFor=\"let error of _errors; trackBy: trackByFn\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n </ng-container>\n\n <ui-validation-error\n ngIf=\"ngControl && !hideBuiltInErrors\"\n [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors ? null : ('COMMON.PHONE_NUMBER' \| uiTranslate \| async)\"\n ></ui-validation-error>\n </mat-hint>\n</mat-form-field>\n","queryGuide":{"roles":["combobox","option"],"ariaAttributes":[],"dataTestIds":[],"materialComponents":["mat-form-field","mat-label","mat-select","mat-select-trigger","mat-option","mat-hint"],"childUIComponents":["ui-icon","ui-validation-error"],"suggestedQueries":["screen.getByRole('combobox')","screen.getByRole('option')","// Open dropdown: await userEvent.click(screen.getByRole('combobox'))","// Select option: await userEvent.click(await screen.findByText('Option'))"]},"filePath":"components/phone-input/phone-input.component.ts","supportsTheme":true,"lastModified":1775654032773.924},"popover":{"name":"PopoverComponent","selector":"ui-popover","category":"popover","description":"PopoverComponent component","importPath":"@testgorilla/tgo-ui/components/popover","moduleName":"PopoverComponentModule","standalone":true,"changeDetection":"OnPush","inputs":[{"name":"templateRef","type":"TemplateRef<unknown> \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"ctx","type":"Record<string, unknown>","defaultValue":"{}","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"popoverCard","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":true}],"outputs":[],"module":{"name":"","imports":[],"exports":[],"declarations":[],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"","template":"@if (templateRef()) {\n @if (popoverCard()) {\n <ui-card>\n <ng-container ngTemplateOutlet=\"templateRef(); context: ctx()\"></ng-container>\n </ui-card>\n } @else {\n <ng-container ngTemplateOutlet=\"templateRef(); context: ctx()\"></ng-container>\n }\n}\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-card"],"suggestedQueries":[]},"filePath":"components/popover/popover.component.ts","supportsTheme":false,"lastModified":1775654032773.924},"progress-bar":{"name":"ProgressBarComponent","selector":"ui-progress-bar","category":"progress-bar","description":"To use the Progress Bar component, you need to import the `ProgressBarComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/progress-bar","moduleName":"ProgressBarComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"companyColor","type":"string \| null","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Color of the progress bar.\nDefaults to Test Gorilla primary color.","isSignal":false},{"name":"progress","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"Progress value of the progress bar.\nDefaults to zero.","isSignal":false},{"name":"mode","type":"ProgressBarMode","defaultValue":"'determinate'","required":false,"alias":null,"transform":null,"description":"Mode of the progress bar.\nMode must be one of these values: determinate, indeterminate, buffer, query.\nDefaults to 'determinate'.","isSignal":false},{"name":"buffer","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"Buffer value of the progress bar.\nDefaults to zero.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"ariaLabel","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"ariaDescribedBy","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"showPercentage","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Shows the percentage amount","isSignal":false}],"outputs":[],"module":{"name":"ProgressBarComponentModule","imports":["CommonModule","MatProgressBarModule","UiTranslatePipe"],"exports":["ProgressBarComponent"],"declarations":["ProgressBarComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Progress Bar component, you need to import the `ProgressBarComponentModule` in your module:\n\n```typescript\nimport { ProgressBarComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n ProgressBarComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-progress-bar \n mode=\"determinate\" \n [progress]=\"40\" \n applicationTheme=\"light\">\n</ui-progress-bar>\n```\n\nThe component supports several modes:\n- determinate: Shows progress as a percentage\n- indeterminate: Shows an animation for unknown progress\n- query: Similar to indeterminate, but with a different animation\n- buffer: Shows both progress and a buffer progress","template":"@if (showPercentage) {\n <div class=\"percentage\">{{ progress }}%</div>\n}\n\n<mat-progress-bar\n [mode]=\"mode\"\n [value]=\"progress\"\n [bufferValue]=\"buffer\"\n title=\"progress-bar\"\n class=\"progress-bar\"\n [attr.theme]=\"applicationTheme\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-live]=\"'polite'\"\n [attr.aria-describedby]=\"'describedBy'\"\n>\n</mat-progress-bar>\n<div style=\"position: absolute; left: -9999px\" role=\"alert\" ngIf=\"mode === 'indeterminate'\">\n {{ 'COMMON.LOADING' \| uiTranslate \| async }}\n</div>\n<div style=\"display: none\" id=\"describedBy\">\n {{ ariaDescribedBy }}\n</div>\n","queryGuide":{"roles":["alert","progressbar"],"ariaAttributes":["aria-label","aria-live","aria-describedby"],"dataTestIds":[],"materialComponents":["mat-progress-bar"],"childUIComponents":[],"suggestedQueries":["screen.getByRole('alert')","screen.getByRole('progressbar')","screen.getByLabelText('label text')"]},"filePath":"components/progress-bar/progress-bar.component.ts","supportsTheme":true,"lastModified":1775654032774.924},"prompt":{"name":"PromptComponent","selector":"ui-prompt","category":"prompt","description":"To use the Prompt component, you need to import the `PromptComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/prompt","moduleName":"PromptModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"tags","type":"PromptTag[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"maxCharacters","type":"number","defaultValue":"255","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"supportedFileTypes","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"autoClear","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"showSendButton","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"enableFileUpload","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"placeholder","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Placeholder for the prompt.","isSignal":true},{"name":"errorMessage","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Custom error message displayed below the prompt.","isSignal":true}],"outputs":[{"name":"promptData","eventType":"PromptData","alias":null,"description":"","isSignal":true}],"module":{"name":"PromptModule","imports":["CommonModule","FieldComponentModule","ButtonComponentModule","OverflowMenuComponentModule","TagComponentModule","BadgeComponentModule","CdkOverlayOrigin","CdkConnectedOverlay","CardComponentModule","CdkTextareaAutosize","TooltipComponentModule","MatTooltip","UiTranslatePipe","IconComponentModule"],"exports":["PromptComponent"],"declarations":["PromptComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[{"name":"PromptTag","properties":[{"name":"id","type":"number","optional":false},{"name":"label","type":"string","optional":false},{"name":"autocomplete","type":"string","optional":false}]},{"name":"PromptData","properties":[{"name":"text","type":"string","optional":true},{"name":"files","type":"File[]","optional":true}]}],"enums":[]},"examples":[{"name":"Default","template":"<div class=\"row\">\n <ui-prompt></ui-prompt>\n </div>","props":{"placeholder":"'Custom placeholder'"}},{"name":"CustomPlaceholder","template":"<div class=\"row\">\n <ui-prompt ${argsToTemplate(args)}></ui-prompt>\n </div>","props":{"placeholder":"'Custom placeholder'"}},{"name":"CustomErrorMessage","template":"<div class=\"row\">\n <ui-prompt ${argsToTemplate(args)}></ui-prompt>\n </div>","props":{"errorMessage":"'This is a custom error message'"}},{"name":"Disabled","template":"<div class=\"row\">\n <ui-prompt ${argsToTemplate(args)}></ui-prompt>\n </div>","props":{"disabled":"true","enableFileUpload":"true","showSendButton":"true","tags":"[","id":"1, label: 'Frontend Developer', autocomplete: 'builds UI'"}},{"name":"WithoutTags","template":"<div class=\"row\">\n <ui-prompt ${argsToTemplate(args)}></ui-prompt>\n </div>","props":{"enableFileUpload":"true","showSendButton":"true"}},{"name":"LessThan5Tags","template":"<div class=\"row\">\n <ui-prompt ${argsToTemplate(args)}></ui-prompt>\n </div>","props":{"tags":"[","id":"1, label: 'Frontend Developer', autocomplete: 'builds UI'"}},{"name":"WithViewMoreDropdown","template":"<div class=\"row\">\n <ui-prompt ${argsToTemplate(args)}></ui-prompt>\n </div>","props":{"tags":"[","id":"1, label: 'Frontend Developer', autocomplete: 'builds UI'"}},{"name":"WithAllOptions","template":"<div class=\"row\">\n <ui-prompt ${argsToTemplate(args)}></ui-prompt>\n </div>","props":{"enableFileUpload":"true","showSendButton":"true","tags":"[","id":"1, label: 'Frontend Developer', autocomplete: 'builds UI'"}}],"documentation":"## How to use\n\nTo use the Prompt component, you need to import the `PromptComponentModule` in your module:\n\n```typescript\nimport { PromptComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n PromptComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-prompt \n [tags]=\"[{ id: 1, label: 'Frontend Developer', autocomplete: 'builds UI' },\n { id: 2, label: 'Backend Developer', autocomplete: 'handles server logic' }]\"\n [showSendButton]=\"true\"\n [enableFileUpload]=\"true\"\n [autoClear]=\"false\">\n</ui-prompt>\n```\n","template":"<ng-container>\n <div\n class=\"prompt-container\"\n [class.has-error]=\"!!errorMessage()\"\n [class.disabled]=\"disabled\"\n [attr.aria-disabled]=\"disabled\"\n cdkOverlayOrigin\n #promptOrigin=\"cdkOverlayOrigin\"\n #promptContainerRef\n [ngClass]=\"{ 'prompt-container-focused': isHighlighted() }\"\n >\n <div class=\"prompt-autocomplete\">\n <textarea tabindex=\"-1\" class=\"ghost\" id=\"autocomplete\" [value]=\"autocompleteSuggestion()\" readonly></textarea>\n\n @let showIcon = !isFieldFocused() && !textarea.value;\n @if (showIcon) {\n <ui-icon\n class=\"prompt-icon\"\n [color]=\"'inherit'\"\n [class.hovered]=\"isFieldHovered()\"\n [name]=\"'Sparkle-in-line'\"\n ></ui-icon>\n }\n <ui-field\n #textarea\n class=\"prompt-text\"\n [class.show-icon]=\"showIcon\"\n role=\"input\"\n [showBottomContent]=\"false\"\n [borderless]=\"true\"\n [type]=\"'multi-line'\"\n [autosizableTextarea]=\"true\"\n [maxCharacters]=\"maxCharacters()\"\n [placeholder]=\"showIcon ? placeholder() \|\| ('PROMPT.ASK_ANYTHING' \| uiTranslate \| async)! : ''\"\n [value]=\"promptTextValue() \|\| ''\"\n [hasTextAreaCounter]=\"false\"\n [disabled]=\"disabled\"\n (mouseenter)=\"isFieldHovered.set(true)\"\n (mouseleave)=\"isFieldHovered.set(false)\"\n (focusin)=\"isFieldFocused.set(true)\"\n (fieldBlur)=\"isFieldFocused.set(false)\"\n (keydown.tab)=\"onTextareaTab($event)\"\n ></ui-field>\n </div>\n <div class=\"prompt-footer flex-container\">\n <div class=\"flex-container\">\n @if (enableFileUpload()) {\n <ui-button\n [variant]=\"'icon-button'\"\n [tooltip]=\"('PROMPT.ADD_FILES' \| uiTranslate \| async)!\"\n [tooltipPosition]=\"'above'\"\n [ariaLabel]=\"('PROMPT.ADD_FILES' \| uiTranslate \| async)!\"\n [iconName]=\"'Plus'\"\n [disabled]=\"disabled\"\n (click)=\"fileDrop()?.nativeElement?.click()\"\n ></ui-button>\n <input\n [tabIndex]=\"-1\"\n class=\"form-control\"\n #fileDropRef\n type=\"file\"\n id=\"file-upload\"\n [accept]=\"supportedFileTypes()\"\n [disabled]=\"disabled\"\n (change)=\"uploadFile($event)\"\n />\n\n @if (promptFilesList().length) {\n <div class=\"menu\">\n <ui-badge\n [notificationsAmount]=\"promptFilesList().length\"\n [variant]=\"'notification'\"\n class=\"menu-badge\"\n ></ui-badge>\n <ui-overflow-menu\n [matTooltip]=\"('PROMPT.FILES' \| uiTranslate \| async)!\"\n [matTooltipPosition]=\"'above'\"\n [buttonSize]=\"'medium'\"\n [iconTrigger]=\"'Document'\"\n [buttonVariant]=\"'ghost'\"\n [buttons]=\"fileListMenuConfig()\"\n [isDynamicMenu]=\"true\"\n [withRemovableOption]=\"true\"\n (selectItem)=\"selectedMenuOption($event)\"\n ></ui-overflow-menu>\n </div>\n }\n }\n </div>\n\n @if (tags()?.length && !promptTextValue()) {\n <div class=\"flex-container carousel\">\n <div class=\"tag-container flex-container\" role=\"list\" #tagsScrollContainer>\n @for (tag of tagsVisible(); track tag) {\n <ui-tag\n [label]=\"tag.label\"\n role=\"listitem\"\n [ariaLabel]=\"tag.label\"\n [isDisabled]=\"disabled\"\n (click)=\"selectTag(tag, $event)\"\n (keyup.enter)=\"selectTag(tag, $event)\"\n (keyup.space)=\"selectTag(tag, $event)\"\n ></ui-tag>\n }\n\n @if (tagsInDropdown().length) {\n <ui-button\n class=\"view-more\"\n variant=\"text-inline\"\n [label]=\"('PROMPT.VIEW_MORE' \| uiTranslate \| async)!\"\n [ariaLabel]=\"('PROMPT.VIEW_MORE' \| uiTranslate \| async)!\"\n [size]=\"'medium'\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n (keydown.enter)=\"focusTagDropdown()\"\n cdkOverlayOrigin\n #dropdownTrigger=\"cdkOverlayOrigin\"\n ></ui-button>\n }\n </div>\n\n <div class=\"flex-container\">\n <ui-button\n [variant]=\"'icon-button'\"\n [size]=\"'small'\"\n [ariaLabel]=\"'Scroll left button'\"\n [iconName]=\"'Arrow-chevron-left-in-line'\"\n [disabled]=\"disabled \|\| tagsScrollContainer.scrollLeft === 0\"\n (click)=\"tagsScrollContainer.scrollBy({ left: -100, behavior: 'smooth' })\"\n ></ui-button>\n <ui-button\n [variant]=\"'icon-button'\"\n [size]=\"'small'\"\n [iconName]=\"'Arrow-chevron-right-in-line'\"\n [ariaLabel]=\"'Scroll right button'\"\n [disabled]=\"\n disabled \|\|\n tagsScrollContainer.scrollLeft + tagsScrollContainer.clientWidth >= tagsScrollContainer.scrollWidth\n \"\n (click)=\"tagsScrollContainer.scrollBy({ left: 100, behavior: 'smooth' })\"\n ></ui-button>\n </div>\n </div>\n }\n\n @if (showSendButton()) {\n <ui-button\n class=\"send-button\"\n [variant]=\"'secondary'\"\n [iconName]=\"'Arrow-up-in-line'\"\n [tooltip]=\"('COMMON.SEND' \| uiTranslate \| async)!\"\n [ariaLabel]=\"('COMMON.SEND' \| uiTranslate \| async)!\"\n [tooltipPosition]=\"'above'\"\n [size]=\"'medium'\"\n [disabled]=\"disabled \|\| (!promptTextValue() && !promptFilesList().length)\"\n (click)=\"sendPromptData()\"\n ></ui-button>\n }\n </div>\n </div>\n\n @if (errorMessage()) {\n <div class=\"prompt-error\">\n <ui-icon [name]=\"'Error'\" color=\"red\"></ui-icon>\n <span>{{ errorMessage() }}</span>\n </div>\n }\n\n <!-- Dropdown for hidden tags -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"promptOrigin\"\n [cdkConnectedOverlayOpen]=\"isDropdownOpened() && !disabled\"\n [cdkConnectedOverlayPositions]=\"dropdownPositions\"\n [cdkConnectedOverlayWidth]=\"promptContainerRef?.offsetWidth \|\| 0\"\n (overlayOutsideClick)=\"dropdownOutsideClick()\"\n >\n <div class=\"dropdown-container\" role=\"list\" #tagDropdown tabindex=\"0\">\n @for (tag of tagsInDropdown(); track tag) {\n <div\n class=\"dropdown-tag\"\n tabindex=\"0\"\n [attr.aria-label]=\"tag.label\"\n role=\"listitem\"\n (click)=\"selectTag(tag, $event)\"\n (keyup.enter)=\"selectTag(tag, $event)\"\n (keyup.space)=\"selectTag(tag, $event)\"\n >\n {{ tag.label }}\n </div>\n }\n </div>\n </ng-template>\n</ng-container>\n","queryGuide":{"roles":["input","list","listitem"],"ariaAttributes":["aria-disabled","aria-label"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon","ui-field","ui-button","ui-badge","ui-overflow-menu","ui-tag"],"suggestedQueries":["screen.getByRole('input')","screen.getByRole('list')","screen.getByRole('listitem')","screen.getByLabelText('label text')"]},"filePath":"components/prompt/prompt.component.ts","supportsTheme":false,"lastModified":1775654032774.924},"radial-progress":{"name":"RadialProgressComponent","selector":"ui-radial-progress","category":"radial-progress","description":"To use the Radial Progress component, you need to import the `RadialProgressComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/radial-progress","moduleName":"RadialProgressComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"size","type":"RadialProgressSize","defaultValue":"RadialProgressSizeEnum.SMALL","required":false,"alias":null,"transform":null,"description":"The size of the component. Defaults to 'small'.","isSignal":false},{"name":"value","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"The current value of the progress. Defaults to 0.","isSignal":false},{"name":"total","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"The value of the total progress. Used to set the cap and used for percentage calculations. Defaults to 0.","isSignal":false},{"name":"variant","type":"RadialProgressVariant","defaultValue":"'number'","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"showPercentageSign","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"icon","type":"IconName","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Icon for icon button","isSignal":false},{"name":"buttonTooltip","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"The tooltip that is displayed on hover. Required for icon-button","isSignal":false},{"name":"companyColor","type":"string \| null","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Color of the progress bar.\nDefaults to Test Gorilla primary color.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false}],"outputs":[{"name":"buttonClicked","eventType":"Event","alias":null,"description":"","isSignal":false}],"module":{"name":"RadialProgressComponentModule","imports":["CommonModule","MatProgressSpinnerModule","ButtonComponentModule"],"exports":["RadialProgressComponent"],"declarations":["RadialProgressComponent"],"providers":[]},"types":{"typeAliases":[{"name":"RadialProgressSize","value":"'large' \| 'small'"},{"name":"RadialProgressVariant","value":"'number' \| 'icon-button' \| 'thin' \| 'empty' \| 'empty-thin'"}],"interfaces":[],"enums":[{"name":"RadialProgressSizeValue","members":[{"name":"LARGE","value":"64"},{"name":"SMALL","value":"40"}]},{"name":"RadialProgressSizeEnum","members":[{"name":"LARGE","value":"'large'"},{"name":"SMALL","value":"'small'"}]}]},"examples":[],"documentation":"## How to use\n\nTo use the Radial Progress component, you need to import the `RadialProgressComponentModule` in your module:\n\n```typescript\nimport { RadialProgressComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n RadialProgressComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-radial-progress \n [value]=\"25\" \n [total]=\"100\"\n size=\"large\" \n applicationTheme=\"light\">\n</ui-radial-progress>\n```\n\nThe component supports several sizes and variants, including an icon-button option that can trigger actions when clicked.","template":"<div\n class=\"radial-progress-container\"\n [attr.theme]=\"applicationTheme\"\n [style.width]=\"progressSize + 'px'\"\n [style.height]=\"progressSize + 'px'\"\n>\n <div class=\"background\" [style.border-width]=\"strokeWidth + 'px'\"></div>\n\n <mat-progress-spinner\n [strokeWidth]=\"strokeWidth\"\n [diameter]=\"progressSize\"\n [value]=\"percentage\"\n ></mat-progress-spinner>\n\n <div\n class=\"inner-container\"\n [class.small-font]=\"(variant === 'thin' \|\| variant === 'empty-thin') && percentage !== 100\"\n [class.tiny-font]=\"percentage === 100 && showPercentageSign && variant === 'thin'\"\n >\n @if (variant === 'empty' \|\| variant === 'empty-thin') {\n <div>{{ '-' }}</div>\n } @else if (variant === 'icon-button' && size !== 'small') {\n <ui-button\n [tooltip]=\"buttonTooltip\"\n [iconName]=\"icon\"\n [variant]=\"'icon-button'\"\n (click)=\"onButtonClick($event)\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-button>\n } @else if (size === radialProgressSize.LARGE \|\| variant === 'thin') {\n <div>\n {{ displayValue }}\n </div>\n }\n </div>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":["mat-progress-spinner"],"childUIComponents":["ui-button"],"suggestedQueries":[]},"filePath":"components/radial-progress/radial-progress.component.ts","supportsTheme":true,"lastModified":1775654032775.924},"radio-button":{"name":"RadioButtonComponent","selector":"ui-radio-button","category":"forms","description":"To use the Radio Button component, you need to import the `RadioButtonComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/radio-button","moduleName":"RadioButtonComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Determines whether the radio button is disabled.\nDefault: false.","isSignal":false},{"name":"allowUnselect","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Determines whether the radio button can be unchecked.\nDefault: false.","isSignal":false},{"name":"companyColor","type":"string \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"Determines the radio button color.\nDefault: Test Gorilla primary color.","isSignal":false},{"name":"name","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Used to group radios for unique selection.","isSignal":false},{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Text content will be applied to the input element if present.","isSignal":false},{"name":"multiple","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Determines whether the radio button is a multiple choice cell.\nDefault: false","isSignal":false},{"name":"value","type":"any","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Determines value of the radio button.\nDefault: false","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"ariaLabel","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"A string representing the ARIA label for accessibility.\nThis label is used to provide an accessible name for the input element.","isSignal":false},{"name":"ariaRequired","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"hasError","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Defines if checkbox has error","isSignal":false},{"name":"ariaLabelledby","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"ariaDescribedby","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"truncateText","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Truncate text if it is too long","isSignal":false},{"name":"alignment","type":"Alignment","defaultValue":"'center'","required":false,"alias":null,"transform":null,"description":"Text alignment","isSignal":false},{"name":"tabIndex","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"Sets the tab index for the checkbox component.\nThis determines the order in which elements receive focus when the user navigates through them using the Tab key.\nDefault value is 0.","isSignal":false},{"name":"hideTooltipOnEllipsis","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Show tooltip when label is truncated","isSignal":false}],"outputs":[{"name":"changeRadio","eventType":"RadioButtonEventType","alias":null,"description":"Event emitted when the checked state of the radio button changes.","isSignal":false}],"module":{"name":"RadioButtonComponentModule","imports":["CommonModule","MatRadioModule","FormsModule","ReactiveFormsModule","MatInputModule","EllipseTextDirective","MatTooltipModule","MatCheckboxModule","FocusVisibleDirective"],"exports":["RadioButtonComponent"],"declarations":["RadioButtonComponent"],"providers":[]},"types":{"typeAliases":[{"name":"RadioButtonEventType","value":"{\n optionName: string;\n optionChecked: boolean;\n}"}],"interfaces":[],"enums":[]},"examples":[{"name":"Default","template":"<ui-radio-button [multiple]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - unselected\" [selected]=\"false\" allowUnselect=\"true\" name=\"unchecked\"></ui-radio-button>\n <br>\n <ui-radio-button [multiple]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - selected\" [selected]=\"true\" allowUnselect=\"true\" name=\"checked\"></ui-radio-button>","props":{"disabled":"false","selected":"false","allowUnselect":"false"}},{"name":"Disabled","template":"<ui-radio-button [multiple]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - unselected\" [selected]=\"false\" allowUnselect=\"true\" name=\"unchecked\"></ui-radio-button>\n <br>\n <ui-radio-button [multiple]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - selected\" [selected]=\"true\" allowUnselect=\"true\" name=\"checked\"></ui-radio-button>","props":{"disabled":"true"}},{"name":"Selected","template":"<ui-radio-button [multiple]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - unselected\" [selected]=\"false\" allowUnselect=\"true\" name=\"unchecked\"></ui-radio-button>\n <br>\n <ui-radio-button [multiple]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - selected\" [selected]=\"true\" allowUnselect=\"true\" name=\"checked\"></ui-radio-button>","props":{"selected":"true"}},{"name":"AllowUnselect","template":"<ui-radio-button [multiple]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - unselected\" [selected]=\"false\" allowUnselect=\"true\" name=\"unchecked\"></ui-radio-button>\n <br>\n <ui-radio-button [multiple]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - selected\" [selected]=\"true\" allowUnselect=\"true\" name=\"checked\"></ui-radio-button>","props":{"selected":"true","allowUnselect":"true"}},{"name":"WithLabel","template":"<ui-radio-button [multiple]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - unselected\" [selected]=\"false\" allowUnselect=\"true\" name=\"unchecked\"></ui-radio-button>\n <br>\n <ui-radio-button [multiple]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - selected\" [selected]=\"true\" allowUnselect=\"true\" name=\"checked\"></ui-radio-button>","props":{"selected":"true","label":"'Some text.'"}},{"name":"MultipleChoice","template":"<ui-radio-button [multiple]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - unselected\" [selected]=\"false\" allowUnselect=\"true\" name=\"unchecked\"></ui-radio-button>\n <br>\n <ui-radio-button [multiple]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - selected\" [selected]=\"true\" allowUnselect=\"true\" name=\"checked\"></ui-radio-button>","props":{}},{"name":"WithErrorMultiple","template":"<ui-radio-button [hasError]=\"true\" allowUnselect=\"true\" applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - unselected\"></ui-radio-button>\n <br>\n <ui-radio-button [hasError]=\"true\" allowUnselect=\"true\" applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - unselected\"></ui-radio-button>","props":{}},{"name":"WithErrorSingle","template":"<ui-radio-button [hasError]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - unselected\"></ui-radio-button>\n <br>\n <ui-radio-button [hasError]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - unselected\"></ui-radio-button>","props":{}}],"documentation":"## How to use\n\nTo use the Radio Button component, you need to import the `RadioButtonComponentModule` in your module:\n\n```typescript\nimport { RadioButtonComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n RadioButtonComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-radio-button\n label=\"Option 1\"\n [selected]=\"isSelected\"\n [disabled]=\"isDisabled\"\n name=\"options\"\n applicationTheme=\"light\"\n (selectedChange)=\"onSelectionChange($event)\">\n</ui-radio-button>\n```\n\nFor multiple radio buttons in a group:\n\n```html\n<ui-radio-button name=\"colorGroup\" [value]=\"'red'\" [groupValue]=\"selectedColor\" label=\"Red\"></ui-radio-button>\n<ui-radio-button name=\"colorGroup\" [value]=\"'blue'\" [groupValue]=\"selectedColor\" label=\"Blue\"></ui-radio-button>\n<ui-radio-button name=\"colorGroup\" [value]=\"'green'\" [groupValue]=\"selectedColor\" label=\"Green\"></ui-radio-button>\n```\n\nThe radio button component can be used for single selection among a set of options.","template":"<div\n #radioContainer\n tabindex=\"0\"\n [class]=\"multiple ? 'radio-container' : 'radio'\"\n [class.multiple-disabled]=\"disabled && multiple\"\n [ngClass]=\"classMultiple\"\n [attr.alignment]=\"alignment\"\n [attr.truncate-text]=\"truncateText\"\n [attr.theme]=\"applicationTheme\"\n [attr.hasError]=\"hasError\"\n (keydown.enter)=\"clickRadio(); radioContainer.focus()\"\n (keydown.space)=\"clickRadio(); radioContainer.focus()\"\n>\n <mat-radio-button\n #radio\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n class=\"radio-button\"\n [required]=\"ariaRequired\"\n [aria-label]=\"ariaLabel\"\n [aria-labelledby]=\"ariaLabelledby ? ariaLabelledby : label\"\n [aria-describedby]=\"ariaDescribedby\"\n (keydown.enter)=\"$event.preventDefault()\"\n (keydown.space)=\"$event.preventDefault()\"\n [tabIndex]=\"tabIndex\"\n >\n @if (label) {\n <span\n #tooltip=\"matTooltip\"\n class=\"label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n [matTooltip]=\"showTooltip ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >{{ label }}</span\n >\n }\n <ng-content select=\"[radio-label]\"></ng-content>\n </mat-radio-button>\n</div>\n","queryGuide":{"roles":["radio"],"ariaAttributes":[],"dataTestIds":[],"materialComponents":["mat-radio-button"],"childUIComponents":[],"suggestedQueries":["screen.getByRole('radio')"]},"filePath":"components/radio-button/radio-button.component.ts","supportsTheme":true,"lastModified":1775654032776.9243},"rating":{"name":"RatingComponent","selector":"ui-rating","category":"rating","description":"To use the Rating component, you need to import the `RatingComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/rating","moduleName":"RatingComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme where accordion is used","isSignal":false},{"name":"value","type":"number","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"The value representing the rating.","isSignal":false},{"name":"theme","type":"RatingComponentTheme","defaultValue":"'block'","required":false,"alias":null,"transform":null,"description":"The theme of the rating component. Defaults \"block\".","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"A flag indicating whether the rating component is disabled.","isSignal":false},{"name":"ariaLabel","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"A string representing the ARIA label for accessibility.\nThis label is used to provide an accessible name for the input element.","isSignal":false},{"name":"ariaRequired","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"barWidth","type":"number","defaultValue":"35","required":false,"alias":null,"transform":null,"description":"The width of the rating bar.","isSignal":false},{"name":"canUnselect","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"A flag indicating whether the rating can be unselected by clicking on the same value.\nWhen false, clicking on the same value will not change the rating.","isSignal":false},{"name":"length","type":"number","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":false}],"outputs":[{"name":"valueChange","eventType":"number","alias":null,"description":"","isSignal":false}],"module":{"name":"RatingComponentModule","imports":["CommonModule","MatInputModule"],"exports":["RatingComponent"],"declarations":["RatingComponent","HalfStarPipe"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[{"name":"Default","template":"<ui-rating ${argsToTemplate(args)} applicationTheme=\"${_theme}\"></ui-rating>","props":{"value":"2"}}],"documentation":"## How to use\n\nTo use the Rating component, you need to import the `RatingComponentModule` in your module:\n\n```typescript\nimport { RatingComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n RatingComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-rating [value]=\"3\" theme=\"stars\" [length]=\"5\"></ui-rating>\n```","template":"<div class=\"rating\" (mouseleave)=\"onHover(-1)\" [attr.aria-label]=\"ariaLabel\" [attr.aria-required]=\"ariaRequired\">\n <ng-container ngIf=\"theme === 'block'; else stars\">\n <div\n class=\"rating-item\"\n [attr.theme]=\"applicationTheme\"\n ngFor=\"let item of items\"\n tabindex=\"0\"\n (click)=\"select(item)\"\n (keydown.enter)=\"select(item)\"\n (mouseenter)=\"onHover(item)\"\n [ngClass]=\"{ 'rating-item-selected': item < value, 'rating-item-hover': item < hoverIndex }\"\n [ngStyle]=\"{ 'width.px': barWidth }\"\n ></div>\n </ng-container>\n\n <ng-template #stars>\n <div class=\"star-container\" [attr.theme]=\"applicationTheme\">\n <div\n #star\n class=\"star\"\n tabindex=\"0\"\n [tabIndex]=\"0\"\n (mouseenter)=\"onHover(item)\"\n (mouseleave)=\"onHover(-1)\"\n [ngClass]=\"{\n filled: value > i,\n hover: item < hoverIndex && (value ? item >= value : true),\n disabled,\n 'filled-half': i + 1 \| halfStar: value,\n }\"\n ngFor=\"let item of items; index as i\"\n (click)=\"select(item); star.blur()\"\n (keydown.enter)=\"select(item); star.blur()\"\n ></div>\n </div>\n </ng-template>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":["aria-label","aria-required"],"dataTestIds":[],"materialComponents":[],"childUIComponents":[],"suggestedQueries":["screen.getByLabelText('label text')"]},"filePath":"components/rating/rating.component.ts","supportsTheme":true,"lastModified":1775654032776.9243},"scale":{"name":"ScaleComponent","selector":"ui-scale","category":"scale","description":"To use the Scale component, you need to import the `ScaleComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/scale","moduleName":"ScaleComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"selectedIndex","type":"number \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"The value representing the selected item of the scale.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"companyColor","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Color of the option hover.\nDefaults to Test Gorilla primary color.","isSignal":false},{"name":"length","type":"number","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"The max number of items in the scale.","isSignal":false}],"outputs":[{"name":"selectedIndexChange","eventType":"number","alias":null,"description":"","isSignal":false}],"module":{"name":"ScaleComponentModule","imports":["CommonModule"],"exports":["ScaleComponent"],"declarations":["ScaleComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Scale component, you need to import the `ScaleComponentModule` in your module:\n\n```typescript\nimport { ScaleComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n ScaleComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-scale\n [length]=\"5\"\n [selectedIndex]=\"2\"\n applicationTheme=\"light\"\n (select)=\"onScaleSelect($event)\">\n</ui-scale>\n```\n\nThe component creates a visual scale with selectable points, useful for rating and evaluation interfaces.","template":"<div\n [style.--scale-count]=\"items.length\"\n class=\"scale\"\n [ngStyle]=\"styles()\"\n [ngClass]=\"{ 'scale-classic': applicationTheme === 'classic' }\"\n>\n <div\n class=\"scale-item\"\n ngFor=\"let item of items\"\n (click)=\"select(item)\"\n #scaleItem\n role=\"radio\"\n (keydown)=\"onKeyDown($event, item)\"\n (focus)=\"onFocus(item)\"\n [class.scale-item-focus-prev]=\"selectedIndex && selectedIndex > 0 ? item === selectedIndex - 1 : false\"\n [attr.tabindex]=\"selectedIndex === null ? (item === 0 ? '0' : '-1') : item === selectedIndex ? '0' : '-1'\"\n [attr.aria-checked]=\"\n selectedIndex === null ? (item === 0 ? 'true' : 'false') : item === selectedIndex ? 'true' : 'false'\n \"\n [attr.aria-label]=\"getAriaLabel(item)\"\n [ngClass]=\"{ 'scale-item-selected': item === selectedIndex }\"\n >\n {{ item + 1 }}\n </div>\n</div>\n","queryGuide":{"roles":["radio"],"ariaAttributes":["aria-checked","aria-label"],"dataTestIds":[],"materialComponents":[],"childUIComponents":[],"suggestedQueries":["screen.getByRole('radio')","screen.getByLabelText('label text')"]},"filePath":"components/scale/scale.component.ts","supportsTheme":true,"lastModified":1775654032777.9243},"scale-table":{"name":"ScaleTableComponent","selector":"ui-scale-table","category":"scale-table","description":"To use the Scale Table component, you need to import the `ScaleTableComponent` in your module or component:","importPath":"@testgorilla/tgo-ui/components/scale-table","moduleName":"ScaleTableComponentModule","standalone":true,"changeDetection":"OnPush","inputs":[{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":true},{"name":"labels","type":"string[]","defaultValue":null,"required":true,"alias":null,"transform":null,"description":"Defines description of scales","isSignal":true},{"name":"scaleItems","type":"ScaleItem[]","defaultValue":null,"required":true,"alias":null,"transform":null,"description":"Defines items with their text and it's values","isSignal":true},{"name":"hideBetterExperience","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true}],"outputs":[{"name":"scaleItemChange","eventType":"{\n item: ScaleItem;\n label: string;\n }","alias":null,"description":"","isSignal":true},{"name":"scaleItemsChange","eventType":"ScaleItem[]","alias":null,"description":"Two-way binding change event for scaleItems","isSignal":true},{"name":"hideBetterExperienceChange","eventType":"boolean","alias":null,"description":"Two-way binding change event for hideBetterExperience","isSignal":true}],"module":{"name":"","imports":[],"exports":[],"declarations":[],"providers":[]},"types":{"typeAliases":[],"interfaces":[{"name":"ScaleItem","properties":[{"name":"length","type":"number","optional":true},{"name":"value","type":"number","optional":true},{"name":"text","type":"string","optional":false}]}],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Scale Table component, you need to import the `ScaleTableComponent` in your module or component:\n\n```typescript\nimport { ScaleTableComponent } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n ScaleTableComponent,\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule {}\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-scale-table\n [scaleItems]=\"[\n { text: 'Development Stage 1' },\n { text: 'Development Stage 2', value: 1} // with pre selected value\n ]\"\n/>\n```\n\nThis component displays a table of scales with labels, useful for multi-criteria evaluations.\n","template":"<div class=\"scale-table\">\n <div class=\"better-experience\" [class.hide]=\"hideBetterExperience()\">\n <ui-icon [size]=\"'24'\" [name]=\"'Device-rotate-in-line'\" class=\"mobile-landscape-icon\" />\n <p>{{ 'SCALE_TABLE.ROTATE_DEVICE' \| uiTranslate \| async }}</p>\n <ui-button\n iconName=\"Close\"\n variant=\"icon-button\"\n size=\"small\"\n [justIcon]=\"true\"\n [tooltip]=\"('COMMON.CLOSE' \| uiTranslate \| async)!\"\n (click)=\"hideBetterExperience.set(true)\"\n />\n </div>\n <!-- Header -->\n <div tabindex=\"0\" [attr.aria-label]=\"'scale header'\" class=\"scale-table-header\">\n @for (label of labels(); track $index) {\n <div\n tabindex=\"0\"\n role=\"heading\"\n [attr.aria-level]=\"3\"\n [attr.aria-label]=\"label + ' as ' + ($index + 1)\"\n class=\"scale-size\"\n >\n {{ label }}\n </div>\n }\n </div>\n <!-- Scale Items -->\n @for (scale of scaleItems(); track scale.text) {\n <div class=\"scale-table-row\" tabindex=\"0\" role=\"radiogroup\" [attr.aria-label]=\"scale.text\">\n <div class=\"scale-text\">{{ scale.text }}</div>\n <ui-scale\n [selectedIndex]=\"scale.value ?? null\"\n [length]=\"scale.length ?? labels().length\"\n [applicationTheme]=\"applicationTheme()\"\n (selectedIndexChange)=\"select($index, $event)\"\n />\n </div>\n }\n</div>\n","queryGuide":{"roles":["heading","radiogroup"],"ariaAttributes":["aria-label","aria-level"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon","ui-button","ui-scale"],"suggestedQueries":["screen.getByRole('heading')","screen.getByRole('radiogroup')","screen.getByLabelText('label text')"]},"filePath":"components/scale-table/scale-table.component.ts","supportsTheme":true,"lastModified":1775654032776.9243},"segmented-bar":{"name":"SegmentedBarComponent","selector":"ui-segmented-bar","category":"segmented-bar","description":"To use the Segmented Bar component, you need to import the `SegmentedBarComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/segmented-bar","moduleName":"SegmentedBarComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"width","type":"unknown","defaultValue":"'100%'","required":false,"alias":null,"transform":null,"description":"The width of the segmented bar. Defaults to '100%'.\nYou can use '100%' or '100px' for this field. 100 is just an example","isSignal":false},{"name":"size","type":"SegmentedBarVariant","defaultValue":"'large'","required":false,"alias":null,"transform":null,"description":"The size variant of the segmented bar. Can be 'small' or 'large'.\nDefaults to 'large'.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"ariaLabel","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"A string representing the ARIA label for accessibility.\nThis label is used to provide an accessible name for the input element.","isSignal":false},{"name":"ariaRequired","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"tooltipStats","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Groups the tooltips into one template","isSignal":false},{"name":"segments","type":"SegmentedBar[]","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"The segments to be displayed in the segmented bar.","isSignal":false}],"outputs":[],"module":{"name":"SegmentedBarComponentModule","imports":["CommonModule","MatTooltipModule","MatInputModule","IconComponentModule","TooltipComponentModule"],"exports":["SegmentedBarComponent"],"declarations":["SegmentedBarComponent"],"providers":[]},"types":{"typeAliases":[{"name":"SegmentedBarVariant","value":"'large' \| 'small'"},{"name":"SegmentedBarColor","value":"'teal' \| 'rhubarb' \| 'light-teal' \| 'grey'"},{"name":"SegmentedBarWithPercentage","value":"SegmentedBar & { percentage: string }"}],"interfaces":[{"name":"SegmentedBar","properties":[{"name":"value","type":"number","optional":false},{"name":"color","type":"SegmentedBarColor","optional":false},{"name":"tooltip","type":"string","optional":true},{"name":"icon","type":"IconName","optional":true}]}],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Segmented Bar component, you need to import the `SegmentedBarComponentModule` in your module:\n\n```typescript\nimport { SegmentedBarComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n SegmentedBarComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-segmented-bar\n [segments]=\"[\n { value: 3, color: 'teal', tooltip: 'Completed' },\n { value: 1, color: 'grey', tooltip: 'Pending' },\n { value: 2, color: 'rhubarb', tooltip: 'Failed' }\n ]\"\n applicationTheme=\"light\">\n</ui-segmented-bar>\n```\n\nThis component displays a horizontal bar divided into colored segments, useful for visualizing proportional data.","template":"<div\n class=\"segmented-bar-container\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"'segment-size-' + size\"\n [style.width]=\"width\"\n [uiTooltipTemplate]=\"segmentedStats\"\n [showTooltip]=\"tooltipStats\"\n [attr.aria-label]=\"accessibleValueText\"\n role=\"graphics-object\"\n [tabIndex]=\"0\"\n>\n <ng-container ngFor=\"let segment of segmentList\">\n <div\n class=\"segmented-bar\"\n ngIf=\"segment.value\"\n [ngClass]=\"segment.color\"\n [ngStyle]=\"{ flex: segment.value }\"\n [matTooltip]=\"!tooltipStats ? (segment.tooltip ?? '') : ''\"\n [matTooltipClass]=\"applicationTheme\"\n [attr.aria-hidden]=\"true\"\n [attr.aria-required]=\"ariaRequired\"\n >\n <ui-icon ngIf=\"segment.icon\" [applicationTheme]=\"applicationTheme\" [name]=\"segment.icon\"></ui-icon>\n <span>{{ segment.value }}</span>\n </div>\n </ng-container>\n</div>\n<ng-template #segmentedStats>\n <div class=\"stats-container\">\n <div class=\"name-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <div [class]=\"'point ' + segment.color\"></div>\n <span [class]=\"'label ' + segment.color\">{{ segment.tooltip }}</span>\n </div>\n }\n </div>\n\n <div class=\"value-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <span>{{ segment.value }}</span>\n </div>\n }\n </div>\n\n <div class=\"percentage-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <span>{{ segment.percentage }}</span>\n </div>\n }\n </div>\n </div>\n</ng-template>\n\n<ng-template #segmentedStats>\n <div class=\"stats-container\">\n <div class=\"name-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <div [class]=\"'point ' + segment.color\"></div>\n <span [class]=\"'label ' + segment.color\">{{ segment.tooltip }}</span>\n </div>\n }\n </div>\n\n <div class=\"value-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <span>{{ segment.value }}</span>\n </div>\n }\n </div>\n\n <div class=\"percentage-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <span>{{ segment.percentage }}</span>\n </div>\n }\n </div>\n </div>\n</ng-template>\n","queryGuide":{"roles":["graphics-object"],"ariaAttributes":["aria-label","aria-hidden","aria-required"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon"],"suggestedQueries":["screen.getByRole('graphics-object')","screen.getByLabelText('label text')"]},"filePath":"components/segmented-bar/segmented-bar.component.ts","supportsTheme":true,"lastModified":1775654032777.9243},"segmented-button":{"name":"SegmentedButtonComponent","selector":"ui-segmented-button","category":"segmented-button","description":"To use the Segmented Button component, you need to import the `SegmentedButtonComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/segmented-button","moduleName":"SegmentedButtonComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"buttonConfig","type":"SegmentedButton[]","defaultValue":null,"required":true,"alias":null,"transform":null,"description":"Input property to set the buttons for the segmented button.","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether the component is disabled.\nDefault: false.","isSignal":false},{"name":"fullWidth","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Indicator of the Segmented Button width","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"value","type":"any","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Selected button","isSignal":false}],"outputs":[{"name":"buttonSelected","eventType":"any","alias":null,"description":"","isSignal":false}],"module":{"name":"SegmentedButtonComponentModule","imports":["CommonModule","MatButtonToggleModule","FormsModule","MatTooltipModule"],"exports":["SegmentedButtonComponent"],"declarations":["SegmentedButtonComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[{"name":"SegmentedButton","properties":[{"name":"value","type":"string","optional":false},{"name":"label","type":"string","optional":true},{"name":"template","type":"TemplateRef<any>","optional":true},{"name":"disabled","type":"boolean","optional":true},{"name":"tooltip","type":"string","optional":true}]}],"enums":[]},"examples":[{"name":"Default","template":"<ui-segmented-button [buttonConfig]=\"buttonConfig\" applicationTheme=\"${_theme}\"></ui-segmented-button>","props":{"buttonConfig":"[","label":"'StartButton', value: '1'"}},{"name":"Disabled","template":"<ui-segmented-button [buttonConfig]=\"buttonConfig\" applicationTheme=\"${_theme}\"></ui-segmented-button>","props":{"buttonConfig":"[","label":"'StartButton', value: '1', disabled: true"}},{"name":"WithTemplate","template":"<ng-template #badgeTpl>\n <ui-badge\n label=\"Suggested\"\n variant=\"primary\"\n rebrandColor=\"info\"\n style=\"position: absolute; top: -10px; left: -20px\"\n ></ui-badge>\n Label\n </ng-template>\n <ui-segmented-button applicationTheme=\"${_theme}\"\n [buttonConfig]=\"\n [\n { value: 1, template: badgeTpl },\n { label: 'MiddleButton', value: 2 },\n { label: 'EndButton', value: 3 },\n ]\"\n >\n </ui-segmented-button>","props":{}}],"documentation":"## How to use\n\nTo use the Segmented Button component, you need to import the `SegmentedButtonComponentModule` in your module:\n\n```typescript\nimport { SegmentedButtonComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n SegmentedButtonComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-segmented-button\n [buttonConfig]=\"[\n { label: 'Day', value: 'day' },\n { label: 'Week', value: 'week' },\n { label: 'Month', value: 'month' }\n ]\"\n applicationTheme=\"light\"\n (valueChange)=\"onSelectionChange($event)\">\n</ui-segmented-button>\n```\n\nThe component can also accept custom templates for more complex button content.","template":"<mat-button-toggle-group\n class=\"segmented-button-container\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ disabled, 'full-width': fullWidth }\"\n [value]=\"value\"\n [hideSingleSelectionIndicator]=\"true\"\n (change)=\"manualChangeValue($event)\"\n>\n <mat-button-toggle\n [disableRipple]=\"true\"\n ngFor=\"let button of buttonConfig\"\n [value]=\"button.value\"\n [ngClass]=\"{ disabled: button.disabled }\"\n [matTooltip]=\"button.tooltip ?? ''\"\n >\n <ng-container ngIf=\"button.template; else label\" [ngTemplateOutlet]=\"button.template\"></ng-container>\n <ng-template #label>{{ button.label }}</ng-template>\n </mat-button-toggle>\n</mat-button-toggle-group>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":["mat-button-toggle-group","mat-button-toggle"],"childUIComponents":[],"suggestedQueries":[]},"filePath":"components/segmented-button/segmented-button.component.ts","supportsTheme":true,"lastModified":1775654032778.9243},"selectable-card":{"name":"SelectableCardComponent","selector":"ui-selectable-card","category":"selectable-card","description":"To use the SelectableCard component, you need to import the `SelectableCardComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/selectable-card","moduleName":"SelectableCardComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"size","type":"CardSize","defaultValue":"'medium'","required":false,"alias":null,"transform":null,"description":"Card size. Defaults to \"medium\".","isSignal":true},{"name":"selectedVariant","type":"CardVariant","defaultValue":"'state'","required":false,"alias":null,"transform":null,"description":"Card variant/design for selected state. Defaults to \"default\".","isSignal":true},{"name":"selected","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether the card is selected (input from parent).","isSignal":true},{"name":"isCheckboxDisabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether the checkbox is disabled.","isSignal":true}],"outputs":[{"name":"cardSelected","eventType":"boolean","alias":null,"description":"Event emitted when the card is selected, with the current selected state.","isSignal":true}],"module":{"name":"SelectableCardComponentModule","imports":["CommonModule","CardComponentModule","CheckboxComponentModule"],"exports":["SelectableCardComponent"],"declarations":["SelectableCardComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the SelectableCard component, you need to import the `SelectableCardComponentModule` in your module:\n\n```typescript\nimport { SelectableCardComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n SelectableCardComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-selectable-card \n [size]=\"'medium'\"\n [selected]=\"isSelected\" \n [isCheckboxDisabled]=\"isDisabled\" \n (cardSelected)=\"onCardSelected($event)\">\n <ui-selectable-card-label>Card Label</ui-selectable-card-label>\n <ui-selectable-card-content>\n <div>Your content goes here</div>\n </ui-selectable-card-content>\n</ui-selectable-card>\n```\n\n## Inputs\n\n- `size`: Card size (`'small' \| 'medium' \| 'large'`). Defaults to `'medium'`.\n- `selected`: Whether the card is selected from parent (boolean). Defaults to `false`. This updates the internal selected state.\n- `isCheckboxDisabled`: Whether the card selection is disabled (boolean). Defaults to `false`.\n\n## Outputs\n\n- `cardSelected`: Emitted when the card is selected, with the current selected state (boolean).\n\n## Content Projection\n\n- `ui-selectable-card-label`: Content projected to the checkbox label area.\n- `ui-selectable-card-content`: Content projected to the main card content area.","template":"<ui-card\n class=\"selectable-card\"\n [size]=\"size()\"\n [selected]=\"isSelected()\"\n [allowSelect]=\"!isCheckboxDisabled()\"\n [allowFocus]=\"false\"\n [variant]=\"isCheckboxDisabled() ? 'default' : isSelected() && selectedVariant() ? selectedVariant() : 'state'\"\n (cardSelected)=\"handleSelect()\"\n>\n <ui-checkbox class=\"selectable-card-checkbox\" [checked]=\"isSelected()\" [disabled]=\"isCheckboxDisabled()\">\n <div checkbox-label>\n <ng-content select=\"[ui-selectable-card-label]\"></ng-content>\n </div>\n </ui-checkbox>\n <ng-content select=\"[ui-selectable-card-content]\"></ng-content>\n</ui-card>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-card","ui-checkbox"],"suggestedQueries":[]},"filePath":"components/selectable-card/selectable-card.component.ts","supportsTheme":false,"lastModified":1775654032778.9243},"side-panel":{"name":"SidePanelComponent","selector":"ui-side-panel","category":"side-panel","description":"To use the Side Panel component, you need to inject the `SidePanelService` in your component:","importPath":"@testgorilla/tgo-ui/components/side-panel","moduleName":"SidePanelComponentModule","standalone":true,"changeDetection":"OnPush","inputs":[],"outputs":[],"module":{"name":"","imports":[],"exports":[],"declarations":[],"providers":[]},"types":{"typeAliases":[{"name":"SidePanelPosition","value":"'left' \| 'right'"},{"name":"SidePanelSize","value":"'small' \| 'large'"}],"interfaces":[],"enums":[{"name":"SidePanelAnimationState","members":[{"name":"Open","value":"'open'"},{"name":"Closed","value":"'closed'"},{"name":"ClosedRight","value":"'closedRight'"},{"name":"ClosedLeft","value":"'closedLeft'"}]}]},"examples":[],"documentation":"## How to use\n\nTo use the Side Panel component, you need to inject the `SidePanelService` in your component:\n\n```typescript\nimport { SidePanelService } from '@testgorilla/tgo-ui';\n\n@Component({\n selector: 'your-component',\n // ... other component metadata\n})\nexport class YourComponent {\n constructor(private sidePanelService: SidePanelService) {}\n\n // ...\n}\n```\n\nThe Side Panel component is used to display content in a panel that slides in from the side of the screen. You can control which side it appears from, whether it shows a header, back button, close button and set a title for the panel.\n\n### Opening a Side Panel\n\nTo open a side panel, use the `open` method of the `SidePanelService`:\n\n```typescript\nopenPanel(): void {\n this.sidePanelService.open(YourContentComponent, {\n position: 'right', // or 'left'\n showBackButton: true,\n title: 'Panel Title',\n showCloseButton: true,\n showHeader: true,\n data: { key: 'value' }, // Optional data to pass to the component\n });\n}\n```\n\nThe first parameter is the component that you want to display inside the side panel. The second parameter is a configuration object with the following properties:\n\n- `position`: Either 'left' or 'right', determining which side the panel slides in from\n- `showHeader`: Whether to show the header of the panel (defaults to true)\n- `showBackButton`: Whether to show a back button in the panel header\n- `title`: The title to display in the panel header\n- `showCloseButton`: Whether to show a close button in the panel header (defaults to true)\n- `data`: Optional data to pass to the component displayed in the side panel\n\n### Creating a Content Component\n\nYour content component will be displayed inside the side panel. To close the panel from within your content component, you can inject the `SidePanelComponent` and call its `close` method:\n\n```typescript\nimport { SidePanelComponent } from '@testgorilla/tgo-ui';\n\n@Component({\n // ... component metadata\n})\nexport class YourContentComponent {\n constructor(private sidePanelComponent: SidePanelComponent) {}\n\n closePanel(): void {\n this.sidePanelComponent.close();\n }\n}\n```\n\n### Accessing Data in the Content Component\n\nIf you pass data to the side panel through the `data` property in the configuration, you can access it in your content component using the `SIDE_PANEL_DATA` injection token:\n\n```typescript\nimport { Component, inject } from '@angular/core';\nimport { SidePanelComponent, SIDE_PANEL_DATA } from '@testgorilla/tgo-ui';\n\n@Component({\n selector: 'app-content',\n template: `\n <div>\n <h2>Data from parent:</h2>\n <pre>{{ data \| json }}</pre>\n <button (click)=\"close()\">Close Panel</button>\n </div>\n `,\n})\nexport class ContentComponent {\n private sidePanelComponent = inject(SidePanelComponent);\n\n // Access the data passed to the side panel\n data = inject(SIDE_PANEL_DATA);\n\n close(): void {\n this.sidePanelComponent.close();\n }\n}\n```\n\n### Examples\n\n#### Basic Usage\n\n```typescript\nimport { Component, inject } from '@angular/core';\nimport { SidePanelService } from '@testgorilla/tgo-ui';\n\n@Component({\n selector: 'app-demo',\n template: ` <button (click)=\"openSidePanel()\">Open Side Panel</button> `,\n})\nexport class DemoComponent {\n private sidePanelService = inject(SidePanelService);\n\n openSidePanel(): void {\n this.sidePanelService.open(ContentComponent, {\n position: 'right',\n showBackButton: false,\n title: 'Information Panel',\n });\n }\n}\n\n@Component({\n template: `\n <div style=\"padding: 16px;\">\n <h2>Panel Content</h2>\n <p>This is the content of the side panel.</p>\n <button (click)=\"close()\">Close</button>\n </div>\n `,\n standalone: true,\n})\nexport class ContentComponent {\n private sidePanelComponent = inject(SidePanelComponent);\n\n close(): void {\n this.sidePanelComponent.close();\n }\n}\n```\n\n#### With Back Button\n\n```typescript\nthis.sidePanelService.open(ContentComponent, {\n position: 'right',\n showBackButton: true,\n title: 'Panel with Back Button',\n});\n```\n\n#### Left-positioned Panel\n\n```typescript\nthis.sidePanelService.open(ContentComponent, {\n position: 'left',\n showBackButton: false,\n title: 'Left Side Panel',\n});\n```\n\n#### With Data Passed to Component\n\n```typescript\nthis.sidePanelService.open(ContentComponent, {\n position: 'right',\n showBackButton: false,\n title: 'Panel with Data',\n data: {\n userId: 123,\n userName: 'John Doe',\n items: [1, 2, 3],\n },\n});\n```\n\n#### Without Header\n\n```typescript\nthis.sidePanelService.open(ContentComponent, {\n position: 'right',\n showHeader: false,\n});\n```\n\n#### With Header but No Close Button\n\n```typescript\nthis.sidePanelService.open(ContentComponent, {\n position: 'right',\n title: 'Panel Title',\n showCloseButton: false,\n});\n```\n","template":"<div\n class=\"side-panel-backdrop\"\n #sidePanelBackdrop\n tabindex=\"0\"\n (click)=\"close()\"\n (keydown.enter)=\"close()\"\n [@fadeInOut]=\"isOpen() ? 'open' : 'closed'\"\n></div>\n<div\n class=\"side-panel\"\n [class]=\"sidePanelConfig.panelClass\"\n [class.side-panel-small]=\"isSmall()\"\n [class.side-panel-large]=\"isLarge()\"\n #sidePanel\n [@slideInOut]=\"animation()\"\n>\n @if (sidePanelConfig.showHeader) {\n <div class=\"side-panel-header\">\n <div class=\"side-panel-title-container\">\n @if (sidePanelConfig.showBackButton) {\n <ui-button\n class=\"side-panel-action\"\n [variant]=\"'icon-button'\"\n [iconName]=\"'Arrow-chevron-left-filled'\"\n (click)=\"close()\"\n [tooltip]=\"('COMMON.BACK' \| uiTranslate \| async)!\"\n size=\"medium\"\n ></ui-button>\n }\n <span class=\"side-panel-title h3 bold\">{{ sidePanelConfig.title }}</span>\n </div>\n @if (sidePanelConfig.showCloseButton) {\n <ui-button\n class=\"side-panel-action side-panel-action-close\"\n [variant]=\"'icon-button'\"\n [iconName]=\"'Close'\"\n [tooltip]=\"('COMMON.CLOSE' \| uiTranslate \| async)!\"\n (click)=\"close()\"\n size=\"medium\"\n ></ui-button>\n }\n </div>\n }\n\n <div class=\"side-panel-content\">\n <ng-container #sidePanelContainer></ng-container>\n </div>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-button"],"suggestedQueries":[]},"filePath":"components/side-panel/side-panel.component.ts","supportsTheme":false,"lastModified":1775654032778.9243},"side-sheet":{"name":"SideSheetComponent","selector":"ui-side-sheet","category":"side-sheet","description":"SideSheetComponent component","importPath":"@testgorilla/tgo-ui/components/side-sheet","moduleName":"SideSheetComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"position","type":"SideSheetPosition","defaultValue":"'end'","required":false,"alias":null,"transform":null,"description":"Set position. Defaults \"end\"","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false}],"outputs":[{"name":"openChange","eventType":"boolean","alias":null,"description":"","isSignal":false}],"module":{"name":"SideSheetComponentModule","imports":["CommonModule","IconComponentModule","ButtonComponentModule","MatTooltipModule","MatSidenavModule","UiTranslatePipe","LogoComponentModule"],"exports":["SideSheetComponent"],"declarations":["SideSheetComponent"],"providers":[]},"types":{"typeAliases":[{"name":"SideSheetPosition","value":"'start' \| 'end'"}],"interfaces":[{"name":"SideSheetConfig","properties":[{"name":"componentRef","type":"any","optional":false},{"name":"title","type":"string","optional":true},{"name":"showLogo","type":"boolean","optional":true},{"name":"showBackButton","type":"boolean","optional":true},{"name":"showTitleTooltip","type":"boolean","optional":true},{"name":"closed","type":"Observable<void>","optional":true}]}],"enums":[]},"examples":[],"documentation":"","template":"<ng-container>\n <mat-drawer-container class=\"side-sheet-container\" [attr.theme]=\"applicationTheme\" [hasBackdrop]=\"true\">\n <mat-drawer\n (closedStart)=\"onOpenChange(false)\"\n (openedStart)=\"onOpenChange(true)\"\n #drawer\n [mode]=\"'over'\"\n [autoFocus]=\"false\"\n class=\"side-sheet-content\"\n [position]=\"position\"\n >\n <div class=\"header\">\n <div class=\"title\">\n <ui-button\n ngIf=\"showBackButton\"\n [variant]=\"'icon-button'\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-filled'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"('COMMON.BACK' \| uiTranslate \| async)!\"\n (click)=\"onClose()\"\n ></ui-button>\n <span ngIf=\"title\" [matTooltip]=\"showTitleTooltip ? title : ''\" [matTooltipClass]=\"applicationTheme\">{{\n title\n }}</span>\n <ui-logo ngIf=\"showLogo\"></ui-logo>\n </div>\n <ui-button\n [variant]=\"'icon-button'\"\n [iconName]=\"'Close'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"('COMMON.CLOSE' \| uiTranslate \| async)!\"\n (click)=\"onClose()\"\n ></ui-button>\n </div>\n <ng-container #container></ng-container>\n </mat-drawer>\n <mat-drawer-content>\n <ng-content></ng-content>\n </mat-drawer-content>\n </mat-drawer-container>\n</ng-container>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":["mat-drawer-container","mat-drawer","mat-drawer-content"],"childUIComponents":["ui-button","ui-logo"],"suggestedQueries":[]},"filePath":"components/side-sheet/side-sheet.component.ts","supportsTheme":true,"lastModified":1775654032779.9243},"skeleton":{"name":"SkeletonComponent","selector":"ui-skeleton","category":"skeleton","description":"To use the Skeleton component, you need to import the `SkeletonComponent` in your module:","importPath":"@testgorilla/tgo-ui/components/skeleton","moduleName":"SkeletonComponentModule","standalone":true,"changeDetection":"Default","inputs":[{"name":"count","type":"number \| string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"isAiTheme","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"theme","type":"NgxSkeletonLoaderConfigTheme","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"appearance","type":"Appearance","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":false}],"outputs":[],"module":{"name":"","imports":[],"exports":[],"declarations":[],"providers":[]},"types":{"typeAliases":[{"name":"Appearance","value":"NgxSkeletonLoaderConfig['appearance']"}],"interfaces":[],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Skeleton component, you need to import the `SkeletonComponent` in your module:\n\n```typescript\nimport { SkeletonComponent } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n SkeletonComponent\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-skeleton \n [count]=\"3\"\n [appearance]=\"'line'\"\n [theme]=\"{ height: '24px' }\"\n applicationTheme=\"light\">\n</ui-skeleton>\n```\n\nThe component creates placeholder loading animations and supports various shapes and sizes.","template":"<ngx-skeleton-loader\n [class.skeleton-ai]=\"isAiTheme\"\n [count]=\"count\"\n [theme]=\"currentTheme$ \| async\"\n [appearance]=\"(appearance$ \| async) \|\| 'line'\"\n></ngx-skeleton-loader>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":[],"suggestedQueries":[]},"filePath":"components/skeleton/skeleton.component.ts","supportsTheme":true,"lastModified":1775654032779.9243},"slider":{"name":"SliderComponent","selector":"ui-slider","category":"slider","description":"To use the Slider component, you need to import the `SliderComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/slider","moduleName":"SliderComponentModule","standalone":true,"changeDetection":"OnPush","inputs":[{"name":"max","type":"number","defaultValue":"100","required":false,"alias":null,"transform":null,"description":"The maximum value of the slider.","isSignal":false},{"name":"min","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"The minimum value of the slider.","isSignal":false},{"name":"percentage","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"A flag indicating whether the slider displays values as percentages.","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"A flag indicating whether the slider is disabled.","isSignal":false},{"name":"sliderStart","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"The starting value of the slider.","isSignal":false},{"name":"sliderEnd","type":"number","defaultValue":"100","required":false,"alias":null,"transform":null,"description":"The ending value of the slider.","isSignal":false},{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"The label for the slider.","isSignal":false},{"name":"showInputs","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Show slider inputs.","isSignal":false},{"name":"step","type":"number","defaultValue":"1","required":false,"alias":null,"transform":null,"description":"Step number.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"variant","type":"SliderVariant","defaultValue":"'range'","required":false,"alias":null,"transform":null,"description":"Defines the variant slider","isSignal":false},{"name":"useDecimal","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Controls whether decimal values are allowed in the input fields.\nWhen true, inputs accept decimal numbers (up to 2 decimal places).\nWhen false, inputs only accept whole numbers.","isSignal":true},{"name":"useThousandsSeparator","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Controls whether numbers are displayed with thousands separators.\nWhen true, displays numbers like \"100,000\" instead of \"100000\".\nThis is independent of useDecimal - you can have thousands separators\nwithout decimals, or decimals without thousands separators.","isSignal":true},{"name":"minLabel","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"maxLabel","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"inputWidth","type":"number","defaultValue":"80","required":false,"alias":null,"transform":null,"description":"","isSignal":true}],"outputs":[{"name":"sliderValueChange","eventType":"SliderValue","alias":null,"description":"","isSignal":false}],"module":{"name":"SliderComponentModule","imports":["SliderComponent"],"exports":["SliderComponent"],"declarations":[],"providers":[]},"types":{"typeAliases":[{"name":"SliderVariant","value":"'basic' \| 'range'"}],"interfaces":[{"name":"SliderValue","properties":[{"name":"start","type":"number","optional":false},{"name":"end","type":"number","optional":false}]}],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Slider component, you need to import the `SliderComponentModule` in your module:\n\n```typescript\nimport { SliderComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n SliderComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-slider\n [min]=\"0\"\n [max]=\"100\"\n [sliderStart]=\"25\"\n [sliderEnd]=\"75\"\n applicationTheme=\"light\"\n (valueChange)=\"onValueChange($event)\">\n</ui-slider>\n```\n\nThe slider supports single value or range selection, custom steps, decimal values, and percentage display.","template":"<ng-container>\n <div\n class=\"slider-container\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\n >\n @if (label) {\n <div class=\"slider-label\">{{ label }}</div>\n }\n\n <div class=\"slider\">\n @if (!isBasicSlider) {\n <div class=\"min-value\">\n <span>\n @if (useThousandsSeparator()) {\n {{ min \| number }}\n } @else {\n {{ min }}\n }\n @if (percentage) {\n %\n }\n </span>\n </div>\n }\n <mat-slider\n [disableRipple]=\"applicationTheme !== 'classic'\"\n #sliderElement\n discrete\n [disabled]=\"disabled\"\n [max]=\"max\"\n [min]=\"min\"\n [step]=\"step\"\n (mouseenter)=\"sliderElement.discrete = true\"\n (mouseleave)=\"sliderElement.discrete = false\"\n [displayWith]=\"formatLabel\"\n >\n @if (isBasicSlider) {\n <input [disabled]=\"disabled\" (valueChange)=\"onValueChange($event)\" [(ngModel)]=\"sliderStart\" matSliderThumb />\n } @else {\n <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderStart\" matSliderStartThumb />\n <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderEnd\" matSliderEndThumb />\n }\n </mat-slider>\n @if (!isBasicSlider) {\n <div class=\"max-value\">\n <span>\n @if (useThousandsSeparator()) {\n {{ max \| number }}\n } @else {\n {{ max }}\n }\n @if (percentage) {\n %\n }\n </span>\n </div>\n }\n </div>\n\n @if (showInputs && !isBasicSlider) {\n <div class=\"slider-input\">\n <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n @if (minLabel()) {\n <mat-label>\n {{ minLabel() }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n } @else {\n <mat-label>\n {{ 'COMMON.MIN' \| uiTranslate \| async }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n }\n @if (useDecimal()) {\n <input\n matInput\n [type]=\"'text'\"\n [(ngModel)]=\"sliderStart\"\n [disabled]=\"disabled\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('start')\"\n (keydown.enter)=\"onInputBlur('start')\"\n mask=\"separator.2\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n />\n } @else {\n <input\n matInput\n [type]=\"'text'\"\n [(ngModel)]=\"sliderStart\"\n [disabled]=\"disabled\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('start')\"\n (keydown.enter)=\"onInputBlur('start')\"\n mask=\"separator.0\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n />\n }\n </mat-form-field>\n <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n @if (maxLabel()) {\n <mat-label>\n {{ maxLabel() }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n } @else {\n <mat-label>\n {{ 'COMMON.MAX' \| uiTranslate \| async }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n }\n @if (useDecimal()) {\n <input\n matInput\n [disabled]=\"disabled\"\n [type]=\"'text'\"\n [(ngModel)]=\"sliderEnd\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('end')\"\n (keydown.enter)=\"onInputBlur('end')\"\n data-testid=\"slider.input-end\"\n mask=\"separator.2\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n />\n } @else {\n <input\n matInput\n [disabled]=\"disabled\"\n [type]=\"'text'\"\n [(ngModel)]=\"sliderEnd\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('end')\"\n (keydown.enter)=\"onInputBlur('end')\"\n mask=\"separator.0\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n data-testid=\"slider.input-end\"\n />\n }\n </mat-form-field>\n </div>\n }\n\n @if (hasError && touchedControlName) {\n <mat-error class=\"slider-errors\">\n @if (touchedControlName === 'start' && sliderStart > sliderEnd) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{\n translationContext + 'MIN_MORE_THAN_MAX' \| uiTranslate: { min: sliderStart, max: sliderEnd } \| async\n }}</span>\n </div>\n }\n @if (touchedControlName === 'end' && sliderStart > sliderEnd) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{\n translationContext + 'MAX_LESS_THAN_MIN' \| uiTranslate: { min: sliderStart, max: sliderEnd } \| async\n }}</span>\n </div>\n }\n @if (sliderStart < min) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ 'COMMON.MIN' \| uiTranslate \| async }} {{ min }}</span>\n </div>\n }\n @if (sliderEnd > max) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ 'COMMON.MAX' \| uiTranslate \| async }} {{ max }}</span>\n </div>\n }\n </mat-error>\n }\n </div>\n</ng-container>\n","queryGuide":{"roles":["slider"],"ariaAttributes":[],"dataTestIds":["slider.input-end"],"materialComponents":["mat-slider","mat-form-field","mat-label","mat-error"],"childUIComponents":["ui-icon"],"suggestedQueries":["screen.getByRole('slider')","screen.getByTestId('slider.input-end')"]},"filePath":"components/slider/slider.component.ts","supportsTheme":true,"lastModified":1775654032780.9243},"snackbar":{"name":"SnackbarComponent","selector":"ui-snackbar","category":"bars","description":"To use the Snackbar component, you need to import the `SnackbarComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/snackbar","moduleName":"SnackbarComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"snackbarType","type":"SnackbarType","defaultValue":"'success'","required":false,"alias":null,"transform":null,"description":"Background color of the button while in active state","isSignal":false},{"name":"message","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Snackbar message","isSignal":false},{"name":"seconds","type":"number","defaultValue":"5","required":false,"alias":null,"transform":null,"description":"Set the time that the snackbar will be visible","isSignal":false},{"name":"includeDismissButton","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Include dismmiss button","isSignal":false},{"name":"fixed","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Static or fixed position","isSignal":false},{"name":"linkText","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Link text that will appended at the end of message","isSignal":false},{"name":"linkUrl","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Link url","isSignal":false},{"name":"linkTarget","type":"LinkTargetType","defaultValue":"'_blank'","required":false,"alias":null,"transform":null,"description":"Link target","isSignal":false},{"name":"variant","type":"SnackbarVariant","defaultValue":"'desktop'","required":false,"alias":null,"transform":null,"description":"The variant to be used","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"closeButtonTooltip","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Close button tooltip","isSignal":false},{"name":"ariaDescribedby","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"html","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Snackbar message from html","isSignal":false}],"outputs":[],"module":{"name":"SnackbarComponentModule","imports":["CommonModule","ButtonComponentModule","IconComponentModule","UiTranslatePipe","MatSnackBarModule","MatTooltipModule"],"exports":["SnackbarComponent"],"declarations":["SnackbarComponent"],"providers":["SnackbarService"]},"types":{"typeAliases":[{"name":"SnackbarType","value":"'success' \| 'error' \| 'info' \| 'warning'"},{"name":"SnackbarVariant","value":"'desktop' \| 'mobile'"}],"interfaces":[{"name":"SnackbarLink","properties":[{"name":"text","type":"string","optional":false},{"name":"url","type":"string","optional":false},{"name":"action","type":"() => void \| null","optional":false}]}],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Snackbar component, you need to import the `SnackbarComponentModule` in your module:\n\n```typescript\nimport { SnackbarComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n SnackbarComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThe Snackbar is usually used via the service:\n\n```typescript\nimport { SnackbarService } from '@testgorilla/tgo-ui';\n\n// In your component\nconstructor(private snackbarService: SnackbarService) {}\n\nshowSuccessMessage() {\n this.snackbarService.show({\n message: 'Success message',\n snackbarType: 'success',\n seconds: 5\n });\n}\n```\n\nYou can also use the component directly in your templates:\n\n```html\n<ui-snackbar\n message=\"This is a snackbar message\"\n snackbarType=\"info\"\n [seconds]=\"10\"\n [includeDismissButton]=\"true\"\n applicationTheme=\"light\">\n</ui-snackbar>\n```\n\nThe snackbar component is used to display brief messages to users.","template":"<ng-container>\n <div\n [ngClass]=\"snackbarType + ' ' + position\"\n [@openClose]\n ngIf=\"visible\"\n class=\"snackbar-container\"\n [attr.theme]=\"applicationTheme\"\n [class.mobile]=\"variant === 'mobile'\"\n [class.desktop]=\"variant === 'desktop'\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n data-testid=\"snackbar-wrapper\"\n [attr.data-test-snackbar-type]=\"snackbarType\"\n [attr.aria-describedby]=\"'describedby'\"\n role=\"alert\"\n [attr.aria-labelledby]=\"'labelledby'\"\n >\n <span style=\"position: absolute; left: -9999px\" id=\"labelledby\">{{\n 'ALERT_BANNER.' + (snackbarType \| uppercase) \| uiTranslate \| async\n }}</span>\n <span style=\"position: absolute; left: -9999px\"\n >{{ message }}\n <a ngIf=\"!!linkText\" [target]=\"linkTarget\" [href]=\"linkUrl\" (click)=\"onLinkClick($event)\">{{ linkText }}</a>\n </span>\n <span [style.display]=\"'none'\" id=\"describedby\">{{ ariaDescribedby }}</span>\n <div\n aria-hidden=\"true\"\n class=\"snackbar-text\"\n [matTooltip]=\"message.length > maxCharacters ? message : ''\"\n data-testid=\"snackbar-content\"\n >\n <ui-icon ngIf=\"applicationTheme === 'classic'\" [name]=\"iconName\" size=\"24\"></ui-icon>\n {{ message.length > maxCharacters ? (message \| slice: 0 : maxCharacters) + '..' : message }}\n <div ngIf=\"safeHtml\" [innerHTML]=\"safeHtml\"></div>\n <a ngIf=\"!!linkText\" [target]=\"linkTarget\" [href]=\"linkUrl\" (click)=\"onLinkClick($event)\">{{ linkText }}</a>\n </div>\n <ui-button\n ngIf=\"includeDismissButton && applicationTheme === 'classic'\"\n variant=\"text\"\n [label]=\"(translationContext + 'DISMISS' \| uiTranslate \| async)!\"\n [applicationTheme]=\"applicationTheme !== 'classic' ? 'light' : 'classic'\"\n (buttonClickEvent)=\"dismissClick()\"\n data-testid=\"snackbar-dismiss-button\"\n ></ui-button>\n <ui-button\n ngIf=\"includeDismissButton && applicationTheme !== 'classic'\"\n [variant]=\"'icon-button'\"\n [applicationTheme]=\"'light'\"\n [iconName]=\"'Close-in-line'\"\n [size]=\"'small'\"\n [tooltip]=\"(closeButtonTooltip \|\| ('COMMON.CLOSE' \| uiTranslate \| async))!\"\n (click)=\"dismissClick()\"\n data-testid=\"snackbar-dismiss-button\"\n ></ui-button>\n </div>\n</ng-container>\n","queryGuide":{"roles":["alert"],"ariaAttributes":["aria-hidden","aria-describedby","aria-labelledby"],"dataTestIds":["snackbar-wrapper","snackbar-content","snackbar-dismiss-button"],"materialComponents":[],"childUIComponents":["ui-icon","ui-button"],"suggestedQueries":["screen.getByRole('alert')","screen.getByTestId('snackbar-wrapper')","screen.getByTestId('snackbar-content')","screen.getByTestId('snackbar-dismiss-button')"]},"filePath":"components/snackbar/snackbar.component.ts","supportsTheme":true,"lastModified":1775654032780.9243},"spider-chart":{"name":"SpiderChartComponent","selector":"ui-spider-chart","category":"charts","description":"SpiderChartComponent component","importPath":"@testgorilla/tgo-ui/components/spider-chart","moduleName":"SpiderChartComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"size","type":"SpiderChartSize","defaultValue":"'large'","required":false,"alias":null,"transform":null,"description":"The size of the spider chart.","isSignal":false},{"name":"spiderChartData","type":"SpiderChartData","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"The data to be used for the spider chart.","isSignal":false},{"name":"stepSize","type":"number","defaultValue":"20","required":false,"alias":null,"transform":null,"description":"The step size for the spider chart.","isSignal":false},{"name":"ariaLabel","type":"unknown","defaultValue":"'Radar chart. Press tab to navigate through the chart.'","required":false,"alias":null,"transform":null,"description":"The aria label for the spider chart.","isSignal":false},{"name":"loading","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether the spider chart is loading.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false}],"outputs":[],"module":{"name":"SpiderChartComponentModule","imports":["NgClass","UiTranslatePipe","NgChartsModule","MatTooltipModule","UiTranslatePipe","MemoizeFuncPipe","SpinnerComponentModule","CommonModule"],"exports":["SpiderChartComponent"],"declarations":["SpiderChartComponent"],"providers":[]},"types":{"typeAliases":[{"name":"SpiderChartSize","value":"'large' \| 'small'"},{"name":"SpiderChartData","value":"{\n labels: string[];\n labelDescription: string[];\n plotData: [PlotData, PlotData] \| [PlotData]; // Current implementation supports max 2 datasets.\n}"},{"name":"PlotData","value":"{\n databaseLabel: string;\n data: number[];\n}"}],"interfaces":[],"enums":[]},"examples":[],"documentation":"","template":"<div class=\"spider-chart-container\" tabindex=\"0\" [attr.aria-label]=\"ariaLabel\">\n <div\n class=\"spacing-container\"\n [ngClass]=\"{ 'small-spacing': radarChartData.labels && radarChartData.labels.length % 2 === 1 && !loading }\"\n >\n <div\n class=\"chart-container\"\n [style.width]=\"size === 'large' ? '280px' : '200px'\"\n [style.height]=\"size === 'large' ? '280px' : '200px'\"\n >\n @if (!loading) {\n <canvas baseChart [data]=\"radarChartData\" [options]=\"radarChartOptions\" type=\"radar\" class=\"chart\"> </canvas>\n } @else {\n <canvas baseChart [data]=\"loadingChartData\" [options]=\"loadingChartOptions\" type=\"radar\" class=\"chart\">\n </canvas>\n <ui-spinner></ui-spinner>\n }\n\n @if (labelPositionsVisible) {\n <div class=\"overlay-container\">\n @for (label of spiderChartData.labels; track label) {\n <div\n class=\"label-container\"\n #labelContainer\n [matTooltip]=\"spiderChartData.labelDescription[$index]\"\n [tabindex]=\"$index === 0 ? '0' : '-1'\"\n (keydown)=\"onLabelKeyDown($event, $index)\"\n [attr.aria-label]=\"spiderChartData.labelDescription[$index]\"\n [style.left]=\"getCenteredLabelLeftPosition(label, labelContainer.offsetWidth)\"\n [style.bottom]=\"getCenteredLabelBottomPosition(label, labelContainer.offsetHeight)\"\n >\n @if (!(label.length > 20 && size === 'large' && spiderChartData.labels.length < 9)) {\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n {{ label }}\n </div>\n } @else {\n <div>\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n {{ label \| memoizeFunc: getFirstLine }}\n </div>\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n {{ label \| memoizeFunc: getSecondLine : this }}\n </div>\n </div>\n }\n <span class=\"value\">{{ spiderChartData.plotData[0].data[$index] }}</span>\n </div>\n <span\n class=\"fake-data-points\"\n #fakeDataPoints\n [tabindex]=\"focusedLabelIndex === $index ? '0' : '-1'\"\n (focus)=\"$index === focusedLabelIndex ? showTooltipForDataPoint($index) : null\"\n (keydown)=\"onFakeDataPointsKeyDown($event, $index)\"\n >\n </span>\n @if (radarChartData.datasets.length > 1) {\n <span\n class=\"fake-data-points-secondary\"\n #fakeDataPointsSecondary\n [tabindex]=\"focusedFakeDataPointIndex === $index ? '0' : '-1'\"\n (focus)=\"$index === focusedFakeDataPointIndex ? showTooltipForDataPoint($index, true) : null\"\n (keydown)=\"onFakeDataPointsKeyDown($event, $index, true)\"\n >\n </span>\n }\n }\n </div>\n }\n </div>\n </div>\n @if (radarChartData.datasets.length > 0) {\n <div class=\"legend-container\">\n @for (dataset of radarChartData.datasets; track dataset.label) {\n <div\n class=\"legend-item\"\n (click)=\"toggleDatasetVisibility($index)\"\n [tabindex]=\"$index === 0 ? '0' : '-1'\"\n role=\"button\"\n [attr.aria-pressed]=\"isDatasetVisible($index) ? false : true\"\n [attr.aria-label]=\"\n isDatasetVisible($index)\n ? (translationContext + 'DATASET_VISIBLE' \| uiTranslate: { dataset: dataset.label } \| async)\n : (translationContext + 'DATASET_HIDDEN' \| uiTranslate: { dataset: dataset.label } \| async)\n \"\n (keydown)=\"onLegendItemKeyDown($event, $index)\"\n #legendItem\n >\n <span class=\"legend-line\" [ngClass]=\"{ 'solid-line': $index === 0, 'dashed-line': $index === 1 }\"></span>\n <span class=\"legend-label\" [style.text-decoration]=\"isDatasetVisible($index) ? 'none' : 'line-through'\">\n {{ dataset.label }}\n </span>\n </div>\n }\n </div>\n }\n</div>\n","queryGuide":{"roles":["button"],"ariaAttributes":["aria-label","aria-pressed"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-spinner"],"suggestedQueries":["screen.getByRole('button')","screen.getByLabelText('label text')"]},"filePath":"components/spider-chart/spider-chart.component.ts","supportsTheme":true,"lastModified":1775654032781.9243},"spinner":{"name":"SpinnerComponent","selector":"ui-spinner","category":"spinner","description":"To use the Spinner component, you need to import the `SpinnerComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/spinner","moduleName":"SpinnerComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"size","type":"SpinnerSize","defaultValue":"'large'","required":false,"alias":null,"transform":null,"description":"The size variant of the spinner. Can be 'small' or 'large'.\nDefaults to 'large'.","isSignal":false},{"name":"isLoader","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Set position fixed on page\nDefaults to 'true'.","isSignal":false},{"name":"text","type":"string \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"The text to display below the spinner.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"iconName","type":"IconName","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Custom Icon name","isSignal":false},{"name":"iconSize","type":"IconSize","defaultValue":"'24'","required":false,"alias":null,"transform":null,"description":"Custom Icon size","isSignal":false}],"outputs":[],"module":{"name":"SpinnerComponentModule","imports":["NgClass","NgIf","UiTranslatePipe","AsyncPipe","IconComponentModule"],"exports":["SpinnerComponent"],"declarations":["SpinnerComponent"],"providers":[]},"types":{"typeAliases":[{"name":"SpinnerSize","value":"'large' \| 'small'"}],"interfaces":[],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Spinner component, you need to import the `SpinnerComponentModule` in your module:\n\n```typescript\nimport { SpinnerComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n SpinnerComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-spinner \n size=\"medium\"\n [text]=\"'Loading...'\" \n [isLoader]=\"true\"\n applicationTheme=\"light\">\n</ui-spinner>\n```\n\nThe spinner can be used to indicate loading states throughout the application.","template":"<div\n class=\"spinner-container\"\n [ngClass]=\"classes\"\n [attr.theme]=\"applicationTheme\"\n [attr.aria-label]=\"'COMMON.LOADING' \| uiTranslate \| async\"\n role=\"alert\"\n>\n @if (!iconName) {\n <svg class=\"spinner\" viewBox=\"0 0 50 50\">\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\"></circle>\n </svg>\n } @else {\n <ui-icon [name]=\"iconName\" [size]=\"iconSize\"></ui-icon>\n }\n\n @if (text) {\n <h3 class=\"spinner-text\">{{ text }}</h3>\n }\n</div>\n","queryGuide":{"roles":["alert"],"ariaAttributes":["aria-label"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon"],"suggestedQueries":["screen.getByRole('alert')","screen.getByLabelText('label text')"]},"filePath":"components/spinner/spinner.component.ts","supportsTheme":true,"lastModified":1775654032781.9243},"stepper":{"name":"StepperComponent","selector":"ui-stepper","category":"stepper","description":"To use the Stepper component, you need to import the `StepperComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/stepper","moduleName":"StepperComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"lastStepFinalIcon","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Input property indicating whether the final icon should be displayed.\nDefault value is false.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"ariaLabel","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"A string representing the ARIA label for accessibility.\nThis label is used to provide an accessible name for the input element.","isSignal":false},{"name":"position","type":"StepperPosition","defaultValue":"'horizontal'","required":false,"alias":null,"transform":null,"description":"Defines the stepper position","isSignal":false},{"name":"ariaRequired","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"stepperVariant","type":"StepperVariation","defaultValue":"'primary'","required":false,"alias":null,"transform":null,"description":"A string representing the stepper variant.\nThis attribute is used to indicate the variant that should be used.","isSignal":false},{"name":"setFirstStepAutoSelect","type":"boolean","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Auto selects first step as visited\nDefaults to true","isSignal":false},{"name":"steps","type":"Step[]","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input property to set the steps for the stepper.\nThe first step will be marked as visited automatically.","isSignal":false},{"name":"setSelectedIndex","type":"number","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input property to set the selected index of the stepper.\nDefault value is 0.","isSignal":false}],"outputs":[{"name":"selectionChange","eventType":"{ selectedIndex: number; previousIndex: number; step: Step }","alias":null,"description":"","isSignal":false}],"module":{"name":"StepperComponentModule","imports":["CommonModule","IconComponentModule","StepComponentModule","MatProgressSpinnerModule","RadialProgressComponentModule","UiTranslatePipe","MatInputModule"],"exports":["StepperComponent"],"declarations":["StepperComponent","StepLineElementDirective"],"providers":[]},"types":{"typeAliases":[{"name":"StepperPosition","value":"'horizontal' \| 'vertical'"},{"name":"StepperVariation","value":"'primary' \| 'secondary'"}],"interfaces":[{"name":"Step","properties":[{"name":"label","type":"string","optional":false},{"name":"isVisited","type":"boolean","optional":true},{"name":"iconName","type":"IconName","optional":true},{"name":"disabled","type":"boolean","optional":true},{"name":"submitted","type":"boolean","optional":true},{"name":"showIconWhenSelected","type":"boolean","optional":true},{"name":"htmlDescription","type":"HtmlDescription[]","optional":true},{"name":"boldLabel","type":"boolean","optional":true},{"name":"descriptionTpl","type":"TemplateRef<any>","optional":true},{"name":"labelTooltip","type":"string","optional":true},{"name":"alwaysShowIcon","type":"boolean","optional":true},{"name":"context","type":"any","optional":true}]},{"name":"HtmlDescription","properties":[{"name":"text","type":"string","optional":true},{"name":"iconName","type":"IconName","optional":true},{"name":"iconTooltip","type":"string","optional":true}]}],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Stepper component, you need to import the `StepperComponentModule` in your module:\n\n```typescript\nimport { StepperComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n StepperComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-stepper\n [steps]=\"[\n { label: 'Step 1', iconName: 'Team' },\n { label: 'Step 2', iconName: 'Test' },\n { label: 'Step 3', iconName: 'Delete' }\n ]\"\n position=\"horizontal\"\n [lastStepFinalIcon]=\"true\"\n applicationTheme=\"light\"\n (stepChange)=\"onStepChange($event)\">\n</ui-stepper>\n```\n\nThe stepper component helps users navigate through a multi-step process and shows their progress.","template":"<ng-container>\n <div style=\"position: absolute; left: -99999px\" [attr.aria-live]=\"'polite'\">\n <span>\n {{ itemSteps[selectedIndex]?.label ?? '' }}\n {{\n translationContext + 'SELECTED_OF'\n \| uiTranslate: { selected: (selectedIndex ?? 0) + 1, total: itemSteps?.length ?? 0 }\n \| async\n }}\n {{\n itemSteps[selectedIndex]?.isVisited &&\n itemSteps.length <= (selectedIndex ?? 0) + 1 &&\n itemSteps[selectedIndex + 1]?.isVisited\n ? (translationContext + 'COMPLETED' \| uiTranslate \| async)\n : (translationContext + 'INCOMPLETE' \| uiTranslate \| async)\n }}\n </span>\n </div>\n\n <div\n ngIf=\"(position === 'horizontal' && (isMobile$ \| async) === false) \|\| position === 'vertical'; else mobile\"\n class=\"stepper-wrapper\"\n role=\"tablist\"\n [ngClass]=\"[position, stepperVariant === 'secondary' ? 'secondary-variant' : '']\"\n [attr.theme]=\"applicationTheme\"\n >\n <ng-container ngFor=\"let step of itemSteps; index as i; last as isLast\">\n <div class=\"step\" #stepElement>\n <ui-step\n [label]=\"step.label\"\n [isVisited]=\"step.isVisited!\"\n [icon]=\"step.iconName\"\n [index]=\"i\"\n [selected]=\"i === selectedIndex\"\n [selectedIndex]=\"selectedIndex\"\n [isLast]=\"isLast\"\n [disabled]=\"step.disabled ?? (i > selectedIndex + 1 && !step.isVisited)\"\n [prevStepIsVisited]=\"itemSteps[i - 1]?.isVisited && step.isVisited\"\n [finalIcon]=\"isLast ? lastStepFinalIcon : false\"\n [showIconWhenSelected]=\"!!step.showIconWhenSelected\"\n (stepSelected)=\"onSelect($event, step)\"\n [applicationTheme]=\"applicationTheme\"\n role=\"tab\"\n [attr.aria-controls]=\"'step-panel-' + i\"\n [attr.aria-selected]=\"i === selectedIndex\"\n [attr.aria-label]=\"step.label\"\n [attr.tabindex]=\"(step.disabled ?? (i > selectedIndex + 1 && !step.isVisited)) ? -1 : 0\"\n [htmlDescription]=\"step.htmlDescription ?? []\"\n [boldLabel]=\"!!step.boldLabel\"\n [position]=\"position\"\n [descriptionTpl]=\"step.descriptionTpl\"\n [labelTooltip]=\"step.labelTooltip\"\n [alwaysShowIcon]=\"!!step.alwaysShowIcon\"\n [context]=\"step.context\"\n [stepVariant]=\"stepperVariant\"\n [largeTabletMode]=\"isLargeTablet$ \| async\"\n ></ui-step>\n </div>\n\n @if (!isLast && stepperVariant === 'primary') {\n <div class=\"separator-line\" [ngClass]=\"{ visited: step.isVisited && !!itemSteps[i + 1]?.isVisited }\">\n <div [stepLineElement]=\"stepElement\" [position]=\"position\" class=\"line\"></div>\n </div>\n }\n\n @if (!isLast && stepperVariant === 'secondary') {\n <div class=\"separator-arrow\">\n <ui-icon class=\"separator-icon\" name=\"Arrow-chevron-right-in-line\" size=\"24\" color=\"gray\"></ui-icon>\n </div>\n }\n </ng-container>\n </div>\n\n <ng-template #mobile>\n <div class=\"mobile-stepper-wrapper\">\n <div\n class=\"stepper\"\n tabindex=\"0\"\n #stepper\n role=\"button\"\n [ngClass]=\"{ 'keyboard-focused': keyboardFocused() }\"\n (keydown.enter)=\"showStepsToggle()\"\n (keydown.space)=\"showStepsToggle()\"\n [attr.aria-expanded]=\"isOpen\"\n >\n <div class=\"progress-step\" [tabindex]=\"-1\" [attr.aria-hidden]=\"true\">\n <ui-radial-progress\n [applicationTheme]=\"applicationTheme\"\n [value]=\"selectedIndex + 1\"\n [total]=\"itemSteps.length\"\n ></ui-radial-progress>\n </div>\n\n <div class=\"step-info\">\n <div class=\"current-step\">\n <span>{{ selectedIndex + 1 }}/{{ itemSteps.length }} </span>\n <span>{{ itemSteps[selectedIndex].label }}</span>\n </div>\n\n <div class=\"next-step\">\n <span ngIf=\"itemSteps.length !== selectedIndex + 1; else finalStep\"\n >{{ ('COMMON.NEXT' \| uiTranslate \| async) + ':' }} {{ itemSteps[selectedIndex + 1].label }}</span\n >\n <ng-template #finalStep>\n <span>{{ translationContext + 'FINAL_STEP' \| uiTranslate \| async }}</span>\n </ng-template>\n </div>\n </div>\n\n <div\n class=\"open-steps\"\n tabindex=\"0\"\n role=\"button\"\n (keydown.enter)=\"showStepsToggle()\"\n (click)=\"showStepsToggle()\"\n [ngClass]=\"{ opened: isOpen }\"\n >\n <ui-icon\n data-testid=\"ui-stepper-icon\"\n [applicationTheme]=\"applicationTheme\"\n [size]=\"'24'\"\n [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-in-line'\"\n ></ui-icon>\n </div>\n </div>\n\n <div ngIf=\"isOpen\">\n <div class=\"step-list\">\n <div class=\"step\" ngFor=\"let step of itemSteps; index as i; last as isLast\">\n <ui-step\n [label]=\"step.label\"\n [isVisited]=\"step.isVisited!\"\n [icon]=\"step.iconName\"\n [index]=\"i\"\n [selected]=\"i === selectedIndex\"\n [selectedIndex]=\"selectedIndex\"\n [isLast]=\"isLast\"\n [disabled]=\"step.disabled ?? (i > selectedIndex + 1 && !step.isVisited)\"\n [mobileMode]=\"true\"\n [finalIcon]=\"isLast ? lastStepFinalIcon : false\"\n [showIconWhenSelected]=\"!!step.showIconWhenSelected\"\n (stepSelected)=\"onSelect($event, step)\"\n [applicationTheme]=\"applicationTheme\"\n [attr.aria-label]=\"ariaLabel + '--' + step.label\"\n [stepVariant]=\"stepperVariant\"\n ></ui-step>\n </div>\n </div>\n <div\n class=\"overlay\"\n tabindex=\"0\"\n role=\"button\"\n (keydown.enter)=\"onCloseStepList()\"\n (click)=\"onCloseStepList()\"\n ></div>\n </div>\n </div>\n </ng-template>\n</ng-container>\n","queryGuide":{"roles":["tablist","tab","button"],"ariaAttributes":["aria-live","aria-controls","aria-selected","aria-label","aria-expanded","aria-hidden"],"dataTestIds":["ui-stepper-icon"],"materialComponents":[],"childUIComponents":["ui-step","ui-icon","ui-radial-progress"],"suggestedQueries":["screen.getByRole('tablist')","screen.getByRole('tab')","screen.getByRole('button')","screen.getByLabelText('label text')","screen.getByTestId('ui-stepper-icon')"]},"filePath":"components/stepper/stepper.component.ts","supportsTheme":true,"lastModified":1775654032782.9243},"table":{"name":"TableComponent","selector":"ui-table","category":"table","description":"TableComponent component","importPath":"@testgorilla/tgo-ui/components/table","moduleName":"TableComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"config","type":"TableConfigWithPagination<T>","defaultValue":null,"required":true,"alias":null,"transform":null,"description":"Table configuration","isSignal":false},{"name":"data","type":"TableData","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input property for providing the table data.","isSignal":false},{"name":"loading","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Input property indicating whether the table is in a loading state.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"tableDetailColumns","type":"TableDetailColumn<T, TDetail>","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Data structure to select which columns should be rendered and their capabilities","isSignal":false},{"name":"tableDetails","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"disableBorderRadius","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Disable border radius for table","isSignal":false},{"name":"isCondensed","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Condensed table","isSignal":false},{"name":"stickyHeader","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Sticky header","isSignal":false},{"name":"maxHeight","type":"unknown","defaultValue":"'576px'","required":false,"alias":null,"transform":null,"description":"Max height","isSignal":false}],"outputs":[{"name":"onRowClickEvent","eventType":"any","alias":null,"description":"","isSignal":false},{"name":"onDetailRowClickEvent","eventType":"any","alias":null,"description":"","isSignal":false},{"name":"paginatorChange","eventType":"PageEvent","alias":null,"description":"","isSignal":false},{"name":"sortChange","eventType":"Sort","alias":null,"description":"","isSignal":false}],"module":{"name":"TableComponentModule","imports":["CommonModule","MatTableModule","MatTooltipModule","SkeletonComponent","PaginatorComponentModule","ButtonComponentModule","MatSortModule","IconComponentModule","EllipseTextDirective","DynamicComponentDirective","DataPropertyGetterPipe","MemoizeFuncPipe"],"exports":["TableComponent"],"declarations":["TableComponent","SentenceCasePipe"],"providers":[]},"types":{"typeAliases":[{"name":"TableData","value":"Record<string, any>[]"},{"name":"SortDirection","value":"'asc' \| 'desc' \| ''"},{"name":"DataSource","value":"{\n [key: string]: any;\n}"},{"name":"ScrollSettings","value":"{ scrollEnd: boolean; horizontalScroll: boolean; scrollStart: boolean }"}],"interfaces":[{"name":"TableConfig","properties":[{"name":"columns","type":"TableColumn<T>[]","optional":false},{"name":"pagination","type":"Pagination","optional":true},{"name":"title","type":"string","optional":true},{"name":"width","type":"number","optional":true},{"name":"sort","type":"Sort","optional":true},{"name":"hidePagination","type":"boolean","optional":true},{"name":"noDataRowTpl","type":"TemplateRef<any>","optional":true},{"name":"sortable","type":"boolean","optional":true}]},{"name":"TableConfigWithPagination","properties":[{"name":"pagination","type":"Pagination","optional":true}]},{"name":"TableColumn","properties":[{"name":"title","type":"string","optional":true},{"name":"key","type":"string","optional":false},{"name":"allowMultiline","type":"boolean","optional":true},{"name":"bold","type":"boolean","optional":true},{"name":"showTooltip","type":"boolean","optional":true},{"name":"tooltip","type":"string","optional":true},{"name":"allowSort","type":"boolean","optional":true},{"name":"isSticky","type":"boolean","optional":true},{"name":"headerCellTemplate","type":"TemplateRef<any>","optional":true},{"name":"rowCellTemplate","type":"TemplateRef<any>","optional":true},{"name":"rowCellTemplateClick","type":"() => any","optional":true},{"name":"sortHeader","type":"string","optional":true},{"name":"hidden","type":"boolean","optional":true},{"name":"order","type":"number","optional":true},{"name":"fontSize","type":"'12px' \| '14px'","optional":true},{"name":"field","type":"string","optional":true},{"name":"type","type":"ColumnType","optional":true},{"name":"function","type":"(v: T) => string","optional":true},{"name":"renderer","type":"(v: T) => ComponentRenderer \| string","optional":true},{"name":"styles","type":"ColumnStyles","optional":true},{"name":"sortStart","type":"SortDirection","optional":true},{"name":"uniqueId","type":"string","optional":true}]},{"name":"Pagination","properties":[{"name":"itemsPerPageOptions","type":"number[]","optional":false},{"name":"itemsPerPage","type":"number","optional":false},{"name":"currentPage","type":"number","optional":false},{"name":"totalItems","type":"number","optional":false}]},{"name":"ColumnEllipse","properties":[{"name":"index","type":"number","optional":false},{"name":"showTooltip","type":"boolean","optional":false}]},{"name":"Sort","properties":[{"name":"active","type":"string","optional":false},{"name":"direction","type":"SortDirection","optional":false},{"name":"defaultSortStart","type":"SortDirection","optional":true}]},{"name":"TableDetailColumn","properties":[{"name":"columnDefs","type":"TableColumn<TDetail>[]","optional":false},{"name":"setDetailRowData","type":"(params: DetailRowDataParams<T, TDetail>) => void","optional":false}]},{"name":"DetailRowDataParams","properties":[{"name":"data","type":"T","optional":false}]},{"name":"ComponentRenderer","properties":[{"name":"component","type":"Type<any>","optional":false},{"name":"inputs","type":"any","optional":true},{"name":"outputs","type":"{ [key: string]: any }","optional":true}]},{"name":"ColumnStyles","properties":[{"name":"alignment","type":"ColumnAlignment","optional":true},{"name":"width","type":"string","optional":true},{"name":"'min-width'","type":"string","optional":true},{"name":"padding","type":"string","optional":true}]}],"enums":[{"name":"ColumnType","members":[{"name":"FIELD","value":"'field'"},{"name":"FUNCTION","value":"'function'"},{"name":"RENDERER","value":"'renderer'"}]},{"name":"ColumnAlignment","members":[{"name":"LEFT","value":"'left'"},{"name":"RIGHT","value":"'right'"},{"name":"CENTER","value":"'center'"}]},{"name":"ColumnTypeEnum","members":[{"name":"FIELD","value":"'field'"},{"name":"FUNCTION","value":"'function'"},{"name":"RENDERER","value":"'renderer'"}]},{"name":"ColumnAlignmentEnum","members":[{"name":"LEFT","value":"'left'"},{"name":"RIGHT","value":"'right'"},{"name":"CENTER","value":"'center'"}]}]},"examples":[],"documentation":"","template":"<div\n #tableContainer\n class=\"table-container\"\n [ngClass]=\"{ 'without-title': !tableConfig?.title, 'disable-border-radius': disableBorderRadius }\"\n [attr.theme]=\"applicationTheme\"\n>\n <div ngIf=\"tableConfig?.title\" class=\"table-header\">\n {{ tableConfig.title \| sentencecase }}\n <ng-content select=\"[title-actions]\"></ng-content>\n </div>\n <div\n #table\n ngIf=\"scrollSettings$ \| async as scrollSettings\"\n class=\"table-wrapper\"\n [class.sticky-header]=\"stickyHeader\"\n [style.--table-max-height]=\"maxHeight\"\n >\n <table\n [tabIndex]=\"0\"\n class=\"main-table\"\n [class.condensed]=\"isCondensed\"\n [class.sort-disabled]=\"loading\"\n mat-table\n [dataSource]=\"tableData\"\n matSort\n [matSortStart]=\"tableConfig?.sort?.defaultSortStart ?? 'asc'\"\n [matSortActive]=\"tableConfig?.sort?.active ?? ''\"\n [matSortDirection]=\"tableConfig?.sort?.direction ?? ''\"\n (matSortChange)=\"onSortChange($event)\"\n multiTemplateDataRows\n >\n <ng-container\n ngFor=\"let column of tableConfig.columns; index as i; last as isLast; trackBy: trackColumnUniqueId\"\n >\n <ng-container ngIf=\"isLast && column.isSticky && column.allowSort\">\n <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\" [stickyEnd]=\"!scrollSettings?.scrollEnd\">\n <th\n mat-header-cell\n [start]=\"column.sortStart ?? 'asc'\"\n [mat-sort-header]=\"column.sortHeader ?? column.key\"\n matHeaderCellDef\n [attr.sortable]=\"column.allowSort ?? false\"\n [ngStyle]=\"{ width: column.styles?.width, minWidth: column.styles?.['min-width'] }\"\n [ngClass]=\"column.styles?.alignment ? 'th-' + column.styles?.alignment : ''\"\n [style.font-weight]=\"'bold'\"\n >\n <ng-container ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n ngTemplateOutlet=\"\n column.headerCellTemplate;\n context: { $implicit: column.title, column, colIndex: i }\n \"\n ></ng-container>\n </ng-container>\n <ng-template #configValue>\n <ng-container\n [ngTemplateOutlet]=\"columnHeader\"\n [ngTemplateOutletContext]=\"{ i, column }\"\n ></ng-container>\n </ng-template>\n </th>\n\n <td\n mat-cell\n matCellDef=\"let element; let rowIndex = dataIndex\"\n [align]=\"column.styles?.alignment\"\n [ngClass]=\"[column.styles?.alignment ? 'td-' + column.styles?.alignment : '']\"\n (click)=\"\n onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\n \"\n >\n <ui-skeleton\n class=\"table-skeleton-loader\"\n [count]=\"1\"\n [theme]=\"skeletonStyleConfig\"\n [appearance]=\"'line'\"\n ngIf=\"loading; else value\"\n ></ui-skeleton>\n <ng-template #value>\n <div class=\"row-value\">\n <ng-container\n [ngTemplateOutlet]=\"expandButton\"\n [ngTemplateOutletContext]=\"{ index: i, element }\"\n ></ng-container>\n\n @if (column?.type) {\n <ng-container\n ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn: column }\"\n ></ng-container>\n } @else {\n <ng-container ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"\n ></ng-container>\n </ng-container>\n <ng-template #configData>\n <span\n [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n [style.font-size]=\"column.fontSize ?? '14px'\"\n >{{ element \| dataPropertyGetter: column.key }}</span\n >\n </ng-template>\n }\n </div>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container ngIf=\"isLast && column.isSticky && !column.allowSort\">\n <ng-container\n [matColumnDef]=\"column.uniqueId ?? column.key\"\n [stickyEnd]=\"scrollSettings.horizontalScroll ? !scrollSettings.scrollEnd : true\"\n >\n <th\n mat-header-cell\n matHeaderCellDef\n [attr.sortable]=\"column.allowSort ?? false\"\n [ngStyle]=\"{ width: column.styles?.width, minWidth: column.styles?.['min-width'] }\"\n [ngClass]=\"column.styles?.alignment ? 'th-' + column.styles?.alignment : ''\"\n [style.font-weight]=\"'bold'\"\n >\n <ng-container ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n ngTemplateOutlet=\"\n column.headerCellTemplate;\n context: { $implicit: column.title, column, colIndex: i }\n \"\n ></ng-container>\n </ng-container>\n <ng-template #configValue>\n <ng-container\n [ngTemplateOutlet]=\"columnHeader\"\n [ngTemplateOutletContext]=\"{ i, column }\"\n ></ng-container>\n </ng-template>\n </th>\n\n <td\n mat-cell\n matCellDef=\"let element; let rowIndex = dataIndex\"\n [align]=\"column.styles?.alignment\"\n [ngClass]=\"[column.styles?.alignment ? 'td-' + column.styles?.alignment : '']\"\n (click)=\"\n onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\n \"\n >\n <ui-skeleton\n class=\"table-skeleton-loader\"\n [count]=\"1\"\n [theme]=\"skeletonStyleConfig\"\n [appearance]=\"'line'\"\n ngIf=\"loading; else value\"\n ></ui-skeleton>\n <ng-template #value>\n <div class=\"row-value\">\n <ng-container\n [ngTemplateOutlet]=\"expandButton\"\n [ngTemplateOutletContext]=\"{ index: i, element }\"\n ></ng-container>\n\n @if (column?.type) {\n <ng-container\n ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn: column }\"\n ></ng-container>\n } @else {\n <ng-container ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"\n ></ng-container>\n </ng-container>\n <ng-template #configData>\n <span\n [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n [style.font-size]=\"column.fontSize ?? '14px'\"\n >{{ element \| dataPropertyGetter: column.key }}</span\n >\n </ng-template>\n }\n </div>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container ngIf=\"!(isLast && column.isSticky) && column.allowSort\">\n <ng-container\n [matColumnDef]=\"column.uniqueId ?? column.key\"\n [sticky]=\"(isMobile$ \| async) ? false : !scrollSettings.scrollStart && !!column.isSticky\"\n >\n <th\n mat-header-cell\n [start]=\"column.sortStart ?? 'asc'\"\n [mat-sort-header]=\"column.sortHeader ?? column.key\"\n [attr.sortable]=\"column.allowSort ?? false\"\n matHeaderCellDef\n [style.font-weight]=\"'bold'\"\n [ngStyle]=\"{ width: column.styles?.width, minWidth: column.styles?.['min-width'] }\"\n [ngClass]=\"column.styles?.alignment ? 'th-' + column.styles?.alignment : ''\"\n >\n <ng-container ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n ngTemplateOutlet=\"\n column.headerCellTemplate;\n context: { $implicit: column.title, column, colIndex: i }\n \"\n ></ng-container>\n </ng-container>\n <ng-template #configValue>\n <ng-container\n [ngTemplateOutlet]=\"columnHeader\"\n [ngTemplateOutletContext]=\"{ i, column }\"\n ></ng-container>\n </ng-template>\n </th>\n\n <td\n mat-cell\n matCellDef=\"let element; let rowIndex = dataIndex\"\n [align]=\"column.styles?.alignment\"\n [ngClass]=\"[column.styles?.alignment ? 'td-' + column.styles?.alignment : '']\"\n (click)=\"\n onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\n \"\n >\n <ui-skeleton\n class=\"table-skeleton-loader\"\n [count]=\"1\"\n [theme]=\"skeletonStyleConfig\"\n [appearance]=\"'line'\"\n ngIf=\"loading; else value\"\n ></ui-skeleton>\n <ng-template #value>\n <div class=\"row-value\">\n <ng-container\n [ngTemplateOutlet]=\"expandButton\"\n [ngTemplateOutletContext]=\"{ index: i, element }\"\n ></ng-container>\n\n @if (column?.type) {\n <ng-container\n ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn: column }\"\n ></ng-container>\n } @else {\n <ng-container ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"\n ></ng-container>\n </ng-container>\n <ng-template #configData>\n <span\n [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n [style.font-size]=\"column.fontSize ?? '14px'\"\n >{{ element \| dataPropertyGetter: column.key }}</span\n >\n </ng-template>\n }\n </div>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container ngIf=\"!(isLast && column.isSticky) && !column.allowSort\">\n <ng-container\n [matColumnDef]=\"column.uniqueId ?? column.key\"\n [sticky]=\"(isMobile$ \| async) ? false : !scrollSettings.scrollStart && !!column.isSticky\"\n >\n <th\n mat-header-cell\n [attr.sortable]=\"column.allowSort ?? false\"\n matHeaderCellDef\n [style.font-weight]=\"'bold'\"\n [ngStyle]=\"{ width: column.styles?.width, minWidth: column.styles?.['min-width'] }\"\n [ngClass]=\"column.styles?.alignment ? 'th-' + column.styles?.alignment : ''\"\n >\n <ng-container ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n ngTemplateOutlet=\"\n column.headerCellTemplate;\n context: { $implicit: column.title, column, colIndex: i }\n \"\n ></ng-container>\n </ng-container>\n <ng-template #configValue>\n <ng-container\n [ngTemplateOutlet]=\"columnHeader\"\n [ngTemplateOutletContext]=\"{ i, column }\"\n ></ng-container>\n </ng-template>\n </th>\n\n <td\n mat-cell\n matCellDef=\"let element; let rowIndex = dataIndex\"\n [align]=\"column.styles?.alignment\"\n [ngClass]=\"[column.styles?.alignment ? 'td-' + column.styles?.alignment : '']\"\n (click)=\"\n onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\n \"\n >\n <ui-skeleton\n class=\"table-skeleton-loader\"\n [count]=\"1\"\n [theme]=\"skeletonStyleConfig\"\n [appearance]=\"'line'\"\n ngIf=\"loading; else value\"\n ></ui-skeleton>\n <ng-template #value>\n <div class=\"row-value\">\n <ng-container\n [ngTemplateOutlet]=\"expandButton\"\n [ngTemplateOutletContext]=\"{ index: i, element }\"\n ></ng-container>\n\n @if (column?.type) {\n <ng-container\n ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn: column }\"\n ></ng-container>\n } @else {\n <ng-container ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"\n ></ng-container>\n </ng-container>\n <ng-template #configData>\n <span\n [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n [style.font-size]=\"column.fontSize ?? '14px'\"\n >{{ element \| dataPropertyGetter: column.key }}</span\n >\n </ng-template>\n }\n </div>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container matColumnDef=\"expandedDetail\">\n <td mat-cell matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length\">\n <div\n class=\"element-detail\"\n ngIf=\"dataSourceDetail.data.length\"\n [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\"\n >\n <table\n mat-table\n [dataSource]=\"dataSourceDetail\"\n [ngClass]=\"{ 'hide-borders': element === tableData[tableData.length - 1] }\"\n >\n <ng-container\n ngFor=\"let tableColumn of tableDetailColumns.columnDefs\"\n [matColumnDef]=\"tableColumn.title ?? ''\"\n >\n <th\n mat-header-cell\n matHeaderCellDef=\"let element\"\n arrowPosition=\"after\"\n [ngStyle]=\"{ width: tableColumn.styles?.width }\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-' + tableColumn.styles?.alignment : ''\"\n >\n {{ tableColumn.title \| uppercase }}\n </th>\n\n <td\n mat-cell\n matCellDef=\"let element\"\n (click)=\"onDetailRowClick(element)\"\n [align]=\"tableColumn.styles?.alignment\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'td-' + tableColumn.styles?.alignment : ''\"\n [ngStyle]=\"{ width: tableColumn.styles?.width }\"\n >\n <ng-container ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn }\"></ng-container>\n </td>\n </ng-container>\n\n <tr mat-header-row matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\n <tr mat-row matRowDef=\"let rowDetail; columns: columnsDetailToDisplay\"></tr>\n </table>\n </div>\n </td>\n </ng-container>\n\n <ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n <div class=\"align-wrapper\">\n <ng-container [ngSwitch]=\"tableColumn.type\">\n <ng-container ngSwitchCase=\"DataType.FIELD\">\n {{ element \| dataPropertyGetter: tableColumn.key }}\n </ng-container>\n <ng-container ngSwitchCase=\"DataType.FUNCTION\">\n {{ tableColumn.function?.(element) }}\n </ng-container>\n <ng-container ngSwitchCase=\"DataType.RENDERER\">\n <ng-template [dynamicComponent]=\"[tableColumn.renderer, element] \| memoizeFunc: callRenderer\">\n </ng-template>\n </ng-container>\n <ng-container ngSwitchDefault>\n {{ element \| dataPropertyGetter: tableColumn.key }}\n </ng-container>\n </ng-container>\n </div>\n </ng-template>\n\n <tr\n mat-header-row\n matHeaderRowDef=\"displayedColumns; sticky: stickyHeader\"\n [class.is-title-present]=\"tableConfig.title\"\n ></tr>\n <tr\n mat-row\n matRowDef=\"let row; columns: displayedColumns\"\n [ngClass]=\"{\n 'expanded-row': elementDetail === row,\n 'row-clickable': tableDetails,\n selected: row?.selected,\n 'last-row': row === tableData[tableData.length - 1] && !elementDetail,\n }\"\n (click)=\"toggleRow(row)\"\n ></tr>\n <ng-container ngIf=\"tableDetails && tableDetailColumns?.columnDefs?.length\">\n <tr mat-row matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n </ng-container>\n\n <ng-container ngIf=\"tableConfig.noDataRowTpl\">\n <tr matNoDataRow>\n <ng-container ngTemplateOutlet=\"tableConfig.noDataRowTpl\"></ng-container>\n </tr>\n </ng-container>\n </table>\n </div>\n\n <ui-paginator\n ngIf=\"!tableConfig?.hidePagination && tableConfig?.pagination\"\n [disabled]=\"loading\"\n [applicationTheme]=\"applicationTheme !== 'classic' ? 'light' : 'classic'\"\n [pageSize]=\"tableConfig.pagination?.itemsPerPage ?? 25\"\n [length]=\"tableConfig.pagination?.totalItems ?? 0\"\n [currentPage]=\"tableConfig.pagination?.currentPage ?? 0\"\n [pageSizeOptions]=\"tableConfig.pagination?.itemsPerPageOptions ?? [10, 25, 50]\"\n (paginatorChange)=\"onPaginatorChange($event)\"\n ></ui-paginator>\n</div>\n\n<ng-template #expandButton let-i=\"index\" let-element=\"element\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n ngIf=\"!i && tableDetails\"\n variant=\"icon-button\"\n [ngClass]=\"{ opened: elementDetail && element === elementDetail }\"\n [iconName]=\"elementDetail && element === elementDetail ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"\n ></ui-button>\n</ng-template>\n\n<ng-template #columnHeader let-column=\"column\" let-i=\"i\">\n <div class=\"header-section\">\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\" class=\"column-title\"\n >{{ column.title \| sentencecase }}\n </span>\n <ui-icon\n ngIf=\"column?.showTooltip\"\n [name]=\"'Help-in-line'\"\n [matTooltipClass]=\"applicationTheme\"\n [matTooltip]=\"(column?.showTooltip ? (column?.tooltip ? column.tooltip : column.title) : '') \|\| ''\"\n ></ui-icon>\n </div>\n</ng-template>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-skeleton","ui-paginator","ui-button","ui-icon"],"suggestedQueries":[]},"filePath":"components/table/table.component.ts","supportsTheme":true,"lastModified":1775654032783.9243},"tabs":{"name":"TabsComponent","selector":"ui-tabs","category":"tabs","description":"To use the Tabs component, you need to import the `TabsComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/tabs","moduleName":"TabsComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"companyColor","type":"string \| null","defaultValue":"'#46A997'","required":false,"alias":null,"transform":null,"description":"Color of the Tabs.\nDefaults to Test Gorilla primary color.","isSignal":false},{"name":"type","type":"TabsType","defaultValue":"'underlined'","required":false,"alias":null,"transform":null,"description":"Type the Tabs.\nDefaults underlined.","isSignal":false},{"name":"animationDuration","type":"number","defaultValue":"300","required":false,"alias":null,"transform":null,"description":"Animation duration when switching tabs","isSignal":false},{"name":"headerContentPadding","type":"unknown","defaultValue":"'32px'","required":false,"alias":null,"transform":"(value: number): string => `${value}px`","description":"Sets the padding for content and header","isSignal":false},{"name":"dynamicHeight","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":"booleanAttribute","description":"Sets the dynamic height of the tab","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"tabHeaderSize","type":"TabHeaderSize","defaultValue":"TAB_HEADER_SIZE.BIG","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"isLoading","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true}],"outputs":[{"name":"selectedTabIndex","eventType":"number","alias":null,"description":"","isSignal":false},{"name":"selectedTab","eventType":"Tab","alias":null,"description":"","isSignal":false}],"module":{"name":"TabsComponentModule","imports":["TabDirective","CommonModule","MatTabsModule","IconComponentModule","UiTranslatePipe","SkeletonComponent"],"exports":["TabsComponent","TabDirective"],"declarations":["TabsComponent"],"providers":[]},"types":{"typeAliases":[{"name":"TabsType","value":"'underlined' \| 'filled'"},{"name":"TabHeaderSize","value":"(typeof TAB_HEADER_SIZE)[keyof typeof TAB_HEADER_SIZE]"}],"interfaces":[{"name":"Tab","properties":[{"name":"tabName","type":"string","optional":false},{"name":"tabLabel","type":"string","optional":false},{"name":"contentTemplateRef","type":"any","optional":false},{"name":"iconLeft","type":"IconName","optional":true},{"name":"iconRight","type":"IconName","optional":true},{"name":"disabled","type":"boolean","optional":true},{"name":"canLeave","type":"(ctx?: { currentTab: Tab; nextTab: Tab }) => boolean \| Promise<boolean>","optional":true},{"name":"linkUrl","type":"string","optional":true},{"name":"ariaLabel","type":"string","optional":true},{"name":"order","type":"number","optional":true},{"name":"skeletonTheme","type":"NgxSkeletonLoaderConfigTheme","optional":true},{"name":"isSkeletonAiTheme","type":"boolean","optional":true}]}],"enums":[]},"examples":[{"name":"Default","template":"<ui-tabs type=\"underlined\">\n <ng-template uiTab [tabLabel]=\"'Tab 1'\" [tabName]=\"'1'\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mauris sit amet ligula tristique interdum eu non sapien. Integer nec turpis vel augue volutpat convallis. Nullam bibendum elit ac ex convallis, a ultricies lacus consequat. Fusce sit amet dapibus ipsum. Proin vel nunc nec justo lacinia rhoncus. Nunc euismod vestibulum tellus, vel vestibulum diam convallis quis. Integer in vehicula ipsum. Duis pulvinar quam a elit interdum, at euismod justo condimentum. Vivamus eu semper dolor. Sed sit amet tristique odio. Mauris ut felis vel mi pharetra cursus. Aenean ullamcorper fringilla lectus, vel facilisis ligula blandit eget.\n Curabitur eu nisl ac orci condimentum convallis. Sed auctor mi non ex hendrerit, sit amet varius justo malesuada. Aenean euismod felis a dui facilisis, id hendrerit nulla efficitur. Etiam varius massa\n </ng-template>\n <ng-template uiTab [tabLabel]=\"'Tab 2'\" [tabName]=\"'2'\" >Quisque in justo vel justo commodo fermentum. Morbi eget tincidunt libero. Integer ut velit in felis vehicula ultrices. Nulla facilisi. Praesent vehicula elit id semper accumsan. Phasellus sed tortor sed nulla fermentum cursus in id enim. Ut et aliquam velit. In hac habitasse platea dictumst. Nulla facilisi. Sed sagittis dolor in mi ultricies facilisis. Ut sit amet turpis vel tortor congue posuere. Aenean luctus quam sit amet augue congue, nec fermentum dolor volutpat.</ng-template>\n <ng-template uiTab [tabLabel]=\"'Tab 3'\" [tabName]=\"'3'\" [iconLeft]=\"'Level'\" [iconRight]=\"'Test'\">Curabitur eu nisl ac orci condimentum convallis. Sed auctor mi non ex hendrerit, sit amet varius justo malesuada. Aenean euismod felis a dui facilisis, id hendrerit nulla efficitur. Etiam varius massa a est eleifend, non scelerisque mauris dictum. Proin vel metus a justo efficitur aliquet nec ut tortor. Integer pulvinar imperdiet velit non aliquam. Fusce nec elit vitae orci facilisis tristique eu vitae dolor. Integer tristique ex at dui facilisis aliquam. Maecenas interdum tortor id aliquam facilisis. Suspendisse tristique vestibulum nulla, id aliquet tortor convallis vel. Vivamus ullamcorper, lectus et feugiat posuere, tellus dolor vulputate tortor, vel lacinia leo libero et nunc.</ng-template>\n </ui-tabs>","props":{"type":"'underlined'"}},{"name":"Filled","template":"<ui-tabs type=\"filled\">\n <ng-template uiTab [tabLabel]=\"'Tab 1'\" [tabName]=\"'1'\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mauris sit amet ligula tristique interdum eu non sapien. Integer nec turpis vel augue volutpat convallis. Nullam bibendum elit ac ex convallis, a ultricies lacus consequat. Fusce sit amet dapibus ipsum. Proin vel nunc nec justo lacinia rhoncus. Nunc euismod vestibulum tellus, vel vestibulum diam convallis quis. Integer in vehicula ipsum. Duis pulvinar quam a elit interdum, at euismod justo condimentum. Vivamus eu semper dolor. Sed sit amet tristique odio. Mauris ut felis vel mi pharetra cursus. Aenean ullamcorper fringilla lectus, vel facilisis ligula blandit eget.\n Curabitur eu nisl ac orci condimentum convallis. Sed auctor mi non ex hendrerit, sit amet varius justo malesuada. Aenean euismod felis a dui facilisis, id hendrerit nulla efficitur. Etiam varius massa\n </ng-template>\n <ng-template uiTab [tabLabel]=\"'Tab 2'\" [tabName]=\"'2'\">Quisque in justo vel justo commodo fermentum. Morbi eget tincidunt libero. Integer ut velit in felis vehicula ultrices. Nulla facilisi. Praesent vehicula elit id semper accumsan. Phasellus sed tortor sed nulla fermentum cursus in id enim. Ut et aliquam velit. In hac habitasse platea dictumst. Nulla facilisi. Sed sagittis dolor in mi ultricies facilisis. Ut sit amet turpis vel tortor congue posuere. Aenean luctus quam sit amet augue congue, nec fermentum dolor volutpat.</ng-template>\n <ng-template uiTab [tabLabel]=\"'Tab 3'\" [tabName]=\"'3'\" [iconLeft]=\"'Level'\" [iconRight]=\"'Test'\">Curabitur eu nisl ac orci condimentum convallis. Sed auctor mi non ex hendrerit, sit amet varius justo malesuada. Aenean euismod felis a dui facilisis, id hendrerit nulla efficitur. Etiam varius massa a est eleifend, non scelerisque mauris dictum. Proin vel metus a justo efficitur aliquet nec ut tortor. Integer pulvinar imperdiet velit non aliquam. Fusce nec elit vitae orci facilisis tristique eu vitae dolor. Integer tristique ex at dui facilisis aliquam. Maecenas interdum tortor id aliquam facilisis. Suspendisse tristique vestibulum nulla, id aliquet tortor convallis vel. Vivamus ullamcorper, lectus et feugiat posuere, tellus dolor vulputate tortor, vel lacinia leo libero et nunc.</ng-template>\n </ui-tabs>","props":{"type":"'underlined'"}},{"name":"SmallHeaderSize","template":"<ui-tabs type=\"underlined\" tabHeaderSize=\"small\">\n <ng-template uiTab [tabLabel]=\"'Tab 1'\" [tabName]=\"'1'\">Tab 1 content</ng-template>\n <ng-template uiTab [tabLabel]=\"'Tab 2'\" [tabName]=\"'2'\">Tab 2 content</ng-template>\n <ng-template uiTab [tabLabel]=\"'Tab 3'\" [tabName]=\"'3'\">Tab 3 content</ng-template>\n </ui-tabs>","props":{"type":"'underlined'"}},{"name":"MediumHeaderSize","template":"<ui-tabs type=\"underlined\" tabHeaderSize=\"medium\">\n <ng-template uiTab [tabLabel]=\"'Tab 1'\" [tabName]=\"'1'\">Tab 1 content</ng-template>\n <ng-template uiTab [tabLabel]=\"'Tab 2'\" [tabName]=\"'2'\">Tab 2 content</ng-template>\n <ng-template uiTab [tabLabel]=\"'Tab 3'\" [tabName]=\"'3'\">Tab 3 content</ng-template>\n </ui-tabs>","props":{"type":"'underlined'"}},{"name":"ConditionalTabs","template":"<div style=\"display: flex; flex-direction: column; gap: 20px;\">\n <div style=\"margin-bottom: 20px;\">\n <button\n (click)=\"toggleMiddleTab()\"\n style=\"padding: 8px 16px; background-color: #D410AA; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;\"\n >\n {{ showMiddleTab ? 'Hide' : 'Show' }} Middle Tab\n </button>\n <span style=\"margin-left: 10px; font-size: 14px;\">\n Middle tab is currently: <strong>{{ showMiddleTab ? 'VISIBLE' : 'HIDDEN' }}</strong>\n </span>\n </div>\n\n <div style=\"border: 1px solid #ddd; padding: 10px; background-color: #fafafa; border-radius: 4px; margin-bottom: 20px;\">\n <p><strong>Instructions:</strong></p>\n <p>In this example, we're using the <code>[order]</code> property to explicitly set the position of each tab:</p>\n <ul>\n <li>Tab 1: <code>[order]=\"1\"</code></li>\n <li>Tab 2: <code>[order]=\"2\"</code> (conditional tab with ngIf or if)</li>\n <li>Tab 3: <code>[order]=\"3\"</code></li>\n </ul>\n <p>This ensures tabs always appear in the correct order, regardless of conditional rendering.</p>\n </div>\n\n <ui-tabs type=\"underlined\">\n <ng-template uiTab [tabLabel]=\"'Tab 1'\" [tabName]=\"'tab1'\" [order]=\"1\">\n <div style=\"padding: 20px; border: 1px solid #eee; border-radius: 4px; margin-top: 20px;\">\n <h3>First Tab Content</h3>\n <p>This tab is always visible with order=\"1\".</p>\n </div>\n </ng-template>\n @if (showMiddleTab) {\n <ng-template uiTab [tabLabel]=\"'Tab 2'\" [tabName]=\"'tab2'\" [order]=\"2\">\n <div style=\"padding: 20px; border: 1px solid #eee; border-radius: 4px; margin-top: 20px;\">\n <h3>Middle Tab Content</h3>\n <p>This tab is conditionally visible with order=\"2\".</p>\n <p>Try toggling this tab using the button above and observe that when it's shown again,\n it maintains its position between Tab 1 and Tab 3.</p>\n </div>\n </ng-template>\n }\n\n <ng-template uiTab [tabLabel]=\"'Tab 3'\" [tabName]=\"'tab3'\" [order]=\"3\">\n <div style=\"padding: 20px; border: 1px solid #eee; border-radius: 4px; margin-top: 20px;\">\n <h3>Last Tab Content</h3>\n <p>This tab is always visible with order=\"3\".</p>\n <p>When the middle tab is hidden, this tab should still remain in the last position and NOT move to the middle.</p>\n </div>\n </ng-template>\n </ui-tabs>\n </div>","props":{"type":"'underlined'"}}],"documentation":"## How to use\n\nTo use the Tabs component, you need to import the `TabsComponentModule` in your module:\n\n```typescript\nimport { TabsComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n TabsComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-tabs type=\"underlined\" applicationTheme=\"light\" (tabChange)=\"onTabChange($event)\">\n <ng-template uiTab tabLabel=\"Details\" tabName=\"details\">\n Content for the Details tab\n </ng-template>\n <ng-template uiTab tabLabel=\"History\" tabName=\"history\" iconLeft=\"Clock\">\n Content for the History tab with an icon\n </ng-template>\n <ng-template uiTab tabLabel=\"Settings\" tabName=\"settings\" [disabled]=\"!hasAccess\">\n Content for the Settings tab\n </ng-template>\n</ui-tabs>\n```\n\nThe tabs component supports different styles (underlined or filled), icons, and can disable individual tabs.","template":"<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","queryGuide":{"roles":["tablist","tab-link","tab","tabpanel"],"ariaAttributes":["aria-label","aria-selected","aria-labelledby"],"dataTestIds":[],"materialComponents":["mat-tab-group","mat-tab"],"childUIComponents":["ui-skeleton","ui-icon"],"suggestedQueries":["screen.getByRole('tablist')","screen.getByRole('tab-link')","screen.getByRole('tab')","screen.getByRole('tabpanel')","screen.getByLabelText('label text')"]},"filePath":"components/tabs/tabs.component.ts","supportsTheme":true,"lastModified":1775654032783.9243},"tag":{"name":"TagComponent","selector":"ui-tag","category":"tag","description":"To use the Tag component, you need to import the `TagComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/tag","moduleName":"TagComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"icon","type":"IconName","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Icon","isSignal":false},{"name":"allowClose","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether to allow the tag to be closed.","isSignal":false},{"name":"readOnly","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether the tag is in read-only mode.","isSignal":false},{"name":"isSelected","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether the tag is selected.","isSignal":false},{"name":"showIconWhenSelected","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Display icon when is selected","isSignal":false},{"name":"isDisabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Specifies whether the element is disabled.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"ariaLabel","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"A string representing the ARIA label for accessibility.\nThis label is used to provide an accessible name for the input element.","isSignal":false},{"name":"ariaRequired","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"label","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Tag's label","isSignal":false},{"name":"showBadge","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether to show the badge on the tag.","isSignal":true},{"name":"notificationsAmount","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"The notifications amount to be displayed on the badge.","isSignal":true}],"outputs":[{"name":"close","eventType":"void","alias":null,"description":"Event triggered when the tag should be closed.","isSignal":false},{"name":"press","eventType":"boolean","alias":null,"description":"Event triggered when a press action occurs.","isSignal":false}],"module":{"name":"TagComponentModule","imports":["CommonModule","IconComponentModule","TooltipComponentModule","MatTooltipModule","MatInputModule","UiTranslatePipe","BadgeComponentModule"],"exports":["TagComponent"],"declarations":["TagComponent"],"providers":[]},"types":{"typeAliases":[{"name":"TagColor","value":"'teal' \| 'petrol' \| 'grey' \| 'red' \| 'gold'"}],"interfaces":[],"enums":[]},"examples":[{"name":"Default","template":"<ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" [isSelected]=\"true\" showIconWhenSelected=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" readOnly=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Folder\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Assessment\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Sparkle-in-line\" showBadge=\"true\" notificationsAmount=\"0\" allowClose=\"true\"></ui-tag>","props":{"label":"'Label'"}},{"name":"Suggestion","template":"<ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" [isSelected]=\"true\" showIconWhenSelected=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" readOnly=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Folder\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Assessment\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Sparkle-in-line\" showBadge=\"true\" notificationsAmount=\"0\" allowClose=\"true\"></ui-tag>","props":{"label":"'Label'"}},{"name":"SuggestionWithIcon","template":"<ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" [isSelected]=\"true\" showIconWhenSelected=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" readOnly=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Folder\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Assessment\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Sparkle-in-line\" showBadge=\"true\" notificationsAmount=\"0\" allowClose=\"true\"></ui-tag>","props":{"label":"'Label'","icon":"'Folder'"}},{"name":"Filter","template":"<ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" [isSelected]=\"true\" showIconWhenSelected=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" readOnly=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Folder\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Assessment\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Sparkle-in-line\" showBadge=\"true\" notificationsAmount=\"0\" allowClose=\"true\"></ui-tag>","props":{"label":"'Label'","isSelected":"false","showIconWhenSelected":"true"}},{"name":"Input","template":"<ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" [isSelected]=\"true\" showIconWhenSelected=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" readOnly=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Folder\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Assessment\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Sparkle-in-line\" showBadge=\"true\" notificationsAmount=\"0\" allowClose=\"true\"></ui-tag>","props":{"label":"'Label'","allowClose":"true"}},{"name":"WithNotificationsBadge","template":"<ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" [isSelected]=\"true\" showIconWhenSelected=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" readOnly=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Folder\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Assessment\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Sparkle-in-line\" showBadge=\"true\" notificationsAmount=\"0\" allowClose=\"true\"></ui-tag>","props":{"label":"'Label'","allowClose":"true","showBadge":"true","notificationsAmount":"5"}},{"name":"InputWithIcon","template":"<ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" [isSelected]=\"true\" showIconWhenSelected=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" readOnly=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Folder\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Assessment\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Sparkle-in-line\" showBadge=\"true\" notificationsAmount=\"0\" allowClose=\"true\"></ui-tag>","props":{"label":"'Label'","icon":"'Assessment'","allowClose":"true"}},{"name":"ReadOnly","template":"<ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" [isSelected]=\"true\" showIconWhenSelected=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" readOnly=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Folder\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Assessment\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Sparkle-in-line\" showBadge=\"true\" notificationsAmount=\"0\" allowClose=\"true\"></ui-tag>","props":{"label":"'Label'","readOnly":"true"}},{"name":"TruncatedLabel","template":"<ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" [isSelected]=\"true\" showIconWhenSelected=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" readOnly=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Folder\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Assessment\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Sparkle-in-line\" showBadge=\"true\" notificationsAmount=\"0\" allowClose=\"true\"></ui-tag>","props":{}},{"name":"Disabled","template":"<ui-tag applicationTheme=\"${_theme}\" isDisabled=\"true\" label=\"Suggestion\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" isDisabled=\"true\" label=\"Filter(Selected)\" [isSelected]=\"true\" showIconWhenSelected=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" isDisabled=\"true\" label=\"Input Without Icon\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" isDisabled=\"true\" label=\"Read-only\" readOnly=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" isDisabled=\"true\" label=\"Suggestion With Icon\" icon=\"Folder\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" isDisabled=\"true\" label=\"Input With Icon\" icon=\"Assessment\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" isDisabled=\"true\" label=\"With Notifications Badge\" showBadge=\"true\" notificationsAmount=\"5\"></ui-tag>","props":{}}],"documentation":"## How to use\n\nTo use the Tag component, you need to import the `TagComponentModule` in your module:\n\n```typescript\nimport { TagComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n TagComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-tag \n label=\"Category\"\n [icon]=\"'Folder'\"\n [isSelected]=\"false\"\n [allowClose]=\"true\"\n applicationTheme=\"light\"\n (closeClicked)=\"onTagClose()\"\n (tagClicked)=\"onTagClick()\">\n</ui-tag>\n```\n\nThe tag component can be used for filtering, selections, or input chips.","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","queryGuide":{"roles":[],"ariaAttributes":["aria-label","aria-required"],"dataTestIds":["tag--container"],"materialComponents":[],"childUIComponents":["ui-icon","ui-badge"],"suggestedQueries":["screen.getByLabelText('label text')","screen.getByTestId('tag--container')"]},"filePath":"components/tag/tag.component.ts","supportsTheme":true,"lastModified":1775654032784.9243},"toggle":{"name":"ToggleComponent","selector":"ui-toggle","category":"toggle","description":"To use the Toggle component, you need to import the `ToggleComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/toggle","moduleName":"ToggleComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"selected","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"The `selected` property determines the current state of the toggle switch.","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"The `disabled` property determines whether the toggle switch is disabled.","isSignal":false},{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Toggle label","isSignal":false},{"name":"message","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Message","isSignal":false},{"name":"maxWidth","type":"number \| undefined","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Max width of the toggle container","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"ariaLabel","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"A string representing the ARIA label for accessibility.\nThis label is used to provide an accessible name for the input element.","isSignal":false},{"name":"ariaRequired","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"preventClick","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"disable/enable click on toggle","isSignal":false},{"name":"loading","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"The loading state","isSignal":false},{"name":"ariaDescribedby","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false}],"outputs":[{"name":"toggle","eventType":"boolean","alias":null,"description":"The `toggle` event is triggered when the state of the toggle switch changes. It returns the new state.","isSignal":false}],"module":{"name":"ToggleComponentModule","imports":["CommonModule","MatTooltipModule","EllipseTextDirective","MatInputModule","UiTranslatePipe","IconComponentModule","SpinnerComponentModule"],"exports":["ToggleComponent"],"declarations":["ToggleComponent"],"providers":[]},"types":{"typeAliases":[{"name":"RegisterFn","value":"(value: any) => void"}],"interfaces":[],"enums":[]},"examples":[{"name":"Default","template":"<span>Switch Value: {{form.controls.switch.value \| json}}</span>\n <form [formGroup]=\"form\">\n <ui-toggle formControlName=\"switch\" applicationTheme=\"${_theme}\"></ui-toggle>\n </form>","props":{"selected":"true"}},{"name":"Selected","template":"<span>Switch Value: {{form.controls.switch.value \| json}}</span>\n <form [formGroup]=\"form\">\n <ui-toggle formControlName=\"switch\" applicationTheme=\"${_theme}\"></ui-toggle>\n </form>","props":{"selected":"true"}},{"name":"DisabledDefault","template":"<span>Switch Value: {{form.controls.switch.value \| json}}</span>\n <form [formGroup]=\"form\">\n <ui-toggle formControlName=\"switch\" applicationTheme=\"${_theme}\"></ui-toggle>\n </form>","props":{"disabled":"true"}},{"name":"DisabledSelected","template":"<span>Switch Value: {{form.controls.switch.value \| json}}</span>\n <form [formGroup]=\"form\">\n <ui-toggle formControlName=\"switch\" applicationTheme=\"${_theme}\"></ui-toggle>\n </form>","props":{"disabled":"true","selected":"true"}},{"name":"WithReactiveForm","template":"<span>Switch Value: {{form.controls.switch.value \| json}}</span>\n <form [formGroup]=\"form\">\n <ui-toggle formControlName=\"switch\" applicationTheme=\"${_theme}\"></ui-toggle>\n </form>","props":{"label":"'Label'"}}],"documentation":"## How to use\n\nTo use the Toggle component, you need to import the `ToggleComponentModule` in your module:\n\n```typescript\nimport { ToggleComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n ToggleComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-toggle\n [selected]=\"isToggleSelected\"\n [label]=\"'Toggle Switch'\"\n (selectedChange)=\"handleToggleChange($event)\"\n applicationTheme=\"light\">\n</ui-toggle>\n```","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","queryGuide":{"roles":["switch"],"ariaAttributes":["aria-label","aria-required","aria-labelledby","aria-describedby","aria-checked"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon","ui-spinner"],"suggestedQueries":["screen.getByRole('switch')","screen.getByLabelText('label text')"]},"filePath":"components/toggle/toggle.component.ts","supportsTheme":true,"lastModified":1775654032784.9243},"tooltip":{"name":"TooltipComponent","selector":"ui-tooltip","category":"tooltip","description":"To use the Tooltip component, you need to import the `TooltipComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/tooltip","moduleName":"TooltipComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"position","type":"TooltipPositionType","defaultValue":"TooltipPositionType.TOP","required":false,"alias":null,"transform":null,"description":"Allows the user to define the position of the tooltip relative to the parent element.","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":"booleanAttribute","description":"Disables the display of the tooltip.","isSignal":false},{"name":"message","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"The message to be displayed in the tooltip.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"labelForDefinition","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"The label for definition variant","isSignal":false},{"name":"definitionTooltipSize","type":"TooltipDefinitionSize","defaultValue":"'medium'","required":false,"alias":null,"transform":null,"description":"Defines size for definition variant","isSignal":false},{"name":"variant","type":"TooltipVariant","defaultValue":"'basic'","required":false,"alias":null,"transform":null,"description":"Variant render tooltip","isSignal":false}],"outputs":[],"module":{"name":"TooltipComponentModule","imports":["MatTooltipModule","CommonModule","TooltipTemplateDirective","EllipseTextDirective","UiTranslatePipe"],"exports":["TooltipComponent","TooltipTemplateDirective"],"declarations":["TooltipComponent"],"providers":["{ provide: 'TooltipComponentToken', useValue: TooltipComponent }"]},"types":{"typeAliases":[{"name":"TooltipVariant","value":"'basic' \| 'definition'"},{"name":"TooltipDefinitionSize","value":"'small' \| 'medium' \| 'large'"}],"interfaces":[],"enums":[{"name":"TooltipPositionType","members":[{"name":"TOP","value":"'top'"},{"name":"BOTTOM","value":"'bottom'"},{"name":"LEFT","value":"'left'"},{"name":"RIGHT","value":"'right'"}]}]},"examples":[{"name":"Default","template":"<div class=\"example-container\">\n <ui-tooltip [position]=\"position\" [message]=\"message\" applicationTheme=\"${_theme}\">\n <ui-button\n data-testid=\"tooltip\"\n type=\"secondary\"\n [justIcon]=\"true\"\n iconName=\"Help\"\n label=\"secondary\"\n matTooltipClass=\"${_theme}\"\n applicationTheme=\"${_theme}\"\n ></ui-button>\n </ui-tooltip>\n </div>","props":{"message":"'Tooltip message for default tooltip'","position":"TooltipPositionType.TOP"}},{"name":"WithBottom","template":"<div class=\"example-container\">\n <ui-tooltip [position]=\"position\" [message]=\"message\" applicationTheme=\"${_theme}\">\n <ui-button\n data-testid=\"tooltip\"\n type=\"secondary\"\n [justIcon]=\"true\"\n iconName=\"Help\"\n label=\"secondary\"\n size=\"small\"\n matTooltipClass=\"${_theme}\"\n applicationTheme=\"${_theme}\"\n ></ui-button>\n </ui-tooltip>\n </div>","props":{"message":"'Message for bottom tooltip'","position":"TooltipPositionType.TOP"}},{"name":"WithRight","template":"<div class=\"example-container\">\n <ui-tooltip [position]=\"position\" [message]=\"message\" applicationTheme=\"${_theme}\">\n <ui-button\n data-testid=\"tooltip\"\n type=\"secondary\"\n [justIcon]=\"true\"\n iconName=\"Help\"\n label=\"secondary\"\n size=\"small\"\n matTooltipClass=\"${_theme}\"\n applicationTheme=\"${_theme}\"\n ></ui-button>\n </ui-tooltip>\n </div>","props":{"message":"'Message for bottom tooltip'","position":"TooltipPositionType.RIGHT"}},{"name":"WithLeft","template":"<div class=\"example-container\">\n <ui-tooltip [position]=\"position\" [message]=\"message\" applicationTheme=\"${_theme}\">\n <ui-button\n data-testid=\"tooltip\"\n type=\"secondary\"\n [justIcon]=\"true\"\n iconName=\"Help\"\n label=\"secondary\"\n size=\"small\"\n matTooltipClass=\"${_theme}\"\n applicationTheme=\"${_theme}\"\n ></ui-button>\n </ui-tooltip>\n </div>","props":{"message":"'Message for bottom tooltip'","position":"TooltipPositionType.LEFT"}},{"name":"WithDirective","template":"<div class=\"example-container left\">\n <ui-button\n data-testid=\"tooltip\"\n type=\"primary\"\n iconName=\"Help\"\n iconPosition=\"left\"\n label=\"More Help\"\n [matTooltip]=\"message\"\n matTooltipPosition=\"below\"\n matTooltipClass=\"${_theme}\"\n applicationTheme=\"${_theme}\"\n ></ui-button>\n </div>\n <div class=\"example-container\">\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie est ipsum, nec <a [style.color]=\"'${linkColor}'\" matTooltipClass=\"${_theme}\" href=\"#\" matTooltipPosition=\"above\" matTooltip=\"Tooltip for link\">lobortis neque lacinia</a> ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In efficitur urna quis ultricies mattis. Cras quis euismod urna. Duis facilisis ac mauris in gravida.</p>\n </div>","props":{"message":"'Message for bottom tooltip'","position":"TooltipPositionType.LEFT"}},{"name":"WithLongTextLeft","template":"<div class=\"example-container\">\n <ui-tooltip [position]=\"position\" [message]=\"message\" applicationTheme=\"${_theme}\">\n <ui-button\n data-testid=\"tooltip\"\n type=\"secondary\"\n [justIcon]=\"true\"\n iconName=\"Help\"\n label=\"secondary\"\n size=\"small\"\n matTooltipClass=\"${_theme}\"\n applicationTheme=\"${_theme}\"\n ></ui-button>\n </ui-tooltip>\n </div>","props":{"message":"'Message for bottom tooltip'","position":"TooltipPositionType.LEFT"}},{"name":"Templ","template":"<div class=\"example-container\">\n <ui-button\n data-testid=\"tooltip\"\n type=\"secondary\"\n [justIcon]=\"true\"\n iconName=\"Help\"\n label=\"secondary\"\n size=\"small\"\n [uiTooltipTemplate]=\"template\"\n [tooltipPosition]=\"'right'\"\n applicationTheme=\"${_theme}\">\n </ui-button>\n\n <ng-template #template>\n <div style=\"display: flex; flex-direction: column;\">\n <ui-button [label]=\"'Test'\"></ui-button>\n </div>\n </ng-template>\n </div>","props":{"definitionTooltipSize":"'medium'","message":"'Tooltip message'","position":"TooltipPositionType.LEFT","variant":"'definition'","labelForDefinition":"\"Long label that should go to the tooltip message when it's get truncated. Just shrink the screen to see it in action\""}},{"name":"Definition","template":"<div><ui-tooltip data-testid=\"tooltip\" [variant]=\"variant\" [labelForDefinition]=\"labelForDefinition\" [message]=\"message\" [definitionTooltipSize]=\"definitionTooltipSize\"></ui-tooltip></div>","props":{"definitionTooltipSize":"'medium'","message":"'Tooltip message'","position":"TooltipPositionType.LEFT","variant":"'definition'","labelForDefinition":"\"Long label that should go to the tooltip message when it's get truncated. Just shrink the screen to see it in action\""}}],"documentation":"## How to use\n\nTo use the Tooltip component, you need to import the `TooltipComponentModule` in your module:\n\n```typescript\nimport { TooltipComponentModule } from '@testgorilla/tgo-ui/components/tooltip';\n\n@NgModule({\n imports: [\n // ... other imports\n TooltipComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-tooltip\n position=\"top\"\n message=\"This is a tooltip message\"\n applicationTheme=\"light\">\n <button>Hover me</button>\n</ui-tooltip>\n```\n\nYou can also use the directive form:\n\n```html\n<button \n matTooltip=\"This is a tooltip message\" \n matTooltipPosition=\"above\"\n matTooltipClass=\"light\">\n Hover me\n</button>\n```\n\nFor more complex content, you can use a template:\n\n```html\n<button [uiTooltipTemplate]=\"myTemplate\" [tooltipPosition]=\"'right'\">\n Hover for complex tooltip\n</button>\n\n<ng-template #myTemplate>\n <div>Custom tooltip content</div>\n <button>With interactive elements</button>\n</ng-template>\n```\n\nThe tooltip component supports different positions and can contain any HTML content.","template":"@if (variant === 'definition') {\n <div\n [tabindex]=\"0\"\n class=\"definition-tooltip\"\n [attr.aria-label]=\"labelForDefinition + ', ' + ('TOOLTIP.DETAILS' \| uiTranslate \| async) + ':' + message\"\n style=\"position: relative\"\n [tooltipPosition]=\"position\"\n [uiTooltipTemplate]=\"dif\"\n >\n <span\n class=\"label-definition-outside\"\n [ngClass]=\"'tooltip-size-' + definitionTooltipSize\"\n uiEllipseText\n (onChangeTextState)=\"isLabelEllipse = $event\"\n >\n {{ labelForDefinition }}\n </span>\n </div>\n\n <ng-template #dif>\n <div [attr.aria-label]=\"labelForDefinition + ' ' + message\"></div>\n <div class=\"label-definition-inner\" ngIf=\"isLabelEllipse\">\n {{ labelForDefinition }}\n </div>\n <div class=\"text-definition\">\n {{ message }}\n </div>\n </ng-template>\n} @else {\n <div\n [matTooltip]=\"message\"\n [matTooltipDisabled]=\"disabled\"\n [matTooltipPosition]=\"matPosition\"\n [matTooltipClass]=\"applicationTheme\"\n [attr.aria-label]=\"message\"\n tabindex=\"0\"\n style=\"position: relative\"\n >\n <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">{{ message }}</div>\n <ng-content></ng-content>\n @if (templateRef) {\n <div [class]=\"'template-tooltip'\">\n <ng-container ngTemplateOutlet=\"templateRef\"></ng-container>\n </div>\n }\n </div>\n}\n","queryGuide":{"roles":[],"ariaAttributes":["aria-label","aria-live"],"dataTestIds":[],"materialComponents":[],"childUIComponents":[],"suggestedQueries":["screen.getByLabelText('label text')"]},"filePath":"components/tooltip/tooltip.component.ts","supportsTheme":true,"lastModified":1775654032785.9243},"universal-skills":{"name":"UniversalSkillsReportComponent","selector":"ui-universal-skills-report","category":"universal-skills","description":"UniversalSkillsReportComponent component","importPath":"@testgorilla/tgo-ui/components/universal-skills","moduleName":"UniversalSkillsReportComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"skillAreaDataList","type":"SkillAreaData[]","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"The list of items to be used","isSignal":false}],"outputs":[],"module":{"name":"","imports":[],"exports":[],"declarations":[],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"","template":"<div ngFor=\"let skillAreaGroup of skillAreaGroupMap \| keyvalue\" class=\"universal-skills-report\">\n <section class=\"title-and-info\">\n <h4>{{ skillAreaGroup.value.title \| uiTranslate \| async }}</h4>\n <span>{{ skillAreaGroup.value.description \| uiTranslate \| async }}</span>\n </section>\n\n <section class=\"accordion-items\">\n <ui-accordion\n ngFor=\"let skillAreaData of skillAreaGroup?.value?.skillAreaList\"\n class=\"universal-skills-accordion\"\n label=\"-\"\n [allowCustomHeader]=\"true\"\n >\n <div customHeader class=\"custom-header\">\n <h4 class=\"custom-header-subtitle\">\n {{ translationContext + 'SKILL_AREA_TYPES.' + skillAreaData.skillAreaName + '.TITLE' \| uiTranslate \| async }}\n </h4>\n\n <div class=\"inner-container\">\n <ui-badge\n class=\"percentile-scoring-badge\"\n [label]=\"\n (skillAreaData.percentileScoring \| memoizeFunc: getScoreBadgeLabel : this \| uiTranslate \| async) \|\|\n 'neutral'\n \"\n [rebrandColor]=\"skillAreaData.percentileScoring \| memoizeFunc: getScoreBadgeColor : this\"\n [applicationTheme]=\"'light'\"\n ></ui-badge>\n\n <h5 class=\"percentile-quantity\">\n {{ skillAreaData?.percentileScoring }}\n <sup class=\"percentile-suffix\">{{\n skillAreaData.percentileScoring \| ordinalSuffix \| uiTranslate \| async\n }}</sup>\n {{ translationContext + 'PERCENTILE' \| uiTranslate \| async }}\n </h5>\n\n <ui-progress-bar\n class=\"percentile-scoring-bar\"\n mode=\"determinate\"\n [progress]=\"skillAreaData.percentileScoring\"\n ></ui-progress-bar>\n </div>\n </div>\n\n <div class=\"content-container\">\n <p class=\"skill-description\">\n {{\n translationContext + 'SKILL_AREA_TYPES.' + skillAreaData.skillAreaName + '.DESCRIPTION'\n \| uiTranslate\n \| async\n }}\n </p>\n\n <h5>\n {{ skillAreaData.percentileScoring \| memoizeFunc: getScoreBadgeLabel : this \| uiTranslate \| async }} score\n </h5>\n\n <div class=\"inner-container\">\n <p>\n {{\n translationContext +\n 'SKILL_AREA_TYPES.' +\n skillAreaData.skillAreaName +\n '.' +\n ([skillAreaData.percentileScoring, true] \| memoizeFunc: checkScoreClassification : this) +\n '.GENERAL'\n \| uiTranslate\n \| async\n }}\n </p>\n </div>\n\n <div class=\"inner-container\">\n <p>\n {{\n translationContext +\n 'SKILL_AREA_TYPES.' +\n skillAreaData.skillAreaName +\n '.' +\n ([skillAreaData.percentileScoring, true] \| memoizeFunc: checkScoreClassification : this) +\n '.WORK_ENVIRONMENT'\n \| uiTranslate\n \| async\n }}\n </p>\n </div>\n\n <div class=\"inner-container\">\n <p>\n {{\n translationContext +\n 'SKILL_AREA_TYPES.' +\n skillAreaData.skillAreaName +\n '.' +\n ([skillAreaData.percentileScoring, true] \| memoizeFunc: checkScoreClassification : this) +\n '.RECOMMENDATIONS'\n \| uiTranslate\n \| async\n }}\n </p>\n </div>\n </div>\n </ui-accordion>\n </section>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-accordion","ui-badge","ui-progress-bar"],"suggestedQueries":[]},"filePath":"components/universal-skills/universal-skills.component.ts","supportsTheme":true,"lastModified":1775654032786.9243},"spider-charts":{"name":"UniversalSkillsSpiderChartsComponent","selector":"ui-universal-skills-spider-charts","category":"spider-charts","description":"UniversalSkillsSpiderChartsComponent component","importPath":"@testgorilla/tgo-ui/components/spider-charts","moduleName":"UniversalSkillsSpiderChartsComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"skillAreaDataList","type":"SkillAreaData[]","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"The list of items to be used","isSignal":false},{"name":"loading","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Defines if the component is loading","isSignal":false},{"name":"size","type":"'small' \| 'large'","defaultValue":"'large'","required":false,"alias":null,"transform":null,"description":"Defines the size of the spider chart","isSignal":false}],"outputs":[],"module":{"name":"","imports":[],"exports":[],"declarations":[],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"","template":"@for (spiderChartData of skillAreaSpiderChartData; track spiderChartData) {\n <ui-accordion\n class=\"universal-skills-spider-charts\"\n [label]=\"(spiderChartData.title \| uiTranslate \| async) \|\| ''\"\n variant=\"filter\"\n >\n <ui-spider-chart\n [spiderChartData]=\"spiderChartData.spiderChartData\"\n [loading]=\"loading\"\n [size]=\"size\"\n ></ui-spider-chart>\n </ui-accordion>\n @if ($index < skillAreaSpiderChartData.length - 1) {\n <ui-divider class=\"universal-skills-spider-charts-divider\" size=\"small\"></ui-divider>\n }\n}\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-accordion","ui-spider-chart","ui-divider"],"suggestedQueries":[]},"filePath":"components/spider-charts/spider-charts.component.ts","supportsTheme":true,"lastModified":1775654032785.9243},"validation-error":{"name":"ValidationErrorComponent","selector":"ui-validation-error","category":"validation-error","description":"ValidationErrorComponent component","importPath":"@testgorilla/tgo-ui/components/validation-error","moduleName":"ValidationErrorModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"ngControl","type":"NgControl","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"touchedOn","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"errorMessage","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"label","type":"string \| undefined \| null","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false}],"outputs":[],"module":{"name":"ValidationErrorModule","imports":["CommonModule","IconComponentModule","UiTranslatePipe"],"exports":["ValidationErrorComponent"],"declarations":["ValidationErrorComponent"],"providers":[]},"types":{"typeAliases":[{"name":"errorType","value":"'maxlength' \| 'minlength' \| 'min' \| 'max'"}],"interfaces":[],"enums":[]},"examples":[],"documentation":"","template":"<div class=\"errors\" ngIf=\"ngControl?.hasError('maxlength')\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{\n translationContextErrors + 'MAX_LENGTH' \| uiTranslate: { maxlength: getErrorValue('maxlength') } \| async\n }}</span>\n</div>\n\n<div class=\"errors\" ngIf=\"ngControl?.hasError('minlength')\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{\n translationContextErrors + 'MIN_LENGTH' \| uiTranslate: { maxlength: getErrorValue('minlength') } \| async\n }}</span>\n</div>\n\n<div class=\"errors\" ngIf=\"ngControl?.hasError('min')\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{ translationContextErrors + 'MIN' \| uiTranslate: { min: getErrorValue('min') } \| async }}</span>\n</div>\n\n<div class=\"errors\" ngIf=\"ngControl?.hasError('max')\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{ translationContextErrors + 'MAX' \| uiTranslate: { max: getErrorValue('max') } \| async }}</span>\n</div>\n\n<div class=\"errors\" ngIf=\"ngControl?.hasError('required') && (touchedOn ? ngControl?.touched : true)\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{ translationContextErrors + (label ? 'REQUIRED_FIELD' : 'REQUIRED') \| uiTranslate: { label } \| async }}</span>\n</div>\n\n<div class=\"errors\" ngIf=\"ngControl?.hasError('email')\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{ translationContextErrors + 'EMAIL_INCORRECT' \| uiTranslate \| async }}</span>\n</div>\n\n<div class=\"custom-errors\" *ngIf=\"errorMessage\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{ errorMessage }}</span>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon"],"suggestedQueries":[]},"filePath":"components/validation-error/validation-error.component.ts","supportsTheme":true,"lastModified":1775654032786.9243},"write-with-ai":{"name":"WriteWithAiComponent","selector":"ui-write-with-ai","category":"components","description":"WriteWithAiComponent component","importPath":"@testgorilla/tgo-ui/components/write-with-ai","moduleName":"WriteWithAiComponentModule","standalone":true,"changeDetection":"OnPush","inputs":[{"name":"value","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"standalone","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"defaultOpen","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"fieldLabel","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"header","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"placeholder","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"promptValue","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"tags","type":"WriteWithAiTagOption[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"status","type":"WriteWithAiStatus","defaultValue":"'idle'","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"subheader","type":"string \| undefined","defaultValue":"undefined","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"llmConfig","type":"WriteWithAiLlmConfig \| undefined","defaultValue":"undefined","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"fullHeight","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Layout: make the inner field stretch to fill its container height.","isSignal":true},{"name":"borderless","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Layout: render the inner field without a visible border.","isSignal":true},{"name":"metadata","type":"Record<string, unknown>","defaultValue":"{}","required":false,"alias":null,"transform":null,"description":"Opaque host metadata emitted with promptSubmit for backend integrations.","isSignal":true}],"outputs":[{"name":"valueChange","eventType":"string","alias":null,"description":"","isSignal":true},{"name":"promptChange","eventType":"string","alias":null,"description":"","isSignal":true},{"name":"promptSubmit","eventType":"WriteWithAiSubmitEvent","alias":null,"description":"","isSignal":true},{"name":"cancelPending","eventType":"void","alias":null,"description":"","isSignal":true},{"name":"acceptResult","eventType":"void","alias":null,"description":"","isSignal":true},{"name":"requestRefine","eventType":"void","alias":null,"description":"","isSignal":true}],"module":{"name":"WriteWithAiComponentModule","imports":["WriteWithAiComponent"],"exports":["WriteWithAiComponent"],"declarations":[],"providers":[]},"types":{"typeAliases":[{"name":"WriteWithAiStatus","value":"'idle' \| 'loading' \| 'success' \| 'error'"}],"interfaces":[{"name":"WriteWithAiTagOption","properties":[{"name":"id","type":"number","optional":false},{"name":"label","type":"string","optional":false},{"name":"description","type":"string","optional":true}]},{"name":"WriteWithAiLlmConfig","properties":[{"name":"default","type":"boolean","optional":true},{"name":"context","type":"string","optional":true},{"name":"apiKey","type":"string","optional":true},{"name":"model","type":"string","optional":true},{"name":"provider","type":"'openai' \| 'openai-compatible' \| 'gemini'","optional":true},{"name":"endpoint","type":"string","optional":true},{"name":"baseUrl","type":"string","optional":true}]},{"name":"WriteWithAiSubmitEvent","properties":[{"name":"prompt","type":"string","optional":false},{"name":"content","type":"string","optional":false},{"name":"metadata","type":"Record<string, unknown>","optional":false}]}],"enums":[]},"examples":[],"documentation":"","template":"<div\n class=\"write-with-ai\"\n [class.write-with-ai--standalone]=\"standalone()\"\n [class.write-with-ai--full-height]=\"fullHeight()\"\n>\n @if (!standalone()) {\n <div class=\"write-with-ai__host\">\n <ui-field\n [label]=\"fieldLabel() \|\| (translationContext + 'FIELD_LABEL' \| uiTranslate \| async)!\"\n type=\"textarea\"\n [showBottomContent]=\"false\"\n [fullHeight]=\"fullHeight()\"\n [borderless]=\"borderless()\"\n [disabled]=\"cvaDisabled()\"\n [ngModel]=\"effectiveValue()\"\n (ngModelChange)=\"handleValueInput($event)\"\n ></ui-field>\n <ui-button\n class=\"write-with-ai__cta\"\n variant=\"ghost-ai\"\n size=\"small\"\n [label]=\"(translationContext + 'AI_ASSIST' \| uiTranslate \| async)!\"\n iconName=\"Sparkle-in-line\"\n iconPosition=\"left\"\n [disabled]=\"isPanelVisible() \|\| cvaDisabled()\"\n (buttonClickEvent)=\"togglePanel()\"\n ></ui-button>\n </div>\n }\n\n @if (isPanelVisible()) {\n <section\n class=\"write-with-ai__panel\"\n [class.write-with-ai__panel--loading]=\"effectiveStatus() === 'loading'\"\n role=\"region\"\n [attr.aria-label]=\"(translationContext + 'AI_WRITING_ASSISTANT' \| uiTranslate \| async)!\"\n >\n <header class=\"write-with-ai__panel-header\">\n <div class=\"write-with-ai__panel-heading\">\n <div class=\"write-with-ai__title-row\">\n @if (effectiveStatus() !== 'loading') {\n <ui-icon class=\"write-with-ai__title-icon\" name=\"Sparkle-in-line\" color=\"ai\"></ui-icon>\n }\n <h4 class=\"write-with-ai__title\">\n {{ header() \|\| (translationContext + 'HEADER' \| uiTranslate \| async) }}\n </h4>\n </div>\n @if (subheader()) {\n <p class=\"write-with-ai__subheader\">{{ subheader() }}</p>\n }\n </div>\n @if (!standalone()) {\n <ui-button\n variant=\"icon-button\"\n iconName=\"Close\"\n size=\"small\"\n [tooltip]=\"(translationContext + 'CLOSE' \| uiTranslate \| async)!\"\n [ariaLabel]=\"(translationContext + 'CLOSE_AI_ASSISTANT' \| uiTranslate \| async)!\"\n (buttonClickEvent)=\"togglePanel()\"\n ></ui-button>\n }\n </header>\n\n @if (effectiveStatus() === 'idle') {\n <div class=\"write-with-ai__prompt\">\n <ui-prompt\n [ngModel]=\"promptModelData()\"\n (ngModelChange)=\"handlePromptModelChange($event)\"\n [tags]=\"promptTags()\"\n [placeholder]=\"placeholder() \|\| (translationContext + 'PLACEHOLDER' \| uiTranslate \| async)!\"\n [showSendButton]=\"true\"\n (promptData)=\"handlePromptSubmit($event)\"\n ></ui-prompt>\n </div>\n }\n\n @if (statusConfig(); as cfg) {\n <ui-alert-banner\n [alertType]=\"cfg.alertType\"\n alertVariant=\"callout\"\n [message]=\"(cfg.messageKey \| uiTranslate \| async)!\"\n [includeDismissButton]=\"false\"\n [isLoading]=\"cfg.variant === 'loading'\"\n [hasIcon]=\"cfg.variant !== 'loading'\"\n [actions]=\"cfg.actions\"\n [isFullWidth]=\"true\"\n ></ui-alert-banner>\n }\n\n <div class=\"write-with-ai__caveat\">\n <ui-ai-caveat></ui-ai-caveat>\n </div>\n </section>\n }\n</div>\n","queryGuide":{"roles":["region"],"ariaAttributes":["aria-label"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-field","ui-button","ui-icon","ui-prompt","ui-alert-banner","ui-ai-caveat"],"suggestedQueries":["screen.getByRole('region')","screen.getByLabelText('label text')"]},"filePath":"components/write-with-ai/write-with-ai.component.ts","supportsTheme":false,"lastModified":1775654032787.9243}}}
1	+ {"version":"7.2.5","generatedAt":"2026-04-09T14:06:46.698Z","components":{"accordion":{"name":"AccordionComponent","selector":"ui-accordion","category":"accordion","description":"To use the Accordion component, you need to import the `AccordionComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/accordion","moduleName":"AccordionComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"label","type":"string","defaultValue":null,"required":true,"alias":null,"transform":null,"description":"The label displayed for the accordion.","isSignal":false},{"name":"open","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":"booleanAttribute","description":"Determines whether the accordion is initially open.","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":"booleanAttribute","description":"Disables the accordion if set to true.","isSignal":false},{"name":"showPremiumIcon","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":"booleanAttribute","description":"Indicates whether to show a premium icon.","isSignal":false},{"name":"premiumTooltipText","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"The tooltip text for the premium icon.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme where accordion is used","isSignal":false},{"name":"labelIcon","type":"IconName","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Changed premium icon on this icon","isSignal":false},{"name":"variant","type":"AccordionVariant","defaultValue":"'standard'","required":false,"alias":null,"transform":null,"description":"Select accordion variant. Don`t work on Classic theme","isSignal":false},{"name":"allowCustomHeader","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Projects content with attribute 'customHeader'","isSignal":false},{"name":"noBackgroundColor","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Sets background color of content to none","isSignal":false},{"name":"toggleIconPosition","type":"ToggleIconPosition","defaultValue":"'right'","required":false,"alias":null,"transform":null,"description":"Defines the toggle icon position","isSignal":false}],"outputs":[{"name":"closed","eventType":"void","alias":null,"description":"","isSignal":false},{"name":"opened","eventType":"void","alias":null,"description":"","isSignal":false}],"module":{"name":"AccordionComponentModule","imports":["CommonModule","IconComponentModule","ButtonComponentModule","MatTooltipModule","MatExpansionModule"],"exports":["AccordionComponent"],"declarations":["AccordionComponent"],"providers":[]},"types":{"typeAliases":[{"name":"AccordionVariant","value":"'standard' \| 'filter' \| 'table'"},{"name":"ToggleIconPosition","value":"'left' \| 'right'"}],"interfaces":[],"enums":[]},"examples":[{"name":"Default","template":"<ui-accordion ${argsToTemplate(args)} applicationTheme=\"${_theme}\">\n <div actions>\n <ui-icon applicationTheme=\"${_theme}\" name=\"${_theme === 'classic' ? 'Premium' : 'Premium-circle'}\">\n </ui-icon>\n </div>\n <div style=\"padding: 20px\">\n ${accordionText}\n </div>\n </ui-accordion>","props":{"label":"'Label'"}},{"name":"LeftToggleIcon","template":"<ui-accordion ${argsToTemplate(args)} applicationTheme=\"${_theme}\">\n <div actions>\n <ui-icon applicationTheme=\"${_theme}\" name=\"${_theme === 'classic' ? 'Premium' : 'Premium-circle'}\">\n </ui-icon>\n </div>\n <div style=\"padding: 20px\">\n ${accordionText}\n </div>\n </ui-accordion>","props":{"label":"'Label'","toggleIconPosition":"'left'"}},{"name":"NoBackgroundColor","template":"<ui-accordion ${argsToTemplate(args)} applicationTheme=\"${_theme}\">\n <div actions>\n <ui-icon applicationTheme=\"${_theme}\" name=\"${_theme === 'classic' ? 'Premium' : 'Premium-circle'}\">\n </ui-icon>\n </div>\n <div style=\"padding: 20px\">\n ${accordionText}\n </div>\n </ui-accordion>","props":{"noBackgroundColor":"true"}},{"name":"Disabled","template":"<ui-accordion ${argsToTemplate(args)} applicationTheme=\"${_theme}\">\n <div actions>\n <ui-icon applicationTheme=\"${_theme}\" name=\"${_theme === 'classic' ? 'Premium' : 'Premium-circle'}\">\n </ui-icon>\n </div>\n <div style=\"padding: 20px\">\n ${accordionText}\n </div>\n </ui-accordion>","props":{"disabled":"true","open":"true","label":"'Label'"}},{"name":"WithCustomActions","template":"<ui-accordion ${argsToTemplate(args)} applicationTheme=\"${_theme}\">\n <div actions>\n <ui-icon applicationTheme=\"${_theme}\" name=\"${_theme === 'classic' ? 'Premium' : 'Premium-circle'}\">\n </ui-icon>\n </div>\n <div style=\"padding: 20px\">\n ${accordionText}\n </div>\n </ui-accordion>","props":{"label":"'Label'"}},{"name":"WithCustomHeader","template":"<ui-accordion ${argsToTemplate(args)} applicationTheme=\"${_theme}\">\n <div customHeader style=\"padding: 8px; display: flex\">\n <ui-button applicationTheme=\"${_theme}\" variant=\"primary\" label=\"Primary\" style=\"padding-right: 8px\"></ui-button>\n <ui-button applicationTheme=\"${_theme}\" variant=\"ghost\" label=\"Ghost\"></ui-button>\n </div>\n <div style=\"padding: 20px\">\n ${accordionText}\n </div>\n </ui-accordion>","props":{"label":"'Label'","allowCustomHeader":"true"}},{"name":"Premium","template":"<ui-accordion ${argsToTemplate(args)} applicationTheme=\"${_theme}\">\n </ui-accordion>","props":{"label":"'Label'","showPremiumIcon":"true","premiumTooltipText":"'Buy Premium'"}},{"name":"RebrandFilter","template":"<ui-accordion ${argsToTemplate(args)} applicationTheme=\"dark\">\n <div [style]=\"'display: flex; gap: 10px; flex-direction: column'\">\n <ui-radio-button applicationTheme=\"${_theme}\" [label]=\"'Option'\"></ui-radio-button>\n <ui-radio-button applicationTheme=\"${_theme}\" [label]=\"'Option 1'\"></ui-radio-button>\n <ui-radio-button applicationTheme=\"${_theme}\" [label]=\"'Option 2'\"></ui-radio-button>\n <ui-radio-button applicationTheme=\"${_theme}\" [label]=\"'Option 3'\"></ui-radio-button>\n </div>\n </ui-accordion>","props":{"label":"'Label'","variant":"'filter'","labelIcon":"'Info'","premiumTooltipText":"'Label Icon'"}},{"name":"RebrandTable","template":"<ui-accordion ${argsToTemplate(args)} applicationTheme=\"dark\">\n <div actions style=\"display: flex; width: 300px;justify-content: space-between; align-items: center\">\n <div>Column info</div>\n <ui-icon size=\"24\" applicationTheme=\"${_theme}\" name=\"Delete\"></ui-icon>\n </div>\n <div [style]=\"'display: flex; flex-direction: column'\">\n <div style=\"border-top: 1px solid #D3D3D3; width: 100%; height: 64px; display: flex; align-items: center;\">\n <div style=\"display: flex;gap: 8px; align-items: center; margin-left: 60px\">\n <ui-icon size=\"24\" applicationTheme=\"${_theme}\" name=\"Document\"></ui-icon>\n <div>Iternal Label</div>\n </div>\n </div>\n <div style=\"border-top: 1px solid #D3D3D3; width: 100%; height: 64px; display: flex; align-items: center;\">\n <div style=\"display: flex;gap: 8px; align-items: center; margin-left: 60px\">\n <ui-icon size=\"24\" applicationTheme=\"${_theme}\" name=\"Document\"></ui-icon>\n <div>Iternal Label</div>\n </div>\n </div>\n </div>\n </ui-accordion>","props":{"label":"'Label'","variant":"'table'","labelIcon":"'Info'","premiumTooltipText":"'Label Icon'"}}],"documentation":"## How to use\n\nTo use the Accordion component, you need to import the `AccordionComponentModule` in your module:\n\n```typescript\nimport { AccordionComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n AccordionComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-accordion label=\"My Accordion\" applicationTheme=\"light\">\n <div>Content goes here</div>\n</ui-accordion>\n```","template":"<mat-accordion\n class=\"accordion-wrapper\"\n [class.disabled]=\"disabled\"\n [ngClass]=\"variant\"\n [attr.theme]=\"applicationTheme\"\n>\n <mat-expansion-panel\n [expanded]=\"open\"\n [class.bgcolor-none]=\"noBackgroundColor\"\n (opened)=\"toggle(true)\"\n (closed)=\"toggle(false)\"\n >\n <mat-expansion-panel-header\n [tabIndex]=\"disabled ? -1 : 0\"\n [class.custom-height]=\"allowCustomHeader\"\n [class.left-toggle]=\"toggleIconPosition === 'left'\"\n [attr.aria-label]=\"label\"\n >\n <mat-panel-title ngIf=\"!allowCustomHeader; else customHeader\">\n <div ngIf=\"variant === 'table' && applicationTheme !== 'classic'; else default\" class=\"table-container\">\n <ui-icon [size]=\"'24'\" [ngClass]=\"{ open }\" [name]=\"'Arrow-chevron-down-filled'\"></ui-icon>\n <div class=\"accordion-label\">\n {{ label }}\n </div>\n </div>\n <ng-template #default>\n <div class=\"accordion-label\">\n {{ label }}\n <ng-content select=\"[subHeader]\"></ng-content>\n <ui-icon\n [matTooltipClass]=\"applicationTheme\"\n [matTooltip]=\"premiumTooltipText\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"labelIcon ? labelIcon : applicationTheme === 'classic' ? 'Premium' : 'Premium-circle-in-line'\"\n ngIf=\"showPremiumIcon \|\| labelIcon\"\n ></ui-icon>\n </div>\n </ng-template>\n </mat-panel-title>\n <ng-template #customHeader>\n <ng-content select=\"[customHeader]\"></ng-content>\n </ng-template>\n <mat-panel-description>\n <div class=\"accordion-actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n </mat-panel-description>\n </mat-expansion-panel-header>\n <ng-content></ng-content>\n </mat-expansion-panel>\n</mat-accordion>\n","queryGuide":{"roles":["group","region"],"ariaAttributes":["aria-label"],"dataTestIds":[],"materialComponents":["mat-accordion","mat-expansion-panel","mat-expansion-panel-header","mat-panel-title","mat-panel-description"],"childUIComponents":["ui-icon"],"suggestedQueries":["screen.getByRole('group')","screen.getByRole('region')","screen.getByLabelText('label text')"]},"filePath":"components/accordion/accordion.component.ts","supportsTheme":true,"lastModified":1775743558128.8364},"ai-audio-circle":{"name":"AiAudioCircleComponent","selector":"ui-ai-audio-circle","category":"ai-audio-circle","description":"A voice-reactive animation visualizer component that displays animated pulse and ring effects based on audio input.","importPath":"@testgorilla/tgo-ui/components/ai-audio-circle","moduleName":"AiAudioCircleModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"audioTrack","type":"MediaStreamTrack","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"candidateAudioTrack","type":"MediaStreamTrack","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"canvasSize","type":"number","defaultValue":"350","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"animated","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"state","type":"InterviewState","defaultValue":"InterviewState.AiListening","required":false,"alias":null,"transform":null,"description":"","isSignal":true}],"outputs":[{"name":"stateChange","eventType":"InterviewState","alias":null,"description":"Two-way binding change event for state","isSignal":true}],"module":{"name":"AiAudioCircleModule","imports":["CommonModule"],"exports":["AiAudioCircleComponent"],"declarations":["AiAudioCircleComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"A voice-reactive animation visualizer component that displays animated pulse and ring effects based on audio input.\n\n## Features\n\n- Voice-Reactive Animations: Real-time visual feedback based on audio input levels\n- Multiple States: Supports different interview states (AI listening, AI speaking, candidate speaking)\n- Canvas-Based Rendering: High-performance animations using HTML5 Canvas\n- Dual Audio Track Support: Can process both AI and candidate audio tracks simultaneously\n- Customizable Colors: Pre-configured color schemes for pulse and ring animations\n\n## Usage\n\n### Basic Usage\n\n```typescript\nimport { AiAudioCircleModule } from '@testgorilla/tgo-ui/components/ai-audio-circle';\n\n@Component({\n selector: 'app-interview',\n template: `\n <ui-ai-audio-circle\n [audioTrack]=\"aiAudioTrack\"\n [candidateAudioTrack]=\"candidateAudioTrack\"\n [state]=\"currentState\">\n </ui-ai-audio-circle>\n `,\n imports: [AiAudioCircleModule],\n})\nexport class InterviewComponent {\n aiAudioTrack?: MediaStreamTrack;\n candidateAudioTrack?: MediaStreamTrack;\n currentState: InterviewState = 'ai-listening';\n}\n```\n\n### With Audio Tracks\n\nTo connect real audio tracks, obtain MediaStreamTrack objects from getUserMedia or other audio sources:\n\n```typescript\nasync setupAudioTracks() {\n const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n this.candidateAudioTrack = stream.getAudioTracks()[0];\n}\n```\n\n## Properties\n\n\| Property \| Type \| Default \| Description \|\n\|----------\|------\|---------\|-------------\|\n\| `audioTrack` \| `MediaStreamTrack` \| `undefined` \| AI audio track for visualization \|\n\| `candidateAudioTrack` \| `MediaStreamTrack` \| `undefined` \| Candidate audio track for visualization \|\n\| `state` \| `InterviewState` \| `undefined` \| Current interview state ('candidate-speaking' \\\| 'ai-listening' \\\| 'ai-speaking') \|\n\n## Signals\n\n\| Signal \| Type \| Description \|\n\|--------\|------\|-------------\|\n\| `isSpeaking` \| `boolean` \| Indicates if audio is currently being detected \|\n\| `scaleValue` \| `number` \| Current scale value for animations (1.0 = default) \|\n\| `currentState` \| `InterviewState` \| Current state of the component \|\n\n## Animation Details\n\n- Pulse Canvas: Inner animated blob that reacts to audio amplitude\n\nColor schemes are predefined for consistent branding:\n- Pulse: Blue (#277CFD), Light Blue (#99C1FE), Magenta (#D410AA)\n\n## Performance\n\nThe component uses requestAnimationFrame for smooth 60fps animations and efficiently manages canvas rendering contexts. Audio analysis is performed using the Web Audio API's AnalyserNode for minimal CPU overhead.\n","template":"<div class=\"ai-audio-visualizer\">\n <div class=\"canvas-container\">\n <canvas #pulseCanvas></canvas>\n </div>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":[],"suggestedQueries":[]},"filePath":"components/ai-audio-circle/ai-audio-circle.component.ts","supportsTheme":false,"lastModified":1775743558129.8364},"ai-caveat":{"name":"AiCaveatComponent","selector":"ui-ai-caveat","category":"ai-caveat","description":"The AI Caveat component is a standardized, reusable UI element designed to be displayed beneath all AI-generated content. It promotes responsible AI usage by informing users that content should be verified for accuracy, thereby reducing risk and managing user expectations regarding AI reliability.","importPath":"@testgorilla/tgo-ui/components/ai-caveat","moduleName":"AiCaveatComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false}],"outputs":[],"module":{"name":"AiCaveatComponentModule","imports":["CommonModule","IconComponentModule","UiTranslatePipe"],"exports":["AiCaveatComponent"],"declarations":["AiCaveatComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[{"name":"Default","template":"<div class=\"content-container\">\n <div class=\"ai-content\">\n <h4>AI-Generated Summary</h4>\n <p>\n This candidate demonstrates strong problem-solving skills and technical expertise.\n They have 5 years of experience in software development and show excellent\n communication abilities. Recommended for the senior developer position.\n </p>\n </div>\n <ui-ai-caveat applicationTheme=\"${_theme}\"></ui-ai-caveat>\n </div>","props":{}},{"name":"WithContent","template":"<div class=\"content-container\">\n <div class=\"ai-content\">\n <h4>AI-Generated Summary</h4>\n <p>\n This candidate demonstrates strong problem-solving skills and technical expertise.\n They have 5 years of experience in software development and show excellent\n communication abilities. Recommended for the senior developer position.\n </p>\n </div>\n <ui-ai-caveat applicationTheme=\"${_theme}\"></ui-ai-caveat>\n </div>","props":{}}],"documentation":"## Overview\n\nThe AI Caveat component is a standardized, reusable UI element designed to be displayed beneath all AI-generated content. It promotes responsible AI usage by informing users that content should be verified for accuracy, thereby reducing risk and managing user expectations regarding AI reliability.\n\n## Purpose\n\n- Transparency: Clearly indicates that content is AI-generated\n- Accuracy Disclaimer: Reminds users to review content for accuracy\n- Risk Management: Reduces legal and reputational risk\n- User Expectations: Sets appropriate expectations about AI reliability\n\n## Usage Guidelines\n\n### When to Use\n\n- Display beneath all AI-generated content blocks\n- Include in reports, summaries, or recommendations generated by AI\n- Place in candidate assessments, scoring explanations, or automated feedback\n\n### When Not to Use\n\n- Do not use for human-generated content\n- Do not use for hybrid content without clear AI attribution\n- Avoid using in contexts where AI generation is not relevant\n\n","template":"<div class=\"ai-caveat-container\" role=\"status\" aria-live=\"polite\">\n <ui-icon [name]=\"'Info-in-line'\" [size]=\"'16'\" color=\"gray\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n <span class=\"ai-caveat-text\">{{ disclaimerKey \| uiTranslate \| async }}</span>\n</div>\n","queryGuide":{"roles":["status"],"ariaAttributes":["aria-live"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon"],"suggestedQueries":["screen.getByRole('status')"]},"filePath":"components/ai-caveat/ai-caveat.component.ts","supportsTheme":true,"lastModified":1775743558129.8364},"ai-feedback":{"name":"AiFeedbackComponent","selector":"ui-ai-feedback","category":"ai-feedback","description":"To use the AI Feedback component, you need to import the `AiFeedbackModule` in your module:","importPath":"@testgorilla/tgo-ui/components/ai-feedback","moduleName":"AiFeedbackModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"positiveConfig","type":"AiFeedbackConfig","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"negativeConfig","type":"AiFeedbackConfig","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"skipPanelForPositive","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"variant","type":"AiFeedbackVariant","defaultValue":"'default'","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"isRatingDisabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"enableAutoEmit","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"isPositiveFeedback","type":"boolean \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"","isSignal":true}],"outputs":[{"name":"selectionChange","eventType":"boolean \| null","alias":null,"description":"","isSignal":true},{"name":"feedbackSubmitted","eventType":"AiFeedbackData","alias":null,"description":"","isSignal":true},{"name":"feedbackCancelled","eventType":"AiFeedbackData","alias":null,"description":"","isSignal":true},{"name":"feedbackChanged","eventType":"AiFeedbackData","alias":null,"description":"","isSignal":true},{"name":"isPositiveFeedbackChange","eventType":"boolean \| null","alias":null,"description":"Two-way binding change event for isPositiveFeedback","isSignal":true}],"module":{"name":"AiFeedbackModule","imports":["CommonModule","AsyncPipe","ReactiveFormsModule","ButtonComponentModule","CardComponentModule","TagComponentModule","FieldComponentModule","AiCaveatComponentModule","IconComponentModule","UiTranslatePipe","MemoizeFuncPipe"],"exports":["AiFeedbackComponent"],"declarations":["AiFeedbackComponent"],"providers":[]},"types":{"typeAliases":[{"name":"AiFeedbackVariant","value":"'default' \| 'panel' \| 'input-only'"}],"interfaces":[{"name":"AiFeedbackOption","properties":[{"name":"id","type":"string","optional":false},{"name":"label","type":"string","optional":false}]},{"name":"AiFeedbackConfig","properties":[{"name":"title","type":"string","optional":false},{"name":"options","type":"AiFeedbackOption[]","optional":true},{"name":"otherPlaceholder","type":"string","optional":true}]},{"name":"AiFeedbackData","properties":[{"name":"isPositiveFeedback","type":"boolean \| null","optional":false},{"name":"selectedOptions","type":"string[]","optional":true},{"name":"otherText","type":"string","optional":true}]}],"enums":[{"name":"AiFeedbackPanelType","members":[{"name":"POSITIVE","value":"'positive'"},{"name":"NEGATIVE","value":"'negative'"}]}]},"examples":[],"documentation":"## How to use\n\nTo use the AI Feedback component, you need to import the `AiFeedbackModule` in your module:\n\n```typescript\nimport { AiFeedbackModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n AiFeedbackModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-ai-feedback></ui-ai-feedback>\n```\n","template":"<div class=\"ai-feedback-wrapper\">\n <div class=\"ai-feedback\" [attr.aria-label]=\"translationContext + 'TITLE' \| uiTranslate\" role=\"group\">\n <ui-ai-caveat [applicationTheme]=\"applicationTheme()\"></ui-ai-caveat>\n\n <div class=\"ai-feedback-buttons-section\">\n @if (isRatingDisabled()) {\n <div class=\"ai-feedback-saved\">\n <span class=\"ai-feedback-saved-text\">{{ translationContext + 'RATING_SAVED' \| uiTranslate \| async }}</span>\n <ui-icon\n [name]=\"isPositiveFeedback() ? 'Thumb-up-filled' : 'Thumb-down-filled'\"\n [filled]=\"true\"\n [applicationTheme]=\"applicationTheme()\"\n [color]=\"'gray'\"\n />\n </div>\n } @else {\n <span class=\"ai-feedback-label\">{{ translationContext + 'TITLE' \| uiTranslate \| async }}</span>\n\n <div\n class=\"ai-feedback-buttons\"\n role=\"group\"\n [attr.aria-expanded]=\"showPanel()\"\n [attr.aria-controls]=\"showPanel() ? 'feedback-panel' : null\"\n >\n <ui-button\n class=\"ai-feedback-button-positive\"\n data-testid=\"ai-feedback-button-positive\"\n [justIcon]=\"true\"\n [iconName]=\"'Thumb-up-in-line'\"\n [size]=\"'small'\"\n [tooltip]=\"('COMMON.YES' \| uiTranslate \| async)!\"\n [ariaLabel]=\"('COMMON.YES' \| uiTranslate \| async)!\"\n [iconFilled]=\"isPositiveFeedback() === true\"\n (buttonClickEvent)=\"onSelectionChange(true)\"\n variant=\"icon-button\"\n role=\"button\"\n >\n </ui-button>\n\n <ui-button\n data-testid=\"ai-feedback-button-negative\"\n [justIcon]=\"true\"\n [iconName]=\"'Thumb-down-in-line'\"\n [size]=\"'small'\"\n [tooltip]=\"('COMMON.NO' \| uiTranslate \| async)!\"\n [ariaLabel]=\"('COMMON.NO' \| uiTranslate \| async)!\"\n [iconFilled]=\"isPositiveFeedback() === false\"\n (buttonClickEvent)=\"onSelectionChange(false)\"\n variant=\"icon-button\"\n role=\"button\"\n >\n </ui-button>\n </div>\n }\n </div>\n </div>\n\n @if (showPanel()) {\n @let panelTitle =\n activeConfig()?.title ??\n (panelType() \| memoizeFunc: getDefaultPanelTitleTranslation : this \| uiTranslate \| async);\n\n <ui-card\n id=\"feedback-panel\"\n class=\"feedback-panel\"\n [class.arrow-left]=\"arrowPosition() === 'left'\"\n [class.arrow-right]=\"arrowPosition() === 'right'\"\n [applicationTheme]=\"applicationTheme()\"\n [size]=\"isMobile() ? 'small' : 'medium'\"\n role=\"region\"\n [attr.aria-label]=\"panelTitle\"\n [@slideDown]\n >\n <div class=\"feedback-panel-arrow\"></div>\n\n <div class=\"feedback-panel-content\">\n <div class=\"feedback-panel-title-container\">\n <h4 class=\"feedback-panel-title\">\n {{ panelTitle }}\n </h4>\n\n <ui-button\n [justIcon]=\"true\"\n [iconName]=\"'Close-filled'\"\n [size]=\"'small'\"\n [ariaLabel]=\"'Close feedback panel'\"\n variant=\"icon-button\"\n (buttonClickEvent)=\"closePanel()\"\n >\n </ui-button>\n </div>\n\n @if (variant() === 'panel' && activeConfig()?.options && activeConfig()!.options!.length > 0) {\n <div class=\"feedback-options\">\n @for (option of activeConfig()?.options; track option.id) {\n <ui-tag\n [label]=\"option.label\"\n [isSelected]=\"isOptionSelected(option.id)\"\n [showIconWhenSelected]=\"true\"\n [applicationTheme]=\"applicationTheme()\"\n (press)=\"toggleOption(option.id)\"\n >\n </ui-tag>\n }\n </div>\n }\n\n @if (showOtherField()) {\n <ui-field\n class=\"feedback-field\"\n type=\"text\"\n [label]=\"\n activeConfig()?.otherPlaceholder ?? (translationContext + 'OTHER_PLACEHOLDER' \| uiTranslate \| async) ?? ''\n \"\n [formControl]=\"otherTextControl\"\n [applicationTheme]=\"applicationTheme()\"\n [fullWidth]=\"true\"\n [showBottomContent]=\"false\"\n >\n </ui-field>\n }\n\n <div class=\"feedback-submit-container\">\n <ui-button\n [label]=\"(translationContext + 'SUBMIT' \| uiTranslate \| async) \|\| ''\"\n [disabled]=\"isSubmitDisabled()\"\n [size]=\"'small'\"\n [fullWidth]=\"isMobile()\"\n (buttonClickEvent)=\"onSubmit()\"\n variant=\"primary\"\n >\n </ui-button>\n </div>\n </div>\n </ui-card>\n }\n</div>\n","queryGuide":{"roles":["group","button","region"],"ariaAttributes":["aria-label","aria-expanded","aria-controls"],"dataTestIds":["ai-feedback-button-positive","ai-feedback-button-negative"],"materialComponents":[],"childUIComponents":["ui-ai-caveat","ui-icon","ui-button","ui-card","ui-tag","ui-field"],"suggestedQueries":["screen.getByRole('group')","screen.getByRole('button')","screen.getByRole('region')","screen.getByLabelText('label text')","screen.getByTestId('ai-feedback-button-positive')","screen.getByTestId('ai-feedback-button-negative')"]},"filePath":"components/ai-feedback/ai-feedback.component.ts","supportsTheme":true,"lastModified":1775743558130.8364},"alert-banner":{"name":"AlertBannerComponent","selector":"ui-alert-banner","category":"bars","description":"To use the Alert Banner component, you need to import the `AlertBannerComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/alert-banner","moduleName":"AlertBannerComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"alertType","type":"AlertBarType","defaultValue":"'success'","required":false,"alias":null,"transform":null,"description":"Alert Banner type","isSignal":false},{"name":"alertVariant","type":"AlertVariant","defaultValue":"'banner'","required":false,"alias":null,"transform":null,"description":"Alert Banner variant","isSignal":false},{"name":"message","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Alert banner message","isSignal":false},{"name":"includeDismissButton","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Include dismmiss button","isSignal":false},{"name":"shadow","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Include shadow or not","isSignal":false},{"name":"linkText","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Link text that will appended at the end of message","isSignal":false},{"name":"linkUrl","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Link url","isSignal":false},{"name":"linkTarget","type":"LinkTargetType","defaultValue":"'_blank'","required":false,"alias":null,"transform":null,"description":"Link target","isSignal":false},{"name":"actions","type":"AlertBannerAction[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"Optional action buttons displayed on the right side of the banner.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"isFullWidth","type":"boolean \| undefined","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Sets the full width","isSignal":false},{"name":"closeButtonTooltip","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Close button tooltip","isSignal":false},{"name":"hasIcon","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Shows icon","isSignal":false},{"name":"isLoading","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Controls loading state for spinner visibility.","isSignal":false},{"name":"fixed","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Sets the alert banner position","isSignal":false},{"name":"ariaDescribedby","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"secondaryAlerts","type":"string[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"","isSignal":false}],"outputs":[],"module":{"name":"AlertBannerComponentModule","imports":["CommonModule","ButtonComponentModule","IconComponentModule","SpinnerComponentModule","UiTranslatePipe"],"exports":["AlertBannerComponent"],"declarations":["AlertBannerComponent"],"providers":[]},"types":{"typeAliases":[{"name":"LinkTargetType","value":"'' \| '_self' \| '_blank' \| '_parent' \| '_top'"}],"interfaces":[{"name":"AlertBannerAction","properties":[{"name":"label","type":"string","optional":false},{"name":"onClick","type":"($event: Event) => void","optional":false},{"name":"disabled","type":"boolean","optional":true}]}],"enums":[]},"examples":[{"name":"Default","template":"<ui-alert-banner applicationTheme=\"${_theme}\" alertType=\"info\" message=\"This is a info alert type\"></ui-alert-banner>\n <ui-alert-banner applicationTheme=\"${_theme}\" alertType=\"success\" message=\"This is a success alert type\"></ui-alert-banner>\n <ui-alert-banner applicationTheme=\"${_theme}\" alertType=\"warning\" message=\"This is a warning alert type\"></ui-alert-banner>\n <ui-alert-banner applicationTheme=\"${_theme}\" alertType=\"error\" message=\"This is a error alert type\"></ui-alert-banner>","props":{"message":"'This is a alert banner info type'","alertType":"'info'"}},{"name":"Types","template":"<ui-alert-banner applicationTheme=\"${_theme}\" alertType=\"info\" message=\"This is a info alert type\"></ui-alert-banner>\n <ui-alert-banner applicationTheme=\"${_theme}\" alertType=\"success\" message=\"This is a success alert type\"></ui-alert-banner>\n <ui-alert-banner applicationTheme=\"${_theme}\" alertType=\"warning\" message=\"This is a warning alert type\"></ui-alert-banner>\n <ui-alert-banner applicationTheme=\"${_theme}\" alertType=\"error\" message=\"This is a error alert type\"></ui-alert-banner>","props":{"message":"'This is a callout variation'","alertVariant":"'callout'"}}],"documentation":"## How to use\n\nTo use the Alert Banner component, you need to import the `AlertBannerComponentModule` in your module:\n\n```typescript\nimport { AlertBannerComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n AlertBannerComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-alert-banner \n alertType=\"info\" \n message=\"This is an alert message\" \n applicationTheme=\"light\">\n</ui-alert-banner>\n```","template":"<div\n [ngClass]=\"cssClass\"\n [@openClose]\n ngIf=\"visible\"\n role=\"alert\"\n class=\"alert-container\"\n [attr.theme]=\"applicationTheme\"\n [class.shadow]=\"alertVariant === 'callout' && shadow\"\n [attr.aria-live]=\"alertType === 'error' \|\| alertType === 'warning' ? 'assertive' : 'polite'\"\n [attr.aria-describedby]=\"'describedby'\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [tabIndex]=\"0\"\n>\n <span style=\"position: absolute; left: -9999px\" id=\"labelledby\">{{\n 'ALERT_BANNER.' + (alertType \| uppercase) \| uiTranslate \| async\n }}</span>\n <span [style.display]=\"'none'\" id=\"describedby\">{{ ariaDescribedby }}</span>\n <div class=\"primary-alert-container\">\n <div class=\"alert-text\">\n @if (hasIcon) {\n <ui-icon class=\"left-icon\" [name]=\"iconName\" size=\"24\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n }\n @if (isLoading) {\n <ui-spinner\n class=\"loading-spinner\"\n size=\"small\"\n [isLoader]=\"false\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-spinner>\n }\n <span [innerHTML]=\"message\"></span>\n <a ngIf=\"!!linkText\" [target]=\"linkTarget\" [href]=\"linkUrl\">{{ linkText }}</a>\n </div>\n @if (actions.length > 0) {\n <div class=\"actions-container\">\n @for (action of actions; track $index) {\n <ui-button\n class=\"action-button\"\n [variant]=\"'text-inline'\"\n [label]=\"action.label\"\n size=\"medium\"\n [disabled]=\"!!action.disabled\"\n [applicationTheme]=\"applicationTheme\"\n (buttonClickEvent)=\"action.onClick($event)\"\n ></ui-button>\n }\n </div>\n }\n <ui-button\n ngIf=\"includeDismissButton && applicationTheme === 'classic'\"\n variant=\"text\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n (buttonClickEvent)=\"dismissClick()\"\n ></ui-button>\n <ui-button\n ngIf=\"includeDismissButton && applicationTheme !== 'classic' && alertVariant !== 'callout'\"\n class=\"right-icon\"\n [variant]=\"'icon-button'\"\n [applicationTheme]=\"applicationTheme\"\n [iconName]=\"'Close'\"\n [size]=\"'small'\"\n [justIcon]=\"true\"\n [tooltip]=\"(closeButtonTooltip \|\| ('COMMON.CLOSE' \| uiTranslate \| async))!\"\n (click)=\"dismissClick()\"\n ></ui-button>\n </div>\n @if (secondaryAlerts.length > 0) {\n <div class=\"secondary-alerts-container\">\n <ul>\n @for (alert of secondaryAlerts; track alert) {\n <li class=\"secondary-alert-item\" [innerHTML]=\"alert\"></li>\n }\n </ul>\n </div>\n }\n</div>\n","queryGuide":{"roles":["alert"],"ariaAttributes":["aria-live","aria-describedby","aria-labelledby"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon","ui-spinner","ui-button"],"suggestedQueries":["screen.getByRole('alert')"]},"filePath":"components/alert-banner/alert-banner.component.ts","supportsTheme":true,"lastModified":1775743558131.8364},"audio-waveform":{"name":"AudioWaveformComponent","selector":"ui-audio-waveform","category":"audio-waveform","description":"A lightweight audio waveform visualizer that displays animated bars representing microphone input levels. Uses Canopy AI gradient colors (pink to blue) and a symmetric distribution where middle bars respond with higher amplitude.","importPath":"@testgorilla/tgo-ui/components/audio-waveform","moduleName":"AudioWaveformModule","standalone":true,"changeDetection":"OnPush","inputs":[{"name":"width","type":"number","defaultValue":"40","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"height","type":"number","defaultValue":"22","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"gap","type":"number","defaultValue":"3","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"minScale","type":"number","defaultValue":"0.08","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"smoothing","type":"number","defaultValue":"DEFAULT_AUDIO_WAVEFORM_CONFIG.smoothing","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"bars","type":"number[] \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"When provided, the component operates in controlled mode —\nit renders externally-supplied bar values instead of managing the mic itself.","isSignal":true},{"name":"active","type":"boolean \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"Mirror of `bars` for controlled mode; required when `bars` is set.","isSignal":true}],"outputs":[],"module":{"name":"AudioWaveformModule","imports":["AudioWaveformComponent"],"exports":["AudioWaveformComponent"],"declarations":[],"providers":[]},"types":{"typeAliases":[],"interfaces":[{"name":"AudioWaveformConfig","properties":[{"name":"barCount","type":"number","optional":false},{"name":"smoothing","type":"number","optional":false},{"name":"fftSize","type":"number","optional":false}]}],"enums":[]},"examples":[],"documentation":"A lightweight audio waveform visualizer that displays animated bars representing microphone input levels. Uses Canopy AI gradient colors (pink to blue) and a symmetric distribution where middle bars respond with higher amplitude.\n\n## Features\n\n- Standalone mode: The component manages its own `AudioWaveformService` lifecycle.\n- Controlled mode: Pass `bars` and `active` inputs to render externally-managed audio data.\n- Symmetric visualization: Middle bars show higher amplitude for a natural waveform look.\n- Fixed 5-bar layout; configurable dimensions and smoothing.\n\n## Usage\n\n### Standalone (self-managed mic)\n\n```html\n<ui-audio-waveform [width]=\"40\" [height]=\"22\" [gap]=\"3\" />\n```\n\n### Controlled (external data)\n\n```html\n<ui-audio-waveform [bars]=\"externalBars()\" [active]=\"isRecording()\" />\n```\n","template":"<div\n class=\"waveform\"\n [style.width.px]=\"width()\"\n [style.height.px]=\"height()\"\n [style.gap.px]=\"gap()\"\n role=\"img\"\n [attr.aria-label]=\"effectiveActive() ? 'Audio waveform active' : 'Audio waveform inactive'\"\n>\n @for (item of effectiveBars(); track $index) {\n <div\n class=\"waveform-bar\"\n [style.width.px]=\"barWidth()\"\n [style.height.px]=\"barHeight(barValue($index))\"\n [style.border-radius.px]=\"barRadius()\"\n [style.background-color]=\"barColor($index)\"\n ></div>\n }\n</div>\n","queryGuide":{"roles":["img"],"ariaAttributes":["aria-label"],"dataTestIds":[],"materialComponents":[],"childUIComponents":[],"suggestedQueries":["screen.getByRole('img')","screen.getByLabelText('label text')"]},"filePath":"components/audio-waveform/audio-waveform.component.ts","supportsTheme":false,"lastModified":1775743558131.8364},"autocomplete":{"name":"AutocompleteComponent","selector":"ui-autocomplete","category":"autocomplete","description":"To use the Autocomplete component, you need to import the `AutocompleteComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/autocomplete","moduleName":"AutocompleteComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"itemsList","type":"any[] \| { groupName: string; items: any[]; isGroup: boolean }[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"suggestionsList","type":"any[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"allowAdd","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"textField","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"valueField","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"placeholder","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"type","type":"AutocompleteType","defaultValue":"'multi'","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"minCharactersSearch","type":"number","defaultValue":"3","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"variant","type":"DropdownVariationType","defaultValue":"DropdownVariation.AUTOCOMPLETE","required":true,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"showBottomContent","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Show reserved content below form field","isSignal":false},{"name":"valuePrimitive","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Return full object if true","isSignal":false},{"name":"fullWidth","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Indicator of the autocomplete width","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"required","type":"boolean","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Autocomplete is required or not","isSignal":false},{"name":"companyColor","type":"string \| null","defaultValue":"'#FFF2FC'","required":false,"alias":null,"transform":null,"description":"Color of the option hover.\nDefaults to Test Gorilla primary color.","isSignal":false},{"name":"hideBuiltInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Hide in-build errors for Reactive Forms","isSignal":false},{"name":"hideLabelInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Hide label in errors","isSignal":false},{"name":"virtualScroll","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":"booleanAttribute","description":"Sets dropdown list to virtual scroll mode","isSignal":false},{"name":"compareWith","type":"(a: any, b: any) => boolean","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"dropdownPanelClass","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"closeOnScroll","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"size","type":"AutocompleteSize","defaultValue":"'medium'","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"allowUserInput","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"clearable","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"exactMatchSelect","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"maxItemSelected","type":"unknown","defaultValue":"Infinity","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"maxLength","type":"number","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"isDynamicFilteringEnabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"dynamicFilterLoading","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"dynamicFilteredList","type":"any[] \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"infiniteScroll","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"hasMoreOptionsForInfiniteScroll","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"itemValue","type":"any","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"errors","type":"string[]","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input field errors","isSignal":false}],"outputs":[{"name":"selectionChange","eventType":"any","alias":null,"description":"","isSignal":false},{"name":"searchTextChange","eventType":"string","alias":null,"description":"","isSignal":false},{"name":"blur","eventType":"void","alias":null,"description":"","isSignal":false},{"name":"focus","eventType":"void","alias":null,"description":"","isSignal":false},{"name":"scrollViewportBottomReached","eventType":"void","alias":null,"description":"","isSignal":false},{"name":"scrollViewportBottomReachedFiltered","eventType":"void","alias":null,"description":"","isSignal":false}],"module":{"name":"AutocompleteComponentModule","imports":["CommonModule","MatFormFieldModule","MatAutocompleteModule","MatInputModule","FormsModule","TagComponentModule","MatChipsModule","IconComponentModule","UiTranslatePipe","ValidationErrorModule","HasValidationErrorPipe","CdkVirtualForOf","CdkVirtualScrollViewport","CdkFixedSizeVirtualScroll","PreventInputDirective","SpinnerComponentModule"],"exports":["AutocompleteComponent"],"declarations":["AutocompleteComponent","TransformItemPipe","IncludesPipe","SelectTextDirective"],"providers":["TransformItemPipe","IncludesPipe","SelectTextDirective"]},"types":{"typeAliases":[{"name":"AutocompleteType","value":"'single' \| 'multi' \| 'large'"},{"name":"DropdownVariationType","value":"`${DropdownVariation}`"},{"name":"AutocompleteSize","value":"'small' \| 'medium'"}],"interfaces":[],"enums":[{"name":"Autocomplete","members":[{"name":"SINGLE","value":"'single'"},{"name":"MULTI","value":"'multi'"},{"name":"LARGE","value":"'large'"}]},{"name":"Padding","members":[{"name":"AUTOCOMPLETE_CONTAINER","value":"40"},{"name":"DROPDOWN_CONTAINER","value":"60"},{"name":"AUTOCOMPLETE_SPACE_CONTAINER","value":"65"},{"name":"DROPDOWN_SPACE_CONTAINER","value":"85"}]},{"name":"Timeout","members":[{"name":"VIEW_INITIALIZED_AFTER_ACTION","value":"150"},{"name":"VIEW_INITIALIZED_COMPONENT_LOAD","value":"600"}]},{"name":"DropdownVariation","members":[{"name":"AUTOCOMPLETE","value":"'autocomplete'"},{"name":"DROPDOWN","value":"'dropdown'"}]}]},"examples":[],"documentation":"## How to use\n\nTo use the Autocomplete component, you need to import the `AutocompleteComponentModule` in your module:\n\n```typescript\nimport { AutocompleteComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n AutocompleteComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-autocomplete \n [itemsList]=\"items\"\n [suggestionsList]=\"suggestions\"\n [textField]=\"'label'\"\n [valueField]=\"'value'\"\n [variant]=\"'autocomplete'\"\n [type]=\"'multi'\"\n applicationTheme=\"light\">\n</ui-autocomplete>\n```","template":"<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n <mat-form-field\n [color]=\"\n safeErrors.length \|\|\n (ngControl?.errors && ngControl?.touched) \|\|\n (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected \|\|\n ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n ? 'warn'\n : 'accent'\n \"\n [appearance]=\"'outline'\"\n [ngClass]=\"{\n 'large-size': type === autocompleteType.LARGE,\n 'hide-bottom-content': !showBottomContent,\n 'keyboard-focused': keyboardFocused(),\n 'has-label': !!label,\n }\"\n >\n <mat-label ngIf=\"label\">{{ label }} <span ngIf=\"required\"></span></mat-label>\n <div #formField class=\"input-container\">\n <span\n style=\"position: absolute; left: -9999px\"\n ngIf=\"textField ? value?.[textField] : value === inputValue\"\n aria-live=\"polite\"\n >{{ ('SELECTED' \| uiTranslate \| async) + ' ' + inputValue }}</span\n >\n\n <input\n #trigger=\"matAutocompleteTrigger\"\n #matInput\n [attr.maxlength]=\"maxLength !== null && maxLength !== undefined ? maxLength : null\"\n [uiPreventInput]=\"!allowUserInput\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'unset-margin': value && type === autocompleteType.LARGE, 'no-caret': !allowUserInput }\"\n (blur)=\"refillInput()\"\n (focusin)=\"onFocus()\"\n [attr.aria-label]=\"\n (translationContext + 'SELECTED' \| uiTranslate \| async) + ' ' + (value \| transformItem: textField : true)\n \"\n [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n matInput\n [placeholder]=\"value && value.length ? '' : placeholder\"\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [(ngModel)]=\"inputValue\"\n />\n <div\n class=\"selected-items\"\n #tagContainer\n ngIf=\"\n (type === autocompleteType.LARGE && value) \|\|\n (!(inputValue && isInputFocus) && value && type !== autocompleteType.SINGLE)\n \"\n >\n <ui-tag\n class=\"value-tag\"\n [id]=\"'ui-tag-' + i\"\n ngFor=\"let valueItem of value; let i = index\"\n [label]=\"valueItem \| transformItem: textField\"\n [allowClose]=\"true\"\n [applicationTheme]=\"applicationTheme\"\n [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n [style.display]=\"\n (isOverLapping && i > 0 && i >= overlapIndex) \|\| (size === 'small' && value.length > 1) ? 'none' : 'block'\n \"\n [ngStyle]=\"{ '--tag-max-width': type === autocompleteType.LARGE ? 'fit-content' : firstTagMaxWidth + 'px' }\"\n [ngClass]=\"{\n 'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI,\n }\"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n @if (size === 'small') {\n <div class=\"selected-count\" ngIf=\"value.length > 1\">\n {{\n translationContext + 'SELECTED_AMOUNT'\n \| uiTranslate: { numberSelected: (value \| slice: overlapIndex).length }\n \| async\n }}\n </div>\n } @else {\n <div ngIf=\"value.length > 1 && isOverLapping\" class=\"overlap-count\">\n <ui-tag [applicationTheme]=\"applicationTheme\" [label]=\"'+' + (value.length - overlapIndex)\"></ui-tag>\n </div>\n }\n </div>\n </div>\n\n <ui-icon\n ngIf=\"\n (clearable && type === autocompleteType.SINGLE && (value?.length \|\| hasObjectValue)) \|\|\n (type !== autocompleteType.SINGLE &&\n value &&\n value.length > 1 &&\n ((AutocompleteUtils.isPrimitive(value) && value.length) \|\|\n (!AutocompleteUtils.isPrimitive(value) &&\n ((AutocompleteUtils.isArray(value) && value.length) \|\|\n (!AutocompleteUtils.isArray(value) && !value.length)))))\n \"\n class=\"remove-selected\"\n [tabIndex]=\"disabled ? -1 : 0\"\n (keydown.enter)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n (keydown.space)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n (click)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n [size]=\"'24'\"\n [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n [attr.aria-label]=\"'COMMON.CLEAR' \| uiTranslate \| async\"\n [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n ></ui-icon>\n\n <ui-icon\n class=\"arrow-state\"\n [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n ngIf=\"isDropdown\"\n [size]=\"'24'\"\n [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n (click)=\"onChevronClick(autocomplete)\"\n ></ui-icon>\n\n <mat-autocomplete\n #autocomplete\n [class]=\"applicationTheme + ' ' + dropdownPanelClass\"\n (optionSelected)=\"onOptionSelected($event)\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [hideSingleSelectionIndicator]=\"false\"\n (opened)=\"gotoUp()\"\n >\n @if (type !== autocompleteType.MULTI \|\| value?.length < maxItemSelected) {\n <ng-container ngIf=\"(searchResult$ \| async) === false\">\n <ng-container ngIf=\"!isDropdown; else dropdownList\">\n <mat-optgroup\n [label]=\"(translationContext + 'SUGGESTED' \| uiTranslate \| async)! \| uppercase\"\n ngIf=\"suggestionsList.length\"\n >\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': suggested \| includes: value : valueField }\"\n ngFor=\"let suggested of suggestionsList\"\n [value]=\"suggested\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ suggested \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <mat-optgroup\n [label]=\"(translationContext + 'SELECTED' \| uiTranslate \| async)! \| uppercase\"\n ngIf=\"value?.length && type !== autocompleteType.SINGLE\"\n >\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n ngFor=\"let item of value\"\n [value]=\"item\"\n >\n <span>{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n @if (isGrouped) {\n @for (group of itemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n ngFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n ngFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n\n <mat-optgroup\n [label]=\"(translationContext + 'SELECTED' \| uiTranslate \| async)! \| uppercase\"\n ngIf=\"value?.length && type === autocompleteType.SINGLE\"\n >\n <mat-option (mousedown)=\"$event.preventDefault()\" [class]=\"'selected-option'\" [value]=\"value\">\n <span [selectText]=\"userInput$ \| async\">{{ value \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n </ng-container>\n\n <ng-template #dropdownList>\n <cdk-virtual-scroll-viewport\n ngIf=\"virtualScroll \|\| infiniteScroll; else defaultViewPort\"\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(itemsList.length)\"\n class=\"virtual-scroll\"\n >\n @if (!isGrouped) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n cdkVirtualFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n\n @if (infiniteScroll && hasMoreOptionsForInfiniteScroll) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n }\n } @else {\n @for (group of itemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n cdkVirtualFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n cdkVirtualFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n </cdk-virtual-scroll-viewport>\n\n <ng-template #defaultViewPort>\n @if (!isGrouped) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n ngFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n } @else {\n @for (group of itemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n ngFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n ngFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n </ng-template>\n </ng-template>\n </ng-container>\n\n <ng-container ngIf=\"filteredSuggestionList$ \| async as filteredSuggestionList\">\n <ng-container ngIf=\"filteredItemsList$ \| async as filteredItemsList\">\n <ng-container ngIf=\"virtualScroll \|\| infiniteScroll; else filteredWithoutVirtualScroll\">\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(filteredItemsList.length)\"\n class=\"virtual-scroll\"\n >\n @if (isGrouped && filteredItemsList.length) {\n @for (group of filteredItemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n cdkVirtualFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n cdkVirtualFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n\n <mat-optgroup\n [label]=\"(translationContext + 'SUGGESTED' \| uiTranslate \| async)! \| uppercase\"\n ngIf=\"filteredSuggestionList.length\"\n >\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n cdkVirtualFor=\"let item of filteredSuggestionList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <ng-container ngIf=\"!filteredSuggestionList.length && !isGrouped; else showItemListWithGroupVirtual\">\n @for (item of filteredItemsList; let idx = $index; track item[valueField] \|\| idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </ng-container>\n\n <ng-template #showItemListWithGroupVirtual>\n <mat-optgroup\n [label]=\"(translationContext + 'ALL_ITEMS' \| uiTranslate \| async)! \| uppercase\"\n ngIf=\"filteredItemsList.length && !isGrouped\"\n >\n @for (item of filteredItemsList; let idx = $index; track item[valueField] \|\| idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n </ng-template>\n\n @if (isDynamicFilteringEnabled && dynamicFilterLoading) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n } @else if (inputValue) {\n @if (allowAdd && !isAlreadyAdded) {\n <mat-option (mousedown)=\"$event.preventDefault()\" [value]=\"inputValue\">\n <span>{{ 'COMMON.ADD' \| uiTranslate \| async }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' \| uiTranslate \| async }}</span>\n </mat-option>\n }\n }\n </cdk-virtual-scroll-viewport>\n </ng-container>\n\n <ng-template #filteredWithoutVirtualScroll>\n @if (isGrouped && filteredItemsList.length) {\n @for (group of filteredItemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n ngFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n ngFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n\n @if (isGrouped && filteredItemsList.length) {\n @for (group of filteredItemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n ngFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n ngFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n\n <mat-optgroup\n [label]=\"(translationContext + 'SUGGESTED' \| uiTranslate \| async)! \| uppercase\"\n ngIf=\"filteredSuggestionList.length\"\n >\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n ngFor=\"let item of filteredSuggestionList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n\n <ng-container ngIf=\"!filteredSuggestionList.length && !isGrouped; else showItemListWithGroup\">\n @for (item of filteredItemsList; let idx = $index; track item[valueField] \|\| idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </ng-container>\n\n <ng-template #showItemListWithGroup>\n <mat-optgroup\n [label]=\"(translationContext + 'ALL_ITEMS' \| uiTranslate \| async)! \| uppercase\"\n ngIf=\"filteredItemsList.length && !isGrouped\"\n >\n @for (item of filteredItemsList; let idx = $index; track item[valueField] \|\| idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item \| includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ \| async\">{{ item \| transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n </ng-template>\n\n @if (isDynamicFilteringEnabled && dynamicFilterLoading) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n } @else if (inputValue) {\n @if (allowAdd && !isAlreadyAdded) {\n <mat-option (mousedown)=\"$event.preventDefault()\" [value]=\"inputValue\">\n <span>{{ 'COMMON.ADD' \| uiTranslate \| async }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' \| uiTranslate \| async }}</span>\n </mat-option>\n }\n }\n </ng-template>\n </ng-container>\n </ng-container>\n }\n </mat-autocomplete>\n <mat-hint\n class=\"error\"\n ngIf=\"\n safeErrors.length \|\|\n (ngControl?.errors \| hasValidationError) \|\|\n (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected \|\|\n ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n \"\n >\n <div\n class=\"errors\"\n ngIf=\"\n (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected \|\|\n ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n \"\n >\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{ translationContext + 'MAX_SELECTED_ERROR' \| uiTranslate: { max: maxItemSelected } \| async }}</span>\n </div>\n <ng-container ngIf=\"safeErrors.length\">\n <div class=\"errors\" ngFor=\"let error of safeErrors; trackBy: trackByFn\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n </ng-container>\n <ui-validation-error\n ngIf=\"ngControl && !hideBuiltInErrors\"\n [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors ? null : label\"\n ></ui-validation-error>\n </mat-hint>\n </mat-form-field>\n </div>\n</ng-container>\n","queryGuide":{"roles":["option"],"ariaAttributes":["aria-live","aria-label"],"dataTestIds":[],"materialComponents":["mat-form-field","mat-label","mat-autocomplete","mat-optgroup","mat-option","mat-hint"],"childUIComponents":["ui-tag","ui-icon","ui-spinner","ui-validation-error"],"suggestedQueries":["screen.getByRole('option')","screen.getByLabelText('label text')"]},"filePath":"components/autocomplete/autocomplete.component.ts","supportsTheme":true,"lastModified":1775743558133.8364},"avatar":{"name":"AvatarComponent","selector":"ui-avatar","category":"avatar","description":"To use the Avatar component, you need to import the `AvatarComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/avatar","moduleName":"AvatarComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"size","type":"AvatarSizeType","defaultValue":"AvatarSize.SMALL","required":false,"alias":null,"transform":null,"description":"Input property for specifying the size of the avatar.","isSignal":false},{"name":"imageUrl","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Input property for specifying the URL of the image to display in the avatar.","isSignal":false},{"name":"name","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Input property for specifying the initials to display in the avatar.","isSignal":false},{"name":"tooltipText","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Input property for specifying the tooltip text for edit.","isSignal":false},{"name":"allowEdit","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Input property that makes avatar editable.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme where","isSignal":false},{"name":"backgroundColor","type":"BackgroundAvatarColorType","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Defines the background color","isSignal":false}],"outputs":[{"name":"editClick","eventType":"Event","alias":null,"description":"Event emitted when the edit button is clicked.","isSignal":false}],"module":{"name":"AvatarComponentModule","imports":["CommonModule","IconComponentModule","MatTooltipModule","ButtonComponentModule","UiTranslatePipe"],"exports":["AvatarComponent"],"declarations":["AvatarComponent","NameInitialsPipe"],"providers":[]},"types":{"typeAliases":[{"name":"AvatarSizeType","value":"`${AvatarSize}`"},{"name":"BackgroundAvatarColorType","value":"'red' \| 'blue' \| 'green' \| 'orange' \| 'pink'"}],"interfaces":[],"enums":[{"name":"AvatarSize","members":[{"name":"SMALL","value":"'small'"},{"name":"SMALL_MEDIUM","value":"'smallMedium'"},{"name":"MEDIUM","value":"'medium'"},{"name":"MEDIUM_LARGE","value":"'mediumLarge'"},{"name":"LARGE","value":"'large'"}]},{"name":"AvatarBackgroundColor","members":[{"name":"PINK","value":"'#FFE6FA'"},{"name":"BLUE","value":"'#D9E8FF'"},{"name":"GREEN","value":"'#D4F2C3'"},{"name":"ORANGE","value":"'#FFE1B3'"},{"name":"RED","value":"'#FFAC9A'"}]}]},"examples":[{"name":"Default","template":"<ui-avatar [applicationTheme]=\"${_theme}\" size=\"small\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"smallMedium\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"medium\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"mediumLarge\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"large\"></ui-avatar>","props":{"size":"AvatarSize.LARGE","allowEdit":"true","tooltipText":"'Edit'"}},{"name":"Editable","template":"<ui-avatar [applicationTheme]=\"${_theme}\" size=\"small\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"smallMedium\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"medium\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"mediumLarge\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"large\"></ui-avatar>","props":{"size":"AvatarSize.LARGE","allowEdit":"true","tooltipText":"'Edit'"}},{"name":"MultipleDefaultAvatar","template":"<ui-avatar [applicationTheme]=\"${_theme}\" size=\"small\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"smallMedium\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"medium\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"mediumLarge\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"large\"></ui-avatar>","props":{"size":"AvatarSize.SMALL"}},{"name":"MultipleImageAvatar","template":"<ui-avatar [applicationTheme]=\"${_theme}\" size=\"small\" imageUrl=\"/images/Avatar.png\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"smallMedium\" imageUrl=\"/images/Avatar.png\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"medium\" imageUrl=\"/images/Avatar.png\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"mediumLarge\" imageUrl=\"/images/Avatar.png\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"large\" imageUrl=\"/images/Avatar.png\"></ui-avatar>","props":{"size":"AvatarSize.SMALL"}},{"name":"MultipleInitialsAvatar","template":"<ui-avatar [applicationTheme]=\"${_theme}\" [backgroundColor]=\"'RED'\" size=\"small\" name=\"LS\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"smallMedium\" name=\"LS\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"medium\" name=\"LS\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"mediumLarge\" name=\"LS\"></ui-avatar>\n <ui-avatar [applicationTheme]=\"${_theme}\" size=\"large\" name=\"LS\"></ui-avatar>","props":{"size":"AvatarSize.SMALL"}}],"documentation":"## Import\n\nTo use the Avatar component, you need to import the `AvatarComponentModule` in your module:\n\n```typescript\nimport { AvatarComponentModule } from '@testgorilla/tgo-ui';\n\n\n@NgModule({\n imports: [\n AvatarComponentModule,\n // ...\n ]\n})\nexport class YourModule { }\n```\n\n## Template Example\n\n```html\n<!-- Default Avatar -->\n<ui-avatar></ui-avatar>\n\n<!-- Avatar with Image -->\n<ui-avatar imageUrl=\"/path/to/image.jpg\"></ui-avatar>\n\n<!-- Avatar with Initials -->\n<ui-avatar name=\"John Doe\"></ui-avatar>\n\n<!-- Customized Size -->\n<ui-avatar size=\"large\" name=\"John Doe\"></ui-avatar>\n\n<!-- Editable Avatar with Custom Background -->\n<ui-avatar\n size=\"large\"\n backgroundColor=\"red\"\n allowEdit=\"true\"\n tooltipText=\"Edit profile picture\"\n (editClick)=\"onEditClick($event)\">\n</ui-avatar>\n```","template":"<div\n class=\"avatar-container\"\n [attr.type]=\"!imageUrl && !name ? 'icon' : 'initials'\"\n [ngClass]=\"[size]\"\n [attr.theme]=\"applicationTheme\"\n [ngStyle]=\"{ backgroundColor: backgroundAvatarColor }\"\n>\n <span class=\"initials\" ngIf=\"name && !imageUrl\">\n {{ name \| nameInitials }}\n </span>\n <img [attr.aria-hidden]=\"true\" ngIf=\"imageUrl\" [attr.src]=\"imageUrl\" [alt]=\"\" />\n <ui-icon\n ngIf=\"!imageUrl && !name\"\n [attr.aria-hidden]=\"true\"\n [color]=\"applicationTheme === 'classic' ? 'dark' : 'rebrand-black'\"\n [applicationTheme]=\"applicationTheme\"\n [size]=\"iconSize[size]\"\n [name]=\"'User-profile'\"\n ></ui-icon>\n <div class=\"edit-avatar\" ngIf=\"allowEdit && (size === avatarSize.LARGE \|\| size === avatarSize.MEDIUM_LARGE)\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n [companyColor]=\"'black'\"\n [size]=\"'small'\"\n [iconName]=\"'Edit'\"\n [variant]=\"'icon-button'\"\n [tooltip]=\"tooltipText\"\n [ariaLabel]=\"('AVATAR.EDIT_AVATAR' \| uiTranslate \| async)!\"\n (buttonClickEvent)=\"onEditClick($event)\"\n ></ui-button>\n </div>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":["aria-hidden"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon","ui-button"],"suggestedQueries":[]},"filePath":"components/avatar/avatar.component.ts","supportsTheme":true,"lastModified":1775743558134.8364},"badge":{"name":"BadgeComponent","selector":"ui-badge","category":"badge","description":"To use the Badge component, you need to import the `BadgeComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/badge","moduleName":"BadgeComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"The label to be displayed on the badge.","isSignal":false},{"name":"staticLabel","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A static label always displayed after the main label, never truncated.\nIntended for short suffixes (max 4 chars, e.g. \"100%\").\nWhen the main label is truncated, the tooltip shows both labels in full.","isSignal":false},{"name":"icon","type":"IconName","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"The icon name to be displayed on the badge.","isSignal":false},{"name":"color","type":"BadgeColor","defaultValue":"'petrol'","required":false,"alias":null,"transform":null,"description":"The color of the badge. Defaults to 'petrol'.","isSignal":false},{"name":"variant","type":"BadgeVariant","defaultValue":"'primary'","required":false,"alias":null,"transform":null,"description":"The variant of the badge. Defaults to 'primary'.","isSignal":false},{"name":"notificationsAmount","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"The amount of notifications to be displayed on the badge.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"rebrandColor","type":"RebrandBadgeColor","defaultValue":"'brand'","required":false,"alias":null,"transform":null,"description":"The color of the badge on new theme. Defaults to 'brand'.","isSignal":false},{"name":"truncateLabel","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"enableAnimation","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether to enable the animation when label changes from empty to having content.","isSignal":false}],"outputs":[],"module":{"name":"BadgeComponentModule","imports":["CommonModule","IconComponentModule","MatTooltipModule"],"exports":["BadgeComponent"],"declarations":["BadgeComponent"],"providers":[]},"types":{"typeAliases":[{"name":"BadgeVariant","value":"'primary' \| 'secondary' \| 'notification' \| 'primary-ai' \| 'secondary-ai'"},{"name":"BadgeColor","value":"\| 'red'\n \| 'grey-medium'\n \| 'teal'\n \| 'yellow'\n \| 'petrol'\n \| 'teal-60w'\n \| 'petrol-90w'\n \| 'petrol-60w'\n \| 'grey-dark'\n \| 'blue-20'\n \| 'blue-40'\n \| 'pink-30'\n \| 'blue-10'"},{"name":"RebrandBadgeColor","value":"\| 'success'\n \| 'warning'\n \| 'negative'\n \| 'info'\n \| 'brand'\n \| 'neutral'\n \| 'blue-20'\n \| 'blue-40'\n \| 'pink-30'\n \| 'blue-10'\n \| 'grey-10'\n \| 'grey-20'\n \| 'grey-30'"}],"interfaces":[],"enums":[{"name":"BadgeColorEnum","members":[{"name":"RED","value":"'red'"},{"name":"GREY_MEDIUM","value":"'grey-medium'"},{"name":"TEAL","value":"'teal'"},{"name":"YELLOW","value":"'yellow'"},{"name":"PETROL","value":"'petrol'"},{"name":"TEAL_60W","value":"'teal-60w'"},{"name":"PETROL_90W","value":"'petrol-90w'"},{"name":"PETROL_60W","value":"'petrol-60w'"},{"name":"GREY_DARK","value":"'grey-dark'"},{"name":"BLUE_20","value":"'blue-20'"},{"name":"BLUE_40","value":"'blue-40'"}]},{"name":"RebrandBadgeColorEnum","members":[{"name":"SUCCESS","value":"'success'"},{"name":"WARNING","value":"'warning'"},{"name":"NEGATIVE","value":"'negative'"},{"name":"INFO","value":"'info'"},{"name":"BRAND","value":"'brand'"},{"name":"NEUTRAL","value":"'neutral'"},{"name":"BLUE_40","value":"'blue-40'"},{"name":"BLUE_20","value":"'blue-20'"},{"name":"PINK_30","value":"'pink-30'"},{"name":"BLUE_10","value":"'blue-10'"},{"name":"GREY_30","value":"'grey-30'"},{"name":"GREY_20","value":"'grey-20'"},{"name":"GREY_10","value":"'grey-10'"}]},{"name":"BadgeVariantEnum","members":[{"name":"PRIMARY","value":"'primary'"},{"name":"PRIMARY_AI","value":"'primary-ai'"},{"name":"SECONDARY","value":"'secondary'"},{"name":"SECONDARY_AI","value":"'secondary-ai'"},{"name":"NOTIFICATION","value":"'notification'"}]}]},"examples":[],"documentation":"## How to use\n\nTo use the Badge component, you need to import the `BadgeComponentModule` in your module:\n\n```typescript\nimport { BadgeComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n BadgeComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-badge \n label=\"Hello\" \n icon=\"Info\" \n color=\"petrol\" \n variant=\"primary\" \n applicationTheme=\"light\">\n</ui-badge>\n```","template":"<div\n [class]=\"'badge badge-container-' + variant\"\n [class.no-label]=\"!label && !staticLabel\"\n [attr.aria-label]=\"label + (staticLabel ? ' ' + staticLabel : '')\"\n [attr.theme]=\"applicationTheme\"\n [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n [matTooltip]=\"\n label.length > 25 - (staticLabel.length < 4 ? staticLabel.length : 4)\n ? label + (staticLabel ? ' ' + staticLabel : '')\n : ''\n \"\n [matTooltipClass]=\"applicationTheme\"\n>\n <ng-container [ngSwitch]=\"variant\">\n <ng-container ngSwitchCase=\"badgeVariant.PRIMARY\">\n <ui-icon ngIf=\"icon\" [class.badge-icon]=\"!!label\" [name]=\"icon\" [color]=\"iconColor\"></ui-icon>\n </ng-container>\n <ng-container ngSwitchCase=\"badgeVariant.PRIMARY_AI\">\n <ng-container [ngTemplateOutlet]=\"aiIconTpl\"></ng-container>\n </ng-container>\n <ng-container ngSwitchCase=\"badgeVariant.SECONDARY_AI\">\n <ng-container [ngTemplateOutlet]=\"aiIconTpl\"></ng-container>\n </ng-container>\n <div\n ngSwitchCase=\"badgeVariant.SECONDARY\"\n class=\"point\"\n [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n ></div>\n <div ngSwitchCase=\"badgeVariant.NOTIFICATION\" class=\"number-notification\">{{ notificationsAmount }}</div>\n </ng-container>\n <div\n class=\"label\"\n ngIf=\"variant !== badgeVariant.NOTIFICATION\"\n [class.empty]=\"!label && !staticLabel\"\n [class.animated]=\"enableAnimation\"\n >\n {{\n label.length > 25 - (staticLabel.length < 4 ? staticLabel.length : 4) && truncateLabel\n ? (label \| slice: 0 : 25 - (staticLabel.length < 4 ? staticLabel.length : 4)) + '...'\n : label\n }}\n </div>\n <span ngIf=\"staticLabel && variant !== badgeVariant.NOTIFICATION\" class=\"static-label\">{{\n staticLabel \| slice: 0 : 4\n }}</span>\n</div>\n\n<ng-template #aiIconTpl>\n <ui-icon class=\"badge-icon\" [name]=\"'Sparkle-in-line'\" [color]=\"'ai'\"></ui-icon>\n</ng-template>\n","queryGuide":{"roles":[],"ariaAttributes":["aria-label"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon"],"suggestedQueries":["screen.getByLabelText('label text')"]},"filePath":"components/badge/badge.component.ts","supportsTheme":true,"lastModified":1775743558134.8364},"breadcrumb":{"name":"BreadcrumbComponent","selector":"ui-breadcrumb","category":"breadcrumb","description":"To use the Breadcrumb component, you need to import the `BreadcrumbComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/breadcrumb","moduleName":"BreadcrumbComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"size","type":"BreadcrumbSize","defaultValue":"'large'","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"items","type":"BreadcrumbItem[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"includeBackButton","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"isLoading","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"numberOfLoadingItems","type":"number","defaultValue":"3","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"maxItemLength","type":"number","defaultValue":"18","required":false,"alias":null,"transform":null,"description":"","isSignal":true}],"outputs":[{"name":"selectItem","eventType":"string","alias":null,"description":"","isSignal":false},{"name":"backButtonClickEvent","eventType":"Event","alias":null,"description":"","isSignal":false}],"module":{"name":"BreadcrumbComponentModule","imports":["CommonModule","IconComponentModule","MatTooltipModule","OverflowMenuComponentModule","ButtonComponentModule","SkeletonComponent","UiTranslatePipe","TruncatePipe"],"exports":["BreadcrumbComponent"],"declarations":["BreadcrumbComponent"],"providers":[]},"types":{"typeAliases":[{"name":"BreadcrumbSize","value":"'small' \| 'medium' \| 'large'"}],"interfaces":[{"name":"BreadcrumbItem","properties":[{"name":"label","type":"string","optional":false},{"name":"value","type":"string","optional":false}]}],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Breadcrumb component, you need to import the `BreadcrumbComponentModule` in your module:\n\n```typescript\nimport { BreadcrumbComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n BreadcrumbComponentModule,\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule {}\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-breadcrumb\n [items]=\"breadcrumbItems\"\n [size]=\"'large'\"\n [applicationTheme]=\"'light'\"\n (selectItem)=\"onBreadcrumbItemClick($event)\"\n>\n</ui-breadcrumb>\n```\n\nFor component setup:\n\n```typescript\nimport { BreadcrumbItem } from '@testgorilla/tgo-ui';\n\nexport class MyComponent {\n breadcrumbItems: BreadcrumbItem[] = [\n { label: 'Home', value: 'home' },\n { label: 'Products', value: 'products' },\n { label: 'Category', value: 'category' },\n { label: 'Current Page', value: 'current-page' },\n ];\n\n onBreadcrumbItemClick(value: string): void {\n // Handle navigation logic\n console.log('Breadcrumb item clicked:', value);\n }\n}\n```\n\nDifferent sizes:\n\n```html\n<ui-breadcrumb [items]=\"items\" [size]=\"'small'\"></ui-breadcrumb>\n<ui-breadcrumb [items]=\"items\" [size]=\"'medium'\"></ui-breadcrumb>\n<ui-breadcrumb [items]=\"items\" [size]=\"'large'\"></ui-breadcrumb>\n```\n\nThe breadcrumb component automatically handles overflow by moving items to a dropdown menu when space is limited, and provides intelligent truncation for long labels.\n","template":"@if (!isLoading()) {\n <div class=\"breadcrumb\" [attr.theme]=\"applicationTheme()\" #breadcrumbContainer [class]=\"'breadcrumb-' + size()\">\n @if (includeBackButton()) {\n <ui-button\n [variant]=\"'icon-button'\"\n [tooltip]=\"('COMMON.BACK' \| uiTranslate \| async)!\"\n [iconName]=\"'Arrow-chevron-left-filled'\"\n (buttonClickEvent)=\"backButtonClickEvent.emit($event)\"\n ></ui-button>\n }\n @if (isOverflowing()) {\n <ui-overflow-menu\n [applicationTheme]=\"applicationTheme()\"\n [contentTemplateRef]=\"overflowMenu\"\n [buttons]=\"overflowButtonItems()\"\n [matTooltip]=\"('COMMON.OPTIONS' \| uiTranslate \| async)!\"\n [matTooltipClass]=\"applicationTheme()\"\n [isDynamicMenu]=\"true\"\n (selectItem)=\"selectItem.emit($event)\"\n class=\"breadcrumb-overflow-menu\"\n ></ui-overflow-menu>\n <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n }\n @for (item of visibleItems(); track item.value) {\n @if (!$last) {\n <span\n class=\"breadcrumb-item\"\n tabindex=\"0\"\n [matTooltip]=\"item.label.length > maxItemLength() ? item.label : ''\"\n [matTooltipClass]=\"applicationTheme()\"\n [attr.aria-label]=\"item.label\"\n (click)=\"selectItem.emit(item.value)\"\n (keydown.enter)=\"selectItem.emit(item.value)\"\n >\n {{ item.label \| truncate: maxItemLength() : '...' }}\n </span>\n <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n } @else {\n <strong\n class=\"breadcrumb-item-active\"\n tabindex=\"0\"\n [matTooltip]=\"shouldTruncateLastItem() ? item.label : ''\"\n [matTooltipClass]=\"applicationTheme()\"\n [class.breadcrumb-item-active-truncated]=\"shouldTruncateLastItem()\"\n [attr.aria-label]=\"item.label\"\n [attr.aria-current]=\"'page'\"\n (click)=\"selectItem.emit(item.value)\"\n (keydown.enter)=\"selectItem.emit(item.value)\"\n >\n {{ item.label }}\n </strong>\n }\n }\n </div>\n} @else {\n <div class=\"breadcrumb\">\n @for (i of loadingItems(); track $index) {\n <ui-skeleton count=\"1\" [theme]=\"{ width: '160px', margin: '10px 0 0' }\"></ui-skeleton>\n @if ($index !== numberOfLoadingItems() - 1) {\n <ui-icon name=\"Arrow-chevron-right-filled\" [applicationTheme]=\"applicationTheme()\" color=\"gray\"></ui-icon>\n }\n }\n </div>\n}\n<ng-template #overflowMenu>\n <div class=\"breadcrumb-item breadcrumb-overflow\" [class]=\"'breadcrumb-' + size()\">...</div>\n</ng-template>\n","queryGuide":{"roles":[],"ariaAttributes":["aria-label","aria-current"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-button","ui-overflow-menu","ui-icon","ui-skeleton"],"suggestedQueries":["screen.getByLabelText('label text')"]},"filePath":"components/breadcrumb/breadcrumb.component.ts","supportsTheme":true,"lastModified":1775743558135.8364},"button":{"name":"ButtonComponent","selector":"ui-button","category":"button","description":"To use the Button component, you need to import the `ButtonComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/button","moduleName":"ButtonComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"size","type":"ButtonSize","defaultValue":"'big'","required":false,"alias":null,"transform":null,"description":"Define button height","isSignal":false},{"name":"variant","type":"ButtonColor","defaultValue":"'primary'","required":false,"alias":null,"transform":null,"description":"Background color of the button while in active state","isSignal":false},{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Text content to appear on the button","isSignal":false},{"name":"iconPosition","type":"ButtonIconPosition","defaultValue":"'right'","required":false,"alias":null,"transform":null,"description":"Positioning of the icon (when existant)","isSignal":false},{"name":"justIcon","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Define if button has only icon without text","isSignal":false},{"name":"iconName","type":"IconName \| undefined","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Name of ui-icon","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Indicator if the button should be disabled","isSignal":false},{"name":"loading","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Indicator if the loading icon should be shown","isSignal":false},{"name":"fullWidth","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Indicator of the button width","isSignal":false},{"name":"url","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Url of button if it is a link","isSignal":false},{"name":"urlTarget","type":"LinkUrlTarget","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Url's target of button if it is a link","isSignal":false},{"name":"value","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Button value","isSignal":false},{"name":"tooltip","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"isPremium","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"type","type":"ButtonType","defaultValue":"'button'","required":false,"alias":null,"transform":null,"description":"The type of the button.","isSignal":false},{"name":"companyColor","type":"string \| null","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Color of the button.\nDefaults to Test Gorilla primary color.","isSignal":false},{"name":"buttonBadgeConfig","type":"ButtonBadgeConfig \| undefined","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Config for the button badge variation","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme where buttons is used","isSignal":false},{"name":"disabledScaleOnClick","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Disabled button scale on click","isSignal":false},{"name":"ariaLabel","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"A string representing the ARIA label for accessibility.\nThis label is used to provide an accessible name for the input element.","isSignal":false},{"name":"ariaRequired","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"ariaLabelledby","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"ariaDescribedby","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"preventDefault","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":"booleanAttribute","description":"Prevents default button click behavior","isSignal":false},{"name":"hasBackground","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":"booleanAttribute","description":"Ghost variant with white background","isSignal":false},{"name":"tooltipPosition","type":"TooltipPosition","defaultValue":"'below'","required":false,"alias":null,"transform":null,"description":"Sets tooltip position","isSignal":false},{"name":"role","type":"unknown","defaultValue":"'button'","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"iconFilled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false}],"outputs":[{"name":"buttonClickEvent","eventType":"Event","alias":null,"description":"","isSignal":false},{"name":"buttonHoverEvent","eventType":"Event","alias":null,"description":"","isSignal":false}],"module":{"name":"ButtonComponentModule","imports":["CommonModule","MatButtonModule","IconComponentModule","MatProgressSpinnerModule","MatTooltipModule","BadgeComponentModule","EllipseTextDirective","MatRadioModule","UiTranslatePipe"],"exports":["ButtonComponent"],"declarations":["ButtonComponent"],"providers":[]},"types":{"typeAliases":[{"name":"ButtonIconPosition","value":"'left' \| 'right'"},{"name":"ButtonColor","value":"\| 'primary'\n \| 'secondary'\n \| 'secondary-inverted'\n \| 'ghost'\n \| 'ghost-ai'\n \| 'outlined'\n \| 'destructive'\n \| 'tertiary'\n \| 'link'\n \| 'tab'\n \| 'text'\n \| 'text-inline'\n \| 'menuTrigger'\n \| 'menuCell'\n \| 'icon-button'\n \| 'linkedin'"},{"name":"ButtonSize","value":"'big' \| 'medium' \| 'small'"},{"name":"LinkUrlTarget","value":"'' \| '_self' \| '_blank' \| '_parent' \| '_top'"},{"name":"IconButtonSize","value":"'24' \| '32' \| '40'"},{"name":"ButtonType","value":"'button' \| 'submit' \| 'reset'"},{"name":"ButtonState","value":"'hover' \| 'pressed' \| 'disabled' \| 'default'"}],"interfaces":[{"name":"ButtonBadgeConfig","properties":[{"name":"badgeType","type":"BadgeVariant \| null","optional":false},{"name":"badgeLabel","type":"string","optional":true},{"name":"badgeNotificationAmount","type":"number","optional":false},{"name":"rebrandColor","type":"RebrandBadgeColor","optional":true}]}],"enums":[]},"examples":[{"name":"Basic","template":"<div class=\"row\">\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"primary\" label=\"Primary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"secondary\" label=\"Secondary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"secondary-inverted\" label=\"Secondary Inverted\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"ghost\" label=\"Ghost\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" iconName=\"Book\" variant=\"destructive\" label=\"Destructive\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"tertiary\" label=\"Tertiary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"tab\" label=\"Tab\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"text\" label=\"Text\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"text-inline\" label=\"Text-inline\"></ui-button></div>\n </div>","props":{"label":"'Button'","variant":"'primary'","iconName":"'Book'"}},{"name":"ButtonOnlyLabel","template":"<div class=\"row\">\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"primary\" label=\"Primary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"secondary\" label=\"Secondary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"secondary-inverted\" label=\"Secondary Inverted\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"ghost\" label=\"Ghost\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" iconName=\"Book\" variant=\"destructive\" label=\"Destructive\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"tertiary\" label=\"Tertiary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"tab\" label=\"Tab\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"text\" label=\"Text\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"text-inline\" label=\"Text-inline\"></ui-button></div>\n </div>","props":{"iconPosition":"'left'"}},{"name":"ButtonAsLink","template":"<div>\n <p>Big size</p>\n Sample sentance with <ui-button applicationTheme=\"${_theme}\" variant=\"link\" urlTarget=\"_blank\" href=\"https://www.testgorilla.com/\" label=\"Large\"></ui-button> link</div>\n <hr>\n <div>\n <p>Medium size</p>\n Sample sentance with <ui-button applicationTheme=\"${_theme}\" size=\"medium\" variant=\"link\" urlTarget=\"_blank\" href=\"https://www.testgorilla.com/\" label=\"Medium\"></ui-button> link\n <hr>\n <p>Small size</p>\n Sample sentance with <ui-button applicationTheme=\"${_theme}\" size=\"small\" variant=\"link\" urlTarget=\"_blank\" href=\"https://www.testgorilla.com/\" label=\"Small\"></ui-button> link\n <hr>\n </div>","props":{"iconPosition":"'left'"}},{"name":"Disabled","template":"<div class=\"row\"><div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" iconName=\"Book\" variant=\"primary\" [disabled]=\"true\" label=\"Primary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"secondary\" iconName=\"Book\" [disabled]=\"true\" label=\"Secondary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"ghost\" iconName=\"Book\" [disabled]=\"true\" label=\"Ghost\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"destructive\" iconName=\"Book\" [disabled]=\"true\" label=\"Destructive\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"tertiary\" iconName=\"Book\" [disabled]=\"true\" label=\"Tertiary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"tab\" iconName=\"Book\" [disabled]=\"true\" label=\"Tab\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"text\" iconName=\"Book\" [disabled]=\"true\" label=\"Text\"></ui-button></div></div>\n <h4>Only icon</h4>\n <div class=\"row\">\n <div class=\"colum\"> <ui-button applicationTheme=\"${_theme}\" variant=\"primary\" [disabled]=\"true\" [justIcon]=\"true\" iconName=\"Test\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"secondary\" [disabled]=\"true\" [justIcon]=\"true\" iconName=\"Test\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"ghost\" [disabled]=\"true\" [justIcon]=\"true\" iconName=\"Test\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"destructive\" [disabled]=\"true\" [justIcon]=\"true\" iconName=\"Test\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"tertiary\" [disabled]=\"true\" [justIcon]=\"true\" iconName=\"Test\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"tab\" [disabled]=\"true\" [justIcon]=\"true\" iconName=\"Test\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"text\" [disabled]=\"true\" [justIcon]=\"true\" iconName=\"Test\"></ui-button></div></div>","props":{"iconPosition":"'left'"}},{"name":"LabelIconLeft","template":"<div class=\"row\"><div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"primary\" iconName=\"Book\" iconPosition=\"left\" label=\"Primary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"secondary\" iconName=\"Book\" iconPosition=\"left\" label=\"Secondary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"ghost\" iconName=\"Book\" iconPosition=\"left\" label=\"Ghost\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"ghost-ai\" iconName=\"Sparkle\" iconPosition=\"left\" label=\"Ghost AI\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"destructive\" iconName=\"Book\" iconPosition=\"left\" label=\"Destructive\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"tertiary\" iconName=\"Book\" iconPosition=\"left\" label=\"Tertiary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"tab\" iconName=\"Book\" iconPosition=\"left\" label=\"Tab\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"text\" iconName=\"Book\" iconPosition=\"left\" label=\"Text\"></ui-button></div></div>","props":{"iconPosition":"'left'"}},{"name":"LabelIconRight","template":"<div class=\"row\"><div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"primary\" iconName=\"Close\" iconPosition=\"right\" label=\"Primary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"secondary\" iconName=\"Close\" iconPosition=\"right\" label=\"Secondary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"ghost\" iconName=\"Close\" iconPosition=\"right\" label=\"Ghost\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"ghost-ai\" iconName=\"Sparkle\" iconPosition=\"right\" label=\"Ghost AI\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"destructive\" iconName=\"Close\" iconPosition=\"right\" label=\"Destructive\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"tertiary\" iconName=\"Close\" iconPosition=\"right\" label=\"Tertiary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"tab\" iconName=\"Close\" iconPosition=\"right\" label=\"Tab\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"text\" iconName=\"Close\" iconPosition=\"right\" label=\"Text\"></ui-button></div></div>","props":{"iconPosition":"'right'"}},{"name":"OnlyIcon","template":"<div class=\"row\"><div class=\"colum\">\n <ui-button variant=\"primary\" [justIcon]=\"true\" applicationTheme=\"${_theme}\" iconName=\"Book\"></ui-button></div>\n <div class=\"colum\"><ui-button variant=\"secondary\" applicationTheme=\"${_theme}\" [justIcon]=\"true\" iconName=\"Book\"></ui-button></div>\n <div class=\"colum\"><ui-button variant=\"ghost\" applicationTheme=\"${_theme}\" [justIcon]=\"true\" iconName=\"Book\"></ui-button></div>\n <div class=\"colum\"><ui-button variant=\"destructive\" applicationTheme=\"${_theme}\" [justIcon]=\"true\" iconName=\"Book\"></ui-button></div>\n <div class=\"colum\"><ui-button variant=\"tertiary\" applicationTheme=\"${_theme}\" [justIcon]=\"true\" iconName=\"Book\"></ui-button></div>\n <div class=\"colum\"><ui-button variant=\"tab\" applicationTheme=\"${_theme}\" [justIcon]=\"true\" iconName=\"Book\"></ui-button></div>\n <div class=\"colum\"><ui-button variant=\"text\" applicationTheme=\"${_theme}\" [justIcon]=\"true\" iconName=\"Book\"></ui-button></div></div>","props":{"justIcon":"true","iconName":"'Book'"}},{"name":"Loading","template":"<div class=\"row\"><div class=\"colum\">\n <ui-button applicationTheme=\"${_theme}\" variant=\"primary\" ${argsToTemplate(args)}></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"secondary\" ${argsToTemplate(args)}></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"ghost\" ${argsToTemplate(args)}></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"destructive\" iconName=\"Test\" ${argsToTemplate(args)}></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"tertiary\" ${argsToTemplate(args)}></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"text\" ${argsToTemplate(args)}></ui-button></div></div>","props":{"loading":"true"}},{"name":"Small","template":"<div class=\"row\"><div class=\"colum\">\n <ui-button variant=\"primary\" size=\"small\" applicationTheme=\"${_theme}\" [loading]=\"true\"></ui-button></div>\n <div class=\"colum\"><ui-button size=\"small\" applicationTheme=\"${_theme}\" variant=\"secondary\" label=\"Secondary\" iconName=\"Add\" [justIcon]=\"true\"></ui-button></div>\n <div class=\"colum\"><ui-button size=\"small\" applicationTheme=\"${_theme}\" variant=\"ghost\" iconName=\"Close\" iconPosition=\"right\" label=\"Ghost\"></ui-button></div>\n <div class=\"colum\"><ui-button size=\"small\" applicationTheme=\"${_theme}\" variant=\"destructive\" iconName=\"Devices\" iconPosition=\"left\" label=\"Destructive\"></ui-button></div>\n <div class=\"colum\"><ui-button size=\"small\" applicationTheme=\"${_theme}\" variant=\"tertiary\" label=\"Tertiary\"></ui-button></div>\n <div class=\"colum\"><ui-button size=\"small\" applicationTheme=\"${_theme}\" variant=\"tab\" label=\"Tab\"></ui-button></div>\n <div class=\"colum\"><ui-button size=\"small\" applicationTheme=\"${_theme}\" variant=\"text\" label=\"Text\"></ui-button></div>\n <div class=\"colum\"><ui-button size=\"small\" applicationTheme=\"${_theme}\" variant=\"text-inline\" label=\"Text-inline\"></ui-button></div></div>","props":{"size":"'small'"}},{"name":"FullWidth","template":"<div class=\"row\">\n <ui-button variant=\"primary\" applicationTheme=\"${_theme}\" [fullWidth]=\"true\" label=\"Primary\"></ui-button>\n <ui-button variant=\"secondary\" applicationTheme=\"${_theme}\" [fullWidth]=\"true\" iconName=\"Devices\" iconPosition=\"right\" label=\"Secondary\"></ui-button>\n <ui-button variant=\"ghost\" applicationTheme=\"${_theme}\" [fullWidth]=\"true\" iconName=\"Close\" iconPosition=\"left\" label=\"Ghost\"></ui-button></div>","props":{"fullWidth":"true"}},{"name":"MenuTrigger","template":"<div class=\"row\">\n <div class=\"colum\"><ui-button variant=\"menuTrigger\" [justIcon]=\"true\" iconName=\"Settings\"></ui-button></div>\n <div class=\"colum\"><ui-button variant=\"menuTrigger\" [justIcon]=\"true\" iconName=\"Menu-ellipsis\"></ui-button></div>\n <div class=\"colum\"><ui-button variant=\"menuTrigger\" [justIcon]=\"true\" iconName=\"Folder\"></ui-button></div>\n <div class=\"colum\"><ui-button variant=\"menuTrigger\" [justIcon]=\"true\" iconName=\"Plus\"></ui-button></div></div>","props":{"variant":"'menuTrigger'","justIcon":"true","iconName":"'Settings'"}},{"name":"MenuCell","template":"<div class=\"row\">\n <div class=\"colum\"><ui-button variant=\"menuCell\" iconPosition=\"left\" iconName=\"Copy\" label=\"Copy\"></ui-button></div>\n <div class=\"colum\"><ui-button variant=\"menuCell\" iconPosition=\"left\" iconName=\"Edit\" label=\"Edit\"></ui-button></div>\n <div class=\"colum\"><ui-button variant=\"menuCell\" iconPosition=\"left\" iconName=\"Delete\" label=\"Delete\"></ui-button></div></div>","props":{"variant":"'icon-button'","tooltip":"'Icon Button Tooltip'","iconName":"'Settings'"}},{"name":"IconButton","template":"<div>\n <h4>Enabled: </h4>\n <ui-button ${argsToTemplate(args)} applicationTheme=\"${_theme}\"></ui-button>\n </div>\n <div>\n <h4>Disabled: </h4>\n <ui-button ${argsToTemplate(args)} applicationTheme=\"${_theme}\" disabled=\"true\"></ui-button>\n </div>","props":{"variant":"'icon-button'","tooltip":"'Icon Button Tooltip'","iconName":"'Settings'"}},{"name":"PremiumButton","template":"<div class=\"row\"><div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" ${argsToTemplate(args)} variant=\"primary\" label=\"Primary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" ${argsToTemplate(args)} variant=\"secondary\" label=\"Secondary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" ${argsToTemplate(args)} variant=\"ghost\" label=\"Ghost\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" ${argsToTemplate(args)} iconName=\"Test\" variant=\"destructive\" label=\"Destructive\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" ${argsToTemplate(args)} variant=\"icon-button\" [justIcon]=\"true\" iconName=\"Book\" tooltip=\"Premium Icon Button\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" ${argsToTemplate(args)} variant=\"icon-button\" [justIcon]=\"true\" [disabled]=\"true\" iconName=\"Book\" tooltip=\"Premium Icon Button Disabled\"></ui-button></div>","props":{"isPremium":"true"}},{"name":"BadgeButton","template":"<div class=\"row\"><div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" [buttonBadgeConfig]='{\"badgeType\": \"primary\", \"badgeLabel\": \"Primary\"}' variant=\"primary\" label=\"Primary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" [buttonBadgeConfig]='{\"badgeType\": \"primary\", \"badgeLabel\": \"Primary\"}' variant=\"secondary\" label=\"Secondary\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" [buttonBadgeConfig]='{\"badgeType\": \"notification\", \"badgeNotificationAmount\": \"9\"}' variant=\"ghost\" label=\"Ghost\"></ui-button></div>","props":{"buttonBadgeConfig":"{","badgeType":"'primary'","badgeLabel":"'Primary'","badgeNotificationAmount":"0"}},{"name":"LongTruncatedLabel","template":"<div class=\"row\">\n <div class=\"colum\">\n <ui-button\n applicationTheme=\"${_theme}\"\n [buttonBadgeConfig]='{\"badgeLabel\": \"Primary\"}'\n variant=\"primary\"\n ${argsToTemplate(args)}\n >\n\n </ui-button>\n </div>\n </div>","props":{"label":"'Some very long label that should be multilined and truncated to test the tooltip'"}},{"name":"LinkedIn","template":"<h4>Default</h4>\n <div class=\"row\">\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"linkedin\" size=\"small\" iconName=\"Linkedin-brand\" iconPosition=\"left\" label=\"Add to profile\"></ui-button></div>\n </div>\n <h4>Disabled</h4>\n <div class=\"row\">\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"linkedin\" size=\"small\" iconName=\"Linkedin-brand\" iconPosition=\"left\" [disabled]=\"true\" label=\"Add to profile\"></ui-button></div>\n </div>\n <h4>Big size</h4>\n <div class=\"row\">\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"linkedin\" size=\"big\" iconName=\"Linkedin-brand\" iconPosition=\"left\" label=\"Add to profile\"></ui-button></div>\n <div class=\"colum\"><ui-button applicationTheme=\"${_theme}\" variant=\"linkedin\" size=\"big\" iconName=\"Linkedin-brand\" iconPosition=\"left\" [disabled]=\"true\" label=\"Add to profile\"></ui-button></div>\n </div>","props":{"label":"'Some very long label that should be multilined for buttons that has long width'"}},{"name":"LongLabelMultilined","template":"<div class=\"row\">\n <div class=\"colum\">\n <ui-button\n applicationTheme=\"${_theme}\"\n [buttonBadgeConfig]='{\"badgeLabel\": \"Primary\"}'\n variant=\"primary\"\n ${argsToTemplate(args)}\n >\n\n </ui-button>\n </div>\n </div>","props":{"label":"'Some very long label that should be multilined for buttons that has long width'"}}],"documentation":"## How to use\n\nTo use the Button component, you need to import the `ButtonComponentModule` in your module:\n\n```typescript\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n ButtonComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-button label=\"Button Label\" applicationTheme=\"light\"></ui-button>\n```","template":"<div\n #tooltipElement\n class=\"tooltip\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n></div>\n<div\n class=\"button-wrapper\"\n [ngClass]=\"{\n 'full-width': fullWidth,\n 'rounded-icon': applicationTheme !== 'classic' && icon && !label,\n link: !isButtonLink,\n }\"\n>\n <div\n class=\"button-container\"\n [ngClass]=\"{\n disabled: disabled,\n 'button-scale': buttonState === 'pressed' && applicationTheme !== 'classic' && !disabledScaleOnClick,\n }\"\n >\n <span ngIf=\"isPremium && typeIncluded\" class=\"right-top\">\n <img [attr.src]=\"'/images/premium.svg'\" [alt]=\"'premium-icon'\" />\n </span>\n <ui-badge\n id=\"badge\"\n ngIf=\"buttonBadgeConfig?.badgeType\"\n [rebrandColor]=\"buttonBadgeConfig?.rebrandColor ?? 'brand'\"\n [variant]=\"buttonBadgeConfig!.badgeType!\"\n [label]=\"buttonBadgeConfig?.badgeLabel ?? ''\"\n [notificationsAmount]=\"buttonBadgeConfig?.badgeNotificationAmount ?? 0\"\n class=\"right-top\"\n [ngClass]=\"[\n buttonBadgeConfig?.badgeType === 'primary' ? 'badge-primary' : '',\n buttonBadgeConfig?.badgeType === 'notification' ? 'badge-notification' : '',\n variant,\n ]\"\n ></ui-badge>\n <button\n [style]=\"'--icon-button-size:' + iconButtonSize + 'px'\"\n [ngClass]=\"classCss\"\n [ngStyle]=\"styleCss\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick($event)\"\n (mouseleave)=\"buttonHover($event)\"\n (mouseenter)=\"buttonHover($event)\"\n (mousedown)=\"onPressed($event)\"\n (mouseup)=\"onPressed($event)\"\n (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\"\n ngIf=\"isButtonLink\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledbyId\"\n [attr.aria-describedby]=\"'describedby'\"\n [attr.aria-disabled]=\"disabled\"\n [type]=\"type\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n [matTooltipPosition]=\"tooltipPosition\"\n #buttonElement\n [attr.role]=\"role\"\n mat-flat-button\n >\n <span id=\"describedby\" [style.display]=\"'none'\">\n {{ isPremium ? label + ' ' + ('BUTTON.PREMIUM_FEATURE' \| uiTranslate \| async) : ariaDescribedby }}\n </span>\n <span [id]=\"ariaLabelledbyId\" [style.display]=\"'none'\">\n {{ ariaLabelledby }}\n </span>\n <ng-container ngIf=\"showSpinner; else icons\">\n <span class=\"spinner-wrapper\">\n <mat-spinner class=\"position-spinner\" aria-label=\"loading\" mode=\"indeterminate\" diameter=\"24\"></mat-spinner>\n </span>\n </ng-container>\n <ng-template #icons>\n <span class=\"icon-only-wrapper\" ngIf=\"justIcon && !!icon\">\n <span class=\"icon only\" role=\"label\">\n <ui-icon\n [color]=\"variant === 'ghost-ai' ? 'ai' : 'inherit'\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"icon\"\n [filled]=\"isFilledIcon \|\| iconFilled\"\n [useFullIconName]=\"variant === 'primary' \|\| variant === 'secondary' \|\| variant === 'linkedin'\"\n [size]=\"size === 'small' ? '16' : '24'\"\n ></ui-icon>\n </span>\n </span>\n\n <span class=\"icon-label-wrapper\" [ngClass]=\"{ 'center-text': iconName === '' }\" ngIf=\"!justIcon\">\n <span class=\"icon\" ngIf=\"iconPosition === 'left' && !!iconName\" aria-hidden=\"true\">\n <ui-icon\n [color]=\"variant === 'ghost-ai' ? 'ai' : 'inherit'\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"icon\"\n [filled]=\"isFilledIcon \|\| iconFilled\"\n [useFullIconName]=\"variant === 'primary' \|\| variant === 'secondary' \|\| variant === 'linkedin'\"\n [size]=\"size === 'small' ? '16' : '24'\"\n ></ui-icon>\n </span>\n <span\n ngIf=\"isLabel\"\n class=\"label\"\n id=\"label\"\n uiEllipseText\n [isMultiline]=\"true\"\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n >\n {{ label }}\n </span>\n <span class=\"icon\" ngIf=\"iconPosition === 'right' && !!icon\" aria-hidden=\"true\"\n ><ui-icon\n [color]=\"variant === 'ghost-ai' ? 'ai' : 'inherit'\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"icon\"\n [filled]=\"isFilledIcon \|\| iconFilled\"\n [size]=\"size === 'small' ? '16' : '24'\"\n [useFullIconName]=\"variant === 'primary' \|\| variant === 'secondary' \|\| variant === 'linkedin'\"\n ></ui-icon\n ></span>\n </span>\n </ng-template>\n </button>\n <a\n #buttonElement\n [ngClass]=\"classCss\"\n [ngStyle]=\"styleCss\"\n [disabled]=\"disabled\"\n (click)=\"buttonClick($event)\"\n (mouseenter)=\"buttonHover($event)\"\n (mouseleave)=\"buttonHover($event)\"\n (mousedown)=\"onPressed($event)\"\n (mouseup)=\"onPressed($event)\"\n (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\"\n [disableRipple]=\"true\"\n ngIf=\"!isButtonLink\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledbyId\"\n [attr.aria-describedby]=\"'describedby-link'\"\n [attr.aria-disabled]=\"disabled\"\n [matTooltip]=\"tooltip ? tooltip : labelEllipsis ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n role=\"link\"\n [href]=\"url\"\n [target]=\"urlTarget\"\n mat-flat-button\n >\n <span id=\"describedby-link\" [style.display]=\"'none'\">\n {{ ariaDescribedby }}\n </span>\n <span [id]=\"ariaLabelledbyId\" [style.display]=\"'none'\">\n {{ ariaLabelledby }}\n </span>\n <span class=\"icon-label-wrapper\">\n {{ label }}\n </span>\n </a>\n </div>\n</div>\n","queryGuide":{"roles":["label","link","progressbar"],"ariaAttributes":["aria-label","aria-hidden","aria-required","aria-labelledby","aria-describedby","aria-disabled"],"dataTestIds":[],"materialComponents":["mat-spinner"],"childUIComponents":["ui-badge","ui-icon"],"suggestedQueries":["screen.getByRole('label')","screen.getByRole('link')","screen.getByRole('progressbar')","screen.getByLabelText('label text')"]},"filePath":"components/button/button.component.ts","supportsTheme":true,"lastModified":1775743558135.8364},"card":{"name":"CardComponent","selector":"ui-card","category":"card","description":"To use the Card component, you need to import the `CardComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/card","moduleName":"CardComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"size","type":"CardSize","defaultValue":"'medium'","required":false,"alias":null,"transform":null,"description":"Card size. Defaults \"medium\".","isSignal":false},{"name":"sizeVariant","type":"CardSizeVariant","defaultValue":"'regular'","required":false,"alias":null,"transform":null,"description":"Card size variant. Defaults \"default\".","isSignal":false},{"name":"variant","type":"CardVariant","defaultValue":"'default'","required":false,"alias":null,"transform":null,"description":"Card variants. Defaults \"default\".","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"errorsSize","type":"unknown","defaultValue":"'default'","required":false,"alias":null,"transform":null,"description":"Errors size","isSignal":false},{"name":"selected","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Marks card as selected","isSignal":false},{"name":"allowSelect","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Marks card as readonly. Defaults \"false\".","isSignal":false},{"name":"allowFocus","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Marks card as focusable. Defaults \"true\".","isSignal":false},{"name":"errors","type":"string[]","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Show errors below card.","isSignal":false}],"outputs":[{"name":"cardSelected","eventType":"boolean","alias":null,"description":"Emits when card is being selected","isSignal":false}],"module":{"name":"CardComponentModule","imports":["CommonModule","IconComponentModule"],"exports":["CardComponent"],"declarations":["CardComponent"],"providers":[]},"types":{"typeAliases":[{"name":"CardSize","value":"'small' \| 'medium' \| 'large'"},{"name":"CardSizeVariant","value":"'regular' \| 'condensed'"},{"name":"CardVariant","value":"\| 'default'\n \| 'shadow'\n \| 'state'\n \| 'error'\n \| 'educative'\n \| 'premium'\n \| 'ai'\n \| 'actionDriver'\n \| 'neutral'\n \| 'neutral-state'"}],"interfaces":[],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Card component, you need to import the `CardComponentModule` in your module:\n\n```typescript\nimport { CardComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n CardComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-card applicationTheme=\"light\" variant=\"default\">\n <div>Content goes here</div>\n</ui-card>\n```","template":"<div\n class=\"card-container\"\n (keydown.enter)=\"selectCard()\"\n (keydown.space)=\"selectCard()\"\n (click)=\"selectCard()\"\n [ngClass]=\"[classes, isSelected ? 'selected' : '']\"\n [attr.theme]=\"applicationTheme\"\n [attr.tabindex]=\"allowFocus ? 0 : null\"\n>\n <ng-content></ng-content>\n</div>\n@if (safeErrors?.length) {\n <div class=\"errors\" [class.errors-small]=\"errorsSize === 'small'\">\n @for (error of safeErrors; track error) {\n <div class=\"error\">\n <ui-icon [size]=\"errorIconSize\" [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n }\n </div>\n}\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon"],"suggestedQueries":[]},"filePath":"components/card/card.component.ts","supportsTheme":true,"lastModified":1775743558136.8364},"checkbox":{"name":"CheckboxComponent","selector":"ui-checkbox","category":"forms","description":"To use the Checkbox component, you need to import the `CheckboxComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/checkbox","moduleName":"CheckboxComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Determines whether the checkbox is disabled.\nDefault: false.","isSignal":false},{"name":"checked","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Determines whether the checkbox is checked.\nDefault: false.","isSignal":false},{"name":"indeterminate","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Determines whether the checkbox is indeterminate.\nIt can be used to represent a checkbox with three states, e.g. a checkbox that represents a nested list of checkable items.\nDefault: false.","isSignal":false},{"name":"companyColor","type":"string \| null","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Determines whether the checkbox color.\nDefault: Test Gorilla primary color.","isSignal":false},{"name":"name","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Name value will be applied to the input element if present.","isSignal":false},{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Text content will be applied to the input element if present.","isSignal":false},{"name":"multiple","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Determines whether the checkbox is a multiple choice cell.\nDefault: false","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"ariaLabel","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"A string representing the ARIA label for accessibility.\nThis label is used to provide an accessible name for the input element.","isSignal":false},{"name":"ariaRequired","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"hasError","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Defines if checkbox has error","isSignal":false},{"name":"hideBuiltInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Hide in-build errors for Reactive Forms","isSignal":false},{"name":"hideLabelInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Hide label in errors","isSignal":false},{"name":"ariaLabelledby","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"ariaDescribedby","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"truncateText","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Truncate text if it is too long","isSignal":false},{"name":"alignment","type":"Alignment","defaultValue":"'center'","required":false,"alias":null,"transform":null,"description":"Text alignment","isSignal":false},{"name":"tabIndex","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"Sets the tab index for the checkbox component.\nThis determines the order in which elements receive focus when the user navigates through them using the Tab key.\nDefault value is 0.","isSignal":false}],"outputs":[{"name":"changed","eventType":"boolean","alias":null,"description":"Event emitted when the checkbox's checked value changes.","isSignal":false}],"module":{"name":"CheckboxComponentModule","imports":["CommonModule","MatCheckboxModule","FormsModule","ReactiveFormsModule","MatInputModule","IconComponentModule","UiTranslatePipe","ValidationErrorModule","HasValidationErrorPipe","EllipseTextDirective","MatTooltipModule","FocusVisibleDirective"],"exports":["CheckboxComponent"],"declarations":["CheckboxComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[{"name":"Default","template":"<ui-checkbox applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - unselected\" [checked]=\"false\"></ui-checkbox>\n <br>\n <ui-checkbox applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - selected\" [checked]=\"true\"></ui-checkbox>","props":{"disabled":"false","checked":"false","indeterminate":"false"}},{"name":"Disabled","template":"<ui-checkbox applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - unselected\" [checked]=\"false\"></ui-checkbox>\n <br>\n <ui-checkbox applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - selected\" [checked]=\"true\"></ui-checkbox>","props":{"disabled":"true"}},{"name":"Selected","template":"<ui-checkbox applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - unselected\" [checked]=\"false\"></ui-checkbox>\n <br>\n <ui-checkbox applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - selected\" [checked]=\"true\"></ui-checkbox>","props":{"checked":"true"}},{"name":"Indeterminate","template":"<ui-checkbox applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - unselected\" [checked]=\"false\"></ui-checkbox>\n <br>\n <ui-checkbox applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - selected\" [checked]=\"true\"></ui-checkbox>","props":{"indeterminate":"true"}},{"name":"WithLabel","template":"<ui-checkbox applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - unselected\" [checked]=\"false\"></ui-checkbox>\n <br>\n <ui-checkbox applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - selected\" [checked]=\"true\"></ui-checkbox>","props":{"checked":"true","label":"'Some text.'"}},{"name":"MultipleChoice","template":"<ui-checkbox applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - unselected\" [checked]=\"false\"></ui-checkbox>\n <br>\n <ui-checkbox applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - selected\" [checked]=\"true\"></ui-checkbox>","props":{}},{"name":"WithErrorMultiple","template":"<ui-checkbox [hasError]=\"true\" applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - unselected\" [checked]=\"false\"></ui-checkbox>\n <ui-checkbox [hasError]=\"true\" applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - unselected\" [checked]=\"false\"></ui-checkbox>","props":{}},{"name":"WithErrorSingle","template":"<ui-checkbox [hasError]=\"true\" applicationTheme=\"${_theme}\" [multiple]=\"false\" label=\"Single selection - unselected\" [checked]=\"false\"></ui-checkbox>\n <ui-checkbox [hasError]=\"true\" applicationTheme=\"${_theme}\" [multiple]=\"false\" label=\"Single selection - unselected\" [checked]=\"false\"></ui-checkbox>","props":{}}],"documentation":"## How to use\n\nTo use the Checkbox component, you need to import the `CheckboxComponentModule` in your module:\n\n```typescript\nimport { CheckboxComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n CheckboxComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-checkbox\n label=\"Accept terms and conditions\"\n [checked]=\"isAccepted\"\n [disabled]=\"isDisabled\"\n [multiple]=\"false\"\n applicationTheme=\"light\"\n (checkedChange)=\"onCheckboxChange($event)\">\n</ui-checkbox>\n```\n\nYou can also use it with reactive forms:\n\n```html\n<ui-checkbox\n formControlName=\"acceptTerms\"\n label=\"Accept terms and conditions\">\n</ui-checkbox>\n```\n\nThe checkbox component supports standard, multiple choice, and indeterminate states.","template":"<div\n #checkboxContainer\n tabindex=\"0\"\n [class]=\"multiple ? 'checkbox-container' : 'checkbox'\"\n [ngClass]=\"classMultiple\"\n [attr.alignment]=\"alignment\"\n [attr.truncate-text]=\"truncateText\"\n [attr.theme]=\"applicationTheme\"\n [attr.hasError]=\"hasError\"\n (keydown.enter)=\"toggleChecked(); checkboxContainer.focus()\"\n (keydown.space)=\"toggleChecked(); checkboxContainer.focus()\"\n>\n <mat-checkbox\n #checkbox\n (mouseleave)=\"checkbox.disableRipple = true\"\n (mouseenter)=\"checkbox.disableRipple = false\"\n [indeterminate]=\"indeterminate\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [tabIndex]=\"tabIndex\"\n [name]=\"name\"\n [ngClass]=\"[checkbox.disableRipple ? 'disable-ripple' : '', origin ? 'cdk-' + origin + '-focused' : '']\"\n [aria-label]=\"ariaLabel\"\n [aria-labelledby]=\"ariaLabelledby ? ariaLabelledby : label\"\n [aria-describedby]=\"ariaDescribedby \|\| 'ariaDescribedby'\"\n (click)=\"toggleChecked()\"\n (keydown.enter)=\"$event.preventDefault()\"\n (keydown.space)=\"$event.preventDefault()\"\n class=\"checkbox\"\n >\n @if (label) {\n <span\n #tooltip=\"matTooltip\"\n class=\"label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n [matTooltip]=\"showTooltip && truncateText ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >\n {{ label }}\n </span>\n }\n <ng-content select=\"[checkbox-label]\"></ng-content>\n </mat-checkbox>\n\n <mat-hint class=\"error\" ngIf=\"ngControl?.errors \| hasValidationError\">\n <ui-validation-error\n ngIf=\"ngControl && !hideBuiltInErrors\"\n [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors ? null : label\"\n ></ui-validation-error>\n </mat-hint>\n</div>\n","queryGuide":{"roles":["checkbox"],"ariaAttributes":[],"dataTestIds":[],"materialComponents":["mat-checkbox","mat-hint"],"childUIComponents":["ui-validation-error"],"suggestedQueries":["screen.getByRole('checkbox')"]},"filePath":"components/checkbox/checkbox.component.ts","supportsTheme":true,"lastModified":1775743558136.8364},"checklist":{"name":"ChecklistComponent","selector":"ui-checklist","category":"checklist","description":"To use the Checklist component, you need to import the component in your module:","importPath":"@testgorilla/tgo-ui/components/checklist","moduleName":"ChecklistComponentModule","standalone":true,"changeDetection":"OnPush","inputs":[{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Label for the checklist","isSignal":true},{"name":"description","type":"string \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"Sub title/Description for the checklist","isSignal":true},{"name":"applicationTheme","type":"ApplicationTheme \| undefined","defaultValue":"undefined","required":false,"alias":null,"transform":null,"description":"Application theme","isSignal":true},{"name":"footerButtonLabel","type":"string \| undefined","defaultValue":"undefined","required":false,"alias":null,"transform":null,"description":"Confirm button label","isSignal":true},{"name":"ariaLabel","type":"string \| undefined","defaultValue":"undefined","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":true},{"name":"language","type":"unknown","defaultValue":"LanguageService.defaultLanguage","required":false,"alias":null,"transform":null,"description":"The language to be used","isSignal":true},{"name":"autocheck","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"A boolean property that determines whether the checklist items should be automatically checked.","isSignal":true},{"name":"items","type":"ChecklistItem[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"Items for the checklist","isSignal":true},{"name":"selectedItem","type":"ChecklistItem","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Represents the currently selected item in the checklist.\nThis is an instance of the `ChecklistItem` supports two-way binding.","isSignal":true}],"outputs":[{"name":"footerButtonClicked","eventType":"void","alias":null,"description":"Event emitter that triggers when the footer button is clicked.\nEmits a void event.","isSignal":true},{"name":"completed","eventType":"void","alias":null,"description":"An output event emitter that signifies the completion of a task or process.\nThis event does not carry any payload.","isSignal":true},{"name":"itemsChange","eventType":"ChecklistItem[]","alias":null,"description":"Two-way binding change event for items","isSignal":true},{"name":"selectedItemChange","eventType":"ChecklistItem","alias":null,"description":"Two-way binding change event for selectedItem","isSignal":true}],"module":{"name":"","imports":[],"exports":[],"declarations":[],"providers":[]},"types":{"typeAliases":[],"interfaces":[{"name":"ChecklistItem","properties":[{"name":"label","type":"string","optional":false},{"name":"value","type":"string","optional":false},{"name":"checked","type":"boolean","optional":false},{"name":"description","type":"string","optional":true},{"name":"hasLink","type":"boolean","optional":true},{"name":"disabled","type":"boolean","optional":true},{"name":"reselect","type":"boolean","optional":true}]}],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Checklist component, you need to import the component in your module:\n\n```typescript\nimport { ChecklistComponent } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n ChecklistComponent\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-checklist \n [items]=\"items\"\n label=\"My Checklist\"\n [applicationTheme]=\"theme\"\n footerButtonLabel=\"Continue\"\n (footerButtonClicked)=\"onButtonClick()\"\n (completed)=\"onCompleted()\">\n</ui-checklist>\n```","template":"@if (label()) {\n <h4 [attr.aria-label]=\"ariaLabel() ?? label()\">{{ label() }}</h4>\n}\n@if (description()) {\n <div aria-label=\"description\" class=\"description\" [innerHTML]=\"description()\"></div>\n}\n\n<ui-progress-bar [showPercentage]=\"true\" [progress]=\"progress()\"></ui-progress-bar>\n\n<div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ 'COMMON.PROGRESS' \| uiTranslate: { progress: progress() } \| async }}\n</div>\n\n<ui-divider size=\"small\" companyColor=\"#d3d3d3\"> </ui-divider>\n\n<div class=\"checklist-container\" data-testid=\"checklist-container\">\n @for (item of items(); track item.value + item.checked; let i = $index) {\n <div\n data-testid=\"checklist-item\"\n class=\"checklist-item\"\n [class.disabled]=\"item.disabled\"\n [class.checked]=\"item.checked\"\n [class.active]=\"item === selectedItem() && !autocheck()\"\n [attr.aria-labelledby]=\"'item-' + item.value\"\n [tabindex]=\"item?.disabled ? -1 : 0\"\n (click)=\"selectItem(item)\"\n (keydown)=\"keydownHandler($event, item)\"\n >\n <div class=\"content\">\n <ui-icon\n [name]=\"item.checked ? 'Check-in-line' : 'Circle-in-line'\"\n [filled]=\"item.checked\"\n class=\"checked\"\n [applicationTheme]=\"theme()\"\n [size]=\"'16'\"\n [color]=\"item.checked ? 'white' : item.disabled ? '#919191' : 'dark'\"\n ></ui-icon>\n <div class=\"label-and-description\">\n <span [id]=\"'item-' + item.value\" class=\"label\">{{ item.label }}</span>\n @if (item.description) {\n <span class=\"item-description\">{{ item.description }}</span>\n }\n </div>\n </div>\n\n @if (item.hasLink && !item.disabled) {\n <div class=\"navigation\">\n <ui-icon\n [tabindex]=\"-1\"\n class=\"link\"\n [name]=\"'Arrow-chevron-right-filled'\"\n [applicationTheme]=\"theme()\"\n [size]=\"'24'\"\n color=\"rebrand-black\"\n ></ui-icon>\n </div>\n }\n </div>\n }\n</div>\n@if (footerButtonLabel()) {\n <div class=\"action-btn\">\n <ui-button\n data-testid=\"checklist-footer-button\"\n [label]=\"footerButtonLabel()!\"\n [variant]=\"'link'\"\n [companyColor]=\"'#000'\"\n (buttonClickEvent)=\"footerButtonClick($event)\"\n ></ui-button>\n </div>\n}\n","queryGuide":{"roles":[],"ariaAttributes":["aria-label","aria-live","aria-labelledby"],"dataTestIds":["checklist-container","checklist-item","checklist-footer-button"],"materialComponents":[],"childUIComponents":["ui-progress-bar","ui-divider","ui-icon","ui-button"],"suggestedQueries":["screen.getByLabelText('label text')","screen.getByTestId('checklist-container')","screen.getByTestId('checklist-item')","screen.getByTestId('checklist-footer-button')"]},"filePath":"components/checklist/checklist.component.ts","supportsTheme":true,"lastModified":1775743558137.8364},"datepicker":{"name":"DatepickerComponent","selector":"ui-datepicker","category":"forms","description":"To use the Datepicker component, you need to import the `DatepickerComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/datepicker","moduleName":"DatepickerComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Form field label","isSignal":false},{"name":"fieldName","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input name attribute","isSignal":false},{"name":"placeholder","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Input placeholder","isSignal":false},{"name":"id","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Input id","isSignal":false},{"name":"value","type":"Array<Date \| null> \| Date","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input value","isSignal":false},{"name":"isRange","type":"boolean","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Determines if input is date range","isSignal":false},{"name":"setSingleDateRangeOnBlur","type":"boolean","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Determines if on blur of calendar and no end date is selected, set the end date as the start date","isSignal":false},{"name":"showInnerErrors","type":"boolean","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Determines if inner errors should be shown","isSignal":false},{"name":"innerErrorsMessage","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Determines inner errors message","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Determines if input is disabled","isSignal":false},{"name":"required","type":"boolean","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input is required or not","isSignal":false},{"name":"hintMessage","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Hint text","isSignal":false},{"name":"updateOnBlur","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Input is update only on blur","isSignal":false},{"name":"showBottomContent","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Show reserved content below form field","isSignal":false},{"name":"fullWidth","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Set full width DatepickerComponent","isSignal":false},{"name":"minDate","type":"Date \| undefined","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Set min date for Datepicker","isSignal":false},{"name":"maxDate","type":"Date \| undefined","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Set max date for Datepicker","isSignal":false},{"name":"monthPicker","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Show and pick date without day","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"hideBuiltInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Hide in-build errors for Reactive Forms","isSignal":false},{"name":"hideLabelInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Hide label in errors","isSignal":false},{"name":"preventUserInput","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Prevent user input","isSignal":false},{"name":"companyColor","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Color of the option hover.\nDefaults to Test Gorilla primary color.","isSignal":false},{"name":"errors","type":"string[]","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input field errors","isSignal":false},{"name":"browserTimezone","type":"boolean","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Use browser timezone","isSignal":false}],"outputs":[{"name":"changed","eventType":"Date \| Date[]","alias":null,"description":"Event emitted when the value is change - when used outside of form","isSignal":false}],"module":{"name":"DatepickerComponentModule","imports":["CommonModule","MatFormFieldModule","MatInputModule","IconComponentModule","FormsModule","ReactiveFormsModule","MatDatepickerModule","MatNativeDateModule","UiTranslatePipe","NoDateFormatDirective","HasValidationErrorPipe","ValidationErrorModule"],"exports":["DatepickerComponent"],"declarations":["DatepickerComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[{"name":"Basic","template":"<ui-datepicker\n data-testid=\"datepicker\"\n ${argsToTemplate(args)}\n applicationTheme=\"${_theme}\"\n (changed)=\"changed($event)\"\n ></ui-datepicker>","props":{"label":"'Date'"}},{"name":"WithValue","template":"<ui-datepicker\n data-testid=\"datepicker\"\n ${argsToTemplate(args)}\n applicationTheme=\"${_theme}\"\n (changed)=\"changed($event)\"\n ></ui-datepicker>","props":{"label":"'Date'","value":"new Date(2025, 3, 15)"}},{"name":"WithRange","template":"<ui-datepicker\n data-testid=\"datepicker\"\n ${argsToTemplate(args)}\n applicationTheme=\"${_theme}\"\n (changed)=\"changed($event)\"\n ></ui-datepicker>","props":{"label":"'Date'","isRange":"true","browserTimezone":"true"}},{"name":"WithSingleDateRangeOnBlur","template":"<ui-datepicker\n data-testid=\"datepicker\"\n ${argsToTemplate(args)}\n applicationTheme=\"${_theme}\"\n (changed)=\"changed($event)\"\n ></ui-datepicker>","props":{"label":"'Date'","isRange":"true","setSingleDateRangeOnBlur":"true","browserTimezone":"true"}},{"name":"WithPlaceholder","template":"<ui-datepicker\n data-testid=\"datepicker\"\n ${argsToTemplate(args)}\n applicationTheme=\"${_theme}\"\n (changed)=\"changed($event)\"\n ></ui-datepicker>","props":{"label":"'Date'","placeholder":"'DD/MM/YYYY'"}},{"name":"WithErrors","template":"<ui-datepicker \n ${argsToTemplate(args)}\n applicationTheme=\"${_theme}\"\n (changed)=\"changed($event)\"\n ></ui-datepicker>","props":{"errors":"['Lorem ipsum dolor sit amet, consectetur adipiscing elit']"}},{"name":"WithDisable","template":"<ui-datepicker \n ${argsToTemplate(args)}\n applicationTheme=\"${_theme}\"\n (changed)=\"changed($event)\"\n ></ui-datepicker>","props":{"disabled":"true"}}],"documentation":"## How to use\n\nTo use the Datepicker component, you need to import the `DatepickerComponentModule` in your module:\n\n```typescript\nimport { DatepickerComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n DatepickerComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-datepicker\n label=\"Select Date\"\n [value]=\"selectedDate\"\n [isRange]=\"false\"\n [required]=\"true\"\n applicationTheme=\"light\"\n (changed)=\"onDateChanged($event)\">\n</ui-datepicker>\n```\n\nFor date ranges:\n\n```html\n<ui-datepicker\n label=\"Date Range\"\n [isRange]=\"true\"\n applicationTheme=\"light\"\n (changed)=\"onRangeChanged($event)\">\n</ui-datepicker>\n```\n\nThe datepicker component supports both single date selection and date ranges.","template":"@if (monthPicker) {\n <mat-form-field\n appNoDateFormat\n appearance=\"outline\"\n [color]=\"errorsLength \|\| (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n >\n <mat-label ngIf=\"label\">\n <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n </mat-label>\n\n <input\n matInput\n [id]=\"id!\"\n (blur)=\"onTouch()\"\n [placeholder]=\"placeholder!\"\n [matDatepicker]=\"dp\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [name]=\"fieldName!\"\n [min]=\"minDate\"\n [max]=\"maxDate\"\n [readonly]=\"preventUserInput\"\n (change)=\"onInput($event)\"\n (dateChange)=\"onValueChange($event.value)\"\n />\n <mat-datepicker-toggle matIconSuffix [for]=\"dp\">\n <ui-icon\n matDatepickerToggleIcon\n [applicationTheme]=\"applicationTheme\"\n name=\"Calendar\"\n size=\"24\"\n color=\"inherit\"\n ></ui-icon>\n </mat-datepicker-toggle>\n <mat-datepicker\n panelClass=\"month-picker\"\n #dp\n startView=\"multi-year\"\n (monthSelected)=\"setMonthAndYear($event, dp)\"\n ></mat-datepicker>\n\n <mat-hint class=\"info\" ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors \| hasValidationError))\"\n >{{ hint }}\n </mat-hint>\n <mat-hint class=\"error\" ngIf=\"errorsLength \|\| (ngControl?.touched && (ngControl?.errors \| hasValidationError))\">\n <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n </mat-hint>\n </mat-form-field>\n} @else {\n @if (isRange) {\n <mat-form-field\n appearance=\"outline\"\n [color]=\"errorsLength \|\| (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n class=\"range-datepicker\"\n >\n <mat-label ngIf=\"label\">\n <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n </mat-label>\n\n <mat-date-range-input [formGroup]=\"range\" [rangePicker]=\"rangePicker\" [min]=\"minDate\" [max]=\"maxDate\">\n <input\n matStartDate\n formControlName=\"start\"\n [placeholder]=\"translationContext + 'START_DATE' \| uiTranslate \| async\"\n (dateChange)=\"dateRangeChange()\"\n (blur)=\"setSingleDateRangeOnBlur && fillSingleDateRange(true)\"\n />\n <input\n matEndDate\n formControlName=\"end\"\n [placeholder]=\"translationContext + 'END_DATE' \| uiTranslate \| async\"\n (dateChange)=\"dateRangeChange()\"\n (blur)=\"setSingleDateRangeOnBlur && fillSingleDateRange(false)\"\n />\n </mat-date-range-input>\n <mat-datepicker-toggle matIconSuffix [for]=\"rangePicker\">\n <ui-icon\n matDatepickerToggleIcon\n [applicationTheme]=\"applicationTheme\"\n name=\"Calendar\"\n size=\"24\"\n color=\"inherit\"\n ></ui-icon>\n </mat-datepicker-toggle>\n <mat-date-range-picker #rangePicker (closed)=\"handleCloseRangePicker()\"></mat-date-range-picker>\n\n <mat-hint\n class=\"info\"\n ngIf=\"\n hint &&\n !_errors &&\n !(ngControl?.touched && (ngControl?.errors \| hasValidationError)) &&\n !(range?.invalid && showInnerErrors)\n \"\n >{{ hint }}\n </mat-hint>\n <mat-hint\n class=\"error\"\n ngIf=\"\n errorsLength \|\|\n (ngControl?.touched && (ngControl?.errors \| hasValidationError)) \|\|\n (range?.invalid && showInnerErrors)\n \"\n >\n <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n </mat-hint>\n </mat-form-field>\n } @else {\n <mat-form-field\n appearance=\"outline\"\n [color]=\"errorsLength \|\| (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n >\n <mat-label ngIf=\"label\">\n <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n </mat-label>\n <input\n matInput\n [matDatepicker]=\"picker\"\n (blur)=\"onTouch()\"\n (dateChange)=\"onValueChange($event.value)\"\n [id]=\"id!\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [name]=\"fieldName!\"\n [readonly]=\"preventUserInput\"\n [min]=\"minDate\"\n [max]=\"maxDate\"\n />\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n <ui-icon\n matDatepickerToggleIcon\n [applicationTheme]=\"applicationTheme\"\n name=\"Calendar\"\n size=\"24\"\n color=\"inherit\"\n ></ui-icon>\n </mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n\n <mat-hint\n class=\"info\"\n ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors \| hasValidationError))\"\n >{{ hint }}\n </mat-hint>\n <mat-hint class=\"error\" ngIf=\"errorsLength \|\| (ngControl?.touched && (ngControl?.errors \| hasValidationError))\">\n <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n </mat-hint>\n </mat-form-field>\n }\n}\n\n<ng-template #labelTpl>{{ label }}<span ngIf=\"required\"> </span></ng-template>\n<ng-template #hintsTpl>\n @if (errorsLength) {\n <div class=\"errors\" ngFor=\"let error of _errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" name=\"Error\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n }\n @if (ngControl && !hideBuiltInErrors) {\n <ui-validation-error [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n }\n @if (showInnerErrors) {\n @if (isRange) {\n <div class=\"errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" name=\"Error\"></ui-icon>\n <span [innerHTML]=\"innerErrorsMessage\"></span>\n </div>\n }\n }\n</ng-template>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":["mat-form-field","mat-label","mat-datepicker-toggle","mat-datepicker","mat-hint","mat-date-range-input","mat-date-range-picker"],"childUIComponents":["ui-icon","ui-validation-error"],"suggestedQueries":[]},"filePath":"components/datepicker/datepicker.component.ts","supportsTheme":true,"lastModified":1775743558145.8367},"dialog":{"name":"DialogComponent","selector":"ui-dialog","category":"dialog","description":"To use the Dialog component, you need to import the `DialogComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/dialog","moduleName":"DialogComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"title","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Dialog title","isSignal":false},{"name":"showCloseButton","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Show close button","isSignal":false},{"name":"canCloseFn","type":"() => boolean","defaultValue":"() => true","required":false,"alias":null,"transform":null,"description":"Fuction called before dialgo is closed","isSignal":false},{"name":"secondaryButtonLabel","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Secondary button label","isSignal":false},{"name":"footerMessage","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Footer dialog message","isSignal":false},{"name":"primaryButtonLabel","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Primary button label","isSignal":false},{"name":"primaryButtonIconName","type":"IconName \| ''","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Primary button icon name","isSignal":false},{"name":"secondaryButtonType","type":"ButtonColor","defaultValue":"'ghost'","required":false,"alias":null,"transform":null,"description":"Secondary button type","isSignal":false},{"name":"primaryButtonType","type":"ButtonColor","defaultValue":"'primary'","required":false,"alias":null,"transform":null,"description":"Primary button type","isSignal":false},{"name":"primaryButtonDataTestId","type":"string \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"Primary button test id","isSignal":false},{"name":"secondaryButtonDataTestId","type":"string \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"Secondary button test id","isSignal":false},{"name":"companyColor","type":"string \| null","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Color of the dialog.\nDefaults to Test Gorilla primary color.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"disablePrimaryButton","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Disable primary button","isSignal":false},{"name":"disableClose","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Disable close button","isSignal":false},{"name":"shouldDisableButtons","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Disable button when canCloseFn is used","isSignal":false},{"name":"ariaLabelledby","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"ariaDescribedby","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"keyboardOpen","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Defines how modal was opened (with keyboard or not)","isSignal":false},{"name":"primaryButtonIconPosition","type":"ButtonIconPosition","defaultValue":"'left'","required":false,"alias":null,"transform":null,"description":"","isSignal":true}],"outputs":[{"name":"closeEvent","eventType":"Event","alias":null,"description":"","isSignal":false},{"name":"secondaryButtonClickEvent","eventType":"Event","alias":null,"description":"","isSignal":false},{"name":"primaryButtonClickEvent","eventType":"Event","alias":null,"description":"","isSignal":false}],"module":{"name":"DialogComponentModule","imports":["CommonModule","MatDialogModule","ButtonComponentModule","UiTranslatePipe"],"exports":["DialogComponent"],"declarations":["DialogComponent"],"providers":["{ provide: MAT_DIALOG_DATA, useValue: {} }","{ provide: MatDialogRef, useValue: {} }","DialogService"]},"types":{"typeAliases":[],"interfaces":[{"name":"DialogConfig","properties":[{"name":"applicationTheme","type":"ApplicationTheme","optional":true},{"name":"size","type":"DialogSize","optional":true},{"name":"panelClass","type":"string","optional":true},{"name":"extraData","type":"T","optional":true},{"name":"backdropClass","type":"string","optional":true},{"name":"keyboardOpen","type":"boolean","optional":true},{"name":"config","type":"MatDialogConfig","optional":true}]}],"enums":[]},"examples":[{"name":"Default","template":"<ui-dialog ${argsToTemplate(args)} applicationTheme=\"${_theme}\">\n <div>This is the content of the dialog</div>\n </ui-dialog>","props":{"title":"'Modal title'","primaryButtonLabel":"'Confirm'","secondaryButtonLabel":"'Cancel'"}},{"name":"WithPrimaryButtonIcon","template":"<ui-dialog ${argsToTemplate(args)} applicationTheme=\"${_theme}\">\n <div>This is the content of the dialog</div>\n </ui-dialog>","props":{"title":"'Modal title'","primaryButtonLabel":"'Confirm'","secondaryButtonLabel":"'Cancel'","primaryButtonIconName":"'Info-in-line'","primaryButtonIconPosition":"'right'"}}],"documentation":"## How to use\n\nTo use the Dialog component, you need to import the `DialogComponentModule` in your module:\n\n```typescript\nimport { DialogComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n DialogComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-dialog \n [title]=\"'Your Dialog Title'\" \n [primaryButtonLabel]=\"'Confirm'\"\n [secondaryButtonLabel]=\"'Cancel'\"\n [applicationTheme]=\"'light'\"\n (closeEvent)=\"onClose()\"\n (primaryButtonClickEvent)=\"onConfirm()\"\n (secondaryButtonClickEvent)=\"onCancel()\">\n Your dialog content goes here\n</ui-dialog>\n```","template":"<div class=\"dialog-container\" [attr.theme]=\"applicationTheme\">\n <div\n mat-dialog-title\n class=\"dialog-title\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n >\n <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n\n <!-- Default header content -->\n <ng-container ngIf=\"!hasCustomHeader\">\n <h3 class=\"bold\" id=\"labelledby\">{{ title }}</h3>\n <div ngIf=\"showCloseButton\">\n <ui-button\n #closeButton\n [variant]=\"'icon-button'\"\n [iconName]=\"'Close'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"('COMMON.CLOSE' \| uiTranslate \| async)!\"\n (click)=\"onClose($event)\"\n (buttonClickEvent)=\"dismiss()\"\n id=\"dialog-close-button\"\n ></ui-button>\n </div>\n </ng-container>\n\n <!-- Custom header content projection -->\n <ng-content select=\"[dialogHeader]\"></ng-content>\n </div>\n <mat-dialog-content>\n <ng-content></ng-content>\n </mat-dialog-content>\n <div\n mat-dialog-actions\n ngIf=\"secondaryButtonLabel !== '' \|\| primaryButtonLabel !== ''\"\n [class.dialog-action-w-message]=\"!!footerMessage\"\n >\n @if (footerMessage) {\n <div class=\"actions-footer-message\">{{ footerMessage }}</div>\n }\n <ui-button\n ngIf=\"!!secondaryButtonLabel\"\n [companyColor]=\"companyColor\"\n [variant]=\"secondaryButtonType\"\n [applicationTheme]=\"applicationTheme\"\n [label]=\"secondaryButtonLabel\"\n [attr.data-testid]=\"secondaryButtonDataTestId\"\n (click)=\"onSecondaryButtonClick($event)\"\n ></ui-button>\n <ui-button\n ngIf=\"!!primaryButtonLabel\"\n [iconPosition]=\"primaryButtonIconPosition()\"\n [iconName]=\"primaryButtonIconName ? primaryButtonIconName : undefined\"\n [variant]=\"primaryButtonType\"\n [disabled]=\"disableButtons \|\| disablePrimaryButton\"\n [applicationTheme]=\"applicationTheme\"\n (click)=\"onPrimaryButtonClick($event)\"\n [label]=\"primaryButtonLabel\"\n [companyColor]=\"companyColor\"\n [attr.data-testid]=\"primaryButtonDataTestId\"\n (buttonClickEvent)=\"dismiss()\"\n ></ui-button>\n </div>\n\n <!-- This is announcement for screen reader that dialog was closed-->\n <div aria-live=\"assertive\" role=\"alert\" style=\"position: absolute; left: -9999px\">\n <span ngIf=\"modalClosed\">{{ 'DIALOG.CLOSED' \| uiTranslate \| async }}</span>\n </div>\n</div>\n","queryGuide":{"roles":["alert"],"ariaAttributes":["aria-live","aria-modal","aria-labelledby","aria-describedby"],"dataTestIds":[],"materialComponents":["mat-dialog-content"],"childUIComponents":["ui-button"],"suggestedQueries":["screen.getByRole('alert')"]},"filePath":"components/dialog/dialog.component.ts","supportsTheme":true,"lastModified":1775743558146.8367},"confirm-dialog":{"name":"ConfirmDialogComponent","selector":"ui-confirm-dialog","category":"dialog","description":"ConfirmDialogComponent component","importPath":"@testgorilla/tgo-ui/components/confirm-dialog","moduleName":"ConfirmDialogComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false}],"outputs":[],"module":{"name":"ConfirmDialogComponentModule","imports":["CommonModule","MatDialogModule","ButtonComponentModule","DialogComponentModule","UiTranslatePipe"],"exports":["ConfirmDialogComponent"],"declarations":["ConfirmDialogComponent"],"providers":["{ provide: MAT_DIALOG_DATA, useValue: {} }","{ provide: MatDialogRef, useValue: {} }"]},"types":{"typeAliases":[],"interfaces":[{"name":"ConfirmDialogData","properties":[{"name":"message","type":"string","optional":true},{"name":"confirmButtonText","type":"string","optional":true},{"name":"cancelButtonText","type":"string","optional":true},{"name":"title","type":"string","optional":true},{"name":"color","type":"string","optional":true},{"name":"language","type":"Language","optional":true},{"name":"messageHtml","type":"string","optional":true},{"name":"showCloseButton","type":"boolean","optional":true},{"name":"showSecondaryButton","type":"boolean","optional":true},{"name":"primaryButtonType","type":"ButtonColor","optional":true},{"name":"primaryButtonIconPosition","type":"ButtonIconPosition","optional":true},{"name":"secondaryButtonType","type":"ButtonColor","optional":true},{"name":"primaryButtonIconName","type":"IconName","optional":true},{"name":"primaryButtonDataTestId","type":"string","optional":true},{"name":"secondaryButtonDataTestId","type":"string","optional":true},{"name":"onConfirm","type":"() => void","optional":true}]}],"enums":[]},"examples":[],"documentation":"","template":"<ng-container>\n <ui-dialog\n [title]=\"title ?? ('COMMON.CONFIRM' \| uiTranslate \| async)!\"\n [primaryButtonLabel]=\"confirmButtonText ?? ('COMMON.YES' \| uiTranslate \| async)!\"\n [secondaryButtonLabel]=\"\n showSecondaryButton ? (cancelButtonText ?? ('COMMON.CANCEL' \| uiTranslate \| async)!) : undefined\n \"\n (primaryButtonClickEvent)=\"onConfirm()\"\n (secondaryButtonClickEvent)=\"dialogRef.close(false)\"\n (closeEvent)=\"dialogRef.close(null)\"\n [primaryButtonType]=\"primaryButtonType\"\n [primaryButtonIconName]=\"primaryButtonIconName\"\n [secondaryButtonType]=\"secondaryButtonType\"\n [applicationTheme]=\"applicationTheme\"\n [showCloseButton]=\"showCloseButton\"\n [companyColor]=\"color\"\n [primaryButtonDataTestId]=\"primaryButtonDataTestId\"\n [secondaryButtonDataTestId]=\"secondaryButtonDataTestId\"\n [primaryButtonIconPosition]=\"primaryButtonIconPosition\"\n >\n <div class=\"message\">{{ confirmMessage }}</div>\n @if (confirmMessageHtml) {\n <div class=\"message\" [innerHTML]=\"confirmMessageHtml\"></div>\n }\n </ui-dialog>\n</ng-container>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-dialog"],"suggestedQueries":[]},"filePath":"components/confirm-dialog/confirm-dialog.component.ts","supportsTheme":true,"lastModified":1775743558145.8367},"dialog-custom":{"name":"DialogCustomComponent","selector":"ui-dialog-custom","category":"dialog","description":"To use the Custom Dialog component, you need to import the `DialogCustomComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/dialog-custom","moduleName":"DialogCustomComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false}],"outputs":[],"module":{"name":"DialogCustomComponentModule","imports":["CommonModule","DialogComponentModule","ButtonComponentModule"],"exports":["DialogCustomComponent"],"declarations":["DialogCustomComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Custom Dialog component, you need to import the `DialogCustomComponentModule` in your module:\n\n```typescript\nimport { DialogCustomComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n DialogCustomComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component with the DialogService:\n\n```typescript\nimport { DialogService } from '@testgorilla/tgo-ui';\n\n@Component({\n // ...\n})\nexport class YourComponent {\n constructor(private dialogService: DialogService) {}\n\n openCustomDialog(): void {\n const dialogConfig = {\n applicationTheme: 'light',\n size: 'small',\n extraData: {\n type: 'custom-header',\n }\n };\n\n this.dialogService\n .open(DialogCustomComponent, dialogConfig)\n .afterClosed()\n .subscribe(result => {\n // Handle dialog close\n });\n }\n}\n```","template":"<ui-dialog\n [title]=\"data.title\"\n [showCloseButton]=\"data.showCloseButton\"\n [applicationTheme]=\"applicationTheme\"\n [primaryButtonLabel]=\"'OK'\"\n [secondaryButtonLabel]=\"'Cancel'\"\n [canCloseFn]=\"canClose\"\n [keyboardOpen]=\"data.keyboardOpen\"\n [footerMessage]=\"data.footerMessage\"\n>\n <!-- Custom header content -->\n <div ngIf=\"data.type === 'custom-header'\" dialogHeader class=\"custom-header\">\n <div class=\"button-group\">\n <ui-button label=\"Action 1\" [variant]=\"'ghost'\" [applicationTheme]=\"applicationTheme\"></ui-button>\n <ui-button label=\"Action 2\" [variant]=\"'primary'\" [applicationTheme]=\"applicationTheme\"></ui-button>\n </div>\n </div>\n\n <!-- Dialog content -->\n <div class=\"dialog-content\">\n <p ngIf=\"data.type === 'default'\" class=\"dialog-message\">\n This is a default dialog example with a standard header.\n </p>\n <p ngIf=\"data.type === 'custom-header'\" class=\"dialog-message\">\n This dialog uses a custom header with content projection.\n </p>\n <p class=\"dialog-message\">The dialog will be closeable in 2 seconds (demonstrating canCloseFn).</p>\n </div>\n</ui-dialog>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-dialog","ui-button"],"suggestedQueries":[]},"filePath":"components/dialog-custom/dialog-custom.component.ts","supportsTheme":true,"lastModified":1775743558146.8367},"divider":{"name":"DividerComponent","selector":"ui-divider","category":"divider","description":"To use the Divider component, you need to import the `DividerComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/divider","moduleName":"DividerComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"size","type":"DividerSize","defaultValue":"'large'","required":false,"alias":null,"transform":null,"description":"Divider size","isSignal":false},{"name":"companyColor","type":"string \| null","defaultValue":"'#46A997'","required":false,"alias":null,"transform":null,"description":"Determines whether the checkbox color.\nDefault: Test Gorilla primary color.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Text content in the center of the divider","isSignal":false}],"outputs":[],"module":{"name":"DividerComponentModule","imports":["CommonModule","MatDividerModule"],"exports":["DividerComponent"],"declarations":["DividerComponent"],"providers":[]},"types":{"typeAliases":[{"name":"DividerSize","value":"'small' \| 'large'"}],"interfaces":[],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Divider component, you need to import the `DividerComponentModule` in your module:\n\n```typescript\nimport { DividerComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n DividerComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-divider \n [size]=\"'large'\" \n [applicationTheme]=\"theme\" \n [label]=\"'Optional Label'\">\n</ui-divider>\n```","template":"<div class=\"ui-divider-wrapper\">\n <ng-container ngIf=\"!label; else withLabel\">\n <mat-divider aria-hidden=\"true\" [class]=\"applicationTheme\" [ngClass]=\"size\"></mat-divider>\n </ng-container>\n\n <ng-template #withLabel>\n <div class=\"container\">\n <div class=\"line\" aria-hidden=\"true\"><mat-divider [class]=\"applicationTheme\" [ngClass]=\"size\"></mat-divider></div>\n <div [class]=\"'label' + ' ' + size\">{{ label }}</div>\n <div class=\"line\" aria-hidden=\"true\"><mat-divider [class]=\"applicationTheme\" [ngClass]=\"size\"></mat-divider></div>\n </div>\n </ng-template>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":["aria-hidden"],"dataTestIds":[],"materialComponents":["mat-divider"],"childUIComponents":[],"suggestedQueries":[]},"filePath":"components/divider/divider.component.ts","supportsTheme":true,"lastModified":1775743558146.8367},"donut-chart":{"name":"DonutChartComponent","selector":"ui-donut-chart","category":"charts","description":"DonutChartComponent component","importPath":"@testgorilla/tgo-ui/components/donut-chart","moduleName":"DonutChartComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"donutChartData","type":"DonutChartData","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"","isSignal":true}],"outputs":[],"module":{"name":"DonutChartComponentModule","imports":["NgChartsModule"],"exports":["DonutChartComponent"],"declarations":["DonutChartComponent"],"providers":[]},"types":{"typeAliases":[{"name":"DonutChartData","value":"{\n labels: string[];\n data: number[];\n backgroundColor?: Color[];\n}"}],"interfaces":[],"enums":[]},"examples":[],"documentation":"","template":"<div style=\"height: 200px\">\n <canvas baseChart [data]=\"chartData()\" type=\"doughnut\" [options]=\"donutChartOptions\" [plugins]=\"donutChartPlugins\">\n </canvas>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":[],"suggestedQueries":[]},"filePath":"components/donut-chart/donut-chart.component.ts","supportsTheme":true,"lastModified":1775743558147.8367},"dropdown":{"name":"DropdownComponent","selector":"ui-dropdown","category":"forms","description":"To use the Dropdown component, you need to import the `DropdownComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/dropdown","moduleName":"DropdownComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Text content will be applied to the input element if present.","isSignal":false},{"name":"labelIcon","type":"IconName","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Icon to display alongside the label","isSignal":false},{"name":"isAIVariant","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Indicates if this field is filled by AI","isSignal":false},{"name":"name","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input name attribute","isSignal":false},{"name":"placeholder","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Placeholder to be shown if no value has been selected.","isSignal":false},{"name":"id","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Unique id of the element.","isSignal":false},{"name":"value","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input value","isSignal":false},{"name":"errors","type":"string[]","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Whether the component is in an error state.","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether the component is disabled.\nDefault: false.","isSignal":false},{"name":"valueList","type":"OptionType[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"List of options.","isSignal":false},{"name":"allowClear","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Whether the user should be allowed to clear the values.\nDefault: true.","isSignal":false},{"name":"allowMultipleSelection","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"This will allow the user to select multiple values at once.\nDefault: true.","isSignal":false},{"name":"required","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether the component is required.\nDefault: false.","isSignal":false},{"name":"showBottomContent","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Show reserved content below form field","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"hideBuiltInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Hide in build errors for Reactive Forms","isSignal":false},{"name":"hideLabelInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Hide label in errors","isSignal":false},{"name":"textField","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"valueField","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"hasError","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"companyColor","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Color of the option hover.\nDefaults to Test Gorilla primary color.","isSignal":false},{"name":"panelClass","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Class to be applied to the panel.","isSignal":false}],"outputs":[{"name":"closed","eventType":"void","alias":null,"description":"","isSignal":false},{"name":"opened","eventType":"void","alias":null,"description":"","isSignal":false}],"module":{"name":"DropdownComponentModule","imports":["CommonModule","MatFormFieldModule","MatInputModule","IconComponentModule","FormsModule","ReactiveFormsModule","ButtonComponentModule","MatSelectModule","UiTranslatePipe","ValidationErrorModule","HasValidationErrorPipe"],"exports":["DropdownComponent"],"declarations":["DropdownComponent"],"providers":[]},"types":{"typeAliases":[{"name":"OptionType","value":"{\n value?: string;\n displayValue?: string;\n sectionTitle?: string;\n isAISuggested?: boolean;\n} & Record<string, any>"}],"interfaces":[],"enums":[]},"examples":[{"name":"Default","template":"<ui-dropdown\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [valueList]=\"valueList\"\n [valueField]=\"valueField\"\n applicationTheme=\"${_theme}\">\n <ng-template #customSelectedOptionTemplate let-option>\n <div>\n <div>\n Selected: {{ option?.name }}\n </div>\n </div>\n </ng-template>\n\n <ng-template #customOptionTemplate let-option>\n <div>\n <div>\n <div>{{ option.name }} - {{ option.description }}</div>\n </div>\n </div>\n </ng-template>\n </ui-dropdown>","props":{"placeholder":"'Placeholder'","label":"'Label'","valueList":"Options","allowMultipleSelection":"false"}},{"name":"WithOptionSection","template":"<ui-dropdown\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [valueList]=\"valueList\"\n [valueField]=\"valueField\"\n applicationTheme=\"${_theme}\">\n <ng-template #customSelectedOptionTemplate let-option>\n <div>\n <div>\n Selected: {{ option?.name }}\n </div>\n </div>\n </ng-template>\n\n <ng-template #customOptionTemplate let-option>\n <div>\n <div>\n <div>{{ option.name }} - {{ option.description }}</div>\n </div>\n </div>\n </ng-template>\n </ui-dropdown>","props":{"placeholder":"'Placeholder'","label":"'Label'","valueList":"OptionsWithSection","allowMultipleSelection":"false"}},{"name":"Disabled","template":"<ui-dropdown\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [valueList]=\"valueList\"\n [valueField]=\"valueField\"\n applicationTheme=\"${_theme}\">\n <ng-template #customSelectedOptionTemplate let-option>\n <div>\n <div>\n Selected: {{ option?.name }}\n </div>\n </div>\n </ng-template>\n\n <ng-template #customOptionTemplate let-option>\n <div>\n <div>\n <div>{{ option.name }} - {{ option.description }}</div>\n </div>\n </div>\n </ng-template>\n </ui-dropdown>","props":{"placeholder":"'Placeholder'","label":"'Label'","valueList":"Options","disabled":"true"}},{"name":"Multiple","template":"<ui-dropdown\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [valueList]=\"valueList\"\n [valueField]=\"valueField\"\n applicationTheme=\"${_theme}\">\n <ng-template #customSelectedOptionTemplate let-option>\n <div>\n <div>\n Selected: {{ option?.name }}\n </div>\n </div>\n </ng-template>\n\n <ng-template #customOptionTemplate let-option>\n <div>\n <div>\n <div>{{ option.name }} - {{ option.description }}</div>\n </div>\n </div>\n </ng-template>\n </ui-dropdown>","props":{"placeholder":"'Placeholder'","label":"'Label'","valueList":"Options","allowMultipleSelection":"true"}},{"name":"MultipleWithErrors","template":"<ui-dropdown\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [valueList]=\"valueList\"\n [valueField]=\"valueField\"\n applicationTheme=\"${_theme}\">\n <ng-template #customSelectedOptionTemplate let-option>\n <div>\n <div>\n Selected: {{ option?.name }}\n </div>\n </div>\n </ng-template>\n\n <ng-template #customOptionTemplate let-option>\n <div>\n <div>\n <div>{{ option.name }} - {{ option.description }}</div>\n </div>\n </div>\n </ng-template>\n </ui-dropdown>","props":{"placeholder":"'Placeholder'","label":"'Label'","valueList":"Options","allowMultipleSelection":"true","errors":"['Helper text']"}},{"name":"WithErrors","template":"<ui-dropdown\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [valueList]=\"valueList\"\n [valueField]=\"valueField\"\n applicationTheme=\"${_theme}\">\n <ng-template #customSelectedOptionTemplate let-option>\n <div>\n <div>\n Selected: {{ option?.name }}\n </div>\n </div>\n </ng-template>\n\n <ng-template #customOptionTemplate let-option>\n <div>\n <div>\n <div>{{ option.name }} - {{ option.description }}</div>\n </div>\n </div>\n </ng-template>\n </ui-dropdown>","props":{"placeholder":"'Placeholder'","label":"'Label'","valueList":"Options","errors":"['Helper text']"}},{"name":"WithoutLabel","template":"<ui-dropdown\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [valueList]=\"valueList\"\n [valueField]=\"valueField\"\n applicationTheme=\"${_theme}\">\n <ng-template #customSelectedOptionTemplate let-option>\n <div>\n <div>\n Selected: {{ option?.name }}\n </div>\n </div>\n </ng-template>\n\n <ng-template #customOptionTemplate let-option>\n <div>\n <div>\n <div>{{ option.name }} - {{ option.description }}</div>\n </div>\n </div>\n </ng-template>\n </ui-dropdown>","props":{"placeholder":"'Label'","valueList":"Options","errors":"['Helper text']"}},{"name":"WithDisplayValue","template":"<ui-dropdown\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [valueList]=\"valueList\"\n [valueField]=\"valueField\"\n applicationTheme=\"${_theme}\">\n <ng-template #customSelectedOptionTemplate let-option>\n <div>\n <div>\n Selected: {{ option?.name }}\n </div>\n </div>\n </ng-template>\n\n <ng-template #customOptionTemplate let-option>\n <div>\n <div>\n <div>{{ option.name }} - {{ option.description }}</div>\n </div>\n </div>\n </ng-template>\n </ui-dropdown>","props":{"placeholder":"'Label'","label":"'Label'","valueList":"OptionsWithDisplayValue"}},{"name":"WithCustomField","template":"<ui-dropdown\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [valueList]=\"valueList\"\n [valueField]=\"valueField\"\n applicationTheme=\"${_theme}\">\n <ng-template #customSelectedOptionTemplate let-option>\n <div>\n <div>\n Selected: {{ option?.name }}\n </div>\n </div>\n </ng-template>\n\n <ng-template #customOptionTemplate let-option>\n <div>\n <div>\n <div>{{ option.name }} - {{ option.description }}</div>\n </div>\n </div>\n </ng-template>\n </ui-dropdown>","props":{"placeholder":"'Label'","label":"'Label'","textField":"'myName'","valueField":"'myValue'","valueList":"OPTIONS_CUSTOM_FIELDS"}},{"name":"WithCustomTemplate","template":"<ui-dropdown\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [valueList]=\"valueList\"\n [valueField]=\"valueField\"\n applicationTheme=\"${_theme}\">\n <ng-template #customSelectedOptionTemplate let-option>\n <div>\n <div>\n Selected: {{ option?.name }}\n </div>\n </div>\n </ng-template>\n\n <ng-template #customOptionTemplate let-option>\n <div>\n <div>\n <div>{{ option.name }} - {{ option.description }}</div>\n </div>\n </div>\n </ng-template>\n </ui-dropdown>","props":{"placeholder":"'Select an option'","label":"'Category'","labelIcon":"'Settings'","valueList":"Options","allowMultipleSelection":"false"}}],"documentation":"## How to use\n\nTo use the Dropdown component, you need to import the `DropdownComponentModule` in your module:\n\n```typescript\nimport { DropdownComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n DropdownComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-dropdown\n label=\"Country\"\n placeholder=\"Select a country\"\n [valueList]=\"countries\"\n [allowMultipleSelection]=\"false\"\n applicationTheme=\"light\"\n (valueChange)=\"onCountrySelected($event)\">\n</ui-dropdown>\n```\n\nFor custom display values:\n\n```html\n<ui-dropdown\n label=\"Country\"\n [valueList]=\"countries\"\n textField=\"name\"\n valueField=\"code\"\n applicationTheme=\"light\">\n</ui-dropdown>\n```\n\nThe dropdown component supports single and multiple selection, sections, custom fields, and custom templates.","template":"<ng-container>\n <mat-form-field\n appearance=\"outline\"\n [attr.theme]=\"applicationTheme\"\n [color]=\"errorsLength \|\| (ngControl?.errors && ngControl?.touched) \|\| hasError ? 'warn' : 'accent'\"\n [ngClass]=\"{\n 'hide-bottom-content': !showBottomContent,\n 'without-label': !label,\n 'keyboard-focused': keyboardFocused(),\n 'has-label': !!label,\n }\"\n >\n <mat-label class=\"label-with-icon\">\n @if (isAIVariant \|\| labelIcon) {\n <ui-icon [name]=\"isAIVariant ? 'Sparkle-in-line' : labelIcon!\" [size]=\"'16'\" class=\"label-icon\"></ui-icon>\n }\n {{ label }}\n @if (required) {\n <span></span>\n }\n </mat-label>\n <mat-select\n (closed)=\"onClosed()\"\n (opened)=\"onOpened()\"\n #matSelect\n [id]=\"id!\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [panelClass]=\"'ui-dropdown-list' + ' ' + applicationTheme + (panelClass ? ' ' + panelClass : '')\"\n [disabled]=\"disabled\"\n [multiple]=\"!!allowMultipleSelection\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n (selectionChange)=\"onChangeOption($event)\"\n [attr.name]=\"name\"\n data-testid=\"ui-dropdown-select\"\n >\n @if (customSelectedOptionTemplate && valueField) {\n <mat-select-trigger>\n <ng-container\n [ngTemplateOutlet]=\"customSelectedOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: valueList.find(findValueByValueField) }\"\n ></ng-container>\n </mat-select-trigger>\n }\n\n @if (customOptionTemplate && valueField) {\n @for (item of valueList; track item[valueField]) {\n <mat-option [value]=\"item[valueField]\">\n <ng-container\n [ngTemplateOutlet]=\"customOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n ></ng-container>\n </mat-option>\n }\n } @else {\n <div class=\"mat-option-section\" ngFor=\"let section of valueList\">\n <span ngIf=\"section.sectionTitle\" class=\"section-title\">{{ section.sectionTitle }}</span>\n <mat-option\n ngIf=\"section\"\n #matOption\n [value]=\"valueField ? section[valueField] : textField && !valueField ? section : section.value\"\n >\n <div class=\"option-content\">\n <span class=\"option-text\">{{\n textField ? section[textField] : (section.displayValue ?? section.value)\n }}</span>\n @if (section.isAISuggested) {\n <ui-icon [name]=\"'Sparkle-in-line'\" [size]=\"'16'\"> </ui-icon>\n }\n </div>\n </mat-option>\n </div>\n }\n </mat-select>\n <ui-button\n [ariaLabel]=\"('COMMON.CLEAR' \| uiTranslate \| async)!\"\n ngIf=\"allowClear && !matSelect.empty\"\n variant=\"secondary\"\n [justIcon]=\"true\"\n class=\"clear\"\n [iconName]=\"applicationTheme === 'classic' ? 'Close' : 'Close-filled'\"\n [label]=\"('COMMON.CLEAR' \| uiTranslate \| async)!\"\n (click)=\"clearValue($event)\"\n ></ui-button>\n <ui-icon\n class=\"chevron-icon\"\n ngIf=\"!matSelect.panelOpen\"\n size=\"24\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-filled'\"\n ></ui-icon>\n <ui-icon\n class=\"chevron-icon\"\n ngIf=\"matSelect.panelOpen\"\n size=\"24\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Arrow_up' : 'Arrow-chevron-up-filled'\"\n ></ui-icon>\n <mat-hint class=\"error\" ngIf=\"errorsLength \|\| (ngControl?.errors \| hasValidationError)\">\n <ng-container ngIf=\"errorsLength\">\n <div class=\"errors\" ngFor=\"let error of errors\">\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"\n ></ui-icon\n >{{ error }}\n </div>\n </ng-container>\n\n <ui-validation-error\n ngIf=\"ngControl && !hideBuiltInErrors\"\n [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors ? null : label\"\n ></ui-validation-error>\n </mat-hint>\n </mat-form-field>\n</ng-container>\n","queryGuide":{"roles":["combobox","option"],"ariaAttributes":[],"dataTestIds":["ui-dropdown-select"],"materialComponents":["mat-form-field","mat-label","mat-select","mat-select-trigger","mat-option","mat-hint"],"childUIComponents":["ui-icon","ui-button","ui-validation-error"],"suggestedQueries":["screen.getByRole('combobox')","screen.getByRole('option')","// Open dropdown: await userEvent.click(screen.getByRole('combobox'))","// Select option: await userEvent.click(await screen.findByText('Option'))","screen.getByTestId('ui-dropdown-select')"]},"filePath":"components/dropdown/dropdown.component.ts","supportsTheme":true,"lastModified":1775743558147.8367},"elevation-shadow":{"name":"ElevationShadowComponent","selector":"ui-elevation-shadow","category":"elevation-shadow","description":"To use the Elevation Shadow component, you need to import the `ElevationShadowComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/elevation-shadow","moduleName":"ElevationShadowComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"elevationType","type":"Elevation","defaultValue":"ElevationType.DEFAULT","required":false,"alias":null,"transform":null,"description":"The type of elevation shadow.\nDefault: default.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false}],"outputs":[],"module":{"name":"ElevationShadowComponentModule","imports":["CommonModule"],"exports":["ElevationShadowComponent"],"declarations":["ElevationShadowComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[{"name":"Default","template":"<ui-elevation-shadow ${argsToTemplate(args)} [applicationTheme]=\"_theme\">\n <p class=\"text\"></p>\n </ui-elevation-shadow>","props":{"elevationType":"ElevationType.DEFAULT"}},{"name":"Modal","template":"<ui-elevation-shadow ${argsToTemplate(args)} [applicationTheme]=\"_theme\">\n <p class=\"text\"></p>\n </ui-elevation-shadow>","props":{"elevationType":"ElevationType.MODAL"}}],"documentation":"## How to use\n\nTo use the Elevation Shadow component, you need to import the `ElevationShadowComponentModule` in your module:\n\n```typescript\nimport { ElevationShadowComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n ElevationShadowComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-elevation-shadow [elevationType]=\"'default'\" [applicationTheme]=\"theme\">\n <div>Content goes here</div>\n</ui-elevation-shadow>\n```","template":"<div class=\"elevation-shadow\" [ngClass]=\"elevationType\" [attr.theme]=\"applicationTheme\">\n <ng-content></ng-content>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":[],"suggestedQueries":[]},"filePath":"components/elevation-shadow/elevation-shadow.component.ts","supportsTheme":true,"lastModified":1775743558148.8367},"empty-state":{"name":"EmptyStateComponent","selector":"ui-empty-state","category":"empty-state","description":"To use the Empty State component, you need to import the `EmptyStateComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/empty-state","moduleName":"EmptyStateComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"showIllustration","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"illustrationVariant","type":"IllustrationVariant","defaultValue":"'Empty-search'","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"icon","type":"IconName","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"emptyStateVariant","type":"EmptyStateVariant","defaultValue":"'desktop'","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"title","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"bodyText","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"primaryButtonText","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"primaryButtonVariant","type":"ButtonVariant","defaultValue":"'pink'","required":false,"alias":null,"transform":null,"description":"Primary button variant - only for new theme.","isSignal":false},{"name":"generalButtonVariation","type":"ButtonColor","defaultValue":"'primary'","required":false,"alias":null,"transform":null,"description":"General button variation - only for new theme.","isSignal":false},{"name":"primaryButtonIconName","type":"IconName","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"primaryButtonIconPosition","type":"ButtonIconPosition","defaultValue":"'left'","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"secondaryButtonText","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"secondaryButtonVariant","type":"ButtonVariant","defaultValue":"'black'","required":false,"alias":null,"transform":null,"description":"Secondary button variant - only for new theme.","isSignal":false},{"name":"secondaryButtonIconName","type":"IconName","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"secondaryButtonIconPosition","type":"ButtonIconPosition","defaultValue":"'left'","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"tertiaryButtonText","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"tertiaryButtonVariant","type":"ButtonVariant","defaultValue":"'ghost'","required":false,"alias":null,"transform":null,"description":"Tertiary button variant - only for new theme.","isSignal":false},{"name":"tertiaryButtonIconName","type":"IconName","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"tertiaryButtonIconPosition","type":"ButtonIconPosition","defaultValue":"'left'","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"generalVariationButtonText","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"generalVariationButtonSize","type":"ButtonSize","defaultValue":"'big'","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"generalVariationButtonIconName","type":"IconName","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"generalVariationButtonIconPosition","type":"ButtonIconPosition","defaultValue":"'left'","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"generalVariationButtonDisabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false}],"outputs":[{"name":"primaryButtonClick","eventType":"Event","alias":null,"description":"Event triggered when the primary button is clicked.","isSignal":false},{"name":"secondaryButtonClick","eventType":"Event","alias":null,"description":"Event triggered when the secondary button is clicked.","isSignal":false},{"name":"tertiaryButtonClick","eventType":"Event","alias":null,"description":"Event triggered when the tertiary button is clicked.","isSignal":false},{"name":"generalVariationButtonClick","eventType":"Event","alias":null,"description":"Event triggered when the general variation button is clicked.","isSignal":false}],"module":{"name":"EmptyStateComponentModule","imports":["CommonModule","IconComponentModule","NgOptimizedImage","ButtonComponentModule","UiTranslatePipe"],"exports":["EmptyStateComponent"],"declarations":["EmptyStateComponent"],"providers":[]},"types":{"typeAliases":[{"name":"ButtonVariant","value":"'pink' \| 'black' \| 'ghost'"},{"name":"IllustrationVariant","value":"'Empty-search' \| 'Lost-found-404' \| 'Disconnected' \| 'Messages'"},{"name":"EmptyStateVariant","value":"'mobile' \| 'desktop'"}],"interfaces":[],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Empty State component, you need to import the `EmptyStateComponentModule` in your module:\n\n```typescript\nimport { EmptyStateComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n EmptyStateComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-empty-state\n [title]=\"'No results found'\"\n [bodyText]=\"'Try a different search term or adjust your filters.'\"\n [showIllustration]=\"true\"\n [illustrationVariant]=\"'Empty-search'\"\n [primaryButtonText]=\"'Clear filters'\"\n [applicationTheme]=\"theme\"\n (primaryButtonClick)=\"onPrimaryButtonClick($event)\">\n</ui-empty-state>\n```","template":"<ng-container>\n <div class=\"empty-state-container\" [attr.theme]=\"applicationTheme\" [class.mobile]=\"emptyStateVariant === 'mobile'\">\n <div class=\"illustration\" ngIf=\"showIllustration\" [attr.aria-hidden]=\"true\">\n <img\n ngIf=\"applicationTheme === 'classic'\"\n [attr.src]=\"'/images/empty-state-default.svg'\"\n [width]=\"160\"\n [height]=\"160\"\n alt=\"illustration\"\n />\n <img\n ngIf=\"applicationTheme !== 'classic'\"\n [attr.src]=\"'/icons/rebrand/' + illustrationVariant + '-in-line.svg'\"\n [width]=\"160\"\n [height]=\"160\"\n alt=\"illustration\"\n />\n </div>\n\n <div class=\"icon\" ngIf=\"icon\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"icon\" size=\"40\"></ui-icon>\n </div>\n\n <div class=\"text-content\">\n <div class=\"title\">{{ title ? title : ('COMMON.NO_RESULTS' \| uiTranslate \| async) }}</div>\n @if (bodyText) {\n <div class=\"body-text\" [innerHTML]=\"bodyText\"></div>\n }\n </div>\n\n <div class=\"actions\">\n <ui-button\n [fullWidth]=\"emptyStateVariant === 'mobile'\"\n [applicationTheme]=\"buttonApplicationTheme\"\n class=\"action-button\"\n ngIf=\"primaryButtonText\"\n [variant]=\"applicationTheme !== 'classic' ? getVariant(primaryButtonVariant) : 'primary'\"\n [label]=\"primaryButtonText\"\n [iconName]=\"primaryButtonIconName\"\n [iconPosition]=\"primaryButtonIconPosition\"\n (buttonClickEvent)=\"onPrimaryButtonClick($event)\"\n ></ui-button>\n <ui-button\n [fullWidth]=\"emptyStateVariant === 'mobile'\"\n [applicationTheme]=\"buttonApplicationTheme\"\n class=\"action-button\"\n ngIf=\"secondaryButtonText\"\n [variant]=\"applicationTheme !== 'classic' ? getVariant(secondaryButtonVariant) : 'secondary'\"\n [label]=\"secondaryButtonText\"\n [iconName]=\"secondaryButtonIconName\"\n [iconPosition]=\"secondaryButtonIconPosition\"\n (buttonClickEvent)=\"onSecondaryButtonClick($event)\"\n ></ui-button>\n <ui-button\n [fullWidth]=\"emptyStateVariant === 'mobile'\"\n [applicationTheme]=\"buttonApplicationTheme\"\n class=\"action-button\"\n ngIf=\"tertiaryButtonText\"\n [variant]=\"applicationTheme !== 'classic' ? getVariant(tertiaryButtonVariant) : 'tertiary'\"\n [label]=\"tertiaryButtonText\"\n [iconName]=\"tertiaryButtonIconName\"\n [iconPosition]=\"tertiaryButtonIconPosition\"\n (buttonClickEvent)=\"onTertiaryButtonClick($event)\"\n ></ui-button>\n @if (generalVariationButtonText) {\n <ui-button\n class=\"action-button\"\n [fullWidth]=\"emptyStateVariant === 'mobile'\"\n [applicationTheme]=\"buttonApplicationTheme\"\n [variant]=\"generalButtonVariation\"\n [label]=\"generalVariationButtonText\"\n [iconName]=\"generalVariationButtonIconName\"\n [iconPosition]=\"generalVariationButtonIconPosition\"\n [disabled]=\"generalVariationButtonDisabled\"\n [size]=\"generalVariationButtonSize\"\n (buttonClickEvent)=\"onGeneralVariationButtonClick($event)\"\n ></ui-button>\n }\n </div>\n </div>\n</ng-container>\n","queryGuide":{"roles":[],"ariaAttributes":["aria-hidden"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon","ui-button"],"suggestedQueries":[]},"filePath":"components/empty-state/empty-state.component.ts","supportsTheme":true,"lastModified":1775743558148.8367},"field":{"name":"FieldComponent","selector":"ui-field","category":"forms","description":"To use the Field component, you need to import the `FieldComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/field","moduleName":"FieldComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"fullWidth","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Indicator of the autocomplete width","isSignal":false},{"name":"fullHeight","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Indicator of the field height","isSignal":false},{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Form field label","isSignal":false},{"name":"labelIcon","type":"IconName","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Icon to display alongside the label","isSignal":false},{"name":"fieldName","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input name attribute","isSignal":false},{"name":"placeholder","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Input placeholder","isSignal":false},{"name":"value","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Input value","isSignal":false},{"name":"badgeVariant","type":"BadgeVariant \| undefined","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Variant of badge to use","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Determines if input is disabled","isSignal":false},{"name":"required","type":"boolean","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input is required or not","isSignal":false},{"name":"readOnly","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Input is readonly or not","isSignal":false},{"name":"hintMessage","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Hint text","isSignal":false},{"name":"type","type":"FieldType","defaultValue":"'text'","required":false,"alias":null,"transform":null,"description":"Input type","isSignal":false},{"name":"updateOnBlur","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Input is update only on blur","isSignal":false},{"name":"allowOnlyDigits","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"allow only digits in input","isSignal":false},{"name":"isAutocompleteOff","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"allow autocomplete off in input","isSignal":false},{"name":"allowNegative","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"allow negative numbers","isSignal":false},{"name":"showBottomContent","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Show reserved content below form field","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"ariaLabel","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"A string representing the ARIA label for accessibility.\nThis label is used to provide an accessible name for the input element.","isSignal":false},{"name":"loading","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Show loading button. Only for text","isSignal":false},{"name":"isValid","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Show icon when field is valid","isSignal":false},{"name":"maxCharacters","type":"number","defaultValue":"255","required":false,"alias":null,"transform":null,"description":"Max characters number","isSignal":false},{"name":"trimOnBlur","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Trim text on blur","isSignal":false},{"name":"trimOnSubmit","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Trim text on submit","isSignal":false},{"name":"maxRows","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"Max rows for multi-line type","isSignal":false},{"name":"hasTextAreaCounter","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"has text area counter","isSignal":false},{"name":"hideBuiltInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Hide in build errors for Reactive Forms","isSignal":false},{"name":"hideLabelInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Hide label in errors","isSignal":false},{"name":"max","type":"number \| undefined","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Set maximum number","isSignal":false},{"name":"min","type":"number \| undefined","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Set minimum number","isSignal":false},{"name":"textareaHeight","type":"number","defaultValue":"110","required":false,"alias":null,"transform":null,"description":"Sets textarea height. Default 110","isSignal":false},{"name":"borderless","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Sets textarea borderless. Default false","isSignal":false},{"name":"autosizableTextarea","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"isAIVariant","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Indicates if this field is filled by AI","isSignal":false},{"name":"hasError","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Show state of error","isSignal":false},{"name":"errors","type":"string[]","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input field errors","isSignal":false},{"name":"labelHtml","type":"string \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"Form field label from html","isSignal":true},{"name":"id","type":"unknown","defaultValue":"`field-${fieldID++}`","required":false,"alias":null,"transform":null,"description":"Input id","isSignal":true},{"name":"ariaLabelledby","type":"string \| undefined","defaultValue":"undefined","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used for input field Aria LabeledBy Text.","isSignal":true},{"name":"ariaDescribedby","type":"string \| undefined","defaultValue":"undefined","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used for input field Aria DescribedBy Text.","isSignal":true}],"outputs":[{"name":"validateEvent","eventType":"string","alias":null,"description":"","isSignal":false},{"name":"fieldBlur","eventType":"void","alias":null,"description":"","isSignal":false}],"module":{"name":"FieldComponentModule","imports":["CommonModule","MatFormFieldModule","MatInputModule","IconComponentModule","FormsModule","ReactiveFormsModule","ButtonComponentModule","MatIconModule","UiTranslatePipe","ValidationErrorModule","HasValidationErrorPipe","DigitsOnlyDirective","BadgeComponentModule"],"exports":["FieldComponent"],"declarations":["FieldComponent"],"providers":[]},"types":{"typeAliases":[{"name":"FieldType","value":"\| 'text'\n \| 'password'\n \| 'email'\n \| 'number'\n \| 'tel'\n \| 'search'\n \| 'collapsed-search'\n \| 'validation-text'\n \| 'textarea'\n \| 'textarea-scrollable'\n \| 'multi-line'"}],"interfaces":[],"enums":[]},"examples":[{"name":"Text","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'text'","placeholder":"'Placeholder'","label":"'Input text label'","hintMessage":"'Donec posuere ultrices feugiat. Suspendisse potenti.'"}},{"name":"Password","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'password'","label":"'Password label'"}},{"name":"Search","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'search'","placeholder":"'Search'"}},{"name":"CollapsedSearch","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'collapsed-search'","placeholder":"'Collapsed search'","label":"'Search'"}},{"name":"Email","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'email'","placeholder":"'Placeholder'","label":"'email label'"}},{"name":"NumberType","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'number'","placeholder":"'Placeholder'","label":"'Number label'","allowOnlyDigits":"true","allowNegative":"false"}},{"name":"Tel","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'tel'","placeholder":"'Placeholder'","label":"'Tel label'"}},{"name":"WithoutLabel","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'text'","placeholder":"'Placeholder'"}},{"name":"WithLabelHtml","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'text'","placeholder":"'Placeholder'","labelHtml":"'This number <b>6</b> is very important'"}},{"name":"WithErrors","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'text'","placeholder":"'Placeholder'","errors":"["}},{"name":"WithDisable","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'text'","placeholder":"'Placeholder'","disabled":"true","label":"'Label'"}},{"name":"WithRequire","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'text'","placeholder":"'Placeholder'","required":"true","label":"'Label require'"}},{"name":"ValitateText","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'validation-text'","placeholder":"'Validation text'","label":"'Label'"}},{"name":"Textarea","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'textarea'","placeholder":"'Textarea'","label":"'Label'"}},{"name":"TextareaScrollable","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'textarea-scrollable'","label":"'Scrollable textarea'","placeholder":"'Add details here'","textareaHeight":"200","value":"'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam quam id tincidunt dapibus. ' +"}},{"name":"AIVariant","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'text'","placeholder":"'Your text goes here'","label":"'Label'","isAIVariant":"true"}},{"name":"WithBadge","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'text'","placeholder":"'Placeholder'","label":"'Label'","badgeVariant":"'primary-ai'"}},{"name":"MultiLine","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'multi-line'","placeholder":"'MultiLine'","label":"'Label'"}},{"name":"TextAreaBorderless","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'textarea'","label":"'Label'","borderless":"true","hasTextAreaCounter":"false","textareaHeight":"200","value":"'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam quam id tincidunt dapibus.'"}},{"name":"FullHeightTextarea","template":"<div style=\"height: 400px; border: 1px dashed #ccc; padding: 16px;\">\n <ui-field\n [type]=\"type\"\n [label]=\"label\"\n [placeholder]=\"placeholder\"\n [fullHeight]=\"fullHeight\"\n [hasTextAreaCounter]=\"hasTextAreaCounter\"\n [value]=\"value\"\n [applicationTheme]=\"applicationTheme\">\n </ui-field>\n </div>","props":{"type":"'multi-line'","label":"'Full Height Textarea'","placeholder":"'Enter your text here...'","fullHeight":"true","hasTextAreaCounter":"true","value":"'This textarea will expand to fill the full height of its container. Perfect for forms where you need a large text input area that adapts to the available space.'"}}],"documentation":"## How to use\n\nTo use the Field component, you need to import the `FieldComponentModule` in your module:\n\n```typescript\nimport { FieldComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n FieldComponentModule,\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule {}\n```\n\n## Basic Usage\n\nYou can use the component in your templates:\n\n```html\n<ui-field type=\"text\" label=\"Username\" placeholder=\"Enter your username\"> </ui-field>\n```\n\n## Field Types\n\nThe Field component supports various input types:\n\n- text: Regular text input\n- password: Password input with show/hide toggle\n- search: Search input with clear button\n- collapsed-search: Collapsible search input\n- email: Email input with validation\n- number: Numeric input (can be restricted to digits only)\n- tel: Telephone number input\n- textarea: Multi-line text area\n- textarea-scrollable: Scrollable text area with custom scrollbar styling\n- multi-line: Another multi-line input option\n- validation-text: Text input with validation display\n\n## Features\n\n- Form integration: Works with both Template-driven and Reactive forms\n- Validation: Displays error messages\n- Accessibility: Supports ARIA attributes for accessibility\n- Theming: Supports different application themes (light/dark/classic)\n- Configurable: Numerous input options for customization\n\n## Examples\n\n### Text input with label and hint\n\n```html\n<ui-field\n type=\"text\"\n label=\"First Name\"\n placeholder=\"Enter your first name\"\n hintMessage=\"Your first name as it appears on your ID\"\n>\n</ui-field>\n```\n\n### Text input with label from html\n\n```html\n<ui-field type=\"text\" labelHtml=\"First <b>Name</b>\" placeholder=\"Enter your first name\"> </ui-field>\n```\n\n### Password input\n\n```html\n<ui-field type=\"password\" label=\"Password\" placeholder=\"Enter your password\"> </ui-field>\n```\n\n### Number input with restrictions\n\n```html\n<ui-field\n type=\"number\"\n label=\"Age\"\n placeholder=\"Enter your age\"\n [allowOnlyDigits]=\"true\"\n [allowNegative]=\"false\"\n [min]=\"0\"\n [max]=\"120\"\n>\n</ui-field>\n```\n\n### Search field\n\n```html\n<ui-field type=\"search\" placeholder=\"Search...\"> </ui-field>\n```\n\n### Field with error messages\n\n```html\n<ui-field type=\"email\" label=\"Email\" placeholder=\"Enter your email\" [errors]=\"['Please enter a valid email address']\">\n</ui-field>\n```\n\n### Text area\n\n```html\n<ui-field type=\"textarea\" label=\"Comments\" placeholder=\"Enter your comments\" [maxCharacters]=\"500\"> </ui-field>\n```\n\n### Required field\n\n```html\n<ui-field type=\"text\" label=\"Username\" placeholder=\"Enter your username\" [required]=\"true\"> </ui-field>\n```\n","template":"<ng-container>\n <mat-form-field\n [ngStyle]=\"{\n '--textarea-height': textareaHeight - 10 + 'px',\n '--textarea-height-container': textareaHeight + 'px',\n }\"\n #uiField\n appearance=\"outline\"\n hideRequiredMarker=\"true\"\n [color]=\"errorsLength \|\| (ngControl?.errors && ngControl?.touched) \|\| hasError ? 'warn' : 'accent'\"\n [ngClass]=\"{\n 'hide-bottom-content': !showBottomContent,\n textarea: type === 'textarea' \|\| type === 'textarea-scrollable',\n 'textarea-scrollable': type === 'textarea-scrollable',\n 'multi-line': type === 'multi-line',\n 'multi-line-textarea': type === 'multi-line' && autosizableTextarea && borderless,\n 'keyboard-focused': keyboardFocused(),\n 'has-label': !!label,\n 'has-value': !!value,\n 'text-area-borderless': borderless && (type === 'textarea' \|\| type === 'textarea-scrollable'),\n }\"\n (mouseenter)=\"onActive(true, 'hover')\"\n (mouseleave)=\"onActive(false, 'hover')\"\n >\n <span [style.display]=\"'none'\" [id]=\"ariaDescribedbyId()\">\n @if (required) {\n <span>{{ 'ERRORS.REQUIRED' \| uiTranslate \| async }}</span>\n }\n {{ ariaDescribedby() }}\n </span>\n <span [style.display]=\"'none'\" [id]=\"ariaLabelledbyId()\">\n {{ ariaLabelledby() ?? label }}\n </span>\n <mat-label\n ngIf=\"\n (label \|\| labelHtml()) &&\n ((type !== 'search' && applicationTheme === 'classic') \|\| applicationTheme !== 'classic')\n \"\n class=\"label-with-icon\"\n >\n @if (isAIVariant \|\| labelIcon) {\n <ui-icon [name]=\"isAIVariant ? 'Sparkle-in-line' : labelIcon!\" [size]=\"'16'\" class=\"label-icon\"></ui-icon>\n }\n <span>\n @if (labelHtml()) {\n <span [innerHTML]=\"labelHtml()\"></span>\n } @else {\n {{ label }}\n }\n @if (required) {\n <span></span>\n }\n </span>\n </mat-label>\n <mat-icon\n ngIf=\"type === 'search' \|\| type === 'collapsed-search'\"\n matIconPrefix\n class=\"search-icon\"\n [svgIcon]=\"'Search'\"\n ></mat-icon>\n <input\n [readonly]=\"readOnly\"\n ngIf=\"type !== 'textarea' && type !== 'textarea-scrollable' && type !== 'multi-line'; else textarea\"\n matInput\n #inputElement\n (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n (input)=\"onInput($event)\"\n [id]=\"id()\"\n (keyup)=\"onChangeInputSearch()\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled \|\| loading\"\n [type]=\"currentType\"\n (keyup.enter)=\"onSubmit()\"\n [max]=\"max\"\n [min]=\"min\"\n [name]=\"fieldName!\"\n [required]=\"required\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-invalid]=\"errorsLength \|\| (ngControl?.errors && ngControl?.touched) \|\| hasError\"\n [attr.aria-labelledby]=\"ariaLabelledbyId()\"\n [attr.aria-describedby]=\"ariaDescribedbyId()\"\n role=\"textbox\"\n digitsOnly\n [autocomplete]=\"isAutocompleteOff ? 'off' : 'on'\"\n [allowOnlyDigits]=\"allowOnlyDigits\"\n [allowNegative]=\"allowNegative\"\n (focusin)=\"onActive(true, 'focus')\"\n />\n\n <ng-template #textarea>\n <textarea\n matInput\n #inputElement\n #autosize=\"cdkTextareaAutosize\"\n [readonly]=\"readOnly\"\n (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n (input)=\"onInput($event)\"\n [id]=\"id()\"\n (keyup)=\"onChangeInputSearch()\"\n (keyup.enter)=\"onSubmit()\"\n [placeholder]=\"placeholder!\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [name]=\"fieldName!\"\n [required]=\"required\"\n [attr.aria-label]=\"!label ? ariaLabel : ''\"\n [attr.aria-invalid]=\"errorsLength \|\| (ngControl?.errors && ngControl?.touched) \|\| hasError\"\n [attr.aria-labelledby]=\"ariaLabelledbyId()\"\n [attr.aria-describedby]=\"ariaDescribedbyId()\"\n role=\"textbox\"\n [cdkTextareaAutosize]=\"type === 'multi-line'\"\n [cdkAutosizeMinRows]=\"type === 'multi-line' ? 1 : 5\"\n [cdkAutosizeMaxRows]=\"type === 'multi-line' ? maxRows : 5\"\n [attr.maxlength]=\"maxCharacters\"\n (focusin)=\"onActive(true, 'focus')\"\n ></textarea>\n </ng-template>\n\n <div\n class=\"options\"\n ngIf=\"type === 'search' \|\| type === 'collapsed-search' \|\| type === 'password' \|\| type === 'validation-text'\"\n >\n <div class=\"options-container\">\n <ui-button\n ngIf=\"showClose\"\n variant=\"secondary\"\n [justIcon]=\"true\"\n class=\"close\"\n iconName=\"Close\"\n [label]=\"('COMMON.CLEAR' \| uiTranslate \| async)!\"\n (buttonClickEvent)=\"clearValue()\"\n [ariaLabel]=\"ariaLabel + '--' + ('COMMON.CLEAR' \| uiTranslate \| async)\"\n ></ui-button>\n <ui-button\n class=\"password\"\n variant=\"secondary\"\n [tooltip]=\"((showPassword ? 'FIELD.HIDE_PASSWORD' : 'FIELD.SHOW_PASSWORD') \| uiTranslate \| async)!\"\n ngIf=\"type === 'password'\"\n [justIcon]=\"true\"\n role=\"switch\"\n [attr.aria-checked]=\"showPassword\"\n [iconName]=\"getPasswordIcon\"\n [applicationTheme]=\"applicationTheme\"\n (click)=\"showPasswordClick()\"\n #btn\n (keydown.enter)=\"refocusPasswordButton(btn)\"\n (keydown.space)=\"refocusPasswordButton(btn)\"\n ></ui-button>\n\n <ng-container\n ngIf=\"\n type === 'validation-text' && (applicationTheme === 'dark' \|\| applicationTheme === 'light') && value.length\n \"\n >\n <ui-button\n ngIf=\"!isValid\"\n class=\"validation\"\n [variant]=\"'text'\"\n [applicationTheme]=\"'light'\"\n [label]=\"'Validate'\"\n [loading]=\"loading\"\n (click)=\"validate()\"\n [disabled]=\"disabled\"\n [size]=\"'small'\"\n ></ui-button>\n <ui-icon class=\"valid\" [color]=\"'white'\" applicationTheme=\"light\" [name]=\"'Check'\" ngIf=\"isValid\"></ui-icon>\n </ng-container>\n </div>\n </div>\n @if (hasTextAreaCounter) {\n <mat-hint\n class=\"info\"\n ngIf=\"\n (type === 'textarea' \|\| type === 'textarea-scrollable') &&\n !errorsLength &&\n !(ngControl?.errors \| hasValidationError)\n \"\n >{{ value.length }} / {{ maxCharacters }}</mat-hint\n >\n }\n\n <mat-hint\n class=\"info\"\n ngIf=\"\n hintMessage &&\n !errorsLength &&\n !(ngControl?.errors \| hasValidationError) &&\n type !== 'textarea' &&\n type !== 'textarea-scrollable'\n \"\n >{{ hintMessage }}</mat-hint\n >\n <mat-hint class=\"error\" ngIf=\"errorsLength \|\| (ngControl?.errors \| hasValidationError)\">\n <ng-template [ngIf]=\"errorsLength\">\n <div class=\"errors\" ngFor=\"let error of _errors; trackBy: trackByFn\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n </ng-template>\n\n <ui-validation-error\n ngIf=\"ngControl && !hideBuiltInErrors\"\n [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors ? null : label\"\n ></ui-validation-error>\n </mat-hint>\n\n @if (badgeVariant) {\n <ui-badge class=\"field-badge\" [variant]=\"badgeVariant\"></ui-badge>\n }\n </mat-form-field>\n</ng-container>\n","queryGuide":{"roles":["textbox","switch"],"ariaAttributes":["aria-label","aria-invalid","aria-labelledby","aria-describedby","aria-checked"],"dataTestIds":[],"materialComponents":["mat-form-field","mat-label","mat-icon","mat-hint"],"childUIComponents":["ui-icon","ui-button","ui-validation-error","ui-badge"],"suggestedQueries":["screen.getByRole('textbox')","screen.getByRole('switch')","screen.getByLabelText('label text')"]},"filePath":"components/field/field.component.ts","supportsTheme":true,"lastModified":1775743558149.8367},"file-upload":{"name":"FileUploadComponent","selector":"ui-file-upload","category":"file upload","description":"FileUploadComponent component","importPath":"@testgorilla/tgo-ui/components/file-upload","moduleName":"FileUploadComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"maxFileSizeMB","type":"number","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"minFileSizeMB","type":"number","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"supportedFileTypes","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Supported files for input field","isSignal":false},{"name":"uploadProgress","type":"number","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Upload progress","isSignal":false},{"name":"showUploadProgress","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Show Upload progress percentage or not","isSignal":false},{"name":"fileProcessingMessage","type":"string \| undefined","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Custom progress message","isSignal":false},{"name":"errors","type":"string[] \| null","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"File upload errors","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"File upload disabled","isSignal":false},{"name":"file","type":"File \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"Existing file information","isSignal":false},{"name":"companyColor","type":"string \| null","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Color of the file upload.\nDefaults to Test Gorilla primary color.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"ariaLabel","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"A string representing the ARIA label for accessibility.\nThis label is used to provide an accessible name for the input element.","isSignal":false},{"name":"ariaRequired","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"showFileSize","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Whether to show the file size information.","isSignal":false}],"outputs":[{"name":"OnDrop","eventType":"File","alias":null,"description":"","isSignal":false}],"module":{"name":"FileUploadComponentModule","imports":["CommonModule","MatFormFieldModule","MatInputModule","IconComponentModule","ProgressBarComponentModule","UiTranslatePipe"],"exports":["FileUploadComponent"],"declarations":["FileUploadComponent","DragDropDirective"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"","template":"<ng-container>\n <div\n class=\"upload-file-container\"\n uiDragDrop\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ 'upload-errors': !!errors \|\| isMissedMinSize, 'upload-file-container-disabled': disabled }\"\n (fileDropped)=\"onFileDropped($event)\"\n tabindex=\"0\"\n [tabIndex]=\"0\"\n (keydown)=\"onKeydown($event)\"\n (click)=\"fileDrop?.nativeElement?.click()\"\n >\n <div ngIf=\"browse && !(success && !!file && progress)\" [@inOutAnimation] class=\"upload-files\">\n <div class=\"upload-browse\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n\n <div class=\"errors\" ngIf=\"!!errors \|\| isMissedMinSize\" role=\"alert\">\n <ng-container ngIf=\"!!errors\">\n <span ngFor=\"let error of errors\"><ui-icon name=\"Error\" class=\"error-icon\"></ui-icon> {{ error }}</span>\n </ng-container>\n\n <span ngIf=\"isMissedMinSize\">\n <ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>\n {{ translationContext + 'MIN_SIZE_ERROR' \| uiTranslate: { min: minFileSizeMB } \| async }}\n </span>\n </div>\n <input\n [attr.aria-labelledby]=\"success \|\| progress ? '' : 'drag-and-drop'\"\n [attr.aria-describedby]=\"'upload-supported-files'\"\n [tabIndex]=\"-1\"\n class=\"form-control\"\n #fileDrop\n type=\"file\"\n id=\"file\"\n [accept]=\"supportedFileTypes\"\n [disabled]=\"disabled\"\n (change)=\"onChangeUpload($event)\"\n />\n <p ngIf=\"applicationTheme === 'classic'; else rebrandedDnDCopyTpl\">\n {{ translationContext + 'DRAG_AND_DROP_OR' \| uiTranslate \| async }}\n <span class=\"semibold\"> {{ translationContext + 'BROWSE' \| uiTranslate \| async \| lowercase }}</span>\n {{ translationContext + 'YOUR_FILES' \| uiTranslate \| async }}\n </p>\n <span class=\"upload-text\">{{ maxFileSizeMB }}{{ translationContext + 'MAX_SIZE' \| uiTranslate \| async }}</span>\n <span ngIf=\"minFileSizeMB\" class=\"upload-text\"\n >{{ minFileSizeMB }}{{ translationContext + 'MIN_SIZE' \| uiTranslate \| async }}</span\n >\n </div>\n </div>\n @if (success) {\n <div class=\"upload-success\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n <span class=\"upload-success-text\"\n ><ui-icon name=\"Check-round-in-line\" [color]=\"colorUploadSuccess\"></ui-icon\n >{{ translationContext + 'FILE_UPLOADING_SUCCESS' \| uiTranslate \| async }}</span\n >\n <input\n [tabIndex]=\"-1\"\n [attr.aria-labelledby]=\"success \|\| progress ? '' : 'drag-and-drop'\"\n [attr.aria-describedby]=\"success \|\| progress ? '' : 'supported-file-types'\"\n class=\"form-control\"\n #fileDrop\n type=\"file\"\n id=\"fileTest\"\n [accept]=\"supportedFileTypes\"\n (change)=\"onChangeUpload($event)\"\n [disabled]=\"disabled\"\n />\n <span class=\"upload-text\">{{ file?.name }}</span>\n @if (showFileSize) {\n <span class=\"upload-text\">{{\n translationContext + 'FILE_SIZE' \| uiTranslate: { fileSize: fileSizeInMB } \| async\n }}</span>\n }\n </div>\n }\n <div class=\"upload-progress\" [@inOutAnimationProgress] ngIf=\"!!progress && !!file && !success\">\n <p>{{ file.name }}</p>\n <ui-progress-bar\n [progress]=\"uploadProgress\"\n [companyColor]=\"compColor\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-progress-bar>\n <p class=\"upload-text\">\n {{ fileProcessingMessage ?? (translationContext + 'UPLOADING' \| uiTranslate \| async) }}\n @if (showUploadProgress) {\n <span>{{ uploadProgress }}</span\n >%\n }\n </p>\n </div>\n\n <ng-template #iconTpl>\n <ui-icon\n ngIf=\"applicationTheme === 'classic'; else rebrandedIconTpl\"\n class=\"upload-icon\"\n name=\"File-upload\"\n ></ui-icon>\n <ng-template #rebrandedIconTpl>\n <ui-icon class=\"upload-icon\" name=\"Upload\" [size]=\"'24'\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n </ng-template>\n </ng-template>\n <ng-template #rebrandedDnDCopyTpl>\n <p id=\"'drag-and-drop'\">{{ translationContext + 'DRAG_AND_DROP' \| uiTranslate \| async }}</p>\n </ng-template>\n\n <div\n ngIf=\"!!supportedFileTypes\"\n [attr.theme]=\"applicationTheme\"\n class=\"upload-supported-files\"\n id=\"upload-supported-files\"\n >\n <span>{{ translationContext + 'SUPPORTED_FILE_TYPES' \| uiTranslate \| async }}</span\n >{{ supportedFileTypes }}\n </div>\n </div>\n</ng-container>\n","queryGuide":{"roles":["alert"],"ariaAttributes":["aria-label","aria-required","aria-labelledby","aria-describedby"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon","ui-progress-bar"],"suggestedQueries":["screen.getByRole('alert')","screen.getByLabelText('label text')"]},"filePath":"components/file-upload/file-upload.component.ts","supportsTheme":true,"lastModified":1775743558149.8367},"filter-button":{"name":"FilterButtonComponent","selector":"ui-filter-button","category":"forms","description":"To use the Filter Button component, you need to import the `FilterButtonComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/filter-button","moduleName":"FilterButtonComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"The button label when no value is selected.","isSignal":false},{"name":"message","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Optional message to display on the overflow bottom.","isSignal":false},{"name":"value","type":"FilterValue[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"List of selected values.","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether the component is disabled.\nDefault: false.","isSignal":false},{"name":"allowClear","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Whether the user should be allowed to clear the values.\nDefault: true.","isSignal":false},{"name":"singleSelection","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether the user should be allowed to select single or multiple values.\nDefault: false.","isSignal":false},{"name":"iconName","type":"IconName","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"The icon name to display.","isSignal":false},{"name":"iconPosition","type":"ButtonIconPosition","defaultValue":"'right'","required":false,"alias":null,"transform":null,"description":"The position of the icon.\nDefault: 'right'.","isSignal":false},{"name":"noOptionsMessage","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Optional message to display if there are no options to select available","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"options","type":"FilterButtonOption[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"List of options.","isSignal":true}],"outputs":[{"name":"changed","eventType":"FilterValue[]","alias":null,"description":"Emits the list of selected values when the selection changes.","isSignal":false},{"name":"optionChange","eventType":"OptionChangeEvent","alias":null,"description":"Emits the option change event","isSignal":false}],"module":{"name":"FilterButtonComponentModule","imports":["CommonModule","FormsModule","MatTooltipModule","OverlayModule","UiTranslatePipe","ButtonComponentModule","IconComponentModule","CheckboxComponentModule","FieldComponentModule","EllipseTextDirective","RadioButtonComponentModule"],"exports":["FilterButtonComponent"],"declarations":["FilterButtonComponent"],"providers":[]},"types":{"typeAliases":[{"name":"FilterValue","value":"string \| number"}],"interfaces":[{"name":"FilterButtonOption","properties":[{"name":"value","type":"FilterValue","optional":false},{"name":"label","type":"string","optional":false},{"name":"labelNumber","type":"number","optional":true},{"name":"icon","type":"IconName","optional":true},{"name":"sectionTitle","type":"string","optional":true}]},{"name":"OptionChangeEvent","properties":[{"name":"selected","type":"boolean","optional":false},{"name":"option","type":"FilterButtonOption","optional":false}]}],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Filter Button component, you need to import the `FilterButtonComponentModule` in your module:\n\n```typescript\nimport { FilterButtonComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n FilterButtonComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-filter-button\n label=\"Categories\"\n [options]=\"[\n { label: 'Option 1', value: 'op1', labelNumber: 5 },\n { label: 'Option 2', value: 'op2', labelNumber: 3 },\n { label: 'Option 3', value: 'op3', labelNumber: 12 }\n ]\"\n [singleSelection]=\"false\" \n applicationTheme=\"light\"\n (selectionChange)=\"onFilterChange($event)\">\n</ui-filter-button>\n```\n\nThe filter button component provides an interactive dropdown for selecting filter options, with support for single or multiple selection.","template":"<ng-container>\n <ui-button\n [matTooltip]=\"tooltip()\"\n [matTooltipClass]=\"'tooltip-multi-line ' + applicationTheme\"\n [matTooltipPosition]=\"'above'\"\n class=\"ui-filter-button-trigger\"\n [class.button-opened]=\"isOpen()\"\n [variant]=\"value.length \|\| isOpen() ? 'secondary' : 'ghost'\"\n [label]=\"displayedLabel() \|\| label\"\n [disabled]=\"disabled \|\| (options().length === 0 && !noOptionsMessage)\"\n (click)=\"toggle()\"\n type=\"button\"\n size=\"small\"\n [role]=\"'combobox'\"\n [tooltip]=\"value.length ? ' ' : ''\"\n [attr.aria-expanded]=\"isOpen()\"\n [iconName]=\"iconName \|\| (isOpen() ? 'Arrow-chevron-up-filled' : 'Arrow-chevron-down-filled')\"\n [iconPosition]=\"iconPosition\"\n [applicationTheme]=\"applicationTheme\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n ></ui-button>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"outsideClick()\"\n >\n @if (displayedOptions().length) {\n <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n {{\n translationContext + 'ACTIVE_ITEM'\n \| uiTranslate: { active: (keyManager.activeItemIndex ?? 0) + 1, total: filterOptions.length }\n \| async\n }}\n </div>\n <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n {{\n (value.includes(displayedOptions()[keyManager.activeItemIndex ?? 0].value)\n ? translationContext + 'SELECTED'\n : translationContext + 'DESELECTED'\n )\n \| uiTranslate\n \| async\n }}\n </div>\n }\n <div class=\"ui-filter-button\" #overlayContainer>\n <div class=\"ui-filter-button-header\" ngIf=\"options().length > MIN_OPTIONS_LENGTH_FOR_SEARCH\">\n <ui-field\n type=\"search\"\n [showBottomContent]=\"false\"\n [ngModel]=\"search()\"\n (ngModelChange)=\"search.set($event)\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-field>\n </div>\n <div class=\"ui-filter-button-list\" #list tabindex=\"0\" (keydown)=\"keyDownHandler($event)\">\n @if (!displayedOptions().length && options().length) {\n <div class=\"no-results-found\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' \| uiTranslate \| async }}</span>\n </div>\n } @else {\n <div ngFor=\"let section of displayedOptions(); index as i\">\n <div\n ngIf=\"section.sectionTitle && section.sectionTitle !== displayedOptions()[i - 1]?.sectionTitle\"\n class=\"section-title\"\n >\n {{ section.sectionTitle }}\n </div>\n <div\n class=\"item\"\n [class.item-selected]=\"isSelected(section.value)\"\n tabindex=\"0\"\n (click)=\"optionChanged(!isSelected(section.value), section)\"\n (keydown.enter)=\"optionChanged(!isSelected(section.value), section)\"\n >\n <ui-radio-button\n (click)=\"$event.stopPropagation()\"\n ngIf=\"singleSelection\"\n [tabIndex]=\"i === 0 ? 0 : -1\"\n [selected]=\"isSelected(section.value)\"\n (changeRadio)=\"optionChanged($event.optionChecked, section)\"\n [applicationTheme]=\"applicationTheme\"\n #filterOption\n >\n </ui-radio-button>\n <ui-checkbox\n (click)=\"$event.stopPropagation()\"\n [class.with-label-number]=\"section.labelNumber !== undefined\"\n ngIf=\"!singleSelection\"\n [tabIndex]=\"i === 0 ? 0 : -1\"\n [checked]=\"isSelected(section.value)\"\n (changed)=\"optionChanged($event, section)\"\n [applicationTheme]=\"applicationTheme\"\n #filterOption\n ></ui-checkbox>\n <ui-icon ngIf=\"section.icon\" [applicationTheme]=\"applicationTheme\" [name]=\"section.icon\"></ui-icon>\n <span\n #tooltip=\"matTooltip\"\n class=\"item-label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event, section.value)\"\n [matTooltip]=\"showTooltip[section.value] ? section.label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >\n {{ section.label }}\n </span>\n <span class=\"item-number\" ngIf=\"section.labelNumber !== undefined\">({{ section.labelNumber }})</span>\n </div>\n </div>\n }\n </div>\n @if (!options().length && !!noOptionsMessage) {\n <div class=\"ui-filter-button-no-options\" [innerHTML]=\"noOptionsMessage\"></div>\n } @else {\n <div class=\"ui-filter-button-footer\" ngIf=\"allowClear \|\| message\">\n <ui-button\n ngIf=\"allowClear\"\n variant=\"text\"\n size=\"small\"\n [label]=\"('COMMON.RESET' \| uiTranslate \| async)!\"\n (click)=\"clearValue()\"\n [applicationTheme]=\"applicationTheme\"\n (keydown.escape)=\"toggle()\"\n ></ui-button>\n <div class=\"ui-filter-button-footer-message\">\n {{ message }}\n </div>\n </div>\n }\n </div>\n </ng-template>\n</ng-container>\n","queryGuide":{"roles":[],"ariaAttributes":["aria-expanded","aria-live"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-button","ui-field","ui-radio-button","ui-checkbox","ui-icon"],"suggestedQueries":[]},"filePath":"components/filter-button/filter-button.component.ts","supportsTheme":true,"lastModified":1775743558149.8367},"gaussian-chart":{"name":"GaussianChartComponent","selector":"ui-gaussian-chart","category":"charts","description":"GaussianChartComponent component","importPath":"@testgorilla/tgo-ui/components/gaussian-chart","moduleName":"GaussianChartComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"score","type":"number","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"The candidate score to be displayed on the chart.","isSignal":false},{"name":"bestCandidateScore","type":"number","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"The best candidate score to be displayed on the chart.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"legendPosition","type":"LegendPosition","defaultValue":"'bottom-start'","required":false,"alias":null,"transform":null,"description":"Controls the position of the legend relative to the chart.","isSignal":false}],"outputs":[],"module":{"name":"GaussianChartComponentModule","imports":["NgClass","UiTranslatePipe","NgChartsModule","MatTooltipModule","CommonModule","IconComponentModule","MemoizeFuncPipe"],"exports":["GaussianChartComponent"],"declarations":["GaussianChartComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"","template":"<div\n class=\"chart-section\"\n ngIf=\"score\"\n [attr.aria-label]=\"\n translationContext + 'ARIA_LABEL'\n \| uiTranslate\n : {\n score: score,\n activeBucket: getScoreTranslationKey(score) \| uiTranslate \| async,\n bestCandidateScore: bestCandidateScore,\n activeBucketBestScore: getScoreTranslationKey(bestCandidateScore) \| uiTranslate \| async,\n }\n \| async\n \"\n tabindex=\"0\"\n>\n <!-- Legend positioned at top -->\n @if (legendPosition === 'top-start' \|\| legendPosition === 'top-end') {\n <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n }\n\n <div class=\"chart-range-wrapper\">\n <div class=\"normal-chart-container\">\n <div class=\"normal-chart\">\n <canvas baseChart [data]=\"gaussianChartData\" [options]=\"gaussianChartOptions\" type=\"line\" class=\"chart\">\n </canvas>\n <div\n class=\"overlay-icon\"\n [style.bottom]=\"[overlayYValue, 3, 'subtract'] \| memoizeFunc: getCalcPosition\"\n [style.left]=\"[overlayXValue, 20, 'subtract'] \| memoizeFunc: getCalcPosition\"\n >\n <div class=\"drop-icon\">\n <ui-icon name=\"Pin-marker\" size=\"40\"></ui-icon>\n <span class=\"curve-score\">{{ score }}</span>\n </div>\n </div>\n <div\n class=\"best-score\"\n [style.height]=\"[100 - overlayYBestScoreValue, normalContainerPadding, 'add'] \| memoizeFunc: getCalcPosition\"\n [style.bottom]=\"overlayYBestScoreValue + '%'\"\n [style.left]=\"overlayXBestScoreValue + '%'\"\n >\n <div\n class=\"best-score-content\"\n [style.left]=\"bestCandidateScore \| memoizeFunc: getBestScoreContentPosition : this\"\n >\n <ui-icon name=\"Trophy\"></ui-icon>\n {{ bestCandidateScore }}\n </div>\n </div>\n </div>\n <div class=\"overlay\">\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWEST\">\n <div\n class=\"column-item\"\n [class.text-bold]=\"activeBucket === PercentileThreshold.LOWEST\"\n [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST_TOOLTIP' \| uiTranslate \| async) \|\| ''\"\n >\n {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST' \| uiTranslate \| async }}\n </div>\n </div>\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWER\">\n <div\n class=\"column-item\"\n [class.text-bold]=\"activeBucket === PercentileThreshold.LOWER\"\n [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER_TOOLTIP' \| uiTranslate \| async) \|\| ''\"\n >\n {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER' \| uiTranslate \| async }}\n </div>\n </div>\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.AVERAGE\">\n <div\n class=\"column-item\"\n [class.text-bold]=\"activeBucket === PercentileThreshold.AVERAGE\"\n [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE_TOOLTIP' \| uiTranslate \| async) \|\| ''\"\n >\n {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE' \| uiTranslate \| async }}\n </div>\n </div>\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHER\">\n <div\n class=\"column-item\"\n [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHER\"\n [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER_TOOLTIP' \| uiTranslate \| async) \|\| ''\"\n >\n {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER' \| uiTranslate \| async }}\n </div>\n </div>\n <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHEST\">\n <div\n class=\"column-item\"\n [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHEST\"\n [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST_TOOLTIP' \| uiTranslate \| async) \|\| ''\"\n >\n {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST' \| uiTranslate \| async }}\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"range\">\n <div>1</div>\n <div>20</div>\n <div>40</div>\n <div>60</div>\n <div>80</div>\n <div>99</div>\n </div>\n </div>\n\n <!-- Legend positioned at bottom -->\n @if (legendPosition === 'bottom-start' \|\| legendPosition === 'bottom-end') {\n <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n }\n</div>\n\n<!-- Reusable legend template -->\n<ng-template #legendTemplate>\n <div class=\"legend-container\" [ngClass]=\"'legend-' + legendPosition\">\n <div class=\"legend\">\n <ui-icon name=\"Dot\" color=\"gray\"></ui-icon>\n {{ translationContext + 'CANDIDATE_SCORE' \| uiTranslate \| async }}\n </div>\n <div class=\"legend\">\n <ui-icon name=\"Trophy\" color=\"gray\"></ui-icon>\n {{ translationContext + 'HIGHEST_SCORE' \| uiTranslate \| async }}\n </div>\n </div>\n</ng-template>\n","queryGuide":{"roles":[],"ariaAttributes":["aria-label"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon"],"suggestedQueries":["screen.getByLabelText('label text')"]},"filePath":"components/gaussian-chart/gaussian-chart.component.ts","supportsTheme":true,"lastModified":1775743558150.8367},"icon":{"name":"IconComponent","selector":"ui-icon","category":"icons","description":"IconComponent component","importPath":"@testgorilla/tgo-ui/components/icon","moduleName":"IconComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"size","type":"IconSize","defaultValue":"'16'","required":false,"alias":null,"transform":null,"description":"Icon size","isSignal":false},{"name":"cssClass","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Icon css class","isSignal":false},{"name":"name","type":"IconName","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Icon name","isSignal":false},{"name":"color","type":"IconColor","defaultValue":"'black'","required":false,"alias":null,"transform":null,"description":"Icon color","isSignal":false},{"name":"filled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Icon filled","isSignal":false},{"name":"toggleIconStyle","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"useFullIconName","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":false}],"outputs":[],"module":{"name":"IconComponentModule","imports":["CommonModule","MatIconModule","HttpClientModule"],"exports":["IconComponent"],"declarations":["IconComponent"],"providers":["HttpClientModule"]},"types":{"typeAliases":[{"name":"TgoIcons","value":"(typeof tgoIcons)[number]"},{"name":"TgoRebrandIcons","value":"(typeof tgoRebrandIcons)[number]"},{"name":"IconSize","value":"'16' \| '24' \| '40' \| '80'"},{"name":"IconName","value":"TgoRebrandIcons \| TgoIcons \| ''"},{"name":"IconColor","value":"string"}],"interfaces":[],"enums":[]},"examples":[],"documentation":"","template":"@if (isIconLoaded) {\n <mat-icon [svgIcon]=\"_name\" [attr.class]=\"customCssClass\" [ngStyle]=\"cssStyle\"></mat-icon>\n} @else {\n <div class=\"empty-icon-placeholder\"></div>\n}\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":["mat-icon"],"childUIComponents":[],"suggestedQueries":[]},"filePath":"components/icon/icon.component.ts","supportsTheme":true,"lastModified":1775743558153.8367},"icon-label":{"name":"IconLabelComponent","selector":"ui-icon-label","category":"icons","description":"IconLabelComponent component","importPath":"@testgorilla/tgo-ui/components/icon-label","moduleName":"IconLabelComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"iconSize","type":"IconSize","defaultValue":"'16'","required":false,"alias":null,"transform":null,"description":"Icon size","isSignal":false},{"name":"iconName","type":"IconName","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Icon name","isSignal":false},{"name":"text","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Label","isSignal":false},{"name":"iconColor","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Icon color","isSignal":false},{"name":"iconIndent","type":"unknown","defaultValue":"'8'","required":false,"alias":null,"transform":null,"description":"Indent between icon and label","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false}],"outputs":[],"module":{"name":"IconLabelComponentModule","imports":["CommonModule","IconComponentModule"],"exports":["IconLabelComponent"],"declarations":["IconLabelComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"","template":"<ui-icon [name]=\"iconName\" [size]=\"iconSize\" [color]=\"iconColor\" aria-hidden=\"true\"></ui-icon>\n<span>{{ text }}</span>\n","queryGuide":{"roles":[],"ariaAttributes":["aria-hidden"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon"],"suggestedQueries":[]},"filePath":"components/icon-label/icon-label.component.ts","supportsTheme":true,"lastModified":1775743558150.8367},"inline-field":{"name":"InlineFieldComponent","selector":"ui-inline-field","category":"forms","description":"The Inline Field component enables users to make quick edits to text content with explicit save/cancel confirmation, without navigating to a separate form or modal.","importPath":"@testgorilla/tgo-ui/components/inline-field","moduleName":"InlineFieldComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"id","type":"unknown","defaultValue":"`inline-field-${inlineFieldID++}`","required":false,"alias":null,"transform":null,"description":"Component ID for accessibility","isSignal":true},{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Field label","isSignal":true},{"name":"placeholder","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Field placeholder","isSignal":true},{"name":"value","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Current value","isSignal":true},{"name":"required","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether the field is required","isSignal":true},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether the field is disabled","isSignal":true},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Application theme","isSignal":true},{"name":"fieldType","type":"FieldType","defaultValue":"'text'","required":false,"alias":null,"transform":null,"description":"Field type","isSignal":true},{"name":"maxRows","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"Field type","isSignal":true},{"name":"errors","type":"string[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"Error messages","isSignal":true},{"name":"showErrors","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Whether to show errors","isSignal":true},{"name":"buttonConfig","type":"InlineFieldButtonConfig","defaultValue":"{\n saveLabel: 'Save',\n cancelLabel: 'Cancel',\n saveIcon: 'Check-filled',\n cancelIcon: 'Close-filled',\n }","required":false,"alias":null,"transform":null,"description":"Button configuration","isSignal":true},{"name":"validation","type":"InlineFieldValidation","defaultValue":"{}","required":false,"alias":null,"transform":null,"description":"Validation configuration","isSignal":true},{"name":"ariaLabel","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"ARIA label","isSignal":true},{"name":"fullWidth","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Full width","isSignal":true}],"outputs":[{"name":"save","eventType":"InlineFieldChangeEvent","alias":null,"description":"Emitted when save button is clicked","isSignal":true},{"name":"cancel","eventType":"void","alias":null,"description":"Emitted when cancel button is clicked","isSignal":true},{"name":"valueChange","eventType":"string","alias":null,"description":"Emitted when value changes","isSignal":true},{"name":"editingModeChange","eventType":"boolean","alias":null,"description":"Emitted when editing mode changes","isSignal":true},{"name":"focusEvent","eventType":"void","alias":null,"description":"Emitted on focus","isSignal":true},{"name":"blurEvent","eventType":"void","alias":null,"description":"Emitted on blur","isSignal":true}],"module":{"name":"InlineFieldComponentModule","imports":["CommonModule","FormsModule","ReactiveFormsModule","MatInputModule","ButtonComponentModule","FieldComponentModule","IconComponentModule"],"exports":["InlineFieldComponent"],"declarations":["InlineFieldComponent"],"providers":[]},"types":{"typeAliases":[{"name":"InlineFieldState","value":"'default' \| 'focused' \| 'editing' \| 'error' \| 'disabled' \| 'loading'"}],"interfaces":[{"name":"InlineFieldEvents","properties":[{"name":"onSave","type":"EventEmitter<string>","optional":false},{"name":"onCancel","type":"EventEmitter<void>","optional":false},{"name":"onValueChange","type":"EventEmitter<string>","optional":false},{"name":"onEditingModeChange","type":"EventEmitter<boolean>","optional":false},{"name":"onFocus","type":"EventEmitter<void>","optional":false},{"name":"onBlur","type":"EventEmitter<void>","optional":false}]},{"name":"InlineFieldButtonConfig","properties":[{"name":"saveLabel","type":"string","optional":true},{"name":"cancelLabel","type":"string","optional":true},{"name":"saveIcon","type":"IconName","optional":true},{"name":"cancelIcon","type":"IconName","optional":true},{"name":"showOnHoverOnly","type":"boolean","optional":true}]},{"name":"InlineFieldValidation","properties":[{"name":"required","type":"boolean","optional":true},{"name":"minLength","type":"number","optional":true},{"name":"maxLength","type":"number","optional":true},{"name":"pattern","type":"RegExp","optional":true},{"name":"customValidator","type":"(value: string) => boolean","optional":true}]},{"name":"InlineFieldChangeEvent","properties":[{"name":"value","type":"string","optional":false},{"name":"saved","type":"boolean","optional":false},{"name":"previousValue","type":"string","optional":false}]}],"enums":[]},"examples":[],"documentation":"# Inline Field Component\n\nThe Inline Field component enables users to make quick edits to text content with explicit save/cancel confirmation, without navigating to a separate form or modal.\n\n## When to Use\n\n- Quick edits to short text (titles, labels, single-line fields) inside pages, lists, tables, or cards\n- Edits that can affect other data, need validation, or could be destructive and require save/cancel confirmation\n- Inside compound controls (e.g., tags/suggestions box) where users switch between viewing and editing modes\n- Renaming items in lists, tables, or card layouts\n\n## When NOT to Use\n\n- Long, multi-step edits → use a dedicated form or modal instead\n- Trivial changes that can auto-save safely → use standard input with autosave pattern\n- Complex form fields with multiple inputs → use full form components\n\n## Installation & Import\n\n```typescript\nimport { InlineFieldComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n InlineFieldComponentModule\n ]\n})\nexport class YourModule { }\n```\n\n## Basic Usage\n\n### Simple Inline Field\n```html\n<ui-inline-field\n label=\"Title\"\n [(value)]=\"title\"\n placeholder=\"Enter title\"\n (save)=\"onSave($event)\"\n (cancel)=\"onCancel()\">\n</ui-inline-field>\n```\n\n### Required Field with Validation\n```html\n<ui-inline-field\n label=\"Email Address\"\n [(value)]=\"email\"\n [required]=\"true\"\n [validation]=\"{\n required: true,\n pattern: /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\n }\"\n placeholder=\"Enter email address\"\n (save)=\"onEmailSave($event)\">\n</ui-inline-field>\n```\n\n### Different Field Types\n```html\n<ui-inline-field\n label=\"Password\"\n [(value)]=\"password\"\n [fieldType]=\"'password'\"\n placeholder=\"Enter password\"\n (save)=\"onPasswordSave($event)\">\n</ui-inline-field>\n```\n\n### Custom Button Labels\n```html\n<ui-inline-field\n label=\"Assessment Name\"\n [(value)]=\"assessmentName\"\n [buttonConfig]=\"{\n saveLabel: 'Apply',\n cancelLabel: 'Discard',\n saveIcon: 'Book-filled',\n cancelIcon: 'Upload-filled'\n }\"\n (save)=\"onAssessmentNameSave($event)\">\n</ui-inline-field>\n```\n\n## API Reference\n\n### Inputs\n\n\| Property \| Type \| Default \| Description \|\n\|----------\|------\|---------\|-------------\|\n\| `id` \| `string` \| `'inline-field-{counter}'` \| Unique component ID for accessibility \|\n\| `label` \| `string` \| `''` \| Field label displayed above the input \|\n\| `value` \| `string` \| `''` \| Current field value \|\n\| `placeholder` \| `string` \| `''` \| Placeholder text when field is empty \|\n\| `required` \| `boolean` \| `false` \| Whether the field is required \|\n\| `disabled` \| `boolean` \| `false` \| Whether the field is disabled \|\n\| `fieldType` \| `FieldType` \| `'text'` \| Field type (text, password, email, etc.) \|\n\| `maxRows` \| `number` \| `0` \| Maximum rows for textarea fields \|\n\| `applicationTheme` \| `ApplicationTheme` \| `'light'` \| Application theme (light/dark/classic) \|\n\| `errors` \| `string[]` \| `[]` \| Array of error messages to display \|\n\| `showErrors` \| `boolean` \| `true` \| Whether to display error messages \|\n\| `fullWidth` \| `boolean` \| `false` \| Whether field takes full container width \|\n\| `ariaLabel` \| `string` \| `''` \| ARIA label for accessibility \|\n\| `buttonConfig` \| `InlineFieldButtonConfig` \| See below \| Save/cancel button configuration \|\n\| `validation` \| `InlineFieldValidation` \| `{}` \| Validation rules configuration \|\n\n### Button Configuration (`InlineFieldButtonConfig`)\n\n\| Property \| Type \| Default \| Description \|\n\|----------\|------\|---------\|-------------\|\n\| `saveLabel` \| `string` \| `'Save'` \| Save button label \|\n\| `cancelLabel` \| `string` \| `'Cancel'` \| Cancel button label \|\n\| `saveIcon` \| `IconName` \| `'Check-filled'` \| Save button icon name \|\n\| `cancelIcon` \| `IconName` \| `'Close-filled'` \| Cancel button icon name \|\n\| `showOnHoverOnly` \| `boolean` \| `false` \| Show buttons only on hover (styling support only) \|\n\nNote: Buttons are automatically styled with `secondary-inverted` variant and `small` size.\n\n### Validation Configuration (`InlineFieldValidation`)\n\n\| Property \| Type \| Description \|\n\|----------\|------\|-------------\|\n\| `required` \| `boolean` \| Field is required \|\n\| `minLength` \| `number` \| Minimum character length \|\n\| `maxLength` \| `number` \| Maximum character length \|\n\| `pattern` \| `RegExp` \| Validation pattern \|\n\| `customValidator` \| `(value: string) => string \\\| null` \| Custom validation function \|\n\n### Outputs\n\n\| Event \| Type \| Description \|\n\|-------\|------\|-------------\|\n\| `save` \| `InlineFieldChangeEvent` \| Emitted when save button is clicked \|\n\| `cancel` \| `void` \| Emitted when cancel button is clicked \|\n\| `valueChange` \| `string` \| Emitted when field value changes \|\n\| `editingModeChange` \| `boolean` \| Emitted when editing mode toggles \|\n\| `focusEvent` \| `void` \| Emitted when field receives focus \|\n\| `blurEvent` \| `void` \| Emitted when field loses focus \|\n\n### Change Event (`InlineFieldChangeEvent`)\n\n```typescript\ninterface InlineFieldChangeEvent {\n value: string; // The new value\n saved: boolean; // Whether change was saved (true) or cancelled (false)\n previousValue: string; // Previous value before the change\n}\n```\n\n## Examples\n\n### Form Integration\n\n```typescript\n// Component\nexport class MyComponent {\n userForm = this.fb.group({\n firstName: ['', [Validators.required]],\n lastName: ['', [Validators.required, Validators.minLength(2)]],\n email: ['', [Validators.required, Validators.email]]\n });\n\n onFieldSave(field: string, event: InlineFieldChangeEvent) {\n this.userForm.patchValue({ [field]: event.value });\n // Perform API save\n this.saveUser(this.userForm.value);\n }\n\n getFieldErrors(fieldName: string): string[] {\n const control = this.userForm.get(fieldName);\n if (control?.errors && control?.touched) {\n const errors = [];\n if (control.errors['required']) errors.push('This field is required');\n if (control.errors['minlength']) errors.push('Minimum length not met');\n if (control.errors['email']) errors.push('Invalid email format');\n return errors;\n }\n return [];\n }\n}\n```\n\n```html\n<!-- Template -->\n<div class=\"user-profile\">\n <ui-inline-field\n label=\"First Name\"\n [value]=\"userForm.get('firstName')?.value\"\n [required]=\"true\"\n [validation]=\"{ required: true }\"\n [errors]=\"getFieldErrors('firstName')\"\n (save)=\"onFieldSave('firstName', $event)\">\n </ui-inline-field>\n\n <ui-inline-field\n label=\"Last Name\"\n [value]=\"userForm.get('lastName')?.value\"\n [required]=\"true\"\n [validation]=\"{ required: true, minLength: 2 }\"\n [errors]=\"getFieldErrors('lastName')\"\n (save)=\"onFieldSave('lastName', $event)\">\n </ui-inline-field>\n\n <ui-inline-field\n label=\"Email\"\n [value]=\"userForm.get('email')?.value\"\n [required]=\"true\"\n [validation]=\"{ \n required: true,\n pattern: /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\n }\"\n [errors]=\"getFieldErrors('email')\"\n (save)=\"onFieldSave('email', $event)\">\n </ui-inline-field>\n</div>\n```\n\n### List Item Editing\n\n```html\n<div class=\"criteria-list\">\n @for (let criterion of criteria; trackBy: trackByCriterionId) {\n <div class=\"criterion-item\">\n <ui-checkbox \n [(ngModel)]=\"criterion.selected\">\n </ui-checkbox>\n \n <ui-inline-field\n [value]=\"criterion.name\"\n placeholder=\"Enter criterion name\"\n [fullWidth]=\"true\"\n [buttonConfig]=\"{\n saveLabel: 'Save',\n cancelLabel: 'Cancel'\n }\"\n (save)=\"updateCriterion(criterion.id, $event.value)\"\n (cancel)=\"onCancelEdit()\">\n </ui-inline-field>\n </div>\n }\n</div>\n```\n\n### Custom Validation\n\n```typescript\nexport class ValidationExample {\n // Custom validation function\n validateSkillName = (value: string): string \| null => {\n if (!value) return 'Skill name is required';\n if (value.length < 3) return 'Skill name must be at least 3 characters';\n if (this.existingSkills.includes(value.toLowerCase())) {\n return 'This skill already exists';\n }\n return null;\n };\n\n existingSkills = ['javascript', 'typescript', 'angular'];\n}\n```\n\n```html\n<ui-inline-field\n label=\"Skill Name\"\n [value]=\"newSkillName\"\n [validation]=\"{\n customValidator: validateSkillName\n }\"\n placeholder=\"Enter skill name\"\n (save)=\"addSkill($event.value)\">\n</ui-inline-field>\n```\n\n## Keyboard Navigation\n\nThe Inline Field component supports comprehensive keyboard navigation:\n\n- Click or Focus on the field → Enter edit mode\n- Escape in edit mode → Cancel changes and exit edit mode \n- Enter in edit mode → Save changes and exit edit mode (except with Shift+Enter)\n- Tab in edit mode → Navigate to Save button → Cancel button → next focusable element\n- Focus out of component → Automatically cancel changes and exit edit mode\n\n## Accessibility\n\n### ARIA Support\n- `role=\"button\"` on display mode for screen readers\n- `aria-label` for describing the field purpose\n- `aria-describedby` linking to error messages\n- `aria-live=\"polite\"` for error announcements\n\n### Screen Reader Instructions\n- Clear instructions for keyboard navigation\n- Proper labeling of edit states\n- Error message announcements\n\n### High Contrast & Reduced Motion\n- High contrast mode support with enhanced borders\n- Respects `prefers-reduced-motion` settings\n- Keyboard focus indicators\n\n## Theming\n\n### Light Theme (Default)\n- White background with dark borders\n- Black text and focus indicators\n- Standard button styling\n\n### Dark Theme\n```html\n<ui-inline-field\n applicationTheme=\"dark\"\n label=\"Dark Theme Field\"\n [(value)]=\"value\">\n</ui-inline-field>\n```\n\n### Classic Theme\n```html\n<ui-inline-field\n applicationTheme=\"classic\"\n label=\"Classic Theme Field\"\n [(value)]=\"value\">\n</ui-inline-field>\n```\n\n## Best Practices\n\n### ✅ Do\n- Use for short, single-line text edits\n- Provide clear validation feedback\n- Use appropriate button labels for context\n- Implement proper error handling\n- Test keyboard navigation thoroughly\n- Use `fullWidth` for fields in constrained layouts\n- Provide meaningful ARIA labels for accessibility\n- Handle focus-out events appropriately\n\n### ❌ Don't\n- Use for complex, multi-field forms\n- Auto-save without explicit user confirmation\n- Use for very long text content\n- Skip validation for important fields\n- Ignore accessibility requirements\n- Use without proper error handling\n- Forget to handle the automatic cancel on focus-out\n\n## Migration from Standard Field\n\nIf migrating from a standard field to inline field:\n\n```typescript\n// Before: Standard field\n<ui-field\n label=\"Title\"\n [(ngModel)]=\"title\"\n (blur)=\"saveTitle()\">\n</ui-field>\n\n// After: Inline field\n<ui-inline-field\n label=\"Title\"\n [(value)]=\"title\"\n (save)=\"saveTitle($event.value)\">\n</ui-inline-field>\n```\n\n## Troubleshooting\n\n### Common Issues\n\nQ: Buttons don't appear when editing\nA: Ensure the component has enough space for button positioning. Check CSS overflow properties. Buttons are positioned absolutely below the field.\n\nQ: Validation doesn't work\nA: Verify validation configuration is properly set and error handling is implemented. Make sure to handle validation errors in the `save` event.\n\nQ: Field exits edit mode unexpectedly\nA: This is intended behavior when focus leaves the component. Use proper save handling to prevent data loss.\n\nQ: Keyboard navigation issues\nA: Ensure proper tab order and no conflicting keyboard event handlers. The component handles Enter, Escape, and Tab keys.\n\nQ: Custom icons don't show\nA: Ensure you're using valid `IconName` values from the icon library. Check that the icon names exist in your icon set.\n\nFor more help, check the Storybook examples or contact the design system team.\n","template":"<div class=\"inline-field-container\">\n <div class=\"field-wrapper\" [ngClass]=\"{ 'is-editing': isEditing() }\">\n <ui-field\n [id]=\"id() + '-input'\"\n [label]=\"label()\"\n [placeholder]=\"placeholder()\"\n [value]=\"currentValue()\"\n [required]=\"required()\"\n [disabled]=\"disabled()\"\n [errors]=\"errors()\"\n [showBottomContent]=\"showErrors()\"\n [ariaLabel]=\"ariaLabel()\"\n [applicationTheme]=\"applicationTheme()\"\n [fullWidth]=\"true\"\n [isAutocompleteOff]=\"true\"\n [type]=\"fieldType()\"\n [maxRows]=\"maxRows()\"\n (input)=\"onInputChange($event)\"\n (fieldBlur)=\"onInputBlur()\"\n (focusin)=\"onInputFocus()\"\n #fieldElement\n data-testid=\"inline-field\"\n ></ui-field>\n\n <div ngIf=\"isEditing()\" class=\"action-buttons\">\n <ui-button\n [label]=\"saveButtonConfig().label\"\n [iconName]=\"saveButtonConfig().iconName\"\n [variant]=\"saveButtonConfig().variant\"\n [size]=\"saveButtonConfig().size\"\n [disabled]=\"saveButtonConfig().disabled\"\n [applicationTheme]=\"applicationTheme()\"\n [iconPosition]=\"'left'\"\n (buttonClickEvent)=\"saveEdit()\"\n [attr.aria-label]=\"'Save ' + (label() \|\| 'field')\"\n class=\"save-button\"\n ></ui-button>\n\n <ui-button\n [label]=\"cancelButtonConfig().label\"\n [iconName]=\"cancelButtonConfig().iconName\"\n [variant]=\"cancelButtonConfig().variant\"\n [size]=\"cancelButtonConfig().size\"\n [disabled]=\"cancelButtonConfig().disabled\"\n [applicationTheme]=\"applicationTheme()\"\n [iconPosition]=\"'left'\"\n (buttonClickEvent)=\"cancelEdit()\"\n [attr.aria-label]=\"'Cancel editing ' + (label() \|\| 'field')\"\n class=\"cancel-button\"\n ></ui-button>\n </div>\n </div>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":["aria-label"],"dataTestIds":["inline-field"],"materialComponents":[],"childUIComponents":["ui-field","ui-button"],"suggestedQueries":["screen.getByLabelText('label text')","screen.getByTestId('inline-field')"]},"filePath":"components/inline-field/inline-field.component.ts","supportsTheme":true,"lastModified":1775743558154.8367},"logo":{"name":"LogoComponent","selector":"ui-logo","category":"logo","description":"To use the Logo component, you need to import the `LogoComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/logo","moduleName":"LogoComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"type","type":"LogoTypeEnum","defaultValue":"LogoTypeEnum.DEFAULT","required":false,"alias":null,"transform":null,"description":"Logo type","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"label","type":"unknown","defaultValue":"'POWERED BY'","required":false,"alias":null,"transform":null,"description":"Label. Only for ppoweredby type","isSignal":false},{"name":"width","type":"number","defaultValue":"200","required":false,"alias":null,"transform":null,"description":"Set logo width","isSignal":false},{"name":"allowResizing","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Allow change logo width","isSignal":false}],"outputs":[],"module":{"name":"LogoComponentModule","imports":["NgIf"],"exports":["LogoComponent"],"declarations":["LogoComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[{"name":"LogoTypeEnum","members":[{"name":"DEFAULT","value":"'default'"},{"name":"POWEREDBY","value":"'poweredby'"},{"name":"REVERSE","value":"'reverse'"},{"name":"PRIMARY_BRANDMARK_PINK","value":"'primary-brandmark-pink'"},{"name":"PRIMARY_LOCKUP_PINK","value":"'primary-lockup-pink'"},{"name":"PRIMARY_WORDMARK_PINK","value":"'primary-wordmark-pink'"},{"name":"SECONDARY_BRANDMARK_BLACK","value":"'secondary-brandmark-black'"},{"name":"SECONDARY_BRANDMARK_CREAM","value":"'secondary-brandmark-cream'"},{"name":"SECONDARY_LOCKUP_BLACK","value":"'secondary-lockup-black'"},{"name":"SECONDARY_LOCKUP_CREAM","value":"'secondary-lockup-cream'"},{"name":"SECONDARY_WORDMARK_BLACK","value":"'secondary-wordmark-black'"},{"name":"SECONDARY_WORDMARK_CREAM","value":"'secondary-wordmark-cream'"}]},{"name":"LogoPathEnum","members":[{"name":"DEFAULT","value":"'/images/testgorilla.svg'"},{"name":"POWEREDBY","value":"'/images/poweredbyTG.svg'"},{"name":"REVERSE","value":"'/images/reverseTG.svg'"},{"name":"PRIMARY_BRANDMARK_PINK","value":"'/images/rebrand-logo/primary_brandmark_pink.svg'"},{"name":"PRIMARY_LOCKUP_PINK","value":"'/images/rebrand-logo/primary_lockup_pink.svg'"},{"name":"PRIMARY_WORDMARK_PINK","value":"'/images/rebrand-logo/primary_wordmark_pink.svg'"},{"name":"SECONDARY_BRANDMARK_BLACK","value":"'/images/rebrand-logo/secondary_brandmark_black.svg'"},{"name":"SECONDARY_BRANDMARK_CREAM","value":"'/images/rebrand-logo/secondary_brandmark_cream.svg'"},{"name":"SECONDARY_LOCKUP_BLACK","value":"'/images/rebrand-logo/secondary_lockup_black.svg'"},{"name":"SECONDARY_LOCKUP_CREAM","value":"'/images/rebrand-logo/secondary_lockup_cream.svg'"},{"name":"SECONDARY_WORDMARK_BLACK","value":"'/images/rebrand-logo/secondary_wordmark_black.svg'"},{"name":"SECONDARY_WORDMARK_CREAM","value":"'/images/rebrand-logo/secondary_wordmark_cream.svg'"},{"name":"REBRAND_POWEREDBY","value":"'/images/rebrand-logo/powered-by.svg'"}]}]},"examples":[],"documentation":"## How to use\n\nTo use the Logo component, you need to import the `LogoComponentModule` in your module:\n\n```typescript\nimport { LogoComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n LogoComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-logo \n [type]=\"LogoTypeEnum.DEFAULT\" \n [applicationTheme]=\"theme\" \n [width]=\"200\">\n</ui-logo>\n```","template":"<ng-container ngIf=\"applicationTheme === 'classic'; else rebrandLogo\">\n <img [attr.src]=\"logoURL\" [alt]=\"type\" />\n</ng-container>\n\n<ng-template #rebrandLogo>\n <div ngIf=\"label && type === LogoTypeEnum.POWEREDBY; else others\" class=\"logo-label\" [style.width.px]=\"width\">\n <h3 class=\"bold\" [style.margin-left.px]=\"width 0.175\" [style.font-size.px]=\"width * 0.1\">\n {{ label }}\n </h3>\n <img [attr.src]=\"logoURL\" [alt]=\"type\" [width]=\"width\" />\n </div>\n\n <ng-template #others>\n <img [attr.src]=\"logoURL\" [alt]=\"type\" [width]=\"width\" />\n </ng-template>\n</ng-template>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":[],"suggestedQueries":[]},"filePath":"components/logo/logo.component.ts","supportsTheme":true,"lastModified":1775743558155.8367},"media-card":{"name":"MediaCardComponent","selector":"ui-media-card","category":"media-card","description":"To use the Media Card component, you need to import it in your component:","importPath":"@testgorilla/tgo-ui/components/media-card","moduleName":"MediaCardComponentModule","standalone":true,"changeDetection":"Default","inputs":[{"name":"title","type":"string","defaultValue":null,"required":true,"alias":null,"transform":null,"description":"The title of the card","isSignal":false},{"name":"description","type":"string","defaultValue":null,"required":true,"alias":null,"transform":null,"description":"The description of the card","isSignal":false},{"name":"image","type":"string","defaultValue":null,"required":true,"alias":null,"transform":null,"description":"The image of the card","isSignal":false},{"name":"buttonLabel","type":"string","defaultValue":"''","required":true,"alias":null,"transform":null,"description":"The label of the button","isSignal":false}],"outputs":[{"name":"buttonClick","eventType":"void","alias":null,"description":"","isSignal":false}],"module":{"name":"","imports":[],"exports":[],"declarations":[],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Media Card component, you need to import it in your component:\n\n```typescript\nimport { MediaCardComponent } from '@testgorilla/tgo-ui';\n\n@Component({\n // ... other component properties\n imports: [\n // ... other imports\n MediaCardComponent\n ],\n // ...\n})\nexport class YourComponent { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-media-card\n title=\"Card Title\"\n description=\"Card description text goes here\"\n image=\"/path/to/image.svg\"\n buttonLabel=\"Click me\"\n (buttonClick)=\"onButtonClick()\">\n</ui-media-card>\n```","template":"<img [attr.src]=\"image\" alt=\"card image\" />\n\n<div class=\"media-card-content\">\n <div\n class=\"media-card-title\"\n [isMultiline]=\"true\"\n [matTooltip]=\"showTitleTooltip ? title : ''\"\n uiEllipseText\n (onChangeTextState)=\"showTitleTooltip = $event\"\n >\n {{ title }}\n </div>\n\n <div class=\"media-card-description\">\n {{ description }}\n </div>\n</div>\n\n<ui-divider [size]=\"'small'\"></ui-divider>\n\n<div class=\"media-card-action\">\n <ui-button [variant]=\"'ghost'\" [label]=\"buttonLabel\" (buttonClickEvent)=\"buttonClick.emit()\"></ui-button>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-divider","ui-button"],"suggestedQueries":[]},"filePath":"components/media-card/media-card.component.ts","supportsTheme":false,"lastModified":1775743558156.8367},"media-dialog":{"name":"MediaDialogComponent","selector":"ui-media-dialog","category":"dialog","description":"To use the Media Dialog component, you need to import the `MediaDialogComponent` in your module:","importPath":"@testgorilla/tgo-ui/components/media-dialog","moduleName":"MediaDialogComponentModule","standalone":true,"changeDetection":"Default","inputs":[],"outputs":[],"module":{"name":"","imports":[],"exports":[],"declarations":[],"providers":[]},"types":{"typeAliases":[],"interfaces":[{"name":"MediaDialogStep","properties":[{"name":"subheader","type":"string","optional":true},{"name":"title","type":"string","optional":false},{"name":"body","type":"string","optional":false},{"name":"mediaContainer","type":"TemplateRef<any>","optional":false},{"name":"primaryButtonLabel","type":"string","optional":false},{"name":"secondaryButtonLabel","type":"string","optional":true},{"name":"backButtonLabel","type":"string","optional":true},{"name":"primaryButtonDataTestId","type":"string","optional":true},{"name":"secondaryButtonDataTestId","type":"string","optional":true},{"name":"backButtonDataTestId","type":"string","optional":true}]},{"name":"MediaDialogData","properties":[{"name":"steps","type":"MediaDialogStep[]","optional":true}]}],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Media Dialog component, you need to import the `MediaDialogComponent` in your module:\n\n```typescript\nimport { MediaDialogComponent } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n MediaDialogComponent\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component with the DialogService:\n\n```typescript\nimport { DialogService } from '@testgorilla/tgo-ui';\n\n@Component({\n // ...\n})\nexport class YourComponent {\n constructor(private dialogService: DialogService) {}\n\n openMediaDialog(): void {\n const dialogConfig = {\n size: 'small',\n extraData: {\n steps: [\n ...\n ],\n }\n };\n\n this.dialogService\n .open(MediaDialogComponent, dialogConfig)\n .afterClosed()\n .subscribe(result => {\n // Handle dialog close\n });\n }\n}\n```\n","template":"<ng-container>\n @if (steps && steps.length > 1) {\n <ui-progress-bar [progress]=\"(currentStepIndex + 1) * (100 / steps.length)\"></ui-progress-bar>\n }\n\n <ui-dialog [title]=\"title\" (closeEvent)=\"dialogRef.close(null)\" [showCloseButton]=\"true\">\n @if (mediaContainer) {\n <div class=\"media-container\">\n <ng-container [ngTemplateOutlet]=\"mediaContainer\"></ng-container>\n </div>\n }\n\n @if (subheader) {\n <h4 class=\"subheader\">{{ subheader }}</h4>\n }\n\n @if (body) {\n <div [innerHTML]=\"body\"></div>\n }\n\n <div mat-dialog-actions class=\"footer\">\n <div>\n @if (backButtonLabel && currentStepIndex > 0) {\n <ui-button\n variant=\"text-inline\"\n size=\"medium\"\n [label]=\"backButtonLabel\"\n [attr.data-testid]=\"backButtonDataTestId\"\n (click)=\"onBackButtonClick()\"\n ></ui-button>\n }\n </div>\n\n <div class=\"action-buttons\">\n @if (secondaryButtonLabel) {\n <ui-button\n variant=\"ghost\"\n [label]=\"secondaryButtonLabel\"\n [attr.data-testid]=\"secondaryButtonDataTestId\"\n (click)=\"onSecondaryButtonClick()\"\n ></ui-button>\n }\n @if (primaryButtonLabel) {\n <ui-button\n variant=\"primary\"\n [label]=\"primaryButtonLabel\"\n [attr.data-testid]=\"primaryButtonDataTestId\"\n (click)=\"onPrimaryButtonClick()\"\n ></ui-button>\n }\n </div>\n </div>\n </ui-dialog>\n</ng-container>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-progress-bar","ui-dialog","ui-button"],"suggestedQueries":[]},"filePath":"components/media-dialog/media-dialog.component.ts","supportsTheme":false,"lastModified":1775743558156.8367},"multi-input":{"name":"MultiInputComponent","selector":"ui-multi-input","category":"multi-input","description":"To use the Multi Input component, you need to import the `MultiInputComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/multi-input","moduleName":"MultiInputComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"fullWidth","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"itemsList","type":"Record<string, string \| null \| number>[]","defaultValue":null,"required":true,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"itemTextField","type":"string","defaultValue":null,"required":true,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"itemValueField","type":"string","defaultValue":null,"required":true,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"value","type":"MultiInputValue","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"required","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"placeholder","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"allowDecimal","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"allowNegative","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"errors","type":"string[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"hideBuiltInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"hideLabelInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"maxCharacters","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"validators","type":"ValidatorFn[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"hasCustomErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true}],"outputs":[{"name":"valueChange","eventType":"MultiInputValue","alias":null,"description":"","isSignal":false}],"module":{"name":"MultiInputComponentModule","imports":["CommonModule","MatInputModule","MatSelectModule","DividerComponentModule","IconComponentModule","DropdownComponentModule","ReactiveFormsModule","DigitsOnlyDirective","HasValidationErrorPipe","ValidationErrorModule","FieldComponentModule"],"exports":["MultiInputComponent"],"declarations":["MultiInputComponent"],"providers":[]},"types":{"typeAliases":[{"name":"MultiInputValue","value":"{\n value: T;\n [key: string]: any;\n}"}],"interfaces":[],"enums":[]},"examples":[{"name":"Default","template":"<form [formGroup]=\"form\">\n <ui-multi-input\n formControlName=\"currency\"\n label=\"Currency\"\n itemTextField=\"label\"\n itemValueField=\"code\"\n [itemsList]=\"itemsList\"\n [required]=\"true\"\n [hasCustomErrors]=\"true\"\n applicationTheme=\"${_theme}\"\n >\n <div custom-errors>\n <ui-validation-error\n [ngControl]=\"form.controls.currency\"\n [touchedOn]=\"form.controls.currency.touched\"\n label=\"Currency\"\n applicationTheme=\"${_theme}\"\n ></ui-validation-error>\n </div>\n </ui-multi-input>\n </form>","props":{"label":"'Currency'","itemTextField":"'label'","itemValueField":"'code'","value":"{ value: 100, code: 'usd'"}},{"name":"WithError","template":"<form [formGroup]=\"form\">\n <ui-multi-input\n formControlName=\"currency\"\n label=\"Currency\"\n itemTextField=\"label\"\n itemValueField=\"code\"\n [itemsList]=\"itemsList\"\n [required]=\"true\"\n [hasCustomErrors]=\"true\"\n applicationTheme=\"${_theme}\"\n >\n <div custom-errors>\n <ui-validation-error\n [ngControl]=\"form.controls.currency\"\n [touchedOn]=\"form.controls.currency.touched\"\n label=\"Currency\"\n applicationTheme=\"${_theme}\"\n ></ui-validation-error>\n </div>\n </ui-multi-input>\n </form>","props":{"label":"'Currency'","itemTextField":"'label'","itemValueField":"'code'","value":"{ value: 100, code: 'usd'"}},{"name":"WithCustomValidationErrors","template":"<form [formGroup]=\"form\">\n <ui-multi-input\n formControlName=\"currency\"\n label=\"Currency\"\n itemTextField=\"label\"\n itemValueField=\"code\"\n [itemsList]=\"itemsList\"\n [required]=\"true\"\n [hasCustomErrors]=\"true\"\n applicationTheme=\"${_theme}\"\n >\n <div custom-errors>\n <ui-validation-error\n [ngControl]=\"form.controls.currency\"\n [touchedOn]=\"form.controls.currency.touched\"\n label=\"Currency\"\n applicationTheme=\"${_theme}\"\n ></ui-validation-error>\n </div>\n </ui-multi-input>\n </form>","props":{}}],"documentation":"## How to use\n\nTo use the Multi Input component, you need to import the `MultiInputComponentModule` in your module:\n\n```typescript\nimport { MultiInputComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n MultiInputComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-multi-input\n label=\"Currency\"\n itemTextField=\"label\"\n itemValueField=\"code\"\n [itemsList]=\"[\n { code: 'usd', label: 'USD ($)' },\n { code: 'eur', label: 'EUR (€)' }\n ]\"\n [value]=\"{ value: 100, code: 'usd' }\"\n applicationTheme=\"light\">\n</ui-multi-input>\n```","template":"<div [formGroup]=\"multiInputForm\">\n <div class=\"controls-wrapper\">\n <ui-dropdown\n [hasError]=\"controlHasError\"\n [formControlName]=\"itemValueField()\"\n [valueList]=\"itemsList()\"\n [textField]=\"itemTextField()\"\n [valueField]=\"itemValueField()\"\n [showBottomContent]=\"false\"\n [allowClear]=\"false\"\n (closed)=\"markAsTouched()\"\n ></ui-dropdown>\n\n <ui-field\n [hasError]=\"controlHasError\"\n formControlName=\"value\"\n [label]=\"label()\"\n [placeholder]=\"placeholder()\"\n [required]=\"required()\"\n [hideBuiltInErrors]=\"true\"\n [showBottomContent]=\"false\"\n [allowOnlyDigits]=\"true\"\n [fullWidth]=\"fullWidth\"\n [allowNegative]=\"allowNegative()\"\n (focusout)=\"markAsTouched()\"\n ></ui-field>\n </div>\n\n @if (!hasCustomErrors()) {\n <mat-hint class=\"info\" ngIf=\"!controlHasError && maxCharacters() && !errors()?.length\"\n >{{ getValueLength() }} / {{ maxCharacters() }}</mat-hint\n >\n\n @if (errors()?.length \|\| (ngControl?.errors \| hasValidationError)) {\n <mat-hint class=\"error\">\n @for (error of errors(); track error) {\n <ui-icon name=\"Error-in-line\"></ui-icon>{{ error }}\n }\n @if ((ngControl?.errors \| hasValidationError) && !hideBuiltInErrors()) {\n <ui-validation-error\n [touchedOn]=\"!controlHasError\"\n [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors() ? null : label()\"\n ></ui-validation-error>\n }\n </mat-hint>\n }\n }\n <ng-content select=\"[custom-errors]\"></ng-content>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":["mat-hint"],"childUIComponents":["ui-dropdown","ui-field","ui-icon","ui-validation-error"],"suggestedQueries":[]},"filePath":"components/multi-input/multi-input.component.ts","supportsTheme":false,"lastModified":1775743558157.8367},"navbar":{"name":"NavbarComponent","selector":"ui-navbar","category":"navbar","description":"To use the Navbar component, you need to import the `NavbarComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/navbar","moduleName":"NavbarComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"routes","type":"IRoute[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"Routes object","isSignal":false},{"name":"userName","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"User first name and last name","isSignal":false},{"name":"email","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"User email","isSignal":false},{"name":"menuItems","type":"MenuItem[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"Menu items to show in menu above the Log out button","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"contentTemplateRef","type":"TemplateRef<any>","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"It's ng-content for mobile version","isSignal":false},{"name":"userInfoExtraTemplateRef","type":"TemplateRef<any>","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Additional info template reference for the extra user info in the dropdown/sidesheet","isSignal":false},{"name":"menuContentTemplateRef","type":"TemplateRef<any>","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Custom content template reference for the menu section between user info and menu items.\nUse this to add custom components like credits display.","isSignal":false},{"name":"isAvatar","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Show avatar with user initials","isSignal":false},{"name":"menuClass","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Sets class for the menu","isSignal":false},{"name":"mobileBreakpoint","type":"number","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Mobile breakpoint","isSignal":false},{"name":"activedRoute","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Actived route id","isSignal":true}],"outputs":[{"name":"navigateEvent","eventType":"string","alias":null,"description":"","isSignal":false},{"name":"menuItemClicked","eventType":"string","alias":null,"description":"","isSignal":false},{"name":"logoutEvent","eventType":"void","alias":null,"description":"","isSignal":false},{"name":"menuState","eventType":"MenuState","alias":null,"description":"","isSignal":false}],"module":{"name":"NavbarComponentModule","imports":["CommonModule","MatToolbarModule","MatIconModule","MatButtonModule","MatRippleModule","MatMenuModule","LogoComponentModule","IconComponentModule","UiTranslatePipe","AvatarComponentModule","SideSheetComponentModule","ButtonComponentModule","MobileNavbarSideSheetComponent","BadgeComponentModule"],"exports":["NavbarComponent"],"declarations":["NavbarComponent"],"providers":[]},"types":{"typeAliases":[{"name":"ScreenSize","value":"'mobile' \| 'tablet' \| 'desktop'"}],"interfaces":[{"name":"IRoute","properties":[{"name":"id","type":"string","optional":false},{"name":"title","type":"string","optional":false},{"name":"badgeOptions","type":"RouteBadge","optional":true}]},{"name":"RouteBadge","properties":[{"name":"color","type":"RebrandBadgeColor","optional":false},{"name":"text","type":"string","optional":true},{"name":"variant","type":"BadgeVariant","optional":true},{"name":"notificationsAmount","type":"number","optional":true}]},{"name":"MenuItem","properties":[{"name":"id","type":"string","optional":false},{"name":"icon","type":"IconName","optional":false},{"name":"text","type":"string","optional":false}]},{"name":"MenuState","properties":[{"name":"screenSize","type":"ScreenSize","optional":false},{"name":"isOpened","type":"boolean","optional":false}]}],"enums":[]},"examples":[{"name":"Default","template":"<ng-template #temp>\n <ui-button applicationTheme=\"${_theme}\" label=\"Press\"></ui-button>\n </ng-template>\n <ui-navbar applicationTheme=\"${_theme}\"\n [contentTemplateRef]=\"temp\"\n [userName]=\"'Markus Letterman'\"\n [routes]=\"[\n {\n id: 'assessments',\n title: 'Assessments',\n },\n {\n id: 'results',\n title: 'Results',\n },\n ]\"\n [menuItems]=\"[{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n }]\"\n activedRoute=\"${ROUTES[0].id}\">\n <ui-button actions size=\"small\" applicationTheme=\"${_theme}\" label=\"PressMe\"></ui-button>\n </ui-navbar>","props":{"userName":"'Markus Letterman'","routes":"ROUTES","activedRoute":"ROUTES[0].id","email":"'markusletterman@gmail.com'","menuItems":"[","id":"'profile'","icon":"'User-profile'","text":"'Edit profile info'"}},{"name":"WithNotificationBadge","template":"<ng-template #temp>\n <ui-button applicationTheme=\"${_theme}\" label=\"Press\"></ui-button>\n </ng-template>\n <ui-navbar applicationTheme=\"${_theme}\"\n [contentTemplateRef]=\"temp\"\n [userName]=\"'Markus Letterman'\"\n [routes]=\"[\n {\n id: 'assessments',\n title: 'Assessments',\n },\n {\n id: 'results',\n title: 'Results',\n },\n ]\"\n [menuItems]=\"[{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n }]\"\n activedRoute=\"${ROUTES[0].id}\">\n <ui-button actions size=\"small\" applicationTheme=\"${_theme}\" label=\"PressMe\"></ui-button>\n </ui-navbar>","props":{"userName":"'Markus Letterman'","routes":"ROUTES_WITH_NOTIFICATION","activedRoute":"ROUTES_WITH_NOTIFICATION[0].id","email":"'markusletterman@gmail.com'","menuItems":"[","id":"'profile'","icon":"'User-profile'","text":"'Edit profile info'"}},{"name":"WithContent","template":"<ng-template #temp>\n <ui-button applicationTheme=\"${_theme}\" label=\"Press\"></ui-button>\n </ng-template>\n <ui-navbar applicationTheme=\"${_theme}\"\n [contentTemplateRef]=\"temp\"\n [userName]=\"'Markus Letterman'\"\n [routes]=\"[\n {\n id: 'assessments',\n title: 'Assessments',\n },\n {\n id: 'results',\n title: 'Results',\n },\n ]\"\n [menuItems]=\"[{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n }]\"\n activedRoute=\"${ROUTES[0].id}\">\n <ui-button actions size=\"small\" applicationTheme=\"${_theme}\" label=\"PressMe\"></ui-button>\n </ui-navbar>","props":{"userName":"'Markus Letterman'","routes":"ROUTES","isAvatar":"true","activedRoute":"ROUTES[0].id","email":"'markusletterman@gmail.com'","menuItems":"[","id":"'profile'","icon":"'User-profile'","text":"'Edit profile info'"}},{"name":"WithAvatar","template":"<ng-template #extraContent>\n User info extra content\n </ng-template>\n <ui-navbar applicationTheme=\"${_theme}\"\n [userName]=\"'Markus Letterman'\"\n [routes]=\"[\n {\n id: 'assessments',\n title: 'Assessments',\n },\n {\n id: 'results',\n title: 'Results',\n },\n ]\"\n [menuItems]=\"[{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n }]\"\n activedRoute=\"${ROUTES[0].id}\"\n email=\"markusletterman@gmail.com\"\n [userInfoExtraTemplateRef]=\"extraContent\">\n </ui-navbar>","props":{"userName":"'Markus Letterman'","routes":"ROUTES","isAvatar":"true","activedRoute":"ROUTES[0].id","email":"'markusletterman@gmail.com'","menuItems":"[","id":"'profile'","icon":"'User-profile'","text":"'Edit profile info'"}},{"name":"WithUserInfoExtra","template":"<ng-template #extraContent>\n User info extra content\n </ng-template>\n <ui-navbar applicationTheme=\"${_theme}\"\n [userName]=\"'Markus Letterman'\"\n [routes]=\"[\n {\n id: 'assessments',\n title: 'Assessments',\n },\n {\n id: 'results',\n title: 'Results',\n },\n ]\"\n [menuItems]=\"[{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n },{\n id: 'profile',\n icon: 'User-profile',\n text: 'Edit profile info',\n }]\"\n activedRoute=\"${ROUTES[0].id}\"\n email=\"markusletterman@gmail.com\"\n [userInfoExtraTemplateRef]=\"extraContent\">\n </ui-navbar>","props":{}},{"name":"WithMenuContent","template":"<ng-template #menuContent>\n <div class=\"credits-container\">\n <div class=\"credits-header\">\n <span class=\"credits-label\">Credits</span>\n <div class=\"credits-value\">\n <span class=\"credits-count\">360 left</span>\n <ui-icon name=\"Arrow-chevron-right-in-line\" size=\"16\"></ui-icon>\n </div>\n </div>\n <div class=\"credits-progress-bar\">\n <div class=\"credits-progress-fill\"></div>\n </div>\n </div>\n </ng-template>\n <ui-navbar applicationTheme=\"${_theme}\"\n [menuContentTemplateRef]=\"menuContent\"\n [userName]=\"'Markus Letterman'\"\n [email]=\"'Markus.letterman@email.com'\"\n [routes]=\"[{ id: 'assessments', title: 'Assessments' }]\"\n [menuItems]=\"[\n { id: 'invite', icon: 'User-profile', text: 'Invite team' },\n { id: 'settings', icon: 'User-profile', text: 'Settings' }\n ]\"\n activedRoute=\"assessments\">\n </ui-navbar>\n <style>\n .credits-container {\n margin: 0 16px 16px 16px;\n padding: 16px;\n background: #F5F5F5;\n border-radius: 12px;\n cursor: pointer;\n }\n .credits-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n }\n .credits-label {\n font-weight: 700;\n font-size: 14px;\n font-family: 'ModernGothic', sans-serif;\n color: #242424;\n }\n .credits-value {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n .credits-count {\n font-size: 14px;\n color: #666;\n }\n .credits-progress-bar {\n margin-top: 12px;\n height: 8px;\n background: #E0E0E0;\n border-radius: 4px;\n overflow: hidden;\n }\n .credits-progress-fill {\n width: 70%;\n height: 100%;\n background: linear-gradient(90deg, #E91E8C, #FF69B4);\n border-radius: 4px;\n }\n </style>","props":{}}],"documentation":"## How to use\n\nTo use the Navbar component, you need to import the `NavbarComponentModule` in your module:\n\n```typescript\nimport { NavbarComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n NavbarComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-navbar\n [userName]=\"'John Doe'\"\n [routes]=\"routes\"\n [activedRoute]=\"currentRoute\"\n [menuItems]=\"menuItems\"\n (navigateEvent)=\"onNavigate($event)\"\n (menuItemClicked)=\"onMenuItemClicked($event)\"\n (logoutEvent)=\"logout()\">\n</ui-navbar>\n```","template":"<ui-side-sheet\n [applicationTheme]=\"applicationTheme\"\n (openChange)=\"onChangeMenuState($event, screenSize)\"\n [position]=\"(isMobile$ \| async) ? 'start' : 'end'\"\n>\n <mat-toolbar [attr.theme]=\"applicationTheme\">\n <div class=\"custom-toolbar row\">\n <ui-logo\n [applicationTheme]=\"applicationTheme\"\n class=\"logo\"\n (click)=\"navigate('')\"\n [allowResizing]=\"true\"\n [width]=\"(isMobile$ \| async) ? 160 : (isTablet$ \| async) ? 30 : 160\"\n [type]=\"\n (isMobile$ \| async)\n ? logoType.DEFAULT\n : (isTablet$ \| async)\n ? logoType.PRIMARY_BRANDMARK_PINK\n : logoType.DEFAULT\n \"\n ></ui-logo>\n\n <ui-button\n (click)=\"openMobileMenu()\"\n ngIf=\"isMobile$ \| async\"\n [variant]=\"'text'\"\n [companyColor]=\"'#242424'\"\n [applicationTheme]=\"'light'\"\n [iconName]=\"isOpened ? 'Close-in-line' : 'Menu-burger-in-line'\"\n [justIcon]=\"true\"\n ></ui-button>\n\n <div class=\"navigation row\">\n <a\n ngFor=\"let route of routes\"\n (click)=\"navigate(route.id); $event.preventDefault()\"\n [href]=\"route.id\"\n [attr.data-testid]=\"route.id\"\n data-test-role=\"nav-route\"\n [ngClass]=\"{ active: activeRoutesMap().get(route.id) }\"\n >\n <ui-badge\n ngIf=\"route?.badgeOptions\"\n [label]=\"route.badgeOptions!.text ?? ''\"\n [rebrandColor]=\"route.badgeOptions!.color\"\n [variant]=\"route.badgeOptions!.variant ?? 'primary'\"\n [notificationsAmount]=\"route.badgeOptions!.notificationsAmount ?? 0\"\n ></ui-badge>\n <span>{{ route.title }}</span>\n </a>\n </div>\n\n <div class=\"actions\">\n <div class=\"custom-actions\">\n <ng-content select=\"[actions]\"></ng-content>\n </div>\n\n <button mat-button class=\"profile-menu\" ngIf=\"isTablet$ \| async; else pc\" (click)=\"openMobileMenu()\">\n <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n </button>\n\n <ng-template #pc>\n <button\n mat-button\n class=\"profile-menu\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n (menuOpened)=\"onChangeMenuState(true, 'desktop')\"\n (menuClosed)=\"onChangeMenuState(false, 'desktop')\"\n [matMenuTriggerFor]=\"menu\"\n >\n <ng-container [ngTemplateOutlet]=\"buttonContent\"></ng-container>\n </button>\n </ng-template>\n\n <ng-template #buttonContent>\n <div class=\"profile-button-content\">\n <ng-container ngIf=\"isAvatar; else onlyName\">\n <ui-avatar\n data-testid=\"profile-button\"\n [ngClass]=\"{ opened: menu._panelAnimationState !== 'void' }\"\n [applicationTheme]=\"applicationTheme\"\n [name]=\"userName\"\n [size]=\"AvatarSize.SMALL_MEDIUM\"\n ></ui-avatar>\n </ng-container>\n\n <ng-template #onlyName>\n {{ userName }}\n </ng-template>\n\n <mat-icon ngIf=\"applicationTheme === 'classic'; else newThemeIcon\" iconPositionEnd>expand_more</mat-icon>\n <ng-template #newThemeIcon>\n <ui-icon\n [size]=\"'24'\"\n ngIf=\"!isAvatar\"\n [name]=\"menu._panelAnimationState === 'void' ? 'Arrow-chevron-down-filled' : 'Arrow-chevron-up-filled'\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n </ng-template>\n </div>\n </ng-template>\n </div>\n </div>\n </mat-toolbar>\n\n <ng-content></ng-content>\n\n <mat-menu [class]=\"menuClass\" #menu=\"matMenu\">\n <ng-container ngIf=\"applicationTheme === 'classic'; else newTheme\">\n <button\n ngFor=\"let e of menuItems\"\n mat-menu-item\n (click)=\"clickMenuItem(e.id)\"\n [attr.data-testid]=\"e.id\"\n data-test-role=\"profile-menu-item\"\n >\n <div class=\"menu-item\">\n <ui-icon ngIf=\"e?.icon\" [name]=\"e.icon\" size=\"24\"></ui-icon>\n {{ e.text }}\n </div>\n </button>\n\n <button data-testid=\"logout-button\" mat-menu-item (click)=\"logout()\">\n <mat-icon>power_settings_new</mat-icon>\n {{ translationContext + 'LOG_OUT' \| uiTranslate \| async }}\n </button>\n </ng-container>\n\n <ng-template #newTheme>\n <ui-mobile-navbar-side-sheet\n [isDesktop]=\"true\"\n [menuItems]=\"menuItems\"\n [userName]=\"userName\"\n [routes]=\"routes\"\n [activedRoute]=\"activedRoute()\"\n [email]=\"email\"\n [applicationTheme]=\"applicationTheme\"\n [contentTemplateRef]=\"contentTemplateRef\"\n [userInfoExtraTemplateRef]=\"userInfoExtraTemplateRef\"\n [menuContentTemplateRef]=\"menuContentTemplateRef\"\n (menuItemClicked)=\"clickMenuItem($event)\"\n (logoutEvent)=\"logout()\"\n >\n </ui-mobile-navbar-side-sheet>\n </ng-template>\n </mat-menu>\n</ui-side-sheet>\n","queryGuide":{"roles":["nav-route","profile-menu-item","menu"],"ariaAttributes":[],"dataTestIds":["profile-button","logout-button"],"materialComponents":["mat-toolbar","mat-icon","mat-menu"],"childUIComponents":["ui-side-sheet","ui-logo","ui-button","ui-badge","ui-avatar","ui-icon","ui-mobile-navbar-side-sheet"],"suggestedQueries":["screen.getByRole('nav-route')","screen.getByRole('profile-menu-item')","screen.getByRole('menu')","screen.getByTestId('profile-button')","screen.getByTestId('logout-button')"]},"filePath":"components/navbar/navbar.component.ts","supportsTheme":true,"lastModified":1775743558157.8367},"mobile-navbar-side-sheet":{"name":"MobileNavbarSideSheetComponent","selector":"ui-mobile-navbar-side-sheet","category":"mobile-navbar-side-sheet","description":"MobileNavbarSideSheetComponent component","importPath":"@testgorilla/tgo-ui/components/mobile-navbar-side-sheet","moduleName":"MobileNavbarSideSheetComponentModule","standalone":true,"changeDetection":"Default","inputs":[{"name":"routes","type":"IRoute[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"email","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"userName","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"menuItems","type":"MenuItem[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"contentTemplateRef","type":"TemplateRef<any>","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"userInfoExtraTemplateRef","type":"TemplateRef<any>","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"menuContentTemplateRef","type":"TemplateRef<any>","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"isDesktop","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"activedRoute","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":true}],"outputs":[{"name":"navigateEvent","eventType":"string","alias":null,"description":"","isSignal":false},{"name":"menuItemClicked","eventType":"string","alias":null,"description":"","isSignal":false},{"name":"logoutEvent","eventType":"void","alias":null,"description":"","isSignal":false}],"module":{"name":"","imports":[],"exports":[],"declarations":[],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"","template":"<div class=\"mobile-navbar-container\">\n <ng-container ngIf=\"isDesktop\" [ngTemplateOutlet]=\"userInfo\"></ng-container>\n\n @if (menuContentTemplateRef) {\n <ng-container [ngTemplateOutlet]=\"menuContentTemplateRef\"></ng-container>\n }\n\n <div class=\"routes\">\n <div\n ngFor=\"let route of routes\"\n [attr.data-testid]=\"route.id\"\n data-test-role=\"nav-route\"\n tabindex=\"0\"\n (click)=\"navigate(route.id)\"\n (keydown.enter)=\"navigate(route.id)\"\n class=\"route\"\n [ngClass]=\"{ active: activeRoutesMap().get(route.id) }\"\n >\n <span>{{ route.title }}</span>\n </div>\n </div>\n\n <div class=\"settings\">\n <ng-container ngFor=\"let e of menuItems\">\n <div ngIf=\"e\" class=\"menu-item\">\n <ui-button\n [attr.data-testid]=\"e.id\"\n data-test-role=\"menu-item\"\n [applicationTheme]=\"applicationTheme\"\n [fullWidth]=\"true\"\n [disabledScaleOnClick]=\"true\"\n [variant]=\"'menuCell'\"\n iconPosition=\"left\"\n [iconName]=\"e.icon\"\n [label]=\"e.text\"\n (buttonClickEvent)=\"clickMenuItem(e.id)\"\n (keydown.Tab)=\"$event.stopPropagation()\"\n (keydown.shift.tab)=\"$event.stopPropagation()\"\n [ariaLabel]=\"e.text + '--' + e.text\"\n ></ui-button>\n </div>\n </ng-container>\n </div>\n</div>\n\n<div class=\"bottom-content\" [ngClass]=\"{ desktop: isDesktop }\">\n <ng-container ngIf=\"!isDesktop\" [ngTemplateOutlet]=\"contentTemplateRef\"></ng-container>\n <ng-container ngIf=\"isDesktop; else tablet\">\n <div class=\"menu-item\">\n <ui-button\n data-testid=\"logout-button\"\n [applicationTheme]=\"applicationTheme\"\n [fullWidth]=\"true\"\n [disabledScaleOnClick]=\"true\"\n [variant]=\"'menuCell'\"\n iconPosition=\"left\"\n [iconName]=\"'Logout-in-line'\"\n [label]=\"(translationContext + 'LOG_OUT' \| uiTranslate \| async)!\"\n (buttonClickEvent)=\"logout()\"\n (keydown.Tab)=\"$event.stopPropagation()\"\n (keydown.shift.tab)=\"$event.stopPropagation()\"\n ></ui-button>\n </div>\n </ng-container>\n\n <ng-template #tablet>\n <ng-container [ngTemplateOutlet]=\"userInfo\"></ng-container>\n </ng-template>\n</div>\n\n<ng-template #userInfo>\n <div class=\"user-info\" [ngClass]=\"{ desktop: isDesktop }\">\n <ui-avatar [size]=\"avatarSize.MEDIUM\" [name]=\"userName\"></ui-avatar>\n <div class=\"details-container\">\n <div class=\"name-container\">\n <span class=\"user-name dd-privacy-mask\">{{ userName }}</span>\n <span class=\"user-email dd-privacy-mask\">{{ email }}</span>\n @if (userInfoExtraTemplateRef) {\n <ng-container [ngTemplateOutlet]=\"userInfoExtraTemplateRef\"></ng-container>\n }\n </div>\n <ui-button\n ngIf=\"!isDesktop\"\n data-testid=\"logout-button\"\n [tooltip]=\"(translationContext + 'LOG_OUT' \| uiTranslate \| async)!\"\n [iconName]=\"'Logout-in-line'\"\n [applicationTheme]=\"'light'\"\n [variant]=\"'icon-button'\"\n (click)=\"logout()\"\n ></ui-button>\n </div>\n </div>\n</ng-template>\n","queryGuide":{"roles":["nav-route","menu-item"],"ariaAttributes":[],"dataTestIds":["logout-button"],"materialComponents":[],"childUIComponents":["ui-button","ui-avatar"],"suggestedQueries":["screen.getByRole('nav-route')","screen.getByRole('menu-item')","screen.getByTestId('logout-button')"]},"filePath":"components/mobile-navbar-side-sheet/mobile-navbar-side-sheet.component.ts","supportsTheme":true,"lastModified":1775743558157.8367},"overflow-menu":{"name":"OverflowMenuComponent","selector":"ui-overflow-menu","category":"overflow-menu","description":"To use the Overflow Menu component, you need to import the `OverflowMenuComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/overflow-menu","moduleName":"OverflowMenuComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"buttons","type":"OverflowMenuButtonsType[]","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Menu buttons","isSignal":false},{"name":"iconTrigger","type":"IconName","defaultValue":"'Menu-ellipsis'","required":false,"alias":null,"transform":null,"description":"Menu icon trigger","isSignal":false},{"name":"menuLabel","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Label menu","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"ariaLabel","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"A string representing the ARIA label for accessibility.\nThis label is used to provide an accessible name for the input element.","isSignal":false},{"name":"ariaRequired","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"describedby","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input for description.","isSignal":false},{"name":"contentTemplateRef","type":"TemplateRef<any>","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Custom template for the button (optional)","isSignal":false},{"name":"buttonVariant","type":"ButtonColor \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"Button variant for the overflow menu trigger\nWhen null, uses the default icon rendering","isSignal":false},{"name":"buttonSize","type":"ButtonSize","defaultValue":"'medium'","required":false,"alias":null,"transform":null,"description":"Button size for the overflow menu trigger","isSignal":false},{"name":"menuConfig","type":"MenuConfig","defaultValue":"DEFAULT_MENU_CONFIG","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"isDynamicMenu","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"withRemovableOption","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false}],"outputs":[{"name":"selectItem","eventType":"string","alias":null,"description":"","isSignal":false},{"name":"menuOpened","eventType":"void","alias":null,"description":"","isSignal":false},{"name":"menuClosed","eventType":"void","alias":null,"description":"","isSignal":false}],"module":{"name":"OverflowMenuComponentModule","imports":["CommonModule","ButtonComponentModule","IconComponentModule","MatMenuModule","MatButtonModule","MatTooltipModule","EllipseTextDirective","UiTranslatePipe"],"exports":["OverflowMenuComponent"],"declarations":["OverflowMenuComponent"],"providers":[]},"types":{"typeAliases":[{"name":"OverflowMenuButtonsType","value":"{\n icon?: IconName;\n label: string;\n isDestructive?: boolean;\n value: string;\n disabled?: boolean;\n btnTemplate?: TemplateRef<any>;\n subMenu?: OverflowMenuButtonsType[] \| number;\n action?: number \| string;\n describedby?: string;\n ariaLabel?: string;\n tooltipText?: string;\n isTitleButton?: boolean;\n hideTitleButton?: boolean;\n isPremium?: boolean;\n}"},{"name":"ButtonOptions","value":"{\n isTextEllipsed?: boolean;\n isFocused?: boolean;\n isHovered?: boolean;\n}"},{"name":"MenuConfig","value":"{\n xPosition: MenuPositionX;\n yPosition: MenuPositionY;\n overlapTrigger: boolean;\n panelClass: string;\n}"},{"name":"OverflowMenuButtonModify","value":"OverflowMenuButtonsType & ButtonOptions"}],"interfaces":[],"enums":[]},"examples":[{"name":"Default","template":"<ng-template #temp>\n <h4>Custom content</h4>\n </ng-template>\n <div style=\"width: fit-content\">\n <ui-overflow-menu applicationTheme=\"${_theme}\"\n [contentTemplateRef]=\"temp\"\n [buttons]=\"[\n {\n icon: 'Copy',\n disabled: true,\n label: 'Copy',\n value: 'Copy value',\n },\n {\n icon: 'Delete',\n label: 'Delete',\n value: 'Delete value',\n isDestructive: true,\n }\n ]\"\n >\n </ui-overflow-menu>\n </div>","props":{"iconTrigger":"'Menu-ellipsis'","buttons":"[","icon":"'Edit'","label":"'Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit EditEdit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit'","value":"'Edit value'","subMenu":"["}},{"name":"Opened","template":"<ng-template #temp>\n <h4>Custom content</h4>\n </ng-template>\n <div style=\"width: fit-content\">\n <ui-overflow-menu applicationTheme=\"${_theme}\"\n [contentTemplateRef]=\"temp\"\n [buttons]=\"[\n {\n icon: 'Copy',\n disabled: true,\n label: 'Copy',\n value: 'Copy value',\n },\n {\n icon: 'Delete',\n label: 'Delete',\n value: 'Delete value',\n isDestructive: true,\n }\n ]\"\n >\n </ui-overflow-menu>\n </div>","props":{"iconTrigger":"'Menu-ellipsis'","buttons":"[","icon":"'Edit'","label":"'Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit EditEdit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit Edit'","value":"'Edit value'","subMenu":"["}},{"name":"CustomContent","template":"<ng-template #temp>\n <h4>Custom content</h4>\n </ng-template>\n <div style=\"width: fit-content\">\n <ui-overflow-menu applicationTheme=\"${_theme}\"\n [contentTemplateRef]=\"temp\"\n [buttons]=\"[\n {\n icon: 'Copy',\n disabled: true,\n label: 'Copy',\n value: 'Copy value',\n },\n {\n icon: 'Delete',\n label: 'Delete',\n value: 'Delete value',\n isDestructive: true,\n }\n ]\"\n >\n </ui-overflow-menu>\n </div>","props":{"buttonVariant":"'ghost'","buttons":"[","icon":"'Copy'","label":"'Copy item'","value":"'copy'"}}],"documentation":"## How to use\n\nTo use the Overflow Menu component, you need to import the `OverflowMenuComponentModule` in your module:\n\n```typescript\nimport { OverflowMenuComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n OverflowMenuComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-overflow-menu\n iconTrigger=\"Menu-ellipsis\"\n [buttons]=\"[\n {\n icon: 'Edit',\n label: 'Edit',\n value: 'edit_action'\n },\n {\n icon: 'Delete',\n label: 'Delete',\n value: 'delete_action',\n isDestructive: true\n }\n ]\"\n applicationTheme=\"light\"\n (itemSelected)=\"handleMenuSelection($event)\">\n</ui-overflow-menu>\n```\n\nThe component supports nested sub-menus and various button states including disabled and destructive actions.","template":"<div class=\"overflow-menu-container\" [attr.theme]=\"applicationTheme\">\n <button\n #buttonElement\n [ngClass]=\"{\n 'icon-button': !contentTemplateRef && !buttonVariant,\n 'content-template': contentTemplateRef,\n 'no-hover': buttonVariant,\n }\"\n ngIf=\"isMenuRendered()\"\n [matMenuTriggerFor]=\"matmenus.first\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.aria-describedby]=\"'describedby'\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"isMenuOpened()\"\n (menuOpened)=\"onMenuOpened()\"\n (menuClosed)=\"onMenuClosed()\"\n class=\"overflow-menu-opener\"\n [matTooltip]=\"menuLabel\"\n >\n <span [id]=\"'describedby'\" [style.display]=\"'none'\">{{ describedby }}</span>\n @if (buttonVariant) {\n <ui-button\n [variant]=\"buttonVariant\"\n [justIcon]=\"true\"\n [iconName]=\"iconTrigger\"\n [applicationTheme]=\"applicationTheme\"\n [disabled]=\"false\"\n [size]=\"buttonSize\"\n >\n </ui-button>\n } @else if (contentTemplateRef) {\n <ng-container [ngTemplateOutlet]=\"contentTemplateRef\"></ng-container>\n } @else {\n <ui-icon\n [name]=\"iconTrigger\"\n [applicationTheme]=\"applicationTheme\"\n [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n ></ui-icon>\n }\n </button>\n\n @for (menu of submenus; track submenus[$index]) {\n <mat-menu\n [xPosition]=\"menuConfig.xPosition\"\n [yPosition]=\"menuConfig.yPosition\"\n #matMenu\n [class]=\"'overflow-menu ' + menuConfig.panelClass\"\n [overlapTrigger]=\"menuConfig.overlapTrigger\"\n backdropClass=\"overflow-menu-backdrop\"\n >\n <ng-container ngFor=\"let button of menu; index as id; trackBy: trackByButton\">\n @if (button.btnTemplate) {\n <!-- Menu option by provided button template-->\n <ng-container\n [ngTemplateOutlet]=\"button.btnTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: button }\"\n ></ng-container>\n } @else if (withRemovableOption) {\n <!-- Simple menu option that can be removed dynamically -->\n <div class=\"menu-option\" [ngClass]=\"{ 'is-destructive': button.isDestructive, disabled: button.disabled }\">\n <span\n [id]=\"'labelledby-' + button.label + id\"\n class=\"label\"\n uiEllipseText\n [refresh]=\"isMenuOpened()\"\n [maxDiffPixels]=\"1\"\n [isMultiline]=\"true\"\n (onChangeTextState)=\"button.isTextEllipsed = $event\"\n >{{ button.label }}\n </span>\n\n @if (button.icon) {\n <ui-button\n variant=\"icon-button\"\n [applicationTheme]=\"applicationTheme\"\n [iconName]=\"button.icon\"\n [tooltip]=\"button.tooltipText ? button.tooltipText : button.isTextEllipsed ? button.label : ''\"\n [tooltipPosition]=\"'above'\"\n [size]=\"'medium'\"\n (focus)=\"onButtonFocus(button)\"\n (blur)=\"onButtonBlur(button)\"\n (mouseenter)=\"onButtonHover(button, true)\"\n (mouseleave)=\"onButtonHover(button, false)\"\n (click)=\"onSelectItem($event, button.value)\"\n >\n </ui-button>\n }\n </div>\n } @else {\n <!-- Default non-removable menu option -->\n @if (button.isTitleButton && !button.hideTitleButton) {\n <div class=\"menu-title\">{{ button.label }}</div>\n }\n\n @if (!button.isTitleButton) {\n <button\n mat-menu-item\n [matMenuTriggerFor]=\"getMenu(button.subMenu)\"\n (menuOpened)=\"onSubmenuOpened()\"\n (focus)=\"onButtonFocus(button)\"\n (blur)=\"onButtonBlur(button)\"\n (mouseenter)=\"onButtonHover(button, true)\"\n (mouseleave)=\"onButtonHover(button, false)\"\n [ngClass]=\"{ 'is-destructive': button.isDestructive, disabled: button.disabled }\"\n disableRipple\n (click)=\"onButtonClick(button, $event)\"\n [matTooltip]=\"button.tooltipText ? button.tooltipText : button.isTextEllipsed ? button.label : ''\"\n [attr.aria-labelledby]=\"'labelledby-' + button.label + id\"\n [attr.aria-describedby]=\"'describedby-' + button.label + id\"\n [attr.aria-label]=\"button.ariaLabel \|\| null\"\n role=\"menuitem\"\n matTooltipPosition=\"right\"\n >\n <span [id]=\"'describedby-' + button.label + id\" [style.display]=\"'none'\">\n {{\n button.disabled\n ? ('MENU.MENUITEM_DISABLED' \| uiTranslate \| async) + ' ' + (button.describedby \|\| '')\n : button.describedby\n }}\n </span>\n @if (button.icon) {\n <ui-icon\n [name]=\"button.icon\"\n [toggleIconStyle]=\"true\"\n [filled]=\"\n button.disabled ? false : button.isHovered ? true : menuItemHasHovered ? false : !!button.isFocused\n \"\n [applicationTheme]=\"applicationTheme\"\n [size]=\"'24'\"\n [color]=\"button.disabled ? 'dark' : button.isDestructive ? 'red' : 'rebrand-black'\"\n ></ui-icon>\n }\n <span\n [id]=\"'labelledby-' + button.label + id\"\n class=\"label\"\n uiEllipseText\n [refresh]=\"isMenuOpened()\"\n [maxDiffPixels]=\"1\"\n [isMultiline]=\"true\"\n (onChangeTextState)=\"button.isTextEllipsed = $event\"\n >{{ button.label }}</span\n >\n @if (button.isPremium) {\n <ui-icon\n [name]=\"'Premium-circle-in-line'\"\n [applicationTheme]=\"applicationTheme\"\n [size]=\"'24'\"\n class=\"premium-icon\"\n ></ui-icon>\n }\n </button>\n }\n }\n </ng-container>\n\n <ng-content select=\"[menu-content]\"></ng-content>\n </mat-menu>\n }\n</div>\n","queryGuide":{"roles":["menuitem","menu"],"ariaAttributes":["aria-label","aria-required","aria-describedby","aria-haspopup","aria-expanded","aria-labelledby"],"dataTestIds":[],"materialComponents":["mat-menu"],"childUIComponents":["ui-button","ui-icon"],"suggestedQueries":["screen.getByRole('menuitem')","screen.getByRole('menu')","screen.getByLabelText('label text')"]},"filePath":"components/overflow-menu/overflow-menu.component.ts","supportsTheme":true,"lastModified":1775743558158.8367},"page-header":{"name":"PageHeaderComponent","selector":"ui-page-header","category":"page-header","description":"PageHeaderComponent component","importPath":"@testgorilla/tgo-ui/components/page-header","moduleName":"PageHeaderModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"showBackButton","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":"booleanAttribute","description":"Flag to determine whether the \"Back\" button should be displayed.","isSignal":false},{"name":"tooltip","type":"unknown","defaultValue":"'COMMON.BACK'","required":false,"alias":null,"transform":null,"description":"Back button tooltip for mobile variation","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false}],"outputs":[{"name":"back","eventType":"void","alias":null,"description":"Event triggered when the \"Back\" button is clicked.","isSignal":false}],"module":{"name":"PageHeaderModule","imports":["CommonModule","ButtonComponentModule","UiTranslatePipe"],"exports":["PageHeaderComponent"],"declarations":["PageHeaderComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[{"name":"HeaderWithTemplate","template":"<ui-page-header ${argsToTemplate(mergedArgs)}>\n <div content style=\"display: flex\">\n <ui-avatar style=\"margin-right: 16px\" content size=\"medium\" imageUrl=\"/images/Avatar.png\"></ui-avatar>\n <div style=\"display: flex; flex-direction: column; justify-content: space-between\">\n <div style=\"font-weight: bold; font-size: 20px\">Title</div>\n <div>Text</div>\n </div>\n </div>\n <div right-side style=\"display: flex\">\n <ui-button applicationTheme=\"${_theme}\" style=\"margin-right: 16px\" variant=\"ghost\" label=\"Button\"></ui-button>\n <ui-button applicationTheme=\"${_theme}\" label=\"Button\"></ui-button>\n </div>\n </ui-page-header>","props":{}}],"documentation":"","template":"<ng-container>\n <div class=\"page-header-container\">\n <div class=\"page-header-content\">\n @if ((isMobile$ \| async) === false) {\n @if (showBackButton) {\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"('COMMON.BACK' \| uiTranslate \| async)!\"\n (click)=\"onBack()\"\n [ariaLabel]=\"('COMMON.BACK' \| uiTranslate \| async)!\"\n [variant]=\"'ghost'\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n }\n } @else {\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n class=\"mobile-back-btn\"\n [tooltip]=\"('COMMON.BACK' \| uiTranslate \| async)!\"\n [variant]=\"'icon-button'\"\n [ariaLabel]=\"('COMMON.BACK' \| uiTranslate \| async)!\"\n (click)=\"onBack()\"\n [justIcon]=\"true\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-in-line'\"\n ></ui-button>\n }\n\n <div class=\"main-content\" [ngClass]=\"{ 'remove-margin': !showBackButton }\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n\n <div class=\"right-side\">\n <ng-content select=\"[right-side]\"></ng-content>\n </div>\n </div>\n </div>\n</ng-container>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-button"],"suggestedQueries":[]},"filePath":"components/page-header/page-header.component.ts","supportsTheme":true,"lastModified":1775743558159.8367},"paginator":{"name":"PaginatorComponent","selector":"ui-paginator","category":"paginator","description":"To use the Paginator component, you need to import the `PaginatorComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/paginator","moduleName":"PaginatorComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"pageSizeOptions","type":"unknown","defaultValue":"[10, 25, 50]","required":false,"alias":null,"transform":null,"description":"Paginator size options","isSignal":false},{"name":"length","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"Data length","isSignal":false},{"name":"pageSize","type":"number","defaultValue":"25","required":false,"alias":null,"transform":null,"description":"Page size","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Disabled","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"currentPage","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"Defines the current page","isSignal":false}],"outputs":[{"name":"paginatorChange","eventType":"PageEvent","alias":null,"description":"","isSignal":false}],"module":{"name":"PaginatorComponentModule","imports":["CommonModule","MatPaginatorModule"],"exports":["PaginatorComponent"],"declarations":["PaginatorComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Paginator component, you need to import the `PaginatorComponentModule` in your module:\n\n```typescript\nimport { PaginatorComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n PaginatorComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-paginator\n [length]=\"100\"\n [pageSize]=\"10\"\n [pageSizeOptions]=\"[5, 10, 25, 50]\"\n [showFirstLastButtons]=\"true\"\n (page)=\"onPageChange($event)\"\n></ui-paginator>\n```","template":"<mat-paginator\n [disabled]=\"disabled\"\n [length]=\"length\"\n [pageIndex]=\"currentPage ? currentPage : 0\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n [attr.theme]=\"applicationTheme\"\n [selectConfig]=\"selectConfig\"\n [color]=\"'accent'\"\n (page)=\"onPaginatorChange($event)\"\n></mat-paginator>\n","queryGuide":{"roles":["navigation"],"ariaAttributes":[],"dataTestIds":[],"materialComponents":["mat-paginator"],"childUIComponents":[],"suggestedQueries":["screen.getByRole('navigation')"]},"filePath":"components/paginator/paginator.component.ts","supportsTheme":true,"lastModified":1775743558159.8367},"password-criteria":{"name":"PasswordComponent","selector":"ui-password-criteria","category":"password-criteria","description":"PasswordComponent component","importPath":"@testgorilla/tgo-ui/components/password-criteria","moduleName":"PasswordComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"showCriteria","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Show criteria for password. Defaults true","isSignal":false},{"name":"required","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Password is required or not","isSignal":false}],"outputs":[{"name":"passwordChange","eventType":"string","alias":null,"description":"","isSignal":false},{"name":"allCriteriaPassed","eventType":"boolean","alias":null,"description":"","isSignal":false}],"module":{"name":"","imports":[],"exports":[],"declarations":[],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"","template":"<div class=\"password-criteria-container\">\n <ui-field\n [applicationTheme]=\"'dark'\"\n [formControl]=\"formControl\"\n [ariaLabel]=\"requiredCriteria?.nativeElement?.innerText ?? ''\"\n [type]=\"'password'\"\n [placeholder]=\"('PASSWORD.PASSWORD_PLACEHOLDER' \| uiTranslate \| async) + (required ? ' ' : '')\"\n (keydown.enter)=\"showError = true\"\n (focusout)=\"showError = true\"\n ></ui-field>\n\n <div class=\"criteria-container\" ngIf=\"showCriteria\" #requiredCriteria>\n <div class=\"progress\">\n <ui-progress-bar\n [progress]=\"progressValue === 1 ? 0 : progressValue\"\n [applicationTheme]=\"'dark'\"\n ></ui-progress-bar>\n </div>\n\n <span ngIf=\"allRequirementsMet\" style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">{{\n 'FIELD.ALL_PASSWORD_REQ_PASSED' \| uiTranslate \| async\n }}</span>\n\n <div\n ngFor=\"let criterion of criteria\"\n class=\"criterion\"\n [attr.aria-live]=\"!allRequirementsMet ? 'polite' : ''\"\n [ngClass]=\"{ passed: criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] && showError }\"\n >\n <ui-icon\n [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] && showError ? 'Info-in-line' : 'Check-round-in-line'\"\n applicationTheme=\"dark\"\n ></ui-icon>\n <span>{{ criterion.translateKey \| uiTranslate \| async }}</span>\n <span style=\"position: absolute; left: -9999px\">{{\n (criteriaPassed[criterion.key] ? 'COMMON.PASSED' : 'COMMON.FAILED') \| uiTranslate \| async\n }}</span>\n </div>\n </div>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":["aria-live"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-field","ui-progress-bar","ui-icon"],"suggestedQueries":[]},"filePath":"components/password-criteria/password-criteria.component.ts","supportsTheme":false,"lastModified":1775743558159.8367},"password-strength":{"name":"PasswordStrengthComponent","selector":"ui-password-strength","category":"password-strength","description":"To use the Password Strength component, you need to import the `PasswordStrengthComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/password-strength","moduleName":"PasswordStrengthComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"password","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"The password that needs to be checked","isSignal":false}],"outputs":[{"name":"validationCheck","eventType":"boolean","alias":null,"description":"Event that outputs validation check result","isSignal":false}],"module":{"name":"PasswordStrengthComponentModule","imports":["CommonModule","IconComponentModule","ProgressBarComponentModule","UiTranslatePipe"],"exports":["PasswordStrengthComponent"],"declarations":["PasswordStrengthComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Password Strength component, you need to import the `PasswordStrengthComponentModule` in your module:\n\n```typescript\nimport { PasswordStrengthComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n PasswordStrengthComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-password-strength \n [password]=\"myPassword\" \n applicationTheme=\"light\"\n (strengthChange)=\"handleStrengthChange($event)\">\n</ui-password-strength>\n```\n\nThe component provides visual feedback on password strength based on defined criteria.","template":"<div class=\"criteria-container\">\n <div class=\"progress\">\n <ui-progress-bar\n [progress]=\"progressValue === 1 ? 0 : progressValue\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-progress-bar>\n </div>\n\n <div\n ngFor=\"let criterion of criteria\"\n class=\"criterion\"\n [ngClass]=\"{ passed: criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] }\"\n >\n <ui-icon\n [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] ? infoIcon : checkIcon\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n <span>{{ criterion.translateKey \| uiTranslate \| async }}</span>\n </div>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-progress-bar","ui-icon"],"suggestedQueries":[]},"filePath":"components/password-strength/password-strength.component.ts","supportsTheme":true,"lastModified":1775743558160.8367},"phone-input":{"name":"PhoneInputComponent","selector":"ui-phone-input","category":"phone-input","description":"To use the Phone Input component, you need to import the `PhoneInputComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/phone-input","moduleName":"PhoneInputComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"disabled","type":"boolean","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Determines if input is disabled","isSignal":false},{"name":"required","type":"boolean","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input is required or not","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"fullWidth","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Indicator of the phone input width","isSignal":false},{"name":"hideBuiltInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Hide in build errors for Reactive Forms","isSignal":false},{"name":"hideLabelInErrors","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Hide label in errors","isSignal":false},{"name":"value","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Phone number","isSignal":false},{"name":"countryList","type":"UICountry[]","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Country list for select","isSignal":false},{"name":"placeholder","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Placeholder input","isSignal":false},{"name":"errors","type":"string[]","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input field errors","isSignal":false}],"outputs":[],"module":{"name":"PhoneInputComponentModule","imports":["CommonModule","MatProgressSpinnerModule","ReactiveFormsModule","MatSelectModule","MatIconModule","MatInputModule","NgxMatSelectSearchModule","IconComponentModule","SpinnerComponentModule","UiTranslatePipe","ValidationErrorModule","HasValidationErrorPipe"],"exports":["PhoneInputComponent"],"declarations":["PhoneInputComponent","JoinStringsPipe"],"providers":[]},"types":{"typeAliases":[],"interfaces":[{"name":"UICountry","properties":[{"name":"name","type":"string","optional":false},{"name":"alpha2Code","type":"string","optional":false},{"name":"callingCode","type":"string","optional":false}]}],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Phone Input component, you need to import the `PhoneInputComponentModule` in your module:\n\n```typescript\nimport { PhoneInputComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n PhoneInputComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-phone-input\n [countryList]=\"countryList\"\n [(value)]=\"phoneNumber\"\n applicationTheme=\"light\"\n (valueChange)=\"onPhoneNumberChange($event)\">\n</ui-phone-input>\n```\n\nThe component allows users to input phone numbers with country code selection.","template":"<mat-form-field\n [formGroup]=\"form\"\n appearance=\"outline\"\n [color]=\"errorsLength \|\| (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n [ngClass]=\"{ disabled: form.disabled \|\| disabled, 'full-width': fullWidth }\"\n>\n <mat-label>{{ 'COMMON.PHONE_NUMBER' \| uiTranslate \| async }} <span ngIf=\"required\"></span></mat-label>\n\n <div matPrefix class=\"country\">\n <button class=\"selected-flag\" matPrefix ngIf=\"selectedCountry\">\n <img\n [height]=\"20\"\n [width]=\"24\"\n [attr.src]=\"countryFlagSrc + selectedCountry?.alpha2Code?.toLowerCase() + '.svg'\"\n [alt]=\"'Country flag ' + selectedCountry?.alpha2Code?.toLowerCase()\"\n />\n </button>\n <mat-select\n #select\n (selectionChange)=\"onOptionsSelected($event.value)\"\n [value]=\"selectedCountry\"\n [disableOptionCentering]=\"true\"\n [panelClass]=\"'phone-number-select' + ' ' + applicationTheme\"\n [ngClass]=\"{ opened: select.panelOpen }\"\n >\n <mat-select-trigger>{{ selectedCountry?.callingCode }}</mat-select-trigger>\n <mat-option>\n <ngx-mat-select-search\n [formControl]=\"selectFilterCtrl\"\n ngDefaultControl\n placeholderLabel=\"\"\n noEntriesFoundLabel=\"\"\n >\n <ui-icon ngxMatSelectSearchClear size=\"24\" [name]=\"'Close-in-line'\"></ui-icon>\n </ngx-mat-select-search>\n </mat-option>\n <mat-option ngFor=\"let country of countries$ \| async; trackBy: filteredCountryTrackByMethod\" [value]=\"country\">\n <div class=\"country-option\">\n <img\n [height]=\"20\"\n [width]=\"24\"\n [attr.src]=\"countryFlagSrc + country?.alpha2Code?.toLowerCase()! + '.svg'\"\n [alt]=\"'Country flag ' + country?.alpha2Code?.toLowerCase()!\"\n />\n <small>{{ $any([country?.name, '(' + country?.callingCode + ')']) \| joinStrings: ' ' }}</small>\n </div>\n </mat-option>\n </mat-select>\n </div>\n\n <input\n (input)=\"onInput(form.get('phone_number')!.value)\"\n formControlName=\"phone_number\"\n (click)=\"disableClick($event)\"\n [ngStyle]=\"{ opacity: disabled ? 0.5 : 1 }\"\n [required]=\"required\"\n matInput\n type=\"text\"\n />\n\n <mat-hint class=\"error\" ngIf=\"errorsLength \|\| (ngControl?.errors \| hasValidationError)\">\n <ng-container ngIf=\"errorsLength\">\n <div class=\"errors\" ngFor=\"let error of _errors; trackBy: trackByFn\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n </ng-container>\n\n <ui-validation-error\n ngIf=\"ngControl && !hideBuiltInErrors\"\n [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors ? null : ('COMMON.PHONE_NUMBER' \| uiTranslate \| async)\"\n ></ui-validation-error>\n </mat-hint>\n</mat-form-field>\n","queryGuide":{"roles":["combobox","option"],"ariaAttributes":[],"dataTestIds":[],"materialComponents":["mat-form-field","mat-label","mat-select","mat-select-trigger","mat-option","mat-hint"],"childUIComponents":["ui-icon","ui-validation-error"],"suggestedQueries":["screen.getByRole('combobox')","screen.getByRole('option')","// Open dropdown: await userEvent.click(screen.getByRole('combobox'))","// Select option: await userEvent.click(await screen.findByText('Option'))"]},"filePath":"components/phone-input/phone-input.component.ts","supportsTheme":true,"lastModified":1775743558160.8367},"popover":{"name":"PopoverComponent","selector":"ui-popover","category":"popover","description":"PopoverComponent component","importPath":"@testgorilla/tgo-ui/components/popover","moduleName":"PopoverComponentModule","standalone":true,"changeDetection":"OnPush","inputs":[{"name":"templateRef","type":"TemplateRef<unknown> \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"ctx","type":"Record<string, unknown>","defaultValue":"{}","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"popoverCard","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":true}],"outputs":[],"module":{"name":"","imports":[],"exports":[],"declarations":[],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"","template":"@if (templateRef()) {\n @if (popoverCard()) {\n <ui-card>\n <ng-container ngTemplateOutlet=\"templateRef(); context: ctx()\"></ng-container>\n </ui-card>\n } @else {\n <ng-container ngTemplateOutlet=\"templateRef(); context: ctx()\"></ng-container>\n }\n}\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-card"],"suggestedQueries":[]},"filePath":"components/popover/popover.component.ts","supportsTheme":false,"lastModified":1775743558160.8367},"progress-bar":{"name":"ProgressBarComponent","selector":"ui-progress-bar","category":"progress-bar","description":"To use the Progress Bar component, you need to import the `ProgressBarComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/progress-bar","moduleName":"ProgressBarComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"companyColor","type":"string \| null","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Color of the progress bar.\nDefaults to Test Gorilla primary color.","isSignal":false},{"name":"progress","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"Progress value of the progress bar.\nDefaults to zero.","isSignal":false},{"name":"mode","type":"ProgressBarMode","defaultValue":"'determinate'","required":false,"alias":null,"transform":null,"description":"Mode of the progress bar.\nMode must be one of these values: determinate, indeterminate, buffer, query.\nDefaults to 'determinate'.","isSignal":false},{"name":"buffer","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"Buffer value of the progress bar.\nDefaults to zero.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"ariaLabel","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"ariaDescribedBy","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"showPercentage","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Shows the percentage amount","isSignal":false}],"outputs":[],"module":{"name":"ProgressBarComponentModule","imports":["CommonModule","MatProgressBarModule","UiTranslatePipe"],"exports":["ProgressBarComponent"],"declarations":["ProgressBarComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Progress Bar component, you need to import the `ProgressBarComponentModule` in your module:\n\n```typescript\nimport { ProgressBarComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n ProgressBarComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-progress-bar \n mode=\"determinate\" \n [progress]=\"40\" \n applicationTheme=\"light\">\n</ui-progress-bar>\n```\n\nThe component supports several modes:\n- determinate: Shows progress as a percentage\n- indeterminate: Shows an animation for unknown progress\n- query: Similar to indeterminate, but with a different animation\n- buffer: Shows both progress and a buffer progress","template":"@if (showPercentage) {\n <div class=\"percentage\">{{ progress }}%</div>\n}\n\n<mat-progress-bar\n [mode]=\"mode\"\n [value]=\"progress\"\n [bufferValue]=\"buffer\"\n title=\"progress-bar\"\n class=\"progress-bar\"\n [attr.theme]=\"applicationTheme\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-live]=\"'polite'\"\n [attr.aria-describedby]=\"'describedBy'\"\n>\n</mat-progress-bar>\n<div style=\"position: absolute; left: -9999px\" role=\"alert\" ngIf=\"mode === 'indeterminate'\">\n {{ 'COMMON.LOADING' \| uiTranslate \| async }}\n</div>\n<div style=\"display: none\" id=\"describedBy\">\n {{ ariaDescribedBy }}\n</div>\n","queryGuide":{"roles":["alert","progressbar"],"ariaAttributes":["aria-label","aria-live","aria-describedby"],"dataTestIds":[],"materialComponents":["mat-progress-bar"],"childUIComponents":[],"suggestedQueries":["screen.getByRole('alert')","screen.getByRole('progressbar')","screen.getByLabelText('label text')"]},"filePath":"components/progress-bar/progress-bar.component.ts","supportsTheme":true,"lastModified":1775743558161.8367},"prompt":{"name":"PromptComponent","selector":"ui-prompt","category":"prompt","description":"To use the Prompt component, you need to import the `PromptComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/prompt","moduleName":"PromptModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"tags","type":"PromptTag[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"maxCharacters","type":"number","defaultValue":"255","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"supportedFileTypes","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"autoClear","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"showSendButton","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"enableFileUpload","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"placeholder","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Placeholder for the prompt.","isSignal":true},{"name":"errorMessage","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Custom error message displayed below the prompt.","isSignal":true}],"outputs":[{"name":"promptData","eventType":"PromptData","alias":null,"description":"","isSignal":true}],"module":{"name":"PromptModule","imports":["CommonModule","FieldComponentModule","ButtonComponentModule","OverflowMenuComponentModule","TagComponentModule","BadgeComponentModule","CdkOverlayOrigin","CdkConnectedOverlay","CardComponentModule","CdkTextareaAutosize","TooltipComponentModule","MatTooltip","UiTranslatePipe","IconComponentModule"],"exports":["PromptComponent"],"declarations":["PromptComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[{"name":"PromptTag","properties":[{"name":"id","type":"number","optional":false},{"name":"label","type":"string","optional":false},{"name":"autocomplete","type":"string","optional":false}]},{"name":"PromptData","properties":[{"name":"text","type":"string","optional":true},{"name":"files","type":"File[]","optional":true}]}],"enums":[]},"examples":[{"name":"Default","template":"<div class=\"row\">\n <ui-prompt></ui-prompt>\n </div>","props":{"placeholder":"'Custom placeholder'"}},{"name":"CustomPlaceholder","template":"<div class=\"row\">\n <ui-prompt ${argsToTemplate(args)}></ui-prompt>\n </div>","props":{"placeholder":"'Custom placeholder'"}},{"name":"CustomErrorMessage","template":"<div class=\"row\">\n <ui-prompt ${argsToTemplate(args)}></ui-prompt>\n </div>","props":{"errorMessage":"'This is a custom error message'"}},{"name":"Disabled","template":"<div class=\"row\">\n <ui-prompt ${argsToTemplate(args)}></ui-prompt>\n </div>","props":{"disabled":"true","enableFileUpload":"true","showSendButton":"true","tags":"[","id":"1, label: 'Frontend Developer', autocomplete: 'builds UI'"}},{"name":"WithoutTags","template":"<div class=\"row\">\n <ui-prompt ${argsToTemplate(args)}></ui-prompt>\n </div>","props":{"enableFileUpload":"true","showSendButton":"true"}},{"name":"LessThan5Tags","template":"<div class=\"row\">\n <ui-prompt ${argsToTemplate(args)}></ui-prompt>\n </div>","props":{"tags":"[","id":"1, label: 'Frontend Developer', autocomplete: 'builds UI'"}},{"name":"WithViewMoreDropdown","template":"<div class=\"row\">\n <ui-prompt ${argsToTemplate(args)}></ui-prompt>\n </div>","props":{"tags":"[","id":"1, label: 'Frontend Developer', autocomplete: 'builds UI'"}},{"name":"WithAllOptions","template":"<div class=\"row\">\n <ui-prompt ${argsToTemplate(args)}></ui-prompt>\n </div>","props":{"enableFileUpload":"true","showSendButton":"true","tags":"[","id":"1, label: 'Frontend Developer', autocomplete: 'builds UI'"}}],"documentation":"## How to use\n\nTo use the Prompt component, you need to import the `PromptComponentModule` in your module:\n\n```typescript\nimport { PromptComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n PromptComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-prompt \n [tags]=\"[{ id: 1, label: 'Frontend Developer', autocomplete: 'builds UI' },\n { id: 2, label: 'Backend Developer', autocomplete: 'handles server logic' }]\"\n [showSendButton]=\"true\"\n [enableFileUpload]=\"true\"\n [autoClear]=\"false\">\n</ui-prompt>\n```\n","template":"<ng-container>\n <div\n class=\"prompt-container\"\n [class.has-error]=\"!!errorMessage()\"\n [class.disabled]=\"disabled\"\n [attr.aria-disabled]=\"disabled\"\n cdkOverlayOrigin\n #promptOrigin=\"cdkOverlayOrigin\"\n #promptContainerRef\n [ngClass]=\"{ 'prompt-container-focused': isHighlighted() }\"\n >\n <div class=\"prompt-autocomplete\">\n <textarea tabindex=\"-1\" class=\"ghost\" id=\"autocomplete\" [value]=\"autocompleteSuggestion()\" readonly></textarea>\n\n @let showIcon = !isFieldFocused() && !textarea.value;\n @if (showIcon) {\n <ui-icon\n class=\"prompt-icon\"\n [color]=\"'inherit'\"\n [class.hovered]=\"isFieldHovered()\"\n [name]=\"'Sparkle-in-line'\"\n ></ui-icon>\n }\n <ui-field\n #textarea\n class=\"prompt-text\"\n [class.show-icon]=\"showIcon\"\n role=\"input\"\n [showBottomContent]=\"false\"\n [borderless]=\"true\"\n [type]=\"'multi-line'\"\n [autosizableTextarea]=\"true\"\n [maxCharacters]=\"maxCharacters()\"\n [placeholder]=\"showIcon ? placeholder() \|\| ('PROMPT.ASK_ANYTHING' \| uiTranslate \| async)! : ''\"\n [value]=\"promptTextValue() \|\| ''\"\n [hasTextAreaCounter]=\"false\"\n [disabled]=\"disabled\"\n (mouseenter)=\"isFieldHovered.set(true)\"\n (mouseleave)=\"isFieldHovered.set(false)\"\n (focusin)=\"isFieldFocused.set(true)\"\n (fieldBlur)=\"isFieldFocused.set(false)\"\n (keydown.tab)=\"onTextareaTab($event)\"\n ></ui-field>\n </div>\n <div class=\"prompt-footer flex-container\">\n <div class=\"flex-container\">\n @if (enableFileUpload()) {\n <ui-button\n [variant]=\"'icon-button'\"\n [tooltip]=\"('PROMPT.ADD_FILES' \| uiTranslate \| async)!\"\n [tooltipPosition]=\"'above'\"\n [ariaLabel]=\"('PROMPT.ADD_FILES' \| uiTranslate \| async)!\"\n [iconName]=\"'Plus'\"\n [disabled]=\"disabled\"\n (click)=\"fileDrop()?.nativeElement?.click()\"\n ></ui-button>\n <input\n [tabIndex]=\"-1\"\n class=\"form-control\"\n #fileDropRef\n type=\"file\"\n id=\"file-upload\"\n [accept]=\"supportedFileTypes()\"\n [disabled]=\"disabled\"\n (change)=\"uploadFile($event)\"\n />\n\n @if (promptFilesList().length) {\n <div class=\"menu\">\n <ui-badge\n [notificationsAmount]=\"promptFilesList().length\"\n [variant]=\"'notification'\"\n class=\"menu-badge\"\n ></ui-badge>\n <ui-overflow-menu\n [matTooltip]=\"('PROMPT.FILES' \| uiTranslate \| async)!\"\n [matTooltipPosition]=\"'above'\"\n [buttonSize]=\"'medium'\"\n [iconTrigger]=\"'Document'\"\n [buttonVariant]=\"'ghost'\"\n [buttons]=\"fileListMenuConfig()\"\n [isDynamicMenu]=\"true\"\n [withRemovableOption]=\"true\"\n (selectItem)=\"selectedMenuOption($event)\"\n ></ui-overflow-menu>\n </div>\n }\n }\n </div>\n\n @if (tags()?.length && !promptTextValue()) {\n <div class=\"flex-container carousel\">\n <div class=\"tag-container flex-container\" role=\"list\" #tagsScrollContainer>\n @for (tag of tagsVisible(); track tag) {\n <ui-tag\n [label]=\"tag.label\"\n role=\"listitem\"\n [ariaLabel]=\"tag.label\"\n [isDisabled]=\"disabled\"\n (click)=\"selectTag(tag, $event)\"\n (keyup.enter)=\"selectTag(tag, $event)\"\n (keyup.space)=\"selectTag(tag, $event)\"\n ></ui-tag>\n }\n\n @if (tagsInDropdown().length) {\n <ui-button\n class=\"view-more\"\n variant=\"text-inline\"\n [label]=\"('PROMPT.VIEW_MORE' \| uiTranslate \| async)!\"\n [ariaLabel]=\"('PROMPT.VIEW_MORE' \| uiTranslate \| async)!\"\n [size]=\"'medium'\"\n [disabled]=\"disabled\"\n (click)=\"toggleDropdown()\"\n (keydown.enter)=\"focusTagDropdown()\"\n cdkOverlayOrigin\n #dropdownTrigger=\"cdkOverlayOrigin\"\n ></ui-button>\n }\n </div>\n\n <div class=\"flex-container\">\n <ui-button\n [variant]=\"'icon-button'\"\n [size]=\"'small'\"\n [ariaLabel]=\"'Scroll left button'\"\n [iconName]=\"'Arrow-chevron-left-in-line'\"\n [disabled]=\"disabled \|\| tagsScrollContainer.scrollLeft === 0\"\n (click)=\"tagsScrollContainer.scrollBy({ left: -100, behavior: 'smooth' })\"\n ></ui-button>\n <ui-button\n [variant]=\"'icon-button'\"\n [size]=\"'small'\"\n [iconName]=\"'Arrow-chevron-right-in-line'\"\n [ariaLabel]=\"'Scroll right button'\"\n [disabled]=\"\n disabled \|\|\n tagsScrollContainer.scrollLeft + tagsScrollContainer.clientWidth >= tagsScrollContainer.scrollWidth\n \"\n (click)=\"tagsScrollContainer.scrollBy({ left: 100, behavior: 'smooth' })\"\n ></ui-button>\n </div>\n </div>\n }\n\n @if (showSendButton()) {\n <ui-button\n class=\"send-button\"\n [variant]=\"'secondary'\"\n [iconName]=\"'Arrow-up-in-line'\"\n [tooltip]=\"('COMMON.SEND' \| uiTranslate \| async)!\"\n [ariaLabel]=\"('COMMON.SEND' \| uiTranslate \| async)!\"\n [tooltipPosition]=\"'above'\"\n [size]=\"'medium'\"\n [disabled]=\"disabled \|\| (!promptTextValue() && !promptFilesList().length)\"\n (click)=\"sendPromptData()\"\n ></ui-button>\n }\n </div>\n </div>\n\n @if (errorMessage()) {\n <div class=\"prompt-error\">\n <ui-icon [name]=\"'Error'\" color=\"red\"></ui-icon>\n <span>{{ errorMessage() }}</span>\n </div>\n }\n\n <!-- Dropdown for hidden tags -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"promptOrigin\"\n [cdkConnectedOverlayOpen]=\"isDropdownOpened() && !disabled\"\n [cdkConnectedOverlayPositions]=\"dropdownPositions\"\n [cdkConnectedOverlayWidth]=\"promptContainerRef?.offsetWidth \|\| 0\"\n (overlayOutsideClick)=\"dropdownOutsideClick()\"\n >\n <div class=\"dropdown-container\" role=\"list\" #tagDropdown tabindex=\"0\">\n @for (tag of tagsInDropdown(); track tag) {\n <div\n class=\"dropdown-tag\"\n tabindex=\"0\"\n [attr.aria-label]=\"tag.label\"\n role=\"listitem\"\n (click)=\"selectTag(tag, $event)\"\n (keyup.enter)=\"selectTag(tag, $event)\"\n (keyup.space)=\"selectTag(tag, $event)\"\n >\n {{ tag.label }}\n </div>\n }\n </div>\n </ng-template>\n</ng-container>\n","queryGuide":{"roles":["input","list","listitem"],"ariaAttributes":["aria-disabled","aria-label"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon","ui-field","ui-button","ui-badge","ui-overflow-menu","ui-tag"],"suggestedQueries":["screen.getByRole('input')","screen.getByRole('list')","screen.getByRole('listitem')","screen.getByLabelText('label text')"]},"filePath":"components/prompt/prompt.component.ts","supportsTheme":false,"lastModified":1775743558162.837},"radial-progress":{"name":"RadialProgressComponent","selector":"ui-radial-progress","category":"radial-progress","description":"To use the Radial Progress component, you need to import the `RadialProgressComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/radial-progress","moduleName":"RadialProgressComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"size","type":"RadialProgressSize","defaultValue":"RadialProgressSizeEnum.SMALL","required":false,"alias":null,"transform":null,"description":"The size of the component. Defaults to 'small'.","isSignal":false},{"name":"value","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"The current value of the progress. Defaults to 0.","isSignal":false},{"name":"total","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"The value of the total progress. Used to set the cap and used for percentage calculations. Defaults to 0.","isSignal":false},{"name":"variant","type":"RadialProgressVariant","defaultValue":"'number'","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"showPercentageSign","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"icon","type":"IconName","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Icon for icon button","isSignal":false},{"name":"buttonTooltip","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"The tooltip that is displayed on hover. Required for icon-button","isSignal":false},{"name":"companyColor","type":"string \| null","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Color of the progress bar.\nDefaults to Test Gorilla primary color.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false}],"outputs":[{"name":"buttonClicked","eventType":"Event","alias":null,"description":"","isSignal":false}],"module":{"name":"RadialProgressComponentModule","imports":["CommonModule","MatProgressSpinnerModule","ButtonComponentModule"],"exports":["RadialProgressComponent"],"declarations":["RadialProgressComponent"],"providers":[]},"types":{"typeAliases":[{"name":"RadialProgressSize","value":"'large' \| 'small'"},{"name":"RadialProgressVariant","value":"'number' \| 'icon-button' \| 'thin' \| 'empty' \| 'empty-thin'"}],"interfaces":[],"enums":[{"name":"RadialProgressSizeValue","members":[{"name":"LARGE","value":"64"},{"name":"SMALL","value":"40"}]},{"name":"RadialProgressSizeEnum","members":[{"name":"LARGE","value":"'large'"},{"name":"SMALL","value":"'small'"}]}]},"examples":[],"documentation":"## How to use\n\nTo use the Radial Progress component, you need to import the `RadialProgressComponentModule` in your module:\n\n```typescript\nimport { RadialProgressComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n RadialProgressComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-radial-progress \n [value]=\"25\" \n [total]=\"100\"\n size=\"large\" \n applicationTheme=\"light\">\n</ui-radial-progress>\n```\n\nThe component supports several sizes and variants, including an icon-button option that can trigger actions when clicked.","template":"<div\n class=\"radial-progress-container\"\n [attr.theme]=\"applicationTheme\"\n [style.width]=\"progressSize + 'px'\"\n [style.height]=\"progressSize + 'px'\"\n>\n <div class=\"background\" [style.border-width]=\"strokeWidth + 'px'\"></div>\n\n <mat-progress-spinner\n [strokeWidth]=\"strokeWidth\"\n [diameter]=\"progressSize\"\n [value]=\"percentage\"\n ></mat-progress-spinner>\n\n <div\n class=\"inner-container\"\n [class.small-font]=\"(variant === 'thin' \|\| variant === 'empty-thin') && percentage !== 100\"\n [class.tiny-font]=\"percentage === 100 && showPercentageSign && variant === 'thin'\"\n >\n @if (variant === 'empty' \|\| variant === 'empty-thin') {\n <div>{{ '-' }}</div>\n } @else if (variant === 'icon-button' && size !== 'small') {\n <ui-button\n [tooltip]=\"buttonTooltip\"\n [iconName]=\"icon\"\n [variant]=\"'icon-button'\"\n (click)=\"onButtonClick($event)\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-button>\n } @else if (size === radialProgressSize.LARGE \|\| variant === 'thin') {\n <div>\n {{ displayValue }}\n </div>\n }\n </div>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":["mat-progress-spinner"],"childUIComponents":["ui-button"],"suggestedQueries":[]},"filePath":"components/radial-progress/radial-progress.component.ts","supportsTheme":true,"lastModified":1775743558162.837},"radio-button":{"name":"RadioButtonComponent","selector":"ui-radio-button","category":"forms","description":"To use the Radio Button component, you need to import the `RadioButtonComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/radio-button","moduleName":"RadioButtonComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Determines whether the radio button is disabled.\nDefault: false.","isSignal":false},{"name":"allowUnselect","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Determines whether the radio button can be unchecked.\nDefault: false.","isSignal":false},{"name":"companyColor","type":"string \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"Determines the radio button color.\nDefault: Test Gorilla primary color.","isSignal":false},{"name":"name","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Used to group radios for unique selection.","isSignal":false},{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Text content will be applied to the input element if present.","isSignal":false},{"name":"multiple","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Determines whether the radio button is a multiple choice cell.\nDefault: false","isSignal":false},{"name":"value","type":"any","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Determines value of the radio button.\nDefault: false","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"ariaLabel","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"A string representing the ARIA label for accessibility.\nThis label is used to provide an accessible name for the input element.","isSignal":false},{"name":"ariaRequired","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"hasError","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Defines if checkbox has error","isSignal":false},{"name":"ariaLabelledby","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"ariaDescribedby","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"truncateText","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Truncate text if it is too long","isSignal":false},{"name":"alignment","type":"Alignment","defaultValue":"'center'","required":false,"alias":null,"transform":null,"description":"Text alignment","isSignal":false},{"name":"tabIndex","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"Sets the tab index for the checkbox component.\nThis determines the order in which elements receive focus when the user navigates through them using the Tab key.\nDefault value is 0.","isSignal":false},{"name":"hideTooltipOnEllipsis","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Show tooltip when label is truncated","isSignal":false}],"outputs":[{"name":"changeRadio","eventType":"RadioButtonEventType","alias":null,"description":"Event emitted when the checked state of the radio button changes.","isSignal":false}],"module":{"name":"RadioButtonComponentModule","imports":["CommonModule","MatRadioModule","FormsModule","ReactiveFormsModule","MatInputModule","EllipseTextDirective","MatTooltipModule","MatCheckboxModule","FocusVisibleDirective"],"exports":["RadioButtonComponent"],"declarations":["RadioButtonComponent"],"providers":[]},"types":{"typeAliases":[{"name":"RadioButtonEventType","value":"{\n optionName: string;\n optionChecked: boolean;\n}"}],"interfaces":[],"enums":[]},"examples":[{"name":"Default","template":"<ui-radio-button [multiple]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - unselected\" [selected]=\"false\" allowUnselect=\"true\" name=\"unchecked\"></ui-radio-button>\n <br>\n <ui-radio-button [multiple]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - selected\" [selected]=\"true\" allowUnselect=\"true\" name=\"checked\"></ui-radio-button>","props":{"disabled":"false","selected":"false","allowUnselect":"false"}},{"name":"Disabled","template":"<ui-radio-button [multiple]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - unselected\" [selected]=\"false\" allowUnselect=\"true\" name=\"unchecked\"></ui-radio-button>\n <br>\n <ui-radio-button [multiple]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - selected\" [selected]=\"true\" allowUnselect=\"true\" name=\"checked\"></ui-radio-button>","props":{"disabled":"true"}},{"name":"Selected","template":"<ui-radio-button [multiple]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - unselected\" [selected]=\"false\" allowUnselect=\"true\" name=\"unchecked\"></ui-radio-button>\n <br>\n <ui-radio-button [multiple]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - selected\" [selected]=\"true\" allowUnselect=\"true\" name=\"checked\"></ui-radio-button>","props":{"selected":"true"}},{"name":"AllowUnselect","template":"<ui-radio-button [multiple]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - unselected\" [selected]=\"false\" allowUnselect=\"true\" name=\"unchecked\"></ui-radio-button>\n <br>\n <ui-radio-button [multiple]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - selected\" [selected]=\"true\" allowUnselect=\"true\" name=\"checked\"></ui-radio-button>","props":{"selected":"true","allowUnselect":"true"}},{"name":"WithLabel","template":"<ui-radio-button [multiple]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - unselected\" [selected]=\"false\" allowUnselect=\"true\" name=\"unchecked\"></ui-radio-button>\n <br>\n <ui-radio-button [multiple]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - selected\" [selected]=\"true\" allowUnselect=\"true\" name=\"checked\"></ui-radio-button>","props":{"selected":"true","label":"'Some text.'"}},{"name":"MultipleChoice","template":"<ui-radio-button [multiple]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - unselected\" [selected]=\"false\" allowUnselect=\"true\" name=\"unchecked\"></ui-radio-button>\n <br>\n <ui-radio-button [multiple]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - selected\" [selected]=\"true\" allowUnselect=\"true\" name=\"checked\"></ui-radio-button>","props":{}},{"name":"WithErrorMultiple","template":"<ui-radio-button [hasError]=\"true\" allowUnselect=\"true\" applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - unselected\"></ui-radio-button>\n <br>\n <ui-radio-button [hasError]=\"true\" allowUnselect=\"true\" applicationTheme=\"${_theme}\" [multiple]=\"true\" label=\"Multiple selection - unselected\"></ui-radio-button>","props":{}},{"name":"WithErrorSingle","template":"<ui-radio-button [hasError]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - unselected\"></ui-radio-button>\n <br>\n <ui-radio-button [hasError]=\"true\" applicationTheme=\"${_theme}\" label=\"Single selection - unselected\"></ui-radio-button>","props":{}}],"documentation":"## How to use\n\nTo use the Radio Button component, you need to import the `RadioButtonComponentModule` in your module:\n\n```typescript\nimport { RadioButtonComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n RadioButtonComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-radio-button\n label=\"Option 1\"\n [selected]=\"isSelected\"\n [disabled]=\"isDisabled\"\n name=\"options\"\n applicationTheme=\"light\"\n (selectedChange)=\"onSelectionChange($event)\">\n</ui-radio-button>\n```\n\nFor multiple radio buttons in a group:\n\n```html\n<ui-radio-button name=\"colorGroup\" [value]=\"'red'\" [groupValue]=\"selectedColor\" label=\"Red\"></ui-radio-button>\n<ui-radio-button name=\"colorGroup\" [value]=\"'blue'\" [groupValue]=\"selectedColor\" label=\"Blue\"></ui-radio-button>\n<ui-radio-button name=\"colorGroup\" [value]=\"'green'\" [groupValue]=\"selectedColor\" label=\"Green\"></ui-radio-button>\n```\n\nThe radio button component can be used for single selection among a set of options.","template":"<div\n #radioContainer\n tabindex=\"0\"\n [class]=\"multiple ? 'radio-container' : 'radio'\"\n [class.multiple-disabled]=\"disabled && multiple\"\n [ngClass]=\"classMultiple\"\n [attr.alignment]=\"alignment\"\n [attr.truncate-text]=\"truncateText\"\n [attr.theme]=\"applicationTheme\"\n [attr.hasError]=\"hasError\"\n (keydown.enter)=\"clickRadio(); radioContainer.focus()\"\n (keydown.space)=\"clickRadio(); radioContainer.focus()\"\n>\n <mat-radio-button\n #radio\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [name]=\"name\"\n [value]=\"value\"\n class=\"radio-button\"\n [required]=\"ariaRequired\"\n [aria-label]=\"ariaLabel\"\n [aria-labelledby]=\"ariaLabelledby ? ariaLabelledby : label\"\n [aria-describedby]=\"ariaDescribedby\"\n (keydown.enter)=\"$event.preventDefault()\"\n (keydown.space)=\"$event.preventDefault()\"\n [tabIndex]=\"tabIndex\"\n >\n @if (label) {\n <span\n #tooltip=\"matTooltip\"\n class=\"label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n [matTooltip]=\"showTooltip ? label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >{{ label }}</span\n >\n }\n <ng-content select=\"[radio-label]\"></ng-content>\n </mat-radio-button>\n</div>\n","queryGuide":{"roles":["radio"],"ariaAttributes":[],"dataTestIds":[],"materialComponents":["mat-radio-button"],"childUIComponents":[],"suggestedQueries":["screen.getByRole('radio')"]},"filePath":"components/radio-button/radio-button.component.ts","supportsTheme":true,"lastModified":1775743558163.837},"rating":{"name":"RatingComponent","selector":"ui-rating","category":"rating","description":"To use the Rating component, you need to import the `RatingComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/rating","moduleName":"RatingComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme where accordion is used","isSignal":false},{"name":"value","type":"number","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"The value representing the rating.","isSignal":false},{"name":"theme","type":"RatingComponentTheme","defaultValue":"'block'","required":false,"alias":null,"transform":null,"description":"The theme of the rating component. Defaults \"block\".","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"A flag indicating whether the rating component is disabled.","isSignal":false},{"name":"ariaLabel","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"A string representing the ARIA label for accessibility.\nThis label is used to provide an accessible name for the input element.","isSignal":false},{"name":"ariaRequired","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"barWidth","type":"number","defaultValue":"35","required":false,"alias":null,"transform":null,"description":"The width of the rating bar.","isSignal":false},{"name":"canUnselect","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"A flag indicating whether the rating can be unselected by clicking on the same value.\nWhen false, clicking on the same value will not change the rating.","isSignal":false},{"name":"length","type":"number","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":false}],"outputs":[{"name":"valueChange","eventType":"number","alias":null,"description":"","isSignal":false}],"module":{"name":"RatingComponentModule","imports":["CommonModule","MatInputModule"],"exports":["RatingComponent"],"declarations":["RatingComponent","HalfStarPipe"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[{"name":"Default","template":"<ui-rating ${argsToTemplate(args)} applicationTheme=\"${_theme}\"></ui-rating>","props":{"value":"2"}}],"documentation":"## How to use\n\nTo use the Rating component, you need to import the `RatingComponentModule` in your module:\n\n```typescript\nimport { RatingComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n RatingComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-rating [value]=\"3\" theme=\"stars\" [length]=\"5\"></ui-rating>\n```","template":"<div class=\"rating\" (mouseleave)=\"onHover(-1)\" [attr.aria-label]=\"ariaLabel\" [attr.aria-required]=\"ariaRequired\">\n <ng-container ngIf=\"theme === 'block'; else stars\">\n <div\n class=\"rating-item\"\n [attr.theme]=\"applicationTheme\"\n ngFor=\"let item of items\"\n tabindex=\"0\"\n (click)=\"select(item)\"\n (keydown.enter)=\"select(item)\"\n (mouseenter)=\"onHover(item)\"\n [ngClass]=\"{ 'rating-item-selected': item < value, 'rating-item-hover': item < hoverIndex }\"\n [ngStyle]=\"{ 'width.px': barWidth }\"\n ></div>\n </ng-container>\n\n <ng-template #stars>\n <div class=\"star-container\" [attr.theme]=\"applicationTheme\">\n <div\n #star\n class=\"star\"\n tabindex=\"0\"\n [tabIndex]=\"0\"\n (mouseenter)=\"onHover(item)\"\n (mouseleave)=\"onHover(-1)\"\n [ngClass]=\"{\n filled: value > i,\n hover: item < hoverIndex && (value ? item >= value : true),\n disabled,\n 'filled-half': i + 1 \| halfStar: value,\n }\"\n ngFor=\"let item of items; index as i\"\n (click)=\"select(item); star.blur()\"\n (keydown.enter)=\"select(item); star.blur()\"\n ></div>\n </div>\n </ng-template>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":["aria-label","aria-required"],"dataTestIds":[],"materialComponents":[],"childUIComponents":[],"suggestedQueries":["screen.getByLabelText('label text')"]},"filePath":"components/rating/rating.component.ts","supportsTheme":true,"lastModified":1775743558163.837},"scale":{"name":"ScaleComponent","selector":"ui-scale","category":"scale","description":"To use the Scale component, you need to import the `ScaleComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/scale","moduleName":"ScaleComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"selectedIndex","type":"number \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"The value representing the selected item of the scale.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"companyColor","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Color of the option hover.\nDefaults to Test Gorilla primary color.","isSignal":false},{"name":"length","type":"number","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"The max number of items in the scale.","isSignal":false}],"outputs":[{"name":"selectedIndexChange","eventType":"number","alias":null,"description":"","isSignal":false}],"module":{"name":"ScaleComponentModule","imports":["CommonModule"],"exports":["ScaleComponent"],"declarations":["ScaleComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Scale component, you need to import the `ScaleComponentModule` in your module:\n\n```typescript\nimport { ScaleComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n ScaleComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-scale\n [length]=\"5\"\n [selectedIndex]=\"2\"\n applicationTheme=\"light\"\n (select)=\"onScaleSelect($event)\">\n</ui-scale>\n```\n\nThe component creates a visual scale with selectable points, useful for rating and evaluation interfaces.","template":"<div\n [style.--scale-count]=\"items.length\"\n class=\"scale\"\n [ngStyle]=\"styles()\"\n [ngClass]=\"{ 'scale-classic': applicationTheme === 'classic' }\"\n>\n <div\n class=\"scale-item\"\n ngFor=\"let item of items\"\n (click)=\"select(item)\"\n #scaleItem\n role=\"radio\"\n (keydown)=\"onKeyDown($event, item)\"\n (focus)=\"onFocus(item)\"\n [class.scale-item-focus-prev]=\"selectedIndex && selectedIndex > 0 ? item === selectedIndex - 1 : false\"\n [attr.tabindex]=\"selectedIndex === null ? (item === 0 ? '0' : '-1') : item === selectedIndex ? '0' : '-1'\"\n [attr.aria-checked]=\"\n selectedIndex === null ? (item === 0 ? 'true' : 'false') : item === selectedIndex ? 'true' : 'false'\n \"\n [attr.aria-label]=\"getAriaLabel(item)\"\n [ngClass]=\"{ 'scale-item-selected': item === selectedIndex }\"\n >\n {{ item + 1 }}\n </div>\n</div>\n","queryGuide":{"roles":["radio"],"ariaAttributes":["aria-checked","aria-label"],"dataTestIds":[],"materialComponents":[],"childUIComponents":[],"suggestedQueries":["screen.getByRole('radio')","screen.getByLabelText('label text')"]},"filePath":"components/scale/scale.component.ts","supportsTheme":true,"lastModified":1775743558164.837},"scale-table":{"name":"ScaleTableComponent","selector":"ui-scale-table","category":"scale-table","description":"To use the Scale Table component, you need to import the `ScaleTableComponent` in your module or component:","importPath":"@testgorilla/tgo-ui/components/scale-table","moduleName":"ScaleTableComponentModule","standalone":true,"changeDetection":"OnPush","inputs":[{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":true},{"name":"labels","type":"string[]","defaultValue":null,"required":true,"alias":null,"transform":null,"description":"Defines description of scales","isSignal":true},{"name":"scaleItems","type":"ScaleItem[]","defaultValue":null,"required":true,"alias":null,"transform":null,"description":"Defines items with their text and it's values","isSignal":true},{"name":"hideBetterExperience","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true}],"outputs":[{"name":"scaleItemChange","eventType":"{\n item: ScaleItem;\n label: string;\n }","alias":null,"description":"","isSignal":true},{"name":"scaleItemsChange","eventType":"ScaleItem[]","alias":null,"description":"Two-way binding change event for scaleItems","isSignal":true},{"name":"hideBetterExperienceChange","eventType":"boolean","alias":null,"description":"Two-way binding change event for hideBetterExperience","isSignal":true}],"module":{"name":"","imports":[],"exports":[],"declarations":[],"providers":[]},"types":{"typeAliases":[],"interfaces":[{"name":"ScaleItem","properties":[{"name":"length","type":"number","optional":true},{"name":"value","type":"number","optional":true},{"name":"text","type":"string","optional":false}]}],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Scale Table component, you need to import the `ScaleTableComponent` in your module or component:\n\n```typescript\nimport { ScaleTableComponent } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n ScaleTableComponent,\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule {}\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-scale-table\n [scaleItems]=\"[\n { text: 'Development Stage 1' },\n { text: 'Development Stage 2', value: 1} // with pre selected value\n ]\"\n/>\n```\n\nThis component displays a table of scales with labels, useful for multi-criteria evaluations.\n","template":"<div class=\"scale-table\">\n <div class=\"better-experience\" [class.hide]=\"hideBetterExperience()\">\n <ui-icon [size]=\"'24'\" [name]=\"'Device-rotate-in-line'\" class=\"mobile-landscape-icon\" />\n <p>{{ 'SCALE_TABLE.ROTATE_DEVICE' \| uiTranslate \| async }}</p>\n <ui-button\n iconName=\"Close\"\n variant=\"icon-button\"\n size=\"small\"\n [justIcon]=\"true\"\n [tooltip]=\"('COMMON.CLOSE' \| uiTranslate \| async)!\"\n (click)=\"hideBetterExperience.set(true)\"\n />\n </div>\n <!-- Header -->\n <div tabindex=\"0\" [attr.aria-label]=\"'scale header'\" class=\"scale-table-header\">\n @for (label of labels(); track $index) {\n <div\n tabindex=\"0\"\n role=\"heading\"\n [attr.aria-level]=\"3\"\n [attr.aria-label]=\"label + ' as ' + ($index + 1)\"\n class=\"scale-size\"\n >\n {{ label }}\n </div>\n }\n </div>\n <!-- Scale Items -->\n @for (scale of scaleItems(); track scale.text) {\n <div class=\"scale-table-row\" tabindex=\"0\" role=\"radiogroup\" [attr.aria-label]=\"scale.text\">\n <div class=\"scale-text\">{{ scale.text }}</div>\n <ui-scale\n [selectedIndex]=\"scale.value ?? null\"\n [length]=\"scale.length ?? labels().length\"\n [applicationTheme]=\"applicationTheme()\"\n (selectedIndexChange)=\"select($index, $event)\"\n />\n </div>\n }\n</div>\n","queryGuide":{"roles":["heading","radiogroup"],"ariaAttributes":["aria-label","aria-level"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon","ui-button","ui-scale"],"suggestedQueries":["screen.getByRole('heading')","screen.getByRole('radiogroup')","screen.getByLabelText('label text')"]},"filePath":"components/scale-table/scale-table.component.ts","supportsTheme":true,"lastModified":1775743558163.837},"segmented-bar":{"name":"SegmentedBarComponent","selector":"ui-segmented-bar","category":"segmented-bar","description":"To use the Segmented Bar component, you need to import the `SegmentedBarComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/segmented-bar","moduleName":"SegmentedBarComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"width","type":"unknown","defaultValue":"'100%'","required":false,"alias":null,"transform":null,"description":"The width of the segmented bar. Defaults to '100%'.\nYou can use '100%' or '100px' for this field. 100 is just an example","isSignal":false},{"name":"size","type":"SegmentedBarVariant","defaultValue":"'large'","required":false,"alias":null,"transform":null,"description":"The size variant of the segmented bar. Can be 'small' or 'large'.\nDefaults to 'large'.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"ariaLabel","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"A string representing the ARIA label for accessibility.\nThis label is used to provide an accessible name for the input element.","isSignal":false},{"name":"ariaRequired","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"tooltipStats","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Groups the tooltips into one template","isSignal":false},{"name":"segments","type":"SegmentedBar[]","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"The segments to be displayed in the segmented bar.","isSignal":false}],"outputs":[],"module":{"name":"SegmentedBarComponentModule","imports":["CommonModule","MatTooltipModule","MatInputModule","IconComponentModule","TooltipComponentModule"],"exports":["SegmentedBarComponent"],"declarations":["SegmentedBarComponent"],"providers":[]},"types":{"typeAliases":[{"name":"SegmentedBarVariant","value":"'large' \| 'small'"},{"name":"SegmentedBarColor","value":"'teal' \| 'rhubarb' \| 'light-teal' \| 'grey'"},{"name":"SegmentedBarWithPercentage","value":"SegmentedBar & { percentage: string }"}],"interfaces":[{"name":"SegmentedBar","properties":[{"name":"value","type":"number","optional":false},{"name":"color","type":"SegmentedBarColor","optional":false},{"name":"tooltip","type":"string","optional":true},{"name":"icon","type":"IconName","optional":true}]}],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Segmented Bar component, you need to import the `SegmentedBarComponentModule` in your module:\n\n```typescript\nimport { SegmentedBarComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n SegmentedBarComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-segmented-bar\n [segments]=\"[\n { value: 3, color: 'teal', tooltip: 'Completed' },\n { value: 1, color: 'grey', tooltip: 'Pending' },\n { value: 2, color: 'rhubarb', tooltip: 'Failed' }\n ]\"\n applicationTheme=\"light\">\n</ui-segmented-bar>\n```\n\nThis component displays a horizontal bar divided into colored segments, useful for visualizing proportional data.","template":"<div\n class=\"segmented-bar-container\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"'segment-size-' + size\"\n [style.width]=\"width\"\n [uiTooltipTemplate]=\"segmentedStats\"\n [showTooltip]=\"tooltipStats\"\n [attr.aria-label]=\"accessibleValueText\"\n role=\"graphics-object\"\n [tabIndex]=\"0\"\n>\n <ng-container ngFor=\"let segment of segmentList\">\n <div\n class=\"segmented-bar\"\n ngIf=\"segment.value\"\n [ngClass]=\"segment.color\"\n [ngStyle]=\"{ flex: segment.value }\"\n [matTooltip]=\"!tooltipStats ? (segment.tooltip ?? '') : ''\"\n [matTooltipClass]=\"applicationTheme\"\n [attr.aria-hidden]=\"true\"\n [attr.aria-required]=\"ariaRequired\"\n >\n <ui-icon ngIf=\"segment.icon\" [applicationTheme]=\"applicationTheme\" [name]=\"segment.icon\"></ui-icon>\n <span>{{ segment.value }}</span>\n </div>\n </ng-container>\n</div>\n<ng-template #segmentedStats>\n <div class=\"stats-container\">\n <div class=\"name-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <div [class]=\"'point ' + segment.color\"></div>\n <span [class]=\"'label ' + segment.color\">{{ segment.tooltip }}</span>\n </div>\n }\n </div>\n\n <div class=\"value-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <span>{{ segment.value }}</span>\n </div>\n }\n </div>\n\n <div class=\"percentage-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <span>{{ segment.percentage }}</span>\n </div>\n }\n </div>\n </div>\n</ng-template>\n\n<ng-template #segmentedStats>\n <div class=\"stats-container\">\n <div class=\"name-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <div [class]=\"'point ' + segment.color\"></div>\n <span [class]=\"'label ' + segment.color\">{{ segment.tooltip }}</span>\n </div>\n }\n </div>\n\n <div class=\"value-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <span>{{ segment.value }}</span>\n </div>\n }\n </div>\n\n <div class=\"percentage-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <span>{{ segment.percentage }}</span>\n </div>\n }\n </div>\n </div>\n</ng-template>\n","queryGuide":{"roles":["graphics-object"],"ariaAttributes":["aria-label","aria-hidden","aria-required"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon"],"suggestedQueries":["screen.getByRole('graphics-object')","screen.getByLabelText('label text')"]},"filePath":"components/segmented-bar/segmented-bar.component.ts","supportsTheme":true,"lastModified":1775743558164.837},"segmented-button":{"name":"SegmentedButtonComponent","selector":"ui-segmented-button","category":"segmented-button","description":"To use the Segmented Button component, you need to import the `SegmentedButtonComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/segmented-button","moduleName":"SegmentedButtonComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"buttonConfig","type":"SegmentedButton[]","defaultValue":null,"required":true,"alias":null,"transform":null,"description":"Input property to set the buttons for the segmented button.","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether the component is disabled.\nDefault: false.","isSignal":false},{"name":"fullWidth","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Indicator of the Segmented Button width","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"value","type":"any","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Selected button","isSignal":false}],"outputs":[{"name":"buttonSelected","eventType":"any","alias":null,"description":"","isSignal":false}],"module":{"name":"SegmentedButtonComponentModule","imports":["CommonModule","MatButtonToggleModule","FormsModule","MatTooltipModule"],"exports":["SegmentedButtonComponent"],"declarations":["SegmentedButtonComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[{"name":"SegmentedButton","properties":[{"name":"value","type":"string","optional":false},{"name":"label","type":"string","optional":true},{"name":"template","type":"TemplateRef<any>","optional":true},{"name":"disabled","type":"boolean","optional":true},{"name":"tooltip","type":"string","optional":true}]}],"enums":[]},"examples":[{"name":"Default","template":"<ui-segmented-button [buttonConfig]=\"buttonConfig\" applicationTheme=\"${_theme}\"></ui-segmented-button>","props":{"buttonConfig":"[","label":"'StartButton', value: '1'"}},{"name":"Disabled","template":"<ui-segmented-button [buttonConfig]=\"buttonConfig\" applicationTheme=\"${_theme}\"></ui-segmented-button>","props":{"buttonConfig":"[","label":"'StartButton', value: '1', disabled: true"}},{"name":"WithTemplate","template":"<ng-template #badgeTpl>\n <ui-badge\n label=\"Suggested\"\n variant=\"primary\"\n rebrandColor=\"info\"\n style=\"position: absolute; top: -10px; left: -20px\"\n ></ui-badge>\n Label\n </ng-template>\n <ui-segmented-button applicationTheme=\"${_theme}\"\n [buttonConfig]=\"\n [\n { value: 1, template: badgeTpl },\n { label: 'MiddleButton', value: 2 },\n { label: 'EndButton', value: 3 },\n ]\"\n >\n </ui-segmented-button>","props":{}}],"documentation":"## How to use\n\nTo use the Segmented Button component, you need to import the `SegmentedButtonComponentModule` in your module:\n\n```typescript\nimport { SegmentedButtonComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n SegmentedButtonComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-segmented-button\n [buttonConfig]=\"[\n { label: 'Day', value: 'day' },\n { label: 'Week', value: 'week' },\n { label: 'Month', value: 'month' }\n ]\"\n applicationTheme=\"light\"\n (valueChange)=\"onSelectionChange($event)\">\n</ui-segmented-button>\n```\n\nThe component can also accept custom templates for more complex button content.","template":"<mat-button-toggle-group\n class=\"segmented-button-container\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ disabled, 'full-width': fullWidth }\"\n [value]=\"value\"\n [hideSingleSelectionIndicator]=\"true\"\n (change)=\"manualChangeValue($event)\"\n>\n <mat-button-toggle\n [disableRipple]=\"true\"\n ngFor=\"let button of buttonConfig\"\n [value]=\"button.value\"\n [ngClass]=\"{ disabled: button.disabled }\"\n [matTooltip]=\"button.tooltip ?? ''\"\n >\n <ng-container ngIf=\"button.template; else label\" [ngTemplateOutlet]=\"button.template\"></ng-container>\n <ng-template #label>{{ button.label }}</ng-template>\n </mat-button-toggle>\n</mat-button-toggle-group>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":["mat-button-toggle-group","mat-button-toggle"],"childUIComponents":[],"suggestedQueries":[]},"filePath":"components/segmented-button/segmented-button.component.ts","supportsTheme":true,"lastModified":1775743558165.837},"selectable-card":{"name":"SelectableCardComponent","selector":"ui-selectable-card","category":"selectable-card","description":"To use the SelectableCard component, you need to import the `SelectableCardComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/selectable-card","moduleName":"SelectableCardComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"size","type":"CardSize","defaultValue":"'medium'","required":false,"alias":null,"transform":null,"description":"Card size. Defaults to \"medium\".","isSignal":true},{"name":"selectedVariant","type":"CardVariant","defaultValue":"'state'","required":false,"alias":null,"transform":null,"description":"Card variant/design for selected state. Defaults to \"default\".","isSignal":true},{"name":"selected","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether the card is selected (input from parent).","isSignal":true},{"name":"isCheckboxDisabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether the checkbox is disabled.","isSignal":true}],"outputs":[{"name":"cardSelected","eventType":"boolean","alias":null,"description":"Event emitted when the card is selected, with the current selected state.","isSignal":true}],"module":{"name":"SelectableCardComponentModule","imports":["CommonModule","CardComponentModule","CheckboxComponentModule"],"exports":["SelectableCardComponent"],"declarations":["SelectableCardComponent"],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the SelectableCard component, you need to import the `SelectableCardComponentModule` in your module:\n\n```typescript\nimport { SelectableCardComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n SelectableCardComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-selectable-card \n [size]=\"'medium'\"\n [selected]=\"isSelected\" \n [isCheckboxDisabled]=\"isDisabled\" \n (cardSelected)=\"onCardSelected($event)\">\n <ui-selectable-card-label>Card Label</ui-selectable-card-label>\n <ui-selectable-card-content>\n <div>Your content goes here</div>\n </ui-selectable-card-content>\n</ui-selectable-card>\n```\n\n## Inputs\n\n- `size`: Card size (`'small' \| 'medium' \| 'large'`). Defaults to `'medium'`.\n- `selected`: Whether the card is selected from parent (boolean). Defaults to `false`. This updates the internal selected state.\n- `isCheckboxDisabled`: Whether the card selection is disabled (boolean). Defaults to `false`.\n\n## Outputs\n\n- `cardSelected`: Emitted when the card is selected, with the current selected state (boolean).\n\n## Content Projection\n\n- `ui-selectable-card-label`: Content projected to the checkbox label area.\n- `ui-selectable-card-content`: Content projected to the main card content area.","template":"<ui-card\n class=\"selectable-card\"\n [size]=\"size()\"\n [selected]=\"isSelected()\"\n [allowSelect]=\"!isCheckboxDisabled()\"\n [allowFocus]=\"false\"\n [variant]=\"isCheckboxDisabled() ? 'default' : isSelected() && selectedVariant() ? selectedVariant() : 'state'\"\n (cardSelected)=\"handleSelect()\"\n>\n <ui-checkbox class=\"selectable-card-checkbox\" [checked]=\"isSelected()\" [disabled]=\"isCheckboxDisabled()\">\n <div checkbox-label>\n <ng-content select=\"[ui-selectable-card-label]\"></ng-content>\n </div>\n </ui-checkbox>\n <ng-content select=\"[ui-selectable-card-content]\"></ng-content>\n</ui-card>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-card","ui-checkbox"],"suggestedQueries":[]},"filePath":"components/selectable-card/selectable-card.component.ts","supportsTheme":false,"lastModified":1775743558165.837},"side-panel":{"name":"SidePanelComponent","selector":"ui-side-panel","category":"side-panel","description":"To use the Side Panel component, you need to inject the `SidePanelService` in your component:","importPath":"@testgorilla/tgo-ui/components/side-panel","moduleName":"SidePanelComponentModule","standalone":true,"changeDetection":"OnPush","inputs":[],"outputs":[],"module":{"name":"","imports":[],"exports":[],"declarations":[],"providers":[]},"types":{"typeAliases":[{"name":"SidePanelPosition","value":"'left' \| 'right'"},{"name":"SidePanelSize","value":"'small' \| 'large'"}],"interfaces":[],"enums":[{"name":"SidePanelAnimationState","members":[{"name":"Open","value":"'open'"},{"name":"Closed","value":"'closed'"},{"name":"ClosedRight","value":"'closedRight'"},{"name":"ClosedLeft","value":"'closedLeft'"}]}]},"examples":[],"documentation":"## How to use\n\nTo use the Side Panel component, you need to inject the `SidePanelService` in your component:\n\n```typescript\nimport { SidePanelService } from '@testgorilla/tgo-ui';\n\n@Component({\n selector: 'your-component',\n // ... other component metadata\n})\nexport class YourComponent {\n constructor(private sidePanelService: SidePanelService) {}\n\n // ...\n}\n```\n\nThe Side Panel component is used to display content in a panel that slides in from the side of the screen. You can control which side it appears from, whether it shows a header, back button, close button and set a title for the panel.\n\n### Opening a Side Panel\n\nTo open a side panel, use the `open` method of the `SidePanelService`:\n\n```typescript\nopenPanel(): void {\n this.sidePanelService.open(YourContentComponent, {\n position: 'right', // or 'left'\n showBackButton: true,\n title: 'Panel Title',\n showCloseButton: true,\n showHeader: true,\n data: { key: 'value' }, // Optional data to pass to the component\n });\n}\n```\n\nThe first parameter is the component that you want to display inside the side panel. The second parameter is a configuration object with the following properties:\n\n- `position`: Either 'left' or 'right', determining which side the panel slides in from\n- `showHeader`: Whether to show the header of the panel (defaults to true)\n- `showBackButton`: Whether to show a back button in the panel header\n- `title`: The title to display in the panel header\n- `showCloseButton`: Whether to show a close button in the panel header (defaults to true)\n- `data`: Optional data to pass to the component displayed in the side panel\n\n### Creating a Content Component\n\nYour content component will be displayed inside the side panel. To close the panel from within your content component, you can inject the `SidePanelComponent` and call its `close` method:\n\n```typescript\nimport { SidePanelComponent } from '@testgorilla/tgo-ui';\n\n@Component({\n // ... component metadata\n})\nexport class YourContentComponent {\n constructor(private sidePanelComponent: SidePanelComponent) {}\n\n closePanel(): void {\n this.sidePanelComponent.close();\n }\n}\n```\n\n### Accessing Data in the Content Component\n\nIf you pass data to the side panel through the `data` property in the configuration, you can access it in your content component using the `SIDE_PANEL_DATA` injection token:\n\n```typescript\nimport { Component, inject } from '@angular/core';\nimport { SidePanelComponent, SIDE_PANEL_DATA } from '@testgorilla/tgo-ui';\n\n@Component({\n selector: 'app-content',\n template: `\n <div>\n <h2>Data from parent:</h2>\n <pre>{{ data \| json }}</pre>\n <button (click)=\"close()\">Close Panel</button>\n </div>\n `,\n})\nexport class ContentComponent {\n private sidePanelComponent = inject(SidePanelComponent);\n\n // Access the data passed to the side panel\n data = inject(SIDE_PANEL_DATA);\n\n close(): void {\n this.sidePanelComponent.close();\n }\n}\n```\n\n### Examples\n\n#### Basic Usage\n\n```typescript\nimport { Component, inject } from '@angular/core';\nimport { SidePanelService } from '@testgorilla/tgo-ui';\n\n@Component({\n selector: 'app-demo',\n template: ` <button (click)=\"openSidePanel()\">Open Side Panel</button> `,\n})\nexport class DemoComponent {\n private sidePanelService = inject(SidePanelService);\n\n openSidePanel(): void {\n this.sidePanelService.open(ContentComponent, {\n position: 'right',\n showBackButton: false,\n title: 'Information Panel',\n });\n }\n}\n\n@Component({\n template: `\n <div style=\"padding: 16px;\">\n <h2>Panel Content</h2>\n <p>This is the content of the side panel.</p>\n <button (click)=\"close()\">Close</button>\n </div>\n `,\n standalone: true,\n})\nexport class ContentComponent {\n private sidePanelComponent = inject(SidePanelComponent);\n\n close(): void {\n this.sidePanelComponent.close();\n }\n}\n```\n\n#### With Back Button\n\n```typescript\nthis.sidePanelService.open(ContentComponent, {\n position: 'right',\n showBackButton: true,\n title: 'Panel with Back Button',\n});\n```\n\n#### Left-positioned Panel\n\n```typescript\nthis.sidePanelService.open(ContentComponent, {\n position: 'left',\n showBackButton: false,\n title: 'Left Side Panel',\n});\n```\n\n#### With Data Passed to Component\n\n```typescript\nthis.sidePanelService.open(ContentComponent, {\n position: 'right',\n showBackButton: false,\n title: 'Panel with Data',\n data: {\n userId: 123,\n userName: 'John Doe',\n items: [1, 2, 3],\n },\n});\n```\n\n#### Without Header\n\n```typescript\nthis.sidePanelService.open(ContentComponent, {\n position: 'right',\n showHeader: false,\n});\n```\n\n#### With Header but No Close Button\n\n```typescript\nthis.sidePanelService.open(ContentComponent, {\n position: 'right',\n title: 'Panel Title',\n showCloseButton: false,\n});\n```\n","template":"<div\n class=\"side-panel-backdrop\"\n #sidePanelBackdrop\n tabindex=\"0\"\n (click)=\"close()\"\n (keydown.enter)=\"close()\"\n [@fadeInOut]=\"isOpen() ? 'open' : 'closed'\"\n></div>\n<div\n class=\"side-panel\"\n [class]=\"sidePanelConfig.panelClass\"\n [class.side-panel-small]=\"isSmall()\"\n [class.side-panel-large]=\"isLarge()\"\n #sidePanel\n [@slideInOut]=\"animation()\"\n>\n @if (sidePanelConfig.showHeader) {\n <div class=\"side-panel-header\">\n <div class=\"side-panel-title-container\">\n @if (sidePanelConfig.showBackButton) {\n <ui-button\n class=\"side-panel-action\"\n [variant]=\"'icon-button'\"\n [iconName]=\"'Arrow-chevron-left-filled'\"\n (click)=\"close()\"\n [tooltip]=\"('COMMON.BACK' \| uiTranslate \| async)!\"\n size=\"medium\"\n ></ui-button>\n }\n <span class=\"side-panel-title h3 bold\">{{ sidePanelConfig.title }}</span>\n </div>\n @if (sidePanelConfig.showCloseButton) {\n <ui-button\n class=\"side-panel-action side-panel-action-close\"\n [variant]=\"'icon-button'\"\n [iconName]=\"'Close'\"\n [tooltip]=\"('COMMON.CLOSE' \| uiTranslate \| async)!\"\n (click)=\"close()\"\n size=\"medium\"\n ></ui-button>\n }\n </div>\n }\n\n <div class=\"side-panel-content\">\n <ng-container #sidePanelContainer></ng-container>\n </div>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-button"],"suggestedQueries":[]},"filePath":"components/side-panel/side-panel.component.ts","supportsTheme":false,"lastModified":1775743558166.837},"side-sheet":{"name":"SideSheetComponent","selector":"ui-side-sheet","category":"side-sheet","description":"SideSheetComponent component","importPath":"@testgorilla/tgo-ui/components/side-sheet","moduleName":"SideSheetComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"position","type":"SideSheetPosition","defaultValue":"'end'","required":false,"alias":null,"transform":null,"description":"Set position. Defaults \"end\"","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false}],"outputs":[{"name":"openChange","eventType":"boolean","alias":null,"description":"","isSignal":false}],"module":{"name":"SideSheetComponentModule","imports":["CommonModule","IconComponentModule","ButtonComponentModule","MatTooltipModule","MatSidenavModule","UiTranslatePipe","LogoComponentModule"],"exports":["SideSheetComponent"],"declarations":["SideSheetComponent"],"providers":[]},"types":{"typeAliases":[{"name":"SideSheetPosition","value":"'start' \| 'end'"}],"interfaces":[{"name":"SideSheetConfig","properties":[{"name":"componentRef","type":"any","optional":false},{"name":"title","type":"string","optional":true},{"name":"showLogo","type":"boolean","optional":true},{"name":"showBackButton","type":"boolean","optional":true},{"name":"showTitleTooltip","type":"boolean","optional":true},{"name":"closed","type":"Observable<void>","optional":true}]}],"enums":[]},"examples":[],"documentation":"","template":"<ng-container>\n <mat-drawer-container class=\"side-sheet-container\" [attr.theme]=\"applicationTheme\" [hasBackdrop]=\"true\">\n <mat-drawer\n (closedStart)=\"onOpenChange(false)\"\n (openedStart)=\"onOpenChange(true)\"\n #drawer\n [mode]=\"'over'\"\n [autoFocus]=\"false\"\n class=\"side-sheet-content\"\n [position]=\"position\"\n >\n <div class=\"header\">\n <div class=\"title\">\n <ui-button\n ngIf=\"showBackButton\"\n [variant]=\"'icon-button'\"\n [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-filled'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"('COMMON.BACK' \| uiTranslate \| async)!\"\n (click)=\"onClose()\"\n ></ui-button>\n <span ngIf=\"title\" [matTooltip]=\"showTitleTooltip ? title : ''\" [matTooltipClass]=\"applicationTheme\">{{\n title\n }}</span>\n <ui-logo ngIf=\"showLogo\"></ui-logo>\n </div>\n <ui-button\n [variant]=\"'icon-button'\"\n [iconName]=\"'Close'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"('COMMON.CLOSE' \| uiTranslate \| async)!\"\n (click)=\"onClose()\"\n ></ui-button>\n </div>\n <ng-container #container></ng-container>\n </mat-drawer>\n <mat-drawer-content>\n <ng-content></ng-content>\n </mat-drawer-content>\n </mat-drawer-container>\n</ng-container>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":["mat-drawer-container","mat-drawer","mat-drawer-content"],"childUIComponents":["ui-button","ui-logo"],"suggestedQueries":[]},"filePath":"components/side-sheet/side-sheet.component.ts","supportsTheme":true,"lastModified":1775743558166.837},"skeleton":{"name":"SkeletonComponent","selector":"ui-skeleton","category":"skeleton","description":"To use the Skeleton component, you need to import the `SkeletonComponent` in your module:","importPath":"@testgorilla/tgo-ui/components/skeleton","moduleName":"SkeletonComponentModule","standalone":true,"changeDetection":"Default","inputs":[{"name":"count","type":"number \| string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"isAiTheme","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"theme","type":"NgxSkeletonLoaderConfigTheme","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"appearance","type":"Appearance","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":false}],"outputs":[],"module":{"name":"","imports":[],"exports":[],"declarations":[],"providers":[]},"types":{"typeAliases":[{"name":"Appearance","value":"NgxSkeletonLoaderConfig['appearance']"}],"interfaces":[],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Skeleton component, you need to import the `SkeletonComponent` in your module:\n\n```typescript\nimport { SkeletonComponent } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n SkeletonComponent\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-skeleton \n [count]=\"3\"\n [appearance]=\"'line'\"\n [theme]=\"{ height: '24px' }\"\n applicationTheme=\"light\">\n</ui-skeleton>\n```\n\nThe component creates placeholder loading animations and supports various shapes and sizes.","template":"<ngx-skeleton-loader\n [class.skeleton-ai]=\"isAiTheme\"\n [count]=\"count\"\n [theme]=\"currentTheme$ \| async\"\n [appearance]=\"(appearance$ \| async) \|\| 'line'\"\n></ngx-skeleton-loader>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":[],"suggestedQueries":[]},"filePath":"components/skeleton/skeleton.component.ts","supportsTheme":true,"lastModified":1775743558167.837},"slider":{"name":"SliderComponent","selector":"ui-slider","category":"slider","description":"To use the Slider component, you need to import the `SliderComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/slider","moduleName":"SliderComponentModule","standalone":true,"changeDetection":"OnPush","inputs":[{"name":"max","type":"number","defaultValue":"100","required":false,"alias":null,"transform":null,"description":"The maximum value of the slider.","isSignal":false},{"name":"min","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"The minimum value of the slider.","isSignal":false},{"name":"percentage","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"A flag indicating whether the slider displays values as percentages.","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"A flag indicating whether the slider is disabled.","isSignal":false},{"name":"sliderStart","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"The starting value of the slider.","isSignal":false},{"name":"sliderEnd","type":"number","defaultValue":"100","required":false,"alias":null,"transform":null,"description":"The ending value of the slider.","isSignal":false},{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"The label for the slider.","isSignal":false},{"name":"showInputs","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Show slider inputs.","isSignal":false},{"name":"step","type":"number","defaultValue":"1","required":false,"alias":null,"transform":null,"description":"Step number.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"variant","type":"SliderVariant","defaultValue":"'range'","required":false,"alias":null,"transform":null,"description":"Defines the variant slider","isSignal":false},{"name":"useDecimal","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Controls whether decimal values are allowed in the input fields.\nWhen true, inputs accept decimal numbers (up to 2 decimal places).\nWhen false, inputs only accept whole numbers.","isSignal":true},{"name":"useThousandsSeparator","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Controls whether numbers are displayed with thousands separators.\nWhen true, displays numbers like \"100,000\" instead of \"100000\".\nThis is independent of useDecimal - you can have thousands separators\nwithout decimals, or decimals without thousands separators.","isSignal":true},{"name":"minLabel","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"maxLabel","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"inputWidth","type":"number","defaultValue":"80","required":false,"alias":null,"transform":null,"description":"","isSignal":true}],"outputs":[{"name":"sliderValueChange","eventType":"SliderValue","alias":null,"description":"","isSignal":false}],"module":{"name":"SliderComponentModule","imports":["SliderComponent"],"exports":["SliderComponent"],"declarations":[],"providers":[]},"types":{"typeAliases":[{"name":"SliderVariant","value":"'basic' \| 'range'"}],"interfaces":[{"name":"SliderValue","properties":[{"name":"start","type":"number","optional":false},{"name":"end","type":"number","optional":false}]}],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Slider component, you need to import the `SliderComponentModule` in your module:\n\n```typescript\nimport { SliderComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n SliderComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-slider\n [min]=\"0\"\n [max]=\"100\"\n [sliderStart]=\"25\"\n [sliderEnd]=\"75\"\n applicationTheme=\"light\"\n (valueChange)=\"onValueChange($event)\">\n</ui-slider>\n```\n\nThe slider supports single value or range selection, custom steps, decimal values, and percentage display.","template":"<ng-container>\n <div\n class=\"slider-container\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\n >\n @if (label) {\n <div class=\"slider-label\">{{ label }}</div>\n }\n\n <div class=\"slider\">\n @if (!isBasicSlider) {\n <div class=\"min-value\">\n <span>\n @if (useThousandsSeparator()) {\n {{ min \| number }}\n } @else {\n {{ min }}\n }\n @if (percentage) {\n %\n }\n </span>\n </div>\n }\n <mat-slider\n [disableRipple]=\"applicationTheme !== 'classic'\"\n #sliderElement\n discrete\n [disabled]=\"disabled\"\n [max]=\"max\"\n [min]=\"min\"\n [step]=\"step\"\n (mouseenter)=\"sliderElement.discrete = true\"\n (mouseleave)=\"sliderElement.discrete = false\"\n [displayWith]=\"formatLabel\"\n >\n @if (isBasicSlider) {\n <input [disabled]=\"disabled\" (valueChange)=\"onValueChange($event)\" [(ngModel)]=\"sliderStart\" matSliderThumb />\n } @else {\n <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderStart\" matSliderStartThumb />\n <input [disabled]=\"disabled\" (valueChange)=\"onValueChange()\" [(ngModel)]=\"sliderEnd\" matSliderEndThumb />\n }\n </mat-slider>\n @if (!isBasicSlider) {\n <div class=\"max-value\">\n <span>\n @if (useThousandsSeparator()) {\n {{ max \| number }}\n } @else {\n {{ max }}\n }\n @if (percentage) {\n %\n }\n </span>\n </div>\n }\n </div>\n\n @if (showInputs && !isBasicSlider) {\n <div class=\"slider-input\">\n <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n @if (minLabel()) {\n <mat-label>\n {{ minLabel() }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n } @else {\n <mat-label>\n {{ 'COMMON.MIN' \| uiTranslate \| async }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n }\n @if (useDecimal()) {\n <input\n matInput\n [type]=\"'text'\"\n [(ngModel)]=\"sliderStart\"\n [disabled]=\"disabled\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('start')\"\n (keydown.enter)=\"onInputBlur('start')\"\n mask=\"separator.2\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n />\n } @else {\n <input\n matInput\n [type]=\"'text'\"\n [(ngModel)]=\"sliderStart\"\n [disabled]=\"disabled\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('start')\"\n (keydown.enter)=\"onInputBlur('start')\"\n mask=\"separator.0\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n />\n }\n </mat-form-field>\n <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n @if (maxLabel()) {\n <mat-label>\n {{ maxLabel() }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n } @else {\n <mat-label>\n {{ 'COMMON.MAX' \| uiTranslate \| async }}\n @if (percentage) {\n <span>%</span>\n }\n </mat-label>\n }\n @if (useDecimal()) {\n <input\n matInput\n [disabled]=\"disabled\"\n [type]=\"'text'\"\n [(ngModel)]=\"sliderEnd\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('end')\"\n (keydown.enter)=\"onInputBlur('end')\"\n data-testid=\"slider.input-end\"\n mask=\"separator.2\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n />\n } @else {\n <input\n matInput\n [disabled]=\"disabled\"\n [type]=\"'text'\"\n [(ngModel)]=\"sliderEnd\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur('end')\"\n (keydown.enter)=\"onInputBlur('end')\"\n mask=\"separator.0\"\n [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n data-testid=\"slider.input-end\"\n />\n }\n </mat-form-field>\n </div>\n }\n\n @if (hasError && touchedControlName) {\n <mat-error class=\"slider-errors\">\n @if (touchedControlName === 'start' && sliderStart > sliderEnd) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{\n translationContext + 'MIN_MORE_THAN_MAX' \| uiTranslate: { min: sliderStart, max: sliderEnd } \| async\n }}</span>\n </div>\n }\n @if (touchedControlName === 'end' && sliderStart > sliderEnd) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{\n translationContext + 'MAX_LESS_THAN_MIN' \| uiTranslate: { min: sliderStart, max: sliderEnd } \| async\n }}</span>\n </div>\n }\n @if (sliderStart < min) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ 'COMMON.MIN' \| uiTranslate \| async }} {{ min }}</span>\n </div>\n }\n @if (sliderEnd > max) {\n <div class=\"validation-error\">\n <ui-icon [name]=\"'Info'\"></ui-icon>\n <span>{{ 'COMMON.MAX' \| uiTranslate \| async }} {{ max }}</span>\n </div>\n }\n </mat-error>\n }\n </div>\n</ng-container>\n","queryGuide":{"roles":["slider"],"ariaAttributes":[],"dataTestIds":["slider.input-end"],"materialComponents":["mat-slider","mat-form-field","mat-label","mat-error"],"childUIComponents":["ui-icon"],"suggestedQueries":["screen.getByRole('slider')","screen.getByTestId('slider.input-end')"]},"filePath":"components/slider/slider.component.ts","supportsTheme":true,"lastModified":1775743558167.837},"snackbar":{"name":"SnackbarComponent","selector":"ui-snackbar","category":"bars","description":"To use the Snackbar component, you need to import the `SnackbarComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/snackbar","moduleName":"SnackbarComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"snackbarType","type":"SnackbarType","defaultValue":"'success'","required":false,"alias":null,"transform":null,"description":"Background color of the button while in active state","isSignal":false},{"name":"message","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Snackbar message","isSignal":false},{"name":"seconds","type":"number","defaultValue":"5","required":false,"alias":null,"transform":null,"description":"Set the time that the snackbar will be visible","isSignal":false},{"name":"includeDismissButton","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Include dismmiss button","isSignal":false},{"name":"fixed","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Static or fixed position","isSignal":false},{"name":"linkText","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Link text that will appended at the end of message","isSignal":false},{"name":"linkUrl","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Link url","isSignal":false},{"name":"linkTarget","type":"LinkTargetType","defaultValue":"'_blank'","required":false,"alias":null,"transform":null,"description":"Link target","isSignal":false},{"name":"variant","type":"SnackbarVariant","defaultValue":"'desktop'","required":false,"alias":null,"transform":null,"description":"The variant to be used","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"closeButtonTooltip","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Close button tooltip","isSignal":false},{"name":"ariaDescribedby","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"html","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Snackbar message from html","isSignal":false}],"outputs":[],"module":{"name":"SnackbarComponentModule","imports":["CommonModule","ButtonComponentModule","IconComponentModule","UiTranslatePipe","MatSnackBarModule","MatTooltipModule"],"exports":["SnackbarComponent"],"declarations":["SnackbarComponent"],"providers":["SnackbarService"]},"types":{"typeAliases":[{"name":"SnackbarType","value":"'success' \| 'error' \| 'info' \| 'warning'"},{"name":"SnackbarVariant","value":"'desktop' \| 'mobile'"}],"interfaces":[{"name":"SnackbarLink","properties":[{"name":"text","type":"string","optional":false},{"name":"url","type":"string","optional":false},{"name":"action","type":"() => void \| null","optional":false}]}],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Snackbar component, you need to import the `SnackbarComponentModule` in your module:\n\n```typescript\nimport { SnackbarComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n SnackbarComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThe Snackbar is usually used via the service:\n\n```typescript\nimport { SnackbarService } from '@testgorilla/tgo-ui';\n\n// In your component\nconstructor(private snackbarService: SnackbarService) {}\n\nshowSuccessMessage() {\n this.snackbarService.show({\n message: 'Success message',\n snackbarType: 'success',\n seconds: 5\n });\n}\n```\n\nYou can also use the component directly in your templates:\n\n```html\n<ui-snackbar\n message=\"This is a snackbar message\"\n snackbarType=\"info\"\n [seconds]=\"10\"\n [includeDismissButton]=\"true\"\n applicationTheme=\"light\">\n</ui-snackbar>\n```\n\nThe snackbar component is used to display brief messages to users.","template":"<ng-container>\n <div\n [ngClass]=\"snackbarType + ' ' + position\"\n [@openClose]\n ngIf=\"visible\"\n class=\"snackbar-container\"\n [attr.theme]=\"applicationTheme\"\n [class.mobile]=\"variant === 'mobile'\"\n [class.desktop]=\"variant === 'desktop'\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n data-testid=\"snackbar-wrapper\"\n [attr.data-test-snackbar-type]=\"snackbarType\"\n [attr.aria-describedby]=\"'describedby'\"\n role=\"alert\"\n [attr.aria-labelledby]=\"'labelledby'\"\n >\n <span style=\"position: absolute; left: -9999px\" id=\"labelledby\">{{\n 'ALERT_BANNER.' + (snackbarType \| uppercase) \| uiTranslate \| async\n }}</span>\n <span style=\"position: absolute; left: -9999px\"\n >{{ message }}\n <a ngIf=\"!!linkText\" [target]=\"linkTarget\" [href]=\"linkUrl\" (click)=\"onLinkClick($event)\">{{ linkText }}</a>\n </span>\n <span [style.display]=\"'none'\" id=\"describedby\">{{ ariaDescribedby }}</span>\n <div\n aria-hidden=\"true\"\n class=\"snackbar-text\"\n [matTooltip]=\"message.length > maxCharacters ? message : ''\"\n data-testid=\"snackbar-content\"\n >\n <ui-icon ngIf=\"applicationTheme === 'classic'\" [name]=\"iconName\" size=\"24\"></ui-icon>\n {{ message.length > maxCharacters ? (message \| slice: 0 : maxCharacters) + '..' : message }}\n <div ngIf=\"safeHtml\" [innerHTML]=\"safeHtml\"></div>\n <a ngIf=\"!!linkText\" [target]=\"linkTarget\" [href]=\"linkUrl\" (click)=\"onLinkClick($event)\">{{ linkText }}</a>\n </div>\n <ui-button\n ngIf=\"includeDismissButton && applicationTheme === 'classic'\"\n variant=\"text\"\n [label]=\"(translationContext + 'DISMISS' \| uiTranslate \| async)!\"\n [applicationTheme]=\"applicationTheme !== 'classic' ? 'light' : 'classic'\"\n (buttonClickEvent)=\"dismissClick()\"\n data-testid=\"snackbar-dismiss-button\"\n ></ui-button>\n <ui-button\n ngIf=\"includeDismissButton && applicationTheme !== 'classic'\"\n [variant]=\"'icon-button'\"\n [applicationTheme]=\"'light'\"\n [iconName]=\"'Close-in-line'\"\n [size]=\"'small'\"\n [tooltip]=\"(closeButtonTooltip \|\| ('COMMON.CLOSE' \| uiTranslate \| async))!\"\n (click)=\"dismissClick()\"\n data-testid=\"snackbar-dismiss-button\"\n ></ui-button>\n </div>\n</ng-container>\n","queryGuide":{"roles":["alert"],"ariaAttributes":["aria-hidden","aria-describedby","aria-labelledby"],"dataTestIds":["snackbar-wrapper","snackbar-content","snackbar-dismiss-button"],"materialComponents":[],"childUIComponents":["ui-icon","ui-button"],"suggestedQueries":["screen.getByRole('alert')","screen.getByTestId('snackbar-wrapper')","screen.getByTestId('snackbar-content')","screen.getByTestId('snackbar-dismiss-button')"]},"filePath":"components/snackbar/snackbar.component.ts","supportsTheme":true,"lastModified":1775743558168.837},"spider-chart":{"name":"SpiderChartComponent","selector":"ui-spider-chart","category":"charts","description":"SpiderChartComponent component","importPath":"@testgorilla/tgo-ui/components/spider-chart","moduleName":"SpiderChartComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"size","type":"SpiderChartSize","defaultValue":"'large'","required":false,"alias":null,"transform":null,"description":"The size of the spider chart.","isSignal":false},{"name":"spiderChartData","type":"SpiderChartData","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"The data to be used for the spider chart.","isSignal":false},{"name":"stepSize","type":"number","defaultValue":"20","required":false,"alias":null,"transform":null,"description":"The step size for the spider chart.","isSignal":false},{"name":"ariaLabel","type":"unknown","defaultValue":"'Radar chart. Press tab to navigate through the chart.'","required":false,"alias":null,"transform":null,"description":"The aria label for the spider chart.","isSignal":false},{"name":"loading","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether the spider chart is loading.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false}],"outputs":[],"module":{"name":"SpiderChartComponentModule","imports":["NgClass","UiTranslatePipe","NgChartsModule","MatTooltipModule","UiTranslatePipe","MemoizeFuncPipe","SpinnerComponentModule","CommonModule"],"exports":["SpiderChartComponent"],"declarations":["SpiderChartComponent"],"providers":[]},"types":{"typeAliases":[{"name":"SpiderChartSize","value":"'large' \| 'small'"},{"name":"SpiderChartData","value":"{\n labels: string[];\n labelDescription: string[];\n plotData: [PlotData, PlotData] \| [PlotData]; // Current implementation supports max 2 datasets.\n}"},{"name":"PlotData","value":"{\n databaseLabel: string;\n data: number[];\n}"}],"interfaces":[],"enums":[]},"examples":[],"documentation":"","template":"<div class=\"spider-chart-container\" tabindex=\"0\" [attr.aria-label]=\"ariaLabel\">\n <div\n class=\"spacing-container\"\n [ngClass]=\"{ 'small-spacing': radarChartData.labels && radarChartData.labels.length % 2 === 1 && !loading }\"\n >\n <div\n class=\"chart-container\"\n [style.width]=\"size === 'large' ? '280px' : '200px'\"\n [style.height]=\"size === 'large' ? '280px' : '200px'\"\n >\n @if (!loading) {\n <canvas baseChart [data]=\"radarChartData\" [options]=\"radarChartOptions\" type=\"radar\" class=\"chart\"> </canvas>\n } @else {\n <canvas baseChart [data]=\"loadingChartData\" [options]=\"loadingChartOptions\" type=\"radar\" class=\"chart\">\n </canvas>\n <ui-spinner></ui-spinner>\n }\n\n @if (labelPositionsVisible) {\n <div class=\"overlay-container\">\n @for (label of spiderChartData.labels; track label) {\n <div\n class=\"label-container\"\n #labelContainer\n [matTooltip]=\"spiderChartData.labelDescription[$index]\"\n [tabindex]=\"$index === 0 ? '0' : '-1'\"\n (keydown)=\"onLabelKeyDown($event, $index)\"\n [attr.aria-label]=\"spiderChartData.labelDescription[$index]\"\n [style.left]=\"getCenteredLabelLeftPosition(label, labelContainer.offsetWidth)\"\n [style.bottom]=\"getCenteredLabelBottomPosition(label, labelContainer.offsetHeight)\"\n >\n @if (!(label.length > 20 && size === 'large' && spiderChartData.labels.length < 9)) {\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n {{ label }}\n </div>\n } @else {\n <div>\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n {{ label \| memoizeFunc: getFirstLine }}\n </div>\n <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n {{ label \| memoizeFunc: getSecondLine : this }}\n </div>\n </div>\n }\n <span class=\"value\">{{ spiderChartData.plotData[0].data[$index] }}</span>\n </div>\n <span\n class=\"fake-data-points\"\n #fakeDataPoints\n [tabindex]=\"focusedLabelIndex === $index ? '0' : '-1'\"\n (focus)=\"$index === focusedLabelIndex ? showTooltipForDataPoint($index) : null\"\n (keydown)=\"onFakeDataPointsKeyDown($event, $index)\"\n >\n </span>\n @if (radarChartData.datasets.length > 1) {\n <span\n class=\"fake-data-points-secondary\"\n #fakeDataPointsSecondary\n [tabindex]=\"focusedFakeDataPointIndex === $index ? '0' : '-1'\"\n (focus)=\"$index === focusedFakeDataPointIndex ? showTooltipForDataPoint($index, true) : null\"\n (keydown)=\"onFakeDataPointsKeyDown($event, $index, true)\"\n >\n </span>\n }\n }\n </div>\n }\n </div>\n </div>\n @if (radarChartData.datasets.length > 0) {\n <div class=\"legend-container\">\n @for (dataset of radarChartData.datasets; track dataset.label) {\n <div\n class=\"legend-item\"\n (click)=\"toggleDatasetVisibility($index)\"\n [tabindex]=\"$index === 0 ? '0' : '-1'\"\n role=\"button\"\n [attr.aria-pressed]=\"isDatasetVisible($index) ? false : true\"\n [attr.aria-label]=\"\n isDatasetVisible($index)\n ? (translationContext + 'DATASET_VISIBLE' \| uiTranslate: { dataset: dataset.label } \| async)\n : (translationContext + 'DATASET_HIDDEN' \| uiTranslate: { dataset: dataset.label } \| async)\n \"\n (keydown)=\"onLegendItemKeyDown($event, $index)\"\n #legendItem\n >\n <span class=\"legend-line\" [ngClass]=\"{ 'solid-line': $index === 0, 'dashed-line': $index === 1 }\"></span>\n <span class=\"legend-label\" [style.text-decoration]=\"isDatasetVisible($index) ? 'none' : 'line-through'\">\n {{ dataset.label }}\n </span>\n </div>\n }\n </div>\n }\n</div>\n","queryGuide":{"roles":["button"],"ariaAttributes":["aria-label","aria-pressed"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-spinner"],"suggestedQueries":["screen.getByRole('button')","screen.getByLabelText('label text')"]},"filePath":"components/spider-chart/spider-chart.component.ts","supportsTheme":true,"lastModified":1775743558168.837},"spinner":{"name":"SpinnerComponent","selector":"ui-spinner","category":"spinner","description":"To use the Spinner component, you need to import the `SpinnerComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/spinner","moduleName":"SpinnerComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"size","type":"SpinnerSize","defaultValue":"'large'","required":false,"alias":null,"transform":null,"description":"The size variant of the spinner. Can be 'small' or 'large'.\nDefaults to 'large'.","isSignal":false},{"name":"isLoader","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"Set position fixed on page\nDefaults to 'true'.","isSignal":false},{"name":"text","type":"string \| null","defaultValue":"null","required":false,"alias":null,"transform":null,"description":"The text to display below the spinner.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"iconName","type":"IconName","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Custom Icon name","isSignal":false},{"name":"iconSize","type":"IconSize","defaultValue":"'24'","required":false,"alias":null,"transform":null,"description":"Custom Icon size","isSignal":false}],"outputs":[],"module":{"name":"SpinnerComponentModule","imports":["NgClass","NgIf","UiTranslatePipe","AsyncPipe","IconComponentModule"],"exports":["SpinnerComponent"],"declarations":["SpinnerComponent"],"providers":[]},"types":{"typeAliases":[{"name":"SpinnerSize","value":"'large' \| 'small'"}],"interfaces":[],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Spinner component, you need to import the `SpinnerComponentModule` in your module:\n\n```typescript\nimport { SpinnerComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n SpinnerComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-spinner \n size=\"medium\"\n [text]=\"'Loading...'\" \n [isLoader]=\"true\"\n applicationTheme=\"light\">\n</ui-spinner>\n```\n\nThe spinner can be used to indicate loading states throughout the application.","template":"<div\n class=\"spinner-container\"\n [ngClass]=\"classes\"\n [attr.theme]=\"applicationTheme\"\n [attr.aria-label]=\"'COMMON.LOADING' \| uiTranslate \| async\"\n role=\"alert\"\n>\n @if (!iconName) {\n <svg class=\"spinner\" viewBox=\"0 0 50 50\">\n <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\"></circle>\n </svg>\n } @else {\n <ui-icon [name]=\"iconName\" [size]=\"iconSize\"></ui-icon>\n }\n\n @if (text) {\n <h3 class=\"spinner-text\">{{ text }}</h3>\n }\n</div>\n","queryGuide":{"roles":["alert"],"ariaAttributes":["aria-label"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon"],"suggestedQueries":["screen.getByRole('alert')","screen.getByLabelText('label text')"]},"filePath":"components/spinner/spinner.component.ts","supportsTheme":true,"lastModified":1775743558169.837},"stepper":{"name":"StepperComponent","selector":"ui-stepper","category":"stepper","description":"To use the Stepper component, you need to import the `StepperComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/stepper","moduleName":"StepperComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"lastStepFinalIcon","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Input property indicating whether the final icon should be displayed.\nDefault value is false.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"ariaLabel","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"A string representing the ARIA label for accessibility.\nThis label is used to provide an accessible name for the input element.","isSignal":false},{"name":"position","type":"StepperPosition","defaultValue":"'horizontal'","required":false,"alias":null,"transform":null,"description":"Defines the stepper position","isSignal":false},{"name":"ariaRequired","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"stepperVariant","type":"StepperVariation","defaultValue":"'primary'","required":false,"alias":null,"transform":null,"description":"A string representing the stepper variant.\nThis attribute is used to indicate the variant that should be used.","isSignal":false},{"name":"setFirstStepAutoSelect","type":"boolean","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Auto selects first step as visited\nDefaults to true","isSignal":false},{"name":"steps","type":"Step[]","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input property to set the steps for the stepper.\nThe first step will be marked as visited automatically.","isSignal":false},{"name":"setSelectedIndex","type":"number","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input property to set the selected index of the stepper.\nDefault value is 0.","isSignal":false}],"outputs":[{"name":"selectionChange","eventType":"{ selectedIndex: number; previousIndex: number; step: Step }","alias":null,"description":"","isSignal":false}],"module":{"name":"StepperComponentModule","imports":["CommonModule","IconComponentModule","StepComponentModule","MatProgressSpinnerModule","RadialProgressComponentModule","UiTranslatePipe","MatInputModule"],"exports":["StepperComponent"],"declarations":["StepperComponent","StepLineElementDirective"],"providers":[]},"types":{"typeAliases":[{"name":"StepperPosition","value":"'horizontal' \| 'vertical'"},{"name":"StepperVariation","value":"'primary' \| 'secondary'"}],"interfaces":[{"name":"Step","properties":[{"name":"label","type":"string","optional":false},{"name":"isVisited","type":"boolean","optional":true},{"name":"iconName","type":"IconName","optional":true},{"name":"disabled","type":"boolean","optional":true},{"name":"submitted","type":"boolean","optional":true},{"name":"showIconWhenSelected","type":"boolean","optional":true},{"name":"htmlDescription","type":"HtmlDescription[]","optional":true},{"name":"boldLabel","type":"boolean","optional":true},{"name":"descriptionTpl","type":"TemplateRef<any>","optional":true},{"name":"labelTooltip","type":"string","optional":true},{"name":"alwaysShowIcon","type":"boolean","optional":true},{"name":"context","type":"any","optional":true}]},{"name":"HtmlDescription","properties":[{"name":"text","type":"string","optional":true},{"name":"iconName","type":"IconName","optional":true},{"name":"iconTooltip","type":"string","optional":true}]}],"enums":[]},"examples":[],"documentation":"## How to use\n\nTo use the Stepper component, you need to import the `StepperComponentModule` in your module:\n\n```typescript\nimport { StepperComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n StepperComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-stepper\n [steps]=\"[\n { label: 'Step 1', iconName: 'Team' },\n { label: 'Step 2', iconName: 'Test' },\n { label: 'Step 3', iconName: 'Delete' }\n ]\"\n position=\"horizontal\"\n [lastStepFinalIcon]=\"true\"\n applicationTheme=\"light\"\n (stepChange)=\"onStepChange($event)\">\n</ui-stepper>\n```\n\nThe stepper component helps users navigate through a multi-step process and shows their progress.","template":"<ng-container>\n <div style=\"position: absolute; left: -99999px\" [attr.aria-live]=\"'polite'\">\n <span>\n {{ itemSteps[selectedIndex]?.label ?? '' }}\n {{\n translationContext + 'SELECTED_OF'\n \| uiTranslate: { selected: (selectedIndex ?? 0) + 1, total: itemSteps?.length ?? 0 }\n \| async\n }}\n {{\n itemSteps[selectedIndex]?.isVisited &&\n itemSteps.length <= (selectedIndex ?? 0) + 1 &&\n itemSteps[selectedIndex + 1]?.isVisited\n ? (translationContext + 'COMPLETED' \| uiTranslate \| async)\n : (translationContext + 'INCOMPLETE' \| uiTranslate \| async)\n }}\n </span>\n </div>\n\n <div\n ngIf=\"(position === 'horizontal' && (isMobile$ \| async) === false) \|\| position === 'vertical'; else mobile\"\n class=\"stepper-wrapper\"\n role=\"tablist\"\n [ngClass]=\"[position, stepperVariant === 'secondary' ? 'secondary-variant' : '']\"\n [attr.theme]=\"applicationTheme\"\n >\n <ng-container ngFor=\"let step of itemSteps; index as i; last as isLast\">\n <div class=\"step\" #stepElement>\n <ui-step\n [label]=\"step.label\"\n [isVisited]=\"step.isVisited!\"\n [icon]=\"step.iconName\"\n [index]=\"i\"\n [selected]=\"i === selectedIndex\"\n [selectedIndex]=\"selectedIndex\"\n [isLast]=\"isLast\"\n [disabled]=\"step.disabled ?? (i > selectedIndex + 1 && !step.isVisited)\"\n [prevStepIsVisited]=\"itemSteps[i - 1]?.isVisited && step.isVisited\"\n [finalIcon]=\"isLast ? lastStepFinalIcon : false\"\n [showIconWhenSelected]=\"!!step.showIconWhenSelected\"\n (stepSelected)=\"onSelect($event, step)\"\n [applicationTheme]=\"applicationTheme\"\n role=\"tab\"\n [attr.aria-controls]=\"'step-panel-' + i\"\n [attr.aria-selected]=\"i === selectedIndex\"\n [attr.aria-label]=\"step.label\"\n [attr.tabindex]=\"(step.disabled ?? (i > selectedIndex + 1 && !step.isVisited)) ? -1 : 0\"\n [htmlDescription]=\"step.htmlDescription ?? []\"\n [boldLabel]=\"!!step.boldLabel\"\n [position]=\"position\"\n [descriptionTpl]=\"step.descriptionTpl\"\n [labelTooltip]=\"step.labelTooltip\"\n [alwaysShowIcon]=\"!!step.alwaysShowIcon\"\n [context]=\"step.context\"\n [stepVariant]=\"stepperVariant\"\n [largeTabletMode]=\"isLargeTablet$ \| async\"\n ></ui-step>\n </div>\n\n @if (!isLast && stepperVariant === 'primary') {\n <div class=\"separator-line\" [ngClass]=\"{ visited: step.isVisited && !!itemSteps[i + 1]?.isVisited }\">\n <div [stepLineElement]=\"stepElement\" [position]=\"position\" class=\"line\"></div>\n </div>\n }\n\n @if (!isLast && stepperVariant === 'secondary') {\n <div class=\"separator-arrow\">\n <ui-icon class=\"separator-icon\" name=\"Arrow-chevron-right-in-line\" size=\"24\" color=\"gray\"></ui-icon>\n </div>\n }\n </ng-container>\n </div>\n\n <ng-template #mobile>\n <div class=\"mobile-stepper-wrapper\">\n <div\n class=\"stepper\"\n tabindex=\"0\"\n #stepper\n role=\"button\"\n [ngClass]=\"{ 'keyboard-focused': keyboardFocused() }\"\n (keydown.enter)=\"showStepsToggle()\"\n (keydown.space)=\"showStepsToggle()\"\n [attr.aria-expanded]=\"isOpen\"\n >\n <div class=\"progress-step\" [tabindex]=\"-1\" [attr.aria-hidden]=\"true\">\n <ui-radial-progress\n [applicationTheme]=\"applicationTheme\"\n [value]=\"selectedIndex + 1\"\n [total]=\"itemSteps.length\"\n ></ui-radial-progress>\n </div>\n\n <div class=\"step-info\">\n <div class=\"current-step\">\n <span>{{ selectedIndex + 1 }}/{{ itemSteps.length }} </span>\n <span>{{ itemSteps[selectedIndex].label }}</span>\n </div>\n\n <div class=\"next-step\">\n <span ngIf=\"itemSteps.length !== selectedIndex + 1; else finalStep\"\n >{{ ('COMMON.NEXT' \| uiTranslate \| async) + ':' }} {{ itemSteps[selectedIndex + 1].label }}</span\n >\n <ng-template #finalStep>\n <span>{{ translationContext + 'FINAL_STEP' \| uiTranslate \| async }}</span>\n </ng-template>\n </div>\n </div>\n\n <div\n class=\"open-steps\"\n tabindex=\"0\"\n role=\"button\"\n (keydown.enter)=\"showStepsToggle()\"\n (click)=\"showStepsToggle()\"\n [ngClass]=\"{ opened: isOpen }\"\n >\n <ui-icon\n data-testid=\"ui-stepper-icon\"\n [applicationTheme]=\"applicationTheme\"\n [size]=\"'24'\"\n [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-in-line'\"\n ></ui-icon>\n </div>\n </div>\n\n <div ngIf=\"isOpen\">\n <div class=\"step-list\">\n <div class=\"step\" ngFor=\"let step of itemSteps; index as i; last as isLast\">\n <ui-step\n [label]=\"step.label\"\n [isVisited]=\"step.isVisited!\"\n [icon]=\"step.iconName\"\n [index]=\"i\"\n [selected]=\"i === selectedIndex\"\n [selectedIndex]=\"selectedIndex\"\n [isLast]=\"isLast\"\n [disabled]=\"step.disabled ?? (i > selectedIndex + 1 && !step.isVisited)\"\n [mobileMode]=\"true\"\n [finalIcon]=\"isLast ? lastStepFinalIcon : false\"\n [showIconWhenSelected]=\"!!step.showIconWhenSelected\"\n (stepSelected)=\"onSelect($event, step)\"\n [applicationTheme]=\"applicationTheme\"\n [attr.aria-label]=\"ariaLabel + '--' + step.label\"\n [stepVariant]=\"stepperVariant\"\n ></ui-step>\n </div>\n </div>\n <div\n class=\"overlay\"\n tabindex=\"0\"\n role=\"button\"\n (keydown.enter)=\"onCloseStepList()\"\n (click)=\"onCloseStepList()\"\n ></div>\n </div>\n </div>\n </ng-template>\n</ng-container>\n","queryGuide":{"roles":["tablist","tab","button"],"ariaAttributes":["aria-live","aria-controls","aria-selected","aria-label","aria-expanded","aria-hidden"],"dataTestIds":["ui-stepper-icon"],"materialComponents":[],"childUIComponents":["ui-step","ui-icon","ui-radial-progress"],"suggestedQueries":["screen.getByRole('tablist')","screen.getByRole('tab')","screen.getByRole('button')","screen.getByLabelText('label text')","screen.getByTestId('ui-stepper-icon')"]},"filePath":"components/stepper/stepper.component.ts","supportsTheme":true,"lastModified":1775743558169.837},"table":{"name":"TableComponent","selector":"ui-table","category":"table","description":"TableComponent component","importPath":"@testgorilla/tgo-ui/components/table","moduleName":"TableComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"config","type":"TableConfigWithPagination<T>","defaultValue":null,"required":true,"alias":null,"transform":null,"description":"Table configuration","isSignal":false},{"name":"data","type":"TableData","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Input property for providing the table data.","isSignal":false},{"name":"loading","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Input property indicating whether the table is in a loading state.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"tableDetailColumns","type":"TableDetailColumn<T, TDetail>","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Data structure to select which columns should be rendered and their capabilities","isSignal":false},{"name":"tableDetails","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"disableBorderRadius","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Disable border radius for table","isSignal":false},{"name":"isCondensed","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Condensed table","isSignal":false},{"name":"stickyHeader","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Sticky header","isSignal":false},{"name":"maxHeight","type":"unknown","defaultValue":"'576px'","required":false,"alias":null,"transform":null,"description":"Max height","isSignal":false}],"outputs":[{"name":"onRowClickEvent","eventType":"any","alias":null,"description":"","isSignal":false},{"name":"onDetailRowClickEvent","eventType":"any","alias":null,"description":"","isSignal":false},{"name":"paginatorChange","eventType":"PageEvent","alias":null,"description":"","isSignal":false},{"name":"sortChange","eventType":"Sort","alias":null,"description":"","isSignal":false}],"module":{"name":"TableComponentModule","imports":["CommonModule","MatTableModule","MatTooltipModule","SkeletonComponent","PaginatorComponentModule","ButtonComponentModule","MatSortModule","IconComponentModule","EllipseTextDirective","DynamicComponentDirective","DataPropertyGetterPipe","MemoizeFuncPipe"],"exports":["TableComponent"],"declarations":["TableComponent","SentenceCasePipe"],"providers":[]},"types":{"typeAliases":[{"name":"TableData","value":"Record<string, any>[]"},{"name":"SortDirection","value":"'asc' \| 'desc' \| ''"},{"name":"DataSource","value":"{\n [key: string]: any;\n}"},{"name":"ScrollSettings","value":"{ scrollEnd: boolean; horizontalScroll: boolean; scrollStart: boolean }"}],"interfaces":[{"name":"TableConfig","properties":[{"name":"columns","type":"TableColumn<T>[]","optional":false},{"name":"pagination","type":"Pagination","optional":true},{"name":"title","type":"string","optional":true},{"name":"width","type":"number","optional":true},{"name":"sort","type":"Sort","optional":true},{"name":"hidePagination","type":"boolean","optional":true},{"name":"noDataRowTpl","type":"TemplateRef<any>","optional":true},{"name":"sortable","type":"boolean","optional":true}]},{"name":"TableConfigWithPagination","properties":[{"name":"pagination","type":"Pagination","optional":true}]},{"name":"TableColumn","properties":[{"name":"title","type":"string","optional":true},{"name":"key","type":"string","optional":false},{"name":"allowMultiline","type":"boolean","optional":true},{"name":"bold","type":"boolean","optional":true},{"name":"showTooltip","type":"boolean","optional":true},{"name":"tooltip","type":"string","optional":true},{"name":"allowSort","type":"boolean","optional":true},{"name":"isSticky","type":"boolean","optional":true},{"name":"headerCellTemplate","type":"TemplateRef<any>","optional":true},{"name":"rowCellTemplate","type":"TemplateRef<any>","optional":true},{"name":"rowCellTemplateClick","type":"() => any","optional":true},{"name":"sortHeader","type":"string","optional":true},{"name":"hidden","type":"boolean","optional":true},{"name":"order","type":"number","optional":true},{"name":"fontSize","type":"'12px' \| '14px'","optional":true},{"name":"field","type":"string","optional":true},{"name":"type","type":"ColumnType","optional":true},{"name":"function","type":"(v: T) => string","optional":true},{"name":"renderer","type":"(v: T) => ComponentRenderer \| string","optional":true},{"name":"styles","type":"ColumnStyles","optional":true},{"name":"sortStart","type":"SortDirection","optional":true},{"name":"uniqueId","type":"string","optional":true}]},{"name":"Pagination","properties":[{"name":"itemsPerPageOptions","type":"number[]","optional":false},{"name":"itemsPerPage","type":"number","optional":false},{"name":"currentPage","type":"number","optional":false},{"name":"totalItems","type":"number","optional":false}]},{"name":"ColumnEllipse","properties":[{"name":"index","type":"number","optional":false},{"name":"showTooltip","type":"boolean","optional":false}]},{"name":"Sort","properties":[{"name":"active","type":"string","optional":false},{"name":"direction","type":"SortDirection","optional":false},{"name":"defaultSortStart","type":"SortDirection","optional":true}]},{"name":"TableDetailColumn","properties":[{"name":"columnDefs","type":"TableColumn<TDetail>[]","optional":false},{"name":"setDetailRowData","type":"(params: DetailRowDataParams<T, TDetail>) => void","optional":false}]},{"name":"DetailRowDataParams","properties":[{"name":"data","type":"T","optional":false}]},{"name":"ComponentRenderer","properties":[{"name":"component","type":"Type<any>","optional":false},{"name":"inputs","type":"any","optional":true},{"name":"outputs","type":"{ [key: string]: any }","optional":true}]},{"name":"ColumnStyles","properties":[{"name":"alignment","type":"ColumnAlignment","optional":true},{"name":"width","type":"string","optional":true},{"name":"'min-width'","type":"string","optional":true},{"name":"padding","type":"string","optional":true}]}],"enums":[{"name":"ColumnType","members":[{"name":"FIELD","value":"'field'"},{"name":"FUNCTION","value":"'function'"},{"name":"RENDERER","value":"'renderer'"}]},{"name":"ColumnAlignment","members":[{"name":"LEFT","value":"'left'"},{"name":"RIGHT","value":"'right'"},{"name":"CENTER","value":"'center'"}]},{"name":"ColumnTypeEnum","members":[{"name":"FIELD","value":"'field'"},{"name":"FUNCTION","value":"'function'"},{"name":"RENDERER","value":"'renderer'"}]},{"name":"ColumnAlignmentEnum","members":[{"name":"LEFT","value":"'left'"},{"name":"RIGHT","value":"'right'"},{"name":"CENTER","value":"'center'"}]}]},"examples":[],"documentation":"","template":"<div\n #tableContainer\n class=\"table-container\"\n [ngClass]=\"{ 'without-title': !tableConfig?.title, 'disable-border-radius': disableBorderRadius }\"\n [attr.theme]=\"applicationTheme\"\n>\n <div ngIf=\"tableConfig?.title\" class=\"table-header\">\n {{ tableConfig.title \| sentencecase }}\n <ng-content select=\"[title-actions]\"></ng-content>\n </div>\n <div\n #table\n ngIf=\"scrollSettings$ \| async as scrollSettings\"\n class=\"table-wrapper\"\n [class.sticky-header]=\"stickyHeader\"\n [style.--table-max-height]=\"maxHeight\"\n >\n <table\n [tabIndex]=\"0\"\n class=\"main-table\"\n [class.condensed]=\"isCondensed\"\n [class.sort-disabled]=\"loading\"\n mat-table\n [dataSource]=\"tableData\"\n matSort\n [matSortStart]=\"tableConfig?.sort?.defaultSortStart ?? 'asc'\"\n [matSortActive]=\"tableConfig?.sort?.active ?? ''\"\n [matSortDirection]=\"tableConfig?.sort?.direction ?? ''\"\n (matSortChange)=\"onSortChange($event)\"\n multiTemplateDataRows\n >\n <ng-container\n ngFor=\"let column of tableConfig.columns; index as i; last as isLast; trackBy: trackColumnUniqueId\"\n >\n <ng-container ngIf=\"isLast && column.isSticky && column.allowSort\">\n <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\" [stickyEnd]=\"!scrollSettings?.scrollEnd\">\n <th\n mat-header-cell\n [start]=\"column.sortStart ?? 'asc'\"\n [mat-sort-header]=\"column.sortHeader ?? column.key\"\n matHeaderCellDef\n [attr.sortable]=\"column.allowSort ?? false\"\n [ngStyle]=\"{ width: column.styles?.width, minWidth: column.styles?.['min-width'] }\"\n [ngClass]=\"column.styles?.alignment ? 'th-' + column.styles?.alignment : ''\"\n [style.font-weight]=\"'bold'\"\n >\n <ng-container ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n ngTemplateOutlet=\"\n column.headerCellTemplate;\n context: { $implicit: column.title, column, colIndex: i }\n \"\n ></ng-container>\n </ng-container>\n <ng-template #configValue>\n <ng-container\n [ngTemplateOutlet]=\"columnHeader\"\n [ngTemplateOutletContext]=\"{ i, column }\"\n ></ng-container>\n </ng-template>\n </th>\n\n <td\n mat-cell\n matCellDef=\"let element; let rowIndex = dataIndex\"\n [align]=\"column.styles?.alignment\"\n [ngClass]=\"[column.styles?.alignment ? 'td-' + column.styles?.alignment : '']\"\n (click)=\"\n onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\n \"\n >\n <ui-skeleton\n class=\"table-skeleton-loader\"\n [count]=\"1\"\n [theme]=\"skeletonStyleConfig\"\n [appearance]=\"'line'\"\n ngIf=\"loading; else value\"\n ></ui-skeleton>\n <ng-template #value>\n <div class=\"row-value\">\n <ng-container\n [ngTemplateOutlet]=\"expandButton\"\n [ngTemplateOutletContext]=\"{ index: i, element }\"\n ></ng-container>\n\n @if (column?.type) {\n <ng-container\n ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn: column }\"\n ></ng-container>\n } @else {\n <ng-container ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"\n ></ng-container>\n </ng-container>\n <ng-template #configData>\n <span\n [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n [style.font-size]=\"column.fontSize ?? '14px'\"\n >{{ element \| dataPropertyGetter: column.key }}</span\n >\n </ng-template>\n }\n </div>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container ngIf=\"isLast && column.isSticky && !column.allowSort\">\n <ng-container\n [matColumnDef]=\"column.uniqueId ?? column.key\"\n [stickyEnd]=\"scrollSettings.horizontalScroll ? !scrollSettings.scrollEnd : true\"\n >\n <th\n mat-header-cell\n matHeaderCellDef\n [attr.sortable]=\"column.allowSort ?? false\"\n [ngStyle]=\"{ width: column.styles?.width, minWidth: column.styles?.['min-width'] }\"\n [ngClass]=\"column.styles?.alignment ? 'th-' + column.styles?.alignment : ''\"\n [style.font-weight]=\"'bold'\"\n >\n <ng-container ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n ngTemplateOutlet=\"\n column.headerCellTemplate;\n context: { $implicit: column.title, column, colIndex: i }\n \"\n ></ng-container>\n </ng-container>\n <ng-template #configValue>\n <ng-container\n [ngTemplateOutlet]=\"columnHeader\"\n [ngTemplateOutletContext]=\"{ i, column }\"\n ></ng-container>\n </ng-template>\n </th>\n\n <td\n mat-cell\n matCellDef=\"let element; let rowIndex = dataIndex\"\n [align]=\"column.styles?.alignment\"\n [ngClass]=\"[column.styles?.alignment ? 'td-' + column.styles?.alignment : '']\"\n (click)=\"\n onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\n \"\n >\n <ui-skeleton\n class=\"table-skeleton-loader\"\n [count]=\"1\"\n [theme]=\"skeletonStyleConfig\"\n [appearance]=\"'line'\"\n ngIf=\"loading; else value\"\n ></ui-skeleton>\n <ng-template #value>\n <div class=\"row-value\">\n <ng-container\n [ngTemplateOutlet]=\"expandButton\"\n [ngTemplateOutletContext]=\"{ index: i, element }\"\n ></ng-container>\n\n @if (column?.type) {\n <ng-container\n ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn: column }\"\n ></ng-container>\n } @else {\n <ng-container ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"\n ></ng-container>\n </ng-container>\n <ng-template #configData>\n <span\n [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n [style.font-size]=\"column.fontSize ?? '14px'\"\n >{{ element \| dataPropertyGetter: column.key }}</span\n >\n </ng-template>\n }\n </div>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container ngIf=\"!(isLast && column.isSticky) && column.allowSort\">\n <ng-container\n [matColumnDef]=\"column.uniqueId ?? column.key\"\n [sticky]=\"(isMobile$ \| async) ? false : !scrollSettings.scrollStart && !!column.isSticky\"\n >\n <th\n mat-header-cell\n [start]=\"column.sortStart ?? 'asc'\"\n [mat-sort-header]=\"column.sortHeader ?? column.key\"\n [attr.sortable]=\"column.allowSort ?? false\"\n matHeaderCellDef\n [style.font-weight]=\"'bold'\"\n [ngStyle]=\"{ width: column.styles?.width, minWidth: column.styles?.['min-width'] }\"\n [ngClass]=\"column.styles?.alignment ? 'th-' + column.styles?.alignment : ''\"\n >\n <ng-container ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n ngTemplateOutlet=\"\n column.headerCellTemplate;\n context: { $implicit: column.title, column, colIndex: i }\n \"\n ></ng-container>\n </ng-container>\n <ng-template #configValue>\n <ng-container\n [ngTemplateOutlet]=\"columnHeader\"\n [ngTemplateOutletContext]=\"{ i, column }\"\n ></ng-container>\n </ng-template>\n </th>\n\n <td\n mat-cell\n matCellDef=\"let element; let rowIndex = dataIndex\"\n [align]=\"column.styles?.alignment\"\n [ngClass]=\"[column.styles?.alignment ? 'td-' + column.styles?.alignment : '']\"\n (click)=\"\n onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\n \"\n >\n <ui-skeleton\n class=\"table-skeleton-loader\"\n [count]=\"1\"\n [theme]=\"skeletonStyleConfig\"\n [appearance]=\"'line'\"\n ngIf=\"loading; else value\"\n ></ui-skeleton>\n <ng-template #value>\n <div class=\"row-value\">\n <ng-container\n [ngTemplateOutlet]=\"expandButton\"\n [ngTemplateOutletContext]=\"{ index: i, element }\"\n ></ng-container>\n\n @if (column?.type) {\n <ng-container\n ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn: column }\"\n ></ng-container>\n } @else {\n <ng-container ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"\n ></ng-container>\n </ng-container>\n <ng-template #configData>\n <span\n [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n [style.font-size]=\"column.fontSize ?? '14px'\"\n >{{ element \| dataPropertyGetter: column.key }}</span\n >\n </ng-template>\n }\n </div>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n\n <ng-container ngIf=\"!(isLast && column.isSticky) && !column.allowSort\">\n <ng-container\n [matColumnDef]=\"column.uniqueId ?? column.key\"\n [sticky]=\"(isMobile$ \| async) ? false : !scrollSettings.scrollStart && !!column.isSticky\"\n >\n <th\n mat-header-cell\n [attr.sortable]=\"column.allowSort ?? false\"\n matHeaderCellDef\n [style.font-weight]=\"'bold'\"\n [ngStyle]=\"{ width: column.styles?.width, minWidth: column.styles?.['min-width'] }\"\n [ngClass]=\"column.styles?.alignment ? 'th-' + column.styles?.alignment : ''\"\n >\n <ng-container ngIf=\"column.headerCellTemplate; else configValue\">\n <ng-container\n ngTemplateOutlet=\"\n column.headerCellTemplate;\n context: { $implicit: column.title, column, colIndex: i }\n \"\n ></ng-container>\n </ng-container>\n <ng-template #configValue>\n <ng-container\n [ngTemplateOutlet]=\"columnHeader\"\n [ngTemplateOutletContext]=\"{ i, column }\"\n ></ng-container>\n </ng-template>\n </th>\n\n <td\n mat-cell\n matCellDef=\"let element; let rowIndex = dataIndex\"\n [align]=\"column.styles?.alignment\"\n [ngClass]=\"[column.styles?.alignment ? 'td-' + column.styles?.alignment : '']\"\n (click)=\"\n onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\n \"\n >\n <ui-skeleton\n class=\"table-skeleton-loader\"\n [count]=\"1\"\n [theme]=\"skeletonStyleConfig\"\n [appearance]=\"'line'\"\n ngIf=\"loading; else value\"\n ></ui-skeleton>\n <ng-template #value>\n <div class=\"row-value\">\n <ng-container\n [ngTemplateOutlet]=\"expandButton\"\n [ngTemplateOutletContext]=\"{ index: i, element }\"\n ></ng-container>\n\n @if (column?.type) {\n <ng-container\n ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn: column }\"\n ></ng-container>\n } @else {\n <ng-container ngIf=\"column.rowCellTemplate; else configData\">\n <ng-container\n ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"\n ></ng-container>\n </ng-container>\n <ng-template #configData>\n <span\n [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n [style.font-size]=\"column.fontSize ?? '14px'\"\n >{{ element \| dataPropertyGetter: column.key }}</span\n >\n </ng-template>\n }\n </div>\n </ng-template>\n </td>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container matColumnDef=\"expandedDetail\">\n <td mat-cell matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length\">\n <div\n class=\"element-detail\"\n ngIf=\"dataSourceDetail.data.length\"\n [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\"\n >\n <table\n mat-table\n [dataSource]=\"dataSourceDetail\"\n [ngClass]=\"{ 'hide-borders': element === tableData[tableData.length - 1] }\"\n >\n <ng-container\n ngFor=\"let tableColumn of tableDetailColumns.columnDefs\"\n [matColumnDef]=\"tableColumn.title ?? ''\"\n >\n <th\n mat-header-cell\n matHeaderCellDef=\"let element\"\n arrowPosition=\"after\"\n [ngStyle]=\"{ width: tableColumn.styles?.width }\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-' + tableColumn.styles?.alignment : ''\"\n >\n {{ tableColumn.title \| uppercase }}\n </th>\n\n <td\n mat-cell\n matCellDef=\"let element\"\n (click)=\"onDetailRowClick(element)\"\n [align]=\"tableColumn.styles?.alignment\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'td-' + tableColumn.styles?.alignment : ''\"\n [ngStyle]=\"{ width: tableColumn.styles?.width }\"\n >\n <ng-container ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn }\"></ng-container>\n </td>\n </ng-container>\n\n <tr mat-header-row matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\n <tr mat-row matRowDef=\"let rowDetail; columns: columnsDetailToDisplay\"></tr>\n </table>\n </div>\n </td>\n </ng-container>\n\n <ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n <div class=\"align-wrapper\">\n <ng-container [ngSwitch]=\"tableColumn.type\">\n <ng-container ngSwitchCase=\"DataType.FIELD\">\n {{ element \| dataPropertyGetter: tableColumn.key }}\n </ng-container>\n <ng-container ngSwitchCase=\"DataType.FUNCTION\">\n {{ tableColumn.function?.(element) }}\n </ng-container>\n <ng-container ngSwitchCase=\"DataType.RENDERER\">\n <ng-template [dynamicComponent]=\"[tableColumn.renderer, element] \| memoizeFunc: callRenderer\">\n </ng-template>\n </ng-container>\n <ng-container ngSwitchDefault>\n {{ element \| dataPropertyGetter: tableColumn.key }}\n </ng-container>\n </ng-container>\n </div>\n </ng-template>\n\n <tr\n mat-header-row\n matHeaderRowDef=\"displayedColumns; sticky: stickyHeader\"\n [class.is-title-present]=\"tableConfig.title\"\n ></tr>\n <tr\n mat-row\n matRowDef=\"let row; columns: displayedColumns\"\n [ngClass]=\"{\n 'expanded-row': elementDetail === row,\n 'row-clickable': tableDetails,\n selected: row?.selected,\n 'last-row': row === tableData[tableData.length - 1] && !elementDetail,\n }\"\n (click)=\"toggleRow(row)\"\n ></tr>\n <ng-container ngIf=\"tableDetails && tableDetailColumns?.columnDefs?.length\">\n <tr mat-row matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n </ng-container>\n\n <ng-container ngIf=\"tableConfig.noDataRowTpl\">\n <tr matNoDataRow>\n <ng-container ngTemplateOutlet=\"tableConfig.noDataRowTpl\"></ng-container>\n </tr>\n </ng-container>\n </table>\n </div>\n\n <ui-paginator\n ngIf=\"!tableConfig?.hidePagination && tableConfig?.pagination\"\n [disabled]=\"loading\"\n [applicationTheme]=\"applicationTheme !== 'classic' ? 'light' : 'classic'\"\n [pageSize]=\"tableConfig.pagination?.itemsPerPage ?? 25\"\n [length]=\"tableConfig.pagination?.totalItems ?? 0\"\n [currentPage]=\"tableConfig.pagination?.currentPage ?? 0\"\n [pageSizeOptions]=\"tableConfig.pagination?.itemsPerPageOptions ?? [10, 25, 50]\"\n (paginatorChange)=\"onPaginatorChange($event)\"\n ></ui-paginator>\n</div>\n\n<ng-template #expandButton let-i=\"index\" let-element=\"element\">\n <ui-button\n [applicationTheme]=\"applicationTheme\"\n ngIf=\"!i && tableDetails\"\n variant=\"icon-button\"\n [ngClass]=\"{ opened: elementDetail && element === elementDetail }\"\n [iconName]=\"elementDetail && element === elementDetail ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"\n ></ui-button>\n</ng-template>\n\n<ng-template #columnHeader let-column=\"column\" let-i=\"i\">\n <div class=\"header-section\">\n <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\" class=\"column-title\"\n >{{ column.title \| sentencecase }}\n </span>\n <ui-icon\n ngIf=\"column?.showTooltip\"\n [name]=\"'Help-in-line'\"\n [matTooltipClass]=\"applicationTheme\"\n [matTooltip]=\"(column?.showTooltip ? (column?.tooltip ? column.tooltip : column.title) : '') \|\| ''\"\n ></ui-icon>\n </div>\n</ng-template>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-skeleton","ui-paginator","ui-button","ui-icon"],"suggestedQueries":[]},"filePath":"components/table/table.component.ts","supportsTheme":true,"lastModified":1775743558170.837},"tabs":{"name":"TabsComponent","selector":"ui-tabs","category":"tabs","description":"To use the Tabs component, you need to import the `TabsComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/tabs","moduleName":"TabsComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"companyColor","type":"string \| null","defaultValue":"'#46A997'","required":false,"alias":null,"transform":null,"description":"Color of the Tabs.\nDefaults to Test Gorilla primary color.","isSignal":false},{"name":"type","type":"TabsType","defaultValue":"'underlined'","required":false,"alias":null,"transform":null,"description":"Type the Tabs.\nDefaults underlined.","isSignal":false},{"name":"animationDuration","type":"number","defaultValue":"300","required":false,"alias":null,"transform":null,"description":"Animation duration when switching tabs","isSignal":false},{"name":"headerContentPadding","type":"unknown","defaultValue":"'32px'","required":false,"alias":null,"transform":"(value: number): string => `${value}px`","description":"Sets the padding for content and header","isSignal":false},{"name":"dynamicHeight","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":"booleanAttribute","description":"Sets the dynamic height of the tab","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"tabHeaderSize","type":"TabHeaderSize","defaultValue":"TAB_HEADER_SIZE.BIG","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"isLoading","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true}],"outputs":[{"name":"selectedTabIndex","eventType":"number","alias":null,"description":"","isSignal":false},{"name":"selectedTab","eventType":"Tab","alias":null,"description":"","isSignal":false}],"module":{"name":"TabsComponentModule","imports":["TabDirective","CommonModule","MatTabsModule","IconComponentModule","UiTranslatePipe","SkeletonComponent"],"exports":["TabsComponent","TabDirective"],"declarations":["TabsComponent"],"providers":[]},"types":{"typeAliases":[{"name":"TabsType","value":"'underlined' \| 'filled'"},{"name":"TabHeaderSize","value":"(typeof TAB_HEADER_SIZE)[keyof typeof TAB_HEADER_SIZE]"}],"interfaces":[{"name":"Tab","properties":[{"name":"tabName","type":"string","optional":false},{"name":"tabLabel","type":"string","optional":false},{"name":"contentTemplateRef","type":"any","optional":false},{"name":"iconLeft","type":"IconName","optional":true},{"name":"iconRight","type":"IconName","optional":true},{"name":"disabled","type":"boolean","optional":true},{"name":"canLeave","type":"(ctx?: { currentTab: Tab; nextTab: Tab }) => boolean \| Promise<boolean>","optional":true},{"name":"linkUrl","type":"string","optional":true},{"name":"ariaLabel","type":"string","optional":true},{"name":"order","type":"number","optional":true},{"name":"skeletonTheme","type":"NgxSkeletonLoaderConfigTheme","optional":true},{"name":"isSkeletonAiTheme","type":"boolean","optional":true}]}],"enums":[]},"examples":[{"name":"Default","template":"<ui-tabs type=\"underlined\">\n <ng-template uiTab [tabLabel]=\"'Tab 1'\" [tabName]=\"'1'\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mauris sit amet ligula tristique interdum eu non sapien. Integer nec turpis vel augue volutpat convallis. Nullam bibendum elit ac ex convallis, a ultricies lacus consequat. Fusce sit amet dapibus ipsum. Proin vel nunc nec justo lacinia rhoncus. Nunc euismod vestibulum tellus, vel vestibulum diam convallis quis. Integer in vehicula ipsum. Duis pulvinar quam a elit interdum, at euismod justo condimentum. Vivamus eu semper dolor. Sed sit amet tristique odio. Mauris ut felis vel mi pharetra cursus. Aenean ullamcorper fringilla lectus, vel facilisis ligula blandit eget.\n Curabitur eu nisl ac orci condimentum convallis. Sed auctor mi non ex hendrerit, sit amet varius justo malesuada. Aenean euismod felis a dui facilisis, id hendrerit nulla efficitur. Etiam varius massa\n </ng-template>\n <ng-template uiTab [tabLabel]=\"'Tab 2'\" [tabName]=\"'2'\" >Quisque in justo vel justo commodo fermentum. Morbi eget tincidunt libero. Integer ut velit in felis vehicula ultrices. Nulla facilisi. Praesent vehicula elit id semper accumsan. Phasellus sed tortor sed nulla fermentum cursus in id enim. Ut et aliquam velit. In hac habitasse platea dictumst. Nulla facilisi. Sed sagittis dolor in mi ultricies facilisis. Ut sit amet turpis vel tortor congue posuere. Aenean luctus quam sit amet augue congue, nec fermentum dolor volutpat.</ng-template>\n <ng-template uiTab [tabLabel]=\"'Tab 3'\" [tabName]=\"'3'\" [iconLeft]=\"'Level'\" [iconRight]=\"'Test'\">Curabitur eu nisl ac orci condimentum convallis. Sed auctor mi non ex hendrerit, sit amet varius justo malesuada. Aenean euismod felis a dui facilisis, id hendrerit nulla efficitur. Etiam varius massa a est eleifend, non scelerisque mauris dictum. Proin vel metus a justo efficitur aliquet nec ut tortor. Integer pulvinar imperdiet velit non aliquam. Fusce nec elit vitae orci facilisis tristique eu vitae dolor. Integer tristique ex at dui facilisis aliquam. Maecenas interdum tortor id aliquam facilisis. Suspendisse tristique vestibulum nulla, id aliquet tortor convallis vel. Vivamus ullamcorper, lectus et feugiat posuere, tellus dolor vulputate tortor, vel lacinia leo libero et nunc.</ng-template>\n </ui-tabs>","props":{"type":"'underlined'"}},{"name":"Filled","template":"<ui-tabs type=\"filled\">\n <ng-template uiTab [tabLabel]=\"'Tab 1'\" [tabName]=\"'1'\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mauris sit amet ligula tristique interdum eu non sapien. Integer nec turpis vel augue volutpat convallis. Nullam bibendum elit ac ex convallis, a ultricies lacus consequat. Fusce sit amet dapibus ipsum. Proin vel nunc nec justo lacinia rhoncus. Nunc euismod vestibulum tellus, vel vestibulum diam convallis quis. Integer in vehicula ipsum. Duis pulvinar quam a elit interdum, at euismod justo condimentum. Vivamus eu semper dolor. Sed sit amet tristique odio. Mauris ut felis vel mi pharetra cursus. Aenean ullamcorper fringilla lectus, vel facilisis ligula blandit eget.\n Curabitur eu nisl ac orci condimentum convallis. Sed auctor mi non ex hendrerit, sit amet varius justo malesuada. Aenean euismod felis a dui facilisis, id hendrerit nulla efficitur. Etiam varius massa\n </ng-template>\n <ng-template uiTab [tabLabel]=\"'Tab 2'\" [tabName]=\"'2'\">Quisque in justo vel justo commodo fermentum. Morbi eget tincidunt libero. Integer ut velit in felis vehicula ultrices. Nulla facilisi. Praesent vehicula elit id semper accumsan. Phasellus sed tortor sed nulla fermentum cursus in id enim. Ut et aliquam velit. In hac habitasse platea dictumst. Nulla facilisi. Sed sagittis dolor in mi ultricies facilisis. Ut sit amet turpis vel tortor congue posuere. Aenean luctus quam sit amet augue congue, nec fermentum dolor volutpat.</ng-template>\n <ng-template uiTab [tabLabel]=\"'Tab 3'\" [tabName]=\"'3'\" [iconLeft]=\"'Level'\" [iconRight]=\"'Test'\">Curabitur eu nisl ac orci condimentum convallis. Sed auctor mi non ex hendrerit, sit amet varius justo malesuada. Aenean euismod felis a dui facilisis, id hendrerit nulla efficitur. Etiam varius massa a est eleifend, non scelerisque mauris dictum. Proin vel metus a justo efficitur aliquet nec ut tortor. Integer pulvinar imperdiet velit non aliquam. Fusce nec elit vitae orci facilisis tristique eu vitae dolor. Integer tristique ex at dui facilisis aliquam. Maecenas interdum tortor id aliquam facilisis. Suspendisse tristique vestibulum nulla, id aliquet tortor convallis vel. Vivamus ullamcorper, lectus et feugiat posuere, tellus dolor vulputate tortor, vel lacinia leo libero et nunc.</ng-template>\n </ui-tabs>","props":{"type":"'underlined'"}},{"name":"SmallHeaderSize","template":"<ui-tabs type=\"underlined\" tabHeaderSize=\"small\">\n <ng-template uiTab [tabLabel]=\"'Tab 1'\" [tabName]=\"'1'\">Tab 1 content</ng-template>\n <ng-template uiTab [tabLabel]=\"'Tab 2'\" [tabName]=\"'2'\">Tab 2 content</ng-template>\n <ng-template uiTab [tabLabel]=\"'Tab 3'\" [tabName]=\"'3'\">Tab 3 content</ng-template>\n </ui-tabs>","props":{"type":"'underlined'"}},{"name":"MediumHeaderSize","template":"<ui-tabs type=\"underlined\" tabHeaderSize=\"medium\">\n <ng-template uiTab [tabLabel]=\"'Tab 1'\" [tabName]=\"'1'\">Tab 1 content</ng-template>\n <ng-template uiTab [tabLabel]=\"'Tab 2'\" [tabName]=\"'2'\">Tab 2 content</ng-template>\n <ng-template uiTab [tabLabel]=\"'Tab 3'\" [tabName]=\"'3'\">Tab 3 content</ng-template>\n </ui-tabs>","props":{"type":"'underlined'"}},{"name":"ConditionalTabs","template":"<div style=\"display: flex; flex-direction: column; gap: 20px;\">\n <div style=\"margin-bottom: 20px;\">\n <button\n (click)=\"toggleMiddleTab()\"\n style=\"padding: 8px 16px; background-color: #D410AA; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;\"\n >\n {{ showMiddleTab ? 'Hide' : 'Show' }} Middle Tab\n </button>\n <span style=\"margin-left: 10px; font-size: 14px;\">\n Middle tab is currently: <strong>{{ showMiddleTab ? 'VISIBLE' : 'HIDDEN' }}</strong>\n </span>\n </div>\n\n <div style=\"border: 1px solid #ddd; padding: 10px; background-color: #fafafa; border-radius: 4px; margin-bottom: 20px;\">\n <p><strong>Instructions:</strong></p>\n <p>In this example, we're using the <code>[order]</code> property to explicitly set the position of each tab:</p>\n <ul>\n <li>Tab 1: <code>[order]=\"1\"</code></li>\n <li>Tab 2: <code>[order]=\"2\"</code> (conditional tab with ngIf or if)</li>\n <li>Tab 3: <code>[order]=\"3\"</code></li>\n </ul>\n <p>This ensures tabs always appear in the correct order, regardless of conditional rendering.</p>\n </div>\n\n <ui-tabs type=\"underlined\">\n <ng-template uiTab [tabLabel]=\"'Tab 1'\" [tabName]=\"'tab1'\" [order]=\"1\">\n <div style=\"padding: 20px; border: 1px solid #eee; border-radius: 4px; margin-top: 20px;\">\n <h3>First Tab Content</h3>\n <p>This tab is always visible with order=\"1\".</p>\n </div>\n </ng-template>\n @if (showMiddleTab) {\n <ng-template uiTab [tabLabel]=\"'Tab 2'\" [tabName]=\"'tab2'\" [order]=\"2\">\n <div style=\"padding: 20px; border: 1px solid #eee; border-radius: 4px; margin-top: 20px;\">\n <h3>Middle Tab Content</h3>\n <p>This tab is conditionally visible with order=\"2\".</p>\n <p>Try toggling this tab using the button above and observe that when it's shown again,\n it maintains its position between Tab 1 and Tab 3.</p>\n </div>\n </ng-template>\n }\n\n <ng-template uiTab [tabLabel]=\"'Tab 3'\" [tabName]=\"'tab3'\" [order]=\"3\">\n <div style=\"padding: 20px; border: 1px solid #eee; border-radius: 4px; margin-top: 20px;\">\n <h3>Last Tab Content</h3>\n <p>This tab is always visible with order=\"3\".</p>\n <p>When the middle tab is hidden, this tab should still remain in the last position and NOT move to the middle.</p>\n </div>\n </ng-template>\n </ui-tabs>\n </div>","props":{"type":"'underlined'"}}],"documentation":"## How to use\n\nTo use the Tabs component, you need to import the `TabsComponentModule` in your module:\n\n```typescript\nimport { TabsComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n TabsComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-tabs type=\"underlined\" applicationTheme=\"light\" (tabChange)=\"onTabChange($event)\">\n <ng-template uiTab tabLabel=\"Details\" tabName=\"details\">\n Content for the Details tab\n </ng-template>\n <ng-template uiTab tabLabel=\"History\" tabName=\"history\" iconLeft=\"Clock\">\n Content for the History tab with an icon\n </ng-template>\n <ng-template uiTab tabLabel=\"Settings\" tabName=\"settings\" [disabled]=\"!hasAccess\">\n Content for the Settings tab\n </ng-template>\n</ui-tabs>\n```\n\nThe tabs component supports different styles (underlined or filled), icons, and can disable individual tabs.","template":"<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","queryGuide":{"roles":["tablist","tab-link","tab","tabpanel"],"ariaAttributes":["aria-label","aria-selected","aria-labelledby"],"dataTestIds":[],"materialComponents":["mat-tab-group","mat-tab"],"childUIComponents":["ui-skeleton","ui-icon"],"suggestedQueries":["screen.getByRole('tablist')","screen.getByRole('tab-link')","screen.getByRole('tab')","screen.getByRole('tabpanel')","screen.getByLabelText('label text')"]},"filePath":"components/tabs/tabs.component.ts","supportsTheme":true,"lastModified":1775743558172.837},"tag":{"name":"TagComponent","selector":"ui-tag","category":"tag","description":"To use the Tag component, you need to import the `TagComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/tag","moduleName":"TagComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"icon","type":"IconName","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Icon","isSignal":false},{"name":"allowClose","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether to allow the tag to be closed.","isSignal":false},{"name":"readOnly","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether the tag is in read-only mode.","isSignal":false},{"name":"isSelected","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether the tag is selected.","isSignal":false},{"name":"showIconWhenSelected","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Display icon when is selected","isSignal":false},{"name":"isDisabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Specifies whether the element is disabled.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"ariaLabel","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"A string representing the ARIA label for accessibility.\nThis label is used to provide an accessible name for the input element.","isSignal":false},{"name":"ariaRequired","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"label","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Tag's label","isSignal":false},{"name":"showBadge","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Whether to show the badge on the tag.","isSignal":true},{"name":"notificationsAmount","type":"number","defaultValue":"0","required":false,"alias":null,"transform":null,"description":"The notifications amount to be displayed on the badge.","isSignal":true}],"outputs":[{"name":"close","eventType":"void","alias":null,"description":"Event triggered when the tag should be closed.","isSignal":false},{"name":"press","eventType":"boolean","alias":null,"description":"Event triggered when a press action occurs.","isSignal":false}],"module":{"name":"TagComponentModule","imports":["CommonModule","IconComponentModule","TooltipComponentModule","MatTooltipModule","MatInputModule","UiTranslatePipe","BadgeComponentModule"],"exports":["TagComponent"],"declarations":["TagComponent"],"providers":[]},"types":{"typeAliases":[{"name":"TagColor","value":"'teal' \| 'petrol' \| 'grey' \| 'red' \| 'gold'"}],"interfaces":[],"enums":[]},"examples":[{"name":"Default","template":"<ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" [isSelected]=\"true\" showIconWhenSelected=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" readOnly=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Folder\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Assessment\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Sparkle-in-line\" showBadge=\"true\" notificationsAmount=\"0\" allowClose=\"true\"></ui-tag>","props":{"label":"'Label'"}},{"name":"Suggestion","template":"<ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" [isSelected]=\"true\" showIconWhenSelected=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" readOnly=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Folder\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Assessment\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Sparkle-in-line\" showBadge=\"true\" notificationsAmount=\"0\" allowClose=\"true\"></ui-tag>","props":{"label":"'Label'"}},{"name":"SuggestionWithIcon","template":"<ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" [isSelected]=\"true\" showIconWhenSelected=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" readOnly=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Folder\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Assessment\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Sparkle-in-line\" showBadge=\"true\" notificationsAmount=\"0\" allowClose=\"true\"></ui-tag>","props":{"label":"'Label'","icon":"'Folder'"}},{"name":"Filter","template":"<ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" [isSelected]=\"true\" showIconWhenSelected=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" readOnly=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Folder\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Assessment\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Sparkle-in-line\" showBadge=\"true\" notificationsAmount=\"0\" allowClose=\"true\"></ui-tag>","props":{"label":"'Label'","isSelected":"false","showIconWhenSelected":"true"}},{"name":"Input","template":"<ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" [isSelected]=\"true\" showIconWhenSelected=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" readOnly=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Folder\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Assessment\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Sparkle-in-line\" showBadge=\"true\" notificationsAmount=\"0\" allowClose=\"true\"></ui-tag>","props":{"label":"'Label'","allowClose":"true"}},{"name":"WithNotificationsBadge","template":"<ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" [isSelected]=\"true\" showIconWhenSelected=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" readOnly=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Folder\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Assessment\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Sparkle-in-line\" showBadge=\"true\" notificationsAmount=\"0\" allowClose=\"true\"></ui-tag>","props":{"label":"'Label'","allowClose":"true","showBadge":"true","notificationsAmount":"5"}},{"name":"InputWithIcon","template":"<ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" [isSelected]=\"true\" showIconWhenSelected=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" readOnly=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Folder\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Assessment\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Sparkle-in-line\" showBadge=\"true\" notificationsAmount=\"0\" allowClose=\"true\"></ui-tag>","props":{"label":"'Label'","icon":"'Assessment'","allowClose":"true"}},{"name":"ReadOnly","template":"<ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" [isSelected]=\"true\" showIconWhenSelected=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" readOnly=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Folder\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Assessment\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Sparkle-in-line\" showBadge=\"true\" notificationsAmount=\"0\" allowClose=\"true\"></ui-tag>","props":{"label":"'Label'","readOnly":"true"}},{"name":"TruncatedLabel","template":"<ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" [isSelected]=\"true\" showIconWhenSelected=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" readOnly=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Folder\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Assessment\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" label=\"Long label to show how truncated text looks like\" icon=\"Sparkle-in-line\" showBadge=\"true\" notificationsAmount=\"0\" allowClose=\"true\"></ui-tag>","props":{}},{"name":"Disabled","template":"<ui-tag applicationTheme=\"${_theme}\" isDisabled=\"true\" label=\"Suggestion\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" isDisabled=\"true\" label=\"Filter(Selected)\" [isSelected]=\"true\" showIconWhenSelected=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" isDisabled=\"true\" label=\"Input Without Icon\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" isDisabled=\"true\" label=\"Read-only\" readOnly=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" isDisabled=\"true\" label=\"Suggestion With Icon\" icon=\"Folder\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" isDisabled=\"true\" label=\"Input With Icon\" icon=\"Assessment\" allowClose=\"true\"></ui-tag>\n <ui-tag applicationTheme=\"${_theme}\" isDisabled=\"true\" label=\"With Notifications Badge\" showBadge=\"true\" notificationsAmount=\"5\"></ui-tag>","props":{}}],"documentation":"## How to use\n\nTo use the Tag component, you need to import the `TagComponentModule` in your module:\n\n```typescript\nimport { TagComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n TagComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-tag \n label=\"Category\"\n [icon]=\"'Folder'\"\n [isSelected]=\"false\"\n [allowClose]=\"true\"\n applicationTheme=\"light\"\n (closeClicked)=\"onTagClose()\"\n (tagClicked)=\"onTagClick()\">\n</ui-tag>\n```\n\nThe tag component can be used for filtering, selections, or input chips.","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","queryGuide":{"roles":[],"ariaAttributes":["aria-label","aria-required"],"dataTestIds":["tag--container"],"materialComponents":[],"childUIComponents":["ui-icon","ui-badge"],"suggestedQueries":["screen.getByLabelText('label text')","screen.getByTestId('tag--container')"]},"filePath":"components/tag/tag.component.ts","supportsTheme":true,"lastModified":1775743558172.837},"toggle":{"name":"ToggleComponent","selector":"ui-toggle","category":"toggle","description":"To use the Toggle component, you need to import the `ToggleComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/toggle","moduleName":"ToggleComponentModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"selected","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"The `selected` property determines the current state of the toggle switch.","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"The `disabled` property determines whether the toggle switch is disabled.","isSignal":false},{"name":"label","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Toggle label","isSignal":false},{"name":"message","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"Message","isSignal":false},{"name":"maxWidth","type":"number \| undefined","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"Max width of the toggle container","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"ariaLabel","type":"string","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"A string representing the ARIA label for accessibility.\nThis label is used to provide an accessible name for the input element.","isSignal":false},{"name":"ariaRequired","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false},{"name":"preventClick","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"disable/enable click on toggle","isSignal":false},{"name":"loading","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"The loading state","isSignal":false},{"name":"ariaDescribedby","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"A string representing the ARIA requirement for accessibility.\nThis attribute is used to indicate whether an input field is required for form submission.","isSignal":false}],"outputs":[{"name":"toggle","eventType":"boolean","alias":null,"description":"The `toggle` event is triggered when the state of the toggle switch changes. It returns the new state.","isSignal":false}],"module":{"name":"ToggleComponentModule","imports":["CommonModule","MatTooltipModule","EllipseTextDirective","MatInputModule","UiTranslatePipe","IconComponentModule","SpinnerComponentModule"],"exports":["ToggleComponent"],"declarations":["ToggleComponent"],"providers":[]},"types":{"typeAliases":[{"name":"RegisterFn","value":"(value: any) => void"}],"interfaces":[],"enums":[]},"examples":[{"name":"Default","template":"<span>Switch Value: {{form.controls.switch.value \| json}}</span>\n <form [formGroup]=\"form\">\n <ui-toggle formControlName=\"switch\" applicationTheme=\"${_theme}\"></ui-toggle>\n </form>","props":{"selected":"true"}},{"name":"Selected","template":"<span>Switch Value: {{form.controls.switch.value \| json}}</span>\n <form [formGroup]=\"form\">\n <ui-toggle formControlName=\"switch\" applicationTheme=\"${_theme}\"></ui-toggle>\n </form>","props":{"selected":"true"}},{"name":"DisabledDefault","template":"<span>Switch Value: {{form.controls.switch.value \| json}}</span>\n <form [formGroup]=\"form\">\n <ui-toggle formControlName=\"switch\" applicationTheme=\"${_theme}\"></ui-toggle>\n </form>","props":{"disabled":"true"}},{"name":"DisabledSelected","template":"<span>Switch Value: {{form.controls.switch.value \| json}}</span>\n <form [formGroup]=\"form\">\n <ui-toggle formControlName=\"switch\" applicationTheme=\"${_theme}\"></ui-toggle>\n </form>","props":{"disabled":"true","selected":"true"}},{"name":"WithReactiveForm","template":"<span>Switch Value: {{form.controls.switch.value \| json}}</span>\n <form [formGroup]=\"form\">\n <ui-toggle formControlName=\"switch\" applicationTheme=\"${_theme}\"></ui-toggle>\n </form>","props":{"label":"'Label'"}}],"documentation":"## How to use\n\nTo use the Toggle component, you need to import the `ToggleComponentModule` in your module:\n\n```typescript\nimport { ToggleComponentModule } from '@testgorilla/tgo-ui';\n\n@NgModule({\n imports: [\n // ... other imports\n ToggleComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-toggle\n [selected]=\"isToggleSelected\"\n [label]=\"'Toggle Switch'\"\n (selectedChange)=\"handleToggleChange($event)\"\n applicationTheme=\"light\">\n</ui-toggle>\n```","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","queryGuide":{"roles":["switch"],"ariaAttributes":["aria-label","aria-required","aria-labelledby","aria-describedby","aria-checked"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon","ui-spinner"],"suggestedQueries":["screen.getByRole('switch')","screen.getByLabelText('label text')"]},"filePath":"components/toggle/toggle.component.ts","supportsTheme":true,"lastModified":1775743558173.837},"tooltip":{"name":"TooltipComponent","selector":"ui-tooltip","category":"tooltip","description":"To use the Tooltip component, you need to import the `TooltipComponentModule` in your module:","importPath":"@testgorilla/tgo-ui/components/tooltip","moduleName":"TooltipComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"position","type":"TooltipPositionType","defaultValue":"TooltipPositionType.TOP","required":false,"alias":null,"transform":null,"description":"Allows the user to define the position of the tooltip relative to the parent element.","isSignal":false},{"name":"disabled","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":"booleanAttribute","description":"Disables the display of the tooltip.","isSignal":false},{"name":"message","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"The message to be displayed in the tooltip.","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"labelForDefinition","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"The label for definition variant","isSignal":false},{"name":"definitionTooltipSize","type":"TooltipDefinitionSize","defaultValue":"'medium'","required":false,"alias":null,"transform":null,"description":"Defines size for definition variant","isSignal":false},{"name":"variant","type":"TooltipVariant","defaultValue":"'basic'","required":false,"alias":null,"transform":null,"description":"Variant render tooltip","isSignal":false}],"outputs":[],"module":{"name":"TooltipComponentModule","imports":["MatTooltipModule","CommonModule","TooltipTemplateDirective","EllipseTextDirective","UiTranslatePipe"],"exports":["TooltipComponent","TooltipTemplateDirective"],"declarations":["TooltipComponent"],"providers":["{ provide: 'TooltipComponentToken', useValue: TooltipComponent }"]},"types":{"typeAliases":[{"name":"TooltipVariant","value":"'basic' \| 'definition'"},{"name":"TooltipDefinitionSize","value":"'small' \| 'medium' \| 'large'"}],"interfaces":[],"enums":[{"name":"TooltipPositionType","members":[{"name":"TOP","value":"'top'"},{"name":"BOTTOM","value":"'bottom'"},{"name":"LEFT","value":"'left'"},{"name":"RIGHT","value":"'right'"}]}]},"examples":[{"name":"Default","template":"<div class=\"example-container\">\n <ui-tooltip [position]=\"position\" [message]=\"message\" applicationTheme=\"${_theme}\">\n <ui-button\n data-testid=\"tooltip\"\n type=\"secondary\"\n [justIcon]=\"true\"\n iconName=\"Help\"\n label=\"secondary\"\n matTooltipClass=\"${_theme}\"\n applicationTheme=\"${_theme}\"\n ></ui-button>\n </ui-tooltip>\n </div>","props":{"message":"'Tooltip message for default tooltip'","position":"TooltipPositionType.TOP"}},{"name":"WithBottom","template":"<div class=\"example-container\">\n <ui-tooltip [position]=\"position\" [message]=\"message\" applicationTheme=\"${_theme}\">\n <ui-button\n data-testid=\"tooltip\"\n type=\"secondary\"\n [justIcon]=\"true\"\n iconName=\"Help\"\n label=\"secondary\"\n size=\"small\"\n matTooltipClass=\"${_theme}\"\n applicationTheme=\"${_theme}\"\n ></ui-button>\n </ui-tooltip>\n </div>","props":{"message":"'Message for bottom tooltip'","position":"TooltipPositionType.TOP"}},{"name":"WithRight","template":"<div class=\"example-container\">\n <ui-tooltip [position]=\"position\" [message]=\"message\" applicationTheme=\"${_theme}\">\n <ui-button\n data-testid=\"tooltip\"\n type=\"secondary\"\n [justIcon]=\"true\"\n iconName=\"Help\"\n label=\"secondary\"\n size=\"small\"\n matTooltipClass=\"${_theme}\"\n applicationTheme=\"${_theme}\"\n ></ui-button>\n </ui-tooltip>\n </div>","props":{"message":"'Message for bottom tooltip'","position":"TooltipPositionType.RIGHT"}},{"name":"WithLeft","template":"<div class=\"example-container\">\n <ui-tooltip [position]=\"position\" [message]=\"message\" applicationTheme=\"${_theme}\">\n <ui-button\n data-testid=\"tooltip\"\n type=\"secondary\"\n [justIcon]=\"true\"\n iconName=\"Help\"\n label=\"secondary\"\n size=\"small\"\n matTooltipClass=\"${_theme}\"\n applicationTheme=\"${_theme}\"\n ></ui-button>\n </ui-tooltip>\n </div>","props":{"message":"'Message for bottom tooltip'","position":"TooltipPositionType.LEFT"}},{"name":"WithDirective","template":"<div class=\"example-container left\">\n <ui-button\n data-testid=\"tooltip\"\n type=\"primary\"\n iconName=\"Help\"\n iconPosition=\"left\"\n label=\"More Help\"\n [matTooltip]=\"message\"\n matTooltipPosition=\"below\"\n matTooltipClass=\"${_theme}\"\n applicationTheme=\"${_theme}\"\n ></ui-button>\n </div>\n <div class=\"example-container\">\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie est ipsum, nec <a [style.color]=\"'${linkColor}'\" matTooltipClass=\"${_theme}\" href=\"#\" matTooltipPosition=\"above\" matTooltip=\"Tooltip for link\">lobortis neque lacinia</a> ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In efficitur urna quis ultricies mattis. Cras quis euismod urna. Duis facilisis ac mauris in gravida.</p>\n </div>","props":{"message":"'Message for bottom tooltip'","position":"TooltipPositionType.LEFT"}},{"name":"WithLongTextLeft","template":"<div class=\"example-container\">\n <ui-tooltip [position]=\"position\" [message]=\"message\" applicationTheme=\"${_theme}\">\n <ui-button\n data-testid=\"tooltip\"\n type=\"secondary\"\n [justIcon]=\"true\"\n iconName=\"Help\"\n label=\"secondary\"\n size=\"small\"\n matTooltipClass=\"${_theme}\"\n applicationTheme=\"${_theme}\"\n ></ui-button>\n </ui-tooltip>\n </div>","props":{"message":"'Message for bottom tooltip'","position":"TooltipPositionType.LEFT"}},{"name":"Templ","template":"<div class=\"example-container\">\n <ui-button\n data-testid=\"tooltip\"\n type=\"secondary\"\n [justIcon]=\"true\"\n iconName=\"Help\"\n label=\"secondary\"\n size=\"small\"\n [uiTooltipTemplate]=\"template\"\n [tooltipPosition]=\"'right'\"\n applicationTheme=\"${_theme}\">\n </ui-button>\n\n <ng-template #template>\n <div style=\"display: flex; flex-direction: column;\">\n <ui-button [label]=\"'Test'\"></ui-button>\n </div>\n </ng-template>\n </div>","props":{"definitionTooltipSize":"'medium'","message":"'Tooltip message'","position":"TooltipPositionType.LEFT","variant":"'definition'","labelForDefinition":"\"Long label that should go to the tooltip message when it's get truncated. Just shrink the screen to see it in action\""}},{"name":"Definition","template":"<div><ui-tooltip data-testid=\"tooltip\" [variant]=\"variant\" [labelForDefinition]=\"labelForDefinition\" [message]=\"message\" [definitionTooltipSize]=\"definitionTooltipSize\"></ui-tooltip></div>","props":{"definitionTooltipSize":"'medium'","message":"'Tooltip message'","position":"TooltipPositionType.LEFT","variant":"'definition'","labelForDefinition":"\"Long label that should go to the tooltip message when it's get truncated. Just shrink the screen to see it in action\""}}],"documentation":"## How to use\n\nTo use the Tooltip component, you need to import the `TooltipComponentModule` in your module:\n\n```typescript\nimport { TooltipComponentModule } from '@testgorilla/tgo-ui/components/tooltip';\n\n@NgModule({\n imports: [\n // ... other imports\n TooltipComponentModule\n ],\n // ... declarations, providers, etc.\n})\nexport class YourModule { }\n```\n\nThen you can use the component in your templates:\n\n```html\n<ui-tooltip\n position=\"top\"\n message=\"This is a tooltip message\"\n applicationTheme=\"light\">\n <button>Hover me</button>\n</ui-tooltip>\n```\n\nYou can also use the directive form:\n\n```html\n<button \n matTooltip=\"This is a tooltip message\" \n matTooltipPosition=\"above\"\n matTooltipClass=\"light\">\n Hover me\n</button>\n```\n\nFor more complex content, you can use a template:\n\n```html\n<button [uiTooltipTemplate]=\"myTemplate\" [tooltipPosition]=\"'right'\">\n Hover for complex tooltip\n</button>\n\n<ng-template #myTemplate>\n <div>Custom tooltip content</div>\n <button>With interactive elements</button>\n</ng-template>\n```\n\nThe tooltip component supports different positions and can contain any HTML content.","template":"@if (variant === 'definition') {\n <div\n [tabindex]=\"0\"\n class=\"definition-tooltip\"\n [attr.aria-label]=\"labelForDefinition + ', ' + ('TOOLTIP.DETAILS' \| uiTranslate \| async) + ':' + message\"\n style=\"position: relative\"\n [tooltipPosition]=\"position\"\n [uiTooltipTemplate]=\"dif\"\n >\n <span\n class=\"label-definition-outside\"\n [ngClass]=\"'tooltip-size-' + definitionTooltipSize\"\n uiEllipseText\n (onChangeTextState)=\"isLabelEllipse = $event\"\n >\n {{ labelForDefinition }}\n </span>\n </div>\n\n <ng-template #dif>\n <div [attr.aria-label]=\"labelForDefinition + ' ' + message\"></div>\n <div class=\"label-definition-inner\" ngIf=\"isLabelEllipse\">\n {{ labelForDefinition }}\n </div>\n <div class=\"text-definition\">\n {{ message }}\n </div>\n </ng-template>\n} @else {\n <div\n [matTooltip]=\"message\"\n [matTooltipDisabled]=\"disabled\"\n [matTooltipPosition]=\"matPosition\"\n [matTooltipClass]=\"applicationTheme\"\n [attr.aria-label]=\"message\"\n tabindex=\"0\"\n style=\"position: relative\"\n >\n <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">{{ message }}</div>\n <ng-content></ng-content>\n @if (templateRef) {\n <div [class]=\"'template-tooltip'\">\n <ng-container ngTemplateOutlet=\"templateRef\"></ng-container>\n </div>\n }\n </div>\n}\n","queryGuide":{"roles":[],"ariaAttributes":["aria-label","aria-live"],"dataTestIds":[],"materialComponents":[],"childUIComponents":[],"suggestedQueries":["screen.getByLabelText('label text')"]},"filePath":"components/tooltip/tooltip.component.ts","supportsTheme":true,"lastModified":1775743558174.837},"universal-skills":{"name":"UniversalSkillsReportComponent","selector":"ui-universal-skills-report","category":"universal-skills","description":"UniversalSkillsReportComponent component","importPath":"@testgorilla/tgo-ui/components/universal-skills","moduleName":"UniversalSkillsReportComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"skillAreaDataList","type":"SkillAreaData[]","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"The list of items to be used","isSignal":false}],"outputs":[],"module":{"name":"","imports":[],"exports":[],"declarations":[],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"","template":"<div ngFor=\"let skillAreaGroup of skillAreaGroupMap \| keyvalue\" class=\"universal-skills-report\">\n <section class=\"title-and-info\">\n <h4>{{ skillAreaGroup.value.title \| uiTranslate \| async }}</h4>\n <span>{{ skillAreaGroup.value.description \| uiTranslate \| async }}</span>\n </section>\n\n <section class=\"accordion-items\">\n <ui-accordion\n ngFor=\"let skillAreaData of skillAreaGroup?.value?.skillAreaList\"\n class=\"universal-skills-accordion\"\n label=\"-\"\n [allowCustomHeader]=\"true\"\n >\n <div customHeader class=\"custom-header\">\n <h4 class=\"custom-header-subtitle\">\n {{ translationContext + 'SKILL_AREA_TYPES.' + skillAreaData.skillAreaName + '.TITLE' \| uiTranslate \| async }}\n </h4>\n\n <div class=\"inner-container\">\n <ui-badge\n class=\"percentile-scoring-badge\"\n [label]=\"\n (skillAreaData.percentileScoring \| memoizeFunc: getScoreBadgeLabel : this \| uiTranslate \| async) \|\|\n 'neutral'\n \"\n [rebrandColor]=\"skillAreaData.percentileScoring \| memoizeFunc: getScoreBadgeColor : this\"\n [applicationTheme]=\"'light'\"\n ></ui-badge>\n\n <h5 class=\"percentile-quantity\">\n {{ skillAreaData?.percentileScoring }}\n <sup class=\"percentile-suffix\">{{\n skillAreaData.percentileScoring \| ordinalSuffix \| uiTranslate \| async\n }}</sup>\n {{ translationContext + 'PERCENTILE' \| uiTranslate \| async }}\n </h5>\n\n <ui-progress-bar\n class=\"percentile-scoring-bar\"\n mode=\"determinate\"\n [progress]=\"skillAreaData.percentileScoring\"\n ></ui-progress-bar>\n </div>\n </div>\n\n <div class=\"content-container\">\n <p class=\"skill-description\">\n {{\n translationContext + 'SKILL_AREA_TYPES.' + skillAreaData.skillAreaName + '.DESCRIPTION'\n \| uiTranslate\n \| async\n }}\n </p>\n\n <h5>\n {{ skillAreaData.percentileScoring \| memoizeFunc: getScoreBadgeLabel : this \| uiTranslate \| async }} score\n </h5>\n\n <div class=\"inner-container\">\n <p>\n {{\n translationContext +\n 'SKILL_AREA_TYPES.' +\n skillAreaData.skillAreaName +\n '.' +\n ([skillAreaData.percentileScoring, true] \| memoizeFunc: checkScoreClassification : this) +\n '.GENERAL'\n \| uiTranslate\n \| async\n }}\n </p>\n </div>\n\n <div class=\"inner-container\">\n <p>\n {{\n translationContext +\n 'SKILL_AREA_TYPES.' +\n skillAreaData.skillAreaName +\n '.' +\n ([skillAreaData.percentileScoring, true] \| memoizeFunc: checkScoreClassification : this) +\n '.WORK_ENVIRONMENT'\n \| uiTranslate\n \| async\n }}\n </p>\n </div>\n\n <div class=\"inner-container\">\n <p>\n {{\n translationContext +\n 'SKILL_AREA_TYPES.' +\n skillAreaData.skillAreaName +\n '.' +\n ([skillAreaData.percentileScoring, true] \| memoizeFunc: checkScoreClassification : this) +\n '.RECOMMENDATIONS'\n \| uiTranslate\n \| async\n }}\n </p>\n </div>\n </div>\n </ui-accordion>\n </section>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-accordion","ui-badge","ui-progress-bar"],"suggestedQueries":[]},"filePath":"components/universal-skills/universal-skills.component.ts","supportsTheme":true,"lastModified":1775743558174.837},"spider-charts":{"name":"UniversalSkillsSpiderChartsComponent","selector":"ui-universal-skills-spider-charts","category":"spider-charts","description":"UniversalSkillsSpiderChartsComponent component","importPath":"@testgorilla/tgo-ui/components/spider-charts","moduleName":"UniversalSkillsSpiderChartsComponentModule","standalone":false,"changeDetection":"OnPush","inputs":[{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false},{"name":"skillAreaDataList","type":"SkillAreaData[]","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"The list of items to be used","isSignal":false},{"name":"loading","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Defines if the component is loading","isSignal":false},{"name":"size","type":"'small' \| 'large'","defaultValue":"'large'","required":false,"alias":null,"transform":null,"description":"Defines the size of the spider chart","isSignal":false}],"outputs":[],"module":{"name":"","imports":[],"exports":[],"declarations":[],"providers":[]},"types":{"typeAliases":[],"interfaces":[],"enums":[]},"examples":[],"documentation":"","template":"@for (spiderChartData of skillAreaSpiderChartData; track spiderChartData) {\n <ui-accordion\n class=\"universal-skills-spider-charts\"\n [label]=\"(spiderChartData.title \| uiTranslate \| async) \|\| ''\"\n variant=\"filter\"\n >\n <ui-spider-chart\n [spiderChartData]=\"spiderChartData.spiderChartData\"\n [loading]=\"loading\"\n [size]=\"size\"\n ></ui-spider-chart>\n </ui-accordion>\n @if ($index < skillAreaSpiderChartData.length - 1) {\n <ui-divider class=\"universal-skills-spider-charts-divider\" size=\"small\"></ui-divider>\n }\n}\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-accordion","ui-spider-chart","ui-divider"],"suggestedQueries":[]},"filePath":"components/spider-charts/spider-charts.component.ts","supportsTheme":true,"lastModified":1775743558174.837},"validation-error":{"name":"ValidationErrorComponent","selector":"ui-validation-error","category":"validation-error","description":"ValidationErrorComponent component","importPath":"@testgorilla/tgo-ui/components/validation-error","moduleName":"ValidationErrorModule","standalone":false,"changeDetection":"Default","inputs":[{"name":"ngControl","type":"NgControl","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"touchedOn","type":"boolean","defaultValue":"true","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"errorMessage","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"label","type":"string \| undefined \| null","defaultValue":null,"required":false,"alias":null,"transform":null,"description":"","isSignal":false},{"name":"applicationTheme","type":"ApplicationTheme","defaultValue":"'light'","required":false,"alias":null,"transform":null,"description":"Defines the application theme","isSignal":false}],"outputs":[],"module":{"name":"ValidationErrorModule","imports":["CommonModule","IconComponentModule","UiTranslatePipe"],"exports":["ValidationErrorComponent"],"declarations":["ValidationErrorComponent"],"providers":[]},"types":{"typeAliases":[{"name":"errorType","value":"'maxlength' \| 'minlength' \| 'min' \| 'max'"}],"interfaces":[],"enums":[]},"examples":[],"documentation":"","template":"<div class=\"errors\" ngIf=\"ngControl?.hasError('maxlength')\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{\n translationContextErrors + 'MAX_LENGTH' \| uiTranslate: { maxlength: getErrorValue('maxlength') } \| async\n }}</span>\n</div>\n\n<div class=\"errors\" ngIf=\"ngControl?.hasError('minlength')\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{\n translationContextErrors + 'MIN_LENGTH' \| uiTranslate: { maxlength: getErrorValue('minlength') } \| async\n }}</span>\n</div>\n\n<div class=\"errors\" ngIf=\"ngControl?.hasError('min')\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{ translationContextErrors + 'MIN' \| uiTranslate: { min: getErrorValue('min') } \| async }}</span>\n</div>\n\n<div class=\"errors\" ngIf=\"ngControl?.hasError('max')\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{ translationContextErrors + 'MAX' \| uiTranslate: { max: getErrorValue('max') } \| async }}</span>\n</div>\n\n<div class=\"errors\" ngIf=\"ngControl?.hasError('required') && (touchedOn ? ngControl?.touched : true)\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{ translationContextErrors + (label ? 'REQUIRED_FIELD' : 'REQUIRED') \| uiTranslate: { label } \| async }}</span>\n</div>\n\n<div class=\"errors\" ngIf=\"ngControl?.hasError('email')\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{ translationContextErrors + 'EMAIL_INCORRECT' \| uiTranslate \| async }}</span>\n</div>\n\n<div class=\"custom-errors\" *ngIf=\"errorMessage\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{ errorMessage }}</span>\n</div>\n","queryGuide":{"roles":[],"ariaAttributes":[],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-icon"],"suggestedQueries":[]},"filePath":"components/validation-error/validation-error.component.ts","supportsTheme":true,"lastModified":1775743558175.837},"write-with-ai":{"name":"WriteWithAiComponent","selector":"ui-write-with-ai","category":"components","description":"WriteWithAiComponent component","importPath":"@testgorilla/tgo-ui/components/write-with-ai","moduleName":"WriteWithAiComponentModule","standalone":true,"changeDetection":"OnPush","inputs":[{"name":"value","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"standalone","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"defaultOpen","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"fieldLabel","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"header","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"placeholder","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"promptValue","type":"string","defaultValue":"''","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"tags","type":"WriteWithAiTagOption[]","defaultValue":"[]","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"status","type":"WriteWithAiStatus","defaultValue":"'idle'","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"subheader","type":"string \| undefined","defaultValue":"undefined","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"llmConfig","type":"WriteWithAiLlmConfig \| undefined","defaultValue":"undefined","required":false,"alias":null,"transform":null,"description":"","isSignal":true},{"name":"fullHeight","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Layout: make the inner field stretch to fill its container height.","isSignal":true},{"name":"borderless","type":"boolean","defaultValue":"false","required":false,"alias":null,"transform":null,"description":"Layout: render the inner field without a visible border.","isSignal":true},{"name":"metadata","type":"Record<string, unknown>","defaultValue":"{}","required":false,"alias":null,"transform":null,"description":"Opaque host metadata emitted with promptSubmit for backend integrations.","isSignal":true}],"outputs":[{"name":"valueChange","eventType":"string","alias":null,"description":"","isSignal":true},{"name":"promptChange","eventType":"string","alias":null,"description":"","isSignal":true},{"name":"promptSubmit","eventType":"WriteWithAiSubmitEvent","alias":null,"description":"","isSignal":true},{"name":"cancelPending","eventType":"void","alias":null,"description":"","isSignal":true},{"name":"acceptResult","eventType":"void","alias":null,"description":"","isSignal":true},{"name":"requestRefine","eventType":"void","alias":null,"description":"","isSignal":true}],"module":{"name":"WriteWithAiComponentModule","imports":["WriteWithAiComponent"],"exports":["WriteWithAiComponent"],"declarations":[],"providers":[]},"types":{"typeAliases":[{"name":"WriteWithAiStatus","value":"'idle' \| 'loading' \| 'success' \| 'error'"}],"interfaces":[{"name":"WriteWithAiTagOption","properties":[{"name":"id","type":"number","optional":false},{"name":"label","type":"string","optional":false},{"name":"description","type":"string","optional":true}]},{"name":"WriteWithAiLlmConfig","properties":[{"name":"default","type":"boolean","optional":true},{"name":"context","type":"string","optional":true},{"name":"apiKey","type":"string","optional":true},{"name":"model","type":"string","optional":true},{"name":"provider","type":"'openai' \| 'openai-compatible' \| 'gemini'","optional":true},{"name":"endpoint","type":"string","optional":true},{"name":"baseUrl","type":"string","optional":true}]},{"name":"WriteWithAiSubmitEvent","properties":[{"name":"prompt","type":"string","optional":false},{"name":"content","type":"string","optional":false},{"name":"metadata","type":"Record<string, unknown>","optional":false}]}],"enums":[]},"examples":[],"documentation":"","template":"<div\n class=\"write-with-ai\"\n [class.write-with-ai--standalone]=\"standalone()\"\n [class.write-with-ai--full-height]=\"fullHeight()\"\n>\n @if (!standalone()) {\n <div class=\"write-with-ai__host\">\n <ui-field\n [label]=\"fieldLabel() \|\| (translationContext + 'FIELD_LABEL' \| uiTranslate \| async)!\"\n type=\"textarea\"\n [showBottomContent]=\"false\"\n [fullHeight]=\"fullHeight()\"\n [borderless]=\"borderless()\"\n [disabled]=\"cvaDisabled()\"\n [ngModel]=\"effectiveValue()\"\n (ngModelChange)=\"handleValueInput($event)\"\n ></ui-field>\n <ui-button\n class=\"write-with-ai__cta\"\n variant=\"ghost-ai\"\n size=\"small\"\n [label]=\"(translationContext + 'AI_ASSIST' \| uiTranslate \| async)!\"\n iconName=\"Sparkle-in-line\"\n iconPosition=\"left\"\n [disabled]=\"isPanelVisible() \|\| cvaDisabled()\"\n (buttonClickEvent)=\"togglePanel()\"\n ></ui-button>\n </div>\n }\n\n @if (isPanelVisible()) {\n <section\n class=\"write-with-ai__panel\"\n [class.write-with-ai__panel--loading]=\"effectiveStatus() === 'loading'\"\n role=\"region\"\n [attr.aria-label]=\"(translationContext + 'AI_WRITING_ASSISTANT' \| uiTranslate \| async)!\"\n >\n <header class=\"write-with-ai__panel-header\">\n <div class=\"write-with-ai__panel-heading\">\n <div class=\"write-with-ai__title-row\">\n @if (effectiveStatus() !== 'loading') {\n <ui-icon class=\"write-with-ai__title-icon\" name=\"Sparkle-in-line\" color=\"ai\"></ui-icon>\n }\n <h4 class=\"write-with-ai__title\">\n {{ header() \|\| (translationContext + 'HEADER' \| uiTranslate \| async) }}\n </h4>\n </div>\n @if (subheader()) {\n <p class=\"write-with-ai__subheader\">{{ subheader() }}</p>\n }\n </div>\n @if (!standalone()) {\n <ui-button\n variant=\"icon-button\"\n iconName=\"Close\"\n size=\"small\"\n [tooltip]=\"(translationContext + 'CLOSE' \| uiTranslate \| async)!\"\n [ariaLabel]=\"(translationContext + 'CLOSE_AI_ASSISTANT' \| uiTranslate \| async)!\"\n (buttonClickEvent)=\"togglePanel()\"\n ></ui-button>\n }\n </header>\n\n @if (effectiveStatus() === 'idle') {\n <div class=\"write-with-ai__prompt\">\n <ui-prompt\n [ngModel]=\"promptModelData()\"\n (ngModelChange)=\"handlePromptModelChange($event)\"\n [tags]=\"promptTags()\"\n [placeholder]=\"placeholder() \|\| (translationContext + 'PLACEHOLDER' \| uiTranslate \| async)!\"\n [showSendButton]=\"true\"\n (promptData)=\"handlePromptSubmit($event)\"\n ></ui-prompt>\n </div>\n }\n\n @if (statusConfig(); as cfg) {\n <ui-alert-banner\n [alertType]=\"cfg.alertType\"\n alertVariant=\"callout\"\n [message]=\"(cfg.messageKey \| uiTranslate \| async)!\"\n [includeDismissButton]=\"false\"\n [isLoading]=\"cfg.variant === 'loading'\"\n [hasIcon]=\"cfg.variant !== 'loading'\"\n [actions]=\"cfg.actions\"\n [isFullWidth]=\"true\"\n ></ui-alert-banner>\n }\n\n <div class=\"write-with-ai__caveat\">\n <ui-ai-caveat></ui-ai-caveat>\n </div>\n </section>\n }\n</div>\n","queryGuide":{"roles":["region"],"ariaAttributes":["aria-label"],"dataTestIds":[],"materialComponents":[],"childUIComponents":["ui-field","ui-button","ui-icon","ui-prompt","ui-alert-banner","ui-ai-caveat"],"suggestedQueries":["screen.getByRole('region')","screen.getByLabelText('label text')"]},"filePath":"components/write-with-ai/write-with-ai.component.ts","supportsTheme":false,"lastModified":1775743558175.837}}}