@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/radio-field-item/radio-field-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-field-item.js","sourceRoot":"","sources":["../../../components/radio-field-item/radio-field-item.ts"],"names":[],"mappings":"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","sourcesContent":["import { html,  } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, query } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { Cre8FormElement } from '../cre8-form-element';\nimport '../field-note/field-note';\nimport styles from './radio-field-item.styles.js';\n\n    /**\n     * A Radio Field Item adds a radio button to a Radio Field. Radio buttons let a user choose only one of several\n     * options. Do not use a single radio button, because once selected, it cannot be de-selected. If the user can only\n     * choose one, none or many options, use Checkbox instead.\n     */\n\nexport class Cre8RadioFieldItem extends Cre8FormElement {\n    type = 'radio';\n\n    static styles = [styles];\n\n    /**\n     * Identifies the element that provides a detailed, extended description for the object.\n     *\n     * @attr{string}\n     */\n    @property()\n        ariaDescribedBy?: string;\n\n    /**\n     * A Boolean attribute which, if present, sets the radio button as selected.\n     *\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        checked?: boolean;\n\n    /**\n     * The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with\n     * the form. The user can neither edit nor focus on the control, nor its form control descendants.\n     *\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        disabled?: boolean;\n\n    /**\n     * Get the radio field item input\n     */\n    @query('input')\n        field!: HTMLInputElement;\n\n    /**\n     * The fieldId attribute is assigned to the HTML input element of the radio button and the for attribute of the\n     * corresponding label.\n     */\n    @property()\n        fieldId?: string;\n\n    /**\n     * A FieldNote can be placed to provide guidance. It's frequently used to in the context of form fields for extra\n     * information or validation messages.\n     */\n    @property()\n        fieldNote?: string;\n\n    /**\n     * Sets the item fieldnote icon.\n     *\n     * - **check** renders a badge with success state treatment\n     * - **error** renders a badge with error state treatment\n     */\n    @property()\n        fieldNoteIconName?: string;\n\n    /**\n     * Radio item fieldnote knockout\n     *\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        fieldNoteKnockout?: boolean;\n\n    /**\n     * Sets the error state of the fieldnote.\n     *\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        fieldNoteIsError?: boolean;\n\n    /**\n     * The isError attribute is used to indicate an error state related to the radio button.\n     *\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        isError?: boolean;\n\n    /**\n     * The isSuccess attribute is used to indicate a success state related to the radio button.\n     *\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        isSuccess?: boolean;\n\n    /**\n     * The label attribute is used to assign a value to the label element corresponding to this radio button.\n     */\n    @property()\n        label?: string;\n\n    /**\n     * Required attribute\n     *\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n        required?: boolean;\n\n    /**\n     * Initial checked for initial checked state\n     */\n    private initialChecked?: boolean;\n\n    /**\n     * Connected callback lifecycle\n     * 1) Set the initial checked value to the checked property\n     * 2) Auto-generate the fieldId if a user doesn't provided so that the form field is accessible\n     * 3) If a field note exists, set the aria-describedby attribute to make sure the field note is read out\n     */\n    connectedCallback() {\n        super.connectedCallback();\n        this.fieldId = this.fieldId || nanoid(); /* 2 */\n        if (this.fieldNote) {\n            this.ariaDescribedBy = this.ariaDescribedBy || nanoid(); /* 3 */\n        }\n    }\n\n    /**\n     * Reset the radio field\n     */\n    public resetField() {\n        this._internals.setFormValue(null);\n    }\n\n    /**\n     * Reset the radio field items tab indeces\n     */\n    resetTabIndeces(radioFieldItems: Cre8RadioFieldItem[]) {\n        radioFieldItems.forEach((element: HTMLElement) => {\n            element.shadowRoot.querySelector('.cre8-c-radio-field-item__input').setAttribute('tabindex', '0');\n        });\n    }\n\n    /**\n     * Remove checked\n     * 1) Remove checked property from all items and set tabindex to -1\n     * 2) Reset the form field to not checked\n     */\n    removeChecked() {\n        if (this.parentNode) {\n        /* 1 */\n            const radioFieldItems = this.parentNode.querySelectorAll('cre8-radio-field-item');\n            radioFieldItems.forEach((element: Cre8RadioFieldItem) => {\n                element.checked = false;\n                element.shadowRoot.querySelector('.cre8-c-radio-field-item__input').setAttribute('tabindex', '-1');\n                element.resetField(); /* 2 */\n            });\n        }\n    }\n\n    /**\n     * Reset form callback\n     * 1) Remove the checked state from all radio elements\n     * 2) Set the checked state to the initial checked state\n     * 3) Set the radio field input checked attribute to the initial checked state\n     */\n    formResetCallback(): void {\n        this.removeChecked();\n        this.checked = this.initialChecked;\n        this.field.checked = this.initialChecked;\n    }\n\n    /**\n     * access role when radio-field-item embedded in radio-field\n     */\n    private _getRole() {\n        const radioFieldContainer = this.closest('cre8-radio-field');\n        if (radioFieldContainer) {\n            return 'listitem';\n        }\n        return '';\n    }\n\n    /**\n     * Toggle active state of primary nav item\n     * 1) Remove isActive state from all sibling elements\n     * 2) Toggle active state of element selected\n     */\n    private _clickHandler() {\n        this.removeChecked();\n        this.checked = !this.checked; /* 2 */\n        const radioInput = this.shadowRoot?.querySelector<HTMLInputElement>('.cre8-c-radio-field-item__input');\n        if (radioInput) {\n            radioInput.setAttribute('tabindex', '0');\n        }\n        return this.checked ? this._internals.setFormValue(this.value || 'on') : this._internals.setFormValue(null);\n    }\n\n    /**\n     * Handle sibling element updates during handleKeyDown function\n     * 1) Prevent default keyboard functionality to disable scroll with up/down keys\n     * 2) Trigger removeChecked\n     * 3) Focus sibling shadowRoot element\n     * 4) Click sibling shadowRoot element\n     * 5) Set sibling element `tabindex` to `0`\n     * 6) Set sibling element `checked` value\n     */\n    private _updateSibling(event: KeyboardEvent, sibling: Element, element: HTMLElement) {\n        event.preventDefault();\n        this.removeChecked();\n        element.focus();\n        element.click();\n        element.setAttribute('tabindex', '0');\n        sibling.setAttribute('checked', '');\n    }\n\n    /**\n     * Handle keydown\n     * 1) If left or up arrow key is struck and radio field item exists before current item,\n     *    remove checked from all items and add it to the next item\n     * 2) If right or down arrow key is struck and radio field item exists after current item,\n     *    remove checked from all items and add checked to the next item. Focus on this item\n     *    and set tabindex for when focusing out of radio field and back onto checked item.\n     * 3) If the element is in focused, then for event emission the current\n     *    focues element should be clicked to emit event.\n     * 4) If the Tab key is pressed, and none of the items are checked\n     *    then jump away from field set to the next tabbable item\n     */\n    handleKeyDown(e: KeyboardEvent) {\n        if (e.code === 'ArrowLeft' || e.code === 'ArrowUp') {\n        /* 1 */\n            const previous = this.previousElementSibling;\n            const previousElement = previous?.shadowRoot?.querySelector<HTMLInputElement>(\n                '.cre8-c-radio-field-item__input:not([disabled])'\n            );\n\n            if (previousElement) {\n                this._updateSibling(e, previous, previousElement);\n            }\n        } else if (e.code === 'ArrowRight' || e.code === 'ArrowDown') {\n        /* 2 */\n            const next = this.nextElementSibling;\n            const nextElement = next?.shadowRoot?.querySelector<HTMLInputElement>(\n                '.cre8-c-radio-field-item__input:not([disabled])'\n            );\n            if (nextElement) {\n                this._updateSibling(e, next, nextElement);\n            }\n        } else if (e.code === 'Tab' && !this.checked) {\n            const radioFieldItems = this.parentNode.querySelectorAll('cre8-radio-field-item');\n            radioFieldItems.forEach((element: HTMLElement) => {\n                element.shadowRoot.querySelector('.cre8-c-radio-field-item__input').setAttribute('tabindex', '-1');\n            });\n\n        // After making tabbing away from the feildset,\n        // reset the items to be tabbable again so the user can come back to the fieldset\n            setTimeout(this.resetTabIndeces, 100, radioFieldItems);\n        }\n    }\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-radio-field-item', {\n            'cre8-c-radio-field-item--error': this.isError,\n            'cre8-c-radio-field-item--success': this.isSuccess,\n            'cre8-c-radio-field-item--disabled': this.disabled,\n        });\n\n        const isChecked = this.checked === true || this.initialChecked === true;\n\n        return html`\n        <div role=${ifDefined(this._getRole())} class=\"${componentClassNames}\" @keydown=${this.handleKeyDown}>\n            <input\n            class=\"cre8-c-radio-field-item__input\"\n            type=\"radio\"\n            @input=${this._clickHandler}\n            id=${this.fieldId}\n            aria-describedby=\"${ifDefined(this.ariaDescribedBy)}\"\n            required=${ifDefined(this.required)}\n            aria-invalid=${this.required ? !!this.isError : ifDefined(this.isError)}\n            name=${this.name}\n            .value=${this.value}\n            disabled=\"${ifDefined(this.disabled)}\"\n            .checked=\"${isChecked}\"\n            />\n            <span class=\"cre8-c-radio-field-item__custom-radio\">\n            <div class=\"cre8-c-radio-field-item__inner-circle\"></div>\n            </span>\n            <label class=\"cre8-c-radio-field-item__label\" for=${this.fieldId}>${this.label}</label>\n    </div>\n        ${this.fieldNote\n        ? html`<cre8-field-note\n                ?inverted=${this.fieldNoteKnockout}\n                id=${ifDefined(this.ariaDescribedBy)}\n                iconName=${ifDefined(this.fieldNoteIconName)}\n                ?isSuccess=${this.isSuccess}\n                ?isError=${this.isError}\n            >\n                ${this.fieldNote}\n            </cre8-field-note>`\n        : ''}\n        `;\n    }\n}\n\nif (customElements.get('cre8-radio-field-item') === undefined) {\n    customElements.define('cre8-radio-field-item', Cre8RadioFieldItem);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-radio-field-item': Cre8RadioFieldItem;\n    }\n}\n\nexport default Cre8RadioFieldItem;\n"]}

package/lib/components/radio-field-item/radio-field-item.styles.d.ts

@@ -0,0 +1,3 @@
+declare const styles: import("lit").CSSResult;
+export default styles;
+//# sourceMappingURL=radio-field-item.styles.d.ts.map

package/lib/components/radio-field-item/radio-field-item.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-field-item.styles.d.ts","sourceRoot":"","sources":["../../../components/radio-field-item/radio-field-item.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAgtBV,CAAC;AACH,eAAe,MAAM,CAAC"}