@patternfly/elements
Version:
PatternFly Elements
1 lines • 20.8 kB
Source Map (JSON)
{"version":3,"file":"pf-button.js","sourceRoot":"","sources":["pf-button.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\nimport '@patternfly/elements/pf-spinner/pf-spinner.js';\n\nimport tokensStyles from './pf-button-tokens.css';\nimport iconStyles from './pf-button-icon.css';\n\nimport styles from './pf-button.css';\n\nexport type ButtonVariant = (\n | 'primary'\n | 'secondary'\n | 'tertiary'\n | 'control'\n | 'link'\n);\n\n/**\n * A **button** is a box area or text that communicates and triggers user actions when\n * clicked or selected. Buttons can be used to communicate and immediately trigger\n * actions a user can take in an application, like submitting a form, canceling a\n * process, or creating a new object. Buttons can also be used to take a user to a\n * new location, like another page inside of a web application, or an external site\n * such as help or documentation..\n * @summary Allows users to perform an action when triggered\n * @cssprop {<length>} [--pf-c-button--FontSize=1rem]\n * @cssprop [--pf-c-button--FontWeight=400]\n * @cssprop {<number>} [--pf-c-button--LineHeight=1.5]\n * @cssprop {<length>} [--pf-c-button--PaddingTop=0.375rem]\n * @cssprop {<length>} [--pf-c-button--PaddingLeft=1rem]\n * @cssprop {<length>} [--pf-c-button--PaddingBottom=0.375rem]\n * @cssprop {<length>} [--pf-c-button--PaddingRight=1rem]\n * @cssprop {<length>|<percentage>} [--pf-c-button--BorderRadius=3px]\n * @cssprop {<color>} [--pf-c-button--after--BorderColor=transparent]\n * @cssprop {<length>} [--pf-c-button--after--BorderRadius=3px]\n * @cssprop {<length>} [--pf-c-button--after--BorderWidth=1px]\n * @cssprop {<length>} [--pf-c-button--active--after--BorderWidth=2px]\n * @cssprop {<length>} [--pf-c-button--hover--after--BorderWidth=2px]\n * @cssprop {<length>} [--pf-c-button--focus--after--BorderWidth=2px]\n * @cssprop {<color>} [--pf-c-button--m-primary--Color=#fff]\n * @cssprop {<color>} [--pf-c-button--m-primary--BackgroundColor=#06c]\n * @cssprop {<color>} [--pf-c-button--m-primary--active--Color=#fff]\n * @cssprop {<color>} [--pf-c-button--m-primary--active--BackgroundColor=#004080]\n * @cssprop {<color>} [--pf-c-button--m-primary--focus--Color=#fff]\n * @cssprop {<color>} [--pf-c-button--m-primary--focus--BackgroundColor=#004080]\n * @cssprop {<color>} [--pf-c-button--m-primary--hover--Color=#fff]\n * @cssprop {<color>} [--pf-c-button--m-primary--hover--BackgroundColor=#004080]\n * @cssprop {<color>} [--pf-c-button--m-secondary--Color=#06c]\n * @cssprop {<color>} [--pf-c-button--m-secondary--BackgroundColor=transparent]\n * @cssprop {<color>} [--pf-c-button--m-secondary--active--Color=#06c]\n * @cssprop {<color>} [--pf-c-button--m-secondary--active--BackgroundColor=transparent]\n * @cssprop {<color>} [--pf-c-button--m-secondary--active--BorderColor=#06c]\n * @cssprop {<color>} [--pf-c-button--m-secondary--focus--Color=#06c]\n * @cssprop {<color>} [--pf-c-button--m-secondary--focus--BackgroundColor=transparent]\n * @cssprop {<color>} [--pf-c-button--m-secondary--focus--BorderColor=#06c]\n * @cssprop {<color>} [--pf-c-button--m-secondary--hover--Color=#06c]\n * @cssprop {<color>} [--pf-c-button--m-secondary--hover--BackgroundColor=transparent]\n * @cssprop {<color>} [--pf-c-button--m-secondary--hover--BorderColor=#06c]\n * @cssprop {<color>} [--pf-c-button--m-tertiary--Color=#151515]\n * @cssprop {<color>} [--pf-c-button--m-tertiary--BackgroundColor=transparent]\n * @cssprop {<color>} [--pf-c-button--m-tertiary--active--Color=#151515]\n * @cssprop {<color>} [--pf-c-button--m-tertiary--active--BackgroundColor=transparent]\n * @cssprop {<color>} [--pf-c-button--m-tertiary--active--BorderColor=#151515]\n * @cssprop {<color>} [--pf-c-button--m-tertiary--focus--Color=#151515]\n * @cssprop {<color>} [--pf-c-button--m-tertiary--focus--BackgroundColor=transparent]\n * @cssprop {<color>} [--pf-c-button--m-tertiary--focus--BorderColor=#151515]\n * @cssprop {<color>} [--pf-c-button--m-tertiary--hover--Color=#151515]\n * @cssprop {<color>} [--pf-c-button--m-tertiary--hover--BackgroundColor=transparent]\n * @cssprop {<color>} [--pf-c-button--m-tertiary--hover--BorderColor=#151515]\n * @cssprop {<color>} [--pf-c-button--m-danger--Color=#fff]\n * @cssprop {<color>} [--pf-c-button--m-danger--BackgroundColor=#c9190b]\n * @cssprop {<color>} [--pf-c-button--m-danger--active--Color=#fff]\n * @cssprop {<color>} [--pf-c-button--m-danger--active--BackgroundColor=#a30000]\n * @cssprop {<color>} [--pf-c-button--m-danger--focus--Color=#fff]\n * @cssprop {<color>} [--pf-c-button--m-danger--focus--BackgroundColor=#a30000]\n * @cssprop {<color>} [--pf-c-button--m-danger--hover--Color=#fff]\n * @cssprop {<color>} [--pf-c-button--m-danger--hover--BackgroundColor=#a30000]\n * @cssprop {<color>} [--pf-c-button--m-secondary--m-danger--Color=#c9190b]\n * @cssprop {<color>} [--pf-c-button--m-secondary--m-danger--BackgroundColor=transparent]\n * @cssprop {<color>} [--pf-c-button--m-secondary--m-danger--BorderColor=#c9190b]\n * @cssprop {<color>} [--pf-c-button--m-secondary--m-danger--active--Color=#a30000]\n * @cssprop {<color>} [--pf-c-button--m-secondary--m-danger--active--BackgroundColor=transparent]\n * @cssprop {<color>} [--pf-c-button--m-secondary--m-danger--active--BorderColor=#c9190b]\n * @cssprop {<color>} [--pf-c-button--m-secondary--m-danger--focus--Color=#a30000]\n * @cssprop {<color>} [--pf-c-button--m-secondary--m-danger--focus--BackgroundColor=transparent]\n * @cssprop {<color>} [--pf-c-button--m-secondary--m-danger--focus--BorderColor=#c9190b]\n * @cssprop {<color>} [--pf-c-button--m-secondary--m-danger--hover--Color=#a30000]\n * @cssprop {<color>} [--pf-c-button--m-secondary--m-danger--hover--BackgroundColor=transparent]\n * @cssprop {<color>} [--pf-c-button--m-secondary--m-danger--hover--BorderColor=#c9190b]\n * @cssprop {<color>} [--pf-c-button--m-control--disabled--BackgroundColor=#f0f0f0]\n * @cssprop {<length>} [--pf-c-button--m-control--BorderRadius=0]\n * @cssprop {<length>} [--pf-c-button--m-control--after--BorderWidth=1px]\n * @cssprop {<color>} [--pf-c-button--m-control--after--BorderTopColor=#f0f0f0]\n * @cssprop {<color>} [--pf-c-button--m-control--after--BorderRightColor=#f0f0f0]\n * @cssprop {<color>} [--pf-c-button--m-control--after--BorderBottomColor=#8a8d90]\n * @cssprop {<color>} [--pf-c-button--m-control--after--BorderLeftColor=#f0f0f0]\n * @cssprop {<color>} [--pf-c-button--m-control--Color=#151515]\n * @cssprop {<color>} [--pf-c-button--m-control--BackgroundColor=#fff]\n * @cssprop {<color>} [--pf-c-button--m-control--active--Color=#151515]\n * @cssprop {<color>} [--pf-c-button--m-control--active--BackgroundColor=#fff]\n * @cssprop {<color>} [--pf-c-button--m-control--active--BorderBottomColor=#06c]\n * @cssprop {<length>} [--pf-c-button--m-control--active--after--BorderBottomWidth=2px]\n * @cssprop {<color>} [--pf-c-button--m-control--focus--Color=#151515]\n * @cssprop {<color>} [--pf-c-button--m-control--focus--BackgroundColor=#fff]\n * @cssprop {<color>} [--pf-c-button--m-control--focus--BorderBottomColor=#06c]\n * @cssprop {<length>} [--pf-c-button--m-control--focus--after--BorderBottomWidth=2px]\n * @cssprop {<color>} [--pf-c-button--m-control--hover--Color=#151515]\n * @cssprop {<color>} [--pf-c-button--m-control--hover--BackgroundColor=#fff]\n * @cssprop {<color>} [--pf-c-button--m-control--hover--BorderBottomColor=#06c]\n * @cssprop {<length>} [--pf-c-button--m-control--hover--after--BorderBottomWidth=2px]\n * @cssprop {<color>} [--pf-c-button--disabled--Color=#6a6e73]\n * @cssprop {<color>} [--pf-c-button--disabled--BackgroundColor=#d2d2d2]\n * @cssprop {<color>} [--pf-c-button--disabled--after--BorderColor=transparent]\n * @cssprop {<color>} [--pf-c-button--m-warning--Color=#151515]\n * @cssprop {<color>} [--pf-c-button--m-warning--BackgroundColor=#f0ab00]\n * @cssprop {<color>} [--pf-c-button--m-warning--active--Color=#151515]\n * @cssprop {<color>} [--pf-c-button--m-warning--active--BackgroundColor=#c58c00]\n * @cssprop {<color>} [--pf-c-button--m-warning--focus--Color=#151515]\n * @cssprop {<color>} [--pf-c-button--m-warning--focus--BackgroundColor=#c58c00]\n * @cssprop {<color>} [--pf-c-button--m-warning--hover--Color=#151515]\n * @cssprop {<color>} [--pf-c-button--m-warning--hover--BackgroundColor=#c58c00]\n * @cssprop {<color>} [--pf-c-button--m-plain--BackgroundColor=transparent]\n * @cssprop {<color>} [--pf-c-button--m-plain--Color=#6a6e73]\n * @cssprop {<color>} [--pf-c-button--m-plain--hover--BackgroundColor=transparent]\n * @cssprop {<color>} [--pf-c-button--m-plain--hover--Color=#151515]\n * @cssprop {<color>} [--pf-c-button--m-plain--focus--BackgroundColor=transparent]\n * @cssprop {<color>} [--pf-c-button--m-plain--focus--Color=#151515]\n * @cssprop {<color>} [--pf-c-button--m-plain--active--BackgroundColor=transparent]\n * @cssprop {<color>} [--pf-c-button--m-plain--active--Color=#151515]\n * @cssprop {<color>} [--pf-c-button--m-plain--disabled--Color=#d2d2d2]\n * @cssprop {<color>} [--pf-c-button--m-plain--disabled--BackgroundColor=transparent]\n * @attr {string} [loading-label='loading'] - ARIA label for the loading indicator\n */\n@customElement('pf-button')\nexport class PfButton extends LitElement {\n static readonly formAssociated = true;\n\n static readonly styles: CSSStyleSheet[] = [\n tokensStyles,\n iconStyles,\n styles,\n ];\n\n @property({ reflect: true }) type?: 'button' | 'submit' | 'reset';\n\n /** Accessible name for the button, use when the button does not have slotted text */\n @property() label?: string;\n\n /** Form value for the button */\n @property() value?: string;\n\n /** Form element name for the button */\n @property() name?: string;\n\n /** Disables the button */\n @property({ reflect: true, type: Boolean }) disabled = false;\n\n /** Represents the state of a stateful button */\n @property({ type: Boolean, reflect: true }) loading = false;\n\n /** Changes the size of the button. */\n @property({ reflect: true }) size?: 'small' | 'large';\n\n /** Not as urgent as danger */\n @property({ type: Boolean, reflect: true }) warning = false;\n\n /**\n * Use danger buttons for actions a user can take that are potentially\n * destructive or difficult/impossible to undo, like deleting or removing\n * user data.\n */\n @property({ type: Boolean, reflect: true }) danger = false;\n\n /** Applies plain styles */\n @property({ type: Boolean, reflect: true }) plain = false;\n\n /**\n * Changes the style of the button.\n * - Primary: Used for the most important call to action on a page. Try to\n * limit primary buttons to one per page.\n * - Secondary: Use secondary buttons for general actions on a page, that\n * don’t require as much emphasis as primary button actions. For example,\n * you can use secondary buttons where there are multiple actions, like in\n * toolbars or data lists.\n * - Tertiary: Tertiary buttons are flexible and can be used as needed.\n */\n @property({ reflect: true }) variant: ButtonVariant = 'primary';\n\n @property({ reflect: true, type: Boolean }) inline = false;\n\n @property({ reflect: true, type: Boolean }) block = false;\n\n /** Shorthand for the `icon` slot, the value is icon name */\n @property() icon?: string;\n\n /** Icon set for the `icon` property */\n @property({ attribute: 'icon-set' }) iconSet?: string;\n\n /** Store the URL Link */\n @property({ reflect: true }) href?: string;\n\n /** Redirecting the URL Link to new Tab */\n @property({ reflect: true }) target?: string;\n\n #internals = InternalsController.of(this, { role: this.variant === 'link' ? 'none' : 'button' });\n\n #slots = new SlotController(this, 'icon', null);\n\n get #disabled() {\n return this.disabled || this.#internals.formDisabled;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('click', this.#onClick);\n this.addEventListener('keydown', this.#onKeydown);\n }\n\n protected override willUpdate(): void {\n this.#internals.ariaLabel = this.label || null;\n this.#internals.ariaDisabled = String(!!this.disabled);\n const isLink = this.variant === 'link' && this.href;\n if (isLink) {\n this.removeAttribute('tabindex');\n this.#internals.role = 'none';\n } else {\n this.tabIndex = 0;\n this.#internals.role = 'button';\n }\n }\n\n async formDisabledCallback(): Promise<void> {\n await this.updateComplete;\n this.requestUpdate();\n }\n\n override render(): TemplateResult<1> {\n const hasIcon = !!this.icon || !!this.loading || this.#slots.hasSlotted('icon');\n const { warning, variant, danger, loading, plain, inline, block, size, href, target } = this;\n\n const disabled = this.#disabled;\n\n const content = html`\n <slot id=\"icon\"\n part=\"icon\"\n name=\"icon\"\n ?hidden=\"${!hasIcon}\">\n <pf-icon role=\"presentation\"\n icon=\"${ifDefined(this.icon)}\"\n set=\"${ifDefined(this.iconSet)}\"\n ?hidden=\"${!this.icon || this.loading}\"></pf-icon>\n <pf-spinner size=\"md\"\n ?hidden=\"${!this.loading}\"\n aria-label=\"${this.getAttribute('loading-label') ?? 'loading'}\"></pf-spinner>\n </slot>\n <slot id=\"text\"></slot>\n `;\n\n if (variant === 'link' && href) {\n return html`\n <a id=\"button\"\n href=\"${href}\"\n target=\"${ifDefined(target)}\"\n class=\"${classMap({\n [variant]: true,\n [size ?? '']: !!size,\n anchor: true,\n inline,\n block,\n danger,\n disabled,\n hasIcon,\n loading,\n plain,\n warning,\n })}\">${content}</a>`;\n } else {\n return html`\n <div id=\"button\"\n class=\"${classMap({\n [variant]: true,\n [size ?? '']: !!size,\n inline,\n block,\n danger,\n disabled,\n hasIcon,\n loading,\n plain,\n warning,\n })}\">${content}</div>`;\n }\n }\n\n #onClick() {\n if (!this.#disabled) {\n switch (this.type) {\n case 'reset':\n return this.#internals.reset();\n default:\n return this.#internals.submit();\n }\n }\n }\n\n #onKeydown(event: KeyboardEvent) {\n switch (event.key) {\n case ' ':\n event.preventDefault();\n event.stopPropagation();\n if (this.dispatchEvent(new MouseEvent('click', {\n bubbles: true,\n cancelable: true,\n view: window,\n }))) {\n this.#onClick();\n }\n break;\n case 'Enter':\n if (this.dispatchEvent(new MouseEvent('click', {\n bubbles: true,\n cancelable: true,\n view: window,\n }))) {\n this.#onClick();\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-button': PfButton;\n }\n}\n"]}