feat!: drop support of legacy not-chromium Edge (EdgeHTML)

projects/cdk/constants/browser.ts

@@ -1 +1,5 @@
+/**
+ * @deprecated
+ * TODO: drop support of legacy Edge (EdgeHTML) in v4.x
+ */
 export const CHROMIUM_EDGE_START_VERSION = 79;

projects/cdk/utils/browser/index.ts

@@ -1,5 +1,4 @@
 export * from './is-edge';
 export * from './is-edge-older-than';
 export * from './is-firefox';
-export * from './is-ie';
 export * from './is-safari';

projects/cdk/utils/browser/test/browsers.spec.ts

@@ -1,13 +1,8 @@
 import {tuiIsEdge} from '../is-edge';
 import {tuiIsEdgeOlderThan} from '../is-edge-older-than';
 import {tuiIsFirefox} from '../is-firefox';
-import {tuiIsIE} from '../is-ie';
 
 describe(`Browsers`, () => {
-    it(`isIE`, () => {
-        expect(tuiIsIE(`trident`)).toBe(true);
-    });
-
     it(`isEdge`, () => {
         expect(tuiIsEdge(`edge`)).toBe(true);
     });

projects/core/components/svg/svg.component.ts

@@ -10,11 +10,10 @@ import {
     SecurityContext,
 } from '@angular/core';
 import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
-import {USER_AGENT, WINDOW} from '@ng-web-apis/common';
+import {WINDOW} from '@ng-web-apis/common';
 import {
     tuiAssert,
     tuiGetDocumentOrShadowRoot,
-    tuiIsIE,
     tuiPure,
     tuiRequiredSetter,
     TuiStaticRequestService,
@@ -46,7 +45,6 @@ const FAILED_EXTERNAL_ICON = `Failed to load external SVG`;
 })
 export class TuiSvgComponent {
     private readonly src$ = new ReplaySubject<void>(1);
-    private readonly isIE = tuiIsIE(this.userAgent);
     private icon = ``;
 
     @Input()
@@ -70,7 +68,6 @@ export class TuiSvgComponent {
         private readonly staticRequestService: TuiStaticRequestService,
         @Inject(DomSanitizer) private readonly sanitizer: DomSanitizer,
         @Inject(ElementRef) private readonly elementRef: ElementRef<Element>,
-        @Inject(USER_AGENT) private readonly userAgent: string,
         @Inject(TUI_SVG_SRC_PROCESSOR)
         private readonly srcProcessor: TuiStringHandler<string>,
         @Inject(TUI_SVG_CONTENT_PROCESSOR)
@@ -111,7 +108,7 @@ export class TuiSvgComponent {
     }
 
     private get isExternal(): boolean {
-        return this.isUrl || (this.isIE && this.isUse) || this.isCrossDomain;
+        return this.isUrl || this.isCrossDomain;
     }
 
     private get isUrl(): boolean {

projects/demo/src/modules/app/customization/customization.component.ts

@@ -1,9 +1,8 @@
 import {AfterViewInit, Component, Inject, ViewChild} from '@angular/core';
 import {DomSanitizer, SafeStyle} from '@angular/platform-browser';
 import {changeDetection} from '@demo/emulate/change-detection';
-import {USER_AGENT} from '@ng-web-apis/common';
 import {TuiDocDemoComponent} from '@taiga-ui/addon-doc';
-import {TuiDestroyService, tuiIsIE, tuiIsString, tuiPure, tuiPx} from '@taiga-ui/cdk';
+import {TuiDestroyService, tuiIsString, tuiPure, tuiPx} from '@taiga-ui/cdk';
 import {TuiBrightness} from '@taiga-ui/core';
 import {Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
@@ -24,15 +23,12 @@ export class TuiCustomizationComponent implements AfterViewInit {
     @ViewChild(`demo`)
     private readonly demo?: TuiDocDemoComponent;
 
-    readonly isIE = tuiIsIE(this.userAgent);
-
     readonly change$ = new Subject<void>();
 
     constructor(
         @Inject(TuiDestroyService) private readonly destroy$: TuiDestroyService,
         @Inject(DomSanitizer) private readonly sanitizer: DomSanitizer,
         @Inject(TUI_DOC_CUSTOMIZATION_VARS) private variables: Record<string, string>,
-        @Inject(USER_AGENT) private readonly userAgent: string,
     ) {}
 
     get style(): SafeStyle {

projects/demo/src/modules/app/customization/customization.template.html

@@ -1,71 +1,68 @@
-<h2 *ngIf="isIE; else customization">Not available in Internet Explorer.</h2>
-<ng-template #customization>
-    <tui-doc-demo
-        #demo
-        [attr.style]="style"
-    >
-        <ng-content></ng-content>
-    </tui-doc-demo>
-    <tui-doc-documentation
-        *ngIf="basic; else withMode"
+<tui-doc-demo
+    #demo
+    [attr.style]="style"
+>
+    <ng-content></ng-content>
+</tui-doc-demo>
+<tui-doc-documentation
+    *ngIf="basic; else withMode"
+    class="tui-space_top-6"
+    [tuiMode]="null"
+>
+    <ng-template
+        *ngFor="let variable of keys"
+        [documentationPropertyName]="variable"
+        [documentationPropertyType]="getType(variable)"
+        [documentationPropertyValue]="getVariable(variable)"
+        (documentationPropertyValueChange)="onModelChange(variable, $event)"
+    ></ng-template>
+</tui-doc-documentation>
+<ng-template #withMode>
+    <tui-accordion
         class="tui-space_top-6"
         [tuiMode]="null"
     >
-        <ng-template
-            *ngFor="let variable of keys"
-            [documentationPropertyName]="variable"
-            [documentationPropertyType]="getType(variable)"
-            [documentationPropertyValue]="getVariable(variable)"
-            (documentationPropertyValueChange)="onModelChange(variable, $event)"
-        ></ng-template>
-    </tui-doc-documentation>
-    <ng-template #withMode>
-        <tui-accordion
-            class="tui-space_top-6"
-            [tuiMode]="null"
-        >
-            <tui-accordion-item>
-                Default
-                <tui-doc-documentation *tuiAccordionItemContent>
-                    <ng-container *ngFor="let variable of keys">
-                        <ng-template
-                            *ngIf="!isDark(variable) && !isLight(variable)"
-                            [documentationPropertyName]="variable"
-                            [documentationPropertyType]="getType(variable)"
-                            [documentationPropertyValue]="getVariable(variable)"
-                            (documentationPropertyValueChange)="onModelChange(variable, $event)"
-                        ></ng-template>
-                    </ng-container>
-                </tui-doc-documentation>
-            </tui-accordion-item>
-            <tui-accordion-item *ngIf="hasLight">
-                Light
-                <tui-doc-documentation *tuiAccordionItemContent>
-                    <ng-container *ngFor="let variable of keys">
-                        <ng-template
-                            *ngIf="isLight(variable)"
-                            [documentationPropertyName]="variable"
-                            [documentationPropertyType]="getType(variable)"
-                            [documentationPropertyValue]="getVariable(variable)"
-                            (documentationPropertyValueChange)="onModelChange(variable, $event)"
-                        ></ng-template>
-                    </ng-container>
-                </tui-doc-documentation>
-            </tui-accordion-item>
-            <tui-accordion-item *ngIf="hasLight">
-                Dark
-                <tui-doc-documentation *tuiAccordionItemContent>
-                    <ng-container *ngFor="let variable of keys">
-                        <ng-template
-                            *ngIf="isDark(variable)"
-                            [documentationPropertyName]="variable"
-                            [documentationPropertyType]="getType(variable)"
-                            [documentationPropertyValue]="getVariable(variable)"
-                            (documentationPropertyValueChange)="onModelChange(variable, $event)"
-                        ></ng-template>
-                    </ng-container>
-                </tui-doc-documentation>
-            </tui-accordion-item>
-        </tui-accordion>
-    </ng-template>
+        <tui-accordion-item>
+            Default
+            <tui-doc-documentation *tuiAccordionItemContent>
+                <ng-container *ngFor="let variable of keys">
+                    <ng-template
+                        *ngIf="!isDark(variable) && !isLight(variable)"
+                        [documentationPropertyName]="variable"
+                        [documentationPropertyType]="getType(variable)"
+                        [documentationPropertyValue]="getVariable(variable)"
+                        (documentationPropertyValueChange)="onModelChange(variable, $event)"
+                    ></ng-template>
+                </ng-container>
+            </tui-doc-documentation>
+        </tui-accordion-item>
+        <tui-accordion-item *ngIf="hasLight">
+            Light
+            <tui-doc-documentation *tuiAccordionItemContent>
+                <ng-container *ngFor="let variable of keys">
+                    <ng-template
+                        *ngIf="isLight(variable)"
+                        [documentationPropertyName]="variable"
+                        [documentationPropertyType]="getType(variable)"
+                        [documentationPropertyValue]="getVariable(variable)"
+                        (documentationPropertyValueChange)="onModelChange(variable, $event)"
+                    ></ng-template>
+                </ng-container>
+            </tui-doc-documentation>
+        </tui-accordion-item>
+        <tui-accordion-item *ngIf="hasLight">
+            Dark
+            <tui-doc-documentation *tuiAccordionItemContent>
+                <ng-container *ngFor="let variable of keys">
+                    <ng-template
+                        *ngIf="isDark(variable)"
+                        [documentationPropertyName]="variable"
+                        [documentationPropertyType]="getType(variable)"
+                        [documentationPropertyValue]="getVariable(variable)"
+                        (documentationPropertyValueChange)="onModelChange(variable, $event)"
+                    ></ng-template>
+                </ng-container>
+            </tui-doc-documentation>
+        </tui-accordion-item>
+    </tui-accordion>
 </ng-template>

projects/demo/src/modules/info/browsers/browsers.template.html

@@ -44,6 +44,10 @@
                 <td class="tui-table__td">Opera</td>
                 <td class="tui-table__td">36+</td>
             </tr>
+            <tr class="tui-table__tr">
+                <td class="tui-table__td">Edge (Chromium)</td>
+                <td class="tui-table__td">80+</td>
+            </tr>
             <tr class="tui-table__tr">
                 <td class="tui-table__td">Microsoft Internet Explorer</td>
                 <td class="tui-table__td">
@@ -52,7 +56,7 @@
             </tr>
             <tr class="tui-table__tr">
                 <td class="tui-table__td">Edge (EdgeHTML)</td>
-                <td class="tui-table__td">16+</td>
+                <td class="tui-table__td"><strong>Not supported</strong></td>
             </tr>
         </tbody>
     </table>

projects/demo/src/modules/utils/browser/examples/1/index.ts

@@ -2,7 +2,7 @@ import {Component, Inject} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {USER_AGENT} from '@ng-web-apis/common';
-import {tuiIsEdge, tuiIsEdgeOlderThan, tuiIsFirefox, tuiIsIE} from '@taiga-ui/cdk';
+import {tuiIsEdge, tuiIsEdgeOlderThan, tuiIsFirefox} from '@taiga-ui/cdk';
 
 @Component({
     selector: `tui-browser-example-1`,
@@ -22,10 +22,6 @@ export class TuiBrowserExample1 {
             return `Edge until 13`;
         }
 
-        if (tuiIsIE(this.userAgent)) {
-            return `Unfortunately, you have IE11`;
-        }
-
         if (tuiIsFirefox(this.userAgent)) {
             return `Okay, you have Firefox!`;
         }

projects/demo/src/modules/utils/browser/examples/import/import-component.md

@@ -1,10 +1,10 @@
 ```ts
-import {isIE} from '@taiga-ui/cdk';
+import {tuiIsEdge} from '@taiga-ui/cdk';
 import {USER_AGENT} from '@ng-web-apis/common';
 
 // ...
 export class MyComponent {
-  areThereProblems = isIE(this.userAgent);
+  areThereProblems = tuiIsEdge(this.userAgent);
 
   constructor(@Inject(USER_AGENT) private readonly userAgent: string) {}
 }

projects/kit/components/progress/progress-bar/progress-color-segments.directive.ts

@@ -4,7 +4,6 @@ import {
     CHROMIUM_EDGE_START_VERSION,
     TuiDestroyService,
     tuiIsEdgeOlderThan,
-    tuiIsIE,
     tuiPure,
     TuiResizeService,
 } from '@taiga-ui/cdk';
@@ -31,9 +30,11 @@ function calculateColorSegments(colors: string[], progressWidth: number): string
     providers: [TuiDestroyService, TuiResizeService],
 })
 export class TuiProgressColorSegmentsDirective {
-    private readonly isOldBrowsers =
-        tuiIsEdgeOlderThan(CHROMIUM_EDGE_START_VERSION, this.userAgent) ||
-        tuiIsIE(this.userAgent);
+    // TODO: drop support of legacy Edge (EdgeHTML) in v4.x
+    private readonly isOldBrowsers = tuiIsEdgeOlderThan(
+        CHROMIUM_EDGE_START_VERSION,
+        this.userAgent,
+    );
 
     @Input(`tuiProgressColorSegments`)
     colors: string[] = [];

projects/kit/components/progress/progress-circle/progress-circle.component.ts

@@ -48,6 +48,7 @@ export class TuiProgressCircleComponent {
         return this.value / this.max;
     }
 
+    // TODO: drop support of legacy Edge (EdgeHTML) in v4.x
     get oldEdgeRadiusFallback(): number | null {
         if (!tuiIsEdgeOlderThan(CHROMIUM_EDGE_START_VERSION, this.userAgent)) {
             return null;

projects/kit/components/slider/slider.component.ts

@@ -97,6 +97,7 @@ export class TuiSliderComponent {
         return 100 / Math.max(1, this.segments);
     }
 
+    // TODO: drop support of legacy Edge (EdgeHTML) in v4.x
     @HostBinding(`class._old-edge`)
     get isOldEdge(): boolean {
         return tuiIsEdgeOlderThan(CHROMIUM_EDGE_START_VERSION, this.userAgent);