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
376 lines (356 loc) • 15.6 kB
JavaScript
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, forwardRef, EventEmitter, inject, numberAttribute, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, 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 = /*@__PURE__*/ (() => { let ɵInputSwitchStyle_BaseFactory; return function InputSwitchStyle_Factory(__ngFactoryType__) { return (ɵInputSwitchStyle_BaseFactory || (ɵInputSwitchStyle_BaseFactory = i0.ɵɵgetInheritedFactory(InputSwitchStyle)))(__ngFactoryType__ || InputSwitchStyle); }; })();
static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: InputSwitchStyle, factory: InputSwitchStyle.ɵfac });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputSwitchStyle, [{
type: Injectable
}], null, null); })();
const _c0 = ["input"];
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 = /*@__PURE__*/ (() => { let ɵInputSwitch_BaseFactory; return function InputSwitch_Factory(__ngFactoryType__) { return (ɵInputSwitch_BaseFactory || (ɵInputSwitch_BaseFactory = i0.ɵɵgetInheritedFactory(InputSwitch)))(__ngFactoryType__ || InputSwitch); }; })();
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InputSwitch, selectors: [["p-inputSwitch"], ["p-inputswitch"]], viewQuery: function InputSwitch_Query(rf, ctx) { if (rf & 1) {
i0.ɵɵviewQuery(_c0, 5);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.input = _t.first);
} }, inputs: { style: "style", styleClass: "styleClass", tabindex: [2, "tabindex", "tabindex", numberAttribute], inputId: "inputId", name: "name", disabled: [2, "disabled", "disabled", booleanAttribute], readonly: [2, "readonly", "readonly", booleanAttribute], trueValue: "trueValue", falseValue: "falseValue", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", autofocus: [2, "autofocus", "autofocus", booleanAttribute] }, outputs: { onChange: "onChange" }, features: [i0.ɵɵProvidersFeature([INPUTSWITCH_VALUE_ACCESSOR, InputSwitchStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 22, consts: [["input", ""], [3, "click", "ngClass", "ngStyle"], [1, "p-hidden-accessible"], ["type", "checkbox", "role", "switch", 3, "focus", "blur", "ngClass", "checked", "disabled", "pAutoFocus"], [3, "ngClass"]], template: function InputSwitch_Template(rf, ctx) { if (rf & 1) {
const _r1 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "div", 1);
i0.ɵɵlistener("click", function InputSwitch_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onClick($event)); });
i0.ɵɵelementStart(1, "div", 2)(2, "input", 3, 0);
i0.ɵɵlistener("focus", function InputSwitch_Template_input_focus_2_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onFocus()); })("blur", function InputSwitch_Template_input_blur_2_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBlur()); });
i0.ɵɵelementEnd()();
i0.ɵɵelement(4, "span", 4);
i0.ɵɵelementEnd();
} if (rf & 2) {
i0.ɵɵclassMap(ctx.styleClass);
i0.ɵɵproperty("ngClass", ctx.cx("root"))("ngStyle", ctx.sx("root"))("ngStyle", ctx.style);
i0.ɵɵattribute("data-pc-name", "inputswitch")("data-pc-section", "root");
i0.ɵɵadvance();
i0.ɵɵattribute("data-pc-section", "hiddenInputWrapper")("data-p-hidden-accessible", true);
i0.ɵɵadvance();
i0.ɵɵproperty("ngClass", ctx.cx("input"))("checked", ctx.checked())("disabled", ctx.disabled)("pAutoFocus", ctx.autofocus);
i0.ɵɵattribute("id", ctx.inputId)("aria-checked", ctx.checked())("aria-labelledby", ctx.ariaLabelledBy)("aria-label", ctx.ariaLabel)("name", ctx.name)("tabindex", ctx.tabindex)("data-pc-section", "hiddenInput");
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngClass", ctx.cx("slider"));
i0.ɵɵattribute("data-pc-section", "slider");
} }, dependencies: [CommonModule, i1.NgClass, i1.NgStyle, AutoFocusModule, i2.AutoFocus, SharedModule], encapsulation: 2, changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputSwitch, [{
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
}]
}], null, { 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']
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InputSwitch, { className: "InputSwitch", filePath: "inputswitch.ts", lineNumber: 52 }); })();
class InputSwitchModule {
static ɵfac = function InputSwitchModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || InputSwitchModule)(); };
static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: InputSwitchModule });
static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [InputSwitch, SharedModule, SharedModule] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputSwitchModule, [{
type: NgModule,
args: [{
imports: [InputSwitch, SharedModule],
exports: [InputSwitch, SharedModule]
}]
}], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(InputSwitchModule, { imports: [InputSwitch, SharedModule], exports: [InputSwitch, SharedModule] }); })();
/**
* Generated bundle index. Do not edit.
*/
export { INPUTSWITCH_VALUE_ACCESSOR, InputSwitch, InputSwitchModule, InputSwitchStyle };
//# sourceMappingURL=primeng-inputswitch.mjs.map