@tmorrow/cre8-wc 1.2.4 → 1.2.6

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-field-item.js","sourceRoot":"","sources":["../../../components/checkbox-field-item/checkbox-field-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,cAAc,CAAC;AACtB,OAAO,0BAA0B,CAAC;AAClC,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,MAAM,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,OAAO,qBAAsB,SAAQ,eAAe;IAA1D;;QACa,SAAI,GAAG,UAAU,CAAC;QAiB3B;;;WAGG;QAEH,cAAS,GAAW,OAAO,CAAC;QAe5B;;WAEG;QAEH,gBAAW,GAAW,SAAS,CAAC;IAmQpC,CAAC;IA5LG;;;;;;;MAOE;IAEF,iBAAiB;QACb,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,OAAO;QAC3B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO;IAC7C,CAAC;IAED;;OAEG;IACK,OAAO;QACX,MAAM,sBAAsB,GAAG,IAAI,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC;QACnE,IAAI,sBAAsB,EAAE,CAAC;YACzB,OAAO,UAAU,CAAC;QACtB,CAAC;QACD,OAAO,EAAE,CAAC;IACd,CAAC;IAED;;;;OAIG;IACK,WAAW;QACf,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;IACxH,CAAC;IAED;;;OAGG;IACK,aAAa;QACjB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO;QACrC,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IAChH,CAAC;IAED;;;;OAIG;IACK,eAAe,CAAC,CAAQ;QAC5B,OAAO;QACP,MAAM,MAAM,GAAG,CAAC,CAAC,MAA2B,CAAC;QAC7C,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC1B,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAEzC,OAAO;QACP,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,QAAQ,EAAE;YAC1C,MAAM,EAAE;gBACJ,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,KAAK,EAAE,IAAI,CAAC,KAAK;aACpB;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACpC,CAAC;IAED;;;;;;OAMG;IACH,iBAAiB;QACb,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,OAAO;QACzC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,OAAO;QAC/C,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,aAAa,EAAE,CAAC;IACzB,CAAC;IAED;;;OAGG;IACH,YAAY;QACR,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,OAAO;QAC9B,OAAO,KAAK,CAAC,YAAY,EAAE,CAAC;IAChC,CAAC;IAED;;OAEG;IACH,cAAc;QACV,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC;QACxC,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;YACnD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,IAAI,MAAM,EAAE,CAAC;QAC5D,CAAC;QACD,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACrC,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC,yBAAyB,IAAI,MAAM,EAAE,CAAC;QAChF,CAAC;IACL,CAAC;IAED;;;;;;;OAOG;IACH,aAAa;QACT,IAAI,IAAI,CAAC,yBAAyB,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzD,OAAO,GAAG,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,yBAAyB,EAAE,CAAC,CAAC,OAAO;QAC/E,CAAC;QAAC,IAAI,IAAI,CAAC,yBAAyB,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;YAC5D,OAAO,IAAI,CAAC,yBAAyB,CAAC,CAAC,OAAO;QAClD,CAAC;QACD,OAAO,IAAI,CAAC,eAAe,CAAC,CAAC,OAAO;IACxC,CAAC;IAED;;;;OAIG;IACH,2BAA2B;QACvB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,OAAO;YACP,OAAO,IAAI,CAAA;qBACF,IAAI,CAAC,SAAS;aACtB,IAAI,CAAC,yBAAyB;;;;4CAIC,IAAI,CAAC,WAAW,WAAW,IAAI,CAAC,WAAW;yBAC9D,CAAC;QAClB,CAAC;QACD,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACjB,OAAO;YACP,OAAO,IAAI,CAAA;mBACJ,IAAI,CAAC,OAAO;aAClB,IAAI,CAAC,yBAAyB;;;;4CAIC,IAAI,CAAC,SAAS,WAAW,IAAI,CAAC,SAAS;yBAC1D,CAAC;QAClB,CAAC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,4BAA4B,EAAE;YAC/E,mCAAmC,EAAE,IAAI,CAAC,OAAO;YACjD,qCAAqC,EAAE,IAAI,CAAC,SAAS;YACrD,sCAAsC,EAAE,IAAI,CAAC,QAAQ;SACxD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;kBACD,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,WAAW,mBAAmB;;;mBAGtD,IAAI,CAAC,aAAa;eACtB,IAAI,CAAC,OAAO;iBACV,IAAI,CAAC,IAAI,IAAI,SAAS;mBACpB,IAAI,CAAC,KAAK;qBACR,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;yBACpB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;sBAC3D,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;8BAC5C,SAAS,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;sBACvC,IAAI,CAAC,OAAO;oBACd,IAAI,CAAC,eAAe;;;4BAGZ,QAAQ;yBACX,CAAC,IAAI,CAAC,OAAO;;+DAEyB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK;;QAEjF,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;YACxC,CAAC,CAAC,IAAI,CAAA,uBAAuB,IAAI,CAAC,eAAe;wCACzB,IAAI,CAAC,SAAS;cACxC;YACE,CAAC,CAAC,OACN;UACF,IAAI,CAAC,2BAA2B,EAAE;KACvC,CAAC;IACF,CAAC;;AAzSM,4BAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAMzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACZ;AAOf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDACzB;AAOlB;IADC,QAAQ,EAAE;wDACiB;AAM5B;IADC,QAAQ,EAAE;wDACQ;AAOnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDACvB;AAMpB;IADC,QAAQ,EAAE;0DACqB;AAMhC;IADC,QAAQ,EAAE;0DACU;AAOrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACxB;AAOnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDACzB;AAOlB;IADC,QAAQ,EAAE;sDACM;AAMjB;IADC,QAAQ,EAAE;wDACQ;AAOnB;IADC,QAAQ,EAAE;8DACc;AAMzB;IADC,QAAQ,EAAE;wEACwB;AASnC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACxB;AAMnB;IADC,QAAQ,EAAE;gEACgB;AAM3B;IADC,KAAK,CAAC,OAAO,CAAC;oDACU;AAkM7B,IAAI,cAAc,CAAC,GAAG,CAAC,0BAA0B,CAAC,KAAK,SAAS,EAAE,CAAC;IAC/D,cAAc,CAAC,MAAM,CAAC,0BAA0B,EAAE,qBAAqB,CAAC,CAAC;AAC7E,CAAC;AAQD,eAAe,qBAAqB,CAAC","sourcesContent":["import { html, nothing, } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, query } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport '../icon/icon';\nimport '../field-note/field-note';\nimport svgCheck from '@tmorrow/cre8-wc/icons/System/Regular/Check.svg?raw';\nimport styles from './checkbox-field-item.styles.js';\nimport { Cre8FormElement } from '../cre8-form-element';\n\n/**\n * Checkbox Field Item is the combination of a checkbox input, label and field note.\n * Checkboxes can turn an option on or off.\n *\n * Checkboxes should be used when the user is allowed to select one, none or multiple options\n * OR to \"opt-in\" (ex. I would like to receive the newsletter by email)\n * or as a required acknowledgement(ex. I've read the Terms and Conditions).\n * If the user can only chose one option from many, use `radio-field-item`.\n *\n * ## How to Use\n *\n * - A checkbox is independent of all other checkboxes in the list,\n *   so checking one box should not uncheck the others in the group.\n * - Place checkbox options one on top of another vertically. Do not display them in a row horizontally.\n * - Avoid disabled and read-only states as much as possible.\n *\n * ## Universal Form Field Rules\n * - Unless indicated with the \"(Optional)\" label, all fields are assumed required.\n *   Minimize the number of optional fields to keep forms as short as possible.\n * - Always include a label written in sentence case.\n * - Avoid using the read-only and disabled states as much as possible.\n */\nexport class Cre8CheckboxFieldItem extends Cre8FormElement {\n    readonly type = 'checkbox';\n\n    static styles = [styles];\n\n    /**\n     * The checkbox label\n     */\n    @property({ type: String })\n    label?: string;\n\n    /**\n     * Changes the component's treatment to represent an error state\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n    isError?: boolean;\n\n    /**\n     * Visually hidden text that always signifies that this is an error for screen reader usage\n     * @attr {string}\n     */\n    @property()\n    errorText: string = 'Error';\n\n    /**\n     * The error field note that appears below the default field note\n     */\n    @property()\n    errorNote?: string;\n\n    /**\n     * Changes the component's treatment to represent a success state\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n    isSuccess?: boolean;\n\n    /**\n     * Visually hidden text that always signifies that this is successful for screen reader usage\n     */\n    @property()\n    successText: string = 'Success';\n\n    /**\n     * The success field note that appears below the default field note\n     */\n    @property()\n    successNote?: string;\n\n    /**\n     * Disabled State\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n    disabled?: boolean;\n\n    /**\n     * Checked State\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n    checked?: boolean;\n\n    /**\n     * Checkbox FieldId\n     * @attr {string}\n     */\n    @property()\n    fieldId?: string;\n\n    /**\n     * Checkbox FieldNote\n     */\n    @property()\n    fieldNote?: string;\n\n    /**\n     * Checkbox fieldnote ariaDescribeBy\n     * @attr {string}\n     */\n    @property()\n    ariaDescribedBy?: string;\n\n    /**\n     * Additional aria-describedby connection to id for additional success and error notes to be accessible\n     */\n    @property()\n    validationAriaDescribedBy?: string;\n\n\n\n    /**\n     * Required property\n     * @attr {boolean}\n     */\n    @property({ type: Boolean, reflect: true })\n    required?: boolean;\n\n    /**\n     * Checkbox fieldnote icon name\n     */\n    @property()\n    fieldNoteIconName?: string;\n\n    /**\n     * Get the input element within the shadow root and set it to this.field\n     */\n    @query('input')\n    field!: HTMLInputElement;\n\n    protected override defaultValue: boolean;\n\n    /**\n     * Connected callback lifecycle\n     * 1) Set the fieldID to a random string if not provided so form is always accessible\n     * 2) If a fieldnote is added, set the aria-describedby property to the `ariaDescribedBy` property\n     * or a random string to always make the form field accessible.\n     * 3) Set the form internal data to set that to the default checked state.\n     * 4) Set the default value of the checkbox field item to the checked property\n    */\n\n    connectedCallback() {\n        super.connectedCallback();\n        this.setFormData(); /* 3 */\n        this.defaultValue = this.checked; /* 4 */\n    }\n\n    /**\n     * access role when check-box-field-item embedded in checkbox-field\n     */\n    private getRole() {\n        const checkboxFieldContainer = this.closest('cre8-checkbox-field');\n        if (checkboxFieldContainer) {\n            return 'listitem';\n        }\n        return '';\n    }\n\n    /**\n     * Set form data\n     * 1) If a checked property is provided, set the form value the checkbox value attribute.\n     * Otherwise, don't provide a value for the checkbox data array\n     */\n    private setFormData() {\n        return this.checked ? this._internals.setFormValue(this.value || 'on') : this._internals.setFormValue(null); /* 1 */\n    }\n\n    /**\n     * Handle on checkbox change\n     * 1) On change of the checkbox input, if `checked` is true, then set it to false and vice versa.\n     */\n    private _clickHandler() {\n        this.checked = !this.checked; /* 2 */\n        return this.checked ? this._internals.setFormValue(this.value || 'on') : this._internals.setFormValue(null);\n    }\n\n    /**\n     * Handle On Change\n     * 1. Set the value when the select is changed.\n     * 2. Fire the custom event with the current value.\n     */\n    private _handleOnChange(e: Event) {\n        /* 1 */\n        const target = e.target as HTMLSelectElement;\n        this.value = target.value;\n        this._internals.setFormValue(this.value);\n\n        /* 2 */\n        const customEvent = new CustomEvent('change', {\n            detail: {\n                name: this.name,\n                value: this.value,\n            },\n            bubbles: true,\n            composed: true,\n        });\n        this.dispatchEvent(customEvent);\n    }\n\n    /**\n     * Form reset callback\n     * 1) Set checked property to the default value and then set the input's checked attribute to that default value\n     * 2) Set the input's checked attribute to that default value\n     * 3) Set the element internals form data when the form is reset\n     * 4) Change the new value to the old value on reset\n     */\n    formResetCallback(): void {\n        this.checked = this.defaultValue; /* 1 */\n        this.field.checked = this.defaultValue; /* 2 */\n        this.setFormData();\n        this.requestUpdate();\n    }\n\n    /**\n     * First update lifecycle hook\n     * 1) super.firstUpdated also uses the firstUpdated from the Cre8FormElement\n     */\n    firstUpdated() {\n        this.initializeAria(); /* 1 */\n        return super.firstUpdated();\n    }\n\n    /**\n     * Initialize aria attributes\n     */\n    initializeAria() {\n        this.fieldId = this.fieldId || nanoid();\n        if (this.fieldNote || this.slotNotEmpty('fieldNote')) {\n            this.ariaDescribedBy = this.ariaDescribedBy || nanoid();\n        }\n        if (this.successNote || this.errorNote) {\n            this.validationAriaDescribedBy = this.validationAriaDescribedBy || nanoid();\n        }\n    }\n\n    /**\n     * Aria describedby string based on field notes and error/success notes\n     * 1) If both validationAriaDescribedBy (error/success note) and field note exists,\n     * render both in the input's `aria-describedby` attribute\n     * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as\n     * the `aria-describedby` attribute (input without field note initially, but then error/success is added).\n     * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)\n     */\n    fieldNoteAria(): string {\n        if (this.validationAriaDescribedBy && this.ariaDescribedBy) {\n            return `${this.ariaDescribedBy} ${this.validationAriaDescribedBy}`; /* 1 */\n        } if (this.validationAriaDescribedBy && !this.ariaDescribedBy) {\n            return this.validationAriaDescribedBy; /* 2 */\n        }\n        return this.ariaDescribedBy; /* 3 */\n    }\n\n    /**\n     * Render the success or error field notes\n     * 1. If there is a successNote, then return the field note with the success message and state.\n     * 2. If there is a errorNote, then return the field note with the error message and state.\n     */\n    renderSuccessErrorFieldNote() {\n        if (this.successNote) {\n            /* 1 */\n            return html`<cre8-field-note\n        ?isSuccess=${this.isSuccess}\n        id=${this.validationAriaDescribedBy}\n        class=\"cre8-c-checkbox-field-item__field-note-success\"\n        iconName=\"success\"\n      >\n        <span class=\"cre8-u-is-vishidden\">${this.successText}</span> ${this.successNote}\n      </cre8-field-note>`;\n        }\n        if (this.errorNote) {\n            /* 2 */\n            return html` <cre8-field-note\n        ?isError=${this.isError}\n        id=${this.validationAriaDescribedBy}\n        class=\"cre8-c-checkbox-field-item__field-note-error\"\n        iconName=\"error-alt\"\n      >\n        <span class=\"cre8-u-is-vishidden\">${this.errorText}</span> ${this.errorNote}\n      </cre8-field-note>`;\n        }\n        return null;\n    }\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-checkbox-field-item', {\n            'cre8-c-checkbox-field-item--error': this.isError,\n            'cre8-c-checkbox-field-item--success': this.isSuccess,\n            'cre8-c-checkbox-field-item--disabled': this.disabled,\n        });\n\n        return html`\n      <div role=${ifDefined(this.getRole())} class=\"${componentClassNames}\">\n        <input class=\"cre8-c-checkbox-field-item__input\"\n          type=\"checkbox\"\n          @input=${this._clickHandler}\n          id=${this.fieldId}\n          name=${this.name ?? undefined}\n          .value=${this.value}\n          required=${ifDefined(this.required)}\n          aria-invalid=${this.required ? !!this.isError : ifDefined(this.isError)}\n          disabled=\"${ifDefined(this.disabled ? this.disabled : undefined)}\"\n          aria-describedby=\"${ifDefined(this.fieldNoteAria())}\"\n          .checked=\"${this.checked}\"\n          @change=${this._handleOnChange}\n        />\n        <span class=\"cre8-c-checkbox-field-item__custom-checkbox\">\n          <cre8-icon svg='${svgCheck}' class=\"cre8-c-checkbox-field-item__icon\" aria-label=\"checkbox\"\n          aria-hidden=\"${!this.checked}\"></cre8-icon>\n        </span>\n        <label class=\"cre8-c-checkbox-field-item__label\" for=${this.fieldId}>${this.label}</label>\n      </div>\n      ${this.fieldNote || this.slotNotEmpty('fieldNote')\n                ? html`<cre8-field-note id=${this.ariaDescribedBy} class=\"cre8-c-checkbox-field-item__field-note\"\n              ><slot name=\"fieldNote\">${this.fieldNote}</slot></cre8-field-note\n            >`\n                : nothing\n            }\n        ${this.renderSuccessErrorFieldNote()}\n    `;\n    }\n}\n\nif (customElements.get('cre8-checkbox-field-item') === undefined) {\n    customElements.define('cre8-checkbox-field-item', Cre8CheckboxFieldItem);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-checkbox-field-item': Cre8CheckboxFieldItem;\n    }\n}\n\nexport default Cre8CheckboxFieldItem;\n"]}

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

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

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

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