@patternfly/elements 4.1.0 → 4.3.0
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 +14909 -12588
- package/package.json +26 -17
- package/pf-accordion/pf-accordion-header.css +37 -0
- package/pf-accordion/pf-accordion-header.d.ts +0 -61
- package/pf-accordion/pf-accordion-header.js +180 -2
- package/pf-accordion/pf-accordion-header.js.map +1 -1
- package/pf-accordion/pf-accordion-panel.css +12 -0
- package/pf-accordion/pf-accordion-panel.d.ts +0 -34
- package/pf-accordion/pf-accordion-panel.js +87 -2
- package/pf-accordion/pf-accordion-panel.js.map +1 -1
- package/pf-accordion/pf-accordion.css +62 -0
- package/pf-accordion/pf-accordion.d.ts +1 -64
- package/pf-accordion/pf-accordion.js +156 -2
- package/pf-accordion/pf-accordion.js.map +1 -1
- package/pf-alert/pf-alert.css +193 -0
- package/pf-alert/pf-alert.d.ts +95 -0
- package/pf-alert/pf-alert.js +406 -0
- package/pf-alert/pf-alert.js.map +1 -0
- package/pf-alert/test/pf-alert.e2e.d.ts +1 -0
- package/pf-alert/test/pf-alert.e2e.js +45 -0
- package/pf-alert/test/pf-alert.e2e.js.map +1 -0
- package/pf-alert/test/pf-alert.spec.d.ts +1 -0
- package/pf-alert/test/pf-alert.spec.js +42 -0
- package/pf-alert/test/pf-alert.spec.js.map +1 -0
- package/pf-avatar/pf-avatar.css +14 -0
- package/pf-avatar/pf-avatar.d.ts +1 -14
- package/pf-avatar/pf-avatar.js +82 -2
- package/pf-avatar/pf-avatar.js.map +1 -1
- package/pf-back-to-top/pf-back-to-top.css +12 -0
- package/pf-back-to-top/pf-back-to-top.d.ts +1 -17
- package/pf-back-to-top/pf-back-to-top.js +87 -3
- package/pf-back-to-top/pf-back-to-top.js.map +1 -1
- package/pf-back-to-top/test/pf-back-to-top.spec.js +3 -2
- package/pf-back-to-top/test/pf-back-to-top.spec.js.map +1 -1
- package/pf-background-image/pf-background-image.css +7 -0
- package/pf-background-image/pf-background-image.d.ts +1 -8
- package/pf-background-image/pf-background-image.js +76 -2
- package/pf-background-image/pf-background-image.js.map +1 -1
- package/pf-badge/pf-badge.css +13 -0
- package/pf-badge/pf-badge.d.ts +1 -13
- package/pf-badge/pf-badge.js +53 -2
- package/pf-badge/pf-badge.js.map +1 -1
- package/pf-banner/pf-banner.css +21 -0
- package/pf-banner/pf-banner.d.ts +1 -19
- package/pf-banner/pf-banner.js +122 -2
- package/pf-banner/pf-banner.js.map +1 -1
- package/pf-button/pf-button-tokens.css +38 -0
- package/pf-button/pf-button.d.ts +1 -106
- package/pf-button/pf-button.js +837 -4
- package/pf-button/pf-button.js.map +1 -1
- package/pf-card/pf-card.css +24 -0
- package/pf-card/pf-card.d.ts +1 -38
- package/pf-card/pf-card.js +248 -2
- package/pf-card/pf-card.js.map +1 -1
- package/pf-chip/pf-chip-group.css +15 -0
- package/pf-chip/pf-chip-group.d.ts +0 -15
- package/pf-chip/pf-chip-group.js +111 -2
- package/pf-chip/pf-chip-group.js.map +1 -1
- package/pf-chip/pf-chip.css +30 -1
- package/pf-chip/pf-chip.d.ts +1 -20
- package/pf-chip/pf-chip.js +135 -2
- package/pf-chip/pf-chip.js.map +1 -1
- package/pf-clipboard-copy/pf-clipboard-copy.css +25 -0
- package/pf-clipboard-copy/pf-clipboard-copy.d.ts +1 -27
- package/pf-clipboard-copy/pf-clipboard-copy.js +318 -3
- package/pf-clipboard-copy/pf-clipboard-copy.js.map +1 -1
- package/pf-code-block/pf-code-block.css +11 -1
- package/pf-code-block/pf-code-block.js +70 -18
- package/pf-code-block/pf-code-block.js.map +1 -1
- package/pf-dropdown/pf-dropdown-group.js +40 -2
- package/pf-dropdown/pf-dropdown-group.js.map +1 -1
- package/pf-dropdown/pf-dropdown-item.css +10 -0
- package/pf-dropdown/pf-dropdown-item.d.ts +0 -27
- package/pf-dropdown/pf-dropdown-item.js +155 -2
- package/pf-dropdown/pf-dropdown-item.js.map +1 -1
- package/pf-dropdown/pf-dropdown-menu.js +39 -2
- package/pf-dropdown/pf-dropdown-menu.js.map +1 -1
- package/pf-dropdown/pf-dropdown.css +13 -1
- package/pf-dropdown/pf-dropdown.d.ts +1 -9
- package/pf-dropdown/pf-dropdown.js +357 -2
- package/pf-dropdown/pf-dropdown.js.map +1 -1
- package/pf-helper-text/pf-helper-text.css +35 -0
- package/pf-helper-text/pf-helper-text.d.ts +41 -0
- package/pf-helper-text/pf-helper-text.js +107 -0
- package/pf-helper-text/pf-helper-text.js.map +1 -0
- package/pf-helper-text/test/pf-helper-text.e2e.d.ts +1 -0
- package/pf-helper-text/test/pf-helper-text.e2e.js +23 -0
- package/pf-helper-text/test/pf-helper-text.e2e.js.map +1 -0
- package/pf-helper-text/test/pf-helper-text.spec.d.ts +1 -0
- package/pf-helper-text/test/pf-helper-text.spec.js +57 -0
- package/pf-helper-text/test/pf-helper-text.spec.js.map +1 -0
- package/pf-hint/pf-hint.css +120 -0
- package/pf-hint/pf-hint.d.ts +19 -0
- package/pf-hint/pf-hint.js +180 -0
- package/pf-hint/pf-hint.js.map +1 -0
- package/pf-hint/test/pf-hint.e2e.d.ts +1 -0
- package/pf-hint/test/pf-hint.e2e.js +23 -0
- package/pf-hint/test/pf-hint.e2e.js.map +1 -0
- package/pf-hint/test/pf-hint.spec.d.ts +1 -0
- package/pf-hint/test/pf-hint.spec.js +87 -0
- package/pf-hint/test/pf-hint.spec.js.map +1 -0
- package/pf-icon/pf-icon.css +1 -0
- package/pf-icon/pf-icon.d.ts +1 -3
- package/pf-icon/pf-icon.js +44 -4
- package/pf-icon/pf-icon.js.map +1 -1
- package/pf-jump-links/pf-jump-links-item.css +7 -1
- package/pf-jump-links/pf-jump-links-item.d.ts +0 -8
- package/pf-jump-links/pf-jump-links-item.js +77 -2
- package/pf-jump-links/pf-jump-links-item.js.map +1 -1
- package/pf-jump-links/pf-jump-links-list.css +3 -0
- package/pf-jump-links/pf-jump-links-list.d.ts +0 -5
- package/pf-jump-links/pf-jump-links-list.js +20 -2
- package/pf-jump-links/pf-jump-links-list.js.map +1 -1
- package/pf-jump-links/pf-jump-links.css +36 -0
- package/pf-jump-links/pf-jump-links.d.ts +1 -38
- package/pf-jump-links/pf-jump-links.js +179 -2
- package/pf-jump-links/pf-jump-links.js.map +1 -1
- package/pf-label/pf-label.css +51 -1
- package/pf-label/pf-label.d.ts +1 -58
- package/pf-label/pf-label.js +257 -2
- package/pf-label/pf-label.js.map +1 -1
- package/pf-modal/pf-modal.css +11 -0
- package/pf-modal/pf-modal.d.ts +2 -25
- package/pf-modal/pf-modal.js +215 -2
- package/pf-modal/pf-modal.js.map +1 -1
- package/pf-panel/pf-panel.css +29 -0
- package/pf-panel/pf-panel.d.ts +1 -32
- package/pf-panel/pf-panel.js +204 -2
- package/pf-panel/pf-panel.js.map +1 -1
- package/pf-popover/pf-popover.css +33 -0
- package/pf-popover/pf-popover.d.ts +1 -108
- package/pf-popover/pf-popover.js +251 -3
- package/pf-popover/pf-popover.js.map +1 -1
- package/pf-progress/pf-progress.css +19 -0
- package/pf-progress/pf-progress.d.ts +1 -57
- package/pf-progress/pf-progress.js +231 -2
- package/pf-progress/pf-progress.js.map +1 -1
- package/pf-progress-stepper/pf-progress-step.js +126 -2
- package/pf-progress-stepper/pf-progress-step.js.map +1 -1
- package/pf-progress-stepper/pf-progress-stepper.css +96 -0
- package/pf-progress-stepper/pf-progress-stepper.d.ts +1 -115
- package/pf-progress-stepper/pf-progress-stepper.js +326 -2
- package/pf-progress-stepper/pf-progress-stepper.js.map +1 -1
- package/pf-search-input/pf-search-input.css +308 -0
- package/pf-search-input/pf-search-input.d.ts +75 -0
- package/pf-search-input/pf-search-input.js +630 -0
- package/pf-search-input/pf-search-input.js.map +1 -0
- package/pf-search-input/test/pf-search-input.e2e.d.ts +1 -0
- package/pf-search-input/test/pf-search-input.e2e.js +23 -0
- package/pf-search-input/test/pf-search-input.e2e.js.map +1 -0
- package/pf-search-input/test/pf-search-input.spec.d.ts +1 -0
- package/pf-search-input/test/pf-search-input.spec.js +1021 -0
- package/pf-search-input/test/pf-search-input.spec.js.map +1 -0
- package/pf-select/pf-option-group.js +27 -2
- package/pf-select/pf-option-group.js.map +1 -1
- package/pf-select/pf-option.css +9 -1
- package/pf-select/pf-option.js +83 -2
- package/pf-select/pf-option.js.map +1 -1
- package/pf-select/pf-select.css +157 -0
- package/pf-select/pf-select.d.ts +1 -158
- package/pf-select/pf-select.js +542 -5
- package/pf-select/pf-select.js.map +1 -1
- package/pf-spinner/pf-spinner.css +13 -0
- package/pf-spinner/pf-spinner.d.ts +1 -14
- package/pf-spinner/pf-spinner.js +101 -2
- package/pf-spinner/pf-spinner.js.map +1 -1
- package/pf-switch/pf-switch.css +22 -0
- package/pf-switch/pf-switch.d.ts +1 -30
- package/pf-switch/pf-switch.js +156 -2
- package/pf-switch/pf-switch.js.map +1 -1
- package/pf-table/pf-caption.js +10 -2
- package/pf-table/pf-caption.js.map +1 -1
- package/pf-table/pf-table.css +211 -0
- package/pf-table/pf-table.d.ts +1 -635
- package/pf-table/pf-table.js +437 -2
- package/pf-table/pf-table.js.map +1 -1
- package/pf-table/pf-tbody.js +18 -2
- package/pf-table/pf-tbody.js.map +1 -1
- package/pf-table/pf-td.js +107 -2
- package/pf-table/pf-td.js.map +1 -1
- package/pf-table/pf-th.js +95 -2
- package/pf-table/pf-th.js.map +1 -1
- package/pf-table/pf-thead.js +20 -2
- package/pf-table/pf-thead.js.map +1 -1
- package/pf-table/pf-tr.js +89 -2
- package/pf-table/pf-tr.js.map +1 -1
- package/pf-tabs/pf-tab-panel.css +1 -0
- package/pf-tabs/pf-tab-panel.d.ts +0 -2
- package/pf-tabs/pf-tab-panel.js +19 -3
- package/pf-tabs/pf-tab-panel.js.map +1 -1
- package/pf-tabs/pf-tab.css +33 -0
- package/pf-tabs/pf-tab.d.ts +0 -40
- package/pf-tabs/pf-tab.js +231 -2
- package/pf-tabs/pf-tab.js.map +1 -1
- package/pf-tabs/pf-tabs.css +26 -0
- package/pf-tabs/pf-tabs.d.ts +1 -34
- package/pf-tabs/pf-tabs.js +307 -2
- package/pf-tabs/pf-tabs.js.map +1 -1
- package/pf-text-area/pf-text-area.css +125 -0
- package/pf-text-area/pf-text-area.d.ts +1 -125
- package/pf-text-area/pf-text-area.js +320 -2
- package/pf-text-area/pf-text-area.js.map +1 -1
- package/pf-text-input/pf-text-input.css +126 -0
- package/pf-text-input/pf-text-input.d.ts +1 -126
- package/pf-text-input/pf-text-input.js +395 -2
- package/pf-text-input/pf-text-input.js.map +1 -1
- package/pf-tile/pf-tile.css +28 -8
- package/pf-tile/pf-tile.d.ts +1 -24
- package/pf-tile/pf-tile.js +156 -2
- package/pf-tile/pf-tile.js.map +1 -1
- package/pf-timestamp/pf-timestamp.d.ts +1 -0
- package/pf-timestamp/pf-timestamp.js +10 -2
- package/pf-timestamp/pf-timestamp.js.map +1 -1
- package/pf-tooltip/pf-tooltip.css +10 -0
- package/pf-tooltip/pf-tooltip.d.ts +1 -79
- package/pf-tooltip/pf-tooltip.js +113 -3
- package/pf-tooltip/pf-tooltip.js.map +1 -1
- package/pfe.min.js +0 -7439
- package/pfe.min.js.LEGAL.txt +0 -57
- package/pfe.min.js.map +0 -7
- package/react/pf-accordion/pf-accordion-header.d.ts +0 -5
- package/react/pf-accordion/pf-accordion-header.js +0 -12
- package/react/pf-accordion/pf-accordion-panel.d.ts +0 -5
- package/react/pf-accordion/pf-accordion-panel.js +0 -10
- package/react/pf-accordion/pf-accordion.d.ts +0 -5
- package/react/pf-accordion/pf-accordion.js +0 -13
- package/react/pf-avatar/pf-avatar.d.ts +0 -5
- package/react/pf-avatar/pf-avatar.js +0 -12
- package/react/pf-back-to-top/pf-back-to-top.d.ts +0 -5
- package/react/pf-back-to-top/pf-back-to-top.js +0 -10
- package/react/pf-background-image/pf-background-image.d.ts +0 -5
- package/react/pf-background-image/pf-background-image.js +0 -10
- package/react/pf-badge/pf-badge.d.ts +0 -5
- package/react/pf-badge/pf-badge.js +0 -10
- package/react/pf-banner/pf-banner.d.ts +0 -5
- package/react/pf-banner/pf-banner.js +0 -10
- package/react/pf-button/pf-button.d.ts +0 -5
- package/react/pf-button/pf-button.js +0 -12
- package/react/pf-card/pf-card.d.ts +0 -5
- package/react/pf-card/pf-card.js +0 -10
- package/react/pf-chip/pf-chip-group.d.ts +0 -5
- package/react/pf-chip/pf-chip-group.js +0 -13
- package/react/pf-chip/pf-chip.d.ts +0 -5
- package/react/pf-chip/pf-chip.js +0 -13
- package/react/pf-clipboard-copy/pf-clipboard-copy.d.ts +0 -5
- package/react/pf-clipboard-copy/pf-clipboard-copy.js +0 -12
- package/react/pf-code-block/pf-code-block.d.ts +0 -5
- package/react/pf-code-block/pf-code-block.js +0 -10
- package/react/pf-dropdown/pf-dropdown-group.d.ts +0 -5
- package/react/pf-dropdown/pf-dropdown-group.js +0 -10
- package/react/pf-dropdown/pf-dropdown-item.d.ts +0 -5
- package/react/pf-dropdown/pf-dropdown-item.js +0 -10
- package/react/pf-dropdown/pf-dropdown-menu.d.ts +0 -5
- package/react/pf-dropdown/pf-dropdown-menu.js +0 -10
- package/react/pf-dropdown/pf-dropdown.d.ts +0 -5
- package/react/pf-dropdown/pf-dropdown.js +0 -14
- package/react/pf-icon/pf-icon.d.ts +0 -5
- package/react/pf-icon/pf-icon.js +0 -13
- package/react/pf-jump-links/pf-jump-links-item.d.ts +0 -5
- package/react/pf-jump-links/pf-jump-links-item.js +0 -13
- package/react/pf-jump-links/pf-jump-links-list.d.ts +0 -5
- package/react/pf-jump-links/pf-jump-links-list.js +0 -10
- package/react/pf-jump-links/pf-jump-links.d.ts +0 -5
- package/react/pf-jump-links/pf-jump-links.js +0 -12
- package/react/pf-label/pf-label.d.ts +0 -5
- package/react/pf-label/pf-label.js +0 -12
- package/react/pf-modal/pf-modal.d.ts +0 -5
- package/react/pf-modal/pf-modal.js +0 -13
- package/react/pf-panel/pf-panel.d.ts +0 -5
- package/react/pf-panel/pf-panel.js +0 -10
- package/react/pf-popover/pf-popover.d.ts +0 -5
- package/react/pf-popover/pf-popover.js +0 -10
- package/react/pf-progress/pf-progress.d.ts +0 -5
- package/react/pf-progress/pf-progress.js +0 -10
- package/react/pf-progress-stepper/pf-progress-step.d.ts +0 -5
- package/react/pf-progress-stepper/pf-progress-step.js +0 -10
- package/react/pf-progress-stepper/pf-progress-stepper.d.ts +0 -5
- package/react/pf-progress-stepper/pf-progress-stepper.js +0 -10
- package/react/pf-select/pf-option-group.d.ts +0 -5
- package/react/pf-select/pf-option-group.js +0 -10
- package/react/pf-select/pf-option.d.ts +0 -5
- package/react/pf-select/pf-option.js +0 -10
- package/react/pf-select/pf-select.d.ts +0 -5
- package/react/pf-select/pf-select.js +0 -13
- package/react/pf-spinner/pf-spinner.d.ts +0 -5
- package/react/pf-spinner/pf-spinner.js +0 -10
- package/react/pf-switch/pf-switch.d.ts +0 -5
- package/react/pf-switch/pf-switch.js +0 -12
- package/react/pf-table/pf-caption.d.ts +0 -5
- package/react/pf-table/pf-caption.js +0 -10
- package/react/pf-table/pf-table.d.ts +0 -5
- package/react/pf-table/pf-table.js +0 -10
- package/react/pf-table/pf-tbody.d.ts +0 -5
- package/react/pf-table/pf-tbody.js +0 -10
- package/react/pf-table/pf-td.d.ts +0 -5
- package/react/pf-table/pf-td.js +0 -10
- package/react/pf-table/pf-th.d.ts +0 -5
- package/react/pf-table/pf-th.js +0 -10
- package/react/pf-table/pf-thead.d.ts +0 -5
- package/react/pf-table/pf-thead.js +0 -10
- package/react/pf-table/pf-tr.d.ts +0 -5
- package/react/pf-table/pf-tr.js +0 -10
- package/react/pf-tabs/pf-tab-panel.d.ts +0 -5
- package/react/pf-tabs/pf-tab-panel.js +0 -10
- package/react/pf-tabs/pf-tab.d.ts +0 -5
- package/react/pf-tabs/pf-tab.js +0 -12
- package/react/pf-tabs/pf-tabs.d.ts +0 -5
- package/react/pf-tabs/pf-tabs.js +0 -10
- package/react/pf-text-area/pf-text-area.d.ts +0 -5
- package/react/pf-text-area/pf-text-area.js +0 -10
- package/react/pf-text-input/pf-text-input.d.ts +0 -5
- package/react/pf-text-input/pf-text-input.js +0 -10
- package/react/pf-tile/pf-tile.d.ts +0 -5
- package/react/pf-tile/pf-tile.js +0 -10
- package/react/pf-timestamp/pf-timestamp.d.ts +0 -5
- package/react/pf-timestamp/pf-timestamp.js +0 -10
- package/react/pf-tooltip/pf-tooltip.d.ts +0 -5
- package/react/pf-tooltip/pf-tooltip.js +0 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pf-accordion.js","sourceRoot":"","sources":["pf-accordion.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { observes } from '@patternfly/pfe-core/decorators/observes.js';\nimport { listen } from '@patternfly/pfe-core/decorators/listen.js';\nimport { property } from 'lit/decorators/property.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\nimport { NumberListConverter } from '@patternfly/pfe-core';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport { PfAccordionHeader, PfAccordionHeaderChangeEvent } from './pf-accordion-header.js';\nimport { PfAccordionPanel } from './pf-accordion-panel.js';\n\nexport * from './pf-accordion-header.js';\nexport * from './pf-accordion-panel.js';\n\nimport style from './pf-accordion.css';\n\nexport class PfAccordionExpandEvent extends Event {\n constructor(\n public toggle: PfAccordionHeader,\n public panel: PfAccordionPanel,\n ) {\n super('expand', { bubbles: true, cancelable: true });\n }\n}\n\nexport class PfAccordionCollapseEvent extends Event {\n constructor(\n public toggle: PfAccordionHeader,\n public panel: PfAccordionPanel,\n ) {\n super('collapse', { bubbles: true, cancelable: true });\n }\n}\n\n/**\n * An **accordion** is an interactive container that expands and collapses to hide or reveal nested content. It takes advantage of progressive disclosure to help reduce page scrolling, by allowing users to choose whether they want to show or hide more detailed information as needed.\n * @summary Toggle the visibility of sections of content\n * @fires {AccordionExpandEvent} expand - when a panel expands\n * @fires {AccordionCollapseEvent} collapse - when a panel collapses\n * @slot\n * Place the `pf-accordion-header` and `pf-accordion-panel` elements here.\n * @cssprop [--pf-c-accordion--BackgroundColor=var(--pf-global--BackgroundColor--100, #fff)]\n * @cssprop [--pf-c-accordion__toggle--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]\n * @cssprop [--pf-c-accordion__toggle--PaddingRight=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-accordion__toggle--PaddingBottom=var(--pf-global--spacer--sm, 0.5rem)]\n * @cssprop [--pf-c-accordion__toggle--PaddingLeft=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-accordion__toggle--before--BackgroundColor=transparent]\n * @cssprop [--pf-c-accordion__toggle--before--Top=0]\n * @cssprop [--pf-c-accordion__toggle--hover--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]\n * @cssprop [--pf-c-accordion__toggle--focus--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]\n * @cssprop [--pf-c-accordion__toggle--active--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]\n * @cssprop [--pf-c-accordion__toggle--before--Width=var(--pf-global--BorderWidth--lg, 3px)]\n * @cssprop [--pf-c-accordion__toggle--m-expanded--before--BackgroundColor=var(--pf-global--primary-color--100, #06c)]\n * @cssprop [--pf-c-accordion__toggle-text--MaxWidth=calc(100 - var(--pf-global--spacer--lg, 1.5rem))]\n * @cssprop [--pf-c-accordion__toggle--hover__toggle-text--Color=var(--pf-global--link--Color, #06c)]\n * @cssprop [--pf-c-accordion__toggle--active__toggle-text--Color=var(--pf-global--link--Color, #06c)]\n * @cssprop [--pf-c-accordion__toggle--active__toggle-text--FontWeight=var(--pf-global--FontWeight--semi-bold, 700)]\n * @cssprop [--pf-c-accordion__toggle--focus__toggle-text--Color=var(--pf-global--link--Color, #06c)]\n * @cssprop [--pf-c-accordion__toggle--focus__toggle-text--FontWeight=var(--pf-global--FontWeight--semi-bold, 700)]\n * @cssprop [--pf-c-accordion__toggle--m-expanded__toggle-text--Color=var(--pf-global--link--Color, #06c)]\n * @cssprop [--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight=var(--pf-global--FontWeight--semi-bold, 700)]\n * @cssprop [--pf-c-accordion__toggle-icon--Transition=.2s ease-in 0s]\n * @cssprop [--pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate=90deg]\n * @cssprop [--pf-c-accordion__expanded-content--Color=var(--pf-global--Color--200, #6a6e73)]\n * @cssprop [--pf-c-accordion__expanded-content--FontSize=var(--pf-global--FontSize--sm, 0.875rem)]\n * @cssprop [--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor=var(--pf-global--primary-color--100, #06c)]\n * @cssprop [--pf-c-accordion__expanded-content--m-fixed--MaxHeight=9.375rem]\n * @cssprop [--pf-c-accordion__expanded-content-body--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]\n * @cssprop [--pf-c-accordion__expanded-content-body--PaddingRight=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-accordion__expanded-content-body--PaddingBottom=var(--pf-global--spacer--sm, 0.5rem)]\n * @cssprop [--pf-c-accordion__expanded-content-body--PaddingLeft=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop=0]\n * @cssprop [--pf-c-accordion__expanded-content-body--before--BackgroundColor=transparent]\n * @cssprop [--pf-c-accordion__expanded-content-body--before--Width=var(--pf-global--BorderWidth--lg, 3px)]\n * @cssprop [--pf-c-accordion__expanded-content-body--before--Top=0]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--PaddingTop=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--PaddingRight=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--PaddingBottom=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--PaddingLeft=var(--pf-global--spacer--lg, 1.5rem)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--FontFamily=var(--pf-global--FontFamily--heading--sans-serif, \"RedHatDisplay\", \"Overpass\", overpass, helvetica, arial, sans-serif)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--FontSize=var(--pf-global--FontSize--xl, 1.25rem)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight=var(--pf-global--FontWeight--normal, 400)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight=var(--pf-global--FontWeight--normal, 400)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight=var(--pf-global--FontWeight--normal, 400)]\n * @cssprop [--pf-c-accordion--m-display-lg__expanded-content--FontSize=var(--pf-global--FontSize--md, 1rem)]\n * @cssprop [--pf-c-accordion--m-display-lg__expanded-content--Color=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop=0]\n * @cssprop [--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom=var(--pf-global--spacer--lg, 1.5rem)]\n * @cssprop [--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft=var(--pf-global--spacer--lg, 1.5rem)]\n * @cssprop [--pf-c-accordion--m-bordered--BorderTopWidth=var(--pf-global--BorderWidth--sm, 1px)]\n * @cssprop [--pf-c-accordion--m-bordered--BorderTopColor=var(--pf-global--BorderColor--100, #d2d2d2)]\n * @cssprop [--pf-c-accordion--m-bordered__toggle--before--Top=calc(-1 * var(--pf-global--BorderWidth--sm, 1px))]\n * @cssprop [--pf-c-accordion--m-bordered__toggle--after--BorderColor=var(--pf-global--BorderColor--100, #d2d2d2)]\n * @cssprop [--pf-c-accordion--m-bordered__toggle--after--BorderTopWidth=0]\n * @cssprop [--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth=var(--pf-global--BorderWidth--sm, 1px)]\n * @cssprop [--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth=var(--pf-global--BorderWidth--sm, 1px)]\n * @cssprop [--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor=var(--pf-global--BorderColor--100, #d2d2d2)]\n */\n@customElement('pf-accordion')\nexport class PfAccordion extends LitElement {\n static readonly styles: CSSStyleSheet[] = [style];\n\n /** When true, only one accordion panel may be expanded at a time */\n @property({ reflect: true, type: Boolean }) single = false;\n\n /** Whether to apply the `bordered` style variant */\n @property({ type: Boolean, reflect: true }) bordered = false;\n\n /** Whether to apply the `large` style variant */\n @property({ type: Boolean, reflect: true }) large = false;\n\n @property({ type: Boolean, reflect: true }) fixed = false;\n\n /**\n * Sets and reflects the currently expanded accordion 0-based indexes.\n * Use commas to separate multiple indexes.\n * ```html\n * <pf-accordion expanded-index=\"1,2\">\n * ...\n * </pf-accordion>\n * ```\n */\n @property({ attribute: 'expanded-index', converter: NumberListConverter })\n get expandedIndex(): number[] {\n return this.#expandedIndex;\n }\n\n set expandedIndex(value) {\n const old = this.#expandedIndex;\n this.#expandedIndex = value;\n this.#tabindex.atFocusedItemIndex = value.at(-1) ?? -1;\n if (JSON.stringify(old) !== JSON.stringify(value)) {\n this.requestUpdate('expandedIndex', old);\n this.collapseAll().then(async () => {\n for (const i of this.expandedIndex) {\n await this.expand(i);\n }\n });\n }\n }\n\n #logger = new Logger(this);\n\n // actually is read in #init, by the `||=` operator\n // eslint-disable-next-line no-unused-private-class-members\n #initialized = false;\n\n #mo = new MutationObserver(() => this.#init());\n\n #tabindex = RovingTabindexController.of(this, {\n getItems: () => this.headers,\n });\n\n #expandedIndex: number[] = [];\n\n protected expandedSets: Set<number> = new Set<number>();\n\n get #activeHeader() {\n const { headers } = this;\n const index = headers.findIndex(header => header.matches(':focus,:focus-within'));\n return index > -1 ? headers.at(index) : undefined;\n }\n\n get headers(): PfAccordionHeader[] {\n return this.#allHeaders();\n }\n\n get panels(): PfAccordionPanel[] {\n return this.#allPanels();\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.#mo.observe(this, { childList: true });\n this.#init();\n }\n\n render(): TemplateResult<1> {\n return html`\n <slot></slot>\n `;\n }\n\n async firstUpdated(): Promise<void> {\n let lastExpandedIndex: number;\n const { headers, single } = this;\n const lastExpanded = headers.filter(x => x.hasAttribute('expanded')).pop();\n if (lastExpanded) {\n lastExpandedIndex = headers.indexOf(lastExpanded);\n }\n headers.forEach((header, index) => {\n if (header.expanded && (!single || index === lastExpandedIndex)) {\n this.#expandHeader(header, index);\n const panel = this.#panelForHeader(header);\n if (panel) {\n this.#expandPanel(panel);\n }\n }\n });\n }\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const c = await super.getUpdateComplete();\n const results = await Promise.all([\n ...this.#allHeaders().map(x => x.updateComplete),\n ...this.#allPanels().map(x => x.updateComplete),\n ]);\n return c && results.every(Boolean);\n }\n\n @observes('large')\n protected largeChanged(): void {\n for (const el of [...this.headers, ...this.panels]) {\n el.toggleAttribute('large', this.large);\n }\n }\n\n /**\n * Initialize the accordion by connecting headers and panels\n * with aria controls and labels; set up the default disclosure\n * state if not set by the author; and check the URL for default\n * open\n */\n async #init() {\n this.#initialized ||= !!await this.updateComplete;\n this.updateAccessibility();\n }\n\n @listen('focusin')\n protected updateActiveHeader(): void {\n if (this.#activeHeader\n && this.#activeHeader !== this.headers.at(this.#tabindex.atFocusedItemIndex)) {\n this.#tabindex.atFocusedItemIndex = this.headers.indexOf(this.#activeHeader);\n }\n }\n\n #panelForHeader(header: PfAccordionHeader) {\n const next = header.nextElementSibling;\n if (!(next instanceof PfAccordionPanel)) {\n return void this.#logger.error('Sibling element to a header needs to be a panel');\n } else {\n return next;\n }\n }\n\n #expandHeader(header: PfAccordionHeader, index = this.#getIndex(header)) {\n // If this index is not already listed in the expandedSets array, add it\n this.expandedSets.add(index);\n this.#expandedIndex = [...this.expandedSets as Set<number>];\n header.expanded = true;\n }\n\n #expandPanel(panel: PfAccordionPanel) {\n panel.expanded = true;\n panel.hidden = false;\n }\n\n async #collapseHeader(header: PfAccordionHeader, index = this.#getIndex(header)) {\n if (!this.expandedSets) {\n await this.updateComplete;\n }\n this.expandedSets.delete(index);\n header.expanded = false;\n await header.updateComplete;\n }\n\n async #collapsePanel(panel: PfAccordionPanel) {\n await panel.updateComplete;\n if (!panel.expanded) {\n return;\n }\n\n panel.expanded = false;\n panel.hidden = true;\n }\n\n @listen('change')\n protected onChange(event: PfAccordionHeaderChangeEvent): void {\n if (event instanceof PfAccordionHeaderChangeEvent && event.accordion === this) {\n const index = this.#getIndex(event.target);\n if (event.expanded) {\n this.expand(index);\n } else {\n this.collapse(index);\n }\n event.stopPropagation();\n }\n }\n\n #allHeaders(accordion: PfAccordion = this): PfAccordionHeader[] {\n return Array.from(accordion.children ?? []).filter((x): x is PfAccordionHeader =>\n x instanceof PfAccordionHeader);\n }\n\n #allPanels(accordion: PfAccordion = this): PfAccordionPanel[] {\n return Array.from(accordion.children ?? []).filter((x): x is PfAccordionPanel =>\n x instanceof PfAccordionPanel);\n }\n\n #getIndex(el: Element | null) {\n if (el instanceof PfAccordionHeader) {\n return this.headers.findIndex(header => header.id === el.id);\n }\n\n if (el instanceof PfAccordionPanel) {\n return this.panels.findIndex(panel => panel.id === el.id);\n }\n\n this.#logger.warn('The #getIndex method expects to receive a header or panel element.');\n return -1;\n }\n\n public updateAccessibility(): void {\n const { headers } = this;\n\n // For each header in the accordion, attach the aria connections\n headers.forEach(header => {\n const panel = this.#panelForHeader(header);\n if (panel) {\n header.setAttribute('aria-controls', panel.id);\n panel.setAttribute('aria-labelledby', header.id);\n panel.hidden = !panel.expanded;\n }\n });\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to expand.\n * Accepts an optional parent accordion to search for headers and panels.\n * @param index index (0-based) of the panel to expand\n */\n public async expand(index: number): Promise<void> {\n if (index === -1) {\n return;\n }\n\n // Get all the headers and capture the item by index value\n if (this.single) {\n await Promise.all([\n ...this.headers.map((header, index) => header.expanded && this.collapse(index)),\n ]);\n }\n\n const header = this.headers[index];\n if (!header) {\n return;\n }\n\n const panel = this.#panelForHeader(header);\n if (!panel) {\n return;\n }\n\n // If the header and panel exist, open both\n this.#expandHeader(header, index);\n this.#expandPanel(panel);\n\n this.dispatchEvent(new PfAccordionExpandEvent(header, panel));\n\n await this.updateComplete;\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to collapse.\n * @param index index (0-based) of the panel to collapse\n */\n public async collapse(index: number): Promise<void> {\n const header = this.headers.at(index);\n const panel = this.panels.at(index);\n\n if (!header || !panel) {\n return;\n }\n\n this.#collapseHeader(header);\n this.#collapsePanel(panel);\n\n this.dispatchEvent(new PfAccordionCollapseEvent(header, panel));\n await this.updateComplete;\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse.\n * @param index index (0-based) of the panel to toggle\n */\n public async toggle(index: number): Promise<void> {\n const { headers } = this;\n const header = headers[index];\n\n if (!header.expanded) {\n await this.expand(index);\n } else {\n await this.collapse(index);\n }\n }\n\n /**\n * Expands all accordion items.\n */\n public async expandAll(): Promise<void> {\n this.headers.forEach(header => this.#expandHeader(header));\n this.panels.forEach(panel => this.#expandPanel(panel));\n await this.updateComplete;\n }\n\n\n /**\n * Collapses all accordion items.\n */\n public async collapseAll(): Promise<void> {\n this.headers.forEach(header => this.#collapseHeader(header));\n this.panels.forEach(panel => this.#collapsePanel(panel));\n await this.updateComplete;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-accordion': PfAccordion;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"pf-accordion.js","sourceRoot":"","sources":["pf-accordion.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { observes } from '@patternfly/pfe-core/decorators/observes.js';\nimport { listen } from '@patternfly/pfe-core/decorators/listen.js';\nimport { property } from 'lit/decorators/property.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\nimport { NumberListConverter } from '@patternfly/pfe-core';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport { PfAccordionHeader, PfAccordionHeaderChangeEvent } from './pf-accordion-header.js';\nimport { PfAccordionPanel } from './pf-accordion-panel.js';\n\nexport * from './pf-accordion-header.js';\nexport * from './pf-accordion-panel.js';\n\nimport style from './pf-accordion.css';\n\nexport class PfAccordionExpandEvent extends Event {\n constructor(\n public toggle: PfAccordionHeader,\n public panel: PfAccordionPanel,\n ) {\n super('expand', { bubbles: true, cancelable: true });\n }\n}\n\nexport class PfAccordionCollapseEvent extends Event {\n constructor(\n public toggle: PfAccordionHeader,\n public panel: PfAccordionPanel,\n ) {\n super('collapse', { bubbles: true, cancelable: true });\n }\n}\n\n/**\n * An **accordion** is an interactive container that expands and collapses to hide or reveal nested content. It takes advantage of progressive disclosure to help reduce page scrolling, by allowing users to choose whether they want to show or hide more detailed information as needed.\n * @summary Toggle the visibility of sections of content\n * @alias Accordion\n * @fires {AccordionExpandEvent} expand - when a panel expands\n * @fires {AccordionCollapseEvent} collapse - when a panel collapses\n */\n@customElement('pf-accordion')\nexport class PfAccordion extends LitElement {\n static readonly styles: CSSStyleSheet[] = [style];\n\n /** When true, only one accordion panel may be expanded at a time */\n @property({ reflect: true, type: Boolean }) single = false;\n\n /** Whether to apply the `bordered` style variant */\n @property({ type: Boolean, reflect: true }) bordered = false;\n\n /** Whether to apply the `large` style variant */\n @property({ type: Boolean, reflect: true }) large = false;\n\n @property({ type: Boolean, reflect: true }) fixed = false;\n\n /**\n * Sets and reflects the currently expanded accordion 0-based indexes.\n * Use commas to separate multiple indexes.\n * ```html\n * <pf-accordion expanded-index=\"1,2\">\n * ...\n * </pf-accordion>\n * ```\n */\n @property({ attribute: 'expanded-index', converter: NumberListConverter })\n get expandedIndex(): number[] {\n return this.#expandedIndex;\n }\n\n set expandedIndex(value) {\n const old = this.#expandedIndex;\n this.#expandedIndex = value;\n this.#tabindex.atFocusedItemIndex = value.at(-1) ?? -1;\n if (JSON.stringify(old) !== JSON.stringify(value)) {\n this.requestUpdate('expandedIndex', old);\n this.collapseAll().then(async () => {\n for (const i of this.expandedIndex) {\n await this.expand(i);\n }\n });\n }\n }\n\n #logger = new Logger(this);\n\n // actually is read in #init, by the `||=` operator\n // eslint-disable-next-line no-unused-private-class-members\n #initialized = false;\n\n #mo = new MutationObserver(() => this.#init());\n\n #tabindex = RovingTabindexController.of(this, {\n getItems: () => this.headers,\n });\n\n #expandedIndex: number[] = [];\n\n protected expandedSets: Set<number> = new Set<number>();\n\n get #activeHeader() {\n const { headers } = this;\n const index = headers.findIndex(header => header.matches(':focus,:focus-within'));\n return index > -1 ? headers.at(index) : undefined;\n }\n\n get headers(): PfAccordionHeader[] {\n return this.#allHeaders();\n }\n\n get panels(): PfAccordionPanel[] {\n return this.#allPanels();\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.#mo.observe(this, { childList: true });\n this.#init();\n }\n\n render(): TemplateResult<1> {\n return html`\n <!-- Place the \\`pf-accordion-header\\` and \\`pf-accordion-panel\\` elements here. -->\n <slot></slot>\n `;\n }\n\n async firstUpdated(): Promise<void> {\n let lastExpandedIndex: number;\n const { headers, single } = this;\n const lastExpanded = headers.filter(x => x.hasAttribute('expanded')).pop();\n if (lastExpanded) {\n lastExpandedIndex = headers.indexOf(lastExpanded);\n }\n headers.forEach((header, index) => {\n if (header.expanded && (!single || index === lastExpandedIndex)) {\n this.#expandHeader(header, index);\n const panel = this.#panelForHeader(header);\n if (panel) {\n this.#expandPanel(panel);\n }\n }\n });\n }\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const c = await super.getUpdateComplete();\n const results = await Promise.all([\n ...this.#allHeaders().map(x => x.updateComplete),\n ...this.#allPanels().map(x => x.updateComplete),\n ]);\n return c && results.every(Boolean);\n }\n\n @observes('large')\n protected largeChanged(): void {\n for (const el of [...this.headers, ...this.panels]) {\n el.toggleAttribute('large', this.large);\n }\n }\n\n /**\n * Initialize the accordion by connecting headers and panels\n * with aria controls and labels; set up the default disclosure\n * state if not set by the author; and check the URL for default\n * open\n */\n async #init() {\n this.#initialized ||= !!await this.updateComplete;\n this.updateAccessibility();\n }\n\n @listen('focusin')\n protected updateActiveHeader(): void {\n if (this.#activeHeader\n && this.#activeHeader !== this.headers.at(this.#tabindex.atFocusedItemIndex)) {\n this.#tabindex.atFocusedItemIndex = this.headers.indexOf(this.#activeHeader);\n }\n }\n\n #panelForHeader(header: PfAccordionHeader) {\n const next = header.nextElementSibling;\n if (!(next instanceof PfAccordionPanel)) {\n return void this.#logger.error('Sibling element to a header needs to be a panel');\n } else {\n return next;\n }\n }\n\n #expandHeader(header: PfAccordionHeader, index = this.#getIndex(header)) {\n // If this index is not already listed in the expandedSets array, add it\n this.expandedSets.add(index);\n this.#expandedIndex = [...this.expandedSets as Set<number>];\n header.expanded = true;\n }\n\n #expandPanel(panel: PfAccordionPanel) {\n panel.expanded = true;\n panel.hidden = false;\n }\n\n async #collapseHeader(header: PfAccordionHeader, index = this.#getIndex(header)) {\n if (!this.expandedSets) {\n await this.updateComplete;\n }\n this.expandedSets.delete(index);\n header.expanded = false;\n await header.updateComplete;\n }\n\n async #collapsePanel(panel: PfAccordionPanel) {\n await panel.updateComplete;\n if (!panel.expanded) {\n return;\n }\n\n panel.expanded = false;\n panel.hidden = true;\n }\n\n @listen('change')\n protected onChange(event: PfAccordionHeaderChangeEvent): void {\n if (event instanceof PfAccordionHeaderChangeEvent && event.accordion === this) {\n const index = this.#getIndex(event.target);\n if (event.expanded) {\n this.expand(index);\n } else {\n this.collapse(index);\n }\n event.stopPropagation();\n }\n }\n\n #allHeaders(accordion: PfAccordion = this): PfAccordionHeader[] {\n return Array.from(accordion.children ?? []).filter((x): x is PfAccordionHeader =>\n x instanceof PfAccordionHeader);\n }\n\n #allPanels(accordion: PfAccordion = this): PfAccordionPanel[] {\n return Array.from(accordion.children ?? []).filter((x): x is PfAccordionPanel =>\n x instanceof PfAccordionPanel);\n }\n\n #getIndex(el: Element | null) {\n if (el instanceof PfAccordionHeader) {\n return this.headers.findIndex(header => header.id === el.id);\n }\n\n if (el instanceof PfAccordionPanel) {\n return this.panels.findIndex(panel => panel.id === el.id);\n }\n\n this.#logger.warn('The #getIndex method expects to receive a header or panel element.');\n return -1;\n }\n\n public updateAccessibility(): void {\n const { headers } = this;\n\n // For each header in the accordion, attach the aria connections\n headers.forEach(header => {\n const panel = this.#panelForHeader(header);\n if (panel) {\n header.setAttribute('aria-controls', panel.id);\n panel.setAttribute('aria-labelledby', header.id);\n panel.hidden = !panel.expanded;\n }\n });\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to expand.\n * Accepts an optional parent accordion to search for headers and panels.\n * @param index index (0-based) of the panel to expand\n */\n public async expand(index: number): Promise<void> {\n if (index === -1) {\n return;\n }\n\n // Get all the headers and capture the item by index value\n if (this.single) {\n await Promise.all([\n ...this.headers.map((header, index) => header.expanded && this.collapse(index)),\n ]);\n }\n\n const header = this.headers[index];\n if (!header) {\n return;\n }\n\n const panel = this.#panelForHeader(header);\n if (!panel) {\n return;\n }\n\n // If the header and panel exist, open both\n this.#expandHeader(header, index);\n this.#expandPanel(panel);\n\n this.dispatchEvent(new PfAccordionExpandEvent(header, panel));\n\n await this.updateComplete;\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to collapse.\n * @param index index (0-based) of the panel to collapse\n */\n public async collapse(index: number): Promise<void> {\n const header = this.headers.at(index);\n const panel = this.panels.at(index);\n\n if (!header || !panel) {\n return;\n }\n\n this.#collapseHeader(header);\n this.#collapsePanel(panel);\n\n this.dispatchEvent(new PfAccordionCollapseEvent(header, panel));\n await this.updateComplete;\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse.\n * @param index index (0-based) of the panel to toggle\n */\n public async toggle(index: number): Promise<void> {\n const { headers } = this;\n const header = headers[index];\n\n if (!header.expanded) {\n await this.expand(index);\n } else {\n await this.collapse(index);\n }\n }\n\n /**\n * Expands all accordion items.\n */\n public async expandAll(): Promise<void> {\n this.headers.forEach(header => this.#expandHeader(header));\n this.panels.forEach(panel => this.#expandPanel(panel));\n await this.updateComplete;\n }\n\n\n /**\n * Collapses all accordion items.\n */\n public async collapseAll(): Promise<void> {\n this.headers.forEach(header => this.#collapseHeader(header));\n this.panels.forEach(panel => this.#collapsePanel(panel));\n await this.updateComplete;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-accordion': PfAccordion;\n }\n}\n"]}
|
|
@@ -0,0 +1,193 @@
|
|
|
1
|
+
[hidden] {
|
|
2
|
+
display: none !important;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
:host {
|
|
6
|
+
--pf-c-alert--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08));
|
|
7
|
+
--pf-c-alert--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
|
|
8
|
+
--pf-c-alert--GridTemplateColumns: max-content 1fr max-content;
|
|
9
|
+
--pf-c-alert--GridTemplateAreas: "icon title close" ". description description" ". action action";
|
|
10
|
+
--pf-c-alert--BorderTopWidth: var(--pf-global--BorderWidth--md, 2px);
|
|
11
|
+
--pf-c-alert--BorderTopColor: var(--pf-global--default-color--200, #009596);
|
|
12
|
+
--pf-c-alert--PaddingTop: var(--pf-global--spacer--md, 1rem);
|
|
13
|
+
--pf-c-alert--PaddingRight: var(--pf-global--spacer--md, 1rem);
|
|
14
|
+
--pf-c-alert--PaddingBottom: var(--pf-global--spacer--md, 1rem);
|
|
15
|
+
--pf-c-alert--PaddingLeft: var(--pf-global--spacer--md, 1rem);
|
|
16
|
+
--pf-c-alert__FontSize: var(--pf-global--FontSize--sm, 0.875rem);
|
|
17
|
+
--pf-c-alert__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element, 0.375rem) - 0.0625rem);
|
|
18
|
+
--pf-c-alert__toggle--MarginBottom: calc(-1 * var(--pf-global--spacer--form-element, 0.375rem));
|
|
19
|
+
--pf-c-alert__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md, 1rem));
|
|
20
|
+
--pf-c-alert__toggle-icon--Rotate: 0;
|
|
21
|
+
--pf-c-alert__toggle-icon--Transition: var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1));
|
|
22
|
+
--pf-c-alert__icon--Color: var(--pf-global--default-color--200, #009596);
|
|
23
|
+
--pf-c-alert__icon--MarginTop: 0.0625rem;
|
|
24
|
+
--pf-c-alert__icon--MarginRight: var(--pf-global--spacer--sm, 0.5rem);
|
|
25
|
+
--pf-c-alert__icon--FontSize: var(--pf-global--icon--FontSize--md, 1.125rem);
|
|
26
|
+
--pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--bold, 700);
|
|
27
|
+
--pf-c-alert__title--Color: var(--pf-global--default-color--300, #003737);
|
|
28
|
+
--pf-c-alert__title--max-lines: 1;
|
|
29
|
+
--pf-c-alert__action--MarginTop: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);
|
|
30
|
+
--pf-c-alert__action--MarginBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1);
|
|
31
|
+
--pf-c-alert__action--TranslateY: 0.125rem;
|
|
32
|
+
--pf-c-alert__action--MarginRight: calc(var(--pf-global--spacer--sm, 0.5rem) * -1);
|
|
33
|
+
--pf-c-alert__description--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
|
|
34
|
+
--pf-c-alert__action-group--PaddingTop-base: var(--pf-global--spacer--xs, 0.25rem);
|
|
35
|
+
--pf-c-alert__action-group--PaddingTop: var(--pf-c-alert__action-group--PaddingTop-base);
|
|
36
|
+
--pf-c-alert__description--action-group--PaddingTop-base: var(--pf-global--spacer--md, 1rem);
|
|
37
|
+
--pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop-base);
|
|
38
|
+
--pf-c-alert__action-group__c-button--not-last-child--MarginRight: var(--pf-global--spacer--lg, 1.5rem);
|
|
39
|
+
--pf-c-alert--m-success--BorderTopColor: var(--pf-global--success-color--100, #3e8635);
|
|
40
|
+
--pf-c-alert--m-success__icon--Color: var(--pf-global--success-color--100, #3e8635);
|
|
41
|
+
--pf-c-alert--m-success__title--Color: var(--pf-global--success-color--200, #1e4f18);
|
|
42
|
+
--pf-c-alert--m-danger--BorderTopColor: var(--pf-global--danger-color--100, #c9190b);
|
|
43
|
+
--pf-c-alert--m-danger__icon--Color: var(--pf-global--danger-color--100, #c9190b);
|
|
44
|
+
--pf-c-alert--m-danger__title--Color: var(--pf-global--danger-color--200, #a30000);
|
|
45
|
+
--pf-c-alert--m-warning--BorderTopColor: var(--pf-global--warning-color--100, #f0ab00);
|
|
46
|
+
--pf-c-alert--m-warning__icon--Color: var(--pf-global--warning-color--100, #f0ab00);
|
|
47
|
+
--pf-c-alert--m-warning__title--Color: var(--pf-global--warning-color--200, #795600);
|
|
48
|
+
--pf-c-alert--m-info--BorderTopColor: var(--pf-global--info-color--100, #2b9af3);
|
|
49
|
+
--pf-c-alert--m-info__icon--Color: var(--pf-global--info-color--100, #2b9af3);
|
|
50
|
+
--pf-c-alert--m-info__title--Color: var(--pf-global--info-color--200, #002952);
|
|
51
|
+
--pf-c-alert--m-inline--BoxShadow: none;
|
|
52
|
+
--pf-c-alert--m-inline--BackgroundColor: var(--pf-global--palette--cyan-50, #f2f9f9);
|
|
53
|
+
--pf-c-alert--m-inline--m-success--BackgroundColor: var(--pf-global--palette--green-50, #f3faf2);
|
|
54
|
+
--pf-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-global--palette--red-50, #faeae8);
|
|
55
|
+
--pf-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-global--palette--gold-50, #fdf7e7);
|
|
56
|
+
--pf-c-alert--m-inline--m-info--BackgroundColor: var(--pf-global--palette--blue-50, #e7f1fa);
|
|
57
|
+
--pf-c-alert--m-inline--m-plain--BorderTopWidth: 0;
|
|
58
|
+
--pf-c-alert--m-inline--m-plain--BackgroundColor: transparent;
|
|
59
|
+
--pf-c-alert--m-inline--m-plain--PaddingTop: 0;
|
|
60
|
+
--pf-c-alert--m-inline--m-plain--PaddingRight: 0;
|
|
61
|
+
--pf-c-alert--m-inline--m-plain--PaddingBottom: 0;
|
|
62
|
+
--pf-c-alert--m-inline--m-plain--PaddingLeft: 0;
|
|
63
|
+
--pf-c-alert--m-expandable--GridTemplateColumns: auto max-content 1fr max-content;
|
|
64
|
+
--pf-c-alert--m-expandable--GridTemplateAreas: "toggle icon title close" ". . description description" ". . action action";
|
|
65
|
+
--pf-c-alert--m-expandable__description--action-group--PaddingTop: var(--pf-c-alert__action-group--PaddingTop-base);
|
|
66
|
+
--pf-c-alert--m-expanded__toggle-icon--Rotate: 90deg;
|
|
67
|
+
--pf-c-alert--m-expanded__description--action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop-base);
|
|
68
|
+
color: var(--pf-global--Color--100, #151515);
|
|
69
|
+
position: relative;
|
|
70
|
+
display: grid;
|
|
71
|
+
padding: var(--pf-c-alert--PaddingTop) var(--pf-c-alert--PaddingRight) var(--pf-c-alert--PaddingBottom) var(--pf-c-alert--PaddingLeft);
|
|
72
|
+
font-size: var(--pf-c-alert__FontSize);
|
|
73
|
+
background-color: var(--pf-c-alert--BackgroundColor);
|
|
74
|
+
border-top: var(--pf-c-alert--BorderTopWidth) solid var(--pf-c-alert--BorderTopColor);
|
|
75
|
+
box-shadow: var(--pf-c-alert--BoxShadow);
|
|
76
|
+
grid-template-columns: var(--pf-c-alert--GridTemplateColumns);
|
|
77
|
+
grid-template-areas: var(--pf-c-alert--GridTemplateAreas);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
:host([variant="success"]) {
|
|
81
|
+
--pf-c-alert--BorderTopColor: var(--pf-c-alert--m-success--BorderTopColor);
|
|
82
|
+
--pf-c-alert__icon--Color: var(--pf-c-alert--m-success__icon--Color);
|
|
83
|
+
--pf-c-alert__title--Color: var(--pf-c-alert--m-success__title--Color);
|
|
84
|
+
--pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-success--BackgroundColor);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
:host([variant="danger"]) {
|
|
88
|
+
--pf-c-alert--BorderTopColor: var(--pf-c-alert--m-danger--BorderTopColor);
|
|
89
|
+
--pf-c-alert__icon--Color: var(--pf-c-alert--m-danger__icon--Color);
|
|
90
|
+
--pf-c-alert__title--Color: var(--pf-c-alert--m-danger__title--Color);
|
|
91
|
+
--pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-danger--BackgroundColor);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
:host([variant="warning"]) {
|
|
95
|
+
--pf-c-alert--BorderTopColor: var(--pf-c-alert--m-warning--BorderTopColor);
|
|
96
|
+
--pf-c-alert__icon--Color: var(--pf-c-alert--m-warning__icon--Color);
|
|
97
|
+
--pf-c-alert__title--Color: var(--pf-c-alert--m-warning__title--Color);
|
|
98
|
+
--pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-warning--BackgroundColor);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
:host([variant="info"]) {
|
|
102
|
+
--pf-c-alert--BorderTopColor: var(--pf-c-alert--m-info--BorderTopColor);
|
|
103
|
+
--pf-c-alert__icon--Color: var(--pf-c-alert--m-info__icon--Color);
|
|
104
|
+
--pf-c-alert__title--Color: var(--pf-c-alert--m-info__title--Color);
|
|
105
|
+
--pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-info--BackgroundColor);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
:host([inline]) {
|
|
109
|
+
--pf-c-alert--BoxShadow: var(--pf-c-alert--m-inline--BoxShadow);
|
|
110
|
+
--pf-c-alert--BackgroundColor: var(--pf-c-alert--m-inline--BackgroundColor);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
:host([plain]) {
|
|
114
|
+
--pf-c-alert--BorderTopWidth: var(--pf-c-alert--m-inline--m-plain--BorderTopWidth);
|
|
115
|
+
--pf-c-alert--BackgroundColor: var(--pf-c-alert--m-inline--m-plain--BackgroundColor);
|
|
116
|
+
--pf-c-alert--PaddingTop: var(--pf-c-alert--m-inline--m-plain--PaddingTop);
|
|
117
|
+
--pf-c-alert--PaddingRight: var(--pf-c-alert--m-inline--m-plain--PaddingRight);
|
|
118
|
+
--pf-c-alert--PaddingBottom: var(--pf-c-alert--m-inline--m-plain--PaddingBottom);
|
|
119
|
+
--pf-c-alert--PaddingLeft: var(--pf-c-alert--m-inline--m-plain--PaddingLeft);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
:host([expandable]) {
|
|
123
|
+
--pf-c-alert--GridTemplateColumns: var(--pf-c-alert--m-expandable--GridTemplateColumns);
|
|
124
|
+
--pf-c-alert--GridTemplateAreas: var(--pf-c-alert--m-expandable--GridTemplateAreas);
|
|
125
|
+
--pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert--m-expandable__description--action-group--PaddingTop);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
:host([expanded]) {
|
|
129
|
+
--pf-c-alert__toggle-icon--Rotate: var(--pf-c-alert--m-expanded__toggle-icon--Rotate);
|
|
130
|
+
--pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert--m-expanded__description--action-group--PaddingTop);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
#toggle {
|
|
134
|
+
margin-top: var(--pf-c-alert__toggle--MarginTop);
|
|
135
|
+
margin-bottom: var(--pf-c-alert__toggle--MarginBottom);
|
|
136
|
+
margin-left: var(--pf-c-alert__toggle--MarginLeft);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
#icon {
|
|
140
|
+
grid-area: icon;
|
|
141
|
+
display: flex;
|
|
142
|
+
margin-top: var(--pf-c-alert__icon--MarginTop);
|
|
143
|
+
margin-right: var(--pf-c-alert__icon--MarginRight);
|
|
144
|
+
font-size: var(--pf-c-alert__icon--FontSize);
|
|
145
|
+
--pf-icon--size: var(--pf-c-alert__icon--FontSize);
|
|
146
|
+
color: var(--pf-c-alert__icon--Color);
|
|
147
|
+
pf-icon,
|
|
148
|
+
::slotted(pf-icon) {
|
|
149
|
+
translate: 0 0.125em;
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
#title {
|
|
154
|
+
grid-area: title;
|
|
155
|
+
font-weight: var(--pf-c-alert__title--FontWeight);
|
|
156
|
+
color: var(--pf-c-alert__title--Color);
|
|
157
|
+
word-break: break-word;
|
|
158
|
+
::slotted(*) {
|
|
159
|
+
color: inherit;
|
|
160
|
+
font-weight: inherit;
|
|
161
|
+
}
|
|
162
|
+
:is(h1,h2,h3,h4,h5,h6),
|
|
163
|
+
::slotted(:is(h1,h2,h3,h4,h5,h6)) {
|
|
164
|
+
margin-block: 0 !important;
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
#close {
|
|
169
|
+
grid-area: close;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
#description {
|
|
173
|
+
grid-area: description;
|
|
174
|
+
padding-top: var(--pf-c-alert__description--PaddingTop);
|
|
175
|
+
word-break: break-word;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
#actions {
|
|
179
|
+
grid-area: action;
|
|
180
|
+
--pf-c-alert__action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop);
|
|
181
|
+
|
|
182
|
+
& ::slotted(a) {
|
|
183
|
+
text-decoration: none;
|
|
184
|
+
color: #06c;
|
|
185
|
+
margin-inline-end: 1rem;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
& ::slotted(a:hover),
|
|
189
|
+
& ::slotted(a:focus),
|
|
190
|
+
& ::slotted(a:active) {
|
|
191
|
+
color: #004080;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { LitElement, type TemplateResult } from 'lit';
|
|
2
|
+
import '@patternfly/elements/pf-icon/pf-icon.js';
|
|
3
|
+
import '@patternfly/elements/pf-button/pf-button.js';
|
|
4
|
+
export declare class PfAlertCloseEvent extends Event {
|
|
5
|
+
reason: 'closed' | 'timeout';
|
|
6
|
+
constructor(reason?: 'closed' | 'timeout');
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* An **alert** is a notification that provides brief information to the user
|
|
10
|
+
* without blocking their workflow.
|
|
11
|
+
*
|
|
12
|
+
* @fires close - When an alert is closed e.g. when close button is clicked or when the alert times
|
|
13
|
+
* out. Cancel the event to prevent the alert from being removed.
|
|
14
|
+
*/
|
|
15
|
+
export declare class PfAlert extends LitElement {
|
|
16
|
+
#private;
|
|
17
|
+
static readonly styles: CSSStyleSheet[];
|
|
18
|
+
/**
|
|
19
|
+
* Use the `timeout` property to automatically dismiss an alert after a period
|
|
20
|
+
* of time. If set to `true`, the timeout will be 8000 milliseconds. Provide a
|
|
21
|
+
* specific value to dismiss the alert after a different number of
|
|
22
|
+
* milliseconds.
|
|
23
|
+
*/
|
|
24
|
+
timeout: number | true;
|
|
25
|
+
/**
|
|
26
|
+
* PatternFly supports several alert variants for different scenarios.
|
|
27
|
+
* Each variant has an associated status icon, background, and alert title
|
|
28
|
+
* coded to communicate the severity of an alert. Use the variant property to
|
|
29
|
+
* apply the following styling options. If no variant is specified, then the
|
|
30
|
+
* variant will be set to "default".
|
|
31
|
+
*
|
|
32
|
+
* - **Default** - Use for generic messages with no associated severity
|
|
33
|
+
* - **Info** - Use for general informational messages
|
|
34
|
+
* - **Success** - Use to indicate that a task or process has been completed successfully
|
|
35
|
+
* - **Warning** - Use to indicate that a non-critical error has occurred
|
|
36
|
+
* - **Danger** - Use to indicate that a critical or blocking error has occurred
|
|
37
|
+
*/
|
|
38
|
+
variant: 'warning' | 'custom' | 'neutral' | 'info' | 'success' | 'danger';
|
|
39
|
+
/**
|
|
40
|
+
* Use the `icon` attribute to replace a default alert icon with a custom icon.
|
|
41
|
+
* The `icon` attribute is overridden by the `icon` slot.
|
|
42
|
+
*/
|
|
43
|
+
icon?: string;
|
|
44
|
+
/**
|
|
45
|
+
* The title of the alert. Overridden by the title slot.
|
|
46
|
+
*/
|
|
47
|
+
titleText?: string;
|
|
48
|
+
/**
|
|
49
|
+
* The heading level of the alert's title. Overridden by the title slot.
|
|
50
|
+
* Default: 3
|
|
51
|
+
*/
|
|
52
|
+
titleLevel?: 1 | 2 | 3 | 4 | 5 | 6;
|
|
53
|
+
/**
|
|
54
|
+
* Use inline alerts to display an alert inline with content. All alert
|
|
55
|
+
* variants may use the `inline` attribute to position alerts in content-heavy
|
|
56
|
+
* areas, such as within forms, wizards, or drawers.
|
|
57
|
+
*/
|
|
58
|
+
inline: boolean;
|
|
59
|
+
/**
|
|
60
|
+
* Use the `plain` attribute to make any inline alert plain. Plain styling
|
|
61
|
+
* removes the colored background but keeps colored text and icons.
|
|
62
|
+
*/
|
|
63
|
+
plain: boolean;
|
|
64
|
+
/**
|
|
65
|
+
* An alert can contain additional, hidden information that is made visible
|
|
66
|
+
* when users click a caret icon. This information can be expanded and
|
|
67
|
+
* collapsed each time the icon is clicked.
|
|
68
|
+
*
|
|
69
|
+
* It is not recommended to use an expandable alert with a timeout in a toast
|
|
70
|
+
* alert group because the alert could timeout before users have time to
|
|
71
|
+
* interact with and view the entire alert.
|
|
72
|
+
*
|
|
73
|
+
* See the toast alert considerations section of the alert accessibility
|
|
74
|
+
* documentation to understand the accessibility risks associated with using
|
|
75
|
+
* toast alerts.
|
|
76
|
+
*/
|
|
77
|
+
expandable: boolean;
|
|
78
|
+
/**
|
|
79
|
+
* True when an expandable alert is expanded
|
|
80
|
+
*/
|
|
81
|
+
expanded: boolean;
|
|
82
|
+
/**
|
|
83
|
+
* When true, the alert displays a close button
|
|
84
|
+
* Clicking the close button removes the alert
|
|
85
|
+
*/
|
|
86
|
+
dismissable: boolean;
|
|
87
|
+
disconnectedCallback(): void;
|
|
88
|
+
render(): TemplateResult<1>;
|
|
89
|
+
protected timeoutChanged(): void;
|
|
90
|
+
}
|
|
91
|
+
declare global {
|
|
92
|
+
interface HTMLElementTagNameMap {
|
|
93
|
+
'pf-alert': PfAlert;
|
|
94
|
+
}
|
|
95
|
+
}
|