@ng-matero/extensions 19.4.1 → 20.0.1

package/colorpicker/_m3-colorpicker.scss

@@ -0,0 +1,23 @@
+@use 'sass:map';
+@use '../core/tokens/m3-utils';
+@use '../core/tokens/m3';
+
+/// Generates custom tokens for the mtx-colorpicker.
+@function get-tokens($theme: m3.$sys-theme, $color-variant: null) {
+  $system: m3-utils.get-system($theme);
+  @if $color-variant {
+    $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+  }
+
+  $tokens: (
+    base: (),
+    color: (
+      colorpicker-toggle-active-state-icon-color: map.get($system, on-surface-variant),
+      colorpicker-toggle-icon-color: map.get($system, on-surface-variant),
+    ),
+    typography: (),
+    density: (),
+  );
+
+  @return $tokens;
+}

package/colorpicker/colorpicker-toggle.scss

@@ -1,23 +1,18 @@
 @use '@angular/cdk';
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m2/mtx/colorpicker' as tokens-mtx-colorpicker;
+@use './m3-colorpicker';
 
-$_tokens: tokens-mtx-colorpicker.$prefix, tokens-mtx-colorpicker.get-token-slots();
+$fallbacks: m3-colorpicker.get-tokens();
 
 // We support the case where the form field is disabled, but the colorpicker is not.
 // MDC sets `pointer-events: none` on disabled form fields which prevents clicks on the toggle.
 .mtx-colorpicker-toggle {
   pointer-events: auto;
-
-  @include token-utils.use-tokens($_tokens...) {
-    @include token-utils.create-token-slot(color, toggle-icon-color);
-  }
+  color: token-utils.slot(colorpicker-toggle-icon-color, $fallbacks);
 }
 
 .mtx-colorpicker-toggle-active {
-  @include token-utils.use-tokens($_tokens...) {
-    @include token-utils.create-token-slot(color, toggle-active-state-icon-color);
-  }
+  color: token-utils.slot(colorpicker-toggle-active-state-icon-color, $fallbacks);
 }
 
 @include cdk.high-contrast(active, off) {

package/colorpicker/index.d.ts

@@ -1,5 +1,287 @@
+import * as i0 from '@angular/core';
+import { AfterViewInit, OnDestroy, EventEmitter, ElementRef, InjectionToken, OnChanges, TemplateRef, AfterContentInit, SimpleChanges } from '@angular/core';
+import * as i1 from '@angular/common';
+import * as i2 from '@angular/cdk/overlay';
+import { ScrollStrategy, Overlay } from '@angular/cdk/overlay';
+import * as i3 from '@angular/cdk/a11y';
+import * as i4 from '@angular/cdk/portal';
+import * as i5 from '@angular/material/button';
+import { MatButton } from '@angular/material/button';
+import * as i6 from 'ngx-color/chrome';
+import { ThemePalette } from '@angular/material/core';
+import { Subject } from 'rxjs';
+import { ColorEvent } from 'ngx-color';
+import { ControlValueAccessor, AbstractControl, ValidationErrors } from '@angular/forms';
+
+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);
+}
+declare const MTX_COLORPICKER_VALUE_ACCESSOR: any;
+declare const MTX_COLORPICKER_VALIDATORS: any;
+type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'hsv';
+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;
+    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 ɵfac: i0.ɵɵFactoryDeclaration<MtxColorpickerInput, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxColorpickerInput, "input[mtxColorpicker]", ["mtxColorpickerInput"], { "mtxColorpicker": { "alias": "mtxColorpicker"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "value": { "alias": "value"; "required": false; }; "format": { "alias": "format"; "required": false; }; }, { "colorChange": "colorChange"; "colorInput": "colorInput"; }, never, never, true, never>;
+    static ngAcceptInputType_disabled: unknown;
+}
+
+/** Injection token that determines the scroll handling while the panel is open. */
+declare const MTX_COLORPICKER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
 /**
- * Generated bundle index. Do not edit.
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
  */
-/// <amd-module name="@ng-matero/extensions/colorpicker" />
-export * from './public-api';
+declare function MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy;
+/** Possible positions for the colorpicker dropdown along the X axis. */
+type ColorpickerDropdownPositionX = 'start' | 'end';
+/** Possible positions for the colorpicker dropdown along the Y axis. */
+type ColorpickerDropdownPositionY = 'above' | 'below';
+/**
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
+ */
+declare const MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
+    provide: InjectionToken<() => ScrollStrategy>;
+    deps: (typeof Overlay)[];
+    useFactory: typeof MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY;
+};
+declare class MtxColorpickerContent implements OnDestroy {
+    protected _elementRef: ElementRef<HTMLElement>;
+    protected _animationsDisabled: boolean;
+    private _changeDetectorRef;
+    private _ngZone;
+    private _eventCleanups;
+    private _animationFallback;
+    color: ThemePalette;
+    picker: MtxColorpicker;
+    /** Emits when an animation has finished. */
+    readonly _animationDone: Subject<void>;
+    /** Whether there is an in-progress animation. */
+    _isAnimating: boolean;
+    constructor();
+    ngOnDestroy(): void;
+    _startExitAnimation(): void;
+    private _handleAnimationEvent;
+    getColorString(e: ColorEvent): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxColorpickerContent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxColorpickerContent, "mtx-colorpicker-content", ["mtxColorpickerContent"], { "color": { "alias": "color"; "required": false; }; }, {}, never, never, true, never>;
+}
+declare class MtxColorpicker implements OnChanges, OnDestroy {
+    private _overlay;
+    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.
+     */
+    restoreFocus: boolean;
+    /** 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 colorpicker is disabled. */
+    readonly _disabledChange: Subject<boolean>;
+    /** Emits new selected color when selected color changes. */
+    readonly _selectedChanged: Subject<string>;
+    private _injector;
+    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 the panel. */
+    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;
+    /** Destroys the current overlay. */
+    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 ɵfac: i0.ɵɵFactoryDeclaration<MtxColorpicker, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxColorpicker, "mtx-colorpicker", ["mtxColorpicker"], { "content": { "alias": "content"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "xPosition": { "alias": "xPosition"; "required": false; }; "yPosition": { "alias": "yPosition"; "required": false; }; "restoreFocus": { "alias": "restoreFocus"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; "color": { "alias": "color"; "required": false; }; "format": { "alias": "format"; "required": false; }; }, { "openedStream": "opened"; "closedStream": "closed"; }, never, never, true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_restoreFocus: unknown;
+    static ngAcceptInputType_opened: unknown;
+}
+
+/** Can be used to override the icon of a `mtxColorpickerToggle`. */
+declare class MtxColorpickerToggleIcon {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxColorpickerToggleIcon, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxColorpickerToggleIcon, "[mtxColorpickerToggleIcon]", never, {}, {}, never, never, true, never>;
+}
+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 | null;
+    /** Screen-reader label for the button. */
+    ariaLabel: string;
+    /** 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();
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    ngAfterContentInit(): void;
+    _open(event: Event): void;
+    private _watchStateChanges;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxColorpickerToggle, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxColorpickerToggle, "mtx-colorpicker-toggle", ["mtxColorpickerToggle"], { "picker": { "alias": "for"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; }, {}, ["_customIcon"], ["[mtxColorpickerToggleIcon]"], true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_disableRipple: unknown;
+}
+
+declare class MtxColorpickerModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxColorpickerModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxColorpickerModule, never, [typeof i1.CommonModule, typeof i2.OverlayModule, typeof i3.A11yModule, typeof i4.PortalModule, typeof i5.MatButtonModule, typeof i6.ColorChromeModule, typeof MtxColorpicker, typeof MtxColorpickerContent, typeof MtxColorpickerInput, typeof MtxColorpickerToggle, typeof MtxColorpickerToggleIcon], [typeof MtxColorpicker, typeof MtxColorpickerContent, typeof MtxColorpickerInput, typeof MtxColorpickerToggle, typeof MtxColorpickerToggleIcon]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MtxColorpickerModule>;
+}
+
+/**
+ * Animations used by the colorpicker.
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
+ */
+declare const mtxColorpickerAnimations: {
+    readonly transformPanel: any;
+};
+
+export { MTX_COLORPICKER_SCROLL_STRATEGY, MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY, MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, MTX_COLORPICKER_VALIDATORS, MTX_COLORPICKER_VALUE_ACCESSOR, MtxColorpicker, MtxColorpickerContent, MtxColorpickerInput, MtxColorpickerModule, MtxColorpickerToggle, MtxColorpickerToggleIcon, mtxColorpickerAnimations };
+export type { ColorFormat, ColorpickerDropdownPositionX, ColorpickerDropdownPositionY };