primeng
Version:
PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB
371 lines (351 loc) • 14.9 kB
JavaScript
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, forwardRef, EventEmitter, inject, booleanAttribute, numberAttribute, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { SharedModule } from 'primeng/api';
import * as i2 from 'primeng/autofocus';
import { AutoFocusModule } from 'primeng/autofocus';
import { BaseComponent } from 'primeng/basecomponent';
import { BaseStyle } from 'primeng/base';
const theme = ({ dt }) => `
.p-toggleswitch {
display: inline-block;
width: ${dt('toggleswitch.width')};
height: ${dt('toggleswitch.height')};
}
.p-toggleswitch-input {
cursor: pointer;
appearance: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
opacity: 0;
z-index: 1;
outline: 0 none;
border-radius: ${dt('toggleswitch.border.radius')};
}
.p-toggleswitch-slider {
display: inline-block;
cursor: pointer;
width: 100%;
height: 100%;
border-width: ${dt('toggleswitch.border.width')};
border-style: solid;
border-color: ${dt('toggleswitch.border.color')};
background: ${dt('toggleswitch.background')};
transition: background ${dt('toggleswitch.transition.duration')}, color ${dt('toggleswitch.transition.duration')}, border-color ${dt('toggleswitch.transition.duration')}, outline-color ${dt('toggleswitch.transition.duration')}, box-shadow ${dt('toggleswitch.transition.duration')};
border-radius: ${dt('toggleswitch.border.radius')};
outline-color: transparent;
box-shadow: ${dt('toggleswitch.shadow')};
}
.p-toggleswitch-slider:before {
position: absolute;
content: "";
top: 50%;
background: ${dt('toggleswitch.handle.background')};
width: ${dt('toggleswitch.handle.size')};
height: ${dt('toggleswitch.handle.size')};
left: ${dt('toggleswitch.gap')};
margin-top: calc(-1 * calc(${dt('toggleswitch.handle.size')} / 2));
border-radius: ${dt('toggleswitch.handle.border.radius')};
transition: background ${dt('toggleswitch.transition.duration')}, left ${dt('toggleswitch.slide.duration')};
}
.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {
background: ${dt('toggleswitch.checked.background')};
border-color: ${dt('toggleswitch.checked.border.color')};
}
.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider:before {
background: ${dt('toggleswitch.handle.checked.background')};
left: calc(${dt('toggleswitch.width')} - calc(${dt('toggleswitch.handle.size')} + ${dt('toggleswitch.gap')}));
}
.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider {
background: ${dt('toggleswitch.hover.background')};
border-color: ${dt('toggleswitch.hover.border.color')};
}
.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider:before {
background: ${dt('toggleswitch.handle.hover.background')};
}
.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-slider {
background: ${dt('toggleswitch.checked.hover.background')};
border-color: ${dt('toggleswitch.checked.hover.border.color')};
}
.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-slider:before {
background: ${dt('toggleswitch.handle.checked.hover.background')};
}
.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider {
box-shadow: ${dt('toggleswitch.focus.ring.shadow')};
outline: ${dt('toggleswitch.focus.ring.width')} ${dt('toggleswitch.focus.ring.style')} ${dt('toggleswitch.focus.ring.color')};
outline-offset: ${dt('toggleswitch.focus.ring.offset')};
}
.p-toggleswitch.p-invalid > .p-toggleswitch-slider {
border-color: ${dt('toggleswitch.invalid.border.color')};
}
.p-toggleswitch.p-disabled {
opacity: 1;
}
.p-toggleswitch.p-disabled .p-toggleswitch-slider {
background: ${dt('toggleswitch.disabled.background')};
}
.p-toggleswitch.p-disabled .p-toggleswitch-slider:before {
background: ${dt('toggleswitch.handle.disabled.background')};
}
`;
const inlineStyles = {
root: { position: 'relative' }
};
const classes = {
root: ({ instance }) => ({
'p-toggleswitch p-component': true,
'p-toggleswitch-checked': instance.checked(),
'p-disabled': instance.disabled,
'p-invalid': instance.invalid
}),
input: 'p-toggleswitch-input',
slider: 'p-toggleswitch-slider'
};
class InputSwitchStyle extends BaseStyle {
name = 'toggleswitch';
theme = theme;
classes = classes;
inlineStyles = inlineStyles;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: InputSwitchStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: InputSwitchStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: InputSwitchStyle, decorators: [{
type: Injectable
}] });
const INPUTSWITCH_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => InputSwitch),
multi: true
};
/**
* InputSwitch is used to select a boolean value.
* @group Components
*/
class InputSwitch extends BaseComponent {
/**
* Inline style of the component.
* @group Props
*/
style;
/**
* Style class of the component.
* @group Props
*/
styleClass;
/**
* Index of the element in tabbing order.
* @group Props
*/
tabindex;
/**
* Identifier of the input element.
* @group Props
*/
inputId;
/**
* Name of the input element.
* @group Props
*/
name;
/**
* When present, it specifies that the element should be disabled.
* @group Props
*/
disabled;
/**
* When present, it specifies that the component cannot be edited.
* @group Props
*/
readonly;
/**
* Value in checked state.
* @group Props
*/
trueValue = true;
/**
* Value in unchecked state.
* @group Props
*/
falseValue = false;
/**
* Used to define a string that autocomplete attribute the current element.
* @group Props
*/
ariaLabel;
/**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
* @group Props
*/
ariaLabelledBy;
/**
* When present, it specifies that the component should automatically get focus on load.
* @group Props
*/
autofocus;
/**
* Callback to invoke when the on value change.
* @param {InputSwitchChangeEvent} event - Custom change event.
* @group Emits
*/
onChange = new EventEmitter();
input;
modelValue = false;
focused = false;
onModelChange = () => { };
onModelTouched = () => { };
_componentStyle = inject(InputSwitchStyle);
onClick(event) {
if (!this.disabled && !this.readonly) {
this.modelValue = this.checked() ? this.falseValue : this.trueValue;
this.onModelChange(this.modelValue);
this.onChange.emit({
originalEvent: event,
checked: this.modelValue
});
this.input.nativeElement.focus();
}
}
onFocus() {
this.focused = true;
}
onBlur() {
this.focused = false;
this.onModelTouched();
}
writeValue(value) {
this.modelValue = value;
this.cd.markForCheck();
}
registerOnChange(fn) {
this.onModelChange = fn;
}
registerOnTouched(fn) {
this.onModelTouched = fn;
}
setDisabledState(val) {
this.disabled = val;
this.cd.markForCheck();
}
checked() {
return this.modelValue === this.trueValue;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: InputSwitch, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.5", type: InputSwitch, isStandalone: true, selector: "p-inputSwitch, p-inputswitch", inputs: { style: "style", styleClass: "styleClass", tabindex: ["tabindex", "tabindex", numberAttribute], inputId: "inputId", name: "name", disabled: ["disabled", "disabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], trueValue: "trueValue", falseValue: "falseValue", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", autofocus: ["autofocus", "autofocus", booleanAttribute] }, outputs: { onChange: "onChange" }, providers: [INPUTSWITCH_VALUE_ACCESSOR, InputSwitchStyle], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
<div [ngClass]="cx('root')" [ngStyle]="sx('root')" [ngStyle]="style" [class]="styleClass" (click)="onClick($event)" [attr.data-pc-name]="'inputswitch'" [attr.data-pc-section]="'root'">
<div class="p-hidden-accessible" [attr.data-pc-section]="'hiddenInputWrapper'" [attr.data-p-hidden-accessible]="true">
<input
#input
[attr.id]="inputId"
type="checkbox"
role="switch"
[ngClass]="cx('input')"
[checked]="checked()"
[disabled]="disabled"
[attr.aria-checked]="checked()"
[attr.aria-labelledby]="ariaLabelledBy"
[attr.aria-label]="ariaLabel"
[attr.name]="name"
[attr.tabindex]="tabindex"
(focus)="onFocus()"
(blur)="onBlur()"
[attr.data-pc-section]="'hiddenInput'"
[pAutoFocus]="autofocus"
/>
</div>
<span [ngClass]="cx('slider')" [attr.data-pc-section]="'slider'"></span>
</div>
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i2.AutoFocus, selector: "[pAutoFocus]", inputs: ["autofocus", "pAutoFocus"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: InputSwitch, decorators: [{
type: Component,
args: [{
selector: 'p-inputSwitch, p-inputswitch',
standalone: true,
imports: [CommonModule, AutoFocusModule, SharedModule],
template: `
<div [ngClass]="cx('root')" [ngStyle]="sx('root')" [ngStyle]="style" [class]="styleClass" (click)="onClick($event)" [attr.data-pc-name]="'inputswitch'" [attr.data-pc-section]="'root'">
<div class="p-hidden-accessible" [attr.data-pc-section]="'hiddenInputWrapper'" [attr.data-p-hidden-accessible]="true">
<input
#input
[attr.id]="inputId"
type="checkbox"
role="switch"
[ngClass]="cx('input')"
[checked]="checked()"
[disabled]="disabled"
[attr.aria-checked]="checked()"
[attr.aria-labelledby]="ariaLabelledBy"
[attr.aria-label]="ariaLabel"
[attr.name]="name"
[attr.tabindex]="tabindex"
(focus)="onFocus()"
(blur)="onBlur()"
[attr.data-pc-section]="'hiddenInput'"
[pAutoFocus]="autofocus"
/>
</div>
<span [ngClass]="cx('slider')" [attr.data-pc-section]="'slider'"></span>
</div>
`,
providers: [INPUTSWITCH_VALUE_ACCESSOR, InputSwitchStyle],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
}]
}], propDecorators: { style: [{
type: Input
}], styleClass: [{
type: Input
}], tabindex: [{
type: Input,
args: [{ transform: numberAttribute }]
}], inputId: [{
type: Input
}], name: [{
type: Input
}], disabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], readonly: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], trueValue: [{
type: Input
}], falseValue: [{
type: Input
}], ariaLabel: [{
type: Input
}], ariaLabelledBy: [{
type: Input
}], autofocus: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], onChange: [{
type: Output
}], input: [{
type: ViewChild,
args: ['input']
}] } });
class InputSwitchModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: InputSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: InputSwitchModule, imports: [InputSwitch, SharedModule], exports: [InputSwitch, SharedModule] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: InputSwitchModule, imports: [InputSwitch, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: InputSwitchModule, decorators: [{
type: NgModule,
args: [{
imports: [InputSwitch, SharedModule],
exports: [InputSwitch, SharedModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { INPUTSWITCH_VALUE_ACCESSOR, InputSwitch, InputSwitchModule, InputSwitchStyle };
//# sourceMappingURL=primeng-inputswitch.mjs.map