coveo-search-ui-extensions/bin/es6/components/ActionButton/DisableableToggleActionButton.js

Small generic components to extend the functionality of Coveo's Search UI framework.

import { ComponentOptions, Component, Initialization } from 'coveo-search-ui';
import { StatefulActionButton } from './StatefulActionButton';
import { ToggleActivatedState as ActivatedState, ToggleDeactivatedState as DeactivatedState, } from './ToggleableButton';
import { DisabledState } from './DisableableButton';
import { ToggleActionButton } from './ToggleActionButton';
export class DisableableToggleActionButton extends Component {
    constructor(element, options, bindings) {
        super(element, DisableableToggleActionButton.ID, bindings);
        this.element = element;
        this.options = options;
        this.bindings = bindings;
        this.options = ComponentOptions.initComponentOptions(element, DisableableToggleActionButton, options);
        this.createInnerButton(bindings);
    }
    /**
     * Indicates whether the toggle button is in the activated state.
     */
    isActivated() {
        return this.innerStatefulActionButton.getCurrentState() === this.activatedState;
    }
    /**
     * Indicates whether the disableable toggle button is in the disable state.
     */
    isDisabled() {
        return this.innerStatefulActionButton.getCurrentState() === this.disabledState;
    }
    /**
     * Sets the toggle button to the specified state.
     * @param activated Whether the button is activated.
     */
    setActivated(activated) {
        if (this.isDisabled() && !activated) {
            this.innerStatefulActionButton.switchTo(this.deactivatedState);
        }
        if (!this.isDisabled() && activated !== this.isActivated()) {
            this.innerStatefulActionButton.switchTo(activated ? this.activatedState : this.deactivatedState);
        }
    }
    setEnabled(enabled) {
        if (enabled) {
            this.enable();
        }
        else {
            this.disable();
        }
    }
    disable() {
        if (this.isDisabled()) {
            return;
        }
        if (this.isActivated()) {
            this.innerStatefulActionButton.switchTo(this.deactivatedState);
        }
        this.innerStatefulActionButton.switchTo(this.disabledState);
    }
    enable() {
        if (this.isDisabled()) {
            this.innerStatefulActionButton.switchTo(this.deactivatedState);
        }
    }
    onClick() {
        if (this.isDisabled()) {
            return;
        }
        this.setActivated(!this.isActivated());
        if (this.options.click) {
            this.options.click();
        }
    }
    createInnerButton(bindings) {
        this.deactivatedState = new DeactivatedState(this);
        this.disabledState = new DisabledState(this);
        this.activatedState = new ActivatedState(this);
        this.innerStatefulActionButton = new StatefulActionButton(this.element, {
            initialState: this.deactivatedState,
            states: [this.deactivatedState, this.activatedState, this.disabledState],
            allowedTransitions: [
                { from: this.deactivatedState, to: this.disabledState },
                { from: this.disabledState, to: this.deactivatedState },
                { from: this.deactivatedState, to: this.activatedState },
                { from: this.activatedState, to: this.deactivatedState },
            ],
        }, bindings);
    }
}
DisableableToggleActionButton.ID = 'DisableableToggleActionButton';
DisableableToggleActionButton.ACTIVATED_CLASS_NAME = 'coveo-toggleactionbutton-activated';
DisableableToggleActionButton.options = Object.assign(Object.assign({}, ToggleActionButton.options), { disabledTooltip: ComponentOptions.buildStringOption(), disabledIcon: ComponentOptions.buildStringOption() });
Initialization.registerAutoCreateComponent(DisableableToggleActionButton);
//# sourceMappingURL=DisableableToggleActionButton.js.map