primeng
Version:
PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,
225 lines (217 loc) • 8.77 kB
TypeScript
import { ComparePassThrough, CompareValueChangeEvent } from 'primeng/types/compare';
export * from 'primeng/types/compare';
import * as _angular_core from '@angular/core';
import { InjectionToken } from '@angular/core';
import { BaseComponent } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { BaseStyle } from 'primeng/base';
import * as i5 from 'primeng/api';
/**
*
* Compare allows comparing two items side by side with a slider.
*
* [Live Demo](https://www.primeng.org/compare)
*
* @module comparestyle
*
*/
declare enum CompareClasses {
/**
* Class name of the root element
*/
root = "p-compare",
/**
* Class name of the item element
*/
item = "p-compare-item",
/**
* Class name of the handle element
*/
handle = "p-compare-handle",
/**
* Class name of the indicator element
*/
indicator = "p-compare-indicator",
/**
* Class name of the input element
*/
input = "p-compare-input"
}
declare class CompareStyle extends BaseStyle {
name: string;
style: string;
classes: {
root: string;
item: string;
handle: ({ instance }: any) => (string | {
'p-disabled': any;
})[];
indicator: ({ instance }: any) => (string | {
'p-disabled': any;
})[];
input: string;
};
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CompareStyle, never>;
static ɵprov: _angular_core.ɵɵInjectableDeclaration<CompareStyle>;
}
interface CompareStyle extends BaseStyle {
}
/**
* CompareItem is a helper component for Compare component.
* @group Components
*/
declare class CompareItem extends BaseComponent {
componentName: string;
bindDirectiveInstance: Bind;
pcCompare: Compare;
_componentStyle: CompareStyle;
/**
* Position of the item.
* @group Props
*/
position: _angular_core.InputSignal<"before" | "after">;
clipPath: _angular_core.Signal<string>;
onAfterViewChecked(): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CompareItem, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CompareItem, "p-compare-item", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
/**
* CompareHandle is a helper component for Compare component.
* @group Components
*/
declare class CompareHandle extends BaseComponent {
componentName: string;
bindDirectiveInstance: Bind;
pcCompare: Compare;
_componentStyle: CompareStyle;
private hostEl;
handleStyle: _angular_core.Signal<Record<string, string | number>>;
onAfterViewChecked(): void;
onAfterViewInit(): void;
onPointerDown(event: PointerEvent): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CompareHandle, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CompareHandle, "p-compare-handle", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
/**
* CompareIndicator is a helper component for Compare component.
* @group Components
*/
declare class CompareIndicator extends BaseComponent {
componentName: string;
bindDirectiveInstance: Bind;
pcCompare: Compare;
_componentStyle: CompareStyle;
/**
* Used to define a string that labels the input element.
* @group Props
*/
ariaLabel: _angular_core.InputSignal<string | undefined>;
/**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
* @group Props
*/
ariaLabelledby: _angular_core.InputSignal<string | undefined>;
onAfterViewChecked(): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CompareIndicator, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CompareIndicator, "p-compare-indicator", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
/**
* Compare allows comparing two items side by side with a slider.
* @group Components
*/
declare class Compare extends BaseComponent<ComparePassThrough> {
componentName: string;
bindDirectiveInstance: Bind;
_componentStyle: CompareStyle;
private hostEl;
/**
* Current value of the slider position (0-100).
* @group Props
*/
value: _angular_core.InputSignal<number | undefined>;
/**
* Default value when uncontrolled.
* @group Props
*/
defaultValue: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Orientation of the comparison slider.
* @group Props
*/
orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
/**
* Minimum value.
* @group Props
*/
min: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Maximum value.
* @group Props
*/
max: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Step increment.
* @group Props
*/
step: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Whether the slider updates on hover.
* @group Props
*/
slideOnHover: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Whether the component is disabled.
* @group Props
*/
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Callback to invoke when value changes.
* @param {CompareValueChangeEvent} event - Custom value change event.
* @group Emits
*/
onValueChange: _angular_core.OutputEmitterRef<CompareValueChangeEvent>;
/**
* Callback to invoke when dragging ends.
* @param {CompareValueChangeEvent} event - Custom value change event.
* @group Emits
*/
onValueChangeEnd: _angular_core.OutputEmitterRef<CompareValueChangeEvent>;
isDragging: _angular_core.WritableSignal<boolean>;
dataDisabled: _angular_core.Signal<"" | null>;
dataDragging: _angular_core.Signal<"" | null>;
isThumbPointerDown: boolean;
private internalValue;
currentValue: _angular_core.Signal<number>;
private isHorizontal;
private dragOffsetPx;
handleEl: HTMLElement | null;
onAfterViewChecked(): void;
onAfterViewInit(): void;
private getRootRect;
private clamp;
private roundToStep;
private normalizeValue;
private getValueFromPointer;
private getValuePercent;
private updateValue;
private updateValueFromPointer;
getItemStyle(position: 'before' | 'after'): {
clipPath: string;
};
getHandleStyle(): Record<string, string | number>;
onRootPointerDown(event: PointerEvent): void;
onRootPointerMove(event: PointerEvent): void;
onRootPointerUp(event: PointerEvent): void;
onThumbPointerDown(event: PointerEvent): void;
onInputChange(event: Event): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Compare, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Compare, "p-compare", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "slideOnHover": { "alias": "slideOnHover"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "onValueChange": "onValueChange"; "onValueChangeEnd": "onValueChangeEnd"; }, never, ["*"], true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
declare class CompareModule {
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CompareModule, never>;
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<CompareModule, never, [typeof Compare, typeof CompareItem, typeof CompareHandle, typeof CompareIndicator, typeof i5.SharedModule, typeof i1.BindModule], [typeof Compare, typeof CompareItem, typeof CompareHandle, typeof CompareIndicator, typeof i5.SharedModule, typeof i1.BindModule]>;
static ɵinj: _angular_core.ɵɵInjectorDeclaration<CompareModule>;
}
declare const COMPARE_INSTANCE: InjectionToken<any>;
export { COMPARE_INSTANCE, Compare, CompareClasses, CompareHandle, CompareIndicator, CompareItem, CompareModule, CompareStyle };