@ng-matero/extensions 12.5.1 → 12.7.0

package/colorpicker/colorpicker-module.d.ts

@@ -0,0 +1,2 @@
+export declare class MtxColorpickerModule {
+}

package/colorpicker/colorpicker-toggle.d.ts

@@ -0,0 +1,33 @@
+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';
+/** Can be used to override the icon of a `mtxColorpickerToggle`. */
+export declare class MtxColorpickerToggleIcon {
+}
+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;
+}

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,126 @@
+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';
+/** 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/common-behaviors/constructor").Constructor<CanColor> & import("@angular/material/core/common-behaviors/constructor").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;
+}
+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;
+}
+export {};

package/colorpicker/mtxColorpicker.metadata.json

@@ -0,0 +1 @@
+{"__symbolic":"module","version":4,"metadata":{"MtxColorpickerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":16,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/cdk/a11y","name":"A11yModule","line":20,"character":4},{"__symbolic":"reference","module":"@angular/cdk/portal","name":"PortalModule","line":21,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":22,"character":4},{"__symbolic":"reference","module":"ngx-color/chrome","name":"ColorChromeModule","line":23,"character":4}],"exports":[{"__symbolic":"reference","name":"MtxColorpicker"},{"__symbolic":"reference","name":"MtxColorpickerContent"},{"__symbolic":"reference","name":"MtxColorpickerInput"},{"__symbolic":"reference","name":"MtxColorpickerToggle"},{"__symbolic":"reference","name":"MtxColorpickerToggleIcon"}],"declarations":[{"__symbolic":"reference","name":"MtxColorpicker"},{"__symbolic":"reference","name":"MtxColorpickerContent"},{"__symbolic":"reference","name":"MtxColorpickerInput"},{"__symbolic":"reference","name":"MtxColorpickerToggle"},{"__symbolic":"reference","name":"MtxColorpickerToggleIcon"}],"providers":[{"__symbolic":"reference","name":"MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER"}]}]}],"members":{}},"MTX_COLORPICKER_SCROLL_STRATEGY":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":45,"character":51},"arguments":["mtx-colorpicker-scroll-strategy"]},"MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY":{"__symbolic":"function","parameters":["overlay"],"value":{"__symbolic":"error","message":"Lambda not supported","line":50,"character":9,"module":"./colorpicker"}},"MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER":{"provide":{"__symbolic":"reference","name":"MTX_COLORPICKER_SCROLL_STRATEGY"},"deps":[{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":61,"character":9}],"useFactory":{"__symbolic":"reference","name":"MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY"}},"MtxColorpickerContent":{"__symbolic":"class","extends":{"__symbolic":"error","message":"Symbol reference expected","line":89,"character":10,"module":"./colorpicker"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":73,"character":1},"arguments":[{"selector":"mtx-colorpicker-content","host":{"class":"mtx-colorpicker-content","[@transformPanel]":"_animationState","(@transformPanel.done)":"_animationDone.next()","$quoted$":["class","[@transformPanel]","(@transformPanel.done)"]},"animations":[{"__symbolic":"select","expression":{"__symbolic":"reference","name":"mtxColorpickerAnimations"},"member":"transformPanel"}],"exportAs":"mtxColorpickerContent","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":84,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":85,"character":19},"member":"OnPush"},"inputs":["color"],"template":"<ng-template [ngIf]=\"picker.content\" [ngIfElse]=\"default\"\n             [ngTemplateOutlet]=\"picker.content\">\n</ng-template>\n<ng-template #default>\n  <color-chrome [color]=\"picker.selected\"\n                (onChangeComplete)=\"picker.select(getColorString($event))\">\n  </color-chrome>\n</ng-template>\n","styles":[".mtx-colorpicker-content{display:block;border-radius:4px}\n"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":100,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":100,"character":66}]}],"_startExitAnimation":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"getColorString":[{"__symbolic":"method"}]}},"ColorpickerDropdownPositionX":{"__symbolic":"interface"},"ColorpickerDropdownPositionY":{"__symbolic":"interface"},"MtxColorpicker":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":123,"character":1},"arguments":[{"selector":"mtx-colorpicker","template":"","exportAs":"mtxColorpicker","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":127,"character":19},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":128,"character":17},"member":"None"}}]}],"members":{"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":135,"character":3}}]}],"openedStream":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":138,"character":3},"arguments":["opened"]}]}],"closedStream":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":141,"character":3},"arguments":["closed"]}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":143,"character":3}}]}],"xPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":159,"character":3}}]}],"yPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":163,"character":3}}]}],"restoreFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":171,"character":3}}]}],"opened":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":181,"character":3}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":194,"character":3}}]}],"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":204,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":247,"character":5},"arguments":[{"__symbolic":"reference","name":"MTX_COLORPICKER_SCROLL_STRATEGY"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":248,"character":5}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":249,"character":5}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":249,"character":17},"arguments":[{"__symbolic":"reference","module":"@angular/common","name":"DOCUMENT","line":249,"character":24}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"Overlay","line":244,"character":22},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":245,"character":21},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":246,"character":31},{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","module":"@angular/cdk/bidi","name":"Directionality","line":248,"character":30},{"__symbolic":"reference","name":"any"}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"registerInput":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"_forwardContentValues":[{"__symbolic":"method"}],"_openOverlay":[{"__symbolic":"method"}],"_destroyOverlay":[{"__symbolic":"method"}],"_getDropdownStrategy":[{"__symbolic":"method"}],"_setConnectedPositions":[{"__symbolic":"method"}],"_getCloseStream":[{"__symbolic":"method"}]}},"MTX_COLORPICKER_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":43,"character":11},"useExisting":{"__symbolic":"reference","name":"MtxColorpickerInput"},"multi":true},"MTX_COLORPICKER_VALIDATORS":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALIDATORS","line":49,"character":11},"useExisting":{"__symbolic":"reference","name":"MtxColorpickerInput"},"multi":true},"MtxColorpickerInput":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":56,"character":1},"arguments":[{"selector":"input[mtxColorpicker]","providers":[{"__symbolic":"reference","name":"MTX_COLORPICKER_VALUE_ACCESSOR"},{"__symbolic":"reference","name":"MTX_COLORPICKER_VALIDATORS"},{"provide":{"__symbolic":"reference","module":"@angular/material/input","name":"MAT_INPUT_VALUE_ACCESSOR","line":61,"character":15},"useExisting":{"__symbolic":"reference","name":"MtxColorpickerInput"}}],"host":{"class":"mtx-colorpicker-input","[attr.aria-haspopup]":"_picker ? \"dialog\" : null","[attr.aria-owns]":"(_picker?.opened && _picker.id) || null","[disabled]":"disabled","(input)":"_onInput($event.target.value)","(change)":"_onChange()","(blur)":"_onBlur()","(keydown)":"_onKeydown($event)","$quoted$":["class","[attr.aria-haspopup]","[attr.aria-owns]","[disabled]","(input)","(change)","(blur)","(keydown)"]},"exportAs":"mtxColorpickerInput"}]}],"members":{"mtxColorpicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":100,"character":3}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":3}}]}],"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":141,"character":3}}]}],"colorChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":144,"character":3}}]}],"colorInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":148,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":173,"character":5}}]],"parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":172,"character":36,"context":{"typeName":"HTMLInputElement"},"module":"./colorpicker-input"}]},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormField","line":173,"character":36}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"registerOnValidatorChange":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"getPopupConnectionElementRef":[{"__symbolic":"method"}],"getConnectedOverlayOrigin":[{"__symbolic":"method"}],"getOverlayLabelId":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"_onKeydown":[{"__symbolic":"method"}],"_onBlur":[{"__symbolic":"method"}],"_onInput":[{"__symbolic":"method"}],"_onChange":[{"__symbolic":"method"}],"getThemePalette":[{"__symbolic":"method"}],"_formatValue":[{"__symbolic":"method"}]}},"ColorFormat":{"__symbolic":"interface"},"MtxColorpickerToggleIcon":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":21,"character":1},"arguments":[{"selector":"[mtxColorpickerToggleIcon]"}]}],"members":{}},"MtxColorpickerToggle":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":26,"character":1},"arguments":[{"selector":"mtx-colorpicker-toggle","host":{"class":"mtx-colorpicker-toggle","[attr.tabindex]":"disabled ? null : -1","[class.mtx-colorpicker-toggle-active]":"picker && picker.opened","[class.mat-accent]":"picker && picker.color === \"accent\"","[class.mat-warn]":"picker && picker.color === \"warn\"","(focus)":"_button.focus()","$quoted$":["class","[attr.tabindex]","[class.mtx-colorpicker-toggle-active]","[class.mat-accent]","[class.mat-warn]","(focus)"]},"exportAs":"mtxColorpickerToggle","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":41,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":42,"character":19},"member":"OnPush"},"template":"<button #button\n        mat-icon-button\n        type=\"button\"\n        [attr.aria-haspopup]=\"picker ? 'dialog' : null\"\n        [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n        [disabled]=\"disabled\"\n        [disableRipple]=\"disableRipple\"\n        (click)=\"open($event)\">\n\n  <svg *ngIf=\"!_customIcon\"\n       class=\"mtx-colorpicker-toggle-default-icon\"\n       viewBox=\"0 0 24 24\"\n       width=\"24px\"\n       height=\"24px\"\n       fill=\"currentColor\"\n       focusable=\"false\">\n    <path\n          d=\"M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z\" />\n  </svg>\n\n  <ng-content select=\"[mtxColorpickerToggleIcon]\"></ng-content>\n</button>\n","styles":[".mat-form-field-appearance-legacy .mat-form-field-prefix .mtx-colorpicker-toggle-default-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mtx-colorpicker-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mtx-colorpicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mtx-colorpicker-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mtx-colorpicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mtx-colorpicker-toggle-default-icon{margin:auto}\n"]}]}],"members":{"picker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":3},"arguments":["for"]}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":3}}]}],"disableRipple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3}}]}],"_customIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":71,"character":3},"arguments":[{"__symbolic":"reference","name":"MtxColorpickerToggleIcon"}]}]}],"_button":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":74,"character":3},"arguments":["button"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":76,"character":42}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"_watchStateChanges":[{"__symbolic":"method"}]}},"mtxColorpickerAnimations":{"transformPanel":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":17,"character":18},"arguments":["transformPanel",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":18,"character":4},"arguments":["void => enter-dropdown",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":20,"character":6},"arguments":["120ms cubic-bezier(0, 0, 0.2, 1)",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"keyframes","line":22,"character":8},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":23,"character":10},"arguments":[{"opacity":0,"transform":"scale(1, 0.8)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":24,"character":10},"arguments":[{"opacity":1,"transform":"scale(1, 1)"}]}]]}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":28,"character":4},"arguments":["* => void",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":28,"character":28},"arguments":["100ms linear",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":28,"character":52},"arguments":[{"opacity":0}]}]}]}]]}}},"origins":{"MtxColorpickerModule":"./colorpicker-module","MTX_COLORPICKER_SCROLL_STRATEGY":"./colorpicker","MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY":"./colorpicker","MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER":"./colorpicker","MtxColorpickerContent":"./colorpicker","ColorpickerDropdownPositionX":"./colorpicker","ColorpickerDropdownPositionY":"./colorpicker","MtxColorpicker":"./colorpicker","MTX_COLORPICKER_VALUE_ACCESSOR":"./colorpicker-input","MTX_COLORPICKER_VALIDATORS":"./colorpicker-input","MtxColorpickerInput":"./colorpicker-input","ColorFormat":"./colorpicker-input","MtxColorpickerToggleIcon":"./colorpicker-toggle","MtxColorpickerToggle":"./colorpicker-toggle","mtxColorpickerAnimations":"./colorpicker-animations"},"importAs":"@ng-matero/extensions/colorpicker"}

package/colorpicker/package.json

@@ -0,0 +1,11 @@
+{
+  "main": "../bundles/mtxColorpicker.umd.js",
+  "module": "../fesm2015/mtxColorpicker.js",
+  "es2015": "../fesm2015/mtxColorpicker.js",
+  "esm2015": "../esm2015/colorpicker/mtxColorpicker.js",
+  "fesm2015": "../fesm2015/mtxColorpicker.js",
+  "typings": "mtxColorpicker.d.ts",
+  "metadata": "mtxColorpicker.metadata.json",
+  "sideEffects": false,
+  "name": "@ng-matero/extensions/colorpicker"
+}

package/colorpicker/public-api.d.ts

@@ -0,0 +1,5 @@
+export * from './colorpicker-module';
+export { MTX_COLORPICKER_SCROLL_STRATEGY, MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY, MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, MtxColorpickerContent, ColorpickerDropdownPositionX, ColorpickerDropdownPositionY, MtxColorpicker, } from './colorpicker';
+export { MTX_COLORPICKER_VALUE_ACCESSOR, MTX_COLORPICKER_VALIDATORS, MtxColorpickerInput, ColorFormat, } from './colorpicker-input';
+export * from './colorpicker-toggle';
+export * from './colorpicker-animations';

package/datetimepicker/_datetimepicker-theme.scss

@@ -120,6 +120,18 @@ $clock-font-size: 14px !default;
       color: $disabled-color;
     }
   }
+
+  .mtx-datetimepicker-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) {

package/datetimepicker/calendar.d.ts

@@ -1,8 +1,7 @@
 import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy } from '@angular/core';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { MatDatepickerIntl } from '@angular/material/datepicker';
-import { DatetimeAdapter } from '@ng-matero/extensions/core';
-import { MtxDatetimeFormats } from '@ng-matero/extensions/core';
+import { DatetimeAdapter, MtxDatetimeFormats } from '@ng-matero/extensions/core';
 import { MtxClockView } from './clock';
 import { MtxDatetimepickerType } from './datetimepicker';
 import { MtxDatetimepickerFilterType } from './datetimepicker-filtertype';
@@ -17,7 +16,6 @@ export declare class MtxCalendar<D> implements AfterContentInit, OnDestroy {
     private _ngZone;
     private _adapter;
     private _dateFormats;
-    _userSelection: EventEmitter<void>;
     get multiYearSelector(): boolean;
     set multiYearSelector(value: boolean);
     private _multiYearSelector;
@@ -30,19 +28,13 @@ export declare class MtxCalendar<D> implements AfterContentInit, OnDestroy {
     timeInterval: number;
     /** A function used to filter which dates are selectable. */
     dateFilter: (date: D, type: MtxDatetimepickerFilterType) => boolean;
-    ariaLabel: string;
-    ariaNextMonthLabel: string;
-    ariaPrevMonthLabel: string;
-    ariaNextYearLabel: string;
-    ariaPrevYearLabel: string;
-    ariaNextMultiYearLabel: string;
-    ariaPrevMultiYearLabel: string;
     /** Prevent user to select same date time */
     preventSameDateTimeSelection: boolean;
     /** Emits when the currently selected date changes. */
     selectedChange: EventEmitter<D>;
     /** Emits when the view has been changed. */
     viewChanged: EventEmitter<MtxCalendarView>;
+    _userSelection: EventEmitter<void>;
     _AMPM: string;
     _clockView: MtxClockView;
     _calendarState: string;

package/datetimepicker/clock.d.ts

@@ -1,3 +1,4 @@
+import { BooleanInput } from '@angular/cdk/coercion';
 import { AfterContentInit, ElementRef, EventEmitter } from '@angular/core';
 import { DatetimeAdapter } from '@ng-matero/extensions/core';
 import { MtxDatetimepickerFilterType } from './datetimepicker-filtertype';
@@ -13,14 +14,16 @@ export declare type MtxClockView = 'hour' | 'minute';
 export declare class MtxClock<D> implements AfterContentInit {
     private _element;
     private _adapter;
-    _userSelection: EventEmitter<void>;
     /** A function used to filter which dates are selectable. */
     dateFilter: (date: D, type: MtxDatetimepickerFilterType) => boolean;
     interval: number;
     twelvehour: boolean;
     /** Emits when the currently selected date changes. */
     selectedChange: EventEmitter<D>;
+    /** Emits when any date is activated. */
     activeDateChange: EventEmitter<D>;
+    /** Emits when any date is selected. */
+    readonly _userSelection: EventEmitter<void>;
     /** Hours and Minutes representing the clock view. */
     _hours: any[];
     _minutes: any[];
@@ -32,32 +35,29 @@ export declare class MtxClock<D> implements AfterContentInit {
     private mouseMoveListener;
     private mouseUpListener;
     constructor(_element: ElementRef, _adapter: DatetimeAdapter<D>);
-    private _activeDate;
     /**
      * The date to display in this clock view.
      */
     get activeDate(): D;
     set activeDate(value: D);
-    private _selected;
+    private _activeDate;
     /** The currently selected date. */
     get selected(): D | null;
     set selected(value: D | null);
-    private _minDate;
+    private _selected;
     /** The minimum selectable date. */
     get minDate(): D | null;
     set minDate(value: D | null);
-    private _maxDate;
+    private _minDate;
     /** The maximum selectable date. */
     get maxDate(): D | null;
     set maxDate(value: D | null);
+    private _maxDate;
     /** Whether the clock should be started in hour or minute view. */
     set startView(value: MtxClockView);
     get _hand(): any;
     ngAfterContentInit(): void;
-    /**
-     * TODO: use `fromEvent` of rxjs.
-     * Handles mousedown events on the clock body.
-     */
+    /** Handles mousedown events on the clock body. */
     _handleMousedown(event: any): void;
     _handleMousemove(event: any): void;
     _handleMouseup(): void;
@@ -68,4 +68,5 @@ export declare class MtxClock<D> implements AfterContentInit {
      * @param event
      */
     private setTime;
+    static ngAcceptInputType_twelvehour: BooleanInput;
 }

package/datetimepicker/datetimepicker-animations.d.ts

@@ -1,8 +1,10 @@
 import { AnimationTriggerMetadata } from '@angular/animations';
 /**
- * This animation fades in the background color and text content of the
- * select's options. It is time delayed to occur 100ms after the overlay
- * panel has transformed in.
+ * Animations used by the Material datepicker.
+ * @docs-private
  */
-export declare const fadeInContent: AnimationTriggerMetadata;
-export declare const slideCalendar: AnimationTriggerMetadata;
+export declare const mtxDatetimepickerAnimations: {
+    readonly transformPanel: AnimationTriggerMetadata;
+    readonly fadeInCalendar: AnimationTriggerMetadata;
+    readonly slideCalendar: AnimationTriggerMetadata;
+};

package/datetimepicker/datetimepicker-input.d.ts

@@ -1,9 +1,9 @@
 import { AfterContentInit, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
 import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
 import { BooleanInput } from '@angular/cdk/coercion';
+import { ThemePalette } from '@angular/material/core';
 import { MatFormField } from '@angular/material/form-field';
-import { DatetimeAdapter } from '@ng-matero/extensions/core';
-import { MtxDatetimeFormats } from '@ng-matero/extensions/core';
+import { DatetimeAdapter, MtxDatetimeFormats } from '@ng-matero/extensions/core';
 import { MtxDatetimepicker } from './datetimepicker';
 import { MtxDatetimepickerFilterType } from './datetimepicker-filtertype';
 export declare const MAT_DATETIMEPICKER_VALUE_ACCESSOR: any;
@@ -98,5 +98,7 @@ export declare class MtxDatetimepickerInput<D> implements AfterContentInit, Cont
     private _validator;
     /** Formats a value and sets it on the input element. */
     private _formatValue;
+    /** Returns the palette used by the input's form field, if any. */
+    getThemePalette(): ThemePalette;
     static ngAcceptInputType_disabled: BooleanInput;
 }

package/datetimepicker/datetimepicker-toggle.d.ts

@@ -1,22 +1,35 @@
 import { AfterContentInit, ChangeDetectorRef, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import { BooleanInput } from '@angular/cdk/coercion';
+import { MatButton } from '@angular/material/button';
 import { MatDatepickerIntl } from '@angular/material/datepicker';
 import { MtxDatetimepicker } from './datetimepicker';
+/** Can be used to override the icon of a `mtxDatetimepickerToggle`. */
+export declare class MtxDatetimepickerToggleIcon {
+}
 export declare class MtxDatetimepickerToggle<D> implements AfterContentInit, OnChanges, OnDestroy {
     _intl: MatDatepickerIntl;
     private _changeDetectorRef;
+    private _stateChanges;
     /** Datetimepicker instance that the button will toggle. */
     datetimepicker: MtxDatetimepicker<D>;
-    private _stateChanges;
-    constructor(_intl: MatDatepickerIntl, _changeDetectorRef: ChangeDetectorRef);
+    /** 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: MtxDatetimepickerToggleIcon;
+    /** Underlying button element. */
+    _button: MatButton;
+    constructor(_intl: MatDatepickerIntl, _changeDetectorRef: ChangeDetectorRef);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     ngAfterContentInit(): void;
     _open(event: Event): void;
     private _watchStateChanges;
     static ngAcceptInputType_disabled: BooleanInput;
+    static ngAcceptInputType_disableRipple: BooleanInput;
 }

package/datetimepicker/datetimepicker-toggle.scss

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