@instawork/design-system/lib/select-all/select-all.component.js

The design system for Instawork's web apps

import * as $ from 'jquery';
import { CustomComponent } from '../common';
const ATTR_SELECT_ALL = 'iw-select-all';
const COMPONENT_SELECTOR = `input[type=checkbox][${ATTR_SELECT_ALL}]`;
/**
 * A jQuery plugin component that allows a checkbox input with the iw-select-all attribute to automatically select
 * or deselect all the checkbox inputs defined by the selector in the attribute value.
 *
 * @example
 *
 * ```html
 * <!-- feature.html -->
 * <input id="include-all" type="checkbox" iw-select-all="[name$=include]" />
 *
 * <input type="checkbox" name="form-0-include" />
 * <input type="checkbox" name="form-1-include" />
 * <input type="checkbox" name="form-2-include" />
 * <input type="checkbox" name="form-3-include" />
 * ```
 *
 * ```typescript
 * # feature.ts
 * $('#include-all').iwSelectAll();
 * ```
 */
export class SelectAllComponent extends CustomComponent {
    constructor($el) {
        super($el);
        this.$controlled = $(this.controlledSelector);
        this.$el.on('click', () => this.onSelectAllClick());
        this.$controlled.on('click', () => this.onControlledClick());
        // define these property setters/getters so that they can be accessed via jQuery.prop
        Object.defineProperties(this.el, {
            controlledSelector: {
                get: () => this.controlledSelector,
                set: (value) => this.controlledSelector = value,
            },
        });
    }
    static get COMPONENT_SELECTOR() {
        return COMPONENT_SELECTOR;
    }
    static get ID_PREFIX() {
        return ATTR_SELECT_ALL;
    }
    static loadPlugin() {
        super.loadPlugin();
        if (!$.fn.iwSelectAll) {
            $.fn.iwSelectAll = SelectAllComponent.jQueryPlugin('SelectAllComponent');
        }
    }
    get controlledSelector() {
        return this.$el.attr(ATTR_SELECT_ALL) + `:not(#${this.id})`;
    }
    set controlledSelector(value) {
        this.$el.attr(ATTR_SELECT_ALL, value);
    }
    get indeterminate() {
        return this.someControlledChecked && !this.allControlledChecked;
    }
    get selectAllChecked() {
        return this.$el.prop('checked');
    }
    get allControlledChecked() {
        return this.$controlled.filter(':checked').length === this.$controlled.length;
    }
    get someControlledChecked() {
        return this.$controlled.filter(':checked').length > 0;
    }
    onSelectAllClick() {
        this.$controlled.prop('checked', this.selectAllChecked);
    }
    onControlledClick() {
        this.$el
            .prop('checked', this.allControlledChecked)
            .prop('indeterminate', this.someControlledChecked && !this.allControlledChecked);
    }
}
//# sourceMappingURL=select-all.component.js.map