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, ContentChildren, ContentChild, Output, Input, HostListener, HostBinding, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { BaseStyle } from 'primeng/base';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { SharedModule, PrimeTemplate } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import * as i1 from 'primeng/ripple';
import { Ripple } from 'primeng/ripple';

const theme = ({ dt }) => `
.p-togglebutton {
    display: inline-flex;
    cursor: pointer;
    user-select: none;
    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 {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: ${dt('togglebutton.gap')};
    padding: ${dt('togglebutton.content.padding')};
    background: transparent;
    border-radius: ${dt('togglebutton.content.border.radius')};
    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')};
}

.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-checked .p-togglebutton-content {
    background: ${dt('togglebutton.content.checked.background')};
    box-shadow: ${dt('togglebutton.content.checked.shadow')};
}

.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:not(.p-togglebutton-checked) {
    opacity: 1;
    cursor: default;
    background: ${dt('togglebutton.disabled.background')};
    border-color: ${dt('togglebutton.disabled.border.color')};
    color: ${dt('togglebutton.disabled.color')};
}

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

.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-sm .p-togglebutton-content {
    padding: ${dt('togglebutton.content.sm.padding')};
}

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

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

/* For PrimeNG (iconPos) */
.p-togglebutton-icon-right {
    order: 1;
}

.p-togglebutton.ng-invalid.ng-dirty {
    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 = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ToggleButtonStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ToggleButtonStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ToggleButtonStyle, decorators: [{
            type: Injectable
        }] });
/**
 *
 * 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 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 {
    get hostClass() {
        return this.styleClass || '';
    }
    onKeyDown(event) {
        switch (event.code) {
            case 'Enter':
                this.toggle(event);
                event.preventDefault();
                break;
            case 'Space':
                this.toggle(event);
                event.preventDefault();
                break;
        }
    }
    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();
        }
    }
    /**
     * 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;
    /**
     * 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);
    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 = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ToggleButton, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: ToggleButton, isStandalone: true, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: { onLabel: "onLabel", offLabel: "offLabel", onIcon: "onIcon", offIcon: "offIcon", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", disabled: ["disabled", "disabled", booleanAttribute], style: "style", styleClass: "styleClass", inputId: "inputId", tabindex: ["tabindex", "tabindex", numberAttribute], size: "size", iconPos: "iconPos", autofocus: ["autofocus", "autofocus", booleanAttribute], allowEmpty: "allowEmpty" }, outputs: { onChange: "onChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "click": "toggle($event)" }, properties: { "tabindex": "tabindex", "disabled": "disabled", "attr.aria-labelledby": "ariaLabelledBy", "attr.aria-pressed": "checked", "attr.data-p-checked": "active", "attr.data-p-disabled": "disabled", "attr.type": "\"button\"", "class.p-togglebutton": "true", "class.p-togglebutton-checked": "checked", "class.p-disabled": "disabled", "class.p-togglebutton-sm": "size === \"small\"", "class.p-inputfield-sm": "size === \"small\"", "class.p-togglebutton-lg": "size === \"large\"", "class.p-inputfield-lg": "size === \"large\"", "class": "this.hostClass" } }, providers: [TOGGLEBUTTON_VALUE_ACCESSOR, ToggleButtonStyle], queries: [{ propertyName: "iconTemplate", first: true, predicate: ["icon"] }, { propertyName: "contentTemplate", first: true, predicate: ["content"] }, { propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, hostDirectives: [{ directive: i1.Ripple }], ngImport: i0, template: `<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>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ToggleButton, decorators: [{
            type: Component,
            args: [{
                    selector: 'p-toggleButton, p-togglebutton, p-toggle-button',
                    standalone: true,
                    imports: [CommonModule, SharedModule],
                    hostDirectives: [{ directive: Ripple }],
                    host: {
                        '[tabindex]': 'tabindex',
                        '[disabled]': 'disabled',
                        '[attr.aria-labelledby]': 'ariaLabelledBy',
                        '[attr.aria-pressed]': 'checked',
                        '[attr.data-p-checked]': 'active',
                        '[attr.data-p-disabled]': 'disabled',
                        '[attr.type]': '"button"',
                        '[class.p-togglebutton]': 'true',
                        '[class.p-togglebutton-checked]': 'checked',
                        '[class.p-disabled]': 'disabled',
                        '[class.p-togglebutton-sm]': 'size === "small"',
                        '[class.p-inputfield-sm]': 'size === "small"',
                        '[class.p-togglebutton-lg]': 'size === "large"',
                        '[class.p-inputfield-lg]': 'size === "large"'
                    },
                    template: `<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>`,
                    providers: [TOGGLEBUTTON_VALUE_ACCESSOR, ToggleButtonStyle],
                    changeDetection: ChangeDetectionStrategy.OnPush
                }]
        }], propDecorators: { hostClass: [{
                type: HostBinding,
                args: ['class']
            }], onKeyDown: [{
                type: HostListener,
                args: ['keydown', ['$event']]
            }], toggle: [{
                type: HostListener,
                args: ['click', ['$event']]
            }], 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
            }], 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]
            }] } });
class ToggleButtonModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ToggleButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: ToggleButtonModule, imports: [ToggleButton, SharedModule], exports: [ToggleButton, SharedModule] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ToggleButtonModule, imports: [ToggleButton, SharedModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: ToggleButtonModule, decorators: [{
            type: NgModule,
            args: [{
                    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