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,
202 lines (198 loc) • 8.1 kB
TypeScript
import { ToggleButtonPassThrough, ToggleButtonIconPos, ToggleButtonChangeEvent, ToggleButtonIconTemplateContext, ToggleButtonContentTemplateContext } from 'primeng/types/togglebutton';
export * from 'primeng/types/togglebutton';
import { BaseStyle } from 'primeng/base';
import * as _angular_core from '@angular/core';
import { Provider, TemplateRef } from '@angular/core';
import { BaseEditableHolder } from 'primeng/baseeditableholder';
import * as i2 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { InputSize } from 'primeng/types/shared';
import * as i1 from 'primeng/ripple';
import * as i3 from 'primeng/api';
/**
*
* ToggleButton is used to select a boolean value using a button.
*
* [Live Demo](https://www.primeng.org/togglebutton/)
*
* @module togglebuttonstyle
*
*/
declare enum ToggleButtonClasses {
/**
* Class name of the root element
*/
root = "p-togglebutton",
/**
* Class name of the icon element
*/
icon = "p-togglebutton-icon",
/**
* Class name of the left icon
*/
iconLeft = "p-togglebutton-icon-left",
/**
* Class name of the right icon
*/
iconRight = "p-togglebutton-icon-right",
/**
* Class name of the label element
*/
label = "p-togglebutton-label"
}
declare class ToggleButtonStyle extends BaseStyle {
name: string;
style: string;
classes: {
root: ({ instance }: {
instance: any;
}) => (string | {
'p-togglebutton-checked': any;
'p-invalid': any;
'p-disabled': any;
'p-togglebutton-sm p-inputfield-sm': boolean;
'p-togglebutton-lg p-inputfield-lg': boolean;
'p-togglebutton-fluid': any;
})[];
content: string;
icon: string;
iconLeft: string;
iconRight: string;
label: string;
};
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToggleButtonStyle, never>;
static ɵprov: _angular_core.ɵɵInjectableDeclaration<ToggleButtonStyle>;
}
interface ToggleButtonStyle extends BaseStyle {
}
declare const TOGGLEBUTTON_VALUE_ACCESSOR: Provider;
/**
* ToggleButton is used to select a boolean value using a button.
* @group Components
*/
declare class ToggleButton extends BaseEditableHolder<ToggleButtonPassThrough> {
componentName: string;
$pcToggleButton: ToggleButton | undefined;
bindDirectiveInstance: Bind;
_componentStyle: ToggleButtonStyle;
/**
* Label for the on state.
* @group Props
*/
onLabel: _angular_core.InputSignal<string>;
/**
* Label for the off state.
* @group Props
*/
offLabel: _angular_core.InputSignal<string>;
/**
* Icon for the on state.
* @group Props
*/
onIcon: _angular_core.InputSignal<string | undefined>;
/**
* Icon for the off state.
* @group Props
*/
offIcon: _angular_core.InputSignal<string | undefined>;
/**
* Defines a string that labels the input for accessibility.
* @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>;
/**
* Identifier of the focus input to match a label defined for the component.
* @group Props
*/
inputId: _angular_core.InputSignal<string | undefined>;
/**
* Index of the element in tabbing order.
* @group Props
*/
tabindex: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Position of the icon.
* @group Props
*/
iconPos: _angular_core.InputSignal<ToggleButtonIconPos>;
/**
* When present, it specifies that the component should automatically get focus on load.
* @group Props
*/
autofocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Defines the size of the component.
* @group Props
*/
size: _angular_core.InputSignal<InputSize | undefined>;
/**
* Whether selection can not be cleared.
* @group Props
*/
allowEmpty: _angular_core.InputSignal<boolean | undefined>;
/**
* Spans 100% width of the container when enabled.
* @defaultValue undefined
* @group Props
*/
fluid: _angular_core.InputSignalWithTransform<boolean | undefined, unknown>;
/**
* Callback to invoke on value change.
* @param {ToggleButtonChangeEvent} event - Custom change event.
* @group Emits
*/
onChange: _angular_core.OutputEmitterRef<ToggleButtonChangeEvent>;
/**
* Custom icon template.
* @param {ToggleButtonIconTemplateContext} context - icon context.
* @see {@link ToggleButtonIconTemplateContext}
* @group Templates
*/
iconTemplate: _angular_core.Signal<TemplateRef<ToggleButtonIconTemplateContext> | undefined>;
/**
* Custom content template.
* @param {ToggleButtonContentTemplateContext} context - content context.
* @see {@link ToggleButtonContentTemplateContext}
* @group Templates
*/
contentTemplate: _angular_core.Signal<TemplateRef<ToggleButtonContentTemplateContext> | undefined>;
checked: _angular_core.WritableSignal<boolean>;
hasOnLabel: _angular_core.Signal<boolean>;
hasOffLabel: _angular_core.Signal<boolean>;
hasIcon: _angular_core.Signal<boolean>;
hasLabel: _angular_core.Signal<boolean>;
active: _angular_core.Signal<boolean>;
dataP: _angular_core.Signal<string>;
$tabindex: _angular_core.Signal<number>;
iconClass: _angular_core.Signal<string>;
labelText: _angular_core.Signal<string>;
ariaPressed: _angular_core.Signal<"true" | "false">;
getTemplateContext(): {
$implicit: boolean;
};
onAfterViewChecked(): void;
onKeyDown(event: KeyboardEvent): void;
toggle(event: Event): void;
onInit(): void;
onBlur(): void;
/**
* @override
*
* @see {@link BaseEditableHolder.writeControlValue}
* Writes the value to the control.
*/
writeControlValue(value: any, setModelValue: (value: any) => void): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToggleButton, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ToggleButton, "p-togglebutton, p-toggle-button", never, { "onLabel": { "alias": "onLabel"; "required": false; "isSignal": true; }; "offLabel": { "alias": "offLabel"; "required": false; "isSignal": true; }; "onIcon": { "alias": "onIcon"; "required": false; "isSignal": true; }; "offIcon": { "alias": "offIcon"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; "iconPos": { "alias": "iconPos"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "allowEmpty": { "alias": "allowEmpty"; "required": false; "isSignal": true; }; "fluid": { "alias": "fluid"; "required": false; "isSignal": true; }; }, { "onChange": "onChange"; }, ["iconTemplate", "contentTemplate"], never, true, [{ directive: typeof i1.Ripple; inputs: {}; outputs: {}; }, { directive: typeof i2.Bind; inputs: {}; outputs: {}; }]>;
}
declare class ToggleButtonModule {
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToggleButtonModule, never>;
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<ToggleButtonModule, never, [typeof ToggleButton, typeof i3.SharedModule], [typeof ToggleButton, typeof i3.SharedModule]>;
static ɵinj: _angular_core.ɵɵInjectorDeclaration<ToggleButtonModule>;
}
export { TOGGLEBUTTON_VALUE_ACCESSOR, ToggleButton, ToggleButtonClasses, ToggleButtonModule, ToggleButtonStyle };