();\n\n public ngAfterViewInit(): void {\n this.parseParams(this.activatedRoute.snapshot.queryParams);\n }\n\n public onValueChange(value: T): void {\n this.value = value;\n this.valueChange.emit(value);\n this.setQueryParam(value);\n }\n\n public emitEvent(event: unknown): void {\n console.info('emitEvent', event);\n\n const alert =\n !event || event?.toString() === '[object Object]'\n ? tuiInspectAny(event, 2)\n : (event as string);\n\n this.alerts.open(alert, {label: this.name}).subscribe();\n }\n\n private clearBrackets(value: string): string {\n return value.replaceAll(/[()[\\]]/g, '');\n }\n\n private parseParams(params: Params): void {\n const name = this.clearBrackets(this.name);\n const propertyValue: string | undefined = params[name];\n const propertyValueWithSuffix: number | string | undefined =\n params[`${name}${SERIALIZED_SUFFIX}`];\n\n if (!propertyValue && !propertyValueWithSuffix) {\n return;\n }\n\n let value =\n !!propertyValueWithSuffix && this.items\n ? this.items[propertyValueWithSuffix as number]\n : tuiCoerceValue(propertyValue);\n\n if (this.type === 'string' && tuiIsNumber(value)) {\n value = value.toString();\n }\n\n this.onValueChange(value as T);\n }\n\n private setQueryParam(value: T | boolean | number | string | null): void {\n const tree = this.urlSerializer.parse(this.locationRef.path());\n\n const isValueAvailableByKey = value instanceof Object;\n const computedValue =\n isValueAvailableByKey && this.items ? this.items.indexOf(value as T) : value;\n\n const suffix = isValueAvailableByKey ? SERIALIZED_SUFFIX : '';\n const propName = this.clearBrackets(this.name) + suffix;\n\n tree.queryParams = {\n ...tree.queryParams,\n [propName]: computedValue,\n };\n\n this.locationRef.go(this.urlStateHandler(tree));\n }\n}\n","| \n \n {{ name }}\n \n \n | \n\n \n \n \n {{ item.type }}\n \n \n \n {{ item.type }}\n \n | \n \n \n | \n\n \n \n \n \n \n {{ data | tuiInspectAny }}\n \n \n \n \n\n \n \n \n\n \n \n \n \n \n | \n","import {ClipboardModule} from '@angular/cdk/clipboard';\nimport {isPlatformServer, NgForOf, NgIf} from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n inject,\n Input,\n PLATFORM_ID,\n} from '@angular/core';\nimport {toSignal} from '@angular/core/rxjs-interop';\nimport {\n TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR,\n TUI_DOC_ICONS,\n} from '@taiga-ui/addon-doc/tokens';\nimport type {TuiRawLoaderContent} from '@taiga-ui/addon-doc/types';\nimport {tuiRawLoad} from '@taiga-ui/addon-doc/utils';\nimport type {TuiHandler} from '@taiga-ui/cdk/types';\nimport {TuiButton} from '@taiga-ui/core/components/button';\nimport {TUI_COPY_TEXTS} from '@taiga-ui/kit/tokens';\nimport {Highlight} from 'ngx-highlightjs';\nimport {BehaviorSubject, map, startWith, Subject, switchMap, timer} from 'rxjs';\n\n@Component({\n standalone: true,\n selector: 'tui-doc-code',\n imports: [ClipboardModule, Highlight, NgForOf, NgIf, TuiButton],\n templateUrl: './index.html',\n styleUrls: ['./index.less'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[style.visibility]': 'isServer ? \"hidden\" : \"visible\"',\n '[class._has-filename]': 'hasFilename',\n },\n})\nexport class TuiDocCode {\n private readonly icons = inject(TUI_DOC_ICONS);\n private readonly rawLoader$$ = new BehaviorSubject('');\n\n protected readonly isServer = isPlatformServer(inject(PLATFORM_ID));\n\n protected readonly markdownCodeProcessor: TuiHandler =\n inject(TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR);\n\n protected readonly copy$ = new Subject();\n protected readonly copyText = toSignal(\n inject(TUI_COPY_TEXTS).pipe(map(([copy]) => copy)),\n );\n\n protected readonly icon = toSignal(\n this.copy$.pipe(\n switchMap(() =>\n timer(2000).pipe(\n map(() => this.icons.copy),\n startWith(this.icons.check),\n ),\n ),\n ),\n {initialValue: this.icons.copy},\n );\n\n protected readonly processor = toSignal(\n this.rawLoader$$.pipe(\n switchMap(tuiRawLoad),\n map((value: string) => this.markdownCodeProcessor(value)),\n ),\n {initialValue: []},\n );\n\n @Input()\n public filename = '';\n\n @Input()\n public set code(code: TuiRawLoaderContent) {\n this.rawLoader$$.next(code);\n }\n\n public get hasFilename(): boolean {\n return !!this.filename;\n }\n}\n","