@ng-matero/extensions 17.1.3 → 17.2.0

package/select/select.d.ts

@@ -1,7 +1,7 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, InjectionToken, OnDestroy, OnInit, QueryList, TemplateRef } from '@angular/core';
 import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
-import { CanDisable, ErrorStateMatcher } from '@angular/material/core';
+import { ErrorStateMatcher } from '@angular/material/core';
 import { MatFormField, MatFormFieldControl } from '@angular/material/form-field';
 import { NgSelectComponent } from '@ng-select/ng-select';
 import { Subject } from 'rxjs';
@@ -32,30 +32,11 @@ export interface MtxSelectDefaultOptions {
 }
 /** Injection token that can be used to specify default select options. */
 export declare const MTX_SELECT_DEFAULT_OPTIONS: InjectionToken<MtxSelectDefaultOptions>;
-/** @docs-private */
-declare const _MtxSelectMixinBase: import("@angular/material/core")._Constructor<CanDisable> & import("@angular/material/core")._AbstractConstructor<CanDisable> & import("@angular/material/core")._Constructor<import("@angular/material/core").CanUpdateErrorState> & import("@angular/material/core")._AbstractConstructor<import("@angular/material/core").CanUpdateErrorState> & {
-    new (_defaultErrorStateMatcher: ErrorStateMatcher, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, ngControl: NgControl): {
-        /**
-         * Emits whenever the component state changes and should cause the parent
-         * form-field to update. Implemented as part of `MatFormFieldControl`.
-         * @docs-private
-         */
-        readonly stateChanges: Subject<void>;
-        _defaultErrorStateMatcher: ErrorStateMatcher;
-        _parentForm: NgForm;
-        _parentFormGroup: FormGroupDirective;
-        /**
-         * Form control bound to the component.
-         * Implemented as part of `MatFormFieldControl`.
-         * @docs-private
-         */
-        ngControl: NgControl;
-    };
-};
-export declare class MtxSelect extends _MtxSelectMixinBase implements OnInit, OnDestroy, DoCheck, AfterViewInit, ControlValueAccessor, CanDisable, MatFormFieldControl<any> {
+export declare class MtxSelect implements OnInit, OnDestroy, DoCheck, AfterViewInit, ControlValueAccessor, MatFormFieldControl<any> {
     protected _changeDetectorRef: ChangeDetectorRef;
     protected _elementRef: ElementRef;
     protected _focusMonitor: FocusMonitor;
+    ngControl: NgControl;
     protected _parentFormField?: MatFormField | undefined;
     protected _defaultOptions?: MtxSelectDefaultOptions | undefined;
     ngSelect: NgSelectComponent;
@@ -165,12 +146,15 @@ export declare class MtxSelect extends _MtxSelectMixinBase implements OnInit, On
      * @docs-private
      */
     get shouldLabelFloat(): boolean;
+    /** Whether the select is disabled. */
+    disabled: boolean;
     /** Whether the component is required. */
     get required(): boolean;
     set required(value: boolean);
     private _required;
     /** Object used to control when error messages are shown. */
-    errorStateMatcher: ErrorStateMatcher;
+    get errorStateMatcher(): ErrorStateMatcher;
+    set errorStateMatcher(value: ErrorStateMatcher);
     /** Aria label of the select. */
     ariaLabel: string;
     /** Input that can be used to specify the `aria-labelledby` attribute. */
@@ -192,7 +176,12 @@ export declare class MtxSelect extends _MtxSelectMixinBase implements OnInit, On
      * Used to detect if it has changed.
      */
     private _previousControl;
-    constructor(_changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef, _focusMonitor: FocusMonitor, _defaultErrorStateMatcher: ErrorStateMatcher, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, ngControl: NgControl, _parentFormField?: MatFormField | undefined, _defaultOptions?: MtxSelectDefaultOptions | undefined);
+    /** Tracks the error state of the select. */
+    private _errorStateTracker;
+    /** Whether the select is in an error state. */
+    get errorState(): boolean;
+    set errorState(value: boolean);
+    constructor(_changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef, _focusMonitor: FocusMonitor, defaultErrorStateMatcher: ErrorStateMatcher, parentForm: NgForm, parentFormGroup: FormGroupDirective, ngControl: NgControl, _parentFormField?: MatFormField | undefined, _defaultOptions?: MtxSelectDefaultOptions | undefined);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngDoCheck(): void;
@@ -233,6 +222,10 @@ export declare class MtxSelect extends _MtxSelectMixinBase implements OnInit, On
      * @param fn Callback to be triggered when the component has been touched.
      */
     registerOnTouched(fn: any): void;
+    /** Refreshes the error state of the select. */
+    updateErrorState(): void;
+    /** Assigns a specific value to the select. Returns whether the value has changed. */
+    private _assignValue;
     /** NgSelect's `_setItemsFromNgOptions` */
     private _setItemsFromMtxOptions;
     open(): void;
@@ -242,6 +235,6 @@ export declare class MtxSelect extends _MtxSelectMixinBase implements OnInit, On
     openChange(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSelect, [null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; self: true; }, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MtxSelect, "mtx-select", ["mtxSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "addTag": { "alias": "addTag"; "required": false; }; "addTagText": { "alias": "addTagText"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "bindLabel": { "alias": "bindLabel"; "required": false; }; "bindValue": { "alias": "bindValue"; "required": false; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; }; "clearAllText": { "alias": "clearAllText"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "clearOnBackspace": { "alias": "clearOnBackspace"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "dropdownPosition": { "alias": "dropdownPosition"; "required": false; }; "groupBy": { "alias": "groupBy"; "required": false; }; "groupValue": { "alias": "groupValue"; "required": false; }; "selectableGroup": { "alias": "selectableGroup"; "required": false; }; "selectableGroupAsModel": { "alias": "selectableGroupAsModel"; "required": false; }; "hideSelected": { "alias": "hideSelected"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "loadingText": { "alias": "loadingText"; "required": false; }; "labelForId": { "alias": "labelForId"; "required": false; }; "markFirst": { "alias": "markFirst"; "required": false; }; "maxSelectedItems": { "alias": "maxSelectedItems"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "notFoundText": { "alias": "notFoundText"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "searchFn": { "alias": "searchFn"; "required": false; }; "searchWhileComposing": { "alias": "searchWhileComposing"; "required": false; }; "selectOnTab": { "alias": "selectOnTab"; "required": false; }; "trackByFn": { "alias": "trackByFn"; "required": false; }; "inputAttrs": { "alias": "inputAttrs"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "openOnEnter": { "alias": "openOnEnter"; "required": false; }; "minTermLength": { "alias": "minTermLength"; "required": false; }; "editableSearchTerm": { "alias": "editableSearchTerm"; "required": false; }; "keyDownFn": { "alias": "keyDownFn"; "required": false; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; }; "typeToSearchText": { "alias": "typeToSearchText"; "required": false; }; "typeahead": { "alias": "typeahead"; "required": false; }; "clearSearchOnAdd": { "alias": "clearSearchOnAdd"; "required": false; }; "items": { "alias": "items"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; }, { "blurEvent": "blur"; "focusEvent": "focus"; "changeEvent": "change"; "openEvent": "open"; "closeEvent": "close"; "searchEvent": "search"; "clearEvent": "clear"; "addEvent": "add"; "removeEvent": "remove"; "scroll": "scroll"; "scrollToEnd": "scrollToEnd"; }, ["optionTemplate", "optgroupTemplate", "labelTemplate", "multiLabelTemplate", "headerTemplate", "footerTemplate", "notFoundTemplate", "typeToSearchTemplate", "loadingTextTemplate", "tagTemplate", "loadingSpinnerTemplate", "mtxOptions"], never, true, never>;
+    static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_required: unknown;
 }
-export {};

package/select/select.scss

@@ -100,7 +100,7 @@ $_tokens: tokens-mtx-select.$prefix, tokens-mtx-select.get-token-slots();
 
         @include token-utils.create-token-slot(background-color, multiple-value-background-color);
 
-        $border-color: token-utils.get-token-variable(multiple-value-border-color);
+        $border-color: token-utils.get-token-variable(multiple-value-outline-color);
 
         border: 1px solid var($border-color);
 

package/split/_split-theme.scss

@@ -1,11 +1,14 @@
+@use 'sass:map';
 @use '@angular/material' as mat;
 @use '../core/style/sass-utils';
+@use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mtx/split' as tokens-mtx-split;
 
 @mixin base($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(mat.get-theme-tokens($theme, base));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   }
   @else {
     @include sass-utils.current-selector-or-root() {
@@ -15,9 +18,9 @@
   }
 }
 
-@mixin color($theme) {
+@mixin color($theme, $options...) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(mat.get-theme-tokens($theme, color));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   }
   @else {
     @include sass-utils.current-selector-or-root() {
@@ -41,22 +44,22 @@
 
 @mixin typography($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(mat.get-theme-tokens($theme, typography));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
   @else {}
 }
 
 @mixin density($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(mat.get-theme-tokens($theme, density));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
   @else {}
 }
 
-@mixin theme($theme) {
+@mixin theme($theme, $options...) {
   @include mat.private-check-duplicate-theme-styles($theme, 'mtx-split') {
     @if mat.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(mat.get-theme-tokens($theme));
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
     }
     @else {
       @include base($theme);
@@ -73,9 +76,9 @@
   }
 }
 
-@mixin _theme-from-tokens($tokens) {
-  @if ($tokens != ()) {
-    @include token-utils.create-token-values(tokens-mtx-split.$prefix,
-      map.get($tokens, tokens-mtx-split.$prefix));
-  }
+@mixin _theme-from-tokens($tokens, $options...) {
+  @include validation.selector-defined(
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
+  $mtx-split-tokens: token-utils.get-tokens-for($tokens, tokens-mtx-split.$prefix, $options...);
+  @include token-utils.create-token-values(tokens-mtx-split.$prefix, $mtx-split-tokens);
 }

package/split/split.d.ts

@@ -1,17 +1,11 @@
 import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, OnDestroy, Renderer2 } from '@angular/core';
-import { CanColor } from '@angular/material/core';
+import { ThemePalette } from '@angular/material/core';
 import { Observable } from 'rxjs';
 import { MtxSplitArea, MtxSplitDefaultOptions, MtxSplitOutputAreaSizes, MtxSplitOutputData } from './interfaces';
 import { MtxSplitPane } from './split-pane';
 import * as i0 from "@angular/core";
 /** Injection token that can be used to specify default split options. */
 export declare const MTX_SPLIT_DEFAULT_OPTIONS: InjectionToken<MtxSplitDefaultOptions>;
-/** @docs-private */
-declare const _MtxSplitBase: import("@angular/material/core")._Constructor<CanColor> & import("@angular/material/core")._AbstractConstructor<CanColor> & {
-    new (_elementRef: ElementRef): {
-        _elementRef: ElementRef;
-    };
-};
 /**
  * mtx-split
  *
@@ -41,12 +35,13 @@ declare const _MtxSplitBase: import("@angular/material/core")._Constructor<CanCo
  *                                                                                 800px         <-- el.getBoundingClientRect().width
  *
  */
-export declare class MtxSplit extends _MtxSplitBase implements AfterViewInit, OnDestroy, CanColor {
+export declare class MtxSplit implements AfterViewInit, OnDestroy {
     private ngZone;
     private elRef;
     private cdRef;
     private renderer;
     protected _defaultOptions?: MtxSplitDefaultOptions | undefined;
+    color: ThemePalette;
     private _direction;
     set direction(v: 'horizontal' | 'vertical');
     get direction(): 'horizontal' | 'vertical';
@@ -112,4 +107,3 @@ export declare class MtxSplit extends _MtxSplitBase implements AfterViewInit, On
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxSplit, [null, null, null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MtxSplit, "mtx-split", ["mtxSplit"], { "color": { "alias": "color"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "unit": { "alias": "unit"; "required": false; }; "gutterSize": { "alias": "gutterSize"; "required": false; }; "gutterStep": { "alias": "gutterStep"; "required": false; }; "restrictMove": { "alias": "restrictMove"; "required": false; }; "useTransition": { "alias": "useTransition"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "dir": { "alias": "dir"; "required": false; }; "gutterDblClickDuration": { "alias": "gutterDblClickDuration"; "required": false; }; }, { "dragStart": "dragStart"; "dragEnd": "dragEnd"; "gutterClick": "gutterClick"; "gutterDblClick": "gutterDblClick"; "transitionEnd": "transitionEnd"; }, never, ["*"], true, never>;
 }
-export {};

package/tooltip/_tooltip-theme.scss

@@ -2,11 +2,13 @@
 @use '@material/tooltip/plain-tooltip-theme' as mdc-plain-tooltip-theme;
 @use '@angular/material' as mat;
 @use '../core/style/sass-utils';
+@use '../core/theming/inspection';
+@use '../core/theming/validation';
 @use '../core/tokens/m2/mdc/plain-tooltip' as tokens-mdc-plain-tooltip;
 
 @mixin base($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(mat.get-theme-tokens($theme, base));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   }
   @else {
     // Add default values for tokens not related to color, typography, or density.
@@ -18,7 +20,7 @@
 
 @mixin color($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(mat.get-theme-tokens($theme, color));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   }
   @else {
     $mdc-tooltip-color-tokens: tokens-mdc-plain-tooltip.get-color-tokens($theme);
@@ -32,7 +34,7 @@
 
 @mixin typography($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(mat.get-theme-tokens($theme, typography));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
   @else {
     $mdc-tooltip-typography-tokens: tokens-mdc-plain-tooltip.get-typography-tokens($theme);
@@ -46,7 +48,7 @@
 
 @mixin density($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(mat.get-theme-tokens($theme, density));
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
   @else {
     $mdc-tooltip-density-tokens: tokens-mdc-plain-tooltip.get-density-tokens($theme);
@@ -61,7 +63,7 @@
 @mixin theme($theme) {
   @include mat.private-check-duplicate-theme-styles($theme, 'mtx-tooltip') {
     @if mat.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(mat.get-theme-tokens($theme));
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
     @else {
       @include base($theme);
@@ -79,6 +81,8 @@
 }
 
 @mixin _theme-from-tokens($tokens) {
+  @include validation.selector-defined(
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if $tokens != () {
     @include mdc-plain-tooltip-theme.theme(map.get($tokens, tokens-mdc-plain-tooltip.$prefix));
   }