@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/components/button/button.js.map

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