angular-material-palette-generator/index.d.ts

This package lets you refine the color palettes to be integrated into Sass theme files generated by the Angular CLI (`ng generate @angular/material:theme-color`).

import * as i0 from '@angular/core';
import { WritableSignal, Signal } from '@angular/core';
import * as _angular_forms from '@angular/forms';
import { ControlValueAccessor, FormControl } from '@angular/forms';
import * as angular_material_palette_generator from 'angular-material-palette-generator';

type CubicBezierParams = {
    p1x: number;
    p1y: number;
    p2x: number;
    p2y: number;
};

type CubicBezierControlColors = {
    linearColor: string;
    curveColor: string;
    stickColor: string;
};
type CubicBezierControlDirection = 'up' | 'right' | 'down' | 'left';

declare class CubicBezierControlComponent implements ControlValueAccessor {
    private container;
    params: i0.ModelSignal<CubicBezierParams>;
    private cubicBezier;
    private canvasRef;
    private canvasHandler;
    canvasSize: i0.InputSignal<number>;
    private p1;
    private p2;
    disabled: i0.ModelSignal<boolean>;
    skipNextPointsUpdate: boolean;
    private cdkDrags;
    constructor();
    private updatePoints;
    protected updateParam(p: 'p1' | 'p2'): void;
    protected moveParams(p: 'p1' | 'p2', direction: CubicBezierControlDirection): void;
    private updateCanvas;
    private onChange;
    private onTouched;
    registerOnChange(onChange: (params: CubicBezierParams) => undefined): void;
    registerOnTouched(onTouched: () => void): void;
    writeValue(params: CubicBezierParams | null | undefined): void;
    setDisabledState?(disabled: boolean): void;
    protected cssVarConfig: CubicBezierControlColors;
    protected colorMap: i0.WritableSignal<CubicBezierControlColors>;
    static ɵfac: i0.ɵɵFactoryDeclaration<CubicBezierControlComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<CubicBezierControlComponent, "pg-cubic-bezier-control", never, { "params": { "alias": "params"; "required": false; "isSignal": true; }; "canvasSize": { "alias": "canvasSize"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "params": "paramsChange"; "disabled": "disabledChange"; }, never, never, true, never>;
}

type PaletteGenFormValue = {
    color: string;
    start: number;
    end: number;
    params: CubicBezierParams;
    reverse: boolean;
    neutral: boolean;
};

type PaletteGenFormValueSnapshot = {
    id: number;
    value: string;
};

type PaletteName = 'primary' | 'secondary' | 'tertiary' | 'neutral' | 'neutral-variant' | 'error';
type PaletteMode = 'light' | 'dark';
type PaletteTokenMap = Record<number, string[]>;
type PaletteTokenMatching = Record<PaletteMode, PaletteTokenMap>;
type PaletteTokenMatchingMap = Record<PaletteName, PaletteTokenMatching>;
type PalettePercentageMap = Record<string, number>;
type PalettePercentageMatching = Record<PaletteMode, PalettePercentageMap>;
type PalettePercentageMatchingMap = Record<PaletteName, PalettePercentageMatching>;

type PaletteGenData = {
    list: PaletteGenDataListItem[];
    colorMap: Record<number, string>;
};
type PaletteGenDataListItem = {
    percentage: number;
    color: string;
};
type PaletteGenState = {
    name: PaletteName;
    mode: PaletteMode;
};

declare class PaletteGenService {
    private document;
    private localStorage;
    paletteMode: WritableSignal<PaletteMode>;
    paletteName: WritableSignal<PaletteName>;
    formValueMap: Record<PaletteName, WritableSignal<PaletteGenFormValue>>;
    formValue: Signal<WritableSignal<PaletteGenFormValue>>;
    dataMap: Record<PaletteName, Signal<PaletteGenData>>;
    formValueSnapshotsMap: Record<PaletteName, WritableSignal<PaletteGenFormValueSnapshot[]>>;
    reset(): void;
    controlSize: WritableSignal<number>;
    refreshCanvas?: Signal<unknown>;
    refreshCanvasOn(trigger: Signal<unknown>): void;
    constructor();
    sassMapsToClipboard(): void;
    readonly formValueMapStorageKey = "pg-palette-gen-service.form-value-map";
    private restoreFormValueMap;
    private storeFormValueMap;
    readonly formValueMapSnapshotsStorageKey = "pg-palette-gen-service.form-value-snapshots-map";
    private restoreFormValueSnapshotsMap;
    private storeFormValueSnapshotsMap;
    readonly paletteStateStorageKey = "pg-palette-gen-service.palette-state";
    private restorePaletteState;
    private storePaletteState;
    static ɵfac: i0.ɵɵFactoryDeclaration<PaletteGenService, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<PaletteGenService>;
}

declare class PaletteGenRendererService {
    private injector;
    private renderer;
    private document;
    protected service: PaletteGenService;
    private tokens;
    private getComputedTokens;
    getStyle(): string;
    private _isPageSharingActive;
    isPageSharingActive: Signal<boolean>;
    private effectRef?;
    enablePageSharing(): void;
    disablePageSharing(): void;
    togglePageSharing(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<PaletteGenRendererService, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<PaletteGenRendererService>;
}

declare class PaletteGenContainerComponent {
    protected service: PaletteGenService;
    protected rendererService: PaletteGenRendererService;
    hideLogo: i0.InputSignalWithTransform<boolean, unknown>;
    protected drawerOpened: i0.WritableSignal<boolean>;
    protected toggleDrawer(): void;
    private matchDesktop;
    protected isDesktop: i0.Signal<boolean | undefined>;
    static ɵfac: i0.ɵɵFactoryDeclaration<PaletteGenContainerComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<PaletteGenContainerComponent, "pg-palette-gen-container", never, { "hideLogo": { "alias": "hideLogo"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
}

type PaletteMatchingConfig = {
    name: PaletteName | undefined;
    mode: PaletteMode;
};

declare class PaletteGenContentComponent {
    protected service: PaletteGenService;
    protected viewList: readonly ["palette", "overview", "component"];
    protected view: i0.WritableSignal<"palette" | "overview" | "component">;
    protected formValueMirror: i0.WritableSignal<PaletteGenFormValue | undefined>;
    protected setMirror(): void;
    protected unsetMirror(): void;
    constructor();
    protected compact: i0.WritableSignal<boolean>;
    protected compactAction: i0.Signal<"Expand preview" | "Reduce preview">;
    protected toggleCompact(): void;
    protected matchingConfig: i0.Signal<PaletteMatchingConfig>;
    private resetDialog;
    private resetTemplate;
    protected openResetDialog(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<PaletteGenContentComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<PaletteGenContentComponent, "pg-palette-gen-content", never, {}, {}, never, ["*"], true, never>;
}

declare class PaletteGenFormComponent {
    protected service: PaletteGenService;
    protected paletteNames: PaletteName[];
    hidePaletteNamesSelector: i0.InputSignalWithTransform<boolean, unknown>;
    protected form: _angular_forms.FormGroup<{
        color: _angular_forms.FormControl<string | null>;
        start: _angular_forms.FormControl<number | null>;
        end: _angular_forms.FormControl<number | null>;
        params: _angular_forms.FormControl<angular_material_palette_generator.CubicBezierParams | null>;
        reverse: _angular_forms.FormControl<boolean | null>;
        neutral: _angular_forms.FormControl<boolean | null>;
    }>;
    constructor();
    private handleFormStatusChanges;
    private handleServiceFormValue;
    static ɵfac: i0.ɵɵFactoryDeclaration<PaletteGenFormComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<PaletteGenFormComponent, "pg-palette-gen-form", never, { "hidePaletteNamesSelector": { "alias": "hidePaletteNamesSelector"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

declare class PaletteGenImportComponent {
    private service;
    private importDialog?;
    private dialog;
    private importTemplate;
    protected importCtrl: FormControl<string | null>;
    protected openDialog(): void;
    protected import(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<PaletteGenImportComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<PaletteGenImportComponent, "pg-palette-gen-import", never, {}, {}, never, never, true, never>;
}

declare class PaletteGenLogoComponent {
    static ɵfac: i0.ɵɵFactoryDeclaration<PaletteGenLogoComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<PaletteGenLogoComponent, "pg-palette-gen-logo", never, {}, {}, never, never, true, never>;
}

declare class PaletteGenOverlayComponent {
    protected service: PaletteGenService;
    protected rendererService: PaletteGenRendererService;
    state: i0.ModelSignal<{
        modal: boolean;
        details: boolean;
    }>;
    constructor();
    protected toggleModal(): void;
    protected toggleDetails(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<PaletteGenOverlayComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<PaletteGenOverlayComponent, "pg-palette-gen-overlay", never, { "state": { "alias": "state"; "required": false; "isSignal": true; }; }, { "state": "stateChange"; }, never, never, true, never>;
}

declare class PaletteGenOverlayService {
    private injector;
    private overlay;
    private overlayRef?;
    enable(): void;
    disable(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<PaletteGenOverlayService, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<PaletteGenOverlayService>;
}

declare class PaletteGenOverviewComponent {
    protected service: PaletteGenService;
    percentages: number[];
    overview: i0.Signal<{
        paletteName: PaletteName;
        dataList: PaletteGenDataListItem[];
    }[]>;
    compact: i0.InputSignal<boolean>;
    static ɵfac: i0.ɵɵFactoryDeclaration<PaletteGenOverviewComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<PaletteGenOverviewComponent, "pg-palette-gen-overview", never, { "compact": { "alias": "compact"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

declare class PaletteGenPreviewComponent {
    private clipboard;
    mirrorView: i0.InputSignalWithTransform<boolean, unknown>;
    formValue: i0.InputSignal<PaletteGenFormValue | undefined>;
    action: i0.OutputEmitterRef<void>;
    compact: i0.InputSignal<boolean>;
    matchingConfig: i0.InputSignal<PaletteMatchingConfig>;
    protected data: i0.Signal<PaletteGenData>;
    protected sassMapToClipboard(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<PaletteGenPreviewComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<PaletteGenPreviewComponent, "pg-palette-gen-preview", never, { "mirrorView": { "alias": "mirrorView"; "required": false; "isSignal": true; }; "formValue": { "alias": "formValue"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "matchingConfig": { "alias": "matchingConfig"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, never, true, never>;
}

declare class PaletteGenRendererDirective {
    protected rendererService: PaletteGenRendererService;
    static ɵfac: i0.ɵɵFactoryDeclaration<PaletteGenRendererDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<PaletteGenRendererDirective, "[pgPaletteGenRenderer]", never, {}, {}, never, never, true, never>;
}

declare class PaletteGenSelectorAfterDirective {
    static ɵfac: i0.ɵɵFactoryDeclaration<PaletteGenSelectorAfterDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<PaletteGenSelectorAfterDirective, "[pgPaletteGenSelectorAfter]", never, {}, {}, never, never, true, never>;
}

declare class PaletteGenSelectorComponent {
    protected service: PaletteGenService;
    protected paletteModes: PaletteMode[];
    protected paletteNames: PaletteName[];
    showPaletteNamesSelector: i0.InputSignalWithTransform<boolean, unknown>;
    static ɵfac: i0.ɵɵFactoryDeclaration<PaletteGenSelectorComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<PaletteGenSelectorComponent, "pg-palette-gen-selector", never, { "showPaletteNamesSelector": { "alias": "showPaletteNamesSelector"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[pgPaletteGenSelectorAfter]"], true, never>;
}

declare class PaletteGenShowcaseComponent {
    formControl1: FormControl<string | null>;
    formControl2: FormControl<string | null>;
    constructor();
    static ɵfac: i0.ɵɵFactoryDeclaration<PaletteGenShowcaseComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<PaletteGenShowcaseComponent, "pg-palette-gen-showcase", never, {}, {}, never, never, true, never>;
}

declare class PaletteGenSnapshotsComponent {
    private service;
    maxSnapshots: i0.InputSignal<number>;
    disabled: i0.InputSignal<boolean>;
    protected formValueSnapshot: i0.Signal<string>;
    protected snapshots: i0.Signal<i0.WritableSignal<angular_material_palette_generator.PaletteGenFormValueSnapshot[]>>;
    protected takeSnapshot(): void;
    protected hasSelectedSnapshot: i0.Signal<boolean>;
    protected removeSelectedSnapshot(): void;
    protected selectSnapshot(snapshot: string): void;
    private get nextSnapshotId();
    static ɵfac: i0.ɵɵFactoryDeclaration<PaletteGenSnapshotsComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<PaletteGenSnapshotsComponent, "pg-palette-gen-snapshots", never, { "maxSnapshots": { "alias": "maxSnapshots"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

declare const PALETTE_TOKEN_MATCHING_MAP: PaletteTokenMatchingMap;
declare const PALETTE_PERCENTAGE_MATCHING_MAP: PalettePercentageMatchingMap;

declare const PALETTE_MODES: PaletteMode[];
declare const PALETTE_NAMES: PaletteName[];

declare const PALETTE_FORM_CONTROL_SIZE_DEFAULT = 200;
declare const MATERIAL_PALETTE_PERCENTAGES_MAP: {
    default: number[];
    neutral: number[];
};
declare const FORM_VALUE_MAP_DEFAULT: Record<PaletteName, PaletteGenFormValue>;

export { CubicBezierControlComponent, FORM_VALUE_MAP_DEFAULT, MATERIAL_PALETTE_PERCENTAGES_MAP, PALETTE_FORM_CONTROL_SIZE_DEFAULT, PALETTE_MODES, PALETTE_NAMES, PALETTE_PERCENTAGE_MATCHING_MAP, PALETTE_TOKEN_MATCHING_MAP, PaletteGenContainerComponent, PaletteGenContentComponent, PaletteGenFormComponent, PaletteGenImportComponent, PaletteGenLogoComponent, PaletteGenOverlayComponent, PaletteGenOverlayService, PaletteGenOverviewComponent, PaletteGenPreviewComponent, PaletteGenRendererDirective, PaletteGenRendererService, PaletteGenSelectorAfterDirective, PaletteGenSelectorComponent, PaletteGenService, PaletteGenShowcaseComponent, PaletteGenSnapshotsComponent };
export type { CubicBezierParams, PaletteGenData, PaletteGenDataListItem, PaletteGenFormValue, PaletteGenFormValueSnapshot, PaletteGenState, PaletteMode, PaletteName, PalettePercentageMap, PalettePercentageMatching, PalettePercentageMatchingMap, PaletteTokenMap, PaletteTokenMatching, PaletteTokenMatchingMap };