main - 5242169 refactor(multiple): remove focus indicators structural styles from core (#29804)

Author: wagnermaciel

core/_core.scss

@@ -2,12 +2,10 @@
 @use './tokens/m2/mat/app' as tokens-mat-app;
 @use './tokens/token-utils';
 @use './style/elevation';
-@use './focus-indicators/private';
 
 // Mixin that renders all of the core styles that are not theme-dependent.
 @mixin core() {
   @include cdk.a11y-visually-hidden();
-  @include private.structural-styling();
 }
 
 // Emits the mat-app-background CSS class. This predefined class sets the

core/index.d.ts

@@ -1090,6 +1090,15 @@ export declare class ShowOnDirtyErrorStateMatcher implements ErrorStateMatcher {
     static ɵprov: i0.ɵɵInjectableDeclaration<ShowOnDirtyErrorStateMatcher>;
 }
 
+/**
+ * Component used to load structural styles for focus indicators.
+ * @docs-private
+ */
+export declare class _StructuralStylesLoader {
+    static ɵfac: i0.ɵɵFactoryDeclaration<_StructuralStylesLoader, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<_StructuralStylesLoader, "structural-styles", never, {}, {}, never, never, true, never>;
+}
+
 
 /** Possible color palette values. */
 export declare type ThemePalette = 'primary' | 'accent' | 'warn' | undefined;

fesm2022/button-toggle.mjs

@@ -5,7 +5,8 @@ import * as i0 from '@angular/core';
 import { InjectionToken, forwardRef, inject, ChangeDetectorRef, EventEmitter, booleanAttribute, Directive, ContentChildren, Input, Output, ElementRef, HostAttributeToken, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
 import { Directionality } from '@angular/cdk/bidi';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { MatRipple, MatPseudoCheckbox, MatCommonModule, MatRippleModule } from '@angular/material/core';
+import { _StructuralStylesLoader, MatRipple, MatPseudoCheckbox, MatCommonModule, MatRippleModule } from '@angular/material/core';
+import { _CdkPrivateStyleLoader } from '@angular/cdk/private';
 
 /**
  * Injection token that can be used to configure the
@@ -481,6 +482,7 @@ class MatButtonToggle {
         this._disabled = false;
         /** Event emitted when the group value changes. */
         this.change = new EventEmitter();
+        inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
         const toggleGroup = inject(MAT_BUTTON_TOGGLE_GROUP, { optional: true });
         const defaultTabIndex = inject(new HostAttributeToken('tabindex'), { optional: true });
         const defaultOptions = inject(MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS, { optional: true });

fesm2022/button-toggle.mjs.map

@@ -2,7 +2,8 @@ import * as i0 from '@angular/core';
 import { InjectionToken, inject, ElementRef, NgZone, ANIMATION_MODULE_TYPE, booleanAttribute, Directive, Input, numberAttribute, Component, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { Platform } from '@angular/cdk/platform';
-import { MatRippleLoader, MatCommonModule, MatRippleModule } from '@angular/material/core';
+import { MatRippleLoader, _StructuralStylesLoader, MatCommonModule, MatRippleModule } from '@angular/material/core';
+import { _CdkPrivateStyleLoader } from '@angular/cdk/private';
 
 /** Injection token that can be used to provide the default options the button component. */
 const MAT_BUTTON_CONFIG = new InjectionToken('MAT_BUTTON_CONFIG');
@@ -86,6 +87,7 @@ class MatButtonBase {
         this._isFab = false;
         this._disableRipple = false;
         this._disabled = false;
+        inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
         const config = inject(MAT_BUTTON_CONFIG, { optional: true });
         const element = this._elementRef.nativeElement;
         const classList = element.classList;

fesm2022/button.mjs

@@ -1,7 +1,8 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, forwardRef, inject, ElementRef, ChangeDetectorRef, NgZone, ANIMATION_MODULE_TYPE, EventEmitter, HostAttributeToken, booleanAttribute, numberAttribute, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, ViewChild, Directive, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, CheckboxRequiredValidator } from '@angular/forms';
-import { MatRipple, _MatInternalFormField, MatCommonModule } from '@angular/material/core';
+import { _StructuralStylesLoader, MatRipple, _MatInternalFormField, MatCommonModule } from '@angular/material/core';
+import { _CdkPrivateStyleLoader } from '@angular/cdk/private';
 
 /** Injection token to be used to override the default options for `mat-checkbox`. */
 const MAT_CHECKBOX_DEFAULT_OPTIONS = new InjectionToken('mat-checkbox-default-options', {
@@ -114,6 +115,7 @@ class MatCheckbox {
         this._checked = false;
         this._disabled = false;
         this._indeterminate = false;
+        inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
         const tabIndex = inject(new HostAttributeToken('tabindex'), { optional: true });
         this._options = this._options || defaults;
         this.color = this._options.color || defaults.color;

fesm2022/button.mjs.map

@@ -3,8 +3,9 @@ import { ENTER, SPACE, BACKSPACE, DELETE, TAB, hasModifierKey, UP_ARROW, DOWN_AR
 import { DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, ElementRef, booleanAttribute, numberAttribute, Directive, Input, ChangeDetectorRef, NgZone, EventEmitter, Injector, ANIMATION_MODULE_TYPE, afterNextRender, Component, ViewEncapsulation, ChangeDetectionStrategy, ContentChildren, Output, ContentChild, ViewChild, QueryList, forwardRef, NgModule } from '@angular/core';
-import { MAT_RIPPLE_GLOBAL_OPTIONS, MatRippleLoader, ErrorStateMatcher, _ErrorStateTracker, MatCommonModule, MatRippleModule } from '@angular/material/core';
+import { _StructuralStylesLoader, MAT_RIPPLE_GLOBAL_OPTIONS, MatRippleLoader, ErrorStateMatcher, _ErrorStateTracker, MatCommonModule, MatRippleModule } from '@angular/material/core';
 import { Subject, merge } from 'rxjs';
+import { _CdkPrivateStyleLoader } from '@angular/cdk/private';
 import { takeUntil, startWith, switchMap } from 'rxjs/operators';
 import { Directionality } from '@angular/cdk/bidi';
 import { NG_VALUE_ACCESSOR, Validators, NgControl, NgForm, FormGroupDirective } from '@angular/forms';
@@ -82,6 +83,7 @@ class MatChipAction {
          * Private API to allow focusing this chip when it is disabled.
          */
         this._allowFocusWhenDisabled = false;
+        inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
         if (this._elementRef.nativeElement.nodeName === 'BUTTON') {
             this._elementRef.nativeElement.setAttribute('type', 'button');
         }
@@ -317,6 +319,7 @@ class MatChip {
          */
         this._rippleLoader = inject(MatRippleLoader);
         this._injector = inject(Injector);
+        inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
         const animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true });
         this._animationsDisabled = animationMode === 'NoopAnimations';
         this._monitorFocus();