@patternfly/elements 2.0.1 → 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +86 -59
- package/package.json +1 -1
- package/pf-accordion/BaseAccordionHeader.d.ts +2 -2
- package/pf-accordion/BaseAccordionHeader.js +29 -23
- package/pf-accordion/BaseAccordionHeader.js.map +1 -1
- package/pf-accordion/BaseAccordionPanel.css +1 -0
- package/pf-accordion/BaseAccordionPanel.js +1 -1
- package/pf-accordion/pf-accordion-header.js.map +1 -1
- package/pf-accordion/pf-accordion-panel.js.map +1 -1
- package/pf-avatar/BaseAvatar.js.map +1 -1
- package/pf-avatar/pf-avatar.js.map +1 -1
- package/pf-badge/pf-badge.js.map +1 -1
- package/pf-button/BaseButton.js.map +1 -1
- package/pf-button/pf-button.js.map +1 -1
- package/pf-icon/BaseIcon.js.map +1 -1
- package/pf-icon/pf-icon.js.map +1 -1
- package/pf-panel/pf-panel.css +12 -4
- package/pf-panel/pf-panel.js +1 -1
- package/pf-panel/pf-panel.js.map +1 -1
- package/pf-progress-stepper/pf-progress-step.js.map +1 -1
- package/pf-spinner/BaseSpinner.js.map +1 -1
- package/pf-switch/pf-switch.d.ts +2 -0
- package/pf-switch/pf-switch.js +2 -0
- package/pf-switch/pf-switch.js.map +1 -1
- package/pf-tabs/BaseTabs.js.map +1 -1
- package/pf-tooltip/BaseTooltip.js.map +1 -1
- package/pfe.min.js +106 -108
- package/pfe.min.js.map +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pf-accordion-header.js","sourceRoot":"","sources":["pf-accordion-header.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;AAErF,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;;;AAI/D,OAAO,yCAAyC,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,mBAAmB;IAAnD;;QASL,mCAAS,IAAI,cAAc,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,EAAC;IAcrD,CAAC;IAZC,iBAAiB;QACf,OAAO,IAAI,CAAA,GAAG,CAAC,uBAAA,IAAI,gCAAO,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;;;cAGlD;;wBAEU,IAAI,CAAC,IAAI,IAAI,aAAa;uBAC3B,IAAI,CAAC,OAAO,IAAI,KAAK;;;KAGvC,CAAC;IACJ,CAAC;;;AArBe,wBAAM,GAAG,CAAC,GAAG,mBAAmB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAEnC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"pf-accordion-header.js","sourceRoot":"","sources":["pf-accordion-header.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;AAErF,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;;;AAI/D,OAAO,yCAAyC,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,mBAAmB;IAAnD;;QASL,mCAAS,IAAI,cAAc,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,EAAC;IAcrD,CAAC;IAZC,iBAAiB;QACf,OAAO,IAAI,CAAA,GAAG,CAAC,uBAAA,IAAI,gCAAO,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;;;cAGlD;;wBAEU,IAAI,CAAC,IAAI,IAAI,aAAa;uBAC3B,IAAI,CAAC,OAAO,IAAI,KAAK;;;KAGvC,CAAC;IACJ,CAAC;;;AArBe,wBAAM,GAAG,CAAC,GAAG,mBAAmB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAEnC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAA6B;AAE5B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAe;AAES;IAAnD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;kDAAkB;AAP1D,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAuB7B;SAvBY,iBAAiB","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport { BaseAccordionHeader } from './BaseAccordionHeader.js';\n\nimport style from './pf-accordion-header.css';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\n/**\n * Accordion Header\n *\n * @csspart text - inline element containing the heading text or slotted heading content\n * @csspart accents - container for accents within the header\n * @csspart icon - caret icon\n *\n * @slot\n * We expect the light DOM of the pf-accordion-header to be a heading level tag (h1, h2, h3, h4, h5, h6)\n * @slot accents\n * These elements will appear inline with the accordion header, between the header and the chevron\n * (or after the chevron and header in disclosure mode).\n *\n * @fires {AccordionHeaderChangeEvent} change - when the open panels change\n *\n * @cssprop {<color>} --pf-c-accordion__toggle--Color\n * Sets the font color for the accordion header.\n * {@default `var(--pf-global--Color--100, #151515)`}\n * @cssprop {<color>} --pf-c-accordion__toggle--BackgroundColor\n * Sets the background color for the accordion header toggle element.\n * {@default `transparent`}\n * @cssprop {<color>} --pf-c-accordion__toggle--after--BackgroundColor\n * Sets the background color for the after element for the accordion header toggle element.\n * {@default `transparent`}\n * @cssprop {<length>} --pf-c-accordion__toggle--PaddingTop\n * Sets the top padding for the accordion header.\n * {@default `var(--pf-global--spacer--sm, 0.5rem)`}\n * @cssprop {<length>} --pf-c-accordion__toggle--PaddingRight\n * Sets the right padding for the accordion header.\n * {@default `var(--pf-global--spacer--md, 1rem)`}\n * @cssprop {<length>} --pf-c-accordion__toggle--PaddingBottom\n * Sets the bottom padding for the accordion header.\n * {@default `var(--pf-global--spacer--sm, 0.5rem)`}\n * @cssprop {<length>} --pf-c-accordion__toggle--PaddingLeft\n * Sets the left padding for the accordion header.\n * {@default `var(--pf-global--spacer--md, 1rem)`}\n * @cssprop {<length>} --pf-c-accordion__toggle--FontSize\n * Sets the sidebar background color for the accordion header.\n * {@default `var(--pf-global--FontSize--lg, 1rem)`}\n * @cssprop {<color>} --pf-c-accordion__toggle--FontFamily\n * Sets the font family for the accordion header.\n * {@default `var(--pf-global--FontFamily--redhat-updated--heading--sans-serif, \"RedHatDisplayUpdated\", helvetica, arial, sans-serif)`}\n * @cssprop --pf-c-accordion__toggle--FontWeight\n * Sets the font weight for the accordion header.\n * {@default `var(--pf-global--FontWeight--normal, 400)`}\n * @cssprop {<color>} --pf-c-accordion__toggle--active--BackgroundColor\n * Sets the active backgrdound color for the accordion header.\n * {@default `var(--pf-global--BackgroundColor--200, #f0f0f0)`}\n * @cssprop {<color>} --pf-c-accordion__toggle--active-text--Color\n * Sets the active text color for the accordion header.\n * {@default `var(--pf-global--link--Color, #0066cc)`}\n * @cssprop --pf-c-accordion__toggle--active-text--FontWeight\n * Sets the active text font weight for the accordion header.\n * {@default `var(--pf-global--FontWeight--semi-bold, 700)`}\n * @cssprop {<color>} --pf-c-accordion__toggle--expanded--before--BackgroundColor\n * Sets the hover expanded before background color for the accordion header.\n * {@default `var(--pf-global--link--Color, #0066cc)`}\n * @cssprop --pf-c-accordion__toggle--expanded-icon--Rotate\n * Sets the expanded icon rotation degrees for the accordion header.\n * {@default `90deg`}\n * @cssprop {<length>} --pf-c-accordion__toggle-text--MaxWidth\n * Sets the max width for the text inside the accordion header.\n * {@default `calc(100% - var(--pf-global--spacer--lg, 1.5rem))`}\n * @cssprop --pf-c-accordion__toggle--before--Width\n * Sets the sidebar width for the accordion header.\n * {@default `var(--pf-global--BorderWidth--lg, 3px)`}\n * @cssprop --pf-c-accordion__toggle-icon--Transition\n * Sets the transition animation for the accordion header.\n * {@default `0.2s ease-in 0s`}\n */\n@customElement('pf-accordion-header')\nexport class PfAccordionHeader extends BaseAccordionHeader {\n static readonly styles = [...BaseAccordionHeader.styles, style];\n\n @property({ reflect: true }) bordered?: 'true' | 'false';\n\n @property({ reflect: true }) icon?: string;\n\n @property({ reflect: true, attribute: 'icon-set' }) iconSet?: string;\n\n #slots = new SlotController(this, 'accents', null);\n\n renderAfterButton() {\n return html`${!this.#slots.hasSlotted('accents') ? '' : html`\n <span part=\"accents\">\n <slot name=\"accents\"></slot>\n </span>`}\n <pf-icon part=\"icon\"\n icon=\"${this.icon ?? 'angle-right'}\"\n set=\"${this.iconSet ?? 'fas'}\"\n class=\"icon\"\n size=\"lg\"></pf-icon>\n `;\n }\n}\n\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-accordion-header': PfAccordionHeader;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pf-accordion-panel.js","sourceRoot":"","sources":["pf-accordion-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;;;AAI7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,kBAAkB;;AACtC,uBAAM,GAAG,CAAC,GAAG,kBAAkB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAElC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"pf-accordion-panel.js","sourceRoot":"","sources":["pf-accordion-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;;;AAI7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,kBAAkB;;AACtC,uBAAM,GAAG,CAAC,GAAG,kBAAkB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAElC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAA6B;AAH9C,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAI5B;SAJY,gBAAgB","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { BaseAccordionPanel } from './BaseAccordionPanel.js';\n\nimport style from './pf-accordion-panel.css';\n\n/**\n * Accordion Panel\n *\n * @slot - Panel content\n * @cssprop {<color>} --pf-c-accordion--BackgroundColor\n * Sets the background color for the panel content.\n * {@default `var(--pf-global--BackgroundColor--light-100, #ffffff)`}\n * @cssprop {<color>} --pf-c-accordion__panel--Color\n * Sets the font color for the panel content.\n * {@default `var(--pf-global--Color--dark-200, #6a6e73)`}\n * @cssprop {<length>} --pf-c-accordion__panel--FontSize\n * Sets the font size for the panel content.\n * {@default `var(--pf-global--FontSize--sm, 0.875rem)`}\n * @cssprop {<color>} --pf-c-accordion__panel--content-body--before--BackgroundColor\n * Sets the sidebar color for the panel when the context is expanded.\n * {@default `var(--pf-global--primary-color--100, #0066cc)`}\n * @cssprop {<length>} --pf-c-accordion__panel--m-fixed--MaxHeight\n * Sets the maximum height for the panel content.\n * Will only be used if the `fixed` attribute is used.\n * {@default `9.375rem`}\n * @cssprop {<length>} --pf-c-accordion__panel-body--PaddingTop\n * Sets the padding top for the panel content.\n * {@default `var(--pf-global--spacer--sm, 0.5rem)`}\n * @cssprop {<length>} --pf-c-accordion__panel-body--PaddingRight\n * Sets the padding right for the panel content.\n * {@default `var(--pf-global--spacer--md, 1rem)`}\n * @cssprop {<length>} --pf-c-accordion__panel-body--PaddingBottom\n * Sets the padding bottom for the panel content.\n * {@default `var(--pf-global--spacer--sm, 0.5rem)`}\n * @cssprop {<length>} --pf-c-accordion__panel-body--PaddingLeft\n * Sets the padding left for the panel content.\n * {@default `var(--pf-global--spacer--md, 1rem)`}\n * @cssprop {<color>} --pf-c-accordion__panel-body--before--BackgroundColor\n * Sets the background color for the panel content.\n * {@default `transparent`}\n * @cssprop --pf-c-accordion__panel-body--before--Width\n * Sets the before width for the panel content.\n * {@default `var(--pf-global--BorderWidth--lg, 3px)`}\n */\n@customElement('pf-accordion-panel')\nexport class PfAccordionPanel extends BaseAccordionPanel {\n static readonly styles = [...BaseAccordionPanel.styles, style];\n\n @property({ reflect: true }) bordered?: 'true' | 'false';\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-accordion-panel': PfAccordionPanel;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseAvatar.js","sourceRoot":"","sources":["BaseAvatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAItD,MAAM,OAAO,eAAgB,SAAQ,KAAK;IACxC,YAAmB,aAAoB;QACrC,KAAK,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QADhC,kBAAa,GAAb,aAAa,CAAO;IAEvC,CAAC;CACF;AAED;;;;;GAKG;AAEH,MAAM,OAAO,UAAW,SAAQ,UAAU;IAA1C;;QAME,yCAAyC;QACZ,QAAG,GAAY,cAAc,CAAC;QAE3D,yBAAyB;QACI,SAAI,
|
|
1
|
+
{"version":3,"file":"BaseAvatar.js","sourceRoot":"","sources":["BaseAvatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAItD,MAAM,OAAO,eAAgB,SAAQ,KAAK;IACxC,YAAmB,aAAoB;QACrC,KAAK,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QADhC,kBAAa,GAAb,aAAa,CAAO;IAEvC,CAAC;CACF;AAED;;;;;GAKG;AAEH,MAAM,OAAO,UAAW,SAAQ,UAAU;IAA1C;;QAME,yCAAyC;QACZ,QAAG,GAAY,cAAc,CAAC;QAE3D,yBAAyB;QACI,SAAI,GAA8B,IAAI,CAAC;QAEpE,8CAA8C;QACF,SAAI,GAAG,KAAK,CAAC;IAsB3D,CAAC;IApBC,MAAM;QACJ,OAAO,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;eAEnB,IAAI,CAAC,IAAI;cACV,IAAI,CAAC,GAAG,IAAI,EAAE;iBACX,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,CAAC;cAC3D,IAAI,CAAC,GAAG;KACjB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;KAKnB,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;OAML,CAAC;IACN,CAAC;;AAjCe,iBAAM,GAAG,CAAC,KAAK,CAAC,CAAC;AAGrB;IAAX,QAAQ,EAAE;uCAAc;AAGI;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAA+B;AAG9B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAwC;AAGxB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAc","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\n\nimport style from './BaseAvatar.css';\n\nexport class AvatarLoadEvent extends Event {\n constructor(public originalEvent: Event) {\n super('load', { bubbles: true, composed: true });\n }\n}\n\n/**\n * Avatar is an element for displaying a user's avatar image.\n *\n *\n * @summary For displaying a user's avatar image\n */\n\nexport class BaseAvatar extends LitElement {\n static readonly styles = [style];\n\n /** The URL to the user's custom avatar image. */\n @property() src?: string;\n\n /** The alt text for the avatar image. */\n @property({ reflect: true }) alt?: string = 'Avatar image';\n\n /** Size of the Avatar */\n @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n /** Whether or not the Avatar image is dark */\n @property({ type: Boolean, reflect: true }) dark = false;\n\n render() {\n return this.src != null ? html`\n <img\n size=${this.size}\n alt=${this.alt ?? ''}\n @load=\"${(e: Event) => this.dispatchEvent(new AvatarLoadEvent(e))}\"\n src=${this.src}>\n ` : this.dark ? html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"enable-background:new 0 0 36 36\" viewBox=\"0 0 36 36\">\n <style>.st1,.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#6a6e73}.st2{fill:#4f5255}</style><path d=\"M0 0h36v36H0z\" style=\"fill:#212427\"/>\n <path d=\"M30.5 36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6C6.7 27 5.8 32.2 5.4 36h25.1zM17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z\" class=\"st1\"/><path d=\"M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2zM22.7 36v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h-3.2z\" class=\"st2\"/>\n </svg>\n ` : html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"enable-background:new 0 0 36 36\" viewBox=\"0 0 36 36\">\n <style>.st2{fill:#b8bbbe}</style><path d=\"M0 0h36v36H0z\" style=\"fill-rule:evenodd;clip-rule:evenodd;fill:#f0f0f0\"/>\n <path d=\"M17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z\" style=\"fill-rule:evenodd;clip-rule:evenodd;fill:#d2d2d2\"/><path d=\"M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2z\" class=\"st2\"/>\n <path d=\"m10.1 36 .1-3.2c.2-2.1 1.1-3.1 3.1-3.5V36h9.4v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h4.7c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6-1.7 1.9-2.6 7.1-3 10.9h4.7z\" style=\"fill:#d2d2d2\"/><path d=\"m25.9 36-.1-3.2c-.2-2.1-1.1-3.1-3.1-3.5V36h3.2z\" class=\"st2\"/>\n </svg>\n `;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pf-avatar.js","sourceRoot":"","sources":["pf-avatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;;AAI7C;;;;GAIG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAGL,yBAAyB;QACI,SAAI,
|
|
1
|
+
{"version":3,"file":"pf-avatar.js","sourceRoot":"","sources":["pf-avatar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;;AAI7C;;;;GAIG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAGL,yBAAyB;QACI,SAAI,GAA8B,IAAI,CAAC;IAItE,CAAC;;AAPiB,eAAM,GAAG,CAAC,KAAK,CAAC,CAAC;AAGJ;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAwC;AAGvC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAA2B;AAP5C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAQpB;SARY,QAAQ","sourcesContent":["import { property } from 'lit/decorators/property.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport { BaseAvatar } from './BaseAvatar.js';\n\nimport style from './pf-avatar.css';\n\n/**\n * An avatar is a visual used to represent a user. It may contain an image or a placeholder graphic.\n *\n * @summary For displaying a user's avatar image\n */\n@customElement('pf-avatar')\nexport class PfAvatar extends BaseAvatar {\n static readonly styles = [style];\n\n /** Size of the Avatar */\n @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n /** Whether to display a border around the avatar */\n @property({ reflect: true }) border?: 'light' | 'dark';\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-avatar': PfAvatar;\n }\n}\n"]}
|
package/pf-badge/pf-badge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pf-badge.js","sourceRoot":"","sources":["pf-badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;;;AAI3C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAII,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,SAAS;;AACpB,cAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAM1B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"pf-badge.js","sourceRoot":"","sources":["pf-badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;;;AAI3C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAII,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,SAAS;;AACpB,cAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAM1B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAA2B;AAEZ;IAA1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAiB;AAEhB;IAA1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAoB;AAXnD,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAYnB;SAZY,OAAO","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { BaseBadge } from './BaseBadge.js';\n\nimport styles from './pf-badge.css';\n\n/**\n * A badge is used to annotate other information like a label or an object name.\n *\n * @cssprop {<length>} --pf-c-badge--BorderRadius {@default `180em`}\n *\n * @cssprop {<length>} --pf-c-badge--MinWidth {@default `2rem`}\n *\n * @cssprop {<length>} --pf-c-badge--PaddingLeft {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-badge--PaddingRight {@default `0.5rem`}\n *\n * @cssprop {<length>} --pf-c-badge--FontSize {@default `0.85em`}\n * @cssprop {<length>} --pf-c-badge--LineHeight {@default `1.5`}\n * @cssprop {<length>} --pf-c-badge--FontWeight {@default `700`}\n *\n * @cssprop {<color>} --pf-c-badge--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-badge--BackgroundColor {@default `#f0f0f0`}\n *\n * @cssprop {<color>} --pf-c-badge--m-read--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-badge--m-read--BackgroundColor {@default `#f0f0f0`}\n *\n * @cssprop {<color>} --pf-c-badge--m-unread--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-badge--m-unread--BackgroundColor {@default `#06c`}\n */\n\n\n@customElement('pf-badge')\nexport class PfBadge extends BaseBadge {\n static readonly styles = [...BaseBadge.styles, styles];\n\n /**\n * Denotes the state-of-affairs this badge represents\n * Options include read and unread\n */\n @property({ reflect: true }) state?: 'unread' | 'read';\n\n @property({ reflect: true, type: Number }) number?: number;\n\n @property({ reflect: true, type: Number }) threshold?: number;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-badge': PfBadge;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseButton.js","sourceRoot":"","sources":["BaseButton.ts"],"names":[],"mappings":";;AACA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;;;AAG/F;;;;;;;;GAQG;AACH,MAAM,OAAgB,UAAW,SAAQ,UAAU;IAAnD;;;QAOE,0BAA0B;QACkB,aAAQ,GAAG,KAAK,CAAC;QAwB7D,gCAAa,IAAI,mBAAmB,CAAC,IAAI,CAAC,EAAC;IA4C7C,CAAC;IA1CC,IAAc,OAAO;QACnB,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACrB,CAAC;IAEQ,MAAM;QACb,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QACzB,OAAO,IAAI,CAAA;sBACO,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;uBACnB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;uBACrB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;4BAChB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;wBACzB,uBAAA,IAAI,kDAAS;2BACV,IAAI,CAAC,QAAQ,IAAI,uBAAA,IAAI,6BAAW,CAAC,YAAY;qEACH,IAAI,CAAC,iBAAiB,EAAE;sCACvD,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"BaseButton.js","sourceRoot":"","sources":["BaseButton.ts"],"names":[],"mappings":";;AACA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;;;AAG/F;;;;;;;;GAQG;AACH,MAAM,OAAgB,UAAW,SAAQ,UAAU;IAAnD;;;QAOE,0BAA0B;QACkB,aAAQ,GAAG,KAAK,CAAC;QAwB7D,gCAAa,IAAI,mBAAmB,CAAC,IAAI,CAAC,EAAC;IA4C7C,CAAC;IA1CC,IAAc,OAAO;QACnB,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACrB,CAAC;IAEQ,MAAM;QACb,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QACzB,OAAO,IAAI,CAAA;sBACO,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;uBACnB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;uBACrB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;4BAChB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;wBACzB,uBAAA,IAAI,kDAAS;2BACV,IAAI,CAAC,QAAQ,IAAI,uBAAA,IAAI,6BAAW,CAAC,YAAY;qEACH,IAAI,CAAC,iBAAiB,EAAE;sCACvD,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAqB;;KAEzE,CAAC;IACJ,CAAC;IAES,KAAK,CAAC,oBAAoB;QAClC,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;;;IAGC,QAAQ,IAAI,CAAC,IAAI,EAAE;QACjB,KAAK,OAAO;YACV,OAAO,uBAAA,IAAI,6BAAW,CAAC,KAAK,EAAE,CAAC;QACjC;YACE,OAAO,uBAAA,IAAI,6BAAW,CAAC,MAAM,EAAE,CAAC;KACnC;AACH,CAAC;AAhEe,iBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAElB,yBAAc,GAAG,IAAI,CAAC;AAEtB,4BAAiB,GAAmB,EAAE,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;AAGlE;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAkB;AAEhC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAsC;AAGtD;IAAX,QAAQ,EAAE;yCAAgB;AAEf;IAAX,QAAQ,EAAE;yCAAgB;AAEf;IAAX,QAAQ,EAAE;wCAAe;AAGd;IAAX,QAAQ,EAAE;wCAAe","sourcesContent":["import type { TemplateResult } from 'lit';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\nimport styles from './BaseButton.css';\n\n/**\n * Base button class\n *\n * @csspart icon - Container for the icon slot\n * @slot icon\n * Contains the button's icon or state indicator, e.g. a spinner.\n * @slot\n * Must contain exactly one `<button>` element as the only content not assigned to a named slot.\n */\nexport abstract class BaseButton extends LitElement {\n static readonly styles = [styles];\n\n static readonly formAssociated = true;\n\n static readonly shadowRootOptions: ShadowRootInit = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n /** Disables the button */\n @property({ reflect: true, type: Boolean }) disabled = false;\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 @property() value?: string;\n\n @property() name?: string;\n\n /** Shorthand for the `icon` slot, the value is icon name */\n @property() icon?: string;\n\n /** Changes the size of the button. */\n abstract size?: string;\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 abstract danger: unknown;\n\n #internals = new InternalsController(this);\n\n protected get hasIcon() {\n return !!this.icon;\n }\n\n override render() {\n const { hasIcon } = this;\n return html`\n <button type=\"${ifDefined(this.type)}\"\n class=\"${classMap({ hasIcon })}\"\n value=\"${ifDefined(this.value)}\"\n aria-label=\"${ifDefined(this.label)}\"\n @click=\"${this.#onClick}\"\n ?disabled=\"${this.disabled || this.#internals.formDisabled}\">\n <slot id=\"icon\" part=\"icon\" aria-hidden=\"true\" name=\"icon\">${this.renderDefaultIcon()}</slot>\n <slot id=\"text\" aria-hidden=${String(!!this.label) as 'true' | 'false'}></slot>\n </button>\n `;\n }\n\n protected async formDisabledCallback() {\n await this.updateComplete;\n this.requestUpdate();\n }\n\n #onClick() {\n switch (this.type) {\n case 'reset':\n return this.#internals.reset();\n default:\n return this.#internals.submit();\n }\n }\n\n /**\n * Fallback content for the icon slot. When the `icon` attribute is set, it\n * should render an icon corresponding to the value.\n *\n * @example ```html\n * <base-icon icon=${this.icon}></base-icon>\n * ```\n */\n protected abstract renderDefaultIcon(): TemplateResult;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pf-button.js","sourceRoot":"","sources":["pf-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,yCAAyC,CAAC;AACjD,OAAO,+CAA+C,CAAC;;;AAYvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmIG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAGL,gDAAgD;QACJ,YAAO,GAAG,KAAK,CAAC;QAE5D,2BAA2B;QACiB,UAAK,GAAG,KAAK,CAAC;QAE1D,8BAA8B;QACc,YAAO,GAAG,KAAK,CAAC;QAOhB,WAAM,GAAG,KAAK,CAAC;QAE3D;;;;;;;;;WASG;QAC0B,YAAO,GAAkB,SAAS,CAAC;IAkBlE,CAAC;IAhBC,IAAuB,OAAO;QAC5B,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;IACvC,CAAC;IAEkB,iBAAiB;QAClC,OAAO,IAAI,CAAA;;kBAEG,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;iBACrB,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;qBACnB,CAAC,IAAI,CAAC,IAAI;;qBAEV,CAAC,IAAI,CAAC,OAAO;;wBAEV,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,IAAI,SAAS;KAClE,CAAC;IACJ,CAAC;;AA7Ce,eAAM,GAAG,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAGZ;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAiB;AAGhB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAe;AAGd;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAiB;AAE/B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAwB;AAGf;IAApC,QAAQ,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;yCAAkB;AAEV;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAgB;AAY9B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAoC;AA7BrD,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA+CpB;SA/CY,QAAQ","sourcesContent":["import { html } 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';\n\nimport { BaseButton } from './BaseButton.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\nimport '@patternfly/elements/pf-spinner/pf-spinner.js';\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 *\n * @summary Allows users to perform an action when triggered\n *\n * @cssprop {<length>} --pf-c-button--FontSize {@default `1rem`}\n * @cssprop --pf-c-button--FontWeight {@default `400`}\n * @cssprop {<number>} --pf-c-button--LineHeight {@default `1.5`}\n *\n * @cssprop {<length>} --pf-c-button--PaddingTop {@default `0.375rem`}\n * @cssprop {<length>} --pf-c-button--PaddingLeft {@default `1rem`}\n * @cssprop {<length>} --pf-c-button--PaddingBottom {@default `0.375rem`}\n * @cssprop {<length>} --pf-c-button--PaddingRight {@default `1rem`}\n *\n * @cssprop {<length>|<percentage>} --pf-c-button--BorderRadius {@default `3px`}\n * @cssprop {<color>} --pf-c-button--after--BorderColor {@default `transparent`}\n * @cssprop {<length>} --pf-c-button--after--BorderRadius {@default `3px`}\n * @cssprop {<length>} --pf-c-button--after--BorderWidth {@default `1px`}\n * @cssprop {<length>} --pf-c-button--active--after--BorderWidth {@default `2px`}\n * @cssprop {<length>} --pf-c-button--hover--after--BorderWidth {@default `2px`}\n * @cssprop {<length>} --pf-c-button--focus--after--BorderWidth {@default `2px`}\n *\n * @cssprop {<color>} --pf-c-button--m-primary--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-primary--BackgroundColor {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-primary--active--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-primary--active--BackgroundColor {@default `#004080`}\n * @cssprop {<color>} --pf-c-button--m-primary--focus--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-primary--focus--BackgroundColor {@default `#004080`}\n * @cssprop {<color>} --pf-c-button--m-primary--hover--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-primary--hover--BackgroundColor {@default `#004080`}\n *\n * @cssprop {<color>} --pf-c-button--m-secondary--Color {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-secondary--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--active--Color {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-secondary--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--active--BorderColor {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-secondary--focus--Color {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-secondary--focus--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--focus--BorderColor {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-secondary--hover--Color {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-secondary--hover--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--hover--BorderColor {@default `#06c`}\n *\n * @cssprop {<color>} --pf-c-button--m-tertiary--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--active--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--active--BorderColor {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--focus--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--focus--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--focus--BorderColor {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--hover--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--hover--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--hover--BorderColor {@default `#151515`}\n *\n * @cssprop {<color>} --pf-c-button--m-danger--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-danger--BackgroundColor {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-button--m-danger--active--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-danger--active--BackgroundColor {@default `#a30000`}\n * @cssprop {<color>} --pf-c-button--m-danger--focus--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-danger--focus--BackgroundColor {@default `#a30000`}\n * @cssprop {<color>} --pf-c-button--m-danger--hover--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-danger--hover--BackgroundColor {@default `#a30000`}\n *\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--Color {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--BorderColor {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--active--Color {@default `#a30000`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--active--BorderColor {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--focus--Color {@default `#a30000`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--focus--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--focus--BorderColor {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--hover--Color {@default `#a30000`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--hover--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--hover--BorderColor {@default `#c9190b`}\n *\n * @cssprop {<color>} --pf-c-button--m-control--disabled--BackgroundColor {@default `#f0f0f0`}\n * @cssprop {<length>} --pf-c-button--m-control--BorderRadius {@default `0`}\n * @cssprop {<length>} --pf-c-button--m-control--after--BorderWidth {@default `1px`}\n * @cssprop {<color>} --pf-c-button--m-control--after--BorderTopColor {@default `#f0f0f0`}\n * @cssprop {<color>} --pf-c-button--m-control--after--BorderRightColor {@default `#f0f0f0`}\n * @cssprop {<color>} --pf-c-button--m-control--after--BorderBottomColor {@default `#8a8d90`}\n * @cssprop {<color>} --pf-c-button--m-control--after--BorderLeftColor {@default `#f0f0f0`}\n * @cssprop {<color>} --pf-c-button--m-control--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-control--BackgroundColor {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-control--active--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-control--active--BackgroundColor {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-control--active--BorderBottomColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-button--m-control--active--after--BorderBottomWidth {@default `2px`}\n * @cssprop {<color>} --pf-c-button--m-control--focus--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-control--focus--BackgroundColor {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-control--focus--BorderBottomColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-button--m-control--focus--after--BorderBottomWidth {@default `2px`}\n * @cssprop {<color>} --pf-c-button--m-control--hover--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-control--hover--BackgroundColor {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-control--hover--BorderBottomColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-button--m-control--hover--after--BorderBottomWidth {@default `2px`}\n *\n * @cssprop {<color>} --pf-c-button--disabled--Color {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-button--disabled--BackgroundColor {@default `#d2d2d2`}\n * @cssprop {<color>} --pf-c-button--disabled--after--BorderColor {@default `transparent`}\n *\n * @cssprop {<color>} --pf-c-button--m-warning--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-warning--BackgroundColor {@default `#f0ab00`}\n * @cssprop {<color>} --pf-c-button--m-warning--active--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-warning--active--BackgroundColor {@default `#c58c00`}\n * @cssprop {<color>} --pf-c-button--m-warning--focus--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-warning--focus--BackgroundColor {@default `#c58c00`}\n * @cssprop {<color>} --pf-c-button--m-warning--hover--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-warning--hover--BackgroundColor {@default `#c58c00`}\n *\n * @cssprop {<color>} --pf-c-button--m-plain--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-plain--Color {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-button--m-plain--hover--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-plain--hover--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-plain--focus--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-plain--focus--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-plain--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-plain--active--Color {@default `#151515`}\n *\n * @cssprop {<color>} --pf-c-button--m-plain--disabled--Color {@default `#d2d2d2`}\n * @cssprop {<color>} --pf-c-button--m-plain--disabled--BackgroundColor {@default `transparent`}\n *\n * @attr {string} loading-label - ARIA label for the loading indicator {@default `'loading'`}\n *\n */\n@customElement('pf-button')\nexport class PfButton extends BaseButton {\n static readonly styles = [...BaseButton.styles, styles];\n\n /** Represents the state of a stateful button */\n @property({ type: Boolean, reflect: true }) loading = false;\n\n /** Applies plain styles */\n @property({ type: Boolean, reflect: true }) plain = false;\n\n /** Not as urgent as danger */\n @property({ type: Boolean, reflect: true }) warning = false;\n\n @property({ reflect: true }) size?: 'small'|'large';\n\n /** Icon set for the `icon` property */\n @property({ attribute: 'icon-set' }) iconSet?: string;\n\n @property({ type: Boolean, reflect: true }) danger = 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 protected override get hasIcon() {\n return !!this.icon || !!this.loading;\n }\n\n protected override renderDefaultIcon() {\n return html`\n <pf-icon\n icon=\"${ifDefined(this.icon)}\"\n set=\"${ifDefined(this.iconSet)}\"\n ?hidden=\"${!this.icon}\"></pf-icon>\n <pf-spinner\n ?hidden=\"${!this.loading}\"\n size=\"md\"\n aria-label=\"${this.getAttribute('loading-label') ?? 'loading'}\"></pf-spinner>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-button': PfButton;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"pf-button.js","sourceRoot":"","sources":["pf-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,yCAAyC,CAAC;AACjD,OAAO,+CAA+C,CAAC;;;AAYvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmIG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAGL,gDAAgD;QACJ,YAAO,GAAG,KAAK,CAAC;QAE5D,2BAA2B;QACiB,UAAK,GAAG,KAAK,CAAC;QAE1D,8BAA8B;QACc,YAAO,GAAG,KAAK,CAAC;QAOhB,WAAM,GAAG,KAAK,CAAC;QAE3D;;;;;;;;;WASG;QAC0B,YAAO,GAAkB,SAAS,CAAC;IAkBlE,CAAC;IAhBC,IAAuB,OAAO;QAC5B,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;IACvC,CAAC;IAEkB,iBAAiB;QAClC,OAAO,IAAI,CAAA;;kBAEG,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;iBACrB,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;qBACnB,CAAC,IAAI,CAAC,IAAI;;qBAEV,CAAC,IAAI,CAAC,OAAO;;wBAEV,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,IAAI,SAAS;KAClE,CAAC;IACJ,CAAC;;AA7Ce,eAAM,GAAG,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAGZ;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAiB;AAGhB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAe;AAGd;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAiB;AAE/B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAA0B;AAGjB;IAApC,QAAQ,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;yCAAkB;AAEV;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAgB;AAY9B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAoC;AA7BrD,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA+CpB;SA/CY,QAAQ","sourcesContent":["import { html } 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';\n\nimport { BaseButton } from './BaseButton.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\nimport '@patternfly/elements/pf-spinner/pf-spinner.js';\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 *\n * @summary Allows users to perform an action when triggered\n *\n * @cssprop {<length>} --pf-c-button--FontSize {@default `1rem`}\n * @cssprop --pf-c-button--FontWeight {@default `400`}\n * @cssprop {<number>} --pf-c-button--LineHeight {@default `1.5`}\n *\n * @cssprop {<length>} --pf-c-button--PaddingTop {@default `0.375rem`}\n * @cssprop {<length>} --pf-c-button--PaddingLeft {@default `1rem`}\n * @cssprop {<length>} --pf-c-button--PaddingBottom {@default `0.375rem`}\n * @cssprop {<length>} --pf-c-button--PaddingRight {@default `1rem`}\n *\n * @cssprop {<length>|<percentage>} --pf-c-button--BorderRadius {@default `3px`}\n * @cssprop {<color>} --pf-c-button--after--BorderColor {@default `transparent`}\n * @cssprop {<length>} --pf-c-button--after--BorderRadius {@default `3px`}\n * @cssprop {<length>} --pf-c-button--after--BorderWidth {@default `1px`}\n * @cssprop {<length>} --pf-c-button--active--after--BorderWidth {@default `2px`}\n * @cssprop {<length>} --pf-c-button--hover--after--BorderWidth {@default `2px`}\n * @cssprop {<length>} --pf-c-button--focus--after--BorderWidth {@default `2px`}\n *\n * @cssprop {<color>} --pf-c-button--m-primary--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-primary--BackgroundColor {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-primary--active--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-primary--active--BackgroundColor {@default `#004080`}\n * @cssprop {<color>} --pf-c-button--m-primary--focus--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-primary--focus--BackgroundColor {@default `#004080`}\n * @cssprop {<color>} --pf-c-button--m-primary--hover--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-primary--hover--BackgroundColor {@default `#004080`}\n *\n * @cssprop {<color>} --pf-c-button--m-secondary--Color {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-secondary--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--active--Color {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-secondary--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--active--BorderColor {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-secondary--focus--Color {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-secondary--focus--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--focus--BorderColor {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-secondary--hover--Color {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-secondary--hover--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--hover--BorderColor {@default `#06c`}\n *\n * @cssprop {<color>} --pf-c-button--m-tertiary--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--active--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--active--BorderColor {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--focus--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--focus--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--focus--BorderColor {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--hover--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--hover--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--hover--BorderColor {@default `#151515`}\n *\n * @cssprop {<color>} --pf-c-button--m-danger--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-danger--BackgroundColor {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-button--m-danger--active--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-danger--active--BackgroundColor {@default `#a30000`}\n * @cssprop {<color>} --pf-c-button--m-danger--focus--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-danger--focus--BackgroundColor {@default `#a30000`}\n * @cssprop {<color>} --pf-c-button--m-danger--hover--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-danger--hover--BackgroundColor {@default `#a30000`}\n *\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--Color {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--BorderColor {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--active--Color {@default `#a30000`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--active--BorderColor {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--focus--Color {@default `#a30000`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--focus--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--focus--BorderColor {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--hover--Color {@default `#a30000`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--hover--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--hover--BorderColor {@default `#c9190b`}\n *\n * @cssprop {<color>} --pf-c-button--m-control--disabled--BackgroundColor {@default `#f0f0f0`}\n * @cssprop {<length>} --pf-c-button--m-control--BorderRadius {@default `0`}\n * @cssprop {<length>} --pf-c-button--m-control--after--BorderWidth {@default `1px`}\n * @cssprop {<color>} --pf-c-button--m-control--after--BorderTopColor {@default `#f0f0f0`}\n * @cssprop {<color>} --pf-c-button--m-control--after--BorderRightColor {@default `#f0f0f0`}\n * @cssprop {<color>} --pf-c-button--m-control--after--BorderBottomColor {@default `#8a8d90`}\n * @cssprop {<color>} --pf-c-button--m-control--after--BorderLeftColor {@default `#f0f0f0`}\n * @cssprop {<color>} --pf-c-button--m-control--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-control--BackgroundColor {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-control--active--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-control--active--BackgroundColor {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-control--active--BorderBottomColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-button--m-control--active--after--BorderBottomWidth {@default `2px`}\n * @cssprop {<color>} --pf-c-button--m-control--focus--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-control--focus--BackgroundColor {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-control--focus--BorderBottomColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-button--m-control--focus--after--BorderBottomWidth {@default `2px`}\n * @cssprop {<color>} --pf-c-button--m-control--hover--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-control--hover--BackgroundColor {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-control--hover--BorderBottomColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-button--m-control--hover--after--BorderBottomWidth {@default `2px`}\n *\n * @cssprop {<color>} --pf-c-button--disabled--Color {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-button--disabled--BackgroundColor {@default `#d2d2d2`}\n * @cssprop {<color>} --pf-c-button--disabled--after--BorderColor {@default `transparent`}\n *\n * @cssprop {<color>} --pf-c-button--m-warning--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-warning--BackgroundColor {@default `#f0ab00`}\n * @cssprop {<color>} --pf-c-button--m-warning--active--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-warning--active--BackgroundColor {@default `#c58c00`}\n * @cssprop {<color>} --pf-c-button--m-warning--focus--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-warning--focus--BackgroundColor {@default `#c58c00`}\n * @cssprop {<color>} --pf-c-button--m-warning--hover--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-warning--hover--BackgroundColor {@default `#c58c00`}\n *\n * @cssprop {<color>} --pf-c-button--m-plain--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-plain--Color {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-button--m-plain--hover--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-plain--hover--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-plain--focus--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-plain--focus--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-plain--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-plain--active--Color {@default `#151515`}\n *\n * @cssprop {<color>} --pf-c-button--m-plain--disabled--Color {@default `#d2d2d2`}\n * @cssprop {<color>} --pf-c-button--m-plain--disabled--BackgroundColor {@default `transparent`}\n *\n * @attr {string} loading-label - ARIA label for the loading indicator {@default `'loading'`}\n *\n */\n@customElement('pf-button')\nexport class PfButton extends BaseButton {\n static readonly styles = [...BaseButton.styles, styles];\n\n /** Represents the state of a stateful button */\n @property({ type: Boolean, reflect: true }) loading = false;\n\n /** Applies plain styles */\n @property({ type: Boolean, reflect: true }) plain = false;\n\n /** Not as urgent as danger */\n @property({ type: Boolean, reflect: true }) warning = false;\n\n @property({ reflect: true }) size?: 'small' | 'large';\n\n /** Icon set for the `icon` property */\n @property({ attribute: 'icon-set' }) iconSet?: string;\n\n @property({ type: Boolean, reflect: true }) danger = 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 protected override get hasIcon() {\n return !!this.icon || !!this.loading;\n }\n\n protected override renderDefaultIcon() {\n return html`\n <pf-icon\n icon=\"${ifDefined(this.icon)}\"\n set=\"${ifDefined(this.iconSet)}\"\n ?hidden=\"${!this.icon}\"></pf-icon>\n <pf-spinner\n ?hidden=\"${!this.loading}\"\n size=\"md\"\n aria-label=\"${this.getAttribute('loading-label') ?? 'loading'}\"></pf-spinner>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-button': PfButton;\n }\n}\n"]}
|
package/pf-icon/BaseIcon.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseIcon.js","sourceRoot":"","sources":["BaseIcon.ts"],"names":[],"mappings":";;AAEA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,4CAA4C,CAAC;;;AAMpE,yEAAyE;AACzE,MAAM,GAAG,GAAG,MAAM,CAAC,mBAAmB,IAAI,MAAM,CAAC,qBAAqB,CAAC;AAEvE,uCAAuC;AACvC,MAAM,aAAc,SAAQ,UAAU;IACpC,YACE,QAAgB;IAChB,wDAAwD;IACjD,aAAoB;QAE3B,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,0BAA0B,QAAQ,EAAE,EAAE,CAAC,CAAC;QAF3D,kBAAa,GAAb,aAAa,CAAO;IAG7B,CAAC;CACF;AAED;;;;;;;GAOG;AACH,MAAM,OAAgB,QAAS,SAAQ,UAAU;IAAjD;;;QAoCE,eAAe;QACH,QAAG,GAAG,uBAAA,IAAI,gDAAO,CAAC,cAAc,CAAC;QAE7C,gBAAgB;QACa,SAAI,GAAG,EAAE,CAAC;QAKvC;;;;;WAKG;QACS,YAAO,
|
|
1
|
+
{"version":3,"file":"BaseIcon.js","sourceRoot":"","sources":["BaseIcon.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport style from './BaseIcon.css';\n\nexport type URLGetter = (set: string, icon: string) => URL;\n\n/** requestIdleCallback when available, requestAnimationFrame when not */\nconst ric = window.requestIdleCallback ?? window.requestAnimationFrame;\n\n/** Fired when an icon fails to load */\nclass IconLoadError extends ErrorEvent {\n constructor(\n pathname: string,\n /** The original error when importing the icon module */\n public originalError: Error\n ) {\n super('error', { message: `Could not load icon at ${pathname}` });\n }\n}\n\n/**\n * Icon component lazy-loads icons and allows custom icon sets\n *\n * @slot - Slotted content is used as a fallback in case the icon doesn't load\n * @fires load - Fired when an icon is loaded and rendered\n * @fires error - Fired when an icon fails to load\n * @csspart fallback - Container for the fallback (i.e. slotted) content\n */\nexport abstract class BaseIcon extends LitElement {\n public static readonly styles = [style];\n\n public static addIconSet(setName: string, getter: typeof BaseIcon['getIconUrl']) {\n if (typeof getter !== 'function') {\n Logger.warn(`[${this.name}.addIconSet(setName, getter)]: getter must be a function`);\n } else {\n this.getters.set(setName, getter);\n for (const instance of this.instances) {\n instance.load();\n }\n }\n }\n\n public static getIconUrl: URLGetter = (set: string, icon: string) =>\n new URL(`./icons/${set}/${icon}.js`, import.meta.url);\n\n private static onIntersect: IntersectionObserverCallback = records =>\n records.forEach(({ isIntersecting, target }) => {\n const icon = target as BaseIcon;\n icon.#intersecting = isIntersecting;\n ric(() => {\n if (icon.#intersecting) {\n icon.load();\n }\n });\n });\n\n private static io = new IntersectionObserver(this.onIntersect);\n\n private static getters = new Map<string, URLGetter>();\n\n private static instances = new Set<BaseIcon>();\n\n declare public static defaultIconSet: string;\n\n /** Icon set */\n @property() set = this.#class.defaultIconSet;\n\n /** Icon name */\n @property({ reflect: true }) icon = '';\n\n /** Size of the icon */\n abstract size: string;\n\n /**\n * Controls how eager the element will be to load the icon data\n * - `eager`: eagerly load the icon, blocking the main thread\n * - `idle`: wait for the browser to attain an idle state before loading\n * - `lazy` (default): wait for the element to enter the viewport before loading\n */\n @property() loading?: 'idle' | 'lazy' | 'eager' = 'lazy';\n\n /** Icon content. Any value that lit can render */\n @state() private content?: unknown;\n\n #intersecting = false;\n\n #logger = new Logger(this);\n\n get #class(): typeof BaseIcon {\n return this.constructor as typeof BaseIcon;\n }\n\n #lazyLoad() {\n this.#class.io.observe(this);\n if (this.#intersecting) {\n this.load();\n }\n }\n\n #iconChanged() {\n switch (this.loading) {\n case 'idle': return void ric(() => this.load());\n case 'lazy': return void this.#lazyLoad();\n case 'eager': return void this.load();\n }\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.#class.instances.add(this);\n }\n\n willUpdate(changed: PropertyValues<this>) {\n if (changed.has('icon')) {\n this.#iconChanged();\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.#class.instances.delete(this);\n }\n\n render() {\n const content = this.content ?? ''; /* eslint-disable indent */\n return html`\n <div id=\"container\" aria-hidden=\"true\">${content\n }<span part=\"fallback\" ?hidden=${!!content}>\n <slot></slot>\n </span>\n </div>\n `;/* eslint-enable indent */\n }\n\n protected async load() {\n const { set, icon, } = this;\n const getter = this.#class.getters.get(set) ?? this.#class.getIconUrl;\n let pathname = 'UNKNOWN ICON';\n if (set && icon) {\n try {\n ({ pathname } = getter(set, icon));\n const mod = await import(pathname);\n this.content = mod.default instanceof Node ? mod.default.cloneNode(true) : mod.default;\n await this.updateComplete;\n this.dispatchEvent(new Event('load', { bubbles: true }));\n } catch (error: unknown) {\n const event = new IconLoadError(pathname, error as Error);\n this.#logger.error((error as IconLoadError).message);\n this.dispatchEvent(event);\n }\n }\n }\n}\n"]}
|
package/pf-icon/pf-icon.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pf-icon.js","sourceRoot":"","sources":["pf-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAItD;;;;;;;;GAQG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,QAAQ;IAA7B;;QAKL,uBAAuB;QACM,SAAI,
|
|
1
|
+
{"version":3,"file":"pf-icon.js","sourceRoot":"","sources":["pf-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAItD;;;;;;;;GAQG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,QAAQ;IAA7B;;QAKL,uBAAuB;QACM,SAAI,GAA8B,IAAI,CAAC;IACtE,CAAC;;AANwB,aAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAE9C,qBAAc,GAAG,KAAK,CAAC;AAGR;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAAwC;AANzD,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAOlB;SAPY,MAAM","sourcesContent":["import { BaseIcon } from './BaseIcon.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport style from './pf-icon.css';\n\n/**\n * An icon component is a container that allows for icons of varying dimensions to\n * seamlessly replace each other without shifting surrounding content.\n *\n * @slot - Slotted content is used as a fallback in case the icon doesn't load\n * @fires load - Fired when an icon is loaded and rendered\n * @fires error - Fired when an icon fails to load\n * @csspart fallback - Container for the fallback (i.e. slotted) content\n */\n@customElement('pf-icon')\nexport class PfIcon extends BaseIcon {\n public static readonly styles = [...BaseIcon.styles, style];\n\n public static defaultIconSet = 'fas';\n\n /** Size of the icon */\n @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-icon': PfIcon;\n }\n}\n"]}
|
package/pf-panel/pf-panel.css
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
--pf-c-panel--before--BorderWidth: 0;
|
|
10
10
|
--pf-c-panel--before--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2);
|
|
11
11
|
--pf-c-panel--m-bordered--before--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
|
|
12
|
-
--pf-c-panel--m-raised--BoxShadow:
|
|
12
|
+
--pf-c-panel--m-raised--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));
|
|
13
13
|
--pf-c-panel--m-raised--ZIndex: var(--pf-global--ZIndex--sm, 200);
|
|
14
14
|
--pf-c-panel__header--PaddingTop: var(--pf-global--spacer--md, 1rem);
|
|
15
15
|
--pf-c-panel__header--PaddingRight: var(--pf-global--spacer--md, 1rem);
|
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
max-width: var(--pf-c-panel--MaxWidth);
|
|
37
37
|
background-color: var(--pf-c-panel--BackgroundColor);
|
|
38
38
|
box-shadow: var(--pf-c-panel--BoxShadow);
|
|
39
|
+
display: block;
|
|
39
40
|
}
|
|
40
41
|
|
|
41
42
|
:host([variant="bordered"])::before {
|
|
@@ -44,14 +45,21 @@
|
|
|
44
45
|
pointer-events: none;
|
|
45
46
|
content: "";
|
|
46
47
|
border:
|
|
47
|
-
|
|
48
|
-
var(--pf-c-panel--m-bordered--before--BorderWidth,
|
|
49
|
-
var(--pf-global--BorderWidth--sm, 1px)))
|
|
48
|
+
var(--pf-c-panel--m-bordered--before--BorderWidth, var(--pf-global--BorderWidth--sm, 1px))
|
|
50
49
|
solid
|
|
51
50
|
var(--pf-c-panel--before--BorderColor,
|
|
52
51
|
var(--pf-global--BorderColor--100, #d2d2d2));
|
|
53
52
|
}
|
|
54
53
|
|
|
54
|
+
:host([variant="raised"])::before {
|
|
55
|
+
position: absolute;
|
|
56
|
+
inset: 0;
|
|
57
|
+
pointer-events: none;
|
|
58
|
+
content: "";
|
|
59
|
+
box-shadow: var(--pf-c-panel--m-raised--BoxShadow, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));
|
|
60
|
+
z-index: var(--pf-c-panel--m-raised--ZIndex, var(--pf-global--ZIndex--sm, 200));
|
|
61
|
+
}
|
|
62
|
+
|
|
55
63
|
:host([variant="raised"]) {
|
|
56
64
|
--pf-c-panel--BoxShadow: var(--pf-c-panel--m-raised--BoxShadow,
|
|
57
65
|
var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)));
|
package/pf-panel/pf-panel.js
CHANGED
|
@@ -5,7 +5,7 @@ import { customElement } from 'lit/decorators/custom-element.js';
|
|
|
5
5
|
import { property } from 'lit/decorators/property.js';
|
|
6
6
|
import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
|
|
7
7
|
import { css } from "lit";
|
|
8
|
-
const styles = css `:host{--pf-c-panel--Width:auto;--pf-c-panel--MinWidth:auto;--pf-c-panel--MaxWidth:none;--pf-c-panel--ZIndex:auto;--pf-c-panel--BackgroundColor:var(--pf-global--BackgroundColor--100, #fff);--pf-c-panel--BoxShadow:none;--pf-c-panel--before--BorderWidth:0;--pf-c-panel--before--BorderColor:var(--pf-global--BorderColor--100, #d2d2d2);--pf-c-panel--m-bordered--before--BorderWidth:var(--pf-global--BorderWidth--sm, 1px);--pf-c-panel--m-raised--BoxShadow:
|
|
8
|
+
const styles = css `:host{--pf-c-panel--Width:auto;--pf-c-panel--MinWidth:auto;--pf-c-panel--MaxWidth:none;--pf-c-panel--ZIndex:auto;--pf-c-panel--BackgroundColor:var(--pf-global--BackgroundColor--100, #fff);--pf-c-panel--BoxShadow:none;--pf-c-panel--before--BorderWidth:0;--pf-c-panel--before--BorderColor:var(--pf-global--BorderColor--100, #d2d2d2);--pf-c-panel--m-bordered--before--BorderWidth:var(--pf-global--BorderWidth--sm, 1px);--pf-c-panel--m-raised--BoxShadow:var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));--pf-c-panel--m-raised--ZIndex:var(--pf-global--ZIndex--sm, 200);--pf-c-panel__header--PaddingTop:var(--pf-global--spacer--md, 1rem);--pf-c-panel__header--PaddingRight:var(--pf-global--spacer--md, 1rem);--pf-c-panel__header--PaddingBottom:var(--pf-global--spacer--md, 1rem);--pf-c-panel__header--PaddingLeft:var(--pf-global--spacer--md, 1rem);--pf-c-panel__main--MaxHeight:none;--pf-c-panel__main--Overflow:visible;--pf-c-panel__main-body--PaddingTop:var(--pf-global--spacer--md, 1rem);--pf-c-panel__main-body--PaddingRight:var(--pf-global--spacer--md, 1rem);--pf-c-panel__main-body--PaddingBottom:var(--pf-global--spacer--md, 1rem);--pf-c-panel__main-body--PaddingLeft:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--PaddingTop:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--PaddingRight:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--PaddingBottom:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--PaddingLeft:var(--pf-global--spacer--md, 1rem);--pf-c-panel__footer--BoxShadow:none;--pf-c-panel--m-scrollable__main--MaxHeight:18.75rem;--pf-c-panel--m-scrollable__main--Overflow:auto;--pf-c-panel--m-scrollable__footer--BoxShadow:0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);position:relative;z-index:var(--pf-c-panel--ZIndex);width:var(--pf-c-panel--Width);min-width:var(--pf-c-panel--MinWidth);max-width:var(--pf-c-panel--MaxWidth);background-color:var(--pf-c-panel--BackgroundColor);box-shadow:var(--pf-c-panel--BoxShadow);display:block}:host([variant=bordered])::before{position:absolute;inset:0;pointer-events:none;content:"";border:var(--pf-c-panel--m-bordered--before--BorderWidth,var(--pf-global--BorderWidth--sm,1px)) solid var(--pf-c-panel--before--BorderColor,var(--pf-global--BorderColor--100,#d2d2d2))}:host([variant=raised])::before{position:absolute;inset:0;pointer-events:none;content:"";box-shadow:var(--pf-c-panel--m-raised--BoxShadow,0 .25rem .5rem 0 rgba(3,3,3,.12),0 0 .25rem 0 rgba(3,3,3,.06));z-index:var(--pf-c-panel--m-raised--ZIndex,var(--pf-global--ZIndex--sm,200))}:host([variant=raised]){--pf-c-panel--BoxShadow:var(--pf-c-panel--m-raised--BoxShadow,\n var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)));--pf-c-panel--ZIndex:var(--pf-c-panel--m-raised--ZIndex,\n var(--pf-global--ZIndex--sm, 200))}:host([scrollable]){--pf-c-panel__main--MaxHeight:var(--pf-c-panel--m-scrollable__main--MaxHeight);--pf-c-panel__main--Overflow:var(--pf-c-panel--m-scrollable__main--Overflow);--pf-c-panel__footer--BoxShadow:var(--pf-c-panel--m-scrollable__footer--BoxShadow)}[hidden]{display:none!important}slot{display:block}slot:not([name]){max-height:var(--pf-c-panel__main--MaxHeight);overflow:var(--pf-c-panel__main--Overflow);padding:var(--pf-c-panel__main-body--PaddingTop,var(--pf-global--spacer--md,1rem)) var(--pf-c-panel__main-body--PaddingRight,var(--pf-global--spacer--md,1rem)) var(--pf-c-panel__main-body--PaddingBottom,var(--pf-global--spacer--md,1rem)) var(--pf-c-panel__main-body--PaddingLeft,var(--pf-global--spacer--md,1rem))}slot[name=header]{padding:var(--pf-c-panel__header--PaddingTop) var(--pf-c-panel__header--PaddingRight) var(--pf-c-panel__header--PaddingBottom) var(--pf-c-panel__header--PaddingLeft)}slot[name=footer]{padding:var(--pf-c-panel__footer--PaddingTop) var(--pf-c-panel__footer--PaddingRight) var(--pf-c-panel__footer--PaddingBottom) var(--pf-c-panel__footer--PaddingLeft);box-shadow:var(--pf-c-panel__footer--BoxShadow)}hr{--pf-c-divider--BorderWidth--base:var(--pf-global--BorderWidth--sm, 1px);--pf-c-divider--BorderColor--base:var(--pf-c-divider--BackgroundColor);--pf-c-divider--Height:var(--pf-c-divider--BorderWidth--base);--pf-c-divider--BackgroundColor:var(--pf-global--BorderColor--100, #d2d2d2);--pf-c-divider--after--BackgroundColor:var(--pf-c-divider--BorderColor--base);--pf-c-divider--after--FlexBasis:100%;--pf-c-divider--after--Inset:0%;--pf-c-divider--m-vertical--after--FlexBasis:100%;--pf-c-divider--m-horizontal--Display:flex;--pf-c-divider--m-horizontal--FlexDirection:row;--pf-c-divider--m-horizontal--after--Height:var(--pf-c-divider--Height);--pf-c-divider--m-horizontal--after--Width:auto;--pf-c-divider--m-vertical--Display:inline-flex;--pf-c-divider--m-vertical--FlexDirection:column;--pf-c-divider--m-vertical--after--Height:auto;--pf-c-divider--m-vertical--after--Width:var(--pf-c-divider--BorderWidth--base);--pf-hidden-visible--visible--Display:var(--pf-c-divider--Display);--pf-c-divider--Display:var(--pf-c-divider--m-horizontal--Display);--pf-c-divider--FlexDirection:var(--pf-c-divider--m-horizontal--FlexDirection);--pf-c-divider--after--Width:var(--pf-c-divider--m-horizontal--after--Width);--pf-c-divider--after--Height:var(--pf-c-divider--m-horizontal--after--Height);width:100%;height:auto;display:var(--pf-c-divider--Display);flex-direction:var(--pf-c-divider--FlexDirection);align-items:center;align-self:stretch;flex-shrink:0;justify-content:center;border:0}hr::after{align-self:stretch;width:var(--pf-c-divider--after--Width);height:var(--pf-c-divider--after--Height);content:"";background-color:var(--pf-c-divider--after--BackgroundColor);justify-self:center;padding:0;margin:0;flex-basis:calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2)}::slotted(:is(p,h1,h2,h3,h4,h5,h6):first-of-type){margin-block-start:0}::slotted(:is(p,h1,h2,h3,h4,h5,h6):last-of-type){margin-block-end:0}::slotted(:is(p,h1,h2,h3,h4,h5,h6):is(:last-of-type,:first-of-type)){margin-block:0}`;
|
|
9
9
|
/**
|
|
10
10
|
* The panel component is a container that supports flexible content layouts. It can
|
|
11
11
|
* be used to house other components such as fields, forms, videos, buttons, and more.
|
package/pf-panel/pf-panel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pf-panel.js","sourceRoot":"","sources":["pf-panel.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;;;AAIrF;;;;;;;;;GASG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAGuC,eAAU,GAAG,KAAK,CAAC;QAI/D,yBAAS,IAAI,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAC;IAY9D,CAAC;IAVC,MAAM;QACJ,MAAM,SAAS,GAAG,uBAAA,IAAI,sBAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QACnD,MAAM,SAAS,GAAG,uBAAA,IAAI,sBAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QACnD,OAAO,IAAI,CAAA;mDACoC,CAAC,SAAS;yCACpB,CAAC,SAAS;;mDAEA,CAAC,SAAS;KACxD,CAAC;IACJ,CAAC;;;AAjBe,cAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAEU;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAoB;AAElC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"pf-panel.js","sourceRoot":"","sources":["pf-panel.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;;;AAIrF;;;;;;;;;GASG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAGuC,eAAU,GAAG,KAAK,CAAC;QAI/D,yBAAS,IAAI,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAC;IAY9D,CAAC;IAVC,MAAM;QACJ,MAAM,SAAS,GAAG,uBAAA,IAAI,sBAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QACnD,MAAM,SAAS,GAAG,uBAAA,IAAI,sBAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QACnD,OAAO,IAAI,CAAA;mDACoC,CAAC,SAAS;yCACpB,CAAC,SAAS;;mDAEA,CAAC,SAAS;KACxD,CAAC;IACJ,CAAC;;;AAjBe,cAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAEU;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAoB;AAElC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAiC;AALlD,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAmBnB;SAnBY,OAAO","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport styles from './pf-panel.css';\n\n/**\n * The panel component is a container that supports flexible content layouts. It can\n * be used to house other components such as fields, forms, videos, buttons, and more.\n * The panel should not be confused with the [drawer](https://www.patternfly.org/v4/components/drawer/design-guidelines/)\n * component, which allows you to surface information via a collapsable container.\n *\n * @slot header - Place header content here\n * @slot - Place main content here\n * @slot footer - Place footer content here\n */\n@customElement('pf-panel')\nexport class PfPanel extends LitElement {\n static readonly styles = [styles];\n\n @property({ type: Boolean, reflect: true }) scrollable = false;\n\n @property({ reflect: true }) variant?: 'raised' | 'bordered';\n\n #slots = new SlotController(this, 'header', null, 'footer');\n\n render() {\n const hasHeader = this.#slots.hasSlotted('header');\n const hasFooter = this.#slots.hasSlotted('footer');\n return html`\n <slot name=\"header\" role=\"region\" ?hidden=\"${!hasHeader}\"></slot>\n <hr role=\"presentation\" ?hidden=\"${!hasHeader}\">\n <slot></slot>\n <slot name=\"footer\" role=\"region\" ?hidden=\"${!hasFooter}\"></slot>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-panel': PfPanel;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pf-progress-step.js","sourceRoot":"","sources":["pf-progress-step.ts"],"names":[],"mappings":";;;AAGA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;AACrF,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;;;AAI/F,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC;IACnC,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE;IACjC,MAAM,EAAE,EAAE,IAAI,EAAE,oBAAoB,EAAE;IACtC,OAAO,EAAE,EAAE,IAAI,EAAE,sBAAsB,EAAE;IACzC,IAAI,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,GAAG,EAAE,YAAY,EAAE;CACpD,CAAC,CAAC,CAAC;AAEJ;;;;;;;;GAQG;AAEI,IAAM,cAAc,sBAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAiBL,yDAAyD;QACb,YAAO,GAAG,KAAK,CAAC;QAE5D,gCAAS,IAAI,cAAc,CAAC,IAAI,EAAE,OAAO,EAAE,aAAa,CAAC,EAAC;QAE1D,oCAAa,IAAI,mBAAmB,CAAC,IAAI,EAAE;YACzC,IAAI,EAAE,UAAU;SACjB,CAAC,EAAC;IA6BL,CAAC;IA3BC,MAAM;QACJ,MAAM,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,uBAAA,IAAI,6BAAO,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;QACnF,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,SAAS,CAAC,EAAE,IAAI,CAAC;QACrE,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,IAAI,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,SAAS,CAAC,EAAE,GAAG,CAAC;QACtE,MAAM,EAAE,aAAa,EAAE,GAAI,IAAI,CAAC,WAAqC,CAAC;QACtE,MAAM,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,CAAoB,aAAa,CAAC,IAAI,EAAE,CAAC;QACjF,OAAO,IAAI,CAAA;mCACoB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;;8BAE1B,CAAC,IAAI;4BACP,SAAS,CAAC,IAAI,CAAC;2BAChB,SAAS,CAAC,GAAG,CAAC;;;8BAGX,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;;6DAEU,CAAC,cAAc,KAAK,IAAI,CAAC,WAAW;;KAE5F,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,KAAK,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,CAAC;QACzB,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YAC1B,uBAAA,IAAI,iCAAW,CAAC,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SACtD;IACH,CAAC;;;AAnDgB,4BAAa,GAAG,qBAAqB,CAAC;AAEvC,qBAAM,GAAG,CAAC,KAAK,CAAC,CAAC;AAGrB;IAAX,QAAQ,EAAE;mDAAsB;AAGrB;IAAX,QAAQ,EAAE;4CAAe;AAGW;IAApC,QAAQ,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;+CAAkB;AAGzB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+
|
|
1
|
+
{"version":3,"file":"pf-progress-step.js","sourceRoot":"","sources":["pf-progress-step.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\nimport type { PfProgressStepper } from './pf-progress-stepper.js';\n\nimport { LitElement, html } 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 { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport style from './pf-progress-step.css';\n\nconst ICONS = new Map(Object.entries({\n success: { icon: 'circle-check' },\n danger: { icon: 'circle-exclamation' },\n warning: { icon: 'triangle-exclamation' },\n info: { icon: 'resources-full', set: 'patternfly' },\n}));\n\n/**\n * @slot -\n * Short description of the current step.\n * @slot description\n * Longer description of the current step.\n * @slot icon\n * Overrides the icon property\n *\n */\n@customElement('pf-progress-step')\nexport class PfProgressStep extends LitElement {\n protected static parentTagName = 'pf-progress-stepper';\n\n static readonly styles = [style];\n\n /** Optional extended description of the step */\n @property() description?: string;\n\n /** Step Icon */\n @property() icon?: string;\n\n /** Step icon set */\n @property({ attribute: 'icon-set' }) iconSet?: string;\n\n /** Describes the state of the current item */\n @property({ reflect: true }) variant?: 'pending' | 'info' | 'success' | 'warning' | 'danger';\n\n /** Indicates if this item is the current active item. */\n @property({ type: Boolean, reflect: true }) current = false;\n\n #slots = new SlotController(this, 'title', 'description');\n\n #internals = new InternalsController(this, {\n role: 'listitem',\n });\n\n render() {\n const hasDescription = !!this.description ?? this.#slots.hasSlotted('description');\n const icon = this.icon ?? ICONS.get(this.variant ?? 'default')?.icon;\n const set = this.iconSet ?? ICONS.get(this.variant ?? 'default')?.set;\n const { parentTagName } = (this.constructor as typeof PfProgressStep);\n const { compact = false } = this.closest<PfProgressStepper>(parentTagName) ?? {};\n return html`\n <div id=\"connector\" class=\"${classMap({ compact })}\">\n <slot id=\"icon\" name=\"icon\">\n <pf-icon ?hidden=\"${!icon}\"\n icon=\"${ifDefined(icon)}\"\n set=\"${ifDefined(set)}\"></pf-icon>\n </slot>\n </div>\n <div id=\"main\" class=\"${classMap({ compact })}\">\n <slot id=\"title\"></slot>\n <slot id=\"description\" name=\"description\" ?hidden=\"${!hasDescription}\">${this.description}</slot>\n </div>\n `;\n }\n\n updated(changed: PropertyValues<this>) {\n super.updated?.(changed);\n if (changed.has('current')) {\n this.#internals.ariaCurrent = String(!!this.current);\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-progress-step': PfProgressStep;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseSpinner.js","sourceRoot":"","sources":["BaseSpinner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAWtD;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,OAAgB,WAAY,SAAQ,UAAU;IAApD;;QAGE,mCAAmC;QACN,SAAI,GAAgB,IAAI,CAAC;IAYxD,CAAC;IAPU,MAAM;QACb,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAde,kBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAGL;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAA0B;AAGzB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"BaseSpinner.js","sourceRoot":"","sources":["BaseSpinner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAWtD;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,OAAgB,WAAY,SAAQ,UAAU;IAApD;;QAGE,mCAAmC;QACN,SAAI,GAAgB,IAAI,CAAC;IAYxD,CAAC;IAPU,MAAM;QACb,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAde,kBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAGL;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAA0B;AAGzB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkE","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\n\nimport styles from './BaseSpinner.css';\n\nexport type SpinnerSize = (\n | 'sm'\n | 'md'\n | 'lg'\n | 'xl'\n);\n\n/**\n * Base spinner class\n *\n * @cssprop {<length>} --pf-c-spinner--diameter {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Width {@default `3.375rem`}\n * @cssprop {<length>} --pf-c-spinner--Height {@default `3.375rem`}\n * @cssprop {<color>} --pf-c-spinner--Color {@default `#06c`}\n * @cssprop {<length>} --pf-c-spinner--m-sm--diameter {@default `0.625rem`}\n * @cssprop {<length>} --pf-c-spinner--m-md--diameter {@default `1.125rem`}\n * @cssprop {<length>} --pf-c-spinner--m-lg--diameter {@default `1.5rem`}\n * @cssprop {<length>} --pf-c-spinner--m-xl--diameter {@default `3.375rem`}\n * @cssprop {<time>} --pf-c-spinner--AnimationDuration {@default `1.4s`}\n * @cssprop {<string>} --pf-c-spinner--AnimationTimingFunction {@default `linear`}\n * @cssprop {<number>} --pf-c-spinner--stroke-width {@default `10`}\n * @cssprop {<color>} --pf-c-spinner__path--Stroke {@default `#06c`}\n * @cssprop {<number>} --pf-c-spinner__path--StrokeWidth {@default `10`}\n * @cssprop {<string>} --pf-c-spinner__path--AnimationTimingFunction {@default `ease-in-out`}\n */\n\nexport abstract class BaseSpinner extends LitElement {\n static readonly styles = [styles];\n\n /** Preset sizes for the spinner */\n @property({ reflect: true }) size: SpinnerSize = 'xl';\n\n /** Custom diameter of spinner set as CSS variable */\n @property({ reflect: true }) diameter?: `${string}${'px' | '%' | 'rem' | 'em' | 'fr' | 'pt'}`;\n\n override render() {\n return html`\n <svg role=\"progressbar\" viewBox=\"0 0 100 100\">\n <circle cx=\"50\" cy=\"50\" r=\"45\" fill=\"none\" />\n </svg>\n `;\n }\n}\n"]}
|
package/pf-switch/pf-switch.d.ts
CHANGED
|
@@ -4,6 +4,8 @@ import { BaseSwitch } from './BaseSwitch.js';
|
|
|
4
4
|
* checkboxes can often be used interchangeably, but the switch provides a more
|
|
5
5
|
* explicit, visible representation on a setting.
|
|
6
6
|
*
|
|
7
|
+
* @fires {Event} change - Fires when the switch selection changes.
|
|
8
|
+
*
|
|
7
9
|
* @cssprop --pf-c-switch--FontSize {@default `1rem`}
|
|
8
10
|
* @cssprop {<length>} --pf-c-switch--ColumnGap {@default `1rem`}
|
|
9
11
|
* @cssprop --pf-c-switch__toggle-icon--FontSize {@default `calc(1rem * .625)`}
|
package/pf-switch/pf-switch.js
CHANGED
|
@@ -8,6 +8,8 @@ const styles = css `:host([checked]) #container{color:var(--pf-c-switch__input--
|
|
|
8
8
|
* checkboxes can often be used interchangeably, but the switch provides a more
|
|
9
9
|
* explicit, visible representation on a setting.
|
|
10
10
|
*
|
|
11
|
+
* @fires {Event} change - Fires when the switch selection changes.
|
|
12
|
+
*
|
|
11
13
|
* @cssprop --pf-c-switch--FontSize {@default `1rem`}
|
|
12
14
|
* @cssprop {<length>} --pf-c-switch--ColumnGap {@default `1rem`}
|
|
13
15
|
* @cssprop --pf-c-switch__toggle-icon--FontSize {@default `calc(1rem * .625)`}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pf-switch.js","sourceRoot":"","sources":["pf-switch.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;;AAG7C
|
|
1
|
+
{"version":3,"file":"pf-switch.js","sourceRoot":"","sources":["pf-switch.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;;;AAG7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAGI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;;AACtB,eAAM,GAAG,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAD7C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAEpB;SAFY,QAAQ","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\n\nimport { BaseSwitch } from './BaseSwitch.js';\nimport styles from './pf-switch.css';\n\n/**\n * A switch toggles the state of a setting (between on and off). Switches and\n * checkboxes can often be used interchangeably, but the switch provides a more\n * explicit, visible representation on a setting.\n *\n * @fires {Event} change - Fires when the switch selection changes.\n *\n * @cssprop --pf-c-switch--FontSize {@default `1rem`}\n * @cssprop {<length>} --pf-c-switch--ColumnGap {@default `1rem`}\n * @cssprop --pf-c-switch__toggle-icon--FontSize {@default `calc(1rem * .625)`}\n * @cssprop {<color>} --pf-c-switch__toggle-icon--Color {@default `#fff`}\n * @cssprop {<length>} --pf-c-switch__toggle-icon--Left {@default `1rem`}\n * @cssprop {<length>} --pf-c-switch__toggle-icon--Offset {@default `0.125rem`}\n * @cssprop {<number>} --pf-c-switch--LineHeight {@default `1.5`}\n * @cssprop {<length>} --pf-c-switch--Height {@default `auto`}\n * @cssprop {<color>} --pf-c-switch__input--checked__toggle--BackgroundColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-switch__input--checked__toggle--before--TranslateX {@default `calc(100% + 0.125rem)`}\n * @cssprop {<color>} --pf-c-switch__input--checked__label--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-switch__input--not-checked__label--Color {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-switch__input--disabled__label--Color {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-switch__input--disabled__toggle--BackgroundColor {@default `#d2d2d2`}\n * @cssprop {<color>} --pf-c-switch__input--disabled__toggle--before--BackgroundColor {@default `#f5f5f5`}\n * @cssprop {<length>} --pf-c-switch__input--focus__toggle--OutlineWidth {@default `2px`}\n * @cssprop {<length>} --pf-c-switch__input--focus__toggle--OutlineOffset {@default `0.5rem`}\n * @cssprop {<color>} --pf-c-switch__input--focus__toggle--OutlineColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-switch__toggle--Height {@default `calc(1rem * 1.5)`}\n * @cssprop {<color>} --pf-c-switch__toggle--BackgroundColor {@default `#8a8d90`}\n * @cssprop {<length>} --pf-c-switch__toggle--BorderRadius {@default `calc(1rem * 1.5)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Width {@default `calc(1rem - 0.125rem)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Height {@default `calc(1rem - 0.125rem)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Top {@default calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--Left {@default `calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)`}\n * @cssprop {<color>} --pf-c-switch__toggle--before--BackgroundColor {@default `#fff`}\n * @cssprop {<length>} --pf-c-switch__toggle--before--BorderRadius {@default `30em`}\n * @cssprop --pf-c-switch__toggle--before--BoxShadow {@default `0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)`}\n * @cssprop --pf-c-switch__toggle--before--Transition {@default `transform .25s ease 0s`}\n * @cssprop {<length>} --pf-c-switch__toggle--Width {@default `calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem))`}\n */\n\n@customElement('pf-switch')\nexport class PfSwitch extends BaseSwitch {\n static readonly styles = [...BaseSwitch.styles, styles];\n}\n\n declare global {\n interface HTMLElementTagNameMap {\n 'pf-switch': PfSwitch;\n }\n}\n"]}
|
package/pf-tabs/BaseTabs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseTabs.js","sourceRoot":"","sources":["BaseTabs.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\n\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\n\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\nimport { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { BaseTab, TabExpandEvent } from './BaseTab.js';\nimport { BaseTabPanel } from './BaseTabPanel.js';\n\nimport styles from './BaseTabs.css';\n\n/**\n * BaseTabs\n *\n * @attr [label-scroll-left=\"Scroll left\"] - accessible label for the tab panel's scroll left button.\n * @attr [label-scroll-right=\"Scroll right\"] - accessible label for the tab panel's scroll right button.\n *\n */\nexport abstract class BaseTabs extends LitElement {\n static readonly styles = [styles];\n\n static isTab(element: BaseTab): element is BaseTab {\n return element instanceof BaseTab;\n }\n\n static isPanel(element: BaseTabPanel): element is BaseTabPanel {\n return element instanceof BaseTabPanel;\n }\n\n /** Time in milliseconds to debounce between scroll events and updating scroll button state */\n protected static readonly scrollTimeoutDelay: number = 0;\n /** Icon name to use for the scroll left button */\n protected static readonly scrollIconLeft: string = 'angle-left';\n /** Icon name to use for the scroll right button */\n protected static readonly scrollIconRight: string = 'angle-right';\n /** Icon set to use for the scroll buttons */\n protected static readonly scrollIconSet: string = 'fas';\n\n static #instances = new Set<BaseTabs>();\n\n static {\n // on resize check for overflows to add or remove scroll buttons\n window.addEventListener('resize', () => {\n for (const instance of this.#instances) {\n instance.#overflow.onScroll();\n }\n }, { capture: false });\n }\n\n @queryAssignedElements({ slot: 'tab' }) private tabs!: BaseTab[];\n\n @queryAssignedElements() private panels!: BaseTabPanel[];\n\n @query('[part=\"tabs\"]') private tabList!: HTMLElement;\n\n #tabindex = new RovingTabindexController(this);\n\n #overflow = new OverflowController(this);\n\n #logger = new Logger(this);\n\n #_allTabs: BaseTab[] = [];\n\n #_allPanels: BaseTabPanel[] = [];\n\n #activeIndex = 0;\n\n id: string = this.id || getRandomId(this.localName);\n\n /**\n * Tab activation\n * Tabs can be either [automatic](https://w3c.github.io/aria-practices/examples/tabs/tabs-automatic.html) activated\n * or [manual](https://w3c.github.io/aria-practices/examples/tabs/tabs-manual.html)\n */\n @property({ reflect: true, type: Boolean }) manual = false;\n\n @property({ attribute: false })\n get activeIndex() {\n return this.#activeIndex;\n }\n\n set activeIndex(index: number) {\n const oldIndex = this.activeIndex;\n const tab = this.#allTabs[index];\n if (tab) {\n if (tab.disabled) {\n this.#logger.warn(`Disabled tabs can not be active, setting first focusable tab to active`);\n this.#tabindex.updateActiveItem(this.#firstFocusable);\n index = this.#activeItemIndex;\n } else if (!tab.active) {\n // if the activeIndex was set through the CLI e.g.`$0.activeIndex = 2`\n tab.active = true;\n return;\n }\n }\n\n if (index === -1) {\n this.#logger.warn(`No active tab found, setting first focusable tab to active`);\n const first = this.#tabindex.firstItem as BaseTab;\n this.#tabindex.updateActiveItem(first);\n index = this.#activeItemIndex;\n }\n this.#activeIndex = index;\n this.requestUpdate('activeIndex', oldIndex);\n\n this.#allPanels[this.#activeIndex].hidden = false;\n // close all tabs that are not the activeIndex\n this.#deactivateExcept(this.#activeIndex);\n }\n\n get #activeTab() {\n const [tab] = this.#_allTabs.filter(tab => tab.active);\n return tab;\n }\n\n get #allTabs() {\n return this.#_allTabs;\n }\n\n set #allTabs(tabs: BaseTab[]) {\n this.#_allTabs = tabs.filter(tab => (this.constructor as typeof BaseTabs).isTab(tab));\n }\n\n get #allPanels() {\n return this.#_allPanels;\n }\n\n set #allPanels(panels: BaseTabPanel[]) {\n this.#_allPanels = panels.filter(panel => (this.constructor as typeof BaseTabs).isPanel(panel));\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('expand', this.#onTabExpand);\n this.addEventListener('keydown', this.#onKeydown);\n BaseTabs.#instances.add(this);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n BaseTabs.#instances.delete(this);\n }\n\n async firstUpdated() {\n this.tabList.addEventListener('scroll', this.#overflow.onScroll.bind(this));\n }\n\n override render() {\n const { scrollIconSet, scrollIconLeft, scrollIconRight } = this.constructor as typeof BaseTabs;\n return html`\n <div part=\"container\" class=\"${classMap({ overflow: this.#overflow.showScrollButtons })}\">\n <div part=\"tabs-container\">${!this.#overflow.showScrollButtons ? '' : html`\n <button id=\"previousTab\" tabindex=\"-1\"\n aria-label=\"${this.getAttribute('label-scroll-left') ?? 'Scroll left'}\"\n ?disabled=\"${!this.#overflow.overflowLeft}\"\n @click=\"${this.#scrollLeft}\">\n <pf-icon icon=\"${scrollIconLeft}\" set=\"${scrollIconSet}\" loading=\"eager\"></pf-icon>\n </button>`}\n <slot name=\"tab\"\n part=\"tabs\"\n role=\"tablist\"\n @slotchange=\"${this.#onSlotchange}\"></slot> ${!this.#overflow.showScrollButtons ? '' : html`\n <button id=\"nextTab\" tabindex=\"-1\"\n aria-label=\"${this.getAttribute('label-scroll-right') ?? 'Scroll right'}\"\n ?disabled=\"${!this.#overflow.overflowRight}\"\n @click=\"${this.#scrollRight}\">\n <pf-icon icon=\"${scrollIconRight}\" set=\"${scrollIconSet}\" loading=\"eager\"></pf-icon>\n </button>`}\n </div>\n <slot part=\"panels\" @slotchange=\"${this.#onSlotchange}\"></slot>\n </div>\n `;\n }\n\n #onSlotchange(event: { target: { name: string; }; }) {\n if (event.target.name === 'tab') {\n this.#allTabs = this.tabs;\n } else {\n this.#allPanels = this.panels;\n }\n\n if ((this.#allTabs.length === this.#allPanels.length) &&\n (this.#allTabs.length !== 0 || this.#allPanels.length !== 0)) {\n this.#updateAccessibility();\n this.#firstLastClasses();\n this.#tabindex.initItems(this.#allTabs);\n this.activeIndex = this.#allTabs.findIndex(tab => tab.active);\n this.#tabindex.updateActiveItem(this.#activeTab);\n this.#overflow.init(this.tabList, this.#allTabs);\n }\n }\n\n #updateAccessibility(): void {\n this.#allTabs.forEach((tab, index) => {\n const panel = this.#allPanels[index];\n if (!panel.hasAttribute('aria-labelledby')) {\n panel.setAttribute('aria-labelledby', tab.id);\n }\n tab.setAttribute('aria-controls', panel.id);\n });\n }\n\n #onTabExpand = (event: Event): void => {\n if (!(event instanceof TabExpandEvent) ||\n this.#allTabs.length === 0 || this.#allPanels.length === 0) {\n return;\n }\n\n const target = event as TabExpandEvent;\n if (target.active) {\n this.activeIndex = this.#allTabs.findIndex(tab => tab === target.tab);\n }\n };\n\n #deactivateExcept(index: number) {\n this.#allTabs.forEach((tab, i) => tab.active = i === index);\n this.#allPanels.forEach((panel, i) => panel.hidden = i !== index);\n }\n\n get #firstFocusable(): BaseTab {\n return this.#tabindex.firstItem as BaseTab;\n }\n\n get #lastFocusable(): BaseTab {\n return this.#tabindex.lastItem as BaseTab;\n }\n\n get #firstTab(): BaseTab {\n const [tab] = this.#allTabs;\n return tab;\n }\n\n get #lastTab(): BaseTab {\n return this.#allTabs.at(-1) as BaseTab;\n }\n\n get #activeItemIndex() {\n const { activeItem } = this.#tabindex;\n return this.#allTabs.findIndex(t => t === activeItem);\n }\n\n #activate(selectedTab: BaseTab): void {\n if (selectedTab.ariaDisabled !== 'true') {\n selectedTab.active = true;\n }\n }\n\n async #select(selectedTab: BaseTab): Promise<void> {\n if (!this.manual) {\n this.#activate(selectedTab);\n }\n }\n\n // RTI: will handle key events\n #onKeydown = (event: KeyboardEvent): void => {\n const foundTab = this.#allTabs.find(tab => tab === event.target);\n if (!foundTab) {\n return;\n }\n switch (event.key) {\n case 'ArrowUp':\n case 'ArrowLeft':\n event.preventDefault();\n this.#select(this.#tabindex.activeItem as BaseTab);\n break;\n\n case 'ArrowDown':\n case 'ArrowRight':\n event.preventDefault();\n this.#select(this.#tabindex.activeItem as BaseTab);\n break;\n\n case 'Home':\n event.preventDefault();\n this.#select(this.#firstFocusable);\n break;\n\n case 'End':\n event.preventDefault();\n this.#select(this.#lastFocusable);\n break;\n\n default:\n return;\n }\n };\n\n #firstLastClasses() {\n this.#firstTab.classList.add('first');\n this.#lastTab.classList.add('last');\n }\n\n #scrollLeft() {\n this.#overflow.scrollLeft();\n }\n\n #scrollRight() {\n this.#overflow.scrollRight();\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"BaseTabs.js","sourceRoot":"","sources":["BaseTabs.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\n\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\n\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\nimport { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { BaseTab, TabExpandEvent } from './BaseTab.js';\nimport { BaseTabPanel } from './BaseTabPanel.js';\n\nimport styles from './BaseTabs.css';\n\n/**\n * BaseTabs\n *\n * @attr [label-scroll-left=\"Scroll left\"] - accessible label for the tab panel's scroll left button.\n * @attr [label-scroll-right=\"Scroll right\"] - accessible label for the tab panel's scroll right button.\n *\n */\nexport abstract class BaseTabs extends LitElement {\n static readonly styles = [styles];\n\n static isTab(element: BaseTab): element is BaseTab {\n return element instanceof BaseTab;\n }\n\n static isPanel(element: BaseTabPanel): element is BaseTabPanel {\n return element instanceof BaseTabPanel;\n }\n\n /** Time in milliseconds to debounce between scroll events and updating scroll button state */\n protected static readonly scrollTimeoutDelay: number = 0;\n /** Icon name to use for the scroll left button */\n protected static readonly scrollIconLeft: string = 'angle-left';\n /** Icon name to use for the scroll right button */\n protected static readonly scrollIconRight: string = 'angle-right';\n /** Icon set to use for the scroll buttons */\n protected static readonly scrollIconSet: string = 'fas';\n\n static #instances = new Set<BaseTabs>();\n\n static {\n // on resize check for overflows to add or remove scroll buttons\n window.addEventListener('resize', () => {\n for (const instance of this.#instances) {\n instance.#overflow.onScroll();\n }\n }, { capture: false });\n }\n\n @queryAssignedElements({ slot: 'tab' }) private tabs!: BaseTab[];\n\n @queryAssignedElements() private panels!: BaseTabPanel[];\n\n @query('[part=\"tabs\"]') private tabList!: HTMLElement;\n\n #tabindex = new RovingTabindexController(this);\n\n #overflow = new OverflowController(this);\n\n #logger = new Logger(this);\n\n #_allTabs: BaseTab[] = [];\n\n #_allPanels: BaseTabPanel[] = [];\n\n #activeIndex = 0;\n\n id: string = this.id || getRandomId(this.localName);\n\n /**\n * Tab activation\n * Tabs can be either [automatic](https://w3c.github.io/aria-practices/examples/tabs/tabs-automatic.html) activated\n * or [manual](https://w3c.github.io/aria-practices/examples/tabs/tabs-manual.html)\n */\n @property({ reflect: true, type: Boolean }) manual = false;\n\n @property({ attribute: false })\n get activeIndex() {\n return this.#activeIndex;\n }\n\n set activeIndex(index: number) {\n const oldIndex = this.activeIndex;\n const tab = this.#allTabs[index];\n if (tab) {\n if (tab.disabled) {\n this.#logger.warn(`Disabled tabs can not be active, setting first focusable tab to active`);\n this.#tabindex.updateActiveItem(this.#firstFocusable);\n index = this.#activeItemIndex;\n } else if (!tab.active) {\n // if the activeIndex was set through the CLI e.g.`$0.activeIndex = 2`\n tab.active = true;\n return;\n }\n }\n\n if (index === -1) {\n this.#logger.warn(`No active tab found, setting first focusable tab to active`);\n const first = this.#tabindex.firstItem as BaseTab;\n this.#tabindex.updateActiveItem(first);\n index = this.#activeItemIndex;\n }\n this.#activeIndex = index;\n this.requestUpdate('activeIndex', oldIndex);\n\n this.#allPanels[this.#activeIndex].hidden = false;\n // close all tabs that are not the activeIndex\n this.#deactivateExcept(this.#activeIndex);\n }\n\n get #activeTab() {\n const [tab] = this.#_allTabs.filter(tab => tab.active);\n return tab;\n }\n\n get #allTabs() {\n return this.#_allTabs;\n }\n\n set #allTabs(tabs: BaseTab[]) {\n this.#_allTabs = tabs.filter(tab => (this.constructor as typeof BaseTabs).isTab(tab));\n }\n\n get #allPanels() {\n return this.#_allPanels;\n }\n\n set #allPanels(panels: BaseTabPanel[]) {\n this.#_allPanels = panels.filter(panel => (this.constructor as typeof BaseTabs).isPanel(panel));\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('expand', this.#onTabExpand);\n this.addEventListener('keydown', this.#onKeydown);\n BaseTabs.#instances.add(this);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n BaseTabs.#instances.delete(this);\n }\n\n async firstUpdated() {\n this.tabList.addEventListener('scroll', this.#overflow.onScroll.bind(this));\n }\n\n override render() {\n const { scrollIconSet, scrollIconLeft, scrollIconRight } = this.constructor as typeof BaseTabs;\n return html`\n <div part=\"container\" class=\"${classMap({ overflow: this.#overflow.showScrollButtons })}\">\n <div part=\"tabs-container\">${!this.#overflow.showScrollButtons ? '' : html`\n <button id=\"previousTab\" tabindex=\"-1\"\n aria-label=\"${this.getAttribute('label-scroll-left') ?? 'Scroll left'}\"\n ?disabled=\"${!this.#overflow.overflowLeft}\"\n @click=\"${this.#scrollLeft}\">\n <pf-icon icon=\"${scrollIconLeft}\" set=\"${scrollIconSet}\" loading=\"eager\"></pf-icon>\n </button>`}\n <slot name=\"tab\"\n part=\"tabs\"\n role=\"tablist\"\n @slotchange=\"${this.#onSlotchange}\"></slot> ${!this.#overflow.showScrollButtons ? '' : html`\n <button id=\"nextTab\" tabindex=\"-1\"\n aria-label=\"${this.getAttribute('label-scroll-right') ?? 'Scroll right'}\"\n ?disabled=\"${!this.#overflow.overflowRight}\"\n @click=\"${this.#scrollRight}\">\n <pf-icon icon=\"${scrollIconRight}\" set=\"${scrollIconSet}\" loading=\"eager\"></pf-icon>\n </button>`}\n </div>\n <slot part=\"panels\" @slotchange=\"${this.#onSlotchange}\"></slot>\n </div>\n `;\n }\n\n #onSlotchange(event: { target: { name: string } }) {\n if (event.target.name === 'tab') {\n this.#allTabs = this.tabs;\n } else {\n this.#allPanels = this.panels;\n }\n\n if ((this.#allTabs.length === this.#allPanels.length) &&\n (this.#allTabs.length !== 0 || this.#allPanels.length !== 0)) {\n this.#updateAccessibility();\n this.#firstLastClasses();\n this.#tabindex.initItems(this.#allTabs);\n this.activeIndex = this.#allTabs.findIndex(tab => tab.active);\n this.#tabindex.updateActiveItem(this.#activeTab);\n this.#overflow.init(this.tabList, this.#allTabs);\n }\n }\n\n #updateAccessibility(): void {\n this.#allTabs.forEach((tab, index) => {\n const panel = this.#allPanels[index];\n if (!panel.hasAttribute('aria-labelledby')) {\n panel.setAttribute('aria-labelledby', tab.id);\n }\n tab.setAttribute('aria-controls', panel.id);\n });\n }\n\n #onTabExpand = (event: Event): void => {\n if (!(event instanceof TabExpandEvent) ||\n this.#allTabs.length === 0 || this.#allPanels.length === 0) {\n return;\n }\n\n const target = event as TabExpandEvent;\n if (target.active) {\n this.activeIndex = this.#allTabs.findIndex(tab => tab === target.tab);\n }\n };\n\n #deactivateExcept(index: number) {\n this.#allTabs.forEach((tab, i) => tab.active = i === index);\n this.#allPanels.forEach((panel, i) => panel.hidden = i !== index);\n }\n\n get #firstFocusable(): BaseTab {\n return this.#tabindex.firstItem as BaseTab;\n }\n\n get #lastFocusable(): BaseTab {\n return this.#tabindex.lastItem as BaseTab;\n }\n\n get #firstTab(): BaseTab {\n const [tab] = this.#allTabs;\n return tab;\n }\n\n get #lastTab(): BaseTab {\n return this.#allTabs.at(-1) as BaseTab;\n }\n\n get #activeItemIndex() {\n const { activeItem } = this.#tabindex;\n return this.#allTabs.findIndex(t => t === activeItem);\n }\n\n #activate(selectedTab: BaseTab): void {\n if (selectedTab.ariaDisabled !== 'true') {\n selectedTab.active = true;\n }\n }\n\n async #select(selectedTab: BaseTab): Promise<void> {\n if (!this.manual) {\n this.#activate(selectedTab);\n }\n }\n\n // RTI: will handle key events\n #onKeydown = (event: KeyboardEvent): void => {\n const foundTab = this.#allTabs.find(tab => tab === event.target);\n if (!foundTab) {\n return;\n }\n switch (event.key) {\n case 'ArrowUp':\n case 'ArrowLeft':\n event.preventDefault();\n this.#select(this.#tabindex.activeItem as BaseTab);\n break;\n\n case 'ArrowDown':\n case 'ArrowRight':\n event.preventDefault();\n this.#select(this.#tabindex.activeItem as BaseTab);\n break;\n\n case 'Home':\n event.preventDefault();\n this.#select(this.#firstFocusable);\n break;\n\n case 'End':\n event.preventDefault();\n this.#select(this.#lastFocusable);\n break;\n\n default:\n return;\n }\n };\n\n #firstLastClasses() {\n this.#firstTab.classList.add('first');\n this.#lastTab.classList.add('last');\n }\n\n #scrollLeft() {\n this.#overflow.scrollLeft();\n }\n\n #scrollRight() {\n this.#overflow.scrollRight();\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseTooltip.js","sourceRoot":"","sources":["BaseTooltip.ts"],"names":[],"mappings":";;AAEA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,6DAA6D,CAAC;;;AAIpG,MAAM,WAAW,GAAG,CAAC,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,CAAC,CAAC;AAC9D,MAAM,UAAU,GAAG,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC;AAEtD,MAAM,OAAgB,WAAY,SAAQ,UAAU;IAApD;;QAQE,6BAAS,IAAI,qBAAqB,CAAC,IAAI,EAAE;YACvC,KAAK,EAAE,IAAI;YACX,OAAO,EAAE,GAAmC,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,UAAU,CAAC;SAC1F,CAAC,EAAC;IAqCL,CAAC;IAnCU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAClE,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACnE,CAAC;IAED,KAAK,CAAC,IAAI;QACR,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;QAChC,MAAM,MAAM,GACR,CAAC,SAAS,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE;YACtC,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC;QACxC,MAAM,uBAAA,IAAI,0BAAO,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;IAChD,CAAC;IAED,KAAK,CAAC,IAAI;QACR,MAAM,uBAAA,IAAI,0BAAO,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC;IAEQ,MAAM;QACb,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,uBAAA,IAAI,0BAAO,CAAC;QAExD,OAAO,IAAI,CAAA;;oBAEK,QAAQ,CAAC,MAAM,CAAC;iBACnB,QAAQ,CAAC,EAAE,IAAI;YACJ,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM;YAClB,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC;;;;6BAI1B,MAAM,CAAC,CAAC,IAAI,
|
|
1
|
+
{"version":3,"file":"BaseTooltip.js","sourceRoot":"","sources":["BaseTooltip.ts"],"names":[],"mappings":";;AAEA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,6DAA6D,CAAC;;;AAIpG,MAAM,WAAW,GAAG,CAAC,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,CAAC,CAAC;AAC9D,MAAM,UAAU,GAAG,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC;AAEtD,MAAM,OAAgB,WAAY,SAAQ,UAAU;IAApD;;QAQE,6BAAS,IAAI,qBAAqB,CAAC,IAAI,EAAE;YACvC,KAAK,EAAE,IAAI;YACX,OAAO,EAAE,GAAmC,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,UAAU,CAAC;SAC1F,CAAC,EAAC;IAqCL,CAAC;IAnCU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAClE,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACnE,CAAC;IAED,KAAK,CAAC,IAAI;QACR,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;QAChC,MAAM,MAAM,GACR,CAAC,SAAS,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE;YACtC,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC;QACxC,MAAM,uBAAA,IAAI,0BAAO,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;IAChD,CAAC;IAED,KAAK,CAAC,IAAI;QACR,MAAM,uBAAA,IAAI,0BAAO,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC;IAEQ,MAAM;QACb,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,uBAAA,IAAI,0BAAO,CAAC;QAExD,OAAO,IAAI,CAAA;;oBAEK,QAAQ,CAAC,MAAM,CAAC;iBACnB,QAAQ,CAAC,EAAE,IAAI;YACJ,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM;YAClB,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC;;;;6BAI1B,MAAM,CAAC,CAAC,IAAI,CAAqB,KAAK,IAAI,CAAC,OAAO;;KAE1E,CAAC;IACJ,CAAC;;;AA9Ce,kBAAM,GAAG,CAAC,KAAK,CAAC,CAAC","sourcesContent":["import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\n\nimport { LitElement, html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\n\nimport style from './BaseTooltip.css';\n\nconst enterEvents = ['focusin', 'tap', 'click', 'mouseenter'];\nconst exitEvents = ['focusout', 'blur', 'mouseleave'];\n\nexport abstract class BaseTooltip extends LitElement {\n static readonly styles = [style];\n\n abstract content?: string;\n\n /** The position of the tooltip, relative to the invoking content */\n abstract position?: Placement;\n\n #float = new FloatingDOMController(this, {\n arrow: true,\n content: (): HTMLElement | undefined | null => this.shadowRoot?.querySelector('#tooltip'),\n });\n\n override connectedCallback(): void {\n super.connectedCallback();\n enterEvents.forEach(evt => this.addEventListener(evt, this.show));\n exitEvents.forEach(evt => this.addEventListener(evt, this.hide));\n }\n\n async show() {\n await this.updateComplete;\n const placement = this.position;\n const offset =\n !placement?.match(/top|bottom/) ? 15\n : { mainAxis: 15, alignmentAxis: -4 };\n await this.#float.show({ offset, placement });\n }\n\n async hide() {\n await this.#float.hide();\n }\n\n override render() {\n const { alignment, anchor, open, styles } = this.#float;\n\n return html`\n <div id=\"container\"\n style=\"${styleMap(styles)}\"\n class=\"${classMap({ open,\n [anchor]: !!anchor,\n [alignment]: !!alignment })}\">\n <slot id=\"invoker\" role=\"tooltip\" aria-labelledby=\"tooltip\"></slot>\n <slot id=\"tooltip\"\n name=\"content\"\n aria-hidden=\"${String(!open) as 'true' | 'false'}\">${this.content}</slot>\n </div>\n `;\n }\n}\n"]}
|