fix(demo): correct templateRef option in icon dropdown for inputCardG…

…roup api (#9054)

projects/cdk/utils/browser/is-safari.ts

@@ -1,3 +1,4 @@
+// TODO: Drop change to Document in v5
 export function tuiIsSafari({ownerDocument: doc}: Element): boolean {
     const win = doc?.defaultView as unknown as Window & {safari?: any};
 

projects/core/components/loader/loader.component.ts

@@ -1,9 +1,8 @@
-import {DOCUMENT, NgIf} from '@angular/common';
+import {NgIf} from '@angular/common';
 import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core';
 import {TUI_IS_IOS} from '@taiga-ui/cdk/tokens';
 import {tuiIsSafari} from '@taiga-ui/cdk/utils/browser';
 import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
-import {tuiBlurNativeFocused, tuiIsNativeFocusedIn} from '@taiga-ui/cdk/utils/focus';
 import {tuiSizeBigger} from '@taiga-ui/core/utils/miscellaneous';
 import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
 import {PolymorpheusOutlet, PolymorpheusTemplate} from '@taiga-ui/polymorpheus';
@@ -23,12 +22,9 @@ import {TUI_LOADER_OPTIONS} from './loader.options';
     },
 })
 export class TuiLoader {
-    private readonly doc = inject(DOCUMENT);
-    private readonly el = tuiInjectElement();
     private readonly isIOS = inject(TUI_IS_IOS);
     private readonly options = inject(TUI_LOADER_OPTIONS);
-    protected loading = true;
-    protected readonly isApple = tuiIsSafari(this.el) || this.isIOS;
+    protected readonly isApple = tuiIsSafari(tuiInjectElement()) || this.isIOS;
 
     @Input()
     public size = this.options.size;
@@ -42,29 +38,11 @@ export class TuiLoader {
     @Input()
     public textContent: PolymorpheusContent;
 
-    @Input()
-    public set showLoader(value: boolean) {
-        // @bad TODO: https://github.com/angular/angular/issues/32083 think of a better way
-        if (value && this.focused) {
-            tuiBlurNativeFocused(this.doc);
-        }
-
-        this.loading = value;
-    }
-
-    protected get hasOverlay(): boolean {
-        return this.overlay && this.loading;
-    }
-
-    protected get hasText(): boolean {
-        return !!this.textContent;
-    }
+    // TODO: Drop alias in v5
+    @Input('showLoader')
+    public loading = true;
 
     protected get isHorizontal(): boolean {
         return !tuiSizeBigger(this.size);
     }
-
-    protected get focused(): boolean {
-        return tuiIsNativeFocusedIn(this.el);
-    }
 }

projects/core/components/loader/loader.template.html

@@ -1,7 +1,7 @@
 <fieldset
     class="t-content"
     [attr.inert]="loading || null"
-    [class.t-content_has-overlay]="hasOverlay"
+    [class.t-content_has-overlay]="overlay && loading"
     [class.t-content_loading]="loading"
     [disabled]="loading && !isApple"
 >
@@ -29,7 +29,7 @@
     </svg>
 
     <div
-        *ngIf="hasText"
+        *ngIf="textContent"
         automation-id="tui-loader__text"
         class="t-text"
         [class.t-text_horizontal]="isHorizontal"

projects/demo/src/modules/components/input-card-group/index.ts

@@ -34,11 +34,12 @@ export default class PageComponent extends AbstractExampleTuiInteractive {
         'Custom labels',
     ];
 
-    protected readonly cards: Record<string, string> = {
+    protected readonly cards: Record<string, PolymorpheusContent | string> = {
         common: 'https://ng-web-apis.github.io/dist/assets/images/common.svg',
         universal: 'https://ng-web-apis.github.io/dist/assets/images/universal.svg',
         mutation:
             'https://ng-web-apis.github.io/dist/assets/images/mutation-observer.svg',
+        TemplateRef: '',
     };
 
     protected iconVariants: readonly string[] = Object.keys(this.cards);
@@ -80,6 +81,8 @@ export default class PageComponent extends AbstractExampleTuiInteractive {
     protected getContentVariants(
         template: PolymorpheusContent,
     ): readonly PolymorpheusContent[] | null {
-        return [...this.iconVariants, template];
+        this.cards['TemplateRef'] = template;
+
+        return [...this.iconVariants];
     }
 }