ngx-kit 1.0.0

package/types/ngx-input-gradient-picker.d.ts

@@ -0,0 +1,86 @@
+import * as i0 from '@angular/core';
+import { OnInit, OnDestroy, EventEmitter, ChangeDetectorRef, AfterViewInit, ElementRef, Renderer2, ViewContainerRef } from '@angular/core';
+import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
+import { BrowserService, RangeSliderComponent, DialogService } from 'ngx-input/shared';
+
+interface GradientStop {
+    id: string;
+    value: number;
+    color: string;
+}
+type GradientType = 'linear' | 'radial';
+
+declare class NgxInputGradientComponent implements OnInit, OnDestroy, ControlValueAccessor, Validator {
+    private cd;
+    browserService: BrowserService;
+    theme: 'light' | 'dark';
+    set setTheme(val: 'light' | 'dark' | 'auto');
+    change: EventEmitter<string>;
+    defaultGradients: string[];
+    resultGradient: string;
+    baseBg: string;
+    rangeValues: GradientStop[];
+    type: GradientType;
+    rotation: number;
+    selectedIndex: number;
+    isDisabled: boolean;
+    _onChange: (value: string) => void;
+    _onTouched: () => void;
+    _onValidateChange: () => void;
+    rangeSlider?: RangeSliderComponent;
+    constructor(cd: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(disabled: boolean): void;
+    registerOnValidatorChange(fn: () => void): void;
+    validate(control: AbstractControl): ValidationErrors | null;
+    writeValue(value: any): void;
+    private generateId;
+    stopPropagation(ev: Event): void;
+    remove(): void;
+    generateGradient(ev?: string): void;
+    updateRangeSlider(): void;
+    emitChange(): void;
+    setDefaultGradients(): void;
+    onSelectDefault(item: string, i: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxInputGradientComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxInputGradientComponent, "ngx-input-gradient", never, { "setTheme": { "alias": "theme"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
+}
+
+declare class NgxInputGradient implements AfterViewInit, OnDestroy, ControlValueAccessor, Validator {
+    private el;
+    private renderer;
+    private viewContainerRef;
+    private dialogService;
+    setInputBackground: boolean;
+    theme: 'light' | 'dark' | 'auto';
+    private _targetInput?;
+    set ngxInputColor(el: HTMLInputElement | ElementRef<HTMLInputElement> | null | undefined | '');
+    change: EventEmitter<string>;
+    private boundInputHandler;
+    private isHostInput;
+    private pickerRef?;
+    value: string;
+    _onChange: (value: string) => void;
+    _onTouched: () => void;
+    _onValidateChange: () => void;
+    constructor(el: ElementRef<HTMLInputElement>, renderer: Renderer2, viewContainerRef: ViewContainerRef, dialogService: DialogService);
+    onClick(ev: Event): void;
+    ngAfterViewInit(): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(disabled: boolean): void;
+    registerOnValidatorChange(fn: () => void): void;
+    validate(control: AbstractControl): ValidationErrors | null;
+    ngOnDestroy(): void;
+    writeValue(val: any): void;
+    toggleColorPicker(): void;
+    destroyPicker(): void;
+    private emitChange;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxInputGradient, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxInputGradient, "[ngxInputGradient]", never, { "setInputBackground": { "alias": "setInputBackground"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "ngxInputColor": { "alias": "ngxInputColor"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
+}
+
+export { NgxInputGradient, NgxInputGradientComponent };

package/types/ngx-input-shared.d.ts

@@ -0,0 +1,227 @@
+import * as i0 from '@angular/core';
+import { OnInit, EventEmitter, ElementRef, ChangeDetectorRef, ComponentRef, Type, ViewContainerRef, OnDestroy } from '@angular/core';
+import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors, FormControl } from '@angular/forms';
+
+interface IValue {
+    id?: string;
+    value: number;
+}
+declare class ValueModel {
+    id: string;
+    value: number;
+    x?: number;
+    thumb?: HTMLElement;
+    color?: string;
+}
+declare class RangeSliderComponent implements OnInit, ControlValueAccessor, Validator {
+    private changeDetectorRef;
+    /**
+     * The step value for the slider
+     */
+    step: number;
+    /**
+     * The minimum value for the slider
+     */
+    min: number;
+    /**
+     * The maximum value for the slider
+     */
+    max: number;
+    /**
+     * The background color of the slider
+     * - can use css like `background: linear-gradient(to right, red, blue);`
+     * - or a solid color like `background: red;`
+     */
+    background?: string;
+    /**
+     * If true, the background will be transparent
+     */
+    isBgTransparent: boolean;
+    /**
+     * If true, clicking on the slider will add a new range at that position
+     */
+    addNewRangeOnClick: boolean;
+    /**
+     * The current value of the slider
+     */
+    change: EventEmitter<IValue[]>;
+    selectedIndex?: number;
+    selectedIndexChange: EventEmitter<number>;
+    private isDragging;
+    slider: ElementRef<HTMLDivElement>;
+    thumb?: ElementRef<HTMLDivElement>;
+    values: ValueModel[];
+    isDisabled: boolean;
+    _onChange: (value: IValue[]) => void;
+    _onTouched: () => void;
+    _validatorOnChange: () => void;
+    private sliderRect?;
+    private thumbRect?;
+    constructor(changeDetectorRef: ChangeDetectorRef);
+    ngOnInit(): void;
+    private generateId;
+    writeValue(items?: IValue[]): void;
+    validate(control: AbstractControl): ValidationErrors | null;
+    registerOnValidatorChange?(fn: () => void): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState?(disabled: boolean): void;
+    private updateRects;
+    onDrag(ev: MouseEvent | TouchEvent): void;
+    onResize(): void;
+    dragStart(ev: MouseEvent | TouchEvent, index: number): void;
+    addnewRangeOnSliderClick(event: MouseEvent | TouchEvent): void;
+    private updateThumbPosition;
+    updateAllThumbPositions(): void;
+    setValueByPosition(thumb: ValueModel, thumbRec: DOMRect, sliderRec: DOMRect): void;
+    onDragEnd(ev: MouseEvent | TouchEvent): void;
+    valueChanged(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RangeSliderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RangeSliderComponent, "range-slider", never, { "step": { "alias": "step"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "background": { "alias": "background"; "required": false; }; "isBgTransparent": { "alias": "isBgTransparent"; "required": false; }; "addNewRangeOnClick": { "alias": "addNewRangeOnClick"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; }, { "change": "change"; "selectedIndexChange": "selectedIndexChange"; }, never, ["*"], true, never>;
+}
+
+interface IPosition {
+    x: number;
+    y: number;
+}
+
+declare class SaturationComponent implements ControlValueAccessor {
+    width?: number;
+    height?: number;
+    color: string;
+    step: number;
+    min: IPosition;
+    max: {
+        x: number;
+        y: number;
+    };
+    change: EventEmitter<IPosition>;
+    isDragging: boolean;
+    saturation: ElementRef<HTMLDivElement>;
+    thumb: ElementRef<HTMLDivElement>;
+    x: number;
+    y: number;
+    myControl: FormControl<IPosition | null>;
+    isDisabled: boolean;
+    _onChange: (value: any) => void;
+    _onTouched: () => void;
+    _validatorOnChange: () => void;
+    private saturationRect?;
+    private thumbRect?;
+    constructor();
+    private updateRects;
+    writeValue(val?: IPosition | null): void;
+    validate(control: AbstractControl): ValidationErrors | null;
+    registerOnValidatorChange?(fn: () => void): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState?(disabled: boolean): void;
+    dragStart(ev: MouseEvent | TouchEvent): void;
+    onResize(): void;
+    onDrag(ev: MouseEvent | TouchEvent): void;
+    private updatePosition;
+    onDragEnd(ev: MouseEvent | TouchEvent): void;
+    setValueByPosition(thumbRec: DOMRect, saturationRec: DOMRect): void;
+    valueChanged(value: IPosition): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SaturationComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SaturationComponent, "saturation", never, { "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "color": { "alias": "color"; "required": false; }; "step": { "alias": "step"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
+}
+
+declare class SliderComponent implements OnInit, ControlValueAccessor, Validator {
+    step: number;
+    min: number;
+    max: number;
+    background?: string;
+    isBgTransparent: boolean;
+    change: EventEmitter<number>;
+    isDragging: boolean;
+    slider: ElementRef<HTMLDivElement>;
+    thumb: ElementRef<HTMLDivElement>;
+    x: number;
+    myControl: FormControl<number | null>;
+    isDisabled: boolean;
+    _onChange: (value: any) => void;
+    _onTouched: () => void;
+    _validatorOnChange: () => void;
+    private sliderRect?;
+    private thumbRect?;
+    constructor();
+    ngOnInit(): void;
+    private updateRects;
+    writeValue(val?: number | string | null): void;
+    validate(control: AbstractControl): ValidationErrors | null;
+    registerOnValidatorChange?(fn: () => void): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState?(disabled: boolean): void;
+    dragStart(ev: MouseEvent | TouchEvent): void;
+    onDrag(ev: MouseEvent | TouchEvent): void;
+    onResize(): void;
+    private updatePosition;
+    setValueByPosition(thumbRec: DOMRect, sliderRec: DOMRect): void;
+    onDragEnd(ev: MouseEvent | TouchEvent): void;
+    valueChanged(value: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SliderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SliderComponent, "slider", never, { "step": { "alias": "step"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "background": { "alias": "background"; "required": false; }; "isBgTransparent": { "alias": "isBgTransparent"; "required": false; }; }, { "change": "change"; }, never, ["*"], true, never>;
+}
+
+declare function getOffsetPosition(evt: MouseEvent | TouchEvent, parent: HTMLElement): {
+    x: number;
+    y: number;
+};
+
+declare class BrowserService {
+    private platformId;
+    constructor(platformId: object);
+    get isBrowser(): boolean;
+    get prefersDarkMode(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BrowserService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<BrowserService>;
+}
+
+declare class DialogOverlayRef<T> {
+    readonly componentRef: ComponentRef<T>;
+    private readonly dialogEl;
+    private readonly teardownFn;
+    constructor(componentRef: ComponentRef<T>, dialogEl: HTMLDialogElement, teardownFn: () => void);
+    close(): void;
+    get nativeElement(): HTMLElement;
+}
+
+interface DialogOptions<T> {
+    anchor: HTMLElement;
+    component: Type<T>;
+    viewContainerRef: ViewContainerRef;
+    configure?: (instance: T, ref: DialogOverlayRef<T>) => void;
+    margin?: number;
+    placement?: 'auto' | 'top' | 'bottom';
+    alignment?: 'start' | 'center' | 'end';
+    closeOnBackdropClick?: boolean;
+    onClosed?: () => void;
+}
+
+declare class DialogService implements OnDestroy {
+    private openDialogs;
+    private idCounter;
+    private globalKeyDownAdded;
+    private globalResizeAdded;
+    private globalClickAdded;
+    private globalKeyDownListener;
+    private globalResizeListener;
+    private globalClickListener;
+    private doc;
+    constructor();
+    ngOnDestroy(): void;
+    handleGlobalListeners(): void;
+    open<T>(options: DialogOptions<T>): DialogOverlayRef<T>;
+    private repositionAll;
+    private positionDialog;
+    private getLastDialog;
+    closeAll(): void;
+    handleClickOnBackdrop(event: PointerEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DialogService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DialogService>;
+}
+
+export { BrowserService, DialogOverlayRef, DialogService, RangeSliderComponent, SaturationComponent, SliderComponent, ValueModel, getOffsetPosition };
+export type { DialogOptions, IPosition, IValue };

package/types/ngx-input.d.ts

@@ -0,0 +1,3 @@
+declare const NGX_INPUT = "@ngxInput";
+
+export { NGX_INPUT };