primeng/fesm2022/primeng-togglebutton.mjs

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

import * as i0 from '@angular/core';
import { Injectable, forwardRef, EventEmitter, inject, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, Input, HostBinding, Output, ContentChild, ContentChildren, NgModule } from '@angular/core';
import { BaseStyle } from 'primeng/base';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { PrimeTemplate, SharedModule } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import { Ripple } from 'primeng/ripple';

const theme = ({ dt }) => `
.p-togglebutton {
    display: inline-flex;
    cursor: pointer;
    user-select: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    color: ${dt('togglebutton.color')};
    background: ${dt('togglebutton.background')};
    border: 1px solid ${dt('togglebutton.border.color')};
    padding: ${dt('togglebutton.padding')};
    font-size: 1rem;
    font-family: inherit;
    font-feature-settings: inherit;
    transition: background ${dt('togglebutton.transition.duration')}, color ${dt('togglebutton.transition.duration')}, border-color ${dt('togglebutton.transition.duration')},
        outline-color ${dt('togglebutton.transition.duration')}, box-shadow ${dt('togglebutton.transition.duration')};
    border-radius: ${dt('togglebutton.border.radius')};
    outline-color: transparent;
    font-weight: ${dt('togglebutton.font.weight')};
}

.p-togglebutton-content {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: ${dt('togglebutton.gap')};
}

.p-togglebutton-label,
.p-togglebutton-icon {
    position: relative;
    transition: none;
}

.p-togglebutton::before {
    content: "";
    background: transparent;
    transition: background ${dt('togglebutton.transition.duration')}, color ${dt('togglebutton.transition.duration')}, border-color ${dt('togglebutton.transition.duration')},
            outline-color ${dt('togglebutton.transition.duration')}, box-shadow ${dt('togglebutton.transition.duration')};
    position: absolute;
    inset-inline-start: ${dt('togglebutton.content.left')};
    top: ${dt('togglebutton.content.top')};
    width: calc(100% - calc(2 *  ${dt('togglebutton.content.left')}));
    height: calc(100% - calc(2 *  ${dt('togglebutton.content.top')}));
    border-radius: ${dt('togglebutton.border.radius')};
}

.p-togglebutton.p-togglebutton-checked::before {
    background: ${dt('togglebutton.content.checked.background')};
    box-shadow: ${dt('togglebutton.content.checked.shadow')};
}

.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {
    background: ${dt('togglebutton.hover.background')};
    color: ${dt('togglebutton.hover.color')};
}

.p-togglebutton.p-togglebutton-checked {
    background: ${dt('togglebutton.checked.background')};
    border-color: ${dt('togglebutton.checked.border.color')};
    color: ${dt('togglebutton.checked.color')};
}

.p-togglebutton:focus-visible {
    box-shadow: ${dt('togglebutton.focus.ring.shadow')};
    outline: ${dt('togglebutton.focus.ring.width')} ${dt('togglebutton.focus.ring.style')} ${dt('togglebutton.focus.ring.color')};
    outline-offset: ${dt('togglebutton.focus.ring.offset')};
}

.p-togglebutton.p-invalid {
    border-color: ${dt('togglebutton.invalid.border.color')};
}

.p-togglebutton:disabled {
    opacity: 1;
    cursor: default;
    background: ${dt('togglebutton.disabled.background')};
    border-color: ${dt('togglebutton.disabled.border.color')};
    color: ${dt('togglebutton.disabled.color')};
}

.p-togglebutton-icon {
    color: ${dt('togglebutton.icon.color')};
}

.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover .p-togglebutton-icon {
    color: ${dt('togglebutton.icon.hover.color')};
}

.p-togglebutton.p-togglebutton-checked .p-togglebutton-icon {
    color: ${dt('togglebutton.icon.checked.color')};
}

.p-togglebutton:disabled .p-togglebutton-icon {
    color: ${dt('togglebutton.icon.disabled.color')};
}

.p-togglebutton-sm {
    padding: ${dt('togglebutton.sm.padding')};
    font-size: ${dt('togglebutton.sm.font.size')};
}

.p-togglebutton-lg {
    padding: ${dt('togglebutton.lg.padding')};
    font-size: ${dt('togglebutton.lg.font.size')};
}

/* For PrimeNG (iconPos) */

.p-togglebutton-icon-right {
    order: 1;
}

p-togglebutton.ng-invalid.ng-dirty > .p-togglebutton {
    border-color: ${dt('togglebutton.invalid.border.color')};
}
`;
const classes = {
    root: ({ instance }) => ({
        'p-togglebutton p-component': true,
        'p-togglebutton-checked': instance.checked,
        'p-disabled': instance.disabled,
        'p-togglebutton-sm p-inputfield-sm': instance.size === 'small',
        'p-togglebutton-lg p-inputfield-lg': instance.size === 'large'
    }),
    content: 'p-togglebutton-content',
    icon: 'p-togglebutton-icon',
    label: 'p-togglebutton-label'
};
class ToggleButtonStyle extends BaseStyle {
    name = 'togglebutton';
    theme = theme;
    classes = classes;
    static ɵfac = /*@__PURE__*/ (() => { let ɵToggleButtonStyle_BaseFactory; return function ToggleButtonStyle_Factory(__ngFactoryType__) { return (ɵToggleButtonStyle_BaseFactory || (ɵToggleButtonStyle_BaseFactory = i0.ɵɵgetInheritedFactory(ToggleButtonStyle)))(__ngFactoryType__ || ToggleButtonStyle); }; })();
    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ToggleButtonStyle, factory: ToggleButtonStyle.ɵfac });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToggleButtonStyle, [{
        type: Injectable
    }], null, null); })();
/**
 *
 * ToggleButton is used to select a boolean value using a button.
 *
 * [Live Demo](https://www.primeng.org/togglebutton/)
 *
 * @module togglebuttonstyle
 *
 */
var ToggleButtonClasses;
(function (ToggleButtonClasses) {
    /**
     * Class name of the root element
     */
    ToggleButtonClasses["root"] = "p-togglebutton";
    /**
     * Class name of the icon element
     */
    ToggleButtonClasses["icon"] = "p-togglebutton-icon";
    /**
     * Class name of the label element
     */
    ToggleButtonClasses["label"] = "p-togglebutton-label";
})(ToggleButtonClasses || (ToggleButtonClasses = {}));

const _c0 = ["icon"];
const _c1 = ["content"];
const _c2 = a0 => ({ $implicit: a0 });
const _c3 = (a0, a1) => ({ "p-togglebutton-icon": true, "p-togglebutton-icon-left": a0, "p-togglebutton-icon-right": a1 });
function ToggleButton_ng_container_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainer(0);
} }
function ToggleButton_Conditional_3_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "span", 1);
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext(3);
    i0.ɵɵclassMap(ctx_r0.checked ? ctx_r0.onIcon : ctx_r0.offIcon);
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(4, _c3, ctx_r0.iconPos === "left", ctx_r0.iconPos === "right"));
    i0.ɵɵattribute("data-pc-section", "icon");
} }
function ToggleButton_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtemplate(0, ToggleButton_Conditional_3_Conditional_0_Conditional_0_Template, 1, 7, "span", 3);
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext(2);
    i0.ɵɵconditional(ctx_r0.onIcon || ctx_r0.offIcon ? 0 : -1);
} }
function ToggleButton_Conditional_3_Conditional_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainer(0);
} }
function ToggleButton_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtemplate(0, ToggleButton_Conditional_3_Conditional_1_ng_container_0_Template, 1, 0, "ng-container", 2);
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.iconTemplate || ctx_r0._iconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, ctx_r0.checked));
} }
function ToggleButton_Conditional_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtemplate(0, ToggleButton_Conditional_3_Conditional_0_Template, 1, 1)(1, ToggleButton_Conditional_3_Conditional_1_Template, 1, 4, "ng-container");
    i0.ɵɵelementStart(2, "span", 1);
    i0.ɵɵtext(3);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵconditional(!ctx_r0.iconTemplate ? 0 : 1);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngClass", ctx_r0.cx("label"));
    i0.ɵɵattribute("data-pc-section", "label");
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(ctx_r0.checked ? ctx_r0.hasOnLabel ? ctx_r0.onLabel : "\u00A0" : ctx_r0.hasOffLabel ? ctx_r0.offLabel : "\u00A0");
} }
const TOGGLEBUTTON_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => ToggleButton),
    multi: true
};
/**
 * ToggleButton is used to select a boolean value using a button.
 * @group Components
 */
class ToggleButton extends BaseComponent {
    /**
     * Label for the on state.
     * @group Props
     */
    onLabel = 'Yes';
    /**
     * Label for the off state.
     * @group Props
     */
    offLabel = 'No';
    /**
     * Icon for the on state.
     * @group Props
     */
    onIcon;
    /**
     * Icon for the off state.
     * @group Props
     */
    offIcon;
    /**
     * Defines a string that labels the input for accessibility.
     * @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 element should be disabled.
     * @group Props
     */
    disabled;
    /**
     * Inline style of the element.
     * @group Props
     */
    style;
    /**
     * Style class of the element.
     * @group Props
     */
    styleClass;
    get hostClass() {
        return this.styleClass || '';
    }
    /**
     * Identifier of the focus input to match a label defined for the component.
     * @group Props
     */
    inputId;
    /**
     * Index of the element in tabbing order.
     * @group Props
     */
    tabindex = 0;
    /**
     * Defines the size of the component.
     * @group Props
     */
    size;
    /**
     * Position of the icon.
     * @group Props
     */
    iconPos = 'left';
    /**
     * When present, it specifies that the component should automatically get focus on load.
     * @group Props
     */
    autofocus;
    /**
     * Whether selection can not be cleared.
     * @group Props
     */
    allowEmpty;
    /**
     * Callback to invoke on value change.
     * @param {ToggleButtonChangeEvent} event - Custom change event.
     * @group Emits
     */
    onChange = new EventEmitter();
    /**
     * Custom icon template.
     * @group Templates
     */
    iconTemplate;
    /**
     * Custom content template.
     * @group Templates
     */
    contentTemplate;
    templates;
    checked = false;
    onModelChange = () => { };
    onModelTouched = () => { };
    _componentStyle = inject(ToggleButtonStyle);
    toggle(event) {
        if (!this.disabled && !(this.allowEmpty === false && this.checked)) {
            this.checked = !this.checked;
            this.onModelChange(this.checked);
            this.onModelTouched();
            this.onChange.emit({
                originalEvent: event,
                checked: this.checked
            });
            this.cd.markForCheck();
        }
    }
    onKeyDown(event) {
        switch (event.code) {
            case 'Enter':
                this.toggle(event);
                event.preventDefault();
                break;
            case 'Space':
                this.toggle(event);
                event.preventDefault();
                break;
        }
    }
    onBlur() {
        this.onModelTouched();
    }
    writeValue(value) {
        this.checked = value;
        this.cd.markForCheck();
    }
    registerOnChange(fn) {
        this.onModelChange = fn;
    }
    registerOnTouched(fn) {
        this.onModelTouched = fn;
    }
    setDisabledState(val) {
        this.disabled = val;
        this.cd.markForCheck();
    }
    get hasOnLabel() {
        return (this.onLabel && this.onLabel.length > 0);
    }
    get hasOffLabel() {
        return (this.onLabel && this.onLabel.length > 0);
    }
    get active() {
        return this.checked === true;
    }
    _iconTemplate;
    _contentTemplate;
    ngAfterContentInit() {
        this.templates.forEach((item) => {
            switch (item.getType()) {
                case 'icon':
                    this._iconTemplate = item.template;
                    break;
                case 'content':
                    this._contentTemplate = item.template;
                    break;
                default:
                    this._contentTemplate = item.template;
                    break;
            }
        });
    }
    static ɵfac = /*@__PURE__*/ (() => { let ɵToggleButton_BaseFactory; return function ToggleButton_Factory(__ngFactoryType__) { return (ɵToggleButton_BaseFactory || (ɵToggleButton_BaseFactory = i0.ɵɵgetInheritedFactory(ToggleButton)))(__ngFactoryType__ || ToggleButton); }; })();
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ToggleButton, selectors: [["p-toggleButton"], ["p-togglebutton"], ["p-toggle-button"]], contentQueries: function ToggleButton_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
            i0.ɵɵcontentQuery(dirIndex, _c0, 4);
            i0.ɵɵcontentQuery(dirIndex, _c1, 4);
            i0.ɵɵcontentQuery(dirIndex, PrimeTemplate, 4);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.iconTemplate = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.contentTemplate = _t.first);
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templates = _t);
        } }, hostVars: 2, hostBindings: function ToggleButton_HostBindings(rf, ctx) { if (rf & 2) {
            i0.ɵɵclassMap(ctx.hostClass);
        } }, inputs: { onLabel: "onLabel", offLabel: "offLabel", onIcon: "onIcon", offIcon: "offIcon", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", disabled: [2, "disabled", "disabled", booleanAttribute], style: "style", styleClass: "styleClass", inputId: "inputId", tabindex: [2, "tabindex", "tabindex", numberAttribute], size: "size", iconPos: "iconPos", autofocus: [2, "autofocus", "autofocus", booleanAttribute], allowEmpty: "allowEmpty" }, outputs: { onChange: "onChange" }, features: [i0.ɵɵProvidersFeature([TOGGLEBUTTON_VALUE_ACCESSOR, ToggleButtonStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature], decls: 4, vars: 15, consts: [["pRipple", "", "type", "button", 3, "click", "ngClass", "tabindex", "disabled"], [3, "ngClass"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [3, "class", "ngClass"]], template: function ToggleButton_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "button", 0);
            i0.ɵɵlistener("click", function ToggleButton_Template_button_click_0_listener($event) { return ctx.toggle($event); });
            i0.ɵɵelementStart(1, "span", 1);
            i0.ɵɵtemplate(2, ToggleButton_ng_container_2_Template, 1, 0, "ng-container", 2)(3, ToggleButton_Conditional_3_Template, 4, 4);
            i0.ɵɵelementEnd()();
        } if (rf & 2) {
            i0.ɵɵclassMap(ctx.styleClass);
            i0.ɵɵproperty("ngClass", ctx.cx("root"))("tabindex", ctx.tabindex)("disabled", ctx.disabled);
            i0.ɵɵattribute("aria-labelledby", ctx.ariaLabelledBy)("aria-pressed", ctx.checked)("data-p-checked", ctx.active)("data-p-disabled", ctx.disabled);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngClass", ctx.cx("content"));
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngTemplateOutlet", ctx.contentTemplate || ctx._contentTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(13, _c2, ctx.checked));
            i0.ɵɵadvance();
            i0.ɵɵconditional(!ctx.contentTemplate ? 3 : -1);
        } }, dependencies: [Ripple, CommonModule, i1.NgClass, i1.NgTemplateOutlet, SharedModule], encapsulation: 2, changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToggleButton, [{
        type: Component,
        args: [{
                selector: 'p-toggleButton, p-togglebutton, p-toggle-button',
                standalone: true,
                imports: [Ripple, CommonModule, SharedModule],
                template: `
        <button
            pRipple
            type="button"
            [ngClass]="cx('root')"
            [class]="styleClass"
            [tabindex]="tabindex"
            [disabled]="disabled"
            (click)="toggle($event)"
            [attr.aria-labelledby]="ariaLabelledBy"
            [attr.aria-pressed]="checked"
            [attr.data-p-checked]="active"
            [attr.data-p-disabled]="disabled"
        >
            <span [ngClass]="cx('content')">
                <ng-container *ngTemplateOutlet="contentTemplate || _contentTemplate; context: { $implicit: checked }"></ng-container>
                @if (!contentTemplate) {
                    @if (!iconTemplate) {
                        @if (onIcon || offIcon) {
                            <span
                                [class]="checked ? this.onIcon : this.offIcon"
                                [ngClass]="{
                                    'p-togglebutton-icon': true,
                                    'p-togglebutton-icon-left': iconPos === 'left',
                                    'p-togglebutton-icon-right': iconPos === 'right'
                                }"
                                [attr.data-pc-section]="'icon'"
                            ></span>
                        }
                    } @else {
                        <ng-container *ngTemplateOutlet="iconTemplate || _iconTemplate; context: { $implicit: checked }"></ng-container>
                    }
                    <span [ngClass]="cx('label')" [attr.data-pc-section]="'label'">{{ checked ? (hasOnLabel ? onLabel : ' ') : hasOffLabel ? offLabel : ' ' }}</span>
                }
            </span>
        </button>
    `,
                providers: [TOGGLEBUTTON_VALUE_ACCESSOR, ToggleButtonStyle],
                changeDetection: ChangeDetectionStrategy.OnPush
            }]
    }], null, { onLabel: [{
            type: Input
        }], offLabel: [{
            type: Input
        }], onIcon: [{
            type: Input
        }], offIcon: [{
            type: Input
        }], ariaLabel: [{
            type: Input
        }], ariaLabelledBy: [{
            type: Input
        }], disabled: [{
            type: Input,
            args: [{ transform: booleanAttribute }]
        }], style: [{
            type: Input
        }], styleClass: [{
            type: Input
        }], hostClass: [{
            type: HostBinding,
            args: ['class']
        }], inputId: [{
            type: Input
        }], tabindex: [{
            type: Input,
            args: [{ transform: numberAttribute }]
        }], size: [{
            type: Input
        }], iconPos: [{
            type: Input
        }], autofocus: [{
            type: Input,
            args: [{ transform: booleanAttribute }]
        }], allowEmpty: [{
            type: Input
        }], onChange: [{
            type: Output
        }], iconTemplate: [{
            type: ContentChild,
            args: ['icon', { descendants: false }]
        }], contentTemplate: [{
            type: ContentChild,
            args: ['content', { descendants: false }]
        }], templates: [{
            type: ContentChildren,
            args: [PrimeTemplate]
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ToggleButton, { className: "ToggleButton", filePath: "togglebutton.ts", lineNumber: 64 }); })();
class ToggleButtonModule {
    static ɵfac = function ToggleButtonModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ToggleButtonModule)(); };
    static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: ToggleButtonModule });
    static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [ToggleButton, SharedModule, SharedModule] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToggleButtonModule, [{
        type: NgModule,
        args: [{
                imports: [ToggleButton, SharedModule],
                exports: [ToggleButton, SharedModule]
            }]
    }], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(ToggleButtonModule, { imports: [ToggleButton, SharedModule], exports: [ToggleButton, SharedModule] }); })();

/**
 * Generated bundle index. Do not edit.
 */

export { TOGGLEBUTTON_VALUE_ACCESSOR, ToggleButton, ToggleButtonClasses, ToggleButtonModule, ToggleButtonStyle };
//# sourceMappingURL=primeng-togglebutton.mjs.map