@ng-matero/extensions 12.5.2 → 13.0.0

package/README.md

@@ -23,21 +23,7 @@ $ npm install @ng-matero/extensions --save
 
 ## Setup
 
-Once installed you need to import the main module:
-
-```ts
-import { MaterialExtensionsModule, MaterialExtensionsExperimentalModule } from '@ng-matero/extensions';
-
-@NgModule({
-  ...
-  imports: [MaterialExtensionsModule, MaterialExtensionsExperimentalModule, ...],
-  ...
-})
-export class YourAppModule {
-}
-```
-
-Alternatively you could only import modules you need, e.g. data-grid and select.
+Import the modules you need, e.g. data-grid and select.
 
 ```ts
 import { MtxGridModule } from '@ng-matero/extensions/grid';
@@ -57,7 +43,7 @@ export class YourAppModule {
 After import modules, you must define a theme. [More details about theming](https://material.angular.io/guide/theming).
 
 ```scss
-@use '~@ng-matero/extensions' as mtx;
+@use '@ng-matero/extensions' as mtx;
 
 @include mtx.all-component-themes($theme);
 @include mtx.all-experimental-component-themes($theme);

package/_all-color.scss

@@ -1,4 +1,4 @@
-@use '~@angular/material/core/theming/theming';
+@use './core/theming/theming';
 @use './all-theme';
 
 // Includes all of the color styles.

package/_all-theme.scss

@@ -1,5 +1,6 @@
 // Import all the theming functionality.
 @use './alert/alert-theme';
+@use './colorpicker/colorpicker-theme';
 @use './datetimepicker/datetimepicker-theme';
 @use './grid/grid-theme';
 @use './loader/loader-theme';
@@ -15,6 +16,7 @@
 // Create a theme.
 @mixin all-component-themes($theme) {
   @include alert-theme.theme($theme);
+  @include colorpicker-theme.theme($theme);
   @include datetimepicker-theme.theme($theme);
   @include grid-theme.theme($theme);
   @include loader-theme.theme($theme);

package/_index.scss

@@ -1,7 +1,9 @@
-@forward '~photoviewer/dist/photoviewer';
+@forward 'photoviewer/dist/photoviewer';
 
 @forward './button/button-loading';
+
 @forward './alert/alert-theme' as alert-* show alert-theme;
+@forward './colorpicker/colorpicker-theme' as colorpicker-* show colorpicker-theme;
 @forward './datetimepicker/datetimepicker-theme' as datetimepicker-* show datetimepicker-theme;
 @forward './grid/grid-theme' as grid-* show grid-theme;
 @forward './loader/loader-theme' as loader-* show loader-theme;

package/_theming.scss

@@ -1,7 +1,9 @@
-@forward '~photoviewer/dist/photoviewer';
+@forward 'photoviewer/dist/photoviewer';
 
 @forward './button/button-loading';
+
 @forward './alert/alert-theme.import';
+@forward './colorpicker/colorpicker-theme.import';
 @forward './datetimepicker/datetimepicker-theme.import';
 @forward './grid/grid-theme.import';
 @forward './loader/loader-theme.import';

package/alert/_alert-theme.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
-@use '~@angular/material/core/theming/theming';
-@use '~@angular/material/core/theming/palette';
+@use '../core/theming/theming';
+@use '../core/theming/palette';
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);

package/alert/alert.component.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter, ChangeDetectorRef } from '@angular/core';
 import { BooleanInput } from '@angular/cdk/coercion';
+import * as i0 from "@angular/core";
 export declare type MtxAlertType = 'default' | 'info' | 'success' | 'warning' | 'danger';
 export declare class MtxAlertComponent {
     private _changeDetectorRef;
@@ -17,4 +18,6 @@ export declare class MtxAlertComponent {
     constructor(_changeDetectorRef: ChangeDetectorRef);
     _onClosed(): void;
     static ngAcceptInputType_dismissible: BooleanInput;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxAlertComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxAlertComponent, "mtx-alert", ["mtxAlert"], { "type": "type"; "dismissible": "dismissible"; "elevation": "elevation"; }, { "closed": "closed"; }, never, ["*"]>;
 }

package/alert/alert.module.d.ts

@@ -1,2 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./alert.component";
+import * as i2 from "@angular/common";
 export declare class MtxAlertModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxAlertModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxAlertModule, [typeof i1.MtxAlertComponent], [typeof i2.CommonModule], [typeof i1.MtxAlertComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MtxAlertModule>;
 }

package/alert/mtxAlert.d.ts

@@ -1,4 +1,5 @@
 /**
  * Generated bundle index. Do not edit.
  */
+/// <amd-module name="@ng-matero/extensions/alert" />
 export * from './public-api';

package/alert/package.json

@@ -1,11 +1,10 @@
 {
-  "main": "../bundles/mtxAlert.umd.js",
-  "module": "../fesm2015/mtxAlert.js",
-  "es2015": "../fesm2015/mtxAlert.js",
-  "esm2015": "../esm2015/alert/mtxAlert.js",
-  "fesm2015": "../fesm2015/mtxAlert.js",
+  "module": "../fesm2015/mtxAlert.mjs",
+  "es2020": "../fesm2020/mtxAlert.mjs",
+  "esm2020": "../esm2020/alert/mtxAlert.mjs",
+  "fesm2020": "../fesm2020/mtxAlert.mjs",
+  "fesm2015": "../fesm2015/mtxAlert.mjs",
   "typings": "mtxAlert.d.ts",
-  "metadata": "mtxAlert.metadata.json",
   "sideEffects": false,
   "name": "@ng-matero/extensions/alert"
 }

package/button/button-loading.directive.d.ts

@@ -2,6 +2,7 @@ import { ComponentFactoryResolver, OnChanges, Renderer2, SimpleChanges, ViewCont
 import { BooleanInput } from '@angular/cdk/coercion';
 import { ThemePalette } from '@angular/material/core';
 import { MatButton } from '@angular/material/button';
+import * as i0 from "@angular/core";
 export declare class MatButtonLoadingDirective implements OnChanges {
     private matButton;
     private componentFactoryResolver;
@@ -22,4 +23,6 @@ export declare class MatButtonLoadingDirective implements OnChanges {
     private destroySpinner;
     static ngAcceptInputType_loading: BooleanInput;
     static ngAcceptInputType_disabled: BooleanInput;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonLoadingDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatButtonLoadingDirective, "button[mat-button][loading],             button[mat-raised-button][loading],             button[mat-stroked-button][loading],             button[mat-flat-button][loading],             button[mat-icon-button][loading],             button[mat-fab][loading],             button[mat-mini-fab][loading]", never, { "loading": "loading"; "disabled": "disabled"; "color": "color"; }, {}, never>;
 }

package/button/button.module.d.ts

@@ -1,2 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./button-loading.directive";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/material/button";
+import * as i4 from "@angular/material/progress-spinner";
 export declare class MtxButtonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxButtonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxButtonModule, [typeof i1.MatButtonLoadingDirective], [typeof i2.CommonModule, typeof i3.MatButtonModule, typeof i4.MatProgressSpinnerModule], [typeof i1.MatButtonLoadingDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MtxButtonModule>;
 }

package/button/mtxButton.d.ts

@@ -1,4 +1,5 @@
 /**
  * Generated bundle index. Do not edit.
  */
+/// <amd-module name="@ng-matero/extensions/button" />
 export * from './public-api';

package/button/package.json

@@ -1,11 +1,10 @@
 {
-  "main": "../bundles/mtxButton.umd.js",
-  "module": "../fesm2015/mtxButton.js",
-  "es2015": "../fesm2015/mtxButton.js",
-  "esm2015": "../esm2015/button/mtxButton.js",
-  "fesm2015": "../fesm2015/mtxButton.js",
+  "module": "../fesm2015/mtxButton.mjs",
+  "es2020": "../fesm2020/mtxButton.mjs",
+  "esm2020": "../esm2020/button/mtxButton.mjs",
+  "fesm2020": "../fesm2020/mtxButton.mjs",
+  "fesm2015": "../fesm2015/mtxButton.mjs",
   "typings": "mtxButton.d.ts",
-  "metadata": "mtxButton.metadata.json",
   "sideEffects": false,
   "name": "@ng-matero/extensions/button"
 }

package/checkbox-group/checkbox-group.component.d.ts

@@ -1,10 +1,10 @@
 import { EventEmitter, ChangeDetectorRef, AfterViewInit, QueryList, ElementRef, OnDestroy } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { BooleanInput } from '@angular/cdk/coercion';
-import { ThemePalette } from '@angular/material/core';
 import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
 import { MtxCheckboxGroupOption } from './checkbox-group.interface';
 import { FocusMonitor } from '@angular/cdk/a11y';
+import * as i0 from "@angular/core";
 export declare class MtxCheckboxBase {
     label?: any;
     value?: any;
@@ -37,7 +37,6 @@ export declare class MtxCheckboxGroupComponent implements AfterViewInit, OnDestr
     }>;
     selectAll: boolean;
     selectAllIndeterminate: boolean;
-    color: ThemePalette;
     selectedItems: MtxCheckboxGroupOption[];
     _onChange: (value: MtxCheckboxGroupOption[]) => void;
     _onTouched: () => void;
@@ -59,13 +58,13 @@ export declare class MtxCheckboxGroupComponent implements AfterViewInit, OnDestr
      * Implemented as part of ControlValueAccessor.
      * @param fn Callback to be registered.
      */
-    registerOnChange(fn: (value: MtxCheckboxGroupOption[]) => {}): void;
+    registerOnChange(fn: (value: MtxCheckboxGroupOption[]) => Record<string, unknown>): void;
     /**
      * Registers a callback to be triggered when the control is touched.
      * Implemented as part of ControlValueAccessor.
      * @param fn Callback to be registered.
      */
-    registerOnTouched(fn: () => {}): void;
+    registerOnTouched(fn: () => Record<string, unknown>): void;
     /**
      * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.
      * @param isDisabled Whether the control should be disabled.
@@ -79,4 +78,6 @@ export declare class MtxCheckboxGroupComponent implements AfterViewInit, OnDestr
     _updateMasterCheckboxState(e: MatCheckboxChange, index: number): void;
     static ngAcceptInputType_showSelectAll: BooleanInput;
     static ngAcceptInputType_disabled: BooleanInput;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxCheckboxGroupComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxCheckboxGroupComponent, "mtx-checkbox-group", ["mtxCheckboxGroup"], { "items": "items"; "bindLabel": "bindLabel"; "bindValue": "bindValue"; "showSelectAll": "showSelectAll"; "selectAllLabel": "selectAllLabel"; "compareWith": "compareWith"; "disabled": "disabled"; }, { "change": "change"; }, ["_checkboxes"], never>;
 }

package/checkbox-group/checkbox-group.module.d.ts

@@ -1,2 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./checkbox-group.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "@angular/material/checkbox";
+import * as i5 from "@ng-matero/extensions/core";
 export declare class MtxCheckboxGroupModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxCheckboxGroupModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxCheckboxGroupModule, [typeof i1.MtxCheckboxGroupComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.MatCheckboxModule, typeof i5.MtxPipesModule], [typeof i1.MtxCheckboxGroupComponent, typeof i5.MtxPipesModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MtxCheckboxGroupModule>;
 }

package/checkbox-group/mtxCheckboxGroup.d.ts

@@ -1,4 +1,5 @@
 /**
  * Generated bundle index. Do not edit.
  */
+/// <amd-module name="@ng-matero/extensions/checkbox-group" />
 export * from './public-api';

package/checkbox-group/package.json

@@ -1,11 +1,10 @@
 {
-  "main": "../bundles/mtxCheckboxGroup.umd.js",
-  "module": "../fesm2015/mtxCheckboxGroup.js",
-  "es2015": "../fesm2015/mtxCheckboxGroup.js",
-  "esm2015": "../esm2015/checkbox-group/mtxCheckboxGroup.js",
-  "fesm2015": "../fesm2015/mtxCheckboxGroup.js",
+  "module": "../fesm2015/mtxCheckboxGroup.mjs",
+  "es2020": "../fesm2020/mtxCheckboxGroup.mjs",
+  "esm2020": "../esm2020/checkbox-group/mtxCheckboxGroup.mjs",
+  "fesm2020": "../fesm2020/mtxCheckboxGroup.mjs",
+  "fesm2015": "../fesm2015/mtxCheckboxGroup.mjs",
   "typings": "mtxCheckboxGroup.d.ts",
-  "metadata": "mtxCheckboxGroup.metadata.json",
   "sideEffects": false,
   "name": "@ng-matero/extensions/checkbox-group"
 }

package/colorpicker/_colorpicker-theme.import.scss

@@ -0,0 +1,2 @@
+@forward 'colorpicker-theme' hide color, theme, typography;
+@forward 'colorpicker-theme' as mtx-colorpicker-* hide mtx-colorpicker-density;

package/colorpicker/_colorpicker-theme.scss

@@ -0,0 +1,43 @@
+@use 'sass:map';
+@use '../core/theming/theming';
+@use '../core/theming/palette';
+
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $background: map.get($config, background);
+
+  .mtx-colorpicker-toggle-active {
+    color: theming.get-color-from-palette(map.get($config, primary), text);
+
+    &.mat-accent {
+      color: theming.get-color-from-palette(map.get($config, accent), text);
+    }
+
+    &.mat-warn {
+      color: theming.get-color-from-palette(map.get($config, warn), text);
+    }
+  }
+}
+
+@mixin typography($config-or-theme) {}
+
+@mixin _density($config-or-theme) {}
+
+@mixin theme($theme-or-color-config) {
+  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+  @include theming.private-check-duplicate-theme-styles($theme, 'mtx-colorpicker') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
+
+    @if $color != null {
+      @include color($color);
+    }
+    @if $density != null {
+      @include _density($density);
+    }
+    @if $typography != null {
+      @include typography($typography);
+    }
+  }
+}

package/colorpicker/colorpicker-animations.d.ts

@@ -0,0 +1,8 @@
+import { AnimationTriggerMetadata } from '@angular/animations';
+/**
+ * Animations used by the colorpicker.
+ * @docs-private
+ */
+export declare const mtxColorpickerAnimations: {
+    readonly transformPanel: AnimationTriggerMetadata;
+};

package/colorpicker/colorpicker-content.scss

@@ -0,0 +1,4 @@
+.mtx-colorpicker-content {
+  display: block;
+  border-radius: 4px;
+}

package/colorpicker/colorpicker-input.d.ts

@@ -0,0 +1,92 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { AfterViewInit, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, ValidationErrors } from '@angular/forms';
+import { ThemePalette } from '@angular/material/core';
+import { MatFormField } from '@angular/material/form-field';
+import { MtxColorpicker } from './colorpicker';
+import * as i0 from "@angular/core";
+export declare class MtxColorPickerInputEvent {
+    /** Reference to the colorpicker input component that emitted the event. */
+    target: MtxColorpickerInput;
+    /** Reference to the native input element associated with the colorpicker input. */
+    targetElement: HTMLElement;
+    /** The new value for the target colorpicker input. */
+    value: string | null;
+    constructor(
+    /** Reference to the colorpicker input component that emitted the event. */
+    target: MtxColorpickerInput, 
+    /** Reference to the native input element associated with the colorpicker input. */
+    targetElement: HTMLElement);
+}
+export declare const MTX_COLORPICKER_VALUE_ACCESSOR: any;
+export declare const MTX_COLORPICKER_VALIDATORS: any;
+export declare type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'hsv';
+export declare class MtxColorpickerInput implements ControlValueAccessor, AfterViewInit, OnDestroy {
+    private _elementRef;
+    private _formField;
+    /** Whether the component has been initialized. */
+    private _isInitialized;
+    set mtxColorpicker(value: MtxColorpicker);
+    _picker: MtxColorpicker;
+    /** Whether the colorpicker-input is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
+    /** The value of the input. */
+    get value(): string | null;
+    set value(value: string | null);
+    private _value;
+    /** The input and output color format. */
+    format: ColorFormat;
+    /** Emits when a `change` event is fired on this `<input>`. */
+    readonly colorChange: EventEmitter<MtxColorPickerInputEvent>;
+    /** Emits when an `input` event is fired on this `<input>`. */
+    readonly colorInput: EventEmitter<MtxColorPickerInputEvent>;
+    /** Emits when the disabled state has changed */
+    _disabledChange: EventEmitter<boolean>;
+    /** Emits when the value changes (either due to user input or programmatic change). */
+    _valueChange: EventEmitter<string | null>;
+    _onTouched: () => void;
+    _validatorOnChange: () => void;
+    private _cvaOnChange;
+    private _pickerSubscription;
+    /** The combined form control validator for this input. */
+    private _validator;
+    /** Whether the last value set on the input was valid. */
+    private _lastValueValid;
+    constructor(_elementRef: ElementRef<HTMLInputElement>, _formField: MatFormField);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    registerOnValidatorChange(fn: () => void): void;
+    /** @docs-private */
+    validate(c: AbstractControl): ValidationErrors | null;
+    /**
+     * @deprecated
+     * @breaking-change 8.0.0 Use `getConnectedOverlayOrigin` instead
+     */
+    getPopupConnectionElementRef(): ElementRef;
+    /**
+     * Gets the element that the colorpicker popup should be connected to.
+     * @return The element to connect the popup to.
+     */
+    getConnectedOverlayOrigin(): ElementRef;
+    /** Gets the ID of an element that should be used a description for the overlay. */
+    getOverlayLabelId(): string | null;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: any) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    _onKeydown(event: KeyboardEvent): void;
+    /** Handles blur events on the input. */
+    _onBlur(): void;
+    _onInput(value: string): void;
+    _onChange(): void;
+    /** Returns the palette used by the input's form field, if any. */
+    getThemePalette(): ThemePalette;
+    /** TODO: Formats a value and sets it on the input element. */
+    private _formatValue;
+    static ngAcceptInputType_value: any;
+    static ngAcceptInputType_disabled: BooleanInput;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxColorpickerInput, [null, { optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxColorpickerInput, "input[mtxColorpicker]", ["mtxColorpickerInput"], { "mtxColorpicker": "mtxColorpicker"; "disabled": "disabled"; "value": "value"; "format": "format"; }, { "colorChange": "colorChange"; "colorInput": "colorInput"; }, never>;
+}

package/colorpicker/colorpicker-module.d.ts

@@ -0,0 +1,15 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./colorpicker";
+import * as i2 from "./colorpicker-input";
+import * as i3 from "./colorpicker-toggle";
+import * as i4 from "@angular/common";
+import * as i5 from "@angular/cdk/overlay";
+import * as i6 from "@angular/cdk/a11y";
+import * as i7 from "@angular/cdk/portal";
+import * as i8 from "@angular/material/button";
+import * as i9 from "ngx-color/chrome";
+export declare class MtxColorpickerModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxColorpickerModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxColorpickerModule, [typeof i1.MtxColorpicker, typeof i1.MtxColorpickerContent, typeof i2.MtxColorpickerInput, typeof i3.MtxColorpickerToggle, typeof i3.MtxColorpickerToggleIcon], [typeof i4.CommonModule, typeof i5.OverlayModule, typeof i6.A11yModule, typeof i7.PortalModule, typeof i8.MatButtonModule, typeof i9.ColorChromeModule], [typeof i1.MtxColorpicker, typeof i1.MtxColorpickerContent, typeof i2.MtxColorpickerInput, typeof i3.MtxColorpickerToggle, typeof i3.MtxColorpickerToggleIcon]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MtxColorpickerModule>;
+}

package/colorpicker/colorpicker-toggle.d.ts

@@ -0,0 +1,38 @@
+import { BooleanInput } from '@angular/cdk/coercion';
+import { AfterContentInit, ChangeDetectorRef, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import { MtxColorpicker } from './colorpicker';
+import * as i0 from "@angular/core";
+/** Can be used to override the icon of a `mtxColorpickerToggle`. */
+export declare class MtxColorpickerToggleIcon {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxColorpickerToggleIcon, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxColorpickerToggleIcon, "[mtxColorpickerToggleIcon]", never, {}, {}, never>;
+}
+export declare class MtxColorpickerToggle implements AfterContentInit, OnChanges, OnDestroy {
+    private _changeDetectorRef;
+    private _stateChanges;
+    /** Colorpicker instance that the button will toggle. */
+    picker: MtxColorpicker;
+    /** Tabindex for the toggle. */
+    tabIndex: number;
+    /** Whether the toggle button is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
+    /** Whether ripples on the toggle should be disabled. */
+    disableRipple: boolean;
+    /** Custom icon set by the consumer. */
+    _customIcon: MtxColorpickerToggleIcon;
+    /** Underlying button element. */
+    _button: MatButton;
+    constructor(_changeDetectorRef: ChangeDetectorRef);
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    ngAfterContentInit(): void;
+    open(event: Event): void;
+    private _watchStateChanges;
+    static ngAcceptInputType_disabled: BooleanInput;
+    static ngAcceptInputType_disableRipple: BooleanInput;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxColorpickerToggle, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxColorpickerToggle, "mtx-colorpicker-toggle", ["mtxColorpickerToggle"], { "picker": "for"; "tabIndex": "tabIndex"; "disabled": "disabled"; "disableRipple": "disableRipple"; }, {}, ["_customIcon"], ["[mtxColorpickerToggleIcon]"]>;
+}

package/colorpicker/colorpicker-toggle.scss

@@ -0,0 +1,23 @@
+.mat-form-field-appearance-legacy {
+  .mat-form-field-prefix,
+  .mat-form-field-suffix {
+    .mtx-colorpicker-toggle-default-icon {
+      width: 1em;
+    }
+  }
+}
+
+.mat-form-field:not(.mat-form-field-appearance-legacy) {
+  .mat-form-field-prefix,
+  .mat-form-field-suffix {
+    .mtx-colorpicker-toggle-default-icon {
+      display: block;
+      width: 1.5em;
+      height: 1.5em;
+    }
+
+    .mat-icon-button .mtx-colorpicker-toggle-default-icon {
+      margin: auto;
+    }
+  }
+}

package/colorpicker/colorpicker.d.ts

@@ -0,0 +1,131 @@
+import { Directionality } from '@angular/cdk/bidi';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { ScrollStrategy, Overlay } from '@angular/cdk/overlay';
+import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, OnChanges, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
+import { CanColor, ThemePalette } from '@angular/material/core';
+import { Subject } from 'rxjs';
+import { ColorFormat, MtxColorpickerInput } from './colorpicker-input';
+import { ColorEvent } from 'ngx-color';
+import * as i0 from "@angular/core";
+/** Injection token that determines the scroll handling while the panel is open. */
+export declare const MTX_COLORPICKER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
+export declare function MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy;
+/** Possible positions for the colorpicker dropdown along the X axis. */
+export declare type ColorpickerDropdownPositionX = 'start' | 'end';
+/** Possible positions for the colorpicker dropdown along the Y axis. */
+export declare type ColorpickerDropdownPositionY = 'above' | 'below';
+export declare const MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
+    provide: InjectionToken<() => ScrollStrategy>;
+    deps: (typeof Overlay)[];
+    useFactory: typeof MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY;
+};
+/** @docs-private */
+declare const _MtxColorpickerContentBase: import("@angular/material/core")._Constructor<CanColor> & import("@angular/material/core")._AbstractConstructor<CanColor> & {
+    new (_elementRef: ElementRef): {
+        _elementRef: ElementRef;
+    };
+};
+export declare class MtxColorpickerContent extends _MtxColorpickerContentBase implements OnDestroy, CanColor {
+    private _changeDetectorRef;
+    picker: MtxColorpicker;
+    /** Current state of the animation. */
+    _animationState: 'enter-dropdown' | 'void';
+    /** Emits when an animation has finished. */
+    readonly _animationDone: Subject<void>;
+    constructor(elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef);
+    _startExitAnimation(): void;
+    ngOnDestroy(): void;
+    getColorString(e: ColorEvent): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxColorpickerContent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxColorpickerContent, "mtx-colorpicker-content", ["mtxColorpickerContent"], { "color": "color"; }, {}, never, never>;
+}
+export declare class MtxColorpicker implements OnChanges, OnDestroy {
+    private _overlay;
+    private _ngZone;
+    private _viewContainerRef;
+    private _dir;
+    private _document;
+    private _scrollStrategy;
+    private _inputStateChanges;
+    /** Custom colorpicker content set by the consumer. */
+    content: TemplateRef<any>;
+    /** Emits when the colorpicker has been opened. */
+    openedStream: EventEmitter<void>;
+    /** Emits when the colorpicker has been closed. */
+    closedStream: EventEmitter<void>;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
+    /** Preferred position of the colorpicker in the X axis. */
+    xPosition: ColorpickerDropdownPositionX;
+    /** Preferred position of the colorpicker in the Y axis. */
+    yPosition: ColorpickerDropdownPositionY;
+    /**
+     * Whether to restore focus to the previously-focused element when the panel is closed.
+     * Note that automatic focus restoration is an accessibility feature and it is recommended that
+     * you provide your own equivalent, if you decide to turn it off.
+     */
+    get restoreFocus(): boolean;
+    set restoreFocus(value: boolean);
+    private _restoreFocus;
+    /** Whether the panel is open. */
+    get opened(): boolean;
+    set opened(value: boolean);
+    private _opened;
+    /** The id for the colorpicker panel. */
+    id: string;
+    /** Color palette to use on the colorpicker's panel. */
+    get color(): ThemePalette;
+    set color(value: ThemePalette);
+    private _color;
+    /** The input and output color format. */
+    get format(): ColorFormat;
+    set format(value: ColorFormat);
+    _format: ColorFormat;
+    /** The currently selected color. */
+    get selected(): string;
+    set selected(value: string);
+    private _validSelected;
+    /** A reference to the overlay when the picker is opened as a popup. */
+    private _overlayRef;
+    /** Reference to the component instance rendered in the overlay. */
+    private _componentRef;
+    /** The element that was focused before the colorpicker was opened. */
+    private _focusedElementBeforeOpen;
+    /** Unique class that will be added to the backdrop so that the test harnesses can look it up. */
+    private _backdropHarnessClass;
+    /** The input element this colorpicker is associated with. */
+    pickerInput: MtxColorpickerInput;
+    /** Emits when the datepicker is disabled. */
+    readonly _disabledChange: Subject<boolean>;
+    /** Emits new selected color when selected color changes. */
+    readonly _selectedChanged: Subject<string>;
+    constructor(_overlay: Overlay, _ngZone: NgZone, _viewContainerRef: ViewContainerRef, scrollStrategy: any, _dir: Directionality, _document: any);
+    ngOnChanges(): void;
+    ngOnDestroy(): void;
+    /** Selects the given color */
+    select(nextVal: string): void;
+    /**
+     * Register an input with this colorpicker.
+     * @param input The colorpicker input to register with this colorpicker.
+     */
+    registerInput(input: MtxColorpickerInput): void;
+    open(): void;
+    /** Close the panel. */
+    close(): void;
+    /** Forwards relevant values from the colorpicker to the colorpicker content inside the overlay. */
+    protected _forwardContentValues(instance: MtxColorpickerContent): void;
+    /** Open the colopicker as a popup. */
+    private _openOverlay;
+    private _destroyOverlay;
+    /** Gets a position strategy that will open the panel as a dropdown. */
+    private _getDropdownStrategy;
+    /** Sets the positions of the colorpicker in dropdown mode based on the current configuration. */
+    private _setConnectedPositions;
+    /** Gets an observable that will emit when the overlay is supposed to be closed. */
+    private _getCloseStream;
+    static ngAcceptInputType_disabled: BooleanInput;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxColorpicker, [null, null, null, null, { optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxColorpicker, "mtx-colorpicker", ["mtxColorpicker"], { "content": "content"; "disabled": "disabled"; "xPosition": "xPosition"; "yPosition": "yPosition"; "restoreFocus": "restoreFocus"; "opened": "opened"; "color": "color"; "format": "format"; }, { "openedStream": "opened"; "closedStream": "closed"; }, never, never>;
+}
+export {};