@tmorrow/cre8-wc 1.0.14

package/lib/components/button/button.d.ts

@@ -0,0 +1,229 @@
+import { Cre8FormElement } from '../cre8-form-element';
+import '../icon/icon';
+import '../loading-spinner/loading-spinner';
+/**
+ * The size and state of buttons on the screen serve as visual cues for the user
+ * about what they can do and what they should do next.
+ * They indicate the availability and priority of the action on the page.
+ *
+ * - Buttons are a single call-to-action where a single click performs that action
+ * - Use buttons when you are performing an action which is almost always on the same page
+ * - Use a link instead of a button when you're navigating to another place
+ *
+ * ## How to Use
+ *
+ * Buttons are distinguished by three key properties:
+ *
+ * - **Visual Priority**: Style and size: Primary, Secondary, or Tertiary styles;
+ *   each with large and small variations
+ * - **State**: Interaction state: hover/click (press), focus, disabled,
+ *   and submitting/loading (only for large buttons)
+ * - **Brand**: Styles determined by the site or component theme
+ *
+ * ### Usage Guidelines
+ *
+ * Primary, Secondary and Tertiary styles emphasize or de-emphasize an action. They also define
+ * background, font style, and border colors. Large and small sizing assists with visual priority by defining button
+ * heights, left and right internal padding, and font-size.
+ *
+ * #### System Feedback
+ * Each button has a default and hover/click (press) state that give the user feedback
+ * that they have successfully interacted with a button.
+ * Button presses should always be combined with other types of timely system feedback.
+ * Examples of system feedback may be a page refresh, exposing additional controls or content,
+ * dialogs, alerts and notifications.
+ * If there is perceived a delay in system response, generally due to technical constraints,
+ * provide a progress or loading indicator.
+ *
+ * #### Button Text
+ *
+ * - Button text should be as short and simple as possible, ideally a maximum of 3 words.
+ * - Use Title Case for readability.
+ * - They should not include punctuation (exception: "Loading...").
+ * - They should not be used as an indicator of what happens on the next page, or as a substitute
+ * for a progress meter.
+ *
+ * #### Button With Icon
+ *
+ * For button with icon:
+ * - **iconRotateDegree** & **iconFlipDirection** props are optional.
+ * - They are used to set up the correct direction for icons, for example,
+ * arrows, caret up or caret down.
+ *
+ * #### Button Styling
+ *
+ * - DO use only the styles of the brand you are working on.
+ * - DO NOT combine styles, even if the page is co-branded.
+ *
+ * #### Button Sizes
+ * - DO always pair like sizes together and maintain the hierarchy of Primary and Secondary/Tertiary.
+ * - DO NOT mix sizes of buttons when they are used together as a group.
+ *
+ * #### Input Pairing
+ *
+ * Primary and Secondary buttons may be paired with input fields.
+ * Only one Primary button may appear on each screen.
+ * Use the Secondary button when there are multiple in-context buttons
+ * and/or when there is an emphasized page level button.
+ * When used in a form context, the button's `type` needs to be `submit` to pass along form data.
+ *
+ * - DO use only large buttons with input fields.
+ * - DO NOT use small buttons with input fields.
+ *
+ */
+export declare class Cre8Button extends Cre8FormElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * The button text. Should be as short and simple as possible, ideally a maximum of 3 words.
+     * - Use Title Case for readability.
+     * - Should not include punctuation (exception: "Loading...").
+     * - Should not be used as an indicator of what happens on the next page, or as a substitute for a progress meter.
+     */
+    text?: string;
+    /**
+     * Style variant
+     * - **primary** renders the button used for primary actions. Presents highest visual priority.
+     *   When grouped with other buttons, only one primary is allowed
+     * - **secondary** renders a secondary button. Presents a lower visual priority
+     * - **tertiary** renders a tertiary button. Presents the lowest visual priority.
+     *   Should be used in limited amounts - consider if a link (`<a>`) would be more appropriate
+     */
+    variant?: 'primary' | 'secondary' | 'tertiary';
+    /**
+     * Disabled attribute
+     * @attr {boolean}
+     *
+     * **NOTE**: Disabled states are used to indicate that an action is temporarily unavailable.
+     * In general, using disabled states is NOT advised. It should be clear to the user what actions they must
+     * take to activate the button. Real-time, field-level validation can help provide clarity.
+     */
+    disabled?: boolean;
+    /**
+     * This property is for a neutral button propery mainly used for the secondary or tertiary button variant.
+     * @attr {boolean)
+     */
+    neutral?: boolean;
+    /**
+    * Inverse attribute
+    * @attr {boolean}
+    *
+    * The inverse prop allows the button to work on either a light or dark surface.
+    */
+    inverse?: boolean;
+    /**
+     *
+     * Provide this property if you intend to use button styles for an anchor tag (`<a>`).
+     * This changes the component markup from `<button>` usage to `<a>` instead.
+     */
+    href?: string;
+    /**
+     * Target attribute for a link if providing `href` to style a link as a button
+     * - **_blank** yields a link that opens in a new tab
+     * - **_self** yields a link that loads the URL into the same browsing context as the current one.
+     *   This is the default behavior
+     * - **_parent** yields a link that loads the URL into the parent browsing context of the current one.
+     *   If there is no parent, this behaves the same way as _self
+     * - **_top** yields a link that loads the URL into the top-level browsing context.
+     *   If there is no parent, this behaves the same way as _self.
+     */
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    /**
+     * Type of button.
+     * - **button** (default) button has no default behavior and does nothing unless provided some sort
+     * of client-side trigger
+     * - **submit** button for submitting form data to a server
+     */
+    type: 'button' | 'submit' | 'reset';
+    /**
+     * Rel if this is an <a> element - this swaps <button> for <a>
+     */
+    rel?: string;
+    /**
+     * Deprecated: iconName, use svg instead
+     * Icon name if including an icon within a button.
+     * Must include the icon's position with `iconPostion`. This prop is used for <cre8-icon-legacy>
+     * @deprecated
+     */
+    iconName?: string;
+    /**
+     * svg as a raw string
+     * - For button with icon, the icon is defined by this prop.
+     * - Pass in a raw svg as a String for using <cre8-icon>
+     * - Must include the icon's position with `iconPostion`.
+     */
+    svg?: string;
+    /**
+     * iconRotateDegree is used for <cre8-icon> to set the arrow in the correct direction
+     */
+    iconRotateDegree?: number;
+    /**
+     * iconFlipDirection is used for <cre8-icon> to set the icon in the correct direction
+     */
+    iconFlipDirection?: string;
+    /**
+     * Icon position. Must include the name of the icon with `iconName`
+     *
+     * - **before** places the icon before the button text
+     * - **after** places the icon after the button text
+     */
+    iconPosition?: 'before' | 'after';
+    /**
+     * Size variants add another way to increase or decrease visual priority of a button.
+     * - **sm** Shrinks the button typography and overall size from the default. Use when vertical space is constrained.
+     * - **md** This is the default value for the size.
+     * - **lg** Increases the button typography and overall size from the default.
+     */
+    size: 'sm' | 'md' | 'lg';
+    /**
+     * Visually hide button text. Text is still accessible to assistive technology.
+     * Use this for icon-only buttons for accessibility
+     */
+    hideText?: boolean;
+    /**
+     * Full width button
+     * @attr {boolean}
+     *
+     */
+    fullWidth?: boolean;
+    /**
+     * * Changes styling to an active state with a spinning icon.
+     * * Adds accessibility treatment by:
+     *   * announcing via voiceover when the loading success/error state via a aria-live region
+     *   * setting `aria-disabled`
+     * * Disables click events / form submitting while allowing focus (for accessibility)
+     * @attr {boolean}
+     *
+     */
+    loading?: boolean;
+    /**
+     * * Variant of the loading button that:
+     *   * Removes loading spinner
+     *   * Informs the SR user that the loading status is now complete, with visually hidden text in the live area
+     * @attr {boolean}
+     *
+     */
+    loadingComplete?: boolean;
+    /**
+     * Controls whether your loading status update to voiceover users will occur
+     * immediately (used for more urgently needed updates) using `assertive` or at the next convenient
+     * pause in their navigation using `polite`.
+     */
+    ariaLive: 'polite' | 'assertive';
+    /**
+     * These two subvariants of the split button style the two seperate buttons to style as a singular button
+     */
+    splitButtonType?: 'text' | 'caret';
+    /**
+     * Button aria expanded attribute
+     */
+    buttonAriaExpanded?: boolean;
+    field: HTMLButtonElement;
+    formSubmit(): void;
+    formReset(): void;
+    private generateIconBefore;
+    private generateIconAfter;
+    render(): import("lit-html").TemplateResult<1>;
+    private _buttonClick;
+}
+export default Cre8Button;
+//# sourceMappingURL=button.d.ts.map

package/lib/components/button/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../components/button/button.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,cAAc,CAAC;AACtB,OAAO,oCAAoC,CAAC;AAGxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AAEP,qBAAa,UAAW,SAAQ,eAAe;IAC5C,MAAM,CAAC,MAAM,4BAAY;IAExB;;;;;OAKG;IAEC,IAAI,CAAC,SAAY;IAErB;;;;;;;OAOG;IAEC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAa;IAE/D;;;;;;;OAOG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IAEC,OAAO,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;MAKE;IAEE,OAAO,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IAEC,IAAI,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;;OASG;IAEC,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAErD;;;;;OAKG;IAEC,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAEnD;;OAEG;IAEC,GAAG,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;OAKG;IAEC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IAEC,GAAG,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEC,gBAAgB,CAAC,EAAE,MAAM,CAAK;IAElC;;OAEG;IAEC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE/B;;;;;OAKG;IAEC,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAa;IAElD;;;;;OAKG;IAEC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEpC;;;OAGG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IAEC,SAAS,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;;;;OAQG;IAEC,OAAO,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;;OAMG;IAEC,eAAe,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;OAIG;IAEC,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAAe;IAEnD;;OAEG;IAEC,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEvC;;OAEG;IAEC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAG7B,KAAK,EAAG,iBAAiB,CAAC;IAE9B,UAAU;IAOV,SAAS;IAOT,OAAO,CAAC,kBAAkB;IAe1B,OAAO,CAAC,iBAAiB;IAiBzB,MAAM;IA0EN,OAAO,CAAC,YAAY;CAevB;AAMD,eAAe,UAAU,CAAC"}

package/lib/components/button/button.styles.d.ts

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

package/lib/components/button/button.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../components/button/button.styles.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,MAAM,yBAi3BX,CAAC;AACF,eAAe,MAAM,CAAC"}

package/lib/components/button-group/button-group.d.ts

@@ -0,0 +1,19 @@
+import { Cre8Element } from '../cre8-element';
+/**
+ * @slot - The component content
+ */
+export declare class Cre8ButtonGroup extends Cre8Element {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Responsive Button Group (for modals)
+     */
+    orientation?: 'responsive-full-width';
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-button-group': Cre8ButtonGroup;
+    }
+}
+export default Cre8ButtonGroup;
+//# sourceMappingURL=button-group.d.ts.map

package/lib/components/button-group/button-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../components/button-group/button-group.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;GAEG;AAEH,qBAAa,eAAgB,SAAQ,WAAW;IAC5C,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAEC,WAAW,CAAC,EAAE,uBAAuB,CAAC;IAE1C,MAAM;CAWP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF;AAED,eAAe,eAAe,CAAC"}

package/lib/components/button-group/button-group.styles.d.ts

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

package/lib/components/button-group/button-group.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.styles.d.ts","sourceRoot":"","sources":["../../../components/button-group/button-group.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA+BX,CAAC;AACF,eAAe,MAAM,CAAC"}

package/lib/components/card/card.d.ts

@@ -0,0 +1,45 @@
+import { Cre8Element } from '../cre8-element';
+/** The card component acts a general container element sectioned off by slots: `header`, `body`, `footer`.
+*
+* # How to Use
+* 1. Wrap the card component tags around any html template code which has been properly imported into the file.
+* 2. Decide the layout that best fits the designs assigned to your work.
+*   Generally, we recommend visual elements appear in the `header` (optional slot),
+*   while `body` remains reserved for custom html content that gives further context and meaning to the `header`.
+* 3. The card defaults to a column and includes a `horizontal` directional variant.
+*   If you have a card where the layout of the content is more aligned horizontally,
+*   using the `horizontal` variant will ease the construction of your component
+* 4. Finally, we typically recommend reserving the footer for any interactive elements
+*   such as buttons for navigating to further information.
+*
+*
+* NOTE: Adjusting props not mentioned above may result in unpredictable states
+*
+* @slot body - The card's body content
+* @slot header - (Optional) Content in the card's header
+* @slot footer - (Optional) Content in the card's footer
+*/
+export declare class Cre8Card extends Cre8Element {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Style variants
+     * - **bare** renders a card without a border and without padding around the content
+     * - **horizontal** renders a card with header, body, footer oriented in a row rather than a column
+     * - **horizontal-bare** renders a card with header, body, footer oriented in a row rather than a column
+     *   without a border and without padding around the content
+     */
+    variant?: 'bare' | 'horizontal' | 'horizontal-bare';
+    /**
+     * Alignment variant
+     * - **center** renders a card that has center aligned content/text
+     */
+    align?: 'center';
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-card': Cre8Card;
+    }
+}
+export default Cre8Card;
+//# sourceMappingURL=card.d.ts.map

package/lib/components/card/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../components/card/card.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;;;;;;;;;;;;;;;;EAmBE;AACF,qBAAa,QAAS,SAAQ,WAAW;IACrC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;;;;OAMG;IAEC,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,iBAAiB,CAAC;IAExD;;;OAGG;IAEC,KAAK,CAAC,EAAE,QAAQ,CAAC;IAErB,MAAM;CAoBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF;AAED,eAAe,QAAQ,CAAC"}

package/lib/components/card/card.styles.d.ts

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

package/lib/components/card/card.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../components/card/card.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAiHX,CAAC;AACF,eAAe,MAAM,CAAC"}

package/lib/components/chart/chart.d.ts

@@ -0,0 +1,18 @@
+import { Cre8Element } from '../cre8-element';
+import { ChartType } from 'chart.js';
+export declare class Cre8Chart extends Cre8Element {
+    static styles: import("lit").CSSResult[];
+    chartData: any;
+    chartType: ChartType;
+    chartOptions: {};
+    isLoading: boolean;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-chart': Cre8Chart;
+    }
+}
+export default Cre8Chart;
+//# sourceMappingURL=chart.d.ts.map

package/lib/components/chart/chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../../components/chart/chart.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAQ,SAAS,EAAC,MAAO,UAAU,CAAC;AAI3C,qBAAa,SAAU,SAAQ,WAAW;IACtC,MAAM,CAAC,MAAM,4BAAY;IAEb,SAAS,EAAE,GAAG,CAAC;IACC,SAAS,EAAE,SAAS,CAAS;IAC7B,YAAY,KAAM;IACjB,SAAS,EAAE,OAAO,CAAS;IAE1D,YAAY;IAWZ,MAAM;CAOP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF;AAED,eAAe,SAAS,CAAC"}

package/lib/components/chart/chart.styles.d.ts

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

package/lib/components/chart/chart.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.styles.d.ts","sourceRoot":"","sources":["../../../components/chart/chart.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAQ,CAAC;AACrB,eAAe,MAAM,CAAC"}

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

@@ -0,0 +1,54 @@
+import { Cre8Element } from '../cre8-element';
+import '../field-note/field-note';
+/**
+ * Checkbox Field is the parent container for `checkbox-field-item`.
+ * It is required to allow for grouping numerous checkboxes that need additional context (in the form of `<legend>`).
+ * It also provides accessibility roles, aria attributes and field note messaging on the group.
+ *
+ * See `checkbox-field-item` for more guidance on its usage.
+ *
+ * @slot - The component content, which should be a set of `checkbox-field-item`s
+ */
+export declare class Cre8CheckboxField extends Cre8Element {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Checkbox container legend label
+     */
+    label?: string;
+    /**
+     * Checkbox container fieldnote
+     */
+    fieldNote?: string;
+    /**
+     * Checkbox container fieldnote aria describe by
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Checkbox container fieldnote icon name
+     */
+    fieldNoteIconName?: string;
+    /**
+     * Checkbox container fieldnote knockout
+     * @attr {boolean}
+     */
+    fieldNoteKnockout?: boolean;
+    /**
+     * Checkbox container fieldnote isSuccess
+     * @attr {boolean}
+     */
+    fieldNoteIsSuccess?: boolean;
+    /**
+     * Checkbox container fieldnote isError
+     * @attr {boolean}
+     */
+    fieldNoteIsError?: boolean;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-checkbox-field': Cre8CheckboxField;
+    }
+}
+export default Cre8CheckboxField;
+//# sourceMappingURL=checkbox-field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-field.d.ts","sourceRoot":"","sources":["../../../components/checkbox-field/checkbox-field.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,0BAA0B,CAAC;AAGlC;;;;;;;;GAQG;AACH,qBAAa,iBAAkB,SAAQ,WAAW;IAC9C,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAEC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IAEC,eAAe,CAAC,EAAE,MAAM,CAAC;IAE7B;;OAEG;IAEC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE/B;;;OAGG;IAEC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAEhC;;;OAGG;IAEC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;OAGG;IAEC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE/B,iBAAiB;IAOjB,MAAM;CAwBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF;AAED,eAAe,iBAAiB,CAAC"}

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

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

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

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

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

@@ -0,0 +1,177 @@
+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;
+    /**
+     * Checkbox name
+     * @attr {string}
+     */
+    name?: 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;IAE3B;;OAEG;IAEC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEC,OAAO,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IAEC,SAAS,EAAE,MAAM,CAAW;IAEhC;;OAEG;IAEC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IAEC,SAAS,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IAEC,WAAW,EAAE,MAAM,CAAa;IAEpC;;OAEG;IAEC,WAAW,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IAEC,OAAO,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IAEC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IAEC,eAAe,CAAC,EAAE,MAAM,CAAC;IAE7B;;OAEG;IAEC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IAEvC;;;OAGG;IAEC,IAAI,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IAEC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE/B;;OAEG;IAEC,KAAK,EAAG,gBAAgB,CAAC;IAE7B,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;CAsCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,0BAA0B,EAAE,qBAAqB,CAAC;KACnD;CACF;AAED,eAAe,qBAAqB,CAAC"}

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,yBAuKV,CAAC;AACH,eAAe,MAAM,CAAC"}