@instawork/design-system/lib/custom-input/custom-input.component.js

The design system for Instawork's web apps

import { CustomComponent } from '../common';
const CUSTOM_INPUT_ATTR = 'iw-custom-input';
const CUSTOM_INPUT_SELECTOR = `[${CUSTOM_INPUT_ATTR}]`;
/**
 * A base class that handles shared functionality for custom input components
 */
export class CustomInputComponent extends CustomComponent {
    constructor($el) {
        super($el);
        this.$el.attr(CUSTOM_INPUT_ATTR, '');
    }
    static jQueryPlugin(controllerName, extras, preInit) {
        return super.jQueryPlugin(controllerName, Object.assign({}, {
            CUSTOM_INPUT_ATTR: this.CUSTOM_INPUT_ATTR,
            CUSTOM_INPUT_SELECTOR: this.CUSTOM_INPUT_SELECTOR,
        }, extras), preInit);
    }
    get hasFocus() {
        return this.$el.is(':focus,:focus-within');
    }
    get required() {
        return this.$el.prop('required');
    }
    set required(value) {
        this.$el.prop('required', value);
    }
    /**
     * Returns a string representing the component host element.
     *
     * The string returned contains in order of preference:
     *   - A CSS selector style string with the tag name, "name" attribute and ID, if a "name" is present
     *     (e.g. iw-custom-input#some-id--1[name=the_input])
     *   - A CSS selector style string with the tag name ID
     *     (e.g. iw-custom-input#some-id--1
     */
    getDebugIdentifier() {
        return this.getDebugIdentifierByName();
    }
    getDebugIdentifierByName() {
        const idDebug = this.getDebugIdentifierById();
        const name = this.$el.attr('name');
        if (name) {
            return `${idDebug}[name=${name}]`;
        }
        return idDebug;
    }
}
CustomInputComponent.CUSTOM_INPUT_ATTR = CUSTOM_INPUT_ATTR;
/**
 * Returns a selector string that can be used to find elements bound to a {@link CustomInputComponent} instance.
 *
 * The iw-custom-input attribute is automatically added to any component using {@link CustomInputComponent} so they
 * can be easily identified.
 */
CustomInputComponent.CUSTOM_INPUT_SELECTOR = CUSTOM_INPUT_SELECTOR;
/**
 * Overridden to return a CSS selector for the host element of the component.
 *
 * @abstract
 */
CustomInputComponent.COMPONENT_SELECTOR = '';
//# sourceMappingURL=custom-input.component.js.map