From 8cad71b1de7cb39aa77372fa8ae228b813e700c5 Mon Sep 17 00:00:00 2001 From: Kyle Buchanan Date: Tue, 1 Feb 2022 16:34:58 -0500 Subject: [PATCH 1/4] v1.12.3 --- .../dist/pfe-accordion-header.css.map | 1 + .../dist/pfe-accordion-header.js | 267 ++ .../dist/pfe-accordion-header.min.css.map | 1 + .../dist/pfe-accordion-panel.css.map | 1 + .../pfe-accordion/dist/pfe-accordion-panel.js | 109 + .../dist/pfe-accordion-panel.min.css.map | 1 + .../pfe-accordion/dist/pfe-accordion.css.map | 1 + elements/pfe-accordion/dist/pfe-accordion.js | 990 +++++ .../pfe-accordion/dist/pfe-accordion.js.map | 1 + .../dist/pfe-accordion.min.css.map | 1 + .../pfe-accordion/dist/pfe-accordion.min.js | 74 + .../dist/pfe-accordion.min.js.map | 1 + .../pfe-accordion/dist/pfe-accordion.umd.js | 1210 ++++++ .../dist/pfe-accordion.umd.js.map | 1 + .../dist/pfe-accordion.umd.min.js | 2 + .../dist/pfe-accordion.umd.min.js.map | 1 + elements/pfe-accordion/package.json | 6 +- .../pfe-accordion/src/pfe-accordion-panel.js | 2 +- .../dist/pfe-autocomplete.css.map | 1 + .../pfe-autocomplete/dist/pfe-autocomplete.js | 655 ++++ .../dist/pfe-autocomplete.js.map | 1 + .../dist/pfe-autocomplete.json | 63 + .../dist/pfe-autocomplete.min.css.map | 1 + .../dist/pfe-autocomplete.min.js | 26 + .../dist/pfe-autocomplete.min.js.map | 1 + .../dist/pfe-autocomplete.umd.js | 746 ++++ .../dist/pfe-autocomplete.umd.js.map | 1 + .../dist/pfe-autocomplete.umd.min.js | 2 + .../dist/pfe-autocomplete.umd.min.js.map | 1 + elements/pfe-autocomplete/package.json | 6 +- elements/pfe-avatar/dist/pfe-avatar.css.map | 1 + elements/pfe-avatar/dist/pfe-avatar.js | 483 +++ elements/pfe-avatar/dist/pfe-avatar.js.map | 1 + .../pfe-avatar/dist/pfe-avatar.min.css.map | 1 + elements/pfe-avatar/dist/pfe-avatar.min.js | 27 + .../pfe-avatar/dist/pfe-avatar.min.js.map | 1 + elements/pfe-avatar/dist/pfe-avatar.umd.js | 644 ++++ .../pfe-avatar/dist/pfe-avatar.umd.js.map | 1 + .../pfe-avatar/dist/pfe-avatar.umd.min.js | 2 + .../pfe-avatar/dist/pfe-avatar.umd.min.js.map | 1 + elements/pfe-avatar/package.json | 6 +- elements/pfe-badge/dist/pfe-badge.css.map | 1 + elements/pfe-badge/dist/pfe-badge.js | 109 + elements/pfe-badge/dist/pfe-badge.js.map | 1 + elements/pfe-badge/dist/pfe-badge.json | 42 + elements/pfe-badge/dist/pfe-badge.min.css.map | 1 + elements/pfe-badge/dist/pfe-badge.min.js | 26 + elements/pfe-badge/dist/pfe-badge.min.js.map | 1 + elements/pfe-badge/dist/pfe-badge.umd.js | 210 ++ elements/pfe-badge/dist/pfe-badge.umd.js.map | 1 + elements/pfe-badge/dist/pfe-badge.umd.min.js | 2 + .../pfe-badge/dist/pfe-badge.umd.min.js.map | 1 + elements/pfe-badge/package.json | 6 +- elements/pfe-band/dist/pfe-band.css.map | 1 + elements/pfe-band/dist/pfe-band.js | 253 ++ elements/pfe-band/dist/pfe-band.js.map | 1 + elements/pfe-band/dist/pfe-band.min.css.map | 1 + elements/pfe-band/dist/pfe-band.min.js | 26 + elements/pfe-band/dist/pfe-band.min.js.map | 1 + elements/pfe-band/dist/pfe-band.umd.js | 300 ++ elements/pfe-band/dist/pfe-band.umd.js.map | 1 + elements/pfe-band/dist/pfe-band.umd.min.js | 2 + .../pfe-band/dist/pfe-band.umd.min.js.map | 1 + elements/pfe-band/package.json | 6 +- elements/pfe-button/dist/pfe-button.css.map | 1 + elements/pfe-button/dist/pfe-button.js | 241 ++ elements/pfe-button/dist/pfe-button.js.map | 1 + elements/pfe-button/dist/pfe-button.json | 45 + .../pfe-button/dist/pfe-button.min.css.map | 1 + elements/pfe-button/dist/pfe-button.min.js | 27 + .../pfe-button/dist/pfe-button.min.js.map | 1 + elements/pfe-button/dist/pfe-button.umd.js | 357 ++ .../pfe-button/dist/pfe-button.umd.js.map | 1 + .../pfe-button/dist/pfe-button.umd.min.js | 2 + .../pfe-button/dist/pfe-button.umd.min.js.map | 1 + elements/pfe-button/package.json | 6 +- elements/pfe-card/dist/pfe-card--lightdom.css | 8 + .../pfe-card/dist/pfe-card--lightdom.css.map | 1 + .../pfe-card/dist/pfe-card--lightdom.min.css | 2 + .../dist/pfe-card--lightdom.min.css.map | 1 + elements/pfe-card/dist/pfe-card.css.map | 1 + elements/pfe-card/dist/pfe-card.js | 186 + elements/pfe-card/dist/pfe-card.js.map | 1 + elements/pfe-card/dist/pfe-card.min.css.map | 1 + elements/pfe-card/dist/pfe-card.min.js | 26 + elements/pfe-card/dist/pfe-card.min.js.map | 1 + elements/pfe-card/dist/pfe-card.umd.js | 256 ++ elements/pfe-card/dist/pfe-card.umd.js.map | 1 + elements/pfe-card/dist/pfe-card.umd.min.js | 2 + .../pfe-card/dist/pfe-card.umd.min.js.map | 1 + elements/pfe-card/package.json | 6 +- .../pfe-clipboard/dist/pfe-clipboard.css.map | 1 + elements/pfe-clipboard/dist/pfe-clipboard.js | 369 ++ .../pfe-clipboard/dist/pfe-clipboard.js.map | 1 + .../dist/pfe-clipboard.min.css.map | 1 + .../pfe-clipboard/dist/pfe-clipboard.min.js | 26 + .../dist/pfe-clipboard.min.js.map | 1 + .../pfe-clipboard/dist/pfe-clipboard.umd.js | 482 +++ .../dist/pfe-clipboard.umd.js.map | 1 + .../dist/pfe-clipboard.umd.min.js | 2 + .../dist/pfe-clipboard.umd.min.js.map | 1 + elements/pfe-clipboard/package.json | 6 +- .../dist/pfe-codeblock-material-dark.css.map | 1 + .../pfe-codeblock-material-dark.min.css.map | 1 + .../dist/pfe-codeblock-material-light.css.map | 1 + .../pfe-codeblock-material-light.min.css.map | 1 + .../pfe-codeblock/dist/pfe-codeblock.css.map | 1 + elements/pfe-codeblock/dist/pfe-codeblock.js | 2078 ++++++++++ .../pfe-codeblock/dist/pfe-codeblock.js.map | 1 + .../dist/pfe-codeblock.min.css.map | 1 + .../pfe-codeblock/dist/pfe-codeblock.min.js | 34 + .../dist/pfe-codeblock.min.js.map | 1 + .../pfe-codeblock/dist/pfe-codeblock.umd.js | 2159 +++++++++++ .../dist/pfe-codeblock.umd.js.map | 1 + .../dist/pfe-codeblock.umd.min.js | 2 + .../dist/pfe-codeblock.umd.min.js.map | 1 + elements/pfe-codeblock/package.json | 6 +- .../dist/pfe-collapse-panel.css.map | 1 + .../dist/pfe-collapse-panel.min.css.map | 1 + .../dist/pfe-collapse-toggle.css.map | 1 + .../dist/pfe-collapse-toggle.min.css.map | 1 + .../pfe-collapse/dist/pfe-collapse.css.map | 1 + elements/pfe-collapse/dist/pfe-collapse.js | 467 +++ .../pfe-collapse/dist/pfe-collapse.js.map | 1 + elements/pfe-collapse/dist/pfe-collapse.json | 35 + .../dist/pfe-collapse.min.css.map | 1 + .../pfe-collapse/dist/pfe-collapse.min.js | 26 + .../pfe-collapse/dist/pfe-collapse.min.js.map | 1 + .../pfe-collapse/dist/pfe-collapse.umd.js | 638 ++++ .../pfe-collapse/dist/pfe-collapse.umd.js.map | 1 + .../pfe-collapse/dist/pfe-collapse.umd.min.js | 2 + .../dist/pfe-collapse.umd.min.js.map | 1 + elements/pfe-collapse/package.json | 4 +- .../dist/pfe-content-set.css.map | 1 + .../pfe-content-set/dist/pfe-content-set.js | 626 +++ .../dist/pfe-content-set.js.map | 1 + .../dist/pfe-content-set.min.css.map | 1 + .../dist/pfe-content-set.min.js | 26 + .../dist/pfe-content-set.min.js.map | 1 + .../dist/pfe-content-set.umd.js | 821 ++++ .../dist/pfe-content-set.umd.js.map | 1 + .../dist/pfe-content-set.umd.min.js | 2 + .../dist/pfe-content-set.umd.min.js.map | 1 + elements/pfe-content-set/package.json | 8 +- elements/pfe-cta/dist/pfe-cta--lightdom.css | 37 + .../pfe-cta/dist/pfe-cta--lightdom.css.map | 1 + .../pfe-cta/dist/pfe-cta--lightdom.min.css | 2 + .../dist/pfe-cta--lightdom.min.css.map | 1 + elements/pfe-cta/dist/pfe-cta.css.map | 1 + elements/pfe-cta/dist/pfe-cta.js | 293 ++ elements/pfe-cta/dist/pfe-cta.js.map | 1 + elements/pfe-cta/dist/pfe-cta.json | 83 + elements/pfe-cta/dist/pfe-cta.min.css.map | 1 + elements/pfe-cta/dist/pfe-cta.min.js | 26 + elements/pfe-cta/dist/pfe-cta.min.js.map | 1 + elements/pfe-cta/dist/pfe-cta.umd.js | 417 ++ elements/pfe-cta/dist/pfe-cta.umd.js.map | 1 + elements/pfe-cta/dist/pfe-cta.umd.min.js | 2 + elements/pfe-cta/dist/pfe-cta.umd.min.js.map | 1 + elements/pfe-cta/package.json | 6 +- .../pfe-datetime/dist/pfe-datetime.css.map | 1 + elements/pfe-datetime/dist/pfe-datetime.js | 235 ++ .../pfe-datetime/dist/pfe-datetime.js.map | 1 + elements/pfe-datetime/dist/pfe-datetime.json | 89 + .../dist/pfe-datetime.min.css.map | 1 + .../pfe-datetime/dist/pfe-datetime.min.js | 26 + .../pfe-datetime/dist/pfe-datetime.min.js.map | 1 + .../pfe-datetime/dist/pfe-datetime.umd.js | 310 ++ .../pfe-datetime/dist/pfe-datetime.umd.js.map | 1 + .../pfe-datetime/dist/pfe-datetime.umd.min.js | 2 + .../dist/pfe-datetime.umd.min.js.map | 1 + elements/pfe-datetime/package.json | 4 +- .../dist/pfe-dropdown-item.css.map | 1 + .../dist/pfe-dropdown-item.min.css.map | 1 + .../pfe-dropdown/dist/pfe-dropdown.css.map | 1 + elements/pfe-dropdown/dist/pfe-dropdown.js | 567 +++ .../pfe-dropdown/dist/pfe-dropdown.js.map | 1 + elements/pfe-dropdown/dist/pfe-dropdown.json | 38 + .../dist/pfe-dropdown.min.css.map | 1 + .../pfe-dropdown/dist/pfe-dropdown.min.js | 50 + .../pfe-dropdown/dist/pfe-dropdown.min.js.map | 1 + .../pfe-dropdown/dist/pfe-dropdown.umd.js | 732 ++++ .../pfe-dropdown/dist/pfe-dropdown.umd.js.map | 1 + .../pfe-dropdown/dist/pfe-dropdown.umd.min.js | 2 + .../dist/pfe-dropdown.umd.min.js.map | 1 + elements/pfe-dropdown/package.json | 6 +- .../dist/pfe-health-index.css.map | 1 + .../pfe-health-index/dist/pfe-health-index.js | 176 + .../dist/pfe-health-index.js.map | 1 + .../dist/pfe-health-index.json | 40 + .../dist/pfe-health-index.min.css.map | 1 + .../dist/pfe-health-index.min.js | 26 + .../dist/pfe-health-index.min.js.map | 1 + .../dist/pfe-health-index.umd.js | 218 ++ .../dist/pfe-health-index.umd.js.map | 1 + .../dist/pfe-health-index.umd.min.js | 2 + .../dist/pfe-health-index.umd.min.js.map | 1 + elements/pfe-health-index/package.json | 6 +- .../dist/pfe-icon-panel.css.map | 1 + .../pfe-icon-panel/dist/pfe-icon-panel.js | 142 + .../pfe-icon-panel/dist/pfe-icon-panel.js.map | 1 + .../pfe-icon-panel/dist/pfe-icon-panel.json | 109 + .../dist/pfe-icon-panel.min.css.map | 1 + .../pfe-icon-panel/dist/pfe-icon-panel.min.js | 26 + .../dist/pfe-icon-panel.min.js.map | 1 + .../pfe-icon-panel/dist/pfe-icon-panel.umd.js | 200 + .../dist/pfe-icon-panel.umd.js.map | 1 + .../dist/pfe-icon-panel.umd.min.js | 2 + .../dist/pfe-icon-panel.umd.min.js.map | 1 + elements/pfe-icon-panel/package.json | 8 +- elements/pfe-icon/dist/pfe-icon.css.map | 1 + elements/pfe-icon/dist/pfe-icon.js | 357 ++ elements/pfe-icon/dist/pfe-icon.js.map | 1 + elements/pfe-icon/dist/pfe-icon.min.css.map | 1 + elements/pfe-icon/dist/pfe-icon.min.js | 27 + elements/pfe-icon/dist/pfe-icon.min.js.map | 1 + elements/pfe-icon/dist/pfe-icon.umd.js | 498 +++ elements/pfe-icon/dist/pfe-icon.umd.js.map | 1 + elements/pfe-icon/dist/pfe-icon.umd.min.js | 2 + .../pfe-icon/dist/pfe-icon.umd.min.js.map | 1 + elements/pfe-icon/package.json | 6 +- .../dist/pfe-jump-links-nav.css.map | 1 + .../dist/pfe-jump-links-nav.min.css.map | 1 + .../pfe-jump-links/dist/pfe-jump-links.js | 1400 +++++++ .../pfe-jump-links/dist/pfe-jump-links.js.map | 1 + .../pfe-jump-links/dist/pfe-jump-links.min.js | 75 + .../dist/pfe-jump-links.min.js.map | 1 + .../pfe-jump-links/dist/pfe-jump-links.umd.js | 1611 ++++++++ .../dist/pfe-jump-links.umd.js.map | 1 + .../dist/pfe-jump-links.umd.min.js | 2 + .../dist/pfe-jump-links.umd.min.js.map | 1 + elements/pfe-jump-links/package.json | 8 +- .../pfe-markdown/dist/pfe-markdown.css.map | 1 + elements/pfe-markdown/dist/pfe-markdown.js | 197 + .../pfe-markdown/dist/pfe-markdown.js.map | 1 + elements/pfe-markdown/dist/pfe-markdown.json | 37 + .../dist/pfe-markdown.min.css.map | 1 + .../pfe-markdown/dist/pfe-markdown.min.js | 26 + .../pfe-markdown/dist/pfe-markdown.min.js.map | 1 + .../pfe-markdown/dist/pfe-markdown.umd.js | 891 +++++ .../pfe-markdown/dist/pfe-markdown.umd.js.map | 1 + .../pfe-markdown/dist/pfe-markdown.umd.min.js | 2 + .../dist/pfe-markdown.umd.min.js.map | 1 + elements/pfe-markdown/package.json | 6 +- elements/pfe-modal/dist/pfe-modal.css.map | 1 + elements/pfe-modal/dist/pfe-modal.js | 302 ++ elements/pfe-modal/dist/pfe-modal.js.map | 1 + elements/pfe-modal/dist/pfe-modal.json | 56 + elements/pfe-modal/dist/pfe-modal.min.css.map | 1 + elements/pfe-modal/dist/pfe-modal.min.js | 26 + elements/pfe-modal/dist/pfe-modal.min.js.map | 1 + elements/pfe-modal/dist/pfe-modal.umd.js | 411 ++ elements/pfe-modal/dist/pfe-modal.umd.js.map | 1 + elements/pfe-modal/dist/pfe-modal.umd.min.js | 2 + .../pfe-modal/dist/pfe-modal.umd.min.js.map | 1 + elements/pfe-modal/package.json | 6 +- .../dist/pfe-navigation--lightdom.css | 3357 +++++++++++++++++ .../dist/pfe-navigation--lightdom.css.map | 1 + .../dist/pfe-navigation--lightdom.min.css | 2 + .../dist/pfe-navigation--lightdom.min.css.map | 1 + .../dist/pfe-navigation--noscript.css | 102 + .../dist/pfe-navigation--noscript.css.map | 1 + .../dist/pfe-navigation--noscript.min.css | 2 + .../dist/pfe-navigation--noscript.min.css.map | 1 + .../dist/pfe-navigation-item.css.map | 1 + .../dist/pfe-navigation-item.min.css.map | 1 + .../dist/pfe-navigation-main.css.map | 1 + .../dist/pfe-navigation-main.min.css.map | 1 + .../dist/pfe-navigation.css.map | 1 + .../pfe-navigation/dist/pfe-navigation.js | 1055 ++++++ .../pfe-navigation/dist/pfe-navigation.js.map | 1 + .../pfe-navigation/dist/pfe-navigation.json | 184 + .../dist/pfe-navigation.min.css.map | 1 + .../pfe-navigation/dist/pfe-navigation.min.js | 74 + .../dist/pfe-navigation.min.js.map | 1 + .../pfe-navigation/dist/pfe-navigation.umd.js | 1218 ++++++ .../dist/pfe-navigation.umd.js.map | 1 + .../dist/pfe-navigation.umd.min.js | 2 + .../dist/pfe-navigation.umd.min.js.map | 1 + elements/pfe-navigation/package.json | 10 +- elements/pfe-number/dist/pfe-number.css.map | 1 + elements/pfe-number/dist/pfe-number.js | 1152 ++++++ elements/pfe-number/dist/pfe-number.js.map | 1 + elements/pfe-number/dist/pfe-number.json | 38 + .../pfe-number/dist/pfe-number.min.css.map | 1 + elements/pfe-number/dist/pfe-number.min.js | 34 + .../pfe-number/dist/pfe-number.min.js.map | 1 + elements/pfe-number/dist/pfe-number.umd.js | 1238 ++++++ .../pfe-number/dist/pfe-number.umd.js.map | 1 + .../pfe-number/dist/pfe-number.umd.min.js | 2 + .../pfe-number/dist/pfe-number.umd.min.js.map | 1 + elements/pfe-number/package.json | 4 +- .../dist/pfe-page-status.css.map | 1 + .../pfe-page-status/dist/pfe-page-status.js | 109 + .../dist/pfe-page-status.js.map | 1 + .../dist/pfe-page-status.min.css.map | 1 + .../dist/pfe-page-status.min.js | 26 + .../dist/pfe-page-status.min.js.map | 1 + .../dist/pfe-page-status.umd.js | 177 + .../dist/pfe-page-status.umd.js.map | 1 + .../dist/pfe-page-status.umd.min.js | 2 + .../dist/pfe-page-status.umd.min.js.map | 1 + elements/pfe-page-status/package.json | 6 +- .../dist/pfe-primary-detail--lightdom.css | 6 + .../dist/pfe-primary-detail--lightdom.css.map | 1 + .../dist/pfe-primary-detail--lightdom.min.css | 2 + .../pfe-primary-detail--lightdom.min.css.map | 1 + .../dist/pfe-primary-detail.css.map | 1 + .../dist/pfe-primary-detail.js | 803 ++++ .../dist/pfe-primary-detail.js.map | 1 + .../dist/pfe-primary-detail.min.css.map | 1 + .../dist/pfe-primary-detail.min.js | 26 + .../dist/pfe-primary-detail.min.js.map | 1 + .../dist/pfe-primary-detail.umd.js | 974 +++++ .../dist/pfe-primary-detail.umd.js.map | 1 + .../dist/pfe-primary-detail.umd.min.js | 2 + .../dist/pfe-primary-detail.umd.min.js.map | 1 + elements/pfe-primary-detail/package.json | 6 +- .../dist/pfe-progress-indicator.css.map | 1 + .../dist/pfe-progress-indicator.js | 117 + .../dist/pfe-progress-indicator.js.map | 1 + .../dist/pfe-progress-indicator.json | 50 + .../dist/pfe-progress-indicator.min.css.map | 1 + .../dist/pfe-progress-indicator.min.js | 26 + .../dist/pfe-progress-indicator.min.js.map | 1 + .../dist/pfe-progress-indicator.umd.js | 225 ++ .../dist/pfe-progress-indicator.umd.js.map | 1 + .../dist/pfe-progress-indicator.umd.min.js | 2 + .../pfe-progress-indicator.umd.min.js.map | 1 + elements/pfe-progress-indicator/package.json | 6 +- .../dist/pfe-progress-steps-item.css.map | 1 + .../dist/pfe-progress-steps-item.min.css.map | 1 + .../dist/pfe-progress-steps.css.map | 1 + .../dist/pfe-progress-steps.js | 437 +++ .../dist/pfe-progress-steps.js.map | 1 + .../dist/pfe-progress-steps.min.css.map | 1 + .../dist/pfe-progress-steps.min.js | 51 + .../dist/pfe-progress-steps.min.js.map | 1 + .../dist/pfe-progress-steps.umd.js | 575 +++ .../dist/pfe-progress-steps.umd.js.map | 1 + .../dist/pfe-progress-steps.umd.min.js | 2 + .../dist/pfe-progress-steps.umd.min.js.map | 1 + elements/pfe-progress-steps/package.json | 6 +- .../pfe-readtime/dist/pfe-readtime.css.map | 1 + elements/pfe-readtime/dist/pfe-readtime.js | 199 + .../pfe-readtime/dist/pfe-readtime.js.map | 1 + .../dist/pfe-readtime.min.css.map | 1 + .../pfe-readtime/dist/pfe-readtime.min.js | 26 + .../pfe-readtime/dist/pfe-readtime.min.js.map | 1 + .../pfe-readtime/dist/pfe-readtime.umd.js | 317 ++ .../pfe-readtime/dist/pfe-readtime.umd.js.map | 1 + .../pfe-readtime/dist/pfe-readtime.umd.min.js | 2 + .../dist/pfe-readtime.umd.min.js.map | 1 + elements/pfe-readtime/package.json | 4 +- elements/pfe-sass/package.json | 2 +- elements/pfe-select/dist/pfe-select.css.map | 1 + elements/pfe-select/dist/pfe-select.js | 211 ++ elements/pfe-select/dist/pfe-select.js.map | 1 + .../pfe-select/dist/pfe-select.min.css.map | 1 + elements/pfe-select/dist/pfe-select.min.js | 26 + .../pfe-select/dist/pfe-select.min.js.map | 1 + elements/pfe-select/dist/pfe-select.umd.js | 325 ++ .../pfe-select/dist/pfe-select.umd.js.map | 1 + .../pfe-select/dist/pfe-select.umd.min.js | 2 + .../pfe-select/dist/pfe-select.umd.min.js.map | 1 + elements/pfe-select/package.json | 6 +- elements/pfe-styles/dist/pfe-base.css | 290 ++ elements/pfe-styles/dist/pfe-base.css.map | 1 + elements/pfe-styles/dist/pfe-base.min.css | 2 + elements/pfe-styles/dist/pfe-base.min.css.map | 1 + elements/pfe-styles/dist/pfe-context.css | 193 + elements/pfe-styles/dist/pfe-context.css.map | 1 + elements/pfe-styles/dist/pfe-context.min.css | 2 + .../pfe-styles/dist/pfe-context.min.css.map | 1 + elements/pfe-styles/dist/pfe-layouts.css | 2664 +++++++++++++ elements/pfe-styles/dist/pfe-layouts.css.map | 1 + elements/pfe-styles/dist/pfe-layouts.min.css | 2 + .../pfe-styles/dist/pfe-layouts.min.css.map | 1 + .../dist/pfe-typography-classes.css | 323 ++ .../dist/pfe-typography-classes.css.map | 1 + .../dist/pfe-typography-classes.min.css | 2 + .../dist/pfe-typography-classes.min.css.map | 1 + .../dist/pfe-typography-deprecated.css | 195 + .../dist/pfe-typography-deprecated.css.map | 1 + .../dist/pfe-typography-deprecated.min.css | 2 + .../pfe-typography-deprecated.min.css.map | 1 + elements/pfe-styles/dist/pfe-vars-as-px.css | 22 + .../pfe-styles/dist/pfe-vars-as-px.min.css | 2 + elements/pfe-styles/dist/red-hat-font.css | 101 + elements/pfe-styles/dist/red-hat-font.min.css | 2 + elements/pfe-styles/package.json | 4 +- elements/pfe-tabs/dist/pfe-tab-panel.css.map | 1 + elements/pfe-tabs/dist/pfe-tab-panel.js | 148 + .../pfe-tabs/dist/pfe-tab-panel.min.css.map | 1 + elements/pfe-tabs/dist/pfe-tab.css.map | 1 + elements/pfe-tabs/dist/pfe-tab.js | 224 ++ elements/pfe-tabs/dist/pfe-tab.min.css.map | 1 + elements/pfe-tabs/dist/pfe-tabs.css.map | 1 + elements/pfe-tabs/dist/pfe-tabs.js | 946 +++++ elements/pfe-tabs/dist/pfe-tabs.js.map | 1 + elements/pfe-tabs/dist/pfe-tabs.min.css.map | 1 + elements/pfe-tabs/dist/pfe-tabs.min.js | 74 + elements/pfe-tabs/dist/pfe-tabs.min.js.map | 1 + elements/pfe-tabs/dist/pfe-tabs.umd.js | 1150 ++++++ elements/pfe-tabs/dist/pfe-tabs.umd.js.map | 1 + elements/pfe-tabs/dist/pfe-tabs.umd.min.js | 2 + .../pfe-tabs/dist/pfe-tabs.umd.min.js.map | 1 + elements/pfe-tabs/package.json | 6 +- elements/pfe-toast/dist/pfe-toast.css.map | 1 + elements/pfe-toast/dist/pfe-toast.js | 256 ++ elements/pfe-toast/dist/pfe-toast.js.map | 1 + elements/pfe-toast/dist/pfe-toast.json | 46 + elements/pfe-toast/dist/pfe-toast.min.css.map | 1 + elements/pfe-toast/dist/pfe-toast.min.js | 26 + elements/pfe-toast/dist/pfe-toast.min.js.map | 1 + elements/pfe-toast/dist/pfe-toast.umd.js | 357 ++ elements/pfe-toast/dist/pfe-toast.umd.js.map | 1 + elements/pfe-toast/dist/pfe-toast.umd.min.js | 2 + .../pfe-toast/dist/pfe-toast.umd.min.js.map | 1 + elements/pfe-toast/package.json | 6 +- .../pfelement/dist/pfelement--noscript.css | 6 + .../dist/pfelement--noscript.css.map | 1 + .../dist/pfelement--noscript.min.css | 2 + .../dist/pfelement--noscript.min.css.map | 1 + elements/pfelement/dist/pfelement.css | 53 + elements/pfelement/dist/pfelement.css.map | 1 + elements/pfelement/dist/pfelement.js | 1381 +++++++ elements/pfelement/dist/pfelement.js.map | 1 + elements/pfelement/dist/pfelement.min.css | 2 + elements/pfelement/dist/pfelement.min.css.map | 1 + elements/pfelement/dist/pfelement.min.js | 2 + elements/pfelement/dist/pfelement.min.js.map | 1 + elements/pfelement/dist/pfelement.umd.js | 1821 +++++++++ elements/pfelement/dist/pfelement.umd.js.map | 1 + elements/pfelement/dist/pfelement.umd.min.js | 2 + .../pfelement/dist/pfelement.umd.min.js.map | 1 + elements/pfelement/package.json | 4 +- lerna.json | 2 +- package-lock.json | 15 + 439 files changed, 48818 insertions(+), 98 deletions(-) create mode 100644 elements/pfe-accordion/dist/pfe-accordion-header.css.map create mode 100644 elements/pfe-accordion/dist/pfe-accordion-header.js create mode 100644 elements/pfe-accordion/dist/pfe-accordion-header.min.css.map create mode 100644 elements/pfe-accordion/dist/pfe-accordion-panel.css.map create mode 100644 elements/pfe-accordion/dist/pfe-accordion-panel.js create mode 100644 elements/pfe-accordion/dist/pfe-accordion-panel.min.css.map create mode 100644 elements/pfe-accordion/dist/pfe-accordion.css.map create mode 100644 elements/pfe-accordion/dist/pfe-accordion.js create mode 100644 elements/pfe-accordion/dist/pfe-accordion.js.map create mode 100644 elements/pfe-accordion/dist/pfe-accordion.min.css.map create mode 100644 elements/pfe-accordion/dist/pfe-accordion.min.js create mode 100644 elements/pfe-accordion/dist/pfe-accordion.min.js.map create mode 100644 elements/pfe-accordion/dist/pfe-accordion.umd.js create mode 100644 elements/pfe-accordion/dist/pfe-accordion.umd.js.map create mode 100644 elements/pfe-accordion/dist/pfe-accordion.umd.min.js create mode 100644 elements/pfe-accordion/dist/pfe-accordion.umd.min.js.map create mode 100644 elements/pfe-autocomplete/dist/pfe-autocomplete.css.map create mode 100644 elements/pfe-autocomplete/dist/pfe-autocomplete.js create mode 100644 elements/pfe-autocomplete/dist/pfe-autocomplete.js.map create mode 100644 elements/pfe-autocomplete/dist/pfe-autocomplete.json create mode 100644 elements/pfe-autocomplete/dist/pfe-autocomplete.min.css.map create mode 100644 elements/pfe-autocomplete/dist/pfe-autocomplete.min.js create mode 100644 elements/pfe-autocomplete/dist/pfe-autocomplete.min.js.map create mode 100644 elements/pfe-autocomplete/dist/pfe-autocomplete.umd.js create mode 100644 elements/pfe-autocomplete/dist/pfe-autocomplete.umd.js.map create mode 100644 elements/pfe-autocomplete/dist/pfe-autocomplete.umd.min.js create mode 100644 elements/pfe-autocomplete/dist/pfe-autocomplete.umd.min.js.map create mode 100644 elements/pfe-avatar/dist/pfe-avatar.css.map create mode 100644 elements/pfe-avatar/dist/pfe-avatar.js create mode 100644 elements/pfe-avatar/dist/pfe-avatar.js.map create mode 100644 elements/pfe-avatar/dist/pfe-avatar.min.css.map create mode 100644 elements/pfe-avatar/dist/pfe-avatar.min.js create mode 100644 elements/pfe-avatar/dist/pfe-avatar.min.js.map create mode 100644 elements/pfe-avatar/dist/pfe-avatar.umd.js create mode 100644 elements/pfe-avatar/dist/pfe-avatar.umd.js.map create mode 100644 elements/pfe-avatar/dist/pfe-avatar.umd.min.js create mode 100644 elements/pfe-avatar/dist/pfe-avatar.umd.min.js.map create mode 100644 elements/pfe-badge/dist/pfe-badge.css.map create mode 100644 elements/pfe-badge/dist/pfe-badge.js create mode 100644 elements/pfe-badge/dist/pfe-badge.js.map create mode 100644 elements/pfe-badge/dist/pfe-badge.json create mode 100644 elements/pfe-badge/dist/pfe-badge.min.css.map create mode 100644 elements/pfe-badge/dist/pfe-badge.min.js create mode 100644 elements/pfe-badge/dist/pfe-badge.min.js.map create mode 100644 elements/pfe-badge/dist/pfe-badge.umd.js create mode 100644 elements/pfe-badge/dist/pfe-badge.umd.js.map create mode 100644 elements/pfe-badge/dist/pfe-badge.umd.min.js create mode 100644 elements/pfe-badge/dist/pfe-badge.umd.min.js.map create mode 100644 elements/pfe-band/dist/pfe-band.css.map create mode 100644 elements/pfe-band/dist/pfe-band.js create mode 100644 elements/pfe-band/dist/pfe-band.js.map create mode 100644 elements/pfe-band/dist/pfe-band.min.css.map create mode 100644 elements/pfe-band/dist/pfe-band.min.js create mode 100644 elements/pfe-band/dist/pfe-band.min.js.map create mode 100644 elements/pfe-band/dist/pfe-band.umd.js create mode 100644 elements/pfe-band/dist/pfe-band.umd.js.map create mode 100644 elements/pfe-band/dist/pfe-band.umd.min.js create mode 100644 elements/pfe-band/dist/pfe-band.umd.min.js.map create mode 100644 elements/pfe-button/dist/pfe-button.css.map create mode 100644 elements/pfe-button/dist/pfe-button.js create mode 100644 elements/pfe-button/dist/pfe-button.js.map create mode 100644 elements/pfe-button/dist/pfe-button.json create mode 100644 elements/pfe-button/dist/pfe-button.min.css.map create mode 100644 elements/pfe-button/dist/pfe-button.min.js create mode 100644 elements/pfe-button/dist/pfe-button.min.js.map create mode 100644 elements/pfe-button/dist/pfe-button.umd.js create mode 100644 elements/pfe-button/dist/pfe-button.umd.js.map create mode 100644 elements/pfe-button/dist/pfe-button.umd.min.js create mode 100644 elements/pfe-button/dist/pfe-button.umd.min.js.map create mode 100644 elements/pfe-card/dist/pfe-card--lightdom.css create mode 100644 elements/pfe-card/dist/pfe-card--lightdom.css.map create mode 100644 elements/pfe-card/dist/pfe-card--lightdom.min.css create mode 100644 elements/pfe-card/dist/pfe-card--lightdom.min.css.map create mode 100644 elements/pfe-card/dist/pfe-card.css.map create mode 100644 elements/pfe-card/dist/pfe-card.js create mode 100644 elements/pfe-card/dist/pfe-card.js.map create mode 100644 elements/pfe-card/dist/pfe-card.min.css.map create mode 100644 elements/pfe-card/dist/pfe-card.min.js create mode 100644 elements/pfe-card/dist/pfe-card.min.js.map create mode 100644 elements/pfe-card/dist/pfe-card.umd.js create mode 100644 elements/pfe-card/dist/pfe-card.umd.js.map create mode 100644 elements/pfe-card/dist/pfe-card.umd.min.js create mode 100644 elements/pfe-card/dist/pfe-card.umd.min.js.map create mode 100644 elements/pfe-clipboard/dist/pfe-clipboard.css.map create mode 100644 elements/pfe-clipboard/dist/pfe-clipboard.js create mode 100644 elements/pfe-clipboard/dist/pfe-clipboard.js.map create mode 100644 elements/pfe-clipboard/dist/pfe-clipboard.min.css.map create mode 100644 elements/pfe-clipboard/dist/pfe-clipboard.min.js create mode 100644 elements/pfe-clipboard/dist/pfe-clipboard.min.js.map create mode 100644 elements/pfe-clipboard/dist/pfe-clipboard.umd.js create mode 100644 elements/pfe-clipboard/dist/pfe-clipboard.umd.js.map create mode 100644 elements/pfe-clipboard/dist/pfe-clipboard.umd.min.js create mode 100644 elements/pfe-clipboard/dist/pfe-clipboard.umd.min.js.map create mode 100644 elements/pfe-codeblock/dist/pfe-codeblock-material-dark.css.map create mode 100644 elements/pfe-codeblock/dist/pfe-codeblock-material-dark.min.css.map create mode 100644 elements/pfe-codeblock/dist/pfe-codeblock-material-light.css.map create mode 100644 elements/pfe-codeblock/dist/pfe-codeblock-material-light.min.css.map create mode 100644 elements/pfe-codeblock/dist/pfe-codeblock.css.map create mode 100644 elements/pfe-codeblock/dist/pfe-codeblock.js create mode 100644 elements/pfe-codeblock/dist/pfe-codeblock.js.map create mode 100644 elements/pfe-codeblock/dist/pfe-codeblock.min.css.map create mode 100644 elements/pfe-codeblock/dist/pfe-codeblock.min.js create mode 100644 elements/pfe-codeblock/dist/pfe-codeblock.min.js.map create mode 100644 elements/pfe-codeblock/dist/pfe-codeblock.umd.js create mode 100644 elements/pfe-codeblock/dist/pfe-codeblock.umd.js.map create mode 100644 elements/pfe-codeblock/dist/pfe-codeblock.umd.min.js create mode 100644 elements/pfe-codeblock/dist/pfe-codeblock.umd.min.js.map create mode 100644 elements/pfe-collapse/dist/pfe-collapse-panel.css.map create mode 100644 elements/pfe-collapse/dist/pfe-collapse-panel.min.css.map create mode 100644 elements/pfe-collapse/dist/pfe-collapse-toggle.css.map create mode 100644 elements/pfe-collapse/dist/pfe-collapse-toggle.min.css.map create mode 100644 elements/pfe-collapse/dist/pfe-collapse.css.map create mode 100644 elements/pfe-collapse/dist/pfe-collapse.js create mode 100644 elements/pfe-collapse/dist/pfe-collapse.js.map create mode 100644 elements/pfe-collapse/dist/pfe-collapse.json create mode 100644 elements/pfe-collapse/dist/pfe-collapse.min.css.map create mode 100644 elements/pfe-collapse/dist/pfe-collapse.min.js create mode 100644 elements/pfe-collapse/dist/pfe-collapse.min.js.map create mode 100644 elements/pfe-collapse/dist/pfe-collapse.umd.js create mode 100644 elements/pfe-collapse/dist/pfe-collapse.umd.js.map create mode 100644 elements/pfe-collapse/dist/pfe-collapse.umd.min.js create mode 100644 elements/pfe-collapse/dist/pfe-collapse.umd.min.js.map create mode 100644 elements/pfe-content-set/dist/pfe-content-set.css.map create mode 100644 elements/pfe-content-set/dist/pfe-content-set.js create mode 100644 elements/pfe-content-set/dist/pfe-content-set.js.map create mode 100644 elements/pfe-content-set/dist/pfe-content-set.min.css.map create mode 100644 elements/pfe-content-set/dist/pfe-content-set.min.js create mode 100644 elements/pfe-content-set/dist/pfe-content-set.min.js.map create mode 100644 elements/pfe-content-set/dist/pfe-content-set.umd.js create mode 100644 elements/pfe-content-set/dist/pfe-content-set.umd.js.map create mode 100644 elements/pfe-content-set/dist/pfe-content-set.umd.min.js create mode 100644 elements/pfe-content-set/dist/pfe-content-set.umd.min.js.map create mode 100644 elements/pfe-cta/dist/pfe-cta--lightdom.css create mode 100644 elements/pfe-cta/dist/pfe-cta--lightdom.css.map create mode 100644 elements/pfe-cta/dist/pfe-cta--lightdom.min.css create mode 100644 elements/pfe-cta/dist/pfe-cta--lightdom.min.css.map create mode 100644 elements/pfe-cta/dist/pfe-cta.css.map create mode 100644 elements/pfe-cta/dist/pfe-cta.js create mode 100644 elements/pfe-cta/dist/pfe-cta.js.map create mode 100644 elements/pfe-cta/dist/pfe-cta.json create mode 100644 elements/pfe-cta/dist/pfe-cta.min.css.map create mode 100644 elements/pfe-cta/dist/pfe-cta.min.js create mode 100644 elements/pfe-cta/dist/pfe-cta.min.js.map create mode 100644 elements/pfe-cta/dist/pfe-cta.umd.js create mode 100644 elements/pfe-cta/dist/pfe-cta.umd.js.map create mode 100644 elements/pfe-cta/dist/pfe-cta.umd.min.js create mode 100644 elements/pfe-cta/dist/pfe-cta.umd.min.js.map create mode 100644 elements/pfe-datetime/dist/pfe-datetime.css.map create mode 100644 elements/pfe-datetime/dist/pfe-datetime.js create mode 100644 elements/pfe-datetime/dist/pfe-datetime.js.map create mode 100644 elements/pfe-datetime/dist/pfe-datetime.json create mode 100644 elements/pfe-datetime/dist/pfe-datetime.min.css.map create mode 100644 elements/pfe-datetime/dist/pfe-datetime.min.js create mode 100644 elements/pfe-datetime/dist/pfe-datetime.min.js.map create mode 100644 elements/pfe-datetime/dist/pfe-datetime.umd.js create mode 100644 elements/pfe-datetime/dist/pfe-datetime.umd.js.map create mode 100644 elements/pfe-datetime/dist/pfe-datetime.umd.min.js create mode 100644 elements/pfe-datetime/dist/pfe-datetime.umd.min.js.map create mode 100644 elements/pfe-dropdown/dist/pfe-dropdown-item.css.map create mode 100644 elements/pfe-dropdown/dist/pfe-dropdown-item.min.css.map create mode 100644 elements/pfe-dropdown/dist/pfe-dropdown.css.map create mode 100644 elements/pfe-dropdown/dist/pfe-dropdown.js create mode 100644 elements/pfe-dropdown/dist/pfe-dropdown.js.map create mode 100644 elements/pfe-dropdown/dist/pfe-dropdown.json create mode 100644 elements/pfe-dropdown/dist/pfe-dropdown.min.css.map create mode 100644 elements/pfe-dropdown/dist/pfe-dropdown.min.js create mode 100644 elements/pfe-dropdown/dist/pfe-dropdown.min.js.map create mode 100644 elements/pfe-dropdown/dist/pfe-dropdown.umd.js create mode 100644 elements/pfe-dropdown/dist/pfe-dropdown.umd.js.map create mode 100644 elements/pfe-dropdown/dist/pfe-dropdown.umd.min.js create mode 100644 elements/pfe-dropdown/dist/pfe-dropdown.umd.min.js.map create mode 100644 elements/pfe-health-index/dist/pfe-health-index.css.map create mode 100644 elements/pfe-health-index/dist/pfe-health-index.js create mode 100644 elements/pfe-health-index/dist/pfe-health-index.js.map create mode 100644 elements/pfe-health-index/dist/pfe-health-index.json create mode 100644 elements/pfe-health-index/dist/pfe-health-index.min.css.map create mode 100644 elements/pfe-health-index/dist/pfe-health-index.min.js create mode 100644 elements/pfe-health-index/dist/pfe-health-index.min.js.map create mode 100644 elements/pfe-health-index/dist/pfe-health-index.umd.js create mode 100644 elements/pfe-health-index/dist/pfe-health-index.umd.js.map create mode 100644 elements/pfe-health-index/dist/pfe-health-index.umd.min.js create mode 100644 elements/pfe-health-index/dist/pfe-health-index.umd.min.js.map create mode 100644 elements/pfe-icon-panel/dist/pfe-icon-panel.css.map create mode 100644 elements/pfe-icon-panel/dist/pfe-icon-panel.js create mode 100644 elements/pfe-icon-panel/dist/pfe-icon-panel.js.map create mode 100644 elements/pfe-icon-panel/dist/pfe-icon-panel.json create mode 100644 elements/pfe-icon-panel/dist/pfe-icon-panel.min.css.map create mode 100644 elements/pfe-icon-panel/dist/pfe-icon-panel.min.js create mode 100644 elements/pfe-icon-panel/dist/pfe-icon-panel.min.js.map create mode 100644 elements/pfe-icon-panel/dist/pfe-icon-panel.umd.js create mode 100644 elements/pfe-icon-panel/dist/pfe-icon-panel.umd.js.map create mode 100644 elements/pfe-icon-panel/dist/pfe-icon-panel.umd.min.js create mode 100644 elements/pfe-icon-panel/dist/pfe-icon-panel.umd.min.js.map create mode 100644 elements/pfe-icon/dist/pfe-icon.css.map create mode 100644 elements/pfe-icon/dist/pfe-icon.js create mode 100644 elements/pfe-icon/dist/pfe-icon.js.map create mode 100644 elements/pfe-icon/dist/pfe-icon.min.css.map create mode 100644 elements/pfe-icon/dist/pfe-icon.min.js create mode 100644 elements/pfe-icon/dist/pfe-icon.min.js.map create mode 100644 elements/pfe-icon/dist/pfe-icon.umd.js create mode 100644 elements/pfe-icon/dist/pfe-icon.umd.js.map create mode 100644 elements/pfe-icon/dist/pfe-icon.umd.min.js create mode 100644 elements/pfe-icon/dist/pfe-icon.umd.min.js.map create mode 100644 elements/pfe-jump-links/dist/pfe-jump-links-nav.css.map create mode 100644 elements/pfe-jump-links/dist/pfe-jump-links-nav.min.css.map create mode 100644 elements/pfe-jump-links/dist/pfe-jump-links.js create mode 100644 elements/pfe-jump-links/dist/pfe-jump-links.js.map create mode 100644 elements/pfe-jump-links/dist/pfe-jump-links.min.js create mode 100644 elements/pfe-jump-links/dist/pfe-jump-links.min.js.map create mode 100644 elements/pfe-jump-links/dist/pfe-jump-links.umd.js create mode 100644 elements/pfe-jump-links/dist/pfe-jump-links.umd.js.map create mode 100644 elements/pfe-jump-links/dist/pfe-jump-links.umd.min.js create mode 100644 elements/pfe-jump-links/dist/pfe-jump-links.umd.min.js.map create mode 100644 elements/pfe-markdown/dist/pfe-markdown.css.map create mode 100644 elements/pfe-markdown/dist/pfe-markdown.js create mode 100644 elements/pfe-markdown/dist/pfe-markdown.js.map create mode 100644 elements/pfe-markdown/dist/pfe-markdown.json create mode 100644 elements/pfe-markdown/dist/pfe-markdown.min.css.map create mode 100644 elements/pfe-markdown/dist/pfe-markdown.min.js create mode 100644 elements/pfe-markdown/dist/pfe-markdown.min.js.map create mode 100644 elements/pfe-markdown/dist/pfe-markdown.umd.js create mode 100644 elements/pfe-markdown/dist/pfe-markdown.umd.js.map create mode 100644 elements/pfe-markdown/dist/pfe-markdown.umd.min.js create mode 100644 elements/pfe-markdown/dist/pfe-markdown.umd.min.js.map create mode 100644 elements/pfe-modal/dist/pfe-modal.css.map create mode 100644 elements/pfe-modal/dist/pfe-modal.js create mode 100644 elements/pfe-modal/dist/pfe-modal.js.map create mode 100644 elements/pfe-modal/dist/pfe-modal.json create mode 100644 elements/pfe-modal/dist/pfe-modal.min.css.map create mode 100644 elements/pfe-modal/dist/pfe-modal.min.js create mode 100644 elements/pfe-modal/dist/pfe-modal.min.js.map create mode 100644 elements/pfe-modal/dist/pfe-modal.umd.js create mode 100644 elements/pfe-modal/dist/pfe-modal.umd.js.map create mode 100644 elements/pfe-modal/dist/pfe-modal.umd.min.js create mode 100644 elements/pfe-modal/dist/pfe-modal.umd.min.js.map create mode 100644 elements/pfe-navigation/dist/pfe-navigation--lightdom.css create mode 100644 elements/pfe-navigation/dist/pfe-navigation--lightdom.css.map create mode 100644 elements/pfe-navigation/dist/pfe-navigation--lightdom.min.css create mode 100644 elements/pfe-navigation/dist/pfe-navigation--lightdom.min.css.map create mode 100644 elements/pfe-navigation/dist/pfe-navigation--noscript.css create mode 100644 elements/pfe-navigation/dist/pfe-navigation--noscript.css.map create mode 100644 elements/pfe-navigation/dist/pfe-navigation--noscript.min.css create mode 100644 elements/pfe-navigation/dist/pfe-navigation--noscript.min.css.map create mode 100644 elements/pfe-navigation/dist/pfe-navigation-item.css.map create mode 100644 elements/pfe-navigation/dist/pfe-navigation-item.min.css.map create mode 100644 elements/pfe-navigation/dist/pfe-navigation-main.css.map create mode 100644 elements/pfe-navigation/dist/pfe-navigation-main.min.css.map create mode 100644 elements/pfe-navigation/dist/pfe-navigation.css.map create mode 100644 elements/pfe-navigation/dist/pfe-navigation.js create mode 100644 elements/pfe-navigation/dist/pfe-navigation.js.map create mode 100644 elements/pfe-navigation/dist/pfe-navigation.json create mode 100644 elements/pfe-navigation/dist/pfe-navigation.min.css.map create mode 100644 elements/pfe-navigation/dist/pfe-navigation.min.js create mode 100644 elements/pfe-navigation/dist/pfe-navigation.min.js.map create mode 100644 elements/pfe-navigation/dist/pfe-navigation.umd.js create mode 100644 elements/pfe-navigation/dist/pfe-navigation.umd.js.map create mode 100644 elements/pfe-navigation/dist/pfe-navigation.umd.min.js create mode 100644 elements/pfe-navigation/dist/pfe-navigation.umd.min.js.map create mode 100644 elements/pfe-number/dist/pfe-number.css.map create mode 100644 elements/pfe-number/dist/pfe-number.js create mode 100644 elements/pfe-number/dist/pfe-number.js.map create mode 100644 elements/pfe-number/dist/pfe-number.json create mode 100644 elements/pfe-number/dist/pfe-number.min.css.map create mode 100644 elements/pfe-number/dist/pfe-number.min.js create mode 100644 elements/pfe-number/dist/pfe-number.min.js.map create mode 100644 elements/pfe-number/dist/pfe-number.umd.js create mode 100644 elements/pfe-number/dist/pfe-number.umd.js.map create mode 100644 elements/pfe-number/dist/pfe-number.umd.min.js create mode 100644 elements/pfe-number/dist/pfe-number.umd.min.js.map create mode 100644 elements/pfe-page-status/dist/pfe-page-status.css.map create mode 100644 elements/pfe-page-status/dist/pfe-page-status.js create mode 100644 elements/pfe-page-status/dist/pfe-page-status.js.map create mode 100644 elements/pfe-page-status/dist/pfe-page-status.min.css.map create mode 100644 elements/pfe-page-status/dist/pfe-page-status.min.js create mode 100644 elements/pfe-page-status/dist/pfe-page-status.min.js.map create mode 100644 elements/pfe-page-status/dist/pfe-page-status.umd.js create mode 100644 elements/pfe-page-status/dist/pfe-page-status.umd.js.map create mode 100644 elements/pfe-page-status/dist/pfe-page-status.umd.min.js create mode 100644 elements/pfe-page-status/dist/pfe-page-status.umd.min.js.map create mode 100644 elements/pfe-primary-detail/dist/pfe-primary-detail--lightdom.css create mode 100644 elements/pfe-primary-detail/dist/pfe-primary-detail--lightdom.css.map create mode 100644 elements/pfe-primary-detail/dist/pfe-primary-detail--lightdom.min.css create mode 100644 elements/pfe-primary-detail/dist/pfe-primary-detail--lightdom.min.css.map create mode 100644 elements/pfe-primary-detail/dist/pfe-primary-detail.css.map create mode 100755 elements/pfe-primary-detail/dist/pfe-primary-detail.js create mode 100644 elements/pfe-primary-detail/dist/pfe-primary-detail.js.map create mode 100644 elements/pfe-primary-detail/dist/pfe-primary-detail.min.css.map create mode 100644 elements/pfe-primary-detail/dist/pfe-primary-detail.min.js create mode 100644 elements/pfe-primary-detail/dist/pfe-primary-detail.min.js.map create mode 100644 elements/pfe-primary-detail/dist/pfe-primary-detail.umd.js create mode 100644 elements/pfe-primary-detail/dist/pfe-primary-detail.umd.js.map create mode 100644 elements/pfe-primary-detail/dist/pfe-primary-detail.umd.min.js create mode 100644 elements/pfe-primary-detail/dist/pfe-primary-detail.umd.min.js.map create mode 100644 elements/pfe-progress-indicator/dist/pfe-progress-indicator.css.map create mode 100644 elements/pfe-progress-indicator/dist/pfe-progress-indicator.js create mode 100644 elements/pfe-progress-indicator/dist/pfe-progress-indicator.js.map create mode 100644 elements/pfe-progress-indicator/dist/pfe-progress-indicator.json create mode 100644 elements/pfe-progress-indicator/dist/pfe-progress-indicator.min.css.map create mode 100644 elements/pfe-progress-indicator/dist/pfe-progress-indicator.min.js create mode 100644 elements/pfe-progress-indicator/dist/pfe-progress-indicator.min.js.map create mode 100644 elements/pfe-progress-indicator/dist/pfe-progress-indicator.umd.js create mode 100644 elements/pfe-progress-indicator/dist/pfe-progress-indicator.umd.js.map create mode 100644 elements/pfe-progress-indicator/dist/pfe-progress-indicator.umd.min.js create mode 100644 elements/pfe-progress-indicator/dist/pfe-progress-indicator.umd.min.js.map create mode 100644 elements/pfe-progress-steps/dist/pfe-progress-steps-item.css.map create mode 100644 elements/pfe-progress-steps/dist/pfe-progress-steps-item.min.css.map create mode 100644 elements/pfe-progress-steps/dist/pfe-progress-steps.css.map create mode 100644 elements/pfe-progress-steps/dist/pfe-progress-steps.js create mode 100644 elements/pfe-progress-steps/dist/pfe-progress-steps.js.map create mode 100644 elements/pfe-progress-steps/dist/pfe-progress-steps.min.css.map create mode 100644 elements/pfe-progress-steps/dist/pfe-progress-steps.min.js create mode 100644 elements/pfe-progress-steps/dist/pfe-progress-steps.min.js.map create mode 100644 elements/pfe-progress-steps/dist/pfe-progress-steps.umd.js create mode 100644 elements/pfe-progress-steps/dist/pfe-progress-steps.umd.js.map create mode 100644 elements/pfe-progress-steps/dist/pfe-progress-steps.umd.min.js create mode 100644 elements/pfe-progress-steps/dist/pfe-progress-steps.umd.min.js.map create mode 100644 elements/pfe-readtime/dist/pfe-readtime.css.map create mode 100644 elements/pfe-readtime/dist/pfe-readtime.js create mode 100644 elements/pfe-readtime/dist/pfe-readtime.js.map create mode 100644 elements/pfe-readtime/dist/pfe-readtime.min.css.map create mode 100644 elements/pfe-readtime/dist/pfe-readtime.min.js create mode 100644 elements/pfe-readtime/dist/pfe-readtime.min.js.map create mode 100644 elements/pfe-readtime/dist/pfe-readtime.umd.js create mode 100644 elements/pfe-readtime/dist/pfe-readtime.umd.js.map create mode 100644 elements/pfe-readtime/dist/pfe-readtime.umd.min.js create mode 100644 elements/pfe-readtime/dist/pfe-readtime.umd.min.js.map create mode 100644 elements/pfe-select/dist/pfe-select.css.map create mode 100644 elements/pfe-select/dist/pfe-select.js create mode 100644 elements/pfe-select/dist/pfe-select.js.map create mode 100644 elements/pfe-select/dist/pfe-select.min.css.map create mode 100644 elements/pfe-select/dist/pfe-select.min.js create mode 100644 elements/pfe-select/dist/pfe-select.min.js.map create mode 100644 elements/pfe-select/dist/pfe-select.umd.js create mode 100644 elements/pfe-select/dist/pfe-select.umd.js.map create mode 100644 elements/pfe-select/dist/pfe-select.umd.min.js create mode 100644 elements/pfe-select/dist/pfe-select.umd.min.js.map create mode 100644 elements/pfe-styles/dist/pfe-base.css create mode 100644 elements/pfe-styles/dist/pfe-base.css.map create mode 100644 elements/pfe-styles/dist/pfe-base.min.css create mode 100644 elements/pfe-styles/dist/pfe-base.min.css.map create mode 100644 elements/pfe-styles/dist/pfe-context.css create mode 100644 elements/pfe-styles/dist/pfe-context.css.map create mode 100644 elements/pfe-styles/dist/pfe-context.min.css create mode 100644 elements/pfe-styles/dist/pfe-context.min.css.map create mode 100644 elements/pfe-styles/dist/pfe-layouts.css create mode 100644 elements/pfe-styles/dist/pfe-layouts.css.map create mode 100644 elements/pfe-styles/dist/pfe-layouts.min.css create mode 100644 elements/pfe-styles/dist/pfe-layouts.min.css.map create mode 100644 elements/pfe-styles/dist/pfe-typography-classes.css create mode 100644 elements/pfe-styles/dist/pfe-typography-classes.css.map create mode 100644 elements/pfe-styles/dist/pfe-typography-classes.min.css create mode 100644 elements/pfe-styles/dist/pfe-typography-classes.min.css.map create mode 100644 elements/pfe-styles/dist/pfe-typography-deprecated.css create mode 100644 elements/pfe-styles/dist/pfe-typography-deprecated.css.map create mode 100644 elements/pfe-styles/dist/pfe-typography-deprecated.min.css create mode 100644 elements/pfe-styles/dist/pfe-typography-deprecated.min.css.map create mode 100644 elements/pfe-styles/dist/pfe-vars-as-px.css create mode 100644 elements/pfe-styles/dist/pfe-vars-as-px.min.css create mode 100644 elements/pfe-styles/dist/red-hat-font.css create mode 100644 elements/pfe-styles/dist/red-hat-font.min.css create mode 100644 elements/pfe-tabs/dist/pfe-tab-panel.css.map create mode 100644 elements/pfe-tabs/dist/pfe-tab-panel.js create mode 100644 elements/pfe-tabs/dist/pfe-tab-panel.min.css.map create mode 100644 elements/pfe-tabs/dist/pfe-tab.css.map create mode 100644 elements/pfe-tabs/dist/pfe-tab.js create mode 100644 elements/pfe-tabs/dist/pfe-tab.min.css.map create mode 100644 elements/pfe-tabs/dist/pfe-tabs.css.map create mode 100644 elements/pfe-tabs/dist/pfe-tabs.js create mode 100644 elements/pfe-tabs/dist/pfe-tabs.js.map create mode 100644 elements/pfe-tabs/dist/pfe-tabs.min.css.map create mode 100644 elements/pfe-tabs/dist/pfe-tabs.min.js create mode 100644 elements/pfe-tabs/dist/pfe-tabs.min.js.map create mode 100644 elements/pfe-tabs/dist/pfe-tabs.umd.js create mode 100644 elements/pfe-tabs/dist/pfe-tabs.umd.js.map create mode 100644 elements/pfe-tabs/dist/pfe-tabs.umd.min.js create mode 100644 elements/pfe-tabs/dist/pfe-tabs.umd.min.js.map create mode 100644 elements/pfe-toast/dist/pfe-toast.css.map create mode 100644 elements/pfe-toast/dist/pfe-toast.js create mode 100644 elements/pfe-toast/dist/pfe-toast.js.map create mode 100644 elements/pfe-toast/dist/pfe-toast.json create mode 100644 elements/pfe-toast/dist/pfe-toast.min.css.map create mode 100644 elements/pfe-toast/dist/pfe-toast.min.js create mode 100644 elements/pfe-toast/dist/pfe-toast.min.js.map create mode 100644 elements/pfe-toast/dist/pfe-toast.umd.js create mode 100644 elements/pfe-toast/dist/pfe-toast.umd.js.map create mode 100644 elements/pfe-toast/dist/pfe-toast.umd.min.js create mode 100644 elements/pfe-toast/dist/pfe-toast.umd.min.js.map create mode 100644 elements/pfelement/dist/pfelement--noscript.css create mode 100644 elements/pfelement/dist/pfelement--noscript.css.map create mode 100644 elements/pfelement/dist/pfelement--noscript.min.css create mode 100644 elements/pfelement/dist/pfelement--noscript.min.css.map create mode 100644 elements/pfelement/dist/pfelement.css create mode 100644 elements/pfelement/dist/pfelement.css.map create mode 100644 elements/pfelement/dist/pfelement.js create mode 100644 elements/pfelement/dist/pfelement.js.map create mode 100644 elements/pfelement/dist/pfelement.min.css create mode 100644 elements/pfelement/dist/pfelement.min.css.map create mode 100644 elements/pfelement/dist/pfelement.min.js create mode 100644 elements/pfelement/dist/pfelement.min.js.map create mode 100644 elements/pfelement/dist/pfelement.umd.js create mode 100644 elements/pfelement/dist/pfelement.umd.js.map create mode 100644 elements/pfelement/dist/pfelement.umd.min.js create mode 100644 elements/pfelement/dist/pfelement.umd.min.js.map diff --git a/elements/pfe-accordion/dist/pfe-accordion-header.css.map b/elements/pfe-accordion/dist/pfe-accordion-header.css.map new file mode 100644 index 0000000000..0968b94e1a --- /dev/null +++ b/elements/pfe-accordion/dist/pfe-accordion-header.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../pfe-sass/mixins/_mixins.scss","pfe-accordion-header.scss","../../pfe-sass/extends/_extends.scss","pfe-accordion-header.css","../../pfe-sass/functions/_custom-properties.scss","../../pfe-sass/mixins/_containers.scss","../../pfe-sass/mixins/_components.scss","_shared-assets.scss"],"names":[],"mappings":"AAGM;EC+BN;ID/B4F,UAAA;IE4CxF,iCAAyD;IACzD,yBAAiC;EC3CnC;AACF;;AFCA;EAIE,kBAAkB;EAClB,cAAc;EACd,aAAa;EAEb,6BGgEkC;EHhElC,oEGgEkC;EH/DlC,cG+DkC;EH/DlC,yEG+DkC;EH7DlC,yCG6DkC;UH7DlC,iCG6DkC;EH7DlC,0EG6DkC;UH7DlC,kEG6DkC;EH1DlC,qFAAkB;EAIlB,sBAAiB;AERnB;;AHiEU;EACN,aAAa;AG9DjB;;AFdA;;;EIFI,8BAJsC;UAItC,sBAJsC;AF0B1C;;AFEA;EACE,SAAS;AECX;;AFGA;EACE,eAAe;EIef,aAAa;EACb,kBAAkB;EJPlB,WAAY;EACZ,SAAS;EAET,oBAAa;EAAb,qBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,yBAAmB;EAAnB,2BAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;EACnB,uBAA2B;EAA3B,mCAA2B;MAA3B,oBAA2B;UAA3B,2BAA2B;EAC3B,qBAA8C;EAA9C,0DAA8C;EAE9C,8BG2BkC;EH3BlC,uIG2BkC;EHzBlC,6BAA6B;EAC7B,cGwBkC;EHxBlC,yEGwBkC;EHrBlC,gBAAkB;EAClB,wFGtBkC;EHsBlC,gIGtBkC;EHuBlC,kBGmBkC;EHnBlC,0FGmBkC;EHlBlC,gBGkBkC;EHlBlC,iGGkBkC;EHjBlC,gBGiBkC;EHjBlC,iDGiBkC;EHhBlC,gBG1BkC;EH0BlC,+CG1BkC;EH4BlC,gFAAqB;EA6BrB,mBGzDkC;EHyDlC,4DGzDkC;EH0DlC,iBGhBkC;EHgBlC,6FGhBkC;EHiBlC,qBGjBkC;EHiBlC,kGGjBkC;EHoBlC,+BAA+B;EAC/B,8BAA8B;AE1ChC;;AFxBA;EIqBI,kBAAkB;EAClB,WAAW;EACX,SJlBa;EImBb,UJnBa;EIoBb,uBAAwD;EAAxD,mEAAwD;EACxD,wBAAyD;EAAzD,oEAAyD;EACzD,kBDxBgC;ECwBhC,uDDxBgC;ECyBhC,6BAA2E;EAA3E,yGAA2E;AFO/E;;AHlEM;EC+BN;ID/B4F,UAAA;IK6DtF,YAAY;EFWhB;AACF;;AF1CA;EImCI,qBJ5Be;AEuCnB;;AF9CA;EIyCI,aAAa;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","file":"pfe-accordion-header.css","sourcesContent":["@mixin browser-query($browser-list) {\n @each $browser in $browser-list {\n @if $browser == ie11 {\n @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { /* IE10+ */\n @content;\n }\n }\n @if $browser == edge12 {\n @supports (-ms-accelerator: true) { /* Microsoft Edge Browser 12+ */\n @content;\n }\n }\n @if $browser == edge {\n @supports (-ms-ime-align: auto) { /* Microsoft Edge Browser 16+ (All) */\n @content;\n }\n }\n @if $browser == firefox {\n @media all and (min--moz-device-pixel-ratio:0) { /* Mozilla Firefox (All) */\n @content;\n }\n }\n }\n}\n\n@mixin pfe-transition($properties...) {\n $return: null;\n @each $property in $properties {\n @if length($property) == 1 {\n $return: append($return, #{$property} 250ms $pfe-global--animation-timing, comma);\n }\n @else if length($property) == 2 {\n $return: append($return, nth($property, 1) nth($property, 2), comma);\n }\n }\n transition: $return;\n}\n\n// Make a CSS arrow\n@mixin pfe-arrow($type, $color, $width: 8px, $height: 5px, $pseudo: false) {\n $direction: (\n up: 180deg,\n down: 0deg,\n right: -90deg,\n left: 90deg,\n );\n border-style: pfe-var(surface--border-style);\n border-width: $width $height 0;\n border-color: transparent;\n border-top-color: $color;\n transform: rotate(map-get($direction, $type));\n @if $pseudo {\n display: inline-block;\n content: \"\";\n @content;\n }\n}\n\n@mixin pfe-arrow-color($color) {\n border-top-color: $color;\n}\n\n@mixin pfe-print-media {\n @media print {\n @content;\n }\n}\n\n@mixin pfe-print-background {\n -webkit-print-color-adjust: exact;\n color-adjust: exact;\n}\n\n@mixin pfe-no-print-background {\n @include pfe-print-media {\n background-color: white !important;\n background-image: none !important;\n box-shadow: none !important;\n }\n}\n\n@mixin pfe-hidden {\n @at-root #{&}([hidden]) {\n display: none;\n }\n}\n\n@mixin pfe-pipe( $position: right, $padding: 0, $margin: 0, $color: $border-color) {\n border: pfe-var(surface--border-width) pfe-var(surface--border-style) transparent;\n border-#{$position}-color: $color;\n @if $position == right {\n padding-left: $padding;\n margin-right: $margin;\n }\n @else if $position == left {\n padding-right: $padding;\n margin-left: $margin;\n }\n}\n\n@mixin pfe-retina {\n @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n @content;\n }\n}\n\n@mixin pfe-icon($path, $display: flex, $size: 1em) {\n display: #{$display};\n @if $path {\n background: #{$path} no-repeat;\n background-size: contain;\n background-position: center;\n }\n width: #{$size};\n height: #{$size};\n @content;\n}\n\n@mixin pfe-local-debug($map: $LOCAL-VARIABLES) {\n :root {\n @include pfe-print-local($map);\n }\n} ","@import \"shared-assets\";\n\n/// ===========================================================================\n/// ACCORDION HEADER\n/// Styles sourced from: @patternfly/patternfly/components/Accordion/accordion.scss\n/// then updated for pfe theming variables\n/// ===========================================================================\n:host {\n @include pfe-hidden;\n @include pfe-box-sizing;\n \n position: relative;\n display: block;\n outline: none;\n\n background-color: pfe-local(BackgroundColor); // transparent\n color: pfe-local(Color); // broadcasted text\n\n box-shadow: pfe-local(BoxShadow); // default is none\n\n // Set the chevron to use the same color as the text\n --pfe-icon--color: #{pfe-local(Color)};\n\n // Note: 14px here gives us the 16px x 10.3px icon from designs\n // @TODO Should this use the ui-element variable?\n --pfe-icon--size: 14px;\n}\n\n// Remove margins from the heading tag\n#heading {\n margin: 0;\n}\n\n// Button element\n.pf-c-accordion__toggle {\n cursor: pointer;\n\n // This is handled by the ::before pseudo element\n @include focus-ring(\n $offset: -2px,\n $pseudo: before,\n $color: #6b9ff0 // @TODO: Where should this live in our kit?\n );\n\n width: 100%;\n margin: 0;\n\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: calc(#{pfe-var(container-padding)} * 1.5); // 24px\n\n padding: pfe-local(Padding);\n\n background-color: transparent;\n color: pfe-local(Color); // broadcasted text\n\n // Default typography\n text-align: left;\n font-family: pfe-var(font-family--heading);\n font-size: pfe-local(FontSize--header);\n font-weight: pfe-local(FontWeight--header);\n text-align: pfe-local(TextAlign);\n line-height: pfe-var(line-height);\n\n --_typography-offset: calc((1em * #{pfe-var(line-height)} - 1em) / 2);\n\n .pf-c-accordion__toggle-icon {\n --_typography-offset: calc((1em * #{pfe-var(line-height)} - var(--pfe-icon--size, 14px)) / 2);\n }\n\n // To accomodate for the line-height when the header does not wrap\n .pf-c-accordion__toggle-text {\n // ~= -5px -> 20px font-size * 1.5 line height / 2 top+bottom\n margin-top: calc(-1 * var(--_typography-offset, 5px));\n margin-bottom: calc(-1 * var(--_typography-offset, 5px));\n }\n \n // Very minor adjustment to the top of the icon for alignment\n .pf-c-accordion__toggle-icon {\n margin-top: calc(var(--_typography-offset, 5px) / 4);\n }\n\n // @TODO: Do we want to force dark background color in dark mode or rely on the wrapper\n // @media (prefers-color-scheme: dark) {\n // --context: dark;\n // background-color: pfe-local(BackgroundColor, $fallback: pfe-var(surface--darker)); // transparent\n // color: pfe-local(Color, $fallback: pfe-var(text--on-dark)); // broadcasted text\n // }\n\n // Force IE11 to use white to prevent content from being un-readable\n @extend %fallback-surface;\n\n // Standard border styles\n border-style: pfe-var(surface--border-style);\n border-width: pfe-local(BorderWidth);\n border-color: pfe-local(BorderColor);\n \n // Default accordion uses transparent right & left borders\n border-right-color: transparent;\n border-left-color: transparent;\n\n // Remove the top border for non-first headers\n // (the bottom-border of the previous provides delineation)\n :host(:not(:first-of-type)) & {\n border-top-width: 0;\n }\n\n // Accent bar\n &::after {\n @include accent-bar(\n $direction: vertical,\n $offset: (\n top: -1px,\n left: -1px,\n bottom: -1px\n ),\n $thickness: pfe-local(accent--width),\n $color: pfe-local(accent) // defaults to transparent\n );\n z-index: #{pfe-fetch(ZIndex) + 1}; // Fallback value\n z-index: calc(#{pfe-local(ZIndex)} + 1);\n\n @include browser-query(ie11) {\n &:hover,\n &:active,\n :host(:not([expanded])) &:focus,\n :host([expanded]) &,\n :host(.animating) & {\n background-color: #{pfe-fetch(accent--active)};\n }\n }\n }\n\n // Hover, active, and focus state (only when not open)\n // States source from the button element, not the host\n &:hover,\n &:active,\n :host(:not([expanded])) &:focus {\n --pfe-accordion--BackgroundColor: #{pfe-local(BackgroundColor--active)};\n --pfe-accordion--Color: #{pfe-local(Color--active)};\n }\n\n :host(:not([expanded])) &:hover,\n :host(:not([expanded])) &:active,\n :host(:not([expanded])) &:focus {\n --pfe-accordion--accent: #{pfe-local(accent--active)};\n }\n \n @each $context in (dark, saturated) {\n $overlay: rgba(247, 247, 249, .1);\n \n @if $context == saturated {\n $overlay: rgba(0, 0, 0, .2);\n }\n \n // Set properties to use their active modifier\n :host([on=\"#{$context}\"]) &:hover,\n :host([on=\"#{$context}\"]:not([expanded])) &:focus,\n :host([on=\"#{$context}\"]) &:active {\n --pfe-accordion--BackgroundColor: #{pfe-local(BackgroundColor--active, $overlay)};\n --pfe-accordion--Color: #{pfe-local(Color--active)};\n }\n\n :host([on=\"#{$context}\"]:not([expanded])) &:hover,\n :host([on=\"#{$context}\"]:not([expanded])) &:active,\n :host([on=\"#{$context}\"]:not([expanded])) &:focus {\n --pfe-accordion--accent: #{pfe-local(accent--active, #{pfe-var(ui-accent--on-#{$context})})};\n }\n }\n\n :host([expanded]) &,\n :host(.animating) & {\n border-bottom-width: 0;\n }\n\n :host([expanded]) &,\n :host(.animating) &,\n :host([disclosure]:not([disclosure=\"false\"])) & {\n border-right-color: pfe-local(BorderColor);\n border-left-color: pfe-local(BorderColor);\n }\n\n // Disclosure typography + styles\n :host([disclosure]:not([disclosure=\"false\"])) & {\n gap: calc(#{pfe-var(container-padding)} / 2); // 8px\n font-family: pfe-var(font-family);\n font-size: pfe-local(FontSize--header, $fallback: pfe-var(FontSize--md));\n font-weight: pfe-local(FontWeight--header, $fallback: pfe-var(font-weight--semi-bold));\n }\n}\n\n// This element sets the layout for the text, accents, and icons inside the button\n.pf-c-accordion__toggle-wrapper {\n // Fill the rest of the .pf-c-accordion__toggle\n flex-grow: 1;\n // Set up the layout for the text and accent elements\n display: flex;\n align-items: center;\n justify-content: flex-start;\n \n // Internal gap is 24px\n // @TODO design hook?\n gap: calc(#{pfe-var(container-padding)} * 1.5); // 24px\n\n @include browser-query(ie11) {\n &::after {\n @include pfe-chevron(\n $state: closed,\n $size: 14px,\n $width: 2px\n );\n top: 1em !important;\n }\n\n :host([expanded]) &::after,\n :host(.animating) &::after {\n transform: rotate(45deg);\n }\n }\n}\n\n// Text inside the button, wrapped in a span tag\n// limits text width to 80ch per readability research\n.pf-c-accordion__toggle-text {\n max-width: pfe-local(MaxWidth--content);\n}\n\n// Chevron icon\n.pf-c-accordion__toggle-icon {\n // Note: do not set this to center because headers can wrap\n // and we want the icon to align with the top row of content\n align-self: flex-start;\n\n transition-property: transform;\n transition-duration: pfe-var(animation-speed);\n transition-timing-function: pfe-var(animation-timing);\n\n :host([expanded]) & {\n transform: rotate(90deg);\n }\n\n // Move the icon to the front of the row on disclosures\n :host([disclosure]:not([disclosure=\"false\"])) & {\n order: -1;\n }\n\n // Hide pfe-icon on IE11, using the chevron\n @include browser-query(ie11) {\n display: none !important;\n }\n}\n\n// Applies to accent region inside the template\n.pf-c-accordion__toggle-accents {\n flex-grow: 1;\n}\n\n// Same styles as the panel, see shared-assets\n@include pfe-accordion--expanded();\n","// @todo Change to mixins; no efficiency gain with placeholders in web components\n\n/// Clear box element styles\n%reset-box {\n margin: 0;\n padding: 0;\n}\n\n/// Clear list styles\n%reset-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n/// Clear button styles\n%reset-button {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n text-align: left;\n}\n\n/// Set up a container element\n%container {\n position: relative;\n display: block;\n width: 100%;\n padding: pfe-var(container-padding);\n}\n\n/// Screen-reader only content\n%sr-only {\n position: absolute;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n}\n\n/// Fallback surface styles for IE11 only\n%fallback-surface {\n @include browser-query(ie11) {\n background-color: pfe-fetch(surface--lightest) !important;\n color: pfe-fetch(text) !important;\n }\n}\n\n/// Fallback text styles for IE11 only\n%fallback-text {\n @include browser-query(ie11) {\n color: pfe-fetch(text) !important;\n }\n}\n","@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n .pf-c-accordion__toggle {\n /* IE10+ */\n background-color: #fff !important;\n color: #151515 !important;\n }\n}\n\n:host {\n position: relative;\n display: block;\n outline: none;\n background-color: var(--pfe-accordion--BackgroundColor, transparent);\n color: var(--pfe-accordion--Color, var(--pfe-broadcasted--text, #3c3f42));\n box-shadow: var(--pfe-accordion--BoxShadow, 0 5px 4px transparent);\n --pfe-icon--color: var(--pfe-accordion--Color, var(--pfe-broadcasted--text, #3c3f42));\n --pfe-icon--size: 14px;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host *,\n:host *::before,\n:host *::after {\n box-sizing: border-box;\n}\n\n#heading {\n margin: 0;\n}\n\n.pf-c-accordion__toggle {\n cursor: pointer;\n outline: none;\n position: relative;\n width: 100%;\n margin: 0;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: calc(var(--pfe-theme--container-padding, 1rem) * 1.5);\n padding: var(--pfe-accordion--Padding, var(--pfe-theme--container-padding, 1rem) calc(var(--pfe-theme--container-padding, 1rem) * 1.5));\n background-color: transparent;\n color: var(--pfe-accordion--Color, var(--pfe-broadcasted--text, #3c3f42));\n text-align: left;\n font-family: var(--pfe-theme--font-family--heading, \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif);\n font-size: var(--pfe-accordion--FontSize--header, var(--pf-global--FontSize--xl, 1.25rem));\n font-weight: var(--pfe-accordion--FontWeight--header, var(--pfe-theme--font-weight--normal, 400));\n text-align: var(--pfe-accordion--TextAlign, left);\n line-height: var(--pfe-theme--line-height, 1.5);\n --_typography-offset: calc((1em * var(--pfe-theme--line-height, 1.5) - 1em) / 2);\n border-style: var(--pfe-theme--surface--border-style, solid);\n border-width: var(--pfe-accordion--BorderWidth, var(--pfe-theme--surface--border-width, 1px));\n border-color: var(--pfe-accordion--BorderColor, var(--pfe-theme--color--surface--border, #d2d2d2));\n border-right-color: transparent;\n border-left-color: transparent;\n}\n\n.pf-c-accordion__toggle::before {\n position: absolute;\n content: \"\";\n top: -2px;\n left: -2px;\n width: calc(100% + var(--pfe-theme--ui--border-width--active, 3px));\n height: calc(100% + var(--pfe-theme--ui--border-width--active, 3px));\n border-radius: var(--pfe-theme--ui--border-radius, 2px);\n border: var(--pfe-theme--ui--border-width--md, 2px) var(--pfe-theme--ui--border-style, solid) transparent;\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n .pf-c-accordion__toggle::before {\n /* IE10+ */\n height: 100%;\n }\n}\n\n.pf-c-accordion__toggle:focus::before {\n border-color: #6b9ff0;\n}\n\n.pf-c-accordion__toggle:focus:not(:focus-visible)::before {\n border: unset;\n}\n\n.pf-c-accordion__toggle .pf-c-accordion__toggle-icon {\n --_typography-offset: calc((1em * var(--pfe-theme--line-height, 1.5) - var(--pfe-icon--size, 14px)) / 2);\n}\n\n.pf-c-accordion__toggle .pf-c-accordion__toggle-text {\n margin-top: calc(-1 * var(--_typography-offset, 5px));\n margin-bottom: calc(-1 * var(--_typography-offset, 5px));\n}\n\n.pf-c-accordion__toggle .pf-c-accordion__toggle-icon {\n margin-top: calc(var(--_typography-offset, 5px) / 4);\n}\n\n:host(:not(:first-of-type)) .pf-c-accordion__toggle {\n border-top-width: 0;\n}\n\n.pf-c-accordion__toggle::after {\n position: absolute;\n content: \"\";\n top: -1px;\n left: -1px;\n bottom: -1px;\n background-color: var(--pfe-accordion--accent, transparent);\n width: calc(var(--pfe-accordion--accent--width, var(--pfe-theme--surface--border-width--active, 3px)) - -1px);\n height: calc(100% - -1px - -1px);\n z-index: 4;\n z-index: calc(var(--pfe-accordion--ZIndex, 3) + 1);\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n .pf-c-accordion__toggle::after {\n /* IE10+ */\n }\n .pf-c-accordion__toggle::after:hover, .pf-c-accordion__toggle::after:active,\n :host(:not([expanded])) .pf-c-accordion__toggle::after:focus,\n :host([expanded]) .pf-c-accordion__toggle::after,\n :host(.animating) .pf-c-accordion__toggle::after {\n background-color: var(--pfe-theme--color--ui-accent, #06c);\n }\n}\n\n.pf-c-accordion__toggle:hover, .pf-c-accordion__toggle:active,\n:host(:not([expanded])) .pf-c-accordion__toggle:focus {\n --pfe-accordion--BackgroundColor: var(--pfe-accordion--BackgroundColor--active, var(--pfe-theme--color--surface--lighter, #f0f0f0));\n --pfe-accordion--Color: var(--pfe-accordion--Color--active, var(--pfe-broadcasted--text, #3c3f42));\n}\n\n:host(:not([expanded])) .pf-c-accordion__toggle:hover,\n:host(:not([expanded])) .pf-c-accordion__toggle:active,\n:host(:not([expanded])) .pf-c-accordion__toggle:focus {\n --pfe-accordion--accent: var(--pfe-accordion--accent--active, var(--pfe-theme--color--ui-accent, #06c));\n}\n\n:host([on=\"dark\"]) .pf-c-accordion__toggle:hover,\n:host([on=\"dark\"]:not([expanded])) .pf-c-accordion__toggle:focus,\n:host([on=\"dark\"]) .pf-c-accordion__toggle:active {\n --pfe-accordion--BackgroundColor: var(--pfe-accordion--BackgroundColor--active, rgba(247, 247, 249, 0.1));\n --pfe-accordion--Color: var(--pfe-accordion--Color--active, var(--pfe-broadcasted--text, #3c3f42));\n}\n\n:host([on=\"dark\"]:not([expanded])) .pf-c-accordion__toggle:hover,\n:host([on=\"dark\"]:not([expanded])) .pf-c-accordion__toggle:active,\n:host([on=\"dark\"]:not([expanded])) .pf-c-accordion__toggle:focus {\n --pfe-accordion--accent: var(--pfe-accordion--accent--active, var(--pfe-theme--color--ui-accent--on-dark, #73bcf7));\n}\n\n:host([on=\"saturated\"]) .pf-c-accordion__toggle:hover,\n:host([on=\"saturated\"]:not([expanded])) .pf-c-accordion__toggle:focus,\n:host([on=\"saturated\"]) .pf-c-accordion__toggle:active {\n --pfe-accordion--BackgroundColor: var(--pfe-accordion--BackgroundColor--active, rgba(0, 0, 0, 0.2));\n --pfe-accordion--Color: var(--pfe-accordion--Color--active, var(--pfe-broadcasted--text, #3c3f42));\n}\n\n:host([on=\"saturated\"]:not([expanded])) .pf-c-accordion__toggle:hover,\n:host([on=\"saturated\"]:not([expanded])) .pf-c-accordion__toggle:active,\n:host([on=\"saturated\"]:not([expanded])) .pf-c-accordion__toggle:focus {\n --pfe-accordion--accent: var(--pfe-accordion--accent--active, var(--pfe-theme--color--ui-accent--on-saturated, #fff));\n}\n\n:host([expanded]) .pf-c-accordion__toggle,\n:host(.animating) .pf-c-accordion__toggle {\n border-bottom-width: 0;\n}\n\n:host([expanded]) .pf-c-accordion__toggle,\n:host(.animating) .pf-c-accordion__toggle,\n:host([disclosure]:not([disclosure=\"false\"])) .pf-c-accordion__toggle {\n border-right-color: var(--pfe-accordion--BorderColor, var(--pfe-theme--color--surface--border, #d2d2d2));\n border-left-color: var(--pfe-accordion--BorderColor, var(--pfe-theme--color--surface--border, #d2d2d2));\n}\n\n:host([disclosure]:not([disclosure=\"false\"])) .pf-c-accordion__toggle {\n gap: calc(var(--pfe-theme--container-padding, 1rem) / 2);\n font-family: var(--pfe-theme--font-family, \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif);\n font-size: var(--pfe-accordion--FontSize--header, var(--pf-global--FontSize--md, 1rem));\n font-weight: var(--pfe-accordion--FontWeight--header, var(--pfe-theme--font-weight--semi-bold, 600));\n}\n\n.pf-c-accordion__toggle-wrapper {\n flex-grow: 1;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: calc(var(--pfe-theme--container-padding, 1rem) * 1.5);\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n .pf-c-accordion__toggle-wrapper {\n /* IE10+ */\n }\n .pf-c-accordion__toggle-wrapper::after {\n content: \"\";\n position: absolute;\n top: calc(var(--pfe-theme--container-spacer, 1rem) + 14px);\n display: block;\n border-style: var(--pfe-theme--surface--border-style, solid);\n height: 14px;\n width: 14px;\n transition: transform 0.15s;\n border-width: 0 2px 2px 0;\n transform: rotate(-45deg);\n right: calc(var(--pfe-theme--container-spacer, 1rem) * 1.3125);\n top: 1em !important;\n }\n :host([expanded]) .pf-c-accordion__toggle-wrapper::after,\n :host(.animating) .pf-c-accordion__toggle-wrapper::after {\n transform: rotate(45deg);\n }\n}\n\n.pf-c-accordion__toggle-text {\n max-width: var(--pfe-accordion--MaxWidth--content, 80ch);\n}\n\n.pf-c-accordion__toggle-icon {\n align-self: flex-start;\n transition-property: transform;\n transition-duration: var(--pfe-theme--animation-speed, 0.3s);\n transition-timing-function: var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946));\n}\n\n:host([expanded]) .pf-c-accordion__toggle-icon {\n transform: rotate(90deg);\n}\n\n:host([disclosure]:not([disclosure=\"false\"])) .pf-c-accordion__toggle-icon {\n order: -1;\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n .pf-c-accordion__toggle-icon {\n /* IE10+ */\n display: none !important;\n }\n}\n\n.pf-c-accordion__toggle-accents {\n flex-grow: 1;\n}\n\n:host {\n transition-property: box-shadow, border;\n transition-timing-function: var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946));\n transition-duration: calc(pfe-var(animation-speed) / 2);\n}\n\n:host([expanded]),\n:host(.animating) {\n --pfe-accordion--BackgroundColor: var(--pfe-accordion--BackgroundColor--expanded, var(--pfe-theme--color--surface--lightest, #fff));\n --pfe-accordion--Color: var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text, #3c3f42));\n --pfe-accordion--accent: var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent, #06c));\n}\n\n:host([expanded]:not(.animating)) {\n --pfe-accordion--BoxShadow: var(--pfe-accordion--BoxShadow--expanded, 0 5px 4px rgba(140, 140, 140, 0.35));\n}\n\n:host([on=\"dark\"][expanded]),\n:host([on=\"dark\"].animating) {\n --pfe-accordion--BackgroundColor: var(--pfe-accordion--BackgroundColor--expanded, rgba(247, 247, 249, 0.1));\n --pfe-accordion--Color: var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-dark, #fff));\n --pfe-accordion--accent: var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-dark, #73bcf7));\n}\n\n:host([expanded]:not(.animating)) {\n --pfe-accordion--BoxShadow: var(--pfe-accordion--BoxShadow--expanded, none);\n}\n\n:host([on=\"saturated\"][expanded]),\n:host([on=\"saturated\"].animating) {\n --pfe-accordion--BackgroundColor: var(--pfe-accordion--BackgroundColor--expanded, rgba(0, 0, 0, 0.2));\n --pfe-accordion--Color: var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-saturated, #fff));\n --pfe-accordion--accent: var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-saturated, #fff));\n}\n\n:host([expanded]:not(.animating)) {\n --pfe-accordion--BoxShadow: var(--pfe-accordion--BoxShadow--expanded, none);\n}\n","////\n/// Tools for leveraging custom property stacks\n/// @group custom-properties\n/// @author castastrophe\n////\n\n/// Get full theme stack with a fallback from the provided map - used by pfe-var and pfe-zindex\n/// @param {String} $category - Category name to be appended to variables within the map/system\n/// @param {String} $key - Variable name to be used and prepended with --pfe-theme\n/// @param {Map} $map - Sass map of variables\n/// @param {String} $fallback [null] - Optional fallback override\n/// @param {Boolean} $use-fallback [true] - Optional hook to return a stack with no fallback value\n/// @requires $custom-prop-prefix\n/// @return {String} theme stack with fallback value from a sass map\n@function pfe-get-from-map($category, $key, $map, $fallback: null, $prefix: \"#{$custom-prop-prefix}-theme\", $use-fallback: true) {\n // Start building the variable declaration\n $var-declaration: \"--#{$prefix}--\";\n @if $prefix == \"pf-c\" {\n $var-declaration: \"--#{$prefix}-\"; // one dash at the end\n }\n // If the category exists, inject that into the string\n @if $category != \"\" {\n $var-declaration: \"#{$var-declaration}#{$category}--\";\n }\n // Append the key to the string\n $var-declaration: \"#{$var-declaration}#{$key}\";\n\n // If the fallback is not provided but use-fallback is set to true\n @if $fallback == null and $use-fallback and map-get($map, $key) != null {\n $fallback: map-get($map, $key);\n }\n @if $fallback != null {\n // Create the variable declaration\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration}); \n}\n\n\n\n/// Returns CSS Var for the local component-scoped variable\n/// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--'\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $custom-prop-prefix\n/// @see $LOCAL\n/// @example\n/// :host {\n/// padding-top: #{pfe-local(paddingTop)};\n/// padding-bottom: #{pfe-local(paddingBottom)};\n/// }\n@function pfe-local($cssvar, $fallback: null, $region: null) {\n // If a fallback is not defined, use the global variables map\n @if $fallback == null and length($LOCAL-VARIABLES) > 0 {\n @if $region == null {\n $fallback: map-get($LOCAL-VARIABLES, $cssvar);\n }\n @else {\n $submap: map-get($LOCAL-VARIABLES, $region);\n @if type-of($submap) == \"map\" {\n $fallback: map-deep-get($LOCAL-VARIABLES, $region, $cssvar);\n }\n }\n }\n\n // If a region value exists, build the region string\n @if $region != null {\n $region: \"__#{$region}\";\n }\n\n // Start building the variable declaration\n $var-declaration: \"--#{$custom-prop-prefix}-#{$LOCAL}#{$region}--#{to-string($cssvar, '--')}\";\n \n @if $fallback != null {\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration});\n}\n\n/// Fetches a CSS variable stack for broadcasted variables, providing a hook for context\n/// to influence the styles of children elements such as p tags or links.\n/// @param {String} $broadcast - name of the broadcast variable to apply\n/// @requires {String} $custom-prop-prefix - Name of repo, which is \"pfe\"\n/// @example - scss\n/// :host {\n/// color: pfe-broadcasted(link);\n/// }\n/// @example - css\n/// :host {\n/// color: var(--pfe-broadcasted--link, #06c);\n/// }\n@function pfe-broadcasted($broadcast, $use-fallback: true) {\n $fallback: \"\";\n @if $use-fallback {\n $fallback: \", #{map-get($pfe-broadcasted, #{to-string($broadcast,'--')})}\";\t\n }\n @if not index($BROADCAST-VARS, first(str-split($broadcast, '--'))) {\n @error \"--#{$custom-prop-prefix}-broadcasted--#{$broadcast} variable is not currently supported.\";\n }\n @else {\n @return var(--#{$custom-prop-prefix}-broadcasted--#{to-string($broadcast,'--')}#{unquote($fallback)});\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme--zindex\n/// @requires {Map} $pfe-zindex - SASS Map of z-index values\n/// @see $pfe-zindex\n/// @example - scss - In your component styles\n/// .my-element {\n/// z-index: pfe-zindex( content );\n/// }\n\n@function pfe-zindex($cssvar) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-zindex, $var-name) != null {\n @return pfe-get-from-map(\"zindex\", $var-name, $pfe-zindex);\n }\n @else {\n @error \"The key for #{$var-name} could not be found in the $pfe-zindex map.\";\n }\n}\n\n/// Returns the value (only) of a property from the respective maps\n/// Similar to pfe-var, but does not include css variable in the compiled CSS\n/// @param {String} $name - Name of the key for the map\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example - scss - In your component styles\n/// .my-element {\n/// background-color: pfe-fetch( ui-base );\n/// }\n@function pfe-fetch($name, $region: null) {\n $var-name: to-string($name, \"--\");\n @if $region != null and map-deep-get($LOCAL-VARIABLES, $region, $var-name) != null {\n @return map-deep-get($LOCAL-VARIABLES, $region, $var-name);\n }\n @else if $region == null and map-get($LOCAL-VARIABLES, $var-name) != null {\n @return map-get($LOCAL-VARIABLES, $var-name);\n }\n @else if map-get($pfe-vars, $var-name) != null {\n @return map-get($pfe-vars, $var-name);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return map-get($pfe-colors, $var-name);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return map-get($pfe-broadcasted, $var-name);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return map-get($pfe-typography-base, $var-name);\n }\n\n // PATTERNFLY CORE\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return map-get($pf-type-sizing, $var-name);\n }\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return map-get($pf-type-sizing--component, $var-name);\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return map-get($pf-type-sizing--modifers, $var-name);\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return map-get($pf-type-sizing--content, $var-name);\n }\n // DEPRECATED\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return map-get($pfe-typography-base-deprecated, $var-name);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return map-get($pfe-typography-deprecated, $var-name);\n }\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme\n/// @param {String} $fallback [null] - Optional custom fallback\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example scss - In your component styles\n/// .my-element {\n/// padding: pfe-var( container-spacer );\n/// font-size: pfe-var( font-size );\n/// }\n/// @example - css Rendered output\n/// .my-element {\n/// padding: var(--pfe-theme--container-spacer, 16px);\n/// font-size: var(--pfe-theme--font-size, 16px);\n/// }\n@function pfe-var($cssvar, $fallback: null) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-vars, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-vars, $fallback);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return pfe-get-from-map(\"color\", $var-name, $pfe-colors, $fallback);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-broadcasted);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base, $fallback);\n }\n // PATTERNFLY CORE:\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing, $fallback, $prefix: \"pf-global\");\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--modifers, $fallback, $prefix: \"pf-c\");\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--content, $fallback, $prefix: \"pf-c\");\n }\n // PFE components (must be below core)\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--component, $fallback);\n }\n\n // DEPRECATED:\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base-deprecated, $fallback);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-deprecated, $fallback);\n }\n\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}","// $boxSize = any box-sizing property, default is border-box\n@mixin pfe-box-sizing($boxSize: border-box) {\n *,\n *::before,\n *::after {\n box-sizing: $boxSize;\n }\n}\n\n@mixin pfe-clearfix {\n &::after {\n clear: both;\n content: \"\";\n display: table;\n }\n}\n\n@mixin pfe-container {\n @extend %container;\n\n padding: calc(#{pfe-local(Padding--vertical)} / 2) #{pfe-local(Padding--horizontal)};\n\n @media (min-width: pfe-breakpoint(sm)) {\n padding: pfe-local(Padding);\n }\n}\n\n// Note: This works best with the padding set on the container and the container nested\n// below the application of the collapsible mixin\n@mixin pfe-collapsible($state: closed) {\n\n @if $state != closed {\n opacity: 1;\n height: auto;\n } @else {\n display: block;\n position: relative;\n transition: height pfe-var(animation-speed) pfe-var(animation-timing);\n will-change: height;\n overflow-y: clip;\n height: 0;\n }\n}\n\n/// Custom focus ring\n@mixin focus-ring(\n $offset: 0,\n $pseudo: after,\n $color: pfe-var(link)\n) {\n outline: none;\n position: relative;\n\n // Focus uses a pseudo-element because it needs to overflow the container, outline also does not support border-radius settings\n &::#{$pseudo} {\n position: absolute;\n content: \"\";\n top: $offset;\n left: $offset;\n width: calc(100% + #{pfe-var(ui--border-width--active)});\n height: calc(100% + #{pfe-var(ui--border-width--active)});\n border-radius: pfe-var(ui--border-radius);\n border: pfe-var(ui--border-width--md) pfe-var(ui--border-style) transparent;\n @include browser-query(ie11) {\n height: 100%;\n }\n }\n\n &:focus::#{$pseudo} {\n border-color: $color;\n }\n \n // Remove the focus indicator on mouse-focus for browsers\n // that do support :focus-visible\n &:focus:not(:focus-visible)::#{$pseudo} {\n border: unset;\n }\n}\n\n/// Accent bar styles\n@mixin accent-bar(\n $direction: horizontal,\n $offset: (\n top: 0px,\n left: 0px\n ),\n $thickness: pfe-var(surface--border-width--heavy),\n $color: transparent\n) {\n $vertical: \"\";\n $horizontal: \"\";\n\n position: absolute;\n content: \"\";\n @each $direction, $size in $offset {\n #{$direction}: $size;\n @if $direction == \"top\" or $direction == \"bottom\" {\n @if $vertical != \"\" {\n $vertical: \"#{$vertical} - #{$size}\";\n } @else {\n $vertical: \"#{$size}\";\n }\n } @else {\n @if $horizontal != \"\" {\n $horizontal: \"#{$horizontal} - #{$size)}\";\n } @else {\n $horizontal: \"#{$size}\";\n }\n }\n }\n background-color: $color;\n @if $direction != horizontal {\n width: calc(#{$thickness} - #{$horizontal});\n height: calc(100% - #{$vertical});\n } @else {\n width: calc(100% - #{$vertical});\n height: calc(#{$thickness} - #{$horizontal});\n }\n}\n","////\n/// Accordion-specific SASS Vars\n/// @group accordion\n////\n\n@function pfe-accordion-variables($state: default, $context: default, $variant: default) {\n // Shared variables for all contexts\n $accordion-styles: ();\n\n @if $state != expanded { // Default state\n // Shared variables for all contexts\n $accordion-styles: (\n BorderColor--accent: transparent,\n BorderColor: pfe-var(surface--border),\n BorderTopWidth: pfe-var(surface--border-width),\n BorderRightWidth: 0,\n BorderBottomWidth: pfe-var(surface--border-width),\n BorderLeftWidth: pfe-var(surface--border-width--heavy),\n Color: pfe-broadcasted(text),\n TextAlign: left,\n accent: pfe-var(ui-accent),\n base: (\n Padding: pfe-var(container-spacer)\n )\n );\n\n @if $context == dark { // Dark context\n $accordion-styles: (\n accent: pfe-var(ui-accent--on-dark)\n );\n }\n @else if $context == saturated { // Saturated context\n $accordion-styles: (\n accent: pfe-var(ui-accent--on-saturated)\n );\n }\n\n @if $variant == disclosure {\n $accordion-styles: (\n BorderRightWidth: pfe-var(surface--border-width),\n BorderLeftWidth: pfe-var(surface--border-width),\n BorderColor--accent: pfe-var(surface--border)\n );\n }\n }\n @else { // Expanded state\n // Shared variables for all contexts\n $accordion-styles: (\n BorderColor: pfe-var(surface--border),\n BorderRightWidth: pfe-var(surface--border-width),\n BorderLeftWidth: pfe-var(surface--border-width--heavy),\n // Defaults for light context\n BackgroundColor: rgba(255, 255, 255, 1),\n Color: pfe-var(text),\n BorderColor--accent: pfe-local(accent),\n BoxShadow: 0 5px pfe-var(surface--border-width--heavy) rgba(140, 140, 140, 0.35),\n ZIndex: 3\n );\n\n @if $context == dark { // Dark context\n $accordion-styles: (\n BackgroundColor: rgba(247, 247, 249, .1),\n Color: pfe-broadcasted(text),\n BorderColor--accent: pfe-var(ui-accent--on-dark),\n BoxShadow: none\n );\n }\n @else if $context == saturated { // Saturated context\n $accordion-styles: (\n BackgroundColor: rgba(0, 0, 0, 0.2),\n Color: pfe-broadcasted(text),\n BorderColor--accent: pfe-var(ui-accent--on-saturated),\n BoxShadow: none\n );\n }\n \n @if $variant == disclosure {\n $accordion-styles: (\n BorderLeftWidth: pfe-var(surface--border-width--heavy),\n BorderColor--accent: pfe-var(ui-accent)\n );\n }\n }\n\n @return $accordion-styles;\n}\n\n@mixin pfe-accordion-props($variant: default) {\n margin: 0;\n width: pfe-local(Width, 100%);\n max-width: 100%;\n height: auto;\n position: relative;\n\n // Since the default bg color is transparent, look to broadcast values\n background-color: pfe-local(BackgroundColor, transparent);\n color: pfe-local(Color);\n\n // Border settings\n border-width: 0;\n border-style: pfe-var(surface--border-style);\n border-color: pfe-local(BorderColor);\n border-top-width: pfe-local(BorderTopWidth, $fallback: pfe-var(surface--border-width));\n border-right-width: pfe-local(BorderRightWidth, $fallback: 0);\n border-bottom-width: pfe-local(BorderBottomWidth, $fallback: pfe-var(surface--border-width));\n border-left-width: pfe-local(BorderLeftWidth, $fallback: pfe-var(surface--border-width--heavy));\n\n @include browser-query(ie11) {\n border-top-width: pfe-fetch(surface--border-width);\n border-right-width: 0;\n border-bottom-width: pfe-fetch(surface--border-width);\n border-left-width: pfe-fetch(surface--border-width--heavy);\n }\n\n // Custom border color for the accent mark on the left\n border-left-color: pfe-local(BorderColor--accent);\n\n box-shadow: pfe-local(BoxShadow);\n z-index: pfe-local(ZIndex);\n\n &:hover,\n &:focus {\n @include pfe-print-local((\n BorderColor--accent: pfe-local(accent)\n ));\n\n @include browser-query(ie11) {\n border-left-color: pfe-fetch(ui-accent);\n }\n }\n}\n\n//-- Trigger-specific properties\n@mixin pfe-trigger {\n $chevron--spacing: 50px;\n\n $LOCAL-VARIABLES: (\n BorderBottomWidth: 0,\n ZIndex: 3,\n trigger: (\n Padding: pfe-local(Padding, $region: base) $chevron--spacing pfe-local(Padding, $region: base) calc(#{pfe-local(Padding, $region: base)} * 1.5)\n )\n );\n\n @include pfe-print-local($LOCAL-VARIABLES);\n @include pfe-accordion-props;\n\n // -webkit-appearance: button;\n cursor: pointer;\n\n font-family: inherit;\n font-size: pfe-local(FontSize--header, calc(#{pfe-var(font-size)} * 1.1));\n font-weight: pfe-var(font-weight--bold);\n text-align: pfe-local(TextAlign, left);\n line-height: pfe-var(line-height);\n padding: pfe-local(Padding, $region: trigger);\n\n &:hover {\n outline: none;\n border-left-width: pfe-var(surface--border-width--heavy);\n }\n\n &:focus {\n outline: none;\n text-decoration: underline;\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n}\n\n@mixin pfe-trigger-last($context: light) {\n @include pfe-print-local((\n BorderBottomWidth: pfe-var(surface--border-width)\n ));\n}\n\n//-- Panel-specific properties\n@mixin pfe-panel-variables($context: light) {\n $LOCAL-VARIABLES: (\n accent: pfe-var(ui-accent),\n BorderTopWidth: 0\n );\n\n @if $context == \"light\" { // Light context\n $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, (\n BoxShadow: 0 5px pfe-var(surface--border-width--heavy) rgba(140, 140, 140, 0.35)\n ));\n }\n @else {\n $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, (\n BoxShadow: none\n ));\n }\n\n @include pfe-print-local($LOCAL-VARIABLES);\n}\n\n@mixin pfe-panel-container() {\n // Ensure the box shadow does not propagate to nest accordions\n @include pfe-print-local( ( BoxShadow: none ) );\n\n @extend %container;\n padding: pfe-local(Padding, $region: panel-container);\n}\n\n/// ===========================================================================\n/// Accordion chevrons\n/// ===========================================================================\n\n@mixin pfe-chevron($state: open, $position: after, $size: .4em, $offset: $size, $width: .1em) {\n content: \"\";\n position: absolute;\n top: calc(#{pfe-var(container-spacer)} + #{$offset});\n\n display: block;\n border-style: pfe-var(surface--border-style);\n height: $size;\n width: $size;\n transition: transform 0.15s;\n @if $state == open {\n border-width: $width $width 0 0;\n border-bottom: 0;\n transform: rotate(135deg);\n top: calc(#{pfe-var(container-spacer)} + #{$offset});\n @if $position == before {\n left: calc(#{pfe-var(container-spacer)} * 1.3125); // 21px\n top: calc(#{pfe-var(container-spacer)} + .25em);\n transform: rotate(135deg);\n }\n @else {\n right: calc(#{pfe-var(container-spacer)} * 1.3125);\n }\n }\n @else {\n border-width: 0 $width $width 0;\n transform: rotate(-45deg);\n @if $position == before {\n left: calc(#{pfe-var(container-spacer)} * 1.3125);\n transform: rotate(-45deg);\n }\n @else {\n right: calc(#{pfe-var(container-spacer)} * 1.3125);\n }\n }\n}\n\n/// ===========================================================================\n/// List styles\n/// ===========================================================================\n\n// Mixins and extends can't use the LOCAL-VARIABLES map because we would be\n// at risk of overriding an elements map if they call our mixin. We need to\n// use just regular sass variables and pfe-local and specify the $fallbacks.\n@mixin ordered-list-primary($size: 56px) {\n // First we create our Sass variables that we will use for fallbacks\n // The gap between list items\n $gap: pfe-var(content-spacer);\n // The space between the circle and content\n $spacer: pfe-var(content-spacer);\n // rgb value of the color theme of the circle\n // we need to wrap this in a calc function so it can be dynamic.\n $color: (238, 0, 0);\n // font size of the number inside of the circle\n $number-font-size: $pf-global--FontSize--2xl;\n\n list-style: none;\n min-height: pfe-local(gap, $fallback: $gap);\n margin: pfe-local(gap, $fallback: $gap);\n padding-left: pfe-local(PaddingLeft, $fallback: 0);\n\n & > li {\n // increment the local counter variable\n counter-increment: pfe-list;\n position: relative;\n min-height: pfe-local(size, $region: circle, $fallback: $size);\n // the li content will start after the circle and a defined spacer\n padding-left: calc(#{pfe-local(spacer, $fallback: $spacer)} + #{pfe-local(size, $region: circle, $fallback: $size)});\n // the li content needs to align with the middle of the radius but we\n // need to account for the fact that it's also calculating the size\n // of the line height of the number inside of the circle\n padding-top: calc((#{pfe-local(size, $region: circle, $fallback: $size)} / 2) - ((#{pfe-local(FontSize, $region: circle, $fallback: $number-font-size)} / 2)));\n }\n & > ul {\n list-style-type: disc;\n }\n & > li:before {\n @include pfe-typography(2xl, $type: \"title\");\n // we need to make sure that if the size of the number in the circle changes\n // that doesn't affect the size or shape of the circle. since we don't have\n // any more psuedo elements to work with, we need to use the flexbox technique\n // to center the text.\n display: block;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n // make the circle using border-radius\n border-radius: 50%;\n // keep the circle on the upper left\n position: absolute;\n top: 0;\n left: 0;\n // set the size of the circle\n width: pfe-local(size, $region: circle, $fallback: $size);\n height: pfe-local(size, $region: circle, $fallback: $size);\n // set the contents of the circle\n content: counter(pfe-list);\n font-size: pfe-local(FontSize, $region: circle, $fallback: $number-font-size);\n color: rgba(#{pfe-local(color, $region: circle, $fallback: $color)}, 1);\n // generate a background color based on the circle text color\n // provide an override for BackgroundColor if the user needs to specify\n // custom color.\n background-color: pfe-local(BackgroundColor, $region: circle, $fallback: rgba(pfe-local(color, $region: circle, $fallback: $color), 0.07));\n }\n\n & > li *:first-child {\n margin-top: pfe-local(MarginTop, $region: item-first-child, $fallback: 0);\n }\n\n // for pfe-grids we:\n // - use the pfe-grid API to add grid gap.\n // - remove the margins on the
  • tags in favor of the grid gap.\n // - add top and bottom margin back to the
      tags to maintain correct offset with surrounding content.\n &.pfe-l-grid.pfe-m-gutters {\n --pfe-grid--gap--vertical: #{pfe-local(gap, $fallback: $gap)};\n --pfe-grid--gap--horizontal: #{pfe-local(gap, $fallback: $gap)};\n --pfe-grid--Margin: #{pfe-local(Margin, $fallback: $gap)};\n --pfe-grid__item--Margin: #{pfe-local(Margin, $region: item, $fallback: 0)};\n }\n}\n","// NOTE: pfe-accordion uses shared styles that can be found in `pfe-sass/mixins/_components.scss`\n@import \"../../pfe-sass/pfe-sass\";\n\n$LOCAL: accordion;\n$LOCAL-VARIABLES: (\n Padding: pfe-var(container-padding) calc(#{pfe-var(container-padding)} * 1.5),\n\n BorderColor: pfe-var(surface--border),\n BorderWidth: pfe-var(surface--border-width),\n accent--width: pfe-var(surface--border-width--active),\n\n Width: 100%,\n MaxWidth--content: 80ch,\n\n BoxShadow: 0 5px 4px transparent,\n ZIndex: 3,\n\n FontSize--header: pfe-var(FontSize--xl),\n FontWeight--header: pfe-var(font-weight--normal),\n TextAlign: left,\n \n BackgroundColor: transparent,\n Color: pfe-broadcasted(text),\n accent: transparent,\n \n // Hover/focus state\n BackgroundColor--active: pfe-var(surface--lighter),\n Color--active: pfe-broadcasted(text),\n accent--active: pfe-var(ui-accent),\n\n // Open state\n BackgroundColor--expanded: pfe-var(surface--lightest),\n Color--expanded: pfe-broadcasted(text),\n accent--expanded: pfe-var(ui-accent),\n BoxShadow--expanded: 0 5px 4px rgba(140, 140, 140, 0.35), // @TODO Update to use box-shadow variables\n);\n\n@mixin pfe-accordion--expanded() {\n // Create a smoother appearance for the shadow and added borders\n :host {\n transition-property: box-shadow, border;\n transition-timing-function: pfe-var(animation-timing);\n transition-duration: calc(pfe-var(animation-speed) / 2);\n }\n\n :host([expanded]),\n :host(.animating) {\n --pfe-accordion--BackgroundColor: #{pfe-local(BackgroundColor--expanded)};\n --pfe-accordion--Color: #{pfe-local(Color--expanded)};\n --pfe-accordion--accent: #{pfe-local(accent--expanded)};\n }\n\n // Add this after animation is complete (looks odd during transition)\n :host([expanded]:not(.animating)) {\n --pfe-accordion--BoxShadow: #{pfe-local(BoxShadow--expanded)};\n }\n\n @each $context in (dark, saturated) {\n $overlay: rgba(247, 247, 249, .1);\n\n @if $context==saturated {\n $overlay: rgba(0, 0, 0, .2);\n }\n\n // Set properties to use their active modifier\n :host([on=\"#{$context}\"][expanded]),\n :host([on=\"#{$context}\"].animating) {\n --pfe-accordion--BackgroundColor: #{pfe-local(BackgroundColor--expanded, $overlay)};\n --pfe-accordion--Color: #{pfe-local(Color--expanded, pfe-broadcasted(text--on-#{$context}))};\n --pfe-accordion--accent: #{pfe-local(accent--expanded, pfe-var(ui-accent--on-#{$context}))};\n }\n\n :host([expanded]:not(.animating)) {\n --pfe-accordion--BoxShadow: #{pfe-local(BoxShadow--expanded, none)};\n }\n }\n}"],"sourceRoot":"../src"} \ No newline at end of file diff --git a/elements/pfe-accordion/dist/pfe-accordion-header.js b/elements/pfe-accordion/dist/pfe-accordion-header.js new file mode 100644 index 0000000000..7527bce906 --- /dev/null +++ b/elements/pfe-accordion/dist/pfe-accordion-header.js @@ -0,0 +1,267 @@ +/*! + * PatternFly Elements: PfeAccordion 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * +*/ + +import PFElement from "../../pfelement/dist/pfelement.js"; +import PfeIcon from "../../pfe-icon/dist/pfe-icon.js"; + +class PfeAccordionHeader extends PFElement { + + // Injected at build-time + static get version() { + return "1.12.3"; + } + + // Injected at build-time + get html() { + return ` + +<${this.headingTag || "h3"} id="heading"> + +`; + } + + static get tag() { + return "pfe-accordion-header"; + } + + get styleUrl() { + return "pfe-accordion-header.scss"; + } + + get templateUrl() { + return "pfe-accordion-header.html"; + } + + // @TODO this is for navigation 1.0 updates + // get isDirectLink() { + // return this.hasAttribute("is-direct-link"); + // } + + // get link() { + // return this.querySelector("a[href]"); + // } + + static get observer() { + return { + childList: true, + }; + } + + static get properties() { + return { + _id: { + type: String, + default: (el) => `${el.randomId.replace("pfe", el.tag)}`, + prefix: false, + }, + ariaControls: { + type: String, + prefix: false, + }, + // @TODO Deprecated pfe-id in 1.0 + oldPfeId: { + type: String, + alias: "_id", + attr: "pfe-id", + }, + expanded: { + title: "Expanded", + type: Boolean, + observer: "_expandedChanged", + }, + }; + } + + static get events() { + return { + change: `pfe-accordion:change`, + }; + } + + constructor() { + super(PfeAccordionHeader); + + this._init = this._init.bind(this); + this._clickHandler = this._clickHandler.bind(this); + this._observer = new MutationObserver(this._init); + this._slotObserver = new MutationObserver(this._init); + + this._getHeaderElement = this._getHeaderElement.bind(this); + + this.headingTag = "h3"; + + this.addEventListener("click", this._clickHandler); + } + + connectedCallback() { + super.connectedCallback(); + + // Capture the button and the text + this.button = this.shadowRoot.querySelector(`.pf-c-accordion__toggle`); + this._buttonText = this.button.querySelector(`.pf-c-accordion__toggle-text`); + + if (this.hasLightDOM()) this._init(); + else { + this._observer.observe(this, PfeAccordionHeader.observer); + } + } + + disconnectedCallback() { + super.disconnectedCallback(); + + this.removeEventListener("click", this._clickHandler); + this._observer.disconnect(); + } + + _init() { + this._observer.disconnect(); + + const header = this._getHeaderElement(); + + if (header) { + this.headingTag = header.tagName ? header.tagName.toLowerCase() : "h3"; + this.headingText = header.textContent ? header.textContent.trim() : ""; + } + + // Update button text + this._buttonText.innerHTML = this.headingText; + + // Remove the hidden attribute after upgrade + this.removeAttribute("hidden"); + + this._observer.observe(this, PfeAccordionHeader.observer); + + // @TODO this is for navigation 1.0 updates + // Validate that headers with the `is-direct-link` attribute contain a link + // if (this.isDirectLink && !this.link) { + // this.warn(`This component expects to find a link in the light DOM due to the "is-direct-link" attribute`); + // } + } + + _getHeaderElement() { + // Check if there is no nested element or nested textNodes + if (!this.firstElementChild && !this.firstChild) { + this.warn(`No header content provided`); + return; + } + + if (this.firstElementChild && this.firstElementChild.tagName) { + const htags = this.fetchElement( + this.children, + (el) => el.tagName && (el.tagName.match(/^H[1-6]/) || el.tagName === "P"), + this._slotObserver + ); + + // If there is no content inside the slot, return empty with a warning + if (htags.length === 0) { + this.warn(`No heading information was provided.`); + return; + } + // If there is more than 1 element in the slot, capture the first h-tag + else if (htags.length > 1) { + this.warn(`Heading currently only supports 1 tag; extra tags will be ignored.`); + return htags[0]; + } else return htags[0]; + } else { + const htag = document.createElement("h3"); + + if (this.firstChild && this.firstChild.nodeType === "#text") { + // If a text node was provided but no semantics, default to an h3 + htag.textContent = this.firstChild.textContent; + } else { + this.warn(`Header should contain at least 1 heading tag for correct semantics.`); + + // If incorrect semantics were used, create an H3 and try to capture the content + htag.textContent = this.textContent; + } + + return htag; + } + } + + _clickHandler(event) { + this.emitEvent(PfeAccordionHeader.events.change, { + detail: { + expanded: !this.expanded, + toggle: event.target, + }, + }); + } + + _expandedChanged() { + if (this.button) { + this.button.setAttribute("aria-expanded", this.expanded ? "true" : "false"); + } + } + + /** + * Provides a standard way of fetching light DOM that may or may not be provided inside + * of a slot; optional filtering of results and way to pass in an observer if you need to + * track updates to the slot + * @param {NodeItem} el + * @param {function} filter [optional] Filter for the returned results of the NodeList + * @param {function} observer [optional] Pointer to the observer defined for that slot + */ + fetchElement(els, filter, observer) { + if (!els) return []; + let nodes = [...els]; + + // Parse the nodes for slotted content + [...nodes] + .filter((node) => node && node.tagName === "SLOT") + .forEach((node) => { + // Remove node from the list + const idx = nodes.findIndex((item) => item === node); + // Capture it's assigned nodes for validation + let slotted = node.assignedNodes(); + // If slotted elements were found, add it to the nodeList + if (slotted && slotted.length > 0) { + // Remove the slot from the set, add the slotted content + nodes.splice(idx, 1, ...slotted); + } else { + // If no content exists in the slot, check for default content in the slot template + const defaults = node.children; + if (defaults && defaults.length > 0) nodes[idx] = defaults[0]; + } + + // Attach the observer if provided to watch for updates to the slot + // Useful if you are moving content from light DOM to shadow DOM + if (typeof observer === "function") { + observer.observer(node, PfeAccordionHeader.observer); + } + }); + + if (typeof filter === "function") return nodes.filter(filter); + else return nodes; + } +} + +export default PfeAccordionHeader; diff --git a/elements/pfe-accordion/dist/pfe-accordion-header.min.css.map b/elements/pfe-accordion/dist/pfe-accordion-header.min.css.map new file mode 100644 index 0000000000..83a99fb9fa --- /dev/null +++ b/elements/pfe-accordion/dist/pfe-accordion-header.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../pfe-sass/mixins/_mixins.scss","../../src/pfe-accordion-header.scss","../../../pfe-sass/extends/_extends.scss","pfe-accordion-header.css","../../../pfe-sass/mixins/_containers.scss","../../../pfe-sass/mixins/_components.scss","../../src/_shared-assets.scss"],"names":[],"mappings":"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","file":"pfe-accordion-header.min.css","sourceRoot":"../src","sourcesContent":[null,null,null,"@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n .pf-c-accordion__toggle {\n /* IE10+ */\n background-color: #fff !important;\n color: #151515 !important;\n }\n}\n\n:host {\n position: relative;\n display: block;\n outline: none;\n background-color: transparent;\n background-color: var(--pfe-accordion--BackgroundColor, transparent);\n color: #3c3f42;\n color: var(--pfe-accordion--Color, var(--pfe-broadcasted--text, #3c3f42));\n -webkit-box-shadow: 0 5px 4px transparent;\n box-shadow: 0 5px 4px transparent;\n -webkit-box-shadow: var(--pfe-accordion--BoxShadow, 0 5px 4px transparent);\n box-shadow: var(--pfe-accordion--BoxShadow, 0 5px 4px transparent);\n --pfe-icon--color: var(--pfe-accordion--Color, var(--pfe-broadcasted--text, #3c3f42));\n --pfe-icon--size: 14px;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n#heading {\n margin: 0;\n}\n\n.pf-c-accordion__toggle {\n cursor: pointer;\n outline: none;\n position: relative;\n width: 100%;\n margin: 0;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -webkit-align-items: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: start;\n -webkit-justify-content: flex-start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n gap: calc(1rem * 1.5);\n gap: calc(var(--pfe-theme--container-padding, 1rem) * 1.5);\n padding: 1rem calc(1rem * 1.5);\n padding: var(--pfe-accordion--Padding, var(--pfe-theme--container-padding, 1rem) calc(var(--pfe-theme--container-padding, 1rem) * 1.5));\n background-color: transparent;\n color: #3c3f42;\n color: var(--pfe-accordion--Color, var(--pfe-broadcasted--text, #3c3f42));\n text-align: left;\n font-family: \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif;\n font-family: var(--pfe-theme--font-family--heading, \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif);\n font-size: 1.25rem;\n font-size: var(--pfe-accordion--FontSize--header, var(--pf-global--FontSize--xl, 1.25rem));\n font-weight: 400;\n font-weight: var(--pfe-accordion--FontWeight--header, var(--pfe-theme--font-weight--normal, 400));\n text-align: left;\n text-align: var(--pfe-accordion--TextAlign, left);\n line-height: 1.5;\n line-height: var(--pfe-theme--line-height, 1.5);\n --_typography-offset: calc((1em * var(--pfe-theme--line-height, 1.5) - 1em) / 2);\n border-style: solid;\n border-style: var(--pfe-theme--surface--border-style, solid);\n border-width: 1px;\n border-width: var(--pfe-accordion--BorderWidth, var(--pfe-theme--surface--border-width, 1px));\n border-color: #d2d2d2;\n border-color: var(--pfe-accordion--BorderColor, var(--pfe-theme--color--surface--border, #d2d2d2));\n border-right-color: transparent;\n border-left-color: transparent;\n}\n\n.pf-c-accordion__toggle::before {\n position: absolute;\n content: \"\";\n top: -2px;\n left: -2px;\n width: calc(100% + 3px);\n width: calc(100% + var(--pfe-theme--ui--border-width--active, 3px));\n height: calc(100% + 3px);\n height: calc(100% + var(--pfe-theme--ui--border-width--active, 3px));\n border-radius: 2px;\n border-radius: var(--pfe-theme--ui--border-radius, 2px);\n border: 2px solid transparent;\n border: var(--pfe-theme--ui--border-width--md, 2px) var(--pfe-theme--ui--border-style, solid) transparent;\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n .pf-c-accordion__toggle::before {\n /* IE10+ */\n height: 100%;\n }\n}\n\n.pf-c-accordion__toggle:focus::before {\n border-color: #6b9ff0;\n}\n\n.pf-c-accordion__toggle:focus:not(:focus-visible)::before {\n border: unset;\n}\n\n.pf-c-accordion__toggle .pf-c-accordion__toggle-icon {\n --_typography-offset: calc((1em * var(--pfe-theme--line-height, 1.5) - var(--pfe-icon--size, 14px)) / 2);\n}\n\n.pf-c-accordion__toggle .pf-c-accordion__toggle-text {\n margin-top: calc(-1 * 5px);\n margin-top: calc(-1 * var(--_typography-offset, 5px));\n margin-bottom: calc(-1 * 5px);\n margin-bottom: calc(-1 * var(--_typography-offset, 5px));\n}\n\n.pf-c-accordion__toggle .pf-c-accordion__toggle-icon {\n margin-top: calc(5px / 4);\n margin-top: calc(var(--_typography-offset, 5px) / 4);\n}\n\n:host(:not(:first-of-type)) .pf-c-accordion__toggle {\n border-top-width: 0;\n}\n\n.pf-c-accordion__toggle::after {\n position: absolute;\n content: \"\";\n top: -1px;\n left: -1px;\n bottom: -1px;\n background-color: transparent;\n background-color: var(--pfe-accordion--accent, transparent);\n width: calc(3px - -1px);\n width: calc(var(--pfe-accordion--accent--width, var(--pfe-theme--surface--border-width--active, 3px)) - -1px);\n height: calc(100% - -1px - -1px);\n z-index: 4;\n z-index: calc(3 + 1);\n z-index: calc(var(--pfe-accordion--ZIndex, 3) + 1);\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n .pf-c-accordion__toggle::after {\n /* IE10+ */\n }\n .pf-c-accordion__toggle::after:hover, .pf-c-accordion__toggle::after:active,\n :host(:not([expanded])) .pf-c-accordion__toggle::after:focus,\n :host([expanded]) .pf-c-accordion__toggle::after,\n :host(.animating) .pf-c-accordion__toggle::after {\n background-color: #06c;\n background-color: var(--pfe-theme--color--ui-accent, #06c);\n }\n}\n\n.pf-c-accordion__toggle:hover, .pf-c-accordion__toggle:active,\n:host(:not([expanded])) .pf-c-accordion__toggle:focus {\n --pfe-accordion--BackgroundColor: var(--pfe-accordion--BackgroundColor--active, var(--pfe-theme--color--surface--lighter, #f0f0f0));\n --pfe-accordion--Color: var(--pfe-accordion--Color--active, var(--pfe-broadcasted--text, #3c3f42));\n}\n\n:host(:not([expanded])) .pf-c-accordion__toggle:hover,\n:host(:not([expanded])) .pf-c-accordion__toggle:active,\n:host(:not([expanded])) .pf-c-accordion__toggle:focus {\n --pfe-accordion--accent: var(--pfe-accordion--accent--active, var(--pfe-theme--color--ui-accent, #06c));\n}\n\n:host([on=\"dark\"]) .pf-c-accordion__toggle:hover,\n:host([on=\"dark\"]:not([expanded])) .pf-c-accordion__toggle:focus,\n:host([on=\"dark\"]) .pf-c-accordion__toggle:active {\n --pfe-accordion--BackgroundColor: var(--pfe-accordion--BackgroundColor--active, rgba(247, 247, 249, 0.1));\n --pfe-accordion--Color: var(--pfe-accordion--Color--active, var(--pfe-broadcasted--text, #3c3f42));\n}\n\n:host([on=\"dark\"]:not([expanded])) .pf-c-accordion__toggle:hover,\n:host([on=\"dark\"]:not([expanded])) .pf-c-accordion__toggle:active,\n:host([on=\"dark\"]:not([expanded])) .pf-c-accordion__toggle:focus {\n --pfe-accordion--accent: var(--pfe-accordion--accent--active, var(--pfe-theme--color--ui-accent--on-dark, #73bcf7));\n}\n\n:host([on=\"saturated\"]) .pf-c-accordion__toggle:hover,\n:host([on=\"saturated\"]:not([expanded])) .pf-c-accordion__toggle:focus,\n:host([on=\"saturated\"]) .pf-c-accordion__toggle:active {\n --pfe-accordion--BackgroundColor: var(--pfe-accordion--BackgroundColor--active, rgba(0, 0, 0, 0.2));\n --pfe-accordion--Color: var(--pfe-accordion--Color--active, var(--pfe-broadcasted--text, #3c3f42));\n}\n\n:host([on=\"saturated\"]:not([expanded])) .pf-c-accordion__toggle:hover,\n:host([on=\"saturated\"]:not([expanded])) .pf-c-accordion__toggle:active,\n:host([on=\"saturated\"]:not([expanded])) .pf-c-accordion__toggle:focus {\n --pfe-accordion--accent: var(--pfe-accordion--accent--active, var(--pfe-theme--color--ui-accent--on-saturated, #fff));\n}\n\n:host([expanded]) .pf-c-accordion__toggle,\n:host(.animating) .pf-c-accordion__toggle {\n border-bottom-width: 0;\n}\n\n:host([expanded]) .pf-c-accordion__toggle,\n:host(.animating) .pf-c-accordion__toggle,\n:host([disclosure]:not([disclosure=\"false\"])) .pf-c-accordion__toggle {\n border-right-color: #d2d2d2;\n border-right-color: var(--pfe-accordion--BorderColor, var(--pfe-theme--color--surface--border, #d2d2d2));\n border-left-color: #d2d2d2;\n border-left-color: var(--pfe-accordion--BorderColor, var(--pfe-theme--color--surface--border, #d2d2d2));\n}\n\n:host([disclosure]:not([disclosure=\"false\"])) .pf-c-accordion__toggle {\n gap: calc(1rem / 2);\n gap: calc(var(--pfe-theme--container-padding, 1rem) / 2);\n font-family: \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif;\n font-family: var(--pfe-theme--font-family, \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif);\n font-size: 1rem;\n font-size: var(--pfe-accordion--FontSize--header, var(--pf-global--FontSize--md, 1rem));\n font-weight: 600;\n font-weight: var(--pfe-accordion--FontWeight--header, var(--pfe-theme--font-weight--semi-bold, 600));\n}\n\n.pf-c-accordion__toggle-wrapper {\n -webkit-box-flex: 1;\n -webkit-flex-grow: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -webkit-align-items: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: start;\n -webkit-justify-content: flex-start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n gap: calc(1rem * 1.5);\n gap: calc(var(--pfe-theme--container-padding, 1rem) * 1.5);\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n .pf-c-accordion__toggle-wrapper {\n /* IE10+ */\n }\n .pf-c-accordion__toggle-wrapper::after {\n content: \"\";\n position: absolute;\n top: calc(1rem + 14px);\n top: calc(var(--pfe-theme--container-spacer, 1rem) + 14px);\n display: block;\n border-style: solid;\n border-style: var(--pfe-theme--surface--border-style, solid);\n height: 14px;\n width: 14px;\n -webkit-transition: -webkit-transform 0.15s;\n transition: -webkit-transform 0.15s;\n transition: transform 0.15s;\n transition: transform 0.15s, -webkit-transform 0.15s;\n border-width: 0 2px 2px 0;\n -webkit-transform: rotate(-45deg);\n transform: rotate(-45deg);\n right: calc(1rem * 1.3125);\n right: calc(var(--pfe-theme--container-spacer, 1rem) * 1.3125);\n top: 1em !important;\n }\n :host([expanded]) .pf-c-accordion__toggle-wrapper::after,\n :host(.animating) .pf-c-accordion__toggle-wrapper::after {\n -webkit-transform: rotate(45deg);\n transform: rotate(45deg);\n }\n}\n\n.pf-c-accordion__toggle-text {\n max-width: 80ch;\n max-width: var(--pfe-accordion--MaxWidth--content, 80ch);\n}\n\n.pf-c-accordion__toggle-icon {\n -webkit-align-self: flex-start;\n -ms-flex-item-align: start;\n align-self: flex-start;\n -webkit-transition-property: -webkit-transform;\n transition-property: -webkit-transform;\n transition-property: transform;\n transition-property: transform, -webkit-transform;\n -webkit-transition-duration: 0.3s;\n transition-duration: 0.3s;\n -webkit-transition-duration: var(--pfe-theme--animation-speed, 0.3s);\n transition-duration: var(--pfe-theme--animation-speed, 0.3s);\n -webkit-transition-timing-function: cubic-bezier(0.465, 0.183, 0.153, 0.946);\n transition-timing-function: cubic-bezier(0.465, 0.183, 0.153, 0.946);\n -webkit-transition-timing-function: var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946));\n transition-timing-function: var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946));\n}\n\n:host([expanded]) .pf-c-accordion__toggle-icon {\n -webkit-transform: rotate(90deg);\n transform: rotate(90deg);\n}\n\n:host([disclosure]:not([disclosure=\"false\"])) .pf-c-accordion__toggle-icon {\n -webkit-box-ordinal-group: 0;\n -webkit-order: -1;\n -ms-flex-order: -1;\n order: -1;\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n .pf-c-accordion__toggle-icon {\n /* IE10+ */\n display: none !important;\n }\n}\n\n.pf-c-accordion__toggle-accents {\n -webkit-box-flex: 1;\n -webkit-flex-grow: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n}\n\n:host {\n -webkit-transition-property: border, -webkit-box-shadow;\n transition-property: border, -webkit-box-shadow;\n transition-property: box-shadow, border;\n transition-property: box-shadow, border, -webkit-box-shadow;\n -webkit-transition-timing-function: cubic-bezier(0.465, 0.183, 0.153, 0.946);\n transition-timing-function: cubic-bezier(0.465, 0.183, 0.153, 0.946);\n -webkit-transition-timing-function: var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946));\n transition-timing-function: var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946));\n -webkit-transition-duration: calc(pfe-var(animation-speed) / 2);\n transition-duration: calc(pfe-var(animation-speed) / 2);\n}\n\n:host([expanded]),\n:host(.animating) {\n --pfe-accordion--BackgroundColor: var(--pfe-accordion--BackgroundColor--expanded, var(--pfe-theme--color--surface--lightest, #fff));\n --pfe-accordion--Color: var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text, #3c3f42));\n --pfe-accordion--accent: var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent, #06c));\n}\n\n:host([expanded]:not(.animating)) {\n --pfe-accordion--BoxShadow: var(--pfe-accordion--BoxShadow--expanded, 0 5px 4px rgba(140, 140, 140, 0.35));\n}\n\n:host([on=\"dark\"][expanded]),\n:host([on=\"dark\"].animating) {\n --pfe-accordion--BackgroundColor: var(--pfe-accordion--BackgroundColor--expanded, rgba(247, 247, 249, 0.1));\n --pfe-accordion--Color: var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-dark, #fff));\n --pfe-accordion--accent: var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-dark, #73bcf7));\n}\n\n:host([expanded]:not(.animating)) {\n --pfe-accordion--BoxShadow: var(--pfe-accordion--BoxShadow--expanded, none);\n}\n\n:host([on=\"saturated\"][expanded]),\n:host([on=\"saturated\"].animating) {\n --pfe-accordion--BackgroundColor: var(--pfe-accordion--BackgroundColor--expanded, rgba(0, 0, 0, 0.2));\n --pfe-accordion--Color: var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-saturated, #fff));\n --pfe-accordion--accent: var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-saturated, #fff));\n}\n\n:host([expanded]:not(.animating)) {\n --pfe-accordion--BoxShadow: var(--pfe-accordion--BoxShadow--expanded, none);\n}\n\n/*# sourceMappingURL=pfe-accordion-header.css.map */\n"]} \ No newline at end of file diff --git a/elements/pfe-accordion/dist/pfe-accordion-panel.css.map b/elements/pfe-accordion/dist/pfe-accordion-panel.css.map new file mode 100644 index 0000000000..f23a5554c8 --- /dev/null +++ b/elements/pfe-accordion/dist/pfe-accordion-panel.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../pfe-collapse/src/pfe-collapse-panel.scss","pfe-accordion-panel.css","pfe-accordion-panel.scss","../../pfe-sass/extends/_extends.scss","../../pfe-sass/functions/_custom-properties.scss","../../pfe-sass/mixins/_mixins.scss","../../pfe-sass/mixins/_containers.scss","_shared-assets.scss"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,gBAAgB;EAChB,mBAAmB;ACCrB;;ADEA;;EAEE,cAAc;EACd,kBAAkB;ACCpB;;ADEA;EACE,cAAc;EACd,2CAAmC;EAAnC,mCAAmC;ACCrC;;AC+CA;ECpCE,kBAAkB;EAClB,cAAc;EACd,WAAW;EACX,aCQkC;EDRlC,kDCQkC;AHfpC;;AInBM;EHSN;IGT4F,UAAA;IF4CxF,iCAAyD;IACzD,yBAAiC;EFnBnC;AACF;;AD9BA;EMmCI,cAAc;EACd,kBAAkB;EAClB,wEFAgC;EEAhC,gEFAgC;EEAhC,+IFAgC;EEAhC,uIFAgC;EEChC,mBAAmB;EACnB,gBAAgB;EAChB,SAAS;EJxBX,WAAW;EACX,UAAU;EAEV,SAAS;EACT,UAAU;EAEV,6BEyDkC;EFzDlC,oEEyDkC;EFxDlC,cEwDkC;EFxDlC,yEEwDkC;EFvDlC,yCEuDkC;UFvDlC,iCEuDkC;EFvDlC,0EEuDkC;UFvDlC,kEEuDkC;EFtDlC,8BAAsB;UAAtB,sBAAsB;EAGtB,mBESkC;EFTlC,4DESkC;EFRlC,qBEkDkC;EFlDlC,kGEkDkC;EFjDlC,iBEiDkC;EFjDlC,6FEiDkC;EF9ClC,mBAAmB;EACnB,sBAAsB;ADkBxB;;ACxCA;;;EIPI,8BAJsC;UAItC,sBAJsC;ALyD1C;;AC9CA;EAgCI,gCAA2B;ADkB/B;;AClDA;EIgFE,kBAAkB;EAClB,WAAW;EAET,sBJ3CgD;EI2ChD,kGJ3CgD;EI2ChD,oBJ1C8C;EI0C9C,gGJ1C8C;EIyDhD,6BF/BkC;EE+BlC,2DF/BkC;EEiChC,iCAA2C;EAA3C,mMAA2C;EAC3C,mCAAiC;EAAjC,+GAAiC;EJvDjC,oBAAuC;EAAvC,kDAAuC;ADe3C;;ACXA;EAME,qBAAqB;EAErB,8BESkC;EFTlC,uIESkC;AHDpC;;AChBA;EInDI,WAAW;EACX,WAAW;EACX,cAAc;ALuElB;;ACZE;EACE,qDEMgC;EFNhC,oNEMgC;AHSpC;;ACXE;EACE,eECgC;EFDhC,wDECgC;AHapC;;ADhFA;EE6EE,8BEVkC;EFUlC,4DEVkC;AHiBpC;;ACJA;EACE,iBAAiB;EACjB,gBAAgB;EAChB,wBEhBkC;EFgBlC,oGEhBkC;EE/ChC,UAAU;EACV,YAAY;ALuEhB;;ADxGA;EOwCQ,uDAAuC;EAAvC,+CAAuC;EAAvC,uCAAuC;EAAvC,2DAAuC;EACvC,4EHJ4B;UGI5B,oEHJ4B;EGI5B,gHHJ4B;UGI5B,wGHJ4B;EGK5B,+DAAuD;UAAvD,uDAAuD;ANoE/D;;AMjEI;;EAEI,mIAAiC;EACjC,8GAAuB;EACvB,kHAAwB;ANoEhC;;ACzBA;EKtCQ,0GAA2B;ANmEnC;;AMxDQ;;EAEI,2GAAiC;EACjC,oHAAuB;EACvB,8HAAwB;AN2DpC;;ACpCA;EKnBY,2EAA2B;AN2DvC;;AMnEQ;;EAEI,qGAAiC;EACjC,yHAAuB;EACvB,gIAAwB;ANsEpC;;AC/CA;EKnBY,2EAA2B;ANsEvC","file":"pfe-accordion-panel.css","sourcesContent":[":host {\n display: none;\n overflow: hidden;\n will-change: height;\n}\n\n:host([expanded]),\n:host([expanded]) {\n display: block;\n position: relative;\n}\n\n:host(.animating) {\n display: block;\n transition: height 0.3s ease-in-out;\n}\n",":host {\n display: none;\n overflow: hidden;\n will-change: height;\n}\n\n:host([expanded]),\n:host([expanded]) {\n display: block;\n position: relative;\n}\n\n:host(.animating) {\n display: block;\n transition: height 0.3s ease-in-out;\n}\n\n.pf-c-accordion__expanded-content {\n position: relative;\n display: block;\n width: 100%;\n padding: var(--pfe-theme--container-padding, 1rem);\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n :host {\n /* IE10+ */\n background-color: #fff !important;\n color: #151515 !important;\n }\n}\n\n:host {\n display: block;\n position: relative;\n transition: height var(--pfe-theme--animation-speed, 0.3s) var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946));\n will-change: height;\n overflow-y: clip;\n height: 0;\n width: 100%;\n z-index: 0;\n margin: 0;\n padding: 0;\n background-color: var(--pfe-accordion--BackgroundColor, transparent);\n color: var(--pfe-accordion--Color, var(--pfe-broadcasted--text, #3c3f42));\n box-shadow: var(--pfe-accordion--BoxShadow, 0 5px 4px transparent);\n box-sizing: border-box;\n border-style: var(--pfe-theme--surface--border-style, solid);\n border-color: var(--pfe-accordion--BorderColor, var(--pfe-theme--color--surface--border, #d2d2d2));\n border-width: var(--pfe-accordion--BorderWidth, var(--pfe-theme--surface--border-width, 1px));\n border-top-width: 0;\n border-bottom-width: 0;\n}\n\n:host *,\n:host *::before,\n:host *::after {\n box-sizing: border-box;\n}\n\n:host ::slotted(*) {\n --pfe-accordion--BoxShadow: none;\n}\n\n:host::after {\n position: absolute;\n content: \"\";\n bottom: calc(-1 * var(--pfe-accordion--BorderWidth, var(--pfe-theme--surface--border-width, 1px)));\n left: calc(-1 * var(--pfe-accordion--BorderWidth, var(--pfe-theme--surface--border-width, 1px)));\n background-color: var(--pfe-accordion--accent, transparent);\n width: calc(var(--pfe-accordion--accent--width, var(--pfe-theme--surface--border-width--active, 3px)) - calc(-1 * var(--pfe-accordion--BorderWidth, var(--pfe-theme--surface--border-width, 1px))));\n height: calc(100% - calc(-1 * var(--pfe-accordion--BorderWidth, var(--pfe-theme--surface--border-width, 1px))));\n z-index: calc(var(--pfe-accordion--ZIndex, 3) + 1);\n}\n\n.pf-c-accordion__expanded-content {\n display: inline-block;\n padding: var(--pfe-accordion--Padding, var(--pfe-theme--container-padding, 1rem) calc(var(--pfe-theme--container-padding, 1rem) * 1.5));\n}\n\n.pf-c-accordion__expanded-content::after {\n clear: both;\n content: \"\";\n display: table;\n}\n\n:host([disclosure=\"true\"]) .pf-c-accordion__expanded-content {\n padding: var(--pfe-accordion__panel-container--Padding, 0 calc(var(--pfe-theme--container-padding, 1rem) * 3) calc(var(--pfe-theme--container-padding, 1rem)) calc(var(--pfe-theme--container-padding, 1rem) * 1.5));\n}\n\n:host(:not([full-width])) .pf-c-accordion__expanded-content {\n max-width: var(--pfe-accordion--MaxWidth--content, 80ch);\n}\n\n:host(.animating) {\n border-left-color: var(--pfe-accordion--accent, transparent);\n}\n\n:host([expanded]:not(.animating)) {\n overflow: visible;\n margin-bottom: 0;\n border-bottom-width: var(--pfe-accordion--BorderWidth, var(--pfe-theme--surface--border-width, 1px));\n opacity: 1;\n height: auto;\n}\n\n:host {\n transition-property: box-shadow, border;\n transition-timing-function: var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946));\n transition-duration: calc(pfe-var(animation-speed) / 2);\n}\n\n:host([expanded]),\n:host(.animating) {\n --pfe-accordion--BackgroundColor: var(--pfe-accordion--BackgroundColor--expanded, var(--pfe-theme--color--surface--lightest, #fff));\n --pfe-accordion--Color: var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text, #3c3f42));\n --pfe-accordion--accent: var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent, #06c));\n}\n\n:host([expanded]:not(.animating)) {\n --pfe-accordion--BoxShadow: var(--pfe-accordion--BoxShadow--expanded, 0 5px 4px rgba(140, 140, 140, 0.35));\n}\n\n:host([on=\"dark\"][expanded]),\n:host([on=\"dark\"].animating) {\n --pfe-accordion--BackgroundColor: var(--pfe-accordion--BackgroundColor--expanded, rgba(247, 247, 249, 0.1));\n --pfe-accordion--Color: var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-dark, #fff));\n --pfe-accordion--accent: var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-dark, #73bcf7));\n}\n\n:host([expanded]:not(.animating)) {\n --pfe-accordion--BoxShadow: var(--pfe-accordion--BoxShadow--expanded, none);\n}\n\n:host([on=\"saturated\"][expanded]),\n:host([on=\"saturated\"].animating) {\n --pfe-accordion--BackgroundColor: var(--pfe-accordion--BackgroundColor--expanded, rgba(0, 0, 0, 0.2));\n --pfe-accordion--Color: var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-saturated, #fff));\n --pfe-accordion--accent: var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-saturated, #fff));\n}\n\n:host([expanded]:not(.animating)) {\n --pfe-accordion--BoxShadow: var(--pfe-accordion--BoxShadow--expanded, none);\n}\n","// Import the base styles first\n@import \"../../pfe-collapse/src/pfe-collapse-panel.scss\";\n\n// Then layer the shared assets over it\n@import \"shared-assets\";\n\n/// ===========================================================================\n/// ACCORDION PANEL\n/// Styles sourced from: @patternfly/patternfly/components/Accordion/accordion.scss\n/// then updated for pfe theming variables\n/// ===========================================================================\n\n:host {\n @include pfe-box-sizing;\n @include pfe-collapsible($state: closed);\n\n width: 100%;\n z-index: 0;\n\n margin: 0;\n padding: 0;\n\n background-color: pfe-local(BackgroundColor, transparent);\n color: pfe-local(Color);\n box-shadow: pfe-local(BoxShadow);\n box-sizing: border-box;\n\n // Border settings\n border-style: pfe-var(surface--border-style);\n border-color: pfe-local(BorderColor);\n border-width: pfe-local(BorderWidth);\n\n // No visible top border on the panel is necessary\n border-top-width: 0;\n border-bottom-width: 0;\n\n // Allows the headers to sit flush against each other\n // margin-bottom: calc(-1 * #{pfe-local(BorderWidth)});\n\n // Force IE11 to use white to prevent content from being un-readable\n @extend %fallback-surface;\n\n ::slotted(*) {\n // Ensure the box shadow does not propagate to nested accordions\n --pfe-accordion--BoxShadow: none;\n }\n\n // Accent bar\n &::after {\n @include accent-bar(\n $direction: vertical,\n $offset: (\n bottom: calc(-1 * #{pfe-local(BorderWidth)}),\n left: calc(-1 * #{pfe-local(BorderWidth)})\n ),\n $thickness: pfe-local(accent--width),\n $color: pfe-local(accent) // defaults to transparent\n );\n z-index: calc(#{pfe-local(ZIndex)} + 1);\n }\n}\n\n.pf-c-accordion__expanded-content {\n @extend %container;\n @include pfe-clearfix;\n\n // Note: inline-block is important for accomodating for inline\n // margin-top values inside the default slot\n display: inline-block;\n\n padding: pfe-local(Padding);\n\n :host([disclosure=\"true\"]) & {\n padding: pfe-local(Padding, $region: panel-container, $fallback: 0 calc(#{pfe-var(container-padding)} * 3) calc(#{pfe-var(container-padding)}) calc(#{pfe-var(container-padding)} * 1.5));\n }\n\n // Allow opt-out of panel max-width via attribute or CSS variable\n :host(:not([full-width])) & {\n max-width: pfe-local(MaxWidth--content);\n }\n}\n\n/// ===========================================================================\n/// EXPANDED STYLES\n/// ===========================================================================\n\n// Set the left border to blue during animation to prevent flicker\n// from overflow change\n:host(.animating) {\n border-left-color: pfe-local(accent);\n}\n\n:host([expanded]:not(.animating)) {\n overflow: visible;\n margin-bottom: 0;\n border-bottom-width: pfe-local(BorderWidth);\n @include pfe-collapsible($state: open);\n}\n\n// Same styles as the header, see shared-assets\n@include pfe-accordion--expanded();\n","// @todo Change to mixins; no efficiency gain with placeholders in web components\n\n/// Clear box element styles\n%reset-box {\n margin: 0;\n padding: 0;\n}\n\n/// Clear list styles\n%reset-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n/// Clear button styles\n%reset-button {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n text-align: left;\n}\n\n/// Set up a container element\n%container {\n position: relative;\n display: block;\n width: 100%;\n padding: pfe-var(container-padding);\n}\n\n/// Screen-reader only content\n%sr-only {\n position: absolute;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n}\n\n/// Fallback surface styles for IE11 only\n%fallback-surface {\n @include browser-query(ie11) {\n background-color: pfe-fetch(surface--lightest) !important;\n color: pfe-fetch(text) !important;\n }\n}\n\n/// Fallback text styles for IE11 only\n%fallback-text {\n @include browser-query(ie11) {\n color: pfe-fetch(text) !important;\n }\n}\n","////\n/// Tools for leveraging custom property stacks\n/// @group custom-properties\n/// @author castastrophe\n////\n\n/// Get full theme stack with a fallback from the provided map - used by pfe-var and pfe-zindex\n/// @param {String} $category - Category name to be appended to variables within the map/system\n/// @param {String} $key - Variable name to be used and prepended with --pfe-theme\n/// @param {Map} $map - Sass map of variables\n/// @param {String} $fallback [null] - Optional fallback override\n/// @param {Boolean} $use-fallback [true] - Optional hook to return a stack with no fallback value\n/// @requires $custom-prop-prefix\n/// @return {String} theme stack with fallback value from a sass map\n@function pfe-get-from-map($category, $key, $map, $fallback: null, $prefix: \"#{$custom-prop-prefix}-theme\", $use-fallback: true) {\n // Start building the variable declaration\n $var-declaration: \"--#{$prefix}--\";\n @if $prefix == \"pf-c\" {\n $var-declaration: \"--#{$prefix}-\"; // one dash at the end\n }\n // If the category exists, inject that into the string\n @if $category != \"\" {\n $var-declaration: \"#{$var-declaration}#{$category}--\";\n }\n // Append the key to the string\n $var-declaration: \"#{$var-declaration}#{$key}\";\n\n // If the fallback is not provided but use-fallback is set to true\n @if $fallback == null and $use-fallback and map-get($map, $key) != null {\n $fallback: map-get($map, $key);\n }\n @if $fallback != null {\n // Create the variable declaration\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration}); \n}\n\n\n\n/// Returns CSS Var for the local component-scoped variable\n/// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--'\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $custom-prop-prefix\n/// @see $LOCAL\n/// @example\n/// :host {\n/// padding-top: #{pfe-local(paddingTop)};\n/// padding-bottom: #{pfe-local(paddingBottom)};\n/// }\n@function pfe-local($cssvar, $fallback: null, $region: null) {\n // If a fallback is not defined, use the global variables map\n @if $fallback == null and length($LOCAL-VARIABLES) > 0 {\n @if $region == null {\n $fallback: map-get($LOCAL-VARIABLES, $cssvar);\n }\n @else {\n $submap: map-get($LOCAL-VARIABLES, $region);\n @if type-of($submap) == \"map\" {\n $fallback: map-deep-get($LOCAL-VARIABLES, $region, $cssvar);\n }\n }\n }\n\n // If a region value exists, build the region string\n @if $region != null {\n $region: \"__#{$region}\";\n }\n\n // Start building the variable declaration\n $var-declaration: \"--#{$custom-prop-prefix}-#{$LOCAL}#{$region}--#{to-string($cssvar, '--')}\";\n \n @if $fallback != null {\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration});\n}\n\n/// Fetches a CSS variable stack for broadcasted variables, providing a hook for context\n/// to influence the styles of children elements such as p tags or links.\n/// @param {String} $broadcast - name of the broadcast variable to apply\n/// @requires {String} $custom-prop-prefix - Name of repo, which is \"pfe\"\n/// @example - scss\n/// :host {\n/// color: pfe-broadcasted(link);\n/// }\n/// @example - css\n/// :host {\n/// color: var(--pfe-broadcasted--link, #06c);\n/// }\n@function pfe-broadcasted($broadcast, $use-fallback: true) {\n $fallback: \"\";\n @if $use-fallback {\n $fallback: \", #{map-get($pfe-broadcasted, #{to-string($broadcast,'--')})}\";\t\n }\n @if not index($BROADCAST-VARS, first(str-split($broadcast, '--'))) {\n @error \"--#{$custom-prop-prefix}-broadcasted--#{$broadcast} variable is not currently supported.\";\n }\n @else {\n @return var(--#{$custom-prop-prefix}-broadcasted--#{to-string($broadcast,'--')}#{unquote($fallback)});\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme--zindex\n/// @requires {Map} $pfe-zindex - SASS Map of z-index values\n/// @see $pfe-zindex\n/// @example - scss - In your component styles\n/// .my-element {\n/// z-index: pfe-zindex( content );\n/// }\n\n@function pfe-zindex($cssvar) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-zindex, $var-name) != null {\n @return pfe-get-from-map(\"zindex\", $var-name, $pfe-zindex);\n }\n @else {\n @error \"The key for #{$var-name} could not be found in the $pfe-zindex map.\";\n }\n}\n\n/// Returns the value (only) of a property from the respective maps\n/// Similar to pfe-var, but does not include css variable in the compiled CSS\n/// @param {String} $name - Name of the key for the map\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example - scss - In your component styles\n/// .my-element {\n/// background-color: pfe-fetch( ui-base );\n/// }\n@function pfe-fetch($name, $region: null) {\n $var-name: to-string($name, \"--\");\n @if $region != null and map-deep-get($LOCAL-VARIABLES, $region, $var-name) != null {\n @return map-deep-get($LOCAL-VARIABLES, $region, $var-name);\n }\n @else if $region == null and map-get($LOCAL-VARIABLES, $var-name) != null {\n @return map-get($LOCAL-VARIABLES, $var-name);\n }\n @else if map-get($pfe-vars, $var-name) != null {\n @return map-get($pfe-vars, $var-name);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return map-get($pfe-colors, $var-name);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return map-get($pfe-broadcasted, $var-name);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return map-get($pfe-typography-base, $var-name);\n }\n\n // PATTERNFLY CORE\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return map-get($pf-type-sizing, $var-name);\n }\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return map-get($pf-type-sizing--component, $var-name);\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return map-get($pf-type-sizing--modifers, $var-name);\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return map-get($pf-type-sizing--content, $var-name);\n }\n // DEPRECATED\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return map-get($pfe-typography-base-deprecated, $var-name);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return map-get($pfe-typography-deprecated, $var-name);\n }\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme\n/// @param {String} $fallback [null] - Optional custom fallback\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example scss - In your component styles\n/// .my-element {\n/// padding: pfe-var( container-spacer );\n/// font-size: pfe-var( font-size );\n/// }\n/// @example - css Rendered output\n/// .my-element {\n/// padding: var(--pfe-theme--container-spacer, 16px);\n/// font-size: var(--pfe-theme--font-size, 16px);\n/// }\n@function pfe-var($cssvar, $fallback: null) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-vars, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-vars, $fallback);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return pfe-get-from-map(\"color\", $var-name, $pfe-colors, $fallback);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-broadcasted);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base, $fallback);\n }\n // PATTERNFLY CORE:\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing, $fallback, $prefix: \"pf-global\");\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--modifers, $fallback, $prefix: \"pf-c\");\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--content, $fallback, $prefix: \"pf-c\");\n }\n // PFE components (must be below core)\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--component, $fallback);\n }\n\n // DEPRECATED:\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base-deprecated, $fallback);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-deprecated, $fallback);\n }\n\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}","@mixin browser-query($browser-list) {\n @each $browser in $browser-list {\n @if $browser == ie11 {\n @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { /* IE10+ */\n @content;\n }\n }\n @if $browser == edge12 {\n @supports (-ms-accelerator: true) { /* Microsoft Edge Browser 12+ */\n @content;\n }\n }\n @if $browser == edge {\n @supports (-ms-ime-align: auto) { /* Microsoft Edge Browser 16+ (All) */\n @content;\n }\n }\n @if $browser == firefox {\n @media all and (min--moz-device-pixel-ratio:0) { /* Mozilla Firefox (All) */\n @content;\n }\n }\n }\n}\n\n@mixin pfe-transition($properties...) {\n $return: null;\n @each $property in $properties {\n @if length($property) == 1 {\n $return: append($return, #{$property} 250ms $pfe-global--animation-timing, comma);\n }\n @else if length($property) == 2 {\n $return: append($return, nth($property, 1) nth($property, 2), comma);\n }\n }\n transition: $return;\n}\n\n// Make a CSS arrow\n@mixin pfe-arrow($type, $color, $width: 8px, $height: 5px, $pseudo: false) {\n $direction: (\n up: 180deg,\n down: 0deg,\n right: -90deg,\n left: 90deg,\n );\n border-style: pfe-var(surface--border-style);\n border-width: $width $height 0;\n border-color: transparent;\n border-top-color: $color;\n transform: rotate(map-get($direction, $type));\n @if $pseudo {\n display: inline-block;\n content: \"\";\n @content;\n }\n}\n\n@mixin pfe-arrow-color($color) {\n border-top-color: $color;\n}\n\n@mixin pfe-print-media {\n @media print {\n @content;\n }\n}\n\n@mixin pfe-print-background {\n -webkit-print-color-adjust: exact;\n color-adjust: exact;\n}\n\n@mixin pfe-no-print-background {\n @include pfe-print-media {\n background-color: white !important;\n background-image: none !important;\n box-shadow: none !important;\n }\n}\n\n@mixin pfe-hidden {\n @at-root #{&}([hidden]) {\n display: none;\n }\n}\n\n@mixin pfe-pipe( $position: right, $padding: 0, $margin: 0, $color: $border-color) {\n border: pfe-var(surface--border-width) pfe-var(surface--border-style) transparent;\n border-#{$position}-color: $color;\n @if $position == right {\n padding-left: $padding;\n margin-right: $margin;\n }\n @else if $position == left {\n padding-right: $padding;\n margin-left: $margin;\n }\n}\n\n@mixin pfe-retina {\n @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n @content;\n }\n}\n\n@mixin pfe-icon($path, $display: flex, $size: 1em) {\n display: #{$display};\n @if $path {\n background: #{$path} no-repeat;\n background-size: contain;\n background-position: center;\n }\n width: #{$size};\n height: #{$size};\n @content;\n}\n\n@mixin pfe-local-debug($map: $LOCAL-VARIABLES) {\n :root {\n @include pfe-print-local($map);\n }\n} ","// $boxSize = any box-sizing property, default is border-box\n@mixin pfe-box-sizing($boxSize: border-box) {\n *,\n *::before,\n *::after {\n box-sizing: $boxSize;\n }\n}\n\n@mixin pfe-clearfix {\n &::after {\n clear: both;\n content: \"\";\n display: table;\n }\n}\n\n@mixin pfe-container {\n @extend %container;\n\n padding: calc(#{pfe-local(Padding--vertical)} / 2) #{pfe-local(Padding--horizontal)};\n\n @media (min-width: pfe-breakpoint(sm)) {\n padding: pfe-local(Padding);\n }\n}\n\n// Note: This works best with the padding set on the container and the container nested\n// below the application of the collapsible mixin\n@mixin pfe-collapsible($state: closed) {\n\n @if $state != closed {\n opacity: 1;\n height: auto;\n } @else {\n display: block;\n position: relative;\n transition: height pfe-var(animation-speed) pfe-var(animation-timing);\n will-change: height;\n overflow-y: clip;\n height: 0;\n }\n}\n\n/// Custom focus ring\n@mixin focus-ring(\n $offset: 0,\n $pseudo: after,\n $color: pfe-var(link)\n) {\n outline: none;\n position: relative;\n\n // Focus uses a pseudo-element because it needs to overflow the container, outline also does not support border-radius settings\n &::#{$pseudo} {\n position: absolute;\n content: \"\";\n top: $offset;\n left: $offset;\n width: calc(100% + #{pfe-var(ui--border-width--active)});\n height: calc(100% + #{pfe-var(ui--border-width--active)});\n border-radius: pfe-var(ui--border-radius);\n border: pfe-var(ui--border-width--md) pfe-var(ui--border-style) transparent;\n @include browser-query(ie11) {\n height: 100%;\n }\n }\n\n &:focus::#{$pseudo} {\n border-color: $color;\n }\n \n // Remove the focus indicator on mouse-focus for browsers\n // that do support :focus-visible\n &:focus:not(:focus-visible)::#{$pseudo} {\n border: unset;\n }\n}\n\n/// Accent bar styles\n@mixin accent-bar(\n $direction: horizontal,\n $offset: (\n top: 0px,\n left: 0px\n ),\n $thickness: pfe-var(surface--border-width--heavy),\n $color: transparent\n) {\n $vertical: \"\";\n $horizontal: \"\";\n\n position: absolute;\n content: \"\";\n @each $direction, $size in $offset {\n #{$direction}: $size;\n @if $direction == \"top\" or $direction == \"bottom\" {\n @if $vertical != \"\" {\n $vertical: \"#{$vertical} - #{$size}\";\n } @else {\n $vertical: \"#{$size}\";\n }\n } @else {\n @if $horizontal != \"\" {\n $horizontal: \"#{$horizontal} - #{$size)}\";\n } @else {\n $horizontal: \"#{$size}\";\n }\n }\n }\n background-color: $color;\n @if $direction != horizontal {\n width: calc(#{$thickness} - #{$horizontal});\n height: calc(100% - #{$vertical});\n } @else {\n width: calc(100% - #{$vertical});\n height: calc(#{$thickness} - #{$horizontal});\n }\n}\n","// NOTE: pfe-accordion uses shared styles that can be found in `pfe-sass/mixins/_components.scss`\n@import \"../../pfe-sass/pfe-sass\";\n\n$LOCAL: accordion;\n$LOCAL-VARIABLES: (\n Padding: pfe-var(container-padding) calc(#{pfe-var(container-padding)} * 1.5),\n\n BorderColor: pfe-var(surface--border),\n BorderWidth: pfe-var(surface--border-width),\n accent--width: pfe-var(surface--border-width--active),\n\n Width: 100%,\n MaxWidth--content: 80ch,\n\n BoxShadow: 0 5px 4px transparent,\n ZIndex: 3,\n\n FontSize--header: pfe-var(FontSize--xl),\n FontWeight--header: pfe-var(font-weight--normal),\n TextAlign: left,\n \n BackgroundColor: transparent,\n Color: pfe-broadcasted(text),\n accent: transparent,\n \n // Hover/focus state\n BackgroundColor--active: pfe-var(surface--lighter),\n Color--active: pfe-broadcasted(text),\n accent--active: pfe-var(ui-accent),\n\n // Open state\n BackgroundColor--expanded: pfe-var(surface--lightest),\n Color--expanded: pfe-broadcasted(text),\n accent--expanded: pfe-var(ui-accent),\n BoxShadow--expanded: 0 5px 4px rgba(140, 140, 140, 0.35), // @TODO Update to use box-shadow variables\n);\n\n@mixin pfe-accordion--expanded() {\n // Create a smoother appearance for the shadow and added borders\n :host {\n transition-property: box-shadow, border;\n transition-timing-function: pfe-var(animation-timing);\n transition-duration: calc(pfe-var(animation-speed) / 2);\n }\n\n :host([expanded]),\n :host(.animating) {\n --pfe-accordion--BackgroundColor: #{pfe-local(BackgroundColor--expanded)};\n --pfe-accordion--Color: #{pfe-local(Color--expanded)};\n --pfe-accordion--accent: #{pfe-local(accent--expanded)};\n }\n\n // Add this after animation is complete (looks odd during transition)\n :host([expanded]:not(.animating)) {\n --pfe-accordion--BoxShadow: #{pfe-local(BoxShadow--expanded)};\n }\n\n @each $context in (dark, saturated) {\n $overlay: rgba(247, 247, 249, .1);\n\n @if $context==saturated {\n $overlay: rgba(0, 0, 0, .2);\n }\n\n // Set properties to use their active modifier\n :host([on=\"#{$context}\"][expanded]),\n :host([on=\"#{$context}\"].animating) {\n --pfe-accordion--BackgroundColor: #{pfe-local(BackgroundColor--expanded, $overlay)};\n --pfe-accordion--Color: #{pfe-local(Color--expanded, pfe-broadcasted(text--on-#{$context}))};\n --pfe-accordion--accent: #{pfe-local(accent--expanded, pfe-var(ui-accent--on-#{$context}))};\n }\n\n :host([expanded]:not(.animating)) {\n --pfe-accordion--BoxShadow: #{pfe-local(BoxShadow--expanded, none)};\n }\n }\n}"],"sourceRoot":"../src"} \ No newline at end of file diff --git a/elements/pfe-accordion/dist/pfe-accordion-panel.js b/elements/pfe-accordion/dist/pfe-accordion-panel.js new file mode 100644 index 0000000000..6a4d22fe4e --- /dev/null +++ b/elements/pfe-accordion/dist/pfe-accordion-panel.js @@ -0,0 +1,109 @@ +/*! + * PatternFly Elements: PfeAccordion 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * +*/ + +import PFElement from "../../pfelement/dist/pfelement.js"; + +class PfeAccordionPanel extends PFElement { + + // Injected at build-time + static get version() { + return "1.12.3"; + } + + // Injected at build-time + get html() { + return ` + +
      +
      + +
      +
      `; + } + + static get tag() { + return "pfe-accordion-panel"; + } + + get styleUrl() { + return "pfe-accordion-panel.scss"; + } + + get templateUrl() { + return "pfe-accordion-panel.html"; + } + + static get properties() { + return { + _id: { + type: String, + default: (el) => `${el.randomId.replace("pfe", el.tag)}`, + prefix: false, + }, + role: { + type: String, + default: "region", + prefix: false, + }, + // @TODO Deprecated pfe-id in 1.0 + oldPfeId: { + type: String, + alias: "_id", + attr: "pfe-id", + }, + expanded: { + title: "Expanded", + type: Boolean, + default: false, + observer: "_expandedChanged" + }, + ariaLabelledby: { + type: String, + prefix: false, + }, + }; + } + + constructor() { + super(PfeAccordionPanel); + } + + connectedCallback() { + super.connectedCallback(); + this._expandedChanged(); + } + + _expandedChanged() { + if (this.expanded) { + this.removeAttribute("aria-hidden"); + this.removeAttribute("tabindex"); + } else { + this.setAttribute("aria-hidden", "true"); + this.setAttribute("tabindex", "-1"); + } + } +} + +export default PfeAccordionPanel; diff --git a/elements/pfe-accordion/dist/pfe-accordion-panel.min.css.map b/elements/pfe-accordion/dist/pfe-accordion-panel.min.css.map new file mode 100644 index 0000000000..493ed7a06b --- /dev/null +++ b/elements/pfe-accordion/dist/pfe-accordion-panel.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../pfe-collapse/src/pfe-collapse-panel.scss","../../src/pfe-accordion-panel.scss","../../../pfe-sass/extends/_extends.scss","../../../pfe-sass/mixins/_mixins.scss","../../../pfe-sass/mixins/_containers.scss","pfe-accordion-panel.css","../../src/_shared-assets.scss"],"names":[],"mappings":"AAAA,MACE,QAAA,KACA,SAAA,OACA,YAAA,OAGF,kBAEE,QAAA,MACA,SAAA,SAGF,kBACE,QAAA,MACA,mBAAA,OAAA,IAAA,YAAA,WAAA,OAAA,IAAA,YCgDF,kCCpCE,SAAA,SACA,QAAA,MACA,MAAA,KACA,QAAA,KAAA,QAAA,yCC1BI,6CAAA,oCFSN,MCmCI,iBAAA,eACA,MAAA,mBFhDJ,MImCI,QAAA,MACA,SAAA,SACA,mBAAA,OAAA,IAAA,kCAAA,WAAA,OAAA,IAAA,kCAAA,mBAAA,OAAA,sCAAA,qEAAA,WAAA,OAAA,sCAAA,qEACA,YAAA,OACA,WAAA,KACA,OAAA,EHxBF,MAAA,KACA,QAAA,EAEA,OAAA,EACA,QAAA,EAEA,iBAAA,YAAA,iBAAA,kDACA,MAAA,QAAA,MAAA,iEACA,mBAAA,EAAA,IAAA,IAAA,YAAA,WAAA,EAAA,IAAA,IAAA,YAAA,mBAAA,sDAAA,WAAA,sDACA,mBAAA,WAAA,WAAA,WAGA,aAAA,MAAA,aAAA,8CACA,aAAA,QAAA,aAAA,mFACA,aAAA,IAAA,aAAA,8EAGA,iBAAA,EACA,oBAAA,EAtBF,QI0DA,cADA,eDhEI,mBAAA,WAAA,WAAA,WHOJ,mBAgCI,2BAAA,KAhCJ,aGgFE,SAAA,SACA,QAAA,GAEE,OAAA,eAAA,OAAA,yFAAA,KAAA,eAAA,KAAA,yFAeF,iBAAA,YAAA,iBAAA,yCAEE,MAAA,2BAAA,MAAA,yLACA,OAAA,4BAAA,OAAA,sGHvDA,QAAA,YAAA,QAAA,yCAIJ,kCAME,QAAA,aAEA,QAAA,KAAA,iBAAA,QAAA,4HARF,yCGnDI,MAAA,KACA,QAAA,GACA,QAAA,MH2DF,2DACE,QAAA,EAAA,eAAA,WAAA,iBAAA,QAAA,wMAIF,4DACE,UAAA,KAAA,UAAA,6CDlEJ,kBC6EE,kBAAA,YAAA,kBAAA,yCAGF,kCACE,SAAA,QACA,cAAA,EACA,oBAAA,IAAA,oBAAA,8EG/DE,QAAA,EACA,OAAA,KJjCJ,MMwCQ,4BAAA,MAAA,CAAA,mBAAA,oBAAA,MAAA,CAAA,mBAAA,oBAAA,UAAA,CAAA,OAAA,oBAAA,UAAA,CAAA,MAAA,CAAA,mBACA,mCAAA,kCAAA,2BAAA,kCAAA,mCAAA,qEAAA,2BAAA,qEACA,4BAAA,kCAAA,oBAAA,kCDwGR,kBCrGI,kBAEI,iCAAA,kGACA,uBAAA,6EACA,wBAAA,iFL2CR,kCKtCQ,2BAAA,+EDuGR,2BC5FQ,2BAEI,iCAAA,0EACA,uBAAA,mFACA,wBAAA,6FLuBZ,kCKnBY,2BAAA,gDD+FZ,gCCvGQ,gCAEI,iCAAA,oEACA,uBAAA,wFACA,wBAAA,+FLuBZ,kCKnBY,2BAAA","file":"pfe-accordion-panel.min.css","sourceRoot":"../src","sourcesContent":[null,null,null,null,null,":host {\n display: none;\n overflow: hidden;\n will-change: height;\n}\n\n:host([expanded]),\n:host([expanded]) {\n display: block;\n position: relative;\n}\n\n:host(.animating) {\n display: block;\n -webkit-transition: height 0.3s ease-in-out;\n transition: height 0.3s ease-in-out;\n}\n\n.pf-c-accordion__expanded-content {\n position: relative;\n display: block;\n width: 100%;\n padding: 1rem;\n padding: var(--pfe-theme--container-padding, 1rem);\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n :host {\n /* IE10+ */\n background-color: #fff !important;\n color: #151515 !important;\n }\n}\n\n:host {\n display: block;\n position: relative;\n -webkit-transition: height 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);\n transition: height 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);\n -webkit-transition: height var(--pfe-theme--animation-speed, 0.3s) var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946));\n transition: height var(--pfe-theme--animation-speed, 0.3s) var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946));\n will-change: height;\n overflow-y: clip;\n height: 0;\n width: 100%;\n z-index: 0;\n margin: 0;\n padding: 0;\n background-color: transparent;\n background-color: var(--pfe-accordion--BackgroundColor, transparent);\n color: #3c3f42;\n color: var(--pfe-accordion--Color, var(--pfe-broadcasted--text, #3c3f42));\n -webkit-box-shadow: 0 5px 4px transparent;\n box-shadow: 0 5px 4px transparent;\n -webkit-box-shadow: var(--pfe-accordion--BoxShadow, 0 5px 4px transparent);\n box-shadow: var(--pfe-accordion--BoxShadow, 0 5px 4px transparent);\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n border-style: solid;\n border-style: var(--pfe-theme--surface--border-style, solid);\n border-color: #d2d2d2;\n border-color: var(--pfe-accordion--BorderColor, var(--pfe-theme--color--surface--border, #d2d2d2));\n border-width: 1px;\n border-width: var(--pfe-accordion--BorderWidth, var(--pfe-theme--surface--border-width, 1px));\n border-top-width: 0;\n border-bottom-width: 0;\n}\n\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n:host ::slotted(*) {\n --pfe-accordion--BoxShadow: none;\n}\n\n:host::after {\n position: absolute;\n content: \"\";\n bottom: calc(-1 * 1px);\n bottom: calc(-1 * var(--pfe-accordion--BorderWidth, var(--pfe-theme--surface--border-width, 1px)));\n left: calc(-1 * 1px);\n left: calc(-1 * var(--pfe-accordion--BorderWidth, var(--pfe-theme--surface--border-width, 1px)));\n background-color: transparent;\n background-color: var(--pfe-accordion--accent, transparent);\n width: calc(3px - calc(-1 * 1px));\n width: calc(var(--pfe-accordion--accent--width, var(--pfe-theme--surface--border-width--active, 3px)) - calc(-1 * var(--pfe-accordion--BorderWidth, var(--pfe-theme--surface--border-width, 1px))));\n height: calc(100% - calc(-1 * 1px));\n height: calc(100% - calc(-1 * var(--pfe-accordion--BorderWidth, var(--pfe-theme--surface--border-width, 1px))));\n z-index: calc(3 + 1);\n z-index: calc(var(--pfe-accordion--ZIndex, 3) + 1);\n}\n\n.pf-c-accordion__expanded-content {\n display: inline-block;\n padding: 1rem calc(1rem * 1.5);\n padding: var(--pfe-accordion--Padding, var(--pfe-theme--container-padding, 1rem) calc(var(--pfe-theme--container-padding, 1rem) * 1.5));\n}\n\n.pf-c-accordion__expanded-content::after {\n clear: both;\n content: \"\";\n display: table;\n}\n\n:host([disclosure=\"true\"]) .pf-c-accordion__expanded-content {\n padding: 0 calc(1rem * 3) calc(1rem) calc(1rem * 1.5);\n padding: var(--pfe-accordion__panel-container--Padding, 0 calc(var(--pfe-theme--container-padding, 1rem) * 3) calc(var(--pfe-theme--container-padding, 1rem)) calc(var(--pfe-theme--container-padding, 1rem) * 1.5));\n}\n\n:host(:not([full-width])) .pf-c-accordion__expanded-content {\n max-width: 80ch;\n max-width: var(--pfe-accordion--MaxWidth--content, 80ch);\n}\n\n:host(.animating) {\n border-left-color: transparent;\n border-left-color: var(--pfe-accordion--accent, transparent);\n}\n\n:host([expanded]:not(.animating)) {\n overflow: visible;\n margin-bottom: 0;\n border-bottom-width: 1px;\n border-bottom-width: var(--pfe-accordion--BorderWidth, var(--pfe-theme--surface--border-width, 1px));\n opacity: 1;\n height: auto;\n}\n\n:host {\n -webkit-transition-property: border, -webkit-box-shadow;\n transition-property: border, -webkit-box-shadow;\n transition-property: box-shadow, border;\n transition-property: box-shadow, border, -webkit-box-shadow;\n -webkit-transition-timing-function: cubic-bezier(0.465, 0.183, 0.153, 0.946);\n transition-timing-function: cubic-bezier(0.465, 0.183, 0.153, 0.946);\n -webkit-transition-timing-function: var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946));\n transition-timing-function: var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946));\n -webkit-transition-duration: calc(pfe-var(animation-speed) / 2);\n transition-duration: calc(pfe-var(animation-speed) / 2);\n}\n\n:host([expanded]),\n:host(.animating) {\n --pfe-accordion--BackgroundColor: var(--pfe-accordion--BackgroundColor--expanded, var(--pfe-theme--color--surface--lightest, #fff));\n --pfe-accordion--Color: var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text, #3c3f42));\n --pfe-accordion--accent: var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent, #06c));\n}\n\n:host([expanded]:not(.animating)) {\n --pfe-accordion--BoxShadow: var(--pfe-accordion--BoxShadow--expanded, 0 5px 4px rgba(140, 140, 140, 0.35));\n}\n\n:host([on=\"dark\"][expanded]),\n:host([on=\"dark\"].animating) {\n --pfe-accordion--BackgroundColor: var(--pfe-accordion--BackgroundColor--expanded, rgba(247, 247, 249, 0.1));\n --pfe-accordion--Color: var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-dark, #fff));\n --pfe-accordion--accent: var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-dark, #73bcf7));\n}\n\n:host([expanded]:not(.animating)) {\n --pfe-accordion--BoxShadow: var(--pfe-accordion--BoxShadow--expanded, none);\n}\n\n:host([on=\"saturated\"][expanded]),\n:host([on=\"saturated\"].animating) {\n --pfe-accordion--BackgroundColor: var(--pfe-accordion--BackgroundColor--expanded, rgba(0, 0, 0, 0.2));\n --pfe-accordion--Color: var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-saturated, #fff));\n --pfe-accordion--accent: var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-saturated, #fff));\n}\n\n:host([expanded]:not(.animating)) {\n --pfe-accordion--BoxShadow: var(--pfe-accordion--BoxShadow--expanded, none);\n}\n\n/*# sourceMappingURL=pfe-accordion-panel.css.map */\n"]} \ No newline at end of file diff --git a/elements/pfe-accordion/dist/pfe-accordion.css.map b/elements/pfe-accordion/dist/pfe-accordion.css.map new file mode 100644 index 0000000000..53e8bf5a79 --- /dev/null +++ b/elements/pfe-accordion/dist/pfe-accordion.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["pfe-accordion.scss","../../pfe-sass/functions/_custom-properties.scss","pfe-accordion.css"],"names":[],"mappings":"AAEA;EACE,cAAc;EACd,kBAAkB;EAClB,gBAAgB;EAChB,SAAS;EAET,WCuEkC;EDvElC,wCCuEkC;ACzEpC;;AFKA;EAEE,iBAAiB;AEHnB;;AFMA;EACE,aAAa;AEHf","file":"pfe-accordion.css","sourcesContent":["@import \"shared-assets\";\n\n:host {\n display: block;\n position: relative;\n overflow: hidden;\n margin: 0;\n\n width: pfe-local(Width);\n}\n\n:host {\n // This is required for the focus state to overflow the container\n overflow: visible;\n}\n\n:host([hidden]) {\n display: none;\n}\n","////\n/// Tools for leveraging custom property stacks\n/// @group custom-properties\n/// @author castastrophe\n////\n\n/// Get full theme stack with a fallback from the provided map - used by pfe-var and pfe-zindex\n/// @param {String} $category - Category name to be appended to variables within the map/system\n/// @param {String} $key - Variable name to be used and prepended with --pfe-theme\n/// @param {Map} $map - Sass map of variables\n/// @param {String} $fallback [null] - Optional fallback override\n/// @param {Boolean} $use-fallback [true] - Optional hook to return a stack with no fallback value\n/// @requires $custom-prop-prefix\n/// @return {String} theme stack with fallback value from a sass map\n@function pfe-get-from-map($category, $key, $map, $fallback: null, $prefix: \"#{$custom-prop-prefix}-theme\", $use-fallback: true) {\n // Start building the variable declaration\n $var-declaration: \"--#{$prefix}--\";\n @if $prefix == \"pf-c\" {\n $var-declaration: \"--#{$prefix}-\"; // one dash at the end\n }\n // If the category exists, inject that into the string\n @if $category != \"\" {\n $var-declaration: \"#{$var-declaration}#{$category}--\";\n }\n // Append the key to the string\n $var-declaration: \"#{$var-declaration}#{$key}\";\n\n // If the fallback is not provided but use-fallback is set to true\n @if $fallback == null and $use-fallback and map-get($map, $key) != null {\n $fallback: map-get($map, $key);\n }\n @if $fallback != null {\n // Create the variable declaration\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration}); \n}\n\n\n\n/// Returns CSS Var for the local component-scoped variable\n/// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--'\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $custom-prop-prefix\n/// @see $LOCAL\n/// @example\n/// :host {\n/// padding-top: #{pfe-local(paddingTop)};\n/// padding-bottom: #{pfe-local(paddingBottom)};\n/// }\n@function pfe-local($cssvar, $fallback: null, $region: null) {\n // If a fallback is not defined, use the global variables map\n @if $fallback == null and length($LOCAL-VARIABLES) > 0 {\n @if $region == null {\n $fallback: map-get($LOCAL-VARIABLES, $cssvar);\n }\n @else {\n $submap: map-get($LOCAL-VARIABLES, $region);\n @if type-of($submap) == \"map\" {\n $fallback: map-deep-get($LOCAL-VARIABLES, $region, $cssvar);\n }\n }\n }\n\n // If a region value exists, build the region string\n @if $region != null {\n $region: \"__#{$region}\";\n }\n\n // Start building the variable declaration\n $var-declaration: \"--#{$custom-prop-prefix}-#{$LOCAL}#{$region}--#{to-string($cssvar, '--')}\";\n \n @if $fallback != null {\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration});\n}\n\n/// Fetches a CSS variable stack for broadcasted variables, providing a hook for context\n/// to influence the styles of children elements such as p tags or links.\n/// @param {String} $broadcast - name of the broadcast variable to apply\n/// @requires {String} $custom-prop-prefix - Name of repo, which is \"pfe\"\n/// @example - scss\n/// :host {\n/// color: pfe-broadcasted(link);\n/// }\n/// @example - css\n/// :host {\n/// color: var(--pfe-broadcasted--link, #06c);\n/// }\n@function pfe-broadcasted($broadcast, $use-fallback: true) {\n $fallback: \"\";\n @if $use-fallback {\n $fallback: \", #{map-get($pfe-broadcasted, #{to-string($broadcast,'--')})}\";\t\n }\n @if not index($BROADCAST-VARS, first(str-split($broadcast, '--'))) {\n @error \"--#{$custom-prop-prefix}-broadcasted--#{$broadcast} variable is not currently supported.\";\n }\n @else {\n @return var(--#{$custom-prop-prefix}-broadcasted--#{to-string($broadcast,'--')}#{unquote($fallback)});\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme--zindex\n/// @requires {Map} $pfe-zindex - SASS Map of z-index values\n/// @see $pfe-zindex\n/// @example - scss - In your component styles\n/// .my-element {\n/// z-index: pfe-zindex( content );\n/// }\n\n@function pfe-zindex($cssvar) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-zindex, $var-name) != null {\n @return pfe-get-from-map(\"zindex\", $var-name, $pfe-zindex);\n }\n @else {\n @error \"The key for #{$var-name} could not be found in the $pfe-zindex map.\";\n }\n}\n\n/// Returns the value (only) of a property from the respective maps\n/// Similar to pfe-var, but does not include css variable in the compiled CSS\n/// @param {String} $name - Name of the key for the map\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example - scss - In your component styles\n/// .my-element {\n/// background-color: pfe-fetch( ui-base );\n/// }\n@function pfe-fetch($name, $region: null) {\n $var-name: to-string($name, \"--\");\n @if $region != null and map-deep-get($LOCAL-VARIABLES, $region, $var-name) != null {\n @return map-deep-get($LOCAL-VARIABLES, $region, $var-name);\n }\n @else if $region == null and map-get($LOCAL-VARIABLES, $var-name) != null {\n @return map-get($LOCAL-VARIABLES, $var-name);\n }\n @else if map-get($pfe-vars, $var-name) != null {\n @return map-get($pfe-vars, $var-name);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return map-get($pfe-colors, $var-name);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return map-get($pfe-broadcasted, $var-name);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return map-get($pfe-typography-base, $var-name);\n }\n\n // PATTERNFLY CORE\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return map-get($pf-type-sizing, $var-name);\n }\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return map-get($pf-type-sizing--component, $var-name);\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return map-get($pf-type-sizing--modifers, $var-name);\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return map-get($pf-type-sizing--content, $var-name);\n }\n // DEPRECATED\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return map-get($pfe-typography-base-deprecated, $var-name);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return map-get($pfe-typography-deprecated, $var-name);\n }\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme\n/// @param {String} $fallback [null] - Optional custom fallback\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example scss - In your component styles\n/// .my-element {\n/// padding: pfe-var( container-spacer );\n/// font-size: pfe-var( font-size );\n/// }\n/// @example - css Rendered output\n/// .my-element {\n/// padding: var(--pfe-theme--container-spacer, 16px);\n/// font-size: var(--pfe-theme--font-size, 16px);\n/// }\n@function pfe-var($cssvar, $fallback: null) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-vars, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-vars, $fallback);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return pfe-get-from-map(\"color\", $var-name, $pfe-colors, $fallback);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-broadcasted);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base, $fallback);\n }\n // PATTERNFLY CORE:\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing, $fallback, $prefix: \"pf-global\");\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--modifers, $fallback, $prefix: \"pf-c\");\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--content, $fallback, $prefix: \"pf-c\");\n }\n // PFE components (must be below core)\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--component, $fallback);\n }\n\n // DEPRECATED:\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base-deprecated, $fallback);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-deprecated, $fallback);\n }\n\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}",":host {\n display: block;\n position: relative;\n overflow: hidden;\n margin: 0;\n width: var(--pfe-accordion--Width, 100%);\n}\n\n:host {\n overflow: visible;\n}\n\n:host([hidden]) {\n display: none;\n}\n"],"sourceRoot":"../src"} \ No newline at end of file diff --git a/elements/pfe-accordion/dist/pfe-accordion.js b/elements/pfe-accordion/dist/pfe-accordion.js new file mode 100644 index 0000000000..87ec250c49 --- /dev/null +++ b/elements/pfe-accordion/dist/pfe-accordion.js @@ -0,0 +1,990 @@ +import PFElement from '../../pfelement/dist/pfelement.js'; +import '../../pfe-icon/dist/pfe-icon.js'; + +// @POLYFILL Array.prototype.findIndex +// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex +if (!Array.prototype.findIndex) { + Object.defineProperty(Array.prototype, "findIndex", { + value: function (predicate) { + // 1. Let O be ? ToObject(this value). + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. Let len be ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // 3. If IsCallable(predicate) is false, throw a TypeError exception. + if (typeof predicate !== "function") { + throw new TypeError("predicate must be a function"); + } + + // 4. If thisArg was supplied, let T be thisArg; else let T be undefined. + var thisArg = arguments[1]; + + // 5. Let k be 0. + var k = 0; + + // 6. Repeat, while k < len + while (k < len) { + // a. Let Pk be ! ToString(k). + // b. Let kValue be ? Get(O, Pk). + // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). + // d. If testResult is true, return k. + var kValue = o[k]; + if (predicate.call(thisArg, kValue, k, o)) { + return k; + } + // e. Increase k by 1. + k++; + } + + // 7. Return -1. + return -1; + }, + }); +} + +/*! + * PatternFly Elements: PfeAccordion 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * +*/ + +class PfeAccordionHeader extends PFElement { + + // Injected at build-time + static get version() { + return "1.12.3"; + } + + // Injected at build-time + get html() { + return ` + +<${this.headingTag || "h3"} id="heading"> + +`; + } + + static get tag() { + return "pfe-accordion-header"; + } + + get styleUrl() { + return "pfe-accordion-header.scss"; + } + + get templateUrl() { + return "pfe-accordion-header.html"; + } + + // @TODO this is for navigation 1.0 updates + // get isDirectLink() { + // return this.hasAttribute("is-direct-link"); + // } + + // get link() { + // return this.querySelector("a[href]"); + // } + + static get observer() { + return { + childList: true, + }; + } + + static get properties() { + return { + _id: { + type: String, + default: (el) => `${el.randomId.replace("pfe", el.tag)}`, + prefix: false, + }, + ariaControls: { + type: String, + prefix: false, + }, + // @TODO Deprecated pfe-id in 1.0 + oldPfeId: { + type: String, + alias: "_id", + attr: "pfe-id", + }, + expanded: { + title: "Expanded", + type: Boolean, + observer: "_expandedChanged", + }, + }; + } + + static get events() { + return { + change: `pfe-accordion:change`, + }; + } + + constructor() { + super(PfeAccordionHeader); + + this._init = this._init.bind(this); + this._clickHandler = this._clickHandler.bind(this); + this._observer = new MutationObserver(this._init); + this._slotObserver = new MutationObserver(this._init); + + this._getHeaderElement = this._getHeaderElement.bind(this); + + this.headingTag = "h3"; + + this.addEventListener("click", this._clickHandler); + } + + connectedCallback() { + super.connectedCallback(); + + // Capture the button and the text + this.button = this.shadowRoot.querySelector(`.pf-c-accordion__toggle`); + this._buttonText = this.button.querySelector(`.pf-c-accordion__toggle-text`); + + if (this.hasLightDOM()) this._init(); + else { + this._observer.observe(this, PfeAccordionHeader.observer); + } + } + + disconnectedCallback() { + super.disconnectedCallback(); + + this.removeEventListener("click", this._clickHandler); + this._observer.disconnect(); + } + + _init() { + this._observer.disconnect(); + + const header = this._getHeaderElement(); + + if (header) { + this.headingTag = header.tagName ? header.tagName.toLowerCase() : "h3"; + this.headingText = header.textContent ? header.textContent.trim() : ""; + } + + // Update button text + this._buttonText.innerHTML = this.headingText; + + // Remove the hidden attribute after upgrade + this.removeAttribute("hidden"); + + this._observer.observe(this, PfeAccordionHeader.observer); + + // @TODO this is for navigation 1.0 updates + // Validate that headers with the `is-direct-link` attribute contain a link + // if (this.isDirectLink && !this.link) { + // this.warn(`This component expects to find a link in the light DOM due to the "is-direct-link" attribute`); + // } + } + + _getHeaderElement() { + // Check if there is no nested element or nested textNodes + if (!this.firstElementChild && !this.firstChild) { + this.warn(`No header content provided`); + return; + } + + if (this.firstElementChild && this.firstElementChild.tagName) { + const htags = this.fetchElement( + this.children, + (el) => el.tagName && (el.tagName.match(/^H[1-6]/) || el.tagName === "P"), + this._slotObserver + ); + + // If there is no content inside the slot, return empty with a warning + if (htags.length === 0) { + this.warn(`No heading information was provided.`); + return; + } + // If there is more than 1 element in the slot, capture the first h-tag + else if (htags.length > 1) { + this.warn(`Heading currently only supports 1 tag; extra tags will be ignored.`); + return htags[0]; + } else return htags[0]; + } else { + const htag = document.createElement("h3"); + + if (this.firstChild && this.firstChild.nodeType === "#text") { + // If a text node was provided but no semantics, default to an h3 + htag.textContent = this.firstChild.textContent; + } else { + this.warn(`Header should contain at least 1 heading tag for correct semantics.`); + + // If incorrect semantics were used, create an H3 and try to capture the content + htag.textContent = this.textContent; + } + + return htag; + } + } + + _clickHandler(event) { + this.emitEvent(PfeAccordionHeader.events.change, { + detail: { + expanded: !this.expanded, + toggle: event.target, + }, + }); + } + + _expandedChanged() { + if (this.button) { + this.button.setAttribute("aria-expanded", this.expanded ? "true" : "false"); + } + } + + /** + * Provides a standard way of fetching light DOM that may or may not be provided inside + * of a slot; optional filtering of results and way to pass in an observer if you need to + * track updates to the slot + * @param {NodeItem} el + * @param {function} filter [optional] Filter for the returned results of the NodeList + * @param {function} observer [optional] Pointer to the observer defined for that slot + */ + fetchElement(els, filter, observer) { + if (!els) return []; + let nodes = [...els]; + + // Parse the nodes for slotted content + [...nodes] + .filter((node) => node && node.tagName === "SLOT") + .forEach((node) => { + // Remove node from the list + const idx = nodes.findIndex((item) => item === node); + // Capture it's assigned nodes for validation + let slotted = node.assignedNodes(); + // If slotted elements were found, add it to the nodeList + if (slotted && slotted.length > 0) { + // Remove the slot from the set, add the slotted content + nodes.splice(idx, 1, ...slotted); + } else { + // If no content exists in the slot, check for default content in the slot template + const defaults = node.children; + if (defaults && defaults.length > 0) nodes[idx] = defaults[0]; + } + + // Attach the observer if provided to watch for updates to the slot + // Useful if you are moving content from light DOM to shadow DOM + if (typeof observer === "function") { + observer.observer(node, PfeAccordionHeader.observer); + } + }); + + if (typeof filter === "function") return nodes.filter(filter); + else return nodes; + } +} + +/*! + * PatternFly Elements: PfeAccordion 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * +*/ + +class PfeAccordionPanel extends PFElement { + + // Injected at build-time + static get version() { + return "1.12.3"; + } + + // Injected at build-time + get html() { + return ` + +
      +
      + +
      +
      `; + } + + static get tag() { + return "pfe-accordion-panel"; + } + + get styleUrl() { + return "pfe-accordion-panel.scss"; + } + + get templateUrl() { + return "pfe-accordion-panel.html"; + } + + static get properties() { + return { + _id: { + type: String, + default: (el) => `${el.randomId.replace("pfe", el.tag)}`, + prefix: false, + }, + role: { + type: String, + default: "region", + prefix: false, + }, + // @TODO Deprecated pfe-id in 1.0 + oldPfeId: { + type: String, + alias: "_id", + attr: "pfe-id", + }, + expanded: { + title: "Expanded", + type: Boolean, + default: false, + observer: "_expandedChanged" + }, + ariaLabelledby: { + type: String, + prefix: false, + }, + }; + } + + constructor() { + super(PfeAccordionPanel); + } + + connectedCallback() { + super.connectedCallback(); + this._expandedChanged(); + } + + _expandedChanged() { + if (this.expanded) { + this.removeAttribute("aria-hidden"); + this.removeAttribute("tabindex"); + } else { + this.setAttribute("aria-hidden", "true"); + this.setAttribute("tabindex", "-1"); + } + } +} + +/*! + * PatternFly Elements: PfeAccordion 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * +*/ + +class PfeAccordion extends PFElement { + + // Injected at build-time + static get version() { + return "1.12.3"; + } + + // Injected at build-time + get html() { + return ` + +`; + } + + static get tag() { + return "pfe-accordion"; + } + + static get meta() { + return { + title: "Accordion", + description: "This element renders content sets in an expandable format.", + }; + } + + get styleUrl() { + return "pfe-accordion.scss"; + } + + get templateUrl() { + return "pfe-accordion.html"; + } + + static get properties() { + return { + disclosure: { + // Leaving this as a string since it's an opt out + title: "Disclosure", + type: String, + values: ["true", "false"], + cascade: ["pfe-accordion-header", "pfe-accordion-panel"], + }, + // @TODO: Deprecated pfe-disclosure in 1.0 + oldDisclosure: { + type: String, + alias: "disclosure", + attr: "pfe-disclosure", + }, + // Do not set a default of 0, it causes a the URL history to + // be updated on load for every tab; infinite looping goodness + // Seriously, don't set a default here unless you do a rewrite + expandedIndex: { + title: "Expanded index(es)", + type: String, + observer: "_expandedIndexHandler", + }, + history: { + title: "History", + type: Boolean, + default: false, + observer: "_historyHandler", + }, + }; + } + + static get slots() { + return { + default: { + type: "array", + namedSlot: false, + items: { + oneOf: [ + { + $ref: "pfe-accordion-header", + }, + { + $ref: "pfe-accordion-panel", + }, + ], + }, + }, + }; + } + + static get events() { + return { + change: `${this.tag}:change`, + expand: `${this.tag}:expand`, + collapse: `${this.tag}:collapse`, + }; + } + + // Declare the type of this component + static get PfeType() { + return PFElement.PfeTypes.Container; + } + + // Each set contains a header and a panel + static get contentTemplate() { + return ` + + + `; + } + + constructor() { + super(PfeAccordion, { type: PfeAccordion.PfeType }); + + this._manualDisclosure = null; + this._updateHistory = true; + this.expandedSets = []; + + this._init = this._init.bind(this); + this._observer = new MutationObserver(this._init); + this._updateStateFromURL = this._updateStateFromURL.bind(this); + this._getIndexesFromURL = this._getIndexesFromURL.bind(this); + this._updateURLHistory = this._updateURLHistory.bind(this); + } + + connectedCallback() { + super.connectedCallback(); + + if (this.hasLightDOM()) { + this._manualDisclosure = this.getAttribute("disclosure") || this.getAttribute("pfe-disclosure"); + + Promise.all([ + customElements.whenDefined(PfeAccordionHeader.tag), + customElements.whenDefined(PfeAccordionPanel.tag), + ]).then(this._init); + } + + this.addEventListener(PfeAccordion.events.change, this._changeHandler); + this.addEventListener("keydown", this._keydownHandler); + + // Set up the observer on the child tree + this._observer.observe(this, { + childList: true, + }); + } + + disconnectedCallback() { + super.disconnectedCallback(); + + this.removeEventListener(PfeAccordion.events.change, this._changeHandler); + this.removeEventListener("keydown", this._keydownHandler); + this._observer.disconnect(); + + window.removeEventListener("popstate", this._updateStateFromURL); + } + + /** + * Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse. + * @param {Number} index + */ + toggle(index) { + const headers = this._allHeaders(); + const header = headers[index]; + + if (!header.expanded) this.expand(index); + else this.collapse(index); + } + + /** + * Accepts a 0-based index value (integer) for the set of accordion items to expand. + * @param {Number} index + */ + expand(_index) { + if (_index === undefined || _index === null) return; + + // Ensure the input is a number + const index = parseInt(_index, 10); + + // Get all the headers and capture the item by index value + const headers = this._allHeaders(); + const header = headers[index]; + if (!header) return; + + const panel = this._panelForHeader(header); + if (!header || !panel) return; + + // If the header and panel exist, open both + this._expandHeader(header); + this._expandPanel(panel); + + header.focus(); + + this.emitEvent(PfeAccordion.events.expand, { + detail: { + toggle: header, + panel: panel, + }, + }); + } + + /** + * Expands all accordion items. + */ + expandAll() { + const headers = this._allHeaders(); + const panels = this._allPanels(); + + headers.forEach((header) => this._expandHeader(header)); + panels.forEach((panel) => this._expandPanel(panel)); + } + + /** + * Accepts a 0-based index value (integer) for the set of accordion items to collapse. + * @param {Number} index + */ + collapse(index) { + const headers = this._allHeaders(); + const panels = this._allPanels(); + const header = headers[index]; + const panel = panels[index]; + + if (!header || !panel) return; + + this._collapseHeader(header); + this._collapsePanel(panel); + + this.emitEvent(PfeAccordion.events.collapse, { + detail: { + toggle: header, + panel: panel, + }, + }); + } + + /** + * Collapses all accordion items. + */ + collapseAll() { + const headers = this._allHeaders(); + const panels = this._allPanels(); + + headers.forEach((header) => this._collapseHeader(header)); + panels.forEach((panel) => this._collapsePanel(panel)); + } + + /** + * Initialize the accordion by connecting headers and panels + * with aria controls and labels; set up the default disclosure + * state if not set by the author; and check the URL for default + * open + */ + _init() { + const headers = this._allHeaders(); + // For each header in the accordion, attach the aria connections + headers.forEach((header) => { + const panel = this._panelForHeader(header); + // Escape if no matching panel can be found + if (!panel) return; + + header.ariaControls = panel._id; + panel.ariaLabelledby = header._id; + }); + + // If disclosure was not set by the author, set up the defaults + if (!this._manualDisclosure) { + if (headers.length === 1) { + this.disclosure = "true"; + } else if (headers.length > 1) { + this.disclosure = "false"; + } + } + + // Update state if params exist in the URL + if (!this.isIE11) this._updateStateFromURL(); + } + + _changeHandler(evt) { + if (this.classList.contains("animating")) return; + + const index = this._getIndex(evt.target); + + if (evt.detail.expanded) this.expand(index); + else this.collapse(index); + + this._updateURLHistory(); + } + + _historyHandler() { + if (!this.history) window.removeEventListener("popstate", this._updateStateFromURL); + else window.addEventListener("popstate", this._updateStateFromURL); + } + + _expandHeader(header) { + const index = this._getIndex(header); + + // If this index is not already listed in the expandedSets array, add it + if (this.expandedSets.indexOf(index) < 0 && index > -1) this.expandedSets.push(index); + + header.expanded = true; + } + + _expandPanel(panel) { + if (!panel) { + this.error(`Trying to expand a panel that doesn't exist.`); + return; + } + + if (panel.expanded) return; + + panel.expanded = true; + + const height = panel.getBoundingClientRect().height; + this._animate(panel, 0, height); + } + + _collapseHeader(header) { + const index = this._getIndex(header); + + // If this index is exists in the expanded array, remove it + let idx = this.expandedSets.indexOf(index); + if (idx >= 0) this.expandedSets.splice(idx, 1); + + header.expanded = false; + } + + _collapsePanel(panel) { + if (!panel) { + this.error(`Trying to collapse a panel that doesn't exist`); + return; + } + + if (!panel.expanded) return; + + const height = panel.getBoundingClientRect().height; + panel.expanded = false; + + this._animate(panel, height, 0); + } + + _animate(panel, start, end) { + if (panel) { + const header = panel.previousElementSibling; + if (header) { + header.classList.add("animating"); + } + panel.classList.add("animating"); + panel.style.height = `${start}px`; + + requestAnimationFrame(() => { + requestAnimationFrame(() => { + panel.style.height = `${end}px`; + panel.addEventListener("transitionend", this._transitionEndHandler); + }); + }); + } + } + + _keydownHandler(evt) { + const currentHeader = evt.target; + + if (!(currentHeader instanceof customElements.get(PfeAccordionHeader.tag))) { + return; + } + + let newHeader; + + switch (evt.key) { + case "ArrowDown": + case "Down": + case "ArrowRight": + case "Right": + newHeader = this._nextHeader(); + break; + case "ArrowUp": + case "Up": + case "ArrowLeft": + case "Left": + newHeader = this._previousHeader(); + break; + case "Home": + newHeader = this._firstHeader(); + break; + case "End": + newHeader = this._lastHeader(); + break; + default: + return; + } + + if (newHeader) { + newHeader.shadowRoot.querySelector("button").focus(); + } + } + + _transitionEndHandler(evt) { + const header = evt.target.previousElementSibling; + if (header) header.classList.remove("animating"); + + evt.target.style.height = ""; + evt.target.classList.remove("animating"); + evt.target.removeEventListener("transitionend", this._transitionEndHandler); + } + + _allHeaders() { + if (!this.isIE11) return [...this.querySelectorAll(`:scope > pfe-accordion-header`)]; + else return this.children.filter((el) => el.tagName.toLowerCase() === "pfe-accordion-header"); + } + + _allPanels() { + if (!this.isIE11) return [...this.querySelectorAll(`:scope > pfe-accordion-panel`)]; + else return this.children.filter((el) => el.tagName.toLowerCase() === "pfe-accordion-panel"); + } + + _panelForHeader(header) { + const next = header.nextElementSibling; + + if (!next) return; + + if (next.tagName.toLowerCase() !== PfeAccordionPanel.tag) { + this.error(`Sibling element to a header needs to be a panel`); + return; + } + + return next; + } + + _previousHeader() { + const headers = this._allHeaders(); + let newIndex = headers.findIndex((header) => header === document.activeElement) - 1; + return headers[(newIndex + headers.length) % headers.length]; + } + + _nextHeader() { + const headers = this._allHeaders(); + let newIndex = headers.findIndex((header) => header === document.activeElement) + 1; + return headers[newIndex % headers.length]; + } + + _firstHeader() { + const headers = this._allHeaders(); + return headers[0]; + } + + _lastHeader() { + const headers = this._allHeaders(); + return headers[headers.length - 1]; + } + + _isHeader(element) { + return element.tagName.toLowerCase() === PfeAccordionHeader.tag; + } + + _isPanel(element) { + return element.tagName.toLowerCase() === PfeAccordionPanel.tag; + } + + _expandedIndexHandler(oldVal, newVal) { + if (oldVal === newVal) return; + const indexes = newVal.split(",").map((idx) => parseInt(idx, 10) - 1); + indexes.reverse().forEach((index) => this.expand(index)); + } + + _getIndex(_el) { + if (this._isHeader(_el)) { + const headers = this._allHeaders(); + return headers.findIndex((header) => header.id === _el.id); + } + + if (this._isPanel(_el)) { + const panels = this._allPanels(); + return panels.findIndex((panel) => panel.id === _el.id); + } + + this.warn(`The _getIndex method expects to receive a header or panel element.`); + return -1; + } + + _getIndexesFromURL() { + // @IE11 doesn't support URLSearchParams + // https://caniuse.com/#search=urlsearchparams + if (!window.URLSearchParams) return []; + + // Capture the URL parameters + const urlParams = new URLSearchParams(window.location.search); + + // If parameters exist and they contain the ID for this accordion + if (urlParams && urlParams.has(this.id)) { + const params = urlParams.get(this.id); + // Split the parameters by underscore to see if more than 1 item is expanded + const indexes = params.split("-"); + if (indexes.length < 0) return []; + + // Clean up the results by converting to array count + return indexes.map((item) => parseInt(item.trim(), 10) - 1); + } + } + + /** + * This handles updating the URL parameters based on the current state + * of the global this.expanded array + * @requires this.expandedSets {Array} + */ + _updateURLHistory() { + // @IE11 doesn't support URLSearchParams + // https://caniuse.com/#search=urlsearchparams + if (!this.history || !this._updateHistory || !window.URLSearchParams) return; + + if (!this.id) { + this.error(`The history feature cannot update the URL without an ID added to the pfe-accordion tag.`); + return; + } + + // Capture the URL and rebuild it using the new state + const urlParams = new URLSearchParams(window.location.search); + // Iterate the expanded array by 1 to convert to human-readable vs. array notation; + // sort values numerically and connect them using a dash + const openIndexes = this.expandedSets + .map((item) => item + 1) + .sort((a, b) => a - b) + .join("-"); + + // If values exist in the array, add them to the parameter string + if (this.expandedSets.length > 0) urlParams.set(this.id, openIndexes); + // Otherwise delete the set entirely + else urlParams.delete(this.id); + + // Note: Using replace state protects the user's back navigation + history.replaceState( + {}, + "", + `${window.location.pathname}${urlParams ? `?${urlParams.toString()}` : ""}${window.location.hash}` + ); + } + + /** + * This captures the URL parameters and expands each item in the array + * @requires this._getIndexesFromURL {Method} + */ + _updateStateFromURL() { + const indexesFromURL = this._getIndexesFromURL() || []; + + this._updateHistory = false; + indexesFromURL.forEach((idx) => this.expand(idx)); + this._updateHistory = true; + } +} + +PFElement.create(PfeAccordionHeader); +PFElement.create(PfeAccordionPanel); +PFElement.create(PfeAccordion); + +export default PfeAccordion; +//# sourceMappingURL=pfe-accordion.js.map diff --git a/elements/pfe-accordion/dist/pfe-accordion.js.map b/elements/pfe-accordion/dist/pfe-accordion.js.map new file mode 100644 index 0000000000..194c65dd12 --- /dev/null +++ b/elements/pfe-accordion/dist/pfe-accordion.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-accordion.js","sources":["../_temp/polyfills--pfe-accordion.js","../_temp/pfe-accordion-header.js","../_temp/pfe-accordion-panel.js","../_temp/pfe-accordion.js"],"sourcesContent":["// @POLYFILL Array.prototype.findIndex\n// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex\nif (!Array.prototype.findIndex) {\n Object.defineProperty(Array.prototype, \"findIndex\", {\n value: function (predicate) {\n // 1. Let O be ? ToObject(this value).\n if (this == null) {\n throw new TypeError('\"this\" is null or not defined');\n }\n\n var o = Object(this);\n\n // 2. Let len be ? ToLength(? Get(O, \"length\")).\n var len = o.length >>> 0;\n\n // 3. If IsCallable(predicate) is false, throw a TypeError exception.\n if (typeof predicate !== \"function\") {\n throw new TypeError(\"predicate must be a function\");\n }\n\n // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.\n var thisArg = arguments[1];\n\n // 5. Let k be 0.\n var k = 0;\n\n // 6. Repeat, while k < len\n while (k < len) {\n // a. Let Pk be ! ToString(k).\n // b. Let kValue be ? Get(O, Pk).\n // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).\n // d. If testResult is true, return k.\n var kValue = o[k];\n if (predicate.call(thisArg, kValue, k, o)) {\n return k;\n }\n // e. Increase k by 1.\n k++;\n }\n\n // 7. Return -1.\n return -1;\n },\n });\n}\n","/*!\n * PatternFly Elements: PfeAccordion 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement.js\";\nimport PfeIcon from \"../../pfe-icon/dist/pfe-icon.js\";\n\nclass PfeAccordionHeader extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n<${this.headingTag || \"h3\"} id=\"heading\">\n \n`;\n }\n\n static get tag() {\n return \"pfe-accordion-header\";\n }\n\n get styleUrl() {\n return \"pfe-accordion-header.scss\";\n }\n\n get templateUrl() {\n return \"pfe-accordion-header.html\";\n }\n\n // @TODO this is for navigation 1.0 updates\n // get isDirectLink() {\n // return this.hasAttribute(\"is-direct-link\");\n // }\n\n // get link() {\n // return this.querySelector(\"a[href]\");\n // }\n\n static get observer() {\n return {\n childList: true,\n };\n }\n\n static get properties() {\n return {\n _id: {\n type: String,\n default: (el) => `${el.randomId.replace(\"pfe\", el.tag)}`,\n prefix: false,\n },\n ariaControls: {\n type: String,\n prefix: false,\n },\n // @TODO Deprecated pfe-id in 1.0\n oldPfeId: {\n type: String,\n alias: \"_id\",\n attr: \"pfe-id\",\n },\n expanded: {\n title: \"Expanded\",\n type: Boolean,\n observer: \"_expandedChanged\",\n },\n };\n }\n\n static get events() {\n return {\n change: `pfe-accordion:change`,\n };\n }\n\n constructor() {\n super(PfeAccordionHeader);\n\n this._init = this._init.bind(this);\n this._clickHandler = this._clickHandler.bind(this);\n this._observer = new MutationObserver(this._init);\n this._slotObserver = new MutationObserver(this._init);\n\n this._getHeaderElement = this._getHeaderElement.bind(this);\n\n this.headingTag = \"h3\";\n\n this.addEventListener(\"click\", this._clickHandler);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n // Capture the button and the text\n this.button = this.shadowRoot.querySelector(`.pf-c-accordion__toggle`);\n this._buttonText = this.button.querySelector(`.pf-c-accordion__toggle-text`);\n\n if (this.hasLightDOM()) this._init();\n else {\n this._observer.observe(this, PfeAccordionHeader.observer);\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener(\"click\", this._clickHandler);\n this._observer.disconnect();\n }\n\n _init() {\n this._observer.disconnect();\n\n const header = this._getHeaderElement();\n\n if (header) {\n this.headingTag = header.tagName ? header.tagName.toLowerCase() : \"h3\";\n this.headingText = header.textContent ? header.textContent.trim() : \"\";\n }\n\n // Update button text\n this._buttonText.innerHTML = this.headingText;\n\n // Remove the hidden attribute after upgrade\n this.removeAttribute(\"hidden\");\n\n this._observer.observe(this, PfeAccordionHeader.observer);\n\n // @TODO this is for navigation 1.0 updates\n // Validate that headers with the `is-direct-link` attribute contain a link\n // if (this.isDirectLink && !this.link) {\n // this.warn(`This component expects to find a link in the light DOM due to the \"is-direct-link\" attribute`);\n // }\n }\n\n _getHeaderElement() {\n // Check if there is no nested element or nested textNodes\n if (!this.firstElementChild && !this.firstChild) {\n this.warn(`No header content provided`);\n return;\n }\n\n if (this.firstElementChild && this.firstElementChild.tagName) {\n const htags = this.fetchElement(\n this.children,\n (el) => el.tagName && (el.tagName.match(/^H[1-6]/) || el.tagName === \"P\"),\n this._slotObserver\n );\n\n // If there is no content inside the slot, return empty with a warning\n if (htags.length === 0) {\n this.warn(`No heading information was provided.`);\n return;\n }\n // If there is more than 1 element in the slot, capture the first h-tag\n else if (htags.length > 1) {\n this.warn(`Heading currently only supports 1 tag; extra tags will be ignored.`);\n return htags[0];\n } else return htags[0];\n } else {\n const htag = document.createElement(\"h3\");\n\n if (this.firstChild && this.firstChild.nodeType === \"#text\") {\n // If a text node was provided but no semantics, default to an h3\n htag.textContent = this.firstChild.textContent;\n } else {\n this.warn(`Header should contain at least 1 heading tag for correct semantics.`);\n\n // If incorrect semantics were used, create an H3 and try to capture the content\n htag.textContent = this.textContent;\n }\n\n return htag;\n }\n }\n\n _clickHandler(event) {\n this.emitEvent(PfeAccordionHeader.events.change, {\n detail: {\n expanded: !this.expanded,\n toggle: event.target,\n },\n });\n }\n\n _expandedChanged() {\n if (this.button) {\n this.button.setAttribute(\"aria-expanded\", this.expanded ? \"true\" : \"false\");\n }\n }\n\n /**\n * Provides a standard way of fetching light DOM that may or may not be provided inside\n * of a slot; optional filtering of results and way to pass in an observer if you need to\n * track updates to the slot\n * @param {NodeItem} el\n * @param {function} filter [optional] Filter for the returned results of the NodeList\n * @param {function} observer [optional] Pointer to the observer defined for that slot\n */\n fetchElement(els, filter, observer) {\n if (!els) return [];\n let nodes = [...els];\n\n // Parse the nodes for slotted content\n [...nodes]\n .filter((node) => node && node.tagName === \"SLOT\")\n .forEach((node) => {\n // Remove node from the list\n const idx = nodes.findIndex((item) => item === node);\n // Capture it's assigned nodes for validation\n let slotted = node.assignedNodes();\n // If slotted elements were found, add it to the nodeList\n if (slotted && slotted.length > 0) {\n // Remove the slot from the set, add the slotted content\n nodes.splice(idx, 1, ...slotted);\n } else {\n // If no content exists in the slot, check for default content in the slot template\n const defaults = node.children;\n if (defaults && defaults.length > 0) nodes[idx] = defaults[0];\n }\n\n // Attach the observer if provided to watch for updates to the slot\n // Useful if you are moving content from light DOM to shadow DOM\n if (typeof observer === \"function\") {\n observer.observer(node, PfeAccordionHeader.observer);\n }\n });\n\n if (typeof filter === \"function\") return nodes.filter(filter);\n else return nodes;\n }\n}\n\nexport default PfeAccordionHeader;\n","/*!\n * PatternFly Elements: PfeAccordion 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement.js\";\n\nclass PfeAccordionPanel extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n
      \n
      \n \n
      \n
      `;\n }\n\n static get tag() {\n return \"pfe-accordion-panel\";\n }\n\n get styleUrl() {\n return \"pfe-accordion-panel.scss\";\n }\n\n get templateUrl() {\n return \"pfe-accordion-panel.html\";\n }\n\n static get properties() {\n return {\n _id: {\n type: String,\n default: (el) => `${el.randomId.replace(\"pfe\", el.tag)}`,\n prefix: false,\n },\n role: {\n type: String,\n default: \"region\",\n prefix: false,\n },\n // @TODO Deprecated pfe-id in 1.0\n oldPfeId: {\n type: String,\n alias: \"_id\",\n attr: \"pfe-id\",\n },\n expanded: {\n title: \"Expanded\",\n type: Boolean,\n default: false,\n observer: \"_expandedChanged\"\n },\n ariaLabelledby: {\n type: String,\n prefix: false,\n },\n };\n }\n\n constructor() {\n super(PfeAccordionPanel);\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._expandedChanged();\n }\n\n _expandedChanged() {\n if (this.expanded) {\n this.removeAttribute(\"aria-hidden\");\n this.removeAttribute(\"tabindex\");\n } else {\n this.setAttribute(\"aria-hidden\", \"true\");\n this.setAttribute(\"tabindex\", \"-1\");\n }\n }\n}\n\nexport default PfeAccordionPanel;\n","/*!\n * PatternFly Elements: PfeAccordion 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\n// Import polyfills: findIndex\nimport \"./polyfills--pfe-accordion.js\";\n\nimport PFElement from \"../../pfelement/dist/pfelement.js\";\nimport PfeAccordionHeader from \"./pfe-accordion-header.js\";\nimport PfeAccordionPanel from \"./pfe-accordion-panel.js\";\n\nclass PfeAccordion extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n`;\n }\n\n static get tag() {\n return \"pfe-accordion\";\n }\n\n static get meta() {\n return {\n title: \"Accordion\",\n description: \"This element renders content sets in an expandable format.\",\n };\n }\n\n get styleUrl() {\n return \"pfe-accordion.scss\";\n }\n\n get templateUrl() {\n return \"pfe-accordion.html\";\n }\n\n static get properties() {\n return {\n disclosure: {\n // Leaving this as a string since it's an opt out\n title: \"Disclosure\",\n type: String,\n values: [\"true\", \"false\"],\n cascade: [\"pfe-accordion-header\", \"pfe-accordion-panel\"],\n },\n // @TODO: Deprecated pfe-disclosure in 1.0\n oldDisclosure: {\n type: String,\n alias: \"disclosure\",\n attr: \"pfe-disclosure\",\n },\n // Do not set a default of 0, it causes a the URL history to\n // be updated on load for every tab; infinite looping goodness\n // Seriously, don't set a default here unless you do a rewrite\n expandedIndex: {\n title: \"Expanded index(es)\",\n type: String,\n observer: \"_expandedIndexHandler\",\n },\n history: {\n title: \"History\",\n type: Boolean,\n default: false,\n observer: \"_historyHandler\",\n },\n };\n }\n\n static get slots() {\n return {\n default: {\n type: \"array\",\n namedSlot: false,\n items: {\n oneOf: [\n {\n $ref: \"pfe-accordion-header\",\n },\n {\n $ref: \"pfe-accordion-panel\",\n },\n ],\n },\n },\n };\n }\n\n static get events() {\n return {\n change: `${this.tag}:change`,\n expand: `${this.tag}:expand`,\n collapse: `${this.tag}:collapse`,\n };\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Container;\n }\n\n // Each set contains a header and a panel\n static get contentTemplate() {\n return `\n \n \n `;\n }\n\n constructor() {\n super(PfeAccordion, { type: PfeAccordion.PfeType });\n\n this._manualDisclosure = null;\n this._updateHistory = true;\n this.expandedSets = [];\n\n this._init = this._init.bind(this);\n this._observer = new MutationObserver(this._init);\n this._updateStateFromURL = this._updateStateFromURL.bind(this);\n this._getIndexesFromURL = this._getIndexesFromURL.bind(this);\n this._updateURLHistory = this._updateURLHistory.bind(this);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (this.hasLightDOM()) {\n this._manualDisclosure = this.getAttribute(\"disclosure\") || this.getAttribute(\"pfe-disclosure\");\n\n Promise.all([\n customElements.whenDefined(PfeAccordionHeader.tag),\n customElements.whenDefined(PfeAccordionPanel.tag),\n ]).then(this._init);\n }\n\n this.addEventListener(PfeAccordion.events.change, this._changeHandler);\n this.addEventListener(\"keydown\", this._keydownHandler);\n\n // Set up the observer on the child tree\n this._observer.observe(this, {\n childList: true,\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener(PfeAccordion.events.change, this._changeHandler);\n this.removeEventListener(\"keydown\", this._keydownHandler);\n this._observer.disconnect();\n\n window.removeEventListener(\"popstate\", this._updateStateFromURL);\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse.\n * @param {Number} index\n */\n toggle(index) {\n const headers = this._allHeaders();\n const header = headers[index];\n\n if (!header.expanded) this.expand(index);\n else this.collapse(index);\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to expand.\n * @param {Number} index\n */\n expand(_index) {\n if (_index === undefined || _index === null) return;\n\n // Ensure the input is a number\n const index = parseInt(_index, 10);\n\n // Get all the headers and capture the item by index value\n const headers = this._allHeaders();\n const header = headers[index];\n if (!header) return;\n\n const panel = this._panelForHeader(header);\n if (!header || !panel) return;\n\n // If the header and panel exist, open both\n this._expandHeader(header);\n this._expandPanel(panel);\n\n header.focus();\n\n this.emitEvent(PfeAccordion.events.expand, {\n detail: {\n toggle: header,\n panel: panel,\n },\n });\n }\n\n /**\n * Expands all accordion items.\n */\n expandAll() {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n\n headers.forEach((header) => this._expandHeader(header));\n panels.forEach((panel) => this._expandPanel(panel));\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to collapse.\n * @param {Number} index\n */\n collapse(index) {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n const header = headers[index];\n const panel = panels[index];\n\n if (!header || !panel) return;\n\n this._collapseHeader(header);\n this._collapsePanel(panel);\n\n this.emitEvent(PfeAccordion.events.collapse, {\n detail: {\n toggle: header,\n panel: panel,\n },\n });\n }\n\n /**\n * Collapses all accordion items.\n */\n collapseAll() {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n\n headers.forEach((header) => this._collapseHeader(header));\n panels.forEach((panel) => this._collapsePanel(panel));\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 _init() {\n const headers = this._allHeaders();\n // For each header in the accordion, attach the aria connections\n headers.forEach((header) => {\n const panel = this._panelForHeader(header);\n // Escape if no matching panel can be found\n if (!panel) return;\n\n header.ariaControls = panel._id;\n panel.ariaLabelledby = header._id;\n });\n\n // If disclosure was not set by the author, set up the defaults\n if (!this._manualDisclosure) {\n if (headers.length === 1) {\n this.disclosure = \"true\";\n } else if (headers.length > 1) {\n this.disclosure = \"false\";\n }\n }\n\n // Update state if params exist in the URL\n if (!this.isIE11) this._updateStateFromURL();\n }\n\n _changeHandler(evt) {\n if (this.classList.contains(\"animating\")) return;\n\n const index = this._getIndex(evt.target);\n\n if (evt.detail.expanded) this.expand(index);\n else this.collapse(index);\n\n this._updateURLHistory();\n }\n\n _historyHandler() {\n if (!this.history) window.removeEventListener(\"popstate\", this._updateStateFromURL);\n else window.addEventListener(\"popstate\", this._updateStateFromURL);\n }\n\n _expandHeader(header) {\n const index = this._getIndex(header);\n\n // If this index is not already listed in the expandedSets array, add it\n if (this.expandedSets.indexOf(index) < 0 && index > -1) this.expandedSets.push(index);\n\n header.expanded = true;\n }\n\n _expandPanel(panel) {\n if (!panel) {\n this.error(`Trying to expand a panel that doesn't exist.`);\n return;\n }\n\n if (panel.expanded) return;\n\n panel.expanded = true;\n\n const height = panel.getBoundingClientRect().height;\n this._animate(panel, 0, height);\n }\n\n _collapseHeader(header) {\n const index = this._getIndex(header);\n\n // If this index is exists in the expanded array, remove it\n let idx = this.expandedSets.indexOf(index);\n if (idx >= 0) this.expandedSets.splice(idx, 1);\n\n header.expanded = false;\n }\n\n _collapsePanel(panel) {\n if (!panel) {\n this.error(`Trying to collapse a panel that doesn't exist`);\n return;\n }\n\n if (!panel.expanded) return;\n\n const height = panel.getBoundingClientRect().height;\n panel.expanded = false;\n\n this._animate(panel, height, 0);\n }\n\n _animate(panel, start, end) {\n if (panel) {\n const header = panel.previousElementSibling;\n if (header) {\n header.classList.add(\"animating\");\n }\n panel.classList.add(\"animating\");\n panel.style.height = `${start}px`;\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n panel.style.height = `${end}px`;\n panel.addEventListener(\"transitionend\", this._transitionEndHandler);\n });\n });\n }\n }\n\n _keydownHandler(evt) {\n const currentHeader = evt.target;\n\n if (!(currentHeader instanceof customElements.get(PfeAccordionHeader.tag))) {\n return;\n }\n\n let newHeader;\n\n switch (evt.key) {\n case \"ArrowDown\":\n case \"Down\":\n case \"ArrowRight\":\n case \"Right\":\n newHeader = this._nextHeader();\n break;\n case \"ArrowUp\":\n case \"Up\":\n case \"ArrowLeft\":\n case \"Left\":\n newHeader = this._previousHeader();\n break;\n case \"Home\":\n newHeader = this._firstHeader();\n break;\n case \"End\":\n newHeader = this._lastHeader();\n break;\n default:\n return;\n }\n\n if (newHeader) {\n newHeader.shadowRoot.querySelector(\"button\").focus();\n }\n }\n\n _transitionEndHandler(evt) {\n const header = evt.target.previousElementSibling;\n if (header) header.classList.remove(\"animating\");\n\n evt.target.style.height = \"\";\n evt.target.classList.remove(\"animating\");\n evt.target.removeEventListener(\"transitionend\", this._transitionEndHandler);\n }\n\n _allHeaders() {\n if (!this.isIE11) return [...this.querySelectorAll(`:scope > pfe-accordion-header`)];\n else return this.children.filter((el) => el.tagName.toLowerCase() === \"pfe-accordion-header\");\n }\n\n _allPanels() {\n if (!this.isIE11) return [...this.querySelectorAll(`:scope > pfe-accordion-panel`)];\n else return this.children.filter((el) => el.tagName.toLowerCase() === \"pfe-accordion-panel\");\n }\n\n _panelForHeader(header) {\n const next = header.nextElementSibling;\n\n if (!next) return;\n\n if (next.tagName.toLowerCase() !== PfeAccordionPanel.tag) {\n this.error(`Sibling element to a header needs to be a panel`);\n return;\n }\n\n return next;\n }\n\n _previousHeader() {\n const headers = this._allHeaders();\n let newIndex = headers.findIndex((header) => header === document.activeElement) - 1;\n return headers[(newIndex + headers.length) % headers.length];\n }\n\n _nextHeader() {\n const headers = this._allHeaders();\n let newIndex = headers.findIndex((header) => header === document.activeElement) + 1;\n return headers[newIndex % headers.length];\n }\n\n _firstHeader() {\n const headers = this._allHeaders();\n return headers[0];\n }\n\n _lastHeader() {\n const headers = this._allHeaders();\n return headers[headers.length - 1];\n }\n\n _isHeader(element) {\n return element.tagName.toLowerCase() === PfeAccordionHeader.tag;\n }\n\n _isPanel(element) {\n return element.tagName.toLowerCase() === PfeAccordionPanel.tag;\n }\n\n _expandedIndexHandler(oldVal, newVal) {\n if (oldVal === newVal) return;\n const indexes = newVal.split(\",\").map((idx) => parseInt(idx, 10) - 1);\n indexes.reverse().forEach((index) => this.expand(index));\n }\n\n _getIndex(_el) {\n if (this._isHeader(_el)) {\n const headers = this._allHeaders();\n return headers.findIndex((header) => header.id === _el.id);\n }\n\n if (this._isPanel(_el)) {\n const panels = this._allPanels();\n return panels.findIndex((panel) => panel.id === _el.id);\n }\n\n this.warn(`The _getIndex method expects to receive a header or panel element.`);\n return -1;\n }\n\n _getIndexesFromURL() {\n // @IE11 doesn't support URLSearchParams\n // https://caniuse.com/#search=urlsearchparams\n if (!window.URLSearchParams) return [];\n\n // Capture the URL parameters\n const urlParams = new URLSearchParams(window.location.search);\n\n // If parameters exist and they contain the ID for this accordion\n if (urlParams && urlParams.has(this.id)) {\n const params = urlParams.get(this.id);\n // Split the parameters by underscore to see if more than 1 item is expanded\n const indexes = params.split(\"-\");\n if (indexes.length < 0) return [];\n\n // Clean up the results by converting to array count\n return indexes.map((item) => parseInt(item.trim(), 10) - 1);\n }\n }\n\n /**\n * This handles updating the URL parameters based on the current state\n * of the global this.expanded array\n * @requires this.expandedSets {Array}\n */\n _updateURLHistory() {\n // @IE11 doesn't support URLSearchParams\n // https://caniuse.com/#search=urlsearchparams\n if (!this.history || !this._updateHistory || !window.URLSearchParams) return;\n\n if (!this.id) {\n this.error(`The history feature cannot update the URL without an ID added to the pfe-accordion tag.`);\n return;\n }\n\n // Capture the URL and rebuild it using the new state\n const urlParams = new URLSearchParams(window.location.search);\n // Iterate the expanded array by 1 to convert to human-readable vs. array notation;\n // sort values numerically and connect them using a dash\n const openIndexes = this.expandedSets\n .map((item) => item + 1)\n .sort((a, b) => a - b)\n .join(\"-\");\n\n // If values exist in the array, add them to the parameter string\n if (this.expandedSets.length > 0) urlParams.set(this.id, openIndexes);\n // Otherwise delete the set entirely\n else urlParams.delete(this.id);\n\n // Note: Using replace state protects the user's back navigation\n history.replaceState(\n {},\n \"\",\n `${window.location.pathname}${urlParams ? `?${urlParams.toString()}` : \"\"}${window.location.hash}`\n );\n }\n\n /**\n * This captures the URL parameters and expands each item in the array\n * @requires this._getIndexesFromURL {Method}\n */\n _updateStateFromURL() {\n const indexesFromURL = this._getIndexesFromURL() || [];\n\n this._updateHistory = false;\n indexesFromURL.forEach((idx) => this.expand(idx));\n this._updateHistory = true;\n }\n}\n\nPFElement.create(PfeAccordionHeader);\nPFElement.create(PfeAccordionPanel);\nPFElement.create(PfeAccordion);\n\nexport { PfeAccordion as default };\n"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-accordion/dist/pfe-accordion.min.css.map b/elements/pfe-accordion/dist/pfe-accordion.min.css.map new file mode 100644 index 0000000000..51187f6c18 --- /dev/null +++ b/elements/pfe-accordion/dist/pfe-accordion.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../src/pfe-accordion.scss"],"names":[],"mappings":"AAEA,MACE,QAAA,MACA,SAAA,SACA,SAAA,OACA,OAAA,EAEA,MAAA,KAAA,MAAA,iCAGF,MAEE,SAAA,QAGF,gBACE,QAAA","file":"pfe-accordion.min.css","sourceRoot":"../src","sourcesContent":[]} \ No newline at end of file diff --git a/elements/pfe-accordion/dist/pfe-accordion.min.js b/elements/pfe-accordion/dist/pfe-accordion.min.js new file mode 100644 index 0000000000..d70648a8a8 --- /dev/null +++ b/elements/pfe-accordion/dist/pfe-accordion.min.js @@ -0,0 +1,74 @@ +import e from"../../pfelement/dist/pfelement.min.js";import"../../pfe-icon/dist/pfe-icon.min.js";Array.prototype.findIndex||Object.defineProperty(Array.prototype,"findIndex",{value:function(e){if(null==this)throw new TypeError('"this" is null or not defined');var t=Object(this),o=t.length>>>0;if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var a=arguments[1],r=0;r@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){.pf-c-accordion__toggle{background-color:#fff!important;color:#151515!important}}:host{position:relative;display:block;outline:0;background-color:transparent;background-color:var(--pfe-accordion--BackgroundColor,transparent);color:#3c3f42;color:var(--pfe-accordion--Color,var(--pfe-broadcasted--text,#3c3f42));-webkit-box-shadow:0 5px 4px transparent;box-shadow:0 5px 4px transparent;-webkit-box-shadow:var(--pfe-accordion--BoxShadow,0 5px 4px transparent);box-shadow:var(--pfe-accordion--BoxShadow,0 5px 4px transparent);--pfe-icon--color:var(--pfe-accordion--Color, var(--pfe-broadcasted--text, #3c3f42));--pfe-icon--size:14px}:host([hidden]){display:none}:host *,:host ::after,:host ::before{-webkit-box-sizing:border-box;box-sizing:border-box}#heading{margin:0}.pf-c-accordion__toggle{cursor:pointer;outline:0;position:relative;width:100%;margin:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;gap:calc(1rem * 1.5);gap:calc(var(--pfe-theme--container-padding,1rem) * 1.5);padding:1rem calc(1rem * 1.5);padding:var(--pfe-accordion--Padding,var(--pfe-theme--container-padding,1rem) calc(var(--pfe-theme--container-padding,1rem) * 1.5));background-color:transparent;color:#3c3f42;color:var(--pfe-accordion--Color,var(--pfe-broadcasted--text,#3c3f42));text-align:left;font-family:"Red Hat Display",RedHatDisplay,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family--heading, "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif);font-size:1.25rem;font-size:var(--pfe-accordion--FontSize--header,var(--pf-global--FontSize--xl,1.25rem));font-weight:400;font-weight:var(--pfe-accordion--FontWeight--header,var(--pfe-theme--font-weight--normal,400));text-align:left;text-align:var(--pfe-accordion--TextAlign,left);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5);--_typography-offset:calc((1em * var(--pfe-theme--line-height, 1.5) - 1em) / 2);border-style:solid;border-style:var(--pfe-theme--surface--border-style,solid);border-width:1px;border-width:var(--pfe-accordion--BorderWidth,var(--pfe-theme--surface--border-width,1px));border-color:#d2d2d2;border-color:var(--pfe-accordion--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2));border-right-color:transparent;border-left-color:transparent}.pf-c-accordion__toggle::before{position:absolute;content:"";top:-2px;left:-2px;width:calc(100% + 3px);width:calc(100% + var(--pfe-theme--ui--border-width--active,3px));height:calc(100% + 3px);height:calc(100% + var(--pfe-theme--ui--border-width--active,3px));border-radius:2px;border-radius:var(--pfe-theme--ui--border-radius,2px);border:2px solid transparent;border:var(--pfe-theme--ui--border-width--md,2px) var(--pfe-theme--ui--border-style,solid) transparent}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){.pf-c-accordion__toggle::before{height:100%}}.pf-c-accordion__toggle:focus::before{border-color:#6b9ff0}.pf-c-accordion__toggle:focus:not(:focus-visible)::before{border:unset}.pf-c-accordion__toggle .pf-c-accordion__toggle-icon{--_typography-offset:calc((1em * var(--pfe-theme--line-height, 1.5) - var(--pfe-icon--size, 14px)) / 2)}.pf-c-accordion__toggle .pf-c-accordion__toggle-text{margin-top:calc(-1 * 5px);margin-top:calc(-1 * var(--_typography-offset,5px));margin-bottom:calc(-1 * 5px);margin-bottom:calc(-1 * var(--_typography-offset,5px))}.pf-c-accordion__toggle .pf-c-accordion__toggle-icon{margin-top:calc(5px / 4);margin-top:calc(var(--_typography-offset,5px)/ 4)}:host(:not(:first-of-type)) .pf-c-accordion__toggle{border-top-width:0}.pf-c-accordion__toggle::after{position:absolute;content:"";top:-1px;left:-1px;bottom:-1px;background-color:transparent;background-color:var(--pfe-accordion--accent,transparent);width:calc(3px - -1px);width:calc(var(--pfe-accordion--accent--width,var(--pfe-theme--surface--border-width--active,3px)) - -1px);height:calc(100% - -1px - -1px);z-index:4;z-index:calc(3 + 1);z-index:calc(var(--pfe-accordion--ZIndex,3) + 1)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){.pf-c-accordion__toggle::after:active,.pf-c-accordion__toggle::after:hover,:host(.animating) .pf-c-accordion__toggle::after,:host(:not([expanded])) .pf-c-accordion__toggle::after:focus,:host([expanded]) .pf-c-accordion__toggle::after{background-color:#06c;background-color:var(--pfe-theme--color--ui-accent,#06c)}}.pf-c-accordion__toggle:active,.pf-c-accordion__toggle:hover,:host(:not([expanded])) .pf-c-accordion__toggle:focus{--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--active, var(--pfe-theme--color--surface--lighter, #f0f0f0));--pfe-accordion--Color:var(--pfe-accordion--Color--active, var(--pfe-broadcasted--text, #3c3f42))}:host(:not([expanded])) .pf-c-accordion__toggle:active,:host(:not([expanded])) .pf-c-accordion__toggle:focus,:host(:not([expanded])) .pf-c-accordion__toggle:hover{--pfe-accordion--accent:var(--pfe-accordion--accent--active, var(--pfe-theme--color--ui-accent, #06c))}:host([on=dark]) .pf-c-accordion__toggle:active,:host([on=dark]) .pf-c-accordion__toggle:hover,:host([on=dark]:not([expanded])) .pf-c-accordion__toggle:focus{--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--active, rgba(247, 247, 249, 0.1));--pfe-accordion--Color:var(--pfe-accordion--Color--active, var(--pfe-broadcasted--text, #3c3f42))}:host([on=dark]:not([expanded])) .pf-c-accordion__toggle:active,:host([on=dark]:not([expanded])) .pf-c-accordion__toggle:focus,:host([on=dark]:not([expanded])) .pf-c-accordion__toggle:hover{--pfe-accordion--accent:var(--pfe-accordion--accent--active, var(--pfe-theme--color--ui-accent--on-dark, #73bcf7))}:host([on=saturated]) .pf-c-accordion__toggle:active,:host([on=saturated]) .pf-c-accordion__toggle:hover,:host([on=saturated]:not([expanded])) .pf-c-accordion__toggle:focus{--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--active, rgba(0, 0, 0, 0.2));--pfe-accordion--Color:var(--pfe-accordion--Color--active, var(--pfe-broadcasted--text, #3c3f42))}:host([on=saturated]:not([expanded])) .pf-c-accordion__toggle:active,:host([on=saturated]:not([expanded])) .pf-c-accordion__toggle:focus,:host([on=saturated]:not([expanded])) .pf-c-accordion__toggle:hover{--pfe-accordion--accent:var(--pfe-accordion--accent--active, var(--pfe-theme--color--ui-accent--on-saturated, #fff))}:host(.animating) .pf-c-accordion__toggle,:host([expanded]) .pf-c-accordion__toggle{border-bottom-width:0}:host(.animating) .pf-c-accordion__toggle,:host([disclosure]:not([disclosure=false])) .pf-c-accordion__toggle,:host([expanded]) .pf-c-accordion__toggle{border-right-color:#d2d2d2;border-right-color:var(--pfe-accordion--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2));border-left-color:#d2d2d2;border-left-color:var(--pfe-accordion--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2))}:host([disclosure]:not([disclosure=false])) .pf-c-accordion__toggle{gap:calc(1rem / 2);gap:calc(var(--pfe-theme--container-padding,1rem)/ 2);font-family:"Red Hat Text",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);font-size:1rem;font-size:var(--pfe-accordion--FontSize--header,var(--pf-global--FontSize--md,1rem));font-weight:600;font-weight:var(--pfe-accordion--FontWeight--header,var(--pfe-theme--font-weight--semi-bold,600))}.pf-c-accordion__toggle-wrapper{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;gap:calc(1rem * 1.5);gap:calc(var(--pfe-theme--container-padding,1rem) * 1.5)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){.pf-c-accordion__toggle-wrapper::after{content:"";position:absolute;top:calc(1rem + 14px);top:calc(var(--pfe-theme--container-spacer,1rem) + 14px);display:block;border-style:solid;border-style:var(--pfe-theme--surface--border-style,solid);height:14px;width:14px;-webkit-transition:-webkit-transform .15s;transition:-webkit-transform .15s;transition:transform .15s;transition:transform .15s,-webkit-transform .15s;border-width:0 2px 2px 0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);right:calc(1rem * 1.3125);right:calc(var(--pfe-theme--container-spacer,1rem) * 1.3125);top:1em!important}:host(.animating) .pf-c-accordion__toggle-wrapper::after,:host([expanded]) .pf-c-accordion__toggle-wrapper::after{-webkit-transform:rotate(45deg);transform:rotate(45deg)}}.pf-c-accordion__toggle-text{max-width:80ch;max-width:var(--pfe-accordion--MaxWidth--content,80ch)}.pf-c-accordion__toggle-icon{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-duration:var(--pfe-theme--animation-speed,.3s);transition-duration:var(--pfe-theme--animation-speed,.3s);-webkit-transition-timing-function:cubic-bezier(.465,.183,.153,.946);transition-timing-function:cubic-bezier(.465,.183,.153,.946);-webkit-transition-timing-function:var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition-timing-function:var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946))}:host([expanded]) .pf-c-accordion__toggle-icon{-webkit-transform:rotate(90deg);transform:rotate(90deg)}:host([disclosure]:not([disclosure=false])) .pf-c-accordion__toggle-icon{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){.pf-c-accordion__toggle-icon{display:none!important}}.pf-c-accordion__toggle-accents{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}:host{-webkit-transition-property:border,-webkit-box-shadow;transition-property:border,-webkit-box-shadow;transition-property:box-shadow,border;transition-property:box-shadow,border,-webkit-box-shadow;-webkit-transition-timing-function:cubic-bezier(.465,.183,.153,.946);transition-timing-function:cubic-bezier(.465,.183,.153,.946);-webkit-transition-timing-function:var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition-timing-function:var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));-webkit-transition-duration:calc(pfe-var(animation-speed)/ 2);transition-duration:calc(pfe-var(animation-speed)/ 2)}:host(.animating),:host([expanded]){--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--expanded, var(--pfe-theme--color--surface--lightest, #fff));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text, #3c3f42));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent, #06c))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, 0 5px 4px rgba(140, 140, 140, 0.35))}:host([on=dark].animating),:host([on=dark][expanded]){--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--expanded, rgba(247, 247, 249, 0.1));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-dark, #fff));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-dark, #73bcf7))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, none)}:host([on=saturated].animating),:host([on=saturated][expanded]){--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--expanded, rgba(0, 0, 0, 0.2));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-saturated, #fff));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-saturated, #fff))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, none)} /*# sourceMappingURL=pfe-accordion-header.min.css.map */\n<${this.headingTag||"h3"} id="heading">\n \n`}static get tag(){return"pfe-accordion-header"}get styleUrl(){return"pfe-accordion-header.scss"}get templateUrl(){return"pfe-accordion-header.html"}static get observer(){return{childList:!0}}static get properties(){return{_id:{type:String,default:e=>""+e.randomId.replace("pfe",e.tag),prefix:!1},ariaControls:{type:String,prefix:!1},oldPfeId:{type:String,alias:"_id",attr:"pfe-id"},expanded:{title:"Expanded",type:Boolean,observer:"_expandedChanged"}}}static get events(){return{change:"pfe-accordion:change"}}constructor(){super(t),this._init=this._init.bind(this),this._clickHandler=this._clickHandler.bind(this),this._observer=new MutationObserver(this._init),this._slotObserver=new MutationObserver(this._init),this._getHeaderElement=this._getHeaderElement.bind(this),this.headingTag="h3",this.addEventListener("click",this._clickHandler)}connectedCallback(){super.connectedCallback(),this.button=this.shadowRoot.querySelector(".pf-c-accordion__toggle"),this._buttonText=this.button.querySelector(".pf-c-accordion__toggle-text"),this.hasLightDOM()?this._init():this._observer.observe(this,t.observer)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this._clickHandler),this._observer.disconnect()}_init(){this._observer.disconnect();const e=this._getHeaderElement();e&&(this.headingTag=e.tagName?e.tagName.toLowerCase():"h3",this.headingText=e.textContent?e.textContent.trim():""),this._buttonText.innerHTML=this.headingText,this.removeAttribute("hidden"),this._observer.observe(this,t.observer)}_getHeaderElement(){if(this.firstElementChild||this.firstChild){if(this.firstElementChild&&this.firstElementChild.tagName){const e=this.fetchElement(this.children,e=>e.tagName&&(e.tagName.match(/^H[1-6]/)||"P"===e.tagName),this._slotObserver);return 0===e.length?void this.warn("No heading information was provided."):e.length>1?(this.warn("Heading currently only supports 1 tag; extra tags will be ignored."),e[0]):e[0]}{const e=document.createElement("h3");return this.firstChild&&"#text"===this.firstChild.nodeType?e.textContent=this.firstChild.textContent:(this.warn("Header should contain at least 1 heading tag for correct semantics."),e.textContent=this.textContent),e}}this.warn("No header content provided")}_clickHandler(e){this.emitEvent(t.events.change,{detail:{expanded:!this.expanded,toggle:e.target}})}_expandedChanged(){this.button&&this.button.setAttribute("aria-expanded",this.expanded?"true":"false")}fetchElement(e,o,a){if(!e)return[];let r=[...e];return[...r].filter(e=>e&&"SLOT"===e.tagName).forEach(e=>{const o=r.findIndex(t=>t===e);let n=e.assignedNodes();if(n&&n.length>0)r.splice(o,1,...n);else{const t=e.children;t&&t.length>0&&(r[o]=t[0])}"function"==typeof a&&a.observer(e,t.observer)}),"function"==typeof o?r.filter(o):r}} +/*! + * PatternFly Elements: PfeAccordion 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * +*/class o extends e{static get version(){return"1.12.3"}get html(){return'\n\n
      \n
      \n \n
      \n
      '}static get tag(){return"pfe-accordion-panel"}get styleUrl(){return"pfe-accordion-panel.scss"}get templateUrl(){return"pfe-accordion-panel.html"}static get properties(){return{_id:{type:String,default:e=>""+e.randomId.replace("pfe",e.tag),prefix:!1},role:{type:String,default:"region",prefix:!1},oldPfeId:{type:String,alias:"_id",attr:"pfe-id"},expanded:{title:"Expanded",type:Boolean,default:!1,observer:"_expandedChanged"},ariaLabelledby:{type:String,prefix:!1}}}constructor(){super(o)}connectedCallback(){super.connectedCallback(),this._expandedChanged()}_expandedChanged(){this.expanded?(this.removeAttribute("aria-hidden"),this.removeAttribute("tabindex")):(this.setAttribute("aria-hidden","true"),this.setAttribute("tabindex","-1"))}} +/*! + * PatternFly Elements: PfeAccordion 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * +*/class a extends e{static get version(){return"1.12.3"}get html(){return"\n\n"}static get tag(){return"pfe-accordion"}static get meta(){return{title:"Accordion",description:"This element renders content sets in an expandable format."}}get styleUrl(){return"pfe-accordion.scss"}get templateUrl(){return"pfe-accordion.html"}static get properties(){return{disclosure:{title:"Disclosure",type:String,values:["true","false"],cascade:["pfe-accordion-header","pfe-accordion-panel"]},oldDisclosure:{type:String,alias:"disclosure",attr:"pfe-disclosure"},expandedIndex:{title:"Expanded index(es)",type:String,observer:"_expandedIndexHandler"},history:{title:"History",type:Boolean,default:!1,observer:"_historyHandler"}}}static get slots(){return{default:{type:"array",namedSlot:!1,items:{oneOf:[{$ref:"pfe-accordion-header"},{$ref:"pfe-accordion-panel"}]}}}}static get events(){return{change:this.tag+":change",expand:this.tag+":expand",collapse:this.tag+":collapse"}}static get PfeType(){return e.PfeTypes.Container}static get contentTemplate(){return'\n \n \n '}constructor(){super(a,{type:a.PfeType}),this._manualDisclosure=null,this._updateHistory=!0,this.expandedSets=[],this._init=this._init.bind(this),this._observer=new MutationObserver(this._init),this._updateStateFromURL=this._updateStateFromURL.bind(this),this._getIndexesFromURL=this._getIndexesFromURL.bind(this),this._updateURLHistory=this._updateURLHistory.bind(this)}connectedCallback(){super.connectedCallback(),this.hasLightDOM()&&(this._manualDisclosure=this.getAttribute("disclosure")||this.getAttribute("pfe-disclosure"),Promise.all([customElements.whenDefined(t.tag),customElements.whenDefined(o.tag)]).then(this._init)),this.addEventListener(a.events.change,this._changeHandler),this.addEventListener("keydown",this._keydownHandler),this._observer.observe(this,{childList:!0})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(a.events.change,this._changeHandler),this.removeEventListener("keydown",this._keydownHandler),this._observer.disconnect(),window.removeEventListener("popstate",this._updateStateFromURL)}toggle(e){this._allHeaders()[e].expanded?this.collapse(e):this.expand(e)}expand(e){if(null==e)return;const t=parseInt(e,10),o=this._allHeaders()[t];if(!o)return;const r=this._panelForHeader(o);o&&r&&(this._expandHeader(o),this._expandPanel(r),o.focus(),this.emitEvent(a.events.expand,{detail:{toggle:o,panel:r}}))}expandAll(){const e=this._allHeaders(),t=this._allPanels();e.forEach(e=>this._expandHeader(e)),t.forEach(e=>this._expandPanel(e))}collapse(e){const t=this._allHeaders(),o=this._allPanels(),r=t[e],n=o[e];r&&n&&(this._collapseHeader(r),this._collapsePanel(n),this.emitEvent(a.events.collapse,{detail:{toggle:r,panel:n}}))}collapseAll(){const e=this._allHeaders(),t=this._allPanels();e.forEach(e=>this._collapseHeader(e)),t.forEach(e=>this._collapsePanel(e))}_init(){const e=this._allHeaders();e.forEach(e=>{const t=this._panelForHeader(e);t&&(e.ariaControls=t._id,t.ariaLabelledby=e._id)}),this._manualDisclosure||(1===e.length?this.disclosure="true":e.length>1&&(this.disclosure="false")),this.isIE11||this._updateStateFromURL()}_changeHandler(e){if(this.classList.contains("animating"))return;const t=this._getIndex(e.target);e.detail.expanded?this.expand(t):this.collapse(t),this._updateURLHistory()}_historyHandler(){this.history?window.addEventListener("popstate",this._updateStateFromURL):window.removeEventListener("popstate",this._updateStateFromURL)}_expandHeader(e){const t=this._getIndex(e);this.expandedSets.indexOf(t)<0&&t>-1&&this.expandedSets.push(t),e.expanded=!0}_expandPanel(e){if(!e)return void this.error("Trying to expand a panel that doesn't exist.");if(e.expanded)return;e.expanded=!0;const t=e.getBoundingClientRect().height;this._animate(e,0,t)}_collapseHeader(e){const t=this._getIndex(e);let o=this.expandedSets.indexOf(t);o>=0&&this.expandedSets.splice(o,1),e.expanded=!1}_collapsePanel(e){if(!e)return void this.error("Trying to collapse a panel that doesn't exist");if(!e.expanded)return;const t=e.getBoundingClientRect().height;e.expanded=!1,this._animate(e,t,0)}_animate(e,t,o){if(e){const a=e.previousElementSibling;a&&a.classList.add("animating"),e.classList.add("animating"),e.style.height=t+"px",requestAnimationFrame(()=>{requestAnimationFrame(()=>{e.style.height=o+"px",e.addEventListener("transitionend",this._transitionEndHandler)})})}}_keydownHandler(e){if(!(e.target instanceof customElements.get(t.tag)))return;let o;switch(e.key){case"ArrowDown":case"Down":case"ArrowRight":case"Right":o=this._nextHeader();break;case"ArrowUp":case"Up":case"ArrowLeft":case"Left":o=this._previousHeader();break;case"Home":o=this._firstHeader();break;case"End":o=this._lastHeader();break;default:return}o&&o.shadowRoot.querySelector("button").focus()}_transitionEndHandler(e){const t=e.target.previousElementSibling;t&&t.classList.remove("animating"),e.target.style.height="",e.target.classList.remove("animating"),e.target.removeEventListener("transitionend",this._transitionEndHandler)}_allHeaders(){return this.isIE11?this.children.filter(e=>"pfe-accordion-header"===e.tagName.toLowerCase()):[...this.querySelectorAll(":scope > pfe-accordion-header")]}_allPanels(){return this.isIE11?this.children.filter(e=>"pfe-accordion-panel"===e.tagName.toLowerCase()):[...this.querySelectorAll(":scope > pfe-accordion-panel")]}_panelForHeader(e){const t=e.nextElementSibling;if(t){if(t.tagName.toLowerCase()===o.tag)return t;this.error("Sibling element to a header needs to be a panel")}}_previousHeader(){const e=this._allHeaders();let t=e.findIndex(e=>e===document.activeElement)-1;return e[(t+e.length)%e.length]}_nextHeader(){const e=this._allHeaders();let t=e.findIndex(e=>e===document.activeElement)+1;return e[t%e.length]}_firstHeader(){return this._allHeaders()[0]}_lastHeader(){const e=this._allHeaders();return e[e.length-1]}_isHeader(e){return e.tagName.toLowerCase()===t.tag}_isPanel(e){return e.tagName.toLowerCase()===o.tag}_expandedIndexHandler(e,t){if(e===t)return;t.split(",").map(e=>parseInt(e,10)-1).reverse().forEach(e=>this.expand(e))}_getIndex(e){if(this._isHeader(e)){return this._allHeaders().findIndex(t=>t.id===e.id)}if(this._isPanel(e)){return this._allPanels().findIndex(t=>t.id===e.id)}return this.warn("The _getIndex method expects to receive a header or panel element."),-1}_getIndexesFromURL(){if(!window.URLSearchParams)return[];const e=new URLSearchParams(window.location.search);if(e&&e.has(this.id)){const t=e.get(this.id).split("-");return t.length<0?[]:t.map(e=>parseInt(e.trim(),10)-1)}}_updateURLHistory(){if(!this.history||!this._updateHistory||!window.URLSearchParams)return;if(!this.id)return void this.error("The history feature cannot update the URL without an ID added to the pfe-accordion tag.");const e=new URLSearchParams(window.location.search),t=this.expandedSets.map(e=>e+1).sort((e,t)=>e-t).join("-");this.expandedSets.length>0?e.set(this.id,t):e.delete(this.id),history.replaceState({},"",`${window.location.pathname}${e?"?"+e.toString():""}${window.location.hash}`)}_updateStateFromURL(){const e=this._getIndexesFromURL()||[];this._updateHistory=!1,e.forEach(e=>this.expand(e)),this._updateHistory=!0}}e.create(t),e.create(o),e.create(a);export default a; +//# sourceMappingURL=pfe-accordion.min.js.map diff --git a/elements/pfe-accordion/dist/pfe-accordion.min.js.map b/elements/pfe-accordion/dist/pfe-accordion.min.js.map new file mode 100644 index 0000000000..87683989da --- /dev/null +++ b/elements/pfe-accordion/dist/pfe-accordion.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-accordion.min.js","sources":["../_temp/polyfills--pfe-accordion.js","../_temp/pfe-accordion-header.js","../_temp/pfe-accordion-panel.js","../_temp/pfe-accordion.js"],"sourcesContent":["// @POLYFILL Array.prototype.findIndex\n// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex\nif (!Array.prototype.findIndex) {\n Object.defineProperty(Array.prototype, \"findIndex\", {\n value: function (predicate) {\n // 1. Let O be ? ToObject(this value).\n if (this == null) {\n throw new TypeError('\"this\" is null or not defined');\n }\n\n var o = Object(this);\n\n // 2. Let len be ? ToLength(? Get(O, \"length\")).\n var len = o.length >>> 0;\n\n // 3. If IsCallable(predicate) is false, throw a TypeError exception.\n if (typeof predicate !== \"function\") {\n throw new TypeError(\"predicate must be a function\");\n }\n\n // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.\n var thisArg = arguments[1];\n\n // 5. Let k be 0.\n var k = 0;\n\n // 6. Repeat, while k < len\n while (k < len) {\n // a. Let Pk be ! ToString(k).\n // b. Let kValue be ? Get(O, Pk).\n // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).\n // d. If testResult is true, return k.\n var kValue = o[k];\n if (predicate.call(thisArg, kValue, k, o)) {\n return k;\n }\n // e. Increase k by 1.\n k++;\n }\n\n // 7. Return -1.\n return -1;\n },\n });\n}\n","/*!\n * PatternFly Elements: PfeAccordion 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement.js\";\nimport PfeIcon from \"../../pfe-icon/dist/pfe-icon.js\";\n\nclass PfeAccordionHeader extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n<${this.headingTag || \"h3\"} id=\"heading\">\n \n`;\n }\n\n static get tag() {\n return \"pfe-accordion-header\";\n }\n\n get styleUrl() {\n return \"pfe-accordion-header.scss\";\n }\n\n get templateUrl() {\n return \"pfe-accordion-header.html\";\n }\n\n // @TODO this is for navigation 1.0 updates\n // get isDirectLink() {\n // return this.hasAttribute(\"is-direct-link\");\n // }\n\n // get link() {\n // return this.querySelector(\"a[href]\");\n // }\n\n static get observer() {\n return {\n childList: true,\n };\n }\n\n static get properties() {\n return {\n _id: {\n type: String,\n default: (el) => `${el.randomId.replace(\"pfe\", el.tag)}`,\n prefix: false,\n },\n ariaControls: {\n type: String,\n prefix: false,\n },\n // @TODO Deprecated pfe-id in 1.0\n oldPfeId: {\n type: String,\n alias: \"_id\",\n attr: \"pfe-id\",\n },\n expanded: {\n title: \"Expanded\",\n type: Boolean,\n observer: \"_expandedChanged\",\n },\n };\n }\n\n static get events() {\n return {\n change: `pfe-accordion:change`,\n };\n }\n\n constructor() {\n super(PfeAccordionHeader);\n\n this._init = this._init.bind(this);\n this._clickHandler = this._clickHandler.bind(this);\n this._observer = new MutationObserver(this._init);\n this._slotObserver = new MutationObserver(this._init);\n\n this._getHeaderElement = this._getHeaderElement.bind(this);\n\n this.headingTag = \"h3\";\n\n this.addEventListener(\"click\", this._clickHandler);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n // Capture the button and the text\n this.button = this.shadowRoot.querySelector(`.pf-c-accordion__toggle`);\n this._buttonText = this.button.querySelector(`.pf-c-accordion__toggle-text`);\n\n if (this.hasLightDOM()) this._init();\n else {\n this._observer.observe(this, PfeAccordionHeader.observer);\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener(\"click\", this._clickHandler);\n this._observer.disconnect();\n }\n\n _init() {\n this._observer.disconnect();\n\n const header = this._getHeaderElement();\n\n if (header) {\n this.headingTag = header.tagName ? header.tagName.toLowerCase() : \"h3\";\n this.headingText = header.textContent ? header.textContent.trim() : \"\";\n }\n\n // Update button text\n this._buttonText.innerHTML = this.headingText;\n\n // Remove the hidden attribute after upgrade\n this.removeAttribute(\"hidden\");\n\n this._observer.observe(this, PfeAccordionHeader.observer);\n\n // @TODO this is for navigation 1.0 updates\n // Validate that headers with the `is-direct-link` attribute contain a link\n // if (this.isDirectLink && !this.link) {\n // this.warn(`This component expects to find a link in the light DOM due to the \"is-direct-link\" attribute`);\n // }\n }\n\n _getHeaderElement() {\n // Check if there is no nested element or nested textNodes\n if (!this.firstElementChild && !this.firstChild) {\n this.warn(`No header content provided`);\n return;\n }\n\n if (this.firstElementChild && this.firstElementChild.tagName) {\n const htags = this.fetchElement(\n this.children,\n (el) => el.tagName && (el.tagName.match(/^H[1-6]/) || el.tagName === \"P\"),\n this._slotObserver\n );\n\n // If there is no content inside the slot, return empty with a warning\n if (htags.length === 0) {\n this.warn(`No heading information was provided.`);\n return;\n }\n // If there is more than 1 element in the slot, capture the first h-tag\n else if (htags.length > 1) {\n this.warn(`Heading currently only supports 1 tag; extra tags will be ignored.`);\n return htags[0];\n } else return htags[0];\n } else {\n const htag = document.createElement(\"h3\");\n\n if (this.firstChild && this.firstChild.nodeType === \"#text\") {\n // If a text node was provided but no semantics, default to an h3\n htag.textContent = this.firstChild.textContent;\n } else {\n this.warn(`Header should contain at least 1 heading tag for correct semantics.`);\n\n // If incorrect semantics were used, create an H3 and try to capture the content\n htag.textContent = this.textContent;\n }\n\n return htag;\n }\n }\n\n _clickHandler(event) {\n this.emitEvent(PfeAccordionHeader.events.change, {\n detail: {\n expanded: !this.expanded,\n toggle: event.target,\n },\n });\n }\n\n _expandedChanged() {\n if (this.button) {\n this.button.setAttribute(\"aria-expanded\", this.expanded ? \"true\" : \"false\");\n }\n }\n\n /**\n * Provides a standard way of fetching light DOM that may or may not be provided inside\n * of a slot; optional filtering of results and way to pass in an observer if you need to\n * track updates to the slot\n * @param {NodeItem} el\n * @param {function} filter [optional] Filter for the returned results of the NodeList\n * @param {function} observer [optional] Pointer to the observer defined for that slot\n */\n fetchElement(els, filter, observer) {\n if (!els) return [];\n let nodes = [...els];\n\n // Parse the nodes for slotted content\n [...nodes]\n .filter((node) => node && node.tagName === \"SLOT\")\n .forEach((node) => {\n // Remove node from the list\n const idx = nodes.findIndex((item) => item === node);\n // Capture it's assigned nodes for validation\n let slotted = node.assignedNodes();\n // If slotted elements were found, add it to the nodeList\n if (slotted && slotted.length > 0) {\n // Remove the slot from the set, add the slotted content\n nodes.splice(idx, 1, ...slotted);\n } else {\n // If no content exists in the slot, check for default content in the slot template\n const defaults = node.children;\n if (defaults && defaults.length > 0) nodes[idx] = defaults[0];\n }\n\n // Attach the observer if provided to watch for updates to the slot\n // Useful if you are moving content from light DOM to shadow DOM\n if (typeof observer === \"function\") {\n observer.observer(node, PfeAccordionHeader.observer);\n }\n });\n\n if (typeof filter === \"function\") return nodes.filter(filter);\n else return nodes;\n }\n}\n\nexport default PfeAccordionHeader;\n","/*!\n * PatternFly Elements: PfeAccordion 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement.js\";\n\nclass PfeAccordionPanel extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n
      \n
      \n \n
      \n
      `;\n }\n\n static get tag() {\n return \"pfe-accordion-panel\";\n }\n\n get styleUrl() {\n return \"pfe-accordion-panel.scss\";\n }\n\n get templateUrl() {\n return \"pfe-accordion-panel.html\";\n }\n\n static get properties() {\n return {\n _id: {\n type: String,\n default: (el) => `${el.randomId.replace(\"pfe\", el.tag)}`,\n prefix: false,\n },\n role: {\n type: String,\n default: \"region\",\n prefix: false,\n },\n // @TODO Deprecated pfe-id in 1.0\n oldPfeId: {\n type: String,\n alias: \"_id\",\n attr: \"pfe-id\",\n },\n expanded: {\n title: \"Expanded\",\n type: Boolean,\n default: false,\n observer: \"_expandedChanged\"\n },\n ariaLabelledby: {\n type: String,\n prefix: false,\n },\n };\n }\n\n constructor() {\n super(PfeAccordionPanel);\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._expandedChanged();\n }\n\n _expandedChanged() {\n if (this.expanded) {\n this.removeAttribute(\"aria-hidden\");\n this.removeAttribute(\"tabindex\");\n } else {\n this.setAttribute(\"aria-hidden\", \"true\");\n this.setAttribute(\"tabindex\", \"-1\");\n }\n }\n}\n\nexport default PfeAccordionPanel;\n","/*!\n * PatternFly Elements: PfeAccordion 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\n// Import polyfills: findIndex\nimport \"./polyfills--pfe-accordion.js\";\n\nimport PFElement from \"../../pfelement/dist/pfelement.js\";\nimport PfeAccordionHeader from \"./pfe-accordion-header.js\";\nimport PfeAccordionPanel from \"./pfe-accordion-panel.js\";\n\nclass PfeAccordion extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n`;\n }\n\n static get tag() {\n return \"pfe-accordion\";\n }\n\n static get meta() {\n return {\n title: \"Accordion\",\n description: \"This element renders content sets in an expandable format.\",\n };\n }\n\n get styleUrl() {\n return \"pfe-accordion.scss\";\n }\n\n get templateUrl() {\n return \"pfe-accordion.html\";\n }\n\n static get properties() {\n return {\n disclosure: {\n // Leaving this as a string since it's an opt out\n title: \"Disclosure\",\n type: String,\n values: [\"true\", \"false\"],\n cascade: [\"pfe-accordion-header\", \"pfe-accordion-panel\"],\n },\n // @TODO: Deprecated pfe-disclosure in 1.0\n oldDisclosure: {\n type: String,\n alias: \"disclosure\",\n attr: \"pfe-disclosure\",\n },\n // Do not set a default of 0, it causes a the URL history to\n // be updated on load for every tab; infinite looping goodness\n // Seriously, don't set a default here unless you do a rewrite\n expandedIndex: {\n title: \"Expanded index(es)\",\n type: String,\n observer: \"_expandedIndexHandler\",\n },\n history: {\n title: \"History\",\n type: Boolean,\n default: false,\n observer: \"_historyHandler\",\n },\n };\n }\n\n static get slots() {\n return {\n default: {\n type: \"array\",\n namedSlot: false,\n items: {\n oneOf: [\n {\n $ref: \"pfe-accordion-header\",\n },\n {\n $ref: \"pfe-accordion-panel\",\n },\n ],\n },\n },\n };\n }\n\n static get events() {\n return {\n change: `${this.tag}:change`,\n expand: `${this.tag}:expand`,\n collapse: `${this.tag}:collapse`,\n };\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Container;\n }\n\n // Each set contains a header and a panel\n static get contentTemplate() {\n return `\n \n \n `;\n }\n\n constructor() {\n super(PfeAccordion, { type: PfeAccordion.PfeType });\n\n this._manualDisclosure = null;\n this._updateHistory = true;\n this.expandedSets = [];\n\n this._init = this._init.bind(this);\n this._observer = new MutationObserver(this._init);\n this._updateStateFromURL = this._updateStateFromURL.bind(this);\n this._getIndexesFromURL = this._getIndexesFromURL.bind(this);\n this._updateURLHistory = this._updateURLHistory.bind(this);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (this.hasLightDOM()) {\n this._manualDisclosure = this.getAttribute(\"disclosure\") || this.getAttribute(\"pfe-disclosure\");\n\n Promise.all([\n customElements.whenDefined(PfeAccordionHeader.tag),\n customElements.whenDefined(PfeAccordionPanel.tag),\n ]).then(this._init);\n }\n\n this.addEventListener(PfeAccordion.events.change, this._changeHandler);\n this.addEventListener(\"keydown\", this._keydownHandler);\n\n // Set up the observer on the child tree\n this._observer.observe(this, {\n childList: true,\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener(PfeAccordion.events.change, this._changeHandler);\n this.removeEventListener(\"keydown\", this._keydownHandler);\n this._observer.disconnect();\n\n window.removeEventListener(\"popstate\", this._updateStateFromURL);\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse.\n * @param {Number} index\n */\n toggle(index) {\n const headers = this._allHeaders();\n const header = headers[index];\n\n if (!header.expanded) this.expand(index);\n else this.collapse(index);\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to expand.\n * @param {Number} index\n */\n expand(_index) {\n if (_index === undefined || _index === null) return;\n\n // Ensure the input is a number\n const index = parseInt(_index, 10);\n\n // Get all the headers and capture the item by index value\n const headers = this._allHeaders();\n const header = headers[index];\n if (!header) return;\n\n const panel = this._panelForHeader(header);\n if (!header || !panel) return;\n\n // If the header and panel exist, open both\n this._expandHeader(header);\n this._expandPanel(panel);\n\n header.focus();\n\n this.emitEvent(PfeAccordion.events.expand, {\n detail: {\n toggle: header,\n panel: panel,\n },\n });\n }\n\n /**\n * Expands all accordion items.\n */\n expandAll() {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n\n headers.forEach((header) => this._expandHeader(header));\n panels.forEach((panel) => this._expandPanel(panel));\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to collapse.\n * @param {Number} index\n */\n collapse(index) {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n const header = headers[index];\n const panel = panels[index];\n\n if (!header || !panel) return;\n\n this._collapseHeader(header);\n this._collapsePanel(panel);\n\n this.emitEvent(PfeAccordion.events.collapse, {\n detail: {\n toggle: header,\n panel: panel,\n },\n });\n }\n\n /**\n * Collapses all accordion items.\n */\n collapseAll() {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n\n headers.forEach((header) => this._collapseHeader(header));\n panels.forEach((panel) => this._collapsePanel(panel));\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 _init() {\n const headers = this._allHeaders();\n // For each header in the accordion, attach the aria connections\n headers.forEach((header) => {\n const panel = this._panelForHeader(header);\n // Escape if no matching panel can be found\n if (!panel) return;\n\n header.ariaControls = panel._id;\n panel.ariaLabelledby = header._id;\n });\n\n // If disclosure was not set by the author, set up the defaults\n if (!this._manualDisclosure) {\n if (headers.length === 1) {\n this.disclosure = \"true\";\n } else if (headers.length > 1) {\n this.disclosure = \"false\";\n }\n }\n\n // Update state if params exist in the URL\n if (!this.isIE11) this._updateStateFromURL();\n }\n\n _changeHandler(evt) {\n if (this.classList.contains(\"animating\")) return;\n\n const index = this._getIndex(evt.target);\n\n if (evt.detail.expanded) this.expand(index);\n else this.collapse(index);\n\n this._updateURLHistory();\n }\n\n _historyHandler() {\n if (!this.history) window.removeEventListener(\"popstate\", this._updateStateFromURL);\n else window.addEventListener(\"popstate\", this._updateStateFromURL);\n }\n\n _expandHeader(header) {\n const index = this._getIndex(header);\n\n // If this index is not already listed in the expandedSets array, add it\n if (this.expandedSets.indexOf(index) < 0 && index > -1) this.expandedSets.push(index);\n\n header.expanded = true;\n }\n\n _expandPanel(panel) {\n if (!panel) {\n this.error(`Trying to expand a panel that doesn't exist.`);\n return;\n }\n\n if (panel.expanded) return;\n\n panel.expanded = true;\n\n const height = panel.getBoundingClientRect().height;\n this._animate(panel, 0, height);\n }\n\n _collapseHeader(header) {\n const index = this._getIndex(header);\n\n // If this index is exists in the expanded array, remove it\n let idx = this.expandedSets.indexOf(index);\n if (idx >= 0) this.expandedSets.splice(idx, 1);\n\n header.expanded = false;\n }\n\n _collapsePanel(panel) {\n if (!panel) {\n this.error(`Trying to collapse a panel that doesn't exist`);\n return;\n }\n\n if (!panel.expanded) return;\n\n const height = panel.getBoundingClientRect().height;\n panel.expanded = false;\n\n this._animate(panel, height, 0);\n }\n\n _animate(panel, start, end) {\n if (panel) {\n const header = panel.previousElementSibling;\n if (header) {\n header.classList.add(\"animating\");\n }\n panel.classList.add(\"animating\");\n panel.style.height = `${start}px`;\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n panel.style.height = `${end}px`;\n panel.addEventListener(\"transitionend\", this._transitionEndHandler);\n });\n });\n }\n }\n\n _keydownHandler(evt) {\n const currentHeader = evt.target;\n\n if (!(currentHeader instanceof customElements.get(PfeAccordionHeader.tag))) {\n return;\n }\n\n let newHeader;\n\n switch (evt.key) {\n case \"ArrowDown\":\n case \"Down\":\n case \"ArrowRight\":\n case \"Right\":\n newHeader = this._nextHeader();\n break;\n case \"ArrowUp\":\n case \"Up\":\n case \"ArrowLeft\":\n case \"Left\":\n newHeader = this._previousHeader();\n break;\n case \"Home\":\n newHeader = this._firstHeader();\n break;\n case \"End\":\n newHeader = this._lastHeader();\n break;\n default:\n return;\n }\n\n if (newHeader) {\n newHeader.shadowRoot.querySelector(\"button\").focus();\n }\n }\n\n _transitionEndHandler(evt) {\n const header = evt.target.previousElementSibling;\n if (header) header.classList.remove(\"animating\");\n\n evt.target.style.height = \"\";\n evt.target.classList.remove(\"animating\");\n evt.target.removeEventListener(\"transitionend\", this._transitionEndHandler);\n }\n\n _allHeaders() {\n if (!this.isIE11) return [...this.querySelectorAll(`:scope > pfe-accordion-header`)];\n else return this.children.filter((el) => el.tagName.toLowerCase() === \"pfe-accordion-header\");\n }\n\n _allPanels() {\n if (!this.isIE11) return [...this.querySelectorAll(`:scope > pfe-accordion-panel`)];\n else return this.children.filter((el) => el.tagName.toLowerCase() === \"pfe-accordion-panel\");\n }\n\n _panelForHeader(header) {\n const next = header.nextElementSibling;\n\n if (!next) return;\n\n if (next.tagName.toLowerCase() !== PfeAccordionPanel.tag) {\n this.error(`Sibling element to a header needs to be a panel`);\n return;\n }\n\n return next;\n }\n\n _previousHeader() {\n const headers = this._allHeaders();\n let newIndex = headers.findIndex((header) => header === document.activeElement) - 1;\n return headers[(newIndex + headers.length) % headers.length];\n }\n\n _nextHeader() {\n const headers = this._allHeaders();\n let newIndex = headers.findIndex((header) => header === document.activeElement) + 1;\n return headers[newIndex % headers.length];\n }\n\n _firstHeader() {\n const headers = this._allHeaders();\n return headers[0];\n }\n\n _lastHeader() {\n const headers = this._allHeaders();\n return headers[headers.length - 1];\n }\n\n _isHeader(element) {\n return element.tagName.toLowerCase() === PfeAccordionHeader.tag;\n }\n\n _isPanel(element) {\n return element.tagName.toLowerCase() === PfeAccordionPanel.tag;\n }\n\n _expandedIndexHandler(oldVal, newVal) {\n if (oldVal === newVal) return;\n const indexes = newVal.split(\",\").map((idx) => parseInt(idx, 10) - 1);\n indexes.reverse().forEach((index) => this.expand(index));\n }\n\n _getIndex(_el) {\n if (this._isHeader(_el)) {\n const headers = this._allHeaders();\n return headers.findIndex((header) => header.id === _el.id);\n }\n\n if (this._isPanel(_el)) {\n const panels = this._allPanels();\n return panels.findIndex((panel) => panel.id === _el.id);\n }\n\n this.warn(`The _getIndex method expects to receive a header or panel element.`);\n return -1;\n }\n\n _getIndexesFromURL() {\n // @IE11 doesn't support URLSearchParams\n // https://caniuse.com/#search=urlsearchparams\n if (!window.URLSearchParams) return [];\n\n // Capture the URL parameters\n const urlParams = new URLSearchParams(window.location.search);\n\n // If parameters exist and they contain the ID for this accordion\n if (urlParams && urlParams.has(this.id)) {\n const params = urlParams.get(this.id);\n // Split the parameters by underscore to see if more than 1 item is expanded\n const indexes = params.split(\"-\");\n if (indexes.length < 0) return [];\n\n // Clean up the results by converting to array count\n return indexes.map((item) => parseInt(item.trim(), 10) - 1);\n }\n }\n\n /**\n * This handles updating the URL parameters based on the current state\n * of the global this.expanded array\n * @requires this.expandedSets {Array}\n */\n _updateURLHistory() {\n // @IE11 doesn't support URLSearchParams\n // https://caniuse.com/#search=urlsearchparams\n if (!this.history || !this._updateHistory || !window.URLSearchParams) return;\n\n if (!this.id) {\n this.error(`The history feature cannot update the URL without an ID added to the pfe-accordion tag.`);\n return;\n }\n\n // Capture the URL and rebuild it using the new state\n const urlParams = new URLSearchParams(window.location.search);\n // Iterate the expanded array by 1 to convert to human-readable vs. array notation;\n // sort values numerically and connect them using a dash\n const openIndexes = this.expandedSets\n .map((item) => item + 1)\n .sort((a, b) => a - b)\n .join(\"-\");\n\n // If values exist in the array, add them to the parameter string\n if (this.expandedSets.length > 0) urlParams.set(this.id, openIndexes);\n // Otherwise delete the set entirely\n else urlParams.delete(this.id);\n\n // Note: Using replace state protects the user's back navigation\n history.replaceState(\n {},\n \"\",\n `${window.location.pathname}${urlParams ? `?${urlParams.toString()}` : \"\"}${window.location.hash}`\n );\n }\n\n /**\n * This captures the URL parameters and expands each item in the array\n * @requires this._getIndexesFromURL {Method}\n */\n _updateStateFromURL() {\n const indexesFromURL = this._getIndexesFromURL() || [];\n\n this._updateHistory = false;\n indexesFromURL.forEach((idx) => this.expand(idx));\n this._updateHistory = true;\n }\n}\n\nPFElement.create(PfeAccordionHeader);\nPFElement.create(PfeAccordionPanel);\nPFElement.create(PfeAccordion);\n\nexport { PfeAccordion as default };\n"],"names":["Array","prototype","findIndex","Object","defineProperty","value","predicate","this","TypeError","o","len","length","thisArg","arguments","k","kValue","call","PfeAccordionHeader","PFElement","version","html","headingTag","expanded","headingText","hasSlot","tag","styleUrl","templateUrl","observer","childList","properties","_id","type","String","default","el","randomId","replace","prefix","ariaControls","oldPfeId","alias","attr","title","Boolean","events","change","[object Object]","super","_init","bind","_clickHandler","_observer","MutationObserver","_slotObserver","_getHeaderElement","addEventListener","connectedCallback","button","shadowRoot","querySelector","_buttonText","hasLightDOM","observe","disconnectedCallback","removeEventListener","disconnect","header","tagName","toLowerCase","textContent","trim","innerHTML","removeAttribute","firstElementChild","firstChild","htags","fetchElement","children","match","warn","htag","document","createElement","nodeType","event","emitEvent","detail","toggle","target","setAttribute","els","filter","nodes","node","forEach","idx","item","slotted","assignedNodes","splice","defaults","PfeAccordionPanel","role","ariaLabelledby","_expandedChanged","PfeAccordion","meta","description","disclosure","values","cascade","oldDisclosure","expandedIndex","history","slots","namedSlot","items","oneOf","$ref","expand","collapse","PfeType","PfeTypes","Container","contentTemplate","_manualDisclosure","_updateHistory","expandedSets","_updateStateFromURL","_getIndexesFromURL","_updateURLHistory","getAttribute","Promise","all","customElements","whenDefined","then","_changeHandler","_keydownHandler","window","index","_allHeaders","_index","parseInt","panel","_panelForHeader","_expandHeader","_expandPanel","focus","headers","panels","_allPanels","_collapseHeader","_collapsePanel","isIE11","evt","classList","contains","_getIndex","indexOf","push","error","height","getBoundingClientRect","_animate","start","end","previousElementSibling","add","style","requestAnimationFrame","_transitionEndHandler","get","newHeader","key","_nextHeader","_previousHeader","_firstHeader","_lastHeader","remove","querySelectorAll","next","nextElementSibling","newIndex","activeElement","element","oldVal","newVal","split","map","reverse","_el","_isHeader","id","_isPanel","URLSearchParams","urlParams","location","search","has","indexes","openIndexes","sort","a","b","join","set","delete","replaceState","pathname","toString","hash","indexesFromURL","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-accordion/dist/pfe-accordion.umd.js b/elements/pfe-accordion/dist/pfe-accordion.umd.js new file mode 100644 index 0000000000..ab654034b2 --- /dev/null +++ b/elements/pfe-accordion/dist/pfe-accordion.umd.js @@ -0,0 +1,1210 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('../../pfelement/dist/pfelement.umd'), require('../../pfe-icon/dist/pfe-icon.umd')) : + typeof define === 'function' && define.amd ? define(['../../pfelement/dist/pfelement.umd', '../../pfe-icon/dist/pfe-icon.umd'], factory) : + (global = global || self, global.PfeAccordion = factory(global.PFElement, global.PfeIcon)); +}(this, (function (PFElement, pfeIcon_umd) { 'use strict'; + + PFElement = PFElement && Object.prototype.hasOwnProperty.call(PFElement, 'default') ? PFElement['default'] : PFElement; + pfeIcon_umd = pfeIcon_umd && Object.prototype.hasOwnProperty.call(pfeIcon_umd, 'default') ? pfeIcon_umd['default'] : pfeIcon_umd; + + // @POLYFILL Array.prototype.findIndex + // https://tc39.github.io/ecma262/#sec-array.prototype.findIndex + if (!Array.prototype.findIndex) { + Object.defineProperty(Array.prototype, "findIndex", { + value: function value(predicate) { + // 1. Let O be ? ToObject(this value). + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. Let len be ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // 3. If IsCallable(predicate) is false, throw a TypeError exception. + if (typeof predicate !== "function") { + throw new TypeError("predicate must be a function"); + } + + // 4. If thisArg was supplied, let T be thisArg; else let T be undefined. + var thisArg = arguments[1]; + + // 5. Let k be 0. + var k = 0; + + // 6. Repeat, while k < len + while (k < len) { + // a. Let Pk be ! ToString(k). + // b. Let kValue be ? Get(O, Pk). + // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). + // d. If testResult is true, return k. + var kValue = o[k]; + if (predicate.call(thisArg, kValue, k, o)) { + return k; + } + // e. Increase k by 1. + k++; + } + + // 7. Return -1. + return -1; + } + }); + } + + var classCallCheck = function (instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } + }; + + var createClass = function () { + function defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } + + return function (Constructor, protoProps, staticProps) { + if (protoProps) defineProperties(Constructor.prototype, protoProps); + if (staticProps) defineProperties(Constructor, staticProps); + return Constructor; + }; + }(); + + var get = function get(object, property, receiver) { + if (object === null) object = Function.prototype; + var desc = Object.getOwnPropertyDescriptor(object, property); + + if (desc === undefined) { + var parent = Object.getPrototypeOf(object); + + if (parent === null) { + return undefined; + } else { + return get(parent, property, receiver); + } + } else if ("value" in desc) { + return desc.value; + } else { + var getter = desc.get; + + if (getter === undefined) { + return undefined; + } + + return getter.call(receiver); + } + }; + + var inherits = function (subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); + } + + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + enumerable: false, + writable: true, + configurable: true + } + }); + if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; + }; + + var possibleConstructorReturn = function (self, call) { + if (!self) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return call && (typeof call === "object" || typeof call === "function") ? call : self; + }; + + var toConsumableArray = function (arr) { + if (Array.isArray(arr)) { + for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; + + return arr2; + } else { + return Array.from(arr); + } + }; + + /*! + * PatternFly Elements: PfeAccordion 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * + */ + + var PfeAccordionHeader = function (_PFElement) { + inherits(PfeAccordionHeader, _PFElement); + createClass(PfeAccordionHeader, [{ + key: "html", + + + // Injected at build-time + get: function get() { + return "\n\n<" + (this.headingTag || "h3") + " id=\"heading\">\n \n"; + } + }, { + key: "styleUrl", + get: function get() { + return "pfe-accordion-header.scss"; + } + }, { + key: "templateUrl", + get: function get() { + return "pfe-accordion-header.html"; + } + + // @TODO this is for navigation 1.0 updates + // get isDirectLink() { + // return this.hasAttribute("is-direct-link"); + // } + + // get link() { + // return this.querySelector("a[href]"); + // } + + }], [{ + key: "version", + + + // Injected at build-time + get: function get() { + return "1.12.3"; + } + }, { + key: "tag", + get: function get() { + return "pfe-accordion-header"; + } + }, { + key: "observer", + get: function get() { + return { + childList: true + }; + } + }, { + key: "properties", + get: function get() { + return { + _id: { + type: String, + default: function _default(el) { + return "" + el.randomId.replace("pfe", el.tag); + }, + prefix: false + }, + ariaControls: { + type: String, + prefix: false + }, + // @TODO Deprecated pfe-id in 1.0 + oldPfeId: { + type: String, + alias: "_id", + attr: "pfe-id" + }, + expanded: { + title: "Expanded", + type: Boolean, + observer: "_expandedChanged" + } + }; + } + }, { + key: "events", + get: function get() { + return { + change: "pfe-accordion:change" + }; + } + }]); + + function PfeAccordionHeader() { + classCallCheck(this, PfeAccordionHeader); + + var _this = possibleConstructorReturn(this, (PfeAccordionHeader.__proto__ || Object.getPrototypeOf(PfeAccordionHeader)).call(this, PfeAccordionHeader)); + + _this._init = _this._init.bind(_this); + _this._clickHandler = _this._clickHandler.bind(_this); + _this._observer = new MutationObserver(_this._init); + _this._slotObserver = new MutationObserver(_this._init); + + _this._getHeaderElement = _this._getHeaderElement.bind(_this); + + _this.headingTag = "h3"; + + _this.addEventListener("click", _this._clickHandler); + return _this; + } + + createClass(PfeAccordionHeader, [{ + key: "connectedCallback", + value: function connectedCallback() { + get(PfeAccordionHeader.prototype.__proto__ || Object.getPrototypeOf(PfeAccordionHeader.prototype), "connectedCallback", this).call(this); + + // Capture the button and the text + this.button = this.shadowRoot.querySelector(".pf-c-accordion__toggle"); + this._buttonText = this.button.querySelector(".pf-c-accordion__toggle-text"); + + if (this.hasLightDOM()) this._init();else { + this._observer.observe(this, PfeAccordionHeader.observer); + } + } + }, { + key: "disconnectedCallback", + value: function disconnectedCallback() { + get(PfeAccordionHeader.prototype.__proto__ || Object.getPrototypeOf(PfeAccordionHeader.prototype), "disconnectedCallback", this).call(this); + + this.removeEventListener("click", this._clickHandler); + this._observer.disconnect(); + } + }, { + key: "_init", + value: function _init() { + this._observer.disconnect(); + + var header = this._getHeaderElement(); + + if (header) { + this.headingTag = header.tagName ? header.tagName.toLowerCase() : "h3"; + this.headingText = header.textContent ? header.textContent.trim() : ""; + } + + // Update button text + this._buttonText.innerHTML = this.headingText; + + // Remove the hidden attribute after upgrade + this.removeAttribute("hidden"); + + this._observer.observe(this, PfeAccordionHeader.observer); + + // @TODO this is for navigation 1.0 updates + // Validate that headers with the `is-direct-link` attribute contain a link + // if (this.isDirectLink && !this.link) { + // this.warn(`This component expects to find a link in the light DOM due to the "is-direct-link" attribute`); + // } + } + }, { + key: "_getHeaderElement", + value: function _getHeaderElement() { + // Check if there is no nested element or nested textNodes + if (!this.firstElementChild && !this.firstChild) { + this.warn("No header content provided"); + return; + } + + if (this.firstElementChild && this.firstElementChild.tagName) { + var htags = this.fetchElement(this.children, function (el) { + return el.tagName && (el.tagName.match(/^H[1-6]/) || el.tagName === "P"); + }, this._slotObserver); + + // If there is no content inside the slot, return empty with a warning + if (htags.length === 0) { + this.warn("No heading information was provided."); + return; + } + // If there is more than 1 element in the slot, capture the first h-tag + else if (htags.length > 1) { + this.warn("Heading currently only supports 1 tag; extra tags will be ignored."); + return htags[0]; + } else return htags[0]; + } else { + var htag = document.createElement("h3"); + + if (this.firstChild && this.firstChild.nodeType === "#text") { + // If a text node was provided but no semantics, default to an h3 + htag.textContent = this.firstChild.textContent; + } else { + this.warn("Header should contain at least 1 heading tag for correct semantics."); + + // If incorrect semantics were used, create an H3 and try to capture the content + htag.textContent = this.textContent; + } + + return htag; + } + } + }, { + key: "_clickHandler", + value: function _clickHandler(event) { + this.emitEvent(PfeAccordionHeader.events.change, { + detail: { + expanded: !this.expanded, + toggle: event.target + } + }); + } + }, { + key: "_expandedChanged", + value: function _expandedChanged() { + if (this.button) { + this.button.setAttribute("aria-expanded", this.expanded ? "true" : "false"); + } + } + + /** + * Provides a standard way of fetching light DOM that may or may not be provided inside + * of a slot; optional filtering of results and way to pass in an observer if you need to + * track updates to the slot + * @param {NodeItem} el + * @param {function} filter [optional] Filter for the returned results of the NodeList + * @param {function} observer [optional] Pointer to the observer defined for that slot + */ + + }, { + key: "fetchElement", + value: function fetchElement(els, filter, observer) { + if (!els) return []; + var nodes = [].concat(toConsumableArray(els)); + + // Parse the nodes for slotted content + [].concat(toConsumableArray(nodes)).filter(function (node) { + return node && node.tagName === "SLOT"; + }).forEach(function (node) { + // Remove node from the list + var idx = nodes.findIndex(function (item) { + return item === node; + }); + // Capture it's assigned nodes for validation + var slotted = node.assignedNodes(); + // If slotted elements were found, add it to the nodeList + if (slotted && slotted.length > 0) { + // Remove the slot from the set, add the slotted content + nodes.splice.apply(nodes, [idx, 1].concat(toConsumableArray(slotted))); + } else { + // If no content exists in the slot, check for default content in the slot template + var defaults = node.children; + if (defaults && defaults.length > 0) nodes[idx] = defaults[0]; + } + + // Attach the observer if provided to watch for updates to the slot + // Useful if you are moving content from light DOM to shadow DOM + if (typeof observer === "function") { + observer.observer(node, PfeAccordionHeader.observer); + } + }); + + if (typeof filter === "function") return nodes.filter(filter);else return nodes; + } + }]); + return PfeAccordionHeader; + }(PFElement); + + /*! + * PatternFly Elements: PfeAccordion 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * + */ + + var PfeAccordionPanel = function (_PFElement) { + inherits(PfeAccordionPanel, _PFElement); + createClass(PfeAccordionPanel, [{ + key: "html", + + + // Injected at build-time + get: function get() { + return "\n\n
      \n
      \n \n
      \n
      "; + } + }, { + key: "styleUrl", + get: function get() { + return "pfe-accordion-panel.scss"; + } + }, { + key: "templateUrl", + get: function get() { + return "pfe-accordion-panel.html"; + } + }], [{ + key: "version", + + + // Injected at build-time + get: function get() { + return "1.12.3"; + } + }, { + key: "tag", + get: function get() { + return "pfe-accordion-panel"; + } + }, { + key: "properties", + get: function get() { + return { + _id: { + type: String, + default: function _default(el) { + return "" + el.randomId.replace("pfe", el.tag); + }, + prefix: false + }, + role: { + type: String, + default: "region", + prefix: false + }, + // @TODO Deprecated pfe-id in 1.0 + oldPfeId: { + type: String, + alias: "_id", + attr: "pfe-id" + }, + expanded: { + title: "Expanded", + type: Boolean, + default: false, + observer: "_expandedChanged" + }, + ariaLabelledby: { + type: String, + prefix: false + } + }; + } + }]); + + function PfeAccordionPanel() { + classCallCheck(this, PfeAccordionPanel); + return possibleConstructorReturn(this, (PfeAccordionPanel.__proto__ || Object.getPrototypeOf(PfeAccordionPanel)).call(this, PfeAccordionPanel)); + } + + createClass(PfeAccordionPanel, [{ + key: "connectedCallback", + value: function connectedCallback() { + get(PfeAccordionPanel.prototype.__proto__ || Object.getPrototypeOf(PfeAccordionPanel.prototype), "connectedCallback", this).call(this); + this._expandedChanged(); + } + }, { + key: "_expandedChanged", + value: function _expandedChanged() { + if (this.expanded) { + this.removeAttribute("aria-hidden"); + this.removeAttribute("tabindex"); + } else { + this.setAttribute("aria-hidden", "true"); + this.setAttribute("tabindex", "-1"); + } + } + }]); + return PfeAccordionPanel; + }(PFElement); + + /*! + * PatternFly Elements: PfeAccordion 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * + */ + + var PfeAccordion = function (_PFElement) { + inherits(PfeAccordion, _PFElement); + createClass(PfeAccordion, [{ + key: "html", + + + // Injected at build-time + get: function get() { + return "\n\n"; + } + }, { + key: "styleUrl", + get: function get() { + return "pfe-accordion.scss"; + } + }, { + key: "templateUrl", + get: function get() { + return "pfe-accordion.html"; + } + }], [{ + key: "version", + + + // Injected at build-time + get: function get() { + return "1.12.3"; + } + }, { + key: "tag", + get: function get() { + return "pfe-accordion"; + } + }, { + key: "meta", + get: function get() { + return { + title: "Accordion", + description: "This element renders content sets in an expandable format." + }; + } + }, { + key: "properties", + get: function get() { + return { + disclosure: { + // Leaving this as a string since it's an opt out + title: "Disclosure", + type: String, + values: ["true", "false"], + cascade: ["pfe-accordion-header", "pfe-accordion-panel"] + }, + // @TODO: Deprecated pfe-disclosure in 1.0 + oldDisclosure: { + type: String, + alias: "disclosure", + attr: "pfe-disclosure" + }, + // Do not set a default of 0, it causes a the URL history to + // be updated on load for every tab; infinite looping goodness + // Seriously, don't set a default here unless you do a rewrite + expandedIndex: { + title: "Expanded index(es)", + type: String, + observer: "_expandedIndexHandler" + }, + history: { + title: "History", + type: Boolean, + default: false, + observer: "_historyHandler" + } + }; + } + }, { + key: "slots", + get: function get() { + return { + default: { + type: "array", + namedSlot: false, + items: { + oneOf: [{ + $ref: "pfe-accordion-header" + }, { + $ref: "pfe-accordion-panel" + }] + } + } + }; + } + }, { + key: "events", + get: function get() { + return { + change: this.tag + ":change", + expand: this.tag + ":expand", + collapse: this.tag + ":collapse" + }; + } + + // Declare the type of this component + + }, { + key: "PfeType", + get: function get() { + return PFElement.PfeTypes.Container; + } + + // Each set contains a header and a panel + + }, { + key: "contentTemplate", + get: function get() { + return "\n \n \n "; + } + }]); + + function PfeAccordion() { + classCallCheck(this, PfeAccordion); + + var _this = possibleConstructorReturn(this, (PfeAccordion.__proto__ || Object.getPrototypeOf(PfeAccordion)).call(this, PfeAccordion, { type: PfeAccordion.PfeType })); + + _this._manualDisclosure = null; + _this._updateHistory = true; + _this.expandedSets = []; + + _this._init = _this._init.bind(_this); + _this._observer = new MutationObserver(_this._init); + _this._updateStateFromURL = _this._updateStateFromURL.bind(_this); + _this._getIndexesFromURL = _this._getIndexesFromURL.bind(_this); + _this._updateURLHistory = _this._updateURLHistory.bind(_this); + return _this; + } + + createClass(PfeAccordion, [{ + key: "connectedCallback", + value: function connectedCallback() { + get(PfeAccordion.prototype.__proto__ || Object.getPrototypeOf(PfeAccordion.prototype), "connectedCallback", this).call(this); + + if (this.hasLightDOM()) { + this._manualDisclosure = this.getAttribute("disclosure") || this.getAttribute("pfe-disclosure"); + + Promise.all([customElements.whenDefined(PfeAccordionHeader.tag), customElements.whenDefined(PfeAccordionPanel.tag)]).then(this._init); + } + + this.addEventListener(PfeAccordion.events.change, this._changeHandler); + this.addEventListener("keydown", this._keydownHandler); + + // Set up the observer on the child tree + this._observer.observe(this, { + childList: true + }); + } + }, { + key: "disconnectedCallback", + value: function disconnectedCallback() { + get(PfeAccordion.prototype.__proto__ || Object.getPrototypeOf(PfeAccordion.prototype), "disconnectedCallback", this).call(this); + + this.removeEventListener(PfeAccordion.events.change, this._changeHandler); + this.removeEventListener("keydown", this._keydownHandler); + this._observer.disconnect(); + + window.removeEventListener("popstate", this._updateStateFromURL); + } + + /** + * Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse. + * @param {Number} index + */ + + }, { + key: "toggle", + value: function toggle(index) { + var headers = this._allHeaders(); + var header = headers[index]; + + if (!header.expanded) this.expand(index);else this.collapse(index); + } + + /** + * Accepts a 0-based index value (integer) for the set of accordion items to expand. + * @param {Number} index + */ + + }, { + key: "expand", + value: function expand(_index) { + if (_index === undefined || _index === null) return; + + // Ensure the input is a number + var index = parseInt(_index, 10); + + // Get all the headers and capture the item by index value + var headers = this._allHeaders(); + var header = headers[index]; + if (!header) return; + + var panel = this._panelForHeader(header); + if (!header || !panel) return; + + // If the header and panel exist, open both + this._expandHeader(header); + this._expandPanel(panel); + + header.focus(); + + this.emitEvent(PfeAccordion.events.expand, { + detail: { + toggle: header, + panel: panel + } + }); + } + + /** + * Expands all accordion items. + */ + + }, { + key: "expandAll", + value: function expandAll() { + var _this2 = this; + + var headers = this._allHeaders(); + var panels = this._allPanels(); + + headers.forEach(function (header) { + return _this2._expandHeader(header); + }); + panels.forEach(function (panel) { + return _this2._expandPanel(panel); + }); + } + + /** + * Accepts a 0-based index value (integer) for the set of accordion items to collapse. + * @param {Number} index + */ + + }, { + key: "collapse", + value: function collapse(index) { + var headers = this._allHeaders(); + var panels = this._allPanels(); + var header = headers[index]; + var panel = panels[index]; + + if (!header || !panel) return; + + this._collapseHeader(header); + this._collapsePanel(panel); + + this.emitEvent(PfeAccordion.events.collapse, { + detail: { + toggle: header, + panel: panel + } + }); + } + + /** + * Collapses all accordion items. + */ + + }, { + key: "collapseAll", + value: function collapseAll() { + var _this3 = this; + + var headers = this._allHeaders(); + var panels = this._allPanels(); + + headers.forEach(function (header) { + return _this3._collapseHeader(header); + }); + panels.forEach(function (panel) { + return _this3._collapsePanel(panel); + }); + } + + /** + * Initialize the accordion by connecting headers and panels + * with aria controls and labels; set up the default disclosure + * state if not set by the author; and check the URL for default + * open + */ + + }, { + key: "_init", + value: function _init() { + var _this4 = this; + + var headers = this._allHeaders(); + // For each header in the accordion, attach the aria connections + headers.forEach(function (header) { + var panel = _this4._panelForHeader(header); + // Escape if no matching panel can be found + if (!panel) return; + + header.ariaControls = panel._id; + panel.ariaLabelledby = header._id; + }); + + // If disclosure was not set by the author, set up the defaults + if (!this._manualDisclosure) { + if (headers.length === 1) { + this.disclosure = "true"; + } else if (headers.length > 1) { + this.disclosure = "false"; + } + } + + // Update state if params exist in the URL + if (!this.isIE11) this._updateStateFromURL(); + } + }, { + key: "_changeHandler", + value: function _changeHandler(evt) { + if (this.classList.contains("animating")) return; + + var index = this._getIndex(evt.target); + + if (evt.detail.expanded) this.expand(index);else this.collapse(index); + + this._updateURLHistory(); + } + }, { + key: "_historyHandler", + value: function _historyHandler() { + if (!this.history) window.removeEventListener("popstate", this._updateStateFromURL);else window.addEventListener("popstate", this._updateStateFromURL); + } + }, { + key: "_expandHeader", + value: function _expandHeader(header) { + var index = this._getIndex(header); + + // If this index is not already listed in the expandedSets array, add it + if (this.expandedSets.indexOf(index) < 0 && index > -1) this.expandedSets.push(index); + + header.expanded = true; + } + }, { + key: "_expandPanel", + value: function _expandPanel(panel) { + if (!panel) { + this.error("Trying to expand a panel that doesn't exist."); + return; + } + + if (panel.expanded) return; + + panel.expanded = true; + + var height = panel.getBoundingClientRect().height; + this._animate(panel, 0, height); + } + }, { + key: "_collapseHeader", + value: function _collapseHeader(header) { + var index = this._getIndex(header); + + // If this index is exists in the expanded array, remove it + var idx = this.expandedSets.indexOf(index); + if (idx >= 0) this.expandedSets.splice(idx, 1); + + header.expanded = false; + } + }, { + key: "_collapsePanel", + value: function _collapsePanel(panel) { + if (!panel) { + this.error("Trying to collapse a panel that doesn't exist"); + return; + } + + if (!panel.expanded) return; + + var height = panel.getBoundingClientRect().height; + panel.expanded = false; + + this._animate(panel, height, 0); + } + }, { + key: "_animate", + value: function _animate(panel, start, end) { + var _this5 = this; + + if (panel) { + var header = panel.previousElementSibling; + if (header) { + header.classList.add("animating"); + } + panel.classList.add("animating"); + panel.style.height = start + "px"; + + requestAnimationFrame(function () { + requestAnimationFrame(function () { + panel.style.height = end + "px"; + panel.addEventListener("transitionend", _this5._transitionEndHandler); + }); + }); + } + } + }, { + key: "_keydownHandler", + value: function _keydownHandler(evt) { + var currentHeader = evt.target; + + if (!(currentHeader instanceof customElements.get(PfeAccordionHeader.tag))) { + return; + } + + var newHeader = void 0; + + switch (evt.key) { + case "ArrowDown": + case "Down": + case "ArrowRight": + case "Right": + newHeader = this._nextHeader(); + break; + case "ArrowUp": + case "Up": + case "ArrowLeft": + case "Left": + newHeader = this._previousHeader(); + break; + case "Home": + newHeader = this._firstHeader(); + break; + case "End": + newHeader = this._lastHeader(); + break; + default: + return; + } + + if (newHeader) { + newHeader.shadowRoot.querySelector("button").focus(); + } + } + }, { + key: "_transitionEndHandler", + value: function _transitionEndHandler(evt) { + var header = evt.target.previousElementSibling; + if (header) header.classList.remove("animating"); + + evt.target.style.height = ""; + evt.target.classList.remove("animating"); + evt.target.removeEventListener("transitionend", this._transitionEndHandler); + } + }, { + key: "_allHeaders", + value: function _allHeaders() { + if (!this.isIE11) return [].concat(toConsumableArray(this.querySelectorAll(":scope > pfe-accordion-header")));else return this.children.filter(function (el) { + return el.tagName.toLowerCase() === "pfe-accordion-header"; + }); + } + }, { + key: "_allPanels", + value: function _allPanels() { + if (!this.isIE11) return [].concat(toConsumableArray(this.querySelectorAll(":scope > pfe-accordion-panel")));else return this.children.filter(function (el) { + return el.tagName.toLowerCase() === "pfe-accordion-panel"; + }); + } + }, { + key: "_panelForHeader", + value: function _panelForHeader(header) { + var next = header.nextElementSibling; + + if (!next) return; + + if (next.tagName.toLowerCase() !== PfeAccordionPanel.tag) { + this.error("Sibling element to a header needs to be a panel"); + return; + } + + return next; + } + }, { + key: "_previousHeader", + value: function _previousHeader() { + var headers = this._allHeaders(); + var newIndex = headers.findIndex(function (header) { + return header === document.activeElement; + }) - 1; + return headers[(newIndex + headers.length) % headers.length]; + } + }, { + key: "_nextHeader", + value: function _nextHeader() { + var headers = this._allHeaders(); + var newIndex = headers.findIndex(function (header) { + return header === document.activeElement; + }) + 1; + return headers[newIndex % headers.length]; + } + }, { + key: "_firstHeader", + value: function _firstHeader() { + var headers = this._allHeaders(); + return headers[0]; + } + }, { + key: "_lastHeader", + value: function _lastHeader() { + var headers = this._allHeaders(); + return headers[headers.length - 1]; + } + }, { + key: "_isHeader", + value: function _isHeader(element) { + return element.tagName.toLowerCase() === PfeAccordionHeader.tag; + } + }, { + key: "_isPanel", + value: function _isPanel(element) { + return element.tagName.toLowerCase() === PfeAccordionPanel.tag; + } + }, { + key: "_expandedIndexHandler", + value: function _expandedIndexHandler(oldVal, newVal) { + var _this6 = this; + + if (oldVal === newVal) return; + var indexes = newVal.split(",").map(function (idx) { + return parseInt(idx, 10) - 1; + }); + indexes.reverse().forEach(function (index) { + return _this6.expand(index); + }); + } + }, { + key: "_getIndex", + value: function _getIndex(_el) { + if (this._isHeader(_el)) { + var headers = this._allHeaders(); + return headers.findIndex(function (header) { + return header.id === _el.id; + }); + } + + if (this._isPanel(_el)) { + var panels = this._allPanels(); + return panels.findIndex(function (panel) { + return panel.id === _el.id; + }); + } + + this.warn("The _getIndex method expects to receive a header or panel element."); + return -1; + } + }, { + key: "_getIndexesFromURL", + value: function _getIndexesFromURL() { + // @IE11 doesn't support URLSearchParams + // https://caniuse.com/#search=urlsearchparams + if (!window.URLSearchParams) return []; + + // Capture the URL parameters + var urlParams = new URLSearchParams(window.location.search); + + // If parameters exist and they contain the ID for this accordion + if (urlParams && urlParams.has(this.id)) { + var params = urlParams.get(this.id); + // Split the parameters by underscore to see if more than 1 item is expanded + var indexes = params.split("-"); + if (indexes.length < 0) return []; + + // Clean up the results by converting to array count + return indexes.map(function (item) { + return parseInt(item.trim(), 10) - 1; + }); + } + } + + /** + * This handles updating the URL parameters based on the current state + * of the global this.expanded array + * @requires this.expandedSets {Array} + */ + + }, { + key: "_updateURLHistory", + value: function _updateURLHistory() { + // @IE11 doesn't support URLSearchParams + // https://caniuse.com/#search=urlsearchparams + if (!this.history || !this._updateHistory || !window.URLSearchParams) return; + + if (!this.id) { + this.error("The history feature cannot update the URL without an ID added to the pfe-accordion tag."); + return; + } + + // Capture the URL and rebuild it using the new state + var urlParams = new URLSearchParams(window.location.search); + // Iterate the expanded array by 1 to convert to human-readable vs. array notation; + // sort values numerically and connect them using a dash + var openIndexes = this.expandedSets.map(function (item) { + return item + 1; + }).sort(function (a, b) { + return a - b; + }).join("-"); + + // If values exist in the array, add them to the parameter string + if (this.expandedSets.length > 0) urlParams.set(this.id, openIndexes); + // Otherwise delete the set entirely + else urlParams.delete(this.id); + + // Note: Using replace state protects the user's back navigation + history.replaceState({}, "", "" + window.location.pathname + (urlParams ? "?" + urlParams.toString() : "") + window.location.hash); + } + + /** + * This captures the URL parameters and expands each item in the array + * @requires this._getIndexesFromURL {Method} + */ + + }, { + key: "_updateStateFromURL", + value: function _updateStateFromURL() { + var _this7 = this; + + var indexesFromURL = this._getIndexesFromURL() || []; + + this._updateHistory = false; + indexesFromURL.forEach(function (idx) { + return _this7.expand(idx); + }); + this._updateHistory = true; + } + }]); + return PfeAccordion; + }(PFElement); + + PFElement.create(PfeAccordionHeader); + PFElement.create(PfeAccordionPanel); + PFElement.create(PfeAccordion); + + return PfeAccordion; + +}))); +//# sourceMappingURL=pfe-accordion.umd.js.map diff --git a/elements/pfe-accordion/dist/pfe-accordion.umd.js.map b/elements/pfe-accordion/dist/pfe-accordion.umd.js.map new file mode 100644 index 0000000000..a7bde5e859 --- /dev/null +++ b/elements/pfe-accordion/dist/pfe-accordion.umd.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-accordion.umd.js","sources":["../_temp/polyfills--pfe-accordion.js","../_temp/pfe-accordion-header.js","../_temp/pfe-accordion-panel.js","../_temp/pfe-accordion.umd.js"],"sourcesContent":["// @POLYFILL Array.prototype.findIndex\n// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex\nif (!Array.prototype.findIndex) {\n Object.defineProperty(Array.prototype, \"findIndex\", {\n value: function (predicate) {\n // 1. Let O be ? ToObject(this value).\n if (this == null) {\n throw new TypeError('\"this\" is null or not defined');\n }\n\n var o = Object(this);\n\n // 2. Let len be ? ToLength(? Get(O, \"length\")).\n var len = o.length >>> 0;\n\n // 3. If IsCallable(predicate) is false, throw a TypeError exception.\n if (typeof predicate !== \"function\") {\n throw new TypeError(\"predicate must be a function\");\n }\n\n // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.\n var thisArg = arguments[1];\n\n // 5. Let k be 0.\n var k = 0;\n\n // 6. Repeat, while k < len\n while (k < len) {\n // a. Let Pk be ! ToString(k).\n // b. Let kValue be ? Get(O, Pk).\n // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).\n // d. If testResult is true, return k.\n var kValue = o[k];\n if (predicate.call(thisArg, kValue, k, o)) {\n return k;\n }\n // e. Increase k by 1.\n k++;\n }\n\n // 7. Return -1.\n return -1;\n },\n });\n}\n","/*!\n * PatternFly Elements: PfeAccordion 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement.js\";\nimport PfeIcon from \"../../pfe-icon/dist/pfe-icon.js\";\n\nclass PfeAccordionHeader extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n<${this.headingTag || \"h3\"} id=\"heading\">\n \n`;\n }\n\n static get tag() {\n return \"pfe-accordion-header\";\n }\n\n get styleUrl() {\n return \"pfe-accordion-header.scss\";\n }\n\n get templateUrl() {\n return \"pfe-accordion-header.html\";\n }\n\n // @TODO this is for navigation 1.0 updates\n // get isDirectLink() {\n // return this.hasAttribute(\"is-direct-link\");\n // }\n\n // get link() {\n // return this.querySelector(\"a[href]\");\n // }\n\n static get observer() {\n return {\n childList: true,\n };\n }\n\n static get properties() {\n return {\n _id: {\n type: String,\n default: (el) => `${el.randomId.replace(\"pfe\", el.tag)}`,\n prefix: false,\n },\n ariaControls: {\n type: String,\n prefix: false,\n },\n // @TODO Deprecated pfe-id in 1.0\n oldPfeId: {\n type: String,\n alias: \"_id\",\n attr: \"pfe-id\",\n },\n expanded: {\n title: \"Expanded\",\n type: Boolean,\n observer: \"_expandedChanged\",\n },\n };\n }\n\n static get events() {\n return {\n change: `pfe-accordion:change`,\n };\n }\n\n constructor() {\n super(PfeAccordionHeader);\n\n this._init = this._init.bind(this);\n this._clickHandler = this._clickHandler.bind(this);\n this._observer = new MutationObserver(this._init);\n this._slotObserver = new MutationObserver(this._init);\n\n this._getHeaderElement = this._getHeaderElement.bind(this);\n\n this.headingTag = \"h3\";\n\n this.addEventListener(\"click\", this._clickHandler);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n // Capture the button and the text\n this.button = this.shadowRoot.querySelector(`.pf-c-accordion__toggle`);\n this._buttonText = this.button.querySelector(`.pf-c-accordion__toggle-text`);\n\n if (this.hasLightDOM()) this._init();\n else {\n this._observer.observe(this, PfeAccordionHeader.observer);\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener(\"click\", this._clickHandler);\n this._observer.disconnect();\n }\n\n _init() {\n this._observer.disconnect();\n\n const header = this._getHeaderElement();\n\n if (header) {\n this.headingTag = header.tagName ? header.tagName.toLowerCase() : \"h3\";\n this.headingText = header.textContent ? header.textContent.trim() : \"\";\n }\n\n // Update button text\n this._buttonText.innerHTML = this.headingText;\n\n // Remove the hidden attribute after upgrade\n this.removeAttribute(\"hidden\");\n\n this._observer.observe(this, PfeAccordionHeader.observer);\n\n // @TODO this is for navigation 1.0 updates\n // Validate that headers with the `is-direct-link` attribute contain a link\n // if (this.isDirectLink && !this.link) {\n // this.warn(`This component expects to find a link in the light DOM due to the \"is-direct-link\" attribute`);\n // }\n }\n\n _getHeaderElement() {\n // Check if there is no nested element or nested textNodes\n if (!this.firstElementChild && !this.firstChild) {\n this.warn(`No header content provided`);\n return;\n }\n\n if (this.firstElementChild && this.firstElementChild.tagName) {\n const htags = this.fetchElement(\n this.children,\n (el) => el.tagName && (el.tagName.match(/^H[1-6]/) || el.tagName === \"P\"),\n this._slotObserver\n );\n\n // If there is no content inside the slot, return empty with a warning\n if (htags.length === 0) {\n this.warn(`No heading information was provided.`);\n return;\n }\n // If there is more than 1 element in the slot, capture the first h-tag\n else if (htags.length > 1) {\n this.warn(`Heading currently only supports 1 tag; extra tags will be ignored.`);\n return htags[0];\n } else return htags[0];\n } else {\n const htag = document.createElement(\"h3\");\n\n if (this.firstChild && this.firstChild.nodeType === \"#text\") {\n // If a text node was provided but no semantics, default to an h3\n htag.textContent = this.firstChild.textContent;\n } else {\n this.warn(`Header should contain at least 1 heading tag for correct semantics.`);\n\n // If incorrect semantics were used, create an H3 and try to capture the content\n htag.textContent = this.textContent;\n }\n\n return htag;\n }\n }\n\n _clickHandler(event) {\n this.emitEvent(PfeAccordionHeader.events.change, {\n detail: {\n expanded: !this.expanded,\n toggle: event.target,\n },\n });\n }\n\n _expandedChanged() {\n if (this.button) {\n this.button.setAttribute(\"aria-expanded\", this.expanded ? \"true\" : \"false\");\n }\n }\n\n /**\n * Provides a standard way of fetching light DOM that may or may not be provided inside\n * of a slot; optional filtering of results and way to pass in an observer if you need to\n * track updates to the slot\n * @param {NodeItem} el\n * @param {function} filter [optional] Filter for the returned results of the NodeList\n * @param {function} observer [optional] Pointer to the observer defined for that slot\n */\n fetchElement(els, filter, observer) {\n if (!els) return [];\n let nodes = [...els];\n\n // Parse the nodes for slotted content\n [...nodes]\n .filter((node) => node && node.tagName === \"SLOT\")\n .forEach((node) => {\n // Remove node from the list\n const idx = nodes.findIndex((item) => item === node);\n // Capture it's assigned nodes for validation\n let slotted = node.assignedNodes();\n // If slotted elements were found, add it to the nodeList\n if (slotted && slotted.length > 0) {\n // Remove the slot from the set, add the slotted content\n nodes.splice(idx, 1, ...slotted);\n } else {\n // If no content exists in the slot, check for default content in the slot template\n const defaults = node.children;\n if (defaults && defaults.length > 0) nodes[idx] = defaults[0];\n }\n\n // Attach the observer if provided to watch for updates to the slot\n // Useful if you are moving content from light DOM to shadow DOM\n if (typeof observer === \"function\") {\n observer.observer(node, PfeAccordionHeader.observer);\n }\n });\n\n if (typeof filter === \"function\") return nodes.filter(filter);\n else return nodes;\n }\n}\n\nexport default PfeAccordionHeader;\n","/*!\n * PatternFly Elements: PfeAccordion 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement.js\";\n\nclass PfeAccordionPanel extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n
      \n
      \n \n
      \n
      `;\n }\n\n static get tag() {\n return \"pfe-accordion-panel\";\n }\n\n get styleUrl() {\n return \"pfe-accordion-panel.scss\";\n }\n\n get templateUrl() {\n return \"pfe-accordion-panel.html\";\n }\n\n static get properties() {\n return {\n _id: {\n type: String,\n default: (el) => `${el.randomId.replace(\"pfe\", el.tag)}`,\n prefix: false,\n },\n role: {\n type: String,\n default: \"region\",\n prefix: false,\n },\n // @TODO Deprecated pfe-id in 1.0\n oldPfeId: {\n type: String,\n alias: \"_id\",\n attr: \"pfe-id\",\n },\n expanded: {\n title: \"Expanded\",\n type: Boolean,\n default: false,\n observer: \"_expandedChanged\"\n },\n ariaLabelledby: {\n type: String,\n prefix: false,\n },\n };\n }\n\n constructor() {\n super(PfeAccordionPanel);\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._expandedChanged();\n }\n\n _expandedChanged() {\n if (this.expanded) {\n this.removeAttribute(\"aria-hidden\");\n this.removeAttribute(\"tabindex\");\n } else {\n this.setAttribute(\"aria-hidden\", \"true\");\n this.setAttribute(\"tabindex\", \"-1\");\n }\n }\n}\n\nexport default PfeAccordionPanel;\n","/*!\n * PatternFly Elements: PfeAccordion 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\n// Import polyfills: findIndex\nimport \"./polyfills--pfe-accordion.js\";\n\nimport PFElement from \"../../pfelement/dist/pfelement\";\nimport PfeAccordionHeader from \"./pfe-accordion-header.js\";\nimport PfeAccordionPanel from \"./pfe-accordion-panel.js\";\n\nclass PfeAccordion extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n`;\n }\n\n static get tag() {\n return \"pfe-accordion\";\n }\n\n static get meta() {\n return {\n title: \"Accordion\",\n description: \"This element renders content sets in an expandable format.\",\n };\n }\n\n get styleUrl() {\n return \"pfe-accordion.scss\";\n }\n\n get templateUrl() {\n return \"pfe-accordion.html\";\n }\n\n static get properties() {\n return {\n disclosure: {\n // Leaving this as a string since it's an opt out\n title: \"Disclosure\",\n type: String,\n values: [\"true\", \"false\"],\n cascade: [\"pfe-accordion-header\", \"pfe-accordion-panel\"],\n },\n // @TODO: Deprecated pfe-disclosure in 1.0\n oldDisclosure: {\n type: String,\n alias: \"disclosure\",\n attr: \"pfe-disclosure\",\n },\n // Do not set a default of 0, it causes a the URL history to\n // be updated on load for every tab; infinite looping goodness\n // Seriously, don't set a default here unless you do a rewrite\n expandedIndex: {\n title: \"Expanded index(es)\",\n type: String,\n observer: \"_expandedIndexHandler\",\n },\n history: {\n title: \"History\",\n type: Boolean,\n default: false,\n observer: \"_historyHandler\",\n },\n };\n }\n\n static get slots() {\n return {\n default: {\n type: \"array\",\n namedSlot: false,\n items: {\n oneOf: [\n {\n $ref: \"pfe-accordion-header\",\n },\n {\n $ref: \"pfe-accordion-panel\",\n },\n ],\n },\n },\n };\n }\n\n static get events() {\n return {\n change: `${this.tag}:change`,\n expand: `${this.tag}:expand`,\n collapse: `${this.tag}:collapse`,\n };\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Container;\n }\n\n // Each set contains a header and a panel\n static get contentTemplate() {\n return `\n \n \n `;\n }\n\n constructor() {\n super(PfeAccordion, { type: PfeAccordion.PfeType });\n\n this._manualDisclosure = null;\n this._updateHistory = true;\n this.expandedSets = [];\n\n this._init = this._init.bind(this);\n this._observer = new MutationObserver(this._init);\n this._updateStateFromURL = this._updateStateFromURL.bind(this);\n this._getIndexesFromURL = this._getIndexesFromURL.bind(this);\n this._updateURLHistory = this._updateURLHistory.bind(this);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (this.hasLightDOM()) {\n this._manualDisclosure = this.getAttribute(\"disclosure\") || this.getAttribute(\"pfe-disclosure\");\n\n Promise.all([\n customElements.whenDefined(PfeAccordionHeader.tag),\n customElements.whenDefined(PfeAccordionPanel.tag),\n ]).then(this._init);\n }\n\n this.addEventListener(PfeAccordion.events.change, this._changeHandler);\n this.addEventListener(\"keydown\", this._keydownHandler);\n\n // Set up the observer on the child tree\n this._observer.observe(this, {\n childList: true,\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener(PfeAccordion.events.change, this._changeHandler);\n this.removeEventListener(\"keydown\", this._keydownHandler);\n this._observer.disconnect();\n\n window.removeEventListener(\"popstate\", this._updateStateFromURL);\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse.\n * @param {Number} index\n */\n toggle(index) {\n const headers = this._allHeaders();\n const header = headers[index];\n\n if (!header.expanded) this.expand(index);\n else this.collapse(index);\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to expand.\n * @param {Number} index\n */\n expand(_index) {\n if (_index === undefined || _index === null) return;\n\n // Ensure the input is a number\n const index = parseInt(_index, 10);\n\n // Get all the headers and capture the item by index value\n const headers = this._allHeaders();\n const header = headers[index];\n if (!header) return;\n\n const panel = this._panelForHeader(header);\n if (!header || !panel) return;\n\n // If the header and panel exist, open both\n this._expandHeader(header);\n this._expandPanel(panel);\n\n header.focus();\n\n this.emitEvent(PfeAccordion.events.expand, {\n detail: {\n toggle: header,\n panel: panel,\n },\n });\n }\n\n /**\n * Expands all accordion items.\n */\n expandAll() {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n\n headers.forEach((header) => this._expandHeader(header));\n panels.forEach((panel) => this._expandPanel(panel));\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to collapse.\n * @param {Number} index\n */\n collapse(index) {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n const header = headers[index];\n const panel = panels[index];\n\n if (!header || !panel) return;\n\n this._collapseHeader(header);\n this._collapsePanel(panel);\n\n this.emitEvent(PfeAccordion.events.collapse, {\n detail: {\n toggle: header,\n panel: panel,\n },\n });\n }\n\n /**\n * Collapses all accordion items.\n */\n collapseAll() {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n\n headers.forEach((header) => this._collapseHeader(header));\n panels.forEach((panel) => this._collapsePanel(panel));\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 _init() {\n const headers = this._allHeaders();\n // For each header in the accordion, attach the aria connections\n headers.forEach((header) => {\n const panel = this._panelForHeader(header);\n // Escape if no matching panel can be found\n if (!panel) return;\n\n header.ariaControls = panel._id;\n panel.ariaLabelledby = header._id;\n });\n\n // If disclosure was not set by the author, set up the defaults\n if (!this._manualDisclosure) {\n if (headers.length === 1) {\n this.disclosure = \"true\";\n } else if (headers.length > 1) {\n this.disclosure = \"false\";\n }\n }\n\n // Update state if params exist in the URL\n if (!this.isIE11) this._updateStateFromURL();\n }\n\n _changeHandler(evt) {\n if (this.classList.contains(\"animating\")) return;\n\n const index = this._getIndex(evt.target);\n\n if (evt.detail.expanded) this.expand(index);\n else this.collapse(index);\n\n this._updateURLHistory();\n }\n\n _historyHandler() {\n if (!this.history) window.removeEventListener(\"popstate\", this._updateStateFromURL);\n else window.addEventListener(\"popstate\", this._updateStateFromURL);\n }\n\n _expandHeader(header) {\n const index = this._getIndex(header);\n\n // If this index is not already listed in the expandedSets array, add it\n if (this.expandedSets.indexOf(index) < 0 && index > -1) this.expandedSets.push(index);\n\n header.expanded = true;\n }\n\n _expandPanel(panel) {\n if (!panel) {\n this.error(`Trying to expand a panel that doesn't exist.`);\n return;\n }\n\n if (panel.expanded) return;\n\n panel.expanded = true;\n\n const height = panel.getBoundingClientRect().height;\n this._animate(panel, 0, height);\n }\n\n _collapseHeader(header) {\n const index = this._getIndex(header);\n\n // If this index is exists in the expanded array, remove it\n let idx = this.expandedSets.indexOf(index);\n if (idx >= 0) this.expandedSets.splice(idx, 1);\n\n header.expanded = false;\n }\n\n _collapsePanel(panel) {\n if (!panel) {\n this.error(`Trying to collapse a panel that doesn't exist`);\n return;\n }\n\n if (!panel.expanded) return;\n\n const height = panel.getBoundingClientRect().height;\n panel.expanded = false;\n\n this._animate(panel, height, 0);\n }\n\n _animate(panel, start, end) {\n if (panel) {\n const header = panel.previousElementSibling;\n if (header) {\n header.classList.add(\"animating\");\n }\n panel.classList.add(\"animating\");\n panel.style.height = `${start}px`;\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n panel.style.height = `${end}px`;\n panel.addEventListener(\"transitionend\", this._transitionEndHandler);\n });\n });\n }\n }\n\n _keydownHandler(evt) {\n const currentHeader = evt.target;\n\n if (!(currentHeader instanceof customElements.get(PfeAccordionHeader.tag))) {\n return;\n }\n\n let newHeader;\n\n switch (evt.key) {\n case \"ArrowDown\":\n case \"Down\":\n case \"ArrowRight\":\n case \"Right\":\n newHeader = this._nextHeader();\n break;\n case \"ArrowUp\":\n case \"Up\":\n case \"ArrowLeft\":\n case \"Left\":\n newHeader = this._previousHeader();\n break;\n case \"Home\":\n newHeader = this._firstHeader();\n break;\n case \"End\":\n newHeader = this._lastHeader();\n break;\n default:\n return;\n }\n\n if (newHeader) {\n newHeader.shadowRoot.querySelector(\"button\").focus();\n }\n }\n\n _transitionEndHandler(evt) {\n const header = evt.target.previousElementSibling;\n if (header) header.classList.remove(\"animating\");\n\n evt.target.style.height = \"\";\n evt.target.classList.remove(\"animating\");\n evt.target.removeEventListener(\"transitionend\", this._transitionEndHandler);\n }\n\n _allHeaders() {\n if (!this.isIE11) return [...this.querySelectorAll(`:scope > pfe-accordion-header`)];\n else return this.children.filter((el) => el.tagName.toLowerCase() === \"pfe-accordion-header\");\n }\n\n _allPanels() {\n if (!this.isIE11) return [...this.querySelectorAll(`:scope > pfe-accordion-panel`)];\n else return this.children.filter((el) => el.tagName.toLowerCase() === \"pfe-accordion-panel\");\n }\n\n _panelForHeader(header) {\n const next = header.nextElementSibling;\n\n if (!next) return;\n\n if (next.tagName.toLowerCase() !== PfeAccordionPanel.tag) {\n this.error(`Sibling element to a header needs to be a panel`);\n return;\n }\n\n return next;\n }\n\n _previousHeader() {\n const headers = this._allHeaders();\n let newIndex = headers.findIndex((header) => header === document.activeElement) - 1;\n return headers[(newIndex + headers.length) % headers.length];\n }\n\n _nextHeader() {\n const headers = this._allHeaders();\n let newIndex = headers.findIndex((header) => header === document.activeElement) + 1;\n return headers[newIndex % headers.length];\n }\n\n _firstHeader() {\n const headers = this._allHeaders();\n return headers[0];\n }\n\n _lastHeader() {\n const headers = this._allHeaders();\n return headers[headers.length - 1];\n }\n\n _isHeader(element) {\n return element.tagName.toLowerCase() === PfeAccordionHeader.tag;\n }\n\n _isPanel(element) {\n return element.tagName.toLowerCase() === PfeAccordionPanel.tag;\n }\n\n _expandedIndexHandler(oldVal, newVal) {\n if (oldVal === newVal) return;\n const indexes = newVal.split(\",\").map((idx) => parseInt(idx, 10) - 1);\n indexes.reverse().forEach((index) => this.expand(index));\n }\n\n _getIndex(_el) {\n if (this._isHeader(_el)) {\n const headers = this._allHeaders();\n return headers.findIndex((header) => header.id === _el.id);\n }\n\n if (this._isPanel(_el)) {\n const panels = this._allPanels();\n return panels.findIndex((panel) => panel.id === _el.id);\n }\n\n this.warn(`The _getIndex method expects to receive a header or panel element.`);\n return -1;\n }\n\n _getIndexesFromURL() {\n // @IE11 doesn't support URLSearchParams\n // https://caniuse.com/#search=urlsearchparams\n if (!window.URLSearchParams) return [];\n\n // Capture the URL parameters\n const urlParams = new URLSearchParams(window.location.search);\n\n // If parameters exist and they contain the ID for this accordion\n if (urlParams && urlParams.has(this.id)) {\n const params = urlParams.get(this.id);\n // Split the parameters by underscore to see if more than 1 item is expanded\n const indexes = params.split(\"-\");\n if (indexes.length < 0) return [];\n\n // Clean up the results by converting to array count\n return indexes.map((item) => parseInt(item.trim(), 10) - 1);\n }\n }\n\n /**\n * This handles updating the URL parameters based on the current state\n * of the global this.expanded array\n * @requires this.expandedSets {Array}\n */\n _updateURLHistory() {\n // @IE11 doesn't support URLSearchParams\n // https://caniuse.com/#search=urlsearchparams\n if (!this.history || !this._updateHistory || !window.URLSearchParams) return;\n\n if (!this.id) {\n this.error(`The history feature cannot update the URL without an ID added to the pfe-accordion tag.`);\n return;\n }\n\n // Capture the URL and rebuild it using the new state\n const urlParams = new URLSearchParams(window.location.search);\n // Iterate the expanded array by 1 to convert to human-readable vs. array notation;\n // sort values numerically and connect them using a dash\n const openIndexes = this.expandedSets\n .map((item) => item + 1)\n .sort((a, b) => a - b)\n .join(\"-\");\n\n // If values exist in the array, add them to the parameter string\n if (this.expandedSets.length > 0) urlParams.set(this.id, openIndexes);\n // Otherwise delete the set entirely\n else urlParams.delete(this.id);\n\n // Note: Using replace state protects the user's back navigation\n history.replaceState(\n {},\n \"\",\n `${window.location.pathname}${urlParams ? `?${urlParams.toString()}` : \"\"}${window.location.hash}`\n );\n }\n\n /**\n * This captures the URL parameters and expands each item in the array\n * @requires this._getIndexesFromURL {Method}\n */\n _updateStateFromURL() {\n const indexesFromURL = this._getIndexesFromURL() || [];\n\n this._updateHistory = false;\n indexesFromURL.forEach((idx) => this.expand(idx));\n this._updateHistory = true;\n }\n}\n\nPFElement.create(PfeAccordionHeader);\nPFElement.create(PfeAccordionPanel);\nPFElement.create(PfeAccordion);\n\nexport { PfeAccordion as default };\n"],"names":["Array","prototype","findIndex","Object","defineProperty","value","predicate","TypeError","o","len","length","thisArg","arguments","k","kValue","call","PfeAccordionHeader","headingTag","expanded","headingText","hasSlot","childList","_id","type","String","default","el","randomId","replace","tag","prefix","ariaControls","oldPfeId","alias","attr","title","Boolean","observer","change","_init","bind","_clickHandler","_observer","MutationObserver","_slotObserver","_getHeaderElement","addEventListener","button","shadowRoot","querySelector","_buttonText","hasLightDOM","observe","removeEventListener","disconnect","header","tagName","toLowerCase","textContent","trim","innerHTML","removeAttribute","firstElementChild","firstChild","warn","htags","fetchElement","children","match","htag","document","createElement","nodeType","event","emitEvent","events","detail","toggle","target","setAttribute","els","filter","nodes","node","forEach","idx","item","slotted","assignedNodes","splice","defaults","PFElement","PfeAccordionPanel","role","ariaLabelledby","_expandedChanged","PfeAccordion","description","disclosure","values","cascade","oldDisclosure","expandedIndex","history","namedSlot","items","oneOf","$ref","expand","collapse","PfeTypes","Container","PfeType","_manualDisclosure","_updateHistory","expandedSets","_updateStateFromURL","_getIndexesFromURL","_updateURLHistory","getAttribute","Promise","all","customElements","whenDefined","then","_changeHandler","_keydownHandler","window","index","headers","_allHeaders","_index","undefined","parseInt","panel","_panelForHeader","_expandHeader","_expandPanel","focus","panels","_allPanels","_collapseHeader","_collapsePanel","isIE11","evt","classList","contains","_getIndex","indexOf","push","error","height","getBoundingClientRect","_animate","start","end","previousElementSibling","add","style","requestAnimationFrame","_transitionEndHandler","currentHeader","get","newHeader","key","_nextHeader","_previousHeader","_firstHeader","_lastHeader","remove","querySelectorAll","next","nextElementSibling","newIndex","activeElement","element","oldVal","newVal","indexes","split","map","reverse","_el","_isHeader","id","_isPanel","URLSearchParams","urlParams","location","search","has","params","openIndexes","sort","a","b","join","set","delete","replaceState","pathname","toString","hash","indexesFromURL","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-accordion/dist/pfe-accordion.umd.min.js b/elements/pfe-accordion/dist/pfe-accordion.umd.min.js new file mode 100644 index 0000000000..65061f4ff2 --- /dev/null +++ b/elements/pfe-accordion/dist/pfe-accordion.umd.min.js @@ -0,0 +1,2 @@ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("../../pfelement/dist/pfelement.umd.min"),require("../../pfe-icon/dist/pfe-icon.umd.min")):"function"==typeof define&&define.amd?define(["../../pfelement/dist/pfelement.umd.min","../../pfe-icon/dist/pfe-icon.umd.min"],t):(e=e||self).PfeAccordion=t(e.PFElement,e.PfeIcon)}(this,function(e,t){"use strict";e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e,t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t,Array.prototype.findIndex||Object.defineProperty(Array.prototype,"findIndex",{value:function(e){if(null==this)throw new TypeError('"this" is null or not defined');var t=Object(this),o=t.length>>>0;if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var a=arguments[1],n=0;n@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){.pf-c-accordion__toggle{background-color:#fff!important;color:#151515!important}}:host{position:relative;display:block;outline:0;background-color:transparent;background-color:var(--pfe-accordion--BackgroundColor,transparent);color:#3c3f42;color:var(--pfe-accordion--Color,var(--pfe-broadcasted--text,#3c3f42));-webkit-box-shadow:0 5px 4px transparent;box-shadow:0 5px 4px transparent;-webkit-box-shadow:var(--pfe-accordion--BoxShadow,0 5px 4px transparent);box-shadow:var(--pfe-accordion--BoxShadow,0 5px 4px transparent);--pfe-icon--color:var(--pfe-accordion--Color, var(--pfe-broadcasted--text, #3c3f42));--pfe-icon--size:14px}:host([hidden]){display:none}:host *,:host ::after,:host ::before{-webkit-box-sizing:border-box;box-sizing:border-box}#heading{margin:0}.pf-c-accordion__toggle{cursor:pointer;outline:0;position:relative;width:100%;margin:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;gap:calc(1rem * 1.5);gap:calc(var(--pfe-theme--container-padding,1rem) * 1.5);padding:1rem calc(1rem * 1.5);padding:var(--pfe-accordion--Padding,var(--pfe-theme--container-padding,1rem) calc(var(--pfe-theme--container-padding,1rem) * 1.5));background-color:transparent;color:#3c3f42;color:var(--pfe-accordion--Color,var(--pfe-broadcasted--text,#3c3f42));text-align:left;font-family:"Red Hat Display",RedHatDisplay,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family--heading, "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif);font-size:1.25rem;font-size:var(--pfe-accordion--FontSize--header,var(--pf-global--FontSize--xl,1.25rem));font-weight:400;font-weight:var(--pfe-accordion--FontWeight--header,var(--pfe-theme--font-weight--normal,400));text-align:left;text-align:var(--pfe-accordion--TextAlign,left);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5);--_typography-offset:calc((1em * var(--pfe-theme--line-height, 1.5) - 1em) / 2);border-style:solid;border-style:var(--pfe-theme--surface--border-style,solid);border-width:1px;border-width:var(--pfe-accordion--BorderWidth,var(--pfe-theme--surface--border-width,1px));border-color:#d2d2d2;border-color:var(--pfe-accordion--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2));border-right-color:transparent;border-left-color:transparent}.pf-c-accordion__toggle::before{position:absolute;content:"";top:-2px;left:-2px;width:calc(100% + 3px);width:calc(100% + var(--pfe-theme--ui--border-width--active,3px));height:calc(100% + 3px);height:calc(100% + var(--pfe-theme--ui--border-width--active,3px));border-radius:2px;border-radius:var(--pfe-theme--ui--border-radius,2px);border:2px solid transparent;border:var(--pfe-theme--ui--border-width--md,2px) var(--pfe-theme--ui--border-style,solid) transparent}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){.pf-c-accordion__toggle::before{height:100%}}.pf-c-accordion__toggle:focus::before{border-color:#6b9ff0}.pf-c-accordion__toggle:focus:not(:focus-visible)::before{border:unset}.pf-c-accordion__toggle .pf-c-accordion__toggle-icon{--_typography-offset:calc((1em * var(--pfe-theme--line-height, 1.5) - var(--pfe-icon--size, 14px)) / 2)}.pf-c-accordion__toggle .pf-c-accordion__toggle-text{margin-top:calc(-1 * 5px);margin-top:calc(-1 * var(--_typography-offset,5px));margin-bottom:calc(-1 * 5px);margin-bottom:calc(-1 * var(--_typography-offset,5px))}.pf-c-accordion__toggle .pf-c-accordion__toggle-icon{margin-top:calc(5px / 4);margin-top:calc(var(--_typography-offset,5px)/ 4)}:host(:not(:first-of-type)) .pf-c-accordion__toggle{border-top-width:0}.pf-c-accordion__toggle::after{position:absolute;content:"";top:-1px;left:-1px;bottom:-1px;background-color:transparent;background-color:var(--pfe-accordion--accent,transparent);width:calc(3px - -1px);width:calc(var(--pfe-accordion--accent--width,var(--pfe-theme--surface--border-width--active,3px)) - -1px);height:calc(100% - -1px - -1px);z-index:4;z-index:calc(3 + 1);z-index:calc(var(--pfe-accordion--ZIndex,3) + 1)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){.pf-c-accordion__toggle::after:active,.pf-c-accordion__toggle::after:hover,:host(.animating) .pf-c-accordion__toggle::after,:host(:not([expanded])) .pf-c-accordion__toggle::after:focus,:host([expanded]) .pf-c-accordion__toggle::after{background-color:#06c;background-color:var(--pfe-theme--color--ui-accent,#06c)}}.pf-c-accordion__toggle:active,.pf-c-accordion__toggle:hover,:host(:not([expanded])) .pf-c-accordion__toggle:focus{--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--active, var(--pfe-theme--color--surface--lighter, #f0f0f0));--pfe-accordion--Color:var(--pfe-accordion--Color--active, var(--pfe-broadcasted--text, #3c3f42))}:host(:not([expanded])) .pf-c-accordion__toggle:active,:host(:not([expanded])) .pf-c-accordion__toggle:focus,:host(:not([expanded])) .pf-c-accordion__toggle:hover{--pfe-accordion--accent:var(--pfe-accordion--accent--active, var(--pfe-theme--color--ui-accent, #06c))}:host([on=dark]) .pf-c-accordion__toggle:active,:host([on=dark]) .pf-c-accordion__toggle:hover,:host([on=dark]:not([expanded])) .pf-c-accordion__toggle:focus{--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--active, rgba(247, 247, 249, 0.1));--pfe-accordion--Color:var(--pfe-accordion--Color--active, var(--pfe-broadcasted--text, #3c3f42))}:host([on=dark]:not([expanded])) .pf-c-accordion__toggle:active,:host([on=dark]:not([expanded])) .pf-c-accordion__toggle:focus,:host([on=dark]:not([expanded])) .pf-c-accordion__toggle:hover{--pfe-accordion--accent:var(--pfe-accordion--accent--active, var(--pfe-theme--color--ui-accent--on-dark, #73bcf7))}:host([on=saturated]) .pf-c-accordion__toggle:active,:host([on=saturated]) .pf-c-accordion__toggle:hover,:host([on=saturated]:not([expanded])) .pf-c-accordion__toggle:focus{--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--active, rgba(0, 0, 0, 0.2));--pfe-accordion--Color:var(--pfe-accordion--Color--active, var(--pfe-broadcasted--text, #3c3f42))}:host([on=saturated]:not([expanded])) .pf-c-accordion__toggle:active,:host([on=saturated]:not([expanded])) .pf-c-accordion__toggle:focus,:host([on=saturated]:not([expanded])) .pf-c-accordion__toggle:hover{--pfe-accordion--accent:var(--pfe-accordion--accent--active, var(--pfe-theme--color--ui-accent--on-saturated, #fff))}:host(.animating) .pf-c-accordion__toggle,:host([expanded]) .pf-c-accordion__toggle{border-bottom-width:0}:host(.animating) .pf-c-accordion__toggle,:host([disclosure]:not([disclosure=false])) .pf-c-accordion__toggle,:host([expanded]) .pf-c-accordion__toggle{border-right-color:#d2d2d2;border-right-color:var(--pfe-accordion--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2));border-left-color:#d2d2d2;border-left-color:var(--pfe-accordion--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2))}:host([disclosure]:not([disclosure=false])) .pf-c-accordion__toggle{gap:calc(1rem / 2);gap:calc(var(--pfe-theme--container-padding,1rem)/ 2);font-family:"Red Hat Text",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);font-size:1rem;font-size:var(--pfe-accordion--FontSize--header,var(--pf-global--FontSize--md,1rem));font-weight:600;font-weight:var(--pfe-accordion--FontWeight--header,var(--pfe-theme--font-weight--semi-bold,600))}.pf-c-accordion__toggle-wrapper{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;gap:calc(1rem * 1.5);gap:calc(var(--pfe-theme--container-padding,1rem) * 1.5)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){.pf-c-accordion__toggle-wrapper::after{content:"";position:absolute;top:calc(1rem + 14px);top:calc(var(--pfe-theme--container-spacer,1rem) + 14px);display:block;border-style:solid;border-style:var(--pfe-theme--surface--border-style,solid);height:14px;width:14px;-webkit-transition:-webkit-transform .15s;transition:-webkit-transform .15s;transition:transform .15s;transition:transform .15s,-webkit-transform .15s;border-width:0 2px 2px 0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);right:calc(1rem * 1.3125);right:calc(var(--pfe-theme--container-spacer,1rem) * 1.3125);top:1em!important}:host(.animating) .pf-c-accordion__toggle-wrapper::after,:host([expanded]) .pf-c-accordion__toggle-wrapper::after{-webkit-transform:rotate(45deg);transform:rotate(45deg)}}.pf-c-accordion__toggle-text{max-width:80ch;max-width:var(--pfe-accordion--MaxWidth--content,80ch)}.pf-c-accordion__toggle-icon{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-duration:var(--pfe-theme--animation-speed,.3s);transition-duration:var(--pfe-theme--animation-speed,.3s);-webkit-transition-timing-function:cubic-bezier(.465,.183,.153,.946);transition-timing-function:cubic-bezier(.465,.183,.153,.946);-webkit-transition-timing-function:var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition-timing-function:var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946))}:host([expanded]) .pf-c-accordion__toggle-icon{-webkit-transform:rotate(90deg);transform:rotate(90deg)}:host([disclosure]:not([disclosure=false])) .pf-c-accordion__toggle-icon{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){.pf-c-accordion__toggle-icon{display:none!important}}.pf-c-accordion__toggle-accents{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}:host{-webkit-transition-property:border,-webkit-box-shadow;transition-property:border,-webkit-box-shadow;transition-property:box-shadow,border;transition-property:box-shadow,border,-webkit-box-shadow;-webkit-transition-timing-function:cubic-bezier(.465,.183,.153,.946);transition-timing-function:cubic-bezier(.465,.183,.153,.946);-webkit-transition-timing-function:var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition-timing-function:var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));-webkit-transition-duration:calc(pfe-var(animation-speed)/ 2);transition-duration:calc(pfe-var(animation-speed)/ 2)}:host(.animating),:host([expanded]){--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--expanded, var(--pfe-theme--color--surface--lightest, #fff));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text, #3c3f42));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent, #06c))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, 0 5px 4px rgba(140, 140, 140, 0.35))}:host([on=dark].animating),:host([on=dark][expanded]){--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--expanded, rgba(247, 247, 249, 0.1));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-dark, #fff));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-dark, #73bcf7))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, none)}:host([on=saturated].animating),:host([on=saturated][expanded]){--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--expanded, rgba(0, 0, 0, 0.2));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-saturated, #fff));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-saturated, #fff))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, none)} /*# sourceMappingURL=pfe-accordion-header.min.css.map */\n<'+(this.headingTag||"h3")+' id="heading">\n \n"}},{key:"styleUrl",get:function(){return"pfe-accordion-header.scss"}},{key:"templateUrl",get:function(){return"pfe-accordion-header.html"}}],[{key:"version",get:function(){return"1.12.3"}},{key:"tag",get:function(){return"pfe-accordion-header"}},{key:"observer",get:function(){return{childList:!0}}},{key:"properties",get:function(){return{_id:{type:String,default:function(e){return""+e.randomId.replace("pfe",e.tag)},prefix:!1},ariaControls:{type:String,prefix:!1},oldPfeId:{type:String,alias:"_id",attr:"pfe-id"},expanded:{title:"Expanded",type:Boolean,observer:"_expandedChanged"}}}},{key:"events",get:function(){return{change:"pfe-accordion:change"}}}]),a(s,[{key:"connectedCallback",value:function(){r(s.prototype.__proto__||Object.getPrototypeOf(s.prototype),"connectedCallback",this).call(this),this.button=this.shadowRoot.querySelector(".pf-c-accordion__toggle"),this._buttonText=this.button.querySelector(".pf-c-accordion__toggle-text"),this.hasLightDOM()?this._init():this._observer.observe(this,s.observer)}},{key:"disconnectedCallback",value:function(){r(s.prototype.__proto__||Object.getPrototypeOf(s.prototype),"disconnectedCallback",this).call(this),this.removeEventListener("click",this._clickHandler),this._observer.disconnect()}},{key:"_init",value:function(){this._observer.disconnect();var e=this._getHeaderElement();e&&(this.headingTag=e.tagName?e.tagName.toLowerCase():"h3",this.headingText=e.textContent?e.textContent.trim():""),this._buttonText.innerHTML=this.headingText,this.removeAttribute("hidden"),this._observer.observe(this,s.observer)}},{key:"_getHeaderElement",value:function(){if(this.firstElementChild||this.firstChild){if(!this.firstElementChild||!this.firstElementChild.tagName){var e=document.createElement("h3");return this.firstChild&&"#text"===this.firstChild.nodeType?e.textContent=this.firstChild.textContent:(this.warn("Header should contain at least 1 heading tag for correct semantics."),e.textContent=this.textContent),e}e=this.fetchElement(this.children,function(e){return e.tagName&&(e.tagName.match(/^H[1-6]/)||"P"===e.tagName)},this._slotObserver);if(0!==e.length)return 1:host{display:none;overflow:hidden;will-change:height}:host([expanded]){display:block;position:relative}:host(.animating){display:block;-webkit-transition:height .3s ease-in-out;transition:height .3s ease-in-out}.pf-c-accordion__expanded-content{position:relative;display:block;width:100%;padding:1rem;padding:var(--pfe-theme--container-padding,1rem)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{background-color:#fff!important;color:#151515!important}}:host{display:block;position:relative;-webkit-transition:height .3s cubic-bezier(.465,.183,.153,.946);transition:height .3s cubic-bezier(.465,.183,.153,.946);-webkit-transition:height var(--pfe-theme--animation-speed,.3s) var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition:height var(--pfe-theme--animation-speed,.3s) var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));will-change:height;overflow-y:clip;height:0;width:100%;z-index:0;margin:0;padding:0;background-color:transparent;background-color:var(--pfe-accordion--BackgroundColor,transparent);color:#3c3f42;color:var(--pfe-accordion--Color,var(--pfe-broadcasted--text,#3c3f42));-webkit-box-shadow:0 5px 4px transparent;box-shadow:0 5px 4px transparent;-webkit-box-shadow:var(--pfe-accordion--BoxShadow,0 5px 4px transparent);box-shadow:var(--pfe-accordion--BoxShadow,0 5px 4px transparent);-webkit-box-sizing:border-box;box-sizing:border-box;border-style:solid;border-style:var(--pfe-theme--surface--border-style,solid);border-color:#d2d2d2;border-color:var(--pfe-accordion--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2));border-width:1px;border-width:var(--pfe-accordion--BorderWidth,var(--pfe-theme--surface--border-width,1px));border-top-width:0;border-bottom-width:0}:host *,:host ::after,:host ::before{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::slotted(*){--pfe-accordion--BoxShadow:none}:host::after{position:absolute;content:"";bottom:calc(-1 * 1px);bottom:calc(-1 * var(--pfe-accordion--BorderWidth,var(--pfe-theme--surface--border-width,1px)));left:calc(-1 * 1px);left:calc(-1 * var(--pfe-accordion--BorderWidth,var(--pfe-theme--surface--border-width,1px)));background-color:transparent;background-color:var(--pfe-accordion--accent,transparent);width:calc(3px - calc(-1 * 1px));width:calc(var(--pfe-accordion--accent--width,var(--pfe-theme--surface--border-width--active,3px)) - calc(-1 * var(--pfe-accordion--BorderWidth,var(--pfe-theme--surface--border-width,1px))));height:calc(100% - calc(-1 * 1px));height:calc(100% - calc(-1 * var(--pfe-accordion--BorderWidth,var(--pfe-theme--surface--border-width,1px))));z-index:calc(3 + 1);z-index:calc(var(--pfe-accordion--ZIndex,3) + 1)}.pf-c-accordion__expanded-content{display:inline-block;padding:1rem calc(1rem * 1.5);padding:var(--pfe-accordion--Padding,var(--pfe-theme--container-padding,1rem) calc(var(--pfe-theme--container-padding,1rem) * 1.5))}.pf-c-accordion__expanded-content::after{clear:both;content:"";display:table}:host([disclosure=true]) .pf-c-accordion__expanded-content{padding:0 calc(1rem * 3) calc(1rem) calc(1rem * 1.5);padding:var(--pfe-accordion__panel-container--Padding,0 calc(var(--pfe-theme--container-padding,1rem) * 3) calc(var(--pfe-theme--container-padding,1rem)) calc(var(--pfe-theme--container-padding,1rem) * 1.5))}:host(:not([full-width])) .pf-c-accordion__expanded-content{max-width:80ch;max-width:var(--pfe-accordion--MaxWidth--content,80ch)}:host(.animating){border-left-color:transparent;border-left-color:var(--pfe-accordion--accent,transparent)}:host([expanded]:not(.animating)){overflow:visible;margin-bottom:0;border-bottom-width:1px;border-bottom-width:var(--pfe-accordion--BorderWidth,var(--pfe-theme--surface--border-width,1px));opacity:1;height:auto}:host{-webkit-transition-property:border,-webkit-box-shadow;transition-property:border,-webkit-box-shadow;transition-property:box-shadow,border;transition-property:box-shadow,border,-webkit-box-shadow;-webkit-transition-timing-function:cubic-bezier(.465,.183,.153,.946);transition-timing-function:cubic-bezier(.465,.183,.153,.946);-webkit-transition-timing-function:var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition-timing-function:var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));-webkit-transition-duration:calc(pfe-var(animation-speed)/ 2);transition-duration:calc(pfe-var(animation-speed)/ 2)}:host(.animating),:host([expanded]){--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--expanded, var(--pfe-theme--color--surface--lightest, #fff));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text, #3c3f42));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent, #06c))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, 0 5px 4px rgba(140, 140, 140, 0.35))}:host([on=dark].animating),:host([on=dark][expanded]){--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--expanded, rgba(247, 247, 249, 0.1));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-dark, #fff));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-dark, #73bcf7))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, none)}:host([on=saturated].animating),:host([on=saturated][expanded]){--pfe-accordion--BackgroundColor:var(--pfe-accordion--BackgroundColor--expanded, rgba(0, 0, 0, 0.2));--pfe-accordion--Color:var(--pfe-accordion--Color--expanded, var(--pfe-broadcasted--text--on-saturated, #fff));--pfe-accordion--accent:var(--pfe-accordion--accent--expanded, var(--pfe-theme--color--ui-accent--on-saturated, #fff))}:host([expanded]:not(.animating)){--pfe-accordion--BoxShadow:var(--pfe-accordion--BoxShadow--expanded, none)} /*# sourceMappingURL=pfe-accordion-panel.min.css.map */\n
      \n
      \n \n
      \n
      '}},{key:"styleUrl",get:function(){return"pfe-accordion-panel.scss"}},{key:"templateUrl",get:function(){return"pfe-accordion-panel.html"}}],[{key:"version",get:function(){return"1.12.3"}},{key:"tag",get:function(){return"pfe-accordion-panel"}},{key:"properties",get:function(){return{_id:{type:String,default:function(e){return""+e.randomId.replace("pfe",e.tag)},prefix:!1},role:{type:String,default:"region",prefix:!1},oldPfeId:{type:String,alias:"_id",attr:"pfe-id"},expanded:{title:"Expanded",type:Boolean,default:!1,observer:"_expandedChanged"},ariaLabelledby:{type:String,prefix:!1}}}}]),a(l,[{key:"connectedCallback",value:function(){r(l.prototype.__proto__||Object.getPrototypeOf(l.prototype),"connectedCallback",this).call(this),this._expandedChanged()}},{key:"_expandedChanged",value:function(){this.expanded?(this.removeAttribute("aria-hidden"),this.removeAttribute("tabindex")):(this.setAttribute("aria-hidden","true"),this.setAttribute("tabindex","-1"))}}]),l);function l(){return o(this,l),c(this,(l.__proto__||Object.getPrototypeOf(l)).call(this,l))}t(f,e),a(f,[{key:"html",get:function(){return"\n\n"}},{key:"styleUrl",get:function(){return"pfe-accordion.scss"}},{key:"templateUrl",get:function(){return"pfe-accordion.html"}}],[{key:"version",get:function(){return"1.12.3"}},{key:"tag",get:function(){return"pfe-accordion"}},{key:"meta",get:function(){return{title:"Accordion",description:"This element renders content sets in an expandable format."}}},{key:"properties",get:function(){return{disclosure:{title:"Disclosure",type:String,values:["true","false"],cascade:["pfe-accordion-header","pfe-accordion-panel"]},oldDisclosure:{type:String,alias:"disclosure",attr:"pfe-disclosure"},expandedIndex:{title:"Expanded index(es)",type:String,observer:"_expandedIndexHandler"},history:{title:"History",type:Boolean,default:!1,observer:"_historyHandler"}}}},{key:"slots",get:function(){return{default:{type:"array",namedSlot:!1,items:{oneOf:[{$ref:"pfe-accordion-header"},{$ref:"pfe-accordion-panel"}]}}}}},{key:"events",get:function(){return{change:this.tag+":change",expand:this.tag+":expand",collapse:this.tag+":collapse"}}},{key:"PfeType",get:function(){return e.PfeTypes.Container}},{key:"contentTemplate",get:function(){return'\n \n \n '}}]),a(f,[{key:"connectedCallback",value:function(){r(f.prototype.__proto__||Object.getPrototypeOf(f.prototype),"connectedCallback",this).call(this),this.hasLightDOM()&&(this._manualDisclosure=this.getAttribute("disclosure")||this.getAttribute("pfe-disclosure"),Promise.all([customElements.whenDefined(d.tag),customElements.whenDefined(p.tag)]).then(this._init)),this.addEventListener(f.events.change,this._changeHandler),this.addEventListener("keydown",this._keydownHandler),this._observer.observe(this,{childList:!0})}},{key:"disconnectedCallback",value:function(){r(f.prototype.__proto__||Object.getPrototypeOf(f.prototype),"disconnectedCallback",this).call(this),this.removeEventListener(f.events.change,this._changeHandler),this.removeEventListener("keydown",this._keydownHandler),this._observer.disconnect(),window.removeEventListener("popstate",this._updateStateFromURL)}},{key:"toggle",value:function(e){this._allHeaders()[e].expanded?this.collapse(e):this.expand(e)}},{key:"expand",value:function(e){var t;null!=e&&(t=parseInt(e,10),(e=this._allHeaders()[t])&&(t=this._panelForHeader(e),e&&t&&(this._expandHeader(e),this._expandPanel(t),e.focus(),this.emitEvent(f.events.expand,{detail:{toggle:e,panel:t}}))))}},{key:"expandAll",value:function(){var t=this,e=this._allHeaders(),o=this._allPanels();e.forEach(function(e){return t._expandHeader(e)}),o.forEach(function(e){return t._expandPanel(e)})}},{key:"collapse",value:function(e){var t=this._allHeaders(),o=this._allPanels(),t=t[e],e=o[e];t&&e&&(this._collapseHeader(t),this._collapsePanel(e),this.emitEvent(f.events.collapse,{detail:{toggle:t,panel:e}}))}},{key:"collapseAll",value:function(){var t=this,e=this._allHeaders(),o=this._allPanels();e.forEach(function(e){return t._collapseHeader(e)}),o.forEach(function(e){return t._collapsePanel(e)})}},{key:"_init",value:function(){var o=this,e=this._allHeaders();e.forEach(function(e){var t=o._panelForHeader(e);t&&(e.ariaControls=t._id,t.ariaLabelledby=e._id)}),this._manualDisclosure||(1===e.length?this.disclosure="true":1 pfe-accordion-header")))}},{key:"_allPanels",value:function(){return this.isIE11?this.children.filter(function(e){return"pfe-accordion-panel"===e.tagName.toLowerCase()}):[].concat(i(this.querySelectorAll(":scope > pfe-accordion-panel")))}},{key:"_panelForHeader",value:function(e){e=e.nextElementSibling;if(e){if(e.tagName.toLowerCase()===p.tag)return e;this.error("Sibling element to a header needs to be a panel")}}},{key:"_previousHeader",value:function(){var e=this._allHeaders(),t=e.findIndex(function(e){return e===document.activeElement})-1;return e[(t+e.length)%e.length]}},{key:"_nextHeader",value:function(){var e=this._allHeaders(),t=e.findIndex(function(e){return e===document.activeElement})+1;return e[t%e.length]}},{key:"_firstHeader",value:function(){return this._allHeaders()[0]}},{key:"_lastHeader",value:function(){var e=this._allHeaders();return e[e.length-1]}},{key:"_isHeader",value:function(e){return e.tagName.toLowerCase()===d.tag}},{key:"_isPanel",value:function(e){return e.tagName.toLowerCase()===p.tag}},{key:"_expandedIndexHandler",value:function(e,t){var o=this;e!==t&&t.split(",").map(function(e){return parseInt(e,10)-1}).reverse().forEach(function(e){return o.expand(e)})}},{key:"_getIndex",value:function(t){return this._isHeader(t)?this._allHeaders().findIndex(function(e){return e.id===t.id}):this._isPanel(t)?this._allPanels().findIndex(function(e){return e.id===t.id}):(this.warn("The _getIndex method expects to receive a header or panel element."),-1)}},{key:"_getIndexesFromURL",value:function(){if(!window.URLSearchParams)return[];var e=new URLSearchParams(window.location.search);if(e&&e.has(this.id)){e=e.get(this.id).split("-");return e.length<0?[]:e.map(function(e){return parseInt(e.trim(),10)-1})}}},{key:"_updateURLHistory",value:function(){var e,t;this.history&&this._updateHistory&&window.URLSearchParams&&(this.id?(e=new URLSearchParams(window.location.search),t=this.expandedSets.map(function(e){return e+1}).sort(function(e,t){return e-t}).join("-"),0>> 0;\n\n // 3. If IsCallable(predicate) is false, throw a TypeError exception.\n if (typeof predicate !== \"function\") {\n throw new TypeError(\"predicate must be a function\");\n }\n\n // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.\n var thisArg = arguments[1];\n\n // 5. Let k be 0.\n var k = 0;\n\n // 6. Repeat, while k < len\n while (k < len) {\n // a. Let Pk be ! ToString(k).\n // b. Let kValue be ? Get(O, Pk).\n // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).\n // d. If testResult is true, return k.\n var kValue = o[k];\n if (predicate.call(thisArg, kValue, k, o)) {\n return k;\n }\n // e. Increase k by 1.\n k++;\n }\n\n // 7. Return -1.\n return -1;\n },\n });\n}\n","/*!\n * PatternFly Elements: PfeAccordion 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement.js\";\nimport PfeIcon from \"../../pfe-icon/dist/pfe-icon.js\";\n\nclass PfeAccordionHeader extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n<${this.headingTag || \"h3\"} id=\"heading\">\n \n`;\n }\n\n static get tag() {\n return \"pfe-accordion-header\";\n }\n\n get styleUrl() {\n return \"pfe-accordion-header.scss\";\n }\n\n get templateUrl() {\n return \"pfe-accordion-header.html\";\n }\n\n // @TODO this is for navigation 1.0 updates\n // get isDirectLink() {\n // return this.hasAttribute(\"is-direct-link\");\n // }\n\n // get link() {\n // return this.querySelector(\"a[href]\");\n // }\n\n static get observer() {\n return {\n childList: true,\n };\n }\n\n static get properties() {\n return {\n _id: {\n type: String,\n default: (el) => `${el.randomId.replace(\"pfe\", el.tag)}`,\n prefix: false,\n },\n ariaControls: {\n type: String,\n prefix: false,\n },\n // @TODO Deprecated pfe-id in 1.0\n oldPfeId: {\n type: String,\n alias: \"_id\",\n attr: \"pfe-id\",\n },\n expanded: {\n title: \"Expanded\",\n type: Boolean,\n observer: \"_expandedChanged\",\n },\n };\n }\n\n static get events() {\n return {\n change: `pfe-accordion:change`,\n };\n }\n\n constructor() {\n super(PfeAccordionHeader);\n\n this._init = this._init.bind(this);\n this._clickHandler = this._clickHandler.bind(this);\n this._observer = new MutationObserver(this._init);\n this._slotObserver = new MutationObserver(this._init);\n\n this._getHeaderElement = this._getHeaderElement.bind(this);\n\n this.headingTag = \"h3\";\n\n this.addEventListener(\"click\", this._clickHandler);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n // Capture the button and the text\n this.button = this.shadowRoot.querySelector(`.pf-c-accordion__toggle`);\n this._buttonText = this.button.querySelector(`.pf-c-accordion__toggle-text`);\n\n if (this.hasLightDOM()) this._init();\n else {\n this._observer.observe(this, PfeAccordionHeader.observer);\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener(\"click\", this._clickHandler);\n this._observer.disconnect();\n }\n\n _init() {\n this._observer.disconnect();\n\n const header = this._getHeaderElement();\n\n if (header) {\n this.headingTag = header.tagName ? header.tagName.toLowerCase() : \"h3\";\n this.headingText = header.textContent ? header.textContent.trim() : \"\";\n }\n\n // Update button text\n this._buttonText.innerHTML = this.headingText;\n\n // Remove the hidden attribute after upgrade\n this.removeAttribute(\"hidden\");\n\n this._observer.observe(this, PfeAccordionHeader.observer);\n\n // @TODO this is for navigation 1.0 updates\n // Validate that headers with the `is-direct-link` attribute contain a link\n // if (this.isDirectLink && !this.link) {\n // this.warn(`This component expects to find a link in the light DOM due to the \"is-direct-link\" attribute`);\n // }\n }\n\n _getHeaderElement() {\n // Check if there is no nested element or nested textNodes\n if (!this.firstElementChild && !this.firstChild) {\n this.warn(`No header content provided`);\n return;\n }\n\n if (this.firstElementChild && this.firstElementChild.tagName) {\n const htags = this.fetchElement(\n this.children,\n (el) => el.tagName && (el.tagName.match(/^H[1-6]/) || el.tagName === \"P\"),\n this._slotObserver\n );\n\n // If there is no content inside the slot, return empty with a warning\n if (htags.length === 0) {\n this.warn(`No heading information was provided.`);\n return;\n }\n // If there is more than 1 element in the slot, capture the first h-tag\n else if (htags.length > 1) {\n this.warn(`Heading currently only supports 1 tag; extra tags will be ignored.`);\n return htags[0];\n } else return htags[0];\n } else {\n const htag = document.createElement(\"h3\");\n\n if (this.firstChild && this.firstChild.nodeType === \"#text\") {\n // If a text node was provided but no semantics, default to an h3\n htag.textContent = this.firstChild.textContent;\n } else {\n this.warn(`Header should contain at least 1 heading tag for correct semantics.`);\n\n // If incorrect semantics were used, create an H3 and try to capture the content\n htag.textContent = this.textContent;\n }\n\n return htag;\n }\n }\n\n _clickHandler(event) {\n this.emitEvent(PfeAccordionHeader.events.change, {\n detail: {\n expanded: !this.expanded,\n toggle: event.target,\n },\n });\n }\n\n _expandedChanged() {\n if (this.button) {\n this.button.setAttribute(\"aria-expanded\", this.expanded ? \"true\" : \"false\");\n }\n }\n\n /**\n * Provides a standard way of fetching light DOM that may or may not be provided inside\n * of a slot; optional filtering of results and way to pass in an observer if you need to\n * track updates to the slot\n * @param {NodeItem} el\n * @param {function} filter [optional] Filter for the returned results of the NodeList\n * @param {function} observer [optional] Pointer to the observer defined for that slot\n */\n fetchElement(els, filter, observer) {\n if (!els) return [];\n let nodes = [...els];\n\n // Parse the nodes for slotted content\n [...nodes]\n .filter((node) => node && node.tagName === \"SLOT\")\n .forEach((node) => {\n // Remove node from the list\n const idx = nodes.findIndex((item) => item === node);\n // Capture it's assigned nodes for validation\n let slotted = node.assignedNodes();\n // If slotted elements were found, add it to the nodeList\n if (slotted && slotted.length > 0) {\n // Remove the slot from the set, add the slotted content\n nodes.splice(idx, 1, ...slotted);\n } else {\n // If no content exists in the slot, check for default content in the slot template\n const defaults = node.children;\n if (defaults && defaults.length > 0) nodes[idx] = defaults[0];\n }\n\n // Attach the observer if provided to watch for updates to the slot\n // Useful if you are moving content from light DOM to shadow DOM\n if (typeof observer === \"function\") {\n observer.observer(node, PfeAccordionHeader.observer);\n }\n });\n\n if (typeof filter === \"function\") return nodes.filter(filter);\n else return nodes;\n }\n}\n\nexport default PfeAccordionHeader;\n","/*!\n * PatternFly Elements: PfeAccordion 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement.js\";\n\nclass PfeAccordionPanel extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n
      \n
      \n \n
      \n
      `;\n }\n\n static get tag() {\n return \"pfe-accordion-panel\";\n }\n\n get styleUrl() {\n return \"pfe-accordion-panel.scss\";\n }\n\n get templateUrl() {\n return \"pfe-accordion-panel.html\";\n }\n\n static get properties() {\n return {\n _id: {\n type: String,\n default: (el) => `${el.randomId.replace(\"pfe\", el.tag)}`,\n prefix: false,\n },\n role: {\n type: String,\n default: \"region\",\n prefix: false,\n },\n // @TODO Deprecated pfe-id in 1.0\n oldPfeId: {\n type: String,\n alias: \"_id\",\n attr: \"pfe-id\",\n },\n expanded: {\n title: \"Expanded\",\n type: Boolean,\n default: false,\n observer: \"_expandedChanged\"\n },\n ariaLabelledby: {\n type: String,\n prefix: false,\n },\n };\n }\n\n constructor() {\n super(PfeAccordionPanel);\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._expandedChanged();\n }\n\n _expandedChanged() {\n if (this.expanded) {\n this.removeAttribute(\"aria-hidden\");\n this.removeAttribute(\"tabindex\");\n } else {\n this.setAttribute(\"aria-hidden\", \"true\");\n this.setAttribute(\"tabindex\", \"-1\");\n }\n }\n}\n\nexport default PfeAccordionPanel;\n","/*!\n * PatternFly Elements: PfeAccordion 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\n// Import polyfills: findIndex\nimport \"./polyfills--pfe-accordion.js\";\n\nimport PFElement from \"../../pfelement/dist/pfelement\";\nimport PfeAccordionHeader from \"./pfe-accordion-header.js\";\nimport PfeAccordionPanel from \"./pfe-accordion-panel.js\";\n\nclass PfeAccordion extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n`;\n }\n\n static get tag() {\n return \"pfe-accordion\";\n }\n\n static get meta() {\n return {\n title: \"Accordion\",\n description: \"This element renders content sets in an expandable format.\",\n };\n }\n\n get styleUrl() {\n return \"pfe-accordion.scss\";\n }\n\n get templateUrl() {\n return \"pfe-accordion.html\";\n }\n\n static get properties() {\n return {\n disclosure: {\n // Leaving this as a string since it's an opt out\n title: \"Disclosure\",\n type: String,\n values: [\"true\", \"false\"],\n cascade: [\"pfe-accordion-header\", \"pfe-accordion-panel\"],\n },\n // @TODO: Deprecated pfe-disclosure in 1.0\n oldDisclosure: {\n type: String,\n alias: \"disclosure\",\n attr: \"pfe-disclosure\",\n },\n // Do not set a default of 0, it causes a the URL history to\n // be updated on load for every tab; infinite looping goodness\n // Seriously, don't set a default here unless you do a rewrite\n expandedIndex: {\n title: \"Expanded index(es)\",\n type: String,\n observer: \"_expandedIndexHandler\",\n },\n history: {\n title: \"History\",\n type: Boolean,\n default: false,\n observer: \"_historyHandler\",\n },\n };\n }\n\n static get slots() {\n return {\n default: {\n type: \"array\",\n namedSlot: false,\n items: {\n oneOf: [\n {\n $ref: \"pfe-accordion-header\",\n },\n {\n $ref: \"pfe-accordion-panel\",\n },\n ],\n },\n },\n };\n }\n\n static get events() {\n return {\n change: `${this.tag}:change`,\n expand: `${this.tag}:expand`,\n collapse: `${this.tag}:collapse`,\n };\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Container;\n }\n\n // Each set contains a header and a panel\n static get contentTemplate() {\n return `\n \n \n `;\n }\n\n constructor() {\n super(PfeAccordion, { type: PfeAccordion.PfeType });\n\n this._manualDisclosure = null;\n this._updateHistory = true;\n this.expandedSets = [];\n\n this._init = this._init.bind(this);\n this._observer = new MutationObserver(this._init);\n this._updateStateFromURL = this._updateStateFromURL.bind(this);\n this._getIndexesFromURL = this._getIndexesFromURL.bind(this);\n this._updateURLHistory = this._updateURLHistory.bind(this);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (this.hasLightDOM()) {\n this._manualDisclosure = this.getAttribute(\"disclosure\") || this.getAttribute(\"pfe-disclosure\");\n\n Promise.all([\n customElements.whenDefined(PfeAccordionHeader.tag),\n customElements.whenDefined(PfeAccordionPanel.tag),\n ]).then(this._init);\n }\n\n this.addEventListener(PfeAccordion.events.change, this._changeHandler);\n this.addEventListener(\"keydown\", this._keydownHandler);\n\n // Set up the observer on the child tree\n this._observer.observe(this, {\n childList: true,\n });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener(PfeAccordion.events.change, this._changeHandler);\n this.removeEventListener(\"keydown\", this._keydownHandler);\n this._observer.disconnect();\n\n window.removeEventListener(\"popstate\", this._updateStateFromURL);\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse.\n * @param {Number} index\n */\n toggle(index) {\n const headers = this._allHeaders();\n const header = headers[index];\n\n if (!header.expanded) this.expand(index);\n else this.collapse(index);\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to expand.\n * @param {Number} index\n */\n expand(_index) {\n if (_index === undefined || _index === null) return;\n\n // Ensure the input is a number\n const index = parseInt(_index, 10);\n\n // Get all the headers and capture the item by index value\n const headers = this._allHeaders();\n const header = headers[index];\n if (!header) return;\n\n const panel = this._panelForHeader(header);\n if (!header || !panel) return;\n\n // If the header and panel exist, open both\n this._expandHeader(header);\n this._expandPanel(panel);\n\n header.focus();\n\n this.emitEvent(PfeAccordion.events.expand, {\n detail: {\n toggle: header,\n panel: panel,\n },\n });\n }\n\n /**\n * Expands all accordion items.\n */\n expandAll() {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n\n headers.forEach((header) => this._expandHeader(header));\n panels.forEach((panel) => this._expandPanel(panel));\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to collapse.\n * @param {Number} index\n */\n collapse(index) {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n const header = headers[index];\n const panel = panels[index];\n\n if (!header || !panel) return;\n\n this._collapseHeader(header);\n this._collapsePanel(panel);\n\n this.emitEvent(PfeAccordion.events.collapse, {\n detail: {\n toggle: header,\n panel: panel,\n },\n });\n }\n\n /**\n * Collapses all accordion items.\n */\n collapseAll() {\n const headers = this._allHeaders();\n const panels = this._allPanels();\n\n headers.forEach((header) => this._collapseHeader(header));\n panels.forEach((panel) => this._collapsePanel(panel));\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 _init() {\n const headers = this._allHeaders();\n // For each header in the accordion, attach the aria connections\n headers.forEach((header) => {\n const panel = this._panelForHeader(header);\n // Escape if no matching panel can be found\n if (!panel) return;\n\n header.ariaControls = panel._id;\n panel.ariaLabelledby = header._id;\n });\n\n // If disclosure was not set by the author, set up the defaults\n if (!this._manualDisclosure) {\n if (headers.length === 1) {\n this.disclosure = \"true\";\n } else if (headers.length > 1) {\n this.disclosure = \"false\";\n }\n }\n\n // Update state if params exist in the URL\n if (!this.isIE11) this._updateStateFromURL();\n }\n\n _changeHandler(evt) {\n if (this.classList.contains(\"animating\")) return;\n\n const index = this._getIndex(evt.target);\n\n if (evt.detail.expanded) this.expand(index);\n else this.collapse(index);\n\n this._updateURLHistory();\n }\n\n _historyHandler() {\n if (!this.history) window.removeEventListener(\"popstate\", this._updateStateFromURL);\n else window.addEventListener(\"popstate\", this._updateStateFromURL);\n }\n\n _expandHeader(header) {\n const index = this._getIndex(header);\n\n // If this index is not already listed in the expandedSets array, add it\n if (this.expandedSets.indexOf(index) < 0 && index > -1) this.expandedSets.push(index);\n\n header.expanded = true;\n }\n\n _expandPanel(panel) {\n if (!panel) {\n this.error(`Trying to expand a panel that doesn't exist.`);\n return;\n }\n\n if (panel.expanded) return;\n\n panel.expanded = true;\n\n const height = panel.getBoundingClientRect().height;\n this._animate(panel, 0, height);\n }\n\n _collapseHeader(header) {\n const index = this._getIndex(header);\n\n // If this index is exists in the expanded array, remove it\n let idx = this.expandedSets.indexOf(index);\n if (idx >= 0) this.expandedSets.splice(idx, 1);\n\n header.expanded = false;\n }\n\n _collapsePanel(panel) {\n if (!panel) {\n this.error(`Trying to collapse a panel that doesn't exist`);\n return;\n }\n\n if (!panel.expanded) return;\n\n const height = panel.getBoundingClientRect().height;\n panel.expanded = false;\n\n this._animate(panel, height, 0);\n }\n\n _animate(panel, start, end) {\n if (panel) {\n const header = panel.previousElementSibling;\n if (header) {\n header.classList.add(\"animating\");\n }\n panel.classList.add(\"animating\");\n panel.style.height = `${start}px`;\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n panel.style.height = `${end}px`;\n panel.addEventListener(\"transitionend\", this._transitionEndHandler);\n });\n });\n }\n }\n\n _keydownHandler(evt) {\n const currentHeader = evt.target;\n\n if (!(currentHeader instanceof customElements.get(PfeAccordionHeader.tag))) {\n return;\n }\n\n let newHeader;\n\n switch (evt.key) {\n case \"ArrowDown\":\n case \"Down\":\n case \"ArrowRight\":\n case \"Right\":\n newHeader = this._nextHeader();\n break;\n case \"ArrowUp\":\n case \"Up\":\n case \"ArrowLeft\":\n case \"Left\":\n newHeader = this._previousHeader();\n break;\n case \"Home\":\n newHeader = this._firstHeader();\n break;\n case \"End\":\n newHeader = this._lastHeader();\n break;\n default:\n return;\n }\n\n if (newHeader) {\n newHeader.shadowRoot.querySelector(\"button\").focus();\n }\n }\n\n _transitionEndHandler(evt) {\n const header = evt.target.previousElementSibling;\n if (header) header.classList.remove(\"animating\");\n\n evt.target.style.height = \"\";\n evt.target.classList.remove(\"animating\");\n evt.target.removeEventListener(\"transitionend\", this._transitionEndHandler);\n }\n\n _allHeaders() {\n if (!this.isIE11) return [...this.querySelectorAll(`:scope > pfe-accordion-header`)];\n else return this.children.filter((el) => el.tagName.toLowerCase() === \"pfe-accordion-header\");\n }\n\n _allPanels() {\n if (!this.isIE11) return [...this.querySelectorAll(`:scope > pfe-accordion-panel`)];\n else return this.children.filter((el) => el.tagName.toLowerCase() === \"pfe-accordion-panel\");\n }\n\n _panelForHeader(header) {\n const next = header.nextElementSibling;\n\n if (!next) return;\n\n if (next.tagName.toLowerCase() !== PfeAccordionPanel.tag) {\n this.error(`Sibling element to a header needs to be a panel`);\n return;\n }\n\n return next;\n }\n\n _previousHeader() {\n const headers = this._allHeaders();\n let newIndex = headers.findIndex((header) => header === document.activeElement) - 1;\n return headers[(newIndex + headers.length) % headers.length];\n }\n\n _nextHeader() {\n const headers = this._allHeaders();\n let newIndex = headers.findIndex((header) => header === document.activeElement) + 1;\n return headers[newIndex % headers.length];\n }\n\n _firstHeader() {\n const headers = this._allHeaders();\n return headers[0];\n }\n\n _lastHeader() {\n const headers = this._allHeaders();\n return headers[headers.length - 1];\n }\n\n _isHeader(element) {\n return element.tagName.toLowerCase() === PfeAccordionHeader.tag;\n }\n\n _isPanel(element) {\n return element.tagName.toLowerCase() === PfeAccordionPanel.tag;\n }\n\n _expandedIndexHandler(oldVal, newVal) {\n if (oldVal === newVal) return;\n const indexes = newVal.split(\",\").map((idx) => parseInt(idx, 10) - 1);\n indexes.reverse().forEach((index) => this.expand(index));\n }\n\n _getIndex(_el) {\n if (this._isHeader(_el)) {\n const headers = this._allHeaders();\n return headers.findIndex((header) => header.id === _el.id);\n }\n\n if (this._isPanel(_el)) {\n const panels = this._allPanels();\n return panels.findIndex((panel) => panel.id === _el.id);\n }\n\n this.warn(`The _getIndex method expects to receive a header or panel element.`);\n return -1;\n }\n\n _getIndexesFromURL() {\n // @IE11 doesn't support URLSearchParams\n // https://caniuse.com/#search=urlsearchparams\n if (!window.URLSearchParams) return [];\n\n // Capture the URL parameters\n const urlParams = new URLSearchParams(window.location.search);\n\n // If parameters exist and they contain the ID for this accordion\n if (urlParams && urlParams.has(this.id)) {\n const params = urlParams.get(this.id);\n // Split the parameters by underscore to see if more than 1 item is expanded\n const indexes = params.split(\"-\");\n if (indexes.length < 0) return [];\n\n // Clean up the results by converting to array count\n return indexes.map((item) => parseInt(item.trim(), 10) - 1);\n }\n }\n\n /**\n * This handles updating the URL parameters based on the current state\n * of the global this.expanded array\n * @requires this.expandedSets {Array}\n */\n _updateURLHistory() {\n // @IE11 doesn't support URLSearchParams\n // https://caniuse.com/#search=urlsearchparams\n if (!this.history || !this._updateHistory || !window.URLSearchParams) return;\n\n if (!this.id) {\n this.error(`The history feature cannot update the URL without an ID added to the pfe-accordion tag.`);\n return;\n }\n\n // Capture the URL and rebuild it using the new state\n const urlParams = new URLSearchParams(window.location.search);\n // Iterate the expanded array by 1 to convert to human-readable vs. array notation;\n // sort values numerically and connect them using a dash\n const openIndexes = this.expandedSets\n .map((item) => item + 1)\n .sort((a, b) => a - b)\n .join(\"-\");\n\n // If values exist in the array, add them to the parameter string\n if (this.expandedSets.length > 0) urlParams.set(this.id, openIndexes);\n // Otherwise delete the set entirely\n else urlParams.delete(this.id);\n\n // Note: Using replace state protects the user's back navigation\n history.replaceState(\n {},\n \"\",\n `${window.location.pathname}${urlParams ? `?${urlParams.toString()}` : \"\"}${window.location.hash}`\n );\n }\n\n /**\n * This captures the URL parameters and expands each item in the array\n * @requires this._getIndexesFromURL {Method}\n */\n _updateStateFromURL() {\n const indexesFromURL = this._getIndexesFromURL() || [];\n\n this._updateHistory = false;\n indexesFromURL.forEach((idx) => this.expand(idx));\n this._updateHistory = true;\n }\n}\n\nPFElement.create(PfeAccordionHeader);\nPFElement.create(PfeAccordionPanel);\nPFElement.create(PfeAccordion);\n\nexport { PfeAccordion as default };\n"],"names":["Array","prototype","findIndex","defineProperty","predicate","this","TypeError","o","Object","len","length","thisArg","arguments","k","kValue","call","PfeAccordionHeader","PFElement","headingTag","expanded","headingText","hasSlot","String","el","randomId","replace","tag","Boolean","button","shadowRoot","querySelector","_buttonText","hasLightDOM","_init","_observer","observe","observer","removeEventListener","_clickHandler","disconnect","header","_getHeaderElement","tagName","toLowerCase","textContent","trim","innerHTML","removeAttribute","firstElementChild","firstChild","htag","document","createElement","nodeType","warn","htags","fetchElement","children","match","_slotObserver","event","emitEvent","events","change","target","setAttribute","els","filter","nodes","node","forEach","idx","item","slotted","assignedNodes","splice","defaults","_this","bind","MutationObserver","addEventListener","PfeAccordionPanel","_expandedChanged","PfeTypes","Container","_manualDisclosure","getAttribute","all","customElements","whenDefined","then","PfeAccordion","_changeHandler","_keydownHandler","_updateStateFromURL","index","_allHeaders","collapse","expand","_index","panel","parseInt","_panelForHeader","_expandHeader","_expandPanel","focus","headers","panels","_allPanels","_this2","_collapseHeader","_collapsePanel","_this3","_this4","ariaControls","_id","ariaLabelledby","disclosure","isIE11","evt","classList","contains","_getIndex","detail","_updateURLHistory","history","window","expandedSets","indexOf","push","height","getBoundingClientRect","_animate","error","start","end","previousElementSibling","add","style","_this5","_transitionEndHandler","get","newHeader","key","_nextHeader","_previousHeader","_firstHeader","_lastHeader","remove","querySelectorAll","next","nextElementSibling","newIndex","activeElement","element","oldVal","newVal","split","map","reverse","_this6","_el","_isHeader","id","_isPanel","URLSearchParams","urlParams","location","search","has","indexes","openIndexes","_updateHistory","sort","a","b","join","set","delete","replaceState","pathname","toString","hash","indexesFromURL","_getIndexesFromURL","_this7","type","PfeType","create"],"mappings":"mhBAEKA,MAAMC,UAAUC,kBACZC,eAAeH,MAAMC,UAAW,YAAa,OAC3C,SAAUG,MAEH,MAARC,WACI,IAAIC,UAAU,qCAGlBC,EAAIC,OAAOH,MAGXI,EAAMF,EAAEG,SAAW,KAGE,mBAAdN,QACH,IAAIE,UAAU,wCAIlBK,EAAUC,UAAU,GAGpBC,EAAI,EAGDA,EAAIJ,GAAK,KAKVK,EAASP,EAAEM,MACXT,EAAUW,KAAKJ,EAASG,EAAQD,EAAGN,UAC9BM,aAOH,ipCCbRG,OAA2BC,o2YAW9BZ,KAAKa,YAAc,qDACOb,KAAKc,yLAEsBd,KAAKe,aAAe,0CAC9Df,KAAKgB,QAAQ,8FAAkG,mKAIzHhB,KAAKa,YAAc,iDAQZ,sEAIA,oEA3BA,2CAmBA,8DAqBA,YACM,4CAKN,KACA,MACGI,eACG,SAACC,YAAUA,EAAGC,SAASC,QAAQ,MAAOF,EAAGG,cAC1C,gBAEI,MACNJ,eACE,YAGA,MACFA,aACC,WACD,mBAEE,OACD,gBACDK,iBACI,0DAMP,yLAwBFC,OAASvB,KAAKwB,WAAWC,8CACzBC,YAAc1B,KAAKuB,OAAOE,8CAE3BzB,KAAK2B,cAAe3B,KAAK4B,aAEtBC,UAAUC,QAAQ9B,KAAMW,EAAmBoB,kKAO7CC,oBAAoB,QAAShC,KAAKiC,oBAClCJ,UAAUK,kDAIVL,UAAUK,iBAETC,EAASnC,KAAKoC,oBAEhBD,SACGtB,WAAasB,EAAOE,QAAUF,EAAOE,QAAQC,cAAgB,UAC7DvB,YAAcoB,EAAOI,YAAcJ,EAAOI,YAAYC,OAAS,SAIjEd,YAAYe,UAAYzC,KAAKe,iBAG7B2B,gBAAgB,eAEhBb,UAAUC,QAAQ9B,KAAMW,EAAmBoB,yDAW3C/B,KAAK2C,mBAAsB3C,KAAK4C,gBAKjC5C,KAAK2C,oBAAqB3C,KAAK2C,kBAAkBN,QAiB9C,KACCQ,EAAOC,SAASC,cAAc,aAEhC/C,KAAK4C,YAA2C,UAA7B5C,KAAK4C,WAAWI,WAEhCT,YAAcvC,KAAK4C,WAAWL,kBAE9BU,8EAGAV,YAAcvC,KAAKuC,aAGnBM,EA7BDK,EAAQlD,KAAKmD,aACjBnD,KAAKoD,SACL,SAAClC,UAAOA,EAAGmB,UAAYnB,EAAGmB,QAAQgB,MAAM,YAA6B,MAAfnC,EAAGmB,UACzDrC,KAAKsD,kBAIc,IAAjBJ,EAAM7C,OAKL,OAAmB,EAAf6C,EAAM7C,aACR4C,2EACEC,EAAM,QANRD,uDAbFA,yEAsCKM,QACPC,UAAU7C,EAAmB8C,OAAOC,OAAQ,QACvC,WACK1D,KAAKc,gBACRyC,EAAMI,qDAMd3D,KAAKuB,aACFA,OAAOqC,aAAa,gBAAiB5D,KAAKc,SAAW,OAAS,8CAY1D+C,EAAKC,EAAQ/B,OACnB8B,EAAK,MAAO,OACbE,cAAYF,sBAGZE,IACDD,OAAO,SAACE,UAASA,GAAyB,SAAjBA,EAAK3B,UAC9B4B,QAAQ,SAACD,OAEFE,EAAMH,EAAMlE,UAAU,SAACsE,UAASA,IAASH,IAE3CI,EAAUJ,EAAKK,gBAEfD,GAA4B,EAAjBA,EAAQ/D,SAEfiE,gBAAOJ,EAAK,YAAME,MAGlBG,EAAWP,EAAKZ,WACY,EAAlBmB,EAASlE,SAAY0D,EAAMG,GAAOK,EAAS,IAKrC,mBAAbxC,KACAA,SAASiC,EAAMrD,EAAmBoB,YAI3B,mBAAX+B,EAA8BC,EAAMD,OAAOA,GAC1CC,+FAzJNpD,aAEDiB,MAAQ4C,EAAK5C,MAAM6C,UACnBxC,cAAgBuC,EAAKvC,cAAcwC,UACnC5C,UAAY,IAAI6C,iBAAiBF,EAAK5C,SACtC0B,cAAgB,IAAIoB,iBAAiBF,EAAK5C,SAE1CQ,kBAAoBoC,EAAKpC,kBAAkBqC,UAE3C5D,WAAa,OAEb8D,iBAAiB,QAASH,EAAKvC,qBC7FlC2C,OAA0BhE,2kMAuBrB,qEAIA,mEAvBA,2CAeA,+DAYA,KACA,MACGK,eACG,SAACC,YAAUA,EAAGC,SAASC,QAAQ,MAAOF,EAAGG,cAC1C,QAEJ,MACEJ,eACG,iBACD,YAGA,MACFA,aACC,WACD,mBAEE,OACD,gBACDK,iBACG,WACC,mCAEI,MACRL,eACE,6JAWP4D,8DAID7E,KAAKc,eACF4B,gBAAgB,oBAChBA,gBAAgB,mBAEhBkB,aAAa,cAAe,aAC5BA,aAAa,WAAY,qGAd1BgB,QCzDiBhE,0UA0BhB,+DAIA,6DA1BA,2CAWA,mDAIA,OACE,wBACM,uGAaR,YACO,OAEH,kBACDK,cACE,CAAC,OAAQ,iBACR,CAAC,uBAAwB,sCAGrB,MACPA,aACC,kBACD,gCAKO,OACN,0BACDA,gBACI,iCAEH,OACA,eACDK,iBACG,WACC,wDAMP,SACI,MACD,mBACK,QACJ,OACE,CACL,MACQ,wBAER,MACQ,gEAST,QACMtB,KAAKqB,qBACLrB,KAAKqB,uBACHrB,KAAKqB,wDAMbT,EAAUkE,SAASC,oWA4BtB/E,KAAK2B,qBACFqD,kBAAoBhF,KAAKiF,aAAa,eAAiBjF,KAAKiF,aAAa,0BAEtEC,IAAI,CACVC,eAAeC,YAAYzE,EAAmBU,KAC9C8D,eAAeC,YAAYR,EAAkBvD,OAC5CgE,KAAKrF,KAAK4B,aAGV+C,iBAAiBW,EAAa7B,OAAOC,OAAQ1D,KAAKuF,qBAClDZ,iBAAiB,UAAW3E,KAAKwF,sBAGjC3D,UAAUC,QAAQ9B,KAAM,YAChB,4JAORgC,oBAAoBsD,EAAa7B,OAAOC,OAAQ1D,KAAKuF,qBACrDvD,oBAAoB,UAAWhC,KAAKwF,sBACpC3D,UAAUK,oBAERF,oBAAoB,WAAYhC,KAAKyF,oDAOvCC,GACW1F,KAAK2F,cACED,GAEX5E,SACPd,KAAK4F,SAASF,GADG1F,KAAK6F,OAAOH,kCAQ7BI,OAWCC,EAVFD,MAAAA,IAGEJ,EAAQM,SAASF,EAAQ,KAIzB3D,EADUnC,KAAK2F,cACED,MAGjBK,EAAQ/F,KAAKiG,gBAAgB9D,GAC9BA,GAAW4D,SAGXG,cAAc/D,QACdgE,aAAaJ,KAEXK,aAEF5C,UAAU8B,EAAa7B,OAAOoC,OAAQ,QACjC,QACE1D,QACD4D,uDASLM,EAAUrG,KAAK2F,cACfW,EAAStG,KAAKuG,eAEZtC,QAAQ,SAAC9B,UAAWqE,EAAKN,cAAc/D,OACxC8B,QAAQ,SAAC8B,UAAUS,EAAKL,aAAaJ,sCAOrCL,OACDW,EAAUrG,KAAK2F,cACfW,EAAStG,KAAKuG,aACdpE,EAASkE,EAAQX,GACjBK,EAAQO,EAAOZ,GAEhBvD,GAAW4D,SAEXU,gBAAgBtE,QAChBuE,eAAeX,QAEfvC,UAAU8B,EAAa7B,OAAOmC,SAAU,QACnC,QACEzD,QACD4D,uDASLM,EAAUrG,KAAK2F,cACfW,EAAStG,KAAKuG,eAEZtC,QAAQ,SAAC9B,UAAWwE,EAAKF,gBAAgBtE,OAC1C8B,QAAQ,SAAC8B,UAAUY,EAAKD,eAAeX,gDAUxCM,EAAUrG,KAAK2F,gBAEb1B,QAAQ,SAAC9B,OACT4D,EAAQa,EAAKX,gBAAgB9D,GAE9B4D,MAEEc,aAAed,EAAMe,MACtBC,eAAiB5E,EAAO2E,OAI3B9G,KAAKgF,oBACe,IAAnBqB,EAAQhG,YACL2G,WAAa,OACQ,EAAjBX,EAAQhG,cACZ2G,WAAa,UAKjBhH,KAAKiH,QAAQjH,KAAKyF,6DAGVyB,OAGPxB,EAFF1F,KAAKmH,UAAUC,SAAS,eAEtB1B,EAAQ1F,KAAKqH,UAAUH,EAAIvD,QAE7BuD,EAAII,OAAOxG,SAAUd,KAAK6F,OAAOH,GAChC1F,KAAK4F,SAASF,QAEd6B,+DAIAvH,KAAKwH,QACLC,OAAO9C,iBAAiB,WAAY3E,KAAKyF,qBAD3BgC,OAAOzF,oBAAoB,WAAYhC,KAAKyF,2DAInDtD,OACNuD,EAAQ1F,KAAKqH,UAAUlF,GAGzBnC,KAAK0H,aAAaC,QAAQjC,GAAS,IAAc,EAATA,GAAY1F,KAAK0H,aAAaE,KAAKlC,KAExE5E,UAAW,uCAGPiF,OAUL8B,EATD9B,EAKDA,EAAMjF,aAEJA,UAAW,EAEX+G,EAAS9B,EAAM+B,wBAAwBD,YACxCE,SAAShC,EAAO,EAAG8B,SATjBG,8FAYO7F,OACRuD,EAAQ1F,KAAKqH,UAAUlF,GAGzB+B,EAAMlE,KAAK0H,aAAaC,QAAQjC,GACzB,GAAPxB,GAAUlE,KAAK0H,aAAapD,OAAOJ,EAAK,KAErCpD,UAAW,yCAGLiF,OAQP8B,EAPD9B,EAKAA,EAAMjF,WAEL+G,EAAS9B,EAAM+B,wBAAwBD,SACvC/G,UAAW,OAEZiH,SAAShC,EAAO8B,EAAQ,SATtBG,wFAYAjC,EAAOkC,EAAOC,OAEb/F,SADJ4D,KACI5D,EAAS4D,EAAMoC,2BAEZhB,UAAUiB,IAAI,eAEjBjB,UAAUiB,IAAI,eACdC,MAAMR,OAAYI,6BAEF,iCACE,aACdI,MAAMR,OAAYK,SAClBvD,iBAAiB,gBAAiB2D,EAAKC,oEAMrCrB,MACQA,EAAIvD,kBAEKwB,eAAeqD,IAAI7H,EAAmBU,UAIjEoH,gBAEIvB,EAAIwB,SACL,gBACA,WACA,iBACA,UACS1I,KAAK2I,wBAEd,cACA,SACA,gBACA,SACS3I,KAAK4I,4BAEd,SACS5I,KAAK6I,yBAEd,QACS7I,KAAK8I,mCAMjBL,KACQjH,WAAWC,cAAc,UAAU2E,uDAI3Bc,OACd/E,EAAS+E,EAAIvD,OAAOwE,uBACtBhG,GAAQA,EAAOgF,UAAU4B,OAAO,eAEhCpF,OAAO0E,MAAMR,OAAS,KACtBlE,OAAOwD,UAAU4B,OAAO,eACxBpF,OAAO3B,oBAAoB,gBAAiBhC,KAAKuI,oEAIhDvI,KAAKiH,OACEjH,KAAKoD,SAASU,OAAO,SAAC5C,SAAoC,yBAA7BA,EAAGmB,QAAQC,4BADvBtC,KAAKgJ,gGAK7BhJ,KAAKiH,OACEjH,KAAKoD,SAASU,OAAO,SAAC5C,SAAoC,wBAA7BA,EAAGmB,QAAQC,4BADvBtC,KAAKgJ,2FAIpB7G,GACR8G,EAAO9G,EAAO+G,sBAEfD,MAEDA,EAAK5G,QAAQC,gBAAkBsC,EAAkBvD,WAK9C4H,OAJAjB,wGAQD3B,EAAUrG,KAAK2F,cACjBwD,EAAW9C,EAAQxG,UAAU,SAACsC,UAAWA,IAAWW,SAASsG,gBAAiB,SAC3E/C,GAAS8C,EAAW9C,EAAQhG,QAAUgG,EAAQhG,kDAI/CgG,EAAUrG,KAAK2F,cACjBwD,EAAW9C,EAAQxG,UAAU,SAACsC,UAAWA,IAAWW,SAASsG,gBAAiB,SAC3E/C,EAAQ8C,EAAW9C,EAAQhG,sDAIlBL,KAAK2F,cACN,6CAITU,EAAUrG,KAAK2F,qBACdU,EAAQA,EAAQhG,OAAS,qCAGxBgJ,UACDA,EAAQhH,QAAQC,gBAAkB3B,EAAmBU,qCAGrDgI,UACAA,EAAQhH,QAAQC,gBAAkBsC,EAAkBvD,kDAGvCiI,EAAQC,cACxBD,IAAWC,GACCA,EAAOC,MAAM,KAAKC,IAAI,SAACvF,UAAQ8B,SAAS9B,EAAK,IAAM,IAC3DwF,UAAUzF,QAAQ,SAACyB,UAAUiE,EAAK9D,OAAOH,uCAGzCkE,UACJ5J,KAAK6J,UAAUD,GACD5J,KAAK2F,cACN9F,UAAU,SAACsC,UAAWA,EAAO2H,KAAOF,EAAIE,KAGrD9J,KAAK+J,SAASH,GACD5J,KAAKuG,aACN1G,UAAU,SAACkG,UAAUA,EAAM+D,KAAOF,EAAIE,WAGjD7G,4EACG,oDAMHwE,OAAOuC,gBAAiB,MAAO,OAG9BC,EAAY,IAAID,gBAAgBvC,OAAOyC,SAASC,WAGlDF,GAAaA,EAAUG,IAAIpK,KAAK8J,IAAK,CAGjCO,EAFSJ,EAAUzB,IAAIxI,KAAK8J,IAEXN,MAAM,YACzBa,EAAQhK,OAAS,EAAU,GAGxBgK,EAAQZ,IAAI,SAACtF,UAAS6B,SAAS7B,EAAK3B,OAAQ,IAAM,qDAoBrDyH,EAGAK,EAXDtK,KAAKwH,SAAYxH,KAAKuK,gBAAmB9C,OAAOuC,kBAEhDhK,KAAK8J,IAMJG,EAAY,IAAID,gBAAgBvC,OAAOyC,SAASC,QAGhDG,EAActK,KAAK0H,aACtB+B,IAAI,SAACtF,UAASA,EAAO,IACrBqG,KAAK,SAACC,EAAGC,UAAMD,EAAIC,IACnBC,KAAK,KAGuB,EAA3B3K,KAAK0H,aAAarH,OAAY4J,EAAUW,IAAI5K,KAAK8J,GAAIQ,GAEpDL,EAAUY,OAAO7K,KAAK8J,YAGnBgB,aACN,GACA,GACGrD,OAAOyC,SAASa,UAAWd,MAAgBA,EAAUe,WAAe,IAAKvD,OAAOyC,SAASe,YAtBvFjD,2JA+BDkD,EAAiBlL,KAAKmL,sBAAwB,QAE/CZ,gBAAiB,IACPtG,QAAQ,SAACC,UAAQkH,EAAKvF,OAAO3B,UACvCqG,gBAAiB,MAzhBpBjF,0FA0GIA,EAAc,CAAE+F,KAAM/F,EAAagG,oBAEpCtG,kBAAoB,OACpBuF,gBAAiB,IACjB7C,aAAe,KAEf9F,MAAQ4C,EAAK5C,MAAM6C,UACnB5C,UAAY,IAAI6C,iBAAiBF,EAAK5C,SACtC6D,oBAAsBjB,EAAKiB,oBAAoBhB,UAC/C0G,mBAAqB3G,EAAK2G,mBAAmB1G,UAC7C8C,kBAAoB/C,EAAK+C,kBAAkB9C,iBAyapD7D,EAAU2K,OAAO5K,GACjBC,EAAU2K,OAAO3G,GACjBhE,EAAU2K,OAAOjG"} \ No newline at end of file diff --git a/elements/pfe-accordion/package.json b/elements/pfe-accordion/package.json index 738c678750..54ffccf886 100644 --- a/elements/pfe-accordion/package.json +++ b/elements/pfe-accordion/package.json @@ -10,7 +10,7 @@ ], "preview": "accordion.svg" }, - "version": "1.12.2", + "version": "1.12.3", "publishConfig": { "access": "public" }, @@ -57,10 +57,10 @@ ], "license": "MIT", "devDependencies": { - "@patternfly/pfe-sass": "^1.12.2" + "@patternfly/pfe-sass": "^1.12.3" }, "dependencies": { - "@patternfly/pfelement": "^1.12.2" + "@patternfly/pfelement": "^1.12.3" }, "generator-pfelement-version": "0.5.5", "bugs": { diff --git a/elements/pfe-accordion/src/pfe-accordion-panel.js b/elements/pfe-accordion/src/pfe-accordion-panel.js index acccc3da6d..3a79696518 100644 --- a/elements/pfe-accordion/src/pfe-accordion-panel.js +++ b/elements/pfe-accordion/src/pfe-accordion-panel.js @@ -35,7 +35,7 @@ class PfeAccordionPanel extends PFElement { title: "Expanded", type: Boolean, default: false, - observer: "_expandedChanged" + observer: "_expandedChanged", }, ariaLabelledby: { type: String, diff --git a/elements/pfe-autocomplete/dist/pfe-autocomplete.css.map b/elements/pfe-autocomplete/dist/pfe-autocomplete.css.map new file mode 100644 index 0000000000..29cffac362 --- /dev/null +++ b/elements/pfe-autocomplete/dist/pfe-autocomplete.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["pfe-autocomplete.scss","../../pfe-sass/extends/_extends.scss","pfe-autocomplete.css","../../pfe-sass/mixins/_mixins.scss","../../pfe-sass/mixins/_custom-properties.scss","../../pfe-sass/functions/_custom-properties.scss"],"names":[],"mappings":"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","file":"pfe-autocomplete.css","sourcesContent":["@import \"../../pfe-sass/pfe-sass\";\n\n$LOCAL: autocomplete;\n\n$LOCAL-VARIABLES: (\n BoxShadow: pfe-var(box-shadow--inset),\n BackgroundColor: pfe-var(surface--lightest),\n Border: pfe-var(ui--border-width) pfe-var(ui--border-style) pfe-var(surface--border)\n);\n\n@include pfe-contexts; // imports on=\"light\" etc support\n\n:host {\n display: block;\n position: relative;\n font-family: pfe-var(font-family);\n @include pfe-print-local($LOCAL-VARIABLES);\n}\n\n:host([button-text]) {\n display: flex;\n #wrapper {\n flex: 1;\n }\n\n #input-box-wrapper {\n position: relative;\n }\n\n button.clear-search {\n width: 40px;\n right: 0px;\n }\n}\n\n\n// this isn't working, I don't know why\n:host([button-text]) ::slotted(input[type=\"search\"]::-webkit-search-cancel-button) {\n -webkit-appearance: none;\n}\n\n.sr-only {\n @extend %sr-only;\n}\n\n#input-box-wrapper {\n border-color: pfe-var(feedback--info);\n\n ::slotted(input) {\n width: 100%;\n flex: 1;\n box-shadow: pfe-local(BoxShadow) !important;\n padding-left: 10px;\n padding-right: 0;\n border-radius: pfe-var(ui--border-radius);\n background-color: pfe-local(BackgroundColor);\n border: pfe-local(Border);\n font-size: pfe-var(font-size);\n font-family: pfe-var(font-family);\n height: calc(#{pfe-var(ui--element--size)} * 2);\n transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n opacity: 1;\n outline: 0;\n }\n\n ::slotted(input:disabled),\n button:disabled {\n cursor: not-allowed;\n // background-color: transparent;\n // @TODO: Replace with a variable\n color: #ccc;\n // opacity: 0.5;\n }\n\n ::slotted(input:disabled) {\n padding-right: 10px;\n }\n\n button:focus,\n ::slotted(input:focus) {\n outline: 0;\n }\n\n ::slotted(input),\n button {\n -webkit-appearance: none;\n }\n\n ::slotted([type=\"search\"]::-ms-clear) {\n display: none;\n }\n\n ::slotted(input[type=\"search\"]::-webkit-search-cancel-button),\n ::slotted(input[type=\"search\"]::-webkit-search-decoration) {\n -webkit-appearance: none;\n }\n}\n\nbutton {\n color: pfe-var(ui-base);\n background-color: transparent;\n border: none;\n position: absolute;\n top: 0;\n bottom: 0;\n cursor: pointer;\n\n &.clear-search {\n right: 30px;\n width: 20px;\n margin: 2px 1px;\n background-color: pfe-var(surface--lightest);\n &:hover {\n color: pfe-var(ui-base);\n }\n svg {\n width: 14px;\n position: relative;\n top: 2px;\n stroke: pfe-var(surface--border);\n }\n &:hover svg,\n &:focus svg {\n opacity: 1;\n stroke: pfe-var(link);\n }\n }\n\n &[disabled].clear-search:hover svg,\n &[disabled].clear-search:focus svg {\n stroke: pfe-var(surface--border);\n }\n\n &.search-button {\n margin-top: 1px;\n margin-bottom: 1px;\n right: 1px;\n width: 30px;\n background-color: pfe-var(surface--lightest);\n svg {\n fill: pfe-var(link);\n // width: 16px;\n width: 18px;\n position: relative;\n top: 2px;\n stroke: pfe-var(surface--border);\n }\n\n &:hover svg,\n &:focus svg {\n fill: pfe-var(link--hover);\n }\n\n &:disabled svg {\n fill: pfe-var(ui-disabled);\n }\n }\n}\n\npfe-button.search-button--textual {\n margin-left: 16px;\n}\n\n.loading {\n position: absolute;\n width: 30px;\n right: 52px;\n top: 0px;\n bottom: 0px;\n svg {\n width: 26px;\n padding-top: 7px;\n }\n}\n","// @todo Change to mixins; no efficiency gain with placeholders in web components\n\n/// Clear box element styles\n%reset-box {\n margin: 0;\n padding: 0;\n}\n\n/// Clear list styles\n%reset-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n/// Clear button styles\n%reset-button {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n text-align: left;\n}\n\n/// Set up a container element\n%container {\n position: relative;\n display: block;\n width: 100%;\n padding: pfe-var(container-padding);\n}\n\n/// Screen-reader only content\n%sr-only {\n position: absolute;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n}\n\n/// Fallback surface styles for IE11 only\n%fallback-surface {\n @include browser-query(ie11) {\n background-color: pfe-fetch(surface--lightest) !important;\n color: pfe-fetch(text) !important;\n }\n}\n\n/// Fallback text styles for IE11 only\n%fallback-text {\n @include browser-query(ie11) {\n color: pfe-fetch(text) !important;\n }\n}\n",".sr-only {\n position: absolute;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n :host {\n /* IE10+ */\n color: #151515 !important;\n }\n}\n\n:host([on=\"dark\"]) {\n --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff);\n --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted--on-dark, #d2d2d2);\n --pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #73bcf7);\n --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #bee1f4);\n --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #bee1f4);\n --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #bee1f4);\n --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration--on-dark, none);\n --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover--on-dark, underline);\n --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus--on-dark, underline);\n --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited--on-dark, none);\n}\n\n:host([on=\"saturated\"]) {\n --pfe-broadcasted--text: var(--pfe-theme--color--text--on-saturated, #fff);\n --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2);\n --pfe-broadcasted--link: var(--pfe-theme--color--link--on-saturated, #fff);\n --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-saturated, #fafafa);\n --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-saturated, #fafafa);\n --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);\n --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration--on-saturated, underline);\n --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover--on-saturated, underline);\n --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus--on-saturated, underline);\n --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited--on-saturated, underline);\n}\n\n:host([on=\"light\"]) {\n --pfe-broadcasted--text: var(--pfe-theme--color--text, #151515);\n --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted, #6a6e73);\n --pfe-broadcasted--link: var(--pfe-theme--color--link, #06c);\n --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover, #004080);\n --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus, #004080);\n --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited, #6753ac);\n --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration, none);\n --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover, underline);\n --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus, underline);\n --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited, none);\n}\n\n:host {\n display: block;\n position: relative;\n font-family: var(--pfe-theme--font-family, \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif);\n --pfe-autocomplete--BoxShadow: var(--pfe-theme--box-shadow--inset, inset 0 0 0.625rem 0 #fafafa);\n --pfe-autocomplete--BackgroundColor: var(--pfe-theme--color--surface--lightest, #fff);\n --pfe-autocomplete--Border: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #d2d2d2);\n}\n\n:host([button-text]) {\n display: flex;\n}\n\n:host([button-text]) #wrapper {\n flex: 1;\n}\n\n:host([button-text]) #input-box-wrapper {\n position: relative;\n}\n\n:host([button-text]) button.clear-search {\n width: 40px;\n right: 0px;\n}\n\n:host([button-text]) ::slotted(input[type=\"search\"]::-webkit-search-cancel-button) {\n -webkit-appearance: none;\n}\n\n#input-box-wrapper {\n border-color: var(--pfe-theme--color--feedback--info, #06c);\n}\n\n#input-box-wrapper ::slotted(input) {\n width: 100%;\n flex: 1;\n box-shadow: var(--pfe-autocomplete--BoxShadow, var(--pfe-theme--box-shadow--inset, inset 0 0 0.625rem 0 #fafafa)) !important;\n padding-left: 10px;\n padding-right: 0;\n border-radius: var(--pfe-theme--ui--border-radius, 2px);\n background-color: var(--pfe-autocomplete--BackgroundColor, var(--pfe-theme--color--surface--lightest, #fff));\n border: var(--pfe-autocomplete--Border, var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #d2d2d2));\n font-size: var(--pfe-theme--font-size, 1rem);\n font-family: var(--pfe-theme--font-family, \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif);\n height: calc(var(--pfe-theme--ui--element--size, 20px) * 2);\n transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n opacity: 1;\n outline: 0;\n}\n\n#input-box-wrapper ::slotted(input:disabled),\n#input-box-wrapper button:disabled {\n cursor: not-allowed;\n color: #ccc;\n}\n\n#input-box-wrapper ::slotted(input:disabled) {\n padding-right: 10px;\n}\n\n#input-box-wrapper button:focus,\n#input-box-wrapper ::slotted(input:focus) {\n outline: 0;\n}\n\n#input-box-wrapper ::slotted(input),\n#input-box-wrapper button {\n -webkit-appearance: none;\n}\n\n#input-box-wrapper ::slotted([type=\"search\"]::-ms-clear) {\n display: none;\n}\n\n#input-box-wrapper ::slotted(input[type=\"search\"]::-webkit-search-cancel-button),\n#input-box-wrapper ::slotted(input[type=\"search\"]::-webkit-search-decoration) {\n -webkit-appearance: none;\n}\n\nbutton {\n color: var(--pfe-theme--color--ui-base, #6a6e73);\n background-color: transparent;\n border: none;\n position: absolute;\n top: 0;\n bottom: 0;\n cursor: pointer;\n}\n\nbutton.clear-search {\n right: 30px;\n width: 20px;\n margin: 2px 1px;\n background-color: var(--pfe-theme--color--surface--lightest, #fff);\n}\n\nbutton.clear-search:hover {\n color: var(--pfe-theme--color--ui-base, #6a6e73);\n}\n\nbutton.clear-search svg {\n width: 14px;\n position: relative;\n top: 2px;\n stroke: var(--pfe-theme--color--surface--border, #d2d2d2);\n}\n\nbutton.clear-search:hover svg,\nbutton.clear-search:focus svg {\n opacity: 1;\n stroke: var(--pfe-theme--color--link, #06c);\n}\n\nbutton[disabled].clear-search:hover svg,\nbutton[disabled].clear-search:focus svg {\n stroke: var(--pfe-theme--color--surface--border, #d2d2d2);\n}\n\nbutton.search-button {\n margin-top: 1px;\n margin-bottom: 1px;\n right: 1px;\n width: 30px;\n background-color: var(--pfe-theme--color--surface--lightest, #fff);\n}\n\nbutton.search-button svg {\n fill: var(--pfe-theme--color--link, #06c);\n width: 18px;\n position: relative;\n top: 2px;\n stroke: var(--pfe-theme--color--surface--border, #d2d2d2);\n}\n\nbutton.search-button:hover svg,\nbutton.search-button:focus svg {\n fill: var(--pfe-theme--color--link--hover, #004080);\n}\n\nbutton.search-button:disabled svg {\n fill: var(--pfe-theme--color--ui-disabled, #d2d2d2);\n}\n\npfe-button.search-button--textual {\n margin-left: 16px;\n}\n\n.loading {\n position: absolute;\n width: 30px;\n right: 52px;\n top: 0px;\n bottom: 0px;\n}\n\n.loading svg {\n width: 26px;\n padding-top: 7px;\n}\n","@mixin browser-query($browser-list) {\n @each $browser in $browser-list {\n @if $browser == ie11 {\n @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { /* IE10+ */\n @content;\n }\n }\n @if $browser == edge12 {\n @supports (-ms-accelerator: true) { /* Microsoft Edge Browser 12+ */\n @content;\n }\n }\n @if $browser == edge {\n @supports (-ms-ime-align: auto) { /* Microsoft Edge Browser 16+ (All) */\n @content;\n }\n }\n @if $browser == firefox {\n @media all and (min--moz-device-pixel-ratio:0) { /* Mozilla Firefox (All) */\n @content;\n }\n }\n }\n}\n\n@mixin pfe-transition($properties...) {\n $return: null;\n @each $property in $properties {\n @if length($property) == 1 {\n $return: append($return, #{$property} 250ms $pfe-global--animation-timing, comma);\n }\n @else if length($property) == 2 {\n $return: append($return, nth($property, 1) nth($property, 2), comma);\n }\n }\n transition: $return;\n}\n\n// Make a CSS arrow\n@mixin pfe-arrow($type, $color, $width: 8px, $height: 5px, $pseudo: false) {\n $direction: (\n up: 180deg,\n down: 0deg,\n right: -90deg,\n left: 90deg,\n );\n border-style: pfe-var(surface--border-style);\n border-width: $width $height 0;\n border-color: transparent;\n border-top-color: $color;\n transform: rotate(map-get($direction, $type));\n @if $pseudo {\n display: inline-block;\n content: \"\";\n @content;\n }\n}\n\n@mixin pfe-arrow-color($color) {\n border-top-color: $color;\n}\n\n@mixin pfe-print-media {\n @media print {\n @content;\n }\n}\n\n@mixin pfe-print-background {\n -webkit-print-color-adjust: exact;\n color-adjust: exact;\n}\n\n@mixin pfe-no-print-background {\n @include pfe-print-media {\n background-color: white !important;\n background-image: none !important;\n box-shadow: none !important;\n }\n}\n\n@mixin pfe-hidden {\n @at-root #{&}([hidden]) {\n display: none;\n }\n}\n\n@mixin pfe-pipe( $position: right, $padding: 0, $margin: 0, $color: $border-color) {\n border: pfe-var(surface--border-width) pfe-var(surface--border-style) transparent;\n border-#{$position}-color: $color;\n @if $position == right {\n padding-left: $padding;\n margin-right: $margin;\n }\n @else if $position == left {\n padding-right: $padding;\n margin-left: $margin;\n }\n}\n\n@mixin pfe-retina {\n @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n @content;\n }\n}\n\n@mixin pfe-icon($path, $display: flex, $size: 1em) {\n display: #{$display};\n @if $path {\n background: #{$path} no-repeat;\n background-size: contain;\n background-position: center;\n }\n width: #{$size};\n height: #{$size};\n @content;\n}\n\n@mixin pfe-local-debug($map: $LOCAL-VARIABLES) {\n :root {\n @include pfe-print-local($map);\n }\n} ","////\n/// Tools for leveraging custom property stacks\n/// @group custom-properties\n/// @author castastrophe\n////\n\n/// This will print all the broadcast variables, and set the value to the context of your choosing, like on-dark or on-saturated.\n/// @param {String} $context - Look up values from contexts, i.e. \"light\" or \"saturated\"\n/// @param {List | String} $broadcast [$BROADCAST-VARS] - Optionally specify only one broadcast variable instead of the whole set, i.e. \"text\"\n/// @see $custom-prop-prefix\n/// @see $BROADCAST-VARS\n/// @example - scss - Usage in a container component, i.e. pfe-card\n/// :host {\n/// @include pfe-set-broadcast-context(dark);\n/// }\n/// @example - css - Rendered output\n/// :host {\n/// --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff);\n/// --pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #99ccff);\n/// --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #cce6ff);\n/// --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #cce6ff);\n/// --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #b38cd9);\n/// --pfe-broadcasted--link-decoration: none;\n/// --pfe-broadcasted--link-decoration--hover: underline;\n/// --pfe-broadcasted--link-decoration--focus: underline;\n/// --pfe-broadcasted--link-decoration--visited: none;\n/// }\n///\n@mixin pfe-set-broadcast-context($context, $broadcast: $BROADCAST-VARS) {\n @each $type in $broadcast {\n $list: ();\n $string: \"\";\n $context_string: \"\";\n $state: \"\";\n\n @if str-starts-with($type, \"link\") {\n $list: append($list, \"#{$type}\");\n\n @each $s in (hover, focus, visited) {\n $state: \"--#{$s}\";\n $string: \"#{$type}#{$state}\";\n\n @if not index($list, $string) {\n $list: append($list, \"#{$type}#{$state}\");\n }\n }\n } @else {\n @if not index($list, $string) {\n $list: append($list, \"#{$type}\");\n }\n }\n\n @if index($CONTEXTS, $context) != null {\n @if $context != \"light\" {\n $context_string: \"--on-#{$context}\";\n }\n }\n\n @each $item in $list {\n @if not index($BROADCAST-VARS, $type) {\n @warn \"--#{$custom-prop-prefix}-broadcasted--#{$item} variable is not in the $BROADCAST-VARS list.\";\n } @else if not pfe-broadcasted(#{$item}#{$context_string}) {\n @warn \"#{$item}#{$context_string} value does not currently exist.\";\n } @else {\n @if index($CONTEXTS, $context) != null {\n --#{$custom-prop-prefix}-broadcasted--#{$item}: #{pfe-var(#{$item}#{$context_string})};\n } @else {\n @error \"The #{$context} context does not appear to be part of a supported context.\";\n }\n }\n }\n }\n}\n\n/// Returns CSS Variable for the local component-scoped variable\n/// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--'\n/// @param {String} $value - The value of the css variable being defined\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $custom-prop-prefix\n/// @see $LOCAL\n/// @example - scss\n/// :host {\n/// padding-top: pfe-local(paddingTop);\n/// padding-bottom: pfe-local(paddingBottom);\n/// }\n@mixin pfe-print-local($map: $LOCAL-VARIABLES) {\n @each $property, $value in $map {\n $name: \"--#{$property}\";\n $styles: $value;\n\n @if type-of($value) == \"map\" {\n @each $prop, $v in $value {\n $name: \"__#{$property}--#{$prop}\";\n $styles: $v;\n\n // Print the variable definition\n --#{$custom-prop-prefix}-#{$LOCAL}#{$name}: #{$styles};\n }\n } @else {\n // Print the variable definition\n --#{$custom-prop-prefix}-#{$LOCAL}#{$name}: #{$styles};\n }\n }\n}\n\n/// Surface properties\n/// This mixin creates an attribute for all the surface colors, then prints the local background color variable for the component, with the correct context colors.\n/// @param {List | String} $surfaces [$SURFACES] - defaults to the global $SURFACES list of all supported colors\n/// @param {String} $attr-name [pfe-var] - defaults to pfe-var, optionally pass in a custom name for the data attribute\n/// @example - scss - In your component stylesheet\n/// $LOCAL: band;\n/// @include pfe-surfaces;\n/// @example - css - Rendered result\n/// :host([color=\"darker\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--darker, #464646);\n/// --context: dark;\n/// }\n/// :host([color=\"darkest\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--darkest, #131313);\n/// --context: dark;\n/// }\n/// :host([color=\"base\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--base, #dfdfdf);\n/// --context: light;\n/// }\n/// :host([color=\"lighter\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--lighter, #ececec);\n/// --context: light;\n/// }\n/// :host([color=\"lightest\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--lightest, #fff);\n/// --context: light;\n/// }\n/// :host([color=\"accent\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--accent, #ee0000);\n/// --context: saturated;\n/// }\n/// :host([color=\"complement\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--complement, #0477a4);\n/// --context: saturated;\n/// }\n@mixin pfe-surfaces($surfaces: $SURFACE, $attr-name: color) {\n @each $color in $surfaces {\n $context: #{pfe-get-context(surface--#{$color}--context)};\n :host([#{$attr-name}=\"#{$color}\"]) {\n @include pfe-print-local(\n (\n BackgroundColor: pfe-var(surface--#{$color}),\n context: pfe-var(surface--#{$color}--context, #{$context})\n )\n );\n @extend %fallback-surface;\n }\n }\n}\n\n/// Prints the `on` attribute with IE11 fallbacks\n/// @param {List} contexts [$CONTEXTS] - defaults to the global $CONTEXTS list of all supported contexts\n/// @param {Boolean} ie-fallback [true] - defaults to true, prints IE11 fallbacks\n/// @example - scss - In your component styles\n/// @include pfe-contexts; // imports on=\"light\" etc support\n/// @example - css - Rendered outputs\n/// :host([on=\"dark\"]) {\n/// --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff);\n/// --pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #99ccff);\n/// --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #cce6ff);\n/// --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #cce6ff);\n/// --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #b38cd9);\n/// --pfe-broadcasted--link-decoration: none;\n/// --pfe-broadcasted--link-decoration--hover: underline;\n/// --pfe-broadcasted--link-decoration--focus: underline;\n/// --pfe-broadcasted--link-decoration--visited: none;\n/// }\n/// @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { /* IE10+ */\n/// :host([on=\"dark\"]) {\n/// color: #fff;\n/// color: var(--pfe-theme--color--text--on-dark, #fff);\n/// }\n/// }\n/// // ...as well as all the values for :host([on=\"saturated\"]) and :host([on=\"light\"])\n@mixin pfe-contexts($contexts: $CONTEXTS, $ie-fallback: true) {\n // Helper attributes to aid in theming\n @each $context in $contexts {\n :host([on=\"#{$context}\"]) {\n @include pfe-set-broadcast-context($context);\n }\n }\n @if $ie-fallback {\n :host {\n @extend %fallback-text;\n }\n }\n}\n","////\n/// Tools for leveraging custom property stacks\n/// @group custom-properties\n/// @author castastrophe\n////\n\n/// Get full theme stack with a fallback from the provided map - used by pfe-var and pfe-zindex\n/// @param {String} $category - Category name to be appended to variables within the map/system\n/// @param {String} $key - Variable name to be used and prepended with --pfe-theme\n/// @param {Map} $map - Sass map of variables\n/// @param {String} $fallback [null] - Optional fallback override\n/// @param {Boolean} $use-fallback [true] - Optional hook to return a stack with no fallback value\n/// @requires $custom-prop-prefix\n/// @return {String} theme stack with fallback value from a sass map\n@function pfe-get-from-map($category, $key, $map, $fallback: null, $prefix: \"#{$custom-prop-prefix}-theme\", $use-fallback: true) {\n // Start building the variable declaration\n $var-declaration: \"--#{$prefix}--\";\n @if $prefix == \"pf-c\" {\n $var-declaration: \"--#{$prefix}-\"; // one dash at the end\n }\n // If the category exists, inject that into the string\n @if $category != \"\" {\n $var-declaration: \"#{$var-declaration}#{$category}--\";\n }\n // Append the key to the string\n $var-declaration: \"#{$var-declaration}#{$key}\";\n\n // If the fallback is not provided but use-fallback is set to true\n @if $fallback == null and $use-fallback and map-get($map, $key) != null {\n $fallback: map-get($map, $key);\n }\n @if $fallback != null {\n // Create the variable declaration\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration}); \n}\n\n\n\n/// Returns CSS Var for the local component-scoped variable\n/// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--'\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $custom-prop-prefix\n/// @see $LOCAL\n/// @example\n/// :host {\n/// padding-top: #{pfe-local(paddingTop)};\n/// padding-bottom: #{pfe-local(paddingBottom)};\n/// }\n@function pfe-local($cssvar, $fallback: null, $region: null) {\n // If a fallback is not defined, use the global variables map\n @if $fallback == null and length($LOCAL-VARIABLES) > 0 {\n @if $region == null {\n $fallback: map-get($LOCAL-VARIABLES, $cssvar);\n }\n @else {\n $submap: map-get($LOCAL-VARIABLES, $region);\n @if type-of($submap) == \"map\" {\n $fallback: map-deep-get($LOCAL-VARIABLES, $region, $cssvar);\n }\n }\n }\n\n // If a region value exists, build the region string\n @if $region != null {\n $region: \"__#{$region}\";\n }\n\n // Start building the variable declaration\n $var-declaration: \"--#{$custom-prop-prefix}-#{$LOCAL}#{$region}--#{to-string($cssvar, '--')}\";\n \n @if $fallback != null {\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration});\n}\n\n/// Fetches a CSS variable stack for broadcasted variables, providing a hook for context\n/// to influence the styles of children elements such as p tags or links.\n/// @param {String} $broadcast - name of the broadcast variable to apply\n/// @requires {String} $custom-prop-prefix - Name of repo, which is \"pfe\"\n/// @example - scss\n/// :host {\n/// color: pfe-broadcasted(link);\n/// }\n/// @example - css\n/// :host {\n/// color: var(--pfe-broadcasted--link, #06c);\n/// }\n@function pfe-broadcasted($broadcast, $use-fallback: true) {\n $fallback: \"\";\n @if $use-fallback {\n $fallback: \", #{map-get($pfe-broadcasted, #{to-string($broadcast,'--')})}\";\t\n }\n @if not index($BROADCAST-VARS, first(str-split($broadcast, '--'))) {\n @error \"--#{$custom-prop-prefix}-broadcasted--#{$broadcast} variable is not currently supported.\";\n }\n @else {\n @return var(--#{$custom-prop-prefix}-broadcasted--#{to-string($broadcast,'--')}#{unquote($fallback)});\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme--zindex\n/// @requires {Map} $pfe-zindex - SASS Map of z-index values\n/// @see $pfe-zindex\n/// @example - scss - In your component styles\n/// .my-element {\n/// z-index: pfe-zindex( content );\n/// }\n\n@function pfe-zindex($cssvar) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-zindex, $var-name) != null {\n @return pfe-get-from-map(\"zindex\", $var-name, $pfe-zindex);\n }\n @else {\n @error \"The key for #{$var-name} could not be found in the $pfe-zindex map.\";\n }\n}\n\n/// Returns the value (only) of a property from the respective maps\n/// Similar to pfe-var, but does not include css variable in the compiled CSS\n/// @param {String} $name - Name of the key for the map\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example - scss - In your component styles\n/// .my-element {\n/// background-color: pfe-fetch( ui-base );\n/// }\n@function pfe-fetch($name, $region: null) {\n $var-name: to-string($name, \"--\");\n @if $region != null and map-deep-get($LOCAL-VARIABLES, $region, $var-name) != null {\n @return map-deep-get($LOCAL-VARIABLES, $region, $var-name);\n }\n @else if $region == null and map-get($LOCAL-VARIABLES, $var-name) != null {\n @return map-get($LOCAL-VARIABLES, $var-name);\n }\n @else if map-get($pfe-vars, $var-name) != null {\n @return map-get($pfe-vars, $var-name);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return map-get($pfe-colors, $var-name);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return map-get($pfe-broadcasted, $var-name);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return map-get($pfe-typography-base, $var-name);\n }\n\n // PATTERNFLY CORE\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return map-get($pf-type-sizing, $var-name);\n }\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return map-get($pf-type-sizing--component, $var-name);\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return map-get($pf-type-sizing--modifers, $var-name);\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return map-get($pf-type-sizing--content, $var-name);\n }\n // DEPRECATED\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return map-get($pfe-typography-base-deprecated, $var-name);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return map-get($pfe-typography-deprecated, $var-name);\n }\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme\n/// @param {String} $fallback [null] - Optional custom fallback\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example scss - In your component styles\n/// .my-element {\n/// padding: pfe-var( container-spacer );\n/// font-size: pfe-var( font-size );\n/// }\n/// @example - css Rendered output\n/// .my-element {\n/// padding: var(--pfe-theme--container-spacer, 16px);\n/// font-size: var(--pfe-theme--font-size, 16px);\n/// }\n@function pfe-var($cssvar, $fallback: null) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-vars, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-vars, $fallback);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return pfe-get-from-map(\"color\", $var-name, $pfe-colors, $fallback);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-broadcasted);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base, $fallback);\n }\n // PATTERNFLY CORE:\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing, $fallback, $prefix: \"pf-global\");\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--modifers, $fallback, $prefix: \"pf-c\");\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--content, $fallback, $prefix: \"pf-c\");\n }\n // PFE components (must be below core)\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--component, $fallback);\n }\n\n // DEPRECATED:\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base-deprecated, $fallback);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-deprecated, $fallback);\n }\n\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}"],"sourceRoot":"../src"} \ No newline at end of file diff --git a/elements/pfe-autocomplete/dist/pfe-autocomplete.js b/elements/pfe-autocomplete/dist/pfe-autocomplete.js new file mode 100644 index 0000000000..5a77a838a6 --- /dev/null +++ b/elements/pfe-autocomplete/dist/pfe-autocomplete.js @@ -0,0 +1,655 @@ +import PFElement from '../../pfelement/dist/pfelement.js'; +import '../../pfe-button/dist/pfe-button.js'; + +/*! + * PatternFly Elements: PfeAutocomplete 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * +*/ + +const KEYCODE = { + ENTER: 13, + DOWN: 40, + UP: 38, + ESC: 27, +}; + +// use this variable to debounce api call when user types very fast +let throttle = false; + +class PfeAutocomplete extends PFElement { + + // Injected at build-time + static get version() { + return "1.12.3"; + } + + // Injected at build-time + get html() { + return ` + +
      +
      + + + + + + + + + + + +
      + +
      + + +`; + } + + // @TODO: Deprecating in 1.0 release + // Injected at build-time + static get schemaProperties() { + return {"debounce_timer":{"title":"Debounce","description":"The amount of time that should pass before the next API call is made","type":"string","prefixed":false},"init_value":{"title":"Initial value","description":"An initial value to show in the input field","type":"string","prefixed":false},"is_disabled":{"title":"Is disabled","description":"Disable the input","type":"boolean","prefixed":false},"button-text":{"title":"Button text","description":"Add button with text next to input field","type":"string","prefixed":false}}; + } + + // Injected at build-time + static get slots() { + return {"content":{"title":"Content","type":"array","namedSlot":false,"items":{"oneOf":[{"$ref":"input"}]},"required":true}}; + } + + static get tag() { + return "pfe-autocomplete"; + } + + get schemaUrl() { + return "pfe-autocomplete.json"; + } + + get templateUrl() { + return "pfe-autocomplete.html"; + } + + get styleUrl() { + return "pfe-autocomplete.scss"; + } + + static get properties() { + return { + initValue: { + title: "Initial Value", + type: String, + observer: "_initValueChanged", + }, + loading: { + title: "Loading", + type: Boolean, + default: false, + observer: "_loadingChanged", + }, + isDisabled: { + title: "Is disabled", + type: Boolean, + default: false, + observer: "_isDisabledChanged", + }, + debounce: { + title: "Debounce", + type: Number, + default: 300, + }, + selectedValue: { + title: "Selected value", + type: String, + }, + buttonText: { + title: "Button text", + type: String, + observer: "_buttonTextChanged", + }, + }; + } + + static get events() { + return { + search: `${this.tag}:search-event`, + select: `${this.tag}:option-selected`, + optionsShown: `${this.tag}:options-shown`, + optionCleared: `${this.tag}:option-cleared`, + slotchange: `slotchange`, + }; + } + + constructor() { + super(PfeAutocomplete); + + this._inputInit(); + + this._slotchangeHandler = this._slotchangeHandler.bind(this); + + this._slot = this.shadowRoot.querySelector("slot"); + this._slot.addEventListener(PfeAutocomplete.events.slotchange, this._slotchangeHandler); + + // @TODO: Confirm this is translatable + this._ariaAnnounceTemplate = "There are ${numOptions} suggestions. Use the up and down arrows to browse."; + + // clear button + this._clearBtn = this.shadowRoot.querySelector(".clear-search"); + this._clearBtn.addEventListener("click", this._clear.bind(this)); + + // search button + this._searchBtn = this.shadowRoot.querySelector(".search-button"); + this._searchBtn.addEventListener("click", this._search.bind(this)); + + // textual search button + this._searchBtnTextual = this.shadowRoot.querySelector(".search-button--textual"); + this._searchBtnText = this.shadowRoot.querySelector(".search-button__text"); + this._searchBtnTextual.addEventListener("click", this._search.bind(this)); + + this._dropdown = this.shadowRoot.querySelector("#dropdown"); + this._dropdown.data = []; + + this.activeIndex = null; + + this.addEventListener("keyup", this._inputKeyUp.bind(this)); + + // these two events, fire search + this.addEventListener(PfeAutocomplete.events.search, this._closeDroplist.bind(this)); + this.addEventListener(PfeAutocomplete.events.select, this._optionSelected.bind(this)); + } + + _inputInit() { + // input box + let slotNodes = this.shadowRoot.querySelector("slot").assignedNodes(); + let slotElems = slotNodes.filter((n) => n.nodeType === Node.ELEMENT_NODE); + if (slotElems.length === 0) { + console.error(`${PfeAutocomplete.tag}: There must be a input tag in the light DOM`); + return; + } + this._input = slotElems[0]; + + if (this._input.tagName.toLowerCase() !== "input") { + console.error(`${PfeAutocomplete.tag}: The only child in the light DOM must be an input tag`); + + return; + } + + this._input.addEventListener("input", this._inputChanged.bind(this)); + this._input.addEventListener("blur", this._closeDroplist.bind(this)); + + this._input.setAttribute("role", "combobox"); + + if (!this._input.hasAttribute("aria-label")) { + this._input.setAttribute("aria-label", "Search"); + } + + this._input.setAttribute("aria-autocomplete", "list"); + this._input.setAttribute("aria-haspopup", "true"); + this._input.setAttribute("aria-owns", "droplist-items"); + this._input.setAttribute("aria-controls", "droplist-items"); + this._input.setAttribute("aria-expanded", "false"); + this._input.setAttribute("type", "search"); + this._input.setAttribute("autocomplete", "off"); + this._input.setAttribute("autocorrect", "off"); + this._input.setAttribute("autocapitalize", "off"); + this._input.setAttribute("spellcheck", "false"); + + this._input.setAttribute( + "style", + `input[type=search]::-ms-clear { display: none; width : 0; height: 0; }input[type = search]:: -ms - reveal { display: none; width: 0; height: 0; }" nput[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; }` + ); + } + + disconnectedCallback() { + super.disconnectedCallback(); + + this.removeEventListener("keyup", this._inputKeyUp); + + this.removeEventListener(PfeAutocomplete.events.search, this._closeDroplist); + this.removeEventListener(PfeAutocomplete.events.select, this._optionSelected); + this._slot.removeEventListener(PfeAutocomplete.events.slotchange, this._slotchangeHandler); + if (this._input) { + this._input.removeEventListener("input", this._inputChanged); + this._input.removeEventListener("blur", this._closeDroplist); + } + + this._clearBtn.removeEventListener("click", this._clear); + this._searchBtn.removeEventListener("click", this._search); + this._searchBtnTextual.removeEventListener("click", this._search); + } + + _initValueChanged(oldVal, newVal) { + if (newVal) { + // set inputbox and buttons in the inner component + this._input.value = newVal; + if (newVal !== "" && !this.isDisabled) { + this._searchBtn.removeAttribute("disabled"); + this._searchBtnTextual.removeAttribute("disabled"); + this._clearBtn.removeAttribute("hidden"); + } else { + this._searchBtn.setAttribute("disabled", ""); + this._searchBtnTextual.setAttribute("disabled", ""); + this._clearBtn.setAttribute("hidden", ""); + } + } + } + + _loadingChanged() { + if (!this.loading || this._input.value === "") { + this.shadowRoot.querySelector(".loading").setAttribute("hidden", ""); + } else { + this.shadowRoot.querySelector(".loading").removeAttribute("hidden"); + } + } + + _isDisabledChanged() { + if (this.isDisabled) { + this._clearBtn.setAttribute("disabled", ""); + this._searchBtn.setAttribute("disabled", ""); + this._searchBtnTextual.setAttribute("disabled", ""); + this._input.setAttribute("disabled", ""); + } else { + this._clearBtn.removeAttribute("disabled"); + this._searchBtn.removeAttribute("disabled"); + this._searchBtnTextual.removeAttribute("disabled"); + this._input.removeAttribute("disabled"); + } + } + + _buttonTextChanged(oldVal, newVal) { + if (oldVal === null) { + this._searchBtn.setAttribute("hidden", ""); + this._searchBtnText.innerHTML = newVal || "Search"; + this._searchBtnTextual.removeAttribute("hidden"); + } else if (newVal === null || newVal === "") { + this._searchBtnTextual.setAttribute("hidden", ""); + this._searchBtn.removeAttribute("hidden"); + } else { + this._searchBtnText.innerHTML = newVal || "Search"; + } + } + + _slotchangeHandler() { + this._inputInit(); + this._dropdown._ariaAnnounceTemplate = this.getAttribute("aria-announce-template") || this._ariaAnnounceTemplate; + } + + _inputChanged() { + if (this._input.value === "") { + this._searchBtn.setAttribute("disabled", ""); + this._searchBtnTextual.setAttribute("disabled", ""); + this._clearBtn.setAttribute("hidden", ""); + + this._reset(); + return; + } else { + if (!this._input.hasAttribute("disabled")) { + this._searchBtn.removeAttribute("disabled"); + this._searchBtnTextual.removeAttribute("disabled"); + } + this._clearBtn.removeAttribute("hidden"); + } + + if (throttle === false) { + throttle = true; + + window.setTimeout(() => { + this._sendAutocompleteRequest(this._input.value); + throttle = false; + }, this.debounce); + } + } + + _clear() { + this._input.value = ""; + this._clearBtn.setAttribute("hidden", ""); + this._searchBtn.setAttribute("disabled", ""); + this._searchBtnTextual.setAttribute("disabled", ""); + this._input.focus(); + this.emitEvent(PfeAutocomplete.events.optionCleared, { + bubbles: true, + composed: true, + detail: { searchValue: "" }, + }); + } + + _search() { + this._doSearch(this._input.value); + } + + _closeDroplist() { + this._dropdown.open = null; + this._dropdown.removeAttribute("active-index"); + this._input.setAttribute("aria-expanded", "false"); + } + + _openDroplist() { + this.activeIndex = null; + this._dropdown.open = true; + this._dropdown.setAttribute("active-index", null); + this.emitEvent(PfeAutocomplete.events.optionsShown, { + composed: true, + }); + this._input.setAttribute("aria-expanded", "true"); + } + + _optionSelected(e) { + let selectedValue = e.detail.optionValue; + + // update input box with selected value from options list + this._input.value = selectedValue; + + // send search request + this._doSearch(selectedValue); + } + + _doSearch(searchQuery) { + this.emitEvent(PfeAutocomplete.events.search, { + detail: { searchValue: searchQuery }, + composed: true, + }); + this._reset(); + this.selectedValue = searchQuery; + } + + _sendAutocompleteRequest(input) { + if (!this.autocompleteRequest) return; + + this.autocompleteRequest({ query: input }, this._autocompleteCallback.bind(this)); + } + + _autocompleteCallback(response) { + this._dropdown.data = response; + this._dropdown.reflow = true; + response.length !== 0 ? this._openDroplist() : this._closeDroplist(); + } + + _reset() { + this._dropdown.activeIndex = null; + this._input.setAttribute("aria-activedescendant", ""); + this._dropdown.data = []; + this._closeDroplist(); + } + + /** + * Returns the HTML of the active element + * @param {number} activeIndex Index of an element in the droplist + * @return {string} The HTML inside of the given index as a string + */ + _activeOption(activeIndex) { + if (activeIndex === null || activeIndex === "null") return; + return this._dropdown.shadowRoot.querySelector("li:nth-child(" + (parseInt(activeIndex, 10) + 1) + ")").innerHTML; + } + + /** + * Handle keyboard input, we care about arrow keys, enter, and escape + * @param {object} e - keypress event + */ + _inputKeyUp(e) { + let key = e.keyCode; + + // Check to see if it's a key we care about + if ( + this._dropdown.data.length === 0 && + key !== KEYCODE.DOWN && + key !== KEYCODE.UP && + key !== KEYCODE.ENTER && + key !== KEYCODE.ESC + ) + return; + + let activeIndex = this._dropdown.activeIndex; + let optionsLength = this._dropdown.data.length; + + if (key == KEYCODE.ESC) { + this._closeDroplist(); + } else if (key === KEYCODE.UP) { + if (!this._dropdown.open) { + return; + } + + activeIndex = activeIndex === null || activeIndex === "null" ? optionsLength : parseInt(activeIndex, 10); + + activeIndex -= 1; + + // Go to the last item if we're at -1 index + if (activeIndex < 0) { + activeIndex = optionsLength - 1; + } + + // Get the HTML of the active element + this._input.value = this._activeOption(activeIndex); + } else if (key === KEYCODE.DOWN) { + if (!this._dropdown.open) { + return; + } + + activeIndex = activeIndex === null || activeIndex === "null" ? -1 : parseInt(activeIndex, 10); + activeIndex += 1; + + if (activeIndex > optionsLength - 1) { + activeIndex = 0; + } + + // Go to the last item if we're at -1 index + this._input.value = this._activeOption(activeIndex); + } else if (key === KEYCODE.ENTER) { + if (this._activeOption(activeIndex)) { + this.emitEvent(PfeAutocomplete.events.select, { + detail: { optionValue: this._activeOption(activeIndex) }, + composed: true, + }); + + return; + } + + let selectedValue = this._input.value; + this._doSearch(selectedValue); + return; + } + + if (activeIndex !== null && activeIndex !== "null") { + this._input.setAttribute("aria-activedescendant", "option-" + activeIndex); + } else { + this._input.setAttribute("aria-activedescendant", ""); + } + + this.activeIndex = activeIndex; + this._dropdown.activeIndex = activeIndex; + } +} + +/* +* - Attributes ------------------------------------ +* open | Set when the combo box dropdown is open +* active-index | Set selected option +* reflow | Re-renders the dropdown + +* - Events ---------------------------------------- +* pfe-autocomplete:option-selected | Fires when an option is selected. + event.details.optionValue contains the selected value. +*/ + +class PfeSearchDroplist extends PFElement { + + // Injected at build-time + static get version() { + return "1.12.3"; + } + + // Injected at build-time + get html() { + return ` + +
      +
      +
        +
      +
      `; + } + + static get tag() { + return "pfe-search-droplist"; + } + + get templateUrl() { + return "pfe-search-droplist.html"; + } + + get styleUrl() { + return "pfe-search-droplist.scss"; + } + + static get properties() { + return { + open: { + title: "Open", + type: Boolean, + }, + reflow: { + title: "Reflow", + type: Boolean, + observer: "_renderOptions", + }, + activeIndex: { + title: "Active index", + type: Number, + observer: "_activeIndexChanged", + }, + }; + } + + constructor() { + super(PfeSearchDroplist); + } + + connectedCallback() { + super.connectedCallback(); + + this._ariaAnnounce = this.shadowRoot.querySelector(".suggestions-aria-help"); + + this.activeIndex = null; + this._ul = this.shadowRoot.querySelector("ul"); + this._ul.addEventListener("mousedown", this._optionSelected.bind(this)); + } + + disconnectedCallback() { + super.disconnectedCallback(); + this._ul.removeEventListener("mousedown", this._optionSelected); + } + + _optionSelected(e) { + if (e.target.tagName === "LI") { + this.emitEvent(PfeAutocomplete.events.select, { + detail: { optionValue: e.target.innerText }, + composed: true, + }); + } + } + + _renderOptions() { + let options = this.data; + let ariaAnnounceText = ""; + + if (this._ariaAnnounceTemplate) { + ariaAnnounceText = this._ariaAnnounceTemplate.replace("${numOptions}", options.length); + } + + this._ariaAnnounce.textContent = ariaAnnounceText; + this._ariaAnnounce.setAttribute("aria-live", "polite"); + + this._ul.innerHTML = `${options + .map((item, index) => { + return `
    1. ${item}
      2. `; + }) + .join("")}`; + } + + /** + * Handle state changes when active droplist item has been changed + */ + _activeIndexChanged() { + // Make a quick exit if necessary + if (!this.data || this.data.length === 0 || this.activeIndex === null || this.activeIndex === "null") return; + + // Previous element may not exist + const previouslyActiveElement = this._ul.querySelector(".active"); + const activeOption = this._ul.querySelector("li:nth-child(" + (parseInt(this.activeIndex, 10) + 1) + ")"); + + // Handle any element that should no longer be selected + if (previouslyActiveElement) { + previouslyActiveElement.classList.remove("active"); + previouslyActiveElement.removeAttribute("aria-selected"); + } + + // Update newly selected element to have proper attributes and settings + activeOption.classList.add("active"); + // @note Set aria-selected on the active list item, should only occur on the list item that is being referenced + // by the aria-activedescendant attribute. This attribute is required when creating a listbox autocomplete + // component. It helps ensure that the screen reader user knows what element is active when moving through the + // list of items with the arrow keys + activeOption.setAttribute("aria-selected", "true"); + + // scroll to selected element when selected item with keyboard is out of view + let ulWrapper = this.shadowRoot.querySelector(".droplist"); + let activeOptionHeight = activeOption.offsetHeight; + activeOptionHeight += parseInt(window.getComputedStyle(activeOption).getPropertyValue("margin-bottom"), 10); + ulWrapper.scrollTop = activeOption.offsetTop - ulWrapper.offsetHeight + activeOptionHeight; + + return activeOption; + } +} + +PFElement.create(PfeSearchDroplist); +PFElement.create(PfeAutocomplete); + +export default PfeAutocomplete; +//# sourceMappingURL=pfe-autocomplete.js.map diff --git a/elements/pfe-autocomplete/dist/pfe-autocomplete.js.map b/elements/pfe-autocomplete/dist/pfe-autocomplete.js.map new file mode 100644 index 0000000000..a250178a2f --- /dev/null +++ b/elements/pfe-autocomplete/dist/pfe-autocomplete.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-autocomplete.js","sources":["../_temp/pfe-autocomplete.js"],"sourcesContent":["/*!\n * PatternFly Elements: PfeAutocomplete 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement.js\";\nimport \"../../pfe-button/dist/pfe-button.js\";\n\nconst KEYCODE = {\n ENTER: 13,\n DOWN: 40,\n UP: 38,\n ESC: 27,\n};\n\n// use this variable to debounce api call when user types very fast\nlet throttle = false;\n\nclass PfeAutocomplete extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n
      \n
      \n \n \n\n \n \n\n \n \n\n \n \n
      \n \n
      \n\n\n`;\n }\n\n // @TODO: Deprecating in 1.0 release\n // Injected at build-time\n static get schemaProperties() {\n return {\"debounce_timer\":{\"title\":\"Debounce\",\"description\":\"The amount of time that should pass before the next API call is made\",\"type\":\"string\",\"prefixed\":false},\"init_value\":{\"title\":\"Initial value\",\"description\":\"An initial value to show in the input field\",\"type\":\"string\",\"prefixed\":false},\"is_disabled\":{\"title\":\"Is disabled\",\"description\":\"Disable the input\",\"type\":\"boolean\",\"prefixed\":false},\"button-text\":{\"title\":\"Button text\",\"description\":\"Add button with text next to input field\",\"type\":\"string\",\"prefixed\":false}};\n }\n\n // Injected at build-time\n static get slots() {\n return {\"content\":{\"title\":\"Content\",\"type\":\"array\",\"namedSlot\":false,\"items\":{\"oneOf\":[{\"$ref\":\"input\"}]},\"required\":true}};\n }\n\n static get tag() {\n return \"pfe-autocomplete\";\n }\n\n get schemaUrl() {\n return \"pfe-autocomplete.json\";\n }\n\n get templateUrl() {\n return \"pfe-autocomplete.html\";\n }\n\n get styleUrl() {\n return \"pfe-autocomplete.scss\";\n }\n\n static get properties() {\n return {\n initValue: {\n title: \"Initial Value\",\n type: String,\n observer: \"_initValueChanged\",\n },\n loading: {\n title: \"Loading\",\n type: Boolean,\n default: false,\n observer: \"_loadingChanged\",\n },\n isDisabled: {\n title: \"Is disabled\",\n type: Boolean,\n default: false,\n observer: \"_isDisabledChanged\",\n },\n debounce: {\n title: \"Debounce\",\n type: Number,\n default: 300,\n },\n selectedValue: {\n title: \"Selected value\",\n type: String,\n },\n buttonText: {\n title: \"Button text\",\n type: String,\n observer: \"_buttonTextChanged\",\n },\n };\n }\n\n static get events() {\n return {\n search: `${this.tag}:search-event`,\n select: `${this.tag}:option-selected`,\n optionsShown: `${this.tag}:options-shown`,\n optionCleared: `${this.tag}:option-cleared`,\n slotchange: `slotchange`,\n };\n }\n\n constructor() {\n super(PfeAutocomplete);\n\n this._inputInit();\n\n this._slotchangeHandler = this._slotchangeHandler.bind(this);\n\n this._slot = this.shadowRoot.querySelector(\"slot\");\n this._slot.addEventListener(PfeAutocomplete.events.slotchange, this._slotchangeHandler);\n\n // @TODO: Confirm this is translatable\n this._ariaAnnounceTemplate = \"There are ${numOptions} suggestions. Use the up and down arrows to browse.\";\n\n // clear button\n this._clearBtn = this.shadowRoot.querySelector(\".clear-search\");\n this._clearBtn.addEventListener(\"click\", this._clear.bind(this));\n\n // search button\n this._searchBtn = this.shadowRoot.querySelector(\".search-button\");\n this._searchBtn.addEventListener(\"click\", this._search.bind(this));\n\n // textual search button\n this._searchBtnTextual = this.shadowRoot.querySelector(\".search-button--textual\");\n this._searchBtnText = this.shadowRoot.querySelector(\".search-button__text\");\n this._searchBtnTextual.addEventListener(\"click\", this._search.bind(this));\n\n this._dropdown = this.shadowRoot.querySelector(\"#dropdown\");\n this._dropdown.data = [];\n\n this.activeIndex = null;\n\n this.addEventListener(\"keyup\", this._inputKeyUp.bind(this));\n\n // these two events, fire search\n this.addEventListener(PfeAutocomplete.events.search, this._closeDroplist.bind(this));\n this.addEventListener(PfeAutocomplete.events.select, this._optionSelected.bind(this));\n }\n\n _inputInit() {\n // input box\n let slotNodes = this.shadowRoot.querySelector(\"slot\").assignedNodes();\n let slotElems = slotNodes.filter((n) => n.nodeType === Node.ELEMENT_NODE);\n if (slotElems.length === 0) {\n console.error(`${PfeAutocomplete.tag}: There must be a input tag in the light DOM`);\n return;\n }\n this._input = slotElems[0];\n\n if (this._input.tagName.toLowerCase() !== \"input\") {\n console.error(`${PfeAutocomplete.tag}: The only child in the light DOM must be an input tag`);\n\n return;\n }\n\n this._input.addEventListener(\"input\", this._inputChanged.bind(this));\n this._input.addEventListener(\"blur\", this._closeDroplist.bind(this));\n\n this._input.setAttribute(\"role\", \"combobox\");\n\n if (!this._input.hasAttribute(\"aria-label\")) {\n this._input.setAttribute(\"aria-label\", \"Search\");\n }\n\n this._input.setAttribute(\"aria-autocomplete\", \"list\");\n this._input.setAttribute(\"aria-haspopup\", \"true\");\n this._input.setAttribute(\"aria-owns\", \"droplist-items\");\n this._input.setAttribute(\"aria-controls\", \"droplist-items\");\n this._input.setAttribute(\"aria-expanded\", \"false\");\n this._input.setAttribute(\"type\", \"search\");\n this._input.setAttribute(\"autocomplete\", \"off\");\n this._input.setAttribute(\"autocorrect\", \"off\");\n this._input.setAttribute(\"autocapitalize\", \"off\");\n this._input.setAttribute(\"spellcheck\", \"false\");\n\n this._input.setAttribute(\n \"style\",\n `input[type=search]::-ms-clear { display: none; width : 0; height: 0; }input[type = search]:: -ms - reveal { display: none; width: 0; height: 0; }\" nput[type=\"search\"]::-webkit-search-decoration, input[type=\"search\"]::-webkit-search-cancel-button, input[type=\"search\"]::-webkit-search-results-button, input[type=\"search\"]::-webkit-search-results-decoration { display: none; }`\n );\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener(\"keyup\", this._inputKeyUp);\n\n this.removeEventListener(PfeAutocomplete.events.search, this._closeDroplist);\n this.removeEventListener(PfeAutocomplete.events.select, this._optionSelected);\n this._slot.removeEventListener(PfeAutocomplete.events.slotchange, this._slotchangeHandler);\n if (this._input) {\n this._input.removeEventListener(\"input\", this._inputChanged);\n this._input.removeEventListener(\"blur\", this._closeDroplist);\n }\n\n this._clearBtn.removeEventListener(\"click\", this._clear);\n this._searchBtn.removeEventListener(\"click\", this._search);\n this._searchBtnTextual.removeEventListener(\"click\", this._search);\n }\n\n _initValueChanged(oldVal, newVal) {\n if (newVal) {\n // set inputbox and buttons in the inner component\n this._input.value = newVal;\n if (newVal !== \"\" && !this.isDisabled) {\n this._searchBtn.removeAttribute(\"disabled\");\n this._searchBtnTextual.removeAttribute(\"disabled\");\n this._clearBtn.removeAttribute(\"hidden\");\n } else {\n this._searchBtn.setAttribute(\"disabled\", \"\");\n this._searchBtnTextual.setAttribute(\"disabled\", \"\");\n this._clearBtn.setAttribute(\"hidden\", \"\");\n }\n }\n }\n\n _loadingChanged() {\n if (!this.loading || this._input.value === \"\") {\n this.shadowRoot.querySelector(\".loading\").setAttribute(\"hidden\", \"\");\n } else {\n this.shadowRoot.querySelector(\".loading\").removeAttribute(\"hidden\");\n }\n }\n\n _isDisabledChanged() {\n if (this.isDisabled) {\n this._clearBtn.setAttribute(\"disabled\", \"\");\n this._searchBtn.setAttribute(\"disabled\", \"\");\n this._searchBtnTextual.setAttribute(\"disabled\", \"\");\n this._input.setAttribute(\"disabled\", \"\");\n } else {\n this._clearBtn.removeAttribute(\"disabled\");\n this._searchBtn.removeAttribute(\"disabled\");\n this._searchBtnTextual.removeAttribute(\"disabled\");\n this._input.removeAttribute(\"disabled\");\n }\n }\n\n _buttonTextChanged(oldVal, newVal) {\n if (oldVal === null) {\n this._searchBtn.setAttribute(\"hidden\", \"\");\n this._searchBtnText.innerHTML = newVal || \"Search\";\n this._searchBtnTextual.removeAttribute(\"hidden\");\n } else if (newVal === null || newVal === \"\") {\n this._searchBtnTextual.setAttribute(\"hidden\", \"\");\n this._searchBtn.removeAttribute(\"hidden\");\n } else {\n this._searchBtnText.innerHTML = newVal || \"Search\";\n }\n }\n\n _slotchangeHandler() {\n this._inputInit();\n this._dropdown._ariaAnnounceTemplate = this.getAttribute(\"aria-announce-template\") || this._ariaAnnounceTemplate;\n }\n\n _inputChanged() {\n if (this._input.value === \"\") {\n this._searchBtn.setAttribute(\"disabled\", \"\");\n this._searchBtnTextual.setAttribute(\"disabled\", \"\");\n this._clearBtn.setAttribute(\"hidden\", \"\");\n\n this._reset();\n return;\n } else {\n if (!this._input.hasAttribute(\"disabled\")) {\n this._searchBtn.removeAttribute(\"disabled\");\n this._searchBtnTextual.removeAttribute(\"disabled\");\n }\n this._clearBtn.removeAttribute(\"hidden\");\n }\n\n if (throttle === false) {\n throttle = true;\n\n window.setTimeout(() => {\n this._sendAutocompleteRequest(this._input.value);\n throttle = false;\n }, this.debounce);\n }\n }\n\n _clear() {\n this._input.value = \"\";\n this._clearBtn.setAttribute(\"hidden\", \"\");\n this._searchBtn.setAttribute(\"disabled\", \"\");\n this._searchBtnTextual.setAttribute(\"disabled\", \"\");\n this._input.focus();\n this.emitEvent(PfeAutocomplete.events.optionCleared, {\n bubbles: true,\n composed: true,\n detail: { searchValue: \"\" },\n });\n }\n\n _search() {\n this._doSearch(this._input.value);\n }\n\n _closeDroplist() {\n this._dropdown.open = null;\n this._dropdown.removeAttribute(\"active-index\");\n this._input.setAttribute(\"aria-expanded\", \"false\");\n }\n\n _openDroplist() {\n this.activeIndex = null;\n this._dropdown.open = true;\n this._dropdown.setAttribute(\"active-index\", null);\n this.emitEvent(PfeAutocomplete.events.optionsShown, {\n composed: true,\n });\n this._input.setAttribute(\"aria-expanded\", \"true\");\n }\n\n _optionSelected(e) {\n let selectedValue = e.detail.optionValue;\n\n // update input box with selected value from options list\n this._input.value = selectedValue;\n\n // send search request\n this._doSearch(selectedValue);\n }\n\n _doSearch(searchQuery) {\n this.emitEvent(PfeAutocomplete.events.search, {\n detail: { searchValue: searchQuery },\n composed: true,\n });\n this._reset();\n this.selectedValue = searchQuery;\n }\n\n _sendAutocompleteRequest(input) {\n if (!this.autocompleteRequest) return;\n\n this.autocompleteRequest({ query: input }, this._autocompleteCallback.bind(this));\n }\n\n _autocompleteCallback(response) {\n this._dropdown.data = response;\n this._dropdown.reflow = true;\n response.length !== 0 ? this._openDroplist() : this._closeDroplist();\n }\n\n _reset() {\n this._dropdown.activeIndex = null;\n this._input.setAttribute(\"aria-activedescendant\", \"\");\n this._dropdown.data = [];\n this._closeDroplist();\n }\n\n /**\n * Returns the HTML of the active element\n * @param {number} activeIndex Index of an element in the droplist\n * @return {string} The HTML inside of the given index as a string\n */\n _activeOption(activeIndex) {\n if (activeIndex === null || activeIndex === \"null\") return;\n return this._dropdown.shadowRoot.querySelector(\"li:nth-child(\" + (parseInt(activeIndex, 10) + 1) + \")\").innerHTML;\n }\n\n /**\n * Handle keyboard input, we care about arrow keys, enter, and escape\n * @param {object} e - keypress event\n */\n _inputKeyUp(e) {\n let key = e.keyCode;\n\n // Check to see if it's a key we care about\n if (\n this._dropdown.data.length === 0 &&\n key !== KEYCODE.DOWN &&\n key !== KEYCODE.UP &&\n key !== KEYCODE.ENTER &&\n key !== KEYCODE.ESC\n )\n return;\n\n let activeIndex = this._dropdown.activeIndex;\n let optionsLength = this._dropdown.data.length;\n\n if (key == KEYCODE.ESC) {\n this._closeDroplist();\n } else if (key === KEYCODE.UP) {\n if (!this._dropdown.open) {\n return;\n }\n\n activeIndex = activeIndex === null || activeIndex === \"null\" ? optionsLength : parseInt(activeIndex, 10);\n\n activeIndex -= 1;\n\n // Go to the last item if we're at -1 index\n if (activeIndex < 0) {\n activeIndex = optionsLength - 1;\n }\n\n // Get the HTML of the active element\n this._input.value = this._activeOption(activeIndex);\n } else if (key === KEYCODE.DOWN) {\n if (!this._dropdown.open) {\n return;\n }\n\n activeIndex = activeIndex === null || activeIndex === \"null\" ? -1 : parseInt(activeIndex, 10);\n activeIndex += 1;\n\n if (activeIndex > optionsLength - 1) {\n activeIndex = 0;\n }\n\n // Go to the last item if we're at -1 index\n this._input.value = this._activeOption(activeIndex);\n } else if (key === KEYCODE.ENTER) {\n if (this._activeOption(activeIndex)) {\n this.emitEvent(PfeAutocomplete.events.select, {\n detail: { optionValue: this._activeOption(activeIndex) },\n composed: true,\n });\n\n return;\n }\n\n let selectedValue = this._input.value;\n this._doSearch(selectedValue);\n return;\n }\n\n if (activeIndex !== null && activeIndex !== \"null\") {\n this._input.setAttribute(\"aria-activedescendant\", \"option-\" + activeIndex);\n } else {\n this._input.setAttribute(\"aria-activedescendant\", \"\");\n }\n\n this.activeIndex = activeIndex;\n this._dropdown.activeIndex = activeIndex;\n }\n}\n\n/*\n* - Attributes ------------------------------------\n* open | Set when the combo box dropdown is open\n* active-index | Set selected option\n* reflow | Re-renders the dropdown\n\n* - Events ----------------------------------------\n* pfe-autocomplete:option-selected | Fires when an option is selected.\n event.details.optionValue contains the selected value.\n*/\n\nclass PfeSearchDroplist extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n
      \n
      \n
        \n
      \n
      `;\n }\n\n static get tag() {\n return \"pfe-search-droplist\";\n }\n\n get templateUrl() {\n return \"pfe-search-droplist.html\";\n }\n\n get styleUrl() {\n return \"pfe-search-droplist.scss\";\n }\n\n static get properties() {\n return {\n open: {\n title: \"Open\",\n type: Boolean,\n },\n reflow: {\n title: \"Reflow\",\n type: Boolean,\n observer: \"_renderOptions\",\n },\n activeIndex: {\n title: \"Active index\",\n type: Number,\n observer: \"_activeIndexChanged\",\n },\n };\n }\n\n constructor() {\n super(PfeSearchDroplist);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this._ariaAnnounce = this.shadowRoot.querySelector(\".suggestions-aria-help\");\n\n this.activeIndex = null;\n this._ul = this.shadowRoot.querySelector(\"ul\");\n this._ul.addEventListener(\"mousedown\", this._optionSelected.bind(this));\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this._ul.removeEventListener(\"mousedown\", this._optionSelected);\n }\n\n _optionSelected(e) {\n if (e.target.tagName === \"LI\") {\n this.emitEvent(PfeAutocomplete.events.select, {\n detail: { optionValue: e.target.innerText },\n composed: true,\n });\n }\n }\n\n _renderOptions() {\n let options = this.data;\n let ariaAnnounceText = \"\";\n\n if (this._ariaAnnounceTemplate) {\n ariaAnnounceText = this._ariaAnnounceTemplate.replace(\"${numOptions}\", options.length);\n }\n\n this._ariaAnnounce.textContent = ariaAnnounceText;\n this._ariaAnnounce.setAttribute(\"aria-live\", \"polite\");\n\n this._ul.innerHTML = `${options\n .map((item, index) => {\n return `
    2. ${item}
      3. `;\n })\n .join(\"\")}`;\n }\n\n /**\n * Handle state changes when active droplist item has been changed\n */\n _activeIndexChanged() {\n // Make a quick exit if necessary\n if (!this.data || this.data.length === 0 || this.activeIndex === null || this.activeIndex === \"null\") return;\n\n // Previous element may not exist\n const previouslyActiveElement = this._ul.querySelector(\".active\");\n const activeOption = this._ul.querySelector(\"li:nth-child(\" + (parseInt(this.activeIndex, 10) + 1) + \")\");\n\n // Handle any element that should no longer be selected\n if (previouslyActiveElement) {\n previouslyActiveElement.classList.remove(\"active\");\n previouslyActiveElement.removeAttribute(\"aria-selected\");\n }\n\n // Update newly selected element to have proper attributes and settings\n activeOption.classList.add(\"active\");\n // @note Set aria-selected on the active list item, should only occur on the list item that is being referenced\n // by the aria-activedescendant attribute. This attribute is required when creating a listbox autocomplete\n // component. It helps ensure that the screen reader user knows what element is active when moving through the\n // list of items with the arrow keys\n activeOption.setAttribute(\"aria-selected\", \"true\");\n\n // scroll to selected element when selected item with keyboard is out of view\n let ulWrapper = this.shadowRoot.querySelector(\".droplist\");\n let activeOptionHeight = activeOption.offsetHeight;\n activeOptionHeight += parseInt(window.getComputedStyle(activeOption).getPropertyValue(\"margin-bottom\"), 10);\n ulWrapper.scrollTop = activeOption.offsetTop - ulWrapper.offsetHeight + activeOptionHeight;\n\n return activeOption;\n }\n}\n\nPFElement.create(PfeSearchDroplist);\nPFElement.create(PfeAutocomplete);\n\nexport default PfeAutocomplete;\n"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-autocomplete/dist/pfe-autocomplete.json b/elements/pfe-autocomplete/dist/pfe-autocomplete.json new file mode 100644 index 0000000000..69a434bb6b --- /dev/null +++ b/elements/pfe-autocomplete/dist/pfe-autocomplete.json @@ -0,0 +1,63 @@ +{ + "$schema": "http://json-schema.org/draft-04/schema#", + "title": "Autocomplete", + "description": "Autocomplete provides options in a dropdown list as user types in an input box by showing result from an api call.", + "type": "object", + "tag": "pfe-autocomplete", + "class": "pfe-autocomplete", + "category": "content", + "properties": { + "slots": { + "title": "Slots", + "description": "Definition of the supported slots", + "type": "object", + "properties": { + "content": { + "title": "Content", + "type": "array", + "namedSlot": false, + "items": { + "oneOf": [ + { + "$ref": "input" + } + ] + }, + "required": true + } + } + }, + "attributes": { + "title": "Attributes", + "type": "object", + "properties": { + "debounce_timer": { + "title": "Debounce", + "description": "The amount of time that should pass before the next API call is made", + "type": "string", + "prefixed": false + }, + "init_value": { + "title": "Initial value", + "description": "An initial value to show in the input field", + "type": "string", + "prefixed": false + }, + "is_disabled": { + "title": "Is disabled", + "description": "Disable the input", + "type": "boolean", + "prefixed": false + }, + "button-text": { + "title": "Button text", + "description": "Add button with text next to input field", + "type": "string", + "prefixed": false + } + } + } + }, + "required": ["slots", "attributes"], + "additionalProperties": false +} diff --git a/elements/pfe-autocomplete/dist/pfe-autocomplete.min.css.map b/elements/pfe-autocomplete/dist/pfe-autocomplete.min.css.map new file mode 100644 index 0000000000..1b8a1a2120 --- /dev/null +++ b/elements/pfe-autocomplete/dist/pfe-autocomplete.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../src/pfe-autocomplete.scss","../../../pfe-sass/extends/_extends.scss","../../../pfe-sass/mixins/_mixins.scss","../../../pfe-sass/mixins/_custom-properties.scss","pfe-autocomplete.css"],"names":[],"mappings":"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","file":"pfe-autocomplete.min.css","sourceRoot":"../src","sourcesContent":[null,null,null,null,".sr-only {\n position: absolute;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n :host {\n /* IE10+ */\n color: #151515 !important;\n }\n}\n\n:host([on=\"dark\"]) {\n --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff);\n --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted--on-dark, #d2d2d2);\n --pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #73bcf7);\n --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #bee1f4);\n --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #bee1f4);\n --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #bee1f4);\n --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration--on-dark, none);\n --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover--on-dark, underline);\n --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus--on-dark, underline);\n --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited--on-dark, none);\n}\n\n:host([on=\"saturated\"]) {\n --pfe-broadcasted--text: var(--pfe-theme--color--text--on-saturated, #fff);\n --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2);\n --pfe-broadcasted--link: var(--pfe-theme--color--link--on-saturated, #fff);\n --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-saturated, #fafafa);\n --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-saturated, #fafafa);\n --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);\n --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration--on-saturated, underline);\n --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover--on-saturated, underline);\n --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus--on-saturated, underline);\n --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited--on-saturated, underline);\n}\n\n:host([on=\"light\"]) {\n --pfe-broadcasted--text: var(--pfe-theme--color--text, #151515);\n --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted, #6a6e73);\n --pfe-broadcasted--link: var(--pfe-theme--color--link, #06c);\n --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover, #004080);\n --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus, #004080);\n --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited, #6753ac);\n --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration, none);\n --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover, underline);\n --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus, underline);\n --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited, none);\n}\n\n:host {\n display: block;\n position: relative;\n font-family: \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif;\n font-family: var(--pfe-theme--font-family, \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif);\n --pfe-autocomplete--BoxShadow: var(--pfe-theme--box-shadow--inset, inset 0 0 0.625rem 0 #fafafa);\n --pfe-autocomplete--BackgroundColor: var(--pfe-theme--color--surface--lightest, #fff);\n --pfe-autocomplete--Border: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #d2d2d2);\n}\n\n:host([button-text]) {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n}\n\n:host([button-text]) #wrapper {\n -webkit-box-flex: 1;\n -webkit-flex: 1;\n -ms-flex: 1;\n flex: 1;\n}\n\n:host([button-text]) #input-box-wrapper {\n position: relative;\n}\n\n:host([button-text]) button.clear-search {\n width: 40px;\n right: 0px;\n}\n\n:host([button-text]) ::slotted(input[type=\"search\"]::-webkit-search-cancel-button) {\n -webkit-appearance: none;\n}\n\n#input-box-wrapper {\n border-color: #06c;\n border-color: var(--pfe-theme--color--feedback--info, #06c);\n}\n\n#input-box-wrapper ::slotted(input) {\n width: 100%;\n -webkit-box-flex: 1;\n -webkit-flex: 1;\n -ms-flex: 1;\n flex: 1;\n -webkit-box-shadow: inset 0 0 0.625rem 0 #fafafa !important;\n box-shadow: inset 0 0 0.625rem 0 #fafafa !important;\n -webkit-box-shadow: var(--pfe-autocomplete--BoxShadow, var(--pfe-theme--box-shadow--inset, inset 0 0 0.625rem 0 #fafafa)) !important;\n box-shadow: var(--pfe-autocomplete--BoxShadow, var(--pfe-theme--box-shadow--inset, inset 0 0 0.625rem 0 #fafafa)) !important;\n padding-left: 10px;\n padding-right: 0;\n border-radius: 2px;\n border-radius: var(--pfe-theme--ui--border-radius, 2px);\n background-color: #fff;\n background-color: var(--pfe-autocomplete--BackgroundColor, var(--pfe-theme--color--surface--lightest, #fff));\n border: 1px solid #d2d2d2;\n border: var(--pfe-autocomplete--Border, var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #d2d2d2));\n font-size: 1rem;\n font-size: var(--pfe-theme--font-size, 1rem);\n font-family: \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif;\n font-family: var(--pfe-theme--font-family, \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif);\n height: calc(20px * 2);\n height: calc(var(--pfe-theme--ui--element--size, 20px) * 2);\n -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;\n transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;\n transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;\n opacity: 1;\n outline: 0;\n}\n\n#input-box-wrapper ::slotted(input:disabled),\n#input-box-wrapper button:disabled {\n cursor: not-allowed;\n color: #ccc;\n}\n\n#input-box-wrapper ::slotted(input:disabled) {\n padding-right: 10px;\n}\n\n#input-box-wrapper button:focus,\n#input-box-wrapper ::slotted(input:focus) {\n outline: 0;\n}\n\n#input-box-wrapper ::slotted(input),\n#input-box-wrapper button {\n -webkit-appearance: none;\n}\n\n#input-box-wrapper ::slotted([type=\"search\"]::-ms-clear) {\n display: none;\n}\n\n#input-box-wrapper ::slotted(input[type=\"search\"]::-webkit-search-cancel-button),\n#input-box-wrapper ::slotted(input[type=\"search\"]::-webkit-search-decoration) {\n -webkit-appearance: none;\n}\n\nbutton {\n color: #6a6e73;\n color: var(--pfe-theme--color--ui-base, #6a6e73);\n background-color: transparent;\n border: none;\n position: absolute;\n top: 0;\n bottom: 0;\n cursor: pointer;\n}\n\nbutton.clear-search {\n right: 30px;\n width: 20px;\n margin: 2px 1px;\n background-color: #fff;\n background-color: var(--pfe-theme--color--surface--lightest, #fff);\n}\n\nbutton.clear-search:hover {\n color: #6a6e73;\n color: var(--pfe-theme--color--ui-base, #6a6e73);\n}\n\nbutton.clear-search svg {\n width: 14px;\n position: relative;\n top: 2px;\n stroke: #d2d2d2;\n stroke: var(--pfe-theme--color--surface--border, #d2d2d2);\n}\n\nbutton.clear-search:hover svg,\nbutton.clear-search:focus svg {\n opacity: 1;\n stroke: #06c;\n stroke: var(--pfe-theme--color--link, #06c);\n}\n\nbutton[disabled].clear-search:hover svg,\nbutton[disabled].clear-search:focus svg {\n stroke: #d2d2d2;\n stroke: var(--pfe-theme--color--surface--border, #d2d2d2);\n}\n\nbutton.search-button {\n margin-top: 1px;\n margin-bottom: 1px;\n right: 1px;\n width: 30px;\n background-color: #fff;\n background-color: var(--pfe-theme--color--surface--lightest, #fff);\n}\n\nbutton.search-button svg {\n fill: #06c;\n fill: var(--pfe-theme--color--link, #06c);\n width: 18px;\n position: relative;\n top: 2px;\n stroke: #d2d2d2;\n stroke: var(--pfe-theme--color--surface--border, #d2d2d2);\n}\n\nbutton.search-button:hover svg,\nbutton.search-button:focus svg {\n fill: #004080;\n fill: var(--pfe-theme--color--link--hover, #004080);\n}\n\nbutton.search-button:disabled svg {\n fill: #d2d2d2;\n fill: var(--pfe-theme--color--ui-disabled, #d2d2d2);\n}\n\npfe-button.search-button--textual {\n margin-left: 16px;\n}\n\n.loading {\n position: absolute;\n width: 30px;\n right: 52px;\n top: 0px;\n bottom: 0px;\n}\n\n.loading svg {\n width: 26px;\n padding-top: 7px;\n}\n\n/*# sourceMappingURL=pfe-autocomplete.css.map */\n"]} \ No newline at end of file diff --git a/elements/pfe-autocomplete/dist/pfe-autocomplete.min.js b/elements/pfe-autocomplete/dist/pfe-autocomplete.min.js new file mode 100644 index 0000000000..f94c6ece30 --- /dev/null +++ b/elements/pfe-autocomplete/dist/pfe-autocomplete.min.js @@ -0,0 +1,26 @@ +import e from"../../pfelement/dist/pfelement.min.js";import"../../pfe-button/dist/pfe-button.min.js"; +/*! + * PatternFly Elements: PfeAutocomplete 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * +*/const t=13,i=40,o=38,r=27;let a=!1;class s extends e{static get version(){return"1.12.3"}get html(){return'\n\n
      \n
      \n \x3c!-- Input box --\x3e\n \n\n \x3c!-- loading icon --\x3e\n \n\n \x3c!-- clear search button --\x3e\n \n\n \x3c!-- Search button --\x3e\n \n
      \n \n
      \n\n\x3c!-- Search button (when [button-text] attr provided) --\x3e\n'}static get schemaProperties(){return{debounce_timer:{title:"Debounce",description:"The amount of time that should pass before the next API call is made",type:"string",prefixed:!1},init_value:{title:"Initial value",description:"An initial value to show in the input field",type:"string",prefixed:!1},is_disabled:{title:"Is disabled",description:"Disable the input",type:"boolean",prefixed:!1},"button-text":{title:"Button text",description:"Add button with text next to input field",type:"string",prefixed:!1}}}static get slots(){return{content:{title:"Content",type:"array",namedSlot:!1,items:{oneOf:[{$ref:"input"}]},required:!0}}}static get tag(){return"pfe-autocomplete"}get schemaUrl(){return"pfe-autocomplete.json"}get templateUrl(){return"pfe-autocomplete.html"}get styleUrl(){return"pfe-autocomplete.scss"}static get properties(){return{initValue:{title:"Initial Value",type:String,observer:"_initValueChanged"},loading:{title:"Loading",type:Boolean,default:!1,observer:"_loadingChanged"},isDisabled:{title:"Is disabled",type:Boolean,default:!1,observer:"_isDisabledChanged"},debounce:{title:"Debounce",type:Number,default:300},selectedValue:{title:"Selected value",type:String},buttonText:{title:"Button text",type:String,observer:"_buttonTextChanged"}}}static get events(){return{search:this.tag+":search-event",select:this.tag+":option-selected",optionsShown:this.tag+":options-shown",optionCleared:this.tag+":option-cleared",slotchange:"slotchange"}}constructor(){super(s),this._inputInit(),this._slotchangeHandler=this._slotchangeHandler.bind(this),this._slot=this.shadowRoot.querySelector("slot"),this._slot.addEventListener(s.events.slotchange,this._slotchangeHandler),this._ariaAnnounceTemplate="There are ${numOptions} suggestions. Use the up and down arrows to browse.",this._clearBtn=this.shadowRoot.querySelector(".clear-search"),this._clearBtn.addEventListener("click",this._clear.bind(this)),this._searchBtn=this.shadowRoot.querySelector(".search-button"),this._searchBtn.addEventListener("click",this._search.bind(this)),this._searchBtnTextual=this.shadowRoot.querySelector(".search-button--textual"),this._searchBtnText=this.shadowRoot.querySelector(".search-button__text"),this._searchBtnTextual.addEventListener("click",this._search.bind(this)),this._dropdown=this.shadowRoot.querySelector("#dropdown"),this._dropdown.data=[],this.activeIndex=null,this.addEventListener("keyup",this._inputKeyUp.bind(this)),this.addEventListener(s.events.search,this._closeDroplist.bind(this)),this.addEventListener(s.events.select,this._optionSelected.bind(this))}_inputInit(){let e=this.shadowRoot.querySelector("slot").assignedNodes().filter(e=>e.nodeType===Node.ELEMENT_NODE);0!==e.length?(this._input=e[0],"input"===this._input.tagName.toLowerCase()?(this._input.addEventListener("input",this._inputChanged.bind(this)),this._input.addEventListener("blur",this._closeDroplist.bind(this)),this._input.setAttribute("role","combobox"),this._input.hasAttribute("aria-label")||this._input.setAttribute("aria-label","Search"),this._input.setAttribute("aria-autocomplete","list"),this._input.setAttribute("aria-haspopup","true"),this._input.setAttribute("aria-owns","droplist-items"),this._input.setAttribute("aria-controls","droplist-items"),this._input.setAttribute("aria-expanded","false"),this._input.setAttribute("type","search"),this._input.setAttribute("autocomplete","off"),this._input.setAttribute("autocorrect","off"),this._input.setAttribute("autocapitalize","off"),this._input.setAttribute("spellcheck","false"),this._input.setAttribute("style",'input[type=search]::-ms-clear { display: none; width : 0; height: 0; }input[type = search]:: -ms - reveal { display: none; width: 0; height: 0; }" nput[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; }')):console.error(s.tag+": The only child in the light DOM must be an input tag")):console.error(s.tag+": There must be a input tag in the light DOM")}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keyup",this._inputKeyUp),this.removeEventListener(s.events.search,this._closeDroplist),this.removeEventListener(s.events.select,this._optionSelected),this._slot.removeEventListener(s.events.slotchange,this._slotchangeHandler),this._input&&(this._input.removeEventListener("input",this._inputChanged),this._input.removeEventListener("blur",this._closeDroplist)),this._clearBtn.removeEventListener("click",this._clear),this._searchBtn.removeEventListener("click",this._search),this._searchBtnTextual.removeEventListener("click",this._search)}_initValueChanged(e,t){t&&(this._input.value=t,""===t||this.isDisabled?(this._searchBtn.setAttribute("disabled",""),this._searchBtnTextual.setAttribute("disabled",""),this._clearBtn.setAttribute("hidden","")):(this._searchBtn.removeAttribute("disabled"),this._searchBtnTextual.removeAttribute("disabled"),this._clearBtn.removeAttribute("hidden")))}_loadingChanged(){this.loading&&""!==this._input.value?this.shadowRoot.querySelector(".loading").removeAttribute("hidden"):this.shadowRoot.querySelector(".loading").setAttribute("hidden","")}_isDisabledChanged(){this.isDisabled?(this._clearBtn.setAttribute("disabled",""),this._searchBtn.setAttribute("disabled",""),this._searchBtnTextual.setAttribute("disabled",""),this._input.setAttribute("disabled","")):(this._clearBtn.removeAttribute("disabled"),this._searchBtn.removeAttribute("disabled"),this._searchBtnTextual.removeAttribute("disabled"),this._input.removeAttribute("disabled"))}_buttonTextChanged(e,t){null===e?(this._searchBtn.setAttribute("hidden",""),this._searchBtnText.innerHTML=t||"Search",this._searchBtnTextual.removeAttribute("hidden")):null===t||""===t?(this._searchBtnTextual.setAttribute("hidden",""),this._searchBtn.removeAttribute("hidden")):this._searchBtnText.innerHTML=t||"Search"}_slotchangeHandler(){this._inputInit(),this._dropdown._ariaAnnounceTemplate=this.getAttribute("aria-announce-template")||this._ariaAnnounceTemplate}_inputChanged(){if(""===this._input.value)return this._searchBtn.setAttribute("disabled",""),this._searchBtnTextual.setAttribute("disabled",""),this._clearBtn.setAttribute("hidden",""),void this._reset();this._input.hasAttribute("disabled")||(this._searchBtn.removeAttribute("disabled"),this._searchBtnTextual.removeAttribute("disabled")),this._clearBtn.removeAttribute("hidden"),!1===a&&(a=!0,window.setTimeout(()=>{this._sendAutocompleteRequest(this._input.value),a=!1},this.debounce))}_clear(){this._input.value="",this._clearBtn.setAttribute("hidden",""),this._searchBtn.setAttribute("disabled",""),this._searchBtnTextual.setAttribute("disabled",""),this._input.focus(),this.emitEvent(s.events.optionCleared,{bubbles:!0,composed:!0,detail:{searchValue:""}})}_search(){this._doSearch(this._input.value)}_closeDroplist(){this._dropdown.open=null,this._dropdown.removeAttribute("active-index"),this._input.setAttribute("aria-expanded","false")}_openDroplist(){this.activeIndex=null,this._dropdown.open=!0,this._dropdown.setAttribute("active-index",null),this.emitEvent(s.events.optionsShown,{composed:!0}),this._input.setAttribute("aria-expanded","true")}_optionSelected(e){let t=e.detail.optionValue;this._input.value=t,this._doSearch(t)}_doSearch(e){this.emitEvent(s.events.search,{detail:{searchValue:e},composed:!0}),this._reset(),this.selectedValue=e}_sendAutocompleteRequest(e){this.autocompleteRequest&&this.autocompleteRequest({query:e},this._autocompleteCallback.bind(this))}_autocompleteCallback(e){this._dropdown.data=e,this._dropdown.reflow=!0,0!==e.length?this._openDroplist():this._closeDroplist()}_reset(){this._dropdown.activeIndex=null,this._input.setAttribute("aria-activedescendant",""),this._dropdown.data=[],this._closeDroplist()}_activeOption(e){if(null!==e&&"null"!==e)return this._dropdown.shadowRoot.querySelector("li:nth-child("+(parseInt(e,10)+1)+")").innerHTML}_inputKeyUp(e){let a=e.keyCode;if(0===this._dropdown.data.length&&a!==i&&a!==o&&a!==t&&a!==r)return;let n=this._dropdown.activeIndex,d=this._dropdown.data.length;if(a==r)this._closeDroplist();else if(a===o){if(!this._dropdown.open)return;n=null===n||"null"===n?d:parseInt(n,10),n-=1,n<0&&(n=d-1),this._input.value=this._activeOption(n)}else if(a===i){if(!this._dropdown.open)return;n=null===n||"null"===n?-1:parseInt(n,10),n+=1,n>d-1&&(n=0),this._input.value=this._activeOption(n)}else if(a===t){if(this._activeOption(n))return void this.emitEvent(s.events.select,{detail:{optionValue:this._activeOption(n)},composed:!0});let e=this._input.value;return void this._doSearch(e)}null!==n&&"null"!==n?this._input.setAttribute("aria-activedescendant","option-"+n):this._input.setAttribute("aria-activedescendant",""),this.activeIndex=n,this._dropdown.activeIndex=n}}class n extends e{static get version(){return"1.12.3"}get html(){return'\n\n
      \n
      \n
        \n
      \n
      '}static get tag(){return"pfe-search-droplist"}get templateUrl(){return"pfe-search-droplist.html"}get styleUrl(){return"pfe-search-droplist.scss"}static get properties(){return{open:{title:"Open",type:Boolean},reflow:{title:"Reflow",type:Boolean,observer:"_renderOptions"},activeIndex:{title:"Active index",type:Number,observer:"_activeIndexChanged"}}}constructor(){super(n)}connectedCallback(){super.connectedCallback(),this._ariaAnnounce=this.shadowRoot.querySelector(".suggestions-aria-help"),this.activeIndex=null,this._ul=this.shadowRoot.querySelector("ul"),this._ul.addEventListener("mousedown",this._optionSelected.bind(this))}disconnectedCallback(){super.disconnectedCallback(),this._ul.removeEventListener("mousedown",this._optionSelected)}_optionSelected(e){"LI"===e.target.tagName&&this.emitEvent(s.events.select,{detail:{optionValue:e.target.innerText},composed:!0})}_renderOptions(){let e=this.data,t="";this._ariaAnnounceTemplate&&(t=this._ariaAnnounceTemplate.replace("${numOptions}",e.length)),this._ariaAnnounce.textContent=t,this._ariaAnnounce.setAttribute("aria-live","polite"),this._ul.innerHTML=""+e.map((e,t)=>`
    3. ${e}
      4. `).join("")}_activeIndexChanged(){if(!this.data||0===this.data.length||null===this.activeIndex||"null"===this.activeIndex)return;const e=this._ul.querySelector(".active"),t=this._ul.querySelector("li:nth-child("+(parseInt(this.activeIndex,10)+1)+")");e&&(e.classList.remove("active"),e.removeAttribute("aria-selected")),t.classList.add("active"),t.setAttribute("aria-selected","true");let i=this.shadowRoot.querySelector(".droplist"),o=t.offsetHeight;return o+=parseInt(window.getComputedStyle(t).getPropertyValue("margin-bottom"),10),i.scrollTop=t.offsetTop-i.offsetHeight+o,t}}e.create(n),e.create(s);export default s; +//# sourceMappingURL=pfe-autocomplete.min.js.map diff --git a/elements/pfe-autocomplete/dist/pfe-autocomplete.min.js.map b/elements/pfe-autocomplete/dist/pfe-autocomplete.min.js.map new file mode 100644 index 0000000000..af22df9fb9 --- /dev/null +++ b/elements/pfe-autocomplete/dist/pfe-autocomplete.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-autocomplete.min.js","sources":["../_temp/pfe-autocomplete.js"],"sourcesContent":["/*!\n * PatternFly Elements: PfeAutocomplete 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement.js\";\nimport \"../../pfe-button/dist/pfe-button.js\";\n\nconst KEYCODE = {\n ENTER: 13,\n DOWN: 40,\n UP: 38,\n ESC: 27,\n};\n\n// use this variable to debounce api call when user types very fast\nlet throttle = false;\n\nclass PfeAutocomplete extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n
      \n
      \n \n \n\n \n \n\n \n \n\n \n \n
      \n \n
      \n\n\n`;\n }\n\n // @TODO: Deprecating in 1.0 release\n // Injected at build-time\n static get schemaProperties() {\n return {\"debounce_timer\":{\"title\":\"Debounce\",\"description\":\"The amount of time that should pass before the next API call is made\",\"type\":\"string\",\"prefixed\":false},\"init_value\":{\"title\":\"Initial value\",\"description\":\"An initial value to show in the input field\",\"type\":\"string\",\"prefixed\":false},\"is_disabled\":{\"title\":\"Is disabled\",\"description\":\"Disable the input\",\"type\":\"boolean\",\"prefixed\":false},\"button-text\":{\"title\":\"Button text\",\"description\":\"Add button with text next to input field\",\"type\":\"string\",\"prefixed\":false}};\n }\n\n // Injected at build-time\n static get slots() {\n return {\"content\":{\"title\":\"Content\",\"type\":\"array\",\"namedSlot\":false,\"items\":{\"oneOf\":[{\"$ref\":\"input\"}]},\"required\":true}};\n }\n\n static get tag() {\n return \"pfe-autocomplete\";\n }\n\n get schemaUrl() {\n return \"pfe-autocomplete.json\";\n }\n\n get templateUrl() {\n return \"pfe-autocomplete.html\";\n }\n\n get styleUrl() {\n return \"pfe-autocomplete.scss\";\n }\n\n static get properties() {\n return {\n initValue: {\n title: \"Initial Value\",\n type: String,\n observer: \"_initValueChanged\",\n },\n loading: {\n title: \"Loading\",\n type: Boolean,\n default: false,\n observer: \"_loadingChanged\",\n },\n isDisabled: {\n title: \"Is disabled\",\n type: Boolean,\n default: false,\n observer: \"_isDisabledChanged\",\n },\n debounce: {\n title: \"Debounce\",\n type: Number,\n default: 300,\n },\n selectedValue: {\n title: \"Selected value\",\n type: String,\n },\n buttonText: {\n title: \"Button text\",\n type: String,\n observer: \"_buttonTextChanged\",\n },\n };\n }\n\n static get events() {\n return {\n search: `${this.tag}:search-event`,\n select: `${this.tag}:option-selected`,\n optionsShown: `${this.tag}:options-shown`,\n optionCleared: `${this.tag}:option-cleared`,\n slotchange: `slotchange`,\n };\n }\n\n constructor() {\n super(PfeAutocomplete);\n\n this._inputInit();\n\n this._slotchangeHandler = this._slotchangeHandler.bind(this);\n\n this._slot = this.shadowRoot.querySelector(\"slot\");\n this._slot.addEventListener(PfeAutocomplete.events.slotchange, this._slotchangeHandler);\n\n // @TODO: Confirm this is translatable\n this._ariaAnnounceTemplate = \"There are ${numOptions} suggestions. Use the up and down arrows to browse.\";\n\n // clear button\n this._clearBtn = this.shadowRoot.querySelector(\".clear-search\");\n this._clearBtn.addEventListener(\"click\", this._clear.bind(this));\n\n // search button\n this._searchBtn = this.shadowRoot.querySelector(\".search-button\");\n this._searchBtn.addEventListener(\"click\", this._search.bind(this));\n\n // textual search button\n this._searchBtnTextual = this.shadowRoot.querySelector(\".search-button--textual\");\n this._searchBtnText = this.shadowRoot.querySelector(\".search-button__text\");\n this._searchBtnTextual.addEventListener(\"click\", this._search.bind(this));\n\n this._dropdown = this.shadowRoot.querySelector(\"#dropdown\");\n this._dropdown.data = [];\n\n this.activeIndex = null;\n\n this.addEventListener(\"keyup\", this._inputKeyUp.bind(this));\n\n // these two events, fire search\n this.addEventListener(PfeAutocomplete.events.search, this._closeDroplist.bind(this));\n this.addEventListener(PfeAutocomplete.events.select, this._optionSelected.bind(this));\n }\n\n _inputInit() {\n // input box\n let slotNodes = this.shadowRoot.querySelector(\"slot\").assignedNodes();\n let slotElems = slotNodes.filter((n) => n.nodeType === Node.ELEMENT_NODE);\n if (slotElems.length === 0) {\n console.error(`${PfeAutocomplete.tag}: There must be a input tag in the light DOM`);\n return;\n }\n this._input = slotElems[0];\n\n if (this._input.tagName.toLowerCase() !== \"input\") {\n console.error(`${PfeAutocomplete.tag}: The only child in the light DOM must be an input tag`);\n\n return;\n }\n\n this._input.addEventListener(\"input\", this._inputChanged.bind(this));\n this._input.addEventListener(\"blur\", this._closeDroplist.bind(this));\n\n this._input.setAttribute(\"role\", \"combobox\");\n\n if (!this._input.hasAttribute(\"aria-label\")) {\n this._input.setAttribute(\"aria-label\", \"Search\");\n }\n\n this._input.setAttribute(\"aria-autocomplete\", \"list\");\n this._input.setAttribute(\"aria-haspopup\", \"true\");\n this._input.setAttribute(\"aria-owns\", \"droplist-items\");\n this._input.setAttribute(\"aria-controls\", \"droplist-items\");\n this._input.setAttribute(\"aria-expanded\", \"false\");\n this._input.setAttribute(\"type\", \"search\");\n this._input.setAttribute(\"autocomplete\", \"off\");\n this._input.setAttribute(\"autocorrect\", \"off\");\n this._input.setAttribute(\"autocapitalize\", \"off\");\n this._input.setAttribute(\"spellcheck\", \"false\");\n\n this._input.setAttribute(\n \"style\",\n `input[type=search]::-ms-clear { display: none; width : 0; height: 0; }input[type = search]:: -ms - reveal { display: none; width: 0; height: 0; }\" nput[type=\"search\"]::-webkit-search-decoration, input[type=\"search\"]::-webkit-search-cancel-button, input[type=\"search\"]::-webkit-search-results-button, input[type=\"search\"]::-webkit-search-results-decoration { display: none; }`\n );\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener(\"keyup\", this._inputKeyUp);\n\n this.removeEventListener(PfeAutocomplete.events.search, this._closeDroplist);\n this.removeEventListener(PfeAutocomplete.events.select, this._optionSelected);\n this._slot.removeEventListener(PfeAutocomplete.events.slotchange, this._slotchangeHandler);\n if (this._input) {\n this._input.removeEventListener(\"input\", this._inputChanged);\n this._input.removeEventListener(\"blur\", this._closeDroplist);\n }\n\n this._clearBtn.removeEventListener(\"click\", this._clear);\n this._searchBtn.removeEventListener(\"click\", this._search);\n this._searchBtnTextual.removeEventListener(\"click\", this._search);\n }\n\n _initValueChanged(oldVal, newVal) {\n if (newVal) {\n // set inputbox and buttons in the inner component\n this._input.value = newVal;\n if (newVal !== \"\" && !this.isDisabled) {\n this._searchBtn.removeAttribute(\"disabled\");\n this._searchBtnTextual.removeAttribute(\"disabled\");\n this._clearBtn.removeAttribute(\"hidden\");\n } else {\n this._searchBtn.setAttribute(\"disabled\", \"\");\n this._searchBtnTextual.setAttribute(\"disabled\", \"\");\n this._clearBtn.setAttribute(\"hidden\", \"\");\n }\n }\n }\n\n _loadingChanged() {\n if (!this.loading || this._input.value === \"\") {\n this.shadowRoot.querySelector(\".loading\").setAttribute(\"hidden\", \"\");\n } else {\n this.shadowRoot.querySelector(\".loading\").removeAttribute(\"hidden\");\n }\n }\n\n _isDisabledChanged() {\n if (this.isDisabled) {\n this._clearBtn.setAttribute(\"disabled\", \"\");\n this._searchBtn.setAttribute(\"disabled\", \"\");\n this._searchBtnTextual.setAttribute(\"disabled\", \"\");\n this._input.setAttribute(\"disabled\", \"\");\n } else {\n this._clearBtn.removeAttribute(\"disabled\");\n this._searchBtn.removeAttribute(\"disabled\");\n this._searchBtnTextual.removeAttribute(\"disabled\");\n this._input.removeAttribute(\"disabled\");\n }\n }\n\n _buttonTextChanged(oldVal, newVal) {\n if (oldVal === null) {\n this._searchBtn.setAttribute(\"hidden\", \"\");\n this._searchBtnText.innerHTML = newVal || \"Search\";\n this._searchBtnTextual.removeAttribute(\"hidden\");\n } else if (newVal === null || newVal === \"\") {\n this._searchBtnTextual.setAttribute(\"hidden\", \"\");\n this._searchBtn.removeAttribute(\"hidden\");\n } else {\n this._searchBtnText.innerHTML = newVal || \"Search\";\n }\n }\n\n _slotchangeHandler() {\n this._inputInit();\n this._dropdown._ariaAnnounceTemplate = this.getAttribute(\"aria-announce-template\") || this._ariaAnnounceTemplate;\n }\n\n _inputChanged() {\n if (this._input.value === \"\") {\n this._searchBtn.setAttribute(\"disabled\", \"\");\n this._searchBtnTextual.setAttribute(\"disabled\", \"\");\n this._clearBtn.setAttribute(\"hidden\", \"\");\n\n this._reset();\n return;\n } else {\n if (!this._input.hasAttribute(\"disabled\")) {\n this._searchBtn.removeAttribute(\"disabled\");\n this._searchBtnTextual.removeAttribute(\"disabled\");\n }\n this._clearBtn.removeAttribute(\"hidden\");\n }\n\n if (throttle === false) {\n throttle = true;\n\n window.setTimeout(() => {\n this._sendAutocompleteRequest(this._input.value);\n throttle = false;\n }, this.debounce);\n }\n }\n\n _clear() {\n this._input.value = \"\";\n this._clearBtn.setAttribute(\"hidden\", \"\");\n this._searchBtn.setAttribute(\"disabled\", \"\");\n this._searchBtnTextual.setAttribute(\"disabled\", \"\");\n this._input.focus();\n this.emitEvent(PfeAutocomplete.events.optionCleared, {\n bubbles: true,\n composed: true,\n detail: { searchValue: \"\" },\n });\n }\n\n _search() {\n this._doSearch(this._input.value);\n }\n\n _closeDroplist() {\n this._dropdown.open = null;\n this._dropdown.removeAttribute(\"active-index\");\n this._input.setAttribute(\"aria-expanded\", \"false\");\n }\n\n _openDroplist() {\n this.activeIndex = null;\n this._dropdown.open = true;\n this._dropdown.setAttribute(\"active-index\", null);\n this.emitEvent(PfeAutocomplete.events.optionsShown, {\n composed: true,\n });\n this._input.setAttribute(\"aria-expanded\", \"true\");\n }\n\n _optionSelected(e) {\n let selectedValue = e.detail.optionValue;\n\n // update input box with selected value from options list\n this._input.value = selectedValue;\n\n // send search request\n this._doSearch(selectedValue);\n }\n\n _doSearch(searchQuery) {\n this.emitEvent(PfeAutocomplete.events.search, {\n detail: { searchValue: searchQuery },\n composed: true,\n });\n this._reset();\n this.selectedValue = searchQuery;\n }\n\n _sendAutocompleteRequest(input) {\n if (!this.autocompleteRequest) return;\n\n this.autocompleteRequest({ query: input }, this._autocompleteCallback.bind(this));\n }\n\n _autocompleteCallback(response) {\n this._dropdown.data = response;\n this._dropdown.reflow = true;\n response.length !== 0 ? this._openDroplist() : this._closeDroplist();\n }\n\n _reset() {\n this._dropdown.activeIndex = null;\n this._input.setAttribute(\"aria-activedescendant\", \"\");\n this._dropdown.data = [];\n this._closeDroplist();\n }\n\n /**\n * Returns the HTML of the active element\n * @param {number} activeIndex Index of an element in the droplist\n * @return {string} The HTML inside of the given index as a string\n */\n _activeOption(activeIndex) {\n if (activeIndex === null || activeIndex === \"null\") return;\n return this._dropdown.shadowRoot.querySelector(\"li:nth-child(\" + (parseInt(activeIndex, 10) + 1) + \")\").innerHTML;\n }\n\n /**\n * Handle keyboard input, we care about arrow keys, enter, and escape\n * @param {object} e - keypress event\n */\n _inputKeyUp(e) {\n let key = e.keyCode;\n\n // Check to see if it's a key we care about\n if (\n this._dropdown.data.length === 0 &&\n key !== KEYCODE.DOWN &&\n key !== KEYCODE.UP &&\n key !== KEYCODE.ENTER &&\n key !== KEYCODE.ESC\n )\n return;\n\n let activeIndex = this._dropdown.activeIndex;\n let optionsLength = this._dropdown.data.length;\n\n if (key == KEYCODE.ESC) {\n this._closeDroplist();\n } else if (key === KEYCODE.UP) {\n if (!this._dropdown.open) {\n return;\n }\n\n activeIndex = activeIndex === null || activeIndex === \"null\" ? optionsLength : parseInt(activeIndex, 10);\n\n activeIndex -= 1;\n\n // Go to the last item if we're at -1 index\n if (activeIndex < 0) {\n activeIndex = optionsLength - 1;\n }\n\n // Get the HTML of the active element\n this._input.value = this._activeOption(activeIndex);\n } else if (key === KEYCODE.DOWN) {\n if (!this._dropdown.open) {\n return;\n }\n\n activeIndex = activeIndex === null || activeIndex === \"null\" ? -1 : parseInt(activeIndex, 10);\n activeIndex += 1;\n\n if (activeIndex > optionsLength - 1) {\n activeIndex = 0;\n }\n\n // Go to the last item if we're at -1 index\n this._input.value = this._activeOption(activeIndex);\n } else if (key === KEYCODE.ENTER) {\n if (this._activeOption(activeIndex)) {\n this.emitEvent(PfeAutocomplete.events.select, {\n detail: { optionValue: this._activeOption(activeIndex) },\n composed: true,\n });\n\n return;\n }\n\n let selectedValue = this._input.value;\n this._doSearch(selectedValue);\n return;\n }\n\n if (activeIndex !== null && activeIndex !== \"null\") {\n this._input.setAttribute(\"aria-activedescendant\", \"option-\" + activeIndex);\n } else {\n this._input.setAttribute(\"aria-activedescendant\", \"\");\n }\n\n this.activeIndex = activeIndex;\n this._dropdown.activeIndex = activeIndex;\n }\n}\n\n/*\n* - Attributes ------------------------------------\n* open | Set when the combo box dropdown is open\n* active-index | Set selected option\n* reflow | Re-renders the dropdown\n\n* - Events ----------------------------------------\n* pfe-autocomplete:option-selected | Fires when an option is selected.\n event.details.optionValue contains the selected value.\n*/\n\nclass PfeSearchDroplist extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n
      \n
      \n
        \n
      \n
      `;\n }\n\n static get tag() {\n return \"pfe-search-droplist\";\n }\n\n get templateUrl() {\n return \"pfe-search-droplist.html\";\n }\n\n get styleUrl() {\n return \"pfe-search-droplist.scss\";\n }\n\n static get properties() {\n return {\n open: {\n title: \"Open\",\n type: Boolean,\n },\n reflow: {\n title: \"Reflow\",\n type: Boolean,\n observer: \"_renderOptions\",\n },\n activeIndex: {\n title: \"Active index\",\n type: Number,\n observer: \"_activeIndexChanged\",\n },\n };\n }\n\n constructor() {\n super(PfeSearchDroplist);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this._ariaAnnounce = this.shadowRoot.querySelector(\".suggestions-aria-help\");\n\n this.activeIndex = null;\n this._ul = this.shadowRoot.querySelector(\"ul\");\n this._ul.addEventListener(\"mousedown\", this._optionSelected.bind(this));\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this._ul.removeEventListener(\"mousedown\", this._optionSelected);\n }\n\n _optionSelected(e) {\n if (e.target.tagName === \"LI\") {\n this.emitEvent(PfeAutocomplete.events.select, {\n detail: { optionValue: e.target.innerText },\n composed: true,\n });\n }\n }\n\n _renderOptions() {\n let options = this.data;\n let ariaAnnounceText = \"\";\n\n if (this._ariaAnnounceTemplate) {\n ariaAnnounceText = this._ariaAnnounceTemplate.replace(\"${numOptions}\", options.length);\n }\n\n this._ariaAnnounce.textContent = ariaAnnounceText;\n this._ariaAnnounce.setAttribute(\"aria-live\", \"polite\");\n\n this._ul.innerHTML = `${options\n .map((item, index) => {\n return `
    4. ${item}
      5. `;\n })\n .join(\"\")}`;\n }\n\n /**\n * Handle state changes when active droplist item has been changed\n */\n _activeIndexChanged() {\n // Make a quick exit if necessary\n if (!this.data || this.data.length === 0 || this.activeIndex === null || this.activeIndex === \"null\") return;\n\n // Previous element may not exist\n const previouslyActiveElement = this._ul.querySelector(\".active\");\n const activeOption = this._ul.querySelector(\"li:nth-child(\" + (parseInt(this.activeIndex, 10) + 1) + \")\");\n\n // Handle any element that should no longer be selected\n if (previouslyActiveElement) {\n previouslyActiveElement.classList.remove(\"active\");\n previouslyActiveElement.removeAttribute(\"aria-selected\");\n }\n\n // Update newly selected element to have proper attributes and settings\n activeOption.classList.add(\"active\");\n // @note Set aria-selected on the active list item, should only occur on the list item that is being referenced\n // by the aria-activedescendant attribute. This attribute is required when creating a listbox autocomplete\n // component. It helps ensure that the screen reader user knows what element is active when moving through the\n // list of items with the arrow keys\n activeOption.setAttribute(\"aria-selected\", \"true\");\n\n // scroll to selected element when selected item with keyboard is out of view\n let ulWrapper = this.shadowRoot.querySelector(\".droplist\");\n let activeOptionHeight = activeOption.offsetHeight;\n activeOptionHeight += parseInt(window.getComputedStyle(activeOption).getPropertyValue(\"margin-bottom\"), 10);\n ulWrapper.scrollTop = activeOption.offsetTop - ulWrapper.offsetHeight + activeOptionHeight;\n\n return activeOption;\n }\n}\n\nPFElement.create(PfeSearchDroplist);\nPFElement.create(PfeAutocomplete);\n\nexport default PfeAutocomplete;\n"],"names":["KEYCODE","throttle","PfeAutocomplete","PFElement","version","html","schemaProperties","debounce_timer","title","description","type","prefixed","init_value","is_disabled","button-text","slots","content","namedSlot","items","oneOf","$ref","required","tag","schemaUrl","templateUrl","styleUrl","properties","initValue","String","observer","loading","Boolean","default","isDisabled","debounce","Number","selectedValue","buttonText","events","search","this","select","optionsShown","optionCleared","slotchange","[object Object]","super","_inputInit","_slotchangeHandler","bind","_slot","shadowRoot","querySelector","addEventListener","_ariaAnnounceTemplate","_clearBtn","_clear","_searchBtn","_search","_searchBtnTextual","_searchBtnText","_dropdown","data","activeIndex","_inputKeyUp","_closeDroplist","_optionSelected","slotElems","assignedNodes","filter","n","nodeType","Node","ELEMENT_NODE","length","_input","tagName","toLowerCase","_inputChanged","setAttribute","hasAttribute","console","error","disconnectedCallback","removeEventListener","oldVal","newVal","value","removeAttribute","innerHTML","getAttribute","_reset","window","setTimeout","_sendAutocompleteRequest","focus","emitEvent","bubbles","composed","detail","searchValue","_doSearch","open","e","optionValue","searchQuery","input","autocompleteRequest","query","_autocompleteCallback","response","reflow","_openDroplist","parseInt","key","keyCode","optionsLength","_activeOption","PfeSearchDroplist","connectedCallback","_ariaAnnounce","_ul","target","innerText","options","ariaAnnounceText","replace","textContent","map","item","index","join","previouslyActiveElement","activeOption","classList","remove","add","ulWrapper","activeOptionHeight","offsetHeight","getComputedStyle","getPropertyValue","scrollTop","offsetTop","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-autocomplete/dist/pfe-autocomplete.umd.js b/elements/pfe-autocomplete/dist/pfe-autocomplete.umd.js new file mode 100644 index 0000000000..1447ae44ba --- /dev/null +++ b/elements/pfe-autocomplete/dist/pfe-autocomplete.umd.js @@ -0,0 +1,746 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('../../pfelement/dist/pfelement.umd'), require('../../pfe-button/dist/pfe-button.umd')) : + typeof define === 'function' && define.amd ? define(['../../pfelement/dist/pfelement.umd', '../../pfe-button/dist/pfe-button.umd'], factory) : + (global = global || self, global.PfeAutocomplete = factory(global.PFElement)); +}(this, (function (PFElement) { 'use strict'; + + PFElement = PFElement && Object.prototype.hasOwnProperty.call(PFElement, 'default') ? PFElement['default'] : PFElement; + + var classCallCheck = function (instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } + }; + + var createClass = function () { + function defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } + + return function (Constructor, protoProps, staticProps) { + if (protoProps) defineProperties(Constructor.prototype, protoProps); + if (staticProps) defineProperties(Constructor, staticProps); + return Constructor; + }; + }(); + + var get = function get(object, property, receiver) { + if (object === null) object = Function.prototype; + var desc = Object.getOwnPropertyDescriptor(object, property); + + if (desc === undefined) { + var parent = Object.getPrototypeOf(object); + + if (parent === null) { + return undefined; + } else { + return get(parent, property, receiver); + } + } else if ("value" in desc) { + return desc.value; + } else { + var getter = desc.get; + + if (getter === undefined) { + return undefined; + } + + return getter.call(receiver); + } + }; + + var inherits = function (subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); + } + + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + enumerable: false, + writable: true, + configurable: true + } + }); + if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; + }; + + var possibleConstructorReturn = function (self, call) { + if (!self) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return call && (typeof call === "object" || typeof call === "function") ? call : self; + }; + + /*! + * PatternFly Elements: PfeAutocomplete 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * + */ + + var KEYCODE = { + ENTER: 13, + DOWN: 40, + UP: 38, + ESC: 27 + }; + + // use this variable to debounce api call when user types very fast + var throttle = false; + + var PfeAutocomplete = function (_PFElement) { + inherits(PfeAutocomplete, _PFElement); + createClass(PfeAutocomplete, [{ + key: "html", + + + // Injected at build-time + get: function get() { + return "\n\n
      \n
      \n \n \n\n \n \n\n \n \n\n \n \n
      \n \n
      \n\n\n"; + } + + // @TODO: Deprecating in 1.0 release + // Injected at build-time + + }, { + key: "schemaUrl", + get: function get() { + return "pfe-autocomplete.json"; + } + }, { + key: "templateUrl", + get: function get() { + return "pfe-autocomplete.html"; + } + }, { + key: "styleUrl", + get: function get() { + return "pfe-autocomplete.scss"; + } + }], [{ + key: "version", + + + // Injected at build-time + get: function get() { + return "1.12.3"; + } + }, { + key: "schemaProperties", + get: function get() { + return { "debounce_timer": { "title": "Debounce", "description": "The amount of time that should pass before the next API call is made", "type": "string", "prefixed": false }, "init_value": { "title": "Initial value", "description": "An initial value to show in the input field", "type": "string", "prefixed": false }, "is_disabled": { "title": "Is disabled", "description": "Disable the input", "type": "boolean", "prefixed": false }, "button-text": { "title": "Button text", "description": "Add button with text next to input field", "type": "string", "prefixed": false } }; + } + + // Injected at build-time + + }, { + key: "slots", + get: function get() { + return { "content": { "title": "Content", "type": "array", "namedSlot": false, "items": { "oneOf": [{ "$ref": "input" }] }, "required": true } }; + } + }, { + key: "tag", + get: function get() { + return "pfe-autocomplete"; + } + }, { + key: "properties", + get: function get() { + return { + initValue: { + title: "Initial Value", + type: String, + observer: "_initValueChanged" + }, + loading: { + title: "Loading", + type: Boolean, + default: false, + observer: "_loadingChanged" + }, + isDisabled: { + title: "Is disabled", + type: Boolean, + default: false, + observer: "_isDisabledChanged" + }, + debounce: { + title: "Debounce", + type: Number, + default: 300 + }, + selectedValue: { + title: "Selected value", + type: String + }, + buttonText: { + title: "Button text", + type: String, + observer: "_buttonTextChanged" + } + }; + } + }, { + key: "events", + get: function get() { + return { + search: this.tag + ":search-event", + select: this.tag + ":option-selected", + optionsShown: this.tag + ":options-shown", + optionCleared: this.tag + ":option-cleared", + slotchange: "slotchange" + }; + } + }]); + + function PfeAutocomplete() { + classCallCheck(this, PfeAutocomplete); + + var _this = possibleConstructorReturn(this, (PfeAutocomplete.__proto__ || Object.getPrototypeOf(PfeAutocomplete)).call(this, PfeAutocomplete)); + + _this._inputInit(); + + _this._slotchangeHandler = _this._slotchangeHandler.bind(_this); + + _this._slot = _this.shadowRoot.querySelector("slot"); + _this._slot.addEventListener(PfeAutocomplete.events.slotchange, _this._slotchangeHandler); + + // @TODO: Confirm this is translatable + _this._ariaAnnounceTemplate = "There are ${numOptions} suggestions. Use the up and down arrows to browse."; + + // clear button + _this._clearBtn = _this.shadowRoot.querySelector(".clear-search"); + _this._clearBtn.addEventListener("click", _this._clear.bind(_this)); + + // search button + _this._searchBtn = _this.shadowRoot.querySelector(".search-button"); + _this._searchBtn.addEventListener("click", _this._search.bind(_this)); + + // textual search button + _this._searchBtnTextual = _this.shadowRoot.querySelector(".search-button--textual"); + _this._searchBtnText = _this.shadowRoot.querySelector(".search-button__text"); + _this._searchBtnTextual.addEventListener("click", _this._search.bind(_this)); + + _this._dropdown = _this.shadowRoot.querySelector("#dropdown"); + _this._dropdown.data = []; + + _this.activeIndex = null; + + _this.addEventListener("keyup", _this._inputKeyUp.bind(_this)); + + // these two events, fire search + _this.addEventListener(PfeAutocomplete.events.search, _this._closeDroplist.bind(_this)); + _this.addEventListener(PfeAutocomplete.events.select, _this._optionSelected.bind(_this)); + return _this; + } + + createClass(PfeAutocomplete, [{ + key: "_inputInit", + value: function _inputInit() { + // input box + var slotNodes = this.shadowRoot.querySelector("slot").assignedNodes(); + var slotElems = slotNodes.filter(function (n) { + return n.nodeType === Node.ELEMENT_NODE; + }); + if (slotElems.length === 0) { + console.error(PfeAutocomplete.tag + ": There must be a input tag in the light DOM"); + return; + } + this._input = slotElems[0]; + + if (this._input.tagName.toLowerCase() !== "input") { + console.error(PfeAutocomplete.tag + ": The only child in the light DOM must be an input tag"); + + return; + } + + this._input.addEventListener("input", this._inputChanged.bind(this)); + this._input.addEventListener("blur", this._closeDroplist.bind(this)); + + this._input.setAttribute("role", "combobox"); + + if (!this._input.hasAttribute("aria-label")) { + this._input.setAttribute("aria-label", "Search"); + } + + this._input.setAttribute("aria-autocomplete", "list"); + this._input.setAttribute("aria-haspopup", "true"); + this._input.setAttribute("aria-owns", "droplist-items"); + this._input.setAttribute("aria-controls", "droplist-items"); + this._input.setAttribute("aria-expanded", "false"); + this._input.setAttribute("type", "search"); + this._input.setAttribute("autocomplete", "off"); + this._input.setAttribute("autocorrect", "off"); + this._input.setAttribute("autocapitalize", "off"); + this._input.setAttribute("spellcheck", "false"); + + this._input.setAttribute("style", "input[type=search]::-ms-clear { display: none; width : 0; height: 0; }input[type = search]:: -ms - reveal { display: none; width: 0; height: 0; }\" nput[type=\"search\"]::-webkit-search-decoration, input[type=\"search\"]::-webkit-search-cancel-button, input[type=\"search\"]::-webkit-search-results-button, input[type=\"search\"]::-webkit-search-results-decoration { display: none; }"); + } + }, { + key: "disconnectedCallback", + value: function disconnectedCallback() { + get(PfeAutocomplete.prototype.__proto__ || Object.getPrototypeOf(PfeAutocomplete.prototype), "disconnectedCallback", this).call(this); + + this.removeEventListener("keyup", this._inputKeyUp); + + this.removeEventListener(PfeAutocomplete.events.search, this._closeDroplist); + this.removeEventListener(PfeAutocomplete.events.select, this._optionSelected); + this._slot.removeEventListener(PfeAutocomplete.events.slotchange, this._slotchangeHandler); + if (this._input) { + this._input.removeEventListener("input", this._inputChanged); + this._input.removeEventListener("blur", this._closeDroplist); + } + + this._clearBtn.removeEventListener("click", this._clear); + this._searchBtn.removeEventListener("click", this._search); + this._searchBtnTextual.removeEventListener("click", this._search); + } + }, { + key: "_initValueChanged", + value: function _initValueChanged(oldVal, newVal) { + if (newVal) { + // set inputbox and buttons in the inner component + this._input.value = newVal; + if (newVal !== "" && !this.isDisabled) { + this._searchBtn.removeAttribute("disabled"); + this._searchBtnTextual.removeAttribute("disabled"); + this._clearBtn.removeAttribute("hidden"); + } else { + this._searchBtn.setAttribute("disabled", ""); + this._searchBtnTextual.setAttribute("disabled", ""); + this._clearBtn.setAttribute("hidden", ""); + } + } + } + }, { + key: "_loadingChanged", + value: function _loadingChanged() { + if (!this.loading || this._input.value === "") { + this.shadowRoot.querySelector(".loading").setAttribute("hidden", ""); + } else { + this.shadowRoot.querySelector(".loading").removeAttribute("hidden"); + } + } + }, { + key: "_isDisabledChanged", + value: function _isDisabledChanged() { + if (this.isDisabled) { + this._clearBtn.setAttribute("disabled", ""); + this._searchBtn.setAttribute("disabled", ""); + this._searchBtnTextual.setAttribute("disabled", ""); + this._input.setAttribute("disabled", ""); + } else { + this._clearBtn.removeAttribute("disabled"); + this._searchBtn.removeAttribute("disabled"); + this._searchBtnTextual.removeAttribute("disabled"); + this._input.removeAttribute("disabled"); + } + } + }, { + key: "_buttonTextChanged", + value: function _buttonTextChanged(oldVal, newVal) { + if (oldVal === null) { + this._searchBtn.setAttribute("hidden", ""); + this._searchBtnText.innerHTML = newVal || "Search"; + this._searchBtnTextual.removeAttribute("hidden"); + } else if (newVal === null || newVal === "") { + this._searchBtnTextual.setAttribute("hidden", ""); + this._searchBtn.removeAttribute("hidden"); + } else { + this._searchBtnText.innerHTML = newVal || "Search"; + } + } + }, { + key: "_slotchangeHandler", + value: function _slotchangeHandler() { + this._inputInit(); + this._dropdown._ariaAnnounceTemplate = this.getAttribute("aria-announce-template") || this._ariaAnnounceTemplate; + } + }, { + key: "_inputChanged", + value: function _inputChanged() { + var _this2 = this; + + if (this._input.value === "") { + this._searchBtn.setAttribute("disabled", ""); + this._searchBtnTextual.setAttribute("disabled", ""); + this._clearBtn.setAttribute("hidden", ""); + + this._reset(); + return; + } else { + if (!this._input.hasAttribute("disabled")) { + this._searchBtn.removeAttribute("disabled"); + this._searchBtnTextual.removeAttribute("disabled"); + } + this._clearBtn.removeAttribute("hidden"); + } + + if (throttle === false) { + throttle = true; + + window.setTimeout(function () { + _this2._sendAutocompleteRequest(_this2._input.value); + throttle = false; + }, this.debounce); + } + } + }, { + key: "_clear", + value: function _clear() { + this._input.value = ""; + this._clearBtn.setAttribute("hidden", ""); + this._searchBtn.setAttribute("disabled", ""); + this._searchBtnTextual.setAttribute("disabled", ""); + this._input.focus(); + this.emitEvent(PfeAutocomplete.events.optionCleared, { + bubbles: true, + composed: true, + detail: { searchValue: "" } + }); + } + }, { + key: "_search", + value: function _search() { + this._doSearch(this._input.value); + } + }, { + key: "_closeDroplist", + value: function _closeDroplist() { + this._dropdown.open = null; + this._dropdown.removeAttribute("active-index"); + this._input.setAttribute("aria-expanded", "false"); + } + }, { + key: "_openDroplist", + value: function _openDroplist() { + this.activeIndex = null; + this._dropdown.open = true; + this._dropdown.setAttribute("active-index", null); + this.emitEvent(PfeAutocomplete.events.optionsShown, { + composed: true + }); + this._input.setAttribute("aria-expanded", "true"); + } + }, { + key: "_optionSelected", + value: function _optionSelected(e) { + var selectedValue = e.detail.optionValue; + + // update input box with selected value from options list + this._input.value = selectedValue; + + // send search request + this._doSearch(selectedValue); + } + }, { + key: "_doSearch", + value: function _doSearch(searchQuery) { + this.emitEvent(PfeAutocomplete.events.search, { + detail: { searchValue: searchQuery }, + composed: true + }); + this._reset(); + this.selectedValue = searchQuery; + } + }, { + key: "_sendAutocompleteRequest", + value: function _sendAutocompleteRequest(input) { + if (!this.autocompleteRequest) return; + + this.autocompleteRequest({ query: input }, this._autocompleteCallback.bind(this)); + } + }, { + key: "_autocompleteCallback", + value: function _autocompleteCallback(response) { + this._dropdown.data = response; + this._dropdown.reflow = true; + response.length !== 0 ? this._openDroplist() : this._closeDroplist(); + } + }, { + key: "_reset", + value: function _reset() { + this._dropdown.activeIndex = null; + this._input.setAttribute("aria-activedescendant", ""); + this._dropdown.data = []; + this._closeDroplist(); + } + + /** + * Returns the HTML of the active element + * @param {number} activeIndex Index of an element in the droplist + * @return {string} The HTML inside of the given index as a string + */ + + }, { + key: "_activeOption", + value: function _activeOption(activeIndex) { + if (activeIndex === null || activeIndex === "null") return; + return this._dropdown.shadowRoot.querySelector("li:nth-child(" + (parseInt(activeIndex, 10) + 1) + ")").innerHTML; + } + + /** + * Handle keyboard input, we care about arrow keys, enter, and escape + * @param {object} e - keypress event + */ + + }, { + key: "_inputKeyUp", + value: function _inputKeyUp(e) { + var key = e.keyCode; + + // Check to see if it's a key we care about + if (this._dropdown.data.length === 0 && key !== KEYCODE.DOWN && key !== KEYCODE.UP && key !== KEYCODE.ENTER && key !== KEYCODE.ESC) return; + + var activeIndex = this._dropdown.activeIndex; + var optionsLength = this._dropdown.data.length; + + if (key == KEYCODE.ESC) { + this._closeDroplist(); + } else if (key === KEYCODE.UP) { + if (!this._dropdown.open) { + return; + } + + activeIndex = activeIndex === null || activeIndex === "null" ? optionsLength : parseInt(activeIndex, 10); + + activeIndex -= 1; + + // Go to the last item if we're at -1 index + if (activeIndex < 0) { + activeIndex = optionsLength - 1; + } + + // Get the HTML of the active element + this._input.value = this._activeOption(activeIndex); + } else if (key === KEYCODE.DOWN) { + if (!this._dropdown.open) { + return; + } + + activeIndex = activeIndex === null || activeIndex === "null" ? -1 : parseInt(activeIndex, 10); + activeIndex += 1; + + if (activeIndex > optionsLength - 1) { + activeIndex = 0; + } + + // Go to the last item if we're at -1 index + this._input.value = this._activeOption(activeIndex); + } else if (key === KEYCODE.ENTER) { + if (this._activeOption(activeIndex)) { + this.emitEvent(PfeAutocomplete.events.select, { + detail: { optionValue: this._activeOption(activeIndex) }, + composed: true + }); + + return; + } + + var selectedValue = this._input.value; + this._doSearch(selectedValue); + return; + } + + if (activeIndex !== null && activeIndex !== "null") { + this._input.setAttribute("aria-activedescendant", "option-" + activeIndex); + } else { + this._input.setAttribute("aria-activedescendant", ""); + } + + this.activeIndex = activeIndex; + this._dropdown.activeIndex = activeIndex; + } + }]); + return PfeAutocomplete; + }(PFElement); + + /* + * - Attributes ------------------------------------ + * open | Set when the combo box dropdown is open + * active-index | Set selected option + * reflow | Re-renders the dropdown + + * - Events ---------------------------------------- + * pfe-autocomplete:option-selected | Fires when an option is selected. + event.details.optionValue contains the selected value. + */ + + var PfeSearchDroplist = function (_PFElement2) { + inherits(PfeSearchDroplist, _PFElement2); + createClass(PfeSearchDroplist, [{ + key: "html", + + + // Injected at build-time + get: function get() { + return "\n\n
      \n
      \n
        \n
      \n
      "; + } + }, { + key: "templateUrl", + get: function get() { + return "pfe-search-droplist.html"; + } + }, { + key: "styleUrl", + get: function get() { + return "pfe-search-droplist.scss"; + } + }], [{ + key: "version", + + + // Injected at build-time + get: function get() { + return "1.12.3"; + } + }, { + key: "tag", + get: function get() { + return "pfe-search-droplist"; + } + }, { + key: "properties", + get: function get() { + return { + open: { + title: "Open", + type: Boolean + }, + reflow: { + title: "Reflow", + type: Boolean, + observer: "_renderOptions" + }, + activeIndex: { + title: "Active index", + type: Number, + observer: "_activeIndexChanged" + } + }; + } + }]); + + function PfeSearchDroplist() { + classCallCheck(this, PfeSearchDroplist); + return possibleConstructorReturn(this, (PfeSearchDroplist.__proto__ || Object.getPrototypeOf(PfeSearchDroplist)).call(this, PfeSearchDroplist)); + } + + createClass(PfeSearchDroplist, [{ + key: "connectedCallback", + value: function connectedCallback() { + get(PfeSearchDroplist.prototype.__proto__ || Object.getPrototypeOf(PfeSearchDroplist.prototype), "connectedCallback", this).call(this); + + this._ariaAnnounce = this.shadowRoot.querySelector(".suggestions-aria-help"); + + this.activeIndex = null; + this._ul = this.shadowRoot.querySelector("ul"); + this._ul.addEventListener("mousedown", this._optionSelected.bind(this)); + } + }, { + key: "disconnectedCallback", + value: function disconnectedCallback() { + get(PfeSearchDroplist.prototype.__proto__ || Object.getPrototypeOf(PfeSearchDroplist.prototype), "disconnectedCallback", this).call(this); + this._ul.removeEventListener("mousedown", this._optionSelected); + } + }, { + key: "_optionSelected", + value: function _optionSelected(e) { + if (e.target.tagName === "LI") { + this.emitEvent(PfeAutocomplete.events.select, { + detail: { optionValue: e.target.innerText }, + composed: true + }); + } + } + }, { + key: "_renderOptions", + value: function _renderOptions() { + var options = this.data; + var ariaAnnounceText = ""; + + if (this._ariaAnnounceTemplate) { + ariaAnnounceText = this._ariaAnnounceTemplate.replace("${numOptions}", options.length); + } + + this._ariaAnnounce.textContent = ariaAnnounceText; + this._ariaAnnounce.setAttribute("aria-live", "polite"); + + this._ul.innerHTML = "" + options.map(function (item, index) { + return "
    5. " + item + "
      6. "; + }).join(""); + } + + /** + * Handle state changes when active droplist item has been changed + */ + + }, { + key: "_activeIndexChanged", + value: function _activeIndexChanged() { + // Make a quick exit if necessary + if (!this.data || this.data.length === 0 || this.activeIndex === null || this.activeIndex === "null") return; + + // Previous element may not exist + var previouslyActiveElement = this._ul.querySelector(".active"); + var activeOption = this._ul.querySelector("li:nth-child(" + (parseInt(this.activeIndex, 10) + 1) + ")"); + + // Handle any element that should no longer be selected + if (previouslyActiveElement) { + previouslyActiveElement.classList.remove("active"); + previouslyActiveElement.removeAttribute("aria-selected"); + } + + // Update newly selected element to have proper attributes and settings + activeOption.classList.add("active"); + // @note Set aria-selected on the active list item, should only occur on the list item that is being referenced + // by the aria-activedescendant attribute. This attribute is required when creating a listbox autocomplete + // component. It helps ensure that the screen reader user knows what element is active when moving through the + // list of items with the arrow keys + activeOption.setAttribute("aria-selected", "true"); + + // scroll to selected element when selected item with keyboard is out of view + var ulWrapper = this.shadowRoot.querySelector(".droplist"); + var activeOptionHeight = activeOption.offsetHeight; + activeOptionHeight += parseInt(window.getComputedStyle(activeOption).getPropertyValue("margin-bottom"), 10); + ulWrapper.scrollTop = activeOption.offsetTop - ulWrapper.offsetHeight + activeOptionHeight; + + return activeOption; + } + }]); + return PfeSearchDroplist; + }(PFElement); + + PFElement.create(PfeSearchDroplist); + PFElement.create(PfeAutocomplete); + + return PfeAutocomplete; + +}))); +//# sourceMappingURL=pfe-autocomplete.umd.js.map diff --git a/elements/pfe-autocomplete/dist/pfe-autocomplete.umd.js.map b/elements/pfe-autocomplete/dist/pfe-autocomplete.umd.js.map new file mode 100644 index 0000000000..efc8ea7fe2 --- /dev/null +++ b/elements/pfe-autocomplete/dist/pfe-autocomplete.umd.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-autocomplete.umd.js","sources":["../_temp/pfe-autocomplete.umd.js"],"sourcesContent":["/*!\n * PatternFly Elements: PfeAutocomplete 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement\";\nimport \"../../pfe-button/dist/pfe-button\";\n\nconst KEYCODE = {\n ENTER: 13,\n DOWN: 40,\n UP: 38,\n ESC: 27,\n};\n\n// use this variable to debounce api call when user types very fast\nlet throttle = false;\n\nclass PfeAutocomplete extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n
      \n
      \n \n \n\n \n \n\n \n \n\n \n \n
      \n \n
      \n\n\n`;\n }\n\n // @TODO: Deprecating in 1.0 release\n // Injected at build-time\n static get schemaProperties() {\n return {\"debounce_timer\":{\"title\":\"Debounce\",\"description\":\"The amount of time that should pass before the next API call is made\",\"type\":\"string\",\"prefixed\":false},\"init_value\":{\"title\":\"Initial value\",\"description\":\"An initial value to show in the input field\",\"type\":\"string\",\"prefixed\":false},\"is_disabled\":{\"title\":\"Is disabled\",\"description\":\"Disable the input\",\"type\":\"boolean\",\"prefixed\":false},\"button-text\":{\"title\":\"Button text\",\"description\":\"Add button with text next to input field\",\"type\":\"string\",\"prefixed\":false}};\n }\n\n // Injected at build-time\n static get slots() {\n return {\"content\":{\"title\":\"Content\",\"type\":\"array\",\"namedSlot\":false,\"items\":{\"oneOf\":[{\"$ref\":\"input\"}]},\"required\":true}};\n }\n\n static get tag() {\n return \"pfe-autocomplete\";\n }\n\n get schemaUrl() {\n return \"pfe-autocomplete.json\";\n }\n\n get templateUrl() {\n return \"pfe-autocomplete.html\";\n }\n\n get styleUrl() {\n return \"pfe-autocomplete.scss\";\n }\n\n static get properties() {\n return {\n initValue: {\n title: \"Initial Value\",\n type: String,\n observer: \"_initValueChanged\",\n },\n loading: {\n title: \"Loading\",\n type: Boolean,\n default: false,\n observer: \"_loadingChanged\",\n },\n isDisabled: {\n title: \"Is disabled\",\n type: Boolean,\n default: false,\n observer: \"_isDisabledChanged\",\n },\n debounce: {\n title: \"Debounce\",\n type: Number,\n default: 300,\n },\n selectedValue: {\n title: \"Selected value\",\n type: String,\n },\n buttonText: {\n title: \"Button text\",\n type: String,\n observer: \"_buttonTextChanged\",\n },\n };\n }\n\n static get events() {\n return {\n search: `${this.tag}:search-event`,\n select: `${this.tag}:option-selected`,\n optionsShown: `${this.tag}:options-shown`,\n optionCleared: `${this.tag}:option-cleared`,\n slotchange: `slotchange`,\n };\n }\n\n constructor() {\n super(PfeAutocomplete);\n\n this._inputInit();\n\n this._slotchangeHandler = this._slotchangeHandler.bind(this);\n\n this._slot = this.shadowRoot.querySelector(\"slot\");\n this._slot.addEventListener(PfeAutocomplete.events.slotchange, this._slotchangeHandler);\n\n // @TODO: Confirm this is translatable\n this._ariaAnnounceTemplate = \"There are ${numOptions} suggestions. Use the up and down arrows to browse.\";\n\n // clear button\n this._clearBtn = this.shadowRoot.querySelector(\".clear-search\");\n this._clearBtn.addEventListener(\"click\", this._clear.bind(this));\n\n // search button\n this._searchBtn = this.shadowRoot.querySelector(\".search-button\");\n this._searchBtn.addEventListener(\"click\", this._search.bind(this));\n\n // textual search button\n this._searchBtnTextual = this.shadowRoot.querySelector(\".search-button--textual\");\n this._searchBtnText = this.shadowRoot.querySelector(\".search-button__text\");\n this._searchBtnTextual.addEventListener(\"click\", this._search.bind(this));\n\n this._dropdown = this.shadowRoot.querySelector(\"#dropdown\");\n this._dropdown.data = [];\n\n this.activeIndex = null;\n\n this.addEventListener(\"keyup\", this._inputKeyUp.bind(this));\n\n // these two events, fire search\n this.addEventListener(PfeAutocomplete.events.search, this._closeDroplist.bind(this));\n this.addEventListener(PfeAutocomplete.events.select, this._optionSelected.bind(this));\n }\n\n _inputInit() {\n // input box\n let slotNodes = this.shadowRoot.querySelector(\"slot\").assignedNodes();\n let slotElems = slotNodes.filter((n) => n.nodeType === Node.ELEMENT_NODE);\n if (slotElems.length === 0) {\n console.error(`${PfeAutocomplete.tag}: There must be a input tag in the light DOM`);\n return;\n }\n this._input = slotElems[0];\n\n if (this._input.tagName.toLowerCase() !== \"input\") {\n console.error(`${PfeAutocomplete.tag}: The only child in the light DOM must be an input tag`);\n\n return;\n }\n\n this._input.addEventListener(\"input\", this._inputChanged.bind(this));\n this._input.addEventListener(\"blur\", this._closeDroplist.bind(this));\n\n this._input.setAttribute(\"role\", \"combobox\");\n\n if (!this._input.hasAttribute(\"aria-label\")) {\n this._input.setAttribute(\"aria-label\", \"Search\");\n }\n\n this._input.setAttribute(\"aria-autocomplete\", \"list\");\n this._input.setAttribute(\"aria-haspopup\", \"true\");\n this._input.setAttribute(\"aria-owns\", \"droplist-items\");\n this._input.setAttribute(\"aria-controls\", \"droplist-items\");\n this._input.setAttribute(\"aria-expanded\", \"false\");\n this._input.setAttribute(\"type\", \"search\");\n this._input.setAttribute(\"autocomplete\", \"off\");\n this._input.setAttribute(\"autocorrect\", \"off\");\n this._input.setAttribute(\"autocapitalize\", \"off\");\n this._input.setAttribute(\"spellcheck\", \"false\");\n\n this._input.setAttribute(\n \"style\",\n `input[type=search]::-ms-clear { display: none; width : 0; height: 0; }input[type = search]:: -ms - reveal { display: none; width: 0; height: 0; }\" nput[type=\"search\"]::-webkit-search-decoration, input[type=\"search\"]::-webkit-search-cancel-button, input[type=\"search\"]::-webkit-search-results-button, input[type=\"search\"]::-webkit-search-results-decoration { display: none; }`\n );\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener(\"keyup\", this._inputKeyUp);\n\n this.removeEventListener(PfeAutocomplete.events.search, this._closeDroplist);\n this.removeEventListener(PfeAutocomplete.events.select, this._optionSelected);\n this._slot.removeEventListener(PfeAutocomplete.events.slotchange, this._slotchangeHandler);\n if (this._input) {\n this._input.removeEventListener(\"input\", this._inputChanged);\n this._input.removeEventListener(\"blur\", this._closeDroplist);\n }\n\n this._clearBtn.removeEventListener(\"click\", this._clear);\n this._searchBtn.removeEventListener(\"click\", this._search);\n this._searchBtnTextual.removeEventListener(\"click\", this._search);\n }\n\n _initValueChanged(oldVal, newVal) {\n if (newVal) {\n // set inputbox and buttons in the inner component\n this._input.value = newVal;\n if (newVal !== \"\" && !this.isDisabled) {\n this._searchBtn.removeAttribute(\"disabled\");\n this._searchBtnTextual.removeAttribute(\"disabled\");\n this._clearBtn.removeAttribute(\"hidden\");\n } else {\n this._searchBtn.setAttribute(\"disabled\", \"\");\n this._searchBtnTextual.setAttribute(\"disabled\", \"\");\n this._clearBtn.setAttribute(\"hidden\", \"\");\n }\n }\n }\n\n _loadingChanged() {\n if (!this.loading || this._input.value === \"\") {\n this.shadowRoot.querySelector(\".loading\").setAttribute(\"hidden\", \"\");\n } else {\n this.shadowRoot.querySelector(\".loading\").removeAttribute(\"hidden\");\n }\n }\n\n _isDisabledChanged() {\n if (this.isDisabled) {\n this._clearBtn.setAttribute(\"disabled\", \"\");\n this._searchBtn.setAttribute(\"disabled\", \"\");\n this._searchBtnTextual.setAttribute(\"disabled\", \"\");\n this._input.setAttribute(\"disabled\", \"\");\n } else {\n this._clearBtn.removeAttribute(\"disabled\");\n this._searchBtn.removeAttribute(\"disabled\");\n this._searchBtnTextual.removeAttribute(\"disabled\");\n this._input.removeAttribute(\"disabled\");\n }\n }\n\n _buttonTextChanged(oldVal, newVal) {\n if (oldVal === null) {\n this._searchBtn.setAttribute(\"hidden\", \"\");\n this._searchBtnText.innerHTML = newVal || \"Search\";\n this._searchBtnTextual.removeAttribute(\"hidden\");\n } else if (newVal === null || newVal === \"\") {\n this._searchBtnTextual.setAttribute(\"hidden\", \"\");\n this._searchBtn.removeAttribute(\"hidden\");\n } else {\n this._searchBtnText.innerHTML = newVal || \"Search\";\n }\n }\n\n _slotchangeHandler() {\n this._inputInit();\n this._dropdown._ariaAnnounceTemplate = this.getAttribute(\"aria-announce-template\") || this._ariaAnnounceTemplate;\n }\n\n _inputChanged() {\n if (this._input.value === \"\") {\n this._searchBtn.setAttribute(\"disabled\", \"\");\n this._searchBtnTextual.setAttribute(\"disabled\", \"\");\n this._clearBtn.setAttribute(\"hidden\", \"\");\n\n this._reset();\n return;\n } else {\n if (!this._input.hasAttribute(\"disabled\")) {\n this._searchBtn.removeAttribute(\"disabled\");\n this._searchBtnTextual.removeAttribute(\"disabled\");\n }\n this._clearBtn.removeAttribute(\"hidden\");\n }\n\n if (throttle === false) {\n throttle = true;\n\n window.setTimeout(() => {\n this._sendAutocompleteRequest(this._input.value);\n throttle = false;\n }, this.debounce);\n }\n }\n\n _clear() {\n this._input.value = \"\";\n this._clearBtn.setAttribute(\"hidden\", \"\");\n this._searchBtn.setAttribute(\"disabled\", \"\");\n this._searchBtnTextual.setAttribute(\"disabled\", \"\");\n this._input.focus();\n this.emitEvent(PfeAutocomplete.events.optionCleared, {\n bubbles: true,\n composed: true,\n detail: { searchValue: \"\" },\n });\n }\n\n _search() {\n this._doSearch(this._input.value);\n }\n\n _closeDroplist() {\n this._dropdown.open = null;\n this._dropdown.removeAttribute(\"active-index\");\n this._input.setAttribute(\"aria-expanded\", \"false\");\n }\n\n _openDroplist() {\n this.activeIndex = null;\n this._dropdown.open = true;\n this._dropdown.setAttribute(\"active-index\", null);\n this.emitEvent(PfeAutocomplete.events.optionsShown, {\n composed: true,\n });\n this._input.setAttribute(\"aria-expanded\", \"true\");\n }\n\n _optionSelected(e) {\n let selectedValue = e.detail.optionValue;\n\n // update input box with selected value from options list\n this._input.value = selectedValue;\n\n // send search request\n this._doSearch(selectedValue);\n }\n\n _doSearch(searchQuery) {\n this.emitEvent(PfeAutocomplete.events.search, {\n detail: { searchValue: searchQuery },\n composed: true,\n });\n this._reset();\n this.selectedValue = searchQuery;\n }\n\n _sendAutocompleteRequest(input) {\n if (!this.autocompleteRequest) return;\n\n this.autocompleteRequest({ query: input }, this._autocompleteCallback.bind(this));\n }\n\n _autocompleteCallback(response) {\n this._dropdown.data = response;\n this._dropdown.reflow = true;\n response.length !== 0 ? this._openDroplist() : this._closeDroplist();\n }\n\n _reset() {\n this._dropdown.activeIndex = null;\n this._input.setAttribute(\"aria-activedescendant\", \"\");\n this._dropdown.data = [];\n this._closeDroplist();\n }\n\n /**\n * Returns the HTML of the active element\n * @param {number} activeIndex Index of an element in the droplist\n * @return {string} The HTML inside of the given index as a string\n */\n _activeOption(activeIndex) {\n if (activeIndex === null || activeIndex === \"null\") return;\n return this._dropdown.shadowRoot.querySelector(\"li:nth-child(\" + (parseInt(activeIndex, 10) + 1) + \")\").innerHTML;\n }\n\n /**\n * Handle keyboard input, we care about arrow keys, enter, and escape\n * @param {object} e - keypress event\n */\n _inputKeyUp(e) {\n let key = e.keyCode;\n\n // Check to see if it's a key we care about\n if (\n this._dropdown.data.length === 0 &&\n key !== KEYCODE.DOWN &&\n key !== KEYCODE.UP &&\n key !== KEYCODE.ENTER &&\n key !== KEYCODE.ESC\n )\n return;\n\n let activeIndex = this._dropdown.activeIndex;\n let optionsLength = this._dropdown.data.length;\n\n if (key == KEYCODE.ESC) {\n this._closeDroplist();\n } else if (key === KEYCODE.UP) {\n if (!this._dropdown.open) {\n return;\n }\n\n activeIndex = activeIndex === null || activeIndex === \"null\" ? optionsLength : parseInt(activeIndex, 10);\n\n activeIndex -= 1;\n\n // Go to the last item if we're at -1 index\n if (activeIndex < 0) {\n activeIndex = optionsLength - 1;\n }\n\n // Get the HTML of the active element\n this._input.value = this._activeOption(activeIndex);\n } else if (key === KEYCODE.DOWN) {\n if (!this._dropdown.open) {\n return;\n }\n\n activeIndex = activeIndex === null || activeIndex === \"null\" ? -1 : parseInt(activeIndex, 10);\n activeIndex += 1;\n\n if (activeIndex > optionsLength - 1) {\n activeIndex = 0;\n }\n\n // Go to the last item if we're at -1 index\n this._input.value = this._activeOption(activeIndex);\n } else if (key === KEYCODE.ENTER) {\n if (this._activeOption(activeIndex)) {\n this.emitEvent(PfeAutocomplete.events.select, {\n detail: { optionValue: this._activeOption(activeIndex) },\n composed: true,\n });\n\n return;\n }\n\n let selectedValue = this._input.value;\n this._doSearch(selectedValue);\n return;\n }\n\n if (activeIndex !== null && activeIndex !== \"null\") {\n this._input.setAttribute(\"aria-activedescendant\", \"option-\" + activeIndex);\n } else {\n this._input.setAttribute(\"aria-activedescendant\", \"\");\n }\n\n this.activeIndex = activeIndex;\n this._dropdown.activeIndex = activeIndex;\n }\n}\n\n/*\n* - Attributes ------------------------------------\n* open | Set when the combo box dropdown is open\n* active-index | Set selected option\n* reflow | Re-renders the dropdown\n\n* - Events ----------------------------------------\n* pfe-autocomplete:option-selected | Fires when an option is selected.\n event.details.optionValue contains the selected value.\n*/\n\nclass PfeSearchDroplist extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n
      \n
      \n
        \n
      \n
      `;\n }\n\n static get tag() {\n return \"pfe-search-droplist\";\n }\n\n get templateUrl() {\n return \"pfe-search-droplist.html\";\n }\n\n get styleUrl() {\n return \"pfe-search-droplist.scss\";\n }\n\n static get properties() {\n return {\n open: {\n title: \"Open\",\n type: Boolean,\n },\n reflow: {\n title: \"Reflow\",\n type: Boolean,\n observer: \"_renderOptions\",\n },\n activeIndex: {\n title: \"Active index\",\n type: Number,\n observer: \"_activeIndexChanged\",\n },\n };\n }\n\n constructor() {\n super(PfeSearchDroplist);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this._ariaAnnounce = this.shadowRoot.querySelector(\".suggestions-aria-help\");\n\n this.activeIndex = null;\n this._ul = this.shadowRoot.querySelector(\"ul\");\n this._ul.addEventListener(\"mousedown\", this._optionSelected.bind(this));\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this._ul.removeEventListener(\"mousedown\", this._optionSelected);\n }\n\n _optionSelected(e) {\n if (e.target.tagName === \"LI\") {\n this.emitEvent(PfeAutocomplete.events.select, {\n detail: { optionValue: e.target.innerText },\n composed: true,\n });\n }\n }\n\n _renderOptions() {\n let options = this.data;\n let ariaAnnounceText = \"\";\n\n if (this._ariaAnnounceTemplate) {\n ariaAnnounceText = this._ariaAnnounceTemplate.replace(\"${numOptions}\", options.length);\n }\n\n this._ariaAnnounce.textContent = ariaAnnounceText;\n this._ariaAnnounce.setAttribute(\"aria-live\", \"polite\");\n\n this._ul.innerHTML = `${options\n .map((item, index) => {\n return `
    6. ${item}
      7. `;\n })\n .join(\"\")}`;\n }\n\n /**\n * Handle state changes when active droplist item has been changed\n */\n _activeIndexChanged() {\n // Make a quick exit if necessary\n if (!this.data || this.data.length === 0 || this.activeIndex === null || this.activeIndex === \"null\") return;\n\n // Previous element may not exist\n const previouslyActiveElement = this._ul.querySelector(\".active\");\n const activeOption = this._ul.querySelector(\"li:nth-child(\" + (parseInt(this.activeIndex, 10) + 1) + \")\");\n\n // Handle any element that should no longer be selected\n if (previouslyActiveElement) {\n previouslyActiveElement.classList.remove(\"active\");\n previouslyActiveElement.removeAttribute(\"aria-selected\");\n }\n\n // Update newly selected element to have proper attributes and settings\n activeOption.classList.add(\"active\");\n // @note Set aria-selected on the active list item, should only occur on the list item that is being referenced\n // by the aria-activedescendant attribute. This attribute is required when creating a listbox autocomplete\n // component. It helps ensure that the screen reader user knows what element is active when moving through the\n // list of items with the arrow keys\n activeOption.setAttribute(\"aria-selected\", \"true\");\n\n // scroll to selected element when selected item with keyboard is out of view\n let ulWrapper = this.shadowRoot.querySelector(\".droplist\");\n let activeOptionHeight = activeOption.offsetHeight;\n activeOptionHeight += parseInt(window.getComputedStyle(activeOption).getPropertyValue(\"margin-bottom\"), 10);\n ulWrapper.scrollTop = activeOption.offsetTop - ulWrapper.offsetHeight + activeOptionHeight;\n\n return activeOption;\n }\n}\n\nPFElement.create(PfeSearchDroplist);\nPFElement.create(PfeAutocomplete);\n\nexport default PfeAutocomplete;\n"],"names":["KEYCODE","ENTER","DOWN","UP","ESC","throttle","PfeAutocomplete","initValue","title","type","String","observer","loading","Boolean","default","isDisabled","debounce","Number","selectedValue","buttonText","search","tag","select","optionsShown","optionCleared","slotchange","_inputInit","_slotchangeHandler","bind","_slot","shadowRoot","querySelector","addEventListener","events","_ariaAnnounceTemplate","_clearBtn","_clear","_searchBtn","_search","_searchBtnTextual","_searchBtnText","_dropdown","data","activeIndex","_inputKeyUp","_closeDroplist","_optionSelected","slotNodes","assignedNodes","slotElems","filter","n","nodeType","Node","ELEMENT_NODE","length","console","error","_input","tagName","toLowerCase","_inputChanged","setAttribute","hasAttribute","removeEventListener","oldVal","newVal","value","removeAttribute","innerHTML","getAttribute","_reset","window","setTimeout","_sendAutocompleteRequest","focus","emitEvent","bubbles","composed","detail","searchValue","_doSearch","open","e","optionValue","searchQuery","input","autocompleteRequest","query","_autocompleteCallback","response","reflow","_openDroplist","parseInt","key","keyCode","optionsLength","_activeOption","PFElement","PfeSearchDroplist","_ariaAnnounce","_ul","target","innerText","options","ariaAnnounceText","replace","textContent","map","item","index","join","previouslyActiveElement","activeOption","classList","remove","add","ulWrapper","activeOptionHeight","offsetHeight","getComputedStyle","getPropertyValue","scrollTop","offsetTop","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-autocomplete/dist/pfe-autocomplete.umd.min.js b/elements/pfe-autocomplete/dist/pfe-autocomplete.umd.min.js new file mode 100644 index 0000000000..aeecf76b04 --- /dev/null +++ b/elements/pfe-autocomplete/dist/pfe-autocomplete.umd.min.js @@ -0,0 +1,2 @@ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("../../pfelement/dist/pfelement.umd.min"),require("../../pfe-button/dist/pfe-button.umd.min")):"function"==typeof define&&define.amd?define(["../../pfelement/dist/pfelement.umd.min","../../pfe-button/dist/pfe-button.umd.min"],t):(e=e||self).PfeAutocomplete=t(e.PFElement)}(this,function(e){"use strict";e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e;var t=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},i=function(e,t,i){return t&&o(e.prototype,t),i&&o(e,i),e};function o(e,t){for(var i=0;i.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);height:1px;width:1px;margin:-1px;padding:0;border:0}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{color:#151515!important}}:host([on=dark]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted--on-dark, #d2d2d2);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([on=saturated]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([on=light]){--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted, #6a6e73);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host{display:block;position:relative;font-family:"Red Hat Text",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);--pfe-autocomplete--BoxShadow:var(--pfe-theme--box-shadow--inset, inset 0 0 0.625rem 0 #fafafa);--pfe-autocomplete--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-autocomplete--Border:var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #d2d2d2)}:host([button-text]){display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}:host([button-text]) #wrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}:host([button-text]) #input-box-wrapper{position:relative}:host([button-text]) button.clear-search{width:40px;right:0}:host([button-text]) ::slotted(input[type=search]::-webkit-search-cancel-button){-webkit-appearance:none}#input-box-wrapper{border-color:#06c;border-color:var(--pfe-theme--color--feedback--info,#06c)}#input-box-wrapper ::slotted(input){width:100%;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-shadow:inset 0 0 .625rem 0 #fafafa!important;box-shadow:inset 0 0 .625rem 0 #fafafa!important;-webkit-box-shadow:var(--pfe-autocomplete--BoxShadow,var(--pfe-theme--box-shadow--inset,inset 0 0 .625rem 0 #fafafa))!important;box-shadow:var(--pfe-autocomplete--BoxShadow,var(--pfe-theme--box-shadow--inset,inset 0 0 .625rem 0 #fafafa))!important;padding-left:10px;padding-right:0;border-radius:2px;border-radius:var(--pfe-theme--ui--border-radius,2px);background-color:#fff;background-color:var(--pfe-autocomplete--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));border:1px solid #d2d2d2;border:var(--pfe-autocomplete--Border,var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#d2d2d2));font-size:1rem;font-size:var(--pfe-theme--font-size,1rem);font-family:"Red Hat Text",RedHatText,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);height:calc(20px * 2);height:calc(var(--pfe-theme--ui--element--size,20px) * 2);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;opacity:1;outline:0}#input-box-wrapper ::slotted(input:disabled),#input-box-wrapper button:disabled{cursor:not-allowed;color:#ccc}#input-box-wrapper ::slotted(input:disabled){padding-right:10px}#input-box-wrapper ::slotted(input:focus),#input-box-wrapper button:focus{outline:0}#input-box-wrapper ::slotted(input),#input-box-wrapper button{-webkit-appearance:none}#input-box-wrapper ::slotted([type=search]::-ms-clear){display:none}#input-box-wrapper ::slotted(input[type=search]::-webkit-search-cancel-button),#input-box-wrapper ::slotted(input[type=search]::-webkit-search-decoration){-webkit-appearance:none}button{color:#6a6e73;color:var(--pfe-theme--color--ui-base,#6a6e73);background-color:transparent;border:none;position:absolute;top:0;bottom:0;cursor:pointer}button.clear-search{right:30px;width:20px;margin:2px 1px;background-color:#fff;background-color:var(--pfe-theme--color--surface--lightest,#fff)}button.clear-search:hover{color:#6a6e73;color:var(--pfe-theme--color--ui-base,#6a6e73)}button.clear-search svg{width:14px;position:relative;top:2px;stroke:#d2d2d2;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.clear-search:focus svg,button.clear-search:hover svg{opacity:1;stroke:#06c;stroke:var(--pfe-theme--color--link,#06c)}button[disabled].clear-search:focus svg,button[disabled].clear-search:hover svg{stroke:#d2d2d2;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.search-button{margin-top:1px;margin-bottom:1px;right:1px;width:30px;background-color:#fff;background-color:var(--pfe-theme--color--surface--lightest,#fff)}button.search-button svg{fill:#06c;fill:var(--pfe-theme--color--link,#06c);width:18px;position:relative;top:2px;stroke:#d2d2d2;stroke:var(--pfe-theme--color--surface--border,#d2d2d2)}button.search-button:focus svg,button.search-button:hover svg{fill:#004080;fill:var(--pfe-theme--color--link--hover,#004080)}button.search-button:disabled svg{fill:#d2d2d2;fill:var(--pfe-theme--color--ui-disabled,#d2d2d2)}pfe-button.search-button--textual{margin-left:16px}.loading{position:absolute;width:30px;right:52px;top:0;bottom:0}.loading svg{width:26px;padding-top:7px} /*# sourceMappingURL=pfe-autocomplete.min.css.map */\n
      \n
      \n \x3c!-- Input box --\x3e\n \n\n \x3c!-- loading icon --\x3e\n \n\n \x3c!-- clear search button --\x3e\n \n\n \x3c!-- Search button --\x3e\n \n
      \n \n
      \n\n\x3c!-- Search button (when [button-text] attr provided) --\x3e\n'}},{key:"schemaUrl",get:function(){return"pfe-autocomplete.json"}},{key:"templateUrl",get:function(){return"pfe-autocomplete.html"}},{key:"styleUrl",get:function(){return"pfe-autocomplete.scss"}}],[{key:"version",get:function(){return"1.12.3"}},{key:"schemaProperties",get:function(){return{debounce_timer:{title:"Debounce",description:"The amount of time that should pass before the next API call is made",type:"string",prefixed:!1},init_value:{title:"Initial value",description:"An initial value to show in the input field",type:"string",prefixed:!1},is_disabled:{title:"Is disabled",description:"Disable the input",type:"boolean",prefixed:!1},"button-text":{title:"Button text",description:"Add button with text next to input field",type:"string",prefixed:!1}}}},{key:"slots",get:function(){return{content:{title:"Content",type:"array",namedSlot:!1,items:{oneOf:[{$ref:"input"}]},required:!0}}}},{key:"tag",get:function(){return"pfe-autocomplete"}},{key:"properties",get:function(){return{initValue:{title:"Initial Value",type:String,observer:"_initValueChanged"},loading:{title:"Loading",type:Boolean,default:!1,observer:"_loadingChanged"},isDisabled:{title:"Is disabled",type:Boolean,default:!1,observer:"_isDisabledChanged"},debounce:{title:"Debounce",type:Number,default:300},selectedValue:{title:"Selected value",type:String},buttonText:{title:"Button text",type:String,observer:"_buttonTextChanged"}}}},{key:"events",get:function(){return{search:this.tag+":search-event",select:this.tag+":option-selected",optionsShown:this.tag+":options-shown",optionCleared:this.tag+":option-cleared",slotchange:"slotchange"}}}]),i(h,[{key:"_inputInit",value:function(){var e=this.shadowRoot.querySelector("slot").assignedNodes().filter(function(e){return e.nodeType===Node.ELEMENT_NODE});0!==e.length?(this._input=e[0],"input"===this._input.tagName.toLowerCase()?(this._input.addEventListener("input",this._inputChanged.bind(this)),this._input.addEventListener("blur",this._closeDroplist.bind(this)),this._input.setAttribute("role","combobox"),this._input.hasAttribute("aria-label")||this._input.setAttribute("aria-label","Search"),this._input.setAttribute("aria-autocomplete","list"),this._input.setAttribute("aria-haspopup","true"),this._input.setAttribute("aria-owns","droplist-items"),this._input.setAttribute("aria-controls","droplist-items"),this._input.setAttribute("aria-expanded","false"),this._input.setAttribute("type","search"),this._input.setAttribute("autocomplete","off"),this._input.setAttribute("autocorrect","off"),this._input.setAttribute("autocapitalize","off"),this._input.setAttribute("spellcheck","false"),this._input.setAttribute("style",'input[type=search]::-ms-clear { display: none; width : 0; height: 0; }input[type = search]:: -ms - reveal { display: none; width: 0; height: 0; }" nput[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; }')):console.error(h.tag+": The only child in the light DOM must be an input tag")):console.error(h.tag+": There must be a input tag in the light DOM")}},{key:"disconnectedCallback",value:function(){n(h.prototype.__proto__||Object.getPrototypeOf(h.prototype),"disconnectedCallback",this).call(this),this.removeEventListener("keyup",this._inputKeyUp),this.removeEventListener(h.events.search,this._closeDroplist),this.removeEventListener(h.events.select,this._optionSelected),this._slot.removeEventListener(h.events.slotchange,this._slotchangeHandler),this._input&&(this._input.removeEventListener("input",this._inputChanged),this._input.removeEventListener("blur",this._closeDroplist)),this._clearBtn.removeEventListener("click",this._clear),this._searchBtn.removeEventListener("click",this._search),this._searchBtnTextual.removeEventListener("click",this._search)}},{key:"_initValueChanged",value:function(e,t){t&&(""===(this._input.value=t)||this.isDisabled?(this._searchBtn.setAttribute("disabled",""),this._searchBtnTextual.setAttribute("disabled",""),this._clearBtn.setAttribute("hidden","")):(this._searchBtn.removeAttribute("disabled"),this._searchBtnTextual.removeAttribute("disabled"),this._clearBtn.removeAttribute("hidden")))}},{key:"_loadingChanged",value:function(){this.loading&&""!==this._input.value?this.shadowRoot.querySelector(".loading").removeAttribute("hidden"):this.shadowRoot.querySelector(".loading").setAttribute("hidden","")}},{key:"_isDisabledChanged",value:function(){this.isDisabled?(this._clearBtn.setAttribute("disabled",""),this._searchBtn.setAttribute("disabled",""),this._searchBtnTextual.setAttribute("disabled",""),this._input.setAttribute("disabled","")):(this._clearBtn.removeAttribute("disabled"),this._searchBtn.removeAttribute("disabled"),this._searchBtnTextual.removeAttribute("disabled"),this._input.removeAttribute("disabled"))}},{key:"_buttonTextChanged",value:function(e,t){null===e?(this._searchBtn.setAttribute("hidden",""),this._searchBtnText.innerHTML=t||"Search",this._searchBtnTextual.removeAttribute("hidden")):null===t||""===t?(this._searchBtnTextual.setAttribute("hidden",""),this._searchBtn.removeAttribute("hidden")):this._searchBtnText.innerHTML=t||"Search"}},{key:"_slotchangeHandler",value:function(){this._inputInit(),this._dropdown._ariaAnnounceTemplate=this.getAttribute("aria-announce-template")||this._ariaAnnounceTemplate}},{key:"_inputChanged",value:function(){var e=this;if(""===this._input.value)return this._searchBtn.setAttribute("disabled",""),this._searchBtnTextual.setAttribute("disabled",""),this._clearBtn.setAttribute("hidden",""),void this._reset();this._input.hasAttribute("disabled")||(this._searchBtn.removeAttribute("disabled"),this._searchBtnTextual.removeAttribute("disabled")),this._clearBtn.removeAttribute("hidden"),!1===u&&(u=!0,window.setTimeout(function(){e._sendAutocompleteRequest(e._input.value),u=!1},this.debounce))}},{key:"_clear",value:function(){this._input.value="",this._clearBtn.setAttribute("hidden",""),this._searchBtn.setAttribute("disabled",""),this._searchBtnTextual.setAttribute("disabled",""),this._input.focus(),this.emitEvent(h.events.optionCleared,{bubbles:!0,composed:!0,detail:{searchValue:""}})}},{key:"_search",value:function(){this._doSearch(this._input.value)}},{key:"_closeDroplist",value:function(){this._dropdown.open=null,this._dropdown.removeAttribute("active-index"),this._input.setAttribute("aria-expanded","false")}},{key:"_openDroplist",value:function(){this.activeIndex=null,this._dropdown.open=!0,this._dropdown.setAttribute("active-index",null),this.emitEvent(h.events.optionsShown,{composed:!0}),this._input.setAttribute("aria-expanded","true")}},{key:"_optionSelected",value:function(e){e=e.detail.optionValue;this._input.value=e,this._doSearch(e)}},{key:"_doSearch",value:function(e){this.emitEvent(h.events.search,{detail:{searchValue:e},composed:!0}),this._reset(),this.selectedValue=e}},{key:"_sendAutocompleteRequest",value:function(e){this.autocompleteRequest&&this.autocompleteRequest({query:e},this._autocompleteCallback.bind(this))}},{key:"_autocompleteCallback",value:function(e){this._dropdown.data=e,this._dropdown.reflow=!0,0!==e.length?this._openDroplist():this._closeDroplist()}},{key:"_reset",value:function(){this._dropdown.activeIndex=null,this._input.setAttribute("aria-activedescendant",""),this._dropdown.data=[],this._closeDroplist()}},{key:"_activeOption",value:function(e){if(null!==e&&"null"!==e)return this._dropdown.shadowRoot.querySelector("li:nth-child("+(parseInt(e,10)+1)+")").innerHTML}},{key:"_inputKeyUp",value:function(e){var t=e.keyCode;if(0!==this._dropdown.data.length||t===l||t===d||t===s||t===c){var i=this._dropdown.activeIndex,e=this._dropdown.data.length;if(t==c)this._closeDroplist();else if(t===d){if(!this._dropdown.open)return;i=null===i||"null"===i?e:parseInt(i,10),this._input.value=this._activeOption(i=--i<0?e-1:i)}else if(t===l){if(!this._dropdown.open)return;i=null===i||"null"===i?-1:parseInt(i,10),this._input.value=this._activeOption(i=e-1<(i+=1)?0:i)}else if(t===s){if(this._activeOption(i))return void this.emitEvent(h.events.select,{detail:{optionValue:this._activeOption(i)},composed:!0});t=this._input.value;return void this._doSearch(t)}null!==i&&"null"!==i?this._input.setAttribute("aria-activedescendant","option-"+i):this._input.setAttribute("aria-activedescendant",""),this.activeIndex=i,this._dropdown.activeIndex=i}}}]),h);function h(){t(this,h);var e=a(this,(h.__proto__||Object.getPrototypeOf(h)).call(this,h));return e._inputInit(),e._slotchangeHandler=e._slotchangeHandler.bind(e),e._slot=e.shadowRoot.querySelector("slot"),e._slot.addEventListener(h.events.slotchange,e._slotchangeHandler),e._ariaAnnounceTemplate="There are ${numOptions} suggestions. Use the up and down arrows to browse.",e._clearBtn=e.shadowRoot.querySelector(".clear-search"),e._clearBtn.addEventListener("click",e._clear.bind(e)),e._searchBtn=e.shadowRoot.querySelector(".search-button"),e._searchBtn.addEventListener("click",e._search.bind(e)),e._searchBtnTextual=e.shadowRoot.querySelector(".search-button--textual"),e._searchBtnText=e.shadowRoot.querySelector(".search-button__text"),e._searchBtnTextual.addEventListener("click",e._search.bind(e)),e._dropdown=e.shadowRoot.querySelector("#dropdown"),e._dropdown.data=[],e.activeIndex=null,e.addEventListener("keyup",e._inputKeyUp.bind(e)),e.addEventListener(h.events.search,e._closeDroplist.bind(e)),e.addEventListener(h.events.select,e._optionSelected.bind(e)),e}r(f,e),i(f,[{key:"html",get:function(){return'\n\n
      \n
      \n
        \n
      \n
      '}},{key:"templateUrl",get:function(){return"pfe-search-droplist.html"}},{key:"styleUrl",get:function(){return"pfe-search-droplist.scss"}}],[{key:"version",get:function(){return"1.12.3"}},{key:"tag",get:function(){return"pfe-search-droplist"}},{key:"properties",get:function(){return{open:{title:"Open",type:Boolean},reflow:{title:"Reflow",type:Boolean,observer:"_renderOptions"},activeIndex:{title:"Active index",type:Number,observer:"_activeIndexChanged"}}}}]),i(f,[{key:"connectedCallback",value:function(){n(f.prototype.__proto__||Object.getPrototypeOf(f.prototype),"connectedCallback",this).call(this),this._ariaAnnounce=this.shadowRoot.querySelector(".suggestions-aria-help"),this.activeIndex=null,this._ul=this.shadowRoot.querySelector("ul"),this._ul.addEventListener("mousedown",this._optionSelected.bind(this))}},{key:"disconnectedCallback",value:function(){n(f.prototype.__proto__||Object.getPrototypeOf(f.prototype),"disconnectedCallback",this).call(this),this._ul.removeEventListener("mousedown",this._optionSelected)}},{key:"_optionSelected",value:function(e){"LI"===e.target.tagName&&this.emitEvent(p.events.select,{detail:{optionValue:e.target.innerText},composed:!0})}},{key:"_renderOptions",value:function(){var e=this.data,t="";this._ariaAnnounceTemplate&&(t=this._ariaAnnounceTemplate.replace("${numOptions}",e.length)),this._ariaAnnounce.textContent=t,this._ariaAnnounce.setAttribute("aria-live","polite"),this._ul.innerHTML=""+e.map(function(e,t){return'
    7. '+e+"
      8. "}).join("")}},{key:"_activeIndexChanged",value:function(){if(this.data&&0!==this.data.length&&null!==this.activeIndex&&"null"!==this.activeIndex){var e=this._ul.querySelector(".active"),t=this._ul.querySelector("li:nth-child("+(parseInt(this.activeIndex,10)+1)+")");e&&(e.classList.remove("active"),e.removeAttribute("aria-selected")),t.classList.add("active"),t.setAttribute("aria-selected","true");var i=this.shadowRoot.querySelector(".droplist"),e=t.offsetHeight;return e+=parseInt(window.getComputedStyle(t).getPropertyValue("margin-bottom"),10),i.scrollTop=t.offsetTop-i.offsetHeight+e,t}}}]),i=f;function f(){return t(this,f),a(this,(f.__proto__||Object.getPrototypeOf(f)).call(this,f))}return e.create(i),e.create(p),p}); +//# sourceMappingURL=pfe-autocomplete.umd.min.js.map diff --git a/elements/pfe-autocomplete/dist/pfe-autocomplete.umd.min.js.map b/elements/pfe-autocomplete/dist/pfe-autocomplete.umd.min.js.map new file mode 100644 index 0000000000..585dde6350 --- /dev/null +++ b/elements/pfe-autocomplete/dist/pfe-autocomplete.umd.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-autocomplete.umd.min.js","sources":["../_temp/pfe-autocomplete.umd.js"],"sourcesContent":["/*!\n * PatternFly Elements: PfeAutocomplete 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement\";\nimport \"../../pfe-button/dist/pfe-button\";\n\nconst KEYCODE = {\n ENTER: 13,\n DOWN: 40,\n UP: 38,\n ESC: 27,\n};\n\n// use this variable to debounce api call when user types very fast\nlet throttle = false;\n\nclass PfeAutocomplete extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n
      \n
      \n \n \n\n \n \n\n \n \n\n \n \n
      \n \n
      \n\n\n`;\n }\n\n // @TODO: Deprecating in 1.0 release\n // Injected at build-time\n static get schemaProperties() {\n return {\"debounce_timer\":{\"title\":\"Debounce\",\"description\":\"The amount of time that should pass before the next API call is made\",\"type\":\"string\",\"prefixed\":false},\"init_value\":{\"title\":\"Initial value\",\"description\":\"An initial value to show in the input field\",\"type\":\"string\",\"prefixed\":false},\"is_disabled\":{\"title\":\"Is disabled\",\"description\":\"Disable the input\",\"type\":\"boolean\",\"prefixed\":false},\"button-text\":{\"title\":\"Button text\",\"description\":\"Add button with text next to input field\",\"type\":\"string\",\"prefixed\":false}};\n }\n\n // Injected at build-time\n static get slots() {\n return {\"content\":{\"title\":\"Content\",\"type\":\"array\",\"namedSlot\":false,\"items\":{\"oneOf\":[{\"$ref\":\"input\"}]},\"required\":true}};\n }\n\n static get tag() {\n return \"pfe-autocomplete\";\n }\n\n get schemaUrl() {\n return \"pfe-autocomplete.json\";\n }\n\n get templateUrl() {\n return \"pfe-autocomplete.html\";\n }\n\n get styleUrl() {\n return \"pfe-autocomplete.scss\";\n }\n\n static get properties() {\n return {\n initValue: {\n title: \"Initial Value\",\n type: String,\n observer: \"_initValueChanged\",\n },\n loading: {\n title: \"Loading\",\n type: Boolean,\n default: false,\n observer: \"_loadingChanged\",\n },\n isDisabled: {\n title: \"Is disabled\",\n type: Boolean,\n default: false,\n observer: \"_isDisabledChanged\",\n },\n debounce: {\n title: \"Debounce\",\n type: Number,\n default: 300,\n },\n selectedValue: {\n title: \"Selected value\",\n type: String,\n },\n buttonText: {\n title: \"Button text\",\n type: String,\n observer: \"_buttonTextChanged\",\n },\n };\n }\n\n static get events() {\n return {\n search: `${this.tag}:search-event`,\n select: `${this.tag}:option-selected`,\n optionsShown: `${this.tag}:options-shown`,\n optionCleared: `${this.tag}:option-cleared`,\n slotchange: `slotchange`,\n };\n }\n\n constructor() {\n super(PfeAutocomplete);\n\n this._inputInit();\n\n this._slotchangeHandler = this._slotchangeHandler.bind(this);\n\n this._slot = this.shadowRoot.querySelector(\"slot\");\n this._slot.addEventListener(PfeAutocomplete.events.slotchange, this._slotchangeHandler);\n\n // @TODO: Confirm this is translatable\n this._ariaAnnounceTemplate = \"There are ${numOptions} suggestions. Use the up and down arrows to browse.\";\n\n // clear button\n this._clearBtn = this.shadowRoot.querySelector(\".clear-search\");\n this._clearBtn.addEventListener(\"click\", this._clear.bind(this));\n\n // search button\n this._searchBtn = this.shadowRoot.querySelector(\".search-button\");\n this._searchBtn.addEventListener(\"click\", this._search.bind(this));\n\n // textual search button\n this._searchBtnTextual = this.shadowRoot.querySelector(\".search-button--textual\");\n this._searchBtnText = this.shadowRoot.querySelector(\".search-button__text\");\n this._searchBtnTextual.addEventListener(\"click\", this._search.bind(this));\n\n this._dropdown = this.shadowRoot.querySelector(\"#dropdown\");\n this._dropdown.data = [];\n\n this.activeIndex = null;\n\n this.addEventListener(\"keyup\", this._inputKeyUp.bind(this));\n\n // these two events, fire search\n this.addEventListener(PfeAutocomplete.events.search, this._closeDroplist.bind(this));\n this.addEventListener(PfeAutocomplete.events.select, this._optionSelected.bind(this));\n }\n\n _inputInit() {\n // input box\n let slotNodes = this.shadowRoot.querySelector(\"slot\").assignedNodes();\n let slotElems = slotNodes.filter((n) => n.nodeType === Node.ELEMENT_NODE);\n if (slotElems.length === 0) {\n console.error(`${PfeAutocomplete.tag}: There must be a input tag in the light DOM`);\n return;\n }\n this._input = slotElems[0];\n\n if (this._input.tagName.toLowerCase() !== \"input\") {\n console.error(`${PfeAutocomplete.tag}: The only child in the light DOM must be an input tag`);\n\n return;\n }\n\n this._input.addEventListener(\"input\", this._inputChanged.bind(this));\n this._input.addEventListener(\"blur\", this._closeDroplist.bind(this));\n\n this._input.setAttribute(\"role\", \"combobox\");\n\n if (!this._input.hasAttribute(\"aria-label\")) {\n this._input.setAttribute(\"aria-label\", \"Search\");\n }\n\n this._input.setAttribute(\"aria-autocomplete\", \"list\");\n this._input.setAttribute(\"aria-haspopup\", \"true\");\n this._input.setAttribute(\"aria-owns\", \"droplist-items\");\n this._input.setAttribute(\"aria-controls\", \"droplist-items\");\n this._input.setAttribute(\"aria-expanded\", \"false\");\n this._input.setAttribute(\"type\", \"search\");\n this._input.setAttribute(\"autocomplete\", \"off\");\n this._input.setAttribute(\"autocorrect\", \"off\");\n this._input.setAttribute(\"autocapitalize\", \"off\");\n this._input.setAttribute(\"spellcheck\", \"false\");\n\n this._input.setAttribute(\n \"style\",\n `input[type=search]::-ms-clear { display: none; width : 0; height: 0; }input[type = search]:: -ms - reveal { display: none; width: 0; height: 0; }\" nput[type=\"search\"]::-webkit-search-decoration, input[type=\"search\"]::-webkit-search-cancel-button, input[type=\"search\"]::-webkit-search-results-button, input[type=\"search\"]::-webkit-search-results-decoration { display: none; }`\n );\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener(\"keyup\", this._inputKeyUp);\n\n this.removeEventListener(PfeAutocomplete.events.search, this._closeDroplist);\n this.removeEventListener(PfeAutocomplete.events.select, this._optionSelected);\n this._slot.removeEventListener(PfeAutocomplete.events.slotchange, this._slotchangeHandler);\n if (this._input) {\n this._input.removeEventListener(\"input\", this._inputChanged);\n this._input.removeEventListener(\"blur\", this._closeDroplist);\n }\n\n this._clearBtn.removeEventListener(\"click\", this._clear);\n this._searchBtn.removeEventListener(\"click\", this._search);\n this._searchBtnTextual.removeEventListener(\"click\", this._search);\n }\n\n _initValueChanged(oldVal, newVal) {\n if (newVal) {\n // set inputbox and buttons in the inner component\n this._input.value = newVal;\n if (newVal !== \"\" && !this.isDisabled) {\n this._searchBtn.removeAttribute(\"disabled\");\n this._searchBtnTextual.removeAttribute(\"disabled\");\n this._clearBtn.removeAttribute(\"hidden\");\n } else {\n this._searchBtn.setAttribute(\"disabled\", \"\");\n this._searchBtnTextual.setAttribute(\"disabled\", \"\");\n this._clearBtn.setAttribute(\"hidden\", \"\");\n }\n }\n }\n\n _loadingChanged() {\n if (!this.loading || this._input.value === \"\") {\n this.shadowRoot.querySelector(\".loading\").setAttribute(\"hidden\", \"\");\n } else {\n this.shadowRoot.querySelector(\".loading\").removeAttribute(\"hidden\");\n }\n }\n\n _isDisabledChanged() {\n if (this.isDisabled) {\n this._clearBtn.setAttribute(\"disabled\", \"\");\n this._searchBtn.setAttribute(\"disabled\", \"\");\n this._searchBtnTextual.setAttribute(\"disabled\", \"\");\n this._input.setAttribute(\"disabled\", \"\");\n } else {\n this._clearBtn.removeAttribute(\"disabled\");\n this._searchBtn.removeAttribute(\"disabled\");\n this._searchBtnTextual.removeAttribute(\"disabled\");\n this._input.removeAttribute(\"disabled\");\n }\n }\n\n _buttonTextChanged(oldVal, newVal) {\n if (oldVal === null) {\n this._searchBtn.setAttribute(\"hidden\", \"\");\n this._searchBtnText.innerHTML = newVal || \"Search\";\n this._searchBtnTextual.removeAttribute(\"hidden\");\n } else if (newVal === null || newVal === \"\") {\n this._searchBtnTextual.setAttribute(\"hidden\", \"\");\n this._searchBtn.removeAttribute(\"hidden\");\n } else {\n this._searchBtnText.innerHTML = newVal || \"Search\";\n }\n }\n\n _slotchangeHandler() {\n this._inputInit();\n this._dropdown._ariaAnnounceTemplate = this.getAttribute(\"aria-announce-template\") || this._ariaAnnounceTemplate;\n }\n\n _inputChanged() {\n if (this._input.value === \"\") {\n this._searchBtn.setAttribute(\"disabled\", \"\");\n this._searchBtnTextual.setAttribute(\"disabled\", \"\");\n this._clearBtn.setAttribute(\"hidden\", \"\");\n\n this._reset();\n return;\n } else {\n if (!this._input.hasAttribute(\"disabled\")) {\n this._searchBtn.removeAttribute(\"disabled\");\n this._searchBtnTextual.removeAttribute(\"disabled\");\n }\n this._clearBtn.removeAttribute(\"hidden\");\n }\n\n if (throttle === false) {\n throttle = true;\n\n window.setTimeout(() => {\n this._sendAutocompleteRequest(this._input.value);\n throttle = false;\n }, this.debounce);\n }\n }\n\n _clear() {\n this._input.value = \"\";\n this._clearBtn.setAttribute(\"hidden\", \"\");\n this._searchBtn.setAttribute(\"disabled\", \"\");\n this._searchBtnTextual.setAttribute(\"disabled\", \"\");\n this._input.focus();\n this.emitEvent(PfeAutocomplete.events.optionCleared, {\n bubbles: true,\n composed: true,\n detail: { searchValue: \"\" },\n });\n }\n\n _search() {\n this._doSearch(this._input.value);\n }\n\n _closeDroplist() {\n this._dropdown.open = null;\n this._dropdown.removeAttribute(\"active-index\");\n this._input.setAttribute(\"aria-expanded\", \"false\");\n }\n\n _openDroplist() {\n this.activeIndex = null;\n this._dropdown.open = true;\n this._dropdown.setAttribute(\"active-index\", null);\n this.emitEvent(PfeAutocomplete.events.optionsShown, {\n composed: true,\n });\n this._input.setAttribute(\"aria-expanded\", \"true\");\n }\n\n _optionSelected(e) {\n let selectedValue = e.detail.optionValue;\n\n // update input box with selected value from options list\n this._input.value = selectedValue;\n\n // send search request\n this._doSearch(selectedValue);\n }\n\n _doSearch(searchQuery) {\n this.emitEvent(PfeAutocomplete.events.search, {\n detail: { searchValue: searchQuery },\n composed: true,\n });\n this._reset();\n this.selectedValue = searchQuery;\n }\n\n _sendAutocompleteRequest(input) {\n if (!this.autocompleteRequest) return;\n\n this.autocompleteRequest({ query: input }, this._autocompleteCallback.bind(this));\n }\n\n _autocompleteCallback(response) {\n this._dropdown.data = response;\n this._dropdown.reflow = true;\n response.length !== 0 ? this._openDroplist() : this._closeDroplist();\n }\n\n _reset() {\n this._dropdown.activeIndex = null;\n this._input.setAttribute(\"aria-activedescendant\", \"\");\n this._dropdown.data = [];\n this._closeDroplist();\n }\n\n /**\n * Returns the HTML of the active element\n * @param {number} activeIndex Index of an element in the droplist\n * @return {string} The HTML inside of the given index as a string\n */\n _activeOption(activeIndex) {\n if (activeIndex === null || activeIndex === \"null\") return;\n return this._dropdown.shadowRoot.querySelector(\"li:nth-child(\" + (parseInt(activeIndex, 10) + 1) + \")\").innerHTML;\n }\n\n /**\n * Handle keyboard input, we care about arrow keys, enter, and escape\n * @param {object} e - keypress event\n */\n _inputKeyUp(e) {\n let key = e.keyCode;\n\n // Check to see if it's a key we care about\n if (\n this._dropdown.data.length === 0 &&\n key !== KEYCODE.DOWN &&\n key !== KEYCODE.UP &&\n key !== KEYCODE.ENTER &&\n key !== KEYCODE.ESC\n )\n return;\n\n let activeIndex = this._dropdown.activeIndex;\n let optionsLength = this._dropdown.data.length;\n\n if (key == KEYCODE.ESC) {\n this._closeDroplist();\n } else if (key === KEYCODE.UP) {\n if (!this._dropdown.open) {\n return;\n }\n\n activeIndex = activeIndex === null || activeIndex === \"null\" ? optionsLength : parseInt(activeIndex, 10);\n\n activeIndex -= 1;\n\n // Go to the last item if we're at -1 index\n if (activeIndex < 0) {\n activeIndex = optionsLength - 1;\n }\n\n // Get the HTML of the active element\n this._input.value = this._activeOption(activeIndex);\n } else if (key === KEYCODE.DOWN) {\n if (!this._dropdown.open) {\n return;\n }\n\n activeIndex = activeIndex === null || activeIndex === \"null\" ? -1 : parseInt(activeIndex, 10);\n activeIndex += 1;\n\n if (activeIndex > optionsLength - 1) {\n activeIndex = 0;\n }\n\n // Go to the last item if we're at -1 index\n this._input.value = this._activeOption(activeIndex);\n } else if (key === KEYCODE.ENTER) {\n if (this._activeOption(activeIndex)) {\n this.emitEvent(PfeAutocomplete.events.select, {\n detail: { optionValue: this._activeOption(activeIndex) },\n composed: true,\n });\n\n return;\n }\n\n let selectedValue = this._input.value;\n this._doSearch(selectedValue);\n return;\n }\n\n if (activeIndex !== null && activeIndex !== \"null\") {\n this._input.setAttribute(\"aria-activedescendant\", \"option-\" + activeIndex);\n } else {\n this._input.setAttribute(\"aria-activedescendant\", \"\");\n }\n\n this.activeIndex = activeIndex;\n this._dropdown.activeIndex = activeIndex;\n }\n}\n\n/*\n* - Attributes ------------------------------------\n* open | Set when the combo box dropdown is open\n* active-index | Set selected option\n* reflow | Re-renders the dropdown\n\n* - Events ----------------------------------------\n* pfe-autocomplete:option-selected | Fires when an option is selected.\n event.details.optionValue contains the selected value.\n*/\n\nclass PfeSearchDroplist extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n
      \n
      \n
        \n
      \n
      `;\n }\n\n static get tag() {\n return \"pfe-search-droplist\";\n }\n\n get templateUrl() {\n return \"pfe-search-droplist.html\";\n }\n\n get styleUrl() {\n return \"pfe-search-droplist.scss\";\n }\n\n static get properties() {\n return {\n open: {\n title: \"Open\",\n type: Boolean,\n },\n reflow: {\n title: \"Reflow\",\n type: Boolean,\n observer: \"_renderOptions\",\n },\n activeIndex: {\n title: \"Active index\",\n type: Number,\n observer: \"_activeIndexChanged\",\n },\n };\n }\n\n constructor() {\n super(PfeSearchDroplist);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this._ariaAnnounce = this.shadowRoot.querySelector(\".suggestions-aria-help\");\n\n this.activeIndex = null;\n this._ul = this.shadowRoot.querySelector(\"ul\");\n this._ul.addEventListener(\"mousedown\", this._optionSelected.bind(this));\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this._ul.removeEventListener(\"mousedown\", this._optionSelected);\n }\n\n _optionSelected(e) {\n if (e.target.tagName === \"LI\") {\n this.emitEvent(PfeAutocomplete.events.select, {\n detail: { optionValue: e.target.innerText },\n composed: true,\n });\n }\n }\n\n _renderOptions() {\n let options = this.data;\n let ariaAnnounceText = \"\";\n\n if (this._ariaAnnounceTemplate) {\n ariaAnnounceText = this._ariaAnnounceTemplate.replace(\"${numOptions}\", options.length);\n }\n\n this._ariaAnnounce.textContent = ariaAnnounceText;\n this._ariaAnnounce.setAttribute(\"aria-live\", \"polite\");\n\n this._ul.innerHTML = `${options\n .map((item, index) => {\n return `
    8. ${item}
      9. `;\n })\n .join(\"\")}`;\n }\n\n /**\n * Handle state changes when active droplist item has been changed\n */\n _activeIndexChanged() {\n // Make a quick exit if necessary\n if (!this.data || this.data.length === 0 || this.activeIndex === null || this.activeIndex === \"null\") return;\n\n // Previous element may not exist\n const previouslyActiveElement = this._ul.querySelector(\".active\");\n const activeOption = this._ul.querySelector(\"li:nth-child(\" + (parseInt(this.activeIndex, 10) + 1) + \")\");\n\n // Handle any element that should no longer be selected\n if (previouslyActiveElement) {\n previouslyActiveElement.classList.remove(\"active\");\n previouslyActiveElement.removeAttribute(\"aria-selected\");\n }\n\n // Update newly selected element to have proper attributes and settings\n activeOption.classList.add(\"active\");\n // @note Set aria-selected on the active list item, should only occur on the list item that is being referenced\n // by the aria-activedescendant attribute. This attribute is required when creating a listbox autocomplete\n // component. It helps ensure that the screen reader user knows what element is active when moving through the\n // list of items with the arrow keys\n activeOption.setAttribute(\"aria-selected\", \"true\");\n\n // scroll to selected element when selected item with keyboard is out of view\n let ulWrapper = this.shadowRoot.querySelector(\".droplist\");\n let activeOptionHeight = activeOption.offsetHeight;\n activeOptionHeight += parseInt(window.getComputedStyle(activeOption).getPropertyValue(\"margin-bottom\"), 10);\n ulWrapper.scrollTop = activeOption.offsetTop - ulWrapper.offsetHeight + activeOptionHeight;\n\n return activeOption;\n }\n}\n\nPFElement.create(PfeSearchDroplist);\nPFElement.create(PfeAutocomplete);\n\nexport default PfeAutocomplete;\n"],"names":["KEYCODE","throttle","PfeAutocomplete","PFElement","debounce_timer","title","description","type","prefixed","init_value","is_disabled","button-text","content","namedSlot","items","oneOf","$ref","required","String","Boolean","Number","this","tag","slotElems","shadowRoot","querySelector","assignedNodes","filter","n","nodeType","Node","ELEMENT_NODE","length","_input","tagName","toLowerCase","addEventListener","_inputChanged","bind","_closeDroplist","setAttribute","hasAttribute","error","removeEventListener","_inputKeyUp","events","search","select","_optionSelected","_slot","slotchange","_slotchangeHandler","_clearBtn","_clear","_searchBtn","_search","_searchBtnTextual","oldVal","newVal","value","isDisabled","removeAttribute","loading","_searchBtnText","innerHTML","_inputInit","_dropdown","_ariaAnnounceTemplate","getAttribute","_reset","setTimeout","_sendAutocompleteRequest","_this2","debounce","focus","emitEvent","optionCleared","searchValue","_doSearch","open","activeIndex","optionsShown","e","selectedValue","detail","optionValue","searchQuery","input","autocompleteRequest","query","_autocompleteCallback","response","data","reflow","_openDroplist","parseInt","key","keyCode","optionsLength","_activeOption","_this","_ariaAnnounce","_ul","target","innerText","options","ariaAnnounceText","replace","textContent","map","item","index","join","previouslyActiveElement","activeOption","classList","remove","add","ulWrapper","activeOptionHeight","offsetHeight","window","getComputedStyle","getPropertyValue","scrollTop","offsetTop","PfeSearchDroplist","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-autocomplete/package.json b/elements/pfe-autocomplete/package.json index 4f942cf095..6300428959 100644 --- a/elements/pfe-autocomplete/package.json +++ b/elements/pfe-autocomplete/package.json @@ -5,7 +5,7 @@ "elementName": "pfe-autocomplete", "preview": "pfe-autocomplete-screenshot.png" }, - "version": "1.12.2", + "version": "1.12.3", "description": "Autocomplete element for PatternFly Elements", "keywords": [ "web-components", @@ -44,10 +44,10 @@ ], "license": "MIT", "devDependencies": { - "@patternfly/pfe-sass": "^1.12.2" + "@patternfly/pfe-sass": "^1.12.3" }, "dependencies": { - "@patternfly/pfelement": "^1.12.2" + "@patternfly/pfelement": "^1.12.3" }, "generator-pfelement-version": "0.5.5", "bugs": { diff --git a/elements/pfe-avatar/dist/pfe-avatar.css.map b/elements/pfe-avatar/dist/pfe-avatar.css.map new file mode 100644 index 0000000000..bc5d52494a --- /dev/null +++ b/elements/pfe-avatar/dist/pfe-avatar.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["pfe-avatar.scss","../../pfe-sass/functions/_custom-properties.scss","pfe-avatar.css"],"names":[],"mappings":"AAcA;EACE,cAAc;EACd,kBAAkB;EAElB,YC6DkC;ED7DlC,+DC6DkC;ED5DlC,aC4DkC;ED5DlC,gEC4DkC;AC1EpC;;AFSA;EAQI,WAAW;EACX,YAAY;EAEZ,8BAA8B;EAAE,yBAAA;EAChC,iCAAiC;EAAE,YAAA;EACnC,0CAA0C;EAAE,WAAA;EAC5C,+BAA+B;EAAE,kCAAA;EACjC,6BAA0B;EAA1B,0BAA0B;EAAE,4BAAA;EAC5B,wCAAwC;EAAE,OAAA;AER9C;;AFYA;;EAOI,oCAAiD;EAAjD,uFAAiD;AEdrD;;AFkBA;;EAGI,kBAAkB;AEhBtB;;AFqBA;EAEI,aAAa;AEnBjB;;AFiBA;EAMI,cAAc;EACd,WAAW;EACX,YAAY;EACZ,oBAAiB;KAAjB,iBAAiB;AEnBrB;;AFwBA;EACE,aAAa;AErBf;;AFwBA;EACE,aAAa;AErBf","file":"pfe-avatar.css","sourcesContent":["@import \"../../pfe-sass/pfe-sass\";\n\n$LOCAL: avatar;\n$LOCAL-VARIABLES: (\n size: 128px\n);\n\n // TODO: This will be removed at 1.0 in favor of size\n $backwards-compatibility: (\n size: pfe-local(width, $fallback: 128px)\n );\n\n $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, $backwards-compatibility);\n\n:host {\n display: block;\n position: relative;\n\n width: pfe-local(size);\n height: pfe-local(size);\n\n canvas {\n width: 100%;\n height: 100%;\n\n image-rendering: optimizeSpeed; /* Older versions of FF */\n image-rendering: -moz-crisp-edges; /* FF 6.0+ */\n image-rendering: -webkit-optimize-contrast; /* Safari */\n image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */\n image-rendering: pixelated; /* Awesome future-browsers */\n -ms-interpolation-mode: nearest-neighbor; /* IE */\n }\n}\n\n:host([shape=\"rounded\"]) {\n // When border radius lines up with the size of the avatar's random\n // patterns, it looks nice, so make border-radius the same size as the\n // patterns, ie 1/8th the width of the avatars. add 1px beacuse it looks\n // just a little bit better.\n img,\n canvas {\n border-radius: calc(#{pfe-local(size)} / 8 + 1px);\n }\n}\n\n:host([shape=\"circle\"]) {\n img,\n canvas {\n border-radius: 50%;\n }\n}\n\n// when src attribute is provided, show the img but hide the canvas\n:host([src]) {\n canvas {\n display: none;\n }\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n}\n\n// when src attribute is not present, hide the img\n:host(:not([src])) img {\n display: none;\n}\n\n:host([hidden]) {\n display: none;\n}\n","////\n/// Tools for leveraging custom property stacks\n/// @group custom-properties\n/// @author castastrophe\n////\n\n/// Get full theme stack with a fallback from the provided map - used by pfe-var and pfe-zindex\n/// @param {String} $category - Category name to be appended to variables within the map/system\n/// @param {String} $key - Variable name to be used and prepended with --pfe-theme\n/// @param {Map} $map - Sass map of variables\n/// @param {String} $fallback [null] - Optional fallback override\n/// @param {Boolean} $use-fallback [true] - Optional hook to return a stack with no fallback value\n/// @requires $custom-prop-prefix\n/// @return {String} theme stack with fallback value from a sass map\n@function pfe-get-from-map($category, $key, $map, $fallback: null, $prefix: \"#{$custom-prop-prefix}-theme\", $use-fallback: true) {\n // Start building the variable declaration\n $var-declaration: \"--#{$prefix}--\";\n @if $prefix == \"pf-c\" {\n $var-declaration: \"--#{$prefix}-\"; // one dash at the end\n }\n // If the category exists, inject that into the string\n @if $category != \"\" {\n $var-declaration: \"#{$var-declaration}#{$category}--\";\n }\n // Append the key to the string\n $var-declaration: \"#{$var-declaration}#{$key}\";\n\n // If the fallback is not provided but use-fallback is set to true\n @if $fallback == null and $use-fallback and map-get($map, $key) != null {\n $fallback: map-get($map, $key);\n }\n @if $fallback != null {\n // Create the variable declaration\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration}); \n}\n\n\n\n/// Returns CSS Var for the local component-scoped variable\n/// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--'\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $custom-prop-prefix\n/// @see $LOCAL\n/// @example\n/// :host {\n/// padding-top: #{pfe-local(paddingTop)};\n/// padding-bottom: #{pfe-local(paddingBottom)};\n/// }\n@function pfe-local($cssvar, $fallback: null, $region: null) {\n // If a fallback is not defined, use the global variables map\n @if $fallback == null and length($LOCAL-VARIABLES) > 0 {\n @if $region == null {\n $fallback: map-get($LOCAL-VARIABLES, $cssvar);\n }\n @else {\n $submap: map-get($LOCAL-VARIABLES, $region);\n @if type-of($submap) == \"map\" {\n $fallback: map-deep-get($LOCAL-VARIABLES, $region, $cssvar);\n }\n }\n }\n\n // If a region value exists, build the region string\n @if $region != null {\n $region: \"__#{$region}\";\n }\n\n // Start building the variable declaration\n $var-declaration: \"--#{$custom-prop-prefix}-#{$LOCAL}#{$region}--#{to-string($cssvar, '--')}\";\n \n @if $fallback != null {\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration});\n}\n\n/// Fetches a CSS variable stack for broadcasted variables, providing a hook for context\n/// to influence the styles of children elements such as p tags or links.\n/// @param {String} $broadcast - name of the broadcast variable to apply\n/// @requires {String} $custom-prop-prefix - Name of repo, which is \"pfe\"\n/// @example - scss\n/// :host {\n/// color: pfe-broadcasted(link);\n/// }\n/// @example - css\n/// :host {\n/// color: var(--pfe-broadcasted--link, #06c);\n/// }\n@function pfe-broadcasted($broadcast, $use-fallback: true) {\n $fallback: \"\";\n @if $use-fallback {\n $fallback: \", #{map-get($pfe-broadcasted, #{to-string($broadcast,'--')})}\";\t\n }\n @if not index($BROADCAST-VARS, first(str-split($broadcast, '--'))) {\n @error \"--#{$custom-prop-prefix}-broadcasted--#{$broadcast} variable is not currently supported.\";\n }\n @else {\n @return var(--#{$custom-prop-prefix}-broadcasted--#{to-string($broadcast,'--')}#{unquote($fallback)});\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme--zindex\n/// @requires {Map} $pfe-zindex - SASS Map of z-index values\n/// @see $pfe-zindex\n/// @example - scss - In your component styles\n/// .my-element {\n/// z-index: pfe-zindex( content );\n/// }\n\n@function pfe-zindex($cssvar) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-zindex, $var-name) != null {\n @return pfe-get-from-map(\"zindex\", $var-name, $pfe-zindex);\n }\n @else {\n @error \"The key for #{$var-name} could not be found in the $pfe-zindex map.\";\n }\n}\n\n/// Returns the value (only) of a property from the respective maps\n/// Similar to pfe-var, but does not include css variable in the compiled CSS\n/// @param {String} $name - Name of the key for the map\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example - scss - In your component styles\n/// .my-element {\n/// background-color: pfe-fetch( ui-base );\n/// }\n@function pfe-fetch($name, $region: null) {\n $var-name: to-string($name, \"--\");\n @if $region != null and map-deep-get($LOCAL-VARIABLES, $region, $var-name) != null {\n @return map-deep-get($LOCAL-VARIABLES, $region, $var-name);\n }\n @else if $region == null and map-get($LOCAL-VARIABLES, $var-name) != null {\n @return map-get($LOCAL-VARIABLES, $var-name);\n }\n @else if map-get($pfe-vars, $var-name) != null {\n @return map-get($pfe-vars, $var-name);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return map-get($pfe-colors, $var-name);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return map-get($pfe-broadcasted, $var-name);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return map-get($pfe-typography-base, $var-name);\n }\n\n // PATTERNFLY CORE\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return map-get($pf-type-sizing, $var-name);\n }\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return map-get($pf-type-sizing--component, $var-name);\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return map-get($pf-type-sizing--modifers, $var-name);\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return map-get($pf-type-sizing--content, $var-name);\n }\n // DEPRECATED\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return map-get($pfe-typography-base-deprecated, $var-name);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return map-get($pfe-typography-deprecated, $var-name);\n }\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme\n/// @param {String} $fallback [null] - Optional custom fallback\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example scss - In your component styles\n/// .my-element {\n/// padding: pfe-var( container-spacer );\n/// font-size: pfe-var( font-size );\n/// }\n/// @example - css Rendered output\n/// .my-element {\n/// padding: var(--pfe-theme--container-spacer, 16px);\n/// font-size: var(--pfe-theme--font-size, 16px);\n/// }\n@function pfe-var($cssvar, $fallback: null) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-vars, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-vars, $fallback);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return pfe-get-from-map(\"color\", $var-name, $pfe-colors, $fallback);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-broadcasted);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base, $fallback);\n }\n // PATTERNFLY CORE:\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing, $fallback, $prefix: \"pf-global\");\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--modifers, $fallback, $prefix: \"pf-c\");\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--content, $fallback, $prefix: \"pf-c\");\n }\n // PFE components (must be below core)\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--component, $fallback);\n }\n\n // DEPRECATED:\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base-deprecated, $fallback);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-deprecated, $fallback);\n }\n\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}",":host {\n display: block;\n position: relative;\n width: var(--pfe-avatar--size, var(--pfe-avatar--width, 128px));\n height: var(--pfe-avatar--size, var(--pfe-avatar--width, 128px));\n}\n\n:host canvas {\n width: 100%;\n height: 100%;\n image-rendering: optimizeSpeed;\n /* Older versions of FF */\n image-rendering: -moz-crisp-edges;\n /* FF 6.0+ */\n image-rendering: -webkit-optimize-contrast;\n /* Safari */\n image-rendering: -o-crisp-edges;\n /* OS X & Windows Opera (12.02+) */\n image-rendering: pixelated;\n /* Awesome future-browsers */\n -ms-interpolation-mode: nearest-neighbor;\n /* IE */\n}\n\n:host([shape=\"rounded\"]) img,\n:host([shape=\"rounded\"]) canvas {\n border-radius: calc(var(--pfe-avatar--size, var(--pfe-avatar--width, 128px)) / 8 + 1px);\n}\n\n:host([shape=\"circle\"]) img,\n:host([shape=\"circle\"]) canvas {\n border-radius: 50%;\n}\n\n:host([src]) canvas {\n display: none;\n}\n\n:host([src]) img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n:host(:not([src])) img {\n display: none;\n}\n\n:host([hidden]) {\n display: none;\n}\n"],"sourceRoot":"../src"} \ No newline at end of file diff --git a/elements/pfe-avatar/dist/pfe-avatar.js b/elements/pfe-avatar/dist/pfe-avatar.js new file mode 100644 index 0000000000..a1a1677f7c --- /dev/null +++ b/elements/pfe-avatar/dist/pfe-avatar.js @@ -0,0 +1,483 @@ +import PFElement from '../../pfelement/dist/pfelement.js'; + +/** + * djb2 string hashing function. + * + * @see http://www.cse.yorku.ca/~oz/hash.html + * @param {String} str the string to hash. + * @return {Number} a positive integer + */ + +function hash(str) { + let hash = 5381; + let i = str.length; + + while (i) { + hash = (hash * 33) ^ str.charCodeAt(--i); + } + + return hash >>> 0; +} + +function h2rgb(v1, v2, vH) { + if (vH < 0) vH += 1; + if (vH > 1) vH -= 1; + if (6 * vH < 1) return v1 + (v2 - v1) * 6 * vH; + if (2 * vH < 1) return v2; + if (3 * vH < 2) return v1 + (v2 - v1) * (2 / 3 - vH) * 6; + return v1; +} + +/** + * Convert an HSL color to RGB. + * + * @param {Number} H the hue component + * @param {Number} S the saturation component + * @param {Number} L the luminance component + * @return {Array} [R, G, B] + * + * @see https://www.easyrgb.com/en/math.php + */ +function hsl2rgb(_H, _S, _L) { + let R, G, B; + + const H = Math.max(0, Math.min(1, _H)); + const S = Math.max(0, Math.min(1, _S)); + const L = Math.max(0, Math.min(1, _L)); + + if (S == 0) { + R = L * 255; + G = L * 255; + B = L * 255; + } else { + let a, b; + + if (L < 0.5) { + b = L * (1 + S); + } else { + b = L + S - S * L; + } + + a = 2 * L - b; + + R = Math.floor(255 * h2rgb(a, b, H + 1 / 3)); + G = Math.floor(255 * h2rgb(a, b, H)); + B = Math.floor(255 * h2rgb(a, b, H - 1 / 3)); + } + + return [R, G, B]; +} + +/** + * Convert an RGBcolor to HSL. + * + * @param {Number} R the red component + * @param {Number} G the green component + * @param {Number} B the blue component + * @return {Array} [H, S, L] + * + * @see https://www.easyrgb.com/en/math.php + */ +function rgb2hsl(_R, _G, _B) { + let H, S, L; + + const R = Math.max(0, Math.min(255, _R)); + const G = Math.max(0, Math.min(255, _G)); + const B = Math.max(0, Math.min(255, _B)); + + const r = R / 255; + const g = G / 255; + const b = B / 255; + + const var_min = Math.min(Math.min(r, g), b); + const var_max = Math.max(Math.max(r, g), b); + const del_max = var_max - var_min; + + L = (var_max + var_min) / 2; + + if (del_max === 0) { + H = 0; + S = 0; + } else { + if (L < 0.5) { + S = del_max / (var_max + var_min); + } else { + S = del_max / (2 - var_max - var_min); + } + + const del_r = ((var_max - r) / 6 + del_max / 2) / del_max; + const del_g = ((var_max - g) / 6 + del_max / 2) / del_max; + const del_b = ((var_max - b) / 6 + del_max / 2) / del_max; + + if (r == var_max) { + H = del_b - del_g; + } else if (g == var_max) { + H = 1 / 3 + del_r - del_b; + } else if (b == var_max) { + H = 2 / 3 + del_g - del_r; + } + + if (H < 0) { + H += 1; + } else if (H > 1) { + H -= 1; + } + } + + return [H, S, L]; +} + +/*! + * PatternFly Elements: PfeAvatar 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * +*/ + +class PfeAvatar extends PFElement { + + // Injected at build-time + static get version() { + return "1.12.3"; + } + + // Injected at build-time + get html() { + return ` + + +`; + } + + static get tag() { + return "pfe-avatar"; + } + + static get properties() { + return { + name: { + title: "Username", + type: String, + default: "", + observer: "_updateWhenConnected", + }, + src: { + title: "Avatar image URL", + type: String, + observer: "_updateWhenConnected", + }, + pattern: { + title: "Shape pattern", + type: String, + default: PfeAvatar.patterns.squares, + observer: "_updateWhenConnected", + }, + // @TODO Deprecated pfe-name in 1.0 + oldName: { + alias: "name", + attr: "pfe-name", + }, + // @TODO Deprecated pfe-src in 1.0 + oldSrc: { + alias: "src", + attr: "pfe-src", + }, + // @TODO Deprecated pfe-pattern in 1.0 + oldPattern: { + alias: "pattern", + attr: "pfe-pattern", + }, + }; + } + + get templateUrl() { + return "pfe-avatar.html"; + } + + get styleUrl() { + return "pfe-avatar.scss"; + } + + static get events() { + return { + connected: `${this.tag}:connected`, + }; + } + + static get patterns() { + return { + triangles: "triangles", + squares: "squares", + }; + } + + static get defaultSize() { + return 128; + } + + static get defaultColors() { + return "#67accf #448087 #709c6b #a35252 #826cbb"; + } + + get customColors() { + return this.cssVariable("pfe-avatar--colors"); + } + + constructor() { + super(PfeAvatar); + + this._initCanvas = this._initCanvas.bind(this); + } + + connectedCallback() { + // initCanvas comes before parent's connectedCallback because the + // connectedCallback sets attribute values, triggering, the observer + // functions, which require the canvas to already be initialized. + this._initCanvas(); + + super.connectedCallback(); + + this.emitEvent(PfeAvatar.events.connected, { + bubbles: false, + }); + } + + _initCanvas() { + this._canvas = this.shadowRoot.querySelector("canvas"); + const cssVarWidth = this.cssVariable("pfe-avatar--width"); + const size = (cssVarWidth && cssVarWidth.replace(/px$/, "")) || PfeAvatar.defaultSize; + this._canvas.width = size; + this._canvas.height = size; + + this._squareSize = this._canvas.width / 8; + this._triangleSize = this._canvas.width / 4; + + this._ctx = this._canvas.getContext("2d"); + } + + static _registerColors() { + this.colors = []; + const contextColors = this.customColors || this.defaultColors; + + contextColors.split(/\s+/).forEach((colorCode) => { + let pattern; + switch (colorCode.length) { + case 4: // ex: "#0fc" + pattern = /^#([A-f0-9])([A-f0-9])([A-f0-9])$/.exec(colorCode); + if (pattern) { + pattern.shift(); + const color = pattern.map((c) => parseInt(c + c, 16)); + this._registerColor(color); + } else { + this.log(`[pfe-avatar] invalid color ${colorCode}`); + } + break; + case 7: // ex: "#00ffcc" + pattern = /^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/.exec(colorCode); + if (pattern) { + pattern.shift(); + const color = pattern.map((c) => parseInt(c, 16)); + this._registerColor(color); + } else { + this.log(`[pfe-avatar] invalid color ${colorCode}`); + } + } + }); + + return this.colors; + } + + static _registerColor(color) { + PfeAvatar.colors.push({ + color1: `rgb(${color.join(",")})`, + color2: `rgb(${this._adjustColor(color).join(",")})`, + }); + } + + static _adjustColor(color) { + const dark = 0.1; + const l_adj = 0.1; // luminance adjustment + const hsl = rgb2hsl(...color); + + // if luminance is too dark already, then lighten the alternate color + // instead of darkening it. + hsl[2] += hsl[2] > dark ? -l_adj : l_adj; + + return hsl2rgb(...hsl); + } + + _updateWhenConnected() { + if (this.hasAttribute("pfelement")) { + this.update(); + } else { + this.addEventListener(PfeAvatar.events.connected, () => this.update()); + } + } + + update() { + // if we have a src element, update the img, otherwise update the random pattern + if (this.src) { + this.shadowRoot.querySelector("img").src = this.src; + } else { + const bitPattern = hash(this.name).toString(2); + const arrPattern = bitPattern.split("").map((n) => Number(n)); + this._colorIndex = Math.floor((PfeAvatar.colors.length * parseInt(bitPattern, 2)) / Math.pow(2, 32)); + this.color1 = PfeAvatar.colors[this._colorIndex].color1; + this.color2 = PfeAvatar.colors[this._colorIndex].color2; + + this._clear(); + this._drawBackground(); + if (this.pattern === PfeAvatar.patterns.squares) { + this._drawSquarePattern(arrPattern); + } else if (this.pattern === PfeAvatar.patterns.triangles) { + this._drawTrianglePattern(arrPattern); + } + // this._drawGradient(); + } + } + + _clear() { + this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height); + } + + _drawBackground() { + this._ctx.fillStyle = this.color1; + this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height); + } + + _drawSquarePattern(pattern) { + this._ctx.fillStyle = this.color2; + if (this._ctx) { + let i = pattern.length; + while (i--) { + if (pattern[i]) { + this._drawMirroredSquare(i % 4, Math.floor(i / 4)); + } + } + } + } + + /** + * Draw a square at the given position, mirrored onto both the left and right half of the canvas. + */ + _drawMirroredSquare(x, y) { + if (this._ctx) { + this._drawSquare(x, y); + this._drawSquare(7 - x, y); + } + } + + _drawSquare(x, y) { + this._ctx.fillRect(this._squareSize * x, this._squareSize * y, this._squareSize, this._squareSize); + } + + _drawTrianglePattern(pattern) { + this._ctx.fillStyle = this.color2; + if (this._ctx) { + let i = pattern.length; + while (i--) { + if (pattern[i]) { + const x = Math.floor(i / 2) % 2; + const y = Math.floor(i / 4); + const alt = i % 4; + + const p1 = [x, y]; + const p2 = [x, y]; + const p3 = [x, y]; + + switch (alt) { + case 0: + p2[1]++; + p3[0]++; + p3[1]++; + break; + case 1: + p2[0]++; + p3[0]++; + p3[1]++; + break; + case 2: + p2[0]++; + p3[1]++; + break; + case 3: + p1[0]++; + p2[0]++; + p2[1]++; + p3[1]++; + break; + } + + this._drawMirroredTriangle(p1, p2, p3); + } + } + } + } + + /** + * Draw a square at the given position in the top-left quadrant of the + * canvas, and mirrored to the other three quadrants. + */ + _drawMirroredTriangle(p1, p2, p3) { + if (this._ctx) { + this._drawTriangle(p1, p2, p3); + this._drawTriangle([4 - p1[0], p1[1]], [4 - p2[0], p2[1]], [4 - p3[0], p3[1]]); + } + } + + _drawTriangle(p1, p2, p3) { + this._ctx.beginPath(); + this._ctx.moveTo(...p1.map((c) => c * this._triangleSize)); + this._ctx.lineTo(...p2.map((c) => c * this._triangleSize)); + this._ctx.lineTo(...p3.map((c) => c * this._triangleSize)); + this._ctx.closePath(); + this._ctx.fill(); + this._ctx.fill(); + } + + _drawGradient() { + const gradient = this._ctx.createLinearGradient(0, this._canvas.height, this._canvas.width, 0); + const color = this.color2; + let gradientColor1 = color; + let gradientColor2 = color; + if (/^#[A-f0-9]{3}$/.test(color)) { + // color is of the form "#fff" + gradientColor1 += "c"; + gradientColor2 += "0"; + } else if (/^#[A-f0-9]{6}$/.test(color)) { + // color is of the form "#ffffff" + gradientColor1 += "cc"; + gradientColor2 += "00"; + } + gradient.addColorStop(0, gradientColor1); + gradient.addColorStop(1, gradientColor2); + gradient.addColorStop(1, gradientColor1); + this._ctx.fillStyle = gradient; + this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height); + } +} + +PfeAvatar._registerColors(); + +PFElement.create(PfeAvatar); + +export default PfeAvatar; +//# sourceMappingURL=pfe-avatar.js.map diff --git a/elements/pfe-avatar/dist/pfe-avatar.js.map b/elements/pfe-avatar/dist/pfe-avatar.js.map new file mode 100644 index 0000000000..c639760b61 --- /dev/null +++ b/elements/pfe-avatar/dist/pfe-avatar.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-avatar.js","sources":["../_temp/djb-hash.js","../_temp/hslrgb.js","../_temp/pfe-avatar.js"],"sourcesContent":["/**\n * djb2 string hashing function.\n *\n * @see http://www.cse.yorku.ca/~oz/hash.html\n * @param {String} str the string to hash.\n * @return {Number} a positive integer\n */\n\nfunction hash(str) {\n let hash = 5381;\n let i = str.length;\n\n while (i) {\n hash = (hash * 33) ^ str.charCodeAt(--i);\n }\n\n return hash >>> 0;\n}\n\nexport { hash };\n","function h2rgb(v1, v2, vH) {\n if (vH < 0) vH += 1;\n if (vH > 1) vH -= 1;\n if (6 * vH < 1) return v1 + (v2 - v1) * 6 * vH;\n if (2 * vH < 1) return v2;\n if (3 * vH < 2) return v1 + (v2 - v1) * (2 / 3 - vH) * 6;\n return v1;\n}\n\n/**\n * Convert an HSL color to RGB.\n *\n * @param {Number} H the hue component\n * @param {Number} S the saturation component\n * @param {Number} L the luminance component\n * @return {Array} [R, G, B]\n *\n * @see https://www.easyrgb.com/en/math.php\n */\nexport function hsl2rgb(_H, _S, _L) {\n let R, G, B;\n\n const H = Math.max(0, Math.min(1, _H));\n const S = Math.max(0, Math.min(1, _S));\n const L = Math.max(0, Math.min(1, _L));\n\n if (S == 0) {\n R = L * 255;\n G = L * 255;\n B = L * 255;\n } else {\n let a, b;\n\n if (L < 0.5) {\n b = L * (1 + S);\n } else {\n b = L + S - S * L;\n }\n\n a = 2 * L - b;\n\n R = Math.floor(255 * h2rgb(a, b, H + 1 / 3));\n G = Math.floor(255 * h2rgb(a, b, H));\n B = Math.floor(255 * h2rgb(a, b, H - 1 / 3));\n }\n\n return [R, G, B];\n}\n\n/**\n * Convert an RGBcolor to HSL.\n *\n * @param {Number} R the red component\n * @param {Number} G the green component\n * @param {Number} B the blue component\n * @return {Array} [H, S, L]\n *\n * @see https://www.easyrgb.com/en/math.php\n */\nexport function rgb2hsl(_R, _G, _B) {\n let H, S, L;\n\n const R = Math.max(0, Math.min(255, _R));\n const G = Math.max(0, Math.min(255, _G));\n const B = Math.max(0, Math.min(255, _B));\n\n const r = R / 255;\n const g = G / 255;\n const b = B / 255;\n\n const var_min = Math.min(Math.min(r, g), b);\n const var_max = Math.max(Math.max(r, g), b);\n const del_max = var_max - var_min;\n\n L = (var_max + var_min) / 2;\n\n if (del_max === 0) {\n H = 0;\n S = 0;\n } else {\n if (L < 0.5) {\n S = del_max / (var_max + var_min);\n } else {\n S = del_max / (2 - var_max - var_min);\n }\n\n const del_r = ((var_max - r) / 6 + del_max / 2) / del_max;\n const del_g = ((var_max - g) / 6 + del_max / 2) / del_max;\n const del_b = ((var_max - b) / 6 + del_max / 2) / del_max;\n\n if (r == var_max) {\n H = del_b - del_g;\n } else if (g == var_max) {\n H = 1 / 3 + del_r - del_b;\n } else if (b == var_max) {\n H = 2 / 3 + del_g - del_r;\n }\n\n if (H < 0) {\n H += 1;\n } else if (H > 1) {\n H -= 1;\n }\n }\n\n return [H, S, L];\n}\n","/*!\n * PatternFly Elements: PfeAvatar 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement.js\";\nimport { hash } from \"./djb-hash.js\";\nimport { hsl2rgb, rgb2hsl } from \"./hslrgb.js\";\n\nclass PfeAvatar extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n\n`;\n }\n\n static get tag() {\n return \"pfe-avatar\";\n }\n\n static get properties() {\n return {\n name: {\n title: \"Username\",\n type: String,\n default: \"\",\n observer: \"_updateWhenConnected\",\n },\n src: {\n title: \"Avatar image URL\",\n type: String,\n observer: \"_updateWhenConnected\",\n },\n pattern: {\n title: \"Shape pattern\",\n type: String,\n default: PfeAvatar.patterns.squares,\n observer: \"_updateWhenConnected\",\n },\n // @TODO Deprecated pfe-name in 1.0\n oldName: {\n alias: \"name\",\n attr: \"pfe-name\",\n },\n // @TODO Deprecated pfe-src in 1.0\n oldSrc: {\n alias: \"src\",\n attr: \"pfe-src\",\n },\n // @TODO Deprecated pfe-pattern in 1.0\n oldPattern: {\n alias: \"pattern\",\n attr: \"pfe-pattern\",\n },\n };\n }\n\n get templateUrl() {\n return \"pfe-avatar.html\";\n }\n\n get styleUrl() {\n return \"pfe-avatar.scss\";\n }\n\n static get events() {\n return {\n connected: `${this.tag}:connected`,\n };\n }\n\n static get patterns() {\n return {\n triangles: \"triangles\",\n squares: \"squares\",\n };\n }\n\n static get defaultSize() {\n return 128;\n }\n\n static get defaultColors() {\n return \"#67accf #448087 #709c6b #a35252 #826cbb\";\n }\n\n get customColors() {\n return this.cssVariable(\"pfe-avatar--colors\");\n }\n\n constructor() {\n super(PfeAvatar);\n\n this._initCanvas = this._initCanvas.bind(this);\n }\n\n connectedCallback() {\n // initCanvas comes before parent's connectedCallback because the\n // connectedCallback sets attribute values, triggering, the observer\n // functions, which require the canvas to already be initialized.\n this._initCanvas();\n\n super.connectedCallback();\n\n this.emitEvent(PfeAvatar.events.connected, {\n bubbles: false,\n });\n }\n\n _initCanvas() {\n this._canvas = this.shadowRoot.querySelector(\"canvas\");\n const cssVarWidth = this.cssVariable(\"pfe-avatar--width\");\n const size = (cssVarWidth && cssVarWidth.replace(/px$/, \"\")) || PfeAvatar.defaultSize;\n this._canvas.width = size;\n this._canvas.height = size;\n\n this._squareSize = this._canvas.width / 8;\n this._triangleSize = this._canvas.width / 4;\n\n this._ctx = this._canvas.getContext(\"2d\");\n }\n\n static _registerColors() {\n this.colors = [];\n const contextColors = this.customColors || this.defaultColors;\n\n contextColors.split(/\\s+/).forEach((colorCode) => {\n let pattern;\n switch (colorCode.length) {\n case 4: // ex: \"#0fc\"\n pattern = /^#([A-f0-9])([A-f0-9])([A-f0-9])$/.exec(colorCode);\n if (pattern) {\n pattern.shift();\n const color = pattern.map((c) => parseInt(c + c, 16));\n this._registerColor(color);\n } else {\n this.log(`[pfe-avatar] invalid color ${colorCode}`);\n }\n break;\n case 7: // ex: \"#00ffcc\"\n pattern = /^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/.exec(colorCode);\n if (pattern) {\n pattern.shift();\n const color = pattern.map((c) => parseInt(c, 16));\n this._registerColor(color);\n } else {\n this.log(`[pfe-avatar] invalid color ${colorCode}`);\n }\n }\n });\n\n return this.colors;\n }\n\n static _registerColor(color) {\n PfeAvatar.colors.push({\n color1: `rgb(${color.join(\",\")})`,\n color2: `rgb(${this._adjustColor(color).join(\",\")})`,\n });\n }\n\n static _adjustColor(color) {\n const dark = 0.1;\n const l_adj = 0.1; // luminance adjustment\n const hsl = rgb2hsl(...color);\n\n // if luminance is too dark already, then lighten the alternate color\n // instead of darkening it.\n hsl[2] += hsl[2] > dark ? -l_adj : l_adj;\n\n return hsl2rgb(...hsl);\n }\n\n _updateWhenConnected() {\n if (this.hasAttribute(\"pfelement\")) {\n this.update();\n } else {\n this.addEventListener(PfeAvatar.events.connected, () => this.update());\n }\n }\n\n update() {\n // if we have a src element, update the img, otherwise update the random pattern\n if (this.src) {\n this.shadowRoot.querySelector(\"img\").src = this.src;\n } else {\n const bitPattern = hash(this.name).toString(2);\n const arrPattern = bitPattern.split(\"\").map((n) => Number(n));\n this._colorIndex = Math.floor((PfeAvatar.colors.length * parseInt(bitPattern, 2)) / Math.pow(2, 32));\n this.color1 = PfeAvatar.colors[this._colorIndex].color1;\n this.color2 = PfeAvatar.colors[this._colorIndex].color2;\n\n this._clear();\n this._drawBackground();\n if (this.pattern === PfeAvatar.patterns.squares) {\n this._drawSquarePattern(arrPattern);\n } else if (this.pattern === PfeAvatar.patterns.triangles) {\n this._drawTrianglePattern(arrPattern);\n }\n // this._drawGradient();\n }\n }\n\n _clear() {\n this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);\n }\n\n _drawBackground() {\n this._ctx.fillStyle = this.color1;\n this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);\n }\n\n _drawSquarePattern(pattern) {\n this._ctx.fillStyle = this.color2;\n if (this._ctx) {\n let i = pattern.length;\n while (i--) {\n if (pattern[i]) {\n this._drawMirroredSquare(i % 4, Math.floor(i / 4));\n }\n }\n }\n }\n\n /**\n * Draw a square at the given position, mirrored onto both the left and right half of the canvas.\n */\n _drawMirroredSquare(x, y) {\n if (this._ctx) {\n this._drawSquare(x, y);\n this._drawSquare(7 - x, y);\n }\n }\n\n _drawSquare(x, y) {\n this._ctx.fillRect(this._squareSize * x, this._squareSize * y, this._squareSize, this._squareSize);\n }\n\n _drawTrianglePattern(pattern) {\n this._ctx.fillStyle = this.color2;\n if (this._ctx) {\n let i = pattern.length;\n while (i--) {\n if (pattern[i]) {\n const x = Math.floor(i / 2) % 2;\n const y = Math.floor(i / 4);\n const alt = i % 4;\n\n const p1 = [x, y];\n const p2 = [x, y];\n const p3 = [x, y];\n\n switch (alt) {\n case 0:\n p2[1]++;\n p3[0]++;\n p3[1]++;\n break;\n case 1:\n p2[0]++;\n p3[0]++;\n p3[1]++;\n break;\n case 2:\n p2[0]++;\n p3[1]++;\n break;\n case 3:\n p1[0]++;\n p2[0]++;\n p2[1]++;\n p3[1]++;\n break;\n }\n\n this._drawMirroredTriangle(p1, p2, p3);\n }\n }\n }\n }\n\n /**\n * Draw a square at the given position in the top-left quadrant of the\n * canvas, and mirrored to the other three quadrants.\n */\n _drawMirroredTriangle(p1, p2, p3) {\n if (this._ctx) {\n this._drawTriangle(p1, p2, p3);\n this._drawTriangle([4 - p1[0], p1[1]], [4 - p2[0], p2[1]], [4 - p3[0], p3[1]]);\n }\n }\n\n _drawTriangle(p1, p2, p3) {\n this._ctx.beginPath();\n this._ctx.moveTo(...p1.map((c) => c * this._triangleSize));\n this._ctx.lineTo(...p2.map((c) => c * this._triangleSize));\n this._ctx.lineTo(...p3.map((c) => c * this._triangleSize));\n this._ctx.closePath();\n this._ctx.fill();\n this._ctx.fill();\n }\n\n _drawGradient() {\n const gradient = this._ctx.createLinearGradient(0, this._canvas.height, this._canvas.width, 0);\n const color = this.color2;\n let gradientColor1 = color;\n let gradientColor2 = color;\n if (/^#[A-f0-9]{3}$/.test(color)) {\n // color is of the form \"#fff\"\n gradientColor1 += \"c\";\n gradientColor2 += \"0\";\n } else if (/^#[A-f0-9]{6}$/.test(color)) {\n // color is of the form \"#ffffff\"\n gradientColor1 += \"cc\";\n gradientColor2 += \"00\";\n }\n gradient.addColorStop(0, gradientColor1);\n gradient.addColorStop(1, gradientColor2);\n gradient.addColorStop(1, gradientColor1);\n this._ctx.fillStyle = gradient;\n this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);\n }\n}\n\nPfeAvatar._registerColors();\n\nPFElement.create(PfeAvatar);\n\nexport default PfeAvatar;\n"],"names":[],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS,IAAI,CAAC,GAAG,EAAE;AACnB,EAAE,IAAI,IAAI,GAAG,IAAI,CAAC;AAClB,EAAE,IAAI,CAAC,GAAG,GAAG,CAAC,MAAM,CAAC;AACrB;AACA,EAAE,OAAO,CAAC,EAAE;AACZ,IAAI,IAAI,GAAG,CAAC,IAAI,GAAG,EAAE,IAAI,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC;AAC7C,GAAG;AACH;AACA,EAAE,OAAO,IAAI,KAAK,CAAC,CAAC;AACpB;;ACjBA,SAAS,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AAC3B,EAAE,IAAI,EAAE,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;AACtB,EAAE,IAAI,EAAE,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;AACtB,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC;AACjD,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,CAAC;AAC5B,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC;AAC3D,EAAE,OAAO,EAAE,CAAC;AACZ,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,AAAO,SAAS,OAAO,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AACpC,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACd;AACA,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;AACzC,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;AACzC,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;AACzC;AACA,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE;AACd,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;AAChB,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;AAChB,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;AAChB,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,EAAE,CAAC,CAAC;AACb;AACA,IAAI,IAAI,CAAC,GAAG,GAAG,EAAE;AACjB,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AACtB,KAAK,MAAM;AACX,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACxB,KAAK;AACL;AACA,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAClB;AACA,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AACjD,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AACzC,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AACjD,GAAG;AACH;AACA,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACnB,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,AAAO,SAAS,OAAO,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AACpC,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACd;AACA,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;AAC3C,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;AAC3C,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;AAC3C;AACA,EAAE,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;AACpB,EAAE,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;AACpB,EAAE,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;AACpB;AACA,EAAE,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC9C,EAAE,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC9C,EAAE,MAAM,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AACpC;AACA,EAAE,CAAC,GAAG,CAAC,OAAO,GAAG,OAAO,IAAI,CAAC,CAAC;AAC9B;AACA,EAAE,IAAI,OAAO,KAAK,CAAC,EAAE;AACrB,IAAI,CAAC,GAAG,CAAC,CAAC;AACV,IAAI,CAAC,GAAG,CAAC,CAAC;AACV,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,GAAG,GAAG,EAAE;AACjB,MAAM,CAAC,GAAG,OAAO,IAAI,OAAO,GAAG,OAAO,CAAC,CAAC;AACxC,KAAK,MAAM;AACX,MAAM,CAAC,GAAG,OAAO,IAAI,CAAC,GAAG,OAAO,GAAG,OAAO,CAAC,CAAC;AAC5C,KAAK;AACL;AACA,IAAI,MAAM,KAAK,GAAG,CAAC,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,GAAG,OAAO,GAAG,CAAC,IAAI,OAAO,CAAC;AAC9D,IAAI,MAAM,KAAK,GAAG,CAAC,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,GAAG,OAAO,GAAG,CAAC,IAAI,OAAO,CAAC;AAC9D,IAAI,MAAM,KAAK,GAAG,CAAC,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,GAAG,OAAO,GAAG,CAAC,IAAI,OAAO,CAAC;AAC9D;AACA,IAAI,IAAI,CAAC,IAAI,OAAO,EAAE;AACtB,MAAM,CAAC,GAAG,KAAK,GAAG,KAAK,CAAC;AACxB,KAAK,MAAM,IAAI,CAAC,IAAI,OAAO,EAAE;AAC7B,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,KAAK,CAAC;AAChC,KAAK,MAAM,IAAI,CAAC,IAAI,OAAO,EAAE;AAC7B,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,KAAK,CAAC;AAChC,KAAK;AACL;AACA,IAAI,IAAI,CAAC,GAAG,CAAC,EAAE;AACf,MAAM,CAAC,IAAI,CAAC,CAAC;AACb,KAAK,MAAM,IAAI,CAAC,GAAG,CAAC,EAAE;AACtB,MAAM,CAAC,IAAI,CAAC,CAAC;AACb,KAAK;AACL,GAAG;AACH;AACA,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACnB,CAAC;;AC1GD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,AAIA;AACA,MAAM,SAAS,SAAS,SAAS,CAAC;AAClC;AACA;AACA,EAAE,WAAW,OAAO,GAAG;AACvB,IAAI,OAAO,QAAQ,CAAC;AACpB,GAAG;AACH;AACA;AACA,EAAE,IAAI,IAAI,GAAG;AACb,IAAI,OAAO,CAAC;AACZ;AACA;AACA,KAAK,CAAC,CAAC;AACP,GAAG;AACH;AACA,EAAE,WAAW,GAAG,GAAG;AACnB,IAAI,OAAO,YAAY,CAAC;AACxB,GAAG;AACH;AACA,EAAE,WAAW,UAAU,GAAG;AAC1B,IAAI,OAAO;AACX,MAAM,IAAI,EAAE;AACZ,QAAQ,KAAK,EAAE,UAAU;AACzB,QAAQ,IAAI,EAAE,MAAM;AACpB,QAAQ,OAAO,EAAE,EAAE;AACnB,QAAQ,QAAQ,EAAE,sBAAsB;AACxC,OAAO;AACP,MAAM,GAAG,EAAE;AACX,QAAQ,KAAK,EAAE,kBAAkB;AACjC,QAAQ,IAAI,EAAE,MAAM;AACpB,QAAQ,QAAQ,EAAE,sBAAsB;AACxC,OAAO;AACP,MAAM,OAAO,EAAE;AACf,QAAQ,KAAK,EAAE,eAAe;AAC9B,QAAQ,IAAI,EAAE,MAAM;AACpB,QAAQ,OAAO,EAAE,SAAS,CAAC,QAAQ,CAAC,OAAO;AAC3C,QAAQ,QAAQ,EAAE,sBAAsB;AACxC,OAAO;AACP;AACA,MAAM,OAAO,EAAE;AACf,QAAQ,KAAK,EAAE,MAAM;AACrB,QAAQ,IAAI,EAAE,UAAU;AACxB,OAAO;AACP;AACA,MAAM,MAAM,EAAE;AACd,QAAQ,KAAK,EAAE,KAAK;AACpB,QAAQ,IAAI,EAAE,SAAS;AACvB,OAAO;AACP;AACA,MAAM,UAAU,EAAE;AAClB,QAAQ,KAAK,EAAE,SAAS;AACxB,QAAQ,IAAI,EAAE,aAAa;AAC3B,OAAO;AACP,KAAK,CAAC;AACN,GAAG;AACH;AACA,EAAE,IAAI,WAAW,GAAG;AACpB,IAAI,OAAO,iBAAiB,CAAC;AAC7B,GAAG;AACH;AACA,EAAE,IAAI,QAAQ,GAAG;AACjB,IAAI,OAAO,iBAAiB,CAAC;AAC7B,GAAG;AACH;AACA,EAAE,WAAW,MAAM,GAAG;AACtB,IAAI,OAAO;AACX,MAAM,SAAS,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC;AACxC,KAAK,CAAC;AACN,GAAG;AACH;AACA,EAAE,WAAW,QAAQ,GAAG;AACxB,IAAI,OAAO;AACX,MAAM,SAAS,EAAE,WAAW;AAC5B,MAAM,OAAO,EAAE,SAAS;AACxB,KAAK,CAAC;AACN,GAAG;AACH;AACA,EAAE,WAAW,WAAW,GAAG;AAC3B,IAAI,OAAO,GAAG,CAAC;AACf,GAAG;AACH;AACA,EAAE,WAAW,aAAa,GAAG;AAC7B,IAAI,OAAO,yCAAyC,CAAC;AACrD,GAAG;AACH;AACA,EAAE,IAAI,YAAY,GAAG;AACrB,IAAI,OAAO,IAAI,CAAC,WAAW,CAAC,oBAAoB,CAAC,CAAC;AAClD,GAAG;AACH;AACA,EAAE,WAAW,GAAG;AAChB,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC;AACrB;AACA,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACnD,GAAG;AACH;AACA,EAAE,iBAAiB,GAAG;AACtB;AACA;AACA;AACA,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;AACvB;AACA,IAAI,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC9B;AACA,IAAI,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,EAAE;AAC/C,MAAM,OAAO,EAAE,KAAK;AACpB,KAAK,CAAC,CAAC;AACP,GAAG;AACH;AACA,EAAE,WAAW,GAAG;AAChB,IAAI,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;AAC3D,IAAI,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC;AAC9D,IAAI,MAAM,IAAI,GAAG,CAAC,WAAW,IAAI,WAAW,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,SAAS,CAAC,WAAW,CAAC;AAC1F,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC;AAC9B,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;AAC/B;AACA,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC;AAC9C,IAAI,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC;AAChD;AACA,IAAI,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;AAC9C,GAAG;AACH;AACA,EAAE,OAAO,eAAe,GAAG;AAC3B,IAAI,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;AACrB,IAAI,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,aAAa,CAAC;AAClE;AACA,IAAI,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,KAAK;AACtD,MAAM,IAAI,OAAO,CAAC;AAClB,MAAM,QAAQ,SAAS,CAAC,MAAM;AAC9B,QAAQ,KAAK,CAAC;AACd,UAAU,OAAO,GAAG,mCAAmC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;AACxE,UAAU,IAAI,OAAO,EAAE;AACvB,YAAY,OAAO,CAAC,KAAK,EAAE,CAAC;AAC5B,YAAY,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;AAClE,YAAY,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AACvC,WAAW,MAAM;AACjB,YAAY,IAAI,CAAC,GAAG,CAAC,CAAC,2BAA2B,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;AAChE,WAAW;AACX,UAAU,MAAM;AAChB,QAAQ,KAAK,CAAC;AACd,UAAU,OAAO,GAAG,4CAA4C,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;AACjF,UAAU,IAAI,OAAO,EAAE;AACvB,YAAY,OAAO,CAAC,KAAK,EAAE,CAAC;AAC5B,YAAY,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;AAC9D,YAAY,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AACvC,WAAW,MAAM;AACjB,YAAY,IAAI,CAAC,GAAG,CAAC,CAAC,2BAA2B,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;AAChE,WAAW;AACX,OAAO;AACP,KAAK,CAAC,CAAC;AACP;AACA,IAAI,OAAO,IAAI,CAAC,MAAM,CAAC;AACvB,GAAG;AACH;AACA,EAAE,OAAO,cAAc,CAAC,KAAK,EAAE;AAC/B,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC;AAC1B,MAAM,MAAM,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AACvC,MAAM,MAAM,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AAC1D,KAAK,CAAC,CAAC;AACP,GAAG;AACH;AACA,EAAE,OAAO,YAAY,CAAC,KAAK,EAAE;AAC7B,IAAI,MAAM,IAAI,GAAG,GAAG,CAAC;AACrB,IAAI,MAAM,KAAK,GAAG,GAAG,CAAC;AACtB,IAAI,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC;AAClC;AACA;AACA;AACA,IAAI,GAAG,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,GAAG,KAAK,CAAC;AAC7C;AACA,IAAI,OAAO,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC;AAC3B,GAAG;AACH;AACA,EAAE,oBAAoB,GAAG;AACzB,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE;AACxC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC;AACpB,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;AAC7E,KAAK;AACL,GAAG;AACH;AACA,EAAE,MAAM,GAAG;AACX;AACA,IAAI,IAAI,IAAI,CAAC,GAAG,EAAE;AAClB,MAAM,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;AAC1D,KAAK,MAAM;AACX,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;AACrD,MAAM,MAAM,UAAU,GAAG,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACpE,MAAM,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,GAAG,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;AAC3G,MAAM,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC;AAC9D,MAAM,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC;AAC9D;AACA,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC;AACpB,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC;AAC7B,MAAM,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE;AACvD,QAAQ,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAC;AAC5C,OAAO,MAAM,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,QAAQ,CAAC,SAAS,EAAE;AAChE,QAAQ,IAAI,CAAC,oBAAoB,CAAC,UAAU,CAAC,CAAC;AAC9C,OAAO;AACP;AACA,KAAK;AACL,GAAG;AACH;AACA,EAAE,MAAM,GAAG;AACX,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;AACvE,GAAG;AACH;AACA,EAAE,eAAe,GAAG;AACpB,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC;AACtC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;AACtE,GAAG;AACH;AACA,EAAE,kBAAkB,CAAC,OAAO,EAAE;AAC9B,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC;AACtC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE;AACnB,MAAM,IAAI,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC;AAC7B,MAAM,OAAO,CAAC,EAAE,EAAE;AAClB,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE;AACxB,UAAU,IAAI,CAAC,mBAAmB,CAAC,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AAC7D,SAAS;AACT,OAAO;AACP,KAAK;AACL,GAAG;AACH;AACA;AACA;AACA;AACA,EAAE,mBAAmB,CAAC,CAAC,EAAE,CAAC,EAAE;AAC5B,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE;AACnB,MAAM,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC7B,MAAM,IAAI,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;AACjC,KAAK;AACL,GAAG;AACH;AACA,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE;AACpB,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;AACvG,GAAG;AACH;AACA,EAAE,oBAAoB,CAAC,OAAO,EAAE;AAChC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC;AACtC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE;AACnB,MAAM,IAAI,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC;AAC7B,MAAM,OAAO,CAAC,EAAE,EAAE;AAClB,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE;AACxB,UAAU,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AAC1C,UAAU,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AACtC,UAAU,MAAM,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;AAC5B;AACA,UAAU,MAAM,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC5B,UAAU,MAAM,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC5B,UAAU,MAAM,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC5B;AACA,UAAU,QAAQ,GAAG;AACrB,YAAY,KAAK,CAAC;AAClB,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AACtB,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AACtB,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AACtB,cAAc,MAAM;AACpB,YAAY,KAAK,CAAC;AAClB,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AACtB,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AACtB,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AACtB,cAAc,MAAM;AACpB,YAAY,KAAK,CAAC;AAClB,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AACtB,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AACtB,cAAc,MAAM;AACpB,YAAY,KAAK,CAAC;AAClB,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AACtB,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AACtB,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AACtB,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AACtB,cAAc,MAAM;AACpB,WAAW;AACX;AACA,UAAU,IAAI,CAAC,qBAAqB,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;AACjD,SAAS;AACT,OAAO;AACP,KAAK;AACL,GAAG;AACH;AACA;AACA;AACA;AACA;AACA,EAAE,qBAAqB,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AACpC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE;AACnB,MAAM,IAAI,CAAC,aAAa,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;AACrC,MAAM,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACrF,KAAK;AACL,GAAG;AACH;AACA,EAAE,aAAa,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AAC5B,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;AAC1B,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;AAC/D,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;AAC/D,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;AAC/D,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;AAC1B,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;AACrB,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;AACrB,GAAG;AACH;AACA,EAAE,aAAa,GAAG;AAClB,IAAI,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;AACnG,IAAI,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC;AAC9B,IAAI,IAAI,cAAc,GAAG,KAAK,CAAC;AAC/B,IAAI,IAAI,cAAc,GAAG,KAAK,CAAC;AAC/B,IAAI,IAAI,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;AACtC;AACA,MAAM,cAAc,IAAI,GAAG,CAAC;AAC5B,MAAM,cAAc,IAAI,GAAG,CAAC;AAC5B,KAAK,MAAM,IAAI,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;AAC7C;AACA,MAAM,cAAc,IAAI,IAAI,CAAC;AAC7B,MAAM,cAAc,IAAI,IAAI,CAAC;AAC7B,KAAK;AACL,IAAI,QAAQ,CAAC,YAAY,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC;AAC7C,IAAI,QAAQ,CAAC,YAAY,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC;AAC7C,IAAI,QAAQ,CAAC,YAAY,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC;AAC7C,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;AACnC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;AACtE,GAAG;AACH,CAAC;AACD;AACA,SAAS,CAAC,eAAe,EAAE,CAAC;AAC5B;AACA,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;;;;"} \ No newline at end of file diff --git a/elements/pfe-avatar/dist/pfe-avatar.min.css.map b/elements/pfe-avatar/dist/pfe-avatar.min.css.map new file mode 100644 index 0000000000..8411683229 --- /dev/null +++ b/elements/pfe-avatar/dist/pfe-avatar.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../src/pfe-avatar.scss","pfe-avatar.css"],"names":[],"mappings":"AAcA,MACE,QAAA,MACA,SAAA,SAEA,MAAA,MAAA,MAAA,uDACA,OAAA,MAAA,OAAA,uDALF,aAQI,MAAA,KACA,OAAA,KAEA,gBAAA,cACA,gBAAA,iBACA,gBAAA,0BACA,gBAAA,eACA,gBAAA,aAAA,gBAAA,UACA,uBAAA,iBCFJ,8BDMA,2BAOI,cAAA,sBAAA,cAAA,sECPJ,6BDWA,0BAGI,cAAA,IAKJ,oBAEI,QAAA,KAFJ,iBAMI,QAAA,MACA,MAAA,KACA,OAAA,KACA,cAAA,MAAA,WAAA,MAKJ,uBACE,QAAA,KAGF,gBACE,QAAA","file":"pfe-avatar.min.css","sourceRoot":"../src","sourcesContent":[null,":host {\n display: block;\n position: relative;\n width: 128px;\n width: var(--pfe-avatar--size, var(--pfe-avatar--width, 128px));\n height: 128px;\n height: var(--pfe-avatar--size, var(--pfe-avatar--width, 128px));\n}\n\n:host canvas {\n width: 100%;\n height: 100%;\n image-rendering: optimizeSpeed;\n /* Older versions of FF */\n image-rendering: -moz-crisp-edges;\n /* FF 6.0+ */\n image-rendering: -webkit-optimize-contrast;\n /* Safari */\n image-rendering: -o-crisp-edges;\n /* OS X & Windows Opera (12.02+) */\n image-rendering: -o-pixelated;\n image-rendering: pixelated;\n /* Awesome future-browsers */\n -ms-interpolation-mode: nearest-neighbor;\n /* IE */\n}\n\n:host([shape=\"rounded\"]) img,\n:host([shape=\"rounded\"]) canvas {\n border-radius: calc(128px / 8 + 1px);\n border-radius: calc(var(--pfe-avatar--size, var(--pfe-avatar--width, 128px)) / 8 + 1px);\n}\n\n:host([shape=\"circle\"]) img,\n:host([shape=\"circle\"]) canvas {\n border-radius: 50%;\n}\n\n:host([src]) canvas {\n display: none;\n}\n\n:host([src]) img {\n display: block;\n width: 100%;\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n}\n\n:host(:not([src])) img {\n display: none;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n/*# sourceMappingURL=pfe-avatar.css.map */\n"]} \ No newline at end of file diff --git a/elements/pfe-avatar/dist/pfe-avatar.min.js b/elements/pfe-avatar/dist/pfe-avatar.min.js new file mode 100644 index 0000000000..67e4f12ea3 --- /dev/null +++ b/elements/pfe-avatar/dist/pfe-avatar.min.js @@ -0,0 +1,27 @@ +import t from"../../pfelement/dist/pfelement.min.js";function e(t,e,a){return a<0&&(a+=1),a>1&&(a-=1),6*a<1?t+6*(e-t)*a:2*a<1?e:3*a<2?t+(e-t)*(2/3-a)*6:t} +/*! + * PatternFly Elements: PfeAvatar 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * +*/ +class a extends t{static get version(){return"1.12.3"}get html(){return"\n\n\n"}static get tag(){return"pfe-avatar"}static get properties(){return{name:{title:"Username",type:String,default:"",observer:"_updateWhenConnected"},src:{title:"Avatar image URL",type:String,observer:"_updateWhenConnected"},pattern:{title:"Shape pattern",type:String,default:a.patterns.squares,observer:"_updateWhenConnected"},oldName:{alias:"name",attr:"pfe-name"},oldSrc:{alias:"src",attr:"pfe-src"},oldPattern:{alias:"pattern",attr:"pfe-pattern"}}}get templateUrl(){return"pfe-avatar.html"}get styleUrl(){return"pfe-avatar.scss"}static get events(){return{connected:this.tag+":connected"}}static get patterns(){return{triangles:"triangles",squares:"squares"}}static get defaultSize(){return 128}static get defaultColors(){return"#67accf #448087 #709c6b #a35252 #826cbb"}get customColors(){return this.cssVariable("pfe-avatar--colors")}constructor(){super(a),this._initCanvas=this._initCanvas.bind(this)}connectedCallback(){this._initCanvas(),super.connectedCallback(),this.emitEvent(a.events.connected,{bubbles:!1})}_initCanvas(){this._canvas=this.shadowRoot.querySelector("canvas");const t=this.cssVariable("pfe-avatar--width"),e=t&&t.replace(/px$/,"")||a.defaultSize;this._canvas.width=e,this._canvas.height=e,this._squareSize=this._canvas.width/8,this._triangleSize=this._canvas.width/4,this._ctx=this._canvas.getContext("2d")}static _registerColors(){this.colors=[];return(this.customColors||this.defaultColors).split(/\s+/).forEach(t=>{let e;switch(t.length){case 4:if(e=/^#([A-f0-9])([A-f0-9])([A-f0-9])$/.exec(t),e){e.shift();const t=e.map(t=>parseInt(t+t,16));this._registerColor(t)}else this.log("[pfe-avatar] invalid color "+t);break;case 7:if(e=/^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/.exec(t),e){e.shift();const t=e.map(t=>parseInt(t,16));this._registerColor(t)}else this.log("[pfe-avatar] invalid color "+t)}}),this.colors}static _registerColor(t){a.colors.push({color1:`rgb(${t.join(",")})`,color2:`rgb(${this._adjustColor(t).join(",")})`})}static _adjustColor(t){const a=function(t,e,a){let i,r,s;const n=Math.max(0,Math.min(255,t))/255,o=Math.max(0,Math.min(255,e))/255,h=Math.max(0,Math.min(255,a))/255,c=Math.min(Math.min(n,o),h),l=Math.max(Math.max(n,o),h),d=l-c;if(s=(l+c)/2,0===d)i=0,r=0;else{r=s<.5?d/(l+c):d/(2-l-c);const t=((l-n)/6+d/2)/d,e=((l-o)/6+d/2)/d,a=((l-h)/6+d/2)/d;n==l?i=a-e:o==l?i=1/3+t-a:h==l&&(i=2/3+e-t),i<0?i+=1:i>1&&(i-=1)}return[i,r,s]}(...t);return a[2]+=a[2]>.1?-.1:.1,function(t,a,i){let r,s,n;const o=Math.max(0,Math.min(1,t)),h=Math.max(0,Math.min(1,a)),c=Math.max(0,Math.min(1,i));if(0==h)r=255*c,s=255*c,n=255*c;else{let t,a;a=c<.5?c*(1+h):c+h-h*c,t=2*c-a,r=Math.floor(255*e(t,a,o+1/3)),s=Math.floor(255*e(t,a,o)),n=Math.floor(255*e(t,a,o-1/3))}return[r,s,n]}(...a)}_updateWhenConnected(){this.hasAttribute("pfelement")?this.update():this.addEventListener(a.events.connected,()=>this.update())}update(){if(this.src)this.shadowRoot.querySelector("img").src=this.src;else{const t=function(t){let e=5381,a=t.length;for(;a;)e=33*e^t.charCodeAt(--a);return e>>>0}(this.name).toString(2),e=t.split("").map(t=>Number(t));this._colorIndex=Math.floor(a.colors.length*parseInt(t,2)/Math.pow(2,32)),this.color1=a.colors[this._colorIndex].color1,this.color2=a.colors[this._colorIndex].color2,this._clear(),this._drawBackground(),this.pattern===a.patterns.squares?this._drawSquarePattern(e):this.pattern===a.patterns.triangles&&this._drawTrianglePattern(e)}}_clear(){this._ctx.clearRect(0,0,this._canvas.width,this._canvas.height)}_drawBackground(){this._ctx.fillStyle=this.color1,this._ctx.fillRect(0,0,this._canvas.width,this._canvas.height)}_drawSquarePattern(t){if(this._ctx.fillStyle=this.color2,this._ctx){let e=t.length;for(;e--;)t[e]&&this._drawMirroredSquare(e%4,Math.floor(e/4))}}_drawMirroredSquare(t,e){this._ctx&&(this._drawSquare(t,e),this._drawSquare(7-t,e))}_drawSquare(t,e){this._ctx.fillRect(this._squareSize*t,this._squareSize*e,this._squareSize,this._squareSize)}_drawTrianglePattern(t){if(this._ctx.fillStyle=this.color2,this._ctx){let e=t.length;for(;e--;)if(t[e]){const t=Math.floor(e/2)%2,a=Math.floor(e/4),i=[t,a],r=[t,a],s=[t,a];switch(e%4){case 0:r[1]++,s[0]++,s[1]++;break;case 1:r[0]++,s[0]++,s[1]++;break;case 2:r[0]++,s[1]++;break;case 3:i[0]++,r[0]++,r[1]++,s[1]++}this._drawMirroredTriangle(i,r,s)}}}_drawMirroredTriangle(t,e,a){this._ctx&&(this._drawTriangle(t,e,a),this._drawTriangle([4-t[0],t[1]],[4-e[0],e[1]],[4-a[0],a[1]]))}_drawTriangle(t,e,a){this._ctx.beginPath(),this._ctx.moveTo(...t.map(t=>t*this._triangleSize)),this._ctx.lineTo(...e.map(t=>t*this._triangleSize)),this._ctx.lineTo(...a.map(t=>t*this._triangleSize)),this._ctx.closePath(),this._ctx.fill(),this._ctx.fill()}_drawGradient(){const t=this._ctx.createLinearGradient(0,this._canvas.height,this._canvas.width,0),e=this.color2;let a=e,i=e;/^#[A-f0-9]{3}$/.test(e)?(a+="c",i+="0"):/^#[A-f0-9]{6}$/.test(e)&&(a+="cc",i+="00"),t.addColorStop(0,a),t.addColorStop(1,i),t.addColorStop(1,a),this._ctx.fillStyle=t,this._ctx.fillRect(0,0,this._canvas.width,this._canvas.height)}}a._registerColors(),t.create(a);export default a; +//# sourceMappingURL=pfe-avatar.min.js.map diff --git a/elements/pfe-avatar/dist/pfe-avatar.min.js.map b/elements/pfe-avatar/dist/pfe-avatar.min.js.map new file mode 100644 index 0000000000..d69e49e918 --- /dev/null +++ b/elements/pfe-avatar/dist/pfe-avatar.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-avatar.min.js","sources":["../_temp/hslrgb.js","../_temp/pfe-avatar.js","../_temp/djb-hash.js"],"sourcesContent":["function h2rgb(v1, v2, vH) {\n if (vH < 0) vH += 1;\n if (vH > 1) vH -= 1;\n if (6 * vH < 1) return v1 + (v2 - v1) * 6 * vH;\n if (2 * vH < 1) return v2;\n if (3 * vH < 2) return v1 + (v2 - v1) * (2 / 3 - vH) * 6;\n return v1;\n}\n\n/**\n * Convert an HSL color to RGB.\n *\n * @param {Number} H the hue component\n * @param {Number} S the saturation component\n * @param {Number} L the luminance component\n * @return {Array} [R, G, B]\n *\n * @see https://www.easyrgb.com/en/math.php\n */\nexport function hsl2rgb(_H, _S, _L) {\n let R, G, B;\n\n const H = Math.max(0, Math.min(1, _H));\n const S = Math.max(0, Math.min(1, _S));\n const L = Math.max(0, Math.min(1, _L));\n\n if (S == 0) {\n R = L * 255;\n G = L * 255;\n B = L * 255;\n } else {\n let a, b;\n\n if (L < 0.5) {\n b = L * (1 + S);\n } else {\n b = L + S - S * L;\n }\n\n a = 2 * L - b;\n\n R = Math.floor(255 * h2rgb(a, b, H + 1 / 3));\n G = Math.floor(255 * h2rgb(a, b, H));\n B = Math.floor(255 * h2rgb(a, b, H - 1 / 3));\n }\n\n return [R, G, B];\n}\n\n/**\n * Convert an RGBcolor to HSL.\n *\n * @param {Number} R the red component\n * @param {Number} G the green component\n * @param {Number} B the blue component\n * @return {Array} [H, S, L]\n *\n * @see https://www.easyrgb.com/en/math.php\n */\nexport function rgb2hsl(_R, _G, _B) {\n let H, S, L;\n\n const R = Math.max(0, Math.min(255, _R));\n const G = Math.max(0, Math.min(255, _G));\n const B = Math.max(0, Math.min(255, _B));\n\n const r = R / 255;\n const g = G / 255;\n const b = B / 255;\n\n const var_min = Math.min(Math.min(r, g), b);\n const var_max = Math.max(Math.max(r, g), b);\n const del_max = var_max - var_min;\n\n L = (var_max + var_min) / 2;\n\n if (del_max === 0) {\n H = 0;\n S = 0;\n } else {\n if (L < 0.5) {\n S = del_max / (var_max + var_min);\n } else {\n S = del_max / (2 - var_max - var_min);\n }\n\n const del_r = ((var_max - r) / 6 + del_max / 2) / del_max;\n const del_g = ((var_max - g) / 6 + del_max / 2) / del_max;\n const del_b = ((var_max - b) / 6 + del_max / 2) / del_max;\n\n if (r == var_max) {\n H = del_b - del_g;\n } else if (g == var_max) {\n H = 1 / 3 + del_r - del_b;\n } else if (b == var_max) {\n H = 2 / 3 + del_g - del_r;\n }\n\n if (H < 0) {\n H += 1;\n } else if (H > 1) {\n H -= 1;\n }\n }\n\n return [H, S, L];\n}\n","/*!\n * PatternFly Elements: PfeAvatar 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement.js\";\nimport { hash } from \"./djb-hash.js\";\nimport { hsl2rgb, rgb2hsl } from \"./hslrgb.js\";\n\nclass PfeAvatar extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n\n`;\n }\n\n static get tag() {\n return \"pfe-avatar\";\n }\n\n static get properties() {\n return {\n name: {\n title: \"Username\",\n type: String,\n default: \"\",\n observer: \"_updateWhenConnected\",\n },\n src: {\n title: \"Avatar image URL\",\n type: String,\n observer: \"_updateWhenConnected\",\n },\n pattern: {\n title: \"Shape pattern\",\n type: String,\n default: PfeAvatar.patterns.squares,\n observer: \"_updateWhenConnected\",\n },\n // @TODO Deprecated pfe-name in 1.0\n oldName: {\n alias: \"name\",\n attr: \"pfe-name\",\n },\n // @TODO Deprecated pfe-src in 1.0\n oldSrc: {\n alias: \"src\",\n attr: \"pfe-src\",\n },\n // @TODO Deprecated pfe-pattern in 1.0\n oldPattern: {\n alias: \"pattern\",\n attr: \"pfe-pattern\",\n },\n };\n }\n\n get templateUrl() {\n return \"pfe-avatar.html\";\n }\n\n get styleUrl() {\n return \"pfe-avatar.scss\";\n }\n\n static get events() {\n return {\n connected: `${this.tag}:connected`,\n };\n }\n\n static get patterns() {\n return {\n triangles: \"triangles\",\n squares: \"squares\",\n };\n }\n\n static get defaultSize() {\n return 128;\n }\n\n static get defaultColors() {\n return \"#67accf #448087 #709c6b #a35252 #826cbb\";\n }\n\n get customColors() {\n return this.cssVariable(\"pfe-avatar--colors\");\n }\n\n constructor() {\n super(PfeAvatar);\n\n this._initCanvas = this._initCanvas.bind(this);\n }\n\n connectedCallback() {\n // initCanvas comes before parent's connectedCallback because the\n // connectedCallback sets attribute values, triggering, the observer\n // functions, which require the canvas to already be initialized.\n this._initCanvas();\n\n super.connectedCallback();\n\n this.emitEvent(PfeAvatar.events.connected, {\n bubbles: false,\n });\n }\n\n _initCanvas() {\n this._canvas = this.shadowRoot.querySelector(\"canvas\");\n const cssVarWidth = this.cssVariable(\"pfe-avatar--width\");\n const size = (cssVarWidth && cssVarWidth.replace(/px$/, \"\")) || PfeAvatar.defaultSize;\n this._canvas.width = size;\n this._canvas.height = size;\n\n this._squareSize = this._canvas.width / 8;\n this._triangleSize = this._canvas.width / 4;\n\n this._ctx = this._canvas.getContext(\"2d\");\n }\n\n static _registerColors() {\n this.colors = [];\n const contextColors = this.customColors || this.defaultColors;\n\n contextColors.split(/\\s+/).forEach((colorCode) => {\n let pattern;\n switch (colorCode.length) {\n case 4: // ex: \"#0fc\"\n pattern = /^#([A-f0-9])([A-f0-9])([A-f0-9])$/.exec(colorCode);\n if (pattern) {\n pattern.shift();\n const color = pattern.map((c) => parseInt(c + c, 16));\n this._registerColor(color);\n } else {\n this.log(`[pfe-avatar] invalid color ${colorCode}`);\n }\n break;\n case 7: // ex: \"#00ffcc\"\n pattern = /^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/.exec(colorCode);\n if (pattern) {\n pattern.shift();\n const color = pattern.map((c) => parseInt(c, 16));\n this._registerColor(color);\n } else {\n this.log(`[pfe-avatar] invalid color ${colorCode}`);\n }\n }\n });\n\n return this.colors;\n }\n\n static _registerColor(color) {\n PfeAvatar.colors.push({\n color1: `rgb(${color.join(\",\")})`,\n color2: `rgb(${this._adjustColor(color).join(\",\")})`,\n });\n }\n\n static _adjustColor(color) {\n const dark = 0.1;\n const l_adj = 0.1; // luminance adjustment\n const hsl = rgb2hsl(...color);\n\n // if luminance is too dark already, then lighten the alternate color\n // instead of darkening it.\n hsl[2] += hsl[2] > dark ? -l_adj : l_adj;\n\n return hsl2rgb(...hsl);\n }\n\n _updateWhenConnected() {\n if (this.hasAttribute(\"pfelement\")) {\n this.update();\n } else {\n this.addEventListener(PfeAvatar.events.connected, () => this.update());\n }\n }\n\n update() {\n // if we have a src element, update the img, otherwise update the random pattern\n if (this.src) {\n this.shadowRoot.querySelector(\"img\").src = this.src;\n } else {\n const bitPattern = hash(this.name).toString(2);\n const arrPattern = bitPattern.split(\"\").map((n) => Number(n));\n this._colorIndex = Math.floor((PfeAvatar.colors.length * parseInt(bitPattern, 2)) / Math.pow(2, 32));\n this.color1 = PfeAvatar.colors[this._colorIndex].color1;\n this.color2 = PfeAvatar.colors[this._colorIndex].color2;\n\n this._clear();\n this._drawBackground();\n if (this.pattern === PfeAvatar.patterns.squares) {\n this._drawSquarePattern(arrPattern);\n } else if (this.pattern === PfeAvatar.patterns.triangles) {\n this._drawTrianglePattern(arrPattern);\n }\n // this._drawGradient();\n }\n }\n\n _clear() {\n this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);\n }\n\n _drawBackground() {\n this._ctx.fillStyle = this.color1;\n this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);\n }\n\n _drawSquarePattern(pattern) {\n this._ctx.fillStyle = this.color2;\n if (this._ctx) {\n let i = pattern.length;\n while (i--) {\n if (pattern[i]) {\n this._drawMirroredSquare(i % 4, Math.floor(i / 4));\n }\n }\n }\n }\n\n /**\n * Draw a square at the given position, mirrored onto both the left and right half of the canvas.\n */\n _drawMirroredSquare(x, y) {\n if (this._ctx) {\n this._drawSquare(x, y);\n this._drawSquare(7 - x, y);\n }\n }\n\n _drawSquare(x, y) {\n this._ctx.fillRect(this._squareSize * x, this._squareSize * y, this._squareSize, this._squareSize);\n }\n\n _drawTrianglePattern(pattern) {\n this._ctx.fillStyle = this.color2;\n if (this._ctx) {\n let i = pattern.length;\n while (i--) {\n if (pattern[i]) {\n const x = Math.floor(i / 2) % 2;\n const y = Math.floor(i / 4);\n const alt = i % 4;\n\n const p1 = [x, y];\n const p2 = [x, y];\n const p3 = [x, y];\n\n switch (alt) {\n case 0:\n p2[1]++;\n p3[0]++;\n p3[1]++;\n break;\n case 1:\n p2[0]++;\n p3[0]++;\n p3[1]++;\n break;\n case 2:\n p2[0]++;\n p3[1]++;\n break;\n case 3:\n p1[0]++;\n p2[0]++;\n p2[1]++;\n p3[1]++;\n break;\n }\n\n this._drawMirroredTriangle(p1, p2, p3);\n }\n }\n }\n }\n\n /**\n * Draw a square at the given position in the top-left quadrant of the\n * canvas, and mirrored to the other three quadrants.\n */\n _drawMirroredTriangle(p1, p2, p3) {\n if (this._ctx) {\n this._drawTriangle(p1, p2, p3);\n this._drawTriangle([4 - p1[0], p1[1]], [4 - p2[0], p2[1]], [4 - p3[0], p3[1]]);\n }\n }\n\n _drawTriangle(p1, p2, p3) {\n this._ctx.beginPath();\n this._ctx.moveTo(...p1.map((c) => c * this._triangleSize));\n this._ctx.lineTo(...p2.map((c) => c * this._triangleSize));\n this._ctx.lineTo(...p3.map((c) => c * this._triangleSize));\n this._ctx.closePath();\n this._ctx.fill();\n this._ctx.fill();\n }\n\n _drawGradient() {\n const gradient = this._ctx.createLinearGradient(0, this._canvas.height, this._canvas.width, 0);\n const color = this.color2;\n let gradientColor1 = color;\n let gradientColor2 = color;\n if (/^#[A-f0-9]{3}$/.test(color)) {\n // color is of the form \"#fff\"\n gradientColor1 += \"c\";\n gradientColor2 += \"0\";\n } else if (/^#[A-f0-9]{6}$/.test(color)) {\n // color is of the form \"#ffffff\"\n gradientColor1 += \"cc\";\n gradientColor2 += \"00\";\n }\n gradient.addColorStop(0, gradientColor1);\n gradient.addColorStop(1, gradientColor2);\n gradient.addColorStop(1, gradientColor1);\n this._ctx.fillStyle = gradient;\n this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);\n }\n}\n\nPfeAvatar._registerColors();\n\nPFElement.create(PfeAvatar);\n\nexport default PfeAvatar;\n","/**\n * djb2 string hashing function.\n *\n * @see http://www.cse.yorku.ca/~oz/hash.html\n * @param {String} str the string to hash.\n * @return {Number} a positive integer\n */\n\nfunction hash(str) {\n let hash = 5381;\n let i = str.length;\n\n while (i) {\n hash = (hash * 33) ^ str.charCodeAt(--i);\n }\n\n return hash >>> 0;\n}\n\nexport { hash };\n"],"names":["h2rgb","v1","v2","vH","PfeAvatar","PFElement","version","html","tag","properties","name","title","type","String","default","observer","src","pattern","patterns","squares","oldName","alias","attr","oldSrc","oldPattern","templateUrl","styleUrl","events","connected","this","triangles","defaultSize","defaultColors","customColors","cssVariable","[object Object]","super","_initCanvas","bind","connectedCallback","emitEvent","bubbles","_canvas","shadowRoot","querySelector","cssVarWidth","size","replace","width","height","_squareSize","_triangleSize","_ctx","getContext","colors","split","forEach","colorCode","length","exec","shift","color","map","c","parseInt","_registerColor","log","push","color1","join","color2","_adjustColor","hsl","_R","_G","_B","H","S","L","r","Math","max","min","g","b","var_min","var_max","del_max","del_r","del_g","del_b","rgb2hsl","_H","_S","_L","R","G","B","a","floor","hsl2rgb","hasAttribute","update","addEventListener","bitPattern","str","hash","i","charCodeAt","toString","arrPattern","n","Number","_colorIndex","pow","_clear","_drawBackground","_drawSquarePattern","_drawTrianglePattern","clearRect","fillStyle","fillRect","_drawMirroredSquare","x","y","_drawSquare","p1","p2","p3","_drawMirroredTriangle","_drawTriangle","beginPath","moveTo","lineTo","closePath","fill","gradient","createLinearGradient","gradientColor1","gradientColor2","test","addColorStop","_registerColors","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-avatar/dist/pfe-avatar.umd.js b/elements/pfe-avatar/dist/pfe-avatar.umd.js new file mode 100644 index 0000000000..fcd56e50e9 --- /dev/null +++ b/elements/pfe-avatar/dist/pfe-avatar.umd.js @@ -0,0 +1,644 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('../../pfelement/dist/pfelement.umd')) : + typeof define === 'function' && define.amd ? define(['../../pfelement/dist/pfelement.umd'], factory) : + (global = global || self, global.PfeAvatar = factory(global.PFElement)); +}(this, (function (PFElement) { 'use strict'; + + PFElement = PFElement && Object.prototype.hasOwnProperty.call(PFElement, 'default') ? PFElement['default'] : PFElement; + + /** + * djb2 string hashing function. + * + * @see http://www.cse.yorku.ca/~oz/hash.html + * @param {String} str the string to hash. + * @return {Number} a positive integer + */ + + function hash(str) { + var hash = 5381; + var i = str.length; + + while (i) { + hash = hash * 33 ^ str.charCodeAt(--i); + } + + return hash >>> 0; + } + + function h2rgb(v1, v2, vH) { + if (vH < 0) vH += 1; + if (vH > 1) vH -= 1; + if (6 * vH < 1) return v1 + (v2 - v1) * 6 * vH; + if (2 * vH < 1) return v2; + if (3 * vH < 2) return v1 + (v2 - v1) * (2 / 3 - vH) * 6; + return v1; + } + + /** + * Convert an HSL color to RGB. + * + * @param {Number} H the hue component + * @param {Number} S the saturation component + * @param {Number} L the luminance component + * @return {Array} [R, G, B] + * + * @see https://www.easyrgb.com/en/math.php + */ + function hsl2rgb(_H, _S, _L) { + var R = void 0, + G = void 0, + B = void 0; + + var H = Math.max(0, Math.min(1, _H)); + var S = Math.max(0, Math.min(1, _S)); + var L = Math.max(0, Math.min(1, _L)); + + if (S == 0) { + R = L * 255; + G = L * 255; + B = L * 255; + } else { + var a = void 0, + b = void 0; + + if (L < 0.5) { + b = L * (1 + S); + } else { + b = L + S - S * L; + } + + a = 2 * L - b; + + R = Math.floor(255 * h2rgb(a, b, H + 1 / 3)); + G = Math.floor(255 * h2rgb(a, b, H)); + B = Math.floor(255 * h2rgb(a, b, H - 1 / 3)); + } + + return [R, G, B]; + } + + /** + * Convert an RGBcolor to HSL. + * + * @param {Number} R the red component + * @param {Number} G the green component + * @param {Number} B the blue component + * @return {Array} [H, S, L] + * + * @see https://www.easyrgb.com/en/math.php + */ + function rgb2hsl(_R, _G, _B) { + var H = void 0, + S = void 0, + L = void 0; + + var R = Math.max(0, Math.min(255, _R)); + var G = Math.max(0, Math.min(255, _G)); + var B = Math.max(0, Math.min(255, _B)); + + var r = R / 255; + var g = G / 255; + var b = B / 255; + + var var_min = Math.min(Math.min(r, g), b); + var var_max = Math.max(Math.max(r, g), b); + var del_max = var_max - var_min; + + L = (var_max + var_min) / 2; + + if (del_max === 0) { + H = 0; + S = 0; + } else { + if (L < 0.5) { + S = del_max / (var_max + var_min); + } else { + S = del_max / (2 - var_max - var_min); + } + + var del_r = ((var_max - r) / 6 + del_max / 2) / del_max; + var del_g = ((var_max - g) / 6 + del_max / 2) / del_max; + var del_b = ((var_max - b) / 6 + del_max / 2) / del_max; + + if (r == var_max) { + H = del_b - del_g; + } else if (g == var_max) { + H = 1 / 3 + del_r - del_b; + } else if (b == var_max) { + H = 2 / 3 + del_g - del_r; + } + + if (H < 0) { + H += 1; + } else if (H > 1) { + H -= 1; + } + } + + return [H, S, L]; + } + + var classCallCheck = function (instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } + }; + + var createClass = function () { + function defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } + + return function (Constructor, protoProps, staticProps) { + if (protoProps) defineProperties(Constructor.prototype, protoProps); + if (staticProps) defineProperties(Constructor, staticProps); + return Constructor; + }; + }(); + + var get = function get(object, property, receiver) { + if (object === null) object = Function.prototype; + var desc = Object.getOwnPropertyDescriptor(object, property); + + if (desc === undefined) { + var parent = Object.getPrototypeOf(object); + + if (parent === null) { + return undefined; + } else { + return get(parent, property, receiver); + } + } else if ("value" in desc) { + return desc.value; + } else { + var getter = desc.get; + + if (getter === undefined) { + return undefined; + } + + return getter.call(receiver); + } + }; + + var inherits = function (subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); + } + + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + enumerable: false, + writable: true, + configurable: true + } + }); + if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; + }; + + var possibleConstructorReturn = function (self, call) { + if (!self) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return call && (typeof call === "object" || typeof call === "function") ? call : self; + }; + + var toConsumableArray = function (arr) { + if (Array.isArray(arr)) { + for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; + + return arr2; + } else { + return Array.from(arr); + } + }; + + /*! + * PatternFly Elements: PfeAvatar 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * + */ + + var PfeAvatar = function (_PFElement) { + inherits(PfeAvatar, _PFElement); + createClass(PfeAvatar, [{ + key: "html", + + + // Injected at build-time + get: function get() { + return "\n\n\n"; + } + }, { + key: "templateUrl", + get: function get() { + return "pfe-avatar.html"; + } + }, { + key: "styleUrl", + get: function get() { + return "pfe-avatar.scss"; + } + }, { + key: "customColors", + get: function get() { + return this.cssVariable("pfe-avatar--colors"); + } + }], [{ + key: "version", + + + // Injected at build-time + get: function get() { + return "1.12.3"; + } + }, { + key: "tag", + get: function get() { + return "pfe-avatar"; + } + }, { + key: "properties", + get: function get() { + return { + name: { + title: "Username", + type: String, + default: "", + observer: "_updateWhenConnected" + }, + src: { + title: "Avatar image URL", + type: String, + observer: "_updateWhenConnected" + }, + pattern: { + title: "Shape pattern", + type: String, + default: PfeAvatar.patterns.squares, + observer: "_updateWhenConnected" + }, + // @TODO Deprecated pfe-name in 1.0 + oldName: { + alias: "name", + attr: "pfe-name" + }, + // @TODO Deprecated pfe-src in 1.0 + oldSrc: { + alias: "src", + attr: "pfe-src" + }, + // @TODO Deprecated pfe-pattern in 1.0 + oldPattern: { + alias: "pattern", + attr: "pfe-pattern" + } + }; + } + }, { + key: "events", + get: function get() { + return { + connected: this.tag + ":connected" + }; + } + }, { + key: "patterns", + get: function get() { + return { + triangles: "triangles", + squares: "squares" + }; + } + }, { + key: "defaultSize", + get: function get() { + return 128; + } + }, { + key: "defaultColors", + get: function get() { + return "#67accf #448087 #709c6b #a35252 #826cbb"; + } + }]); + + function PfeAvatar() { + classCallCheck(this, PfeAvatar); + + var _this = possibleConstructorReturn(this, (PfeAvatar.__proto__ || Object.getPrototypeOf(PfeAvatar)).call(this, PfeAvatar)); + + _this._initCanvas = _this._initCanvas.bind(_this); + return _this; + } + + createClass(PfeAvatar, [{ + key: "connectedCallback", + value: function connectedCallback() { + // initCanvas comes before parent's connectedCallback because the + // connectedCallback sets attribute values, triggering, the observer + // functions, which require the canvas to already be initialized. + this._initCanvas(); + + get(PfeAvatar.prototype.__proto__ || Object.getPrototypeOf(PfeAvatar.prototype), "connectedCallback", this).call(this); + + this.emitEvent(PfeAvatar.events.connected, { + bubbles: false + }); + } + }, { + key: "_initCanvas", + value: function _initCanvas() { + this._canvas = this.shadowRoot.querySelector("canvas"); + var cssVarWidth = this.cssVariable("pfe-avatar--width"); + var size = cssVarWidth && cssVarWidth.replace(/px$/, "") || PfeAvatar.defaultSize; + this._canvas.width = size; + this._canvas.height = size; + + this._squareSize = this._canvas.width / 8; + this._triangleSize = this._canvas.width / 4; + + this._ctx = this._canvas.getContext("2d"); + } + }, { + key: "_updateWhenConnected", + value: function _updateWhenConnected() { + var _this2 = this; + + if (this.hasAttribute("pfelement")) { + this.update(); + } else { + this.addEventListener(PfeAvatar.events.connected, function () { + return _this2.update(); + }); + } + } + }, { + key: "update", + value: function update() { + // if we have a src element, update the img, otherwise update the random pattern + if (this.src) { + this.shadowRoot.querySelector("img").src = this.src; + } else { + var bitPattern = hash(this.name).toString(2); + var arrPattern = bitPattern.split("").map(function (n) { + return Number(n); + }); + this._colorIndex = Math.floor(PfeAvatar.colors.length * parseInt(bitPattern, 2) / Math.pow(2, 32)); + this.color1 = PfeAvatar.colors[this._colorIndex].color1; + this.color2 = PfeAvatar.colors[this._colorIndex].color2; + + this._clear(); + this._drawBackground(); + if (this.pattern === PfeAvatar.patterns.squares) { + this._drawSquarePattern(arrPattern); + } else if (this.pattern === PfeAvatar.patterns.triangles) { + this._drawTrianglePattern(arrPattern); + } + // this._drawGradient(); + } + } + }, { + key: "_clear", + value: function _clear() { + this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height); + } + }, { + key: "_drawBackground", + value: function _drawBackground() { + this._ctx.fillStyle = this.color1; + this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height); + } + }, { + key: "_drawSquarePattern", + value: function _drawSquarePattern(pattern) { + this._ctx.fillStyle = this.color2; + if (this._ctx) { + var i = pattern.length; + while (i--) { + if (pattern[i]) { + this._drawMirroredSquare(i % 4, Math.floor(i / 4)); + } + } + } + } + + /** + * Draw a square at the given position, mirrored onto both the left and right half of the canvas. + */ + + }, { + key: "_drawMirroredSquare", + value: function _drawMirroredSquare(x, y) { + if (this._ctx) { + this._drawSquare(x, y); + this._drawSquare(7 - x, y); + } + } + }, { + key: "_drawSquare", + value: function _drawSquare(x, y) { + this._ctx.fillRect(this._squareSize * x, this._squareSize * y, this._squareSize, this._squareSize); + } + }, { + key: "_drawTrianglePattern", + value: function _drawTrianglePattern(pattern) { + this._ctx.fillStyle = this.color2; + if (this._ctx) { + var i = pattern.length; + while (i--) { + if (pattern[i]) { + var x = Math.floor(i / 2) % 2; + var y = Math.floor(i / 4); + var alt = i % 4; + + var p1 = [x, y]; + var p2 = [x, y]; + var p3 = [x, y]; + + switch (alt) { + case 0: + p2[1]++; + p3[0]++; + p3[1]++; + break; + case 1: + p2[0]++; + p3[0]++; + p3[1]++; + break; + case 2: + p2[0]++; + p3[1]++; + break; + case 3: + p1[0]++; + p2[0]++; + p2[1]++; + p3[1]++; + break; + } + + this._drawMirroredTriangle(p1, p2, p3); + } + } + } + } + + /** + * Draw a square at the given position in the top-left quadrant of the + * canvas, and mirrored to the other three quadrants. + */ + + }, { + key: "_drawMirroredTriangle", + value: function _drawMirroredTriangle(p1, p2, p3) { + if (this._ctx) { + this._drawTriangle(p1, p2, p3); + this._drawTriangle([4 - p1[0], p1[1]], [4 - p2[0], p2[1]], [4 - p3[0], p3[1]]); + } + } + }, { + key: "_drawTriangle", + value: function _drawTriangle(p1, p2, p3) { + var _ctx, + _this3 = this, + _ctx2, + _ctx3; + + this._ctx.beginPath(); + (_ctx = this._ctx).moveTo.apply(_ctx, toConsumableArray(p1.map(function (c) { + return c * _this3._triangleSize; + }))); + (_ctx2 = this._ctx).lineTo.apply(_ctx2, toConsumableArray(p2.map(function (c) { + return c * _this3._triangleSize; + }))); + (_ctx3 = this._ctx).lineTo.apply(_ctx3, toConsumableArray(p3.map(function (c) { + return c * _this3._triangleSize; + }))); + this._ctx.closePath(); + this._ctx.fill(); + this._ctx.fill(); + } + }, { + key: "_drawGradient", + value: function _drawGradient() { + var gradient = this._ctx.createLinearGradient(0, this._canvas.height, this._canvas.width, 0); + var color = this.color2; + var gradientColor1 = color; + var gradientColor2 = color; + if (/^#[A-f0-9]{3}$/.test(color)) { + // color is of the form "#fff" + gradientColor1 += "c"; + gradientColor2 += "0"; + } else if (/^#[A-f0-9]{6}$/.test(color)) { + // color is of the form "#ffffff" + gradientColor1 += "cc"; + gradientColor2 += "00"; + } + gradient.addColorStop(0, gradientColor1); + gradient.addColorStop(1, gradientColor2); + gradient.addColorStop(1, gradientColor1); + this._ctx.fillStyle = gradient; + this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height); + } + }], [{ + key: "_registerColors", + value: function _registerColors() { + var _this4 = this; + + this.colors = []; + var contextColors = this.customColors || this.defaultColors; + + contextColors.split(/\s+/).forEach(function (colorCode) { + var pattern = void 0; + switch (colorCode.length) { + case 4: + // ex: "#0fc" + pattern = /^#([A-f0-9])([A-f0-9])([A-f0-9])$/.exec(colorCode); + if (pattern) { + pattern.shift(); + var color = pattern.map(function (c) { + return parseInt(c + c, 16); + }); + _this4._registerColor(color); + } else { + _this4.log("[pfe-avatar] invalid color " + colorCode); + } + break; + case 7: + // ex: "#00ffcc" + pattern = /^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/.exec(colorCode); + if (pattern) { + pattern.shift(); + var _color = pattern.map(function (c) { + return parseInt(c, 16); + }); + _this4._registerColor(_color); + } else { + _this4.log("[pfe-avatar] invalid color " + colorCode); + } + } + }); + + return this.colors; + } + }, { + key: "_registerColor", + value: function _registerColor(color) { + PfeAvatar.colors.push({ + color1: "rgb(" + color.join(",") + ")", + color2: "rgb(" + this._adjustColor(color).join(",") + ")" + }); + } + }, { + key: "_adjustColor", + value: function _adjustColor(color) { + var dark = 0.1; + var l_adj = 0.1; // luminance adjustment + var hsl = rgb2hsl.apply(undefined, toConsumableArray(color)); + + // if luminance is too dark already, then lighten the alternate color + // instead of darkening it. + hsl[2] += hsl[2] > dark ? -l_adj : l_adj; + + return hsl2rgb.apply(undefined, toConsumableArray(hsl)); + } + }]); + return PfeAvatar; + }(PFElement); + + PfeAvatar._registerColors(); + + PFElement.create(PfeAvatar); + + return PfeAvatar; + +}))); +//# sourceMappingURL=pfe-avatar.umd.js.map diff --git a/elements/pfe-avatar/dist/pfe-avatar.umd.js.map b/elements/pfe-avatar/dist/pfe-avatar.umd.js.map new file mode 100644 index 0000000000..5fc18b702e --- /dev/null +++ b/elements/pfe-avatar/dist/pfe-avatar.umd.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-avatar.umd.js","sources":["../_temp/djb-hash.js","../_temp/hslrgb.js","../_temp/pfe-avatar.umd.js"],"sourcesContent":["/**\n * djb2 string hashing function.\n *\n * @see http://www.cse.yorku.ca/~oz/hash.html\n * @param {String} str the string to hash.\n * @return {Number} a positive integer\n */\n\nfunction hash(str) {\n let hash = 5381;\n let i = str.length;\n\n while (i) {\n hash = (hash * 33) ^ str.charCodeAt(--i);\n }\n\n return hash >>> 0;\n}\n\nexport { hash };\n","function h2rgb(v1, v2, vH) {\n if (vH < 0) vH += 1;\n if (vH > 1) vH -= 1;\n if (6 * vH < 1) return v1 + (v2 - v1) * 6 * vH;\n if (2 * vH < 1) return v2;\n if (3 * vH < 2) return v1 + (v2 - v1) * (2 / 3 - vH) * 6;\n return v1;\n}\n\n/**\n * Convert an HSL color to RGB.\n *\n * @param {Number} H the hue component\n * @param {Number} S the saturation component\n * @param {Number} L the luminance component\n * @return {Array} [R, G, B]\n *\n * @see https://www.easyrgb.com/en/math.php\n */\nexport function hsl2rgb(_H, _S, _L) {\n let R, G, B;\n\n const H = Math.max(0, Math.min(1, _H));\n const S = Math.max(0, Math.min(1, _S));\n const L = Math.max(0, Math.min(1, _L));\n\n if (S == 0) {\n R = L * 255;\n G = L * 255;\n B = L * 255;\n } else {\n let a, b;\n\n if (L < 0.5) {\n b = L * (1 + S);\n } else {\n b = L + S - S * L;\n }\n\n a = 2 * L - b;\n\n R = Math.floor(255 * h2rgb(a, b, H + 1 / 3));\n G = Math.floor(255 * h2rgb(a, b, H));\n B = Math.floor(255 * h2rgb(a, b, H - 1 / 3));\n }\n\n return [R, G, B];\n}\n\n/**\n * Convert an RGBcolor to HSL.\n *\n * @param {Number} R the red component\n * @param {Number} G the green component\n * @param {Number} B the blue component\n * @return {Array} [H, S, L]\n *\n * @see https://www.easyrgb.com/en/math.php\n */\nexport function rgb2hsl(_R, _G, _B) {\n let H, S, L;\n\n const R = Math.max(0, Math.min(255, _R));\n const G = Math.max(0, Math.min(255, _G));\n const B = Math.max(0, Math.min(255, _B));\n\n const r = R / 255;\n const g = G / 255;\n const b = B / 255;\n\n const var_min = Math.min(Math.min(r, g), b);\n const var_max = Math.max(Math.max(r, g), b);\n const del_max = var_max - var_min;\n\n L = (var_max + var_min) / 2;\n\n if (del_max === 0) {\n H = 0;\n S = 0;\n } else {\n if (L < 0.5) {\n S = del_max / (var_max + var_min);\n } else {\n S = del_max / (2 - var_max - var_min);\n }\n\n const del_r = ((var_max - r) / 6 + del_max / 2) / del_max;\n const del_g = ((var_max - g) / 6 + del_max / 2) / del_max;\n const del_b = ((var_max - b) / 6 + del_max / 2) / del_max;\n\n if (r == var_max) {\n H = del_b - del_g;\n } else if (g == var_max) {\n H = 1 / 3 + del_r - del_b;\n } else if (b == var_max) {\n H = 2 / 3 + del_g - del_r;\n }\n\n if (H < 0) {\n H += 1;\n } else if (H > 1) {\n H -= 1;\n }\n }\n\n return [H, S, L];\n}\n","/*!\n * PatternFly Elements: PfeAvatar 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement\";\nimport { hash } from \"./djb-hash.js\";\nimport { hsl2rgb, rgb2hsl } from \"./hslrgb.js\";\n\nclass PfeAvatar extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n\n`;\n }\n\n static get tag() {\n return \"pfe-avatar\";\n }\n\n static get properties() {\n return {\n name: {\n title: \"Username\",\n type: String,\n default: \"\",\n observer: \"_updateWhenConnected\",\n },\n src: {\n title: \"Avatar image URL\",\n type: String,\n observer: \"_updateWhenConnected\",\n },\n pattern: {\n title: \"Shape pattern\",\n type: String,\n default: PfeAvatar.patterns.squares,\n observer: \"_updateWhenConnected\",\n },\n // @TODO Deprecated pfe-name in 1.0\n oldName: {\n alias: \"name\",\n attr: \"pfe-name\",\n },\n // @TODO Deprecated pfe-src in 1.0\n oldSrc: {\n alias: \"src\",\n attr: \"pfe-src\",\n },\n // @TODO Deprecated pfe-pattern in 1.0\n oldPattern: {\n alias: \"pattern\",\n attr: \"pfe-pattern\",\n },\n };\n }\n\n get templateUrl() {\n return \"pfe-avatar.html\";\n }\n\n get styleUrl() {\n return \"pfe-avatar.scss\";\n }\n\n static get events() {\n return {\n connected: `${this.tag}:connected`,\n };\n }\n\n static get patterns() {\n return {\n triangles: \"triangles\",\n squares: \"squares\",\n };\n }\n\n static get defaultSize() {\n return 128;\n }\n\n static get defaultColors() {\n return \"#67accf #448087 #709c6b #a35252 #826cbb\";\n }\n\n get customColors() {\n return this.cssVariable(\"pfe-avatar--colors\");\n }\n\n constructor() {\n super(PfeAvatar);\n\n this._initCanvas = this._initCanvas.bind(this);\n }\n\n connectedCallback() {\n // initCanvas comes before parent's connectedCallback because the\n // connectedCallback sets attribute values, triggering, the observer\n // functions, which require the canvas to already be initialized.\n this._initCanvas();\n\n super.connectedCallback();\n\n this.emitEvent(PfeAvatar.events.connected, {\n bubbles: false,\n });\n }\n\n _initCanvas() {\n this._canvas = this.shadowRoot.querySelector(\"canvas\");\n const cssVarWidth = this.cssVariable(\"pfe-avatar--width\");\n const size = (cssVarWidth && cssVarWidth.replace(/px$/, \"\")) || PfeAvatar.defaultSize;\n this._canvas.width = size;\n this._canvas.height = size;\n\n this._squareSize = this._canvas.width / 8;\n this._triangleSize = this._canvas.width / 4;\n\n this._ctx = this._canvas.getContext(\"2d\");\n }\n\n static _registerColors() {\n this.colors = [];\n const contextColors = this.customColors || this.defaultColors;\n\n contextColors.split(/\\s+/).forEach((colorCode) => {\n let pattern;\n switch (colorCode.length) {\n case 4: // ex: \"#0fc\"\n pattern = /^#([A-f0-9])([A-f0-9])([A-f0-9])$/.exec(colorCode);\n if (pattern) {\n pattern.shift();\n const color = pattern.map((c) => parseInt(c + c, 16));\n this._registerColor(color);\n } else {\n this.log(`[pfe-avatar] invalid color ${colorCode}`);\n }\n break;\n case 7: // ex: \"#00ffcc\"\n pattern = /^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/.exec(colorCode);\n if (pattern) {\n pattern.shift();\n const color = pattern.map((c) => parseInt(c, 16));\n this._registerColor(color);\n } else {\n this.log(`[pfe-avatar] invalid color ${colorCode}`);\n }\n }\n });\n\n return this.colors;\n }\n\n static _registerColor(color) {\n PfeAvatar.colors.push({\n color1: `rgb(${color.join(\",\")})`,\n color2: `rgb(${this._adjustColor(color).join(\",\")})`,\n });\n }\n\n static _adjustColor(color) {\n const dark = 0.1;\n const l_adj = 0.1; // luminance adjustment\n const hsl = rgb2hsl(...color);\n\n // if luminance is too dark already, then lighten the alternate color\n // instead of darkening it.\n hsl[2] += hsl[2] > dark ? -l_adj : l_adj;\n\n return hsl2rgb(...hsl);\n }\n\n _updateWhenConnected() {\n if (this.hasAttribute(\"pfelement\")) {\n this.update();\n } else {\n this.addEventListener(PfeAvatar.events.connected, () => this.update());\n }\n }\n\n update() {\n // if we have a src element, update the img, otherwise update the random pattern\n if (this.src) {\n this.shadowRoot.querySelector(\"img\").src = this.src;\n } else {\n const bitPattern = hash(this.name).toString(2);\n const arrPattern = bitPattern.split(\"\").map((n) => Number(n));\n this._colorIndex = Math.floor((PfeAvatar.colors.length * parseInt(bitPattern, 2)) / Math.pow(2, 32));\n this.color1 = PfeAvatar.colors[this._colorIndex].color1;\n this.color2 = PfeAvatar.colors[this._colorIndex].color2;\n\n this._clear();\n this._drawBackground();\n if (this.pattern === PfeAvatar.patterns.squares) {\n this._drawSquarePattern(arrPattern);\n } else if (this.pattern === PfeAvatar.patterns.triangles) {\n this._drawTrianglePattern(arrPattern);\n }\n // this._drawGradient();\n }\n }\n\n _clear() {\n this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);\n }\n\n _drawBackground() {\n this._ctx.fillStyle = this.color1;\n this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);\n }\n\n _drawSquarePattern(pattern) {\n this._ctx.fillStyle = this.color2;\n if (this._ctx) {\n let i = pattern.length;\n while (i--) {\n if (pattern[i]) {\n this._drawMirroredSquare(i % 4, Math.floor(i / 4));\n }\n }\n }\n }\n\n /**\n * Draw a square at the given position, mirrored onto both the left and right half of the canvas.\n */\n _drawMirroredSquare(x, y) {\n if (this._ctx) {\n this._drawSquare(x, y);\n this._drawSquare(7 - x, y);\n }\n }\n\n _drawSquare(x, y) {\n this._ctx.fillRect(this._squareSize * x, this._squareSize * y, this._squareSize, this._squareSize);\n }\n\n _drawTrianglePattern(pattern) {\n this._ctx.fillStyle = this.color2;\n if (this._ctx) {\n let i = pattern.length;\n while (i--) {\n if (pattern[i]) {\n const x = Math.floor(i / 2) % 2;\n const y = Math.floor(i / 4);\n const alt = i % 4;\n\n const p1 = [x, y];\n const p2 = [x, y];\n const p3 = [x, y];\n\n switch (alt) {\n case 0:\n p2[1]++;\n p3[0]++;\n p3[1]++;\n break;\n case 1:\n p2[0]++;\n p3[0]++;\n p3[1]++;\n break;\n case 2:\n p2[0]++;\n p3[1]++;\n break;\n case 3:\n p1[0]++;\n p2[0]++;\n p2[1]++;\n p3[1]++;\n break;\n }\n\n this._drawMirroredTriangle(p1, p2, p3);\n }\n }\n }\n }\n\n /**\n * Draw a square at the given position in the top-left quadrant of the\n * canvas, and mirrored to the other three quadrants.\n */\n _drawMirroredTriangle(p1, p2, p3) {\n if (this._ctx) {\n this._drawTriangle(p1, p2, p3);\n this._drawTriangle([4 - p1[0], p1[1]], [4 - p2[0], p2[1]], [4 - p3[0], p3[1]]);\n }\n }\n\n _drawTriangle(p1, p2, p3) {\n this._ctx.beginPath();\n this._ctx.moveTo(...p1.map((c) => c * this._triangleSize));\n this._ctx.lineTo(...p2.map((c) => c * this._triangleSize));\n this._ctx.lineTo(...p3.map((c) => c * this._triangleSize));\n this._ctx.closePath();\n this._ctx.fill();\n this._ctx.fill();\n }\n\n _drawGradient() {\n const gradient = this._ctx.createLinearGradient(0, this._canvas.height, this._canvas.width, 0);\n const color = this.color2;\n let gradientColor1 = color;\n let gradientColor2 = color;\n if (/^#[A-f0-9]{3}$/.test(color)) {\n // color is of the form \"#fff\"\n gradientColor1 += \"c\";\n gradientColor2 += \"0\";\n } else if (/^#[A-f0-9]{6}$/.test(color)) {\n // color is of the form \"#ffffff\"\n gradientColor1 += \"cc\";\n gradientColor2 += \"00\";\n }\n gradient.addColorStop(0, gradientColor1);\n gradient.addColorStop(1, gradientColor2);\n gradient.addColorStop(1, gradientColor1);\n this._ctx.fillStyle = gradient;\n this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);\n }\n}\n\nPfeAvatar._registerColors();\n\nPFElement.create(PfeAvatar);\n\nexport default PfeAvatar;\n"],"names":["hash","str","i","length","charCodeAt","h2rgb","v1","v2","vH","hsl2rgb","_H","_S","_L","R","G","B","H","Math","max","min","S","L","a","b","floor","rgb2hsl","_R","_G","_B","r","g","var_min","var_max","del_max","del_r","del_g","del_b","PfeAvatar","cssVariable","name","title","type","String","default","observer","src","pattern","patterns","squares","oldName","alias","attr","oldSrc","oldPattern","connected","tag","triangles","_initCanvas","bind","emitEvent","events","bubbles","_canvas","shadowRoot","querySelector","cssVarWidth","size","replace","defaultSize","width","height","_squareSize","_triangleSize","_ctx","getContext","hasAttribute","update","addEventListener","bitPattern","toString","arrPattern","split","map","n","Number","_colorIndex","colors","parseInt","pow","color1","color2","_clear","_drawBackground","_drawSquarePattern","_drawTrianglePattern","clearRect","fillStyle","fillRect","_drawMirroredSquare","x","y","_drawSquare","alt","p1","p2","p3","_drawMirroredTriangle","_drawTriangle","beginPath","moveTo","c","lineTo","closePath","fill","gradient","createLinearGradient","color","gradientColor1","gradientColor2","test","addColorStop","contextColors","customColors","defaultColors","forEach","colorCode","exec","shift","_registerColor","log","push","join","_adjustColor","dark","l_adj","hsl","PFElement","_registerColors","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-avatar/dist/pfe-avatar.umd.min.js b/elements/pfe-avatar/dist/pfe-avatar.umd.min.js new file mode 100644 index 0000000000..7dfba62132 --- /dev/null +++ b/elements/pfe-avatar/dist/pfe-avatar.umd.min.js @@ -0,0 +1,2 @@ +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("../../pfelement/dist/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../../pfelement/dist/pfelement.umd.min"],e):(t=t||self).PfeAvatar=e(t.PFElement)}(this,function(t){"use strict";function c(t,e,r){return r<0&&(r+=1),1:host{display:block;position:relative;width:128px;width:var(--pfe-avatar--size,var(--pfe-avatar--width,128px));height:128px;height:var(--pfe-avatar--size,var(--pfe-avatar--width,128px))}:host canvas{width:100%;height:100%;image-rendering:optimizeSpeed;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:-o-crisp-edges;image-rendering:-o-pixelated;image-rendering:pixelated;-ms-interpolation-mode:nearest-neighbor}:host([shape=rounded]) canvas,:host([shape=rounded]) img{border-radius:calc(128px / 8 + 1px);border-radius:calc(var(--pfe-avatar--size,var(--pfe-avatar--width,128px))/ 8 + 1px)}:host([shape=circle]) canvas,:host([shape=circle]) img{border-radius:50%}:host([src]) canvas{display:none}:host([src]) img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}:host(:not([src])) img{display:none}:host([hidden]){display:none} /*# sourceMappingURL=pfe-avatar.min.css.map */\n\n"}},{key:"templateUrl",get:function(){return"pfe-avatar.html"}},{key:"styleUrl",get:function(){return"pfe-avatar.scss"}},{key:"customColors",get:function(){return this.cssVariable("pfe-avatar--colors")}}],[{key:"version",get:function(){return"1.12.3"}},{key:"tag",get:function(){return"pfe-avatar"}},{key:"properties",get:function(){return{name:{title:"Username",type:String,default:"",observer:"_updateWhenConnected"},src:{title:"Avatar image URL",type:String,observer:"_updateWhenConnected"},pattern:{title:"Shape pattern",type:String,default:s.patterns.squares,observer:"_updateWhenConnected"},oldName:{alias:"name",attr:"pfe-name"},oldSrc:{alias:"src",attr:"pfe-src"},oldPattern:{alias:"pattern",attr:"pfe-pattern"}}}},{key:"events",get:function(){return{connected:this.tag+":connected"}}},{key:"patterns",get:function(){return{triangles:"triangles",squares:"squares"}}},{key:"defaultSize",get:function(){return 128}},{key:"defaultColors",get:function(){return"#67accf #448087 #709c6b #a35252 #826cbb"}}]),r(s,[{key:"connectedCallback",value:function(){this._initCanvas(),i(s.prototype.__proto__||Object.getPrototypeOf(s.prototype),"connectedCallback",this).call(this),this.emitEvent(s.events.connected,{bubbles:!1})}},{key:"_initCanvas",value:function(){this._canvas=this.shadowRoot.querySelector("canvas");var t=this.cssVariable("pfe-avatar--width"),t=t&&t.replace(/px$/,"")||s.defaultSize;this._canvas.width=t,this._canvas.height=t,this._squareSize=this._canvas.width/8,this._triangleSize=this._canvas.width/4,this._ctx=this._canvas.getContext("2d")}},{key:"_updateWhenConnected",value:function(){var t=this;this.hasAttribute("pfelement")?this.update():this.addEventListener(s.events.connected,function(){return t.update()})}},{key:"update",value:function(){var t,e;this.src?this.shadowRoot.querySelector("img").src=this.src:(e=(t=function(t){for(var e=5381,r=t.length;r;)e=33*e^t.charCodeAt(--r);return e>>>0}(this.name).toString(2)).split("").map(function(t){return Number(t)}),this._colorIndex=Math.floor(s.colors.length*parseInt(t,2)/Math.pow(2,32)),this.color1=s.colors[this._colorIndex].color1,this.color2=s.colors[this._colorIndex].color2,this._clear(),this._drawBackground(),this.pattern===s.patterns.squares?this._drawSquarePattern(e):this.pattern===s.patterns.triangles&&this._drawTrianglePattern(e))}},{key:"_clear",value:function(){this._ctx.clearRect(0,0,this._canvas.width,this._canvas.height)}},{key:"_drawBackground",value:function(){this._ctx.fillStyle=this.color1,this._ctx.fillRect(0,0,this._canvas.width,this._canvas.height)}},{key:"_drawSquarePattern",value:function(t){if(this._ctx.fillStyle=this.color2,this._ctx)for(var e=t.length;e--;)t[e]&&this._drawMirroredSquare(e%4,Math.floor(e/4))}},{key:"_drawMirroredSquare",value:function(t,e){this._ctx&&(this._drawSquare(t,e),this._drawSquare(7-t,e))}},{key:"_drawSquare",value:function(t,e){this._ctx.fillRect(this._squareSize*t,this._squareSize*e,this._squareSize,this._squareSize)}},{key:"_drawTrianglePattern",value:function(t){if(this._ctx.fillStyle=this.color2,this._ctx)for(var e=t.length;e--;)if(t[e]){var r=Math.floor(e/2)%2,a=Math.floor(e/4),i=[r,a],n=[r,a],o=[r,a];switch(e%4){case 0:n[1]++,o[0]++,o[1]++;break;case 1:n[0]++,o[0]++,o[1]++;break;case 2:n[0]++,o[1]++;break;case 3:i[0]++,n[0]++,n[1]++,o[1]++}this._drawMirroredTriangle(i,n,o)}}},{key:"_drawMirroredTriangle",value:function(t,e,r){this._ctx&&(this._drawTriangle(t,e,r),this._drawTriangle([4-t[0],t[1]],[4-e[0],e[1]],[4-r[0],r[1]]))}},{key:"_drawTriangle",value:function(t,e,r){var a,i=this;this._ctx.beginPath(),(a=this._ctx).moveTo.apply(a,n(t.map(function(t){return t*i._triangleSize}))),(t=this._ctx).lineTo.apply(t,n(e.map(function(t){return t*i._triangleSize}))),(e=this._ctx).lineTo.apply(e,n(r.map(function(t){return t*i._triangleSize}))),this._ctx.closePath(),this._ctx.fill(),this._ctx.fill()}},{key:"_drawGradient",value:function(){var t=this._ctx.createLinearGradient(0,this._canvas.height,this._canvas.width,0),e=this.color2,r=e,a=e;/^#[A-f0-9]{3}$/.test(e)?(r+="c",a+="0"):/^#[A-f0-9]{6}$/.test(e)&&(r+="cc",a+="00"),t.addColorStop(0,r),t.addColorStop(1,a),t.addColorStop(1,r),this._ctx.fillStyle=t,this._ctx.fillRect(0,0,this._canvas.width,this._canvas.height)}}],[{key:"_registerColors",value:function(){var a=this;return this.colors=[],(this.customColors||this.defaultColors).split(/\s+/).forEach(function(t){var e,r=void 0;switch(t.length){case 4:(r=/^#([A-f0-9])([A-f0-9])([A-f0-9])$/.exec(t))?(r.shift(),e=r.map(function(t){return parseInt(t+t,16)}),a._registerColor(e)):a.log("[pfe-avatar] invalid color "+t);break;case 7:(r=/^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/.exec(t))?(r.shift(),e=r.map(function(t){return parseInt(t,16)}),a._registerColor(e)):a.log("[pfe-avatar] invalid color "+t)}}),this.colors}},{key:"_registerColor",value:function(t){s.colors.push({color1:"rgb("+t.join(",")+")",color2:"rgb("+this._adjustColor(t).join(",")+")"})}},{key:"_adjustColor",value:function(t){t=function(t,e,r){var a=void 0,i=void 0,n=Math.max(0,Math.min(255,t))/255,o=Math.max(0,Math.min(255,e))/255,s=Math.max(0,Math.min(255,r))/255,c=Math.min(Math.min(n,o),s),l=((t=Math.max(Math.max(n,o),s))+c)/2;return 0==(e=t-c)?i=a=0:(i=l<.5?e/(t+c):e/(2-t-c),r=((t-n)/6+e/2)/e,c=((t-o)/6+e/2)/e,e=((t-s)/6+e/2)/e,n==t?a=e-c:o==t?a=1/3+r-e:s==t&&(a=2/3+c-r),a<0?a+=1:1 1) vH -= 1;\n if (6 * vH < 1) return v1 + (v2 - v1) * 6 * vH;\n if (2 * vH < 1) return v2;\n if (3 * vH < 2) return v1 + (v2 - v1) * (2 / 3 - vH) * 6;\n return v1;\n}\n\n/**\n * Convert an HSL color to RGB.\n *\n * @param {Number} H the hue component\n * @param {Number} S the saturation component\n * @param {Number} L the luminance component\n * @return {Array} [R, G, B]\n *\n * @see https://www.easyrgb.com/en/math.php\n */\nexport function hsl2rgb(_H, _S, _L) {\n let R, G, B;\n\n const H = Math.max(0, Math.min(1, _H));\n const S = Math.max(0, Math.min(1, _S));\n const L = Math.max(0, Math.min(1, _L));\n\n if (S == 0) {\n R = L * 255;\n G = L * 255;\n B = L * 255;\n } else {\n let a, b;\n\n if (L < 0.5) {\n b = L * (1 + S);\n } else {\n b = L + S - S * L;\n }\n\n a = 2 * L - b;\n\n R = Math.floor(255 * h2rgb(a, b, H + 1 / 3));\n G = Math.floor(255 * h2rgb(a, b, H));\n B = Math.floor(255 * h2rgb(a, b, H - 1 / 3));\n }\n\n return [R, G, B];\n}\n\n/**\n * Convert an RGBcolor to HSL.\n *\n * @param {Number} R the red component\n * @param {Number} G the green component\n * @param {Number} B the blue component\n * @return {Array} [H, S, L]\n *\n * @see https://www.easyrgb.com/en/math.php\n */\nexport function rgb2hsl(_R, _G, _B) {\n let H, S, L;\n\n const R = Math.max(0, Math.min(255, _R));\n const G = Math.max(0, Math.min(255, _G));\n const B = Math.max(0, Math.min(255, _B));\n\n const r = R / 255;\n const g = G / 255;\n const b = B / 255;\n\n const var_min = Math.min(Math.min(r, g), b);\n const var_max = Math.max(Math.max(r, g), b);\n const del_max = var_max - var_min;\n\n L = (var_max + var_min) / 2;\n\n if (del_max === 0) {\n H = 0;\n S = 0;\n } else {\n if (L < 0.5) {\n S = del_max / (var_max + var_min);\n } else {\n S = del_max / (2 - var_max - var_min);\n }\n\n const del_r = ((var_max - r) / 6 + del_max / 2) / del_max;\n const del_g = ((var_max - g) / 6 + del_max / 2) / del_max;\n const del_b = ((var_max - b) / 6 + del_max / 2) / del_max;\n\n if (r == var_max) {\n H = del_b - del_g;\n } else if (g == var_max) {\n H = 1 / 3 + del_r - del_b;\n } else if (b == var_max) {\n H = 2 / 3 + del_g - del_r;\n }\n\n if (H < 0) {\n H += 1;\n } else if (H > 1) {\n H -= 1;\n }\n }\n\n return [H, S, L];\n}\n","/*!\n * PatternFly Elements: PfeAvatar 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement\";\nimport { hash } from \"./djb-hash.js\";\nimport { hsl2rgb, rgb2hsl } from \"./hslrgb.js\";\n\nclass PfeAvatar extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n\n`;\n }\n\n static get tag() {\n return \"pfe-avatar\";\n }\n\n static get properties() {\n return {\n name: {\n title: \"Username\",\n type: String,\n default: \"\",\n observer: \"_updateWhenConnected\",\n },\n src: {\n title: \"Avatar image URL\",\n type: String,\n observer: \"_updateWhenConnected\",\n },\n pattern: {\n title: \"Shape pattern\",\n type: String,\n default: PfeAvatar.patterns.squares,\n observer: \"_updateWhenConnected\",\n },\n // @TODO Deprecated pfe-name in 1.0\n oldName: {\n alias: \"name\",\n attr: \"pfe-name\",\n },\n // @TODO Deprecated pfe-src in 1.0\n oldSrc: {\n alias: \"src\",\n attr: \"pfe-src\",\n },\n // @TODO Deprecated pfe-pattern in 1.0\n oldPattern: {\n alias: \"pattern\",\n attr: \"pfe-pattern\",\n },\n };\n }\n\n get templateUrl() {\n return \"pfe-avatar.html\";\n }\n\n get styleUrl() {\n return \"pfe-avatar.scss\";\n }\n\n static get events() {\n return {\n connected: `${this.tag}:connected`,\n };\n }\n\n static get patterns() {\n return {\n triangles: \"triangles\",\n squares: \"squares\",\n };\n }\n\n static get defaultSize() {\n return 128;\n }\n\n static get defaultColors() {\n return \"#67accf #448087 #709c6b #a35252 #826cbb\";\n }\n\n get customColors() {\n return this.cssVariable(\"pfe-avatar--colors\");\n }\n\n constructor() {\n super(PfeAvatar);\n\n this._initCanvas = this._initCanvas.bind(this);\n }\n\n connectedCallback() {\n // initCanvas comes before parent's connectedCallback because the\n // connectedCallback sets attribute values, triggering, the observer\n // functions, which require the canvas to already be initialized.\n this._initCanvas();\n\n super.connectedCallback();\n\n this.emitEvent(PfeAvatar.events.connected, {\n bubbles: false,\n });\n }\n\n _initCanvas() {\n this._canvas = this.shadowRoot.querySelector(\"canvas\");\n const cssVarWidth = this.cssVariable(\"pfe-avatar--width\");\n const size = (cssVarWidth && cssVarWidth.replace(/px$/, \"\")) || PfeAvatar.defaultSize;\n this._canvas.width = size;\n this._canvas.height = size;\n\n this._squareSize = this._canvas.width / 8;\n this._triangleSize = this._canvas.width / 4;\n\n this._ctx = this._canvas.getContext(\"2d\");\n }\n\n static _registerColors() {\n this.colors = [];\n const contextColors = this.customColors || this.defaultColors;\n\n contextColors.split(/\\s+/).forEach((colorCode) => {\n let pattern;\n switch (colorCode.length) {\n case 4: // ex: \"#0fc\"\n pattern = /^#([A-f0-9])([A-f0-9])([A-f0-9])$/.exec(colorCode);\n if (pattern) {\n pattern.shift();\n const color = pattern.map((c) => parseInt(c + c, 16));\n this._registerColor(color);\n } else {\n this.log(`[pfe-avatar] invalid color ${colorCode}`);\n }\n break;\n case 7: // ex: \"#00ffcc\"\n pattern = /^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/.exec(colorCode);\n if (pattern) {\n pattern.shift();\n const color = pattern.map((c) => parseInt(c, 16));\n this._registerColor(color);\n } else {\n this.log(`[pfe-avatar] invalid color ${colorCode}`);\n }\n }\n });\n\n return this.colors;\n }\n\n static _registerColor(color) {\n PfeAvatar.colors.push({\n color1: `rgb(${color.join(\",\")})`,\n color2: `rgb(${this._adjustColor(color).join(\",\")})`,\n });\n }\n\n static _adjustColor(color) {\n const dark = 0.1;\n const l_adj = 0.1; // luminance adjustment\n const hsl = rgb2hsl(...color);\n\n // if luminance is too dark already, then lighten the alternate color\n // instead of darkening it.\n hsl[2] += hsl[2] > dark ? -l_adj : l_adj;\n\n return hsl2rgb(...hsl);\n }\n\n _updateWhenConnected() {\n if (this.hasAttribute(\"pfelement\")) {\n this.update();\n } else {\n this.addEventListener(PfeAvatar.events.connected, () => this.update());\n }\n }\n\n update() {\n // if we have a src element, update the img, otherwise update the random pattern\n if (this.src) {\n this.shadowRoot.querySelector(\"img\").src = this.src;\n } else {\n const bitPattern = hash(this.name).toString(2);\n const arrPattern = bitPattern.split(\"\").map((n) => Number(n));\n this._colorIndex = Math.floor((PfeAvatar.colors.length * parseInt(bitPattern, 2)) / Math.pow(2, 32));\n this.color1 = PfeAvatar.colors[this._colorIndex].color1;\n this.color2 = PfeAvatar.colors[this._colorIndex].color2;\n\n this._clear();\n this._drawBackground();\n if (this.pattern === PfeAvatar.patterns.squares) {\n this._drawSquarePattern(arrPattern);\n } else if (this.pattern === PfeAvatar.patterns.triangles) {\n this._drawTrianglePattern(arrPattern);\n }\n // this._drawGradient();\n }\n }\n\n _clear() {\n this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);\n }\n\n _drawBackground() {\n this._ctx.fillStyle = this.color1;\n this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);\n }\n\n _drawSquarePattern(pattern) {\n this._ctx.fillStyle = this.color2;\n if (this._ctx) {\n let i = pattern.length;\n while (i--) {\n if (pattern[i]) {\n this._drawMirroredSquare(i % 4, Math.floor(i / 4));\n }\n }\n }\n }\n\n /**\n * Draw a square at the given position, mirrored onto both the left and right half of the canvas.\n */\n _drawMirroredSquare(x, y) {\n if (this._ctx) {\n this._drawSquare(x, y);\n this._drawSquare(7 - x, y);\n }\n }\n\n _drawSquare(x, y) {\n this._ctx.fillRect(this._squareSize * x, this._squareSize * y, this._squareSize, this._squareSize);\n }\n\n _drawTrianglePattern(pattern) {\n this._ctx.fillStyle = this.color2;\n if (this._ctx) {\n let i = pattern.length;\n while (i--) {\n if (pattern[i]) {\n const x = Math.floor(i / 2) % 2;\n const y = Math.floor(i / 4);\n const alt = i % 4;\n\n const p1 = [x, y];\n const p2 = [x, y];\n const p3 = [x, y];\n\n switch (alt) {\n case 0:\n p2[1]++;\n p3[0]++;\n p3[1]++;\n break;\n case 1:\n p2[0]++;\n p3[0]++;\n p3[1]++;\n break;\n case 2:\n p2[0]++;\n p3[1]++;\n break;\n case 3:\n p1[0]++;\n p2[0]++;\n p2[1]++;\n p3[1]++;\n break;\n }\n\n this._drawMirroredTriangle(p1, p2, p3);\n }\n }\n }\n }\n\n /**\n * Draw a square at the given position in the top-left quadrant of the\n * canvas, and mirrored to the other three quadrants.\n */\n _drawMirroredTriangle(p1, p2, p3) {\n if (this._ctx) {\n this._drawTriangle(p1, p2, p3);\n this._drawTriangle([4 - p1[0], p1[1]], [4 - p2[0], p2[1]], [4 - p3[0], p3[1]]);\n }\n }\n\n _drawTriangle(p1, p2, p3) {\n this._ctx.beginPath();\n this._ctx.moveTo(...p1.map((c) => c * this._triangleSize));\n this._ctx.lineTo(...p2.map((c) => c * this._triangleSize));\n this._ctx.lineTo(...p3.map((c) => c * this._triangleSize));\n this._ctx.closePath();\n this._ctx.fill();\n this._ctx.fill();\n }\n\n _drawGradient() {\n const gradient = this._ctx.createLinearGradient(0, this._canvas.height, this._canvas.width, 0);\n const color = this.color2;\n let gradientColor1 = color;\n let gradientColor2 = color;\n if (/^#[A-f0-9]{3}$/.test(color)) {\n // color is of the form \"#fff\"\n gradientColor1 += \"c\";\n gradientColor2 += \"0\";\n } else if (/^#[A-f0-9]{6}$/.test(color)) {\n // color is of the form \"#ffffff\"\n gradientColor1 += \"cc\";\n gradientColor2 += \"00\";\n }\n gradient.addColorStop(0, gradientColor1);\n gradient.addColorStop(1, gradientColor2);\n gradient.addColorStop(1, gradientColor1);\n this._ctx.fillStyle = gradient;\n this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height);\n }\n}\n\nPfeAvatar._registerColors();\n\nPFElement.create(PfeAvatar);\n\nexport default PfeAvatar;\n","/**\n * djb2 string hashing function.\n *\n * @see http://www.cse.yorku.ca/~oz/hash.html\n * @param {String} str the string to hash.\n * @return {Number} a positive integer\n */\n\nfunction hash(str) {\n let hash = 5381;\n let i = str.length;\n\n while (i) {\n hash = (hash * 33) ^ str.charCodeAt(--i);\n }\n\n return hash >>> 0;\n}\n\nexport { hash };\n"],"names":["h2rgb","v1","v2","vH","PfeAvatar","PFElement","this","cssVariable","String","patterns","squares","tag","_initCanvas","emitEvent","events","connected","_canvas","shadowRoot","querySelector","cssVarWidth","size","replace","defaultSize","width","height","_squareSize","_triangleSize","_ctx","getContext","hasAttribute","update","addEventListener","_this2","bitPattern","arrPattern","src","str","hash","i","length","charCodeAt","name","toString","split","map","n","Number","_colorIndex","Math","floor","colors","parseInt","pow","color1","color2","_clear","_drawBackground","pattern","_drawSquarePattern","triangles","_drawTrianglePattern","clearRect","fillStyle","fillRect","_drawMirroredSquare","x","y","_drawSquare","p1","p2","p3","_drawMirroredTriangle","_drawTriangle","beginPath","moveTo","c","_this3","lineTo","closePath","fill","gradient","createLinearGradient","color","gradientColor1","gradientColor2","test","addColorStop","customColors","defaultColors","forEach","colorCode","exec","shift","_registerColor","log","push","join","_adjustColor","hsl","_R","_G","_B","H","S","r","max","min","g","b","var_min","var_max","del_max","L","del_r","del_g","del_b","_H","_S","_L","R","G","B","a","_this","bind","_registerColors","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-avatar/package.json b/elements/pfe-avatar/package.json index 24ef64246f..d71d7612cb 100644 --- a/elements/pfe-avatar/package.json +++ b/elements/pfe-avatar/package.json @@ -5,7 +5,7 @@ "elementName": "pfe-avatar", "preview": "squares.png" }, - "version": "1.12.2", + "version": "1.12.3", "description": "Avatar for PatternFly Elements", "keywords": [ "web-components", @@ -44,10 +44,10 @@ ], "license": "MIT", "devDependencies": { - "@patternfly/pfe-sass": "^1.12.2" + "@patternfly/pfe-sass": "^1.12.3" }, "dependencies": { - "@patternfly/pfelement": "^1.12.2" + "@patternfly/pfelement": "^1.12.3" }, "generator-pfelement-version": "0.6.8", "bugs": { diff --git a/elements/pfe-badge/dist/pfe-badge.css.map b/elements/pfe-badge/dist/pfe-badge.css.map new file mode 100644 index 0000000000..07789e2409 --- /dev/null +++ b/elements/pfe-badge/dist/pfe-badge.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["pfe-badge.scss","pfe-badge.css","../../pfe-sass/functions/_custom-properties.scss","../../pfe-sass/mixins/_custom-properties.scss"],"names":[],"mappings":"AAkBA;EACE,qBAAqB;EACrB,6BAAiD;EAAjD,4DAAiD;EACjD,kBAAkB;EAClB,kCAAkC;ACjBpC;;ADoBA;EACE,yBEqDkC;EFrDlC,kHEqDkC;EFpDlC,6BEoDkC;EFpDlC,kGEoDkC;EFnDlC,cEmDkC;EFnDlC,sEEmDkC;EFlDlC,4BEkDkC;EFlDlC,qFEkDkC;EFjDlC,gBEiDkC;EFjDlC,wFEiDkC;EFhDlC,wBEgDkC;EFhDlC,wFEgDkC;EF/ClC,4BE+CkC;EF/ClC,gGE+CkC;EF9ClC,6BE8CkC;EF9ClC,kGE8CkC;EF7ClC,sBAAwB;ACjB1B;;ADqBE;EG8DI,kFAA8C;EAA9C,gEAA8C;AF9EpD;;ADgBE;EG8DI,mFAA8C;EAA9C,gEAA8C;AFzEpD;;ADWE;EG8DI,kFAA8C;EAA9C,gEAA8C;AFpEpD;;ADME;EG8DI,iFAA8C;EAA9C,gEAA8C;AF/DpD;;ADCE;EG8DI,2EAA8C;EAA9C,gEAA8C;AF1DpD;;ADYA;EACE,aAAa;ACTf","file":"pfe-badge.css","sourcesContent":["@import \"../../pfe-sass/pfe-sass\";\n$LOCAL: badge;\n\n$LOCAL-VARIABLES: (\n BackgroundColor: pfe-var(feedback--default--lightest),\n BorderRadius: calc(#{pfe-var(ui--border-radius)} * 30),\n\n Color: pfe-var(text),\n\n FontSize: calc(#{pfe-var(font-size)} * 0.75),\n FontWeight: pfe-var(font-weight--semi-bold),\n\n MinWidth: calc(#{pfe-var(ui--border-width)} * 2),\n\n PaddingLeft: calc(#{pfe-var(container-padding)} / 2),\n PaddingRight: calc(#{pfe-var(container-padding)} / 2)\n);\n\n:host {\n display: inline-block;\n line-height: calc(#{pfe-var(line-height)} * 0.75);\n text-align: center;\n text-rendering: optimizelegibility;\n}\n\nspan {\n background-color: pfe-local(BackgroundColor);\n border-radius: pfe-local(BorderRadius);\n color: pfe-local(Color);\n font-size: pfe-local(FontSize);\n font-weight: pfe-local(FontWeight);\n min-width: pfe-local(MinWidth);\n padding-left: pfe-local(PaddingLeft);\n padding-right: pfe-local(PaddingRight);\n vertical-align: middle;\n}\n\n@each $state in (moderate, important, critical, success, info) {\n :host([state=\"#{$state}\"]) {\n $state: (\n BackgroundColor: pfe-var(feedback--#{$state}),\n Color: pfe-var(text--on-dark)\n );\n\n @if ($state == 'moderate') {\n $state: map-merge($state, (Color: pfe-var(text)));\n }\n\n span {\n @include pfe-print-local($state);\n }\n }\n}\n\n:host([hidden]) {\n display: none;\n}\n",":host {\n display: inline-block;\n line-height: calc(var(--pfe-theme--line-height, 1.5) * 0.75);\n text-align: center;\n text-rendering: optimizelegibility;\n}\n\nspan {\n background-color: var(--pfe-badge--BackgroundColor, var(--pfe-theme--color--feedback--default--lightest, #f0f0f0));\n border-radius: var(--pfe-badge--BorderRadius, calc(var(--pfe-theme--ui--border-radius, 2px) * 30));\n color: var(--pfe-badge--Color, var(--pfe-theme--color--text, #151515));\n font-size: var(--pfe-badge--FontSize, calc(var(--pfe-theme--font-size, 1rem) * 0.75));\n font-weight: var(--pfe-badge--FontWeight, var(--pfe-theme--font-weight--semi-bold, 600));\n min-width: var(--pfe-badge--MinWidth, calc(var(--pfe-theme--ui--border-width, 1px) * 2));\n padding-left: var(--pfe-badge--PaddingLeft, calc(var(--pfe-theme--container-padding, 1rem) / 2));\n padding-right: var(--pfe-badge--PaddingRight, calc(var(--pfe-theme--container-padding, 1rem) / 2));\n vertical-align: middle;\n}\n\n:host([state=\"moderate\"]) span {\n --pfe-badge--BackgroundColor: var(--pfe-theme--color--feedback--moderate, #f0ab00);\n --pfe-badge--Color: var(--pfe-theme--color--text--on-dark, #fff);\n}\n\n:host([state=\"important\"]) span {\n --pfe-badge--BackgroundColor: var(--pfe-theme--color--feedback--important, #c9190b);\n --pfe-badge--Color: var(--pfe-theme--color--text--on-dark, #fff);\n}\n\n:host([state=\"critical\"]) span {\n --pfe-badge--BackgroundColor: var(--pfe-theme--color--feedback--critical, #a30000);\n --pfe-badge--Color: var(--pfe-theme--color--text--on-dark, #fff);\n}\n\n:host([state=\"success\"]) span {\n --pfe-badge--BackgroundColor: var(--pfe-theme--color--feedback--success, #3e8635);\n --pfe-badge--Color: var(--pfe-theme--color--text--on-dark, #fff);\n}\n\n:host([state=\"info\"]) span {\n --pfe-badge--BackgroundColor: var(--pfe-theme--color--feedback--info, #06c);\n --pfe-badge--Color: var(--pfe-theme--color--text--on-dark, #fff);\n}\n\n:host([hidden]) {\n display: none;\n}\n","////\n/// Tools for leveraging custom property stacks\n/// @group custom-properties\n/// @author castastrophe\n////\n\n/// Get full theme stack with a fallback from the provided map - used by pfe-var and pfe-zindex\n/// @param {String} $category - Category name to be appended to variables within the map/system\n/// @param {String} $key - Variable name to be used and prepended with --pfe-theme\n/// @param {Map} $map - Sass map of variables\n/// @param {String} $fallback [null] - Optional fallback override\n/// @param {Boolean} $use-fallback [true] - Optional hook to return a stack with no fallback value\n/// @requires $custom-prop-prefix\n/// @return {String} theme stack with fallback value from a sass map\n@function pfe-get-from-map($category, $key, $map, $fallback: null, $prefix: \"#{$custom-prop-prefix}-theme\", $use-fallback: true) {\n // Start building the variable declaration\n $var-declaration: \"--#{$prefix}--\";\n @if $prefix == \"pf-c\" {\n $var-declaration: \"--#{$prefix}-\"; // one dash at the end\n }\n // If the category exists, inject that into the string\n @if $category != \"\" {\n $var-declaration: \"#{$var-declaration}#{$category}--\";\n }\n // Append the key to the string\n $var-declaration: \"#{$var-declaration}#{$key}\";\n\n // If the fallback is not provided but use-fallback is set to true\n @if $fallback == null and $use-fallback and map-get($map, $key) != null {\n $fallback: map-get($map, $key);\n }\n @if $fallback != null {\n // Create the variable declaration\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration}); \n}\n\n\n\n/// Returns CSS Var for the local component-scoped variable\n/// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--'\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $custom-prop-prefix\n/// @see $LOCAL\n/// @example\n/// :host {\n/// padding-top: #{pfe-local(paddingTop)};\n/// padding-bottom: #{pfe-local(paddingBottom)};\n/// }\n@function pfe-local($cssvar, $fallback: null, $region: null) {\n // If a fallback is not defined, use the global variables map\n @if $fallback == null and length($LOCAL-VARIABLES) > 0 {\n @if $region == null {\n $fallback: map-get($LOCAL-VARIABLES, $cssvar);\n }\n @else {\n $submap: map-get($LOCAL-VARIABLES, $region);\n @if type-of($submap) == \"map\" {\n $fallback: map-deep-get($LOCAL-VARIABLES, $region, $cssvar);\n }\n }\n }\n\n // If a region value exists, build the region string\n @if $region != null {\n $region: \"__#{$region}\";\n }\n\n // Start building the variable declaration\n $var-declaration: \"--#{$custom-prop-prefix}-#{$LOCAL}#{$region}--#{to-string($cssvar, '--')}\";\n \n @if $fallback != null {\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration});\n}\n\n/// Fetches a CSS variable stack for broadcasted variables, providing a hook for context\n/// to influence the styles of children elements such as p tags or links.\n/// @param {String} $broadcast - name of the broadcast variable to apply\n/// @requires {String} $custom-prop-prefix - Name of repo, which is \"pfe\"\n/// @example - scss\n/// :host {\n/// color: pfe-broadcasted(link);\n/// }\n/// @example - css\n/// :host {\n/// color: var(--pfe-broadcasted--link, #06c);\n/// }\n@function pfe-broadcasted($broadcast, $use-fallback: true) {\n $fallback: \"\";\n @if $use-fallback {\n $fallback: \", #{map-get($pfe-broadcasted, #{to-string($broadcast,'--')})}\";\t\n }\n @if not index($BROADCAST-VARS, first(str-split($broadcast, '--'))) {\n @error \"--#{$custom-prop-prefix}-broadcasted--#{$broadcast} variable is not currently supported.\";\n }\n @else {\n @return var(--#{$custom-prop-prefix}-broadcasted--#{to-string($broadcast,'--')}#{unquote($fallback)});\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme--zindex\n/// @requires {Map} $pfe-zindex - SASS Map of z-index values\n/// @see $pfe-zindex\n/// @example - scss - In your component styles\n/// .my-element {\n/// z-index: pfe-zindex( content );\n/// }\n\n@function pfe-zindex($cssvar) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-zindex, $var-name) != null {\n @return pfe-get-from-map(\"zindex\", $var-name, $pfe-zindex);\n }\n @else {\n @error \"The key for #{$var-name} could not be found in the $pfe-zindex map.\";\n }\n}\n\n/// Returns the value (only) of a property from the respective maps\n/// Similar to pfe-var, but does not include css variable in the compiled CSS\n/// @param {String} $name - Name of the key for the map\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example - scss - In your component styles\n/// .my-element {\n/// background-color: pfe-fetch( ui-base );\n/// }\n@function pfe-fetch($name, $region: null) {\n $var-name: to-string($name, \"--\");\n @if $region != null and map-deep-get($LOCAL-VARIABLES, $region, $var-name) != null {\n @return map-deep-get($LOCAL-VARIABLES, $region, $var-name);\n }\n @else if $region == null and map-get($LOCAL-VARIABLES, $var-name) != null {\n @return map-get($LOCAL-VARIABLES, $var-name);\n }\n @else if map-get($pfe-vars, $var-name) != null {\n @return map-get($pfe-vars, $var-name);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return map-get($pfe-colors, $var-name);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return map-get($pfe-broadcasted, $var-name);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return map-get($pfe-typography-base, $var-name);\n }\n\n // PATTERNFLY CORE\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return map-get($pf-type-sizing, $var-name);\n }\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return map-get($pf-type-sizing--component, $var-name);\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return map-get($pf-type-sizing--modifers, $var-name);\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return map-get($pf-type-sizing--content, $var-name);\n }\n // DEPRECATED\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return map-get($pfe-typography-base-deprecated, $var-name);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return map-get($pfe-typography-deprecated, $var-name);\n }\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme\n/// @param {String} $fallback [null] - Optional custom fallback\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example scss - In your component styles\n/// .my-element {\n/// padding: pfe-var( container-spacer );\n/// font-size: pfe-var( font-size );\n/// }\n/// @example - css Rendered output\n/// .my-element {\n/// padding: var(--pfe-theme--container-spacer, 16px);\n/// font-size: var(--pfe-theme--font-size, 16px);\n/// }\n@function pfe-var($cssvar, $fallback: null) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-vars, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-vars, $fallback);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return pfe-get-from-map(\"color\", $var-name, $pfe-colors, $fallback);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-broadcasted);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base, $fallback);\n }\n // PATTERNFLY CORE:\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing, $fallback, $prefix: \"pf-global\");\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--modifers, $fallback, $prefix: \"pf-c\");\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--content, $fallback, $prefix: \"pf-c\");\n }\n // PFE components (must be below core)\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--component, $fallback);\n }\n\n // DEPRECATED:\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base-deprecated, $fallback);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-deprecated, $fallback);\n }\n\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}","////\n/// Tools for leveraging custom property stacks\n/// @group custom-properties\n/// @author castastrophe\n////\n\n/// This will print all the broadcast variables, and set the value to the context of your choosing, like on-dark or on-saturated.\n/// @param {String} $context - Look up values from contexts, i.e. \"light\" or \"saturated\"\n/// @param {List | String} $broadcast [$BROADCAST-VARS] - Optionally specify only one broadcast variable instead of the whole set, i.e. \"text\"\n/// @see $custom-prop-prefix\n/// @see $BROADCAST-VARS\n/// @example - scss - Usage in a container component, i.e. pfe-card\n/// :host {\n/// @include pfe-set-broadcast-context(dark);\n/// }\n/// @example - css - Rendered output\n/// :host {\n/// --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff);\n/// --pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #99ccff);\n/// --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #cce6ff);\n/// --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #cce6ff);\n/// --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #b38cd9);\n/// --pfe-broadcasted--link-decoration: none;\n/// --pfe-broadcasted--link-decoration--hover: underline;\n/// --pfe-broadcasted--link-decoration--focus: underline;\n/// --pfe-broadcasted--link-decoration--visited: none;\n/// }\n///\n@mixin pfe-set-broadcast-context($context, $broadcast: $BROADCAST-VARS) {\n @each $type in $broadcast {\n $list: ();\n $string: \"\";\n $context_string: \"\";\n $state: \"\";\n\n @if str-starts-with($type, \"link\") {\n $list: append($list, \"#{$type}\");\n\n @each $s in (hover, focus, visited) {\n $state: \"--#{$s}\";\n $string: \"#{$type}#{$state}\";\n\n @if not index($list, $string) {\n $list: append($list, \"#{$type}#{$state}\");\n }\n }\n } @else {\n @if not index($list, $string) {\n $list: append($list, \"#{$type}\");\n }\n }\n\n @if index($CONTEXTS, $context) != null {\n @if $context != \"light\" {\n $context_string: \"--on-#{$context}\";\n }\n }\n\n @each $item in $list {\n @if not index($BROADCAST-VARS, $type) {\n @warn \"--#{$custom-prop-prefix}-broadcasted--#{$item} variable is not in the $BROADCAST-VARS list.\";\n } @else if not pfe-broadcasted(#{$item}#{$context_string}) {\n @warn \"#{$item}#{$context_string} value does not currently exist.\";\n } @else {\n @if index($CONTEXTS, $context) != null {\n --#{$custom-prop-prefix}-broadcasted--#{$item}: #{pfe-var(#{$item}#{$context_string})};\n } @else {\n @error \"The #{$context} context does not appear to be part of a supported context.\";\n }\n }\n }\n }\n}\n\n/// Returns CSS Variable for the local component-scoped variable\n/// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--'\n/// @param {String} $value - The value of the css variable being defined\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $custom-prop-prefix\n/// @see $LOCAL\n/// @example - scss\n/// :host {\n/// padding-top: pfe-local(paddingTop);\n/// padding-bottom: pfe-local(paddingBottom);\n/// }\n@mixin pfe-print-local($map: $LOCAL-VARIABLES) {\n @each $property, $value in $map {\n $name: \"--#{$property}\";\n $styles: $value;\n\n @if type-of($value) == \"map\" {\n @each $prop, $v in $value {\n $name: \"__#{$property}--#{$prop}\";\n $styles: $v;\n\n // Print the variable definition\n --#{$custom-prop-prefix}-#{$LOCAL}#{$name}: #{$styles};\n }\n } @else {\n // Print the variable definition\n --#{$custom-prop-prefix}-#{$LOCAL}#{$name}: #{$styles};\n }\n }\n}\n\n/// Surface properties\n/// This mixin creates an attribute for all the surface colors, then prints the local background color variable for the component, with the correct context colors.\n/// @param {List | String} $surfaces [$SURFACES] - defaults to the global $SURFACES list of all supported colors\n/// @param {String} $attr-name [pfe-var] - defaults to pfe-var, optionally pass in a custom name for the data attribute\n/// @example - scss - In your component stylesheet\n/// $LOCAL: band;\n/// @include pfe-surfaces;\n/// @example - css - Rendered result\n/// :host([color=\"darker\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--darker, #464646);\n/// --context: dark;\n/// }\n/// :host([color=\"darkest\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--darkest, #131313);\n/// --context: dark;\n/// }\n/// :host([color=\"base\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--base, #dfdfdf);\n/// --context: light;\n/// }\n/// :host([color=\"lighter\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--lighter, #ececec);\n/// --context: light;\n/// }\n/// :host([color=\"lightest\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--lightest, #fff);\n/// --context: light;\n/// }\n/// :host([color=\"accent\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--accent, #ee0000);\n/// --context: saturated;\n/// }\n/// :host([color=\"complement\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--complement, #0477a4);\n/// --context: saturated;\n/// }\n@mixin pfe-surfaces($surfaces: $SURFACE, $attr-name: color) {\n @each $color in $surfaces {\n $context: #{pfe-get-context(surface--#{$color}--context)};\n :host([#{$attr-name}=\"#{$color}\"]) {\n @include pfe-print-local(\n (\n BackgroundColor: pfe-var(surface--#{$color}),\n context: pfe-var(surface--#{$color}--context, #{$context})\n )\n );\n @extend %fallback-surface;\n }\n }\n}\n\n/// Prints the `on` attribute with IE11 fallbacks\n/// @param {List} contexts [$CONTEXTS] - defaults to the global $CONTEXTS list of all supported contexts\n/// @param {Boolean} ie-fallback [true] - defaults to true, prints IE11 fallbacks\n/// @example - scss - In your component styles\n/// @include pfe-contexts; // imports on=\"light\" etc support\n/// @example - css - Rendered outputs\n/// :host([on=\"dark\"]) {\n/// --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff);\n/// --pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #99ccff);\n/// --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #cce6ff);\n/// --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #cce6ff);\n/// --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #b38cd9);\n/// --pfe-broadcasted--link-decoration: none;\n/// --pfe-broadcasted--link-decoration--hover: underline;\n/// --pfe-broadcasted--link-decoration--focus: underline;\n/// --pfe-broadcasted--link-decoration--visited: none;\n/// }\n/// @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { /* IE10+ */\n/// :host([on=\"dark\"]) {\n/// color: #fff;\n/// color: var(--pfe-theme--color--text--on-dark, #fff);\n/// }\n/// }\n/// // ...as well as all the values for :host([on=\"saturated\"]) and :host([on=\"light\"])\n@mixin pfe-contexts($contexts: $CONTEXTS, $ie-fallback: true) {\n // Helper attributes to aid in theming\n @each $context in $contexts {\n :host([on=\"#{$context}\"]) {\n @include pfe-set-broadcast-context($context);\n }\n }\n @if $ie-fallback {\n :host {\n @extend %fallback-text;\n }\n }\n}\n"],"sourceRoot":"../src"} \ No newline at end of file diff --git a/elements/pfe-badge/dist/pfe-badge.js b/elements/pfe-badge/dist/pfe-badge.js new file mode 100644 index 0000000000..ca0123eb83 --- /dev/null +++ b/elements/pfe-badge/dist/pfe-badge.js @@ -0,0 +1,109 @@ +import PFElement from '../../pfelement/dist/pfelement.js'; + +/*! + * PatternFly Elements: PfeBadge 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * +*/ + +class PfeBadge extends PFElement { + + // Injected at build-time + static get version() { + return "1.12.3"; + } + + // Injected at build-time + get html() { + return ` + +`; + } + + static get tag() { + return "pfe-badge"; + } + + get templateUrl() { + return "pfe-badge.html"; + } + + get styleUrl() { + return "pfe-badge.scss"; + } + + static get properties() { + return { + state: { + title: "State", + type: String, + values: ["default", "moderate", "important", "critical", "success", "info"], + default: "default", + }, + // @TODO: Deprecated property in 1.0 + pfeState: { + type: String, + prefix: false, + alias: "state", + }, + number: { + title: "Number", + type: Number, + observer: "_numberChanged", + }, + threshold: { + title: "Threshold", + type: Number, + observer: "_thresholdChanged", + }, + // @TODO: Deprecated property in 1.0 + pfeThreshold: { + type: Number, + alias: "threshold", + prefix: false, + }, + }; + } + + constructor() { + super(PfeBadge); + this._textContainer = this.shadowRoot.querySelector("span"); + } + + attributeChangedCallback(attr, oldVal, newVal) { + super.attributeChangedCallback(...arguments); + this._textContainer.textContent = this.textContent; + } + + _thresholdChanged(oldVal, newVal) { + this.textContent = Number(this.threshold) < Number(this.textContent) ? `${this.threshold}+` : this.textContent; + } + + _numberChanged(oldVal, newVal) { + this.textContent = this.threshold && Number(this.threshold) < Number(newVal) ? `${this.threshold}+` : newVal; + } +} + +PFElement.create(PfeBadge); + +export default PfeBadge; +//# sourceMappingURL=pfe-badge.js.map diff --git a/elements/pfe-badge/dist/pfe-badge.js.map b/elements/pfe-badge/dist/pfe-badge.js.map new file mode 100644 index 0000000000..51c7869683 --- /dev/null +++ b/elements/pfe-badge/dist/pfe-badge.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-badge.js","sources":["../_temp/pfe-badge.js"],"sourcesContent":["/*!\n * PatternFly Elements: PfeBadge 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement.js\";\n\nclass PfeBadge extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n`;\n }\n\n static get tag() {\n return \"pfe-badge\";\n }\n\n get templateUrl() {\n return \"pfe-badge.html\";\n }\n\n get styleUrl() {\n return \"pfe-badge.scss\";\n }\n\n static get properties() {\n return {\n state: {\n title: \"State\",\n type: String,\n values: [\"default\", \"moderate\", \"important\", \"critical\", \"success\", \"info\"],\n default: \"default\",\n },\n // @TODO: Deprecated property in 1.0\n pfeState: {\n type: String,\n prefix: false,\n alias: \"state\",\n },\n number: {\n title: \"Number\",\n type: Number,\n observer: \"_numberChanged\",\n },\n threshold: {\n title: \"Threshold\",\n type: Number,\n observer: \"_thresholdChanged\",\n },\n // @TODO: Deprecated property in 1.0\n pfeThreshold: {\n type: Number,\n alias: \"threshold\",\n prefix: false,\n },\n };\n }\n\n constructor() {\n super(PfeBadge);\n this._textContainer = this.shadowRoot.querySelector(\"span\");\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n super.attributeChangedCallback(...arguments);\n this._textContainer.textContent = this.textContent;\n }\n\n _thresholdChanged(oldVal, newVal) {\n this.textContent = Number(this.threshold) < Number(this.textContent) ? `${this.threshold}+` : this.textContent;\n }\n\n _numberChanged(oldVal, newVal) {\n this.textContent = this.threshold && Number(this.threshold) < Number(newVal) ? `${this.threshold}+` : newVal;\n }\n}\n\nPFElement.create(PfeBadge);\n\nexport default PfeBadge;\n"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-badge/dist/pfe-badge.json b/elements/pfe-badge/dist/pfe-badge.json new file mode 100644 index 0000000000..247b269fc0 --- /dev/null +++ b/elements/pfe-badge/dist/pfe-badge.json @@ -0,0 +1,42 @@ +{ + "$schema": "http://json-schema.org/draft-04/schema#", + "title": "Badge", + "description": "This element creates a badge with a numerical value.", + "type": "object", + "tag": "pfe-badge", + "class": "pfe-badge", + "category": "content", + "properties": { + "slots": { + "title": "Slots", + "description": "Definition of the supported slots", + "type": "object", + "properties": {} + }, + "attributes": { + "title": "Attributes", + "type": "object", + "properties": { + "state": { + "title": "Background color", + "type": "string", + "enum": ["default", "moderate", "important", "critical", "success", "info"], + "default": "default", + "prefixed": true + }, + "number": { + "title": "Numeric Value", + "type": "number", + "prefixed": false + }, + "pfe-threshold": { + "title": "Threshold Value", + "type": "number", + "prefixed": false + } + } + } + }, + "required": ["slots", "attributes"], + "additionalProperties": false +} diff --git a/elements/pfe-badge/dist/pfe-badge.min.css.map b/elements/pfe-badge/dist/pfe-badge.min.css.map new file mode 100644 index 0000000000..e393d86102 --- /dev/null +++ b/elements/pfe-badge/dist/pfe-badge.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../src/pfe-badge.scss","../../../pfe-sass/mixins/_custom-properties.scss"],"names":[],"mappings":"AAkBA,MACE,QAAA,aACA,YAAA,gBAAA,YAAA,8CACA,WAAA,OACA,eAAA,mBAGF,KACE,iBAAA,QAAA,iBAAA,+FACA,cAAA,eAAA,cAAA,kFACA,MAAA,QAAA,MAAA,8DACA,UAAA,iBAAA,UAAA,wEACA,YAAA,IAAA,YAAA,0EACA,UAAA,cAAA,UAAA,4EACA,aAAA,eAAA,aAAA,gFACA,cAAA,eAAA,cAAA,iFACA,eAAA,OAIA,6BC8DI,6BAAA,qDAAA,mBAAA,6CD9DJ,8BC8DI,6BAAA,sDAAA,mBAAA,6CD9DJ,6BC8DI,6BAAA,qDAAA,mBAAA,6CD9DJ,4BC8DI,6BAAA,oDAAA,mBAAA,6CD9DJ,yBC8DI,6BAAA,8CAAA,mBAAA,6CD9CN,gBACE,QAAA","file":"pfe-badge.min.css","sourceRoot":"../src","sourcesContent":[]} \ No newline at end of file diff --git a/elements/pfe-badge/dist/pfe-badge.min.js b/elements/pfe-badge/dist/pfe-badge.min.js new file mode 100644 index 0000000000..704ccd9ea7 --- /dev/null +++ b/elements/pfe-badge/dist/pfe-badge.min.js @@ -0,0 +1,26 @@ +import e from"../../pfelement/dist/pfelement.min.js"; +/*! + * PatternFly Elements: PfeBadge 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * +*/class t extends e{static get version(){return"1.12.3"}get html(){return"\n\n"}static get tag(){return"pfe-badge"}get templateUrl(){return"pfe-badge.html"}get styleUrl(){return"pfe-badge.scss"}static get properties(){return{state:{title:"State",type:String,values:["default","moderate","important","critical","success","info"],default:"default"},pfeState:{type:String,prefix:!1,alias:"state"},number:{title:"Number",type:Number,observer:"_numberChanged"},threshold:{title:"Threshold",type:Number,observer:"_thresholdChanged"},pfeThreshold:{type:Number,alias:"threshold",prefix:!1}}}constructor(){super(t),this._textContainer=this.shadowRoot.querySelector("span")}attributeChangedCallback(e,t,r){super.attributeChangedCallback(...arguments),this._textContainer.textContent=this.textContent}_thresholdChanged(e,t){this.textContent=Number(this.threshold):host{display:inline-block;line-height:calc(1.5 * .75);line-height:calc(var(--pfe-theme--line-height,1.5) * .75);text-align:center;text-rendering:optimizelegibility}span{background-color:#f0f0f0;background-color:var(--pfe-badge--BackgroundColor,var(--pfe-theme--color--feedback--default--lightest,#f0f0f0));border-radius:calc(2px * 30);border-radius:var(--pfe-badge--BorderRadius,calc(var(--pfe-theme--ui--border-radius,2px) * 30));color:#151515;color:var(--pfe-badge--Color,var(--pfe-theme--color--text,#151515));font-size:calc(1rem * .75);font-size:var(--pfe-badge--FontSize,calc(var(--pfe-theme--font-size,1rem) * .75));font-weight:600;font-weight:var(--pfe-badge--FontWeight,var(--pfe-theme--font-weight--semi-bold,600));min-width:calc(1px * 2);min-width:var(--pfe-badge--MinWidth,calc(var(--pfe-theme--ui--border-width,1px) * 2));padding-left:calc(1rem / 2);padding-left:var(--pfe-badge--PaddingLeft,calc(var(--pfe-theme--container-padding,1rem)/ 2));padding-right:calc(1rem / 2);padding-right:var(--pfe-badge--PaddingRight,calc(var(--pfe-theme--container-padding,1rem)/ 2));vertical-align:middle}:host([state=moderate]) span{--pfe-badge--BackgroundColor:var(--pfe-theme--color--feedback--moderate, #f0ab00);--pfe-badge--Color:var(--pfe-theme--color--text--on-dark, #fff)}:host([state=important]) span{--pfe-badge--BackgroundColor:var(--pfe-theme--color--feedback--important, #c9190b);--pfe-badge--Color:var(--pfe-theme--color--text--on-dark, #fff)}:host([state=critical]) span{--pfe-badge--BackgroundColor:var(--pfe-theme--color--feedback--critical, #a30000);--pfe-badge--Color:var(--pfe-theme--color--text--on-dark, #fff)}:host([state=success]) span{--pfe-badge--BackgroundColor:var(--pfe-theme--color--feedback--success, #3e8635);--pfe-badge--Color:var(--pfe-theme--color--text--on-dark, #fff)}:host([state=info]) span{--pfe-badge--BackgroundColor:var(--pfe-theme--color--feedback--info, #06c);--pfe-badge--Color:var(--pfe-theme--color--text--on-dark, #fff)}:host([hidden]){display:none} /*# sourceMappingURL=pfe-badge.min.css.map */\n`;\n }\n\n static get tag() {\n return \"pfe-badge\";\n }\n\n get templateUrl() {\n return \"pfe-badge.html\";\n }\n\n get styleUrl() {\n return \"pfe-badge.scss\";\n }\n\n static get properties() {\n return {\n state: {\n title: \"State\",\n type: String,\n values: [\"default\", \"moderate\", \"important\", \"critical\", \"success\", \"info\"],\n default: \"default\",\n },\n // @TODO: Deprecated property in 1.0\n pfeState: {\n type: String,\n prefix: false,\n alias: \"state\",\n },\n number: {\n title: \"Number\",\n type: Number,\n observer: \"_numberChanged\",\n },\n threshold: {\n title: \"Threshold\",\n type: Number,\n observer: \"_thresholdChanged\",\n },\n // @TODO: Deprecated property in 1.0\n pfeThreshold: {\n type: Number,\n alias: \"threshold\",\n prefix: false,\n },\n };\n }\n\n constructor() {\n super(PfeBadge);\n this._textContainer = this.shadowRoot.querySelector(\"span\");\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n super.attributeChangedCallback(...arguments);\n this._textContainer.textContent = this.textContent;\n }\n\n _thresholdChanged(oldVal, newVal) {\n this.textContent = Number(this.threshold) < Number(this.textContent) ? `${this.threshold}+` : this.textContent;\n }\n\n _numberChanged(oldVal, newVal) {\n this.textContent = this.threshold && Number(this.threshold) < Number(newVal) ? `${this.threshold}+` : newVal;\n }\n}\n\nPFElement.create(PfeBadge);\n\nexport default PfeBadge;\n"],"names":["PfeBadge","PFElement","version","html","tag","templateUrl","styleUrl","properties","state","title","type","String","values","default","pfeState","prefix","alias","number","Number","observer","threshold","pfeThreshold","[object Object]","super","this","_textContainer","shadowRoot","querySelector","attr","oldVal","newVal","attributeChangedCallback","arguments","textContent","create"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EA2BA,MAAMA,UAAiBC,EAGrBC,qBACE,MAAO,SAITC,WACE,MAAO,4hEAKTC,iBACE,MAAO,YAGTC,kBACE,MAAO,iBAGTC,eACE,MAAO,iBAGTC,wBACE,MAAO,CACLC,MAAO,CACLC,MAAO,QACPC,KAAMC,OACNC,OAAQ,CAAC,UAAW,WAAY,YAAa,WAAY,UAAW,QACpEC,QAAS,WAGXC,SAAU,CACRJ,KAAMC,OACNI,QAAQ,EACRC,MAAO,SAETC,OAAQ,CACNR,MAAO,SACPC,KAAMQ,OACNC,SAAU,kBAEZC,UAAW,CACTX,MAAO,YACPC,KAAMQ,OACNC,SAAU,qBAGZE,aAAc,CACZX,KAAMQ,OACNF,MAAO,YACPD,QAAQ,IAKdO,cACEC,MAAMvB,GACNwB,KAAKC,eAAiBD,KAAKE,WAAWC,cAAc,QAGtDL,yBAAyBM,EAAMC,EAAQC,GACrCP,MAAMQ,4BAA4BC,WAClCR,KAAKC,eAAeQ,YAAcT,KAAKS,YAGzCX,kBAAkBO,EAAQC,GACxBN,KAAKS,YAAcf,OAAOM,KAAKJ,WAAaF,OAAOM,KAAKS,aAAkBT,KAAKJ,UAAR,IAAuBI,KAAKS,YAGrGX,eAAeO,EAAQC,GACrBN,KAAKS,YAAcT,KAAKJ,WAAaF,OAAOM,KAAKJ,WAAaF,OAAOY,GAAaN,KAAKJ,UAAR,IAAuBU,GAI1G7B,EAAUiC,OAAOlC"} \ No newline at end of file diff --git a/elements/pfe-badge/dist/pfe-badge.umd.js b/elements/pfe-badge/dist/pfe-badge.umd.js new file mode 100644 index 0000000000..4818550773 --- /dev/null +++ b/elements/pfe-badge/dist/pfe-badge.umd.js @@ -0,0 +1,210 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('../../pfelement/dist/pfelement.umd')) : + typeof define === 'function' && define.amd ? define(['../../pfelement/dist/pfelement.umd'], factory) : + (global = global || self, global.PfeBadge = factory(global.PFElement)); +}(this, (function (PFElement) { 'use strict'; + + PFElement = PFElement && Object.prototype.hasOwnProperty.call(PFElement, 'default') ? PFElement['default'] : PFElement; + + var classCallCheck = function (instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } + }; + + var createClass = function () { + function defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } + + return function (Constructor, protoProps, staticProps) { + if (protoProps) defineProperties(Constructor.prototype, protoProps); + if (staticProps) defineProperties(Constructor, staticProps); + return Constructor; + }; + }(); + + var get = function get(object, property, receiver) { + if (object === null) object = Function.prototype; + var desc = Object.getOwnPropertyDescriptor(object, property); + + if (desc === undefined) { + var parent = Object.getPrototypeOf(object); + + if (parent === null) { + return undefined; + } else { + return get(parent, property, receiver); + } + } else if ("value" in desc) { + return desc.value; + } else { + var getter = desc.get; + + if (getter === undefined) { + return undefined; + } + + return getter.call(receiver); + } + }; + + var inherits = function (subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); + } + + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + enumerable: false, + writable: true, + configurable: true + } + }); + if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; + }; + + var possibleConstructorReturn = function (self, call) { + if (!self) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return call && (typeof call === "object" || typeof call === "function") ? call : self; + }; + + /*! + * PatternFly Elements: PfeBadge 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * + */ + + var PfeBadge = function (_PFElement) { + inherits(PfeBadge, _PFElement); + createClass(PfeBadge, [{ + key: "html", + + + // Injected at build-time + get: function get() { + return "\n\n"; + } + }, { + key: "templateUrl", + get: function get() { + return "pfe-badge.html"; + } + }, { + key: "styleUrl", + get: function get() { + return "pfe-badge.scss"; + } + }], [{ + key: "version", + + + // Injected at build-time + get: function get() { + return "1.12.3"; + } + }, { + key: "tag", + get: function get() { + return "pfe-badge"; + } + }, { + key: "properties", + get: function get() { + return { + state: { + title: "State", + type: String, + values: ["default", "moderate", "important", "critical", "success", "info"], + default: "default" + }, + // @TODO: Deprecated property in 1.0 + pfeState: { + type: String, + prefix: false, + alias: "state" + }, + number: { + title: "Number", + type: Number, + observer: "_numberChanged" + }, + threshold: { + title: "Threshold", + type: Number, + observer: "_thresholdChanged" + }, + // @TODO: Deprecated property in 1.0 + pfeThreshold: { + type: Number, + alias: "threshold", + prefix: false + } + }; + } + }]); + + function PfeBadge() { + classCallCheck(this, PfeBadge); + + var _this = possibleConstructorReturn(this, (PfeBadge.__proto__ || Object.getPrototypeOf(PfeBadge)).call(this, PfeBadge)); + + _this._textContainer = _this.shadowRoot.querySelector("span"); + return _this; + } + + createClass(PfeBadge, [{ + key: "attributeChangedCallback", + value: function attributeChangedCallback(attr, oldVal, newVal) { + get(PfeBadge.prototype.__proto__ || Object.getPrototypeOf(PfeBadge.prototype), "attributeChangedCallback", this).apply(this, arguments); + this._textContainer.textContent = this.textContent; + } + }, { + key: "_thresholdChanged", + value: function _thresholdChanged(oldVal, newVal) { + this.textContent = Number(this.threshold) < Number(this.textContent) ? this.threshold + "+" : this.textContent; + } + }, { + key: "_numberChanged", + value: function _numberChanged(oldVal, newVal) { + this.textContent = this.threshold && Number(this.threshold) < Number(newVal) ? this.threshold + "+" : newVal; + } + }]); + return PfeBadge; + }(PFElement); + + PFElement.create(PfeBadge); + + return PfeBadge; + +}))); +//# sourceMappingURL=pfe-badge.umd.js.map diff --git a/elements/pfe-badge/dist/pfe-badge.umd.js.map b/elements/pfe-badge/dist/pfe-badge.umd.js.map new file mode 100644 index 0000000000..23425b8778 --- /dev/null +++ b/elements/pfe-badge/dist/pfe-badge.umd.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-badge.umd.js","sources":["../_temp/pfe-badge.umd.js"],"sourcesContent":["/*!\n * PatternFly Elements: PfeBadge 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement\";\n\nclass PfeBadge extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n`;\n }\n\n static get tag() {\n return \"pfe-badge\";\n }\n\n get templateUrl() {\n return \"pfe-badge.html\";\n }\n\n get styleUrl() {\n return \"pfe-badge.scss\";\n }\n\n static get properties() {\n return {\n state: {\n title: \"State\",\n type: String,\n values: [\"default\", \"moderate\", \"important\", \"critical\", \"success\", \"info\"],\n default: \"default\",\n },\n // @TODO: Deprecated property in 1.0\n pfeState: {\n type: String,\n prefix: false,\n alias: \"state\",\n },\n number: {\n title: \"Number\",\n type: Number,\n observer: \"_numberChanged\",\n },\n threshold: {\n title: \"Threshold\",\n type: Number,\n observer: \"_thresholdChanged\",\n },\n // @TODO: Deprecated property in 1.0\n pfeThreshold: {\n type: Number,\n alias: \"threshold\",\n prefix: false,\n },\n };\n }\n\n constructor() {\n super(PfeBadge);\n this._textContainer = this.shadowRoot.querySelector(\"span\");\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n super.attributeChangedCallback(...arguments);\n this._textContainer.textContent = this.textContent;\n }\n\n _thresholdChanged(oldVal, newVal) {\n this.textContent = Number(this.threshold) < Number(this.textContent) ? `${this.threshold}+` : this.textContent;\n }\n\n _numberChanged(oldVal, newVal) {\n this.textContent = this.threshold && Number(this.threshold) < Number(newVal) ? `${this.threshold}+` : newVal;\n }\n}\n\nPFElement.create(PfeBadge);\n\nexport default PfeBadge;\n"],"names":["PfeBadge","state","title","type","String","values","default","pfeState","prefix","alias","number","Number","observer","threshold","pfeThreshold","_textContainer","shadowRoot","querySelector","attr","oldVal","newVal","arguments","textContent","PFElement","create"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAA;;;;;;;;;;;;;;;;;;;;;;;;;MA2BMA;;;;;;EAOJ;0BACW;EACT;EAGD;;;0BAMiB;EAChB,aAAO,gBAAP;EACD;;;0BAEc;EACb,aAAO,gBAAP;EACD;;;;;EAtBD;0BACqB;EACnB,aAAO,QAAP;EACD;;;0BASgB;EACf,aAAO,WAAP;EACD;;;0BAUuB;EACtB,aAAO;EACLC,eAAO;EACLC,iBAAO,OADF;EAELC,gBAAMC,MAFD;EAGLC,kBAAQ,CAAC,SAAD,EAAY,UAAZ,EAAwB,WAAxB,EAAqC,UAArC,EAAiD,SAAjD,EAA4D,MAA5D,CAHH;EAILC,mBAAS;EAJJ,SADF;EAOL;EACAC,kBAAU;EACRJ,gBAAMC,MADE;EAERI,kBAAQ,KAFA;EAGRC,iBAAO;EAHC,SARL;EAaLC,gBAAQ;EACNR,iBAAO,QADD;EAENC,gBAAMQ,MAFA;EAGNC,oBAAU;EAHJ,SAbH;EAkBLC,mBAAW;EACTX,iBAAO,WADE;EAETC,gBAAMQ,MAFG;EAGTC,oBAAU;EAHD,SAlBN;EAuBL;EACAE,sBAAc;EACZX,gBAAMQ,MADM;EAEZF,iBAAO,WAFK;EAGZD,kBAAQ;EAHI;EAxBT,OAAP;EA8BD;;;EAED,sBAAc;EAAA;;EAAA,mHACNR,QADM;;EAEZ,UAAKe,cAAL,GAAsB,MAAKC,UAAL,CAAgBC,aAAhB,CAA8B,MAA9B,CAAtB;EAFY;EAGb;;;;+CAEwBC,MAAMC,QAAQC,QAAQ;EAC7C,mIAAkCC,SAAlC;EACA,WAAKN,cAAL,CAAoBO,WAApB,GAAkC,KAAKA,WAAvC;EACD;;;wCAEiBH,QAAQC,QAAQ;EAChC,WAAKE,WAAL,GAAmBX,OAAO,KAAKE,SAAZ,IAAyBF,OAAO,KAAKW,WAAZ,CAAzB,GAAuD,KAAKT,SAA5D,SAA2E,KAAKS,WAAnG;EACD;;;qCAEcH,QAAQC,QAAQ;EAC7B,WAAKE,WAAL,GAAmB,KAAKT,SAAL,IAAkBF,OAAO,KAAKE,SAAZ,IAAyBF,OAAOS,MAAP,CAA3C,GAA+D,KAAKP,SAApE,SAAmFO,MAAtG;EACD;;;IA3EoBG;;EA8EvBA,UAAUC,MAAV,CAAiBxB,QAAjB;;;;;;;;"} \ No newline at end of file diff --git a/elements/pfe-badge/dist/pfe-badge.umd.min.js b/elements/pfe-badge/dist/pfe-badge.umd.min.js new file mode 100644 index 0000000000..198a35f6f0 --- /dev/null +++ b/elements/pfe-badge/dist/pfe-badge.umd.min.js @@ -0,0 +1,2 @@ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("../../pfelement/dist/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../../pfelement/dist/pfelement.umd.min"],t):(e=e||self).PfeBadge=t(e.PFElement)}(this,function(e){"use strict";e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e;var t=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},r=function(e,t,r){return t&&o(e.prototype,t),r&&o(e,r),e};function o(e,t){for(var r=0;r:host{display:inline-block;line-height:calc(1.5 * .75);line-height:calc(var(--pfe-theme--line-height,1.5) * .75);text-align:center;text-rendering:optimizelegibility}span{background-color:#f0f0f0;background-color:var(--pfe-badge--BackgroundColor,var(--pfe-theme--color--feedback--default--lightest,#f0f0f0));border-radius:calc(2px * 30);border-radius:var(--pfe-badge--BorderRadius,calc(var(--pfe-theme--ui--border-radius,2px) * 30));color:#151515;color:var(--pfe-badge--Color,var(--pfe-theme--color--text,#151515));font-size:calc(1rem * .75);font-size:var(--pfe-badge--FontSize,calc(var(--pfe-theme--font-size,1rem) * .75));font-weight:600;font-weight:var(--pfe-badge--FontWeight,var(--pfe-theme--font-weight--semi-bold,600));min-width:calc(1px * 2);min-width:var(--pfe-badge--MinWidth,calc(var(--pfe-theme--ui--border-width,1px) * 2));padding-left:calc(1rem / 2);padding-left:var(--pfe-badge--PaddingLeft,calc(var(--pfe-theme--container-padding,1rem)/ 2));padding-right:calc(1rem / 2);padding-right:var(--pfe-badge--PaddingRight,calc(var(--pfe-theme--container-padding,1rem)/ 2));vertical-align:middle}:host([state=moderate]) span{--pfe-badge--BackgroundColor:var(--pfe-theme--color--feedback--moderate, #f0ab00);--pfe-badge--Color:var(--pfe-theme--color--text--on-dark, #fff)}:host([state=important]) span{--pfe-badge--BackgroundColor:var(--pfe-theme--color--feedback--important, #c9190b);--pfe-badge--Color:var(--pfe-theme--color--text--on-dark, #fff)}:host([state=critical]) span{--pfe-badge--BackgroundColor:var(--pfe-theme--color--feedback--critical, #a30000);--pfe-badge--Color:var(--pfe-theme--color--text--on-dark, #fff)}:host([state=success]) span{--pfe-badge--BackgroundColor:var(--pfe-theme--color--feedback--success, #3e8635);--pfe-badge--Color:var(--pfe-theme--color--text--on-dark, #fff)}:host([state=info]) span{--pfe-badge--BackgroundColor:var(--pfe-theme--color--feedback--info, #06c);--pfe-badge--Color:var(--pfe-theme--color--text--on-dark, #fff)}:host([hidden]){display:none} /*# sourceMappingURL=pfe-badge.min.css.map */\n"}},{key:"templateUrl",get:function(){return"pfe-badge.html"}},{key:"styleUrl",get:function(){return"pfe-badge.scss"}}],[{key:"version",get:function(){return"1.12.3"}},{key:"tag",get:function(){return"pfe-badge"}},{key:"properties",get:function(){return{state:{title:"State",type:String,values:["default","moderate","important","critical","success","info"],default:"default"},pfeState:{type:String,prefix:!1,alias:"state"},number:{title:"Number",type:Number,observer:"_numberChanged"},threshold:{title:"Threshold",type:Number,observer:"_thresholdChanged"},pfeThreshold:{type:Number,alias:"threshold",prefix:!1}}}}]),r(i,[{key:"attributeChangedCallback",value:function(e,t,r){n(i.prototype.__proto__||Object.getPrototypeOf(i.prototype),"attributeChangedCallback",this).apply(this,arguments),this._textContainer.textContent=this.textContent}},{key:"_thresholdChanged",value:function(e,t){this.textContent=Number(this.threshold):host{display:inline-block;line-height:calc(1.5 * .75);line-height:calc(var(--pfe-theme--line-height,1.5) * .75);text-align:center;text-rendering:optimizelegibility}span{background-color:#f0f0f0;background-color:var(--pfe-badge--BackgroundColor,var(--pfe-theme--color--feedback--default--lightest,#f0f0f0));border-radius:calc(2px * 30);border-radius:var(--pfe-badge--BorderRadius,calc(var(--pfe-theme--ui--border-radius,2px) * 30));color:#151515;color:var(--pfe-badge--Color,var(--pfe-theme--color--text,#151515));font-size:calc(1rem * .75);font-size:var(--pfe-badge--FontSize,calc(var(--pfe-theme--font-size,1rem) * .75));font-weight:600;font-weight:var(--pfe-badge--FontWeight,var(--pfe-theme--font-weight--semi-bold,600));min-width:calc(1px * 2);min-width:var(--pfe-badge--MinWidth,calc(var(--pfe-theme--ui--border-width,1px) * 2));padding-left:calc(1rem / 2);padding-left:var(--pfe-badge--PaddingLeft,calc(var(--pfe-theme--container-padding,1rem)/ 2));padding-right:calc(1rem / 2);padding-right:var(--pfe-badge--PaddingRight,calc(var(--pfe-theme--container-padding,1rem)/ 2));vertical-align:middle}:host([state=moderate]) span{--pfe-badge--BackgroundColor:var(--pfe-theme--color--feedback--moderate, #f0ab00);--pfe-badge--Color:var(--pfe-theme--color--text--on-dark, #fff)}:host([state=important]) span{--pfe-badge--BackgroundColor:var(--pfe-theme--color--feedback--important, #c9190b);--pfe-badge--Color:var(--pfe-theme--color--text--on-dark, #fff)}:host([state=critical]) span{--pfe-badge--BackgroundColor:var(--pfe-theme--color--feedback--critical, #a30000);--pfe-badge--Color:var(--pfe-theme--color--text--on-dark, #fff)}:host([state=success]) span{--pfe-badge--BackgroundColor:var(--pfe-theme--color--feedback--success, #3e8635);--pfe-badge--Color:var(--pfe-theme--color--text--on-dark, #fff)}:host([state=info]) span{--pfe-badge--BackgroundColor:var(--pfe-theme--color--feedback--info, #06c);--pfe-badge--Color:var(--pfe-theme--color--text--on-dark, #fff)}:host([hidden]){display:none} /*# sourceMappingURL=pfe-badge.min.css.map */\n`;\n }\n\n static get tag() {\n return \"pfe-badge\";\n }\n\n get templateUrl() {\n return \"pfe-badge.html\";\n }\n\n get styleUrl() {\n return \"pfe-badge.scss\";\n }\n\n static get properties() {\n return {\n state: {\n title: \"State\",\n type: String,\n values: [\"default\", \"moderate\", \"important\", \"critical\", \"success\", \"info\"],\n default: \"default\",\n },\n // @TODO: Deprecated property in 1.0\n pfeState: {\n type: String,\n prefix: false,\n alias: \"state\",\n },\n number: {\n title: \"Number\",\n type: Number,\n observer: \"_numberChanged\",\n },\n threshold: {\n title: \"Threshold\",\n type: Number,\n observer: \"_thresholdChanged\",\n },\n // @TODO: Deprecated property in 1.0\n pfeThreshold: {\n type: Number,\n alias: \"threshold\",\n prefix: false,\n },\n };\n }\n\n constructor() {\n super(PfeBadge);\n this._textContainer = this.shadowRoot.querySelector(\"span\");\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n super.attributeChangedCallback(...arguments);\n this._textContainer.textContent = this.textContent;\n }\n\n _thresholdChanged(oldVal, newVal) {\n this.textContent = Number(this.threshold) < Number(this.textContent) ? `${this.threshold}+` : this.textContent;\n }\n\n _numberChanged(oldVal, newVal) {\n this.textContent = this.threshold && Number(this.threshold) < Number(newVal) ? `${this.threshold}+` : newVal;\n }\n}\n\nPFElement.create(PfeBadge);\n\nexport default PfeBadge;\n"],"names":["PfeBadge","PFElement","String","Number","attr","oldVal","newVal","arguments","_textContainer","textContent","this","threshold","_this","shadowRoot","querySelector","create"],"mappings":"ikCA2BMA,+TAAiBC,+mEAmBZ,wDAIA,yDAnBA,2CAWA,qDAYA,OACE,OACE,aACDC,cACE,CAAC,UAAW,WAAY,YAAa,WAAY,UAAW,gBAC3D,oBAGD,MACFA,eACE,QACD,gBAED,OACC,cACDC,gBACI,4BAED,OACF,iBACDA,gBACI,kCAGE,MACNA,aACC,oBACC,4DAUWC,EAAMC,EAAQC,2GACHC,gBAC7BC,eAAeC,YAAcC,KAAKD,sDAGvBJ,EAAQC,QACnBG,YAAcN,OAAOO,KAAKC,WAAaR,OAAOO,KAAKD,aAAkBC,KAAKC,cAAeD,KAAKD,mDAGtFJ,EAAQC,QAChBG,YAAcC,KAAKC,WAAaR,OAAOO,KAAKC,WAAaR,OAAOG,GAAaI,KAAKC,cAAeL,+FAdhGN,aACDQ,eAAiBI,EAAKC,WAAWC,cAAc,iBAiBxDb,EAAUc,OAAOf"} \ No newline at end of file diff --git a/elements/pfe-badge/package.json b/elements/pfe-badge/package.json index 97d3aaed83..19132fa4f9 100644 --- a/elements/pfe-badge/package.json +++ b/elements/pfe-badge/package.json @@ -5,7 +5,7 @@ "elementName": "pfe-badge", "preview": "badge--screenshot.png" }, - "version": "1.12.2", + "version": "1.12.3", "description": "Badge element for PatternFly Elements", "keywords": [ "web-components", @@ -54,10 +54,10 @@ ], "license": "MIT", "devDependencies": { - "@patternfly/pfe-sass": "^1.12.2" + "@patternfly/pfe-sass": "^1.12.3" }, "dependencies": { - "@patternfly/pfelement": "^1.12.2" + "@patternfly/pfelement": "^1.12.3" }, "generator-pfelement-version": "1.3.0", "bugs": { diff --git a/elements/pfe-band/dist/pfe-band.css.map b/elements/pfe-band/dist/pfe-band.css.map new file mode 100644 index 0000000000..108813f227 --- /dev/null +++ b/elements/pfe-band/dist/pfe-band.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../pfe-sass/mixins/_mixins.scss","../../pfe-sass/mixins/_custom-properties.scss","../../pfe-sass/extends/_extends.scss","pfe-band.css","pfe-band.scss","../../pfe-sass/functions/_custom-properties.scss","../../pfe-sass/mixins/_containers.scss","../../../node_modules/@patternfly/patternfly/sass-utilities/scss-variables.scss","../../../node_modules/@patternfly/patternfly/sass-utilities/colors.scss","../../../node_modules/@patternfly/patternfly/sass-utilities/functions.scss",""],"names":[],"mappings":"AAGM;EC6IF;ID7IwF,UAAA;IE4CxF,iCAAyD;IACzD,yBAAiC;EC3CnC;AACF;;AHHM;ECyLF;IDzLwF,UAAA;IEoDxF,yBAAiC;EC3CnC;AACF;;AC8GA;EAEE,0CAAU;EAGV,cAAc;EAGd,6BCpDkC;EDoDlC,wICpDkC;EDuDlC,yBCvDkC;EDuDlC,mGCvDkC;EDwDlC,kCCxDkC;EDwDlC,uECxDkC;EDyDlC,cCjCyH;EDiCzH,4CCjCyH;EDoCzH,kDC5DkC;ED4DlC,oMC5DkC;AFxDpC;;ACuHE;EAnBF;IAoBI,wCChEgC;IDgEhC,oNChEgC;EFnDlC;AACF;;AC8FA;;;EEtHI,8BAJsC;UAItC,sBAJsC;AHkC1C;;AH4BE;EI4DF;IJhDI,kCAAkC;IAClC,iCAAiC;IACjC,mCAA2B;YAA3B,2BAA2B;EGnC7B;AACF;;AHoBE;EI4DF;IA+BI,kBGwBoC;IHvBpC,yBIvJoC;IJyJpC,kBK/I8C;ENoChD;AACF;;AHhDM;EIwHN;IJxH4F,UAAA;II8JxF,iCAAyD;IACzD,iCAAiC;IACjC,yBAAiC;IAEjC,kBKvJ8C;EN8ChD;AACF;;ACyGI;EA3CJ;IA4CM,kBKzJ4C;ENoDhD;AACF;;AFoHI;EAtHM,qEAA+D;EAA/D,sFAA+D;EAA/D,wEAA+D;EAA/D,sFAA+D;EAA/D,sFAA+D;EAA/D,0FAA+D;EAA/D,oFAA+D;EAA/D,uGAA+D;EAA/D,uGAA+D;EAA/D,sGAA+D;AEezE;;AFuGI;EAtHM,0EAA+D;EAA/D,2FAA+D;EAA/D,0EAA+D;EAA/D,2FAA+D;EAA/D,2FAA+D;EAA/D,+FAA+D;EAA/D,8FAA+D;EAA/D,4GAA+D;EAA/D,4GAA+D;EAA/D,gHAA+D;AE4BzE;;AF0FI;EAtHM,+DAA+D;EAA/D,6EAA+D;EAA/D,4DAA+D;EAA/D,6EAA+D;EAA/D,6EAA+D;EAA/D,iFAA+D;EAA/D,2EAA+D;EAA/D,8FAA+D;EAA/D,8FAA+D;EAA/D,6FAA+D;AEyCzE;;AFsCI;EA5CE,8EAA8C;EAA9C,4EAA8C;AEWpD;;AFiCI;EA5CE,+EAA8C;EAA9C,6EAA8C;AEgBpD;;AF4BI;EA5CE,4EAA8C;EAA9C,2EAA8C;AEqBpD;;AFuBI;EA5CE,+EAA8C;EAA9C,8EAA8C;AE0BpD;;AFkBI;EA5CE,6EAA8C;EAA9C,+EAA8C;AE+BpD;;AFaI;EA5CE,8EAA8C;EAA9C,iFAA8C;AEoCpD;;AFQI;EA5CE,kFAA8C;EAA9C,qFAA8C;AEyCpD;;ACsCA;EACE,kDAAoF;EAApF,oMAAoF;ADnCtF;;AH9IM;EIgLN;IJhL4F,UAAA;IImLxF,aKxK8C;ENyIhD;AACF;;ACkCA;EACE,cAAc;AD/BhB;;ACiCE;EACE,eC/GgC;ED+GhC,uCC/GgC;AFiFpC;;ACiCM;EAJJ;IAKM,8CCnH4B;IDmH5B,gJCnH4B;EFsFlC;AACF;;AC2BM;EAJJ;IAKM,8CCnH4B;IDmH5B,gJCnH4B;EF4FlC;AACF;;ACqBM;EAJJ;IAKM,+CCnH4B;IDmH5B,iJCnH4B;EFkGlC;AACF;;ACqB2B;EAb3B;IAcI,iBAAa;IAAb,aAAa;IACb,mBAAwB;IAAxB,wBAAwB;IACxB,sBAA2B;IAA3B,2BAA2B;QAE3B,2BAA2B;IAE3B,kBC/HgC;ID+HhC,yFC/HgC;IDgIhC,aChIgC;IDgIhC,oFChIgC;IDiIhC,+BCjIgC;IDiIhC,wGCjIgC;IDkIhC,kCClIgC;ODkIhC,+BClIgC;YDkIhC,0BClIgC;IDkIhC,2GClIgC;ODkIhC,wGClIgC;YDkIhC,mGClIgC;EF+GlC;ECmCI;QACE,oCArKE;EDoIR;ECgCI;QACE,mCAlKG;EDoIT;ECwCM;IACE;UACE,mCA/KF;IDyIN;EACF;EC0CM;IAlBF;UAoBM,iCA5I0C;IDoGlD;IC2CM;UACE,iCAlJ0C;IDyGlD;EACF;ECgBI;QACE,oCA/JI;EDiJV;ECaI;QACE,4CA3JG;EDgJT;ECqBM;IACE;UACE,4CAxKF;IDqJN;EACF;ECuBM;IAlBF;UAoBM,iDA5I0C;IDuHlD;ICwBM;UACE,iDAlJ0C;ID4HlD;IC0BQ;UACE,gDArJwC;ID6HlD;IC2BQ;UACE,gDA3JwC;IDkIlD;EACF;ECTI;QACE,6CAvJI;EDkKV;ECZI;QACE,4CAnJI;EDiKV;ECJM;IACE;UACE,4CA/JA;IDqKR;EACF;ECFM;IAlBF;UAoBM,iDAxI8C;ID4ItD;ICDM;UACE,iDA5I8C;ID+ItD;ICCQ;UACE,gDArJwC;IDsJlD;ICEQ;UACE,gDA3JwC;ID2JlD;EACF;EClCI;QACE,qDA9IG;EDkLT;EC1BM;IACE;UACE,qDA3JA;IDuLR;EACF;ECxBM;IAlBF;UAoBM,iEAxI8C;IDkKtD;ICvBM;UACE,iEA5I8C;IDqKtD;ICrBQ;UACE,+DArJwC;ID4KlD;ICpBQ;UACE,+DA3JwC;IDiLlD;EACF;ECdE;IAjFJ;MAkFM,mBAAwB;MAAxB,wBAAwB;MACxB,qBAA0B;MAA1B,0BAA0B;IDiB5B;ICpGJ;MM1LA,gBAAA;MAAA,mBAAA;IP8RI;IC7DE;MA+CE,mBAAwB;MAAxB,wBAAwB;MACxB,2BClM4B;MDkM5B,gCClM4B;MDkM5B,8DClM4B;MDkM5B,mEClM4B;IFmNhC;ICjEE;MMjON,gBAAA;MAAA,mBAAA;IPkSI;ICjEE;MMjON,gBAAA;MAAA,mBAAA;IPkSI;ICjEE;MMjON,gBAAA;MAAA,mBAAA;IPkSI;ICjEE;MMjON,gBAAA;MAAA,mBAAA;IPkSI;IC1CM;MA6BF,mBAAwB;MAAxB,wBAAwB;MACxB,2BAAsD;MAAtD,gCAAsD;MAAtD,8DAAsD;MAAtD,mEAAsD;IDgB1D;IC9CM;MMxPV,gBAAA;MAAA,mBAAA;IPsSI;IC9CM;MMxPV,gBAAA;MAAA,mBAAA;IPsSI;IC9CM;MMxPV,gBAAA;MAAA,mBAAA;IPsSI;IC9CM;MMxPV,gBAAA;MAAA,mBAAA;IPsSI;EACF;ECbE;IAzDE;MA2DE,mBAAwB;MAAxB,wBAAwB;MACxB,2BC9M4B;MD8M5B,gCC9M4B;MD8M5B,uFC9M4B;MD8M5B,4FC9M4B;IF6NhC;IC3EE;MMjON,gBAAA;MAAA,mBAAA;IP4SI;IC3EE;MMjON,gBAAA;MAAA,mBAAA;IP4SI;IC3EE;MMjON,gBAAA;MAAA,mBAAA;IP4SI;ICpDM;MAwCF,mBAAwB;MAAxB,wBAAwB;MACxB,2BClN4B;MDkN5B,gCClN4B;MDkN5B,uFClN4B;MDkN5B,4FClN4B;IFiOhC;ICxDM;MMxPV,gBAAA;MAAA,mBAAA;IPgTI;ICxDM;MMxPV,gBAAA;MAAA,mBAAA;IPgTI;ICxDM;MMxPV,gBAAA;MAAA,mBAAA;IPgTI;EACF;AACF;;ACZE;EACE,eCxNgC;EDwNhC,uCCxNgC;AFuOpC;;ACZM;EAJJ;IAMQ,uCAAyD;IAAzD,iHAAyD;EDejE;AACF;;AClBM;EAJJ;IAMQ,uCAAyD;IAAzD,iHAAyD;EDqBjE;AACF;;ACxBM;EAJJ;IAQQ,uCAAyD;IAAzD,iHAAyD;EDyBjE;AACF;;ACnBA;;EAEE,WAAW;EAGX,8BAAwD;EAAxD,qGAAwD;EACxD,6BAAuD;EAAvD,oGAAuD;ADoBzD;;ACnB2B;EAP3B;;IAQI,cAAc;EDwBhB;AACF;;ACpBE;EACE,eCpPgC;EDoPhC,uCCpPgC;AF2QpC;;ACnBA;EACE,YAAY;ADsBd;;ACnBA;EACE,cAAc;EACd,YAAY;ADsBd;;AClBE;EAEE,mBCpQgC;EDoQhC,kGCpQgC;EDqQhC,kBCrQgC;EDqQhC,iGCrQgC;AFyRpC;;ACjB6B;EAN3B;IMjVF,gBAAA;IAAA,mBAAA;INyVM,iBATmB;IAUnB,gBAAgB;IAChB,eAAe;EDoBnB;EC9BA;IMjVF,gBAAA;IAAA,mBAAA;EP+WE;EC9BA;IMjVF,gBAAA;IAAA,mBAAA;IAAA,wBAAA;EP+WE;EC9BA;IMjVF,gBAAA;IAAA,mBAAA;IAAA,wBAAA;EP+WE;EClBI;IACE,iBAAa;IAAb,aAAa;IACb,mBAAwB;IAAxB,wBAAwB;IACxB,qBCjR4B;IDiR5B,0BCjR4B;IDiR5B,sDCjR4B;IDiR5B,2DCjR4B;IDmR5B,kBCnR4B;IDmR5B,iGCnR4B;IDoR5B,aCpR4B;IDoR5B,4FCpR4B;IDqR5B,+BCrR4B;IDqR5B,gHCrR4B;IDsR5B,kCCtR4B;ODsR5B,+BCtR4B;YDsR5B,0BCtR4B;IDsR5B,mHCtR4B;ODsR5B,gHCtR4B;YDsR5B,2GCtR4B;EFySlC;EC3BI;IM7VN,gBAAA;IAAA,mBAAA;EPwXE;EC3BI;IM7VN,gBAAA;IAAA,mBAAA;EPwXE;AACF;;ACxCE;EAEE,mBCpQgC;EDoQhC,gGCpQgC;EDqQhC,kBCrQgC;EDqQhC,+FCrQgC;AF+SpC;;ACvC6B;EAN3B;IMjVF,gBAAA;IAAA,mBAAA;INyVM,eATyB;IAUzB,gBAAgB;IAChB,eAAe;ED0CnB;ECpDA;IMjVF,gBAAA;IAAA,mBAAA;EPqYE;ECpDA;IMjVF,gBAAA;IAAA,mBAAA;EPqYE;ECpDA;IMjVF,gBAAA;IAAA,mBAAA;EPqYE;ECpDA;IMjVF,gBAAA;IAAA,mBAAA;EPqYE;ECpDA;IMjVF,gBAAA;IAAA,mBAAA;EPqYE;ECpDA;IMjVF,gBAAA;IAAA,mBAAA;EPqYE;ECpDA;IMjVF,gBAAA;IAAA,mBAAA;EPqYE;ECxCI;IACE,iBAAa;IAAb,aAAa;IACb,mBAAwB;IAAxB,wBAAwB;IACxB,qBCjR4B;IDiR5B,0BCjR4B;IDiR5B,oDCjR4B;IDiR5B,yDCjR4B;IDmR5B,kBCnR4B;IDmR5B,+FCnR4B;IDoR5B,aCpR4B;IDoR5B,0FCpR4B;IDqR5B,+BCrR4B;IDqR5B,8GCrR4B;IDsR5B,kCCtR4B;ODsR5B,+BCtR4B;YDsR5B,0BCtR4B;IDsR5B,iHCtR4B;ODsR5B,8GCtR4B;YDsR5B,yGCtR4B;EF+TlC;ECjDI;IM7VN,gBAAA;IAAA,mBAAA;EP8YE;ECjDI;IM7VN,gBAAA;IAAA,mBAAA;EP8YE;AACF;;AC9DE;EAEE,mBCpQgC;EDoQhC,kGCpQgC;EDqQhC,kBCrQgC;EDqQhC,iGCrQgC;AFqUpC;;AC7D6B;EAN3B;IMjVF,gBAAA;IAAA,mBAAA;INyVM,iBATiC;IAUjC,gBAAgB;IAChB,eAAe;EDgEnB;EC1EA;IMjVF,gBAAA;IAAA,mBAAA;EP2ZE;EC1EA;IMjVF,gBAAA;IAAA,mBAAA;EP2ZE;EC1EA;IMjVF,gBAAA;IAAA,mBAAA;IAAA,wBAAA;EP2ZE;EC9DI;IACE,iBAAa;IAAb,aAAa;IACb,mBAAwB;IAAxB,wBAAwB;IACxB,qBCjR4B;IDiR5B,0BCjR4B;IDiR5B,sDCjR4B;IDiR5B,2DCjR4B;IDmR5B,kBCnR4B;IDmR5B,iGCnR4B;IDoR5B,aCpR4B;IDoR5B,4FCpR4B;IDqR5B,+BCrR4B;IDqR5B,gHCrR4B;IDsR5B,kCCtR4B;ODsR5B,+BCtR4B;YDsR5B,0BCtR4B;IDsR5B,mHCtR4B;ODsR5B,gHCtR4B;YDsR5B,2GCtR4B;EFqVlC;ECvEI;IM7VN,gBAAA;IAAA,mBAAA;EPoaE;ECvEI;IM7VN,gBAAA;IAAA,mBAAA;EPoaE;AACF;;AC9FA;EAYI,mBCpQgC;EDoQhC,iGCpQgC;EDqQhC,kBCrQgC;EDqQhC,gGCrQgC;AF2VpC;;ACnF6B;EAhB7B;IMvUA,gBAAA;IAAA,mBAAA;INyVM,gBATwC;IAUxC,gBAAgB;IAChB,eAAe;EDsFnB;EC1GF;IMvUA,gBAAA;IAAA,mBAAA;EPibE;EC1GF;IMvUA,gBAAA;IAAA,qBAAA;IAAA,mBAAA;EPibE;EC1GF;IMvUA,gBAAA;IAAA,qBAAA;IAAA,mBAAA;EPibE;EOjbF;INiVE;MMjVF,gBAAA;MAAA,mBAAA;IP+WE;IC9BA;MMjVF,gBAAA;MAAA,mBAAA;MAAA,wBAAA;IP+WE;IC9BA;MMjVF,gBAAA;MAAA,mBAAA;IPqYE;ICpDA;MMjVF,gBAAA;MAAA,mBAAA;IPqYE;ICpDA;MMjVF,gBAAA;MAAA,mBAAA;IPqYE;ICpDA;MMjVF,gBAAA;MAAA,mBAAA;IPqYE;ICpDA;MMjVF,gBAAA;MAAA,mBAAA;IP2ZE;IC1EA;MMjVF,gBAAA;MAAA,mBAAA;MAAA,wBAAA;IP2ZE;ICpFF;MMvUA,gBAAA;MAAA,mBAAA;IPibE;IC1GF;MMvUA,gBAAA;MAAA,mBAAA;IPibE;IC1GF;MMvUA,gBAAA;MAAA,qBAAA;MAAA,mBAAA;IPibE;IC1GF;MMvUA,gBAAA;MAAA,qBAAA;MAAA,mBAAA;IPibE;GOjbF;EAAA;INiVE;MMjVF,gBAAA;MAAA,mBAAA;MAAA,wBAAA;IP+WE;IC9BA;MMjVF,gBAAA;MAAA,mBAAA;MAAA,wBAAA;IP+WE;IC9BA;MMjVF,gBAAA;MAAA,mBAAA;MAAA,wBAAA;IP+WE;IC9BA;MMjVF,gBAAA;MAAA,mBAAA;MAAA,wBAAA;IP+WE;IC9BA;MMjVF,gBAAA;MAAA,mBAAA;MAAA,wBAAA;IP+WE;IC9BA;MMjVF,gBAAA;MAAA,mBAAA;MAAA,wBAAA;IP+WE;IC9BA;MMjVF,gBAAA;MAAA,mBAAA;MAAA,wBAAA;IP+WE;IC9BA;MMjVF,gBAAA;MAAA,mBAAA;MAAA,wBAAA;IP+WE;IC9BA;MMjVF,gBAAA;MAAA,mBAAA;IPqYE;ICpDA;MMjVF,gBAAA;MAAA,mBAAA;IPqYE;ICpDA;MMjVF,gBAAA;MAAA,mBAAA;IPqYE;ICpDA;MMjVF,gBAAA;MAAA,mBAAA;IPqYE;ICpDA;MMjVF,gBAAA;MAAA,mBAAA;IPqYE;ICpDA;MMjVF,gBAAA;MAAA,mBAAA;IPqYE;ICpDA;MMjVF,gBAAA;MAAA,mBAAA;IPqYE;ICpDA;MMjVF,gBAAA;MAAA,mBAAA;IPqYE;ICpDA;MMjVF,gBAAA;MAAA,mBAAA;IPqYE;ICpDA;MMjVF,gBAAA;MAAA,mBAAA;IPqYE;ICpDA;MMjVF,gBAAA;MAAA,mBAAA;IPqYE;ICpDA;MMjVF,gBAAA;MAAA,mBAAA;IPqYE;ICpDA;MMjVF,gBAAA;MAAA,mBAAA;IPqYE;ICpDA;MMjVF,gBAAA;MAAA,mBAAA;IPqYE;ICpDA;MMjVF,gBAAA;MAAA,mBAAA;MAAA,wBAAA;IP2ZE;IC1EA;MMjVF,gBAAA;MAAA,mBAAA;MAAA,wBAAA;IP2ZE;IC1EA;MMjVF,gBAAA;MAAA,mBAAA;MAAA,wBAAA;IP2ZE;IC1EA;MMjVF,gBAAA;MAAA,mBAAA;MAAA,wBAAA;IP2ZE;IC1EA;MMjVF,gBAAA;MAAA,mBAAA;MAAA,wBAAA;IP2ZE;IC1EA;MMjVF,gBAAA;MAAA,mBAAA;MAAA,wBAAA;IP2ZE;IC1EA;MMjVF,gBAAA;MAAA,mBAAA;MAAA,wBAAA;IP2ZE;IC1EA;MMjVF,gBAAA;MAAA,mBAAA;MAAA,wBAAA;IP2ZE;ICpFF;MMvUA,gBAAA;MAAA,mBAAA;IPibE;IC1GF;MMvUA,gBAAA;MAAA,mBAAA;IPibE;IC1GF;MMvUA,gBAAA;MAAA,mBAAA;IPibE;IC1GF;MMvUA,gBAAA;MAAA,mBAAA;IPibE;IC1GF;MMvUA,gBAAA;MAAA,qBAAA;MAAA,mBAAA;IPibE;IC1GF;MMvUA,gBAAA;MAAA,qBAAA;MAAA,mBAAA;IPibE;IC1GF;MMvUA,gBAAA;MAAA,qBAAA;MAAA,mBAAA;IPibE;IC1GF;MMvUA,gBAAA;MAAA,qBAAA;MAAA,mBAAA;IPibE;IC1GF;MMvUA,gBAAA;MAAA,qBAAA;MAAA,mBAAA;IPibE;IC1GF;MMvUA,gBAAA;MAAA,qBAAA;MAAA,mBAAA;IPibE;IC1GF;MMvUA,gBAAA;MAAA,qBAAA;MAAA,mBAAA;IPibE;IC1GF;MMvUA,gBAAA;MAAA,qBAAA;MAAA,mBAAA;IPibE;IC1GF;MMvUA,gBAAA;MAAA,qBAAA;MAAA,mBAAA;IPibE;IC1GF;MMvUA,gBAAA;MAAA,qBAAA;MAAA,mBAAA;IPibE;GOjbF;EN6VM;IACE,iBAAa;IAAb,aAAa;IACb,mBAAwB;IAAxB,wBAAwB;IACxB,qBCjR4B;IDiR5B,0BCjR4B;IDiR5B,qDCjR4B;IDiR5B,0DCjR4B;IDmR5B,kBCnR4B;IDmR5B,gGCnR4B;IDoR5B,aCpR4B;IDoR5B,2FCpR4B;IDqR5B,+BCrR4B;IDqR5B,+GCrR4B;IDsR5B,kCCtR4B;ODsR5B,+BCtR4B;YDsR5B,0BCtR4B;IDsR5B,kHCtR4B;ODsR5B,+GCtR4B;YDsR5B,0GCtR4B;EF2WlC;EC7FI;IM7VN,gBAAA;IAAA,mBAAA;EP0bE;EC7FI;IM7VN,gBAAA;IAAA,mBAAA;EP0bE;AACF;;AHxbM;EAAsF,UAAA;EI2W1F;IEnWE,WAAW;IACX,WAAW;IACX,cAAc;EHsbhB;ECjFA;;;IAGE,WAAW;EDmFb;ECjFE;;;IACE,YAAY;EDqFhB;EClFE;;;IACE,UAAU;EDsFd;ECjIA;IAgDE,WAAW;EDoFb;EC9IF;IA8DI,mBAAY;IAAZ,oBAAY;QAAZ,oBAAY;YAAZ,YAAY;IACZ,8BAAsB;QAAtB,0BAAsB;YAAtB,sBAAsB;IAEtB,YAAY;IAEZ,UAAU;IACV,cAAc;EDiFhB;EC/EE;IACE,WAAW;EDiFf;EC7EA;IACE,UAAU;IACV,WAAW;ED+Eb;EC7EE;IACE,YAAY;ED+EhB;AACF","file":"pfe-band.css","sourcesContent":["@mixin browser-query($browser-list) {\n @each $browser in $browser-list {\n @if $browser == ie11 {\n @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { /* IE10+ */\n @content;\n }\n }\n @if $browser == edge12 {\n @supports (-ms-accelerator: true) { /* Microsoft Edge Browser 12+ */\n @content;\n }\n }\n @if $browser == edge {\n @supports (-ms-ime-align: auto) { /* Microsoft Edge Browser 16+ (All) */\n @content;\n }\n }\n @if $browser == firefox {\n @media all and (min--moz-device-pixel-ratio:0) { /* Mozilla Firefox (All) */\n @content;\n }\n }\n }\n}\n\n@mixin pfe-transition($properties...) {\n $return: null;\n @each $property in $properties {\n @if length($property) == 1 {\n $return: append($return, #{$property} 250ms $pfe-global--animation-timing, comma);\n }\n @else if length($property) == 2 {\n $return: append($return, nth($property, 1) nth($property, 2), comma);\n }\n }\n transition: $return;\n}\n\n// Make a CSS arrow\n@mixin pfe-arrow($type, $color, $width: 8px, $height: 5px, $pseudo: false) {\n $direction: (\n up: 180deg,\n down: 0deg,\n right: -90deg,\n left: 90deg,\n );\n border-style: pfe-var(surface--border-style);\n border-width: $width $height 0;\n border-color: transparent;\n border-top-color: $color;\n transform: rotate(map-get($direction, $type));\n @if $pseudo {\n display: inline-block;\n content: \"\";\n @content;\n }\n}\n\n@mixin pfe-arrow-color($color) {\n border-top-color: $color;\n}\n\n@mixin pfe-print-media {\n @media print {\n @content;\n }\n}\n\n@mixin pfe-print-background {\n -webkit-print-color-adjust: exact;\n color-adjust: exact;\n}\n\n@mixin pfe-no-print-background {\n @include pfe-print-media {\n background-color: white !important;\n background-image: none !important;\n box-shadow: none !important;\n }\n}\n\n@mixin pfe-hidden {\n @at-root #{&}([hidden]) {\n display: none;\n }\n}\n\n@mixin pfe-pipe( $position: right, $padding: 0, $margin: 0, $color: $border-color) {\n border: pfe-var(surface--border-width) pfe-var(surface--border-style) transparent;\n border-#{$position}-color: $color;\n @if $position == right {\n padding-left: $padding;\n margin-right: $margin;\n }\n @else if $position == left {\n padding-right: $padding;\n margin-left: $margin;\n }\n}\n\n@mixin pfe-retina {\n @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n @content;\n }\n}\n\n@mixin pfe-icon($path, $display: flex, $size: 1em) {\n display: #{$display};\n @if $path {\n background: #{$path} no-repeat;\n background-size: contain;\n background-position: center;\n }\n width: #{$size};\n height: #{$size};\n @content;\n}\n\n@mixin pfe-local-debug($map: $LOCAL-VARIABLES) {\n :root {\n @include pfe-print-local($map);\n }\n} ","////\n/// Tools for leveraging custom property stacks\n/// @group custom-properties\n/// @author castastrophe\n////\n\n/// This will print all the broadcast variables, and set the value to the context of your choosing, like on-dark or on-saturated.\n/// @param {String} $context - Look up values from contexts, i.e. \"light\" or \"saturated\"\n/// @param {List | String} $broadcast [$BROADCAST-VARS] - Optionally specify only one broadcast variable instead of the whole set, i.e. \"text\"\n/// @see $custom-prop-prefix\n/// @see $BROADCAST-VARS\n/// @example - scss - Usage in a container component, i.e. pfe-card\n/// :host {\n/// @include pfe-set-broadcast-context(dark);\n/// }\n/// @example - css - Rendered output\n/// :host {\n/// --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff);\n/// --pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #99ccff);\n/// --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #cce6ff);\n/// --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #cce6ff);\n/// --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #b38cd9);\n/// --pfe-broadcasted--link-decoration: none;\n/// --pfe-broadcasted--link-decoration--hover: underline;\n/// --pfe-broadcasted--link-decoration--focus: underline;\n/// --pfe-broadcasted--link-decoration--visited: none;\n/// }\n///\n@mixin pfe-set-broadcast-context($context, $broadcast: $BROADCAST-VARS) {\n @each $type in $broadcast {\n $list: ();\n $string: \"\";\n $context_string: \"\";\n $state: \"\";\n\n @if str-starts-with($type, \"link\") {\n $list: append($list, \"#{$type}\");\n\n @each $s in (hover, focus, visited) {\n $state: \"--#{$s}\";\n $string: \"#{$type}#{$state}\";\n\n @if not index($list, $string) {\n $list: append($list, \"#{$type}#{$state}\");\n }\n }\n } @else {\n @if not index($list, $string) {\n $list: append($list, \"#{$type}\");\n }\n }\n\n @if index($CONTEXTS, $context) != null {\n @if $context != \"light\" {\n $context_string: \"--on-#{$context}\";\n }\n }\n\n @each $item in $list {\n @if not index($BROADCAST-VARS, $type) {\n @warn \"--#{$custom-prop-prefix}-broadcasted--#{$item} variable is not in the $BROADCAST-VARS list.\";\n } @else if not pfe-broadcasted(#{$item}#{$context_string}) {\n @warn \"#{$item}#{$context_string} value does not currently exist.\";\n } @else {\n @if index($CONTEXTS, $context) != null {\n --#{$custom-prop-prefix}-broadcasted--#{$item}: #{pfe-var(#{$item}#{$context_string})};\n } @else {\n @error \"The #{$context} context does not appear to be part of a supported context.\";\n }\n }\n }\n }\n}\n\n/// Returns CSS Variable for the local component-scoped variable\n/// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--'\n/// @param {String} $value - The value of the css variable being defined\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $custom-prop-prefix\n/// @see $LOCAL\n/// @example - scss\n/// :host {\n/// padding-top: pfe-local(paddingTop);\n/// padding-bottom: pfe-local(paddingBottom);\n/// }\n@mixin pfe-print-local($map: $LOCAL-VARIABLES) {\n @each $property, $value in $map {\n $name: \"--#{$property}\";\n $styles: $value;\n\n @if type-of($value) == \"map\" {\n @each $prop, $v in $value {\n $name: \"__#{$property}--#{$prop}\";\n $styles: $v;\n\n // Print the variable definition\n --#{$custom-prop-prefix}-#{$LOCAL}#{$name}: #{$styles};\n }\n } @else {\n // Print the variable definition\n --#{$custom-prop-prefix}-#{$LOCAL}#{$name}: #{$styles};\n }\n }\n}\n\n/// Surface properties\n/// This mixin creates an attribute for all the surface colors, then prints the local background color variable for the component, with the correct context colors.\n/// @param {List | String} $surfaces [$SURFACES] - defaults to the global $SURFACES list of all supported colors\n/// @param {String} $attr-name [pfe-var] - defaults to pfe-var, optionally pass in a custom name for the data attribute\n/// @example - scss - In your component stylesheet\n/// $LOCAL: band;\n/// @include pfe-surfaces;\n/// @example - css - Rendered result\n/// :host([color=\"darker\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--darker, #464646);\n/// --context: dark;\n/// }\n/// :host([color=\"darkest\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--darkest, #131313);\n/// --context: dark;\n/// }\n/// :host([color=\"base\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--base, #dfdfdf);\n/// --context: light;\n/// }\n/// :host([color=\"lighter\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--lighter, #ececec);\n/// --context: light;\n/// }\n/// :host([color=\"lightest\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--lightest, #fff);\n/// --context: light;\n/// }\n/// :host([color=\"accent\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--accent, #ee0000);\n/// --context: saturated;\n/// }\n/// :host([color=\"complement\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--complement, #0477a4);\n/// --context: saturated;\n/// }\n@mixin pfe-surfaces($surfaces: $SURFACE, $attr-name: color) {\n @each $color in $surfaces {\n $context: #{pfe-get-context(surface--#{$color}--context)};\n :host([#{$attr-name}=\"#{$color}\"]) {\n @include pfe-print-local(\n (\n BackgroundColor: pfe-var(surface--#{$color}),\n context: pfe-var(surface--#{$color}--context, #{$context})\n )\n );\n @extend %fallback-surface;\n }\n }\n}\n\n/// Prints the `on` attribute with IE11 fallbacks\n/// @param {List} contexts [$CONTEXTS] - defaults to the global $CONTEXTS list of all supported contexts\n/// @param {Boolean} ie-fallback [true] - defaults to true, prints IE11 fallbacks\n/// @example - scss - In your component styles\n/// @include pfe-contexts; // imports on=\"light\" etc support\n/// @example - css - Rendered outputs\n/// :host([on=\"dark\"]) {\n/// --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff);\n/// --pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #99ccff);\n/// --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #cce6ff);\n/// --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #cce6ff);\n/// --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #b38cd9);\n/// --pfe-broadcasted--link-decoration: none;\n/// --pfe-broadcasted--link-decoration--hover: underline;\n/// --pfe-broadcasted--link-decoration--focus: underline;\n/// --pfe-broadcasted--link-decoration--visited: none;\n/// }\n/// @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { /* IE10+ */\n/// :host([on=\"dark\"]) {\n/// color: #fff;\n/// color: var(--pfe-theme--color--text--on-dark, #fff);\n/// }\n/// }\n/// // ...as well as all the values for :host([on=\"saturated\"]) and :host([on=\"light\"])\n@mixin pfe-contexts($contexts: $CONTEXTS, $ie-fallback: true) {\n // Helper attributes to aid in theming\n @each $context in $contexts {\n :host([on=\"#{$context}\"]) {\n @include pfe-set-broadcast-context($context);\n }\n }\n @if $ie-fallback {\n :host {\n @extend %fallback-text;\n }\n }\n}\n","// @todo Change to mixins; no efficiency gain with placeholders in web components\n\n/// Clear box element styles\n%reset-box {\n margin: 0;\n padding: 0;\n}\n\n/// Clear list styles\n%reset-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n/// Clear button styles\n%reset-button {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n text-align: left;\n}\n\n/// Set up a container element\n%container {\n position: relative;\n display: block;\n width: 100%;\n padding: pfe-var(container-padding);\n}\n\n/// Screen-reader only content\n%sr-only {\n position: absolute;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n}\n\n/// Fallback surface styles for IE11 only\n%fallback-surface {\n @include browser-query(ie11) {\n background-color: pfe-fetch(surface--lightest) !important;\n color: pfe-fetch(text) !important;\n }\n}\n\n/// Fallback text styles for IE11 only\n%fallback-text {\n @include browser-query(ie11) {\n color: pfe-fetch(text) !important;\n }\n}\n","@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n :host([color=\"darker\"]), :host([color=\"darkest\"]), :host([color=\"base\"]), :host([color=\"lighter\"]), :host([color=\"lightest\"]), :host([color=\"accent\"]), :host([color=\"complement\"]) {\n /* IE10+ */\n background-color: #fff !important;\n color: #151515 !important;\n }\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n :host {\n /* IE10+ */\n color: #151515 !important;\n }\n}\n\n:host {\n --context: var(--pfe-band--context, light);\n display: block;\n border: var(--pfe-band--Border, var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent);\n background-color: var(--pfe-band--BackgroundColor, var(--pfe-theme--color--surface--base, #f0f0f0));\n background-position: var(--pfe-band--BackgroundPosition, center center);\n color: var(--pfe-broadcasted--text, #3c3f42);\n padding: calc(var(--pfe-band--Padding--vertical, calc( var(--pfe-theme--container-spacer, 1rem) * 4)) / 2) var(--pfe-band--Padding--horizontal, calc( var(--pfe-theme--container-spacer, 1rem) * 1));\n}\n\n@media (min-width: 576px) {\n :host {\n padding: var(--pfe-band--Padding, var(--pfe-band--Padding--vertical, calc( var(--pfe-theme--container-spacer, 1rem) * 4)) var(--pfe-band--Padding--horizontal, calc( var(--pfe-theme--container-spacer, 1rem) * 1)));\n }\n}\n\n:host *,\n:host *::before,\n:host *::after {\n box-sizing: border-box;\n}\n\n@media print {\n :host {\n background-color: white !important;\n background-image: none !important;\n box-shadow: none !important;\n }\n}\n\n@media print {\n :host {\n border-radius: 3px;\n border: 1px solid #d2d2d2;\n padding: 2rem 1rem;\n }\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n :host {\n /* IE10+ */\n background-color: #fff !important;\n background-image: none !important;\n color: #151515 !important;\n padding: 2rem 1rem;\n }\n}\n\n@media screen and (-ms-high-contrast: active) and (min-width: 576px), screen and (-ms-high-contrast: none) and (min-width: 576px) {\n :host {\n padding: 4rem 1rem;\n }\n}\n\n:host([on=\"dark\"]) {\n --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff);\n --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted--on-dark, #d2d2d2);\n --pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #73bcf7);\n --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #bee1f4);\n --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #bee1f4);\n --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #bee1f4);\n --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration--on-dark, none);\n --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover--on-dark, underline);\n --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus--on-dark, underline);\n --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited--on-dark, none);\n}\n\n:host([on=\"saturated\"]) {\n --pfe-broadcasted--text: var(--pfe-theme--color--text--on-saturated, #fff);\n --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2);\n --pfe-broadcasted--link: var(--pfe-theme--color--link--on-saturated, #fff);\n --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-saturated, #fafafa);\n --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-saturated, #fafafa);\n --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);\n --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration--on-saturated, underline);\n --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover--on-saturated, underline);\n --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus--on-saturated, underline);\n --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited--on-saturated, underline);\n}\n\n:host([on=\"light\"]) {\n --pfe-broadcasted--text: var(--pfe-theme--color--text, #151515);\n --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted, #6a6e73);\n --pfe-broadcasted--link: var(--pfe-theme--color--link, #06c);\n --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover, #004080);\n --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus, #004080);\n --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited, #6753ac);\n --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration, none);\n --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover, underline);\n --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus, underline);\n --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited, none);\n}\n\n:host([color=\"darker\"]) {\n --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--darker, #3c3f42);\n --pfe-band--context: var(--pfe-theme--color--surface--darker--context, dark);\n}\n\n:host([color=\"darkest\"]) {\n --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--darkest, #151515);\n --pfe-band--context: var(--pfe-theme--color--surface--darkest--context, dark);\n}\n\n:host([color=\"base\"]) {\n --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--base, #f0f0f0);\n --pfe-band--context: var(--pfe-theme--color--surface--base--context, light);\n}\n\n:host([color=\"lighter\"]) {\n --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--lighter, #f0f0f0);\n --pfe-band--context: var(--pfe-theme--color--surface--lighter--context, light);\n}\n\n:host([color=\"lightest\"]) {\n --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--lightest, #fff);\n --pfe-band--context: var(--pfe-theme--color--surface--lightest--context, light);\n}\n\n:host([color=\"accent\"]) {\n --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--accent, #004080);\n --pfe-band--context: var(--pfe-theme--color--surface--accent--context, saturated);\n}\n\n:host([color=\"complement\"]) {\n --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--complement, #002952);\n --pfe-band--context: var(--pfe-theme--color--surface--complement--context, saturated);\n}\n\n:host([size=\"small\"]) {\n padding: calc(var(--pfe-band--Padding--vertical, calc( var(--pfe-theme--container-spacer, 1rem) * 4)) / 4) var(--pfe-band--Padding--horizontal, calc( var(--pfe-theme--container-spacer, 1rem) * 1));\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n :host([size=\"small\"]) {\n /* IE10+ */\n padding: 1rem;\n }\n}\n\n.pfe-band__container {\n margin: 0 auto;\n}\n\n:host(:not([full-width])) .pfe-band__container {\n max-width: var(--pfe-band--Width, auto);\n}\n\n@media screen and (min-width: 768px) {\n :host(:not([full-width])) .pfe-band__container {\n max-width: var(--pfe-band--Width, calc(768px - (var(--pfe-band--Padding--horizontal, calc( var(--pfe-theme--container-spacer, 1rem) * 1)) * 4)));\n }\n}\n\n@media screen and (min-width: 992px) {\n :host(:not([full-width])) .pfe-band__container {\n max-width: var(--pfe-band--Width, calc(992px - (var(--pfe-band--Padding--horizontal, calc( var(--pfe-theme--container-spacer, 1rem) * 1)) * 4)));\n }\n}\n\n@media screen and (min-width: 1200px) {\n :host(:not([full-width])) .pfe-band__container {\n max-width: var(--pfe-band--Width, calc(1200px - (var(--pfe-band--Padding--horizontal, calc( var(--pfe-theme--container-spacer, 1rem) * 1)) * 4)));\n }\n}\n\n@supports (display: grid) {\n .pfe-band__container {\n display: grid;\n grid-template-rows: auto;\n grid-template-columns: auto;\n grid-template-areas: \"body\";\n grid-row-gap: var(--pfe-band--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n row-gap: var(--pfe-band--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n grid-column-gap: var(--pfe-band--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n column-gap: var(--pfe-band--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n }\n :host([has_header]) .pfe-band__container {\n grid-template-areas: \"header\" \"body\";\n }\n :host([has_aside]) .pfe-band__container {\n grid-template-areas: \"body\" \"aside\";\n }\n @media (max-width: 767px) {\n :host([has_aside][aside-mobile=\"top\"]) .pfe-band__container {\n grid-template-areas: \"aside\" \"body\";\n }\n }\n @media (min-width: 768px) {\n :host([has_aside]) .pfe-band__container {\n grid-template-areas: \"body aside\";\n }\n :host([has_aside][aside-desktop=\"left\"]) .pfe-band__container {\n grid-template-areas: \"aside body\";\n }\n }\n :host([has_footer]) .pfe-band__container {\n grid-template-areas: \"body\" \"footer\";\n }\n :host([has_header][has_aside]) .pfe-band__container {\n grid-template-areas: \"header\" \"body\" \"aside\";\n }\n @media (max-width: 767px) {\n :host([has_header][has_aside][aside-mobile=\"top\"]) .pfe-band__container {\n grid-template-areas: \"aside\" \"header\" \"body\";\n }\n }\n @media (min-width: 768px) {\n :host([has_header][has_aside]) .pfe-band__container {\n grid-template-areas: \"header header\" \"body aside\";\n }\n :host([has_header][has_aside][aside-desktop=\"left\"]) .pfe-band__container {\n grid-template-areas: \"header header\" \"aside body\";\n }\n :host([has_header][has_aside][aside-height=\"full\"]) .pfe-band__container {\n grid-template-areas: \"header aside\" \"body aside\";\n }\n :host([has_header][has_aside][aside-desktop=\"left\"][aside-height=\"full\"]) .pfe-band__container {\n grid-template-areas: \"aside header\" \"aside body\";\n }\n }\n :host([has_header][has_footer]) .pfe-band__container {\n grid-template-areas: \"header\" \"body\" \"footer\";\n }\n :host([has_footer][has_aside]) .pfe-band__container {\n grid-template-areas: \"body\" \"aside\" \"footer\";\n }\n @media (max-width: 767px) {\n :host([has_footer][has_aside][aside-mobile=\"top\"]) .pfe-band__container {\n grid-template-areas: \"aside\" \"body\" \"footer\";\n }\n }\n @media (min-width: 768px) {\n :host([has_footer][has_aside]) .pfe-band__container {\n grid-template-areas: \"body aside\" \"footer footer\";\n }\n :host([has_footer][has_aside][aside-desktop=\"left\"]) .pfe-band__container {\n grid-template-areas: \"aside body\" \"footer footer\";\n }\n :host([has_footer][has_aside][aside-height=\"full\"]) .pfe-band__container {\n grid-template-areas: \"body aside\" \"footer aside\";\n }\n :host([has_footer][has_aside][aside-desktop=\"left\"][aside-height=\"full\"]) .pfe-band__container {\n grid-template-areas: \"aside body\" \"aside footer\";\n }\n }\n :host([has_header][has_aside][has_footer]) .pfe-band__container {\n grid-template-areas: \"header\" \"body\" \"footer\" \"aside\";\n }\n @media (max-width: 767px) {\n :host([has_header][has_aside][has_footer][aside-mobile=\"top\"]) .pfe-band__container {\n grid-template-areas: \"aside\" \"header\" \"body\" \"footer\";\n }\n }\n @media (min-width: 768px) {\n :host([has_header][has_aside][has_footer]) .pfe-band__container {\n grid-template-areas: \"header header\" \"body aside\" \"footer footer\";\n }\n :host([has_header][has_aside][has_footer][aside-desktop=\"left\"]) .pfe-band__container {\n grid-template-areas: \"header header\" \"aside body\" \"footer footer\";\n }\n :host([has_header][has_aside][has_footer][aside-height=\"full\"]) .pfe-band__container {\n grid-template-areas: \"header aside\" \"body aside\" \"footer aside\";\n }\n :host([has_header][has_aside][has_footer][aside-desktop=\"left\"][aside-height=\"full\"]) .pfe-band__container {\n grid-template-areas: \"aside header\" \"aside body\" \"aside footer\";\n }\n }\n @media (min-width: 768px) {\n .pfe-band__container {\n grid-template-rows: auto;\n grid-template-columns: 1fr;\n }\n :host([has_aside]) .pfe-band__container {\n grid-template-rows: auto;\n grid-template-columns: 1fr var(--pfe-band--Width__aside--sm, 240px);\n }\n :host([has_aside][aside-desktop=\"left\"]) .pfe-band__container {\n grid-template-rows: auto;\n grid-template-columns: var(--pfe-band--Width__aside--sm, 240px) 1fr;\n }\n }\n @media (min-width: 992px) {\n :host([has_aside]) .pfe-band__container {\n grid-template-rows: auto;\n grid-template-columns: var(--pfe-band--layout, 1fr var(--pfe-band--Width__aside--lg, 300px));\n }\n :host([has_aside][aside-desktop=\"left\"]) .pfe-band__container {\n grid-template-rows: auto;\n grid-template-columns: var(--pfe-band--layout, var(--pfe-band--Width__aside--lg, 300px) 1fr);\n }\n }\n}\n\n:host([full-width]) .pfe-band__container {\n max-width: var(--pfe-band--Width, 100%);\n}\n\n@media screen and (min-width: 768px) {\n :host([full-width]) .pfe-band__container {\n width: calc(100% - var(--pfe-band--Padding--horizontal, calc( var(--pfe-theme--container-spacer, 1rem) * 1)) * 4);\n }\n}\n\n@media screen and (min-width: 992px) {\n :host([full-width]) .pfe-band__container {\n width: calc(100% - var(--pfe-band--Padding--horizontal, calc( var(--pfe-theme--container-spacer, 1rem) * 1)) * 4);\n }\n}\n\n@media screen and (min-width: 1200px) {\n :host([full-width]) .pfe-band__container {\n width: calc(100% - var(--pfe-band--Padding--horizontal, calc( var(--pfe-theme--container-spacer, 1rem) * 1)) * 8);\n }\n}\n\n.pfe-band__container,\n.pfe-band__wrapper {\n width: 100%;\n margin-bottom: calc(-1 * var(--pfe-band--gutter--vertical, var(--pfe-theme--container-spacer, 1rem)));\n margin-right: calc(-1 * var(--pfe-band--gutter--vertical, var(--pfe-theme--container-spacer, 1rem)));\n}\n\n@supports (display: grid) {\n .pfe-band__container,\n .pfe-band__wrapper {\n margin: 0 auto;\n }\n}\n\n:host([full-width]) .pfe-band__wrapper {\n max-width: var(--pfe-band--Width, 100%);\n}\n\n.pfe-band__aside {\n height: 100%;\n}\n\nslot[name=\"pfe-band--aside\"] {\n display: block;\n height: 100%;\n}\n\n.pfe-band__header {\n margin-bottom: var(--pfe-band__header--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n margin-right: var(--pfe-band__header--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n}\n\n@supports (display: grid) {\n .pfe-band__header {\n grid-area: header;\n margin-bottom: 0;\n margin-right: 0;\n }\n :host([use-grid]) .pfe-band__header {\n display: grid;\n grid-template-rows: auto;\n grid-template-columns: var(--pfe-band__header--layout, 1fr);\n grid-row-gap: var(--pfe-band__header--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n row-gap: var(--pfe-band__header--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n grid-column-gap: var(--pfe-band__header--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n column-gap: var(--pfe-band__header--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n }\n}\n\n.pfe-band__body {\n margin-bottom: var(--pfe-band__body--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n margin-right: var(--pfe-band__body--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n}\n\n@supports (display: grid) {\n .pfe-band__body {\n grid-area: body;\n margin-bottom: 0;\n margin-right: 0;\n }\n :host([use-grid]) .pfe-band__body {\n display: grid;\n grid-template-rows: auto;\n grid-template-columns: var(--pfe-band__body--layout, 1fr);\n grid-row-gap: var(--pfe-band__body--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n row-gap: var(--pfe-band__body--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n grid-column-gap: var(--pfe-band__body--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n column-gap: var(--pfe-band__body--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n }\n}\n\n.pfe-band__footer {\n margin-bottom: var(--pfe-band__footer--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n margin-right: var(--pfe-band__footer--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n}\n\n@supports (display: grid) {\n .pfe-band__footer {\n grid-area: footer;\n margin-bottom: 0;\n margin-right: 0;\n }\n :host([use-grid]) .pfe-band__footer {\n display: grid;\n grid-template-rows: auto;\n grid-template-columns: var(--pfe-band__footer--layout, 1fr);\n grid-row-gap: var(--pfe-band__footer--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n row-gap: var(--pfe-band__footer--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n grid-column-gap: var(--pfe-band__footer--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n column-gap: var(--pfe-band__footer--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n }\n}\n\n.pfe-band__aside {\n margin-bottom: var(--pfe-band__aside--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n margin-right: var(--pfe-band__aside--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n}\n\n@supports (display: grid) {\n .pfe-band__aside {\n grid-area: aside;\n margin-bottom: 0;\n margin-right: 0;\n }\n :host([use-grid]) .pfe-band__aside {\n display: grid;\n grid-template-rows: auto;\n grid-template-columns: var(--pfe-band__aside--layout, 1fr);\n grid-row-gap: var(--pfe-band__aside--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n row-gap: var(--pfe-band__aside--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n grid-column-gap: var(--pfe-band__aside--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n column-gap: var(--pfe-band__aside--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n }\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n /* IE10+ */\n .pfe-band__container::after {\n clear: both;\n content: \"\";\n display: table;\n }\n .pfe-band__header,\n .pfe-band__body,\n .pfe-band__footer {\n float: left;\n }\n :host([aside-mobile=\"top\"]) .pfe-band__header, :host([aside-mobile=\"top\"])\n .pfe-band__body, :host([aside-mobile=\"top\"])\n .pfe-band__footer {\n float: right;\n }\n :host(:not([aside-height=\"full\"])) .pfe-band__header, :host(:not([aside-height=\"full\"]))\n .pfe-band__body, :host(:not([aside-height=\"full\"]))\n .pfe-band__footer {\n width: 60%;\n }\n .pfe-band__footer {\n clear: both;\n }\n .pfe-band__aside {\n flex-grow: 1;\n align-self: flex-start;\n float: right;\n width: 35%;\n margin: 0 1.9%;\n }\n :host([aside-desktop=\"left\"]) .pfe-band__aside {\n float: left;\n }\n .pfe-band__wrapper {\n width: 60%;\n float: left;\n }\n :host([aside-desktop=\"left\"]) .pfe-band__wrapper {\n float: right;\n }\n}\n","@import \"../../pfe-sass/pfe-sass\";\n\n$LOCAL: band;\n\n$LOCAL-VARIABLES: (\n // Default spacing values\n Padding--vertical: calc( #{pfe-var(container-spacer)} * 4),\n Padding--horizontal: calc( #{pfe-var(container-spacer)} * 1),\n\n // Surface colors\n BackgroundColor: pfe-var(surface--base),\n context: light,\n BackgroundPosition: center center,\n\n // Border settings\n Border: pfe-var(surface--border-width) pfe-var(surface--border-style) transparent,\n\n // Layouts, grid layouts\n layout: 1fr,\n \n header: (\n layout: 1fr,\n gutter--vertical: pfe-var(container-spacer),\n gutter--horizontal: calc(#{pfe-var(container-spacer)} * 3)\n ),\n body: (\n layout: 1fr,\n gutter--vertical: pfe-var(container-spacer),\n gutter--horizontal: calc(#{pfe-var(container-spacer)} * 3)\n ),\n footer: (\n layout: 1fr,\n gutter--vertical: pfe-var(container-spacer),\n gutter--horizontal: calc(#{pfe-var(container-spacer)} * 3)\n ),\n aside: (\n layout: 1fr,\n gutter--vertical: pfe-var(container-spacer),\n gutter--horizontal: calc(#{pfe-var(container-spacer)} * 3)\n ),\n\n // Vertical spacing\n gutter--vertical: pfe-var(container-spacer),\n gutter--horizontal: calc(#{pfe-var(container-spacer)} * 3),\n\n // Band width logic\n // Initialize at mobile breakpoint\n Width: auto,\n Width__aside--sm: 240px,\n Width__aside--lg: 300px,\n);\n\n// Nested internal variables (pfe-local calls), maps cannot \"self-reference\"\n$LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, (\n // Bring them together for ease of use below\n Padding: pfe-local(Padding--vertical) pfe-local(Padding--horizontal)\n));\n\n$regions-grid: (\n header:\n \"header\"\n \"body\",\n aside:\n \"body\"\n \"aside\",\n footer:\n \"body\"\n \"footer\",\n header-aside:\n \"header\"\n \"body\"\n \"aside\",\n header-footer:\n \"header\"\n \"body\"\n \"footer\",\n footer-aside:\n \"body\"\n \"aside\"\n \"footer\",\n header-aside-footer: \n \"header\"\n \"body\"\n \"footer\"\n \"aside\"\n);\n\n@function aside-grid($list, $full: false, $position: right, $bp: mobile) {\n // Initialize the return list to empty\n $return: ();\n\n // Remove the aside from the list for manipulation below\n $list: remove($list, \"aside\");\n\n // For desktop-sized viewports:\n @if ($bp == \"desktop\") {\n @each $section in $list {\n // If the aside region is full-height OR\n // the aside is body height & this is the body region\n @if $full or (not $full and $section == \"body\") {\n // Inject the aside region to the right or left\n // depending on the position variable\n @if $position != right {\n $return: append($return, \"aside #{$section}\");\n } @else {\n $return: append($return, \"#{$section} aside\");\n }\n } @else {\n // Otherwise region should span the grid 100%\n $return: append($return, \"#{$section} #{$section}\");\n }\n }\n\n // Return with this value for desktop, below is mobile-specific\n @return $return;\n }\n\n // Aside mobile top\n // Note: we don't have a setting for top specifically because you don't need\n // to use the function on mobile if the aside is not moved to the top\n @return \"aside\" $list;\n}\n\n:host {\n // @include pfe-set-broadcast-context(light);\n --context: #{pfe-local(context)};\n\n // Wrapper sets padding and background visuals\n display: block;\n\n // Border styles\n border: pfe-local(Border);\n\n // Base colors\n background-color: pfe-local(BackgroundColor);\n background-position: pfe-local(BackgroundPosition);\n color: pfe-broadcasted(text);\n\n // Custom padding on mobile\n padding: calc(#{pfe-local(Padding--vertical)} / 2) pfe-local(Padding--horizontal);\n\n // Variable padding on desktop\n @media (min-width: pfe-breakpoint(sm)) {\n padding: pfe-local(Padding);\n }\n\n // Apply box-sizing styles\n @include pfe-box-sizing;\n\n // Remove background color for print\n @include pfe-no-print-background;\n\n @include pfe-print-media {\n // Add the border to the card for print\n border-radius: pfe-fetch(surface--border-radius);\n border: pfe-fetch(surface--border-width) pfe-fetch(surface--border-style) pfe-fetch(surface--border);\n // Reduce padding for print\n padding: #{pfe-fetch(container-spacer) * 2} pfe-fetch(container-spacer);\n }\n\n @include browser-query(ie11) {\n background-color: pfe-fetch(surface--lightest) !important;\n background-image: none !important;\n color: pfe-fetch(text) !important;\n\n padding: #{pfe-fetch(container-spacer) * 2} pfe-fetch(container-spacer);\n @media (min-width: pfe-breakpoint(sm)) {\n padding: #{pfe-fetch(container-spacer) * 4} pfe-fetch(container-spacer);\n }\n }\n}\n\n// Use-case for transparent backgrounds\n@include pfe-contexts; // imports on=\"light\" etc support\n\n// Pull in pfe-var settings for all supported surface colors\n@include pfe-surfaces;\n\n// thinner padding on top & bottom\n:host([size=\"small\"]) {\n padding: calc(#{pfe-local(Padding--vertical)} / 4) #{pfe-local(Padding--horizontal)};\n @include browser-query(ie11) {\n padding: pfe-fetch(container-spacer);\n }\n}\n\n.pfe-band__container {\n margin: 0 auto;\n\n :host(:not([full-width])) & {\n max-width: pfe-local(Width);\n // Loop through the other breakpoints\n @each $size in (md, lg, xl) {\n @media screen and (min-width: pfe-breakpoint(#{$size})) {\n max-width: pfe-local(Width, $fallback: calc(#{pfe-breakpoint(#{$size})} - (#{pfe-local(Padding--horizontal)} * 4) ));\n }\n }\n }\n\n @supports (display: grid) {\n display: grid;\n grid-template-rows: auto;\n grid-template-columns: auto;\n\n grid-template-areas: \"body\";\n\n grid-row-gap: pfe-local(gutter--vertical);\n row-gap: pfe-local(gutter--vertical);\n grid-column-gap: pfe-local(gutter--horizontal);\n column-gap: pfe-local(gutter--horizontal);\n \n // Styles for the different combination of regions\n //-- Grid template area styles --//\n @each $selectors, $layout in $regions-grid {\n $sets: ();\n $has_aside: str-index($selectors, \"aside\");\n\n @each $region in str-split($selectors, \"-\") {\n $sets: append($sets, \"[has_#{$region}]\");\n }\n\n // Combine the sets into a selector\n $regions: to-string($sets, \"\");\n\n // Declare the mobile-first layouts\n :host(#{$regions}) & {\n grid-template-areas: $layout;\n }\n\n // If there is an aside region, create variants for \n // 1. mobile top placement\n // 2. desktop left positioning\n // 3. full height layout\n\n @if ($has_aside) {\n // 0-MD breakpoint\n @media (max-width: pfe-breakpoint(md, $max: true)) {\n :host(#{$regions}[aside-mobile=\"top\"]) & {\n grid-template-areas: aside-grid($layout);\n }\n }\n\n // MD+ breakpoint\n @media (min-width: pfe-breakpoint(md)) {\n :host(#{$regions}) & {\n grid-template-areas: aside-grid($layout, $bp: desktop);\n }\n\n :host(#{$regions}[aside-desktop=\"left\"]) & {\n grid-template-areas: aside-grid($layout, $position: left, $bp: desktop);\n }\n\n @if length($layout) > 2 {\n :host(#{$regions}[aside-height=\"full\"]) & {\n grid-template-areas: aside-grid($layout, $full: true, $bp: desktop);\n }\n\n :host(#{$regions}[aside-desktop=\"left\"][aside-height=\"full\"]) & {\n grid-template-areas: aside-grid($layout, $full: true, $position: left, $bp: desktop);\n }\n }\n }\n }\n\n }\n //-- END grid template area styles --//\n\n @media (min-width: pfe-breakpoint(md)) {\n grid-template-rows: auto;\n grid-template-columns: 1fr;\n\n :host([has_aside]) & {\n grid-template-rows: auto;\n grid-template-columns: 1fr pfe-local(Width__aside--sm);\n }\n\n :host([has_aside][aside-desktop=\"left\"]) & {\n grid-template-rows: auto;\n grid-template-columns: pfe-local(Width__aside--sm) 1fr;\n }\n }\n\n @media (min-width: pfe-breakpoint(lg)) { \n :host([has_aside]) & {\n grid-template-rows: auto;\n grid-template-columns: pfe-local(layout, $fallback: 1fr pfe-local(Width__aside--lg));\n }\n :host([has_aside][aside-desktop=\"left\"]) & {\n grid-template-rows: auto;\n grid-template-columns: pfe-local(layout, $fallback: pfe-local(Width__aside--lg) 1fr);\n }\n }\n }\n\n :host([full-width]) & {\n max-width: pfe-local(Width, $fallback: 100%);\n // Set the regions to fill their containers\n @each $size in (\"md\", \"lg\", \"xl\") {\n @media screen and (min-width: pfe-breakpoint( #{$size} ) ) {\n @if ($size == \"md\" or $size == \"lg\") {\n width: calc(100% - #{pfe-local(Padding--horizontal)} * 4);\n } @else if ($size == \"xl\") {\n width: calc(100% - #{pfe-local(Padding--horizontal)} * 8);\n }\n }\n }\n }\n}\n\n.pfe-band__container,\n.pfe-band__wrapper {\n width: 100%;\n\n // Fallback margins if grid is not used\n margin-bottom: calc(-1 * #{pfe-local(gutter--vertical)});\n margin-right: calc(-1 * #{pfe-local(gutter--vertical)});\n @supports (display: grid) {\n margin: 0 auto;\n }\n}\n\n.pfe-band__wrapper {\n :host([full-width]) & {\n max-width: pfe-local(Width, $fallback: 100%);\n }\n}\n\n.pfe-band__aside {\n height: 100%;\n}\n\nslot[name=\"pfe-band--aside\"] {\n display: block;\n height: 100%;\n}\n\n@each $section in (header, body, footer, aside) {\n .pfe-band__#{$section} {\n // Fallback margins if grid is not used\n margin-bottom: pfe-local(gutter--vertical, $region: $section);\n margin-right: pfe-local(gutter--vertical, $region: $section);\n\n // Apply the grid layout\n @supports (display: grid) {\n // Apply the section as a named grid-area\n grid-area: $section;\n margin-bottom: 0;\n margin-right: 0;\n\n :host([use-grid]) & {\n display: grid;\n grid-template-rows: auto;\n grid-template-columns: pfe-local(layout, $region: $section);\n\n grid-row-gap: pfe-local(gutter--vertical, $region: $section);\n row-gap: pfe-local(gutter--vertical, $region: $section);\n grid-column-gap: pfe-local(gutter--horizontal, $region: $section);\n column-gap: pfe-local(gutter--horizontal, $region: $section);\n }\n }\n }\n}\n\n// For each section in the band layout,\n// define their internal behavior for slotted elements\n@include browser-query(ie11) {\n .pfe-band__container {\n @include pfe-clearfix;\n }\n\n .pfe-band__header,\n .pfe-band__body,\n .pfe-band__footer {\n float: left;\n\n :host([aside-mobile=\"top\"]) & {\n float: right;\n }\n \n :host(:not([aside-height=\"full\"])) & {\n width: 60%;\n }\n }\n\n .pfe-band__footer {\n clear: both;\n }\n\n .pfe-band__aside {\n flex-grow: 1;\n align-self: flex-start;\n\n float: right;\n \n width: 35%;\n margin: 0 1.9%;\n \n :host([aside-desktop=\"left\"]) & {\n float: left;\n }\n }\n\n .pfe-band__wrapper {\n width: 60%;\n float: left;\n \n :host([aside-desktop=\"left\"]) & {\n float: right;\n }\n }\n}\n","////\n/// Tools for leveraging custom property stacks\n/// @group custom-properties\n/// @author castastrophe\n////\n\n/// Get full theme stack with a fallback from the provided map - used by pfe-var and pfe-zindex\n/// @param {String} $category - Category name to be appended to variables within the map/system\n/// @param {String} $key - Variable name to be used and prepended with --pfe-theme\n/// @param {Map} $map - Sass map of variables\n/// @param {String} $fallback [null] - Optional fallback override\n/// @param {Boolean} $use-fallback [true] - Optional hook to return a stack with no fallback value\n/// @requires $custom-prop-prefix\n/// @return {String} theme stack with fallback value from a sass map\n@function pfe-get-from-map($category, $key, $map, $fallback: null, $prefix: \"#{$custom-prop-prefix}-theme\", $use-fallback: true) {\n // Start building the variable declaration\n $var-declaration: \"--#{$prefix}--\";\n @if $prefix == \"pf-c\" {\n $var-declaration: \"--#{$prefix}-\"; // one dash at the end\n }\n // If the category exists, inject that into the string\n @if $category != \"\" {\n $var-declaration: \"#{$var-declaration}#{$category}--\";\n }\n // Append the key to the string\n $var-declaration: \"#{$var-declaration}#{$key}\";\n\n // If the fallback is not provided but use-fallback is set to true\n @if $fallback == null and $use-fallback and map-get($map, $key) != null {\n $fallback: map-get($map, $key);\n }\n @if $fallback != null {\n // Create the variable declaration\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration}); \n}\n\n\n\n/// Returns CSS Var for the local component-scoped variable\n/// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--'\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $custom-prop-prefix\n/// @see $LOCAL\n/// @example\n/// :host {\n/// padding-top: #{pfe-local(paddingTop)};\n/// padding-bottom: #{pfe-local(paddingBottom)};\n/// }\n@function pfe-local($cssvar, $fallback: null, $region: null) {\n // If a fallback is not defined, use the global variables map\n @if $fallback == null and length($LOCAL-VARIABLES) > 0 {\n @if $region == null {\n $fallback: map-get($LOCAL-VARIABLES, $cssvar);\n }\n @else {\n $submap: map-get($LOCAL-VARIABLES, $region);\n @if type-of($submap) == \"map\" {\n $fallback: map-deep-get($LOCAL-VARIABLES, $region, $cssvar);\n }\n }\n }\n\n // If a region value exists, build the region string\n @if $region != null {\n $region: \"__#{$region}\";\n }\n\n // Start building the variable declaration\n $var-declaration: \"--#{$custom-prop-prefix}-#{$LOCAL}#{$region}--#{to-string($cssvar, '--')}\";\n \n @if $fallback != null {\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration});\n}\n\n/// Fetches a CSS variable stack for broadcasted variables, providing a hook for context\n/// to influence the styles of children elements such as p tags or links.\n/// @param {String} $broadcast - name of the broadcast variable to apply\n/// @requires {String} $custom-prop-prefix - Name of repo, which is \"pfe\"\n/// @example - scss\n/// :host {\n/// color: pfe-broadcasted(link);\n/// }\n/// @example - css\n/// :host {\n/// color: var(--pfe-broadcasted--link, #06c);\n/// }\n@function pfe-broadcasted($broadcast, $use-fallback: true) {\n $fallback: \"\";\n @if $use-fallback {\n $fallback: \", #{map-get($pfe-broadcasted, #{to-string($broadcast,'--')})}\";\t\n }\n @if not index($BROADCAST-VARS, first(str-split($broadcast, '--'))) {\n @error \"--#{$custom-prop-prefix}-broadcasted--#{$broadcast} variable is not currently supported.\";\n }\n @else {\n @return var(--#{$custom-prop-prefix}-broadcasted--#{to-string($broadcast,'--')}#{unquote($fallback)});\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme--zindex\n/// @requires {Map} $pfe-zindex - SASS Map of z-index values\n/// @see $pfe-zindex\n/// @example - scss - In your component styles\n/// .my-element {\n/// z-index: pfe-zindex( content );\n/// }\n\n@function pfe-zindex($cssvar) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-zindex, $var-name) != null {\n @return pfe-get-from-map(\"zindex\", $var-name, $pfe-zindex);\n }\n @else {\n @error \"The key for #{$var-name} could not be found in the $pfe-zindex map.\";\n }\n}\n\n/// Returns the value (only) of a property from the respective maps\n/// Similar to pfe-var, but does not include css variable in the compiled CSS\n/// @param {String} $name - Name of the key for the map\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example - scss - In your component styles\n/// .my-element {\n/// background-color: pfe-fetch( ui-base );\n/// }\n@function pfe-fetch($name, $region: null) {\n $var-name: to-string($name, \"--\");\n @if $region != null and map-deep-get($LOCAL-VARIABLES, $region, $var-name) != null {\n @return map-deep-get($LOCAL-VARIABLES, $region, $var-name);\n }\n @else if $region == null and map-get($LOCAL-VARIABLES, $var-name) != null {\n @return map-get($LOCAL-VARIABLES, $var-name);\n }\n @else if map-get($pfe-vars, $var-name) != null {\n @return map-get($pfe-vars, $var-name);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return map-get($pfe-colors, $var-name);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return map-get($pfe-broadcasted, $var-name);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return map-get($pfe-typography-base, $var-name);\n }\n\n // PATTERNFLY CORE\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return map-get($pf-type-sizing, $var-name);\n }\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return map-get($pf-type-sizing--component, $var-name);\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return map-get($pf-type-sizing--modifers, $var-name);\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return map-get($pf-type-sizing--content, $var-name);\n }\n // DEPRECATED\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return map-get($pfe-typography-base-deprecated, $var-name);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return map-get($pfe-typography-deprecated, $var-name);\n }\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme\n/// @param {String} $fallback [null] - Optional custom fallback\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example scss - In your component styles\n/// .my-element {\n/// padding: pfe-var( container-spacer );\n/// font-size: pfe-var( font-size );\n/// }\n/// @example - css Rendered output\n/// .my-element {\n/// padding: var(--pfe-theme--container-spacer, 16px);\n/// font-size: var(--pfe-theme--font-size, 16px);\n/// }\n@function pfe-var($cssvar, $fallback: null) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-vars, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-vars, $fallback);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return pfe-get-from-map(\"color\", $var-name, $pfe-colors, $fallback);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-broadcasted);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base, $fallback);\n }\n // PATTERNFLY CORE:\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing, $fallback, $prefix: \"pf-global\");\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--modifers, $fallback, $prefix: \"pf-c\");\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--content, $fallback, $prefix: \"pf-c\");\n }\n // PFE components (must be below core)\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--component, $fallback);\n }\n\n // DEPRECATED:\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base-deprecated, $fallback);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-deprecated, $fallback);\n }\n\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}","// $boxSize = any box-sizing property, default is border-box\n@mixin pfe-box-sizing($boxSize: border-box) {\n *,\n *::before,\n *::after {\n box-sizing: $boxSize;\n }\n}\n\n@mixin pfe-clearfix {\n &::after {\n clear: both;\n content: \"\";\n display: table;\n }\n}\n\n@mixin pfe-container {\n @extend %container;\n\n padding: calc(#{pfe-local(Padding--vertical)} / 2) #{pfe-local(Padding--horizontal)};\n\n @media (min-width: pfe-breakpoint(sm)) {\n padding: pfe-local(Padding);\n }\n}\n\n// Note: This works best with the padding set on the container and the container nested\n// below the application of the collapsible mixin\n@mixin pfe-collapsible($state: closed) {\n\n @if $state != closed {\n opacity: 1;\n height: auto;\n } @else {\n display: block;\n position: relative;\n transition: height pfe-var(animation-speed) pfe-var(animation-timing);\n will-change: height;\n overflow-y: clip;\n height: 0;\n }\n}\n\n/// Custom focus ring\n@mixin focus-ring(\n $offset: 0,\n $pseudo: after,\n $color: pfe-var(link)\n) {\n outline: none;\n position: relative;\n\n // Focus uses a pseudo-element because it needs to overflow the container, outline also does not support border-radius settings\n &::#{$pseudo} {\n position: absolute;\n content: \"\";\n top: $offset;\n left: $offset;\n width: calc(100% + #{pfe-var(ui--border-width--active)});\n height: calc(100% + #{pfe-var(ui--border-width--active)});\n border-radius: pfe-var(ui--border-radius);\n border: pfe-var(ui--border-width--md) pfe-var(ui--border-style) transparent;\n @include browser-query(ie11) {\n height: 100%;\n }\n }\n\n &:focus::#{$pseudo} {\n border-color: $color;\n }\n \n // Remove the focus indicator on mouse-focus for browsers\n // that do support :focus-visible\n &:focus:not(:focus-visible)::#{$pseudo} {\n border: unset;\n }\n}\n\n/// Accent bar styles\n@mixin accent-bar(\n $direction: horizontal,\n $offset: (\n top: 0px,\n left: 0px\n ),\n $thickness: pfe-var(surface--border-width--heavy),\n $color: transparent\n) {\n $vertical: \"\";\n $horizontal: \"\";\n\n position: absolute;\n content: \"\";\n @each $direction, $size in $offset {\n #{$direction}: $size;\n @if $direction == \"top\" or $direction == \"bottom\" {\n @if $vertical != \"\" {\n $vertical: \"#{$vertical} - #{$size}\";\n } @else {\n $vertical: \"#{$size}\";\n }\n } @else {\n @if $horizontal != \"\" {\n $horizontal: \"#{$horizontal} - #{$size)}\";\n } @else {\n $horizontal: \"#{$size}\";\n }\n }\n }\n background-color: $color;\n @if $direction != horizontal {\n width: calc(#{$thickness} - #{$horizontal});\n height: calc(100% - #{$vertical});\n } @else {\n width: calc(100% - #{$vertical});\n height: calc(#{$thickness} - #{$horizontal});\n }\n}\n","// This file is for initial variable values.\n// All variables should have a valid css value,\n// and use !default so they can be overwritten.\n\n// `$pf-global--concept--PropiertyCamelCase--modifier--state`\n\n// Patternfly options\n\n// Quickly modify global styling by enabling or disabling optional features.\n$pf-global--enable-reset: true !default;\n$pf-global--enable-font-overpass-cdn: false !default;\n$pf-global--enable-fontawesome-cdn: false !default;\n$pf-global--disable-fontawesome: false !default;\n$pf-global--load-pf-3: false !default;\n$pf-global--enable-shield: false !default;\n$pf-global--unset-root-font-size: true !default;\n\n// Patternfly uses the default root size of the browser, it assumes a 16px base\n// since most browser root size is 16. This variables is just to make the\n// transformation from px to rem.\n$pf-global--font-size-root: 16 !default; // for fonts\n$pf-global--space-size-root: 16 !default; // for spaces\n\n// Colors\n// Background color\n$pf-global--BackgroundColor--100: $pf-color-white !default;\n$pf-global--BackgroundColor--200: $pf-color-black-200 !default;\n\n// do not use - background colors for exceptions and defining theme\n// light theme\n$pf-global--BackgroundColor--light-100: $pf-color-white !default;\n$pf-global--BackgroundColor--light-200: $pf-color-black-100 !default;\n$pf-global--BackgroundColor--light-300: $pf-color-black-200 !default;\n\n// dark theme\n$pf-global--BackgroundColor--dark-100: $pf-color-black-900 !default;\n$pf-global--BackgroundColor--dark-200: $pf-color-black-800 !default;\n$pf-global--BackgroundColor--dark-300: $pf-color-black-850 !default;\n$pf-global--BackgroundColor--dark-400: $pf-color-black-700 !default;\n$pf-global--BackgroundColor--dark-transparent-100: rgba($pf-color-black-1000, .62) !default;\n$pf-global--BackgroundColor--dark-transparent-200: rgba($pf-color-black-1000, .32) !default;\n\n// Text color\n$pf-global--Color--100: $pf-color-black-900 !default;\n$pf-global--Color--200: $pf-color-black-600 !default;\n$pf-global--Color--300: $pf-color-black-800 !default;\n$pf-global--Color--400: $pf-color-black-500 !default;\n\n// do not use - text colors for exceptions and defining theme\n// light theme\n$pf-global--Color--light-100: $pf-color-white !default;\n$pf-global--Color--light-200: $pf-color-black-200 !default;\n$pf-global--Color--light-300: $pf-color-black-300 !default;\n\n// dark theme\n$pf-global--Color--dark-100: $pf-color-black-900 !default;\n$pf-global--Color--dark-200: $pf-color-black-600 !default;\n\n// States color\n// active\n$pf-global--active-color--100: $pf-color-blue-400 !default;\n$pf-global--active-color--200: $pf-color-blue-100 !default;\n$pf-global--active-color--300: $pf-color-blue-300 !default;\n$pf-global--active-color--400: $pf-color-blue-200 !default;\n\n// disabled\n$pf-global--disabled-color--100: $pf-color-black-600 !default;\n$pf-global--disabled-color--200: $pf-color-black-300 !default;\n$pf-global--disabled-color--300: $pf-color-black-200 !default;\n\n// Theme color\n$pf-global--primary-color--100: $pf-color-blue-400 !default;\n$pf-global--primary-color--200: $pf-color-blue-500 !default;\n$pf-global--secondary-color--100: $pf-color-black-600 !default;\n$pf-global--default-color--100: $pf-color-cyan-200 !default;\n$pf-global--default-color--200: $pf-color-cyan-300 !default;\n$pf-global--default-color--300: $pf-color-cyan-500 !default;\n$pf-global--success-color--100: $pf-color-green-500 !default;\n$pf-global--success-color--200: $pf-color-green-600 !default;\n$pf-global--info-color--100: $pf-color-blue-300 !default;\n$pf-global--info-color--200: $pf-color-blue-600 !default;\n$pf-global--warning-color--100: $pf-color-gold-400 !default;\n$pf-global--warning-color--200: $pf-color-gold-600 !default;\n$pf-global--danger-color--100: $pf-color-red-100 !default;\n$pf-global--danger-color--200: $pf-color-red-200 !default;\n$pf-global--danger-color--300: $pf-color-red-400 !default;\n\n// do not use - theme colors for exceptions and defining theme\n$pf-global--primary-color--light-100: $pf-color-blue-200 !default;\n$pf-global--primary-color--dark-100: $pf-color-blue-400 !default;\n\n// Shadows\n// small\n$pf-global--BoxShadow--sm: 0 pf-size-prem(1px) pf-size-prem(2px) 0 rgba($pf-color-black-1000, .12), 0 0 pf-size-prem(2px) 0 rgba($pf-color-black-1000, .06) !default;\n$pf-global--BoxShadow--sm-top: 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) !default;\n$pf-global--BoxShadow--sm-right: pf-size-prem(2px) 0 pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) !default;\n$pf-global--BoxShadow--sm-bottom: 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) !default;\n$pf-global--BoxShadow--sm-left: pf-size-prem(-2px) 0 pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) !default;\n\n// medium\n$pf-global--BoxShadow--md: 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-color-black-1000, .12), 0 0 pf-size-prem(4px) 0 rgba($pf-color-black-1000, .06) !default;\n$pf-global--BoxShadow--md-top: 0 pf-size-prem(-8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-color-black-1000, .18) !default;\n$pf-global--BoxShadow--md-right: pf-size-prem(8px) 0 pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-color-black-1000, .18) !default;\n$pf-global--BoxShadow--md-bottom: 0 pf-size-prem(8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-color-black-1000, .18) !default;\n$pf-global--BoxShadow--md-left: pf-size-prem(-8px) 0 pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-color-black-1000, .18) !default;\n\n// large\n$pf-global--BoxShadow--lg: 0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba($pf-color-black-1000, .16), 0 0 pf-size-prem(6px) 0 rgba($pf-color-black-1000, .08) !default;\n$pf-global--BoxShadow--lg-top: 0 pf-size-prem(-12px) pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-color-black-1000, .18) !default;\n$pf-global--BoxShadow--lg-right: pf-size-prem(12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-color-black-1000, .18) !default;\n$pf-global--BoxShadow--lg-bottom: 0 pf-size-prem(12px) pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-color-black-1000, .18) !default;\n$pf-global--BoxShadow--lg-left: pf-size-prem(-12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-color-black-1000, .18) !default;\n\n// x-large\n$pf-global--BoxShadow--xl: 0 pf-size-prem(16px) pf-size-prem(32px) 0 rgba($pf-color-black-1000, .16), 0 0 pf-size-prem(8px) 0 rgba($pf-color-black-1000, .1) !default;\n$pf-global--BoxShadow--xl-top: 0 pf-size-prem(-16px) pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-color-black-1000, .2) !default;\n$pf-global--BoxShadow--xl-right: pf-size-prem(16px) 0 pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-color-black-1000, .2) !default;\n$pf-global--BoxShadow--xl-bottom: 0 pf-size-prem(16px) pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-color-black-1000, .2) !default;\n$pf-global--BoxShadow--xl-left: pf-size-prem(-16px) 0 pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-color-black-1000, .2) !default;\n\n// inset\n$pf-global--BoxShadow--inset: inset 0 0 pf-size-prem(10) 0 rgba($pf-color-black-1000, .25) !default;\n\n// Fontpath\n$pf-global--font-path: \"./assets/fonts\" !default;\n\n// Iconpath\n$fa-font-path: \"./assets/fonts/webfonts\" !default;\n\n// FontIcon path\n$pf-global--fonticon-path: \"./assets/pficon\" !default;\n\n// Imagepath\n$pf-global--image-path: \"./assets/images\" !default;\n\n// Spacers\n$pf-global--spacer--xs: pf-size-prem(4px) !default; // Orange\n$pf-global--spacer--sm: pf-size-prem(8px) !default; // Light green\n$pf-global--spacer--md: pf-size-prem(16px) !default; // Dark green\n$pf-global--spacer--lg: pf-size-prem(24px) !default; // Dark Blue\n$pf-global--spacer--xl: pf-size-prem(32px) !default; // Light Blue\n$pf-global--spacer--2xl: pf-size-prem(48px) !default; // Light Purple\n$pf-global--spacer--3xl: pf-size-prem(64px) !default; // Dark Purple\n$pf-global--spacer--4xl: pf-size-prem(80px) !default; // Dark magenta\n\n// Form spacer - only used in forms\n$pf-global--spacer--form-element: pf-size-prem(6px) !default;\n\n// Gutter\n$pf-global--gutter: $pf-global--spacer--md !default;\n$pf-global--gutter--md: $pf-global--spacer--lg !default;\n\n// Z-Index\n$pf-global--ZIndex--xs: 100;\n$pf-global--ZIndex--sm: 200;\n$pf-global--ZIndex--md: 300;\n$pf-global--ZIndex--lg: 400;\n$pf-global--ZIndex--xl: 500;\n$pf-global--ZIndex--2xl: 600;\n\n// Grid breakpoints\n$pf-global--breakpoint--xs: 0 !default;\n$pf-global--breakpoint--sm: 576px !default;\n$pf-global--breakpoint--md: 768px !default;\n$pf-global--breakpoint--lg: 992px !default;\n$pf-global--breakpoint--xl: 1200px !default;\n$pf-global--breakpoint--2xl: 1450px !default;\n\n// Borders\n$pf-global--BorderWidth--sm: 1px !default;\n$pf-global--BorderWidth--md: 2px !default;\n$pf-global--BorderWidth--lg: 3px !default;\n$pf-global--BorderWidth--xl: 4px !default;\n$pf-global--BorderColor--100: $pf-color-black-300 !default;\n$pf-global--BorderColor--200: $pf-color-black-500 !default;\n$pf-global--BorderColor--300: $pf-color-black-200 !default;\n$pf-global--BorderColor--dark-100: $pf-color-black-300 !default;\n$pf-global--BorderColor--light-100: $pf-color-black-400 !default;\n$pf-global--BorderRadius--sm: 3px !default;\n$pf-global--BorderRadius--lg: 30em !default; // This is a sufficiently large number to ensure in most cases that the ends are evenly rounded.\n\n// Icons\n$pf-global--icon--Color--light: $pf-color-black-600 !default;\n$pf-global--icon--Color--dark: $pf-color-black-900 !default;\n$pf-global--icon--FontSize--sm: pf-font-prem(10px) !default;\n$pf-global--icon--FontSize--md: pf-font-prem(18px) !default;\n$pf-global--icon--FontSize--lg: pf-font-prem(24px) !default;\n$pf-global--icon--FontSize--xl: pf-font-prem(54px) !default;\n\n// Fonts\n// Font family\n// stylelint-disable value-keyword-case\n$pf-global--FontFamily--sans-serif: '\"RedHatText\", \"Overpass\", overpass, helvetica, arial, sans-serif';\n$pf-global--FontFamily--heading--sans-serif: '\"RedHatDisplay\", \"Overpass\", overpass, helvetica, arial, sans-serif';\n$pf-global--FontFamily--monospace: '\"Liberation Mono\", consolas, \"SFMono-Regular\", menlo, monaco, \"Courier New\", monospace';\n$pf-global--FontFamily--redhat-updated--sans-serif: '\"RedHatTextUpdated\", \"Overpass\", overpass, helvetica, arial, sans-serif';\n$pf-global--FontFamily--redhat-updated--heading--sans-serif: '\"RedHatDisplayUpdated\", \"Overpass\", overpass, helvetica, arial, sans-serif';\n$pf-global--FontFamily--redhat--monospace: '\"RedHatMono\", \"Liberation Mono\", consolas, \"SFMono-Regular\", menlo, monaco, \"Courier New\", monospace';\n$pf-global--FontFamily--redhatVF--sans-serif: '\"RedHatTextVF\", \"RedHatText\", \"Overpass\", overpass, helvetica, arial, sans-serif';\n$pf-global--FontFamily--redhatVF--heading--sans-serif: '\"RedHatDisplayVF\", \"RedHatDisplay\", \"Overpass\", overpass, helvetica, arial, sans-serif';\n$pf-global--FontFamily--redhatVF--monospace: '\"RedHatMonoVF\", \"RedHatMono\", \"Liberation Mono\", consolas, \"SFMono-Regular\", menlo, monaco, \"Courier New\", monospace';\n$pf-global--FontFamily--overpass--sans-serif: '\"overpass\", overpass, \"open sans\", -apple-system, blinkmacsystemfont, \"Segoe UI\", roboto, \"Helvetica Neue\", arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"' !default;\n$pf-global--FontFamily--overpass--monospace: '\"overpass-mono\", overpass-mono, \"SFMono-Regular\", menlo, monaco, consolas, \"Liberation Mono\", \"Courier New\", monospace' !default;\n// stylelint-enable value-keyword-case\n\n// Font size\n$pf-global--FontSize--4xl: pf-font-prem(36px) !default;\n$pf-global--FontSize--3xl: pf-font-prem(28px) !default;\n$pf-global--FontSize--2xl: pf-font-prem(24px) !default;\n$pf-global--FontSize--xl: pf-font-prem(20px) !default;\n$pf-global--FontSize--lg: pf-font-prem(18px) !default;\n$pf-global--FontSize--md: pf-font-prem(16px) !default;\n$pf-global--FontSize--sm: pf-font-prem(14px) !default;\n$pf-global--FontSize--xs: pf-font-prem(12px) !default;\n\n// Font weight\n$pf-global--FontWeight--light: 300 !default;\n$pf-global--FontWeight--normal: 400 !default;\n$pf-global--FontWeight--bold: 700 !default;\n$pf-global--FontWeight--semi-bold: $pf-global--FontWeight--bold !default; // Just for legacy support while supporting Overpass\n$pf-global--FontWeight--overpass--semi-bold: 500 !default;\n$pf-global--FontWeight--overpass--bold: 600 !default;\n\n// Line height\n$pf-global--LineHeight--sm: 1.3 !default;\n$pf-global--LineHeight--md: 1.5 !default;\n\n// Links\n$pf-global--link--Color: $pf-global--primary-color--100 !default;\n$pf-global--link--Color--hover: $pf-global--primary-color--200 !default;\n$pf-global--link--Color--light: $pf-global--active-color--300 !default;\n$pf-global--link--Color--light--hover: $pf-global--active-color--400 !default;\n$pf-global--link--Color--dark: $pf-global--primary-color--100 !default;\n$pf-global--link--Color--dark--hover: $pf-global--primary-color--200 !default;\n$pf-global--link--Color--visited: $pf-color-purple-600 !default;\n$pf-global--link--TextDecoration: none !default;\n$pf-global--link--TextDecoration--hover: underline !default;\n\n// List\n$pf-global--ListStyle: disc outside !default;\n\n// Transitions\n$pf-global--Transition: all 250ms cubic-bezier(.42, 0, .58, 1);\n$pf-global--TimingFunction: cubic-bezier(.645, .045, .355, 1);\n$pf-global--TransitionDuration: 250ms;\n\n// Arrow size (used for tooltips, popovers, etc.)\n$pf-global--arrow--width: pf-font-prem(15px);\n$pf-global--arrow--width-lg: pf-font-prem(25px);\n\n// A11y\n$pf-global--target-size--MinWidth: 44px !default;\n$pf-global--target-size--MinHeight: 44px !default;\n\n// filters\n// overlay\n// animations\n\n// Global breakpoint map - used for @pf-grid-item-modifiers\n$pf-global--breakpoint-map: (\n \"\": null,\n \"sm\": \"-on-sm\",\n \"md\": \"-on-md\",\n \"lg\": \"-on-lg\",\n \"xl\": \"-on-xl\",\n \"2xl\": \"-on-2xl\"\n);\n\n// Global breakpoint list - used for @pf-utility-builder\n$pf-global--breakpoint-list: (\n \"sm\",\n \"md\",\n \"lg\",\n \"xl\",\n \"2xl\"\n);\n\n// Global breakpoint name map - used for %pf-hidden-visible\n$pf-global--breakpoint-name-map: (\n \"sm\": $pf-global--breakpoint--sm,\n \"md\": $pf-global--breakpoint--md,\n \"lg\": $pf-global--breakpoint--lg,\n \"xl\": $pf-global--breakpoint--xl,\n \"2xl\": $pf-global--breakpoint--2xl\n);\n\n// Spacer properties\n$pf-global--spacer-properties-map: (\n \"m\": \"margin\",\n \"mt\": \"margin-top\",\n \"mr\": \"margin-right\",\n \"mb\": \"margin-bottom\",\n \"ml\": \"margin-left\",\n \"mx\": null,\n \"my\": null,\n \"p\": \"padding\",\n \"pt\": \"padding-top\",\n \"pr\": \"padding-right\",\n \"pb\": \"padding-bottom\",\n \"pl\": \"padding-left\",\n \"px\": null,\n \"py\": null\n);\n\n// Spacer values\n$pf-global--spacer-map: (\n \"auto\": \"auto\",\n \"0\": 0,\n \"xs\": \"var(--pf-global--spacer--xs)\",\n \"sm\": \"var(--pf-global--spacer--sm)\",\n \"md\": \"var(--pf-global--spacer--md)\",\n \"lg\": \"var(--pf-global--spacer--lg)\",\n \"xl\": \"var(--pf-global--spacer--xl)\",\n \"2xl\": \"var(--pf-global--spacer--2xl)\",\n \"3xl\": \"var(--pf-global--spacer--3xl)\",\n \"4xl\": \"var(--pf-global--spacer--4xl)\"\n);\n","// Colors\n$pf-color-black-100: #fafafa !default;\n$pf-color-black-150: #f5f5f5 !default;\n$pf-color-black-200: #f0f0f0 !default;\n$pf-color-black-300: #d2d2d2 !default;\n$pf-color-black-400: #b8bbbe !default;\n$pf-color-black-500: #8a8d90 !default;\n$pf-color-black-600: #6a6e73 !default;\n$pf-color-black-700: #4f5255 !default;\n$pf-color-black-800: #3c3f42 !default;\n$pf-color-black-850: #212427 !default;\n$pf-color-black-900: #151515 !default;\n$pf-color-black-1000: #030303 !default;\n$pf-color-blue-50: #e7f1fa !default;\n$pf-color-blue-100: #bee1f4 !default;\n$pf-color-blue-200: #73bcf7 !default;\n$pf-color-blue-300: #2b9af3 !default;\n$pf-color-blue-400: #06c !default;\n$pf-color-blue-500: #004080 !default;\n$pf-color-blue-600: #002952 !default;\n$pf-color-blue-700: #001223 !default;\n$pf-color-cyan-50: #f2f9f9 !default;\n$pf-color-cyan-100: #a2d9d9 !default;\n$pf-color-cyan-200: #73c5c5 !default;\n$pf-color-cyan-300: #009596 !default;\n$pf-color-cyan-400: #005f60 !default;\n$pf-color-cyan-500: #003737 !default;\n$pf-color-cyan-600: #002323 !default;\n$pf-color-cyan-700: #000f0f !default;\n$pf-color-gold-50: #fdf7e7 !default;\n$pf-color-gold-100: #f9e0a2 !default;\n$pf-color-gold-200: #f6d173 !default;\n$pf-color-gold-300: #f4c145 !default;\n$pf-color-gold-400: #f0ab00 !default;\n$pf-color-gold-500: #c58c00 !default;\n$pf-color-gold-600: #795600 !default;\n$pf-color-gold-700: #3d2c00 !default;\n$pf-color-green-50: #f3faf2 !default;\n$pf-color-green-100: #bde5b8 !default;\n$pf-color-green-200: #95d58e !default;\n$pf-color-green-300: #6ec664 !default;\n$pf-color-green-400: #5ba352 !default;\n$pf-color-green-500: #3e8635 !default;\n$pf-color-green-600: #1e4f18 !default;\n$pf-color-green-700: #0f280d !default;\n$pf-color-light-blue-100: #beedf9 !default;\n$pf-color-light-blue-200: #7cdbf3 !default;\n$pf-color-light-blue-300: #35caed !default;\n$pf-color-light-blue-400: #00b9e4 !default;\n$pf-color-light-blue-500: #008bad !default;\n$pf-color-light-blue-600: #005c73 !default;\n$pf-color-light-blue-700: #002d39 !default;\n$pf-color-light-green-100: #e4f5bc !default;\n$pf-color-light-green-200: #c8eb79 !default;\n$pf-color-light-green-300: #ace12e !default;\n$pf-color-light-green-400: #92d400 !default;\n$pf-color-light-green-500: #6ca100 !default;\n$pf-color-light-green-600: #486b00 !default;\n$pf-color-light-green-700: #253600 !default;\n$pf-color-orange-100: #f4b678 !default;\n$pf-color-orange-200: #ef9234 !default;\n$pf-color-orange-300: #ec7a08 !default;\n$pf-color-orange-400: #c46100 !default;\n$pf-color-orange-500: #8f4700 !default;\n$pf-color-orange-600: #773d00 !default;\n$pf-color-orange-700: #3b1f00 !default;\n$pf-color-purple-50: #f2f0fc !default;\n$pf-color-purple-100: #cbc1ff !default;\n$pf-color-purple-200: #b2a3ff !default;\n$pf-color-purple-300: #a18fff !default;\n$pf-color-purple-400: #8476d1 !default;\n$pf-color-purple-500: #6753ac !default;\n$pf-color-purple-600: #40199a !default;\n$pf-color-purple-700: #1f0066 !default;\n$pf-color-red-50: #faeae8 !default;\n$pf-color-red-100: #c9190b !default;\n$pf-color-red-200: #a30000 !default;\n$pf-color-red-300: #7d1007 !default;\n$pf-color-red-400: #470000 !default;\n$pf-color-red-500: #2c0000 !default;\n$pf-color-white: #fff !default;\n","// PatternFly functions\n// --------------------------------------------------\n@import \"./div\";\n\n// Transform px to rems\n@function pf-strip-unit($num) {\n @return div($num, ($num * 0 + 1));\n}\n\n@function pf-size-prem($pxval, $base: $pf-global--space-size-root) {\n @return div(pf-strip-unit($pxval), $base) * 1rem;\n}\n\n@function pf-font-prem($pxval, $base: $pf-global--font-size-root) {\n @return div(pf-strip-unit($pxval), $base) * 1rem;\n}\n\n@function pf-bg-svg($svg-coordinates, $viewBox: \"512\", $svg-color: \"currentColor\") {\n $color: str-slice(#{$svg-color}, 2);\n\n @return url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 #{$viewBox} 512'%3E%3Cpath fill='%23#{$color}' d='#{$svg-coordinates}'/%3E%3C/svg%3E\");\n}\n\n// Return breakpoint value if it exists\n@function pf-breakpoint-value($breakpoint, $breakpoint-map: $pf-global--breakpoint-name-map) {\n $breakpoint-value: if(map-has-key($breakpoint-map, #{$breakpoint}), map-get($breakpoint-map, #{$breakpoint}), false);\n\n @return #{$breakpoint-value};\n}\n\n// Build breakpoint map\n// Based on $pf-global--breakpoint-name-map\n@function build-breakpoint-map($map-items...) {\n $map: ();\n\n @if length($map-items) == 0 {\n $map: (\"base\": null);\n $map: map-merge($map, $pf-global--breakpoint-name-map);\n }\n\n @else {\n @each $breakpoint in $map-items {\n @if not map-has-key($pf-global--breakpoint-name-map, $breakpoint) and $breakpoint != \"base\" {\n $map: map-merge($map, (\"invalid breakpoint #{$breakpoint}\": null));\n }\n\n @else if $breakpoint == \"base\" {\n $map: map-merge($map, ($breakpoint: null));\n }\n\n @else {\n $map: map-merge($map, ($breakpoint: map-get($pf-global--breakpoint-name-map, #{$breakpoint})));\n }\n }\n }\n\n @return $map;\n}\n\n// Build spacer map\n// Based on $pf-global--spacer-map\n@function build-spacer-map($map-items...) {\n $map: ();\n\n @if length($map-items) == 0 {\n $map: (\"none\": 0);\n $map: map-merge($map, $pf-global--spacer-map);\n $map: map-remove($map, \"auto\", \"0\");\n }\n\n @each $spacer in $map-items {\n @if not map-has-key($pf-global--spacer-map, $spacer) and $spacer != \"none\" {\n $map: map-merge($map, (\"invalid spacer #{$spacer}\": null));\n }\n\n @else if $spacer == \"none\" {\n $map: map-merge($map, ($spacer: 0));\n }\n\n @else {\n $map: map-merge($map, ($spacer: map-get($pf-global--spacer-map, #{$spacer})));\n }\n }\n\n @return $map;\n}\n\n// Build variable map\n// Based on custom map\n@function build-variable-map($namespace, $map: ()) {\n $new-map: ();\n\n @each $size, $value in $map {\n $new-map: map-merge($new-map, (map-get($map, $size): --#{$namespace}--#{$size}));\n }\n\n @return $new-map;\n}\n",null],"sourceRoot":"../src"} \ No newline at end of file diff --git a/elements/pfe-band/dist/pfe-band.js b/elements/pfe-band/dist/pfe-band.js new file mode 100644 index 0000000000..418bbc6ed9 --- /dev/null +++ b/elements/pfe-band/dist/pfe-band.js @@ -0,0 +1,253 @@ +import PFElement from '../../pfelement/dist/pfelement.js'; + +/*! + * PatternFly Elements: PfeBand 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * +*/ + +class PfeBand extends PFElement { + + // Injected at build-time + static get version() { + return "1.12.3"; + } + + // Injected at build-time + get html() { + return ` + +
      + ${this.hasSlot("pfe-band--aside") && this.asidePosition.mobile === "top" ? `` : ""} + ${this.asideHeight === "full" ? `
      ` : ""} + ${this.hasSlot("pfe-band--header") ? `
      + +
      ` : ""} +
      + +
      + ${this.asideHeight !== "full" && this.hasSlot("pfe-band--aside") && this.asidePosition.mobile !== "top" ? `` : ""} + ${this.hasSlot("pfe-band--footer") ? `
      + +
      ` : ""} + ${this.asideHeight === "full" ? `
      ` : ""} + ${this.asideHeight === "full" && this.hasSlot("pfe-band--aside") && this.asidePosition.mobile !== "top" ? `` : ""} +
      `; + } + + static get tag() { + return "pfe-band"; + } + + static get meta() { + return { + title: "Band", + description: + "This element creates a header, body, footer, and aside region in which to place content or other components.", + }; + } + + get templateUrl() { + return "pfe-band.html"; + } + + get styleUrl() { + return "pfe-band.scss"; + } + + get asidePosition() { + return { + desktop: this.asideDesktop, + mobile: this.asideMobile, + height: this.asideHeight, + }; + } + + static get properties() { + return { + imgSrc: { + title: "Background image", + type: String, + observer: "_imgSrcChanged", + }, + // @TODO: Deprecated property in 1.0 + oldImgSrc: { + alias: "imgSrc", + attr: "pfe-img-src", + }, + color: { + title: "Background color", + type: String, + values: ["lightest", "base", "darker", "darkest", "complement", "accent"], + default: "base", + observer: "_colorChanged", + }, + // @TODO: Deprecated property in 1.0 + oldColor: { + alias: "color", + attr: "pfe-color", + }, + asideDesktop: { + title: "side positioning (desktop)", + type: String, + values: ["right", "left"], + default: "right", + }, + // @TODO: Deprecated property in 1.0 + oldAsideDesktop: { + alias: "asideDesktop", + attr: "pfe-aside-desktop", + }, + asideMobile: { + title: "Aside positioning (mobile)", + type: String, + values: ["top", "bottom"], + default: "bottom", + }, + // @TODO: Deprecated property in 1.0 + oldAsideMobile: { + alias: "asideMobile", + attr: "pfe-aside-mobile", + }, + asideHeight: { + title: "Aside height", + type: String, + values: ["full", "body"], + default: "body", + }, + // @TODO: Deprecated property in 1.0 + oldAsideHeight: { + alias: "asideHeight", + attr: "pfe-aside-height", + }, + size: { + title: "Padding size", + type: String, + values: ["small"], + }, + // @TODO: Deprecated property in 1.0 + oldSize: { + alias: "size", + attr: "pfe-size", + }, + useGrid: { + title: "Default grid on for the light DOM regions (header, body, footer, aside)", + type: Boolean, + default: false, + }, + }; + } + + static get slots() { + return { + header: { + title: "Header", + type: "array", + namedSlot: true, + maxItems: 3, + items: { + $ref: "raw", + }, + }, + body: { + title: "Body", + type: "array", + namedSlot: false, + items: { + oneOf: [ + { + $ref: "pfe-card", + }, + { + $ref: "raw", + }, + ], + }, + }, + footer: { + title: "Footer", + type: "array", + namedSlot: true, + maxItems: 3, + items: { + oneOf: [ + { + $ref: "pfe-cta", + }, + { + $ref: "raw", + }, + ], + }, + }, + aside: { + title: "Aside", + type: "array", + namedSlot: true, + maxItems: 5, + items: { + oneOf: [ + { + $ref: "pfe-card", + }, + { + $ref: "raw", + }, + ], + }, + }, + }; + } + + // Declare the type of this component + static get PfeType() { + return PFElement.PfeTypes.Container; + } + + constructor() { + super(PfeBand, { type: PfeBand.PfeType }); + } + + _colorChanged() { + // Update the context + this.resetContext(); + } + + // Update the background image + _imgSrcChanged(oldVal, newVal) { + // Set the image as the background image + this.style.backgroundImage = newVal ? `url('${newVal}')` : ``; + } +} + +PFElement.create(PfeBand); + +export default PfeBand; +//# sourceMappingURL=pfe-band.js.map diff --git a/elements/pfe-band/dist/pfe-band.js.map b/elements/pfe-band/dist/pfe-band.js.map new file mode 100644 index 0000000000..b3188f61a6 --- /dev/null +++ b/elements/pfe-band/dist/pfe-band.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-band.js","sources":["../_temp/pfe-band.js"],"sourcesContent":["/*!\n * PatternFly Elements: PfeBand 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement.js\";\n\nclass PfeBand extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n
      \n ${this.hasSlot(\"pfe-band--aside\") && this.asidePosition.mobile === \"top\" ? `` : \"\"}\n ${this.asideHeight === \"full\" ? `
      ` : \"\"}\n ${this.hasSlot(\"pfe-band--header\") ? `
      \n \n
      ` : \"\"}\n
      \n \n
      \n ${this.asideHeight !== \"full\" && this.hasSlot(\"pfe-band--aside\") && this.asidePosition.mobile !== \"top\" ? `\n \n ` : \"\"}\n ${this.hasSlot(\"pfe-band--footer\") ? `
      \n \n
      ` : \"\"}\n ${this.asideHeight === \"full\" ? `
      ` : \"\"}\n ${this.asideHeight === \"full\" && this.hasSlot(\"pfe-band--aside\") && this.asidePosition.mobile !== \"top\" ? `\n \n ` : \"\"}\n
      `;\n }\n\n static get tag() {\n return \"pfe-band\";\n }\n\n static get meta() {\n return {\n title: \"Band\",\n description:\n \"This element creates a header, body, footer, and aside region in which to place content or other components.\",\n };\n }\n\n get templateUrl() {\n return \"pfe-band.html\";\n }\n\n get styleUrl() {\n return \"pfe-band.scss\";\n }\n\n get asidePosition() {\n return {\n desktop: this.asideDesktop,\n mobile: this.asideMobile,\n height: this.asideHeight,\n };\n }\n\n static get properties() {\n return {\n imgSrc: {\n title: \"Background image\",\n type: String,\n observer: \"_imgSrcChanged\",\n },\n // @TODO: Deprecated property in 1.0\n oldImgSrc: {\n alias: \"imgSrc\",\n attr: \"pfe-img-src\",\n },\n color: {\n title: \"Background color\",\n type: String,\n values: [\"lightest\", \"base\", \"darker\", \"darkest\", \"complement\", \"accent\"],\n default: \"base\",\n observer: \"_colorChanged\",\n },\n // @TODO: Deprecated property in 1.0\n oldColor: {\n alias: \"color\",\n attr: \"pfe-color\",\n },\n asideDesktop: {\n title: \"side positioning (desktop)\",\n type: String,\n values: [\"right\", \"left\"],\n default: \"right\",\n },\n // @TODO: Deprecated property in 1.0\n oldAsideDesktop: {\n alias: \"asideDesktop\",\n attr: \"pfe-aside-desktop\",\n },\n asideMobile: {\n title: \"Aside positioning (mobile)\",\n type: String,\n values: [\"top\", \"bottom\"],\n default: \"bottom\",\n },\n // @TODO: Deprecated property in 1.0\n oldAsideMobile: {\n alias: \"asideMobile\",\n attr: \"pfe-aside-mobile\",\n },\n asideHeight: {\n title: \"Aside height\",\n type: String,\n values: [\"full\", \"body\"],\n default: \"body\",\n },\n // @TODO: Deprecated property in 1.0\n oldAsideHeight: {\n alias: \"asideHeight\",\n attr: \"pfe-aside-height\",\n },\n size: {\n title: \"Padding size\",\n type: String,\n values: [\"small\"],\n },\n // @TODO: Deprecated property in 1.0\n oldSize: {\n alias: \"size\",\n attr: \"pfe-size\",\n },\n useGrid: {\n title: \"Default grid on for the light DOM regions (header, body, footer, aside)\",\n type: Boolean,\n default: false,\n },\n };\n }\n\n static get slots() {\n return {\n header: {\n title: \"Header\",\n type: \"array\",\n namedSlot: true,\n maxItems: 3,\n items: {\n $ref: \"raw\",\n },\n },\n body: {\n title: \"Body\",\n type: \"array\",\n namedSlot: false,\n items: {\n oneOf: [\n {\n $ref: \"pfe-card\",\n },\n {\n $ref: \"raw\",\n },\n ],\n },\n },\n footer: {\n title: \"Footer\",\n type: \"array\",\n namedSlot: true,\n maxItems: 3,\n items: {\n oneOf: [\n {\n $ref: \"pfe-cta\",\n },\n {\n $ref: \"raw\",\n },\n ],\n },\n },\n aside: {\n title: \"Aside\",\n type: \"array\",\n namedSlot: true,\n maxItems: 5,\n items: {\n oneOf: [\n {\n $ref: \"pfe-card\",\n },\n {\n $ref: \"raw\",\n },\n ],\n },\n },\n };\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Container;\n }\n\n constructor() {\n super(PfeBand, { type: PfeBand.PfeType });\n }\n\n _colorChanged() {\n // Update the context\n this.resetContext();\n }\n\n // Update the background image\n _imgSrcChanged(oldVal, newVal) {\n // Set the image as the background image\n this.style.backgroundImage = newVal ? `url('${newVal}')` : ``;\n }\n}\n\nPFElement.create(PfeBand);\n\nexport { PfeBand as default };\n"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-band/dist/pfe-band.min.css.map b/elements/pfe-band/dist/pfe-band.min.css.map new file mode 100644 index 0000000000..81c6180784 --- /dev/null +++ b/elements/pfe-band/dist/pfe-band.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../pfe-sass/mixins/_mixins.scss","../../../pfe-sass/mixins/_custom-properties.scss","../../../pfe-sass/extends/_extends.scss","../../src/pfe-band.scss","pfe-band.css","../../../pfe-sass/mixins/_containers.scss","../../src/"],"names":[],"mappings":"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BAAA,EHiVE,wDGjVF,aAAA,EAAA,gBAAA,EHiVE,4EGjVF,aAAA,EAAA,gBAAA,EHiVE,oEGjVF,aAAA,EAAA,gBAAA,EHiVE,wFGjVF,aAAA,EAAA,gBAAA,EHiVE,uFGjVF,aAAA,EAAA,gBAAA,EHiVE,2GGjVF,aAAA,EAAA,gBAAA,EHiVE,oEGjVF,aAAA,EAAA,gBAAA,EHiVE,wFGjVF,aAAA,EAAA,gBAAA,EHiVE,uFGjVF,aAAA,EAAA,gBAAA,EHiVE,2GGjVF,aAAA,EAAA,gBAAA,EHiVE,gFGjVF,aAAA,EAAA,gBAAA,EHiVE,oGGjVF,aAAA,EAAA,gBAAA,EHiVE,mGGjVF,aAAA,EAAA,gBAAA,EHiVE,uHGjVF,aAAA,EAAA,gBAAA,EHiVE,sEGjVF,aAAA,EAAA,gBAAA,EAAA,qBAAA,EHiVE,0FGjVF,aAAA,EAAA,gBAAA,EAAA,qBAAA,EHiVE,yFGjVF,aAAA,EAAA,gBAAA,EAAA,qBAAA,EHiVE,6GGjVF,aAAA,EAAA,gBAAA,EAAA,qBAAA,EHiVE,kFGjVF,aAAA,EAAA,gBAAA,EAAA,qBAAA,EHiVE,sGGjVF,aAAA,EAAA,gBAAA,EAAA,qBAAA,EHiVE,qGGjVF,aAAA,EAAA,gBAAA,EAAA,qBAAA,EHiVE,yHGjVF,aAAA,EAAA,gBAAA,EAAA,qBAAA,EHuUA,iBGvUA,aAAA,EAAA,gBAAA,EHuUA,6EGvUA,aAAA,EAAA,gBAAA,EHuUA,qEGvUA,aAAA,EAAA,gBAAA,EHuUA,yFGvUA,aAAA,EAAA,gBAAA,EHuUA,wFGvUA,aAAA,EAAA,kBAAA,EAAA,gBAAA,EHuUA,4GGvUA,aAAA,EAAA,kBAAA,EAAA,gBAAA,EHuUA,qEGvUA,aAAA,EAAA,kBAAA,EAAA,gBAAA,EHuUA,yFGvUA,aAAA,EAAA,kBAAA,EAAA,gBAAA,EHuUA,wFGvUA,aAAA,EAAA,kBAAA,EAAA,gBAAA,EHuUA,4GGvUA,aAAA,EAAA,kBAAA,EAAA,gBAAA,EHuUA,iFGvUA,aAAA,EAAA,kBAAA,EAAA,gBAAA,EHuUA,qGGvUA,aAAA,EAAA,kBAAA,EAAA,gBAAA,EHuUA,oGGvUA,aAAA,EAAA,kBAAA,EAAA,gBAAA,EHuUA,wHGvUA,aAAA,EAAA,kBAAA,EAAA,gBAAA,GH6VM,mCACE,QAAA,SAAA,QAAA,KACA,cAAA,KAAA,mBAAA,KACA,iBAAA,IAAA,sBAAA,IAAA,iBAAA,mCAAA,sBAAA,mCAEA,aAAA,KAAA,aAAA,iFACA,QAAA,KAAA,QAAA,iFACA,gBAAA,eAAA,gBAAA,6FACA,mBAAA,eAAA,gBAAA,eAAA,WAAA,eAAA,mBAAA,6FAAA,gBAAA,6FAAA,WAAA,6FARF,iDG7VN,aAAA,EAAA,gBAAA,EH6VM,iDG7VN,aAAA,EAAA,gBAAA,GNGM,6CAAA,oCG2WJ,4BEnWE,MAAA,KACA,QAAA,GACA,QAAA,MDg9BF,gBACA,kBD5mBA,kBAGE,MAAA,KAEA,0CC2mBe,4CD3mBf,4CACE,MAAA,MAGF,iDC4mBe,mDD5mBf,mDACE,MAAA,IA3CJ,kBAgDE,MAAA,KA1DJ,iBA8DI,iBAAA,EAAA,kBAAA,EAAA,kBAAA,EAAA,UAAA,EACA,mBAAA,WAAA,oBAAA,MAAA,WAAA,WAEA,MAAA,MAEA,MAAA,IACA,OAAA,EAAA,KAEA,6CACE,MAAA,KAIJ,mBACE,MAAA,IACA,MAAA,KAEA,+CACE,MAAA","file":"pfe-band.min.css","sourceRoot":"../src","sourcesContent":[null,null,null,null,"@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n :host([color=\"darker\"]), :host([color=\"darkest\"]), :host([color=\"base\"]), :host([color=\"lighter\"]), :host([color=\"lightest\"]), :host([color=\"accent\"]), :host([color=\"complement\"]) {\n /* IE10+ */\n background-color: #fff !important;\n color: #151515 !important;\n }\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n :host {\n /* IE10+ */\n color: #151515 !important;\n }\n}\n\n:host {\n --context: var(--pfe-band--context, light);\n display: block;\n border: 1px solid transparent;\n border: var(--pfe-band--Border, var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent);\n background-color: #f0f0f0;\n background-color: var(--pfe-band--BackgroundColor, var(--pfe-theme--color--surface--base, #f0f0f0));\n background-position: center center;\n background-position: var(--pfe-band--BackgroundPosition, center center);\n color: #3c3f42;\n color: var(--pfe-broadcasted--text, #3c3f42);\n padding: calc(calc( 1rem * 4) / 2) calc( 1rem * 1);\n padding: calc(var(--pfe-band--Padding--vertical, calc( var(--pfe-theme--container-spacer, 1rem) * 4)) / 2) var(--pfe-band--Padding--horizontal, calc( var(--pfe-theme--container-spacer, 1rem) * 1));\n}\n\n@media (min-width: 576px) {\n :host {\n padding: calc( 1rem * 4) calc( 1rem * 1);\n padding: var(--pfe-band--Padding, var(--pfe-band--Padding--vertical, calc( var(--pfe-theme--container-spacer, 1rem) * 4)) var(--pfe-band--Padding--horizontal, calc( var(--pfe-theme--container-spacer, 1rem) * 1)));\n }\n}\n\n:host *,\n:host *::before,\n:host *::after {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n@media print {\n :host {\n background-color: white !important;\n background-image: none !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n }\n}\n\n@media print {\n :host {\n border-radius: 3px;\n border: 1px solid #d2d2d2;\n padding: 2rem 1rem;\n }\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n :host {\n /* IE10+ */\n background-color: #fff !important;\n background-image: none !important;\n color: #151515 !important;\n padding: 2rem 1rem;\n }\n}\n\n@media screen and (-ms-high-contrast: active) and (min-width: 576px), screen and (-ms-high-contrast: none) and (min-width: 576px) {\n :host {\n padding: 4rem 1rem;\n }\n}\n\n:host([on=\"dark\"]) {\n --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff);\n --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted--on-dark, #d2d2d2);\n --pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #73bcf7);\n --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #bee1f4);\n --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #bee1f4);\n --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #bee1f4);\n --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration--on-dark, none);\n --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover--on-dark, underline);\n --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus--on-dark, underline);\n --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited--on-dark, none);\n}\n\n:host([on=\"saturated\"]) {\n --pfe-broadcasted--text: var(--pfe-theme--color--text--on-saturated, #fff);\n --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2);\n --pfe-broadcasted--link: var(--pfe-theme--color--link--on-saturated, #fff);\n --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-saturated, #fafafa);\n --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-saturated, #fafafa);\n --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);\n --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration--on-saturated, underline);\n --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover--on-saturated, underline);\n --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus--on-saturated, underline);\n --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited--on-saturated, underline);\n}\n\n:host([on=\"light\"]) {\n --pfe-broadcasted--text: var(--pfe-theme--color--text, #151515);\n --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted, #6a6e73);\n --pfe-broadcasted--link: var(--pfe-theme--color--link, #06c);\n --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover, #004080);\n --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus, #004080);\n --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited, #6753ac);\n --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration, none);\n --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover, underline);\n --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus, underline);\n --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited, none);\n}\n\n:host([color=\"darker\"]) {\n --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--darker, #3c3f42);\n --pfe-band--context: var(--pfe-theme--color--surface--darker--context, dark);\n}\n\n:host([color=\"darkest\"]) {\n --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--darkest, #151515);\n --pfe-band--context: var(--pfe-theme--color--surface--darkest--context, dark);\n}\n\n:host([color=\"base\"]) {\n --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--base, #f0f0f0);\n --pfe-band--context: var(--pfe-theme--color--surface--base--context, light);\n}\n\n:host([color=\"lighter\"]) {\n --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--lighter, #f0f0f0);\n --pfe-band--context: var(--pfe-theme--color--surface--lighter--context, light);\n}\n\n:host([color=\"lightest\"]) {\n --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--lightest, #fff);\n --pfe-band--context: var(--pfe-theme--color--surface--lightest--context, light);\n}\n\n:host([color=\"accent\"]) {\n --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--accent, #004080);\n --pfe-band--context: var(--pfe-theme--color--surface--accent--context, saturated);\n}\n\n:host([color=\"complement\"]) {\n --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--complement, #002952);\n --pfe-band--context: var(--pfe-theme--color--surface--complement--context, saturated);\n}\n\n:host([size=\"small\"]) {\n padding: calc(calc( 1rem * 4) / 4) calc( 1rem * 1);\n padding: calc(var(--pfe-band--Padding--vertical, calc( var(--pfe-theme--container-spacer, 1rem) * 4)) / 4) var(--pfe-band--Padding--horizontal, calc( var(--pfe-theme--container-spacer, 1rem) * 1));\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n :host([size=\"small\"]) {\n /* IE10+ */\n padding: 1rem;\n }\n}\n\n.pfe-band__container {\n margin: 0 auto;\n}\n\n:host(:not([full-width])) .pfe-band__container {\n max-width: auto;\n max-width: var(--pfe-band--Width, auto);\n}\n\n@media screen and (min-width: 768px) {\n :host(:not([full-width])) .pfe-band__container {\n max-width: calc(768px - (calc( 1rem * 1) * 4));\n max-width: var(--pfe-band--Width, calc(768px - (var(--pfe-band--Padding--horizontal, calc( var(--pfe-theme--container-spacer, 1rem) * 1)) * 4)));\n }\n}\n\n@media screen and (min-width: 992px) {\n :host(:not([full-width])) .pfe-band__container {\n max-width: calc(992px - (calc( 1rem * 1) * 4));\n max-width: var(--pfe-band--Width, calc(992px - (var(--pfe-band--Padding--horizontal, calc( var(--pfe-theme--container-spacer, 1rem) * 1)) * 4)));\n }\n}\n\n@media screen and (min-width: 1200px) {\n :host(:not([full-width])) .pfe-band__container {\n max-width: calc(1200px - (calc( 1rem * 1) * 4));\n max-width: var(--pfe-band--Width, calc(1200px - (var(--pfe-band--Padding--horizontal, calc( var(--pfe-theme--container-spacer, 1rem) * 1)) * 4)));\n }\n}\n\n@supports (display: grid) {\n .pfe-band__container {\n display: -ms-grid;\n display: grid;\n -ms-grid-rows: auto;\n grid-template-rows: auto;\n -ms-grid-columns: auto;\n grid-template-columns: auto;\n grid-template-areas: \"body\";\n grid-row-gap: 1rem;\n grid-row-gap: var(--pfe-band--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n row-gap: 1rem;\n row-gap: var(--pfe-band--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n grid-column-gap: calc(1rem * 3);\n grid-column-gap: var(--pfe-band--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n -webkit-column-gap: calc(1rem * 3);\n -moz-column-gap: calc(1rem * 3);\n column-gap: calc(1rem * 3);\n -webkit-column-gap: var(--pfe-band--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n -moz-column-gap: var(--pfe-band--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n column-gap: var(--pfe-band--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n }\n :host([has_header]) .pfe-band__container {\n grid-template-areas: \"header\" \"body\";\n }\n :host([has_aside]) .pfe-band__container {\n grid-template-areas: \"body\" \"aside\";\n }\n @media (max-width: 767px) {\n :host([has_aside][aside-mobile=\"top\"]) .pfe-band__container {\n grid-template-areas: \"aside\" \"body\";\n }\n }\n @media (min-width: 768px) {\n :host([has_aside]) .pfe-band__container {\n grid-template-areas: \"body aside\";\n }\n :host([has_aside][aside-desktop=\"left\"]) .pfe-band__container {\n grid-template-areas: \"aside body\";\n }\n }\n :host([has_footer]) .pfe-band__container {\n grid-template-areas: \"body\" \"footer\";\n }\n :host([has_header][has_aside]) .pfe-band__container {\n grid-template-areas: \"header\" \"body\" \"aside\";\n }\n @media (max-width: 767px) {\n :host([has_header][has_aside][aside-mobile=\"top\"]) .pfe-band__container {\n grid-template-areas: \"aside\" \"header\" \"body\";\n }\n }\n @media (min-width: 768px) {\n :host([has_header][has_aside]) .pfe-band__container {\n grid-template-areas: \"header header\" \"body aside\";\n }\n :host([has_header][has_aside][aside-desktop=\"left\"]) .pfe-band__container {\n grid-template-areas: \"header header\" \"aside body\";\n }\n :host([has_header][has_aside][aside-height=\"full\"]) .pfe-band__container {\n grid-template-areas: \"header aside\" \"body aside\";\n }\n :host([has_header][has_aside][aside-desktop=\"left\"][aside-height=\"full\"]) .pfe-band__container {\n grid-template-areas: \"aside header\" \"aside body\";\n }\n }\n :host([has_header][has_footer]) .pfe-band__container {\n grid-template-areas: \"header\" \"body\" \"footer\";\n }\n :host([has_footer][has_aside]) .pfe-band__container {\n grid-template-areas: \"body\" \"aside\" \"footer\";\n }\n @media (max-width: 767px) {\n :host([has_footer][has_aside][aside-mobile=\"top\"]) .pfe-band__container {\n grid-template-areas: \"aside\" \"body\" \"footer\";\n }\n }\n @media (min-width: 768px) {\n :host([has_footer][has_aside]) .pfe-band__container {\n grid-template-areas: \"body aside\" \"footer footer\";\n }\n :host([has_footer][has_aside][aside-desktop=\"left\"]) .pfe-band__container {\n grid-template-areas: \"aside body\" \"footer footer\";\n }\n :host([has_footer][has_aside][aside-height=\"full\"]) .pfe-band__container {\n grid-template-areas: \"body aside\" \"footer aside\";\n }\n :host([has_footer][has_aside][aside-desktop=\"left\"][aside-height=\"full\"]) .pfe-band__container {\n grid-template-areas: \"aside body\" \"aside footer\";\n }\n }\n :host([has_header][has_aside][has_footer]) .pfe-band__container {\n grid-template-areas: \"header\" \"body\" \"footer\" \"aside\";\n }\n @media (max-width: 767px) {\n :host([has_header][has_aside][has_footer][aside-mobile=\"top\"]) .pfe-band__container {\n grid-template-areas: \"aside\" \"header\" \"body\" \"footer\";\n }\n }\n @media (min-width: 768px) {\n :host([has_header][has_aside][has_footer]) .pfe-band__container {\n grid-template-areas: \"header header\" \"body aside\" \"footer footer\";\n }\n :host([has_header][has_aside][has_footer][aside-desktop=\"left\"]) .pfe-band__container {\n grid-template-areas: \"header header\" \"aside body\" \"footer footer\";\n }\n :host([has_header][has_aside][has_footer][aside-height=\"full\"]) .pfe-band__container {\n grid-template-areas: \"header aside\" \"body aside\" \"footer aside\";\n }\n :host([has_header][has_aside][has_footer][aside-desktop=\"left\"][aside-height=\"full\"]) .pfe-band__container {\n grid-template-areas: \"aside header\" \"aside body\" \"aside footer\";\n }\n }\n @media (min-width: 768px) {\n .pfe-band__container {\n -ms-grid-rows: auto;\n grid-template-rows: auto;\n -ms-grid-columns: 1fr;\n grid-template-columns: 1fr;\n }\n .pfe-band__container > *:nth-child(1) {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n }\n :host([has_aside]) .pfe-band__container {\n -ms-grid-rows: auto;\n grid-template-rows: auto;\n -ms-grid-columns: 1fr 240px;\n grid-template-columns: 1fr 240px;\n -ms-grid-columns: 1fr var(--pfe-band--Width__aside--sm, 240px);\n grid-template-columns: 1fr var(--pfe-band--Width__aside--sm, 240px);\n }\n :host([has_aside]) .pfe-band__container > *:nth-child(1) {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n }\n :host([has_aside]) .pfe-band__container > *:nth-child(2) {\n -ms-grid-row: 1;\n -ms-grid-column: 2;\n }\n :host([has_aside]) .pfe-band__container > *:nth-child(1) {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n }\n :host([has_aside]) .pfe-band__container > *:nth-child(2) {\n -ms-grid-row: 1;\n -ms-grid-column: 2;\n }\n :host([has_aside][aside-desktop=\"left\"]) .pfe-band__container {\n -ms-grid-rows: auto;\n grid-template-rows: auto;\n -ms-grid-columns: 240px 1fr;\n grid-template-columns: 240px 1fr;\n -ms-grid-columns: var(--pfe-band--Width__aside--sm, 240px) 1fr;\n grid-template-columns: var(--pfe-band--Width__aside--sm, 240px) 1fr;\n }\n :host([has_aside][aside-desktop=\"left\"]) .pfe-band__container > *:nth-child(1) {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n }\n :host([has_aside][aside-desktop=\"left\"]) .pfe-band__container > *:nth-child(2) {\n -ms-grid-row: 1;\n -ms-grid-column: 2;\n }\n :host([has_aside][aside-desktop=\"left\"]) .pfe-band__container > *:nth-child(1) {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n }\n :host([has_aside][aside-desktop=\"left\"]) .pfe-band__container > *:nth-child(2) {\n -ms-grid-row: 1;\n -ms-grid-column: 2;\n }\n }\n @media (min-width: 992px) {\n :host([has_aside]) .pfe-band__container {\n -ms-grid-rows: auto;\n grid-template-rows: auto;\n -ms-grid-columns: 1fr 300px;\n grid-template-columns: 1fr 300px;\n -ms-grid-columns: var(--pfe-band--layout, 1fr var(--pfe-band--Width__aside--lg, 300px));\n grid-template-columns: var(--pfe-band--layout, 1fr var(--pfe-band--Width__aside--lg, 300px));\n }\n :host([has_aside]) .pfe-band__container > *:nth-child(1) {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n }\n :host([has_aside]) .pfe-band__container > *:nth-child(1) {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n }\n :host([has_aside]) .pfe-band__container > *:nth-child(2) {\n -ms-grid-row: 1;\n -ms-grid-column: 2;\n }\n :host([has_aside][aside-desktop=\"left\"]) .pfe-band__container {\n -ms-grid-rows: auto;\n grid-template-rows: auto;\n -ms-grid-columns: 300px 1fr;\n grid-template-columns: 300px 1fr;\n -ms-grid-columns: var(--pfe-band--layout, var(--pfe-band--Width__aside--lg, 300px) 1fr);\n grid-template-columns: var(--pfe-band--layout, var(--pfe-band--Width__aside--lg, 300px) 1fr);\n }\n :host([has_aside][aside-desktop=\"left\"]) .pfe-band__container > *:nth-child(1) {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n }\n :host([has_aside][aside-desktop=\"left\"]) .pfe-band__container > *:nth-child(1) {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n }\n :host([has_aside][aside-desktop=\"left\"]) .pfe-band__container > *:nth-child(2) {\n -ms-grid-row: 1;\n -ms-grid-column: 2;\n }\n }\n}\n\n:host([full-width]) .pfe-band__container {\n max-width: 100%;\n max-width: var(--pfe-band--Width, 100%);\n}\n\n@media screen and (min-width: 768px) {\n :host([full-width]) .pfe-band__container {\n width: calc(100% - calc( 1rem * 1) * 4);\n width: calc(100% - var(--pfe-band--Padding--horizontal, calc( var(--pfe-theme--container-spacer, 1rem) * 1)) * 4);\n }\n}\n\n@media screen and (min-width: 992px) {\n :host([full-width]) .pfe-band__container {\n width: calc(100% - calc( 1rem * 1) * 4);\n width: calc(100% - var(--pfe-band--Padding--horizontal, calc( var(--pfe-theme--container-spacer, 1rem) * 1)) * 4);\n }\n}\n\n@media screen and (min-width: 1200px) {\n :host([full-width]) .pfe-band__container {\n width: calc(100% - calc( 1rem * 1) * 8);\n width: calc(100% - var(--pfe-band--Padding--horizontal, calc( var(--pfe-theme--container-spacer, 1rem) * 1)) * 8);\n }\n}\n\n.pfe-band__container,\n.pfe-band__wrapper {\n width: 100%;\n margin-bottom: calc(-1 * 1rem);\n margin-bottom: calc(-1 * var(--pfe-band--gutter--vertical, var(--pfe-theme--container-spacer, 1rem)));\n margin-right: calc(-1 * 1rem);\n margin-right: calc(-1 * var(--pfe-band--gutter--vertical, var(--pfe-theme--container-spacer, 1rem)));\n}\n\n@supports (display: grid) {\n .pfe-band__container,\n .pfe-band__wrapper {\n margin: 0 auto;\n }\n}\n\n:host([full-width]) .pfe-band__wrapper {\n max-width: 100%;\n max-width: var(--pfe-band--Width, 100%);\n}\n\n.pfe-band__aside {\n height: 100%;\n}\n\nslot[name=\"pfe-band--aside\"] {\n display: block;\n height: 100%;\n}\n\n.pfe-band__header {\n margin-bottom: 1rem;\n margin-bottom: var(--pfe-band__header--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n margin-right: 1rem;\n margin-right: var(--pfe-band__header--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n}\n\n@supports (display: grid) {\n .pfe-band__header {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n grid-area: header;\n margin-bottom: 0;\n margin-right: 0;\n }\n :host([has_header][has_aside]) .pfe-band__container > .pfe-band__header {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n }\n :host([has_header][has_footer]) .pfe-band__container > .pfe-band__header {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n -ms-grid-column-span: 1;\n }\n :host([has_header][has_aside][has_footer]) .pfe-band__container > .pfe-band__header {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n -ms-grid-column-span: 1;\n }\n :host([use-grid]) .pfe-band__header {\n display: -ms-grid;\n display: grid;\n -ms-grid-rows: auto;\n grid-template-rows: auto;\n -ms-grid-columns: 1fr;\n grid-template-columns: 1fr;\n -ms-grid-columns: var(--pfe-band__header--layout, 1fr);\n grid-template-columns: var(--pfe-band__header--layout, 1fr);\n grid-row-gap: 1rem;\n grid-row-gap: var(--pfe-band__header--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n row-gap: 1rem;\n row-gap: var(--pfe-band__header--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n grid-column-gap: calc(1rem * 3);\n grid-column-gap: var(--pfe-band__header--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n -webkit-column-gap: calc(1rem * 3);\n -moz-column-gap: calc(1rem * 3);\n column-gap: calc(1rem * 3);\n -webkit-column-gap: var(--pfe-band__header--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n -moz-column-gap: var(--pfe-band__header--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n column-gap: var(--pfe-band__header--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n }\n :host([use-grid]) .pfe-band__header > *:nth-child(1) {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n }\n :host([use-grid]) .pfe-band__header > *:nth-child(1) {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n }\n}\n\n.pfe-band__body {\n margin-bottom: 1rem;\n margin-bottom: var(--pfe-band__body--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n margin-right: 1rem;\n margin-right: var(--pfe-band__body--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n}\n\n@supports (display: grid) {\n .pfe-band__body {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n grid-area: body;\n margin-bottom: 0;\n margin-right: 0;\n }\n :host([has_header]) .pfe-band__container > .pfe-band__body {\n -ms-grid-row: 2;\n -ms-grid-column: 1;\n }\n :host([has_aside]) .pfe-band__container > .pfe-band__body {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n }\n :host([has_footer]) .pfe-band__container > .pfe-band__body {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n }\n :host([has_header][has_aside]) .pfe-band__container > .pfe-band__body {\n -ms-grid-row: 2;\n -ms-grid-column: 1;\n }\n :host([has_header][has_footer]) .pfe-band__container > .pfe-band__body {\n -ms-grid-row: 2;\n -ms-grid-column: 1;\n }\n :host([has_footer][has_aside]) .pfe-band__container > .pfe-band__body {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n }\n :host([has_header][has_aside][has_footer]) .pfe-band__container > .pfe-band__body {\n -ms-grid-row: 2;\n -ms-grid-column: 1;\n }\n :host([use-grid]) .pfe-band__body {\n display: -ms-grid;\n display: grid;\n -ms-grid-rows: auto;\n grid-template-rows: auto;\n -ms-grid-columns: 1fr;\n grid-template-columns: 1fr;\n -ms-grid-columns: var(--pfe-band__body--layout, 1fr);\n grid-template-columns: var(--pfe-band__body--layout, 1fr);\n grid-row-gap: 1rem;\n grid-row-gap: var(--pfe-band__body--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n row-gap: 1rem;\n row-gap: var(--pfe-band__body--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n grid-column-gap: calc(1rem * 3);\n grid-column-gap: var(--pfe-band__body--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n -webkit-column-gap: calc(1rem * 3);\n -moz-column-gap: calc(1rem * 3);\n column-gap: calc(1rem * 3);\n -webkit-column-gap: var(--pfe-band__body--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n -moz-column-gap: var(--pfe-band__body--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n column-gap: var(--pfe-band__body--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n }\n :host([use-grid]) .pfe-band__body > *:nth-child(1) {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n }\n :host([use-grid]) .pfe-band__body > *:nth-child(1) {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n }\n}\n\n.pfe-band__footer {\n margin-bottom: 1rem;\n margin-bottom: var(--pfe-band__footer--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n margin-right: 1rem;\n margin-right: var(--pfe-band__footer--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n}\n\n@supports (display: grid) {\n .pfe-band__footer {\n -ms-grid-row: 2;\n -ms-grid-column: 1;\n grid-area: footer;\n margin-bottom: 0;\n margin-right: 0;\n }\n :host([has_header][has_footer]) .pfe-band__container > .pfe-band__footer {\n -ms-grid-row: 3;\n -ms-grid-column: 1;\n }\n :host([has_footer][has_aside]) .pfe-band__container > .pfe-band__footer {\n -ms-grid-row: 3;\n -ms-grid-column: 1;\n }\n :host([has_header][has_aside][has_footer]) .pfe-band__container > .pfe-band__footer {\n -ms-grid-row: 3;\n -ms-grid-column: 1;\n -ms-grid-column-span: 1;\n }\n :host([use-grid]) .pfe-band__footer {\n display: -ms-grid;\n display: grid;\n -ms-grid-rows: auto;\n grid-template-rows: auto;\n -ms-grid-columns: 1fr;\n grid-template-columns: 1fr;\n -ms-grid-columns: var(--pfe-band__footer--layout, 1fr);\n grid-template-columns: var(--pfe-band__footer--layout, 1fr);\n grid-row-gap: 1rem;\n grid-row-gap: var(--pfe-band__footer--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n row-gap: 1rem;\n row-gap: var(--pfe-band__footer--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n grid-column-gap: calc(1rem * 3);\n grid-column-gap: var(--pfe-band__footer--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n -webkit-column-gap: calc(1rem * 3);\n -moz-column-gap: calc(1rem * 3);\n column-gap: calc(1rem * 3);\n -webkit-column-gap: var(--pfe-band__footer--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n -moz-column-gap: var(--pfe-band__footer--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n column-gap: var(--pfe-band__footer--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n }\n :host([use-grid]) .pfe-band__footer > *:nth-child(1) {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n }\n :host([use-grid]) .pfe-band__footer > *:nth-child(1) {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n }\n}\n\n.pfe-band__aside {\n margin-bottom: 1rem;\n margin-bottom: var(--pfe-band__aside--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n margin-right: 1rem;\n margin-right: var(--pfe-band__aside--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n}\n\n@supports (display: grid) {\n .pfe-band__aside {\n -ms-grid-row: 2;\n -ms-grid-column: 1;\n grid-area: aside;\n margin-bottom: 0;\n margin-right: 0;\n }\n :host([has_header][has_aside]) .pfe-band__container > .pfe-band__aside {\n -ms-grid-row: 3;\n -ms-grid-column: 1;\n }\n :host([has_footer][has_aside]) .pfe-band__container > .pfe-band__aside {\n -ms-grid-row: 2;\n -ms-grid-row-span: 1;\n -ms-grid-column: 1;\n }\n :host([has_header][has_aside][has_footer]) .pfe-band__container > .pfe-band__aside {\n -ms-grid-row: 4;\n -ms-grid-row-span: 1;\n -ms-grid-column: 1;\n }\n @media (max-width: 767px) {\n :host([has_header][has_aside][aside-mobile=\"top\"]) .pfe-band__container > .pfe-band__header {\n -ms-grid-row: 2;\n -ms-grid-column: 1;\n }\n :host([has_header][has_aside][has_footer][aside-mobile=\"top\"]) .pfe-band__container > .pfe-band__header {\n -ms-grid-row: 2;\n -ms-grid-column: 1;\n -ms-grid-column-span: 1;\n }\n :host([has_aside][aside-mobile=\"top\"]) .pfe-band__container > .pfe-band__body {\n -ms-grid-row: 2;\n -ms-grid-column: 1;\n }\n :host([has_header][has_aside][aside-mobile=\"top\"]) .pfe-band__container > .pfe-band__body {\n -ms-grid-row: 3;\n -ms-grid-column: 1;\n }\n :host([has_footer][has_aside][aside-mobile=\"top\"]) .pfe-band__container > .pfe-band__body {\n -ms-grid-row: 2;\n -ms-grid-column: 1;\n }\n :host([has_header][has_aside][has_footer][aside-mobile=\"top\"]) .pfe-band__container > .pfe-band__body {\n -ms-grid-row: 3;\n -ms-grid-column: 1;\n }\n :host([has_footer][has_aside][aside-mobile=\"top\"]) .pfe-band__container > .pfe-band__footer {\n -ms-grid-row: 3;\n -ms-grid-column: 1;\n }\n :host([has_header][has_aside][has_footer][aside-mobile=\"top\"]) .pfe-band__container > .pfe-band__footer {\n -ms-grid-row: 4;\n -ms-grid-column: 1;\n -ms-grid-column-span: 1;\n }\n :host([has_aside][aside-mobile=\"top\"]) .pfe-band__container > .pfe-band__aside {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n }\n :host([has_header][has_aside][aside-mobile=\"top\"]) .pfe-band__container > .pfe-band__aside {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n }\n :host([has_footer][has_aside][aside-mobile=\"top\"]) .pfe-band__container > .pfe-band__aside {\n -ms-grid-row: 1;\n -ms-grid-row-span: 1;\n -ms-grid-column: 1;\n }\n :host([has_header][has_aside][has_footer][aside-mobile=\"top\"]) .pfe-band__container > .pfe-band__aside {\n -ms-grid-row: 1;\n -ms-grid-row-span: 1;\n -ms-grid-column: 1;\n }\n }\n @media (min-width: 768px) {\n :host([has_header][has_aside]) .pfe-band__container > .pfe-band__header {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n -ms-grid-column-span: 2;\n }\n :host([has_header][has_aside][aside-desktop=\"left\"]) .pfe-band__container > .pfe-band__header {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n -ms-grid-column-span: 2;\n }\n :host([has_header][has_aside][aside-height=\"full\"]) .pfe-band__container > .pfe-band__header {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n -ms-grid-column-span: 1;\n }\n :host([has_header][has_aside][aside-desktop=\"left\"][aside-height=\"full\"]) .pfe-band__container > .pfe-band__header {\n -ms-grid-row: 1;\n -ms-grid-column: 2;\n -ms-grid-column-span: 1;\n }\n :host([has_header][has_aside][has_footer]) .pfe-band__container > .pfe-band__header {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n -ms-grid-column-span: 2;\n }\n :host([has_header][has_aside][has_footer][aside-desktop=\"left\"]) .pfe-band__container > .pfe-band__header {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n -ms-grid-column-span: 2;\n }\n :host([has_header][has_aside][has_footer][aside-height=\"full\"]) .pfe-band__container > .pfe-band__header {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n -ms-grid-column-span: 1;\n }\n :host([has_header][has_aside][has_footer][aside-desktop=\"left\"][aside-height=\"full\"]) .pfe-band__container > .pfe-band__header {\n -ms-grid-row: 1;\n -ms-grid-column: 2;\n -ms-grid-column-span: 1;\n }\n :host([has_aside]) .pfe-band__container > .pfe-band__body {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n }\n :host([has_aside][aside-desktop=\"left\"]) .pfe-band__container > .pfe-band__body {\n -ms-grid-row: 1;\n -ms-grid-column: 2;\n }\n :host([has_header][has_aside]) .pfe-band__container > .pfe-band__body {\n -ms-grid-row: 2;\n -ms-grid-column: 1;\n }\n :host([has_header][has_aside][aside-desktop=\"left\"]) .pfe-band__container > .pfe-band__body {\n -ms-grid-row: 2;\n -ms-grid-column: 2;\n }\n :host([has_header][has_aside][aside-height=\"full\"]) .pfe-band__container > .pfe-band__body {\n -ms-grid-row: 2;\n -ms-grid-column: 1;\n }\n :host([has_header][has_aside][aside-desktop=\"left\"][aside-height=\"full\"]) .pfe-band__container > .pfe-band__body {\n -ms-grid-row: 2;\n -ms-grid-column: 2;\n }\n :host([has_footer][has_aside]) .pfe-band__container > .pfe-band__body {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n }\n :host([has_footer][has_aside][aside-desktop=\"left\"]) .pfe-band__container > .pfe-band__body {\n -ms-grid-row: 1;\n -ms-grid-column: 2;\n }\n :host([has_footer][has_aside][aside-height=\"full\"]) .pfe-band__container > .pfe-band__body {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n }\n :host([has_footer][has_aside][aside-desktop=\"left\"][aside-height=\"full\"]) .pfe-band__container > .pfe-band__body {\n -ms-grid-row: 1;\n -ms-grid-column: 2;\n }\n :host([has_header][has_aside][has_footer]) .pfe-band__container > .pfe-band__body {\n -ms-grid-row: 2;\n -ms-grid-column: 1;\n }\n :host([has_header][has_aside][has_footer][aside-desktop=\"left\"]) .pfe-band__container > .pfe-band__body {\n -ms-grid-row: 2;\n -ms-grid-column: 2;\n }\n :host([has_header][has_aside][has_footer][aside-height=\"full\"]) .pfe-band__container > .pfe-band__body {\n -ms-grid-row: 2;\n -ms-grid-column: 1;\n }\n :host([has_header][has_aside][has_footer][aside-desktop=\"left\"][aside-height=\"full\"]) .pfe-band__container > .pfe-band__body {\n -ms-grid-row: 2;\n -ms-grid-column: 2;\n }\n :host([has_footer][has_aside]) .pfe-band__container > .pfe-band__footer {\n -ms-grid-row: 2;\n -ms-grid-column: 1;\n -ms-grid-column-span: 2;\n }\n :host([has_footer][has_aside][aside-desktop=\"left\"]) .pfe-band__container > .pfe-band__footer {\n -ms-grid-row: 2;\n -ms-grid-column: 1;\n -ms-grid-column-span: 2;\n }\n :host([has_footer][has_aside][aside-height=\"full\"]) .pfe-band__container > .pfe-band__footer {\n -ms-grid-row: 2;\n -ms-grid-column: 1;\n -ms-grid-column-span: 1;\n }\n :host([has_footer][has_aside][aside-desktop=\"left\"][aside-height=\"full\"]) .pfe-band__container > .pfe-band__footer {\n -ms-grid-row: 2;\n -ms-grid-column: 2;\n -ms-grid-column-span: 1;\n }\n :host([has_header][has_aside][has_footer]) .pfe-band__container > .pfe-band__footer {\n -ms-grid-row: 3;\n -ms-grid-column: 1;\n -ms-grid-column-span: 2;\n }\n :host([has_header][has_aside][has_footer][aside-desktop=\"left\"]) .pfe-band__container > .pfe-band__footer {\n -ms-grid-row: 3;\n -ms-grid-column: 1;\n -ms-grid-column-span: 2;\n }\n :host([has_header][has_aside][has_footer][aside-height=\"full\"]) .pfe-band__container > .pfe-band__footer {\n -ms-grid-row: 3;\n -ms-grid-column: 1;\n -ms-grid-column-span: 1;\n }\n :host([has_header][has_aside][has_footer][aside-desktop=\"left\"][aside-height=\"full\"]) .pfe-band__container > .pfe-band__footer {\n -ms-grid-row: 3;\n -ms-grid-column: 2;\n -ms-grid-column-span: 1;\n }\n .pfe-band__aside {\n -ms-grid-row: 1;\n -ms-grid-column: 2;\n }\n :host([has_aside][aside-desktop=\"left\"]) .pfe-band__container > .pfe-band__aside {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n }\n :host([has_header][has_aside]) .pfe-band__container > .pfe-band__aside {\n -ms-grid-row: 2;\n -ms-grid-column: 2;\n }\n :host([has_header][has_aside][aside-desktop=\"left\"]) .pfe-band__container > .pfe-band__aside {\n -ms-grid-row: 2;\n -ms-grid-column: 1;\n }\n :host([has_header][has_aside][aside-height=\"full\"]) .pfe-band__container > .pfe-band__aside {\n -ms-grid-row: 1;\n -ms-grid-row-span: 2;\n -ms-grid-column: 2;\n }\n :host([has_header][has_aside][aside-desktop=\"left\"][aside-height=\"full\"]) .pfe-band__container > .pfe-band__aside {\n -ms-grid-row: 1;\n -ms-grid-row-span: 2;\n -ms-grid-column: 1;\n }\n :host([has_footer][has_aside]) .pfe-band__container > .pfe-band__aside {\n -ms-grid-row: 1;\n -ms-grid-row-span: 1;\n -ms-grid-column: 2;\n }\n :host([has_footer][has_aside][aside-desktop=\"left\"]) .pfe-band__container > .pfe-band__aside {\n -ms-grid-row: 1;\n -ms-grid-row-span: 1;\n -ms-grid-column: 1;\n }\n :host([has_footer][has_aside][aside-height=\"full\"]) .pfe-band__container > .pfe-band__aside {\n -ms-grid-row: 1;\n -ms-grid-row-span: 2;\n -ms-grid-column: 2;\n }\n :host([has_footer][has_aside][aside-desktop=\"left\"][aside-height=\"full\"]) .pfe-band__container > .pfe-band__aside {\n -ms-grid-row: 1;\n -ms-grid-row-span: 2;\n -ms-grid-column: 1;\n }\n :host([has_header][has_aside][has_footer]) .pfe-band__container > .pfe-band__aside {\n -ms-grid-row: 2;\n -ms-grid-row-span: 1;\n -ms-grid-column: 2;\n }\n :host([has_header][has_aside][has_footer][aside-desktop=\"left\"]) .pfe-band__container > .pfe-band__aside {\n -ms-grid-row: 2;\n -ms-grid-row-span: 1;\n -ms-grid-column: 1;\n }\n :host([has_header][has_aside][has_footer][aside-height=\"full\"]) .pfe-band__container > .pfe-band__aside {\n -ms-grid-row: 1;\n -ms-grid-row-span: 3;\n -ms-grid-column: 2;\n }\n :host([has_header][has_aside][has_footer][aside-desktop=\"left\"][aside-height=\"full\"]) .pfe-band__container > .pfe-band__aside {\n -ms-grid-row: 1;\n -ms-grid-row-span: 3;\n -ms-grid-column: 1;\n }\n }\n :host([use-grid]) .pfe-band__aside {\n display: -ms-grid;\n display: grid;\n -ms-grid-rows: auto;\n grid-template-rows: auto;\n -ms-grid-columns: 1fr;\n grid-template-columns: 1fr;\n -ms-grid-columns: var(--pfe-band__aside--layout, 1fr);\n grid-template-columns: var(--pfe-band__aside--layout, 1fr);\n grid-row-gap: 1rem;\n grid-row-gap: var(--pfe-band__aside--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n row-gap: 1rem;\n row-gap: var(--pfe-band__aside--gutter--vertical, var(--pfe-theme--container-spacer, 1rem));\n grid-column-gap: calc(1rem * 3);\n grid-column-gap: var(--pfe-band__aside--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n -webkit-column-gap: calc(1rem * 3);\n -moz-column-gap: calc(1rem * 3);\n column-gap: calc(1rem * 3);\n -webkit-column-gap: var(--pfe-band__aside--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n -moz-column-gap: var(--pfe-band__aside--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n column-gap: var(--pfe-band__aside--gutter--horizontal, calc(var(--pfe-theme--container-spacer, 1rem) * 3));\n }\n :host([use-grid]) .pfe-band__aside > *:nth-child(1) {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n }\n :host([use-grid]) .pfe-band__aside > *:nth-child(1) {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n }\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n /* IE10+ */\n .pfe-band__container::after {\n clear: both;\n content: \"\";\n display: table;\n }\n .pfe-band__header,\n .pfe-band__body,\n .pfe-band__footer {\n float: left;\n }\n :host([aside-mobile=\"top\"]) .pfe-band__header, :host([aside-mobile=\"top\"])\n .pfe-band__body, :host([aside-mobile=\"top\"])\n .pfe-band__footer {\n float: right;\n }\n :host(:not([aside-height=\"full\"])) .pfe-band__header, :host(:not([aside-height=\"full\"]))\n .pfe-band__body, :host(:not([aside-height=\"full\"]))\n .pfe-band__footer {\n width: 60%;\n }\n .pfe-band__footer {\n clear: both;\n }\n .pfe-band__aside {\n -webkit-box-flex: 1;\n -webkit-flex-grow: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n -webkit-align-self: flex-start;\n -ms-flex-item-align: start;\n align-self: flex-start;\n float: right;\n width: 35%;\n margin: 0 1.9%;\n }\n :host([aside-desktop=\"left\"]) .pfe-band__aside {\n float: left;\n }\n .pfe-band__wrapper {\n width: 60%;\n float: left;\n }\n :host([aside-desktop=\"left\"]) .pfe-band__wrapper {\n float: right;\n }\n}\n\n/*# sourceMappingURL=pfe-band.css.map */\n"]} \ No newline at end of file diff --git a/elements/pfe-band/dist/pfe-band.min.js b/elements/pfe-band/dist/pfe-band.min.js new file mode 100644 index 0000000000..4499ffc39d --- /dev/null +++ b/elements/pfe-band/dist/pfe-band.min.js @@ -0,0 +1,26 @@ +import e from"../../pfelement/dist/pfelement.min.js"; +/*! + * PatternFly Elements: PfeBand 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * +*/class a extends e{static get version(){return"1.12.3"}get html(){return`\n\n
      \n ${this.hasSlot("pfe-band--aside")&&"top"===this.asidePosition.mobile?'':""}\n ${"full"===this.asideHeight?'
      ':""}\n ${this.hasSlot("pfe-band--header")?'
      \n \n
      ':""}\n
      \n \n
      \n ${"full"!==this.asideHeight&&this.hasSlot("pfe-band--aside")&&"top"!==this.asidePosition.mobile?'\n \n ':""}\n ${this.hasSlot("pfe-band--footer")?'
      \n \n
      ':""}\n ${"full"===this.asideHeight?"
      ":""}\n ${"full"===this.asideHeight&&this.hasSlot("pfe-band--aside")&&"top"!==this.asidePosition.mobile?'\n \n ':""}\n
      `}static get tag(){return"pfe-band"}static get meta(){return{title:"Band",description:"This element creates a header, body, footer, and aside region in which to place content or other components."}}get templateUrl(){return"pfe-band.html"}get styleUrl(){return"pfe-band.scss"}get asidePosition(){return{desktop:this.asideDesktop,mobile:this.asideMobile,height:this.asideHeight}}static get properties(){return{imgSrc:{title:"Background image",type:String,observer:"_imgSrcChanged"},oldImgSrc:{alias:"imgSrc",attr:"pfe-img-src"},color:{title:"Background color",type:String,values:["lightest","base","darker","darkest","complement","accent"],default:"base",observer:"_colorChanged"},oldColor:{alias:"color",attr:"pfe-color"},asideDesktop:{title:"side positioning (desktop)",type:String,values:["right","left"],default:"right"},oldAsideDesktop:{alias:"asideDesktop",attr:"pfe-aside-desktop"},asideMobile:{title:"Aside positioning (mobile)",type:String,values:["top","bottom"],default:"bottom"},oldAsideMobile:{alias:"asideMobile",attr:"pfe-aside-mobile"},asideHeight:{title:"Aside height",type:String,values:["full","body"],default:"body"},oldAsideHeight:{alias:"asideHeight",attr:"pfe-aside-height"},size:{title:"Padding size",type:String,values:["small"]},oldSize:{alias:"size",attr:"pfe-size"},useGrid:{title:"Default grid on for the light DOM regions (header, body, footer, aside)",type:Boolean,default:!1}}}static get slots(){return{header:{title:"Header",type:"array",namedSlot:!0,maxItems:3,items:{$ref:"raw"}},body:{title:"Body",type:"array",namedSlot:!1,items:{oneOf:[{$ref:"pfe-card"},{$ref:"raw"}]}},footer:{title:"Footer",type:"array",namedSlot:!0,maxItems:3,items:{oneOf:[{$ref:"pfe-cta"},{$ref:"raw"}]}},aside:{title:"Aside",type:"array",namedSlot:!0,maxItems:5,items:{oneOf:[{$ref:"pfe-card"},{$ref:"raw"}]}}}}static get PfeType(){return e.PfeTypes.Container}constructor(){super(a,{type:a.PfeType})}_colorChanged(){this.resetContext()}_imgSrcChanged(e,a){this.style.backgroundImage=a?`url('${a}')`:""}}e.create(a);export default a; +//# sourceMappingURL=pfe-band.min.js.map diff --git a/elements/pfe-band/dist/pfe-band.min.js.map b/elements/pfe-band/dist/pfe-band.min.js.map new file mode 100644 index 0000000000..b774d8e325 --- /dev/null +++ b/elements/pfe-band/dist/pfe-band.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-band.min.js","sources":["../_temp/pfe-band.js"],"sourcesContent":["/*!\n * PatternFly Elements: PfeBand 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement.js\";\n\nclass PfeBand extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n
      \n ${this.hasSlot(\"pfe-band--aside\") && this.asidePosition.mobile === \"top\" ? `` : \"\"}\n ${this.asideHeight === \"full\" ? `
      ` : \"\"}\n ${this.hasSlot(\"pfe-band--header\") ? `
      \n \n
      ` : \"\"}\n
      \n \n
      \n ${this.asideHeight !== \"full\" && this.hasSlot(\"pfe-band--aside\") && this.asidePosition.mobile !== \"top\" ? `\n \n ` : \"\"}\n ${this.hasSlot(\"pfe-band--footer\") ? `
      \n \n
      ` : \"\"}\n ${this.asideHeight === \"full\" ? `
      ` : \"\"}\n ${this.asideHeight === \"full\" && this.hasSlot(\"pfe-band--aside\") && this.asidePosition.mobile !== \"top\" ? `\n \n ` : \"\"}\n
      `;\n }\n\n static get tag() {\n return \"pfe-band\";\n }\n\n static get meta() {\n return {\n title: \"Band\",\n description:\n \"This element creates a header, body, footer, and aside region in which to place content or other components.\",\n };\n }\n\n get templateUrl() {\n return \"pfe-band.html\";\n }\n\n get styleUrl() {\n return \"pfe-band.scss\";\n }\n\n get asidePosition() {\n return {\n desktop: this.asideDesktop,\n mobile: this.asideMobile,\n height: this.asideHeight,\n };\n }\n\n static get properties() {\n return {\n imgSrc: {\n title: \"Background image\",\n type: String,\n observer: \"_imgSrcChanged\",\n },\n // @TODO: Deprecated property in 1.0\n oldImgSrc: {\n alias: \"imgSrc\",\n attr: \"pfe-img-src\",\n },\n color: {\n title: \"Background color\",\n type: String,\n values: [\"lightest\", \"base\", \"darker\", \"darkest\", \"complement\", \"accent\"],\n default: \"base\",\n observer: \"_colorChanged\",\n },\n // @TODO: Deprecated property in 1.0\n oldColor: {\n alias: \"color\",\n attr: \"pfe-color\",\n },\n asideDesktop: {\n title: \"side positioning (desktop)\",\n type: String,\n values: [\"right\", \"left\"],\n default: \"right\",\n },\n // @TODO: Deprecated property in 1.0\n oldAsideDesktop: {\n alias: \"asideDesktop\",\n attr: \"pfe-aside-desktop\",\n },\n asideMobile: {\n title: \"Aside positioning (mobile)\",\n type: String,\n values: [\"top\", \"bottom\"],\n default: \"bottom\",\n },\n // @TODO: Deprecated property in 1.0\n oldAsideMobile: {\n alias: \"asideMobile\",\n attr: \"pfe-aside-mobile\",\n },\n asideHeight: {\n title: \"Aside height\",\n type: String,\n values: [\"full\", \"body\"],\n default: \"body\",\n },\n // @TODO: Deprecated property in 1.0\n oldAsideHeight: {\n alias: \"asideHeight\",\n attr: \"pfe-aside-height\",\n },\n size: {\n title: \"Padding size\",\n type: String,\n values: [\"small\"],\n },\n // @TODO: Deprecated property in 1.0\n oldSize: {\n alias: \"size\",\n attr: \"pfe-size\",\n },\n useGrid: {\n title: \"Default grid on for the light DOM regions (header, body, footer, aside)\",\n type: Boolean,\n default: false,\n },\n };\n }\n\n static get slots() {\n return {\n header: {\n title: \"Header\",\n type: \"array\",\n namedSlot: true,\n maxItems: 3,\n items: {\n $ref: \"raw\",\n },\n },\n body: {\n title: \"Body\",\n type: \"array\",\n namedSlot: false,\n items: {\n oneOf: [\n {\n $ref: \"pfe-card\",\n },\n {\n $ref: \"raw\",\n },\n ],\n },\n },\n footer: {\n title: \"Footer\",\n type: \"array\",\n namedSlot: true,\n maxItems: 3,\n items: {\n oneOf: [\n {\n $ref: \"pfe-cta\",\n },\n {\n $ref: \"raw\",\n },\n ],\n },\n },\n aside: {\n title: \"Aside\",\n type: \"array\",\n namedSlot: true,\n maxItems: 5,\n items: {\n oneOf: [\n {\n $ref: \"pfe-card\",\n },\n {\n $ref: \"raw\",\n },\n ],\n },\n },\n };\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Container;\n }\n\n constructor() {\n super(PfeBand, { type: PfeBand.PfeType });\n }\n\n _colorChanged() {\n // Update the context\n this.resetContext();\n }\n\n // Update the background image\n _imgSrcChanged(oldVal, newVal) {\n // Set the image as the background image\n this.style.backgroundImage = newVal ? `url('${newVal}')` : ``;\n }\n}\n\nPFElement.create(PfeBand);\n\nexport { PfeBand as default };\n"],"names":["PfeBand","PFElement","version","html","this","hasSlot","asidePosition","mobile","asideHeight","tag","meta","title","description","templateUrl","styleUrl","desktop","asideDesktop","asideMobile","height","properties","imgSrc","type","String","observer","oldImgSrc","alias","attr","color","values","default","oldColor","oldAsideDesktop","oldAsideMobile","oldAsideHeight","size","oldSize","useGrid","Boolean","slots","header","namedSlot","maxItems","items","$ref","body","oneOf","footer","aside","PfeType","PfeTypes","Container","[object Object]","super","resetContext","oldVal","newVal","style","backgroundImage","create"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EA2BA,MAAMA,UAAgBC,EAGpBC,qBACE,MAAO,SAITC,WACE,MAAO,ux+BAGPC,KAAKC,QAAQ,oBAAoD,QAA9BD,KAAKE,cAAcC,OAAmB,wFAE/D,SACW,SAArBH,KAAKI,YAAyB,kCAAoC,WAChEJ,KAAKC,QAAQ,oBAAsB,gGAExB,sFAIU,SAArBD,KAAKI,aAA0BJ,KAAKC,QAAQ,oBAAoD,QAA9BD,KAAKE,cAAcC,OAAmB,mGAG9F,WACVH,KAAKC,QAAQ,oBAAsB,gGAExB,WACU,SAArBD,KAAKI,YAAyB,SAAW,SACtB,SAArBJ,KAAKI,aAA0BJ,KAAKC,QAAQ,oBAAoD,QAA9BD,KAAKE,cAAcC,OAAmB,6FAG9F,iBAIZE,iBACE,MAAO,WAGTC,kBACE,MAAO,CACLC,MAAO,OACPC,YACE,gHAINC,kBACE,MAAO,gBAGTC,eACE,MAAO,gBAGTR,oBACE,MAAO,CACLS,QAASX,KAAKY,aACdT,OAAQH,KAAKa,YACbC,OAAQd,KAAKI,aAIjBW,wBACE,MAAO,CACLC,OAAQ,CACNT,MAAO,mBACPU,KAAMC,OACNC,SAAU,kBAGZC,UAAW,CACTC,MAAO,SACPC,KAAM,eAERC,MAAO,CACLhB,MAAO,mBACPU,KAAMC,OACNM,OAAQ,CAAC,WAAY,OAAQ,SAAU,UAAW,aAAc,UAChEC,QAAS,OACTN,SAAU,iBAGZO,SAAU,CACRL,MAAO,QACPC,KAAM,aAERV,aAAc,CACZL,MAAO,6BACPU,KAAMC,OACNM,OAAQ,CAAC,QAAS,QAClBC,QAAS,SAGXE,gBAAiB,CACfN,MAAO,eACPC,KAAM,qBAERT,YAAa,CACXN,MAAO,6BACPU,KAAMC,OACNM,OAAQ,CAAC,MAAO,UAChBC,QAAS,UAGXG,eAAgB,CACdP,MAAO,cACPC,KAAM,oBAERlB,YAAa,CACXG,MAAO,eACPU,KAAMC,OACNM,OAAQ,CAAC,OAAQ,QACjBC,QAAS,QAGXI,eAAgB,CACdR,MAAO,cACPC,KAAM,oBAERQ,KAAM,CACJvB,MAAO,eACPU,KAAMC,OACNM,OAAQ,CAAC,UAGXO,QAAS,CACPV,MAAO,OACPC,KAAM,YAERU,QAAS,CACPzB,MAAO,0EACPU,KAAMgB,QACNR,SAAS,IAKfS,mBACE,MAAO,CACLC,OAAQ,CACN5B,MAAO,SACPU,KAAM,QACNmB,WAAW,EACXC,SAAU,EACVC,MAAO,CACLC,KAAM,QAGVC,KAAM,CACJjC,MAAO,OACPU,KAAM,QACNmB,WAAW,EACXE,MAAO,CACLG,MAAO,CACL,CACEF,KAAM,YAER,CACEA,KAAM,UAKdG,OAAQ,CACNnC,MAAO,SACPU,KAAM,QACNmB,WAAW,EACXC,SAAU,EACVC,MAAO,CACLG,MAAO,CACL,CACEF,KAAM,WAER,CACEA,KAAM,UAKdI,MAAO,CACLpC,MAAO,QACPU,KAAM,QACNmB,WAAW,EACXC,SAAU,EACVC,MAAO,CACLG,MAAO,CACL,CACEF,KAAM,YAER,CACEA,KAAM,WASlBK,qBACE,OAAO/C,EAAUgD,SAASC,UAG5BC,cACEC,MAAMpD,EAAS,CAAEqB,KAAMrB,EAAQgD,UAGjCG,gBAEE/C,KAAKiD,eAIPF,eAAeG,EAAQC,GAErBnD,KAAKoD,MAAMC,gBAAkBF,EAAS,QAAQA,MAAa,IAI/DtD,EAAUyD,OAAO1D"} \ No newline at end of file diff --git a/elements/pfe-band/dist/pfe-band.umd.js b/elements/pfe-band/dist/pfe-band.umd.js new file mode 100644 index 0000000000..4d975616a4 --- /dev/null +++ b/elements/pfe-band/dist/pfe-band.umd.js @@ -0,0 +1,300 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('../../pfelement/dist/pfelement.umd')) : + typeof define === 'function' && define.amd ? define(['../../pfelement/dist/pfelement.umd'], factory) : + (global = global || self, global.PfeBand = factory(global.PFElement)); +}(this, (function (PFElement) { 'use strict'; + + PFElement = PFElement && Object.prototype.hasOwnProperty.call(PFElement, 'default') ? PFElement['default'] : PFElement; + + var classCallCheck = function (instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } + }; + + var createClass = function () { + function defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } + + return function (Constructor, protoProps, staticProps) { + if (protoProps) defineProperties(Constructor.prototype, protoProps); + if (staticProps) defineProperties(Constructor, staticProps); + return Constructor; + }; + }(); + + var inherits = function (subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); + } + + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + enumerable: false, + writable: true, + configurable: true + } + }); + if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; + }; + + var possibleConstructorReturn = function (self, call) { + if (!self) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return call && (typeof call === "object" || typeof call === "function") ? call : self; + }; + + /*! + * PatternFly Elements: PfeBand 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * + */ + + var PfeBand = function (_PFElement) { + inherits(PfeBand, _PFElement); + createClass(PfeBand, [{ + key: "html", + + + // Injected at build-time + get: function get() { + return "\n\n
      \n " + (this.hasSlot("pfe-band--aside") && this.asidePosition.mobile === "top" ? "" : "") + "\n " + (this.asideHeight === "full" ? "
      " : "") + "\n " + (this.hasSlot("pfe-band--header") ? "
      \n \n
      " : "") + "\n
      \n \n
      \n " + (this.asideHeight !== "full" && this.hasSlot("pfe-band--aside") && this.asidePosition.mobile !== "top" ? "\n \n " : "") + "\n " + (this.hasSlot("pfe-band--footer") ? "
      \n \n
      " : "") + "\n " + (this.asideHeight === "full" ? "
      " : "") + "\n " + (this.asideHeight === "full" && this.hasSlot("pfe-band--aside") && this.asidePosition.mobile !== "top" ? "\n \n " : "") + "\n
      "; + } + }, { + key: "templateUrl", + get: function get() { + return "pfe-band.html"; + } + }, { + key: "styleUrl", + get: function get() { + return "pfe-band.scss"; + } + }, { + key: "asidePosition", + get: function get() { + return { + desktop: this.asideDesktop, + mobile: this.asideMobile, + height: this.asideHeight + }; + } + }], [{ + key: "version", + + + // Injected at build-time + get: function get() { + return "1.12.3"; + } + }, { + key: "tag", + get: function get() { + return "pfe-band"; + } + }, { + key: "meta", + get: function get() { + return { + title: "Band", + description: "This element creates a header, body, footer, and aside region in which to place content or other components." + }; + } + }, { + key: "properties", + get: function get() { + return { + imgSrc: { + title: "Background image", + type: String, + observer: "_imgSrcChanged" + }, + // @TODO: Deprecated property in 1.0 + oldImgSrc: { + alias: "imgSrc", + attr: "pfe-img-src" + }, + color: { + title: "Background color", + type: String, + values: ["lightest", "base", "darker", "darkest", "complement", "accent"], + default: "base", + observer: "_colorChanged" + }, + // @TODO: Deprecated property in 1.0 + oldColor: { + alias: "color", + attr: "pfe-color" + }, + asideDesktop: { + title: "side positioning (desktop)", + type: String, + values: ["right", "left"], + default: "right" + }, + // @TODO: Deprecated property in 1.0 + oldAsideDesktop: { + alias: "asideDesktop", + attr: "pfe-aside-desktop" + }, + asideMobile: { + title: "Aside positioning (mobile)", + type: String, + values: ["top", "bottom"], + default: "bottom" + }, + // @TODO: Deprecated property in 1.0 + oldAsideMobile: { + alias: "asideMobile", + attr: "pfe-aside-mobile" + }, + asideHeight: { + title: "Aside height", + type: String, + values: ["full", "body"], + default: "body" + }, + // @TODO: Deprecated property in 1.0 + oldAsideHeight: { + alias: "asideHeight", + attr: "pfe-aside-height" + }, + size: { + title: "Padding size", + type: String, + values: ["small"] + }, + // @TODO: Deprecated property in 1.0 + oldSize: { + alias: "size", + attr: "pfe-size" + }, + useGrid: { + title: "Default grid on for the light DOM regions (header, body, footer, aside)", + type: Boolean, + default: false + } + }; + } + }, { + key: "slots", + get: function get() { + return { + header: { + title: "Header", + type: "array", + namedSlot: true, + maxItems: 3, + items: { + $ref: "raw" + } + }, + body: { + title: "Body", + type: "array", + namedSlot: false, + items: { + oneOf: [{ + $ref: "pfe-card" + }, { + $ref: "raw" + }] + } + }, + footer: { + title: "Footer", + type: "array", + namedSlot: true, + maxItems: 3, + items: { + oneOf: [{ + $ref: "pfe-cta" + }, { + $ref: "raw" + }] + } + }, + aside: { + title: "Aside", + type: "array", + namedSlot: true, + maxItems: 5, + items: { + oneOf: [{ + $ref: "pfe-card" + }, { + $ref: "raw" + }] + } + } + }; + } + + // Declare the type of this component + + }, { + key: "PfeType", + get: function get() { + return PFElement.PfeTypes.Container; + } + }]); + + function PfeBand() { + classCallCheck(this, PfeBand); + return possibleConstructorReturn(this, (PfeBand.__proto__ || Object.getPrototypeOf(PfeBand)).call(this, PfeBand, { type: PfeBand.PfeType })); + } + + createClass(PfeBand, [{ + key: "_colorChanged", + value: function _colorChanged() { + // Update the context + this.resetContext(); + } + + // Update the background image + + }, { + key: "_imgSrcChanged", + value: function _imgSrcChanged(oldVal, newVal) { + // Set the image as the background image + this.style.backgroundImage = newVal ? "url('" + newVal + "')" : ""; + } + }]); + return PfeBand; + }(PFElement); + + PFElement.create(PfeBand); + + return PfeBand; + +}))); +//# sourceMappingURL=pfe-band.umd.js.map diff --git a/elements/pfe-band/dist/pfe-band.umd.js.map b/elements/pfe-band/dist/pfe-band.umd.js.map new file mode 100644 index 0000000000..36c6d3ca68 --- /dev/null +++ b/elements/pfe-band/dist/pfe-band.umd.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-band.umd.js","sources":["../_temp/pfe-band.umd.js"],"sourcesContent":["/*!\n * PatternFly Elements: PfeBand 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement\";\n\nclass PfeBand extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n
      \n ${this.hasSlot(\"pfe-band--aside\") && this.asidePosition.mobile === \"top\" ? `` : \"\"}\n ${this.asideHeight === \"full\" ? `
      ` : \"\"}\n ${this.hasSlot(\"pfe-band--header\") ? `
      \n \n
      ` : \"\"}\n
      \n \n
      \n ${this.asideHeight !== \"full\" && this.hasSlot(\"pfe-band--aside\") && this.asidePosition.mobile !== \"top\" ? `\n \n ` : \"\"}\n ${this.hasSlot(\"pfe-band--footer\") ? `
      \n \n
      ` : \"\"}\n ${this.asideHeight === \"full\" ? `
      ` : \"\"}\n ${this.asideHeight === \"full\" && this.hasSlot(\"pfe-band--aside\") && this.asidePosition.mobile !== \"top\" ? `\n \n ` : \"\"}\n
      `;\n }\n\n static get tag() {\n return \"pfe-band\";\n }\n\n static get meta() {\n return {\n title: \"Band\",\n description:\n \"This element creates a header, body, footer, and aside region in which to place content or other components.\",\n };\n }\n\n get templateUrl() {\n return \"pfe-band.html\";\n }\n\n get styleUrl() {\n return \"pfe-band.scss\";\n }\n\n get asidePosition() {\n return {\n desktop: this.asideDesktop,\n mobile: this.asideMobile,\n height: this.asideHeight,\n };\n }\n\n static get properties() {\n return {\n imgSrc: {\n title: \"Background image\",\n type: String,\n observer: \"_imgSrcChanged\",\n },\n // @TODO: Deprecated property in 1.0\n oldImgSrc: {\n alias: \"imgSrc\",\n attr: \"pfe-img-src\",\n },\n color: {\n title: \"Background color\",\n type: String,\n values: [\"lightest\", \"base\", \"darker\", \"darkest\", \"complement\", \"accent\"],\n default: \"base\",\n observer: \"_colorChanged\",\n },\n // @TODO: Deprecated property in 1.0\n oldColor: {\n alias: \"color\",\n attr: \"pfe-color\",\n },\n asideDesktop: {\n title: \"side positioning (desktop)\",\n type: String,\n values: [\"right\", \"left\"],\n default: \"right\",\n },\n // @TODO: Deprecated property in 1.0\n oldAsideDesktop: {\n alias: \"asideDesktop\",\n attr: \"pfe-aside-desktop\",\n },\n asideMobile: {\n title: \"Aside positioning (mobile)\",\n type: String,\n values: [\"top\", \"bottom\"],\n default: \"bottom\",\n },\n // @TODO: Deprecated property in 1.0\n oldAsideMobile: {\n alias: \"asideMobile\",\n attr: \"pfe-aside-mobile\",\n },\n asideHeight: {\n title: \"Aside height\",\n type: String,\n values: [\"full\", \"body\"],\n default: \"body\",\n },\n // @TODO: Deprecated property in 1.0\n oldAsideHeight: {\n alias: \"asideHeight\",\n attr: \"pfe-aside-height\",\n },\n size: {\n title: \"Padding size\",\n type: String,\n values: [\"small\"],\n },\n // @TODO: Deprecated property in 1.0\n oldSize: {\n alias: \"size\",\n attr: \"pfe-size\",\n },\n useGrid: {\n title: \"Default grid on for the light DOM regions (header, body, footer, aside)\",\n type: Boolean,\n default: false,\n },\n };\n }\n\n static get slots() {\n return {\n header: {\n title: \"Header\",\n type: \"array\",\n namedSlot: true,\n maxItems: 3,\n items: {\n $ref: \"raw\",\n },\n },\n body: {\n title: \"Body\",\n type: \"array\",\n namedSlot: false,\n items: {\n oneOf: [\n {\n $ref: \"pfe-card\",\n },\n {\n $ref: \"raw\",\n },\n ],\n },\n },\n footer: {\n title: \"Footer\",\n type: \"array\",\n namedSlot: true,\n maxItems: 3,\n items: {\n oneOf: [\n {\n $ref: \"pfe-cta\",\n },\n {\n $ref: \"raw\",\n },\n ],\n },\n },\n aside: {\n title: \"Aside\",\n type: \"array\",\n namedSlot: true,\n maxItems: 5,\n items: {\n oneOf: [\n {\n $ref: \"pfe-card\",\n },\n {\n $ref: \"raw\",\n },\n ],\n },\n },\n };\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Container;\n }\n\n constructor() {\n super(PfeBand, { type: PfeBand.PfeType });\n }\n\n _colorChanged() {\n // Update the context\n this.resetContext();\n }\n\n // Update the background image\n _imgSrcChanged(oldVal, newVal) {\n // Set the image as the background image\n this.style.backgroundImage = newVal ? `url('${newVal}')` : ``;\n }\n}\n\nPFElement.create(PfeBand);\n\nexport { PfeBand as default };\n"],"names":["PfeBand","hasSlot","asidePosition","mobile","asideHeight","desktop","asideDesktop","asideMobile","height","title","description","imgSrc","type","String","observer","oldImgSrc","alias","attr","color","values","default","oldColor","oldAsideDesktop","oldAsideMobile","oldAsideHeight","size","oldSize","useGrid","Boolean","header","namedSlot","maxItems","items","$ref","body","oneOf","footer","aside","PFElement","PfeTypes","Container","PfeType","resetContext","oldVal","newVal","style","backgroundImage","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-band/dist/pfe-band.umd.min.js b/elements/pfe-band/dist/pfe-band.umd.min.js new file mode 100644 index 0000000000..ca50394cbd --- /dev/null +++ b/elements/pfe-band/dist/pfe-band.umd.min.js @@ -0,0 +1,2 @@ +!function(e,a){"object"==typeof exports&&"undefined"!=typeof module?module.exports=a(require("../../pfelement/dist/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../../pfelement/dist/pfelement.umd.min"],a):(e=e||self).PfeBand=a(e.PFElement)}(this,function(e){"use strict";e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e;var a=function(e,a){if(!(e instanceof a))throw new TypeError("Cannot call a class as a function")},r=function(e,a,r){return a&&o(e.prototype,a),r&&o(e,r),e};function o(e,a){for(var r=0;r@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([color=accent]),:host([color=base]),:host([color=complement]),:host([color=darker]),:host([color=darkest]),:host([color=lighter]),:host([color=lightest]){background-color:#fff!important;color:#151515!important}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{color:#151515!important}}:host{--context:var(--pfe-band--context, light);display:block;border:1px solid transparent;border:var(--pfe-band--Border,var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) transparent);background-color:#f0f0f0;background-color:var(--pfe-band--BackgroundColor,var(--pfe-theme--color--surface--base,#f0f0f0));background-position:center center;background-position:var(--pfe-band--BackgroundPosition,center center);color:#3c3f42;color:var(--pfe-broadcasted--text,#3c3f42);padding:calc(calc(1rem * 4)/ 2) calc(1rem * 1);padding:calc(var(--pfe-band--Padding--vertical,calc(var(--pfe-theme--container-spacer,1rem) * 4))/ 2) var(--pfe-band--Padding--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 1))}@media (min-width:576px){:host{padding:calc(1rem * 4) calc(1rem * 1);padding:var(--pfe-band--Padding,var(--pfe-band--Padding--vertical,calc(var(--pfe-theme--container-spacer,1rem) * 4)) var(--pfe-band--Padding--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 1)))}}:host *,:host ::after,:host ::before{-webkit-box-sizing:border-box;box-sizing:border-box}@media print{:host{background-color:#fff!important;background-image:none!important;-webkit-box-shadow:none!important;box-shadow:none!important}}@media print{:host{border-radius:3px;border:1px solid #d2d2d2;padding:2rem 1rem}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{background-color:#fff!important;background-image:none!important;color:#151515!important;padding:2rem 1rem}}@media screen and (-ms-high-contrast:active) and (min-width:576px),screen and (-ms-high-contrast:none) and (min-width:576px){:host{padding:4rem 1rem}}:host([on=dark]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted--on-dark, #d2d2d2);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([on=saturated]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([on=light]){--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted, #6a6e73);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host([color=darker]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--darker, #3c3f42);--pfe-band--context:var(--pfe-theme--color--surface--darker--context, dark)}:host([color=darkest]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--darkest, #151515);--pfe-band--context:var(--pfe-theme--color--surface--darkest--context, dark)}:host([color=base]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--base, #f0f0f0);--pfe-band--context:var(--pfe-theme--color--surface--base--context, light)}:host([color=lighter]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--lighter, #f0f0f0);--pfe-band--context:var(--pfe-theme--color--surface--lighter--context, light)}:host([color=lightest]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-band--context:var(--pfe-theme--color--surface--lightest--context, light)}:host([color=accent]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--accent, #004080);--pfe-band--context:var(--pfe-theme--color--surface--accent--context, saturated)}:host([color=complement]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--complement, #002952);--pfe-band--context:var(--pfe-theme--color--surface--complement--context, saturated)}:host([size=small]){padding:calc(calc(1rem * 4)/ 4) calc(1rem * 1);padding:calc(var(--pfe-band--Padding--vertical,calc(var(--pfe-theme--container-spacer,1rem) * 4))/ 4) var(--pfe-band--Padding--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 1))}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([size=small]){padding:1rem}}.pfe-band__container{margin:0 auto}:host(:not([full-width])) .pfe-band__container{max-width:auto;max-width:var(--pfe-band--Width,auto)}@media screen and (min-width:768px){:host(:not([full-width])) .pfe-band__container{max-width:calc(768px - (calc(1rem * 1) * 4));max-width:var(--pfe-band--Width,calc(768px - (var(--pfe-band--Padding--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 1)) * 4)))}}@media screen and (min-width:992px){:host(:not([full-width])) .pfe-band__container{max-width:calc(992px - (calc(1rem * 1) * 4));max-width:var(--pfe-band--Width,calc(992px - (var(--pfe-band--Padding--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 1)) * 4)))}}@media screen and (min-width:1200px){:host(:not([full-width])) .pfe-band__container{max-width:calc(1200px - (calc(1rem * 1) * 4));max-width:var(--pfe-band--Width,calc(1200px - (var(--pfe-band--Padding--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 1)) * 4)))}}@supports (display:grid){.pfe-band__container{display:-ms-grid;display:grid;-ms-grid-rows:auto;grid-template-rows:auto;-ms-grid-columns:auto;grid-template-columns:auto;grid-template-areas:"body";grid-row-gap:1rem;grid-row-gap:var(--pfe-band--gutter--vertical,var(--pfe-theme--container-spacer,1rem));row-gap:1rem;row-gap:var(--pfe-band--gutter--vertical,var(--pfe-theme--container-spacer,1rem));grid-column-gap:calc(1rem * 3);grid-column-gap:var(--pfe-band--gutter--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 3));-webkit-column-gap:calc(1rem * 3);-moz-column-gap:calc(1rem * 3);column-gap:calc(1rem * 3);-webkit-column-gap:var(--pfe-band--gutter--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 3));-moz-column-gap:var(--pfe-band--gutter--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 3));column-gap:var(--pfe-band--gutter--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 3))}:host([has_header]) .pfe-band__container{grid-template-areas:"header" "body"}:host([has_aside]) .pfe-band__container{grid-template-areas:"body" "aside"}@media (max-width:767px){:host([has_aside][aside-mobile=top]) .pfe-band__container{grid-template-areas:"aside" "body"}}@media (min-width:768px){:host([has_aside]) .pfe-band__container{grid-template-areas:"body aside"}:host([has_aside][aside-desktop=left]) .pfe-band__container{grid-template-areas:"aside body"}}:host([has_footer]) .pfe-band__container{grid-template-areas:"body" "footer"}:host([has_header][has_aside]) .pfe-band__container{grid-template-areas:"header" "body" "aside"}@media (max-width:767px){:host([has_header][has_aside][aside-mobile=top]) .pfe-band__container{grid-template-areas:"aside" "header" "body"}}@media (min-width:768px){:host([has_header][has_aside]) .pfe-band__container{grid-template-areas:"header header" "body aside"}:host([has_header][has_aside][aside-desktop=left]) .pfe-band__container{grid-template-areas:"header header" "aside body"}:host([has_header][has_aside][aside-height=full]) .pfe-band__container{grid-template-areas:"header aside" "body aside"}:host([has_header][has_aside][aside-desktop=left][aside-height=full]) .pfe-band__container{grid-template-areas:"aside header" "aside body"}}:host([has_header][has_footer]) .pfe-band__container{grid-template-areas:"header" "body" "footer"}:host([has_footer][has_aside]) .pfe-band__container{grid-template-areas:"body" "aside" "footer"}@media (max-width:767px){:host([has_footer][has_aside][aside-mobile=top]) .pfe-band__container{grid-template-areas:"aside" "body" "footer"}}@media (min-width:768px){:host([has_footer][has_aside]) .pfe-band__container{grid-template-areas:"body aside" "footer footer"}:host([has_footer][has_aside][aside-desktop=left]) .pfe-band__container{grid-template-areas:"aside body" "footer footer"}:host([has_footer][has_aside][aside-height=full]) .pfe-band__container{grid-template-areas:"body aside" "footer aside"}:host([has_footer][has_aside][aside-desktop=left][aside-height=full]) .pfe-band__container{grid-template-areas:"aside body" "aside footer"}}:host([has_header][has_aside][has_footer]) .pfe-band__container{grid-template-areas:"header" "body" "footer" "aside"}@media (max-width:767px){:host([has_header][has_aside][has_footer][aside-mobile=top]) .pfe-band__container{grid-template-areas:"aside" "header" "body" "footer"}}@media (min-width:768px){:host([has_header][has_aside][has_footer]) .pfe-band__container{grid-template-areas:"header header" "body aside" "footer footer"}:host([has_header][has_aside][has_footer][aside-desktop=left]) .pfe-band__container{grid-template-areas:"header header" "aside body" "footer footer"}:host([has_header][has_aside][has_footer][aside-height=full]) .pfe-band__container{grid-template-areas:"header aside" "body aside" "footer aside"}:host([has_header][has_aside][has_footer][aside-desktop=left][aside-height=full]) .pfe-band__container{grid-template-areas:"aside header" "aside body" "aside footer"}}@media (min-width:768px){.pfe-band__container{-ms-grid-rows:auto;grid-template-rows:auto;-ms-grid-columns:1fr;grid-template-columns:1fr}.pfe-band__container>:nth-child(1){-ms-grid-row:1;-ms-grid-column:1}:host([has_aside]) .pfe-band__container{-ms-grid-rows:auto;grid-template-rows:auto;-ms-grid-columns:1fr 240px;grid-template-columns:1fr 240px;-ms-grid-columns:1fr var(--pfe-band--Width__aside--sm,240px);grid-template-columns:1fr var(--pfe-band--Width__aside--sm,240px)}:host([has_aside]) .pfe-band__container>:nth-child(1){-ms-grid-row:1;-ms-grid-column:1}:host([has_aside]) .pfe-band__container>:nth-child(2){-ms-grid-row:1;-ms-grid-column:2}:host([has_aside]) .pfe-band__container>:nth-child(1){-ms-grid-row:1;-ms-grid-column:1}:host([has_aside]) .pfe-band__container>:nth-child(2){-ms-grid-row:1;-ms-grid-column:2}:host([has_aside][aside-desktop=left]) .pfe-band__container{-ms-grid-rows:auto;grid-template-rows:auto;-ms-grid-columns:240px 1fr;grid-template-columns:240px 1fr;-ms-grid-columns:var(--pfe-band--Width__aside--sm,240px) 1fr;grid-template-columns:var(--pfe-band--Width__aside--sm,240px) 1fr}:host([has_aside][aside-desktop=left]) .pfe-band__container>:nth-child(1){-ms-grid-row:1;-ms-grid-column:1}:host([has_aside][aside-desktop=left]) .pfe-band__container>:nth-child(2){-ms-grid-row:1;-ms-grid-column:2}:host([has_aside][aside-desktop=left]) .pfe-band__container>:nth-child(1){-ms-grid-row:1;-ms-grid-column:1}:host([has_aside][aside-desktop=left]) .pfe-band__container>:nth-child(2){-ms-grid-row:1;-ms-grid-column:2}}@media (min-width:992px){:host([has_aside]) .pfe-band__container{-ms-grid-rows:auto;grid-template-rows:auto;-ms-grid-columns:1fr 300px;grid-template-columns:1fr 300px;-ms-grid-columns:var(--pfe-band--layout,1fr var(--pfe-band--Width__aside--lg,300px));grid-template-columns:var(--pfe-band--layout,1fr var(--pfe-band--Width__aside--lg,300px))}:host([has_aside]) .pfe-band__container>:nth-child(1){-ms-grid-row:1;-ms-grid-column:1}:host([has_aside]) .pfe-band__container>:nth-child(1){-ms-grid-row:1;-ms-grid-column:1}:host([has_aside]) .pfe-band__container>:nth-child(2){-ms-grid-row:1;-ms-grid-column:2}:host([has_aside][aside-desktop=left]) .pfe-band__container{-ms-grid-rows:auto;grid-template-rows:auto;-ms-grid-columns:300px 1fr;grid-template-columns:300px 1fr;-ms-grid-columns:var(--pfe-band--layout,var(--pfe-band--Width__aside--lg,300px) 1fr);grid-template-columns:var(--pfe-band--layout,var(--pfe-band--Width__aside--lg,300px) 1fr)}:host([has_aside][aside-desktop=left]) .pfe-band__container>:nth-child(1){-ms-grid-row:1;-ms-grid-column:1}:host([has_aside][aside-desktop=left]) .pfe-band__container>:nth-child(1){-ms-grid-row:1;-ms-grid-column:1}:host([has_aside][aside-desktop=left]) .pfe-band__container>:nth-child(2){-ms-grid-row:1;-ms-grid-column:2}}}:host([full-width]) .pfe-band__container{max-width:100%;max-width:var(--pfe-band--Width,100%)}@media screen and (min-width:768px){:host([full-width]) .pfe-band__container{width:calc(100% - calc(1rem * 1) * 4);width:calc(100% - var(--pfe-band--Padding--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 1)) * 4)}}@media screen and (min-width:992px){:host([full-width]) .pfe-band__container{width:calc(100% - calc(1rem * 1) * 4);width:calc(100% - var(--pfe-band--Padding--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 1)) * 4)}}@media screen and (min-width:1200px){:host([full-width]) .pfe-band__container{width:calc(100% - calc(1rem * 1) * 8);width:calc(100% - var(--pfe-band--Padding--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 1)) * 8)}}.pfe-band__container,.pfe-band__wrapper{width:100%;margin-bottom:calc(-1 * 1rem);margin-bottom:calc(-1 * var(--pfe-band--gutter--vertical,var(--pfe-theme--container-spacer,1rem)));margin-right:calc(-1 * 1rem);margin-right:calc(-1 * var(--pfe-band--gutter--vertical,var(--pfe-theme--container-spacer,1rem)))}@supports (display:grid){.pfe-band__container,.pfe-band__wrapper{margin:0 auto}}:host([full-width]) .pfe-band__wrapper{max-width:100%;max-width:var(--pfe-band--Width,100%)}.pfe-band__aside{height:100%}slot[name=pfe-band--aside]{display:block;height:100%}.pfe-band__header{margin-bottom:1rem;margin-bottom:var(--pfe-band__header--gutter--vertical,var(--pfe-theme--container-spacer,1rem));margin-right:1rem;margin-right:var(--pfe-band__header--gutter--vertical,var(--pfe-theme--container-spacer,1rem))}@supports (display:grid){.pfe-band__header{-ms-grid-row:1;-ms-grid-column:1;grid-area:header;margin-bottom:0;margin-right:0}:host([has_header][has_aside]) .pfe-band__container>.pfe-band__header{-ms-grid-row:1;-ms-grid-column:1}:host([has_header][has_footer]) .pfe-band__container>.pfe-band__header{-ms-grid-row:1;-ms-grid-column:1;-ms-grid-column-span:1}:host([has_header][has_aside][has_footer]) .pfe-band__container>.pfe-band__header{-ms-grid-row:1;-ms-grid-column:1;-ms-grid-column-span:1}:host([use-grid]) .pfe-band__header{display:-ms-grid;display:grid;-ms-grid-rows:auto;grid-template-rows:auto;-ms-grid-columns:1fr;grid-template-columns:1fr;-ms-grid-columns:var(--pfe-band__header--layout,1fr);grid-template-columns:var(--pfe-band__header--layout,1fr);grid-row-gap:1rem;grid-row-gap:var(--pfe-band__header--gutter--vertical,var(--pfe-theme--container-spacer,1rem));row-gap:1rem;row-gap:var(--pfe-band__header--gutter--vertical,var(--pfe-theme--container-spacer,1rem));grid-column-gap:calc(1rem * 3);grid-column-gap:var(--pfe-band__header--gutter--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 3));-webkit-column-gap:calc(1rem * 3);-moz-column-gap:calc(1rem * 3);column-gap:calc(1rem * 3);-webkit-column-gap:var(--pfe-band__header--gutter--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 3));-moz-column-gap:var(--pfe-band__header--gutter--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 3));column-gap:var(--pfe-band__header--gutter--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 3))}:host([use-grid]) .pfe-band__header>:nth-child(1){-ms-grid-row:1;-ms-grid-column:1}:host([use-grid]) .pfe-band__header>:nth-child(1){-ms-grid-row:1;-ms-grid-column:1}}.pfe-band__body{margin-bottom:1rem;margin-bottom:var(--pfe-band__body--gutter--vertical,var(--pfe-theme--container-spacer,1rem));margin-right:1rem;margin-right:var(--pfe-band__body--gutter--vertical,var(--pfe-theme--container-spacer,1rem))}@supports (display:grid){.pfe-band__body{-ms-grid-row:1;-ms-grid-column:1;grid-area:body;margin-bottom:0;margin-right:0}:host([has_header]) .pfe-band__container>.pfe-band__body{-ms-grid-row:2;-ms-grid-column:1}:host([has_aside]) .pfe-band__container>.pfe-band__body{-ms-grid-row:1;-ms-grid-column:1}:host([has_footer]) .pfe-band__container>.pfe-band__body{-ms-grid-row:1;-ms-grid-column:1}:host([has_header][has_aside]) .pfe-band__container>.pfe-band__body{-ms-grid-row:2;-ms-grid-column:1}:host([has_header][has_footer]) .pfe-band__container>.pfe-band__body{-ms-grid-row:2;-ms-grid-column:1}:host([has_footer][has_aside]) .pfe-band__container>.pfe-band__body{-ms-grid-row:1;-ms-grid-column:1}:host([has_header][has_aside][has_footer]) .pfe-band__container>.pfe-band__body{-ms-grid-row:2;-ms-grid-column:1}:host([use-grid]) .pfe-band__body{display:-ms-grid;display:grid;-ms-grid-rows:auto;grid-template-rows:auto;-ms-grid-columns:1fr;grid-template-columns:1fr;-ms-grid-columns:var(--pfe-band__body--layout,1fr);grid-template-columns:var(--pfe-band__body--layout,1fr);grid-row-gap:1rem;grid-row-gap:var(--pfe-band__body--gutter--vertical,var(--pfe-theme--container-spacer,1rem));row-gap:1rem;row-gap:var(--pfe-band__body--gutter--vertical,var(--pfe-theme--container-spacer,1rem));grid-column-gap:calc(1rem * 3);grid-column-gap:var(--pfe-band__body--gutter--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 3));-webkit-column-gap:calc(1rem * 3);-moz-column-gap:calc(1rem * 3);column-gap:calc(1rem * 3);-webkit-column-gap:var(--pfe-band__body--gutter--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 3));-moz-column-gap:var(--pfe-band__body--gutter--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 3));column-gap:var(--pfe-band__body--gutter--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 3))}:host([use-grid]) .pfe-band__body>:nth-child(1){-ms-grid-row:1;-ms-grid-column:1}:host([use-grid]) .pfe-band__body>:nth-child(1){-ms-grid-row:1;-ms-grid-column:1}}.pfe-band__footer{margin-bottom:1rem;margin-bottom:var(--pfe-band__footer--gutter--vertical,var(--pfe-theme--container-spacer,1rem));margin-right:1rem;margin-right:var(--pfe-band__footer--gutter--vertical,var(--pfe-theme--container-spacer,1rem))}@supports (display:grid){.pfe-band__footer{-ms-grid-row:2;-ms-grid-column:1;grid-area:footer;margin-bottom:0;margin-right:0}:host([has_header][has_footer]) .pfe-band__container>.pfe-band__footer{-ms-grid-row:3;-ms-grid-column:1}:host([has_footer][has_aside]) .pfe-band__container>.pfe-band__footer{-ms-grid-row:3;-ms-grid-column:1}:host([has_header][has_aside][has_footer]) .pfe-band__container>.pfe-band__footer{-ms-grid-row:3;-ms-grid-column:1;-ms-grid-column-span:1}:host([use-grid]) .pfe-band__footer{display:-ms-grid;display:grid;-ms-grid-rows:auto;grid-template-rows:auto;-ms-grid-columns:1fr;grid-template-columns:1fr;-ms-grid-columns:var(--pfe-band__footer--layout,1fr);grid-template-columns:var(--pfe-band__footer--layout,1fr);grid-row-gap:1rem;grid-row-gap:var(--pfe-band__footer--gutter--vertical,var(--pfe-theme--container-spacer,1rem));row-gap:1rem;row-gap:var(--pfe-band__footer--gutter--vertical,var(--pfe-theme--container-spacer,1rem));grid-column-gap:calc(1rem * 3);grid-column-gap:var(--pfe-band__footer--gutter--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 3));-webkit-column-gap:calc(1rem * 3);-moz-column-gap:calc(1rem * 3);column-gap:calc(1rem * 3);-webkit-column-gap:var(--pfe-band__footer--gutter--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 3));-moz-column-gap:var(--pfe-band__footer--gutter--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 3));column-gap:var(--pfe-band__footer--gutter--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 3))}:host([use-grid]) .pfe-band__footer>:nth-child(1){-ms-grid-row:1;-ms-grid-column:1}:host([use-grid]) .pfe-band__footer>:nth-child(1){-ms-grid-row:1;-ms-grid-column:1}}.pfe-band__aside{margin-bottom:1rem;margin-bottom:var(--pfe-band__aside--gutter--vertical,var(--pfe-theme--container-spacer,1rem));margin-right:1rem;margin-right:var(--pfe-band__aside--gutter--vertical,var(--pfe-theme--container-spacer,1rem))}@supports (display:grid){.pfe-band__aside{-ms-grid-row:2;-ms-grid-column:1;grid-area:aside;margin-bottom:0;margin-right:0}:host([has_header][has_aside]) .pfe-band__container>.pfe-band__aside{-ms-grid-row:3;-ms-grid-column:1}:host([has_footer][has_aside]) .pfe-band__container>.pfe-band__aside{-ms-grid-row:2;-ms-grid-row-span:1;-ms-grid-column:1}:host([has_header][has_aside][has_footer]) .pfe-band__container>.pfe-band__aside{-ms-grid-row:4;-ms-grid-row-span:1;-ms-grid-column:1}@media (max-width:767px){:host([has_header][has_aside][aside-mobile=top]) .pfe-band__container>.pfe-band__header{-ms-grid-row:2;-ms-grid-column:1}:host([has_header][has_aside][has_footer][aside-mobile=top]) .pfe-band__container>.pfe-band__header{-ms-grid-row:2;-ms-grid-column:1;-ms-grid-column-span:1}:host([has_aside][aside-mobile=top]) .pfe-band__container>.pfe-band__body{-ms-grid-row:2;-ms-grid-column:1}:host([has_header][has_aside][aside-mobile=top]) .pfe-band__container>.pfe-band__body{-ms-grid-row:3;-ms-grid-column:1}:host([has_footer][has_aside][aside-mobile=top]) .pfe-band__container>.pfe-band__body{-ms-grid-row:2;-ms-grid-column:1}:host([has_header][has_aside][has_footer][aside-mobile=top]) .pfe-band__container>.pfe-band__body{-ms-grid-row:3;-ms-grid-column:1}:host([has_footer][has_aside][aside-mobile=top]) .pfe-band__container>.pfe-band__footer{-ms-grid-row:3;-ms-grid-column:1}:host([has_header][has_aside][has_footer][aside-mobile=top]) .pfe-band__container>.pfe-band__footer{-ms-grid-row:4;-ms-grid-column:1;-ms-grid-column-span:1}:host([has_aside][aside-mobile=top]) .pfe-band__container>.pfe-band__aside{-ms-grid-row:1;-ms-grid-column:1}:host([has_header][has_aside][aside-mobile=top]) .pfe-band__container>.pfe-band__aside{-ms-grid-row:1;-ms-grid-column:1}:host([has_footer][has_aside][aside-mobile=top]) .pfe-band__container>.pfe-band__aside{-ms-grid-row:1;-ms-grid-row-span:1;-ms-grid-column:1}:host([has_header][has_aside][has_footer][aside-mobile=top]) .pfe-band__container>.pfe-band__aside{-ms-grid-row:1;-ms-grid-row-span:1;-ms-grid-column:1}}@media (min-width:768px){:host([has_header][has_aside]) .pfe-band__container>.pfe-band__header{-ms-grid-row:1;-ms-grid-column:1;-ms-grid-column-span:2}:host([has_header][has_aside][aside-desktop=left]) .pfe-band__container>.pfe-band__header{-ms-grid-row:1;-ms-grid-column:1;-ms-grid-column-span:2}:host([has_header][has_aside][aside-height=full]) .pfe-band__container>.pfe-band__header{-ms-grid-row:1;-ms-grid-column:1;-ms-grid-column-span:1}:host([has_header][has_aside][aside-desktop=left][aside-height=full]) .pfe-band__container>.pfe-band__header{-ms-grid-row:1;-ms-grid-column:2;-ms-grid-column-span:1}:host([has_header][has_aside][has_footer]) .pfe-band__container>.pfe-band__header{-ms-grid-row:1;-ms-grid-column:1;-ms-grid-column-span:2}:host([has_header][has_aside][has_footer][aside-desktop=left]) .pfe-band__container>.pfe-band__header{-ms-grid-row:1;-ms-grid-column:1;-ms-grid-column-span:2}:host([has_header][has_aside][has_footer][aside-height=full]) .pfe-band__container>.pfe-band__header{-ms-grid-row:1;-ms-grid-column:1;-ms-grid-column-span:1}:host([has_header][has_aside][has_footer][aside-desktop=left][aside-height=full]) .pfe-band__container>.pfe-band__header{-ms-grid-row:1;-ms-grid-column:2;-ms-grid-column-span:1}:host([has_aside]) .pfe-band__container>.pfe-band__body{-ms-grid-row:1;-ms-grid-column:1}:host([has_aside][aside-desktop=left]) .pfe-band__container>.pfe-band__body{-ms-grid-row:1;-ms-grid-column:2}:host([has_header][has_aside]) .pfe-band__container>.pfe-band__body{-ms-grid-row:2;-ms-grid-column:1}:host([has_header][has_aside][aside-desktop=left]) .pfe-band__container>.pfe-band__body{-ms-grid-row:2;-ms-grid-column:2}:host([has_header][has_aside][aside-height=full]) .pfe-band__container>.pfe-band__body{-ms-grid-row:2;-ms-grid-column:1}:host([has_header][has_aside][aside-desktop=left][aside-height=full]) .pfe-band__container>.pfe-band__body{-ms-grid-row:2;-ms-grid-column:2}:host([has_footer][has_aside]) .pfe-band__container>.pfe-band__body{-ms-grid-row:1;-ms-grid-column:1}:host([has_footer][has_aside][aside-desktop=left]) .pfe-band__container>.pfe-band__body{-ms-grid-row:1;-ms-grid-column:2}:host([has_footer][has_aside][aside-height=full]) .pfe-band__container>.pfe-band__body{-ms-grid-row:1;-ms-grid-column:1}:host([has_footer][has_aside][aside-desktop=left][aside-height=full]) .pfe-band__container>.pfe-band__body{-ms-grid-row:1;-ms-grid-column:2}:host([has_header][has_aside][has_footer]) .pfe-band__container>.pfe-band__body{-ms-grid-row:2;-ms-grid-column:1}:host([has_header][has_aside][has_footer][aside-desktop=left]) .pfe-band__container>.pfe-band__body{-ms-grid-row:2;-ms-grid-column:2}:host([has_header][has_aside][has_footer][aside-height=full]) .pfe-band__container>.pfe-band__body{-ms-grid-row:2;-ms-grid-column:1}:host([has_header][has_aside][has_footer][aside-desktop=left][aside-height=full]) .pfe-band__container>.pfe-band__body{-ms-grid-row:2;-ms-grid-column:2}:host([has_footer][has_aside]) .pfe-band__container>.pfe-band__footer{-ms-grid-row:2;-ms-grid-column:1;-ms-grid-column-span:2}:host([has_footer][has_aside][aside-desktop=left]) .pfe-band__container>.pfe-band__footer{-ms-grid-row:2;-ms-grid-column:1;-ms-grid-column-span:2}:host([has_footer][has_aside][aside-height=full]) .pfe-band__container>.pfe-band__footer{-ms-grid-row:2;-ms-grid-column:1;-ms-grid-column-span:1}:host([has_footer][has_aside][aside-desktop=left][aside-height=full]) .pfe-band__container>.pfe-band__footer{-ms-grid-row:2;-ms-grid-column:2;-ms-grid-column-span:1}:host([has_header][has_aside][has_footer]) .pfe-band__container>.pfe-band__footer{-ms-grid-row:3;-ms-grid-column:1;-ms-grid-column-span:2}:host([has_header][has_aside][has_footer][aside-desktop=left]) .pfe-band__container>.pfe-band__footer{-ms-grid-row:3;-ms-grid-column:1;-ms-grid-column-span:2}:host([has_header][has_aside][has_footer][aside-height=full]) .pfe-band__container>.pfe-band__footer{-ms-grid-row:3;-ms-grid-column:1;-ms-grid-column-span:1}:host([has_header][has_aside][has_footer][aside-desktop=left][aside-height=full]) .pfe-band__container>.pfe-band__footer{-ms-grid-row:3;-ms-grid-column:2;-ms-grid-column-span:1}.pfe-band__aside{-ms-grid-row:1;-ms-grid-column:2}:host([has_aside][aside-desktop=left]) .pfe-band__container>.pfe-band__aside{-ms-grid-row:1;-ms-grid-column:1}:host([has_header][has_aside]) .pfe-band__container>.pfe-band__aside{-ms-grid-row:2;-ms-grid-column:2}:host([has_header][has_aside][aside-desktop=left]) .pfe-band__container>.pfe-band__aside{-ms-grid-row:2;-ms-grid-column:1}:host([has_header][has_aside][aside-height=full]) .pfe-band__container>.pfe-band__aside{-ms-grid-row:1;-ms-grid-row-span:2;-ms-grid-column:2}:host([has_header][has_aside][aside-desktop=left][aside-height=full]) .pfe-band__container>.pfe-band__aside{-ms-grid-row:1;-ms-grid-row-span:2;-ms-grid-column:1}:host([has_footer][has_aside]) .pfe-band__container>.pfe-band__aside{-ms-grid-row:1;-ms-grid-row-span:1;-ms-grid-column:2}:host([has_footer][has_aside][aside-desktop=left]) .pfe-band__container>.pfe-band__aside{-ms-grid-row:1;-ms-grid-row-span:1;-ms-grid-column:1}:host([has_footer][has_aside][aside-height=full]) .pfe-band__container>.pfe-band__aside{-ms-grid-row:1;-ms-grid-row-span:2;-ms-grid-column:2}:host([has_footer][has_aside][aside-desktop=left][aside-height=full]) .pfe-band__container>.pfe-band__aside{-ms-grid-row:1;-ms-grid-row-span:2;-ms-grid-column:1}:host([has_header][has_aside][has_footer]) .pfe-band__container>.pfe-band__aside{-ms-grid-row:2;-ms-grid-row-span:1;-ms-grid-column:2}:host([has_header][has_aside][has_footer][aside-desktop=left]) .pfe-band__container>.pfe-band__aside{-ms-grid-row:2;-ms-grid-row-span:1;-ms-grid-column:1}:host([has_header][has_aside][has_footer][aside-height=full]) .pfe-band__container>.pfe-band__aside{-ms-grid-row:1;-ms-grid-row-span:3;-ms-grid-column:2}:host([has_header][has_aside][has_footer][aside-desktop=left][aside-height=full]) .pfe-band__container>.pfe-band__aside{-ms-grid-row:1;-ms-grid-row-span:3;-ms-grid-column:1}}:host([use-grid]) .pfe-band__aside{display:-ms-grid;display:grid;-ms-grid-rows:auto;grid-template-rows:auto;-ms-grid-columns:1fr;grid-template-columns:1fr;-ms-grid-columns:var(--pfe-band__aside--layout,1fr);grid-template-columns:var(--pfe-band__aside--layout,1fr);grid-row-gap:1rem;grid-row-gap:var(--pfe-band__aside--gutter--vertical,var(--pfe-theme--container-spacer,1rem));row-gap:1rem;row-gap:var(--pfe-band__aside--gutter--vertical,var(--pfe-theme--container-spacer,1rem));grid-column-gap:calc(1rem * 3);grid-column-gap:var(--pfe-band__aside--gutter--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 3));-webkit-column-gap:calc(1rem * 3);-moz-column-gap:calc(1rem * 3);column-gap:calc(1rem * 3);-webkit-column-gap:var(--pfe-band__aside--gutter--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 3));-moz-column-gap:var(--pfe-band__aside--gutter--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 3));column-gap:var(--pfe-band__aside--gutter--horizontal,calc(var(--pfe-theme--container-spacer,1rem) * 3))}:host([use-grid]) .pfe-band__aside>:nth-child(1){-ms-grid-row:1;-ms-grid-column:1}:host([use-grid]) .pfe-band__aside>:nth-child(1){-ms-grid-row:1;-ms-grid-column:1}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){.pfe-band__container::after{clear:both;content:"";display:table}.pfe-band__body,.pfe-band__footer,.pfe-band__header{float:left}:host([aside-mobile=top]) .pfe-band__body,:host([aside-mobile=top]) .pfe-band__footer,:host([aside-mobile=top]) .pfe-band__header{float:right}:host(:not([aside-height=full])) .pfe-band__body,:host(:not([aside-height=full])) .pfe-band__footer,:host(:not([aside-height=full])) .pfe-band__header{width:60%}.pfe-band__footer{clear:both}.pfe-band__aside{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;float:right;width:35%;margin:0 1.9%}:host([aside-desktop=left]) .pfe-band__aside{float:left}.pfe-band__wrapper{width:60%;float:left}:host([aside-desktop=left]) .pfe-band__wrapper{float:right}} /*# sourceMappingURL=pfe-band.min.css.map */\n
      \n '+(this.hasSlot("pfe-band--aside")&&"top"===this.asidePosition.mobile?'':"")+"\n "+("full"===this.asideHeight?'
      ':"")+"\n "+(this.hasSlot("pfe-band--header")?'
      \n \n
      ':"")+'\n
      \n \n
      \n '+("full"!==this.asideHeight&&this.hasSlot("pfe-band--aside")&&"top"!==this.asidePosition.mobile?'\n \n ':"")+"\n "+(this.hasSlot("pfe-band--footer")?'
      \n \n
      ':"")+"\n "+("full"===this.asideHeight?"
      ":"")+"\n "+("full"===this.asideHeight&&this.hasSlot("pfe-band--aside")&&"top"!==this.asidePosition.mobile?'\n \n ':"")+"\n
      "}},{key:"templateUrl",get:function(){return"pfe-band.html"}},{key:"styleUrl",get:function(){return"pfe-band.scss"}},{key:"asidePosition",get:function(){return{desktop:this.asideDesktop,mobile:this.asideMobile,height:this.asideHeight}}}],[{key:"version",get:function(){return"1.12.3"}},{key:"tag",get:function(){return"pfe-band"}},{key:"meta",get:function(){return{title:"Band",description:"This element creates a header, body, footer, and aside region in which to place content or other components."}}},{key:"properties",get:function(){return{imgSrc:{title:"Background image",type:String,observer:"_imgSrcChanged"},oldImgSrc:{alias:"imgSrc",attr:"pfe-img-src"},color:{title:"Background color",type:String,values:["lightest","base","darker","darkest","complement","accent"],default:"base",observer:"_colorChanged"},oldColor:{alias:"color",attr:"pfe-color"},asideDesktop:{title:"side positioning (desktop)",type:String,values:["right","left"],default:"right"},oldAsideDesktop:{alias:"asideDesktop",attr:"pfe-aside-desktop"},asideMobile:{title:"Aside positioning (mobile)",type:String,values:["top","bottom"],default:"bottom"},oldAsideMobile:{alias:"asideMobile",attr:"pfe-aside-mobile"},asideHeight:{title:"Aside height",type:String,values:["full","body"],default:"body"},oldAsideHeight:{alias:"asideHeight",attr:"pfe-aside-height"},size:{title:"Padding size",type:String,values:["small"]},oldSize:{alias:"size",attr:"pfe-size"},useGrid:{title:"Default grid on for the light DOM regions (header, body, footer, aside)",type:Boolean,default:!1}}}},{key:"slots",get:function(){return{header:{title:"Header",type:"array",namedSlot:!0,maxItems:3,items:{$ref:"raw"}},body:{title:"Body",type:"array",namedSlot:!1,items:{oneOf:[{$ref:"pfe-card"},{$ref:"raw"}]}},footer:{title:"Footer",type:"array",namedSlot:!0,maxItems:3,items:{oneOf:[{$ref:"pfe-cta"},{$ref:"raw"}]}},aside:{title:"Aside",type:"array",namedSlot:!0,maxItems:5,items:{oneOf:[{$ref:"pfe-card"},{$ref:"raw"}]}}}}},{key:"PfeType",get:function(){return e.PfeTypes.Container}}]),r(t,[{key:"_colorChanged",value:function(){this.resetContext()}},{key:"_imgSrcChanged",value:function(e,a){this.style.backgroundImage=a?"url('"+a+"')":""}}]),t);function t(){return a(this,t),d(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,t,{type:t.PfeType}))}return e.create(r),r}); +//# sourceMappingURL=pfe-band.umd.min.js.map diff --git a/elements/pfe-band/dist/pfe-band.umd.min.js.map b/elements/pfe-band/dist/pfe-band.umd.min.js.map new file mode 100644 index 0000000000..db956108ed --- /dev/null +++ b/elements/pfe-band/dist/pfe-band.umd.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-band.umd.min.js","sources":["../_temp/pfe-band.umd.js"],"sourcesContent":["/*!\n * PatternFly Elements: PfeBand 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement\";\n\nclass PfeBand extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n
      \n ${this.hasSlot(\"pfe-band--aside\") && this.asidePosition.mobile === \"top\" ? `` : \"\"}\n ${this.asideHeight === \"full\" ? `
      ` : \"\"}\n ${this.hasSlot(\"pfe-band--header\") ? `
      \n \n
      ` : \"\"}\n
      \n \n
      \n ${this.asideHeight !== \"full\" && this.hasSlot(\"pfe-band--aside\") && this.asidePosition.mobile !== \"top\" ? `\n \n ` : \"\"}\n ${this.hasSlot(\"pfe-band--footer\") ? `
      \n \n
      ` : \"\"}\n ${this.asideHeight === \"full\" ? `
      ` : \"\"}\n ${this.asideHeight === \"full\" && this.hasSlot(\"pfe-band--aside\") && this.asidePosition.mobile !== \"top\" ? `\n \n ` : \"\"}\n
      `;\n }\n\n static get tag() {\n return \"pfe-band\";\n }\n\n static get meta() {\n return {\n title: \"Band\",\n description:\n \"This element creates a header, body, footer, and aside region in which to place content or other components.\",\n };\n }\n\n get templateUrl() {\n return \"pfe-band.html\";\n }\n\n get styleUrl() {\n return \"pfe-band.scss\";\n }\n\n get asidePosition() {\n return {\n desktop: this.asideDesktop,\n mobile: this.asideMobile,\n height: this.asideHeight,\n };\n }\n\n static get properties() {\n return {\n imgSrc: {\n title: \"Background image\",\n type: String,\n observer: \"_imgSrcChanged\",\n },\n // @TODO: Deprecated property in 1.0\n oldImgSrc: {\n alias: \"imgSrc\",\n attr: \"pfe-img-src\",\n },\n color: {\n title: \"Background color\",\n type: String,\n values: [\"lightest\", \"base\", \"darker\", \"darkest\", \"complement\", \"accent\"],\n default: \"base\",\n observer: \"_colorChanged\",\n },\n // @TODO: Deprecated property in 1.0\n oldColor: {\n alias: \"color\",\n attr: \"pfe-color\",\n },\n asideDesktop: {\n title: \"side positioning (desktop)\",\n type: String,\n values: [\"right\", \"left\"],\n default: \"right\",\n },\n // @TODO: Deprecated property in 1.0\n oldAsideDesktop: {\n alias: \"asideDesktop\",\n attr: \"pfe-aside-desktop\",\n },\n asideMobile: {\n title: \"Aside positioning (mobile)\",\n type: String,\n values: [\"top\", \"bottom\"],\n default: \"bottom\",\n },\n // @TODO: Deprecated property in 1.0\n oldAsideMobile: {\n alias: \"asideMobile\",\n attr: \"pfe-aside-mobile\",\n },\n asideHeight: {\n title: \"Aside height\",\n type: String,\n values: [\"full\", \"body\"],\n default: \"body\",\n },\n // @TODO: Deprecated property in 1.0\n oldAsideHeight: {\n alias: \"asideHeight\",\n attr: \"pfe-aside-height\",\n },\n size: {\n title: \"Padding size\",\n type: String,\n values: [\"small\"],\n },\n // @TODO: Deprecated property in 1.0\n oldSize: {\n alias: \"size\",\n attr: \"pfe-size\",\n },\n useGrid: {\n title: \"Default grid on for the light DOM regions (header, body, footer, aside)\",\n type: Boolean,\n default: false,\n },\n };\n }\n\n static get slots() {\n return {\n header: {\n title: \"Header\",\n type: \"array\",\n namedSlot: true,\n maxItems: 3,\n items: {\n $ref: \"raw\",\n },\n },\n body: {\n title: \"Body\",\n type: \"array\",\n namedSlot: false,\n items: {\n oneOf: [\n {\n $ref: \"pfe-card\",\n },\n {\n $ref: \"raw\",\n },\n ],\n },\n },\n footer: {\n title: \"Footer\",\n type: \"array\",\n namedSlot: true,\n maxItems: 3,\n items: {\n oneOf: [\n {\n $ref: \"pfe-cta\",\n },\n {\n $ref: \"raw\",\n },\n ],\n },\n },\n aside: {\n title: \"Aside\",\n type: \"array\",\n namedSlot: true,\n maxItems: 5,\n items: {\n oneOf: [\n {\n $ref: \"pfe-card\",\n },\n {\n $ref: \"raw\",\n },\n ],\n },\n },\n };\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Container;\n }\n\n constructor() {\n super(PfeBand, { type: PfeBand.PfeType });\n }\n\n _colorChanged() {\n // Update the context\n this.resetContext();\n }\n\n // Update the background image\n _imgSrcChanged(oldVal, newVal) {\n // Set the image as the background image\n this.style.backgroundImage = newVal ? `url('${newVal}')` : ``;\n }\n}\n\nPFElement.create(PfeBand);\n\nexport { PfeBand as default };\n"],"names":["PfeBand","PFElement","this","hasSlot","asidePosition","mobile","asideHeight","asideDesktop","asideMobile","String","Boolean","PfeTypes","Container","resetContext","oldVal","newVal","style","backgroundImage","type","PfeType","create"],"mappings":"m1BA2BMA,+TAAgBC,i0+BAYlBC,KAAKC,QAAQ,oBAAoD,QAA9BD,KAAKE,cAAcC,+FAE5C,YACW,SAArBH,KAAKI,8CAA6D,cAChEJ,KAAKC,QAAQ,oHAEF,yFAIU,SAArBD,KAAKI,aAA0BJ,KAAKC,QAAQ,oBAAoD,QAA9BD,KAAKE,cAAcC,0GAG3E,cACVH,KAAKC,QAAQ,oHAEF,cACU,SAArBD,KAAKI,qBAAoC,YACtB,SAArBJ,KAAKI,aAA0BJ,KAAKC,QAAQ,oBAAoD,QAA9BD,KAAKE,cAAcC,oGAG3E,6DAiBH,uDAIA,4DAIA,SACIH,KAAKK,oBACNL,KAAKM,mBACLN,KAAKI,qDAzDR,2CAkCA,8CAIA,OACE,mBAEL,yJAqBG,QACG,OACC,wBACDG,gBACI,4BAGD,OACF,cACD,qBAED,OACE,wBACDA,cACE,CAAC,WAAY,OAAQ,SAAU,UAAW,aAAc,kBACvD,gBACC,0BAGF,OACD,aACD,0BAEM,OACL,kCACDA,cACE,CAAC,QAAS,gBACT,yBAGM,OACR,oBACD,iCAEK,OACJ,kCACDA,cACE,CAAC,MAAO,kBACP,yBAGK,OACP,mBACD,gCAEK,OACJ,oBACDA,cACE,CAAC,OAAQ,gBACR,uBAGK,OACP,mBACD,yBAEF,OACG,oBACDA,cACE,CAAC,kBAGF,OACA,YACD,oBAEC,OACA,+EACDC,iBACG,wCAMN,QACG,OACC,cACD,mBACK,WACD,QACH,MACC,aAGJ,OACG,YACD,mBACK,QACJ,OACE,CACL,MACQ,YAER,MACQ,iBAKN,OACC,cACD,mBACK,WACD,QACH,OACE,CACL,MACQ,WAER,MACQ,gBAKP,OACE,aACD,mBACK,WACD,QACH,OACE,CACL,MACQ,YAER,MACQ,kDAUTT,EAAUU,SAASC,8DASrBC,sDAIQC,EAAQC,QAEhBC,MAAMC,gBAAkBF,UAAiBA,wGAXxCf,EAAS,CAAEkB,KAAMlB,EAAQmB,kBAenClB,EAAUmB,OAAOpB"} \ No newline at end of file diff --git a/elements/pfe-band/package.json b/elements/pfe-band/package.json index 3a92785f42..5242bbaf95 100644 --- a/elements/pfe-band/package.json +++ b/elements/pfe-band/package.json @@ -10,7 +10,7 @@ }, "preview": "band--screenshot.png" }, - "version": "1.12.2", + "version": "1.12.3", "description": "Band container for PatternFly Elements", "keywords": [ "web-components", @@ -50,10 +50,10 @@ ], "license": "MIT", "devDependencies": { - "@patternfly/pfe-sass": "^1.12.2" + "@patternfly/pfe-sass": "^1.12.3" }, "dependencies": { - "@patternfly/pfelement": "^1.12.2" + "@patternfly/pfelement": "^1.12.3" }, "bugs": { "url": "https://github.com/patternfly/patternfly-elements/issues" diff --git a/elements/pfe-button/dist/pfe-button.css.map b/elements/pfe-button/dist/pfe-button.css.map new file mode 100644 index 0000000000..d4892a9370 --- /dev/null +++ b/elements/pfe-button/dist/pfe-button.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["pfe-button.scss","pfe-button.css","../../pfe-sass/functions/_custom-properties.scss"],"names":[],"mappings":"AAgCA;EACE,qBAAqB;AC/BvB;;ADkCA;EACE,aAAa;AC/Bf;;ADmCE;EAEE,sBEoCgC;EFpChC,8FEoCgC;EFnChC,WEmCgC;EFnChC,6EEmCgC;EFlChC,eEkCgC;EFlChC,4EEkCgC;EFjChC,oBETgC;EFShC,mDETgC;EFUhC,gBEgCgC;EFhChC,sFEgCgC;EF/BhC,4BE+BgC;EF/BhC,kIE+BgC;EF9BhC,eAAe;EACf,kBE6BgC;EF7BhC,6FE6BgC;EF5BhC,SE4BgC;EF5BhC,oCE4BgC;EF3BhC,kBAAkB;EAClB,gBE0BgC;EF1BhC,8EE0BgC;AD3DpC;;ADqBE;EAeI,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,QAAQ;EACR,SAAS;EACT,WAAW;EACX,6BEiB8B;EFjB9B,8KEiB8B;EFhB9B,kBEgB8B;EFhB9B,6FEgB8B;ADhDpC;;ADUE;EA2BI,4HAA8B;EAC9B,iNAA4B;ACjClC;;ADqCE;EACE,yBEKgC;EFLhC,mHEKgC;ADvCpC;;ADiCE;EAKI,8HAA8B;AClCpC;;ADsCE;;;EAGE,6BENgC;EFMhC,iEENgC;AD7BpC;;ADgCE;;;;;EAOI,qFAA8B;EAC9B,8MAA4B;AC/BlC;;ADmCE;EACE,WEhBgC;EFgBhC,yEEhBgC;ADhBpC;;AD+BE;EAII,kBEnB8B;EFmB9B,6FEnB8B;ADZpC;;ADmCE;EACE,cExBgC;EFwBhC,uEExBgC;ADRpC;;AD+BE;EAII,qBE3B8B;EF2B9B,2FE3B8B;ADJpC;;ADmCE;EACE,cEhCgC;EFgChC,uEEhCgC;EFiChC,gBEjCgC;EFiChC,iDEjCgC;ADCpC;;AD8BE;EAMI,+HAAiC;AChCvC;;AD0BE;EASM,wBElF4B;EFkF5B,gEElF4B;EFmF5B,yBEnF4B;EFmF5B,6DEnF4B;ADoDpC;;ADqBE;EAeI,qBE9C8B;EF8C9B,2GE9C8B;EF+C9B,4BEzF8B;EFyF9B,iEEzF8B;ADyDpC;;ADoCE;EACE,yBEpDgC;EFoDhC,wGEpDgC;ADmBpC;;ADoCE;EACE,6GAAyB;EACzB,mEAAsB;ACjC1B;;ADoCE;EACE,yBE7DgC;EF6DhC,mGE7DgC;EF8DhC,cE9DgC;EF8DhC,oFE9DgC;EF+DhC,oBAAoB;ACjCxB;;AD8BE;EAKI,SEjE8B;EFiE9B,2CEjE8B;ADkCpC;;AD0BE;EAUI,uHAA8B;EAC9B,uEAA4B;AChClC","file":"pfe-button.css","sourcesContent":["// Please see the pfe-sass README for guidance on using these tools\n@import \"../../pfe-sass/pfe-sass\";\n\n$LOCAL: button;\n\n$LOCAL-VARIABLES: (\n BackgroundColor: pfe-var(ui-accent),\n BackgroundColor--hover: pfe-var(ui-accent--hover),\n Color: pfe-var(ui-base--text),\n FontSize: pfe-var(FontSize--md),\n FontWeight: pfe-var(font-weight--normal),\n Border: 0,\n BorderRadius: pfe-var(surface--border-radius),\n Padding: calc(#{pfe-var(container-padding)} / 2) pfe-var(container-padding),\n LineHeight: pfe-var(line-height),\n after: (\n BorderColor: transparent,\n BorderColor--hover: transparent,\n ),\n);\n\n// Nested internal variables (pfe-local calls), maps cannot \"self-reference\"\n$LOCAL-VARIABLES: map-deep-merge(\n $LOCAL-VARIABLES,\n (\n after: (\n Border: pfe-var(ui--border-width) pfe-var(ui--border-style) pfe-local(BorderColor, $region: after),\n Border--hover: pfe-var(ui--border-width) pfe-var(ui--border-style) pfe-local(BorderColor--hover, $region: after),\n ),\n )\n);\n\n:host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\nbutton {\n :host([variant=\"primary\"]) &,\n & {\n background-color: pfe-local(BackgroundColor);\n color: pfe-local(Color);\n font-size: pfe-local(FontSize);\n font-family: pfe-var(font-family, $fallback: inherit);\n font-weight: pfe-local(FontWeight);\n padding: pfe-local(Padding);\n cursor: pointer;\n border-radius: pfe-local(BorderRadius);\n border: pfe-local(Border);\n position: relative;\n line-height: pfe-local(LineHeight);\n\n &::after {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n content: \"\";\n border: pfe-local(Border, $region: after);\n border-radius: pfe-local(BorderRadius);\n }\n\n &:hover,\n &:focus {\n --pfe-button--BackgroundColor: #{pfe-local(BackgroundColor--hover)};\n --pfe-button__after--Border: #{pfe-local(Border--hover, $region: after)};\n }\n }\n\n :host([variant=\"danger\"]) & {\n background-color: pfe-local(BackgroundColor, pfe-var(feedback--critical--lighter));\n\n &:hover,\n &:focus {\n --pfe-button--BackgroundColor: #{pfe-local(BackgroundColor--hover, pfe-var(feedback--critical))};\n }\n }\n\n :host([variant=\"secondary\"]) &,\n :host([variant=\"tertiary\"]) &,\n :host([variant=\"control\"]) & {\n background-color: pfe-local(BackgroundColor, transparent);\n\n &:hover,\n &:focus {\n --pfe-button--BackgroundColor: #{pfe-local(BackgroundColor--hover, transparent)};\n --pfe-button__after--Border: #{pfe-local(Border--hover, $region: after, $fallback: pfe-var(ui--border-width--md) pfe-var(ui--border-style) pfe-local(BorderColor, $region: after))};\n }\n }\n\n :host([variant=\"secondary\"]) & {\n color: pfe-local(Color, pfe-var(ui-accent));\n\n &::after {\n border-color: pfe-local(BorderColor, $region: after, $fallback: pfe-var(ui-accent));\n }\n }\n\n :host([variant=\"tertiary\"]) & {\n color: pfe-local(Color, pfe-var(text));\n\n &::after {\n border-color: pfe-local(BorderColor, $region: after, $fallback: pfe-var(text));\n }\n }\n\n :host([variant=\"control\"]) & {\n color: pfe-local(Color, pfe-var(text));\n border-radius: pfe-local(BorderRadius, 0);\n\n &:hover,\n &:focus {\n --pfe-button__after--BorderColor: #{pfe-local(BorderColor--hover, pfe-var(ui--border--lightest))};\n\n &::after {\n border-bottom-width: pfe-var(ui--border-width--md);\n border-bottom-color: pfe-var(ui-accent);\n }\n }\n\n &::after {\n border-color: pfe-local(BorderColor, $region: after, $fallback: pfe-var(ui--border--lightest));\n border-bottom-color: pfe-var(ui--border);\n }\n }\n\n :host([variant=\"control\"][disabled]) & {\n background-color: pfe-local(BackgroundColor, pfe-var(surface--lighter));\n }\n\n :host([size=\"large\"]) & {\n --pfe-button--FontWeight: #{pfe-local(FontWeight--large, $fallback: pfe-var(font-weight--semi-bold))};\n --pfe-button--Padding: #{pfe-local(Padding--large, $fallback: 12px 24px)};\n }\n\n :host([disabled]) & {\n background-color: pfe-local(BackgroundColor, pfe-var(ui-disabled));\n color: pfe-local(Color, pfe-var(ui-disabled--text));\n pointer-events: none;\n &::after {\n border: pfe-local(Border, $region: after, $fallback: 0);\n }\n\n &:hover,\n &:focus {\n --pfe-button--BackgroundColor: #{pfe-local(BackgroundColor--hover, pfe-var(ui-disabled))};\n --pfe-button__after--Border: #{pfe-local(Border--hover, $region: after, $fallback: 0)};\n }\n }\n}\n",":host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([variant=\"primary\"]) button, button {\n background-color: var(--pfe-button--BackgroundColor, var(--pfe-theme--color--ui-accent, #06c));\n color: var(--pfe-button--Color, var(--pfe-theme--color--ui-base--text, #fff));\n font-size: var(--pfe-button--FontSize, var(--pf-global--FontSize--md, 1rem));\n font-family: var(--pfe-theme--font-family, inherit);\n font-weight: var(--pfe-button--FontWeight, var(--pfe-theme--font-weight--normal, 400));\n padding: var(--pfe-button--Padding, calc(var(--pfe-theme--container-padding, 1rem) / 2) var(--pfe-theme--container-padding, 1rem));\n cursor: pointer;\n border-radius: var(--pfe-button--BorderRadius, var(--pfe-theme--surface--border-radius, 3px));\n border: var(--pfe-button--Border, 0);\n position: relative;\n line-height: var(--pfe-button--LineHeight, var(--pfe-theme--line-height, 1.5));\n}\n\n:host([variant=\"primary\"]) button::after, button::after {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n content: \"\";\n border: var(--pfe-button__after--Border, var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor, transparent));\n border-radius: var(--pfe-button--BorderRadius, var(--pfe-theme--surface--border-radius, 3px));\n}\n\n:host([variant=\"primary\"]) button:hover, :host([variant=\"primary\"]) button:focus, button:hover, button:focus {\n --pfe-button--BackgroundColor: var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--ui-accent--hover, #004080));\n --pfe-button__after--Border: var(--pfe-button__after--Border--hover, var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor--hover, transparent));\n}\n\n:host([variant=\"danger\"]) button {\n background-color: var(--pfe-button--BackgroundColor, var(--pfe-theme--color--feedback--critical--lighter, #c9190b));\n}\n\n:host([variant=\"danger\"]) button:hover, :host([variant=\"danger\"]) button:focus {\n --pfe-button--BackgroundColor: var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--feedback--critical, #a30000));\n}\n\n:host([variant=\"secondary\"]) button,\n:host([variant=\"tertiary\"]) button,\n:host([variant=\"control\"]) button {\n background-color: var(--pfe-button--BackgroundColor, transparent);\n}\n\n:host([variant=\"secondary\"]) button:hover, :host([variant=\"secondary\"]) button:focus,\n:host([variant=\"tertiary\"]) button:hover,\n:host([variant=\"tertiary\"]) button:focus,\n:host([variant=\"control\"]) button:hover,\n:host([variant=\"control\"]) button:focus {\n --pfe-button--BackgroundColor: var(--pfe-button--BackgroundColor--hover, transparent);\n --pfe-button__after--Border: var(--pfe-button__after--Border--hover, var(--pfe-theme--ui--border-width--md, 2px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor, transparent));\n}\n\n:host([variant=\"secondary\"]) button {\n color: var(--pfe-button--Color, var(--pfe-theme--color--ui-accent, #06c));\n}\n\n:host([variant=\"secondary\"]) button::after {\n border-color: var(--pfe-button__after--BorderColor, var(--pfe-theme--color--ui-accent, #06c));\n}\n\n:host([variant=\"tertiary\"]) button {\n color: var(--pfe-button--Color, var(--pfe-theme--color--text, #151515));\n}\n\n:host([variant=\"tertiary\"]) button::after {\n border-color: var(--pfe-button__after--BorderColor, var(--pfe-theme--color--text, #151515));\n}\n\n:host([variant=\"control\"]) button {\n color: var(--pfe-button--Color, var(--pfe-theme--color--text, #151515));\n border-radius: var(--pfe-button--BorderRadius, 0);\n}\n\n:host([variant=\"control\"]) button:hover, :host([variant=\"control\"]) button:focus {\n --pfe-button__after--BorderColor: var(--pfe-button--BorderColor--hover, var(--pfe-theme--color--ui--border--lightest, #f0f0f0));\n}\n\n:host([variant=\"control\"]) button:hover::after, :host([variant=\"control\"]) button:focus::after {\n border-bottom-width: var(--pfe-theme--ui--border-width--md, 2px);\n border-bottom-color: var(--pfe-theme--color--ui-accent, #06c);\n}\n\n:host([variant=\"control\"]) button::after {\n border-color: var(--pfe-button__after--BorderColor, var(--pfe-theme--color--ui--border--lightest, #f0f0f0));\n border-bottom-color: var(--pfe-theme--color--ui--border, #8a8d90);\n}\n\n:host([variant=\"control\"][disabled]) button {\n background-color: var(--pfe-button--BackgroundColor, var(--pfe-theme--color--surface--lighter, #f0f0f0));\n}\n\n:host([size=\"large\"]) button {\n --pfe-button--FontWeight: var(--pfe-button--FontWeight--large, var(--pfe-theme--font-weight--semi-bold, 600));\n --pfe-button--Padding: var(--pfe-button--Padding--large, 12px 24px);\n}\n\n:host([disabled]) button {\n background-color: var(--pfe-button--BackgroundColor, var(--pfe-theme--color--ui-disabled, #d2d2d2));\n color: var(--pfe-button--Color, var(--pfe-theme--color--ui-disabled--text, #6a6e73));\n pointer-events: none;\n}\n\n:host([disabled]) button::after {\n border: var(--pfe-button__after--Border, 0);\n}\n\n:host([disabled]) button:hover, :host([disabled]) button:focus {\n --pfe-button--BackgroundColor: var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--ui-disabled, #d2d2d2));\n --pfe-button__after--Border: var(--pfe-button__after--Border--hover, 0);\n}\n","////\n/// Tools for leveraging custom property stacks\n/// @group custom-properties\n/// @author castastrophe\n////\n\n/// Get full theme stack with a fallback from the provided map - used by pfe-var and pfe-zindex\n/// @param {String} $category - Category name to be appended to variables within the map/system\n/// @param {String} $key - Variable name to be used and prepended with --pfe-theme\n/// @param {Map} $map - Sass map of variables\n/// @param {String} $fallback [null] - Optional fallback override\n/// @param {Boolean} $use-fallback [true] - Optional hook to return a stack with no fallback value\n/// @requires $custom-prop-prefix\n/// @return {String} theme stack with fallback value from a sass map\n@function pfe-get-from-map($category, $key, $map, $fallback: null, $prefix: \"#{$custom-prop-prefix}-theme\", $use-fallback: true) {\n // Start building the variable declaration\n $var-declaration: \"--#{$prefix}--\";\n @if $prefix == \"pf-c\" {\n $var-declaration: \"--#{$prefix}-\"; // one dash at the end\n }\n // If the category exists, inject that into the string\n @if $category != \"\" {\n $var-declaration: \"#{$var-declaration}#{$category}--\";\n }\n // Append the key to the string\n $var-declaration: \"#{$var-declaration}#{$key}\";\n\n // If the fallback is not provided but use-fallback is set to true\n @if $fallback == null and $use-fallback and map-get($map, $key) != null {\n $fallback: map-get($map, $key);\n }\n @if $fallback != null {\n // Create the variable declaration\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration}); \n}\n\n\n\n/// Returns CSS Var for the local component-scoped variable\n/// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--'\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $custom-prop-prefix\n/// @see $LOCAL\n/// @example\n/// :host {\n/// padding-top: #{pfe-local(paddingTop)};\n/// padding-bottom: #{pfe-local(paddingBottom)};\n/// }\n@function pfe-local($cssvar, $fallback: null, $region: null) {\n // If a fallback is not defined, use the global variables map\n @if $fallback == null and length($LOCAL-VARIABLES) > 0 {\n @if $region == null {\n $fallback: map-get($LOCAL-VARIABLES, $cssvar);\n }\n @else {\n $submap: map-get($LOCAL-VARIABLES, $region);\n @if type-of($submap) == \"map\" {\n $fallback: map-deep-get($LOCAL-VARIABLES, $region, $cssvar);\n }\n }\n }\n\n // If a region value exists, build the region string\n @if $region != null {\n $region: \"__#{$region}\";\n }\n\n // Start building the variable declaration\n $var-declaration: \"--#{$custom-prop-prefix}-#{$LOCAL}#{$region}--#{to-string($cssvar, '--')}\";\n \n @if $fallback != null {\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration});\n}\n\n/// Fetches a CSS variable stack for broadcasted variables, providing a hook for context\n/// to influence the styles of children elements such as p tags or links.\n/// @param {String} $broadcast - name of the broadcast variable to apply\n/// @requires {String} $custom-prop-prefix - Name of repo, which is \"pfe\"\n/// @example - scss\n/// :host {\n/// color: pfe-broadcasted(link);\n/// }\n/// @example - css\n/// :host {\n/// color: var(--pfe-broadcasted--link, #06c);\n/// }\n@function pfe-broadcasted($broadcast, $use-fallback: true) {\n $fallback: \"\";\n @if $use-fallback {\n $fallback: \", #{map-get($pfe-broadcasted, #{to-string($broadcast,'--')})}\";\t\n }\n @if not index($BROADCAST-VARS, first(str-split($broadcast, '--'))) {\n @error \"--#{$custom-prop-prefix}-broadcasted--#{$broadcast} variable is not currently supported.\";\n }\n @else {\n @return var(--#{$custom-prop-prefix}-broadcasted--#{to-string($broadcast,'--')}#{unquote($fallback)});\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme--zindex\n/// @requires {Map} $pfe-zindex - SASS Map of z-index values\n/// @see $pfe-zindex\n/// @example - scss - In your component styles\n/// .my-element {\n/// z-index: pfe-zindex( content );\n/// }\n\n@function pfe-zindex($cssvar) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-zindex, $var-name) != null {\n @return pfe-get-from-map(\"zindex\", $var-name, $pfe-zindex);\n }\n @else {\n @error \"The key for #{$var-name} could not be found in the $pfe-zindex map.\";\n }\n}\n\n/// Returns the value (only) of a property from the respective maps\n/// Similar to pfe-var, but does not include css variable in the compiled CSS\n/// @param {String} $name - Name of the key for the map\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example - scss - In your component styles\n/// .my-element {\n/// background-color: pfe-fetch( ui-base );\n/// }\n@function pfe-fetch($name, $region: null) {\n $var-name: to-string($name, \"--\");\n @if $region != null and map-deep-get($LOCAL-VARIABLES, $region, $var-name) != null {\n @return map-deep-get($LOCAL-VARIABLES, $region, $var-name);\n }\n @else if $region == null and map-get($LOCAL-VARIABLES, $var-name) != null {\n @return map-get($LOCAL-VARIABLES, $var-name);\n }\n @else if map-get($pfe-vars, $var-name) != null {\n @return map-get($pfe-vars, $var-name);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return map-get($pfe-colors, $var-name);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return map-get($pfe-broadcasted, $var-name);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return map-get($pfe-typography-base, $var-name);\n }\n\n // PATTERNFLY CORE\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return map-get($pf-type-sizing, $var-name);\n }\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return map-get($pf-type-sizing--component, $var-name);\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return map-get($pf-type-sizing--modifers, $var-name);\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return map-get($pf-type-sizing--content, $var-name);\n }\n // DEPRECATED\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return map-get($pfe-typography-base-deprecated, $var-name);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return map-get($pfe-typography-deprecated, $var-name);\n }\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme\n/// @param {String} $fallback [null] - Optional custom fallback\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example scss - In your component styles\n/// .my-element {\n/// padding: pfe-var( container-spacer );\n/// font-size: pfe-var( font-size );\n/// }\n/// @example - css Rendered output\n/// .my-element {\n/// padding: var(--pfe-theme--container-spacer, 16px);\n/// font-size: var(--pfe-theme--font-size, 16px);\n/// }\n@function pfe-var($cssvar, $fallback: null) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-vars, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-vars, $fallback);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return pfe-get-from-map(\"color\", $var-name, $pfe-colors, $fallback);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-broadcasted);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base, $fallback);\n }\n // PATTERNFLY CORE:\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing, $fallback, $prefix: \"pf-global\");\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--modifers, $fallback, $prefix: \"pf-c\");\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--content, $fallback, $prefix: \"pf-c\");\n }\n // PFE components (must be below core)\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--component, $fallback);\n }\n\n // DEPRECATED:\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base-deprecated, $fallback);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-deprecated, $fallback);\n }\n\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}"],"sourceRoot":"../src"} \ No newline at end of file diff --git a/elements/pfe-button/dist/pfe-button.js b/elements/pfe-button/dist/pfe-button.js new file mode 100644 index 0000000000..af57f55da5 --- /dev/null +++ b/elements/pfe-button/dist/pfe-button.js @@ -0,0 +1,241 @@ +import PFElement from '../../pfelement/dist/pfelement.js'; + +/*! + * PatternFly Elements: PfeButton 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * +*/ + +// @IE11 +// watching for addition and removal of nodes so +// we can make sure we have the correct light DOM +// and so we can set the _externalBtn property +const parentObserverConfig = { + childList: true, +}; + +// watching for changes on the _externalBtn so we can +// update text in our shadow DOM when the _externalBtn +// changes +const externalBtnObserverConfig = { + characterData: true, + attributes: true, + subtree: true, + childList: true, +}; + +// list of attributes that we DO NOT want to pass from +// the _externalBtn to our shadow DOM button. For example, +// the style attribute could ruin our encapsulated styles +// in the shadow DOM +const denylistAttributes = ["style"]; + +class PfeButton extends PFElement { + + // Injected at build-time + static get version() { + return "1.12.3"; + } + + // Injected at build-time + get html() { + return ` + +`; + } + + // Injected at build-time + static get slots() { + return {"default":{"title":"Default slot","type":"array","namedSlot":false,"items":{"oneOf":[{"$ref":"button"}]}}}; + } + + static get tag() { + return "pfe-button"; + } + + get schemaUrl() { + return "pfe-button.json"; + } + + get templateUrl() { + return "pfe-button.html"; + } + + get styleUrl() { + return "pfe-button.scss"; + } + + static get events() { + return { + click: `${this.tag}:click`, + }; + } + + static get PfeType() { + return PFElement.PfeTypes.Content; + } + + static get properties() { + return { + variant: { + title: "Style variant", + type: String, + values: ["primary", "secondary", "tertiary", "danger", "control"], + }, + pfeVariant: { + type: String, + values: ["primary", "secondary", "tertiary", "danger", "control"], + alias: "variant", + }, + disabled: { + title: "Disabled", + type: Boolean, + prefix: false, + observer: "_disabledChanged", + }, + size: { + title: "Size", + type: String, + values: ["medium", "large"], + }, + }; + } + + constructor() { + super(PfeButton, { type: PfeButton.PfeType }); + + this._init = this._init.bind(this); + this._parentObserverHandler = this._parentObserverHandler.bind(this); + this._clickHandler = this._clickHandler.bind(this); + this._internalBtnContainer = this.shadowRoot.querySelector("#internalBtn"); + this._observer = new MutationObserver(this._parentObserverHandler); + this._externalBtnClickHandler = this._externalBtnClickHandler.bind(this); + this._externalBtnObserver = new MutationObserver(this._init); + + this.addEventListener("click", this._clickHandler); + } + + get _externalBtn() { + return this.querySelector("button"); + } + + connectedCallback() { + super.connectedCallback(); + + if (this.hasLightDOM()) this._init(); + + this._observer.observe(this, parentObserverConfig); + + if (this._externalBtn) { + this._externalBtnObserver.observe(this._externalBtn, externalBtnObserverConfig); + } + } + + disconnectedCallback() { + super.disconnectedCallback(); + + this.removeEventListener("click", this._clickHandler); + this._observer.disconnect(); + this._externalBtnObserver.disconnect(); + } + + _disabledChanged(oldVal, newVal) { + if (!this._externalBtn) { + return; + } + + if (newVal) { + this._externalBtn.setAttribute("disabled", ""); + } else { + this._externalBtn.removeAttribute("disabled"); + } + } + + _init() { + if (!this._isValidLightDom()) { + return; + } + + if (!this._externalBtn) { + return; + } + + this._externalBtnObserver.disconnect(); + + // If the external button has a disabled attribute + if (this._externalBtn.hasAttribute("disabled")) { + // Set it on the wrapper too + this.setAttribute("disabled", ""); + } + + const clone = this._externalBtn.cloneNode(true); + denylistAttributes.forEach((attribute) => { + if (clone.hasAttribute) { + clone.removeAttribute(attribute); + } + }); + + this._internalBtnContainer.innerHTML = clone.outerHTML; + this._externalBtnObserver.observe(this._externalBtn, externalBtnObserverConfig); + + this._externalBtn.addEventListener("click", this._externalBtnClickHandler); + } + + _isValidLightDom() { + if (!this.hasLightDOM()) { + this.warn(`You must have a button in the light DOM`); + return false; + } + if (this.children[0].tagName !== "BUTTON") { + this.warn(`The only child in the light DOM must be a button tag`); + + return false; + } + + return true; + } + + // when the parent changes, make sure the light DOM is valid, + // initialize the component + _parentObserverHandler() { + if (!this._isValidLightDom()) { + return; + } + + this._init(); + } + + // programmatically clicking the _externalBtn is what makes + // this web component button work in a form as you'd expect + _clickHandler() { + this._externalBtn.click(); + } + + _externalBtnClickHandler() { + this.emitEvent(PfeButton.events.click); + } +} + +PFElement.create(PfeButton); + +export default PfeButton; +//# sourceMappingURL=pfe-button.js.map diff --git a/elements/pfe-button/dist/pfe-button.js.map b/elements/pfe-button/dist/pfe-button.js.map new file mode 100644 index 0000000000..5bd5466681 --- /dev/null +++ b/elements/pfe-button/dist/pfe-button.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-button.js","sources":["../_temp/pfe-button.js"],"sourcesContent":["/*!\n * PatternFly Elements: PfeButton 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement.js\";\n\n// @IE11\n// watching for addition and removal of nodes so\n// we can make sure we have the correct light DOM\n// and so we can set the _externalBtn property\nconst parentObserverConfig = {\n childList: true,\n};\n\n// watching for changes on the _externalBtn so we can\n// update text in our shadow DOM when the _externalBtn\n// changes\nconst externalBtnObserverConfig = {\n characterData: true,\n attributes: true,\n subtree: true,\n childList: true,\n};\n\n// list of attributes that we DO NOT want to pass from\n// the _externalBtn to our shadow DOM button. For example,\n// the style attribute could ruin our encapsulated styles\n// in the shadow DOM\nconst denylistAttributes = [\"style\"];\n\nclass PfeButton extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n`;\n }\n\n // Injected at build-time\n static get slots() {\n return {\"default\":{\"title\":\"Default slot\",\"type\":\"array\",\"namedSlot\":false,\"items\":{\"oneOf\":[{\"$ref\":\"button\"}]}}};\n }\n\n static get tag() {\n return \"pfe-button\";\n }\n\n get schemaUrl() {\n return \"pfe-button.json\";\n }\n\n get templateUrl() {\n return \"pfe-button.html\";\n }\n\n get styleUrl() {\n return \"pfe-button.scss\";\n }\n\n static get events() {\n return {\n click: `${this.tag}:click`,\n };\n }\n\n static get PfeType() {\n return PFElement.PfeTypes.Content;\n }\n\n static get properties() {\n return {\n variant: {\n title: \"Style variant\",\n type: String,\n values: [\"primary\", \"secondary\", \"tertiary\", \"danger\", \"control\"],\n },\n pfeVariant: {\n type: String,\n values: [\"primary\", \"secondary\", \"tertiary\", \"danger\", \"control\"],\n alias: \"variant\",\n },\n disabled: {\n title: \"Disabled\",\n type: Boolean,\n prefix: false,\n observer: \"_disabledChanged\",\n },\n size: {\n title: \"Size\",\n type: String,\n values: [\"medium\", \"large\"],\n },\n };\n }\n\n constructor() {\n super(PfeButton, { type: PfeButton.PfeType });\n\n this._init = this._init.bind(this);\n this._parentObserverHandler = this._parentObserverHandler.bind(this);\n this._clickHandler = this._clickHandler.bind(this);\n this._internalBtnContainer = this.shadowRoot.querySelector(\"#internalBtn\");\n this._observer = new MutationObserver(this._parentObserverHandler);\n this._externalBtnClickHandler = this._externalBtnClickHandler.bind(this);\n this._externalBtnObserver = new MutationObserver(this._init);\n\n this.addEventListener(\"click\", this._clickHandler);\n }\n\n get _externalBtn() {\n return this.querySelector(\"button\");\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (this.hasLightDOM()) this._init();\n\n this._observer.observe(this, parentObserverConfig);\n\n if (this._externalBtn) {\n this._externalBtnObserver.observe(this._externalBtn, externalBtnObserverConfig);\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener(\"click\", this._clickHandler);\n this._observer.disconnect();\n this._externalBtnObserver.disconnect();\n }\n\n _disabledChanged(oldVal, newVal) {\n if (!this._externalBtn) {\n return;\n }\n\n if (newVal) {\n this._externalBtn.setAttribute(\"disabled\", \"\");\n } else {\n this._externalBtn.removeAttribute(\"disabled\");\n }\n }\n\n _init() {\n if (!this._isValidLightDom()) {\n return;\n }\n\n if (!this._externalBtn) {\n return;\n }\n\n this._externalBtnObserver.disconnect();\n\n // If the external button has a disabled attribute\n if (this._externalBtn.hasAttribute(\"disabled\")) {\n // Set it on the wrapper too\n this.setAttribute(\"disabled\", \"\");\n }\n\n const clone = this._externalBtn.cloneNode(true);\n denylistAttributes.forEach((attribute) => {\n if (clone.hasAttribute) {\n clone.removeAttribute(attribute);\n }\n });\n\n this._internalBtnContainer.innerHTML = clone.outerHTML;\n this._externalBtnObserver.observe(this._externalBtn, externalBtnObserverConfig);\n\n this._externalBtn.addEventListener(\"click\", this._externalBtnClickHandler);\n }\n\n _isValidLightDom() {\n if (!this.hasLightDOM()) {\n this.warn(`You must have a button in the light DOM`);\n return false;\n }\n if (this.children[0].tagName !== \"BUTTON\") {\n this.warn(`The only child in the light DOM must be a button tag`);\n\n return false;\n }\n\n return true;\n }\n\n // when the parent changes, make sure the light DOM is valid,\n // initialize the component\n _parentObserverHandler() {\n if (!this._isValidLightDom()) {\n return;\n }\n\n this._init();\n }\n\n // programmatically clicking the _externalBtn is what makes\n // this web component button work in a form as you'd expect\n _clickHandler() {\n this._externalBtn.click();\n }\n\n _externalBtnClickHandler() {\n this.emitEvent(PfeButton.events.click);\n }\n}\n\nPFElement.create(PfeButton);\n\nexport default PfeButton;\n"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-button/dist/pfe-button.json b/elements/pfe-button/dist/pfe-button.json new file mode 100644 index 0000000000..d34f896162 --- /dev/null +++ b/elements/pfe-button/dist/pfe-button.json @@ -0,0 +1,45 @@ +{ + "$schema": "http://json-schema.org/draft-04/schema#", + "title": "Button", + "description": "", + "type": "object", + "tag": "pfe-button", + "class": "PfeButton", + "category": "content", + "properties": { + "slots": { + "title": "Slots", + "description": "Definition of the supported slots", + "type": "object", + "properties": { + "default": { + "title": "Default slot", + "type": "array", + "namedSlot": false, + "items": { + "oneOf": [ + { + "$ref": "button" + } + ] + } + } + }, + "required": ["default"] + }, + "events": { + "title": "Events", + "description": "Definition of the supported events", + "type": "object", + "properties": { + "click": { + "title": "Click", + "type": "string", + "default": "pfe-button:click" + } + } + } + }, + "required": ["slots", "attributes", "events"], + "additionalProperties": false +} diff --git a/elements/pfe-button/dist/pfe-button.min.css.map b/elements/pfe-button/dist/pfe-button.min.css.map new file mode 100644 index 0000000000..fedbb2bc95 --- /dev/null +++ b/elements/pfe-button/dist/pfe-button.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../src/pfe-button.scss","pfe-button.css"],"names":[],"mappings":"AAgCA,MACE,QAAA,aAGF,gBACE,QAAA,KAIA,gCAAA,OAEE,iBAAA,KAAA,iBAAA,2EACA,MAAA,KAAA,MAAA,qEACA,UAAA,KAAA,UAAA,gEACA,YAAA,QAAA,YAAA,sCACA,YAAA,IAAA,YAAA,wEACA,QAAA,eAAA,KAAA,QAAA,sHACA,OAAA,QACA,cAAA,IAAA,cAAA,6EACA,OAAA,EAAA,OAAA,4BACA,SAAA,SACA,YAAA,IAAA,YAAA,gEAZF,uCAAA,cAeI,SAAA,SACA,IAAA,EACA,KAAA,EACA,MAAA,EACA,OAAA,EACA,QAAA,GACA,OAAA,IAAA,MAAA,YAAA,OAAA,mKACA,cAAA,IAAA,cAAA,6EAtBJ,sCAAA,sCAAA,aAAA,aA2BI,8BAAA,8FACA,4BAAA,qLAIJ,+BACE,iBAAA,QAAA,iBAAA,gGADF,qCAAA,qCAKI,8BAAA,gGClBN,gCDsBE,kCCvBF,iCD0BI,iBAAA,YAAA,iBAAA,+CChBJ,sCADA,sCDcE,wCAAA,wCCfF,uCADA,uCDuBM,8BAAA,uDACA,4BAAA,kLAIJ,kCACE,MAAA,KAAA,MAAA,iEADF,yCAII,aAAA,KAAA,aAAA,8EAIJ,iCACE,MAAA,QAAA,MAAA,+DADF,wCAII,aAAA,QAAA,aAAA,4EAIJ,gCACE,MAAA,QAAA,MAAA,+DACA,cAAA,EAAA,cAAA,kCAFF,sCAAA,sCAMI,iCAAA,8FANJ,6CAAA,6CASM,oBAAA,IAAA,oBAAA,2CACA,oBAAA,KAAA,oBAAA,wCAVN,uCAeI,aAAA,QAAA,aAAA,4FACA,oBAAA,QAAA,oBAAA,4CAIJ,0CACE,iBAAA,QAAA,iBAAA,qFAGF,2BACE,yBAAA,oFACA,sBAAA,6CAGF,yBACE,iBAAA,QAAA,iBAAA,gFACA,MAAA,QAAA,MAAA,4EACA,eAAA,KAHF,gCAKI,OAAA,EAAA,OAAA,mCALJ,+BAAA,+BAUI,8BAAA,yFACA,4BAAA","file":"pfe-button.min.css","sourceRoot":"../src","sourcesContent":[null,":host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([variant=\"primary\"]) button, button {\n background-color: #06c;\n background-color: var(--pfe-button--BackgroundColor, var(--pfe-theme--color--ui-accent, #06c));\n color: #fff;\n color: var(--pfe-button--Color, var(--pfe-theme--color--ui-base--text, #fff));\n font-size: 1rem;\n font-size: var(--pfe-button--FontSize, var(--pf-global--FontSize--md, 1rem));\n font-family: inherit;\n font-family: var(--pfe-theme--font-family, inherit);\n font-weight: 400;\n font-weight: var(--pfe-button--FontWeight, var(--pfe-theme--font-weight--normal, 400));\n padding: calc(1rem / 2) 1rem;\n padding: var(--pfe-button--Padding, calc(var(--pfe-theme--container-padding, 1rem) / 2) var(--pfe-theme--container-padding, 1rem));\n cursor: pointer;\n border-radius: 3px;\n border-radius: var(--pfe-button--BorderRadius, var(--pfe-theme--surface--border-radius, 3px));\n border: 0;\n border: var(--pfe-button--Border, 0);\n position: relative;\n line-height: 1.5;\n line-height: var(--pfe-button--LineHeight, var(--pfe-theme--line-height, 1.5));\n}\n\n:host([variant=\"primary\"]) button::after, button::after {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n content: \"\";\n border: 1px solid transparent;\n border: var(--pfe-button__after--Border, var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor, transparent));\n border-radius: 3px;\n border-radius: var(--pfe-button--BorderRadius, var(--pfe-theme--surface--border-radius, 3px));\n}\n\n:host([variant=\"primary\"]) button:hover, :host([variant=\"primary\"]) button:focus, button:hover, button:focus {\n --pfe-button--BackgroundColor: var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--ui-accent--hover, #004080));\n --pfe-button__after--Border: var(--pfe-button__after--Border--hover, var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor--hover, transparent));\n}\n\n:host([variant=\"danger\"]) button {\n background-color: #c9190b;\n background-color: var(--pfe-button--BackgroundColor, var(--pfe-theme--color--feedback--critical--lighter, #c9190b));\n}\n\n:host([variant=\"danger\"]) button:hover, :host([variant=\"danger\"]) button:focus {\n --pfe-button--BackgroundColor: var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--feedback--critical, #a30000));\n}\n\n:host([variant=\"secondary\"]) button,\n:host([variant=\"tertiary\"]) button,\n:host([variant=\"control\"]) button {\n background-color: transparent;\n background-color: var(--pfe-button--BackgroundColor, transparent);\n}\n\n:host([variant=\"secondary\"]) button:hover, :host([variant=\"secondary\"]) button:focus,\n:host([variant=\"tertiary\"]) button:hover,\n:host([variant=\"tertiary\"]) button:focus,\n:host([variant=\"control\"]) button:hover,\n:host([variant=\"control\"]) button:focus {\n --pfe-button--BackgroundColor: var(--pfe-button--BackgroundColor--hover, transparent);\n --pfe-button__after--Border: var(--pfe-button__after--Border--hover, var(--pfe-theme--ui--border-width--md, 2px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor, transparent));\n}\n\n:host([variant=\"secondary\"]) button {\n color: #06c;\n color: var(--pfe-button--Color, var(--pfe-theme--color--ui-accent, #06c));\n}\n\n:host([variant=\"secondary\"]) button::after {\n border-color: #06c;\n border-color: var(--pfe-button__after--BorderColor, var(--pfe-theme--color--ui-accent, #06c));\n}\n\n:host([variant=\"tertiary\"]) button {\n color: #151515;\n color: var(--pfe-button--Color, var(--pfe-theme--color--text, #151515));\n}\n\n:host([variant=\"tertiary\"]) button::after {\n border-color: #151515;\n border-color: var(--pfe-button__after--BorderColor, var(--pfe-theme--color--text, #151515));\n}\n\n:host([variant=\"control\"]) button {\n color: #151515;\n color: var(--pfe-button--Color, var(--pfe-theme--color--text, #151515));\n border-radius: 0;\n border-radius: var(--pfe-button--BorderRadius, 0);\n}\n\n:host([variant=\"control\"]) button:hover, :host([variant=\"control\"]) button:focus {\n --pfe-button__after--BorderColor: var(--pfe-button--BorderColor--hover, var(--pfe-theme--color--ui--border--lightest, #f0f0f0));\n}\n\n:host([variant=\"control\"]) button:hover::after, :host([variant=\"control\"]) button:focus::after {\n border-bottom-width: 2px;\n border-bottom-width: var(--pfe-theme--ui--border-width--md, 2px);\n border-bottom-color: #06c;\n border-bottom-color: var(--pfe-theme--color--ui-accent, #06c);\n}\n\n:host([variant=\"control\"]) button::after {\n border-color: #f0f0f0;\n border-color: var(--pfe-button__after--BorderColor, var(--pfe-theme--color--ui--border--lightest, #f0f0f0));\n border-bottom-color: #8a8d90;\n border-bottom-color: var(--pfe-theme--color--ui--border, #8a8d90);\n}\n\n:host([variant=\"control\"][disabled]) button {\n background-color: #f0f0f0;\n background-color: var(--pfe-button--BackgroundColor, var(--pfe-theme--color--surface--lighter, #f0f0f0));\n}\n\n:host([size=\"large\"]) button {\n --pfe-button--FontWeight: var(--pfe-button--FontWeight--large, var(--pfe-theme--font-weight--semi-bold, 600));\n --pfe-button--Padding: var(--pfe-button--Padding--large, 12px 24px);\n}\n\n:host([disabled]) button {\n background-color: #d2d2d2;\n background-color: var(--pfe-button--BackgroundColor, var(--pfe-theme--color--ui-disabled, #d2d2d2));\n color: #6a6e73;\n color: var(--pfe-button--Color, var(--pfe-theme--color--ui-disabled--text, #6a6e73));\n pointer-events: none;\n}\n\n:host([disabled]) button::after {\n border: 0;\n border: var(--pfe-button__after--Border, 0);\n}\n\n:host([disabled]) button:hover, :host([disabled]) button:focus {\n --pfe-button--BackgroundColor: var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--ui-disabled, #d2d2d2));\n --pfe-button__after--Border: var(--pfe-button__after--Border--hover, 0);\n}\n\n/*# sourceMappingURL=pfe-button.css.map */\n"]} \ No newline at end of file diff --git a/elements/pfe-button/dist/pfe-button.min.js b/elements/pfe-button/dist/pfe-button.min.js new file mode 100644 index 0000000000..e8f87139d0 --- /dev/null +++ b/elements/pfe-button/dist/pfe-button.min.js @@ -0,0 +1,27 @@ +import t from"../../pfelement/dist/pfelement.min.js"; +/*! + * PatternFly Elements: PfeButton 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * +*/ +const e={childList:!0},r={characterData:!0,attributes:!0,subtree:!0,childList:!0},o=["style"];class a extends t{static get version(){return"1.12.3"}get html(){return'\n\n'}static get slots(){return{default:{title:"Default slot",type:"array",namedSlot:!1,items:{oneOf:[{$ref:"button"}]}}}}static get tag(){return"pfe-button"}get schemaUrl(){return"pfe-button.json"}get templateUrl(){return"pfe-button.html"}get styleUrl(){return"pfe-button.scss"}static get events(){return{click:this.tag+":click"}}static get PfeType(){return t.PfeTypes.Content}static get properties(){return{variant:{title:"Style variant",type:String,values:["primary","secondary","tertiary","danger","control"]},pfeVariant:{type:String,values:["primary","secondary","tertiary","danger","control"],alias:"variant"},disabled:{title:"Disabled",type:Boolean,prefix:!1,observer:"_disabledChanged"},size:{title:"Size",type:String,values:["medium","large"]}}}constructor(){super(a,{type:a.PfeType}),this._init=this._init.bind(this),this._parentObserverHandler=this._parentObserverHandler.bind(this),this._clickHandler=this._clickHandler.bind(this),this._internalBtnContainer=this.shadowRoot.querySelector("#internalBtn"),this._observer=new MutationObserver(this._parentObserverHandler),this._externalBtnClickHandler=this._externalBtnClickHandler.bind(this),this._externalBtnObserver=new MutationObserver(this._init),this.addEventListener("click",this._clickHandler)}get _externalBtn(){return this.querySelector("button")}connectedCallback(){super.connectedCallback(),this.hasLightDOM()&&this._init(),this._observer.observe(this,e),this._externalBtn&&this._externalBtnObserver.observe(this._externalBtn,r)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this._clickHandler),this._observer.disconnect(),this._externalBtnObserver.disconnect()}_disabledChanged(t,e){this._externalBtn&&(e?this._externalBtn.setAttribute("disabled",""):this._externalBtn.removeAttribute("disabled"))}_init(){if(!this._isValidLightDom())return;if(!this._externalBtn)return;this._externalBtnObserver.disconnect(),this._externalBtn.hasAttribute("disabled")&&this.setAttribute("disabled","");const t=this._externalBtn.cloneNode(!0);o.forEach(e=>{t.hasAttribute&&t.removeAttribute(e)}),this._internalBtnContainer.innerHTML=t.outerHTML,this._externalBtnObserver.observe(this._externalBtn,r),this._externalBtn.addEventListener("click",this._externalBtnClickHandler)}_isValidLightDom(){return this.hasLightDOM()?"BUTTON"===this.children[0].tagName||(this.warn("The only child in the light DOM must be a button tag"),!1):(this.warn("You must have a button in the light DOM"),!1)}_parentObserverHandler(){this._isValidLightDom()&&this._init()}_clickHandler(){this._externalBtn.click()}_externalBtnClickHandler(){this.emitEvent(a.events.click)}}t.create(a);export default a; +//# sourceMappingURL=pfe-button.min.js.map diff --git a/elements/pfe-button/dist/pfe-button.min.js.map b/elements/pfe-button/dist/pfe-button.min.js.map new file mode 100644 index 0000000000..dac6143910 --- /dev/null +++ b/elements/pfe-button/dist/pfe-button.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-button.min.js","sources":["../_temp/pfe-button.js"],"sourcesContent":["/*!\n * PatternFly Elements: PfeButton 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement.js\";\n\n// @IE11\n// watching for addition and removal of nodes so\n// we can make sure we have the correct light DOM\n// and so we can set the _externalBtn property\nconst parentObserverConfig = {\n childList: true,\n};\n\n// watching for changes on the _externalBtn so we can\n// update text in our shadow DOM when the _externalBtn\n// changes\nconst externalBtnObserverConfig = {\n characterData: true,\n attributes: true,\n subtree: true,\n childList: true,\n};\n\n// list of attributes that we DO NOT want to pass from\n// the _externalBtn to our shadow DOM button. For example,\n// the style attribute could ruin our encapsulated styles\n// in the shadow DOM\nconst denylistAttributes = [\"style\"];\n\nclass PfeButton extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n`;\n }\n\n // Injected at build-time\n static get slots() {\n return {\"default\":{\"title\":\"Default slot\",\"type\":\"array\",\"namedSlot\":false,\"items\":{\"oneOf\":[{\"$ref\":\"button\"}]}}};\n }\n\n static get tag() {\n return \"pfe-button\";\n }\n\n get schemaUrl() {\n return \"pfe-button.json\";\n }\n\n get templateUrl() {\n return \"pfe-button.html\";\n }\n\n get styleUrl() {\n return \"pfe-button.scss\";\n }\n\n static get events() {\n return {\n click: `${this.tag}:click`,\n };\n }\n\n static get PfeType() {\n return PFElement.PfeTypes.Content;\n }\n\n static get properties() {\n return {\n variant: {\n title: \"Style variant\",\n type: String,\n values: [\"primary\", \"secondary\", \"tertiary\", \"danger\", \"control\"],\n },\n pfeVariant: {\n type: String,\n values: [\"primary\", \"secondary\", \"tertiary\", \"danger\", \"control\"],\n alias: \"variant\",\n },\n disabled: {\n title: \"Disabled\",\n type: Boolean,\n prefix: false,\n observer: \"_disabledChanged\",\n },\n size: {\n title: \"Size\",\n type: String,\n values: [\"medium\", \"large\"],\n },\n };\n }\n\n constructor() {\n super(PfeButton, { type: PfeButton.PfeType });\n\n this._init = this._init.bind(this);\n this._parentObserverHandler = this._parentObserverHandler.bind(this);\n this._clickHandler = this._clickHandler.bind(this);\n this._internalBtnContainer = this.shadowRoot.querySelector(\"#internalBtn\");\n this._observer = new MutationObserver(this._parentObserverHandler);\n this._externalBtnClickHandler = this._externalBtnClickHandler.bind(this);\n this._externalBtnObserver = new MutationObserver(this._init);\n\n this.addEventListener(\"click\", this._clickHandler);\n }\n\n get _externalBtn() {\n return this.querySelector(\"button\");\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (this.hasLightDOM()) this._init();\n\n this._observer.observe(this, parentObserverConfig);\n\n if (this._externalBtn) {\n this._externalBtnObserver.observe(this._externalBtn, externalBtnObserverConfig);\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener(\"click\", this._clickHandler);\n this._observer.disconnect();\n this._externalBtnObserver.disconnect();\n }\n\n _disabledChanged(oldVal, newVal) {\n if (!this._externalBtn) {\n return;\n }\n\n if (newVal) {\n this._externalBtn.setAttribute(\"disabled\", \"\");\n } else {\n this._externalBtn.removeAttribute(\"disabled\");\n }\n }\n\n _init() {\n if (!this._isValidLightDom()) {\n return;\n }\n\n if (!this._externalBtn) {\n return;\n }\n\n this._externalBtnObserver.disconnect();\n\n // If the external button has a disabled attribute\n if (this._externalBtn.hasAttribute(\"disabled\")) {\n // Set it on the wrapper too\n this.setAttribute(\"disabled\", \"\");\n }\n\n const clone = this._externalBtn.cloneNode(true);\n denylistAttributes.forEach((attribute) => {\n if (clone.hasAttribute) {\n clone.removeAttribute(attribute);\n }\n });\n\n this._internalBtnContainer.innerHTML = clone.outerHTML;\n this._externalBtnObserver.observe(this._externalBtn, externalBtnObserverConfig);\n\n this._externalBtn.addEventListener(\"click\", this._externalBtnClickHandler);\n }\n\n _isValidLightDom() {\n if (!this.hasLightDOM()) {\n this.warn(`You must have a button in the light DOM`);\n return false;\n }\n if (this.children[0].tagName !== \"BUTTON\") {\n this.warn(`The only child in the light DOM must be a button tag`);\n\n return false;\n }\n\n return true;\n }\n\n // when the parent changes, make sure the light DOM is valid,\n // initialize the component\n _parentObserverHandler() {\n if (!this._isValidLightDom()) {\n return;\n }\n\n this._init();\n }\n\n // programmatically clicking the _externalBtn is what makes\n // this web component button work in a form as you'd expect\n _clickHandler() {\n this._externalBtn.click();\n }\n\n _externalBtnClickHandler() {\n this.emitEvent(PfeButton.events.click);\n }\n}\n\nPFElement.create(PfeButton);\n\nexport default PfeButton;\n"],"names":["parentObserverConfig","childList","externalBtnObserverConfig","characterData","attributes","subtree","denylistAttributes","PfeButton","PFElement","version","html","slots","default","title","type","namedSlot","items","oneOf","$ref","tag","schemaUrl","templateUrl","styleUrl","events","click","this","PfeType","PfeTypes","Content","properties","variant","String","values","pfeVariant","alias","disabled","Boolean","prefix","observer","size","[object Object]","super","_init","bind","_parentObserverHandler","_clickHandler","_internalBtnContainer","shadowRoot","querySelector","_observer","MutationObserver","_externalBtnClickHandler","_externalBtnObserver","addEventListener","_externalBtn","connectedCallback","hasLightDOM","observe","disconnectedCallback","removeEventListener","disconnect","oldVal","newVal","setAttribute","removeAttribute","_isValidLightDom","hasAttribute","clone","cloneNode","forEach","attribute","innerHTML","outerHTML","children","tagName","warn","emitEvent","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-button/dist/pfe-button.umd.js b/elements/pfe-button/dist/pfe-button.umd.js new file mode 100644 index 0000000000..ce23073377 --- /dev/null +++ b/elements/pfe-button/dist/pfe-button.umd.js @@ -0,0 +1,357 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('../../pfelement/dist/pfelement.umd')) : + typeof define === 'function' && define.amd ? define(['../../pfelement/dist/pfelement.umd'], factory) : + (global = global || self, global.PfeButton = factory(global.PFElement)); +}(this, (function (PFElement) { 'use strict'; + + PFElement = PFElement && Object.prototype.hasOwnProperty.call(PFElement, 'default') ? PFElement['default'] : PFElement; + + var classCallCheck = function (instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } + }; + + var createClass = function () { + function defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } + + return function (Constructor, protoProps, staticProps) { + if (protoProps) defineProperties(Constructor.prototype, protoProps); + if (staticProps) defineProperties(Constructor, staticProps); + return Constructor; + }; + }(); + + var get = function get(object, property, receiver) { + if (object === null) object = Function.prototype; + var desc = Object.getOwnPropertyDescriptor(object, property); + + if (desc === undefined) { + var parent = Object.getPrototypeOf(object); + + if (parent === null) { + return undefined; + } else { + return get(parent, property, receiver); + } + } else if ("value" in desc) { + return desc.value; + } else { + var getter = desc.get; + + if (getter === undefined) { + return undefined; + } + + return getter.call(receiver); + } + }; + + var inherits = function (subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); + } + + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + enumerable: false, + writable: true, + configurable: true + } + }); + if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; + }; + + var possibleConstructorReturn = function (self, call) { + if (!self) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return call && (typeof call === "object" || typeof call === "function") ? call : self; + }; + + /*! + * PatternFly Elements: PfeButton 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * + */ + + // @IE11 + // watching for addition and removal of nodes so + // we can make sure we have the correct light DOM + // and so we can set the _externalBtn property + var parentObserverConfig = { + childList: true + }; + + // watching for changes on the _externalBtn so we can + // update text in our shadow DOM when the _externalBtn + // changes + var externalBtnObserverConfig = { + characterData: true, + attributes: true, + subtree: true, + childList: true + }; + + // list of attributes that we DO NOT want to pass from + // the _externalBtn to our shadow DOM button. For example, + // the style attribute could ruin our encapsulated styles + // in the shadow DOM + var denylistAttributes = ["style"]; + + var PfeButton = function (_PFElement) { + inherits(PfeButton, _PFElement); + createClass(PfeButton, [{ + key: "html", + + + // Injected at build-time + get: function get() { + return "\n\n"; + } + + // Injected at build-time + + }, { + key: "schemaUrl", + get: function get() { + return "pfe-button.json"; + } + }, { + key: "templateUrl", + get: function get() { + return "pfe-button.html"; + } + }, { + key: "styleUrl", + get: function get() { + return "pfe-button.scss"; + } + }], [{ + key: "version", + + + // Injected at build-time + get: function get() { + return "1.12.3"; + } + }, { + key: "slots", + get: function get() { + return { "default": { "title": "Default slot", "type": "array", "namedSlot": false, "items": { "oneOf": [{ "$ref": "button" }] } } }; + } + }, { + key: "tag", + get: function get() { + return "pfe-button"; + } + }, { + key: "events", + get: function get() { + return { + click: this.tag + ":click" + }; + } + }, { + key: "PfeType", + get: function get() { + return PFElement.PfeTypes.Content; + } + }, { + key: "properties", + get: function get() { + return { + variant: { + title: "Style variant", + type: String, + values: ["primary", "secondary", "tertiary", "danger", "control"] + }, + pfeVariant: { + type: String, + values: ["primary", "secondary", "tertiary", "danger", "control"], + alias: "variant" + }, + disabled: { + title: "Disabled", + type: Boolean, + prefix: false, + observer: "_disabledChanged" + }, + size: { + title: "Size", + type: String, + values: ["medium", "large"] + } + }; + } + }]); + + function PfeButton() { + classCallCheck(this, PfeButton); + + var _this = possibleConstructorReturn(this, (PfeButton.__proto__ || Object.getPrototypeOf(PfeButton)).call(this, PfeButton, { type: PfeButton.PfeType })); + + _this._init = _this._init.bind(_this); + _this._parentObserverHandler = _this._parentObserverHandler.bind(_this); + _this._clickHandler = _this._clickHandler.bind(_this); + _this._internalBtnContainer = _this.shadowRoot.querySelector("#internalBtn"); + _this._observer = new MutationObserver(_this._parentObserverHandler); + _this._externalBtnClickHandler = _this._externalBtnClickHandler.bind(_this); + _this._externalBtnObserver = new MutationObserver(_this._init); + + _this.addEventListener("click", _this._clickHandler); + return _this; + } + + createClass(PfeButton, [{ + key: "connectedCallback", + value: function connectedCallback() { + get(PfeButton.prototype.__proto__ || Object.getPrototypeOf(PfeButton.prototype), "connectedCallback", this).call(this); + + if (this.hasLightDOM()) this._init(); + + this._observer.observe(this, parentObserverConfig); + + if (this._externalBtn) { + this._externalBtnObserver.observe(this._externalBtn, externalBtnObserverConfig); + } + } + }, { + key: "disconnectedCallback", + value: function disconnectedCallback() { + get(PfeButton.prototype.__proto__ || Object.getPrototypeOf(PfeButton.prototype), "disconnectedCallback", this).call(this); + + this.removeEventListener("click", this._clickHandler); + this._observer.disconnect(); + this._externalBtnObserver.disconnect(); + } + }, { + key: "_disabledChanged", + value: function _disabledChanged(oldVal, newVal) { + if (!this._externalBtn) { + return; + } + + if (newVal) { + this._externalBtn.setAttribute("disabled", ""); + } else { + this._externalBtn.removeAttribute("disabled"); + } + } + }, { + key: "_init", + value: function _init() { + if (!this._isValidLightDom()) { + return; + } + + if (!this._externalBtn) { + return; + } + + this._externalBtnObserver.disconnect(); + + // If the external button has a disabled attribute + if (this._externalBtn.hasAttribute("disabled")) { + // Set it on the wrapper too + this.setAttribute("disabled", ""); + } + + var clone = this._externalBtn.cloneNode(true); + denylistAttributes.forEach(function (attribute) { + if (clone.hasAttribute) { + clone.removeAttribute(attribute); + } + }); + + this._internalBtnContainer.innerHTML = clone.outerHTML; + this._externalBtnObserver.observe(this._externalBtn, externalBtnObserverConfig); + + this._externalBtn.addEventListener("click", this._externalBtnClickHandler); + } + }, { + key: "_isValidLightDom", + value: function _isValidLightDom() { + if (!this.hasLightDOM()) { + this.warn("You must have a button in the light DOM"); + return false; + } + if (this.children[0].tagName !== "BUTTON") { + this.warn("The only child in the light DOM must be a button tag"); + + return false; + } + + return true; + } + + // when the parent changes, make sure the light DOM is valid, + // initialize the component + + }, { + key: "_parentObserverHandler", + value: function _parentObserverHandler() { + if (!this._isValidLightDom()) { + return; + } + + this._init(); + } + + // programmatically clicking the _externalBtn is what makes + // this web component button work in a form as you'd expect + + }, { + key: "_clickHandler", + value: function _clickHandler() { + this._externalBtn.click(); + } + }, { + key: "_externalBtnClickHandler", + value: function _externalBtnClickHandler() { + this.emitEvent(PfeButton.events.click); + } + }, { + key: "_externalBtn", + get: function get() { + return this.querySelector("button"); + } + }]); + return PfeButton; + }(PFElement); + + PFElement.create(PfeButton); + + return PfeButton; + +}))); +//# sourceMappingURL=pfe-button.umd.js.map diff --git a/elements/pfe-button/dist/pfe-button.umd.js.map b/elements/pfe-button/dist/pfe-button.umd.js.map new file mode 100644 index 0000000000..cc3be878a0 --- /dev/null +++ b/elements/pfe-button/dist/pfe-button.umd.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-button.umd.js","sources":["../_temp/pfe-button.umd.js"],"sourcesContent":["/*!\n * PatternFly Elements: PfeButton 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement\";\n\n// @IE11\n// watching for addition and removal of nodes so\n// we can make sure we have the correct light DOM\n// and so we can set the _externalBtn property\nconst parentObserverConfig = {\n childList: true,\n};\n\n// watching for changes on the _externalBtn so we can\n// update text in our shadow DOM when the _externalBtn\n// changes\nconst externalBtnObserverConfig = {\n characterData: true,\n attributes: true,\n subtree: true,\n childList: true,\n};\n\n// list of attributes that we DO NOT want to pass from\n// the _externalBtn to our shadow DOM button. For example,\n// the style attribute could ruin our encapsulated styles\n// in the shadow DOM\nconst denylistAttributes = [\"style\"];\n\nclass PfeButton extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n`;\n }\n\n // Injected at build-time\n static get slots() {\n return {\"default\":{\"title\":\"Default slot\",\"type\":\"array\",\"namedSlot\":false,\"items\":{\"oneOf\":[{\"$ref\":\"button\"}]}}};\n }\n\n static get tag() {\n return \"pfe-button\";\n }\n\n get schemaUrl() {\n return \"pfe-button.json\";\n }\n\n get templateUrl() {\n return \"pfe-button.html\";\n }\n\n get styleUrl() {\n return \"pfe-button.scss\";\n }\n\n static get events() {\n return {\n click: `${this.tag}:click`,\n };\n }\n\n static get PfeType() {\n return PFElement.PfeTypes.Content;\n }\n\n static get properties() {\n return {\n variant: {\n title: \"Style variant\",\n type: String,\n values: [\"primary\", \"secondary\", \"tertiary\", \"danger\", \"control\"],\n },\n pfeVariant: {\n type: String,\n values: [\"primary\", \"secondary\", \"tertiary\", \"danger\", \"control\"],\n alias: \"variant\",\n },\n disabled: {\n title: \"Disabled\",\n type: Boolean,\n prefix: false,\n observer: \"_disabledChanged\",\n },\n size: {\n title: \"Size\",\n type: String,\n values: [\"medium\", \"large\"],\n },\n };\n }\n\n constructor() {\n super(PfeButton, { type: PfeButton.PfeType });\n\n this._init = this._init.bind(this);\n this._parentObserverHandler = this._parentObserverHandler.bind(this);\n this._clickHandler = this._clickHandler.bind(this);\n this._internalBtnContainer = this.shadowRoot.querySelector(\"#internalBtn\");\n this._observer = new MutationObserver(this._parentObserverHandler);\n this._externalBtnClickHandler = this._externalBtnClickHandler.bind(this);\n this._externalBtnObserver = new MutationObserver(this._init);\n\n this.addEventListener(\"click\", this._clickHandler);\n }\n\n get _externalBtn() {\n return this.querySelector(\"button\");\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (this.hasLightDOM()) this._init();\n\n this._observer.observe(this, parentObserverConfig);\n\n if (this._externalBtn) {\n this._externalBtnObserver.observe(this._externalBtn, externalBtnObserverConfig);\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener(\"click\", this._clickHandler);\n this._observer.disconnect();\n this._externalBtnObserver.disconnect();\n }\n\n _disabledChanged(oldVal, newVal) {\n if (!this._externalBtn) {\n return;\n }\n\n if (newVal) {\n this._externalBtn.setAttribute(\"disabled\", \"\");\n } else {\n this._externalBtn.removeAttribute(\"disabled\");\n }\n }\n\n _init() {\n if (!this._isValidLightDom()) {\n return;\n }\n\n if (!this._externalBtn) {\n return;\n }\n\n this._externalBtnObserver.disconnect();\n\n // If the external button has a disabled attribute\n if (this._externalBtn.hasAttribute(\"disabled\")) {\n // Set it on the wrapper too\n this.setAttribute(\"disabled\", \"\");\n }\n\n const clone = this._externalBtn.cloneNode(true);\n denylistAttributes.forEach((attribute) => {\n if (clone.hasAttribute) {\n clone.removeAttribute(attribute);\n }\n });\n\n this._internalBtnContainer.innerHTML = clone.outerHTML;\n this._externalBtnObserver.observe(this._externalBtn, externalBtnObserverConfig);\n\n this._externalBtn.addEventListener(\"click\", this._externalBtnClickHandler);\n }\n\n _isValidLightDom() {\n if (!this.hasLightDOM()) {\n this.warn(`You must have a button in the light DOM`);\n return false;\n }\n if (this.children[0].tagName !== \"BUTTON\") {\n this.warn(`The only child in the light DOM must be a button tag`);\n\n return false;\n }\n\n return true;\n }\n\n // when the parent changes, make sure the light DOM is valid,\n // initialize the component\n _parentObserverHandler() {\n if (!this._isValidLightDom()) {\n return;\n }\n\n this._init();\n }\n\n // programmatically clicking the _externalBtn is what makes\n // this web component button work in a form as you'd expect\n _clickHandler() {\n this._externalBtn.click();\n }\n\n _externalBtnClickHandler() {\n this.emitEvent(PfeButton.events.click);\n }\n}\n\nPFElement.create(PfeButton);\n\nexport default PfeButton;\n"],"names":["parentObserverConfig","childList","externalBtnObserverConfig","characterData","attributes","subtree","denylistAttributes","PfeButton","click","tag","PFElement","PfeTypes","Content","variant","title","type","String","values","pfeVariant","alias","disabled","Boolean","prefix","observer","size","PfeType","_init","bind","_parentObserverHandler","_clickHandler","_internalBtnContainer","shadowRoot","querySelector","_observer","MutationObserver","_externalBtnClickHandler","_externalBtnObserver","addEventListener","hasLightDOM","observe","_externalBtn","removeEventListener","disconnect","oldVal","newVal","setAttribute","removeAttribute","_isValidLightDom","hasAttribute","clone","cloneNode","forEach","attribute","innerHTML","outerHTML","warn","children","tagName","emitEvent","events","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-button/dist/pfe-button.umd.min.js b/elements/pfe-button/dist/pfe-button.umd.min.js new file mode 100644 index 0000000000..4e172607d8 --- /dev/null +++ b/elements/pfe-button/dist/pfe-button.umd.min.js @@ -0,0 +1,2 @@ +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("../../pfelement/dist/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../../pfelement/dist/pfelement.umd.min"],e):(t=t||self).PfeButton=e(t.PFElement)}(this,function(t){"use strict";t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var e=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},r=function(t,e,r){return e&&o(t.prototype,e),r&&o(t,r),t};function o(t,e){for(var r=0;r:host{display:inline-block}:host([hidden]){display:none}:host([variant=primary]) button,button{background-color:#06c;background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--ui-accent,#06c));color:#fff;color:var(--pfe-button--Color,var(--pfe-theme--color--ui-base--text,#fff));font-size:1rem;font-size:var(--pfe-button--FontSize,var(--pf-global--FontSize--md,1rem));font-family:inherit;font-family:var(--pfe-theme--font-family,inherit);font-weight:400;font-weight:var(--pfe-button--FontWeight,var(--pfe-theme--font-weight--normal,400));padding:calc(1rem / 2) 1rem;padding:var(--pfe-button--Padding,calc(var(--pfe-theme--container-padding,1rem)/ 2) var(--pfe-theme--container-padding,1rem));cursor:pointer;border-radius:3px;border-radius:var(--pfe-button--BorderRadius,var(--pfe-theme--surface--border-radius,3px));border:0;border:var(--pfe-button--Border,0);position:relative;line-height:1.5;line-height:var(--pfe-button--LineHeight,var(--pfe-theme--line-height,1.5))}:host([variant=primary]) button::after,button::after{position:absolute;top:0;left:0;right:0;bottom:0;content:"";border:1px solid transparent;border:var(--pfe-button__after--Border,var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-button__after--BorderColor,transparent));border-radius:3px;border-radius:var(--pfe-button--BorderRadius,var(--pfe-theme--surface--border-radius,3px))}:host([variant=primary]) button:focus,:host([variant=primary]) button:hover,button:focus,button:hover{--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--ui-accent--hover, #004080));--pfe-button__after--Border:var(--pfe-button__after--Border--hover, var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor--hover, transparent))}:host([variant=danger]) button{background-color:#c9190b;background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--feedback--critical--lighter,#c9190b))}:host([variant=danger]) button:focus,:host([variant=danger]) button:hover{--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--feedback--critical, #a30000))}:host([variant=control]) button,:host([variant=secondary]) button,:host([variant=tertiary]) button{background-color:transparent;background-color:var(--pfe-button--BackgroundColor,transparent)}:host([variant=control]) button:focus,:host([variant=control]) button:hover,:host([variant=secondary]) button:focus,:host([variant=secondary]) button:hover,:host([variant=tertiary]) button:focus,:host([variant=tertiary]) button:hover{--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, transparent);--pfe-button__after--Border:var(--pfe-button__after--Border--hover, var(--pfe-theme--ui--border-width--md, 2px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor, transparent))}:host([variant=secondary]) button{color:#06c;color:var(--pfe-button--Color,var(--pfe-theme--color--ui-accent,#06c))}:host([variant=secondary]) button::after{border-color:#06c;border-color:var(--pfe-button__after--BorderColor,var(--pfe-theme--color--ui-accent,#06c))}:host([variant=tertiary]) button{color:#151515;color:var(--pfe-button--Color,var(--pfe-theme--color--text,#151515))}:host([variant=tertiary]) button::after{border-color:#151515;border-color:var(--pfe-button__after--BorderColor,var(--pfe-theme--color--text,#151515))}:host([variant=control]) button{color:#151515;color:var(--pfe-button--Color,var(--pfe-theme--color--text,#151515));border-radius:0;border-radius:var(--pfe-button--BorderRadius,0)}:host([variant=control]) button:focus,:host([variant=control]) button:hover{--pfe-button__after--BorderColor:var(--pfe-button--BorderColor--hover, var(--pfe-theme--color--ui--border--lightest, #f0f0f0))}:host([variant=control]) button:focus::after,:host([variant=control]) button:hover::after{border-bottom-width:2px;border-bottom-width:var(--pfe-theme--ui--border-width--md,2px);border-bottom-color:#06c;border-bottom-color:var(--pfe-theme--color--ui-accent,#06c)}:host([variant=control]) button::after{border-color:#f0f0f0;border-color:var(--pfe-button__after--BorderColor,var(--pfe-theme--color--ui--border--lightest,#f0f0f0));border-bottom-color:#8a8d90;border-bottom-color:var(--pfe-theme--color--ui--border,#8a8d90)}:host([variant=control][disabled]) button{background-color:#f0f0f0;background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--surface--lighter,#f0f0f0))}:host([size=large]) button{--pfe-button--FontWeight:var(--pfe-button--FontWeight--large, var(--pfe-theme--font-weight--semi-bold, 600));--pfe-button--Padding:var(--pfe-button--Padding--large, 12px 24px)}:host([disabled]) button{background-color:#d2d2d2;background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--ui-disabled,#d2d2d2));color:#6a6e73;color:var(--pfe-button--Color,var(--pfe-theme--color--ui-disabled--text,#6a6e73));pointer-events:none}:host([disabled]) button::after{border:0;border:var(--pfe-button__after--Border,0)}:host([disabled]) button:focus,:host([disabled]) button:hover{--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--ui-disabled, #d2d2d2));--pfe-button__after--Border:var(--pfe-button__after--Border--hover, 0)} /*# sourceMappingURL=pfe-button.min.css.map */\n'}},{key:"schemaUrl",get:function(){return"pfe-button.json"}},{key:"templateUrl",get:function(){return"pfe-button.html"}},{key:"styleUrl",get:function(){return"pfe-button.scss"}}],[{key:"version",get:function(){return"1.12.3"}},{key:"slots",get:function(){return{default:{title:"Default slot",type:"array",namedSlot:!1,items:{oneOf:[{$ref:"button"}]}}}}},{key:"tag",get:function(){return"pfe-button"}},{key:"events",get:function(){return{click:this.tag+":click"}}},{key:"PfeType",get:function(){return t.PfeTypes.Content}},{key:"properties",get:function(){return{variant:{title:"Style variant",type:String,values:["primary","secondary","tertiary","danger","control"]},pfeVariant:{type:String,values:["primary","secondary","tertiary","danger","control"],alias:"variant"},disabled:{title:"Disabled",type:Boolean,prefix:!1,observer:"_disabledChanged"},size:{title:"Size",type:String,values:["medium","large"]}}}}]),r(c,[{key:"connectedCallback",value:function(){n(c.prototype.__proto__||Object.getPrototypeOf(c.prototype),"connectedCallback",this).call(this),this.hasLightDOM()&&this._init(),this._observer.observe(this,i),this._externalBtn&&this._externalBtnObserver.observe(this._externalBtn,l)}},{key:"disconnectedCallback",value:function(){n(c.prototype.__proto__||Object.getPrototypeOf(c.prototype),"disconnectedCallback",this).call(this),this.removeEventListener("click",this._clickHandler),this._observer.disconnect(),this._externalBtnObserver.disconnect()}},{key:"_disabledChanged",value:function(t,e){this._externalBtn&&(e?this._externalBtn.setAttribute("disabled",""):this._externalBtn.removeAttribute("disabled"))}},{key:"_init",value:function(){var e;this._isValidLightDom()&&this._externalBtn&&(this._externalBtnObserver.disconnect(),this._externalBtn.hasAttribute("disabled")&&this.setAttribute("disabled",""),e=this._externalBtn.cloneNode(!0),u.forEach(function(t){e.hasAttribute&&e.removeAttribute(t)}),this._internalBtnContainer.innerHTML=e.outerHTML,this._externalBtnObserver.observe(this._externalBtn,l),this._externalBtn.addEventListener("click",this._externalBtnClickHandler))}},{key:"_isValidLightDom",value:function(){return this.hasLightDOM()?"BUTTON"===this.children[0].tagName||(this.warn("The only child in the light DOM must be a button tag"),!1):(this.warn("You must have a button in the light DOM"),!1)}},{key:"_parentObserverHandler",value:function(){this._isValidLightDom()&&this._init()}},{key:"_clickHandler",value:function(){this._externalBtn.click()}},{key:"_externalBtnClickHandler",value:function(){this.emitEvent(c.events.click)}},{key:"_externalBtn",get:function(){return this.querySelector("button")}}]),c);function c(){e(this,c);var t=a(this,(c.__proto__||Object.getPrototypeOf(c)).call(this,c,{type:c.PfeType}));return t._init=t._init.bind(t),t._parentObserverHandler=t._parentObserverHandler.bind(t),t._clickHandler=t._clickHandler.bind(t),t._internalBtnContainer=t.shadowRoot.querySelector("#internalBtn"),t._observer=new MutationObserver(t._parentObserverHandler),t._externalBtnClickHandler=t._externalBtnClickHandler.bind(t),t._externalBtnObserver=new MutationObserver(t._init),t.addEventListener("click",t._clickHandler),t}return t.create(r),r}); +//# sourceMappingURL=pfe-button.umd.min.js.map diff --git a/elements/pfe-button/dist/pfe-button.umd.min.js.map b/elements/pfe-button/dist/pfe-button.umd.min.js.map new file mode 100644 index 0000000000..0bf7f9dff3 --- /dev/null +++ b/elements/pfe-button/dist/pfe-button.umd.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-button.umd.min.js","sources":["../_temp/pfe-button.umd.js"],"sourcesContent":["/*!\n * PatternFly Elements: PfeButton 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement\";\n\n// @IE11\n// watching for addition and removal of nodes so\n// we can make sure we have the correct light DOM\n// and so we can set the _externalBtn property\nconst parentObserverConfig = {\n childList: true,\n};\n\n// watching for changes on the _externalBtn so we can\n// update text in our shadow DOM when the _externalBtn\n// changes\nconst externalBtnObserverConfig = {\n characterData: true,\n attributes: true,\n subtree: true,\n childList: true,\n};\n\n// list of attributes that we DO NOT want to pass from\n// the _externalBtn to our shadow DOM button. For example,\n// the style attribute could ruin our encapsulated styles\n// in the shadow DOM\nconst denylistAttributes = [\"style\"];\n\nclass PfeButton extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n`;\n }\n\n // Injected at build-time\n static get slots() {\n return {\"default\":{\"title\":\"Default slot\",\"type\":\"array\",\"namedSlot\":false,\"items\":{\"oneOf\":[{\"$ref\":\"button\"}]}}};\n }\n\n static get tag() {\n return \"pfe-button\";\n }\n\n get schemaUrl() {\n return \"pfe-button.json\";\n }\n\n get templateUrl() {\n return \"pfe-button.html\";\n }\n\n get styleUrl() {\n return \"pfe-button.scss\";\n }\n\n static get events() {\n return {\n click: `${this.tag}:click`,\n };\n }\n\n static get PfeType() {\n return PFElement.PfeTypes.Content;\n }\n\n static get properties() {\n return {\n variant: {\n title: \"Style variant\",\n type: String,\n values: [\"primary\", \"secondary\", \"tertiary\", \"danger\", \"control\"],\n },\n pfeVariant: {\n type: String,\n values: [\"primary\", \"secondary\", \"tertiary\", \"danger\", \"control\"],\n alias: \"variant\",\n },\n disabled: {\n title: \"Disabled\",\n type: Boolean,\n prefix: false,\n observer: \"_disabledChanged\",\n },\n size: {\n title: \"Size\",\n type: String,\n values: [\"medium\", \"large\"],\n },\n };\n }\n\n constructor() {\n super(PfeButton, { type: PfeButton.PfeType });\n\n this._init = this._init.bind(this);\n this._parentObserverHandler = this._parentObserverHandler.bind(this);\n this._clickHandler = this._clickHandler.bind(this);\n this._internalBtnContainer = this.shadowRoot.querySelector(\"#internalBtn\");\n this._observer = new MutationObserver(this._parentObserverHandler);\n this._externalBtnClickHandler = this._externalBtnClickHandler.bind(this);\n this._externalBtnObserver = new MutationObserver(this._init);\n\n this.addEventListener(\"click\", this._clickHandler);\n }\n\n get _externalBtn() {\n return this.querySelector(\"button\");\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (this.hasLightDOM()) this._init();\n\n this._observer.observe(this, parentObserverConfig);\n\n if (this._externalBtn) {\n this._externalBtnObserver.observe(this._externalBtn, externalBtnObserverConfig);\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener(\"click\", this._clickHandler);\n this._observer.disconnect();\n this._externalBtnObserver.disconnect();\n }\n\n _disabledChanged(oldVal, newVal) {\n if (!this._externalBtn) {\n return;\n }\n\n if (newVal) {\n this._externalBtn.setAttribute(\"disabled\", \"\");\n } else {\n this._externalBtn.removeAttribute(\"disabled\");\n }\n }\n\n _init() {\n if (!this._isValidLightDom()) {\n return;\n }\n\n if (!this._externalBtn) {\n return;\n }\n\n this._externalBtnObserver.disconnect();\n\n // If the external button has a disabled attribute\n if (this._externalBtn.hasAttribute(\"disabled\")) {\n // Set it on the wrapper too\n this.setAttribute(\"disabled\", \"\");\n }\n\n const clone = this._externalBtn.cloneNode(true);\n denylistAttributes.forEach((attribute) => {\n if (clone.hasAttribute) {\n clone.removeAttribute(attribute);\n }\n });\n\n this._internalBtnContainer.innerHTML = clone.outerHTML;\n this._externalBtnObserver.observe(this._externalBtn, externalBtnObserverConfig);\n\n this._externalBtn.addEventListener(\"click\", this._externalBtnClickHandler);\n }\n\n _isValidLightDom() {\n if (!this.hasLightDOM()) {\n this.warn(`You must have a button in the light DOM`);\n return false;\n }\n if (this.children[0].tagName !== \"BUTTON\") {\n this.warn(`The only child in the light DOM must be a button tag`);\n\n return false;\n }\n\n return true;\n }\n\n // when the parent changes, make sure the light DOM is valid,\n // initialize the component\n _parentObserverHandler() {\n if (!this._isValidLightDom()) {\n return;\n }\n\n this._init();\n }\n\n // programmatically clicking the _externalBtn is what makes\n // this web component button work in a form as you'd expect\n _clickHandler() {\n this._externalBtn.click();\n }\n\n _externalBtnClickHandler() {\n this.emitEvent(PfeButton.events.click);\n }\n}\n\nPFElement.create(PfeButton);\n\nexport default PfeButton;\n"],"names":["parentObserverConfig","externalBtnObserverConfig","denylistAttributes","PfeButton","PFElement","default","title","type","namedSlot","items","oneOf","$ref","this","tag","PfeTypes","Content","String","Boolean","hasLightDOM","_init","_observer","observe","_externalBtn","_externalBtnObserver","removeEventListener","_clickHandler","disconnect","oldVal","newVal","setAttribute","removeAttribute","clone","_isValidLightDom","hasAttribute","cloneNode","forEach","attribute","_internalBtnContainer","innerHTML","outerHTML","addEventListener","_externalBtnClickHandler","children","tagName","warn","click","emitEvent","events","querySelector","PfeType","_this","bind","_parentObserverHandler","shadowRoot","MutationObserver","create"],"mappings":"kkCA+BMA,EAAuB,YAChB,GAMPC,EAA4B,gBACjB,cACH,WACH,aACE,GAOPC,EAAqB,CAAC,SAEtBC,+TAAkBC,s4KAwBb,4DAIA,yDAIA,0DA5BA,6CAYA,CAACC,QAAU,CAACC,MAAQ,eAAeC,KAAO,QAAQC,WAAY,EAAMC,MAAQ,CAACC,MAAQ,CAAC,CAACC,KAAO,gDAI9F,kDAgBA,OACKC,KAAKC,qDAKVT,EAAUU,SAASC,iDAInB,SACI,OACA,qBACDC,cACE,CAAC,UAAW,YAAa,WAAY,SAAU,uBAE7C,MACJA,cACE,CAAC,UAAW,YAAa,WAAY,SAAU,iBAChD,oBAEC,OACD,gBACDC,gBACE,WACE,yBAEN,OACG,YACDD,cACE,CAAC,SAAU,+JA0BnBJ,KAAKM,eAAeN,KAAKO,aAExBC,UAAUC,QAAQT,KAAMZ,GAEzBY,KAAKU,mBACFC,qBAAqBF,QAAQT,KAAKU,aAAcrB,2JAOlDuB,oBAAoB,QAASZ,KAAKa,oBAClCL,UAAUM,kBACVH,qBAAqBG,sDAGXC,EAAQC,GAClBhB,KAAKU,eAINM,OACGN,aAAaO,aAAa,WAAY,SAEtCP,aAAaQ,gBAAgB,iDAqB9BC,EAhBDnB,KAAKoB,oBAILpB,KAAKU,oBAILC,qBAAqBG,aAGtBd,KAAKU,aAAaW,aAAa,kBAE5BJ,aAAa,WAAY,IAG1BE,EAAQnB,KAAKU,aAAaY,WAAU,KACvBC,QAAQ,SAACC,GACtBL,EAAME,gBACFH,gBAAgBM,UAIrBC,sBAAsBC,UAAYP,EAAMQ,eACxChB,qBAAqBF,QAAQT,KAAKU,aAAcrB,QAEhDqB,aAAakB,iBAAiB,QAAS5B,KAAK6B,6EAI5C7B,KAAKM,cAIuB,WAA7BN,KAAK8B,SAAS,GAAGC,eACdC,8DAEE,SANFA,iDACE,oDAcJhC,KAAKoB,yBAILb,qDAMAG,aAAauB,gEAIbC,UAAU3C,EAAU4C,OAAOF,mDAhGzBjC,KAAKoC,cAAc,uGAdpB7C,EAAW,CAAEI,KAAMJ,EAAU8C,oBAE9B9B,MAAQ+B,EAAK/B,MAAMgC,UACnBC,uBAAyBF,EAAKE,uBAAuBD,UACrD1B,cAAgByB,EAAKzB,cAAc0B,UACnCd,sBAAwBa,EAAKG,WAAWL,cAAc,kBACtD5B,UAAY,IAAIkC,iBAAiBJ,EAAKE,0BACtCX,yBAA2BS,EAAKT,yBAAyBU,UACzD5B,qBAAuB,IAAI+B,iBAAiBJ,EAAK/B,SAEjDqB,iBAAiB,QAASU,EAAKzB,wBAwGxCrB,EAAUmD,OAAOpD"} \ No newline at end of file diff --git a/elements/pfe-button/package.json b/elements/pfe-button/package.json index c8c1830f73..78a6efb814 100644 --- a/elements/pfe-button/package.json +++ b/elements/pfe-button/package.json @@ -12,7 +12,7 @@ "assets": [], "preview": "button.svg" }, - "version": "1.12.2", + "version": "1.12.3", "keywords": [ "web-components", "html" @@ -57,10 +57,10 @@ ], "license": "MIT", "devDependencies": { - "@patternfly/pfe-sass": "^1.12.2" + "@patternfly/pfe-sass": "^1.12.3" }, "dependencies": { - "@patternfly/pfelement": "^1.12.2" + "@patternfly/pfelement": "^1.12.3" }, "bugs": { "url": "https://github.com/patternfly/patternfly-elements/issues" diff --git a/elements/pfe-card/dist/pfe-card--lightdom.css b/elements/pfe-card/dist/pfe-card--lightdom.css new file mode 100644 index 0000000000..bac8a70bdc --- /dev/null +++ b/elements/pfe-card/dist/pfe-card--lightdom.css @@ -0,0 +1,8 @@ +@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + /* IE10+ */ + pfe-card img[overflow] { + max-width: 100%; + } +} + +/*# sourceMappingURL=pfe-card--lightdom.css.map */ diff --git a/elements/pfe-card/dist/pfe-card--lightdom.css.map b/elements/pfe-card/dist/pfe-card--lightdom.css.map new file mode 100644 index 0000000000..40033769e4 --- /dev/null +++ b/elements/pfe-card/dist/pfe-card--lightdom.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../pfe-sass/mixins/_mixins.scss","pfe-card--lightdom.scss","pfe-card--lightdom.css"],"names":[],"mappings":"AAGM;EAAsF,UAAA;ECCxF;IACI,eAAe;ECDrB;AACF","file":"pfe-card--lightdom.css","sourcesContent":["@mixin browser-query($browser-list) {\n @each $browser in $browser-list {\n @if $browser == ie11 {\n @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { /* IE10+ */\n @content;\n }\n }\n @if $browser == edge12 {\n @supports (-ms-accelerator: true) { /* Microsoft Edge Browser 12+ */\n @content;\n }\n }\n @if $browser == edge {\n @supports (-ms-ime-align: auto) { /* Microsoft Edge Browser 16+ (All) */\n @content;\n }\n }\n @if $browser == firefox {\n @media all and (min--moz-device-pixel-ratio:0) { /* Mozilla Firefox (All) */\n @content;\n }\n }\n }\n}\n\n@mixin pfe-transition($properties...) {\n $return: null;\n @each $property in $properties {\n @if length($property) == 1 {\n $return: append($return, #{$property} 250ms $pfe-global--animation-timing, comma);\n }\n @else if length($property) == 2 {\n $return: append($return, nth($property, 1) nth($property, 2), comma);\n }\n }\n transition: $return;\n}\n\n// Make a CSS arrow\n@mixin pfe-arrow($type, $color, $width: 8px, $height: 5px, $pseudo: false) {\n $direction: (\n up: 180deg,\n down: 0deg,\n right: -90deg,\n left: 90deg,\n );\n border-style: pfe-var(surface--border-style);\n border-width: $width $height 0;\n border-color: transparent;\n border-top-color: $color;\n transform: rotate(map-get($direction, $type));\n @if $pseudo {\n display: inline-block;\n content: \"\";\n @content;\n }\n}\n\n@mixin pfe-arrow-color($color) {\n border-top-color: $color;\n}\n\n@mixin pfe-print-media {\n @media print {\n @content;\n }\n}\n\n@mixin pfe-print-background {\n -webkit-print-color-adjust: exact;\n color-adjust: exact;\n}\n\n@mixin pfe-no-print-background {\n @include pfe-print-media {\n background-color: white !important;\n background-image: none !important;\n box-shadow: none !important;\n }\n}\n\n@mixin pfe-hidden {\n @at-root #{&}([hidden]) {\n display: none;\n }\n}\n\n@mixin pfe-pipe( $position: right, $padding: 0, $margin: 0, $color: $border-color) {\n border: pfe-var(surface--border-width) pfe-var(surface--border-style) transparent;\n border-#{$position}-color: $color;\n @if $position == right {\n padding-left: $padding;\n margin-right: $margin;\n }\n @else if $position == left {\n padding-right: $padding;\n margin-left: $margin;\n }\n}\n\n@mixin pfe-retina {\n @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n @content;\n }\n}\n\n@mixin pfe-icon($path, $display: flex, $size: 1em) {\n display: #{$display};\n @if $path {\n background: #{$path} no-repeat;\n background-size: contain;\n background-position: center;\n }\n width: #{$size};\n height: #{$size};\n @content;\n}\n\n@mixin pfe-local-debug($map: $LOCAL-VARIABLES) {\n :root {\n @include pfe-print-local($map);\n }\n} ","@import \"../../pfe-sass/pfe-sass\";\n$LOCAL: card;\n\n@include browser-query(ie11) {\n pfe-card img[overflow] {\n max-width: 100%;\n }\n}\n","@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n /* IE10+ */\n pfe-card img[overflow] {\n max-width: 100%;\n }\n}\n"],"sourceRoot":"../src"} \ No newline at end of file diff --git a/elements/pfe-card/dist/pfe-card--lightdom.min.css b/elements/pfe-card/dist/pfe-card--lightdom.min.css new file mode 100644 index 0000000000..453952fbe0 --- /dev/null +++ b/elements/pfe-card/dist/pfe-card--lightdom.min.css @@ -0,0 +1,2 @@ +@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){pfe-card img[overflow]{max-width:100%}} +/*# sourceMappingURL=pfe-card--lightdom.min.css.map */ diff --git a/elements/pfe-card/dist/pfe-card--lightdom.min.css.map b/elements/pfe-card/dist/pfe-card--lightdom.min.css.map new file mode 100644 index 0000000000..afbc18e81c --- /dev/null +++ b/elements/pfe-card/dist/pfe-card--lightdom.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../pfe-sass/mixins/_mixins.scss","../../src/pfe-card--lightdom.scss"],"names":[],"mappings":"AAGM,6CAAA,oCCCF,uBACI,UAAA","file":"pfe-card--lightdom.min.css","sourceRoot":"../src","sourcesContent":[]} \ No newline at end of file diff --git a/elements/pfe-card/dist/pfe-card.css.map b/elements/pfe-card/dist/pfe-card.css.map new file mode 100644 index 0000000000..fdbd115a6a --- /dev/null +++ b/elements/pfe-card/dist/pfe-card.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../pfe-sass/mixins/_mixins.scss","../../pfe-sass/mixins/_custom-properties.scss","../../pfe-sass/extends/_extends.scss","pfe-card.css","pfe-card.scss","../../pfe-sass/functions/_custom-properties.scss","../../../node_modules/@patternfly/patternfly/sass-utilities/scss-variables.scss","../../../node_modules/@patternfly/patternfly/sass-utilities/colors.scss"],"names":[],"mappings":"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CAAmD;EAAnD,wGAAmD;EAGnD,iBCtHgC;EDsHhC,mHCtHgC;EDuHhC,6BCvHgC;EDuHhC,gGCvHgC;EDwHhC,4BCxHgC;EDwHhC,8FCxHgC;EDyHhC,oBCzHgC;EDyHhC,sHCzHgC;AFgKpC;;AC1DI;EAEE,2CCxG8B;EDwG9B,sHCxG8B;AFoKpC;;AHhPM;EI6KJ;IJ7K0F,UAAA;IIuLtF,iCAAyD;IACzD,yBAAiC;ED+DrC;AACF;;ACjDI;EACE,6BC5H8B;ED4H9B,iGC5H8B;AFgLpC;;AC/EG;;EAgCG,2HAAgC;ADoDtC;;ACjDI;EACE,aAAa;ADoDnB;;ACjDI;;EAEE,qJAAmC;ADoDzC;;AC7FG;;EA8CG,iIAAmC;ADoDzC;;AClGG;EAmDK,gBAAgB;ADmDxB;;ACtGG;EAmDK,gBAAgB;ADuDxB;;AC1GG;EAmDK,gBAAgB;AD2DxB;;AC9GG;EAmDK,gBAAgB;AD+DxB;;AClHG;EAmDK,gBAAgB;ADmExB;;ACtHG;EAmDK,gBAAgB;ADuExB;;AClEI;;EAEE,2HAAgC;ADqEtC;;ACxEG;;EAQG,UAAU;EACV,kJAAgC;ADqEtC;;AC9EG;;EAcG,iIAAmC;ADqEzC;;AClEI;;EAEE,qJAAmC;ADqEzC;;AClEI;EACE,gBAAgB;ADqEtB;;AClEE;EACE,gBAAgB;EAEhB,oBAAa;EAAb,qBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,8BCtLgC;EDsLhC,6BCtLgC;EDsLhC,2BCtLgC;MDsLhC,uBCtLgC;UDsLhC,mBCtLgC;EDsLhC,iDCtLgC;EDuLhC,uBCvLgC;MDuLhC,mBCvLgC;UDuLhC,eCvLgC;EDuLhC,sDCvLgC;MDuLhC,kDCvLgC;UDuLhC,8CCvLgC;EDyLhC,2BCzLgC;EDyLhC,6BCzLgC;MDyLhC,wBCzLgC;UDyLhC,qBCzLgC;EDyLhC,gECzLgC;EDyLhC,kECzLgC;MDyLhC,6DCzLgC;UDyLhC,0DCzLgC;AF4PpC;;AC1EG;;EAWG,iIAAmC;ADoEzC;;ACjEI;EACE,aAAa;ADoEnB;;ACjEE;EAEE,mBCtMgC;EDsMhC,qHCtMgC;AFyQpC;;ACrEG;EASK,aAAa;ADgErB;;ACzEG;EASK,aAAa;ADoErB;;AC7EG;EASK,aAAa;ADwErB;;ACjFG;EASK,aAAa;AD4ErB;;ACrFG;EASK,aAAa;ADgFrB;;ACzFG;EASK,aAAa;ADoFrB;;AC7FG;EASK,aAAa;ADwFrB","file":"pfe-card.css","sourcesContent":["@mixin browser-query($browser-list) {\n @each $browser in $browser-list {\n @if $browser == ie11 {\n @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { /* IE10+ */\n @content;\n }\n }\n @if $browser == edge12 {\n @supports (-ms-accelerator: true) { /* Microsoft Edge Browser 12+ */\n @content;\n }\n }\n @if $browser == edge {\n @supports (-ms-ime-align: auto) { /* Microsoft Edge Browser 16+ (All) */\n @content;\n }\n }\n @if $browser == firefox {\n @media all and (min--moz-device-pixel-ratio:0) { /* Mozilla Firefox (All) */\n @content;\n }\n }\n }\n}\n\n@mixin pfe-transition($properties...) {\n $return: null;\n @each $property in $properties {\n @if length($property) == 1 {\n $return: append($return, #{$property} 250ms $pfe-global--animation-timing, comma);\n }\n @else if length($property) == 2 {\n $return: append($return, nth($property, 1) nth($property, 2), comma);\n }\n }\n transition: $return;\n}\n\n// Make a CSS arrow\n@mixin pfe-arrow($type, $color, $width: 8px, $height: 5px, $pseudo: false) {\n $direction: (\n up: 180deg,\n down: 0deg,\n right: -90deg,\n left: 90deg,\n );\n border-style: pfe-var(surface--border-style);\n border-width: $width $height 0;\n border-color: transparent;\n border-top-color: $color;\n transform: rotate(map-get($direction, $type));\n @if $pseudo {\n display: inline-block;\n content: \"\";\n @content;\n }\n}\n\n@mixin pfe-arrow-color($color) {\n border-top-color: $color;\n}\n\n@mixin pfe-print-media {\n @media print {\n @content;\n }\n}\n\n@mixin pfe-print-background {\n -webkit-print-color-adjust: exact;\n color-adjust: exact;\n}\n\n@mixin pfe-no-print-background {\n @include pfe-print-media {\n background-color: white !important;\n background-image: none !important;\n box-shadow: none !important;\n }\n}\n\n@mixin pfe-hidden {\n @at-root #{&}([hidden]) {\n display: none;\n }\n}\n\n@mixin pfe-pipe( $position: right, $padding: 0, $margin: 0, $color: $border-color) {\n border: pfe-var(surface--border-width) pfe-var(surface--border-style) transparent;\n border-#{$position}-color: $color;\n @if $position == right {\n padding-left: $padding;\n margin-right: $margin;\n }\n @else if $position == left {\n padding-right: $padding;\n margin-left: $margin;\n }\n}\n\n@mixin pfe-retina {\n @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n @content;\n }\n}\n\n@mixin pfe-icon($path, $display: flex, $size: 1em) {\n display: #{$display};\n @if $path {\n background: #{$path} no-repeat;\n background-size: contain;\n background-position: center;\n }\n width: #{$size};\n height: #{$size};\n @content;\n}\n\n@mixin pfe-local-debug($map: $LOCAL-VARIABLES) {\n :root {\n @include pfe-print-local($map);\n }\n} ","////\n/// Tools for leveraging custom property stacks\n/// @group custom-properties\n/// @author castastrophe\n////\n\n/// This will print all the broadcast variables, and set the value to the context of your choosing, like on-dark or on-saturated.\n/// @param {String} $context - Look up values from contexts, i.e. \"light\" or \"saturated\"\n/// @param {List | String} $broadcast [$BROADCAST-VARS] - Optionally specify only one broadcast variable instead of the whole set, i.e. \"text\"\n/// @see $custom-prop-prefix\n/// @see $BROADCAST-VARS\n/// @example - scss - Usage in a container component, i.e. pfe-card\n/// :host {\n/// @include pfe-set-broadcast-context(dark);\n/// }\n/// @example - css - Rendered output\n/// :host {\n/// --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff);\n/// --pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #99ccff);\n/// --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #cce6ff);\n/// --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #cce6ff);\n/// --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #b38cd9);\n/// --pfe-broadcasted--link-decoration: none;\n/// --pfe-broadcasted--link-decoration--hover: underline;\n/// --pfe-broadcasted--link-decoration--focus: underline;\n/// --pfe-broadcasted--link-decoration--visited: none;\n/// }\n///\n@mixin pfe-set-broadcast-context($context, $broadcast: $BROADCAST-VARS) {\n @each $type in $broadcast {\n $list: ();\n $string: \"\";\n $context_string: \"\";\n $state: \"\";\n\n @if str-starts-with($type, \"link\") {\n $list: append($list, \"#{$type}\");\n\n @each $s in (hover, focus, visited) {\n $state: \"--#{$s}\";\n $string: \"#{$type}#{$state}\";\n\n @if not index($list, $string) {\n $list: append($list, \"#{$type}#{$state}\");\n }\n }\n } @else {\n @if not index($list, $string) {\n $list: append($list, \"#{$type}\");\n }\n }\n\n @if index($CONTEXTS, $context) != null {\n @if $context != \"light\" {\n $context_string: \"--on-#{$context}\";\n }\n }\n\n @each $item in $list {\n @if not index($BROADCAST-VARS, $type) {\n @warn \"--#{$custom-prop-prefix}-broadcasted--#{$item} variable is not in the $BROADCAST-VARS list.\";\n } @else if not pfe-broadcasted(#{$item}#{$context_string}) {\n @warn \"#{$item}#{$context_string} value does not currently exist.\";\n } @else {\n @if index($CONTEXTS, $context) != null {\n --#{$custom-prop-prefix}-broadcasted--#{$item}: #{pfe-var(#{$item}#{$context_string})};\n } @else {\n @error \"The #{$context} context does not appear to be part of a supported context.\";\n }\n }\n }\n }\n}\n\n/// Returns CSS Variable for the local component-scoped variable\n/// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--'\n/// @param {String} $value - The value of the css variable being defined\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $custom-prop-prefix\n/// @see $LOCAL\n/// @example - scss\n/// :host {\n/// padding-top: pfe-local(paddingTop);\n/// padding-bottom: pfe-local(paddingBottom);\n/// }\n@mixin pfe-print-local($map: $LOCAL-VARIABLES) {\n @each $property, $value in $map {\n $name: \"--#{$property}\";\n $styles: $value;\n\n @if type-of($value) == \"map\" {\n @each $prop, $v in $value {\n $name: \"__#{$property}--#{$prop}\";\n $styles: $v;\n\n // Print the variable definition\n --#{$custom-prop-prefix}-#{$LOCAL}#{$name}: #{$styles};\n }\n } @else {\n // Print the variable definition\n --#{$custom-prop-prefix}-#{$LOCAL}#{$name}: #{$styles};\n }\n }\n}\n\n/// Surface properties\n/// This mixin creates an attribute for all the surface colors, then prints the local background color variable for the component, with the correct context colors.\n/// @param {List | String} $surfaces [$SURFACES] - defaults to the global $SURFACES list of all supported colors\n/// @param {String} $attr-name [pfe-var] - defaults to pfe-var, optionally pass in a custom name for the data attribute\n/// @example - scss - In your component stylesheet\n/// $LOCAL: band;\n/// @include pfe-surfaces;\n/// @example - css - Rendered result\n/// :host([color=\"darker\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--darker, #464646);\n/// --context: dark;\n/// }\n/// :host([color=\"darkest\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--darkest, #131313);\n/// --context: dark;\n/// }\n/// :host([color=\"base\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--base, #dfdfdf);\n/// --context: light;\n/// }\n/// :host([color=\"lighter\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--lighter, #ececec);\n/// --context: light;\n/// }\n/// :host([color=\"lightest\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--lightest, #fff);\n/// --context: light;\n/// }\n/// :host([color=\"accent\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--accent, #ee0000);\n/// --context: saturated;\n/// }\n/// :host([color=\"complement\"]) {\n/// --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--complement, #0477a4);\n/// --context: saturated;\n/// }\n@mixin pfe-surfaces($surfaces: $SURFACE, $attr-name: color) {\n @each $color in $surfaces {\n $context: #{pfe-get-context(surface--#{$color}--context)};\n :host([#{$attr-name}=\"#{$color}\"]) {\n @include pfe-print-local(\n (\n BackgroundColor: pfe-var(surface--#{$color}),\n context: pfe-var(surface--#{$color}--context, #{$context})\n )\n );\n @extend %fallback-surface;\n }\n }\n}\n\n/// Prints the `on` attribute with IE11 fallbacks\n/// @param {List} contexts [$CONTEXTS] - defaults to the global $CONTEXTS list of all supported contexts\n/// @param {Boolean} ie-fallback [true] - defaults to true, prints IE11 fallbacks\n/// @example - scss - In your component styles\n/// @include pfe-contexts; // imports on=\"light\" etc support\n/// @example - css - Rendered outputs\n/// :host([on=\"dark\"]) {\n/// --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff);\n/// --pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #99ccff);\n/// --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #cce6ff);\n/// --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #cce6ff);\n/// --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #b38cd9);\n/// --pfe-broadcasted--link-decoration: none;\n/// --pfe-broadcasted--link-decoration--hover: underline;\n/// --pfe-broadcasted--link-decoration--focus: underline;\n/// --pfe-broadcasted--link-decoration--visited: none;\n/// }\n/// @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { /* IE10+ */\n/// :host([on=\"dark\"]) {\n/// color: #fff;\n/// color: var(--pfe-theme--color--text--on-dark, #fff);\n/// }\n/// }\n/// // ...as well as all the values for :host([on=\"saturated\"]) and :host([on=\"light\"])\n@mixin pfe-contexts($contexts: $CONTEXTS, $ie-fallback: true) {\n // Helper attributes to aid in theming\n @each $context in $contexts {\n :host([on=\"#{$context}\"]) {\n @include pfe-set-broadcast-context($context);\n }\n }\n @if $ie-fallback {\n :host {\n @extend %fallback-text;\n }\n }\n}\n","// @todo Change to mixins; no efficiency gain with placeholders in web components\n\n/// Clear box element styles\n%reset-box {\n margin: 0;\n padding: 0;\n}\n\n/// Clear list styles\n%reset-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n/// Clear button styles\n%reset-button {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n text-align: left;\n}\n\n/// Set up a container element\n%container {\n position: relative;\n display: block;\n width: 100%;\n padding: pfe-var(container-padding);\n}\n\n/// Screen-reader only content\n%sr-only {\n position: absolute;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n}\n\n/// Fallback surface styles for IE11 only\n%fallback-surface {\n @include browser-query(ie11) {\n background-color: pfe-fetch(surface--lightest) !important;\n color: pfe-fetch(text) !important;\n }\n}\n\n/// Fallback text styles for IE11 only\n%fallback-text {\n @include browser-query(ie11) {\n color: pfe-fetch(text) !important;\n }\n}\n","@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n :host([color=\"darker\"]), :host([color=\"darkest\"]), :host([color=\"base\"]), :host([color=\"lighter\"]), :host([color=\"lightest\"]), :host([color=\"accent\"]), :host([color=\"complement\"]) {\n /* IE10+ */\n background-color: #fff !important;\n color: #151515 !important;\n }\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n :host {\n /* IE10+ */\n color: #151515 !important;\n }\n}\n\n:host {\n --context: var(--pfe-card--context, var(--pfe-theme--color--surface--base--context, light));\n display: flex;\n flex-direction: column;\n justify-items: flex-start;\n align-self: stretch;\n padding: var(--pfe-card--Padding, var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) var(--pfe-card--PaddingRight, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) var(--pfe-card--PaddingLeft, calc(var(--pfe-theme--container-spacer, 1rem) * 2)));\n border: var(--pfe-card--Border, var(--pfe-card--BorderWidth, 0) var(--pfe-card--BorderStyle, solid) var(--pfe-card--BorderColor, var(--pfe-theme--color--surface--border, #d2d2d2)));\n border-radius: var(--pfe-card--BorderRadius, var(--pfe-theme--surface--border-radius, 3px));\n overflow: hidden;\n background-color: var(--pfe-card--BackgroundColor, var(--pfe-theme--color--surface--base, #f0f0f0));\n background-position: var(--pfe-card--BackgroundPosition, center center);\n color: var(--pfe-broadcasted--text, #3c3f42);\n}\n\n@media print {\n :host {\n background-color: white !important;\n background-image: none !important;\n box-shadow: none !important;\n }\n}\n\n@media print {\n :host {\n border-radius: 3px;\n border: 1px solid #d2d2d2;\n }\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n :host {\n /* IE10+ */\n background-color: var(--pfe-theme--color--surface--lightest, #fff) !important;\n color: var(--pfe-theme--color--text, #151515) !important;\n background-image: none !important;\n border-radius: 3px;\n border: 1px solid #d2d2d2;\n padding: var(--pfe-theme--container-spacer, 1rem);\n }\n}\n\n:host([color=\"darker\"]) {\n --pfe-card--BackgroundColor: var(--pfe-theme--color--surface--darker, #3c3f42);\n --pfe-card--context: var(--pfe-theme--color--surface--darker--context, dark);\n}\n\n:host([color=\"darkest\"]) {\n --pfe-card--BackgroundColor: var(--pfe-theme--color--surface--darkest, #151515);\n --pfe-card--context: var(--pfe-theme--color--surface--darkest--context, dark);\n}\n\n:host([color=\"base\"]) {\n --pfe-card--BackgroundColor: var(--pfe-theme--color--surface--base, #f0f0f0);\n --pfe-card--context: var(--pfe-theme--color--surface--base--context, light);\n}\n\n:host([color=\"lighter\"]) {\n --pfe-card--BackgroundColor: var(--pfe-theme--color--surface--lighter, #f0f0f0);\n --pfe-card--context: var(--pfe-theme--color--surface--lighter--context, light);\n}\n\n:host([color=\"lightest\"]) {\n --pfe-card--BackgroundColor: var(--pfe-theme--color--surface--lightest, #fff);\n --pfe-card--context: var(--pfe-theme--color--surface--lightest--context, light);\n}\n\n:host([color=\"accent\"]) {\n --pfe-card--BackgroundColor: var(--pfe-theme--color--surface--accent, #004080);\n --pfe-card--context: var(--pfe-theme--color--surface--accent--context, saturated);\n}\n\n:host([color=\"complement\"]) {\n --pfe-card--BackgroundColor: var(--pfe-theme--color--surface--complement, #002952);\n --pfe-card--context: var(--pfe-theme--color--surface--complement--context, saturated);\n}\n\n:host([on=\"dark\"]) {\n --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff);\n --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted--on-dark, #d2d2d2);\n --pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #73bcf7);\n --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #bee1f4);\n --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #bee1f4);\n --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #bee1f4);\n --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration--on-dark, none);\n --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover--on-dark, underline);\n --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus--on-dark, underline);\n --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited--on-dark, none);\n}\n\n:host([on=\"saturated\"]) {\n --pfe-broadcasted--text: var(--pfe-theme--color--text--on-saturated, #fff);\n --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2);\n --pfe-broadcasted--link: var(--pfe-theme--color--link--on-saturated, #fff);\n --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-saturated, #fafafa);\n --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-saturated, #fafafa);\n --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);\n --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration--on-saturated, underline);\n --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover--on-saturated, underline);\n --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus--on-saturated, underline);\n --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited--on-saturated, underline);\n}\n\n:host([on=\"light\"]) {\n --pfe-broadcasted--text: var(--pfe-theme--color--text, #151515);\n --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted, #6a6e73);\n --pfe-broadcasted--link: var(--pfe-theme--color--link, #06c);\n --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover, #004080);\n --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus, #004080);\n --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited, #6753ac);\n --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration, none);\n --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover, underline);\n --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus, underline);\n --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited, none);\n}\n\n:host([size=\"small\"]) {\n --pfe-card--PaddingTop: var(--pfe-theme--container-spacer, 1rem);\n --pfe-card--PaddingRight: var(--pfe-theme--container-spacer, 1rem);\n --pfe-card--PaddingBottom: var(--pfe-theme--container-spacer, 1rem);\n --pfe-card--PaddingLeft: var(--pfe-theme--container-spacer, 1rem);\n}\n\n:host([border]:not([border=\"false\"])) {\n --pfe-card--BorderWidth: 1px;\n}\n\n.pfe-card__header ::slotted([pfe-overflow~=\"top\"]),\n.pfe-card__header ::slotted([overflow~=\"top\"]), .pfe-card__body ::slotted([pfe-overflow~=\"top\"]),\n.pfe-card__body ::slotted([overflow~=\"top\"]), .pfe-card__footer ::slotted([pfe-overflow~=\"top\"]),\n.pfe-card__footer ::slotted([overflow~=\"top\"]) {\n z-index: 1;\n margin-top: -2rem;\n margin-top: calc(-1 * var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 1rem) * 2))) !important;\n}\n\n:host([has_header]) .pfe-card__header ::slotted([pfe-overflow~=\"top\"]), :host([has_header])\n.pfe-card__header ::slotted([overflow~=\"top\"]), :host([has_header]) .pfe-card__body ::slotted([pfe-overflow~=\"top\"]), :host([has_header])\n.pfe-card__body ::slotted([overflow~=\"top\"]), :host([has_header]) .pfe-card__footer ::slotted([pfe-overflow~=\"top\"]), :host([has_header])\n.pfe-card__footer ::slotted([overflow~=\"top\"]) {\n padding-top: var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem));\n}\n\n.pfe-card__header ::slotted([pfe-overflow~=\"right\"]),\n.pfe-card__header ::slotted([overflow~=\"right\"]), .pfe-card__body ::slotted([pfe-overflow~=\"right\"]),\n.pfe-card__body ::slotted([overflow~=\"right\"]), .pfe-card__footer ::slotted([pfe-overflow~=\"right\"]),\n.pfe-card__footer ::slotted([overflow~=\"right\"]) {\n margin-right: -2rem;\n margin-right: calc(-1 * var(--pfe-card--PaddingRight, calc(var(--pfe-theme--container-spacer, 1rem) * 2)));\n}\n\n.pfe-card__header ::slotted([pfe-overflow~=\"bottom\"]),\n.pfe-card__header ::slotted([overflow~=\"bottom\"]), .pfe-card__body ::slotted([pfe-overflow~=\"bottom\"]),\n.pfe-card__body ::slotted([overflow~=\"bottom\"]), .pfe-card__footer ::slotted([pfe-overflow~=\"bottom\"]),\n.pfe-card__footer ::slotted([overflow~=\"bottom\"]) {\n margin-bottom: -2rem;\n margin-bottom: calc(-1 * calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) + var(--pfe-card--BorderRadius, var(--pfe-theme--surface--border-radius, 3px))));\n align-self: flex-end;\n}\n\n.pfe-card__header ::slotted([pfe-overflow~=\"left\"]),\n.pfe-card__header ::slotted([overflow~=\"left\"]), .pfe-card__body ::slotted([pfe-overflow~=\"left\"]),\n.pfe-card__body ::slotted([overflow~=\"left\"]), .pfe-card__footer ::slotted([pfe-overflow~=\"left\"]),\n.pfe-card__footer ::slotted([overflow~=\"left\"]) {\n margin-left: -2rem;\n margin-left: calc(-1 * var(--pfe-card--PaddingLeft, calc(var(--pfe-theme--container-spacer, 1rem) * 2)));\n}\n\n.pfe-card__header ::slotted(img), .pfe-card__body ::slotted(img), .pfe-card__footer ::slotted(img) {\n max-width: 100% !important;\n align-self: flex-start;\n object-fit: cover;\n}\n\n.pfe-card__header ::slotted(img:not[pfe-overflow]),\n.pfe-card__header ::slotted(img:not[overflow]), .pfe-card__body ::slotted(img:not[pfe-overflow]),\n.pfe-card__body ::slotted(img:not[overflow]), .pfe-card__footer ::slotted(img:not[pfe-overflow]),\n.pfe-card__footer ::slotted(img:not[overflow]) {\n align-self: flex-start;\n}\n\n.pfe-card__header ::slotted(img[pfe-overflow]),\n.pfe-card__header ::slotted(img[overflow]), .pfe-card__body ::slotted(img[pfe-overflow]),\n.pfe-card__body ::slotted(img[overflow]), .pfe-card__footer ::slotted(img[pfe-overflow]),\n.pfe-card__footer ::slotted(img[overflow]) {\n max-width: unset !important;\n}\n\n.pfe-card__header ::slotted(img[pfe-overflow~=\"right\"]),\n.pfe-card__header ::slotted(img[overflow~=\"right\"]), .pfe-card__body ::slotted(img[pfe-overflow~=\"right\"]),\n.pfe-card__body ::slotted(img[overflow~=\"right\"]), .pfe-card__footer ::slotted(img[pfe-overflow~=\"right\"]),\n.pfe-card__footer ::slotted(img[overflow~=\"right\"]) {\n width: calc(100% + 2rem) !important;\n width: calc(100% + var(--pfe-card--PaddingRight, calc(var(--pfe-theme--container-spacer, 1rem) * 2))) !important;\n}\n\n.pfe-card__header ::slotted(img[pfe-overflow~=\"left\"]),\n.pfe-card__header ::slotted(img[overflow~=\"left\"]), .pfe-card__body ::slotted(img[pfe-overflow~=\"left\"]),\n.pfe-card__body ::slotted(img[overflow~=\"left\"]), .pfe-card__footer ::slotted(img[pfe-overflow~=\"left\"]),\n.pfe-card__footer ::slotted(img[overflow~=\"left\"]) {\n width: calc(100% + 2rem) !important;\n width: calc(100% + var(--pfe-card--PaddingLeft, calc(var(--pfe-theme--container-spacer, 1rem) * 2))) !important;\n}\n\n.pfe-card__header ::slotted(img[pfe-overflow~=\"right\"][pfe-overflow~=\"left\"]),\n.pfe-card__header ::slotted(img[overflow~=\"right\"][overflow~=\"left\"]), .pfe-card__body ::slotted(img[pfe-overflow~=\"right\"][pfe-overflow~=\"left\"]),\n.pfe-card__body ::slotted(img[overflow~=\"right\"][overflow~=\"left\"]), .pfe-card__footer ::slotted(img[pfe-overflow~=\"right\"][pfe-overflow~=\"left\"]),\n.pfe-card__footer ::slotted(img[overflow~=\"right\"][overflow~=\"left\"]) {\n width: calc(100% + 4rem) !important;\n width: calc(100% + var(--pfe-card--PaddingRight, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) + var(--pfe-card--PaddingLeft, calc(var(--pfe-theme--container-spacer, 1rem) * 2))) !important;\n}\n\n.pfe-card__header {\n z-index: 2;\n background-color: var(--pfe-card__header--BackgroundColor, rgba(0, 0, 0, var(--pfe-theme--opacity, 0.09)));\n color: var(--pfe-card__header--Color, var(--pfe-broadcasted--text, #3c3f42));\n margin-top: calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1) !important;\n margin-right: calc(var(--pfe-card--PaddingRight, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1);\n margin-bottom: var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem)));\n margin-left: calc(var(--pfe-card--PaddingLeft, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1);\n padding-top: var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem)));\n padding-right: var(--pfe-card--PaddingRight, calc(var(--pfe-theme--container-spacer, 1rem) * 2));\n padding-left: var(--pfe-card--PaddingLeft, calc(var(--pfe-theme--container-spacer, 1rem) * 2));\n padding-bottom: var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem)));\n}\n\n:host([on=\"dark\"]) .pfe-card__header {\n background-color: var(--pfe-card__header--BackgroundColor--dark, rgba(255, 255, 255, var(--pfe-theme--opacity, 0.09)));\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n .pfe-card__header {\n /* IE10+ */\n background-color: #fff !important;\n color: #151515 !important;\n }\n}\n\n:host(:not([has_body]):not([has_footer])) .pfe-card__header {\n margin-bottom: var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2));\n}\n\n.pfe-card__header ::slotted([pfe-overflow~=\"top\"]),\n.pfe-card__header ::slotted([overflow~=\"top\"]) {\n --pfe-card__overflow--MarginTop: calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1);\n}\n\n:host(:not([has_header])) .pfe-card__header {\n display: none;\n}\n\n:host([has_body], [has_footer]) .pfe-card__header ::slotted([pfe-overflow~=\"bottom\"]),\n:host([has_body], [has_footer]) .pfe-card__header ::slotted([overflow~=\"bottom\"]) {\n --pfe-card__overflow--MarginBottom: calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem))) * -1);\n}\n\n.pfe-card__header ::slotted([pfe-overflow~=\"bottom\"]),\n.pfe-card__header ::slotted([overflow~=\"bottom\"]) {\n --pfe-card__overflow--MarginBottom: calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1);\n}\n\n.pfe-card__header ::slotted(h1) {\n margin-bottom: 0;\n}\n\n.pfe-card__header ::slotted(h2) {\n margin-bottom: 0;\n}\n\n.pfe-card__header ::slotted(h3) {\n margin-bottom: 0;\n}\n\n.pfe-card__header ::slotted(h4) {\n margin-bottom: 0;\n}\n\n.pfe-card__header ::slotted(h5) {\n margin-bottom: 0;\n}\n\n.pfe-card__header ::slotted(h6) {\n margin-bottom: 0;\n}\n\n:host(:not([has_header])) .pfe-card__body ::slotted([pfe-overflow~=\"top\"]),\n:host(:not([has_header])) .pfe-card__body ::slotted([overflow~=\"top\"]) {\n --pfe-card__overflow--MarginTop: calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1);\n}\n\n.pfe-card__body ::slotted([pfe-overflow~=\"top\"]),\n.pfe-card__body ::slotted([overflow~=\"top\"]) {\n z-index: 1;\n --pfe-card__overflow--MarginTop: calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem))) * -1);\n}\n\n.pfe-card__body ::slotted([pfe-overflow~=\"bottom\"]),\n.pfe-card__body ::slotted([overflow~=\"bottom\"]) {\n --pfe-card__overflow--MarginBottom: calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1);\n}\n\n:host([has_footer]) .pfe-card__body ::slotted([pfe-overflow~=\"bottom\"]),\n:host([has_footer]) .pfe-card__body ::slotted([overflow~=\"bottom\"]) {\n --pfe-card__overflow--MarginBottom: calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem))) * -1);\n}\n\n:host(:not([has_footer])) .pfe-card__body {\n margin-bottom: 0;\n}\n\n.pfe-card__footer {\n margin-top: auto;\n display: flex;\n flex-direction: var(--pfe-card__footer--Row, row);\n flex-wrap: var(--pfe-card__footer--Wrap, wrap);\n align-items: var(--pfe-card__footer--AlignItems, baseline);\n}\n\n.pfe-card__footer ::slotted([pfe-overflow~=\"bottom\"]),\n.pfe-card__footer ::slotted([overflow~=\"bottom\"]) {\n --pfe-card__overflow--MarginBottom: calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1);\n}\n\n:host(:not([has_footer])) .pfe-card__footer {\n display: none;\n}\n\n.pfe-card__header, .pfe-card__body {\n margin-bottom: var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem)));\n}\n\n.pfe-card__header ::slotted(p:first-child), .pfe-card__body ::slotted(p:first-child) {\n margin-top: 0;\n}\n\n.pfe-card__header ::slotted(h1:first-child), .pfe-card__body ::slotted(h1:first-child) {\n margin-top: 0;\n}\n\n.pfe-card__header ::slotted(h2:first-child), .pfe-card__body ::slotted(h2:first-child) {\n margin-top: 0;\n}\n\n.pfe-card__header ::slotted(h3:first-child), .pfe-card__body ::slotted(h3:first-child) {\n margin-top: 0;\n}\n\n.pfe-card__header ::slotted(h4:first-child), .pfe-card__body ::slotted(h4:first-child) {\n margin-top: 0;\n}\n\n.pfe-card__header ::slotted(h5:first-child), .pfe-card__body ::slotted(h5:first-child) {\n margin-top: 0;\n}\n\n.pfe-card__header ::slotted(h6:first-child), .pfe-card__body ::slotted(h6:first-child) {\n margin-top: 0;\n}\n","@import \"../../pfe-sass/pfe-sass\";\n\n$LOCAL: card;\n\n$LOCAL-VARIABLES: (\n // Individual padding overrides available\n PaddingTop: calc(#{pfe-var(container-spacer)} * 2),\n PaddingRight: calc(#{pfe-var(container-spacer)} * 2),\n PaddingBottom: calc(#{pfe-var(container-spacer)} * 2),\n PaddingLeft: calc(#{pfe-var(container-spacer)} * 2),\n\n //-- Border settings\n BorderRadius: pfe-var(surface--border-radius),\n\n //-- Color properties\n BackgroundColor: pfe-var(surface--base),\n context: pfe-var(surface--base--context),\n BackgroundPosition: center center,\n\n spacing: pfe-var(container-spacer),\n\n header: (\n BackgroundColor: rgba(0, 0, 0, pfe-var(opacity)),\n BackgroundColor--dark: rgba(255, 255, 255, pfe-var(opacity)),\n Color: pfe-broadcasted(text)\n ),\n\n footer: (\n spacing--horizontal: calc(#{pfe-var(container-spacer)} / 2)\n )\n\n);\n\n// Nested internal variables (pfe-local calls), maps cannot \"self-reference\"\n$LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, (\n // Internal spacing; elements inside the card (header, body, footer regions)\n spacing--vertical: pfe-local(spacing),\n\n // Combine above variables or allow single override point via variable\n Padding: pfe-local(PaddingTop) pfe-local(PaddingRight) pfe-local(PaddingBottom) pfe-local(PaddingLeft),\n\n //-- Border variable encompasses width, style, and color\n Border: pfe-local(BorderWidth, 0) pfe-local(BorderStyle, solid) pfe-local(BorderColor, pfe-var(surface--border))\n));\n\n$size-small: (\n PaddingTop: pfe-var(container-spacer),\n PaddingRight: pfe-var(container-spacer),\n PaddingBottom: pfe-var(container-spacer),\n PaddingLeft: pfe-var(container-spacer)\n);\n\n\n:host {\n --context: #{pfe-local(context)};\n\n // Start of style declarations for host element\n display: flex;\n flex-direction: column;\n justify-items: flex-start;\n // This allows the card to fill it's container if necessary\n align-self: stretch;\n\n padding: pfe-local(Padding);\n border: pfe-local(Border); // @TODO add automatic border when lightest card is on lightest background?\n border-radius: pfe-local(BorderRadius);\n\n // This property ensures that children in the slots do no overflow\n // the border-radius being set on the container\n overflow: hidden;\n\n // Base colors\n background-color: pfe-local(BackgroundColor);\n background-position: pfe-local(BackgroundPosition);\n color: pfe-broadcasted(text);\n\n // Remove background color for print\n @include pfe-no-print-background;\n\n // Add the border to the card for print\n @include pfe-print-media {\n border-radius: pfe-fetch(surface--border-radius);\n border: pfe-fetch(surface--border-width) pfe-fetch(surface--border-style) pfe-fetch(surface--border);\n }\n\n @include browser-query(ie11) {\n background-color: pfe-var(surface--lightest) !important;\n color: pfe-var(text) !important;\n background-image: none !important;\n border-radius: pfe-fetch(surface--border-radius);\n border: pfe-fetch(surface--border-width) pfe-fetch(surface--border-style) pfe-fetch(surface--border);\n padding: pfe-var(container-spacer);\n }\n}\n\n// Pull in pfe-var settings for all supported surface colors\n@include pfe-surfaces;\n\n@include pfe-contexts; // imports on=\"light\" etc support\n\n:host([size=\"small\"]) {\n @include pfe-print-local($size-small);\n}\n\n:host([border]:not([border=\"false\"])) {\n --pfe-card--BorderWidth: #{pfe-fetch(surface--border-width)};\n}\n\n// Targets the wrappers in the shadow DOM\n.pfe-card {\n &__header,\n &__body,\n &__footer {\n ::slotted([pfe-overflow~=\"top\"]),\n ::slotted([overflow~=\"top\"]) {\n z-index: 1;\n margin-top: -2rem; //IE11 fallback\n margin-top: calc(-1 * #{pfe-local(PaddingTop)}) !important;\n :host([has_header]) & {\n padding-top: pfe-local(spacing);\n }\n }\n\n ::slotted([pfe-overflow~=\"right\"]),\n ::slotted([overflow~=\"right\"]) {\n margin-right: -2rem; //IE11 fallback\n margin-right: calc(-1 * #{pfe-local(PaddingRight)});\n }\n\n ::slotted([pfe-overflow~=\"bottom\"]),\n ::slotted([overflow~=\"bottom\"]) {\n margin-bottom: -2rem; //IE11 fallback\n margin-bottom: calc(-1 * calc(#{pfe-local(PaddingBottom)} + #{pfe-local(BorderRadius)}));\n align-self: flex-end;\n }\n\n ::slotted([pfe-overflow~=\"left\"]),\n ::slotted([overflow~=\"left\"]) {\n margin-left: -2rem; //IE11 fallback\n margin-left: calc(-1 * #{pfe-local(PaddingLeft)});\n }\n\n ::slotted(img) {\n max-width: 100% !important;\n align-self: flex-start; //Don't stretch image 100% with other Flexbox items in card.\n object-fit: cover; // Fix distortion\n }\n\n ::slotted(img:not[pfe-overflow]),\n ::slotted(img:not[overflow]) {\n align-self: flex-start; //Don't stretch image 100% with other Flexbox items in card.\n }\n\n ::slotted(img[pfe-overflow]),\n ::slotted(img[overflow]) {\n max-width: unset !important;\n }\n\n ::slotted(img[pfe-overflow~=\"right\"]),\n ::slotted(img[overflow~=\"right\"]) {\n width: calc(100% + 2rem) !important; //IE11 fallback\n width: calc(100% + #{pfe-local(PaddingRight)}) !important;\n }\n\n ::slotted(img[pfe-overflow~=\"left\"]),\n ::slotted(img[overflow~=\"left\"]) {\n width: calc(100% + 2rem) !important; //IE11 fallback\n width: calc(100% + #{pfe-local(PaddingLeft)}) !important;\n }\n\n ::slotted(img[pfe-overflow~=\"right\"][pfe-overflow~=\"left\"]),\n ::slotted(img[overflow~=\"right\"][overflow~=\"left\"]) {\n width: calc(100% + 4rem) !important; //IE11 fallback\n width: calc(100% + #{pfe-local(PaddingRight)} + #{pfe-local(PaddingLeft)}) !important;\n }\n }\n &__header {\n z-index: 2;\n // Declare the header background color\n background-color: pfe-local(BackgroundColor, $region: header);\n color: pfe-local($cssvar: Color, $region: header);\n :host([on=\"dark\"]) & {\n // Declare the header background color\n background-color: pfe-local(BackgroundColor--dark, $region: header);\n }\n @include browser-query(ie11) {\n background-color: pfe-fetch(surface--lightest) !important;\n color: pfe-fetch(text) !important;\n }\n\n // Margin styles on header region\n margin-top: calc(#{pfe-local(PaddingTop)} * -1) !important;\n margin-right: calc(#{pfe-local(PaddingRight)} * -1);\n margin-bottom: pfe-local(spacing--vertical);\n margin-left: calc(#{pfe-local(PaddingLeft)} * -1);\n\n // Padding for the header region\n padding-top: pfe-local(spacing--vertical);\n padding-right: pfe-local(PaddingRight);\n padding-left: pfe-local(PaddingLeft);\n padding-bottom: pfe-local(spacing--vertical);\n\n :host(:not([has_body],[has_footer])) & {\n margin-bottom: pfe-local(PaddingBottom);\n }\n\n ::slotted([pfe-overflow~=\"top\"]),\n ::slotted([overflow~=\"top\"]) {\n --pfe-card__overflow--MarginTop: calc(#{pfe-local(PaddingTop)} * -1);\n }\n\n :host(:not([has_header])) & {\n display: none;\n }\n\n :host([has_body],[has_footer]) & ::slotted([pfe-overflow~=\"bottom\"]),\n :host([has_body],[has_footer]) & ::slotted([overflow~=\"bottom\"]) {\n --pfe-card__overflow--MarginBottom: calc(#{pfe-local(spacing--vertical)} * -1);\n }\n\n ::slotted([pfe-overflow~=\"bottom\"]),\n ::slotted([overflow~=\"bottom\"]) {\n --pfe-card__overflow--MarginBottom: calc(#{pfe-local(PaddingBottom)} * -1);\n }\n\n @each $tag in (h1, h2, h3, h4, h5, h6) {\n ::slotted(#{$tag}) {\n margin-bottom: 0;\n }\n }\n }\n &__body {\n :host(:not([has_header])) & ::slotted([pfe-overflow~=\"top\"]),\n :host(:not([has_header])) & ::slotted([overflow~=\"top\"]) {\n --pfe-card__overflow--MarginTop: calc(#{pfe-local(PaddingTop)} * -1);\n }\n\n ::slotted([pfe-overflow~=\"top\"]),\n ::slotted([overflow~=\"top\"]) {\n z-index: 1;\n --pfe-card__overflow--MarginTop: calc(#{pfe-local(spacing--vertical)} * -1);\n }\n\n ::slotted([pfe-overflow~=\"bottom\"]),\n ::slotted([overflow~=\"bottom\"]) {\n --pfe-card__overflow--MarginBottom: calc(#{pfe-local(PaddingBottom)} * -1);\n }\n\n :host([has_footer]) & ::slotted([pfe-overflow~=\"bottom\"]),\n :host([has_footer]) & ::slotted([overflow~=\"bottom\"]) {\n --pfe-card__overflow--MarginBottom: calc(#{pfe-local(spacing--vertical)} * -1);\n }\n\n :host(:not([has_footer])) & {\n margin-bottom: 0;\n }\n }\n &__footer {\n margin-top: auto; // This allows the footer to move to the very bottom\n\n display: flex;\n flex-direction: pfe-local(Row, row, $region: footer);\n flex-wrap: pfe-local(Wrap, wrap, $region: footer);\n // Aligns buttons and CTAs\n align-items: pfe-local(AlignItems, baseline, $region: footer);\n\n ::slotted([pfe-overflow~=\"bottom\"]),\n ::slotted([overflow~=\"bottom\"]) {\n --pfe-card__overflow--MarginBottom: calc(#{pfe-local(PaddingBottom)} * -1);\n }\n\n :host(:not([has_footer])) & {\n display: none;\n }\n }\n &__header,\n &__body {\n margin-bottom: pfe-local(spacing--vertical);\n\n //-- Slotted styles for typography\n // Remove margins from typography inside the slots\n @each $tag in (p, h1, h2, h3, h4, h5, h6) {\n ::slotted(#{$tag}:first-child) {\n // Remove top margins\n margin-top: 0;\n }\n }\n }\n}\n","////\n/// Tools for leveraging custom property stacks\n/// @group custom-properties\n/// @author castastrophe\n////\n\n/// Get full theme stack with a fallback from the provided map - used by pfe-var and pfe-zindex\n/// @param {String} $category - Category name to be appended to variables within the map/system\n/// @param {String} $key - Variable name to be used and prepended with --pfe-theme\n/// @param {Map} $map - Sass map of variables\n/// @param {String} $fallback [null] - Optional fallback override\n/// @param {Boolean} $use-fallback [true] - Optional hook to return a stack with no fallback value\n/// @requires $custom-prop-prefix\n/// @return {String} theme stack with fallback value from a sass map\n@function pfe-get-from-map($category, $key, $map, $fallback: null, $prefix: \"#{$custom-prop-prefix}-theme\", $use-fallback: true) {\n // Start building the variable declaration\n $var-declaration: \"--#{$prefix}--\";\n @if $prefix == \"pf-c\" {\n $var-declaration: \"--#{$prefix}-\"; // one dash at the end\n }\n // If the category exists, inject that into the string\n @if $category != \"\" {\n $var-declaration: \"#{$var-declaration}#{$category}--\";\n }\n // Append the key to the string\n $var-declaration: \"#{$var-declaration}#{$key}\";\n\n // If the fallback is not provided but use-fallback is set to true\n @if $fallback == null and $use-fallback and map-get($map, $key) != null {\n $fallback: map-get($map, $key);\n }\n @if $fallback != null {\n // Create the variable declaration\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration}); \n}\n\n\n\n/// Returns CSS Var for the local component-scoped variable\n/// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--'\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $custom-prop-prefix\n/// @see $LOCAL\n/// @example\n/// :host {\n/// padding-top: #{pfe-local(paddingTop)};\n/// padding-bottom: #{pfe-local(paddingBottom)};\n/// }\n@function pfe-local($cssvar, $fallback: null, $region: null) {\n // If a fallback is not defined, use the global variables map\n @if $fallback == null and length($LOCAL-VARIABLES) > 0 {\n @if $region == null {\n $fallback: map-get($LOCAL-VARIABLES, $cssvar);\n }\n @else {\n $submap: map-get($LOCAL-VARIABLES, $region);\n @if type-of($submap) == \"map\" {\n $fallback: map-deep-get($LOCAL-VARIABLES, $region, $cssvar);\n }\n }\n }\n\n // If a region value exists, build the region string\n @if $region != null {\n $region: \"__#{$region}\";\n }\n\n // Start building the variable declaration\n $var-declaration: \"--#{$custom-prop-prefix}-#{$LOCAL}#{$region}--#{to-string($cssvar, '--')}\";\n \n @if $fallback != null {\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration});\n}\n\n/// Fetches a CSS variable stack for broadcasted variables, providing a hook for context\n/// to influence the styles of children elements such as p tags or links.\n/// @param {String} $broadcast - name of the broadcast variable to apply\n/// @requires {String} $custom-prop-prefix - Name of repo, which is \"pfe\"\n/// @example - scss\n/// :host {\n/// color: pfe-broadcasted(link);\n/// }\n/// @example - css\n/// :host {\n/// color: var(--pfe-broadcasted--link, #06c);\n/// }\n@function pfe-broadcasted($broadcast, $use-fallback: true) {\n $fallback: \"\";\n @if $use-fallback {\n $fallback: \", #{map-get($pfe-broadcasted, #{to-string($broadcast,'--')})}\";\t\n }\n @if not index($BROADCAST-VARS, first(str-split($broadcast, '--'))) {\n @error \"--#{$custom-prop-prefix}-broadcasted--#{$broadcast} variable is not currently supported.\";\n }\n @else {\n @return var(--#{$custom-prop-prefix}-broadcasted--#{to-string($broadcast,'--')}#{unquote($fallback)});\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme--zindex\n/// @requires {Map} $pfe-zindex - SASS Map of z-index values\n/// @see $pfe-zindex\n/// @example - scss - In your component styles\n/// .my-element {\n/// z-index: pfe-zindex( content );\n/// }\n\n@function pfe-zindex($cssvar) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-zindex, $var-name) != null {\n @return pfe-get-from-map(\"zindex\", $var-name, $pfe-zindex);\n }\n @else {\n @error \"The key for #{$var-name} could not be found in the $pfe-zindex map.\";\n }\n}\n\n/// Returns the value (only) of a property from the respective maps\n/// Similar to pfe-var, but does not include css variable in the compiled CSS\n/// @param {String} $name - Name of the key for the map\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example - scss - In your component styles\n/// .my-element {\n/// background-color: pfe-fetch( ui-base );\n/// }\n@function pfe-fetch($name, $region: null) {\n $var-name: to-string($name, \"--\");\n @if $region != null and map-deep-get($LOCAL-VARIABLES, $region, $var-name) != null {\n @return map-deep-get($LOCAL-VARIABLES, $region, $var-name);\n }\n @else if $region == null and map-get($LOCAL-VARIABLES, $var-name) != null {\n @return map-get($LOCAL-VARIABLES, $var-name);\n }\n @else if map-get($pfe-vars, $var-name) != null {\n @return map-get($pfe-vars, $var-name);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return map-get($pfe-colors, $var-name);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return map-get($pfe-broadcasted, $var-name);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return map-get($pfe-typography-base, $var-name);\n }\n\n // PATTERNFLY CORE\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return map-get($pf-type-sizing, $var-name);\n }\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return map-get($pf-type-sizing--component, $var-name);\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return map-get($pf-type-sizing--modifers, $var-name);\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return map-get($pf-type-sizing--content, $var-name);\n }\n // DEPRECATED\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return map-get($pfe-typography-base-deprecated, $var-name);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return map-get($pfe-typography-deprecated, $var-name);\n }\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme\n/// @param {String} $fallback [null] - Optional custom fallback\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example scss - In your component styles\n/// .my-element {\n/// padding: pfe-var( container-spacer );\n/// font-size: pfe-var( font-size );\n/// }\n/// @example - css Rendered output\n/// .my-element {\n/// padding: var(--pfe-theme--container-spacer, 16px);\n/// font-size: var(--pfe-theme--font-size, 16px);\n/// }\n@function pfe-var($cssvar, $fallback: null) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-vars, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-vars, $fallback);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return pfe-get-from-map(\"color\", $var-name, $pfe-colors, $fallback);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-broadcasted);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base, $fallback);\n }\n // PATTERNFLY CORE:\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing, $fallback, $prefix: \"pf-global\");\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--modifers, $fallback, $prefix: \"pf-c\");\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--content, $fallback, $prefix: \"pf-c\");\n }\n // PFE components (must be below core)\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--component, $fallback);\n }\n\n // DEPRECATED:\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base-deprecated, $fallback);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-deprecated, $fallback);\n }\n\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}","// This file is for initial variable values.\n// All variables should have a valid css value,\n// and use !default so they can be overwritten.\n\n// `$pf-global--concept--PropiertyCamelCase--modifier--state`\n\n// Patternfly options\n\n// Quickly modify global styling by enabling or disabling optional features.\n$pf-global--enable-reset: true !default;\n$pf-global--enable-font-overpass-cdn: false !default;\n$pf-global--enable-fontawesome-cdn: false !default;\n$pf-global--disable-fontawesome: false !default;\n$pf-global--load-pf-3: false !default;\n$pf-global--enable-shield: false !default;\n$pf-global--unset-root-font-size: true !default;\n\n// Patternfly uses the default root size of the browser, it assumes a 16px base\n// since most browser root size is 16. This variables is just to make the\n// transformation from px to rem.\n$pf-global--font-size-root: 16 !default; // for fonts\n$pf-global--space-size-root: 16 !default; // for spaces\n\n// Colors\n// Background color\n$pf-global--BackgroundColor--100: $pf-color-white !default;\n$pf-global--BackgroundColor--200: $pf-color-black-200 !default;\n\n// do not use - background colors for exceptions and defining theme\n// light theme\n$pf-global--BackgroundColor--light-100: $pf-color-white !default;\n$pf-global--BackgroundColor--light-200: $pf-color-black-100 !default;\n$pf-global--BackgroundColor--light-300: $pf-color-black-200 !default;\n\n// dark theme\n$pf-global--BackgroundColor--dark-100: $pf-color-black-900 !default;\n$pf-global--BackgroundColor--dark-200: $pf-color-black-800 !default;\n$pf-global--BackgroundColor--dark-300: $pf-color-black-850 !default;\n$pf-global--BackgroundColor--dark-400: $pf-color-black-700 !default;\n$pf-global--BackgroundColor--dark-transparent-100: rgba($pf-color-black-1000, .62) !default;\n$pf-global--BackgroundColor--dark-transparent-200: rgba($pf-color-black-1000, .32) !default;\n\n// Text color\n$pf-global--Color--100: $pf-color-black-900 !default;\n$pf-global--Color--200: $pf-color-black-600 !default;\n$pf-global--Color--300: $pf-color-black-800 !default;\n$pf-global--Color--400: $pf-color-black-500 !default;\n\n// do not use - text colors for exceptions and defining theme\n// light theme\n$pf-global--Color--light-100: $pf-color-white !default;\n$pf-global--Color--light-200: $pf-color-black-200 !default;\n$pf-global--Color--light-300: $pf-color-black-300 !default;\n\n// dark theme\n$pf-global--Color--dark-100: $pf-color-black-900 !default;\n$pf-global--Color--dark-200: $pf-color-black-600 !default;\n\n// States color\n// active\n$pf-global--active-color--100: $pf-color-blue-400 !default;\n$pf-global--active-color--200: $pf-color-blue-100 !default;\n$pf-global--active-color--300: $pf-color-blue-300 !default;\n$pf-global--active-color--400: $pf-color-blue-200 !default;\n\n// disabled\n$pf-global--disabled-color--100: $pf-color-black-600 !default;\n$pf-global--disabled-color--200: $pf-color-black-300 !default;\n$pf-global--disabled-color--300: $pf-color-black-200 !default;\n\n// Theme color\n$pf-global--primary-color--100: $pf-color-blue-400 !default;\n$pf-global--primary-color--200: $pf-color-blue-500 !default;\n$pf-global--secondary-color--100: $pf-color-black-600 !default;\n$pf-global--default-color--100: $pf-color-cyan-200 !default;\n$pf-global--default-color--200: $pf-color-cyan-300 !default;\n$pf-global--default-color--300: $pf-color-cyan-500 !default;\n$pf-global--success-color--100: $pf-color-green-500 !default;\n$pf-global--success-color--200: $pf-color-green-600 !default;\n$pf-global--info-color--100: $pf-color-blue-300 !default;\n$pf-global--info-color--200: $pf-color-blue-600 !default;\n$pf-global--warning-color--100: $pf-color-gold-400 !default;\n$pf-global--warning-color--200: $pf-color-gold-600 !default;\n$pf-global--danger-color--100: $pf-color-red-100 !default;\n$pf-global--danger-color--200: $pf-color-red-200 !default;\n$pf-global--danger-color--300: $pf-color-red-400 !default;\n\n// do not use - theme colors for exceptions and defining theme\n$pf-global--primary-color--light-100: $pf-color-blue-200 !default;\n$pf-global--primary-color--dark-100: $pf-color-blue-400 !default;\n\n// Shadows\n// small\n$pf-global--BoxShadow--sm: 0 pf-size-prem(1px) pf-size-prem(2px) 0 rgba($pf-color-black-1000, .12), 0 0 pf-size-prem(2px) 0 rgba($pf-color-black-1000, .06) !default;\n$pf-global--BoxShadow--sm-top: 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) !default;\n$pf-global--BoxShadow--sm-right: pf-size-prem(2px) 0 pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) !default;\n$pf-global--BoxShadow--sm-bottom: 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) !default;\n$pf-global--BoxShadow--sm-left: pf-size-prem(-2px) 0 pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) !default;\n\n// medium\n$pf-global--BoxShadow--md: 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-color-black-1000, .12), 0 0 pf-size-prem(4px) 0 rgba($pf-color-black-1000, .06) !default;\n$pf-global--BoxShadow--md-top: 0 pf-size-prem(-8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-color-black-1000, .18) !default;\n$pf-global--BoxShadow--md-right: pf-size-prem(8px) 0 pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-color-black-1000, .18) !default;\n$pf-global--BoxShadow--md-bottom: 0 pf-size-prem(8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-color-black-1000, .18) !default;\n$pf-global--BoxShadow--md-left: pf-size-prem(-8px) 0 pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-color-black-1000, .18) !default;\n\n// large\n$pf-global--BoxShadow--lg: 0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba($pf-color-black-1000, .16), 0 0 pf-size-prem(6px) 0 rgba($pf-color-black-1000, .08) !default;\n$pf-global--BoxShadow--lg-top: 0 pf-size-prem(-12px) pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-color-black-1000, .18) !default;\n$pf-global--BoxShadow--lg-right: pf-size-prem(12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-color-black-1000, .18) !default;\n$pf-global--BoxShadow--lg-bottom: 0 pf-size-prem(12px) pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-color-black-1000, .18) !default;\n$pf-global--BoxShadow--lg-left: pf-size-prem(-12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-color-black-1000, .18) !default;\n\n// x-large\n$pf-global--BoxShadow--xl: 0 pf-size-prem(16px) pf-size-prem(32px) 0 rgba($pf-color-black-1000, .16), 0 0 pf-size-prem(8px) 0 rgba($pf-color-black-1000, .1) !default;\n$pf-global--BoxShadow--xl-top: 0 pf-size-prem(-16px) pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-color-black-1000, .2) !default;\n$pf-global--BoxShadow--xl-right: pf-size-prem(16px) 0 pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-color-black-1000, .2) !default;\n$pf-global--BoxShadow--xl-bottom: 0 pf-size-prem(16px) pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-color-black-1000, .2) !default;\n$pf-global--BoxShadow--xl-left: pf-size-prem(-16px) 0 pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-color-black-1000, .2) !default;\n\n// inset\n$pf-global--BoxShadow--inset: inset 0 0 pf-size-prem(10) 0 rgba($pf-color-black-1000, .25) !default;\n\n// Fontpath\n$pf-global--font-path: \"./assets/fonts\" !default;\n\n// Iconpath\n$fa-font-path: \"./assets/fonts/webfonts\" !default;\n\n// FontIcon path\n$pf-global--fonticon-path: \"./assets/pficon\" !default;\n\n// Imagepath\n$pf-global--image-path: \"./assets/images\" !default;\n\n// Spacers\n$pf-global--spacer--xs: pf-size-prem(4px) !default; // Orange\n$pf-global--spacer--sm: pf-size-prem(8px) !default; // Light green\n$pf-global--spacer--md: pf-size-prem(16px) !default; // Dark green\n$pf-global--spacer--lg: pf-size-prem(24px) !default; // Dark Blue\n$pf-global--spacer--xl: pf-size-prem(32px) !default; // Light Blue\n$pf-global--spacer--2xl: pf-size-prem(48px) !default; // Light Purple\n$pf-global--spacer--3xl: pf-size-prem(64px) !default; // Dark Purple\n$pf-global--spacer--4xl: pf-size-prem(80px) !default; // Dark magenta\n\n// Form spacer - only used in forms\n$pf-global--spacer--form-element: pf-size-prem(6px) !default;\n\n// Gutter\n$pf-global--gutter: $pf-global--spacer--md !default;\n$pf-global--gutter--md: $pf-global--spacer--lg !default;\n\n// Z-Index\n$pf-global--ZIndex--xs: 100;\n$pf-global--ZIndex--sm: 200;\n$pf-global--ZIndex--md: 300;\n$pf-global--ZIndex--lg: 400;\n$pf-global--ZIndex--xl: 500;\n$pf-global--ZIndex--2xl: 600;\n\n// Grid breakpoints\n$pf-global--breakpoint--xs: 0 !default;\n$pf-global--breakpoint--sm: 576px !default;\n$pf-global--breakpoint--md: 768px !default;\n$pf-global--breakpoint--lg: 992px !default;\n$pf-global--breakpoint--xl: 1200px !default;\n$pf-global--breakpoint--2xl: 1450px !default;\n\n// Borders\n$pf-global--BorderWidth--sm: 1px !default;\n$pf-global--BorderWidth--md: 2px !default;\n$pf-global--BorderWidth--lg: 3px !default;\n$pf-global--BorderWidth--xl: 4px !default;\n$pf-global--BorderColor--100: $pf-color-black-300 !default;\n$pf-global--BorderColor--200: $pf-color-black-500 !default;\n$pf-global--BorderColor--300: $pf-color-black-200 !default;\n$pf-global--BorderColor--dark-100: $pf-color-black-300 !default;\n$pf-global--BorderColor--light-100: $pf-color-black-400 !default;\n$pf-global--BorderRadius--sm: 3px !default;\n$pf-global--BorderRadius--lg: 30em !default; // This is a sufficiently large number to ensure in most cases that the ends are evenly rounded.\n\n// Icons\n$pf-global--icon--Color--light: $pf-color-black-600 !default;\n$pf-global--icon--Color--dark: $pf-color-black-900 !default;\n$pf-global--icon--FontSize--sm: pf-font-prem(10px) !default;\n$pf-global--icon--FontSize--md: pf-font-prem(18px) !default;\n$pf-global--icon--FontSize--lg: pf-font-prem(24px) !default;\n$pf-global--icon--FontSize--xl: pf-font-prem(54px) !default;\n\n// Fonts\n// Font family\n// stylelint-disable value-keyword-case\n$pf-global--FontFamily--sans-serif: '\"RedHatText\", \"Overpass\", overpass, helvetica, arial, sans-serif';\n$pf-global--FontFamily--heading--sans-serif: '\"RedHatDisplay\", \"Overpass\", overpass, helvetica, arial, sans-serif';\n$pf-global--FontFamily--monospace: '\"Liberation Mono\", consolas, \"SFMono-Regular\", menlo, monaco, \"Courier New\", monospace';\n$pf-global--FontFamily--redhat-updated--sans-serif: '\"RedHatTextUpdated\", \"Overpass\", overpass, helvetica, arial, sans-serif';\n$pf-global--FontFamily--redhat-updated--heading--sans-serif: '\"RedHatDisplayUpdated\", \"Overpass\", overpass, helvetica, arial, sans-serif';\n$pf-global--FontFamily--redhat--monospace: '\"RedHatMono\", \"Liberation Mono\", consolas, \"SFMono-Regular\", menlo, monaco, \"Courier New\", monospace';\n$pf-global--FontFamily--redhatVF--sans-serif: '\"RedHatTextVF\", \"RedHatText\", \"Overpass\", overpass, helvetica, arial, sans-serif';\n$pf-global--FontFamily--redhatVF--heading--sans-serif: '\"RedHatDisplayVF\", \"RedHatDisplay\", \"Overpass\", overpass, helvetica, arial, sans-serif';\n$pf-global--FontFamily--redhatVF--monospace: '\"RedHatMonoVF\", \"RedHatMono\", \"Liberation Mono\", consolas, \"SFMono-Regular\", menlo, monaco, \"Courier New\", monospace';\n$pf-global--FontFamily--overpass--sans-serif: '\"overpass\", overpass, \"open sans\", -apple-system, blinkmacsystemfont, \"Segoe UI\", roboto, \"Helvetica Neue\", arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"' !default;\n$pf-global--FontFamily--overpass--monospace: '\"overpass-mono\", overpass-mono, \"SFMono-Regular\", menlo, monaco, consolas, \"Liberation Mono\", \"Courier New\", monospace' !default;\n// stylelint-enable value-keyword-case\n\n// Font size\n$pf-global--FontSize--4xl: pf-font-prem(36px) !default;\n$pf-global--FontSize--3xl: pf-font-prem(28px) !default;\n$pf-global--FontSize--2xl: pf-font-prem(24px) !default;\n$pf-global--FontSize--xl: pf-font-prem(20px) !default;\n$pf-global--FontSize--lg: pf-font-prem(18px) !default;\n$pf-global--FontSize--md: pf-font-prem(16px) !default;\n$pf-global--FontSize--sm: pf-font-prem(14px) !default;\n$pf-global--FontSize--xs: pf-font-prem(12px) !default;\n\n// Font weight\n$pf-global--FontWeight--light: 300 !default;\n$pf-global--FontWeight--normal: 400 !default;\n$pf-global--FontWeight--bold: 700 !default;\n$pf-global--FontWeight--semi-bold: $pf-global--FontWeight--bold !default; // Just for legacy support while supporting Overpass\n$pf-global--FontWeight--overpass--semi-bold: 500 !default;\n$pf-global--FontWeight--overpass--bold: 600 !default;\n\n// Line height\n$pf-global--LineHeight--sm: 1.3 !default;\n$pf-global--LineHeight--md: 1.5 !default;\n\n// Links\n$pf-global--link--Color: $pf-global--primary-color--100 !default;\n$pf-global--link--Color--hover: $pf-global--primary-color--200 !default;\n$pf-global--link--Color--light: $pf-global--active-color--300 !default;\n$pf-global--link--Color--light--hover: $pf-global--active-color--400 !default;\n$pf-global--link--Color--dark: $pf-global--primary-color--100 !default;\n$pf-global--link--Color--dark--hover: $pf-global--primary-color--200 !default;\n$pf-global--link--Color--visited: $pf-color-purple-600 !default;\n$pf-global--link--TextDecoration: none !default;\n$pf-global--link--TextDecoration--hover: underline !default;\n\n// List\n$pf-global--ListStyle: disc outside !default;\n\n// Transitions\n$pf-global--Transition: all 250ms cubic-bezier(.42, 0, .58, 1);\n$pf-global--TimingFunction: cubic-bezier(.645, .045, .355, 1);\n$pf-global--TransitionDuration: 250ms;\n\n// Arrow size (used for tooltips, popovers, etc.)\n$pf-global--arrow--width: pf-font-prem(15px);\n$pf-global--arrow--width-lg: pf-font-prem(25px);\n\n// A11y\n$pf-global--target-size--MinWidth: 44px !default;\n$pf-global--target-size--MinHeight: 44px !default;\n\n// filters\n// overlay\n// animations\n\n// Global breakpoint map - used for @pf-grid-item-modifiers\n$pf-global--breakpoint-map: (\n \"\": null,\n \"sm\": \"-on-sm\",\n \"md\": \"-on-md\",\n \"lg\": \"-on-lg\",\n \"xl\": \"-on-xl\",\n \"2xl\": \"-on-2xl\"\n);\n\n// Global breakpoint list - used for @pf-utility-builder\n$pf-global--breakpoint-list: (\n \"sm\",\n \"md\",\n \"lg\",\n \"xl\",\n \"2xl\"\n);\n\n// Global breakpoint name map - used for %pf-hidden-visible\n$pf-global--breakpoint-name-map: (\n \"sm\": $pf-global--breakpoint--sm,\n \"md\": $pf-global--breakpoint--md,\n \"lg\": $pf-global--breakpoint--lg,\n \"xl\": $pf-global--breakpoint--xl,\n \"2xl\": $pf-global--breakpoint--2xl\n);\n\n// Spacer properties\n$pf-global--spacer-properties-map: (\n \"m\": \"margin\",\n \"mt\": \"margin-top\",\n \"mr\": \"margin-right\",\n \"mb\": \"margin-bottom\",\n \"ml\": \"margin-left\",\n \"mx\": null,\n \"my\": null,\n \"p\": \"padding\",\n \"pt\": \"padding-top\",\n \"pr\": \"padding-right\",\n \"pb\": \"padding-bottom\",\n \"pl\": \"padding-left\",\n \"px\": null,\n \"py\": null\n);\n\n// Spacer values\n$pf-global--spacer-map: (\n \"auto\": \"auto\",\n \"0\": 0,\n \"xs\": \"var(--pf-global--spacer--xs)\",\n \"sm\": \"var(--pf-global--spacer--sm)\",\n \"md\": \"var(--pf-global--spacer--md)\",\n \"lg\": \"var(--pf-global--spacer--lg)\",\n \"xl\": \"var(--pf-global--spacer--xl)\",\n \"2xl\": \"var(--pf-global--spacer--2xl)\",\n \"3xl\": \"var(--pf-global--spacer--3xl)\",\n \"4xl\": \"var(--pf-global--spacer--4xl)\"\n);\n","// Colors\n$pf-color-black-100: #fafafa !default;\n$pf-color-black-150: #f5f5f5 !default;\n$pf-color-black-200: #f0f0f0 !default;\n$pf-color-black-300: #d2d2d2 !default;\n$pf-color-black-400: #b8bbbe !default;\n$pf-color-black-500: #8a8d90 !default;\n$pf-color-black-600: #6a6e73 !default;\n$pf-color-black-700: #4f5255 !default;\n$pf-color-black-800: #3c3f42 !default;\n$pf-color-black-850: #212427 !default;\n$pf-color-black-900: #151515 !default;\n$pf-color-black-1000: #030303 !default;\n$pf-color-blue-50: #e7f1fa !default;\n$pf-color-blue-100: #bee1f4 !default;\n$pf-color-blue-200: #73bcf7 !default;\n$pf-color-blue-300: #2b9af3 !default;\n$pf-color-blue-400: #06c !default;\n$pf-color-blue-500: #004080 !default;\n$pf-color-blue-600: #002952 !default;\n$pf-color-blue-700: #001223 !default;\n$pf-color-cyan-50: #f2f9f9 !default;\n$pf-color-cyan-100: #a2d9d9 !default;\n$pf-color-cyan-200: #73c5c5 !default;\n$pf-color-cyan-300: #009596 !default;\n$pf-color-cyan-400: #005f60 !default;\n$pf-color-cyan-500: #003737 !default;\n$pf-color-cyan-600: #002323 !default;\n$pf-color-cyan-700: #000f0f !default;\n$pf-color-gold-50: #fdf7e7 !default;\n$pf-color-gold-100: #f9e0a2 !default;\n$pf-color-gold-200: #f6d173 !default;\n$pf-color-gold-300: #f4c145 !default;\n$pf-color-gold-400: #f0ab00 !default;\n$pf-color-gold-500: #c58c00 !default;\n$pf-color-gold-600: #795600 !default;\n$pf-color-gold-700: #3d2c00 !default;\n$pf-color-green-50: #f3faf2 !default;\n$pf-color-green-100: #bde5b8 !default;\n$pf-color-green-200: #95d58e !default;\n$pf-color-green-300: #6ec664 !default;\n$pf-color-green-400: #5ba352 !default;\n$pf-color-green-500: #3e8635 !default;\n$pf-color-green-600: #1e4f18 !default;\n$pf-color-green-700: #0f280d !default;\n$pf-color-light-blue-100: #beedf9 !default;\n$pf-color-light-blue-200: #7cdbf3 !default;\n$pf-color-light-blue-300: #35caed !default;\n$pf-color-light-blue-400: #00b9e4 !default;\n$pf-color-light-blue-500: #008bad !default;\n$pf-color-light-blue-600: #005c73 !default;\n$pf-color-light-blue-700: #002d39 !default;\n$pf-color-light-green-100: #e4f5bc !default;\n$pf-color-light-green-200: #c8eb79 !default;\n$pf-color-light-green-300: #ace12e !default;\n$pf-color-light-green-400: #92d400 !default;\n$pf-color-light-green-500: #6ca100 !default;\n$pf-color-light-green-600: #486b00 !default;\n$pf-color-light-green-700: #253600 !default;\n$pf-color-orange-100: #f4b678 !default;\n$pf-color-orange-200: #ef9234 !default;\n$pf-color-orange-300: #ec7a08 !default;\n$pf-color-orange-400: #c46100 !default;\n$pf-color-orange-500: #8f4700 !default;\n$pf-color-orange-600: #773d00 !default;\n$pf-color-orange-700: #3b1f00 !default;\n$pf-color-purple-50: #f2f0fc !default;\n$pf-color-purple-100: #cbc1ff !default;\n$pf-color-purple-200: #b2a3ff !default;\n$pf-color-purple-300: #a18fff !default;\n$pf-color-purple-400: #8476d1 !default;\n$pf-color-purple-500: #6753ac !default;\n$pf-color-purple-600: #40199a !default;\n$pf-color-purple-700: #1f0066 !default;\n$pf-color-red-50: #faeae8 !default;\n$pf-color-red-100: #c9190b !default;\n$pf-color-red-200: #a30000 !default;\n$pf-color-red-300: #7d1007 !default;\n$pf-color-red-400: #470000 !default;\n$pf-color-red-500: #2c0000 !default;\n$pf-color-white: #fff !default;\n"],"sourceRoot":"../src"} \ No newline at end of file diff --git a/elements/pfe-card/dist/pfe-card.js b/elements/pfe-card/dist/pfe-card.js new file mode 100644 index 0000000000..b7607ba161 --- /dev/null +++ b/elements/pfe-card/dist/pfe-card.js @@ -0,0 +1,186 @@ +import PFElement from '../../pfelement/dist/pfelement.js'; + +/*! + * PatternFly Elements: PfeCard 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * +*/ + +class PfeCard extends PFElement { + + // Injected at build-time + static get version() { + return "1.12.3"; + } + + // Injected at build-time + get html() { + return ` + + +
      + +
      +
      + +
      +
      + +
      `; + } + + static get tag() { + return "pfe-card"; + } + + static get meta() { + return { + title: "Card", + description: + "This element creates a header, body, and footer region in which to place content or other components.", + }; + } + + get templateUrl() { + return "pfe-card.html"; + } + + get styleUrl() { + return "pfe-card.scss"; + } + + // @TODO: How do we handle attributes for slotted content? + static get properties() { + return { + color: { + title: "Background color", + type: String, + values: ["lightest", "base", "darker", "darkest", "complement", "accent"], + default: "base", + observer: "_colorChanged", + }, + // @TODO: Deprecate property in 1.0 + oldColor: { + type: String, + prefix: false, + alias: "color", + attr: "pfe-color", + }, + imgSrc: { + title: "Background image", + type: String, + observer: "_imageSrcChanged", + }, + // @TODO: Deprecate property in 1.0 + pfeImgSrc: { + type: String, + prefix: false, + alias: "imgSrc", + }, + size: { + title: "Padding size", + type: String, + values: ["small"], + }, + // @TODO: Deprecate property in 1.0 + pfeSize: { + type: String, + values: ["small"], + prefix: false, + alias: "size", + }, + border: { + title: "Border", + type: Boolean, + }, + // @TODO: Deprecate property in 1.0 + oldBorder: { + alias: "border", + attr: "pfe-border", + }, + }; + } + + static get slots() { + return { + header: { + title: "Header", + type: "array", + namedSlot: true, + maxItems: 3, + items: { + $ref: "raw", + }, + }, + body: { + title: "Body", + type: "array", + namedSlot: false, + items: { + $ref: "raw", + }, + }, + footer: { + title: "Footer", + type: "array", + namedSlot: true, + maxItems: 3, + items: { + oneOf: [ + { + $ref: "pfe-cta", + }, + { + $ref: "raw", + }, + ], + }, + }, + }; + } + + // Declare the type of this component + static get PfeType() { + return PFElement.PfeTypes.Container; + } + + constructor() { + super(PfeCard, { type: PfeCard.PfeType }); + } + + // If the color changes, update the context + _colorChanged() { + // Update the context + this.resetContext(); + } + + // Update the background image + _imageSrcChanged(oldValue, newValue) { + // Set the image as the background image + this.style.backgroundImage = newValue ? `url('${newValue}')` : ``; + } +} + +PFElement.create(PfeCard); + +export default PfeCard; +//# sourceMappingURL=pfe-card.js.map diff --git a/elements/pfe-card/dist/pfe-card.js.map b/elements/pfe-card/dist/pfe-card.js.map new file mode 100644 index 0000000000..37eaf8d62c --- /dev/null +++ b/elements/pfe-card/dist/pfe-card.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-card.js","sources":["../_temp/pfe-card.js"],"sourcesContent":["/*!\n * PatternFly Elements: PfeCard 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement.js\";\n\nclass PfeCard extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n\n
      \n \n
      \n
      \n \n
      \n
      \n \n
      `;\n }\n\n static get tag() {\n return \"pfe-card\";\n }\n\n static get meta() {\n return {\n title: \"Card\",\n description:\n \"This element creates a header, body, and footer region in which to place content or other components.\",\n };\n }\n\n get templateUrl() {\n return \"pfe-card.html\";\n }\n\n get styleUrl() {\n return \"pfe-card.scss\";\n }\n\n // @TODO: How do we handle attributes for slotted content?\n static get properties() {\n return {\n color: {\n title: \"Background color\",\n type: String,\n values: [\"lightest\", \"base\", \"darker\", \"darkest\", \"complement\", \"accent\"],\n default: \"base\",\n observer: \"_colorChanged\",\n },\n // @TODO: Deprecate property in 1.0\n oldColor: {\n type: String,\n prefix: false,\n alias: \"color\",\n attr: \"pfe-color\",\n },\n imgSrc: {\n title: \"Background image\",\n type: String,\n observer: \"_imageSrcChanged\",\n },\n // @TODO: Deprecate property in 1.0\n pfeImgSrc: {\n type: String,\n prefix: false,\n alias: \"imgSrc\",\n },\n size: {\n title: \"Padding size\",\n type: String,\n values: [\"small\"],\n },\n // @TODO: Deprecate property in 1.0\n pfeSize: {\n type: String,\n values: [\"small\"],\n prefix: false,\n alias: \"size\",\n },\n border: {\n title: \"Border\",\n type: Boolean,\n },\n // @TODO: Deprecate property in 1.0\n oldBorder: {\n alias: \"border\",\n attr: \"pfe-border\",\n },\n };\n }\n\n static get slots() {\n return {\n header: {\n title: \"Header\",\n type: \"array\",\n namedSlot: true,\n maxItems: 3,\n items: {\n $ref: \"raw\",\n },\n },\n body: {\n title: \"Body\",\n type: \"array\",\n namedSlot: false,\n items: {\n $ref: \"raw\",\n },\n },\n footer: {\n title: \"Footer\",\n type: \"array\",\n namedSlot: true,\n maxItems: 3,\n items: {\n oneOf: [\n {\n $ref: \"pfe-cta\",\n },\n {\n $ref: \"raw\",\n },\n ],\n },\n },\n };\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Container;\n }\n\n constructor() {\n super(PfeCard, { type: PfeCard.PfeType });\n }\n\n // If the color changes, update the context\n _colorChanged() {\n // Update the context\n this.resetContext();\n }\n\n // Update the background image\n _imageSrcChanged(oldValue, newValue) {\n // Set the image as the background image\n this.style.backgroundImage = newValue ? `url('${newValue}')` : ``;\n }\n}\n\nPFElement.create(PfeCard);\n\nexport { PfeCard as default };\n"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-card/dist/pfe-card.min.css.map b/elements/pfe-card/dist/pfe-card.min.css.map new file mode 100644 index 0000000000..fa376e4d9a --- /dev/null +++ b/elements/pfe-card/dist/pfe-card.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../../pfe-sass/mixins/_mixins.scss","../../../pfe-sass/mixins/_custom-properties.scss","../../../pfe-sass/extends/_extends.scss","../../src/pfe-card.scss","pfe-card.css"],"names":[],"mappings":"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","file":"pfe-card.min.css","sourceRoot":"../src","sourcesContent":[null,null,null,null,"@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n :host([color=\"darker\"]), :host([color=\"darkest\"]), :host([color=\"base\"]), :host([color=\"lighter\"]), :host([color=\"lightest\"]), :host([color=\"accent\"]), :host([color=\"complement\"]) {\n /* IE10+ */\n background-color: #fff !important;\n color: #151515 !important;\n }\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n :host {\n /* IE10+ */\n color: #151515 !important;\n }\n}\n\n:host {\n --context: var(--pfe-card--context, var(--pfe-theme--color--surface--base--context, light));\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -webkit-flex-direction: column;\n -ms-flex-direction: column;\n flex-direction: column;\n justify-items: flex-start;\n -webkit-align-self: stretch;\n -ms-flex-item-align: stretch;\n -ms-grid-row-align: stretch;\n align-self: stretch;\n padding: calc(1rem * 2) calc(1rem * 2) calc(1rem * 2) calc(1rem * 2);\n padding: var(--pfe-card--Padding, var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) var(--pfe-card--PaddingRight, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) var(--pfe-card--PaddingLeft, calc(var(--pfe-theme--container-spacer, 1rem) * 2)));\n border: 0 solid #d2d2d2;\n border: var(--pfe-card--Border, var(--pfe-card--BorderWidth, 0) var(--pfe-card--BorderStyle, solid) var(--pfe-card--BorderColor, var(--pfe-theme--color--surface--border, #d2d2d2)));\n border-radius: 3px;\n border-radius: var(--pfe-card--BorderRadius, var(--pfe-theme--surface--border-radius, 3px));\n overflow: hidden;\n background-color: #f0f0f0;\n background-color: var(--pfe-card--BackgroundColor, var(--pfe-theme--color--surface--base, #f0f0f0));\n background-position: center center;\n background-position: var(--pfe-card--BackgroundPosition, center center);\n color: #3c3f42;\n color: var(--pfe-broadcasted--text, #3c3f42);\n}\n\n@media print {\n :host {\n background-color: white !important;\n background-image: none !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n }\n}\n\n@media print {\n :host {\n border-radius: 3px;\n border: 1px solid #d2d2d2;\n }\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n :host {\n /* IE10+ */\n background-color: #fff !important;\n background-color: var(--pfe-theme--color--surface--lightest, #fff) !important;\n color: #151515 !important;\n color: var(--pfe-theme--color--text, #151515) !important;\n background-image: none !important;\n border-radius: 3px;\n border: 1px solid #d2d2d2;\n padding: 1rem;\n padding: var(--pfe-theme--container-spacer, 1rem);\n }\n}\n\n:host([color=\"darker\"]) {\n --pfe-card--BackgroundColor: var(--pfe-theme--color--surface--darker, #3c3f42);\n --pfe-card--context: var(--pfe-theme--color--surface--darker--context, dark);\n}\n\n:host([color=\"darkest\"]) {\n --pfe-card--BackgroundColor: var(--pfe-theme--color--surface--darkest, #151515);\n --pfe-card--context: var(--pfe-theme--color--surface--darkest--context, dark);\n}\n\n:host([color=\"base\"]) {\n --pfe-card--BackgroundColor: var(--pfe-theme--color--surface--base, #f0f0f0);\n --pfe-card--context: var(--pfe-theme--color--surface--base--context, light);\n}\n\n:host([color=\"lighter\"]) {\n --pfe-card--BackgroundColor: var(--pfe-theme--color--surface--lighter, #f0f0f0);\n --pfe-card--context: var(--pfe-theme--color--surface--lighter--context, light);\n}\n\n:host([color=\"lightest\"]) {\n --pfe-card--BackgroundColor: var(--pfe-theme--color--surface--lightest, #fff);\n --pfe-card--context: var(--pfe-theme--color--surface--lightest--context, light);\n}\n\n:host([color=\"accent\"]) {\n --pfe-card--BackgroundColor: var(--pfe-theme--color--surface--accent, #004080);\n --pfe-card--context: var(--pfe-theme--color--surface--accent--context, saturated);\n}\n\n:host([color=\"complement\"]) {\n --pfe-card--BackgroundColor: var(--pfe-theme--color--surface--complement, #002952);\n --pfe-card--context: var(--pfe-theme--color--surface--complement--context, saturated);\n}\n\n:host([on=\"dark\"]) {\n --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff);\n --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted--on-dark, #d2d2d2);\n --pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #73bcf7);\n --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #bee1f4);\n --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #bee1f4);\n --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #bee1f4);\n --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration--on-dark, none);\n --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover--on-dark, underline);\n --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus--on-dark, underline);\n --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited--on-dark, none);\n}\n\n:host([on=\"saturated\"]) {\n --pfe-broadcasted--text: var(--pfe-theme--color--text--on-saturated, #fff);\n --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2);\n --pfe-broadcasted--link: var(--pfe-theme--color--link--on-saturated, #fff);\n --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-saturated, #fafafa);\n --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-saturated, #fafafa);\n --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);\n --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration--on-saturated, underline);\n --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover--on-saturated, underline);\n --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus--on-saturated, underline);\n --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited--on-saturated, underline);\n}\n\n:host([on=\"light\"]) {\n --pfe-broadcasted--text: var(--pfe-theme--color--text, #151515);\n --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted, #6a6e73);\n --pfe-broadcasted--link: var(--pfe-theme--color--link, #06c);\n --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover, #004080);\n --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus, #004080);\n --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited, #6753ac);\n --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration, none);\n --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover, underline);\n --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus, underline);\n --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited, none);\n}\n\n:host([size=\"small\"]) {\n --pfe-card--PaddingTop: var(--pfe-theme--container-spacer, 1rem);\n --pfe-card--PaddingRight: var(--pfe-theme--container-spacer, 1rem);\n --pfe-card--PaddingBottom: var(--pfe-theme--container-spacer, 1rem);\n --pfe-card--PaddingLeft: var(--pfe-theme--container-spacer, 1rem);\n}\n\n:host([border]:not([border=\"false\"])) {\n --pfe-card--BorderWidth: 1px;\n}\n\n.pfe-card__header ::slotted([pfe-overflow~=\"top\"]),\n.pfe-card__header ::slotted([overflow~=\"top\"]), .pfe-card__body ::slotted([pfe-overflow~=\"top\"]),\n.pfe-card__body ::slotted([overflow~=\"top\"]), .pfe-card__footer ::slotted([pfe-overflow~=\"top\"]),\n.pfe-card__footer ::slotted([overflow~=\"top\"]) {\n z-index: 1;\n margin-top: -2rem;\n margin-top: calc(-1 * calc(1rem * 2)) !important;\n margin-top: calc(-1 * var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 1rem) * 2))) !important;\n}\n\n:host([has_header]) .pfe-card__header ::slotted([pfe-overflow~=\"top\"]), :host([has_header])\n.pfe-card__header ::slotted([overflow~=\"top\"]), :host([has_header]) .pfe-card__body ::slotted([pfe-overflow~=\"top\"]), :host([has_header])\n.pfe-card__body ::slotted([overflow~=\"top\"]), :host([has_header]) .pfe-card__footer ::slotted([pfe-overflow~=\"top\"]), :host([has_header])\n.pfe-card__footer ::slotted([overflow~=\"top\"]) {\n padding-top: 1rem;\n padding-top: var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem));\n}\n\n.pfe-card__header ::slotted([pfe-overflow~=\"right\"]),\n.pfe-card__header ::slotted([overflow~=\"right\"]), .pfe-card__body ::slotted([pfe-overflow~=\"right\"]),\n.pfe-card__body ::slotted([overflow~=\"right\"]), .pfe-card__footer ::slotted([pfe-overflow~=\"right\"]),\n.pfe-card__footer ::slotted([overflow~=\"right\"]) {\n margin-right: -2rem;\n margin-right: calc(-1 * calc(1rem * 2));\n margin-right: calc(-1 * var(--pfe-card--PaddingRight, calc(var(--pfe-theme--container-spacer, 1rem) * 2)));\n}\n\n.pfe-card__header ::slotted([pfe-overflow~=\"bottom\"]),\n.pfe-card__header ::slotted([overflow~=\"bottom\"]), .pfe-card__body ::slotted([pfe-overflow~=\"bottom\"]),\n.pfe-card__body ::slotted([overflow~=\"bottom\"]), .pfe-card__footer ::slotted([pfe-overflow~=\"bottom\"]),\n.pfe-card__footer ::slotted([overflow~=\"bottom\"]) {\n margin-bottom: -2rem;\n margin-bottom: calc(-1 * calc(calc(1rem * 2) + 3px));\n margin-bottom: calc(-1 * calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) + var(--pfe-card--BorderRadius, var(--pfe-theme--surface--border-radius, 3px))));\n -webkit-align-self: flex-end;\n -ms-flex-item-align: end;\n align-self: flex-end;\n}\n\n.pfe-card__header ::slotted([pfe-overflow~=\"left\"]),\n.pfe-card__header ::slotted([overflow~=\"left\"]), .pfe-card__body ::slotted([pfe-overflow~=\"left\"]),\n.pfe-card__body ::slotted([overflow~=\"left\"]), .pfe-card__footer ::slotted([pfe-overflow~=\"left\"]),\n.pfe-card__footer ::slotted([overflow~=\"left\"]) {\n margin-left: -2rem;\n margin-left: calc(-1 * calc(1rem * 2));\n margin-left: calc(-1 * var(--pfe-card--PaddingLeft, calc(var(--pfe-theme--container-spacer, 1rem) * 2)));\n}\n\n.pfe-card__header ::slotted(img), .pfe-card__body ::slotted(img), .pfe-card__footer ::slotted(img) {\n max-width: 100% !important;\n -webkit-align-self: flex-start;\n -ms-flex-item-align: start;\n align-self: flex-start;\n -o-object-fit: cover;\n object-fit: cover;\n}\n\n.pfe-card__header ::slotted(img:not[pfe-overflow]),\n.pfe-card__header ::slotted(img:not[overflow]), .pfe-card__body ::slotted(img:not[pfe-overflow]),\n.pfe-card__body ::slotted(img:not[overflow]), .pfe-card__footer ::slotted(img:not[pfe-overflow]),\n.pfe-card__footer ::slotted(img:not[overflow]) {\n -webkit-align-self: flex-start;\n -ms-flex-item-align: start;\n align-self: flex-start;\n}\n\n.pfe-card__header ::slotted(img[pfe-overflow]),\n.pfe-card__header ::slotted(img[overflow]), .pfe-card__body ::slotted(img[pfe-overflow]),\n.pfe-card__body ::slotted(img[overflow]), .pfe-card__footer ::slotted(img[pfe-overflow]),\n.pfe-card__footer ::slotted(img[overflow]) {\n max-width: unset !important;\n}\n\n.pfe-card__header ::slotted(img[pfe-overflow~=\"right\"]),\n.pfe-card__header ::slotted(img[overflow~=\"right\"]), .pfe-card__body ::slotted(img[pfe-overflow~=\"right\"]),\n.pfe-card__body ::slotted(img[overflow~=\"right\"]), .pfe-card__footer ::slotted(img[pfe-overflow~=\"right\"]),\n.pfe-card__footer ::slotted(img[overflow~=\"right\"]) {\n width: calc(100% + 2rem) !important;\n width: calc(100% + calc(1rem * 2)) !important;\n width: calc(100% + var(--pfe-card--PaddingRight, calc(var(--pfe-theme--container-spacer, 1rem) * 2))) !important;\n}\n\n.pfe-card__header ::slotted(img[pfe-overflow~=\"left\"]),\n.pfe-card__header ::slotted(img[overflow~=\"left\"]), .pfe-card__body ::slotted(img[pfe-overflow~=\"left\"]),\n.pfe-card__body ::slotted(img[overflow~=\"left\"]), .pfe-card__footer ::slotted(img[pfe-overflow~=\"left\"]),\n.pfe-card__footer ::slotted(img[overflow~=\"left\"]) {\n width: calc(100% + 2rem) !important;\n width: calc(100% + calc(1rem * 2)) !important;\n width: calc(100% + var(--pfe-card--PaddingLeft, calc(var(--pfe-theme--container-spacer, 1rem) * 2))) !important;\n}\n\n.pfe-card__header ::slotted(img[pfe-overflow~=\"right\"][pfe-overflow~=\"left\"]),\n.pfe-card__header ::slotted(img[overflow~=\"right\"][overflow~=\"left\"]), .pfe-card__body ::slotted(img[pfe-overflow~=\"right\"][pfe-overflow~=\"left\"]),\n.pfe-card__body ::slotted(img[overflow~=\"right\"][overflow~=\"left\"]), .pfe-card__footer ::slotted(img[pfe-overflow~=\"right\"][pfe-overflow~=\"left\"]),\n.pfe-card__footer ::slotted(img[overflow~=\"right\"][overflow~=\"left\"]) {\n width: calc(100% + 4rem) !important;\n width: calc(100% + calc(1rem * 2) + calc(1rem * 2)) !important;\n width: calc(100% + var(--pfe-card--PaddingRight, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) + var(--pfe-card--PaddingLeft, calc(var(--pfe-theme--container-spacer, 1rem) * 2))) !important;\n}\n\n.pfe-card__header {\n z-index: 2;\n background-color: rgba(0, 0, 0, 0.09);\n background-color: var(--pfe-card__header--BackgroundColor, rgba(0, 0, 0, var(--pfe-theme--opacity, 0.09)));\n color: #3c3f42;\n color: var(--pfe-card__header--Color, var(--pfe-broadcasted--text, #3c3f42));\n margin-top: calc(calc(1rem * 2) * -1) !important;\n margin-top: calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1) !important;\n margin-right: calc(calc(1rem * 2) * -1);\n margin-right: calc(var(--pfe-card--PaddingRight, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1);\n margin-bottom: 1rem;\n margin-bottom: var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem)));\n margin-left: calc(calc(1rem * 2) * -1);\n margin-left: calc(var(--pfe-card--PaddingLeft, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1);\n padding-top: 1rem;\n padding-top: var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem)));\n padding-right: calc(1rem * 2);\n padding-right: var(--pfe-card--PaddingRight, calc(var(--pfe-theme--container-spacer, 1rem) * 2));\n padding-left: calc(1rem * 2);\n padding-left: var(--pfe-card--PaddingLeft, calc(var(--pfe-theme--container-spacer, 1rem) * 2));\n padding-bottom: 1rem;\n padding-bottom: var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem)));\n}\n\n:host([on=\"dark\"]) .pfe-card__header {\n background-color: rgba(255, 255, 255, 0.09);\n background-color: var(--pfe-card__header--BackgroundColor--dark, rgba(255, 255, 255, var(--pfe-theme--opacity, 0.09)));\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n .pfe-card__header {\n /* IE10+ */\n background-color: #fff !important;\n color: #151515 !important;\n }\n}\n\n:host(:not([has_body]):not([has_footer])) .pfe-card__header {\n margin-bottom: calc(1rem * 2);\n margin-bottom: var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2));\n}\n\n.pfe-card__header ::slotted([pfe-overflow~=\"top\"]),\n.pfe-card__header ::slotted([overflow~=\"top\"]) {\n --pfe-card__overflow--MarginTop: calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1);\n}\n\n:host(:not([has_header])) .pfe-card__header {\n display: none;\n}\n\n:host([has_body], [has_footer]) .pfe-card__header ::slotted([pfe-overflow~=\"bottom\"]),\n:host([has_body], [has_footer]) .pfe-card__header ::slotted([overflow~=\"bottom\"]) {\n --pfe-card__overflow--MarginBottom: calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem))) * -1);\n}\n\n.pfe-card__header ::slotted([pfe-overflow~=\"bottom\"]),\n.pfe-card__header ::slotted([overflow~=\"bottom\"]) {\n --pfe-card__overflow--MarginBottom: calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1);\n}\n\n.pfe-card__header ::slotted(h1) {\n margin-bottom: 0;\n}\n\n.pfe-card__header ::slotted(h2) {\n margin-bottom: 0;\n}\n\n.pfe-card__header ::slotted(h3) {\n margin-bottom: 0;\n}\n\n.pfe-card__header ::slotted(h4) {\n margin-bottom: 0;\n}\n\n.pfe-card__header ::slotted(h5) {\n margin-bottom: 0;\n}\n\n.pfe-card__header ::slotted(h6) {\n margin-bottom: 0;\n}\n\n:host(:not([has_header])) .pfe-card__body ::slotted([pfe-overflow~=\"top\"]),\n:host(:not([has_header])) .pfe-card__body ::slotted([overflow~=\"top\"]) {\n --pfe-card__overflow--MarginTop: calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1);\n}\n\n.pfe-card__body ::slotted([pfe-overflow~=\"top\"]),\n.pfe-card__body ::slotted([overflow~=\"top\"]) {\n z-index: 1;\n --pfe-card__overflow--MarginTop: calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem))) * -1);\n}\n\n.pfe-card__body ::slotted([pfe-overflow~=\"bottom\"]),\n.pfe-card__body ::slotted([overflow~=\"bottom\"]) {\n --pfe-card__overflow--MarginBottom: calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1);\n}\n\n:host([has_footer]) .pfe-card__body ::slotted([pfe-overflow~=\"bottom\"]),\n:host([has_footer]) .pfe-card__body ::slotted([overflow~=\"bottom\"]) {\n --pfe-card__overflow--MarginBottom: calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem))) * -1);\n}\n\n:host(:not([has_footer])) .pfe-card__body {\n margin-bottom: 0;\n}\n\n.pfe-card__footer {\n margin-top: auto;\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -webkit-flex-direction: row;\n -ms-flex-direction: row;\n flex-direction: row;\n flex-direction: var(--pfe-card__footer--Row, row);\n -webkit-flex-wrap: wrap;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -webkit-flex-wrap: var(--pfe-card__footer--Wrap, wrap);\n -ms-flex-wrap: var(--pfe-card__footer--Wrap, wrap);\n flex-wrap: var(--pfe-card__footer--Wrap, wrap);\n -webkit-box-align: baseline;\n -webkit-align-items: baseline;\n -ms-flex-align: baseline;\n align-items: baseline;\n -webkit-box-align: var(--pfe-card__footer--AlignItems, baseline);\n -webkit-align-items: var(--pfe-card__footer--AlignItems, baseline);\n -ms-flex-align: var(--pfe-card__footer--AlignItems, baseline);\n align-items: var(--pfe-card__footer--AlignItems, baseline);\n}\n\n.pfe-card__footer ::slotted([pfe-overflow~=\"bottom\"]),\n.pfe-card__footer ::slotted([overflow~=\"bottom\"]) {\n --pfe-card__overflow--MarginBottom: calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1);\n}\n\n:host(:not([has_footer])) .pfe-card__footer {\n display: none;\n}\n\n.pfe-card__header, .pfe-card__body {\n margin-bottom: 1rem;\n margin-bottom: var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem)));\n}\n\n.pfe-card__header ::slotted(p:first-child), .pfe-card__body ::slotted(p:first-child) {\n margin-top: 0;\n}\n\n.pfe-card__header ::slotted(h1:first-child), .pfe-card__body ::slotted(h1:first-child) {\n margin-top: 0;\n}\n\n.pfe-card__header ::slotted(h2:first-child), .pfe-card__body ::slotted(h2:first-child) {\n margin-top: 0;\n}\n\n.pfe-card__header ::slotted(h3:first-child), .pfe-card__body ::slotted(h3:first-child) {\n margin-top: 0;\n}\n\n.pfe-card__header ::slotted(h4:first-child), .pfe-card__body ::slotted(h4:first-child) {\n margin-top: 0;\n}\n\n.pfe-card__header ::slotted(h5:first-child), .pfe-card__body ::slotted(h5:first-child) {\n margin-top: 0;\n}\n\n.pfe-card__header ::slotted(h6:first-child), .pfe-card__body ::slotted(h6:first-child) {\n margin-top: 0;\n}\n\n/*# sourceMappingURL=pfe-card.css.map */\n"]} \ No newline at end of file diff --git a/elements/pfe-card/dist/pfe-card.min.js b/elements/pfe-card/dist/pfe-card.min.js new file mode 100644 index 0000000000..6c8c286b44 --- /dev/null +++ b/elements/pfe-card/dist/pfe-card.min.js @@ -0,0 +1,26 @@ +import e from"../../pfelement/dist/pfelement.min.js"; +/*! + * PatternFly Elements: PfeCard 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * +*/class r extends e{static get version(){return"1.12.3"}get html(){return'\n\n\x3c!-- pfe-card --\x3e\n
      \n \n
      \n
      \n \n
      \n
      \n \n
      '}static get tag(){return"pfe-card"}static get meta(){return{title:"Card",description:"This element creates a header, body, and footer region in which to place content or other components."}}get templateUrl(){return"pfe-card.html"}get styleUrl(){return"pfe-card.scss"}static get properties(){return{color:{title:"Background color",type:String,values:["lightest","base","darker","darkest","complement","accent"],default:"base",observer:"_colorChanged"},oldColor:{type:String,prefix:!1,alias:"color",attr:"pfe-color"},imgSrc:{title:"Background image",type:String,observer:"_imageSrcChanged"},pfeImgSrc:{type:String,prefix:!1,alias:"imgSrc"},size:{title:"Padding size",type:String,values:["small"]},pfeSize:{type:String,values:["small"],prefix:!1,alias:"size"},border:{title:"Border",type:Boolean},oldBorder:{alias:"border",attr:"pfe-border"}}}static get slots(){return{header:{title:"Header",type:"array",namedSlot:!0,maxItems:3,items:{$ref:"raw"}},body:{title:"Body",type:"array",namedSlot:!1,items:{$ref:"raw"}},footer:{title:"Footer",type:"array",namedSlot:!0,maxItems:3,items:{oneOf:[{$ref:"pfe-cta"},{$ref:"raw"}]}}}}static get PfeType(){return e.PfeTypes.Container}constructor(){super(r,{type:r.PfeType})}_colorChanged(){this.resetContext()}_imageSrcChanged(e,r){this.style.backgroundImage=r?`url('${r}')`:""}}e.create(r);export default r; +//# sourceMappingURL=pfe-card.min.js.map diff --git a/elements/pfe-card/dist/pfe-card.min.js.map b/elements/pfe-card/dist/pfe-card.min.js.map new file mode 100644 index 0000000000..9bbee0ffba --- /dev/null +++ b/elements/pfe-card/dist/pfe-card.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-card.min.js","sources":["../_temp/pfe-card.js"],"sourcesContent":["/*!\n * PatternFly Elements: PfeCard 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement.js\";\n\nclass PfeCard extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n\n
      \n \n
      \n
      \n \n
      \n
      \n \n
      `;\n }\n\n static get tag() {\n return \"pfe-card\";\n }\n\n static get meta() {\n return {\n title: \"Card\",\n description:\n \"This element creates a header, body, and footer region in which to place content or other components.\",\n };\n }\n\n get templateUrl() {\n return \"pfe-card.html\";\n }\n\n get styleUrl() {\n return \"pfe-card.scss\";\n }\n\n // @TODO: How do we handle attributes for slotted content?\n static get properties() {\n return {\n color: {\n title: \"Background color\",\n type: String,\n values: [\"lightest\", \"base\", \"darker\", \"darkest\", \"complement\", \"accent\"],\n default: \"base\",\n observer: \"_colorChanged\",\n },\n // @TODO: Deprecate property in 1.0\n oldColor: {\n type: String,\n prefix: false,\n alias: \"color\",\n attr: \"pfe-color\",\n },\n imgSrc: {\n title: \"Background image\",\n type: String,\n observer: \"_imageSrcChanged\",\n },\n // @TODO: Deprecate property in 1.0\n pfeImgSrc: {\n type: String,\n prefix: false,\n alias: \"imgSrc\",\n },\n size: {\n title: \"Padding size\",\n type: String,\n values: [\"small\"],\n },\n // @TODO: Deprecate property in 1.0\n pfeSize: {\n type: String,\n values: [\"small\"],\n prefix: false,\n alias: \"size\",\n },\n border: {\n title: \"Border\",\n type: Boolean,\n },\n // @TODO: Deprecate property in 1.0\n oldBorder: {\n alias: \"border\",\n attr: \"pfe-border\",\n },\n };\n }\n\n static get slots() {\n return {\n header: {\n title: \"Header\",\n type: \"array\",\n namedSlot: true,\n maxItems: 3,\n items: {\n $ref: \"raw\",\n },\n },\n body: {\n title: \"Body\",\n type: \"array\",\n namedSlot: false,\n items: {\n $ref: \"raw\",\n },\n },\n footer: {\n title: \"Footer\",\n type: \"array\",\n namedSlot: true,\n maxItems: 3,\n items: {\n oneOf: [\n {\n $ref: \"pfe-cta\",\n },\n {\n $ref: \"raw\",\n },\n ],\n },\n },\n };\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Container;\n }\n\n constructor() {\n super(PfeCard, { type: PfeCard.PfeType });\n }\n\n // If the color changes, update the context\n _colorChanged() {\n // Update the context\n this.resetContext();\n }\n\n // Update the background image\n _imageSrcChanged(oldValue, newValue) {\n // Set the image as the background image\n this.style.backgroundImage = newValue ? `url('${newValue}')` : ``;\n }\n}\n\nPFElement.create(PfeCard);\n\nexport { PfeCard as default };\n"],"names":["PfeCard","PFElement","version","html","tag","meta","title","description","templateUrl","styleUrl","properties","color","type","String","values","default","observer","oldColor","prefix","alias","attr","imgSrc","pfeImgSrc","size","pfeSize","border","Boolean","oldBorder","slots","header","namedSlot","maxItems","items","$ref","body","footer","oneOf","PfeType","PfeTypes","Container","[object Object]","super","this","resetContext","oldValue","newValue","style","backgroundImage","create"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EA2BA,MAAMA,UAAgBC,EAGpBC,qBACE,MAAO,SAITC,WACE,MAAO,qtjBAcTC,iBACE,MAAO,WAGTC,kBACE,MAAO,CACLC,MAAO,OACPC,YACE,yGAINC,kBACE,MAAO,gBAGTC,eACE,MAAO,gBAITC,wBACE,MAAO,CACLC,MAAO,CACLL,MAAO,mBACPM,KAAMC,OACNC,OAAQ,CAAC,WAAY,OAAQ,SAAU,UAAW,aAAc,UAChEC,QAAS,OACTC,SAAU,iBAGZC,SAAU,CACRL,KAAMC,OACNK,QAAQ,EACRC,MAAO,QACPC,KAAM,aAERC,OAAQ,CACNf,MAAO,mBACPM,KAAMC,OACNG,SAAU,oBAGZM,UAAW,CACTV,KAAMC,OACNK,QAAQ,EACRC,MAAO,UAETI,KAAM,CACJjB,MAAO,eACPM,KAAMC,OACNC,OAAQ,CAAC,UAGXU,QAAS,CACPZ,KAAMC,OACNC,OAAQ,CAAC,SACTI,QAAQ,EACRC,MAAO,QAETM,OAAQ,CACNnB,MAAO,SACPM,KAAMc,SAGRC,UAAW,CACTR,MAAO,SACPC,KAAM,eAKZQ,mBACE,MAAO,CACLC,OAAQ,CACNvB,MAAO,SACPM,KAAM,QACNkB,WAAW,EACXC,SAAU,EACVC,MAAO,CACLC,KAAM,QAGVC,KAAM,CACJ5B,MAAO,OACPM,KAAM,QACNkB,WAAW,EACXE,MAAO,CACLC,KAAM,QAGVE,OAAQ,CACN7B,MAAO,SACPM,KAAM,QACNkB,WAAW,EACXC,SAAU,EACVC,MAAO,CACLI,MAAO,CACL,CACEH,KAAM,WAER,CACEA,KAAM,WASlBI,qBACE,OAAOpC,EAAUqC,SAASC,UAG5BC,cACEC,MAAMzC,EAAS,CAAEY,KAAMZ,EAAQqC,UAIjCG,gBAEEE,KAAKC,eAIPH,iBAAiBI,EAAUC,GAEzBH,KAAKI,MAAMC,gBAAkBF,EAAW,QAAQA,MAAe,IAInE5C,EAAU+C,OAAOhD"} \ No newline at end of file diff --git a/elements/pfe-card/dist/pfe-card.umd.js b/elements/pfe-card/dist/pfe-card.umd.js new file mode 100644 index 0000000000..e903df35e7 --- /dev/null +++ b/elements/pfe-card/dist/pfe-card.umd.js @@ -0,0 +1,256 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('../../pfelement/dist/pfelement.umd')) : + typeof define === 'function' && define.amd ? define(['../../pfelement/dist/pfelement.umd'], factory) : + (global = global || self, global.PfeCard = factory(global.PFElement)); +}(this, (function (PFElement) { 'use strict'; + + PFElement = PFElement && Object.prototype.hasOwnProperty.call(PFElement, 'default') ? PFElement['default'] : PFElement; + + var classCallCheck = function (instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } + }; + + var createClass = function () { + function defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } + + return function (Constructor, protoProps, staticProps) { + if (protoProps) defineProperties(Constructor.prototype, protoProps); + if (staticProps) defineProperties(Constructor, staticProps); + return Constructor; + }; + }(); + + var inherits = function (subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); + } + + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + enumerable: false, + writable: true, + configurable: true + } + }); + if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; + }; + + var possibleConstructorReturn = function (self, call) { + if (!self) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return call && (typeof call === "object" || typeof call === "function") ? call : self; + }; + + /*! + * PatternFly Elements: PfeCard 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * + */ + + var PfeCard = function (_PFElement) { + inherits(PfeCard, _PFElement); + createClass(PfeCard, [{ + key: "html", + + + // Injected at build-time + get: function get() { + return "\n\n\n
      \n \n
      \n
      \n \n
      \n
      \n \n
      "; + } + }, { + key: "templateUrl", + get: function get() { + return "pfe-card.html"; + } + }, { + key: "styleUrl", + get: function get() { + return "pfe-card.scss"; + } + + // @TODO: How do we handle attributes for slotted content? + + }], [{ + key: "version", + + + // Injected at build-time + get: function get() { + return "1.12.3"; + } + }, { + key: "tag", + get: function get() { + return "pfe-card"; + } + }, { + key: "meta", + get: function get() { + return { + title: "Card", + description: "This element creates a header, body, and footer region in which to place content or other components." + }; + } + }, { + key: "properties", + get: function get() { + return { + color: { + title: "Background color", + type: String, + values: ["lightest", "base", "darker", "darkest", "complement", "accent"], + default: "base", + observer: "_colorChanged" + }, + // @TODO: Deprecate property in 1.0 + oldColor: { + type: String, + prefix: false, + alias: "color", + attr: "pfe-color" + }, + imgSrc: { + title: "Background image", + type: String, + observer: "_imageSrcChanged" + }, + // @TODO: Deprecate property in 1.0 + pfeImgSrc: { + type: String, + prefix: false, + alias: "imgSrc" + }, + size: { + title: "Padding size", + type: String, + values: ["small"] + }, + // @TODO: Deprecate property in 1.0 + pfeSize: { + type: String, + values: ["small"], + prefix: false, + alias: "size" + }, + border: { + title: "Border", + type: Boolean + }, + // @TODO: Deprecate property in 1.0 + oldBorder: { + alias: "border", + attr: "pfe-border" + } + }; + } + }, { + key: "slots", + get: function get() { + return { + header: { + title: "Header", + type: "array", + namedSlot: true, + maxItems: 3, + items: { + $ref: "raw" + } + }, + body: { + title: "Body", + type: "array", + namedSlot: false, + items: { + $ref: "raw" + } + }, + footer: { + title: "Footer", + type: "array", + namedSlot: true, + maxItems: 3, + items: { + oneOf: [{ + $ref: "pfe-cta" + }, { + $ref: "raw" + }] + } + } + }; + } + + // Declare the type of this component + + }, { + key: "PfeType", + get: function get() { + return PFElement.PfeTypes.Container; + } + }]); + + function PfeCard() { + classCallCheck(this, PfeCard); + return possibleConstructorReturn(this, (PfeCard.__proto__ || Object.getPrototypeOf(PfeCard)).call(this, PfeCard, { type: PfeCard.PfeType })); + } + + // If the color changes, update the context + + + createClass(PfeCard, [{ + key: "_colorChanged", + value: function _colorChanged() { + // Update the context + this.resetContext(); + } + + // Update the background image + + }, { + key: "_imageSrcChanged", + value: function _imageSrcChanged(oldValue, newValue) { + // Set the image as the background image + this.style.backgroundImage = newValue ? "url('" + newValue + "')" : ""; + } + }]); + return PfeCard; + }(PFElement); + + PFElement.create(PfeCard); + + return PfeCard; + +}))); +//# sourceMappingURL=pfe-card.umd.js.map diff --git a/elements/pfe-card/dist/pfe-card.umd.js.map b/elements/pfe-card/dist/pfe-card.umd.js.map new file mode 100644 index 0000000000..671be4edbd --- /dev/null +++ b/elements/pfe-card/dist/pfe-card.umd.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-card.umd.js","sources":["../_temp/pfe-card.umd.js"],"sourcesContent":["/*!\n * PatternFly Elements: PfeCard 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement\";\n\nclass PfeCard extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n\n
      \n \n
      \n
      \n \n
      \n
      \n \n
      `;\n }\n\n static get tag() {\n return \"pfe-card\";\n }\n\n static get meta() {\n return {\n title: \"Card\",\n description:\n \"This element creates a header, body, and footer region in which to place content or other components.\",\n };\n }\n\n get templateUrl() {\n return \"pfe-card.html\";\n }\n\n get styleUrl() {\n return \"pfe-card.scss\";\n }\n\n // @TODO: How do we handle attributes for slotted content?\n static get properties() {\n return {\n color: {\n title: \"Background color\",\n type: String,\n values: [\"lightest\", \"base\", \"darker\", \"darkest\", \"complement\", \"accent\"],\n default: \"base\",\n observer: \"_colorChanged\",\n },\n // @TODO: Deprecate property in 1.0\n oldColor: {\n type: String,\n prefix: false,\n alias: \"color\",\n attr: \"pfe-color\",\n },\n imgSrc: {\n title: \"Background image\",\n type: String,\n observer: \"_imageSrcChanged\",\n },\n // @TODO: Deprecate property in 1.0\n pfeImgSrc: {\n type: String,\n prefix: false,\n alias: \"imgSrc\",\n },\n size: {\n title: \"Padding size\",\n type: String,\n values: [\"small\"],\n },\n // @TODO: Deprecate property in 1.0\n pfeSize: {\n type: String,\n values: [\"small\"],\n prefix: false,\n alias: \"size\",\n },\n border: {\n title: \"Border\",\n type: Boolean,\n },\n // @TODO: Deprecate property in 1.0\n oldBorder: {\n alias: \"border\",\n attr: \"pfe-border\",\n },\n };\n }\n\n static get slots() {\n return {\n header: {\n title: \"Header\",\n type: \"array\",\n namedSlot: true,\n maxItems: 3,\n items: {\n $ref: \"raw\",\n },\n },\n body: {\n title: \"Body\",\n type: \"array\",\n namedSlot: false,\n items: {\n $ref: \"raw\",\n },\n },\n footer: {\n title: \"Footer\",\n type: \"array\",\n namedSlot: true,\n maxItems: 3,\n items: {\n oneOf: [\n {\n $ref: \"pfe-cta\",\n },\n {\n $ref: \"raw\",\n },\n ],\n },\n },\n };\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Container;\n }\n\n constructor() {\n super(PfeCard, { type: PfeCard.PfeType });\n }\n\n // If the color changes, update the context\n _colorChanged() {\n // Update the context\n this.resetContext();\n }\n\n // Update the background image\n _imageSrcChanged(oldValue, newValue) {\n // Set the image as the background image\n this.style.backgroundImage = newValue ? `url('${newValue}')` : ``;\n }\n}\n\nPFElement.create(PfeCard);\n\nexport { PfeCard as default };\n"],"names":["PfeCard","title","description","color","type","String","values","default","observer","oldColor","prefix","alias","attr","imgSrc","pfeImgSrc","size","pfeSize","border","Boolean","oldBorder","header","namedSlot","maxItems","items","$ref","body","footer","oneOf","PFElement","PfeTypes","Container","PfeType","resetContext","oldValue","newValue","style","backgroundImage","create"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAA;;;;;;;;;;;;;;;;;;;;;;;;;MA2BMA;;;;;;EAOJ;0BACW;EACT;EAYD;;;0BAciB;EAChB,aAAO,eAAP;EACD;;;0BAEc;EACb,aAAO,eAAP;EACD;;EAED;;;;;;EAzCA;0BACqB;EACnB,aAAO,QAAP;EACD;;;0BAkBgB;EACf,aAAO,UAAP;EACD;;;0BAEiB;EAChB,aAAO;EACLC,eAAO,MADF;EAELC,qBACE;EAHG,OAAP;EAKD;;;0BAWuB;EACtB,aAAO;EACLC,eAAO;EACLF,iBAAO,kBADF;EAELG,gBAAMC,MAFD;EAGLC,kBAAQ,CAAC,UAAD,EAAa,MAAb,EAAqB,QAArB,EAA+B,SAA/B,EAA0C,YAA1C,EAAwD,QAAxD,CAHH;EAILC,mBAAS,MAJJ;EAKLC,oBAAU;EALL,SADF;EAQL;EACAC,kBAAU;EACRL,gBAAMC,MADE;EAERK,kBAAQ,KAFA;EAGRC,iBAAO,OAHC;EAIRC,gBAAM;EAJE,SATL;EAeLC,gBAAQ;EACNZ,iBAAO,kBADD;EAENG,gBAAMC,MAFA;EAGNG,oBAAU;EAHJ,SAfH;EAoBL;EACAM,mBAAW;EACTV,gBAAMC,MADG;EAETK,kBAAQ,KAFC;EAGTC,iBAAO;EAHE,SArBN;EA0BLI,cAAM;EACJd,iBAAO,cADH;EAEJG,gBAAMC,MAFF;EAGJC,kBAAQ,CAAC,OAAD;EAHJ,SA1BD;EA+BL;EACAU,iBAAS;EACPZ,gBAAMC,MADC;EAEPC,kBAAQ,CAAC,OAAD,CAFD;EAGPI,kBAAQ,KAHD;EAIPC,iBAAO;EAJA,SAhCJ;EAsCLM,gBAAQ;EACNhB,iBAAO,QADD;EAENG,gBAAMc;EAFA,SAtCH;EA0CL;EACAC,mBAAW;EACTR,iBAAO,QADE;EAETC,gBAAM;EAFG;EA3CN,OAAP;EAgDD;;;0BAEkB;EACjB,aAAO;EACLQ,gBAAQ;EACNnB,iBAAO,QADD;EAENG,gBAAM,OAFA;EAGNiB,qBAAW,IAHL;EAINC,oBAAU,CAJJ;EAKNC,iBAAO;EACLC,kBAAM;EADD;EALD,SADH;EAULC,cAAM;EACJxB,iBAAO,MADH;EAEJG,gBAAM,OAFF;EAGJiB,qBAAW,KAHP;EAIJE,iBAAO;EACLC,kBAAM;EADD;EAJH,SAVD;EAkBLE,gBAAQ;EACNzB,iBAAO,QADD;EAENG,gBAAM,OAFA;EAGNiB,qBAAW,IAHL;EAINC,oBAAU,CAJJ;EAKNC,iBAAO;EACLI,mBAAO,CACL;EACEH,oBAAM;EADR,aADK,EAIL;EACEA,oBAAM;EADR,aAJK;EADF;EALD;EAlBH,OAAP;EAmCD;;EAED;;;;0BACqB;EACnB,aAAOI,UAAUC,QAAV,CAAmBC,SAA1B;EACD;;;EAED,qBAAc;EAAA;EAAA,4GACN9B,OADM,EACG,EAAEI,MAAMJ,QAAQ+B,OAAhB,EADH;EAEb;;EAED;;;;;sCACgB;EACd;EACA,WAAKC,YAAL;EACD;;EAED;;;;uCACiBC,UAAUC,UAAU;EACnC;EACA,WAAKC,KAAL,CAAWC,eAAX,GAA6BF,qBAAmBA,QAAnB,YAA7B;EACD;;;IAxJmBN;;EA2JtBA,UAAUS,MAAV,CAAiBrC,OAAjB;;;;;;;;"} \ No newline at end of file diff --git a/elements/pfe-card/dist/pfe-card.umd.min.js b/elements/pfe-card/dist/pfe-card.umd.min.js new file mode 100644 index 0000000000..1287b829a4 --- /dev/null +++ b/elements/pfe-card/dist/pfe-card.umd.min.js @@ -0,0 +1,2 @@ +!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r(require("../../pfelement/dist/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../../pfelement/dist/pfelement.umd.min"],r):(e=e||self).PfeCard=r(e.PFElement)}(this,function(e){"use strict";e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e;var r=function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")},o=function(e,r,o){return r&&t(e.prototype,r),o&&t(e,o),e};function t(e,r){for(var o=0;o@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([color=accent]),:host([color=base]),:host([color=complement]),:host([color=darker]),:host([color=darkest]),:host([color=lighter]),:host([color=lightest]){background-color:#fff!important;color:#151515!important}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{color:#151515!important}}:host{--context:var(--pfe-card--context, var(--pfe-theme--color--surface--base--context, light));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;justify-items:flex-start;-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;padding:calc(1rem * 2) calc(1rem * 2) calc(1rem * 2) calc(1rem * 2);padding:var(--pfe-card--Padding,var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,1rem) * 2)) var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,1rem) * 2)) var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,1rem) * 2)) var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,1rem) * 2)));border:0 solid #d2d2d2;border:var(--pfe-card--Border,var(--pfe-card--BorderWidth,0) var(--pfe-card--BorderStyle,solid) var(--pfe-card--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2)));border-radius:3px;border-radius:var(--pfe-card--BorderRadius,var(--pfe-theme--surface--border-radius,3px));overflow:hidden;background-color:#f0f0f0;background-color:var(--pfe-card--BackgroundColor,var(--pfe-theme--color--surface--base,#f0f0f0));background-position:center center;background-position:var(--pfe-card--BackgroundPosition,center center);color:#3c3f42;color:var(--pfe-broadcasted--text,#3c3f42)}@media print{:host{background-color:#fff!important;background-image:none!important;-webkit-box-shadow:none!important;box-shadow:none!important}}@media print{:host{border-radius:3px;border:1px solid #d2d2d2}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{background-color:#fff!important;background-color:var(--pfe-theme--color--surface--lightest,#fff)!important;color:#151515!important;color:var(--pfe-theme--color--text,#151515)!important;background-image:none!important;border-radius:3px;border:1px solid #d2d2d2;padding:1rem;padding:var(--pfe-theme--container-spacer,1rem)}}:host([color=darker]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darker, #3c3f42);--pfe-card--context:var(--pfe-theme--color--surface--darker--context, dark)}:host([color=darkest]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--darkest, #151515);--pfe-card--context:var(--pfe-theme--color--surface--darkest--context, dark)}:host([color=base]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--base, #f0f0f0);--pfe-card--context:var(--pfe-theme--color--surface--base--context, light)}:host([color=lighter]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--lighter, #f0f0f0);--pfe-card--context:var(--pfe-theme--color--surface--lighter--context, light)}:host([color=lightest]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-card--context:var(--pfe-theme--color--surface--lightest--context, light)}:host([color=accent]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--accent, #004080);--pfe-card--context:var(--pfe-theme--color--surface--accent--context, saturated)}:host([color=complement]){--pfe-card--BackgroundColor:var(--pfe-theme--color--surface--complement, #002952);--pfe-card--context:var(--pfe-theme--color--surface--complement--context, saturated)}:host([on=dark]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted--on-dark, #d2d2d2);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([on=saturated]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([on=light]){--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--text--muted:var(--pfe-theme--color--text--muted, #6a6e73);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host([size=small]){--pfe-card--PaddingTop:var(--pfe-theme--container-spacer, 1rem);--pfe-card--PaddingRight:var(--pfe-theme--container-spacer, 1rem);--pfe-card--PaddingBottom:var(--pfe-theme--container-spacer, 1rem);--pfe-card--PaddingLeft:var(--pfe-theme--container-spacer, 1rem)}:host([border]:not([border=false])){--pfe-card--BorderWidth:1px}.pfe-card__body ::slotted([overflow~=top]),.pfe-card__body ::slotted([pfe-overflow~=top]),.pfe-card__footer ::slotted([overflow~=top]),.pfe-card__footer ::slotted([pfe-overflow~=top]),.pfe-card__header ::slotted([overflow~=top]),.pfe-card__header ::slotted([pfe-overflow~=top]){z-index:1;margin-top:-2rem;margin-top:calc(-1 * calc(1rem * 2))!important;margin-top:calc(-1 * var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,1rem) * 2)))!important}:host([has_header]) .pfe-card__body ::slotted([overflow~=top]),:host([has_header]) .pfe-card__body ::slotted([pfe-overflow~=top]),:host([has_header]) .pfe-card__footer ::slotted([overflow~=top]),:host([has_header]) .pfe-card__footer ::slotted([pfe-overflow~=top]),:host([has_header]) .pfe-card__header ::slotted([overflow~=top]),:host([has_header]) .pfe-card__header ::slotted([pfe-overflow~=top]){padding-top:1rem;padding-top:var(--pfe-card--spacing,var(--pfe-theme--container-spacer,1rem))}.pfe-card__body ::slotted([overflow~=right]),.pfe-card__body ::slotted([pfe-overflow~=right]),.pfe-card__footer ::slotted([overflow~=right]),.pfe-card__footer ::slotted([pfe-overflow~=right]),.pfe-card__header ::slotted([overflow~=right]),.pfe-card__header ::slotted([pfe-overflow~=right]){margin-right:-2rem;margin-right:calc(-1 * calc(1rem * 2));margin-right:calc(-1 * var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,1rem) * 2)))}.pfe-card__body ::slotted([overflow~=bottom]),.pfe-card__body ::slotted([pfe-overflow~=bottom]),.pfe-card__footer ::slotted([overflow~=bottom]),.pfe-card__footer ::slotted([pfe-overflow~=bottom]),.pfe-card__header ::slotted([overflow~=bottom]),.pfe-card__header ::slotted([pfe-overflow~=bottom]){margin-bottom:-2rem;margin-bottom:calc(-1 * calc(calc(1rem * 2) + 3px));margin-bottom:calc(-1 * calc(var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,1rem) * 2)) + var(--pfe-card--BorderRadius,var(--pfe-theme--surface--border-radius,3px))));-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end}.pfe-card__body ::slotted([overflow~=left]),.pfe-card__body ::slotted([pfe-overflow~=left]),.pfe-card__footer ::slotted([overflow~=left]),.pfe-card__footer ::slotted([pfe-overflow~=left]),.pfe-card__header ::slotted([overflow~=left]),.pfe-card__header ::slotted([pfe-overflow~=left]){margin-left:-2rem;margin-left:calc(-1 * calc(1rem * 2));margin-left:calc(-1 * var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,1rem) * 2)))}.pfe-card__body ::slotted(img),.pfe-card__footer ::slotted(img),.pfe-card__header ::slotted(img){max-width:100%!important;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;-o-object-fit:cover;object-fit:cover}.pfe-card__body ::slotted(img:not[overflow]),.pfe-card__body ::slotted(img:not[pfe-overflow]),.pfe-card__footer ::slotted(img:not[overflow]),.pfe-card__footer ::slotted(img:not[pfe-overflow]),.pfe-card__header ::slotted(img:not[overflow]),.pfe-card__header ::slotted(img:not[pfe-overflow]){-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}.pfe-card__body ::slotted(img[overflow]),.pfe-card__body ::slotted(img[pfe-overflow]),.pfe-card__footer ::slotted(img[overflow]),.pfe-card__footer ::slotted(img[pfe-overflow]),.pfe-card__header ::slotted(img[overflow]),.pfe-card__header ::slotted(img[pfe-overflow]){max-width:unset!important}.pfe-card__body ::slotted(img[overflow~=right]),.pfe-card__body ::slotted(img[pfe-overflow~=right]),.pfe-card__footer ::slotted(img[overflow~=right]),.pfe-card__footer ::slotted(img[pfe-overflow~=right]),.pfe-card__header ::slotted(img[overflow~=right]),.pfe-card__header ::slotted(img[pfe-overflow~=right]){width:calc(100% + 2rem)!important;width:calc(100% + calc(1rem * 2))!important;width:calc(100% + var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,1rem) * 2)))!important}.pfe-card__body ::slotted(img[overflow~=left]),.pfe-card__body ::slotted(img[pfe-overflow~=left]),.pfe-card__footer ::slotted(img[overflow~=left]),.pfe-card__footer ::slotted(img[pfe-overflow~=left]),.pfe-card__header ::slotted(img[overflow~=left]),.pfe-card__header ::slotted(img[pfe-overflow~=left]){width:calc(100% + 2rem)!important;width:calc(100% + calc(1rem * 2))!important;width:calc(100% + var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,1rem) * 2)))!important}.pfe-card__body ::slotted(img[overflow~=right][overflow~=left]),.pfe-card__body ::slotted(img[pfe-overflow~=right][pfe-overflow~=left]),.pfe-card__footer ::slotted(img[overflow~=right][overflow~=left]),.pfe-card__footer ::slotted(img[pfe-overflow~=right][pfe-overflow~=left]),.pfe-card__header ::slotted(img[overflow~=right][overflow~=left]),.pfe-card__header ::slotted(img[pfe-overflow~=right][pfe-overflow~=left]){width:calc(100% + 4rem)!important;width:calc(100% + calc(1rem * 2) + calc(1rem * 2))!important;width:calc(100% + var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,1rem) * 2)) + var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,1rem) * 2)))!important}.pfe-card__header{z-index:2;background-color:rgba(0,0,0,.09);background-color:var(--pfe-card__header--BackgroundColor,rgba(0,0,0,var(--pfe-theme--opacity,.09)));color:#3c3f42;color:var(--pfe-card__header--Color,var(--pfe-broadcasted--text,#3c3f42));margin-top:calc(calc(1rem * 2) * -1)!important;margin-top:calc(var(--pfe-card--PaddingTop,calc(var(--pfe-theme--container-spacer,1rem) * 2)) * -1)!important;margin-right:calc(calc(1rem * 2) * -1);margin-right:calc(var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,1rem) * 2)) * -1);margin-bottom:1rem;margin-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,1rem)));margin-left:calc(calc(1rem * 2) * -1);margin-left:calc(var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,1rem) * 2)) * -1);padding-top:1rem;padding-top:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,1rem)));padding-right:calc(1rem * 2);padding-right:var(--pfe-card--PaddingRight,calc(var(--pfe-theme--container-spacer,1rem) * 2));padding-left:calc(1rem * 2);padding-left:var(--pfe-card--PaddingLeft,calc(var(--pfe-theme--container-spacer,1rem) * 2));padding-bottom:1rem;padding-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,1rem)))}:host([on=dark]) .pfe-card__header{background-color:rgba(255,255,255,.09);background-color:var(--pfe-card__header--BackgroundColor--dark,rgba(255,255,255,var(--pfe-theme--opacity,.09)))}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){.pfe-card__header{background-color:#fff!important;color:#151515!important}}:host(:not([has_body]):not([has_footer])) .pfe-card__header{margin-bottom:calc(1rem * 2);margin-bottom:var(--pfe-card--PaddingBottom,calc(var(--pfe-theme--container-spacer,1rem) * 2))}.pfe-card__header ::slotted([overflow~=top]),.pfe-card__header ::slotted([pfe-overflow~=top]){--pfe-card__overflow--MarginTop:calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1)}:host(:not([has_header])) .pfe-card__header{display:none}:host([has_body],[has_footer]) .pfe-card__header ::slotted([overflow~=bottom]),:host([has_body],[has_footer]) .pfe-card__header ::slotted([pfe-overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem))) * -1)}.pfe-card__header ::slotted([overflow~=bottom]),.pfe-card__header ::slotted([pfe-overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1)}.pfe-card__header ::slotted(h1){margin-bottom:0}.pfe-card__header ::slotted(h2){margin-bottom:0}.pfe-card__header ::slotted(h3){margin-bottom:0}.pfe-card__header ::slotted(h4){margin-bottom:0}.pfe-card__header ::slotted(h5){margin-bottom:0}.pfe-card__header ::slotted(h6){margin-bottom:0}:host(:not([has_header])) .pfe-card__body ::slotted([overflow~=top]),:host(:not([has_header])) .pfe-card__body ::slotted([pfe-overflow~=top]){--pfe-card__overflow--MarginTop:calc(var(--pfe-card--PaddingTop, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1)}.pfe-card__body ::slotted([overflow~=top]),.pfe-card__body ::slotted([pfe-overflow~=top]){z-index:1;--pfe-card__overflow--MarginTop:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem))) * -1)}.pfe-card__body ::slotted([overflow~=bottom]),.pfe-card__body ::slotted([pfe-overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1)}:host([has_footer]) .pfe-card__body ::slotted([overflow~=bottom]),:host([has_footer]) .pfe-card__body ::slotted([pfe-overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--spacing--vertical, var(--pfe-card--spacing, var(--pfe-theme--container-spacer, 1rem))) * -1)}:host(:not([has_footer])) .pfe-card__body{margin-bottom:0}.pfe-card__footer{margin-top:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;flex-direction:var(--pfe-card__footer--Row,row);-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-wrap:var(--pfe-card__footer--Wrap,wrap);-ms-flex-wrap:var(--pfe-card__footer--Wrap,wrap);flex-wrap:var(--pfe-card__footer--Wrap,wrap);-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-align:var(--pfe-card__footer--AlignItems,baseline);-webkit-align-items:var(--pfe-card__footer--AlignItems,baseline);-ms-flex-align:var(--pfe-card__footer--AlignItems,baseline);align-items:var(--pfe-card__footer--AlignItems,baseline)}.pfe-card__footer ::slotted([overflow~=bottom]),.pfe-card__footer ::slotted([pfe-overflow~=bottom]){--pfe-card__overflow--MarginBottom:calc(var(--pfe-card--PaddingBottom, calc(var(--pfe-theme--container-spacer, 1rem) * 2)) * -1)}:host(:not([has_footer])) .pfe-card__footer{display:none}.pfe-card__body,.pfe-card__header{margin-bottom:1rem;margin-bottom:var(--pfe-card--spacing--vertical,var(--pfe-card--spacing,var(--pfe-theme--container-spacer,1rem)))}.pfe-card__body ::slotted(p:first-child),.pfe-card__header ::slotted(p:first-child){margin-top:0}.pfe-card__body ::slotted(h1:first-child),.pfe-card__header ::slotted(h1:first-child){margin-top:0}.pfe-card__body ::slotted(h2:first-child),.pfe-card__header ::slotted(h2:first-child){margin-top:0}.pfe-card__body ::slotted(h3:first-child),.pfe-card__header ::slotted(h3:first-child){margin-top:0}.pfe-card__body ::slotted(h4:first-child),.pfe-card__header ::slotted(h4:first-child){margin-top:0}.pfe-card__body ::slotted(h5:first-child),.pfe-card__header ::slotted(h5:first-child){margin-top:0}.pfe-card__body ::slotted(h6:first-child),.pfe-card__header ::slotted(h6:first-child){margin-top:0} /*# sourceMappingURL=pfe-card.min.css.map */\n\x3c!-- pfe-card --\x3e\n
      \n \n
      \n
      \n \n
      \n
      \n \n
      '}},{key:"templateUrl",get:function(){return"pfe-card.html"}},{key:"styleUrl",get:function(){return"pfe-card.scss"}}],[{key:"version",get:function(){return"1.12.3"}},{key:"tag",get:function(){return"pfe-card"}},{key:"meta",get:function(){return{title:"Card",description:"This element creates a header, body, and footer region in which to place content or other components."}}},{key:"properties",get:function(){return{color:{title:"Background color",type:String,values:["lightest","base","darker","darkest","complement","accent"],default:"base",observer:"_colorChanged"},oldColor:{type:String,prefix:!1,alias:"color",attr:"pfe-color"},imgSrc:{title:"Background image",type:String,observer:"_imageSrcChanged"},pfeImgSrc:{type:String,prefix:!1,alias:"imgSrc"},size:{title:"Padding size",type:String,values:["small"]},pfeSize:{type:String,values:["small"],prefix:!1,alias:"size"},border:{title:"Border",type:Boolean},oldBorder:{alias:"border",attr:"pfe-border"}}}},{key:"slots",get:function(){return{header:{title:"Header",type:"array",namedSlot:!0,maxItems:3,items:{$ref:"raw"}},body:{title:"Body",type:"array",namedSlot:!1,items:{$ref:"raw"}},footer:{title:"Footer",type:"array",namedSlot:!0,maxItems:3,items:{oneOf:[{$ref:"pfe-cta"},{$ref:"raw"}]}}}}},{key:"PfeType",get:function(){return e.PfeTypes.Container}}]),o(d,[{key:"_colorChanged",value:function(){this.resetContext()}},{key:"_imageSrcChanged",value:function(e,r){this.style.backgroundImage=r?"url('"+r+"')":""}}]),d);function d(){return r(this,d),a(this,(d.__proto__||Object.getPrototypeOf(d)).call(this,d,{type:d.PfeType}))}return e.create(o),o}); +//# sourceMappingURL=pfe-card.umd.min.js.map diff --git a/elements/pfe-card/dist/pfe-card.umd.min.js.map b/elements/pfe-card/dist/pfe-card.umd.min.js.map new file mode 100644 index 0000000000..32657a4373 --- /dev/null +++ b/elements/pfe-card/dist/pfe-card.umd.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-card.umd.min.js","sources":["../_temp/pfe-card.umd.js"],"sourcesContent":["/*!\n * PatternFly Elements: PfeCard 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement\";\n\nclass PfeCard extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n\n
      \n \n
      \n
      \n \n
      \n
      \n \n
      `;\n }\n\n static get tag() {\n return \"pfe-card\";\n }\n\n static get meta() {\n return {\n title: \"Card\",\n description:\n \"This element creates a header, body, and footer region in which to place content or other components.\",\n };\n }\n\n get templateUrl() {\n return \"pfe-card.html\";\n }\n\n get styleUrl() {\n return \"pfe-card.scss\";\n }\n\n // @TODO: How do we handle attributes for slotted content?\n static get properties() {\n return {\n color: {\n title: \"Background color\",\n type: String,\n values: [\"lightest\", \"base\", \"darker\", \"darkest\", \"complement\", \"accent\"],\n default: \"base\",\n observer: \"_colorChanged\",\n },\n // @TODO: Deprecate property in 1.0\n oldColor: {\n type: String,\n prefix: false,\n alias: \"color\",\n attr: \"pfe-color\",\n },\n imgSrc: {\n title: \"Background image\",\n type: String,\n observer: \"_imageSrcChanged\",\n },\n // @TODO: Deprecate property in 1.0\n pfeImgSrc: {\n type: String,\n prefix: false,\n alias: \"imgSrc\",\n },\n size: {\n title: \"Padding size\",\n type: String,\n values: [\"small\"],\n },\n // @TODO: Deprecate property in 1.0\n pfeSize: {\n type: String,\n values: [\"small\"],\n prefix: false,\n alias: \"size\",\n },\n border: {\n title: \"Border\",\n type: Boolean,\n },\n // @TODO: Deprecate property in 1.0\n oldBorder: {\n alias: \"border\",\n attr: \"pfe-border\",\n },\n };\n }\n\n static get slots() {\n return {\n header: {\n title: \"Header\",\n type: \"array\",\n namedSlot: true,\n maxItems: 3,\n items: {\n $ref: \"raw\",\n },\n },\n body: {\n title: \"Body\",\n type: \"array\",\n namedSlot: false,\n items: {\n $ref: \"raw\",\n },\n },\n footer: {\n title: \"Footer\",\n type: \"array\",\n namedSlot: true,\n maxItems: 3,\n items: {\n oneOf: [\n {\n $ref: \"pfe-cta\",\n },\n {\n $ref: \"raw\",\n },\n ],\n },\n },\n };\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Container;\n }\n\n constructor() {\n super(PfeCard, { type: PfeCard.PfeType });\n }\n\n // If the color changes, update the context\n _colorChanged() {\n // Update the context\n this.resetContext();\n }\n\n // Update the background image\n _imageSrcChanged(oldValue, newValue) {\n // Set the image as the background image\n this.style.backgroundImage = newValue ? `url('${newValue}')` : ``;\n }\n}\n\nPFElement.create(PfeCard);\n\nexport { PfeCard as default };\n"],"names":["PfeCard","PFElement","String","Boolean","PfeTypes","Container","resetContext","oldValue","newValue","style","backgroundImage","type","PfeType","create"],"mappings":"m1BA2BMA,+TAAgBC,wyjBAoCX,uDAIA,wDApCA,2CAoBA,8CAIA,OACE,mBAEL,kJAcG,OACE,OACE,wBACDC,cACE,CAAC,WAAY,OAAQ,SAAU,UAAW,aAAc,kBACvD,gBACC,0BAGF,MACFA,eACE,QACD,aACD,oBAEA,OACC,wBACDA,gBACI,8BAGD,MACHA,eACE,QACD,eAEH,OACG,oBACDA,cACE,CAAC,kBAGF,MACDA,cACE,CAAC,iBACD,QACD,eAED,OACC,cACDC,mBAGG,OACF,cACD,mDAMH,QACG,OACC,cACD,mBACK,WACD,QACH,MACC,aAGJ,OACG,YACD,mBACK,QACJ,MACC,eAGF,OACC,cACD,mBACK,WACD,QACH,OACE,CACL,MACQ,WAER,MACQ,kDAUTF,EAAUG,SAASC,8DAUrBC,wDAIUC,EAAUC,QAEpBC,MAAMC,gBAAkBF,UAAmBA,wGAZ1CR,EAAS,CAAEW,KAAMX,EAAQY,kBAgBnCX,EAAUY,OAAOb"} \ No newline at end of file diff --git a/elements/pfe-card/package.json b/elements/pfe-card/package.json index 8778d7c1c7..db871710e4 100644 --- a/elements/pfe-card/package.json +++ b/elements/pfe-card/package.json @@ -5,7 +5,7 @@ "elementName": "pfe-card", "preview": "card.svg" }, - "version": "1.12.2", + "version": "1.12.3", "publishConfig": { "access": "public" }, @@ -53,10 +53,10 @@ ], "license": "MIT", "devDependencies": { - "@patternfly/pfe-sass": "^1.12.2" + "@patternfly/pfe-sass": "^1.12.3" }, "dependencies": { - "@patternfly/pfelement": "^1.12.2" + "@patternfly/pfelement": "^1.12.3" }, "generator-pfelement-version": "0.5.0", "bugs": { diff --git a/elements/pfe-clipboard/dist/pfe-clipboard.css.map b/elements/pfe-clipboard/dist/pfe-clipboard.css.map new file mode 100644 index 0000000000..b196c76910 --- /dev/null +++ b/elements/pfe-clipboard/dist/pfe-clipboard.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["pfe-clipboard.scss","../../pfe-sass/functions/_custom-properties.scss","../../pfe-sass/mixins/_copy-mixins.scss","pfe-clipboard.css","../../pfe-sass/mixins/_mixins.scss"],"names":[],"mappings":"AAyBA;EACE,oBAAa;EAAb,qBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,mBAAc;EAAd,sBAAc;MAAd,kBAAc;UAAd,cAAc;EACd,yBAAmB;EAAnB,2BAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;EACnB,8BAAsB;EAAtB,2BAAsB;EAAtB,sBAAsB;EACtB,sBAAkC;EAAlC,iFAAkC;EAClC,eAAe;EACf,iBC+CkC;ED/ClC,gDC+CkC;ED9ClC,gBC8CkC;ED9ClC,wFC8CkC;EC6HxB,eAAW;EAAX,+EAAW;AClMvB;;AH2BA;EACE,aAAa;AGxBf;;AH6BE;EACE,oBAAa;EAAb,qBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,UCkCgC;EDlChC,0ECkCgC;EDhChC,YCgCgC;EDhChC,gDCgCgC;ED/BhC,uBC+BgC;ED/BhC,2DC+BgC;ED7BhC,mGAAkB;AG5BtB;;AHqBG;EAUG,wBAAuC;EAAvC,iGAAuC;AG3B7C;;AH8BI;EACE,YAAY;AG3BlB;;AH8BE;EACE,sBAAkC;EAAlC,iFAAkC;AG3BtC;;AH6BI;EACE,yBAA4C;EAA5C,4GAA4C;AG1BlD;;AH8BE;EACE,yBAAiD;EAAjD,iHAAiD;AG3BrD;;AHiCA;;EAIM,yBAAyC;EAAzC,kGAAyC;AGhC/C;;AH4BA;;EAQM,6GAAkB;AG/BxB;;AHuBA;;EAWQ,wBAA8C;EAA9C,2GAA8C;AG7BtD;;AHoCA;;EAEE,wBAAwB;AGjC1B;;AHmCA;;EAEE,wBAAwB;AGhC1B;;AHqCA;;EAEE,WAAW;AGlCb;;AHqCA;EACE,aAAa;AGlCf;;AHoCE;EACE,cAAc;AGjClB;;AHsCE;EACE,aAAa;AGnCjB;;AHuCA;EACE,6HAA6B;EAC7B,iIAAoC;AGpCtC;;AHuCA;EACE,uIAA6B;EAC7B,2IAAoC;AGpCtC;;AC3FM;EAAsF,UAAA;EJmI1F;IAEE,qBAAqB;EGpCvB;EHsCA;IACE,qBAAqB;IACrB,eAAe;EGpCjB;EHsCA;IACE,qBAAqB;EGpCvB;EHsCA;IACE,qBAAqB;EGpCvB;AACF","file":"pfe-clipboard.css","sourcesContent":["// Please see the pfe-sass README for guidance on using these tools\n@import \"../../pfe-sass/pfe-sass\";\n\n$LOCAL: clipboard;\n\n// This variable is global so that helper functions can reference it\n$LOCAL-VARIABLES: (\n Padding: 6px 16px,\n FontWeight: pfe-var(font-weight--light),\n Color: pfe-broadcasted(link),\n Color--hover: pfe-broadcasted(link--hover),\n Color--focus: pfe-broadcasted(link--focus),\n Color--disabled: pfe-var(ui-disabled--text),\n text--success--Color: pfe-var(feedback--success),\n icon--Width: pfe-var(icon-size),\n icon--Height: auto,\n icon--Margin: 0 0.4825rem 0 0, // 7.72px\n icon--Color: pfe-var(text--muted),\n icon--Color--hover: pfe-var(ui-base--hover),\n icon--Color--dark: pfe-var(text--muted--on-dark),\n icon--Color--hover--dark: pfe-var(text--on-dark),\n icon--Color--saturated: pfe-var(text--muted--on-saturated),\n icon--Color--hover--saturated: pfe-var(text--on-saturated),\n);\n\n:host {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n max-width: fit-content;\n color: pfe-local(Color) !important;\n cursor: pointer;\n padding: pfe-local(Padding);\n font-weight: pfe-local(FontWeight);\n @include pfe-c-typography($type: text, $sizing: md);\n}\n\n:host([hidden]) {\n display: none;\n}\n\n//-- Custom styles applied to slot's shadow element\n.pfe-clipboard {\n &__icon {\n display: flex;\n width: pfe-local(icon--Width);\n // This is needed if the icon isn't square\n height: pfe-local(icon--Height);\n margin: pfe-local(icon--Margin);\n // Customize icon color for pfe-icons\n --pfe-icon--Color: #{pfe-local(icon--Color)};\n svg {\n // Customize icon color of fallback svg icon\n fill: pfe-local(icon--Color) !important;\n }\n\n :host([disabled]) & {\n opacity: 0.4;\n }\n }\n &__text {\n color: pfe-local(Color) !important;\n\n :host([disabled]) & {\n color: pfe-local(Color--disabled) !important;\n }\n }\n\n &__text--success {\n color: pfe-local(text--success--Color) !important;\n }\n}\n\n// Attach variables to hover, focus states\n// ignore disabled.\n:host(:hover:not([disabled])),\n:host(:focus:not([disabled])) {\n .pfe-clipboard {\n &__text {\n color: pfe-local(Color--hover) !important;\n }\n &__icon {\n // Customize icon color for pfe-icons\n --pfe-icon--Color: #{pfe-local(icon--Color--hover)};\n svg {\n // Customize icon color of fallback svg icon\n fill: pfe-local(icon--Color--hover) !important;\n }\n }\n }\n}\n\n// Flipped clipboard text and success text\n:host([copied]) .pfe-clipboard__text,\n.pfe-clipboard[copied] .pfe-clipboard__text {\n display: none !important;\n}\n:host(:not([copied])) .pfe-clipboard__text--success,\n.pfe-clipboard:not([copied]) .pfe-clipboard__text--success {\n display: none !important;\n}\n\n//-- Custom styles applied to slot\n// Targets icon in the shadowdom and lightdom\n::slotted([slot=\"icon\"]),\n.pfe-clipboard__icon > * {\n width: 100%;\n}\n\n#icon--url {\n display: none;\n\n :host([copy-from=\"url\"]) & {\n display: block;\n }\n}\n\n#icon--copy {\n :host([copy-from=\"url\"]) & {\n display: none;\n }\n}\n\n:host([on=\"dark\"]) {\n --pfe-clipboard--icon--Color: #{pfe-local(icon--Color--dark)};\n --pfe-clipboard--icon--Color--hover: #{pfe-local(icon--Color--hover--dark)};\n}\n\n:host([on=\"saturated\"]) {\n --pfe-clipboard--icon--Color: #{pfe-local(icon--Color--saturated)};\n --pfe-clipboard--icon--Color--hover: #{pfe-local(icon--Color--hover--saturated)};\n}\n\n@include browser-query(ie11) {\n :host {\n // fallback for inline-flex\n display: inline-block;\n }\n .pfe-clipboard__icon {\n display: inline-block;\n margin-right: 0;\n }\n .pfe-clipboard__text {\n display: inline-block;\n }\n .pfe-clipboard__text--success {\n display: inline-block;\n }\n}\n","////\n/// Tools for leveraging custom property stacks\n/// @group custom-properties\n/// @author castastrophe\n////\n\n/// Get full theme stack with a fallback from the provided map - used by pfe-var and pfe-zindex\n/// @param {String} $category - Category name to be appended to variables within the map/system\n/// @param {String} $key - Variable name to be used and prepended with --pfe-theme\n/// @param {Map} $map - Sass map of variables\n/// @param {String} $fallback [null] - Optional fallback override\n/// @param {Boolean} $use-fallback [true] - Optional hook to return a stack with no fallback value\n/// @requires $custom-prop-prefix\n/// @return {String} theme stack with fallback value from a sass map\n@function pfe-get-from-map($category, $key, $map, $fallback: null, $prefix: \"#{$custom-prop-prefix}-theme\", $use-fallback: true) {\n // Start building the variable declaration\n $var-declaration: \"--#{$prefix}--\";\n @if $prefix == \"pf-c\" {\n $var-declaration: \"--#{$prefix}-\"; // one dash at the end\n }\n // If the category exists, inject that into the string\n @if $category != \"\" {\n $var-declaration: \"#{$var-declaration}#{$category}--\";\n }\n // Append the key to the string\n $var-declaration: \"#{$var-declaration}#{$key}\";\n\n // If the fallback is not provided but use-fallback is set to true\n @if $fallback == null and $use-fallback and map-get($map, $key) != null {\n $fallback: map-get($map, $key);\n }\n @if $fallback != null {\n // Create the variable declaration\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration}); \n}\n\n\n\n/// Returns CSS Var for the local component-scoped variable\n/// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--'\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $custom-prop-prefix\n/// @see $LOCAL\n/// @example\n/// :host {\n/// padding-top: #{pfe-local(paddingTop)};\n/// padding-bottom: #{pfe-local(paddingBottom)};\n/// }\n@function pfe-local($cssvar, $fallback: null, $region: null) {\n // If a fallback is not defined, use the global variables map\n @if $fallback == null and length($LOCAL-VARIABLES) > 0 {\n @if $region == null {\n $fallback: map-get($LOCAL-VARIABLES, $cssvar);\n }\n @else {\n $submap: map-get($LOCAL-VARIABLES, $region);\n @if type-of($submap) == \"map\" {\n $fallback: map-deep-get($LOCAL-VARIABLES, $region, $cssvar);\n }\n }\n }\n\n // If a region value exists, build the region string\n @if $region != null {\n $region: \"__#{$region}\";\n }\n\n // Start building the variable declaration\n $var-declaration: \"--#{$custom-prop-prefix}-#{$LOCAL}#{$region}--#{to-string($cssvar, '--')}\";\n \n @if $fallback != null {\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration});\n}\n\n/// Fetches a CSS variable stack for broadcasted variables, providing a hook for context\n/// to influence the styles of children elements such as p tags or links.\n/// @param {String} $broadcast - name of the broadcast variable to apply\n/// @requires {String} $custom-prop-prefix - Name of repo, which is \"pfe\"\n/// @example - scss\n/// :host {\n/// color: pfe-broadcasted(link);\n/// }\n/// @example - css\n/// :host {\n/// color: var(--pfe-broadcasted--link, #06c);\n/// }\n@function pfe-broadcasted($broadcast, $use-fallback: true) {\n $fallback: \"\";\n @if $use-fallback {\n $fallback: \", #{map-get($pfe-broadcasted, #{to-string($broadcast,'--')})}\";\t\n }\n @if not index($BROADCAST-VARS, first(str-split($broadcast, '--'))) {\n @error \"--#{$custom-prop-prefix}-broadcasted--#{$broadcast} variable is not currently supported.\";\n }\n @else {\n @return var(--#{$custom-prop-prefix}-broadcasted--#{to-string($broadcast,'--')}#{unquote($fallback)});\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme--zindex\n/// @requires {Map} $pfe-zindex - SASS Map of z-index values\n/// @see $pfe-zindex\n/// @example - scss - In your component styles\n/// .my-element {\n/// z-index: pfe-zindex( content );\n/// }\n\n@function pfe-zindex($cssvar) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-zindex, $var-name) != null {\n @return pfe-get-from-map(\"zindex\", $var-name, $pfe-zindex);\n }\n @else {\n @error \"The key for #{$var-name} could not be found in the $pfe-zindex map.\";\n }\n}\n\n/// Returns the value (only) of a property from the respective maps\n/// Similar to pfe-var, but does not include css variable in the compiled CSS\n/// @param {String} $name - Name of the key for the map\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example - scss - In your component styles\n/// .my-element {\n/// background-color: pfe-fetch( ui-base );\n/// }\n@function pfe-fetch($name, $region: null) {\n $var-name: to-string($name, \"--\");\n @if $region != null and map-deep-get($LOCAL-VARIABLES, $region, $var-name) != null {\n @return map-deep-get($LOCAL-VARIABLES, $region, $var-name);\n }\n @else if $region == null and map-get($LOCAL-VARIABLES, $var-name) != null {\n @return map-get($LOCAL-VARIABLES, $var-name);\n }\n @else if map-get($pfe-vars, $var-name) != null {\n @return map-get($pfe-vars, $var-name);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return map-get($pfe-colors, $var-name);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return map-get($pfe-broadcasted, $var-name);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return map-get($pfe-typography-base, $var-name);\n }\n\n // PATTERNFLY CORE\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return map-get($pf-type-sizing, $var-name);\n }\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return map-get($pf-type-sizing--component, $var-name);\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return map-get($pf-type-sizing--modifers, $var-name);\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return map-get($pf-type-sizing--content, $var-name);\n }\n // DEPRECATED\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return map-get($pfe-typography-base-deprecated, $var-name);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return map-get($pfe-typography-deprecated, $var-name);\n }\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme\n/// @param {String} $fallback [null] - Optional custom fallback\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example scss - In your component styles\n/// .my-element {\n/// padding: pfe-var( container-spacer );\n/// font-size: pfe-var( font-size );\n/// }\n/// @example - css Rendered output\n/// .my-element {\n/// padding: var(--pfe-theme--container-spacer, 16px);\n/// font-size: var(--pfe-theme--font-size, 16px);\n/// }\n@function pfe-var($cssvar, $fallback: null) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-vars, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-vars, $fallback);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return pfe-get-from-map(\"color\", $var-name, $pfe-colors, $fallback);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-broadcasted);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base, $fallback);\n }\n // PATTERNFLY CORE:\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing, $fallback, $prefix: \"pf-global\");\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--modifers, $fallback, $prefix: \"pf-c\");\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--content, $fallback, $prefix: \"pf-c\");\n }\n // PFE components (must be below core)\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--component, $fallback);\n }\n\n // DEPRECATED:\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base-deprecated, $fallback);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-deprecated, $fallback);\n }\n\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}","@import \"../maps/_typography\";\n\n/// Mixin for creating an accessible focus state\n/// @group tools\n/// @param {Color} $color [$pfe-color--link]\n/// @see {variable} $pfe-color--link\n/// @example - scss\n/// .thing {\n/// @include pfe-accessibility-focus($pfe-color--link--on-dark);\n/// }\n/// @example - css\n/// .thing {\n/// outline-offset: 1px;\n/// outline-style: dotted;\n/// outline-width: 1px;\n/// text-decoration: none !important;\n/// outline-color: #73bcf7;\n/// }\n@mixin pfe-accessibility-focus($color: $pfe-color--link) {\n outline-offset: 1px;\n outline-style: dotted;\n outline-width: 1px;\n text-decoration: none !important;\n\n @if type-of($color) ==color {\n outline-color: $color;\n }\n}\n\n@mixin pfe-underline($color: default-link-hover-line, $opacity: 1) {\n text-decoration: underline;\n text-decoration-skip: ink;\n}\n\n/// Mixin for authors outside of PFE to control spacing between content\n/// @group typography\n/// @param {*} $sizing [lg, md, sm] \n/// @param {*} $type [heading, body] \n/// @example - scss\n/// @include pfe-content--text--spacing-block(sm);\n@mixin pfe-content--text--spacing-block($sizing: md, $type: body) {\n &:not(:last-child):not(:empty) {\n margin-bottom: pfe-var(content-spacer--#{$type}--#{$sizing}); //16px\n }\n} \n\n/// Mixin for authors outside of PFE to customize block level elements\n/// The variable stack includes a hook just for headings when they appear in the \n/// light DOM within components: --pf-c--FontSize\n///\n/// Components can't control the font size of block level elements like HTML headings \n/// when they are in the light DOM. A component _could_ redefine the variables for \n/// standard headings by using the variable hooks such as: `--pf-c--content--h4--FontSize` \n/// but it can't know if the light DOM might contain an H1, H2, H3, etc. it shouldn't\n/// redefine the variables for all possible headings. Instead, there is one dedicated\n/// variable for this purpose. \n/// @group typography\n/// @param {*} $sizing [h1, h2, h3, h4, h5, h6, p, small] \n/// @example - scss\n/// .project-wrapper h3 {\n/// @include pfe-title(xl); \n/// }\n/// @example - css\n/// .project-wrapper h3 {\n/// font-family: \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif;\n/// font-family: var(--pfe-theme--font-family--heading, \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif);\n/// line-height: 1.3;\n/// line-height: var(--pfe-theme--line-height--heading, 1.3);\n/// font-weight: 500;\n/// font-weight: var(--pfe-theme--font-weight--normal, 500);\n/// font-size: 1.25rem;\n/// font-size: var(--pf-c--FontSize, var(--pf-c--content--h3--FontSize, var(--pf-global--FontSize--xl, 1.25rem)));\n/// }\n@mixin pfe-content ($element: \"p\", $base: false){\n // TEXT\n @if $element == \"p\" or $element == \"small\" {\n // Extend includes: line height, weight, font family\n @extend %pfe-content-base;\n\n // Accomodate for irregular variable naming\n @if $element == \"p\" {\n font-size: var(--pf-c--FontSize, pfe-var(content--FontSize));\n }\n @else {\n font-size: var(--pf-c--FontSize, pfe-var(content--#{$element}--FontSize));\n }\n @if $base {\n font-family: pfe-var(font-family);\n line-height: pfe-var(line-height);\n font-weight: pfe-var(font-weight--normal);\n }\n // spacing\n @include pfe-content--text--spacing-block(sm);\n } \n @else { // HEADINGS\n font-family: pfe-var(font-family--heading);\n line-height: pfe-var(line-height--heading);\n font-weight: pfe-var(font-weight--normal);\n\n font-size: var(--pf-c--FontSize, #{pfe-var(content--#{$element}--FontSize)});\n // spacing\n @include pfe-content--text--spacing-block(sm, heading);\n }\n}\n\n\n\n/// Mixin to generate a typography stack - font-family, font-size, line-height, font-weight\n/// and spacing between elements. It accepts a few inputs and determines what variable stack\n/// and CSS properties to output. NOTE! There is an alias mixin `pfe-c-typography` below for easier usage within components. \n/// @group typography\n/// @param {String} $sizing [xl] - Human-readable description for the font-size of the stack you are building.\n/// @param {String} $type [title] - Describes the type of element being created and determines which variable stack to pull from. Also accepts \"text\".\n/// @param {Bool} $base [true] You may opt out of other typography properties (besides size) such as font-weight and line-height (and font-family on text). \n/// @param {Bool} $spacing [true] - You may opt out of the margin-bottom which adds space below the typographical element \n/// @param {Bool} $important [false] - Boolean value for if properties need to be postfixed with `!important`. Use of `!important` is only recommended for utility classes.\n/// @param {Boolean} $use-local [false] - Set this to true when using the mixin within components. This will print a local CSS variable at the beginning of the CSS variable stack and will omit title/text variables. Note that this mixin will not utilize any values from the $LOCAL-VARIABLES map.\n/// @param {String} $region [null] - For use with local variables only. For more about the regional designation, see pfe-var().\n/// @param {Boolean} $light-dom-heading: [false] - Print the --pf-c--FontSize variable with a value of the font-size variable stack. For more information about --pf-c--FontSize, see the HTML HEADINGS section in pfe-base.scss.\n/// @requires {function} pfe-var\n/// @requires {function} pfe-local\n/// @requires {variable} $pf-title-set--mega\n/// @requires {variable} $pf-title-set--regular\n/// @requires {variable} $pf-title-set--tiny\n/// @example - scss - Basic example for xs text typography set\n/// .small-text {\n/// @include pfe-typography(\n/// $sizing: \"xs\",\n/// $type: \"text\",\n/// $base: true,\n/// $important: true,\n/// $use-local: false\n/// )\n/// }\n/// @example - css - Rendered result\n/// .small-text {\n/// font-size: 0.75rem !important;\n/// font-size: var(--pf-c-text--m-xs--FontSize, var(--pf-global--FontSize--xs, 0.75rem)) !important;\n/// font-family: \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif !important;\n/// font-family: var(--pfe-theme--font-family, \"Red Hat Text\", \"RedHatText\", \"Overpass\", Overpass, Arial, sans-serif) !important;\n/// line-height: 1.5 !important;\n/// line-height: var(--pfe-theme--line-height, 1.5) !important;\n/// font-weight: 400 !important;\n/// font-weight: var(--pfe-theme--font-weight--normal, 400) !important;\n/// }\n/// \n/// .small-text:not(:last-child):not(:empty) {\n/// margin-bottom: 0.5rem !important;\n/// margin-bottom: var(--pfe-theme--content-spacer--body--sm, 0.5rem) !important;\n/// }\n/// @example - scss - Basic example for 5xl title typography set\n/// .large-heading {\n/// @include pfe-typography(\n/// $sizing: \"5xl\",\n/// $type: \"title\",\n/// $important: true,\n/// $use-local: false\n/// )\n/// }\n/// @example - css - Rendered result\n/// .large-heading {\n/// font-family: \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif !important;\n/// font-family: var(--pfe-theme--font-family--heading, \"Red Hat Display\", \"RedHatDisplay\", \"Overpass\", Overpass, Arial, sans-serif) !important;\n/// font-size: 2.5rem !important;\n/// font-size: var(--pf-c-title--m-5xl--FontSize, var(--pf-global--FontSize--5xl, 2.5rem)) !important;\n/// line-height: 1.2 !important;\n/// line-height: var(--pfe-theme--line-height--heading-mega, 1.2) !important;\n/// font-weight: 300 !important;\n/// font-weight: var(--pfe-theme--font-weight--light, 300) !important;\n/// }\n/// \n/// .large-heading:not(:last-child) {\n/// margin-bottom: 1.5rem !important;\n/// margin-bottom: var(--pfe-theme--content-spacer--heading--md, 1.5rem) !important;\n/// }\n@mixin pfe-typography (\n $sizing: \"xl\", \n $type: \"title\", \n $base: true, \n $spacing: true, \n $use-local: false,\n $region: null,\n $light-dom-heading: false,\n $important: false\n ){\n\n // Ensure that even numerical entries are treated like strings, \"6xl\" vs. 6xl\n $sizing: \"#{$sizing}\";\n\n // Adds !important to the end of the property; useful for utility classes only. Use with caution. \n $rules: \"\";\n @if $important {\n $rules: \" !important\";\n }\n // Text / body copy typography!\n @if $type == \"text\" { \n // Capture the values of properties to use directly or wrapped in the pfe-local function below\n $font-family: pfe-var(font-family);\n $line-height: pfe-var(line-height);\n $font-weight: pfe-var(font-weight--normal);\n $margin-bottom: pfe-var(content-spacer--body--sm);\n\n @if $use-local {\n $font-size: pfe-var(FontSize--#{$sizing});\n font-size: pfe-local(FontSize, $font-size, $region)#{$rules};\n @if $base { \n font-family: pfe-local(LineHeight, $font-family, $region)#{$rules};\n line-height: pfe-local(LineHeight, $line-height, $region)#{$rules};\n font-weight: pfe-local(FontWeight, $font-weight, $region)#{$rules};\n }\n @if $spacing { \n &:not(:last-child) {\n margin-bottom: pfe-local(MarginBottom, $margin-bottom, $region)#{$rules};\n }\n }\n }\n @else {\n // include text var and global var in stack\n $font-size: pfe-var(text--m-#{$sizing}--FontSize);\n font-size: $font-size#{$rules};\n @if $base { // these styles are ordinarily inherited from the body tag, but some projects may need extra specificity\n font-family: $font-family#{$rules};\n line-height: $line-height#{$rules};\n font-weight: $font-weight#{$rules};\n }\n @if $spacing { \n &:not(:last-child):not(:empty) {\n margin-bottom: $margin-bottom#{$rules}; //16px\n }\n }\n }\n // this CSS custom property is an extra hook for components to override things, like .pfe-card { --pf-c-FontSize: 32px; }\n @if $use-local and $light-dom-heading {\n --pf-c--FontSize: #{pfe-local(FontSize)};\n }\n }\n // Title typography!\n @else {\n // Capture the values of properties to use directly or wrapped in the pfe-local function below\n // Initialize variables at the $pf-title-set--tiny size\n // $sizing == \"lg\" or \"md\" or \"sm\" or \"xs\" \n $line-height: pfe-var(line-height);\n $font-weight: pfe-var(font-weight--normal);\n $margin-bottom: pfe-var(content-spacer--heading--sm);\n\n @if index($pf-title-set--mega, $sizing) != null {\n $line-height: pfe-var(line-height--heading-mega);\n $font-weight: pfe-var(font-weight--light);\n @if $spacing { \n $margin-bottom: pfe-var(content-spacer--heading--md);\n }\n }\n // $sizing == \"4xl\" or \"3xl\" or \"2xl\" \n @else if index($pf-title-set--regular, $sizing) != null {\n $line-height: pfe-var(line-height--heading);\n $font-weight: pfe-var(font-weight--normal);\n @if $spacing { \n $margin-bottom: pfe-var(content-spacer--heading--sm);\n }\n }\n // If this value was not found in the tiny set, it's likely not supported\n @else if index($pf-title-set--tiny, $sizing) == null {\n @warn \"#{$sizing} was not found in $pf-title-set--mega, $pf-title-set--regular, or $pf-title-set--tiny.\";\n }\n\n // For component use, this option allows the mixin to use values set in the component level map\n @if $use-local {\n // remove title var from stack, use global only\n $font-size: pfe-var(FontSize--#{$sizing});\n\n font-family: pfe-var(font-family--heading)#{$rules};\n font-size: pfe-local(FontSize, $font-size, $region)#{$rules};\n @if $base == true {\n line-height: pfe-local(LineHeight, $line-height, $region)#{$rules};\n font-weight: pfe-local(FontWeight, $font-weight, $region)#{$rules};\n }\n @if $spacing { \n &:not(:last-child) {\n margin-bottom: pfe-local(MarginBottom, $margin-bottom, $region)#{$rules};\n }\n }\n }\n \n @else {\n // include title var and global var in stack\n $font-size: pfe-var(title--m-#{$sizing}--FontSize);\n font-family: pfe-var(font-family--heading)#{$rules};\n font-size: $font-size#{$rules};\n @if $base == true {\n line-height: $line-height#{$rules};\n font-weight: $font-weight#{$rules};\n }\n @if $spacing { \n &:not(:last-child) {\n margin-bottom: $margin-bottom#{$rules};\n }\n }\n }\n // this CSS custom property is an extra hook for components to override things, like .pfe-card { --pf-c-FontSize: 32px; }\n @if $use-local and $light-dom-heading {\n --pf-c--FontSize: #{pfe-local(FontSize)};\n }\n }\n}\n\n/// ALIAS Typography mixin for generating the font-size only within components. Still accepts all arguments.\n/// @group typography\n/// @param {String} $sizing [xl] - Human-readable description for the font-size of the stack you are building.\n/// @param {String} $type [title] - Describes the type of element being created and determines which variable stack to pull from. Also accepts \"text\".\n/// @param {Bool} $base [false] You may opt out of other typography properties (besides size) such as font-weight and line-height (and font-family on text). \n/// @param {Bool} $spacing [false] - You may opt out of the margin-bottom which adds space below the typographical element \n/// @param {Bool} $important [false] - Boolean value for if properties need to be postfixed with `!important`. Use of `!important` is only recommended for utility classes.\n/// @param {Boolean} $use-local [true] - Set this to true when using the mixin within components. This will print a local CSS variable at the beginning of the CSS variable stack and will omit title/text variables. Note that this mixin will not utilize any values from the $LOCAL-VARIABLES map.\n/// @param {String} $region [null] - For use with local variables only. For more about the regional designation, see pfe-var().\n/// @param {Boolean} $light-dom-heading: [false] - Print the --pf-c--FontSize variable with a value of the font-size variable stack. For more information about --pf-c--FontSize, see the HTML HEADINGS section in pfe-base.scss.\n/// @requires {function} pfe-var\n/// @requires {function} pfe-local\n/// @requires {variable} $pf-title-set--mega\n/// @requires {variable} $pf-title-set--regular\n/// @requires {variable} $pf-title-set--tiny\n/// @example - scss - Basic example for medium text sizing\n/// $LOCAL: jump-links;\n/// .jump-links-text {\n/// @include pfe-c-typography($type: text, $sizing: md, $region: header, $light-dom-heading: true)\n/// }\n/// @example - css - Rendered result\n/// .jump-links-text {\n/// font-size: 1rem;\n/// font-size: var(--pfe-clipboard__header--FontSize, var(--pf-global--FontSize--md, 1rem));\n/// --pf-c--FontSize: var(--pfe-clipboard--FontSize, 1rem);\n/// }\n@mixin pfe-c-typography (\n $sizing: \"xl\", \n $type: \"title\", \n $base: false, // different than mixin above\n $spacing: false, // different than mixin above\n $use-local: true, \n $region: null,\n $light-dom-heading: false,\n $important: false\n) {\n @include pfe-typography(\n $sizing: $sizing,\n $type: $type,\n $base: $base,\n $spacing: $spacing,\n $use-local: $use-local,\n $region: $region,\n $light-dom-heading: $light-dom-heading,\n $important: $important,\n );\n}",":host {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n max-width: fit-content;\n color: var(--pfe-clipboard--Color, var(--pfe-broadcasted--link, #06c)) !important;\n cursor: pointer;\n padding: var(--pfe-clipboard--Padding, 6px 16px);\n font-weight: var(--pfe-clipboard--FontWeight, var(--pfe-theme--font-weight--light, 300));\n font-size: var(--pfe-clipboard--FontSize, var(--pf-global--FontSize--md, 1rem));\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.pfe-clipboard__icon {\n display: flex;\n width: var(--pfe-clipboard--icon--Width, var(--pfe-theme--icon-size, 1em));\n height: var(--pfe-clipboard--icon--Height, auto);\n margin: var(--pfe-clipboard--icon--Margin, 0 0.4825rem 0 0);\n --pfe-icon--Color: var(--pfe-clipboard--icon--Color, var(--pfe-theme--color--text--muted, #6a6e73));\n}\n\n.pfe-clipboard__icon svg {\n fill: var(--pfe-clipboard--icon--Color, var(--pfe-theme--color--text--muted, #6a6e73)) !important;\n}\n\n:host([disabled]) .pfe-clipboard__icon {\n opacity: 0.4;\n}\n\n.pfe-clipboard__text {\n color: var(--pfe-clipboard--Color, var(--pfe-broadcasted--link, #06c)) !important;\n}\n\n:host([disabled]) .pfe-clipboard__text {\n color: var(--pfe-clipboard--Color--disabled, var(--pfe-theme--color--ui-disabled--text, #6a6e73)) !important;\n}\n\n.pfe-clipboard__text--success {\n color: var(--pfe-clipboard--text--success--Color, var(--pfe-theme--color--feedback--success, #3e8635)) !important;\n}\n\n:host(:hover:not([disabled])) .pfe-clipboard__text,\n:host(:focus:not([disabled])) .pfe-clipboard__text {\n color: var(--pfe-clipboard--Color--hover, var(--pfe-broadcasted--link--hover, #004080)) !important;\n}\n\n:host(:hover:not([disabled])) .pfe-clipboard__icon,\n:host(:focus:not([disabled])) .pfe-clipboard__icon {\n --pfe-icon--Color: var(--pfe-clipboard--icon--Color--hover, var(--pfe-theme--color--ui-base--hover, #151515));\n}\n\n:host(:hover:not([disabled])) .pfe-clipboard__icon svg,\n:host(:focus:not([disabled])) .pfe-clipboard__icon svg {\n fill: var(--pfe-clipboard--icon--Color--hover, var(--pfe-theme--color--ui-base--hover, #151515)) !important;\n}\n\n:host([copied]) .pfe-clipboard__text,\n.pfe-clipboard[copied] .pfe-clipboard__text {\n display: none !important;\n}\n\n:host(:not([copied])) .pfe-clipboard__text--success,\n.pfe-clipboard:not([copied]) .pfe-clipboard__text--success {\n display: none !important;\n}\n\n::slotted([slot=\"icon\"]),\n.pfe-clipboard__icon > * {\n width: 100%;\n}\n\n#icon--url {\n display: none;\n}\n\n:host([copy-from=\"url\"]) #icon--url {\n display: block;\n}\n\n:host([copy-from=\"url\"]) #icon--copy {\n display: none;\n}\n\n:host([on=\"dark\"]) {\n --pfe-clipboard--icon--Color: var(--pfe-clipboard--icon--Color--dark, var(--pfe-theme--color--text--muted--on-dark, #d2d2d2));\n --pfe-clipboard--icon--Color--hover: var(--pfe-clipboard--icon--Color--hover--dark, var(--pfe-theme--color--text--on-dark, #fff));\n}\n\n:host([on=\"saturated\"]) {\n --pfe-clipboard--icon--Color: var(--pfe-clipboard--icon--Color--saturated, var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2));\n --pfe-clipboard--icon--Color--hover: var(--pfe-clipboard--icon--Color--hover--saturated, var(--pfe-theme--color--text--on-saturated, #fff));\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n /* IE10+ */\n :host {\n display: inline-block;\n }\n .pfe-clipboard__icon {\n display: inline-block;\n margin-right: 0;\n }\n .pfe-clipboard__text {\n display: inline-block;\n }\n .pfe-clipboard__text--success {\n display: inline-block;\n }\n}\n","@mixin browser-query($browser-list) {\n @each $browser in $browser-list {\n @if $browser == ie11 {\n @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { /* IE10+ */\n @content;\n }\n }\n @if $browser == edge12 {\n @supports (-ms-accelerator: true) { /* Microsoft Edge Browser 12+ */\n @content;\n }\n }\n @if $browser == edge {\n @supports (-ms-ime-align: auto) { /* Microsoft Edge Browser 16+ (All) */\n @content;\n }\n }\n @if $browser == firefox {\n @media all and (min--moz-device-pixel-ratio:0) { /* Mozilla Firefox (All) */\n @content;\n }\n }\n }\n}\n\n@mixin pfe-transition($properties...) {\n $return: null;\n @each $property in $properties {\n @if length($property) == 1 {\n $return: append($return, #{$property} 250ms $pfe-global--animation-timing, comma);\n }\n @else if length($property) == 2 {\n $return: append($return, nth($property, 1) nth($property, 2), comma);\n }\n }\n transition: $return;\n}\n\n// Make a CSS arrow\n@mixin pfe-arrow($type, $color, $width: 8px, $height: 5px, $pseudo: false) {\n $direction: (\n up: 180deg,\n down: 0deg,\n right: -90deg,\n left: 90deg,\n );\n border-style: pfe-var(surface--border-style);\n border-width: $width $height 0;\n border-color: transparent;\n border-top-color: $color;\n transform: rotate(map-get($direction, $type));\n @if $pseudo {\n display: inline-block;\n content: \"\";\n @content;\n }\n}\n\n@mixin pfe-arrow-color($color) {\n border-top-color: $color;\n}\n\n@mixin pfe-print-media {\n @media print {\n @content;\n }\n}\n\n@mixin pfe-print-background {\n -webkit-print-color-adjust: exact;\n color-adjust: exact;\n}\n\n@mixin pfe-no-print-background {\n @include pfe-print-media {\n background-color: white !important;\n background-image: none !important;\n box-shadow: none !important;\n }\n}\n\n@mixin pfe-hidden {\n @at-root #{&}([hidden]) {\n display: none;\n }\n}\n\n@mixin pfe-pipe( $position: right, $padding: 0, $margin: 0, $color: $border-color) {\n border: pfe-var(surface--border-width) pfe-var(surface--border-style) transparent;\n border-#{$position}-color: $color;\n @if $position == right {\n padding-left: $padding;\n margin-right: $margin;\n }\n @else if $position == left {\n padding-right: $padding;\n margin-left: $margin;\n }\n}\n\n@mixin pfe-retina {\n @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n @content;\n }\n}\n\n@mixin pfe-icon($path, $display: flex, $size: 1em) {\n display: #{$display};\n @if $path {\n background: #{$path} no-repeat;\n background-size: contain;\n background-position: center;\n }\n width: #{$size};\n height: #{$size};\n @content;\n}\n\n@mixin pfe-local-debug($map: $LOCAL-VARIABLES) {\n :root {\n @include pfe-print-local($map);\n }\n} "],"sourceRoot":"../src"} \ No newline at end of file diff --git a/elements/pfe-clipboard/dist/pfe-clipboard.js b/elements/pfe-clipboard/dist/pfe-clipboard.js new file mode 100644 index 0000000000..079321f581 --- /dev/null +++ b/elements/pfe-clipboard/dist/pfe-clipboard.js @@ -0,0 +1,369 @@ +import PFElement from '../../pfelement/dist/pfelement.js'; + +/*! + * PatternFly Elements: PfeClipboard 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * +*/ + +class PfeClipboard extends PFElement { + + // Injected at build-time + static get version() { + return "1.12.3"; + } + + // Injected at build-time + get html() { + return ` + + +${!this.noIcon ? ` +
      + + + + +
      +` : ""} +
      + Copy +
      +`; + } + + static get tag() { + return "pfe-clipboard"; + } + + static get meta() { + return { + title: "Clipboard", + description: "Copy current URL to clipboard.", + }; + } + + get templateUrl() { + return "pfe-clipboard.html"; + } + + get styleUrl() { + return "pfe-clipboard.scss"; + } + + static get events() { + return { + copied: `${this.tag}:copied`, + connected: `${this.tag}:connected`, + }; + } + + // Declare the type of this component + static get PfeType() { + return PFElement.PfeTypes.Content; + } + + static get properties() { + return { + noIcon: { + title: "No icon", + type: Boolean, + observer: "_noIconChanged", + }, + copiedDuration: { + title: "Success message duration (in seconds)", + type: Number, + default: 3, + }, + role: { + type: String, + default: "button", + }, + tabindex: { + type: Number, + default: 0, + }, + copyFrom: { + type: String, + default: "url", + observer: "_checkForCopyTarget", + }, + }; + } + + static get slots() { + return { + icon: { + title: "Icon", + description: "This field can accept an SVG, pfe-icon component, or other format for displaying an icon.", + slotName: "icon", + slotClass: "pfe-clipboard__icon", + slotId: "icon", + }, + text: { + title: "Default text", + slotName: "text", + slotClass: "pfe-clipboard__text", + slotId: "text", + }, + textSuccess: { + title: "Success message", + description: "Shown when the URL is successfully copied to the clipboard.", + slotName: "text--success", + slotClass: "pfe-clipboard__text--success", + slotId: "text--success", + }, + }; + } + + get contentToCopy() { + return this._contentToCopy; + } + + /** + * Adding Getter/Setter for + */ + set contentToCopy(contentToCopy) { + if (contentToCopy) { + this.removeAttribute("disabled"); + this._contentToCopy = contentToCopy; + } + } + + constructor() { + super(PfeClipboard, { type: PfeClipboard.PfeType }); + this._contentToCopy = null; + + this._checkForCopyTarget = this._checkForCopyTarget.bind(this); + this.copyURLToClipboard = this.copyURLToClipboard.bind(this); + } + + connectedCallback() { + super.connectedCallback(); + + // Since this element as the role of button we are going to listen + // for click and as well as 'enter' and 'space' commands to trigger + // the copy functionality + this.addEventListener("click", this._clickHandler.bind(this)); + this.addEventListener("keydown", this._keydownHandler.bind(this)); + + // Make sure the thing we might copy exists + this._checkForCopyTarget(); + + // Emit event when this component has connected in case copyContent needs to be set + this.emitEvent(PfeClipboard.events.connected, { + detail: { + component: this, + }, + }); + + // This prevents a regression, default text used to be "Copy URL". + // Now that component can copy _anything_ that's not ideal default text + if (this.copyFrom === "url" && !this.hasSlot("text")) { + this.shadowRoot.getElementById("text").innerText = "Copy URL"; + } + } + + disconnectedCallback() { + // Clean up after ourselves + this.removeEventListener("click", this._clickHandler.bind(this)); + this.removeEventListener("keydown", this._keydownHandler.bind(this)); + super.disconnectedCallback(); + } + + _noIconChanged(previousValue) { + // dirty check to see if we should rerender the template + if (this._rendered && this.noIcon !== previousValue) { + this.render(); + } + } + + /** + * Checks to make sure the thing we may copy exists + */ + _checkForCopyTarget() { + if (this.copyFrom === "property") { + if (!this._contentToCopy) { + this.setAttribute("disabled", ""); + } else if (this.hasAttribute("disabled")) { + this.removeAttribute("disabled"); + } + } + // If target is set to anything else, we're not doing checks for it + else if (this.copyFrom.length) { + this.removeAttribute("disabled"); + } + } + + /** + * Event handler for any activation of the copy button + */ + _clickHandler() { + let text; + switch (this.copyFrom) { + // Copy current URL + case "url": + text = window.location.href; + break; + // Copy whatever is in this.contentToCopy + case "property": + if (this._contentToCopy) { + text = this._contentToCopy; + } else { + this.setAttribute("disabled", ""); + this.error("Set to copy property, but this.contentToCopy is not set"); + return; + } + break; + // Assume what's in the target property is a selector and copy the text from the element + default: + const targetElement = document.querySelector(this.copyFrom); + if (targetElement && targetElement.tagName) { + // What needs to be copied changes for some types of elements + switch (targetElement.tagName.toLowerCase()) { + // Copy the value of form fields + case "input": + text = targetElement.value; + break; + // Copy the text of our element + default: + text = targetElement.innerText; + break; + } + } + break; + } + + if (!text || (typeof text === "string" && !text.length)) { + this.error("Couldn't find text to copy."); + this.setAttribute("disabled", ""); + return; + } + + // Execute the copy to clipboard functionality + this.copyTextToClipboard(text) + .then((copiedText) => { + // Emit event that lets others know the user has "copied" + // the url. We are also going to include the url that was + // copied. + this.emitEvent(PfeClipboard.events.copied, { + detail: { + url: copiedText, // @todo deprecate + copiedText: copiedText, + }, + }); + // Toggle the copied state. Use the this._formattedCopiedTimeout function + // to an appropraite setTimout length. + this.setAttribute("copied", ""); + setTimeout(() => { + this.removeAttribute("copied"); + }, this._formattedCopiedTimeout()); + }) + .catch((error) => { + this.warn(error); + this._checkForCopyTarget(); + }); + } + + // Formatted copied timeout value. Use the formattedCopiedTimeout function + // to get a type safe, millisecond value of the timeout duration. + _formattedCopiedTimeout() { + const copiedDuration = Number(this.copiedDuration * 1000); + if (!(copiedDuration > -1)) { + this.warn(`copied-duration must be a valid number. Defaulting to 3 seconds.`); + // default to 3 seconds + return 3000; + } else { + return copiedDuration; + } + } + + // Listen for keyboard events and map them to their + // corresponding mouse events. + _keydownHandler(event) { + let key = event.key || event.keyCode; + switch (key) { + case "Enter" : + this._clickHandler(event); + break; + case " " : + // Prevent the browser from scolling when the user hits the space key + event.stopPropagation(); + event.preventDefault(); + this._clickHandler(event); + break; + } + } + + /** + * Copy arbitrary text to system clipboard + * + * If available, it will use the new Navigator API to access the system clipboard + * https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard + * + * If unavailable, it will use the legacy execCommand("copy") + * https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand + * @async + * @param {string} text Text to be copied + * @return {Promise} url + */ + copyTextToClipboard(text) { + if (!text) this.error("Copy function called, but no text was given to copy."); + return new Promise((resolve, reject) => { + // If the Clipboard API is available then use that + if (navigator.clipboard) { + navigator.clipboard.writeText(text).then(resolve(text)); + } + // If execCommand("copy") exists then use that method + else if (document.queryCommandEnabled("copy")) { + const dummy = document.createElement("input"); + document.body.appendChild(dummy); + dummy.value = text; + dummy.select(); + document.execCommand("copy"); + document.body.removeChild(dummy); + resolve(text); + } else { + reject(new Error("Current browser does not support copying to the clipboard.")); + } + }); + } + + /** + * Copy url to the user's system clipboard + * + * @async + * @deprecated This will be removed in version 2.0 + * @return {Promise} url + */ + copyURLToClipboard() { + const url = window.location.href; + return this.copyTextToClipboard(url); + } +} + +PFElement.create(PfeClipboard); + +export default PfeClipboard; +//# sourceMappingURL=pfe-clipboard.js.map diff --git a/elements/pfe-clipboard/dist/pfe-clipboard.js.map b/elements/pfe-clipboard/dist/pfe-clipboard.js.map new file mode 100644 index 0000000000..fbb13423f3 --- /dev/null +++ b/elements/pfe-clipboard/dist/pfe-clipboard.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-clipboard.js","sources":["../_temp/pfe-clipboard.js"],"sourcesContent":["/*!\n * PatternFly Elements: PfeClipboard 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement.js\";\n\nclass PfeClipboard extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n\n${!this.noIcon ? `\n
      \n \n \n \n \n
      \n` : \"\"}\n
      \n Copy\n
      \n
      \n Copied\n
      `;\n }\n\n static get tag() {\n return \"pfe-clipboard\";\n }\n\n static get meta() {\n return {\n title: \"Clipboard\",\n description: \"Copy current URL to clipboard.\",\n };\n }\n\n get templateUrl() {\n return \"pfe-clipboard.html\";\n }\n\n get styleUrl() {\n return \"pfe-clipboard.scss\";\n }\n\n static get events() {\n return {\n copied: `${this.tag}:copied`,\n connected: `${this.tag}:connected`,\n };\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Content;\n }\n\n static get properties() {\n return {\n noIcon: {\n title: \"No icon\",\n type: Boolean,\n observer: \"_noIconChanged\",\n },\n copiedDuration: {\n title: \"Success message duration (in seconds)\",\n type: Number,\n default: 3,\n },\n role: {\n type: String,\n default: \"button\",\n },\n tabindex: {\n type: Number,\n default: 0,\n },\n copyFrom: {\n type: String,\n default: \"url\",\n observer: \"_checkForCopyTarget\",\n },\n };\n }\n\n static get slots() {\n return {\n icon: {\n title: \"Icon\",\n description: \"This field can accept an SVG, pfe-icon component, or other format for displaying an icon.\",\n slotName: \"icon\",\n slotClass: \"pfe-clipboard__icon\",\n slotId: \"icon\",\n },\n text: {\n title: \"Default text\",\n slotName: \"text\",\n slotClass: \"pfe-clipboard__text\",\n slotId: \"text\",\n },\n textSuccess: {\n title: \"Success message\",\n description: \"Shown when the URL is successfully copied to the clipboard.\",\n slotName: \"text--success\",\n slotClass: \"pfe-clipboard__text--success\",\n slotId: \"text--success\",\n },\n };\n }\n\n get contentToCopy() {\n return this._contentToCopy;\n }\n\n /**\n * Adding Getter/Setter for\n */\n set contentToCopy(contentToCopy) {\n if (contentToCopy) {\n this.removeAttribute(\"disabled\");\n this._contentToCopy = contentToCopy;\n }\n }\n\n constructor() {\n super(PfeClipboard, { type: PfeClipboard.PfeType });\n this._contentToCopy = null;\n\n this._checkForCopyTarget = this._checkForCopyTarget.bind(this);\n this.copyURLToClipboard = this.copyURLToClipboard.bind(this);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n // Since this element as the role of button we are going to listen\n // for click and as well as 'enter' and 'space' commands to trigger\n // the copy functionality\n this.addEventListener(\"click\", this._clickHandler.bind(this));\n this.addEventListener(\"keydown\", this._keydownHandler.bind(this));\n\n // Make sure the thing we might copy exists\n this._checkForCopyTarget();\n\n // Emit event when this component has connected in case copyContent needs to be set\n this.emitEvent(PfeClipboard.events.connected, {\n detail: {\n component: this,\n },\n });\n\n // This prevents a regression, default text used to be \"Copy URL\".\n // Now that component can copy _anything_ that's not ideal default text\n if (this.copyFrom === \"url\" && !this.hasSlot(\"text\")) {\n this.shadowRoot.getElementById(\"text\").innerText = \"Copy URL\";\n }\n }\n\n disconnectedCallback() {\n // Clean up after ourselves\n this.removeEventListener(\"click\", this._clickHandler.bind(this));\n this.removeEventListener(\"keydown\", this._keydownHandler.bind(this));\n super.disconnectedCallback();\n }\n\n _noIconChanged(previousValue) {\n // dirty check to see if we should rerender the template\n if (this._rendered && this.noIcon !== previousValue) {\n this.render();\n }\n }\n\n /**\n * Checks to make sure the thing we may copy exists\n */\n _checkForCopyTarget() {\n if (this.copyFrom === \"property\") {\n if (!this._contentToCopy) {\n this.setAttribute(\"disabled\", \"\");\n } else if (this.hasAttribute(\"disabled\")) {\n this.removeAttribute(\"disabled\");\n }\n }\n // If target is set to anything else, we're not doing checks for it\n else if (this.copyFrom.length) {\n this.removeAttribute(\"disabled\");\n }\n }\n\n /**\n * Event handler for any activation of the copy button\n */\n _clickHandler() {\n let text;\n switch (this.copyFrom) {\n // Copy current URL\n case \"url\":\n text = window.location.href;\n break;\n // Copy whatever is in this.contentToCopy\n case \"property\":\n if (this._contentToCopy) {\n text = this._contentToCopy;\n } else {\n this.setAttribute(\"disabled\", \"\");\n this.error(\"Set to copy property, but this.contentToCopy is not set\");\n return;\n }\n break;\n // Assume what's in the target property is a selector and copy the text from the element\n default:\n const targetElement = document.querySelector(this.copyFrom);\n if (targetElement && targetElement.tagName) {\n // What needs to be copied changes for some types of elements\n switch (targetElement.tagName.toLowerCase()) {\n // Copy the value of form fields\n case \"input\":\n text = targetElement.value;\n break;\n // Copy the text of our element\n default:\n text = targetElement.innerText;\n break;\n }\n }\n break;\n }\n\n if (!text || (typeof text === \"string\" && !text.length)) {\n this.error(\"Couldn't find text to copy.\");\n this.setAttribute(\"disabled\", \"\");\n return;\n }\n\n // Execute the copy to clipboard functionality\n this.copyTextToClipboard(text)\n .then((copiedText) => {\n // Emit event that lets others know the user has \"copied\"\n // the url. We are also going to include the url that was\n // copied.\n this.emitEvent(PfeClipboard.events.copied, {\n detail: {\n url: copiedText, // @todo deprecate\n copiedText: copiedText,\n },\n });\n // Toggle the copied state. Use the this._formattedCopiedTimeout function\n // to an appropraite setTimout length.\n this.setAttribute(\"copied\", \"\");\n setTimeout(() => {\n this.removeAttribute(\"copied\");\n }, this._formattedCopiedTimeout());\n })\n .catch((error) => {\n this.warn(error);\n this._checkForCopyTarget();\n });\n }\n\n // Formatted copied timeout value. Use the formattedCopiedTimeout function\n // to get a type safe, millisecond value of the timeout duration.\n _formattedCopiedTimeout() {\n const copiedDuration = Number(this.copiedDuration * 1000);\n if (!(copiedDuration > -1)) {\n this.warn(`copied-duration must be a valid number. Defaulting to 3 seconds.`);\n // default to 3 seconds\n return 3000;\n } else {\n return copiedDuration;\n }\n }\n\n // Listen for keyboard events and map them to their\n // corresponding mouse events.\n _keydownHandler(event) {\n let key = event.key || event.keyCode;\n switch (key) {\n case \"Enter\" || 13:\n this._clickHandler(event);\n break;\n case \" \" || 32:\n // Prevent the browser from scolling when the user hits the space key\n event.stopPropagation();\n event.preventDefault();\n this._clickHandler(event);\n break;\n }\n }\n\n /**\n * Copy arbitrary text to system clipboard\n *\n * If available, it will use the new Navigator API to access the system clipboard\n * https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard\n *\n * If unavailable, it will use the legacy execCommand(\"copy\")\n * https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand\n * @async\n * @param {string} text Text to be copied\n * @return {Promise} url\n */\n copyTextToClipboard(text) {\n if (!text) this.error(\"Copy function called, but no text was given to copy.\");\n return new Promise((resolve, reject) => {\n // If the Clipboard API is available then use that\n if (navigator.clipboard) {\n navigator.clipboard.writeText(text).then(resolve(text));\n }\n // If execCommand(\"copy\") exists then use that method\n else if (document.queryCommandEnabled(\"copy\")) {\n const dummy = document.createElement(\"input\");\n document.body.appendChild(dummy);\n dummy.value = text;\n dummy.select();\n document.execCommand(\"copy\");\n document.body.removeChild(dummy);\n resolve(text);\n } else {\n reject(new Error(\"Current browser does not support copying to the clipboard.\"));\n }\n });\n }\n\n /**\n * Copy url to the user's system clipboard\n *\n * @async\n * @deprecated This will be removed in version 2.0\n * @return {Promise} url\n */\n copyURLToClipboard() {\n const url = window.location.href;\n return this.copyTextToClipboard(url);\n }\n}\n\nPFElement.create(PfeClipboard);\n\nexport default PfeClipboard;\n"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-clipboard/dist/pfe-clipboard.min.css.map b/elements/pfe-clipboard/dist/pfe-clipboard.min.css.map new file mode 100644 index 0000000000..7df9bdc96d --- /dev/null +++ b/elements/pfe-clipboard/dist/pfe-clipboard.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../src/pfe-clipboard.scss","../../../pfe-sass/mixins/_copy-mixins.scss","pfe-clipboard.css","../../../pfe-sass/mixins/_mixins.scss"],"names":[],"mappings":"AAyBA,MACE,QAAA,YAAA,QAAA,aAAA,QAAA,YAAA,QAAA,KACA,iBAAA,EAAA,aAAA,EAAA,EAAA,KAAA,SAAA,EAAA,EAAA,KAAA,KAAA,EAAA,EAAA,KACA,kBAAA,OAAA,oBAAA,OAAA,eAAA,OAAA,YAAA,OACA,UAAA,oBAAA,UAAA,iBAAA,UAAA,YACA,MAAA,eAAA,MAAA,wEACA,OAAA,QACA,QAAA,IAAA,KAAA,QAAA,uCACA,YAAA,IAAA,YAAA,0EC2KU,UAAA,KAAA,UAAA,mEDvKZ,gBACE,QAAA,KAKA,qBACE,QAAA,YAAA,QAAA,aAAA,QAAA,YAAA,QAAA,KACA,MAAA,IAAA,MAAA,kEAEA,OAAA,KAAA,OAAA,wCACA,OAAA,EAAA,SAAA,EAAA,EAAA,OAAA,kDAEA,kBAAA,iFAPD,yBAUG,KAAA,kBAAA,KAAA,yFAGF,uCACE,QAAA,GAGJ,qBACE,MAAA,eAAA,MAAA,wEAEA,uCACE,MAAA,kBAAA,MAAA,mGAIJ,8BACE,MAAA,kBAAA,MAAA,wGECJ,mDFKA,mDAIM,MAAA,kBAAA,MAAA,yFEHN,mDFDA,mDAQM,kBAAA,2FEFN,uDFNA,uDAWQ,KAAA,kBAAA,KAAA,mGECR,4CFMA,qCAEE,QAAA,eEHF,2DFKA,oDAEE,QAAA,eEFF,uBFOA,uBAEE,MAAA,KAGF,WACE,QAAA,KAEA,kCACE,QAAA,MAKF,mCACE,QAAA,KAIJ,iBACE,6BAAA,gGACA,oCAAA,6FAGF,sBACE,6BAAA,0GACA,oCAAA,uGG/HI,6CAAA,oCHmIJ,MAEE,QAAA,aAEF,qBACE,QAAA,aACA,aAAA,EAEF,qBACE,QAAA,aAEF,8BACE,QAAA","file":"pfe-clipboard.min.css","sourceRoot":"../src","sourcesContent":[null,null,":host {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-flex: 0;\n -webkit-flex: 0 0 auto;\n -ms-flex: 0 0 auto;\n flex: 0 0 auto;\n -webkit-box-align: center;\n -webkit-align-items: center;\n -ms-flex-align: center;\n align-items: center;\n max-width: -webkit-fit-content;\n max-width: -moz-fit-content;\n max-width: fit-content;\n color: #06c !important;\n color: var(--pfe-clipboard--Color, var(--pfe-broadcasted--link, #06c)) !important;\n cursor: pointer;\n padding: 6px 16px;\n padding: var(--pfe-clipboard--Padding, 6px 16px);\n font-weight: 300;\n font-weight: var(--pfe-clipboard--FontWeight, var(--pfe-theme--font-weight--light, 300));\n font-size: 1rem;\n font-size: var(--pfe-clipboard--FontSize, var(--pf-global--FontSize--md, 1rem));\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.pfe-clipboard__icon {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n width: 1em;\n width: var(--pfe-clipboard--icon--Width, var(--pfe-theme--icon-size, 1em));\n height: auto;\n height: var(--pfe-clipboard--icon--Height, auto);\n margin: 0 0.4825rem 0 0;\n margin: var(--pfe-clipboard--icon--Margin, 0 0.4825rem 0 0);\n --pfe-icon--Color: var(--pfe-clipboard--icon--Color, var(--pfe-theme--color--text--muted, #6a6e73));\n}\n\n.pfe-clipboard__icon svg {\n fill: #6a6e73 !important;\n fill: var(--pfe-clipboard--icon--Color, var(--pfe-theme--color--text--muted, #6a6e73)) !important;\n}\n\n:host([disabled]) .pfe-clipboard__icon {\n opacity: 0.4;\n}\n\n.pfe-clipboard__text {\n color: #06c !important;\n color: var(--pfe-clipboard--Color, var(--pfe-broadcasted--link, #06c)) !important;\n}\n\n:host([disabled]) .pfe-clipboard__text {\n color: #6a6e73 !important;\n color: var(--pfe-clipboard--Color--disabled, var(--pfe-theme--color--ui-disabled--text, #6a6e73)) !important;\n}\n\n.pfe-clipboard__text--success {\n color: #3e8635 !important;\n color: var(--pfe-clipboard--text--success--Color, var(--pfe-theme--color--feedback--success, #3e8635)) !important;\n}\n\n:host(:hover:not([disabled])) .pfe-clipboard__text,\n:host(:focus:not([disabled])) .pfe-clipboard__text {\n color: #004080 !important;\n color: var(--pfe-clipboard--Color--hover, var(--pfe-broadcasted--link--hover, #004080)) !important;\n}\n\n:host(:hover:not([disabled])) .pfe-clipboard__icon,\n:host(:focus:not([disabled])) .pfe-clipboard__icon {\n --pfe-icon--Color: var(--pfe-clipboard--icon--Color--hover, var(--pfe-theme--color--ui-base--hover, #151515));\n}\n\n:host(:hover:not([disabled])) .pfe-clipboard__icon svg,\n:host(:focus:not([disabled])) .pfe-clipboard__icon svg {\n fill: #151515 !important;\n fill: var(--pfe-clipboard--icon--Color--hover, var(--pfe-theme--color--ui-base--hover, #151515)) !important;\n}\n\n:host([copied]) .pfe-clipboard__text,\n.pfe-clipboard[copied] .pfe-clipboard__text {\n display: none !important;\n}\n\n:host(:not([copied])) .pfe-clipboard__text--success,\n.pfe-clipboard:not([copied]) .pfe-clipboard__text--success {\n display: none !important;\n}\n\n::slotted([slot=\"icon\"]),\n.pfe-clipboard__icon > * {\n width: 100%;\n}\n\n#icon--url {\n display: none;\n}\n\n:host([copy-from=\"url\"]) #icon--url {\n display: block;\n}\n\n:host([copy-from=\"url\"]) #icon--copy {\n display: none;\n}\n\n:host([on=\"dark\"]) {\n --pfe-clipboard--icon--Color: var(--pfe-clipboard--icon--Color--dark, var(--pfe-theme--color--text--muted--on-dark, #d2d2d2));\n --pfe-clipboard--icon--Color--hover: var(--pfe-clipboard--icon--Color--hover--dark, var(--pfe-theme--color--text--on-dark, #fff));\n}\n\n:host([on=\"saturated\"]) {\n --pfe-clipboard--icon--Color: var(--pfe-clipboard--icon--Color--saturated, var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2));\n --pfe-clipboard--icon--Color--hover: var(--pfe-clipboard--icon--Color--hover--saturated, var(--pfe-theme--color--text--on-saturated, #fff));\n}\n\n@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {\n /* IE10+ */\n :host {\n display: inline-block;\n }\n .pfe-clipboard__icon {\n display: inline-block;\n margin-right: 0;\n }\n .pfe-clipboard__text {\n display: inline-block;\n }\n .pfe-clipboard__text--success {\n display: inline-block;\n }\n}\n\n/*# sourceMappingURL=pfe-clipboard.css.map */\n"]} \ No newline at end of file diff --git a/elements/pfe-clipboard/dist/pfe-clipboard.min.js b/elements/pfe-clipboard/dist/pfe-clipboard.min.js new file mode 100644 index 0000000000..f86d8d9526 --- /dev/null +++ b/elements/pfe-clipboard/dist/pfe-clipboard.min.js @@ -0,0 +1,26 @@ +import e from"../../pfelement/dist/pfelement.min.js"; +/*! + * PatternFly Elements: PfeClipboard 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * +*/class t extends e{static get version(){return"1.12.3"}get html(){return`\n\n\x3c!-- icon slot --\x3e\n${this.noIcon?"":'\n
      \n \n \n \n \n
      \n'}\n
      \n Copy\n
      \n`}static get tag(){return"pfe-clipboard"}static get meta(){return{title:"Clipboard",description:"Copy current URL to clipboard."}}get templateUrl(){return"pfe-clipboard.html"}get styleUrl(){return"pfe-clipboard.scss"}static get events(){return{copied:this.tag+":copied",connected:this.tag+":connected"}}static get PfeType(){return e.PfeTypes.Content}static get properties(){return{noIcon:{title:"No icon",type:Boolean,observer:"_noIconChanged"},copiedDuration:{title:"Success message duration (in seconds)",type:Number,default:3},role:{type:String,default:"button"},tabindex:{type:Number,default:0},copyFrom:{type:String,default:"url",observer:"_checkForCopyTarget"}}}static get slots(){return{icon:{title:"Icon",description:"This field can accept an SVG, pfe-icon component, or other format for displaying an icon.",slotName:"icon",slotClass:"pfe-clipboard__icon",slotId:"icon"},text:{title:"Default text",slotName:"text",slotClass:"pfe-clipboard__text",slotId:"text"},textSuccess:{title:"Success message",description:"Shown when the URL is successfully copied to the clipboard.",slotName:"text--success",slotClass:"pfe-clipboard__text--success",slotId:"text--success"}}}get contentToCopy(){return this._contentToCopy}set contentToCopy(e){e&&(this.removeAttribute("disabled"),this._contentToCopy=e)}constructor(){super(t,{type:t.PfeType}),this._contentToCopy=null,this._checkForCopyTarget=this._checkForCopyTarget.bind(this),this.copyURLToClipboard=this.copyURLToClipboard.bind(this)}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._clickHandler.bind(this)),this.addEventListener("keydown",this._keydownHandler.bind(this)),this._checkForCopyTarget(),this.emitEvent(t.events.connected,{detail:{component:this}}),"url"!==this.copyFrom||this.hasSlot("text")||(this.shadowRoot.getElementById("text").innerText="Copy URL")}disconnectedCallback(){this.removeEventListener("click",this._clickHandler.bind(this)),this.removeEventListener("keydown",this._keydownHandler.bind(this)),super.disconnectedCallback()}_noIconChanged(e){this._rendered&&this.noIcon!==e&&this.render()}_checkForCopyTarget(){"property"===this.copyFrom?this._contentToCopy?this.hasAttribute("disabled")&&this.removeAttribute("disabled"):this.setAttribute("disabled",""):this.copyFrom.length&&this.removeAttribute("disabled")}_clickHandler(){let e;switch(this.copyFrom){case"url":e=window.location.href;break;case"property":if(!this._contentToCopy)return this.setAttribute("disabled",""),void this.error("Set to copy property, but this.contentToCopy is not set");e=this._contentToCopy;break;default:const t=document.querySelector(this.copyFrom);if(t&&t.tagName)switch(t.tagName.toLowerCase()){case"input":e=t.value;break;default:e=t.innerText}}if(!e||"string"==typeof e&&!e.length)return this.error("Couldn't find text to copy."),void this.setAttribute("disabled","");this.copyTextToClipboard(e).then(e=>{this.emitEvent(t.events.copied,{detail:{url:e,copiedText:e}}),this.setAttribute("copied",""),setTimeout(()=>{this.removeAttribute("copied")},this._formattedCopiedTimeout())}).catch(e=>{this.warn(e),this._checkForCopyTarget()})}_formattedCopiedTimeout(){const e=Number(1e3*this.copiedDuration);return e>-1?e:(this.warn("copied-duration must be a valid number. Defaulting to 3 seconds."),3e3)}_keydownHandler(e){switch(e.key||e.keyCode){case"Enter":this._clickHandler(e);break;case" ":e.stopPropagation(),e.preventDefault(),this._clickHandler(e)}}copyTextToClipboard(e){return e||this.error("Copy function called, but no text was given to copy."),new Promise((t,o)=>{if(navigator.clipboard)navigator.clipboard.writeText(e).then(t(e));else if(document.queryCommandEnabled("copy")){const o=document.createElement("input");document.body.appendChild(o),o.value=e,o.select(),document.execCommand("copy"),document.body.removeChild(o),t(e)}else o(new Error("Current browser does not support copying to the clipboard."))})}copyURLToClipboard(){const e=window.location.href;return this.copyTextToClipboard(e)}}e.create(t);export default t; +//# sourceMappingURL=pfe-clipboard.min.js.map diff --git a/elements/pfe-clipboard/dist/pfe-clipboard.min.js.map b/elements/pfe-clipboard/dist/pfe-clipboard.min.js.map new file mode 100644 index 0000000000..4bd68ca4e1 --- /dev/null +++ b/elements/pfe-clipboard/dist/pfe-clipboard.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-clipboard.min.js","sources":["../_temp/pfe-clipboard.js"],"sourcesContent":["/*!\n * PatternFly Elements: PfeClipboard 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement.js\";\n\nclass PfeClipboard extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n\n${!this.noIcon ? `\n
      \n \n \n \n \n
      \n` : \"\"}\n
      \n Copy\n
      \n
      \n Copied\n
      `;\n }\n\n static get tag() {\n return \"pfe-clipboard\";\n }\n\n static get meta() {\n return {\n title: \"Clipboard\",\n description: \"Copy current URL to clipboard.\",\n };\n }\n\n get templateUrl() {\n return \"pfe-clipboard.html\";\n }\n\n get styleUrl() {\n return \"pfe-clipboard.scss\";\n }\n\n static get events() {\n return {\n copied: `${this.tag}:copied`,\n connected: `${this.tag}:connected`,\n };\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Content;\n }\n\n static get properties() {\n return {\n noIcon: {\n title: \"No icon\",\n type: Boolean,\n observer: \"_noIconChanged\",\n },\n copiedDuration: {\n title: \"Success message duration (in seconds)\",\n type: Number,\n default: 3,\n },\n role: {\n type: String,\n default: \"button\",\n },\n tabindex: {\n type: Number,\n default: 0,\n },\n copyFrom: {\n type: String,\n default: \"url\",\n observer: \"_checkForCopyTarget\",\n },\n };\n }\n\n static get slots() {\n return {\n icon: {\n title: \"Icon\",\n description: \"This field can accept an SVG, pfe-icon component, or other format for displaying an icon.\",\n slotName: \"icon\",\n slotClass: \"pfe-clipboard__icon\",\n slotId: \"icon\",\n },\n text: {\n title: \"Default text\",\n slotName: \"text\",\n slotClass: \"pfe-clipboard__text\",\n slotId: \"text\",\n },\n textSuccess: {\n title: \"Success message\",\n description: \"Shown when the URL is successfully copied to the clipboard.\",\n slotName: \"text--success\",\n slotClass: \"pfe-clipboard__text--success\",\n slotId: \"text--success\",\n },\n };\n }\n\n get contentToCopy() {\n return this._contentToCopy;\n }\n\n /**\n * Adding Getter/Setter for\n */\n set contentToCopy(contentToCopy) {\n if (contentToCopy) {\n this.removeAttribute(\"disabled\");\n this._contentToCopy = contentToCopy;\n }\n }\n\n constructor() {\n super(PfeClipboard, { type: PfeClipboard.PfeType });\n this._contentToCopy = null;\n\n this._checkForCopyTarget = this._checkForCopyTarget.bind(this);\n this.copyURLToClipboard = this.copyURLToClipboard.bind(this);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n // Since this element as the role of button we are going to listen\n // for click and as well as 'enter' and 'space' commands to trigger\n // the copy functionality\n this.addEventListener(\"click\", this._clickHandler.bind(this));\n this.addEventListener(\"keydown\", this._keydownHandler.bind(this));\n\n // Make sure the thing we might copy exists\n this._checkForCopyTarget();\n\n // Emit event when this component has connected in case copyContent needs to be set\n this.emitEvent(PfeClipboard.events.connected, {\n detail: {\n component: this,\n },\n });\n\n // This prevents a regression, default text used to be \"Copy URL\".\n // Now that component can copy _anything_ that's not ideal default text\n if (this.copyFrom === \"url\" && !this.hasSlot(\"text\")) {\n this.shadowRoot.getElementById(\"text\").innerText = \"Copy URL\";\n }\n }\n\n disconnectedCallback() {\n // Clean up after ourselves\n this.removeEventListener(\"click\", this._clickHandler.bind(this));\n this.removeEventListener(\"keydown\", this._keydownHandler.bind(this));\n super.disconnectedCallback();\n }\n\n _noIconChanged(previousValue) {\n // dirty check to see if we should rerender the template\n if (this._rendered && this.noIcon !== previousValue) {\n this.render();\n }\n }\n\n /**\n * Checks to make sure the thing we may copy exists\n */\n _checkForCopyTarget() {\n if (this.copyFrom === \"property\") {\n if (!this._contentToCopy) {\n this.setAttribute(\"disabled\", \"\");\n } else if (this.hasAttribute(\"disabled\")) {\n this.removeAttribute(\"disabled\");\n }\n }\n // If target is set to anything else, we're not doing checks for it\n else if (this.copyFrom.length) {\n this.removeAttribute(\"disabled\");\n }\n }\n\n /**\n * Event handler for any activation of the copy button\n */\n _clickHandler() {\n let text;\n switch (this.copyFrom) {\n // Copy current URL\n case \"url\":\n text = window.location.href;\n break;\n // Copy whatever is in this.contentToCopy\n case \"property\":\n if (this._contentToCopy) {\n text = this._contentToCopy;\n } else {\n this.setAttribute(\"disabled\", \"\");\n this.error(\"Set to copy property, but this.contentToCopy is not set\");\n return;\n }\n break;\n // Assume what's in the target property is a selector and copy the text from the element\n default:\n const targetElement = document.querySelector(this.copyFrom);\n if (targetElement && targetElement.tagName) {\n // What needs to be copied changes for some types of elements\n switch (targetElement.tagName.toLowerCase()) {\n // Copy the value of form fields\n case \"input\":\n text = targetElement.value;\n break;\n // Copy the text of our element\n default:\n text = targetElement.innerText;\n break;\n }\n }\n break;\n }\n\n if (!text || (typeof text === \"string\" && !text.length)) {\n this.error(\"Couldn't find text to copy.\");\n this.setAttribute(\"disabled\", \"\");\n return;\n }\n\n // Execute the copy to clipboard functionality\n this.copyTextToClipboard(text)\n .then((copiedText) => {\n // Emit event that lets others know the user has \"copied\"\n // the url. We are also going to include the url that was\n // copied.\n this.emitEvent(PfeClipboard.events.copied, {\n detail: {\n url: copiedText, // @todo deprecate\n copiedText: copiedText,\n },\n });\n // Toggle the copied state. Use the this._formattedCopiedTimeout function\n // to an appropraite setTimout length.\n this.setAttribute(\"copied\", \"\");\n setTimeout(() => {\n this.removeAttribute(\"copied\");\n }, this._formattedCopiedTimeout());\n })\n .catch((error) => {\n this.warn(error);\n this._checkForCopyTarget();\n });\n }\n\n // Formatted copied timeout value. Use the formattedCopiedTimeout function\n // to get a type safe, millisecond value of the timeout duration.\n _formattedCopiedTimeout() {\n const copiedDuration = Number(this.copiedDuration * 1000);\n if (!(copiedDuration > -1)) {\n this.warn(`copied-duration must be a valid number. Defaulting to 3 seconds.`);\n // default to 3 seconds\n return 3000;\n } else {\n return copiedDuration;\n }\n }\n\n // Listen for keyboard events and map them to their\n // corresponding mouse events.\n _keydownHandler(event) {\n let key = event.key || event.keyCode;\n switch (key) {\n case \"Enter\" || 13:\n this._clickHandler(event);\n break;\n case \" \" || 32:\n // Prevent the browser from scolling when the user hits the space key\n event.stopPropagation();\n event.preventDefault();\n this._clickHandler(event);\n break;\n }\n }\n\n /**\n * Copy arbitrary text to system clipboard\n *\n * If available, it will use the new Navigator API to access the system clipboard\n * https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard\n *\n * If unavailable, it will use the legacy execCommand(\"copy\")\n * https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand\n * @async\n * @param {string} text Text to be copied\n * @return {Promise} url\n */\n copyTextToClipboard(text) {\n if (!text) this.error(\"Copy function called, but no text was given to copy.\");\n return new Promise((resolve, reject) => {\n // If the Clipboard API is available then use that\n if (navigator.clipboard) {\n navigator.clipboard.writeText(text).then(resolve(text));\n }\n // If execCommand(\"copy\") exists then use that method\n else if (document.queryCommandEnabled(\"copy\")) {\n const dummy = document.createElement(\"input\");\n document.body.appendChild(dummy);\n dummy.value = text;\n dummy.select();\n document.execCommand(\"copy\");\n document.body.removeChild(dummy);\n resolve(text);\n } else {\n reject(new Error(\"Current browser does not support copying to the clipboard.\"));\n }\n });\n }\n\n /**\n * Copy url to the user's system clipboard\n *\n * @async\n * @deprecated This will be removed in version 2.0\n * @return {Promise} url\n */\n copyURLToClipboard() {\n const url = window.location.href;\n return this.copyTextToClipboard(url);\n }\n}\n\nPFElement.create(PfeClipboard);\n\nexport default PfeClipboard;\n"],"names":["PfeClipboard","PFElement","version","html","this","noIcon","tag","meta","title","description","templateUrl","styleUrl","events","copied","connected","PfeType","PfeTypes","Content","properties","type","Boolean","observer","copiedDuration","Number","default","role","String","tabindex","copyFrom","slots","icon","slotName","slotClass","slotId","text","textSuccess","contentToCopy","_contentToCopy","removeAttribute","[object Object]","super","_checkForCopyTarget","bind","copyURLToClipboard","connectedCallback","addEventListener","_clickHandler","_keydownHandler","emitEvent","detail","component","hasSlot","shadowRoot","getElementById","innerText","removeEventListener","disconnectedCallback","previousValue","_rendered","render","hasAttribute","setAttribute","length","window","location","href","error","targetElement","document","querySelector","tagName","toLowerCase","value","copyTextToClipboard","then","copiedText","url","setTimeout","_formattedCopiedTimeout","catch","warn","event","key","keyCode","stopPropagation","preventDefault","Promise","resolve","reject","navigator","clipboard","writeText","queryCommandEnabled","dummy","createElement","body","appendChild","select","execCommand","removeChild","Error","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-clipboard/dist/pfe-clipboard.umd.js b/elements/pfe-clipboard/dist/pfe-clipboard.umd.js new file mode 100644 index 0000000000..b75c9ae081 --- /dev/null +++ b/elements/pfe-clipboard/dist/pfe-clipboard.umd.js @@ -0,0 +1,482 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('../../pfelement/dist/pfelement.umd')) : + typeof define === 'function' && define.amd ? define(['../../pfelement/dist/pfelement.umd'], factory) : + (global = global || self, global.PfeClipboard = factory(global.PFElement)); +}(this, (function (PFElement) { 'use strict'; + + PFElement = PFElement && Object.prototype.hasOwnProperty.call(PFElement, 'default') ? PFElement['default'] : PFElement; + + var classCallCheck = function (instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } + }; + + var createClass = function () { + function defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } + + return function (Constructor, protoProps, staticProps) { + if (protoProps) defineProperties(Constructor.prototype, protoProps); + if (staticProps) defineProperties(Constructor, staticProps); + return Constructor; + }; + }(); + + var get = function get(object, property, receiver) { + if (object === null) object = Function.prototype; + var desc = Object.getOwnPropertyDescriptor(object, property); + + if (desc === undefined) { + var parent = Object.getPrototypeOf(object); + + if (parent === null) { + return undefined; + } else { + return get(parent, property, receiver); + } + } else if ("value" in desc) { + return desc.value; + } else { + var getter = desc.get; + + if (getter === undefined) { + return undefined; + } + + return getter.call(receiver); + } + }; + + var inherits = function (subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); + } + + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + enumerable: false, + writable: true, + configurable: true + } + }); + if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; + }; + + var possibleConstructorReturn = function (self, call) { + if (!self) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return call && (typeof call === "object" || typeof call === "function") ? call : self; + }; + + /*! + * PatternFly Elements: PfeClipboard 1.12.3 + * @license + * Copyright 2021 Red Hat, Inc. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + * + */ + + var PfeClipboard = function (_PFElement) { + inherits(PfeClipboard, _PFElement); + createClass(PfeClipboard, [{ + key: "html", + + + // Injected at build-time + get: function get() { + return "\n\n\n" + (!this.noIcon ? "\n
      \n \n \n \n \n
      \n" : "") + "\n
      \n Copy\n
      \n
      \n Copied\n
      "; + } + }, { + key: "templateUrl", + get: function get() { + return "pfe-clipboard.html"; + } + }, { + key: "styleUrl", + get: function get() { + return "pfe-clipboard.scss"; + } + }, { + key: "contentToCopy", + get: function get() { + return this._contentToCopy; + } + + /** + * Adding Getter/Setter for + */ + , + set: function set(contentToCopy) { + if (contentToCopy) { + this.removeAttribute("disabled"); + this._contentToCopy = contentToCopy; + } + } + }], [{ + key: "version", + + + // Injected at build-time + get: function get() { + return "1.12.3"; + } + }, { + key: "tag", + get: function get() { + return "pfe-clipboard"; + } + }, { + key: "meta", + get: function get() { + return { + title: "Clipboard", + description: "Copy current URL to clipboard." + }; + } + }, { + key: "events", + get: function get() { + return { + copied: this.tag + ":copied", + connected: this.tag + ":connected" + }; + } + + // Declare the type of this component + + }, { + key: "PfeType", + get: function get() { + return PFElement.PfeTypes.Content; + } + }, { + key: "properties", + get: function get() { + return { + noIcon: { + title: "No icon", + type: Boolean, + observer: "_noIconChanged" + }, + copiedDuration: { + title: "Success message duration (in seconds)", + type: Number, + default: 3 + }, + role: { + type: String, + default: "button" + }, + tabindex: { + type: Number, + default: 0 + }, + copyFrom: { + type: String, + default: "url", + observer: "_checkForCopyTarget" + } + }; + } + }, { + key: "slots", + get: function get() { + return { + icon: { + title: "Icon", + description: "This field can accept an SVG, pfe-icon component, or other format for displaying an icon.", + slotName: "icon", + slotClass: "pfe-clipboard__icon", + slotId: "icon" + }, + text: { + title: "Default text", + slotName: "text", + slotClass: "pfe-clipboard__text", + slotId: "text" + }, + textSuccess: { + title: "Success message", + description: "Shown when the URL is successfully copied to the clipboard.", + slotName: "text--success", + slotClass: "pfe-clipboard__text--success", + slotId: "text--success" + } + }; + } + }]); + + function PfeClipboard() { + classCallCheck(this, PfeClipboard); + + var _this = possibleConstructorReturn(this, (PfeClipboard.__proto__ || Object.getPrototypeOf(PfeClipboard)).call(this, PfeClipboard, { type: PfeClipboard.PfeType })); + + _this._contentToCopy = null; + + _this._checkForCopyTarget = _this._checkForCopyTarget.bind(_this); + _this.copyURLToClipboard = _this.copyURLToClipboard.bind(_this); + return _this; + } + + createClass(PfeClipboard, [{ + key: "connectedCallback", + value: function connectedCallback() { + get(PfeClipboard.prototype.__proto__ || Object.getPrototypeOf(PfeClipboard.prototype), "connectedCallback", this).call(this); + + // Since this element as the role of button we are going to listen + // for click and as well as 'enter' and 'space' commands to trigger + // the copy functionality + this.addEventListener("click", this._clickHandler.bind(this)); + this.addEventListener("keydown", this._keydownHandler.bind(this)); + + // Make sure the thing we might copy exists + this._checkForCopyTarget(); + + // Emit event when this component has connected in case copyContent needs to be set + this.emitEvent(PfeClipboard.events.connected, { + detail: { + component: this + } + }); + + // This prevents a regression, default text used to be "Copy URL". + // Now that component can copy _anything_ that's not ideal default text + if (this.copyFrom === "url" && !this.hasSlot("text")) { + this.shadowRoot.getElementById("text").innerText = "Copy URL"; + } + } + }, { + key: "disconnectedCallback", + value: function disconnectedCallback() { + // Clean up after ourselves + this.removeEventListener("click", this._clickHandler.bind(this)); + this.removeEventListener("keydown", this._keydownHandler.bind(this)); + get(PfeClipboard.prototype.__proto__ || Object.getPrototypeOf(PfeClipboard.prototype), "disconnectedCallback", this).call(this); + } + }, { + key: "_noIconChanged", + value: function _noIconChanged(previousValue) { + // dirty check to see if we should rerender the template + if (this._rendered && this.noIcon !== previousValue) { + this.render(); + } + } + + /** + * Checks to make sure the thing we may copy exists + */ + + }, { + key: "_checkForCopyTarget", + value: function _checkForCopyTarget() { + if (this.copyFrom === "property") { + if (!this._contentToCopy) { + this.setAttribute("disabled", ""); + } else if (this.hasAttribute("disabled")) { + this.removeAttribute("disabled"); + } + } + // If target is set to anything else, we're not doing checks for it + else if (this.copyFrom.length) { + this.removeAttribute("disabled"); + } + } + + /** + * Event handler for any activation of the copy button + */ + + }, { + key: "_clickHandler", + value: function _clickHandler() { + var _this2 = this; + + var text = void 0; + switch (this.copyFrom) { + // Copy current URL + case "url": + text = window.location.href; + break; + // Copy whatever is in this.contentToCopy + case "property": + if (this._contentToCopy) { + text = this._contentToCopy; + } else { + this.setAttribute("disabled", ""); + this.error("Set to copy property, but this.contentToCopy is not set"); + return; + } + break; + // Assume what's in the target property is a selector and copy the text from the element + default: + var targetElement = document.querySelector(this.copyFrom); + if (targetElement && targetElement.tagName) { + // What needs to be copied changes for some types of elements + switch (targetElement.tagName.toLowerCase()) { + // Copy the value of form fields + case "input": + text = targetElement.value; + break; + // Copy the text of our element + default: + text = targetElement.innerText; + break; + } + } + break; + } + + if (!text || typeof text === "string" && !text.length) { + this.error("Couldn't find text to copy."); + this.setAttribute("disabled", ""); + return; + } + + // Execute the copy to clipboard functionality + this.copyTextToClipboard(text).then(function (copiedText) { + // Emit event that lets others know the user has "copied" + // the url. We are also going to include the url that was + // copied. + _this2.emitEvent(PfeClipboard.events.copied, { + detail: { + url: copiedText, // @todo deprecate + copiedText: copiedText + } + }); + // Toggle the copied state. Use the this._formattedCopiedTimeout function + // to an appropraite setTimout length. + _this2.setAttribute("copied", ""); + setTimeout(function () { + _this2.removeAttribute("copied"); + }, _this2._formattedCopiedTimeout()); + }).catch(function (error) { + _this2.warn(error); + _this2._checkForCopyTarget(); + }); + } + + // Formatted copied timeout value. Use the formattedCopiedTimeout function + // to get a type safe, millisecond value of the timeout duration. + + }, { + key: "_formattedCopiedTimeout", + value: function _formattedCopiedTimeout() { + var copiedDuration = Number(this.copiedDuration * 1000); + if (!(copiedDuration > -1)) { + this.warn("copied-duration must be a valid number. Defaulting to 3 seconds."); + // default to 3 seconds + return 3000; + } else { + return copiedDuration; + } + } + + // Listen for keyboard events and map them to their + // corresponding mouse events. + + }, { + key: "_keydownHandler", + value: function _keydownHandler(event) { + var key = event.key || event.keyCode; + switch (key) { + case "Enter" : + this._clickHandler(event); + break; + case " " : + // Prevent the browser from scolling when the user hits the space key + event.stopPropagation(); + event.preventDefault(); + this._clickHandler(event); + break; + } + } + + /** + * Copy arbitrary text to system clipboard + * + * If available, it will use the new Navigator API to access the system clipboard + * https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard + * + * If unavailable, it will use the legacy execCommand("copy") + * https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand + * @async + * @param {string} text Text to be copied + * @return {Promise} url + */ + + }, { + key: "copyTextToClipboard", + value: function copyTextToClipboard(text) { + if (!text) this.error("Copy function called, but no text was given to copy."); + return new Promise(function (resolve, reject) { + // If the Clipboard API is available then use that + if (navigator.clipboard) { + navigator.clipboard.writeText(text).then(resolve(text)); + } + // If execCommand("copy") exists then use that method + else if (document.queryCommandEnabled("copy")) { + var dummy = document.createElement("input"); + document.body.appendChild(dummy); + dummy.value = text; + dummy.select(); + document.execCommand("copy"); + document.body.removeChild(dummy); + resolve(text); + } else { + reject(new Error("Current browser does not support copying to the clipboard.")); + } + }); + } + + /** + * Copy url to the user's system clipboard + * + * @async + * @deprecated This will be removed in version 2.0 + * @return {Promise} url + */ + + }, { + key: "copyURLToClipboard", + value: function copyURLToClipboard() { + var url = window.location.href; + return this.copyTextToClipboard(url); + } + }]); + return PfeClipboard; + }(PFElement); + + PFElement.create(PfeClipboard); + + return PfeClipboard; + +}))); +//# sourceMappingURL=pfe-clipboard.umd.js.map diff --git a/elements/pfe-clipboard/dist/pfe-clipboard.umd.js.map b/elements/pfe-clipboard/dist/pfe-clipboard.umd.js.map new file mode 100644 index 0000000000..05532165f1 --- /dev/null +++ b/elements/pfe-clipboard/dist/pfe-clipboard.umd.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-clipboard.umd.js","sources":["../_temp/pfe-clipboard.umd.js"],"sourcesContent":["/*!\n * PatternFly Elements: PfeClipboard 1.12.3\n * @license\n * Copyright 2021 Red Hat, Inc.\n * \n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n * \n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n * \n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n * \n*/\n\nimport PFElement from \"../../pfelement/dist/pfelement\";\n\nclass PfeClipboard extends PFElement {\n\n // Injected at build-time\n static get version() {\n return \"1.12.3\";\n }\n\n // Injected at build-time\n get html() {\n return `\n\n\n${!this.noIcon ? `\n
      \n \n \n \n \n
      \n` : \"\"}\n
      \n Copy\n
      \n
      \n Copied\n
      `;\n }\n\n static get tag() {\n return \"pfe-clipboard\";\n }\n\n static get meta() {\n return {\n title: \"Clipboard\",\n description: \"Copy current URL to clipboard.\",\n };\n }\n\n get templateUrl() {\n return \"pfe-clipboard.html\";\n }\n\n get styleUrl() {\n return \"pfe-clipboard.scss\";\n }\n\n static get events() {\n return {\n copied: `${this.tag}:copied`,\n connected: `${this.tag}:connected`,\n };\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Content;\n }\n\n static get properties() {\n return {\n noIcon: {\n title: \"No icon\",\n type: Boolean,\n observer: \"_noIconChanged\",\n },\n copiedDuration: {\n title: \"Success message duration (in seconds)\",\n type: Number,\n default: 3,\n },\n role: {\n type: String,\n default: \"button\",\n },\n tabindex: {\n type: Number,\n default: 0,\n },\n copyFrom: {\n type: String,\n default: \"url\",\n observer: \"_checkForCopyTarget\",\n },\n };\n }\n\n static get slots() {\n return {\n icon: {\n title: \"Icon\",\n description: \"This field can accept an SVG, pfe-icon component, or other format for displaying an icon.\",\n slotName: \"icon\",\n slotClass: \"pfe-clipboard__icon\",\n slotId: \"icon\",\n },\n text: {\n title: \"Default text\",\n slotName: \"text\",\n slotClass: \"pfe-clipboard__text\",\n slotId: \"text\",\n },\n textSuccess: {\n title: \"Success message\",\n description: \"Shown when the URL is successfully copied to the clipboard.\",\n slotName: \"text--success\",\n slotClass: \"pfe-clipboard__text--success\",\n slotId: \"text--success\",\n },\n };\n }\n\n get contentToCopy() {\n return this._contentToCopy;\n }\n\n /**\n * Adding Getter/Setter for\n */\n set contentToCopy(contentToCopy) {\n if (contentToCopy) {\n this.removeAttribute(\"disabled\");\n this._contentToCopy = contentToCopy;\n }\n }\n\n constructor() {\n super(PfeClipboard, { type: PfeClipboard.PfeType });\n this._contentToCopy = null;\n\n this._checkForCopyTarget = this._checkForCopyTarget.bind(this);\n this.copyURLToClipboard = this.copyURLToClipboard.bind(this);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n // Since this element as the role of button we are going to listen\n // for click and as well as 'enter' and 'space' commands to trigger\n // the copy functionality\n this.addEventListener(\"click\", this._clickHandler.bind(this));\n this.addEventListener(\"keydown\", this._keydownHandler.bind(this));\n\n // Make sure the thing we might copy exists\n this._checkForCopyTarget();\n\n // Emit event when this component has connected in case copyContent needs to be set\n this.emitEvent(PfeClipboard.events.connected, {\n detail: {\n component: this,\n },\n });\n\n // This prevents a regression, default text used to be \"Copy URL\".\n // Now that component can copy _anything_ that's not ideal default text\n if (this.copyFrom === \"url\" && !this.hasSlot(\"text\")) {\n this.shadowRoot.getElementById(\"text\").innerText = \"Copy URL\";\n }\n }\n\n disconnectedCallback() {\n // Clean up after ourselves\n this.removeEventListener(\"click\", this._clickHandler.bind(this));\n this.removeEventListener(\"keydown\", this._keydownHandler.bind(this));\n super.disconnectedCallback();\n }\n\n _noIconChanged(previousValue) {\n // dirty check to see if we should rerender the template\n if (this._rendered && this.noIcon !== previousValue) {\n this.render();\n }\n }\n\n /**\n * Checks to make sure the thing we may copy exists\n */\n _checkForCopyTarget() {\n if (this.copyFrom === \"property\") {\n if (!this._contentToCopy) {\n this.setAttribute(\"disabled\", \"\");\n } else if (this.hasAttribute(\"disabled\")) {\n this.removeAttribute(\"disabled\");\n }\n }\n // If target is set to anything else, we're not doing checks for it\n else if (this.copyFrom.length) {\n this.removeAttribute(\"disabled\");\n }\n }\n\n /**\n * Event handler for any activation of the copy button\n */\n _clickHandler() {\n let text;\n switch (this.copyFrom) {\n // Copy current URL\n case \"url\":\n text = window.location.href;\n break;\n // Copy whatever is in this.contentToCopy\n case \"property\":\n if (this._contentToCopy) {\n text = this._contentToCopy;\n } else {\n this.setAttribute(\"disabled\", \"\");\n this.error(\"Set to copy property, but this.contentToCopy is not set\");\n return;\n }\n break;\n // Assume what's in the target property is a selector and copy the text from the element\n default:\n const targetElement = document.querySelector(this.copyFrom);\n if (targetElement && targetElement.tagName) {\n // What needs to be copied changes for some types of elements\n switch (targetElement.tagName.toLowerCase()) {\n // Copy the value of form fields\n case \"input\":\n text = targetElement.value;\n break;\n // Copy the text of our element\n default:\n text = targetElement.innerText;\n break;\n }\n }\n break;\n }\n\n if (!text || (typeof text === \"string\" && !text.length)) {\n this.error(\"Couldn't find text to copy.\");\n this.setAttribute(\"disabled\", \"\");\n return;\n }\n\n // Execute the copy to clipboard functionality\n this.copyTextToClipboard(text)\n .then((copiedText) => {\n // Emit event that lets others know the user has \"copied\"\n // the url. We are also going to include the url that was\n // copied.\n this.emitEvent(PfeClipboard.events.copied, {\n detail: {\n url: copiedText, // @todo deprecate\n copiedText: copiedText,\n },\n });\n // Toggle the copied state. Use the this._formattedCopiedTimeout function\n // to an appropraite setTimout length.\n this.setAttribute(\"copied\", \"\");\n setTimeout(() => {\n this.removeAttribute(\"copied\");\n }, this._formattedCopiedTimeout());\n })\n .catch((error) => {\n this.warn(error);\n this._checkForCopyTarget();\n });\n }\n\n // Formatted copied timeout value. Use the formattedCopiedTimeout function\n // to get a type safe, millisecond value of the timeout duration.\n _formattedCopiedTimeout() {\n const copiedDuration = Number(this.copiedDuration * 1000);\n if (!(copiedDuration > -1)) {\n this.warn(`copied-duration must be a valid number. Defaulting to 3 seconds.`);\n // default to 3 seconds\n return 3000;\n } else {\n return copiedDuration;\n }\n }\n\n // Listen for keyboard events and map them to their\n // corresponding mouse events.\n _keydownHandler(event) {\n let key = event.key || event.keyCode;\n switch (key) {\n case \"Enter\" || 13:\n this._clickHandler(event);\n break;\n case \" \" || 32:\n // Prevent the browser from scolling when the user hits the space key\n event.stopPropagation();\n event.preventDefault();\n this._clickHandler(event);\n break;\n }\n }\n\n /**\n * Copy arbitrary text to system clipboard\n *\n * If available, it will use the new Navigator API to access the system clipboard\n * https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard\n *\n * If unavailable, it will use the legacy execCommand(\"copy\")\n * https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand\n * @async\n * @param {string} text Text to be copied\n * @return {Promise} url\n */\n copyTextToClipboard(text) {\n if (!text) this.error(\"Copy function called, but no text was given to copy.\");\n return new Promise((resolve, reject) => {\n // If the Clipboard API is available then use that\n if (navigator.clipboard) {\n navigator.clipboard.writeText(text).then(resolve(text));\n }\n // If execCommand(\"copy\") exists then use that method\n else if (document.queryCommandEnabled(\"copy\")) {\n const dummy = document.createElement(\"input\");\n document.body.appendChild(dummy);\n dummy.value = text;\n dummy.select();\n document.execCommand(\"copy\");\n document.body.removeChild(dummy);\n resolve(text);\n } else {\n reject(new Error(\"Current browser does not support copying to the clipboard.\"));\n }\n });\n }\n\n /**\n * Copy url to the user's system clipboard\n *\n * @async\n * @deprecated This will be removed in version 2.0\n * @return {Promise} url\n */\n copyURLToClipboard() {\n const url = window.location.href;\n return this.copyTextToClipboard(url);\n }\n}\n\nPFElement.create(PfeClipboard);\n\nexport default PfeClipboard;\n"],"names":["PfeClipboard","noIcon","_contentToCopy","contentToCopy","removeAttribute","title","description","copied","tag","connected","PFElement","PfeTypes","Content","type","Boolean","observer","copiedDuration","Number","default","role","String","tabindex","copyFrom","icon","slotName","slotClass","slotId","text","textSuccess","PfeType","_checkForCopyTarget","bind","copyURLToClipboard","addEventListener","_clickHandler","_keydownHandler","emitEvent","events","detail","component","hasSlot","shadowRoot","getElementById","innerText","removeEventListener","previousValue","_rendered","render","setAttribute","hasAttribute","length","window","location","href","error","targetElement","document","querySelector","tagName","toLowerCase","value","copyTextToClipboard","then","copiedText","url","setTimeout","_formattedCopiedTimeout","catch","warn","event","key","keyCode","stopPropagation","preventDefault","Promise","resolve","reject","navigator","clipboard","writeText","queryCommandEnabled","dummy","createElement","body","appendChild","select","execCommand","removeChild","Error","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-clipboard/dist/pfe-clipboard.umd.min.js b/elements/pfe-clipboard/dist/pfe-clipboard.umd.min.js new file mode 100644 index 0000000000..70a5fbb460 --- /dev/null +++ b/elements/pfe-clipboard/dist/pfe-clipboard.umd.min.js @@ -0,0 +1,2 @@ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("../../pfelement/dist/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../../pfelement/dist/pfelement.umd.min"],t):(e=e||self).PfeClipboard=t(e.PFElement)}(this,function(e){"use strict";e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e;var t=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},o=function(e,t,o){return t&&i(e.prototype,t),o&&i(e,o),e};function i(e,t){for(var o=0;o:host{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;color:#06c!important;color:var(--pfe-clipboard--Color,var(--pfe-broadcasted--link,#06c))!important;cursor:pointer;padding:6px 16px;padding:var(--pfe-clipboard--Padding,6px 16px);font-weight:300;font-weight:var(--pfe-clipboard--FontWeight,var(--pfe-theme--font-weight--light,300));font-size:1rem;font-size:var(--pfe-clipboard--FontSize,var(--pf-global--FontSize--md,1rem))}:host([hidden]){display:none}.pfe-clipboard__icon{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:1em;width:var(--pfe-clipboard--icon--Width,var(--pfe-theme--icon-size,1em));height:auto;height:var(--pfe-clipboard--icon--Height,auto);margin:0 .4825rem 0 0;margin:var(--pfe-clipboard--icon--Margin,0 .4825rem 0 0);--pfe-icon--Color:var(--pfe-clipboard--icon--Color, var(--pfe-theme--color--text--muted, #6a6e73))}.pfe-clipboard__icon svg{fill:#6a6e73!important;fill:var(--pfe-clipboard--icon--Color,var(--pfe-theme--color--text--muted,#6a6e73))!important}:host([disabled]) .pfe-clipboard__icon{opacity:.4}.pfe-clipboard__text{color:#06c!important;color:var(--pfe-clipboard--Color,var(--pfe-broadcasted--link,#06c))!important}:host([disabled]) .pfe-clipboard__text{color:#6a6e73!important;color:var(--pfe-clipboard--Color--disabled,var(--pfe-theme--color--ui-disabled--text,#6a6e73))!important}.pfe-clipboard__text--success{color:#3e8635!important;color:var(--pfe-clipboard--text--success--Color,var(--pfe-theme--color--feedback--success,#3e8635))!important}:host(:focus:not([disabled])) .pfe-clipboard__text,:host(:hover:not([disabled])) .pfe-clipboard__text{color:#004080!important;color:var(--pfe-clipboard--Color--hover,var(--pfe-broadcasted--link--hover,#004080))!important}:host(:focus:not([disabled])) .pfe-clipboard__icon,:host(:hover:not([disabled])) .pfe-clipboard__icon{--pfe-icon--Color:var(--pfe-clipboard--icon--Color--hover, var(--pfe-theme--color--ui-base--hover, #151515))}:host(:focus:not([disabled])) .pfe-clipboard__icon svg,:host(:hover:not([disabled])) .pfe-clipboard__icon svg{fill:#151515!important;fill:var(--pfe-clipboard--icon--Color--hover,var(--pfe-theme--color--ui-base--hover,#151515))!important}.pfe-clipboard[copied] .pfe-clipboard__text,:host([copied]) .pfe-clipboard__text{display:none!important}.pfe-clipboard:not([copied]) .pfe-clipboard__text--success,:host(:not([copied])) .pfe-clipboard__text--success{display:none!important}.pfe-clipboard__icon>*,::slotted([slot=icon]){width:100%}#icon--url{display:none}:host([copy-from=url]) #icon--url{display:block}:host([copy-from=url]) #icon--copy{display:none}:host([on=dark]){--pfe-clipboard--icon--Color:var(--pfe-clipboard--icon--Color--dark, var(--pfe-theme--color--text--muted--on-dark, #d2d2d2));--pfe-clipboard--icon--Color--hover:var(--pfe-clipboard--icon--Color--hover--dark, var(--pfe-theme--color--text--on-dark, #fff))}:host([on=saturated]){--pfe-clipboard--icon--Color:var(--pfe-clipboard--icon--Color--saturated, var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2));--pfe-clipboard--icon--Color--hover:var(--pfe-clipboard--icon--Color--hover--saturated, var(--pfe-theme--color--text--on-saturated, #fff))}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{display:inline-block}.pfe-clipboard__icon{display:inline-block;margin-right:0}.pfe-clipboard__text{display:inline-block}.pfe-clipboard__text--success{display:inline-block}} /*# sourceMappingURL=pfe-clipboard.min.css.map */\n\x3c!-- icon slot --\x3e\n"+(this.noIcon?"":'\n
      \n \n \n \n \n
      \n')+'\n
      \n Copy\n
      \n'}},{key:"templateUrl",get:function(){return"pfe-clipboard.html"}},{key:"styleUrl",get:function(){return"pfe-clipboard.scss"}},{key:"contentToCopy",get:function(){return this._contentToCopy},set:function(e){e&&(this.removeAttribute("disabled"),this._contentToCopy=e)}}],[{key:"version",get:function(){return"1.12.3"}},{key:"tag",get:function(){return"pfe-clipboard"}},{key:"meta",get:function(){return{title:"Clipboard",description:"Copy current URL to clipboard."}}},{key:"events",get:function(){return{copied:this.tag+":copied",connected:this.tag+":connected"}}},{key:"PfeType",get:function(){return e.PfeTypes.Content}},{key:"properties",get:function(){return{noIcon:{title:"No icon",type:Boolean,observer:"_noIconChanged"},copiedDuration:{title:"Success message duration (in seconds)",type:Number,default:3},role:{type:String,default:"button"},tabindex:{type:Number,default:0},copyFrom:{type:String,default:"url",observer:"_checkForCopyTarget"}}}},{key:"slots",get:function(){return{icon:{title:"Icon",description:"This field can accept an SVG, pfe-icon component, or other format for displaying an icon.",slotName:"icon",slotClass:"pfe-clipboard__icon",slotId:"icon"},text:{title:"Default text",slotName:"text",slotClass:"pfe-clipboard__text",slotId:"text"},textSuccess:{title:"Success message",description:"Shown when the URL is successfully copied to the clipboard.",slotName:"text--success",slotClass:"pfe-clipboard__text--success",slotId:"text--success"}}}}]),o(a,[{key:"connectedCallback",value:function(){r(a.prototype.__proto__||Object.getPrototypeOf(a.prototype),"connectedCallback",this).call(this),this.addEventListener("click",this._clickHandler.bind(this)),this.addEventListener("keydown",this._keydownHandler.bind(this)),this._checkForCopyTarget(),this.emitEvent(a.events.connected,{detail:{component:this}}),"url"!==this.copyFrom||this.hasSlot("text")||(this.shadowRoot.getElementById("text").innerText="Copy URL")}},{key:"disconnectedCallback",value:function(){this.removeEventListener("click",this._clickHandler.bind(this)),this.removeEventListener("keydown",this._keydownHandler.bind(this)),r(a.prototype.__proto__||Object.getPrototypeOf(a.prototype),"disconnectedCallback",this).call(this)}},{key:"_noIconChanged",value:function(e){this._rendered&&this.noIcon!==e&&this.render()}},{key:"_checkForCopyTarget",value:function(){"property"===this.copyFrom?this._contentToCopy?this.hasAttribute("disabled")&&this.removeAttribute("disabled"):this.setAttribute("disabled",""):this.copyFrom.length&&this.removeAttribute("disabled")}},{key:"_clickHandler",value:function(){var t=this,e=void 0;switch(this.copyFrom){case"url":e=window.location.href;break;case"property":if(!this._contentToCopy)return this.setAttribute("disabled",""),void this.error("Set to copy property, but this.contentToCopy is not set");e=this._contentToCopy;break;default:var o=document.querySelector(this.copyFrom);o&&o.tagName&&(e="input"===o.tagName.toLowerCase()?o.value:o.innerText)}if(!e||"string"==typeof e&&!e.length)return this.error("Couldn't find text to copy."),void this.setAttribute("disabled","");this.copyTextToClipboard(e).then(function(e){t.emitEvent(a.events.copied,{detail:{url:e,copiedText:e}}),t.setAttribute("copied",""),setTimeout(function(){t.removeAttribute("copied")},t._formattedCopiedTimeout())}).catch(function(e){t.warn(e),t._checkForCopyTarget()})}},{key:"_formattedCopiedTimeout",value:function(){var e=Number(1e3*this.copiedDuration);return-1:host{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;color:#06c!important;color:var(--pfe-clipboard--Color,var(--pfe-broadcasted--link,#06c))!important;cursor:pointer;padding:6px 16px;padding:var(--pfe-clipboard--Padding,6px 16px);font-weight:300;font-weight:var(--pfe-clipboard--FontWeight,var(--pfe-theme--font-weight--light,300));font-size:1rem;font-size:var(--pfe-clipboard--FontSize,var(--pf-global--FontSize--md,1rem))}:host([hidden]){display:none}.pfe-clipboard__icon{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:1em;width:var(--pfe-clipboard--icon--Width,var(--pfe-theme--icon-size,1em));height:auto;height:var(--pfe-clipboard--icon--Height,auto);margin:0 .4825rem 0 0;margin:var(--pfe-clipboard--icon--Margin,0 .4825rem 0 0);--pfe-icon--Color:var(--pfe-clipboard--icon--Color, var(--pfe-theme--color--text--muted, #6a6e73))}.pfe-clipboard__icon svg{fill:#6a6e73!important;fill:var(--pfe-clipboard--icon--Color,var(--pfe-theme--color--text--muted,#6a6e73))!important}:host([disabled]) .pfe-clipboard__icon{opacity:.4}.pfe-clipboard__text{color:#06c!important;color:var(--pfe-clipboard--Color,var(--pfe-broadcasted--link,#06c))!important}:host([disabled]) .pfe-clipboard__text{color:#6a6e73!important;color:var(--pfe-clipboard--Color--disabled,var(--pfe-theme--color--ui-disabled--text,#6a6e73))!important}.pfe-clipboard__text--success{color:#3e8635!important;color:var(--pfe-clipboard--text--success--Color,var(--pfe-theme--color--feedback--success,#3e8635))!important}:host(:focus:not([disabled])) .pfe-clipboard__text,:host(:hover:not([disabled])) .pfe-clipboard__text{color:#004080!important;color:var(--pfe-clipboard--Color--hover,var(--pfe-broadcasted--link--hover,#004080))!important}:host(:focus:not([disabled])) .pfe-clipboard__icon,:host(:hover:not([disabled])) .pfe-clipboard__icon{--pfe-icon--Color:var(--pfe-clipboard--icon--Color--hover, var(--pfe-theme--color--ui-base--hover, #151515))}:host(:focus:not([disabled])) .pfe-clipboard__icon svg,:host(:hover:not([disabled])) .pfe-clipboard__icon svg{fill:#151515!important;fill:var(--pfe-clipboard--icon--Color--hover,var(--pfe-theme--color--ui-base--hover,#151515))!important}.pfe-clipboard[copied] .pfe-clipboard__text,:host([copied]) .pfe-clipboard__text{display:none!important}.pfe-clipboard:not([copied]) .pfe-clipboard__text--success,:host(:not([copied])) .pfe-clipboard__text--success{display:none!important}.pfe-clipboard__icon>*,::slotted([slot=icon]){width:100%}#icon--url{display:none}:host([copy-from=url]) #icon--url{display:block}:host([copy-from=url]) #icon--copy{display:none}:host([on=dark]){--pfe-clipboard--icon--Color:var(--pfe-clipboard--icon--Color--dark, var(--pfe-theme--color--text--muted--on-dark, #d2d2d2));--pfe-clipboard--icon--Color--hover:var(--pfe-clipboard--icon--Color--hover--dark, var(--pfe-theme--color--text--on-dark, #fff))}:host([on=saturated]){--pfe-clipboard--icon--Color:var(--pfe-clipboard--icon--Color--saturated, var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2));--pfe-clipboard--icon--Color--hover:var(--pfe-clipboard--icon--Color--hover--saturated, var(--pfe-theme--color--text--on-saturated, #fff))}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{display:inline-block}.pfe-clipboard__icon{display:inline-block;margin-right:0}.pfe-clipboard__text{display:inline-block}.pfe-clipboard__text--success{display:inline-block}} /*# sourceMappingURL=pfe-clipboard.min.css.map */\n\n${!this.noIcon ? `\n
      \n \n \n \n \n
      \n` : \"\"}\n
      \n Copy\n
      \n
      \n Copied\n
      `;\n }\n\n static get tag() {\n return \"pfe-clipboard\";\n }\n\n static get meta() {\n return {\n title: \"Clipboard\",\n description: \"Copy current URL to clipboard.\",\n };\n }\n\n get templateUrl() {\n return \"pfe-clipboard.html\";\n }\n\n get styleUrl() {\n return \"pfe-clipboard.scss\";\n }\n\n static get events() {\n return {\n copied: `${this.tag}:copied`,\n connected: `${this.tag}:connected`,\n };\n }\n\n // Declare the type of this component\n static get PfeType() {\n return PFElement.PfeTypes.Content;\n }\n\n static get properties() {\n return {\n noIcon: {\n title: \"No icon\",\n type: Boolean,\n observer: \"_noIconChanged\",\n },\n copiedDuration: {\n title: \"Success message duration (in seconds)\",\n type: Number,\n default: 3,\n },\n role: {\n type: String,\n default: \"button\",\n },\n tabindex: {\n type: Number,\n default: 0,\n },\n copyFrom: {\n type: String,\n default: \"url\",\n observer: \"_checkForCopyTarget\",\n },\n };\n }\n\n static get slots() {\n return {\n icon: {\n title: \"Icon\",\n description: \"This field can accept an SVG, pfe-icon component, or other format for displaying an icon.\",\n slotName: \"icon\",\n slotClass: \"pfe-clipboard__icon\",\n slotId: \"icon\",\n },\n text: {\n title: \"Default text\",\n slotName: \"text\",\n slotClass: \"pfe-clipboard__text\",\n slotId: \"text\",\n },\n textSuccess: {\n title: \"Success message\",\n description: \"Shown when the URL is successfully copied to the clipboard.\",\n slotName: \"text--success\",\n slotClass: \"pfe-clipboard__text--success\",\n slotId: \"text--success\",\n },\n };\n }\n\n get contentToCopy() {\n return this._contentToCopy;\n }\n\n /**\n * Adding Getter/Setter for\n */\n set contentToCopy(contentToCopy) {\n if (contentToCopy) {\n this.removeAttribute(\"disabled\");\n this._contentToCopy = contentToCopy;\n }\n }\n\n constructor() {\n super(PfeClipboard, { type: PfeClipboard.PfeType });\n this._contentToCopy = null;\n\n this._checkForCopyTarget = this._checkForCopyTarget.bind(this);\n this.copyURLToClipboard = this.copyURLToClipboard.bind(this);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n // Since this element as the role of button we are going to listen\n // for click and as well as 'enter' and 'space' commands to trigger\n // the copy functionality\n this.addEventListener(\"click\", this._clickHandler.bind(this));\n this.addEventListener(\"keydown\", this._keydownHandler.bind(this));\n\n // Make sure the thing we might copy exists\n this._checkForCopyTarget();\n\n // Emit event when this component has connected in case copyContent needs to be set\n this.emitEvent(PfeClipboard.events.connected, {\n detail: {\n component: this,\n },\n });\n\n // This prevents a regression, default text used to be \"Copy URL\".\n // Now that component can copy _anything_ that's not ideal default text\n if (this.copyFrom === \"url\" && !this.hasSlot(\"text\")) {\n this.shadowRoot.getElementById(\"text\").innerText = \"Copy URL\";\n }\n }\n\n disconnectedCallback() {\n // Clean up after ourselves\n this.removeEventListener(\"click\", this._clickHandler.bind(this));\n this.removeEventListener(\"keydown\", this._keydownHandler.bind(this));\n super.disconnectedCallback();\n }\n\n _noIconChanged(previousValue) {\n // dirty check to see if we should rerender the template\n if (this._rendered && this.noIcon !== previousValue) {\n this.render();\n }\n }\n\n /**\n * Checks to make sure the thing we may copy exists\n */\n _checkForCopyTarget() {\n if (this.copyFrom === \"property\") {\n if (!this._contentToCopy) {\n this.setAttribute(\"disabled\", \"\");\n } else if (this.hasAttribute(\"disabled\")) {\n this.removeAttribute(\"disabled\");\n }\n }\n // If target is set to anything else, we're not doing checks for it\n else if (this.copyFrom.length) {\n this.removeAttribute(\"disabled\");\n }\n }\n\n /**\n * Event handler for any activation of the copy button\n */\n _clickHandler() {\n let text;\n switch (this.copyFrom) {\n // Copy current URL\n case \"url\":\n text = window.location.href;\n break;\n // Copy whatever is in this.contentToCopy\n case \"property\":\n if (this._contentToCopy) {\n text = this._contentToCopy;\n } else {\n this.setAttribute(\"disabled\", \"\");\n this.error(\"Set to copy property, but this.contentToCopy is not set\");\n return;\n }\n break;\n // Assume what's in the target property is a selector and copy the text from the element\n default:\n const targetElement = document.querySelector(this.copyFrom);\n if (targetElement && targetElement.tagName) {\n // What needs to be copied changes for some types of elements\n switch (targetElement.tagName.toLowerCase()) {\n // Copy the value of form fields\n case \"input\":\n text = targetElement.value;\n break;\n // Copy the text of our element\n default:\n text = targetElement.innerText;\n break;\n }\n }\n break;\n }\n\n if (!text || (typeof text === \"string\" && !text.length)) {\n this.error(\"Couldn't find text to copy.\");\n this.setAttribute(\"disabled\", \"\");\n return;\n }\n\n // Execute the copy to clipboard functionality\n this.copyTextToClipboard(text)\n .then((copiedText) => {\n // Emit event that lets others know the user has \"copied\"\n // the url. We are also going to include the url that was\n // copied.\n this.emitEvent(PfeClipboard.events.copied, {\n detail: {\n url: copiedText, // @todo deprecate\n copiedText: copiedText,\n },\n });\n // Toggle the copied state. Use the this._formattedCopiedTimeout function\n // to an appropraite setTimout length.\n this.setAttribute(\"copied\", \"\");\n setTimeout(() => {\n this.removeAttribute(\"copied\");\n }, this._formattedCopiedTimeout());\n })\n .catch((error) => {\n this.warn(error);\n this._checkForCopyTarget();\n });\n }\n\n // Formatted copied timeout value. Use the formattedCopiedTimeout function\n // to get a type safe, millisecond value of the timeout duration.\n _formattedCopiedTimeout() {\n const copiedDuration = Number(this.copiedDuration * 1000);\n if (!(copiedDuration > -1)) {\n this.warn(`copied-duration must be a valid number. Defaulting to 3 seconds.`);\n // default to 3 seconds\n return 3000;\n } else {\n return copiedDuration;\n }\n }\n\n // Listen for keyboard events and map them to their\n // corresponding mouse events.\n _keydownHandler(event) {\n let key = event.key || event.keyCode;\n switch (key) {\n case \"Enter\" || 13:\n this._clickHandler(event);\n break;\n case \" \" || 32:\n // Prevent the browser from scolling when the user hits the space key\n event.stopPropagation();\n event.preventDefault();\n this._clickHandler(event);\n break;\n }\n }\n\n /**\n * Copy arbitrary text to system clipboard\n *\n * If available, it will use the new Navigator API to access the system clipboard\n * https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard\n *\n * If unavailable, it will use the legacy execCommand(\"copy\")\n * https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand\n * @async\n * @param {string} text Text to be copied\n * @return {Promise} url\n */\n copyTextToClipboard(text) {\n if (!text) this.error(\"Copy function called, but no text was given to copy.\");\n return new Promise((resolve, reject) => {\n // If the Clipboard API is available then use that\n if (navigator.clipboard) {\n navigator.clipboard.writeText(text).then(resolve(text));\n }\n // If execCommand(\"copy\") exists then use that method\n else if (document.queryCommandEnabled(\"copy\")) {\n const dummy = document.createElement(\"input\");\n document.body.appendChild(dummy);\n dummy.value = text;\n dummy.select();\n document.execCommand(\"copy\");\n document.body.removeChild(dummy);\n resolve(text);\n } else {\n reject(new Error(\"Current browser does not support copying to the clipboard.\"));\n }\n });\n }\n\n /**\n * Copy url to the user's system clipboard\n *\n * @async\n * @deprecated This will be removed in version 2.0\n * @return {Promise} url\n */\n copyURLToClipboard() {\n const url = window.location.href;\n return this.copyTextToClipboard(url);\n }\n}\n\nPFElement.create(PfeClipboard);\n\nexport default PfeClipboard;\n"],"names":["PfeClipboard","PFElement","this","noIcon","_contentToCopy","contentToCopy","removeAttribute","tag","PfeTypes","Content","Boolean","Number","String","addEventListener","_clickHandler","bind","_keydownHandler","_checkForCopyTarget","emitEvent","events","connected","copyFrom","hasSlot","shadowRoot","getElementById","innerText","removeEventListener","previousValue","_rendered","render","hasAttribute","setAttribute","length","text","window","location","href","error","targetElement","document","querySelector","tagName","toLowerCase","value","copyTextToClipboard","then","copiedText","copied","_this2","_formattedCopiedTimeout","catch","warn","copiedDuration","event","key","keyCode","stopPropagation","preventDefault","Promise","resolve","reject","dummy","navigator","clipboard","writeText","queryCommandEnabled","createElement","body","appendChild","select","execCommand","removeChild","Error","url","type","PfeType","_this","copyURLToClipboard","create"],"mappings":"qkCA2BMA,+TAAqBC,0vHAYxBC,KAAKC,OAOJ,g/DAqBO,4DAIA,kEAqEAD,KAAKE,6BAMIC,GACZA,SACGC,gBAAgB,iBAChBF,eAAiBC,2CAtHjB,2CAyBA,mDAIA,OACE,wBACM,uEAaR,QACMH,KAAKK,wBACFL,KAAKK,yDAMdN,EAAUO,SAASC,iDAInB,QACG,OACC,eACDC,iBACI,iCAEI,OACP,6CACDC,eACG,QAEL,MACEC,eACG,mBAED,MACFD,eACG,YAED,MACFC,eACG,eACC,4DAMP,MACC,OACG,mBACM,qGACH,iBACC,6BACH,aAEJ,OACG,wBACG,iBACC,6BACH,oBAEG,OACJ,8BACM,uEACH,0BACC,sCACH,2KAiCPC,iBAAiB,QAASX,KAAKY,cAAcC,KAAKb,YAClDW,iBAAiB,UAAWX,KAAKc,gBAAgBD,KAAKb,YAGtDe,2BAGAC,UAAUlB,EAAamB,OAAOC,UAAW,QACpC,WACKlB,QAMO,QAAlBA,KAAKmB,UAAuBnB,KAAKoB,QAAQ,eACtCC,WAAWC,eAAe,QAAQC,UAAY,gEAMhDC,oBAAoB,QAASxB,KAAKY,cAAcC,KAAKb,YACrDwB,oBAAoB,UAAWxB,KAAKc,gBAAgBD,KAAKb,kJAIjDyB,GAETzB,KAAK0B,WAAa1B,KAAKC,SAAWwB,QAC/BE,uDAQe,aAAlB3B,KAAKmB,SACFnB,KAAKE,eAECF,KAAK4B,aAAa,kBACtBxB,gBAAgB,iBAFhByB,aAAa,WAAY,IAMzB7B,KAAKmB,SAASW,aAChB1B,gBAAgB,+DAQnB2B,gBACI/B,KAAKmB,cAEN,QACIa,OAAOC,SAASC,eAGpB,eACClC,KAAKE,2BAGF2B,aAAa,WAAY,cACzBM,MAAM,6DAHJnC,KAAKE,iCASRkC,EAAgBC,SAASC,cAActC,KAAKmB,UAC9CiB,GAAiBA,EAAcG,YAI1B,UAFCH,EAAcG,QAAQC,cAGnBJ,EAAcK,MAIdL,EAAcb,eAO1BQ,GAAyB,iBAATA,IAAsBA,EAAKD,mBACzCK,MAAM,yCACNN,aAAa,WAAY,SAK3Ba,oBAAoBX,GACtBY,KAAK,SAACC,KAIA5B,UAAUlB,EAAamB,OAAO4B,OAAQ,QACjC,KACDD,aACOA,OAKXf,aAAa,SAAU,eACjB,aACJzB,gBAAgB,WACpB0C,EAAKC,6BAETC,MAAM,SAACb,KACDc,KAAKd,KACLpB,8EAOHmC,EAAiBzC,OAA6B,IAAtBT,KAAKkD,uBACX,EAAlBA,EAKGA,QAJFD,yEAEE,6CAQKE,UACJA,EAAMC,KAAOD,EAAME,aAEtB,aACEzC,cAAcuC,aAEhB,MAEGG,oBACAC,sBACD3C,cAAcuC,gDAiBLpB,UACbA,GAAM/B,KAAKmC,MAAM,wDACf,IAAIqB,QAAQ,SAACC,EAASC,OAOnBC,EALJC,UAAUC,oBACFA,UAAUC,UAAU/B,GAAMY,KAAKc,EAAQ1B,IAG1CM,SAAS0B,oBAAoB,SAC9BJ,EAAQtB,SAAS2B,cAAc,kBAC5BC,KAAKC,YAAYP,KACpBlB,MAAQV,IACRoC,kBACGC,YAAY,iBACZH,KAAKI,YAAYV,KAClB5B,MAED,IAAIuC,MAAM,kHAafC,EAAMvC,OAAOC,SAASC,YACrBlC,KAAK0C,oBAAoB6B,gGA/M1BzE,EAAc,CAAE0E,KAAM1E,EAAa2E,oBACpCvE,eAAiB,OAEjBa,oBAAsB2D,EAAK3D,oBAAoBF,UAC/C8D,mBAAqBD,EAAKC,mBAAmB9D,iBA+MtDd,EAAU6E,OAAO9E"} \ No newline at end of file diff --git a/elements/pfe-clipboard/package.json b/elements/pfe-clipboard/package.json index d980999541..df40a516b1 100644 --- a/elements/pfe-clipboard/package.json +++ b/elements/pfe-clipboard/package.json @@ -12,7 +12,7 @@ "assets": [], "preview": "clipboard.png" }, - "version": "1.12.2", + "version": "1.12.3", "keywords": [ "web-components", "html" @@ -50,10 +50,10 @@ ], "license": "MIT", "devDependencies": { - "@patternfly/pfe-sass": "^1.12.2" + "@patternfly/pfe-sass": "^1.12.3" }, "dependencies": { - "@patternfly/pfelement": "^1.12.2" + "@patternfly/pfelement": "^1.12.3" }, "bugs": { "url": "https://github.com/patternfly/patternfly-elements/issues" diff --git a/elements/pfe-codeblock/dist/pfe-codeblock-material-dark.css.map b/elements/pfe-codeblock/dist/pfe-codeblock-material-dark.css.map new file mode 100644 index 0000000000..833cb68d07 --- /dev/null +++ b/elements/pfe-codeblock/dist/pfe-codeblock-material-dark.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["pfe-codeblock-material-dark.scss","pfe-codeblock-material-dark.css"],"names":[],"mappings":"AAWA;;EAGE,gBAAgB;EAChB,gBAAgB;EAChB,oBAAoB;EACpB,kBAAkB;EAClB,iBAAiB;EACjB,cAbmB;EAcnB,mBAfoB;EAgBpB,uCAAuC;EACvC,cAAc;EACd,kBAAkB;EAClB,gBAAW;IAAX,cAAW;OAAX,WAAW;EACX,qBAAa;MAAb,iBAAa;UAAb,aAAa;ACXf;;ADHA;EAqBE,mBAvByB;ACY3B;;ADVA;;;;EAqBE,mBAvByB;ACY3B;;ADVA;EAyBE,mBAAmB;EACnB,oBAAoB;EACpB,cAAc;ACXhB;;ADhBA;EA+BE,cAAc;EACd,kBAAkB;EAClB,eAAe;EACf,mBAAmB;ACXrB;;ADvBA;EAoCG,kBAAkB;EAClB,mBAAmB;EACnB,yBAAyB;ACT5B;;AD7BA;;;EA6CE,cAtDoB;AC4CtB;;ADnCA;EAiDE,YAAY;ACVd;;ADvCA;EAsDG,cA7DoB;ACkDvB;;AD3CA;EA0DG,cAnEmB;ACwDtB;;AD/CA;EA8DG,cAvEmB;AC4DtB;;ADnDA;EAkEG,cA3EmB;ACgEtB;;ADvDA;EAsEG,cA7EoB;ACkEvB;;AD3DA;EA0EG,cAnFmB;ACwEtB;;AD/DA;EA8EG,cAtFkB;AC2ErB;;ADnEA;EAkFG,cA1FkB;AC+ErB;;ADvEA;EAsFG,cA/FmB;ACoFtB;;AD3EA;EA0FG,cAlGkB;ACuFrB;;AD/EA;EA8FG,cAlGuB;ACuF1B;;ADnFA;EAkGG,cAzGoB;AC8FvB;;ADvFA;EAsGG,cAhHiB;ACqGpB;;AD3FA;EA0GG,cA9GuB;ACmG1B;;AD/FA;EA8GG,cAxHiB;AC6GpB;;ADnGA;EAkHG,cAzHoB;AC8GvB;;ADvGA;EAsHG,cA9HkB;ACmHrB;;AD3GA;EA0HG,cAjIoB;EAkIpB,iBAAiB;ACXpB;;ADhHA;EA+HG,cAtIoB;EAuIpB,iBAAiB;ACXpB;;ADrHA;EAoIG,cA5IkB;ACiIrB;;ADzHA;EAwIG,cA/IoB;ACoIvB;;AD7HA;EA4IG,cArJmB;AC0ItB;;ADjIA;EAgJG,cAxJkB;AC6IrB;;ADrIA;EAoJG,cAxJuB;AC6I1B;;ADzIA;EAwJG,cAhKkB;ACqJrB;;AD7IA;EA4JG,cArKmB;AC0JtB;;ADjJA;EAgKG,cAzKmB;AC8JtB;;ADrJA;EAoKG,cA5KkB;ACiKrB;;ADzJA;EAwKG,cAhLkB;ACqKrB;;AD7JA;EA4KG,cAtLiB;AC2KpB;;ADjKA;EAgLG,cAzLmB;AC8KtB;;ADrKA;EAoLG,cA3LoB;ACgLvB;;ADzKA;EAwLG,cAlMiB;ACuLpB;;AD7KA;EA4LG,cArMmB;AC0LtB;;ADjLA;EAgMG,cA1MiB;AC+LpB;;ADrLA;EAoMG,cA9MiB;ACmMpB","file":"pfe-codeblock-material-dark.css","sourcesContent":["//Define custom colors\n$custom-red: #FF8A80; // h1, p, body\n$custom-green: #ACE12E; // \"javascript\", red, #eee\n$custom-blue: #73BCF7; // <, , height=\"\", height, width, cx, cy, etc.\n$custom-purple: #B2A3FF; // const, let, null, main, printf, return\n$custom-black: #3C3F42; // Background\n$custom-gray: #D2D2D2; // example, text, #include, stdio.h, int\n$custom-dark-gray: #D2D2D2; // Numbers and dividers\n$custom-white: #FFF; // example html, some paragraph text\n$custom-hilight-bg: #363636; // Background color :selected\n\n:host([code-theme=\"dark\"]) {\n\tcode[class*=\"language-\"],\n\tpre[class*=\"language-\"] {\n\t\ttext-align: left;\n\t\twhite-space: pre;\n\t\tword-spacing: normal;\n\t\tword-break: normal;\n\t\tword-wrap: normal;\n\t\tcolor: $custom-gray;\n\t\tbackground: $custom-black;\n\t\tfont-family: pfe-var(font-family--code);\n\t\tfont-size: 1em;\n\t\tline-height: 1.5em;\n\t\ttab-size: 4;\n\t\thyphens: none;\n\t}\n\n\tcode[class*=\"language-\"]::selection,\n\tpre[class*=\"language-\"]::selection,\n\tcode[class*=\"language-\"] ::selection,\n\tpre[class*=\"language-\"] ::selection {\n\t\tbackground: $custom-hilight-bg;\n\t}\n\n\t:not(pre) > code[class*=\"language-\"] {\n\t\twhite-space: normal;\n\t\tborder-radius: 0.2em;\n\t\tpadding: 0.1em;\n\t}\n\n\tpre[class*=\"language-\"] {\n\t\toverflow: auto;\n\t\tposition: relative;\n\t\tmargin: 0.5em 0;\n\t\tpadding: 1.25em 1em;\n\t\t&.line-numbers {\n\t\t\tposition: relative;\n\t\t\tpadding-left: 3.8em;\n\t\t\tcounter-reset: linenumber;\n\t\t}\n\t}\n\n\t.language-css > code,\n\t.language-sass > code,\n\t.language-scss > code {\n\t\tcolor: $custom-green;\n\t}\n\n\t[class*=\"language-\"] .namespace {\n\t\topacity: 0.7;\n\t}\n\n\t.token {\n\t\t&.atrule {\n\t\t\tcolor: $custom-purple;\n\t\t}\n\t\n\t\t&.attr-name {\n\t\t\tcolor: $custom-green;\n\t\t}\n\t\n\t\t&.attr-value {\n\t\t\tcolor: $custom-green;\n\t\t}\n\t\n\t\t&.attribute {\n\t\t\tcolor: $custom-green;\n\t\t}\n\t\n\t\t&.boolean {\n\t\t\tcolor: $custom-purple;\n\t\t}\n\t\n\t\t&.builtin {\n\t\t\tcolor: $custom-green;\n\t\t}\n\t\n\t\t&.cdata {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.char {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.class {\n\t\t\tcolor: $custom-green;\n\t\t}\n\t\n\t\t&.class-name {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.comment {\n\t\t\tcolor: $custom-dark-gray;\n\t\t}\n\t\n\t\t&.constant {\n\t\t\tcolor: $custom-purple;\n\t\t}\n\t\n\t\t&.deleted {\n\t\t\tcolor: $custom-red;\n\t\t}\n\t\n\t\t&.doctype {\n\t\t\tcolor: $custom-dark-gray;\n\t\t}\n\t\n\t\t&.entity {\n\t\t\tcolor: $custom-red;\n\t\t}\n\t\n\t\t&.function {\n\t\t\tcolor: $custom-purple;\n\t\t}\n\t\n\t\t&.hexcode {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.id {\n\t\t\tcolor: $custom-purple;\n\t\t\tfont-weight: bold;\n\t\t}\n\t\n\t\t&.important {\n\t\t\tcolor: $custom-purple;\n\t\t\tfont-weight: bold;\n\t\t}\n\t\n\t\t&.inserted {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.keyword {\n\t\t\tcolor: $custom-purple;\n\t\t}\n\t\n\t\t&.number {\n\t\t\tcolor: $custom-green;\n\t\t}\n\t\n\t\t&.operator {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.prolog {\n\t\t\tcolor: $custom-dark-gray;\n\t\t}\n\t\n\t\t&.property {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.pseudo-class {\n\t\t\tcolor: $custom-green;\n\t\t}\n\t\n\t\t&.pseudo-element {\n\t\t\tcolor: $custom-green;\n\t\t}\n\t\n\t\t&.punctuation {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.regex {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.selector {\n\t\t\tcolor: $custom-red;\n\t\t}\n\t\n\t\t&.string {\n\t\t\tcolor: $custom-green;\n\t\t}\n\t\n\t\t&.symbol {\n\t\t\tcolor: $custom-purple;\n\t\t}\n\t\n\t\t&.tag {\n\t\t\tcolor: $custom-red;\n\t\t}\n\t\n\t\t&.unit {\n\t\t\tcolor: $custom-green;\n\t\t}\n\t\n\t\t&.url {\n\t\t\tcolor: $custom-red;\n\t\t}\n\t\n\t\t&.variable {\n\t\t\tcolor: $custom-red;\n\t\t}\n\t}\n}",":host([code-theme=\"dark\"]) code[class*=\"language-\"],\n:host([code-theme=\"dark\"]) pre[class*=\"language-\"] {\n text-align: left;\n white-space: pre;\n word-spacing: normal;\n word-break: normal;\n word-wrap: normal;\n color: #D2D2D2;\n background: #3C3F42;\n font-family: pfe-var(font-family--code);\n font-size: 1em;\n line-height: 1.5em;\n tab-size: 4;\n hyphens: none;\n}\n\n:host([code-theme=\"dark\"]) code[class*=\"language-\"]::selection,\n:host([code-theme=\"dark\"]) pre[class*=\"language-\"]::selection,\n:host([code-theme=\"dark\"]) code[class*=\"language-\"] ::selection,\n:host([code-theme=\"dark\"]) pre[class*=\"language-\"] ::selection {\n background: #363636;\n}\n\n:host([code-theme=\"dark\"]) :not(pre) > code[class*=\"language-\"] {\n white-space: normal;\n border-radius: 0.2em;\n padding: 0.1em;\n}\n\n:host([code-theme=\"dark\"]) pre[class*=\"language-\"] {\n overflow: auto;\n position: relative;\n margin: 0.5em 0;\n padding: 1.25em 1em;\n}\n\n:host([code-theme=\"dark\"]) pre[class*=\"language-\"].line-numbers {\n position: relative;\n padding-left: 3.8em;\n counter-reset: linenumber;\n}\n\n:host([code-theme=\"dark\"]) .language-css > code,\n:host([code-theme=\"dark\"]) .language-sass > code,\n:host([code-theme=\"dark\"]) .language-scss > code {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) [class*=\"language-\"] .namespace {\n opacity: 0.7;\n}\n\n:host([code-theme=\"dark\"]) .token.atrule {\n color: #B2A3FF;\n}\n\n:host([code-theme=\"dark\"]) .token.attr-name {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.attr-value {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.attribute {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.boolean {\n color: #B2A3FF;\n}\n\n:host([code-theme=\"dark\"]) .token.builtin {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.cdata {\n color: #73BCF7;\n}\n\n:host([code-theme=\"dark\"]) .token.char {\n color: #73BCF7;\n}\n\n:host([code-theme=\"dark\"]) .token.class {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.class-name {\n color: #73BCF7;\n}\n\n:host([code-theme=\"dark\"]) .token.comment {\n color: #D2D2D2;\n}\n\n:host([code-theme=\"dark\"]) .token.constant {\n color: #B2A3FF;\n}\n\n:host([code-theme=\"dark\"]) .token.deleted {\n color: #FF8A80;\n}\n\n:host([code-theme=\"dark\"]) .token.doctype {\n color: #D2D2D2;\n}\n\n:host([code-theme=\"dark\"]) .token.entity {\n color: #FF8A80;\n}\n\n:host([code-theme=\"dark\"]) .token.function {\n color: #B2A3FF;\n}\n\n:host([code-theme=\"dark\"]) .token.hexcode {\n color: #73BCF7;\n}\n\n:host([code-theme=\"dark\"]) .token.id {\n color: #B2A3FF;\n font-weight: bold;\n}\n\n:host([code-theme=\"dark\"]) .token.important {\n color: #B2A3FF;\n font-weight: bold;\n}\n\n:host([code-theme=\"dark\"]) .token.inserted {\n color: #73BCF7;\n}\n\n:host([code-theme=\"dark\"]) .token.keyword {\n color: #B2A3FF;\n}\n\n:host([code-theme=\"dark\"]) .token.number {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.operator {\n color: #73BCF7;\n}\n\n:host([code-theme=\"dark\"]) .token.prolog {\n color: #D2D2D2;\n}\n\n:host([code-theme=\"dark\"]) .token.property {\n color: #73BCF7;\n}\n\n:host([code-theme=\"dark\"]) .token.pseudo-class {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.pseudo-element {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.punctuation {\n color: #73BCF7;\n}\n\n:host([code-theme=\"dark\"]) .token.regex {\n color: #73BCF7;\n}\n\n:host([code-theme=\"dark\"]) .token.selector {\n color: #FF8A80;\n}\n\n:host([code-theme=\"dark\"]) .token.string {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.symbol {\n color: #B2A3FF;\n}\n\n:host([code-theme=\"dark\"]) .token.tag {\n color: #FF8A80;\n}\n\n:host([code-theme=\"dark\"]) .token.unit {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.url {\n color: #FF8A80;\n}\n\n:host([code-theme=\"dark\"]) .token.variable {\n color: #FF8A80;\n}\n"],"sourceRoot":"../src"} \ No newline at end of file diff --git a/elements/pfe-codeblock/dist/pfe-codeblock-material-dark.min.css.map b/elements/pfe-codeblock/dist/pfe-codeblock-material-dark.min.css.map new file mode 100644 index 0000000000..677d3b4f84 --- /dev/null +++ b/elements/pfe-codeblock/dist/pfe-codeblock-material-dark.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../src/pfe-codeblock-material-dark.scss","pfe-codeblock-material-dark.css"],"names":[],"mappings":"AAWA,gDCVA,+CDaE,WAAA,KACA,YAAA,IACA,aAAA,OACA,WAAA,OACA,UAAA,OACA,MAAA,QACA,WAAA,QACA,YAAA,2BACA,UAAA,IACA,YAAA,MACA,cAAA,EAAA,YAAA,EAAA,SAAA,EACA,gBAAA,KAAA,YAAA,KAAA,QAAA,KAdF,iEAAA,gEAAA,gEAAA,+DAqBE,WAAA,QCNF,4DDfA,2DCgBA,2DAFA,0DDOE,WAAA,QArBF,0DAyBE,YAAA,OACA,cAAA,KACA,QAAA,KA3BF,+CA+BE,SAAA,KACA,SAAA,SACA,OAAA,KAAA,EACA,QAAA,OAAA,IAlCF,4DAoCG,SAAA,SACA,aAAA,MACA,cAAA,WAtCH,4CCwCA,6CACA,6CDIE,MAAA,QA7CF,uDAiDE,QAAA,GAjDF,uCAsDG,MAAA,QAtDH,0CA0DG,MAAA,QA1DH,2CA8DG,MAAA,QA9DH,0CAkEG,MAAA,QAlEH,wCAsEG,MAAA,QAtEH,wCA0EG,MAAA,QA1EH,sCA8EG,MAAA,QA9EH,qCAkFG,MAAA,QAlFH,sCAsFG,MAAA,QAtFH,2CA0FG,MAAA,QA1FH,wCA8FG,MAAA,QA9FH,yCAkGG,MAAA,QAlGH,wCAsGG,MAAA,QAtGH,wCA0GG,MAAA,QA1GH,uCA8GG,MAAA,QA9GH,yCAkHG,MAAA,QAlHH,wCAsHG,MAAA,QAtHH,mCA0HG,MAAA,QACA,YAAA,IA3HH,0CA+HG,MAAA,QACA,YAAA,IAhIH,yCAoIG,MAAA,QApIH,wCAwIG,MAAA,QAxIH,uCA4IG,MAAA,QA5IH,yCAgJG,MAAA,QAhJH,uCAoJG,MAAA,QApJH,yCAwJG,MAAA,QAxJH,6CA4JG,MAAA,QA5JH,+CAgKG,MAAA,QAhKH,4CAoKG,MAAA,QApKH,sCAwKG,MAAA,QAxKH,yCA4KG,MAAA,QA5KH,uCAgLG,MAAA,QAhLH,uCAoLG,MAAA,QApLH,oCAwLG,MAAA,QAxLH,qCA4LG,MAAA,QA5LH,oCAgMG,MAAA,QAhMH,yCAoMG,MAAA","file":"pfe-codeblock-material-dark.min.css","sourceRoot":"../src","sourcesContent":[null,":host([code-theme=\"dark\"]) code[class*=\"language-\"],\n:host([code-theme=\"dark\"]) pre[class*=\"language-\"] {\n text-align: left;\n white-space: pre;\n word-spacing: normal;\n word-break: normal;\n word-wrap: normal;\n color: #D2D2D2;\n background: #3C3F42;\n font-family: pfe-var(font-family--code);\n font-size: 1em;\n line-height: 1.5em;\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n -webkit-hyphens: none;\n -ms-hyphens: none;\n hyphens: none;\n}\n\n:host([code-theme=\"dark\"]) code[class*=\"language-\"]::-moz-selection, :host([code-theme=\"dark\"]) pre[class*=\"language-\"]::-moz-selection, :host([code-theme=\"dark\"]) code[class*=\"language-\"] ::-moz-selection, :host([code-theme=\"dark\"]) pre[class*=\"language-\"] ::-moz-selection {\n background: #363636;\n}\n\n:host([code-theme=\"dark\"]) code[class*=\"language-\"]::selection,\n:host([code-theme=\"dark\"]) pre[class*=\"language-\"]::selection,\n:host([code-theme=\"dark\"]) code[class*=\"language-\"] ::selection,\n:host([code-theme=\"dark\"]) pre[class*=\"language-\"] ::selection {\n background: #363636;\n}\n\n:host([code-theme=\"dark\"]) :not(pre) > code[class*=\"language-\"] {\n white-space: normal;\n border-radius: 0.2em;\n padding: 0.1em;\n}\n\n:host([code-theme=\"dark\"]) pre[class*=\"language-\"] {\n overflow: auto;\n position: relative;\n margin: 0.5em 0;\n padding: 1.25em 1em;\n}\n\n:host([code-theme=\"dark\"]) pre[class*=\"language-\"].line-numbers {\n position: relative;\n padding-left: 3.8em;\n counter-reset: linenumber;\n}\n\n:host([code-theme=\"dark\"]) .language-css > code,\n:host([code-theme=\"dark\"]) .language-sass > code,\n:host([code-theme=\"dark\"]) .language-scss > code {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) [class*=\"language-\"] .namespace {\n opacity: 0.7;\n}\n\n:host([code-theme=\"dark\"]) .token.atrule {\n color: #B2A3FF;\n}\n\n:host([code-theme=\"dark\"]) .token.attr-name {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.attr-value {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.attribute {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.boolean {\n color: #B2A3FF;\n}\n\n:host([code-theme=\"dark\"]) .token.builtin {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.cdata {\n color: #73BCF7;\n}\n\n:host([code-theme=\"dark\"]) .token.char {\n color: #73BCF7;\n}\n\n:host([code-theme=\"dark\"]) .token.class {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.class-name {\n color: #73BCF7;\n}\n\n:host([code-theme=\"dark\"]) .token.comment {\n color: #D2D2D2;\n}\n\n:host([code-theme=\"dark\"]) .token.constant {\n color: #B2A3FF;\n}\n\n:host([code-theme=\"dark\"]) .token.deleted {\n color: #FF8A80;\n}\n\n:host([code-theme=\"dark\"]) .token.doctype {\n color: #D2D2D2;\n}\n\n:host([code-theme=\"dark\"]) .token.entity {\n color: #FF8A80;\n}\n\n:host([code-theme=\"dark\"]) .token.function {\n color: #B2A3FF;\n}\n\n:host([code-theme=\"dark\"]) .token.hexcode {\n color: #73BCF7;\n}\n\n:host([code-theme=\"dark\"]) .token.id {\n color: #B2A3FF;\n font-weight: bold;\n}\n\n:host([code-theme=\"dark\"]) .token.important {\n color: #B2A3FF;\n font-weight: bold;\n}\n\n:host([code-theme=\"dark\"]) .token.inserted {\n color: #73BCF7;\n}\n\n:host([code-theme=\"dark\"]) .token.keyword {\n color: #B2A3FF;\n}\n\n:host([code-theme=\"dark\"]) .token.number {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.operator {\n color: #73BCF7;\n}\n\n:host([code-theme=\"dark\"]) .token.prolog {\n color: #D2D2D2;\n}\n\n:host([code-theme=\"dark\"]) .token.property {\n color: #73BCF7;\n}\n\n:host([code-theme=\"dark\"]) .token.pseudo-class {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.pseudo-element {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.punctuation {\n color: #73BCF7;\n}\n\n:host([code-theme=\"dark\"]) .token.regex {\n color: #73BCF7;\n}\n\n:host([code-theme=\"dark\"]) .token.selector {\n color: #FF8A80;\n}\n\n:host([code-theme=\"dark\"]) .token.string {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.symbol {\n color: #B2A3FF;\n}\n\n:host([code-theme=\"dark\"]) .token.tag {\n color: #FF8A80;\n}\n\n:host([code-theme=\"dark\"]) .token.unit {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.url {\n color: #FF8A80;\n}\n\n:host([code-theme=\"dark\"]) .token.variable {\n color: #FF8A80;\n}\n\n/*# sourceMappingURL=pfe-codeblock-material-dark.css.map */\n"]} \ No newline at end of file diff --git a/elements/pfe-codeblock/dist/pfe-codeblock-material-light.css.map b/elements/pfe-codeblock/dist/pfe-codeblock-material-light.css.map new file mode 100644 index 0000000000..181e0d5c49 --- /dev/null +++ b/elements/pfe-codeblock/dist/pfe-codeblock-material-light.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["pfe-codeblock-material-light.scss","pfe-codeblock-material-light.css"],"names":[],"mappings":"AAYA;;EAGE,gBAAgB;EAChB,gBAAgB;EAChB,oBAAoB;EACpB,kBAAkB;EAClB,iBAAiB;EACjB,cAdmB;EAenB,mBAhBoB;EAiBpB,uCAAuC;EACvC,cAAc;EACd,kBAAkB;EAClB,gBAAW;IAAX,cAAW;OAAX,WAAW;EACX,qBAAa;MAAb,iBAAa;UAAb,aAAa;ACZf;;ADFA;EAqBE,mBAvByB;EAwBzB,cAzByB;ACa3B;;ADVA;;;;EAqBE,mBAvByB;EAwBzB,cAzByB;ACa3B;;ADVA;EA0BE,mBAAmB;EACnB,oBAAoB;EACpB,cAAc;ACZhB;;ADhBA;EAgCE,cAAc;EACd,kBAAkB;EAClB,eAAe;EACf,mBAAmB;ACZrB;;ADvBA;;;EAyCE,cApDmB;ACwCrB;;AD7BA;EA6CE,YAAY;ACZd;;ADjCA;EAkDG,cA1DoB;AC6CvB;;ADrCA;EAsDG,WA/De;ACkDlB;;ADzCA;EA0DG,cArEkB;ACwDrB;;AD7CA;EA8DG,cAzEkB;AC4DrB;;ADjDA;EAkEG,cA1EoB;AC6DvB;;ADrDA;EAsEG,WA/Ee;ACkElB;;ADzDA;EA0EG,WAnFe;ACsElB;;AD7DA;EA8EG,WAvFe;AC0ElB;;ADjEA;EAkFG,WA3Fe;AC8ElB;;ADrEA;EAsFG,WA/Fe;ACkFlB;;ADzEA;EA0FG,cA/FwB;ACkF3B;;AD7EA;EA8FG,cAtGoB;ACyFvB;;ADjFA;EAkGG,cA5GiB;AC+FpB;;ADrFA;EAsGG,cA3GwB;AC8F3B;;ADzFA;EA0GG,cApHiB;ACuGpB;;AD7FA;EA8GG,cAtHoB;ACyGvB;;ADjGA;EAkHG,cA7HkB;ACgHrB;;ADrGA;EAsHG,cA9HoB;EA+HpB,iBAAiB;ACbpB;;AD1GA;EA2HG,cAnIoB;EAoIpB,iBAAiB;ACbpB;;AD/GA;EAgIG,WAzIe;AC4HlB;;ADnHA;EAoIG,cA5IoB;AC+HvB;;ADvHA;EAwIG,cAnJkB;ACsIrB;;AD3HA;EA4IG,WArJe;ACwIlB;;AD/HA;EAgJG,cArJwB;ACwI3B;;ADnIA;EAoJG,WA7Je;ACgJlB;;ADvIA;EAwJG,cAnKkB;ACsJrB;;AD3IA;EA4JG,cAvKkB;AC0JrB;;AD/IA;EAgKG,WAzKe;AC4JlB;;ADnJA;EAoKG,WA7Ke;ACgKlB;;ADvJA;EAwKG,cAlLiB;ACqKpB;;AD3JA;EA4KG,cAvLkB;AC0KrB;;AD/JA;EAgLG,cAxLoB;AC2KvB;;ADnKA;EAoLG,cA9LiB;ACiLpB;;ADvKA;EAwLG,cAnMkB;ACsLrB;;AD3KA;EA4LG,cAtMiB;ACyLpB;;AD/KA;EAgMG,cA1MiB;AC6LpB","file":"pfe-codeblock-material-light.css","sourcesContent":["//Define custom colors\n$custom-pink: #B300B3; // h1, p, body\n$custom-red: #C9190B; // \"javascript\", red, #eee\n$custom-blue: #06C; // <, , height=\"\"\n$custom-purple: #40199A; // const, let, null, main, printf, return\n$custom-white: #F5F5F5; // Background\n$custom-gray: #6A6E73; // example, text, #include, stdio.h, int\n$custom-light-gray: #6A6E73; // Numbers and dividers\n$custom-black: #151515; // example html, some paragraph text\n$custom-hilight-fg: #263238; // Foreground color :selected\n$custom-hilight-bg: #cceae7; // Background color :selected\n\n:host {\n\tcode[class*=\"language-\"],\n\tpre[class*=\"language-\"] {\n\t\ttext-align: left;\n\t\twhite-space: pre;\n\t\tword-spacing: normal;\n\t\tword-break: normal;\n\t\tword-wrap: normal;\n\t\tcolor: $custom-gray;\n\t\tbackground: $custom-white;\n\t\tfont-family: pfe-var(font-family--code);\n\t\tfont-size: 1em;\n\t\tline-height: 1.5em;\n\t\ttab-size: 4;\n\t\thyphens: none;\n\t}\n\n\tcode[class*=\"language-\"]::selection,\n\tpre[class*=\"language-\"]::selection,\n\tcode[class*=\"language-\"] ::selection,\n\tpre[class*=\"language-\"] ::selection {\n\t\tbackground: $custom-hilight-bg;\n\t\tcolor: $custom-hilight-fg;\n\t}\n\n\t:not(pre) > code[class*=\"language-\"] {\n\t\twhite-space: normal;\n\t\tborder-radius: 0.2em;\n\t\tpadding: 0.1em;\n\t}\n\n\tpre[class*=\"language-\"] {\n\t\toverflow: auto;\n\t\tposition: relative;\n\t\tmargin: 0.5em 0;\n\t\tpadding: 1.25em 1em;\n\t}\n\n\t.language-css > code,\n\t.language-sass > code,\n\t.language-scss > code {\n\t\tcolor: $custom-pink;\n\t}\n\n\t[class*=\"language-\"] .namespace {\n\t\topacity: 0.7;\n\t}\n\n\t.token {\n\t\t&.atrule {\n\t\t\tcolor: $custom-purple;\n\t\t}\n\t\n\t\t&.attr-name {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.attr-value {\n\t\t\tcolor: $custom-pink;\n\t\t}\n\t\n\t\t&.attribute {\n\t\t\tcolor: $custom-pink;\n\t\t}\n\t\n\t\t&.boolean {\n\t\t\tcolor: $custom-purple;\n\t\t}\n\t\n\t\t&.builtin {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.cdata {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.char {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.class {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.class-name {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.comment {\n\t\t\tcolor: $custom-light-gray;\n\t\t}\n\t\n\t\t&.constant {\n\t\t\tcolor: $custom-purple;\n\t\t}\n\t\n\t\t&.deleted {\n\t\t\tcolor: $custom-red;\n\t\t}\n\t\n\t\t&.doctype {\n\t\t\tcolor: $custom-light-gray;\n\t\t}\n\t\n\t\t&.entity {\n\t\t\tcolor: $custom-red;\n\t\t}\n\t\n\t\t&.function {\n\t\t\tcolor: $custom-purple;\n\t\t}\n\t\n\t\t&.hexcode {\n\t\t\tcolor: $custom-pink;\n\t\t}\n\t\n\t\t&.id {\n\t\t\tcolor:$custom-purple;\n\t\t\tfont-weight: bold;\n\t\t}\n\t\n\t\t&.important {\n\t\t\tcolor: $custom-purple;\n\t\t\tfont-weight: bold;\n\t\t}\n\t\n\t\t&.inserted {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.keyword {\n\t\t\tcolor: $custom-purple;\n\t\t}\n\t\n\t\t&.number {\n\t\t\tcolor:$custom-pink;\n\t\t}\n\t\n\t\t&.operator {\n\t\t\tcolor:$custom-blue;\n\t\t}\n\t\n\t\t&.prolog {\n\t\t\tcolor: $custom-light-gray;\n\t\t}\n\t\n\t\t&.property {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.pseudo-class {\n\t\t\tcolor: $custom-pink;\n\t\t}\n\t\n\t\t&.pseudo-element {\n\t\t\tcolor: $custom-pink;\n\t\t}\n\t\n\t\t&.punctuation {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.regex {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.selector {\n\t\t\tcolor: $custom-red;\n\t\t}\n\t\n\t\t&.string {\n\t\t\tcolor: $custom-pink;\n\t\t}\n\t\n\t\t&.symbol {\n\t\t\tcolor: $custom-purple;\n\t\t}\n\t\n\t\t&.tag {\n\t\t\tcolor: $custom-red;\n\t\t}\n\t\n\t\t&.unit {\n\t\t\tcolor: $custom-pink;\n\t\t}\n\t\n\t\t&.url {\n\t\t\tcolor: $custom-red;\n\t\t}\n\t\n\t\t&.variable {\n\t\t\tcolor: $custom-red;\n\t\t}\t\n\t}\n}\n",":host code[class*=\"language-\"],\n:host pre[class*=\"language-\"] {\n text-align: left;\n white-space: pre;\n word-spacing: normal;\n word-break: normal;\n word-wrap: normal;\n color: #6A6E73;\n background: #F5F5F5;\n font-family: pfe-var(font-family--code);\n font-size: 1em;\n line-height: 1.5em;\n tab-size: 4;\n hyphens: none;\n}\n\n:host code[class*=\"language-\"]::selection,\n:host pre[class*=\"language-\"]::selection,\n:host code[class*=\"language-\"] ::selection,\n:host pre[class*=\"language-\"] ::selection {\n background: #cceae7;\n color: #263238;\n}\n\n:host :not(pre) > code[class*=\"language-\"] {\n white-space: normal;\n border-radius: 0.2em;\n padding: 0.1em;\n}\n\n:host pre[class*=\"language-\"] {\n overflow: auto;\n position: relative;\n margin: 0.5em 0;\n padding: 1.25em 1em;\n}\n\n:host .language-css > code,\n:host .language-sass > code,\n:host .language-scss > code {\n color: #B300B3;\n}\n\n:host [class*=\"language-\"] .namespace {\n opacity: 0.7;\n}\n\n:host .token.atrule {\n color: #40199A;\n}\n\n:host .token.attr-name {\n color: #06C;\n}\n\n:host .token.attr-value {\n color: #B300B3;\n}\n\n:host .token.attribute {\n color: #B300B3;\n}\n\n:host .token.boolean {\n color: #40199A;\n}\n\n:host .token.builtin {\n color: #06C;\n}\n\n:host .token.cdata {\n color: #06C;\n}\n\n:host .token.char {\n color: #06C;\n}\n\n:host .token.class {\n color: #06C;\n}\n\n:host .token.class-name {\n color: #06C;\n}\n\n:host .token.comment {\n color: #6A6E73;\n}\n\n:host .token.constant {\n color: #40199A;\n}\n\n:host .token.deleted {\n color: #C9190B;\n}\n\n:host .token.doctype {\n color: #6A6E73;\n}\n\n:host .token.entity {\n color: #C9190B;\n}\n\n:host .token.function {\n color: #40199A;\n}\n\n:host .token.hexcode {\n color: #B300B3;\n}\n\n:host .token.id {\n color: #40199A;\n font-weight: bold;\n}\n\n:host .token.important {\n color: #40199A;\n font-weight: bold;\n}\n\n:host .token.inserted {\n color: #06C;\n}\n\n:host .token.keyword {\n color: #40199A;\n}\n\n:host .token.number {\n color: #B300B3;\n}\n\n:host .token.operator {\n color: #06C;\n}\n\n:host .token.prolog {\n color: #6A6E73;\n}\n\n:host .token.property {\n color: #06C;\n}\n\n:host .token.pseudo-class {\n color: #B300B3;\n}\n\n:host .token.pseudo-element {\n color: #B300B3;\n}\n\n:host .token.punctuation {\n color: #06C;\n}\n\n:host .token.regex {\n color: #06C;\n}\n\n:host .token.selector {\n color: #C9190B;\n}\n\n:host .token.string {\n color: #B300B3;\n}\n\n:host .token.symbol {\n color: #40199A;\n}\n\n:host .token.tag {\n color: #C9190B;\n}\n\n:host .token.unit {\n color: #B300B3;\n}\n\n:host .token.url {\n color: #C9190B;\n}\n\n:host .token.variable {\n color: #C9190B;\n}\n"],"sourceRoot":"../src"} \ No newline at end of file diff --git a/elements/pfe-codeblock/dist/pfe-codeblock-material-light.min.css.map b/elements/pfe-codeblock/dist/pfe-codeblock-material-light.min.css.map new file mode 100644 index 0000000000..5c2c7a1222 --- /dev/null +++ b/elements/pfe-codeblock/dist/pfe-codeblock-material-light.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../src/pfe-codeblock-material-light.scss","pfe-codeblock-material-light.css"],"names":[],"mappings":"AAYA,6BCXA,4BDcE,WAAA,KACA,YAAA,IACA,aAAA,OACA,WAAA,OACA,UAAA,OACA,MAAA,QACA,WAAA,QACA,YAAA,2BACA,UAAA,IACA,YAAA,MACA,cAAA,EAAA,YAAA,EAAA,SAAA,EACA,gBAAA,KAAA,YAAA,KAAA,QAAA,KAdF,8CAAA,6CAAA,6CAAA,4CAqBE,WAAA,QACA,MAAA,QCPF,yCDfA,wCCgBA,wCAFA,uCDOE,WAAA,QACA,MAAA,QAtBF,uCA0BE,YAAA,OACA,cAAA,KACA,QAAA,KA5BF,4BAgCE,SAAA,KACA,SAAA,SACA,OAAA,KAAA,EACA,QAAA,OAAA,IAnCF,yBCmCA,0BACA,0BDKE,MAAA,QAzCF,oCA6CE,QAAA,GA7CF,oBAkDG,MAAA,QAlDH,uBAsDG,MAAA,KAtDH,wBA0DG,MAAA,QA1DH,uBA8DG,MAAA,QA9DH,qBAkEG,MAAA,QAlEH,qBAsEG,MAAA,KAtEH,mBA0EG,MAAA,KA1EH,kBA8EG,MAAA,KA9EH,mBAkFG,MAAA,KAlFH,wBAsFG,MAAA,KAtFH,qBA0FG,MAAA,QA1FH,sBA8FG,MAAA,QA9FH,qBAkGG,MAAA,QAlGH,qBAsGG,MAAA,QAtGH,oBA0GG,MAAA,QA1GH,sBA8GG,MAAA,QA9GH,qBAkHG,MAAA,QAlHH,gBAsHG,MAAA,QACA,YAAA,IAvHH,uBA2HG,MAAA,QACA,YAAA,IA5HH,sBAgIG,MAAA,KAhIH,qBAoIG,MAAA,QApIH,oBAwIG,MAAA,QAxIH,sBA4IG,MAAA,KA5IH,oBAgJG,MAAA,QAhJH,sBAoJG,MAAA,KApJH,0BAwJG,MAAA,QAxJH,4BA4JG,MAAA,QA5JH,yBAgKG,MAAA,KAhKH,mBAoKG,MAAA,KApKH,sBAwKG,MAAA,QAxKH,oBA4KG,MAAA,QA5KH,oBAgLG,MAAA,QAhLH,iBAoLG,MAAA,QApLH,kBAwLG,MAAA,QAxLH,iBA4LG,MAAA,QA5LH,sBAgMG,MAAA","file":"pfe-codeblock-material-light.min.css","sourceRoot":"../src","sourcesContent":[null,":host code[class*=\"language-\"],\n:host pre[class*=\"language-\"] {\n text-align: left;\n white-space: pre;\n word-spacing: normal;\n word-break: normal;\n word-wrap: normal;\n color: #6A6E73;\n background: #F5F5F5;\n font-family: pfe-var(font-family--code);\n font-size: 1em;\n line-height: 1.5em;\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n -webkit-hyphens: none;\n -ms-hyphens: none;\n hyphens: none;\n}\n\n:host code[class*=\"language-\"]::-moz-selection, :host pre[class*=\"language-\"]::-moz-selection, :host code[class*=\"language-\"] ::-moz-selection, :host pre[class*=\"language-\"] ::-moz-selection {\n background: #cceae7;\n color: #263238;\n}\n\n:host code[class*=\"language-\"]::selection,\n:host pre[class*=\"language-\"]::selection,\n:host code[class*=\"language-\"] ::selection,\n:host pre[class*=\"language-\"] ::selection {\n background: #cceae7;\n color: #263238;\n}\n\n:host :not(pre) > code[class*=\"language-\"] {\n white-space: normal;\n border-radius: 0.2em;\n padding: 0.1em;\n}\n\n:host pre[class*=\"language-\"] {\n overflow: auto;\n position: relative;\n margin: 0.5em 0;\n padding: 1.25em 1em;\n}\n\n:host .language-css > code,\n:host .language-sass > code,\n:host .language-scss > code {\n color: #B300B3;\n}\n\n:host [class*=\"language-\"] .namespace {\n opacity: 0.7;\n}\n\n:host .token.atrule {\n color: #40199A;\n}\n\n:host .token.attr-name {\n color: #06C;\n}\n\n:host .token.attr-value {\n color: #B300B3;\n}\n\n:host .token.attribute {\n color: #B300B3;\n}\n\n:host .token.boolean {\n color: #40199A;\n}\n\n:host .token.builtin {\n color: #06C;\n}\n\n:host .token.cdata {\n color: #06C;\n}\n\n:host .token.char {\n color: #06C;\n}\n\n:host .token.class {\n color: #06C;\n}\n\n:host .token.class-name {\n color: #06C;\n}\n\n:host .token.comment {\n color: #6A6E73;\n}\n\n:host .token.constant {\n color: #40199A;\n}\n\n:host .token.deleted {\n color: #C9190B;\n}\n\n:host .token.doctype {\n color: #6A6E73;\n}\n\n:host .token.entity {\n color: #C9190B;\n}\n\n:host .token.function {\n color: #40199A;\n}\n\n:host .token.hexcode {\n color: #B300B3;\n}\n\n:host .token.id {\n color: #40199A;\n font-weight: bold;\n}\n\n:host .token.important {\n color: #40199A;\n font-weight: bold;\n}\n\n:host .token.inserted {\n color: #06C;\n}\n\n:host .token.keyword {\n color: #40199A;\n}\n\n:host .token.number {\n color: #B300B3;\n}\n\n:host .token.operator {\n color: #06C;\n}\n\n:host .token.prolog {\n color: #6A6E73;\n}\n\n:host .token.property {\n color: #06C;\n}\n\n:host .token.pseudo-class {\n color: #B300B3;\n}\n\n:host .token.pseudo-element {\n color: #B300B3;\n}\n\n:host .token.punctuation {\n color: #06C;\n}\n\n:host .token.regex {\n color: #06C;\n}\n\n:host .token.selector {\n color: #C9190B;\n}\n\n:host .token.string {\n color: #B300B3;\n}\n\n:host .token.symbol {\n color: #40199A;\n}\n\n:host .token.tag {\n color: #C9190B;\n}\n\n:host .token.unit {\n color: #B300B3;\n}\n\n:host .token.url {\n color: #C9190B;\n}\n\n:host .token.variable {\n color: #C9190B;\n}\n\n/*# sourceMappingURL=pfe-codeblock-material-light.css.map */\n"]} \ No newline at end of file diff --git a/elements/pfe-codeblock/dist/pfe-codeblock.css.map b/elements/pfe-codeblock/dist/pfe-codeblock.css.map new file mode 100644 index 0000000000..368d33ea25 --- /dev/null +++ b/elements/pfe-codeblock/dist/pfe-codeblock.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["pfe-codeblock-material-light.scss","../../pfe-sass/functions/_custom-properties.scss","pfe-codeblock.css","pfe-codeblock-material-dark.scss","../../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css","pfe-codeblock.scss"],"names":[],"mappings":"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","file":"pfe-codeblock.css","sourcesContent":["//Define custom colors\n$custom-pink: #B300B3; // h1, p, body\n$custom-red: #C9190B; // \"javascript\", red, #eee\n$custom-blue: #06C; // <, , height=\"\"\n$custom-purple: #40199A; // const, let, null, main, printf, return\n$custom-white: #F5F5F5; // Background\n$custom-gray: #6A6E73; // example, text, #include, stdio.h, int\n$custom-light-gray: #6A6E73; // Numbers and dividers\n$custom-black: #151515; // example html, some paragraph text\n$custom-hilight-fg: #263238; // Foreground color :selected\n$custom-hilight-bg: #cceae7; // Background color :selected\n\n:host {\n\tcode[class*=\"language-\"],\n\tpre[class*=\"language-\"] {\n\t\ttext-align: left;\n\t\twhite-space: pre;\n\t\tword-spacing: normal;\n\t\tword-break: normal;\n\t\tword-wrap: normal;\n\t\tcolor: $custom-gray;\n\t\tbackground: $custom-white;\n\t\tfont-family: pfe-var(font-family--code);\n\t\tfont-size: 1em;\n\t\tline-height: 1.5em;\n\t\ttab-size: 4;\n\t\thyphens: none;\n\t}\n\n\tcode[class*=\"language-\"]::selection,\n\tpre[class*=\"language-\"]::selection,\n\tcode[class*=\"language-\"] ::selection,\n\tpre[class*=\"language-\"] ::selection {\n\t\tbackground: $custom-hilight-bg;\n\t\tcolor: $custom-hilight-fg;\n\t}\n\n\t:not(pre) > code[class*=\"language-\"] {\n\t\twhite-space: normal;\n\t\tborder-radius: 0.2em;\n\t\tpadding: 0.1em;\n\t}\n\n\tpre[class*=\"language-\"] {\n\t\toverflow: auto;\n\t\tposition: relative;\n\t\tmargin: 0.5em 0;\n\t\tpadding: 1.25em 1em;\n\t}\n\n\t.language-css > code,\n\t.language-sass > code,\n\t.language-scss > code {\n\t\tcolor: $custom-pink;\n\t}\n\n\t[class*=\"language-\"] .namespace {\n\t\topacity: 0.7;\n\t}\n\n\t.token {\n\t\t&.atrule {\n\t\t\tcolor: $custom-purple;\n\t\t}\n\t\n\t\t&.attr-name {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.attr-value {\n\t\t\tcolor: $custom-pink;\n\t\t}\n\t\n\t\t&.attribute {\n\t\t\tcolor: $custom-pink;\n\t\t}\n\t\n\t\t&.boolean {\n\t\t\tcolor: $custom-purple;\n\t\t}\n\t\n\t\t&.builtin {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.cdata {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.char {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.class {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.class-name {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.comment {\n\t\t\tcolor: $custom-light-gray;\n\t\t}\n\t\n\t\t&.constant {\n\t\t\tcolor: $custom-purple;\n\t\t}\n\t\n\t\t&.deleted {\n\t\t\tcolor: $custom-red;\n\t\t}\n\t\n\t\t&.doctype {\n\t\t\tcolor: $custom-light-gray;\n\t\t}\n\t\n\t\t&.entity {\n\t\t\tcolor: $custom-red;\n\t\t}\n\t\n\t\t&.function {\n\t\t\tcolor: $custom-purple;\n\t\t}\n\t\n\t\t&.hexcode {\n\t\t\tcolor: $custom-pink;\n\t\t}\n\t\n\t\t&.id {\n\t\t\tcolor:$custom-purple;\n\t\t\tfont-weight: bold;\n\t\t}\n\t\n\t\t&.important {\n\t\t\tcolor: $custom-purple;\n\t\t\tfont-weight: bold;\n\t\t}\n\t\n\t\t&.inserted {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.keyword {\n\t\t\tcolor: $custom-purple;\n\t\t}\n\t\n\t\t&.number {\n\t\t\tcolor:$custom-pink;\n\t\t}\n\t\n\t\t&.operator {\n\t\t\tcolor:$custom-blue;\n\t\t}\n\t\n\t\t&.prolog {\n\t\t\tcolor: $custom-light-gray;\n\t\t}\n\t\n\t\t&.property {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.pseudo-class {\n\t\t\tcolor: $custom-pink;\n\t\t}\n\t\n\t\t&.pseudo-element {\n\t\t\tcolor: $custom-pink;\n\t\t}\n\t\n\t\t&.punctuation {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.regex {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.selector {\n\t\t\tcolor: $custom-red;\n\t\t}\n\t\n\t\t&.string {\n\t\t\tcolor: $custom-pink;\n\t\t}\n\t\n\t\t&.symbol {\n\t\t\tcolor: $custom-purple;\n\t\t}\n\t\n\t\t&.tag {\n\t\t\tcolor: $custom-red;\n\t\t}\n\t\n\t\t&.unit {\n\t\t\tcolor: $custom-pink;\n\t\t}\n\t\n\t\t&.url {\n\t\t\tcolor: $custom-red;\n\t\t}\n\t\n\t\t&.variable {\n\t\t\tcolor: $custom-red;\n\t\t}\t\n\t}\n}\n","////\n/// Tools for leveraging custom property stacks\n/// @group custom-properties\n/// @author castastrophe\n////\n\n/// Get full theme stack with a fallback from the provided map - used by pfe-var and pfe-zindex\n/// @param {String} $category - Category name to be appended to variables within the map/system\n/// @param {String} $key - Variable name to be used and prepended with --pfe-theme\n/// @param {Map} $map - Sass map of variables\n/// @param {String} $fallback [null] - Optional fallback override\n/// @param {Boolean} $use-fallback [true] - Optional hook to return a stack with no fallback value\n/// @requires $custom-prop-prefix\n/// @return {String} theme stack with fallback value from a sass map\n@function pfe-get-from-map($category, $key, $map, $fallback: null, $prefix: \"#{$custom-prop-prefix}-theme\", $use-fallback: true) {\n // Start building the variable declaration\n $var-declaration: \"--#{$prefix}--\";\n @if $prefix == \"pf-c\" {\n $var-declaration: \"--#{$prefix}-\"; // one dash at the end\n }\n // If the category exists, inject that into the string\n @if $category != \"\" {\n $var-declaration: \"#{$var-declaration}#{$category}--\";\n }\n // Append the key to the string\n $var-declaration: \"#{$var-declaration}#{$key}\";\n\n // If the fallback is not provided but use-fallback is set to true\n @if $fallback == null and $use-fallback and map-get($map, $key) != null {\n $fallback: map-get($map, $key);\n }\n @if $fallback != null {\n // Create the variable declaration\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration}); \n}\n\n\n\n/// Returns CSS Var for the local component-scoped variable\n/// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--'\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $custom-prop-prefix\n/// @see $LOCAL\n/// @example\n/// :host {\n/// padding-top: #{pfe-local(paddingTop)};\n/// padding-bottom: #{pfe-local(paddingBottom)};\n/// }\n@function pfe-local($cssvar, $fallback: null, $region: null) {\n // If a fallback is not defined, use the global variables map\n @if $fallback == null and length($LOCAL-VARIABLES) > 0 {\n @if $region == null {\n $fallback: map-get($LOCAL-VARIABLES, $cssvar);\n }\n @else {\n $submap: map-get($LOCAL-VARIABLES, $region);\n @if type-of($submap) == \"map\" {\n $fallback: map-deep-get($LOCAL-VARIABLES, $region, $cssvar);\n }\n }\n }\n\n // If a region value exists, build the region string\n @if $region != null {\n $region: \"__#{$region}\";\n }\n\n // Start building the variable declaration\n $var-declaration: \"--#{$custom-prop-prefix}-#{$LOCAL}#{$region}--#{to-string($cssvar, '--')}\";\n \n @if $fallback != null {\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n\n // Return the variable declaration string\n @return var(#{$var-declaration});\n}\n\n/// Fetches a CSS variable stack for broadcasted variables, providing a hook for context\n/// to influence the styles of children elements such as p tags or links.\n/// @param {String} $broadcast - name of the broadcast variable to apply\n/// @requires {String} $custom-prop-prefix - Name of repo, which is \"pfe\"\n/// @example - scss\n/// :host {\n/// color: pfe-broadcasted(link);\n/// }\n/// @example - css\n/// :host {\n/// color: var(--pfe-broadcasted--link, #06c);\n/// }\n@function pfe-broadcasted($broadcast, $use-fallback: true) {\n $fallback: \"\";\n @if $use-fallback {\n $fallback: \", #{map-get($pfe-broadcasted, #{to-string($broadcast,'--')})}\";\t\n }\n @if not index($BROADCAST-VARS, first(str-split($broadcast, '--'))) {\n @error \"--#{$custom-prop-prefix}-broadcasted--#{$broadcast} variable is not currently supported.\";\n }\n @else {\n @return var(--#{$custom-prop-prefix}-broadcasted--#{to-string($broadcast,'--')}#{unquote($fallback)});\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme--zindex\n/// @requires {Map} $pfe-zindex - SASS Map of z-index values\n/// @see $pfe-zindex\n/// @example - scss - In your component styles\n/// .my-element {\n/// z-index: pfe-zindex( content );\n/// }\n\n@function pfe-zindex($cssvar) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-zindex, $var-name) != null {\n @return pfe-get-from-map(\"zindex\", $var-name, $pfe-zindex);\n }\n @else {\n @error \"The key for #{$var-name} could not be found in the $pfe-zindex map.\";\n }\n}\n\n/// Returns the value (only) of a property from the respective maps\n/// Similar to pfe-var, but does not include css variable in the compiled CSS\n/// @param {String} $name - Name of the key for the map\n/// @param {String} $region - Identifies the region or slot to which this is assigned\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example - scss - In your component styles\n/// .my-element {\n/// background-color: pfe-fetch( ui-base );\n/// }\n@function pfe-fetch($name, $region: null) {\n $var-name: to-string($name, \"--\");\n @if $region != null and map-deep-get($LOCAL-VARIABLES, $region, $var-name) != null {\n @return map-deep-get($LOCAL-VARIABLES, $region, $var-name);\n }\n @else if $region == null and map-get($LOCAL-VARIABLES, $var-name) != null {\n @return map-get($LOCAL-VARIABLES, $var-name);\n }\n @else if map-get($pfe-vars, $var-name) != null {\n @return map-get($pfe-vars, $var-name);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return map-get($pfe-colors, $var-name);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return map-get($pfe-broadcasted, $var-name);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return map-get($pfe-typography-base, $var-name);\n }\n\n // PATTERNFLY CORE\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return map-get($pf-type-sizing, $var-name);\n }\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return map-get($pf-type-sizing--component, $var-name);\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return map-get($pf-type-sizing--modifers, $var-name);\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return map-get($pf-type-sizing--content, $var-name);\n }\n // DEPRECATED\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return map-get($pfe-typography-base-deprecated, $var-name);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return map-get($pfe-typography-deprecated, $var-name);\n }\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}\n\n/// Returns CSS variable stack with exposed theme variable and respective fallback\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme\n/// @param {String} $fallback [null] - Optional custom fallback\n/// @see $pfe-vars\n/// @see $pfe-colors\n/// @see $pfe-broadcasted\n/// @example scss - In your component styles\n/// .my-element {\n/// padding: pfe-var( container-spacer );\n/// font-size: pfe-var( font-size );\n/// }\n/// @example - css Rendered output\n/// .my-element {\n/// padding: var(--pfe-theme--container-spacer, 16px);\n/// font-size: var(--pfe-theme--font-size, 16px);\n/// }\n@function pfe-var($cssvar, $fallback: null) {\n $var-name: to-string($cssvar, \"--\");\n @if map-get($pfe-vars, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-vars, $fallback);\n }\n @else if map-get($pfe-colors, $var-name) != null {\n @return pfe-get-from-map(\"color\", $var-name, $pfe-colors, $fallback);\n }\n @else if map-get($pfe-broadcasted, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-broadcasted);\n }\n @else if map-get($pfe-typography-base, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base, $fallback);\n }\n // PATTERNFLY CORE:\n @else if map-get($pf-type-sizing, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing, $fallback, $prefix: \"pf-global\");\n }\n @else if map-get($pf-type-sizing--modifers, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--modifers, $fallback, $prefix: \"pf-c\");\n }\n @else if map-get($pf-type-sizing--content, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--content, $fallback, $prefix: \"pf-c\");\n }\n // PFE components (must be below core)\n @else if map-get($pf-type-sizing--component, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pf-type-sizing--component, $fallback);\n }\n\n // DEPRECATED:\n @else if map-get($pfe-typography-base-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-base-deprecated, $fallback);\n }\n @else if map-get($pfe-typography-deprecated, $var-name) != null {\n @return pfe-get-from-map(\"\", $var-name, $pfe-typography-deprecated, $fallback);\n }\n\n @else {\n @error \"#{$var-name} could not be found.\";\n }\n}",":host code[class*=\"language-\"],\n:host pre[class*=\"language-\"] {\n text-align: left;\n white-space: pre;\n word-spacing: normal;\n word-break: normal;\n word-wrap: normal;\n color: #6A6E73;\n background: #F5F5F5;\n font-family: var(--pfe-theme--font-family--code, \"Overpass Mono\", Consolas, Monaco, \"Andale Mono\", monospace);\n font-size: 1em;\n line-height: 1.5em;\n tab-size: 4;\n hyphens: none;\n}\n\n:host code[class*=\"language-\"]::selection,\n:host pre[class*=\"language-\"]::selection,\n:host code[class*=\"language-\"] ::selection,\n:host pre[class*=\"language-\"] ::selection {\n background: #cceae7;\n color: #263238;\n}\n\n:host :not(pre) > code[class*=\"language-\"] {\n white-space: normal;\n border-radius: 0.2em;\n padding: 0.1em;\n}\n\n:host pre[class*=\"language-\"] {\n overflow: auto;\n position: relative;\n margin: 0.5em 0;\n padding: 1.25em 1em;\n}\n\n:host .language-css > code,\n:host .language-sass > code,\n:host .language-scss > code {\n color: #B300B3;\n}\n\n:host [class*=\"language-\"] .namespace {\n opacity: 0.7;\n}\n\n:host .token.atrule {\n color: #40199A;\n}\n\n:host .token.attr-name {\n color: #06C;\n}\n\n:host .token.attr-value {\n color: #B300B3;\n}\n\n:host .token.attribute {\n color: #B300B3;\n}\n\n:host .token.boolean {\n color: #40199A;\n}\n\n:host .token.builtin {\n color: #06C;\n}\n\n:host .token.cdata {\n color: #06C;\n}\n\n:host .token.char {\n color: #06C;\n}\n\n:host .token.class {\n color: #06C;\n}\n\n:host .token.class-name {\n color: #06C;\n}\n\n:host .token.comment {\n color: #6A6E73;\n}\n\n:host .token.constant {\n color: #40199A;\n}\n\n:host .token.deleted {\n color: #C9190B;\n}\n\n:host .token.doctype {\n color: #6A6E73;\n}\n\n:host .token.entity {\n color: #C9190B;\n}\n\n:host .token.function {\n color: #40199A;\n}\n\n:host .token.hexcode {\n color: #B300B3;\n}\n\n:host .token.id {\n color: #40199A;\n font-weight: bold;\n}\n\n:host .token.important {\n color: #40199A;\n font-weight: bold;\n}\n\n:host .token.inserted {\n color: #06C;\n}\n\n:host .token.keyword {\n color: #40199A;\n}\n\n:host .token.number {\n color: #B300B3;\n}\n\n:host .token.operator {\n color: #06C;\n}\n\n:host .token.prolog {\n color: #6A6E73;\n}\n\n:host .token.property {\n color: #06C;\n}\n\n:host .token.pseudo-class {\n color: #B300B3;\n}\n\n:host .token.pseudo-element {\n color: #B300B3;\n}\n\n:host .token.punctuation {\n color: #06C;\n}\n\n:host .token.regex {\n color: #06C;\n}\n\n:host .token.selector {\n color: #C9190B;\n}\n\n:host .token.string {\n color: #B300B3;\n}\n\n:host .token.symbol {\n color: #40199A;\n}\n\n:host .token.tag {\n color: #C9190B;\n}\n\n:host .token.unit {\n color: #B300B3;\n}\n\n:host .token.url {\n color: #C9190B;\n}\n\n:host .token.variable {\n color: #C9190B;\n}\n\n:host([code-theme=\"dark\"]) code[class*=\"language-\"],\n:host([code-theme=\"dark\"]) pre[class*=\"language-\"] {\n text-align: left;\n white-space: pre;\n word-spacing: normal;\n word-break: normal;\n word-wrap: normal;\n color: #D2D2D2;\n background: #3C3F42;\n font-family: var(--pfe-theme--font-family--code, \"Overpass Mono\", Consolas, Monaco, \"Andale Mono\", monospace);\n font-size: 1em;\n line-height: 1.5em;\n tab-size: 4;\n hyphens: none;\n}\n\n:host([code-theme=\"dark\"]) code[class*=\"language-\"]::selection,\n:host([code-theme=\"dark\"]) pre[class*=\"language-\"]::selection,\n:host([code-theme=\"dark\"]) code[class*=\"language-\"] ::selection,\n:host([code-theme=\"dark\"]) pre[class*=\"language-\"] ::selection {\n background: #363636;\n}\n\n:host([code-theme=\"dark\"]) :not(pre) > code[class*=\"language-\"] {\n white-space: normal;\n border-radius: 0.2em;\n padding: 0.1em;\n}\n\n:host([code-theme=\"dark\"]) pre[class*=\"language-\"] {\n overflow: auto;\n position: relative;\n margin: 0.5em 0;\n padding: 1.25em 1em;\n}\n\n:host([code-theme=\"dark\"]) pre[class*=\"language-\"].line-numbers {\n position: relative;\n padding-left: 3.8em;\n counter-reset: linenumber;\n}\n\n:host([code-theme=\"dark\"]) .language-css > code,\n:host([code-theme=\"dark\"]) .language-sass > code,\n:host([code-theme=\"dark\"]) .language-scss > code {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) [class*=\"language-\"] .namespace {\n opacity: 0.7;\n}\n\n:host([code-theme=\"dark\"]) .token.atrule {\n color: #B2A3FF;\n}\n\n:host([code-theme=\"dark\"]) .token.attr-name {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.attr-value {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.attribute {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.boolean {\n color: #B2A3FF;\n}\n\n:host([code-theme=\"dark\"]) .token.builtin {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.cdata {\n color: #73BCF7;\n}\n\n:host([code-theme=\"dark\"]) .token.char {\n color: #73BCF7;\n}\n\n:host([code-theme=\"dark\"]) .token.class {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.class-name {\n color: #73BCF7;\n}\n\n:host([code-theme=\"dark\"]) .token.comment {\n color: #D2D2D2;\n}\n\n:host([code-theme=\"dark\"]) .token.constant {\n color: #B2A3FF;\n}\n\n:host([code-theme=\"dark\"]) .token.deleted {\n color: #FF8A80;\n}\n\n:host([code-theme=\"dark\"]) .token.doctype {\n color: #D2D2D2;\n}\n\n:host([code-theme=\"dark\"]) .token.entity {\n color: #FF8A80;\n}\n\n:host([code-theme=\"dark\"]) .token.function {\n color: #B2A3FF;\n}\n\n:host([code-theme=\"dark\"]) .token.hexcode {\n color: #73BCF7;\n}\n\n:host([code-theme=\"dark\"]) .token.id {\n color: #B2A3FF;\n font-weight: bold;\n}\n\n:host([code-theme=\"dark\"]) .token.important {\n color: #B2A3FF;\n font-weight: bold;\n}\n\n:host([code-theme=\"dark\"]) .token.inserted {\n color: #73BCF7;\n}\n\n:host([code-theme=\"dark\"]) .token.keyword {\n color: #B2A3FF;\n}\n\n:host([code-theme=\"dark\"]) .token.number {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.operator {\n color: #73BCF7;\n}\n\n:host([code-theme=\"dark\"]) .token.prolog {\n color: #D2D2D2;\n}\n\n:host([code-theme=\"dark\"]) .token.property {\n color: #73BCF7;\n}\n\n:host([code-theme=\"dark\"]) .token.pseudo-class {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.pseudo-element {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.punctuation {\n color: #73BCF7;\n}\n\n:host([code-theme=\"dark\"]) .token.regex {\n color: #73BCF7;\n}\n\n:host([code-theme=\"dark\"]) .token.selector {\n color: #FF8A80;\n}\n\n:host([code-theme=\"dark\"]) .token.string {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.symbol {\n color: #B2A3FF;\n}\n\n:host([code-theme=\"dark\"]) .token.tag {\n color: #FF8A80;\n}\n\n:host([code-theme=\"dark\"]) .token.unit {\n color: #ACE12E;\n}\n\n:host([code-theme=\"dark\"]) .token.url {\n color: #FF8A80;\n}\n\n:host([code-theme=\"dark\"]) .token.variable {\n color: #FF8A80;\n}\n\npre[class*=\"language-\"].line-numbers {\n position: relative;\n padding-left: 3.8em;\n counter-reset: linenumber;\n}\n\npre[class*=\"language-\"].line-numbers > code {\n position: relative;\n white-space: inherit;\n}\n\n.line-numbers .line-numbers-rows {\n position: absolute;\n pointer-events: none;\n top: 0;\n font-size: 100%;\n left: -3.8em;\n width: 3em;\n /* works for line-numbers below 1000 lines */\n letter-spacing: -1px;\n border-right: 1px solid #999;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.line-numbers-rows > span {\n display: block;\n counter-increment: linenumber;\n}\n\n.line-numbers-rows > span:before {\n content: counter(linenumber);\n color: #999;\n display: block;\n padding-right: 0.8em;\n text-align: right;\n}\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n","//Define custom colors\n$custom-red: #FF8A80; // h1, p, body\n$custom-green: #ACE12E; // \"javascript\", red, #eee\n$custom-blue: #73BCF7; // <, , height=\"\", height, width, cx, cy, etc.\n$custom-purple: #B2A3FF; // const, let, null, main, printf, return\n$custom-black: #3C3F42; // Background\n$custom-gray: #D2D2D2; // example, text, #include, stdio.h, int\n$custom-dark-gray: #D2D2D2; // Numbers and dividers\n$custom-white: #FFF; // example html, some paragraph text\n$custom-hilight-bg: #363636; // Background color :selected\n\n:host([code-theme=\"dark\"]) {\n\tcode[class*=\"language-\"],\n\tpre[class*=\"language-\"] {\n\t\ttext-align: left;\n\t\twhite-space: pre;\n\t\tword-spacing: normal;\n\t\tword-break: normal;\n\t\tword-wrap: normal;\n\t\tcolor: $custom-gray;\n\t\tbackground: $custom-black;\n\t\tfont-family: pfe-var(font-family--code);\n\t\tfont-size: 1em;\n\t\tline-height: 1.5em;\n\t\ttab-size: 4;\n\t\thyphens: none;\n\t}\n\n\tcode[class*=\"language-\"]::selection,\n\tpre[class*=\"language-\"]::selection,\n\tcode[class*=\"language-\"] ::selection,\n\tpre[class*=\"language-\"] ::selection {\n\t\tbackground: $custom-hilight-bg;\n\t}\n\n\t:not(pre) > code[class*=\"language-\"] {\n\t\twhite-space: normal;\n\t\tborder-radius: 0.2em;\n\t\tpadding: 0.1em;\n\t}\n\n\tpre[class*=\"language-\"] {\n\t\toverflow: auto;\n\t\tposition: relative;\n\t\tmargin: 0.5em 0;\n\t\tpadding: 1.25em 1em;\n\t\t&.line-numbers {\n\t\t\tposition: relative;\n\t\t\tpadding-left: 3.8em;\n\t\t\tcounter-reset: linenumber;\n\t\t}\n\t}\n\n\t.language-css > code,\n\t.language-sass > code,\n\t.language-scss > code {\n\t\tcolor: $custom-green;\n\t}\n\n\t[class*=\"language-\"] .namespace {\n\t\topacity: 0.7;\n\t}\n\n\t.token {\n\t\t&.atrule {\n\t\t\tcolor: $custom-purple;\n\t\t}\n\t\n\t\t&.attr-name {\n\t\t\tcolor: $custom-green;\n\t\t}\n\t\n\t\t&.attr-value {\n\t\t\tcolor: $custom-green;\n\t\t}\n\t\n\t\t&.attribute {\n\t\t\tcolor: $custom-green;\n\t\t}\n\t\n\t\t&.boolean {\n\t\t\tcolor: $custom-purple;\n\t\t}\n\t\n\t\t&.builtin {\n\t\t\tcolor: $custom-green;\n\t\t}\n\t\n\t\t&.cdata {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.char {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.class {\n\t\t\tcolor: $custom-green;\n\t\t}\n\t\n\t\t&.class-name {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.comment {\n\t\t\tcolor: $custom-dark-gray;\n\t\t}\n\t\n\t\t&.constant {\n\t\t\tcolor: $custom-purple;\n\t\t}\n\t\n\t\t&.deleted {\n\t\t\tcolor: $custom-red;\n\t\t}\n\t\n\t\t&.doctype {\n\t\t\tcolor: $custom-dark-gray;\n\t\t}\n\t\n\t\t&.entity {\n\t\t\tcolor: $custom-red;\n\t\t}\n\t\n\t\t&.function {\n\t\t\tcolor: $custom-purple;\n\t\t}\n\t\n\t\t&.hexcode {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.id {\n\t\t\tcolor: $custom-purple;\n\t\t\tfont-weight: bold;\n\t\t}\n\t\n\t\t&.important {\n\t\t\tcolor: $custom-purple;\n\t\t\tfont-weight: bold;\n\t\t}\n\t\n\t\t&.inserted {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.keyword {\n\t\t\tcolor: $custom-purple;\n\t\t}\n\t\n\t\t&.number {\n\t\t\tcolor: $custom-green;\n\t\t}\n\t\n\t\t&.operator {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.prolog {\n\t\t\tcolor: $custom-dark-gray;\n\t\t}\n\t\n\t\t&.property {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.pseudo-class {\n\t\t\tcolor: $custom-green;\n\t\t}\n\t\n\t\t&.pseudo-element {\n\t\t\tcolor: $custom-green;\n\t\t}\n\t\n\t\t&.punctuation {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.regex {\n\t\t\tcolor: $custom-blue;\n\t\t}\n\t\n\t\t&.selector {\n\t\t\tcolor: $custom-red;\n\t\t}\n\t\n\t\t&.string {\n\t\t\tcolor: $custom-green;\n\t\t}\n\t\n\t\t&.symbol {\n\t\t\tcolor: $custom-purple;\n\t\t}\n\t\n\t\t&.tag {\n\t\t\tcolor: $custom-red;\n\t\t}\n\t\n\t\t&.unit {\n\t\t\tcolor: $custom-green;\n\t\t}\n\t\n\t\t&.url {\n\t\t\tcolor: $custom-red;\n\t\t}\n\t\n\t\t&.variable {\n\t\t\tcolor: $custom-red;\n\t\t}\n\t}\n}","pre[class*=\"language-\"].line-numbers {\n\tposition: relative;\n\tpadding-left: 3.8em;\n\tcounter-reset: linenumber;\n}\n\npre[class*=\"language-\"].line-numbers > code {\n\tposition: relative;\n\twhite-space: inherit;\n}\n\n.line-numbers .line-numbers-rows {\n\tposition: absolute;\n\tpointer-events: none;\n\ttop: 0;\n\tfont-size: 100%;\n\tleft: -3.8em;\n\twidth: 3em; /* works for line-numbers below 1000 lines */\n\tletter-spacing: -1px;\n\tborder-right: 1px solid #999;\n\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\n}\n\n\t.line-numbers-rows > span {\n\t\tdisplay: block;\n\t\tcounter-increment: linenumber;\n\t}\n\n\t\t.line-numbers-rows > span:before {\n\t\t\tcontent: counter(linenumber);\n\t\t\tcolor: #999;\n\t\t\tdisplay: block;\n\t\t\tpadding-right: 0.8em;\n\t\t\ttext-align: right;\n\t\t}\n","@import \"../../pfe-sass/pfe-sass\";\n\n@import \"pfe-codeblock-material-light\";\n@import \"pfe-codeblock-material-dark\";\n\n@import \"prismjs/plugins/line-numbers/prism-line-numbers\";\n\n:host {\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n\n"],"sourceRoot":"../src"} \ No newline at end of file diff --git a/elements/pfe-codeblock/dist/pfe-codeblock.js b/elements/pfe-codeblock/dist/pfe-codeblock.js new file mode 100644 index 0000000000..fadf9c6dbc --- /dev/null +++ b/elements/pfe-codeblock/dist/pfe-codeblock.js @@ -0,0 +1,2078 @@ +import PFElement from '../../pfelement/dist/pfelement.js'; + +// Polyfills +// @POLYFILL Array.includes +// https://tc39.github.io/ecma262/#sec-array.prototype.includes +if (!Array.prototype.includes) { + Object.defineProperty(Array.prototype, "includes", { + value: function (valueToFind, fromIndex) { + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + // 1. Let O be ? ToObject(this value). + var o = Object(this); + + // 2. Let len be ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // 3. If len is 0, return false. + if (len === 0) { + return false; + } + + // 4. Let n be ? ToInteger(fromIndex). + // (If fromIndex is undefined, this step produces the value 0.) + var n = fromIndex | 0; + + // 5. If n ≥ 0, then + // a. Let k be n. + // 6. Else n < 0, + // a. Let k be len + n. + // b. If k < 0, let k be 0. + var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); + + function sameValueZero(x, y) { + return x === y || (typeof x === "number" && typeof y === "number" && isNaN(x) && isNaN(y)); + } + + // 7. Repeat, while k < len + while (k < len) { + // a. Let elementK be the result of ? Get(O, ! ToString(k)). + // b. If SameValueZero(valueToFind, elementK) is true, return true. + if (sameValueZero(o[k], valueToFind)) { + return true; + } + // c. Increase k by 1. + k++; + } + + // 8. Return false + return false; + }, + }); +} +// End Polyfills + +var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; + +function createCommonjsModule(fn, module) { + return module = { exports: {} }, fn(module, module.exports), module.exports; +} + +var prism = createCommonjsModule(function (module) { +/* ********************************************** + Begin prism-core.js +********************************************** */ + +/// + +var _self = (typeof window !== 'undefined') + ? window // if in browser + : ( + (typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope) + ? self // if in worker + : {} // if in node js + ); + +/** + * Prism: Lightweight, robust, elegant syntax highlighting + * + * @license MIT + * @author Lea Verou + * @namespace + * @public + */ +var Prism = (function (_self){ + +// Private helper vars +var lang = /\blang(?:uage)?-([\w-]+)\b/i; +var uniqueId = 0; + + +var _ = { + /** + * By default, Prism will attempt to highlight all code elements (by calling {@link Prism.highlightAll}) on the + * current page after the page finished loading. This might be a problem if e.g. you wanted to asynchronously load + * additional languages or plugins yourself. + * + * By setting this value to `true`, Prism will not automatically highlight all code elements on the page. + * + * You obviously have to change this value before the automatic highlighting started. To do this, you can add an + * empty Prism object into the global scope before loading the Prism script like this: + * + * ```js + * window.Prism = window.Prism || {}; + * Prism.manual = true; + * // add a new