@patternfly/elements
Version:
PatternFly Elements
229 lines • 48 kB
JavaScript
var _PfButton_instances, _PfButton_internals, _PfButton_slots, _PfButton_disabled_get, _PfButton_onClick, _PfButton_onKeydown;
import { __classPrivateFieldGet, __decorate } from "tslib";
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators/custom-element.js';
import { property } from 'lit/decorators/property.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { classMap } from 'lit/directives/class-map.js';
import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
import '@patternfly/elements/pf-icon/pf-icon.js';
import '@patternfly/elements/pf-spinner/pf-spinner.js';
import { css } from "lit";
const tokensStyles = css `:host {\n\t--pf-c-button--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem);\n\t--pf-c-button--PaddingRight: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-button--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem);\n\t--pf-c-button--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-button--LineHeight: var(--pf-global--LineHeight--md, 1.5);\n\t--pf-c-button--FontWeight: var(--pf-global--FontWeight--normal, 400);\n\t--pf-c-button--FontSize: var(--pf-global--FontSize--md, 1rem);\n\t--pf-c-button--BackgroundColor: transparent;\n\t--pf-c-button--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);\n\t--pf-c-button--after--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);\n\t--pf-c-button--after--BorderColor: transparent;\n\t--pf-c-button--after--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);\n\t--pf-c-button--hover--after--BorderWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-button--focus--after--BorderWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-button--active--after--BorderWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-button--disabled--Color: var(--pf-global--disabled-color--100, #6a6e73);\n\t--pf-c-button--disabled--BackgroundColor: var(--pf-global--disabled-color--200, #d2d2d2);\n\t--pf-c-button--disabled--after--BorderColor: transparent;\n\t--pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-button--m-primary--Color: var(--pf-global--Color--light-100, #fff);\n\t--pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200, #004080);\n\t--pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100, #fff);\n\t--pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200, #004080);\n\t--pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100, #fff);\n\t--pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200, #004080);\n\t--pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100, #fff);\n\t--pf-c-button--m-secondary--BackgroundColor: transparent;\n\t--pf-c-button--m-secondary--after--BorderColor: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-button--m-secondary--hover--BackgroundColor: transparent;\n\t--pf-c-button--m-secondary--hover--after--BorderColor: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-button--m-secondary--focus--BackgroundColor: transparent;\n\t--pf-c-button--m-secondary--focus--after--BorderColor: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-button--m-secondary--active--BackgroundColor: transparent;\n\t--pf-c-button--m-secondary--active--after--BorderColor: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-button--m-secondary--m-danger--BackgroundColor: transparent;\n\t--pf-c-button--m-secondary--m-danger--Color: var(--pf-global--danger-color--100, #c9190b);\n\t--pf-c-button--m-secondary--m-danger--after--BorderColor: var(--pf-global--danger-color--100, #c9190b);\n\t--pf-c-button--m-secondary--m-danger--hover--BackgroundColor: transparent;\n\t--pf-c-button--m-secondary--m-danger--hover--Color: var(--pf-global--danger-color--200, #a30000);\n\t--pf-c-button--m-secondary--m-danger--hover--after--BorderColor: var(--pf-global--danger-color--100, #c9190b);\n\t--pf-c-button--m-secondary--m-danger--focus--BackgroundColor: transparent;\n\t--pf-c-button--m-secondary--m-danger--focus--Color: var(--pf-global--danger-color--200, #a30000);\n\t--pf-c-button--m-secondary--m-danger--focus--after--BorderColor: var(--pf-global--danger-color--100, #c9190b);\n\t--pf-c-button--m-secondary--m-danger--active--BackgroundColor: transparent;\n\t--pf-c-button--m-secondary--m-danger--active--Color: var(--pf-global--danger-color--200, #a30000);\n\t--pf-c-button--m-secondary--m-danger--active--after--BorderColor: var(--pf-global--danger-color--100, #c9190b);\n\t--pf-c-button--m-tertiary--BackgroundColor: transparent;\n\t--pf-c-button--m-tertiary--after--BorderColor: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-tertiary--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-tertiary--hover--BackgroundColor: transparent;\n\t--pf-c-button--m-tertiary--hover--after--BorderColor: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-tertiary--hover--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-tertiary--focus--BackgroundColor: transparent;\n\t--pf-c-button--m-tertiary--focus--after--BorderColor: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-tertiary--focus--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-tertiary--active--BackgroundColor: transparent;\n\t--pf-c-button--m-tertiary--active--after--BorderColor: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-tertiary--active--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-warning--BackgroundColor: var(--pf-global--warning-color--100, #f0ab00);\n\t--pf-c-button--m-warning--Color: var(--pf-global--Color--dark-100, #151515);\n\t--pf-c-button--m-warning--hover--BackgroundColor: var(--pf-global--palette--gold-500, #c58c00);\n\t--pf-c-button--m-warning--hover--Color: var(--pf-global--Color--dark-100, #151515);\n\t--pf-c-button--m-warning--focus--BackgroundColor: var(--pf-global--palette--gold-500, #c58c00);\n\t--pf-c-button--m-warning--focus--Color: var(--pf-global--Color--dark-100, #151515);\n\t--pf-c-button--m-warning--active--BackgroundColor: var(--pf-global--palette--gold-500, #c58c00);\n\t--pf-c-button--m-warning--active--Color: var(--pf-global--Color--dark-100, #151515);\n\t--pf-c-button--m-danger--BackgroundColor: var(--pf-global--danger-color--100, #c9190b);\n\t--pf-c-button--m-danger--Color: var(--pf-global--Color--light-100, #fff);\n\t--pf-c-button--m-danger--hover--BackgroundColor: var(--pf-global--danger-color--200, #a30000);\n\t--pf-c-button--m-danger--hover--Color: var(--pf-global--Color--light-100, #fff);\n\t--pf-c-button--m-danger--focus--BackgroundColor: var(--pf-global--danger-color--200, #a30000);\n\t--pf-c-button--m-danger--focus--Color: var(--pf-global--Color--light-100, #fff);\n\t--pf-c-button--m-danger--active--BackgroundColor: var(--pf-global--danger-color--200, #a30000);\n\t--pf-c-button--m-danger--active--Color: var(--pf-global--Color--light-100, #fff);\n\t--pf-c-button--m-link--BackgroundColor: transparent;\n\t--pf-c-button--m-link--Color: var(--pf-global--link--Color, #06c);\n\t--pf-c-button--m-link--hover--BackgroundColor: transparent;\n\t--pf-c-button--m-link--hover--Color: var(--pf-global--link--Color--hover, #004080);\n\t--pf-c-button--m-link--focus--BackgroundColor: transparent;\n\t--pf-c-button--m-link--focus--Color: var(--pf-global--link--Color--hover, #004080);\n\t--pf-c-button--m-link--active--BackgroundColor: transparent;\n\t--pf-c-button--m-link--active--Color: var(--pf-global--link--Color--hover, #004080);\n\t--pf-c-button--m-link--disabled--BackgroundColor: transparent;\n\t--pf-c-button--m-link--m-inline--FontSize: inherit;\n\t--pf-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover, underline);\n\t--pf-c-button--m-link--m-inline--hover--Color: var(--pf-global--link--Color--hover, #004080);\n\t--pf-c-button--m-link--m-inline--PaddingTop: 0;\n\t--pf-c-button--m-link--m-inline--PaddingRight: 0;\n\t--pf-c-button--m-link--m-inline--PaddingBottom: 0;\n\t--pf-c-button--m-link--m-inline--PaddingLeft: 0;\n\t--pf-c-button--m-link--m-inline__progress--Left: var(--pf-global--spacer--xs, 0.25rem);\n\t--pf-c-button--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--pf-c-button--m-link--m-inline__progress--Left) + 1rem + var(--pf-global--spacer--sm, 0.5rem));\n\t--pf-c-button--m-link--m-danger--BackgroundColor: transparent;\n\t--pf-c-button--m-link--m-danger--Color: var(--pf-global--danger-color--100, #c9190b);\n\t--pf-c-button--m-link--m-danger--hover--BackgroundColor: transparent;\n\t--pf-c-button--m-link--m-danger--hover--Color: var(--pf-global--danger-color--200, #a30000);\n\t--pf-c-button--m-link--m-danger--focus--BackgroundColor: transparent;\n\t--pf-c-button--m-link--m-danger--focus--Color: var(--pf-global--danger-color--200, #a30000);\n\t--pf-c-button--m-link--m-danger--active--BackgroundColor: transparent;\n\t--pf-c-button--m-link--m-danger--active--Color: var(--pf-global--danger-color--200, #a30000);\n\t--pf-c-button--m-plain--BackgroundColor: transparent;\n\t--pf-c-button--m-plain--Color: var(--pf-global--Color--200, #6a6e73);\n\t--pf-c-button--m-plain--hover--BackgroundColor: transparent;\n\t--pf-c-button--m-plain--hover--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-plain--focus--BackgroundColor: transparent;\n\t--pf-c-button--m-plain--focus--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-plain--active--BackgroundColor: transparent;\n\t--pf-c-button--m-plain--active--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-plain--disabled--Color: var(--pf-global--disabled-color--200, #d2d2d2);\n\t--pf-c-button--m-plain--disabled--BackgroundColor: transparent;\n\t--pf-c-button--m-control--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n\t--pf-c-button--m-control--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-control--BorderRadius: 0;\n\t--pf-c-button--m-control--after--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);\n\t--pf-c-button--m-control--after--BorderTopColor: var(--pf-global--BorderColor--300, #f0f0f0);\n\t--pf-c-button--m-control--after--BorderRightColor: var(--pf-global--BorderColor--300, #f0f0f0);\n\t--pf-c-button--m-control--after--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);\n\t--pf-c-button--m-control--after--BorderLeftColor: var(--pf-global--BorderColor--300, #f0f0f0);\n\t--pf-c-button--m-control--disabled--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0);\n\t--pf-c-button--m-control--hover--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n\t--pf-c-button--m-control--hover--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-control--hover--after--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-button--m-control--hover--after--BorderBottomColor: var(--pf-global--active-color--100, #06c);\n\t--pf-c-button--m-control--active--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n\t--pf-c-button--m-control--active--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-control--active--after--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-button--m-control--active--after--BorderBottomColor: var(--pf-global--active-color--100, #06c);\n\t--pf-c-button--m-control--focus--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n\t--pf-c-button--m-control--focus--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-control--focus--after--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-button--m-control--focus--after--BorderBottomColor: var(--pf-global--active-color--100, #06c);\n\t--pf-c-button--m-control--m-expanded--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n\t--pf-c-button--m-control--m-expanded--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-button--m-control--m-expanded--after--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-global--active-color--100, #06c);\n\t--pf-c-button--m-small--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n\t--pf-c-button--m-display-lg--PaddingTop: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-button--m-display-lg--PaddingRight: var(--pf-global--spacer--xl, 2rem);\n\t--pf-c-button--m-display-lg--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-button--m-display-lg--PaddingLeft: var(--pf-global--spacer--xl, 2rem);\n\t--pf-c-button--m-display-lg--FontWeight: var(--pf-global--FontWeight--bold, 700);\n\t--pf-c-button--m-link--m-display-lg--FontSize: var(--pf-global--FontSize--lg, 1.125rem);\n\t--pf-c-button__icon--m-start--MarginRight: var(--pf-global--spacer--xs, 0.25rem);\n\t--pf-c-button__icon--m-end--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);\n\t--pf-c-button__progress--width: calc(var(--pf-global--icon--FontSize--md, 1.125rem) + var(--pf-global--spacer--sm, 0.5rem));\n\t--pf-c-button__progress--Opacity: 0;\n\t--pf-c-button__progress--TranslateY: -50%;\n\t--pf-c-button__progress--TranslateX: 0;\n\t--pf-c-button__progress--Top: 50%;\n\t--pf-c-button__progress--Left: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-button--m-progress--TransitionProperty: padding;\n\t--pf-c-button--m-progress--TransitionDuration: var(--pf-global--TransitionDuration, 250ms);\n\t--pf-c-button--m-progress--PaddingRight: calc(var(--pf-global--spacer--md, 1rem) + var(--pf-c-button__progress--width) / 2);\n\t--pf-c-button--m-progress--PaddingLeft: calc(var(--pf-global--spacer--md, 1rem) + var(--pf-c-button__progress--width) / 2);\n\t--pf-c-button--m-in-progress--PaddingRight: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-button--m-in-progress--PaddingLeft: calc(var(--pf-global--spacer--md, 1rem) + var(--pf-c-button__progress--width));\n\t--pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-button--m-in-progress--m-plain__progress--Left: 50%;\n\t--pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;\n\t--pf-c-button__count--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-button--disabled__c-badge--Color: var(--pf-global--Color--dark-100, #151515);\n\t--pf-c-button--disabled__c-badge--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);\n\t--pf-c-button--m-primary__c-badge--BorderColor: var(--pf-global--BorderColor--300, #f0f0f0);\n\t--pf-c-button--m-primary__c-badge--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);\n\n --_button-color: var(--pf-c-button--m-primary--Color);\n --_button-background-color: var(--pf-c-button--m-primary--BackgroundColor);\n}\n`;
const iconStyles = css `/******************************\n * *\n * ICON *\n * *\n ******************************/\n\n.hasIcon {\n gap: calc(2 * var(--pf-c-button__icon--m-start--MarginLeft,\n var(--pf-global--spacer--xs, 0.25rem)));\n}\n\n`;
const styles = css `:host {\n\tfont-size: var(--pf-c-button--FontSize);\n\tfont-weight: var(--pf-c-button--FontWeight);\n\tline-height: var(--pf-c-button--LineHeight);\n\ttext-align: center;\n\twhite-space: nowrap;\n font-size: var(--pf-c-button--FontSize,\n var(--pf-global--FontSize--md, 1rem));\n font-weight: var(--pf-c-button--FontWeight,\n var(--pf-global--FontWeight--normal, 400));\n line-height: var(--pf-c-button--LineHeight,\n var(--pf-global--LineHeight--md, 1.5));\n display: inline-block;\n height: max-content;\n cursor: pointer;\n position: relative;\n font-family: inherit;\n border-width: 0;\n border-style: solid;\n border-radius: var(--pf-c-button--BorderRadius,\n var(--pf-global--BorderRadius--sm, 3px));\n}\n\n:host([hidden]),\n[hidden] {\n display: none !important;\n}\n\n:host([inline]) {\n display: inline;\n --pf-c-button--PaddingTop: 0;\n --pf-c-button--PaddingLeft: 0;\n --pf-c-button--PaddingBottom: 0;\n --pf-c-button--PaddingRight: 0;\n}\n\npf-icon,\n::slotted(pf-icon) {\n color: currentcolor;\n padding-inline-start: var(--_button-icon-padding-inline-start);\n padding-inline-end: var(--_button-icon-padding-inline-end);\n vertical-align: var(--_button-icon-vertical-align);\n}\n\n#icon {\n margin-inline-end: var(--pf-c-button__icon--m-start--MarginRight,\n var(--pf-global--spacer--xs, 0.25rem));\n}\n\n#button {\n display: inline-block;\n color: var(--_button-color);\n padding:\n var(--pf-c-button--PaddingTop,\n var(--pf-global--spacer--form-element, 0.375rem))\n var(--pf-c-button--PaddingRight,\n var(--pf-global--spacer--md, 1rem))\n var(--pf-c-button--PaddingBottom,\n var(--pf-global--spacer--form-element, 0.375rem))\n var(--pf-c-button--PaddingLeft,\n var(--pf-global--spacer--md, 1rem));\n &::before,\n &::after {\n position: absolute;\n inset: 0;\n content: "";\n }\n &::before {\n background-color: var(--_button-background-color);\n border-radius: var(--pf-c-button--BorderRadius,\n var(--pf-global--BorderRadius--sm, 3px));\n }\n &::after {\n pointer-events: none;\n border-style: solid;\n border-width: var(--pf-c-button--after--BorderWidth);\n border-color: var(--pf-c-button--after--BorderColor);\n border-radius: var(--pf-c-button--after--BorderRadius);\n }\n &.anchor {\n text-decoration: none;\n &::after {\n pointer-events: all;\n }\n }\n}\n\n#text {\n display: inline;\n position: relative;\n}\n\n:host(:focus) {\n --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--focus--Color,\n var(--pf-global--Color--light-100, #fff));\n --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--focus--BackgroundColor,\n var(--pf-global--primary-color--200, #004080));\n --pf-c-button--after--BorderWidth: var(--pf-c-button--focus--after--BorderWidth,\n var(--pf-global--BorderWidth--md, 2px));\n /* DANGER */\n --pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--focus--Color,\n var(--pf-global--Color--light-100, #fff));\n --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--focus--BackgroundColor,\n var(--pf-global--danger-color--200, #a30000));\n /* LINK */\n --pf-c-button--m-link--Color: var(--pf-c-button--m-link--focus--Color,\n var(--pf-global--link--Color--hover, #004080));\n --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--hover--BackgroundColor, transparent);\n /* PLAIN */\n --pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--focus--Color,\n var(--pf-global--Color--100, #151515));\n --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--focus--BackgroundColor,\n transparent);\n}\n\n:host(:hover) {\n --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color,\n var(--pf-global--Color--light-100, #fff));\n --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor,\n var(--pf-global--primary-color--200, #004080));\n --pf-c-button--after--BorderWidth: var(--pf-c-button--hover--after--BorderWidth,\n var(--pf-global--BorderWidth--md, 2px));\n /* DANGER */\n --pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--hover--Color,\n var(--pf-global--Color--light-100, #fff));\n --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--hover--BackgroundColor,\n var(--pf-global--danger-color--200, #a30000));\n /* LINK */\n --pf-c-button--m-link--Color: var(--pf-c-button--m-link--hover--Color,\n var(--pf-global--link--Color--hover, #004080));\n --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--hover--BackgroundColor, transparent);\n /* PLAIN */\n --pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--hover--Color,\n var(--pf-global--Color--100, #151515));\n --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--hover--BackgroundColor,\n transparent);\n}\n\n:host(:active) {\n --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--active--Color,\n var(--pf-global--Color--light-100, #fff));\n --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--active--BackgroundColor,\n var(--pf-global--primary-color--200, #004080));\n --pf-c-button--after--BorderWidth: var(--pf-c-button--active--after--BorderWidth,\n var(--pf-global--BorderWidth--md, 2px));\n /* DANGER */\n --pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--active--Color,\n var(--pf-global--Color--light-100, #fff));\n --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--active--BackgroundColor,\n var(--pf-global--danger-color--200, #a30000));\n /* LINK */\n --pf-c-button--m-link--Color: var(--pf-c-button--m-link--active--Color,\n var(--pf-global--link--Color--hover, #004080));\n --pf-c-button--m-link--BackgroundColor: var(--pf-c-button--m-link--active--BackgroundColor, transparent);\n}\n\n.disabled,\n:host(:disabled),\n:host([danger]:disabled),\n:host([link]:disabled) .link {\n pointer-events: none;\n cursor: default;\n}\n\n[part=icon] {\n --pf-icon--size: 16px;\n display: inline-flex;\n align-items: center;\n position: absolute;\n & ::slotted(*) {\n width: 16px;\n max-width: 16px;\n height: 16px;\n max-height: 16px;\n }\n}\n\n.hasIcon [part=icon] {\n cursor: pointer;\n}\n\n.hasIcon #button {\n position: absolute;\n inset: 0;\n}\n\n/******************************\n * *\n * PLAIN *\n * *\n ******************************/\n\n#button.plain {\n --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-plain--disabled--BackgroundColor, transparent);\n --pf-c-button--after--BorderWidth: 0 !important;\n --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--after--BorderColor,\n var(--pf-global--Color--100, #151515));\n --pf-c-button--disabled--Color: var(--pf-c-button--m-plain--disabled--Color,\n var(--pf-global--disabled-color--200, #d2d2d2));\n --_button-color: var(--pf-c-button--m-plain--Color,\n var(--pf-global--Color--200, #6a6e73));\n --_button-background-color: var(--pf-c-button--m-plain--BackgroundColor,\n transparent);\n :host(:active) & {\n --pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--active--Color,\n var(--pf-global--Color--100, #151515));\n --pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--active--BackgroundColor,\n tranparent);\n }\n &:not(.hasIcon) [part=icon],\n &.loading [part=icon] {\n left: 16px;\n }\n & [part=icon] {\n display: contents;\n }\n &.disabled,\n &.link.disabled {\n --_button-color: var(--pf-c-button--disabled--Color,\n var(--pf-c-button--m-plain--disabled--Color,\n var(--pf-global--disabled--color--200, #d2d2d2)));\n }\n}\n\n.hasIcon:not(.plain) [part=icon] {\n position: relative;\n}\n\n/******************************\n * *\n * ICON POSITION RIGHT *\n * *\n ******************************/\n\n:host([icon-position=right]) .loading [part=icon] {\n order: 1;\n}\n\n:host([icon-position=right]) #button.hasIcon {\n padding-left: var(--pf-c-button--PaddingLeft, var(--pf-global--spacer--md, 1rem));\n padding-right: calc(16px + 8px + var(--pf-c-button--PaddingRight, var(--pf-global--spacer--md, 1rem)));\n}\n\n/******************************\n * *\n * WARNING *\n * *\n ******************************/\n\n#button.warning {\n --_button-color: var(--pf-c-button--m-warning--Color,\n var(--pf-global--Color--dark-100, #151515));\n --_button-background-color: var(--pf-c-button--m-warning--BackgroundColor,\n var(--pf-global--warning-color--100, #f0ab00));\n :host(:focus) & {\n --pf-c-button--m-warning--Color: var(--pf-c-button--m-warning--focus--Color,\n var(--pf-global--Color--dark-100, #151515));\n --pf-c-button--m-warning--BackgroundColor: var(--pf-c-button--m-warning--focus--BackgroundColor,\n var(--pf-global--palette--gold-500, #c58c00));\n }\n :host(:hover) & {\n --pf-c-button--m-warning--Color: var(--pf-c-button--m-warning--hover--Color,\n var(--pf-global--Color--dark-100, #151515));\n --pf-c-button--m-warning--BackgroundColor: var(--pf-c-button--m-warning--hover--BackgroundColor,\n var(--pf-global--palette--gold-500, #c58c00));\n }\n :host(:active) & {\n --pf-c-button--m-warning--Color: var(--pf-c-button--m-warning--active--Color,\n var(--pf-global--Color--dark-100, #151515));\n --pf-c-button--m-warning--BackgroundColor: var(--pf-c-button--m-warning--active--BackgroundColor,\n var(--pf-global--palette--gold-500, #c58c00));\n }\n &.disabled {\n --_button-color: var(--pf-c-button--disabled--Color,\n var(--pf-global--disabled-color--100, #6a6e73));\n --_button-background-color: var(--pf-c-button--disabled--BackgroundColor,\n var(--pf-global--disabled-color--200, #d2d2d2));\n }\n}\n\n/******************************\n * *\n * LOADING *\n * *\n ******************************/\n\n:host([loading]) #button {\n position: relative;\n display: flex;\n align-items: center;\n}\n\n#button.loading {\n & [part=icon] {\n display: inline-block;\n z-index: 1;\n position: absolute;\n cursor: pointer;\n top: var(--pf-c-button__progress--Top, 50%);\n left: var(--pf-c-button__progress--Left,\n var(--pf-global--spacer--md, 1rem));\n line-height: 1;\n transform: translate(\n var(--pf-c-button__progress--TranslateX, 0),\n var(--pf-c-button__progress--TranslateY, -50%));\n margin-inline-end: var(--pf-c-button__icon--m-start--MarginRight,\n var(--pf-global--spacer--xs, 0.25rem));\n }\n &.primary:not(.plain),\n &.danger {\n --pf-c-spinner--Color: white;\n }\n &:not(.plain) {\n padding-left: calc(12px + var(--pf-c-button--PaddingLeft, var(--pf-global--spacer--md, 1rem)));\n --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight,\n var(--pf-global--spacer--md, 1rem));\n --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft,\n calc(\n var(--pf-global--spacer--md, 1rem) + var(--pf-c-button__progress--width,\n calc(var(--pf-global--icon--FontSize--md, 1.125rem) + var(--pf-global--spacer--sm, 0.5rem))) / 2));\n }\n\n}\n\n/******************************\n * *\n * SECONDARY *\n * *\n ******************************/\n\n#button.secondary {\n --pf-c-button--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--Color,\n var(--pf-global--danger-color--100, #c9190b));\n --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--BackgroundColor, transparent);\n --_button-color: var(--pf-c-button--m-secondary--Color,\n var(--pf-global--primary-color--100, #06c));\n --_button-background-color: var(--pf-c-button--m-secondary--BackgroundColor, transparent);\n --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--after--BorderColor,\n var(--pf-global--primary-color--100, #06c));\n :host(:focus) & {\n --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--focus--Color,\n var(--pf-global--primary-color--100, #06c));\n --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--focus--BackgroundColor, transparent);\n --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--focus--after--BorderColor,\n var(--pf-global--primary-color--100, #06c));\n /* DANGER */\n --pf-c-button--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--focus--Color,\n var(--pf-global--danger--color--200, #a30000));\n --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--focus--BackgroundColor, transparent);\n }\n :host(:hover) & {\n --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--hover--Color,\n var(--pf-global--primary-color--100, #06c));\n --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--hover--BackgroundColor,\n transparent);\n --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--hover--after--BorderColor,\n var(--pf-global--primary-color--100, #06c));\n /* DANGER */\n --pf-c-button--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--hover--Color,\n var(--pf-global--danger--color--200, #a30000));\n --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--hover--BackgroundColor, transparent);\n }\n :host(:active) & {\n --pf-c-button--m-secondary--Color: var(--pf-c-button--m-secondary--active--Color,\n var(--pf-global--primary-color--100, #06c));\n --pf-c-button--m-secondary--BackgroundColor: var(--pf-c-button--m-secondary--active--BackgroundColor, transparent);\n --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--active--after--BorderColor,\n var(--pf-global--primary-color--100, #06c));\n /* DANGER */\n --pf-c-button--m-danger--Color: var(--pf-c-button--m-secondary--m-danger--active--Color,\n var(--pf-global--danger--color--200, #a30000));\n --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-secondary--m-danger--active--BackgroundColor, transparent);\n }\n &.danger {\n --_button-color: var(--pf-c-button--m-secondary--m-danger--Color,\n var(--pf-global--danger--color--100, #c9190b));\n --_button-background-color: var(--pf-c-button--m-secondary--m-danger--BackgroundColor, transparent);\n --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--after--BorderColor,\n var(--pf-global--danger--color--100, #c9190b));\n :host(:focus) & {\n --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--focus--after--BorderColor,\n var(--pf-global--danger--color--100, #c9190b));\n }\n :host(:hover) & {\n --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--hover--after--BorderColor,\n var(--pf-global--danger--color--100, #c9190b));\n }\n :host(:active) & {\n --pf-c-button--after--BorderColor: var(--pf-c-button--m-secondary--m-danger--active--after--BorderColor,\n var(--pf-global--danger--color--100, #c9190b));\n }\n }\n}\n\n/******************************\n * *\n * TERTIARY *\n * *\n ******************************/\n\n#button.tertiary {\n --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--after--BorderColor,\n var(--pf-global--Color--100, #151515));\n --_button-color: var(--pf-c-button--m-tertiary--Color,\n var(--pf-global--Color--100, #151515));\n --_button-background-color: var(--pf-c-button--m-tertiary--BackgroundColor, transparent);\n :host(:focus) & {\n --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--focus--Color,\n var(--pf-global--Color--100, #151515));\n --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--focus--BackgroundColor,\n transparent);\n --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--focus--after--BorderColor,\n var(--pf-global--Color--100, #151515));\n }\n :host(:hover) & {\n --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--hover--Color,\n var(--pf-global--Color--100, #151515));\n --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--hover--BackgroundColor, transparent);\n --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--hover--after--BorderColor,\n var(--pf-global--Color--100, #151515));\n }\n :host(:active) & {\n --pf-c-button--m-tertiary--Color: var(--pf-c-button--m-tertiary--active--Color,\n var(--pf-global--Color--100, #151515));\n --pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-button--m-tertiary--active--BackgroundColor, transparent);\n --pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--active--after--BorderColor,\n var(--pf-global--Color--100, #151515));\n }\n}\n\n/******************************\n * *\n * CONTROL *\n * *\n ******************************/\n\n#button.control {\n --pf-c-button--BorderRadius: var(--pf-c-button--m-control--BorderRadius, 0);\n --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-control--disabled--BackgroundColor,\n var(--pf-global--disabled-color--300, #f0f0f0));\n --pf-c-button--after--BorderRadius: 0;\n --pf-c-button--after--BorderWidth: var(--pf-c-button--m-control--after--BorderWidth,\n var(--pf-global--BorderWidth--sm, 1px));\n --pf-c-button--after--BorderColor:\n var(--pf-c-button--m-control--after--BorderTopColor,\n var(--pf-global--BorderColor--300, #f0f0f0))\n var(--pf-c-button--m-control--after--BorderRightColor,\n var(--pf-global--BorderColor--300, #f0f0f0))\n var(--pf-c-button--m-control--after--BorderBottomColor,\n var(--pf-global--BorderColor--200, #8a8d90))\n var(--pf-c-button--m-control--after--BorderLeftColor,\n var(--pf-global--BorderColor--300, #f0f0f0));\n --_button-color: var(--pf-c-button--m-control--Color,\n var(--pf-global--Color--100, #151515));\n --_button-background-color: var(--pf-c-button--m-control--BackgroundColor,\n var(--pf-global--BackgroundColor--100, #fff));\n :host(:focus) & {\n --pf-c-button--m-control--Color: var(--pf-c-button--m-control--focus--Color,\n var(--pf-global--Color--100, #151515));\n --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--focus--BackgroundColor,\n var(--pf-global--BackgroundColor--100, #fff));\n --pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--focus--after--BorderBottomColor,\n var(--pf-global--active-color--100, #06c));\n &::after {\n border-block-end-width: var(--pf-c-button--m-control--focus--after--BorderBottomWidth,\n var(--pf-global--BorderWidth--md, 2px));\n }\n }\n :host(:hover) & {\n --pf-c-button--m-control--Color: var(--pf-c-button--m-control--hover--Color,\n var(--pf-global--Color--100, #151515));\n --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--hover--BackgroundColor,\n var(--pf-global--BackgroundColor--100, #fff));\n --pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--hover--after--BorderBottomColor,\n var(--pf-global--active-color--100, #06c));\n &::after {\n border-block-end-width: var(--pf-c-button--m-control--hover--after--BorderBottomWidth,\n var(--pf-global--BorderWidth--md, 2px));\n }\n }\n :host(:active) & {\n --pf-c-button--m-control--Color: var(--pf-c-button--m-control--active--Color,\n var(--pf-global--Color--100, #151515));\n --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--active--BackgroundColor,\n var(--pf-global--BackgroundColor--100, #fff));\n --pf-c-button--m-control--after--BorderBottomColor: var(--pf-c-button--m-control--active--after--BorderBottomColor,\n var(--pf-global--active-color--100, #06c));\n &::after {\n border-block-end-width: var(--pf-c-button--m-control--active--after--BorderBottomWidth,\n var(--pf-global--BorderWidth--md, 2px));\n }\n }\n}\n\n/******************************\n * *\n * LINK *\n * *\n ******************************/\n\n#button.link {\n --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-link--disabled--BackgroundColor, transparent);\n --_button-color: var(--pf-c-button--m-link--Color, var(--pf-global--link--Color, #06c));\n --_button-background-color: var(--pf-c-button--m-link--BackgroundColor,\n var(--pf-c-button--m-link--BackgroundColor, transparent));\n &.inline {\n :host(:hover) & {\n text-decoration: var(--pf-c-button--m-link--m-inline--hover--TextDecoration,\n var(--pf-global--link--TextDecoration--hover, underline));\n }\n }\n &.danger {\n --pf-c-button--m-danger--Color: var(--pf-c-button--m-link--m-danger--Color,\n var(--pf-global--danger-color--100, #c9190b));\n --pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--BackgroundColor, transparent);\n :host(:hover) & {\n --pf-c-button--m-link--m-danger--Color: var(--pf-c-button--m-link--m-danger--hover--Color,\n var(--pf-global--danger-color--200, #a30000));\n --pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--hover--BackgroundColor, transparent);\n }\n :host(:focus) & {\n --pf-c-button--m-link--m-danger--Color: var(--pf-c-button--m-link--m-danger--focus--Color,\n var(--pf-global--danger-color--200, #a30000));\n --pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--focus--BackgroundColor, transparent);\n }\n :host(:active) & {\n --pf-c-button--m-link--m-danger--Color: var(--pf-c-button--m-link--m-danger--active--Color,\n var(--pf-global--danger-color--200, #a30000));\n --pf-c-button--m-link--m-danger--BackgroundColor: var(--pf-c-button--m-link--m-danger--active--BackgroundColor, transparent);\n }\n }\n}\n\n/******************************\n * *\n * DISABLED *\n * *\n ******************************/\n\n:host(:is(:disabled,[disabled])) {\n pointer-events: none;\n cursor: default;\n}\n\n#button.disabled {\n &:not(.plain) {\n --_button-color: var(--pf-c-button--disabled--Color,\n var(--pf-global--disabled-color--100, #6a6e73));\n --_button-background-color: var(--pf-c-button--disabled--BackgroundColor,\n var(--pf-global--disabled-color--200, #d2d2d2));\n }\n &::after {\n border-color: var(--pf-c-button--disabled--after--BorderColor, transparent);\n }\n}\n\n/******************************\n * *\n * BLOCK *\n * *\n ******************************/\n\n:host([block]) {\n display: flex;\n width: 100%;\n justify-content: center;\n}\n\n/******************************\n * *\n * LARGE *\n * *\n ******************************/\n\n:host([size="large"]) {\n --pf-c-button--PaddingTop: var(--pf-c-button--m-display-lg--PaddingTop,\n var(--pf-global--spacer--md, 1rem));\n --pf-c-button--PaddingRight: var(--pf-c-button--m-display-lg--PaddingRight,\n var(--pf-global--spacer--xl, 2rem));\n --pf-c-button--PaddingBottom: var(--pf-c-button--m-display-lg--PaddingBottom,\n var(--pf-global--spacer--md, 1rem));\n --pf-c-button--PaddingLeft: var(--pf-c-button--m-display-lg--PaddingLeft,\n var(--pf-global--spacer--xl, 2rem));\n --pf-c-button--FontWeight: var(--pf-c-button--m-display-lg--FontWeight,\n var(--pf-global--FontWeight--bold, 700));\n}\n\n/******************************\n * *\n * SMALL *\n * *\n ******************************/\n\n:host([size="small"]) {\n --pf-c-button--FontSize: var(--pf-c-button--m-small--FontSize,\n var(--pf-global--FontSize--md, 1rem));\n}\n\n/******************************\n * *\n * DANGER *\n * *\n ******************************/\n\n#button.danger {\n --_button-color: var(--pf-c-button--m-danger--Color,\n var(--pf-global--Color--light-100, #fff));\n --_button-background-color: var(--pf-c-button--m-danger--BackgroundColor,\n var(--pf-global--danger-color--100, #c9190b));\n}\n\n`;
let PfButton = class PfButton extends LitElement {
constructor() {
super(...arguments);
_PfButton_instances.add(this);
/** Disables the button */
this.disabled = false;
/** Represents the state of a stateful button */
this.loading = false;
/** Not as urgent as danger */
this.warning = false;
/**
* Use danger buttons for actions a user can take that are potentially
* destructive or difficult/impossible to undo, like deleting or removing
* user data.
*/
this.danger = false;
/** Applies plain styles */
this.plain = false;
/**
* Changes the style of the button.
* - Primary: Used for the most important call to action on a page. Try to
* limit primary buttons to one per page.
* - Secondary: Use secondary buttons for general actions on a page, that
* don’t require as much emphasis as primary button actions. For example,
* you can use secondary buttons where there are multiple actions, like in
* toolbars or data lists.
* - Tertiary: Tertiary buttons are flexible and can be used as needed.
*/
this.variant = 'primary';
this.inline = false;
this.block = false;
_PfButton_internals.set(this, InternalsController.of(this, { role: this.variant === 'link' ? 'none' : 'button' }));
_PfButton_slots.set(this, new SlotController(this, 'icon', null));
}
connectedCallback() {
super.connectedCallback();
this.addEventListener('click', __classPrivateFieldGet(this, _PfButton_instances, "m", _PfButton_onClick));
this.addEventListener('keydown', __classPrivateFieldGet(this, _PfButton_instances, "m", _PfButton_onKeydown));
}
willUpdate() {
__classPrivateFieldGet(this, _PfButton_internals, "f").ariaLabel = this.label || null;
__classPrivateFieldGet(this, _PfButton_internals, "f").ariaDisabled = String(!!this.disabled);
const isLink = this.variant === 'link' && this.href;
if (isLink) {
this.removeAttribute('tabindex');
__classPrivateFieldGet(this, _PfButton_internals, "f").role = 'none';
}
else {
this.tabIndex = 0;
__classPrivateFieldGet(this, _PfButton_internals, "f").role = 'button';
}
}
async formDisabledCallback() {
await this.updateComplete;
this.requestUpdate();
}
render() {
const hasIcon = !!this.icon || !!this.loading || __classPrivateFieldGet(this, _PfButton_slots, "f").hasSlotted('icon');
const { warning, variant, danger, loading, plain, inline, block, size, href, target } = this;
const disabled = __classPrivateFieldGet(this, _PfButton_instances, "a", _PfButton_disabled_get);
const content = html `
<slot id="icon"
part="icon"
name="icon"
?hidden="${!hasIcon}">
<pf-icon role="presentation"
icon="${ifDefined(this.icon)}"
set="${ifDefined(this.iconSet)}"
?hidden="${!this.icon || this.loading}"></pf-icon>
<pf-spinner size="md"
?hidden="${!this.loading}"
aria-label="${this.getAttribute('loading-label') ?? 'loading'}"></pf-spinner>
</slot>
<slot id="text"></slot>
`;
if (variant === 'link' && href) {
return html `
<a id="button"
href="${href}"
target="${ifDefined(target)}"
class="${classMap({
[variant]: true,
[size ?? '']: !!size,
anchor: true,
inline,
block,
danger,
disabled,
hasIcon,
loading,
plain,
warning,
})}">${content}</a>`;
}
else {
return html `
<div id="button"
class="${classMap({
[variant]: true,
[size ?? '']: !!size,
inline,
block,
danger,
disabled,
hasIcon,
loading,
plain,
warning,
})}">${content}</div>`;
}
}
};
_PfButton_internals = new WeakMap();
_PfButton_slots = new WeakMap();
_PfButton_instances = new WeakSet();
_PfButton_disabled_get = function _PfButton_disabled_get() {
return this.disabled || __classPrivateFieldGet(this, _PfButton_internals, "f").formDisabled;
};
_PfButton_onClick = function _PfButton_onClick() {
if (!__classPrivateFieldGet(this, _PfButton_instances, "a", _PfButton_disabled_get)) {
switch (this.type) {
case 'reset':
return __classPrivateFieldGet(this, _PfButton_internals, "f").reset();
default:
return __classPrivateFieldGet(this, _PfButton_internals, "f").submit();
}
}
};
_PfButton_onKeydown = function _PfButton_onKeydown(event) {
switch (event.key) {
case ' ':
event.preventDefault();
event.stopPropagation();
if (this.dispatchEvent(new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window,
}))) {
__classPrivateFieldGet(this, _PfButton_instances, "m", _PfButton_onClick).call(this);
}
break;
case 'Enter':
if (this.dispatchEvent(new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window,
}))) {
__classPrivateFieldGet(this, _PfButton_instances, "m", _PfButton_onClick).call(this);
}
}
};
PfButton.formAssociated = true;
PfButton.styles = [
tokensStyles,
iconStyles,
styles,
];
PfButton.version = "4.1.0";
__decorate([
property({ reflect: true })
], PfButton.prototype, "type", void 0);
__decorate([
property()
], PfButton.prototype, "label", void 0);
__decorate([
property()
], PfButton.prototype, "value", void 0);
__decorate([
property()
], PfButton.prototype, "name", void 0);
__decorate([
property({ reflect: true, type: Boolean })
], PfButton.prototype, "disabled", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], PfButton.prototype, "loading", void 0);
__decorate([
property({ reflect: true })
], PfButton.prototype, "size", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], PfButton.prototype, "warning", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], PfButton.prototype, "danger", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], PfButton.prototype, "plain", void 0);
__decorate([
property({ reflect: true })
], PfButton.prototype, "variant", void 0);
__decorate([
property({ reflect: true, type: Boolean })
], PfButton.prototype, "inline", void 0);
__decorate([
property({ reflect: true, type: Boolean })
], PfButton.prototype, "block", void 0);
__decorate([
property()
], PfButton.prototype, "icon", void 0);
__decorate([
property({ attribute: 'icon-set' })
], PfButton.prototype, "iconSet", void 0);
__decorate([
property({ reflect: true })
], PfButton.prototype, "href", void 0);
__decorate([
property({ reflect: true })
], PfButton.prototype, "target", void 0);
PfButton = __decorate([
customElement('pf-button')
], PfButton);
export { PfButton };
//# sourceMappingURL=pf-button.js.map