@tmorrow/cre8-wc 1.2.4 → 1.2.6

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

@@ -0,0 +1,172 @@
+import '../icon/icon';
+import '../field-note/field-note';
+import { Cre8FormElement } from '../cre8-form-element';
+/**
+ * Checkbox Field Item is the combination of a checkbox input, label and field note.
+ * Checkboxes can turn an option on or off.
+ *
+ * Checkboxes should be used when the user is allowed to select one, none or multiple options
+ * OR to "opt-in" (ex. I would like to receive the newsletter by email)
+ * or as a required acknowledgement(ex. I've read the Terms and Conditions).
+ * If the user can only chose one option from many, use `radio-field-item`.
+ *
+ * ## How to Use
+ *
+ * - A checkbox is independent of all other checkboxes in the list,
+ *   so checking one box should not uncheck the others in the group.
+ * - Place checkbox options one on top of another vertically. Do not display them in a row horizontally.
+ * - Avoid disabled and read-only states as much as possible.
+ *
+ * ## Universal Form Field Rules
+ * - Unless indicated with the "(Optional)" label, all fields are assumed required.
+ *   Minimize the number of optional fields to keep forms as short as possible.
+ * - Always include a label written in sentence case.
+ * - Avoid using the read-only and disabled states as much as possible.
+ */
+export declare class Cre8CheckboxFieldItem extends Cre8FormElement {
+    readonly type = "checkbox";
+    static styles: import("lit").CSSResult[];
+    /**
+     * The checkbox label
+     */
+    label?: string;
+    /**
+     * Changes the component's treatment to represent an error state
+     * @attr {boolean}
+     */
+    isError?: boolean;
+    /**
+     * Visually hidden text that always signifies that this is an error for screen reader usage
+     * @attr {string}
+     */
+    errorText: string;
+    /**
+     * The error field note that appears below the default field note
+     */
+    errorNote?: string;
+    /**
+     * Changes the component's treatment to represent a success state
+     * @attr {boolean}
+     */
+    isSuccess?: boolean;
+    /**
+     * Visually hidden text that always signifies that this is successful for screen reader usage
+     */
+    successText: string;
+    /**
+     * The success field note that appears below the default field note
+     */
+    successNote?: string;
+    /**
+     * Disabled State
+     * @attr {boolean}
+     */
+    disabled?: boolean;
+    /**
+     * Checked State
+     * @attr {boolean}
+     */
+    checked?: boolean;
+    /**
+     * Checkbox FieldId
+     * @attr {string}
+     */
+    fieldId?: string;
+    /**
+     * Checkbox FieldNote
+     */
+    fieldNote?: string;
+    /**
+     * Checkbox fieldnote ariaDescribeBy
+     * @attr {string}
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Additional aria-describedby connection to id for additional success and error notes to be accessible
+     */
+    validationAriaDescribedBy?: string;
+    /**
+     * Required property
+     * @attr {boolean}
+     */
+    required?: boolean;
+    /**
+     * Checkbox fieldnote icon name
+     */
+    fieldNoteIconName?: string;
+    /**
+     * Get the input element within the shadow root and set it to this.field
+     */
+    field: HTMLInputElement;
+    protected defaultValue: boolean;
+    /**
+     * Connected callback lifecycle
+     * 1) Set the fieldID to a random string if not provided so form is always accessible
+     * 2) If a fieldnote is added, set the aria-describedby property to the `ariaDescribedBy` property
+     * or a random string to always make the form field accessible.
+     * 3) Set the form internal data to set that to the default checked state.
+     * 4) Set the default value of the checkbox field item to the checked property
+    */
+    connectedCallback(): void;
+    /**
+     * access role when check-box-field-item embedded in checkbox-field
+     */
+    private getRole;
+    /**
+     * Set form data
+     * 1) If a checked property is provided, set the form value the checkbox value attribute.
+     * Otherwise, don't provide a value for the checkbox data array
+     */
+    private setFormData;
+    /**
+     * Handle on checkbox change
+     * 1) On change of the checkbox input, if `checked` is true, then set it to false and vice versa.
+     */
+    private _clickHandler;
+    /**
+     * Handle On Change
+     * 1. Set the value when the select is changed.
+     * 2. Fire the custom event with the current value.
+     */
+    private _handleOnChange;
+    /**
+     * Form reset callback
+     * 1) Set checked property to the default value and then set the input's checked attribute to that default value
+     * 2) Set the input's checked attribute to that default value
+     * 3) Set the element internals form data when the form is reset
+     * 4) Change the new value to the old value on reset
+     */
+    formResetCallback(): void;
+    /**
+     * First update lifecycle hook
+     * 1) super.firstUpdated also uses the firstUpdated from the Cre8FormElement
+     */
+    firstUpdated(): void;
+    /**
+     * Initialize aria attributes
+     */
+    initializeAria(): void;
+    /**
+     * Aria describedby string based on field notes and error/success notes
+     * 1) If both validationAriaDescribedBy (error/success note) and field note exists,
+     * render both in the input's `aria-describedby` attribute
+     * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as
+     * the `aria-describedby` attribute (input without field note initially, but then error/success is added).
+     * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)
+     */
+    fieldNoteAria(): string;
+    /**
+     * Render the success or error field notes
+     * 1. If there is a successNote, then return the field note with the success message and state.
+     * 2. If there is a errorNote, then return the field note with the error message and state.
+     */
+    renderSuccessErrorFieldNote(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-checkbox-field-item': Cre8CheckboxFieldItem;
+    }
+}
+export default Cre8CheckboxFieldItem;
+//# sourceMappingURL=checkbox-field-item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-field-item.d.ts","sourceRoot":"","sources":["../../../components/checkbox-field-item/checkbox-field-item.ts"],"names":[],"mappings":"AAIA,OAAO,cAAc,CAAC;AACtB,OAAO,0BAA0B,CAAC;AAGlC,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,qBAAsB,SAAQ,eAAe;IACtD,QAAQ,CAAC,IAAI,cAAc;IAE3B,MAAM,CAAC,MAAM,4BAAY;IAEzB;;OAEG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IAEH,SAAS,EAAE,MAAM,CAAW;IAE5B;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IAEH,WAAW,EAAE,MAAM,CAAa;IAEhC;;OAEG;IAEH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IAEH,yBAAyB,CAAC,EAAE,MAAM,CAAC;IAInC;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IAEH,KAAK,EAAG,gBAAgB,CAAC;IAEzB,UAAmB,YAAY,EAAE,OAAO,CAAC;IAEzC;;;;;;;MAOE;IAEF,iBAAiB;IAMjB;;OAEG;IACH,OAAO,CAAC,OAAO;IAQf;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAInB;;;OAGG;IACH,OAAO,CAAC,aAAa;IAKrB;;;;OAIG;IACH,OAAO,CAAC,eAAe;IAkBvB;;;;;;OAMG;IACH,iBAAiB,IAAI,IAAI;IAOzB;;;OAGG;IACH,YAAY;IAKZ;;OAEG;IACH,cAAc;IAUd;;;;;;;OAOG;IACH,aAAa,IAAI,MAAM;IASvB;;;;OAIG;IACH,2BAA2B;IA0B3B,MAAM;CAqCT;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,0BAA0B,EAAE,qBAAqB,CAAC;KACrD;CACJ;AAED,eAAe,qBAAqB,CAAC"}