From a045bd1e83383adc24eb3fc6d100d02482380f85 Mon Sep 17 00:00:00 2001 From: Michael Clayton Date: Tue, 23 Apr 2019 09:59:19 -0400 Subject: [PATCH] v1.0.0-prerelease.13 --- elements/pfe-accordion/package.json | 8 +- .../pfe-accordion/pfe-accordion-header.css | 175 ++ .../pfe-accordion-header.css.map | 1 + .../pfe-accordion-header.css.min.map | 0 .../pfe-accordion-header.min.css | 1 + .../pfe-accordion/pfe-accordion-panel.css | 90 + .../pfe-accordion/pfe-accordion-panel.css.map | 1 + .../pfe-accordion-panel.css.min.map | 0 .../pfe-accordion/pfe-accordion-panel.min.css | 1 + elements/pfe-accordion/pfe-accordion.css | 48 + elements/pfe-accordion/pfe-accordion.css.map | 1 + .../pfe-accordion/pfe-accordion.css.min.map | 0 elements/pfe-accordion/pfe-accordion.js | 560 ++++++ elements/pfe-accordion/pfe-accordion.js.map | 1 + elements/pfe-accordion/pfe-accordion.min.css | 1 + elements/pfe-accordion/pfe-accordion.min.js | 26 + .../pfe-accordion/pfe-accordion.min.js.map | 1 + elements/pfe-accordion/pfe-accordion.umd.js | 721 +++++++ .../pfe-accordion/pfe-accordion.umd.js.map | 1 + .../pfe-accordion/pfe-accordion.umd.min.js | 2 + .../pfe-accordion.umd.min.js.map | 1 + elements/pfe-autocomplete/package.json | 8 +- .../pfe-autocomplete/pfe-autocomplete.css | 172 ++ .../pfe-autocomplete/pfe-autocomplete.css.map | 1 + .../pfe-autocomplete.css.min.map | 0 elements/pfe-autocomplete/pfe-autocomplete.js | 592 ++++++ .../pfe-autocomplete/pfe-autocomplete.js.map | 1 + .../pfe-autocomplete/pfe-autocomplete.min.css | 1 + .../pfe-autocomplete/pfe-autocomplete.min.js | 25 + .../pfe-autocomplete.min.js.map | 1 + .../pfe-autocomplete/pfe-autocomplete.umd.js | 638 ++++++ .../pfe-autocomplete.umd.js.map | 1 + .../pfe-autocomplete.umd.min.js | 2 + .../pfe-autocomplete.umd.min.js.map | 1 + .../pfe-autocomplete/pfe-search-droplist.css | 84 + .../pfe-search-droplist.css.map | 1 + .../pfe-search-droplist.css.min.map | 0 .../pfe-search-droplist.min.css | 1 + elements/pfe-avatar/djb-hash.js | 20 + elements/pfe-avatar/hslrgb.js | 107 + elements/pfe-avatar/package.json | 8 +- elements/pfe-avatar/pfe-avatar.css | 80 + elements/pfe-avatar/pfe-avatar.css.map | 1 + elements/pfe-avatar/pfe-avatar.css.min.map | 0 elements/pfe-avatar/pfe-avatar.js | 474 +++++ elements/pfe-avatar/pfe-avatar.js.map | 1 + elements/pfe-avatar/pfe-avatar.min.css | 1 + elements/pfe-avatar/pfe-avatar.min.js | 26 + elements/pfe-avatar/pfe-avatar.min.js.map | 1 + elements/pfe-avatar/pfe-avatar.umd.js | 604 ++++++ elements/pfe-avatar/pfe-avatar.umd.js.map | 1 + elements/pfe-avatar/pfe-avatar.umd.min.js | 2 + elements/pfe-avatar/pfe-avatar.umd.min.js.map | 1 + elements/pfe-band/package.json | 8 +- elements/pfe-band/pfe-band.css | 422 ++++ elements/pfe-band/pfe-band.css.map | 1 + elements/pfe-band/pfe-band.css.min.map | 0 elements/pfe-band/pfe-band.js | 243 +++ elements/pfe-band/pfe-band.js.map | 1 + elements/pfe-band/pfe-band.min.css | 1 + elements/pfe-band/pfe-band.min.js | 26 + elements/pfe-band/pfe-band.min.js.map | 1 + elements/pfe-band/pfe-band.umd.js | 354 ++++ elements/pfe-band/pfe-band.umd.js.map | 1 + elements/pfe-band/pfe-band.umd.min.js | 2 + elements/pfe-band/pfe-band.umd.min.js.map | 1 + elements/pfe-card/package.json | 8 +- elements/pfe-card/pfe-card.css | 155 ++ elements/pfe-card/pfe-card.css.map | 1 + elements/pfe-card/pfe-card.css.min.map | 0 elements/pfe-card/pfe-card.js | 180 ++ elements/pfe-card/pfe-card.js.map | 1 + elements/pfe-card/pfe-card.min.css | 1 + elements/pfe-card/pfe-card.min.js | 26 + elements/pfe-card/pfe-card.min.js.map | 1 + elements/pfe-card/pfe-card.umd.js | 287 +++ elements/pfe-card/pfe-card.umd.js.map | 1 + elements/pfe-card/pfe-card.umd.min.js | 2 + elements/pfe-card/pfe-card.umd.min.js.map | 1 + elements/pfe-content-set/package.json | 10 +- elements/pfe-content-set/pfe-content-set.css | 9 + .../pfe-content-set/pfe-content-set.css.map | 1 + .../pfe-content-set.css.min.map | 0 elements/pfe-content-set/pfe-content-set.js | 190 ++ .../pfe-content-set/pfe-content-set.js.map | 1 + .../pfe-content-set/pfe-content-set.min.css | 1 + .../pfe-content-set/pfe-content-set.min.js | 25 + .../pfe-content-set.min.js.map | 1 + .../pfe-content-set/pfe-content-set.umd.js | 295 +++ .../pfe-content-set.umd.js.map | 1 + .../pfe-content-set.umd.min.js | 2 + .../pfe-content-set.umd.min.js.map | 1 + elements/pfe-cta/package.json | 8 +- elements/pfe-cta/pfe-cta.css | 191 ++ elements/pfe-cta/pfe-cta.css.map | 1 + elements/pfe-cta/pfe-cta.css.min.map | 0 elements/pfe-cta/pfe-cta.js | 72 + elements/pfe-cta/pfe-cta.js.map | 1 + elements/pfe-cta/pfe-cta.min.css | 1 + elements/pfe-cta/pfe-cta.min.js | 25 + elements/pfe-cta/pfe-cta.min.js.map | 1 + elements/pfe-cta/pfe-cta.umd.js | 162 ++ elements/pfe-cta/pfe-cta.umd.js.map | 1 + elements/pfe-cta/pfe-cta.umd.min.js | 2 + elements/pfe-cta/pfe-cta.umd.min.js.map | 1 + elements/pfe-datetime/package.json | 6 +- elements/pfe-datetime/pfe-datetime.css | 5 + elements/pfe-datetime/pfe-datetime.css.map | 1 + .../pfe-datetime/pfe-datetime.css.min.map | 0 elements/pfe-datetime/pfe-datetime.js | 212 ++ elements/pfe-datetime/pfe-datetime.js.map | 1 + elements/pfe-datetime/pfe-datetime.min.css | 1 + elements/pfe-datetime/pfe-datetime.min.js | 25 + elements/pfe-datetime/pfe-datetime.min.js.map | 1 + elements/pfe-datetime/pfe-datetime.umd.js | 285 +++ elements/pfe-datetime/pfe-datetime.umd.js.map | 1 + elements/pfe-datetime/pfe-datetime.umd.min.js | 2 + .../pfe-datetime/pfe-datetime.umd.min.js.map | 1 + elements/pfe-health-index/package.json | 8 +- .../pfe-health-index/pfe-health-index.css | 86 + .../pfe-health-index/pfe-health-index.css.map | 1 + .../pfe-health-index.css.min.map | 0 elements/pfe-health-index/pfe-health-index.js | 91 + .../pfe-health-index/pfe-health-index.js.map | 1 + .../pfe-health-index/pfe-health-index.min.css | 1 + .../pfe-health-index/pfe-health-index.min.js | 25 + .../pfe-health-index.min.js.map | 1 + .../pfe-health-index/pfe-health-index.umd.js | 156 ++ .../pfe-health-index.umd.js.map | 1 + .../pfe-health-index.umd.min.js | 2 + .../pfe-health-index.umd.min.js.map | 1 + elements/pfe-icon-panel/package.json | 8 +- elements/pfe-icon-panel/pfe-icon-panel.css | 85 + .../pfe-icon-panel/pfe-icon-panel.css.map | 1 + .../pfe-icon-panel/pfe-icon-panel.css.min.map | 0 elements/pfe-icon-panel/pfe-icon-panel.js | 67 + elements/pfe-icon-panel/pfe-icon-panel.js.map | 1 + .../pfe-icon-panel/pfe-icon-panel.min.css | 1 + elements/pfe-icon-panel/pfe-icon-panel.min.js | 25 + .../pfe-icon-panel/pfe-icon-panel.min.js.map | 1 + elements/pfe-icon-panel/pfe-icon-panel.umd.js | 129 ++ .../pfe-icon-panel/pfe-icon-panel.umd.js.map | 1 + .../pfe-icon-panel/pfe-icon-panel.umd.min.js | 2 + .../pfe-icon-panel.umd.min.js.map | 1 + elements/pfe-icon/package.json | 8 +- elements/pfe-icon/pfe-icon.css | 182 ++ elements/pfe-icon/pfe-icon.css.map | 1 + elements/pfe-icon/pfe-icon.css.min.map | 0 elements/pfe-icon/pfe-icon.js | 89 + elements/pfe-icon/pfe-icon.js.map | 1 + elements/pfe-icon/pfe-icon.min.css | 1 + elements/pfe-icon/pfe-icon.min.js | 25 + elements/pfe-icon/pfe-icon.min.js.map | 1 + elements/pfe-icon/pfe-icon.umd.js | 152 ++ elements/pfe-icon/pfe-icon.umd.js.map | 1 + elements/pfe-icon/pfe-icon.umd.min.js | 2 + elements/pfe-icon/pfe-icon.umd.min.js.map | 1 + elements/pfe-layouts/package.json | 6 +- elements/pfe-layouts/pfe-base.css | 156 ++ elements/pfe-layouts/pfe-base.css.map | 1 + elements/pfe-layouts/pfe-base.min.css | 1 + elements/pfe-layouts/pfe-layouts.css | 1719 +++++++++++++++++ elements/pfe-layouts/pfe-layouts.css.map | 1 + elements/pfe-layouts/pfe-layouts.min.css | 1 + elements/pfe-number/package.json | 6 +- elements/pfe-number/pfe-number.css | 6 + elements/pfe-number/pfe-number.css.map | 1 + elements/pfe-number/pfe-number.css.min.map | 0 elements/pfe-number/pfe-number.js | 1137 +++++++++++ elements/pfe-number/pfe-number.js.map | 1 + elements/pfe-number/pfe-number.min.css | 1 + elements/pfe-number/pfe-number.min.js | 32 + elements/pfe-number/pfe-number.min.js.map | 1 + elements/pfe-number/pfe-number.umd.js | 1219 ++++++++++++ elements/pfe-number/pfe-number.umd.js.map | 1 + elements/pfe-number/pfe-number.umd.min.js | 2 + elements/pfe-number/pfe-number.umd.min.js.map | 1 + elements/pfe-sass/package.json | 4 +- elements/pfe-tabs/package.json | 8 +- elements/pfe-tabs/pfe-tab-panel.css | 94 + elements/pfe-tabs/pfe-tab-panel.css.map | 1 + elements/pfe-tabs/pfe-tab-panel.css.min.map | 0 elements/pfe-tabs/pfe-tab-panel.min.css | 1 + elements/pfe-tabs/pfe-tab.css | 141 ++ elements/pfe-tabs/pfe-tab.css.map | 1 + elements/pfe-tabs/pfe-tab.css.min.map | 0 elements/pfe-tabs/pfe-tab.min.css | 1 + elements/pfe-tabs/pfe-tabs.css | 106 + elements/pfe-tabs/pfe-tabs.css.map | 1 + elements/pfe-tabs/pfe-tabs.css.min.map | 0 elements/pfe-tabs/pfe-tabs.js | 594 ++++++ elements/pfe-tabs/pfe-tabs.js.map | 1 + elements/pfe-tabs/pfe-tabs.min.css | 1 + elements/pfe-tabs/pfe-tabs.min.js | 26 + elements/pfe-tabs/pfe-tabs.min.js.map | 1 + elements/pfe-tabs/pfe-tabs.umd.js | 751 +++++++ elements/pfe-tabs/pfe-tabs.umd.js.map | 1 + elements/pfe-tabs/pfe-tabs.umd.min.js | 2 + elements/pfe-tabs/pfe-tabs.umd.min.js.map | 1 + elements/pfelement/package.json | 4 +- elements/pfelement/pfelement-noscript.css | 27 + elements/pfelement/pfelement-noscript.min.css | 1 + elements/pfelement/pfelement.css | 43 + elements/pfelement/pfelement.js | 298 +++ elements/pfelement/pfelement.js.map | 1 + elements/pfelement/pfelement.min.css | 1 + elements/pfelement/pfelement.min.js | 2 + elements/pfelement/pfelement.min.js.map | 1 + elements/pfelement/pfelement.umd.js | 441 +++++ elements/pfelement/pfelement.umd.js.map | 1 + elements/pfelement/pfelement.umd.min.js | 2 + elements/pfelement/pfelement.umd.min.js.map | 1 + elements/pfelement/reveal.js | 51 + elements/pfelement/reveal.umd.js | 51 + lerna.json | 2 +- package-lock.json | 168 +- 216 files changed, 15827 insertions(+), 222 deletions(-) create mode 100644 elements/pfe-accordion/pfe-accordion-header.css create mode 100644 elements/pfe-accordion/pfe-accordion-header.css.map create mode 100644 elements/pfe-accordion/pfe-accordion-header.css.min.map create mode 100644 elements/pfe-accordion/pfe-accordion-header.min.css create mode 100644 elements/pfe-accordion/pfe-accordion-panel.css create mode 100644 elements/pfe-accordion/pfe-accordion-panel.css.map create mode 100644 elements/pfe-accordion/pfe-accordion-panel.css.min.map create mode 100644 elements/pfe-accordion/pfe-accordion-panel.min.css create mode 100644 elements/pfe-accordion/pfe-accordion.css create mode 100644 elements/pfe-accordion/pfe-accordion.css.map create mode 100644 elements/pfe-accordion/pfe-accordion.css.min.map create mode 100644 elements/pfe-accordion/pfe-accordion.js create mode 100644 elements/pfe-accordion/pfe-accordion.js.map create mode 100644 elements/pfe-accordion/pfe-accordion.min.css create mode 100644 elements/pfe-accordion/pfe-accordion.min.js create mode 100644 elements/pfe-accordion/pfe-accordion.min.js.map create mode 100644 elements/pfe-accordion/pfe-accordion.umd.js create mode 100644 elements/pfe-accordion/pfe-accordion.umd.js.map create mode 100644 elements/pfe-accordion/pfe-accordion.umd.min.js create mode 100644 elements/pfe-accordion/pfe-accordion.umd.min.js.map create mode 100644 elements/pfe-autocomplete/pfe-autocomplete.css create mode 100644 elements/pfe-autocomplete/pfe-autocomplete.css.map create mode 100644 elements/pfe-autocomplete/pfe-autocomplete.css.min.map create mode 100644 elements/pfe-autocomplete/pfe-autocomplete.js create mode 100644 elements/pfe-autocomplete/pfe-autocomplete.js.map create mode 100644 elements/pfe-autocomplete/pfe-autocomplete.min.css create mode 100644 elements/pfe-autocomplete/pfe-autocomplete.min.js create mode 100644 elements/pfe-autocomplete/pfe-autocomplete.min.js.map create mode 100644 elements/pfe-autocomplete/pfe-autocomplete.umd.js create mode 100644 elements/pfe-autocomplete/pfe-autocomplete.umd.js.map create mode 100644 elements/pfe-autocomplete/pfe-autocomplete.umd.min.js create mode 100644 elements/pfe-autocomplete/pfe-autocomplete.umd.min.js.map create mode 100644 elements/pfe-autocomplete/pfe-search-droplist.css create mode 100644 elements/pfe-autocomplete/pfe-search-droplist.css.map create mode 100644 elements/pfe-autocomplete/pfe-search-droplist.css.min.map create mode 100644 elements/pfe-autocomplete/pfe-search-droplist.min.css create mode 100644 elements/pfe-avatar/djb-hash.js create mode 100644 elements/pfe-avatar/hslrgb.js create mode 100644 elements/pfe-avatar/pfe-avatar.css create mode 100644 elements/pfe-avatar/pfe-avatar.css.map create mode 100644 elements/pfe-avatar/pfe-avatar.css.min.map create mode 100644 elements/pfe-avatar/pfe-avatar.js create mode 100644 elements/pfe-avatar/pfe-avatar.js.map create mode 100644 elements/pfe-avatar/pfe-avatar.min.css create mode 100644 elements/pfe-avatar/pfe-avatar.min.js create mode 100644 elements/pfe-avatar/pfe-avatar.min.js.map create mode 100644 elements/pfe-avatar/pfe-avatar.umd.js create mode 100644 elements/pfe-avatar/pfe-avatar.umd.js.map create mode 100644 elements/pfe-avatar/pfe-avatar.umd.min.js create mode 100644 elements/pfe-avatar/pfe-avatar.umd.min.js.map create mode 100644 elements/pfe-band/pfe-band.css create mode 100644 elements/pfe-band/pfe-band.css.map create mode 100644 elements/pfe-band/pfe-band.css.min.map create mode 100644 elements/pfe-band/pfe-band.js create mode 100644 elements/pfe-band/pfe-band.js.map create mode 100644 elements/pfe-band/pfe-band.min.css create mode 100644 elements/pfe-band/pfe-band.min.js create mode 100644 elements/pfe-band/pfe-band.min.js.map create mode 100644 elements/pfe-band/pfe-band.umd.js create mode 100644 elements/pfe-band/pfe-band.umd.js.map create mode 100644 elements/pfe-band/pfe-band.umd.min.js create mode 100644 elements/pfe-band/pfe-band.umd.min.js.map create mode 100644 elements/pfe-card/pfe-card.css create mode 100644 elements/pfe-card/pfe-card.css.map create mode 100644 elements/pfe-card/pfe-card.css.min.map create mode 100644 elements/pfe-card/pfe-card.js create mode 100644 elements/pfe-card/pfe-card.js.map create mode 100644 elements/pfe-card/pfe-card.min.css create mode 100644 elements/pfe-card/pfe-card.min.js create mode 100644 elements/pfe-card/pfe-card.min.js.map create mode 100644 elements/pfe-card/pfe-card.umd.js create mode 100644 elements/pfe-card/pfe-card.umd.js.map create mode 100644 elements/pfe-card/pfe-card.umd.min.js create mode 100644 elements/pfe-card/pfe-card.umd.min.js.map create mode 100644 elements/pfe-content-set/pfe-content-set.css create mode 100644 elements/pfe-content-set/pfe-content-set.css.map create mode 100644 elements/pfe-content-set/pfe-content-set.css.min.map create mode 100644 elements/pfe-content-set/pfe-content-set.js create mode 100644 elements/pfe-content-set/pfe-content-set.js.map create mode 100644 elements/pfe-content-set/pfe-content-set.min.css create mode 100644 elements/pfe-content-set/pfe-content-set.min.js create mode 100644 elements/pfe-content-set/pfe-content-set.min.js.map create mode 100644 elements/pfe-content-set/pfe-content-set.umd.js create mode 100644 elements/pfe-content-set/pfe-content-set.umd.js.map create mode 100644 elements/pfe-content-set/pfe-content-set.umd.min.js create mode 100644 elements/pfe-content-set/pfe-content-set.umd.min.js.map create mode 100644 elements/pfe-cta/pfe-cta.css create mode 100644 elements/pfe-cta/pfe-cta.css.map create mode 100644 elements/pfe-cta/pfe-cta.css.min.map create mode 100644 elements/pfe-cta/pfe-cta.js create mode 100644 elements/pfe-cta/pfe-cta.js.map create mode 100644 elements/pfe-cta/pfe-cta.min.css create mode 100644 elements/pfe-cta/pfe-cta.min.js create mode 100644 elements/pfe-cta/pfe-cta.min.js.map create mode 100644 elements/pfe-cta/pfe-cta.umd.js create mode 100644 elements/pfe-cta/pfe-cta.umd.js.map create mode 100644 elements/pfe-cta/pfe-cta.umd.min.js create mode 100644 elements/pfe-cta/pfe-cta.umd.min.js.map create mode 100644 elements/pfe-datetime/pfe-datetime.css create mode 100644 elements/pfe-datetime/pfe-datetime.css.map create mode 100644 elements/pfe-datetime/pfe-datetime.css.min.map create mode 100644 elements/pfe-datetime/pfe-datetime.js create mode 100644 elements/pfe-datetime/pfe-datetime.js.map create mode 100644 elements/pfe-datetime/pfe-datetime.min.css create mode 100644 elements/pfe-datetime/pfe-datetime.min.js create mode 100644 elements/pfe-datetime/pfe-datetime.min.js.map create mode 100644 elements/pfe-datetime/pfe-datetime.umd.js create mode 100644 elements/pfe-datetime/pfe-datetime.umd.js.map create mode 100644 elements/pfe-datetime/pfe-datetime.umd.min.js create mode 100644 elements/pfe-datetime/pfe-datetime.umd.min.js.map create mode 100644 elements/pfe-health-index/pfe-health-index.css create mode 100644 elements/pfe-health-index/pfe-health-index.css.map create mode 100644 elements/pfe-health-index/pfe-health-index.css.min.map create mode 100644 elements/pfe-health-index/pfe-health-index.js create mode 100644 elements/pfe-health-index/pfe-health-index.js.map create mode 100644 elements/pfe-health-index/pfe-health-index.min.css create mode 100644 elements/pfe-health-index/pfe-health-index.min.js create mode 100644 elements/pfe-health-index/pfe-health-index.min.js.map create mode 100644 elements/pfe-health-index/pfe-health-index.umd.js create mode 100644 elements/pfe-health-index/pfe-health-index.umd.js.map create mode 100644 elements/pfe-health-index/pfe-health-index.umd.min.js create mode 100644 elements/pfe-health-index/pfe-health-index.umd.min.js.map create mode 100644 elements/pfe-icon-panel/pfe-icon-panel.css create mode 100644 elements/pfe-icon-panel/pfe-icon-panel.css.map create mode 100644 elements/pfe-icon-panel/pfe-icon-panel.css.min.map create mode 100644 elements/pfe-icon-panel/pfe-icon-panel.js create mode 100644 elements/pfe-icon-panel/pfe-icon-panel.js.map create mode 100644 elements/pfe-icon-panel/pfe-icon-panel.min.css create mode 100644 elements/pfe-icon-panel/pfe-icon-panel.min.js create mode 100644 elements/pfe-icon-panel/pfe-icon-panel.min.js.map create mode 100644 elements/pfe-icon-panel/pfe-icon-panel.umd.js create mode 100644 elements/pfe-icon-panel/pfe-icon-panel.umd.js.map create mode 100644 elements/pfe-icon-panel/pfe-icon-panel.umd.min.js create mode 100644 elements/pfe-icon-panel/pfe-icon-panel.umd.min.js.map create mode 100644 elements/pfe-icon/pfe-icon.css create mode 100644 elements/pfe-icon/pfe-icon.css.map create mode 100644 elements/pfe-icon/pfe-icon.css.min.map create mode 100644 elements/pfe-icon/pfe-icon.js create mode 100644 elements/pfe-icon/pfe-icon.js.map create mode 100644 elements/pfe-icon/pfe-icon.min.css create mode 100644 elements/pfe-icon/pfe-icon.min.js create mode 100644 elements/pfe-icon/pfe-icon.min.js.map create mode 100644 elements/pfe-icon/pfe-icon.umd.js create mode 100644 elements/pfe-icon/pfe-icon.umd.js.map create mode 100644 elements/pfe-icon/pfe-icon.umd.min.js create mode 100644 elements/pfe-icon/pfe-icon.umd.min.js.map create mode 100644 elements/pfe-layouts/pfe-base.css create mode 100644 elements/pfe-layouts/pfe-base.css.map create mode 100644 elements/pfe-layouts/pfe-base.min.css create mode 100644 elements/pfe-layouts/pfe-layouts.css create mode 100644 elements/pfe-layouts/pfe-layouts.css.map create mode 100644 elements/pfe-layouts/pfe-layouts.min.css create mode 100644 elements/pfe-number/pfe-number.css create mode 100644 elements/pfe-number/pfe-number.css.map create mode 100644 elements/pfe-number/pfe-number.css.min.map create mode 100644 elements/pfe-number/pfe-number.js create mode 100644 elements/pfe-number/pfe-number.js.map create mode 100644 elements/pfe-number/pfe-number.min.css create mode 100644 elements/pfe-number/pfe-number.min.js create mode 100644 elements/pfe-number/pfe-number.min.js.map create mode 100644 elements/pfe-number/pfe-number.umd.js create mode 100644 elements/pfe-number/pfe-number.umd.js.map create mode 100644 elements/pfe-number/pfe-number.umd.min.js create mode 100644 elements/pfe-number/pfe-number.umd.min.js.map create mode 100644 elements/pfe-tabs/pfe-tab-panel.css create mode 100644 elements/pfe-tabs/pfe-tab-panel.css.map create mode 100644 elements/pfe-tabs/pfe-tab-panel.css.min.map create mode 100644 elements/pfe-tabs/pfe-tab-panel.min.css create mode 100644 elements/pfe-tabs/pfe-tab.css create mode 100644 elements/pfe-tabs/pfe-tab.css.map create mode 100644 elements/pfe-tabs/pfe-tab.css.min.map create mode 100644 elements/pfe-tabs/pfe-tab.min.css create mode 100644 elements/pfe-tabs/pfe-tabs.css create mode 100644 elements/pfe-tabs/pfe-tabs.css.map create mode 100644 elements/pfe-tabs/pfe-tabs.css.min.map create mode 100644 elements/pfe-tabs/pfe-tabs.js create mode 100644 elements/pfe-tabs/pfe-tabs.js.map create mode 100644 elements/pfe-tabs/pfe-tabs.min.css create mode 100644 elements/pfe-tabs/pfe-tabs.min.js create mode 100644 elements/pfe-tabs/pfe-tabs.min.js.map create mode 100644 elements/pfe-tabs/pfe-tabs.umd.js create mode 100644 elements/pfe-tabs/pfe-tabs.umd.js.map create mode 100644 elements/pfe-tabs/pfe-tabs.umd.min.js create mode 100644 elements/pfe-tabs/pfe-tabs.umd.min.js.map create mode 100644 elements/pfelement/pfelement-noscript.css create mode 100644 elements/pfelement/pfelement-noscript.min.css create mode 100644 elements/pfelement/pfelement.css create mode 100644 elements/pfelement/pfelement.js create mode 100644 elements/pfelement/pfelement.js.map create mode 100644 elements/pfelement/pfelement.min.css create mode 100644 elements/pfelement/pfelement.min.js create mode 100644 elements/pfelement/pfelement.min.js.map create mode 100644 elements/pfelement/pfelement.umd.js create mode 100644 elements/pfelement/pfelement.umd.js.map create mode 100644 elements/pfelement/pfelement.umd.min.js create mode 100644 elements/pfelement/pfelement.umd.min.js.map create mode 100644 elements/pfelement/reveal.js create mode 100644 elements/pfelement/reveal.umd.js diff --git a/elements/pfe-accordion/package.json b/elements/pfe-accordion/package.json index e8db9bb137..7a4fcaa035 100644 --- a/elements/pfe-accordion/package.json +++ b/elements/pfe-accordion/package.json @@ -4,7 +4,7 @@ "className": "PfeAccordion", "elementName": "pfe-accordion" }, - "version": "1.0.0-prerelease.11", + "version": "1.0.0-prerelease.13", "publishConfig": { "access": "public" }, @@ -15,7 +15,7 @@ ], "repository": { "type": "git", - "url" : "github:patternfly/patternfly-elements", + "url": "github:patternfly/patternfly-elements", "directory": "elements/pfe-accordion" }, "main": "pfe-accordion.js", @@ -39,8 +39,8 @@ ], "license": "MIT", "dependencies": { - "@patternfly/pfe-sass": "^1.0.0-prerelease.11", - "@patternfly/pfelement": "^1.0.0-prerelease.11" + "@patternfly/pfe-sass": "^1.0.0-prerelease.13", + "@patternfly/pfelement": "^1.0.0-prerelease.13" }, "generator-pfelement-version": "0.5.5", "gitHead": "dfa74e0495c556ebdd1edb61c6d406621d1b6421" diff --git a/elements/pfe-accordion/pfe-accordion-header.css b/elements/pfe-accordion/pfe-accordion-header.css new file mode 100644 index 0000000000..9d0f7c74df --- /dev/null +++ b/elements/pfe-accordion/pfe-accordion-header.css @@ -0,0 +1,175 @@ +/* + * Copyright 2018 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. + */ +/* Palette of Border Colors */ +/* Palette of Feedback Colors */ +:host { + display: block; +} + +:host > * { + margin: 0; +} + +:host button { + --pfe-accordion--main: transparent; + --pfe-accordion--aux: var(--pfe-theme--color--surface--lightest--text, #333); + --pfe-accordion--BorderLeft: var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) transparent; + --pfe-accordion--BorderRight: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent; + --pfe-accordion--BorderBottom: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec); + --pfe-accordion--BorderLeftColor--focus: var(--pfe-theme--color--surface--lightest--link, #06c); + -webkit-appearance: button; + margin: 0; + width: 100%; + height: auto; + font-family: inherit; + font-weight: 700; + font-weight: var(--pfe-theme--font-weight--bold, 700); + text-align: left; + cursor: pointer; + z-index: 1; + position: relative; + font-size: calc(16px * 1.1); + font-size: calc(var(--pfe-theme--font-size, 16px) * 1.1); + line-height: 1.5; + line-height: var(--pfe-theme--line-height, 1.5); + color: var(--pfe-accordion--aux); + background-color: var(--pfe-accordion--main); + border-left: var(--pfe-accordion--BorderLeft); + border-right: var(--pfe-accordion--BorderRight); + border-bottom: var(--pfe-accordion--BorderBottom); + border-top: 0; + padding: 1rem 50px 1rem calc(1rem * 1.5); + padding: var(--pfe-theme--container-spacer, 1rem) 50px var(--pfe-theme--container-spacer, 1rem) calc(var(--pfe-theme--container-spacer, 1rem) * 1.5); +} + +:host button:hover { + outline: none; + border-left-color: var(--pfe-accordion--BorderLeftColor--focus); + z-index: 2; +} + +:host button:focus { + outline: none; + z-index: 2; + text-decoration: underline; + -webkit-text-decoration-color: #c6c6c6; + text-decoration-color: #c6c6c6; + -webkit-text-decoration-color: var(--pfe-theme--color--surface--border--darker, #c6c6c6); + text-decoration-color: var(--pfe-theme--color--surface--border--darker, #c6c6c6); +} + +:host button::-moz-focus-inner { + border: 0; +} + +:host button[aria-expanded="true"] { + --pfe-accordion--main: var(--pfe-theme--color--surface--lightest, #fff); + --pfe-accordion--aux: var(--pfe-theme--color--surface--lightest--text, #333); + --pfe-accordion--focus: var(--pfe-theme--color--surface--lightest--link, #06c); + --pfe-accordion--BorderLeft: var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--lightest--link, #06c); + --pfe-accordion--BorderRight: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec); + position: relative; + display: block; + border-bottom: 0; +} + +:host button[aria-expanded="true"]::after { + content: ""; + position: absolute; + top: calc((1rem * 0.75) + 0.55em); + top: calc((var(--pfe-theme--container-spacer, 1rem) * 0.75) + 0.55em); + display: block; + border-style: solid; + border-style: var(--pfe-theme--surface--border-style, solid); + height: 0.4em; + width: 0.4em; + text-align: center; + -webkit-transition: -webkit-transform 0.15s; + transition: -webkit-transform 0.15s; + transition: transform 0.15s; + transition: transform 0.15s, -webkit-transform 0.15s; + border-width: 0.1em 0.1em 0 0; + border-bottom: 0; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + right: calc(1rem * 1.5); + right: calc(var(--pfe-theme--container-spacer, 1rem) * 1.5); +} + +:host button[aria-expanded="false"]::after { + content: ""; + position: absolute; + top: calc((1rem * 0.75) + 0.55em); + top: calc((var(--pfe-theme--container-spacer, 1rem) * 0.75) + 0.55em); + display: block; + border-style: solid; + border-style: var(--pfe-theme--surface--border-style, solid); + height: 0.4em; + width: 0.4em; + text-align: center; + -webkit-transition: -webkit-transform 0.15s; + transition: -webkit-transform 0.15s; + transition: transform 0.15s; + transition: transform 0.15s, -webkit-transform 0.15s; + border-width: 0 0.1em 0.1em 0; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + right: calc(1rem * 1.5); + right: calc(var(--pfe-theme--container-spacer, 1rem) * 1.5); +} + +:host(:first-child) button { + border-top: 1px solid #ececec; + border-top: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec); +} + +:host(:last-of-type) button[aria-expanded="false"] { + border-bottom: 1px solid #ececec; + border-bottom: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec); +} + +:host(.animating) { + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946); + transition: -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946); + transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946); + transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946), -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946); + -webkit-transition: -webkit-transform 0.3s var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946)); + transition: -webkit-transform 0.3s var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946)); + transition: transform 0.3s var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946)); + transition: transform 0.3s var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946)), -webkit-transform 0.3s var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946)); +} + +:host([on="dark"]) button { + --pfe-accordion--main: transparent; + --pfe-accordion--aux: var(--pfe-theme--color--surface--darkest--text, #fff); + --pfe-accordion--BorderLeftColor--focus: var(--pfe-theme--color--surface--lightest, #fff); +} + +:host([on="dark"]) button[aria-expanded="true"] { + --pfe-accordion--main: var(--pfe-theme--color--surface--darker, #464646); + --pfe-accordion--aux: var(--pfe-theme--color--surface--darkest--text, #fff); + --pfe-accordion--BorderLeft: var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, ); + --pfe-accordion--BorderRight: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, ); + --pfe-accordion--BorderLeftColor--focus: var(--pfe-theme--color--surface--lightest, #fff); +} + +/*# sourceMappingURL=pfe-accordion-header.css.map */ diff --git a/elements/pfe-accordion/pfe-accordion-header.css.map b/elements/pfe-accordion/pfe-accordion-header.css.map new file mode 100644 index 0000000000..7a0c0440b8 --- /dev/null +++ b/elements/pfe-accordion/pfe-accordion-header.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","pfe-accordion-header.css","../../pfe-sass/variables/_colors.scss","pfe-accordion-header.scss","../../pfe-sass/mixins/_mixins.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;ECoBE;AC4GF,6BAAA;AAOA,+BAAA;AC/HA;EC0ME,cAAc;AHzLhB;;AEjBA;EC4MI,SAAS;AHvLb;;AErBA;ECqRI,0CAA2C;EAC3C,qFAAyC;EAEzC,wIAAuD;EACvD,qIAAyD;EACzD,sLAA2D;EAE3D,+FAA+E;EA3E/E,0BAA0B;EAC1B,SAAS;EACT,WAAW;EACX,YAAY;EACZ,oBAAoB;EACpB,gBAAa;EAAb,qDAAa;EACb,gBAAgB;EAChB,eAAe;EACf,UAAU;EACV,kBAAkB;EAElB,2BAA8C;EAA9C,wDAA8C;EAC9C,gBAAa;EAAb,+CAAa;EAEb,gCAAkB;EAClB,4CAAkB;EAClB,6CAAkB;EAClB,+CAAkB;EAClB,iDAAkB;EAClB,aAAa;EAsBT,wCAAgH;EAAhH,oJAAgH;AHzMxH;;AEjDA;ECuOQ,aAAa;EACb,+DAAmB;EACnB,UAAU;AHlLlB;;AEvDA;EC6OQ,aAAa;EACb,UAAU;EACV,0BAA0B;EAC1B,sCAAuB;UAAvB,8BAAuB;EAAvB,wFAAuB;UAAvB,gFAAuB;AHlL/B;;AE9DA;ECoPQ,SAAS;AHlLjB;;AElEA;EC0SI,oFAA2C;EAC3C,0FAAyC;EACzC,0FAA6C;EAC7C,yLAAuD;EACvD,2LAAyD;EArCzD,kBAAkB;EAClB,cAAc;EACd,gBAAgB;AH9LpB;;AE7EA;ECuTE,WAAW;EACX,kBAAkB;EAClB,iCAAuH;EAAvH,qEAAuH;EACvH,cAAc;EACd,mBAAc;EAAd,4DAAc;EACd,aAAQ;EACR,YAAQ;EACR,kBAAkB;EAClB,2CAA2B;EAA3B,mCAA2B;EAA3B,2BAA2B;EAA3B,oDAA2B;EAEzB,6BAA+E;EAC/E,gBAAgB;EAChB,iCAAyB;UAAzB,yBAAyB;EAKvB,uBAAO;EAAP,2DAAO;AH3Ob;;AE7FA;ECuTE,WAAW;EACX,kBAAkB;EAClB,iCAAuH;EAAvH,qEAAuH;EACvH,cAAc;EACd,mBAAc;EAAd,4DAAc;EACd,aAAQ;EACR,YAAQ;EACR,kBAAkB;EAClB,2CAA2B;EAA3B,mCAA2B;EAA3B,2BAA2B;EAA3B,oDAA2B;EAazB,6BAA+E;EAC/E,gCAAwB;UAAxB,wBAAwB;EAKtB,uBAAO;EAAP,2DAAO;AHtOb;;AEvFA;EC+OE,6BAAuH;EAAvH,mKAAuH;AHpJzH;;AEnFA;ECkOE,gCAA0H;EAA1H,sKAA0H;AH3I5H;;AEjFA;EACE,mFAAuD;EAAvD,2EAAuD;EAAvD,mEAAuD;EAAvD,oIAAuD;EAAvD,uHAAuD;EAAvD,+GAAuD;EAAvD,uGAAuD;EAAvD,4MAAuD;AFoFzD;;AE7EA;ECqOI,0CAA2C;EAC3C,oFAAyC;EACzC,yFAA+E;AHpJnF;;AEnFA;ECuPI,gFAA2C;EAC3C,oFAAyC;EACzC,gLAAuD;EACvD,6KAAyD;EAEzD,yFAA+E;AHjKnF","file":"pfe-accordion-header.css","sourcesContent":["/*\n * Copyright 2018 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// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n","/*\n * Copyright 2018 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/* Palette of Border Colors */\n/* Palette of Feedback Colors */\n:host {\n display: block;\n}\n\n:host > * {\n margin: 0;\n}\n\n:host button {\n --pfe-accordion--main: transparent;\n --pfe-accordion--aux: var(--pfe-theme--color--surface--lightest--text, #333);\n --pfe-accordion--BorderLeft: var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) transparent;\n --pfe-accordion--BorderRight: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;\n --pfe-accordion--BorderBottom: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);\n --pfe-accordion--BorderLeftColor--focus: var(--pfe-theme--color--surface--lightest--link, #06c);\n -webkit-appearance: button;\n margin: 0;\n width: 100%;\n height: auto;\n font-family: inherit;\n font-weight: var(--pfe-theme--font-weight--bold, 700);\n text-align: left;\n cursor: pointer;\n z-index: 1;\n position: relative;\n font-size: calc(var(--pfe-theme--font-size, 16px) * 1.1);\n line-height: var(--pfe-theme--line-height, 1.5);\n color: var(--pfe-accordion--aux);\n background-color: var(--pfe-accordion--main);\n border-left: var(--pfe-accordion--BorderLeft);\n border-right: var(--pfe-accordion--BorderRight);\n border-bottom: var(--pfe-accordion--BorderBottom);\n border-top: 0;\n padding: var(--pfe-theme--container-spacer, 1rem) 50px var(--pfe-theme--container-spacer, 1rem) calc(var(--pfe-theme--container-spacer, 1rem) * 1.5);\n}\n\n:host button:hover {\n outline: none;\n border-left-color: var(--pfe-accordion--BorderLeftColor--focus);\n z-index: 2;\n}\n\n:host button:focus {\n outline: none;\n z-index: 2;\n text-decoration: underline;\n text-decoration-color: var(--pfe-theme--color--surface--border--darker, #c6c6c6);\n}\n\n:host button::-moz-focus-inner {\n border: 0;\n}\n\n:host button[aria-expanded=\"true\"] {\n --pfe-accordion--main: var(--pfe-theme--color--surface--lightest, #fff);\n --pfe-accordion--aux: var(--pfe-theme--color--surface--lightest--text, #333);\n --pfe-accordion--focus: var(--pfe-theme--color--surface--lightest--link, #06c);\n --pfe-accordion--BorderLeft: var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--lightest--link, #06c);\n --pfe-accordion--BorderRight: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);\n position: relative;\n display: block;\n border-bottom: 0;\n}\n\n:host button[aria-expanded=\"true\"]::after {\n content: \"\";\n position: absolute;\n top: calc((var(--pfe-theme--container-spacer, 1rem) * 0.75) + 0.55em);\n display: block;\n border-style: var(--pfe-theme--surface--border-style, solid);\n height: 0.4em;\n width: 0.4em;\n text-align: center;\n transition: transform 0.15s;\n border-width: 0.1em 0.1em 0 0;\n border-bottom: 0;\n transform: rotate(-45deg);\n right: calc(var(--pfe-theme--container-spacer, 1rem) * 1.5);\n}\n\n:host button[aria-expanded=\"false\"]::after {\n content: \"\";\n position: absolute;\n top: calc((var(--pfe-theme--container-spacer, 1rem) * 0.75) + 0.55em);\n display: block;\n border-style: var(--pfe-theme--surface--border-style, solid);\n height: 0.4em;\n width: 0.4em;\n text-align: center;\n transition: transform 0.15s;\n border-width: 0 0.1em 0.1em 0;\n transform: rotate(45deg);\n right: calc(var(--pfe-theme--container-spacer, 1rem) * 1.5);\n}\n\n:host(:first-child) button {\n border-top: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);\n}\n\n:host(:last-of-type) button[aria-expanded=\"false\"] {\n border-bottom: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);\n}\n\n:host(.animating) {\n transition: transform 0.3s var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946));\n}\n\n:host([on=\"dark\"]) button {\n --pfe-accordion--main: transparent;\n --pfe-accordion--aux: var(--pfe-theme--color--surface--darkest--text, #fff);\n --pfe-accordion--BorderLeftColor--focus: var(--pfe-theme--color--surface--lightest, #fff);\n}\n\n:host([on=\"dark\"]) button[aria-expanded=\"true\"] {\n --pfe-accordion--main: var(--pfe-theme--color--surface--darker, #464646);\n --pfe-accordion--aux: var(--pfe-theme--color--surface--darkest--text, #fff);\n --pfe-accordion--BorderLeft: var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, );\n --pfe-accordion--BorderRight: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, );\n --pfe-accordion--BorderLeftColor--focus: var(--pfe-theme--color--surface--lightest, #fff);\n}\n","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text: $pfelements--gray-dark !default;\n$pfe-color--text--on-dark: $pfe-color--white !default;\n$pfe-color--text--on-saturated: $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link: #06c !default;\n$pfe-color--ui-link--visited: $pfelements--purple !default; // Was #7551a6\n$pfe-color--ui-link--hover: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-dark--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-saturated--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base: $pfelements--blue !default;\n$pfe-color--ui-base--hover: darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement: $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover: $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent: $pfelements--orange !default;\n$pfe-color--ui-accent--hover: darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text: $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover: $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest: $pfe-color--white !default;\n$pfe-color--surface--lightest--text: $pfe-color--text !default;\n$pfe-color--surface--lightest--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus: $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text: $pfe-color--text !default;\n$pfe-color--surface--lighter--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus: $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base: $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text: $pfe-color--text !default;\n$pfe-color--surface--base--link: #00538c !default; // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited: #7551a6 !default;\n$pfe-color--surface--base--link--hover: #00305b !default;\n$pfe-color--surface--base--link--focus: #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker: $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest: $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement: $pfelements--blue;\n$pfe-color--surface--complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent: $pfelements--orange;\n$pfe-color--surface--accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc\n$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7\n$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical: $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important: $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest: $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest: $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate: $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest: $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest: $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success: #2e7d32 !default;\n$pfe-color--feedback--success--lightest: $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest: #1b5e20 !default;\n\n$pfe-color--feedback--info: #0277bd !default;\n$pfe-color--feedback--info--lightest: $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest: #01579b !default;\n\n$pfe-color--feedback--default: $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest: $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest: $pfe-color--gray-800 !default;\n","@import \"../../pfe-sass/pfe-sass\";\n\n$LOCAL: accordion;\n\n/// ===========================================================================\n/// DEFAULT ACCORDION HEADING\n/// ===========================================================================\n\n:host {\n @include pfe-accordion-header;\n\n button {\n @include pfe-trigger-color($component-name: accordion);\n @include pfe-trigger-button;\n\n &[aria-expanded=\"true\"] {\n @include pfe-trigger-color-expanded($component-name: accordion);\n @include pfe-trigger-expanded;\n &::after {\n @include pfe-chevron-expanded;\n }\n }\n\n &[aria-expanded=\"false\"]::after {\n @include pfe-chevron-expanded($state: false);\n }\n }\n}\n\n:host(:first-child) {\n button {\n @include pfe-trigger-button-first($theme: light);\n } \n}\n\n\n// Add border bottom to the last button in an accordion set.\n:host(:last-of-type) {\n button[aria-expanded=\"false\"] {\n @include pfe-trigger-button-last;\n } \n}\n\n:host(.animating) {\n transition: transform 0.3s #{pfe-var(animation-timing)};\n}\n\n/// ===========================================================================\n/// CONTEXT STYLES, ON=DARK\n/// ===========================================================================\n\n:host([on=\"dark\"]) {\n button {\n @include pfe-trigger-color($theme: dark, $component-name: accordion);\n\n &[aria-expanded=\"true\"] {\n @include pfe-trigger-color-expanded($theme: dark, $component-name: accordion);\n }\n }\n}\n","// $boxSize = any box-sizing property, default is border-box\n@mixin pfe-box-sizing($boxSize: border-box) {\n *, *::before, *::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-reset-list() {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n@mixin pfe-reset-box() {\n margin: 0;\n padding: 0;\n}\n\n@mixin pfe-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/// ===========================================================================\n/// Theme Color Vars - use with on=\"dark\" to affect light DOM\n/// ===========================================================================\n\n@mixin pfe-theme($theme) {\n // GENERAL CONTEXT-BASED UPDATES, ON=\"DARK\"\n @if $theme == dark {\n --pfe-broadcasted--color--text: #{pfe-color(text--on-dark)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(ui-link--on-dark)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--on-dark--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--on-dark--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--on-dark--focus)};\n }\n @else if $theme == light {\n --pfe-broadcasted--color--text: #{pfe-color(text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(ui-link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--focus)};\n }\n // MORE SPECIFIC COLOR BASED UPDATES, COLOR=\"DARKER\"\n @else if $theme == darker {\n --pfe-broadcasted--color--text: #{pfe-color(surface--darker--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darker--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darker--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darker--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darker--link--focus)};\n }\n @else if $theme == darkest {\n --pfe-broadcasted--color--text: #{pfe-color(surface--darkest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darkest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darkest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darkest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darkest--link--focus)};\n }\n @else if $theme == accent {\n --pfe-broadcasted--color--text: #{pfe-color(surface--accent--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--accent--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--accent--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--accent--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--accent--link--focus)};\n }\n @else if $theme == complement {\n --pfe-broadcasted--color--text: #{pfe-color(surface--complement--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--complement--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--complement--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--complement--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--complement--link--focus)};\n }\n\n @else if $theme == lighter {\n --pfe-broadcasted--color--text: #{pfe-color(surface--lighter--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lighter--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lighter--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lighter--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lighter--link--focus)};\n }\n @else if $theme == lightest {\n --pfe-broadcasted--color--text: #{pfe-color(surface--lightest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lightest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lightest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lightest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lightest--link--focus)};\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// scss-lint:disable ImportantRule\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// scss-lint:enable ImportantRule\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 for building slot selectors\n@mixin pfe-slot($slot-name, $selector: \"\") {\n // This logic makes it much easier to style default slots in a loop\n // with named slots\n @if $slot-name != default {\n ::slotted([slot=\"#{$slot-name}\"]#{$selector}) {\n @content;\n }\n }\n @else {\n ::slotted(*) {\n @content;\n }\n }\n}\n\n/// ===========================================================================\n/// Accordion Specific SASS Vars\n/// ===========================================================================\n\n$pfe-expand_button--LineHeight: 1.5;\n$pfe-expand_button--padding: #{pfe-var(container-spacer)};\n$pfe-expand_button--padding--factor: .75;\n$pfe-expand_button--padding--wide: calc(#{$pfe-expand_button--padding} * 1.5);\n\n$pfe-expand_chevron--size: .4em;\n$pfe-expand_chevron--weight: .1em;\n$pfe-expand_chevron--padding: 3em;\n$pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe-expand_chevron--size / 2};\n\n@mixin pfe-accordion-header {\n display: block;\n > * {\n margin: 0;\n }\n}\n\n@mixin pfe-trigger-button($align: left) {\n -webkit-appearance: button;\n margin: 0;\n width: 100%;\n height: auto;\n font-family: inherit;\n font-weight: #{pfe-var(font-weight--bold)};\n text-align: left;\n cursor: pointer;\n z-index: 1;\n position: relative;\n\n font-size: calc(#{pfe-var(font-size)} * 1.1);\n line-height: #{pfe-var(line-height)};\n\n color: #{pfe-local(aux)};\n background-color: #{pfe-local(main)};\n border-left: #{pfe-local(BorderLeft)};\n border-right: #{pfe-local(BorderRight)};\n border-bottom: #{pfe-local(BorderBottom)};\n border-top: 0;\n\n &:hover {\n outline: none;\n border-left-color: #{pfe-local(BorderLeftColor--focus)};\n z-index: 2;\n }\n\n &:focus {\n outline: none;\n z-index: 2;\n text-decoration: underline;\n text-decoration-color: #{pfe-color(surface--border--darker)};\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n @if $align == right {\n padding: #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} 50px;\n } @else {\n padding: #{$pfe-expand_button--padding} 50px #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};\n }\n}\n\n@mixin pfe-trigger-button-last($theme: light) {\n border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n // @TODO Support differences based on theme\n}\n\n@mixin pfe-trigger-button-first($theme: light) {\n border-top: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n // @TODO Support differences based on theme\n}\n\n@mixin pfe-trigger-expanded {\n position: relative;\n display: block;\n border-bottom: 0;\n}\n\n@mixin pfe-trigger-color($component-name, $theme: light) {\n @if $theme == dark {\n --pfe-#{$component-name}--main: transparent;\n --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)};\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};\n }\n @else {\n --pfe-#{$component-name}--main: transparent;\n --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)};\n\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} transparent;\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n --pfe-#{$component-name}--BorderBottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest--link)};\n }\n}\n\n@mixin pfe-trigger-color-expanded($component-name, $theme: light) {\n @if $theme == dark {\n --pfe-#{$component-name}--main: #{pfe-color(surface--darker)};\n --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)};\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};\n\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};\n }\n @else {\n --pfe-#{$component-name}--main: #{pfe-color(surface--lightest)};\n --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)};\n --pfe-#{$component-name}--focus: #{pfe-color(surface--lightest--link)};\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--lightest--link)};\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n }\n}\n\n/// ===========================================================================\n/// Accordion chevrons\n/// ===========================================================================\n\n@mixin pfe-chevron-expanded($state: true, $position: after) {\n content: \"\";\n position: absolute;\n top: calc((#{pfe-var(container-spacer)} * #{$pfe-expand_button--padding--factor}) + #{$pfe-expand_chevron--placement} );\n display: block;\n border-style: #{pfe-var(surface--border-style)};\n height: #{$pfe-expand_chevron--size};\n width: #{$pfe-expand_chevron--size};\n text-align: center;\n transition: transform 0.15s;\n @if $state {\n border-width: #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0 0;\n border-bottom: 0;\n transform: rotate(-45deg);\n @if $position == before {\n left: #{$pfe-expand_button--padding--wide};\n }\n @else {\n right: #{$pfe-expand_button--padding--wide};\n }\n }\n @else {\n border-width: 0 #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0;\n transform: rotate(45deg);\n @if $position == before {\n left: #{$pfe-expand_button--padding--wide};\n }\n @else {\n right: #{$pfe-expand_button--padding--wide};\n }\n }\n}\n\n/// ===========================================================================\n/// Accordion panel\n/// ===========================================================================\n\n@mixin pfe-container {\n position: relative;\n display: block;\n width: 100%;\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@mixin pfe-accordion-panel {\n display: none;\n overflow: hidden;\n will-change: height;\n border-color: transparent;\n}\n\n@mixin pfe-accordion-panel-expanded {\n display: block;\n position: relative;\n}\n\n@mixin pfe-accordion-panel-expanded-style($theme: light) {\n border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n border-left: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} transparent;\n @if $theme == dark {\n box-shadow: none;\n background-color: #{pfe-color(surface--darker)};\n border-left-color: #{pfe-color(surface--darkest--text)};\n border-right-color: #{pfe-color(surface--darkest--text)};\n }\n @else {\n box-shadow: 0 5px #{pfe-var(surface--border-width--heavy)} rgba(140, 140, 140, 0.35);\n border-left-color: #{pfe-color(surface--lightest--link)};\n background-color: #{pfe-color(surface--lightest)};\n border-right-color: #{pfe-color(surface--border--lightest)};\n border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n }\n}\n\n@mixin pfe-accordion-panel-container-inset($align: left) {\n box-sizing: border-box;\n width: 100%;\n\n @if $align == left {\n padding: 0 #{$pfe-expand_chevron--padding} #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};\n }\n @else {\n padding: 0 #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} #{$pfe-expand_chevron--padding};\n }\n}\n"]} \ No newline at end of file diff --git a/elements/pfe-accordion/pfe-accordion-header.css.min.map b/elements/pfe-accordion/pfe-accordion-header.css.min.map new file mode 100644 index 0000000000..e69de29bb2 diff --git a/elements/pfe-accordion/pfe-accordion-header.min.css b/elements/pfe-accordion/pfe-accordion-header.min.css new file mode 100644 index 0000000000..4fb08bcd08 --- /dev/null +++ b/elements/pfe-accordion/pfe-accordion-header.min.css @@ -0,0 +1 @@ +:host{display:block}:host>*{margin:0}:host button{--pfe-accordion--main:transparent;--pfe-accordion--aux:var(--pfe-theme--color--surface--lightest--text, #333);--pfe-accordion--BorderLeft:var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) transparent;--pfe-accordion--BorderRight:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;--pfe-accordion--BorderBottom:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);--pfe-accordion--BorderLeftColor--focus:var(--pfe-theme--color--surface--lightest--link, #06c);-webkit-appearance:button;margin:0;width:100%;height:auto;font-family:inherit;font-weight:700;font-weight:var(--pfe-theme--font-weight--bold,700);text-align:left;cursor:pointer;z-index:1;position:relative;font-size:calc(16px * 1.1);font-size:calc(var(--pfe-theme--font-size,16px) * 1.1);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5);color:var(--pfe-accordion--aux);background-color:var(--pfe-accordion--main);border-left:var(--pfe-accordion--BorderLeft);border-right:var(--pfe-accordion--BorderRight);border-bottom:var(--pfe-accordion--BorderBottom);border-top:0;padding:1rem 50px 1rem calc(1rem * 1.5);padding:var(--pfe-theme--container-spacer,1rem) 50px var(--pfe-theme--container-spacer,1rem) calc(var(--pfe-theme--container-spacer,1rem) * 1.5)}:host button:hover{outline:0;border-left-color:var(--pfe-accordion--BorderLeftColor--focus);z-index:2}:host button:focus{outline:0;z-index:2;text-decoration:underline;-webkit-text-decoration-color:#c6c6c6;text-decoration-color:#c6c6c6;-webkit-text-decoration-color:var(--pfe-theme--color--surface--border--darker,#c6c6c6);text-decoration-color:var(--pfe-theme--color--surface--border--darker,#c6c6c6)}:host button::-moz-focus-inner{border:0}:host button[aria-expanded=true]{--pfe-accordion--main:var(--pfe-theme--color--surface--lightest, #fff);--pfe-accordion--aux:var(--pfe-theme--color--surface--lightest--text, #333);--pfe-accordion--focus:var(--pfe-theme--color--surface--lightest--link, #06c);--pfe-accordion--BorderLeft:var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--lightest--link, #06c);--pfe-accordion--BorderRight:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);position:relative;display:block;border-bottom:0}:host button[aria-expanded=true]::after{content:"";position:absolute;top:calc((1rem * .75) + .55em);top:calc((var(--pfe-theme--container-spacer,1rem) * .75) + .55em);display:block;border-style:solid;border-style:var(--pfe-theme--surface--border-style,solid);height:.4em;width:.4em;text-align:center;-webkit-transition:-webkit-transform .15s;transition:-webkit-transform .15s;transition:transform .15s;transition:transform .15s,-webkit-transform .15s;border-width:.1em .1em 0 0;border-bottom:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);right:calc(1rem * 1.5);right:calc(var(--pfe-theme--container-spacer,1rem) * 1.5)}:host button[aria-expanded=false]::after{content:"";position:absolute;top:calc((1rem * .75) + .55em);top:calc((var(--pfe-theme--container-spacer,1rem) * .75) + .55em);display:block;border-style:solid;border-style:var(--pfe-theme--surface--border-style,solid);height:.4em;width:.4em;text-align:center;-webkit-transition:-webkit-transform .15s;transition:-webkit-transform .15s;transition:transform .15s;transition:transform .15s,-webkit-transform .15s;border-width:0 .1em .1em 0;-webkit-transform:rotate(45deg);transform:rotate(45deg);right:calc(1rem * 1.5);right:calc(var(--pfe-theme--container-spacer,1rem) * 1.5)}:host(:first-child) button{border-top:1px solid #ececec;border-top:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) var(--pfe-theme--color--surface--border--lightest,#ececec)}:host(:last-of-type) button[aria-expanded=false]{border-bottom:1px solid #ececec;border-bottom:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) var(--pfe-theme--color--surface--border--lightest,#ececec)}:host(.animating){-webkit-transition:-webkit-transform .3s cubic-bezier(.465,.183,.153,.946);transition:-webkit-transform .3s cubic-bezier(.465,.183,.153,.946);transition:transform .3s cubic-bezier(.465,.183,.153,.946);transition:transform .3s cubic-bezier(.465,.183,.153,.946),-webkit-transform .3s cubic-bezier(.465,.183,.153,.946);-webkit-transition:-webkit-transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition:-webkit-transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition:transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition:transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946)),-webkit-transform .3s var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946))}:host([on=dark]) button{--pfe-accordion--main:transparent;--pfe-accordion--aux:var(--pfe-theme--color--surface--darkest--text, #fff);--pfe-accordion--BorderLeftColor--focus:var(--pfe-theme--color--surface--lightest, #fff)}:host([on=dark]) button[aria-expanded=true]{--pfe-accordion--main:var(--pfe-theme--color--surface--darker, #464646);--pfe-accordion--aux:var(--pfe-theme--color--surface--darkest--text, #fff);--pfe-accordion--BorderLeft:var(--pfe-theme--surface--border-width-heavy, ) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, );--pfe-accordion--BorderRight:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border-darkest, );--pfe-accordion--BorderLeftColor--focus:var(--pfe-theme--color--surface--lightest, #fff)} \ No newline at end of file diff --git a/elements/pfe-accordion/pfe-accordion-panel.css b/elements/pfe-accordion/pfe-accordion-panel.css new file mode 100644 index 0000000000..589f3ad7f5 --- /dev/null +++ b/elements/pfe-accordion/pfe-accordion-panel.css @@ -0,0 +1,90 @@ +/* + * Copyright 2018 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. + */ +/* Palette of Border Colors */ +/* Palette of Feedback Colors */ +:host { + display: none; + overflow: hidden; + will-change: height; + border-color: transparent; +} + +:host([expanded]) { + display: block; + position: relative; + border-right: 1px solid transparent; + border-right: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent; + border-left: 3px solid transparent; + border-left: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--surface--border-style, solid) transparent; + -webkit-box-shadow: 0 5px 3px rgba(140, 140, 140, 0.35); + box-shadow: 0 5px 3px rgba(140, 140, 140, 0.35); + -webkit-box-shadow: 0 5px var(--pfe-theme--surface--border-width--heavy, 3px) rgba(140, 140, 140, 0.35); + box-shadow: 0 5px var(--pfe-theme--surface--border-width--heavy, 3px) rgba(140, 140, 140, 0.35); + border-left-color: #06c; + border-left-color: var(--pfe-theme--color--surface--lightest--link, #06c); + background-color: #fff; + background-color: var(--pfe-theme--color--surface--lightest, #fff); + border-right-color: #ececec; + border-right-color: var(--pfe-theme--color--surface--border--lightest, #ececec); + border-bottom: 1px solid #ececec; + border-bottom: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec); +} + +:host([on="dark"][expanded]) { + --pfe-broadcasted--color--text: var(--pfe-theme--color--text--on-dark, #fff); + --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--ui-link--on-dark, #99ccff); + --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9); + --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff); + --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff); + border-right: 1px solid transparent; + border-right: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent; + border-left: 3px solid transparent; + border-left: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--surface--border-style, solid) transparent; + -webkit-box-shadow: none; + box-shadow: none; + background-color: #464646; + background-color: var(--pfe-theme--color--surface--darker, #464646); + border-left-color: #fff; + border-left-color: var(--pfe-theme--color--surface--darkest--text, #fff); + border-right-color: #fff; + border-right-color: var(--pfe-theme--color--surface--darkest--text, #fff); +} + +:host(.animating) { + display: block; + -webkit-transition: height 0.3s ease-in-out; + transition: height 0.3s ease-in-out; +} + +.container { + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + padding: 0 3em 1rem calc(1rem * 1.5); + padding: 0 3em var(--pfe-theme--container-spacer, 1rem) calc(var(--pfe-theme--container-spacer, 1rem) * 1.5); +} + +:host(:last-of-type[expanded]) { + margin-bottom: 0; +} + +/*# sourceMappingURL=pfe-accordion-panel.css.map */ diff --git a/elements/pfe-accordion/pfe-accordion-panel.css.map b/elements/pfe-accordion/pfe-accordion-panel.css.map new file mode 100644 index 0000000000..6feda457dd --- /dev/null +++ b/elements/pfe-accordion/pfe-accordion-panel.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","pfe-accordion-panel.css","../../pfe-sass/variables/_colors.scss","pfe-accordion-panel.scss","../../pfe-sass/mixins/_mixins.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;ECoBE;AC4GF,6BAAA;AAOA,+BAAA;AC/HA;ECwWE,aAAa;EACb,gBAAgB;EAChB,mBAAmB;EACnB,yBAAyB;AHvV3B;;AEhBA;EC2WE,cAAc;EACd,kBAAkB;EAIlB,mCAA6F;EAA7F,qHAA6F;EAC7F,kCAAmG;EAAnG,2HAAmG;EAQjG,uDAAoF;UAApF,+CAAoF;EAApF,uGAAoF;UAApF,+FAAoF;EACpF,uBAAmB;EAAnB,yEAAmB;EACnB,sBAAkB;EAAlB,kEAAkB;EAClB,2BAAoB;EAApB,+EAAoB;EACpB,gCAA0H;EAA1H,sKAA0H;AHjW9H;;AEvBA;EC2BI,0FAA+B;EAC/B,gGAAkC;EAClC,yGAA2C;EAC3C,uGAAyC;EACzC,uGAAyC;EA4U3C,mCAA6F;EAA7F,qHAA6F;EAC7F,kCAAmG;EAAnG,2HAAmG;EAEjG,wBAAgB;UAAhB,gBAAgB;EAChB,yBAAkB;EAAlB,mEAAkB;EAClB,uBAAmB;EAAnB,wEAAmB;EACnB,wBAAoB;EAApB,yEAAoB;AH5UxB;;AEhCA;EACE,cAAc;EACd,2CAAmC;EAAnC,mCAAmC;AFmCrC;;AEhCA;ECmXE,8BAAsB;UAAtB,sBAAsB;EACtB,WAAW;EAGT,oCAA8G;EAA9G,4GAA8G;AHjVlH;;AElCA;EACE,gBAAgB;AFqClB","file":"pfe-accordion-panel.css","sourcesContent":["/*\n * Copyright 2018 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// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n","/*\n * Copyright 2018 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/* Palette of Border Colors */\n/* Palette of Feedback Colors */\n:host {\n display: none;\n overflow: hidden;\n will-change: height;\n border-color: transparent;\n}\n\n:host([expanded]) {\n display: block;\n position: relative;\n border-right: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;\n border-left: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--surface--border-style, solid) transparent;\n box-shadow: 0 5px var(--pfe-theme--surface--border-width--heavy, 3px) rgba(140, 140, 140, 0.35);\n border-left-color: var(--pfe-theme--color--surface--lightest--link, #06c);\n background-color: var(--pfe-theme--color--surface--lightest, #fff);\n border-right-color: var(--pfe-theme--color--surface--border--lightest, #ececec);\n border-bottom: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) var(--pfe-theme--color--surface--border--lightest, #ececec);\n}\n\n:host([on=\"dark\"][expanded]) {\n --pfe-broadcasted--color--text: var(--pfe-theme--color--text--on-dark, #fff);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--ui-link--on-dark, #99ccff);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff);\n border-right: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;\n border-left: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--surface--border-style, solid) transparent;\n box-shadow: none;\n background-color: var(--pfe-theme--color--surface--darker, #464646);\n border-left-color: var(--pfe-theme--color--surface--darkest--text, #fff);\n border-right-color: var(--pfe-theme--color--surface--darkest--text, #fff);\n}\n\n:host(.animating) {\n display: block;\n transition: height 0.3s ease-in-out;\n}\n\n.container {\n box-sizing: border-box;\n width: 100%;\n padding: 0 3em var(--pfe-theme--container-spacer, 1rem) calc(var(--pfe-theme--container-spacer, 1rem) * 1.5);\n}\n\n:host(:last-of-type[expanded]) {\n margin-bottom: 0;\n}\n","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text: $pfelements--gray-dark !default;\n$pfe-color--text--on-dark: $pfe-color--white !default;\n$pfe-color--text--on-saturated: $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link: #06c !default;\n$pfe-color--ui-link--visited: $pfelements--purple !default; // Was #7551a6\n$pfe-color--ui-link--hover: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-dark--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-saturated--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base: $pfelements--blue !default;\n$pfe-color--ui-base--hover: darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement: $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover: $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent: $pfelements--orange !default;\n$pfe-color--ui-accent--hover: darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text: $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover: $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest: $pfe-color--white !default;\n$pfe-color--surface--lightest--text: $pfe-color--text !default;\n$pfe-color--surface--lightest--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus: $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text: $pfe-color--text !default;\n$pfe-color--surface--lighter--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus: $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base: $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text: $pfe-color--text !default;\n$pfe-color--surface--base--link: #00538c !default; // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited: #7551a6 !default;\n$pfe-color--surface--base--link--hover: #00305b !default;\n$pfe-color--surface--base--link--focus: #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker: $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest: $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement: $pfelements--blue;\n$pfe-color--surface--complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent: $pfelements--orange;\n$pfe-color--surface--accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc\n$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7\n$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical: $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important: $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest: $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest: $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate: $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest: $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest: $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success: #2e7d32 !default;\n$pfe-color--feedback--success--lightest: $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest: #1b5e20 !default;\n\n$pfe-color--feedback--info: #0277bd !default;\n$pfe-color--feedback--info--lightest: $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest: #01579b !default;\n\n$pfe-color--feedback--default: $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest: $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest: $pfe-color--gray-800 !default;\n","@import \"../../pfe-sass/pfe-sass\";\n\n$LOCAL: accordion;\n\n/// ===========================================================================\n/// DEFAULT ACCORDION PANEL\n/// ===========================================================================\n\n:host {\n @include pfe-accordion-panel;\n}\n\n:host([expanded]) {\n @include pfe-accordion-panel-expanded;\n @include pfe-accordion-panel-expanded-style;\n}\n \n:host([on=\"dark\"][expanded]) {\n @include pfe-theme($theme: \"dark\");\n @include pfe-accordion-panel-expanded-style($theme: dark);\n}\n\n:host(.animating) {\n display: block;\n transition: height 0.3s ease-in-out;\n}\n\n.container {\n @include pfe-accordion-panel-container-inset($align: left);\n}\n\n:host(:last-of-type[expanded]) {\n margin-bottom: 0;\n}\n\n","// $boxSize = any box-sizing property, default is border-box\n@mixin pfe-box-sizing($boxSize: border-box) {\n *, *::before, *::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-reset-list() {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n@mixin pfe-reset-box() {\n margin: 0;\n padding: 0;\n}\n\n@mixin pfe-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/// ===========================================================================\n/// Theme Color Vars - use with on=\"dark\" to affect light DOM\n/// ===========================================================================\n\n@mixin pfe-theme($theme) {\n // GENERAL CONTEXT-BASED UPDATES, ON=\"DARK\"\n @if $theme == dark {\n --pfe-broadcasted--color--text: #{pfe-color(text--on-dark)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(ui-link--on-dark)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--on-dark--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--on-dark--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--on-dark--focus)};\n }\n @else if $theme == light {\n --pfe-broadcasted--color--text: #{pfe-color(text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(ui-link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--focus)};\n }\n // MORE SPECIFIC COLOR BASED UPDATES, COLOR=\"DARKER\"\n @else if $theme == darker {\n --pfe-broadcasted--color--text: #{pfe-color(surface--darker--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darker--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darker--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darker--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darker--link--focus)};\n }\n @else if $theme == darkest {\n --pfe-broadcasted--color--text: #{pfe-color(surface--darkest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darkest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darkest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darkest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darkest--link--focus)};\n }\n @else if $theme == accent {\n --pfe-broadcasted--color--text: #{pfe-color(surface--accent--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--accent--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--accent--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--accent--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--accent--link--focus)};\n }\n @else if $theme == complement {\n --pfe-broadcasted--color--text: #{pfe-color(surface--complement--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--complement--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--complement--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--complement--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--complement--link--focus)};\n }\n\n @else if $theme == lighter {\n --pfe-broadcasted--color--text: #{pfe-color(surface--lighter--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lighter--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lighter--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lighter--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lighter--link--focus)};\n }\n @else if $theme == lightest {\n --pfe-broadcasted--color--text: #{pfe-color(surface--lightest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lightest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lightest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lightest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lightest--link--focus)};\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// scss-lint:disable ImportantRule\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// scss-lint:enable ImportantRule\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 for building slot selectors\n@mixin pfe-slot($slot-name, $selector: \"\") {\n // This logic makes it much easier to style default slots in a loop\n // with named slots\n @if $slot-name != default {\n ::slotted([slot=\"#{$slot-name}\"]#{$selector}) {\n @content;\n }\n }\n @else {\n ::slotted(*) {\n @content;\n }\n }\n}\n\n/// ===========================================================================\n/// Accordion Specific SASS Vars\n/// ===========================================================================\n\n$pfe-expand_button--LineHeight: 1.5;\n$pfe-expand_button--padding: #{pfe-var(container-spacer)};\n$pfe-expand_button--padding--factor: .75;\n$pfe-expand_button--padding--wide: calc(#{$pfe-expand_button--padding} * 1.5);\n\n$pfe-expand_chevron--size: .4em;\n$pfe-expand_chevron--weight: .1em;\n$pfe-expand_chevron--padding: 3em;\n$pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe-expand_chevron--size / 2};\n\n@mixin pfe-accordion-header {\n display: block;\n > * {\n margin: 0;\n }\n}\n\n@mixin pfe-trigger-button($align: left) {\n -webkit-appearance: button;\n margin: 0;\n width: 100%;\n height: auto;\n font-family: inherit;\n font-weight: #{pfe-var(font-weight--bold)};\n text-align: left;\n cursor: pointer;\n z-index: 1;\n position: relative;\n\n font-size: calc(#{pfe-var(font-size)} * 1.1);\n line-height: #{pfe-var(line-height)};\n\n color: #{pfe-local(aux)};\n background-color: #{pfe-local(main)};\n border-left: #{pfe-local(BorderLeft)};\n border-right: #{pfe-local(BorderRight)};\n border-bottom: #{pfe-local(BorderBottom)};\n border-top: 0;\n\n &:hover {\n outline: none;\n border-left-color: #{pfe-local(BorderLeftColor--focus)};\n z-index: 2;\n }\n\n &:focus {\n outline: none;\n z-index: 2;\n text-decoration: underline;\n text-decoration-color: #{pfe-color(surface--border--darker)};\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n @if $align == right {\n padding: #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} 50px;\n } @else {\n padding: #{$pfe-expand_button--padding} 50px #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};\n }\n}\n\n@mixin pfe-trigger-button-last($theme: light) {\n border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n // @TODO Support differences based on theme\n}\n\n@mixin pfe-trigger-button-first($theme: light) {\n border-top: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n // @TODO Support differences based on theme\n}\n\n@mixin pfe-trigger-expanded {\n position: relative;\n display: block;\n border-bottom: 0;\n}\n\n@mixin pfe-trigger-color($component-name, $theme: light) {\n @if $theme == dark {\n --pfe-#{$component-name}--main: transparent;\n --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)};\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};\n }\n @else {\n --pfe-#{$component-name}--main: transparent;\n --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)};\n\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} transparent;\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n --pfe-#{$component-name}--BorderBottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest--link)};\n }\n}\n\n@mixin pfe-trigger-color-expanded($component-name, $theme: light) {\n @if $theme == dark {\n --pfe-#{$component-name}--main: #{pfe-color(surface--darker)};\n --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)};\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};\n\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};\n }\n @else {\n --pfe-#{$component-name}--main: #{pfe-color(surface--lightest)};\n --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)};\n --pfe-#{$component-name}--focus: #{pfe-color(surface--lightest--link)};\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--lightest--link)};\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n }\n}\n\n/// ===========================================================================\n/// Accordion chevrons\n/// ===========================================================================\n\n@mixin pfe-chevron-expanded($state: true, $position: after) {\n content: \"\";\n position: absolute;\n top: calc((#{pfe-var(container-spacer)} * #{$pfe-expand_button--padding--factor}) + #{$pfe-expand_chevron--placement} );\n display: block;\n border-style: #{pfe-var(surface--border-style)};\n height: #{$pfe-expand_chevron--size};\n width: #{$pfe-expand_chevron--size};\n text-align: center;\n transition: transform 0.15s;\n @if $state {\n border-width: #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0 0;\n border-bottom: 0;\n transform: rotate(-45deg);\n @if $position == before {\n left: #{$pfe-expand_button--padding--wide};\n }\n @else {\n right: #{$pfe-expand_button--padding--wide};\n }\n }\n @else {\n border-width: 0 #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0;\n transform: rotate(45deg);\n @if $position == before {\n left: #{$pfe-expand_button--padding--wide};\n }\n @else {\n right: #{$pfe-expand_button--padding--wide};\n }\n }\n}\n\n/// ===========================================================================\n/// Accordion panel\n/// ===========================================================================\n\n@mixin pfe-container {\n position: relative;\n display: block;\n width: 100%;\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@mixin pfe-accordion-panel {\n display: none;\n overflow: hidden;\n will-change: height;\n border-color: transparent;\n}\n\n@mixin pfe-accordion-panel-expanded {\n display: block;\n position: relative;\n}\n\n@mixin pfe-accordion-panel-expanded-style($theme: light) {\n border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n border-left: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} transparent;\n @if $theme == dark {\n box-shadow: none;\n background-color: #{pfe-color(surface--darker)};\n border-left-color: #{pfe-color(surface--darkest--text)};\n border-right-color: #{pfe-color(surface--darkest--text)};\n }\n @else {\n box-shadow: 0 5px #{pfe-var(surface--border-width--heavy)} rgba(140, 140, 140, 0.35);\n border-left-color: #{pfe-color(surface--lightest--link)};\n background-color: #{pfe-color(surface--lightest)};\n border-right-color: #{pfe-color(surface--border--lightest)};\n border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n }\n}\n\n@mixin pfe-accordion-panel-container-inset($align: left) {\n box-sizing: border-box;\n width: 100%;\n\n @if $align == left {\n padding: 0 #{$pfe-expand_chevron--padding} #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};\n }\n @else {\n padding: 0 #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} #{$pfe-expand_chevron--padding};\n }\n}\n"]} \ No newline at end of file diff --git a/elements/pfe-accordion/pfe-accordion-panel.css.min.map b/elements/pfe-accordion/pfe-accordion-panel.css.min.map new file mode 100644 index 0000000000..e69de29bb2 diff --git a/elements/pfe-accordion/pfe-accordion-panel.min.css b/elements/pfe-accordion/pfe-accordion-panel.min.css new file mode 100644 index 0000000000..c5753d2491 --- /dev/null +++ b/elements/pfe-accordion/pfe-accordion-panel.min.css @@ -0,0 +1 @@ +:host{display:none;overflow:hidden;will-change:height;border-color:transparent}:host([expanded]){display:block;position:relative;border-right:1px solid transparent;border-right:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) transparent;border-left:3px solid transparent;border-left:var(--pfe-theme--surface--border-width--heavy,3px) var(--pfe-theme--surface--border-style,solid) transparent;-webkit-box-shadow:0 5px 3px rgba(140,140,140,.35);box-shadow:0 5px 3px rgba(140,140,140,.35);-webkit-box-shadow:0 5px var(--pfe-theme--surface--border-width--heavy,3px) rgba(140,140,140,.35);box-shadow:0 5px var(--pfe-theme--surface--border-width--heavy,3px) rgba(140,140,140,.35);border-left-color:#06c;border-left-color:var(--pfe-theme--color--surface--lightest--link,#06c);background-color:#fff;background-color:var(--pfe-theme--color--surface--lightest,#fff);border-right-color:#ececec;border-right-color:var(--pfe-theme--color--surface--border--lightest,#ececec);border-bottom:1px solid #ececec;border-bottom:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) var(--pfe-theme--color--surface--border--lightest,#ececec)}:host([on=dark][expanded]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link--on-dark, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff);border-right:1px solid transparent;border-right:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) transparent;border-left:3px solid transparent;border-left:var(--pfe-theme--surface--border-width--heavy,3px) var(--pfe-theme--surface--border-style,solid) transparent;-webkit-box-shadow:none;box-shadow:none;background-color:#464646;background-color:var(--pfe-theme--color--surface--darker,#464646);border-left-color:#fff;border-left-color:var(--pfe-theme--color--surface--darkest--text,#fff);border-right-color:#fff;border-right-color:var(--pfe-theme--color--surface--darkest--text,#fff)}:host(.animating){display:block;-webkit-transition:height .3s ease-in-out;transition:height .3s ease-in-out}.container{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:0 3em 1rem calc(1rem * 1.5);padding:0 3em var(--pfe-theme--container-spacer,1rem) calc(var(--pfe-theme--container-spacer,1rem) * 1.5)}:host(:last-of-type[expanded]){margin-bottom:0} \ No newline at end of file diff --git a/elements/pfe-accordion/pfe-accordion.css b/elements/pfe-accordion/pfe-accordion.css new file mode 100644 index 0000000000..2700293816 --- /dev/null +++ b/elements/pfe-accordion/pfe-accordion.css @@ -0,0 +1,48 @@ +/* + * Copyright 2018 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. + */ +/* Palette of Border Colors */ +/* Palette of Feedback Colors */ +:host { + display: block; + position: relative; + overflow: hidden; + margin: 0; + color: var(--pfe-broadcasted--color--text); +} + +:host([on="dark"]) { + --pfe-broadcasted--color--text: var(--pfe-theme--color--text--on-dark, #fff); + --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--ui-link--on-dark, #99ccff); + --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9); + --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff); + --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff); +} + +:host([on="light"]) { + --pfe-broadcasted--color--text: var(--pfe-theme--color--text, #333); + --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--ui-link, #06c); + --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--ui-link--visited, rebeccapurple); + --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--ui-link--hover, #003366); + --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--ui-link--focus, #003366); +} + +/*# sourceMappingURL=pfe-accordion.css.map */ diff --git a/elements/pfe-accordion/pfe-accordion.css.map b/elements/pfe-accordion/pfe-accordion.css.map new file mode 100644 index 0000000000..e76cd72e4d --- /dev/null +++ b/elements/pfe-accordion/pfe-accordion.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","pfe-accordion.css","../../pfe-sass/variables/_colors.scss","pfe-accordion.scss","../../pfe-sass/mixins/_mixins.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;ECoBE;AC4GF,6BAAA;AAOA,+BAAA;ACnIA;EACE,cAAc;EACd,kBAAkB;EAClB,gBAAgB;EAChB,SAAS;EACT,0CAAO;AFoBT;;AEjBA;ECgCI,0FAA+B;EAC/B,gGAAkC;EAClC,yGAA2C;EAC3C,uGAAyC;EACzC,uGAAyC;AHX7C;;AErBA;ECmCI,iFAA+B;EAC/B,oFAAkC;EAClC,sGAA2C;EAC3C,8FAAyC;EACzC,8FAAyC;AHV7C","file":"pfe-accordion.css","sourcesContent":["/*\n * Copyright 2018 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// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n","/*\n * Copyright 2018 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/* Palette of Border Colors */\n/* Palette of Feedback Colors */\n:host {\n display: block;\n position: relative;\n overflow: hidden;\n margin: 0;\n color: var(--pfe-broadcasted--color--text);\n}\n\n:host([on=\"dark\"]) {\n --pfe-broadcasted--color--text: var(--pfe-theme--color--text--on-dark, #fff);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--ui-link--on-dark, #99ccff);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff);\n}\n\n:host([on=\"light\"]) {\n --pfe-broadcasted--color--text: var(--pfe-theme--color--text, #333);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--ui-link, #06c);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--ui-link--visited, rebeccapurple);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--ui-link--hover, #003366);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--ui-link--focus, #003366);\n}\n","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text: $pfelements--gray-dark !default;\n$pfe-color--text--on-dark: $pfe-color--white !default;\n$pfe-color--text--on-saturated: $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link: #06c !default;\n$pfe-color--ui-link--visited: $pfelements--purple !default; // Was #7551a6\n$pfe-color--ui-link--hover: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-dark--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-saturated--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base: $pfelements--blue !default;\n$pfe-color--ui-base--hover: darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement: $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover: $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent: $pfelements--orange !default;\n$pfe-color--ui-accent--hover: darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text: $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover: $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest: $pfe-color--white !default;\n$pfe-color--surface--lightest--text: $pfe-color--text !default;\n$pfe-color--surface--lightest--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus: $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text: $pfe-color--text !default;\n$pfe-color--surface--lighter--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus: $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base: $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text: $pfe-color--text !default;\n$pfe-color--surface--base--link: #00538c !default; // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited: #7551a6 !default;\n$pfe-color--surface--base--link--hover: #00305b !default;\n$pfe-color--surface--base--link--focus: #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker: $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest: $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement: $pfelements--blue;\n$pfe-color--surface--complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent: $pfelements--orange;\n$pfe-color--surface--accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc\n$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7\n$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical: $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important: $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest: $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest: $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate: $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest: $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest: $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success: #2e7d32 !default;\n$pfe-color--feedback--success--lightest: $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest: #1b5e20 !default;\n\n$pfe-color--feedback--info: #0277bd !default;\n$pfe-color--feedback--info--lightest: $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest: #01579b !default;\n\n$pfe-color--feedback--default: $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest: $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest: $pfe-color--gray-800 !default;\n","@import \"../../pfe-sass/pfe-sass\";\n\n$LOCAL: accordion;\n\n:host {\n display: block;\n position: relative;\n overflow: hidden;\n margin: 0;\n color: #{pfe-radio(color--text)};\n}\n\n:host([on=\"dark\"]) {\n @include pfe-theme($theme: \"dark\");\n}\n\n:host([on=\"light\"]) {\n @include pfe-theme($theme: \"light\");\n}\n\n","// $boxSize = any box-sizing property, default is border-box\n@mixin pfe-box-sizing($boxSize: border-box) {\n *, *::before, *::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-reset-list() {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n@mixin pfe-reset-box() {\n margin: 0;\n padding: 0;\n}\n\n@mixin pfe-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/// ===========================================================================\n/// Theme Color Vars - use with on=\"dark\" to affect light DOM\n/// ===========================================================================\n\n@mixin pfe-theme($theme) {\n // GENERAL CONTEXT-BASED UPDATES, ON=\"DARK\"\n @if $theme == dark {\n --pfe-broadcasted--color--text: #{pfe-color(text--on-dark)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(ui-link--on-dark)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--on-dark--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--on-dark--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--on-dark--focus)};\n }\n @else if $theme == light {\n --pfe-broadcasted--color--text: #{pfe-color(text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(ui-link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--focus)};\n }\n // MORE SPECIFIC COLOR BASED UPDATES, COLOR=\"DARKER\"\n @else if $theme == darker {\n --pfe-broadcasted--color--text: #{pfe-color(surface--darker--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darker--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darker--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darker--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darker--link--focus)};\n }\n @else if $theme == darkest {\n --pfe-broadcasted--color--text: #{pfe-color(surface--darkest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darkest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darkest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darkest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darkest--link--focus)};\n }\n @else if $theme == accent {\n --pfe-broadcasted--color--text: #{pfe-color(surface--accent--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--accent--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--accent--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--accent--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--accent--link--focus)};\n }\n @else if $theme == complement {\n --pfe-broadcasted--color--text: #{pfe-color(surface--complement--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--complement--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--complement--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--complement--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--complement--link--focus)};\n }\n\n @else if $theme == lighter {\n --pfe-broadcasted--color--text: #{pfe-color(surface--lighter--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lighter--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lighter--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lighter--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lighter--link--focus)};\n }\n @else if $theme == lightest {\n --pfe-broadcasted--color--text: #{pfe-color(surface--lightest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lightest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lightest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lightest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lightest--link--focus)};\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// scss-lint:disable ImportantRule\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// scss-lint:enable ImportantRule\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 for building slot selectors\n@mixin pfe-slot($slot-name, $selector: \"\") {\n // This logic makes it much easier to style default slots in a loop\n // with named slots\n @if $slot-name != default {\n ::slotted([slot=\"#{$slot-name}\"]#{$selector}) {\n @content;\n }\n }\n @else {\n ::slotted(*) {\n @content;\n }\n }\n}\n\n/// ===========================================================================\n/// Accordion Specific SASS Vars\n/// ===========================================================================\n\n$pfe-expand_button--LineHeight: 1.5;\n$pfe-expand_button--padding: #{pfe-var(container-spacer)};\n$pfe-expand_button--padding--factor: .75;\n$pfe-expand_button--padding--wide: calc(#{$pfe-expand_button--padding} * 1.5);\n\n$pfe-expand_chevron--size: .4em;\n$pfe-expand_chevron--weight: .1em;\n$pfe-expand_chevron--padding: 3em;\n$pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe-expand_chevron--size / 2};\n\n@mixin pfe-accordion-header {\n display: block;\n > * {\n margin: 0;\n }\n}\n\n@mixin pfe-trigger-button($align: left) {\n -webkit-appearance: button;\n margin: 0;\n width: 100%;\n height: auto;\n font-family: inherit;\n font-weight: #{pfe-var(font-weight--bold)};\n text-align: left;\n cursor: pointer;\n z-index: 1;\n position: relative;\n\n font-size: calc(#{pfe-var(font-size)} * 1.1);\n line-height: #{pfe-var(line-height)};\n\n color: #{pfe-local(aux)};\n background-color: #{pfe-local(main)};\n border-left: #{pfe-local(BorderLeft)};\n border-right: #{pfe-local(BorderRight)};\n border-bottom: #{pfe-local(BorderBottom)};\n border-top: 0;\n\n &:hover {\n outline: none;\n border-left-color: #{pfe-local(BorderLeftColor--focus)};\n z-index: 2;\n }\n\n &:focus {\n outline: none;\n z-index: 2;\n text-decoration: underline;\n text-decoration-color: #{pfe-color(surface--border--darker)};\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n @if $align == right {\n padding: #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} 50px;\n } @else {\n padding: #{$pfe-expand_button--padding} 50px #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};\n }\n}\n\n@mixin pfe-trigger-button-last($theme: light) {\n border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n // @TODO Support differences based on theme\n}\n\n@mixin pfe-trigger-button-first($theme: light) {\n border-top: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n // @TODO Support differences based on theme\n}\n\n@mixin pfe-trigger-expanded {\n position: relative;\n display: block;\n border-bottom: 0;\n}\n\n@mixin pfe-trigger-color($component-name, $theme: light) {\n @if $theme == dark {\n --pfe-#{$component-name}--main: transparent;\n --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)};\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};\n }\n @else {\n --pfe-#{$component-name}--main: transparent;\n --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)};\n\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} transparent;\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n --pfe-#{$component-name}--BorderBottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest--link)};\n }\n}\n\n@mixin pfe-trigger-color-expanded($component-name, $theme: light) {\n @if $theme == dark {\n --pfe-#{$component-name}--main: #{pfe-color(surface--darker)};\n --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)};\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};\n\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};\n }\n @else {\n --pfe-#{$component-name}--main: #{pfe-color(surface--lightest)};\n --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)};\n --pfe-#{$component-name}--focus: #{pfe-color(surface--lightest--link)};\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--lightest--link)};\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n }\n}\n\n/// ===========================================================================\n/// Accordion chevrons\n/// ===========================================================================\n\n@mixin pfe-chevron-expanded($state: true, $position: after) {\n content: \"\";\n position: absolute;\n top: calc((#{pfe-var(container-spacer)} * #{$pfe-expand_button--padding--factor}) + #{$pfe-expand_chevron--placement} );\n display: block;\n border-style: #{pfe-var(surface--border-style)};\n height: #{$pfe-expand_chevron--size};\n width: #{$pfe-expand_chevron--size};\n text-align: center;\n transition: transform 0.15s;\n @if $state {\n border-width: #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0 0;\n border-bottom: 0;\n transform: rotate(-45deg);\n @if $position == before {\n left: #{$pfe-expand_button--padding--wide};\n }\n @else {\n right: #{$pfe-expand_button--padding--wide};\n }\n }\n @else {\n border-width: 0 #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0;\n transform: rotate(45deg);\n @if $position == before {\n left: #{$pfe-expand_button--padding--wide};\n }\n @else {\n right: #{$pfe-expand_button--padding--wide};\n }\n }\n}\n\n/// ===========================================================================\n/// Accordion panel\n/// ===========================================================================\n\n@mixin pfe-container {\n position: relative;\n display: block;\n width: 100%;\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@mixin pfe-accordion-panel {\n display: none;\n overflow: hidden;\n will-change: height;\n border-color: transparent;\n}\n\n@mixin pfe-accordion-panel-expanded {\n display: block;\n position: relative;\n}\n\n@mixin pfe-accordion-panel-expanded-style($theme: light) {\n border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n border-left: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} transparent;\n @if $theme == dark {\n box-shadow: none;\n background-color: #{pfe-color(surface--darker)};\n border-left-color: #{pfe-color(surface--darkest--text)};\n border-right-color: #{pfe-color(surface--darkest--text)};\n }\n @else {\n box-shadow: 0 5px #{pfe-var(surface--border-width--heavy)} rgba(140, 140, 140, 0.35);\n border-left-color: #{pfe-color(surface--lightest--link)};\n background-color: #{pfe-color(surface--lightest)};\n border-right-color: #{pfe-color(surface--border--lightest)};\n border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n }\n}\n\n@mixin pfe-accordion-panel-container-inset($align: left) {\n box-sizing: border-box;\n width: 100%;\n\n @if $align == left {\n padding: 0 #{$pfe-expand_chevron--padding} #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};\n }\n @else {\n padding: 0 #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} #{$pfe-expand_chevron--padding};\n }\n}\n"]} \ No newline at end of file diff --git a/elements/pfe-accordion/pfe-accordion.css.min.map b/elements/pfe-accordion/pfe-accordion.css.min.map new file mode 100644 index 0000000000..e69de29bb2 diff --git a/elements/pfe-accordion/pfe-accordion.js b/elements/pfe-accordion/pfe-accordion.js new file mode 100644 index 0000000000..df718db95f --- /dev/null +++ b/elements/pfe-accordion/pfe-accordion.js @@ -0,0 +1,560 @@ +import PFElement from '../pfelement/pfelement.js'; + +/* + * @license + * Copyright 2019 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. + * +*/ + +// 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; + } + }); +} + +function generateId() { + return Math.random() + .toString(36) + .substr(2, 9); +} + +class PfeAccordion extends PFElement { + + get html() { + return ``; + } + static get tag() { + return "pfe-accordion"; + } + + get styleUrl() { + return "pfe-accordion.scss"; + } + + get templateUrl() { + return "pfe-accordion.html"; + } + + static get observedAttributes() { + return ["theme", "color", "on"]; + } + + static get cascadingAttributes() { + return { + color: "pfe-accordion-header, pfe-accordion-panel", + on: "pfe-accordion-header, pfe-accordion-panel" + }; + } + + constructor() { + super(PfeAccordion); + } + + connectedCallback() { + super.connectedCallback(); + + this.setAttribute("role", "presentation"); + this.setAttribute("defined", ""); + + this.addEventListener(`${PfeAccordion.tag}:change`, this._changeHandler); + this.addEventListener("keydown", this._keydownHandler); + + Promise.all([ + customElements.whenDefined(PfeAccordionHeader.tag), + customElements.whenDefined(PfeAccordionPanel.tag) + ]).then(this._linkPanels()); + } + + disconnectedCallback() { + this.removeEventListener(`${PfeAccordion.tag}:change`, this._changeHandler); + this.removeEventListener("keydown", this._keydownHandler); + } + + attributeChangedCallback(attr, oldVal, newVal) { + super.attributeChangedCallback(attr, oldVal, newVal); + + if (attr === "color") { + const headers = this.querySelectorAll(PfeAccordionHeader.tag); + + if (newVal === "striped") { + [...headers].forEach((header, index) => { + const headerClass = index % 2 ? "even" : "odd"; + header.classList.add(headerClass); + }); + } else { + [...headers].forEach((header, index) => { + header.classList.remove("even", "odd"); + }); + } + } + } + + toggle(index) { + const headers = this._allHeaders(); + const panels = this._allPanels(); + const header = headers[index]; + const panel = panels[index]; + + if (!header || !panel) { + return; + } + + if (!header.expanded) { + this._expandHeader(header); + this._expandPanel(panel); + } else { + this._collapseHeader(header); + this._collapsePanel(panel); + } + } + + expand(index) { + const headers = this._allHeaders(); + const panels = this._allPanels(); + const header = headers[index]; + const panel = panels[index]; + + if (!header || !panel) { + return; + } + + this._expandHeader(header); + this._expandPanel(panel); + } + + expandAll() { + const headers = this._allHeaders(); + const panels = this._allPanels(); + + headers.forEach(header => this._expandHeader(header)); + panels.forEach(panel => this._expandPanel(panel)); + } + + 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); + } + + collapseAll() { + const headers = this._allHeaders(); + const panels = this._allPanels(); + + headers.forEach(header => this._collapseHeader(header)); + panels.forEach(panel => this._collapsePanel(panel)); + } + + _linkPanels() { + const headers = this._allHeaders(); + headers.forEach(header => { + const panel = this._panelForHeader(header); + + header.setAttribute("aria-controls", panel.pfeId); + panel.setAttribute("aria-labelledby", header.pfeId); + }); + } + + _changeHandler(evt) { + if (this.classList.contains("animating")) { + return; + } + + const header = evt.target; + const panel = evt.target.nextElementSibling; + + if (evt.detail.expanded) { + this._expandHeader(header); + this._expandPanel(panel); + } else { + this._collapseHeader(header); + this._collapsePanel(panel); + } + } + + _toggle(header, panel) {} + + _expandHeader(header) { + header.expanded = true; + } + + _expandPanel(panel) { + if (panel.expanded) { + return; + } + + panel.expanded = true; + + const height = panel.getBoundingClientRect().height; + this._animate(panel, 0, height); + } + + _collapseHeader(header) { + header.expanded = false; + } + + _collapsePanel(panel) { + if (!panel.expanded) { + return; + } + + const height = panel.getBoundingClientRect().height; + panel.expanded = false; + + this._animate(panel, height, 0); + } + + _animate(panel, start, end) { + panel.classList.add("animating"); + panel.style.height = `${start}px`; + + requestAnimationFrame(() => { + requestAnimationFrame(() => { + panel.style.height = `${end}px`; + panel.classList.add("animating"); + panel.addEventListener("transitionend", this._transitionEndHandler); + }); + }); + } + + _keydownHandler(evt) { + const currentHeader = evt.target; + + if (!this._isHeader(currentHeader)) { + 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; + } + + newHeader.shadowRoot.querySelector("button").focus(); + } + + _transitionEndHandler(evt) { + evt.target.style.height = ""; + evt.target.classList.remove("animating"); + evt.target.removeEventListener("transitionend", this._transitionEndHandler); + } + + _allHeaders() { + return [...this.querySelectorAll(PfeAccordionHeader.tag)]; + } + + _allPanels() { + return [...this.querySelectorAll(PfeAccordionPanel.tag)]; + } + + _panelForHeader(header) { + const next = header.nextElementSibling; + + if (next.tagName.toLowerCase() !== PfeAccordionPanel.tag) { + console.error( + `${PfeAccordion.tag}: 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; + } +} + +class PfeAccordionHeader extends PFElement { + + get html() { + return ``; + } + static get tag() { + return "pfe-accordion-header"; + } + + get styleUrl() { + return "pfe-accordion-header.scss"; + } + + get templateUrl() { + return "pfe-accordion-header.html"; + } + + get pfeId() { + return this.getAttribute("pfe-id"); + } + + set pfeId(id) { + if (!id) { + return; + } + + this.setAttribute("pfe-id", id); + } + + static get observedAttributes() { + return ["aria-expanded"]; + } + + constructor() { + super(PfeAccordionHeader); + this._clickHandler = this._clickHandler.bind(this); + } + + connectedCallback() { + super.connectedCallback(); + + if (!this.hasAttribute("role")) { + this.setAttribute("role", "header"); + } + + if (!this.pfeId) { + this.pfeId = `${PfeAccordionHeader.tag}-${generateId()}`; + } + + this.button = this.shadowRoot.querySelector("button"); + + const child = this.children[0]; + let isHeaderTag = false; + + if (child) { + switch (child.tagName) { + case "H1": + case "H2": + case "H3": + case "H4": + case "H5": + case "H6": + isHeaderTag = true; + break; + } + + const wrapperTag = document.createElement(child.tagName); + this.button.innerText = child.innerText; + + wrapperTag.appendChild(this.button); + this.shadowRoot.appendChild(wrapperTag); + } else { + this.button.innerText = this.textContent.trim(); + } + + if (!isHeaderTag) { + console.warn( + `${ + PfeAccordionHeader.tag + }: The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)` + ); + } + + this.addEventListener("click", this._clickHandler); + } + + disconnectedCallback() { + this.removeEventListener("click", this._clickHandler); + } + + get expanded() { + return this.hasAttribute("aria-expanded"); + } + + set expanded(val) { + val = Boolean(val); + + if (val) { + this.setAttribute("aria-expanded", true); + this.button.setAttribute("aria-expanded", true); + } else { + this.removeAttribute("aria-expanded"); + this.button.setAttribute("aria-expanded", false); + } + } + + _clickHandler(event) { + this.dispatchEvent( + new CustomEvent(`${PfeAccordion.tag}:change`, { + detail: { expanded: !this.expanded }, + bubbles: true + }) + ); + } +} + +class PfeAccordionPanel extends PFElement { + + get html() { + return `
+
+ +
+
`; + } + static get tag() { + return "pfe-accordion-panel"; + } + + get styleUrl() { + return "pfe-accordion-panel.scss"; + } + + get templateUrl() { + return "pfe-accordion-panel.html"; + } + + get pfeId() { + return this.getAttribute("pfe-id"); + } + + set pfeId(id) { + if (!id) { + return; + } + + this.setAttribute("pfe-id", id); + } + + constructor() { + super(PfeAccordionPanel); + } + + connectedCallback() { + super.connectedCallback(); + + if (!this.hasAttribute("role")) { + this.setAttribute("role", "region"); + } + + if (!this.pfeId) { + this.pfeId = `${PfeAccordionPanel.tag}-${generateId()}`; + } + } + + get expanded() { + return this.hasAttribute("expanded"); + } + + set expanded(val) { + const value = Boolean(val); + + if (value) { + this.setAttribute("expanded", ""); + } else { + this.removeAttribute("expanded"); + } + } +} + +PFElement.create(PfeAccordionHeader); +PFElement.create(PfeAccordionPanel); +PFElement.create(PfeAccordion); + +export default PfeAccordion; +//# sourceMappingURL=pfe-accordion.js.map diff --git a/elements/pfe-accordion/pfe-accordion.js.map b/elements/pfe-accordion/pfe-accordion.js.map new file mode 100644 index 0000000000..5a7f10d9d8 --- /dev/null +++ b/elements/pfe-accordion/pfe-accordion.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-accordion.js","sources":["pfe-accordion.js"],"sourcesContent":["/*\n * @license\n * Copyright 2019 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/pfelement.js\";\n\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\nfunction generateId() {\n return Math.random()\n .toString(36)\n .substr(2, 9);\n}\n\nclass PfeAccordion extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-accordion\";\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 observedAttributes() {\n return [\"theme\", \"color\", \"on\"];\n }\n\n static get cascadingAttributes() {\n return {\n color: \"pfe-accordion-header, pfe-accordion-panel\",\n on: \"pfe-accordion-header, pfe-accordion-panel\"\n };\n }\n\n constructor() {\n super(PfeAccordion);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this.setAttribute(\"role\", \"presentation\");\n this.setAttribute(\"defined\", \"\");\n\n this.addEventListener(`${PfeAccordion.tag}:change`, this._changeHandler);\n this.addEventListener(\"keydown\", this._keydownHandler);\n\n Promise.all([\n customElements.whenDefined(PfeAccordionHeader.tag),\n customElements.whenDefined(PfeAccordionPanel.tag)\n ]).then(this._linkPanels());\n }\n\n disconnectedCallback() {\n this.removeEventListener(`${PfeAccordion.tag}:change`, this._changeHandler);\n this.removeEventListener(\"keydown\", this._keydownHandler);\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n super.attributeChangedCallback(attr, oldVal, newVal);\n\n if (attr === \"color\") {\n const headers = this.querySelectorAll(PfeAccordionHeader.tag);\n\n if (newVal === \"striped\") {\n [...headers].forEach((header, index) => {\n const headerClass = index % 2 ? \"even\" : \"odd\";\n header.classList.add(headerClass);\n });\n } else {\n [...headers].forEach((header, index) => {\n header.classList.remove(\"even\", \"odd\");\n });\n }\n }\n }\n\n toggle(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) {\n return;\n }\n\n if (!header.expanded) {\n this._expandHeader(header);\n this._expandPanel(panel);\n } else {\n this._collapseHeader(header);\n this._collapsePanel(panel);\n }\n }\n\n expand(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) {\n return;\n }\n\n this._expandHeader(header);\n this._expandPanel(panel);\n }\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 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) {\n return;\n }\n\n this._collapseHeader(header);\n this._collapsePanel(panel);\n }\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 _linkPanels() {\n const headers = this._allHeaders();\n headers.forEach(header => {\n const panel = this._panelForHeader(header);\n\n header.setAttribute(\"aria-controls\", panel.pfeId);\n panel.setAttribute(\"aria-labelledby\", header.pfeId);\n });\n }\n\n _changeHandler(evt) {\n if (this.classList.contains(\"animating\")) {\n return;\n }\n\n const header = evt.target;\n const panel = evt.target.nextElementSibling;\n\n if (evt.detail.expanded) {\n this._expandHeader(header);\n this._expandPanel(panel);\n } else {\n this._collapseHeader(header);\n this._collapsePanel(panel);\n }\n }\n\n _toggle(header, panel) {}\n\n _expandHeader(header) {\n header.expanded = true;\n }\n\n _expandPanel(panel) {\n if (panel.expanded) {\n return;\n }\n\n panel.expanded = true;\n\n const height = panel.getBoundingClientRect().height;\n this._animate(panel, 0, height);\n }\n\n _collapseHeader(header) {\n header.expanded = false;\n }\n\n _collapsePanel(panel) {\n if (!panel.expanded) {\n return;\n }\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 panel.classList.add(\"animating\");\n panel.style.height = `${start}px`;\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n panel.style.height = `${end}px`;\n panel.classList.add(\"animating\");\n panel.addEventListener(\"transitionend\", this._transitionEndHandler);\n });\n });\n }\n\n _keydownHandler(evt) {\n const currentHeader = evt.target;\n\n if (!this._isHeader(currentHeader)) {\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 newHeader.shadowRoot.querySelector(\"button\").focus();\n }\n\n _transitionEndHandler(evt) {\n evt.target.style.height = \"\";\n evt.target.classList.remove(\"animating\");\n evt.target.removeEventListener(\"transitionend\", this._transitionEndHandler);\n }\n\n _allHeaders() {\n return [...this.querySelectorAll(PfeAccordionHeader.tag)];\n }\n\n _allPanels() {\n return [...this.querySelectorAll(PfeAccordionPanel.tag)];\n }\n\n _panelForHeader(header) {\n const next = header.nextElementSibling;\n\n if (next.tagName.toLowerCase() !== PfeAccordionPanel.tag) {\n console.error(\n `${PfeAccordion.tag}: Sibling element to a header needs to be a panel`\n );\n return;\n }\n\n return next;\n }\n\n _previousHeader() {\n const headers = this._allHeaders();\n let newIndex =\n 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 =\n 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\nclass PfeAccordionHeader extends PFElement {\n\n get html() {\n return ``;\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 get pfeId() {\n return this.getAttribute(\"pfe-id\");\n }\n\n set pfeId(id) {\n if (!id) {\n return;\n }\n\n this.setAttribute(\"pfe-id\", id);\n }\n\n static get observedAttributes() {\n return [\"aria-expanded\"];\n }\n\n constructor() {\n super(PfeAccordionHeader);\n this._clickHandler = this._clickHandler.bind(this);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.hasAttribute(\"role\")) {\n this.setAttribute(\"role\", \"header\");\n }\n\n if (!this.pfeId) {\n this.pfeId = `${PfeAccordionHeader.tag}-${generateId()}`;\n }\n\n this.button = this.shadowRoot.querySelector(\"button\");\n\n const child = this.children[0];\n let isHeaderTag = false;\n\n if (child) {\n switch (child.tagName) {\n case \"H1\":\n case \"H2\":\n case \"H3\":\n case \"H4\":\n case \"H5\":\n case \"H6\":\n isHeaderTag = true;\n break;\n }\n\n const wrapperTag = document.createElement(child.tagName);\n this.button.innerText = child.innerText;\n\n wrapperTag.appendChild(this.button);\n this.shadowRoot.appendChild(wrapperTag);\n } else {\n this.button.innerText = this.textContent.trim();\n }\n\n if (!isHeaderTag) {\n console.warn(\n `${\n PfeAccordionHeader.tag\n }: The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)`\n );\n }\n\n this.addEventListener(\"click\", this._clickHandler);\n }\n\n disconnectedCallback() {\n this.removeEventListener(\"click\", this._clickHandler);\n }\n\n get expanded() {\n return this.hasAttribute(\"aria-expanded\");\n }\n\n set expanded(val) {\n val = Boolean(val);\n\n if (val) {\n this.setAttribute(\"aria-expanded\", true);\n this.button.setAttribute(\"aria-expanded\", true);\n } else {\n this.removeAttribute(\"aria-expanded\");\n this.button.setAttribute(\"aria-expanded\", false);\n }\n }\n\n _clickHandler(event) {\n this.dispatchEvent(\n new CustomEvent(`${PfeAccordion.tag}:change`, {\n detail: { expanded: !this.expanded },\n bubbles: true\n })\n );\n }\n}\n\nclass PfeAccordionPanel extends PFElement {\n\n get html() {\n return `
\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 get pfeId() {\n return this.getAttribute(\"pfe-id\");\n }\n\n set pfeId(id) {\n if (!id) {\n return;\n }\n\n this.setAttribute(\"pfe-id\", id);\n }\n\n constructor() {\n super(PfeAccordionPanel);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.hasAttribute(\"role\")) {\n this.setAttribute(\"role\", \"region\");\n }\n\n if (!this.pfeId) {\n this.pfeId = `${PfeAccordionPanel.tag}-${generateId()}`;\n }\n }\n\n get expanded() {\n return this.hasAttribute(\"expanded\");\n }\n\n set expanded(val) {\n const value = Boolean(val);\n\n if (value) {\n this.setAttribute(\"expanded\", \"\");\n } else {\n this.removeAttribute(\"expanded\");\n }\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/pfe-accordion.min.css b/elements/pfe-accordion/pfe-accordion.min.css new file mode 100644 index 0000000000..2898cf5db3 --- /dev/null +++ b/elements/pfe-accordion/pfe-accordion.min.css @@ -0,0 +1 @@ +:host{display:block;position:relative;overflow:hidden;margin:0;color:var(--pfe-broadcasted--color--text)}:host([on=dark]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link--on-dark, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff)}:host([on=light]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--focus, #003366)} \ No newline at end of file diff --git a/elements/pfe-accordion/pfe-accordion.min.js b/elements/pfe-accordion/pfe-accordion.min.js new file mode 100644 index 0000000000..4b8865b569 --- /dev/null +++ b/elements/pfe-accordion/pfe-accordion.min.js @@ -0,0 +1,26 @@ +import e from"../pfelement/pfelement.min.js";function t(){return Math.random().toString(36).substr(2,9)} +/* + * @license + * Copyright 2019 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. + * +*/ +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),r=t.length>>>0;if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var a=arguments[1],o=0;o:host{display:block;position:relative;overflow:hidden;margin:0;color:var(--pfe-broadcasted--color--text)}:host([on=dark]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link--on-dark, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff)}:host([on=light]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--focus, #003366)}"}static get tag(){return"pfe-accordion"}get styleUrl(){return"pfe-accordion.scss"}get templateUrl(){return"pfe-accordion.html"}static get observedAttributes(){return["theme","color","on"]}static get cascadingAttributes(){return{color:"pfe-accordion-header, pfe-accordion-panel",on:"pfe-accordion-header, pfe-accordion-panel"}}constructor(){super(r)}connectedCallback(){super.connectedCallback(),this.setAttribute("role","presentation"),this.setAttribute("defined",""),this.addEventListener(`${r.tag}:change`,this._changeHandler),this.addEventListener("keydown",this._keydownHandler),Promise.all([customElements.whenDefined(a.tag),customElements.whenDefined(o.tag)]).then(this._linkPanels())}disconnectedCallback(){this.removeEventListener(`${r.tag}:change`,this._changeHandler),this.removeEventListener("keydown",this._keydownHandler)}attributeChangedCallback(e,t,r){if(super.attributeChangedCallback(e,t,r),"color"===e){const e=this.querySelectorAll(a.tag);"striped"===r?[...e].forEach((e,t)=>{const r=t%2?"even":"odd";e.classList.add(r)}):[...e].forEach((e,t)=>{e.classList.remove("even","odd")})}}toggle(e){const t=this._allHeaders(),r=this._allPanels(),a=t[e],o=r[e];a&&o&&(a.expanded?(this._collapseHeader(a),this._collapsePanel(o)):(this._expandHeader(a),this._expandPanel(o)))}expand(e){const t=this._allHeaders(),r=this._allPanels(),a=t[e],o=r[e];a&&o&&(this._expandHeader(a),this._expandPanel(o))}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(),r=this._allPanels(),a=t[e],o=r[e];a&&o&&(this._collapseHeader(a),this._collapsePanel(o))}collapseAll(){const e=this._allHeaders(),t=this._allPanels();e.forEach(e=>this._collapseHeader(e)),t.forEach(e=>this._collapsePanel(e))}_linkPanels(){this._allHeaders().forEach(e=>{const t=this._panelForHeader(e);e.setAttribute("aria-controls",t.pfeId),t.setAttribute("aria-labelledby",e.pfeId)})}_changeHandler(e){if(this.classList.contains("animating"))return;const t=e.target,r=e.target.nextElementSibling;e.detail.expanded?(this._expandHeader(t),this._expandPanel(r)):(this._collapseHeader(t),this._collapsePanel(r))}_toggle(e,t){}_expandHeader(e){e.expanded=!0}_expandPanel(e){if(e.expanded)return;e.expanded=!0;const t=e.getBoundingClientRect().height;this._animate(e,0,t)}_collapseHeader(e){e.expanded=!1}_collapsePanel(e){if(!e.expanded)return;const t=e.getBoundingClientRect().height;e.expanded=!1,this._animate(e,t,0)}_animate(e,t,r){e.classList.add("animating"),e.style.height=`${t}px`,requestAnimationFrame(()=>{requestAnimationFrame(()=>{e.style.height=`${r}px`,e.classList.add("animating"),e.addEventListener("transitionend",this._transitionEndHandler)})})}_keydownHandler(e){const t=e.target;if(!this._isHeader(t))return;let r;switch(e.key){case"ArrowDown":case"Down":case"ArrowRight":case"Right":r=this._nextHeader();break;case"ArrowUp":case"Up":case"ArrowLeft":case"Left":r=this._previousHeader();break;case"Home":r=this._firstHeader();break;case"End":r=this._lastHeader();break;default:return}r.shadowRoot.querySelector("button").focus()}_transitionEndHandler(e){e.target.style.height="",e.target.classList.remove("animating"),e.target.removeEventListener("transitionend",this._transitionEndHandler)}_allHeaders(){return[...this.querySelectorAll(a.tag)]}_allPanels(){return[...this.querySelectorAll(o.tag)]}_panelForHeader(e){const t=e.nextElementSibling;if(t.tagName.toLowerCase()===o.tag)return t;console.error(`${r.tag}: 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()===a.tag}}class a extends e{get html(){return''}static get tag(){return"pfe-accordion-header"}get styleUrl(){return"pfe-accordion-header.scss"}get templateUrl(){return"pfe-accordion-header.html"}get pfeId(){return this.getAttribute("pfe-id")}set pfeId(e){e&&this.setAttribute("pfe-id",e)}static get observedAttributes(){return["aria-expanded"]}constructor(){super(a),this._clickHandler=this._clickHandler.bind(this)}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","header"),this.pfeId||(this.pfeId=`${a.tag}-${t()}`),this.button=this.shadowRoot.querySelector("button");const e=this.children[0];let r=!1;if(e){switch(e.tagName){case"H1":case"H2":case"H3":case"H4":case"H5":case"H6":r=!0}const t=document.createElement(e.tagName);this.button.innerText=e.innerText,t.appendChild(this.button),this.shadowRoot.appendChild(t)}else this.button.innerText=this.textContent.trim();r||console.warn(`${a.tag}: The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)`),this.addEventListener("click",this._clickHandler)}disconnectedCallback(){this.removeEventListener("click",this._clickHandler)}get expanded(){return this.hasAttribute("aria-expanded")}set expanded(e){(e=Boolean(e))?(this.setAttribute("aria-expanded",!0),this.button.setAttribute("aria-expanded",!0)):(this.removeAttribute("aria-expanded"),this.button.setAttribute("aria-expanded",!1))}_clickHandler(e){this.dispatchEvent(new CustomEvent(`${r.tag}:change`,{detail:{expanded:!this.expanded},bubbles:!0}))}}class o extends e{get html(){return'
\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"}get pfeId(){return this.getAttribute("pfe-id")}set pfeId(e){e&&this.setAttribute("pfe-id",e)}constructor(){super(o)}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","region"),this.pfeId||(this.pfeId=`${o.tag}-${t()}`)}get expanded(){return this.hasAttribute("expanded")}set expanded(e){Boolean(e)?this.setAttribute("expanded",""):this.removeAttribute("expanded")}}e.create(a),e.create(o),e.create(r);export default r; +//# sourceMappingURL=pfe-accordion.min.js.map diff --git a/elements/pfe-accordion/pfe-accordion.min.js.map b/elements/pfe-accordion/pfe-accordion.min.js.map new file mode 100644 index 0000000000..b592c2eac5 --- /dev/null +++ b/elements/pfe-accordion/pfe-accordion.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-accordion.min.js","sources":["pfe-accordion.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 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// 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\nfunction generateId() {\n return Math.random()\n .toString(36)\n .substr(2, 9);\n}\n\nclass PfeAccordion extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-accordion\";\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 observedAttributes() {\n return [\"theme\", \"color\", \"on\"];\n }\n\n static get cascadingAttributes() {\n return {\n color: \"pfe-accordion-header, pfe-accordion-panel\",\n on: \"pfe-accordion-header, pfe-accordion-panel\"\n };\n }\n\n constructor() {\n super(PfeAccordion);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this.setAttribute(\"role\", \"presentation\");\n this.setAttribute(\"defined\", \"\");\n\n this.addEventListener(`${PfeAccordion.tag}:change`, this._changeHandler);\n this.addEventListener(\"keydown\", this._keydownHandler);\n\n Promise.all([\n customElements.whenDefined(PfeAccordionHeader.tag),\n customElements.whenDefined(PfeAccordionPanel.tag)\n ]).then(this._linkPanels());\n }\n\n disconnectedCallback() {\n this.removeEventListener(`${PfeAccordion.tag}:change`, this._changeHandler);\n this.removeEventListener(\"keydown\", this._keydownHandler);\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n super.attributeChangedCallback(attr, oldVal, newVal);\n\n if (attr === \"color\") {\n const headers = this.querySelectorAll(PfeAccordionHeader.tag);\n\n if (newVal === \"striped\") {\n [...headers].forEach((header, index) => {\n const headerClass = index % 2 ? \"even\" : \"odd\";\n header.classList.add(headerClass);\n });\n } else {\n [...headers].forEach((header, index) => {\n header.classList.remove(\"even\", \"odd\");\n });\n }\n }\n }\n\n toggle(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) {\n return;\n }\n\n if (!header.expanded) {\n this._expandHeader(header);\n this._expandPanel(panel);\n } else {\n this._collapseHeader(header);\n this._collapsePanel(panel);\n }\n }\n\n expand(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) {\n return;\n }\n\n this._expandHeader(header);\n this._expandPanel(panel);\n }\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 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) {\n return;\n }\n\n this._collapseHeader(header);\n this._collapsePanel(panel);\n }\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 _linkPanels() {\n const headers = this._allHeaders();\n headers.forEach(header => {\n const panel = this._panelForHeader(header);\n\n header.setAttribute(\"aria-controls\", panel.pfeId);\n panel.setAttribute(\"aria-labelledby\", header.pfeId);\n });\n }\n\n _changeHandler(evt) {\n if (this.classList.contains(\"animating\")) {\n return;\n }\n\n const header = evt.target;\n const panel = evt.target.nextElementSibling;\n\n if (evt.detail.expanded) {\n this._expandHeader(header);\n this._expandPanel(panel);\n } else {\n this._collapseHeader(header);\n this._collapsePanel(panel);\n }\n }\n\n _toggle(header, panel) {}\n\n _expandHeader(header) {\n header.expanded = true;\n }\n\n _expandPanel(panel) {\n if (panel.expanded) {\n return;\n }\n\n panel.expanded = true;\n\n const height = panel.getBoundingClientRect().height;\n this._animate(panel, 0, height);\n }\n\n _collapseHeader(header) {\n header.expanded = false;\n }\n\n _collapsePanel(panel) {\n if (!panel.expanded) {\n return;\n }\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 panel.classList.add(\"animating\");\n panel.style.height = `${start}px`;\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n panel.style.height = `${end}px`;\n panel.classList.add(\"animating\");\n panel.addEventListener(\"transitionend\", this._transitionEndHandler);\n });\n });\n }\n\n _keydownHandler(evt) {\n const currentHeader = evt.target;\n\n if (!this._isHeader(currentHeader)) {\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 newHeader.shadowRoot.querySelector(\"button\").focus();\n }\n\n _transitionEndHandler(evt) {\n evt.target.style.height = \"\";\n evt.target.classList.remove(\"animating\");\n evt.target.removeEventListener(\"transitionend\", this._transitionEndHandler);\n }\n\n _allHeaders() {\n return [...this.querySelectorAll(PfeAccordionHeader.tag)];\n }\n\n _allPanels() {\n return [...this.querySelectorAll(PfeAccordionPanel.tag)];\n }\n\n _panelForHeader(header) {\n const next = header.nextElementSibling;\n\n if (next.tagName.toLowerCase() !== PfeAccordionPanel.tag) {\n console.error(\n `${PfeAccordion.tag}: Sibling element to a header needs to be a panel`\n );\n return;\n }\n\n return next;\n }\n\n _previousHeader() {\n const headers = this._allHeaders();\n let newIndex =\n 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 =\n 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\nclass PfeAccordionHeader extends PFElement {\n\n get html() {\n return ``;\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 get pfeId() {\n return this.getAttribute(\"pfe-id\");\n }\n\n set pfeId(id) {\n if (!id) {\n return;\n }\n\n this.setAttribute(\"pfe-id\", id);\n }\n\n static get observedAttributes() {\n return [\"aria-expanded\"];\n }\n\n constructor() {\n super(PfeAccordionHeader);\n this._clickHandler = this._clickHandler.bind(this);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.hasAttribute(\"role\")) {\n this.setAttribute(\"role\", \"header\");\n }\n\n if (!this.pfeId) {\n this.pfeId = `${PfeAccordionHeader.tag}-${generateId()}`;\n }\n\n this.button = this.shadowRoot.querySelector(\"button\");\n\n const child = this.children[0];\n let isHeaderTag = false;\n\n if (child) {\n switch (child.tagName) {\n case \"H1\":\n case \"H2\":\n case \"H3\":\n case \"H4\":\n case \"H5\":\n case \"H6\":\n isHeaderTag = true;\n break;\n }\n\n const wrapperTag = document.createElement(child.tagName);\n this.button.innerText = child.innerText;\n\n wrapperTag.appendChild(this.button);\n this.shadowRoot.appendChild(wrapperTag);\n } else {\n this.button.innerText = this.textContent.trim();\n }\n\n if (!isHeaderTag) {\n console.warn(\n `${\n PfeAccordionHeader.tag\n }: The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)`\n );\n }\n\n this.addEventListener(\"click\", this._clickHandler);\n }\n\n disconnectedCallback() {\n this.removeEventListener(\"click\", this._clickHandler);\n }\n\n get expanded() {\n return this.hasAttribute(\"aria-expanded\");\n }\n\n set expanded(val) {\n val = Boolean(val);\n\n if (val) {\n this.setAttribute(\"aria-expanded\", true);\n this.button.setAttribute(\"aria-expanded\", true);\n } else {\n this.removeAttribute(\"aria-expanded\");\n this.button.setAttribute(\"aria-expanded\", false);\n }\n }\n\n _clickHandler(event) {\n this.dispatchEvent(\n new CustomEvent(`${PfeAccordion.tag}:change`, {\n detail: { expanded: !this.expanded },\n bubbles: true\n })\n );\n }\n}\n\nclass PfeAccordionPanel extends PFElement {\n\n get html() {\n return `
\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 get pfeId() {\n return this.getAttribute(\"pfe-id\");\n }\n\n set pfeId(id) {\n if (!id) {\n return;\n }\n\n this.setAttribute(\"pfe-id\", id);\n }\n\n constructor() {\n super(PfeAccordionPanel);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.hasAttribute(\"role\")) {\n this.setAttribute(\"role\", \"region\");\n }\n\n if (!this.pfeId) {\n this.pfeId = `${PfeAccordionPanel.tag}-${generateId()}`;\n }\n }\n\n get expanded() {\n return this.hasAttribute(\"expanded\");\n }\n\n set expanded(val) {\n const value = Boolean(val);\n\n if (value) {\n this.setAttribute(\"expanded\", \"\");\n } else {\n this.removeAttribute(\"expanded\");\n }\n }\n}\n\nPFElement.create(PfeAccordionHeader);\nPFElement.create(PfeAccordionPanel);\nPFElement.create(PfeAccordion);\n\nexport default PfeAccordion;\n//# sourceMappingURL=pfe-accordion.js.map\n"],"names":["generateId","Math","random","toString","substr","Array","prototype","findIndex","Object","defineProperty","value","predicate","this","TypeError","o","len","length","thisArg","arguments","k","kValue","call","PfeAccordion","PFElement","html","tag","styleUrl","templateUrl","observedAttributes","cascadingAttributes","color","on","[object Object]","super","connectedCallback","setAttribute","addEventListener","_changeHandler","_keydownHandler","Promise","all","customElements","whenDefined","PfeAccordionHeader","PfeAccordionPanel","then","_linkPanels","removeEventListener","attr","oldVal","newVal","attributeChangedCallback","headers","querySelectorAll","forEach","header","index","headerClass","classList","add","remove","_allHeaders","panels","_allPanels","panel","expanded","_collapseHeader","_collapsePanel","_expandHeader","_expandPanel","_panelForHeader","pfeId","evt","contains","target","nextElementSibling","detail","height","getBoundingClientRect","_animate","start","end","style","requestAnimationFrame","_transitionEndHandler","currentHeader","_isHeader","newHeader","key","_nextHeader","_previousHeader","_firstHeader","_lastHeader","shadowRoot","querySelector","focus","next","tagName","toLowerCase","console","error","newIndex","document","activeElement","element","getAttribute","id","_clickHandler","bind","hasAttribute","button","child","children","isHeaderTag","wrapperTag","createElement","innerText","appendChild","textContent","trim","warn","val","Boolean","removeAttribute","event","dispatchEvent","CustomEvent","bubbles","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-accordion/pfe-accordion.umd.js b/elements/pfe-accordion/pfe-accordion.umd.js new file mode 100644 index 0000000000..b3f8ca3586 --- /dev/null +++ b/elements/pfe-accordion/pfe-accordion.umd.js @@ -0,0 +1,721 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('../pfelement/pfelement.umd')) : + typeof define === 'function' && define.amd ? define(['../pfelement/pfelement.umd'], factory) : + (global.PfeAccordion = factory(global.PFElement)); +}(this, (function (PFElement) { 'use strict'; + + PFElement = PFElement && PFElement.hasOwnProperty('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; + }; + + 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); + } + }; + + /* + * @license + * Copyright 2019 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. + * + */ + + // 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; + } + }); + } + + function generateId() { + return Math.random().toString(36).substr(2, 9); + } + + var PfeAccordion = function (_PFElement) { + inherits(PfeAccordion, _PFElement); + createClass(PfeAccordion, [{ + key: 'html', + get: function get$$1() { + return ''; + } + }, { + key: 'styleUrl', + get: function get$$1() { + return "pfe-accordion.scss"; + } + }, { + key: 'templateUrl', + get: function get$$1() { + return "pfe-accordion.html"; + } + }], [{ + key: 'tag', + get: function get$$1() { + return "pfe-accordion"; + } + }, { + key: 'observedAttributes', + get: function get$$1() { + return ["theme", "color", "on"]; + } + }, { + key: 'cascadingAttributes', + get: function get$$1() { + return { + color: "pfe-accordion-header, pfe-accordion-panel", + on: "pfe-accordion-header, pfe-accordion-panel" + }; + } + }]); + + function PfeAccordion() { + classCallCheck(this, PfeAccordion); + return possibleConstructorReturn(this, (PfeAccordion.__proto__ || Object.getPrototypeOf(PfeAccordion)).call(this, PfeAccordion)); + } + + createClass(PfeAccordion, [{ + key: 'connectedCallback', + value: function connectedCallback() { + get(PfeAccordion.prototype.__proto__ || Object.getPrototypeOf(PfeAccordion.prototype), 'connectedCallback', this).call(this); + + this.setAttribute("role", "presentation"); + this.setAttribute("defined", ""); + + this.addEventListener(PfeAccordion.tag + ':change', this._changeHandler); + this.addEventListener("keydown", this._keydownHandler); + + Promise.all([customElements.whenDefined(PfeAccordionHeader.tag), customElements.whenDefined(PfeAccordionPanel.tag)]).then(this._linkPanels()); + } + }, { + key: 'disconnectedCallback', + value: function disconnectedCallback() { + this.removeEventListener(PfeAccordion.tag + ':change', this._changeHandler); + this.removeEventListener("keydown", this._keydownHandler); + } + }, { + key: 'attributeChangedCallback', + value: function attributeChangedCallback(attr, oldVal, newVal) { + get(PfeAccordion.prototype.__proto__ || Object.getPrototypeOf(PfeAccordion.prototype), 'attributeChangedCallback', this).call(this, attr, oldVal, newVal); + + if (attr === "color") { + var headers = this.querySelectorAll(PfeAccordionHeader.tag); + + if (newVal === "striped") { + [].concat(toConsumableArray(headers)).forEach(function (header, index) { + var headerClass = index % 2 ? "even" : "odd"; + header.classList.add(headerClass); + }); + } else { + [].concat(toConsumableArray(headers)).forEach(function (header, index) { + header.classList.remove("even", "odd"); + }); + } + } + } + }, { + key: 'toggle', + value: function toggle(index) { + var headers = this._allHeaders(); + var panels = this._allPanels(); + var header = headers[index]; + var panel = panels[index]; + + if (!header || !panel) { + return; + } + + if (!header.expanded) { + this._expandHeader(header); + this._expandPanel(panel); + } else { + this._collapseHeader(header); + this._collapsePanel(panel); + } + } + }, { + key: 'expand', + value: function expand(index) { + var headers = this._allHeaders(); + var panels = this._allPanels(); + var header = headers[index]; + var panel = panels[index]; + + if (!header || !panel) { + return; + } + + this._expandHeader(header); + this._expandPanel(panel); + } + }, { + 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); + }); + } + }, { + 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); + } + }, { + 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); + }); + } + }, { + key: '_linkPanels', + value: function _linkPanels() { + var _this4 = this; + + var headers = this._allHeaders(); + headers.forEach(function (header) { + var panel = _this4._panelForHeader(header); + + header.setAttribute("aria-controls", panel.pfeId); + panel.setAttribute("aria-labelledby", header.pfeId); + }); + } + }, { + key: '_changeHandler', + value: function _changeHandler(evt) { + if (this.classList.contains("animating")) { + return; + } + + var header = evt.target; + var panel = evt.target.nextElementSibling; + + if (evt.detail.expanded) { + this._expandHeader(header); + this._expandPanel(panel); + } else { + this._collapseHeader(header); + this._collapsePanel(panel); + } + } + }, { + key: '_toggle', + value: function _toggle(header, panel) {} + }, { + key: '_expandHeader', + value: function _expandHeader(header) { + header.expanded = true; + } + }, { + key: '_expandPanel', + value: function _expandPanel(panel) { + if (panel.expanded) { + return; + } + + panel.expanded = true; + + var height = panel.getBoundingClientRect().height; + this._animate(panel, 0, height); + } + }, { + key: '_collapseHeader', + value: function _collapseHeader(header) { + header.expanded = false; + } + }, { + key: '_collapsePanel', + value: function _collapsePanel(panel) { + 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; + + panel.classList.add("animating"); + panel.style.height = start + 'px'; + + requestAnimationFrame(function () { + requestAnimationFrame(function () { + panel.style.height = end + 'px'; + panel.classList.add("animating"); + panel.addEventListener("transitionend", _this5._transitionEndHandler); + }); + }); + } + }, { + key: '_keydownHandler', + value: function _keydownHandler(evt) { + var currentHeader = evt.target; + + if (!this._isHeader(currentHeader)) { + 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; + } + + newHeader.shadowRoot.querySelector("button").focus(); + } + }, { + key: '_transitionEndHandler', + value: function _transitionEndHandler(evt) { + evt.target.style.height = ""; + evt.target.classList.remove("animating"); + evt.target.removeEventListener("transitionend", this._transitionEndHandler); + } + }, { + key: '_allHeaders', + value: function _allHeaders() { + return [].concat(toConsumableArray(this.querySelectorAll(PfeAccordionHeader.tag))); + } + }, { + key: '_allPanels', + value: function _allPanels() { + return [].concat(toConsumableArray(this.querySelectorAll(PfeAccordionPanel.tag))); + } + }, { + key: '_panelForHeader', + value: function _panelForHeader(header) { + var next = header.nextElementSibling; + + if (next.tagName.toLowerCase() !== PfeAccordionPanel.tag) { + console.error(PfeAccordion.tag + ': 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; + } + }]); + return PfeAccordion; + }(PFElement); + + var PfeAccordionHeader = function (_PFElement2) { + inherits(PfeAccordionHeader, _PFElement2); + createClass(PfeAccordionHeader, [{ + key: 'html', + get: function get$$1() { + return ''; + } + }, { + key: 'styleUrl', + get: function get$$1() { + return "pfe-accordion-header.scss"; + } + }, { + key: 'templateUrl', + get: function get$$1() { + return "pfe-accordion-header.html"; + } + }, { + key: 'pfeId', + get: function get$$1() { + return this.getAttribute("pfe-id"); + }, + set: function set$$1(id) { + if (!id) { + return; + } + + this.setAttribute("pfe-id", id); + } + }], [{ + key: 'tag', + get: function get$$1() { + return "pfe-accordion-header"; + } + }, { + key: 'observedAttributes', + get: function get$$1() { + return ["aria-expanded"]; + } + }]); + + function PfeAccordionHeader() { + classCallCheck(this, PfeAccordionHeader); + + var _this6 = possibleConstructorReturn(this, (PfeAccordionHeader.__proto__ || Object.getPrototypeOf(PfeAccordionHeader)).call(this, PfeAccordionHeader)); + + _this6._clickHandler = _this6._clickHandler.bind(_this6); + return _this6; + } + + createClass(PfeAccordionHeader, [{ + key: 'connectedCallback', + value: function connectedCallback() { + get(PfeAccordionHeader.prototype.__proto__ || Object.getPrototypeOf(PfeAccordionHeader.prototype), 'connectedCallback', this).call(this); + + if (!this.hasAttribute("role")) { + this.setAttribute("role", "header"); + } + + if (!this.pfeId) { + this.pfeId = PfeAccordionHeader.tag + '-' + generateId(); + } + + this.button = this.shadowRoot.querySelector("button"); + + var child = this.children[0]; + var isHeaderTag = false; + + if (child) { + switch (child.tagName) { + case "H1": + case "H2": + case "H3": + case "H4": + case "H5": + case "H6": + isHeaderTag = true; + break; + } + + var wrapperTag = document.createElement(child.tagName); + this.button.innerText = child.innerText; + + wrapperTag.appendChild(this.button); + this.shadowRoot.appendChild(wrapperTag); + } else { + this.button.innerText = this.textContent.trim(); + } + + if (!isHeaderTag) { + console.warn(PfeAccordionHeader.tag + ': The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)'); + } + + this.addEventListener("click", this._clickHandler); + } + }, { + key: 'disconnectedCallback', + value: function disconnectedCallback() { + this.removeEventListener("click", this._clickHandler); + } + }, { + key: '_clickHandler', + value: function _clickHandler(event) { + this.dispatchEvent(new CustomEvent(PfeAccordion.tag + ':change', { + detail: { expanded: !this.expanded }, + bubbles: true + })); + } + }, { + key: 'expanded', + get: function get$$1() { + return this.hasAttribute("aria-expanded"); + }, + set: function set$$1(val) { + val = Boolean(val); + + if (val) { + this.setAttribute("aria-expanded", true); + this.button.setAttribute("aria-expanded", true); + } else { + this.removeAttribute("aria-expanded"); + this.button.setAttribute("aria-expanded", false); + } + } + }]); + return PfeAccordionHeader; + }(PFElement); + + var PfeAccordionPanel = function (_PFElement3) { + inherits(PfeAccordionPanel, _PFElement3); + createClass(PfeAccordionPanel, [{ + key: 'html', + get: function get$$1() { + return '
\n
\n \n
\n
'; + } + }, { + key: 'styleUrl', + get: function get$$1() { + return "pfe-accordion-panel.scss"; + } + }, { + key: 'templateUrl', + get: function get$$1() { + return "pfe-accordion-panel.html"; + } + }, { + key: 'pfeId', + get: function get$$1() { + return this.getAttribute("pfe-id"); + }, + set: function set$$1(id) { + if (!id) { + return; + } + + this.setAttribute("pfe-id", id); + } + }], [{ + key: 'tag', + get: function get$$1() { + return "pfe-accordion-panel"; + } + }]); + + 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); + + if (!this.hasAttribute("role")) { + this.setAttribute("role", "region"); + } + + if (!this.pfeId) { + this.pfeId = PfeAccordionPanel.tag + '-' + generateId(); + } + } + }, { + key: 'expanded', + get: function get$$1() { + return this.hasAttribute("expanded"); + }, + set: function set$$1(val) { + var value = Boolean(val); + + if (value) { + this.setAttribute("expanded", ""); + } else { + this.removeAttribute("expanded"); + } + } + }]); + return PfeAccordionPanel; + }(PFElement); + + PFElement.create(PfeAccordionHeader); + PFElement.create(PfeAccordionPanel); + PFElement.create(PfeAccordion); + + return PfeAccordion; + +}))); +//# sourceMappingURL=pfe-accordion.umd.js.map diff --git a/elements/pfe-accordion/pfe-accordion.umd.js.map b/elements/pfe-accordion/pfe-accordion.umd.js.map new file mode 100644 index 0000000000..4ada0b3cd7 --- /dev/null +++ b/elements/pfe-accordion/pfe-accordion.umd.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-accordion.umd.js","sources":["pfe-accordion.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 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// 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\nfunction generateId() {\n return Math.random()\n .toString(36)\n .substr(2, 9);\n}\n\nclass PfeAccordion extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-accordion\";\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 observedAttributes() {\n return [\"theme\", \"color\", \"on\"];\n }\n\n static get cascadingAttributes() {\n return {\n color: \"pfe-accordion-header, pfe-accordion-panel\",\n on: \"pfe-accordion-header, pfe-accordion-panel\"\n };\n }\n\n constructor() {\n super(PfeAccordion);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this.setAttribute(\"role\", \"presentation\");\n this.setAttribute(\"defined\", \"\");\n\n this.addEventListener(`${PfeAccordion.tag}:change`, this._changeHandler);\n this.addEventListener(\"keydown\", this._keydownHandler);\n\n Promise.all([\n customElements.whenDefined(PfeAccordionHeader.tag),\n customElements.whenDefined(PfeAccordionPanel.tag)\n ]).then(this._linkPanels());\n }\n\n disconnectedCallback() {\n this.removeEventListener(`${PfeAccordion.tag}:change`, this._changeHandler);\n this.removeEventListener(\"keydown\", this._keydownHandler);\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n super.attributeChangedCallback(attr, oldVal, newVal);\n\n if (attr === \"color\") {\n const headers = this.querySelectorAll(PfeAccordionHeader.tag);\n\n if (newVal === \"striped\") {\n [...headers].forEach((header, index) => {\n const headerClass = index % 2 ? \"even\" : \"odd\";\n header.classList.add(headerClass);\n });\n } else {\n [...headers].forEach((header, index) => {\n header.classList.remove(\"even\", \"odd\");\n });\n }\n }\n }\n\n toggle(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) {\n return;\n }\n\n if (!header.expanded) {\n this._expandHeader(header);\n this._expandPanel(panel);\n } else {\n this._collapseHeader(header);\n this._collapsePanel(panel);\n }\n }\n\n expand(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) {\n return;\n }\n\n this._expandHeader(header);\n this._expandPanel(panel);\n }\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 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) {\n return;\n }\n\n this._collapseHeader(header);\n this._collapsePanel(panel);\n }\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 _linkPanels() {\n const headers = this._allHeaders();\n headers.forEach(header => {\n const panel = this._panelForHeader(header);\n\n header.setAttribute(\"aria-controls\", panel.pfeId);\n panel.setAttribute(\"aria-labelledby\", header.pfeId);\n });\n }\n\n _changeHandler(evt) {\n if (this.classList.contains(\"animating\")) {\n return;\n }\n\n const header = evt.target;\n const panel = evt.target.nextElementSibling;\n\n if (evt.detail.expanded) {\n this._expandHeader(header);\n this._expandPanel(panel);\n } else {\n this._collapseHeader(header);\n this._collapsePanel(panel);\n }\n }\n\n _toggle(header, panel) {}\n\n _expandHeader(header) {\n header.expanded = true;\n }\n\n _expandPanel(panel) {\n if (panel.expanded) {\n return;\n }\n\n panel.expanded = true;\n\n const height = panel.getBoundingClientRect().height;\n this._animate(panel, 0, height);\n }\n\n _collapseHeader(header) {\n header.expanded = false;\n }\n\n _collapsePanel(panel) {\n if (!panel.expanded) {\n return;\n }\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 panel.classList.add(\"animating\");\n panel.style.height = `${start}px`;\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n panel.style.height = `${end}px`;\n panel.classList.add(\"animating\");\n panel.addEventListener(\"transitionend\", this._transitionEndHandler);\n });\n });\n }\n\n _keydownHandler(evt) {\n const currentHeader = evt.target;\n\n if (!this._isHeader(currentHeader)) {\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 newHeader.shadowRoot.querySelector(\"button\").focus();\n }\n\n _transitionEndHandler(evt) {\n evt.target.style.height = \"\";\n evt.target.classList.remove(\"animating\");\n evt.target.removeEventListener(\"transitionend\", this._transitionEndHandler);\n }\n\n _allHeaders() {\n return [...this.querySelectorAll(PfeAccordionHeader.tag)];\n }\n\n _allPanels() {\n return [...this.querySelectorAll(PfeAccordionPanel.tag)];\n }\n\n _panelForHeader(header) {\n const next = header.nextElementSibling;\n\n if (next.tagName.toLowerCase() !== PfeAccordionPanel.tag) {\n console.error(\n `${PfeAccordion.tag}: Sibling element to a header needs to be a panel`\n );\n return;\n }\n\n return next;\n }\n\n _previousHeader() {\n const headers = this._allHeaders();\n let newIndex =\n 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 =\n 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\nclass PfeAccordionHeader extends PFElement {\n\n get html() {\n return ``;\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 get pfeId() {\n return this.getAttribute(\"pfe-id\");\n }\n\n set pfeId(id) {\n if (!id) {\n return;\n }\n\n this.setAttribute(\"pfe-id\", id);\n }\n\n static get observedAttributes() {\n return [\"aria-expanded\"];\n }\n\n constructor() {\n super(PfeAccordionHeader);\n this._clickHandler = this._clickHandler.bind(this);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.hasAttribute(\"role\")) {\n this.setAttribute(\"role\", \"header\");\n }\n\n if (!this.pfeId) {\n this.pfeId = `${PfeAccordionHeader.tag}-${generateId()}`;\n }\n\n this.button = this.shadowRoot.querySelector(\"button\");\n\n const child = this.children[0];\n let isHeaderTag = false;\n\n if (child) {\n switch (child.tagName) {\n case \"H1\":\n case \"H2\":\n case \"H3\":\n case \"H4\":\n case \"H5\":\n case \"H6\":\n isHeaderTag = true;\n break;\n }\n\n const wrapperTag = document.createElement(child.tagName);\n this.button.innerText = child.innerText;\n\n wrapperTag.appendChild(this.button);\n this.shadowRoot.appendChild(wrapperTag);\n } else {\n this.button.innerText = this.textContent.trim();\n }\n\n if (!isHeaderTag) {\n console.warn(\n `${\n PfeAccordionHeader.tag\n }: The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)`\n );\n }\n\n this.addEventListener(\"click\", this._clickHandler);\n }\n\n disconnectedCallback() {\n this.removeEventListener(\"click\", this._clickHandler);\n }\n\n get expanded() {\n return this.hasAttribute(\"aria-expanded\");\n }\n\n set expanded(val) {\n val = Boolean(val);\n\n if (val) {\n this.setAttribute(\"aria-expanded\", true);\n this.button.setAttribute(\"aria-expanded\", true);\n } else {\n this.removeAttribute(\"aria-expanded\");\n this.button.setAttribute(\"aria-expanded\", false);\n }\n }\n\n _clickHandler(event) {\n this.dispatchEvent(\n new CustomEvent(`${PfeAccordion.tag}:change`, {\n detail: { expanded: !this.expanded },\n bubbles: true\n })\n );\n }\n}\n\nclass PfeAccordionPanel extends PFElement {\n\n get html() {\n return `
\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 get pfeId() {\n return this.getAttribute(\"pfe-id\");\n }\n\n set pfeId(id) {\n if (!id) {\n return;\n }\n\n this.setAttribute(\"pfe-id\", id);\n }\n\n constructor() {\n super(PfeAccordionPanel);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.hasAttribute(\"role\")) {\n this.setAttribute(\"role\", \"region\");\n }\n\n if (!this.pfeId) {\n this.pfeId = `${PfeAccordionPanel.tag}-${generateId()}`;\n }\n }\n\n get expanded() {\n return this.hasAttribute(\"expanded\");\n }\n\n set expanded(val) {\n const value = Boolean(val);\n\n if (value) {\n this.setAttribute(\"expanded\", \"\");\n } else {\n this.removeAttribute(\"expanded\");\n }\n }\n}\n\nPFElement.create(PfeAccordionHeader);\nPFElement.create(PfeAccordionPanel);\nPFElement.create(PfeAccordion);\n\nexport default PfeAccordion;\n//# sourceMappingURL=pfe-accordion.js.map\n"],"names":["Array","prototype","findIndex","Object","defineProperty","value","predicate","TypeError","o","len","length","thisArg","arguments","k","kValue","call","generateId","Math","random","toString","substr","PfeAccordion","color","on","setAttribute","addEventListener","tag","_changeHandler","_keydownHandler","Promise","all","customElements","whenDefined","PfeAccordionHeader","PfeAccordionPanel","then","_linkPanels","removeEventListener","attr","oldVal","newVal","headers","querySelectorAll","forEach","header","index","headerClass","classList","add","remove","_allHeaders","panels","_allPanels","panel","expanded","_expandHeader","_expandPanel","_collapseHeader","_collapsePanel","_panelForHeader","pfeId","evt","contains","target","nextElementSibling","detail","height","getBoundingClientRect","_animate","start","end","style","requestAnimationFrame","_transitionEndHandler","currentHeader","_isHeader","newHeader","key","_nextHeader","_previousHeader","_firstHeader","_lastHeader","shadowRoot","querySelector","focus","next","tagName","toLowerCase","console","error","newIndex","document","activeElement","element","PFElement","getAttribute","id","_clickHandler","bind","hasAttribute","button","child","children","isHeaderTag","wrapperTag","createElement","innerText","appendChild","textContent","trim","warn","event","dispatchEvent","CustomEvent","bubbles","val","Boolean","removeAttribute","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-accordion/pfe-accordion.umd.min.js b/elements/pfe-accordion/pfe-accordion.umd.min.js new file mode 100644 index 0000000000..6ca404e5ab --- /dev/null +++ b/elements/pfe-accordion/pfe-accordion.umd.min.js @@ -0,0 +1,2 @@ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("../pfelement/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min"],t):e.PfeAccordion=t(e.PFElement)}(this,function(r){"use strict";r=r&&r.hasOwnProperty("default")?r.default:r;var n=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},i=function(){function o(e,t){for(var r=0;r>>0;if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var o=arguments[1],a=0;a:host{display:block;position:relative;overflow:hidden;margin:0;color:var(--pfe-broadcasted--color--text)}:host([on=dark]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link--on-dark, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff)}:host([on=light]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--focus, #003366)}"}},{key:"styleUrl",get:function(){return"pfe-accordion.scss"}},{key:"templateUrl",get:function(){return"pfe-accordion.html"}}],[{key:"tag",get:function(){return"pfe-accordion"}},{key:"observedAttributes",get:function(){return["theme","color","on"]}},{key:"cascadingAttributes",get:function(){return{color:"pfe-accordion-header, pfe-accordion-panel",on:"pfe-accordion-header, pfe-accordion-panel"}}}]),i(a,[{key:"connectedCallback",value:function(){c(a.prototype.__proto__||Object.getPrototypeOf(a.prototype),"connectedCallback",this).call(this),this.setAttribute("role","presentation"),this.setAttribute("defined",""),this.addEventListener(a.tag+":change",this._changeHandler),this.addEventListener("keydown",this._keydownHandler),Promise.all([customElements.whenDefined(f.tag),customElements.whenDefined(o.tag)]).then(this._linkPanels())}},{key:"disconnectedCallback",value:function(){this.removeEventListener(a.tag+":change",this._changeHandler),this.removeEventListener("keydown",this._keydownHandler)}},{key:"attributeChangedCallback",value:function(e,t,r){if(c(a.prototype.__proto__||Object.getPrototypeOf(a.prototype),"attributeChangedCallback",this).call(this,e,t,r),"color"===e){var o=this.querySelectorAll(f.tag);"striped"===r?[].concat(d(o)).forEach(function(e,t){var r=t%2?"even":"odd";e.classList.add(r)}):[].concat(d(o)).forEach(function(e,t){e.classList.remove("even","odd")})}}},{key:"toggle",value:function(e){var t=this._allHeaders(),r=this._allPanels(),o=t[e],a=r[e];o&&a&&(o.expanded?(this._collapseHeader(o),this._collapsePanel(a)):(this._expandHeader(o),this._expandPanel(a)))}},{key:"expand",value:function(e){var t=this._allHeaders(),r=this._allPanels(),o=t[e],a=r[e];o&&a&&(this._expandHeader(o),this._expandPanel(a))}},{key:"expandAll",value:function(){var t=this,e=this._allHeaders(),r=this._allPanels();e.forEach(function(e){return t._expandHeader(e)}),r.forEach(function(e){return t._expandPanel(e)})}},{key:"collapse",value:function(e){var t=this._allHeaders(),r=this._allPanels(),o=t[e],a=r[e];o&&a&&(this._collapseHeader(o),this._collapsePanel(a))}},{key:"collapseAll",value:function(){var t=this,e=this._allHeaders(),r=this._allPanels();e.forEach(function(e){return t._collapseHeader(e)}),r.forEach(function(e){return t._collapsePanel(e)})}},{key:"_linkPanels",value:function(){var r=this;this._allHeaders().forEach(function(e){var t=r._panelForHeader(e);e.setAttribute("aria-controls",t.pfeId),t.setAttribute("aria-labelledby",e.pfeId)})}},{key:"_changeHandler",value:function(e){if(!this.classList.contains("animating")){var t=e.target,r=e.target.nextElementSibling;e.detail.expanded?(this._expandHeader(t),this._expandPanel(r)):(this._collapseHeader(t),this._collapsePanel(r))}}},{key:"_toggle",value:function(e,t){}},{key:"_expandHeader",value:function(e){e.expanded=!0}},{key:"_expandPanel",value:function(e){if(!e.expanded){e.expanded=!0;var t=e.getBoundingClientRect().height;this._animate(e,0,t)}}},{key:"_collapseHeader",value:function(e){e.expanded=!1}},{key:"_collapsePanel",value:function(e){if(e.expanded){var t=e.getBoundingClientRect().height;e.expanded=!1,this._animate(e,t,0)}}},{key:"_animate",value:function(e,t,r){var o=this;e.classList.add("animating"),e.style.height=t+"px",requestAnimationFrame(function(){requestAnimationFrame(function(){e.style.height=r+"px",e.classList.add("animating"),e.addEventListener("transitionend",o._transitionEndHandler)})})}},{key:"_keydownHandler",value:function(e){var t=e.target;if(this._isHeader(t)){var r=void 0;switch(e.key){case"ArrowDown":case"Down":case"ArrowRight":case"Right":r=this._nextHeader();break;case"ArrowUp":case"Up":case"ArrowLeft":case"Left":r=this._previousHeader();break;case"Home":r=this._firstHeader();break;case"End":r=this._lastHeader();break;default:return}r.shadowRoot.querySelector("button").focus()}}},{key:"_transitionEndHandler",value:function(e){e.target.style.height="",e.target.classList.remove("animating"),e.target.removeEventListener("transitionend",this._transitionEndHandler)}},{key:"_allHeaders",value:function(){return[].concat(d(this.querySelectorAll(f.tag)))}},{key:"_allPanels",value:function(){return[].concat(d(this.querySelectorAll(o.tag)))}},{key:"_panelForHeader",value:function(e){var t=e.nextElementSibling;if(t.tagName.toLowerCase()===o.tag)return t;console.error(a.tag+": 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()===f.tag}}]),a}(),f=function(e){function o(){n(this,o);var e=l(this,(o.__proto__||Object.getPrototypeOf(o)).call(this,o));return e._clickHandler=e._clickHandler.bind(e),e}return s(o,r),i(o,[{key:"html",get:function(){return''}},{key:"styleUrl",get:function(){return"pfe-accordion-header.scss"}},{key:"templateUrl",get:function(){return"pfe-accordion-header.html"}},{key:"pfeId",get:function(){return this.getAttribute("pfe-id")},set:function(e){e&&this.setAttribute("pfe-id",e)}}],[{key:"tag",get:function(){return"pfe-accordion-header"}},{key:"observedAttributes",get:function(){return["aria-expanded"]}}]),i(o,[{key:"connectedCallback",value:function(){c(o.prototype.__proto__||Object.getPrototypeOf(o.prototype),"connectedCallback",this).call(this),this.hasAttribute("role")||this.setAttribute("role","header"),this.pfeId||(this.pfeId=o.tag+"-"+a()),this.button=this.shadowRoot.querySelector("button");var e=this.children[0],t=!1;if(e){switch(e.tagName){case"H1":case"H2":case"H3":case"H4":case"H5":case"H6":t=!0}var r=document.createElement(e.tagName);this.button.innerText=e.innerText,r.appendChild(this.button),this.shadowRoot.appendChild(r)}else this.button.innerText=this.textContent.trim();t||console.warn(o.tag+": The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)"),this.addEventListener("click",this._clickHandler)}},{key:"disconnectedCallback",value:function(){this.removeEventListener("click",this._clickHandler)}},{key:"_clickHandler",value:function(e){this.dispatchEvent(new CustomEvent(t.tag+":change",{detail:{expanded:!this.expanded},bubbles:!0}))}},{key:"expanded",get:function(){return this.hasAttribute("aria-expanded")},set:function(e){(e=Boolean(e))?(this.setAttribute("aria-expanded",!0),this.button.setAttribute("aria-expanded",!0)):(this.removeAttribute("aria-expanded"),this.button.setAttribute("aria-expanded",!1))}}]),o}(),o=function(e){function t(){return n(this,t),l(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,t))}return s(t,r),i(t,[{key:"html",get:function(){return'
\n
\n \n
\n
'}},{key:"styleUrl",get:function(){return"pfe-accordion-panel.scss"}},{key:"templateUrl",get:function(){return"pfe-accordion-panel.html"}},{key:"pfeId",get:function(){return this.getAttribute("pfe-id")},set:function(e){e&&this.setAttribute("pfe-id",e)}}],[{key:"tag",get:function(){return"pfe-accordion-panel"}}]),i(t,[{key:"connectedCallback",value:function(){c(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"connectedCallback",this).call(this),this.hasAttribute("role")||this.setAttribute("role","region"),this.pfeId||(this.pfeId=t.tag+"-"+a())}},{key:"expanded",get:function(){return this.hasAttribute("expanded")},set:function(e){Boolean(e)?this.setAttribute("expanded",""):this.removeAttribute("expanded")}}]),t}();return r.create(f),r.create(o),r.create(t),t}); +//# sourceMappingURL=pfe-accordion.umd.min.js.map diff --git a/elements/pfe-accordion/pfe-accordion.umd.min.js.map b/elements/pfe-accordion/pfe-accordion.umd.min.js.map new file mode 100644 index 0000000000..11c1aaae9d --- /dev/null +++ b/elements/pfe-accordion/pfe-accordion.umd.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-accordion.umd.min.js","sources":["pfe-accordion.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 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// 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\nfunction generateId() {\n return Math.random()\n .toString(36)\n .substr(2, 9);\n}\n\nclass PfeAccordion extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-accordion\";\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 observedAttributes() {\n return [\"theme\", \"color\", \"on\"];\n }\n\n static get cascadingAttributes() {\n return {\n color: \"pfe-accordion-header, pfe-accordion-panel\",\n on: \"pfe-accordion-header, pfe-accordion-panel\"\n };\n }\n\n constructor() {\n super(PfeAccordion);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this.setAttribute(\"role\", \"presentation\");\n this.setAttribute(\"defined\", \"\");\n\n this.addEventListener(`${PfeAccordion.tag}:change`, this._changeHandler);\n this.addEventListener(\"keydown\", this._keydownHandler);\n\n Promise.all([\n customElements.whenDefined(PfeAccordionHeader.tag),\n customElements.whenDefined(PfeAccordionPanel.tag)\n ]).then(this._linkPanels());\n }\n\n disconnectedCallback() {\n this.removeEventListener(`${PfeAccordion.tag}:change`, this._changeHandler);\n this.removeEventListener(\"keydown\", this._keydownHandler);\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n super.attributeChangedCallback(attr, oldVal, newVal);\n\n if (attr === \"color\") {\n const headers = this.querySelectorAll(PfeAccordionHeader.tag);\n\n if (newVal === \"striped\") {\n [...headers].forEach((header, index) => {\n const headerClass = index % 2 ? \"even\" : \"odd\";\n header.classList.add(headerClass);\n });\n } else {\n [...headers].forEach((header, index) => {\n header.classList.remove(\"even\", \"odd\");\n });\n }\n }\n }\n\n toggle(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) {\n return;\n }\n\n if (!header.expanded) {\n this._expandHeader(header);\n this._expandPanel(panel);\n } else {\n this._collapseHeader(header);\n this._collapsePanel(panel);\n }\n }\n\n expand(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) {\n return;\n }\n\n this._expandHeader(header);\n this._expandPanel(panel);\n }\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 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) {\n return;\n }\n\n this._collapseHeader(header);\n this._collapsePanel(panel);\n }\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 _linkPanels() {\n const headers = this._allHeaders();\n headers.forEach(header => {\n const panel = this._panelForHeader(header);\n\n header.setAttribute(\"aria-controls\", panel.pfeId);\n panel.setAttribute(\"aria-labelledby\", header.pfeId);\n });\n }\n\n _changeHandler(evt) {\n if (this.classList.contains(\"animating\")) {\n return;\n }\n\n const header = evt.target;\n const panel = evt.target.nextElementSibling;\n\n if (evt.detail.expanded) {\n this._expandHeader(header);\n this._expandPanel(panel);\n } else {\n this._collapseHeader(header);\n this._collapsePanel(panel);\n }\n }\n\n _toggle(header, panel) {}\n\n _expandHeader(header) {\n header.expanded = true;\n }\n\n _expandPanel(panel) {\n if (panel.expanded) {\n return;\n }\n\n panel.expanded = true;\n\n const height = panel.getBoundingClientRect().height;\n this._animate(panel, 0, height);\n }\n\n _collapseHeader(header) {\n header.expanded = false;\n }\n\n _collapsePanel(panel) {\n if (!panel.expanded) {\n return;\n }\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 panel.classList.add(\"animating\");\n panel.style.height = `${start}px`;\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n panel.style.height = `${end}px`;\n panel.classList.add(\"animating\");\n panel.addEventListener(\"transitionend\", this._transitionEndHandler);\n });\n });\n }\n\n _keydownHandler(evt) {\n const currentHeader = evt.target;\n\n if (!this._isHeader(currentHeader)) {\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 newHeader.shadowRoot.querySelector(\"button\").focus();\n }\n\n _transitionEndHandler(evt) {\n evt.target.style.height = \"\";\n evt.target.classList.remove(\"animating\");\n evt.target.removeEventListener(\"transitionend\", this._transitionEndHandler);\n }\n\n _allHeaders() {\n return [...this.querySelectorAll(PfeAccordionHeader.tag)];\n }\n\n _allPanels() {\n return [...this.querySelectorAll(PfeAccordionPanel.tag)];\n }\n\n _panelForHeader(header) {\n const next = header.nextElementSibling;\n\n if (next.tagName.toLowerCase() !== PfeAccordionPanel.tag) {\n console.error(\n `${PfeAccordion.tag}: Sibling element to a header needs to be a panel`\n );\n return;\n }\n\n return next;\n }\n\n _previousHeader() {\n const headers = this._allHeaders();\n let newIndex =\n 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 =\n 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\nclass PfeAccordionHeader extends PFElement {\n\n get html() {\n return ``;\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 get pfeId() {\n return this.getAttribute(\"pfe-id\");\n }\n\n set pfeId(id) {\n if (!id) {\n return;\n }\n\n this.setAttribute(\"pfe-id\", id);\n }\n\n static get observedAttributes() {\n return [\"aria-expanded\"];\n }\n\n constructor() {\n super(PfeAccordionHeader);\n this._clickHandler = this._clickHandler.bind(this);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.hasAttribute(\"role\")) {\n this.setAttribute(\"role\", \"header\");\n }\n\n if (!this.pfeId) {\n this.pfeId = `${PfeAccordionHeader.tag}-${generateId()}`;\n }\n\n this.button = this.shadowRoot.querySelector(\"button\");\n\n const child = this.children[0];\n let isHeaderTag = false;\n\n if (child) {\n switch (child.tagName) {\n case \"H1\":\n case \"H2\":\n case \"H3\":\n case \"H4\":\n case \"H5\":\n case \"H6\":\n isHeaderTag = true;\n break;\n }\n\n const wrapperTag = document.createElement(child.tagName);\n this.button.innerText = child.innerText;\n\n wrapperTag.appendChild(this.button);\n this.shadowRoot.appendChild(wrapperTag);\n } else {\n this.button.innerText = this.textContent.trim();\n }\n\n if (!isHeaderTag) {\n console.warn(\n `${\n PfeAccordionHeader.tag\n }: The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)`\n );\n }\n\n this.addEventListener(\"click\", this._clickHandler);\n }\n\n disconnectedCallback() {\n this.removeEventListener(\"click\", this._clickHandler);\n }\n\n get expanded() {\n return this.hasAttribute(\"aria-expanded\");\n }\n\n set expanded(val) {\n val = Boolean(val);\n\n if (val) {\n this.setAttribute(\"aria-expanded\", true);\n this.button.setAttribute(\"aria-expanded\", true);\n } else {\n this.removeAttribute(\"aria-expanded\");\n this.button.setAttribute(\"aria-expanded\", false);\n }\n }\n\n _clickHandler(event) {\n this.dispatchEvent(\n new CustomEvent(`${PfeAccordion.tag}:change`, {\n detail: { expanded: !this.expanded },\n bubbles: true\n })\n );\n }\n}\n\nclass PfeAccordionPanel extends PFElement {\n\n get html() {\n return `
\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 get pfeId() {\n return this.getAttribute(\"pfe-id\");\n }\n\n set pfeId(id) {\n if (!id) {\n return;\n }\n\n this.setAttribute(\"pfe-id\", id);\n }\n\n constructor() {\n super(PfeAccordionPanel);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.hasAttribute(\"role\")) {\n this.setAttribute(\"role\", \"region\");\n }\n\n if (!this.pfeId) {\n this.pfeId = `${PfeAccordionPanel.tag}-${generateId()}`;\n }\n }\n\n get expanded() {\n return this.hasAttribute(\"expanded\");\n }\n\n set expanded(val) {\n const value = Boolean(val);\n\n if (value) {\n this.setAttribute(\"expanded\", \"\");\n } else {\n this.removeAttribute(\"expanded\");\n }\n }\n}\n\nPFElement.create(PfeAccordionHeader);\nPFElement.create(PfeAccordionPanel);\nPFElement.create(PfeAccordion);\n\nexport default PfeAccordion;\n//# sourceMappingURL=pfe-accordion.js.map\n"],"names":["generateId","Math","random","toString","substr","Array","prototype","findIndex","defineProperty","predicate","this","TypeError","o","Object","len","length","thisArg","arguments","k","kValue","call","PfeAccordion","PFElement","setAttribute","addEventListener","tag","_changeHandler","_keydownHandler","all","customElements","whenDefined","PfeAccordionHeader","PfeAccordionPanel","then","_linkPanels","removeEventListener","attr","oldVal","newVal","headers","querySelectorAll","forEach","header","index","headerClass","classList","add","remove","_allHeaders","panels","_allPanels","panel","expanded","_collapseHeader","_collapsePanel","_expandHeader","_expandPanel","_this2","_this3","_this4","_panelForHeader","pfeId","evt","contains","target","nextElementSibling","detail","height","getBoundingClientRect","_animate","start","end","style","_this5","_transitionEndHandler","currentHeader","_isHeader","newHeader","key","_nextHeader","_previousHeader","_firstHeader","_lastHeader","shadowRoot","querySelector","focus","next","tagName","toLowerCase","error","newIndex","document","activeElement","element","_clickHandler","_this6","bind","getAttribute","id","hasAttribute","button","child","children","isHeaderTag","wrapperTag","createElement","innerText","appendChild","textContent","trim","warn","event","dispatchEvent","CustomEvent","val","Boolean","removeAttribute","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 31c80e97c7..7de6483e6e 100644 --- a/elements/pfe-autocomplete/package.json +++ b/elements/pfe-autocomplete/package.json @@ -4,7 +4,7 @@ "className": "PfeAutocomplete", "elementName": "pfe-autocomplete" }, - "version": "1.0.0-prerelease.11", + "version": "1.0.0-prerelease.13", "description": "Autocomplete element for PatternFly Elements", "keywords": [ "web-components", @@ -12,7 +12,7 @@ ], "repository": { "type": "git", - "url" : "github:patternfly/patternfly-elements", + "url": "github:patternfly/patternfly-elements", "directory": "elements/pfe-autocomplete" }, "publishConfig": { @@ -31,8 +31,8 @@ ], "license": "MIT", "dependencies": { - "@patternfly/pfe-sass": "^1.0.0-prerelease.11", - "@patternfly/pfelement": "^1.0.0-prerelease.11" + "@patternfly/pfe-sass": "^1.0.0-prerelease.13", + "@patternfly/pfelement": "^1.0.0-prerelease.13" }, "generator-pfelement-version": "0.5.5" } diff --git a/elements/pfe-autocomplete/pfe-autocomplete.css b/elements/pfe-autocomplete/pfe-autocomplete.css new file mode 100644 index 0000000000..8ffd7390dc --- /dev/null +++ b/elements/pfe-autocomplete/pfe-autocomplete.css @@ -0,0 +1,172 @@ +/* + * Copyright 2018 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. + */ +/* Palette of Border Colors */ +/* Palette of Feedback Colors */ +:host { + display: block; + position: relative; +} + +.input-box-wrapper { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} + +#input-box-wrapper ::slotted(input) { + width: 100%; + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.075) !important; + box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.075) !important; + padding-left: 10px; + padding-right: 30px; + border-radius: 0; + background-color: #fff; + border: 1px solid #dfdfdf; + border: 1px solid var(--pfe-theme--color--surface--border, #dfdfdf); + font-size: 16px; + /*1rem*/ + height: 40px; + -webkit-transition: border-color ease-in-out 0.15s,-webkit-box-shadow ease-in-out 0.15s; + transition: border-color ease-in-out 0.15s,-webkit-box-shadow ease-in-out 0.15s; + transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s; + transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s,-webkit-box-shadow ease-in-out 0.15s; + opacity: 1; + outline: 0; +} + +#input-box-wrapper ::slotted(input:disabled), +button:disabled { + cursor: not-allowed; + background-color: transparent; + color: #ccc; + opacity: 0.5; +} + +#input-box-wrapper button:focus, +#input-box-wrapper ::slotted(input:focus) { + border-color: #66afe9; + outline: 0; +} + +#input-box-wrapper ::slotted(input), +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: #cccccc; + background-color: transparent; + border: none; + position: absolute; + top: 0px; + bottom: 0px; + padding: 0px; + margin: 0px; + cursor: pointer; +} + +button.clear-search { + right: 30px; + width: 20px; + margin: 2px 1px; + background-color: #fff; +} + +button.clear-search svg { + width: 12px; + stroke: #ccc; +} + +button.clear-search:hover svg, +button.clear-search:focus svg { + opacity: 1; + stroke: #06c; +} + +button[disabled].clear-search:hover svg, +button[disabled].clear-search:focus svg { + stroke: #ccc; +} + +button.search-button { + right: 1px; + width: 30px; +} + +button.search-button svg { + fill: #06c; + width: 16px; +} + +button.search-button:hover svg, +button.search-button:focus svg { + fill: #004080; +} + +button.clear-search:hover { + color: #ccc; +} + +button.search-button:disabled svg { + fill: #ccc; +} + +.loading { + position: absolute; + width: 30px; + right: 52px; + top: 0px; + bottom: 0px; +} + +.loading svg { + width: 26px; + padding-top: 7px; +} + +/*# sourceMappingURL=pfe-autocomplete.css.map */ diff --git a/elements/pfe-autocomplete/pfe-autocomplete.css.map b/elements/pfe-autocomplete/pfe-autocomplete.css.map new file mode 100644 index 0000000000..770d196ba2 --- /dev/null +++ b/elements/pfe-autocomplete/pfe-autocomplete.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","pfe-autocomplete.css","../../pfe-sass/variables/_colors.scss","pfe-autocomplete.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;ECoBE;AC4GF,6BAAA;AAOA,+BAAA;ACtIA;EACE,cAAc;EACd,kBAAkB;AFuBpB;;AEpBA;EACE,kBAAkB;EAClB,oBAAY;EAAZ,qBAAY;EAAZ,oBAAY;EAAZ,aAAY;AFuBd;;AEpBA;EACE,kBAAkB;EAClB,UAAU;EACV,WAAW;EACX,UAAU;EACV,YAAY;EACZ,gBAAgB;EAChB,sBAAsB;EACtB,SAAS;AFuBX;;AEpBA;EACE,WAAW;EACX,mBAAO;EAAP,eAAO;MAAP,WAAO;UAAP,OAAO;EACP,mEAAwD;UAAxD,2DAAwD;EACxD,kBAAkB;EAClB,mBAAmB;EACnB,gBAAgB;EAChB,sBAAsB;EACtB,yBAAgD;EAAhD,mEAAgD;EAChD,eAAe;EAAE,OAAA;EACjB,YAAY;EACZ,uFAAuE;EAAvE,+EAAuE;EAAvE,uEAAuE;EAAvE,4GAAuE;EACvE,UAAU;EACV,UAAU;AFwBZ;;AErBA;;EAEE,mBAAmB;EACnB,6BAA6B;EAC7B,WAAW;EACX,YAAY;AFwBd;;AErBA;;EAEE,qBAAqB;EACrB,UAAU;AFwBZ;;AErBA;;EAEE,wBAAwB;AFwB1B;;AErBA;EACE,aAAa;AFwBf;;AErBA;;EAEE,wBAAwB;AFwB1B;;AErBA;EACE,cAAc;EACd,6BAA6B;EAC7B,YAAY;EACZ,kBAAkB;EAClB,QAAQ;EACR,WAAW;EACX,YAAY;EACZ,WAAW;EACX,eAAe;AFwBjB;;AErBA;EACE,WAAW;EACX,WAAW;EACX,eAAe;EACf,sBAAsB;AFwBxB;;AErBA;EACE,WAAW;EACX,YAAY;AFwBd;;AErBA;;EAEE,UAAU;EACV,YAAY;AFwBd;;AErBA;;EAEE,YAAa;AFwBf;;AErBA;EACE,UAAU;EACV,WAAW;AFwBb;;AErBA;EACE,UAAU;EACV,WAAW;AFwBb;;AErBA;;EAEE,aAAa;AFwBf;;AErBA;EACE,WAAW;AFwBb;;AErBA;EACE,UAAU;AFwBZ;;AErBA;EACE,kBAAkB;EAClB,WAAW;EACX,WAAW;EACX,QAAQ;EACR,WAAW;AFwBb;;AErBA;EACE,WAAW;EACX,gBAAgB;AFwBlB","file":"pfe-autocomplete.css","sourcesContent":["/*\n * Copyright 2018 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// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n","/*\n * Copyright 2018 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/* Palette of Border Colors */\n/* Palette of Feedback Colors */\n:host {\n display: block;\n position: relative;\n}\n\n.input-box-wrapper {\n position: relative;\n display: flex;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n#input-box-wrapper ::slotted(input) {\n width: 100%;\n flex: 1;\n box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.075) !important;\n padding-left: 10px;\n padding-right: 30px;\n border-radius: 0;\n background-color: #fff;\n border: 1px solid var(--pfe-theme--color--surface--border, #dfdfdf);\n font-size: 16px;\n /*1rem*/\n height: 40px;\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),\nbutton:disabled {\n cursor: not-allowed;\n background-color: transparent;\n color: #ccc;\n opacity: 0.5;\n}\n\n#input-box-wrapper button:focus,\n#input-box-wrapper ::slotted(input:focus) {\n border-color: #66afe9;\n outline: 0;\n}\n\n#input-box-wrapper ::slotted(input),\nbutton {\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: #cccccc;\n background-color: transparent;\n border: none;\n position: absolute;\n top: 0px;\n bottom: 0px;\n padding: 0px;\n margin: 0px;\n cursor: pointer;\n}\n\nbutton.clear-search {\n right: 30px;\n width: 20px;\n margin: 2px 1px;\n background-color: #fff;\n}\n\nbutton.clear-search svg {\n width: 12px;\n stroke: #ccc;\n}\n\nbutton.clear-search:hover svg,\nbutton.clear-search:focus svg {\n opacity: 1;\n stroke: #06c;\n}\n\nbutton[disabled].clear-search:hover svg,\nbutton[disabled].clear-search:focus svg {\n stroke: #ccc;\n}\n\nbutton.search-button {\n right: 1px;\n width: 30px;\n}\n\nbutton.search-button svg {\n fill: #06c;\n width: 16px;\n}\n\nbutton.search-button:hover svg,\nbutton.search-button:focus svg {\n fill: #004080;\n}\n\nbutton.clear-search:hover {\n color: #ccc;\n}\n\nbutton.search-button:disabled svg {\n fill: #ccc;\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","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text: $pfelements--gray-dark !default;\n$pfe-color--text--on-dark: $pfe-color--white !default;\n$pfe-color--text--on-saturated: $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link: #06c !default;\n$pfe-color--ui-link--visited: $pfelements--purple !default; // Was #7551a6\n$pfe-color--ui-link--hover: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-dark--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-saturated--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base: $pfelements--blue !default;\n$pfe-color--ui-base--hover: darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement: $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover: $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent: $pfelements--orange !default;\n$pfe-color--ui-accent--hover: darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text: $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover: $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest: $pfe-color--white !default;\n$pfe-color--surface--lightest--text: $pfe-color--text !default;\n$pfe-color--surface--lightest--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus: $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text: $pfe-color--text !default;\n$pfe-color--surface--lighter--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus: $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base: $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text: $pfe-color--text !default;\n$pfe-color--surface--base--link: #00538c !default; // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited: #7551a6 !default;\n$pfe-color--surface--base--link--hover: #00305b !default;\n$pfe-color--surface--base--link--focus: #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker: $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest: $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement: $pfelements--blue;\n$pfe-color--surface--complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent: $pfelements--orange;\n$pfe-color--surface--accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc\n$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7\n$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical: $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important: $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest: $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest: $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate: $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest: $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest: $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success: #2e7d32 !default;\n$pfe-color--feedback--success--lightest: $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest: #1b5e20 !default;\n\n$pfe-color--feedback--info: #0277bd !default;\n$pfe-color--feedback--info--lightest: $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest: #01579b !default;\n\n$pfe-color--feedback--default: $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest: $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest: $pfe-color--gray-800 !default;\n","@import \"../../pfe-sass/pfe-sass\";\n:host {\n display: block;\n position: relative;\n}\n\n.input-box-wrapper {\n position: relative;\n display:flex;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n#input-box-wrapper ::slotted(input) {\n width: 100%;\n flex: 1;\n box-shadow: inset 0 0px 0px rgba(0,0,0,0.075) !important;\n padding-left: 10px;\n padding-right: 30px;\n border-radius: 0;\n background-color: #fff;\n border: 1px solid #{pfe-color( surface--border)};\n font-size: 16px; /*1rem*/\n height: 40px;\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),\nbutton:disabled {\n cursor: not-allowed;\n background-color: transparent;\n color: #ccc;\n opacity: 0.5;\n}\n\n#input-box-wrapper button:focus,\n#input-box-wrapper ::slotted(input:focus) {\n border-color: #66afe9;\n outline: 0;\n}\n\n#input-box-wrapper ::slotted(input),\nbutton {\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: #cccccc;\n background-color: transparent;\n border: none;\n position: absolute;\n top: 0px;\n bottom: 0px;\n padding: 0px;\n margin: 0px;\n cursor: pointer;\n}\n\nbutton.clear-search {\n right: 30px;\n width: 20px;\n margin: 2px 1px;\n background-color: #fff;\n}\n\nbutton.clear-search svg {\n width: 12px;\n stroke: #ccc;\n}\n\nbutton.clear-search:hover svg,\nbutton.clear-search:focus svg {\n opacity: 1;\n stroke: #06c;\n}\n\nbutton[disabled].clear-search:hover svg,\nbutton[disabled].clear-search:focus svg {\n stroke: #ccc ;\n}\n\nbutton.search-button {\n right: 1px;\n width: 30px;\n}\n\nbutton.search-button svg {\n fill: #06c;\n width: 16px;\n}\n\nbutton.search-button:hover svg,\nbutton.search-button:focus svg {\n fill: #004080;\n}\n\nbutton.clear-search:hover {\n color: #ccc;\n}\n\nbutton.search-button:disabled svg {\n fill: #ccc;\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"]} \ No newline at end of file diff --git a/elements/pfe-autocomplete/pfe-autocomplete.css.min.map b/elements/pfe-autocomplete/pfe-autocomplete.css.min.map new file mode 100644 index 0000000000..e69de29bb2 diff --git a/elements/pfe-autocomplete/pfe-autocomplete.js b/elements/pfe-autocomplete/pfe-autocomplete.js new file mode 100644 index 0000000000..b55adc1e9a --- /dev/null +++ b/elements/pfe-autocomplete/pfe-autocomplete.js @@ -0,0 +1,592 @@ +import PFElement from '../pfelement/pfelement.js'; + +/* + * @license + * Copyright 2019 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 { + + get html() { + return `
+ + + + + + + +
+`; + } + static get tag() { + return "pfe-autocomplete"; + } + + get templateUrl() { + return "pfe-autocomplete.html"; + } + + get styleUrl() { + return "pfe-autocomplete.scss"; + } + + constructor() { + super(PfeAutocomplete); + } + + connectedCallback() { + super.connectedCallback(); + + this.loading = false; + this.debounce = this.debounce || 300; + + // input box + let slotNodes = this.shadowRoot.querySelector("slot").assignedNodes(); + let slotElems = slotNodes.filter(n => n.nodeType === Node.ELEMENT_NODE); + this._input = slotElems[0]; + this._input.addEventListener("input", this._inputChanged.bind(this)); + this._input.addEventListener("blur", this._closeDroplist.bind(this)); + this._input.setAttribute("role", "combobox"); + this._input.setAttribute("aria-label", "Search"); + this._input.setAttribute("aria-autocomplete", "both"); + this._input.setAttribute("aria-haspopup", "true"); + 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"); + + // 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)); + + 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("pfe-search-event", this._closeDroplist.bind(this)); + this.addEventListener( + "pfe-option-selected", + this._optionSelected.bind(this) + ); + } + + disconnectedCallback() { + this.removeEventListener("keyup", this._inputKeyUp); + this.removeEventListener("pfe-search-event", this._closeDroplist); + this.removeEventListener("pfe-option-selected", this._optionSelected); + this._input.removeEventListener("input", this._inputChanged); + this._input.removeEventListener("blur", this._closeDroplist); + this._clearBtn.removeEventListener("click", this._clear); + this._searchBtn.removeEventListener("click", this._search); + } + + static get observedAttributes() { + return ["init-value", "loading", "is-disabled"]; + } + + attributeChangedCallback(attr, oldVal, newVal) { + super.attributeChangedCallback(); + + let slotNodes = this.shadowRoot.querySelector("slot").assignedNodes(); + let slotElems = slotNodes.filter(n => n.nodeType === Node.ELEMENT_NODE); + let _input = slotElems[0]; + + let _clearBtn = this.shadowRoot.querySelector(".clear-search"); + let _searchBtn = this.shadowRoot.querySelector(".search-button"); + + switch (attr) { + case "loading": + if (!this.loading || _input.value === "") { + this.shadowRoot.querySelector(".loading").setAttribute("hidden", ""); + } else { + this.shadowRoot.querySelector(".loading").removeAttribute("hidden"); + } + break; + + case "init-value": + if (this["init-value"] !== newVal) { + // set inputbox and buttons in the inner component + _input.value = newVal; + if (newVal !== "" && !this.isDisabled) { + _searchBtn.removeAttribute("disabled"); + _clearBtn.removeAttribute("hidden"); + } else { + _searchBtn.setAttribute("disabled", ""); + _clearBtn.setAttribute("hidden", ""); + } + } + break; + + case "is-disabled": + if (this.isDisabled) { + _clearBtn.setAttribute("disabled", ""); + _searchBtn.setAttribute("disabled", ""); + _input.setAttribute("disabled", ""); + } else { + _clearBtn.removeAttribute("disabled"); + _searchBtn.removeAttribute("disabled"); + _input.removeAttribute("disabled"); + } + break; + } + } + + get selectedValue() { + return this.getAttribute("selected-value"); + } + + set selectedValue(val) { + this.setAttribute("selected-value", val); + } + + set isDisabled(value) { + if (value) { + this.setAttribute("is-disabled", ""); + } else { + this.removeAttribute("is-disabled"); + } + } + + get isDisabled() { + return this.hasAttribute("is-disabled"); + } + + set loading(value) { + const loading = Boolean(value); + if (loading) { + this.setAttribute("loading", ""); + } else { + this.removeAttribute("loading"); + } + } + + get loading() { + return this.hasAttribute("loading"); + } + + get initValue() { + return this.getAttribute("init-value"); + } + + set initValue(val) { + this.setAttribute("init-value", val); + } + + get debounce() { + return this.getAttribute("debounce"); + } + + set debounce(val) { + this.setAttribute("debounce", val); + } + + _inputChanged() { + if (this._input.value === "") { + this._searchBtn.setAttribute("disabled", ""); + this._clearBtn.setAttribute("hidden", ""); + + this._reset(); + return; + } else { + if (!this._input.hasAttribute("disabled")) { + this._searchBtn.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._input.focus(); + } + + _search() { + this._doSearch(this._input.value); + } + + _closeDroplist() { + this._dropdown.open = null; + this._dropdown.removeAttribute("active-index"); + } + + _openDroplist() { + this.activeIndex = null; + this._dropdown.setAttribute("open", true); + this._dropdown.setAttribute("active-index", null); + } + + _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.dispatchEvent( + new CustomEvent("pfe-search-event", { + detail: { searchValue: searchQuery }, + bubbles: true, + 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() { + debugger; + this._dropdown.activeIndex = null; + this._input.setAttribute("aria-activedescendant", ""); + this._dropdown.data = []; + this._closeDroplist(); + } + + _activeOption(activeIndex) { + if (activeIndex === null || activeIndex === "null") return; + return this._dropdown.shadowRoot.querySelector( + "li:nth-child(" + (parseInt(activeIndex, 10) + 1) + ")" + ).innerHTML; + } + + _inputKeyUp(e) { + let key = e.keyCode; + + 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; + + if (activeIndex < 0) { + activeIndex = optionsLength - 1; + } + + 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; + } + + this._input.value = this._activeOption(activeIndex); + } else if (key === KEYCODE.ENTER) { + 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-option-selected | Fires when an option is selected. + event.detailes.selectedValue contains the selected value. +*/ +class PfeSearchDroplist extends PFElement { + + get html() { + return `
+
+
    +
+
`; + } + static get tag() { + return "pfe-search-droplist"; + } + + get templateUrl() { + return "pfe-search-droplist.html"; + } + + get styleUrl() { + return "pfe-search-droplist.scss"; + } + + 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() { + this._ul.removeEventListener("mousedown", this._optionSelected); + } + + _optionSelected(e) { + if (e.target.tagName === "LI") { + this.dispatchEvent( + new CustomEvent("pfe-option-selected", { + detail: { optionValue: e.target.innerText }, + bubbles: true, + composed: true + }) + ); + } + } + + _renderOptions() { + this.reflow = ""; + + let options = this.data; + + this._ariaAnnounce.innerHTML = `There are ${ + options.length + } suggestions. Use the up and down arrows to browse.`; + this._ariaAnnounce.setAttribute("aria-live", "polite"); + + this._ul.innerHTML = `${options + .map((item, index) => { + return `
  • ${item}
    • `; + }) + .join("")}`; + } + + static get observedAttributes() { + return ["open", "reflow", "active-index"]; + } + + attributeChangedCallback(attr, oldVal, newVal) { + super.attributeChangedCallback(); + + if (this[name] !== newVal) { + this[name] = newVal; + } + + if (attr === "active-index" && oldVal !== newVal) { + this._activeIndexChanged(); + } + + if (attr === "reflow") { + this._renderOptions(); + } + } + + _activeIndexChanged() { + if ( + !this.data || + this.data.length === 0 || + this.activeIndex === null || + this.activeIndex === "null" + ) + return; + + // remove active class + if (this._ul.querySelector(".active")) { + this._ul.querySelector(".active").classList.remove("active"); + } + + // add active class to selected option + let activeOption = this._ul.querySelector( + "li:nth-child(" + (parseInt(this.activeIndex, 10) + 1) + ")" + ); + + activeOption.classList.add("active"); + + // 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; + } + + get open() { + return this.hasAttribute("open"); + } + + set open(val) { + val = Boolean(val); + + if (val) { + this.setAttribute("open", ""); + } else { + this.removeAttribute("open"); + } + } + + get activeIndex() { + return this.getAttribute("active-index"); + } + + set activeIndex(val) { + this.setAttribute("active-index", val); + } + + get reflow() { + return this.hasAttribute("reflow"); + } + + set reflow(val) { + val = Boolean(val); + + if (val) { + this.setAttribute("reflow", ""); + } else { + this.removeAttribute("reflow"); + } + } +} + +PFElement.create(PfeSearchDroplist); +PFElement.create(PfeAutocomplete); + +export default PfeAutocomplete; +//# sourceMappingURL=pfe-autocomplete.js.map diff --git a/elements/pfe-autocomplete/pfe-autocomplete.js.map b/elements/pfe-autocomplete/pfe-autocomplete.js.map new file mode 100644 index 0000000000..d474bc6374 --- /dev/null +++ b/elements/pfe-autocomplete/pfe-autocomplete.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-autocomplete.js","sources":["pfe-autocomplete.js"],"sourcesContent":["/*\n * @license\n * Copyright 2019 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/*\n * Copyright 2018 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\nimport PFElement from \"../pfelement/pfelement.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 get html() {\n return `
    \n \n\n \n\n \n\n \n
    \n`;\n }\n static get tag() {\n return \"pfe-autocomplete\";\n }\n\n get templateUrl() {\n return \"pfe-autocomplete.html\";\n }\n\n get styleUrl() {\n return \"pfe-autocomplete.scss\";\n }\n\n constructor() {\n super(PfeAutocomplete);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this.loading = false;\n this.debounce = this.debounce || 300;\n\n // input box\n let slotNodes = this.shadowRoot.querySelector(\"slot\").assignedNodes();\n let slotElems = slotNodes.filter(n => n.nodeType === Node.ELEMENT_NODE);\n this._input = slotElems[0];\n this._input.addEventListener(\"input\", this._inputChanged.bind(this));\n this._input.addEventListener(\"blur\", this._closeDroplist.bind(this));\n this._input.setAttribute(\"role\", \"combobox\");\n this._input.setAttribute(\"aria-label\", \"Search\");\n this._input.setAttribute(\"aria-autocomplete\", \"both\");\n this._input.setAttribute(\"aria-haspopup\", \"true\");\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 // 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 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(\"pfe-search-event\", this._closeDroplist.bind(this));\n this.addEventListener(\n \"pfe-option-selected\",\n this._optionSelected.bind(this)\n );\n }\n\n disconnectedCallback() {\n this.removeEventListener(\"keyup\", this._inputKeyUp);\n this.removeEventListener(\"pfe-search-event\", this._closeDroplist);\n this.removeEventListener(\"pfe-option-selected\", this._optionSelected);\n this._input.removeEventListener(\"input\", this._inputChanged);\n this._input.removeEventListener(\"blur\", this._closeDroplist);\n this._clearBtn.removeEventListener(\"click\", this._clear);\n this._searchBtn.removeEventListener(\"click\", this._search);\n }\n\n static get observedAttributes() {\n return [\"init-value\", \"loading\", \"is-disabled\"];\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n super.attributeChangedCallback();\n\n let slotNodes = this.shadowRoot.querySelector(\"slot\").assignedNodes();\n let slotElems = slotNodes.filter(n => n.nodeType === Node.ELEMENT_NODE);\n let _input = slotElems[0];\n\n let _clearBtn = this.shadowRoot.querySelector(\".clear-search\");\n let _searchBtn = this.shadowRoot.querySelector(\".search-button\");\n\n switch (attr) {\n case \"loading\":\n if (!this.loading || _input.value === \"\") {\n this.shadowRoot.querySelector(\".loading\").setAttribute(\"hidden\", \"\");\n } else {\n this.shadowRoot.querySelector(\".loading\").removeAttribute(\"hidden\");\n }\n break;\n\n case \"init-value\":\n if (this[\"init-value\"] !== newVal) {\n // set inputbox and buttons in the inner component\n _input.value = newVal;\n if (newVal !== \"\" && !this.isDisabled) {\n _searchBtn.removeAttribute(\"disabled\");\n _clearBtn.removeAttribute(\"hidden\");\n } else {\n _searchBtn.setAttribute(\"disabled\", \"\");\n _clearBtn.setAttribute(\"hidden\", \"\");\n }\n }\n break;\n\n case \"is-disabled\":\n if (this.isDisabled) {\n _clearBtn.setAttribute(\"disabled\", \"\");\n _searchBtn.setAttribute(\"disabled\", \"\");\n _input.setAttribute(\"disabled\", \"\");\n } else {\n _clearBtn.removeAttribute(\"disabled\");\n _searchBtn.removeAttribute(\"disabled\");\n _input.removeAttribute(\"disabled\");\n }\n break;\n }\n }\n\n get selectedValue() {\n return this.getAttribute(\"selected-value\");\n }\n\n set selectedValue(val) {\n this.setAttribute(\"selected-value\", val);\n }\n\n set isDisabled(value) {\n if (value) {\n this.setAttribute(\"is-disabled\", \"\");\n } else {\n this.removeAttribute(\"is-disabled\");\n }\n }\n\n get isDisabled() {\n return this.hasAttribute(\"is-disabled\");\n }\n\n set loading(value) {\n const loading = Boolean(value);\n if (loading) {\n this.setAttribute(\"loading\", \"\");\n } else {\n this.removeAttribute(\"loading\");\n }\n }\n\n get loading() {\n return this.hasAttribute(\"loading\");\n }\n\n get initValue() {\n return this.getAttribute(\"init-value\");\n }\n\n set initValue(val) {\n this.setAttribute(\"init-value\", val);\n }\n\n get debounce() {\n return this.getAttribute(\"debounce\");\n }\n\n set debounce(val) {\n this.setAttribute(\"debounce\", val);\n }\n\n _inputChanged() {\n if (this._input.value === \"\") {\n this._searchBtn.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 }\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._input.focus();\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 }\n\n _openDroplist() {\n this.activeIndex = null;\n this._dropdown.setAttribute(\"open\", true);\n this._dropdown.setAttribute(\"active-index\", null);\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.dispatchEvent(\n new CustomEvent(\"pfe-search-event\", {\n detail: { searchValue: searchQuery },\n bubbles: true,\n composed: true\n })\n );\n this._reset();\n this.selectedValue = searchQuery;\n }\n\n _sendAutocompleteRequest(input) {\n if (!this.autocompleteRequest) return;\n\n this.autocompleteRequest(\n { query: input },\n this._autocompleteCallback.bind(this)\n );\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 debugger;\n this._dropdown.activeIndex = null;\n this._input.setAttribute(\"aria-activedescendant\", \"\");\n this._dropdown.data = [];\n this._closeDroplist();\n }\n\n _activeOption(activeIndex) {\n if (activeIndex === null || activeIndex === \"null\") return;\n return this._dropdown.shadowRoot.querySelector(\n \"li:nth-child(\" + (parseInt(activeIndex, 10) + 1) + \")\"\n ).innerHTML;\n }\n\n _inputKeyUp(e) {\n let key = e.keyCode;\n\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 =\n activeIndex === null || activeIndex === \"null\"\n ? optionsLength\n : parseInt(activeIndex, 10);\n\n activeIndex -= 1;\n\n if (activeIndex < 0) {\n activeIndex = optionsLength - 1;\n }\n\n this._input.value = this._activeOption(activeIndex);\n } else if (key === KEYCODE.DOWN) {\n if (!this._dropdown.open) {\n return;\n }\n\n activeIndex =\n activeIndex === null || activeIndex === \"null\"\n ? -1\n : parseInt(activeIndex, 10);\n activeIndex += 1;\n\n if (activeIndex > optionsLength - 1) {\n activeIndex = 0;\n }\n\n this._input.value = this._activeOption(activeIndex);\n } else if (key === KEYCODE.ENTER) {\n let selectedValue = this._input.value;\n this._doSearch(selectedValue);\n return;\n }\n\n if (activeIndex !== null && activeIndex !== \"null\") {\n this._input.setAttribute(\n \"aria-activedescendant\",\n \"option-\" + activeIndex\n );\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-option-selected | Fires when an option is selected.\n event.detailes.selectedValue contains the selected value.\n*/\nclass PfeSearchDroplist extends PFElement {\n\n get html() {\n return `
    \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 constructor() {\n super(PfeSearchDroplist);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this._ariaAnnounce = this.shadowRoot.querySelector(\n \".suggestions-aria-help\"\n );\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 this._ul.removeEventListener(\"mousedown\", this._optionSelected);\n }\n\n _optionSelected(e) {\n if (e.target.tagName === \"LI\") {\n this.dispatchEvent(\n new CustomEvent(\"pfe-option-selected\", {\n detail: { optionValue: e.target.innerText },\n bubbles: true,\n composed: true\n })\n );\n }\n }\n\n _renderOptions() {\n this.reflow = \"\";\n\n let options = this.data;\n\n this._ariaAnnounce.innerHTML = `There are ${\n options.length\n } suggestions. Use the up and down arrows to browse.`;\n this._ariaAnnounce.setAttribute(\"aria-live\", \"polite\");\n\n this._ul.innerHTML = `${options\n .map((item, index) => {\n return `
  • ${item}
    • `;\n })\n .join(\"\")}`;\n }\n\n static get observedAttributes() {\n return [\"open\", \"reflow\", \"active-index\"];\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n super.attributeChangedCallback();\n\n if (this[name] !== newVal) {\n this[name] = newVal;\n }\n\n if (attr === \"active-index\" && oldVal !== newVal) {\n this._activeIndexChanged();\n }\n\n if (attr === \"reflow\") {\n this._renderOptions();\n }\n }\n\n _activeIndexChanged() {\n if (\n !this.data ||\n this.data.length === 0 ||\n this.activeIndex === null ||\n this.activeIndex === \"null\"\n )\n return;\n\n // remove active class\n if (this._ul.querySelector(\".active\")) {\n this._ul.querySelector(\".active\").classList.remove(\"active\");\n }\n\n // add active class to selected option\n let activeOption = this._ul.querySelector(\n \"li:nth-child(\" + (parseInt(this.activeIndex, 10) + 1) + \")\"\n );\n\n activeOption.classList.add(\"active\");\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(\n window.getComputedStyle(activeOption).getPropertyValue(\"margin-bottom\"),\n 10\n );\n ulWrapper.scrollTop =\n activeOption.offsetTop - ulWrapper.offsetHeight + activeOptionHeight;\n }\n\n get open() {\n return this.hasAttribute(\"open\");\n }\n\n set open(val) {\n val = Boolean(val);\n\n if (val) {\n this.setAttribute(\"open\", \"\");\n } else {\n this.removeAttribute(\"open\");\n }\n }\n\n get activeIndex() {\n return this.getAttribute(\"active-index\");\n }\n\n set activeIndex(val) {\n this.setAttribute(\"active-index\", val);\n }\n\n get reflow() {\n return this.hasAttribute(\"reflow\");\n }\n\n set reflow(val) {\n val = Boolean(val);\n\n if (val) {\n this.setAttribute(\"reflow\", \"\");\n } else {\n this.removeAttribute(\"reflow\");\n }\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/pfe-autocomplete.min.css b/elements/pfe-autocomplete/pfe-autocomplete.min.css new file mode 100644 index 0000000000..43e41f3ddf --- /dev/null +++ b/elements/pfe-autocomplete/pfe-autocomplete.min.css @@ -0,0 +1 @@ +:host{display:block;position:relative}.input-box-wrapper{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}#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 0 rgba(0,0,0,.075)!important;box-shadow:inset 0 0 0 rgba(0,0,0,.075)!important;padding-left:10px;padding-right:30px;border-radius:0;background-color:#fff;border:1px solid #dfdfdf;border:1px solid var(--pfe-theme--color--surface--border,#dfdfdf);font-size:16px;height:40px;-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),button:disabled{cursor:not-allowed;background-color:transparent;color:#ccc;opacity:.5}#input-box-wrapper ::slotted(input:focus),#input-box-wrapper button:focus{border-color:#66afe9;outline:0}#input-box-wrapper ::slotted(input),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:#ccc;background-color:transparent;border:none;position:absolute;top:0;bottom:0;padding:0;margin:0;cursor:pointer}button.clear-search{right:30px;width:20px;margin:2px 1px;background-color:#fff}button.clear-search svg{width:12px;stroke:#ccc}button.clear-search:focus svg,button.clear-search:hover svg{opacity:1;stroke:#06c}button[disabled].clear-search:focus svg,button[disabled].clear-search:hover svg{stroke:#ccc}button.search-button{right:1px;width:30px}button.search-button svg{fill:#06c;width:16px}button.search-button:focus svg,button.search-button:hover svg{fill:#004080}button.clear-search:hover{color:#ccc}button.search-button:disabled svg{fill:#ccc}.loading{position:absolute;width:30px;right:52px;top:0;bottom:0}.loading svg{width:26px;padding-top:7px} \ No newline at end of file diff --git a/elements/pfe-autocomplete/pfe-autocomplete.min.js b/elements/pfe-autocomplete/pfe-autocomplete.min.js new file mode 100644 index 0000000000..5af3b0dca2 --- /dev/null +++ b/elements/pfe-autocomplete/pfe-autocomplete.min.js @@ -0,0 +1,25 @@ +import t from"../pfelement/pfelement.min.js"; +/* + * @license + * Copyright 2019 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={ENTER:13,DOWN:40,UP:38,ESC:27};let i=!1;class s extends t{get html(){return'
    \n \n\n \n\n \n\n \n
    \n'}static get tag(){return"pfe-autocomplete"}get templateUrl(){return"pfe-autocomplete.html"}get styleUrl(){return"pfe-autocomplete.scss"}constructor(){super(s)}connectedCallback(){super.connectedCallback(),this.loading=!1,this.debounce=this.debounce||300;let t=this.shadowRoot.querySelector("slot").assignedNodes().filter(t=>t.nodeType===Node.ELEMENT_NODE);this._input=t[0],this._input.addEventListener("input",this._inputChanged.bind(this)),this._input.addEventListener("blur",this._closeDroplist.bind(this)),this._input.setAttribute("role","combobox"),this._input.setAttribute("aria-label","Search"),this._input.setAttribute("aria-autocomplete","both"),this._input.setAttribute("aria-haspopup","true"),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._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._dropdown=this.shadowRoot.querySelector("#dropdown"),this._dropdown.data=[],this.activeIndex=null,this.addEventListener("keyup",this._inputKeyUp.bind(this)),this.addEventListener("pfe-search-event",this._closeDroplist.bind(this)),this.addEventListener("pfe-option-selected",this._optionSelected.bind(this))}disconnectedCallback(){this.removeEventListener("keyup",this._inputKeyUp),this.removeEventListener("pfe-search-event",this._closeDroplist),this.removeEventListener("pfe-option-selected",this._optionSelected),this._input.removeEventListener("input",this._inputChanged),this._input.removeEventListener("blur",this._closeDroplist),this._clearBtn.removeEventListener("click",this._clear),this._searchBtn.removeEventListener("click",this._search)}static get observedAttributes(){return["init-value","loading","is-disabled"]}attributeChangedCallback(t,e,i){super.attributeChangedCallback();let s=this.shadowRoot.querySelector("slot").assignedNodes().filter(t=>t.nodeType===Node.ELEMENT_NODE)[0],o=this.shadowRoot.querySelector(".clear-search"),n=this.shadowRoot.querySelector(".search-button");switch(t){case"loading":this.loading&&""!==s.value?this.shadowRoot.querySelector(".loading").removeAttribute("hidden"):this.shadowRoot.querySelector(".loading").setAttribute("hidden","");break;case"init-value":this["init-value"]!==i&&(s.value=i,""===i||this.isDisabled?(n.setAttribute("disabled",""),o.setAttribute("hidden","")):(n.removeAttribute("disabled"),o.removeAttribute("hidden")));break;case"is-disabled":this.isDisabled?(o.setAttribute("disabled",""),n.setAttribute("disabled",""),s.setAttribute("disabled","")):(o.removeAttribute("disabled"),n.removeAttribute("disabled"),s.removeAttribute("disabled"))}}get selectedValue(){return this.getAttribute("selected-value")}set selectedValue(t){this.setAttribute("selected-value",t)}set isDisabled(t){t?this.setAttribute("is-disabled",""):this.removeAttribute("is-disabled")}get isDisabled(){return this.hasAttribute("is-disabled")}set loading(t){Boolean(t)?this.setAttribute("loading",""):this.removeAttribute("loading")}get loading(){return this.hasAttribute("loading")}get initValue(){return this.getAttribute("init-value")}set initValue(t){this.setAttribute("init-value",t)}get debounce(){return this.getAttribute("debounce")}set debounce(t){this.setAttribute("debounce",t)}_inputChanged(){if(""===this._input.value)return this._searchBtn.setAttribute("disabled",""),this._clearBtn.setAttribute("hidden",""),void this._reset();this._input.hasAttribute("disabled")||this._searchBtn.removeAttribute("disabled"),this._clearBtn.removeAttribute("hidden"),!1===i&&(i=!0,window.setTimeout(()=>{this._sendAutocompleteRequest(this._input.value),i=!1},this.debounce))}_clear(){this._input.value="",this._clearBtn.setAttribute("hidden",""),this._searchBtn.setAttribute("disabled",""),this._input.focus()}_search(){this._doSearch(this._input.value)}_closeDroplist(){this._dropdown.open=null,this._dropdown.removeAttribute("active-index")}_openDroplist(){this.activeIndex=null,this._dropdown.setAttribute("open",!0),this._dropdown.setAttribute("active-index",null)}_optionSelected(t){let e=t.detail.optionValue;this._input.value=e,this._doSearch(e)}_doSearch(t){this.dispatchEvent(new CustomEvent("pfe-search-event",{detail:{searchValue:t},bubbles:!0,composed:!0})),this._reset(),this.selectedValue=t}_sendAutocompleteRequest(t){this.autocompleteRequest&&this.autocompleteRequest({query:t},this._autocompleteCallback.bind(this))}_autocompleteCallback(t){this._dropdown.data=t,this._dropdown.reflow=!0,0!==t.length?this._openDroplist():this._closeDroplist()}_reset(){this._dropdown.activeIndex=null,this._input.setAttribute("aria-activedescendant",""),this._dropdown.data=[],this._closeDroplist()}_activeOption(t){if(null!==t&&"null"!==t)return this._dropdown.shadowRoot.querySelector("li:nth-child("+(parseInt(t,10)+1)+")").innerHTML}_inputKeyUp(t){let i=t.keyCode;if(0===this._dropdown.data.length&&i!==e.DOWN&&i!==e.UP&&i!==e.ENTER&&i!==e.ESC)return;let s=this._dropdown.activeIndex,o=this._dropdown.data.length;if(i==e.ESC)this._closeDroplist();else if(i===e.UP){if(!this._dropdown.open)return;s=null===s||"null"===s?o:parseInt(s,10),(s-=1)<0&&(s=o-1),this._input.value=this._activeOption(s)}else if(i===e.DOWN){if(!this._dropdown.open)return;s=null===s||"null"===s?-1:parseInt(s,10),(s+=1)>o-1&&(s=0),this._input.value=this._activeOption(s)}else if(i===e.ENTER){let t=this._input.value;return void this._doSearch(t)}null!==s&&"null"!==s?this._input.setAttribute("aria-activedescendant","option-"+s):this._input.setAttribute("aria-activedescendant",""),this.activeIndex=s,this._dropdown.activeIndex=s}}class o extends t{get html(){return'
    \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"}constructor(){super(o)}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(){this._ul.removeEventListener("mousedown",this._optionSelected)}_optionSelected(t){"LI"===t.target.tagName&&this.dispatchEvent(new CustomEvent("pfe-option-selected",{detail:{optionValue:t.target.innerText},bubbles:!0,composed:!0}))}_renderOptions(){this.reflow="";let t=this.data;this._ariaAnnounce.innerHTML=`There are ${t.length} suggestions. Use the up and down arrows to browse.`,this._ariaAnnounce.setAttribute("aria-live","polite"),this._ul.innerHTML=`${t.map((t,e)=>`
  • ${t}
    • `).join("")}`}static get observedAttributes(){return["open","reflow","active-index"]}attributeChangedCallback(t,e,i){super.attributeChangedCallback(),this[name]!==i&&(this[name]=i),"active-index"===t&&e!==i&&this._activeIndexChanged(),"reflow"===t&&this._renderOptions()}_activeIndexChanged(){if(!this.data||0===this.data.length||null===this.activeIndex||"null"===this.activeIndex)return;this._ul.querySelector(".active")&&this._ul.querySelector(".active").classList.remove("active");let t=this._ul.querySelector("li:nth-child("+(parseInt(this.activeIndex,10)+1)+")");t.classList.add("active");let e=this.shadowRoot.querySelector(".droplist"),i=t.offsetHeight;i+=parseInt(window.getComputedStyle(t).getPropertyValue("margin-bottom"),10),e.scrollTop=t.offsetTop-e.offsetHeight+i}get open(){return this.hasAttribute("open")}set open(t){(t=Boolean(t))?this.setAttribute("open",""):this.removeAttribute("open")}get activeIndex(){return this.getAttribute("active-index")}set activeIndex(t){this.setAttribute("active-index",t)}get reflow(){return this.hasAttribute("reflow")}set reflow(t){(t=Boolean(t))?this.setAttribute("reflow",""):this.removeAttribute("reflow")}}t.create(o),t.create(s);export default s; +//# sourceMappingURL=pfe-autocomplete.min.js.map diff --git a/elements/pfe-autocomplete/pfe-autocomplete.min.js.map b/elements/pfe-autocomplete/pfe-autocomplete.min.js.map new file mode 100644 index 0000000000..39d16db3de --- /dev/null +++ b/elements/pfe-autocomplete/pfe-autocomplete.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-autocomplete.min.js","sources":["pfe-autocomplete.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 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\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 get html() {\n return `
    \n \n\n \n\n \n\n \n
    \n`;\n }\n static get tag() {\n return \"pfe-autocomplete\";\n }\n\n get templateUrl() {\n return \"pfe-autocomplete.html\";\n }\n\n get styleUrl() {\n return \"pfe-autocomplete.scss\";\n }\n\n constructor() {\n super(PfeAutocomplete);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this.loading = false;\n this.debounce = this.debounce || 300;\n\n // input box\n let slotNodes = this.shadowRoot.querySelector(\"slot\").assignedNodes();\n let slotElems = slotNodes.filter(n => n.nodeType === Node.ELEMENT_NODE);\n this._input = slotElems[0];\n this._input.addEventListener(\"input\", this._inputChanged.bind(this));\n this._input.addEventListener(\"blur\", this._closeDroplist.bind(this));\n this._input.setAttribute(\"role\", \"combobox\");\n this._input.setAttribute(\"aria-label\", \"Search\");\n this._input.setAttribute(\"aria-autocomplete\", \"both\");\n this._input.setAttribute(\"aria-haspopup\", \"true\");\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 // 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 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(\"pfe-search-event\", this._closeDroplist.bind(this));\n this.addEventListener(\n \"pfe-option-selected\",\n this._optionSelected.bind(this)\n );\n }\n\n disconnectedCallback() {\n this.removeEventListener(\"keyup\", this._inputKeyUp);\n this.removeEventListener(\"pfe-search-event\", this._closeDroplist);\n this.removeEventListener(\"pfe-option-selected\", this._optionSelected);\n this._input.removeEventListener(\"input\", this._inputChanged);\n this._input.removeEventListener(\"blur\", this._closeDroplist);\n this._clearBtn.removeEventListener(\"click\", this._clear);\n this._searchBtn.removeEventListener(\"click\", this._search);\n }\n\n static get observedAttributes() {\n return [\"init-value\", \"loading\", \"is-disabled\"];\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n super.attributeChangedCallback();\n\n let slotNodes = this.shadowRoot.querySelector(\"slot\").assignedNodes();\n let slotElems = slotNodes.filter(n => n.nodeType === Node.ELEMENT_NODE);\n let _input = slotElems[0];\n\n let _clearBtn = this.shadowRoot.querySelector(\".clear-search\");\n let _searchBtn = this.shadowRoot.querySelector(\".search-button\");\n\n switch (attr) {\n case \"loading\":\n if (!this.loading || _input.value === \"\") {\n this.shadowRoot.querySelector(\".loading\").setAttribute(\"hidden\", \"\");\n } else {\n this.shadowRoot.querySelector(\".loading\").removeAttribute(\"hidden\");\n }\n break;\n\n case \"init-value\":\n if (this[\"init-value\"] !== newVal) {\n // set inputbox and buttons in the inner component\n _input.value = newVal;\n if (newVal !== \"\" && !this.isDisabled) {\n _searchBtn.removeAttribute(\"disabled\");\n _clearBtn.removeAttribute(\"hidden\");\n } else {\n _searchBtn.setAttribute(\"disabled\", \"\");\n _clearBtn.setAttribute(\"hidden\", \"\");\n }\n }\n break;\n\n case \"is-disabled\":\n if (this.isDisabled) {\n _clearBtn.setAttribute(\"disabled\", \"\");\n _searchBtn.setAttribute(\"disabled\", \"\");\n _input.setAttribute(\"disabled\", \"\");\n } else {\n _clearBtn.removeAttribute(\"disabled\");\n _searchBtn.removeAttribute(\"disabled\");\n _input.removeAttribute(\"disabled\");\n }\n break;\n }\n }\n\n get selectedValue() {\n return this.getAttribute(\"selected-value\");\n }\n\n set selectedValue(val) {\n this.setAttribute(\"selected-value\", val);\n }\n\n set isDisabled(value) {\n if (value) {\n this.setAttribute(\"is-disabled\", \"\");\n } else {\n this.removeAttribute(\"is-disabled\");\n }\n }\n\n get isDisabled() {\n return this.hasAttribute(\"is-disabled\");\n }\n\n set loading(value) {\n const loading = Boolean(value);\n if (loading) {\n this.setAttribute(\"loading\", \"\");\n } else {\n this.removeAttribute(\"loading\");\n }\n }\n\n get loading() {\n return this.hasAttribute(\"loading\");\n }\n\n get initValue() {\n return this.getAttribute(\"init-value\");\n }\n\n set initValue(val) {\n this.setAttribute(\"init-value\", val);\n }\n\n get debounce() {\n return this.getAttribute(\"debounce\");\n }\n\n set debounce(val) {\n this.setAttribute(\"debounce\", val);\n }\n\n _inputChanged() {\n if (this._input.value === \"\") {\n this._searchBtn.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 }\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._input.focus();\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 }\n\n _openDroplist() {\n this.activeIndex = null;\n this._dropdown.setAttribute(\"open\", true);\n this._dropdown.setAttribute(\"active-index\", null);\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.dispatchEvent(\n new CustomEvent(\"pfe-search-event\", {\n detail: { searchValue: searchQuery },\n bubbles: true,\n composed: true\n })\n );\n this._reset();\n this.selectedValue = searchQuery;\n }\n\n _sendAutocompleteRequest(input) {\n if (!this.autocompleteRequest) return;\n\n this.autocompleteRequest(\n { query: input },\n this._autocompleteCallback.bind(this)\n );\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 debugger;\n this._dropdown.activeIndex = null;\n this._input.setAttribute(\"aria-activedescendant\", \"\");\n this._dropdown.data = [];\n this._closeDroplist();\n }\n\n _activeOption(activeIndex) {\n if (activeIndex === null || activeIndex === \"null\") return;\n return this._dropdown.shadowRoot.querySelector(\n \"li:nth-child(\" + (parseInt(activeIndex, 10) + 1) + \")\"\n ).innerHTML;\n }\n\n _inputKeyUp(e) {\n let key = e.keyCode;\n\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 =\n activeIndex === null || activeIndex === \"null\"\n ? optionsLength\n : parseInt(activeIndex, 10);\n\n activeIndex -= 1;\n\n if (activeIndex < 0) {\n activeIndex = optionsLength - 1;\n }\n\n this._input.value = this._activeOption(activeIndex);\n } else if (key === KEYCODE.DOWN) {\n if (!this._dropdown.open) {\n return;\n }\n\n activeIndex =\n activeIndex === null || activeIndex === \"null\"\n ? -1\n : parseInt(activeIndex, 10);\n activeIndex += 1;\n\n if (activeIndex > optionsLength - 1) {\n activeIndex = 0;\n }\n\n this._input.value = this._activeOption(activeIndex);\n } else if (key === KEYCODE.ENTER) {\n let selectedValue = this._input.value;\n this._doSearch(selectedValue);\n return;\n }\n\n if (activeIndex !== null && activeIndex !== \"null\") {\n this._input.setAttribute(\n \"aria-activedescendant\",\n \"option-\" + activeIndex\n );\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-option-selected | Fires when an option is selected.\n event.detailes.selectedValue contains the selected value.\n*/\nclass PfeSearchDroplist extends PFElement {\n\n get html() {\n return `
    \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 constructor() {\n super(PfeSearchDroplist);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this._ariaAnnounce = this.shadowRoot.querySelector(\n \".suggestions-aria-help\"\n );\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 this._ul.removeEventListener(\"mousedown\", this._optionSelected);\n }\n\n _optionSelected(e) {\n if (e.target.tagName === \"LI\") {\n this.dispatchEvent(\n new CustomEvent(\"pfe-option-selected\", {\n detail: { optionValue: e.target.innerText },\n bubbles: true,\n composed: true\n })\n );\n }\n }\n\n _renderOptions() {\n this.reflow = \"\";\n\n let options = this.data;\n\n this._ariaAnnounce.innerHTML = `There are ${\n options.length\n } suggestions. Use the up and down arrows to browse.`;\n this._ariaAnnounce.setAttribute(\"aria-live\", \"polite\");\n\n this._ul.innerHTML = `${options\n .map((item, index) => {\n return `
  • ${item}
    • `;\n })\n .join(\"\")}`;\n }\n\n static get observedAttributes() {\n return [\"open\", \"reflow\", \"active-index\"];\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n super.attributeChangedCallback();\n\n if (this[name] !== newVal) {\n this[name] = newVal;\n }\n\n if (attr === \"active-index\" && oldVal !== newVal) {\n this._activeIndexChanged();\n }\n\n if (attr === \"reflow\") {\n this._renderOptions();\n }\n }\n\n _activeIndexChanged() {\n if (\n !this.data ||\n this.data.length === 0 ||\n this.activeIndex === null ||\n this.activeIndex === \"null\"\n )\n return;\n\n // remove active class\n if (this._ul.querySelector(\".active\")) {\n this._ul.querySelector(\".active\").classList.remove(\"active\");\n }\n\n // add active class to selected option\n let activeOption = this._ul.querySelector(\n \"li:nth-child(\" + (parseInt(this.activeIndex, 10) + 1) + \")\"\n );\n\n activeOption.classList.add(\"active\");\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(\n window.getComputedStyle(activeOption).getPropertyValue(\"margin-bottom\"),\n 10\n );\n ulWrapper.scrollTop =\n activeOption.offsetTop - ulWrapper.offsetHeight + activeOptionHeight;\n }\n\n get open() {\n return this.hasAttribute(\"open\");\n }\n\n set open(val) {\n val = Boolean(val);\n\n if (val) {\n this.setAttribute(\"open\", \"\");\n } else {\n this.removeAttribute(\"open\");\n }\n }\n\n get activeIndex() {\n return this.getAttribute(\"active-index\");\n }\n\n set activeIndex(val) {\n this.setAttribute(\"active-index\", val);\n }\n\n get reflow() {\n return this.hasAttribute(\"reflow\");\n }\n\n set reflow(val) {\n val = Boolean(val);\n\n if (val) {\n this.setAttribute(\"reflow\", \"\");\n } else {\n this.removeAttribute(\"reflow\");\n }\n }\n}\n\nPFElement.create(PfeSearchDroplist);\nPFElement.create(PfeAutocomplete);\n\nexport default PfeAutocomplete;\n//# sourceMappingURL=pfe-autocomplete.js.map\n"],"names":["KEYCODE","ENTER","DOWN","UP","ESC","throttle","PfeAutocomplete","PFElement","html","tag","templateUrl","styleUrl","[object Object]","super","connectedCallback","this","loading","debounce","slotElems","shadowRoot","querySelector","assignedNodes","filter","n","nodeType","Node","ELEMENT_NODE","_input","addEventListener","_inputChanged","bind","_closeDroplist","setAttribute","_clearBtn","_clear","_searchBtn","_search","_dropdown","data","activeIndex","_inputKeyUp","_optionSelected","removeEventListener","observedAttributes","attr","oldVal","newVal","attributeChangedCallback","value","removeAttribute","isDisabled","selectedValue","getAttribute","val","hasAttribute","Boolean","initValue","_reset","window","setTimeout","_sendAutocompleteRequest","focus","_doSearch","open","e","detail","optionValue","searchQuery","dispatchEvent","CustomEvent","searchValue","bubbles","composed","input","autocompleteRequest","query","_autocompleteCallback","response","reflow","length","_openDroplist","parseInt","innerHTML","key","keyCode","optionsLength","_activeOption","PfeSearchDroplist","_ariaAnnounce","_ul","target","tagName","innerText","options","map","item","index","join","name","_activeIndexChanged","_renderOptions","classList","remove","activeOption","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/pfe-autocomplete.umd.js b/elements/pfe-autocomplete/pfe-autocomplete.umd.js new file mode 100644 index 0000000000..4097f208ab --- /dev/null +++ b/elements/pfe-autocomplete/pfe-autocomplete.umd.js @@ -0,0 +1,638 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('../pfelement/pfelement.umd')) : + typeof define === 'function' && define.amd ? define(['../pfelement/pfelement.umd'], factory) : + (global.PfeAutocomplete = factory(global.PFElement)); +}(this, (function (PFElement) { 'use strict'; + + PFElement = PFElement && PFElement.hasOwnProperty('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; + }; + + /* + * @license + * Copyright 2019 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", + get: function get$$1() { + return "
    \n \n\n \n\n \n\n \n
    \n"; + } + }, { + key: "templateUrl", + get: function get$$1() { + return "pfe-autocomplete.html"; + } + }, { + key: "styleUrl", + get: function get$$1() { + return "pfe-autocomplete.scss"; + } + }], [{ + key: "tag", + get: function get$$1() { + return "pfe-autocomplete"; + } + }]); + + function PfeAutocomplete() { + classCallCheck(this, PfeAutocomplete); + return possibleConstructorReturn(this, (PfeAutocomplete.__proto__ || Object.getPrototypeOf(PfeAutocomplete)).call(this, PfeAutocomplete)); + } + + createClass(PfeAutocomplete, [{ + key: "connectedCallback", + value: function connectedCallback() { + get(PfeAutocomplete.prototype.__proto__ || Object.getPrototypeOf(PfeAutocomplete.prototype), "connectedCallback", this).call(this); + + this.loading = false; + this.debounce = this.debounce || 300; + + // input box + var slotNodes = this.shadowRoot.querySelector("slot").assignedNodes(); + var slotElems = slotNodes.filter(function (n) { + return n.nodeType === Node.ELEMENT_NODE; + }); + this._input = slotElems[0]; + this._input.addEventListener("input", this._inputChanged.bind(this)); + this._input.addEventListener("blur", this._closeDroplist.bind(this)); + this._input.setAttribute("role", "combobox"); + this._input.setAttribute("aria-label", "Search"); + this._input.setAttribute("aria-autocomplete", "both"); + this._input.setAttribute("aria-haspopup", "true"); + 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"); + + // 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)); + + 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("pfe-search-event", this._closeDroplist.bind(this)); + this.addEventListener("pfe-option-selected", this._optionSelected.bind(this)); + } + }, { + key: "disconnectedCallback", + value: function disconnectedCallback() { + this.removeEventListener("keyup", this._inputKeyUp); + this.removeEventListener("pfe-search-event", this._closeDroplist); + this.removeEventListener("pfe-option-selected", this._optionSelected); + this._input.removeEventListener("input", this._inputChanged); + this._input.removeEventListener("blur", this._closeDroplist); + this._clearBtn.removeEventListener("click", this._clear); + this._searchBtn.removeEventListener("click", this._search); + } + }, { + key: "attributeChangedCallback", + value: function attributeChangedCallback(attr, oldVal, newVal) { + get(PfeAutocomplete.prototype.__proto__ || Object.getPrototypeOf(PfeAutocomplete.prototype), "attributeChangedCallback", this).call(this); + + var slotNodes = this.shadowRoot.querySelector("slot").assignedNodes(); + var slotElems = slotNodes.filter(function (n) { + return n.nodeType === Node.ELEMENT_NODE; + }); + var _input = slotElems[0]; + + var _clearBtn = this.shadowRoot.querySelector(".clear-search"); + var _searchBtn = this.shadowRoot.querySelector(".search-button"); + + switch (attr) { + case "loading": + if (!this.loading || _input.value === "") { + this.shadowRoot.querySelector(".loading").setAttribute("hidden", ""); + } else { + this.shadowRoot.querySelector(".loading").removeAttribute("hidden"); + } + break; + + case "init-value": + if (this["init-value"] !== newVal) { + // set inputbox and buttons in the inner component + _input.value = newVal; + if (newVal !== "" && !this.isDisabled) { + _searchBtn.removeAttribute("disabled"); + _clearBtn.removeAttribute("hidden"); + } else { + _searchBtn.setAttribute("disabled", ""); + _clearBtn.setAttribute("hidden", ""); + } + } + break; + + case "is-disabled": + if (this.isDisabled) { + _clearBtn.setAttribute("disabled", ""); + _searchBtn.setAttribute("disabled", ""); + _input.setAttribute("disabled", ""); + } else { + _clearBtn.removeAttribute("disabled"); + _searchBtn.removeAttribute("disabled"); + _input.removeAttribute("disabled"); + } + break; + } + } + }, { + key: "_inputChanged", + value: function _inputChanged() { + var _this2 = this; + + if (this._input.value === "") { + this._searchBtn.setAttribute("disabled", ""); + this._clearBtn.setAttribute("hidden", ""); + + this._reset(); + return; + } else { + if (!this._input.hasAttribute("disabled")) { + this._searchBtn.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._input.focus(); + } + }, { + key: "_search", + value: function _search() { + this._doSearch(this._input.value); + } + }, { + key: "_closeDroplist", + value: function _closeDroplist() { + this._dropdown.open = null; + this._dropdown.removeAttribute("active-index"); + } + }, { + key: "_openDroplist", + value: function _openDroplist() { + this.activeIndex = null; + this._dropdown.setAttribute("open", true); + this._dropdown.setAttribute("active-index", null); + } + }, { + 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.dispatchEvent(new CustomEvent("pfe-search-event", { + detail: { searchValue: searchQuery }, + bubbles: true, + 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() { + debugger; + this._dropdown.activeIndex = null; + this._input.setAttribute("aria-activedescendant", ""); + this._dropdown.data = []; + this._closeDroplist(); + } + }, { + 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; + } + }, { + key: "_inputKeyUp", + value: function _inputKeyUp(e) { + var key = e.keyCode; + + 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; + + if (activeIndex < 0) { + activeIndex = optionsLength - 1; + } + + 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; + } + + this._input.value = this._activeOption(activeIndex); + } else if (key === KEYCODE.ENTER) { + 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; + } + }, { + key: "selectedValue", + get: function get$$1() { + return this.getAttribute("selected-value"); + }, + set: function set$$1(val) { + this.setAttribute("selected-value", val); + } + }, { + key: "isDisabled", + set: function set$$1(value) { + if (value) { + this.setAttribute("is-disabled", ""); + } else { + this.removeAttribute("is-disabled"); + } + }, + get: function get$$1() { + return this.hasAttribute("is-disabled"); + } + }, { + key: "loading", + set: function set$$1(value) { + var loading = Boolean(value); + if (loading) { + this.setAttribute("loading", ""); + } else { + this.removeAttribute("loading"); + } + }, + get: function get$$1() { + return this.hasAttribute("loading"); + } + }, { + key: "initValue", + get: function get$$1() { + return this.getAttribute("init-value"); + }, + set: function set$$1(val) { + this.setAttribute("init-value", val); + } + }, { + key: "debounce", + get: function get$$1() { + return this.getAttribute("debounce"); + }, + set: function set$$1(val) { + this.setAttribute("debounce", val); + } + }], [{ + key: "observedAttributes", + get: function get$$1() { + return ["init-value", "loading", "is-disabled"]; + } + }]); + 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-option-selected | Fires when an option is selected. + event.detailes.selectedValue contains the selected value. + */ + + + var PfeSearchDroplist = function (_PFElement2) { + inherits(PfeSearchDroplist, _PFElement2); + createClass(PfeSearchDroplist, [{ + key: "html", + get: function get$$1() { + return "
    \n
    \n
      \n
    \n
    "; + } + }, { + key: "templateUrl", + get: function get$$1() { + return "pfe-search-droplist.html"; + } + }, { + key: "styleUrl", + get: function get$$1() { + return "pfe-search-droplist.scss"; + } + }], [{ + key: "tag", + get: function get$$1() { + return "pfe-search-droplist"; + } + }]); + + 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() { + this._ul.removeEventListener("mousedown", this._optionSelected); + } + }, { + key: "_optionSelected", + value: function _optionSelected(e) { + if (e.target.tagName === "LI") { + this.dispatchEvent(new CustomEvent("pfe-option-selected", { + detail: { optionValue: e.target.innerText }, + bubbles: true, + composed: true + })); + } + } + }, { + key: "_renderOptions", + value: function _renderOptions() { + this.reflow = ""; + + var options = this.data; + + this._ariaAnnounce.innerHTML = "There are " + options.length + " suggestions. Use the up and down arrows to browse."; + this._ariaAnnounce.setAttribute("aria-live", "polite"); + + this._ul.innerHTML = "" + options.map(function (item, index) { + return "
  • " + item + "
    • "; + }).join(""); + } + }, { + key: "attributeChangedCallback", + value: function attributeChangedCallback(attr, oldVal, newVal) { + get(PfeSearchDroplist.prototype.__proto__ || Object.getPrototypeOf(PfeSearchDroplist.prototype), "attributeChangedCallback", this).call(this); + + if (this[name] !== newVal) { + this[name] = newVal; + } + + if (attr === "active-index" && oldVal !== newVal) { + this._activeIndexChanged(); + } + + if (attr === "reflow") { + this._renderOptions(); + } + } + }, { + key: "_activeIndexChanged", + value: function _activeIndexChanged() { + if (!this.data || this.data.length === 0 || this.activeIndex === null || this.activeIndex === "null") return; + + // remove active class + if (this._ul.querySelector(".active")) { + this._ul.querySelector(".active").classList.remove("active"); + } + + // add active class to selected option + var activeOption = this._ul.querySelector("li:nth-child(" + (parseInt(this.activeIndex, 10) + 1) + ")"); + + activeOption.classList.add("active"); + + // 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; + } + }, { + key: "open", + get: function get$$1() { + return this.hasAttribute("open"); + }, + set: function set$$1(val) { + val = Boolean(val); + + if (val) { + this.setAttribute("open", ""); + } else { + this.removeAttribute("open"); + } + } + }, { + key: "activeIndex", + get: function get$$1() { + return this.getAttribute("active-index"); + }, + set: function set$$1(val) { + this.setAttribute("active-index", val); + } + }, { + key: "reflow", + get: function get$$1() { + return this.hasAttribute("reflow"); + }, + set: function set$$1(val) { + val = Boolean(val); + + if (val) { + this.setAttribute("reflow", ""); + } else { + this.removeAttribute("reflow"); + } + } + }], [{ + key: "observedAttributes", + get: function get$$1() { + return ["open", "reflow", "active-index"]; + } + }]); + return PfeSearchDroplist; + }(PFElement); + + PFElement.create(PfeSearchDroplist); + PFElement.create(PfeAutocomplete); + + return PfeAutocomplete; + +}))); +//# sourceMappingURL=pfe-autocomplete.umd.js.map diff --git a/elements/pfe-autocomplete/pfe-autocomplete.umd.js.map b/elements/pfe-autocomplete/pfe-autocomplete.umd.js.map new file mode 100644 index 0000000000..e5866f6f76 --- /dev/null +++ b/elements/pfe-autocomplete/pfe-autocomplete.umd.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-autocomplete.umd.js","sources":["pfe-autocomplete.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 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\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 get html() {\n return `
    \n \n\n \n\n \n\n \n
    \n`;\n }\n static get tag() {\n return \"pfe-autocomplete\";\n }\n\n get templateUrl() {\n return \"pfe-autocomplete.html\";\n }\n\n get styleUrl() {\n return \"pfe-autocomplete.scss\";\n }\n\n constructor() {\n super(PfeAutocomplete);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this.loading = false;\n this.debounce = this.debounce || 300;\n\n // input box\n let slotNodes = this.shadowRoot.querySelector(\"slot\").assignedNodes();\n let slotElems = slotNodes.filter(n => n.nodeType === Node.ELEMENT_NODE);\n this._input = slotElems[0];\n this._input.addEventListener(\"input\", this._inputChanged.bind(this));\n this._input.addEventListener(\"blur\", this._closeDroplist.bind(this));\n this._input.setAttribute(\"role\", \"combobox\");\n this._input.setAttribute(\"aria-label\", \"Search\");\n this._input.setAttribute(\"aria-autocomplete\", \"both\");\n this._input.setAttribute(\"aria-haspopup\", \"true\");\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 // 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 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(\"pfe-search-event\", this._closeDroplist.bind(this));\n this.addEventListener(\n \"pfe-option-selected\",\n this._optionSelected.bind(this)\n );\n }\n\n disconnectedCallback() {\n this.removeEventListener(\"keyup\", this._inputKeyUp);\n this.removeEventListener(\"pfe-search-event\", this._closeDroplist);\n this.removeEventListener(\"pfe-option-selected\", this._optionSelected);\n this._input.removeEventListener(\"input\", this._inputChanged);\n this._input.removeEventListener(\"blur\", this._closeDroplist);\n this._clearBtn.removeEventListener(\"click\", this._clear);\n this._searchBtn.removeEventListener(\"click\", this._search);\n }\n\n static get observedAttributes() {\n return [\"init-value\", \"loading\", \"is-disabled\"];\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n super.attributeChangedCallback();\n\n let slotNodes = this.shadowRoot.querySelector(\"slot\").assignedNodes();\n let slotElems = slotNodes.filter(n => n.nodeType === Node.ELEMENT_NODE);\n let _input = slotElems[0];\n\n let _clearBtn = this.shadowRoot.querySelector(\".clear-search\");\n let _searchBtn = this.shadowRoot.querySelector(\".search-button\");\n\n switch (attr) {\n case \"loading\":\n if (!this.loading || _input.value === \"\") {\n this.shadowRoot.querySelector(\".loading\").setAttribute(\"hidden\", \"\");\n } else {\n this.shadowRoot.querySelector(\".loading\").removeAttribute(\"hidden\");\n }\n break;\n\n case \"init-value\":\n if (this[\"init-value\"] !== newVal) {\n // set inputbox and buttons in the inner component\n _input.value = newVal;\n if (newVal !== \"\" && !this.isDisabled) {\n _searchBtn.removeAttribute(\"disabled\");\n _clearBtn.removeAttribute(\"hidden\");\n } else {\n _searchBtn.setAttribute(\"disabled\", \"\");\n _clearBtn.setAttribute(\"hidden\", \"\");\n }\n }\n break;\n\n case \"is-disabled\":\n if (this.isDisabled) {\n _clearBtn.setAttribute(\"disabled\", \"\");\n _searchBtn.setAttribute(\"disabled\", \"\");\n _input.setAttribute(\"disabled\", \"\");\n } else {\n _clearBtn.removeAttribute(\"disabled\");\n _searchBtn.removeAttribute(\"disabled\");\n _input.removeAttribute(\"disabled\");\n }\n break;\n }\n }\n\n get selectedValue() {\n return this.getAttribute(\"selected-value\");\n }\n\n set selectedValue(val) {\n this.setAttribute(\"selected-value\", val);\n }\n\n set isDisabled(value) {\n if (value) {\n this.setAttribute(\"is-disabled\", \"\");\n } else {\n this.removeAttribute(\"is-disabled\");\n }\n }\n\n get isDisabled() {\n return this.hasAttribute(\"is-disabled\");\n }\n\n set loading(value) {\n const loading = Boolean(value);\n if (loading) {\n this.setAttribute(\"loading\", \"\");\n } else {\n this.removeAttribute(\"loading\");\n }\n }\n\n get loading() {\n return this.hasAttribute(\"loading\");\n }\n\n get initValue() {\n return this.getAttribute(\"init-value\");\n }\n\n set initValue(val) {\n this.setAttribute(\"init-value\", val);\n }\n\n get debounce() {\n return this.getAttribute(\"debounce\");\n }\n\n set debounce(val) {\n this.setAttribute(\"debounce\", val);\n }\n\n _inputChanged() {\n if (this._input.value === \"\") {\n this._searchBtn.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 }\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._input.focus();\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 }\n\n _openDroplist() {\n this.activeIndex = null;\n this._dropdown.setAttribute(\"open\", true);\n this._dropdown.setAttribute(\"active-index\", null);\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.dispatchEvent(\n new CustomEvent(\"pfe-search-event\", {\n detail: { searchValue: searchQuery },\n bubbles: true,\n composed: true\n })\n );\n this._reset();\n this.selectedValue = searchQuery;\n }\n\n _sendAutocompleteRequest(input) {\n if (!this.autocompleteRequest) return;\n\n this.autocompleteRequest(\n { query: input },\n this._autocompleteCallback.bind(this)\n );\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 debugger;\n this._dropdown.activeIndex = null;\n this._input.setAttribute(\"aria-activedescendant\", \"\");\n this._dropdown.data = [];\n this._closeDroplist();\n }\n\n _activeOption(activeIndex) {\n if (activeIndex === null || activeIndex === \"null\") return;\n return this._dropdown.shadowRoot.querySelector(\n \"li:nth-child(\" + (parseInt(activeIndex, 10) + 1) + \")\"\n ).innerHTML;\n }\n\n _inputKeyUp(e) {\n let key = e.keyCode;\n\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 =\n activeIndex === null || activeIndex === \"null\"\n ? optionsLength\n : parseInt(activeIndex, 10);\n\n activeIndex -= 1;\n\n if (activeIndex < 0) {\n activeIndex = optionsLength - 1;\n }\n\n this._input.value = this._activeOption(activeIndex);\n } else if (key === KEYCODE.DOWN) {\n if (!this._dropdown.open) {\n return;\n }\n\n activeIndex =\n activeIndex === null || activeIndex === \"null\"\n ? -1\n : parseInt(activeIndex, 10);\n activeIndex += 1;\n\n if (activeIndex > optionsLength - 1) {\n activeIndex = 0;\n }\n\n this._input.value = this._activeOption(activeIndex);\n } else if (key === KEYCODE.ENTER) {\n let selectedValue = this._input.value;\n this._doSearch(selectedValue);\n return;\n }\n\n if (activeIndex !== null && activeIndex !== \"null\") {\n this._input.setAttribute(\n \"aria-activedescendant\",\n \"option-\" + activeIndex\n );\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-option-selected | Fires when an option is selected.\n event.detailes.selectedValue contains the selected value.\n*/\nclass PfeSearchDroplist extends PFElement {\n\n get html() {\n return `
    \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 constructor() {\n super(PfeSearchDroplist);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this._ariaAnnounce = this.shadowRoot.querySelector(\n \".suggestions-aria-help\"\n );\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 this._ul.removeEventListener(\"mousedown\", this._optionSelected);\n }\n\n _optionSelected(e) {\n if (e.target.tagName === \"LI\") {\n this.dispatchEvent(\n new CustomEvent(\"pfe-option-selected\", {\n detail: { optionValue: e.target.innerText },\n bubbles: true,\n composed: true\n })\n );\n }\n }\n\n _renderOptions() {\n this.reflow = \"\";\n\n let options = this.data;\n\n this._ariaAnnounce.innerHTML = `There are ${\n options.length\n } suggestions. Use the up and down arrows to browse.`;\n this._ariaAnnounce.setAttribute(\"aria-live\", \"polite\");\n\n this._ul.innerHTML = `${options\n .map((item, index) => {\n return `
  • ${item}
    • `;\n })\n .join(\"\")}`;\n }\n\n static get observedAttributes() {\n return [\"open\", \"reflow\", \"active-index\"];\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n super.attributeChangedCallback();\n\n if (this[name] !== newVal) {\n this[name] = newVal;\n }\n\n if (attr === \"active-index\" && oldVal !== newVal) {\n this._activeIndexChanged();\n }\n\n if (attr === \"reflow\") {\n this._renderOptions();\n }\n }\n\n _activeIndexChanged() {\n if (\n !this.data ||\n this.data.length === 0 ||\n this.activeIndex === null ||\n this.activeIndex === \"null\"\n )\n return;\n\n // remove active class\n if (this._ul.querySelector(\".active\")) {\n this._ul.querySelector(\".active\").classList.remove(\"active\");\n }\n\n // add active class to selected option\n let activeOption = this._ul.querySelector(\n \"li:nth-child(\" + (parseInt(this.activeIndex, 10) + 1) + \")\"\n );\n\n activeOption.classList.add(\"active\");\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(\n window.getComputedStyle(activeOption).getPropertyValue(\"margin-bottom\"),\n 10\n );\n ulWrapper.scrollTop =\n activeOption.offsetTop - ulWrapper.offsetHeight + activeOptionHeight;\n }\n\n get open() {\n return this.hasAttribute(\"open\");\n }\n\n set open(val) {\n val = Boolean(val);\n\n if (val) {\n this.setAttribute(\"open\", \"\");\n } else {\n this.removeAttribute(\"open\");\n }\n }\n\n get activeIndex() {\n return this.getAttribute(\"active-index\");\n }\n\n set activeIndex(val) {\n this.setAttribute(\"active-index\", val);\n }\n\n get reflow() {\n return this.hasAttribute(\"reflow\");\n }\n\n set reflow(val) {\n val = Boolean(val);\n\n if (val) {\n this.setAttribute(\"reflow\", \"\");\n } else {\n this.removeAttribute(\"reflow\");\n }\n }\n}\n\nPFElement.create(PfeSearchDroplist);\nPFElement.create(PfeAutocomplete);\n\nexport default PfeAutocomplete;\n//# sourceMappingURL=pfe-autocomplete.js.map\n"],"names":["KEYCODE","ENTER","DOWN","UP","ESC","throttle","PfeAutocomplete","loading","debounce","slotNodes","shadowRoot","querySelector","assignedNodes","slotElems","filter","n","nodeType","Node","ELEMENT_NODE","_input","addEventListener","_inputChanged","bind","_closeDroplist","setAttribute","_clearBtn","_clear","_searchBtn","_search","_dropdown","data","activeIndex","_inputKeyUp","_optionSelected","removeEventListener","attr","oldVal","newVal","value","removeAttribute","isDisabled","_reset","hasAttribute","window","setTimeout","_sendAutocompleteRequest","focus","_doSearch","open","e","selectedValue","detail","optionValue","searchQuery","dispatchEvent","CustomEvent","searchValue","bubbles","composed","input","autocompleteRequest","query","_autocompleteCallback","response","reflow","length","_openDroplist","parseInt","innerHTML","key","keyCode","optionsLength","_activeOption","getAttribute","val","Boolean","PFElement","PfeSearchDroplist","_ariaAnnounce","_ul","target","tagName","innerText","options","map","item","index","join","name","_activeIndexChanged","_renderOptions","classList","remove","activeOption","add","ulWrapper","activeOptionHeight","offsetHeight","getComputedStyle","getPropertyValue","scrollTop","offsetTop","create"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAEA;;;;;;;;;;;;;;;;;;;;;;;;EAwBA,IAAMA,UAAU;EACdC,SAAO,EADO;EAEdC,QAAM,EAFQ;EAGdC,MAAI,EAHU;EAIdC,OAAK;EAJS,CAAhB;;EAOA;EACA,IAAIC,WAAW,KAAf;;MAEMC;;;;6BAEO;EACT;EAuCD;;;6BAKiB;EAChB,aAAO,uBAAP;EACD;;;6BAEc;EACb,aAAO,uBAAP;EACD;;;6BAVgB;EACf,aAAO,kBAAP;EACD;;;EAUD,6BAAc;EAAA;EAAA,4HACNA,eADM;EAEb;;;;0CAEmB;EAClB;;EAEA,WAAKC,OAAL,GAAe,KAAf;EACA,WAAKC,QAAL,GAAgB,KAAKA,QAAL,IAAiB,GAAjC;;EAEA;EACA,UAAIC,YAAY,KAAKC,UAAL,CAAgBC,aAAhB,CAA8B,MAA9B,EAAsCC,aAAtC,EAAhB;EACA,UAAIC,YAAYJ,UAAUK,MAAV,CAAiB;EAAA,eAAKC,EAAEC,QAAF,KAAeC,KAAKC,YAAzB;EAAA,OAAjB,CAAhB;EACA,WAAKC,MAAL,GAAcN,UAAU,CAAV,CAAd;EACA,WAAKM,MAAL,CAAYC,gBAAZ,CAA6B,OAA7B,EAAsC,KAAKC,aAAL,CAAmBC,IAAnB,CAAwB,IAAxB,CAAtC;EACA,WAAKH,MAAL,CAAYC,gBAAZ,CAA6B,MAA7B,EAAqC,KAAKG,cAAL,CAAoBD,IAApB,CAAyB,IAAzB,CAArC;EACA,WAAKH,MAAL,CAAYK,YAAZ,CAAyB,MAAzB,EAAiC,UAAjC;EACA,WAAKL,MAAL,CAAYK,YAAZ,CAAyB,YAAzB,EAAuC,QAAvC;EACA,WAAKL,MAAL,CAAYK,YAAZ,CAAyB,mBAAzB,EAA8C,MAA9C;EACA,WAAKL,MAAL,CAAYK,YAAZ,CAAyB,eAAzB,EAA0C,MAA1C;EACA,WAAKL,MAAL,CAAYK,YAAZ,CAAyB,MAAzB,EAAiC,QAAjC;EACA,WAAKL,MAAL,CAAYK,YAAZ,CAAyB,cAAzB,EAAyC,KAAzC;EACA,WAAKL,MAAL,CAAYK,YAAZ,CAAyB,aAAzB,EAAwC,KAAxC;EACA,WAAKL,MAAL,CAAYK,YAAZ,CAAyB,gBAAzB,EAA2C,KAA3C;EACA,WAAKL,MAAL,CAAYK,YAAZ,CAAyB,YAAzB,EAAuC,OAAvC;;EAEA;EACA,WAAKC,SAAL,GAAiB,KAAKf,UAAL,CAAgBC,aAAhB,CAA8B,eAA9B,CAAjB;EACA,WAAKc,SAAL,CAAeL,gBAAf,CAAgC,OAAhC,EAAyC,KAAKM,MAAL,CAAYJ,IAAZ,CAAiB,IAAjB,CAAzC;;EAEA;EACA,WAAKK,UAAL,GAAkB,KAAKjB,UAAL,CAAgBC,aAAhB,CAA8B,gBAA9B,CAAlB;EACA,WAAKgB,UAAL,CAAgBP,gBAAhB,CAAiC,OAAjC,EAA0C,KAAKQ,OAAL,CAAaN,IAAb,CAAkB,IAAlB,CAA1C;;EAEA,WAAKO,SAAL,GAAiB,KAAKnB,UAAL,CAAgBC,aAAhB,CAA8B,WAA9B,CAAjB;EACA,WAAKkB,SAAL,CAAeC,IAAf,GAAsB,EAAtB;;EAEA,WAAKC,WAAL,GAAmB,IAAnB;;EAEA,WAAKX,gBAAL,CAAsB,OAAtB,EAA+B,KAAKY,WAAL,CAAiBV,IAAjB,CAAsB,IAAtB,CAA/B;;EAEA;EACA,WAAKF,gBAAL,CAAsB,kBAAtB,EAA0C,KAAKG,cAAL,CAAoBD,IAApB,CAAyB,IAAzB,CAA1C;EACA,WAAKF,gBAAL,CACE,qBADF,EAEE,KAAKa,eAAL,CAAqBX,IAArB,CAA0B,IAA1B,CAFF;EAID;;;6CAEsB;EACrB,WAAKY,mBAAL,CAAyB,OAAzB,EAAkC,KAAKF,WAAvC;EACA,WAAKE,mBAAL,CAAyB,kBAAzB,EAA6C,KAAKX,cAAlD;EACA,WAAKW,mBAAL,CAAyB,qBAAzB,EAAgD,KAAKD,eAArD;EACA,WAAKd,MAAL,CAAYe,mBAAZ,CAAgC,OAAhC,EAAyC,KAAKb,aAA9C;EACA,WAAKF,MAAL,CAAYe,mBAAZ,CAAgC,MAAhC,EAAwC,KAAKX,cAA7C;EACA,WAAKE,SAAL,CAAeS,mBAAf,CAAmC,OAAnC,EAA4C,KAAKR,MAAjD;EACA,WAAKC,UAAL,CAAgBO,mBAAhB,CAAoC,OAApC,EAA6C,KAAKN,OAAlD;EACD;;;+CAMwBO,MAAMC,QAAQC,QAAQ;EAC7C;;EAEA,UAAI5B,YAAY,KAAKC,UAAL,CAAgBC,aAAhB,CAA8B,MAA9B,EAAsCC,aAAtC,EAAhB;EACA,UAAIC,YAAYJ,UAAUK,MAAV,CAAiB;EAAA,eAAKC,EAAEC,QAAF,KAAeC,KAAKC,YAAzB;EAAA,OAAjB,CAAhB;EACA,UAAIC,SAASN,UAAU,CAAV,CAAb;;EAEA,UAAIY,YAAY,KAAKf,UAAL,CAAgBC,aAAhB,CAA8B,eAA9B,CAAhB;EACA,UAAIgB,aAAa,KAAKjB,UAAL,CAAgBC,aAAhB,CAA8B,gBAA9B,CAAjB;;EAEA,cAAQwB,IAAR;EACE,aAAK,SAAL;EACE,cAAI,CAAC,KAAK5B,OAAN,IAAiBY,OAAOmB,KAAP,KAAiB,EAAtC,EAA0C;EACxC,iBAAK5B,UAAL,CAAgBC,aAAhB,CAA8B,UAA9B,EAA0Ca,YAA1C,CAAuD,QAAvD,EAAiE,EAAjE;EACD,WAFD,MAEO;EACL,iBAAKd,UAAL,CAAgBC,aAAhB,CAA8B,UAA9B,EAA0C4B,eAA1C,CAA0D,QAA1D;EACD;EACD;;EAEF,aAAK,YAAL;EACE,cAAI,KAAK,YAAL,MAAuBF,MAA3B,EAAmC;EACjC;EACAlB,mBAAOmB,KAAP,GAAeD,MAAf;EACA,gBAAIA,WAAW,EAAX,IAAiB,CAAC,KAAKG,UAA3B,EAAuC;EACrCb,yBAAWY,eAAX,CAA2B,UAA3B;EACAd,wBAAUc,eAAV,CAA0B,QAA1B;EACD,aAHD,MAGO;EACLZ,yBAAWH,YAAX,CAAwB,UAAxB,EAAoC,EAApC;EACAC,wBAAUD,YAAV,CAAuB,QAAvB,EAAiC,EAAjC;EACD;EACF;EACD;;EAEF,aAAK,aAAL;EACE,cAAI,KAAKgB,UAAT,EAAqB;EACnBf,sBAAUD,YAAV,CAAuB,UAAvB,EAAmC,EAAnC;EACAG,uBAAWH,YAAX,CAAwB,UAAxB,EAAoC,EAApC;EACAL,mBAAOK,YAAP,CAAoB,UAApB,EAAgC,EAAhC;EACD,WAJD,MAIO;EACLC,sBAAUc,eAAV,CAA0B,UAA1B;EACAZ,uBAAWY,eAAX,CAA2B,UAA3B;EACApB,mBAAOoB,eAAP,CAAuB,UAAvB;EACD;EACD;EAjCJ;EAmCD;;;sCAmDe;EAAA;;EACd,UAAI,KAAKpB,MAAL,CAAYmB,KAAZ,KAAsB,EAA1B,EAA8B;EAC5B,aAAKX,UAAL,CAAgBH,YAAhB,CAA6B,UAA7B,EAAyC,EAAzC;EACA,aAAKC,SAAL,CAAeD,YAAf,CAA4B,QAA5B,EAAsC,EAAtC;;EAEA,aAAKiB,MAAL;EACA;EACD,OAND,MAMO;EACL,YAAI,CAAC,KAAKtB,MAAL,CAAYuB,YAAZ,CAAyB,UAAzB,CAAL,EAA2C;EACzC,eAAKf,UAAL,CAAgBY,eAAhB,CAAgC,UAAhC;EACD;EACD,aAAKd,SAAL,CAAec,eAAf,CAA+B,QAA/B;EACD;;EAED,UAAIlC,aAAa,KAAjB,EAAwB;EACtBA,mBAAW,IAAX;;EAEAsC,eAAOC,UAAP,CAAkB,YAAM;EACtB,iBAAKC,wBAAL,CAA8B,OAAK1B,MAAL,CAAYmB,KAA1C;EACAjC,qBAAW,KAAX;EACD,SAHD,EAGG,KAAKG,QAHR;EAID;EACF;;;+BAEQ;EACP,WAAKW,MAAL,CAAYmB,KAAZ,GAAoB,EAApB;EACA,WAAKb,SAAL,CAAeD,YAAf,CAA4B,QAA5B,EAAsC,EAAtC;EACA,WAAKG,UAAL,CAAgBH,YAAhB,CAA6B,UAA7B,EAAyC,EAAzC;EACA,WAAKL,MAAL,CAAY2B,KAAZ;EACD;;;gCAES;EACR,WAAKC,SAAL,CAAe,KAAK5B,MAAL,CAAYmB,KAA3B;EACD;;;uCAEgB;EACf,WAAKT,SAAL,CAAemB,IAAf,GAAsB,IAAtB;EACA,WAAKnB,SAAL,CAAeU,eAAf,CAA+B,cAA/B;EACD;;;sCAEe;EACd,WAAKR,WAAL,GAAmB,IAAnB;EACA,WAAKF,SAAL,CAAeL,YAAf,CAA4B,MAA5B,EAAoC,IAApC;EACA,WAAKK,SAAL,CAAeL,YAAf,CAA4B,cAA5B,EAA4C,IAA5C;EACD;;;sCAEeyB,GAAG;EACjB,UAAIC,gBAAgBD,EAAEE,MAAF,CAASC,WAA7B;;EAEA;EACA,WAAKjC,MAAL,CAAYmB,KAAZ,GAAoBY,aAApB;;EAEA;EACA,WAAKH,SAAL,CAAeG,aAAf;EACD;;;gCAESG,aAAa;EACrB,WAAKC,aAAL,CACE,IAAIC,WAAJ,CAAgB,kBAAhB,EAAoC;EAClCJ,gBAAQ,EAAEK,aAAaH,WAAf,EAD0B;EAElCI,iBAAS,IAFyB;EAGlCC,kBAAU;EAHwB,OAApC,CADF;EAOA,WAAKjB,MAAL;EACA,WAAKS,aAAL,GAAqBG,WAArB;EACD;;;+CAEwBM,OAAO;EAC9B,UAAI,CAAC,KAAKC,mBAAV,EAA+B;;EAE/B,WAAKA,mBAAL,CACE,EAAEC,OAAOF,KAAT,EADF,EAEE,KAAKG,qBAAL,CAA2BxC,IAA3B,CAAgC,IAAhC,CAFF;EAID;;;4CAEqByC,UAAU;EAC9B,WAAKlC,SAAL,CAAeC,IAAf,GAAsBiC,QAAtB;EACA,WAAKlC,SAAL,CAAemC,MAAf,GAAwB,IAAxB;EACAD,eAASE,MAAT,KAAoB,CAApB,GAAwB,KAAKC,aAAL,EAAxB,GAA+C,KAAK3C,cAAL,EAA/C;EACD;;;+BAEQ;EACP;EACA,WAAKM,SAAL,CAAeE,WAAf,GAA6B,IAA7B;EACA,WAAKZ,MAAL,CAAYK,YAAZ,CAAyB,uBAAzB,EAAkD,EAAlD;EACA,WAAKK,SAAL,CAAeC,IAAf,GAAsB,EAAtB;EACA,WAAKP,cAAL;EACD;;;oCAEaQ,aAAa;EACzB,UAAIA,gBAAgB,IAAhB,IAAwBA,gBAAgB,MAA5C,EAAoD;EACpD,aAAO,KAAKF,SAAL,CAAenB,UAAf,CAA0BC,aAA1B,CACL,mBAAmBwD,SAASpC,WAAT,EAAsB,EAAtB,IAA4B,CAA/C,IAAoD,GAD/C,EAELqC,SAFF;EAGD;;;kCAEWnB,GAAG;EACb,UAAIoB,MAAMpB,EAAEqB,OAAZ;;EAEA,UACE,KAAKzC,SAAL,CAAeC,IAAf,CAAoBmC,MAApB,KAA+B,CAA/B,IACAI,QAAQrE,QAAQE,IADhB,IAEAmE,QAAQrE,QAAQG,EAFhB,IAGAkE,QAAQrE,QAAQC,KAHhB,IAIAoE,QAAQrE,QAAQI,GALlB,EAOE;;EAEF,UAAI2B,cAAc,KAAKF,SAAL,CAAeE,WAAjC;EACA,UAAIwC,gBAAgB,KAAK1C,SAAL,CAAeC,IAAf,CAAoBmC,MAAxC;;EAEA,UAAII,OAAOrE,QAAQI,GAAnB,EAAwB;EACtB,aAAKmB,cAAL;EACD,OAFD,MAEO,IAAI8C,QAAQrE,QAAQG,EAApB,EAAwB;EAC7B,YAAI,CAAC,KAAK0B,SAAL,CAAemB,IAApB,EAA0B;EACxB;EACD;;EAEDjB,sBACEA,gBAAgB,IAAhB,IAAwBA,gBAAgB,MAAxC,GACIwC,aADJ,GAEIJ,SAASpC,WAAT,EAAsB,EAAtB,CAHN;;EAKAA,uBAAe,CAAf;;EAEA,YAAIA,cAAc,CAAlB,EAAqB;EACnBA,wBAAcwC,gBAAgB,CAA9B;EACD;;EAED,aAAKpD,MAAL,CAAYmB,KAAZ,GAAoB,KAAKkC,aAAL,CAAmBzC,WAAnB,CAApB;EACD,OAjBM,MAiBA,IAAIsC,QAAQrE,QAAQE,IAApB,EAA0B;EAC/B,YAAI,CAAC,KAAK2B,SAAL,CAAemB,IAApB,EAA0B;EACxB;EACD;;EAEDjB,sBACEA,gBAAgB,IAAhB,IAAwBA,gBAAgB,MAAxC,GACI,CAAC,CADL,GAEIoC,SAASpC,WAAT,EAAsB,EAAtB,CAHN;EAIAA,uBAAe,CAAf;;EAEA,YAAIA,cAAcwC,gBAAgB,CAAlC,EAAqC;EACnCxC,wBAAc,CAAd;EACD;;EAED,aAAKZ,MAAL,CAAYmB,KAAZ,GAAoB,KAAKkC,aAAL,CAAmBzC,WAAnB,CAApB;EACD,OAhBM,MAgBA,IAAIsC,QAAQrE,QAAQC,KAApB,EAA2B;EAChC,YAAIiD,gBAAgB,KAAK/B,MAAL,CAAYmB,KAAhC;EACA,aAAKS,SAAL,CAAeG,aAAf;EACA;EACD;;EAED,UAAInB,gBAAgB,IAAhB,IAAwBA,gBAAgB,MAA5C,EAAoD;EAClD,aAAKZ,MAAL,CAAYK,YAAZ,CACE,uBADF,EAEE,YAAYO,WAFd;EAID,OALD,MAKO;EACL,aAAKZ,MAAL,CAAYK,YAAZ,CAAyB,uBAAzB,EAAkD,EAAlD;EACD;;EAED,WAAKO,WAAL,GAAmBA,WAAnB;EACA,WAAKF,SAAL,CAAeE,WAAf,GAA6BA,WAA7B;EACD;;;6BAtNmB;EAClB,aAAO,KAAK0C,YAAL,CAAkB,gBAAlB,CAAP;EACD;2BAEiBC,KAAK;EACrB,WAAKlD,YAAL,CAAkB,gBAAlB,EAAoCkD,GAApC;EACD;;;2BAEcpC,OAAO;EACpB,UAAIA,KAAJ,EAAW;EACT,aAAKd,YAAL,CAAkB,aAAlB,EAAiC,EAAjC;EACD,OAFD,MAEO;EACL,aAAKe,eAAL,CAAqB,aAArB;EACD;EACF;6BAEgB;EACf,aAAO,KAAKG,YAAL,CAAkB,aAAlB,CAAP;EACD;;;2BAEWJ,OAAO;EACjB,UAAM/B,UAAUoE,QAAQrC,KAAR,CAAhB;EACA,UAAI/B,OAAJ,EAAa;EACX,aAAKiB,YAAL,CAAkB,SAAlB,EAA6B,EAA7B;EACD,OAFD,MAEO;EACL,aAAKe,eAAL,CAAqB,SAArB;EACD;EACF;6BAEa;EACZ,aAAO,KAAKG,YAAL,CAAkB,SAAlB,CAAP;EACD;;;6BAEe;EACd,aAAO,KAAK+B,YAAL,CAAkB,YAAlB,CAAP;EACD;2BAEaC,KAAK;EACjB,WAAKlD,YAAL,CAAkB,YAAlB,EAAgCkD,GAAhC;EACD;;;6BAEc;EACb,aAAO,KAAKD,YAAL,CAAkB,UAAlB,CAAP;EACD;2BAEYC,KAAK;EAChB,WAAKlD,YAAL,CAAkB,UAAlB,EAA8BkD,GAA9B;EACD;;;6BAlG+B;EAC9B,aAAO,CAAC,YAAD,EAAe,SAAf,EAA0B,aAA1B,CAAP;EACD;;;IApH2BE;;EA8X9B;;;;;;;;;;;;MAUMC;;;;6BAEO;EACT;EAKD;;;6BAKiB;EAChB,aAAO,0BAAP;EACD;;;6BAEc;EACb,aAAO,0BAAP;EACD;;;6BAVgB;EACf,aAAO,qBAAP;EACD;;;EAUD,+BAAc;EAAA;EAAA,gIACNA,iBADM;EAEb;;;;0CAEmB;EAClB;;EAEA,WAAKC,aAAL,GAAqB,KAAKpE,UAAL,CAAgBC,aAAhB,CACnB,wBADmB,CAArB;;EAIA,WAAKoB,WAAL,GAAmB,IAAnB;EACA,WAAKgD,GAAL,GAAW,KAAKrE,UAAL,CAAgBC,aAAhB,CAA8B,IAA9B,CAAX;EACA,WAAKoE,GAAL,CAAS3D,gBAAT,CAA0B,WAA1B,EAAuC,KAAKa,eAAL,CAAqBX,IAArB,CAA0B,IAA1B,CAAvC;EACD;;;6CAEsB;EACrB,WAAKyD,GAAL,CAAS7C,mBAAT,CAA6B,WAA7B,EAA0C,KAAKD,eAA/C;EACD;;;sCAEegB,GAAG;EACjB,UAAIA,EAAE+B,MAAF,CAASC,OAAT,KAAqB,IAAzB,EAA+B;EAC7B,aAAK3B,aAAL,CACE,IAAIC,WAAJ,CAAgB,qBAAhB,EAAuC;EACrCJ,kBAAQ,EAAEC,aAAaH,EAAE+B,MAAF,CAASE,SAAxB,EAD6B;EAErCzB,mBAAS,IAF4B;EAGrCC,oBAAU;EAH2B,SAAvC,CADF;EAOD;EACF;;;uCAEgB;EACf,WAAKM,MAAL,GAAc,EAAd;;EAEA,UAAImB,UAAU,KAAKrD,IAAnB;;EAEA,WAAKgD,aAAL,CAAmBV,SAAnB,kBACEe,QAAQlB,MADV;EAGA,WAAKa,aAAL,CAAmBtD,YAAnB,CAAgC,WAAhC,EAA6C,QAA7C;;EAEA,WAAKuD,GAAL,CAASX,SAAT,QAAwBe,QACrBC,GADqB,CACjB,UAACC,IAAD,EAAOC,KAAP,EAAiB;EACpB,oCAAyBA,KAAzB,mDAAsED,IAAtE,WAA+EA,IAA/E;EACD,OAHqB,EAIrBE,IAJqB,CAIhB,EAJgB,CAAxB;EAKD;;;+CAMwBpD,MAAMC,QAAQC,QAAQ;EAC7C;;EAEA,UAAI,KAAKmD,IAAL,MAAenD,MAAnB,EAA2B;EACzB,aAAKmD,IAAL,IAAanD,MAAb;EACD;;EAED,UAAIF,SAAS,cAAT,IAA2BC,WAAWC,MAA1C,EAAkD;EAChD,aAAKoD,mBAAL;EACD;;EAED,UAAItD,SAAS,QAAb,EAAuB;EACrB,aAAKuD,cAAL;EACD;EACF;;;4CAEqB;EACpB,UACE,CAAC,KAAK5D,IAAN,IACA,KAAKA,IAAL,CAAUmC,MAAV,KAAqB,CADrB,IAEA,KAAKlC,WAAL,KAAqB,IAFrB,IAGA,KAAKA,WAAL,KAAqB,MAJvB,EAME;;EAEF;EACA,UAAI,KAAKgD,GAAL,CAASpE,aAAT,CAAuB,SAAvB,CAAJ,EAAuC;EACrC,aAAKoE,GAAL,CAASpE,aAAT,CAAuB,SAAvB,EAAkCgF,SAAlC,CAA4CC,MAA5C,CAAmD,QAAnD;EACD;;EAED;EACA,UAAIC,eAAe,KAAKd,GAAL,CAASpE,aAAT,CACjB,mBAAmBwD,SAAS,KAAKpC,WAAd,EAA2B,EAA3B,IAAiC,CAApD,IAAyD,GADxC,CAAnB;;EAIA8D,mBAAaF,SAAb,CAAuBG,GAAvB,CAA2B,QAA3B;;EAEA;EACA,UAAIC,YAAY,KAAKrF,UAAL,CAAgBC,aAAhB,CAA8B,WAA9B,CAAhB;EACA,UAAIqF,qBAAqBH,aAAaI,YAAtC;EACAD,4BAAsB7B,SACpBxB,OAAOuD,gBAAP,CAAwBL,YAAxB,EAAsCM,gBAAtC,CAAuD,eAAvD,CADoB,EAEpB,EAFoB,CAAtB;EAIAJ,gBAAUK,SAAV,GACEP,aAAaQ,SAAb,GAAyBN,UAAUE,YAAnC,GAAkDD,kBADpD;EAED;;;6BAEU;EACT,aAAO,KAAKtD,YAAL,CAAkB,MAAlB,CAAP;EACD;2BAEQgC,KAAK;EACZA,YAAMC,QAAQD,GAAR,CAAN;;EAEA,UAAIA,GAAJ,EAAS;EACP,aAAKlD,YAAL,CAAkB,MAAlB,EAA0B,EAA1B;EACD,OAFD,MAEO;EACL,aAAKe,eAAL,CAAqB,MAArB;EACD;EACF;;;6BAEiB;EAChB,aAAO,KAAKkC,YAAL,CAAkB,cAAlB,CAAP;EACD;2BAEeC,KAAK;EACnB,WAAKlD,YAAL,CAAkB,cAAlB,EAAkCkD,GAAlC;EACD;;;6BAEY;EACX,aAAO,KAAKhC,YAAL,CAAkB,QAAlB,CAAP;EACD;2BAEUgC,KAAK;EACdA,YAAMC,QAAQD,GAAR,CAAN;;EAEA,UAAIA,GAAJ,EAAS;EACP,aAAKlD,YAAL,CAAkB,QAAlB,EAA4B,EAA5B;EACD,OAFD,MAEO;EACL,aAAKe,eAAL,CAAqB,QAArB;EACD;EACF;;;6BAtF+B;EAC9B,aAAO,CAAC,MAAD,EAAS,QAAT,EAAmB,cAAnB,CAAP;EACD;;;IAxE6BqC;;EA+JhCA,UAAU0B,MAAV,CAAiBzB,iBAAjB;EACAD,UAAU0B,MAAV,CAAiBhG,eAAjB;;;;;;;;"} \ No newline at end of file diff --git a/elements/pfe-autocomplete/pfe-autocomplete.umd.min.js b/elements/pfe-autocomplete/pfe-autocomplete.umd.min.js new file mode 100644 index 0000000000..ca584966ff --- /dev/null +++ b/elements/pfe-autocomplete/pfe-autocomplete.umd.min.js @@ -0,0 +1,2 @@ +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("../pfelement/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min"],e):t.PfeAutocomplete=e(t.PFElement)}(this,function(e){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var i=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},n=function(){function o(t,e){for(var i=0;i:host{display:block;position:relative}.input-box-wrapper{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}#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 0 rgba(0,0,0,.075)!important;box-shadow:inset 0 0 0 rgba(0,0,0,.075)!important;padding-left:10px;padding-right:30px;border-radius:0;background-color:#fff;border:1px solid #dfdfdf;border:1px solid var(--pfe-theme--color--surface--border,#dfdfdf);font-size:16px;height:40px;-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),button:disabled{cursor:not-allowed;background-color:transparent;color:#ccc;opacity:.5}#input-box-wrapper ::slotted(input:focus),#input-box-wrapper button:focus{border-color:#66afe9;outline:0}#input-box-wrapper ::slotted(input),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:#ccc;background-color:transparent;border:none;position:absolute;top:0;bottom:0;padding:0;margin:0;cursor:pointer}button.clear-search{right:30px;width:20px;margin:2px 1px;background-color:#fff}button.clear-search svg{width:12px;stroke:#ccc}button.clear-search:focus svg,button.clear-search:hover svg{opacity:1;stroke:#06c}button[disabled].clear-search:focus svg,button[disabled].clear-search:hover svg{stroke:#ccc}button.search-button{right:1px;width:30px}button.search-button svg{fill:#06c;width:16px}button.search-button:focus svg,button.search-button:hover svg{fill:#004080}button.clear-search:hover{color:#ccc}button.search-button:disabled svg{fill:#ccc}.loading{position:absolute;width:30px;right:52px;top:0;bottom:0}.loading svg{width:26px;padding-top:7px}
    \n \n\n \n\n \n\n \n
    \n'}},{key:"templateUrl",get:function(){return"pfe-autocomplete.html"}},{key:"styleUrl",get:function(){return"pfe-autocomplete.scss"}}],[{key:"tag",get:function(){return"pfe-autocomplete"}}]),n(s,[{key:"connectedCallback",value:function(){a(s.prototype.__proto__||Object.getPrototypeOf(s.prototype),"connectedCallback",this).call(this),this.loading=!1,this.debounce=this.debounce||300;var t=this.shadowRoot.querySelector("slot").assignedNodes().filter(function(t){return t.nodeType===Node.ELEMENT_NODE});this._input=t[0],this._input.addEventListener("input",this._inputChanged.bind(this)),this._input.addEventListener("blur",this._closeDroplist.bind(this)),this._input.setAttribute("role","combobox"),this._input.setAttribute("aria-label","Search"),this._input.setAttribute("aria-autocomplete","both"),this._input.setAttribute("aria-haspopup","true"),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._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._dropdown=this.shadowRoot.querySelector("#dropdown"),this._dropdown.data=[],this.activeIndex=null,this.addEventListener("keyup",this._inputKeyUp.bind(this)),this.addEventListener("pfe-search-event",this._closeDroplist.bind(this)),this.addEventListener("pfe-option-selected",this._optionSelected.bind(this))}},{key:"disconnectedCallback",value:function(){this.removeEventListener("keyup",this._inputKeyUp),this.removeEventListener("pfe-search-event",this._closeDroplist),this.removeEventListener("pfe-option-selected",this._optionSelected),this._input.removeEventListener("input",this._inputChanged),this._input.removeEventListener("blur",this._closeDroplist),this._clearBtn.removeEventListener("click",this._clear),this._searchBtn.removeEventListener("click",this._search)}},{key:"attributeChangedCallback",value:function(t,e,i){a(s.prototype.__proto__||Object.getPrototypeOf(s.prototype),"attributeChangedCallback",this).call(this);var o=this.shadowRoot.querySelector("slot").assignedNodes().filter(function(t){return t.nodeType===Node.ELEMENT_NODE})[0],n=this.shadowRoot.querySelector(".clear-search"),r=this.shadowRoot.querySelector(".search-button");switch(t){case"loading":this.loading&&""!==o.value?this.shadowRoot.querySelector(".loading").removeAttribute("hidden"):this.shadowRoot.querySelector(".loading").setAttribute("hidden","");break;case"init-value":this["init-value"]!==i&&(""===(o.value=i)||this.isDisabled?(r.setAttribute("disabled",""),n.setAttribute("hidden","")):(r.removeAttribute("disabled"),n.removeAttribute("hidden")));break;case"is-disabled":this.isDisabled?(n.setAttribute("disabled",""),r.setAttribute("disabled",""),o.setAttribute("disabled","")):(n.removeAttribute("disabled"),r.removeAttribute("disabled"),o.removeAttribute("disabled"))}}},{key:"_inputChanged",value:function(){var t=this;if(""===this._input.value)return this._searchBtn.setAttribute("disabled",""),this._clearBtn.setAttribute("hidden",""),void this._reset();this._input.hasAttribute("disabled")||this._searchBtn.removeAttribute("disabled"),this._clearBtn.removeAttribute("hidden"),!1===o&&(o=!0,window.setTimeout(function(){t._sendAutocompleteRequest(t._input.value),o=!1},this.debounce))}},{key:"_clear",value:function(){this._input.value="",this._clearBtn.setAttribute("hidden",""),this._searchBtn.setAttribute("disabled",""),this._input.focus()}},{key:"_search",value:function(){this._doSearch(this._input.value)}},{key:"_closeDroplist",value:function(){this._dropdown.open=null,this._dropdown.removeAttribute("active-index")}},{key:"_openDroplist",value:function(){this.activeIndex=null,this._dropdown.setAttribute("open",!0),this._dropdown.setAttribute("active-index",null)}},{key:"_optionSelected",value:function(t){var e=t.detail.optionValue;this._input.value=e,this._doSearch(e)}},{key:"_doSearch",value:function(t){this.dispatchEvent(new CustomEvent("pfe-search-event",{detail:{searchValue:t},bubbles:!0,composed:!0})),this._reset(),this.selectedValue=t}},{key:"_sendAutocompleteRequest",value:function(t){this.autocompleteRequest&&this.autocompleteRequest({query:t},this._autocompleteCallback.bind(this))}},{key:"_autocompleteCallback",value:function(t){this._dropdown.data=t,this._dropdown.reflow=!0,0!==t.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(t){if(null!==t&&"null"!==t)return this._dropdown.shadowRoot.querySelector("li:nth-child("+(parseInt(t,10)+1)+")").innerHTML}},{key:"_inputKeyUp",value:function(t){var e=t.keyCode;if(0!==this._dropdown.data.length||e===c||e===d||e===u||e===h){var i=this._dropdown.activeIndex,o=this._dropdown.data.length;if(e==h)this._closeDroplist();else if(e===d){if(!this._dropdown.open)return;i=null===i||"null"===i?o:parseInt(i,10),(i-=1)<0&&(i=o-1),this._input.value=this._activeOption(i)}else if(e===c){if(!this._dropdown.open)return;i=null===i||"null"===i?-1:parseInt(i,10),o-1<(i+=1)&&(i=0),this._input.value=this._activeOption(i)}else if(e===u){var n=this._input.value;return void this._doSearch(n)}null!==i&&"null"!==i?this._input.setAttribute("aria-activedescendant","option-"+i):this._input.setAttribute("aria-activedescendant",""),this.activeIndex=i,this._dropdown.activeIndex=i}}},{key:"selectedValue",get:function(){return this.getAttribute("selected-value")},set:function(t){this.setAttribute("selected-value",t)}},{key:"isDisabled",set:function(t){t?this.setAttribute("is-disabled",""):this.removeAttribute("is-disabled")},get:function(){return this.hasAttribute("is-disabled")}},{key:"loading",set:function(t){Boolean(t)?this.setAttribute("loading",""):this.removeAttribute("loading")},get:function(){return this.hasAttribute("loading")}},{key:"initValue",get:function(){return this.getAttribute("init-value")},set:function(t){this.setAttribute("init-value",t)}},{key:"debounce",get:function(){return this.getAttribute("debounce")},set:function(t){this.setAttribute("debounce",t)}}],[{key:"observedAttributes",get:function(){return["init-value","loading","is-disabled"]}}]),s}(),s=function(t){function o(){return i(this,o),l(this,(o.__proto__||Object.getPrototypeOf(o)).call(this,o))}return r(o,e),n(o,[{key:"html",get:function(){return'
    \n
    \n
      \n
    \n
    '}},{key:"templateUrl",get:function(){return"pfe-search-droplist.html"}},{key:"styleUrl",get:function(){return"pfe-search-droplist.scss"}}],[{key:"tag",get:function(){return"pfe-search-droplist"}}]),n(o,[{key:"connectedCallback",value:function(){a(o.prototype.__proto__||Object.getPrototypeOf(o.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(){this._ul.removeEventListener("mousedown",this._optionSelected)}},{key:"_optionSelected",value:function(t){"LI"===t.target.tagName&&this.dispatchEvent(new CustomEvent("pfe-option-selected",{detail:{optionValue:t.target.innerText},bubbles:!0,composed:!0}))}},{key:"_renderOptions",value:function(){this.reflow="";var t=this.data;this._ariaAnnounce.innerHTML="There are "+t.length+" suggestions. Use the up and down arrows to browse.",this._ariaAnnounce.setAttribute("aria-live","polite"),this._ul.innerHTML=""+t.map(function(t,e){return'
  • '+t+"
    • "}).join("")}},{key:"attributeChangedCallback",value:function(t,e,i){a(o.prototype.__proto__||Object.getPrototypeOf(o.prototype),"attributeChangedCallback",this).call(this),this[name]!==i&&(this[name]=i),"active-index"===t&&e!==i&&this._activeIndexChanged(),"reflow"===t&&this._renderOptions()}},{key:"_activeIndexChanged",value:function(){if(this.data&&0!==this.data.length&&null!==this.activeIndex&&"null"!==this.activeIndex){this._ul.querySelector(".active")&&this._ul.querySelector(".active").classList.remove("active");var t=this._ul.querySelector("li:nth-child("+(parseInt(this.activeIndex,10)+1)+")");t.classList.add("active");var e=this.shadowRoot.querySelector(".droplist"),i=t.offsetHeight;i+=parseInt(window.getComputedStyle(t).getPropertyValue("margin-bottom"),10),e.scrollTop=t.offsetTop-e.offsetHeight+i}}},{key:"open",get:function(){return this.hasAttribute("open")},set:function(t){(t=Boolean(t))?this.setAttribute("open",""):this.removeAttribute("open")}},{key:"activeIndex",get:function(){return this.getAttribute("active-index")},set:function(t){this.setAttribute("active-index",t)}},{key:"reflow",get:function(){return this.hasAttribute("reflow")},set:function(t){(t=Boolean(t))?this.setAttribute("reflow",""):this.removeAttribute("reflow")}}],[{key:"observedAttributes",get:function(){return["open","reflow","active-index"]}}]),o}();return e.create(s),e.create(t),t}); +//# sourceMappingURL=pfe-autocomplete.umd.min.js.map diff --git a/elements/pfe-autocomplete/pfe-autocomplete.umd.min.js.map b/elements/pfe-autocomplete/pfe-autocomplete.umd.min.js.map new file mode 100644 index 0000000000..914bcc5636 --- /dev/null +++ b/elements/pfe-autocomplete/pfe-autocomplete.umd.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-autocomplete.umd.min.js","sources":["pfe-autocomplete.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 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\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 get html() {\n return `
    \n \n\n \n\n \n\n \n
    \n`;\n }\n static get tag() {\n return \"pfe-autocomplete\";\n }\n\n get templateUrl() {\n return \"pfe-autocomplete.html\";\n }\n\n get styleUrl() {\n return \"pfe-autocomplete.scss\";\n }\n\n constructor() {\n super(PfeAutocomplete);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this.loading = false;\n this.debounce = this.debounce || 300;\n\n // input box\n let slotNodes = this.shadowRoot.querySelector(\"slot\").assignedNodes();\n let slotElems = slotNodes.filter(n => n.nodeType === Node.ELEMENT_NODE);\n this._input = slotElems[0];\n this._input.addEventListener(\"input\", this._inputChanged.bind(this));\n this._input.addEventListener(\"blur\", this._closeDroplist.bind(this));\n this._input.setAttribute(\"role\", \"combobox\");\n this._input.setAttribute(\"aria-label\", \"Search\");\n this._input.setAttribute(\"aria-autocomplete\", \"both\");\n this._input.setAttribute(\"aria-haspopup\", \"true\");\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 // 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 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(\"pfe-search-event\", this._closeDroplist.bind(this));\n this.addEventListener(\n \"pfe-option-selected\",\n this._optionSelected.bind(this)\n );\n }\n\n disconnectedCallback() {\n this.removeEventListener(\"keyup\", this._inputKeyUp);\n this.removeEventListener(\"pfe-search-event\", this._closeDroplist);\n this.removeEventListener(\"pfe-option-selected\", this._optionSelected);\n this._input.removeEventListener(\"input\", this._inputChanged);\n this._input.removeEventListener(\"blur\", this._closeDroplist);\n this._clearBtn.removeEventListener(\"click\", this._clear);\n this._searchBtn.removeEventListener(\"click\", this._search);\n }\n\n static get observedAttributes() {\n return [\"init-value\", \"loading\", \"is-disabled\"];\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n super.attributeChangedCallback();\n\n let slotNodes = this.shadowRoot.querySelector(\"slot\").assignedNodes();\n let slotElems = slotNodes.filter(n => n.nodeType === Node.ELEMENT_NODE);\n let _input = slotElems[0];\n\n let _clearBtn = this.shadowRoot.querySelector(\".clear-search\");\n let _searchBtn = this.shadowRoot.querySelector(\".search-button\");\n\n switch (attr) {\n case \"loading\":\n if (!this.loading || _input.value === \"\") {\n this.shadowRoot.querySelector(\".loading\").setAttribute(\"hidden\", \"\");\n } else {\n this.shadowRoot.querySelector(\".loading\").removeAttribute(\"hidden\");\n }\n break;\n\n case \"init-value\":\n if (this[\"init-value\"] !== newVal) {\n // set inputbox and buttons in the inner component\n _input.value = newVal;\n if (newVal !== \"\" && !this.isDisabled) {\n _searchBtn.removeAttribute(\"disabled\");\n _clearBtn.removeAttribute(\"hidden\");\n } else {\n _searchBtn.setAttribute(\"disabled\", \"\");\n _clearBtn.setAttribute(\"hidden\", \"\");\n }\n }\n break;\n\n case \"is-disabled\":\n if (this.isDisabled) {\n _clearBtn.setAttribute(\"disabled\", \"\");\n _searchBtn.setAttribute(\"disabled\", \"\");\n _input.setAttribute(\"disabled\", \"\");\n } else {\n _clearBtn.removeAttribute(\"disabled\");\n _searchBtn.removeAttribute(\"disabled\");\n _input.removeAttribute(\"disabled\");\n }\n break;\n }\n }\n\n get selectedValue() {\n return this.getAttribute(\"selected-value\");\n }\n\n set selectedValue(val) {\n this.setAttribute(\"selected-value\", val);\n }\n\n set isDisabled(value) {\n if (value) {\n this.setAttribute(\"is-disabled\", \"\");\n } else {\n this.removeAttribute(\"is-disabled\");\n }\n }\n\n get isDisabled() {\n return this.hasAttribute(\"is-disabled\");\n }\n\n set loading(value) {\n const loading = Boolean(value);\n if (loading) {\n this.setAttribute(\"loading\", \"\");\n } else {\n this.removeAttribute(\"loading\");\n }\n }\n\n get loading() {\n return this.hasAttribute(\"loading\");\n }\n\n get initValue() {\n return this.getAttribute(\"init-value\");\n }\n\n set initValue(val) {\n this.setAttribute(\"init-value\", val);\n }\n\n get debounce() {\n return this.getAttribute(\"debounce\");\n }\n\n set debounce(val) {\n this.setAttribute(\"debounce\", val);\n }\n\n _inputChanged() {\n if (this._input.value === \"\") {\n this._searchBtn.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 }\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._input.focus();\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 }\n\n _openDroplist() {\n this.activeIndex = null;\n this._dropdown.setAttribute(\"open\", true);\n this._dropdown.setAttribute(\"active-index\", null);\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.dispatchEvent(\n new CustomEvent(\"pfe-search-event\", {\n detail: { searchValue: searchQuery },\n bubbles: true,\n composed: true\n })\n );\n this._reset();\n this.selectedValue = searchQuery;\n }\n\n _sendAutocompleteRequest(input) {\n if (!this.autocompleteRequest) return;\n\n this.autocompleteRequest(\n { query: input },\n this._autocompleteCallback.bind(this)\n );\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 debugger;\n this._dropdown.activeIndex = null;\n this._input.setAttribute(\"aria-activedescendant\", \"\");\n this._dropdown.data = [];\n this._closeDroplist();\n }\n\n _activeOption(activeIndex) {\n if (activeIndex === null || activeIndex === \"null\") return;\n return this._dropdown.shadowRoot.querySelector(\n \"li:nth-child(\" + (parseInt(activeIndex, 10) + 1) + \")\"\n ).innerHTML;\n }\n\n _inputKeyUp(e) {\n let key = e.keyCode;\n\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 =\n activeIndex === null || activeIndex === \"null\"\n ? optionsLength\n : parseInt(activeIndex, 10);\n\n activeIndex -= 1;\n\n if (activeIndex < 0) {\n activeIndex = optionsLength - 1;\n }\n\n this._input.value = this._activeOption(activeIndex);\n } else if (key === KEYCODE.DOWN) {\n if (!this._dropdown.open) {\n return;\n }\n\n activeIndex =\n activeIndex === null || activeIndex === \"null\"\n ? -1\n : parseInt(activeIndex, 10);\n activeIndex += 1;\n\n if (activeIndex > optionsLength - 1) {\n activeIndex = 0;\n }\n\n this._input.value = this._activeOption(activeIndex);\n } else if (key === KEYCODE.ENTER) {\n let selectedValue = this._input.value;\n this._doSearch(selectedValue);\n return;\n }\n\n if (activeIndex !== null && activeIndex !== \"null\") {\n this._input.setAttribute(\n \"aria-activedescendant\",\n \"option-\" + activeIndex\n );\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-option-selected | Fires when an option is selected.\n event.detailes.selectedValue contains the selected value.\n*/\nclass PfeSearchDroplist extends PFElement {\n\n get html() {\n return `
    \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 constructor() {\n super(PfeSearchDroplist);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this._ariaAnnounce = this.shadowRoot.querySelector(\n \".suggestions-aria-help\"\n );\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 this._ul.removeEventListener(\"mousedown\", this._optionSelected);\n }\n\n _optionSelected(e) {\n if (e.target.tagName === \"LI\") {\n this.dispatchEvent(\n new CustomEvent(\"pfe-option-selected\", {\n detail: { optionValue: e.target.innerText },\n bubbles: true,\n composed: true\n })\n );\n }\n }\n\n _renderOptions() {\n this.reflow = \"\";\n\n let options = this.data;\n\n this._ariaAnnounce.innerHTML = `There are ${\n options.length\n } suggestions. Use the up and down arrows to browse.`;\n this._ariaAnnounce.setAttribute(\"aria-live\", \"polite\");\n\n this._ul.innerHTML = `${options\n .map((item, index) => {\n return `
  • ${item}
    • `;\n })\n .join(\"\")}`;\n }\n\n static get observedAttributes() {\n return [\"open\", \"reflow\", \"active-index\"];\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n super.attributeChangedCallback();\n\n if (this[name] !== newVal) {\n this[name] = newVal;\n }\n\n if (attr === \"active-index\" && oldVal !== newVal) {\n this._activeIndexChanged();\n }\n\n if (attr === \"reflow\") {\n this._renderOptions();\n }\n }\n\n _activeIndexChanged() {\n if (\n !this.data ||\n this.data.length === 0 ||\n this.activeIndex === null ||\n this.activeIndex === \"null\"\n )\n return;\n\n // remove active class\n if (this._ul.querySelector(\".active\")) {\n this._ul.querySelector(\".active\").classList.remove(\"active\");\n }\n\n // add active class to selected option\n let activeOption = this._ul.querySelector(\n \"li:nth-child(\" + (parseInt(this.activeIndex, 10) + 1) + \")\"\n );\n\n activeOption.classList.add(\"active\");\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(\n window.getComputedStyle(activeOption).getPropertyValue(\"margin-bottom\"),\n 10\n );\n ulWrapper.scrollTop =\n activeOption.offsetTop - ulWrapper.offsetHeight + activeOptionHeight;\n }\n\n get open() {\n return this.hasAttribute(\"open\");\n }\n\n set open(val) {\n val = Boolean(val);\n\n if (val) {\n this.setAttribute(\"open\", \"\");\n } else {\n this.removeAttribute(\"open\");\n }\n }\n\n get activeIndex() {\n return this.getAttribute(\"active-index\");\n }\n\n set activeIndex(val) {\n this.setAttribute(\"active-index\", val);\n }\n\n get reflow() {\n return this.hasAttribute(\"reflow\");\n }\n\n set reflow(val) {\n val = Boolean(val);\n\n if (val) {\n this.setAttribute(\"reflow\", \"\");\n } else {\n this.removeAttribute(\"reflow\");\n }\n }\n}\n\nPFElement.create(PfeSearchDroplist);\nPFElement.create(PfeAutocomplete);\n\nexport default PfeAutocomplete;\n//# sourceMappingURL=pfe-autocomplete.js.map\n"],"names":["KEYCODE","throttle","PfeAutocomplete","PFElement","loading","debounce","this","slotElems","shadowRoot","querySelector","assignedNodes","filter","n","nodeType","Node","ELEMENT_NODE","_input","addEventListener","_inputChanged","bind","_closeDroplist","setAttribute","_clearBtn","_clear","_searchBtn","_search","_dropdown","data","activeIndex","_inputKeyUp","_optionSelected","removeEventListener","attr","oldVal","newVal","value","removeAttribute","isDisabled","_reset","hasAttribute","setTimeout","_sendAutocompleteRequest","_this2","focus","_doSearch","open","e","selectedValue","detail","optionValue","searchQuery","dispatchEvent","CustomEvent","searchValue","input","autocompleteRequest","query","_autocompleteCallback","response","reflow","length","_openDroplist","parseInt","innerHTML","key","keyCode","optionsLength","_activeOption","getAttribute","val","Boolean","PfeSearchDroplist","_ariaAnnounce","_ul","target","tagName","innerText","options","map","item","index","join","name","_activeIndexChanged","_renderOptions","classList","remove","activeOption","add","ulWrapper","activeOptionHeight","offsetHeight","window","getComputedStyle","getPropertyValue","scrollTop","offsetTop","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-autocomplete/pfe-search-droplist.css b/elements/pfe-autocomplete/pfe-search-droplist.css new file mode 100644 index 0000000000..953c1046fb --- /dev/null +++ b/elements/pfe-autocomplete/pfe-search-droplist.css @@ -0,0 +1,84 @@ +/* + * Copyright 2018 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. + */ +/* Palette of Border Colors */ +/* Palette of Feedback Colors */ +:host { + position: relative; + display: none; + font-family: var(--pfe-theme--font-family); + font-size: var(--pfe-theme--font-size); + line-height: var(--pfe-theme--line-height); +} + +:host([open]) { + display: block; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} + +.droplist { + position: absolute; + top: 100%; + left: 0px; + right: 0px; + max-height: 250px; + z-index: 9999; + overflow-y: scroll; + overflow-x: hidden; + border: 1px solid #ccc; + background-color: #fff; +} + +ul { + font-family: var(--pfe-theme--font-family); + font-size: var(--pfe-theme--font-size); + line-height: var(--pfe-theme--line-height); + border-top: none; + margin: 0px; + padding: 0px; + list-style: none; + cursor: pointer; +} + +ul li { + display: list-item; + cursor: pointer; + padding: 10px; + margin: 0px; + /*margin needs to be zero otherwise we have blind area on click*/ +} + +ul li.active { + background-color: #ececec; + background-color: var(--pfe-theme--color--surface--lighter, #ececec); +} + +/*# sourceMappingURL=pfe-search-droplist.css.map */ diff --git a/elements/pfe-autocomplete/pfe-search-droplist.css.map b/elements/pfe-autocomplete/pfe-search-droplist.css.map new file mode 100644 index 0000000000..579c1a4cc9 --- /dev/null +++ b/elements/pfe-autocomplete/pfe-search-droplist.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","pfe-search-droplist.css","../../pfe-sass/variables/_colors.scss","pfe-search-droplist.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;ECoBE;AC4GF,6BAAA;AAOA,+BAAA;ACrIA;EACE,kBAAkB;EAClB,aAAa;EACb,0CAA0C;EAC1C,sCAAsC;EACtC,0CAA0C;AFsB5C;;AEnBA;EACE,cAAc;AFsBhB;;AEnBA;EACE,kBAAkB;EAClB,UAAU;EACV,WAAW;EACX,UAAU;EACV,YAAY;EACZ,gBAAgB;EAChB,sBAAsB;EACtB,SAAS;AFsBX;;AEnBA;EACE,kBAAkB;EAClB,SAAS;EACT,SAAS;EACT,UAAU;EACV,iBAAiB;EACjB,aAAa;EACb,kBAAkB;EAClB,kBAAkB;EAClB,sBAAsB;EACtB,sBAAsB;AFsBxB;;AEnBA;EACE,0CAA0C;EAC1C,sCAAsC;EACtC,0CAA0C;EAC1C,gBAAgB;EAChB,WAAW;EACX,YAAY;EACZ,gBAAgB;EAChB,eAAe;AFsBjB;;AE9BA;EAWM,kBAAkB;EAClB,eAAe;EACf,aAAa;EACb,WAAW;EAAE,gEAAA;AFwBnB;;AEtCA;EAgBU,yBAAkB;EAAlB,oEAAkB;AF0B5B","file":"pfe-search-droplist.css","sourcesContent":["/*\n * Copyright 2018 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// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n","/*\n * Copyright 2018 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/* Palette of Border Colors */\n/* Palette of Feedback Colors */\n:host {\n position: relative;\n display: none;\n font-family: var(--pfe-theme--font-family);\n font-size: var(--pfe-theme--font-size);\n line-height: var(--pfe-theme--line-height);\n}\n\n:host([open]) {\n display: block;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.droplist {\n position: absolute;\n top: 100%;\n left: 0px;\n right: 0px;\n max-height: 250px;\n z-index: 9999;\n overflow-y: scroll;\n overflow-x: hidden;\n border: 1px solid #ccc;\n background-color: #fff;\n}\n\nul {\n font-family: var(--pfe-theme--font-family);\n font-size: var(--pfe-theme--font-size);\n line-height: var(--pfe-theme--line-height);\n border-top: none;\n margin: 0px;\n padding: 0px;\n list-style: none;\n cursor: pointer;\n}\n\nul li {\n display: list-item;\n cursor: pointer;\n padding: 10px;\n margin: 0px;\n /*margin needs to be zero otherwise we have blind area on click*/\n}\n\nul li.active {\n background-color: var(--pfe-theme--color--surface--lighter, #ececec);\n}\n","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text: $pfelements--gray-dark !default;\n$pfe-color--text--on-dark: $pfe-color--white !default;\n$pfe-color--text--on-saturated: $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link: #06c !default;\n$pfe-color--ui-link--visited: $pfelements--purple !default; // Was #7551a6\n$pfe-color--ui-link--hover: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-dark--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-saturated--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base: $pfelements--blue !default;\n$pfe-color--ui-base--hover: darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement: $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover: $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent: $pfelements--orange !default;\n$pfe-color--ui-accent--hover: darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text: $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover: $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest: $pfe-color--white !default;\n$pfe-color--surface--lightest--text: $pfe-color--text !default;\n$pfe-color--surface--lightest--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus: $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text: $pfe-color--text !default;\n$pfe-color--surface--lighter--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus: $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base: $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text: $pfe-color--text !default;\n$pfe-color--surface--base--link: #00538c !default; // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited: #7551a6 !default;\n$pfe-color--surface--base--link--hover: #00305b !default;\n$pfe-color--surface--base--link--focus: #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker: $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest: $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement: $pfelements--blue;\n$pfe-color--surface--complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent: $pfelements--orange;\n$pfe-color--surface--accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc\n$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7\n$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical: $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important: $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest: $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest: $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate: $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest: $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest: $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success: #2e7d32 !default;\n$pfe-color--feedback--success--lightest: $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest: #1b5e20 !default;\n\n$pfe-color--feedback--info: #0277bd !default;\n$pfe-color--feedback--info--lightest: $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest: #01579b !default;\n\n$pfe-color--feedback--default: $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest: $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest: $pfe-color--gray-800 !default;\n","@import \"../pfe-sass/pfe-sass\";\n\n:host {\n position: relative;\n display: none;\n font-family: var(--pfe-theme--font-family);\n font-size: var(--pfe-theme--font-size);\n line-height: var(--pfe-theme--line-height);\n}\n\n:host([open]) {\n display: block;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.droplist {\n position: absolute;\n top: 100%;\n left: 0px;\n right: 0px;\n max-height: 250px;\n z-index: 9999;\n overflow-y: scroll;\n overflow-x: hidden;\n border: 1px solid #ccc;\n background-color: #fff;\n}\n\nul {\n font-family: var(--pfe-theme--font-family);\n font-size: var(--pfe-theme--font-size);\n line-height: var(--pfe-theme--line-height);\n border-top: none;\n margin: 0px;\n padding: 0px;\n list-style: none;\n cursor: pointer;\n\n li {\n display: list-item;\n cursor: pointer;\n padding: 10px;\n margin: 0px; /*margin needs to be zero otherwise we have blind area on click*/\n &.active {\n background-color: #{pfe-color( surface--lighter )};;\n }\n }\n}\n"]} \ No newline at end of file diff --git a/elements/pfe-autocomplete/pfe-search-droplist.css.min.map b/elements/pfe-autocomplete/pfe-search-droplist.css.min.map new file mode 100644 index 0000000000..e69de29bb2 diff --git a/elements/pfe-autocomplete/pfe-search-droplist.min.css b/elements/pfe-autocomplete/pfe-search-droplist.min.css new file mode 100644 index 0000000000..c2490d0e93 --- /dev/null +++ b/elements/pfe-autocomplete/pfe-search-droplist.min.css @@ -0,0 +1 @@ +:host{position:relative;display:none;font-family:var(--pfe-theme--font-family);font-size:var(--pfe-theme--font-size);line-height:var(--pfe-theme--line-height)}:host([open]){display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.droplist{position:absolute;top:100%;left:0;right:0;max-height:250px;z-index:9999;overflow-y:scroll;overflow-x:hidden;border:1px solid #ccc;background-color:#fff}ul{font-family:var(--pfe-theme--font-family);font-size:var(--pfe-theme--font-size);line-height:var(--pfe-theme--line-height);border-top:none;margin:0;padding:0;list-style:none;cursor:pointer}ul li{display:list-item;cursor:pointer;padding:10px;margin:0}ul li.active{background-color:#ececec;background-color:var(--pfe-theme--color--surface--lighter,#ececec)} \ No newline at end of file diff --git a/elements/pfe-avatar/djb-hash.js b/elements/pfe-avatar/djb-hash.js new file mode 100644 index 0000000000..8ca6d0ba45 --- /dev/null +++ b/elements/pfe-avatar/djb-hash.js @@ -0,0 +1,20 @@ +/** + * 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; +} + +export { hash }; diff --git a/elements/pfe-avatar/hslrgb.js b/elements/pfe-avatar/hslrgb.js new file mode 100644 index 0000000000..8c2a2e6303 --- /dev/null +++ b/elements/pfe-avatar/hslrgb.js @@ -0,0 +1,107 @@ +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 + */ +export 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 = 255 * h2rgb(a, b, H + 1 / 3); + G = 255 * h2rgb(a, b, H); + B = 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 + */ +export 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]; +} diff --git a/elements/pfe-avatar/package.json b/elements/pfe-avatar/package.json index dc53afff2e..1820050dd7 100644 --- a/elements/pfe-avatar/package.json +++ b/elements/pfe-avatar/package.json @@ -4,7 +4,7 @@ "className": "PfeAvatar", "elementName": "pfe-avatar" }, - "version": "1.0.0-prerelease.11", + "version": "1.0.0-prerelease.13", "description": "Avatar for PatternFly Elements", "keywords": [ "web-components", @@ -12,7 +12,7 @@ ], "repository": { "type": "git", - "url" : "github:patternfly/patternfly-elements", + "url": "github:patternfly/patternfly-elements", "directory": "elements/pfe-avatar" }, "publishConfig": { @@ -31,8 +31,8 @@ ], "license": "MIT", "dependencies": { - "@patternfly/pfe-sass": "^1.0.0-prerelease.11", - "@patternfly/pfelement": "^1.0.0-prerelease.11" + "@patternfly/pfe-sass": "^1.0.0-prerelease.13", + "@patternfly/pfelement": "^1.0.0-prerelease.13" }, "generator-pfelement-version": "0.6.8" } diff --git a/elements/pfe-avatar/pfe-avatar.css b/elements/pfe-avatar/pfe-avatar.css new file mode 100644 index 0000000000..029a6f45d0 --- /dev/null +++ b/elements/pfe-avatar/pfe-avatar.css @@ -0,0 +1,80 @@ +/* + * Copyright 2018 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. + */ +/* Palette of Border Colors */ +/* Palette of Feedback Colors */ +:host { + --pfe-avatar--width: 128px; + display: block; + position: relative; + width: var(--pfe-avatar--width); + height: var(--pfe-avatar--width); +} + +:host canvas { + width: 100%; + height: 100%; + image-rendering: optimizeSpeed; + /* Older versions of FF */ + image-rendering: -moz-crisp-edges; + /* FF 6.0+ */ + image-rendering: -webkit-optimize-contrast; + /* Safari */ + image-rendering: -o-crisp-edges; + /* OS X & Windows Opera (12.02+) */ + image-rendering: -o-pixelated; + image-rendering: pixelated; + /* Awesome future-browsers */ + -ms-interpolation-mode: nearest-neighbor; + /* IE */ +} + +:host([pfe-shape="rounded"]) img, +:host([pfe-shape="rounded"]) canvas { + border-radius: calc(var(--pfe-avatar--width) / 8 + 1px); +} + +:host([pfe-shape="circle"]) img, +:host([pfe-shape="circle"]) canvas { + border-radius: 50%; +} + +:host([pfe-src]) canvas { + display: none; +} + +:host([pfe-src]) img { + display: block; + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; +} + +:host(:not([pfe-src])) img { + display: none; +} + +:host([hidden]) { + display: none; +} + +/*# sourceMappingURL=pfe-avatar.css.map */ diff --git a/elements/pfe-avatar/pfe-avatar.css.map b/elements/pfe-avatar/pfe-avatar.css.map new file mode 100644 index 0000000000..90f037250c --- /dev/null +++ b/elements/pfe-avatar/pfe-avatar.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","pfe-avatar.css","../../pfe-sass/variables/_colors.scss","pfe-avatar.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;ECoBE;AC4GF,6BAAA;AAOA,+BAAA;ACrIA;EACE,0BAAoB;EAEpB,cAAc;EACd,kBAAkB;EAElB,+BAA+B;EAC/B,gCAAgC;AFoBlC;;AE3BA;EAUI,WAAW;EACX,YAAY;EAEZ,8BAA8B;EAAE,kCAAA;EAChC,iCAAiC;EAAE,kCAAA;EACnC,0CAA0C;EAAE,kCAAA;EAC5C,+BAA+B;EAAE,kCAAA;EACjC,6BAA0B;EAA1B,0BAA0B;EAAE,kCAAA;EAC5B,wCAAwC;EAAE,kCAAA;AF0B9C;;AEtBA;;EAOI,uDAAuD;AFoB3D;;AEhBA;;EAGI,kBAAkB;AFkBtB;;AEbA;EAEI,aAAa;AFejB;;AEjBA;EAMI,cAAc;EACd,WAAW;EACX,YAAY;EACZ,oBAAiB;KAAjB,iBAAiB;AFerB;;AEVA;EACE,aAAa;AFaf;;AEVA;EACE,aAAa;AFaf","file":"pfe-avatar.css","sourcesContent":["/*\n * Copyright 2018 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// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n","/*\n * Copyright 2018 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/* Palette of Border Colors */\n/* Palette of Feedback Colors */\n:host {\n --pfe-avatar--width: 128px;\n display: block;\n position: relative;\n width: var(--pfe-avatar--width);\n height: var(--pfe-avatar--width);\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([pfe-shape=\"rounded\"]) img,\n:host([pfe-shape=\"rounded\"]) canvas {\n border-radius: calc(var(--pfe-avatar--width) / 8 + 1px);\n}\n\n:host([pfe-shape=\"circle\"]) img,\n:host([pfe-shape=\"circle\"]) canvas {\n border-radius: 50%;\n}\n\n:host([pfe-src]) canvas {\n display: none;\n}\n\n:host([pfe-src]) img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n:host(:not([pfe-src])) img {\n display: none;\n}\n\n:host([hidden]) {\n display: none;\n}\n","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text: $pfelements--gray-dark !default;\n$pfe-color--text--on-dark: $pfe-color--white !default;\n$pfe-color--text--on-saturated: $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link: #06c !default;\n$pfe-color--ui-link--visited: $pfelements--purple !default; // Was #7551a6\n$pfe-color--ui-link--hover: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-dark--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-saturated--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base: $pfelements--blue !default;\n$pfe-color--ui-base--hover: darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement: $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover: $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent: $pfelements--orange !default;\n$pfe-color--ui-accent--hover: darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text: $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover: $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest: $pfe-color--white !default;\n$pfe-color--surface--lightest--text: $pfe-color--text !default;\n$pfe-color--surface--lightest--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus: $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text: $pfe-color--text !default;\n$pfe-color--surface--lighter--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus: $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base: $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text: $pfe-color--text !default;\n$pfe-color--surface--base--link: #00538c !default; // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited: #7551a6 !default;\n$pfe-color--surface--base--link--hover: #00305b !default;\n$pfe-color--surface--base--link--focus: #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker: $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest: $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement: $pfelements--blue;\n$pfe-color--surface--complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent: $pfelements--orange;\n$pfe-color--surface--accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc\n$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7\n$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical: $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important: $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest: $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest: $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate: $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest: $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest: $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success: #2e7d32 !default;\n$pfe-color--feedback--success--lightest: $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest: #1b5e20 !default;\n\n$pfe-color--feedback--info: #0277bd !default;\n$pfe-color--feedback--info--lightest: $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest: #01579b !default;\n\n$pfe-color--feedback--default: $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest: $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest: $pfe-color--gray-800 !default;\n","@import \"../../pfe-sass/pfe-sass\";\n\n:host {\n --pfe-avatar--width: 128px;\n\n display: block;\n position: relative;\n\n width: var(--pfe-avatar--width);\n height: var(--pfe-avatar--width); // not a typo; width == height\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([pfe-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(var(--pfe-avatar--width) / 8 + 1px);\n }\n}\n\n:host([pfe-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([pfe-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([pfe-src])) img {\n display: none;\n}\n\n:host([hidden]) {\n display: none;\n}\n"]} \ No newline at end of file diff --git a/elements/pfe-avatar/pfe-avatar.css.min.map b/elements/pfe-avatar/pfe-avatar.css.min.map new file mode 100644 index 0000000000..e69de29bb2 diff --git a/elements/pfe-avatar/pfe-avatar.js b/elements/pfe-avatar/pfe-avatar.js new file mode 100644 index 0000000000..78ac2a90c7 --- /dev/null +++ b/elements/pfe-avatar/pfe-avatar.js @@ -0,0 +1,474 @@ +import PFElement from '../pfelement/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 = 255 * h2rgb(a, b, H + 1 / 3); + G = 255 * h2rgb(a, b, H); + B = 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]; +} + +/* + * @license + * Copyright 2019 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 { + + get html() { + return ` +`; + } + static get tag() { + return "pfe-avatar"; + } + + get templateUrl() { + return "pfe-avatar.html"; + } + + get styleUrl() { + return "pfe-avatar.scss"; + } + + static get observedAttributes() { + return ["pfe-name", "pfe-pattern", "pfe-src", "pfe-shape"]; + } + + static get patterns() { + return { + triangles: "triangles", + squares: "squares" + }; + } + + static get defaultColors() { + return "#67accf #448087 #709c6b #a35252 #826cbb"; + } + + get name() { + return this.getAttribute("pfe-name"); + } + + set name(val) { + return this.setAttribute("pfe-name", val); + } + + get src() { + return this.getAttribute("pfe-src"); + } + + set src(href) { + return this.setAttribute("pfe-src", href); + } + + get pattern() { + return this.getAttribute("pfe-pattern") || PfeAvatar.patterns.squares; + } + + set pattern(name) { + if (!PfeAvatar.patterns[name]) { + this.log( + `invalid pattern "${name}", valid patterns are: ${Object.values( + PfeAvatar.patterns + )}` + ); + return; + } + return this.setAttribute("pfe-pattern", name); + } + + constructor() { + super(PfeAvatar); + } + + connectedCallback() { + super.connectedCallback(); + + this._initCanvas(); + + this.dispatchEvent( + new CustomEvent(`${PfeAvatar.tag}:connected`, { + bubbles: false + }) + ); + } + + attributeChangedCallback(attr, oldValue, newValue) { + super.attributeChangedCallback(...arguments); + + if (this.connected) { + this.update(); + } else { + this.addEventListener(`${PfeAvatar.tag}:connected`, () => this.update()); + } + } + + _initCanvas() { + this._canvas = this.shadowRoot.querySelector("canvas"); + const size = this.var("--pfe-avatar--width").replace(/px$/, ""); + 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 themeColors = this.var("--pfe-avatar--colors") || this.defaultColors; + + themeColors.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); + } + + update() { + // if we have a src element, update the img, otherwise update the random pattern + if (this.hasAttribute("pfe-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/pfe-avatar.js.map b/elements/pfe-avatar/pfe-avatar.js.map new file mode 100644 index 0000000000..d7f079de96 --- /dev/null +++ b/elements/pfe-avatar/pfe-avatar.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-avatar.js","sources":["djb-hash.js","hslrgb.js","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 = 255 * h2rgb(a, b, H + 1 / 3);\n G = 255 * h2rgb(a, b, H);\n B = 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 * @license\n * Copyright 2019 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/pfelement.js\";\nimport { hash } from \"./djb-hash.js\";\nimport { hsl2rgb, rgb2hsl } from \"./hslrgb.js\";\n\nclass PfeAvatar extends PFElement {\n\n get html() {\n return `\n`;\n }\n static get tag() {\n return \"pfe-avatar\";\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 observedAttributes() {\n return [\"pfe-name\", \"pfe-pattern\", \"pfe-src\", \"pfe-shape\"];\n }\n\n static get patterns() {\n return {\n triangles: \"triangles\",\n squares: \"squares\"\n };\n }\n\n static get defaultColors() {\n return \"#67accf #448087 #709c6b #a35252 #826cbb\";\n }\n\n get name() {\n return this.getAttribute(\"pfe-name\");\n }\n\n set name(val) {\n return this.setAttribute(\"pfe-name\", val);\n }\n\n get src() {\n return this.getAttribute(\"pfe-src\");\n }\n\n set src(href) {\n return this.setAttribute(\"pfe-src\", href);\n }\n\n get pattern() {\n return this.getAttribute(\"pfe-pattern\") || PfeAvatar.patterns.squares;\n }\n\n set pattern(name) {\n if (!PfeAvatar.patterns[name]) {\n this.log(\n `invalid pattern \"${name}\", valid patterns are: ${Object.values(\n PfeAvatar.patterns\n )}`\n );\n return;\n }\n return this.setAttribute(\"pfe-pattern\", name);\n }\n\n constructor() {\n super(PfeAvatar);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this._initCanvas();\n\n this.dispatchEvent(\n new CustomEvent(`${PfeAvatar.tag}:connected`, {\n bubbles: false\n })\n );\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n super.attributeChangedCallback(...arguments);\n\n if (this.connected) {\n this.update();\n } else {\n this.addEventListener(`${PfeAvatar.tag}:connected`, () => this.update());\n }\n }\n\n _initCanvas() {\n this._canvas = this.shadowRoot.querySelector(\"canvas\");\n const size = this.var(\"--pfe-avatar--width\").replace(/px$/, \"\");\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 themeColors = this.var(\"--pfe-avatar--colors\") || this.defaultColors;\n\n themeColors.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(\n colorCode\n );\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 update() {\n // if we have a src element, update the img, otherwise update the random pattern\n if (this.hasAttribute(\"pfe-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(\n (PfeAvatar.colors.length * parseInt(bitPattern, 2)) / Math.pow(2, 32)\n );\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(\n this._squareSize * x,\n this._squareSize * y,\n this._squareSize,\n this._squareSize\n );\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(\n [4 - p1[0], p1[1]],\n [4 - p2[0], p2[1]],\n [4 - p3[0], p3[1]]\n );\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(\n 0,\n this._canvas.height,\n this._canvas.width,\n 0\n );\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":"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"} \ No newline at end of file diff --git a/elements/pfe-avatar/pfe-avatar.min.css b/elements/pfe-avatar/pfe-avatar.min.css new file mode 100644 index 0000000000..6ad2148403 --- /dev/null +++ b/elements/pfe-avatar/pfe-avatar.min.css @@ -0,0 +1 @@ +:host{--pfe-avatar--width:128px;display:block;position:relative;width:var(--pfe-avatar--width);height:var(--pfe-avatar--width)}: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([pfe-shape=rounded]) canvas,:host([pfe-shape=rounded]) img{border-radius:calc(var(--pfe-avatar--width)/ 8 + 1px)}:host([pfe-shape=circle]) canvas,:host([pfe-shape=circle]) img{border-radius:50%}:host([pfe-src]) canvas{display:none}:host([pfe-src]) img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}:host(:not([pfe-src])) img{display:none}:host([hidden]){display:none} \ No newline at end of file diff --git a/elements/pfe-avatar/pfe-avatar.min.js b/elements/pfe-avatar/pfe-avatar.min.js new file mode 100644 index 0000000000..6f9e313873 --- /dev/null +++ b/elements/pfe-avatar/pfe-avatar.min.js @@ -0,0 +1,26 @@ +import t from"../pfelement/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} +/* + * @license + * Copyright 2019 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{get html(){return"\n"}static get tag(){return"pfe-avatar"}get templateUrl(){return"pfe-avatar.html"}get styleUrl(){return"pfe-avatar.scss"}static get observedAttributes(){return["pfe-name","pfe-pattern","pfe-src","pfe-shape"]}static get patterns(){return{triangles:"triangles",squares:"squares"}}static get defaultColors(){return"#67accf #448087 #709c6b #a35252 #826cbb"}get name(){return this.getAttribute("pfe-name")}set name(t){return this.setAttribute("pfe-name",t)}get src(){return this.getAttribute("pfe-src")}set src(t){return this.setAttribute("pfe-src",t)}get pattern(){return this.getAttribute("pfe-pattern")||a.patterns.squares}set pattern(t){if(a.patterns[t])return this.setAttribute("pfe-pattern",t);this.log(`invalid pattern "${t}", valid patterns are: ${Object.values(a.patterns)}`)}constructor(){super(a)}connectedCallback(){super.connectedCallback(),this._initCanvas(),this.dispatchEvent(new CustomEvent(`${a.tag}:connected`,{bubbles:!1}))}attributeChangedCallback(t,e,r){super.attributeChangedCallback(...arguments),this.connected?this.update():this.addEventListener(`${a.tag}:connected`,()=>this.update())}_initCanvas(){this._canvas=this.shadowRoot.querySelector("canvas");const t=this.var("--pfe-avatar--width").replace(/px$/,"");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")}static _registerColors(){return this.colors=[],(this.var("--pfe-avatar--colors")||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.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.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 r,i,s;const n=Math.max(0,Math.min(255,t))/255,h=Math.max(0,Math.min(255,e))/255,o=Math.max(0,Math.min(255,a))/255,c=Math.min(Math.min(n,h),o),l=Math.max(Math.max(n,h),o),d=l-c;if(s=(l+c)/2,0===d)r=0,i=0;else{i=s<.5?d/(l+c):d/(2-l-c);const t=((l-n)/6+d/2)/d,e=((l-h)/6+d/2)/d,a=((l-o)/6+d/2)/d;n==l?r=a-e:h==l?r=1/3+t-a:o==l&&(r=2/3+e-t),r<0?r+=1:r>1&&(r-=1)}return[r,i,s]}(...t);return a[2]+=a[2]>.1?-.1:.1,function(t,a,r){let i,s,n;const h=Math.max(0,Math.min(1,t)),o=Math.max(0,Math.min(1,a)),c=Math.max(0,Math.min(1,r));if(0==o)i=255*c,s=255*c,n=255*c;else{let t,a;i=255*e(t=2*c-(a=c<.5?c*(1+o):c+o-o*c),a,h+1/3),s=255*e(t,a,h),n=255*e(t,a,h-1/3)}return[i,s,n]}(...a)}update(){if(this.hasAttribute("pfe-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),r=[t,a],i=[t,a],s=[t,a];switch(e%4){case 0:i[1]++,s[0]++,s[1]++;break;case 1:i[0]++,s[0]++,s[1]++;break;case 2:i[0]++,s[1]++;break;case 3:r[0]++,i[0]++,i[1]++,s[1]++}this._drawMirroredTriangle(r,i,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,r=e;/^#[A-f0-9]{3}$/.test(e)?(a+="c",r+="0"):/^#[A-f0-9]{6}$/.test(e)&&(a+="cc",r+="00"),t.addColorStop(0,a),t.addColorStop(1,r),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/pfe-avatar.min.js.map b/elements/pfe-avatar/pfe-avatar.min.js.map new file mode 100644 index 0000000000..ed38f54afa --- /dev/null +++ b/elements/pfe-avatar/pfe-avatar.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-avatar.min.js","sources":["pfe-avatar.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\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\nfunction 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 */\nfunction 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 = 255 * h2rgb(a, b, H + 1 / 3);\n G = 255 * h2rgb(a, b, H);\n B = 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 */\nfunction 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/*\n * @license\n * Copyright 2019 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\nclass PfeAvatar extends PFElement {\n\n get html() {\n return `\n`;\n }\n static get tag() {\n return \"pfe-avatar\";\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 observedAttributes() {\n return [\"pfe-name\", \"pfe-pattern\", \"pfe-src\", \"pfe-shape\"];\n }\n\n static get patterns() {\n return {\n triangles: \"triangles\",\n squares: \"squares\"\n };\n }\n\n static get defaultColors() {\n return \"#67accf #448087 #709c6b #a35252 #826cbb\";\n }\n\n get name() {\n return this.getAttribute(\"pfe-name\");\n }\n\n set name(val) {\n return this.setAttribute(\"pfe-name\", val);\n }\n\n get src() {\n return this.getAttribute(\"pfe-src\");\n }\n\n set src(href) {\n return this.setAttribute(\"pfe-src\", href);\n }\n\n get pattern() {\n return this.getAttribute(\"pfe-pattern\") || PfeAvatar.patterns.squares;\n }\n\n set pattern(name) {\n if (!PfeAvatar.patterns[name]) {\n this.log(\n `invalid pattern \"${name}\", valid patterns are: ${Object.values(\n PfeAvatar.patterns\n )}`\n );\n return;\n }\n return this.setAttribute(\"pfe-pattern\", name);\n }\n\n constructor() {\n super(PfeAvatar);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this._initCanvas();\n\n this.dispatchEvent(\n new CustomEvent(`${PfeAvatar.tag}:connected`, {\n bubbles: false\n })\n );\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n super.attributeChangedCallback(...arguments);\n\n if (this.connected) {\n this.update();\n } else {\n this.addEventListener(`${PfeAvatar.tag}:connected`, () => this.update());\n }\n }\n\n _initCanvas() {\n this._canvas = this.shadowRoot.querySelector(\"canvas\");\n const size = this.var(\"--pfe-avatar--width\").replace(/px$/, \"\");\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 themeColors = this.var(\"--pfe-avatar--colors\") || this.defaultColors;\n\n themeColors.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(\n colorCode\n );\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 update() {\n // if we have a src element, update the img, otherwise update the random pattern\n if (this.hasAttribute(\"pfe-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(\n (PfeAvatar.colors.length * parseInt(bitPattern, 2)) / Math.pow(2, 32)\n );\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(\n this._squareSize * x,\n this._squareSize * y,\n this._squareSize,\n this._squareSize\n );\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(\n [4 - p1[0], p1[1]],\n [4 - p2[0], p2[1]],\n [4 - p3[0], p3[1]]\n );\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(\n 0,\n this._canvas.height,\n this._canvas.width,\n 0\n );\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//# sourceMappingURL=pfe-avatar.js.map\n"],"names":["h2rgb","v1","v2","vH","PfeAvatar","PFElement","html","tag","templateUrl","styleUrl","observedAttributes","patterns","triangles","squares","defaultColors","name","this","getAttribute","val","setAttribute","src","href","pattern","log","Object","values","[object Object]","super","connectedCallback","_initCanvas","dispatchEvent","CustomEvent","bubbles","attr","oldValue","newValue","attributeChangedCallback","arguments","connected","update","addEventListener","_canvas","shadowRoot","querySelector","size","var","replace","width","height","_squareSize","_triangleSize","_ctx","getContext","colors","split","forEach","colorCode","length","exec","shift","color","map","c","parseInt","_registerColor","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","hsl2rgb","hasAttribute","bitPattern","str","hash","i","charCodeAt","toString","arrPattern","n","Number","_colorIndex","floor","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/pfe-avatar.umd.js b/elements/pfe-avatar/pfe-avatar.umd.js new file mode 100644 index 0000000000..393c2bb146 --- /dev/null +++ b/elements/pfe-avatar/pfe-avatar.umd.js @@ -0,0 +1,604 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('../pfelement/pfelement.umd')) : + typeof define === 'function' && define.amd ? define(['../pfelement/pfelement.umd'], factory) : + (global.PfeAvatar = factory(global.PFElement)); +}(this, (function (PFElement) { 'use strict'; + + PFElement = PFElement && PFElement.hasOwnProperty('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; + }; + + 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); + } + }; + + /** + * 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 = 255 * h2rgb(a, b, H + 1 / 3); + G = 255 * h2rgb(a, b, H); + B = 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]; + } + + /* + * @license + * Copyright 2019 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", + get: function get$$1() { + return "\n"; + } + }, { + key: "templateUrl", + get: function get$$1() { + return "pfe-avatar.html"; + } + }, { + key: "styleUrl", + get: function get$$1() { + return "pfe-avatar.scss"; + } + }, { + key: "name", + get: function get$$1() { + return this.getAttribute("pfe-name"); + }, + set: function set$$1(val) { + return this.setAttribute("pfe-name", val); + } + }, { + key: "src", + get: function get$$1() { + return this.getAttribute("pfe-src"); + }, + set: function set$$1(href) { + return this.setAttribute("pfe-src", href); + } + }, { + key: "pattern", + get: function get$$1() { + return this.getAttribute("pfe-pattern") || PfeAvatar.patterns.squares; + }, + set: function set$$1(name) { + if (!PfeAvatar.patterns[name]) { + this.log("invalid pattern \"" + name + "\", valid patterns are: " + Object.values(PfeAvatar.patterns)); + return; + } + return this.setAttribute("pfe-pattern", name); + } + }], [{ + key: "tag", + get: function get$$1() { + return "pfe-avatar"; + } + }, { + key: "observedAttributes", + get: function get$$1() { + return ["pfe-name", "pfe-pattern", "pfe-src", "pfe-shape"]; + } + }, { + key: "patterns", + get: function get$$1() { + return { + triangles: "triangles", + squares: "squares" + }; + } + }, { + key: "defaultColors", + get: function get$$1() { + return "#67accf #448087 #709c6b #a35252 #826cbb"; + } + }]); + + function PfeAvatar() { + classCallCheck(this, PfeAvatar); + return possibleConstructorReturn(this, (PfeAvatar.__proto__ || Object.getPrototypeOf(PfeAvatar)).call(this, PfeAvatar)); + } + + createClass(PfeAvatar, [{ + key: "connectedCallback", + value: function connectedCallback() { + get(PfeAvatar.prototype.__proto__ || Object.getPrototypeOf(PfeAvatar.prototype), "connectedCallback", this).call(this); + + this._initCanvas(); + + this.dispatchEvent(new CustomEvent(PfeAvatar.tag + ":connected", { + bubbles: false + })); + } + }, { + key: "attributeChangedCallback", + value: function attributeChangedCallback(attr, oldValue, newValue) { + var _this2 = this; + + get(PfeAvatar.prototype.__proto__ || Object.getPrototypeOf(PfeAvatar.prototype), "attributeChangedCallback", this).apply(this, arguments); + + if (this.connected) { + this.update(); + } else { + this.addEventListener(PfeAvatar.tag + ":connected", function () { + return _this2.update(); + }); + } + } + }, { + key: "_initCanvas", + value: function _initCanvas() { + this._canvas = this.shadowRoot.querySelector("canvas"); + var size = this.var("--pfe-avatar--width").replace(/px$/, ""); + 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: "update", + value: function update() { + // if we have a src element, update the img, otherwise update the random pattern + if (this.hasAttribute("pfe-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 themeColors = this.var("--pfe-avatar--colors") || this.defaultColors; + + themeColors.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/pfe-avatar.umd.js.map b/elements/pfe-avatar/pfe-avatar.umd.js.map new file mode 100644 index 0000000000..ba365490c7 --- /dev/null +++ b/elements/pfe-avatar/pfe-avatar.umd.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-avatar.umd.js","sources":["pfe-avatar.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\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\nfunction 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 */\nfunction 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 = 255 * h2rgb(a, b, H + 1 / 3);\n G = 255 * h2rgb(a, b, H);\n B = 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 */\nfunction 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/*\n * @license\n * Copyright 2019 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\nclass PfeAvatar extends PFElement {\n\n get html() {\n return `\n`;\n }\n static get tag() {\n return \"pfe-avatar\";\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 observedAttributes() {\n return [\"pfe-name\", \"pfe-pattern\", \"pfe-src\", \"pfe-shape\"];\n }\n\n static get patterns() {\n return {\n triangles: \"triangles\",\n squares: \"squares\"\n };\n }\n\n static get defaultColors() {\n return \"#67accf #448087 #709c6b #a35252 #826cbb\";\n }\n\n get name() {\n return this.getAttribute(\"pfe-name\");\n }\n\n set name(val) {\n return this.setAttribute(\"pfe-name\", val);\n }\n\n get src() {\n return this.getAttribute(\"pfe-src\");\n }\n\n set src(href) {\n return this.setAttribute(\"pfe-src\", href);\n }\n\n get pattern() {\n return this.getAttribute(\"pfe-pattern\") || PfeAvatar.patterns.squares;\n }\n\n set pattern(name) {\n if (!PfeAvatar.patterns[name]) {\n this.log(\n `invalid pattern \"${name}\", valid patterns are: ${Object.values(\n PfeAvatar.patterns\n )}`\n );\n return;\n }\n return this.setAttribute(\"pfe-pattern\", name);\n }\n\n constructor() {\n super(PfeAvatar);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this._initCanvas();\n\n this.dispatchEvent(\n new CustomEvent(`${PfeAvatar.tag}:connected`, {\n bubbles: false\n })\n );\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n super.attributeChangedCallback(...arguments);\n\n if (this.connected) {\n this.update();\n } else {\n this.addEventListener(`${PfeAvatar.tag}:connected`, () => this.update());\n }\n }\n\n _initCanvas() {\n this._canvas = this.shadowRoot.querySelector(\"canvas\");\n const size = this.var(\"--pfe-avatar--width\").replace(/px$/, \"\");\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 themeColors = this.var(\"--pfe-avatar--colors\") || this.defaultColors;\n\n themeColors.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(\n colorCode\n );\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 update() {\n // if we have a src element, update the img, otherwise update the random pattern\n if (this.hasAttribute(\"pfe-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(\n (PfeAvatar.colors.length * parseInt(bitPattern, 2)) / Math.pow(2, 32)\n );\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(\n this._squareSize * x,\n this._squareSize * y,\n this._squareSize,\n this._squareSize\n );\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(\n [4 - p1[0], p1[1]],\n [4 - p2[0], p2[1]],\n [4 - p3[0], p3[1]]\n );\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(\n 0,\n this._canvas.height,\n this._canvas.width,\n 0\n );\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//# sourceMappingURL=pfe-avatar.js.map\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","rgb2hsl","_R","_G","_B","r","g","var_min","var_max","del_max","del_r","del_g","del_b","PfeAvatar","getAttribute","val","setAttribute","href","patterns","squares","name","log","Object","values","triangles","_initCanvas","dispatchEvent","CustomEvent","tag","bubbles","attr","oldValue","newValue","arguments","connected","update","addEventListener","_canvas","shadowRoot","querySelector","size","var","replace","width","height","_squareSize","_triangleSize","_ctx","getContext","hasAttribute","src","bitPattern","toString","arrPattern","split","map","Number","n","_colorIndex","floor","colors","parseInt","pow","color1","color2","_clear","_drawBackground","pattern","_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","themeColors","defaultColors","forEach","colorCode","exec","shift","_registerColor","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/pfe-avatar.umd.min.js b/elements/pfe-avatar/pfe-avatar.umd.min.js new file mode 100644 index 0000000000..01c94c9dcd --- /dev/null +++ b/elements/pfe-avatar/pfe-avatar.umd.min.js @@ -0,0 +1,2 @@ +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("../pfelement/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min"],e):t.PfeAvatar=e(t.PFElement)}(this,function(e){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var r=function(){function a(t,e){for(var r=0;r:host{--pfe-avatar--width:128px;display:block;position:relative;width:var(--pfe-avatar--width);height:var(--pfe-avatar--width)}: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([pfe-shape=rounded]) canvas,:host([pfe-shape=rounded]) img{border-radius:calc(var(--pfe-avatar--width)/ 8 + 1px)}:host([pfe-shape=circle]) canvas,:host([pfe-shape=circle]) img{border-radius:50%}:host([pfe-src]) canvas{display:none}:host([pfe-src]) img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}:host(:not([pfe-src])) img{display:none}:host([hidden]){display:none}\n"}},{key:"templateUrl",get:function(){return"pfe-avatar.html"}},{key:"styleUrl",get:function(){return"pfe-avatar.scss"}},{key:"name",get:function(){return this.getAttribute("pfe-name")},set:function(t){return this.setAttribute("pfe-name",t)}},{key:"src",get:function(){return this.getAttribute("pfe-src")},set:function(t){return this.setAttribute("pfe-src",t)}},{key:"pattern",get:function(){return this.getAttribute("pfe-pattern")||i.patterns.squares},set:function(t){if(i.patterns[t])return this.setAttribute("pfe-pattern",t);this.log('invalid pattern "'+t+'", valid patterns are: '+Object.values(i.patterns))}}],[{key:"tag",get:function(){return"pfe-avatar"}},{key:"observedAttributes",get:function(){return["pfe-name","pfe-pattern","pfe-src","pfe-shape"]}},{key:"patterns",get:function(){return{triangles:"triangles",squares:"squares"}}},{key:"defaultColors",get:function(){return"#67accf #448087 #709c6b #a35252 #826cbb"}}]),r(i,[{key:"connectedCallback",value:function(){n(i.prototype.__proto__||Object.getPrototypeOf(i.prototype),"connectedCallback",this).call(this),this._initCanvas(),this.dispatchEvent(new CustomEvent(i.tag+":connected",{bubbles:!1}))}},{key:"attributeChangedCallback",value:function(t,e,r){var a=this;n(i.prototype.__proto__||Object.getPrototypeOf(i.prototype),"attributeChangedCallback",this).apply(this,arguments),this.connected?this.update():this.addEventListener(i.tag+":connected",function(){return a.update()})}},{key:"_initCanvas",value:function(){this._canvas=this.shadowRoot.querySelector("canvas");var t=this.var("--pfe-avatar--width").replace(/px$/,"");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:"update",value:function(){if(this.hasAttribute("pfe-src"))this.shadowRoot.querySelector("img").src=this.src;else{var t=function(t){for(var e=5381,r=t.length;r;)e=33*e^t.charCodeAt(--r);return e>>>0}(this.name).toString(2),e=t.split("").map(function(t){return Number(t)});this._colorIndex=Math.floor(i.colors.length*parseInt(t,2)/Math.pow(2,32)),this.color1=i.colors[this._colorIndex].color1,this.color2=i.colors[this._colorIndex].color2,this._clear(),this._drawBackground(),this.pattern===i.patterns.squares?this._drawSquarePattern(e):this.pattern===i.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,n,o=this;this._ctx.beginPath(),(a=this._ctx).moveTo.apply(a,s(t.map(function(t){return t*o._triangleSize}))),(i=this._ctx).lineTo.apply(i,s(e.map(function(t){return t*o._triangleSize}))),(n=this._ctx).lineTo.apply(n,s(r.map(function(t){return t*o._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 i=this;return this.colors=[],(this.var("--pfe-avatar--colors")||this.defaultColors).split(/\s+/).forEach(function(t){var e=void 0;switch(t.length){case 4:if(e=/^#([A-f0-9])([A-f0-9])([A-f0-9])$/.exec(t)){e.shift();var r=e.map(function(t){return parseInt(t+t,16)});i._registerColor(r)}else i.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.shift();var a=e.map(function(t){return parseInt(t,16)});i._registerColor(a)}else i.log("[pfe-avatar] invalid color "+t)}}),this.colors}},{key:"_registerColor",value:function(t){i.colors.push({color1:"rgb("+t.join(",")+")",color2:"rgb("+this._adjustColor(t).join(",")+")"})}},{key:"_adjustColor",value:function(t){var e=function(t,e,r){var a,i=void 0,n=void 0,o=Math.max(0,Math.min(255,t))/255,s=Math.max(0,Math.min(255,e))/255,c=Math.max(0,Math.min(255,r))/255,l=Math.min(Math.min(o,s),c),h=Math.max(Math.max(o,s),c),u=h-l;if(a=(h+l)/2,0===u)n=i=0;else{n=a<.5?u/(h+l):u/(2-h-l);var f=((h-o)/6+u/2)/u,p=((h-s)/6+u/2)/u,d=((h-c)/6+u/2)/u;o==h?i=d-p:s==h?i=1/3+f-d:c==h&&(i=2/3+p-f),i<0?i+=1:1>> 0;\n}\n\nfunction 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 */\nfunction 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 = 255 * h2rgb(a, b, H + 1 / 3);\n G = 255 * h2rgb(a, b, H);\n B = 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 */\nfunction 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/*\n * @license\n * Copyright 2019 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\nclass PfeAvatar extends PFElement {\n\n get html() {\n return `\n`;\n }\n static get tag() {\n return \"pfe-avatar\";\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 observedAttributes() {\n return [\"pfe-name\", \"pfe-pattern\", \"pfe-src\", \"pfe-shape\"];\n }\n\n static get patterns() {\n return {\n triangles: \"triangles\",\n squares: \"squares\"\n };\n }\n\n static get defaultColors() {\n return \"#67accf #448087 #709c6b #a35252 #826cbb\";\n }\n\n get name() {\n return this.getAttribute(\"pfe-name\");\n }\n\n set name(val) {\n return this.setAttribute(\"pfe-name\", val);\n }\n\n get src() {\n return this.getAttribute(\"pfe-src\");\n }\n\n set src(href) {\n return this.setAttribute(\"pfe-src\", href);\n }\n\n get pattern() {\n return this.getAttribute(\"pfe-pattern\") || PfeAvatar.patterns.squares;\n }\n\n set pattern(name) {\n if (!PfeAvatar.patterns[name]) {\n this.log(\n `invalid pattern \"${name}\", valid patterns are: ${Object.values(\n PfeAvatar.patterns\n )}`\n );\n return;\n }\n return this.setAttribute(\"pfe-pattern\", name);\n }\n\n constructor() {\n super(PfeAvatar);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this._initCanvas();\n\n this.dispatchEvent(\n new CustomEvent(`${PfeAvatar.tag}:connected`, {\n bubbles: false\n })\n );\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n super.attributeChangedCallback(...arguments);\n\n if (this.connected) {\n this.update();\n } else {\n this.addEventListener(`${PfeAvatar.tag}:connected`, () => this.update());\n }\n }\n\n _initCanvas() {\n this._canvas = this.shadowRoot.querySelector(\"canvas\");\n const size = this.var(\"--pfe-avatar--width\").replace(/px$/, \"\");\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 themeColors = this.var(\"--pfe-avatar--colors\") || this.defaultColors;\n\n themeColors.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(\n colorCode\n );\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 update() {\n // if we have a src element, update the img, otherwise update the random pattern\n if (this.hasAttribute(\"pfe-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(\n (PfeAvatar.colors.length * parseInt(bitPattern, 2)) / Math.pow(2, 32)\n );\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(\n this._squareSize * x,\n this._squareSize * y,\n this._squareSize,\n this._squareSize\n );\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(\n [4 - p1[0], p1[1]],\n [4 - p2[0], p2[1]],\n [4 - p3[0], p3[1]]\n );\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(\n 0,\n this._canvas.height,\n this._canvas.width,\n 0\n );\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//# sourceMappingURL=pfe-avatar.js.map\n"],"names":["h2rgb","v1","v2","vH","PfeAvatar","PFElement","this","getAttribute","val","setAttribute","href","patterns","squares","name","log","Object","values","_initCanvas","dispatchEvent","CustomEvent","tag","attr","oldValue","newValue","arguments","connected","update","addEventListener","_this2","_canvas","shadowRoot","querySelector","size","var","replace","width","height","_squareSize","_triangleSize","_ctx","getContext","hasAttribute","src","bitPattern","str","hash","i","length","charCodeAt","toString","arrPattern","split","map","Number","n","_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","defaultColors","forEach","colorCode","exec","shift","_registerColor","push","join","_adjustColor","hsl","_R","_G","_B","L","H","S","r","max","min","g","b","var_min","var_max","del_max","del_r","del_g","del_b","_H","_S","_L","R","G","B","a","_registerColors","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-band/package.json b/elements/pfe-band/package.json index ad04a8e68f..550a779c6e 100644 --- a/elements/pfe-band/package.json +++ b/elements/pfe-band/package.json @@ -9,7 +9,7 @@ "js": "src/pfe-band.js" } }, - "version": "1.0.0-prerelease.11", + "version": "1.0.0-prerelease.13", "description": "Band container for PatternFly Elements", "keywords": [ "web-components", @@ -17,7 +17,7 @@ ], "repository": { "type": "git", - "url" : "github:patternfly/patternfly-elements", + "url": "github:patternfly/patternfly-elements", "directory": "elements/pfe-band" }, "publishConfig": { @@ -37,8 +37,8 @@ ], "license": "MIT", "dependencies": { - "@patternfly/pfe-sass": "^1.0.0-prerelease.11", - "@patternfly/pfelement": "^1.0.0-prerelease.11" + "@patternfly/pfe-sass": "^1.0.0-prerelease.13", + "@patternfly/pfelement": "^1.0.0-prerelease.13" }, "generator-rhelement-version": "0.6.8" } diff --git a/elements/pfe-band/pfe-band.css b/elements/pfe-band/pfe-band.css new file mode 100644 index 0000000000..9d026d48a4 --- /dev/null +++ b/elements/pfe-band/pfe-band.css @@ -0,0 +1,422 @@ +/* + * Copyright 2018 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. + */ +/* Palette of Border Colors */ +/* Palette of Feedback Colors */ +:host, .pfe-band__container, .pfe-band__header, .pfe-band__body, .pfe-band__aside, .pfe-band__footer { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-flow: column nowrap; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; + -webkit-box-align: start; + -webkit-align-items: flex-start; + -ms-flex-align: start; + align-items: flex-start; +} + +.pfe-band__container, .pfe-band__header, .pfe-band__body, .pfe-band__aside, .pfe-band__footer { + display: grid; + grid-row-gap: var(--pfe-band--gutter--vertical); + grid-column-gap: var(--pfe-band--gutter--horizontal); + margin-bottom: 0; +} + +:host { + display: block; + --pfe-band--Padding--vertical: calc( var(--pfe-theme--container-spacer, 1rem) * 4); + --pfe-band--Padding--horizontal: calc( var(--pfe-theme--container-spacer, 1rem) * 1); + --pfe-band--Padding: var(--pfe-band--Padding--vertical) var(--pfe-band--Padding--horizontal); + --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--base, #dfdfdf); + --pfe-band--BackgroundPosition: center center; + --pfe-band--Border: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent; + --pfe-band--layout: 1fr; + --pfe-band__header--layout: 1fr; + --pfe-band__body--layout: 1fr; + --pfe-band__footer--layout: 1fr; + --pfe-band__aside--layout: 1fr; + --pfe-band--gutter--vertical: var(--pfe-theme--container-spacer, 1rem); + --pfe-band--gutter--horizontal: calc(var(--pfe-theme--container-spacer, 1rem) * 3); + --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--base--text, #333); + --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--base--link, #00538c); + --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--base--link--visited, #7551a6); + --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--base--link--hover, #00305b); + --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--base--link--focus, #00305b); + --pfe-band--Width: auto; + --pfe-band--Width__aside--sm: 240px; + --pfe-band--Width__aside--lg: 300px; + position: relative; + padding: calc(var(--pfe-band--Padding--vertical) / 2) var(--pfe-band--Padding--horizontal); + border: var(--pfe-band--Border); + background-color: var(--pfe-band--BackgroundColor); + background-position: var(--pfe-band--BackgroundPosition); + color: var(--pfe-broadcasted--color--text); +} + +@media screen and (min-width: 768px) { + :host { + --pfe-band--Width: calc( 768px - calc(var(--pfe-band--Padding--horizontal) * 4) ); + } +} + +@media screen and (min-width: 992px) { + :host { + --pfe-band--Width: calc( 992px - calc(var(--pfe-band--Padding--horizontal) * 4) ); + } +} + +@media screen and (min-width: 1200px) { + :host { + --pfe-band--Width: calc( 1200px - calc(var(--pfe-band--Padding--horizontal) * 4) ); + } +} + +@media print { + :host { + --pfe-band--Padding: calc(var(--pfe-band--Padding--vertical) / 2) var(--pfe-band--Padding--horizontal); + } +} + +@media (min-width: 576px) { + :host { + padding: var(--pfe-band--Padding); + } +} + +@media print { + :host { + background-color: white !important; + background-image: none !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + } +} + +:host *, :host *::before, :host *::after { + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +:host([pfe-color="darker"]) { + --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--darker, #464646); + --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--darker--text, #fff); + --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--darker--link, #99ccff); + --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--darker--link--visited, #b38cd9); + --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--darker--link--hover, #cce6ff); + --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--darker--link--focus, #cce6ff); +} + +:host([pfe-color="darkest"]) { + --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--darkest, #131313); + --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--darkest--text, #fff); + --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--darkest--link, #99ccff); + --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--darkest--link--visited, #b38cd9); + --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--darkest--link--hover, #cce6ff); + --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--darkest--link--focus, #cce6ff); +} + +:host([pfe-color="accent"]) { + --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--accent, #fe460d); + --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--accent--text, #fff); + --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--accent--link, #99ccff); + --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--accent--link--visited, #b38cd9); + --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--accent--link--hover, #cce6ff); + --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--accent--link--focus, #cce6ff); +} + +:host([pfe-color="complement"]) { + --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--complement, #0477a4); + --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--complement--text, #fff); + --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--complement--link, #99ccff); + --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--complement--link--visited, #b38cd9); + --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--complement--link--hover, #cce6ff); + --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--complement--link--focus, #cce6ff); +} + +:host([pfe-color="lighter"]) { + --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--lighter, #ececec); + --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--lighter--text, #333); + --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--lighter--link, #06c); + --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--lighter--link--visited, rebeccapurple); + --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--lighter--link--hover, #003366); + --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--lighter--link--focus, #003366); +} + +:host([pfe-color="lightest"]) { + --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--lightest, #fff); + --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--lightest--text, #333); + --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--lightest--link, #06c); + --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--lightest--link--visited, rebeccapurple); + --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--lightest--link--hover, #003366); + --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--lightest--link--focus, #003366); +} + +:host([pfe-size="small"]) { + --pfe-band--Padding: calc(var(--pfe-band--Padding--vertical) / 4) var(--pfe-band--Padding--horizontal); +} + +.pfe-band__container { + --pfe-band_region--width: calc(calc(1fr - var(--pfe-band--Width__aside--sm)) - var(--pfe-band--gutter--horizontal)); + --pfe-band--gridTemplateArea_mobile: "body"; + position: relative; + margin: 0 auto; + width: 100%; + max-width: var(--pfe-band--Width); +} + +.pfe-band__container[pfe-has-aside] { + --pfe-band--gridTemplateArea_mobile: + "body" "aside"; + --pfe-band--gridTemplateArea_desktop: + "body aside"; +} + +@media (min-width: 768px) { + .pfe-band__container[pfe-has-aside] { + --pfe-band--layout: 1fr var(--pfe-band--Width__aside--sm); + } +} + +@media (min-width: 992px) { + .pfe-band__container[pfe-has-aside] { + --pfe-band--layout: 1fr var(--pfe-band--Width__aside--lg); + } +} + +.pfe-band__container[pfe-has-aside][pfe-aside-mobile="top"] { + --pfe-band--gridTemplateArea_mobile: + "aside" "body"; +} + +.pfe-band__container[pfe-has-aside][pfe-aside-desktop="left"] { + --pfe-band--gridTemplateArea_desktop: + "aside body"; +} + +@media (min-width: 768px) { + .pfe-band__container[pfe-has-aside][pfe-aside-desktop="left"] { + --pfe-band--layout: var(--pfe-band--Width__aside--sm) 1fr; + } +} + +@media (min-width: 992px) { + .pfe-band__container[pfe-has-aside][pfe-aside-desktop="left"] { + --pfe-band--layout: var(--pfe-band--Width__aside--lg) 1fr; + } +} + +.pfe-band__container[pfe-has-header] { + --pfe-band--gridTemplateArea_mobile: + "header" "body"; +} + +.pfe-band__container[pfe-has-header][pfe-has-aside] { + --pfe-band--gridTemplateArea_mobile: + "header" + "body" "aside"; + --pfe-band--gridTemplateArea_desktop: + "header header" + "body aside"; +} + +.pfe-band__container[pfe-has-header][pfe-aside-mobile="top"] { + --pfe-band--gridTemplateArea_mobile: + "aside" + "header" + "body"; +} + +.pfe-band__container[pfe-has-header][pfe-aside-height="full"] { + --pfe-band--gridTemplateArea_desktop: + "header aside" + "body aside"; +} + +.pfe-band__container[pfe-has-header][pfe-aside-desktop="left"] { + --pfe-band--gridTemplateArea_desktop: + "header header" + "aside body"; +} + +.pfe-band__container[pfe-has-header][pfe-aside-desktop="left"][pfe-aside-height="full"] { + --pfe-band--gridTemplateArea_desktop: + "aside header" + "aside body"; +} + +.pfe-band__container[pfe-has-footer] { + --pfe-band--gridTemplateArea_mobile: + "body" + "footer"; +} + +.pfe-band__container[pfe-has-footer][pfe-has-aside] { + --pfe-band--gridTemplateArea_mobile: + "body" + "aside" + "footer"; + --pfe-band--gridTemplateArea_desktop: + "body aside" + "footer footer"; +} + +.pfe-band__container[pfe-has-footer][pfe-aside-mobile="top"] { + --pfe-band--gridTemplateArea_mobile: + "aside" + "body" + "footer"; +} + +.pfe-band__container[pfe-has-footer][pfe-aside-height="full"] { + --pfe-band--gridTemplateArea_desktop: + "body aside" + "footer aside" ; +} + +.pfe-band__container[pfe-has-footer][pfe-aside-desktop="left"] { + --pfe-band--gridTemplateArea_desktop: + "aside body" + "footer footer"; +} + +.pfe-band__container[pfe-has-footer][pfe-aside-desktop="left"][pfe-aside-height="full"] { + --pfe-band--gridTemplateArea_desktop: + "aside body" + "aside footer"; +} + +.pfe-band__container[pfe-has-header][pfe-has-footer] { + --pfe-band--gridTemplateArea_mobile: + "header" + "body" + "footer"; +} + +.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-has-aside] { + --pfe-band--gridTemplateArea_mobile: + "header" + "body" + "footer" + "aside"; + --pfe-band--gridTemplateArea_desktop: + "header header" + "body aside" + "footer footer"; +} + +.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-mobile="top"] { + --pfe-band--gridTemplateArea_mobile: + "aside" + "header" + "body" + "footer"; +} + +.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-height="full"] { + --pfe-band--gridTemplateArea_desktop: + "header aside" + "body aside" + "footer aside" ; +} + +.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-desktop="left"] { + --pfe-band--gridTemplateArea_desktop: + "header header" + "aside body" + "footer footer"; +} + +.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-desktop="left"][pfe-aside-height="full"] { + --pfe-band--gridTemplateArea_desktop: + "aside header" + "aside body" + "aside footer"; +} + +@supports (display: grid) { + .pfe-band__container { + grid-template-columns: var(--pfe-band--layout); + grid-template-rows: -webkit-max-content; + grid-template-rows: max-content; + grid-template-areas: var(--pfe-band--gridTemplateArea_mobile); + } + @media (min-width: 768px) { + .pfe-band__container { + grid-template-areas: var(--pfe-band--gridTemplateArea_desktop); + } + } +} + +.pfe-band__header { + margin-bottom: var(--pfe-band--gutter--vertical); +} + +@supports (display: grid) { + .pfe-band__header { + grid-area: header; + grid-template-columns: var(--pfe-band__header--layout); + } +} + +.pfe-band__body { + margin-bottom: var(--pfe-band--gutter--vertical); +} + +@supports (display: grid) { + .pfe-band__body { + grid-area: body; + grid-template-columns: var(--pfe-band__body--layout); + } +} + +.pfe-band__aside { + margin-bottom: var(--pfe-band--gutter--vertical); +} + +@supports (display: grid) { + .pfe-band__aside { + grid-area: aside; + grid-template-columns: var(--pfe-band__aside--layout); + } +} + +.pfe-band__footer { + margin-bottom: var(--pfe-band--gutter--vertical); +} + +@supports (display: grid) { + .pfe-band__footer { + grid-area: footer; + grid-template-columns: var(--pfe-band__footer--layout); + } +} + +.pfe-band__aside { + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; +} + +/*# sourceMappingURL=pfe-band.css.map */ diff --git a/elements/pfe-band/pfe-band.css.map b/elements/pfe-band/pfe-band.css.map new file mode 100644 index 0000000000..12bc6e1fc0 --- /dev/null +++ b/elements/pfe-band/pfe-band.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","pfe-band.css","../../pfe-sass/variables/_colors.scss","pfe-band.scss","../../pfe-sass/mixins/_mixins.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;ECoBE;AC4GF,6BAAA;AAOA,+BAAA;ACnIA;EACI,oBAAa;EAAb,qBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,4BAAwB;EAAxB,6BAAwB;EAAxB,gCAAwB;MAAxB,4BAAwB;UAAxB,wBAAwB;EACxB,wBAAuB;EAAvB,+BAAuB;MAAvB,qBAAuB;UAAvB,uBAAuB;AFoB3B;;AEjBA;EACE,aAAa;EACb,+CAAc;EACd,oDAAiB;EACjB,gBAAgB;AFoBlB;;AEjBA;EACE,cAAc;EAGd,gGAA8B;EAC9B,gGAAgC;EAEhC,qHAAoB;EAGpB,4FAA4B;EAC5B,0DAA+B;EAG/B,oJAAmB;EAGnB,iDAAmB;EACnB,iDAA2B;EAC3B,iDAAyB;EACzB,iDAA2B;EAC3B,iDAA0B;EAG1B,sFAA6B;EAC7B,gGAA+B;EAG/B,+FAA+B;EAC/B,kGAAkC;EAClC,2GAA2C;EAC3C,yGAAyC;EACzC,yGAAyC;EAIzC,uBAAkB;EAClB,mCAA6B;EAC7B,mCAA6B;EAc7B,kBAAkB;EAIlB,0FAAqF;EAOrF,+BAAQ;EAGR,kDAAuB;EACvB,wDAAuB;EACvB,0CAAuB;AFpBzB;;AENI;EA1CJ;IA2CM,iFAAkB;EFUtB;AACF;;AEZI;EA1CJ;IA2CM,iFAAkB;EFgBtB;AACF;;AElBI;EA1CJ;IA2CM,kFAAkB;EFsBtB;AACF;;AEnBE;EA/CF;IAgDI,sGAAoB;EFuBtB;AACF;;AEdE;EA1DF;IA2DI,iCAAS;EFkBX;AACF;;AG8CE;ED5HF;ICwII,kCAAkC;IAClC,iCAAiC;IACjC,mCAA2B;YAA3B,2BAA2B;EHrD7B;AACF;;AEtFA;EA2EI,8BAAsB;UAAtB,sBAAsB;AFe1B;;AEVE;EACE,+FAA4B;EAC5B,kGAA+B;EAC/B,qGAAkC;EAClC,8GAA2C;EAC3C,4GAAyC;EACzC,4GAAyC;AFa7C;;AEnBE;EACE,gGAA4B;EAC5B,mGAA+B;EAC/B,sGAAkC;EAClC,+GAA2C;EAC3C,6GAAyC;EACzC,6GAAyC;AFsB7C;;AE5BE;EACE,+FAA4B;EAC5B,kGAA+B;EAC/B,qGAAkC;EAClC,8GAA2C;EAC3C,4GAAyC;EACzC,4GAAyC;AF+B7C;;AErCE;EACE,mGAA4B;EAC5B,sGAA+B;EAC/B,yGAAkC;EAClC,kHAA2C;EAC3C,gHAAyC;EACzC,gHAAyC;AFwC7C;;AE9CE;EACE,gGAA4B;EAC5B,mGAA+B;EAC/B,mGAAkC;EAClC,qHAA2C;EAC3C,6GAAyC;EACzC,6GAAyC;AFiD7C;;AEvDE;EACE,8FAA4B;EAC5B,oGAA+B;EAC/B,oGAAkC;EAClC,sHAA2C;EAC3C,8GAAyC;EACzC,8GAAyC;AF0D7C;;AErDA;EACE,yGAAoB;AFwDtB;;AEpDE;EAEE,mHAAyB;EACzB,2CAAoC;EA2IpC,kBAAmB;EACnB,cAAiB;EACjB,WAAW;EACX,iCAAW;AFpFf;;AE7DG;EAMG;sBAAoC;EAEpC;oBAAqC;AF4D3C;;AE1DM;EAVH;IAWK,yDAAmB;EF8DzB;AACF;;AE7DM;EAbH;IAcK,yDAAmB;EFiEzB;AACF;;AEhFG;EAiBK;wBAAoC;AFoE5C;;AErFG;EAqBK;sBAAqC;AFqE7C;;AEnEQ;EAvBL;IAwBO,yDAAmB;EFuE3B;AACF;;AEtEQ;EA1BL;IA2BO,yDAAmB;EF0E3B;AACF;;AEtGG;EAgCG;uBAAoC;AF2E1C;;AE3GG;EAmCK;;wBAAoC;EAGpC;;sBAAqC;AF8E7C;;AEpHG;EA2CK;;;gBAAoC;AFgF5C;;AE3HG;EAiDK;;sBAAqC;AFgF7C;;AEjIG;EAsDK;;sBAAqC;AFiF7C;;AEvIG;EA0DO;;wBAAqC;AFmF/C;;AE7IG;EAiEG;;gBAAoC;AFkF1C;;AEnJG;EAqEK;;;kBAAoC;EAIpC;;yBAAqC;AFoF7C;;AE7JG;EA8EK;;;kBAAoC;AFsF5C;;AEpKG;EAoFK;;yBAAqC;AFsF7C;;AE1KG;EAyFK;;yBAAqC;AFuF7C;;AEhLG;EA6FO;;0BAAqC;AFyF/C;;AEtLG;EAoGG;;;gBAAoC;AFyF1C;;AE7LG;EAyGK;;;;iBAAoC;EAKpC;;;yBAAqC;AF2F7C;;AEzMG;EAoHK;;;;kBAAoC;AF6F5C;;AEjNG;EA2HK;;;yBAAqC;AF6F7C;;AExNG;EAiIK;;;yBAAqC;AF8F7C;;AE/NG;EAsIO;;;0BAAqC;AFgG/C;;AEjF6B;EArJ3B;IAuJI,8CAAuB;IACvB,uCAAkC;IAAlC,+BAAkC;IAClC,6DAA+D;EFoFnE;EEnFI;IA1JJ;MA2JM,8DAA8D;IFsFlE;EACF;AACF;;AElFI;EAEE,gDAAe;AFoFrB;;AElF+B;EAJ3B;IAOM,iBAAW;IAEX,sDAA+E;EFmFvF;AACF;;AE7FI;EAEE,gDAAe;AF+FrB;;AE7F+B;EAJ3B;IAOM,eAAW;IAEX,oDAA+E;EF8FvF;AACF;;AExGI;EAEE,gDAAe;AF0GrB;;AExG+B;EAJ3B;IAOM,gBAAW;IAEX,qDAA+E;EFyGvF;AACF;;AEnHI;EAEE,gDAAe;AFqHrB;;AEnH+B;EAJ3B;IAOM,iBAAW;IAEX,sDAA+E;EFoHvF;AACF;;AE9HI;EAeA,2BAAmB;MAAnB,4BAAmB;UAAnB,mBAAmB;AFmHvB","file":"pfe-band.css","sourcesContent":["/*\n * Copyright 2018 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// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n","/*\n * Copyright 2018 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/* Palette of Border Colors */\n/* Palette of Feedback Colors */\n:host, .pfe-band__container, .pfe-band__header, .pfe-band__body, .pfe-band__aside, .pfe-band__footer {\n display: flex;\n flex-flow: column nowrap;\n align-items: flex-start;\n}\n\n.pfe-band__container, .pfe-band__header, .pfe-band__body, .pfe-band__aside, .pfe-band__footer {\n display: grid;\n grid-row-gap: var(--pfe-band--gutter--vertical);\n grid-column-gap: var(--pfe-band--gutter--horizontal);\n margin-bottom: 0;\n}\n\n:host {\n display: block;\n --pfe-band--Padding--vertical: calc( var(--pfe-theme--container-spacer, 1rem) * 4);\n --pfe-band--Padding--horizontal: calc( var(--pfe-theme--container-spacer, 1rem) * 1);\n --pfe-band--Padding: var(--pfe-band--Padding--vertical) var(--pfe-band--Padding--horizontal);\n --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--base, #dfdfdf);\n --pfe-band--BackgroundPosition: center center;\n --pfe-band--Border: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;\n --pfe-band--layout: 1fr;\n --pfe-band__header--layout: 1fr;\n --pfe-band__body--layout: 1fr;\n --pfe-band__footer--layout: 1fr;\n --pfe-band__aside--layout: 1fr;\n --pfe-band--gutter--vertical: var(--pfe-theme--container-spacer, 1rem);\n --pfe-band--gutter--horizontal: calc(var(--pfe-theme--container-spacer, 1rem) * 3);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--base--text, #333);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--base--link, #00538c);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--base--link--visited, #7551a6);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--base--link--hover, #00305b);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--base--link--focus, #00305b);\n --pfe-band--Width: auto;\n --pfe-band--Width__aside--sm: 240px;\n --pfe-band--Width__aside--lg: 300px;\n position: relative;\n padding: calc(var(--pfe-band--Padding--vertical) / 2) var(--pfe-band--Padding--horizontal);\n border: var(--pfe-band--Border);\n background-color: var(--pfe-band--BackgroundColor);\n background-position: var(--pfe-band--BackgroundPosition);\n color: var(--pfe-broadcasted--color--text);\n}\n\n@media screen and (min-width: 768px) {\n :host {\n --pfe-band--Width: calc( 768px - calc(var(--pfe-band--Padding--horizontal) * 4) );\n }\n}\n\n@media screen and (min-width: 992px) {\n :host {\n --pfe-band--Width: calc( 992px - calc(var(--pfe-band--Padding--horizontal) * 4) );\n }\n}\n\n@media screen and (min-width: 1200px) {\n :host {\n --pfe-band--Width: calc( 1200px - calc(var(--pfe-band--Padding--horizontal) * 4) );\n }\n}\n\n@media print {\n :host {\n --pfe-band--Padding: calc(var(--pfe-band--Padding--vertical) / 2) var(--pfe-band--Padding--horizontal);\n }\n}\n\n@media (min-width: 576px) {\n :host {\n padding: var(--pfe-band--Padding);\n }\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:host *, :host *::before, :host *::after {\n box-sizing: border-box;\n}\n\n:host([pfe-color=\"darker\"]) {\n --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--darker, #464646);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--darker--text, #fff);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--darker--link, #99ccff);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--darker--link--visited, #b38cd9);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--darker--link--hover, #cce6ff);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--darker--link--focus, #cce6ff);\n}\n\n:host([pfe-color=\"darkest\"]) {\n --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--darkest, #131313);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--darkest--text, #fff);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--darkest--link, #99ccff);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--darkest--link--visited, #b38cd9);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--darkest--link--hover, #cce6ff);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--darkest--link--focus, #cce6ff);\n}\n\n:host([pfe-color=\"accent\"]) {\n --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--accent, #fe460d);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--accent--text, #fff);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--accent--link, #99ccff);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--accent--link--visited, #b38cd9);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--accent--link--hover, #cce6ff);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--accent--link--focus, #cce6ff);\n}\n\n:host([pfe-color=\"complement\"]) {\n --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--complement, #0477a4);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--complement--text, #fff);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--complement--link, #99ccff);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--complement--link--visited, #b38cd9);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--complement--link--hover, #cce6ff);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--complement--link--focus, #cce6ff);\n}\n\n:host([pfe-color=\"lighter\"]) {\n --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--lighter, #ececec);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--lighter--text, #333);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--lighter--link, #06c);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--lighter--link--visited, rebeccapurple);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--lighter--link--hover, #003366);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--lighter--link--focus, #003366);\n}\n\n:host([pfe-color=\"lightest\"]) {\n --pfe-band--BackgroundColor: var(--pfe-theme--color--surface--lightest, #fff);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--lightest--text, #333);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--lightest--link, #06c);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--lightest--link--visited, rebeccapurple);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--lightest--link--hover, #003366);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--lightest--link--focus, #003366);\n}\n\n:host([pfe-size=\"small\"]) {\n --pfe-band--Padding: calc(var(--pfe-band--Padding--vertical) / 4) var(--pfe-band--Padding--horizontal);\n}\n\n.pfe-band__container {\n --pfe-band_region--width: calc(calc(1fr - var(--pfe-band--Width__aside--sm)) - var(--pfe-band--gutter--horizontal));\n --pfe-band--gridTemplateArea_mobile: \"body\";\n position: relative;\n margin: 0 auto;\n width: 100%;\n max-width: var(--pfe-band--Width);\n}\n\n.pfe-band__container[pfe-has-aside] {\n --pfe-band--gridTemplateArea_mobile:\n \"body\" \"aside\";\n --pfe-band--gridTemplateArea_desktop:\n \"body aside\";\n}\n\n@media (min-width: 768px) {\n .pfe-band__container[pfe-has-aside] {\n --pfe-band--layout: 1fr var(--pfe-band--Width__aside--sm);\n }\n}\n\n@media (min-width: 992px) {\n .pfe-band__container[pfe-has-aside] {\n --pfe-band--layout: 1fr var(--pfe-band--Width__aside--lg);\n }\n}\n\n.pfe-band__container[pfe-has-aside][pfe-aside-mobile=\"top\"] {\n --pfe-band--gridTemplateArea_mobile:\n \"aside\" \"body\";\n}\n\n.pfe-band__container[pfe-has-aside][pfe-aside-desktop=\"left\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"aside body\";\n}\n\n@media (min-width: 768px) {\n .pfe-band__container[pfe-has-aside][pfe-aside-desktop=\"left\"] {\n --pfe-band--layout: var(--pfe-band--Width__aside--sm) 1fr;\n }\n}\n\n@media (min-width: 992px) {\n .pfe-band__container[pfe-has-aside][pfe-aside-desktop=\"left\"] {\n --pfe-band--layout: var(--pfe-band--Width__aside--lg) 1fr;\n }\n}\n\n.pfe-band__container[pfe-has-header] {\n --pfe-band--gridTemplateArea_mobile:\n \"header\" \"body\";\n}\n\n.pfe-band__container[pfe-has-header][pfe-has-aside] {\n --pfe-band--gridTemplateArea_mobile: \n \"header\" \n \"body\" \"aside\";\n --pfe-band--gridTemplateArea_desktop: \n \"header header\" \n \"body aside\";\n}\n\n.pfe-band__container[pfe-has-header][pfe-aside-mobile=\"top\"] {\n --pfe-band--gridTemplateArea_mobile: \n \"aside\" \n \"header\" \n \"body\";\n}\n\n.pfe-band__container[pfe-has-header][pfe-aside-height=\"full\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"header aside\"\n \"body aside\";\n}\n\n.pfe-band__container[pfe-has-header][pfe-aside-desktop=\"left\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"header header\"\n \"aside body\";\n}\n\n.pfe-band__container[pfe-has-header][pfe-aside-desktop=\"left\"][pfe-aside-height=\"full\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"aside header\"\n \"aside body\";\n}\n\n.pfe-band__container[pfe-has-footer] {\n --pfe-band--gridTemplateArea_mobile:\n \"body\"\n \"footer\";\n}\n\n.pfe-band__container[pfe-has-footer][pfe-has-aside] {\n --pfe-band--gridTemplateArea_mobile:\n \"body\"\n \"aside\"\n \"footer\";\n --pfe-band--gridTemplateArea_desktop:\n \"body aside\"\n \"footer footer\";\n}\n\n.pfe-band__container[pfe-has-footer][pfe-aside-mobile=\"top\"] {\n --pfe-band--gridTemplateArea_mobile:\n \"aside\"\n \"body\"\n \"footer\";\n}\n\n.pfe-band__container[pfe-has-footer][pfe-aside-height=\"full\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"body aside\"\n \"footer aside\" ;\n}\n\n.pfe-band__container[pfe-has-footer][pfe-aside-desktop=\"left\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"aside body\"\n \"footer footer\";\n}\n\n.pfe-band__container[pfe-has-footer][pfe-aside-desktop=\"left\"][pfe-aside-height=\"full\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"aside body\"\n \"aside footer\";\n}\n\n.pfe-band__container[pfe-has-header][pfe-has-footer] {\n --pfe-band--gridTemplateArea_mobile:\n \"header\"\n \"body\"\n \"footer\";\n}\n\n.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-has-aside] {\n --pfe-band--gridTemplateArea_mobile:\n \"header\"\n \"body\"\n \"footer\"\n \"aside\";\n --pfe-band--gridTemplateArea_desktop:\n \"header header\"\n \"body aside\"\n \"footer footer\";\n}\n\n.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-mobile=\"top\"] {\n --pfe-band--gridTemplateArea_mobile:\n \"aside\"\n \"header\"\n \"body\"\n \"footer\";\n}\n\n.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-height=\"full\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"header aside\"\n \"body aside\"\n \"footer aside\" ;\n}\n\n.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-desktop=\"left\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"header header\"\n \"aside body\"\n \"footer footer\";\n}\n\n.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-desktop=\"left\"][pfe-aside-height=\"full\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"aside header\"\n \"aside body\"\n \"aside footer\";\n}\n\n@supports (display: grid) {\n .pfe-band__container {\n grid-template-columns: var(--pfe-band--layout);\n grid-template-rows: max-content;\n grid-template-areas: var(--pfe-band--gridTemplateArea_mobile);\n }\n @media (min-width: 768px) {\n .pfe-band__container {\n grid-template-areas: var(--pfe-band--gridTemplateArea_desktop);\n }\n }\n}\n\n.pfe-band__header {\n margin-bottom: var(--pfe-band--gutter--vertical);\n}\n\n@supports (display: grid) {\n .pfe-band__header {\n grid-area: header;\n grid-template-columns: var(--pfe-band__header--layout);\n }\n}\n\n.pfe-band__body {\n margin-bottom: var(--pfe-band--gutter--vertical);\n}\n\n@supports (display: grid) {\n .pfe-band__body {\n grid-area: body;\n grid-template-columns: var(--pfe-band__body--layout);\n }\n}\n\n.pfe-band__aside {\n margin-bottom: var(--pfe-band--gutter--vertical);\n}\n\n@supports (display: grid) {\n .pfe-band__aside {\n grid-area: aside;\n grid-template-columns: var(--pfe-band__aside--layout);\n }\n}\n\n.pfe-band__footer {\n margin-bottom: var(--pfe-band--gutter--vertical);\n}\n\n@supports (display: grid) {\n .pfe-band__footer {\n grid-area: footer;\n grid-template-columns: var(--pfe-band__footer--layout);\n }\n}\n\n.pfe-band__aside {\n align-self: stretch;\n}\n","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text: $pfelements--gray-dark !default;\n$pfe-color--text--on-dark: $pfe-color--white !default;\n$pfe-color--text--on-saturated: $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link: #06c !default;\n$pfe-color--ui-link--visited: $pfelements--purple !default; // Was #7551a6\n$pfe-color--ui-link--hover: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-dark--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-saturated--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base: $pfelements--blue !default;\n$pfe-color--ui-base--hover: darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement: $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover: $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent: $pfelements--orange !default;\n$pfe-color--ui-accent--hover: darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text: $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover: $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest: $pfe-color--white !default;\n$pfe-color--surface--lightest--text: $pfe-color--text !default;\n$pfe-color--surface--lightest--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus: $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text: $pfe-color--text !default;\n$pfe-color--surface--lighter--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus: $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base: $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text: $pfe-color--text !default;\n$pfe-color--surface--base--link: #00538c !default; // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited: #7551a6 !default;\n$pfe-color--surface--base--link--hover: #00305b !default;\n$pfe-color--surface--base--link--focus: #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker: $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest: $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement: $pfelements--blue;\n$pfe-color--surface--complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent: $pfelements--orange;\n$pfe-color--surface--accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc\n$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7\n$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical: $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important: $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest: $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest: $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate: $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest: $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest: $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success: #2e7d32 !default;\n$pfe-color--feedback--success--lightest: $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest: #1b5e20 !default;\n\n$pfe-color--feedback--info: #0277bd !default;\n$pfe-color--feedback--info--lightest: $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest: #01579b !default;\n\n$pfe-color--feedback--default: $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest: $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest: $pfe-color--gray-800 !default;\n","@import \"../../pfe-sass/pfe-sass\";\n\n$LOCAL: band;\n\n%flex-fallback {\n display: flex;\n flex-flow: column nowrap;\n align-items: flex-start;\n}\n\n%grid-layout {\n display: grid;\n grid-row-gap: #{pfe-local(gutter--vertical)};\n grid-column-gap: #{pfe-local(gutter--horizontal)};\n margin-bottom: 0;\n}\n\n:host {\n display: block;\n\n // Default spacing values\n --pfe-band--Padding--vertical: calc( #{pfe-var(container-spacer)} * 4);\n --pfe-band--Padding--horizontal: calc( #{pfe-var(container-spacer)} * 1);\n // Bring them together for ease of use below\n --pfe-band--Padding: #{pfe-local(Padding--vertical)} #{pfe-local(Padding--horizontal)};\n\n // Surface colors\n --pfe-band--BackgroundColor: #{pfe-color(surface--base)};\n --pfe-band--BackgroundPosition: center center;\n\n // Border settings\n --pfe-band--Border: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n\n // Layouts, grid layouts\n --pfe-band--layout: 1fr;\n --pfe-band__header--layout: 1fr;\n --pfe-band__body--layout: 1fr;\n --pfe-band__footer--layout: 1fr;\n --pfe-band__aside--layout: 1fr;\n\n // Vertical spacing\n --pfe-band--gutter--vertical: #{pfe-var(container-spacer)};\n --pfe-band--gutter--horizontal: calc(#{pfe-var(container-spacer)} * 3);\n\n // Text colors\n --pfe-broadcasted--color--text: #{pfe-color(surface--base--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--base--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--base--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--base--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--base--link--focus)};\n\n // Band width logic\n // Initialize at mobile breakpoint\n --pfe-band--Width: auto;\n --pfe-band--Width__aside--sm: 240px;\n --pfe-band--Width__aside--lg: 300px;\n\n // Loop through the other breakpoints\n @each $size in (md, lg, xl) {\n @media screen and (min-width: pfe-breakpoint(#{$size})) {\n --pfe-band--Width: calc( #{pfe-breakpoint(#{$size})} - calc(#{pfe-local(Padding--horizontal)} * 4) );\n }\n }\n // Reduce padding for print\n @media print {\n --pfe-band--Padding: calc(#{pfe-local(Padding--vertical)} / 2) #{pfe-local(Padding--horizontal)};\n }\n\n // Wrapper sets padding and background visuals\n position: relative;\n @extend %flex-fallback;\n\n // Padding \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 // 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-radio(color, text)};\n\n // Remove background color for print\n @include pfe-no-print-background;\n\n // Tag element styles\n *, *::before, *::after {\n box-sizing: border-box;\n }\n}\n\n@each $color in (darker, darkest, accent, complement, lighter, lightest) {\n :host([pfe-color=\"#{$color}\"]) {\n --pfe-band--BackgroundColor: #{pfe-color(surface--#{$color})};\n --pfe-broadcasted--color--text: #{pfe-color(surface--#{$color}--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--#{$color}--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--#{$color}--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--#{$color}--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--#{$color}--link--focus)};\n }\n}\n\n// thinner padding on top & bottom\n:host([pfe-size=\"small\"]) {\n --pfe-band--Padding: calc(#{pfe-local(Padding--vertical)} / 4) #{pfe-local(Padding--horizontal)};\n}\n\n.pfe-band {\n &__container {\n // Does not need to be wrapped in @supports because it updates variables\n --pfe-band_region--width: calc(calc(1fr - #{pfe-local(Width__aside--sm)}) - #{pfe-local(gutter--horizontal)});\n --pfe-band--gridTemplateArea_mobile: \"body\";\n // Styles for the different combination of regions\n &[pfe-has-aside] {\n --pfe-band--gridTemplateArea_mobile:\n \"body\" \"aside\";\n --pfe-band--gridTemplateArea_desktop:\n \"body aside\";\n @media (min-width: #{pfe-breakpoint(md)}) {\n --pfe-band--layout: 1fr #{pfe-local(Width__aside--sm)};\n }\n @media (min-width: #{pfe-breakpoint(lg)}) {\n --pfe-band--layout: 1fr #{pfe-local(Width__aside--lg)};\n }\n &[pfe-aside-mobile=\"top\"] {\n --pfe-band--gridTemplateArea_mobile:\n \"aside\" \"body\";\n }\n &[pfe-aside-desktop=\"left\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"aside body\";\n @media (min-width: #{pfe-breakpoint(md)}) {\n --pfe-band--layout: #{pfe-local(Width__aside--sm)} 1fr;\n }\n @media (min-width: #{pfe-breakpoint(lg)}) {\n --pfe-band--layout: #{pfe-local(Width__aside--lg)} 1fr;\n }\n }\n }\n &[pfe-has-header] {\n --pfe-band--gridTemplateArea_mobile:\n \"header\" \"body\";\n &[pfe-has-aside] {\n --pfe-band--gridTemplateArea_mobile: \n \"header\" \n \"body\" \"aside\";\n --pfe-band--gridTemplateArea_desktop: \n \"header header\" \n \"body aside\";\n }\n &[pfe-aside-mobile=\"top\"] {\n --pfe-band--gridTemplateArea_mobile: \n \"aside\" \n \"header\" \n \"body\";\n }\n &[pfe-aside-height=\"full\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"header aside\"\n \"body aside\";\n }\n &[pfe-aside-desktop=\"left\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"header header\"\n \"aside body\";\n &[pfe-aside-height=\"full\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"aside header\"\n \"aside body\";\n }\n }\n }\n &[pfe-has-footer] {\n --pfe-band--gridTemplateArea_mobile:\n \"body\"\n \"footer\";\n &[pfe-has-aside] {\n --pfe-band--gridTemplateArea_mobile:\n \"body\"\n \"aside\"\n \"footer\";\n --pfe-band--gridTemplateArea_desktop:\n \"body aside\"\n \"footer footer\";\n }\n &[pfe-aside-mobile=\"top\"] {\n --pfe-band--gridTemplateArea_mobile:\n \"aside\"\n \"body\"\n \"footer\";\n }\n &[pfe-aside-height=\"full\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"body aside\"\n \"footer aside\" ;\n }\n &[pfe-aside-desktop=\"left\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"aside body\"\n \"footer footer\";\n &[pfe-aside-height=\"full\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"aside body\"\n \"aside footer\";\n }\n }\n }\n &[pfe-has-header][pfe-has-footer] {\n --pfe-band--gridTemplateArea_mobile:\n \"header\"\n \"body\"\n \"footer\";\n &[pfe-has-aside] {\n --pfe-band--gridTemplateArea_mobile:\n \"header\"\n \"body\"\n \"footer\"\n \"aside\";\n --pfe-band--gridTemplateArea_desktop:\n \"header header\"\n \"body aside\"\n \"footer footer\";\n }\n &[pfe-aside-mobile=\"top\"] {\n --pfe-band--gridTemplateArea_mobile:\n \"aside\"\n \"header\"\n \"body\"\n \"footer\";\n }\n &[pfe-aside-height=\"full\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"header aside\"\n \"body aside\"\n \"footer aside\" ;\n }\n &[pfe-aside-desktop=\"left\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"header header\"\n \"aside body\"\n \"footer footer\";\n &[pfe-aside-height=\"full\"] {\n --pfe-band--gridTemplateArea_desktop:\n \"aside header\"\n \"aside body\"\n \"aside footer\";\n }\n }\n }\n\n position: relative;\n margin: 0 auto;\n width: 100%;\n max-width: #{pfe-local(Width)};\n @extend %flex-fallback;\n\n // Grid support styles\n @supports (display: grid) {\n @extend %grid-layout;\n grid-template-columns: #{pfe-local(layout)};\n grid-template-rows: max-content;\n grid-template-areas: var(--pfe-band--gridTemplateArea_mobile);\n @media (min-width: #{pfe-breakpoint(md)}) {\n grid-template-areas: var(--pfe-band--gridTemplateArea_desktop);\n }\n }\n }\n // For each section in the band layout\n @each $section in (header, body, aside, footer) {\n &__#{$section} { // i.e., pfe-band__header\n @extend %flex-fallback; // Add the flex fallback styles\n margin-bottom: #{pfe-local(gutter--vertical)};\n // Apply the standard grid\n @supports (display: grid) {\n @extend %grid-layout;\n // Apply the section as a named grid-area\n grid-area: #{$section};\n // Allow users to hook into the layout with custom columns\n grid-template-columns: var(--pfe-band__#{$section}--layout);\n }\n }\n }\n\n &__aside {\n align-self: stretch;\n }\n}\n","// $boxSize = any box-sizing property, default is border-box\n@mixin pfe-box-sizing($boxSize: border-box) {\n *, *::before, *::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-reset-list() {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n@mixin pfe-reset-box() {\n margin: 0;\n padding: 0;\n}\n\n@mixin pfe-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/// ===========================================================================\n/// Theme Color Vars - use with on=\"dark\" to affect light DOM\n/// ===========================================================================\n\n@mixin pfe-theme($theme) {\n // GENERAL CONTEXT-BASED UPDATES, ON=\"DARK\"\n @if $theme == dark {\n --pfe-broadcasted--color--text: #{pfe-color(text--on-dark)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(ui-link--on-dark)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--on-dark--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--on-dark--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--on-dark--focus)};\n }\n @else if $theme == light {\n --pfe-broadcasted--color--text: #{pfe-color(text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(ui-link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--focus)};\n }\n // MORE SPECIFIC COLOR BASED UPDATES, COLOR=\"DARKER\"\n @else if $theme == darker {\n --pfe-broadcasted--color--text: #{pfe-color(surface--darker--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darker--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darker--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darker--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darker--link--focus)};\n }\n @else if $theme == darkest {\n --pfe-broadcasted--color--text: #{pfe-color(surface--darkest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darkest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darkest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darkest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darkest--link--focus)};\n }\n @else if $theme == accent {\n --pfe-broadcasted--color--text: #{pfe-color(surface--accent--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--accent--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--accent--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--accent--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--accent--link--focus)};\n }\n @else if $theme == complement {\n --pfe-broadcasted--color--text: #{pfe-color(surface--complement--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--complement--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--complement--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--complement--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--complement--link--focus)};\n }\n\n @else if $theme == lighter {\n --pfe-broadcasted--color--text: #{pfe-color(surface--lighter--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lighter--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lighter--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lighter--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lighter--link--focus)};\n }\n @else if $theme == lightest {\n --pfe-broadcasted--color--text: #{pfe-color(surface--lightest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lightest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lightest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lightest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lightest--link--focus)};\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// scss-lint:disable ImportantRule\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// scss-lint:enable ImportantRule\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 for building slot selectors\n@mixin pfe-slot($slot-name, $selector: \"\") {\n // This logic makes it much easier to style default slots in a loop\n // with named slots\n @if $slot-name != default {\n ::slotted([slot=\"#{$slot-name}\"]#{$selector}) {\n @content;\n }\n }\n @else {\n ::slotted(*) {\n @content;\n }\n }\n}\n\n/// ===========================================================================\n/// Accordion Specific SASS Vars\n/// ===========================================================================\n\n$pfe-expand_button--LineHeight: 1.5;\n$pfe-expand_button--padding: #{pfe-var(container-spacer)};\n$pfe-expand_button--padding--factor: .75;\n$pfe-expand_button--padding--wide: calc(#{$pfe-expand_button--padding} * 1.5);\n\n$pfe-expand_chevron--size: .4em;\n$pfe-expand_chevron--weight: .1em;\n$pfe-expand_chevron--padding: 3em;\n$pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe-expand_chevron--size / 2};\n\n@mixin pfe-accordion-header {\n display: block;\n > * {\n margin: 0;\n }\n}\n\n@mixin pfe-trigger-button($align: left) {\n -webkit-appearance: button;\n margin: 0;\n width: 100%;\n height: auto;\n font-family: inherit;\n font-weight: #{pfe-var(font-weight--bold)};\n text-align: left;\n cursor: pointer;\n z-index: 1;\n position: relative;\n\n font-size: calc(#{pfe-var(font-size)} * 1.1);\n line-height: #{pfe-var(line-height)};\n\n color: #{pfe-local(aux)};\n background-color: #{pfe-local(main)};\n border-left: #{pfe-local(BorderLeft)};\n border-right: #{pfe-local(BorderRight)};\n border-bottom: #{pfe-local(BorderBottom)};\n border-top: 0;\n\n &:hover {\n outline: none;\n border-left-color: #{pfe-local(BorderLeftColor--focus)};\n z-index: 2;\n }\n\n &:focus {\n outline: none;\n z-index: 2;\n text-decoration: underline;\n text-decoration-color: #{pfe-color(surface--border--darker)};\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n @if $align == right {\n padding: #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} 50px;\n } @else {\n padding: #{$pfe-expand_button--padding} 50px #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};\n }\n}\n\n@mixin pfe-trigger-button-last($theme: light) {\n border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n // @TODO Support differences based on theme\n}\n\n@mixin pfe-trigger-button-first($theme: light) {\n border-top: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n // @TODO Support differences based on theme\n}\n\n@mixin pfe-trigger-expanded {\n position: relative;\n display: block;\n border-bottom: 0;\n}\n\n@mixin pfe-trigger-color($component-name, $theme: light) {\n @if $theme == dark {\n --pfe-#{$component-name}--main: transparent;\n --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)};\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};\n }\n @else {\n --pfe-#{$component-name}--main: transparent;\n --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)};\n\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} transparent;\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n --pfe-#{$component-name}--BorderBottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest--link)};\n }\n}\n\n@mixin pfe-trigger-color-expanded($component-name, $theme: light) {\n @if $theme == dark {\n --pfe-#{$component-name}--main: #{pfe-color(surface--darker)};\n --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)};\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};\n\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};\n }\n @else {\n --pfe-#{$component-name}--main: #{pfe-color(surface--lightest)};\n --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)};\n --pfe-#{$component-name}--focus: #{pfe-color(surface--lightest--link)};\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--lightest--link)};\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n }\n}\n\n/// ===========================================================================\n/// Accordion chevrons\n/// ===========================================================================\n\n@mixin pfe-chevron-expanded($state: true, $position: after) {\n content: \"\";\n position: absolute;\n top: calc((#{pfe-var(container-spacer)} * #{$pfe-expand_button--padding--factor}) + #{$pfe-expand_chevron--placement} );\n display: block;\n border-style: #{pfe-var(surface--border-style)};\n height: #{$pfe-expand_chevron--size};\n width: #{$pfe-expand_chevron--size};\n text-align: center;\n transition: transform 0.15s;\n @if $state {\n border-width: #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0 0;\n border-bottom: 0;\n transform: rotate(-45deg);\n @if $position == before {\n left: #{$pfe-expand_button--padding--wide};\n }\n @else {\n right: #{$pfe-expand_button--padding--wide};\n }\n }\n @else {\n border-width: 0 #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0;\n transform: rotate(45deg);\n @if $position == before {\n left: #{$pfe-expand_button--padding--wide};\n }\n @else {\n right: #{$pfe-expand_button--padding--wide};\n }\n }\n}\n\n/// ===========================================================================\n/// Accordion panel\n/// ===========================================================================\n\n@mixin pfe-container {\n position: relative;\n display: block;\n width: 100%;\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@mixin pfe-accordion-panel {\n display: none;\n overflow: hidden;\n will-change: height;\n border-color: transparent;\n}\n\n@mixin pfe-accordion-panel-expanded {\n display: block;\n position: relative;\n}\n\n@mixin pfe-accordion-panel-expanded-style($theme: light) {\n border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n border-left: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} transparent;\n @if $theme == dark {\n box-shadow: none;\n background-color: #{pfe-color(surface--darker)};\n border-left-color: #{pfe-color(surface--darkest--text)};\n border-right-color: #{pfe-color(surface--darkest--text)};\n }\n @else {\n box-shadow: 0 5px #{pfe-var(surface--border-width--heavy)} rgba(140, 140, 140, 0.35);\n border-left-color: #{pfe-color(surface--lightest--link)};\n background-color: #{pfe-color(surface--lightest)};\n border-right-color: #{pfe-color(surface--border--lightest)};\n border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n }\n}\n\n@mixin pfe-accordion-panel-container-inset($align: left) {\n box-sizing: border-box;\n width: 100%;\n\n @if $align == left {\n padding: 0 #{$pfe-expand_chevron--padding} #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};\n }\n @else {\n padding: 0 #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} #{$pfe-expand_chevron--padding};\n }\n}\n"]} \ No newline at end of file diff --git a/elements/pfe-band/pfe-band.css.min.map b/elements/pfe-band/pfe-band.css.min.map new file mode 100644 index 0000000000..e69de29bb2 diff --git a/elements/pfe-band/pfe-band.js b/elements/pfe-band/pfe-band.js new file mode 100644 index 0000000000..efef4d5f91 --- /dev/null +++ b/elements/pfe-band/pfe-band.js @@ -0,0 +1,243 @@ +import PFElement from '../pfelement/pfelement.js'; + +/* + * @license + * Copyright 2019 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. + * +*/ + +// -- Polyfill for supporting Element.closest +// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest +if (!Element.prototype.matches) { + Element.prototype.matches = + Element.prototype.msMatchesSelector || + Element.prototype.webkitMatchesSelector; +} + +if (!Element.prototype.closest) { + Element.prototype.closest = function(s) { + var el = this; + do { + if (el.matches(s)) return el; + el = el.parentElement || el.parentNode; + } while (el !== null && el.nodeType === 1); + return null; + }; +} + +// -- Polyfill for supporting 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; + } + }); +} + +class PfeBand extends PFElement { + + get html() { + return `
    this.has_slot(`pfe-band--${slot}`) ? `pfe-has-${slot}` : "").join(" ")}> + ${this.has_slot("pfe-band--aside") && this.asidePosition.mobile === "top" ? `` : ""} + ${this.has_slot("pfe-band--header") ? `` : ""} + + ${this.has_slot("pfe-band--aside") && this.asidePosition.mobile !== "top" ? `` : ""} + ${this.has_slot("pfe-band--footer") ? `` : ""} +
    `; + } + + static get properties() { + return {"color":{"title":"Background color","type":"string","enum":["lightest","lighter","base","darker","darkest","complement","accent"],"default":"base","observer":"_colorChanged"},"img-src":{"title":"Background image","type":"string","observer":"_imgSrcChanged"},"aside-desktop":{"title":"Aside positioning (desktop)","type":"string","default":"right","enum":["right","left"],"observer":"_basicAttributeChanged","options":{"dependencies":[{"type":"slot","id":"aside"}]}},"aside-mobile":{"title":"Aside positioning (mobile)","type":"string","default":"bottom","enum":["top","bottom"],"observer":"_basicAttributeChanged","options":{"dependencies":[{"type":"slot","id":"aside"}]}},"aside-height":{"title":"Aside height","type":"string","default":"body","enum":["full","body"],"observer":"_basicAttributeChanged","options":{"dependencies":[{"type":"slot","id":"aside"}]}}}; + } + + static get slots() { + return {"header":{"title":"Header","type":"array","namedSlot":true,"maxItems":3,"items":{"title":"Body item","oneOf":[{"$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"}]}}}; + } + static get tag() { + return "pfe-band"; + } + + get schemaUrl() { + return "pfe-band.json"; + } + + get templateUrl() { + return "pfe-band.html"; + } + + get styleUrl() { + return "pfe-band.scss"; + } + + get imageSrc() { + return this.getAttribute("pfe-img-src"); + } + + get backgroundColor() { + return this.getAttribute("pfe-color"); + } + + get asidePosition() { + return { + desktop: this.getAttribute("pfe-aside-desktop"), + mobile: this.getAttribute("pfe-aside-mobile"), + height: this.getAttribute("pfe-aside-height") + }; + } + + static get observedAttributes() { + return [ + "pfe-aside-desktop", + "pfe-aside-mobile", + "pfe-aside-height", + "pfe-color", + "pfe-img-src" + ]; + } + + static get cascadingAttributes() { + return { + "pfe-aside-desktop": ".pfe-band__container", + "pfe-aside-mobile": ".pfe-band__container", + "pfe-aside-height": ".pfe-band__container" + }; + } + + // Declare the type of this component + static get PfeType() { + return PFElement.PfeTypes.Container; + } + + constructor() { + super(PfeBand, { type: PfeBand.PfeType }); + } + + connectedCallback() { + super.connectedCallback(); + // Initialize the background image attachment + if (this.imageSrc) { + this._imgSrcChanged("pfe-img-src", "", this.imageSrc); + } + // Initialize the context setting for the children elements + if (this.backgroundColor) { + this._updateContext(this.backgroundColor); + } + } + + attributeChangedCallback(attr, oldValue, newValue) { + super.attributeChangedCallback(attr, oldValue, newValue); + // Strip the prefix form the attribute + attr = attr.replace("pfe-", ""); + // If the observer is defined in the attribute properties + if (this[attr] && this[attr].observer) { + // Get the observer function + let observer = this[this[attr].observer].bind(this); + // If it's a function, allow it to run + if (typeof observer === "function") observer(attr, oldValue, newValue); + } + } + + _basicAttributeChanged(attr, oldValue, newValue) { + this[attr].value = newValue; + } + + // Update the color attribute and contexts + _colorChanged(attr, oldValue, newValue) { + this[attr].value = newValue; + // If the new value has a dark background, update children elements + this._updateContext(newValue); + } + + // Update the background image + _imgSrcChanged(attr, oldValue, newValue) { + // Set the image as the background image + this.style.backgroundImage = newValue ? `url('${newValue}')` : ``; + } + + // Set the children's context if parent background is dark + _updateContext(context) { + if (["darkest", "darker", "complement", "accent"].includes(context)) { + ["pfe-cta"].forEach(elementName => { + const els = [...this.querySelectorAll(`${elementName}`)]; + els.forEach(el => { + const myContainer = el.closest("[pfe-type=container]"); + if (myContainer === this || myContainer === null) { + el.setAttribute("on", "dark"); + } + }); + }); + } + } +} + +PFElement.create(PfeBand); + +export default PfeBand; +//# sourceMappingURL=pfe-band.js.map diff --git a/elements/pfe-band/pfe-band.js.map b/elements/pfe-band/pfe-band.js.map new file mode 100644 index 0000000000..ba1162b867 --- /dev/null +++ b/elements/pfe-band/pfe-band.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-band.js","sources":["pfe-band.js"],"sourcesContent":["/*\n * @license\n * Copyright 2019 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/pfelement.js\";\n\n// -- Polyfill for supporting Element.closest\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest\nif (!Element.prototype.matches) {\n Element.prototype.matches =\n Element.prototype.msMatchesSelector ||\n Element.prototype.webkitMatchesSelector;\n}\n\nif (!Element.prototype.closest) {\n Element.prototype.closest = function(s) {\n var el = this;\n do {\n if (el.matches(s)) return el;\n el = el.parentElement || el.parentNode;\n } while (el !== null && el.nodeType === 1);\n return null;\n };\n}\n\n// -- Polyfill for supporting Array.includes\n// https://tc39.github.io/ecma262/#sec-array.prototype.includes\nif (!Array.prototype.includes) {\n Object.defineProperty(Array.prototype, \"includes\", {\n value: function(valueToFind, fromIndex) {\n if (this == null) {\n throw new TypeError('\"this\" is null or not defined');\n }\n\n // 1. Let O be ? ToObject(this value).\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 len is 0, return false.\n if (len === 0) {\n return false;\n }\n\n // 4. Let n be ? ToInteger(fromIndex).\n // (If fromIndex is undefined, this step produces the value 0.)\n var n = fromIndex | 0;\n\n // 5. If n ≥ 0, then\n // a. Let k be n.\n // 6. Else n < 0,\n // a. Let k be len + n.\n // b. If k < 0, let k be 0.\n var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);\n\n function sameValueZero(x, y) {\n return (\n x === y ||\n (typeof x === \"number\" &&\n typeof y === \"number\" &&\n isNaN(x) &&\n isNaN(y))\n );\n }\n\n // 7. Repeat, while k < len\n while (k < len) {\n // a. Let elementK be the result of ? Get(O, ! ToString(k)).\n // b. If SameValueZero(valueToFind, elementK) is true, return true.\n if (sameValueZero(o[k], valueToFind)) {\n return true;\n }\n // c. Increase k by 1.\n k++;\n }\n\n // 8. Return false\n return false;\n }\n });\n}\n\nclass PfeBand extends PFElement {\n\n get html() {\n return `
    this.has_slot(`pfe-band--${slot}`) ? `pfe-has-${slot}` : \"\").join(\" \")}>\n ${this.has_slot(\"pfe-band--aside\") && this.asidePosition.mobile === \"top\" ? `` : \"\"}\n ${this.has_slot(\"pfe-band--header\") ? `` : \"\"}\n \n ${this.has_slot(\"pfe-band--aside\") && this.asidePosition.mobile !== \"top\" ? `` : \"\"}\n ${this.has_slot(\"pfe-band--footer\") ? `` : \"\"}\n
    `;\n }\n\n static get properties() {\n return {\"color\":{\"title\":\"Background color\",\"type\":\"string\",\"enum\":[\"lightest\",\"lighter\",\"base\",\"darker\",\"darkest\",\"complement\",\"accent\"],\"default\":\"base\",\"observer\":\"_colorChanged\"},\"img-src\":{\"title\":\"Background image\",\"type\":\"string\",\"observer\":\"_imgSrcChanged\"},\"aside-desktop\":{\"title\":\"Aside positioning (desktop)\",\"type\":\"string\",\"default\":\"right\",\"enum\":[\"right\",\"left\"],\"observer\":\"_basicAttributeChanged\",\"options\":{\"dependencies\":[{\"type\":\"slot\",\"id\":\"aside\"}]}},\"aside-mobile\":{\"title\":\"Aside positioning (mobile)\",\"type\":\"string\",\"default\":\"bottom\",\"enum\":[\"top\",\"bottom\"],\"observer\":\"_basicAttributeChanged\",\"options\":{\"dependencies\":[{\"type\":\"slot\",\"id\":\"aside\"}]}},\"aside-height\":{\"title\":\"Aside height\",\"type\":\"string\",\"default\":\"body\",\"enum\":[\"full\",\"body\"],\"observer\":\"_basicAttributeChanged\",\"options\":{\"dependencies\":[{\"type\":\"slot\",\"id\":\"aside\"}]}}};\n }\n\n static get slots() {\n return {\"header\":{\"title\":\"Header\",\"type\":\"array\",\"namedSlot\":true,\"maxItems\":3,\"items\":{\"title\":\"Body item\",\"oneOf\":[{\"$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\"}]}}};\n }\n static get tag() {\n return \"pfe-band\";\n }\n\n get schemaUrl() {\n return \"pfe-band.json\";\n }\n\n get templateUrl() {\n return \"pfe-band.html\";\n }\n\n get styleUrl() {\n return \"pfe-band.scss\";\n }\n\n get imageSrc() {\n return this.getAttribute(\"pfe-img-src\");\n }\n\n get backgroundColor() {\n return this.getAttribute(\"pfe-color\");\n }\n\n get asidePosition() {\n return {\n desktop: this.getAttribute(\"pfe-aside-desktop\"),\n mobile: this.getAttribute(\"pfe-aside-mobile\"),\n height: this.getAttribute(\"pfe-aside-height\")\n };\n }\n\n static get observedAttributes() {\n return [\n \"pfe-aside-desktop\",\n \"pfe-aside-mobile\",\n \"pfe-aside-height\",\n \"pfe-color\",\n \"pfe-img-src\"\n ];\n }\n\n static get cascadingAttributes() {\n return {\n \"pfe-aside-desktop\": \".pfe-band__container\",\n \"pfe-aside-mobile\": \".pfe-band__container\",\n \"pfe-aside-height\": \".pfe-band__container\"\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 connectedCallback() {\n super.connectedCallback();\n // Initialize the background image attachment\n if (this.imageSrc) {\n this._imgSrcChanged(\"pfe-img-src\", \"\", this.imageSrc);\n }\n // Initialize the context setting for the children elements\n if (this.backgroundColor) {\n this._updateContext(this.backgroundColor);\n }\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n super.attributeChangedCallback(attr, oldValue, newValue);\n // Strip the prefix form the attribute\n attr = attr.replace(\"pfe-\", \"\");\n // If the observer is defined in the attribute properties\n if (this[attr] && this[attr].observer) {\n // Get the observer function\n let observer = this[this[attr].observer].bind(this);\n // If it's a function, allow it to run\n if (typeof observer === \"function\") observer(attr, oldValue, newValue);\n }\n }\n\n _basicAttributeChanged(attr, oldValue, newValue) {\n this[attr].value = newValue;\n }\n\n // Update the color attribute and contexts\n _colorChanged(attr, oldValue, newValue) {\n this[attr].value = newValue;\n // If the new value has a dark background, update children elements\n this._updateContext(newValue);\n }\n\n // Update the background image\n _imgSrcChanged(attr, oldValue, newValue) {\n // Set the image as the background image\n this.style.backgroundImage = newValue ? `url('${newValue}')` : ``;\n }\n\n // Set the children's context if parent background is dark\n _updateContext(context) {\n if ([\"darkest\", \"darker\", \"complement\", \"accent\"].includes(context)) {\n [\"pfe-cta\"].forEach(elementName => {\n const els = [...this.querySelectorAll(`${elementName}`)];\n els.forEach(el => {\n const myContainer = el.closest(\"[pfe-type=container]\");\n if (myContainer === this || myContainer === null) {\n el.setAttribute(\"on\", \"dark\");\n }\n });\n });\n }\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/pfe-band.min.css b/elements/pfe-band/pfe-band.min.css new file mode 100644 index 0000000000..dea66910ad --- /dev/null +++ b/elements/pfe-band/pfe-band.min.css @@ -0,0 +1 @@ +.pfe-band__aside,.pfe-band__body,.pfe-band__container,.pfe-band__footer,.pfe-band__header,:host{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-flow:column nowrap;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.pfe-band__aside,.pfe-band__body,.pfe-band__container,.pfe-band__footer,.pfe-band__header{display:grid;grid-row-gap:var(--pfe-band--gutter--vertical);grid-column-gap:var(--pfe-band--gutter--horizontal);margin-bottom:0}:host{display:block;--pfe-band--Padding--vertical:calc( var(--pfe-theme--container-spacer, 1rem) * 4);--pfe-band--Padding--horizontal:calc( var(--pfe-theme--container-spacer, 1rem) * 1);--pfe-band--Padding:var(--pfe-band--Padding--vertical) var(--pfe-band--Padding--horizontal);--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--base, #dfdfdf);--pfe-band--BackgroundPosition:center center;--pfe-band--Border:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;--pfe-band--layout:1fr;--pfe-band__header--layout:1fr;--pfe-band__body--layout:1fr;--pfe-band__footer--layout:1fr;--pfe-band__aside--layout:1fr;--pfe-band--gutter--vertical:var(--pfe-theme--container-spacer, 1rem);--pfe-band--gutter--horizontal:calc(var(--pfe-theme--container-spacer, 1rem) * 3);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--base--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--base--link, #00538c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--base--link--visited, #7551a6);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--base--link--hover, #00305b);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--base--link--focus, #00305b);--pfe-band--Width:auto;--pfe-band--Width__aside--sm:240px;--pfe-band--Width__aside--lg:300px;position:relative;padding:calc(var(--pfe-band--Padding--vertical)/ 2) var(--pfe-band--Padding--horizontal);border:var(--pfe-band--Border);background-color:var(--pfe-band--BackgroundColor);background-position:var(--pfe-band--BackgroundPosition);color:var(--pfe-broadcasted--color--text)}@media screen and (min-width:768px){:host{--pfe-band--Width:calc( 768px - calc(var(--pfe-band--Padding--horizontal) * 4) )}}@media screen and (min-width:992px){:host{--pfe-band--Width:calc( 992px - calc(var(--pfe-band--Padding--horizontal) * 4) )}}@media screen and (min-width:1200px){:host{--pfe-band--Width:calc( 1200px - calc(var(--pfe-band--Padding--horizontal) * 4) )}}@media print{:host{--pfe-band--Padding:calc(var(--pfe-band--Padding--vertical) / 2) var(--pfe-band--Padding--horizontal)}}@media (min-width:576px){:host{padding:var(--pfe-band--Padding)}}@media print{:host{background-color:#fff!important;background-image:none!important;-webkit-box-shadow:none!important;box-shadow:none!important}}:host *,:host ::after,:host ::before{-webkit-box-sizing:border-box;box-sizing:border-box}:host([pfe-color=darker]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--darker, #464646);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darker--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darker--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darker--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darker--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darker--link--focus, #cce6ff)}:host([pfe-color=darkest]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--darkest, #131313);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darkest--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darkest--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darkest--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darkest--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darkest--link--focus, #cce6ff)}:host([pfe-color=accent]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--accent, #fe460d);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--accent--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--accent--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--accent--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--accent--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--accent--link--focus, #cce6ff)}:host([pfe-color=complement]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--complement, #0477a4);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--complement--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--complement--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--complement--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--complement--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--complement--link--focus, #cce6ff)}:host([pfe-color=lighter]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--lighter, #ececec);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lighter--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lighter--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lighter--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lighter--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lighter--link--focus, #003366)}:host([pfe-color=lightest]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lightest--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lightest--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lightest--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lightest--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lightest--link--focus, #003366)}:host([pfe-size=small]){--pfe-band--Padding:calc(var(--pfe-band--Padding--vertical) / 4) var(--pfe-band--Padding--horizontal)}.pfe-band__container{--pfe-band_region--width:calc(calc(1fr - var(--pfe-band--Width__aside--sm)) - var(--pfe-band--gutter--horizontal));--pfe-band--gridTemplateArea_mobile:"body";position:relative;margin:0 auto;width:100%;max-width:var(--pfe-band--Width)}.pfe-band__container[pfe-has-aside]{--pfe-band--gridTemplateArea_mobile:"body" "aside";--pfe-band--gridTemplateArea_desktop:"body aside"}@media (min-width:768px){.pfe-band__container[pfe-has-aside]{--pfe-band--layout:1fr var(--pfe-band--Width__aside--sm)}}@media (min-width:992px){.pfe-band__container[pfe-has-aside]{--pfe-band--layout:1fr var(--pfe-band--Width__aside--lg)}}.pfe-band__container[pfe-has-aside][pfe-aside-mobile=top]{--pfe-band--gridTemplateArea_mobile:"aside" "body"}.pfe-band__container[pfe-has-aside][pfe-aside-desktop=left]{--pfe-band--gridTemplateArea_desktop:"aside body"}@media (min-width:768px){.pfe-band__container[pfe-has-aside][pfe-aside-desktop=left]{--pfe-band--layout:var(--pfe-band--Width__aside--sm) 1fr}}@media (min-width:992px){.pfe-band__container[pfe-has-aside][pfe-aside-desktop=left]{--pfe-band--layout:var(--pfe-band--Width__aside--lg) 1fr}}.pfe-band__container[pfe-has-header]{--pfe-band--gridTemplateArea_mobile:"header" "body"}.pfe-band__container[pfe-has-header][pfe-has-aside]{--pfe-band--gridTemplateArea_mobile:"header" "body" "aside";--pfe-band--gridTemplateArea_desktop:"header header" "body aside"}.pfe-band__container[pfe-has-header][pfe-aside-mobile=top]{--pfe-band--gridTemplateArea_mobile:"aside" "header" "body"}.pfe-band__container[pfe-has-header][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"header aside" "body aside"}.pfe-band__container[pfe-has-header][pfe-aside-desktop=left]{--pfe-band--gridTemplateArea_desktop:"header header" "aside body"}.pfe-band__container[pfe-has-header][pfe-aside-desktop=left][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"aside header" "aside body"}.pfe-band__container[pfe-has-footer]{--pfe-band--gridTemplateArea_mobile:"body" "footer"}.pfe-band__container[pfe-has-footer][pfe-has-aside]{--pfe-band--gridTemplateArea_mobile:"body" "aside" "footer";--pfe-band--gridTemplateArea_desktop:"body aside" "footer footer"}.pfe-band__container[pfe-has-footer][pfe-aside-mobile=top]{--pfe-band--gridTemplateArea_mobile:"aside" "body" "footer"}.pfe-band__container[pfe-has-footer][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"body aside" "footer aside"}.pfe-band__container[pfe-has-footer][pfe-aside-desktop=left]{--pfe-band--gridTemplateArea_desktop:"aside body" "footer footer"}.pfe-band__container[pfe-has-footer][pfe-aside-desktop=left][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"aside body" "aside footer"}.pfe-band__container[pfe-has-header][pfe-has-footer]{--pfe-band--gridTemplateArea_mobile:"header" "body" "footer"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-has-aside]{--pfe-band--gridTemplateArea_mobile:"header" "body" "footer" "aside";--pfe-band--gridTemplateArea_desktop:"header header" "body aside" "footer footer"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-mobile=top]{--pfe-band--gridTemplateArea_mobile:"aside" "header" "body" "footer"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"header aside" "body aside" "footer aside"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-desktop=left]{--pfe-band--gridTemplateArea_desktop:"header header" "aside body" "footer footer"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-desktop=left][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"aside header" "aside body" "aside footer"}@supports (display:grid){.pfe-band__container{grid-template-columns:var(--pfe-band--layout);grid-template-rows:-webkit-max-content;grid-template-rows:max-content;grid-template-areas:var(--pfe-band--gridTemplateArea_mobile)}@media (min-width:768px){.pfe-band__container{grid-template-areas:var(--pfe-band--gridTemplateArea_desktop)}}}.pfe-band__header{margin-bottom:var(--pfe-band--gutter--vertical)}@supports (display:grid){.pfe-band__header{grid-area:header;grid-template-columns:var(--pfe-band__header--layout)}}.pfe-band__body{margin-bottom:var(--pfe-band--gutter--vertical)}@supports (display:grid){.pfe-band__body{grid-area:body;grid-template-columns:var(--pfe-band__body--layout)}}.pfe-band__aside{margin-bottom:var(--pfe-band--gutter--vertical)}@supports (display:grid){.pfe-band__aside{grid-area:aside;grid-template-columns:var(--pfe-band__aside--layout)}}.pfe-band__footer{margin-bottom:var(--pfe-band--gutter--vertical)}@supports (display:grid){.pfe-band__footer{grid-area:footer;grid-template-columns:var(--pfe-band__footer--layout)}}.pfe-band__aside{-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch} \ No newline at end of file diff --git a/elements/pfe-band/pfe-band.min.js b/elements/pfe-band/pfe-band.min.js new file mode 100644 index 0000000000..ada770ff89 --- /dev/null +++ b/elements/pfe-band/pfe-band.min.js @@ -0,0 +1,26 @@ +import e from"../pfelement/pfelement.min.js"; +/* + * @license + * Copyright 2019 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. + * +*/ +Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Element.prototype.closest||(Element.prototype.closest=function(e){var a=this;do{if(a.matches(e))return a;a=a.parentElement||a.parentNode}while(null!==a&&1===a.nodeType);return null}),Array.prototype.includes||Object.defineProperty(Array.prototype,"includes",{value:function(e,a){if(null==this)throw new TypeError('"this" is null or not defined');var t=Object(this),r=t.length>>>0;if(0===r)return!1;var o,d,i=0|a,n=Math.max(i>=0?i:r-Math.abs(i),0);for(;n.pfe-band__aside,.pfe-band__body,.pfe-band__container,.pfe-band__footer,.pfe-band__header,:host{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-flow:column nowrap;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.pfe-band__aside,.pfe-band__body,.pfe-band__container,.pfe-band__footer,.pfe-band__header{display:grid;grid-row-gap:var(--pfe-band--gutter--vertical);grid-column-gap:var(--pfe-band--gutter--horizontal);margin-bottom:0}:host{display:block;--pfe-band--Padding--vertical:calc( var(--pfe-theme--container-spacer, 1rem) * 4);--pfe-band--Padding--horizontal:calc( var(--pfe-theme--container-spacer, 1rem) * 1);--pfe-band--Padding:var(--pfe-band--Padding--vertical) var(--pfe-band--Padding--horizontal);--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--base, #dfdfdf);--pfe-band--BackgroundPosition:center center;--pfe-band--Border:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;--pfe-band--layout:1fr;--pfe-band__header--layout:1fr;--pfe-band__body--layout:1fr;--pfe-band__footer--layout:1fr;--pfe-band__aside--layout:1fr;--pfe-band--gutter--vertical:var(--pfe-theme--container-spacer, 1rem);--pfe-band--gutter--horizontal:calc(var(--pfe-theme--container-spacer, 1rem) * 3);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--base--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--base--link, #00538c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--base--link--visited, #7551a6);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--base--link--hover, #00305b);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--base--link--focus, #00305b);--pfe-band--Width:auto;--pfe-band--Width__aside--sm:240px;--pfe-band--Width__aside--lg:300px;position:relative;padding:calc(var(--pfe-band--Padding--vertical)/ 2) var(--pfe-band--Padding--horizontal);border:var(--pfe-band--Border);background-color:var(--pfe-band--BackgroundColor);background-position:var(--pfe-band--BackgroundPosition);color:var(--pfe-broadcasted--color--text)}@media screen and (min-width:768px){:host{--pfe-band--Width:calc( 768px - calc(var(--pfe-band--Padding--horizontal) * 4) )}}@media screen and (min-width:992px){:host{--pfe-band--Width:calc( 992px - calc(var(--pfe-band--Padding--horizontal) * 4) )}}@media screen and (min-width:1200px){:host{--pfe-band--Width:calc( 1200px - calc(var(--pfe-band--Padding--horizontal) * 4) )}}@media print{:host{--pfe-band--Padding:calc(var(--pfe-band--Padding--vertical) / 2) var(--pfe-band--Padding--horizontal)}}@media (min-width:576px){:host{padding:var(--pfe-band--Padding)}}@media print{:host{background-color:#fff!important;background-image:none!important;-webkit-box-shadow:none!important;box-shadow:none!important}}:host *,:host ::after,:host ::before{-webkit-box-sizing:border-box;box-sizing:border-box}:host([pfe-color=darker]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--darker, #464646);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darker--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darker--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darker--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darker--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darker--link--focus, #cce6ff)}:host([pfe-color=darkest]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--darkest, #131313);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darkest--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darkest--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darkest--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darkest--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darkest--link--focus, #cce6ff)}:host([pfe-color=accent]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--accent, #fe460d);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--accent--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--accent--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--accent--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--accent--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--accent--link--focus, #cce6ff)}:host([pfe-color=complement]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--complement, #0477a4);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--complement--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--complement--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--complement--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--complement--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--complement--link--focus, #cce6ff)}:host([pfe-color=lighter]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--lighter, #ececec);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lighter--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lighter--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lighter--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lighter--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lighter--link--focus, #003366)}:host([pfe-color=lightest]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lightest--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lightest--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lightest--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lightest--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lightest--link--focus, #003366)}:host([pfe-size=small]){--pfe-band--Padding:calc(var(--pfe-band--Padding--vertical) / 4) var(--pfe-band--Padding--horizontal)}.pfe-band__container{--pfe-band_region--width:calc(calc(1fr - var(--pfe-band--Width__aside--sm)) - var(--pfe-band--gutter--horizontal));--pfe-band--gridTemplateArea_mobile:"body";position:relative;margin:0 auto;width:100%;max-width:var(--pfe-band--Width)}.pfe-band__container[pfe-has-aside]{--pfe-band--gridTemplateArea_mobile:"body" "aside";--pfe-band--gridTemplateArea_desktop:"body aside"}@media (min-width:768px){.pfe-band__container[pfe-has-aside]{--pfe-band--layout:1fr var(--pfe-band--Width__aside--sm)}}@media (min-width:992px){.pfe-band__container[pfe-has-aside]{--pfe-band--layout:1fr var(--pfe-band--Width__aside--lg)}}.pfe-band__container[pfe-has-aside][pfe-aside-mobile=top]{--pfe-band--gridTemplateArea_mobile:"aside" "body"}.pfe-band__container[pfe-has-aside][pfe-aside-desktop=left]{--pfe-band--gridTemplateArea_desktop:"aside body"}@media (min-width:768px){.pfe-band__container[pfe-has-aside][pfe-aside-desktop=left]{--pfe-band--layout:var(--pfe-band--Width__aside--sm) 1fr}}@media (min-width:992px){.pfe-band__container[pfe-has-aside][pfe-aside-desktop=left]{--pfe-band--layout:var(--pfe-band--Width__aside--lg) 1fr}}.pfe-band__container[pfe-has-header]{--pfe-band--gridTemplateArea_mobile:"header" "body"}.pfe-band__container[pfe-has-header][pfe-has-aside]{--pfe-band--gridTemplateArea_mobile:"header" "body" "aside";--pfe-band--gridTemplateArea_desktop:"header header" "body aside"}.pfe-band__container[pfe-has-header][pfe-aside-mobile=top]{--pfe-band--gridTemplateArea_mobile:"aside" "header" "body"}.pfe-band__container[pfe-has-header][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"header aside" "body aside"}.pfe-band__container[pfe-has-header][pfe-aside-desktop=left]{--pfe-band--gridTemplateArea_desktop:"header header" "aside body"}.pfe-band__container[pfe-has-header][pfe-aside-desktop=left][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"aside header" "aside body"}.pfe-band__container[pfe-has-footer]{--pfe-band--gridTemplateArea_mobile:"body" "footer"}.pfe-band__container[pfe-has-footer][pfe-has-aside]{--pfe-band--gridTemplateArea_mobile:"body" "aside" "footer";--pfe-band--gridTemplateArea_desktop:"body aside" "footer footer"}.pfe-band__container[pfe-has-footer][pfe-aside-mobile=top]{--pfe-band--gridTemplateArea_mobile:"aside" "body" "footer"}.pfe-band__container[pfe-has-footer][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"body aside" "footer aside"}.pfe-band__container[pfe-has-footer][pfe-aside-desktop=left]{--pfe-band--gridTemplateArea_desktop:"aside body" "footer footer"}.pfe-band__container[pfe-has-footer][pfe-aside-desktop=left][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"aside body" "aside footer"}.pfe-band__container[pfe-has-header][pfe-has-footer]{--pfe-band--gridTemplateArea_mobile:"header" "body" "footer"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-has-aside]{--pfe-band--gridTemplateArea_mobile:"header" "body" "footer" "aside";--pfe-band--gridTemplateArea_desktop:"header header" "body aside" "footer footer"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-mobile=top]{--pfe-band--gridTemplateArea_mobile:"aside" "header" "body" "footer"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"header aside" "body aside" "footer aside"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-desktop=left]{--pfe-band--gridTemplateArea_desktop:"header header" "aside body" "footer footer"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-desktop=left][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"aside header" "aside body" "aside footer"}@supports (display:grid){.pfe-band__container{grid-template-columns:var(--pfe-band--layout);grid-template-rows:-webkit-max-content;grid-template-rows:max-content;grid-template-areas:var(--pfe-band--gridTemplateArea_mobile)}@media (min-width:768px){.pfe-band__container{grid-template-areas:var(--pfe-band--gridTemplateArea_desktop)}}}.pfe-band__header{margin-bottom:var(--pfe-band--gutter--vertical)}@supports (display:grid){.pfe-band__header{grid-area:header;grid-template-columns:var(--pfe-band__header--layout)}}.pfe-band__body{margin-bottom:var(--pfe-band--gutter--vertical)}@supports (display:grid){.pfe-band__body{grid-area:body;grid-template-columns:var(--pfe-band__body--layout)}}.pfe-band__aside{margin-bottom:var(--pfe-band--gutter--vertical)}@supports (display:grid){.pfe-band__aside{grid-area:aside;grid-template-columns:var(--pfe-band__aside--layout)}}.pfe-band__footer{margin-bottom:var(--pfe-band--gutter--vertical)}@supports (display:grid){.pfe-band__footer{grid-area:footer;grid-template-columns:var(--pfe-band__footer--layout)}}.pfe-band__aside{-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch}
    this.has_slot(`pfe-band--${e}`)?`pfe-has-${e}`:"").join(" ")}>\n ${this.has_slot("pfe-band--aside")&&"top"===this.asidePosition.mobile?'':""}\n ${this.has_slot("pfe-band--header")?'':""}\n \n ${this.has_slot("pfe-band--aside")&&"top"!==this.asidePosition.mobile?'':""}\n ${this.has_slot("pfe-band--footer")?'':""}\n
    `}static get properties(){return{color:{title:"Background color",type:"string",enum:["lightest","lighter","base","darker","darkest","complement","accent"],default:"base",observer:"_colorChanged"},"img-src":{title:"Background image",type:"string",observer:"_imgSrcChanged"},"aside-desktop":{title:"Aside positioning (desktop)",type:"string",default:"right",enum:["right","left"],observer:"_basicAttributeChanged",options:{dependencies:[{type:"slot",id:"aside"}]}},"aside-mobile":{title:"Aside positioning (mobile)",type:"string",default:"bottom",enum:["top","bottom"],observer:"_basicAttributeChanged",options:{dependencies:[{type:"slot",id:"aside"}]}},"aside-height":{title:"Aside height",type:"string",default:"body",enum:["full","body"],observer:"_basicAttributeChanged",options:{dependencies:[{type:"slot",id:"aside"}]}}}}static get slots(){return{header:{title:"Header",type:"array",namedSlot:!0,maxItems:3,items:{title:"Body item",oneOf:[{$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 tag(){return"pfe-band"}get schemaUrl(){return"pfe-band.json"}get templateUrl(){return"pfe-band.html"}get styleUrl(){return"pfe-band.scss"}get imageSrc(){return this.getAttribute("pfe-img-src")}get backgroundColor(){return this.getAttribute("pfe-color")}get asidePosition(){return{desktop:this.getAttribute("pfe-aside-desktop"),mobile:this.getAttribute("pfe-aside-mobile"),height:this.getAttribute("pfe-aside-height")}}static get observedAttributes(){return["pfe-aside-desktop","pfe-aside-mobile","pfe-aside-height","pfe-color","pfe-img-src"]}static get cascadingAttributes(){return{"pfe-aside-desktop":".pfe-band__container","pfe-aside-mobile":".pfe-band__container","pfe-aside-height":".pfe-band__container"}}static get PfeType(){return e.PfeTypes.Container}constructor(){super(a,{type:a.PfeType})}connectedCallback(){super.connectedCallback(),this.imageSrc&&this._imgSrcChanged("pfe-img-src","",this.imageSrc),this.backgroundColor&&this._updateContext(this.backgroundColor)}attributeChangedCallback(e,a,t){if(super.attributeChangedCallback(e,a,t),this[e=e.replace("pfe-","")]&&this[e].observer){let r=this[this[e].observer].bind(this);"function"==typeof r&&r(e,a,t)}}_basicAttributeChanged(e,a,t){this[e].value=t}_colorChanged(e,a,t){this[e].value=t,this._updateContext(t)}_imgSrcChanged(e,a,t){this.style.backgroundImage=t?`url('${t}')`:""}_updateContext(e){["darkest","darker","complement","accent"].includes(e)&&["pfe-cta"].forEach(e=>{[...this.querySelectorAll(`${e}`)].forEach(e=>{const a=e.closest("[pfe-type=container]");a!==this&&null!==a||e.setAttribute("on","dark")})})}}e.create(a);export default a; +//# sourceMappingURL=pfe-band.min.js.map diff --git a/elements/pfe-band/pfe-band.min.js.map b/elements/pfe-band/pfe-band.min.js.map new file mode 100644 index 0000000000..f696b566ab --- /dev/null +++ b/elements/pfe-band/pfe-band.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-band.min.js","sources":["pfe-band.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 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// -- Polyfill for supporting Element.closest\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest\nif (!Element.prototype.matches) {\n Element.prototype.matches =\n Element.prototype.msMatchesSelector ||\n Element.prototype.webkitMatchesSelector;\n}\n\nif (!Element.prototype.closest) {\n Element.prototype.closest = function(s) {\n var el = this;\n do {\n if (el.matches(s)) return el;\n el = el.parentElement || el.parentNode;\n } while (el !== null && el.nodeType === 1);\n return null;\n };\n}\n\n// -- Polyfill for supporting Array.includes\n// https://tc39.github.io/ecma262/#sec-array.prototype.includes\nif (!Array.prototype.includes) {\n Object.defineProperty(Array.prototype, \"includes\", {\n value: function(valueToFind, fromIndex) {\n if (this == null) {\n throw new TypeError('\"this\" is null or not defined');\n }\n\n // 1. Let O be ? ToObject(this value).\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 len is 0, return false.\n if (len === 0) {\n return false;\n }\n\n // 4. Let n be ? ToInteger(fromIndex).\n // (If fromIndex is undefined, this step produces the value 0.)\n var n = fromIndex | 0;\n\n // 5. If n ≥ 0, then\n // a. Let k be n.\n // 6. Else n < 0,\n // a. Let k be len + n.\n // b. If k < 0, let k be 0.\n var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);\n\n function sameValueZero(x, y) {\n return (\n x === y ||\n (typeof x === \"number\" &&\n typeof y === \"number\" &&\n isNaN(x) &&\n isNaN(y))\n );\n }\n\n // 7. Repeat, while k < len\n while (k < len) {\n // a. Let elementK be the result of ? Get(O, ! ToString(k)).\n // b. If SameValueZero(valueToFind, elementK) is true, return true.\n if (sameValueZero(o[k], valueToFind)) {\n return true;\n }\n // c. Increase k by 1.\n k++;\n }\n\n // 8. Return false\n return false;\n }\n });\n}\n\nclass PfeBand extends PFElement {\n\n get html() {\n return `
    this.has_slot(`pfe-band--${slot}`) ? `pfe-has-${slot}` : \"\").join(\" \")}>\n ${this.has_slot(\"pfe-band--aside\") && this.asidePosition.mobile === \"top\" ? `` : \"\"}\n ${this.has_slot(\"pfe-band--header\") ? `` : \"\"}\n \n ${this.has_slot(\"pfe-band--aside\") && this.asidePosition.mobile !== \"top\" ? `` : \"\"}\n ${this.has_slot(\"pfe-band--footer\") ? `` : \"\"}\n
    `;\n }\n\n static get properties() {\n return {\"color\":{\"title\":\"Background color\",\"type\":\"string\",\"enum\":[\"lightest\",\"lighter\",\"base\",\"darker\",\"darkest\",\"complement\",\"accent\"],\"default\":\"base\",\"observer\":\"_colorChanged\"},\"img-src\":{\"title\":\"Background image\",\"type\":\"string\",\"observer\":\"_imgSrcChanged\"},\"aside-desktop\":{\"title\":\"Aside positioning (desktop)\",\"type\":\"string\",\"default\":\"right\",\"enum\":[\"right\",\"left\"],\"observer\":\"_basicAttributeChanged\",\"options\":{\"dependencies\":[{\"type\":\"slot\",\"id\":\"aside\"}]}},\"aside-mobile\":{\"title\":\"Aside positioning (mobile)\",\"type\":\"string\",\"default\":\"bottom\",\"enum\":[\"top\",\"bottom\"],\"observer\":\"_basicAttributeChanged\",\"options\":{\"dependencies\":[{\"type\":\"slot\",\"id\":\"aside\"}]}},\"aside-height\":{\"title\":\"Aside height\",\"type\":\"string\",\"default\":\"body\",\"enum\":[\"full\",\"body\"],\"observer\":\"_basicAttributeChanged\",\"options\":{\"dependencies\":[{\"type\":\"slot\",\"id\":\"aside\"}]}}};\n }\n\n static get slots() {\n return {\"header\":{\"title\":\"Header\",\"type\":\"array\",\"namedSlot\":true,\"maxItems\":3,\"items\":{\"title\":\"Body item\",\"oneOf\":[{\"$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\"}]}}};\n }\n static get tag() {\n return \"pfe-band\";\n }\n\n get schemaUrl() {\n return \"pfe-band.json\";\n }\n\n get templateUrl() {\n return \"pfe-band.html\";\n }\n\n get styleUrl() {\n return \"pfe-band.scss\";\n }\n\n get imageSrc() {\n return this.getAttribute(\"pfe-img-src\");\n }\n\n get backgroundColor() {\n return this.getAttribute(\"pfe-color\");\n }\n\n get asidePosition() {\n return {\n desktop: this.getAttribute(\"pfe-aside-desktop\"),\n mobile: this.getAttribute(\"pfe-aside-mobile\"),\n height: this.getAttribute(\"pfe-aside-height\")\n };\n }\n\n static get observedAttributes() {\n return [\n \"pfe-aside-desktop\",\n \"pfe-aside-mobile\",\n \"pfe-aside-height\",\n \"pfe-color\",\n \"pfe-img-src\"\n ];\n }\n\n static get cascadingAttributes() {\n return {\n \"pfe-aside-desktop\": \".pfe-band__container\",\n \"pfe-aside-mobile\": \".pfe-band__container\",\n \"pfe-aside-height\": \".pfe-band__container\"\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 connectedCallback() {\n super.connectedCallback();\n // Initialize the background image attachment\n if (this.imageSrc) {\n this._imgSrcChanged(\"pfe-img-src\", \"\", this.imageSrc);\n }\n // Initialize the context setting for the children elements\n if (this.backgroundColor) {\n this._updateContext(this.backgroundColor);\n }\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n super.attributeChangedCallback(attr, oldValue, newValue);\n // Strip the prefix form the attribute\n attr = attr.replace(\"pfe-\", \"\");\n // If the observer is defined in the attribute properties\n if (this[attr] && this[attr].observer) {\n // Get the observer function\n let observer = this[this[attr].observer].bind(this);\n // If it's a function, allow it to run\n if (typeof observer === \"function\") observer(attr, oldValue, newValue);\n }\n }\n\n _basicAttributeChanged(attr, oldValue, newValue) {\n this[attr].value = newValue;\n }\n\n // Update the color attribute and contexts\n _colorChanged(attr, oldValue, newValue) {\n this[attr].value = newValue;\n // If the new value has a dark background, update children elements\n this._updateContext(newValue);\n }\n\n // Update the background image\n _imgSrcChanged(attr, oldValue, newValue) {\n // Set the image as the background image\n this.style.backgroundImage = newValue ? `url('${newValue}')` : ``;\n }\n\n // Set the children's context if parent background is dark\n _updateContext(context) {\n if ([\"darkest\", \"darker\", \"complement\", \"accent\"].includes(context)) {\n [\"pfe-cta\"].forEach(elementName => {\n const els = [...this.querySelectorAll(`${elementName}`)];\n els.forEach(el => {\n const myContainer = el.closest(\"[pfe-type=container]\");\n if (myContainer === this || myContainer === null) {\n el.setAttribute(\"on\", \"dark\");\n }\n });\n });\n }\n }\n}\n\nPFElement.create(PfeBand);\n\nexport default PfeBand;\n//# sourceMappingURL=pfe-band.js.map\n"],"names":["Element","prototype","matches","msMatchesSelector","webkitMatchesSelector","closest","s","el","this","parentElement","parentNode","nodeType","Array","includes","Object","defineProperty","value","valueToFind","fromIndex","TypeError","o","len","length","x","y","n","k","Math","max","abs","isNaN","PfeBand","PFElement","html","map","slot","has_slot","join","asidePosition","mobile","properties","color","title","type","enum","default","observer","img-src","aside-desktop","options","dependencies","id","aside-mobile","aside-height","slots","header","namedSlot","maxItems","items","oneOf","$ref","body","footer","aside","tag","schemaUrl","templateUrl","styleUrl","imageSrc","getAttribute","backgroundColor","desktop","height","observedAttributes","cascadingAttributes","pfe-aside-desktop","pfe-aside-mobile","pfe-aside-height","PfeType","PfeTypes","Container","[object Object]","super","connectedCallback","_imgSrcChanged","_updateContext","attr","oldValue","newValue","attributeChangedCallback","replace","bind","style","backgroundImage","context","forEach","elementName","querySelectorAll","myContainer","setAttribute","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-band/pfe-band.umd.js b/elements/pfe-band/pfe-band.umd.js new file mode 100644 index 0000000000..809d50d62a --- /dev/null +++ b/elements/pfe-band/pfe-band.umd.js @@ -0,0 +1,354 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('../pfelement/pfelement.umd')) : + typeof define === 'function' && define.amd ? define(['../pfelement/pfelement.umd'], factory) : + (global.PfeBand = factory(global.PFElement)); +}(this, (function (PFElement) { 'use strict'; + + PFElement = PFElement && PFElement.hasOwnProperty('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; + }; + + 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); + } + }; + + /* + * @license + * Copyright 2019 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. + * + */ + + // -- Polyfill for supporting Element.closest + // https://developer.mozilla.org/en-US/docs/Web/API/Element/closest + if (!Element.prototype.matches) { + Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; + } + + if (!Element.prototype.closest) { + Element.prototype.closest = function (s) { + var el = this; + do { + if (el.matches(s)) return el; + el = el.parentElement || el.parentNode; + } while (el !== null && el.nodeType === 1); + return null; + }; + } + + // -- Polyfill for supporting Array.includes + // https://tc39.github.io/ecma262/#sec-array.prototype.includes + if (!Array.prototype.includes) { + Object.defineProperty(Array.prototype, "includes", { + value: function value(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; + } + }); + } + + var PfeBand = function (_PFElement) { + inherits(PfeBand, _PFElement); + createClass(PfeBand, [{ + key: 'html', + get: function get$$1() { + var _this2 = this; + + return '
    \n ' + (this.has_slot("pfe-band--aside") && this.asidePosition.mobile === "top" ? '' : "") + '\n ' + (this.has_slot("pfe-band--header") ? '' : "") + '\n \n ' + (this.has_slot("pfe-band--aside") && this.asidePosition.mobile !== "top" ? '' : "") + '\n ' + (this.has_slot("pfe-band--footer") ? '' : "") + '\n
    '; + } + }, { + key: 'schemaUrl', + get: function get$$1() { + return "pfe-band.json"; + } + }, { + key: 'templateUrl', + get: function get$$1() { + return "pfe-band.html"; + } + }, { + key: 'styleUrl', + get: function get$$1() { + return "pfe-band.scss"; + } + }, { + key: 'imageSrc', + get: function get$$1() { + return this.getAttribute("pfe-img-src"); + } + }, { + key: 'backgroundColor', + get: function get$$1() { + return this.getAttribute("pfe-color"); + } + }, { + key: 'asidePosition', + get: function get$$1() { + return { + desktop: this.getAttribute("pfe-aside-desktop"), + mobile: this.getAttribute("pfe-aside-mobile"), + height: this.getAttribute("pfe-aside-height") + }; + } + }], [{ + key: 'properties', + get: function get$$1() { + return { "color": { "title": "Background color", "type": "string", "enum": ["lightest", "lighter", "base", "darker", "darkest", "complement", "accent"], "default": "base", "observer": "_colorChanged" }, "img-src": { "title": "Background image", "type": "string", "observer": "_imgSrcChanged" }, "aside-desktop": { "title": "Aside positioning (desktop)", "type": "string", "default": "right", "enum": ["right", "left"], "observer": "_basicAttributeChanged", "options": { "dependencies": [{ "type": "slot", "id": "aside" }] } }, "aside-mobile": { "title": "Aside positioning (mobile)", "type": "string", "default": "bottom", "enum": ["top", "bottom"], "observer": "_basicAttributeChanged", "options": { "dependencies": [{ "type": "slot", "id": "aside" }] } }, "aside-height": { "title": "Aside height", "type": "string", "default": "body", "enum": ["full", "body"], "observer": "_basicAttributeChanged", "options": { "dependencies": [{ "type": "slot", "id": "aside" }] } } }; + } + }, { + key: 'slots', + get: function get$$1() { + return { "header": { "title": "Header", "type": "array", "namedSlot": true, "maxItems": 3, "items": { "title": "Body item", "oneOf": [{ "$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" }] } } }; + } + }, { + key: 'tag', + get: function get$$1() { + return "pfe-band"; + } + }, { + key: 'observedAttributes', + get: function get$$1() { + return ["pfe-aside-desktop", "pfe-aside-mobile", "pfe-aside-height", "pfe-color", "pfe-img-src"]; + } + }, { + key: 'cascadingAttributes', + get: function get$$1() { + return { + "pfe-aside-desktop": ".pfe-band__container", + "pfe-aside-mobile": ".pfe-band__container", + "pfe-aside-height": ".pfe-band__container" + }; + } + + // Declare the type of this component + + }, { + key: 'PfeType', + get: function get$$1() { + 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: 'connectedCallback', + value: function connectedCallback() { + get(PfeBand.prototype.__proto__ || Object.getPrototypeOf(PfeBand.prototype), 'connectedCallback', this).call(this); + // Initialize the background image attachment + if (this.imageSrc) { + this._imgSrcChanged("pfe-img-src", "", this.imageSrc); + } + // Initialize the context setting for the children elements + if (this.backgroundColor) { + this._updateContext(this.backgroundColor); + } + } + }, { + key: 'attributeChangedCallback', + value: function attributeChangedCallback(attr, oldValue, newValue) { + get(PfeBand.prototype.__proto__ || Object.getPrototypeOf(PfeBand.prototype), 'attributeChangedCallback', this).call(this, attr, oldValue, newValue); + // Strip the prefix form the attribute + attr = attr.replace("pfe-", ""); + // If the observer is defined in the attribute properties + if (this[attr] && this[attr].observer) { + // Get the observer function + var observer = this[this[attr].observer].bind(this); + // If it's a function, allow it to run + if (typeof observer === "function") observer(attr, oldValue, newValue); + } + } + }, { + key: '_basicAttributeChanged', + value: function _basicAttributeChanged(attr, oldValue, newValue) { + this[attr].value = newValue; + } + + // Update the color attribute and contexts + + }, { + key: '_colorChanged', + value: function _colorChanged(attr, oldValue, newValue) { + this[attr].value = newValue; + // If the new value has a dark background, update children elements + this._updateContext(newValue); + } + + // Update the background image + + }, { + key: '_imgSrcChanged', + value: function _imgSrcChanged(attr, oldValue, newValue) { + // Set the image as the background image + this.style.backgroundImage = newValue ? 'url(\'' + newValue + '\')' : ''; + } + + // Set the children's context if parent background is dark + + }, { + key: '_updateContext', + value: function _updateContext(context) { + var _this3 = this; + + if (["darkest", "darker", "complement", "accent"].includes(context)) { + ["pfe-cta"].forEach(function (elementName) { + var els = [].concat(toConsumableArray(_this3.querySelectorAll('' + elementName))); + els.forEach(function (el) { + var myContainer = el.closest("[pfe-type=container]"); + if (myContainer === _this3 || myContainer === null) { + el.setAttribute("on", "dark"); + } + }); + }); + } + } + }]); + return PfeBand; + }(PFElement); + + PFElement.create(PfeBand); + + return PfeBand; + +}))); +//# sourceMappingURL=pfe-band.umd.js.map diff --git a/elements/pfe-band/pfe-band.umd.js.map b/elements/pfe-band/pfe-band.umd.js.map new file mode 100644 index 0000000000..a895da4194 --- /dev/null +++ b/elements/pfe-band/pfe-band.umd.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-band.umd.js","sources":["pfe-band.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 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// -- Polyfill for supporting Element.closest\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest\nif (!Element.prototype.matches) {\n Element.prototype.matches =\n Element.prototype.msMatchesSelector ||\n Element.prototype.webkitMatchesSelector;\n}\n\nif (!Element.prototype.closest) {\n Element.prototype.closest = function(s) {\n var el = this;\n do {\n if (el.matches(s)) return el;\n el = el.parentElement || el.parentNode;\n } while (el !== null && el.nodeType === 1);\n return null;\n };\n}\n\n// -- Polyfill for supporting Array.includes\n// https://tc39.github.io/ecma262/#sec-array.prototype.includes\nif (!Array.prototype.includes) {\n Object.defineProperty(Array.prototype, \"includes\", {\n value: function(valueToFind, fromIndex) {\n if (this == null) {\n throw new TypeError('\"this\" is null or not defined');\n }\n\n // 1. Let O be ? ToObject(this value).\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 len is 0, return false.\n if (len === 0) {\n return false;\n }\n\n // 4. Let n be ? ToInteger(fromIndex).\n // (If fromIndex is undefined, this step produces the value 0.)\n var n = fromIndex | 0;\n\n // 5. If n ≥ 0, then\n // a. Let k be n.\n // 6. Else n < 0,\n // a. Let k be len + n.\n // b. If k < 0, let k be 0.\n var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);\n\n function sameValueZero(x, y) {\n return (\n x === y ||\n (typeof x === \"number\" &&\n typeof y === \"number\" &&\n isNaN(x) &&\n isNaN(y))\n );\n }\n\n // 7. Repeat, while k < len\n while (k < len) {\n // a. Let elementK be the result of ? Get(O, ! ToString(k)).\n // b. If SameValueZero(valueToFind, elementK) is true, return true.\n if (sameValueZero(o[k], valueToFind)) {\n return true;\n }\n // c. Increase k by 1.\n k++;\n }\n\n // 8. Return false\n return false;\n }\n });\n}\n\nclass PfeBand extends PFElement {\n\n get html() {\n return `
    this.has_slot(`pfe-band--${slot}`) ? `pfe-has-${slot}` : \"\").join(\" \")}>\n ${this.has_slot(\"pfe-band--aside\") && this.asidePosition.mobile === \"top\" ? `` : \"\"}\n ${this.has_slot(\"pfe-band--header\") ? `` : \"\"}\n \n ${this.has_slot(\"pfe-band--aside\") && this.asidePosition.mobile !== \"top\" ? `` : \"\"}\n ${this.has_slot(\"pfe-band--footer\") ? `` : \"\"}\n
    `;\n }\n\n static get properties() {\n return {\"color\":{\"title\":\"Background color\",\"type\":\"string\",\"enum\":[\"lightest\",\"lighter\",\"base\",\"darker\",\"darkest\",\"complement\",\"accent\"],\"default\":\"base\",\"observer\":\"_colorChanged\"},\"img-src\":{\"title\":\"Background image\",\"type\":\"string\",\"observer\":\"_imgSrcChanged\"},\"aside-desktop\":{\"title\":\"Aside positioning (desktop)\",\"type\":\"string\",\"default\":\"right\",\"enum\":[\"right\",\"left\"],\"observer\":\"_basicAttributeChanged\",\"options\":{\"dependencies\":[{\"type\":\"slot\",\"id\":\"aside\"}]}},\"aside-mobile\":{\"title\":\"Aside positioning (mobile)\",\"type\":\"string\",\"default\":\"bottom\",\"enum\":[\"top\",\"bottom\"],\"observer\":\"_basicAttributeChanged\",\"options\":{\"dependencies\":[{\"type\":\"slot\",\"id\":\"aside\"}]}},\"aside-height\":{\"title\":\"Aside height\",\"type\":\"string\",\"default\":\"body\",\"enum\":[\"full\",\"body\"],\"observer\":\"_basicAttributeChanged\",\"options\":{\"dependencies\":[{\"type\":\"slot\",\"id\":\"aside\"}]}}};\n }\n\n static get slots() {\n return {\"header\":{\"title\":\"Header\",\"type\":\"array\",\"namedSlot\":true,\"maxItems\":3,\"items\":{\"title\":\"Body item\",\"oneOf\":[{\"$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\"}]}}};\n }\n static get tag() {\n return \"pfe-band\";\n }\n\n get schemaUrl() {\n return \"pfe-band.json\";\n }\n\n get templateUrl() {\n return \"pfe-band.html\";\n }\n\n get styleUrl() {\n return \"pfe-band.scss\";\n }\n\n get imageSrc() {\n return this.getAttribute(\"pfe-img-src\");\n }\n\n get backgroundColor() {\n return this.getAttribute(\"pfe-color\");\n }\n\n get asidePosition() {\n return {\n desktop: this.getAttribute(\"pfe-aside-desktop\"),\n mobile: this.getAttribute(\"pfe-aside-mobile\"),\n height: this.getAttribute(\"pfe-aside-height\")\n };\n }\n\n static get observedAttributes() {\n return [\n \"pfe-aside-desktop\",\n \"pfe-aside-mobile\",\n \"pfe-aside-height\",\n \"pfe-color\",\n \"pfe-img-src\"\n ];\n }\n\n static get cascadingAttributes() {\n return {\n \"pfe-aside-desktop\": \".pfe-band__container\",\n \"pfe-aside-mobile\": \".pfe-band__container\",\n \"pfe-aside-height\": \".pfe-band__container\"\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 connectedCallback() {\n super.connectedCallback();\n // Initialize the background image attachment\n if (this.imageSrc) {\n this._imgSrcChanged(\"pfe-img-src\", \"\", this.imageSrc);\n }\n // Initialize the context setting for the children elements\n if (this.backgroundColor) {\n this._updateContext(this.backgroundColor);\n }\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n super.attributeChangedCallback(attr, oldValue, newValue);\n // Strip the prefix form the attribute\n attr = attr.replace(\"pfe-\", \"\");\n // If the observer is defined in the attribute properties\n if (this[attr] && this[attr].observer) {\n // Get the observer function\n let observer = this[this[attr].observer].bind(this);\n // If it's a function, allow it to run\n if (typeof observer === \"function\") observer(attr, oldValue, newValue);\n }\n }\n\n _basicAttributeChanged(attr, oldValue, newValue) {\n this[attr].value = newValue;\n }\n\n // Update the color attribute and contexts\n _colorChanged(attr, oldValue, newValue) {\n this[attr].value = newValue;\n // If the new value has a dark background, update children elements\n this._updateContext(newValue);\n }\n\n // Update the background image\n _imgSrcChanged(attr, oldValue, newValue) {\n // Set the image as the background image\n this.style.backgroundImage = newValue ? `url('${newValue}')` : ``;\n }\n\n // Set the children's context if parent background is dark\n _updateContext(context) {\n if ([\"darkest\", \"darker\", \"complement\", \"accent\"].includes(context)) {\n [\"pfe-cta\"].forEach(elementName => {\n const els = [...this.querySelectorAll(`${elementName}`)];\n els.forEach(el => {\n const myContainer = el.closest(\"[pfe-type=container]\");\n if (myContainer === this || myContainer === null) {\n el.setAttribute(\"on\", \"dark\");\n }\n });\n });\n }\n }\n}\n\nPFElement.create(PfeBand);\n\nexport default PfeBand;\n//# sourceMappingURL=pfe-band.js.map\n"],"names":["Element","prototype","matches","msMatchesSelector","webkitMatchesSelector","closest","s","el","parentElement","parentNode","nodeType","Array","includes","Object","defineProperty","value","valueToFind","fromIndex","TypeError","o","len","length","n","k","Math","max","abs","sameValueZero","x","y","isNaN","PfeBand","map","has_slot","slot","join","asidePosition","mobile","getAttribute","desktop","height","PFElement","PfeTypes","Container","type","PfeType","imageSrc","_imgSrcChanged","backgroundColor","_updateContext","attr","oldValue","newValue","replace","observer","bind","style","backgroundImage","context","forEach","els","querySelectorAll","elementName","myContainer","setAttribute","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-band/pfe-band.umd.min.js b/elements/pfe-band/pfe-band.umd.min.js new file mode 100644 index 0000000000..13dbf4c97a --- /dev/null +++ b/elements/pfe-band/pfe-band.umd.min.js @@ -0,0 +1,2 @@ +!function(e,a){"object"==typeof exports&&"undefined"!=typeof module?module.exports=a(require("../pfelement/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min"],a):e.PfeBand=a(e.PFElement)}(this,function(a){"use strict";a=a&&a.hasOwnProperty("default")?a.default:a;var t=function(){function r(e,a){for(var t=0;t>>0;if(0===r)return!1;var o,d,i=0|a,n=Math.max(0<=i?i:r-Math.abs(i),0);for(;n.pfe-band__aside,.pfe-band__body,.pfe-band__container,.pfe-band__footer,.pfe-band__header,:host{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-flow:column nowrap;-ms-flex-flow:column nowrap;flex-flow:column nowrap;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.pfe-band__aside,.pfe-band__body,.pfe-band__container,.pfe-band__footer,.pfe-band__header{display:grid;grid-row-gap:var(--pfe-band--gutter--vertical);grid-column-gap:var(--pfe-band--gutter--horizontal);margin-bottom:0}:host{display:block;--pfe-band--Padding--vertical:calc( var(--pfe-theme--container-spacer, 1rem) * 4);--pfe-band--Padding--horizontal:calc( var(--pfe-theme--container-spacer, 1rem) * 1);--pfe-band--Padding:var(--pfe-band--Padding--vertical) var(--pfe-band--Padding--horizontal);--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--base, #dfdfdf);--pfe-band--BackgroundPosition:center center;--pfe-band--Border:var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;--pfe-band--layout:1fr;--pfe-band__header--layout:1fr;--pfe-band__body--layout:1fr;--pfe-band__footer--layout:1fr;--pfe-band__aside--layout:1fr;--pfe-band--gutter--vertical:var(--pfe-theme--container-spacer, 1rem);--pfe-band--gutter--horizontal:calc(var(--pfe-theme--container-spacer, 1rem) * 3);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--base--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--base--link, #00538c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--base--link--visited, #7551a6);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--base--link--hover, #00305b);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--base--link--focus, #00305b);--pfe-band--Width:auto;--pfe-band--Width__aside--sm:240px;--pfe-band--Width__aside--lg:300px;position:relative;padding:calc(var(--pfe-band--Padding--vertical)/ 2) var(--pfe-band--Padding--horizontal);border:var(--pfe-band--Border);background-color:var(--pfe-band--BackgroundColor);background-position:var(--pfe-band--BackgroundPosition);color:var(--pfe-broadcasted--color--text)}@media screen and (min-width:768px){:host{--pfe-band--Width:calc( 768px - calc(var(--pfe-band--Padding--horizontal) * 4) )}}@media screen and (min-width:992px){:host{--pfe-band--Width:calc( 992px - calc(var(--pfe-band--Padding--horizontal) * 4) )}}@media screen and (min-width:1200px){:host{--pfe-band--Width:calc( 1200px - calc(var(--pfe-band--Padding--horizontal) * 4) )}}@media print{:host{--pfe-band--Padding:calc(var(--pfe-band--Padding--vertical) / 2) var(--pfe-band--Padding--horizontal)}}@media (min-width:576px){:host{padding:var(--pfe-band--Padding)}}@media print{:host{background-color:#fff!important;background-image:none!important;-webkit-box-shadow:none!important;box-shadow:none!important}}:host *,:host ::after,:host ::before{-webkit-box-sizing:border-box;box-sizing:border-box}:host([pfe-color=darker]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--darker, #464646);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darker--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darker--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darker--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darker--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darker--link--focus, #cce6ff)}:host([pfe-color=darkest]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--darkest, #131313);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darkest--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darkest--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darkest--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darkest--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darkest--link--focus, #cce6ff)}:host([pfe-color=accent]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--accent, #fe460d);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--accent--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--accent--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--accent--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--accent--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--accent--link--focus, #cce6ff)}:host([pfe-color=complement]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--complement, #0477a4);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--complement--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--complement--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--complement--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--complement--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--complement--link--focus, #cce6ff)}:host([pfe-color=lighter]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--lighter, #ececec);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lighter--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lighter--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lighter--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lighter--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lighter--link--focus, #003366)}:host([pfe-color=lightest]){--pfe-band--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lightest--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lightest--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lightest--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lightest--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lightest--link--focus, #003366)}:host([pfe-size=small]){--pfe-band--Padding:calc(var(--pfe-band--Padding--vertical) / 4) var(--pfe-band--Padding--horizontal)}.pfe-band__container{--pfe-band_region--width:calc(calc(1fr - var(--pfe-band--Width__aside--sm)) - var(--pfe-band--gutter--horizontal));--pfe-band--gridTemplateArea_mobile:"body";position:relative;margin:0 auto;width:100%;max-width:var(--pfe-band--Width)}.pfe-band__container[pfe-has-aside]{--pfe-band--gridTemplateArea_mobile:"body" "aside";--pfe-band--gridTemplateArea_desktop:"body aside"}@media (min-width:768px){.pfe-band__container[pfe-has-aside]{--pfe-band--layout:1fr var(--pfe-band--Width__aside--sm)}}@media (min-width:992px){.pfe-band__container[pfe-has-aside]{--pfe-band--layout:1fr var(--pfe-band--Width__aside--lg)}}.pfe-band__container[pfe-has-aside][pfe-aside-mobile=top]{--pfe-band--gridTemplateArea_mobile:"aside" "body"}.pfe-band__container[pfe-has-aside][pfe-aside-desktop=left]{--pfe-band--gridTemplateArea_desktop:"aside body"}@media (min-width:768px){.pfe-band__container[pfe-has-aside][pfe-aside-desktop=left]{--pfe-band--layout:var(--pfe-band--Width__aside--sm) 1fr}}@media (min-width:992px){.pfe-band__container[pfe-has-aside][pfe-aside-desktop=left]{--pfe-band--layout:var(--pfe-band--Width__aside--lg) 1fr}}.pfe-band__container[pfe-has-header]{--pfe-band--gridTemplateArea_mobile:"header" "body"}.pfe-band__container[pfe-has-header][pfe-has-aside]{--pfe-band--gridTemplateArea_mobile:"header" "body" "aside";--pfe-band--gridTemplateArea_desktop:"header header" "body aside"}.pfe-band__container[pfe-has-header][pfe-aside-mobile=top]{--pfe-band--gridTemplateArea_mobile:"aside" "header" "body"}.pfe-band__container[pfe-has-header][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"header aside" "body aside"}.pfe-band__container[pfe-has-header][pfe-aside-desktop=left]{--pfe-band--gridTemplateArea_desktop:"header header" "aside body"}.pfe-band__container[pfe-has-header][pfe-aside-desktop=left][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"aside header" "aside body"}.pfe-band__container[pfe-has-footer]{--pfe-band--gridTemplateArea_mobile:"body" "footer"}.pfe-band__container[pfe-has-footer][pfe-has-aside]{--pfe-band--gridTemplateArea_mobile:"body" "aside" "footer";--pfe-band--gridTemplateArea_desktop:"body aside" "footer footer"}.pfe-band__container[pfe-has-footer][pfe-aside-mobile=top]{--pfe-band--gridTemplateArea_mobile:"aside" "body" "footer"}.pfe-band__container[pfe-has-footer][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"body aside" "footer aside"}.pfe-band__container[pfe-has-footer][pfe-aside-desktop=left]{--pfe-band--gridTemplateArea_desktop:"aside body" "footer footer"}.pfe-band__container[pfe-has-footer][pfe-aside-desktop=left][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"aside body" "aside footer"}.pfe-band__container[pfe-has-header][pfe-has-footer]{--pfe-band--gridTemplateArea_mobile:"header" "body" "footer"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-has-aside]{--pfe-band--gridTemplateArea_mobile:"header" "body" "footer" "aside";--pfe-band--gridTemplateArea_desktop:"header header" "body aside" "footer footer"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-mobile=top]{--pfe-band--gridTemplateArea_mobile:"aside" "header" "body" "footer"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"header aside" "body aside" "footer aside"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-desktop=left]{--pfe-band--gridTemplateArea_desktop:"header header" "aside body" "footer footer"}.pfe-band__container[pfe-has-header][pfe-has-footer][pfe-aside-desktop=left][pfe-aside-height=full]{--pfe-band--gridTemplateArea_desktop:"aside header" "aside body" "aside footer"}@supports (display:grid){.pfe-band__container{grid-template-columns:var(--pfe-band--layout);grid-template-rows:-webkit-max-content;grid-template-rows:max-content;grid-template-areas:var(--pfe-band--gridTemplateArea_mobile)}@media (min-width:768px){.pfe-band__container{grid-template-areas:var(--pfe-band--gridTemplateArea_desktop)}}}.pfe-band__header{margin-bottom:var(--pfe-band--gutter--vertical)}@supports (display:grid){.pfe-band__header{grid-area:header;grid-template-columns:var(--pfe-band__header--layout)}}.pfe-band__body{margin-bottom:var(--pfe-band--gutter--vertical)}@supports (display:grid){.pfe-band__body{grid-area:body;grid-template-columns:var(--pfe-band__body--layout)}}.pfe-band__aside{margin-bottom:var(--pfe-band--gutter--vertical)}@supports (display:grid){.pfe-band__aside{grid-area:aside;grid-template-columns:var(--pfe-band__aside--layout)}}.pfe-band__footer{margin-bottom:var(--pfe-band--gutter--vertical)}@supports (display:grid){.pfe-band__footer{grid-area:footer;grid-template-columns:var(--pfe-band__footer--layout)}}.pfe-band__aside{-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch}
    \n "+(this.has_slot("pfe-band--aside")&&"top"===this.asidePosition.mobile?'':"")+"\n "+(this.has_slot("pfe-band--header")?'':"")+'\n \n '+(this.has_slot("pfe-band--aside")&&"top"!==this.asidePosition.mobile?'':"")+"\n "+(this.has_slot("pfe-band--footer")?'':"")+"\n
    "}},{key:"schemaUrl",get:function(){return"pfe-band.json"}},{key:"templateUrl",get:function(){return"pfe-band.html"}},{key:"styleUrl",get:function(){return"pfe-band.scss"}},{key:"imageSrc",get:function(){return this.getAttribute("pfe-img-src")}},{key:"backgroundColor",get:function(){return this.getAttribute("pfe-color")}},{key:"asidePosition",get:function(){return{desktop:this.getAttribute("pfe-aside-desktop"),mobile:this.getAttribute("pfe-aside-mobile"),height:this.getAttribute("pfe-aside-height")}}}],[{key:"properties",get:function(){return{color:{title:"Background color",type:"string",enum:["lightest","lighter","base","darker","darkest","complement","accent"],default:"base",observer:"_colorChanged"},"img-src":{title:"Background image",type:"string",observer:"_imgSrcChanged"},"aside-desktop":{title:"Aside positioning (desktop)",type:"string",default:"right",enum:["right","left"],observer:"_basicAttributeChanged",options:{dependencies:[{type:"slot",id:"aside"}]}},"aside-mobile":{title:"Aside positioning (mobile)",type:"string",default:"bottom",enum:["top","bottom"],observer:"_basicAttributeChanged",options:{dependencies:[{type:"slot",id:"aside"}]}},"aside-height":{title:"Aside height",type:"string",default:"body",enum:["full","body"],observer:"_basicAttributeChanged",options:{dependencies:[{type:"slot",id:"aside"}]}}}}},{key:"slots",get:function(){return{header:{title:"Header",type:"array",namedSlot:!0,maxItems:3,items:{title:"Body item",oneOf:[{$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:"tag",get:function(){return"pfe-band"}},{key:"observedAttributes",get:function(){return["pfe-aside-desktop","pfe-aside-mobile","pfe-aside-height","pfe-color","pfe-img-src"]}},{key:"cascadingAttributes",get:function(){return{"pfe-aside-desktop":".pfe-band__container","pfe-aside-mobile":".pfe-band__container","pfe-aside-height":".pfe-band__container"}}},{key:"PfeType",get:function(){return a.PfeTypes.Container}}]),t(o,[{key:"connectedCallback",value:function(){d(o.prototype.__proto__||Object.getPrototypeOf(o.prototype),"connectedCallback",this).call(this),this.imageSrc&&this._imgSrcChanged("pfe-img-src","",this.imageSrc),this.backgroundColor&&this._updateContext(this.backgroundColor)}},{key:"attributeChangedCallback",value:function(e,a,t){if(d(o.prototype.__proto__||Object.getPrototypeOf(o.prototype),"attributeChangedCallback",this).call(this,e,a,t),this[e=e.replace("pfe-","")]&&this[e].observer){var r=this[this[e].observer].bind(this);"function"==typeof r&&r(e,a,t)}}},{key:"_basicAttributeChanged",value:function(e,a,t){this[e].value=t}},{key:"_colorChanged",value:function(e,a,t){this[e].value=t,this._updateContext(t)}},{key:"_imgSrcChanged",value:function(e,a,t){this.style.backgroundImage=t?"url('"+t+"')":""}},{key:"_updateContext",value:function(e){var t=this;["darkest","darker","complement","accent"].includes(e)&&["pfe-cta"].forEach(function(e){[].concat(function(e){if(Array.isArray(e)){for(var a=0,t=Array(e.length);a>> 0;\n\n // 3. If len is 0, return false.\n if (len === 0) {\n return false;\n }\n\n // 4. Let n be ? ToInteger(fromIndex).\n // (If fromIndex is undefined, this step produces the value 0.)\n var n = fromIndex | 0;\n\n // 5. If n ≥ 0, then\n // a. Let k be n.\n // 6. Else n < 0,\n // a. Let k be len + n.\n // b. If k < 0, let k be 0.\n var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);\n\n function sameValueZero(x, y) {\n return (\n x === y ||\n (typeof x === \"number\" &&\n typeof y === \"number\" &&\n isNaN(x) &&\n isNaN(y))\n );\n }\n\n // 7. Repeat, while k < len\n while (k < len) {\n // a. Let elementK be the result of ? Get(O, ! ToString(k)).\n // b. If SameValueZero(valueToFind, elementK) is true, return true.\n if (sameValueZero(o[k], valueToFind)) {\n return true;\n }\n // c. Increase k by 1.\n k++;\n }\n\n // 8. Return false\n return false;\n }\n });\n}\n\nclass PfeBand extends PFElement {\n\n get html() {\n return `
    this.has_slot(`pfe-band--${slot}`) ? `pfe-has-${slot}` : \"\").join(\" \")}>\n ${this.has_slot(\"pfe-band--aside\") && this.asidePosition.mobile === \"top\" ? `` : \"\"}\n ${this.has_slot(\"pfe-band--header\") ? `` : \"\"}\n \n ${this.has_slot(\"pfe-band--aside\") && this.asidePosition.mobile !== \"top\" ? `` : \"\"}\n ${this.has_slot(\"pfe-band--footer\") ? `` : \"\"}\n
    `;\n }\n\n static get properties() {\n return {\"color\":{\"title\":\"Background color\",\"type\":\"string\",\"enum\":[\"lightest\",\"lighter\",\"base\",\"darker\",\"darkest\",\"complement\",\"accent\"],\"default\":\"base\",\"observer\":\"_colorChanged\"},\"img-src\":{\"title\":\"Background image\",\"type\":\"string\",\"observer\":\"_imgSrcChanged\"},\"aside-desktop\":{\"title\":\"Aside positioning (desktop)\",\"type\":\"string\",\"default\":\"right\",\"enum\":[\"right\",\"left\"],\"observer\":\"_basicAttributeChanged\",\"options\":{\"dependencies\":[{\"type\":\"slot\",\"id\":\"aside\"}]}},\"aside-mobile\":{\"title\":\"Aside positioning (mobile)\",\"type\":\"string\",\"default\":\"bottom\",\"enum\":[\"top\",\"bottom\"],\"observer\":\"_basicAttributeChanged\",\"options\":{\"dependencies\":[{\"type\":\"slot\",\"id\":\"aside\"}]}},\"aside-height\":{\"title\":\"Aside height\",\"type\":\"string\",\"default\":\"body\",\"enum\":[\"full\",\"body\"],\"observer\":\"_basicAttributeChanged\",\"options\":{\"dependencies\":[{\"type\":\"slot\",\"id\":\"aside\"}]}}};\n }\n\n static get slots() {\n return {\"header\":{\"title\":\"Header\",\"type\":\"array\",\"namedSlot\":true,\"maxItems\":3,\"items\":{\"title\":\"Body item\",\"oneOf\":[{\"$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\"}]}}};\n }\n static get tag() {\n return \"pfe-band\";\n }\n\n get schemaUrl() {\n return \"pfe-band.json\";\n }\n\n get templateUrl() {\n return \"pfe-band.html\";\n }\n\n get styleUrl() {\n return \"pfe-band.scss\";\n }\n\n get imageSrc() {\n return this.getAttribute(\"pfe-img-src\");\n }\n\n get backgroundColor() {\n return this.getAttribute(\"pfe-color\");\n }\n\n get asidePosition() {\n return {\n desktop: this.getAttribute(\"pfe-aside-desktop\"),\n mobile: this.getAttribute(\"pfe-aside-mobile\"),\n height: this.getAttribute(\"pfe-aside-height\")\n };\n }\n\n static get observedAttributes() {\n return [\n \"pfe-aside-desktop\",\n \"pfe-aside-mobile\",\n \"pfe-aside-height\",\n \"pfe-color\",\n \"pfe-img-src\"\n ];\n }\n\n static get cascadingAttributes() {\n return {\n \"pfe-aside-desktop\": \".pfe-band__container\",\n \"pfe-aside-mobile\": \".pfe-band__container\",\n \"pfe-aside-height\": \".pfe-band__container\"\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 connectedCallback() {\n super.connectedCallback();\n // Initialize the background image attachment\n if (this.imageSrc) {\n this._imgSrcChanged(\"pfe-img-src\", \"\", this.imageSrc);\n }\n // Initialize the context setting for the children elements\n if (this.backgroundColor) {\n this._updateContext(this.backgroundColor);\n }\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n super.attributeChangedCallback(attr, oldValue, newValue);\n // Strip the prefix form the attribute\n attr = attr.replace(\"pfe-\", \"\");\n // If the observer is defined in the attribute properties\n if (this[attr] && this[attr].observer) {\n // Get the observer function\n let observer = this[this[attr].observer].bind(this);\n // If it's a function, allow it to run\n if (typeof observer === \"function\") observer(attr, oldValue, newValue);\n }\n }\n\n _basicAttributeChanged(attr, oldValue, newValue) {\n this[attr].value = newValue;\n }\n\n // Update the color attribute and contexts\n _colorChanged(attr, oldValue, newValue) {\n this[attr].value = newValue;\n // If the new value has a dark background, update children elements\n this._updateContext(newValue);\n }\n\n // Update the background image\n _imgSrcChanged(attr, oldValue, newValue) {\n // Set the image as the background image\n this.style.backgroundImage = newValue ? `url('${newValue}')` : ``;\n }\n\n // Set the children's context if parent background is dark\n _updateContext(context) {\n if ([\"darkest\", \"darker\", \"complement\", \"accent\"].includes(context)) {\n [\"pfe-cta\"].forEach(elementName => {\n const els = [...this.querySelectorAll(`${elementName}`)];\n els.forEach(el => {\n const myContainer = el.closest(\"[pfe-type=container]\");\n if (myContainer === this || myContainer === null) {\n el.setAttribute(\"on\", \"dark\");\n }\n });\n });\n }\n }\n}\n\nPFElement.create(PfeBand);\n\nexport default PfeBand;\n//# sourceMappingURL=pfe-band.js.map\n"],"names":["Element","prototype","matches","msMatchesSelector","webkitMatchesSelector","closest","s","el","this","parentElement","parentNode","nodeType","Array","includes","defineProperty","valueToFind","fromIndex","TypeError","o","Object","len","length","x","y","n","k","Math","max","abs","isNaN","PfeBand","type","PfeType","PFElement","map","_this2","has_slot","slot","join","asidePosition","mobile","getAttribute","color","title","enum","default","observer","img-src","aside-desktop","options","dependencies","id","aside-mobile","aside-height","header","namedSlot","maxItems","items","oneOf","$ref","body","footer","aside","PfeTypes","Container","imageSrc","_imgSrcChanged","backgroundColor","_updateContext","attr","oldValue","newValue","replace","bind","value","style","backgroundImage","context","forEach","_this3","querySelectorAll","elementName","myContainer","setAttribute","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-card/package.json b/elements/pfe-card/package.json index 30fa394449..d9111260cf 100644 --- a/elements/pfe-card/package.json +++ b/elements/pfe-card/package.json @@ -4,7 +4,7 @@ "className": "PfeCard", "elementName": "pfe-card" }, - "version": "1.0.0-prerelease.11", + "version": "1.0.0-prerelease.13", "publishConfig": { "access": "public" }, @@ -15,7 +15,7 @@ ], "repository": { "type": "git", - "url" : "github:patternfly/patternfly-elements", + "url": "github:patternfly/patternfly-elements", "directory": "elements/pfe-card" }, "main": "pfe-card.js", @@ -33,8 +33,8 @@ ], "license": "MIT", "dependencies": { - "@patternfly/pfe-sass": "^1.0.0-prerelease.11", - "@patternfly/pfelement": "^1.0.0-prerelease.11" + "@patternfly/pfe-sass": "^1.0.0-prerelease.13", + "@patternfly/pfelement": "^1.0.0-prerelease.13" }, "generator-pfelement-version": "0.5.0", "gitHead": "dfa74e0495c556ebdd1edb61c6d406621d1b6421" diff --git a/elements/pfe-card/pfe-card.css b/elements/pfe-card/pfe-card.css new file mode 100644 index 0000000000..ca09948418 --- /dev/null +++ b/elements/pfe-card/pfe-card.css @@ -0,0 +1,155 @@ +/* + * Copyright 2018 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. + */ +/* Palette of Border Colors */ +/* Palette of Feedback Colors */ +:host { + --pfe-card--padding: calc(var(--pfe-theme--container-spacer, 1rem) * 2); + --pfe-card_header--size: var(--pfe-theme--font-size--heading--gamma, 21px); + --pfe-card--bg: var(--pfe-theme--color--surface--base, #dfdfdf); + --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--base--text, #333); + --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--base--link, #00538c); + --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--base--link--visited, #7551a6); + --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--base--link--hover, #00305b); + --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--base--link--focus, #00305b); + 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; + align-self: stretch; + padding: var(--pfe-card--padding); + border: 1px solid transparent; + border: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent; + border-radius: 0; + border-radius: var(--pfe-theme--surface--border-radius, 0); + background: var(--pfe-card--bg); + color: var(--pfe-broadcasted--color--text); +} + +a { + color: var(--pfe-broadcasted--color--ui-link); +} + +a:visited { + color: var(--pfe-broadcasted--color--ui-link--visited); +} + +a:hover { + color: var(--pfe-broadcasted--color--ui-link--hover); +} + +a:focus { + color: var(--pfe-broadcasted--color--ui-link--focus); +} + +:host([color="dark"]) { + --pfe-card--bg: var(--pfe-theme--color--surface--darker, #464646); + --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--darker--text, #fff); + --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--darker--link, #99ccff); + --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--darker--link--visited, #b38cd9); + --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--darker--link--hover, #cce6ff); + --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--darker--link--focus, #cce6ff); +} + +:host([color="darkest"]) { + --pfe-card--bg: var(--pfe-theme--color--surface--darkest, #131313); + --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--darkest--text, #fff); + --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--darkest--link, #99ccff); + --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--darkest--link--visited, #b38cd9); + --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--darkest--link--hover, #cce6ff); + --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--darkest--link--focus, #cce6ff); +} + +:host([color="light"]) { + --pfe-card--bg: var(--pfe-theme--color--surface--lighter, #ececec); + --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--lighter--text, #333); + --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--lighter--link, #06c); + --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--lighter--link--visited, rebeccapurple); + --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--lighter--link--hover, #003366); + --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--lighter--link--focus, #003366); +} + +:host([color="lightest"]) { + --pfe-card--bg: var(--pfe-theme--color--surface--lightest, #fff); + --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--lightest--text, #333); + --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--lightest--link, #06c); + --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--lightest--link--visited, rebeccapurple); + --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--lightest--link--hover, #003366); + --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--lightest--link--focus, #003366); +} + +:host([color="complement"]) { + --pfe-card--bg: var(--pfe-theme--color--surface--complement, #0477a4); + --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--complement--text, #fff); + --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--complement--link, #99ccff); + --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--complement--link--visited, #b38cd9); + --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--complement--link--hover, #cce6ff); + --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--complement--link--focus, #cce6ff); +} + +:host([color="accent"]) { + --pfe-card--bg: var(--pfe-theme--color--surface--accent, #fe460d); + --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--accent--text, #fff); + --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--accent--link, #99ccff); + --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--accent--link--visited, #b38cd9); + --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--accent--link--hover, #cce6ff); + --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--accent--link--focus, #cce6ff); +} + +:host([size="small"]) { + --pfe-card--padding: var(--pfe-theme--container-spacer, 1rem); +} + +.pfe-card__header, +.pfe-card__body, +.pfe-card__footer { + display: block; + margin: 0; +} + +.pfe-card__header::slotted(h1:first-child), +.pfe-card__header::slotted(h2:first-child), +.pfe-card__header::slotted(h3:first-child), +.pfe-card__header::slotted(h4:first-child), +.pfe-card__header::slotted(h5:first-child), +.pfe-card__header::slotted(h6:first-child) { + margin-top: 0 !important; + font-size: var(--pfe-card_header--size); +} + +.pfe-card__body::slotted(*:nth-child(2)) { + margin-top: 0 !important; +} + +.pfe-card__footer { + margin-top: auto; + justify-self: flex-end; +} + +/*# sourceMappingURL=pfe-card.css.map */ diff --git a/elements/pfe-card/pfe-card.css.map b/elements/pfe-card/pfe-card.css.map new file mode 100644 index 0000000000..fcf62b70a7 --- /dev/null +++ b/elements/pfe-card/pfe-card.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","pfe-card.css","../../pfe-sass/variables/_colors.scss","pfe-card.scss","../../pfe-sass/functions/_functions.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;ECoBE;AC4GF,6BAAA;AAOA,+BAAA;ACrIA;EACE,gGAAoB;EACpB,+FAAwB;EACxB,6FAAe;EACf,gGAA+B;EAC/B,mGAAkC;EAClC,4GAA2C;EAC3C,0GAAyC;EACzC,0GAAyC;EAEzC,oBAAa;EAAb,qBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,4BAAsB;EAAtB,6BAAsB;EAAtB,8BAAsB;MAAtB,0BAAsB;UAAtB,sBAAsB;EACtB,yBAAyB;EAEzB,2BAAmB;MAAnB,4BAAmB;UAAnB,mBAAmB;EAEnB,iCAAiC;EACjC,6BAEmB;EAFnB,+GAEmB;EACnB,gBC+M4F;ED/M5F,0DC+M4F;ED5M5F,+BAA+B;EAC/B,0CAA0C;AFe5C;;AEZA;EACE,6CAA6C;AFe/C;;AEZA;EACE,sDAAsD;AFexD;;AEZA;EACE,oDAAoD;AFetD;;AEZA;EACE,oDAAoD;AFetD;;AEZA;EACE,+FAAe;EACf,kGAA+B;EAC/B,qGAAkC;EAClC,8GAA2C;EAC3C,4GAAyC;EACzC,4GAAyC;AFe3C;;AEZA;EACE,gGAAe;EACf,mGAA+B;EAC/B,sGAAkC;EAClC,+GAA2C;EAC3C,6GAAyC;EACzC,6GAAyC;AFe3C;;AEZA;EACE,gGAAe;EACf,mGAA+B;EAC/B,mGAAkC;EAClC,qHAA2C;EAC3C,6GAAyC;EACzC,6GAAyC;AFe3C;;AEZA;EACE,8FAAe;EACf,oGAA+B;EAC/B,oGAAkC;EAClC,sHAA2C;EAC3C,8GAAyC;EACzC,8GAAyC;AFe3C;;AEZA;EACE,mGAAe;EACf,sGAA+B;EAC/B,yGAAkC;EAClC,kHAA2C;EAC3C,gHAAyC;EACzC,gHAAyC;AFe3C;;AEZA;EACE,+FAAe;EACf,kGAA+B;EAC/B,qGAAkC;EAClC,8GAA2C;EAC3C,4GAAyC;EACzC,4GAAyC;AFe3C;;AEZA;EACE,oEAAoB;AFetB;;AEZA;;;EAGE,cAAc;EACd,SAAS;AFeX;;AEZA;;;;;;EAME,wBAAwB;EACxB,uCAAuC;AFezC;;AEZA;EACE,wBAAwB;AFe1B;;AEZA;EAEE,gBAAgB;EAChB,sBAAsB;AFcxB","file":"pfe-card.css","sourcesContent":["/*\n * Copyright 2018 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// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n","/*\n * Copyright 2018 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/* Palette of Border Colors */\n/* Palette of Feedback Colors */\n:host {\n --pfe-card--padding: calc(var(--pfe-theme--container-spacer, 1rem) * 2);\n --pfe-card_header--size: var(--pfe-theme--font-size--heading--gamma, 21px);\n --pfe-card--bg: var(--pfe-theme--color--surface--base, #dfdfdf);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--base--text, #333);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--base--link, #00538c);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--base--link--visited, #7551a6);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--base--link--hover, #00305b);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--base--link--focus, #00305b);\n display: flex;\n flex-direction: column;\n justify-items: flex-start;\n align-self: stretch;\n padding: var(--pfe-card--padding);\n border: var(--pfe-theme--surface--border-width, 1px) var(--pfe-theme--surface--border-style, solid) transparent;\n border-radius: var(--pfe-theme--surface--border-radius, 0);\n background: var(--pfe-card--bg);\n color: var(--pfe-broadcasted--color--text);\n}\n\na {\n color: var(--pfe-broadcasted--color--ui-link);\n}\n\na:visited {\n color: var(--pfe-broadcasted--color--ui-link--visited);\n}\n\na:hover {\n color: var(--pfe-broadcasted--color--ui-link--hover);\n}\n\na:focus {\n color: var(--pfe-broadcasted--color--ui-link--focus);\n}\n\n:host([color=\"dark\"]) {\n --pfe-card--bg: var(--pfe-theme--color--surface--darker, #464646);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--darker--text, #fff);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--darker--link, #99ccff);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--darker--link--visited, #b38cd9);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--darker--link--hover, #cce6ff);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--darker--link--focus, #cce6ff);\n}\n\n:host([color=\"darkest\"]) {\n --pfe-card--bg: var(--pfe-theme--color--surface--darkest, #131313);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--darkest--text, #fff);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--darkest--link, #99ccff);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--darkest--link--visited, #b38cd9);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--darkest--link--hover, #cce6ff);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--darkest--link--focus, #cce6ff);\n}\n\n:host([color=\"light\"]) {\n --pfe-card--bg: var(--pfe-theme--color--surface--lighter, #ececec);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--lighter--text, #333);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--lighter--link, #06c);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--lighter--link--visited, rebeccapurple);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--lighter--link--hover, #003366);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--lighter--link--focus, #003366);\n}\n\n:host([color=\"lightest\"]) {\n --pfe-card--bg: var(--pfe-theme--color--surface--lightest, #fff);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--lightest--text, #333);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--lightest--link, #06c);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--lightest--link--visited, rebeccapurple);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--lightest--link--hover, #003366);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--lightest--link--focus, #003366);\n}\n\n:host([color=\"complement\"]) {\n --pfe-card--bg: var(--pfe-theme--color--surface--complement, #0477a4);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--complement--text, #fff);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--complement--link, #99ccff);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--complement--link--visited, #b38cd9);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--complement--link--hover, #cce6ff);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--complement--link--focus, #cce6ff);\n}\n\n:host([color=\"accent\"]) {\n --pfe-card--bg: var(--pfe-theme--color--surface--accent, #fe460d);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--accent--text, #fff);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--surface--accent--link, #99ccff);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--surface--accent--link--visited, #b38cd9);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--surface--accent--link--hover, #cce6ff);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--surface--accent--link--focus, #cce6ff);\n}\n\n:host([size=\"small\"]) {\n --pfe-card--padding: var(--pfe-theme--container-spacer, 1rem);\n}\n\n.pfe-card__header,\n.pfe-card__body,\n.pfe-card__footer {\n display: block;\n margin: 0;\n}\n\n.pfe-card__header::slotted(h1:first-child),\n.pfe-card__header::slotted(h2:first-child),\n.pfe-card__header::slotted(h3:first-child),\n.pfe-card__header::slotted(h4:first-child),\n.pfe-card__header::slotted(h5:first-child),\n.pfe-card__header::slotted(h6:first-child) {\n margin-top: 0 !important;\n font-size: var(--pfe-card_header--size);\n}\n\n.pfe-card__body::slotted(*:nth-child(2)) {\n margin-top: 0 !important;\n}\n\n.pfe-card__footer {\n margin-top: auto;\n justify-self: flex-end;\n}\n","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text: $pfelements--gray-dark !default;\n$pfe-color--text--on-dark: $pfe-color--white !default;\n$pfe-color--text--on-saturated: $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link: #06c !default;\n$pfe-color--ui-link--visited: $pfelements--purple !default; // Was #7551a6\n$pfe-color--ui-link--hover: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-dark--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-saturated--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base: $pfelements--blue !default;\n$pfe-color--ui-base--hover: darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement: $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover: $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent: $pfelements--orange !default;\n$pfe-color--ui-accent--hover: darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text: $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover: $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest: $pfe-color--white !default;\n$pfe-color--surface--lightest--text: $pfe-color--text !default;\n$pfe-color--surface--lightest--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus: $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text: $pfe-color--text !default;\n$pfe-color--surface--lighter--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus: $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base: $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text: $pfe-color--text !default;\n$pfe-color--surface--base--link: #00538c !default; // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited: #7551a6 !default;\n$pfe-color--surface--base--link--hover: #00305b !default;\n$pfe-color--surface--base--link--focus: #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker: $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest: $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement: $pfelements--blue;\n$pfe-color--surface--complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent: $pfelements--orange;\n$pfe-color--surface--accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc\n$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7\n$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical: $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important: $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest: $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest: $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate: $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest: $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest: $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success: #2e7d32 !default;\n$pfe-color--feedback--success--lightest: $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest: #1b5e20 !default;\n\n$pfe-color--feedback--info: #0277bd !default;\n$pfe-color--feedback--info--lightest: $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest: #01579b !default;\n\n$pfe-color--feedback--default: $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest: $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest: $pfe-color--gray-800 !default;\n","@import \"../../pfe-sass/pfe-sass\";\n\n:host {\n --pfe-card--padding: calc(#{pfe-var(container-spacer)} * 2); // 2x `container-spacer`\n --pfe-card_header--size: #{pfe-var(font-size--heading--gamma)};\n --pfe-card--bg: #{pfe-color(surface--base)};\n --pfe-broadcasted--color--text: #{pfe-color(surface--base--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--base--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--base--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--base--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--base--link--focus)};\n\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: var(--pfe-card--padding);\n border: pfe-var(surface--border-width)\n pfe-var(surface--border-style)\n transparent;\n border-radius: pfe-var(surface--border-radius);\n\n // Base colors\n background: var(--pfe-card--bg);\n color: var(--pfe-broadcasted--color--text);\n}\n\na {\n color: var(--pfe-broadcasted--color--ui-link);\n}\n\na:visited {\n color: var(--pfe-broadcasted--color--ui-link--visited);\n}\n\na:hover {\n color: var(--pfe-broadcasted--color--ui-link--hover);\n}\n\na:focus {\n color: var(--pfe-broadcasted--color--ui-link--focus);\n}\n\n:host([color=\"dark\"]) {\n --pfe-card--bg: #{pfe-color(surface--darker)};\n --pfe-broadcasted--color--text: #{pfe-color(surface--darker--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darker--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darker--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darker--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darker--link--focus)};\n}\n\n:host([color=\"darkest\"]) {\n --pfe-card--bg: #{pfe-color(surface--darkest)};\n --pfe-broadcasted--color--text: #{pfe-color(surface--darkest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darkest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darkest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darkest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darkest--link--focus)};\n}\n\n:host([color=\"light\"]) {\n --pfe-card--bg: #{pfe-color(surface--lighter)};\n --pfe-broadcasted--color--text: #{pfe-color(surface--lighter--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lighter--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lighter--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lighter--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lighter--link--focus)};\n}\n\n:host([color=\"lightest\"]) {\n --pfe-card--bg: #{pfe-color(surface--lightest)};\n --pfe-broadcasted--color--text: #{pfe-color(surface--lightest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lightest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lightest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lightest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lightest--link--focus)};\n}\n\n:host([color=\"complement\"]) {\n --pfe-card--bg: #{pfe-color(surface--complement)};\n --pfe-broadcasted--color--text: #{pfe-color(surface--complement--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--complement--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--complement--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--complement--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--complement--link--focus)};\n}\n\n:host([color=\"accent\"]) {\n --pfe-card--bg: #{pfe-color(surface--accent)};\n --pfe-broadcasted--color--text: #{pfe-color(surface--accent--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--accent--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--accent--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--accent--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--accent--link--focus)};\n}\n\n:host([size=\"small\"]) {\n --pfe-card--padding: #{pfe-var(container-spacer)};\n}\n\n.pfe-card__header,\n.pfe-card__body,\n.pfe-card__footer {\n display: block;\n margin: 0;\n}\n\n.pfe-card__header::slotted(h1:first-child),\n.pfe-card__header::slotted(h2:first-child),\n.pfe-card__header::slotted(h3:first-child),\n.pfe-card__header::slotted(h4:first-child),\n.pfe-card__header::slotted(h5:first-child),\n.pfe-card__header::slotted(h6:first-child) {\n margin-top: 0 !important; // Specificity issue. Why?!\n font-size: var(--pfe-card_header--size);\n}\n\n.pfe-card__body::slotted(*:nth-child(2)) { // child pseudo-selectors appear to be based on slotted code before upgrade.\n margin-top: 0 !important;\n}\n\n.pfe-card__footer {\n // margin-top: pfe-var(container-spacer);\n margin-top: auto; // This allows the footer to move to the very bottom\n justify-self: flex-end;\n}\n","@function pfe-strip-unit($number) {\n @if type-of($number) == \"number\" and not unitless($number) {\n @return $number / ($number * 0 + 1);\n }\n \n @return $number;\n }\n\n@function pfe-size-pem($pxval, $base: $pfe-global--font-size-root) {\n @return pfe-strip-unit($pxval) / $base * 1em;\n}\n\n@function pfe-size-prem($pxval, $base: $pfe-global--font-size-root) {\n @return pfe-strip-unit($pxval) / $base * 1rem;\n}\n\n@function pfe-size-rem2px($remval, $base: $pfe-global--font-size-root) {\n @return pfe-strip-unit($remval) * ($base / 1px);\n}\n\n/// Map deep get\n/// @author Hugo Giraudel\n/// @access public\n/// @param {Map} $map - Map\n/// @param {Arglist} $keys - Key chain\n/// @return {*} - Desired value\n@function map-deep-get($map, $keys...) {\n @each $key in $keys {\n @if type-of($map)==\"map\" {\n $map: map-get($map, $key);\n }\n\n @else {\n @warn \"Map provided is not a map.\"\n }\n }\n\n @return $map;\n}\n\n// Collect all maps and merge them together\n@function map-collect($maps...) {\n $collection: ();\n\n @each $map in $maps {\n $collection: map-merge($collection, $map);\n }\n\n @return $collection;\n}\n\n// New color function to only return theme colors\n@function color($name, $theme: \"light\", $opacity: 1) {\n $map: map-get($color-map, $name);\n $error: false;\n $color: null;\n\n @if $map !=null {\n $color: map-get($map, $theme);\n }\n\n @else {\n $error: true;\n }\n\n @if type-of($color)==color {\n @if $opacity==1 {\n @return $color;\n }\n\n @if $opacity < 1 {\n @return rgba($color, $opacity);\n }\n }\n\n @else {\n $error: true;\n }\n\n @if $error {\n @warn \"#{$name} is not a valid color\";\n }\n}\n\n// https://hugogiraudel.com/2013/08/08/advanced-sass-list-functions/\n// Get the first item in a list\n@function first($list) {\n @return nth($list, 1);\n}\n\n// Get the last item in a list\n@function last($list) {\n @return nth($list, length($list));\n}\n\n@function str-replace($string, $search, $replace: \"\") {\n @if type-of($string)==\"string\"and type-of($search)==\"string\" {\n $index: str-index($string, $search);\n\n @if $index {\n @return str-slice($string, 1, $index - 1)+$replace+str-replace(str-slice($string, $index + str-length($search)), $search, $replace);\n }\n }\n\n @return $string;\n}\n\n@function to-string($list, $glue: '', $is-nested: false) {\n $result: null;\n\n @for $i from 1 through length($list) {\n $e: nth($list, $i);\n\n @if type-of($e)==list {\n $result: $result#{to-string($e, $glue, true)};\n }\n\n @else {\n $result: if($i !=length($list) or $is-nested,\n $result#{$e}#{$glue},\n $result#{$e});\n }\n }\n\n @return $result;\n}\n\n@function str-split($string, $separator) {\n // empty array/list\n $split-arr: ();\n // first index of separator in string\n $index: str-index(\"#{$string}\", $separator);\n\n // loop through string\n @while $index !=null {\n // get the substring from the first character to the separator\n $item: str-slice($string, 1, $index - 1);\n // push item to array\n $split-arr: append($split-arr, $item);\n // remove item and separator from string\n $string: str-slice($string, $index + 1);\n // find new index of separator\n $index: str-index($string, $separator);\n }\n\n // add the remaining string to list (the last item) and return\n @return append($split-arr, $string);\n}\n\n// https://github.com/HugoGiraudel/SassyStrings/blob/master/dist/_SassyStrings.scss\n/// Remove all trailing and leading whitespaces from `$string`.\n/// @since 1.2.0\n/// @param {String} $string - string\n/// @return {String}\n\n@function str-trim($string) {\n $start: 1;\n $end: str-length($string);\n\n @for $i from 1 through str-length($string) {\n $first: str-slice($string, $i, $i);\n $last: str-slice($string, -$i, -$i);\n\n @if $first==\" \"and $i+1==$start+1 {\n $start: $i + 1;\n }\n\n @if $last==\" \"and str-length($string) - $i==$end - 1 {\n $end: str-length($string) - $i;\n }\n }\n\n @return str-slice($string, $start, $end);\n}\n\n// https://github.com/HugoGiraudel/SassyStrings/blob/master/dist/_SassyStrings.scss\n/// Check whether `$string` stars with `$needle`.\n/// @param {String} $string - string to check\n/// @param {String} $needle - substring to check\n/// @return {Bool}\n\n@function str-starts-with($string, $needle) {\n @return str-slice($string, 1, str-length($needle))==$needle;\n}\n\n// https://hugogiraudel.com/2013/08/08/advanced-sass-list-functions/#removing-values-from-list\n@function remove($list, $value, $recursive: false) {\n $result: ();\n\n @for $i from 1 through length($list) {\n @if type-of(nth($list, $i))==list and $recursive {\n $result: append($result, remove(nth($list, $i), $value, $recursive));\n }\n\n @else if nth($list, $i) !=$value {\n $result: append($result, nth($list, $i));\n }\n }\n\n @return $result;\n}\n\n\n\n/// Var\n///\n/// Returns CSS Var stack with exposed theme Var and respective SCSS fallback\n///\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme\n/// @param {String} $category - Category name to be appended to variables within the map/system\n/// @param {Map} $map - SASS Map of variables\n/// @requires {String} $repo - Name of repo, which is \"pfe\"\n/// @use -\n///\n/// 1.look up a color: /elements/pfe-sass/variables/_maps.scss\n/// (FYI, maps references: /elements/pfe-sass/variables/_colors.scss)\n///\n/// 2. use like this:\n/// ```\n/// .my-element {\n/// padding: #{pfe-var( container-spacer )};\n/// font-size: #{pfe-var( font-size )};\n/// }\n/// ```\n@function pfe-var($cssvar, $category: '', $map: $pfe-vars) {\n @if $category !=\"\" {\n $category: \"#{$category}--\";\n }\n\n @return var(--#{$repo}-theme--#{$category}#{$cssvar}, #{map-get($map, $cssvar)});\n}\n\n\n\n/// Var Fallback\n///\n/// Returns the SCSS fallback value only\n///\n/// @param {String} $size - Variable name to be used and prepended with --pfe-theme\n/// @use -\n/// ```\n/// @media screen and (min-width: pfe-breakpoint(sm)) {\n/// --pfe-band--width: #{pfe-breakpoint(sm) - $box-padding * 2};\n/// }\n/// ```\n@function pfe-breakpoint($size, $max: false) {\n $bp: map-get($pfe-vars, grid-breakpoint--#{$size});\n @if $max {\n $bp: (pfe-strip-unit($bp) - 1) * 1px;\n }\n @return $bp;\n}\n\n/// Color\n///\n/// Returns CSS Var stack with exposed theme Var and respective SCSS fallback\n///\n/// @param {String} $cssvar - Variable name to be used and prepended with --pfe-theme\n/// @param {String} $category - Category name to be appended to variables within the map/system, default is \"color\"\n/// @param {Map} $map - SASS Map of variables\n/// @requires {String} $repo - Name of repo, which is \"pfe\"\n/// @use -\n///\n/// 1.look up a color: /elements/pfe-sass/variables/_maps.scss\n/// (FYI, maps references: /elements/pfe-sass/variables/_colors.scss)\n///\n/// 2. use like this:\n/// ```\n/// .my-element {\n/// color: #{pfe-color( surface--base--text )};\n/// background: #{pfe-color( surface--base )};\n/// }\n/// ```\n@function pfe-color($cssvar,\n$category: 'color',\n$map: $pfe-colors) {\n @if $category !=\"\" {\n $category: \"#{$category}--\";\n }\n\n @return var(--#{$repo}-theme--#{$category}#{$cssvar},\n #{map-get($map, $cssvar)});\n}\n\n/// Local\n///\n/// Returns CSS Var for the local component-scoped variable\n///\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/// @requires {String} $repo - Name of repo, which is \"pfe\"\n/// @requires {String} $LOCAL - Name of component, this is defined at the top of the sass file for the component\n/// @use -\n/// ```\n/// :host {\n/// padding-top: #{pfe-local(paddingTop`)};\n/// padding-bottom: #{pfe-local(paddingBottom)};\n/// }\n/// ```\n@function pfe-local($cssvar, $fallback: null, $region: null) {\n // If a region value exists, build the region string\n @if $region != null {\n $region: \"__#{$region}\";\n }\n // Start building the variable declaration\n $var-declaration: \"--#{$repo}-#{$LOCAL}#{$region}--#{to-string($cssvar, '--')}\";\n // If a fallback is defined, pass that in too\n @if $fallback != null {\n $var-declaration: \"#{$var-declaration}, #{$fallback}\";\n }\n // Return the variable declaration string\n @return var(#{$var-declaration});\n}\n\n/// Radio\n///\n/// Returns CSS Var for a broadcasted variable\n///\n/// @param {String} $cssvar - Variable identifiers which are postfixed and combined using '--'\n/// @requires {String} $repo - Name of repo, which is \"pfe\"\n/// @use -\n/// ```\n/// a:visited {\n/// color: #{pfe-radio( ui-link, visited )};\n/// }\n/// ```\n///\n/// @returns - var(--pfe-broadcasted--ui-link--visited);\n///\n@function pfe-radio($cssvar...) {\n @return var(--#{$repo}-broadcasted--#{to-string($cssvar, '--')});\n}"]} \ No newline at end of file diff --git a/elements/pfe-card/pfe-card.css.min.map b/elements/pfe-card/pfe-card.css.min.map new file mode 100644 index 0000000000..e69de29bb2 diff --git a/elements/pfe-card/pfe-card.js b/elements/pfe-card/pfe-card.js new file mode 100644 index 0000000000..e0a2b613de --- /dev/null +++ b/elements/pfe-card/pfe-card.js @@ -0,0 +1,180 @@ +import PFElement from '../pfelement/pfelement.js'; + +/* + * @license + * Copyright 2019 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. + * +*/ + +// -- Polyfill for supporting Element.closest +// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest +if (!Element.prototype.matches) { + Element.prototype.matches = + Element.prototype.msMatchesSelector || + Element.prototype.webkitMatchesSelector; +} + +if (!Element.prototype.closest) { + Element.prototype.closest = function(s) { + var el = this; + do { + if (el.matches(s)) return el; + el = el.parentElement || el.parentNode; + } while (el !== null && el.nodeType === 1); + return null; + }; +} + +// -- Polyfill for supporting 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; + } + }); +} + +class PfeCard extends PFElement { + + get html() { + return ` + +`; + } + static get tag() { + return "pfe-card"; + } + + get styleUrl() { + return "pfe-card.scss"; + } + + get templateUrl() { + return "pfe-card.html"; + } + + get backgroundColor() { + return this.getAttribute("color") || "base"; + } + + static get observedAttributes() { + return ["color"]; + } + + // Declare the type of this component + static get PfeType() { + return PFElement.PfeTypes.Container; + } + + constructor() { + super(PfeCard, { type: PfeCard.PfeType }); + } + + connectedCallback() { + super.connectedCallback(); + // Initialize the context setting for the children elements + if (this.backgroundColor) { + this._updateContext(this.backgroundColor); + } + } + + attributeChangedCallback(attr, oldValue, newValue) { + super.attributeChangedCallback(attr, oldValue, newValue); + if (attr === "color") { + this._colorChanged(attr, oldValue, newValue); + } + } + + // Update the color attribute and contexts + _colorChanged(attr, oldValue, newValue) { + // If the new value has a dark background, update children elements + this._updateContext(newValue); + } + + // Set the children's context if parent background is dark + _updateContext(context) { + if (["darkest", "dark", "complement", "accent"].includes(context)) { + ["pfe-cta"].forEach(elementName => { + const els = [...this.querySelectorAll(`${elementName}`)]; + els.forEach(el => { + const myContainer = el.closest("[pfe-type=container]"); + if (myContainer === this || myContainer === null) { + el.setAttribute("on", "dark"); + } + }); + }); + } + } +} + +PFElement.create(PfeCard); + +export default PfeCard; +//# sourceMappingURL=pfe-card.js.map diff --git a/elements/pfe-card/pfe-card.js.map b/elements/pfe-card/pfe-card.js.map new file mode 100644 index 0000000000..6d1d321913 --- /dev/null +++ b/elements/pfe-card/pfe-card.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-card.js","sources":["pfe-card.js"],"sourcesContent":["/*\n * @license\n * Copyright 2019 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/pfelement.js\";\n\n// -- Polyfill for supporting Element.closest\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest\nif (!Element.prototype.matches) {\n Element.prototype.matches =\n Element.prototype.msMatchesSelector ||\n Element.prototype.webkitMatchesSelector;\n}\n\nif (!Element.prototype.closest) {\n Element.prototype.closest = function(s) {\n var el = this;\n do {\n if (el.matches(s)) return el;\n el = el.parentElement || el.parentNode;\n } while (el !== null && el.nodeType === 1);\n return null;\n };\n}\n\n// -- Polyfill for supporting Array.includes\n// https://tc39.github.io/ecma262/#sec-array.prototype.includes\nif (!Array.prototype.includes) {\n Object.defineProperty(Array.prototype, \"includes\", {\n value: function(valueToFind, fromIndex) {\n if (this == null) {\n throw new TypeError('\"this\" is null or not defined');\n }\n\n // 1. Let O be ? ToObject(this value).\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 len is 0, return false.\n if (len === 0) {\n return false;\n }\n\n // 4. Let n be ? ToInteger(fromIndex).\n // (If fromIndex is undefined, this step produces the value 0.)\n var n = fromIndex | 0;\n\n // 5. If n ≥ 0, then\n // a. Let k be n.\n // 6. Else n < 0,\n // a. Let k be len + n.\n // b. If k < 0, let k be 0.\n var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);\n\n function sameValueZero(x, y) {\n return (\n x === y ||\n (typeof x === \"number\" &&\n typeof y === \"number\" &&\n isNaN(x) &&\n isNaN(y))\n );\n }\n\n // 7. Repeat, while k < len\n while (k < len) {\n // a. Let elementK be the result of ? Get(O, ! ToString(k)).\n // b. If SameValueZero(valueToFind, elementK) is true, return true.\n if (sameValueZero(o[k], valueToFind)) {\n return true;\n }\n // c. Increase k by 1.\n k++;\n }\n\n // 8. Return false\n return false;\n }\n });\n}\n\nclass PfeCard extends PFElement {\n\n get html() {\n return `\n\n`;\n }\n static get tag() {\n return \"pfe-card\";\n }\n\n get styleUrl() {\n return \"pfe-card.scss\";\n }\n\n get templateUrl() {\n return \"pfe-card.html\";\n }\n\n get backgroundColor() {\n return this.getAttribute(\"color\") || \"base\";\n }\n\n static get observedAttributes() {\n return [\"color\"];\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 connectedCallback() {\n super.connectedCallback();\n // Initialize the context setting for the children elements\n if (this.backgroundColor) {\n this._updateContext(this.backgroundColor);\n }\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n super.attributeChangedCallback(attr, oldValue, newValue);\n if (attr === \"color\") {\n this._colorChanged(attr, oldValue, newValue);\n }\n }\n\n // Update the color attribute and contexts\n _colorChanged(attr, oldValue, newValue) {\n // If the new value has a dark background, update children elements\n this._updateContext(newValue);\n }\n\n // Set the children's context if parent background is dark\n _updateContext(context) {\n if ([\"darkest\", \"dark\", \"complement\", \"accent\"].includes(context)) {\n [\"pfe-cta\"].forEach(elementName => {\n const els = [...this.querySelectorAll(`${elementName}`)];\n els.forEach(el => {\n const myContainer = el.closest(\"[pfe-type=container]\");\n if (myContainer === this || myContainer === null) {\n el.setAttribute(\"on\", \"dark\");\n }\n });\n });\n }\n }\n}\n\nPFElement.create(PfeCard);\n\nexport default PfeCard;\n"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-card/pfe-card.min.css b/elements/pfe-card/pfe-card.min.css new file mode 100644 index 0000000000..456584d45c --- /dev/null +++ b/elements/pfe-card/pfe-card.min.css @@ -0,0 +1 @@ +:host{--pfe-card--padding:calc(var(--pfe-theme--container-spacer, 1rem) * 2);--pfe-card_header--size:var(--pfe-theme--font-size--heading--gamma, 21px);--pfe-card--bg:var(--pfe-theme--color--surface--base, #dfdfdf);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--base--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--base--link, #00538c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--base--link--visited, #7551a6);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--base--link--hover, #00305b);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--base--link--focus, #00305b);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;align-self:stretch;padding:var(--pfe-card--padding);border:1px solid transparent;border:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) transparent;border-radius:0;border-radius:var(--pfe-theme--surface--border-radius,0);background:var(--pfe-card--bg);color:var(--pfe-broadcasted--color--text)}a{color:var(--pfe-broadcasted--color--ui-link)}a:visited{color:var(--pfe-broadcasted--color--ui-link--visited)}a:hover{color:var(--pfe-broadcasted--color--ui-link--hover)}a:focus{color:var(--pfe-broadcasted--color--ui-link--focus)}:host([color=dark]){--pfe-card--bg:var(--pfe-theme--color--surface--darker, #464646);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darker--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darker--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darker--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darker--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darker--link--focus, #cce6ff)}:host([color=darkest]){--pfe-card--bg:var(--pfe-theme--color--surface--darkest, #131313);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darkest--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darkest--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darkest--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darkest--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darkest--link--focus, #cce6ff)}:host([color=light]){--pfe-card--bg:var(--pfe-theme--color--surface--lighter, #ececec);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lighter--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lighter--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lighter--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lighter--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lighter--link--focus, #003366)}:host([color=lightest]){--pfe-card--bg:var(--pfe-theme--color--surface--lightest, #fff);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lightest--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lightest--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lightest--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lightest--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lightest--link--focus, #003366)}:host([color=complement]){--pfe-card--bg:var(--pfe-theme--color--surface--complement, #0477a4);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--complement--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--complement--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--complement--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--complement--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--complement--link--focus, #cce6ff)}:host([color=accent]){--pfe-card--bg:var(--pfe-theme--color--surface--accent, #fe460d);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--accent--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--accent--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--accent--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--accent--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--accent--link--focus, #cce6ff)}:host([size=small]){--pfe-card--padding:var(--pfe-theme--container-spacer, 1rem)}.pfe-card__body,.pfe-card__footer,.pfe-card__header{display:block;margin:0}.pfe-card__header::slotted(h1:first-child),.pfe-card__header::slotted(h2:first-child),.pfe-card__header::slotted(h3:first-child),.pfe-card__header::slotted(h4:first-child),.pfe-card__header::slotted(h5:first-child),.pfe-card__header::slotted(h6:first-child){margin-top:0!important;font-size:var(--pfe-card_header--size)}.pfe-card__body::slotted(:nth-child(2)){margin-top:0!important}.pfe-card__footer{margin-top:auto;justify-self:flex-end} \ No newline at end of file diff --git a/elements/pfe-card/pfe-card.min.js b/elements/pfe-card/pfe-card.min.js new file mode 100644 index 0000000000..9fc3338d17 --- /dev/null +++ b/elements/pfe-card/pfe-card.min.js @@ -0,0 +1,26 @@ +import e from"../pfelement/pfelement.min.js"; +/* + * @license + * Copyright 2019 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. + * +*/ +Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Element.prototype.closest||(Element.prototype.closest=function(e){var r=this;do{if(r.matches(e))return r;r=r.parentElement||r.parentNode}while(null!==r&&1===r.nodeType);return null}),Array.prototype.includes||Object.defineProperty(Array.prototype,"includes",{value:function(e,r){if(null==this)throw new TypeError('"this" is null or not defined');var o=Object(this),t=o.length>>>0;if(0===t)return!1;var c,a,l=0|r,f=Math.max(l>=0?l:t-Math.abs(l),0);for(;f:host{--pfe-card--padding:calc(var(--pfe-theme--container-spacer, 1rem) * 2);--pfe-card_header--size:var(--pfe-theme--font-size--heading--gamma, 21px);--pfe-card--bg:var(--pfe-theme--color--surface--base, #dfdfdf);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--base--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--base--link, #00538c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--base--link--visited, #7551a6);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--base--link--hover, #00305b);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--base--link--focus, #00305b);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;align-self:stretch;padding:var(--pfe-card--padding);border:1px solid transparent;border:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) transparent;border-radius:0;border-radius:var(--pfe-theme--surface--border-radius,0);background:var(--pfe-card--bg);color:var(--pfe-broadcasted--color--text)}a{color:var(--pfe-broadcasted--color--ui-link)}a:visited{color:var(--pfe-broadcasted--color--ui-link--visited)}a:hover{color:var(--pfe-broadcasted--color--ui-link--hover)}a:focus{color:var(--pfe-broadcasted--color--ui-link--focus)}:host([color=dark]){--pfe-card--bg:var(--pfe-theme--color--surface--darker, #464646);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darker--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darker--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darker--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darker--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darker--link--focus, #cce6ff)}:host([color=darkest]){--pfe-card--bg:var(--pfe-theme--color--surface--darkest, #131313);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darkest--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darkest--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darkest--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darkest--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darkest--link--focus, #cce6ff)}:host([color=light]){--pfe-card--bg:var(--pfe-theme--color--surface--lighter, #ececec);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lighter--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lighter--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lighter--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lighter--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lighter--link--focus, #003366)}:host([color=lightest]){--pfe-card--bg:var(--pfe-theme--color--surface--lightest, #fff);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lightest--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lightest--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lightest--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lightest--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lightest--link--focus, #003366)}:host([color=complement]){--pfe-card--bg:var(--pfe-theme--color--surface--complement, #0477a4);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--complement--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--complement--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--complement--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--complement--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--complement--link--focus, #cce6ff)}:host([color=accent]){--pfe-card--bg:var(--pfe-theme--color--surface--accent, #fe460d);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--accent--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--accent--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--accent--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--accent--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--accent--link--focus, #cce6ff)}:host([size=small]){--pfe-card--padding:var(--pfe-theme--container-spacer, 1rem)}.pfe-card__body,.pfe-card__footer,.pfe-card__header{display:block;margin:0}.pfe-card__header::slotted(h1:first-child),.pfe-card__header::slotted(h2:first-child),.pfe-card__header::slotted(h3:first-child),.pfe-card__header::slotted(h4:first-child),.pfe-card__header::slotted(h5:first-child),.pfe-card__header::slotted(h6:first-child){margin-top:0!important;font-size:var(--pfe-card_header--size)}.pfe-card__body::slotted(:nth-child(2)){margin-top:0!important}.pfe-card__footer{margin-top:auto;justify-self:flex-end}\n\n'}static get tag(){return"pfe-card"}get styleUrl(){return"pfe-card.scss"}get templateUrl(){return"pfe-card.html"}get backgroundColor(){return this.getAttribute("color")||"base"}static get observedAttributes(){return["color"]}static get PfeType(){return e.PfeTypes.Container}constructor(){super(r,{type:r.PfeType})}connectedCallback(){super.connectedCallback(),this.backgroundColor&&this._updateContext(this.backgroundColor)}attributeChangedCallback(e,r,o){super.attributeChangedCallback(e,r,o),"color"===e&&this._colorChanged(e,r,o)}_colorChanged(e,r,o){this._updateContext(o)}_updateContext(e){["darkest","dark","complement","accent"].includes(e)&&["pfe-cta"].forEach(e=>{[...this.querySelectorAll(`${e}`)].forEach(e=>{const r=e.closest("[pfe-type=container]");r!==this&&null!==r||e.setAttribute("on","dark")})})}}e.create(r);export default r; +//# sourceMappingURL=pfe-card.min.js.map diff --git a/elements/pfe-card/pfe-card.min.js.map b/elements/pfe-card/pfe-card.min.js.map new file mode 100644 index 0000000000..9df7674614 --- /dev/null +++ b/elements/pfe-card/pfe-card.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-card.min.js","sources":["pfe-card.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 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// -- Polyfill for supporting Element.closest\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest\nif (!Element.prototype.matches) {\n Element.prototype.matches =\n Element.prototype.msMatchesSelector ||\n Element.prototype.webkitMatchesSelector;\n}\n\nif (!Element.prototype.closest) {\n Element.prototype.closest = function(s) {\n var el = this;\n do {\n if (el.matches(s)) return el;\n el = el.parentElement || el.parentNode;\n } while (el !== null && el.nodeType === 1);\n return null;\n };\n}\n\n// -- Polyfill for supporting Array.includes\n// https://tc39.github.io/ecma262/#sec-array.prototype.includes\nif (!Array.prototype.includes) {\n Object.defineProperty(Array.prototype, \"includes\", {\n value: function(valueToFind, fromIndex) {\n if (this == null) {\n throw new TypeError('\"this\" is null or not defined');\n }\n\n // 1. Let O be ? ToObject(this value).\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 len is 0, return false.\n if (len === 0) {\n return false;\n }\n\n // 4. Let n be ? ToInteger(fromIndex).\n // (If fromIndex is undefined, this step produces the value 0.)\n var n = fromIndex | 0;\n\n // 5. If n ≥ 0, then\n // a. Let k be n.\n // 6. Else n < 0,\n // a. Let k be len + n.\n // b. If k < 0, let k be 0.\n var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);\n\n function sameValueZero(x, y) {\n return (\n x === y ||\n (typeof x === \"number\" &&\n typeof y === \"number\" &&\n isNaN(x) &&\n isNaN(y))\n );\n }\n\n // 7. Repeat, while k < len\n while (k < len) {\n // a. Let elementK be the result of ? Get(O, ! ToString(k)).\n // b. If SameValueZero(valueToFind, elementK) is true, return true.\n if (sameValueZero(o[k], valueToFind)) {\n return true;\n }\n // c. Increase k by 1.\n k++;\n }\n\n // 8. Return false\n return false;\n }\n });\n}\n\nclass PfeCard extends PFElement {\n\n get html() {\n return `\n\n`;\n }\n static get tag() {\n return \"pfe-card\";\n }\n\n get styleUrl() {\n return \"pfe-card.scss\";\n }\n\n get templateUrl() {\n return \"pfe-card.html\";\n }\n\n get backgroundColor() {\n return this.getAttribute(\"color\") || \"base\";\n }\n\n static get observedAttributes() {\n return [\"color\"];\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 connectedCallback() {\n super.connectedCallback();\n // Initialize the context setting for the children elements\n if (this.backgroundColor) {\n this._updateContext(this.backgroundColor);\n }\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n super.attributeChangedCallback(attr, oldValue, newValue);\n if (attr === \"color\") {\n this._colorChanged(attr, oldValue, newValue);\n }\n }\n\n // Update the color attribute and contexts\n _colorChanged(attr, oldValue, newValue) {\n // If the new value has a dark background, update children elements\n this._updateContext(newValue);\n }\n\n // Set the children's context if parent background is dark\n _updateContext(context) {\n if ([\"darkest\", \"dark\", \"complement\", \"accent\"].includes(context)) {\n [\"pfe-cta\"].forEach(elementName => {\n const els = [...this.querySelectorAll(`${elementName}`)];\n els.forEach(el => {\n const myContainer = el.closest(\"[pfe-type=container]\");\n if (myContainer === this || myContainer === null) {\n el.setAttribute(\"on\", \"dark\");\n }\n });\n });\n }\n }\n}\n\nPFElement.create(PfeCard);\n\nexport default PfeCard;\n//# sourceMappingURL=pfe-card.js.map\n"],"names":["Element","prototype","matches","msMatchesSelector","webkitMatchesSelector","closest","s","el","this","parentElement","parentNode","nodeType","Array","includes","Object","defineProperty","value","valueToFind","fromIndex","TypeError","o","len","length","x","y","n","k","Math","max","abs","isNaN","PfeCard","PFElement","html","tag","styleUrl","templateUrl","backgroundColor","getAttribute","observedAttributes","PfeType","PfeTypes","Container","[object Object]","super","type","connectedCallback","_updateContext","attr","oldValue","newValue","attributeChangedCallback","_colorChanged","context","forEach","elementName","querySelectorAll","myContainer","setAttribute","create"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA4BKA,QAAQC,UAAUC,UACrBF,QAAQC,UAAUC,QAChBF,QAAQC,UAAUE,mBAClBH,QAAQC,UAAUG,uBAGjBJ,QAAQC,UAAUI,UACrBL,QAAQC,UAAUI,QAAU,SAASC,GACnC,IAAIC,EAAKC,KACT,EAAG,CACD,GAAID,EAAGL,QAAQI,GAAI,OAAOC,EAC1BA,EAAKA,EAAGE,eAAiBF,EAAGG,iBACd,OAAPH,GAA+B,IAAhBA,EAAGI,UAC3B,OAAO,OAMNC,MAAMX,UAAUY,UACnBC,OAAOC,eAAeH,MAAMX,UAAW,WAAY,CACjDe,MAAO,SAASC,EAAaC,GAC3B,GAAY,MAARV,KACF,MAAM,IAAIW,UAAU,iCAItB,IAAIC,EAAIN,OAAON,MAGXa,EAAMD,EAAEE,SAAW,EAGvB,GAAY,IAARD,EACF,OAAO,EAKT,IASuBE,EAAGC,EATtBC,EAAgB,EAAZP,EAOJQ,EAAIC,KAAKC,IAAIH,GAAK,EAAIA,EAAIJ,EAAMM,KAAKE,IAAIJ,GAAI,GAajD,KAAOC,EAAIL,GAAK,CAGd,IAdqBE,EAcHH,EAAEM,OAdIF,EAcAP,IAXR,iBAANM,GACO,iBAANC,GACPM,MAAMP,IACNO,MAAMN,GASR,OAAO,EAGTE,IAIF,OAAO,KAKb,MAAMK,UAAgBC,EAEpBC,WACE,MAAO,gsLAITC,iBACE,MAAO,WAGTC,eACE,MAAO,gBAGTC,kBACE,MAAO,gBAGTC,sBACE,OAAO7B,KAAK8B,aAAa,UAAY,OAGvCC,gCACE,MAAO,CAAC,SAIVC,qBACE,OAAOR,EAAUS,SAASC,UAG5BC,cACEC,MAAMb,EAAS,CAAEc,KAAMd,EAAQS,UAGjCG,oBACEC,MAAME,oBAEFtC,KAAK6B,iBACP7B,KAAKuC,eAAevC,KAAK6B,iBAI7BM,yBAAyBK,EAAMC,EAAUC,GACvCN,MAAMO,yBAAyBH,EAAMC,EAAUC,GAClC,UAATF,GACFxC,KAAK4C,cAAcJ,EAAMC,EAAUC,GAKvCP,cAAcK,EAAMC,EAAUC,GAE5B1C,KAAKuC,eAAeG,GAItBP,eAAeU,GACT,CAAC,UAAW,OAAQ,aAAc,UAAUxC,SAASwC,IACvD,CAAC,WAAWC,QAAQC,IACN,IAAI/C,KAAKgD,oBAAoBD,MACrCD,QAAQ/C,IACV,MAAMkD,EAAclD,EAAGF,QAAQ,wBAC3BoD,IAAgBjD,MAAwB,OAAhBiD,GAC1BlD,EAAGmD,aAAa,KAAM,aAQlC1B,EAAU2B,OAAO5B"} \ No newline at end of file diff --git a/elements/pfe-card/pfe-card.umd.js b/elements/pfe-card/pfe-card.umd.js new file mode 100644 index 0000000000..ce657f1c21 --- /dev/null +++ b/elements/pfe-card/pfe-card.umd.js @@ -0,0 +1,287 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('../pfelement/pfelement.umd')) : + typeof define === 'function' && define.amd ? define(['../pfelement/pfelement.umd'], factory) : + (global.PfeCard = factory(global.PFElement)); +}(this, (function (PFElement) { 'use strict'; + + PFElement = PFElement && PFElement.hasOwnProperty('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; + }; + + 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); + } + }; + + /* + * @license + * Copyright 2019 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. + * + */ + + // -- Polyfill for supporting Element.closest + // https://developer.mozilla.org/en-US/docs/Web/API/Element/closest + if (!Element.prototype.matches) { + Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; + } + + if (!Element.prototype.closest) { + Element.prototype.closest = function (s) { + var el = this; + do { + if (el.matches(s)) return el; + el = el.parentElement || el.parentNode; + } while (el !== null && el.nodeType === 1); + return null; + }; + } + + // -- Polyfill for supporting Array.includes + // https://tc39.github.io/ecma262/#sec-array.prototype.includes + if (!Array.prototype.includes) { + Object.defineProperty(Array.prototype, "includes", { + value: function value(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; + } + }); + } + + var PfeCard = function (_PFElement) { + inherits(PfeCard, _PFElement); + createClass(PfeCard, [{ + key: 'html', + get: function get$$1() { + return '\n\n'; + } + }, { + key: 'styleUrl', + get: function get$$1() { + return "pfe-card.scss"; + } + }, { + key: 'templateUrl', + get: function get$$1() { + return "pfe-card.html"; + } + }, { + key: 'backgroundColor', + get: function get$$1() { + return this.getAttribute("color") || "base"; + } + }], [{ + key: 'tag', + get: function get$$1() { + return "pfe-card"; + } + }, { + key: 'observedAttributes', + get: function get$$1() { + return ["color"]; + } + + // Declare the type of this component + + }, { + key: 'PfeType', + get: function get$$1() { + return PFElement.PfeTypes.Container; + } + }]); + + function PfeCard() { + classCallCheck(this, PfeCard); + return possibleConstructorReturn(this, (PfeCard.__proto__ || Object.getPrototypeOf(PfeCard)).call(this, PfeCard, { type: PfeCard.PfeType })); + } + + createClass(PfeCard, [{ + key: 'connectedCallback', + value: function connectedCallback() { + get(PfeCard.prototype.__proto__ || Object.getPrototypeOf(PfeCard.prototype), 'connectedCallback', this).call(this); + // Initialize the context setting for the children elements + if (this.backgroundColor) { + this._updateContext(this.backgroundColor); + } + } + }, { + key: 'attributeChangedCallback', + value: function attributeChangedCallback(attr, oldValue, newValue) { + get(PfeCard.prototype.__proto__ || Object.getPrototypeOf(PfeCard.prototype), 'attributeChangedCallback', this).call(this, attr, oldValue, newValue); + if (attr === "color") { + this._colorChanged(attr, oldValue, newValue); + } + } + + // Update the color attribute and contexts + + }, { + key: '_colorChanged', + value: function _colorChanged(attr, oldValue, newValue) { + // If the new value has a dark background, update children elements + this._updateContext(newValue); + } + + // Set the children's context if parent background is dark + + }, { + key: '_updateContext', + value: function _updateContext(context) { + var _this2 = this; + + if (["darkest", "dark", "complement", "accent"].includes(context)) { + ["pfe-cta"].forEach(function (elementName) { + var els = [].concat(toConsumableArray(_this2.querySelectorAll('' + elementName))); + els.forEach(function (el) { + var myContainer = el.closest("[pfe-type=container]"); + if (myContainer === _this2 || myContainer === null) { + el.setAttribute("on", "dark"); + } + }); + }); + } + } + }]); + return PfeCard; + }(PFElement); + + PFElement.create(PfeCard); + + return PfeCard; + +}))); +//# sourceMappingURL=pfe-card.umd.js.map diff --git a/elements/pfe-card/pfe-card.umd.js.map b/elements/pfe-card/pfe-card.umd.js.map new file mode 100644 index 0000000000..6583bb5b06 --- /dev/null +++ b/elements/pfe-card/pfe-card.umd.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-card.umd.js","sources":["pfe-card.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 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// -- Polyfill for supporting Element.closest\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest\nif (!Element.prototype.matches) {\n Element.prototype.matches =\n Element.prototype.msMatchesSelector ||\n Element.prototype.webkitMatchesSelector;\n}\n\nif (!Element.prototype.closest) {\n Element.prototype.closest = function(s) {\n var el = this;\n do {\n if (el.matches(s)) return el;\n el = el.parentElement || el.parentNode;\n } while (el !== null && el.nodeType === 1);\n return null;\n };\n}\n\n// -- Polyfill for supporting Array.includes\n// https://tc39.github.io/ecma262/#sec-array.prototype.includes\nif (!Array.prototype.includes) {\n Object.defineProperty(Array.prototype, \"includes\", {\n value: function(valueToFind, fromIndex) {\n if (this == null) {\n throw new TypeError('\"this\" is null or not defined');\n }\n\n // 1. Let O be ? ToObject(this value).\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 len is 0, return false.\n if (len === 0) {\n return false;\n }\n\n // 4. Let n be ? ToInteger(fromIndex).\n // (If fromIndex is undefined, this step produces the value 0.)\n var n = fromIndex | 0;\n\n // 5. If n ≥ 0, then\n // a. Let k be n.\n // 6. Else n < 0,\n // a. Let k be len + n.\n // b. If k < 0, let k be 0.\n var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);\n\n function sameValueZero(x, y) {\n return (\n x === y ||\n (typeof x === \"number\" &&\n typeof y === \"number\" &&\n isNaN(x) &&\n isNaN(y))\n );\n }\n\n // 7. Repeat, while k < len\n while (k < len) {\n // a. Let elementK be the result of ? Get(O, ! ToString(k)).\n // b. If SameValueZero(valueToFind, elementK) is true, return true.\n if (sameValueZero(o[k], valueToFind)) {\n return true;\n }\n // c. Increase k by 1.\n k++;\n }\n\n // 8. Return false\n return false;\n }\n });\n}\n\nclass PfeCard extends PFElement {\n\n get html() {\n return `\n\n`;\n }\n static get tag() {\n return \"pfe-card\";\n }\n\n get styleUrl() {\n return \"pfe-card.scss\";\n }\n\n get templateUrl() {\n return \"pfe-card.html\";\n }\n\n get backgroundColor() {\n return this.getAttribute(\"color\") || \"base\";\n }\n\n static get observedAttributes() {\n return [\"color\"];\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 connectedCallback() {\n super.connectedCallback();\n // Initialize the context setting for the children elements\n if (this.backgroundColor) {\n this._updateContext(this.backgroundColor);\n }\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n super.attributeChangedCallback(attr, oldValue, newValue);\n if (attr === \"color\") {\n this._colorChanged(attr, oldValue, newValue);\n }\n }\n\n // Update the color attribute and contexts\n _colorChanged(attr, oldValue, newValue) {\n // If the new value has a dark background, update children elements\n this._updateContext(newValue);\n }\n\n // Set the children's context if parent background is dark\n _updateContext(context) {\n if ([\"darkest\", \"dark\", \"complement\", \"accent\"].includes(context)) {\n [\"pfe-cta\"].forEach(elementName => {\n const els = [...this.querySelectorAll(`${elementName}`)];\n els.forEach(el => {\n const myContainer = el.closest(\"[pfe-type=container]\");\n if (myContainer === this || myContainer === null) {\n el.setAttribute(\"on\", \"dark\");\n }\n });\n });\n }\n }\n}\n\nPFElement.create(PfeCard);\n\nexport default PfeCard;\n//# sourceMappingURL=pfe-card.js.map\n"],"names":["Element","prototype","matches","msMatchesSelector","webkitMatchesSelector","closest","s","el","parentElement","parentNode","nodeType","Array","includes","Object","defineProperty","value","valueToFind","fromIndex","TypeError","o","len","length","n","k","Math","max","abs","sameValueZero","x","y","isNaN","PfeCard","getAttribute","PFElement","PfeTypes","Container","type","PfeType","backgroundColor","_updateContext","attr","oldValue","newValue","_colorChanged","context","forEach","els","querySelectorAll","elementName","myContainer","setAttribute","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-card/pfe-card.umd.min.js b/elements/pfe-card/pfe-card.umd.min.js new file mode 100644 index 0000000000..3544e4e6b6 --- /dev/null +++ b/elements/pfe-card/pfe-card.umd.min.js @@ -0,0 +1,2 @@ +!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r(require("../pfelement/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min"],r):e.PfeCard=r(e.PFElement)}(this,function(r){"use strict";r=r&&r.hasOwnProperty("default")?r.default:r;var t=function(){function o(e,r){for(var t=0;t>>0;if(0===o)return!1;var c,a,l=0|r,f=Math.max(0<=l?l:o-Math.abs(l),0);for(;f:host{--pfe-card--padding:calc(var(--pfe-theme--container-spacer, 1rem) * 2);--pfe-card_header--size:var(--pfe-theme--font-size--heading--gamma, 21px);--pfe-card--bg:var(--pfe-theme--color--surface--base, #dfdfdf);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--base--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--base--link, #00538c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--base--link--visited, #7551a6);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--base--link--hover, #00305b);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--base--link--focus, #00305b);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;align-self:stretch;padding:var(--pfe-card--padding);border:1px solid transparent;border:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) transparent;border-radius:0;border-radius:var(--pfe-theme--surface--border-radius,0);background:var(--pfe-card--bg);color:var(--pfe-broadcasted--color--text)}a{color:var(--pfe-broadcasted--color--ui-link)}a:visited{color:var(--pfe-broadcasted--color--ui-link--visited)}a:hover{color:var(--pfe-broadcasted--color--ui-link--hover)}a:focus{color:var(--pfe-broadcasted--color--ui-link--focus)}:host([color=dark]){--pfe-card--bg:var(--pfe-theme--color--surface--darker, #464646);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darker--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darker--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darker--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darker--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darker--link--focus, #cce6ff)}:host([color=darkest]){--pfe-card--bg:var(--pfe-theme--color--surface--darkest, #131313);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darkest--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--darkest--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--darkest--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--darkest--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--darkest--link--focus, #cce6ff)}:host([color=light]){--pfe-card--bg:var(--pfe-theme--color--surface--lighter, #ececec);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lighter--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lighter--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lighter--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lighter--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lighter--link--focus, #003366)}:host([color=lightest]){--pfe-card--bg:var(--pfe-theme--color--surface--lightest, #fff);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lightest--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--lightest--link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--lightest--link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--lightest--link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--lightest--link--focus, #003366)}:host([color=complement]){--pfe-card--bg:var(--pfe-theme--color--surface--complement, #0477a4);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--complement--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--complement--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--complement--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--complement--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--complement--link--focus, #cce6ff)}:host([color=accent]){--pfe-card--bg:var(--pfe-theme--color--surface--accent, #fe460d);--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--accent--text, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--surface--accent--link, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--surface--accent--link--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--surface--accent--link--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--surface--accent--link--focus, #cce6ff)}:host([size=small]){--pfe-card--padding:var(--pfe-theme--container-spacer, 1rem)}.pfe-card__body,.pfe-card__footer,.pfe-card__header{display:block;margin:0}.pfe-card__header::slotted(h1:first-child),.pfe-card__header::slotted(h2:first-child),.pfe-card__header::slotted(h3:first-child),.pfe-card__header::slotted(h4:first-child),.pfe-card__header::slotted(h5:first-child),.pfe-card__header::slotted(h6:first-child){margin-top:0!important;font-size:var(--pfe-card_header--size)}.pfe-card__body::slotted(:nth-child(2)){margin-top:0!important}.pfe-card__footer{margin-top:auto;justify-self:flex-end}\n\n'}},{key:"styleUrl",get:function(){return"pfe-card.scss"}},{key:"templateUrl",get:function(){return"pfe-card.html"}},{key:"backgroundColor",get:function(){return this.getAttribute("color")||"base"}}],[{key:"tag",get:function(){return"pfe-card"}},{key:"observedAttributes",get:function(){return["color"]}},{key:"PfeType",get:function(){return r.PfeTypes.Container}}]),t(o,[{key:"connectedCallback",value:function(){c(o.prototype.__proto__||Object.getPrototypeOf(o.prototype),"connectedCallback",this).call(this),this.backgroundColor&&this._updateContext(this.backgroundColor)}},{key:"attributeChangedCallback",value:function(e,r,t){c(o.prototype.__proto__||Object.getPrototypeOf(o.prototype),"attributeChangedCallback",this).call(this,e,r,t),"color"===e&&this._colorChanged(e,r,t)}},{key:"_colorChanged",value:function(e,r,t){this._updateContext(t)}},{key:"_updateContext",value:function(e){var t=this;["darkest","dark","complement","accent"].includes(e)&&["pfe-cta"].forEach(function(e){[].concat(function(e){if(Array.isArray(e)){for(var r=0,t=Array(e.length);r>> 0;\n\n // 3. If len is 0, return false.\n if (len === 0) {\n return false;\n }\n\n // 4. Let n be ? ToInteger(fromIndex).\n // (If fromIndex is undefined, this step produces the value 0.)\n var n = fromIndex | 0;\n\n // 5. If n ≥ 0, then\n // a. Let k be n.\n // 6. Else n < 0,\n // a. Let k be len + n.\n // b. If k < 0, let k be 0.\n var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);\n\n function sameValueZero(x, y) {\n return (\n x === y ||\n (typeof x === \"number\" &&\n typeof y === \"number\" &&\n isNaN(x) &&\n isNaN(y))\n );\n }\n\n // 7. Repeat, while k < len\n while (k < len) {\n // a. Let elementK be the result of ? Get(O, ! ToString(k)).\n // b. If SameValueZero(valueToFind, elementK) is true, return true.\n if (sameValueZero(o[k], valueToFind)) {\n return true;\n }\n // c. Increase k by 1.\n k++;\n }\n\n // 8. Return false\n return false;\n }\n });\n}\n\nclass PfeCard extends PFElement {\n\n get html() {\n return `\n\n`;\n }\n static get tag() {\n return \"pfe-card\";\n }\n\n get styleUrl() {\n return \"pfe-card.scss\";\n }\n\n get templateUrl() {\n return \"pfe-card.html\";\n }\n\n get backgroundColor() {\n return this.getAttribute(\"color\") || \"base\";\n }\n\n static get observedAttributes() {\n return [\"color\"];\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 connectedCallback() {\n super.connectedCallback();\n // Initialize the context setting for the children elements\n if (this.backgroundColor) {\n this._updateContext(this.backgroundColor);\n }\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n super.attributeChangedCallback(attr, oldValue, newValue);\n if (attr === \"color\") {\n this._colorChanged(attr, oldValue, newValue);\n }\n }\n\n // Update the color attribute and contexts\n _colorChanged(attr, oldValue, newValue) {\n // If the new value has a dark background, update children elements\n this._updateContext(newValue);\n }\n\n // Set the children's context if parent background is dark\n _updateContext(context) {\n if ([\"darkest\", \"dark\", \"complement\", \"accent\"].includes(context)) {\n [\"pfe-cta\"].forEach(elementName => {\n const els = [...this.querySelectorAll(`${elementName}`)];\n els.forEach(el => {\n const myContainer = el.closest(\"[pfe-type=container]\");\n if (myContainer === this || myContainer === null) {\n el.setAttribute(\"on\", \"dark\");\n }\n });\n });\n }\n }\n}\n\nPFElement.create(PfeCard);\n\nexport default PfeCard;\n//# sourceMappingURL=pfe-card.js.map\n"],"names":["Element","prototype","matches","msMatchesSelector","webkitMatchesSelector","closest","s","el","this","parentElement","parentNode","nodeType","Array","includes","defineProperty","valueToFind","fromIndex","TypeError","o","Object","len","length","x","y","n","k","Math","max","abs","isNaN","PfeCard","type","PfeType","PFElement","getAttribute","PfeTypes","Container","backgroundColor","_updateContext","attr","oldValue","newValue","_colorChanged","context","forEach","_this2","querySelectorAll","elementName","myContainer","setAttribute","create"],"mappings":"6yBA4BKA,QAAQC,UAAUC,kBACbD,UAAUC,QAChBF,QAAQC,UAAUE,mBAClBH,QAAQC,UAAUG,uBAGjBJ,QAAQC,UAAUI,kBACbJ,UAAUI,QAAU,SAASC,OAC/BC,EAAKC,OACN,IACGD,EAAGL,QAAQI,GAAI,OAAOC,IACrBA,EAAGE,eAAiBF,EAAGG,iBACd,OAAPH,GAA+B,IAAhBA,EAAGI,iBACpB,OAMNC,MAAMX,UAAUY,iBACZC,eAAeF,MAAMX,UAAW,WAAY,OAC1C,SAASc,EAAaC,MACf,MAARR,WACI,IAAIS,UAAU,qCAIlBC,EAAIC,OAAOX,MAGXY,EAAMF,EAAEG,SAAW,KAGX,IAARD,SACK,MAccE,EAAGC,EATtBC,EAAgB,EAAZR,EAOJS,EAAIC,KAAKC,IAAS,GAALH,EAASA,EAAIJ,EAAMM,KAAKE,IAAIJ,GAAI,QAa1CC,EAAIL,GAAK,KAXOE,EAcHJ,EAAEO,OAdIF,EAcAR,IAXR,iBAANO,GACO,iBAANC,GACPM,MAAMP,IACNO,MAAMN,UASD,aAOJ,SAKPO,gWAiCIA,EAAS,CAAEC,KAAMD,EAAQE,8UAjCbC,gxLAYX,0DAIA,+DAIAzB,KAAK0B,aAAa,UAAY,2CAZ9B,4DAgBA,CAAC,gDAKDD,EAAUE,SAASC,8JAUtB5B,KAAK6B,sBACFC,eAAe9B,KAAK6B,kEAIJE,EAAMC,EAAUC,0GACRF,EAAMC,EAAUC,GAClC,UAATF,QACGG,cAAcH,EAAMC,EAAUC,yCAKzBF,EAAMC,EAAUC,QAEvBH,eAAeG,0CAIPE,cACT,CAAC,UAAW,OAAQ,aAAc,UAAU9B,SAAS8B,KACtD,WAAWC,QAAQ,6IACFC,EAAKC,oBAAoBC,KACrCH,QAAQ,gBACJI,EAAczC,EAAGF,QAAQ,wBAC3B2C,IAAgBH,GAAwB,OAAhBG,KACvBC,aAAa,KAAM,4BAQlChB,EAAUiB,OAAOpB"} \ No newline at end of file diff --git a/elements/pfe-content-set/package.json b/elements/pfe-content-set/package.json index 748327febe..29e5990f33 100644 --- a/elements/pfe-content-set/package.json +++ b/elements/pfe-content-set/package.json @@ -4,7 +4,7 @@ "className": "PfeContentSet", "elementName": "pfe-content-set" }, - "version": "1.0.0-prerelease.11", + "version": "1.0.0-prerelease.13", "description": "This PatternFly Element dynamically hides and shows content; the style is determined by the available space.", "keywords": [ "web-components", @@ -12,7 +12,7 @@ ], "repository": { "type": "git", - "url" : "github:patternfly/patternfly-elements", + "url": "github:patternfly/patternfly-elements", "directory": "elements/pfe-content-set" }, "publishConfig": { @@ -39,9 +39,9 @@ ], "license": "MIT", "dependencies": { - "@patternfly/pfe-accordion": "^1.0.0-prerelease.11", - "@patternfly/pfe-tabs": "^1.0.0-prerelease.11", - "@patternfly/pfelement": "^1.0.0-prerelease.11" + "@patternfly/pfe-accordion": "^1.0.0-prerelease.13", + "@patternfly/pfe-tabs": "^1.0.0-prerelease.13", + "@patternfly/pfelement": "^1.0.0-prerelease.13" }, "generator-pfelement-version": "1.1.0" } diff --git a/elements/pfe-content-set/pfe-content-set.css b/elements/pfe-content-set/pfe-content-set.css new file mode 100644 index 0000000000..115881e065 --- /dev/null +++ b/elements/pfe-content-set/pfe-content-set.css @@ -0,0 +1,9 @@ +:host { + display: block; +} + +:host([hidden]) { + display: none; +} + +/*# sourceMappingURL=pfe-content-set.css.map */ diff --git a/elements/pfe-content-set/pfe-content-set.css.map b/elements/pfe-content-set/pfe-content-set.css.map new file mode 100644 index 0000000000..4d61d0cb79 --- /dev/null +++ b/elements/pfe-content-set/pfe-content-set.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["pfe-content-set.scss","pfe-content-set.css"],"names":[],"mappings":"AAAA;EACE,cAAc;ACChB;;ADEA;EACE,aAAa;ACCf","file":"pfe-content-set.css","sourcesContent":[":host {\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n",":host {\n display: block;\n}\n\n:host([hidden]) {\n display: none;\n}\n"]} \ No newline at end of file diff --git a/elements/pfe-content-set/pfe-content-set.css.min.map b/elements/pfe-content-set/pfe-content-set.css.min.map new file mode 100644 index 0000000000..e69de29bb2 diff --git a/elements/pfe-content-set/pfe-content-set.js b/elements/pfe-content-set/pfe-content-set.js new file mode 100644 index 0000000000..6c10f6eb92 --- /dev/null +++ b/elements/pfe-content-set/pfe-content-set.js @@ -0,0 +1,190 @@ +import PFElement from '../pfelement/pfelement.js'; +import '../pfe-accordion/pfe-accordion.js'; +import '../pfe-tabs/pfe-tabs.js'; + +/* + * @license + * Copyright 2019 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 PfeContentSet extends PFElement { + + get html() { + return ``; + } + static get tag() { + return "pfe-content-set"; + } + + get templateUrl() { + return "pfe-content-set.html"; + } + + get styleUrl() { + return "pfe-content-set.scss"; + } + + static get pfeType() { + return PFElement.pfeType.combo; + } + + get isTab() { + return this.parentNode + ? this.parentNode.offsetWidth > 768 + : window.outerWidth > 768; + } + + get orientation() { + return this.hasAttribute("vertical") ? "vertical" : "horizontal"; + } + + get settings() { + let settings = {}; + const variant = this.getAttribute("pfe-variant"); + const theme = this.getAttribute("on"); + + if (variant) { + settings.variant = variant; + } + + if (theme) { + settings.theme = theme; + } + + return settings; + } + + constructor() { + super(PfeContentSet, { delayRender: true }); + } + + connectedCallback() { + super.connectedCallback(); + + if (this.isTab) { + this._buildTabs(); + } else { + this._buildAccordion(); + } + + this.render(); + } + + _buildAccordion() { + // Use a document fragment for efficiency + const fragment = document.createDocumentFragment(); + // Create the accordion wrapper component + const accordion = document.createElement("pfe-accordion"); + + // Iterate over each element in the light DOM + [...this.children].forEach(child => { + // If one of them has the attribute indicating they belong in the header region + if (child.hasAttribute("pfe-content-set--header")) { + // Create a header component + const header = document.createElement("pfe-accordion-header"); + // Append the light DOM element to that component + header.appendChild(child); + // Append the component to the accordion parent + accordion.appendChild(header); + } + // If one of them has the attribute indicating they belong in the panel region + if (child.hasAttribute("pfe-content-set--panel")) { + // Create a panel component + const panel = document.createElement("pfe-accordion-panel"); + // Append the light DOM element to that component + panel.appendChild(child); + // Append the component to the accordion parent + accordion.appendChild(panel); + } + }); + + // Append the accordion to the document fragment + fragment.appendChild(accordion); + + // Pass the theme property down to the accordion component + if (this.settings.theme) { + accordion.setAttribute("on", this.settings.theme); + } + + // Append the fragment to the component + this.appendChild(fragment); + } + + _buildTabs() { + // Use a document fragment for efficiency + const fragment = document.createDocumentFragment(); + // Create the tabs wrapper component + const tabs = document.createElement("pfe-tabs"); + + // Iterate over each element in the light DOM + [...this.children].forEach(child => { + // If one of them has the attribute indicating they belong in the header region + if (child.hasAttribute("pfe-content-set--header")) { + // Create a tab component + const header = document.createElement("pfe-tab"); + // Set the attribute indicating its slot + header.setAttribute("slot", "tab"); + // Append the light DOM element to that component + header.appendChild(child); + // Append the component to the tabs parent + tabs.appendChild(header); + } + // If one of them has the attribute indicating they belong in the panel region + if (child.hasAttribute("pfe-content-set--panel")) { + // Create the panel component + const panel = document.createElement("pfe-tab-panel"); + // Set the attribute indicating its slot + panel.setAttribute("slot", "panel"); + // Append the light DOM element to that component + panel.appendChild(child); + // Append the component to the tabs parent + tabs.appendChild(panel); + } + }); + + // Append the tabs to the document fragment + fragment.appendChild(tabs); + + // If the orientation is set to vertical, add that attribute to the tabs + if (this.orientation === "vertical") { + tabs.setAttribute("vertical", true); + } + + // Pass the variant attribute down to the tabs component + if (this.settings.variant) { + tabs.setAttribute("pfe-variant", this.settings.variant); + } + + // Pass the theme property down to the accordion component + if (this.settings.theme) { + tabs.setAttribute("on", this.settings.theme); + } + + // Append the fragment to the component + this.appendChild(fragment); + } +} + +PFElement.create(PfeContentSet); + +export default PfeContentSet; +//# sourceMappingURL=pfe-content-set.js.map diff --git a/elements/pfe-content-set/pfe-content-set.js.map b/elements/pfe-content-set/pfe-content-set.js.map new file mode 100644 index 0000000000..d280641c52 --- /dev/null +++ b/elements/pfe-content-set/pfe-content-set.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-content-set.js","sources":["pfe-content-set.js"],"sourcesContent":["/*\n * @license\n * Copyright 2019 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/pfelement.js\";\nimport PfeAccordion from \"../pfe-accordion/pfe-accordion.js\";\nimport PfeTabs from \"../pfe-tabs/pfe-tabs.js\";\n\nclass PfeContentSet extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-content-set\";\n }\n\n get templateUrl() {\n return \"pfe-content-set.html\";\n }\n\n get styleUrl() {\n return \"pfe-content-set.scss\";\n }\n\n static get pfeType() {\n return PFElement.pfeType.combo;\n }\n\n get isTab() {\n return this.parentNode\n ? this.parentNode.offsetWidth > 768\n : window.outerWidth > 768;\n }\n\n get orientation() {\n return this.hasAttribute(\"vertical\") ? \"vertical\" : \"horizontal\";\n }\n\n get settings() {\n let settings = {};\n const variant = this.getAttribute(\"pfe-variant\");\n const theme = this.getAttribute(\"on\");\n\n if (variant) {\n settings.variant = variant;\n }\n\n if (theme) {\n settings.theme = theme \n }\n\n return settings;\n }\n\n constructor() {\n super(PfeContentSet, { delayRender: true });\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (this.isTab) {\n this._buildTabs();\n } else {\n this._buildAccordion();\n }\n\n this.render();\n }\n\n _buildAccordion() {\n // Use a document fragment for efficiency\n const fragment = document.createDocumentFragment();\n // Create the accordion wrapper component\n const accordion = document.createElement(\"pfe-accordion\");\n\n // Iterate over each element in the light DOM\n [...this.children].forEach(child => {\n // If one of them has the attribute indicating they belong in the header region\n if (child.hasAttribute(\"pfe-content-set--header\")) {\n // Create a header component\n const header = document.createElement(\"pfe-accordion-header\");\n // Append the light DOM element to that component\n header.appendChild(child);\n // Append the component to the accordion parent\n accordion.appendChild(header);\n }\n // If one of them has the attribute indicating they belong in the panel region\n if (child.hasAttribute(\"pfe-content-set--panel\")) {\n // Create a panel component\n const panel = document.createElement(\"pfe-accordion-panel\");\n // Append the light DOM element to that component\n panel.appendChild(child);\n // Append the component to the accordion parent\n accordion.appendChild(panel);\n }\n });\n\n // Append the accordion to the document fragment\n fragment.appendChild(accordion);\n\n // Pass the theme property down to the accordion component\n if (this.settings.theme) {\n accordion.setAttribute(\"on\", this.settings.theme);\n }\n\n // Append the fragment to the component\n this.appendChild(fragment);\n }\n\n _buildTabs() {\n // Use a document fragment for efficiency\n const fragment = document.createDocumentFragment();\n // Create the tabs wrapper component\n const tabs = document.createElement(\"pfe-tabs\");\n\n // Iterate over each element in the light DOM\n [...this.children].forEach(child => {\n // If one of them has the attribute indicating they belong in the header region\n if (child.hasAttribute(\"pfe-content-set--header\")) {\n // Create a tab component\n const header = document.createElement(\"pfe-tab\");\n // Set the attribute indicating its slot\n header.setAttribute(\"slot\", \"tab\");\n // Append the light DOM element to that component\n header.appendChild(child);\n // Append the component to the tabs parent\n tabs.appendChild(header);\n }\n // If one of them has the attribute indicating they belong in the panel region\n if (child.hasAttribute(\"pfe-content-set--panel\")) {\n // Create the panel component\n const panel = document.createElement(\"pfe-tab-panel\");\n // Set the attribute indicating its slot\n panel.setAttribute(\"slot\", \"panel\");\n // Append the light DOM element to that component\n panel.appendChild(child);\n // Append the component to the tabs parent\n tabs.appendChild(panel);\n }\n });\n\n // Append the tabs to the document fragment\n fragment.appendChild(tabs);\n\n // If the orientation is set to vertical, add that attribute to the tabs\n if (this.orientation === \"vertical\") {\n tabs.setAttribute(\"vertical\", true);\n }\n\n // Pass the variant attribute down to the tabs component\n if (this.settings.variant) {\n tabs.setAttribute(\"pfe-variant\", this.settings.variant);\n }\n\n // Pass the theme property down to the accordion component\n if (this.settings.theme) {\n tabs.setAttribute(\"on\", this.settings.theme);\n }\n\n // Append the fragment to the component\n this.appendChild(fragment);\n }\n}\n\nPFElement.create(PfeContentSet);\n\nexport default PfeContentSet;\n"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-content-set/pfe-content-set.min.css b/elements/pfe-content-set/pfe-content-set.min.css new file mode 100644 index 0000000000..1da45f45db --- /dev/null +++ b/elements/pfe-content-set/pfe-content-set.min.css @@ -0,0 +1 @@ +:host{display:block}:host([hidden]){display:none} \ No newline at end of file diff --git a/elements/pfe-content-set/pfe-content-set.min.js b/elements/pfe-content-set/pfe-content-set.min.js new file mode 100644 index 0000000000..12f0799bc4 --- /dev/null +++ b/elements/pfe-content-set/pfe-content-set.min.js @@ -0,0 +1,25 @@ +import t from"../pfelement/pfelement.min.js";import"../pfe-accordion/pfe-accordion.min.js";import"../pfe-tabs/pfe-tabs.min.js"; +/* + * @license + * Copyright 2019 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 e extends t{get html(){return""}static get tag(){return"pfe-content-set"}get templateUrl(){return"pfe-content-set.html"}get styleUrl(){return"pfe-content-set.scss"}static get pfeType(){return t.pfeType.combo}get isTab(){return this.parentNode?this.parentNode.offsetWidth>768:window.outerWidth>768}get orientation(){return this.hasAttribute("vertical")?"vertical":"horizontal"}get settings(){let t={};const e=this.getAttribute("pfe-variant"),n=this.getAttribute("on");return e&&(t.variant=e),n&&(t.theme=n),t}constructor(){super(e,{delayRender:!0})}connectedCallback(){super.connectedCallback(),this.isTab?this._buildTabs():this._buildAccordion(),this.render()}_buildAccordion(){const t=document.createDocumentFragment(),e=document.createElement("pfe-accordion");[...this.children].forEach(t=>{if(t.hasAttribute("pfe-content-set--header")){const n=document.createElement("pfe-accordion-header");n.appendChild(t),e.appendChild(n)}if(t.hasAttribute("pfe-content-set--panel")){const n=document.createElement("pfe-accordion-panel");n.appendChild(t),e.appendChild(n)}}),t.appendChild(e),this.settings.theme&&e.setAttribute("on",this.settings.theme),this.appendChild(t)}_buildTabs(){const t=document.createDocumentFragment(),e=document.createElement("pfe-tabs");[...this.children].forEach(t=>{if(t.hasAttribute("pfe-content-set--header")){const n=document.createElement("pfe-tab");n.setAttribute("slot","tab"),n.appendChild(t),e.appendChild(n)}if(t.hasAttribute("pfe-content-set--panel")){const n=document.createElement("pfe-tab-panel");n.setAttribute("slot","panel"),n.appendChild(t),e.appendChild(n)}}),t.appendChild(e),"vertical"===this.orientation&&e.setAttribute("vertical",!0),this.settings.variant&&e.setAttribute("pfe-variant",this.settings.variant),this.settings.theme&&e.setAttribute("on",this.settings.theme),this.appendChild(t)}}t.create(e);export default e; +//# sourceMappingURL=pfe-content-set.min.js.map diff --git a/elements/pfe-content-set/pfe-content-set.min.js.map b/elements/pfe-content-set/pfe-content-set.min.js.map new file mode 100644 index 0000000000..875dc0d376 --- /dev/null +++ b/elements/pfe-content-set/pfe-content-set.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-content-set.min.js","sources":["pfe-content-set.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\nimport '../pfe-accordion/pfe-accordion.js';\nimport '../pfe-tabs/pfe-tabs.js';\n\n/*\n * @license\n * Copyright 2019 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\nclass PfeContentSet extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-content-set\";\n }\n\n get templateUrl() {\n return \"pfe-content-set.html\";\n }\n\n get styleUrl() {\n return \"pfe-content-set.scss\";\n }\n\n static get pfeType() {\n return PFElement.pfeType.combo;\n }\n\n get isTab() {\n return this.parentNode\n ? this.parentNode.offsetWidth > 768\n : window.outerWidth > 768;\n }\n\n get orientation() {\n return this.hasAttribute(\"vertical\") ? \"vertical\" : \"horizontal\";\n }\n\n get settings() {\n let settings = {};\n const variant = this.getAttribute(\"pfe-variant\");\n const theme = this.getAttribute(\"on\");\n\n if (variant) {\n settings.variant = variant;\n }\n\n if (theme) {\n settings.theme = theme; \n }\n\n return settings;\n }\n\n constructor() {\n super(PfeContentSet, { delayRender: true });\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (this.isTab) {\n this._buildTabs();\n } else {\n this._buildAccordion();\n }\n\n this.render();\n }\n\n _buildAccordion() {\n // Use a document fragment for efficiency\n const fragment = document.createDocumentFragment();\n // Create the accordion wrapper component\n const accordion = document.createElement(\"pfe-accordion\");\n\n // Iterate over each element in the light DOM\n [...this.children].forEach(child => {\n // If one of them has the attribute indicating they belong in the header region\n if (child.hasAttribute(\"pfe-content-set--header\")) {\n // Create a header component\n const header = document.createElement(\"pfe-accordion-header\");\n // Append the light DOM element to that component\n header.appendChild(child);\n // Append the component to the accordion parent\n accordion.appendChild(header);\n }\n // If one of them has the attribute indicating they belong in the panel region\n if (child.hasAttribute(\"pfe-content-set--panel\")) {\n // Create a panel component\n const panel = document.createElement(\"pfe-accordion-panel\");\n // Append the light DOM element to that component\n panel.appendChild(child);\n // Append the component to the accordion parent\n accordion.appendChild(panel);\n }\n });\n\n // Append the accordion to the document fragment\n fragment.appendChild(accordion);\n\n // Pass the theme property down to the accordion component\n if (this.settings.theme) {\n accordion.setAttribute(\"on\", this.settings.theme);\n }\n\n // Append the fragment to the component\n this.appendChild(fragment);\n }\n\n _buildTabs() {\n // Use a document fragment for efficiency\n const fragment = document.createDocumentFragment();\n // Create the tabs wrapper component\n const tabs = document.createElement(\"pfe-tabs\");\n\n // Iterate over each element in the light DOM\n [...this.children].forEach(child => {\n // If one of them has the attribute indicating they belong in the header region\n if (child.hasAttribute(\"pfe-content-set--header\")) {\n // Create a tab component\n const header = document.createElement(\"pfe-tab\");\n // Set the attribute indicating its slot\n header.setAttribute(\"slot\", \"tab\");\n // Append the light DOM element to that component\n header.appendChild(child);\n // Append the component to the tabs parent\n tabs.appendChild(header);\n }\n // If one of them has the attribute indicating they belong in the panel region\n if (child.hasAttribute(\"pfe-content-set--panel\")) {\n // Create the panel component\n const panel = document.createElement(\"pfe-tab-panel\");\n // Set the attribute indicating its slot\n panel.setAttribute(\"slot\", \"panel\");\n // Append the light DOM element to that component\n panel.appendChild(child);\n // Append the component to the tabs parent\n tabs.appendChild(panel);\n }\n });\n\n // Append the tabs to the document fragment\n fragment.appendChild(tabs);\n\n // If the orientation is set to vertical, add that attribute to the tabs\n if (this.orientation === \"vertical\") {\n tabs.setAttribute(\"vertical\", true);\n }\n\n // Pass the variant attribute down to the tabs component\n if (this.settings.variant) {\n tabs.setAttribute(\"pfe-variant\", this.settings.variant);\n }\n\n // Pass the theme property down to the accordion component\n if (this.settings.theme) {\n tabs.setAttribute(\"on\", this.settings.theme);\n }\n\n // Append the fragment to the component\n this.appendChild(fragment);\n }\n}\n\nPFElement.create(PfeContentSet);\n\nexport default PfeContentSet;\n//# sourceMappingURL=pfe-content-set.js.map\n"],"names":["PfeContentSet","PFElement","html","tag","templateUrl","styleUrl","pfeType","combo","isTab","this","parentNode","offsetWidth","window","outerWidth","orientation","hasAttribute","settings","variant","getAttribute","theme","[object Object]","super","delayRender","connectedCallback","_buildTabs","_buildAccordion","render","fragment","document","createDocumentFragment","accordion","createElement","children","forEach","child","header","appendChild","panel","setAttribute","tabs","create"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EA4BA,MAAMA,UAAsBC,EAE1BC,WACE,MAAO,gFAETC,iBACE,MAAO,kBAGTC,kBACE,MAAO,uBAGTC,eACE,MAAO,uBAGTC,qBACE,OAAOL,EAAUK,QAAQC,MAG3BC,YACE,OAAOC,KAAKC,WACRD,KAAKC,WAAWC,YAAc,IAC9BC,OAAOC,WAAa,IAG1BC,kBACE,OAAOL,KAAKM,aAAa,YAAc,WAAa,aAGtDC,eACE,IAAIA,EAAW,GACf,MAAMC,EAAUR,KAAKS,aAAa,eAC5BC,EAAQV,KAAKS,aAAa,MAUhC,OARID,IACFD,EAASC,QAAUA,GAGjBE,IACFH,EAASG,MAAQA,GAGZH,EAGTI,cACEC,MAAMrB,EAAe,CAAEsB,aAAa,IAGtCF,oBACEC,MAAME,oBAEFd,KAAKD,MACPC,KAAKe,aAELf,KAAKgB,kBAGPhB,KAAKiB,SAGPN,kBAEE,MAAMO,EAAWC,SAASC,yBAEpBC,EAAYF,SAASG,cAAc,iBAGzC,IAAItB,KAAKuB,UAAUC,QAAQC,IAEzB,GAAIA,EAAMnB,aAAa,2BAA4B,CAEjD,MAAMoB,EAASP,SAASG,cAAc,wBAEtCI,EAAOC,YAAYF,GAEnBJ,EAAUM,YAAYD,GAGxB,GAAID,EAAMnB,aAAa,0BAA2B,CAEhD,MAAMsB,EAAQT,SAASG,cAAc,uBAErCM,EAAMD,YAAYF,GAElBJ,EAAUM,YAAYC,MAK1BV,EAASS,YAAYN,GAGjBrB,KAAKO,SAASG,OAChBW,EAAUQ,aAAa,KAAM7B,KAAKO,SAASG,OAI7CV,KAAK2B,YAAYT,GAGnBP,aAEE,MAAMO,EAAWC,SAASC,yBAEpBU,EAAOX,SAASG,cAAc,YAGpC,IAAItB,KAAKuB,UAAUC,QAAQC,IAEzB,GAAIA,EAAMnB,aAAa,2BAA4B,CAEjD,MAAMoB,EAASP,SAASG,cAAc,WAEtCI,EAAOG,aAAa,OAAQ,OAE5BH,EAAOC,YAAYF,GAEnBK,EAAKH,YAAYD,GAGnB,GAAID,EAAMnB,aAAa,0BAA2B,CAEhD,MAAMsB,EAAQT,SAASG,cAAc,iBAErCM,EAAMC,aAAa,OAAQ,SAE3BD,EAAMD,YAAYF,GAElBK,EAAKH,YAAYC,MAKrBV,EAASS,YAAYG,GAGI,aAArB9B,KAAKK,aACPyB,EAAKD,aAAa,YAAY,GAI5B7B,KAAKO,SAASC,SAChBsB,EAAKD,aAAa,cAAe7B,KAAKO,SAASC,SAI7CR,KAAKO,SAASG,OAChBoB,EAAKD,aAAa,KAAM7B,KAAKO,SAASG,OAIxCV,KAAK2B,YAAYT,IAIrB1B,EAAUuC,OAAOxC"} \ No newline at end of file diff --git a/elements/pfe-content-set/pfe-content-set.umd.js b/elements/pfe-content-set/pfe-content-set.umd.js new file mode 100644 index 0000000000..c202bf5541 --- /dev/null +++ b/elements/pfe-content-set/pfe-content-set.umd.js @@ -0,0 +1,295 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('../pfelement/pfelement.umd'), require('../pfe-accordion/pfe-accordion.umd'), require('../pfe-tabs/pfe-tabs.umd')) : + typeof define === 'function' && define.amd ? define(['../pfelement/pfelement.umd', '../pfe-accordion/pfe-accordion.umd', '../pfe-tabs/pfe-tabs.umd'], factory) : + (global.PfeContentSet = factory(global.PFElement)); +}(this, (function (PFElement) { 'use strict'; + + PFElement = PFElement && PFElement.hasOwnProperty('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; + }; + + 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); + } + }; + + /* + * @license + * Copyright 2019 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 PfeContentSet = function (_PFElement) { + inherits(PfeContentSet, _PFElement); + createClass(PfeContentSet, [{ + key: 'html', + get: function get$$1() { + return ''; + } + }, { + key: 'templateUrl', + get: function get$$1() { + return "pfe-content-set.html"; + } + }, { + key: 'styleUrl', + get: function get$$1() { + return "pfe-content-set.scss"; + } + }, { + key: 'isTab', + get: function get$$1() { + return this.parentNode ? this.parentNode.offsetWidth > 768 : window.outerWidth > 768; + } + }, { + key: 'orientation', + get: function get$$1() { + return this.hasAttribute("vertical") ? "vertical" : "horizontal"; + } + }, { + key: 'settings', + get: function get$$1() { + var settings = {}; + var variant = this.getAttribute("pfe-variant"); + var theme = this.getAttribute("on"); + + if (variant) { + settings.variant = variant; + } + + if (theme) { + settings.theme = theme; + } + + return settings; + } + }], [{ + key: 'tag', + get: function get$$1() { + return "pfe-content-set"; + } + }, { + key: 'pfeType', + get: function get$$1() { + return PFElement.pfeType.combo; + } + }]); + + function PfeContentSet() { + classCallCheck(this, PfeContentSet); + return possibleConstructorReturn(this, (PfeContentSet.__proto__ || Object.getPrototypeOf(PfeContentSet)).call(this, PfeContentSet, { delayRender: true })); + } + + createClass(PfeContentSet, [{ + key: 'connectedCallback', + value: function connectedCallback() { + get(PfeContentSet.prototype.__proto__ || Object.getPrototypeOf(PfeContentSet.prototype), 'connectedCallback', this).call(this); + + if (this.isTab) { + this._buildTabs(); + } else { + this._buildAccordion(); + } + + this.render(); + } + }, { + key: '_buildAccordion', + value: function _buildAccordion() { + // Use a document fragment for efficiency + var fragment = document.createDocumentFragment(); + // Create the accordion wrapper component + var accordion = document.createElement("pfe-accordion"); + + // Iterate over each element in the light DOM + [].concat(toConsumableArray(this.children)).forEach(function (child) { + // If one of them has the attribute indicating they belong in the header region + if (child.hasAttribute("pfe-content-set--header")) { + // Create a header component + var header = document.createElement("pfe-accordion-header"); + // Append the light DOM element to that component + header.appendChild(child); + // Append the component to the accordion parent + accordion.appendChild(header); + } + // If one of them has the attribute indicating they belong in the panel region + if (child.hasAttribute("pfe-content-set--panel")) { + // Create a panel component + var panel = document.createElement("pfe-accordion-panel"); + // Append the light DOM element to that component + panel.appendChild(child); + // Append the component to the accordion parent + accordion.appendChild(panel); + } + }); + + // Append the accordion to the document fragment + fragment.appendChild(accordion); + + // Pass the theme property down to the accordion component + if (this.settings.theme) { + accordion.setAttribute("on", this.settings.theme); + } + + // Append the fragment to the component + this.appendChild(fragment); + } + }, { + key: '_buildTabs', + value: function _buildTabs() { + // Use a document fragment for efficiency + var fragment = document.createDocumentFragment(); + // Create the tabs wrapper component + var tabs = document.createElement("pfe-tabs"); + + // Iterate over each element in the light DOM + [].concat(toConsumableArray(this.children)).forEach(function (child) { + // If one of them has the attribute indicating they belong in the header region + if (child.hasAttribute("pfe-content-set--header")) { + // Create a tab component + var header = document.createElement("pfe-tab"); + // Set the attribute indicating its slot + header.setAttribute("slot", "tab"); + // Append the light DOM element to that component + header.appendChild(child); + // Append the component to the tabs parent + tabs.appendChild(header); + } + // If one of them has the attribute indicating they belong in the panel region + if (child.hasAttribute("pfe-content-set--panel")) { + // Create the panel component + var panel = document.createElement("pfe-tab-panel"); + // Set the attribute indicating its slot + panel.setAttribute("slot", "panel"); + // Append the light DOM element to that component + panel.appendChild(child); + // Append the component to the tabs parent + tabs.appendChild(panel); + } + }); + + // Append the tabs to the document fragment + fragment.appendChild(tabs); + + // If the orientation is set to vertical, add that attribute to the tabs + if (this.orientation === "vertical") { + tabs.setAttribute("vertical", true); + } + + // Pass the variant attribute down to the tabs component + if (this.settings.variant) { + tabs.setAttribute("pfe-variant", this.settings.variant); + } + + // Pass the theme property down to the accordion component + if (this.settings.theme) { + tabs.setAttribute("on", this.settings.theme); + } + + // Append the fragment to the component + this.appendChild(fragment); + } + }]); + return PfeContentSet; + }(PFElement); + + PFElement.create(PfeContentSet); + + return PfeContentSet; + +}))); +//# sourceMappingURL=pfe-content-set.umd.js.map diff --git a/elements/pfe-content-set/pfe-content-set.umd.js.map b/elements/pfe-content-set/pfe-content-set.umd.js.map new file mode 100644 index 0000000000..a90afcd75d --- /dev/null +++ b/elements/pfe-content-set/pfe-content-set.umd.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-content-set.umd.js","sources":["pfe-content-set.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\nimport '../pfe-accordion/pfe-accordion.js';\nimport '../pfe-tabs/pfe-tabs.js';\n\n/*\n * @license\n * Copyright 2019 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\nclass PfeContentSet extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-content-set\";\n }\n\n get templateUrl() {\n return \"pfe-content-set.html\";\n }\n\n get styleUrl() {\n return \"pfe-content-set.scss\";\n }\n\n static get pfeType() {\n return PFElement.pfeType.combo;\n }\n\n get isTab() {\n return this.parentNode\n ? this.parentNode.offsetWidth > 768\n : window.outerWidth > 768;\n }\n\n get orientation() {\n return this.hasAttribute(\"vertical\") ? \"vertical\" : \"horizontal\";\n }\n\n get settings() {\n let settings = {};\n const variant = this.getAttribute(\"pfe-variant\");\n const theme = this.getAttribute(\"on\");\n\n if (variant) {\n settings.variant = variant;\n }\n\n if (theme) {\n settings.theme = theme; \n }\n\n return settings;\n }\n\n constructor() {\n super(PfeContentSet, { delayRender: true });\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (this.isTab) {\n this._buildTabs();\n } else {\n this._buildAccordion();\n }\n\n this.render();\n }\n\n _buildAccordion() {\n // Use a document fragment for efficiency\n const fragment = document.createDocumentFragment();\n // Create the accordion wrapper component\n const accordion = document.createElement(\"pfe-accordion\");\n\n // Iterate over each element in the light DOM\n [...this.children].forEach(child => {\n // If one of them has the attribute indicating they belong in the header region\n if (child.hasAttribute(\"pfe-content-set--header\")) {\n // Create a header component\n const header = document.createElement(\"pfe-accordion-header\");\n // Append the light DOM element to that component\n header.appendChild(child);\n // Append the component to the accordion parent\n accordion.appendChild(header);\n }\n // If one of them has the attribute indicating they belong in the panel region\n if (child.hasAttribute(\"pfe-content-set--panel\")) {\n // Create a panel component\n const panel = document.createElement(\"pfe-accordion-panel\");\n // Append the light DOM element to that component\n panel.appendChild(child);\n // Append the component to the accordion parent\n accordion.appendChild(panel);\n }\n });\n\n // Append the accordion to the document fragment\n fragment.appendChild(accordion);\n\n // Pass the theme property down to the accordion component\n if (this.settings.theme) {\n accordion.setAttribute(\"on\", this.settings.theme);\n }\n\n // Append the fragment to the component\n this.appendChild(fragment);\n }\n\n _buildTabs() {\n // Use a document fragment for efficiency\n const fragment = document.createDocumentFragment();\n // Create the tabs wrapper component\n const tabs = document.createElement(\"pfe-tabs\");\n\n // Iterate over each element in the light DOM\n [...this.children].forEach(child => {\n // If one of them has the attribute indicating they belong in the header region\n if (child.hasAttribute(\"pfe-content-set--header\")) {\n // Create a tab component\n const header = document.createElement(\"pfe-tab\");\n // Set the attribute indicating its slot\n header.setAttribute(\"slot\", \"tab\");\n // Append the light DOM element to that component\n header.appendChild(child);\n // Append the component to the tabs parent\n tabs.appendChild(header);\n }\n // If one of them has the attribute indicating they belong in the panel region\n if (child.hasAttribute(\"pfe-content-set--panel\")) {\n // Create the panel component\n const panel = document.createElement(\"pfe-tab-panel\");\n // Set the attribute indicating its slot\n panel.setAttribute(\"slot\", \"panel\");\n // Append the light DOM element to that component\n panel.appendChild(child);\n // Append the component to the tabs parent\n tabs.appendChild(panel);\n }\n });\n\n // Append the tabs to the document fragment\n fragment.appendChild(tabs);\n\n // If the orientation is set to vertical, add that attribute to the tabs\n if (this.orientation === \"vertical\") {\n tabs.setAttribute(\"vertical\", true);\n }\n\n // Pass the variant attribute down to the tabs component\n if (this.settings.variant) {\n tabs.setAttribute(\"pfe-variant\", this.settings.variant);\n }\n\n // Pass the theme property down to the accordion component\n if (this.settings.theme) {\n tabs.setAttribute(\"on\", this.settings.theme);\n }\n\n // Append the fragment to the component\n this.appendChild(fragment);\n }\n}\n\nPFElement.create(PfeContentSet);\n\nexport default PfeContentSet;\n//# sourceMappingURL=pfe-content-set.js.map\n"],"names":["PfeContentSet","parentNode","offsetWidth","window","outerWidth","hasAttribute","settings","variant","getAttribute","theme","PFElement","pfeType","combo","delayRender","isTab","_buildTabs","_buildAccordion","render","fragment","document","createDocumentFragment","accordion","createElement","children","forEach","child","header","appendChild","panel","setAttribute","tabs","orientation","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-content-set/pfe-content-set.umd.min.js b/elements/pfe-content-set/pfe-content-set.umd.min.js new file mode 100644 index 0000000000..b0d7a90492 --- /dev/null +++ b/elements/pfe-content-set/pfe-content-set.umd.min.js @@ -0,0 +1,2 @@ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("../pfelement/pfelement.umd.min"),require("../pfe-accordion/pfe-accordion.umd.min"),require("../pfe-tabs/pfe-tabs.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min","../pfe-accordion/pfe-accordion.umd.min","../pfe-tabs/pfe-tabs.umd.min"],t):e.PfeContentSet=t(e.PFElement)}(this,function(n){"use strict";n=n&&n.hasOwnProperty("default")?n.default:n;var r=function(){function r(e,t){for(var n=0;n:host{display:block}:host([hidden]){display:none}"}},{key:"templateUrl",get:function(){return"pfe-content-set.html"}},{key:"styleUrl",get:function(){return"pfe-content-set.scss"}},{key:"isTab",get:function(){return this.parentNode?768:host{display:block}:host([hidden]){display:none}`;\n }\n static get tag() {\n return \"pfe-content-set\";\n }\n\n get templateUrl() {\n return \"pfe-content-set.html\";\n }\n\n get styleUrl() {\n return \"pfe-content-set.scss\";\n }\n\n static get pfeType() {\n return PFElement.pfeType.combo;\n }\n\n get isTab() {\n return this.parentNode\n ? this.parentNode.offsetWidth > 768\n : window.outerWidth > 768;\n }\n\n get orientation() {\n return this.hasAttribute(\"vertical\") ? \"vertical\" : \"horizontal\";\n }\n\n get settings() {\n let settings = {};\n const variant = this.getAttribute(\"pfe-variant\");\n const theme = this.getAttribute(\"on\");\n\n if (variant) {\n settings.variant = variant;\n }\n\n if (theme) {\n settings.theme = theme; \n }\n\n return settings;\n }\n\n constructor() {\n super(PfeContentSet, { delayRender: true });\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (this.isTab) {\n this._buildTabs();\n } else {\n this._buildAccordion();\n }\n\n this.render();\n }\n\n _buildAccordion() {\n // Use a document fragment for efficiency\n const fragment = document.createDocumentFragment();\n // Create the accordion wrapper component\n const accordion = document.createElement(\"pfe-accordion\");\n\n // Iterate over each element in the light DOM\n [...this.children].forEach(child => {\n // If one of them has the attribute indicating they belong in the header region\n if (child.hasAttribute(\"pfe-content-set--header\")) {\n // Create a header component\n const header = document.createElement(\"pfe-accordion-header\");\n // Append the light DOM element to that component\n header.appendChild(child);\n // Append the component to the accordion parent\n accordion.appendChild(header);\n }\n // If one of them has the attribute indicating they belong in the panel region\n if (child.hasAttribute(\"pfe-content-set--panel\")) {\n // Create a panel component\n const panel = document.createElement(\"pfe-accordion-panel\");\n // Append the light DOM element to that component\n panel.appendChild(child);\n // Append the component to the accordion parent\n accordion.appendChild(panel);\n }\n });\n\n // Append the accordion to the document fragment\n fragment.appendChild(accordion);\n\n // Pass the theme property down to the accordion component\n if (this.settings.theme) {\n accordion.setAttribute(\"on\", this.settings.theme);\n }\n\n // Append the fragment to the component\n this.appendChild(fragment);\n }\n\n _buildTabs() {\n // Use a document fragment for efficiency\n const fragment = document.createDocumentFragment();\n // Create the tabs wrapper component\n const tabs = document.createElement(\"pfe-tabs\");\n\n // Iterate over each element in the light DOM\n [...this.children].forEach(child => {\n // If one of them has the attribute indicating they belong in the header region\n if (child.hasAttribute(\"pfe-content-set--header\")) {\n // Create a tab component\n const header = document.createElement(\"pfe-tab\");\n // Set the attribute indicating its slot\n header.setAttribute(\"slot\", \"tab\");\n // Append the light DOM element to that component\n header.appendChild(child);\n // Append the component to the tabs parent\n tabs.appendChild(header);\n }\n // If one of them has the attribute indicating they belong in the panel region\n if (child.hasAttribute(\"pfe-content-set--panel\")) {\n // Create the panel component\n const panel = document.createElement(\"pfe-tab-panel\");\n // Set the attribute indicating its slot\n panel.setAttribute(\"slot\", \"panel\");\n // Append the light DOM element to that component\n panel.appendChild(child);\n // Append the component to the tabs parent\n tabs.appendChild(panel);\n }\n });\n\n // Append the tabs to the document fragment\n fragment.appendChild(tabs);\n\n // If the orientation is set to vertical, add that attribute to the tabs\n if (this.orientation === \"vertical\") {\n tabs.setAttribute(\"vertical\", true);\n }\n\n // Pass the variant attribute down to the tabs component\n if (this.settings.variant) {\n tabs.setAttribute(\"pfe-variant\", this.settings.variant);\n }\n\n // Pass the theme property down to the accordion component\n if (this.settings.theme) {\n tabs.setAttribute(\"on\", this.settings.theme);\n }\n\n // Append the fragment to the component\n this.appendChild(fragment);\n }\n}\n\nPFElement.create(PfeContentSet);\n\nexport default PfeContentSet;\n//# sourceMappingURL=pfe-content-set.js.map\n"],"names":["PfeContentSet","delayRender","PFElement","this","parentNode","offsetWidth","window","outerWidth","hasAttribute","settings","variant","getAttribute","theme","pfeType","combo","isTab","_buildTabs","_buildAccordion","render","fragment","document","createDocumentFragment","accordion","createElement","children","forEach","child","header","appendChild","panel","setAttribute","tabs","orientation","create"],"mappings":"k1BA4BMA,gWAgDIA,EAAe,CAAEC,aAAa,wUAhDZC,mKAUjB,8DAIA,4DAQAC,KAAKC,WACsB,IAA9BD,KAAKC,WAAWC,YACI,IAApBC,OAAOC,sDAIJJ,KAAKK,aAAa,YAAc,WAAa,kDAIhDC,EAAW,GACTC,EAAUP,KAAKQ,aAAa,eAC5BC,EAAQT,KAAKQ,aAAa,aAE5BD,MACOA,QAAUA,GAGjBE,MACOA,MAAQA,GAGZH,sCAtCA,yDAYAP,EAAUW,QAAQC,oZAoCrBX,KAAKY,WACFC,kBAEAC,uBAGFC,uDAKCC,EAAWC,SAASC,yBAEpBC,EAAYF,SAASG,cAAc,6BAGrCpB,KAAKqB,WAAUC,QAAQ,eAErBC,EAAMlB,aAAa,2BAA4B,KAE3CmB,EAASP,SAASG,cAAc,0BAE/BK,YAAYF,KAETE,YAAYD,MAGpBD,EAAMlB,aAAa,0BAA2B,KAE1CqB,EAAQT,SAASG,cAAc,yBAE/BK,YAAYF,KAERE,YAAYC,QAKjBD,YAAYN,GAGjBnB,KAAKM,SAASG,SACNkB,aAAa,KAAM3B,KAAKM,SAASG,YAIxCgB,YAAYT,4CAKXA,EAAWC,SAASC,yBAEpBU,EAAOX,SAASG,cAAc,wBAGhCpB,KAAKqB,WAAUC,QAAQ,eAErBC,EAAMlB,aAAa,2BAA4B,KAE3CmB,EAASP,SAASG,cAAc,aAE/BO,aAAa,OAAQ,SAErBF,YAAYF,KAEdE,YAAYD,MAGfD,EAAMlB,aAAa,0BAA2B,KAE1CqB,EAAQT,SAASG,cAAc,mBAE/BO,aAAa,OAAQ,WAErBF,YAAYF,KAEbE,YAAYC,QAKZD,YAAYG,GAGI,aAArB5B,KAAK6B,eACFF,aAAa,YAAY,GAI5B3B,KAAKM,SAASC,WACXoB,aAAa,cAAe3B,KAAKM,SAASC,SAI7CP,KAAKM,SAASG,SACXkB,aAAa,KAAM3B,KAAKM,SAASG,YAInCgB,YAAYT,mBAIrBjB,EAAU+B,OAAOjC"} \ No newline at end of file diff --git a/elements/pfe-cta/package.json b/elements/pfe-cta/package.json index 9697552f46..802ba2a272 100644 --- a/elements/pfe-cta/package.json +++ b/elements/pfe-cta/package.json @@ -4,7 +4,7 @@ "className": "PfeCta", "elementName": "pfe-cta" }, - "version": "1.0.0-prerelease.11", + "version": "1.0.0-prerelease.13", "publishConfig": { "access": "public" }, @@ -15,7 +15,7 @@ ], "repository": { "type": "git", - "url" : "github:patternfly/patternfly-elements", + "url": "github:patternfly/patternfly-elements", "directory": "elements/pfe-cta" }, "main": "pfe-cta.js", @@ -33,8 +33,8 @@ ], "license": "MIT", "dependencies": { - "@patternfly/pfe-sass": "^1.0.0-prerelease.11", - "@patternfly/pfelement": "^1.0.0-prerelease.11" + "@patternfly/pfe-sass": "^1.0.0-prerelease.13", + "@patternfly/pfelement": "^1.0.0-prerelease.13" }, "generator-pfelement-version": "0.5.0", "gitHead": "dfa74e0495c556ebdd1edb61c6d406621d1b6421" diff --git a/elements/pfe-cta/pfe-cta.css b/elements/pfe-cta/pfe-cta.css new file mode 100644 index 0000000000..8a5bd70857 --- /dev/null +++ b/elements/pfe-cta/pfe-cta.css @@ -0,0 +1,191 @@ +/* + * Copyright 2018 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. + */ +/* Palette of Border Colors */ +/* Palette of Feedback Colors */ +:host { + --pfe-cta--main: var(--pfe-theme--color--ui-link, #06c); + --pfe-cta--main--hover: var(--pfe-theme--color--ui-link--hover, #003366); + --pfe-cta--main--focus: var(--pfe-theme--color--ui-link--focus, #003366); + --pfe-cta--main--visited: var(--pfe-theme--color--ui-link--visited, rebeccapurple); + --pfe-cta--aux: transparent; + --pfe-cta--aux--hover: transparent; + display: inline-block; + font-weight: bold; +} + +:host ::slotted(a) { + line-height: inherit; + color: var(--pfe-cta--main); + -webkit-transition: all cubic-bezier(0.465, 0.183, 0.153, 0.946); + transition: all cubic-bezier(0.465, 0.183, 0.153, 0.946); + -webkit-transition: all var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946)); + transition: all var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946)); +} + +:host ::slotted(a)::after { + display: block; + margin-left: calc(1rem * 0.25); + margin-left: calc(var(--pfe-theme--content-spacer, 1rem) * 0.25); + vertical-align: middle; + border-style: solid; + border-style: var(--pfe-theme--surface--border-style, solid); + border-width: 0.313em 0.313em 0; + border-color: transparent; + border-top-color: var(--pfe-cta--main); + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + display: inline-block; + content: ""; +} + +:host ::slotted(a:hover) { + color: var(--pfe-cta--main--hover); +} + +:host ::slotted(a:hover)::after { + border-top-color: var(--pfe-cta--main--hover); +} + +:host ::slotted(a:focus) { + color: var(--pfe-cta--main--focus); +} + +:host ::slotted(a:focus)::after { + border-top-color: var(--pfe-cta--main--focus); +} + +:host([priority="primary"]) { + --pfe-cta--main: var(--pfe-theme--color--ui-accent, #fe460d); + --pfe-cta--main--hover: var(--pfe-theme--color--ui-accent--hover, #a42701); + --pfe-cta--aux: var(--pfe-theme--color--ui-accent--text, #fff); + --pfe-cta--aux--hover: var(--pfe-theme--color--ui-accent--text--hover, #fff); +} + +:host([priority="primary"]) ::slotted(a) { + display: inline-block; + padding: calc(1rem * 0.5) calc(1rem * 2); + padding: calc(var(--pfe-theme--container-padding, 1rem) * 0.5) calc(var(--pfe-theme--container-padding, 1rem) * 2); + border-radius: calc(2px * 20); + border-radius: calc(var(--pfe-theme--ui--border-radius, 2px) * 20); + border: 1px solid transparent; + border: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) transparent; + text-decoration: none; + line-height: 1.2; + border-color: var(--pfe-cta--main); + background: var(--pfe-cta--main); + color: var(--pfe-cta--aux); + --pfe-broadcasted--color--ui-link: var(--pfe-cta--aux); +} + +:host([priority="primary"]) ::slotted(a)::after { + display: none; +} + +:host([priority="primary"]) ::slotted(a:hover), +:host([priority="primary"]) ::slotted(a:focus) { + border-color: var(--pfe-cta--main--hover); + background: var(--pfe-cta--main--hover); + color: var(--pfe-cta--aux--hover); + --pfe-broadcasted--color--ui-link--hover: var(--pfe-cta--aux--hover); +} + +:host([priority="secondary"]) { + --pfe-cta--main: var(--pfe-theme--color--ui-base, #0477a4); + --pfe-cta--main--hover: var(--pfe-theme--color--ui-base--hover, #022f40); + --pfe-cta--aux: var(--pfe-theme--color--ui-base--text, #fff); + --pfe-cta--aux--hover: var(--pfe-theme--color--ui-base--text--hover, #fff); +} + +:host([priority="secondary"]) ::slotted(a) { + display: inline-block; + padding: calc(1rem * 0.5) calc(1rem * 2); + padding: calc(var(--pfe-theme--container-padding, 1rem) * 0.5) calc(var(--pfe-theme--container-padding, 1rem) * 2); + border-radius: calc(2px * 20); + border-radius: calc(var(--pfe-theme--ui--border-radius, 2px) * 20); + border: 1px solid var(--pfe-cta--main); + border: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-cta--main); + text-decoration: none; + line-height: 1.2; + border-color: var(--pfe-cta--main); + background: var(--pfe-cta--aux); + color: var(--pfe-cta--main); + --pfe-broadcasted--color--ui-link--hover: var(--pfe-cta--main); +} + +:host([priority="secondary"]) ::slotted(a)::after { + display: none; +} + +:host([priority="secondary"]) ::slotted(a:hover), +:host([priority="secondary"]) ::slotted(a:focus) { + border-color: var(--pfe-cta--main--hover); + background: var(--pfe-cta--main--hover); + color: var(--pfe-cta--aux--hover); + --pfe-broadcasted--color--ui-link--hover: var(--pfe-cta--aux--hover); +} + +:host([on="dark"]) { + --pfe-cta--main: var(--pfe-theme--color--text--on-dark, #fff); + --pfe-cta--main--hover: var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff); + --pfe-cta--aux: transparent; + --pfe-cta--aux--hover: transparent; +} + +:host([on="dark"][priority="primary"]) { + --pfe-cta--main: var(--pfe-theme--color--ui-accent--text, #fff); + --pfe-cta--main--hover: var(--pfe-theme--color--ui-accent--text--hover, #fff); + --pfe-cta--aux: var(--pfe-theme--color--ui-accent, #fe460d); + --pfe-cta--aux--hover: var(--pfe-theme--color--ui-accent--hover, #a42701); +} + +:host([on="dark"][priority="secondary"]) { + --pfe-cta--main: var(--pfe-theme--color--ui-base--text, #fff); + --pfe-cta--main--hover: var(--pfe-theme--color--ui-base--text--hover, #fff); + --pfe-cta--aux: transparent; + --pfe-cta--aux--hover: var(--pfe-theme--color--ui-base--hover, #022f40); +} + +:host([color="base"]), +:host([color="base"][on="dark"]) { + --pfe-cta--main: var(--pfe-theme--color--ui-base, #0477a4); + --pfe-cta--main--hover: var(--pfe-theme--color--ui-base--hover, #022f40); + --pfe-cta--aux: var(--pfe-theme--color--ui-base--text, #fff); + --pfe-cta--aux--hover: var(--pfe-theme--color--ui-base--text--hover, #fff); +} + +:host([color="complement"]), +:host([color="complement"][on="dark"]) { + --pfe-cta--main: var(--pfe-theme--color--ui-complement, #464646); + --pfe-cta--main--hover: var(--pfe-theme--color--ui-complement--hover, #131313); + --pfe-cta--aux: var(--pfe-theme--color--ui-complement--text, #fff); + --pfe-cta--aux--hover: var(--pfe-theme--color--ui-complement--text--hover, #fff); +} + +:host([color="accent"]), +:host([color="accent"][on="dark"]) { + --pfe-cta--main: var(--pfe-theme--color--ui-accent, #fe460d); + --pfe-cta--main--hover: var(--pfe-theme--color--ui-accent--hover, #a42701); + --pfe-cta--aux: var(--pfe-theme--color--ui-accent--text, #fff); + --pfe-cta--aux--hover: var(--pfe-theme--color--ui-accent--text--hover, #fff); +} + +/*# sourceMappingURL=pfe-cta.css.map */ diff --git a/elements/pfe-cta/pfe-cta.css.map b/elements/pfe-cta/pfe-cta.css.map new file mode 100644 index 0000000000..e5774f2b54 --- /dev/null +++ b/elements/pfe-cta/pfe-cta.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","pfe-cta.css","../../pfe-sass/variables/_colors.scss","pfe-cta.scss","../../pfe-sass/mixins/_mixins.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;ECoBE;AC4GF,6BAAA;AAOA,+BAAA;AC5HA;EACE,2EAAgB;EAChB,qFAAuB;EACvB,qFAAuB;EACvB,6FAAyB;EACzB,gDAAe;EACf,gDAAsB;EAEtB,qBAAqB;EACrB,iBAAiB;AFYnB;;AErBA;EAYI,oBAAoB;EACpB,2BAA2B;EAC3B,gEAA4C;EAA5C,wDAA4C;EAA5C,oGAA4C;EAA5C,4FAA4C;AFahD;;AE3BA;EAiBM,cAAc;EACd,8BAAoD;EAApD,gEAAoD;EACpD,sBAAsB;EC8F1B,mBAAc;EAAd,4DAAc;EACd,+BAA8B;EAC9B,yBAAyB;EACzB,sCDhGkD;ECiGlD,iCAA6C;UAA7C,yBAA6C;EAE3C,qBAAqB;EACrB,WAAW;AHhFf;;AExCA;EAgCI,kCAAkC;AFYtC;;AE5CA;EC8HE,6CD3FwD;AFa1D;;AEhDA;EAwCI,kCAAkC;AFYtC;;AEpDA;EC8HE,6CDnFwD;AFa1D;;AEJA;EACE,qEAAgB;EAChB,4EAAuB;EACvB,wEAAe;EACf,+EAAsB;AFOxB;;AEXA;EAOI,qBAAqB;EACrB,wCAA0F;EAA1F,kHAA0F;EAC1F,6BAAuD;EAAvD,kEAAuD;EACvD,6BAA6E;EAA7E,qGAA6E;EAC7E,qBAAqB;EACrB,gBAAgB;EAEhB,kCAAkC;EAClC,gCAAkC;EAClC,0BAAiC;EAEjC,sDAAkC;AFMtC;;AExBA;EAqBM,aAAa;AFOnB;;AE5BA;;EA2BI,yCAAyC;EACzC,uCAAyC;EACzC,iCAAwC;EAExC,oEAAyC;AFK7C;;AEEA;EACE,mEAAgB;EAChB,0EAAuB;EACvB,sEAAe;EACf,6EAAsB;AFCxB;;AELA;EAOI,qBAAqB;EACrB,wCAA0F;EAA1F,kHAA0F;EAC1F,6BAAuD;EAAvD,kEAAuD;EACvD,sCAAsF;EAAtF,8GAAsF;EACtF,qBAAqB;EACrB,gBAAgB;EAEhB,kCAAkC;EAClC,+BAAiC;EACjC,2BAAkC;EAElC,8DAAyC;AFA7C;;AElBA;EAqBM,aAAa;AFCnB;;AEtBA;;EA2BI,yCAAyC;EACzC,uCAAyC;EACzC,iCAAwC;EAExC,oEAAyC;AFD7C;;AEWA;EACE,oEAAgB;EAChB,iFAAuB;EACvB,mCAAe;EACf,mCAAsB;AFRxB;;AEWA;EACE,sEAAgB;EAChB,6EAAuB;EACvB,mEAAe;EACf,0EAAsB;AFRxB;;AEWA;EACE,oEAAgB;EAChB,2EAAuB;EACvB,mCAAe;EACf,wEAAsB;AFRxB;;AEgBA;;EAEE,iEAAgB;EAChB,wEAAuB;EACvB,oEAAe;EACf,2EAAsB;AFbxB;;AEqBA;;EAEE,uEAAgB;EAChB,8EAAuB;EACvB,0EAAe;EACf,iFAAsB;AFlBxB;;AEyBA;;EAEE,mEAAgB;EAChB,0EAAuB;EACvB,sEAAe;EACf,6EAAsB;AFtBxB","file":"pfe-cta.css","sourcesContent":["/*\n * Copyright 2018 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// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n","/*\n * Copyright 2018 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/* Palette of Border Colors */\n/* Palette of Feedback Colors */\n:host {\n --pfe-cta--main: var(--pfe-theme--color--ui-link, #06c);\n --pfe-cta--main--hover: var(--pfe-theme--color--ui-link--hover, #003366);\n --pfe-cta--main--focus: var(--pfe-theme--color--ui-link--focus, #003366);\n --pfe-cta--main--visited: var(--pfe-theme--color--ui-link--visited, rebeccapurple);\n --pfe-cta--aux: transparent;\n --pfe-cta--aux--hover: transparent;\n display: inline-block;\n font-weight: bold;\n}\n\n:host ::slotted(a) {\n line-height: inherit;\n color: var(--pfe-cta--main);\n transition: all var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946));\n}\n\n:host ::slotted(a)::after {\n display: block;\n margin-left: calc(var(--pfe-theme--content-spacer, 1rem) * 0.25);\n vertical-align: middle;\n border-style: var(--pfe-theme--surface--border-style, solid);\n border-width: 0.313em 0.313em 0;\n border-color: transparent;\n border-top-color: var(--pfe-cta--main);\n transform: rotate(-90deg);\n display: inline-block;\n content: \"\";\n}\n\n:host ::slotted(a:hover) {\n color: var(--pfe-cta--main--hover);\n}\n\n:host ::slotted(a:hover)::after {\n border-top-color: var(--pfe-cta--main--hover);\n}\n\n:host ::slotted(a:focus) {\n color: var(--pfe-cta--main--focus);\n}\n\n:host ::slotted(a:focus)::after {\n border-top-color: var(--pfe-cta--main--focus);\n}\n\n:host([priority=\"primary\"]) {\n --pfe-cta--main: var(--pfe-theme--color--ui-accent, #fe460d);\n --pfe-cta--main--hover: var(--pfe-theme--color--ui-accent--hover, #a42701);\n --pfe-cta--aux: var(--pfe-theme--color--ui-accent--text, #fff);\n --pfe-cta--aux--hover: var(--pfe-theme--color--ui-accent--text--hover, #fff);\n}\n\n:host([priority=\"primary\"]) ::slotted(a) {\n display: inline-block;\n padding: calc(var(--pfe-theme--container-padding, 1rem) * 0.5) calc(var(--pfe-theme--container-padding, 1rem) * 2);\n border-radius: calc(var(--pfe-theme--ui--border-radius, 2px) * 20);\n border: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) transparent;\n text-decoration: none;\n line-height: 1.2;\n border-color: var(--pfe-cta--main);\n background: var(--pfe-cta--main);\n color: var(--pfe-cta--aux);\n --pfe-broadcasted--color--ui-link: var(--pfe-cta--aux);\n}\n\n:host([priority=\"primary\"]) ::slotted(a)::after {\n display: none;\n}\n\n:host([priority=\"primary\"]) ::slotted(a:hover),\n:host([priority=\"primary\"]) ::slotted(a:focus) {\n border-color: var(--pfe-cta--main--hover);\n background: var(--pfe-cta--main--hover);\n color: var(--pfe-cta--aux--hover);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-cta--aux--hover);\n}\n\n:host([priority=\"secondary\"]) {\n --pfe-cta--main: var(--pfe-theme--color--ui-base, #0477a4);\n --pfe-cta--main--hover: var(--pfe-theme--color--ui-base--hover, #022f40);\n --pfe-cta--aux: var(--pfe-theme--color--ui-base--text, #fff);\n --pfe-cta--aux--hover: var(--pfe-theme--color--ui-base--text--hover, #fff);\n}\n\n:host([priority=\"secondary\"]) ::slotted(a) {\n display: inline-block;\n padding: calc(var(--pfe-theme--container-padding, 1rem) * 0.5) calc(var(--pfe-theme--container-padding, 1rem) * 2);\n border-radius: calc(var(--pfe-theme--ui--border-radius, 2px) * 20);\n border: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-cta--main);\n text-decoration: none;\n line-height: 1.2;\n border-color: var(--pfe-cta--main);\n background: var(--pfe-cta--aux);\n color: var(--pfe-cta--main);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-cta--main);\n}\n\n:host([priority=\"secondary\"]) ::slotted(a)::after {\n display: none;\n}\n\n:host([priority=\"secondary\"]) ::slotted(a:hover),\n:host([priority=\"secondary\"]) ::slotted(a:focus) {\n border-color: var(--pfe-cta--main--hover);\n background: var(--pfe-cta--main--hover);\n color: var(--pfe-cta--aux--hover);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-cta--aux--hover);\n}\n\n:host([on=\"dark\"]) {\n --pfe-cta--main: var(--pfe-theme--color--text--on-dark, #fff);\n --pfe-cta--main--hover: var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);\n --pfe-cta--aux: transparent;\n --pfe-cta--aux--hover: transparent;\n}\n\n:host([on=\"dark\"][priority=\"primary\"]) {\n --pfe-cta--main: var(--pfe-theme--color--ui-accent--text, #fff);\n --pfe-cta--main--hover: var(--pfe-theme--color--ui-accent--text--hover, #fff);\n --pfe-cta--aux: var(--pfe-theme--color--ui-accent, #fe460d);\n --pfe-cta--aux--hover: var(--pfe-theme--color--ui-accent--hover, #a42701);\n}\n\n:host([on=\"dark\"][priority=\"secondary\"]) {\n --pfe-cta--main: var(--pfe-theme--color--ui-base--text, #fff);\n --pfe-cta--main--hover: var(--pfe-theme--color--ui-base--text--hover, #fff);\n --pfe-cta--aux: transparent;\n --pfe-cta--aux--hover: var(--pfe-theme--color--ui-base--hover, #022f40);\n}\n\n:host([color=\"base\"]),\n:host([color=\"base\"][on=\"dark\"]) {\n --pfe-cta--main: var(--pfe-theme--color--ui-base, #0477a4);\n --pfe-cta--main--hover: var(--pfe-theme--color--ui-base--hover, #022f40);\n --pfe-cta--aux: var(--pfe-theme--color--ui-base--text, #fff);\n --pfe-cta--aux--hover: var(--pfe-theme--color--ui-base--text--hover, #fff);\n}\n\n:host([color=\"complement\"]),\n:host([color=\"complement\"][on=\"dark\"]) {\n --pfe-cta--main: var(--pfe-theme--color--ui-complement, #464646);\n --pfe-cta--main--hover: var(--pfe-theme--color--ui-complement--hover, #131313);\n --pfe-cta--aux: var(--pfe-theme--color--ui-complement--text, #fff);\n --pfe-cta--aux--hover: var(--pfe-theme--color--ui-complement--text--hover, #fff);\n}\n\n:host([color=\"accent\"]),\n:host([color=\"accent\"][on=\"dark\"]) {\n --pfe-cta--main: var(--pfe-theme--color--ui-accent, #fe460d);\n --pfe-cta--main--hover: var(--pfe-theme--color--ui-accent--hover, #a42701);\n --pfe-cta--aux: var(--pfe-theme--color--ui-accent--text, #fff);\n --pfe-cta--aux--hover: var(--pfe-theme--color--ui-accent--text--hover, #fff);\n}\n","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text: $pfelements--gray-dark !default;\n$pfe-color--text--on-dark: $pfe-color--white !default;\n$pfe-color--text--on-saturated: $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link: #06c !default;\n$pfe-color--ui-link--visited: $pfelements--purple !default; // Was #7551a6\n$pfe-color--ui-link--hover: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-dark--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-saturated--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base: $pfelements--blue !default;\n$pfe-color--ui-base--hover: darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement: $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover: $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent: $pfelements--orange !default;\n$pfe-color--ui-accent--hover: darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text: $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover: $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest: $pfe-color--white !default;\n$pfe-color--surface--lightest--text: $pfe-color--text !default;\n$pfe-color--surface--lightest--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus: $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text: $pfe-color--text !default;\n$pfe-color--surface--lighter--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus: $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base: $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text: $pfe-color--text !default;\n$pfe-color--surface--base--link: #00538c !default; // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited: #7551a6 !default;\n$pfe-color--surface--base--link--hover: #00305b !default;\n$pfe-color--surface--base--link--focus: #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker: $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest: $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement: $pfelements--blue;\n$pfe-color--surface--complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent: $pfelements--orange;\n$pfe-color--surface--accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc\n$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7\n$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical: $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important: $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest: $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest: $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate: $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest: $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest: $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success: #2e7d32 !default;\n$pfe-color--feedback--success--lightest: $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest: #1b5e20 !default;\n\n$pfe-color--feedback--info: #0277bd !default;\n$pfe-color--feedback--info--lightest: $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest: #01579b !default;\n\n$pfe-color--feedback--default: $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest: $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest: $pfe-color--gray-800 !default;\n","@import \"../../pfe-sass/pfe-sass\";\n\n/// ===========================================================================\n/// Component Specific SASS Vars\n/// ===========================================================================\n\n$pfe-cta__arrow-size: 0.313em;\n\n/// ===========================================================================\n/// DEFAULT CTA\n/// ===========================================================================\n:host {\n --pfe-cta--main: #{pfe-color(ui-link)};\n --pfe-cta--main--hover: #{pfe-color(ui-link--hover)};\n --pfe-cta--main--focus: #{pfe-color(ui-link--focus)};\n --pfe-cta--main--visited: #{pfe-color(ui-link--visited)};\n --pfe-cta--aux: transparent;\n --pfe-cta--aux--hover: transparent;\n\n display: inline-block;\n font-weight: bold;\n\n ::slotted(a) {\n line-height: inherit;\n color: var(--pfe-cta--main);\n transition: all #{pfe-var(animation-timing)};\n\n &::after {\n display: block;\n margin-left: calc(#{pfe-var(content-spacer)} * 0.25); // 1/4 of the base `content-spacer`\n vertical-align: middle;\n @include pfe-arrow(right, var(--pfe-cta--main), $pfe-cta__arrow-size, $pfe-cta__arrow-size, true);\n }\n }\n\n // & ::slotted(a:visited) {\n // color: var(--pfe-cta--main--visited);\n // &::after {\n // @include pfe-arrow-color(var(--pfe-cta--main--visited));\n // }\n // }\n\n ::slotted(a:hover) {\n color: var(--pfe-cta--main--hover);\n\n &::after {\n @include pfe-arrow-color(var(--pfe-cta--main--hover));\n }\n }\n\n ::slotted(a:focus) {\n color: var(--pfe-cta--main--focus);\n\n &::after {\n @include pfe-arrow-color(var(--pfe-cta--main--focus));\n }\n }\n}\n\n\n/// ===========================================================================\n/// Styles for \"Button\" CTAs\n/// ===========================================================================\n:host([priority=\"primary\"]) {\n --pfe-cta--main: #{pfe-color(ui-accent)};\n --pfe-cta--main--hover: #{pfe-color(ui-accent--hover)};\n --pfe-cta--aux: #{pfe-color(ui-accent--text)};\n --pfe-cta--aux--hover: #{pfe-color(ui-accent--text--hover)};\n\n ::slotted(a) {\n display: inline-block;\n padding: calc(#{pfe-var(container-padding)} * 0.5) calc(#{pfe-var(container-padding)} * 2);\n border-radius: calc(#{pfe-var(ui--border-radius)} * 20);\n border: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} transparent;\n text-decoration: none;\n line-height: 1.2;\n\n border-color: var(--pfe-cta--main);\n background: var(--pfe-cta--main);\n color: var(--pfe-cta--aux);\n\n --pfe-broadcasted--color--ui-link: var(--pfe-cta--aux);\n\n &::after {\n display: none;\n }\n }\n\n ::slotted(a:hover),\n ::slotted(a:focus) { // Not sure we can lump these together\n border-color: var(--pfe-cta--main--hover);\n background: var(--pfe-cta--main--hover);\n color: var(--pfe-cta--aux--hover);\n\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-cta--aux--hover);\n }\n\n // & ::slotted(a:visited), TBD\n\n}\n\n:host([priority=\"secondary\"]) {\n --pfe-cta--main: #{pfe-color(ui-base)};\n --pfe-cta--main--hover: #{pfe-color(ui-base--hover)};\n --pfe-cta--aux: #{pfe-color(ui-base--text)};\n --pfe-cta--aux--hover: #{pfe-color(ui-base--text--hover)};\n\n ::slotted(a) {\n display: inline-block;\n padding: calc(#{pfe-var(container-padding)} * 0.5) calc(#{pfe-var(container-padding)} * 2);\n border-radius: calc(#{pfe-var(ui--border-radius)} * 20);\n border: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} var(--pfe-cta--main);\n text-decoration: none;\n line-height: 1.2;\n\n border-color: var(--pfe-cta--main);\n background: var(--pfe-cta--aux);\n color: var(--pfe-cta--main);\n\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-cta--main);\n\n &::after {\n display: none;\n }\n }\n\n ::slotted(a:hover), // Not sure we can lump these together\n ::slotted(a:focus) {\n border-color: var(--pfe-cta--main--hover);\n background: var(--pfe-cta--main--hover);\n color: var(--pfe-cta--aux--hover);\n \n --pfe-broadcasted--color--ui-link--hover: var(--pfe-cta--aux--hover);\n }\n\n // & ::slotted(a:visited), TBD\n}\n\n\n/// ===========================================================================\n/// ON DARK\n/// ===========================================================================\n:host([on=\"dark\"]) {\n --pfe-cta--main: #{pfe-color(text--on-dark)};\n --pfe-cta--main--hover: #{pfe-color(ui-link--on-dark--hover)};\n --pfe-cta--aux: transparent;\n --pfe-cta--aux--hover: transparent;\n}\n\n:host([on=\"dark\"][priority=\"primary\"]) {\n --pfe-cta--main: #{pfe-color(ui-accent--text)};\n --pfe-cta--main--hover: #{pfe-color(ui-accent--text--hover)};\n --pfe-cta--aux: #{pfe-color(ui-accent)};\n --pfe-cta--aux--hover: #{pfe-color(ui-accent--hover)};\n}\n\n:host([on=\"dark\"][priority=\"secondary\"]) {\n --pfe-cta--main: #{pfe-color(ui-base--text)};\n --pfe-cta--main--hover: #{pfe-color(ui-base--text--hover)};\n --pfe-cta--aux: transparent;\n --pfe-cta--aux--hover: #{pfe-color(ui-base--hover)};\n}\n\n\n/// ===========================================================================\n/// COLOR OVERRIDE: BASE\n/// ===========================================================================\n\n:host([color=\"base\"]),\n:host([color=\"base\"][on=\"dark\"]) {\n --pfe-cta--main: #{pfe-color(ui-base)};\n --pfe-cta--main--hover: #{pfe-color(ui-base--hover)};\n --pfe-cta--aux: #{pfe-color(ui-base--text)};\n --pfe-cta--aux--hover: #{pfe-color(ui-base--text--hover)};\n}\n\n\n/// ===========================================================================\n/// COLOR OVERRIDE: COMPLEMENT\n/// ===========================================================================\n\n:host([color=\"complement\"]),\n:host([color=\"complement\"][on=\"dark\"]) {\n --pfe-cta--main: #{pfe-color(ui-complement)};\n --pfe-cta--main--hover: #{pfe-color(ui-complement--hover)};\n --pfe-cta--aux: #{pfe-color(ui-complement--text)};\n --pfe-cta--aux--hover: #{pfe-color(ui-complement--text--hover)};\n}\n\n\n/// ===========================================================================\n/// COLOR OVERRIDE: ACCENT\n/// ===========================================================================\n:host([color=\"accent\"]),\n:host([color=\"accent\"][on=\"dark\"]) {\n --pfe-cta--main: #{pfe-color(ui-accent)};\n --pfe-cta--main--hover: #{pfe-color(ui-accent--hover)};\n --pfe-cta--aux: #{pfe-color(ui-accent--text)};\n --pfe-cta--aux--hover: #{pfe-color(ui-accent--text--hover)};\n}\n","// $boxSize = any box-sizing property, default is border-box\n@mixin pfe-box-sizing($boxSize: border-box) {\n *, *::before, *::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-reset-list() {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n@mixin pfe-reset-box() {\n margin: 0;\n padding: 0;\n}\n\n@mixin pfe-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/// ===========================================================================\n/// Theme Color Vars - use with on=\"dark\" to affect light DOM\n/// ===========================================================================\n\n@mixin pfe-theme($theme) {\n // GENERAL CONTEXT-BASED UPDATES, ON=\"DARK\"\n @if $theme == dark {\n --pfe-broadcasted--color--text: #{pfe-color(text--on-dark)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(ui-link--on-dark)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--on-dark--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--on-dark--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--on-dark--focus)};\n }\n @else if $theme == light {\n --pfe-broadcasted--color--text: #{pfe-color(text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(ui-link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--focus)};\n }\n // MORE SPECIFIC COLOR BASED UPDATES, COLOR=\"DARKER\"\n @else if $theme == darker {\n --pfe-broadcasted--color--text: #{pfe-color(surface--darker--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darker--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darker--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darker--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darker--link--focus)};\n }\n @else if $theme == darkest {\n --pfe-broadcasted--color--text: #{pfe-color(surface--darkest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darkest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darkest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darkest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darkest--link--focus)};\n }\n @else if $theme == accent {\n --pfe-broadcasted--color--text: #{pfe-color(surface--accent--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--accent--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--accent--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--accent--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--accent--link--focus)};\n }\n @else if $theme == complement {\n --pfe-broadcasted--color--text: #{pfe-color(surface--complement--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--complement--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--complement--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--complement--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--complement--link--focus)};\n }\n\n @else if $theme == lighter {\n --pfe-broadcasted--color--text: #{pfe-color(surface--lighter--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lighter--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lighter--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lighter--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lighter--link--focus)};\n }\n @else if $theme == lightest {\n --pfe-broadcasted--color--text: #{pfe-color(surface--lightest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lightest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lightest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lightest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lightest--link--focus)};\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// scss-lint:disable ImportantRule\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// scss-lint:enable ImportantRule\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 for building slot selectors\n@mixin pfe-slot($slot-name, $selector: \"\") {\n // This logic makes it much easier to style default slots in a loop\n // with named slots\n @if $slot-name != default {\n ::slotted([slot=\"#{$slot-name}\"]#{$selector}) {\n @content;\n }\n }\n @else {\n ::slotted(*) {\n @content;\n }\n }\n}\n\n/// ===========================================================================\n/// Accordion Specific SASS Vars\n/// ===========================================================================\n\n$pfe-expand_button--LineHeight: 1.5;\n$pfe-expand_button--padding: #{pfe-var(container-spacer)};\n$pfe-expand_button--padding--factor: .75;\n$pfe-expand_button--padding--wide: calc(#{$pfe-expand_button--padding} * 1.5);\n\n$pfe-expand_chevron--size: .4em;\n$pfe-expand_chevron--weight: .1em;\n$pfe-expand_chevron--padding: 3em;\n$pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe-expand_chevron--size / 2};\n\n@mixin pfe-accordion-header {\n display: block;\n > * {\n margin: 0;\n }\n}\n\n@mixin pfe-trigger-button($align: left) {\n -webkit-appearance: button;\n margin: 0;\n width: 100%;\n height: auto;\n font-family: inherit;\n font-weight: #{pfe-var(font-weight--bold)};\n text-align: left;\n cursor: pointer;\n z-index: 1;\n position: relative;\n\n font-size: calc(#{pfe-var(font-size)} * 1.1);\n line-height: #{pfe-var(line-height)};\n\n color: #{pfe-local(aux)};\n background-color: #{pfe-local(main)};\n border-left: #{pfe-local(BorderLeft)};\n border-right: #{pfe-local(BorderRight)};\n border-bottom: #{pfe-local(BorderBottom)};\n border-top: 0;\n\n &:hover {\n outline: none;\n border-left-color: #{pfe-local(BorderLeftColor--focus)};\n z-index: 2;\n }\n\n &:focus {\n outline: none;\n z-index: 2;\n text-decoration: underline;\n text-decoration-color: #{pfe-color(surface--border--darker)};\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n @if $align == right {\n padding: #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} 50px;\n } @else {\n padding: #{$pfe-expand_button--padding} 50px #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};\n }\n}\n\n@mixin pfe-trigger-button-last($theme: light) {\n border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n // @TODO Support differences based on theme\n}\n\n@mixin pfe-trigger-button-first($theme: light) {\n border-top: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n // @TODO Support differences based on theme\n}\n\n@mixin pfe-trigger-expanded {\n position: relative;\n display: block;\n border-bottom: 0;\n}\n\n@mixin pfe-trigger-color($component-name, $theme: light) {\n @if $theme == dark {\n --pfe-#{$component-name}--main: transparent;\n --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)};\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};\n }\n @else {\n --pfe-#{$component-name}--main: transparent;\n --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)};\n\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} transparent;\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n --pfe-#{$component-name}--BorderBottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest--link)};\n }\n}\n\n@mixin pfe-trigger-color-expanded($component-name, $theme: light) {\n @if $theme == dark {\n --pfe-#{$component-name}--main: #{pfe-color(surface--darker)};\n --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)};\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};\n\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};\n }\n @else {\n --pfe-#{$component-name}--main: #{pfe-color(surface--lightest)};\n --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)};\n --pfe-#{$component-name}--focus: #{pfe-color(surface--lightest--link)};\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--lightest--link)};\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n }\n}\n\n/// ===========================================================================\n/// Accordion chevrons\n/// ===========================================================================\n\n@mixin pfe-chevron-expanded($state: true, $position: after) {\n content: \"\";\n position: absolute;\n top: calc((#{pfe-var(container-spacer)} * #{$pfe-expand_button--padding--factor}) + #{$pfe-expand_chevron--placement} );\n display: block;\n border-style: #{pfe-var(surface--border-style)};\n height: #{$pfe-expand_chevron--size};\n width: #{$pfe-expand_chevron--size};\n text-align: center;\n transition: transform 0.15s;\n @if $state {\n border-width: #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0 0;\n border-bottom: 0;\n transform: rotate(-45deg);\n @if $position == before {\n left: #{$pfe-expand_button--padding--wide};\n }\n @else {\n right: #{$pfe-expand_button--padding--wide};\n }\n }\n @else {\n border-width: 0 #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0;\n transform: rotate(45deg);\n @if $position == before {\n left: #{$pfe-expand_button--padding--wide};\n }\n @else {\n right: #{$pfe-expand_button--padding--wide};\n }\n }\n}\n\n/// ===========================================================================\n/// Accordion panel\n/// ===========================================================================\n\n@mixin pfe-container {\n position: relative;\n display: block;\n width: 100%;\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@mixin pfe-accordion-panel {\n display: none;\n overflow: hidden;\n will-change: height;\n border-color: transparent;\n}\n\n@mixin pfe-accordion-panel-expanded {\n display: block;\n position: relative;\n}\n\n@mixin pfe-accordion-panel-expanded-style($theme: light) {\n border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n border-left: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} transparent;\n @if $theme == dark {\n box-shadow: none;\n background-color: #{pfe-color(surface--darker)};\n border-left-color: #{pfe-color(surface--darkest--text)};\n border-right-color: #{pfe-color(surface--darkest--text)};\n }\n @else {\n box-shadow: 0 5px #{pfe-var(surface--border-width--heavy)} rgba(140, 140, 140, 0.35);\n border-left-color: #{pfe-color(surface--lightest--link)};\n background-color: #{pfe-color(surface--lightest)};\n border-right-color: #{pfe-color(surface--border--lightest)};\n border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n }\n}\n\n@mixin pfe-accordion-panel-container-inset($align: left) {\n box-sizing: border-box;\n width: 100%;\n\n @if $align == left {\n padding: 0 #{$pfe-expand_chevron--padding} #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};\n }\n @else {\n padding: 0 #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} #{$pfe-expand_chevron--padding};\n }\n}\n"]} \ No newline at end of file diff --git a/elements/pfe-cta/pfe-cta.css.min.map b/elements/pfe-cta/pfe-cta.css.min.map new file mode 100644 index 0000000000..e69de29bb2 diff --git a/elements/pfe-cta/pfe-cta.js b/elements/pfe-cta/pfe-cta.js new file mode 100644 index 0000000000..d5de7c3c57 --- /dev/null +++ b/elements/pfe-cta/pfe-cta.js @@ -0,0 +1,72 @@ +import PFElement from '../pfelement/pfelement.js'; + +/* + * @license + * Copyright 2019 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 PfeCta extends PFElement { + + get html() { + return ``; + } + static get tag() { + return "pfe-cta"; + } + + get styleUrl() { + return "pfe-cta.scss"; + } + + get templateUrl() { + return "pfe-cta.html"; + } + + constructor() { + super(PfeCta); + } + + connectedCallback() { + super.connectedCallback(); + + const firstChild = this.children[0]; + + if (!firstChild) { + console.warn( + "The first child in the light DOM must be an anchor tag ()" + ); + } else if (firstChild && firstChild.tagName.toLowerCase() !== "a") { + console.warn( + "The first child in the light DOM must be an anchor tag ()" + ); + } else { + this.link = this.querySelector("a"); + } + } + + disconnectedCallback() {} +} + +PFElement.create(PfeCta); + +export default PfeCta; +//# sourceMappingURL=pfe-cta.js.map diff --git a/elements/pfe-cta/pfe-cta.js.map b/elements/pfe-cta/pfe-cta.js.map new file mode 100644 index 0000000000..7c2716999f --- /dev/null +++ b/elements/pfe-cta/pfe-cta.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-cta.js","sources":["pfe-cta.js"],"sourcesContent":["/*\n * @license\n * Copyright 2019 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/pfelement.js\";\n\nclass PfeCta extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-cta\";\n }\n\n get styleUrl() {\n return \"pfe-cta.scss\";\n }\n\n get templateUrl() {\n return \"pfe-cta.html\";\n }\n\n constructor() {\n super(PfeCta);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n const firstChild = this.children[0];\n\n if (!firstChild) {\n console.warn(\n \"The first child in the light DOM must be an anchor tag ()\"\n );\n } else if (firstChild && firstChild.tagName.toLowerCase() !== \"a\") {\n console.warn(\n \"The first child in the light DOM must be an anchor tag ()\"\n );\n } else {\n this.link = this.querySelector(\"a\");\n }\n }\n\n disconnectedCallback() {}\n}\n\nPFElement.create(PfeCta);\n\nexport default PfeCta;\n"],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;;;;;;;;;;;AAuBA,AAEA;AACA,MAAM,MAAM,SAAS,SAAS,CAAC;;EAE7B,IAAI,IAAI,GAAG;IACT,OAAO,CAAC,inLAAinL,CAAC,CAAC;GAC5nL;EACD,WAAW,GAAG,GAAG;IACf,OAAO,SAAS,CAAC;GAClB;;EAED,IAAI,QAAQ,GAAG;IACb,OAAO,cAAc,CAAC;GACvB;;EAED,IAAI,WAAW,GAAG;IAChB,OAAO,cAAc,CAAC;GACvB;;EAED,WAAW,GAAG;IACZ,KAAK,CAAC,MAAM,CAAC,CAAC;GACf;;EAED,iBAAiB,GAAG;IAClB,KAAK,CAAC,iBAAiB,EAAE,CAAC;;IAE1B,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;;IAEpC,IAAI,CAAC,UAAU,EAAE;MACf,OAAO,CAAC,IAAI;QACV,8DAA8D;OAC/D,CAAC;KACH,MAAM,IAAI,UAAU,IAAI,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,GAAG,EAAE;MACjE,OAAO,CAAC,IAAI;QACV,8DAA8D;OAC/D,CAAC;KACH,MAAM;MACL,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;KACrC;GACF;;EAED,oBAAoB,GAAG,EAAE;CAC1B;;AAED,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;;;;"} \ No newline at end of file diff --git a/elements/pfe-cta/pfe-cta.min.css b/elements/pfe-cta/pfe-cta.min.css new file mode 100644 index 0000000000..70bfe94952 --- /dev/null +++ b/elements/pfe-cta/pfe-cta.min.css @@ -0,0 +1 @@ +:host{--pfe-cta--main:var(--pfe-theme--color--ui-link, #06c);--pfe-cta--main--hover:var(--pfe-theme--color--ui-link--hover, #003366);--pfe-cta--main--focus:var(--pfe-theme--color--ui-link--focus, #003366);--pfe-cta--main--visited:var(--pfe-theme--color--ui-link--visited, rebeccapurple);--pfe-cta--aux:transparent;--pfe-cta--aux--hover:transparent;display:inline-block;font-weight:700}:host ::slotted(a){line-height:inherit;color:var(--pfe-cta--main);-webkit-transition:all cubic-bezier(.465,.183,.153,.946);transition:all cubic-bezier(.465,.183,.153,.946);-webkit-transition:all var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition:all var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946))}:host ::slotted(a)::after{display:block;margin-left:calc(1rem * .25);margin-left:calc(var(--pfe-theme--content-spacer,1rem) * .25);vertical-align:middle;border-style:solid;border-style:var(--pfe-theme--surface--border-style,solid);border-width:.313em .313em 0;border-color:transparent;border-top-color:var(--pfe-cta--main);-webkit-transform:rotate(-90deg);transform:rotate(-90deg);display:inline-block;content:""}:host ::slotted(a:hover){color:var(--pfe-cta--main--hover)}:host ::slotted(a:hover)::after{border-top-color:var(--pfe-cta--main--hover)}:host ::slotted(a:focus){color:var(--pfe-cta--main--focus)}:host ::slotted(a:focus)::after{border-top-color:var(--pfe-cta--main--focus)}:host([priority=primary]){--pfe-cta--main:var(--pfe-theme--color--ui-accent, #fe460d);--pfe-cta--main--hover:var(--pfe-theme--color--ui-accent--hover, #a42701);--pfe-cta--aux:var(--pfe-theme--color--ui-accent--text, #fff);--pfe-cta--aux--hover:var(--pfe-theme--color--ui-accent--text--hover, #fff)}:host([priority=primary]) ::slotted(a){display:inline-block;padding:calc(1rem * .5) calc(1rem * 2);padding:calc(var(--pfe-theme--container-padding,1rem) * .5) calc(var(--pfe-theme--container-padding,1rem) * 2);border-radius:calc(2px * 20);border-radius:calc(var(--pfe-theme--ui--border-radius,2px) * 20);border:1px solid transparent;border:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) transparent;text-decoration:none;line-height:1.2;border-color:var(--pfe-cta--main);background:var(--pfe-cta--main);color:var(--pfe-cta--aux);--pfe-broadcasted--color--ui-link:var(--pfe-cta--aux)}:host([priority=primary]) ::slotted(a)::after{display:none}:host([priority=primary]) ::slotted(a:focus),:host([priority=primary]) ::slotted(a:hover){border-color:var(--pfe-cta--main--hover);background:var(--pfe-cta--main--hover);color:var(--pfe-cta--aux--hover);--pfe-broadcasted--color--ui-link--hover:var(--pfe-cta--aux--hover)}:host([priority=secondary]){--pfe-cta--main:var(--pfe-theme--color--ui-base, #0477a4);--pfe-cta--main--hover:var(--pfe-theme--color--ui-base--hover, #022f40);--pfe-cta--aux:var(--pfe-theme--color--ui-base--text, #fff);--pfe-cta--aux--hover:var(--pfe-theme--color--ui-base--text--hover, #fff)}:host([priority=secondary]) ::slotted(a){display:inline-block;padding:calc(1rem * .5) calc(1rem * 2);padding:calc(var(--pfe-theme--container-padding,1rem) * .5) calc(var(--pfe-theme--container-padding,1rem) * 2);border-radius:calc(2px * 20);border-radius:calc(var(--pfe-theme--ui--border-radius,2px) * 20);border:1px solid var(--pfe-cta--main);border:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-cta--main);text-decoration:none;line-height:1.2;border-color:var(--pfe-cta--main);background:var(--pfe-cta--aux);color:var(--pfe-cta--main);--pfe-broadcasted--color--ui-link--hover:var(--pfe-cta--main)}:host([priority=secondary]) ::slotted(a)::after{display:none}:host([priority=secondary]) ::slotted(a:focus),:host([priority=secondary]) ::slotted(a:hover){border-color:var(--pfe-cta--main--hover);background:var(--pfe-cta--main--hover);color:var(--pfe-cta--aux--hover);--pfe-broadcasted--color--ui-link--hover:var(--pfe-cta--aux--hover)}:host([on=dark]){--pfe-cta--main:var(--pfe-theme--color--text--on-dark, #fff);--pfe-cta--main--hover:var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);--pfe-cta--aux:transparent;--pfe-cta--aux--hover:transparent}:host([on=dark][priority=primary]){--pfe-cta--main:var(--pfe-theme--color--ui-accent--text, #fff);--pfe-cta--main--hover:var(--pfe-theme--color--ui-accent--text--hover, #fff);--pfe-cta--aux:var(--pfe-theme--color--ui-accent, #fe460d);--pfe-cta--aux--hover:var(--pfe-theme--color--ui-accent--hover, #a42701)}:host([on=dark][priority=secondary]){--pfe-cta--main:var(--pfe-theme--color--ui-base--text, #fff);--pfe-cta--main--hover:var(--pfe-theme--color--ui-base--text--hover, #fff);--pfe-cta--aux:transparent;--pfe-cta--aux--hover:var(--pfe-theme--color--ui-base--hover, #022f40)}:host([color=base]),:host([color=base][on=dark]){--pfe-cta--main:var(--pfe-theme--color--ui-base, #0477a4);--pfe-cta--main--hover:var(--pfe-theme--color--ui-base--hover, #022f40);--pfe-cta--aux:var(--pfe-theme--color--ui-base--text, #fff);--pfe-cta--aux--hover:var(--pfe-theme--color--ui-base--text--hover, #fff)}:host([color=complement]),:host([color=complement][on=dark]){--pfe-cta--main:var(--pfe-theme--color--ui-complement, #464646);--pfe-cta--main--hover:var(--pfe-theme--color--ui-complement--hover, #131313);--pfe-cta--aux:var(--pfe-theme--color--ui-complement--text, #fff);--pfe-cta--aux--hover:var(--pfe-theme--color--ui-complement--text--hover, #fff)}:host([color=accent]),:host([color=accent][on=dark]){--pfe-cta--main:var(--pfe-theme--color--ui-accent, #fe460d);--pfe-cta--main--hover:var(--pfe-theme--color--ui-accent--hover, #a42701);--pfe-cta--aux:var(--pfe-theme--color--ui-accent--text, #fff);--pfe-cta--aux--hover:var(--pfe-theme--color--ui-accent--text--hover, #fff)} \ No newline at end of file diff --git a/elements/pfe-cta/pfe-cta.min.js b/elements/pfe-cta/pfe-cta.min.js new file mode 100644 index 0000000000..55985a089f --- /dev/null +++ b/elements/pfe-cta/pfe-cta.min.js @@ -0,0 +1,25 @@ +import e from"../pfelement/pfelement.min.js"; +/* + * @license + * Copyright 2019 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{get html(){return''}static get tag(){return"pfe-cta"}get styleUrl(){return"pfe-cta.scss"}get templateUrl(){return"pfe-cta.html"}constructor(){super(a)}connectedCallback(){super.connectedCallback();const e=this.children[0];e?e&&"a"!==e.tagName.toLowerCase()?console.warn("The first child in the light DOM must be an anchor tag ()"):this.link=this.querySelector("a"):console.warn("The first child in the light DOM must be an anchor tag ()")}disconnectedCallback(){}}e.create(a);export default a; +//# sourceMappingURL=pfe-cta.min.js.map diff --git a/elements/pfe-cta/pfe-cta.min.js.map b/elements/pfe-cta/pfe-cta.min.js.map new file mode 100644 index 0000000000..27ee974fd0 --- /dev/null +++ b/elements/pfe-cta/pfe-cta.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-cta.min.js","sources":["pfe-cta.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 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\nclass PfeCta extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-cta\";\n }\n\n get styleUrl() {\n return \"pfe-cta.scss\";\n }\n\n get templateUrl() {\n return \"pfe-cta.html\";\n }\n\n constructor() {\n super(PfeCta);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n const firstChild = this.children[0];\n\n if (!firstChild) {\n console.warn(\n \"The first child in the light DOM must be an anchor tag ()\"\n );\n } else if (firstChild && firstChild.tagName.toLowerCase() !== \"a\") {\n console.warn(\n \"The first child in the light DOM must be an anchor tag ()\"\n );\n } else {\n this.link = this.querySelector(\"a\");\n }\n }\n\n disconnectedCallback() {}\n}\n\nPFElement.create(PfeCta);\n\nexport default PfeCta;\n//# sourceMappingURL=pfe-cta.js.map\n"],"names":["PfeCta","PFElement","html","tag","styleUrl","templateUrl","[object Object]","super","connectedCallback","firstChild","this","children","tagName","toLowerCase","console","warn","link","querySelector","create"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EA0BA,MAAMA,UAAeC,EAEnBC,WACE,MAAO,onLAETC,iBACE,MAAO,UAGTC,eACE,MAAO,eAGTC,kBACE,MAAO,eAGTC,cACEC,MAAMP,GAGRM,oBACEC,MAAMC,oBAEN,MAAMC,EAAaC,KAAKC,SAAS,GAE5BF,EAIMA,GAAmD,MAArCA,EAAWG,QAAQC,cAC1CC,QAAQC,KACN,gEAGFL,KAAKM,KAAON,KAAKO,cAAc,KAR/BH,QAAQC,KACN,gEAWNT,yBAGFL,EAAUiB,OAAOlB"} \ No newline at end of file diff --git a/elements/pfe-cta/pfe-cta.umd.js b/elements/pfe-cta/pfe-cta.umd.js new file mode 100644 index 0000000000..31bb2641c1 --- /dev/null +++ b/elements/pfe-cta/pfe-cta.umd.js @@ -0,0 +1,162 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('../pfelement/pfelement.umd')) : + typeof define === 'function' && define.amd ? define(['../pfelement/pfelement.umd'], factory) : + (global.PfeCta = factory(global.PFElement)); +}(this, (function (PFElement) { 'use strict'; + + PFElement = PFElement && PFElement.hasOwnProperty('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; + }; + + /* + * @license + * Copyright 2019 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 PfeCta = function (_PFElement) { + inherits(PfeCta, _PFElement); + createClass(PfeCta, [{ + key: "html", + get: function get$$1() { + return ""; + } + }, { + key: "styleUrl", + get: function get$$1() { + return "pfe-cta.scss"; + } + }, { + key: "templateUrl", + get: function get$$1() { + return "pfe-cta.html"; + } + }], [{ + key: "tag", + get: function get$$1() { + return "pfe-cta"; + } + }]); + + function PfeCta() { + classCallCheck(this, PfeCta); + return possibleConstructorReturn(this, (PfeCta.__proto__ || Object.getPrototypeOf(PfeCta)).call(this, PfeCta)); + } + + createClass(PfeCta, [{ + key: "connectedCallback", + value: function connectedCallback() { + get(PfeCta.prototype.__proto__ || Object.getPrototypeOf(PfeCta.prototype), "connectedCallback", this).call(this); + + var firstChild = this.children[0]; + + if (!firstChild) { + console.warn("The first child in the light DOM must be an anchor tag ()"); + } else if (firstChild && firstChild.tagName.toLowerCase() !== "a") { + console.warn("The first child in the light DOM must be an anchor tag ()"); + } else { + this.link = this.querySelector("a"); + } + } + }, { + key: "disconnectedCallback", + value: function disconnectedCallback() {} + }]); + return PfeCta; + }(PFElement); + + PFElement.create(PfeCta); + + return PfeCta; + +}))); +//# sourceMappingURL=pfe-cta.umd.js.map diff --git a/elements/pfe-cta/pfe-cta.umd.js.map b/elements/pfe-cta/pfe-cta.umd.js.map new file mode 100644 index 0000000000..8952336ae5 --- /dev/null +++ b/elements/pfe-cta/pfe-cta.umd.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-cta.umd.js","sources":["pfe-cta.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 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\nclass PfeCta extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-cta\";\n }\n\n get styleUrl() {\n return \"pfe-cta.scss\";\n }\n\n get templateUrl() {\n return \"pfe-cta.html\";\n }\n\n constructor() {\n super(PfeCta);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n const firstChild = this.children[0];\n\n if (!firstChild) {\n console.warn(\n \"The first child in the light DOM must be an anchor tag ()\"\n );\n } else if (firstChild && firstChild.tagName.toLowerCase() !== \"a\") {\n console.warn(\n \"The first child in the light DOM must be an anchor tag ()\"\n );\n } else {\n this.link = this.querySelector(\"a\");\n }\n }\n\n disconnectedCallback() {}\n}\n\nPFElement.create(PfeCta);\n\nexport default PfeCta;\n//# sourceMappingURL=pfe-cta.js.map\n"],"names":["PfeCta","firstChild","children","console","warn","tagName","toLowerCase","link","querySelector","PFElement","create"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAEA;;;;;;;;;;;;;;;;;;;;;;;;MAwBMA;;;;6BAEO;EACT;EACD;;;6BAKc;EACb,aAAO,cAAP;EACD;;;6BAEiB;EAChB,aAAO,cAAP;EACD;;;6BAVgB;EACf,aAAO,SAAP;EACD;;;EAUD,oBAAc;EAAA;EAAA,0GACNA,MADM;EAEb;;;;0CAEmB;EAClB;;EAEA,UAAMC,aAAa,KAAKC,QAAL,CAAc,CAAd,CAAnB;;EAEA,UAAI,CAACD,UAAL,EAAiB;EACfE,gBAAQC,IAAR,CACE,8DADF;EAGD,OAJD,MAIO,IAAIH,cAAcA,WAAWI,OAAX,CAAmBC,WAAnB,OAAqC,GAAvD,EAA4D;EACjEH,gBAAQC,IAAR,CACE,8DADF;EAGD,OAJM,MAIA;EACL,aAAKG,IAAL,GAAY,KAAKC,aAAL,CAAmB,GAAnB,CAAZ;EACD;EACF;;;6CAEsB;;;IAvCJC;;EA0CrBA,UAAUC,MAAV,CAAiBV,MAAjB;;;;;;;;"} \ No newline at end of file diff --git a/elements/pfe-cta/pfe-cta.umd.min.js b/elements/pfe-cta/pfe-cta.umd.min.js new file mode 100644 index 0000000000..d354f2e9b3 --- /dev/null +++ b/elements/pfe-cta/pfe-cta.umd.min.js @@ -0,0 +1,2 @@ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("../pfelement/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min"],t):e.PfeCta=t(e.PFElement)}(this,function(r){"use strict";r=r&&r.hasOwnProperty("default")?r.default:r;var a=function(){function a(e,t){for(var r=0;r:host{--pfe-cta--main:var(--pfe-theme--color--ui-link, #06c);--pfe-cta--main--hover:var(--pfe-theme--color--ui-link--hover, #003366);--pfe-cta--main--focus:var(--pfe-theme--color--ui-link--focus, #003366);--pfe-cta--main--visited:var(--pfe-theme--color--ui-link--visited, rebeccapurple);--pfe-cta--aux:transparent;--pfe-cta--aux--hover:transparent;display:inline-block;font-weight:700}:host ::slotted(a){line-height:inherit;color:var(--pfe-cta--main);-webkit-transition:all cubic-bezier(.465,.183,.153,.946);transition:all cubic-bezier(.465,.183,.153,.946);-webkit-transition:all var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition:all var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946))}:host ::slotted(a)::after{display:block;margin-left:calc(1rem * .25);margin-left:calc(var(--pfe-theme--content-spacer,1rem) * .25);vertical-align:middle;border-style:solid;border-style:var(--pfe-theme--surface--border-style,solid);border-width:.313em .313em 0;border-color:transparent;border-top-color:var(--pfe-cta--main);-webkit-transform:rotate(-90deg);transform:rotate(-90deg);display:inline-block;content:""}:host ::slotted(a:hover){color:var(--pfe-cta--main--hover)}:host ::slotted(a:hover)::after{border-top-color:var(--pfe-cta--main--hover)}:host ::slotted(a:focus){color:var(--pfe-cta--main--focus)}:host ::slotted(a:focus)::after{border-top-color:var(--pfe-cta--main--focus)}:host([priority=primary]){--pfe-cta--main:var(--pfe-theme--color--ui-accent, #fe460d);--pfe-cta--main--hover:var(--pfe-theme--color--ui-accent--hover, #a42701);--pfe-cta--aux:var(--pfe-theme--color--ui-accent--text, #fff);--pfe-cta--aux--hover:var(--pfe-theme--color--ui-accent--text--hover, #fff)}:host([priority=primary]) ::slotted(a){display:inline-block;padding:calc(1rem * .5) calc(1rem * 2);padding:calc(var(--pfe-theme--container-padding,1rem) * .5) calc(var(--pfe-theme--container-padding,1rem) * 2);border-radius:calc(2px * 20);border-radius:calc(var(--pfe-theme--ui--border-radius,2px) * 20);border:1px solid transparent;border:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) transparent;text-decoration:none;line-height:1.2;border-color:var(--pfe-cta--main);background:var(--pfe-cta--main);color:var(--pfe-cta--aux);--pfe-broadcasted--color--ui-link:var(--pfe-cta--aux)}:host([priority=primary]) ::slotted(a)::after{display:none}:host([priority=primary]) ::slotted(a:focus),:host([priority=primary]) ::slotted(a:hover){border-color:var(--pfe-cta--main--hover);background:var(--pfe-cta--main--hover);color:var(--pfe-cta--aux--hover);--pfe-broadcasted--color--ui-link--hover:var(--pfe-cta--aux--hover)}:host([priority=secondary]){--pfe-cta--main:var(--pfe-theme--color--ui-base, #0477a4);--pfe-cta--main--hover:var(--pfe-theme--color--ui-base--hover, #022f40);--pfe-cta--aux:var(--pfe-theme--color--ui-base--text, #fff);--pfe-cta--aux--hover:var(--pfe-theme--color--ui-base--text--hover, #fff)}:host([priority=secondary]) ::slotted(a){display:inline-block;padding:calc(1rem * .5) calc(1rem * 2);padding:calc(var(--pfe-theme--container-padding,1rem) * .5) calc(var(--pfe-theme--container-padding,1rem) * 2);border-radius:calc(2px * 20);border-radius:calc(var(--pfe-theme--ui--border-radius,2px) * 20);border:1px solid var(--pfe-cta--main);border:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-cta--main);text-decoration:none;line-height:1.2;border-color:var(--pfe-cta--main);background:var(--pfe-cta--aux);color:var(--pfe-cta--main);--pfe-broadcasted--color--ui-link--hover:var(--pfe-cta--main)}:host([priority=secondary]) ::slotted(a)::after{display:none}:host([priority=secondary]) ::slotted(a:focus),:host([priority=secondary]) ::slotted(a:hover){border-color:var(--pfe-cta--main--hover);background:var(--pfe-cta--main--hover);color:var(--pfe-cta--aux--hover);--pfe-broadcasted--color--ui-link--hover:var(--pfe-cta--aux--hover)}:host([on=dark]){--pfe-cta--main:var(--pfe-theme--color--text--on-dark, #fff);--pfe-cta--main--hover:var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);--pfe-cta--aux:transparent;--pfe-cta--aux--hover:transparent}:host([on=dark][priority=primary]){--pfe-cta--main:var(--pfe-theme--color--ui-accent--text, #fff);--pfe-cta--main--hover:var(--pfe-theme--color--ui-accent--text--hover, #fff);--pfe-cta--aux:var(--pfe-theme--color--ui-accent, #fe460d);--pfe-cta--aux--hover:var(--pfe-theme--color--ui-accent--hover, #a42701)}:host([on=dark][priority=secondary]){--pfe-cta--main:var(--pfe-theme--color--ui-base--text, #fff);--pfe-cta--main--hover:var(--pfe-theme--color--ui-base--text--hover, #fff);--pfe-cta--aux:transparent;--pfe-cta--aux--hover:var(--pfe-theme--color--ui-base--hover, #022f40)}:host([color=base]),:host([color=base][on=dark]){--pfe-cta--main:var(--pfe-theme--color--ui-base, #0477a4);--pfe-cta--main--hover:var(--pfe-theme--color--ui-base--hover, #022f40);--pfe-cta--aux:var(--pfe-theme--color--ui-base--text, #fff);--pfe-cta--aux--hover:var(--pfe-theme--color--ui-base--text--hover, #fff)}:host([color=complement]),:host([color=complement][on=dark]){--pfe-cta--main:var(--pfe-theme--color--ui-complement, #464646);--pfe-cta--main--hover:var(--pfe-theme--color--ui-complement--hover, #131313);--pfe-cta--aux:var(--pfe-theme--color--ui-complement--text, #fff);--pfe-cta--aux--hover:var(--pfe-theme--color--ui-complement--text--hover, #fff)}:host([color=accent]),:host([color=accent][on=dark]){--pfe-cta--main:var(--pfe-theme--color--ui-accent, #fe460d);--pfe-cta--main--hover:var(--pfe-theme--color--ui-accent--hover, #a42701);--pfe-cta--aux:var(--pfe-theme--color--ui-accent--text, #fff);--pfe-cta--aux--hover:var(--pfe-theme--color--ui-accent--text--hover, #fff)}'}},{key:"styleUrl",get:function(){return"pfe-cta.scss"}},{key:"templateUrl",get:function(){return"pfe-cta.html"}}],[{key:"tag",get:function(){return"pfe-cta"}}]),a(t,[{key:"connectedCallback",value:function(){(function e(t,r,a){null===t&&(t=Function.prototype);var o=Object.getOwnPropertyDescriptor(t,r);if(void 0===o){var c=Object.getPrototypeOf(t);return null===c?void 0:e(c,r,a)}if("value"in o)return o.value;var i=o.get;return void 0!==i?i.call(a):void 0})(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"connectedCallback",this).call(this);var e=this.children[0];e?e&&"a"!==e.tagName.toLowerCase()?console.warn("The first child in the light DOM must be an anchor tag ()"):this.link=this.querySelector("a"):console.warn("The first child in the light DOM must be an anchor tag ()")}},{key:"disconnectedCallback",value:function(){}}]),t}();return r.create(e),e}); +//# sourceMappingURL=pfe-cta.umd.min.js.map diff --git a/elements/pfe-cta/pfe-cta.umd.min.js.map b/elements/pfe-cta/pfe-cta.umd.min.js.map new file mode 100644 index 0000000000..de5a74f97a --- /dev/null +++ b/elements/pfe-cta/pfe-cta.umd.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-cta.umd.min.js","sources":["pfe-cta.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 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\nclass PfeCta extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-cta\";\n }\n\n get styleUrl() {\n return \"pfe-cta.scss\";\n }\n\n get templateUrl() {\n return \"pfe-cta.html\";\n }\n\n constructor() {\n super(PfeCta);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n const firstChild = this.children[0];\n\n if (!firstChild) {\n console.warn(\n \"The first child in the light DOM must be an anchor tag ()\"\n );\n } else if (firstChild && firstChild.tagName.toLowerCase() !== \"a\") {\n console.warn(\n \"The first child in the light DOM must be an anchor tag ()\"\n );\n } else {\n this.link = this.querySelector(\"a\");\n }\n }\n\n disconnectedCallback() {}\n}\n\nPFElement.create(PfeCta);\n\nexport default PfeCta;\n//# sourceMappingURL=pfe-cta.js.map\n"],"names":["PfeCta","PFElement","firstChild","this","children","tagName","toLowerCase","warn","link","querySelector","create"],"mappings":"gjBA0BMA,gWAkBIA,uUAlBWC,osLAUV,yDAIA,mDARA,4ZAkBDC,EAAaC,KAAKC,SAAS,GAE5BF,EAIMA,GAAmD,MAArCA,EAAWG,QAAQC,sBAClCC,KACN,qEAGGC,KAAOL,KAAKM,cAAc,aARvBF,KACN,gIAcRN,EAAUS,OAAOV"} \ No newline at end of file diff --git a/elements/pfe-datetime/package.json b/elements/pfe-datetime/package.json index 19b3054bd2..9558ded882 100644 --- a/elements/pfe-datetime/package.json +++ b/elements/pfe-datetime/package.json @@ -4,14 +4,14 @@ "className": "PfeDatetime", "elementName": "pfe-datetime" }, - "version": "1.0.0-prerelease.11", + "version": "1.0.0-prerelease.13", "publishConfig": { "access": "public" }, "description": "Datetime element for PFElements", "repository": { "type": "git", - "url" : "github:patternfly/patternfly-elements", + "url": "github:patternfly/patternfly-elements", "directory": "elements/pfe-datetime" }, "main": "pfe-datetime.js", @@ -32,7 +32,7 @@ ], "license": "MIT", "dependencies": { - "@patternfly/pfelement": "^1.0.0-prerelease.11" + "@patternfly/pfelement": "^1.0.0-prerelease.13" }, "generator-pfelement-version": "0.2.8", "gitHead": "dfa74e0495c556ebdd1edb61c6d406621d1b6421" diff --git a/elements/pfe-datetime/pfe-datetime.css b/elements/pfe-datetime/pfe-datetime.css new file mode 100644 index 0000000000..980e5c7df7 --- /dev/null +++ b/elements/pfe-datetime/pfe-datetime.css @@ -0,0 +1,5 @@ +:host { + display: inline; +} + +/*# sourceMappingURL=pfe-datetime.css.map */ diff --git a/elements/pfe-datetime/pfe-datetime.css.map b/elements/pfe-datetime/pfe-datetime.css.map new file mode 100644 index 0000000000..04af03d03a --- /dev/null +++ b/elements/pfe-datetime/pfe-datetime.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["pfe-datetime.scss","pfe-datetime.css"],"names":[],"mappings":"AAAA;EACI,eAAe;ACCnB","file":"pfe-datetime.css","sourcesContent":[":host {\n display: inline;\n}",":host {\n display: inline;\n}\n"]} \ No newline at end of file diff --git a/elements/pfe-datetime/pfe-datetime.css.min.map b/elements/pfe-datetime/pfe-datetime.css.min.map new file mode 100644 index 0000000000..e69de29bb2 diff --git a/elements/pfe-datetime/pfe-datetime.js b/elements/pfe-datetime/pfe-datetime.js new file mode 100644 index 0000000000..4cfce48c55 --- /dev/null +++ b/elements/pfe-datetime/pfe-datetime.js @@ -0,0 +1,212 @@ +import PFElement from '../pfelement/pfelement.js'; + +/* + * @license + * Copyright 2019 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 PfeDatetime extends PFElement { + + get html() { + return ``; + } + static get tag() { + return "pfe-datetime"; + } + + get styleUrl() { + return "pfe-datetime.scss"; + } + + get templateUrl() { + return "pfe-datetime.html"; + } + + constructor() { + super(PfeDatetime); + + this.type = this.getAttribute("type") || "local"; + } + + get type() { + return this._type; + } + + set type(val) { + if (this._type === val) { + return; + } + + this._type = val; + } + + get timestamp() { + return this._timestamp; + } + + set timestamp(val) { + if (this._timestamp === val) { + return; + } + + this._timestamp = val; + this.setDate(new Date(val * 1000)); + } + + get datetime() { + return this._datetime; + } + + set datetime(val) { + if (!Date.parse(val)) { + return; + } + + if (Date.parse(val) && this._datetime === Date.parse(val)) { + return; + } + + this.setDate(Date.parse(val)); + } + + static get observedAttributes() { + return ["datetime", "type", "timestamp"]; + } + + attributeChangedCallback(attr, oldVal, newVal) { + this[attr] = newVal; + } + + setDate(date) { + this._datetime = date; + this.shadowRoot.querySelector("span").innerText = window.Intl + ? this._getTypeString() + : date.toLocaleString(); + } + + _getOptions() { + const props = { + weekday: { + short: "short", + long: "long" + }, + day: { + numeric: "numeric", + "2-digit": "2-digit" + }, + month: { + short: "short", + long: "long" + }, + year: { + numeric: "numeric", + "2-digit": "2-digit" + }, + hour: { + numeric: "numeric", + "2-digit": "2-digit" + }, + minute: { + numeric: "numeric", + "2-digit": "2-digit" + }, + second: { + numeric: "numeric", + "2-digit": "2-digit" + }, + timeZoneName: { + short: "short", + long: "long" + } + }; + + let options = {}; + + for (const prop in props) { + const value = props[prop][this.getAttribute(prop)]; + if (value) { + options[prop] = value; + } + } + + return options; + } + + _getTypeString() { + const options = this._getOptions(); + const locale = this.getAttribute("locale") || navigator.language; + let dt = ""; + switch (this.type) { + case "local": + dt = new Intl.DateTimeFormat(locale, options).format(this._datetime); + break; + case "relative": + dt = this._getTimeRelative(this._datetime - Date.now()); + break; + default: + dt = this._datetime; + } + return dt; + } + + _getTimeRelative(ms) { + const tense = ms > 0 ? "until" : "ago"; + let str = "just now"; + // Based off of Github Relative Time + // https://github.com/github/time-elements/blob/master/src/relative-time.js + const s = Math.round(Math.abs(ms) / 1000); + const min = Math.round(s / 60); + const h = Math.round(min / 60); + const d = Math.round(h / 24); + const m = Math.round(d / 30); + const y = Math.round(m / 12); + if (m >= 18) { + str = y + " years"; + } else if (m >= 12) { + str = "a year"; + } else if (d >= 45) { + str = m + " months"; + } else if (d >= 30) { + str = "a month"; + } else if (h >= 36) { + str = d + " days"; + } else if (h >= 24) { + str = "a day"; + } else if (min >= 90) { + str = h + " hours"; + } else if (min >= 45) { + str = "an hour"; + } else if (s >= 90) { + str = min + " minutes"; + } else if (s >= 45) { + str = "a minute"; + } else if (s >= 10) { + str = s + " seconds"; + } + return str !== "just now" ? `${str} ${tense}` : str; + } +} + +PFElement.create(PfeDatetime); + +export default PfeDatetime; +//# sourceMappingURL=pfe-datetime.js.map diff --git a/elements/pfe-datetime/pfe-datetime.js.map b/elements/pfe-datetime/pfe-datetime.js.map new file mode 100644 index 0000000000..2029b998dd --- /dev/null +++ b/elements/pfe-datetime/pfe-datetime.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-datetime.js","sources":["pfe-datetime.js"],"sourcesContent":["/*\n * @license\n * Copyright 2019 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/pfelement.js\";\n\nclass PfeDatetime extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-datetime\";\n }\n\n get styleUrl() {\n return \"pfe-datetime.scss\";\n }\n\n get templateUrl() {\n return \"pfe-datetime.html\";\n }\n\n constructor() {\n super(PfeDatetime);\n\n this.type = this.getAttribute(\"type\") || \"local\";\n }\n\n get type() {\n return this._type;\n }\n\n set type(val) {\n if (this._type === val) {\n return;\n }\n\n this._type = val;\n }\n\n get timestamp() {\n return this._timestamp;\n }\n\n set timestamp(val) {\n if (this._timestamp === val) {\n return;\n }\n\n this._timestamp = val;\n this.setDate(new Date(val * 1000));\n }\n\n get datetime() {\n return this._datetime;\n }\n\n set datetime(val) {\n if (!Date.parse(val)) {\n return;\n }\n\n if (Date.parse(val) && this._datetime === Date.parse(val)) {\n return;\n }\n\n this.setDate(Date.parse(val));\n }\n\n static get observedAttributes() {\n return [\"datetime\", \"type\", \"timestamp\"];\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n this[attr] = newVal;\n }\n\n setDate(date) {\n this._datetime = date;\n this.shadowRoot.querySelector(\"span\").innerText = window.Intl\n ? this._getTypeString()\n : date.toLocaleString();\n }\n\n _getOptions() {\n const props = {\n weekday: {\n short: \"short\",\n long: \"long\"\n },\n day: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n month: {\n short: \"short\",\n long: \"long\"\n },\n year: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n hour: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n minute: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n second: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n timeZoneName: {\n short: \"short\",\n long: \"long\"\n }\n };\n\n let options = {};\n\n for (const prop in props) {\n const value = props[prop][this.getAttribute(prop)];\n if (value) {\n options[prop] = value;\n }\n }\n\n return options;\n }\n\n _getTypeString() {\n const options = this._getOptions();\n const locale = this.getAttribute(\"locale\") || navigator.language;\n let dt = \"\";\n switch (this.type) {\n case \"local\":\n dt = new Intl.DateTimeFormat(locale, options).format(this._datetime);\n break;\n case \"relative\":\n dt = this._getTimeRelative(this._datetime - Date.now());\n break;\n default:\n dt = this._datetime;\n }\n return dt;\n }\n\n _getTimeRelative(ms) {\n const tense = ms > 0 ? \"until\" : \"ago\";\n let str = \"just now\";\n // Based off of Github Relative Time\n // https://github.com/github/time-elements/blob/master/src/relative-time.js\n const s = Math.round(Math.abs(ms) / 1000);\n const min = Math.round(s / 60);\n const h = Math.round(min / 60);\n const d = Math.round(h / 24);\n const m = Math.round(d / 30);\n const y = Math.round(m / 12);\n if (m >= 18) {\n str = y + \" years\";\n } else if (m >= 12) {\n str = \"a year\";\n } else if (d >= 45) {\n str = m + \" months\";\n } else if (d >= 30) {\n str = \"a month\";\n } else if (h >= 36) {\n str = d + \" days\";\n } else if (h >= 24) {\n str = \"a day\";\n } else if (min >= 90) {\n str = h + \" hours\";\n } else if (min >= 45) {\n str = \"an hour\";\n } else if (s >= 90) {\n str = min + \" minutes\";\n } else if (s >= 45) {\n str = \"a minute\";\n } else if (s >= 10) {\n str = s + \" seconds\";\n }\n return str !== \"just now\" ? `${str} ${tense}` : str;\n }\n}\n\nPFElement.create(PfeDatetime);\n\nexport default PfeDatetime;\n"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-datetime/pfe-datetime.min.css b/elements/pfe-datetime/pfe-datetime.min.css new file mode 100644 index 0000000000..15c9d14db0 --- /dev/null +++ b/elements/pfe-datetime/pfe-datetime.min.css @@ -0,0 +1 @@ +:host{display:inline} \ No newline at end of file diff --git a/elements/pfe-datetime/pfe-datetime.min.js b/elements/pfe-datetime/pfe-datetime.min.js new file mode 100644 index 0000000000..79401bfa90 --- /dev/null +++ b/elements/pfe-datetime/pfe-datetime.min.js @@ -0,0 +1,25 @@ +import t from"../pfelement/pfelement.min.js"; +/* + * @license + * Copyright 2019 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 e extends t{get html(){return""}static get tag(){return"pfe-datetime"}get styleUrl(){return"pfe-datetime.scss"}get templateUrl(){return"pfe-datetime.html"}constructor(){super(e),this.type=this.getAttribute("type")||"local"}get type(){return this._type}set type(t){this._type!==t&&(this._type=t)}get timestamp(){return this._timestamp}set timestamp(t){this._timestamp!==t&&(this._timestamp=t,this.setDate(new Date(1e3*t)))}get datetime(){return this._datetime}set datetime(t){Date.parse(t)&&(Date.parse(t)&&this._datetime===Date.parse(t)||this.setDate(Date.parse(t)))}static get observedAttributes(){return["datetime","type","timestamp"]}attributeChangedCallback(t,e,i){this[t]=i}setDate(t){this._datetime=t,this.shadowRoot.querySelector("span").innerText=window.Intl?this._getTypeString():t.toLocaleString()}_getOptions(){const t={weekday:{short:"short",long:"long"},day:{numeric:"numeric","2-digit":"2-digit"},month:{short:"short",long:"long"},year:{numeric:"numeric","2-digit":"2-digit"},hour:{numeric:"numeric","2-digit":"2-digit"},minute:{numeric:"numeric","2-digit":"2-digit"},second:{numeric:"numeric","2-digit":"2-digit"},timeZoneName:{short:"short",long:"long"}};let e={};for(const i in t){const s=t[i][this.getAttribute(i)];s&&(e[i]=s)}return e}_getTypeString(){const t=this._getOptions(),e=this.getAttribute("locale")||navigator.language;let i="";switch(this.type){case"local":i=new Intl.DateTimeFormat(e,t).format(this._datetime);break;case"relative":i=this._getTimeRelative(this._datetime-Date.now());break;default:i=this._datetime}return i}_getTimeRelative(t){const e=t>0?"until":"ago";let i="just now";const s=Math.round(Math.abs(t)/1e3),a=Math.round(s/60),r=Math.round(a/60),n=Math.round(r/24),o=Math.round(n/30),m=Math.round(o/12);return o>=18?i=m+" years":o>=12?i="a year":n>=45?i=o+" months":n>=30?i="a month":r>=36?i=n+" days":r>=24?i="a day":a>=90?i=r+" hours":a>=45?i="an hour":s>=90?i=a+" minutes":s>=45?i="a minute":s>=10&&(i=s+" seconds"),"just now"!==i?`${i} ${e}`:i}}t.create(e);export default e; +//# sourceMappingURL=pfe-datetime.min.js.map diff --git a/elements/pfe-datetime/pfe-datetime.min.js.map b/elements/pfe-datetime/pfe-datetime.min.js.map new file mode 100644 index 0000000000..c603d58fac --- /dev/null +++ b/elements/pfe-datetime/pfe-datetime.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-datetime.min.js","sources":["pfe-datetime.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 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\nclass PfeDatetime extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-datetime\";\n }\n\n get styleUrl() {\n return \"pfe-datetime.scss\";\n }\n\n get templateUrl() {\n return \"pfe-datetime.html\";\n }\n\n constructor() {\n super(PfeDatetime);\n\n this.type = this.getAttribute(\"type\") || \"local\";\n }\n\n get type() {\n return this._type;\n }\n\n set type(val) {\n if (this._type === val) {\n return;\n }\n\n this._type = val;\n }\n\n get timestamp() {\n return this._timestamp;\n }\n\n set timestamp(val) {\n if (this._timestamp === val) {\n return;\n }\n\n this._timestamp = val;\n this.setDate(new Date(val * 1000));\n }\n\n get datetime() {\n return this._datetime;\n }\n\n set datetime(val) {\n if (!Date.parse(val)) {\n return;\n }\n\n if (Date.parse(val) && this._datetime === Date.parse(val)) {\n return;\n }\n\n this.setDate(Date.parse(val));\n }\n\n static get observedAttributes() {\n return [\"datetime\", \"type\", \"timestamp\"];\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n this[attr] = newVal;\n }\n\n setDate(date) {\n this._datetime = date;\n this.shadowRoot.querySelector(\"span\").innerText = window.Intl\n ? this._getTypeString()\n : date.toLocaleString();\n }\n\n _getOptions() {\n const props = {\n weekday: {\n short: \"short\",\n long: \"long\"\n },\n day: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n month: {\n short: \"short\",\n long: \"long\"\n },\n year: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n hour: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n minute: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n second: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n timeZoneName: {\n short: \"short\",\n long: \"long\"\n }\n };\n\n let options = {};\n\n for (const prop in props) {\n const value = props[prop][this.getAttribute(prop)];\n if (value) {\n options[prop] = value;\n }\n }\n\n return options;\n }\n\n _getTypeString() {\n const options = this._getOptions();\n const locale = this.getAttribute(\"locale\") || navigator.language;\n let dt = \"\";\n switch (this.type) {\n case \"local\":\n dt = new Intl.DateTimeFormat(locale, options).format(this._datetime);\n break;\n case \"relative\":\n dt = this._getTimeRelative(this._datetime - Date.now());\n break;\n default:\n dt = this._datetime;\n }\n return dt;\n }\n\n _getTimeRelative(ms) {\n const tense = ms > 0 ? \"until\" : \"ago\";\n let str = \"just now\";\n // Based off of Github Relative Time\n // https://github.com/github/time-elements/blob/master/src/relative-time.js\n const s = Math.round(Math.abs(ms) / 1000);\n const min = Math.round(s / 60);\n const h = Math.round(min / 60);\n const d = Math.round(h / 24);\n const m = Math.round(d / 30);\n const y = Math.round(m / 12);\n if (m >= 18) {\n str = y + \" years\";\n } else if (m >= 12) {\n str = \"a year\";\n } else if (d >= 45) {\n str = m + \" months\";\n } else if (d >= 30) {\n str = \"a month\";\n } else if (h >= 36) {\n str = d + \" days\";\n } else if (h >= 24) {\n str = \"a day\";\n } else if (min >= 90) {\n str = h + \" hours\";\n } else if (min >= 45) {\n str = \"an hour\";\n } else if (s >= 90) {\n str = min + \" minutes\";\n } else if (s >= 45) {\n str = \"a minute\";\n } else if (s >= 10) {\n str = s + \" seconds\";\n }\n return str !== \"just now\" ? `${str} ${tense}` : str;\n }\n}\n\nPFElement.create(PfeDatetime);\n\nexport default PfeDatetime;\n//# sourceMappingURL=pfe-datetime.js.map\n"],"names":["PfeDatetime","PFElement","html","tag","styleUrl","templateUrl","[object Object]","super","this","type","getAttribute","_type","val","timestamp","_timestamp","setDate","Date","datetime","_datetime","parse","observedAttributes","attr","oldVal","newVal","date","shadowRoot","querySelector","innerText","window","Intl","_getTypeString","toLocaleString","props","weekday","short","long","day","numeric","2-digit","month","year","hour","minute","second","timeZoneName","options","prop","value","_getOptions","locale","navigator","language","dt","DateTimeFormat","format","_getTimeRelative","now","ms","tense","str","s","Math","round","abs","min","h","d","m","y","create"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EA0BA,MAAMA,UAAoBC,EAExBC,WACE,MAAO,oDAETC,iBACE,MAAO,eAGTC,eACE,MAAO,oBAGTC,kBACE,MAAO,oBAGTC,cACEC,MAAMP,GAENQ,KAAKC,KAAOD,KAAKE,aAAa,SAAW,QAG3CD,WACE,OAAOD,KAAKG,MAGdF,SAASG,GACHJ,KAAKG,QAAUC,IAInBJ,KAAKG,MAAQC,GAGfC,gBACE,OAAOL,KAAKM,WAGdD,cAAcD,GACRJ,KAAKM,aAAeF,IAIxBJ,KAAKM,WAAaF,EAClBJ,KAAKO,QAAQ,IAAIC,KAAW,IAANJ,KAGxBK,eACE,OAAOT,KAAKU,UAGdD,aAAaL,GACNI,KAAKG,MAAMP,KAIZI,KAAKG,MAAMP,IAAQJ,KAAKU,YAAcF,KAAKG,MAAMP,IAIrDJ,KAAKO,QAAQC,KAAKG,MAAMP,KAG1BQ,gCACE,MAAO,CAAC,WAAY,OAAQ,aAG9Bd,yBAAyBe,EAAMC,EAAQC,GACrCf,KAAKa,GAAQE,EAGfjB,QAAQkB,GACNhB,KAAKU,UAAYM,EACjBhB,KAAKiB,WAAWC,cAAc,QAAQC,UAAYC,OAAOC,KACrDrB,KAAKsB,iBACLN,EAAKO,iBAGXzB,cACE,MAAM0B,EAAQ,CACZC,QAAS,CACPC,MAAO,QACPC,KAAM,QAERC,IAAK,CACHC,QAAS,UACTC,UAAW,WAEbC,MAAO,CACLL,MAAO,QACPC,KAAM,QAERK,KAAM,CACJH,QAAS,UACTC,UAAW,WAEbG,KAAM,CACJJ,QAAS,UACTC,UAAW,WAEbI,OAAQ,CACNL,QAAS,UACTC,UAAW,WAEbK,OAAQ,CACNN,QAAS,UACTC,UAAW,WAEbM,aAAc,CACZV,MAAO,QACPC,KAAM,SAIV,IAAIU,EAAU,GAEd,IAAK,MAAMC,KAAQd,EAAO,CACxB,MAAMe,EAAQf,EAAMc,GAAMtC,KAAKE,aAAaoC,IACxCC,IACFF,EAAQC,GAAQC,GAIpB,OAAOF,EAGTvC,iBACE,MAAMuC,EAAUrC,KAAKwC,cACfC,EAASzC,KAAKE,aAAa,WAAawC,UAAUC,SACxD,IAAIC,EAAK,GACT,OAAQ5C,KAAKC,MACX,IAAK,QACH2C,EAAK,IAAIvB,KAAKwB,eAAeJ,EAAQJ,GAASS,OAAO9C,KAAKU,WAC1D,MACF,IAAK,WACHkC,EAAK5C,KAAK+C,iBAAiB/C,KAAKU,UAAYF,KAAKwC,OACjD,MACF,QACEJ,EAAK5C,KAAKU,UAEd,OAAOkC,EAGT9C,iBAAiBmD,GACf,MAAMC,EAAQD,EAAK,EAAI,QAAU,MACjC,IAAIE,EAAM,WAGV,MAAMC,EAAIC,KAAKC,MAAMD,KAAKE,IAAIN,GAAM,KAC9BO,EAAMH,KAAKC,MAAMF,EAAI,IACrBK,EAAIJ,KAAKC,MAAME,EAAM,IACrBE,EAAIL,KAAKC,MAAMG,EAAI,IACnBE,EAAIN,KAAKC,MAAMI,EAAI,IACnBE,EAAIP,KAAKC,MAAMK,EAAI,IAwBzB,OAvBIA,GAAK,GACPR,EAAMS,EAAI,SACDD,GAAK,GACdR,EAAM,SACGO,GAAK,GACdP,EAAMQ,EAAI,UACDD,GAAK,GACdP,EAAM,UACGM,GAAK,GACdN,EAAMO,EAAI,QACDD,GAAK,GACdN,EAAM,QACGK,GAAO,GAChBL,EAAMM,EAAI,SACDD,GAAO,GAChBL,EAAM,UACGC,GAAK,GACdD,EAAMK,EAAM,WACHJ,GAAK,GACdD,EAAM,WACGC,GAAK,KACdD,EAAMC,EAAI,YAEG,aAARD,KAAwBA,KAAOD,IAAUC,GAIpD1D,EAAUoE,OAAOrE"} \ No newline at end of file diff --git a/elements/pfe-datetime/pfe-datetime.umd.js b/elements/pfe-datetime/pfe-datetime.umd.js new file mode 100644 index 0000000000..a98b1c4907 --- /dev/null +++ b/elements/pfe-datetime/pfe-datetime.umd.js @@ -0,0 +1,285 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('../pfelement/pfelement.umd')) : + typeof define === 'function' && define.amd ? define(['../pfelement/pfelement.umd'], factory) : + (global.PfeDatetime = factory(global.PFElement)); +}(this, (function (PFElement) { 'use strict'; + + PFElement = PFElement && PFElement.hasOwnProperty('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; + }; + + /* + * @license + * Copyright 2019 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 PfeDatetime = function (_PFElement) { + inherits(PfeDatetime, _PFElement); + createClass(PfeDatetime, [{ + key: "html", + get: function get$$1() { + return ""; + } + }, { + key: "styleUrl", + get: function get$$1() { + return "pfe-datetime.scss"; + } + }, { + key: "templateUrl", + get: function get$$1() { + return "pfe-datetime.html"; + } + }], [{ + key: "tag", + get: function get$$1() { + return "pfe-datetime"; + } + }]); + + function PfeDatetime() { + classCallCheck(this, PfeDatetime); + + var _this = possibleConstructorReturn(this, (PfeDatetime.__proto__ || Object.getPrototypeOf(PfeDatetime)).call(this, PfeDatetime)); + + _this.type = _this.getAttribute("type") || "local"; + return _this; + } + + createClass(PfeDatetime, [{ + key: "attributeChangedCallback", + value: function attributeChangedCallback(attr, oldVal, newVal) { + this[attr] = newVal; + } + }, { + key: "setDate", + value: function setDate(date) { + this._datetime = date; + this.shadowRoot.querySelector("span").innerText = window.Intl ? this._getTypeString() : date.toLocaleString(); + } + }, { + key: "_getOptions", + value: function _getOptions() { + var props = { + weekday: { + short: "short", + long: "long" + }, + day: { + numeric: "numeric", + "2-digit": "2-digit" + }, + month: { + short: "short", + long: "long" + }, + year: { + numeric: "numeric", + "2-digit": "2-digit" + }, + hour: { + numeric: "numeric", + "2-digit": "2-digit" + }, + minute: { + numeric: "numeric", + "2-digit": "2-digit" + }, + second: { + numeric: "numeric", + "2-digit": "2-digit" + }, + timeZoneName: { + short: "short", + long: "long" + } + }; + + var options = {}; + + for (var prop in props) { + var value = props[prop][this.getAttribute(prop)]; + if (value) { + options[prop] = value; + } + } + + return options; + } + }, { + key: "_getTypeString", + value: function _getTypeString() { + var options = this._getOptions(); + var locale = this.getAttribute("locale") || navigator.language; + var dt = ""; + switch (this.type) { + case "local": + dt = new Intl.DateTimeFormat(locale, options).format(this._datetime); + break; + case "relative": + dt = this._getTimeRelative(this._datetime - Date.now()); + break; + default: + dt = this._datetime; + } + return dt; + } + }, { + key: "_getTimeRelative", + value: function _getTimeRelative(ms) { + var tense = ms > 0 ? "until" : "ago"; + var str = "just now"; + // Based off of Github Relative Time + // https://github.com/github/time-elements/blob/master/src/relative-time.js + var s = Math.round(Math.abs(ms) / 1000); + var min = Math.round(s / 60); + var h = Math.round(min / 60); + var d = Math.round(h / 24); + var m = Math.round(d / 30); + var y = Math.round(m / 12); + if (m >= 18) { + str = y + " years"; + } else if (m >= 12) { + str = "a year"; + } else if (d >= 45) { + str = m + " months"; + } else if (d >= 30) { + str = "a month"; + } else if (h >= 36) { + str = d + " days"; + } else if (h >= 24) { + str = "a day"; + } else if (min >= 90) { + str = h + " hours"; + } else if (min >= 45) { + str = "an hour"; + } else if (s >= 90) { + str = min + " minutes"; + } else if (s >= 45) { + str = "a minute"; + } else if (s >= 10) { + str = s + " seconds"; + } + return str !== "just now" ? str + " " + tense : str; + } + }, { + key: "type", + get: function get$$1() { + return this._type; + }, + set: function set$$1(val) { + if (this._type === val) { + return; + } + + this._type = val; + } + }, { + key: "timestamp", + get: function get$$1() { + return this._timestamp; + }, + set: function set$$1(val) { + if (this._timestamp === val) { + return; + } + + this._timestamp = val; + this.setDate(new Date(val * 1000)); + } + }, { + key: "datetime", + get: function get$$1() { + return this._datetime; + }, + set: function set$$1(val) { + if (!Date.parse(val)) { + return; + } + + if (Date.parse(val) && this._datetime === Date.parse(val)) { + return; + } + + this.setDate(Date.parse(val)); + } + }], [{ + key: "observedAttributes", + get: function get$$1() { + return ["datetime", "type", "timestamp"]; + } + }]); + return PfeDatetime; + }(PFElement); + + PFElement.create(PfeDatetime); + + return PfeDatetime; + +}))); +//# sourceMappingURL=pfe-datetime.umd.js.map diff --git a/elements/pfe-datetime/pfe-datetime.umd.js.map b/elements/pfe-datetime/pfe-datetime.umd.js.map new file mode 100644 index 0000000000..85651ce43d --- /dev/null +++ b/elements/pfe-datetime/pfe-datetime.umd.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-datetime.umd.js","sources":["pfe-datetime.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 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\nclass PfeDatetime extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-datetime\";\n }\n\n get styleUrl() {\n return \"pfe-datetime.scss\";\n }\n\n get templateUrl() {\n return \"pfe-datetime.html\";\n }\n\n constructor() {\n super(PfeDatetime);\n\n this.type = this.getAttribute(\"type\") || \"local\";\n }\n\n get type() {\n return this._type;\n }\n\n set type(val) {\n if (this._type === val) {\n return;\n }\n\n this._type = val;\n }\n\n get timestamp() {\n return this._timestamp;\n }\n\n set timestamp(val) {\n if (this._timestamp === val) {\n return;\n }\n\n this._timestamp = val;\n this.setDate(new Date(val * 1000));\n }\n\n get datetime() {\n return this._datetime;\n }\n\n set datetime(val) {\n if (!Date.parse(val)) {\n return;\n }\n\n if (Date.parse(val) && this._datetime === Date.parse(val)) {\n return;\n }\n\n this.setDate(Date.parse(val));\n }\n\n static get observedAttributes() {\n return [\"datetime\", \"type\", \"timestamp\"];\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n this[attr] = newVal;\n }\n\n setDate(date) {\n this._datetime = date;\n this.shadowRoot.querySelector(\"span\").innerText = window.Intl\n ? this._getTypeString()\n : date.toLocaleString();\n }\n\n _getOptions() {\n const props = {\n weekday: {\n short: \"short\",\n long: \"long\"\n },\n day: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n month: {\n short: \"short\",\n long: \"long\"\n },\n year: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n hour: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n minute: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n second: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n timeZoneName: {\n short: \"short\",\n long: \"long\"\n }\n };\n\n let options = {};\n\n for (const prop in props) {\n const value = props[prop][this.getAttribute(prop)];\n if (value) {\n options[prop] = value;\n }\n }\n\n return options;\n }\n\n _getTypeString() {\n const options = this._getOptions();\n const locale = this.getAttribute(\"locale\") || navigator.language;\n let dt = \"\";\n switch (this.type) {\n case \"local\":\n dt = new Intl.DateTimeFormat(locale, options).format(this._datetime);\n break;\n case \"relative\":\n dt = this._getTimeRelative(this._datetime - Date.now());\n break;\n default:\n dt = this._datetime;\n }\n return dt;\n }\n\n _getTimeRelative(ms) {\n const tense = ms > 0 ? \"until\" : \"ago\";\n let str = \"just now\";\n // Based off of Github Relative Time\n // https://github.com/github/time-elements/blob/master/src/relative-time.js\n const s = Math.round(Math.abs(ms) / 1000);\n const min = Math.round(s / 60);\n const h = Math.round(min / 60);\n const d = Math.round(h / 24);\n const m = Math.round(d / 30);\n const y = Math.round(m / 12);\n if (m >= 18) {\n str = y + \" years\";\n } else if (m >= 12) {\n str = \"a year\";\n } else if (d >= 45) {\n str = m + \" months\";\n } else if (d >= 30) {\n str = \"a month\";\n } else if (h >= 36) {\n str = d + \" days\";\n } else if (h >= 24) {\n str = \"a day\";\n } else if (min >= 90) {\n str = h + \" hours\";\n } else if (min >= 45) {\n str = \"an hour\";\n } else if (s >= 90) {\n str = min + \" minutes\";\n } else if (s >= 45) {\n str = \"a minute\";\n } else if (s >= 10) {\n str = s + \" seconds\";\n }\n return str !== \"just now\" ? `${str} ${tense}` : str;\n }\n}\n\nPFElement.create(PfeDatetime);\n\nexport default PfeDatetime;\n//# sourceMappingURL=pfe-datetime.js.map\n"],"names":["PfeDatetime","type","getAttribute","attr","oldVal","newVal","date","_datetime","shadowRoot","querySelector","innerText","window","Intl","_getTypeString","toLocaleString","props","weekday","short","long","day","numeric","month","year","hour","minute","second","timeZoneName","options","prop","value","_getOptions","locale","navigator","language","dt","DateTimeFormat","format","_getTimeRelative","Date","now","ms","tense","str","s","Math","round","abs","min","h","d","m","y","_type","val","_timestamp","setDate","parse","PFElement","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-datetime/pfe-datetime.umd.min.js b/elements/pfe-datetime/pfe-datetime.umd.min.js new file mode 100644 index 0000000000..500562c26f --- /dev/null +++ b/elements/pfe-datetime/pfe-datetime.umd.min.js @@ -0,0 +1,2 @@ +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("../pfelement/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min"],e):t.PfeDatetime=e(t.PFElement)}(this,function(n){"use strict";n=n&&n.hasOwnProperty("default")?n.default:n;var i=function(){function i(t,e){for(var n=0;n:host{display:inline}"}},{key:"styleUrl",get:function(){return"pfe-datetime.scss"}},{key:"templateUrl",get:function(){return"pfe-datetime.html"}}],[{key:"tag",get:function(){return"pfe-datetime"}}]),i(e,[{key:"attributeChangedCallback",value:function(t,e,n){this[t]=n}},{key:"setDate",value:function(t){this._datetime=t,this.shadowRoot.querySelector("span").innerText=window.Intl?this._getTypeString():t.toLocaleString()}},{key:"_getOptions",value:function(){var t={weekday:{short:"short",long:"long"},day:{numeric:"numeric","2-digit":"2-digit"},month:{short:"short",long:"long"},year:{numeric:"numeric","2-digit":"2-digit"},hour:{numeric:"numeric","2-digit":"2-digit"},minute:{numeric:"numeric","2-digit":"2-digit"},second:{numeric:"numeric","2-digit":"2-digit"},timeZoneName:{short:"short",long:"long"}},e={};for(var n in t){var i=t[n][this.getAttribute(n)];i&&(e[n]=i)}return e}},{key:"_getTypeString",value:function(){var t=this._getOptions(),e=this.getAttribute("locale")||navigator.language,n="";switch(this.type){case"local":n=new Intl.DateTimeFormat(e,t).format(this._datetime);break;case"relative":n=this._getTimeRelative(this._datetime-Date.now());break;default:n=this._datetime}return n}},{key:"_getTimeRelative",value:function(t){var e=0:host{display:inline}`;\n }\n static get tag() {\n return \"pfe-datetime\";\n }\n\n get styleUrl() {\n return \"pfe-datetime.scss\";\n }\n\n get templateUrl() {\n return \"pfe-datetime.html\";\n }\n\n constructor() {\n super(PfeDatetime);\n\n this.type = this.getAttribute(\"type\") || \"local\";\n }\n\n get type() {\n return this._type;\n }\n\n set type(val) {\n if (this._type === val) {\n return;\n }\n\n this._type = val;\n }\n\n get timestamp() {\n return this._timestamp;\n }\n\n set timestamp(val) {\n if (this._timestamp === val) {\n return;\n }\n\n this._timestamp = val;\n this.setDate(new Date(val * 1000));\n }\n\n get datetime() {\n return this._datetime;\n }\n\n set datetime(val) {\n if (!Date.parse(val)) {\n return;\n }\n\n if (Date.parse(val) && this._datetime === Date.parse(val)) {\n return;\n }\n\n this.setDate(Date.parse(val));\n }\n\n static get observedAttributes() {\n return [\"datetime\", \"type\", \"timestamp\"];\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n this[attr] = newVal;\n }\n\n setDate(date) {\n this._datetime = date;\n this.shadowRoot.querySelector(\"span\").innerText = window.Intl\n ? this._getTypeString()\n : date.toLocaleString();\n }\n\n _getOptions() {\n const props = {\n weekday: {\n short: \"short\",\n long: \"long\"\n },\n day: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n month: {\n short: \"short\",\n long: \"long\"\n },\n year: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n hour: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n minute: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n second: {\n numeric: \"numeric\",\n \"2-digit\": \"2-digit\"\n },\n timeZoneName: {\n short: \"short\",\n long: \"long\"\n }\n };\n\n let options = {};\n\n for (const prop in props) {\n const value = props[prop][this.getAttribute(prop)];\n if (value) {\n options[prop] = value;\n }\n }\n\n return options;\n }\n\n _getTypeString() {\n const options = this._getOptions();\n const locale = this.getAttribute(\"locale\") || navigator.language;\n let dt = \"\";\n switch (this.type) {\n case \"local\":\n dt = new Intl.DateTimeFormat(locale, options).format(this._datetime);\n break;\n case \"relative\":\n dt = this._getTimeRelative(this._datetime - Date.now());\n break;\n default:\n dt = this._datetime;\n }\n return dt;\n }\n\n _getTimeRelative(ms) {\n const tense = ms > 0 ? \"until\" : \"ago\";\n let str = \"just now\";\n // Based off of Github Relative Time\n // https://github.com/github/time-elements/blob/master/src/relative-time.js\n const s = Math.round(Math.abs(ms) / 1000);\n const min = Math.round(s / 60);\n const h = Math.round(min / 60);\n const d = Math.round(h / 24);\n const m = Math.round(d / 30);\n const y = Math.round(m / 12);\n if (m >= 18) {\n str = y + \" years\";\n } else if (m >= 12) {\n str = \"a year\";\n } else if (d >= 45) {\n str = m + \" months\";\n } else if (d >= 30) {\n str = \"a month\";\n } else if (h >= 36) {\n str = d + \" days\";\n } else if (h >= 24) {\n str = \"a day\";\n } else if (min >= 90) {\n str = h + \" hours\";\n } else if (min >= 45) {\n str = \"an hour\";\n } else if (s >= 90) {\n str = min + \" minutes\";\n } else if (s >= 45) {\n str = \"a minute\";\n } else if (s >= 10) {\n str = s + \" seconds\";\n }\n return str !== \"just now\" ? `${str} ${tense}` : str;\n }\n}\n\nPFElement.create(PfeDatetime);\n\nexport default PfeDatetime;\n//# sourceMappingURL=pfe-datetime.js.map\n"],"names":["PfeDatetime","type","_this","getAttribute","PFElement","attr","oldVal","newVal","date","_datetime","shadowRoot","querySelector","innerText","window","Intl","this","_getTypeString","toLocaleString","props","options","prop","value","_getOptions","locale","navigator","language","dt","DateTimeFormat","format","_getTimeRelative","Date","now","ms","tense","str","s","Math","round","abs","min","h","d","m","y","_type","val","_timestamp","setDate","parse","create"],"mappings":"qjBA0BMA,gWAkBIA,aAEDC,KAAOC,EAAKC,aAAa,SAAW,6UApBnBC,oIAUf,8DAIA,wDARA,uEA8DgBC,EAAMC,EAAQC,QAChCF,GAAQE,kCAGPC,QACDC,UAAYD,OACZE,WAAWC,cAAc,QAAQC,UAAYC,OAAOC,KACrDC,KAAKC,iBACLR,EAAKS,2DAIHC,EAAQ,SACH,OACA,aACD,YAEH,SACM,oBACE,iBAEN,OACE,aACD,aAEF,SACK,oBACE,gBAEP,SACK,oBACE,kBAEL,SACG,oBACE,kBAEL,SACG,oBACE,wBAEC,OACL,aACD,SAINC,EAAU,OAET,IAAMC,KAAQF,EAAO,KAClBG,EAAQH,EAAME,GAAML,KAAKZ,aAAaiB,IACxCC,MACMD,GAAQC,UAIbF,+CAIDA,EAAUJ,KAAKO,cACfC,EAASR,KAAKZ,aAAa,WAAaqB,UAAUC,SACpDC,EAAK,UACDX,KAAKd,UACN,UACE,IAAIa,KAAKa,eAAeJ,EAAQJ,GAASS,OAAOb,KAAKN,qBAEvD,aACEM,KAAKc,iBAAiBd,KAAKN,UAAYqB,KAAKC,uBAG5ChB,KAAKN,iBAEPiB,2CAGQM,OACTC,EAAa,EAALD,EAAS,QAAU,MAC7BE,EAAM,WAGJC,EAAIC,KAAKC,MAAMD,KAAKE,IAAIN,GAAM,KAC9BO,EAAMH,KAAKC,MAAMF,EAAI,IACrBK,EAAIJ,KAAKC,MAAME,EAAM,IACrBE,EAAIL,KAAKC,MAAMG,EAAI,IACnBE,EAAIN,KAAKC,MAAMI,EAAI,IACnBE,EAAIP,KAAKC,MAAMK,EAAI,WAChB,IAALA,IACIC,EAAI,SACI,IAALD,IACH,SACQ,IAALD,IACHC,EAAI,UACI,IAALD,IACH,UACQ,IAALD,IACHC,EAAI,QACI,IAALD,IACH,QACU,IAAPD,IACHC,EAAI,SACM,IAAPD,IACH,UACQ,IAALJ,IACHI,EAAM,WACE,IAALJ,IACH,WACQ,IAALA,MACHA,EAAI,YAEG,aAARD,EAAwBA,MAAOD,EAAUC,sCA1JzCnB,KAAK6B,oBAGLC,GACH9B,KAAK6B,QAAUC,SAIdD,MAAQC,4CAIN9B,KAAK+B,yBAGAD,GACR9B,KAAK+B,aAAeD,SAInBC,WAAaD,OACbE,QAAQ,IAAIjB,KAAW,IAANe,6CAIf9B,KAAKN,wBAGDoC,GACNf,KAAKkB,MAAMH,KAIZf,KAAKkB,MAAMH,IAAQ9B,KAAKN,YAAcqB,KAAKkB,MAAMH,SAIhDE,QAAQjB,KAAKkB,MAAMH,wDAIjB,CAAC,WAAY,OAAQ,6BAqHhCzC,EAAU6C,OAAOjD"} \ No newline at end of file diff --git a/elements/pfe-health-index/package.json b/elements/pfe-health-index/package.json index 6d19ab99ca..e0b5c1b07f 100644 --- a/elements/pfe-health-index/package.json +++ b/elements/pfe-health-index/package.json @@ -4,7 +4,7 @@ "className": "PfeHealthIndex", "elementName": "pfe-health-index" }, - "version": "1.0.0-prerelease.11", + "version": "1.0.0-prerelease.13", "publishConfig": { "access": "public" }, @@ -15,7 +15,7 @@ ], "repository": { "type": "git", - "url" : "github:patternfly/patternfly-elements", + "url": "github:patternfly/patternfly-elements", "directory": "elements/pfe-health-index" }, "main": "pfe-health-index.js", @@ -33,8 +33,8 @@ ], "license": "MIT", "dependencies": { - "@patternfly/pfe-sass": "^1.0.0-prerelease.11", - "@patternfly/pfelement": "^1.0.0-prerelease.11" + "@patternfly/pfe-sass": "^1.0.0-prerelease.13", + "@patternfly/pfelement": "^1.0.0-prerelease.13" }, "generator-pfelement-version": "0.6.3", "gitHead": "dfa74e0495c556ebdd1edb61c6d406621d1b6421" diff --git a/elements/pfe-health-index/pfe-health-index.css b/elements/pfe-health-index/pfe-health-index.css new file mode 100644 index 0000000000..56db564e97 --- /dev/null +++ b/elements/pfe-health-index/pfe-health-index.css @@ -0,0 +1,86 @@ +/* + * Copyright 2018 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. + */ +/* Palette of Border Colors */ +/* Palette of Feedback Colors */ +:host { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} + +:host([hidden]) { + display: none; +} + +.box-container { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + border: 1px solid #dfdfdf; + border: 1px solid var(--pfe-theme--color--surface--border, #dfdfdf); + margin-left: calc(1rem * 0.5); + margin-left: calc(var(--pfe-theme--container-spacer, 1rem) * 0.5); +} + +.box-container .box { + background: #fff; + width: 10px; + height: 20px; + border-right: 1px solid #dfdfdf; + border-right: 1px solid var(--pfe-theme--color--surface--border, #dfdfdf); +} + +.box-container .box:last-child { + border-right: 0; +} + +.box-container .box.active.a { + background-color: #3f9c35; +} + +.box-container .box.active.b { + background-color: #92d400; +} + +.box-container .box.active.c { + background-color: #efaa00; +} + +.box-container .box.active.d { + background-color: #ec7a08; +} + +.box-container .box.active.e { + background-color: #cc0000; +} + +.box-container .box.active.f { + background-color: #a30000; +} + +/*# sourceMappingURL=pfe-health-index.css.map */ diff --git a/elements/pfe-health-index/pfe-health-index.css.map b/elements/pfe-health-index/pfe-health-index.css.map new file mode 100644 index 0000000000..44f325bfa9 --- /dev/null +++ b/elements/pfe-health-index/pfe-health-index.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","pfe-health-index.css","../../pfe-sass/variables/_colors.scss","pfe-health-index.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;ECoBE;AC4GF,6BAAA;AAOA,+BAAA;ACjHA;EACE,2BAAoB;EAApB,4BAAoB;EAApB,2BAAoB;EAApB,oBAAoB;EACpB,yBAAmB;EAAnB,2BAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;AFErB;;AECA;EACE,aAAa;AFEf;;AECA;EACE,oBAAa;EAAb,qBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,yBAA+C;EAA/C,mEAA+C;EAC/C,6BAAqD;EAArD,iEAAqD;AFEvD;;AELA;EAMI,gBA5BuB;EA6BvB,WAhCoB;EAiCpB,YAhCuC;EAiCvC,+BAAqD;EAArD,yEAAqD;AFGzD;;AEZA;EAYM,eAAe;AFIrB;;AEhBA;EAiBQ,yBArCqB;AFwC7B;;AEpBA;EAqBQ,yBAxCqB;AF2C7B;;AExBA;EAyBQ,yBA3CqB;AF8C7B;;AE5BA;EA6BQ,yBA9CqB;AFiD7B;;AEhCA;EAiCQ,yBAjDqB;AFoD7B;;AEpCA;EAqCQ,yBApDqB;AFuD7B","file":"pfe-health-index.css","sourcesContent":["/*\n * Copyright 2018 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// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n","/*\n * Copyright 2018 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/* Palette of Border Colors */\n/* Palette of Feedback Colors */\n:host {\n display: inline-flex;\n align-items: center;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.box-container {\n display: flex;\n border: 1px solid var(--pfe-theme--color--surface--border, #dfdfdf);\n margin-left: calc(var(--pfe-theme--container-spacer, 1rem) * 0.5);\n}\n\n.box-container .box {\n background: #fff;\n width: 10px;\n height: 20px;\n border-right: 1px solid var(--pfe-theme--color--surface--border, #dfdfdf);\n}\n\n.box-container .box:last-child {\n border-right: 0;\n}\n\n.box-container .box.active.a {\n background-color: #3f9c35;\n}\n\n.box-container .box.active.b {\n background-color: #92d400;\n}\n\n.box-container .box.active.c {\n background-color: #efaa00;\n}\n\n.box-container .box.active.d {\n background-color: #ec7a08;\n}\n\n.box-container .box.active.e {\n background-color: #cc0000;\n}\n\n.box-container .box.active.f {\n background-color: #a30000;\n}\n","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text: $pfelements--gray-dark !default;\n$pfe-color--text--on-dark: $pfe-color--white !default;\n$pfe-color--text--on-saturated: $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link: #06c !default;\n$pfe-color--ui-link--visited: $pfelements--purple !default; // Was #7551a6\n$pfe-color--ui-link--hover: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-dark--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-saturated--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base: $pfelements--blue !default;\n$pfe-color--ui-base--hover: darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement: $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover: $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent: $pfelements--orange !default;\n$pfe-color--ui-accent--hover: darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text: $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover: $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest: $pfe-color--white !default;\n$pfe-color--surface--lightest--text: $pfe-color--text !default;\n$pfe-color--surface--lightest--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus: $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text: $pfe-color--text !default;\n$pfe-color--surface--lighter--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus: $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base: $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text: $pfe-color--text !default;\n$pfe-color--surface--base--link: #00538c !default; // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited: #7551a6 !default;\n$pfe-color--surface--base--link--hover: #00305b !default;\n$pfe-color--surface--base--link--focus: #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker: $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest: $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement: $pfelements--blue;\n$pfe-color--surface--complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent: $pfelements--orange;\n$pfe-color--surface--accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc\n$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7\n$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical: $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important: $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest: $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest: $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate: $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest: $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest: $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success: #2e7d32 !default;\n$pfe-color--feedback--success--lightest: $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest: #1b5e20 !default;\n\n$pfe-color--feedback--info: #0277bd !default;\n$pfe-color--feedback--info--lightest: $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest: #01579b !default;\n\n$pfe-color--feedback--default: $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest: $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest: $pfe-color--gray-800 !default;\n","@import \"../../pfe-sass/pfe-sass\";\n\n/// ===========================================================================\n/// Component Specific SASS Vars\n/// ===========================================================================\n\n$pfe-health--width: 10px;\n$pfe-health--height: $pfe-health--width * 2;\n\n$pfe-health--color-bg: #fff;\n\n$pfe-health--color-a: #3f9c35;\n$pfe-health--color-b: #92d400;\n$pfe-health--color-c: #efaa00;\n$pfe-health--color-d: #ec7a08;\n$pfe-health--color-e: #cc0000;\n$pfe-health--color-f: #a30000;\n\n/// ===========================================================================\n/// WHATEVER\n/// ===========================================================================\n\n:host {\n display: inline-flex;\n align-items: center;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.box-container {\n display: flex;\n border: 1px solid #{pfe-color(surface--border)};\n margin-left: calc(#{pfe-var(container-spacer)} * 0.5);\n\n .box {\n background: $pfe-health--color-bg;\n width: $pfe-health--width;\n height: $pfe-health--height;\n border-right: 1px solid #{pfe-color(surface--border)};\n\n &:last-child {\n border-right: 0;\n }\n\n &.active {\n &.a {\n background-color: $pfe-health--color-a;\n }\n\n &.b {\n background-color: $pfe-health--color-b;\n }\n\n &.c {\n background-color: $pfe-health--color-c;\n }\n\n &.d {\n background-color: $pfe-health--color-d;\n }\n\n &.e {\n background-color: $pfe-health--color-e;\n }\n\n &.f {\n background-color: $pfe-health--color-f;\n }\n }\n }\n}\n"]} \ No newline at end of file diff --git a/elements/pfe-health-index/pfe-health-index.css.min.map b/elements/pfe-health-index/pfe-health-index.css.min.map new file mode 100644 index 0000000000..e69de29bb2 diff --git a/elements/pfe-health-index/pfe-health-index.js b/elements/pfe-health-index/pfe-health-index.js new file mode 100644 index 0000000000..8742df3ea1 --- /dev/null +++ b/elements/pfe-health-index/pfe-health-index.js @@ -0,0 +1,91 @@ +import PFElement from '../pfelement/pfelement.js'; + +/* + * @license + * Copyright 2019 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 PfeHealthIndex extends PFElement { + + get html() { + return `
    +
    +
    +
    +
    +
    +
    +
    +
    `; + } + static get tag() { + return "pfe-health-index"; + } + + get templateUrl() { + return "pfe-health-index.html"; + } + + get styleUrl() { + return "pfe-health-index.scss"; + } + + static get observedAttributes() { + return ["health-index"]; + } + + constructor() { + super(PfeHealthIndex.tag); + } + + attributeChangedCallback(attr, oldValue, newValue) { + const healthIndex = newValue.toLowerCase(); + const healthIndexUpperCase = newValue.toUpperCase(); + const boxes = [...this.shadowRoot.querySelectorAll(".box")]; + + this.innerHTML = healthIndexUpperCase; + this.shadowRoot.querySelector( + "#healthIndex" + ).innerText = healthIndexUpperCase; + + boxes.forEach(box => { + if (box.classList.contains(healthIndex)) { + box.classList.add("active"); + } else { + box.classList.remove("active"); + } + }); + + if (!this.shadowRoot.querySelector(".box.active")) { + console.warn( + `${ + PfeHealthIndex.tag + }: a valid health-index was not provided. Please use A, B, C, D, E, or F` + ); + } + } +} + +PFElement.create(PfeHealthIndex); + +export default PfeHealthIndex; +//# sourceMappingURL=pfe-health-index.js.map diff --git a/elements/pfe-health-index/pfe-health-index.js.map b/elements/pfe-health-index/pfe-health-index.js.map new file mode 100644 index 0000000000..8f40fcb87a --- /dev/null +++ b/elements/pfe-health-index/pfe-health-index.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-health-index.js","sources":["pfe-health-index.js"],"sourcesContent":["/*\n * @license\n * Copyright 2019 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/*\n * Copyright 2018 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\nimport PFElement from \"../pfelement/pfelement.js\";\n\nclass PfeHealthIndex extends PFElement {\n\n get html() {\n return `
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    `;\n }\n static get tag() {\n return \"pfe-health-index\";\n }\n\n get templateUrl() {\n return \"pfe-health-index.html\";\n }\n\n get styleUrl() {\n return \"pfe-health-index.scss\";\n }\n\n static get observedAttributes() {\n return [\"health-index\"];\n }\n\n constructor() {\n super(PfeHealthIndex.tag);\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n const healthIndex = newValue.toLowerCase();\n const healthIndexUpperCase = newValue.toUpperCase();\n const boxes = [...this.shadowRoot.querySelectorAll(\".box\")];\n\n this.innerHTML = healthIndexUpperCase;\n this.shadowRoot.querySelector(\n \"#healthIndex\"\n ).innerText = healthIndexUpperCase;\n\n boxes.forEach(box => {\n if (box.classList.contains(healthIndex)) {\n box.classList.add(\"active\");\n } else {\n box.classList.remove(\"active\");\n }\n });\n\n if (!this.shadowRoot.querySelector(\".box.active\")) {\n console.warn(\n `${\n PfeHealthIndex.tag\n }: a valid health-index was not provided. Please use A, B, C, D, E, or F`\n );\n }\n }\n}\n\nPFElement.create(PfeHealthIndex);\n\nexport default PfeHealthIndex;\n"],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;;;;;;;;;;;AAuBA,AAwBA;AACA,MAAM,cAAc,SAAS,SAAS,CAAC;;EAErC,IAAI,IAAI,GAAG;IACT,OAAO,CAAC;;;;;;;;MAQN,CAAC,CAAC;GACL;EACD,WAAW,GAAG,GAAG;IACf,OAAO,kBAAkB,CAAC;GAC3B;;EAED,IAAI,WAAW,GAAG;IAChB,OAAO,uBAAuB,CAAC;GAChC;;EAED,IAAI,QAAQ,GAAG;IACb,OAAO,uBAAuB,CAAC;GAChC;;EAED,WAAW,kBAAkB,GAAG;IAC9B,OAAO,CAAC,cAAc,CAAC,CAAC;GACzB;;EAED,WAAW,GAAG;IACZ,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;GAC3B;;EAED,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE;IACjD,MAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;IAC3C,MAAM,oBAAoB,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;IACpD,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC;;IAE5D,IAAI,CAAC,SAAS,GAAG,oBAAoB,CAAC;IACtC,IAAI,CAAC,UAAU,CAAC,aAAa;MAC3B,cAAc;KACf,CAAC,SAAS,GAAG,oBAAoB,CAAC;;IAEnC,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI;MACnB,IAAI,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;QACvC,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;OAC7B,MAAM;QACL,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;OAChC;KACF,CAAC,CAAC;;IAEH,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,EAAE;MACjD,OAAO,CAAC,IAAI;QACV,CAAC;UACC,cAAc,CAAC,GAAG;SACnB,uEAAuE,CAAC;OAC1E,CAAC;KACH;GACF;CACF;;AAED,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;;;;"} \ No newline at end of file diff --git a/elements/pfe-health-index/pfe-health-index.min.css b/elements/pfe-health-index/pfe-health-index.min.css new file mode 100644 index 0000000000..743780abe2 --- /dev/null +++ b/elements/pfe-health-index/pfe-health-index.min.css @@ -0,0 +1 @@ +:host{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}:host([hidden]){display:none}.box-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border:1px solid #dfdfdf;border:1px solid var(--pfe-theme--color--surface--border,#dfdfdf);margin-left:calc(1rem * .5);margin-left:calc(var(--pfe-theme--container-spacer,1rem) * .5)}.box-container .box{background:#fff;width:10px;height:20px;border-right:1px solid #dfdfdf;border-right:1px solid var(--pfe-theme--color--surface--border,#dfdfdf)}.box-container .box:last-child{border-right:0}.box-container .box.active.a{background-color:#3f9c35}.box-container .box.active.b{background-color:#92d400}.box-container .box.active.c{background-color:#efaa00}.box-container .box.active.d{background-color:#ec7a08}.box-container .box.active.e{background-color:#c00}.box-container .box.active.f{background-color:#a30000} \ No newline at end of file diff --git a/elements/pfe-health-index/pfe-health-index.min.js b/elements/pfe-health-index/pfe-health-index.min.js new file mode 100644 index 0000000000..20d462ed4e --- /dev/null +++ b/elements/pfe-health-index/pfe-health-index.min.js @@ -0,0 +1,25 @@ +import e from"../pfelement/pfelement.min.js"; +/* + * @license + * Copyright 2019 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{get html(){return'
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    '}static get tag(){return"pfe-health-index"}get templateUrl(){return"pfe-health-index.html"}get styleUrl(){return"pfe-health-index.scss"}static get observedAttributes(){return["health-index"]}constructor(){super(t.tag)}attributeChangedCallback(e,o,i){const a=i.toLowerCase(),r=i.toUpperCase(),n=[...this.shadowRoot.querySelectorAll(".box")];this.innerHTML=r,this.shadowRoot.querySelector("#healthIndex").innerText=r,n.forEach(e=>{e.classList.contains(a)?e.classList.add("active"):e.classList.remove("active")}),this.shadowRoot.querySelector(".box.active")||console.warn(`${t.tag}: a valid health-index was not provided. Please use A, B, C, D, E, or F`)}}e.create(t);export default t; +//# sourceMappingURL=pfe-health-index.min.js.map diff --git a/elements/pfe-health-index/pfe-health-index.min.js.map b/elements/pfe-health-index/pfe-health-index.min.js.map new file mode 100644 index 0000000000..4046dfa1f6 --- /dev/null +++ b/elements/pfe-health-index/pfe-health-index.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-health-index.min.js","sources":["pfe-health-index.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 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\nclass PfeHealthIndex extends PFElement {\n\n get html() {\n return `
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    `;\n }\n static get tag() {\n return \"pfe-health-index\";\n }\n\n get templateUrl() {\n return \"pfe-health-index.html\";\n }\n\n get styleUrl() {\n return \"pfe-health-index.scss\";\n }\n\n static get observedAttributes() {\n return [\"health-index\"];\n }\n\n constructor() {\n super(PfeHealthIndex.tag);\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n const healthIndex = newValue.toLowerCase();\n const healthIndexUpperCase = newValue.toUpperCase();\n const boxes = [...this.shadowRoot.querySelectorAll(\".box\")];\n\n this.innerHTML = healthIndexUpperCase;\n this.shadowRoot.querySelector(\n \"#healthIndex\"\n ).innerText = healthIndexUpperCase;\n\n boxes.forEach(box => {\n if (box.classList.contains(healthIndex)) {\n box.classList.add(\"active\");\n } else {\n box.classList.remove(\"active\");\n }\n });\n\n if (!this.shadowRoot.querySelector(\".box.active\")) {\n console.warn(\n `${\n PfeHealthIndex.tag\n }: a valid health-index was not provided. Please use A, B, C, D, E, or F`\n );\n }\n }\n}\n\nPFElement.create(PfeHealthIndex);\n\nexport default PfeHealthIndex;\n//# sourceMappingURL=pfe-health-index.js.map\n"],"names":["PfeHealthIndex","PFElement","html","tag","templateUrl","styleUrl","observedAttributes","[object Object]","super","attr","oldValue","newValue","healthIndex","toLowerCase","healthIndexUpperCase","toUpperCase","boxes","this","shadowRoot","querySelectorAll","innerHTML","querySelector","innerText","forEach","box","classList","contains","add","remove","console","warn","create"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EA0BA,MAAMA,UAAuBC,EAE3BC,WACE,MAAO,uwCAUTC,iBACE,MAAO,mBAGTC,kBACE,MAAO,wBAGTC,eACE,MAAO,wBAGTC,gCACE,MAAO,CAAC,gBAGVC,cACEC,MAAMR,EAAeG,KAGvBI,yBAAyBE,EAAMC,EAAUC,GACvC,MAAMC,EAAcD,EAASE,cACvBC,EAAuBH,EAASI,cAChCC,EAAQ,IAAIC,KAAKC,WAAWC,iBAAiB,SAEnDF,KAAKG,UAAYN,EACjBG,KAAKC,WAAWG,cACd,gBACAC,UAAYR,EAEdE,EAAMO,QAAQC,IACRA,EAAIC,UAAUC,SAASd,GACzBY,EAAIC,UAAUE,IAAI,UAElBH,EAAIC,UAAUG,OAAO,YAIpBX,KAAKC,WAAWG,cAAc,gBACjCQ,QAAQC,QAEJ9B,EAAeG,+EAOzBF,EAAU8B,OAAO/B"} \ No newline at end of file diff --git a/elements/pfe-health-index/pfe-health-index.umd.js b/elements/pfe-health-index/pfe-health-index.umd.js new file mode 100644 index 0000000000..a01d40bfea --- /dev/null +++ b/elements/pfe-health-index/pfe-health-index.umd.js @@ -0,0 +1,156 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('../pfelement/pfelement.umd')) : + typeof define === 'function' && define.amd ? define(['../pfelement/pfelement.umd'], factory) : + (global.PfeHealthIndex = factory(global.PFElement)); +}(this, (function (PFElement) { 'use strict'; + + PFElement = PFElement && PFElement.hasOwnProperty('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; + }; + + 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); + } + }; + + /* + * @license + * Copyright 2019 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 PfeHealthIndex = function (_PFElement) { + inherits(PfeHealthIndex, _PFElement); + createClass(PfeHealthIndex, [{ + key: "html", + get: function get$$1() { + return "
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    "; + } + }, { + key: "templateUrl", + get: function get$$1() { + return "pfe-health-index.html"; + } + }, { + key: "styleUrl", + get: function get$$1() { + return "pfe-health-index.scss"; + } + }], [{ + key: "tag", + get: function get$$1() { + return "pfe-health-index"; + } + }, { + key: "observedAttributes", + get: function get$$1() { + return ["health-index"]; + } + }]); + + function PfeHealthIndex() { + classCallCheck(this, PfeHealthIndex); + return possibleConstructorReturn(this, (PfeHealthIndex.__proto__ || Object.getPrototypeOf(PfeHealthIndex)).call(this, PfeHealthIndex.tag)); + } + + createClass(PfeHealthIndex, [{ + key: "attributeChangedCallback", + value: function attributeChangedCallback(attr, oldValue, newValue) { + var healthIndex = newValue.toLowerCase(); + var healthIndexUpperCase = newValue.toUpperCase(); + var boxes = [].concat(toConsumableArray(this.shadowRoot.querySelectorAll(".box"))); + + this.innerHTML = healthIndexUpperCase; + this.shadowRoot.querySelector("#healthIndex").innerText = healthIndexUpperCase; + + boxes.forEach(function (box) { + if (box.classList.contains(healthIndex)) { + box.classList.add("active"); + } else { + box.classList.remove("active"); + } + }); + + if (!this.shadowRoot.querySelector(".box.active")) { + console.warn(PfeHealthIndex.tag + ": a valid health-index was not provided. Please use A, B, C, D, E, or F"); + } + } + }]); + return PfeHealthIndex; + }(PFElement); + + PFElement.create(PfeHealthIndex); + + return PfeHealthIndex; + +}))); +//# sourceMappingURL=pfe-health-index.umd.js.map diff --git a/elements/pfe-health-index/pfe-health-index.umd.js.map b/elements/pfe-health-index/pfe-health-index.umd.js.map new file mode 100644 index 0000000000..d6fb5b3d08 --- /dev/null +++ b/elements/pfe-health-index/pfe-health-index.umd.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-health-index.umd.js","sources":["pfe-health-index.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 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\nclass PfeHealthIndex extends PFElement {\n\n get html() {\n return `
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    `;\n }\n static get tag() {\n return \"pfe-health-index\";\n }\n\n get templateUrl() {\n return \"pfe-health-index.html\";\n }\n\n get styleUrl() {\n return \"pfe-health-index.scss\";\n }\n\n static get observedAttributes() {\n return [\"health-index\"];\n }\n\n constructor() {\n super(PfeHealthIndex.tag);\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n const healthIndex = newValue.toLowerCase();\n const healthIndexUpperCase = newValue.toUpperCase();\n const boxes = [...this.shadowRoot.querySelectorAll(\".box\")];\n\n this.innerHTML = healthIndexUpperCase;\n this.shadowRoot.querySelector(\n \"#healthIndex\"\n ).innerText = healthIndexUpperCase;\n\n boxes.forEach(box => {\n if (box.classList.contains(healthIndex)) {\n box.classList.add(\"active\");\n } else {\n box.classList.remove(\"active\");\n }\n });\n\n if (!this.shadowRoot.querySelector(\".box.active\")) {\n console.warn(\n `${\n PfeHealthIndex.tag\n }: a valid health-index was not provided. Please use A, B, C, D, E, or F`\n );\n }\n }\n}\n\nPFElement.create(PfeHealthIndex);\n\nexport default PfeHealthIndex;\n//# sourceMappingURL=pfe-health-index.js.map\n"],"names":["PfeHealthIndex","tag","attr","oldValue","newValue","healthIndex","toLowerCase","healthIndexUpperCase","toUpperCase","boxes","shadowRoot","querySelectorAll","innerHTML","querySelector","innerText","forEach","box","classList","contains","add","remove","console","warn","PFElement","create"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAEA;;;;;;;;;;;;;;;;;;;;;;;;MAwBMA;;;;6BAEO;EACT;EASD;;;6BAKiB;EAChB,aAAO,uBAAP;EACD;;;6BAEc;EACb,aAAO,uBAAP;EACD;;;6BAVgB;EACf,aAAO,kBAAP;EACD;;;6BAU+B;EAC9B,aAAO,CAAC,cAAD,CAAP;EACD;;;EAED,4BAAc;EAAA;EAAA,0HACNA,eAAeC,GADT;EAEb;;;;+CAEwBC,MAAMC,UAAUC,UAAU;EACjD,UAAMC,cAAcD,SAASE,WAAT,EAApB;EACA,UAAMC,uBAAuBH,SAASI,WAAT,EAA7B;EACA,UAAMC,oCAAY,KAAKC,UAAL,CAAgBC,gBAAhB,CAAiC,MAAjC,CAAZ,EAAN;;EAEA,WAAKC,SAAL,GAAiBL,oBAAjB;EACA,WAAKG,UAAL,CAAgBG,aAAhB,CACE,cADF,EAEEC,SAFF,GAEcP,oBAFd;;EAIAE,YAAMM,OAAN,CAAc,eAAO;EACnB,YAAIC,IAAIC,SAAJ,CAAcC,QAAd,CAAuBb,WAAvB,CAAJ,EAAyC;EACvCW,cAAIC,SAAJ,CAAcE,GAAd,CAAkB,QAAlB;EACD,SAFD,MAEO;EACLH,cAAIC,SAAJ,CAAcG,MAAd,CAAqB,QAArB;EACD;EACF,OAND;;EAQA,UAAI,CAAC,KAAKV,UAAL,CAAgBG,aAAhB,CAA8B,aAA9B,CAAL,EAAmD;EACjDQ,gBAAQC,IAAR,CAEItB,eAAeC,GAFnB;EAKD;EACF;;;IA1D0BsB;;EA6D7BA,UAAUC,MAAV,CAAiBxB,cAAjB;;;;;;;;"} \ No newline at end of file diff --git a/elements/pfe-health-index/pfe-health-index.umd.min.js b/elements/pfe-health-index/pfe-health-index.umd.min.js new file mode 100644 index 0000000000..4d1dd4c010 --- /dev/null +++ b/elements/pfe-health-index/pfe-health-index.umd.min.js @@ -0,0 +1,2 @@ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("../pfelement/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min"],t):e.PfeHealthIndex=t(e.PFElement)}(this,function(t){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t;var n=function(){function o(e,t){for(var n=0;n:host{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}:host([hidden]){display:none}.box-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border:1px solid #dfdfdf;border:1px solid var(--pfe-theme--color--surface--border,#dfdfdf);margin-left:calc(1rem * .5);margin-left:calc(var(--pfe-theme--container-spacer,1rem) * .5)}.box-container .box{background:#fff;width:10px;height:20px;border-right:1px solid #dfdfdf;border-right:1px solid var(--pfe-theme--color--surface--border,#dfdfdf)}.box-container .box:last-child{border-right:0}.box-container .box.active.a{background-color:#3f9c35}.box-container .box.active.b{background-color:#92d400}.box-container .box.active.c{background-color:#efaa00}.box-container .box.active.d{background-color:#ec7a08}.box-container .box.active.e{background-color:#c00}.box-container .box.active.f{background-color:#a30000}
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    '}},{key:"templateUrl",get:function(){return"pfe-health-index.html"}},{key:"styleUrl",get:function(){return"pfe-health-index.scss"}}],[{key:"tag",get:function(){return"pfe-health-index"}},{key:"observedAttributes",get:function(){return["health-index"]}}]),n(a,[{key:"attributeChangedCallback",value:function(e,t,n){var o=n.toLowerCase(),r=n.toUpperCase(),i=[].concat(function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t:host{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}:host([hidden]){display:none}.box-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border:1px solid #dfdfdf;border:1px solid var(--pfe-theme--color--surface--border,#dfdfdf);margin-left:calc(1rem * .5);margin-left:calc(var(--pfe-theme--container-spacer,1rem) * .5)}.box-container .box{background:#fff;width:10px;height:20px;border-right:1px solid #dfdfdf;border-right:1px solid var(--pfe-theme--color--surface--border,#dfdfdf)}.box-container .box:last-child{border-right:0}.box-container .box.active.a{background-color:#3f9c35}.box-container .box.active.b{background-color:#92d400}.box-container .box.active.c{background-color:#efaa00}.box-container .box.active.d{background-color:#ec7a08}.box-container .box.active.e{background-color:#c00}.box-container .box.active.f{background-color:#a30000}
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    `;\n }\n static get tag() {\n return \"pfe-health-index\";\n }\n\n get templateUrl() {\n return \"pfe-health-index.html\";\n }\n\n get styleUrl() {\n return \"pfe-health-index.scss\";\n }\n\n static get observedAttributes() {\n return [\"health-index\"];\n }\n\n constructor() {\n super(PfeHealthIndex.tag);\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n const healthIndex = newValue.toLowerCase();\n const healthIndexUpperCase = newValue.toUpperCase();\n const boxes = [...this.shadowRoot.querySelectorAll(\".box\")];\n\n this.innerHTML = healthIndexUpperCase;\n this.shadowRoot.querySelector(\n \"#healthIndex\"\n ).innerText = healthIndexUpperCase;\n\n boxes.forEach(box => {\n if (box.classList.contains(healthIndex)) {\n box.classList.add(\"active\");\n } else {\n box.classList.remove(\"active\");\n }\n });\n\n if (!this.shadowRoot.querySelector(\".box.active\")) {\n console.warn(\n `${\n PfeHealthIndex.tag\n }: a valid health-index was not provided. Please use A, B, C, D, E, or F`\n );\n }\n }\n}\n\nPFElement.create(PfeHealthIndex);\n\nexport default PfeHealthIndex;\n//# sourceMappingURL=pfe-health-index.js.map\n"],"names":["PfeHealthIndex","tag","PFElement","attr","oldValue","newValue","healthIndex","toLowerCase","healthIndexUpperCase","toUpperCase","boxes","this","shadowRoot","querySelectorAll","innerHTML","querySelector","innerText","forEach","box","classList","contains","add","remove","warn","create"],"mappings":"wjBA0BMA,gWA8BIA,EAAeC,yUA9BIC,01CAkBlB,+DAIA,4DARA,oEAYA,CAAC,wEAOeC,EAAMC,EAAUC,OACjCC,EAAcD,EAASE,cACvBC,EAAuBH,EAASI,cAChCC,mIAAYC,KAAKC,WAAWC,iBAAiB,eAE9CC,UAAYN,OACZI,WAAWG,cACd,gBACAC,UAAYR,IAERS,QAAQ,YACRC,EAAIC,UAAUC,SAASd,KACrBa,UAAUE,IAAI,YAEdF,UAAUG,OAAO,YAIpBX,KAAKC,WAAWG,cAAc,wBACzBQ,KAEJvB,EAAeC,+FAOzBC,EAAUsB,OAAOxB"} \ No newline at end of file diff --git a/elements/pfe-icon-panel/package.json b/elements/pfe-icon-panel/package.json index 9824a56265..a1c741a8bb 100644 --- a/elements/pfe-icon-panel/package.json +++ b/elements/pfe-icon-panel/package.json @@ -4,7 +4,7 @@ "className": "PfeIconPanel", "elementName": "pfe-icon-panel" }, - "version": "1.0.0-prerelease.11", + "version": "1.0.0-prerelease.13", "publishConfig": { "access": "public" }, @@ -15,7 +15,7 @@ ], "repository": { "type": "git", - "url" : "github:patternfly/patternfly-elements", + "url": "github:patternfly/patternfly-elements", "directory": "elements/pfe-icon-panel" }, "main": "pfe-icon-panel.js", @@ -33,8 +33,8 @@ ], "license": "MIT", "dependencies": { - "@patternfly/pfe-sass": "^1.0.0-prerelease.11", - "@patternfly/pfelement": "^1.0.0-prerelease.11" + "@patternfly/pfe-sass": "^1.0.0-prerelease.13", + "@patternfly/pfelement": "^1.0.0-prerelease.13" }, "generator-pfelement-version": "0.5.0", "gitHead": "dfa74e0495c556ebdd1edb61c6d406621d1b6421" diff --git a/elements/pfe-icon-panel/pfe-icon-panel.css b/elements/pfe-icon-panel/pfe-icon-panel.css new file mode 100644 index 0000000000..07fd1a9d95 --- /dev/null +++ b/elements/pfe-icon-panel/pfe-icon-panel.css @@ -0,0 +1,85 @@ +/* + * Copyright 2018 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. + */ +/* Palette of Border Colors */ +/* Palette of Feedback Colors */ +:host { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-content: flex-start; + -ms-flex-line-pack: start; + align-content: flex-start; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +@media (min-width: 576px) { + :host { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } +} + +:host pfe-icon { + --pfe-icon--spacing: var(--pfe-theme--container-spacer, 1rem); + --pfe-icon--size: var(--pfe-theme--icon-size, 64px); + margin-right: var(--pfe-icon--spacing); + font-size: var(--pfe-icon--size); + line-height: var(--pfe-icon--size); + padding: 0.05em; + min-width: var(--pfe-icon--size); + max-width: var(--pfe-icon--size); +} + +:host ::slotted([slot="header"]), +:host ::slotted([slot="footer"]) { + display: block; +} + +:host ::slotted([slot="footer"]) { + margin-top: 1em; +} + +:host([stacked]) { + -webkit-box-orient: vertical !important; + -webkit-box-direction: normal !important; + -webkit-flex-direction: column !important; + -ms-flex-direction: column !important; + flex-direction: column !important; +} + +:host([stacked][centered]) { + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + text-align: center; +} + +/*# sourceMappingURL=pfe-icon-panel.css.map */ diff --git a/elements/pfe-icon-panel/pfe-icon-panel.css.map b/elements/pfe-icon-panel/pfe-icon-panel.css.map new file mode 100644 index 0000000000..bd2b9b5091 --- /dev/null +++ b/elements/pfe-icon-panel/pfe-icon-panel.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","pfe-icon-panel.css","../../pfe-sass/variables/_colors.scss","pfe-icon-panel.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;ECoBE;AC4GF,6BAAA;AAOA,+BAAA;ACxHA;EACE,oBAAa;EAAb,qBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,iCAAyB;MAAzB,yBAAyB;UAAzB,yBAAyB;EACzB,4BAAsB;EAAtB,6BAAsB;EAAtB,8BAAsB;MAAtB,0BAAsB;UAAtB,sBAAsB;AFSxB;;AEPE;EALF;IAME,8BAAmB;IAAnB,6BAAmB;IAAnB,2BAAmB;QAAnB,uBAAmB;YAAnB,mBAAmB;EFWnB;AACF;;AERA;EACE,6EAAoB;EACpB,sEAAiB;EAEjB,sCAAsC;EACtC,gCAAgC;EAChC,kCAAkC;EAClC,eAxByC;EAyBzC,gCAAgC;EAChC,gCAAgC;AFUlC;;AEPA;;EAEE,cAAc;AFUhB;;AEPA;EACE,eAAe;AFUjB;;AENA;EACE,uCAAiC;EAAjC,wCAAiC;EAAjC,yCAAiC;MAAjC,qCAAiC;UAAjC,iCAAiC;AFSnC;;AENA;EACE,yBAAmB;EAAnB,2BAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;EACnB,kBAAkB;AFSpB","file":"pfe-icon-panel.css","sourcesContent":["/*\n * Copyright 2018 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// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n","/*\n * Copyright 2018 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/* Palette of Border Colors */\n/* Palette of Feedback Colors */\n:host {\n display: flex;\n align-content: flex-start;\n flex-direction: column;\n}\n\n@media (min-width: 576px) {\n :host {\n flex-direction: row;\n }\n}\n\n:host pfe-icon {\n --pfe-icon--spacing: var(--pfe-theme--container-spacer, 1rem);\n --pfe-icon--size: var(--pfe-theme--icon-size, 64px);\n margin-right: var(--pfe-icon--spacing);\n font-size: var(--pfe-icon--size);\n line-height: var(--pfe-icon--size);\n padding: 0.05em;\n min-width: var(--pfe-icon--size);\n max-width: var(--pfe-icon--size);\n}\n\n:host ::slotted([slot=\"header\"]),\n:host ::slotted([slot=\"footer\"]) {\n display: block;\n}\n\n:host ::slotted([slot=\"footer\"]) {\n margin-top: 1em;\n}\n\n:host([stacked]) {\n flex-direction: column !important;\n}\n\n:host([stacked][centered]) {\n align-items: center;\n text-align: center;\n}\n","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text: $pfelements--gray-dark !default;\n$pfe-color--text--on-dark: $pfe-color--white !default;\n$pfe-color--text--on-saturated: $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link: #06c !default;\n$pfe-color--ui-link--visited: $pfelements--purple !default; // Was #7551a6\n$pfe-color--ui-link--hover: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-dark--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-saturated--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base: $pfelements--blue !default;\n$pfe-color--ui-base--hover: darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement: $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover: $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent: $pfelements--orange !default;\n$pfe-color--ui-accent--hover: darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text: $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover: $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest: $pfe-color--white !default;\n$pfe-color--surface--lightest--text: $pfe-color--text !default;\n$pfe-color--surface--lightest--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus: $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text: $pfe-color--text !default;\n$pfe-color--surface--lighter--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus: $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base: $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text: $pfe-color--text !default;\n$pfe-color--surface--base--link: #00538c !default; // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited: #7551a6 !default;\n$pfe-color--surface--base--link--hover: #00305b !default;\n$pfe-color--surface--base--link--focus: #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker: $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest: $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement: $pfelements--blue;\n$pfe-color--surface--complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent: $pfelements--orange;\n$pfe-color--surface--accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc\n$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7\n$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical: $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important: $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest: $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest: $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate: $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest: $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest: $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success: #2e7d32 !default;\n$pfe-color--feedback--success--lightest: $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest: #1b5e20 !default;\n\n$pfe-color--feedback--info: #0277bd !default;\n$pfe-color--feedback--info--lightest: $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest: #01579b !default;\n\n$pfe-color--feedback--default: $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest: $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest: $pfe-color--gray-800 !default;\n","@import \"../../pfe-sass/pfe-sass\";\n\n/// ===========================================================================\n/// Component Specific SASS Vars\n/// ===========================================================================\n\n// Todo: convert these also\n$pfe-icon-panel__icon-size: 64px;\n$pfe-icon-panel__icon-padding: .05em;\n\n\n/// ===========================================================================\n/// DEFUALT RH ICON PANEL\n/// ===========================================================================\n\n:host {\n display: flex;\n align-content: flex-start;\n flex-direction: column;\n\n @media (min-width: $pfe-global--grid-breakpoint--sm) {\n\t\tflex-direction: row;\n\t}\n}\n\n:host pfe-icon {\n --pfe-icon--spacing: #{pfe-var(container-spacer)};\n --pfe-icon--size: var(--pfe-theme--icon-size, #{$pfe-icon-panel__icon-size});\n\n margin-right: var(--pfe-icon--spacing);\n font-size: var(--pfe-icon--size);\n line-height: var(--pfe-icon--size);\n padding: $pfe-icon-panel__icon-padding;\n min-width: var(--pfe-icon--size);\n max-width: var(--pfe-icon--size);\n}\n\n:host ::slotted([slot=\"header\"]),\n:host ::slotted([slot=\"footer\"]) {\n display: block;\n}\n\n:host ::slotted([slot=\"footer\"]) {\n margin-top: 1em;\n}\n\n// Layout Styles\n:host([stacked]) {\n flex-direction: column !important;\n}\n\n:host([stacked][centered]) {\n align-items: center;\n text-align: center;\n}\n"]} \ No newline at end of file diff --git a/elements/pfe-icon-panel/pfe-icon-panel.css.min.map b/elements/pfe-icon-panel/pfe-icon-panel.css.min.map new file mode 100644 index 0000000000..e69de29bb2 diff --git a/elements/pfe-icon-panel/pfe-icon-panel.js b/elements/pfe-icon-panel/pfe-icon-panel.js new file mode 100644 index 0000000000..70b2360e89 --- /dev/null +++ b/elements/pfe-icon-panel/pfe-icon-panel.js @@ -0,0 +1,67 @@ +import PFElement from '../pfelement/pfelement.js'; +import '../pfe-icon/pfe-icon.js'; + +/* + * @license + * Copyright 2019 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 PfeIconPanel extends PFElement { + + get html() { + return ` +
    + + + +
    `; + } + static get tag() { + return "pfe-icon-panel"; + } + + get styleUrl() { + return "pfe-icon-panel.scss"; + } + + get templateUrl() { + return "pfe-icon-panel.html"; + } + + static get observedAttributes() { + return ["icon", "circled"]; + } + + static get cascadingAttributes() { + return { + icon: "pfe-icon", + circled: "pfe-icon" + }; + } + + constructor() { + super(PfeIconPanel); + } +} + +PFElement.create(PfeIconPanel); +//# sourceMappingURL=pfe-icon-panel.js.map diff --git a/elements/pfe-icon-panel/pfe-icon-panel.js.map b/elements/pfe-icon-panel/pfe-icon-panel.js.map new file mode 100644 index 0000000000..84bb3206ec --- /dev/null +++ b/elements/pfe-icon-panel/pfe-icon-panel.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-icon-panel.js","sources":["pfe-icon-panel.js"],"sourcesContent":["/*\n * @license\n * Copyright 2019 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/pfelement.js\";\nimport \"../pfe-icon/pfe-icon.js\";\n\nclass PfeIconPanel extends PFElement {\n\n get html() {\n return `\n
    \n \n \n \n
    `;\n }\n static get tag() {\n return \"pfe-icon-panel\";\n }\n\n get styleUrl() {\n return \"pfe-icon-panel.scss\";\n }\n\n get templateUrl() {\n return \"pfe-icon-panel.html\";\n }\n\n static get observedAttributes() {\n return [\"icon\", \"circled\"];\n }\n\n static get cascadingAttributes() {\n return {\n icon: \"pfe-icon\",\n circled: \"pfe-icon\"\n };\n }\n\n constructor() {\n super(PfeIconPanel);\n }\n}\n\nPFElement.create(PfeIconPanel);\n"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;;;;;AAuBA,AAGA;AACA,MAAM,YAAY,SAAS,SAAS,CAAC;;EAEnC,IAAI,IAAI,GAAG;IACT,OAAO,CAAC;;;;;MAKN,CAAC,CAAC;GACL;EACD,WAAW,GAAG,GAAG;IACf,OAAO,gBAAgB,CAAC;GACzB;;EAED,IAAI,QAAQ,GAAG;IACb,OAAO,qBAAqB,CAAC;GAC9B;;EAED,IAAI,WAAW,GAAG;IAChB,OAAO,qBAAqB,CAAC;GAC9B;;EAED,WAAW,kBAAkB,GAAG;IAC9B,OAAO,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;GAC5B;;EAED,WAAW,mBAAmB,GAAG;IAC/B,OAAO;MACL,IAAI,EAAE,UAAU;MAChB,OAAO,EAAE,UAAU;KACpB,CAAC;GACH;;EAED,WAAW,GAAG;IACZ,KAAK,CAAC,YAAY,CAAC,CAAC;GACrB;CACF;;AAED,SAAS,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC"} \ No newline at end of file diff --git a/elements/pfe-icon-panel/pfe-icon-panel.min.css b/elements/pfe-icon-panel/pfe-icon-panel.min.css new file mode 100644 index 0000000000..20625632c1 --- /dev/null +++ b/elements/pfe-icon-panel/pfe-icon-panel.min.css @@ -0,0 +1 @@ +:host{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}@media (min-width:576px){:host{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}}:host pfe-icon{--pfe-icon--spacing:var(--pfe-theme--container-spacer, 1rem);--pfe-icon--size:var(--pfe-theme--icon-size, 64px);margin-right:var(--pfe-icon--spacing);font-size:var(--pfe-icon--size);line-height:var(--pfe-icon--size);padding:.05em;min-width:var(--pfe-icon--size);max-width:var(--pfe-icon--size)}:host ::slotted([slot=footer]),:host ::slotted([slot=header]){display:block}:host ::slotted([slot=footer]){margin-top:1em}:host([stacked]){-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-webkit-flex-direction:column!important;-ms-flex-direction:column!important;flex-direction:column!important}:host([stacked][centered]){-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:center} \ No newline at end of file diff --git a/elements/pfe-icon-panel/pfe-icon-panel.min.js b/elements/pfe-icon-panel/pfe-icon-panel.min.js new file mode 100644 index 0000000000..b8c208a496 --- /dev/null +++ b/elements/pfe-icon-panel/pfe-icon-panel.min.js @@ -0,0 +1,25 @@ +import e from"../pfelement/pfelement.min.js";import"../pfe-icon/pfe-icon.min.js"; +/* + * @license + * Copyright 2019 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{get html(){return'\n
    \n \n \n \n
    '}static get tag(){return"pfe-icon-panel"}get styleUrl(){return"pfe-icon-panel.scss"}get templateUrl(){return"pfe-icon-panel.html"}static get observedAttributes(){return["icon","circled"]}static get cascadingAttributes(){return{icon:"pfe-icon",circled:"pfe-icon"}}constructor(){super(t)}}e.create(t); +//# sourceMappingURL=pfe-icon-panel.min.js.map diff --git a/elements/pfe-icon-panel/pfe-icon-panel.min.js.map b/elements/pfe-icon-panel/pfe-icon-panel.min.js.map new file mode 100644 index 0000000000..05da35b7b6 --- /dev/null +++ b/elements/pfe-icon-panel/pfe-icon-panel.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-icon-panel.min.js","sources":["pfe-icon-panel.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\nimport '../pfe-icon/pfe-icon.js';\n\n/*\n * @license\n * Copyright 2019 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\nclass PfeIconPanel extends PFElement {\n\n get html() {\n return `\n
    \n \n \n \n
    `;\n }\n static get tag() {\n return \"pfe-icon-panel\";\n }\n\n get styleUrl() {\n return \"pfe-icon-panel.scss\";\n }\n\n get templateUrl() {\n return \"pfe-icon-panel.html\";\n }\n\n static get observedAttributes() {\n return [\"icon\", \"circled\"];\n }\n\n static get cascadingAttributes() {\n return {\n icon: \"pfe-icon\",\n circled: \"pfe-icon\"\n };\n }\n\n constructor() {\n super(PfeIconPanel);\n }\n}\n\nPFElement.create(PfeIconPanel);\n//# sourceMappingURL=pfe-icon-panel.js.map\n"],"names":["PfeIconPanel","PFElement","html","tag","styleUrl","templateUrl","observedAttributes","cascadingAttributes","icon","circled","[object Object]","super","create"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EA2BA,MAAMA,UAAqBC,EAEzBC,WACE,MAAO,64CAOTC,iBACE,MAAO,iBAGTC,eACE,MAAO,sBAGTC,kBACE,MAAO,sBAGTC,gCACE,MAAO,CAAC,OAAQ,WAGlBC,iCACE,MAAO,CACLC,KAAM,WACNC,QAAS,YAIbC,cACEC,MAAMX,IAIVC,EAAUW,OAAOZ"} \ No newline at end of file diff --git a/elements/pfe-icon-panel/pfe-icon-panel.umd.js b/elements/pfe-icon-panel/pfe-icon-panel.umd.js new file mode 100644 index 0000000000..5f36a5679f --- /dev/null +++ b/elements/pfe-icon-panel/pfe-icon-panel.umd.js @@ -0,0 +1,129 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('../pfelement/pfelement.umd'), require('../pfe-icon/pfe-icon.umd')) : + typeof define === 'function' && define.amd ? define(['../pfelement/pfelement.umd', '../pfe-icon/pfe-icon.umd'], factory) : + (factory(global.PFElement)); +}(this, (function (PFElement) { 'use strict'; + + PFElement = PFElement && PFElement.hasOwnProperty('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; + }; + + /* + * @license + * Copyright 2019 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 PfeIconPanel = function (_PFElement) { + inherits(PfeIconPanel, _PFElement); + createClass(PfeIconPanel, [{ + key: 'html', + get: function get$$1() { + return '\n
    \n \n \n \n
    '; + } + }, { + key: 'styleUrl', + get: function get$$1() { + return "pfe-icon-panel.scss"; + } + }, { + key: 'templateUrl', + get: function get$$1() { + return "pfe-icon-panel.html"; + } + }], [{ + key: 'tag', + get: function get$$1() { + return "pfe-icon-panel"; + } + }, { + key: 'observedAttributes', + get: function get$$1() { + return ["icon", "circled"]; + } + }, { + key: 'cascadingAttributes', + get: function get$$1() { + return { + icon: "pfe-icon", + circled: "pfe-icon" + }; + } + }]); + + function PfeIconPanel() { + classCallCheck(this, PfeIconPanel); + return possibleConstructorReturn(this, (PfeIconPanel.__proto__ || Object.getPrototypeOf(PfeIconPanel)).call(this, PfeIconPanel)); + } + + return PfeIconPanel; + }(PFElement); + + PFElement.create(PfeIconPanel); + +}))); +//# sourceMappingURL=pfe-icon-panel.umd.js.map diff --git a/elements/pfe-icon-panel/pfe-icon-panel.umd.js.map b/elements/pfe-icon-panel/pfe-icon-panel.umd.js.map new file mode 100644 index 0000000000..2208c99ece --- /dev/null +++ b/elements/pfe-icon-panel/pfe-icon-panel.umd.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-icon-panel.umd.js","sources":["pfe-icon-panel.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\nimport '../pfe-icon/pfe-icon.js';\n\n/*\n * @license\n * Copyright 2019 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\nclass PfeIconPanel extends PFElement {\n\n get html() {\n return `\n
    \n \n \n \n
    `;\n }\n static get tag() {\n return \"pfe-icon-panel\";\n }\n\n get styleUrl() {\n return \"pfe-icon-panel.scss\";\n }\n\n get templateUrl() {\n return \"pfe-icon-panel.html\";\n }\n\n static get observedAttributes() {\n return [\"icon\", \"circled\"];\n }\n\n static get cascadingAttributes() {\n return {\n icon: \"pfe-icon\",\n circled: \"pfe-icon\"\n };\n }\n\n constructor() {\n super(PfeIconPanel);\n }\n}\n\nPFElement.create(PfeIconPanel);\n//# sourceMappingURL=pfe-icon-panel.js.map\n"],"names":["PfeIconPanel","icon","circled","PFElement","create"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAGA;;;;;;;;;;;;;;;;;;;;;;;;MAwBMA;;;;6BAEO;EACT;EAMD;;;6BAKc;EACb,aAAO,qBAAP;EACD;;;6BAEiB;EAChB,aAAO,qBAAP;EACD;;;6BAVgB;EACf,aAAO,gBAAP;EACD;;;6BAU+B;EAC9B,aAAO,CAAC,MAAD,EAAS,SAAT,CAAP;EACD;;;6BAEgC;EAC/B,aAAO;EACLC,cAAM,UADD;EAELC,iBAAS;EAFJ,OAAP;EAID;;;EAED,0BAAc;EAAA;EAAA,sHACNF,YADM;EAEb;;;IAnCwBG;;EAsC3BA,UAAUC,MAAV,CAAiBJ,YAAjB;;;;"} \ No newline at end of file diff --git a/elements/pfe-icon-panel/pfe-icon-panel.umd.min.js b/elements/pfe-icon-panel/pfe-icon-panel.umd.min.js new file mode 100644 index 0000000000..676adfb66f --- /dev/null +++ b/elements/pfe-icon-panel/pfe-icon-panel.umd.min.js @@ -0,0 +1,2 @@ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("../pfelement/pfelement.umd.min"),require("../pfe-icon/pfe-icon.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min","../pfe-icon/pfe-icon.umd.min"],t):t(e.PFElement)}(this,function(n){"use strict";n=n&&n.hasOwnProperty("default")?n.default:n;var i=function(){function i(e,t){for(var n=0;n:host{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}@media (min-width:576px){:host{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}}:host pfe-icon{--pfe-icon--spacing:var(--pfe-theme--container-spacer, 1rem);--pfe-icon--size:var(--pfe-theme--icon-size, 64px);margin-right:var(--pfe-icon--spacing);font-size:var(--pfe-icon--size);line-height:var(--pfe-icon--size);padding:.05em;min-width:var(--pfe-icon--size);max-width:var(--pfe-icon--size)}:host ::slotted([slot=footer]),:host ::slotted([slot=header]){display:block}:host ::slotted([slot=footer]){margin-top:1em}:host([stacked]){-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-webkit-flex-direction:column!important;-ms-flex-direction:column!important;flex-direction:column!important}:host([stacked][centered]){-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:center}\n
    \n \n \n \n
    '}},{key:"styleUrl",get:function(){return"pfe-icon-panel.scss"}},{key:"templateUrl",get:function(){return"pfe-icon-panel.html"}}],[{key:"tag",get:function(){return"pfe-icon-panel"}},{key:"observedAttributes",get:function(){return["icon","circled"]}},{key:"cascadingAttributes",get:function(){return{icon:"pfe-icon",circled:"pfe-icon"}}}]),t}();n.create(e)}); +//# sourceMappingURL=pfe-icon-panel.umd.min.js.map diff --git a/elements/pfe-icon-panel/pfe-icon-panel.umd.min.js.map b/elements/pfe-icon-panel/pfe-icon-panel.umd.min.js.map new file mode 100644 index 0000000000..d7f66d339a --- /dev/null +++ b/elements/pfe-icon-panel/pfe-icon-panel.umd.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-icon-panel.umd.min.js","sources":["pfe-icon-panel.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\nimport '../pfe-icon/pfe-icon.js';\n\n/*\n * @license\n * Copyright 2019 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\nclass PfeIconPanel extends PFElement {\n\n get html() {\n return `\n
    \n \n \n \n
    `;\n }\n static get tag() {\n return \"pfe-icon-panel\";\n }\n\n get styleUrl() {\n return \"pfe-icon-panel.scss\";\n }\n\n get templateUrl() {\n return \"pfe-icon-panel.html\";\n }\n\n static get observedAttributes() {\n return [\"icon\", \"circled\"];\n }\n\n static get cascadingAttributes() {\n return {\n icon: \"pfe-icon\",\n circled: \"pfe-icon\"\n };\n }\n\n constructor() {\n super(PfeIconPanel);\n }\n}\n\nPFElement.create(PfeIconPanel);\n//# sourceMappingURL=pfe-icon-panel.js.map\n"],"names":["PfeIconPanel","PFElement","create"],"mappings":"+lBA2BMA,gWAkCIA,uUAlCiBC,69CAehB,gEAIA,0DARA,kEAYA,CAAC,OAAQ,6DAIT,MACC,mBACG,qBASfA,EAAUC,OAAOF"} \ No newline at end of file diff --git a/elements/pfe-icon/package.json b/elements/pfe-icon/package.json index af3f8c6260..ced9fd7ac5 100644 --- a/elements/pfe-icon/package.json +++ b/elements/pfe-icon/package.json @@ -4,7 +4,7 @@ "className": "PfeIcon", "elementName": "pfe-icon" }, - "version": "1.0.0-prerelease.11", + "version": "1.0.0-prerelease.13", "publishConfig": { "access": "public" }, @@ -15,7 +15,7 @@ ], "repository": { "type": "git", - "url" : "github:patternfly/patternfly-elements", + "url": "github:patternfly/patternfly-elements", "directory": "elements/pfe-icon" }, "main": "pfe-icon.js", @@ -33,8 +33,8 @@ ], "license": "MIT", "dependencies": { - "@patternfly/pfe-sass": "^1.0.0-prerelease.11", - "@patternfly/pfelement": "^1.0.0-prerelease.11" + "@patternfly/pfe-sass": "^1.0.0-prerelease.13", + "@patternfly/pfelement": "^1.0.0-prerelease.13" }, "generator-pfelement-version": "0.5.0", "gitHead": "dfa74e0495c556ebdd1edb61c6d406621d1b6421" diff --git a/elements/pfe-icon/pfe-icon.css b/elements/pfe-icon/pfe-icon.css new file mode 100644 index 0000000000..a63c3cd781 --- /dev/null +++ b/elements/pfe-icon/pfe-icon.css @@ -0,0 +1,182 @@ +/* + * Copyright 2018 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. + */ +/* Palette of Border Colors */ +/* Palette of Feedback Colors */ +:host { + --pfe-icon--spacing: var(--pfe-theme--container-spacer, 1rem); + --pfe-icon--size: var(--pfe-theme--icon-size, 1em); + --pfe-icon--color--bg: transparent; + --pfe-icon--color--border: transparent; + display: inline-block; + vertical-align: middle; + border-radius: 50%; + background: var(--pfe-icon--color--bg); + border: var(--pfe-icon--color--border); +} + +:host, +:host svg { + width: 1em; + height: 1em; +} + +:host svg { + fill: var(--pfe-broadcasted--color--text); +} + +:host([data-block]) { + display: block; + margin-bottom: var(--pfe-icon--spacing); + margin-top: var(--pfe-icon--spacing); +} + +:host([data-block]):first-child { + margin-top: 0; +} + +:host([size="2x"]), +:host([size="2x"]) svg { + width: 2em; + height: 2em; +} + +:host([size="3x"]), +:host([size="3x"]) svg { + width: 3em; + height: 3em; +} + +:host([size="4x"]), +:host([size="4x"]) svg { + width: 4em; + height: 4em; +} + +:host([size="xl"]), +:host([size="xl"]) svg { + width: 100px; + height: 100px; +} + +:host([size="lg"]), +:host([size="lg"]) svg { + width: 64px; + height: 64px; +} + +:host([size="md"]), +:host([size="md"]) svg { + width: 32px; + height: 32px; +} + +:host([size="sm"]), +:host([size="sm"]) svg { + width: 14px; + height: 14px; +} + +:host([color="base"]) { + --pfe-broadcasted--color--text: var(--pfe-theme--color--ui-base, #0477a4); +} + +:host([color="complement"]) { + --pfe-broadcasted--color--text: var(--pfe-theme--color--ui-complement, #464646); +} + +:host([color="accent"]) { + --pfe-broadcasted--color--text: var(--pfe-theme--color--ui-accent, #fe460d); +} + +:host([color="critical"]) { + --pfe-broadcasted--color--text: var(--pfe-theme--color--feedback--critical, #bb0000); +} + +:host([color="important"]) { + --pfe-broadcasted--color--text: var(--pfe-theme--color--feedback--important, #d73401); +} + +:host([color="moderate"]) { + --pfe-broadcasted--color--text: var(--pfe-theme--color--feedback--moderate, #ffc024); +} + +:host([color="success"]) { + --pfe-broadcasted--color--text: var(--pfe-theme--color--feedback--success, #2e7d32); +} + +:host([color="info"]) { + --pfe-broadcasted--color--text: var(--pfe-theme--color--feedback--info, #0277bd); +} + +:host([color="default"]) { + --pfe-broadcasted--color--text: var(--pfe-theme--color--feedback--default, #606060); +} + +:host([circled]) { + --pfe-icon--color--bg: transparent; + --pfe-icon--color--border: var(--pfe-theme--color--surface--border, #dfdfdf); + padding: 0.05em; +} + +:host([circled="base"]) { + --pfe-icon--color--bg: var(--pfe-theme--color--surface--base, #dfdfdf); + --pfe-icon--color--border: transparent; + --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--base--text, #333); +} + +:host([circled="lightest"]) { + --pfe-icon--color--bg: var(--pfe-theme--color--surface--lightest, #fff); + --pfe-icon--color--border: transparent; + --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--lightest--text, #333); +} + +:host([circled="light"]) { + --pfe-icon--color--bg: var(--pfe-theme--color--surface--lighter, #ececec); + --pfe-icon--color--border: transparent; + --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--lighter--text, #333); +} + +:host([circled="dark"]) { + --pfe-icon--color--bg: var(--pfe-theme--color--surface--darker, #464646); + --pfe-icon--color--border: transparent; + --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--darker--text, #fff); +} + +:host([circled="darkest"]) { + --pfe-icon--color--bg: var(--pfe-theme--color--surface--darkest, #131313); + --pfe-icon--color--border: transparent; + --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--darkest--text, #fff); +} + +:host([circled="complement"]) { + --pfe-icon--color--bg: var(--pfe-theme--color--surface--complement, #0477a4); + --pfe-icon--color--border: transparent; + --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--complement--text, #fff); +} + +:host([circled="accent"]) { + --pfe-icon--color--bg: var(--pfe-theme--color--surface--accent, #fe460d); + --pfe-icon--color--border: transparent; + --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--accent--text, #fff); +} + +/*# sourceMappingURL=pfe-icon.css.map */ diff --git a/elements/pfe-icon/pfe-icon.css.map b/elements/pfe-icon/pfe-icon.css.map new file mode 100644 index 0000000000..0fbf9358a7 --- /dev/null +++ b/elements/pfe-icon/pfe-icon.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","pfe-icon.css","../../pfe-sass/variables/_colors.scss","pfe-icon.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;ECoBE;AC4GF,6BAAA;AAOA,+BAAA;AC7GA;EACE,6EAAoB;EACpB,qEAAiB;EACjB,gDAAsB;EACtB,gDAA0B;EAE1B,qBAAqB;EACrB,sBAAsB;EAEtB,kBAAkB;EAClB,sCAAsC;EACtC,sCAAsF;AFJxF;;AEdE;;EAEE,UAagC;EAZhC,WAYgC;AFKpC;;AEbA;EAcI,yCAAyC;AFG7C;;AEAU;EACN,cAAc;EACd,uCAAuC;EACvC,oCAAoC;AFGxC;;AENU;EAMJ,aAAa;AFInB;;AElCE;;EAEE,UAkCgC;EAjChC,WAiCgC;AFIpC;;AExCE;;EAEE,UAsCgC;EArChC,WAqCgC;AFMpC;;AE9CE;;EAEE,UA0CgC;EAzChC,WAyCgC;AFQpC;;AEpDE;;EAEE,YA+CkC;EA9ClC,aA8CkC;AFStC;;AE1DE;;EAEE,WAmDiC;EAlDjC,YAkDiC;AFWrC;;AEhEE;;EAEE,WAuDiC;EAtDjC,YAsDiC;AFarC;;AEtEE;;EAEE,WA2DiC;EA1DjC,YA0DiC;AFerC;;AEZA;EACE,8EAA+B;AFejC;;AEZA;EACE,oFAA+B;AFejC;;AEZA;EACE,gFAA+B;AFejC;;AEZA;EACE,yFAA+B;AFejC;;AEZA;EACE,0FAA+B;AFejC;;AEZA;EACE,yFAA+B;AFejC;;AEZA;EACE,wFAA+B;AFejC;;AEZA;EACE,qFAA+B;AFejC;;AEZA;EACE,wFAA+B;AFejC;;AEVA;EACE,gDAAsB;EACtB,sFAA0B;EAE1B,eApHgD;AFgIlD;;AETA;EACE,oFAAsB;EACtB,gDAA0B;EAC1B,uFAA+B;AFYjC;;AETA;EACE,qFAAsB;EACtB,gDAA0B;EAC1B,2FAA+B;AFYjC;;AETA;EACE,uFAAsB;EACtB,gDAA0B;EAC1B,0FAA+B;AFYjC;;AETA;EACE,sFAAsB;EACtB,gDAA0B;EAC1B,yFAA+B;AFYjC;;AETA;EACE,uFAAsB;EACtB,gDAA0B;EAC1B,0FAA+B;AFYjC;;AETA;EACE,0FAAsB;EACtB,gDAA0B;EAC1B,6FAA+B;AFYjC;;AETA;EACE,sFAAsB;EACtB,gDAA0B;EAC1B,yFAA+B;AFYjC","file":"pfe-icon.css","sourcesContent":["/*\n * Copyright 2018 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// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n","/*\n * Copyright 2018 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/* Palette of Border Colors */\n/* Palette of Feedback Colors */\n:host {\n --pfe-icon--spacing: var(--pfe-theme--container-spacer, 1rem);\n --pfe-icon--size: var(--pfe-theme--icon-size, 1em);\n --pfe-icon--color--bg: transparent;\n --pfe-icon--color--border: transparent;\n display: inline-block;\n vertical-align: middle;\n border-radius: 50%;\n background: var(--pfe-icon--color--bg);\n border: var(--pfe-icon--color--border);\n}\n\n:host,\n:host svg {\n width: 1em;\n height: 1em;\n}\n\n:host svg {\n fill: var(--pfe-broadcasted--color--text);\n}\n\n:host([data-block]) {\n display: block;\n margin-bottom: var(--pfe-icon--spacing);\n margin-top: var(--pfe-icon--spacing);\n}\n\n:host([data-block]):first-child {\n margin-top: 0;\n}\n\n:host([size=\"2x\"]),\n:host([size=\"2x\"]) svg {\n width: 2em;\n height: 2em;\n}\n\n:host([size=\"3x\"]),\n:host([size=\"3x\"]) svg {\n width: 3em;\n height: 3em;\n}\n\n:host([size=\"4x\"]),\n:host([size=\"4x\"]) svg {\n width: 4em;\n height: 4em;\n}\n\n:host([size=\"xl\"]),\n:host([size=\"xl\"]) svg {\n width: 100px;\n height: 100px;\n}\n\n:host([size=\"lg\"]),\n:host([size=\"lg\"]) svg {\n width: 64px;\n height: 64px;\n}\n\n:host([size=\"md\"]),\n:host([size=\"md\"]) svg {\n width: 32px;\n height: 32px;\n}\n\n:host([size=\"sm\"]),\n:host([size=\"sm\"]) svg {\n width: 14px;\n height: 14px;\n}\n\n:host([color=\"base\"]) {\n --pfe-broadcasted--color--text: var(--pfe-theme--color--ui-base, #0477a4);\n}\n\n:host([color=\"complement\"]) {\n --pfe-broadcasted--color--text: var(--pfe-theme--color--ui-complement, #464646);\n}\n\n:host([color=\"accent\"]) {\n --pfe-broadcasted--color--text: var(--pfe-theme--color--ui-accent, #fe460d);\n}\n\n:host([color=\"critical\"]) {\n --pfe-broadcasted--color--text: var(--pfe-theme--color--feedback--critical, #bb0000);\n}\n\n:host([color=\"important\"]) {\n --pfe-broadcasted--color--text: var(--pfe-theme--color--feedback--important, #d73401);\n}\n\n:host([color=\"moderate\"]) {\n --pfe-broadcasted--color--text: var(--pfe-theme--color--feedback--moderate, #ffc024);\n}\n\n:host([color=\"success\"]) {\n --pfe-broadcasted--color--text: var(--pfe-theme--color--feedback--success, #2e7d32);\n}\n\n:host([color=\"info\"]) {\n --pfe-broadcasted--color--text: var(--pfe-theme--color--feedback--info, #0277bd);\n}\n\n:host([color=\"default\"]) {\n --pfe-broadcasted--color--text: var(--pfe-theme--color--feedback--default, #606060);\n}\n\n:host([circled]) {\n --pfe-icon--color--bg: transparent;\n --pfe-icon--color--border: var(--pfe-theme--color--surface--border, #dfdfdf);\n padding: 0.05em;\n}\n\n:host([circled=\"base\"]) {\n --pfe-icon--color--bg: var(--pfe-theme--color--surface--base, #dfdfdf);\n --pfe-icon--color--border: transparent;\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--base--text, #333);\n}\n\n:host([circled=\"lightest\"]) {\n --pfe-icon--color--bg: var(--pfe-theme--color--surface--lightest, #fff);\n --pfe-icon--color--border: transparent;\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--lightest--text, #333);\n}\n\n:host([circled=\"light\"]) {\n --pfe-icon--color--bg: var(--pfe-theme--color--surface--lighter, #ececec);\n --pfe-icon--color--border: transparent;\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--lighter--text, #333);\n}\n\n:host([circled=\"dark\"]) {\n --pfe-icon--color--bg: var(--pfe-theme--color--surface--darker, #464646);\n --pfe-icon--color--border: transparent;\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--darker--text, #fff);\n}\n\n:host([circled=\"darkest\"]) {\n --pfe-icon--color--bg: var(--pfe-theme--color--surface--darkest, #131313);\n --pfe-icon--color--border: transparent;\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--darkest--text, #fff);\n}\n\n:host([circled=\"complement\"]) {\n --pfe-icon--color--bg: var(--pfe-theme--color--surface--complement, #0477a4);\n --pfe-icon--color--border: transparent;\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--complement--text, #fff);\n}\n\n:host([circled=\"accent\"]) {\n --pfe-icon--color--bg: var(--pfe-theme--color--surface--accent, #fe460d);\n --pfe-icon--color--border: transparent;\n --pfe-broadcasted--color--text: var(--pfe-theme--color--surface--accent--text, #fff);\n}\n","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text: $pfelements--gray-dark !default;\n$pfe-color--text--on-dark: $pfe-color--white !default;\n$pfe-color--text--on-saturated: $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link: #06c !default;\n$pfe-color--ui-link--visited: $pfelements--purple !default; // Was #7551a6\n$pfe-color--ui-link--hover: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-dark--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-saturated--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base: $pfelements--blue !default;\n$pfe-color--ui-base--hover: darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement: $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover: $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent: $pfelements--orange !default;\n$pfe-color--ui-accent--hover: darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text: $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover: $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest: $pfe-color--white !default;\n$pfe-color--surface--lightest--text: $pfe-color--text !default;\n$pfe-color--surface--lightest--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus: $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text: $pfe-color--text !default;\n$pfe-color--surface--lighter--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus: $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base: $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text: $pfe-color--text !default;\n$pfe-color--surface--base--link: #00538c !default; // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited: #7551a6 !default;\n$pfe-color--surface--base--link--hover: #00305b !default;\n$pfe-color--surface--base--link--focus: #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker: $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest: $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement: $pfelements--blue;\n$pfe-color--surface--complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent: $pfelements--orange;\n$pfe-color--surface--accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc\n$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7\n$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical: $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important: $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest: $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest: $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate: $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest: $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest: $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success: #2e7d32 !default;\n$pfe-color--feedback--success--lightest: $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest: #1b5e20 !default;\n\n$pfe-color--feedback--info: #0277bd !default;\n$pfe-color--feedback--info--lightest: $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest: #01579b !default;\n\n$pfe-color--feedback--default: $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest: $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest: $pfe-color--gray-800 !default;\n","@import \"../../pfe-sass/pfe-sass\";\n\n\n/// ===========================================================================\n/// Component Specific SASS Vars\n/// ===========================================================================\n\n// Todo: convert these also\n$pfe-icon--size: 1em;\n$pfe-icon--padding: .05em;\n$pfe-icon--border-width: map-get($pfe-vars, border-width);\n$pfe-icon--border-style: map-get($pfe-vars, border-style);\n\n\n/// ===========================================================================\n/// DEFUALT CTA\n/// ===========================================================================\n\n@mixin pfe-icon-set-svg-size($size: 1em) {\n &,\n & svg {\n width: $size;\n height: $size;\n }\n}\n\n:host {\n --pfe-icon--spacing: #{pfe-var(container-spacer)};\n --pfe-icon--size: var(--pfe-theme--icon-size, 1em);\n --pfe-icon--color--bg: transparent;\n --pfe-icon--color--border: transparent;\n\n display: inline-block;\n vertical-align: middle;\n @include pfe-icon-set-svg-size(1em);\n border-radius: 50%;\n background: var(--pfe-icon--color--bg);\n border: $pfe-icon--border-width $pfe-icon--border-style var(--pfe-icon--color--border);\n\n svg {\n fill: var(--pfe-broadcasted--color--text);\n }\n\n @at-root #{&}([data-block]) {\n display: block;\n margin-bottom: var(--pfe-icon--spacing);\n margin-top: var(--pfe-icon--spacing);\n\n &:first-child {\n margin-top: 0;\n }\n }\n}\n\n:host([size=\"2x\"]) {\n @include pfe-icon-set-svg-size(2em);\n}\n\n:host([size=\"3x\"]) {\n @include pfe-icon-set-svg-size(3em);\n}\n\n:host([size=\"4x\"]) {\n @include pfe-icon-set-svg-size(4em);\n}\n\n// TODO: Sort out sizing\n:host([size=\"xl\"]) {\n @include pfe-icon-set-svg-size(100px);\n}\n\n:host([size=\"lg\"]) {\n @include pfe-icon-set-svg-size(64px);\n}\n\n:host([size=\"md\"]) {\n @include pfe-icon-set-svg-size(32px);\n}\n\n:host([size=\"sm\"]) {\n @include pfe-icon-set-svg-size(14px);\n}\n\n:host([color=\"base\"]) {\n --pfe-broadcasted--color--text: #{pfe-color(ui-base)};\n}\n\n:host([color=\"complement\"]) {\n --pfe-broadcasted--color--text: #{pfe-color(ui-complement)};\n}\n\n:host([color=\"accent\"]) {\n --pfe-broadcasted--color--text: #{pfe-color(ui-accent)};\n}\n\n:host([color=\"critical\"]) {\n --pfe-broadcasted--color--text: #{pfe-color(feedback--critical)};\n}\n\n:host([color=\"important\"]) {\n --pfe-broadcasted--color--text: #{pfe-color(feedback--important)};\n}\n\n:host([color=\"moderate\"]) {\n --pfe-broadcasted--color--text: #{pfe-color(feedback--moderate)};\n}\n\n:host([color=\"success\"]) {\n --pfe-broadcasted--color--text: #{pfe-color(feedback--success)};\n}\n\n:host([color=\"info\"]) {\n --pfe-broadcasted--color--text: #{pfe-color(feedback--info)};\n}\n\n:host([color=\"default\"]) {\n --pfe-broadcasted--color--text: #{pfe-color(feedback--default)};\n}\n\n// May need Feedback Darkest colors too.\n\n:host([circled]) {\n --pfe-icon--color--bg: transparent;\n --pfe-icon--color--border: #{pfe-color(surface--border)};\n\n padding: $pfe-icon--padding;\n}\n\n:host([circled=\"base\"]) {\n --pfe-icon--color--bg: #{pfe-color(surface--base)};\n --pfe-icon--color--border: transparent;\n --pfe-broadcasted--color--text: #{pfe-color(surface--base--text)};\n}\n\n:host([circled=\"lightest\"]) {\n --pfe-icon--color--bg: #{pfe-color(surface--lightest)};\n --pfe-icon--color--border: transparent;\n --pfe-broadcasted--color--text: #{pfe-color(surface--lightest--text)};\n}\n\n:host([circled=\"light\"]) {\n --pfe-icon--color--bg: #{pfe-color(surface--lighter)};\n --pfe-icon--color--border: transparent;\n --pfe-broadcasted--color--text: #{pfe-color(surface--lighter--text)};\n}\n\n:host([circled=\"dark\"]) {\n --pfe-icon--color--bg: #{pfe-color(surface--darker)};\n --pfe-icon--color--border: transparent;\n --pfe-broadcasted--color--text: #{pfe-color(surface--darker--text)};\n}\n\n:host([circled=\"darkest\"]) {\n --pfe-icon--color--bg: #{pfe-color(surface--darkest)};\n --pfe-icon--color--border: transparent;\n --pfe-broadcasted--color--text: #{pfe-color(surface--darkest--text)};\n}\n\n:host([circled=\"complement\"]) {\n --pfe-icon--color--bg: #{pfe-color(surface--complement)};\n --pfe-icon--color--border: transparent;\n --pfe-broadcasted--color--text: #{pfe-color(surface--complement--text)};\n}\n\n:host([circled=\"accent\"]) {\n --pfe-icon--color--bg: #{pfe-color(surface--accent)};\n --pfe-icon--color--border: transparent;\n --pfe-broadcasted--color--text: #{pfe-color(surface--accent--text)};\n}\n"]} \ No newline at end of file diff --git a/elements/pfe-icon/pfe-icon.css.min.map b/elements/pfe-icon/pfe-icon.css.min.map new file mode 100644 index 0000000000..e69de29bb2 diff --git a/elements/pfe-icon/pfe-icon.js b/elements/pfe-icon/pfe-icon.js new file mode 100644 index 0000000000..633eac80ad --- /dev/null +++ b/elements/pfe-icon/pfe-icon.js @@ -0,0 +1,89 @@ +import PFElement from '../pfelement/pfelement.js'; + +/* + * @license + * Copyright 2019 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 templateId = "pfe-icon-head"; +if (!document.getElementById(templateId)) { + const cpRHIconTemplate = document.createElement("div"); + + cpRHIconTemplate.setAttribute("style", "display: none;"); + cpRHIconTemplate.setAttribute("id", templateId); + + cpRHIconTemplate.innerHTML = ``; + document.head.appendChild(cpRHIconTemplate); +} + +class PfeIcon extends PFElement { + + get html() { + return ` + + + +`; + } + static get tag() { + return "pfe-icon"; + } + + get styleUrl() { + return "pfe-icon.scss"; + } + + get templateUrl() { + return "pfe-icon.html"; + } + + static get observedAttributes() { + return ["icon"]; + } + + constructor() { + super(PfeIcon); + } + + attributeChangedCallback(attr, oldVal, newVal) { + if (attr === "icon") { + if (!newVal) { + console.warn(`pfe-icon: no icon name provided`); + return; + } + + const svgPath = this.ownerDocument.head.querySelector(`#${newVal} path`); + + if (!svgPath) { + console.warn(`pfe-icon: unable to find svg path for ${newVal}`); + return; + } + + this.shadowRoot + .querySelector("svg g path") + .setAttribute("d", svgPath.getAttribute("d")); + } + } +} + +PFElement.create(PfeIcon); +//# sourceMappingURL=pfe-icon.js.map diff --git a/elements/pfe-icon/pfe-icon.js.map b/elements/pfe-icon/pfe-icon.js.map new file mode 100644 index 0000000000..4400279cf5 --- /dev/null +++ b/elements/pfe-icon/pfe-icon.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-icon.js","sources":["pfe-icon.js"],"sourcesContent":["/*\n * @license\n * Copyright 2019 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/*\n * Copyright 2018 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\nimport PFElement from \"../pfelement/pfelement.js\";\n\nconst templateId = \"pfe-icon-head\";\nif (!document.getElementById(templateId)) {\n const cpRHIconTemplate = document.createElement(\"div\");\n\n cpRHIconTemplate.setAttribute(\"style\", \"display: none;\");\n cpRHIconTemplate.setAttribute(\"id\", templateId);\n\n cpRHIconTemplate.innerHTML = ``;\n document.head.appendChild(cpRHIconTemplate);\n}\n\nclass PfeIcon extends PFElement {\n\n get html() {\n return `\n \n \n \n`;\n }\n static get tag() {\n return \"pfe-icon\";\n }\n\n get styleUrl() {\n return \"pfe-icon.scss\";\n }\n\n get templateUrl() {\n return \"pfe-icon.html\";\n }\n\n static get observedAttributes() {\n return [\"icon\"];\n }\n\n constructor() {\n super(PfeIcon);\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n if (attr === \"icon\") {\n if (!newVal) {\n console.warn(`pfe-icon: no icon name provided`);\n return;\n }\n\n const svgPath = this.ownerDocument.head.querySelector(`#${newVal} path`);\n\n if (!svgPath) {\n console.warn(`pfe-icon: unable to find svg path for ${newVal}`);\n return;\n }\n\n this.shadowRoot\n .querySelector(\"svg g path\")\n .setAttribute(\"d\", svgPath.getAttribute(\"d\"));\n }\n }\n}\n\nPFElement.create(PfeIcon);\n"],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;;;;;;;;;;;AAuBA,AAwBA;AACA,MAAM,UAAU,GAAG,eAAe,CAAC;AACnC,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE;EACxC,MAAM,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;;EAEvD,gBAAgB,CAAC,YAAY,CAAC,OAAO,EAAE,gBAAgB,CAAC,CAAC;EACzD,gBAAgB,CAAC,YAAY,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;;EAEhD,gBAAgB,CAAC,SAAS,GAAG,CAAC,qtvBAAqtvB,CAAC,CAAC;EACrvvB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC;CAC7C;;AAED,MAAM,OAAO,SAAS,SAAS,CAAC;;EAE9B,IAAI,IAAI,GAAG;IACT,OAAO,CAAC;;;;MAIN,CAAC,CAAC;GACL;EACD,WAAW,GAAG,GAAG;IACf,OAAO,UAAU,CAAC;GACnB;;EAED,IAAI,QAAQ,GAAG;IACb,OAAO,eAAe,CAAC;GACxB;;EAED,IAAI,WAAW,GAAG;IAChB,OAAO,eAAe,CAAC;GACxB;;EAED,WAAW,kBAAkB,GAAG;IAC9B,OAAO,CAAC,MAAM,CAAC,CAAC;GACjB;;EAED,WAAW,GAAG;IACZ,KAAK,CAAC,OAAO,CAAC,CAAC;GAChB;;EAED,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE;IAC7C,IAAI,IAAI,KAAK,MAAM,EAAE;MACnB,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,CAAC,IAAI,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC;QAChD,OAAO;OACR;;MAED,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;;MAEzE,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,CAAC,IAAI,CAAC,CAAC,sCAAsC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;QAChE,OAAO;OACR;;MAED,IAAI,CAAC,UAAU;SACZ,aAAa,CAAC,YAAY,CAAC;SAC3B,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC;KACjD;GACF;CACF;;AAED,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC"} \ No newline at end of file diff --git a/elements/pfe-icon/pfe-icon.min.css b/elements/pfe-icon/pfe-icon.min.css new file mode 100644 index 0000000000..659dc8ee9d --- /dev/null +++ b/elements/pfe-icon/pfe-icon.min.css @@ -0,0 +1 @@ +:host{--pfe-icon--spacing:var(--pfe-theme--container-spacer, 1rem);--pfe-icon--size:var(--pfe-theme--icon-size, 1em);--pfe-icon--color--bg:transparent;--pfe-icon--color--border:transparent;display:inline-block;vertical-align:middle;border-radius:50%;background:var(--pfe-icon--color--bg);border:var(--pfe-icon--color--border)}:host,:host svg{width:1em;height:1em}:host svg{fill:var(--pfe-broadcasted--color--text)}:host([data-block]){display:block;margin-bottom:var(--pfe-icon--spacing);margin-top:var(--pfe-icon--spacing)}:host([data-block]):first-child{margin-top:0}:host([size="2x"]),:host([size="2x"]) svg{width:2em;height:2em}:host([size="3x"]),:host([size="3x"]) svg{width:3em;height:3em}:host([size="4x"]),:host([size="4x"]) svg{width:4em;height:4em}:host([size=xl]),:host([size=xl]) svg{width:100px;height:100px}:host([size=lg]),:host([size=lg]) svg{width:64px;height:64px}:host([size=md]),:host([size=md]) svg{width:32px;height:32px}:host([size=sm]),:host([size=sm]) svg{width:14px;height:14px}:host([color=base]){--pfe-broadcasted--color--text:var(--pfe-theme--color--ui-base, #0477a4)}:host([color=complement]){--pfe-broadcasted--color--text:var(--pfe-theme--color--ui-complement, #464646)}:host([color=accent]){--pfe-broadcasted--color--text:var(--pfe-theme--color--ui-accent, #fe460d)}:host([color=critical]){--pfe-broadcasted--color--text:var(--pfe-theme--color--feedback--critical, #bb0000)}:host([color=important]){--pfe-broadcasted--color--text:var(--pfe-theme--color--feedback--important, #d73401)}:host([color=moderate]){--pfe-broadcasted--color--text:var(--pfe-theme--color--feedback--moderate, #ffc024)}:host([color=success]){--pfe-broadcasted--color--text:var(--pfe-theme--color--feedback--success, #2e7d32)}:host([color=info]){--pfe-broadcasted--color--text:var(--pfe-theme--color--feedback--info, #0277bd)}:host([color=default]){--pfe-broadcasted--color--text:var(--pfe-theme--color--feedback--default, #606060)}:host([circled]){--pfe-icon--color--bg:transparent;--pfe-icon--color--border:var(--pfe-theme--color--surface--border, #dfdfdf);padding:.05em}:host([circled=base]){--pfe-icon--color--bg:var(--pfe-theme--color--surface--base, #dfdfdf);--pfe-icon--color--border:transparent;--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--base--text, #333)}:host([circled=lightest]){--pfe-icon--color--bg:var(--pfe-theme--color--surface--lightest, #fff);--pfe-icon--color--border:transparent;--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lightest--text, #333)}:host([circled=light]){--pfe-icon--color--bg:var(--pfe-theme--color--surface--lighter, #ececec);--pfe-icon--color--border:transparent;--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lighter--text, #333)}:host([circled=dark]){--pfe-icon--color--bg:var(--pfe-theme--color--surface--darker, #464646);--pfe-icon--color--border:transparent;--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darker--text, #fff)}:host([circled=darkest]){--pfe-icon--color--bg:var(--pfe-theme--color--surface--darkest, #131313);--pfe-icon--color--border:transparent;--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darkest--text, #fff)}:host([circled=complement]){--pfe-icon--color--bg:var(--pfe-theme--color--surface--complement, #0477a4);--pfe-icon--color--border:transparent;--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--complement--text, #fff)}:host([circled=accent]){--pfe-icon--color--bg:var(--pfe-theme--color--surface--accent, #fe460d);--pfe-icon--color--border:transparent;--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--accent--text, #fff)} \ No newline at end of file diff --git a/elements/pfe-icon/pfe-icon.min.js b/elements/pfe-icon/pfe-icon.min.js new file mode 100644 index 0000000000..72dac1e98e --- /dev/null +++ b/elements/pfe-icon/pfe-icon.min.js @@ -0,0 +1,25 @@ +import c from"../pfelement/pfelement.min.js"; +/* + * @license + * Copyright 2019 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. + * +*/if(!document.getElementById("pfe-icon-head")){const c=document.createElement("div");c.setAttribute("style","display: none;"),c.setAttribute("id","pfe-icon-head"),c.innerHTML='',document.head.appendChild(c)}class s extends c{get html(){return'\n \n \n \n'}static get tag(){return"pfe-icon"}get styleUrl(){return"pfe-icon.scss"}get templateUrl(){return"pfe-icon.html"}static get observedAttributes(){return["icon"]}constructor(){super(s)}attributeChangedCallback(c,s,e){if("icon"===c){if(!e)return void console.warn("pfe-icon: no icon name provided");const c=this.ownerDocument.head.querySelector(`#${e} path`);if(!c)return void console.warn(`pfe-icon: unable to find svg path for ${e}`);this.shadowRoot.querySelector("svg g path").setAttribute("d",c.getAttribute("d"))}}}c.create(s); +//# sourceMappingURL=pfe-icon.min.js.map diff --git a/elements/pfe-icon/pfe-icon.min.js.map b/elements/pfe-icon/pfe-icon.min.js.map new file mode 100644 index 0000000000..db7f30bc95 --- /dev/null +++ b/elements/pfe-icon/pfe-icon.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-icon.min.js","sources":["pfe-icon.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 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\nconst templateId = \"pfe-icon-head\";\nif (!document.getElementById(templateId)) {\n const cpRHIconTemplate = document.createElement(\"div\");\n\n cpRHIconTemplate.setAttribute(\"style\", \"display: none;\");\n cpRHIconTemplate.setAttribute(\"id\", templateId);\n\n cpRHIconTemplate.innerHTML = ``;\n document.head.appendChild(cpRHIconTemplate);\n}\n\nclass PfeIcon extends PFElement {\n\n get html() {\n return `\n \n \n \n`;\n }\n static get tag() {\n return \"pfe-icon\";\n }\n\n get styleUrl() {\n return \"pfe-icon.scss\";\n }\n\n get templateUrl() {\n return \"pfe-icon.html\";\n }\n\n static get observedAttributes() {\n return [\"icon\"];\n }\n\n constructor() {\n super(PfeIcon);\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n if (attr === \"icon\") {\n if (!newVal) {\n console.warn(`pfe-icon: no icon name provided`);\n return;\n }\n\n const svgPath = this.ownerDocument.head.querySelector(`#${newVal} path`);\n\n if (!svgPath) {\n console.warn(`pfe-icon: unable to find svg path for ${newVal}`);\n return;\n }\n\n this.shadowRoot\n .querySelector(\"svg g path\")\n .setAttribute(\"d\", svgPath.getAttribute(\"d\"));\n }\n }\n}\n\nPFElement.create(PfeIcon);\n//# sourceMappingURL=pfe-icon.js.map\n"],"names":["document","getElementById","cpRHIconTemplate","createElement","setAttribute","innerHTML","head","appendChild","PfeIcon","PFElement","html","tag","styleUrl","templateUrl","observedAttributes","[object Object]","super","attr","oldVal","newVal","console","warn","svgPath","this","ownerDocument","querySelector","shadowRoot","getAttribute","create"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EA2BA,IAAKA,SAASC,eADK,iBACuB,CACxC,MAAMC,EAAmBF,SAASG,cAAc,OAEhDD,EAAiBE,aAAa,QAAS,kBACvCF,EAAiBE,aAAa,KALb,iBAOjBF,EAAiBG,UAAY,wtvBAC7BL,SAASM,KAAKC,YAAYL,GAG5B,MAAMM,UAAgBC,EAEpBC,WACE,MAAO,svHAMTC,iBACE,MAAO,WAGTC,eACE,MAAO,gBAGTC,kBACE,MAAO,gBAGTC,gCACE,MAAO,CAAC,QAGVC,cACEC,MAAMR,GAGRO,yBAAyBE,EAAMC,EAAQC,GACrC,GAAa,SAATF,EAAiB,CACnB,IAAKE,EAEH,YADAC,QAAQC,KAAK,mCAIf,MAAMC,EAAUC,KAAKC,cAAclB,KAAKmB,kBAAkBN,UAE1D,IAAKG,EAEH,YADAF,QAAQC,8CAA8CF,KAIxDI,KAAKG,WACFD,cAAc,cACdrB,aAAa,IAAKkB,EAAQK,aAAa,QAKhDlB,EAAUmB,OAAOpB"} \ No newline at end of file diff --git a/elements/pfe-icon/pfe-icon.umd.js b/elements/pfe-icon/pfe-icon.umd.js new file mode 100644 index 0000000000..4f8b7effaf --- /dev/null +++ b/elements/pfe-icon/pfe-icon.umd.js @@ -0,0 +1,152 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('../pfelement/pfelement.umd')) : + typeof define === 'function' && define.amd ? define(['../pfelement/pfelement.umd'], factory) : + (factory(global.PFElement)); +}(this, (function (PFElement) { 'use strict'; + + PFElement = PFElement && PFElement.hasOwnProperty('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; + }; + + /* + * @license + * Copyright 2019 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 templateId = "pfe-icon-head"; + if (!document.getElementById(templateId)) { + var cpRHIconTemplate = document.createElement("div"); + + cpRHIconTemplate.setAttribute("style", "display: none;"); + cpRHIconTemplate.setAttribute("id", templateId); + + cpRHIconTemplate.innerHTML = ""; + document.head.appendChild(cpRHIconTemplate); + } + + var PfeIcon = function (_PFElement) { + inherits(PfeIcon, _PFElement); + createClass(PfeIcon, [{ + key: "html", + get: function get$$1() { + return "\n \n \n \n"; + } + }, { + key: "styleUrl", + get: function get$$1() { + return "pfe-icon.scss"; + } + }, { + key: "templateUrl", + get: function get$$1() { + return "pfe-icon.html"; + } + }], [{ + key: "tag", + get: function get$$1() { + return "pfe-icon"; + } + }, { + key: "observedAttributes", + get: function get$$1() { + return ["icon"]; + } + }]); + + function PfeIcon() { + classCallCheck(this, PfeIcon); + return possibleConstructorReturn(this, (PfeIcon.__proto__ || Object.getPrototypeOf(PfeIcon)).call(this, PfeIcon)); + } + + createClass(PfeIcon, [{ + key: "attributeChangedCallback", + value: function attributeChangedCallback(attr, oldVal, newVal) { + if (attr === "icon") { + if (!newVal) { + console.warn("pfe-icon: no icon name provided"); + return; + } + + var svgPath = this.ownerDocument.head.querySelector("#" + newVal + " path"); + + if (!svgPath) { + console.warn("pfe-icon: unable to find svg path for " + newVal); + return; + } + + this.shadowRoot.querySelector("svg g path").setAttribute("d", svgPath.getAttribute("d")); + } + } + }]); + return PfeIcon; + }(PFElement); + + PFElement.create(PfeIcon); + +}))); +//# sourceMappingURL=pfe-icon.umd.js.map diff --git a/elements/pfe-icon/pfe-icon.umd.js.map b/elements/pfe-icon/pfe-icon.umd.js.map new file mode 100644 index 0000000000..035744f693 --- /dev/null +++ b/elements/pfe-icon/pfe-icon.umd.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-icon.umd.js","sources":["pfe-icon.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 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\nconst templateId = \"pfe-icon-head\";\nif (!document.getElementById(templateId)) {\n const cpRHIconTemplate = document.createElement(\"div\");\n\n cpRHIconTemplate.setAttribute(\"style\", \"display: none;\");\n cpRHIconTemplate.setAttribute(\"id\", templateId);\n\n cpRHIconTemplate.innerHTML = ``;\n document.head.appendChild(cpRHIconTemplate);\n}\n\nclass PfeIcon extends PFElement {\n\n get html() {\n return `\n \n \n \n`;\n }\n static get tag() {\n return \"pfe-icon\";\n }\n\n get styleUrl() {\n return \"pfe-icon.scss\";\n }\n\n get templateUrl() {\n return \"pfe-icon.html\";\n }\n\n static get observedAttributes() {\n return [\"icon\"];\n }\n\n constructor() {\n super(PfeIcon);\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n if (attr === \"icon\") {\n if (!newVal) {\n console.warn(`pfe-icon: no icon name provided`);\n return;\n }\n\n const svgPath = this.ownerDocument.head.querySelector(`#${newVal} path`);\n\n if (!svgPath) {\n console.warn(`pfe-icon: unable to find svg path for ${newVal}`);\n return;\n }\n\n this.shadowRoot\n .querySelector(\"svg g path\")\n .setAttribute(\"d\", svgPath.getAttribute(\"d\"));\n }\n }\n}\n\nPFElement.create(PfeIcon);\n//# sourceMappingURL=pfe-icon.js.map\n"],"names":["templateId","document","getElementById","cpRHIconTemplate","createElement","setAttribute","innerHTML","head","appendChild","PfeIcon","attr","oldVal","newVal","console","warn","svgPath","ownerDocument","querySelector","shadowRoot","getAttribute","PFElement","create"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAEA;;;;;;;;;;;;;;;;;;;;;;;;EAwBA,IAAMA,aAAa,eAAnB;EACA,IAAI,CAACC,SAASC,cAAT,CAAwBF,UAAxB,CAAL,EAA0C;EACxC,MAAMG,mBAAmBF,SAASG,aAAT,CAAuB,KAAvB,CAAzB;;EAEAD,mBAAiBE,YAAjB,CAA8B,OAA9B,EAAuC,gBAAvC;EACAF,mBAAiBE,YAAjB,CAA8B,IAA9B,EAAoCL,UAApC;;EAEAG,mBAAiBG,SAAjB;EACAL,WAASM,IAAT,CAAcC,WAAd,CAA0BL,gBAA1B;EACD;;MAEKM;;;;6BAEO;EACT;EAKD;;;6BAKc;EACb,aAAO,eAAP;EACD;;;6BAEiB;EAChB,aAAO,eAAP;EACD;;;6BAVgB;EACf,aAAO,UAAP;EACD;;;6BAU+B;EAC9B,aAAO,CAAC,MAAD,CAAP;EACD;;;EAED,qBAAc;EAAA;EAAA,4GACNA,OADM;EAEb;;;;+CAEwBC,MAAMC,QAAQC,QAAQ;EAC7C,UAAIF,SAAS,MAAb,EAAqB;EACnB,YAAI,CAACE,MAAL,EAAa;EACXC,kBAAQC,IAAR;EACA;EACD;;EAED,YAAMC,UAAU,KAAKC,aAAL,CAAmBT,IAAnB,CAAwBU,aAAxB,OAA0CL,MAA1C,WAAhB;;EAEA,YAAI,CAACG,OAAL,EAAc;EACZF,kBAAQC,IAAR,4CAAsDF,MAAtD;EACA;EACD;;EAED,aAAKM,UAAL,CACGD,aADH,CACiB,YADjB,EAEGZ,YAFH,CAEgB,GAFhB,EAEqBU,QAAQI,YAAR,CAAqB,GAArB,CAFrB;EAGD;EACF;;;IA/CmBC;;EAkDtBA,UAAUC,MAAV,CAAiBZ,OAAjB;;;;"} \ No newline at end of file diff --git a/elements/pfe-icon/pfe-icon.umd.min.js b/elements/pfe-icon/pfe-icon.umd.min.js new file mode 100644 index 0000000000..5f5d84faca --- /dev/null +++ b/elements/pfe-icon/pfe-icon.umd.min.js @@ -0,0 +1,2 @@ +!function(c,e){"object"==typeof exports&&"undefined"!=typeof module?e(require("../pfelement/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min"],e):e(c.PFElement)}(this,function(s){"use strict";s=s&&s.hasOwnProperty("default")?s.default:s;var t=function(){function t(c,e){for(var s=0;s:host{--pfe-icon--spacing:var(--pfe-theme--container-spacer, 1rem);--pfe-icon--size:var(--pfe-theme--icon-size, 1em);--pfe-icon--color--bg:transparent;--pfe-icon--color--border:transparent;display:inline-block;vertical-align:middle;border-radius:50%;background:var(--pfe-icon--color--bg);border:var(--pfe-icon--color--border)}:host,:host svg{width:1em;height:1em}:host svg{fill:var(--pfe-broadcasted--color--text)}:host([data-block]){display:block;margin-bottom:var(--pfe-icon--spacing);margin-top:var(--pfe-icon--spacing)}:host([data-block]):first-child{margin-top:0}:host([size="2x"]),:host([size="2x"]) svg{width:2em;height:2em}:host([size="3x"]),:host([size="3x"]) svg{width:3em;height:3em}:host([size="4x"]),:host([size="4x"]) svg{width:4em;height:4em}:host([size=xl]),:host([size=xl]) svg{width:100px;height:100px}:host([size=lg]),:host([size=lg]) svg{width:64px;height:64px}:host([size=md]),:host([size=md]) svg{width:32px;height:32px}:host([size=sm]),:host([size=sm]) svg{width:14px;height:14px}:host([color=base]){--pfe-broadcasted--color--text:var(--pfe-theme--color--ui-base, #0477a4)}:host([color=complement]){--pfe-broadcasted--color--text:var(--pfe-theme--color--ui-complement, #464646)}:host([color=accent]){--pfe-broadcasted--color--text:var(--pfe-theme--color--ui-accent, #fe460d)}:host([color=critical]){--pfe-broadcasted--color--text:var(--pfe-theme--color--feedback--critical, #bb0000)}:host([color=important]){--pfe-broadcasted--color--text:var(--pfe-theme--color--feedback--important, #d73401)}:host([color=moderate]){--pfe-broadcasted--color--text:var(--pfe-theme--color--feedback--moderate, #ffc024)}:host([color=success]){--pfe-broadcasted--color--text:var(--pfe-theme--color--feedback--success, #2e7d32)}:host([color=info]){--pfe-broadcasted--color--text:var(--pfe-theme--color--feedback--info, #0277bd)}:host([color=default]){--pfe-broadcasted--color--text:var(--pfe-theme--color--feedback--default, #606060)}:host([circled]){--pfe-icon--color--bg:transparent;--pfe-icon--color--border:var(--pfe-theme--color--surface--border, #dfdfdf);padding:.05em}:host([circled=base]){--pfe-icon--color--bg:var(--pfe-theme--color--surface--base, #dfdfdf);--pfe-icon--color--border:transparent;--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--base--text, #333)}:host([circled=lightest]){--pfe-icon--color--bg:var(--pfe-theme--color--surface--lightest, #fff);--pfe-icon--color--border:transparent;--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lightest--text, #333)}:host([circled=light]){--pfe-icon--color--bg:var(--pfe-theme--color--surface--lighter, #ececec);--pfe-icon--color--border:transparent;--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--lighter--text, #333)}:host([circled=dark]){--pfe-icon--color--bg:var(--pfe-theme--color--surface--darker, #464646);--pfe-icon--color--border:transparent;--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darker--text, #fff)}:host([circled=darkest]){--pfe-icon--color--bg:var(--pfe-theme--color--surface--darkest, #131313);--pfe-icon--color--border:transparent;--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--darkest--text, #fff)}:host([circled=complement]){--pfe-icon--color--bg:var(--pfe-theme--color--surface--complement, #0477a4);--pfe-icon--color--border:transparent;--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--complement--text, #fff)}:host([circled=accent]){--pfe-icon--color--bg:var(--pfe-theme--color--surface--accent, #fe460d);--pfe-icon--color--border:transparent;--pfe-broadcasted--color--text:var(--pfe-theme--color--surface--accent--text, #fff)}\n \n \n \n'}},{key:"styleUrl",get:function(){return"pfe-icon.scss"}},{key:"templateUrl",get:function(){return"pfe-icon.html"}}],[{key:"tag",get:function(){return"pfe-icon"}},{key:"observedAttributes",get:function(){return["icon"]}}]),t(e,[{key:"attributeChangedCallback",value:function(c,e,s){if("icon"===c){if(!s)return void console.warn("pfe-icon: no icon name provided");var t=this.ownerDocument.head.querySelector("#"+s+" path");if(!t)return void console.warn("pfe-icon: unable to find svg path for "+s);this.shadowRoot.querySelector("svg g path").setAttribute("d",t.getAttribute("d"))}}}]),e}();s.create(o)}); +//# sourceMappingURL=pfe-icon.umd.min.js.map diff --git a/elements/pfe-icon/pfe-icon.umd.min.js.map b/elements/pfe-icon/pfe-icon.umd.min.js.map new file mode 100644 index 0000000000..75870a3b2c --- /dev/null +++ b/elements/pfe-icon/pfe-icon.umd.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-icon.umd.min.js","sources":["pfe-icon.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 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\nconst templateId = \"pfe-icon-head\";\nif (!document.getElementById(templateId)) {\n const cpRHIconTemplate = document.createElement(\"div\");\n\n cpRHIconTemplate.setAttribute(\"style\", \"display: none;\");\n cpRHIconTemplate.setAttribute(\"id\", templateId);\n\n cpRHIconTemplate.innerHTML = ``;\n document.head.appendChild(cpRHIconTemplate);\n}\n\nclass PfeIcon extends PFElement {\n\n get html() {\n return `\n \n \n \n`;\n }\n static get tag() {\n return \"pfe-icon\";\n }\n\n get styleUrl() {\n return \"pfe-icon.scss\";\n }\n\n get templateUrl() {\n return \"pfe-icon.html\";\n }\n\n static get observedAttributes() {\n return [\"icon\"];\n }\n\n constructor() {\n super(PfeIcon);\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n if (attr === \"icon\") {\n if (!newVal) {\n console.warn(`pfe-icon: no icon name provided`);\n return;\n }\n\n const svgPath = this.ownerDocument.head.querySelector(`#${newVal} path`);\n\n if (!svgPath) {\n console.warn(`pfe-icon: unable to find svg path for ${newVal}`);\n return;\n }\n\n this.shadowRoot\n .querySelector(\"svg g path\")\n .setAttribute(\"d\", svgPath.getAttribute(\"d\"));\n }\n }\n}\n\nPFElement.create(PfeIcon);\n//# sourceMappingURL=pfe-icon.js.map\n"],"names":["templateId","document","getElementById","cpRHIconTemplate","createElement","setAttribute","innerHTML","head","appendChild","PfeIcon","PFElement","attr","oldVal","newVal","warn","svgPath","this","ownerDocument","querySelector","shadowRoot","getAttribute","create"],"mappings":"whBA0BMA,EAAa,gBACnB,IAAKC,SAASC,eAAeF,GAAa,KAClCG,EAAmBF,SAASG,cAAc,SAE/BC,aAAa,QAAS,oBACtBA,aAAa,KAAML,KAEnBM,2uvBACRC,KAAKC,YAAYL,OAGtBM,gWA0BIA,uUA1BYC,s0HAcX,0DAIA,oDARA,4DAYA,CAAC,gEAOeC,EAAMC,EAAQC,MACxB,SAATF,EAAiB,KACdE,sBACKC,4CAIJC,EAAUC,KAAKC,cAAcV,KAAKW,kBAAkBL,eAErDE,sBACKD,8CAA8CD,QAInDM,WACFD,cAAc,cACdb,aAAa,IAAKU,EAAQK,aAAa,gBAKhDV,EAAUW,OAAOZ"} \ No newline at end of file diff --git a/elements/pfe-layouts/package.json b/elements/pfe-layouts/package.json index 7ac305395f..2239d8a3d7 100644 --- a/elements/pfe-layouts/package.json +++ b/elements/pfe-layouts/package.json @@ -4,7 +4,7 @@ "className": "PfeLayouts", "elementName": "pfe-layouts" }, - "version": "1.0.0-prerelease.11", + "version": "1.0.0-prerelease.13", "publishConfig": { "access": "public" }, @@ -15,7 +15,7 @@ ], "repository": { "type": "git", - "url" : "github:patternfly/patternfly-elements", + "url": "github:patternfly/patternfly-elements", "directory": "elements/pfe-layouts" }, "scripts": { @@ -31,7 +31,7 @@ ], "license": "MIT", "dependencies": { - "@patternfly/pfe-sass": "^1.0.0-prerelease.11" + "@patternfly/pfe-sass": "^1.0.0-prerelease.13" }, "gitHead": "dfa74e0495c556ebdd1edb61c6d406621d1b6421" } diff --git a/elements/pfe-layouts/pfe-base.css b/elements/pfe-layouts/pfe-base.css new file mode 100644 index 0000000000..5b8319518c --- /dev/null +++ b/elements/pfe-layouts/pfe-base.css @@ -0,0 +1,156 @@ +/* + * Copyright 2018 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. + */ +/* Palette of Border Colors */ +/* Palette of Feedback Colors */ +html, +body, +p, +ol, +ul, +li, +dl, +dt, +dd, +blockquote, +figure, +fieldset, +legend, +textarea, +pre, +iframe, +hr, +h1, +h2, +h3, +h4, +h5, +h6 { + padding: 0; + margin: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: 100%; + font-weight: 500; + font-weight: var(--pfe-theme--font-weight--normal, 500); +} + +ul { + list-style: none; +} + +button, +input, +select, +textarea { + margin: 0; +} + +img, +embed, +iframe, +object, +audio, +video { + max-width: 100%; + height: auto; +} + +iframe { + border: 0; +} + +table { + border-spacing: 0; + border-collapse: collapse; +} + +td, +th { + padding: 0; + text-align: left; +} + +*, +*::before, +*::after { + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +html { + font-family: sans-serif; + line-height: 1.5; + line-height: var(--pfe-theme--line-height, 1.5); +} + +body { + font-family: "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif; + font-family: var(--pfe-theme--font-family, "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif); + font-size: 16px; + font-size: var(--pfe-theme--font-size, 16px); + font-weight: 500; + font-weight: var(--pfe-theme--font-weight--normal, 500); + line-height: 1.5; + line-height: var(--pfe-theme--line-height, 1.5); + color: #333; + color: var(--pfe-theme--color--text, #333); + text-align: left; +} + +a { + color: #06c; + color: var(--pfe-broadcasted--color--ui-link, #06c); + text-decoration: underline; + -webkit-text-decoration: var(--pfe-theme--link--text-decoration, underline); + text-decoration: var(--pfe-theme--link--text-decoration, underline); +} + +a:visited { + color: rebeccapurple; + color: var(--pfe-broadcasted--color--ui-link--visited, rebeccapurple); +} + +a:hover { + color: #003366; + color: var(--pfe-broadcasted--color--ui-link--hover, #003366); + text-decoration: underline; + -webkit-text-decoration: var(--pfe-theme--link--text-decoration--hover, underline); + text-decoration: var(--pfe-theme--link--text-decoration--hover, underline); +} + +a:focus { + color: #003366; + color: var(--pfe-broadcasted--color--ui-link--focus, #003366); +} + +button, +a { + cursor: pointer; +} + +/*# sourceMappingURL=pfe-base.css.map */ diff --git a/elements/pfe-layouts/pfe-base.css.map b/elements/pfe-layouts/pfe-base.css.map new file mode 100644 index 0000000000..bedc184c63 --- /dev/null +++ b/elements/pfe-layouts/pfe-base.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","pfe-base.css","../../pfe-sass/variables/_colors.scss","pfe-base.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;ECoBE;AC4GF,6BAAA;AAOA,+BAAA;ACrIA;;;;;;;;;;;;;;;;;;;;;;;EAuBE,UAAU;EACV,SAAS;AFsBX;;AEnBA;;;;;;EAME,eAAe;EACf,gBAAa;EAAb,uDAAa;AFsBf;;AEnBA;EACE,gBAAgB;AFsBlB;;AEnBA;;;;EAIE,SAAS;AFsBX;;AEnBA;;;;;;EAME,eAAe;EACf,YAAY;AFsBd;;AEnBA;EACE,SAAS;AFsBX;;AEnBA;EACE,iBAAiB;EACjB,yBAAyB;AFsB3B;;AEnBA;;EAEE,UAAU;EACV,gBAAgB;AFsBlB;;AElBA;;;EAGE,8BAAsB;UAAtB,sBAAsB;AFqBxB;;AElBA;EACE,uBAAuB;EACvB,gBAAa;EAAb,+CAAa;AFqBf;;AEjBA;EACE,0EAAa;EAAb,yGAAa;EACb,eAAW;EAAX,4CAAW;EACX,gBAAa;EAAb,uDAAa;EACb,gBAAa;EAAb,+CAAa;EACb,WAAO;EAAP,0CAAO;EACP,gBAAgB;AFoBlB;;AEhBA;EACE,WAAiF;EAAjF,mDAAiF;EACjF,0BAAiB;EAAjB,2EAAiB;UAAjB,mEAAiB;AFmBnB;;AErBA;EAKI,oBAAmG;EAAnG,qEAAmG;AFoBvG;;AEzBA;EASI,cAA+F;EAA/F,6DAA+F;EAC/F,0BAAiB;EAAjB,kFAAiB;UAAjB,0EAAiB;AFoBrB;;AE9BA;EAcI,cAA+F;EAA/F,6DAA+F;AFoBnG;;AEhBA;;EAEE,eAAe;AFmBjB","file":"pfe-base.css","sourcesContent":["/*\n * Copyright 2018 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// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n","/*\n * Copyright 2018 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/* Palette of Border Colors */\n/* Palette of Feedback Colors */\nhtml,\nbody,\np,\nol,\nul,\nli,\ndl,\ndt,\ndd,\nblockquote,\nfigure,\nfieldset,\nlegend,\ntextarea,\npre,\niframe,\nhr,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n padding: 0;\n margin: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: 100%;\n font-weight: var(--pfe-theme--font-weight--normal, 500);\n}\n\nul {\n list-style: none;\n}\n\nbutton,\ninput,\nselect,\ntextarea {\n margin: 0;\n}\n\nimg,\nembed,\niframe,\nobject,\naudio,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\niframe {\n border: 0;\n}\n\ntable {\n border-spacing: 0;\n border-collapse: collapse;\n}\n\ntd,\nth {\n padding: 0;\n text-align: left;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nhtml {\n font-family: sans-serif;\n line-height: var(--pfe-theme--line-height, 1.5);\n}\n\nbody {\n font-family: var(--pfe-theme--font-family, \"Overpass\", Overpass, Helvetica, helvetica, arial, sans-serif);\n font-size: var(--pfe-theme--font-size, 16px);\n font-weight: var(--pfe-theme--font-weight--normal, 500);\n line-height: var(--pfe-theme--line-height, 1.5);\n color: var(--pfe-theme--color--text, #333);\n text-align: left;\n}\n\na {\n color: var(--pfe-broadcasted--color--ui-link, #06c);\n text-decoration: var(--pfe-theme--link--text-decoration, underline);\n}\n\na:visited {\n color: var(--pfe-broadcasted--color--ui-link--visited, rebeccapurple);\n}\n\na:hover {\n color: var(--pfe-broadcasted--color--ui-link--hover, #003366);\n text-decoration: var(--pfe-theme--link--text-decoration--hover, underline);\n}\n\na:focus {\n color: var(--pfe-broadcasted--color--ui-link--focus, #003366);\n}\n\nbutton,\na {\n cursor: pointer;\n}\n","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text: $pfelements--gray-dark !default;\n$pfe-color--text--on-dark: $pfe-color--white !default;\n$pfe-color--text--on-saturated: $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link: #06c !default;\n$pfe-color--ui-link--visited: $pfelements--purple !default; // Was #7551a6\n$pfe-color--ui-link--hover: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-dark--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-saturated--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base: $pfelements--blue !default;\n$pfe-color--ui-base--hover: darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement: $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover: $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent: $pfelements--orange !default;\n$pfe-color--ui-accent--hover: darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text: $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover: $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest: $pfe-color--white !default;\n$pfe-color--surface--lightest--text: $pfe-color--text !default;\n$pfe-color--surface--lightest--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus: $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text: $pfe-color--text !default;\n$pfe-color--surface--lighter--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus: $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base: $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text: $pfe-color--text !default;\n$pfe-color--surface--base--link: #00538c !default; // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited: #7551a6 !default;\n$pfe-color--surface--base--link--hover: #00305b !default;\n$pfe-color--surface--base--link--focus: #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker: $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest: $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement: $pfelements--blue;\n$pfe-color--surface--complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent: $pfelements--orange;\n$pfe-color--surface--accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc\n$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7\n$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical: $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important: $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest: $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest: $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate: $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest: $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest: $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success: #2e7d32 !default;\n$pfe-color--feedback--success--lightest: $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest: #1b5e20 !default;\n\n$pfe-color--feedback--info: #0277bd !default;\n$pfe-color--feedback--info--lightest: $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest: #01579b !default;\n\n$pfe-color--feedback--default: $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest: $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest: $pfe-color--gray-800 !default;\n","@import \"../../pfe-sass/pfe-sass\";\n\nhtml,\nbody,\np,\nol,\nul,\nli,\ndl,\ndt,\ndd,\nblockquote,\nfigure,\nfieldset,\nlegend,\ntextarea,\npre,\niframe,\nhr,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n padding: 0;\n margin: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-size: 100%;\n font-weight: #{pfe-var(font-weight--normal)};\n}\n\nul {\n list-style: none;\n}\n\nbutton,\ninput,\nselect,\ntextarea {\n margin: 0;\n}\n\nimg,\nembed,\niframe,\nobject,\naudio,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\niframe {\n border: 0;\n}\n\ntable {\n border-spacing: 0;\n border-collapse: collapse;\n}\n\ntd,\nth {\n padding: 0;\n text-align: left;\n}\n\n// Patternfly base styles\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nhtml {\n font-family: sans-serif;\n line-height: #{pfe-var(line-height)};\n}\n\n\nbody {\n font-family: #{pfe-var(font-family)};\n font-size: #{pfe-var(font-size)};\n font-weight: #{pfe-var(font-weight--normal)};\n line-height: #{pfe-var(line-height)};\n color: #{pfe-color(text)};\n text-align: left;\n}\n\n// Links styles\na {\n color: var(--pfe-broadcasted--color--ui-link, #{map-get($pfe-colors, 'ui-link')});\n text-decoration: #{pfe-var(link--text-decoration)};\n\n &:visited {\n color: var(--pfe-broadcasted--color--ui-link--visited, #{map-get($pfe-colors, 'ui-link--visited')});\n }\n\n &:hover {\n color: var(--pfe-broadcasted--color--ui-link--hover, #{map-get($pfe-colors, 'ui-link--hover')});\n text-decoration: #{pfe-var(link--text-decoration--hover)};\n }\n\n &:focus {\n color: var(--pfe-broadcasted--color--ui-link--focus, #{map-get($pfe-colors, 'ui-link--focus')});\n }\n}\n\nbutton,\na {\n cursor: pointer;\n}\n"]} \ No newline at end of file diff --git a/elements/pfe-layouts/pfe-base.min.css b/elements/pfe-layouts/pfe-base.min.css new file mode 100644 index 0000000000..235e4dea8b --- /dev/null +++ b/elements/pfe-layouts/pfe-base.min.css @@ -0,0 +1 @@ +blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{padding:0;margin:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500;font-weight:var(--pfe-theme--font-weight--normal,500)}ul{list-style:none}button,input,select,textarea{margin:0}audio,embed,iframe,img,object,video{max-width:100%;height:auto}iframe{border:0}table{border-spacing:0;border-collapse:collapse}td,th{padding:0;text-align:left}*,::after,::before{-webkit-box-sizing:border-box;box-sizing:border-box}html{font-family:sans-serif;line-height:1.5;line-height:var(--pfe-theme--line-height,1.5)}body{font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif);font-size:16px;font-size:var(--pfe-theme--font-size,16px);font-weight:500;font-weight:var(--pfe-theme--font-weight--normal,500);line-height:1.5;line-height:var(--pfe-theme--line-height,1.5);color:#333;color:var(--pfe-theme--color--text,#333);text-align:left}a{color:#06c;color:var(--pfe-broadcasted--color--ui-link,#06c);text-decoration:underline;-webkit-text-decoration:var(--pfe-theme--link--text-decoration,underline);text-decoration:var(--pfe-theme--link--text-decoration,underline)}a:visited{color:#663399;color:var(--pfe-broadcasted--color--ui-link--visited,#663399)}a:hover{color:#036;color:var(--pfe-broadcasted--color--ui-link--hover,#036);text-decoration:underline;-webkit-text-decoration:var(--pfe-theme--link--text-decoration--hover,underline);text-decoration:var(--pfe-theme--link--text-decoration--hover,underline)}a:focus{color:#036;color:var(--pfe-broadcasted--color--ui-link--focus,#036)}a,button{cursor:pointer} \ No newline at end of file diff --git a/elements/pfe-layouts/pfe-layouts.css b/elements/pfe-layouts/pfe-layouts.css new file mode 100644 index 0000000000..337f529605 --- /dev/null +++ b/elements/pfe-layouts/pfe-layouts.css @@ -0,0 +1,1719 @@ +/* + * Copyright 2018 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. + */ +/* Palette of Border Colors */ +/* Palette of Feedback Colors */ +.pfe-l--text-align--left { + text-align: left; +} + +.pfe-l--text-align--center { + text-align: center; +} + +.pfe-l--text-align--right { + text-align: right; +} + +.pfe-l-grid { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.pfe-l-grid > *, .pfe-l-grid__item { + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + margin: 0 auto; +} + +@media screen and (min-width: 576px) { + .pfe-l-grid.pfe-m-all-1-col > * { + width: calc(8.33333% - 1rem); + } + .pfe-l-grid.pfe-m-all-2-col > * { + width: calc(16.66667% - 1rem); + } + .pfe-l-grid.pfe-m-all-3-col > * { + width: calc(25% - 1rem); + } + .pfe-l-grid.pfe-m-all-4-col > * { + width: calc(33.33333% - 1rem); + } + .pfe-l-grid.pfe-m-all-5-col > * { + width: calc(41.66667% - 1rem); + } + .pfe-l-grid.pfe-m-all-6-col > * { + width: calc(50% - 1rem); + } + .pfe-l-grid.pfe-m-all-7-col > * { + width: calc(58.33333% - 1rem); + } + .pfe-l-grid.pfe-m-all-8-col > * { + width: calc(66.66667% - 1rem); + } + .pfe-l-grid.pfe-m-all-9-col > * { + width: calc(75% - 1rem); + } + .pfe-l-grid.pfe-m-all-10-col > * { + width: calc(83.33333% - 1rem); + } + .pfe-l-grid.pfe-m-all-11-col > * { + width: calc(91.66667% - 1rem); + } + .pfe-l-grid.pfe-m-all-12-col > * { + width: calc(100% - 1rem); + } + .pfe-l-grid > .pfe-m-1-col { + width: calc(8.33333% - 1rem); + } + .pfe-l-grid > .pfe-m-2-col { + width: calc(16.66667% - 1rem); + } + .pfe-l-grid > .pfe-m-3-col { + width: calc(25% - 1rem); + } + .pfe-l-grid > .pfe-m-4-col { + width: calc(33.33333% - 1rem); + } + .pfe-l-grid > .pfe-m-5-col { + width: calc(41.66667% - 1rem); + } + .pfe-l-grid > .pfe-m-6-col { + width: calc(50% - 1rem); + } + .pfe-l-grid > .pfe-m-7-col { + width: calc(58.33333% - 1rem); + } + .pfe-l-grid > .pfe-m-8-col { + width: calc(66.66667% - 1rem); + } + .pfe-l-grid > .pfe-m-9-col { + width: calc(75% - 1rem); + } + .pfe-l-grid > .pfe-m-10-col { + width: calc(83.33333% - 1rem); + } + .pfe-l-grid > .pfe-m-11-col { + width: calc(91.66667% - 1rem); + } + .pfe-l-grid > .pfe-m-12-col { + width: calc(100% - 1rem); + } +} + +@media screen and (max-width: 0) { + .pfe-l-grid.pfe-m-all-1-col-on-xs > * { + width: calc(8.33333% - 1rem); + } + .pfe-l-grid.pfe-m-all-2-col-on-xs > * { + width: calc(16.66667% - 1rem); + } + .pfe-l-grid.pfe-m-all-3-col-on-xs > * { + width: calc(25% - 1rem); + } + .pfe-l-grid.pfe-m-all-4-col-on-xs > * { + width: calc(33.33333% - 1rem); + } + .pfe-l-grid.pfe-m-all-5-col-on-xs > * { + width: calc(41.66667% - 1rem); + } + .pfe-l-grid.pfe-m-all-6-col-on-xs > * { + width: calc(50% - 1rem); + } + .pfe-l-grid.pfe-m-all-7-col-on-xs > * { + width: calc(58.33333% - 1rem); + } + .pfe-l-grid.pfe-m-all-8-col-on-xs > * { + width: calc(66.66667% - 1rem); + } + .pfe-l-grid.pfe-m-all-9-col-on-xs > * { + width: calc(75% - 1rem); + } + .pfe-l-grid.pfe-m-all-10-col-on-xs > * { + width: calc(83.33333% - 1rem); + } + .pfe-l-grid.pfe-m-all-11-col-on-xs > * { + width: calc(91.66667% - 1rem); + } + .pfe-l-grid.pfe-m-all-12-col-on-xs > * { + width: calc(100% - 1rem); + } + .pfe-l-grid > .pfe-m-1-col-on-xs { + width: calc(8.33333% - 1rem); + } + .pfe-l-grid > .pfe-m-2-col-on-xs { + width: calc(16.66667% - 1rem); + } + .pfe-l-grid > .pfe-m-3-col-on-xs { + width: calc(25% - 1rem); + } + .pfe-l-grid > .pfe-m-4-col-on-xs { + width: calc(33.33333% - 1rem); + } + .pfe-l-grid > .pfe-m-5-col-on-xs { + width: calc(41.66667% - 1rem); + } + .pfe-l-grid > .pfe-m-6-col-on-xs { + width: calc(50% - 1rem); + } + .pfe-l-grid > .pfe-m-7-col-on-xs { + width: calc(58.33333% - 1rem); + } + .pfe-l-grid > .pfe-m-8-col-on-xs { + width: calc(66.66667% - 1rem); + } + .pfe-l-grid > .pfe-m-9-col-on-xs { + width: calc(75% - 1rem); + } + .pfe-l-grid > .pfe-m-10-col-on-xs { + width: calc(83.33333% - 1rem); + } + .pfe-l-grid > .pfe-m-11-col-on-xs { + width: calc(91.66667% - 1rem); + } + .pfe-l-grid > .pfe-m-12-col-on-xs { + width: calc(100% - 1rem); + } +} + +@media screen and (min-width: 576px) { + .pfe-l-grid.pfe-m-all-1-col-on-sm > * { + width: calc(8.33333% - 1rem); + } + .pfe-l-grid.pfe-m-all-2-col-on-sm > * { + width: calc(16.66667% - 1rem); + } + .pfe-l-grid.pfe-m-all-3-col-on-sm > * { + width: calc(25% - 1rem); + } + .pfe-l-grid.pfe-m-all-4-col-on-sm > * { + width: calc(33.33333% - 1rem); + } + .pfe-l-grid.pfe-m-all-5-col-on-sm > * { + width: calc(41.66667% - 1rem); + } + .pfe-l-grid.pfe-m-all-6-col-on-sm > * { + width: calc(50% - 1rem); + } + .pfe-l-grid.pfe-m-all-7-col-on-sm > * { + width: calc(58.33333% - 1rem); + } + .pfe-l-grid.pfe-m-all-8-col-on-sm > * { + width: calc(66.66667% - 1rem); + } + .pfe-l-grid.pfe-m-all-9-col-on-sm > * { + width: calc(75% - 1rem); + } + .pfe-l-grid.pfe-m-all-10-col-on-sm > * { + width: calc(83.33333% - 1rem); + } + .pfe-l-grid.pfe-m-all-11-col-on-sm > * { + width: calc(91.66667% - 1rem); + } + .pfe-l-grid.pfe-m-all-12-col-on-sm > * { + width: calc(100% - 1rem); + } + .pfe-l-grid > .pfe-m-1-col-on-sm { + width: calc(8.33333% - 1rem); + } + .pfe-l-grid > .pfe-m-2-col-on-sm { + width: calc(16.66667% - 1rem); + } + .pfe-l-grid > .pfe-m-3-col-on-sm { + width: calc(25% - 1rem); + } + .pfe-l-grid > .pfe-m-4-col-on-sm { + width: calc(33.33333% - 1rem); + } + .pfe-l-grid > .pfe-m-5-col-on-sm { + width: calc(41.66667% - 1rem); + } + .pfe-l-grid > .pfe-m-6-col-on-sm { + width: calc(50% - 1rem); + } + .pfe-l-grid > .pfe-m-7-col-on-sm { + width: calc(58.33333% - 1rem); + } + .pfe-l-grid > .pfe-m-8-col-on-sm { + width: calc(66.66667% - 1rem); + } + .pfe-l-grid > .pfe-m-9-col-on-sm { + width: calc(75% - 1rem); + } + .pfe-l-grid > .pfe-m-10-col-on-sm { + width: calc(83.33333% - 1rem); + } + .pfe-l-grid > .pfe-m-11-col-on-sm { + width: calc(91.66667% - 1rem); + } + .pfe-l-grid > .pfe-m-12-col-on-sm { + width: calc(100% - 1rem); + } +} + +@media screen and (min-width: 768px) { + .pfe-l-grid.pfe-m-all-1-col-on-md > * { + width: calc(8.33333% - 1rem); + } + .pfe-l-grid.pfe-m-all-2-col-on-md > * { + width: calc(16.66667% - 1rem); + } + .pfe-l-grid.pfe-m-all-3-col-on-md > * { + width: calc(25% - 1rem); + } + .pfe-l-grid.pfe-m-all-4-col-on-md > * { + width: calc(33.33333% - 1rem); + } + .pfe-l-grid.pfe-m-all-5-col-on-md > * { + width: calc(41.66667% - 1rem); + } + .pfe-l-grid.pfe-m-all-6-col-on-md > * { + width: calc(50% - 1rem); + } + .pfe-l-grid.pfe-m-all-7-col-on-md > * { + width: calc(58.33333% - 1rem); + } + .pfe-l-grid.pfe-m-all-8-col-on-md > * { + width: calc(66.66667% - 1rem); + } + .pfe-l-grid.pfe-m-all-9-col-on-md > * { + width: calc(75% - 1rem); + } + .pfe-l-grid.pfe-m-all-10-col-on-md > * { + width: calc(83.33333% - 1rem); + } + .pfe-l-grid.pfe-m-all-11-col-on-md > * { + width: calc(91.66667% - 1rem); + } + .pfe-l-grid.pfe-m-all-12-col-on-md > * { + width: calc(100% - 1rem); + } + .pfe-l-grid > .pfe-m-1-col-on-md { + width: calc(8.33333% - 1rem); + } + .pfe-l-grid > .pfe-m-2-col-on-md { + width: calc(16.66667% - 1rem); + } + .pfe-l-grid > .pfe-m-3-col-on-md { + width: calc(25% - 1rem); + } + .pfe-l-grid > .pfe-m-4-col-on-md { + width: calc(33.33333% - 1rem); + } + .pfe-l-grid > .pfe-m-5-col-on-md { + width: calc(41.66667% - 1rem); + } + .pfe-l-grid > .pfe-m-6-col-on-md { + width: calc(50% - 1rem); + } + .pfe-l-grid > .pfe-m-7-col-on-md { + width: calc(58.33333% - 1rem); + } + .pfe-l-grid > .pfe-m-8-col-on-md { + width: calc(66.66667% - 1rem); + } + .pfe-l-grid > .pfe-m-9-col-on-md { + width: calc(75% - 1rem); + } + .pfe-l-grid > .pfe-m-10-col-on-md { + width: calc(83.33333% - 1rem); + } + .pfe-l-grid > .pfe-m-11-col-on-md { + width: calc(91.66667% - 1rem); + } + .pfe-l-grid > .pfe-m-12-col-on-md { + width: calc(100% - 1rem); + } +} + +@media screen and (min-width: 992px) { + .pfe-l-grid.pfe-m-all-1-col-on-lg > * { + width: calc(8.33333% - 1rem); + } + .pfe-l-grid.pfe-m-all-2-col-on-lg > * { + width: calc(16.66667% - 1rem); + } + .pfe-l-grid.pfe-m-all-3-col-on-lg > * { + width: calc(25% - 1rem); + } + .pfe-l-grid.pfe-m-all-4-col-on-lg > * { + width: calc(33.33333% - 1rem); + } + .pfe-l-grid.pfe-m-all-5-col-on-lg > * { + width: calc(41.66667% - 1rem); + } + .pfe-l-grid.pfe-m-all-6-col-on-lg > * { + width: calc(50% - 1rem); + } + .pfe-l-grid.pfe-m-all-7-col-on-lg > * { + width: calc(58.33333% - 1rem); + } + .pfe-l-grid.pfe-m-all-8-col-on-lg > * { + width: calc(66.66667% - 1rem); + } + .pfe-l-grid.pfe-m-all-9-col-on-lg > * { + width: calc(75% - 1rem); + } + .pfe-l-grid.pfe-m-all-10-col-on-lg > * { + width: calc(83.33333% - 1rem); + } + .pfe-l-grid.pfe-m-all-11-col-on-lg > * { + width: calc(91.66667% - 1rem); + } + .pfe-l-grid.pfe-m-all-12-col-on-lg > * { + width: calc(100% - 1rem); + } + .pfe-l-grid > .pfe-m-1-col-on-lg { + width: calc(8.33333% - 1rem); + } + .pfe-l-grid > .pfe-m-2-col-on-lg { + width: calc(16.66667% - 1rem); + } + .pfe-l-grid > .pfe-m-3-col-on-lg { + width: calc(25% - 1rem); + } + .pfe-l-grid > .pfe-m-4-col-on-lg { + width: calc(33.33333% - 1rem); + } + .pfe-l-grid > .pfe-m-5-col-on-lg { + width: calc(41.66667% - 1rem); + } + .pfe-l-grid > .pfe-m-6-col-on-lg { + width: calc(50% - 1rem); + } + .pfe-l-grid > .pfe-m-7-col-on-lg { + width: calc(58.33333% - 1rem); + } + .pfe-l-grid > .pfe-m-8-col-on-lg { + width: calc(66.66667% - 1rem); + } + .pfe-l-grid > .pfe-m-9-col-on-lg { + width: calc(75% - 1rem); + } + .pfe-l-grid > .pfe-m-10-col-on-lg { + width: calc(83.33333% - 1rem); + } + .pfe-l-grid > .pfe-m-11-col-on-lg { + width: calc(91.66667% - 1rem); + } + .pfe-l-grid > .pfe-m-12-col-on-lg { + width: calc(100% - 1rem); + } +} + +@media screen and (min-width: 1200px) { + .pfe-l-grid.pfe-m-all-1-col-on-xl > * { + width: calc(8.33333% - 1rem); + } + .pfe-l-grid.pfe-m-all-2-col-on-xl > * { + width: calc(16.66667% - 1rem); + } + .pfe-l-grid.pfe-m-all-3-col-on-xl > * { + width: calc(25% - 1rem); + } + .pfe-l-grid.pfe-m-all-4-col-on-xl > * { + width: calc(33.33333% - 1rem); + } + .pfe-l-grid.pfe-m-all-5-col-on-xl > * { + width: calc(41.66667% - 1rem); + } + .pfe-l-grid.pfe-m-all-6-col-on-xl > * { + width: calc(50% - 1rem); + } + .pfe-l-grid.pfe-m-all-7-col-on-xl > * { + width: calc(58.33333% - 1rem); + } + .pfe-l-grid.pfe-m-all-8-col-on-xl > * { + width: calc(66.66667% - 1rem); + } + .pfe-l-grid.pfe-m-all-9-col-on-xl > * { + width: calc(75% - 1rem); + } + .pfe-l-grid.pfe-m-all-10-col-on-xl > * { + width: calc(83.33333% - 1rem); + } + .pfe-l-grid.pfe-m-all-11-col-on-xl > * { + width: calc(91.66667% - 1rem); + } + .pfe-l-grid.pfe-m-all-12-col-on-xl > * { + width: calc(100% - 1rem); + } + .pfe-l-grid > .pfe-m-1-col-on-xl { + width: calc(8.33333% - 1rem); + } + .pfe-l-grid > .pfe-m-2-col-on-xl { + width: calc(16.66667% - 1rem); + } + .pfe-l-grid > .pfe-m-3-col-on-xl { + width: calc(25% - 1rem); + } + .pfe-l-grid > .pfe-m-4-col-on-xl { + width: calc(33.33333% - 1rem); + } + .pfe-l-grid > .pfe-m-5-col-on-xl { + width: calc(41.66667% - 1rem); + } + .pfe-l-grid > .pfe-m-6-col-on-xl { + width: calc(50% - 1rem); + } + .pfe-l-grid > .pfe-m-7-col-on-xl { + width: calc(58.33333% - 1rem); + } + .pfe-l-grid > .pfe-m-8-col-on-xl { + width: calc(66.66667% - 1rem); + } + .pfe-l-grid > .pfe-m-9-col-on-xl { + width: calc(75% - 1rem); + } + .pfe-l-grid > .pfe-m-10-col-on-xl { + width: calc(83.33333% - 1rem); + } + .pfe-l-grid > .pfe-m-11-col-on-xl { + width: calc(91.66667% - 1rem); + } + .pfe-l-grid > .pfe-m-12-col-on-xl { + width: calc(100% - 1rem); + } +} + +.pfe-l-grid.pfe-m-gutters { + margin: calc(0.5rem * -1); +} + +.pfe-l-grid.pfe-m-gutters > * { + margin: 0.5rem; +} + +@supports (display: grid) { + .pfe-l-grid { + display: grid; + grid-template-columns: repeat(12, [col-start] 1fr); + } + .pfe-l-grid > *, .pfe-l-grid__item { + width: auto; + margin: 0; + grid-column-start: auto; + grid-column-end: span 12; + } + .pfe-l-grid.pfe-l-grid-fill-height { + height: 100%; + } + @media screen and (min-width: 576px) { + .pfe-l-grid.pfe-m-all-1-col > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 1; + } + .pfe-l-grid.pfe-m-all-2-col > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 2; + } + .pfe-l-grid.pfe-m-all-3-col > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 3; + } + .pfe-l-grid.pfe-m-all-4-col > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 4; + } + .pfe-l-grid.pfe-m-all-5-col > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 5; + } + .pfe-l-grid.pfe-m-all-6-col > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 6; + } + .pfe-l-grid.pfe-m-all-7-col > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 7; + } + .pfe-l-grid.pfe-m-all-8-col > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 8; + } + .pfe-l-grid.pfe-m-all-9-col > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 9; + } + .pfe-l-grid.pfe-m-all-10-col > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 10; + } + .pfe-l-grid.pfe-m-all-11-col > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 11; + } + .pfe-l-grid.pfe-m-all-12-col > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 12; + } + .pfe-l-grid > .pfe-m-1-col { + width: auto; + grid-column-start: auto; + grid-column-end: span 1; + } + .pfe-l-grid > .pfe-m-2-col { + width: auto; + grid-column-start: auto; + grid-column-end: span 2; + } + .pfe-l-grid > .pfe-m-3-col { + width: auto; + grid-column-start: auto; + grid-column-end: span 3; + } + .pfe-l-grid > .pfe-m-4-col { + width: auto; + grid-column-start: auto; + grid-column-end: span 4; + } + .pfe-l-grid > .pfe-m-5-col { + width: auto; + grid-column-start: auto; + grid-column-end: span 5; + } + .pfe-l-grid > .pfe-m-6-col { + width: auto; + grid-column-start: auto; + grid-column-end: span 6; + } + .pfe-l-grid > .pfe-m-7-col { + width: auto; + grid-column-start: auto; + grid-column-end: span 7; + } + .pfe-l-grid > .pfe-m-8-col { + width: auto; + grid-column-start: auto; + grid-column-end: span 8; + } + .pfe-l-grid > .pfe-m-9-col { + width: auto; + grid-column-start: auto; + grid-column-end: span 9; + } + .pfe-l-grid > .pfe-m-10-col { + width: auto; + grid-column-start: auto; + grid-column-end: span 10; + } + .pfe-l-grid > .pfe-m-11-col { + width: auto; + grid-column-start: auto; + grid-column-end: span 11; + } + .pfe-l-grid > .pfe-m-12-col { + width: auto; + grid-column-start: auto; + grid-column-end: span 12; + } + .pfe-l-grid > .pfe-m-startat-1-col { + grid-column-start: col-start 1; + } + .pfe-l-grid > .pfe-m-startat-2-col { + grid-column-start: col-start 2; + } + .pfe-l-grid > .pfe-m-startat-3-col { + grid-column-start: col-start 3; + } + .pfe-l-grid > .pfe-m-startat-4-col { + grid-column-start: col-start 4; + } + .pfe-l-grid > .pfe-m-startat-5-col { + grid-column-start: col-start 5; + } + .pfe-l-grid > .pfe-m-startat-6-col { + grid-column-start: col-start 6; + } + .pfe-l-grid > .pfe-m-startat-7-col { + grid-column-start: col-start 7; + } + .pfe-l-grid > .pfe-m-startat-8-col { + grid-column-start: col-start 8; + } + .pfe-l-grid > .pfe-m-startat-9-col { + grid-column-start: col-start 9; + } + .pfe-l-grid > .pfe-m-startat-10-col { + grid-column-start: col-start 10; + } + .pfe-l-grid > .pfe-m-startat-11-col { + grid-column-start: col-start 11; + } + .pfe-l-grid > .pfe-m-startat-12-col { + grid-column-start: col-start 12; + } + .pfe-l-grid > .pfe-m-1-row { + grid-row: span 1; + } + .pfe-l-grid > .pfe-m-2-row { + grid-row: span 2; + } + .pfe-l-grid > .pfe-m-3-row { + grid-row: span 3; + } + .pfe-l-grid > .pfe-m-4-row { + grid-row: span 4; + } + .pfe-l-grid > .pfe-m-5-row { + grid-row: span 5; + } + .pfe-l-grid > .pfe-m-6-row { + grid-row: span 6; + } + .pfe-l-grid > .pfe-m-7-row { + grid-row: span 7; + } + .pfe-l-grid > .pfe-m-8-row { + grid-row: span 8; + } + .pfe-l-grid > .pfe-m-9-row { + grid-row: span 9; + } + .pfe-l-grid > .pfe-m-10-row { + grid-row: span 10; + } + .pfe-l-grid > .pfe-m-11-row { + grid-row: span 11; + } + .pfe-l-grid > .pfe-m-12-row { + grid-row: span 12; + } + } + @media screen and (max-width: 0) { + .pfe-l-grid.pfe-m-all-1-col-on-xs > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 1; + } + .pfe-l-grid.pfe-m-all-2-col-on-xs > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 2; + } + .pfe-l-grid.pfe-m-all-3-col-on-xs > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 3; + } + .pfe-l-grid.pfe-m-all-4-col-on-xs > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 4; + } + .pfe-l-grid.pfe-m-all-5-col-on-xs > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 5; + } + .pfe-l-grid.pfe-m-all-6-col-on-xs > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 6; + } + .pfe-l-grid.pfe-m-all-7-col-on-xs > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 7; + } + .pfe-l-grid.pfe-m-all-8-col-on-xs > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 8; + } + .pfe-l-grid.pfe-m-all-9-col-on-xs > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 9; + } + .pfe-l-grid.pfe-m-all-10-col-on-xs > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 10; + } + .pfe-l-grid.pfe-m-all-11-col-on-xs > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 11; + } + .pfe-l-grid.pfe-m-all-12-col-on-xs > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 12; + } + .pfe-l-grid > .pfe-m-1-col-on-xs { + width: auto; + grid-column-start: auto; + grid-column-end: span 1; + } + .pfe-l-grid > .pfe-m-2-col-on-xs { + width: auto; + grid-column-start: auto; + grid-column-end: span 2; + } + .pfe-l-grid > .pfe-m-3-col-on-xs { + width: auto; + grid-column-start: auto; + grid-column-end: span 3; + } + .pfe-l-grid > .pfe-m-4-col-on-xs { + width: auto; + grid-column-start: auto; + grid-column-end: span 4; + } + .pfe-l-grid > .pfe-m-5-col-on-xs { + width: auto; + grid-column-start: auto; + grid-column-end: span 5; + } + .pfe-l-grid > .pfe-m-6-col-on-xs { + width: auto; + grid-column-start: auto; + grid-column-end: span 6; + } + .pfe-l-grid > .pfe-m-7-col-on-xs { + width: auto; + grid-column-start: auto; + grid-column-end: span 7; + } + .pfe-l-grid > .pfe-m-8-col-on-xs { + width: auto; + grid-column-start: auto; + grid-column-end: span 8; + } + .pfe-l-grid > .pfe-m-9-col-on-xs { + width: auto; + grid-column-start: auto; + grid-column-end: span 9; + } + .pfe-l-grid > .pfe-m-10-col-on-xs { + width: auto; + grid-column-start: auto; + grid-column-end: span 10; + } + .pfe-l-grid > .pfe-m-11-col-on-xs { + width: auto; + grid-column-start: auto; + grid-column-end: span 11; + } + .pfe-l-grid > .pfe-m-12-col-on-xs { + width: auto; + grid-column-start: auto; + grid-column-end: span 12; + } + .pfe-l-grid > .pfe-m-startat-1-col-on-xs { + grid-column-start: col-start 1; + } + .pfe-l-grid > .pfe-m-startat-2-col-on-xs { + grid-column-start: col-start 2; + } + .pfe-l-grid > .pfe-m-startat-3-col-on-xs { + grid-column-start: col-start 3; + } + .pfe-l-grid > .pfe-m-startat-4-col-on-xs { + grid-column-start: col-start 4; + } + .pfe-l-grid > .pfe-m-startat-5-col-on-xs { + grid-column-start: col-start 5; + } + .pfe-l-grid > .pfe-m-startat-6-col-on-xs { + grid-column-start: col-start 6; + } + .pfe-l-grid > .pfe-m-startat-7-col-on-xs { + grid-column-start: col-start 7; + } + .pfe-l-grid > .pfe-m-startat-8-col-on-xs { + grid-column-start: col-start 8; + } + .pfe-l-grid > .pfe-m-startat-9-col-on-xs { + grid-column-start: col-start 9; + } + .pfe-l-grid > .pfe-m-startat-10-col-on-xs { + grid-column-start: col-start 10; + } + .pfe-l-grid > .pfe-m-startat-11-col-on-xs { + grid-column-start: col-start 11; + } + .pfe-l-grid > .pfe-m-startat-12-col-on-xs { + grid-column-start: col-start 12; + } + .pfe-l-grid > .pfe-m-1-row-on-xs { + grid-row: span 1; + } + .pfe-l-grid > .pfe-m-2-row-on-xs { + grid-row: span 2; + } + .pfe-l-grid > .pfe-m-3-row-on-xs { + grid-row: span 3; + } + .pfe-l-grid > .pfe-m-4-row-on-xs { + grid-row: span 4; + } + .pfe-l-grid > .pfe-m-5-row-on-xs { + grid-row: span 5; + } + .pfe-l-grid > .pfe-m-6-row-on-xs { + grid-row: span 6; + } + .pfe-l-grid > .pfe-m-7-row-on-xs { + grid-row: span 7; + } + .pfe-l-grid > .pfe-m-8-row-on-xs { + grid-row: span 8; + } + .pfe-l-grid > .pfe-m-9-row-on-xs { + grid-row: span 9; + } + .pfe-l-grid > .pfe-m-10-row-on-xs { + grid-row: span 10; + } + .pfe-l-grid > .pfe-m-11-row-on-xs { + grid-row: span 11; + } + .pfe-l-grid > .pfe-m-12-row-on-xs { + grid-row: span 12; + } + } + @media screen and (min-width: 576px) { + .pfe-l-grid.pfe-m-all-1-col-on-sm > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 1; + } + .pfe-l-grid.pfe-m-all-2-col-on-sm > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 2; + } + .pfe-l-grid.pfe-m-all-3-col-on-sm > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 3; + } + .pfe-l-grid.pfe-m-all-4-col-on-sm > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 4; + } + .pfe-l-grid.pfe-m-all-5-col-on-sm > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 5; + } + .pfe-l-grid.pfe-m-all-6-col-on-sm > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 6; + } + .pfe-l-grid.pfe-m-all-7-col-on-sm > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 7; + } + .pfe-l-grid.pfe-m-all-8-col-on-sm > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 8; + } + .pfe-l-grid.pfe-m-all-9-col-on-sm > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 9; + } + .pfe-l-grid.pfe-m-all-10-col-on-sm > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 10; + } + .pfe-l-grid.pfe-m-all-11-col-on-sm > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 11; + } + .pfe-l-grid.pfe-m-all-12-col-on-sm > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 12; + } + .pfe-l-grid > .pfe-m-1-col-on-sm { + width: auto; + grid-column-start: auto; + grid-column-end: span 1; + } + .pfe-l-grid > .pfe-m-2-col-on-sm { + width: auto; + grid-column-start: auto; + grid-column-end: span 2; + } + .pfe-l-grid > .pfe-m-3-col-on-sm { + width: auto; + grid-column-start: auto; + grid-column-end: span 3; + } + .pfe-l-grid > .pfe-m-4-col-on-sm { + width: auto; + grid-column-start: auto; + grid-column-end: span 4; + } + .pfe-l-grid > .pfe-m-5-col-on-sm { + width: auto; + grid-column-start: auto; + grid-column-end: span 5; + } + .pfe-l-grid > .pfe-m-6-col-on-sm { + width: auto; + grid-column-start: auto; + grid-column-end: span 6; + } + .pfe-l-grid > .pfe-m-7-col-on-sm { + width: auto; + grid-column-start: auto; + grid-column-end: span 7; + } + .pfe-l-grid > .pfe-m-8-col-on-sm { + width: auto; + grid-column-start: auto; + grid-column-end: span 8; + } + .pfe-l-grid > .pfe-m-9-col-on-sm { + width: auto; + grid-column-start: auto; + grid-column-end: span 9; + } + .pfe-l-grid > .pfe-m-10-col-on-sm { + width: auto; + grid-column-start: auto; + grid-column-end: span 10; + } + .pfe-l-grid > .pfe-m-11-col-on-sm { + width: auto; + grid-column-start: auto; + grid-column-end: span 11; + } + .pfe-l-grid > .pfe-m-12-col-on-sm { + width: auto; + grid-column-start: auto; + grid-column-end: span 12; + } + .pfe-l-grid > .pfe-m-startat-1-col-on-sm { + grid-column-start: col-start 1; + } + .pfe-l-grid > .pfe-m-startat-2-col-on-sm { + grid-column-start: col-start 2; + } + .pfe-l-grid > .pfe-m-startat-3-col-on-sm { + grid-column-start: col-start 3; + } + .pfe-l-grid > .pfe-m-startat-4-col-on-sm { + grid-column-start: col-start 4; + } + .pfe-l-grid > .pfe-m-startat-5-col-on-sm { + grid-column-start: col-start 5; + } + .pfe-l-grid > .pfe-m-startat-6-col-on-sm { + grid-column-start: col-start 6; + } + .pfe-l-grid > .pfe-m-startat-7-col-on-sm { + grid-column-start: col-start 7; + } + .pfe-l-grid > .pfe-m-startat-8-col-on-sm { + grid-column-start: col-start 8; + } + .pfe-l-grid > .pfe-m-startat-9-col-on-sm { + grid-column-start: col-start 9; + } + .pfe-l-grid > .pfe-m-startat-10-col-on-sm { + grid-column-start: col-start 10; + } + .pfe-l-grid > .pfe-m-startat-11-col-on-sm { + grid-column-start: col-start 11; + } + .pfe-l-grid > .pfe-m-startat-12-col-on-sm { + grid-column-start: col-start 12; + } + .pfe-l-grid > .pfe-m-1-row-on-sm { + grid-row: span 1; + } + .pfe-l-grid > .pfe-m-2-row-on-sm { + grid-row: span 2; + } + .pfe-l-grid > .pfe-m-3-row-on-sm { + grid-row: span 3; + } + .pfe-l-grid > .pfe-m-4-row-on-sm { + grid-row: span 4; + } + .pfe-l-grid > .pfe-m-5-row-on-sm { + grid-row: span 5; + } + .pfe-l-grid > .pfe-m-6-row-on-sm { + grid-row: span 6; + } + .pfe-l-grid > .pfe-m-7-row-on-sm { + grid-row: span 7; + } + .pfe-l-grid > .pfe-m-8-row-on-sm { + grid-row: span 8; + } + .pfe-l-grid > .pfe-m-9-row-on-sm { + grid-row: span 9; + } + .pfe-l-grid > .pfe-m-10-row-on-sm { + grid-row: span 10; + } + .pfe-l-grid > .pfe-m-11-row-on-sm { + grid-row: span 11; + } + .pfe-l-grid > .pfe-m-12-row-on-sm { + grid-row: span 12; + } + } + @media screen and (min-width: 768px) { + .pfe-l-grid.pfe-m-all-1-col-on-md > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 1; + } + .pfe-l-grid.pfe-m-all-2-col-on-md > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 2; + } + .pfe-l-grid.pfe-m-all-3-col-on-md > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 3; + } + .pfe-l-grid.pfe-m-all-4-col-on-md > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 4; + } + .pfe-l-grid.pfe-m-all-5-col-on-md > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 5; + } + .pfe-l-grid.pfe-m-all-6-col-on-md > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 6; + } + .pfe-l-grid.pfe-m-all-7-col-on-md > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 7; + } + .pfe-l-grid.pfe-m-all-8-col-on-md > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 8; + } + .pfe-l-grid.pfe-m-all-9-col-on-md > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 9; + } + .pfe-l-grid.pfe-m-all-10-col-on-md > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 10; + } + .pfe-l-grid.pfe-m-all-11-col-on-md > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 11; + } + .pfe-l-grid.pfe-m-all-12-col-on-md > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 12; + } + .pfe-l-grid > .pfe-m-1-col-on-md { + width: auto; + grid-column-start: auto; + grid-column-end: span 1; + } + .pfe-l-grid > .pfe-m-2-col-on-md { + width: auto; + grid-column-start: auto; + grid-column-end: span 2; + } + .pfe-l-grid > .pfe-m-3-col-on-md { + width: auto; + grid-column-start: auto; + grid-column-end: span 3; + } + .pfe-l-grid > .pfe-m-4-col-on-md { + width: auto; + grid-column-start: auto; + grid-column-end: span 4; + } + .pfe-l-grid > .pfe-m-5-col-on-md { + width: auto; + grid-column-start: auto; + grid-column-end: span 5; + } + .pfe-l-grid > .pfe-m-6-col-on-md { + width: auto; + grid-column-start: auto; + grid-column-end: span 6; + } + .pfe-l-grid > .pfe-m-7-col-on-md { + width: auto; + grid-column-start: auto; + grid-column-end: span 7; + } + .pfe-l-grid > .pfe-m-8-col-on-md { + width: auto; + grid-column-start: auto; + grid-column-end: span 8; + } + .pfe-l-grid > .pfe-m-9-col-on-md { + width: auto; + grid-column-start: auto; + grid-column-end: span 9; + } + .pfe-l-grid > .pfe-m-10-col-on-md { + width: auto; + grid-column-start: auto; + grid-column-end: span 10; + } + .pfe-l-grid > .pfe-m-11-col-on-md { + width: auto; + grid-column-start: auto; + grid-column-end: span 11; + } + .pfe-l-grid > .pfe-m-12-col-on-md { + width: auto; + grid-column-start: auto; + grid-column-end: span 12; + } + .pfe-l-grid > .pfe-m-startat-1-col-on-md { + grid-column-start: col-start 1; + } + .pfe-l-grid > .pfe-m-startat-2-col-on-md { + grid-column-start: col-start 2; + } + .pfe-l-grid > .pfe-m-startat-3-col-on-md { + grid-column-start: col-start 3; + } + .pfe-l-grid > .pfe-m-startat-4-col-on-md { + grid-column-start: col-start 4; + } + .pfe-l-grid > .pfe-m-startat-5-col-on-md { + grid-column-start: col-start 5; + } + .pfe-l-grid > .pfe-m-startat-6-col-on-md { + grid-column-start: col-start 6; + } + .pfe-l-grid > .pfe-m-startat-7-col-on-md { + grid-column-start: col-start 7; + } + .pfe-l-grid > .pfe-m-startat-8-col-on-md { + grid-column-start: col-start 8; + } + .pfe-l-grid > .pfe-m-startat-9-col-on-md { + grid-column-start: col-start 9; + } + .pfe-l-grid > .pfe-m-startat-10-col-on-md { + grid-column-start: col-start 10; + } + .pfe-l-grid > .pfe-m-startat-11-col-on-md { + grid-column-start: col-start 11; + } + .pfe-l-grid > .pfe-m-startat-12-col-on-md { + grid-column-start: col-start 12; + } + .pfe-l-grid > .pfe-m-1-row-on-md { + grid-row: span 1; + } + .pfe-l-grid > .pfe-m-2-row-on-md { + grid-row: span 2; + } + .pfe-l-grid > .pfe-m-3-row-on-md { + grid-row: span 3; + } + .pfe-l-grid > .pfe-m-4-row-on-md { + grid-row: span 4; + } + .pfe-l-grid > .pfe-m-5-row-on-md { + grid-row: span 5; + } + .pfe-l-grid > .pfe-m-6-row-on-md { + grid-row: span 6; + } + .pfe-l-grid > .pfe-m-7-row-on-md { + grid-row: span 7; + } + .pfe-l-grid > .pfe-m-8-row-on-md { + grid-row: span 8; + } + .pfe-l-grid > .pfe-m-9-row-on-md { + grid-row: span 9; + } + .pfe-l-grid > .pfe-m-10-row-on-md { + grid-row: span 10; + } + .pfe-l-grid > .pfe-m-11-row-on-md { + grid-row: span 11; + } + .pfe-l-grid > .pfe-m-12-row-on-md { + grid-row: span 12; + } + } + @media screen and (min-width: 992px) { + .pfe-l-grid.pfe-m-all-1-col-on-lg > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 1; + } + .pfe-l-grid.pfe-m-all-2-col-on-lg > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 2; + } + .pfe-l-grid.pfe-m-all-3-col-on-lg > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 3; + } + .pfe-l-grid.pfe-m-all-4-col-on-lg > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 4; + } + .pfe-l-grid.pfe-m-all-5-col-on-lg > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 5; + } + .pfe-l-grid.pfe-m-all-6-col-on-lg > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 6; + } + .pfe-l-grid.pfe-m-all-7-col-on-lg > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 7; + } + .pfe-l-grid.pfe-m-all-8-col-on-lg > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 8; + } + .pfe-l-grid.pfe-m-all-9-col-on-lg > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 9; + } + .pfe-l-grid.pfe-m-all-10-col-on-lg > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 10; + } + .pfe-l-grid.pfe-m-all-11-col-on-lg > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 11; + } + .pfe-l-grid.pfe-m-all-12-col-on-lg > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 12; + } + .pfe-l-grid > .pfe-m-1-col-on-lg { + width: auto; + grid-column-start: auto; + grid-column-end: span 1; + } + .pfe-l-grid > .pfe-m-2-col-on-lg { + width: auto; + grid-column-start: auto; + grid-column-end: span 2; + } + .pfe-l-grid > .pfe-m-3-col-on-lg { + width: auto; + grid-column-start: auto; + grid-column-end: span 3; + } + .pfe-l-grid > .pfe-m-4-col-on-lg { + width: auto; + grid-column-start: auto; + grid-column-end: span 4; + } + .pfe-l-grid > .pfe-m-5-col-on-lg { + width: auto; + grid-column-start: auto; + grid-column-end: span 5; + } + .pfe-l-grid > .pfe-m-6-col-on-lg { + width: auto; + grid-column-start: auto; + grid-column-end: span 6; + } + .pfe-l-grid > .pfe-m-7-col-on-lg { + width: auto; + grid-column-start: auto; + grid-column-end: span 7; + } + .pfe-l-grid > .pfe-m-8-col-on-lg { + width: auto; + grid-column-start: auto; + grid-column-end: span 8; + } + .pfe-l-grid > .pfe-m-9-col-on-lg { + width: auto; + grid-column-start: auto; + grid-column-end: span 9; + } + .pfe-l-grid > .pfe-m-10-col-on-lg { + width: auto; + grid-column-start: auto; + grid-column-end: span 10; + } + .pfe-l-grid > .pfe-m-11-col-on-lg { + width: auto; + grid-column-start: auto; + grid-column-end: span 11; + } + .pfe-l-grid > .pfe-m-12-col-on-lg { + width: auto; + grid-column-start: auto; + grid-column-end: span 12; + } + .pfe-l-grid > .pfe-m-startat-1-col-on-lg { + grid-column-start: col-start 1; + } + .pfe-l-grid > .pfe-m-startat-2-col-on-lg { + grid-column-start: col-start 2; + } + .pfe-l-grid > .pfe-m-startat-3-col-on-lg { + grid-column-start: col-start 3; + } + .pfe-l-grid > .pfe-m-startat-4-col-on-lg { + grid-column-start: col-start 4; + } + .pfe-l-grid > .pfe-m-startat-5-col-on-lg { + grid-column-start: col-start 5; + } + .pfe-l-grid > .pfe-m-startat-6-col-on-lg { + grid-column-start: col-start 6; + } + .pfe-l-grid > .pfe-m-startat-7-col-on-lg { + grid-column-start: col-start 7; + } + .pfe-l-grid > .pfe-m-startat-8-col-on-lg { + grid-column-start: col-start 8; + } + .pfe-l-grid > .pfe-m-startat-9-col-on-lg { + grid-column-start: col-start 9; + } + .pfe-l-grid > .pfe-m-startat-10-col-on-lg { + grid-column-start: col-start 10; + } + .pfe-l-grid > .pfe-m-startat-11-col-on-lg { + grid-column-start: col-start 11; + } + .pfe-l-grid > .pfe-m-startat-12-col-on-lg { + grid-column-start: col-start 12; + } + .pfe-l-grid > .pfe-m-1-row-on-lg { + grid-row: span 1; + } + .pfe-l-grid > .pfe-m-2-row-on-lg { + grid-row: span 2; + } + .pfe-l-grid > .pfe-m-3-row-on-lg { + grid-row: span 3; + } + .pfe-l-grid > .pfe-m-4-row-on-lg { + grid-row: span 4; + } + .pfe-l-grid > .pfe-m-5-row-on-lg { + grid-row: span 5; + } + .pfe-l-grid > .pfe-m-6-row-on-lg { + grid-row: span 6; + } + .pfe-l-grid > .pfe-m-7-row-on-lg { + grid-row: span 7; + } + .pfe-l-grid > .pfe-m-8-row-on-lg { + grid-row: span 8; + } + .pfe-l-grid > .pfe-m-9-row-on-lg { + grid-row: span 9; + } + .pfe-l-grid > .pfe-m-10-row-on-lg { + grid-row: span 10; + } + .pfe-l-grid > .pfe-m-11-row-on-lg { + grid-row: span 11; + } + .pfe-l-grid > .pfe-m-12-row-on-lg { + grid-row: span 12; + } + } + @media screen and (min-width: 1200px) { + .pfe-l-grid.pfe-m-all-1-col-on-xl > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 1; + } + .pfe-l-grid.pfe-m-all-2-col-on-xl > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 2; + } + .pfe-l-grid.pfe-m-all-3-col-on-xl > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 3; + } + .pfe-l-grid.pfe-m-all-4-col-on-xl > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 4; + } + .pfe-l-grid.pfe-m-all-5-col-on-xl > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 5; + } + .pfe-l-grid.pfe-m-all-6-col-on-xl > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 6; + } + .pfe-l-grid.pfe-m-all-7-col-on-xl > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 7; + } + .pfe-l-grid.pfe-m-all-8-col-on-xl > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 8; + } + .pfe-l-grid.pfe-m-all-9-col-on-xl > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 9; + } + .pfe-l-grid.pfe-m-all-10-col-on-xl > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 10; + } + .pfe-l-grid.pfe-m-all-11-col-on-xl > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 11; + } + .pfe-l-grid.pfe-m-all-12-col-on-xl > * { + width: auto; + grid-column-start: auto; + grid-column-end: span 12; + } + .pfe-l-grid > .pfe-m-1-col-on-xl { + width: auto; + grid-column-start: auto; + grid-column-end: span 1; + } + .pfe-l-grid > .pfe-m-2-col-on-xl { + width: auto; + grid-column-start: auto; + grid-column-end: span 2; + } + .pfe-l-grid > .pfe-m-3-col-on-xl { + width: auto; + grid-column-start: auto; + grid-column-end: span 3; + } + .pfe-l-grid > .pfe-m-4-col-on-xl { + width: auto; + grid-column-start: auto; + grid-column-end: span 4; + } + .pfe-l-grid > .pfe-m-5-col-on-xl { + width: auto; + grid-column-start: auto; + grid-column-end: span 5; + } + .pfe-l-grid > .pfe-m-6-col-on-xl { + width: auto; + grid-column-start: auto; + grid-column-end: span 6; + } + .pfe-l-grid > .pfe-m-7-col-on-xl { + width: auto; + grid-column-start: auto; + grid-column-end: span 7; + } + .pfe-l-grid > .pfe-m-8-col-on-xl { + width: auto; + grid-column-start: auto; + grid-column-end: span 8; + } + .pfe-l-grid > .pfe-m-9-col-on-xl { + width: auto; + grid-column-start: auto; + grid-column-end: span 9; + } + .pfe-l-grid > .pfe-m-10-col-on-xl { + width: auto; + grid-column-start: auto; + grid-column-end: span 10; + } + .pfe-l-grid > .pfe-m-11-col-on-xl { + width: auto; + grid-column-start: auto; + grid-column-end: span 11; + } + .pfe-l-grid > .pfe-m-12-col-on-xl { + width: auto; + grid-column-start: auto; + grid-column-end: span 12; + } + .pfe-l-grid > .pfe-m-startat-1-col-on-xl { + grid-column-start: col-start 1; + } + .pfe-l-grid > .pfe-m-startat-2-col-on-xl { + grid-column-start: col-start 2; + } + .pfe-l-grid > .pfe-m-startat-3-col-on-xl { + grid-column-start: col-start 3; + } + .pfe-l-grid > .pfe-m-startat-4-col-on-xl { + grid-column-start: col-start 4; + } + .pfe-l-grid > .pfe-m-startat-5-col-on-xl { + grid-column-start: col-start 5; + } + .pfe-l-grid > .pfe-m-startat-6-col-on-xl { + grid-column-start: col-start 6; + } + .pfe-l-grid > .pfe-m-startat-7-col-on-xl { + grid-column-start: col-start 7; + } + .pfe-l-grid > .pfe-m-startat-8-col-on-xl { + grid-column-start: col-start 8; + } + .pfe-l-grid > .pfe-m-startat-9-col-on-xl { + grid-column-start: col-start 9; + } + .pfe-l-grid > .pfe-m-startat-10-col-on-xl { + grid-column-start: col-start 10; + } + .pfe-l-grid > .pfe-m-startat-11-col-on-xl { + grid-column-start: col-start 11; + } + .pfe-l-grid > .pfe-m-startat-12-col-on-xl { + grid-column-start: col-start 12; + } + .pfe-l-grid > .pfe-m-1-row-on-xl { + grid-row: span 1; + } + .pfe-l-grid > .pfe-m-2-row-on-xl { + grid-row: span 2; + } + .pfe-l-grid > .pfe-m-3-row-on-xl { + grid-row: span 3; + } + .pfe-l-grid > .pfe-m-4-row-on-xl { + grid-row: span 4; + } + .pfe-l-grid > .pfe-m-5-row-on-xl { + grid-row: span 5; + } + .pfe-l-grid > .pfe-m-6-row-on-xl { + grid-row: span 6; + } + .pfe-l-grid > .pfe-m-7-row-on-xl { + grid-row: span 7; + } + .pfe-l-grid > .pfe-m-8-row-on-xl { + grid-row: span 8; + } + .pfe-l-grid > .pfe-m-9-row-on-xl { + grid-row: span 9; + } + .pfe-l-grid > .pfe-m-10-row-on-xl { + grid-row: span 10; + } + .pfe-l-grid > .pfe-m-11-row-on-xl { + grid-row: span 11; + } + .pfe-l-grid > .pfe-m-12-row-on-xl { + grid-row: span 12; + } + } + .pfe-l-grid.pfe-m-gutters { + grid-gap: 1rem; + margin: 0; + } + .pfe-l-grid.pfe-m-gutters > * { + margin: 0; + } +} + +.pfe-l-bullseye { + 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: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 100%; + padding: 1rem; + padding: var(--pfe-theme--container-spacer, 1rem); + margin: 0; +} + +/*# sourceMappingURL=pfe-layouts.css.map */ diff --git a/elements/pfe-layouts/pfe-layouts.css.map b/elements/pfe-layouts/pfe-layouts.css.map new file mode 100644 index 0000000000..3429af98f7 --- /dev/null +++ b/elements/pfe-layouts/pfe-layouts.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","pfe-layouts.css","../../pfe-sass/variables/_colors.scss","layouts/_alignments.scss","layouts/_grid.scss","layouts/_bullseye.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;ECoBE;AC4GF,6BAAA;AAOA,+BAAA;ACrIA;EACE,gBAAgB;AFsBlB;;AEnBA;EACE,kBAAkB;AFsBpB;;AEnBA;EACE,iBAAiB;AFsBnB;;AGsFA;EACE,8BAAsB;UAAtB,sBAAsB;EACtB,oBAAa;EAAb,qBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,uBAAe;MAAf,mBAAe;UAAf,eAAe;AHnFjB;;AGgFA;EAOI,8BAAsB;UAAtB,sBAAsB;EACtB,WAAW;EACX,cAAc;AHnFlB;;AGnBI;EAqEE;IAEE,4BAAyC;EH/C/C;EG6CI;IAEE,6BAAyC;EH5C/C;EG0CI;IAEE,uBAAyC;EHzC/C;EGuCI;IAEE,6BAAyC;EHtC/C;EGoCI;IAEE,6BAAyC;EHnC/C;EGiCI;IAEE,uBAAyC;EHhC/C;EG8BI;IAEE,6BAAyC;EH7B/C;EG2BI;IAEE,6BAAyC;EH1B/C;EGwBI;IAEE,uBAAyC;EHvB/C;EGqBI;IAEE,6BAAyC;EHpB/C;EGkBI;IAEE,6BAAyC;EHjB/C;EGeI;IAEE,wBAAyC;EHd/C;EG7BE;IAEE,4BAAyC;EH8B7C;EGhCE;IAEE,6BAAyC;EHiC7C;EGnCE;IAEE,uBAAyC;EHoC7C;EGtCE;IAEE,6BAAyC;EHuC7C;EGzCE;IAEE,6BAAyC;EH0C7C;EG5CE;IAEE,uBAAyC;EH6C7C;EG/CE;IAEE,6BAAyC;EHgD7C;EGlDE;IAEE,6BAAyC;EHmD7C;EGrDE;IAEE,uBAAyC;EHsD7C;EGxDE;IAEE,6BAAyC;EHyD7C;EG3DE;IAEE,6BAAyC;EH4D7C;EG9DE;IAEE,wBAAyC;EH+D7C;AACF;;AGnGI;EA0EE;IAEE,4BAAyC;EH4B/C;EG9BI;IAEE,6BAAyC;EH+B/C;EGjCI;IAEE,uBAAyC;EHkC/C;EGpCI;IAEE,6BAAyC;EHqC/C;EGvCI;IAEE,6BAAyC;EHwC/C;EG1CI;IAEE,uBAAyC;EH2C/C;EG7CI;IAEE,6BAAyC;EH8C/C;EGhDI;IAEE,6BAAyC;EHiD/C;EGnDI;IAEE,uBAAyC;EHoD/C;EGtDI;IAEE,6BAAyC;EHuD/C;EGzDI;IAEE,6BAAyC;EH0D/C;EG5DI;IAEE,wBAAyC;EH6D/C;EGxGE;IAEE,4BAAyC;EHyG7C;EG3GE;IAEE,6BAAyC;EH4G7C;EG9GE;IAEE,uBAAyC;EH+G7C;EGjHE;IAEE,6BAAyC;EHkH7C;EGpHE;IAEE,6BAAyC;EHqH7C;EGvHE;IAEE,uBAAyC;EHwH7C;EG1HE;IAEE,6BAAyC;EH2H7C;EG7HE;IAEE,6BAAyC;EH8H7C;EGhIE;IAEE,uBAAyC;EHiI7C;EGnIE;IAEE,6BAAyC;EHoI7C;EGtIE;IAEE,6BAAyC;EHuI7C;EGzIE;IAEE,wBAAyC;EH0I7C;AACF;;AGzKI;EAqEE;IAEE,4BAAyC;EHuG/C;EGzGI;IAEE,6BAAyC;EH0G/C;EG5GI;IAEE,uBAAyC;EH6G/C;EG/GI;IAEE,6BAAyC;EHgH/C;EGlHI;IAEE,6BAAyC;EHmH/C;EGrHI;IAEE,uBAAyC;EHsH/C;EGxHI;IAEE,6BAAyC;EHyH/C;EG3HI;IAEE,6BAAyC;EH4H/C;EG9HI;IAEE,uBAAyC;EH+H/C;EGjII;IAEE,6BAAyC;EHkI/C;EGpII;IAEE,6BAAyC;EHqI/C;EGvII;IAEE,wBAAyC;EHwI/C;EGnLE;IAEE,4BAAyC;EHoL7C;EGtLE;IAEE,6BAAyC;EHuL7C;EGzLE;IAEE,uBAAyC;EH0L7C;EG5LE;IAEE,6BAAyC;EH6L7C;EG/LE;IAEE,6BAAyC;EHgM7C;EGlME;IAEE,uBAAyC;EHmM7C;EGrME;IAEE,6BAAyC;EHsM7C;EGxME;IAEE,6BAAyC;EHyM7C;EG3ME;IAEE,uBAAyC;EH4M7C;EG9ME;IAEE,6BAAyC;EH+M7C;EGjNE;IAEE,6BAAyC;EHkN7C;EGpNE;IAEE,wBAAyC;EHqN7C;AACF;;AG/OI;EAgEE;IAEE,4BAAyC;EHkL/C;EGpLI;IAEE,6BAAyC;EHqL/C;EGvLI;IAEE,uBAAyC;EHwL/C;EG1LI;IAEE,6BAAyC;EH2L/C;EG7LI;IAEE,6BAAyC;EH8L/C;EGhMI;IAEE,uBAAyC;EHiM/C;EGnMI;IAEE,6BAAyC;EHoM/C;EGtMI;IAEE,6BAAyC;EHuM/C;EGzMI;IAEE,uBAAyC;EH0M/C;EG5MI;IAEE,6BAAyC;EH6M/C;EG/MI;IAEE,6BAAyC;EHgN/C;EGlNI;IAEE,wBAAyC;EHmN/C;EG9PE;IAEE,4BAAyC;EH+P7C;EGjQE;IAEE,6BAAyC;EHkQ7C;EGpQE;IAEE,uBAAyC;EHqQ7C;EGvQE;IAEE,6BAAyC;EHwQ7C;EG1QE;IAEE,6BAAyC;EH2Q7C;EG7QE;IAEE,uBAAyC;EH8Q7C;EGhRE;IAEE,6BAAyC;EHiR7C;EGnRE;IAEE,6BAAyC;EHoR7C;EGtRE;IAEE,uBAAyC;EHuR7C;EGzRE;IAEE,6BAAyC;EH0R7C;EG5RE;IAEE,6BAAyC;EH6R7C;EG/RE;IAEE,wBAAyC;EHgS7C;AACF;;AGrTI;EA2DE;IAEE,4BAAyC;EH6P/C;EG/PI;IAEE,6BAAyC;EHgQ/C;EGlQI;IAEE,uBAAyC;EHmQ/C;EGrQI;IAEE,6BAAyC;EHsQ/C;EGxQI;IAEE,6BAAyC;EHyQ/C;EG3QI;IAEE,uBAAyC;EH4Q/C;EG9QI;IAEE,6BAAyC;EH+Q/C;EGjRI;IAEE,6BAAyC;EHkR/C;EGpRI;IAEE,uBAAyC;EHqR/C;EGvRI;IAEE,6BAAyC;EHwR/C;EG1RI;IAEE,6BAAyC;EH2R/C;EG7RI;IAEE,wBAAyC;EH8R/C;EGzUE;IAEE,4BAAyC;EH0U7C;EG5UE;IAEE,6BAAyC;EH6U7C;EG/UE;IAEE,uBAAyC;EHgV7C;EGlVE;IAEE,6BAAyC;EHmV7C;EGrVE;IAEE,6BAAyC;EHsV7C;EGxVE;IAEE,uBAAyC;EHyV7C;EG3VE;IAEE,6BAAyC;EH4V7C;EG9VE;IAEE,6BAAyC;EH+V7C;EGjWE;IAEE,uBAAyC;EHkW7C;EGpWE;IAEE,6BAAyC;EHqW7C;EGvWE;IAEE,6BAAyC;EHwW7C;EG1WE;IAEE,wBAAyC;EH2W7C;AACF;;AG3XI;EAsDE;IAEE,4BAAyC;EHwU/C;EG1UI;IAEE,6BAAyC;EH2U/C;EG7UI;IAEE,uBAAyC;EH8U/C;EGhVI;IAEE,6BAAyC;EHiV/C;EGnVI;IAEE,6BAAyC;EHoV/C;EGtVI;IAEE,uBAAyC;EHuV/C;EGzVI;IAEE,6BAAyC;EH0V/C;EG5VI;IAEE,6BAAyC;EH6V/C;EG/VI;IAEE,uBAAyC;EHgW/C;EGlWI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gB;IH2nClB;IG1nCA;MACE,WAAW;MACX,uBAAuB;MACvB,wBAJgB;IHgoClB;IGtnCA;MACE,8BAFgB;IH0nClB;IGznCA;MACE,8BAFgB;IH6nClB;IG5nCA;MACE,8BAFgB;IHgoClB;IG/nCA;MACE,8BAFgB;IHmoClB;IGloCA;MACE,8BAFgB;IHsoClB;IGroCA;MACE,8BAFgB;IHyoClB;IGxoCA;MACE,8BAFgB;IH4oClB;IG3oCA;MACE,8BAFgB;IH+oClB;IG9oCA;MACE,8BAFgB;IHkpClB;IGjpCA;MACE,+BAFgB;IHqpClB;IGppCA;MACE,+BAFgB;IHwpClB;IGvpCA;MACE,+BAFgB;IH2pClB;IGnpCA;MACE,gBAFgB;IHupClB;IGtpCA;MACE,gBAFgB;IH0pClB;IGzpCA;MACE,gBAFgB;IH6pClB;IG5pCA;MACE,gBAFgB;IHgqClB;IG/pCA;MACE,gBAFgB;IHmqClB;IGlqCA;MACE,gBAFgB;IHsqClB;IGrqCA;MACE,gBAFgB;IHyqClB;IGxqCA;MACE,gBAFgB;IH4qClB;IG3qCA;MACE,gBAFgB;IH+qClB;IG9qCA;MACE,iBAFgB;IHkrClB;IGjrCA;MACE,iBAFgB;IHqrClB;IGprCA;MACE,iBAFgB;IHwrClB;EACF;EG1uCE;IAsEE;MACE,WAAW;MACX,uBAAuB;MACvB,uBALc;IH4qClB;IG1qCE;MACE,WAAW;MACX,uBAAuB;MACvB,uBALc;IHirClB;IG/qCE;MACE,WAAW;MACX,uBAAuB;MACvB,uBALc;IHsrClB;IGprCE;MACE,WAAW;MACX,uBAAuB;MACvB,uBALc;IH2rClB;IGzrCE;MACE,WAAW;MACX,uBAAuB;MACvB,uBALc;IHgsClB;IG9rCE;MACE,WAAW;MACX,uBAAuB;MACvB,uBALc;IHqsClB;IGnsCE;MACE,WAAW;MACX,uBAAuB;MACvB,uBALc;IH0sClB;IGxsCE;MACE,WAAW;MACX,uBAAuB;MACvB,uBALc;IH+sClB;IG7sCE;MACE,WAAW;MACX,uBAAuB;MACvB,uBALc;IHotClB;IGltCE;MACE,WAAW;MACX,uBAAuB;MACvB,wBAL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","file":"pfe-layouts.css","sourcesContent":["/*\n * Copyright 2018 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// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n","/*\n * Copyright 2018 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/* Palette of Border Colors */\n/* Palette of Feedback Colors */\n.pfe-l--text-align--left {\n text-align: left;\n}\n\n.pfe-l--text-align--center {\n text-align: center;\n}\n\n.pfe-l--text-align--right {\n text-align: right;\n}\n\n.pfe-l-grid {\n box-sizing: border-box;\n display: flex;\n flex-wrap: wrap;\n}\n\n.pfe-l-grid > *, .pfe-l-grid__item {\n box-sizing: border-box;\n width: 100%;\n margin: 0 auto;\n}\n\n@media screen and (min-width: 576px) {\n .pfe-l-grid.pfe-m-all-1-col > * {\n width: calc(8.33333% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-2-col > * {\n width: calc(16.66667% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-3-col > * {\n width: calc(25% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-4-col > * {\n width: calc(33.33333% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-5-col > * {\n width: calc(41.66667% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-6-col > * {\n width: calc(50% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-7-col > * {\n width: calc(58.33333% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-8-col > * {\n width: calc(66.66667% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-9-col > * {\n width: calc(75% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-10-col > * {\n width: calc(83.33333% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-11-col > * {\n width: calc(91.66667% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-12-col > * {\n width: calc(100% - 1rem);\n }\n .pfe-l-grid > .pfe-m-1-col {\n width: calc(8.33333% - 1rem);\n }\n .pfe-l-grid > .pfe-m-2-col {\n width: calc(16.66667% - 1rem);\n }\n .pfe-l-grid > .pfe-m-3-col {\n width: calc(25% - 1rem);\n }\n .pfe-l-grid > .pfe-m-4-col {\n width: calc(33.33333% - 1rem);\n }\n .pfe-l-grid > .pfe-m-5-col {\n width: calc(41.66667% - 1rem);\n }\n .pfe-l-grid > .pfe-m-6-col {\n width: calc(50% - 1rem);\n }\n .pfe-l-grid > .pfe-m-7-col {\n width: calc(58.33333% - 1rem);\n }\n .pfe-l-grid > .pfe-m-8-col {\n width: calc(66.66667% - 1rem);\n }\n .pfe-l-grid > .pfe-m-9-col {\n width: calc(75% - 1rem);\n }\n .pfe-l-grid > .pfe-m-10-col {\n width: calc(83.33333% - 1rem);\n }\n .pfe-l-grid > .pfe-m-11-col {\n width: calc(91.66667% - 1rem);\n }\n .pfe-l-grid > .pfe-m-12-col {\n width: calc(100% - 1rem);\n }\n}\n\n@media screen and (max-width: 0) {\n .pfe-l-grid.pfe-m-all-1-col-on-xs > * {\n width: calc(8.33333% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-2-col-on-xs > * {\n width: calc(16.66667% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-3-col-on-xs > * {\n width: calc(25% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-4-col-on-xs > * {\n width: calc(33.33333% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-5-col-on-xs > * {\n width: calc(41.66667% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-6-col-on-xs > * {\n width: calc(50% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-7-col-on-xs > * {\n width: calc(58.33333% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-8-col-on-xs > * {\n width: calc(66.66667% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-9-col-on-xs > * {\n width: calc(75% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-10-col-on-xs > * {\n width: calc(83.33333% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-11-col-on-xs > * {\n width: calc(91.66667% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-12-col-on-xs > * {\n width: calc(100% - 1rem);\n }\n .pfe-l-grid > .pfe-m-1-col-on-xs {\n width: calc(8.33333% - 1rem);\n }\n .pfe-l-grid > .pfe-m-2-col-on-xs {\n width: calc(16.66667% - 1rem);\n }\n .pfe-l-grid > .pfe-m-3-col-on-xs {\n width: calc(25% - 1rem);\n }\n .pfe-l-grid > .pfe-m-4-col-on-xs {\n width: calc(33.33333% - 1rem);\n }\n .pfe-l-grid > .pfe-m-5-col-on-xs {\n width: calc(41.66667% - 1rem);\n }\n .pfe-l-grid > .pfe-m-6-col-on-xs {\n width: calc(50% - 1rem);\n }\n .pfe-l-grid > .pfe-m-7-col-on-xs {\n width: calc(58.33333% - 1rem);\n }\n .pfe-l-grid > .pfe-m-8-col-on-xs {\n width: calc(66.66667% - 1rem);\n }\n .pfe-l-grid > .pfe-m-9-col-on-xs {\n width: calc(75% - 1rem);\n }\n .pfe-l-grid > .pfe-m-10-col-on-xs {\n width: calc(83.33333% - 1rem);\n }\n .pfe-l-grid > .pfe-m-11-col-on-xs {\n width: calc(91.66667% - 1rem);\n }\n .pfe-l-grid > .pfe-m-12-col-on-xs {\n width: calc(100% - 1rem);\n }\n}\n\n@media screen and (min-width: 576px) {\n .pfe-l-grid.pfe-m-all-1-col-on-sm > * {\n width: calc(8.33333% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-2-col-on-sm > * {\n width: calc(16.66667% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-3-col-on-sm > * {\n width: calc(25% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-4-col-on-sm > * {\n width: calc(33.33333% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-5-col-on-sm > * {\n width: calc(41.66667% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-6-col-on-sm > * {\n width: calc(50% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-7-col-on-sm > * {\n width: calc(58.33333% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-8-col-on-sm > * {\n width: calc(66.66667% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-9-col-on-sm > * {\n width: calc(75% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-10-col-on-sm > * {\n width: calc(83.33333% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-11-col-on-sm > * {\n width: calc(91.66667% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-12-col-on-sm > * {\n width: calc(100% - 1rem);\n }\n .pfe-l-grid > .pfe-m-1-col-on-sm {\n width: calc(8.33333% - 1rem);\n }\n .pfe-l-grid > .pfe-m-2-col-on-sm {\n width: calc(16.66667% - 1rem);\n }\n .pfe-l-grid > .pfe-m-3-col-on-sm {\n width: calc(25% - 1rem);\n }\n .pfe-l-grid > .pfe-m-4-col-on-sm {\n width: calc(33.33333% - 1rem);\n }\n .pfe-l-grid > .pfe-m-5-col-on-sm {\n width: calc(41.66667% - 1rem);\n }\n .pfe-l-grid > .pfe-m-6-col-on-sm {\n width: calc(50% - 1rem);\n }\n .pfe-l-grid > .pfe-m-7-col-on-sm {\n width: calc(58.33333% - 1rem);\n }\n .pfe-l-grid > .pfe-m-8-col-on-sm {\n width: calc(66.66667% - 1rem);\n }\n .pfe-l-grid > .pfe-m-9-col-on-sm {\n width: calc(75% - 1rem);\n }\n .pfe-l-grid > .pfe-m-10-col-on-sm {\n width: calc(83.33333% - 1rem);\n }\n .pfe-l-grid > .pfe-m-11-col-on-sm {\n width: calc(91.66667% - 1rem);\n }\n .pfe-l-grid > .pfe-m-12-col-on-sm {\n width: calc(100% - 1rem);\n }\n}\n\n@media screen and (min-width: 768px) {\n .pfe-l-grid.pfe-m-all-1-col-on-md > * {\n width: calc(8.33333% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-2-col-on-md > * {\n width: calc(16.66667% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-3-col-on-md > * {\n width: calc(25% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-4-col-on-md > * {\n width: calc(33.33333% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-5-col-on-md > * {\n width: calc(41.66667% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-6-col-on-md > * {\n width: calc(50% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-7-col-on-md > * {\n width: calc(58.33333% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-8-col-on-md > * {\n width: calc(66.66667% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-9-col-on-md > * {\n width: calc(75% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-10-col-on-md > * {\n width: calc(83.33333% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-11-col-on-md > * {\n width: calc(91.66667% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-12-col-on-md > * {\n width: calc(100% - 1rem);\n }\n .pfe-l-grid > .pfe-m-1-col-on-md {\n width: calc(8.33333% - 1rem);\n }\n .pfe-l-grid > .pfe-m-2-col-on-md {\n width: calc(16.66667% - 1rem);\n }\n .pfe-l-grid > .pfe-m-3-col-on-md {\n width: calc(25% - 1rem);\n }\n .pfe-l-grid > .pfe-m-4-col-on-md {\n width: calc(33.33333% - 1rem);\n }\n .pfe-l-grid > .pfe-m-5-col-on-md {\n width: calc(41.66667% - 1rem);\n }\n .pfe-l-grid > .pfe-m-6-col-on-md {\n width: calc(50% - 1rem);\n }\n .pfe-l-grid > .pfe-m-7-col-on-md {\n width: calc(58.33333% - 1rem);\n }\n .pfe-l-grid > .pfe-m-8-col-on-md {\n width: calc(66.66667% - 1rem);\n }\n .pfe-l-grid > .pfe-m-9-col-on-md {\n width: calc(75% - 1rem);\n }\n .pfe-l-grid > .pfe-m-10-col-on-md {\n width: calc(83.33333% - 1rem);\n }\n .pfe-l-grid > .pfe-m-11-col-on-md {\n width: calc(91.66667% - 1rem);\n }\n .pfe-l-grid > .pfe-m-12-col-on-md {\n width: calc(100% - 1rem);\n }\n}\n\n@media screen and (min-width: 992px) {\n .pfe-l-grid.pfe-m-all-1-col-on-lg > * {\n width: calc(8.33333% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-2-col-on-lg > * {\n width: calc(16.66667% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-3-col-on-lg > * {\n width: calc(25% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-4-col-on-lg > * {\n width: calc(33.33333% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-5-col-on-lg > * {\n width: calc(41.66667% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-6-col-on-lg > * {\n width: calc(50% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-7-col-on-lg > * {\n width: calc(58.33333% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-8-col-on-lg > * {\n width: calc(66.66667% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-9-col-on-lg > * {\n width: calc(75% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-10-col-on-lg > * {\n width: calc(83.33333% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-11-col-on-lg > * {\n width: calc(91.66667% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-12-col-on-lg > * {\n width: calc(100% - 1rem);\n }\n .pfe-l-grid > .pfe-m-1-col-on-lg {\n width: calc(8.33333% - 1rem);\n }\n .pfe-l-grid > .pfe-m-2-col-on-lg {\n width: calc(16.66667% - 1rem);\n }\n .pfe-l-grid > .pfe-m-3-col-on-lg {\n width: calc(25% - 1rem);\n }\n .pfe-l-grid > .pfe-m-4-col-on-lg {\n width: calc(33.33333% - 1rem);\n }\n .pfe-l-grid > .pfe-m-5-col-on-lg {\n width: calc(41.66667% - 1rem);\n }\n .pfe-l-grid > .pfe-m-6-col-on-lg {\n width: calc(50% - 1rem);\n }\n .pfe-l-grid > .pfe-m-7-col-on-lg {\n width: calc(58.33333% - 1rem);\n }\n .pfe-l-grid > .pfe-m-8-col-on-lg {\n width: calc(66.66667% - 1rem);\n }\n .pfe-l-grid > .pfe-m-9-col-on-lg {\n width: calc(75% - 1rem);\n }\n .pfe-l-grid > .pfe-m-10-col-on-lg {\n width: calc(83.33333% - 1rem);\n }\n .pfe-l-grid > .pfe-m-11-col-on-lg {\n width: calc(91.66667% - 1rem);\n }\n .pfe-l-grid > .pfe-m-12-col-on-lg {\n width: calc(100% - 1rem);\n }\n}\n\n@media screen and (min-width: 1200px) {\n .pfe-l-grid.pfe-m-all-1-col-on-xl > * {\n width: calc(8.33333% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-2-col-on-xl > * {\n width: calc(16.66667% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-3-col-on-xl > * {\n width: calc(25% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-4-col-on-xl > * {\n width: calc(33.33333% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-5-col-on-xl > * {\n width: calc(41.66667% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-6-col-on-xl > * {\n width: calc(50% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-7-col-on-xl > * {\n width: calc(58.33333% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-8-col-on-xl > * {\n width: calc(66.66667% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-9-col-on-xl > * {\n width: calc(75% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-10-col-on-xl > * {\n width: calc(83.33333% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-11-col-on-xl > * {\n width: calc(91.66667% - 1rem);\n }\n .pfe-l-grid.pfe-m-all-12-col-on-xl > * {\n width: calc(100% - 1rem);\n }\n .pfe-l-grid > .pfe-m-1-col-on-xl {\n width: calc(8.33333% - 1rem);\n }\n .pfe-l-grid > .pfe-m-2-col-on-xl {\n width: calc(16.66667% - 1rem);\n }\n .pfe-l-grid > .pfe-m-3-col-on-xl {\n width: calc(25% - 1rem);\n }\n .pfe-l-grid > .pfe-m-4-col-on-xl {\n width: calc(33.33333% - 1rem);\n }\n .pfe-l-grid > .pfe-m-5-col-on-xl {\n width: calc(41.66667% - 1rem);\n }\n .pfe-l-grid > .pfe-m-6-col-on-xl {\n width: calc(50% - 1rem);\n }\n .pfe-l-grid > .pfe-m-7-col-on-xl {\n width: calc(58.33333% - 1rem);\n }\n .pfe-l-grid > .pfe-m-8-col-on-xl {\n width: calc(66.66667% - 1rem);\n }\n .pfe-l-grid > .pfe-m-9-col-on-xl {\n width: calc(75% - 1rem);\n }\n .pfe-l-grid > .pfe-m-10-col-on-xl {\n width: calc(83.33333% - 1rem);\n }\n .pfe-l-grid > .pfe-m-11-col-on-xl {\n width: calc(91.66667% - 1rem);\n }\n .pfe-l-grid > .pfe-m-12-col-on-xl {\n width: calc(100% - 1rem);\n }\n}\n\n.pfe-l-grid.pfe-m-gutters {\n margin: calc(0.5rem * -1);\n}\n\n.pfe-l-grid.pfe-m-gutters > * {\n margin: 0.5rem;\n}\n\n@supports (display: grid) {\n .pfe-l-grid {\n display: grid;\n grid-template-columns: repeat(12, [col-start] 1fr);\n }\n .pfe-l-grid > *, .pfe-l-grid__item {\n width: auto;\n margin: 0;\n grid-column-start: auto;\n grid-column-end: span 12;\n }\n .pfe-l-grid.pfe-l-grid-fill-height {\n height: 100%;\n }\n @media screen and (min-width: 576px) {\n .pfe-l-grid.pfe-m-all-1-col > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 1;\n }\n .pfe-l-grid.pfe-m-all-2-col > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 2;\n }\n .pfe-l-grid.pfe-m-all-3-col > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 3;\n }\n .pfe-l-grid.pfe-m-all-4-col > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 4;\n }\n .pfe-l-grid.pfe-m-all-5-col > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 5;\n }\n .pfe-l-grid.pfe-m-all-6-col > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 6;\n }\n .pfe-l-grid.pfe-m-all-7-col > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 7;\n }\n .pfe-l-grid.pfe-m-all-8-col > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 8;\n }\n .pfe-l-grid.pfe-m-all-9-col > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 9;\n }\n .pfe-l-grid.pfe-m-all-10-col > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 10;\n }\n .pfe-l-grid.pfe-m-all-11-col > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 11;\n }\n .pfe-l-grid.pfe-m-all-12-col > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 12;\n }\n .pfe-l-grid > .pfe-m-1-col {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 1;\n }\n .pfe-l-grid > .pfe-m-2-col {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 2;\n }\n .pfe-l-grid > .pfe-m-3-col {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 3;\n }\n .pfe-l-grid > .pfe-m-4-col {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 4;\n }\n .pfe-l-grid > .pfe-m-5-col {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 5;\n }\n .pfe-l-grid > .pfe-m-6-col {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 6;\n }\n .pfe-l-grid > .pfe-m-7-col {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 7;\n }\n .pfe-l-grid > .pfe-m-8-col {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 8;\n }\n .pfe-l-grid > .pfe-m-9-col {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 9;\n }\n .pfe-l-grid > .pfe-m-10-col {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 10;\n }\n .pfe-l-grid > .pfe-m-11-col {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 11;\n }\n .pfe-l-grid > .pfe-m-12-col {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 12;\n }\n .pfe-l-grid > .pfe-m-startat-1-col {\n grid-column-start: col-start 1;\n }\n .pfe-l-grid > .pfe-m-startat-2-col {\n grid-column-start: col-start 2;\n }\n .pfe-l-grid > .pfe-m-startat-3-col {\n grid-column-start: col-start 3;\n }\n .pfe-l-grid > .pfe-m-startat-4-col {\n grid-column-start: col-start 4;\n }\n .pfe-l-grid > .pfe-m-startat-5-col {\n grid-column-start: col-start 5;\n }\n .pfe-l-grid > .pfe-m-startat-6-col {\n grid-column-start: col-start 6;\n }\n .pfe-l-grid > .pfe-m-startat-7-col {\n grid-column-start: col-start 7;\n }\n .pfe-l-grid > .pfe-m-startat-8-col {\n grid-column-start: col-start 8;\n }\n .pfe-l-grid > .pfe-m-startat-9-col {\n grid-column-start: col-start 9;\n }\n .pfe-l-grid > .pfe-m-startat-10-col {\n grid-column-start: col-start 10;\n }\n .pfe-l-grid > .pfe-m-startat-11-col {\n grid-column-start: col-start 11;\n }\n .pfe-l-grid > .pfe-m-startat-12-col {\n grid-column-start: col-start 12;\n }\n .pfe-l-grid > .pfe-m-1-row {\n grid-row: span 1;\n }\n .pfe-l-grid > .pfe-m-2-row {\n grid-row: span 2;\n }\n .pfe-l-grid > .pfe-m-3-row {\n grid-row: span 3;\n }\n .pfe-l-grid > .pfe-m-4-row {\n grid-row: span 4;\n }\n .pfe-l-grid > .pfe-m-5-row {\n grid-row: span 5;\n }\n .pfe-l-grid > .pfe-m-6-row {\n grid-row: span 6;\n }\n .pfe-l-grid > .pfe-m-7-row {\n grid-row: span 7;\n }\n .pfe-l-grid > .pfe-m-8-row {\n grid-row: span 8;\n }\n .pfe-l-grid > .pfe-m-9-row {\n grid-row: span 9;\n }\n .pfe-l-grid > .pfe-m-10-row {\n grid-row: span 10;\n }\n .pfe-l-grid > .pfe-m-11-row {\n grid-row: span 11;\n }\n .pfe-l-grid > .pfe-m-12-row {\n grid-row: span 12;\n }\n }\n @media screen and (max-width: 0) {\n .pfe-l-grid.pfe-m-all-1-col-on-xs > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 1;\n }\n .pfe-l-grid.pfe-m-all-2-col-on-xs > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 2;\n }\n .pfe-l-grid.pfe-m-all-3-col-on-xs > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 3;\n }\n .pfe-l-grid.pfe-m-all-4-col-on-xs > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 4;\n }\n .pfe-l-grid.pfe-m-all-5-col-on-xs > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 5;\n }\n .pfe-l-grid.pfe-m-all-6-col-on-xs > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 6;\n }\n .pfe-l-grid.pfe-m-all-7-col-on-xs > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 7;\n }\n .pfe-l-grid.pfe-m-all-8-col-on-xs > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 8;\n }\n .pfe-l-grid.pfe-m-all-9-col-on-xs > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 9;\n }\n .pfe-l-grid.pfe-m-all-10-col-on-xs > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 10;\n }\n .pfe-l-grid.pfe-m-all-11-col-on-xs > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 11;\n }\n .pfe-l-grid.pfe-m-all-12-col-on-xs > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 12;\n }\n .pfe-l-grid > .pfe-m-1-col-on-xs {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 1;\n }\n .pfe-l-grid > .pfe-m-2-col-on-xs {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 2;\n }\n .pfe-l-grid > .pfe-m-3-col-on-xs {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 3;\n }\n .pfe-l-grid > .pfe-m-4-col-on-xs {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 4;\n }\n .pfe-l-grid > .pfe-m-5-col-on-xs {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 5;\n }\n .pfe-l-grid > .pfe-m-6-col-on-xs {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 6;\n }\n .pfe-l-grid > .pfe-m-7-col-on-xs {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 7;\n }\n .pfe-l-grid > .pfe-m-8-col-on-xs {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 8;\n }\n .pfe-l-grid > .pfe-m-9-col-on-xs {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 9;\n }\n .pfe-l-grid > .pfe-m-10-col-on-xs {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 10;\n }\n .pfe-l-grid > .pfe-m-11-col-on-xs {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 11;\n }\n .pfe-l-grid > .pfe-m-12-col-on-xs {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 12;\n }\n .pfe-l-grid > .pfe-m-startat-1-col-on-xs {\n grid-column-start: col-start 1;\n }\n .pfe-l-grid > .pfe-m-startat-2-col-on-xs {\n grid-column-start: col-start 2;\n }\n .pfe-l-grid > .pfe-m-startat-3-col-on-xs {\n grid-column-start: col-start 3;\n }\n .pfe-l-grid > .pfe-m-startat-4-col-on-xs {\n grid-column-start: col-start 4;\n }\n .pfe-l-grid > .pfe-m-startat-5-col-on-xs {\n grid-column-start: col-start 5;\n }\n .pfe-l-grid > .pfe-m-startat-6-col-on-xs {\n grid-column-start: col-start 6;\n }\n .pfe-l-grid > .pfe-m-startat-7-col-on-xs {\n grid-column-start: col-start 7;\n }\n .pfe-l-grid > .pfe-m-startat-8-col-on-xs {\n grid-column-start: col-start 8;\n }\n .pfe-l-grid > .pfe-m-startat-9-col-on-xs {\n grid-column-start: col-start 9;\n }\n .pfe-l-grid > .pfe-m-startat-10-col-on-xs {\n grid-column-start: col-start 10;\n }\n .pfe-l-grid > .pfe-m-startat-11-col-on-xs {\n grid-column-start: col-start 11;\n }\n .pfe-l-grid > .pfe-m-startat-12-col-on-xs {\n grid-column-start: col-start 12;\n }\n .pfe-l-grid > .pfe-m-1-row-on-xs {\n grid-row: span 1;\n }\n .pfe-l-grid > .pfe-m-2-row-on-xs {\n grid-row: span 2;\n }\n .pfe-l-grid > .pfe-m-3-row-on-xs {\n grid-row: span 3;\n }\n .pfe-l-grid > .pfe-m-4-row-on-xs {\n grid-row: span 4;\n }\n .pfe-l-grid > .pfe-m-5-row-on-xs {\n grid-row: span 5;\n }\n .pfe-l-grid > .pfe-m-6-row-on-xs {\n grid-row: span 6;\n }\n .pfe-l-grid > .pfe-m-7-row-on-xs {\n grid-row: span 7;\n }\n .pfe-l-grid > .pfe-m-8-row-on-xs {\n grid-row: span 8;\n }\n .pfe-l-grid > .pfe-m-9-row-on-xs {\n grid-row: span 9;\n }\n .pfe-l-grid > .pfe-m-10-row-on-xs {\n grid-row: span 10;\n }\n .pfe-l-grid > .pfe-m-11-row-on-xs {\n grid-row: span 11;\n }\n .pfe-l-grid > .pfe-m-12-row-on-xs {\n grid-row: span 12;\n }\n }\n @media screen and (min-width: 576px) {\n .pfe-l-grid.pfe-m-all-1-col-on-sm > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 1;\n }\n .pfe-l-grid.pfe-m-all-2-col-on-sm > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 2;\n }\n .pfe-l-grid.pfe-m-all-3-col-on-sm > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 3;\n }\n .pfe-l-grid.pfe-m-all-4-col-on-sm > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 4;\n }\n .pfe-l-grid.pfe-m-all-5-col-on-sm > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 5;\n }\n .pfe-l-grid.pfe-m-all-6-col-on-sm > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 6;\n }\n .pfe-l-grid.pfe-m-all-7-col-on-sm > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 7;\n }\n .pfe-l-grid.pfe-m-all-8-col-on-sm > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 8;\n }\n .pfe-l-grid.pfe-m-all-9-col-on-sm > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 9;\n }\n .pfe-l-grid.pfe-m-all-10-col-on-sm > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 10;\n }\n .pfe-l-grid.pfe-m-all-11-col-on-sm > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 11;\n }\n .pfe-l-grid.pfe-m-all-12-col-on-sm > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 12;\n }\n .pfe-l-grid > .pfe-m-1-col-on-sm {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 1;\n }\n .pfe-l-grid > .pfe-m-2-col-on-sm {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 2;\n }\n .pfe-l-grid > .pfe-m-3-col-on-sm {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 3;\n }\n .pfe-l-grid > .pfe-m-4-col-on-sm {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 4;\n }\n .pfe-l-grid > .pfe-m-5-col-on-sm {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 5;\n }\n .pfe-l-grid > .pfe-m-6-col-on-sm {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 6;\n }\n .pfe-l-grid > .pfe-m-7-col-on-sm {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 7;\n }\n .pfe-l-grid > .pfe-m-8-col-on-sm {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 8;\n }\n .pfe-l-grid > .pfe-m-9-col-on-sm {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 9;\n }\n .pfe-l-grid > .pfe-m-10-col-on-sm {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 10;\n }\n .pfe-l-grid > .pfe-m-11-col-on-sm {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 11;\n }\n .pfe-l-grid > .pfe-m-12-col-on-sm {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 12;\n }\n .pfe-l-grid > .pfe-m-startat-1-col-on-sm {\n grid-column-start: col-start 1;\n }\n .pfe-l-grid > .pfe-m-startat-2-col-on-sm {\n grid-column-start: col-start 2;\n }\n .pfe-l-grid > .pfe-m-startat-3-col-on-sm {\n grid-column-start: col-start 3;\n }\n .pfe-l-grid > .pfe-m-startat-4-col-on-sm {\n grid-column-start: col-start 4;\n }\n .pfe-l-grid > .pfe-m-startat-5-col-on-sm {\n grid-column-start: col-start 5;\n }\n .pfe-l-grid > .pfe-m-startat-6-col-on-sm {\n grid-column-start: col-start 6;\n }\n .pfe-l-grid > .pfe-m-startat-7-col-on-sm {\n grid-column-start: col-start 7;\n }\n .pfe-l-grid > .pfe-m-startat-8-col-on-sm {\n grid-column-start: col-start 8;\n }\n .pfe-l-grid > .pfe-m-startat-9-col-on-sm {\n grid-column-start: col-start 9;\n }\n .pfe-l-grid > .pfe-m-startat-10-col-on-sm {\n grid-column-start: col-start 10;\n }\n .pfe-l-grid > .pfe-m-startat-11-col-on-sm {\n grid-column-start: col-start 11;\n }\n .pfe-l-grid > .pfe-m-startat-12-col-on-sm {\n grid-column-start: col-start 12;\n }\n .pfe-l-grid > .pfe-m-1-row-on-sm {\n grid-row: span 1;\n }\n .pfe-l-grid > .pfe-m-2-row-on-sm {\n grid-row: span 2;\n }\n .pfe-l-grid > .pfe-m-3-row-on-sm {\n grid-row: span 3;\n }\n .pfe-l-grid > .pfe-m-4-row-on-sm {\n grid-row: span 4;\n }\n .pfe-l-grid > .pfe-m-5-row-on-sm {\n grid-row: span 5;\n }\n .pfe-l-grid > .pfe-m-6-row-on-sm {\n grid-row: span 6;\n }\n .pfe-l-grid > .pfe-m-7-row-on-sm {\n grid-row: span 7;\n }\n .pfe-l-grid > .pfe-m-8-row-on-sm {\n grid-row: span 8;\n }\n .pfe-l-grid > .pfe-m-9-row-on-sm {\n grid-row: span 9;\n }\n .pfe-l-grid > .pfe-m-10-row-on-sm {\n grid-row: span 10;\n }\n .pfe-l-grid > .pfe-m-11-row-on-sm {\n grid-row: span 11;\n }\n .pfe-l-grid > .pfe-m-12-row-on-sm {\n grid-row: span 12;\n }\n }\n @media screen and (min-width: 768px) {\n .pfe-l-grid.pfe-m-all-1-col-on-md > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 1;\n }\n .pfe-l-grid.pfe-m-all-2-col-on-md > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 2;\n }\n .pfe-l-grid.pfe-m-all-3-col-on-md > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 3;\n }\n .pfe-l-grid.pfe-m-all-4-col-on-md > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 4;\n }\n .pfe-l-grid.pfe-m-all-5-col-on-md > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 5;\n }\n .pfe-l-grid.pfe-m-all-6-col-on-md > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 6;\n }\n .pfe-l-grid.pfe-m-all-7-col-on-md > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 7;\n }\n .pfe-l-grid.pfe-m-all-8-col-on-md > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 8;\n }\n .pfe-l-grid.pfe-m-all-9-col-on-md > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 9;\n }\n .pfe-l-grid.pfe-m-all-10-col-on-md > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 10;\n }\n .pfe-l-grid.pfe-m-all-11-col-on-md > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 11;\n }\n .pfe-l-grid.pfe-m-all-12-col-on-md > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 12;\n }\n .pfe-l-grid > .pfe-m-1-col-on-md {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 1;\n }\n .pfe-l-grid > .pfe-m-2-col-on-md {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 2;\n }\n .pfe-l-grid > .pfe-m-3-col-on-md {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 3;\n }\n .pfe-l-grid > .pfe-m-4-col-on-md {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 4;\n }\n .pfe-l-grid > .pfe-m-5-col-on-md {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 5;\n }\n .pfe-l-grid > .pfe-m-6-col-on-md {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 6;\n }\n .pfe-l-grid > .pfe-m-7-col-on-md {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 7;\n }\n .pfe-l-grid > .pfe-m-8-col-on-md {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 8;\n }\n .pfe-l-grid > .pfe-m-9-col-on-md {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 9;\n }\n .pfe-l-grid > .pfe-m-10-col-on-md {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 10;\n }\n .pfe-l-grid > .pfe-m-11-col-on-md {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 11;\n }\n .pfe-l-grid > .pfe-m-12-col-on-md {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 12;\n }\n .pfe-l-grid > .pfe-m-startat-1-col-on-md {\n grid-column-start: col-start 1;\n }\n .pfe-l-grid > .pfe-m-startat-2-col-on-md {\n grid-column-start: col-start 2;\n }\n .pfe-l-grid > .pfe-m-startat-3-col-on-md {\n grid-column-start: col-start 3;\n }\n .pfe-l-grid > .pfe-m-startat-4-col-on-md {\n grid-column-start: col-start 4;\n }\n .pfe-l-grid > .pfe-m-startat-5-col-on-md {\n grid-column-start: col-start 5;\n }\n .pfe-l-grid > .pfe-m-startat-6-col-on-md {\n grid-column-start: col-start 6;\n }\n .pfe-l-grid > .pfe-m-startat-7-col-on-md {\n grid-column-start: col-start 7;\n }\n .pfe-l-grid > .pfe-m-startat-8-col-on-md {\n grid-column-start: col-start 8;\n }\n .pfe-l-grid > .pfe-m-startat-9-col-on-md {\n grid-column-start: col-start 9;\n }\n .pfe-l-grid > .pfe-m-startat-10-col-on-md {\n grid-column-start: col-start 10;\n }\n .pfe-l-grid > .pfe-m-startat-11-col-on-md {\n grid-column-start: col-start 11;\n }\n .pfe-l-grid > .pfe-m-startat-12-col-on-md {\n grid-column-start: col-start 12;\n }\n .pfe-l-grid > .pfe-m-1-row-on-md {\n grid-row: span 1;\n }\n .pfe-l-grid > .pfe-m-2-row-on-md {\n grid-row: span 2;\n }\n .pfe-l-grid > .pfe-m-3-row-on-md {\n grid-row: span 3;\n }\n .pfe-l-grid > .pfe-m-4-row-on-md {\n grid-row: span 4;\n }\n .pfe-l-grid > .pfe-m-5-row-on-md {\n grid-row: span 5;\n }\n .pfe-l-grid > .pfe-m-6-row-on-md {\n grid-row: span 6;\n }\n .pfe-l-grid > .pfe-m-7-row-on-md {\n grid-row: span 7;\n }\n .pfe-l-grid > .pfe-m-8-row-on-md {\n grid-row: span 8;\n }\n .pfe-l-grid > .pfe-m-9-row-on-md {\n grid-row: span 9;\n }\n .pfe-l-grid > .pfe-m-10-row-on-md {\n grid-row: span 10;\n }\n .pfe-l-grid > .pfe-m-11-row-on-md {\n grid-row: span 11;\n }\n .pfe-l-grid > .pfe-m-12-row-on-md {\n grid-row: span 12;\n }\n }\n @media screen and (min-width: 992px) {\n .pfe-l-grid.pfe-m-all-1-col-on-lg > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 1;\n }\n .pfe-l-grid.pfe-m-all-2-col-on-lg > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 2;\n }\n .pfe-l-grid.pfe-m-all-3-col-on-lg > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 3;\n }\n .pfe-l-grid.pfe-m-all-4-col-on-lg > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 4;\n }\n .pfe-l-grid.pfe-m-all-5-col-on-lg > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 5;\n }\n .pfe-l-grid.pfe-m-all-6-col-on-lg > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 6;\n }\n .pfe-l-grid.pfe-m-all-7-col-on-lg > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 7;\n }\n .pfe-l-grid.pfe-m-all-8-col-on-lg > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 8;\n }\n .pfe-l-grid.pfe-m-all-9-col-on-lg > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 9;\n }\n .pfe-l-grid.pfe-m-all-10-col-on-lg > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 10;\n }\n .pfe-l-grid.pfe-m-all-11-col-on-lg > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 11;\n }\n .pfe-l-grid.pfe-m-all-12-col-on-lg > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 12;\n }\n .pfe-l-grid > .pfe-m-1-col-on-lg {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 1;\n }\n .pfe-l-grid > .pfe-m-2-col-on-lg {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 2;\n }\n .pfe-l-grid > .pfe-m-3-col-on-lg {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 3;\n }\n .pfe-l-grid > .pfe-m-4-col-on-lg {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 4;\n }\n .pfe-l-grid > .pfe-m-5-col-on-lg {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 5;\n }\n .pfe-l-grid > .pfe-m-6-col-on-lg {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 6;\n }\n .pfe-l-grid > .pfe-m-7-col-on-lg {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 7;\n }\n .pfe-l-grid > .pfe-m-8-col-on-lg {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 8;\n }\n .pfe-l-grid > .pfe-m-9-col-on-lg {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 9;\n }\n .pfe-l-grid > .pfe-m-10-col-on-lg {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 10;\n }\n .pfe-l-grid > .pfe-m-11-col-on-lg {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 11;\n }\n .pfe-l-grid > .pfe-m-12-col-on-lg {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 12;\n }\n .pfe-l-grid > .pfe-m-startat-1-col-on-lg {\n grid-column-start: col-start 1;\n }\n .pfe-l-grid > .pfe-m-startat-2-col-on-lg {\n grid-column-start: col-start 2;\n }\n .pfe-l-grid > .pfe-m-startat-3-col-on-lg {\n grid-column-start: col-start 3;\n }\n .pfe-l-grid > .pfe-m-startat-4-col-on-lg {\n grid-column-start: col-start 4;\n }\n .pfe-l-grid > .pfe-m-startat-5-col-on-lg {\n grid-column-start: col-start 5;\n }\n .pfe-l-grid > .pfe-m-startat-6-col-on-lg {\n grid-column-start: col-start 6;\n }\n .pfe-l-grid > .pfe-m-startat-7-col-on-lg {\n grid-column-start: col-start 7;\n }\n .pfe-l-grid > .pfe-m-startat-8-col-on-lg {\n grid-column-start: col-start 8;\n }\n .pfe-l-grid > .pfe-m-startat-9-col-on-lg {\n grid-column-start: col-start 9;\n }\n .pfe-l-grid > .pfe-m-startat-10-col-on-lg {\n grid-column-start: col-start 10;\n }\n .pfe-l-grid > .pfe-m-startat-11-col-on-lg {\n grid-column-start: col-start 11;\n }\n .pfe-l-grid > .pfe-m-startat-12-col-on-lg {\n grid-column-start: col-start 12;\n }\n .pfe-l-grid > .pfe-m-1-row-on-lg {\n grid-row: span 1;\n }\n .pfe-l-grid > .pfe-m-2-row-on-lg {\n grid-row: span 2;\n }\n .pfe-l-grid > .pfe-m-3-row-on-lg {\n grid-row: span 3;\n }\n .pfe-l-grid > .pfe-m-4-row-on-lg {\n grid-row: span 4;\n }\n .pfe-l-grid > .pfe-m-5-row-on-lg {\n grid-row: span 5;\n }\n .pfe-l-grid > .pfe-m-6-row-on-lg {\n grid-row: span 6;\n }\n .pfe-l-grid > .pfe-m-7-row-on-lg {\n grid-row: span 7;\n }\n .pfe-l-grid > .pfe-m-8-row-on-lg {\n grid-row: span 8;\n }\n .pfe-l-grid > .pfe-m-9-row-on-lg {\n grid-row: span 9;\n }\n .pfe-l-grid > .pfe-m-10-row-on-lg {\n grid-row: span 10;\n }\n .pfe-l-grid > .pfe-m-11-row-on-lg {\n grid-row: span 11;\n }\n .pfe-l-grid > .pfe-m-12-row-on-lg {\n grid-row: span 12;\n }\n }\n @media screen and (min-width: 1200px) {\n .pfe-l-grid.pfe-m-all-1-col-on-xl > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 1;\n }\n .pfe-l-grid.pfe-m-all-2-col-on-xl > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 2;\n }\n .pfe-l-grid.pfe-m-all-3-col-on-xl > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 3;\n }\n .pfe-l-grid.pfe-m-all-4-col-on-xl > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 4;\n }\n .pfe-l-grid.pfe-m-all-5-col-on-xl > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 5;\n }\n .pfe-l-grid.pfe-m-all-6-col-on-xl > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 6;\n }\n .pfe-l-grid.pfe-m-all-7-col-on-xl > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 7;\n }\n .pfe-l-grid.pfe-m-all-8-col-on-xl > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 8;\n }\n .pfe-l-grid.pfe-m-all-9-col-on-xl > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 9;\n }\n .pfe-l-grid.pfe-m-all-10-col-on-xl > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 10;\n }\n .pfe-l-grid.pfe-m-all-11-col-on-xl > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 11;\n }\n .pfe-l-grid.pfe-m-all-12-col-on-xl > * {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 12;\n }\n .pfe-l-grid > .pfe-m-1-col-on-xl {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 1;\n }\n .pfe-l-grid > .pfe-m-2-col-on-xl {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 2;\n }\n .pfe-l-grid > .pfe-m-3-col-on-xl {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 3;\n }\n .pfe-l-grid > .pfe-m-4-col-on-xl {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 4;\n }\n .pfe-l-grid > .pfe-m-5-col-on-xl {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 5;\n }\n .pfe-l-grid > .pfe-m-6-col-on-xl {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 6;\n }\n .pfe-l-grid > .pfe-m-7-col-on-xl {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 7;\n }\n .pfe-l-grid > .pfe-m-8-col-on-xl {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 8;\n }\n .pfe-l-grid > .pfe-m-9-col-on-xl {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 9;\n }\n .pfe-l-grid > .pfe-m-10-col-on-xl {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 10;\n }\n .pfe-l-grid > .pfe-m-11-col-on-xl {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 11;\n }\n .pfe-l-grid > .pfe-m-12-col-on-xl {\n width: auto;\n grid-column-start: auto;\n grid-column-end: span 12;\n }\n .pfe-l-grid > .pfe-m-startat-1-col-on-xl {\n grid-column-start: col-start 1;\n }\n .pfe-l-grid > .pfe-m-startat-2-col-on-xl {\n grid-column-start: col-start 2;\n }\n .pfe-l-grid > .pfe-m-startat-3-col-on-xl {\n grid-column-start: col-start 3;\n }\n .pfe-l-grid > .pfe-m-startat-4-col-on-xl {\n grid-column-start: col-start 4;\n }\n .pfe-l-grid > .pfe-m-startat-5-col-on-xl {\n grid-column-start: col-start 5;\n }\n .pfe-l-grid > .pfe-m-startat-6-col-on-xl {\n grid-column-start: col-start 6;\n }\n .pfe-l-grid > .pfe-m-startat-7-col-on-xl {\n grid-column-start: col-start 7;\n }\n .pfe-l-grid > .pfe-m-startat-8-col-on-xl {\n grid-column-start: col-start 8;\n }\n .pfe-l-grid > .pfe-m-startat-9-col-on-xl {\n grid-column-start: col-start 9;\n }\n .pfe-l-grid > .pfe-m-startat-10-col-on-xl {\n grid-column-start: col-start 10;\n }\n .pfe-l-grid > .pfe-m-startat-11-col-on-xl {\n grid-column-start: col-start 11;\n }\n .pfe-l-grid > .pfe-m-startat-12-col-on-xl {\n grid-column-start: col-start 12;\n }\n .pfe-l-grid > .pfe-m-1-row-on-xl {\n grid-row: span 1;\n }\n .pfe-l-grid > .pfe-m-2-row-on-xl {\n grid-row: span 2;\n }\n .pfe-l-grid > .pfe-m-3-row-on-xl {\n grid-row: span 3;\n }\n .pfe-l-grid > .pfe-m-4-row-on-xl {\n grid-row: span 4;\n }\n .pfe-l-grid > .pfe-m-5-row-on-xl {\n grid-row: span 5;\n }\n .pfe-l-grid > .pfe-m-6-row-on-xl {\n grid-row: span 6;\n }\n .pfe-l-grid > .pfe-m-7-row-on-xl {\n grid-row: span 7;\n }\n .pfe-l-grid > .pfe-m-8-row-on-xl {\n grid-row: span 8;\n }\n .pfe-l-grid > .pfe-m-9-row-on-xl {\n grid-row: span 9;\n }\n .pfe-l-grid > .pfe-m-10-row-on-xl {\n grid-row: span 10;\n }\n .pfe-l-grid > .pfe-m-11-row-on-xl {\n grid-row: span 11;\n }\n .pfe-l-grid > .pfe-m-12-row-on-xl {\n grid-row: span 12;\n }\n }\n .pfe-l-grid.pfe-m-gutters {\n grid-gap: 1rem;\n margin: 0;\n }\n .pfe-l-grid.pfe-m-gutters > * {\n margin: 0;\n }\n}\n\n.pfe-l-bullseye {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: var(--pfe-theme--container-spacer, 1rem);\n margin: 0;\n}\n","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text: $pfelements--gray-dark !default;\n$pfe-color--text--on-dark: $pfe-color--white !default;\n$pfe-color--text--on-saturated: $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link: #06c !default;\n$pfe-color--ui-link--visited: $pfelements--purple !default; // Was #7551a6\n$pfe-color--ui-link--hover: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-dark--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-saturated--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base: $pfelements--blue !default;\n$pfe-color--ui-base--hover: darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement: $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover: $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent: $pfelements--orange !default;\n$pfe-color--ui-accent--hover: darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text: $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover: $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest: $pfe-color--white !default;\n$pfe-color--surface--lightest--text: $pfe-color--text !default;\n$pfe-color--surface--lightest--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus: $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text: $pfe-color--text !default;\n$pfe-color--surface--lighter--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus: $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base: $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text: $pfe-color--text !default;\n$pfe-color--surface--base--link: #00538c !default; // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited: #7551a6 !default;\n$pfe-color--surface--base--link--hover: #00305b !default;\n$pfe-color--surface--base--link--focus: #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker: $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest: $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement: $pfelements--blue;\n$pfe-color--surface--complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent: $pfelements--orange;\n$pfe-color--surface--accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc\n$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7\n$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical: $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important: $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest: $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest: $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate: $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest: $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest: $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success: #2e7d32 !default;\n$pfe-color--feedback--success--lightest: $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest: #1b5e20 !default;\n\n$pfe-color--feedback--info: #0277bd !default;\n$pfe-color--feedback--info--lightest: $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest: #01579b !default;\n\n$pfe-color--feedback--default: $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest: $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest: $pfe-color--gray-800 !default;\n","// Text Alignment Helpers\n\n.pfe-l--text-align--left {\n text-align: left;\n}\n\n.pfe-l--text-align--center {\n text-align: center;\n}\n\n.pfe-l--text-align--right {\n text-align: right;\n}\n","// Grid Layout\n\n/// ===========================================================================\n/// Component Specific SASS Vars\n/// ===========================================================================\n\n$breakpoints: (\"\": null, \"xs\": \"-on-xs\", \"sm\": \"-on-sm\", \"md\": \"-on-md\", \"lg\": \"-on-lg\", \"xl\": \"-on-xl\");\n$grip-gap: map-get($pfe-vars, 'container-spacer');\n$half-grip-gap: map-get($pfe-vars, 'container-spacer') / 2;\n\n\n/// ===========================================================================\n/// Media Queries for Grid\n/// ===========================================================================\n\n/// Media query used to create responsive grid items\n/// @group mixins\n/// @moduleType mixin\n/// @parameter {Point} xs, sm, md, lg, xl, null\n@mixin GridMediaQuery($point) {\n @if $point == \"xs\" {\n @media screen and (max-width: #{map-get($pfe-vars, 'grid-breakpoint--xs')}) {\n @content;\n }\n }\n @else if $point == \"sm\" or $point == \"\" or $point == null {\n @media screen and (min-width: #{map-get($pfe-vars, 'grid-breakpoint--sm')}) {\n @content;\n }\n }\n @else if $point == \"md\" {\n @media screen and (min-width: #{map-get($pfe-vars, 'grid-breakpoint--md')}) {\n @content;\n }\n }\n @else if $point == \"lg\" {\n @media screen and (min-width: #{map-get($pfe-vars, 'grid-breakpoint--lg')}) {\n @content;\n }\n }\n @else if $point == \"xl\" {\n @media screen and (min-width: #{map-get($pfe-vars, 'grid-breakpoint--xl')}) {\n @content;\n }\n }\n}\n\n/// Creates flexbox item\n/// @group mixins\n/// @moduleType mixin\n/// @parameter {Suffix} xs, sm, md, lg, xl, null\n@mixin FlexItemModifiers($suffix: null) {\n // generate column span modifiers\n @for $col-num from 1 through 12 {\n > .pfe-m-#{$col-num}-col#{$suffix} {\n $this-size: ($col-num / 12) * 100%;\n width: calc(#{$this-size} - #{$grip-gap});\n }\n }\n\n // Start-at and row-span aren't available in fallbacks.\n}\n\n/// Creates grid item\n/// @group mixins\n/// @moduleType mixin\n/// @parameter {Suffix} xs, sm, md, lg, xl, null\n@mixin GridItemModifiers($suffix: null) {\n // generate column span modifiers\n @for $col-num from 1 through 12 {\n > .pfe-m-#{$col-num}-col#{$suffix} {\n width: auto; // Remove IE11\n grid-column-start: auto;\n grid-column-end: span $col-num;\n }\n }\n\n // generate column startat modfiers\n @for $col-num from 1 through 12 {\n > .pfe-m-startat-#{$col-num}-col#{$suffix} {\n grid-column-start: col-start ($col-num); // removed +1 so it's value is literal.\n }\n }\n\n // generate row span modfiers\n @for $row-num from 1 through 12 {\n > .pfe-m-#{$row-num}-row#{$suffix} {\n grid-row: span $row-num;\n }\n }\n}\n\n@mixin FlexAllModifiers($suffix: null) {\n @for $col-num from 1 through 12 {\n &.pfe-m-all-#{$col-num}-col#{$suffix} {\n > * {\n $this-size: ($col-num / 12) * 100%;\n width: calc(#{$this-size} - #{$grip-gap});\n }\n }\n }\n}\n\n@mixin GridAllModifiers($suffix: null) {\n @for $col-num from 1 through 12 {\n &.pfe-m-all-#{$col-num}-col#{$suffix} {\n > * {\n width: auto; // Remove IE11\n grid-column-start: auto;\n grid-column-end: span $col-num;\n }\n }\n }\n}\n\n\n/// ===========================================================================\n/// Flexbox for IE11 support\n/// ===========================================================================\n.pfe-l-grid {\n box-sizing: border-box;\n display: flex;\n flex-wrap: wrap;\n\n > *,\n &__item {\n box-sizing: border-box;\n width: 100%;\n margin: 0 auto;\n }\n\n // Loop through $breakpoints map to generate responsive classes\n @each $breakpoint, $value in $breakpoints {\n @include GridMediaQuery($breakpoint) {\n @include FlexAllModifiers($value);\n @include FlexItemModifiers($value);\n }\n }\n\n &.pfe-m-gutters {\n margin: calc(#{$half-grip-gap} * -1);\n\n & > * {\n margin: #{$half-grip-gap};\n }\n }\n}\n\n/// ===========================================================================\n/// Grid for Smarter Browsers\n/// ===========================================================================\n\n@supports (display: grid) {\n .pfe-l-grid {\n display: grid;\n grid-template-columns: repeat(12, [col-start] 1fr);\n\n > *,\n &__item {\n width: auto; // Remove IE11\n margin: 0; // Remove IE11\n grid-column-start: auto;\n grid-column-end: span 12;\n }\n\n &.pfe-l-grid-fill-height {\n height: 100%;\n }\n\n // Loop through $breakpoints map to generate responsive classes\n @each $breakpoint, $value in $breakpoints {\n @include GridMediaQuery($breakpoint) {\n @include GridAllModifiers($value);\n @include GridItemModifiers($value);\n }\n }\n\n &.pfe-m-gutters {\n grid-gap: #{$grip-gap};\n margin: 0; // Remove IE11\n\n & > * {\n margin: 0; // Remove IE11\n }\n }\n }\n}\n","// Bullseye Layout\n\n.pfe-l-bullseye {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n padding: #{pfe-var(container-spacer)};\n margin: 0;\n}\n"]} \ No newline at end of file diff --git a/elements/pfe-layouts/pfe-layouts.min.css b/elements/pfe-layouts/pfe-layouts.min.css new file mode 100644 index 0000000000..e94bdbc930 --- /dev/null +++ b/elements/pfe-layouts/pfe-layouts.min.css @@ -0,0 +1 @@ +.pfe-l--text-align--left{text-align:left}.pfe-l--text-align--center{text-align:center}.pfe-l--text-align--right{text-align:right}.pfe-l-grid{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.pfe-l-grid>*,.pfe-l-grid__item{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin:0 auto}@media screen and (min-width:576px){.pfe-l-grid.pfe-m-all-1-col>*{width:calc(8.33333% - 1rem)}.pfe-l-grid.pfe-m-all-2-col>*{width:calc(16.66667% - 1rem)}.pfe-l-grid.pfe-m-all-3-col>*{width:calc(25% - 1rem)}.pfe-l-grid.pfe-m-all-4-col>*{width:calc(33.33333% - 1rem)}.pfe-l-grid.pfe-m-all-5-col>*{width:calc(41.66667% - 1rem)}.pfe-l-grid.pfe-m-all-6-col>*{width:calc(50% - 1rem)}.pfe-l-grid.pfe-m-all-7-col>*{width:calc(58.33333% - 1rem)}.pfe-l-grid.pfe-m-all-8-col>*{width:calc(66.66667% - 1rem)}.pfe-l-grid.pfe-m-all-9-col>*{width:calc(75% - 1rem)}.pfe-l-grid.pfe-m-all-10-col>*{width:calc(83.33333% - 1rem)}.pfe-l-grid.pfe-m-all-11-col>*{width:calc(91.66667% - 1rem)}.pfe-l-grid.pfe-m-all-12-col>*{width:calc(100% - 1rem)}.pfe-l-grid>.pfe-m-1-col{width:calc(8.33333% - 1rem)}.pfe-l-grid>.pfe-m-2-col{width:calc(16.66667% - 1rem)}.pfe-l-grid>.pfe-m-3-col{width:calc(25% - 1rem)}.pfe-l-grid>.pfe-m-4-col{width:calc(33.33333% - 1rem)}.pfe-l-grid>.pfe-m-5-col{width:calc(41.66667% - 1rem)}.pfe-l-grid>.pfe-m-6-col{width:calc(50% - 1rem)}.pfe-l-grid>.pfe-m-7-col{width:calc(58.33333% - 1rem)}.pfe-l-grid>.pfe-m-8-col{width:calc(66.66667% - 1rem)}.pfe-l-grid>.pfe-m-9-col{width:calc(75% - 1rem)}.pfe-l-grid>.pfe-m-10-col{width:calc(83.33333% - 1rem)}.pfe-l-grid>.pfe-m-11-col{width:calc(91.66667% - 1rem)}.pfe-l-grid>.pfe-m-12-col{width:calc(100% - 1rem)}}@media screen and (max-width:0){.pfe-l-grid.pfe-m-all-1-col-on-xs>*{width:calc(8.33333% - 1rem)}.pfe-l-grid.pfe-m-all-2-col-on-xs>*{width:calc(16.66667% - 1rem)}.pfe-l-grid.pfe-m-all-3-col-on-xs>*{width:calc(25% - 1rem)}.pfe-l-grid.pfe-m-all-4-col-on-xs>*{width:calc(33.33333% - 1rem)}.pfe-l-grid.pfe-m-all-5-col-on-xs>*{width:calc(41.66667% - 1rem)}.pfe-l-grid.pfe-m-all-6-col-on-xs>*{width:calc(50% - 1rem)}.pfe-l-grid.pfe-m-all-7-col-on-xs>*{width:calc(58.33333% - 1rem)}.pfe-l-grid.pfe-m-all-8-col-on-xs>*{width:calc(66.66667% - 1rem)}.pfe-l-grid.pfe-m-all-9-col-on-xs>*{width:calc(75% - 1rem)}.pfe-l-grid.pfe-m-all-10-col-on-xs>*{width:calc(83.33333% - 1rem)}.pfe-l-grid.pfe-m-all-11-col-on-xs>*{width:calc(91.66667% - 1rem)}.pfe-l-grid.pfe-m-all-12-col-on-xs>*{width:calc(100% - 1rem)}.pfe-l-grid>.pfe-m-1-col-on-xs{width:calc(8.33333% - 1rem)}.pfe-l-grid>.pfe-m-2-col-on-xs{width:calc(16.66667% - 1rem)}.pfe-l-grid>.pfe-m-3-col-on-xs{width:calc(25% - 1rem)}.pfe-l-grid>.pfe-m-4-col-on-xs{width:calc(33.33333% - 1rem)}.pfe-l-grid>.pfe-m-5-col-on-xs{width:calc(41.66667% - 1rem)}.pfe-l-grid>.pfe-m-6-col-on-xs{width:calc(50% - 1rem)}.pfe-l-grid>.pfe-m-7-col-on-xs{width:calc(58.33333% - 1rem)}.pfe-l-grid>.pfe-m-8-col-on-xs{width:calc(66.66667% - 1rem)}.pfe-l-grid>.pfe-m-9-col-on-xs{width:calc(75% - 1rem)}.pfe-l-grid>.pfe-m-10-col-on-xs{width:calc(83.33333% - 1rem)}.pfe-l-grid>.pfe-m-11-col-on-xs{width:calc(91.66667% - 1rem)}.pfe-l-grid>.pfe-m-12-col-on-xs{width:calc(100% - 1rem)}}@media screen and (min-width:576px){.pfe-l-grid.pfe-m-all-1-col-on-sm>*{width:calc(8.33333% - 1rem)}.pfe-l-grid.pfe-m-all-2-col-on-sm>*{width:calc(16.66667% - 1rem)}.pfe-l-grid.pfe-m-all-3-col-on-sm>*{width:calc(25% - 1rem)}.pfe-l-grid.pfe-m-all-4-col-on-sm>*{width:calc(33.33333% - 1rem)}.pfe-l-grid.pfe-m-all-5-col-on-sm>*{width:calc(41.66667% - 1rem)}.pfe-l-grid.pfe-m-all-6-col-on-sm>*{width:calc(50% - 1rem)}.pfe-l-grid.pfe-m-all-7-col-on-sm>*{width:calc(58.33333% - 1rem)}.pfe-l-grid.pfe-m-all-8-col-on-sm>*{width:calc(66.66667% - 1rem)}.pfe-l-grid.pfe-m-all-9-col-on-sm>*{width:calc(75% - 1rem)}.pfe-l-grid.pfe-m-all-10-col-on-sm>*{width:calc(83.33333% - 1rem)}.pfe-l-grid.pfe-m-all-11-col-on-sm>*{width:calc(91.66667% - 1rem)}.pfe-l-grid.pfe-m-all-12-col-on-sm>*{width:calc(100% - 1rem)}.pfe-l-grid>.pfe-m-1-col-on-sm{width:calc(8.33333% - 1rem)}.pfe-l-grid>.pfe-m-2-col-on-sm{width:calc(16.66667% - 1rem)}.pfe-l-grid>.pfe-m-3-col-on-sm{width:calc(25% - 1rem)}.pfe-l-grid>.pfe-m-4-col-on-sm{width:calc(33.33333% - 1rem)}.pfe-l-grid>.pfe-m-5-col-on-sm{width:calc(41.66667% - 1rem)}.pfe-l-grid>.pfe-m-6-col-on-sm{width:calc(50% - 1rem)}.pfe-l-grid>.pfe-m-7-col-on-sm{width:calc(58.33333% - 1rem)}.pfe-l-grid>.pfe-m-8-col-on-sm{width:calc(66.66667% - 1rem)}.pfe-l-grid>.pfe-m-9-col-on-sm{width:calc(75% - 1rem)}.pfe-l-grid>.pfe-m-10-col-on-sm{width:calc(83.33333% - 1rem)}.pfe-l-grid>.pfe-m-11-col-on-sm{width:calc(91.66667% - 1rem)}.pfe-l-grid>.pfe-m-12-col-on-sm{width:calc(100% - 1rem)}}@media screen and (min-width:768px){.pfe-l-grid.pfe-m-all-1-col-on-md>*{width:calc(8.33333% - 1rem)}.pfe-l-grid.pfe-m-all-2-col-on-md>*{width:calc(16.66667% - 1rem)}.pfe-l-grid.pfe-m-all-3-col-on-md>*{width:calc(25% - 1rem)}.pfe-l-grid.pfe-m-all-4-col-on-md>*{width:calc(33.33333% - 1rem)}.pfe-l-grid.pfe-m-all-5-col-on-md>*{width:calc(41.66667% - 1rem)}.pfe-l-grid.pfe-m-all-6-col-on-md>*{width:calc(50% - 1rem)}.pfe-l-grid.pfe-m-all-7-col-on-md>*{width:calc(58.33333% - 1rem)}.pfe-l-grid.pfe-m-all-8-col-on-md>*{width:calc(66.66667% - 1rem)}.pfe-l-grid.pfe-m-all-9-col-on-md>*{width:calc(75% - 1rem)}.pfe-l-grid.pfe-m-all-10-col-on-md>*{width:calc(83.33333% - 1rem)}.pfe-l-grid.pfe-m-all-11-col-on-md>*{width:calc(91.66667% - 1rem)}.pfe-l-grid.pfe-m-all-12-col-on-md>*{width:calc(100% - 1rem)}.pfe-l-grid>.pfe-m-1-col-on-md{width:calc(8.33333% - 1rem)}.pfe-l-grid>.pfe-m-2-col-on-md{width:calc(16.66667% - 1rem)}.pfe-l-grid>.pfe-m-3-col-on-md{width:calc(25% - 1rem)}.pfe-l-grid>.pfe-m-4-col-on-md{width:calc(33.33333% - 1rem)}.pfe-l-grid>.pfe-m-5-col-on-md{width:calc(41.66667% - 1rem)}.pfe-l-grid>.pfe-m-6-col-on-md{width:calc(50% - 1rem)}.pfe-l-grid>.pfe-m-7-col-on-md{width:calc(58.33333% - 1rem)}.pfe-l-grid>.pfe-m-8-col-on-md{width:calc(66.66667% - 1rem)}.pfe-l-grid>.pfe-m-9-col-on-md{width:calc(75% - 1rem)}.pfe-l-grid>.pfe-m-10-col-on-md{width:calc(83.33333% - 1rem)}.pfe-l-grid>.pfe-m-11-col-on-md{width:calc(91.66667% - 1rem)}.pfe-l-grid>.pfe-m-12-col-on-md{width:calc(100% - 1rem)}}@media screen and (min-width:992px){.pfe-l-grid.pfe-m-all-1-col-on-lg>*{width:calc(8.33333% - 1rem)}.pfe-l-grid.pfe-m-all-2-col-on-lg>*{width:calc(16.66667% - 1rem)}.pfe-l-grid.pfe-m-all-3-col-on-lg>*{width:calc(25% - 1rem)}.pfe-l-grid.pfe-m-all-4-col-on-lg>*{width:calc(33.33333% - 1rem)}.pfe-l-grid.pfe-m-all-5-col-on-lg>*{width:calc(41.66667% - 1rem)}.pfe-l-grid.pfe-m-all-6-col-on-lg>*{width:calc(50% - 1rem)}.pfe-l-grid.pfe-m-all-7-col-on-lg>*{width:calc(58.33333% - 1rem)}.pfe-l-grid.pfe-m-all-8-col-on-lg>*{width:calc(66.66667% - 1rem)}.pfe-l-grid.pfe-m-all-9-col-on-lg>*{width:calc(75% - 1rem)}.pfe-l-grid.pfe-m-all-10-col-on-lg>*{width:calc(83.33333% - 1rem)}.pfe-l-grid.pfe-m-all-11-col-on-lg>*{width:calc(91.66667% - 1rem)}.pfe-l-grid.pfe-m-all-12-col-on-lg>*{width:calc(100% - 1rem)}.pfe-l-grid>.pfe-m-1-col-on-lg{width:calc(8.33333% - 1rem)}.pfe-l-grid>.pfe-m-2-col-on-lg{width:calc(16.66667% - 1rem)}.pfe-l-grid>.pfe-m-3-col-on-lg{width:calc(25% - 1rem)}.pfe-l-grid>.pfe-m-4-col-on-lg{width:calc(33.33333% - 1rem)}.pfe-l-grid>.pfe-m-5-col-on-lg{width:calc(41.66667% - 1rem)}.pfe-l-grid>.pfe-m-6-col-on-lg{width:calc(50% - 1rem)}.pfe-l-grid>.pfe-m-7-col-on-lg{width:calc(58.33333% - 1rem)}.pfe-l-grid>.pfe-m-8-col-on-lg{width:calc(66.66667% - 1rem)}.pfe-l-grid>.pfe-m-9-col-on-lg{width:calc(75% - 1rem)}.pfe-l-grid>.pfe-m-10-col-on-lg{width:calc(83.33333% - 1rem)}.pfe-l-grid>.pfe-m-11-col-on-lg{width:calc(91.66667% - 1rem)}.pfe-l-grid>.pfe-m-12-col-on-lg{width:calc(100% - 1rem)}}@media screen and (min-width:1200px){.pfe-l-grid.pfe-m-all-1-col-on-xl>*{width:calc(8.33333% - 1rem)}.pfe-l-grid.pfe-m-all-2-col-on-xl>*{width:calc(16.66667% - 1rem)}.pfe-l-grid.pfe-m-all-3-col-on-xl>*{width:calc(25% - 1rem)}.pfe-l-grid.pfe-m-all-4-col-on-xl>*{width:calc(33.33333% - 1rem)}.pfe-l-grid.pfe-m-all-5-col-on-xl>*{width:calc(41.66667% - 1rem)}.pfe-l-grid.pfe-m-all-6-col-on-xl>*{width:calc(50% - 1rem)}.pfe-l-grid.pfe-m-all-7-col-on-xl>*{width:calc(58.33333% - 1rem)}.pfe-l-grid.pfe-m-all-8-col-on-xl>*{width:calc(66.66667% - 1rem)}.pfe-l-grid.pfe-m-all-9-col-on-xl>*{width:calc(75% - 1rem)}.pfe-l-grid.pfe-m-all-10-col-on-xl>*{width:calc(83.33333% - 1rem)}.pfe-l-grid.pfe-m-all-11-col-on-xl>*{width:calc(91.66667% - 1rem)}.pfe-l-grid.pfe-m-all-12-col-on-xl>*{width:calc(100% - 1rem)}.pfe-l-grid>.pfe-m-1-col-on-xl{width:calc(8.33333% - 1rem)}.pfe-l-grid>.pfe-m-2-col-on-xl{width:calc(16.66667% - 1rem)}.pfe-l-grid>.pfe-m-3-col-on-xl{width:calc(25% - 1rem)}.pfe-l-grid>.pfe-m-4-col-on-xl{width:calc(33.33333% - 1rem)}.pfe-l-grid>.pfe-m-5-col-on-xl{width:calc(41.66667% - 1rem)}.pfe-l-grid>.pfe-m-6-col-on-xl{width:calc(50% - 1rem)}.pfe-l-grid>.pfe-m-7-col-on-xl{width:calc(58.33333% - 1rem)}.pfe-l-grid>.pfe-m-8-col-on-xl{width:calc(66.66667% - 1rem)}.pfe-l-grid>.pfe-m-9-col-on-xl{width:calc(75% - 1rem)}.pfe-l-grid>.pfe-m-10-col-on-xl{width:calc(83.33333% - 1rem)}.pfe-l-grid>.pfe-m-11-col-on-xl{width:calc(91.66667% - 1rem)}.pfe-l-grid>.pfe-m-12-col-on-xl{width:calc(100% - 1rem)}}.pfe-l-grid.pfe-m-gutters{margin:calc(.5rem * -1)}.pfe-l-grid.pfe-m-gutters>*{margin:.5rem}@supports (display:grid){.pfe-l-grid{display:grid;grid-template-columns:repeat(12,[col-start] 1fr)}.pfe-l-grid>*,.pfe-l-grid__item{width:auto;margin:0;grid-column-start:auto;grid-column-end:span 12}.pfe-l-grid.pfe-l-grid-fill-height{height:100%}@media screen and (min-width:576px){.pfe-l-grid.pfe-m-all-1-col>*{width:auto;grid-column-start:auto;grid-column-end:span 1}.pfe-l-grid.pfe-m-all-2-col>*{width:auto;grid-column-start:auto;grid-column-end:span 2}.pfe-l-grid.pfe-m-all-3-col>*{width:auto;grid-column-start:auto;grid-column-end:span 3}.pfe-l-grid.pfe-m-all-4-col>*{width:auto;grid-column-start:auto;grid-column-end:span 4}.pfe-l-grid.pfe-m-all-5-col>*{width:auto;grid-column-start:auto;grid-column-end:span 5}.pfe-l-grid.pfe-m-all-6-col>*{width:auto;grid-column-start:auto;grid-column-end:span 6}.pfe-l-grid.pfe-m-all-7-col>*{width:auto;grid-column-start:auto;grid-column-end:span 7}.pfe-l-grid.pfe-m-all-8-col>*{width:auto;grid-column-start:auto;grid-column-end:span 8}.pfe-l-grid.pfe-m-all-9-col>*{width:auto;grid-column-start:auto;grid-column-end:span 9}.pfe-l-grid.pfe-m-all-10-col>*{width:auto;grid-column-start:auto;grid-column-end:span 10}.pfe-l-grid.pfe-m-all-11-col>*{width:auto;grid-column-start:auto;grid-column-end:span 11}.pfe-l-grid.pfe-m-all-12-col>*{width:auto;grid-column-start:auto;grid-column-end:span 12}.pfe-l-grid>.pfe-m-1-col{width:auto;grid-column-start:auto;grid-column-end:span 1}.pfe-l-grid>.pfe-m-2-col{width:auto;grid-column-start:auto;grid-column-end:span 2}.pfe-l-grid>.pfe-m-3-col{width:auto;grid-column-start:auto;grid-column-end:span 3}.pfe-l-grid>.pfe-m-4-col{width:auto;grid-column-start:auto;grid-column-end:span 4}.pfe-l-grid>.pfe-m-5-col{width:auto;grid-column-start:auto;grid-column-end:span 5}.pfe-l-grid>.pfe-m-6-col{width:auto;grid-column-start:auto;grid-column-end:span 6}.pfe-l-grid>.pfe-m-7-col{width:auto;grid-column-start:auto;grid-column-end:span 7}.pfe-l-grid>.pfe-m-8-col{width:auto;grid-column-start:auto;grid-column-end:span 8}.pfe-l-grid>.pfe-m-9-col{width:auto;grid-column-start:auto;grid-column-end:span 9}.pfe-l-grid>.pfe-m-10-col{width:auto;grid-column-start:auto;grid-column-end:span 10}.pfe-l-grid>.pfe-m-11-col{width:auto;grid-column-start:auto;grid-column-end:span 11}.pfe-l-grid>.pfe-m-12-col{width:auto;grid-column-start:auto;grid-column-end:span 12}.pfe-l-grid>.pfe-m-startat-1-col{grid-column-start:col-start 1}.pfe-l-grid>.pfe-m-startat-2-col{grid-column-start:col-start 2}.pfe-l-grid>.pfe-m-startat-3-col{grid-column-start:col-start 3}.pfe-l-grid>.pfe-m-startat-4-col{grid-column-start:col-start 4}.pfe-l-grid>.pfe-m-startat-5-col{grid-column-start:col-start 5}.pfe-l-grid>.pfe-m-startat-6-col{grid-column-start:col-start 6}.pfe-l-grid>.pfe-m-startat-7-col{grid-column-start:col-start 7}.pfe-l-grid>.pfe-m-startat-8-col{grid-column-start:col-start 8}.pfe-l-grid>.pfe-m-startat-9-col{grid-column-start:col-start 9}.pfe-l-grid>.pfe-m-startat-10-col{grid-column-start:col-start 10}.pfe-l-grid>.pfe-m-startat-11-col{grid-column-start:col-start 11}.pfe-l-grid>.pfe-m-startat-12-col{grid-column-start:col-start 12}.pfe-l-grid>.pfe-m-1-row{grid-row:span 1}.pfe-l-grid>.pfe-m-2-row{grid-row:span 2}.pfe-l-grid>.pfe-m-3-row{grid-row:span 3}.pfe-l-grid>.pfe-m-4-row{grid-row:span 4}.pfe-l-grid>.pfe-m-5-row{grid-row:span 5}.pfe-l-grid>.pfe-m-6-row{grid-row:span 6}.pfe-l-grid>.pfe-m-7-row{grid-row:span 7}.pfe-l-grid>.pfe-m-8-row{grid-row:span 8}.pfe-l-grid>.pfe-m-9-row{grid-row:span 9}.pfe-l-grid>.pfe-m-10-row{grid-row:span 10}.pfe-l-grid>.pfe-m-11-row{grid-row:span 11}.pfe-l-grid>.pfe-m-12-row{grid-row:span 12}}@media screen and (max-width:0){.pfe-l-grid.pfe-m-all-1-col-on-xs>*{width:auto;grid-column-start:auto;grid-column-end:span 1}.pfe-l-grid.pfe-m-all-2-col-on-xs>*{width:auto;grid-column-start:auto;grid-column-end:span 2}.pfe-l-grid.pfe-m-all-3-col-on-xs>*{width:auto;grid-column-start:auto;grid-column-end:span 3}.pfe-l-grid.pfe-m-all-4-col-on-xs>*{width:auto;grid-column-start:auto;grid-column-end:span 4}.pfe-l-grid.pfe-m-all-5-col-on-xs>*{width:auto;grid-column-start:auto;grid-column-end:span 5}.pfe-l-grid.pfe-m-all-6-col-on-xs>*{width:auto;grid-column-start:auto;grid-column-end:span 6}.pfe-l-grid.pfe-m-all-7-col-on-xs>*{width:auto;grid-column-start:auto;grid-column-end:span 7}.pfe-l-grid.pfe-m-all-8-col-on-xs>*{width:auto;grid-column-start:auto;grid-column-end:span 8}.pfe-l-grid.pfe-m-all-9-col-on-xs>*{width:auto;grid-column-start:auto;grid-column-end:span 9}.pfe-l-grid.pfe-m-all-10-col-on-xs>*{width:auto;grid-column-start:auto;grid-column-end:span 10}.pfe-l-grid.pfe-m-all-11-col-on-xs>*{width:auto;grid-column-start:auto;grid-column-end:span 11}.pfe-l-grid.pfe-m-all-12-col-on-xs>*{width:auto;grid-column-start:auto;grid-column-end:span 12}.pfe-l-grid>.pfe-m-1-col-on-xs{width:auto;grid-column-start:auto;grid-column-end:span 1}.pfe-l-grid>.pfe-m-2-col-on-xs{width:auto;grid-column-start:auto;grid-column-end:span 2}.pfe-l-grid>.pfe-m-3-col-on-xs{width:auto;grid-column-start:auto;grid-column-end:span 3}.pfe-l-grid>.pfe-m-4-col-on-xs{width:auto;grid-column-start:auto;grid-column-end:span 4}.pfe-l-grid>.pfe-m-5-col-on-xs{width:auto;grid-column-start:auto;grid-column-end:span 5}.pfe-l-grid>.pfe-m-6-col-on-xs{width:auto;grid-column-start:auto;grid-column-end:span 6}.pfe-l-grid>.pfe-m-7-col-on-xs{width:auto;grid-column-start:auto;grid-column-end:span 7}.pfe-l-grid>.pfe-m-8-col-on-xs{width:auto;grid-column-start:auto;grid-column-end:span 8}.pfe-l-grid>.pfe-m-9-col-on-xs{width:auto;grid-column-start:auto;grid-column-end:span 9}.pfe-l-grid>.pfe-m-10-col-on-xs{width:auto;grid-column-start:auto;grid-column-end:span 10}.pfe-l-grid>.pfe-m-11-col-on-xs{width:auto;grid-column-start:auto;grid-column-end:span 11}.pfe-l-grid>.pfe-m-12-col-on-xs{width:auto;grid-column-start:auto;grid-column-end:span 12}.pfe-l-grid>.pfe-m-startat-1-col-on-xs{grid-column-start:col-start 1}.pfe-l-grid>.pfe-m-startat-2-col-on-xs{grid-column-start:col-start 2}.pfe-l-grid>.pfe-m-startat-3-col-on-xs{grid-column-start:col-start 3}.pfe-l-grid>.pfe-m-startat-4-col-on-xs{grid-column-start:col-start 4}.pfe-l-grid>.pfe-m-startat-5-col-on-xs{grid-column-start:col-start 5}.pfe-l-grid>.pfe-m-startat-6-col-on-xs{grid-column-start:col-start 6}.pfe-l-grid>.pfe-m-startat-7-col-on-xs{grid-column-start:col-start 7}.pfe-l-grid>.pfe-m-startat-8-col-on-xs{grid-column-start:col-start 8}.pfe-l-grid>.pfe-m-startat-9-col-on-xs{grid-column-start:col-start 9}.pfe-l-grid>.pfe-m-startat-10-col-on-xs{grid-column-start:col-start 10}.pfe-l-grid>.pfe-m-startat-11-col-on-xs{grid-column-start:col-start 11}.pfe-l-grid>.pfe-m-startat-12-col-on-xs{grid-column-start:col-start 12}.pfe-l-grid>.pfe-m-1-row-on-xs{grid-row:span 1}.pfe-l-grid>.pfe-m-2-row-on-xs{grid-row:span 2}.pfe-l-grid>.pfe-m-3-row-on-xs{grid-row:span 3}.pfe-l-grid>.pfe-m-4-row-on-xs{grid-row:span 4}.pfe-l-grid>.pfe-m-5-row-on-xs{grid-row:span 5}.pfe-l-grid>.pfe-m-6-row-on-xs{grid-row:span 6}.pfe-l-grid>.pfe-m-7-row-on-xs{grid-row:span 7}.pfe-l-grid>.pfe-m-8-row-on-xs{grid-row:span 8}.pfe-l-grid>.pfe-m-9-row-on-xs{grid-row:span 9}.pfe-l-grid>.pfe-m-10-row-on-xs{grid-row:span 10}.pfe-l-grid>.pfe-m-11-row-on-xs{grid-row:span 11}.pfe-l-grid>.pfe-m-12-row-on-xs{grid-row:span 12}}@media screen and (min-width:576px){.pfe-l-grid.pfe-m-all-1-col-on-sm>*{width:auto;grid-column-start:auto;grid-column-end:span 1}.pfe-l-grid.pfe-m-all-2-col-on-sm>*{width:auto;grid-column-start:auto;grid-column-end:span 2}.pfe-l-grid.pfe-m-all-3-col-on-sm>*{width:auto;grid-column-start:auto;grid-column-end:span 3}.pfe-l-grid.pfe-m-all-4-col-on-sm>*{width:auto;grid-column-start:auto;grid-column-end:span 4}.pfe-l-grid.pfe-m-all-5-col-on-sm>*{width:auto;grid-column-start:auto;grid-column-end:span 5}.pfe-l-grid.pfe-m-all-6-col-on-sm>*{width:auto;grid-column-start:auto;grid-column-end:span 6}.pfe-l-grid.pfe-m-all-7-col-on-sm>*{width:auto;grid-column-start:auto;grid-column-end:span 7}.pfe-l-grid.pfe-m-all-8-col-on-sm>*{width:auto;grid-column-start:auto;grid-column-end:span 8}.pfe-l-grid.pfe-m-all-9-col-on-sm>*{width:auto;grid-column-start:auto;grid-column-end:span 9}.pfe-l-grid.pfe-m-all-10-col-on-sm>*{width:auto;grid-column-start:auto;grid-column-end:span 10}.pfe-l-grid.pfe-m-all-11-col-on-sm>*{width:auto;grid-column-start:auto;grid-column-end:span 11}.pfe-l-grid.pfe-m-all-12-col-on-sm>*{width:auto;grid-column-start:auto;grid-column-end:span 12}.pfe-l-grid>.pfe-m-1-col-on-sm{width:auto;grid-column-start:auto;grid-column-end:span 1}.pfe-l-grid>.pfe-m-2-col-on-sm{width:auto;grid-column-start:auto;grid-column-end:span 2}.pfe-l-grid>.pfe-m-3-col-on-sm{width:auto;grid-column-start:auto;grid-column-end:span 3}.pfe-l-grid>.pfe-m-4-col-on-sm{width:auto;grid-column-start:auto;grid-column-end:span 4}.pfe-l-grid>.pfe-m-5-col-on-sm{width:auto;grid-column-start:auto;grid-column-end:span 5}.pfe-l-grid>.pfe-m-6-col-on-sm{width:auto;grid-column-start:auto;grid-column-end:span 6}.pfe-l-grid>.pfe-m-7-col-on-sm{width:auto;grid-column-start:auto;grid-column-end:span 7}.pfe-l-grid>.pfe-m-8-col-on-sm{width:auto;grid-column-start:auto;grid-column-end:span 8}.pfe-l-grid>.pfe-m-9-col-on-sm{width:auto;grid-column-start:auto;grid-column-end:span 9}.pfe-l-grid>.pfe-m-10-col-on-sm{width:auto;grid-column-start:auto;grid-column-end:span 10}.pfe-l-grid>.pfe-m-11-col-on-sm{width:auto;grid-column-start:auto;grid-column-end:span 11}.pfe-l-grid>.pfe-m-12-col-on-sm{width:auto;grid-column-start:auto;grid-column-end:span 12}.pfe-l-grid>.pfe-m-startat-1-col-on-sm{grid-column-start:col-start 1}.pfe-l-grid>.pfe-m-startat-2-col-on-sm{grid-column-start:col-start 2}.pfe-l-grid>.pfe-m-startat-3-col-on-sm{grid-column-start:col-start 3}.pfe-l-grid>.pfe-m-startat-4-col-on-sm{grid-column-start:col-start 4}.pfe-l-grid>.pfe-m-startat-5-col-on-sm{grid-column-start:col-start 5}.pfe-l-grid>.pfe-m-startat-6-col-on-sm{grid-column-start:col-start 6}.pfe-l-grid>.pfe-m-startat-7-col-on-sm{grid-column-start:col-start 7}.pfe-l-grid>.pfe-m-startat-8-col-on-sm{grid-column-start:col-start 8}.pfe-l-grid>.pfe-m-startat-9-col-on-sm{grid-column-start:col-start 9}.pfe-l-grid>.pfe-m-startat-10-col-on-sm{grid-column-start:col-start 10}.pfe-l-grid>.pfe-m-startat-11-col-on-sm{grid-column-start:col-start 11}.pfe-l-grid>.pfe-m-startat-12-col-on-sm{grid-column-start:col-start 12}.pfe-l-grid>.pfe-m-1-row-on-sm{grid-row:span 1}.pfe-l-grid>.pfe-m-2-row-on-sm{grid-row:span 2}.pfe-l-grid>.pfe-m-3-row-on-sm{grid-row:span 3}.pfe-l-grid>.pfe-m-4-row-on-sm{grid-row:span 4}.pfe-l-grid>.pfe-m-5-row-on-sm{grid-row:span 5}.pfe-l-grid>.pfe-m-6-row-on-sm{grid-row:span 6}.pfe-l-grid>.pfe-m-7-row-on-sm{grid-row:span 7}.pfe-l-grid>.pfe-m-8-row-on-sm{grid-row:span 8}.pfe-l-grid>.pfe-m-9-row-on-sm{grid-row:span 9}.pfe-l-grid>.pfe-m-10-row-on-sm{grid-row:span 10}.pfe-l-grid>.pfe-m-11-row-on-sm{grid-row:span 11}.pfe-l-grid>.pfe-m-12-row-on-sm{grid-row:span 12}}@media screen and (min-width:768px){.pfe-l-grid.pfe-m-all-1-col-on-md>*{width:auto;grid-column-start:auto;grid-column-end:span 1}.pfe-l-grid.pfe-m-all-2-col-on-md>*{width:auto;grid-column-start:auto;grid-column-end:span 2}.pfe-l-grid.pfe-m-all-3-col-on-md>*{width:auto;grid-column-start:auto;grid-column-end:span 3}.pfe-l-grid.pfe-m-all-4-col-on-md>*{width:auto;grid-column-start:auto;grid-column-end:span 4}.pfe-l-grid.pfe-m-all-5-col-on-md>*{width:auto;grid-column-start:auto;grid-column-end:span 5}.pfe-l-grid.pfe-m-all-6-col-on-md>*{width:auto;grid-column-start:auto;grid-column-end:span 6}.pfe-l-grid.pfe-m-all-7-col-on-md>*{width:auto;grid-column-start:auto;grid-column-end:span 7}.pfe-l-grid.pfe-m-all-8-col-on-md>*{width:auto;grid-column-start:auto;grid-column-end:span 8}.pfe-l-grid.pfe-m-all-9-col-on-md>*{width:auto;grid-column-start:auto;grid-column-end:span 9}.pfe-l-grid.pfe-m-all-10-col-on-md>*{width:auto;grid-column-start:auto;grid-column-end:span 10}.pfe-l-grid.pfe-m-all-11-col-on-md>*{width:auto;grid-column-start:auto;grid-column-end:span 11}.pfe-l-grid.pfe-m-all-12-col-on-md>*{width:auto;grid-column-start:auto;grid-column-end:span 12}.pfe-l-grid>.pfe-m-1-col-on-md{width:auto;grid-column-start:auto;grid-column-end:span 1}.pfe-l-grid>.pfe-m-2-col-on-md{width:auto;grid-column-start:auto;grid-column-end:span 2}.pfe-l-grid>.pfe-m-3-col-on-md{width:auto;grid-column-start:auto;grid-column-end:span 3}.pfe-l-grid>.pfe-m-4-col-on-md{width:auto;grid-column-start:auto;grid-column-end:span 4}.pfe-l-grid>.pfe-m-5-col-on-md{width:auto;grid-column-start:auto;grid-column-end:span 5}.pfe-l-grid>.pfe-m-6-col-on-md{width:auto;grid-column-start:auto;grid-column-end:span 6}.pfe-l-grid>.pfe-m-7-col-on-md{width:auto;grid-column-start:auto;grid-column-end:span 7}.pfe-l-grid>.pfe-m-8-col-on-md{width:auto;grid-column-start:auto;grid-column-end:span 8}.pfe-l-grid>.pfe-m-9-col-on-md{width:auto;grid-column-start:auto;grid-column-end:span 9}.pfe-l-grid>.pfe-m-10-col-on-md{width:auto;grid-column-start:auto;grid-column-end:span 10}.pfe-l-grid>.pfe-m-11-col-on-md{width:auto;grid-column-start:auto;grid-column-end:span 11}.pfe-l-grid>.pfe-m-12-col-on-md{width:auto;grid-column-start:auto;grid-column-end:span 12}.pfe-l-grid>.pfe-m-startat-1-col-on-md{grid-column-start:col-start 1}.pfe-l-grid>.pfe-m-startat-2-col-on-md{grid-column-start:col-start 2}.pfe-l-grid>.pfe-m-startat-3-col-on-md{grid-column-start:col-start 3}.pfe-l-grid>.pfe-m-startat-4-col-on-md{grid-column-start:col-start 4}.pfe-l-grid>.pfe-m-startat-5-col-on-md{grid-column-start:col-start 5}.pfe-l-grid>.pfe-m-startat-6-col-on-md{grid-column-start:col-start 6}.pfe-l-grid>.pfe-m-startat-7-col-on-md{grid-column-start:col-start 7}.pfe-l-grid>.pfe-m-startat-8-col-on-md{grid-column-start:col-start 8}.pfe-l-grid>.pfe-m-startat-9-col-on-md{grid-column-start:col-start 9}.pfe-l-grid>.pfe-m-startat-10-col-on-md{grid-column-start:col-start 10}.pfe-l-grid>.pfe-m-startat-11-col-on-md{grid-column-start:col-start 11}.pfe-l-grid>.pfe-m-startat-12-col-on-md{grid-column-start:col-start 12}.pfe-l-grid>.pfe-m-1-row-on-md{grid-row:span 1}.pfe-l-grid>.pfe-m-2-row-on-md{grid-row:span 2}.pfe-l-grid>.pfe-m-3-row-on-md{grid-row:span 3}.pfe-l-grid>.pfe-m-4-row-on-md{grid-row:span 4}.pfe-l-grid>.pfe-m-5-row-on-md{grid-row:span 5}.pfe-l-grid>.pfe-m-6-row-on-md{grid-row:span 6}.pfe-l-grid>.pfe-m-7-row-on-md{grid-row:span 7}.pfe-l-grid>.pfe-m-8-row-on-md{grid-row:span 8}.pfe-l-grid>.pfe-m-9-row-on-md{grid-row:span 9}.pfe-l-grid>.pfe-m-10-row-on-md{grid-row:span 10}.pfe-l-grid>.pfe-m-11-row-on-md{grid-row:span 11}.pfe-l-grid>.pfe-m-12-row-on-md{grid-row:span 12}}@media screen and (min-width:992px){.pfe-l-grid.pfe-m-all-1-col-on-lg>*{width:auto;grid-column-start:auto;grid-column-end:span 1}.pfe-l-grid.pfe-m-all-2-col-on-lg>*{width:auto;grid-column-start:auto;grid-column-end:span 2}.pfe-l-grid.pfe-m-all-3-col-on-lg>*{width:auto;grid-column-start:auto;grid-column-end:span 3}.pfe-l-grid.pfe-m-all-4-col-on-lg>*{width:auto;grid-column-start:auto;grid-column-end:span 4}.pfe-l-grid.pfe-m-all-5-col-on-lg>*{width:auto;grid-column-start:auto;grid-column-end:span 5}.pfe-l-grid.pfe-m-all-6-col-on-lg>*{width:auto;grid-column-start:auto;grid-column-end:span 6}.pfe-l-grid.pfe-m-all-7-col-on-lg>*{width:auto;grid-column-start:auto;grid-column-end:span 7}.pfe-l-grid.pfe-m-all-8-col-on-lg>*{width:auto;grid-column-start:auto;grid-column-end:span 8}.pfe-l-grid.pfe-m-all-9-col-on-lg>*{width:auto;grid-column-start:auto;grid-column-end:span 9}.pfe-l-grid.pfe-m-all-10-col-on-lg>*{width:auto;grid-column-start:auto;grid-column-end:span 10}.pfe-l-grid.pfe-m-all-11-col-on-lg>*{width:auto;grid-column-start:auto;grid-column-end:span 11}.pfe-l-grid.pfe-m-all-12-col-on-lg>*{width:auto;grid-column-start:auto;grid-column-end:span 12}.pfe-l-grid>.pfe-m-1-col-on-lg{width:auto;grid-column-start:auto;grid-column-end:span 1}.pfe-l-grid>.pfe-m-2-col-on-lg{width:auto;grid-column-start:auto;grid-column-end:span 2}.pfe-l-grid>.pfe-m-3-col-on-lg{width:auto;grid-column-start:auto;grid-column-end:span 3}.pfe-l-grid>.pfe-m-4-col-on-lg{width:auto;grid-column-start:auto;grid-column-end:span 4}.pfe-l-grid>.pfe-m-5-col-on-lg{width:auto;grid-column-start:auto;grid-column-end:span 5}.pfe-l-grid>.pfe-m-6-col-on-lg{width:auto;grid-column-start:auto;grid-column-end:span 6}.pfe-l-grid>.pfe-m-7-col-on-lg{width:auto;grid-column-start:auto;grid-column-end:span 7}.pfe-l-grid>.pfe-m-8-col-on-lg{width:auto;grid-column-start:auto;grid-column-end:span 8}.pfe-l-grid>.pfe-m-9-col-on-lg{width:auto;grid-column-start:auto;grid-column-end:span 9}.pfe-l-grid>.pfe-m-10-col-on-lg{width:auto;grid-column-start:auto;grid-column-end:span 10}.pfe-l-grid>.pfe-m-11-col-on-lg{width:auto;grid-column-start:auto;grid-column-end:span 11}.pfe-l-grid>.pfe-m-12-col-on-lg{width:auto;grid-column-start:auto;grid-column-end:span 12}.pfe-l-grid>.pfe-m-startat-1-col-on-lg{grid-column-start:col-start 1}.pfe-l-grid>.pfe-m-startat-2-col-on-lg{grid-column-start:col-start 2}.pfe-l-grid>.pfe-m-startat-3-col-on-lg{grid-column-start:col-start 3}.pfe-l-grid>.pfe-m-startat-4-col-on-lg{grid-column-start:col-start 4}.pfe-l-grid>.pfe-m-startat-5-col-on-lg{grid-column-start:col-start 5}.pfe-l-grid>.pfe-m-startat-6-col-on-lg{grid-column-start:col-start 6}.pfe-l-grid>.pfe-m-startat-7-col-on-lg{grid-column-start:col-start 7}.pfe-l-grid>.pfe-m-startat-8-col-on-lg{grid-column-start:col-start 8}.pfe-l-grid>.pfe-m-startat-9-col-on-lg{grid-column-start:col-start 9}.pfe-l-grid>.pfe-m-startat-10-col-on-lg{grid-column-start:col-start 10}.pfe-l-grid>.pfe-m-startat-11-col-on-lg{grid-column-start:col-start 11}.pfe-l-grid>.pfe-m-startat-12-col-on-lg{grid-column-start:col-start 12}.pfe-l-grid>.pfe-m-1-row-on-lg{grid-row:span 1}.pfe-l-grid>.pfe-m-2-row-on-lg{grid-row:span 2}.pfe-l-grid>.pfe-m-3-row-on-lg{grid-row:span 3}.pfe-l-grid>.pfe-m-4-row-on-lg{grid-row:span 4}.pfe-l-grid>.pfe-m-5-row-on-lg{grid-row:span 5}.pfe-l-grid>.pfe-m-6-row-on-lg{grid-row:span 6}.pfe-l-grid>.pfe-m-7-row-on-lg{grid-row:span 7}.pfe-l-grid>.pfe-m-8-row-on-lg{grid-row:span 8}.pfe-l-grid>.pfe-m-9-row-on-lg{grid-row:span 9}.pfe-l-grid>.pfe-m-10-row-on-lg{grid-row:span 10}.pfe-l-grid>.pfe-m-11-row-on-lg{grid-row:span 11}.pfe-l-grid>.pfe-m-12-row-on-lg{grid-row:span 12}}@media screen and (min-width:1200px){.pfe-l-grid.pfe-m-all-1-col-on-xl>*{width:auto;grid-column-start:auto;grid-column-end:span 1}.pfe-l-grid.pfe-m-all-2-col-on-xl>*{width:auto;grid-column-start:auto;grid-column-end:span 2}.pfe-l-grid.pfe-m-all-3-col-on-xl>*{width:auto;grid-column-start:auto;grid-column-end:span 3}.pfe-l-grid.pfe-m-all-4-col-on-xl>*{width:auto;grid-column-start:auto;grid-column-end:span 4}.pfe-l-grid.pfe-m-all-5-col-on-xl>*{width:auto;grid-column-start:auto;grid-column-end:span 5}.pfe-l-grid.pfe-m-all-6-col-on-xl>*{width:auto;grid-column-start:auto;grid-column-end:span 6}.pfe-l-grid.pfe-m-all-7-col-on-xl>*{width:auto;grid-column-start:auto;grid-column-end:span 7}.pfe-l-grid.pfe-m-all-8-col-on-xl>*{width:auto;grid-column-start:auto;grid-column-end:span 8}.pfe-l-grid.pfe-m-all-9-col-on-xl>*{width:auto;grid-column-start:auto;grid-column-end:span 9}.pfe-l-grid.pfe-m-all-10-col-on-xl>*{width:auto;grid-column-start:auto;grid-column-end:span 10}.pfe-l-grid.pfe-m-all-11-col-on-xl>*{width:auto;grid-column-start:auto;grid-column-end:span 11}.pfe-l-grid.pfe-m-all-12-col-on-xl>*{width:auto;grid-column-start:auto;grid-column-end:span 12}.pfe-l-grid>.pfe-m-1-col-on-xl{width:auto;grid-column-start:auto;grid-column-end:span 1}.pfe-l-grid>.pfe-m-2-col-on-xl{width:auto;grid-column-start:auto;grid-column-end:span 2}.pfe-l-grid>.pfe-m-3-col-on-xl{width:auto;grid-column-start:auto;grid-column-end:span 3}.pfe-l-grid>.pfe-m-4-col-on-xl{width:auto;grid-column-start:auto;grid-column-end:span 4}.pfe-l-grid>.pfe-m-5-col-on-xl{width:auto;grid-column-start:auto;grid-column-end:span 5}.pfe-l-grid>.pfe-m-6-col-on-xl{width:auto;grid-column-start:auto;grid-column-end:span 6}.pfe-l-grid>.pfe-m-7-col-on-xl{width:auto;grid-column-start:auto;grid-column-end:span 7}.pfe-l-grid>.pfe-m-8-col-on-xl{width:auto;grid-column-start:auto;grid-column-end:span 8}.pfe-l-grid>.pfe-m-9-col-on-xl{width:auto;grid-column-start:auto;grid-column-end:span 9}.pfe-l-grid>.pfe-m-10-col-on-xl{width:auto;grid-column-start:auto;grid-column-end:span 10}.pfe-l-grid>.pfe-m-11-col-on-xl{width:auto;grid-column-start:auto;grid-column-end:span 11}.pfe-l-grid>.pfe-m-12-col-on-xl{width:auto;grid-column-start:auto;grid-column-end:span 12}.pfe-l-grid>.pfe-m-startat-1-col-on-xl{grid-column-start:col-start 1}.pfe-l-grid>.pfe-m-startat-2-col-on-xl{grid-column-start:col-start 2}.pfe-l-grid>.pfe-m-startat-3-col-on-xl{grid-column-start:col-start 3}.pfe-l-grid>.pfe-m-startat-4-col-on-xl{grid-column-start:col-start 4}.pfe-l-grid>.pfe-m-startat-5-col-on-xl{grid-column-start:col-start 5}.pfe-l-grid>.pfe-m-startat-6-col-on-xl{grid-column-start:col-start 6}.pfe-l-grid>.pfe-m-startat-7-col-on-xl{grid-column-start:col-start 7}.pfe-l-grid>.pfe-m-startat-8-col-on-xl{grid-column-start:col-start 8}.pfe-l-grid>.pfe-m-startat-9-col-on-xl{grid-column-start:col-start 9}.pfe-l-grid>.pfe-m-startat-10-col-on-xl{grid-column-start:col-start 10}.pfe-l-grid>.pfe-m-startat-11-col-on-xl{grid-column-start:col-start 11}.pfe-l-grid>.pfe-m-startat-12-col-on-xl{grid-column-start:col-start 12}.pfe-l-grid>.pfe-m-1-row-on-xl{grid-row:span 1}.pfe-l-grid>.pfe-m-2-row-on-xl{grid-row:span 2}.pfe-l-grid>.pfe-m-3-row-on-xl{grid-row:span 3}.pfe-l-grid>.pfe-m-4-row-on-xl{grid-row:span 4}.pfe-l-grid>.pfe-m-5-row-on-xl{grid-row:span 5}.pfe-l-grid>.pfe-m-6-row-on-xl{grid-row:span 6}.pfe-l-grid>.pfe-m-7-row-on-xl{grid-row:span 7}.pfe-l-grid>.pfe-m-8-row-on-xl{grid-row:span 8}.pfe-l-grid>.pfe-m-9-row-on-xl{grid-row:span 9}.pfe-l-grid>.pfe-m-10-row-on-xl{grid-row:span 10}.pfe-l-grid>.pfe-m-11-row-on-xl{grid-row:span 11}.pfe-l-grid>.pfe-m-12-row-on-xl{grid-row:span 12}}.pfe-l-grid.pfe-m-gutters{grid-gap:1rem;margin:0}.pfe-l-grid.pfe-m-gutters>*{margin:0}}.pfe-l-bullseye{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:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100%;padding:1rem;padding:var(--pfe-theme--container-spacer,1rem);margin:0} \ No newline at end of file diff --git a/elements/pfe-number/package.json b/elements/pfe-number/package.json index 0140b38a41..b99cf4f1f0 100644 --- a/elements/pfe-number/package.json +++ b/elements/pfe-number/package.json @@ -4,7 +4,7 @@ "className": "PfeNumber", "elementName": "pfe-number" }, - "version": "1.0.0-prerelease.11", + "version": "1.0.0-prerelease.13", "publishConfig": { "access": "public" }, @@ -15,7 +15,7 @@ ], "repository": { "type": "git", - "url" : "github:patternfly/patternfly-elements", + "url": "github:patternfly/patternfly-elements", "directory": "elements/pfe-number" }, "main": "pfe-number.js", @@ -31,7 +31,7 @@ ], "license": "MIT", "dependencies": { - "@patternfly/pfelement": "^1.0.0-prerelease.11", + "@patternfly/pfelement": "^1.0.0-prerelease.13", "numeral": "^2.0.6" }, "generator-pfelement-version": "0.2.9", diff --git a/elements/pfe-number/pfe-number.css b/elements/pfe-number/pfe-number.css new file mode 100644 index 0000000000..37595de883 --- /dev/null +++ b/elements/pfe-number/pfe-number.css @@ -0,0 +1,6 @@ +:host { + display: inline; + white-space: nowrap; +} + +/*# sourceMappingURL=pfe-number.css.map */ diff --git a/elements/pfe-number/pfe-number.css.map b/elements/pfe-number/pfe-number.css.map new file mode 100644 index 0000000000..0e60c48c37 --- /dev/null +++ b/elements/pfe-number/pfe-number.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["pfe-number.scss","pfe-number.css"],"names":[],"mappings":"AAAA;EACE,eAAe;EACf,mBAAmB;ACCrB","file":"pfe-number.css","sourcesContent":[":host {\n display: inline;\n white-space: nowrap;\n}\n",":host {\n display: inline;\n white-space: nowrap;\n}\n"]} \ No newline at end of file diff --git a/elements/pfe-number/pfe-number.css.min.map b/elements/pfe-number/pfe-number.css.min.map new file mode 100644 index 0000000000..e69de29bb2 diff --git a/elements/pfe-number/pfe-number.js b/elements/pfe-number/pfe-number.js new file mode 100644 index 0000000000..82f00f5b30 --- /dev/null +++ b/elements/pfe-number/pfe-number.js @@ -0,0 +1,1137 @@ +import PFElement from '../pfelement/pfelement.js'; + +var commonjsGlobal = 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 numeral = createCommonjsModule(function (module) { +/*! @preserve + * numeral.js + * version : 2.0.6 + * author : Adam Draper + * license : MIT + * http://adamwdraper.github.com/Numeral-js/ + */ + +(function (global, factory) { + if (module.exports) { + module.exports = factory(); + } else { + global.numeral = factory(); + } +}(commonjsGlobal, function () { + /************************************ + Variables + ************************************/ + + var numeral, + _, + VERSION = '2.0.6', + formats = {}, + locales = {}, + defaults = { + currentLocale: 'en', + zeroFormat: null, + nullFormat: null, + defaultFormat: '0,0', + scalePercentBy100: true + }, + options = { + currentLocale: defaults.currentLocale, + zeroFormat: defaults.zeroFormat, + nullFormat: defaults.nullFormat, + defaultFormat: defaults.defaultFormat, + scalePercentBy100: defaults.scalePercentBy100 + }; + + + /************************************ + Constructors + ************************************/ + + // Numeral prototype object + function Numeral(input, number) { + this._input = input; + + this._value = number; + } + + numeral = function(input) { + var value, + kind, + unformatFunction, + regexp; + + if (numeral.isNumeral(input)) { + value = input.value(); + } else if (input === 0 || typeof input === 'undefined') { + value = 0; + } else if (input === null || _.isNaN(input)) { + value = null; + } else if (typeof input === 'string') { + if (options.zeroFormat && input === options.zeroFormat) { + value = 0; + } else if (options.nullFormat && input === options.nullFormat || !input.replace(/[^0-9]+/g, '').length) { + value = null; + } else { + for (kind in formats) { + regexp = typeof formats[kind].regexps.unformat === 'function' ? formats[kind].regexps.unformat() : formats[kind].regexps.unformat; + + if (regexp && input.match(regexp)) { + unformatFunction = formats[kind].unformat; + + break; + } + } + + unformatFunction = unformatFunction || numeral._.stringToNumber; + + value = unformatFunction(input); + } + } else { + value = Number(input)|| null; + } + + return new Numeral(input, value); + }; + + // version number + numeral.version = VERSION; + + // compare numeral object + numeral.isNumeral = function(obj) { + return obj instanceof Numeral; + }; + + // helper functions + numeral._ = _ = { + // formats numbers separators, decimals places, signs, abbreviations + numberToFormat: function(value, format, roundingFunction) { + var locale = locales[numeral.options.currentLocale], + negP = false, + optDec = false, + leadingCount = 0, + abbr = '', + trillion = 1000000000000, + billion = 1000000000, + million = 1000000, + thousand = 1000, + decimal = '', + neg = false, + abbrForce, // force abbreviation + abs, + int, + precision, + signed, + thousands, + output; + + // make sure we never format a null value + value = value || 0; + + abs = Math.abs(value); + + // see if we should use parentheses for negative number or if we should prefix with a sign + // if both are present we default to parentheses + if (numeral._.includes(format, '(')) { + negP = true; + format = format.replace(/[\(|\)]/g, ''); + } else if (numeral._.includes(format, '+') || numeral._.includes(format, '-')) { + signed = numeral._.includes(format, '+') ? format.indexOf('+') : value < 0 ? format.indexOf('-') : -1; + format = format.replace(/[\+|\-]/g, ''); + } + + // see if abbreviation is wanted + if (numeral._.includes(format, 'a')) { + abbrForce = format.match(/a(k|m|b|t)?/); + + abbrForce = abbrForce ? abbrForce[1] : false; + + // check for space before abbreviation + if (numeral._.includes(format, ' a')) { + abbr = ' '; + } + + format = format.replace(new RegExp(abbr + 'a[kmbt]?'), ''); + + if (abs >= trillion && !abbrForce || abbrForce === 't') { + // trillion + abbr += locale.abbreviations.trillion; + value = value / trillion; + } else if (abs < trillion && abs >= billion && !abbrForce || abbrForce === 'b') { + // billion + abbr += locale.abbreviations.billion; + value = value / billion; + } else if (abs < billion && abs >= million && !abbrForce || abbrForce === 'm') { + // million + abbr += locale.abbreviations.million; + value = value / million; + } else if (abs < million && abs >= thousand && !abbrForce || abbrForce === 'k') { + // thousand + abbr += locale.abbreviations.thousand; + value = value / thousand; + } + } + + // check for optional decimals + if (numeral._.includes(format, '[.]')) { + optDec = true; + format = format.replace('[.]', '.'); + } + + // break number and format + int = value.toString().split('.')[0]; + precision = format.split('.')[1]; + thousands = format.indexOf(','); + leadingCount = (format.split('.')[0].split(',')[0].match(/0/g) || []).length; + + if (precision) { + if (numeral._.includes(precision, '[')) { + precision = precision.replace(']', ''); + precision = precision.split('['); + decimal = numeral._.toFixed(value, (precision[0].length + precision[1].length), roundingFunction, precision[1].length); + } else { + decimal = numeral._.toFixed(value, precision.length, roundingFunction); + } + + int = decimal.split('.')[0]; + + if (numeral._.includes(decimal, '.')) { + decimal = locale.delimiters.decimal + decimal.split('.')[1]; + } else { + decimal = ''; + } + + if (optDec && Number(decimal.slice(1)) === 0) { + decimal = ''; + } + } else { + int = numeral._.toFixed(value, 0, roundingFunction); + } + + // check abbreviation again after rounding + if (abbr && !abbrForce && Number(int) >= 1000 && abbr !== locale.abbreviations.trillion) { + int = String(Number(int) / 1000); + + switch (abbr) { + case locale.abbreviations.thousand: + abbr = locale.abbreviations.million; + break; + case locale.abbreviations.million: + abbr = locale.abbreviations.billion; + break; + case locale.abbreviations.billion: + abbr = locale.abbreviations.trillion; + break; + } + } + + + // format number + if (numeral._.includes(int, '-')) { + int = int.slice(1); + neg = true; + } + + if (int.length < leadingCount) { + for (var i = leadingCount - int.length; i > 0; i--) { + int = '0' + int; + } + } + + if (thousands > -1) { + int = int.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1' + locale.delimiters.thousands); + } + + if (format.indexOf('.') === 0) { + int = ''; + } + + output = int + decimal + (abbr ? abbr : ''); + + if (negP) { + output = (negP && neg ? '(' : '') + output + (negP && neg ? ')' : ''); + } else { + if (signed >= 0) { + output = signed === 0 ? (neg ? '-' : '+') + output : output + (neg ? '-' : '+'); + } else if (neg) { + output = '-' + output; + } + } + + return output; + }, + // unformats numbers separators, decimals places, signs, abbreviations + stringToNumber: function(string) { + var locale = locales[options.currentLocale], + stringOriginal = string, + abbreviations = { + thousand: 3, + million: 6, + billion: 9, + trillion: 12 + }, + abbreviation, + value, + regexp; + + if (options.zeroFormat && string === options.zeroFormat) { + value = 0; + } else if (options.nullFormat && string === options.nullFormat || !string.replace(/[^0-9]+/g, '').length) { + value = null; + } else { + value = 1; + + if (locale.delimiters.decimal !== '.') { + string = string.replace(/\./g, '').replace(locale.delimiters.decimal, '.'); + } + + for (abbreviation in abbreviations) { + regexp = new RegExp('[^a-zA-Z]' + locale.abbreviations[abbreviation] + '(?:\\)|(\\' + locale.currency.symbol + ')?(?:\\))?)?$'); + + if (stringOriginal.match(regexp)) { + value *= Math.pow(10, abbreviations[abbreviation]); + break; + } + } + + // check for negative number + value *= (string.split('-').length + Math.min(string.split('(').length - 1, string.split(')').length - 1)) % 2 ? 1 : -1; + + // remove non numbers + string = string.replace(/[^0-9\.]+/g, ''); + + value *= Number(string); + } + + return value; + }, + isNaN: function(value) { + return typeof value === 'number' && isNaN(value); + }, + includes: function(string, search) { + return string.indexOf(search) !== -1; + }, + insert: function(string, subString, start) { + return string.slice(0, start) + subString + string.slice(start); + }, + reduce: function(array, callback /*, initialValue*/) { + if (this === null) { + throw new TypeError('Array.prototype.reduce called on null or undefined'); + } + + if (typeof callback !== 'function') { + throw new TypeError(callback + ' is not a function'); + } + + var t = Object(array), + len = t.length >>> 0, + k = 0, + value; + + if (arguments.length === 3) { + value = arguments[2]; + } else { + while (k < len && !(k in t)) { + k++; + } + + if (k >= len) { + throw new TypeError('Reduce of empty array with no initial value'); + } + + value = t[k++]; + } + for (; k < len; k++) { + if (k in t) { + value = callback(value, t[k], k, t); + } + } + return value; + }, + /** + * Computes the multiplier necessary to make x >= 1, + * effectively eliminating miscalculations caused by + * finite precision. + */ + multiplier: function (x) { + var parts = x.toString().split('.'); + + return parts.length < 2 ? 1 : Math.pow(10, parts[1].length); + }, + /** + * Given a variable number of arguments, returns the maximum + * multiplier that must be used to normalize an operation involving + * all of them. + */ + correctionFactor: function () { + var args = Array.prototype.slice.call(arguments); + + return args.reduce(function(accum, next) { + var mn = _.multiplier(next); + return accum > mn ? accum : mn; + }, 1); + }, + /** + * Implementation of toFixed() that treats floats more like decimals + * + * Fixes binary rounding issues (eg. (0.615).toFixed(2) === '0.61') that present + * problems for accounting- and finance-related software. + */ + toFixed: function(value, maxDecimals, roundingFunction, optionals) { + var splitValue = value.toString().split('.'), + minDecimals = maxDecimals - (optionals || 0), + boundedPrecision, + optionalsRegExp, + power, + output; + + // Use the smallest precision value possible to avoid errors from floating point representation + if (splitValue.length === 2) { + boundedPrecision = Math.min(Math.max(splitValue[1].length, minDecimals), maxDecimals); + } else { + boundedPrecision = minDecimals; + } + + power = Math.pow(10, boundedPrecision); + + // Multiply up by precision, round accurately, then divide and use native toFixed(): + output = (roundingFunction(value + 'e+' + boundedPrecision) / power).toFixed(boundedPrecision); + + if (optionals > maxDecimals - boundedPrecision) { + optionalsRegExp = new RegExp('\\.?0{1,' + (optionals - (maxDecimals - boundedPrecision)) + '}$'); + output = output.replace(optionalsRegExp, ''); + } + + return output; + } + }; + + // avaliable options + numeral.options = options; + + // avaliable formats + numeral.formats = formats; + + // avaliable formats + numeral.locales = locales; + + // This function sets the current locale. If + // no arguments are passed in, it will simply return the current global + // locale key. + numeral.locale = function(key) { + if (key) { + options.currentLocale = key.toLowerCase(); + } + + return options.currentLocale; + }; + + // This function provides access to the loaded locale data. If + // no arguments are passed in, it will simply return the current + // global locale object. + numeral.localeData = function(key) { + if (!key) { + return locales[options.currentLocale]; + } + + key = key.toLowerCase(); + + if (!locales[key]) { + throw new Error('Unknown locale : ' + key); + } + + return locales[key]; + }; + + numeral.reset = function() { + for (var property in defaults) { + options[property] = defaults[property]; + } + }; + + numeral.zeroFormat = function(format) { + options.zeroFormat = typeof(format) === 'string' ? format : null; + }; + + numeral.nullFormat = function (format) { + options.nullFormat = typeof(format) === 'string' ? format : null; + }; + + numeral.defaultFormat = function(format) { + options.defaultFormat = typeof(format) === 'string' ? format : '0.0'; + }; + + numeral.register = function(type, name, format) { + name = name.toLowerCase(); + + if (this[type + 's'][name]) { + throw new TypeError(name + ' ' + type + ' already registered.'); + } + + this[type + 's'][name] = format; + + return format; + }; + + + numeral.validate = function(val, culture) { + var _decimalSep, + _thousandSep, + _currSymbol, + _valArray, + _abbrObj, + _thousandRegEx, + localeData, + temp; + + //coerce val to string + if (typeof val !== 'string') { + val += ''; + + if (console.warn) { + console.warn('Numeral.js: Value is not string. It has been co-erced to: ', val); + } + } + + //trim whitespaces from either sides + val = val.trim(); + + //if val is just digits return true + if (!!val.match(/^\d+$/)) { + return true; + } + + //if val is empty return false + if (val === '') { + return false; + } + + //get the decimal and thousands separator from numeral.localeData + try { + //check if the culture is understood by numeral. if not, default it to current locale + localeData = numeral.localeData(culture); + } catch (e) { + localeData = numeral.localeData(numeral.locale()); + } + + //setup the delimiters and currency symbol based on culture/locale + _currSymbol = localeData.currency.symbol; + _abbrObj = localeData.abbreviations; + _decimalSep = localeData.delimiters.decimal; + if (localeData.delimiters.thousands === '.') { + _thousandSep = '\\.'; + } else { + _thousandSep = localeData.delimiters.thousands; + } + + // validating currency symbol + temp = val.match(/^[^\d]+/); + if (temp !== null) { + val = val.substr(1); + if (temp[0] !== _currSymbol) { + return false; + } + } + + //validating abbreviation symbol + temp = val.match(/[^\d]+$/); + if (temp !== null) { + val = val.slice(0, -1); + if (temp[0] !== _abbrObj.thousand && temp[0] !== _abbrObj.million && temp[0] !== _abbrObj.billion && temp[0] !== _abbrObj.trillion) { + return false; + } + } + + _thousandRegEx = new RegExp(_thousandSep + '{2}'); + + if (!val.match(/[^\d.,]/g)) { + _valArray = val.split(_decimalSep); + if (_valArray.length > 2) { + return false; + } else { + if (_valArray.length < 2) { + return ( !! _valArray[0].match(/^\d+.*\d$/) && !_valArray[0].match(_thousandRegEx)); + } else { + if (_valArray[0].length === 1) { + return ( !! _valArray[0].match(/^\d+$/) && !_valArray[0].match(_thousandRegEx) && !! _valArray[1].match(/^\d+$/)); + } else { + return ( !! _valArray[0].match(/^\d+.*\d$/) && !_valArray[0].match(_thousandRegEx) && !! _valArray[1].match(/^\d+$/)); + } + } + } + } + + return false; + }; + + + /************************************ + Numeral Prototype + ************************************/ + + numeral.fn = Numeral.prototype = { + clone: function() { + return numeral(this); + }, + format: function(inputString, roundingFunction) { + var value = this._value, + format = inputString || options.defaultFormat, + kind, + output, + formatFunction; + + // make sure we have a roundingFunction + roundingFunction = roundingFunction || Math.round; + + // format based on value + if (value === 0 && options.zeroFormat !== null) { + output = options.zeroFormat; + } else if (value === null && options.nullFormat !== null) { + output = options.nullFormat; + } else { + for (kind in formats) { + if (format.match(formats[kind].regexps.format)) { + formatFunction = formats[kind].format; + + break; + } + } + + formatFunction = formatFunction || numeral._.numberToFormat; + + output = formatFunction(value, format, roundingFunction); + } + + return output; + }, + value: function() { + return this._value; + }, + input: function() { + return this._input; + }, + set: function(value) { + this._value = Number(value); + + return this; + }, + add: function(value) { + var corrFactor = _.correctionFactor.call(null, this._value, value); + + function cback(accum, curr, currI, O) { + return accum + Math.round(corrFactor * curr); + } + + this._value = _.reduce([this._value, value], cback, 0) / corrFactor; + + return this; + }, + subtract: function(value) { + var corrFactor = _.correctionFactor.call(null, this._value, value); + + function cback(accum, curr, currI, O) { + return accum - Math.round(corrFactor * curr); + } + + this._value = _.reduce([value], cback, Math.round(this._value * corrFactor)) / corrFactor; + + return this; + }, + multiply: function(value) { + function cback(accum, curr, currI, O) { + var corrFactor = _.correctionFactor(accum, curr); + return Math.round(accum * corrFactor) * Math.round(curr * corrFactor) / Math.round(corrFactor * corrFactor); + } + + this._value = _.reduce([this._value, value], cback, 1); + + return this; + }, + divide: function(value) { + function cback(accum, curr, currI, O) { + var corrFactor = _.correctionFactor(accum, curr); + return Math.round(accum * corrFactor) / Math.round(curr * corrFactor); + } + + this._value = _.reduce([this._value, value], cback); + + return this; + }, + difference: function(value) { + return Math.abs(numeral(this._value).subtract(value).value()); + } + }; + + /************************************ + Default Locale && Format + ************************************/ + + numeral.register('locale', 'en', { + delimiters: { + thousands: ',', + decimal: '.' + }, + abbreviations: { + thousand: 'k', + million: 'm', + billion: 'b', + trillion: 't' + }, + ordinal: function(number) { + var b = number % 10; + return (~~(number % 100 / 10) === 1) ? 'th' : + (b === 1) ? 'st' : + (b === 2) ? 'nd' : + (b === 3) ? 'rd' : 'th'; + }, + currency: { + symbol: '$' + } + }); + + + +(function() { + numeral.register('format', 'bps', { + regexps: { + format: /(BPS)/, + unformat: /(BPS)/ + }, + format: function(value, format, roundingFunction) { + var space = numeral._.includes(format, ' BPS') ? ' ' : '', + output; + + value = value * 10000; + + // check for space before BPS + format = format.replace(/\s?BPS/, ''); + + output = numeral._.numberToFormat(value, format, roundingFunction); + + if (numeral._.includes(output, ')')) { + output = output.split(''); + + output.splice(-1, 0, space + 'BPS'); + + output = output.join(''); + } else { + output = output + space + 'BPS'; + } + + return output; + }, + unformat: function(string) { + return +(numeral._.stringToNumber(string) * 0.0001).toFixed(15); + } + }); +})(); + + +(function() { + var decimal = { + base: 1000, + suffixes: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] + }, + binary = { + base: 1024, + suffixes: ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'] + }; + + var allSuffixes = decimal.suffixes.concat(binary.suffixes.filter(function (item) { + return decimal.suffixes.indexOf(item) < 0; + })); + var unformatRegex = allSuffixes.join('|'); + // Allow support for BPS (http://www.investopedia.com/terms/b/basispoint.asp) + unformatRegex = '(' + unformatRegex.replace('B', 'B(?!PS)') + ')'; + + numeral.register('format', 'bytes', { + regexps: { + format: /([0\s]i?b)/, + unformat: new RegExp(unformatRegex) + }, + format: function(value, format, roundingFunction) { + var output, + bytes = numeral._.includes(format, 'ib') ? binary : decimal, + suffix = numeral._.includes(format, ' b') || numeral._.includes(format, ' ib') ? ' ' : '', + power, + min, + max; + + // check for space before + format = format.replace(/\s?i?b/, ''); + + for (power = 0; power <= bytes.suffixes.length; power++) { + min = Math.pow(bytes.base, power); + max = Math.pow(bytes.base, power + 1); + + if (value === null || value === 0 || value >= min && value < max) { + suffix += bytes.suffixes[power]; + + if (min > 0) { + value = value / min; + } + + break; + } + } + + output = numeral._.numberToFormat(value, format, roundingFunction); + + return output + suffix; + }, + unformat: function(string) { + var value = numeral._.stringToNumber(string), + power, + bytesMultiplier; + + if (value) { + for (power = decimal.suffixes.length - 1; power >= 0; power--) { + if (numeral._.includes(string, decimal.suffixes[power])) { + bytesMultiplier = Math.pow(decimal.base, power); + + break; + } + + if (numeral._.includes(string, binary.suffixes[power])) { + bytesMultiplier = Math.pow(binary.base, power); + + break; + } + } + + value *= (bytesMultiplier || 1); + } + + return value; + } + }); +})(); + + +(function() { + numeral.register('format', 'currency', { + regexps: { + format: /(\$)/ + }, + format: function(value, format, roundingFunction) { + var locale = numeral.locales[numeral.options.currentLocale], + symbols = { + before: format.match(/^([\+|\-|\(|\s|\$]*)/)[0], + after: format.match(/([\+|\-|\)|\s|\$]*)$/)[0] + }, + output, + symbol, + i; + + // strip format of spaces and $ + format = format.replace(/\s?\$\s?/, ''); + + // format the number + output = numeral._.numberToFormat(value, format, roundingFunction); + + // update the before and after based on value + if (value >= 0) { + symbols.before = symbols.before.replace(/[\-\(]/, ''); + symbols.after = symbols.after.replace(/[\-\)]/, ''); + } else if (value < 0 && (!numeral._.includes(symbols.before, '-') && !numeral._.includes(symbols.before, '('))) { + symbols.before = '-' + symbols.before; + } + + // loop through each before symbol + for (i = 0; i < symbols.before.length; i++) { + symbol = symbols.before[i]; + + switch (symbol) { + case '$': + output = numeral._.insert(output, locale.currency.symbol, i); + break; + case ' ': + output = numeral._.insert(output, ' ', i + locale.currency.symbol.length - 1); + break; + } + } + + // loop through each after symbol + for (i = symbols.after.length - 1; i >= 0; i--) { + symbol = symbols.after[i]; + + switch (symbol) { + case '$': + output = i === symbols.after.length - 1 ? output + locale.currency.symbol : numeral._.insert(output, locale.currency.symbol, -(symbols.after.length - (1 + i))); + break; + case ' ': + output = i === symbols.after.length - 1 ? output + ' ' : numeral._.insert(output, ' ', -(symbols.after.length - (1 + i) + locale.currency.symbol.length - 1)); + break; + } + } + + + return output; + } + }); +})(); + + +(function() { + numeral.register('format', 'exponential', { + regexps: { + format: /(e\+|e-)/, + unformat: /(e\+|e-)/ + }, + format: function(value, format, roundingFunction) { + var output, + exponential = typeof value === 'number' && !numeral._.isNaN(value) ? value.toExponential() : '0e+0', + parts = exponential.split('e'); + + format = format.replace(/e[\+|\-]{1}0/, ''); + + output = numeral._.numberToFormat(Number(parts[0]), format, roundingFunction); + + return output + 'e' + parts[1]; + }, + unformat: function(string) { + var parts = numeral._.includes(string, 'e+') ? string.split('e+') : string.split('e-'), + value = Number(parts[0]), + power = Number(parts[1]); + + power = numeral._.includes(string, 'e-') ? power *= -1 : power; + + function cback(accum, curr, currI, O) { + var corrFactor = numeral._.correctionFactor(accum, curr), + num = (accum * corrFactor) * (curr * corrFactor) / (corrFactor * corrFactor); + return num; + } + + return numeral._.reduce([value, Math.pow(10, power)], cback, 1); + } + }); +})(); + + +(function() { + numeral.register('format', 'ordinal', { + regexps: { + format: /(o)/ + }, + format: function(value, format, roundingFunction) { + var locale = numeral.locales[numeral.options.currentLocale], + output, + ordinal = numeral._.includes(format, ' o') ? ' ' : ''; + + // check for space before + format = format.replace(/\s?o/, ''); + + ordinal += locale.ordinal(value); + + output = numeral._.numberToFormat(value, format, roundingFunction); + + return output + ordinal; + } + }); +})(); + + +(function() { + numeral.register('format', 'percentage', { + regexps: { + format: /(%)/, + unformat: /(%)/ + }, + format: function(value, format, roundingFunction) { + var space = numeral._.includes(format, ' %') ? ' ' : '', + output; + + if (numeral.options.scalePercentBy100) { + value = value * 100; + } + + // check for space before % + format = format.replace(/\s?\%/, ''); + + output = numeral._.numberToFormat(value, format, roundingFunction); + + if (numeral._.includes(output, ')')) { + output = output.split(''); + + output.splice(-1, 0, space + '%'); + + output = output.join(''); + } else { + output = output + space + '%'; + } + + return output; + }, + unformat: function(string) { + var number = numeral._.stringToNumber(string); + if (numeral.options.scalePercentBy100) { + return number * 0.01; + } + return number; + } + }); +})(); + + +(function() { + numeral.register('format', 'time', { + regexps: { + format: /(:)/, + unformat: /(:)/ + }, + format: function(value, format, roundingFunction) { + var hours = Math.floor(value / 60 / 60), + minutes = Math.floor((value - (hours * 60 * 60)) / 60), + seconds = Math.round(value - (hours * 60 * 60) - (minutes * 60)); + + return hours + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds); + }, + unformat: function(string) { + var timeArray = string.split(':'), + seconds = 0; + + // turn hours and minutes into seconds and add them all up + if (timeArray.length === 3) { + // hours + seconds = seconds + (Number(timeArray[0]) * 60 * 60); + // minutes + seconds = seconds + (Number(timeArray[1]) * 60); + // seconds + seconds = seconds + Number(timeArray[2]); + } else if (timeArray.length === 2) { + // minutes + seconds = seconds + (Number(timeArray[0]) * 60); + // seconds + seconds = seconds + Number(timeArray[1]); + } + return Number(seconds); + } + }); +})(); + +return numeral; +})); +}); + +/* + * @license + * Copyright 2019 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. + * +*/ + +// easy aliases for common format strings +const types = { + abbrev: "0a", // or 'approx'? + ordinal: "0o", + percent: "0%", + bytes: "0[.][00] ib", + e: "0[.00]e+0", + thousands: "0,0[.][00]" +}; + +// use thin spaces to separate thousands chunks +// debugger; +numeral.locales.en.delimiters.thousands = " "; + +class PfeNumber extends PFElement { + + get html() { + return ``; + } + static get tag() { + return "pfe-number"; + } + + get styleUrl() { + return "pfe-number.scss"; + } + + get templateUrl() { + return "pfe-number.html"; + } + + static get observedAttributes() { + return ["number", "format", "type"]; + } + + constructor() { + super(PfeNumber); + } + + connectedCallback() { + super.connectedCallback(); + this.connected = true; + + this._determineFormat(); + this._setInitialNumber(); + } + + attributeChangedCallback(attr, oldVal, newVal) { + super.attributeChangedCallback(...arguments); + switch (attr) { + case "type": + this._determineFormat(); + break; + case "format": + this._updateNumber(this.getAttribute("number"), newVal); + break; + case "number": + this._updateNumber(newVal, this.getAttribute("format")); + } + } + + _setInitialNumber() { + const numberAttrDefined = !Number.isNaN( + parseFloat(this.getAttribute("number")) + ); + const numberContentDefined = !Number.isNaN(parseFloat(this.textContent)); + + if (numberAttrDefined) { + this.setAttribute("number", this.getAttribute("number")); + } else if (numberContentDefined) { + this.setAttribute("number", this.textContent); + } + } + + _determineFormat() { + let type = this.getAttribute("type"); + + if (type && types[type]) { + this.setAttribute("format", types[type]); + } else { + this.setAttribute("format", this.getAttribute("format") || "0"); + } + } + + _updateNumber(num, type) { + this.shadowRoot.querySelector("span").textContent = this._format(num, type); + } + + _format(num, type) { + return numeral(num).format(type); + } +} + +PFElement.create(PfeNumber); +//# sourceMappingURL=pfe-number.js.map diff --git a/elements/pfe-number/pfe-number.js.map b/elements/pfe-number/pfe-number.js.map new file mode 100644 index 0000000000..884bd83949 --- /dev/null +++ b/elements/pfe-number/pfe-number.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-number.js","sources":["../../node_modules/numeral/numeral.js","pfe-number.js"],"sourcesContent":["/*! @preserve\n * numeral.js\n * version : 2.0.6\n * author : Adam Draper\n * license : MIT\n * http://adamwdraper.github.com/Numeral-js/\n */\n\n(function (global, factory) {\n if (typeof define === 'function' && define.amd) {\n define(factory);\n } else if (typeof module === 'object' && module.exports) {\n module.exports = factory();\n } else {\n global.numeral = factory();\n }\n}(this, function () {\n /************************************\n Variables\n ************************************/\n\n var numeral,\n _,\n VERSION = '2.0.6',\n formats = {},\n locales = {},\n defaults = {\n currentLocale: 'en',\n zeroFormat: null,\n nullFormat: null,\n defaultFormat: '0,0',\n scalePercentBy100: true\n },\n options = {\n currentLocale: defaults.currentLocale,\n zeroFormat: defaults.zeroFormat,\n nullFormat: defaults.nullFormat,\n defaultFormat: defaults.defaultFormat,\n scalePercentBy100: defaults.scalePercentBy100\n };\n\n\n /************************************\n Constructors\n ************************************/\n\n // Numeral prototype object\n function Numeral(input, number) {\n this._input = input;\n\n this._value = number;\n }\n\n numeral = function(input) {\n var value,\n kind,\n unformatFunction,\n regexp;\n\n if (numeral.isNumeral(input)) {\n value = input.value();\n } else if (input === 0 || typeof input === 'undefined') {\n value = 0;\n } else if (input === null || _.isNaN(input)) {\n value = null;\n } else if (typeof input === 'string') {\n if (options.zeroFormat && input === options.zeroFormat) {\n value = 0;\n } else if (options.nullFormat && input === options.nullFormat || !input.replace(/[^0-9]+/g, '').length) {\n value = null;\n } else {\n for (kind in formats) {\n regexp = typeof formats[kind].regexps.unformat === 'function' ? formats[kind].regexps.unformat() : formats[kind].regexps.unformat;\n\n if (regexp && input.match(regexp)) {\n unformatFunction = formats[kind].unformat;\n\n break;\n }\n }\n\n unformatFunction = unformatFunction || numeral._.stringToNumber;\n\n value = unformatFunction(input);\n }\n } else {\n value = Number(input)|| null;\n }\n\n return new Numeral(input, value);\n };\n\n // version number\n numeral.version = VERSION;\n\n // compare numeral object\n numeral.isNumeral = function(obj) {\n return obj instanceof Numeral;\n };\n\n // helper functions\n numeral._ = _ = {\n // formats numbers separators, decimals places, signs, abbreviations\n numberToFormat: function(value, format, roundingFunction) {\n var locale = locales[numeral.options.currentLocale],\n negP = false,\n optDec = false,\n leadingCount = 0,\n abbr = '',\n trillion = 1000000000000,\n billion = 1000000000,\n million = 1000000,\n thousand = 1000,\n decimal = '',\n neg = false,\n abbrForce, // force abbreviation\n abs,\n min,\n max,\n power,\n int,\n precision,\n signed,\n thousands,\n output;\n\n // make sure we never format a null value\n value = value || 0;\n\n abs = Math.abs(value);\n\n // see if we should use parentheses for negative number or if we should prefix with a sign\n // if both are present we default to parentheses\n if (numeral._.includes(format, '(')) {\n negP = true;\n format = format.replace(/[\\(|\\)]/g, '');\n } else if (numeral._.includes(format, '+') || numeral._.includes(format, '-')) {\n signed = numeral._.includes(format, '+') ? format.indexOf('+') : value < 0 ? format.indexOf('-') : -1;\n format = format.replace(/[\\+|\\-]/g, '');\n }\n\n // see if abbreviation is wanted\n if (numeral._.includes(format, 'a')) {\n abbrForce = format.match(/a(k|m|b|t)?/);\n\n abbrForce = abbrForce ? abbrForce[1] : false;\n\n // check for space before abbreviation\n if (numeral._.includes(format, ' a')) {\n abbr = ' ';\n }\n\n format = format.replace(new RegExp(abbr + 'a[kmbt]?'), '');\n\n if (abs >= trillion && !abbrForce || abbrForce === 't') {\n // trillion\n abbr += locale.abbreviations.trillion;\n value = value / trillion;\n } else if (abs < trillion && abs >= billion && !abbrForce || abbrForce === 'b') {\n // billion\n abbr += locale.abbreviations.billion;\n value = value / billion;\n } else if (abs < billion && abs >= million && !abbrForce || abbrForce === 'm') {\n // million\n abbr += locale.abbreviations.million;\n value = value / million;\n } else if (abs < million && abs >= thousand && !abbrForce || abbrForce === 'k') {\n // thousand\n abbr += locale.abbreviations.thousand;\n value = value / thousand;\n }\n }\n\n // check for optional decimals\n if (numeral._.includes(format, '[.]')) {\n optDec = true;\n format = format.replace('[.]', '.');\n }\n\n // break number and format\n int = value.toString().split('.')[0];\n precision = format.split('.')[1];\n thousands = format.indexOf(',');\n leadingCount = (format.split('.')[0].split(',')[0].match(/0/g) || []).length;\n\n if (precision) {\n if (numeral._.includes(precision, '[')) {\n precision = precision.replace(']', '');\n precision = precision.split('[');\n decimal = numeral._.toFixed(value, (precision[0].length + precision[1].length), roundingFunction, precision[1].length);\n } else {\n decimal = numeral._.toFixed(value, precision.length, roundingFunction);\n }\n\n int = decimal.split('.')[0];\n\n if (numeral._.includes(decimal, '.')) {\n decimal = locale.delimiters.decimal + decimal.split('.')[1];\n } else {\n decimal = '';\n }\n\n if (optDec && Number(decimal.slice(1)) === 0) {\n decimal = '';\n }\n } else {\n int = numeral._.toFixed(value, 0, roundingFunction);\n }\n\n // check abbreviation again after rounding\n if (abbr && !abbrForce && Number(int) >= 1000 && abbr !== locale.abbreviations.trillion) {\n int = String(Number(int) / 1000);\n\n switch (abbr) {\n case locale.abbreviations.thousand:\n abbr = locale.abbreviations.million;\n break;\n case locale.abbreviations.million:\n abbr = locale.abbreviations.billion;\n break;\n case locale.abbreviations.billion:\n abbr = locale.abbreviations.trillion;\n break;\n }\n }\n\n\n // format number\n if (numeral._.includes(int, '-')) {\n int = int.slice(1);\n neg = true;\n }\n\n if (int.length < leadingCount) {\n for (var i = leadingCount - int.length; i > 0; i--) {\n int = '0' + int;\n }\n }\n\n if (thousands > -1) {\n int = int.toString().replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1' + locale.delimiters.thousands);\n }\n\n if (format.indexOf('.') === 0) {\n int = '';\n }\n\n output = int + decimal + (abbr ? abbr : '');\n\n if (negP) {\n output = (negP && neg ? '(' : '') + output + (negP && neg ? ')' : '');\n } else {\n if (signed >= 0) {\n output = signed === 0 ? (neg ? '-' : '+') + output : output + (neg ? '-' : '+');\n } else if (neg) {\n output = '-' + output;\n }\n }\n\n return output;\n },\n // unformats numbers separators, decimals places, signs, abbreviations\n stringToNumber: function(string) {\n var locale = locales[options.currentLocale],\n stringOriginal = string,\n abbreviations = {\n thousand: 3,\n million: 6,\n billion: 9,\n trillion: 12\n },\n abbreviation,\n value,\n i,\n regexp;\n\n if (options.zeroFormat && string === options.zeroFormat) {\n value = 0;\n } else if (options.nullFormat && string === options.nullFormat || !string.replace(/[^0-9]+/g, '').length) {\n value = null;\n } else {\n value = 1;\n\n if (locale.delimiters.decimal !== '.') {\n string = string.replace(/\\./g, '').replace(locale.delimiters.decimal, '.');\n }\n\n for (abbreviation in abbreviations) {\n regexp = new RegExp('[^a-zA-Z]' + locale.abbreviations[abbreviation] + '(?:\\\\)|(\\\\' + locale.currency.symbol + ')?(?:\\\\))?)?$');\n\n if (stringOriginal.match(regexp)) {\n value *= Math.pow(10, abbreviations[abbreviation]);\n break;\n }\n }\n\n // check for negative number\n value *= (string.split('-').length + Math.min(string.split('(').length - 1, string.split(')').length - 1)) % 2 ? 1 : -1;\n\n // remove non numbers\n string = string.replace(/[^0-9\\.]+/g, '');\n\n value *= Number(string);\n }\n\n return value;\n },\n isNaN: function(value) {\n return typeof value === 'number' && isNaN(value);\n },\n includes: function(string, search) {\n return string.indexOf(search) !== -1;\n },\n insert: function(string, subString, start) {\n return string.slice(0, start) + subString + string.slice(start);\n },\n reduce: function(array, callback /*, initialValue*/) {\n if (this === null) {\n throw new TypeError('Array.prototype.reduce called on null or undefined');\n }\n\n if (typeof callback !== 'function') {\n throw new TypeError(callback + ' is not a function');\n }\n\n var t = Object(array),\n len = t.length >>> 0,\n k = 0,\n value;\n\n if (arguments.length === 3) {\n value = arguments[2];\n } else {\n while (k < len && !(k in t)) {\n k++;\n }\n\n if (k >= len) {\n throw new TypeError('Reduce of empty array with no initial value');\n }\n\n value = t[k++];\n }\n for (; k < len; k++) {\n if (k in t) {\n value = callback(value, t[k], k, t);\n }\n }\n return value;\n },\n /**\n * Computes the multiplier necessary to make x >= 1,\n * effectively eliminating miscalculations caused by\n * finite precision.\n */\n multiplier: function (x) {\n var parts = x.toString().split('.');\n\n return parts.length < 2 ? 1 : Math.pow(10, parts[1].length);\n },\n /**\n * Given a variable number of arguments, returns the maximum\n * multiplier that must be used to normalize an operation involving\n * all of them.\n */\n correctionFactor: function () {\n var args = Array.prototype.slice.call(arguments);\n\n return args.reduce(function(accum, next) {\n var mn = _.multiplier(next);\n return accum > mn ? accum : mn;\n }, 1);\n },\n /**\n * Implementation of toFixed() that treats floats more like decimals\n *\n * Fixes binary rounding issues (eg. (0.615).toFixed(2) === '0.61') that present\n * problems for accounting- and finance-related software.\n */\n toFixed: function(value, maxDecimals, roundingFunction, optionals) {\n var splitValue = value.toString().split('.'),\n minDecimals = maxDecimals - (optionals || 0),\n boundedPrecision,\n optionalsRegExp,\n power,\n output;\n\n // Use the smallest precision value possible to avoid errors from floating point representation\n if (splitValue.length === 2) {\n boundedPrecision = Math.min(Math.max(splitValue[1].length, minDecimals), maxDecimals);\n } else {\n boundedPrecision = minDecimals;\n }\n\n power = Math.pow(10, boundedPrecision);\n\n // Multiply up by precision, round accurately, then divide and use native toFixed():\n output = (roundingFunction(value + 'e+' + boundedPrecision) / power).toFixed(boundedPrecision);\n\n if (optionals > maxDecimals - boundedPrecision) {\n optionalsRegExp = new RegExp('\\\\.?0{1,' + (optionals - (maxDecimals - boundedPrecision)) + '}$');\n output = output.replace(optionalsRegExp, '');\n }\n\n return output;\n }\n };\n\n // avaliable options\n numeral.options = options;\n\n // avaliable formats\n numeral.formats = formats;\n\n // avaliable formats\n numeral.locales = locales;\n\n // This function sets the current locale. If\n // no arguments are passed in, it will simply return the current global\n // locale key.\n numeral.locale = function(key) {\n if (key) {\n options.currentLocale = key.toLowerCase();\n }\n\n return options.currentLocale;\n };\n\n // This function provides access to the loaded locale data. If\n // no arguments are passed in, it will simply return the current\n // global locale object.\n numeral.localeData = function(key) {\n if (!key) {\n return locales[options.currentLocale];\n }\n\n key = key.toLowerCase();\n\n if (!locales[key]) {\n throw new Error('Unknown locale : ' + key);\n }\n\n return locales[key];\n };\n\n numeral.reset = function() {\n for (var property in defaults) {\n options[property] = defaults[property];\n }\n };\n\n numeral.zeroFormat = function(format) {\n options.zeroFormat = typeof(format) === 'string' ? format : null;\n };\n\n numeral.nullFormat = function (format) {\n options.nullFormat = typeof(format) === 'string' ? format : null;\n };\n\n numeral.defaultFormat = function(format) {\n options.defaultFormat = typeof(format) === 'string' ? format : '0.0';\n };\n\n numeral.register = function(type, name, format) {\n name = name.toLowerCase();\n\n if (this[type + 's'][name]) {\n throw new TypeError(name + ' ' + type + ' already registered.');\n }\n\n this[type + 's'][name] = format;\n\n return format;\n };\n\n\n numeral.validate = function(val, culture) {\n var _decimalSep,\n _thousandSep,\n _currSymbol,\n _valArray,\n _abbrObj,\n _thousandRegEx,\n localeData,\n temp;\n\n //coerce val to string\n if (typeof val !== 'string') {\n val += '';\n\n if (console.warn) {\n console.warn('Numeral.js: Value is not string. It has been co-erced to: ', val);\n }\n }\n\n //trim whitespaces from either sides\n val = val.trim();\n\n //if val is just digits return true\n if (!!val.match(/^\\d+$/)) {\n return true;\n }\n\n //if val is empty return false\n if (val === '') {\n return false;\n }\n\n //get the decimal and thousands separator from numeral.localeData\n try {\n //check if the culture is understood by numeral. if not, default it to current locale\n localeData = numeral.localeData(culture);\n } catch (e) {\n localeData = numeral.localeData(numeral.locale());\n }\n\n //setup the delimiters and currency symbol based on culture/locale\n _currSymbol = localeData.currency.symbol;\n _abbrObj = localeData.abbreviations;\n _decimalSep = localeData.delimiters.decimal;\n if (localeData.delimiters.thousands === '.') {\n _thousandSep = '\\\\.';\n } else {\n _thousandSep = localeData.delimiters.thousands;\n }\n\n // validating currency symbol\n temp = val.match(/^[^\\d]+/);\n if (temp !== null) {\n val = val.substr(1);\n if (temp[0] !== _currSymbol) {\n return false;\n }\n }\n\n //validating abbreviation symbol\n temp = val.match(/[^\\d]+$/);\n if (temp !== null) {\n val = val.slice(0, -1);\n if (temp[0] !== _abbrObj.thousand && temp[0] !== _abbrObj.million && temp[0] !== _abbrObj.billion && temp[0] !== _abbrObj.trillion) {\n return false;\n }\n }\n\n _thousandRegEx = new RegExp(_thousandSep + '{2}');\n\n if (!val.match(/[^\\d.,]/g)) {\n _valArray = val.split(_decimalSep);\n if (_valArray.length > 2) {\n return false;\n } else {\n if (_valArray.length < 2) {\n return ( !! _valArray[0].match(/^\\d+.*\\d$/) && !_valArray[0].match(_thousandRegEx));\n } else {\n if (_valArray[0].length === 1) {\n return ( !! _valArray[0].match(/^\\d+$/) && !_valArray[0].match(_thousandRegEx) && !! _valArray[1].match(/^\\d+$/));\n } else {\n return ( !! _valArray[0].match(/^\\d+.*\\d$/) && !_valArray[0].match(_thousandRegEx) && !! _valArray[1].match(/^\\d+$/));\n }\n }\n }\n }\n\n return false;\n };\n\n\n /************************************\n Numeral Prototype\n ************************************/\n\n numeral.fn = Numeral.prototype = {\n clone: function() {\n return numeral(this);\n },\n format: function(inputString, roundingFunction) {\n var value = this._value,\n format = inputString || options.defaultFormat,\n kind,\n output,\n formatFunction;\n\n // make sure we have a roundingFunction\n roundingFunction = roundingFunction || Math.round;\n\n // format based on value\n if (value === 0 && options.zeroFormat !== null) {\n output = options.zeroFormat;\n } else if (value === null && options.nullFormat !== null) {\n output = options.nullFormat;\n } else {\n for (kind in formats) {\n if (format.match(formats[kind].regexps.format)) {\n formatFunction = formats[kind].format;\n\n break;\n }\n }\n\n formatFunction = formatFunction || numeral._.numberToFormat;\n\n output = formatFunction(value, format, roundingFunction);\n }\n\n return output;\n },\n value: function() {\n return this._value;\n },\n input: function() {\n return this._input;\n },\n set: function(value) {\n this._value = Number(value);\n\n return this;\n },\n add: function(value) {\n var corrFactor = _.correctionFactor.call(null, this._value, value);\n\n function cback(accum, curr, currI, O) {\n return accum + Math.round(corrFactor * curr);\n }\n\n this._value = _.reduce([this._value, value], cback, 0) / corrFactor;\n\n return this;\n },\n subtract: function(value) {\n var corrFactor = _.correctionFactor.call(null, this._value, value);\n\n function cback(accum, curr, currI, O) {\n return accum - Math.round(corrFactor * curr);\n }\n\n this._value = _.reduce([value], cback, Math.round(this._value * corrFactor)) / corrFactor;\n\n return this;\n },\n multiply: function(value) {\n function cback(accum, curr, currI, O) {\n var corrFactor = _.correctionFactor(accum, curr);\n return Math.round(accum * corrFactor) * Math.round(curr * corrFactor) / Math.round(corrFactor * corrFactor);\n }\n\n this._value = _.reduce([this._value, value], cback, 1);\n\n return this;\n },\n divide: function(value) {\n function cback(accum, curr, currI, O) {\n var corrFactor = _.correctionFactor(accum, curr);\n return Math.round(accum * corrFactor) / Math.round(curr * corrFactor);\n }\n\n this._value = _.reduce([this._value, value], cback);\n\n return this;\n },\n difference: function(value) {\n return Math.abs(numeral(this._value).subtract(value).value());\n }\n };\n\n /************************************\n Default Locale && Format\n ************************************/\n\n numeral.register('locale', 'en', {\n delimiters: {\n thousands: ',',\n decimal: '.'\n },\n abbreviations: {\n thousand: 'k',\n million: 'm',\n billion: 'b',\n trillion: 't'\n },\n ordinal: function(number) {\n var b = number % 10;\n return (~~(number % 100 / 10) === 1) ? 'th' :\n (b === 1) ? 'st' :\n (b === 2) ? 'nd' :\n (b === 3) ? 'rd' : 'th';\n },\n currency: {\n symbol: '$'\n }\n });\n\n \n\n(function() {\n numeral.register('format', 'bps', {\n regexps: {\n format: /(BPS)/,\n unformat: /(BPS)/\n },\n format: function(value, format, roundingFunction) {\n var space = numeral._.includes(format, ' BPS') ? ' ' : '',\n output;\n\n value = value * 10000;\n\n // check for space before BPS\n format = format.replace(/\\s?BPS/, '');\n\n output = numeral._.numberToFormat(value, format, roundingFunction);\n\n if (numeral._.includes(output, ')')) {\n output = output.split('');\n\n output.splice(-1, 0, space + 'BPS');\n\n output = output.join('');\n } else {\n output = output + space + 'BPS';\n }\n\n return output;\n },\n unformat: function(string) {\n return +(numeral._.stringToNumber(string) * 0.0001).toFixed(15);\n }\n });\n})();\n\n\n(function() {\n var decimal = {\n base: 1000,\n suffixes: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']\n },\n binary = {\n base: 1024,\n suffixes: ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']\n };\n\n var allSuffixes = decimal.suffixes.concat(binary.suffixes.filter(function (item) {\n return decimal.suffixes.indexOf(item) < 0;\n }));\n var unformatRegex = allSuffixes.join('|');\n // Allow support for BPS (http://www.investopedia.com/terms/b/basispoint.asp)\n unformatRegex = '(' + unformatRegex.replace('B', 'B(?!PS)') + ')';\n\n numeral.register('format', 'bytes', {\n regexps: {\n format: /([0\\s]i?b)/,\n unformat: new RegExp(unformatRegex)\n },\n format: function(value, format, roundingFunction) {\n var output,\n bytes = numeral._.includes(format, 'ib') ? binary : decimal,\n suffix = numeral._.includes(format, ' b') || numeral._.includes(format, ' ib') ? ' ' : '',\n power,\n min,\n max;\n\n // check for space before\n format = format.replace(/\\s?i?b/, '');\n\n for (power = 0; power <= bytes.suffixes.length; power++) {\n min = Math.pow(bytes.base, power);\n max = Math.pow(bytes.base, power + 1);\n\n if (value === null || value === 0 || value >= min && value < max) {\n suffix += bytes.suffixes[power];\n\n if (min > 0) {\n value = value / min;\n }\n\n break;\n }\n }\n\n output = numeral._.numberToFormat(value, format, roundingFunction);\n\n return output + suffix;\n },\n unformat: function(string) {\n var value = numeral._.stringToNumber(string),\n power,\n bytesMultiplier;\n\n if (value) {\n for (power = decimal.suffixes.length - 1; power >= 0; power--) {\n if (numeral._.includes(string, decimal.suffixes[power])) {\n bytesMultiplier = Math.pow(decimal.base, power);\n\n break;\n }\n\n if (numeral._.includes(string, binary.suffixes[power])) {\n bytesMultiplier = Math.pow(binary.base, power);\n\n break;\n }\n }\n\n value *= (bytesMultiplier || 1);\n }\n\n return value;\n }\n });\n})();\n\n\n(function() {\n numeral.register('format', 'currency', {\n regexps: {\n format: /(\\$)/\n },\n format: function(value, format, roundingFunction) {\n var locale = numeral.locales[numeral.options.currentLocale],\n symbols = {\n before: format.match(/^([\\+|\\-|\\(|\\s|\\$]*)/)[0],\n after: format.match(/([\\+|\\-|\\)|\\s|\\$]*)$/)[0]\n },\n output,\n symbol,\n i;\n\n // strip format of spaces and $\n format = format.replace(/\\s?\\$\\s?/, '');\n\n // format the number\n output = numeral._.numberToFormat(value, format, roundingFunction);\n\n // update the before and after based on value\n if (value >= 0) {\n symbols.before = symbols.before.replace(/[\\-\\(]/, '');\n symbols.after = symbols.after.replace(/[\\-\\)]/, '');\n } else if (value < 0 && (!numeral._.includes(symbols.before, '-') && !numeral._.includes(symbols.before, '('))) {\n symbols.before = '-' + symbols.before;\n }\n\n // loop through each before symbol\n for (i = 0; i < symbols.before.length; i++) {\n symbol = symbols.before[i];\n\n switch (symbol) {\n case '$':\n output = numeral._.insert(output, locale.currency.symbol, i);\n break;\n case ' ':\n output = numeral._.insert(output, ' ', i + locale.currency.symbol.length - 1);\n break;\n }\n }\n\n // loop through each after symbol\n for (i = symbols.after.length - 1; i >= 0; i--) {\n symbol = symbols.after[i];\n\n switch (symbol) {\n case '$':\n output = i === symbols.after.length - 1 ? output + locale.currency.symbol : numeral._.insert(output, locale.currency.symbol, -(symbols.after.length - (1 + i)));\n break;\n case ' ':\n output = i === symbols.after.length - 1 ? output + ' ' : numeral._.insert(output, ' ', -(symbols.after.length - (1 + i) + locale.currency.symbol.length - 1));\n break;\n }\n }\n\n\n return output;\n }\n });\n})();\n\n\n(function() {\n numeral.register('format', 'exponential', {\n regexps: {\n format: /(e\\+|e-)/,\n unformat: /(e\\+|e-)/\n },\n format: function(value, format, roundingFunction) {\n var output,\n exponential = typeof value === 'number' && !numeral._.isNaN(value) ? value.toExponential() : '0e+0',\n parts = exponential.split('e');\n\n format = format.replace(/e[\\+|\\-]{1}0/, '');\n\n output = numeral._.numberToFormat(Number(parts[0]), format, roundingFunction);\n\n return output + 'e' + parts[1];\n },\n unformat: function(string) {\n var parts = numeral._.includes(string, 'e+') ? string.split('e+') : string.split('e-'),\n value = Number(parts[0]),\n power = Number(parts[1]);\n\n power = numeral._.includes(string, 'e-') ? power *= -1 : power;\n\n function cback(accum, curr, currI, O) {\n var corrFactor = numeral._.correctionFactor(accum, curr),\n num = (accum * corrFactor) * (curr * corrFactor) / (corrFactor * corrFactor);\n return num;\n }\n\n return numeral._.reduce([value, Math.pow(10, power)], cback, 1);\n }\n });\n})();\n\n\n(function() {\n numeral.register('format', 'ordinal', {\n regexps: {\n format: /(o)/\n },\n format: function(value, format, roundingFunction) {\n var locale = numeral.locales[numeral.options.currentLocale],\n output,\n ordinal = numeral._.includes(format, ' o') ? ' ' : '';\n\n // check for space before\n format = format.replace(/\\s?o/, '');\n\n ordinal += locale.ordinal(value);\n\n output = numeral._.numberToFormat(value, format, roundingFunction);\n\n return output + ordinal;\n }\n });\n})();\n\n\n(function() {\n numeral.register('format', 'percentage', {\n regexps: {\n format: /(%)/,\n unformat: /(%)/\n },\n format: function(value, format, roundingFunction) {\n var space = numeral._.includes(format, ' %') ? ' ' : '',\n output;\n\n if (numeral.options.scalePercentBy100) {\n value = value * 100;\n }\n\n // check for space before %\n format = format.replace(/\\s?\\%/, '');\n\n output = numeral._.numberToFormat(value, format, roundingFunction);\n\n if (numeral._.includes(output, ')')) {\n output = output.split('');\n\n output.splice(-1, 0, space + '%');\n\n output = output.join('');\n } else {\n output = output + space + '%';\n }\n\n return output;\n },\n unformat: function(string) {\n var number = numeral._.stringToNumber(string);\n if (numeral.options.scalePercentBy100) {\n return number * 0.01;\n }\n return number;\n }\n });\n})();\n\n\n(function() {\n numeral.register('format', 'time', {\n regexps: {\n format: /(:)/,\n unformat: /(:)/\n },\n format: function(value, format, roundingFunction) {\n var hours = Math.floor(value / 60 / 60),\n minutes = Math.floor((value - (hours * 60 * 60)) / 60),\n seconds = Math.round(value - (hours * 60 * 60) - (minutes * 60));\n\n return hours + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);\n },\n unformat: function(string) {\n var timeArray = string.split(':'),\n seconds = 0;\n\n // turn hours and minutes into seconds and add them all up\n if (timeArray.length === 3) {\n // hours\n seconds = seconds + (Number(timeArray[0]) * 60 * 60);\n // minutes\n seconds = seconds + (Number(timeArray[1]) * 60);\n // seconds\n seconds = seconds + Number(timeArray[2]);\n } else if (timeArray.length === 2) {\n // minutes\n seconds = seconds + (Number(timeArray[0]) * 60);\n // seconds\n seconds = seconds + Number(timeArray[1]);\n }\n return Number(seconds);\n }\n });\n})();\n\nreturn numeral;\n}));\n","/*\n * @license\n * Copyright 2019 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/pfelement.js\";\nimport numeral from \"numeral\";\n\n// easy aliases for common format strings\nconst types = {\n abbrev: \"0a\", // or 'approx'?\n ordinal: \"0o\",\n percent: \"0%\",\n bytes: \"0[.][00] ib\",\n e: \"0[.00]e+0\",\n thousands: \"0,0[.][00]\"\n};\n\n// use thin spaces to separate thousands chunks\n// debugger;\nnumeral.locales.en.delimiters.thousands = \" \";\n\nclass PfeNumber extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-number\";\n }\n\n get styleUrl() {\n return \"pfe-number.scss\";\n }\n\n get templateUrl() {\n return \"pfe-number.html\";\n }\n\n static get observedAttributes() {\n return [\"number\", \"format\", \"type\"];\n }\n\n constructor() {\n super(PfeNumber);\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.connected = true;\n\n this._determineFormat();\n this._setInitialNumber();\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n super.attributeChangedCallback(...arguments);\n switch (attr) {\n case \"type\":\n this._determineFormat();\n break;\n case \"format\":\n this._updateNumber(this.getAttribute(\"number\"), newVal);\n break;\n case \"number\":\n this._updateNumber(newVal, this.getAttribute(\"format\"));\n }\n }\n\n _setInitialNumber() {\n const numberAttrDefined = !Number.isNaN(\n parseFloat(this.getAttribute(\"number\"))\n );\n const numberContentDefined = !Number.isNaN(parseFloat(this.textContent));\n\n if (numberAttrDefined) {\n this.setAttribute(\"number\", this.getAttribute(\"number\"));\n } else if (numberContentDefined) {\n this.setAttribute(\"number\", this.textContent);\n }\n }\n\n _determineFormat() {\n let type = this.getAttribute(\"type\");\n\n if (type && types[type]) {\n this.setAttribute(\"format\", types[type]);\n } else {\n this.setAttribute(\"format\", this.getAttribute(\"format\") || \"0\");\n }\n }\n\n _updateNumber(num, type) {\n this.shadowRoot.querySelector(\"span\").textContent = this._format(num, type);\n }\n\n _format(num, type) {\n return numeral(num).format(type);\n }\n}\n\nPFElement.create(PfeNumber);\n"],"names":["this"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-number/pfe-number.min.css b/elements/pfe-number/pfe-number.min.css new file mode 100644 index 0000000000..5d3c17d7d3 --- /dev/null +++ b/elements/pfe-number/pfe-number.min.css @@ -0,0 +1 @@ +:host{display:inline;white-space:nowrap} \ No newline at end of file diff --git a/elements/pfe-number/pfe-number.min.js b/elements/pfe-number/pfe-number.min.js new file mode 100644 index 0000000000..f42a999588 --- /dev/null +++ b/elements/pfe-number/pfe-number.min.js @@ -0,0 +1,32 @@ +import e from"../pfelement/pfelement.min.js";var t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};var r,n=(function(e){ +/*! @preserve + * numeral.js + * version : 2.0.6 + * author : Adam Draper + * license : MIT + * http://adamwdraper.github.com/Numeral-js/ + */var r,n;r=t,n=function(){var e,t,r,n,i,a={},o={},l={currentLocale:"en",zeroFormat:null,nullFormat:null,defaultFormat:"0,0",scalePercentBy100:!0},u={currentLocale:l.currentLocale,zeroFormat:l.zeroFormat,nullFormat:l.nullFormat,defaultFormat:l.defaultFormat,scalePercentBy100:l.scalePercentBy100};function s(e,t){this._input=e,this._value=t}return(e=function(r){var n,i,o,l;if(e.isNumeral(r))n=r.value();else if(0===r||void 0===r)n=0;else if(null===r||t.isNaN(r))n=null;else if("string"==typeof r)if(u.zeroFormat&&r===u.zeroFormat)n=0;else if(u.nullFormat&&r===u.nullFormat||!r.replace(/[^0-9]+/g,"").length)n=null;else{for(i in a)if((l="function"==typeof a[i].regexps.unformat?a[i].regexps.unformat():a[i].regexps.unformat)&&r.match(l)){o=a[i].unformat;break}n=(o=o||e._.stringToNumber)(r)}else n=Number(r)||null;return new s(r,n)}).version="2.0.6",e.isNumeral=function(e){return e instanceof s},e._=t={numberToFormat:function(t,r,n){var i,a,l,u,s,c,f,m,b=o[e.options.currentLocale],h=!1,d=!1,p="",g="",_=!1;if(t=t||0,l=Math.abs(t),e._.includes(r,"(")?(h=!0,r=r.replace(/[\(|\)]/g,"")):(e._.includes(r,"+")||e._.includes(r,"-"))&&(c=e._.includes(r,"+")?r.indexOf("+"):t<0?r.indexOf("-"):-1,r=r.replace(/[\+|\-]/g,"")),e._.includes(r,"a")&&(a=!!(a=r.match(/a(k|m|b|t)?/))&&a[1],e._.includes(r," a")&&(p=" "),r=r.replace(new RegExp(p+"a[kmbt]?"),""),l>=1e12&&!a||"t"===a?(p+=b.abbreviations.trillion,t/=1e12):l<1e12&&l>=1e9&&!a||"b"===a?(p+=b.abbreviations.billion,t/=1e9):l<1e9&&l>=1e6&&!a||"m"===a?(p+=b.abbreviations.million,t/=1e6):(l<1e6&&l>=1e3&&!a||"k"===a)&&(p+=b.abbreviations.thousand,t/=1e3)),e._.includes(r,"[.]")&&(d=!0,r=r.replace("[.]",".")),u=t.toString().split(".")[0],s=r.split(".")[1],f=r.indexOf(","),i=(r.split(".")[0].split(",")[0].match(/0/g)||[]).length,s?(e._.includes(s,"[")?(s=(s=s.replace("]","")).split("["),g=e._.toFixed(t,s[0].length+s[1].length,n,s[1].length)):g=e._.toFixed(t,s.length,n),u=g.split(".")[0],g=e._.includes(g,".")?b.delimiters.decimal+g.split(".")[1]:"",d&&0===Number(g.slice(1))&&(g="")):u=e._.toFixed(t,0,n),p&&!a&&Number(u)>=1e3&&p!==b.abbreviations.trillion)switch(u=String(Number(u)/1e3),p){case b.abbreviations.thousand:p=b.abbreviations.million;break;case b.abbreviations.million:p=b.abbreviations.billion;break;case b.abbreviations.billion:p=b.abbreviations.trillion}if(e._.includes(u,"-")&&(u=u.slice(1),_=!0),u.length0;v--)u="0"+u;return f>-1&&(u=u.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g,"$1"+b.delimiters.thousands)),0===r.indexOf(".")&&(u=""),m=u+g+(p||""),h?m=(h&&_?"(":"")+m+(h&&_?")":""):c>=0?m=0===c?(_?"-":"+")+m:m+(_?"-":"+"):_&&(m="-"+m),m},stringToNumber:function(e){var t,r,n,i=o[u.currentLocale],a=e,l={thousand:3,million:6,billion:9,trillion:12};if(u.zeroFormat&&e===u.zeroFormat)r=0;else if(u.nullFormat&&e===u.nullFormat||!e.replace(/[^0-9]+/g,"").length)r=null;else{for(t in r=1,"."!==i.delimiters.decimal&&(e=e.replace(/\./g,"").replace(i.delimiters.decimal,".")),l)if(n=new RegExp("[^a-zA-Z]"+i.abbreviations[t]+"(?:\\)|(\\"+i.currency.symbol+")?(?:\\))?)?$"),a.match(n)){r*=Math.pow(10,l[t]);break}r*=(e.split("-").length+Math.min(e.split("(").length-1,e.split(")").length-1))%2?1:-1,e=e.replace(/[^0-9\.]+/g,""),r*=Number(e)}return r},isNaN:function(e){return"number"==typeof e&&isNaN(e)},includes:function(e,t){return-1!==e.indexOf(t)},insert:function(e,t,r){return e.slice(0,r)+t+e.slice(r)},reduce:function(e,t){if(null===this)throw new TypeError("Array.prototype.reduce called on null or undefined");if("function"!=typeof t)throw new TypeError(t+" is not a function");var r,n=Object(e),i=n.length>>>0,a=0;if(3===arguments.length)r=arguments[2];else{for(;a=i)throw new TypeError("Reduce of empty array with no initial value");r=n[a++]}for(;an?e:n},1)},toFixed:function(e,t,r,n){var i,a,o,l,u=e.toString().split("."),s=t-(n||0);return i=2===u.length?Math.min(Math.max(u[1].length,s),t):s,o=Math.pow(10,i),l=(r(e+"e+"+i)/o).toFixed(i),n>t-i&&(a=new RegExp("\\.?0{1,"+(n-(t-i))+"}$"),l=l.replace(a,"")),l}},e.options=u,e.formats=a,e.locales=o,e.locale=function(e){return e&&(u.currentLocale=e.toLowerCase()),u.currentLocale},e.localeData=function(e){if(!e)return o[u.currentLocale];if(e=e.toLowerCase(),!o[e])throw new Error("Unknown locale : "+e);return o[e]},e.reset=function(){for(var e in l)u[e]=l[e]},e.zeroFormat=function(e){u.zeroFormat="string"==typeof e?e:null},e.nullFormat=function(e){u.nullFormat="string"==typeof e?e:null},e.defaultFormat=function(e){u.defaultFormat="string"==typeof e?e:"0.0"},e.register=function(e,t,r){if(t=t.toLowerCase(),this[e+"s"][t])throw new TypeError(t+" "+e+" already registered.");return this[e+"s"][t]=r,r},e.validate=function(t,r){var n,i,a,o,l,u,s,c;if("string"!=typeof t&&(t+="",console.warn&&console.warn("Numeral.js: Value is not string. It has been co-erced to: ",t)),(t=t.trim()).match(/^\d+$/))return!0;if(""===t)return!1;try{s=e.localeData(r)}catch(t){s=e.localeData(e.locale())}return a=s.currency.symbol,l=s.abbreviations,n=s.delimiters.decimal,i="."===s.delimiters.thousands?"\\.":s.delimiters.thousands,(null===(c=t.match(/^[^\d]+/))||(t=t.substr(1),c[0]===a))&&((null===(c=t.match(/[^\d]+$/))||(t=t.slice(0,-1),c[0]===l.thousand||c[0]===l.million||c[0]===l.billion||c[0]===l.trillion))&&(u=new RegExp(i+"{2}"),!t.match(/[^\d.,]/g)&&(!((o=t.split(n)).length>2)&&(o.length<2?!!o[0].match(/^\d+.*\d$/)&&!o[0].match(u):1===o[0].length?!!o[0].match(/^\d+$/)&&!o[0].match(u)&&!!o[1].match(/^\d+$/):!!o[0].match(/^\d+.*\d$/)&&!o[0].match(u)&&!!o[1].match(/^\d+$/)))))},e.fn=s.prototype={clone:function(){return e(this)},format:function(t,r){var n,i,o,l=this._value,s=t||u.defaultFormat;if(r=r||Math.round,0===l&&null!==u.zeroFormat)i=u.zeroFormat;else if(null===l&&null!==u.nullFormat)i=u.nullFormat;else{for(n in a)if(s.match(a[n].regexps.format)){o=a[n].format;break}i=(o=o||e._.numberToFormat)(l,s,r)}return i},value:function(){return this._value},input:function(){return this._input},set:function(e){return this._value=Number(e),this},add:function(e){var r=t.correctionFactor.call(null,this._value,e);return this._value=t.reduce([this._value,e],function(e,t,n,i){return e+Math.round(r*t)},0)/r,this},subtract:function(e){var r=t.correctionFactor.call(null,this._value,e);return this._value=t.reduce([e],function(e,t,n,i){return e-Math.round(r*t)},Math.round(this._value*r))/r,this},multiply:function(e){return this._value=t.reduce([this._value,e],function(e,r,n,i){var a=t.correctionFactor(e,r);return Math.round(e*a)*Math.round(r*a)/Math.round(a*a)},1),this},divide:function(e){return this._value=t.reduce([this._value,e],function(e,r,n,i){var a=t.correctionFactor(e,r);return Math.round(e*a)/Math.round(r*a)}),this},difference:function(t){return Math.abs(e(this._value).subtract(t).value())}},e.register("locale","en",{delimiters:{thousands:",",decimal:"."},abbreviations:{thousand:"k",million:"m",billion:"b",trillion:"t"},ordinal:function(e){var t=e%10;return 1==~~(e%100/10)?"th":1===t?"st":2===t?"nd":3===t?"rd":"th"},currency:{symbol:"$"}}),e.register("format","bps",{regexps:{format:/(BPS)/,unformat:/(BPS)/},format:function(t,r,n){var i,a=e._.includes(r," BPS")?" ":"";return t*=1e4,r=r.replace(/\s?BPS/,""),i=e._.numberToFormat(t,r,n),e._.includes(i,")")?((i=i.split("")).splice(-1,0,a+"BPS"),i=i.join("")):i=i+a+"BPS",i},unformat:function(t){return+(1e-4*e._.stringToNumber(t)).toFixed(15)}}),n={base:1024,suffixes:["B","KiB","MiB","GiB","TiB","PiB","EiB","ZiB","YiB"]},i="("+(i=(r={base:1e3,suffixes:["B","KB","MB","GB","TB","PB","EB","ZB","YB"]}).suffixes.concat(n.suffixes.filter(function(e){return r.suffixes.indexOf(e)<0})).join("|")).replace("B","B(?!PS)")+")",e.register("format","bytes",{regexps:{format:/([0\s]i?b)/,unformat:new RegExp(i)},format:function(t,i,a){var o,l,u,s=e._.includes(i,"ib")?n:r,c=e._.includes(i," b")||e._.includes(i," ib")?" ":"";for(i=i.replace(/\s?i?b/,""),o=0;o<=s.suffixes.length;o++)if(l=Math.pow(s.base,o),u=Math.pow(s.base,o+1),null===t||0===t||t>=l&&t0&&(t/=l);break}return e._.numberToFormat(t,i,a)+c},unformat:function(t){var i,a,o=e._.stringToNumber(t);if(o){for(i=r.suffixes.length-1;i>=0;i--){if(e._.includes(t,r.suffixes[i])){a=Math.pow(r.base,i);break}if(e._.includes(t,n.suffixes[i])){a=Math.pow(n.base,i);break}}o*=a||1}return o}}),e.register("format","currency",{regexps:{format:/(\$)/},format:function(t,r,n){var i,a,o=e.locales[e.options.currentLocale],l={before:r.match(/^([\+|\-|\(|\s|\$]*)/)[0],after:r.match(/([\+|\-|\)|\s|\$]*)$/)[0]};for(r=r.replace(/\s?\$\s?/,""),i=e._.numberToFormat(t,r,n),t>=0?(l.before=l.before.replace(/[\-\(]/,""),l.after=l.after.replace(/[\-\)]/,"")):t<0&&!e._.includes(l.before,"-")&&!e._.includes(l.before,"(")&&(l.before="-"+l.before),a=0;a=0;a--)switch(l.after[a]){case"$":i=a===l.after.length-1?i+o.currency.symbol:e._.insert(i,o.currency.symbol,-(l.after.length-(1+a)));break;case" ":i=a===l.after.length-1?i+" ":e._.insert(i," ",-(l.after.length-(1+a)+o.currency.symbol.length-1))}return i}}),e.register("format","exponential",{regexps:{format:/(e\+|e-)/,unformat:/(e\+|e-)/},format:function(t,r,n){var i=("number"!=typeof t||e._.isNaN(t)?"0e+0":t.toExponential()).split("e");return r=r.replace(/e[\+|\-]{1}0/,""),e._.numberToFormat(Number(i[0]),r,n)+"e"+i[1]},unformat:function(t){var r=e._.includes(t,"e+")?t.split("e+"):t.split("e-"),n=Number(r[0]),i=Number(r[1]);return i=e._.includes(t,"e-")?i*=-1:i,e._.reduce([n,Math.pow(10,i)],function(t,r,n,i){var a=e._.correctionFactor(t,r);return t*a*(r*a)/(a*a)},1)}}),e.register("format","ordinal",{regexps:{format:/(o)/},format:function(t,r,n){var i=e.locales[e.options.currentLocale],a=e._.includes(r," o")?" ":"";return r=r.replace(/\s?o/,""),a+=i.ordinal(t),e._.numberToFormat(t,r,n)+a}}),e.register("format","percentage",{regexps:{format:/(%)/,unformat:/(%)/},format:function(t,r,n){var i,a=e._.includes(r," %")?" ":"";return e.options.scalePercentBy100&&(t*=100),r=r.replace(/\s?\%/,""),i=e._.numberToFormat(t,r,n),e._.includes(i,")")?((i=i.split("")).splice(-1,0,a+"%"),i=i.join("")):i=i+a+"%",i},unformat:function(t){var r=e._.stringToNumber(t);return e.options.scalePercentBy100?.01*r:r}}),e.register("format","time",{regexps:{format:/(:)/,unformat:/(:)/},format:function(e,t,r){var n=Math.floor(e/60/60),i=Math.floor((e-60*n*60)/60),a=Math.round(e-60*n*60-60*i);return n+":"+(i<10?"0"+i:i)+":"+(a<10?"0"+a:a)},unformat:function(e){var t=e.split(":"),r=0;return 3===t.length?(r+=60*Number(t[0])*60,r+=60*Number(t[1]),r+=Number(t[2])):2===t.length&&(r+=60*Number(t[0]),r+=Number(t[1])),Number(r)}}),e},e.exports?e.exports=n():r.numeral=n()}(r={exports:{}},r.exports),r.exports); +/* + * @license + * Copyright 2019 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 i={abbrev:"0a",ordinal:"0o",percent:"0%",bytes:"0[.][00] ib",e:"0[.00]e+0",thousands:"0,0[.][00]"};n.locales.en.delimiters.thousands=" ";class a extends e{get html(){return""}static get tag(){return"pfe-number"}get styleUrl(){return"pfe-number.scss"}get templateUrl(){return"pfe-number.html"}static get observedAttributes(){return["number","format","type"]}constructor(){super(a)}connectedCallback(){super.connectedCallback(),this.connected=!0,this._determineFormat(),this._setInitialNumber()}attributeChangedCallback(e,t,r){switch(super.attributeChangedCallback(...arguments),e){case"type":this._determineFormat();break;case"format":this._updateNumber(this.getAttribute("number"),r);break;case"number":this._updateNumber(r,this.getAttribute("format"))}}_setInitialNumber(){const e=!Number.isNaN(parseFloat(this.getAttribute("number"))),t=!Number.isNaN(parseFloat(this.textContent));e?this.setAttribute("number",this.getAttribute("number")):t&&this.setAttribute("number",this.textContent)}_determineFormat(){let e=this.getAttribute("type");e&&i[e]?this.setAttribute("format",i[e]):this.setAttribute("format",this.getAttribute("format")||"0")}_updateNumber(e,t){this.shadowRoot.querySelector("span").textContent=this._format(e,t)}_format(e,t){return n(e).format(t)}}e.create(a); +//# sourceMappingURL=pfe-number.min.js.map diff --git a/elements/pfe-number/pfe-number.min.js.map b/elements/pfe-number/pfe-number.min.js.map new file mode 100644 index 0000000000..3104b6ba09 --- /dev/null +++ b/elements/pfe-number/pfe-number.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-number.min.js","sources":["pfe-number.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\nvar commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};\n\nfunction createCommonjsModule(fn, module) {\n\treturn module = { exports: {} }, fn(module, module.exports), module.exports;\n}\n\nvar numeral = createCommonjsModule(function (module) {\n/*! @preserve\n * numeral.js\n * version : 2.0.6\n * author : Adam Draper\n * license : MIT\n * http://adamwdraper.github.com/Numeral-js/\n */\n\n(function (global, factory) {\n if (module.exports) {\n module.exports = factory();\n } else {\n global.numeral = factory();\n }\n}(commonjsGlobal, function () {\n /************************************\n Variables\n ************************************/\n\n var numeral,\n _,\n VERSION = '2.0.6',\n formats = {},\n locales = {},\n defaults = {\n currentLocale: 'en',\n zeroFormat: null,\n nullFormat: null,\n defaultFormat: '0,0',\n scalePercentBy100: true\n },\n options = {\n currentLocale: defaults.currentLocale,\n zeroFormat: defaults.zeroFormat,\n nullFormat: defaults.nullFormat,\n defaultFormat: defaults.defaultFormat,\n scalePercentBy100: defaults.scalePercentBy100\n };\n\n\n /************************************\n Constructors\n ************************************/\n\n // Numeral prototype object\n function Numeral(input, number) {\n this._input = input;\n\n this._value = number;\n }\n\n numeral = function(input) {\n var value,\n kind,\n unformatFunction,\n regexp;\n\n if (numeral.isNumeral(input)) {\n value = input.value();\n } else if (input === 0 || typeof input === 'undefined') {\n value = 0;\n } else if (input === null || _.isNaN(input)) {\n value = null;\n } else if (typeof input === 'string') {\n if (options.zeroFormat && input === options.zeroFormat) {\n value = 0;\n } else if (options.nullFormat && input === options.nullFormat || !input.replace(/[^0-9]+/g, '').length) {\n value = null;\n } else {\n for (kind in formats) {\n regexp = typeof formats[kind].regexps.unformat === 'function' ? formats[kind].regexps.unformat() : formats[kind].regexps.unformat;\n\n if (regexp && input.match(regexp)) {\n unformatFunction = formats[kind].unformat;\n\n break;\n }\n }\n\n unformatFunction = unformatFunction || numeral._.stringToNumber;\n\n value = unformatFunction(input);\n }\n } else {\n value = Number(input)|| null;\n }\n\n return new Numeral(input, value);\n };\n\n // version number\n numeral.version = VERSION;\n\n // compare numeral object\n numeral.isNumeral = function(obj) {\n return obj instanceof Numeral;\n };\n\n // helper functions\n numeral._ = _ = {\n // formats numbers separators, decimals places, signs, abbreviations\n numberToFormat: function(value, format, roundingFunction) {\n var locale = locales[numeral.options.currentLocale],\n negP = false,\n optDec = false,\n leadingCount = 0,\n abbr = '',\n trillion = 1000000000000,\n billion = 1000000000,\n million = 1000000,\n thousand = 1000,\n decimal = '',\n neg = false,\n abbrForce, // force abbreviation\n abs,\n int,\n precision,\n signed,\n thousands,\n output;\n\n // make sure we never format a null value\n value = value || 0;\n\n abs = Math.abs(value);\n\n // see if we should use parentheses for negative number or if we should prefix with a sign\n // if both are present we default to parentheses\n if (numeral._.includes(format, '(')) {\n negP = true;\n format = format.replace(/[\\(|\\)]/g, '');\n } else if (numeral._.includes(format, '+') || numeral._.includes(format, '-')) {\n signed = numeral._.includes(format, '+') ? format.indexOf('+') : value < 0 ? format.indexOf('-') : -1;\n format = format.replace(/[\\+|\\-]/g, '');\n }\n\n // see if abbreviation is wanted\n if (numeral._.includes(format, 'a')) {\n abbrForce = format.match(/a(k|m|b|t)?/);\n\n abbrForce = abbrForce ? abbrForce[1] : false;\n\n // check for space before abbreviation\n if (numeral._.includes(format, ' a')) {\n abbr = ' ';\n }\n\n format = format.replace(new RegExp(abbr + 'a[kmbt]?'), '');\n\n if (abs >= trillion && !abbrForce || abbrForce === 't') {\n // trillion\n abbr += locale.abbreviations.trillion;\n value = value / trillion;\n } else if (abs < trillion && abs >= billion && !abbrForce || abbrForce === 'b') {\n // billion\n abbr += locale.abbreviations.billion;\n value = value / billion;\n } else if (abs < billion && abs >= million && !abbrForce || abbrForce === 'm') {\n // million\n abbr += locale.abbreviations.million;\n value = value / million;\n } else if (abs < million && abs >= thousand && !abbrForce || abbrForce === 'k') {\n // thousand\n abbr += locale.abbreviations.thousand;\n value = value / thousand;\n }\n }\n\n // check for optional decimals\n if (numeral._.includes(format, '[.]')) {\n optDec = true;\n format = format.replace('[.]', '.');\n }\n\n // break number and format\n int = value.toString().split('.')[0];\n precision = format.split('.')[1];\n thousands = format.indexOf(',');\n leadingCount = (format.split('.')[0].split(',')[0].match(/0/g) || []).length;\n\n if (precision) {\n if (numeral._.includes(precision, '[')) {\n precision = precision.replace(']', '');\n precision = precision.split('[');\n decimal = numeral._.toFixed(value, (precision[0].length + precision[1].length), roundingFunction, precision[1].length);\n } else {\n decimal = numeral._.toFixed(value, precision.length, roundingFunction);\n }\n\n int = decimal.split('.')[0];\n\n if (numeral._.includes(decimal, '.')) {\n decimal = locale.delimiters.decimal + decimal.split('.')[1];\n } else {\n decimal = '';\n }\n\n if (optDec && Number(decimal.slice(1)) === 0) {\n decimal = '';\n }\n } else {\n int = numeral._.toFixed(value, 0, roundingFunction);\n }\n\n // check abbreviation again after rounding\n if (abbr && !abbrForce && Number(int) >= 1000 && abbr !== locale.abbreviations.trillion) {\n int = String(Number(int) / 1000);\n\n switch (abbr) {\n case locale.abbreviations.thousand:\n abbr = locale.abbreviations.million;\n break;\n case locale.abbreviations.million:\n abbr = locale.abbreviations.billion;\n break;\n case locale.abbreviations.billion:\n abbr = locale.abbreviations.trillion;\n break;\n }\n }\n\n\n // format number\n if (numeral._.includes(int, '-')) {\n int = int.slice(1);\n neg = true;\n }\n\n if (int.length < leadingCount) {\n for (var i = leadingCount - int.length; i > 0; i--) {\n int = '0' + int;\n }\n }\n\n if (thousands > -1) {\n int = int.toString().replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1' + locale.delimiters.thousands);\n }\n\n if (format.indexOf('.') === 0) {\n int = '';\n }\n\n output = int + decimal + (abbr ? abbr : '');\n\n if (negP) {\n output = (negP && neg ? '(' : '') + output + (negP && neg ? ')' : '');\n } else {\n if (signed >= 0) {\n output = signed === 0 ? (neg ? '-' : '+') + output : output + (neg ? '-' : '+');\n } else if (neg) {\n output = '-' + output;\n }\n }\n\n return output;\n },\n // unformats numbers separators, decimals places, signs, abbreviations\n stringToNumber: function(string) {\n var locale = locales[options.currentLocale],\n stringOriginal = string,\n abbreviations = {\n thousand: 3,\n million: 6,\n billion: 9,\n trillion: 12\n },\n abbreviation,\n value,\n regexp;\n\n if (options.zeroFormat && string === options.zeroFormat) {\n value = 0;\n } else if (options.nullFormat && string === options.nullFormat || !string.replace(/[^0-9]+/g, '').length) {\n value = null;\n } else {\n value = 1;\n\n if (locale.delimiters.decimal !== '.') {\n string = string.replace(/\\./g, '').replace(locale.delimiters.decimal, '.');\n }\n\n for (abbreviation in abbreviations) {\n regexp = new RegExp('[^a-zA-Z]' + locale.abbreviations[abbreviation] + '(?:\\\\)|(\\\\' + locale.currency.symbol + ')?(?:\\\\))?)?$');\n\n if (stringOriginal.match(regexp)) {\n value *= Math.pow(10, abbreviations[abbreviation]);\n break;\n }\n }\n\n // check for negative number\n value *= (string.split('-').length + Math.min(string.split('(').length - 1, string.split(')').length - 1)) % 2 ? 1 : -1;\n\n // remove non numbers\n string = string.replace(/[^0-9\\.]+/g, '');\n\n value *= Number(string);\n }\n\n return value;\n },\n isNaN: function(value) {\n return typeof value === 'number' && isNaN(value);\n },\n includes: function(string, search) {\n return string.indexOf(search) !== -1;\n },\n insert: function(string, subString, start) {\n return string.slice(0, start) + subString + string.slice(start);\n },\n reduce: function(array, callback /*, initialValue*/) {\n if (this === null) {\n throw new TypeError('Array.prototype.reduce called on null or undefined');\n }\n\n if (typeof callback !== 'function') {\n throw new TypeError(callback + ' is not a function');\n }\n\n var t = Object(array),\n len = t.length >>> 0,\n k = 0,\n value;\n\n if (arguments.length === 3) {\n value = arguments[2];\n } else {\n while (k < len && !(k in t)) {\n k++;\n }\n\n if (k >= len) {\n throw new TypeError('Reduce of empty array with no initial value');\n }\n\n value = t[k++];\n }\n for (; k < len; k++) {\n if (k in t) {\n value = callback(value, t[k], k, t);\n }\n }\n return value;\n },\n /**\n * Computes the multiplier necessary to make x >= 1,\n * effectively eliminating miscalculations caused by\n * finite precision.\n */\n multiplier: function (x) {\n var parts = x.toString().split('.');\n\n return parts.length < 2 ? 1 : Math.pow(10, parts[1].length);\n },\n /**\n * Given a variable number of arguments, returns the maximum\n * multiplier that must be used to normalize an operation involving\n * all of them.\n */\n correctionFactor: function () {\n var args = Array.prototype.slice.call(arguments);\n\n return args.reduce(function(accum, next) {\n var mn = _.multiplier(next);\n return accum > mn ? accum : mn;\n }, 1);\n },\n /**\n * Implementation of toFixed() that treats floats more like decimals\n *\n * Fixes binary rounding issues (eg. (0.615).toFixed(2) === '0.61') that present\n * problems for accounting- and finance-related software.\n */\n toFixed: function(value, maxDecimals, roundingFunction, optionals) {\n var splitValue = value.toString().split('.'),\n minDecimals = maxDecimals - (optionals || 0),\n boundedPrecision,\n optionalsRegExp,\n power,\n output;\n\n // Use the smallest precision value possible to avoid errors from floating point representation\n if (splitValue.length === 2) {\n boundedPrecision = Math.min(Math.max(splitValue[1].length, minDecimals), maxDecimals);\n } else {\n boundedPrecision = minDecimals;\n }\n\n power = Math.pow(10, boundedPrecision);\n\n // Multiply up by precision, round accurately, then divide and use native toFixed():\n output = (roundingFunction(value + 'e+' + boundedPrecision) / power).toFixed(boundedPrecision);\n\n if (optionals > maxDecimals - boundedPrecision) {\n optionalsRegExp = new RegExp('\\\\.?0{1,' + (optionals - (maxDecimals - boundedPrecision)) + '}$');\n output = output.replace(optionalsRegExp, '');\n }\n\n return output;\n }\n };\n\n // avaliable options\n numeral.options = options;\n\n // avaliable formats\n numeral.formats = formats;\n\n // avaliable formats\n numeral.locales = locales;\n\n // This function sets the current locale. If\n // no arguments are passed in, it will simply return the current global\n // locale key.\n numeral.locale = function(key) {\n if (key) {\n options.currentLocale = key.toLowerCase();\n }\n\n return options.currentLocale;\n };\n\n // This function provides access to the loaded locale data. If\n // no arguments are passed in, it will simply return the current\n // global locale object.\n numeral.localeData = function(key) {\n if (!key) {\n return locales[options.currentLocale];\n }\n\n key = key.toLowerCase();\n\n if (!locales[key]) {\n throw new Error('Unknown locale : ' + key);\n }\n\n return locales[key];\n };\n\n numeral.reset = function() {\n for (var property in defaults) {\n options[property] = defaults[property];\n }\n };\n\n numeral.zeroFormat = function(format) {\n options.zeroFormat = typeof(format) === 'string' ? format : null;\n };\n\n numeral.nullFormat = function (format) {\n options.nullFormat = typeof(format) === 'string' ? format : null;\n };\n\n numeral.defaultFormat = function(format) {\n options.defaultFormat = typeof(format) === 'string' ? format : '0.0';\n };\n\n numeral.register = function(type, name, format) {\n name = name.toLowerCase();\n\n if (this[type + 's'][name]) {\n throw new TypeError(name + ' ' + type + ' already registered.');\n }\n\n this[type + 's'][name] = format;\n\n return format;\n };\n\n\n numeral.validate = function(val, culture) {\n var _decimalSep,\n _thousandSep,\n _currSymbol,\n _valArray,\n _abbrObj,\n _thousandRegEx,\n localeData,\n temp;\n\n //coerce val to string\n if (typeof val !== 'string') {\n val += '';\n\n if (console.warn) {\n console.warn('Numeral.js: Value is not string. It has been co-erced to: ', val);\n }\n }\n\n //trim whitespaces from either sides\n val = val.trim();\n\n //if val is just digits return true\n if (!!val.match(/^\\d+$/)) {\n return true;\n }\n\n //if val is empty return false\n if (val === '') {\n return false;\n }\n\n //get the decimal and thousands separator from numeral.localeData\n try {\n //check if the culture is understood by numeral. if not, default it to current locale\n localeData = numeral.localeData(culture);\n } catch (e) {\n localeData = numeral.localeData(numeral.locale());\n }\n\n //setup the delimiters and currency symbol based on culture/locale\n _currSymbol = localeData.currency.symbol;\n _abbrObj = localeData.abbreviations;\n _decimalSep = localeData.delimiters.decimal;\n if (localeData.delimiters.thousands === '.') {\n _thousandSep = '\\\\.';\n } else {\n _thousandSep = localeData.delimiters.thousands;\n }\n\n // validating currency symbol\n temp = val.match(/^[^\\d]+/);\n if (temp !== null) {\n val = val.substr(1);\n if (temp[0] !== _currSymbol) {\n return false;\n }\n }\n\n //validating abbreviation symbol\n temp = val.match(/[^\\d]+$/);\n if (temp !== null) {\n val = val.slice(0, -1);\n if (temp[0] !== _abbrObj.thousand && temp[0] !== _abbrObj.million && temp[0] !== _abbrObj.billion && temp[0] !== _abbrObj.trillion) {\n return false;\n }\n }\n\n _thousandRegEx = new RegExp(_thousandSep + '{2}');\n\n if (!val.match(/[^\\d.,]/g)) {\n _valArray = val.split(_decimalSep);\n if (_valArray.length > 2) {\n return false;\n } else {\n if (_valArray.length < 2) {\n return ( !! _valArray[0].match(/^\\d+.*\\d$/) && !_valArray[0].match(_thousandRegEx));\n } else {\n if (_valArray[0].length === 1) {\n return ( !! _valArray[0].match(/^\\d+$/) && !_valArray[0].match(_thousandRegEx) && !! _valArray[1].match(/^\\d+$/));\n } else {\n return ( !! _valArray[0].match(/^\\d+.*\\d$/) && !_valArray[0].match(_thousandRegEx) && !! _valArray[1].match(/^\\d+$/));\n }\n }\n }\n }\n\n return false;\n };\n\n\n /************************************\n Numeral Prototype\n ************************************/\n\n numeral.fn = Numeral.prototype = {\n clone: function() {\n return numeral(this);\n },\n format: function(inputString, roundingFunction) {\n var value = this._value,\n format = inputString || options.defaultFormat,\n kind,\n output,\n formatFunction;\n\n // make sure we have a roundingFunction\n roundingFunction = roundingFunction || Math.round;\n\n // format based on value\n if (value === 0 && options.zeroFormat !== null) {\n output = options.zeroFormat;\n } else if (value === null && options.nullFormat !== null) {\n output = options.nullFormat;\n } else {\n for (kind in formats) {\n if (format.match(formats[kind].regexps.format)) {\n formatFunction = formats[kind].format;\n\n break;\n }\n }\n\n formatFunction = formatFunction || numeral._.numberToFormat;\n\n output = formatFunction(value, format, roundingFunction);\n }\n\n return output;\n },\n value: function() {\n return this._value;\n },\n input: function() {\n return this._input;\n },\n set: function(value) {\n this._value = Number(value);\n\n return this;\n },\n add: function(value) {\n var corrFactor = _.correctionFactor.call(null, this._value, value);\n\n function cback(accum, curr, currI, O) {\n return accum + Math.round(corrFactor * curr);\n }\n\n this._value = _.reduce([this._value, value], cback, 0) / corrFactor;\n\n return this;\n },\n subtract: function(value) {\n var corrFactor = _.correctionFactor.call(null, this._value, value);\n\n function cback(accum, curr, currI, O) {\n return accum - Math.round(corrFactor * curr);\n }\n\n this._value = _.reduce([value], cback, Math.round(this._value * corrFactor)) / corrFactor;\n\n return this;\n },\n multiply: function(value) {\n function cback(accum, curr, currI, O) {\n var corrFactor = _.correctionFactor(accum, curr);\n return Math.round(accum * corrFactor) * Math.round(curr * corrFactor) / Math.round(corrFactor * corrFactor);\n }\n\n this._value = _.reduce([this._value, value], cback, 1);\n\n return this;\n },\n divide: function(value) {\n function cback(accum, curr, currI, O) {\n var corrFactor = _.correctionFactor(accum, curr);\n return Math.round(accum * corrFactor) / Math.round(curr * corrFactor);\n }\n\n this._value = _.reduce([this._value, value], cback);\n\n return this;\n },\n difference: function(value) {\n return Math.abs(numeral(this._value).subtract(value).value());\n }\n };\n\n /************************************\n Default Locale && Format\n ************************************/\n\n numeral.register('locale', 'en', {\n delimiters: {\n thousands: ',',\n decimal: '.'\n },\n abbreviations: {\n thousand: 'k',\n million: 'm',\n billion: 'b',\n trillion: 't'\n },\n ordinal: function(number) {\n var b = number % 10;\n return (~~(number % 100 / 10) === 1) ? 'th' :\n (b === 1) ? 'st' :\n (b === 2) ? 'nd' :\n (b === 3) ? 'rd' : 'th';\n },\n currency: {\n symbol: '$'\n }\n });\n\n \n\n(function() {\n numeral.register('format', 'bps', {\n regexps: {\n format: /(BPS)/,\n unformat: /(BPS)/\n },\n format: function(value, format, roundingFunction) {\n var space = numeral._.includes(format, ' BPS') ? ' ' : '',\n output;\n\n value = value * 10000;\n\n // check for space before BPS\n format = format.replace(/\\s?BPS/, '');\n\n output = numeral._.numberToFormat(value, format, roundingFunction);\n\n if (numeral._.includes(output, ')')) {\n output = output.split('');\n\n output.splice(-1, 0, space + 'BPS');\n\n output = output.join('');\n } else {\n output = output + space + 'BPS';\n }\n\n return output;\n },\n unformat: function(string) {\n return +(numeral._.stringToNumber(string) * 0.0001).toFixed(15);\n }\n });\n})();\n\n\n(function() {\n var decimal = {\n base: 1000,\n suffixes: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']\n },\n binary = {\n base: 1024,\n suffixes: ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']\n };\n\n var allSuffixes = decimal.suffixes.concat(binary.suffixes.filter(function (item) {\n return decimal.suffixes.indexOf(item) < 0;\n }));\n var unformatRegex = allSuffixes.join('|');\n // Allow support for BPS (http://www.investopedia.com/terms/b/basispoint.asp)\n unformatRegex = '(' + unformatRegex.replace('B', 'B(?!PS)') + ')';\n\n numeral.register('format', 'bytes', {\n regexps: {\n format: /([0\\s]i?b)/,\n unformat: new RegExp(unformatRegex)\n },\n format: function(value, format, roundingFunction) {\n var output,\n bytes = numeral._.includes(format, 'ib') ? binary : decimal,\n suffix = numeral._.includes(format, ' b') || numeral._.includes(format, ' ib') ? ' ' : '',\n power,\n min,\n max;\n\n // check for space before\n format = format.replace(/\\s?i?b/, '');\n\n for (power = 0; power <= bytes.suffixes.length; power++) {\n min = Math.pow(bytes.base, power);\n max = Math.pow(bytes.base, power + 1);\n\n if (value === null || value === 0 || value >= min && value < max) {\n suffix += bytes.suffixes[power];\n\n if (min > 0) {\n value = value / min;\n }\n\n break;\n }\n }\n\n output = numeral._.numberToFormat(value, format, roundingFunction);\n\n return output + suffix;\n },\n unformat: function(string) {\n var value = numeral._.stringToNumber(string),\n power,\n bytesMultiplier;\n\n if (value) {\n for (power = decimal.suffixes.length - 1; power >= 0; power--) {\n if (numeral._.includes(string, decimal.suffixes[power])) {\n bytesMultiplier = Math.pow(decimal.base, power);\n\n break;\n }\n\n if (numeral._.includes(string, binary.suffixes[power])) {\n bytesMultiplier = Math.pow(binary.base, power);\n\n break;\n }\n }\n\n value *= (bytesMultiplier || 1);\n }\n\n return value;\n }\n });\n})();\n\n\n(function() {\n numeral.register('format', 'currency', {\n regexps: {\n format: /(\\$)/\n },\n format: function(value, format, roundingFunction) {\n var locale = numeral.locales[numeral.options.currentLocale],\n symbols = {\n before: format.match(/^([\\+|\\-|\\(|\\s|\\$]*)/)[0],\n after: format.match(/([\\+|\\-|\\)|\\s|\\$]*)$/)[0]\n },\n output,\n symbol,\n i;\n\n // strip format of spaces and $\n format = format.replace(/\\s?\\$\\s?/, '');\n\n // format the number\n output = numeral._.numberToFormat(value, format, roundingFunction);\n\n // update the before and after based on value\n if (value >= 0) {\n symbols.before = symbols.before.replace(/[\\-\\(]/, '');\n symbols.after = symbols.after.replace(/[\\-\\)]/, '');\n } else if (value < 0 && (!numeral._.includes(symbols.before, '-') && !numeral._.includes(symbols.before, '('))) {\n symbols.before = '-' + symbols.before;\n }\n\n // loop through each before symbol\n for (i = 0; i < symbols.before.length; i++) {\n symbol = symbols.before[i];\n\n switch (symbol) {\n case '$':\n output = numeral._.insert(output, locale.currency.symbol, i);\n break;\n case ' ':\n output = numeral._.insert(output, ' ', i + locale.currency.symbol.length - 1);\n break;\n }\n }\n\n // loop through each after symbol\n for (i = symbols.after.length - 1; i >= 0; i--) {\n symbol = symbols.after[i];\n\n switch (symbol) {\n case '$':\n output = i === symbols.after.length - 1 ? output + locale.currency.symbol : numeral._.insert(output, locale.currency.symbol, -(symbols.after.length - (1 + i)));\n break;\n case ' ':\n output = i === symbols.after.length - 1 ? output + ' ' : numeral._.insert(output, ' ', -(symbols.after.length - (1 + i) + locale.currency.symbol.length - 1));\n break;\n }\n }\n\n\n return output;\n }\n });\n})();\n\n\n(function() {\n numeral.register('format', 'exponential', {\n regexps: {\n format: /(e\\+|e-)/,\n unformat: /(e\\+|e-)/\n },\n format: function(value, format, roundingFunction) {\n var output,\n exponential = typeof value === 'number' && !numeral._.isNaN(value) ? value.toExponential() : '0e+0',\n parts = exponential.split('e');\n\n format = format.replace(/e[\\+|\\-]{1}0/, '');\n\n output = numeral._.numberToFormat(Number(parts[0]), format, roundingFunction);\n\n return output + 'e' + parts[1];\n },\n unformat: function(string) {\n var parts = numeral._.includes(string, 'e+') ? string.split('e+') : string.split('e-'),\n value = Number(parts[0]),\n power = Number(parts[1]);\n\n power = numeral._.includes(string, 'e-') ? power *= -1 : power;\n\n function cback(accum, curr, currI, O) {\n var corrFactor = numeral._.correctionFactor(accum, curr),\n num = (accum * corrFactor) * (curr * corrFactor) / (corrFactor * corrFactor);\n return num;\n }\n\n return numeral._.reduce([value, Math.pow(10, power)], cback, 1);\n }\n });\n})();\n\n\n(function() {\n numeral.register('format', 'ordinal', {\n regexps: {\n format: /(o)/\n },\n format: function(value, format, roundingFunction) {\n var locale = numeral.locales[numeral.options.currentLocale],\n output,\n ordinal = numeral._.includes(format, ' o') ? ' ' : '';\n\n // check for space before\n format = format.replace(/\\s?o/, '');\n\n ordinal += locale.ordinal(value);\n\n output = numeral._.numberToFormat(value, format, roundingFunction);\n\n return output + ordinal;\n }\n });\n})();\n\n\n(function() {\n numeral.register('format', 'percentage', {\n regexps: {\n format: /(%)/,\n unformat: /(%)/\n },\n format: function(value, format, roundingFunction) {\n var space = numeral._.includes(format, ' %') ? ' ' : '',\n output;\n\n if (numeral.options.scalePercentBy100) {\n value = value * 100;\n }\n\n // check for space before %\n format = format.replace(/\\s?\\%/, '');\n\n output = numeral._.numberToFormat(value, format, roundingFunction);\n\n if (numeral._.includes(output, ')')) {\n output = output.split('');\n\n output.splice(-1, 0, space + '%');\n\n output = output.join('');\n } else {\n output = output + space + '%';\n }\n\n return output;\n },\n unformat: function(string) {\n var number = numeral._.stringToNumber(string);\n if (numeral.options.scalePercentBy100) {\n return number * 0.01;\n }\n return number;\n }\n });\n})();\n\n\n(function() {\n numeral.register('format', 'time', {\n regexps: {\n format: /(:)/,\n unformat: /(:)/\n },\n format: function(value, format, roundingFunction) {\n var hours = Math.floor(value / 60 / 60),\n minutes = Math.floor((value - (hours * 60 * 60)) / 60),\n seconds = Math.round(value - (hours * 60 * 60) - (minutes * 60));\n\n return hours + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);\n },\n unformat: function(string) {\n var timeArray = string.split(':'),\n seconds = 0;\n\n // turn hours and minutes into seconds and add them all up\n if (timeArray.length === 3) {\n // hours\n seconds = seconds + (Number(timeArray[0]) * 60 * 60);\n // minutes\n seconds = seconds + (Number(timeArray[1]) * 60);\n // seconds\n seconds = seconds + Number(timeArray[2]);\n } else if (timeArray.length === 2) {\n // minutes\n seconds = seconds + (Number(timeArray[0]) * 60);\n // seconds\n seconds = seconds + Number(timeArray[1]);\n }\n return Number(seconds);\n }\n });\n})();\n\nreturn numeral;\n}));\n});\n\n/*\n * @license\n * Copyright 2019 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// easy aliases for common format strings\nconst types = {\n abbrev: \"0a\", // or 'approx'?\n ordinal: \"0o\",\n percent: \"0%\",\n bytes: \"0[.][00] ib\",\n e: \"0[.00]e+0\",\n thousands: \"0,0[.][00]\"\n};\n\n// use thin spaces to separate thousands chunks\n// debugger;\nnumeral.locales.en.delimiters.thousands = \" \";\n\nclass PfeNumber extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-number\";\n }\n\n get styleUrl() {\n return \"pfe-number.scss\";\n }\n\n get templateUrl() {\n return \"pfe-number.html\";\n }\n\n static get observedAttributes() {\n return [\"number\", \"format\", \"type\"];\n }\n\n constructor() {\n super(PfeNumber);\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.connected = true;\n\n this._determineFormat();\n this._setInitialNumber();\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n super.attributeChangedCallback(...arguments);\n switch (attr) {\n case \"type\":\n this._determineFormat();\n break;\n case \"format\":\n this._updateNumber(this.getAttribute(\"number\"), newVal);\n break;\n case \"number\":\n this._updateNumber(newVal, this.getAttribute(\"format\"));\n }\n }\n\n _setInitialNumber() {\n const numberAttrDefined = !Number.isNaN(\n parseFloat(this.getAttribute(\"number\"))\n );\n const numberContentDefined = !Number.isNaN(parseFloat(this.textContent));\n\n if (numberAttrDefined) {\n this.setAttribute(\"number\", this.getAttribute(\"number\"));\n } else if (numberContentDefined) {\n this.setAttribute(\"number\", this.textContent);\n }\n }\n\n _determineFormat() {\n let type = this.getAttribute(\"type\");\n\n if (type && types[type]) {\n this.setAttribute(\"format\", types[type]);\n } else {\n this.setAttribute(\"format\", this.getAttribute(\"format\") || \"0\");\n }\n }\n\n _updateNumber(num, type) {\n this.shadowRoot.querySelector(\"span\").textContent = this._format(num, type);\n }\n\n _format(num, type) {\n return numeral(num).format(type);\n }\n}\n\nPFElement.create(PfeNumber);\n//# sourceMappingURL=pfe-number.js.map\n"],"names":["commonjsGlobal","window","global","self","module","numeral","factory","_","decimal","binary","unformatRegex","formats","locales","defaults","currentLocale","zeroFormat","nullFormat","defaultFormat","scalePercentBy100","options","Numeral","input","number","this","_input","_value","value","kind","unformatFunction","regexp","isNumeral","isNaN","replace","length","regexps","unformat","match","stringToNumber","Number","version","obj","numberToFormat","format","roundingFunction","leadingCount","abbrForce","abs","int","precision","signed","thousands","output","locale","negP","optDec","abbr","neg","Math","includes","indexOf","RegExp","abbreviations","trillion","billion","million","thousand","toString","split","toFixed","delimiters","slice","String","i","string","abbreviation","stringOriginal","currency","symbol","pow","min","search","insert","subString","start","reduce","array","callback","TypeError","t","Object","len","k","arguments","multiplier","x","parts","correctionFactor","Array","prototype","call","accum","next","mn","maxDecimals","optionals","boundedPrecision","optionalsRegExp","power","splitValue","minDecimals","max","key","toLowerCase","localeData","Error","reset","property","register","type","name","validate","val","culture","_decimalSep","_thousandSep","_currSymbol","_valArray","_abbrObj","_thousandRegEx","temp","console","warn","trim","e","substr","fn","clone","inputString","formatFunction","round","set","add","corrFactor","curr","currI","O","subtract","multiply","divide","difference","ordinal","b","space","splice","join","base","suffixes","concat","filter","item","bytes","suffix","bytesMultiplier","symbols","before","after","toExponential","hours","floor","minutes","seconds","timeArray","exports","types","abbrev","percent","en","PfeNumber","PFElement","html","tag","styleUrl","templateUrl","observedAttributes","[object Object]","super","connectedCallback","connected","_determineFormat","_setInitialNumber","attr","oldVal","newVal","attributeChangedCallback","_updateNumber","getAttribute","numberAttrDefined","parseFloat","numberContentDefined","textContent","setAttribute","num","shadowRoot","querySelector","_format","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-number/pfe-number.umd.js b/elements/pfe-number/pfe-number.umd.js new file mode 100644 index 0000000000..4059fbc287 --- /dev/null +++ b/elements/pfe-number/pfe-number.umd.js @@ -0,0 +1,1219 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('../pfelement/pfelement.umd')) : + typeof define === 'function' && define.amd ? define(['../pfelement/pfelement.umd'], factory) : + (factory(global.PFElement)); +}(this, (function (PFElement) { 'use strict'; + + PFElement = PFElement && PFElement.hasOwnProperty('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; + }; + + var commonjsGlobal = 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 numeral = createCommonjsModule(function (module) { + /*! @preserve + * numeral.js + * version : 2.0.6 + * author : Adam Draper + * license : MIT + * http://adamwdraper.github.com/Numeral-js/ + */ + + (function (global, factory) { + if (module.exports) { + module.exports = factory(); + } else { + global.numeral = factory(); + } + })(commonjsGlobal, function () { + /************************************ + Variables + ************************************/ + + var _numeral, + _, + VERSION = '2.0.6', + formats = {}, + locales = {}, + defaults$$1 = { + currentLocale: 'en', + zeroFormat: null, + nullFormat: null, + defaultFormat: '0,0', + scalePercentBy100: true + }, + options = { + currentLocale: defaults$$1.currentLocale, + zeroFormat: defaults$$1.zeroFormat, + nullFormat: defaults$$1.nullFormat, + defaultFormat: defaults$$1.defaultFormat, + scalePercentBy100: defaults$$1.scalePercentBy100 + }; + + /************************************ + Constructors + ************************************/ + + // Numeral prototype object + function Numeral(input, number) { + this._input = input; + + this._value = number; + } + + _numeral = function numeral(input) { + var value, kind, unformatFunction, regexp; + + if (_numeral.isNumeral(input)) { + value = input.value(); + } else if (input === 0 || typeof input === 'undefined') { + value = 0; + } else if (input === null || _.isNaN(input)) { + value = null; + } else if (typeof input === 'string') { + if (options.zeroFormat && input === options.zeroFormat) { + value = 0; + } else if (options.nullFormat && input === options.nullFormat || !input.replace(/[^0-9]+/g, '').length) { + value = null; + } else { + for (kind in formats) { + regexp = typeof formats[kind].regexps.unformat === 'function' ? formats[kind].regexps.unformat() : formats[kind].regexps.unformat; + + if (regexp && input.match(regexp)) { + unformatFunction = formats[kind].unformat; + + break; + } + } + + unformatFunction = unformatFunction || _numeral._.stringToNumber; + + value = unformatFunction(input); + } + } else { + value = Number(input) || null; + } + + return new Numeral(input, value); + }; + + // version number + _numeral.version = VERSION; + + // compare numeral object + _numeral.isNumeral = function (obj) { + return obj instanceof Numeral; + }; + + // helper functions + _numeral._ = _ = { + // formats numbers separators, decimals places, signs, abbreviations + numberToFormat: function numberToFormat(value, format, roundingFunction) { + var locale = locales[_numeral.options.currentLocale], + negP = false, + optDec = false, + leadingCount = 0, + abbr = '', + trillion = 1000000000000, + billion = 1000000000, + million = 1000000, + thousand = 1000, + decimal = '', + neg = false, + abbrForce, + // force abbreviation + abs, + int, + precision, + signed, + thousands, + output; + + // make sure we never format a null value + value = value || 0; + + abs = Math.abs(value); + + // see if we should use parentheses for negative number or if we should prefix with a sign + // if both are present we default to parentheses + if (_numeral._.includes(format, '(')) { + negP = true; + format = format.replace(/[\(|\)]/g, ''); + } else if (_numeral._.includes(format, '+') || _numeral._.includes(format, '-')) { + signed = _numeral._.includes(format, '+') ? format.indexOf('+') : value < 0 ? format.indexOf('-') : -1; + format = format.replace(/[\+|\-]/g, ''); + } + + // see if abbreviation is wanted + if (_numeral._.includes(format, 'a')) { + abbrForce = format.match(/a(k|m|b|t)?/); + + abbrForce = abbrForce ? abbrForce[1] : false; + + // check for space before abbreviation + if (_numeral._.includes(format, ' a')) { + abbr = ' '; + } + + format = format.replace(new RegExp(abbr + 'a[kmbt]?'), ''); + + if (abs >= trillion && !abbrForce || abbrForce === 't') { + // trillion + abbr += locale.abbreviations.trillion; + value = value / trillion; + } else if (abs < trillion && abs >= billion && !abbrForce || abbrForce === 'b') { + // billion + abbr += locale.abbreviations.billion; + value = value / billion; + } else if (abs < billion && abs >= million && !abbrForce || abbrForce === 'm') { + // million + abbr += locale.abbreviations.million; + value = value / million; + } else if (abs < million && abs >= thousand && !abbrForce || abbrForce === 'k') { + // thousand + abbr += locale.abbreviations.thousand; + value = value / thousand; + } + } + + // check for optional decimals + if (_numeral._.includes(format, '[.]')) { + optDec = true; + format = format.replace('[.]', '.'); + } + + // break number and format + int = value.toString().split('.')[0]; + precision = format.split('.')[1]; + thousands = format.indexOf(','); + leadingCount = (format.split('.')[0].split(',')[0].match(/0/g) || []).length; + + if (precision) { + if (_numeral._.includes(precision, '[')) { + precision = precision.replace(']', ''); + precision = precision.split('['); + decimal = _numeral._.toFixed(value, precision[0].length + precision[1].length, roundingFunction, precision[1].length); + } else { + decimal = _numeral._.toFixed(value, precision.length, roundingFunction); + } + + int = decimal.split('.')[0]; + + if (_numeral._.includes(decimal, '.')) { + decimal = locale.delimiters.decimal + decimal.split('.')[1]; + } else { + decimal = ''; + } + + if (optDec && Number(decimal.slice(1)) === 0) { + decimal = ''; + } + } else { + int = _numeral._.toFixed(value, 0, roundingFunction); + } + + // check abbreviation again after rounding + if (abbr && !abbrForce && Number(int) >= 1000 && abbr !== locale.abbreviations.trillion) { + int = String(Number(int) / 1000); + + switch (abbr) { + case locale.abbreviations.thousand: + abbr = locale.abbreviations.million; + break; + case locale.abbreviations.million: + abbr = locale.abbreviations.billion; + break; + case locale.abbreviations.billion: + abbr = locale.abbreviations.trillion; + break; + } + } + + // format number + if (_numeral._.includes(int, '-')) { + int = int.slice(1); + neg = true; + } + + if (int.length < leadingCount) { + for (var i = leadingCount - int.length; i > 0; i--) { + int = '0' + int; + } + } + + if (thousands > -1) { + int = int.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1' + locale.delimiters.thousands); + } + + if (format.indexOf('.') === 0) { + int = ''; + } + + output = int + decimal + (abbr ? abbr : ''); + + if (negP) { + output = (negP && neg ? '(' : '') + output + (negP && neg ? ')' : ''); + } else { + if (signed >= 0) { + output = signed === 0 ? (neg ? '-' : '+') + output : output + (neg ? '-' : '+'); + } else if (neg) { + output = '-' + output; + } + } + + return output; + }, + // unformats numbers separators, decimals places, signs, abbreviations + stringToNumber: function stringToNumber(string) { + var locale = locales[options.currentLocale], + stringOriginal = string, + abbreviations = { + thousand: 3, + million: 6, + billion: 9, + trillion: 12 + }, + abbreviation, + value, + regexp; + + if (options.zeroFormat && string === options.zeroFormat) { + value = 0; + } else if (options.nullFormat && string === options.nullFormat || !string.replace(/[^0-9]+/g, '').length) { + value = null; + } else { + value = 1; + + if (locale.delimiters.decimal !== '.') { + string = string.replace(/\./g, '').replace(locale.delimiters.decimal, '.'); + } + + for (abbreviation in abbreviations) { + regexp = new RegExp('[^a-zA-Z]' + locale.abbreviations[abbreviation] + '(?:\\)|(\\' + locale.currency.symbol + ')?(?:\\))?)?$'); + + if (stringOriginal.match(regexp)) { + value *= Math.pow(10, abbreviations[abbreviation]); + break; + } + } + + // check for negative number + value *= (string.split('-').length + Math.min(string.split('(').length - 1, string.split(')').length - 1)) % 2 ? 1 : -1; + + // remove non numbers + string = string.replace(/[^0-9\.]+/g, ''); + + value *= Number(string); + } + + return value; + }, + isNaN: function (_isNaN) { + function isNaN(_x) { + return _isNaN.apply(this, arguments); + } + + isNaN.toString = function () { + return _isNaN.toString(); + }; + + return isNaN; + }(function (value) { + return typeof value === 'number' && isNaN(value); + }), + includes: function includes(string, search) { + return string.indexOf(search) !== -1; + }, + insert: function insert(string, subString, start) { + return string.slice(0, start) + subString + string.slice(start); + }, + reduce: function reduce(array, callback /*, initialValue*/) { + if (this === null) { + throw new TypeError('Array.prototype.reduce called on null or undefined'); + } + + if (typeof callback !== 'function') { + throw new TypeError(callback + ' is not a function'); + } + + var t = Object(array), + len = t.length >>> 0, + k = 0, + value; + + if (arguments.length === 3) { + value = arguments[2]; + } else { + while (k < len && !(k in t)) { + k++; + } + + if (k >= len) { + throw new TypeError('Reduce of empty array with no initial value'); + } + + value = t[k++]; + } + for (; k < len; k++) { + if (k in t) { + value = callback(value, t[k], k, t); + } + } + return value; + }, + /** + * Computes the multiplier necessary to make x >= 1, + * effectively eliminating miscalculations caused by + * finite precision. + */ + multiplier: function multiplier(x) { + var parts = x.toString().split('.'); + + return parts.length < 2 ? 1 : Math.pow(10, parts[1].length); + }, + /** + * Given a variable number of arguments, returns the maximum + * multiplier that must be used to normalize an operation involving + * all of them. + */ + correctionFactor: function correctionFactor() { + var args = Array.prototype.slice.call(arguments); + + return args.reduce(function (accum, next) { + var mn = _.multiplier(next); + return accum > mn ? accum : mn; + }, 1); + }, + /** + * Implementation of toFixed() that treats floats more like decimals + * + * Fixes binary rounding issues (eg. (0.615).toFixed(2) === '0.61') that present + * problems for accounting- and finance-related software. + */ + toFixed: function toFixed(value, maxDecimals, roundingFunction, optionals) { + var splitValue = value.toString().split('.'), + minDecimals = maxDecimals - (optionals || 0), + boundedPrecision, + optionalsRegExp, + power, + output; + + // Use the smallest precision value possible to avoid errors from floating point representation + if (splitValue.length === 2) { + boundedPrecision = Math.min(Math.max(splitValue[1].length, minDecimals), maxDecimals); + } else { + boundedPrecision = minDecimals; + } + + power = Math.pow(10, boundedPrecision); + + // Multiply up by precision, round accurately, then divide and use native toFixed(): + output = (roundingFunction(value + 'e+' + boundedPrecision) / power).toFixed(boundedPrecision); + + if (optionals > maxDecimals - boundedPrecision) { + optionalsRegExp = new RegExp('\\.?0{1,' + (optionals - (maxDecimals - boundedPrecision)) + '}$'); + output = output.replace(optionalsRegExp, ''); + } + + return output; + } + }; + + // avaliable options + _numeral.options = options; + + // avaliable formats + _numeral.formats = formats; + + // avaliable formats + _numeral.locales = locales; + + // This function sets the current locale. If + // no arguments are passed in, it will simply return the current global + // locale key. + _numeral.locale = function (key) { + if (key) { + options.currentLocale = key.toLowerCase(); + } + + return options.currentLocale; + }; + + // This function provides access to the loaded locale data. If + // no arguments are passed in, it will simply return the current + // global locale object. + _numeral.localeData = function (key) { + if (!key) { + return locales[options.currentLocale]; + } + + key = key.toLowerCase(); + + if (!locales[key]) { + throw new Error('Unknown locale : ' + key); + } + + return locales[key]; + }; + + _numeral.reset = function () { + for (var property in defaults$$1) { + options[property] = defaults$$1[property]; + } + }; + + _numeral.zeroFormat = function (format) { + options.zeroFormat = typeof format === 'string' ? format : null; + }; + + _numeral.nullFormat = function (format) { + options.nullFormat = typeof format === 'string' ? format : null; + }; + + _numeral.defaultFormat = function (format) { + options.defaultFormat = typeof format === 'string' ? format : '0.0'; + }; + + _numeral.register = function (type, name, format) { + name = name.toLowerCase(); + + if (this[type + 's'][name]) { + throw new TypeError(name + ' ' + type + ' already registered.'); + } + + this[type + 's'][name] = format; + + return format; + }; + + _numeral.validate = function (val, culture) { + var _decimalSep, _thousandSep, _currSymbol, _valArray, _abbrObj, _thousandRegEx, localeData, temp; + + //coerce val to string + if (typeof val !== 'string') { + val += ''; + + if (console.warn) { + console.warn('Numeral.js: Value is not string. It has been co-erced to: ', val); + } + } + + //trim whitespaces from either sides + val = val.trim(); + + //if val is just digits return true + if (!!val.match(/^\d+$/)) { + return true; + } + + //if val is empty return false + if (val === '') { + return false; + } + + //get the decimal and thousands separator from numeral.localeData + try { + //check if the culture is understood by numeral. if not, default it to current locale + localeData = _numeral.localeData(culture); + } catch (e) { + localeData = _numeral.localeData(_numeral.locale()); + } + + //setup the delimiters and currency symbol based on culture/locale + _currSymbol = localeData.currency.symbol; + _abbrObj = localeData.abbreviations; + _decimalSep = localeData.delimiters.decimal; + if (localeData.delimiters.thousands === '.') { + _thousandSep = '\\.'; + } else { + _thousandSep = localeData.delimiters.thousands; + } + + // validating currency symbol + temp = val.match(/^[^\d]+/); + if (temp !== null) { + val = val.substr(1); + if (temp[0] !== _currSymbol) { + return false; + } + } + + //validating abbreviation symbol + temp = val.match(/[^\d]+$/); + if (temp !== null) { + val = val.slice(0, -1); + if (temp[0] !== _abbrObj.thousand && temp[0] !== _abbrObj.million && temp[0] !== _abbrObj.billion && temp[0] !== _abbrObj.trillion) { + return false; + } + } + + _thousandRegEx = new RegExp(_thousandSep + '{2}'); + + if (!val.match(/[^\d.,]/g)) { + _valArray = val.split(_decimalSep); + if (_valArray.length > 2) { + return false; + } else { + if (_valArray.length < 2) { + return !!_valArray[0].match(/^\d+.*\d$/) && !_valArray[0].match(_thousandRegEx); + } else { + if (_valArray[0].length === 1) { + return !!_valArray[0].match(/^\d+$/) && !_valArray[0].match(_thousandRegEx) && !!_valArray[1].match(/^\d+$/); + } else { + return !!_valArray[0].match(/^\d+.*\d$/) && !_valArray[0].match(_thousandRegEx) && !!_valArray[1].match(/^\d+$/); + } + } + } + } + + return false; + }; + + /************************************ + Numeral Prototype + ************************************/ + + _numeral.fn = Numeral.prototype = { + clone: function clone() { + return _numeral(this); + }, + format: function format(inputString, roundingFunction) { + var value = this._value, + format = inputString || options.defaultFormat, + kind, + output, + formatFunction; + + // make sure we have a roundingFunction + roundingFunction = roundingFunction || Math.round; + + // format based on value + if (value === 0 && options.zeroFormat !== null) { + output = options.zeroFormat; + } else if (value === null && options.nullFormat !== null) { + output = options.nullFormat; + } else { + for (kind in formats) { + if (format.match(formats[kind].regexps.format)) { + formatFunction = formats[kind].format; + + break; + } + } + + formatFunction = formatFunction || _numeral._.numberToFormat; + + output = formatFunction(value, format, roundingFunction); + } + + return output; + }, + value: function value() { + return this._value; + }, + input: function input() { + return this._input; + }, + set: function set$$1(value) { + this._value = Number(value); + + return this; + }, + add: function add(value) { + var corrFactor = _.correctionFactor.call(null, this._value, value); + + function cback(accum, curr, currI, O) { + return accum + Math.round(corrFactor * curr); + } + + this._value = _.reduce([this._value, value], cback, 0) / corrFactor; + + return this; + }, + subtract: function subtract(value) { + var corrFactor = _.correctionFactor.call(null, this._value, value); + + function cback(accum, curr, currI, O) { + return accum - Math.round(corrFactor * curr); + } + + this._value = _.reduce([value], cback, Math.round(this._value * corrFactor)) / corrFactor; + + return this; + }, + multiply: function multiply(value) { + function cback(accum, curr, currI, O) { + var corrFactor = _.correctionFactor(accum, curr); + return Math.round(accum * corrFactor) * Math.round(curr * corrFactor) / Math.round(corrFactor * corrFactor); + } + + this._value = _.reduce([this._value, value], cback, 1); + + return this; + }, + divide: function divide(value) { + function cback(accum, curr, currI, O) { + var corrFactor = _.correctionFactor(accum, curr); + return Math.round(accum * corrFactor) / Math.round(curr * corrFactor); + } + + this._value = _.reduce([this._value, value], cback); + + return this; + }, + difference: function difference(value) { + return Math.abs(_numeral(this._value).subtract(value).value()); + } + }; + + /************************************ + Default Locale && Format + ************************************/ + + _numeral.register('locale', 'en', { + delimiters: { + thousands: ',', + decimal: '.' + }, + abbreviations: { + thousand: 'k', + million: 'm', + billion: 'b', + trillion: 't' + }, + ordinal: function ordinal(number) { + var b = number % 10; + return ~~(number % 100 / 10) === 1 ? 'th' : b === 1 ? 'st' : b === 2 ? 'nd' : b === 3 ? 'rd' : 'th'; + }, + currency: { + symbol: '$' + } + }); + + (function () { + _numeral.register('format', 'bps', { + regexps: { + format: /(BPS)/, + unformat: /(BPS)/ + }, + format: function format(value, _format, roundingFunction) { + var space = _numeral._.includes(_format, ' BPS') ? ' ' : '', + output; + + value = value * 10000; + + // check for space before BPS + _format = _format.replace(/\s?BPS/, ''); + + output = _numeral._.numberToFormat(value, _format, roundingFunction); + + if (_numeral._.includes(output, ')')) { + output = output.split(''); + + output.splice(-1, 0, space + 'BPS'); + + output = output.join(''); + } else { + output = output + space + 'BPS'; + } + + return output; + }, + unformat: function unformat(string) { + return +(_numeral._.stringToNumber(string) * 0.0001).toFixed(15); + } + }); + })(); + + (function () { + var decimal = { + base: 1000, + suffixes: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] + }, + binary = { + base: 1024, + suffixes: ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'] + }; + + var allSuffixes = decimal.suffixes.concat(binary.suffixes.filter(function (item) { + return decimal.suffixes.indexOf(item) < 0; + })); + var unformatRegex = allSuffixes.join('|'); + // Allow support for BPS (http://www.investopedia.com/terms/b/basispoint.asp) + unformatRegex = '(' + unformatRegex.replace('B', 'B(?!PS)') + ')'; + + _numeral.register('format', 'bytes', { + regexps: { + format: /([0\s]i?b)/, + unformat: new RegExp(unformatRegex) + }, + format: function format(value, _format2, roundingFunction) { + var output, + bytes = _numeral._.includes(_format2, 'ib') ? binary : decimal, + suffix = _numeral._.includes(_format2, ' b') || _numeral._.includes(_format2, ' ib') ? ' ' : '', + power, + min, + max; + + // check for space before + _format2 = _format2.replace(/\s?i?b/, ''); + + for (power = 0; power <= bytes.suffixes.length; power++) { + min = Math.pow(bytes.base, power); + max = Math.pow(bytes.base, power + 1); + + if (value === null || value === 0 || value >= min && value < max) { + suffix += bytes.suffixes[power]; + + if (min > 0) { + value = value / min; + } + + break; + } + } + + output = _numeral._.numberToFormat(value, _format2, roundingFunction); + + return output + suffix; + }, + unformat: function unformat(string) { + var value = _numeral._.stringToNumber(string), + power, + bytesMultiplier; + + if (value) { + for (power = decimal.suffixes.length - 1; power >= 0; power--) { + if (_numeral._.includes(string, decimal.suffixes[power])) { + bytesMultiplier = Math.pow(decimal.base, power); + + break; + } + + if (_numeral._.includes(string, binary.suffixes[power])) { + bytesMultiplier = Math.pow(binary.base, power); + + break; + } + } + + value *= bytesMultiplier || 1; + } + + return value; + } + }); + })(); + + (function () { + _numeral.register('format', 'currency', { + regexps: { + format: /(\$)/ + }, + format: function format(value, _format3, roundingFunction) { + var locale = _numeral.locales[_numeral.options.currentLocale], + symbols = { + before: _format3.match(/^([\+|\-|\(|\s|\$]*)/)[0], + after: _format3.match(/([\+|\-|\)|\s|\$]*)$/)[0] + }, + output, + symbol, + i; + + // strip format of spaces and $ + _format3 = _format3.replace(/\s?\$\s?/, ''); + + // format the number + output = _numeral._.numberToFormat(value, _format3, roundingFunction); + + // update the before and after based on value + if (value >= 0) { + symbols.before = symbols.before.replace(/[\-\(]/, ''); + symbols.after = symbols.after.replace(/[\-\)]/, ''); + } else if (value < 0 && !_numeral._.includes(symbols.before, '-') && !_numeral._.includes(symbols.before, '(')) { + symbols.before = '-' + symbols.before; + } + + // loop through each before symbol + for (i = 0; i < symbols.before.length; i++) { + symbol = symbols.before[i]; + + switch (symbol) { + case '$': + output = _numeral._.insert(output, locale.currency.symbol, i); + break; + case ' ': + output = _numeral._.insert(output, ' ', i + locale.currency.symbol.length - 1); + break; + } + } + + // loop through each after symbol + for (i = symbols.after.length - 1; i >= 0; i--) { + symbol = symbols.after[i]; + + switch (symbol) { + case '$': + output = i === symbols.after.length - 1 ? output + locale.currency.symbol : _numeral._.insert(output, locale.currency.symbol, -(symbols.after.length - (1 + i))); + break; + case ' ': + output = i === symbols.after.length - 1 ? output + ' ' : _numeral._.insert(output, ' ', -(symbols.after.length - (1 + i) + locale.currency.symbol.length - 1)); + break; + } + } + + return output; + } + }); + })(); + + (function () { + _numeral.register('format', 'exponential', { + regexps: { + format: /(e\+|e-)/, + unformat: /(e\+|e-)/ + }, + format: function format(value, _format4, roundingFunction) { + var output, + exponential = typeof value === 'number' && !_numeral._.isNaN(value) ? value.toExponential() : '0e+0', + parts = exponential.split('e'); + + _format4 = _format4.replace(/e[\+|\-]{1}0/, ''); + + output = _numeral._.numberToFormat(Number(parts[0]), _format4, roundingFunction); + + return output + 'e' + parts[1]; + }, + unformat: function unformat(string) { + var parts = _numeral._.includes(string, 'e+') ? string.split('e+') : string.split('e-'), + value = Number(parts[0]), + power = Number(parts[1]); + + power = _numeral._.includes(string, 'e-') ? power *= -1 : power; + + function cback(accum, curr, currI, O) { + var corrFactor = _numeral._.correctionFactor(accum, curr), + num = accum * corrFactor * (curr * corrFactor) / (corrFactor * corrFactor); + return num; + } + + return _numeral._.reduce([value, Math.pow(10, power)], cback, 1); + } + }); + })(); + + (function () { + _numeral.register('format', 'ordinal', { + regexps: { + format: /(o)/ + }, + format: function format(value, _format5, roundingFunction) { + var locale = _numeral.locales[_numeral.options.currentLocale], + output, + ordinal = _numeral._.includes(_format5, ' o') ? ' ' : ''; + + // check for space before + _format5 = _format5.replace(/\s?o/, ''); + + ordinal += locale.ordinal(value); + + output = _numeral._.numberToFormat(value, _format5, roundingFunction); + + return output + ordinal; + } + }); + })(); + + (function () { + _numeral.register('format', 'percentage', { + regexps: { + format: /(%)/, + unformat: /(%)/ + }, + format: function format(value, _format6, roundingFunction) { + var space = _numeral._.includes(_format6, ' %') ? ' ' : '', + output; + + if (_numeral.options.scalePercentBy100) { + value = value * 100; + } + + // check for space before % + _format6 = _format6.replace(/\s?\%/, ''); + + output = _numeral._.numberToFormat(value, _format6, roundingFunction); + + if (_numeral._.includes(output, ')')) { + output = output.split(''); + + output.splice(-1, 0, space + '%'); + + output = output.join(''); + } else { + output = output + space + '%'; + } + + return output; + }, + unformat: function unformat(string) { + var number = _numeral._.stringToNumber(string); + if (_numeral.options.scalePercentBy100) { + return number * 0.01; + } + return number; + } + }); + })(); + + (function () { + _numeral.register('format', 'time', { + regexps: { + format: /(:)/, + unformat: /(:)/ + }, + format: function format(value, _format7, roundingFunction) { + var hours = Math.floor(value / 60 / 60), + minutes = Math.floor((value - hours * 60 * 60) / 60), + seconds = Math.round(value - hours * 60 * 60 - minutes * 60); + + return hours + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds); + }, + unformat: function unformat(string) { + var timeArray = string.split(':'), + seconds = 0; + + // turn hours and minutes into seconds and add them all up + if (timeArray.length === 3) { + // hours + seconds = seconds + Number(timeArray[0]) * 60 * 60; + // minutes + seconds = seconds + Number(timeArray[1]) * 60; + // seconds + seconds = seconds + Number(timeArray[2]); + } else if (timeArray.length === 2) { + // minutes + seconds = seconds + Number(timeArray[0]) * 60; + // seconds + seconds = seconds + Number(timeArray[1]); + } + return Number(seconds); + } + }); + })(); + + return _numeral; + }); + }); + + /* + * @license + * Copyright 2019 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. + * + */ + + // easy aliases for common format strings + var types = { + abbrev: "0a", // or 'approx'? + ordinal: "0o", + percent: "0%", + bytes: "0[.][00] ib", + e: "0[.00]e+0", + thousands: "0,0[.][00]" + }; + + // use thin spaces to separate thousands chunks + // debugger; + numeral.locales.en.delimiters.thousands = " "; + + var PfeNumber = function (_PFElement) { + inherits(PfeNumber, _PFElement); + createClass(PfeNumber, [{ + key: 'html', + get: function get$$1() { + return ''; + } + }, { + key: 'styleUrl', + get: function get$$1() { + return "pfe-number.scss"; + } + }, { + key: 'templateUrl', + get: function get$$1() { + return "pfe-number.html"; + } + }], [{ + key: 'tag', + get: function get$$1() { + return "pfe-number"; + } + }, { + key: 'observedAttributes', + get: function get$$1() { + return ["number", "format", "type"]; + } + }]); + + function PfeNumber() { + classCallCheck(this, PfeNumber); + return possibleConstructorReturn(this, (PfeNumber.__proto__ || Object.getPrototypeOf(PfeNumber)).call(this, PfeNumber)); + } + + createClass(PfeNumber, [{ + key: 'connectedCallback', + value: function connectedCallback() { + get(PfeNumber.prototype.__proto__ || Object.getPrototypeOf(PfeNumber.prototype), 'connectedCallback', this).call(this); + this.connected = true; + + this._determineFormat(); + this._setInitialNumber(); + } + }, { + key: 'attributeChangedCallback', + value: function attributeChangedCallback(attr, oldVal, newVal) { + get(PfeNumber.prototype.__proto__ || Object.getPrototypeOf(PfeNumber.prototype), 'attributeChangedCallback', this).apply(this, arguments); + switch (attr) { + case "type": + this._determineFormat(); + break; + case "format": + this._updateNumber(this.getAttribute("number"), newVal); + break; + case "number": + this._updateNumber(newVal, this.getAttribute("format")); + } + } + }, { + key: '_setInitialNumber', + value: function _setInitialNumber() { + var numberAttrDefined = !Number.isNaN(parseFloat(this.getAttribute("number"))); + var numberContentDefined = !Number.isNaN(parseFloat(this.textContent)); + + if (numberAttrDefined) { + this.setAttribute("number", this.getAttribute("number")); + } else if (numberContentDefined) { + this.setAttribute("number", this.textContent); + } + } + }, { + key: '_determineFormat', + value: function _determineFormat() { + var type = this.getAttribute("type"); + + if (type && types[type]) { + this.setAttribute("format", types[type]); + } else { + this.setAttribute("format", this.getAttribute("format") || "0"); + } + } + }, { + key: '_updateNumber', + value: function _updateNumber(num, type) { + this.shadowRoot.querySelector("span").textContent = this._format(num, type); + } + }, { + key: '_format', + value: function _format(num, type) { + return numeral(num).format(type); + } + }]); + return PfeNumber; + }(PFElement); + + PFElement.create(PfeNumber); + +}))); +//# sourceMappingURL=pfe-number.umd.js.map diff --git a/elements/pfe-number/pfe-number.umd.js.map b/elements/pfe-number/pfe-number.umd.js.map new file mode 100644 index 0000000000..8baf97f7cf --- /dev/null +++ b/elements/pfe-number/pfe-number.umd.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-number.umd.js","sources":["pfe-number.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\nvar commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};\n\nfunction createCommonjsModule(fn, module) {\n\treturn module = { exports: {} }, fn(module, module.exports), module.exports;\n}\n\nvar numeral = createCommonjsModule(function (module) {\n/*! @preserve\n * numeral.js\n * version : 2.0.6\n * author : Adam Draper\n * license : MIT\n * http://adamwdraper.github.com/Numeral-js/\n */\n\n(function (global, factory) {\n if (module.exports) {\n module.exports = factory();\n } else {\n global.numeral = factory();\n }\n}(commonjsGlobal, function () {\n /************************************\n Variables\n ************************************/\n\n var numeral,\n _,\n VERSION = '2.0.6',\n formats = {},\n locales = {},\n defaults = {\n currentLocale: 'en',\n zeroFormat: null,\n nullFormat: null,\n defaultFormat: '0,0',\n scalePercentBy100: true\n },\n options = {\n currentLocale: defaults.currentLocale,\n zeroFormat: defaults.zeroFormat,\n nullFormat: defaults.nullFormat,\n defaultFormat: defaults.defaultFormat,\n scalePercentBy100: defaults.scalePercentBy100\n };\n\n\n /************************************\n Constructors\n ************************************/\n\n // Numeral prototype object\n function Numeral(input, number) {\n this._input = input;\n\n this._value = number;\n }\n\n numeral = function(input) {\n var value,\n kind,\n unformatFunction,\n regexp;\n\n if (numeral.isNumeral(input)) {\n value = input.value();\n } else if (input === 0 || typeof input === 'undefined') {\n value = 0;\n } else if (input === null || _.isNaN(input)) {\n value = null;\n } else if (typeof input === 'string') {\n if (options.zeroFormat && input === options.zeroFormat) {\n value = 0;\n } else if (options.nullFormat && input === options.nullFormat || !input.replace(/[^0-9]+/g, '').length) {\n value = null;\n } else {\n for (kind in formats) {\n regexp = typeof formats[kind].regexps.unformat === 'function' ? formats[kind].regexps.unformat() : formats[kind].regexps.unformat;\n\n if (regexp && input.match(regexp)) {\n unformatFunction = formats[kind].unformat;\n\n break;\n }\n }\n\n unformatFunction = unformatFunction || numeral._.stringToNumber;\n\n value = unformatFunction(input);\n }\n } else {\n value = Number(input)|| null;\n }\n\n return new Numeral(input, value);\n };\n\n // version number\n numeral.version = VERSION;\n\n // compare numeral object\n numeral.isNumeral = function(obj) {\n return obj instanceof Numeral;\n };\n\n // helper functions\n numeral._ = _ = {\n // formats numbers separators, decimals places, signs, abbreviations\n numberToFormat: function(value, format, roundingFunction) {\n var locale = locales[numeral.options.currentLocale],\n negP = false,\n optDec = false,\n leadingCount = 0,\n abbr = '',\n trillion = 1000000000000,\n billion = 1000000000,\n million = 1000000,\n thousand = 1000,\n decimal = '',\n neg = false,\n abbrForce, // force abbreviation\n abs,\n int,\n precision,\n signed,\n thousands,\n output;\n\n // make sure we never format a null value\n value = value || 0;\n\n abs = Math.abs(value);\n\n // see if we should use parentheses for negative number or if we should prefix with a sign\n // if both are present we default to parentheses\n if (numeral._.includes(format, '(')) {\n negP = true;\n format = format.replace(/[\\(|\\)]/g, '');\n } else if (numeral._.includes(format, '+') || numeral._.includes(format, '-')) {\n signed = numeral._.includes(format, '+') ? format.indexOf('+') : value < 0 ? format.indexOf('-') : -1;\n format = format.replace(/[\\+|\\-]/g, '');\n }\n\n // see if abbreviation is wanted\n if (numeral._.includes(format, 'a')) {\n abbrForce = format.match(/a(k|m|b|t)?/);\n\n abbrForce = abbrForce ? abbrForce[1] : false;\n\n // check for space before abbreviation\n if (numeral._.includes(format, ' a')) {\n abbr = ' ';\n }\n\n format = format.replace(new RegExp(abbr + 'a[kmbt]?'), '');\n\n if (abs >= trillion && !abbrForce || abbrForce === 't') {\n // trillion\n abbr += locale.abbreviations.trillion;\n value = value / trillion;\n } else if (abs < trillion && abs >= billion && !abbrForce || abbrForce === 'b') {\n // billion\n abbr += locale.abbreviations.billion;\n value = value / billion;\n } else if (abs < billion && abs >= million && !abbrForce || abbrForce === 'm') {\n // million\n abbr += locale.abbreviations.million;\n value = value / million;\n } else if (abs < million && abs >= thousand && !abbrForce || abbrForce === 'k') {\n // thousand\n abbr += locale.abbreviations.thousand;\n value = value / thousand;\n }\n }\n\n // check for optional decimals\n if (numeral._.includes(format, '[.]')) {\n optDec = true;\n format = format.replace('[.]', '.');\n }\n\n // break number and format\n int = value.toString().split('.')[0];\n precision = format.split('.')[1];\n thousands = format.indexOf(',');\n leadingCount = (format.split('.')[0].split(',')[0].match(/0/g) || []).length;\n\n if (precision) {\n if (numeral._.includes(precision, '[')) {\n precision = precision.replace(']', '');\n precision = precision.split('[');\n decimal = numeral._.toFixed(value, (precision[0].length + precision[1].length), roundingFunction, precision[1].length);\n } else {\n decimal = numeral._.toFixed(value, precision.length, roundingFunction);\n }\n\n int = decimal.split('.')[0];\n\n if (numeral._.includes(decimal, '.')) {\n decimal = locale.delimiters.decimal + decimal.split('.')[1];\n } else {\n decimal = '';\n }\n\n if (optDec && Number(decimal.slice(1)) === 0) {\n decimal = '';\n }\n } else {\n int = numeral._.toFixed(value, 0, roundingFunction);\n }\n\n // check abbreviation again after rounding\n if (abbr && !abbrForce && Number(int) >= 1000 && abbr !== locale.abbreviations.trillion) {\n int = String(Number(int) / 1000);\n\n switch (abbr) {\n case locale.abbreviations.thousand:\n abbr = locale.abbreviations.million;\n break;\n case locale.abbreviations.million:\n abbr = locale.abbreviations.billion;\n break;\n case locale.abbreviations.billion:\n abbr = locale.abbreviations.trillion;\n break;\n }\n }\n\n\n // format number\n if (numeral._.includes(int, '-')) {\n int = int.slice(1);\n neg = true;\n }\n\n if (int.length < leadingCount) {\n for (var i = leadingCount - int.length; i > 0; i--) {\n int = '0' + int;\n }\n }\n\n if (thousands > -1) {\n int = int.toString().replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1' + locale.delimiters.thousands);\n }\n\n if (format.indexOf('.') === 0) {\n int = '';\n }\n\n output = int + decimal + (abbr ? abbr : '');\n\n if (negP) {\n output = (negP && neg ? '(' : '') + output + (negP && neg ? ')' : '');\n } else {\n if (signed >= 0) {\n output = signed === 0 ? (neg ? '-' : '+') + output : output + (neg ? '-' : '+');\n } else if (neg) {\n output = '-' + output;\n }\n }\n\n return output;\n },\n // unformats numbers separators, decimals places, signs, abbreviations\n stringToNumber: function(string) {\n var locale = locales[options.currentLocale],\n stringOriginal = string,\n abbreviations = {\n thousand: 3,\n million: 6,\n billion: 9,\n trillion: 12\n },\n abbreviation,\n value,\n regexp;\n\n if (options.zeroFormat && string === options.zeroFormat) {\n value = 0;\n } else if (options.nullFormat && string === options.nullFormat || !string.replace(/[^0-9]+/g, '').length) {\n value = null;\n } else {\n value = 1;\n\n if (locale.delimiters.decimal !== '.') {\n string = string.replace(/\\./g, '').replace(locale.delimiters.decimal, '.');\n }\n\n for (abbreviation in abbreviations) {\n regexp = new RegExp('[^a-zA-Z]' + locale.abbreviations[abbreviation] + '(?:\\\\)|(\\\\' + locale.currency.symbol + ')?(?:\\\\))?)?$');\n\n if (stringOriginal.match(regexp)) {\n value *= Math.pow(10, abbreviations[abbreviation]);\n break;\n }\n }\n\n // check for negative number\n value *= (string.split('-').length + Math.min(string.split('(').length - 1, string.split(')').length - 1)) % 2 ? 1 : -1;\n\n // remove non numbers\n string = string.replace(/[^0-9\\.]+/g, '');\n\n value *= Number(string);\n }\n\n return value;\n },\n isNaN: function(value) {\n return typeof value === 'number' && isNaN(value);\n },\n includes: function(string, search) {\n return string.indexOf(search) !== -1;\n },\n insert: function(string, subString, start) {\n return string.slice(0, start) + subString + string.slice(start);\n },\n reduce: function(array, callback /*, initialValue*/) {\n if (this === null) {\n throw new TypeError('Array.prototype.reduce called on null or undefined');\n }\n\n if (typeof callback !== 'function') {\n throw new TypeError(callback + ' is not a function');\n }\n\n var t = Object(array),\n len = t.length >>> 0,\n k = 0,\n value;\n\n if (arguments.length === 3) {\n value = arguments[2];\n } else {\n while (k < len && !(k in t)) {\n k++;\n }\n\n if (k >= len) {\n throw new TypeError('Reduce of empty array with no initial value');\n }\n\n value = t[k++];\n }\n for (; k < len; k++) {\n if (k in t) {\n value = callback(value, t[k], k, t);\n }\n }\n return value;\n },\n /**\n * Computes the multiplier necessary to make x >= 1,\n * effectively eliminating miscalculations caused by\n * finite precision.\n */\n multiplier: function (x) {\n var parts = x.toString().split('.');\n\n return parts.length < 2 ? 1 : Math.pow(10, parts[1].length);\n },\n /**\n * Given a variable number of arguments, returns the maximum\n * multiplier that must be used to normalize an operation involving\n * all of them.\n */\n correctionFactor: function () {\n var args = Array.prototype.slice.call(arguments);\n\n return args.reduce(function(accum, next) {\n var mn = _.multiplier(next);\n return accum > mn ? accum : mn;\n }, 1);\n },\n /**\n * Implementation of toFixed() that treats floats more like decimals\n *\n * Fixes binary rounding issues (eg. (0.615).toFixed(2) === '0.61') that present\n * problems for accounting- and finance-related software.\n */\n toFixed: function(value, maxDecimals, roundingFunction, optionals) {\n var splitValue = value.toString().split('.'),\n minDecimals = maxDecimals - (optionals || 0),\n boundedPrecision,\n optionalsRegExp,\n power,\n output;\n\n // Use the smallest precision value possible to avoid errors from floating point representation\n if (splitValue.length === 2) {\n boundedPrecision = Math.min(Math.max(splitValue[1].length, minDecimals), maxDecimals);\n } else {\n boundedPrecision = minDecimals;\n }\n\n power = Math.pow(10, boundedPrecision);\n\n // Multiply up by precision, round accurately, then divide and use native toFixed():\n output = (roundingFunction(value + 'e+' + boundedPrecision) / power).toFixed(boundedPrecision);\n\n if (optionals > maxDecimals - boundedPrecision) {\n optionalsRegExp = new RegExp('\\\\.?0{1,' + (optionals - (maxDecimals - boundedPrecision)) + '}$');\n output = output.replace(optionalsRegExp, '');\n }\n\n return output;\n }\n };\n\n // avaliable options\n numeral.options = options;\n\n // avaliable formats\n numeral.formats = formats;\n\n // avaliable formats\n numeral.locales = locales;\n\n // This function sets the current locale. If\n // no arguments are passed in, it will simply return the current global\n // locale key.\n numeral.locale = function(key) {\n if (key) {\n options.currentLocale = key.toLowerCase();\n }\n\n return options.currentLocale;\n };\n\n // This function provides access to the loaded locale data. If\n // no arguments are passed in, it will simply return the current\n // global locale object.\n numeral.localeData = function(key) {\n if (!key) {\n return locales[options.currentLocale];\n }\n\n key = key.toLowerCase();\n\n if (!locales[key]) {\n throw new Error('Unknown locale : ' + key);\n }\n\n return locales[key];\n };\n\n numeral.reset = function() {\n for (var property in defaults) {\n options[property] = defaults[property];\n }\n };\n\n numeral.zeroFormat = function(format) {\n options.zeroFormat = typeof(format) === 'string' ? format : null;\n };\n\n numeral.nullFormat = function (format) {\n options.nullFormat = typeof(format) === 'string' ? format : null;\n };\n\n numeral.defaultFormat = function(format) {\n options.defaultFormat = typeof(format) === 'string' ? format : '0.0';\n };\n\n numeral.register = function(type, name, format) {\n name = name.toLowerCase();\n\n if (this[type + 's'][name]) {\n throw new TypeError(name + ' ' + type + ' already registered.');\n }\n\n this[type + 's'][name] = format;\n\n return format;\n };\n\n\n numeral.validate = function(val, culture) {\n var _decimalSep,\n _thousandSep,\n _currSymbol,\n _valArray,\n _abbrObj,\n _thousandRegEx,\n localeData,\n temp;\n\n //coerce val to string\n if (typeof val !== 'string') {\n val += '';\n\n if (console.warn) {\n console.warn('Numeral.js: Value is not string. It has been co-erced to: ', val);\n }\n }\n\n //trim whitespaces from either sides\n val = val.trim();\n\n //if val is just digits return true\n if (!!val.match(/^\\d+$/)) {\n return true;\n }\n\n //if val is empty return false\n if (val === '') {\n return false;\n }\n\n //get the decimal and thousands separator from numeral.localeData\n try {\n //check if the culture is understood by numeral. if not, default it to current locale\n localeData = numeral.localeData(culture);\n } catch (e) {\n localeData = numeral.localeData(numeral.locale());\n }\n\n //setup the delimiters and currency symbol based on culture/locale\n _currSymbol = localeData.currency.symbol;\n _abbrObj = localeData.abbreviations;\n _decimalSep = localeData.delimiters.decimal;\n if (localeData.delimiters.thousands === '.') {\n _thousandSep = '\\\\.';\n } else {\n _thousandSep = localeData.delimiters.thousands;\n }\n\n // validating currency symbol\n temp = val.match(/^[^\\d]+/);\n if (temp !== null) {\n val = val.substr(1);\n if (temp[0] !== _currSymbol) {\n return false;\n }\n }\n\n //validating abbreviation symbol\n temp = val.match(/[^\\d]+$/);\n if (temp !== null) {\n val = val.slice(0, -1);\n if (temp[0] !== _abbrObj.thousand && temp[0] !== _abbrObj.million && temp[0] !== _abbrObj.billion && temp[0] !== _abbrObj.trillion) {\n return false;\n }\n }\n\n _thousandRegEx = new RegExp(_thousandSep + '{2}');\n\n if (!val.match(/[^\\d.,]/g)) {\n _valArray = val.split(_decimalSep);\n if (_valArray.length > 2) {\n return false;\n } else {\n if (_valArray.length < 2) {\n return ( !! _valArray[0].match(/^\\d+.*\\d$/) && !_valArray[0].match(_thousandRegEx));\n } else {\n if (_valArray[0].length === 1) {\n return ( !! _valArray[0].match(/^\\d+$/) && !_valArray[0].match(_thousandRegEx) && !! _valArray[1].match(/^\\d+$/));\n } else {\n return ( !! _valArray[0].match(/^\\d+.*\\d$/) && !_valArray[0].match(_thousandRegEx) && !! _valArray[1].match(/^\\d+$/));\n }\n }\n }\n }\n\n return false;\n };\n\n\n /************************************\n Numeral Prototype\n ************************************/\n\n numeral.fn = Numeral.prototype = {\n clone: function() {\n return numeral(this);\n },\n format: function(inputString, roundingFunction) {\n var value = this._value,\n format = inputString || options.defaultFormat,\n kind,\n output,\n formatFunction;\n\n // make sure we have a roundingFunction\n roundingFunction = roundingFunction || Math.round;\n\n // format based on value\n if (value === 0 && options.zeroFormat !== null) {\n output = options.zeroFormat;\n } else if (value === null && options.nullFormat !== null) {\n output = options.nullFormat;\n } else {\n for (kind in formats) {\n if (format.match(formats[kind].regexps.format)) {\n formatFunction = formats[kind].format;\n\n break;\n }\n }\n\n formatFunction = formatFunction || numeral._.numberToFormat;\n\n output = formatFunction(value, format, roundingFunction);\n }\n\n return output;\n },\n value: function() {\n return this._value;\n },\n input: function() {\n return this._input;\n },\n set: function(value) {\n this._value = Number(value);\n\n return this;\n },\n add: function(value) {\n var corrFactor = _.correctionFactor.call(null, this._value, value);\n\n function cback(accum, curr, currI, O) {\n return accum + Math.round(corrFactor * curr);\n }\n\n this._value = _.reduce([this._value, value], cback, 0) / corrFactor;\n\n return this;\n },\n subtract: function(value) {\n var corrFactor = _.correctionFactor.call(null, this._value, value);\n\n function cback(accum, curr, currI, O) {\n return accum - Math.round(corrFactor * curr);\n }\n\n this._value = _.reduce([value], cback, Math.round(this._value * corrFactor)) / corrFactor;\n\n return this;\n },\n multiply: function(value) {\n function cback(accum, curr, currI, O) {\n var corrFactor = _.correctionFactor(accum, curr);\n return Math.round(accum * corrFactor) * Math.round(curr * corrFactor) / Math.round(corrFactor * corrFactor);\n }\n\n this._value = _.reduce([this._value, value], cback, 1);\n\n return this;\n },\n divide: function(value) {\n function cback(accum, curr, currI, O) {\n var corrFactor = _.correctionFactor(accum, curr);\n return Math.round(accum * corrFactor) / Math.round(curr * corrFactor);\n }\n\n this._value = _.reduce([this._value, value], cback);\n\n return this;\n },\n difference: function(value) {\n return Math.abs(numeral(this._value).subtract(value).value());\n }\n };\n\n /************************************\n Default Locale && Format\n ************************************/\n\n numeral.register('locale', 'en', {\n delimiters: {\n thousands: ',',\n decimal: '.'\n },\n abbreviations: {\n thousand: 'k',\n million: 'm',\n billion: 'b',\n trillion: 't'\n },\n ordinal: function(number) {\n var b = number % 10;\n return (~~(number % 100 / 10) === 1) ? 'th' :\n (b === 1) ? 'st' :\n (b === 2) ? 'nd' :\n (b === 3) ? 'rd' : 'th';\n },\n currency: {\n symbol: '$'\n }\n });\n\n \n\n(function() {\n numeral.register('format', 'bps', {\n regexps: {\n format: /(BPS)/,\n unformat: /(BPS)/\n },\n format: function(value, format, roundingFunction) {\n var space = numeral._.includes(format, ' BPS') ? ' ' : '',\n output;\n\n value = value * 10000;\n\n // check for space before BPS\n format = format.replace(/\\s?BPS/, '');\n\n output = numeral._.numberToFormat(value, format, roundingFunction);\n\n if (numeral._.includes(output, ')')) {\n output = output.split('');\n\n output.splice(-1, 0, space + 'BPS');\n\n output = output.join('');\n } else {\n output = output + space + 'BPS';\n }\n\n return output;\n },\n unformat: function(string) {\n return +(numeral._.stringToNumber(string) * 0.0001).toFixed(15);\n }\n });\n})();\n\n\n(function() {\n var decimal = {\n base: 1000,\n suffixes: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']\n },\n binary = {\n base: 1024,\n suffixes: ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']\n };\n\n var allSuffixes = decimal.suffixes.concat(binary.suffixes.filter(function (item) {\n return decimal.suffixes.indexOf(item) < 0;\n }));\n var unformatRegex = allSuffixes.join('|');\n // Allow support for BPS (http://www.investopedia.com/terms/b/basispoint.asp)\n unformatRegex = '(' + unformatRegex.replace('B', 'B(?!PS)') + ')';\n\n numeral.register('format', 'bytes', {\n regexps: {\n format: /([0\\s]i?b)/,\n unformat: new RegExp(unformatRegex)\n },\n format: function(value, format, roundingFunction) {\n var output,\n bytes = numeral._.includes(format, 'ib') ? binary : decimal,\n suffix = numeral._.includes(format, ' b') || numeral._.includes(format, ' ib') ? ' ' : '',\n power,\n min,\n max;\n\n // check for space before\n format = format.replace(/\\s?i?b/, '');\n\n for (power = 0; power <= bytes.suffixes.length; power++) {\n min = Math.pow(bytes.base, power);\n max = Math.pow(bytes.base, power + 1);\n\n if (value === null || value === 0 || value >= min && value < max) {\n suffix += bytes.suffixes[power];\n\n if (min > 0) {\n value = value / min;\n }\n\n break;\n }\n }\n\n output = numeral._.numberToFormat(value, format, roundingFunction);\n\n return output + suffix;\n },\n unformat: function(string) {\n var value = numeral._.stringToNumber(string),\n power,\n bytesMultiplier;\n\n if (value) {\n for (power = decimal.suffixes.length - 1; power >= 0; power--) {\n if (numeral._.includes(string, decimal.suffixes[power])) {\n bytesMultiplier = Math.pow(decimal.base, power);\n\n break;\n }\n\n if (numeral._.includes(string, binary.suffixes[power])) {\n bytesMultiplier = Math.pow(binary.base, power);\n\n break;\n }\n }\n\n value *= (bytesMultiplier || 1);\n }\n\n return value;\n }\n });\n})();\n\n\n(function() {\n numeral.register('format', 'currency', {\n regexps: {\n format: /(\\$)/\n },\n format: function(value, format, roundingFunction) {\n var locale = numeral.locales[numeral.options.currentLocale],\n symbols = {\n before: format.match(/^([\\+|\\-|\\(|\\s|\\$]*)/)[0],\n after: format.match(/([\\+|\\-|\\)|\\s|\\$]*)$/)[0]\n },\n output,\n symbol,\n i;\n\n // strip format of spaces and $\n format = format.replace(/\\s?\\$\\s?/, '');\n\n // format the number\n output = numeral._.numberToFormat(value, format, roundingFunction);\n\n // update the before and after based on value\n if (value >= 0) {\n symbols.before = symbols.before.replace(/[\\-\\(]/, '');\n symbols.after = symbols.after.replace(/[\\-\\)]/, '');\n } else if (value < 0 && (!numeral._.includes(symbols.before, '-') && !numeral._.includes(symbols.before, '('))) {\n symbols.before = '-' + symbols.before;\n }\n\n // loop through each before symbol\n for (i = 0; i < symbols.before.length; i++) {\n symbol = symbols.before[i];\n\n switch (symbol) {\n case '$':\n output = numeral._.insert(output, locale.currency.symbol, i);\n break;\n case ' ':\n output = numeral._.insert(output, ' ', i + locale.currency.symbol.length - 1);\n break;\n }\n }\n\n // loop through each after symbol\n for (i = symbols.after.length - 1; i >= 0; i--) {\n symbol = symbols.after[i];\n\n switch (symbol) {\n case '$':\n output = i === symbols.after.length - 1 ? output + locale.currency.symbol : numeral._.insert(output, locale.currency.symbol, -(symbols.after.length - (1 + i)));\n break;\n case ' ':\n output = i === symbols.after.length - 1 ? output + ' ' : numeral._.insert(output, ' ', -(symbols.after.length - (1 + i) + locale.currency.symbol.length - 1));\n break;\n }\n }\n\n\n return output;\n }\n });\n})();\n\n\n(function() {\n numeral.register('format', 'exponential', {\n regexps: {\n format: /(e\\+|e-)/,\n unformat: /(e\\+|e-)/\n },\n format: function(value, format, roundingFunction) {\n var output,\n exponential = typeof value === 'number' && !numeral._.isNaN(value) ? value.toExponential() : '0e+0',\n parts = exponential.split('e');\n\n format = format.replace(/e[\\+|\\-]{1}0/, '');\n\n output = numeral._.numberToFormat(Number(parts[0]), format, roundingFunction);\n\n return output + 'e' + parts[1];\n },\n unformat: function(string) {\n var parts = numeral._.includes(string, 'e+') ? string.split('e+') : string.split('e-'),\n value = Number(parts[0]),\n power = Number(parts[1]);\n\n power = numeral._.includes(string, 'e-') ? power *= -1 : power;\n\n function cback(accum, curr, currI, O) {\n var corrFactor = numeral._.correctionFactor(accum, curr),\n num = (accum * corrFactor) * (curr * corrFactor) / (corrFactor * corrFactor);\n return num;\n }\n\n return numeral._.reduce([value, Math.pow(10, power)], cback, 1);\n }\n });\n})();\n\n\n(function() {\n numeral.register('format', 'ordinal', {\n regexps: {\n format: /(o)/\n },\n format: function(value, format, roundingFunction) {\n var locale = numeral.locales[numeral.options.currentLocale],\n output,\n ordinal = numeral._.includes(format, ' o') ? ' ' : '';\n\n // check for space before\n format = format.replace(/\\s?o/, '');\n\n ordinal += locale.ordinal(value);\n\n output = numeral._.numberToFormat(value, format, roundingFunction);\n\n return output + ordinal;\n }\n });\n})();\n\n\n(function() {\n numeral.register('format', 'percentage', {\n regexps: {\n format: /(%)/,\n unformat: /(%)/\n },\n format: function(value, format, roundingFunction) {\n var space = numeral._.includes(format, ' %') ? ' ' : '',\n output;\n\n if (numeral.options.scalePercentBy100) {\n value = value * 100;\n }\n\n // check for space before %\n format = format.replace(/\\s?\\%/, '');\n\n output = numeral._.numberToFormat(value, format, roundingFunction);\n\n if (numeral._.includes(output, ')')) {\n output = output.split('');\n\n output.splice(-1, 0, space + '%');\n\n output = output.join('');\n } else {\n output = output + space + '%';\n }\n\n return output;\n },\n unformat: function(string) {\n var number = numeral._.stringToNumber(string);\n if (numeral.options.scalePercentBy100) {\n return number * 0.01;\n }\n return number;\n }\n });\n})();\n\n\n(function() {\n numeral.register('format', 'time', {\n regexps: {\n format: /(:)/,\n unformat: /(:)/\n },\n format: function(value, format, roundingFunction) {\n var hours = Math.floor(value / 60 / 60),\n minutes = Math.floor((value - (hours * 60 * 60)) / 60),\n seconds = Math.round(value - (hours * 60 * 60) - (minutes * 60));\n\n return hours + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);\n },\n unformat: function(string) {\n var timeArray = string.split(':'),\n seconds = 0;\n\n // turn hours and minutes into seconds and add them all up\n if (timeArray.length === 3) {\n // hours\n seconds = seconds + (Number(timeArray[0]) * 60 * 60);\n // minutes\n seconds = seconds + (Number(timeArray[1]) * 60);\n // seconds\n seconds = seconds + Number(timeArray[2]);\n } else if (timeArray.length === 2) {\n // minutes\n seconds = seconds + (Number(timeArray[0]) * 60);\n // seconds\n seconds = seconds + Number(timeArray[1]);\n }\n return Number(seconds);\n }\n });\n})();\n\nreturn numeral;\n}));\n});\n\n/*\n * @license\n * Copyright 2019 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// easy aliases for common format strings\nconst types = {\n abbrev: \"0a\", // or 'approx'?\n ordinal: \"0o\",\n percent: \"0%\",\n bytes: \"0[.][00] ib\",\n e: \"0[.00]e+0\",\n thousands: \"0,0[.][00]\"\n};\n\n// use thin spaces to separate thousands chunks\n// debugger;\nnumeral.locales.en.delimiters.thousands = \" \";\n\nclass PfeNumber extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-number\";\n }\n\n get styleUrl() {\n return \"pfe-number.scss\";\n }\n\n get templateUrl() {\n return \"pfe-number.html\";\n }\n\n static get observedAttributes() {\n return [\"number\", \"format\", \"type\"];\n }\n\n constructor() {\n super(PfeNumber);\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.connected = true;\n\n this._determineFormat();\n this._setInitialNumber();\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n super.attributeChangedCallback(...arguments);\n switch (attr) {\n case \"type\":\n this._determineFormat();\n break;\n case \"format\":\n this._updateNumber(this.getAttribute(\"number\"), newVal);\n break;\n case \"number\":\n this._updateNumber(newVal, this.getAttribute(\"format\"));\n }\n }\n\n _setInitialNumber() {\n const numberAttrDefined = !Number.isNaN(\n parseFloat(this.getAttribute(\"number\"))\n );\n const numberContentDefined = !Number.isNaN(parseFloat(this.textContent));\n\n if (numberAttrDefined) {\n this.setAttribute(\"number\", this.getAttribute(\"number\"));\n } else if (numberContentDefined) {\n this.setAttribute(\"number\", this.textContent);\n }\n }\n\n _determineFormat() {\n let type = this.getAttribute(\"type\");\n\n if (type && types[type]) {\n this.setAttribute(\"format\", types[type]);\n } else {\n this.setAttribute(\"format\", this.getAttribute(\"format\") || \"0\");\n }\n }\n\n _updateNumber(num, type) {\n this.shadowRoot.querySelector(\"span\").textContent = this._format(num, type);\n }\n\n _format(num, type) {\n return numeral(num).format(type);\n }\n}\n\nPFElement.create(PfeNumber);\n//# sourceMappingURL=pfe-number.js.map\n"],"names":["commonjsGlobal","window","global","self","createCommonjsModule","fn","module","exports","numeral","factory","_","VERSION","formats","locales","defaults","currentLocale","zeroFormat","nullFormat","defaultFormat","scalePercentBy100","options","Numeral","input","number","_input","_value","value","kind","unformatFunction","regexp","isNumeral","isNaN","replace","length","regexps","unformat","match","stringToNumber","Number","version","obj","numberToFormat","format","roundingFunction","locale","negP","optDec","leadingCount","abbr","trillion","billion","million","thousand","decimal","neg","abbrForce","abs","int","precision","signed","thousands","output","Math","includes","indexOf","RegExp","abbreviations","toString","split","toFixed","delimiters","slice","String","i","string","stringOriginal","abbreviation","currency","symbol","pow","min","search","insert","subString","start","reduce","array","callback","TypeError","t","Object","len","k","arguments","multiplier","x","parts","correctionFactor","args","Array","prototype","call","accum","next","mn","maxDecimals","optionals","splitValue","minDecimals","boundedPrecision","optionalsRegExp","power","max","key","toLowerCase","localeData","Error","reset","property","register","type","name","validate","val","culture","_decimalSep","_thousandSep","_currSymbol","_valArray","_abbrObj","_thousandRegEx","temp","console","warn","trim","e","substr","clone","inputString","formatFunction","round","set","add","corrFactor","cback","curr","currI","O","subtract","multiply","divide","difference","ordinal","b","space","splice","join","base","suffixes","binary","allSuffixes","concat","filter","item","unformatRegex","bytes","suffix","bytesMultiplier","symbols","before","after","exponential","toExponential","num","hours","floor","minutes","seconds","timeArray","types","abbrev","percent","en","PfeNumber","connected","_determineFormat","_setInitialNumber","attr","oldVal","newVal","_updateNumber","getAttribute","numberAttrDefined","parseFloat","numberContentDefined","textContent","setAttribute","shadowRoot","querySelector","_format","PFElement","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-number/pfe-number.umd.min.js b/elements/pfe-number/pfe-number.umd.min.js new file mode 100644 index 0000000000..e0bf33147f --- /dev/null +++ b/elements/pfe-number/pfe-number.umd.min.js @@ -0,0 +1,2 @@ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("../pfelement/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min"],t):t(e.PFElement)}(this,function(t){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t;var r=function(){function n(e,t){for(var r=0;r>>0,i=0;if(3===arguments.length)r=arguments[2];else{for(;i:host{display:inline;white-space:nowrap}"}},{key:"styleUrl",get:function(){return"pfe-number.scss"}},{key:"templateUrl",get:function(){return"pfe-number.html"}}],[{key:"tag",get:function(){return"pfe-number"}},{key:"observedAttributes",get:function(){return["number","format","type"]}}]),r(n,[{key:"connectedCallback",value:function(){o(n.prototype.__proto__||Object.getPrototypeOf(n.prototype),"connectedCallback",this).call(this),this.connected=!0,this._determineFormat(),this._setInitialNumber()}},{key:"attributeChangedCallback",value:function(e,t,r){switch(o(n.prototype.__proto__||Object.getPrototypeOf(n.prototype),"attributeChangedCallback",this).apply(this,arguments),e){case"type":this._determineFormat();break;case"format":this._updateNumber(this.getAttribute("number"),r);break;case"number":this._updateNumber(r,this.getAttribute("format"))}}},{key:"_setInitialNumber",value:function(){var e=!Number.isNaN(parseFloat(this.getAttribute("number"))),t=!Number.isNaN(parseFloat(this.textContent));e?this.setAttribute("number",this.getAttribute("number")):t&&this.setAttribute("number",this.textContent)}},{key:"_determineFormat",value:function(){var e=this.getAttribute("type");e&&a[e]?this.setAttribute("format",a[e]):this.setAttribute("format",this.getAttribute("format")||"0")}},{key:"_updateNumber",value:function(e,t){this.shadowRoot.querySelector("span").textContent=this._format(e,t)}},{key:"_format",value:function(e,t){return i(e).format(t)}}]),n}();t.create(u)}); +//# sourceMappingURL=pfe-number.umd.min.js.map diff --git a/elements/pfe-number/pfe-number.umd.min.js.map b/elements/pfe-number/pfe-number.umd.min.js.map new file mode 100644 index 0000000000..ec281bf102 --- /dev/null +++ b/elements/pfe-number/pfe-number.umd.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-number.umd.min.js","sources":["pfe-number.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\nvar commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};\n\nfunction createCommonjsModule(fn, module) {\n\treturn module = { exports: {} }, fn(module, module.exports), module.exports;\n}\n\nvar numeral = createCommonjsModule(function (module) {\n/*! @preserve\n * numeral.js\n * version : 2.0.6\n * author : Adam Draper\n * license : MIT\n * http://adamwdraper.github.com/Numeral-js/\n */\n\n(function (global, factory) {\n if (module.exports) {\n module.exports = factory();\n } else {\n global.numeral = factory();\n }\n}(commonjsGlobal, function () {\n /************************************\n Variables\n ************************************/\n\n var numeral,\n _,\n VERSION = '2.0.6',\n formats = {},\n locales = {},\n defaults = {\n currentLocale: 'en',\n zeroFormat: null,\n nullFormat: null,\n defaultFormat: '0,0',\n scalePercentBy100: true\n },\n options = {\n currentLocale: defaults.currentLocale,\n zeroFormat: defaults.zeroFormat,\n nullFormat: defaults.nullFormat,\n defaultFormat: defaults.defaultFormat,\n scalePercentBy100: defaults.scalePercentBy100\n };\n\n\n /************************************\n Constructors\n ************************************/\n\n // Numeral prototype object\n function Numeral(input, number) {\n this._input = input;\n\n this._value = number;\n }\n\n numeral = function(input) {\n var value,\n kind,\n unformatFunction,\n regexp;\n\n if (numeral.isNumeral(input)) {\n value = input.value();\n } else if (input === 0 || typeof input === 'undefined') {\n value = 0;\n } else if (input === null || _.isNaN(input)) {\n value = null;\n } else if (typeof input === 'string') {\n if (options.zeroFormat && input === options.zeroFormat) {\n value = 0;\n } else if (options.nullFormat && input === options.nullFormat || !input.replace(/[^0-9]+/g, '').length) {\n value = null;\n } else {\n for (kind in formats) {\n regexp = typeof formats[kind].regexps.unformat === 'function' ? formats[kind].regexps.unformat() : formats[kind].regexps.unformat;\n\n if (regexp && input.match(regexp)) {\n unformatFunction = formats[kind].unformat;\n\n break;\n }\n }\n\n unformatFunction = unformatFunction || numeral._.stringToNumber;\n\n value = unformatFunction(input);\n }\n } else {\n value = Number(input)|| null;\n }\n\n return new Numeral(input, value);\n };\n\n // version number\n numeral.version = VERSION;\n\n // compare numeral object\n numeral.isNumeral = function(obj) {\n return obj instanceof Numeral;\n };\n\n // helper functions\n numeral._ = _ = {\n // formats numbers separators, decimals places, signs, abbreviations\n numberToFormat: function(value, format, roundingFunction) {\n var locale = locales[numeral.options.currentLocale],\n negP = false,\n optDec = false,\n leadingCount = 0,\n abbr = '',\n trillion = 1000000000000,\n billion = 1000000000,\n million = 1000000,\n thousand = 1000,\n decimal = '',\n neg = false,\n abbrForce, // force abbreviation\n abs,\n int,\n precision,\n signed,\n thousands,\n output;\n\n // make sure we never format a null value\n value = value || 0;\n\n abs = Math.abs(value);\n\n // see if we should use parentheses for negative number or if we should prefix with a sign\n // if both are present we default to parentheses\n if (numeral._.includes(format, '(')) {\n negP = true;\n format = format.replace(/[\\(|\\)]/g, '');\n } else if (numeral._.includes(format, '+') || numeral._.includes(format, '-')) {\n signed = numeral._.includes(format, '+') ? format.indexOf('+') : value < 0 ? format.indexOf('-') : -1;\n format = format.replace(/[\\+|\\-]/g, '');\n }\n\n // see if abbreviation is wanted\n if (numeral._.includes(format, 'a')) {\n abbrForce = format.match(/a(k|m|b|t)?/);\n\n abbrForce = abbrForce ? abbrForce[1] : false;\n\n // check for space before abbreviation\n if (numeral._.includes(format, ' a')) {\n abbr = ' ';\n }\n\n format = format.replace(new RegExp(abbr + 'a[kmbt]?'), '');\n\n if (abs >= trillion && !abbrForce || abbrForce === 't') {\n // trillion\n abbr += locale.abbreviations.trillion;\n value = value / trillion;\n } else if (abs < trillion && abs >= billion && !abbrForce || abbrForce === 'b') {\n // billion\n abbr += locale.abbreviations.billion;\n value = value / billion;\n } else if (abs < billion && abs >= million && !abbrForce || abbrForce === 'm') {\n // million\n abbr += locale.abbreviations.million;\n value = value / million;\n } else if (abs < million && abs >= thousand && !abbrForce || abbrForce === 'k') {\n // thousand\n abbr += locale.abbreviations.thousand;\n value = value / thousand;\n }\n }\n\n // check for optional decimals\n if (numeral._.includes(format, '[.]')) {\n optDec = true;\n format = format.replace('[.]', '.');\n }\n\n // break number and format\n int = value.toString().split('.')[0];\n precision = format.split('.')[1];\n thousands = format.indexOf(',');\n leadingCount = (format.split('.')[0].split(',')[0].match(/0/g) || []).length;\n\n if (precision) {\n if (numeral._.includes(precision, '[')) {\n precision = precision.replace(']', '');\n precision = precision.split('[');\n decimal = numeral._.toFixed(value, (precision[0].length + precision[1].length), roundingFunction, precision[1].length);\n } else {\n decimal = numeral._.toFixed(value, precision.length, roundingFunction);\n }\n\n int = decimal.split('.')[0];\n\n if (numeral._.includes(decimal, '.')) {\n decimal = locale.delimiters.decimal + decimal.split('.')[1];\n } else {\n decimal = '';\n }\n\n if (optDec && Number(decimal.slice(1)) === 0) {\n decimal = '';\n }\n } else {\n int = numeral._.toFixed(value, 0, roundingFunction);\n }\n\n // check abbreviation again after rounding\n if (abbr && !abbrForce && Number(int) >= 1000 && abbr !== locale.abbreviations.trillion) {\n int = String(Number(int) / 1000);\n\n switch (abbr) {\n case locale.abbreviations.thousand:\n abbr = locale.abbreviations.million;\n break;\n case locale.abbreviations.million:\n abbr = locale.abbreviations.billion;\n break;\n case locale.abbreviations.billion:\n abbr = locale.abbreviations.trillion;\n break;\n }\n }\n\n\n // format number\n if (numeral._.includes(int, '-')) {\n int = int.slice(1);\n neg = true;\n }\n\n if (int.length < leadingCount) {\n for (var i = leadingCount - int.length; i > 0; i--) {\n int = '0' + int;\n }\n }\n\n if (thousands > -1) {\n int = int.toString().replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1' + locale.delimiters.thousands);\n }\n\n if (format.indexOf('.') === 0) {\n int = '';\n }\n\n output = int + decimal + (abbr ? abbr : '');\n\n if (negP) {\n output = (negP && neg ? '(' : '') + output + (negP && neg ? ')' : '');\n } else {\n if (signed >= 0) {\n output = signed === 0 ? (neg ? '-' : '+') + output : output + (neg ? '-' : '+');\n } else if (neg) {\n output = '-' + output;\n }\n }\n\n return output;\n },\n // unformats numbers separators, decimals places, signs, abbreviations\n stringToNumber: function(string) {\n var locale = locales[options.currentLocale],\n stringOriginal = string,\n abbreviations = {\n thousand: 3,\n million: 6,\n billion: 9,\n trillion: 12\n },\n abbreviation,\n value,\n regexp;\n\n if (options.zeroFormat && string === options.zeroFormat) {\n value = 0;\n } else if (options.nullFormat && string === options.nullFormat || !string.replace(/[^0-9]+/g, '').length) {\n value = null;\n } else {\n value = 1;\n\n if (locale.delimiters.decimal !== '.') {\n string = string.replace(/\\./g, '').replace(locale.delimiters.decimal, '.');\n }\n\n for (abbreviation in abbreviations) {\n regexp = new RegExp('[^a-zA-Z]' + locale.abbreviations[abbreviation] + '(?:\\\\)|(\\\\' + locale.currency.symbol + ')?(?:\\\\))?)?$');\n\n if (stringOriginal.match(regexp)) {\n value *= Math.pow(10, abbreviations[abbreviation]);\n break;\n }\n }\n\n // check for negative number\n value *= (string.split('-').length + Math.min(string.split('(').length - 1, string.split(')').length - 1)) % 2 ? 1 : -1;\n\n // remove non numbers\n string = string.replace(/[^0-9\\.]+/g, '');\n\n value *= Number(string);\n }\n\n return value;\n },\n isNaN: function(value) {\n return typeof value === 'number' && isNaN(value);\n },\n includes: function(string, search) {\n return string.indexOf(search) !== -1;\n },\n insert: function(string, subString, start) {\n return string.slice(0, start) + subString + string.slice(start);\n },\n reduce: function(array, callback /*, initialValue*/) {\n if (this === null) {\n throw new TypeError('Array.prototype.reduce called on null or undefined');\n }\n\n if (typeof callback !== 'function') {\n throw new TypeError(callback + ' is not a function');\n }\n\n var t = Object(array),\n len = t.length >>> 0,\n k = 0,\n value;\n\n if (arguments.length === 3) {\n value = arguments[2];\n } else {\n while (k < len && !(k in t)) {\n k++;\n }\n\n if (k >= len) {\n throw new TypeError('Reduce of empty array with no initial value');\n }\n\n value = t[k++];\n }\n for (; k < len; k++) {\n if (k in t) {\n value = callback(value, t[k], k, t);\n }\n }\n return value;\n },\n /**\n * Computes the multiplier necessary to make x >= 1,\n * effectively eliminating miscalculations caused by\n * finite precision.\n */\n multiplier: function (x) {\n var parts = x.toString().split('.');\n\n return parts.length < 2 ? 1 : Math.pow(10, parts[1].length);\n },\n /**\n * Given a variable number of arguments, returns the maximum\n * multiplier that must be used to normalize an operation involving\n * all of them.\n */\n correctionFactor: function () {\n var args = Array.prototype.slice.call(arguments);\n\n return args.reduce(function(accum, next) {\n var mn = _.multiplier(next);\n return accum > mn ? accum : mn;\n }, 1);\n },\n /**\n * Implementation of toFixed() that treats floats more like decimals\n *\n * Fixes binary rounding issues (eg. (0.615).toFixed(2) === '0.61') that present\n * problems for accounting- and finance-related software.\n */\n toFixed: function(value, maxDecimals, roundingFunction, optionals) {\n var splitValue = value.toString().split('.'),\n minDecimals = maxDecimals - (optionals || 0),\n boundedPrecision,\n optionalsRegExp,\n power,\n output;\n\n // Use the smallest precision value possible to avoid errors from floating point representation\n if (splitValue.length === 2) {\n boundedPrecision = Math.min(Math.max(splitValue[1].length, minDecimals), maxDecimals);\n } else {\n boundedPrecision = minDecimals;\n }\n\n power = Math.pow(10, boundedPrecision);\n\n // Multiply up by precision, round accurately, then divide and use native toFixed():\n output = (roundingFunction(value + 'e+' + boundedPrecision) / power).toFixed(boundedPrecision);\n\n if (optionals > maxDecimals - boundedPrecision) {\n optionalsRegExp = new RegExp('\\\\.?0{1,' + (optionals - (maxDecimals - boundedPrecision)) + '}$');\n output = output.replace(optionalsRegExp, '');\n }\n\n return output;\n }\n };\n\n // avaliable options\n numeral.options = options;\n\n // avaliable formats\n numeral.formats = formats;\n\n // avaliable formats\n numeral.locales = locales;\n\n // This function sets the current locale. If\n // no arguments are passed in, it will simply return the current global\n // locale key.\n numeral.locale = function(key) {\n if (key) {\n options.currentLocale = key.toLowerCase();\n }\n\n return options.currentLocale;\n };\n\n // This function provides access to the loaded locale data. If\n // no arguments are passed in, it will simply return the current\n // global locale object.\n numeral.localeData = function(key) {\n if (!key) {\n return locales[options.currentLocale];\n }\n\n key = key.toLowerCase();\n\n if (!locales[key]) {\n throw new Error('Unknown locale : ' + key);\n }\n\n return locales[key];\n };\n\n numeral.reset = function() {\n for (var property in defaults) {\n options[property] = defaults[property];\n }\n };\n\n numeral.zeroFormat = function(format) {\n options.zeroFormat = typeof(format) === 'string' ? format : null;\n };\n\n numeral.nullFormat = function (format) {\n options.nullFormat = typeof(format) === 'string' ? format : null;\n };\n\n numeral.defaultFormat = function(format) {\n options.defaultFormat = typeof(format) === 'string' ? format : '0.0';\n };\n\n numeral.register = function(type, name, format) {\n name = name.toLowerCase();\n\n if (this[type + 's'][name]) {\n throw new TypeError(name + ' ' + type + ' already registered.');\n }\n\n this[type + 's'][name] = format;\n\n return format;\n };\n\n\n numeral.validate = function(val, culture) {\n var _decimalSep,\n _thousandSep,\n _currSymbol,\n _valArray,\n _abbrObj,\n _thousandRegEx,\n localeData,\n temp;\n\n //coerce val to string\n if (typeof val !== 'string') {\n val += '';\n\n if (console.warn) {\n console.warn('Numeral.js: Value is not string. It has been co-erced to: ', val);\n }\n }\n\n //trim whitespaces from either sides\n val = val.trim();\n\n //if val is just digits return true\n if (!!val.match(/^\\d+$/)) {\n return true;\n }\n\n //if val is empty return false\n if (val === '') {\n return false;\n }\n\n //get the decimal and thousands separator from numeral.localeData\n try {\n //check if the culture is understood by numeral. if not, default it to current locale\n localeData = numeral.localeData(culture);\n } catch (e) {\n localeData = numeral.localeData(numeral.locale());\n }\n\n //setup the delimiters and currency symbol based on culture/locale\n _currSymbol = localeData.currency.symbol;\n _abbrObj = localeData.abbreviations;\n _decimalSep = localeData.delimiters.decimal;\n if (localeData.delimiters.thousands === '.') {\n _thousandSep = '\\\\.';\n } else {\n _thousandSep = localeData.delimiters.thousands;\n }\n\n // validating currency symbol\n temp = val.match(/^[^\\d]+/);\n if (temp !== null) {\n val = val.substr(1);\n if (temp[0] !== _currSymbol) {\n return false;\n }\n }\n\n //validating abbreviation symbol\n temp = val.match(/[^\\d]+$/);\n if (temp !== null) {\n val = val.slice(0, -1);\n if (temp[0] !== _abbrObj.thousand && temp[0] !== _abbrObj.million && temp[0] !== _abbrObj.billion && temp[0] !== _abbrObj.trillion) {\n return false;\n }\n }\n\n _thousandRegEx = new RegExp(_thousandSep + '{2}');\n\n if (!val.match(/[^\\d.,]/g)) {\n _valArray = val.split(_decimalSep);\n if (_valArray.length > 2) {\n return false;\n } else {\n if (_valArray.length < 2) {\n return ( !! _valArray[0].match(/^\\d+.*\\d$/) && !_valArray[0].match(_thousandRegEx));\n } else {\n if (_valArray[0].length === 1) {\n return ( !! _valArray[0].match(/^\\d+$/) && !_valArray[0].match(_thousandRegEx) && !! _valArray[1].match(/^\\d+$/));\n } else {\n return ( !! _valArray[0].match(/^\\d+.*\\d$/) && !_valArray[0].match(_thousandRegEx) && !! _valArray[1].match(/^\\d+$/));\n }\n }\n }\n }\n\n return false;\n };\n\n\n /************************************\n Numeral Prototype\n ************************************/\n\n numeral.fn = Numeral.prototype = {\n clone: function() {\n return numeral(this);\n },\n format: function(inputString, roundingFunction) {\n var value = this._value,\n format = inputString || options.defaultFormat,\n kind,\n output,\n formatFunction;\n\n // make sure we have a roundingFunction\n roundingFunction = roundingFunction || Math.round;\n\n // format based on value\n if (value === 0 && options.zeroFormat !== null) {\n output = options.zeroFormat;\n } else if (value === null && options.nullFormat !== null) {\n output = options.nullFormat;\n } else {\n for (kind in formats) {\n if (format.match(formats[kind].regexps.format)) {\n formatFunction = formats[kind].format;\n\n break;\n }\n }\n\n formatFunction = formatFunction || numeral._.numberToFormat;\n\n output = formatFunction(value, format, roundingFunction);\n }\n\n return output;\n },\n value: function() {\n return this._value;\n },\n input: function() {\n return this._input;\n },\n set: function(value) {\n this._value = Number(value);\n\n return this;\n },\n add: function(value) {\n var corrFactor = _.correctionFactor.call(null, this._value, value);\n\n function cback(accum, curr, currI, O) {\n return accum + Math.round(corrFactor * curr);\n }\n\n this._value = _.reduce([this._value, value], cback, 0) / corrFactor;\n\n return this;\n },\n subtract: function(value) {\n var corrFactor = _.correctionFactor.call(null, this._value, value);\n\n function cback(accum, curr, currI, O) {\n return accum - Math.round(corrFactor * curr);\n }\n\n this._value = _.reduce([value], cback, Math.round(this._value * corrFactor)) / corrFactor;\n\n return this;\n },\n multiply: function(value) {\n function cback(accum, curr, currI, O) {\n var corrFactor = _.correctionFactor(accum, curr);\n return Math.round(accum * corrFactor) * Math.round(curr * corrFactor) / Math.round(corrFactor * corrFactor);\n }\n\n this._value = _.reduce([this._value, value], cback, 1);\n\n return this;\n },\n divide: function(value) {\n function cback(accum, curr, currI, O) {\n var corrFactor = _.correctionFactor(accum, curr);\n return Math.round(accum * corrFactor) / Math.round(curr * corrFactor);\n }\n\n this._value = _.reduce([this._value, value], cback);\n\n return this;\n },\n difference: function(value) {\n return Math.abs(numeral(this._value).subtract(value).value());\n }\n };\n\n /************************************\n Default Locale && Format\n ************************************/\n\n numeral.register('locale', 'en', {\n delimiters: {\n thousands: ',',\n decimal: '.'\n },\n abbreviations: {\n thousand: 'k',\n million: 'm',\n billion: 'b',\n trillion: 't'\n },\n ordinal: function(number) {\n var b = number % 10;\n return (~~(number % 100 / 10) === 1) ? 'th' :\n (b === 1) ? 'st' :\n (b === 2) ? 'nd' :\n (b === 3) ? 'rd' : 'th';\n },\n currency: {\n symbol: '$'\n }\n });\n\n \n\n(function() {\n numeral.register('format', 'bps', {\n regexps: {\n format: /(BPS)/,\n unformat: /(BPS)/\n },\n format: function(value, format, roundingFunction) {\n var space = numeral._.includes(format, ' BPS') ? ' ' : '',\n output;\n\n value = value * 10000;\n\n // check for space before BPS\n format = format.replace(/\\s?BPS/, '');\n\n output = numeral._.numberToFormat(value, format, roundingFunction);\n\n if (numeral._.includes(output, ')')) {\n output = output.split('');\n\n output.splice(-1, 0, space + 'BPS');\n\n output = output.join('');\n } else {\n output = output + space + 'BPS';\n }\n\n return output;\n },\n unformat: function(string) {\n return +(numeral._.stringToNumber(string) * 0.0001).toFixed(15);\n }\n });\n})();\n\n\n(function() {\n var decimal = {\n base: 1000,\n suffixes: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']\n },\n binary = {\n base: 1024,\n suffixes: ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']\n };\n\n var allSuffixes = decimal.suffixes.concat(binary.suffixes.filter(function (item) {\n return decimal.suffixes.indexOf(item) < 0;\n }));\n var unformatRegex = allSuffixes.join('|');\n // Allow support for BPS (http://www.investopedia.com/terms/b/basispoint.asp)\n unformatRegex = '(' + unformatRegex.replace('B', 'B(?!PS)') + ')';\n\n numeral.register('format', 'bytes', {\n regexps: {\n format: /([0\\s]i?b)/,\n unformat: new RegExp(unformatRegex)\n },\n format: function(value, format, roundingFunction) {\n var output,\n bytes = numeral._.includes(format, 'ib') ? binary : decimal,\n suffix = numeral._.includes(format, ' b') || numeral._.includes(format, ' ib') ? ' ' : '',\n power,\n min,\n max;\n\n // check for space before\n format = format.replace(/\\s?i?b/, '');\n\n for (power = 0; power <= bytes.suffixes.length; power++) {\n min = Math.pow(bytes.base, power);\n max = Math.pow(bytes.base, power + 1);\n\n if (value === null || value === 0 || value >= min && value < max) {\n suffix += bytes.suffixes[power];\n\n if (min > 0) {\n value = value / min;\n }\n\n break;\n }\n }\n\n output = numeral._.numberToFormat(value, format, roundingFunction);\n\n return output + suffix;\n },\n unformat: function(string) {\n var value = numeral._.stringToNumber(string),\n power,\n bytesMultiplier;\n\n if (value) {\n for (power = decimal.suffixes.length - 1; power >= 0; power--) {\n if (numeral._.includes(string, decimal.suffixes[power])) {\n bytesMultiplier = Math.pow(decimal.base, power);\n\n break;\n }\n\n if (numeral._.includes(string, binary.suffixes[power])) {\n bytesMultiplier = Math.pow(binary.base, power);\n\n break;\n }\n }\n\n value *= (bytesMultiplier || 1);\n }\n\n return value;\n }\n });\n})();\n\n\n(function() {\n numeral.register('format', 'currency', {\n regexps: {\n format: /(\\$)/\n },\n format: function(value, format, roundingFunction) {\n var locale = numeral.locales[numeral.options.currentLocale],\n symbols = {\n before: format.match(/^([\\+|\\-|\\(|\\s|\\$]*)/)[0],\n after: format.match(/([\\+|\\-|\\)|\\s|\\$]*)$/)[0]\n },\n output,\n symbol,\n i;\n\n // strip format of spaces and $\n format = format.replace(/\\s?\\$\\s?/, '');\n\n // format the number\n output = numeral._.numberToFormat(value, format, roundingFunction);\n\n // update the before and after based on value\n if (value >= 0) {\n symbols.before = symbols.before.replace(/[\\-\\(]/, '');\n symbols.after = symbols.after.replace(/[\\-\\)]/, '');\n } else if (value < 0 && (!numeral._.includes(symbols.before, '-') && !numeral._.includes(symbols.before, '('))) {\n symbols.before = '-' + symbols.before;\n }\n\n // loop through each before symbol\n for (i = 0; i < symbols.before.length; i++) {\n symbol = symbols.before[i];\n\n switch (symbol) {\n case '$':\n output = numeral._.insert(output, locale.currency.symbol, i);\n break;\n case ' ':\n output = numeral._.insert(output, ' ', i + locale.currency.symbol.length - 1);\n break;\n }\n }\n\n // loop through each after symbol\n for (i = symbols.after.length - 1; i >= 0; i--) {\n symbol = symbols.after[i];\n\n switch (symbol) {\n case '$':\n output = i === symbols.after.length - 1 ? output + locale.currency.symbol : numeral._.insert(output, locale.currency.symbol, -(symbols.after.length - (1 + i)));\n break;\n case ' ':\n output = i === symbols.after.length - 1 ? output + ' ' : numeral._.insert(output, ' ', -(symbols.after.length - (1 + i) + locale.currency.symbol.length - 1));\n break;\n }\n }\n\n\n return output;\n }\n });\n})();\n\n\n(function() {\n numeral.register('format', 'exponential', {\n regexps: {\n format: /(e\\+|e-)/,\n unformat: /(e\\+|e-)/\n },\n format: function(value, format, roundingFunction) {\n var output,\n exponential = typeof value === 'number' && !numeral._.isNaN(value) ? value.toExponential() : '0e+0',\n parts = exponential.split('e');\n\n format = format.replace(/e[\\+|\\-]{1}0/, '');\n\n output = numeral._.numberToFormat(Number(parts[0]), format, roundingFunction);\n\n return output + 'e' + parts[1];\n },\n unformat: function(string) {\n var parts = numeral._.includes(string, 'e+') ? string.split('e+') : string.split('e-'),\n value = Number(parts[0]),\n power = Number(parts[1]);\n\n power = numeral._.includes(string, 'e-') ? power *= -1 : power;\n\n function cback(accum, curr, currI, O) {\n var corrFactor = numeral._.correctionFactor(accum, curr),\n num = (accum * corrFactor) * (curr * corrFactor) / (corrFactor * corrFactor);\n return num;\n }\n\n return numeral._.reduce([value, Math.pow(10, power)], cback, 1);\n }\n });\n})();\n\n\n(function() {\n numeral.register('format', 'ordinal', {\n regexps: {\n format: /(o)/\n },\n format: function(value, format, roundingFunction) {\n var locale = numeral.locales[numeral.options.currentLocale],\n output,\n ordinal = numeral._.includes(format, ' o') ? ' ' : '';\n\n // check for space before\n format = format.replace(/\\s?o/, '');\n\n ordinal += locale.ordinal(value);\n\n output = numeral._.numberToFormat(value, format, roundingFunction);\n\n return output + ordinal;\n }\n });\n})();\n\n\n(function() {\n numeral.register('format', 'percentage', {\n regexps: {\n format: /(%)/,\n unformat: /(%)/\n },\n format: function(value, format, roundingFunction) {\n var space = numeral._.includes(format, ' %') ? ' ' : '',\n output;\n\n if (numeral.options.scalePercentBy100) {\n value = value * 100;\n }\n\n // check for space before %\n format = format.replace(/\\s?\\%/, '');\n\n output = numeral._.numberToFormat(value, format, roundingFunction);\n\n if (numeral._.includes(output, ')')) {\n output = output.split('');\n\n output.splice(-1, 0, space + '%');\n\n output = output.join('');\n } else {\n output = output + space + '%';\n }\n\n return output;\n },\n unformat: function(string) {\n var number = numeral._.stringToNumber(string);\n if (numeral.options.scalePercentBy100) {\n return number * 0.01;\n }\n return number;\n }\n });\n})();\n\n\n(function() {\n numeral.register('format', 'time', {\n regexps: {\n format: /(:)/,\n unformat: /(:)/\n },\n format: function(value, format, roundingFunction) {\n var hours = Math.floor(value / 60 / 60),\n minutes = Math.floor((value - (hours * 60 * 60)) / 60),\n seconds = Math.round(value - (hours * 60 * 60) - (minutes * 60));\n\n return hours + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);\n },\n unformat: function(string) {\n var timeArray = string.split(':'),\n seconds = 0;\n\n // turn hours and minutes into seconds and add them all up\n if (timeArray.length === 3) {\n // hours\n seconds = seconds + (Number(timeArray[0]) * 60 * 60);\n // minutes\n seconds = seconds + (Number(timeArray[1]) * 60);\n // seconds\n seconds = seconds + Number(timeArray[2]);\n } else if (timeArray.length === 2) {\n // minutes\n seconds = seconds + (Number(timeArray[0]) * 60);\n // seconds\n seconds = seconds + Number(timeArray[1]);\n }\n return Number(seconds);\n }\n });\n})();\n\nreturn numeral;\n}));\n});\n\n/*\n * @license\n * Copyright 2019 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// easy aliases for common format strings\nconst types = {\n abbrev: \"0a\", // or 'approx'?\n ordinal: \"0o\",\n percent: \"0%\",\n bytes: \"0[.][00] ib\",\n e: \"0[.00]e+0\",\n thousands: \"0,0[.][00]\"\n};\n\n// use thin spaces to separate thousands chunks\n// debugger;\nnumeral.locales.en.delimiters.thousands = \" \";\n\nclass PfeNumber extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-number\";\n }\n\n get styleUrl() {\n return \"pfe-number.scss\";\n }\n\n get templateUrl() {\n return \"pfe-number.html\";\n }\n\n static get observedAttributes() {\n return [\"number\", \"format\", \"type\"];\n }\n\n constructor() {\n super(PfeNumber);\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.connected = true;\n\n this._determineFormat();\n this._setInitialNumber();\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n super.attributeChangedCallback(...arguments);\n switch (attr) {\n case \"type\":\n this._determineFormat();\n break;\n case \"format\":\n this._updateNumber(this.getAttribute(\"number\"), newVal);\n break;\n case \"number\":\n this._updateNumber(newVal, this.getAttribute(\"format\"));\n }\n }\n\n _setInitialNumber() {\n const numberAttrDefined = !Number.isNaN(\n parseFloat(this.getAttribute(\"number\"))\n );\n const numberContentDefined = !Number.isNaN(parseFloat(this.textContent));\n\n if (numberAttrDefined) {\n this.setAttribute(\"number\", this.getAttribute(\"number\"));\n } else if (numberContentDefined) {\n this.setAttribute(\"number\", this.textContent);\n }\n }\n\n _determineFormat() {\n let type = this.getAttribute(\"type\");\n\n if (type && types[type]) {\n this.setAttribute(\"format\", types[type]);\n } else {\n this.setAttribute(\"format\", this.getAttribute(\"format\") || \"0\");\n }\n }\n\n _updateNumber(num, type) {\n this.shadowRoot.querySelector(\"span\").textContent = this._format(num, type);\n }\n\n _format(num, type) {\n return numeral(num).format(type);\n }\n}\n\nPFElement.create(PfeNumber);\n//# sourceMappingURL=pfe-number.js.map\n"],"names":["commonjsGlobal","window","global","self","module","numeral","factory","_","decimal","binary","unformatRegex","formats","locales","defaults","options","currentLocale","zeroFormat","nullFormat","defaultFormat","scalePercentBy100","Numeral","input","number","_input","_value","value","kind","unformatFunction","regexp","isNumeral","isNaN","replace","length","regexps","unformat","match","stringToNumber","Number","version","obj","format","roundingFunction","leadingCount","abbrForce","int","precision","signed","thousands","output","locale","negP","optDec","abbr","neg","Math","abs","includes","indexOf","RegExp","abbreviations","trillion","billion","million","thousand","toString","split","toFixed","delimiters","slice","String","i","string","abbreviation","stringOriginal","currency","symbol","pow","min","search","subString","start","array","callback","this","TypeError","t","Object","len","k","arguments","x","parts","Array","prototype","call","reduce","accum","next","mn","multiplier","maxDecimals","optionals","boundedPrecision","optionalsRegExp","power","splitValue","minDecimals","max","key","toLowerCase","localeData","Error","reset","property","register","type","name","validate","val","culture","_decimalSep","_thousandSep","_currSymbol","_valArray","_abbrObj","_thousandRegEx","temp","console","warn","trim","e","substr","fn","inputString","formatFunction","round","numberToFormat","corrFactor","correctionFactor","curr","currI","O","subtract","b","space","splice","join","suffixes","concat","filter","item","bytes","suffix","base","bytesMultiplier","symbols","before","after","insert","toExponential","ordinal","hours","floor","minutes","seconds","timeArray","exports","types","en","PfeNumber","PFElement","connected","_determineFormat","_setInitialNumber","attr","oldVal","newVal","_updateNumber","getAttribute","numberAttrDefined","parseFloat","numberContentDefined","textContent","setAttribute","num","shadowRoot","querySelector","_format","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-sass/package.json b/elements/pfe-sass/package.json index ce00ea0ad9..eace24bff7 100644 --- a/elements/pfe-sass/package.json +++ b/elements/pfe-sass/package.json @@ -4,7 +4,7 @@ "className": "PfeSass", "elementName": "pfe-sass" }, - "version": "1.0.0-prerelease.11", + "version": "1.0.0-prerelease.13", "publishConfig": { "access": "public" }, @@ -15,7 +15,7 @@ ], "repository": { "type": "git", - "url" : "github:patternfly/patternfly-elements", + "url": "github:patternfly/patternfly-elements", "directory": "elements/pfe-sass" }, "contributors": [ diff --git a/elements/pfe-tabs/package.json b/elements/pfe-tabs/package.json index 4431e1e507..1c8954ea79 100644 --- a/elements/pfe-tabs/package.json +++ b/elements/pfe-tabs/package.json @@ -4,7 +4,7 @@ "className": "PfeTabs", "elementName": "pfe-tabs" }, - "version": "1.0.0-prerelease.11", + "version": "1.0.0-prerelease.13", "publishConfig": { "access": "public" }, @@ -15,7 +15,7 @@ ], "repository": { "type": "git", - "url" : "github:patternfly/patternfly-elements", + "url": "github:patternfly/patternfly-elements", "directory": "elements/pfe-tabs" }, "main": "pfe-tabs.js", @@ -36,8 +36,8 @@ ], "license": "MIT", "dependencies": { - "@patternfly/pfe-sass": "^1.0.0-prerelease.11", - "@patternfly/pfelement": "^1.0.0-prerelease.11" + "@patternfly/pfe-sass": "^1.0.0-prerelease.13", + "@patternfly/pfelement": "^1.0.0-prerelease.13" }, "generator-pfelement-version": "0.5.4", "gitHead": "dfa74e0495c556ebdd1edb61c6d406621d1b6421" diff --git a/elements/pfe-tabs/pfe-tab-panel.css b/elements/pfe-tabs/pfe-tab-panel.css new file mode 100644 index 0000000000..ba2a9f45ec --- /dev/null +++ b/elements/pfe-tabs/pfe-tab-panel.css @@ -0,0 +1,94 @@ +/* + * Copyright 2018 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. + */ +/* Palette of Border Colors */ +/* Palette of Feedback Colors */ +:host { + display: block; + color: var(--pfe-broadcasted--color--text); +} + +:host [tabindex] { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +:host([hidden]) { + display: none; +} + +:host([on="dark"]) { + color: pfe-colors(text--on-dark); + --pfe-broadcasted--color--text: var(--pfe-theme--color--text--on-dark, #fff); + --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--ui-link--on-dark, #99ccff); + --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9); + --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff); + --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff); +} + +/* Horizontal */ +:host([pfe-variant="wind"]) .container { + margin: 0; + width: 100%; + padding: 1rem 0; + padding: var(--pfe-theme--container-spacer, 1rem) 0; +} + +:host([pfe-variant="earth"]) .container { + margin: 0; + width: 100%; + padding: 1rem 0; + padding: var(--pfe-theme--container-spacer, 1rem) 0; + padding: calc(1rem * 2); + padding: calc(var(--pfe-theme--container-spacer, 1rem) * 2); + border: 1px solid #dfdfdf; + border: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #dfdfdf); + border-top: none; +} + +/* Vertical */ +@media screen and (min-width: 768px) { + :host([pfe-variant="wind"][vertical]) .container { + margin: 0; + width: 100%; + padding: 1rem 0; + padding: var(--pfe-theme--container-spacer, 1rem) 0; + padding-left: calc(1rem * 2); + padding-left: calc(var(--pfe-theme--container-spacer, 1rem) * 2); + } + :host([pfe-variant="earth"][vertical]) .container { + margin: 0; + width: 100%; + padding: 1rem 0; + padding: var(--pfe-theme--container-spacer, 1rem) 0; + padding-left: calc(1rem * 2); + padding-left: calc(var(--pfe-theme--container-spacer, 1rem) * 2); + padding: calc(1rem * 2); + padding: calc(var(--pfe-theme--container-spacer, 1rem) * 2); + border: 1px solid #dfdfdf; + border: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #dfdfdf); + border-left: none; + } +} + +/*# sourceMappingURL=pfe-tab-panel.css.map */ diff --git a/elements/pfe-tabs/pfe-tab-panel.css.map b/elements/pfe-tabs/pfe-tab-panel.css.map new file mode 100644 index 0000000000..13e4e93d3a --- /dev/null +++ b/elements/pfe-tabs/pfe-tab-panel.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","pfe-tab-panel.css","../../pfe-sass/variables/_colors.scss","pfe-tab-panel.scss","../../pfe-sass/mixins/_mixins.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;ECoBE;AC4GF,6BAAA;AAOA,+BAAA;AChHA;EACE,cAAc;EACd,0CAAO;AFCT;;AEHA;EAKG,oBAAa;EAAb,qBAAa;EAAb,oBAAa;EAAb,aAAa;AFEhB;;AEEA;EACE,aAAa;AFCf;;AEEA;EACC,gCAAO;ECOJ,0FAA+B;EAC/B,gGAAkC;EAClC,yGAA2C;EAC3C,uGAAyC;EACzC,uGAAyC;AHL7C;;AEFA,eAAA;AACA;EArCI,SAAS;EACT,WAAW;EACX,eAAuC;EAAvC,mDAAuC;AF2C3C;;AEJA;EAzCI,SAAS;EACT,WAAW;EACX,eAAuC;EAAvC,mDAAuC;EAKrC,uBAA+C;EAA/C,2DAA+C;EAC/C,yBAA+F;EAA/F,2IAA+F;EAE7F,gBAAgB;AF4CxB;;AETA,aAAA;AAEA;EACC;IAhDG,SAAS;IACT,WAAW;IACX,eAAuC;IAAvC,mDAAuC;IAErC,4BAAoD;IAApD,gEAAoD;EF2DxD;EEXD;IApDG,SAAS;IACT,WAAW;IACX,eAAuC;IAAvC,mDAAuC;IAErC,4BAAoD;IAApD,gEAAoD;IAGpD,uBAA+C;IAA/C,2DAA+C;IAC/C,yBAA+F;IAA/F,2IAA+F;IAK7F,iBAAiB;EF2DvB;AACF","file":"pfe-tab-panel.css","sourcesContent":["/*\n * Copyright 2018 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// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n","/*\n * Copyright 2018 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/* Palette of Border Colors */\n/* Palette of Feedback Colors */\n:host {\n display: block;\n color: var(--pfe-broadcasted--color--text);\n}\n\n:host [tabindex] {\n display: flex;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([on=\"dark\"]) {\n color: pfe-colors(text--on-dark);\n --pfe-broadcasted--color--text: var(--pfe-theme--color--text--on-dark, #fff);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--ui-link--on-dark, #99ccff);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff);\n}\n\n/* Horizontal */\n:host([pfe-variant=\"wind\"]) .container {\n margin: 0;\n width: 100%;\n padding: var(--pfe-theme--container-spacer, 1rem) 0;\n}\n\n:host([pfe-variant=\"earth\"]) .container {\n margin: 0;\n width: 100%;\n padding: var(--pfe-theme--container-spacer, 1rem) 0;\n padding: calc(var(--pfe-theme--container-spacer, 1rem) * 2);\n border: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #dfdfdf);\n border-top: none;\n}\n\n/* Vertical */\n@media screen and (min-width: 768px) {\n :host([pfe-variant=\"wind\"][vertical]) .container {\n margin: 0;\n width: 100%;\n padding: var(--pfe-theme--container-spacer, 1rem) 0;\n padding-left: calc(var(--pfe-theme--container-spacer, 1rem) * 2);\n }\n :host([pfe-variant=\"earth\"][vertical]) .container {\n margin: 0;\n width: 100%;\n padding: var(--pfe-theme--container-spacer, 1rem) 0;\n padding-left: calc(var(--pfe-theme--container-spacer, 1rem) * 2);\n padding: calc(var(--pfe-theme--container-spacer, 1rem) * 2);\n border: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #dfdfdf);\n border-left: none;\n }\n}\n","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text: $pfelements--gray-dark !default;\n$pfe-color--text--on-dark: $pfe-color--white !default;\n$pfe-color--text--on-saturated: $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link: #06c !default;\n$pfe-color--ui-link--visited: $pfelements--purple !default; // Was #7551a6\n$pfe-color--ui-link--hover: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-dark--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-saturated--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base: $pfelements--blue !default;\n$pfe-color--ui-base--hover: darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement: $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover: $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent: $pfelements--orange !default;\n$pfe-color--ui-accent--hover: darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text: $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover: $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest: $pfe-color--white !default;\n$pfe-color--surface--lightest--text: $pfe-color--text !default;\n$pfe-color--surface--lightest--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus: $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text: $pfe-color--text !default;\n$pfe-color--surface--lighter--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus: $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base: $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text: $pfe-color--text !default;\n$pfe-color--surface--base--link: #00538c !default; // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited: #7551a6 !default;\n$pfe-color--surface--base--link--hover: #00305b !default;\n$pfe-color--surface--base--link--focus: #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker: $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest: $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement: $pfelements--blue;\n$pfe-color--surface--complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent: $pfelements--orange;\n$pfe-color--surface--accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc\n$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7\n$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical: $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important: $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest: $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest: $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate: $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest: $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest: $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success: #2e7d32 !default;\n$pfe-color--feedback--success--lightest: $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest: #1b5e20 !default;\n\n$pfe-color--feedback--info: #0277bd !default;\n$pfe-color--feedback--info--lightest: $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest: #01579b !default;\n\n$pfe-color--feedback--default: $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest: $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest: $pfe-color--gray-800 !default;\n","@import \"../../pfe-sass/pfe-sass\";\n\n$LOCAL: tabs;\n\n@mixin pfe-tab-panel-container($orientation: \"horizontal\", $border: false) {\n margin: 0;\n width: 100%;\n padding: #{pfe-var(container-spacer)} 0;\n @if $orientation == \"vertical\" {\n padding-left: calc(#{pfe-var(container-spacer)} * 2);\n }\n @if $border {\n padding: calc(#{pfe-var(container-spacer)} * 2);\n border: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};\n @if $orientation == \"horizontal\" {\n border-top: none;\n }\n @if $orientation == \"vertical\" {\n border-left: none;\n }\n }\n}\n\n:host {\n display: block;\n color: #{pfe-radio(color--text)};\n\n [tabindex] {\n \tdisplay: flex;\n }\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([on=\"dark\"]) {\n\tcolor: #{pfe-colors(text--on-dark)};\n @include pfe-theme($theme: \"dark\");\n}\n\n/* Horizontal */\n:host([pfe-variant=\"wind\"]) .container {\n\t@include pfe-tab-panel-container;\n}\n\n:host([pfe-variant=\"earth\"]) .container {\n\t@include pfe-tab-panel-container($border: true);\n}\n\n/* Vertical */\n\n@media screen and (min-width: #{pfe-breakpoint(md)}) {\n\t:host([pfe-variant=\"wind\"][vertical]) .container {\n\t\t@include pfe-tab-panel-container($orientation: \"vertical\");\n\t}\n\n\t:host([pfe-variant=\"earth\"][vertical]) .container {\n\t\t@include pfe-tab-panel-container($orientation: \"vertical\", $border: true);\n\t}\n}","// $boxSize = any box-sizing property, default is border-box\n@mixin pfe-box-sizing($boxSize: border-box) {\n *, *::before, *::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-reset-list() {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n@mixin pfe-reset-box() {\n margin: 0;\n padding: 0;\n}\n\n@mixin pfe-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/// ===========================================================================\n/// Theme Color Vars - use with on=\"dark\" to affect light DOM\n/// ===========================================================================\n\n@mixin pfe-theme($theme) {\n // GENERAL CONTEXT-BASED UPDATES, ON=\"DARK\"\n @if $theme == dark {\n --pfe-broadcasted--color--text: #{pfe-color(text--on-dark)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(ui-link--on-dark)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--on-dark--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--on-dark--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--on-dark--focus)};\n }\n @else if $theme == light {\n --pfe-broadcasted--color--text: #{pfe-color(text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(ui-link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--focus)};\n }\n // MORE SPECIFIC COLOR BASED UPDATES, COLOR=\"DARKER\"\n @else if $theme == darker {\n --pfe-broadcasted--color--text: #{pfe-color(surface--darker--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darker--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darker--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darker--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darker--link--focus)};\n }\n @else if $theme == darkest {\n --pfe-broadcasted--color--text: #{pfe-color(surface--darkest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darkest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darkest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darkest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darkest--link--focus)};\n }\n @else if $theme == accent {\n --pfe-broadcasted--color--text: #{pfe-color(surface--accent--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--accent--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--accent--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--accent--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--accent--link--focus)};\n }\n @else if $theme == complement {\n --pfe-broadcasted--color--text: #{pfe-color(surface--complement--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--complement--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--complement--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--complement--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--complement--link--focus)};\n }\n\n @else if $theme == lighter {\n --pfe-broadcasted--color--text: #{pfe-color(surface--lighter--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lighter--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lighter--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lighter--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lighter--link--focus)};\n }\n @else if $theme == lightest {\n --pfe-broadcasted--color--text: #{pfe-color(surface--lightest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lightest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lightest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lightest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lightest--link--focus)};\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// scss-lint:disable ImportantRule\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// scss-lint:enable ImportantRule\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 for building slot selectors\n@mixin pfe-slot($slot-name, $selector: \"\") {\n // This logic makes it much easier to style default slots in a loop\n // with named slots\n @if $slot-name != default {\n ::slotted([slot=\"#{$slot-name}\"]#{$selector}) {\n @content;\n }\n }\n @else {\n ::slotted(*) {\n @content;\n }\n }\n}\n\n/// ===========================================================================\n/// Accordion Specific SASS Vars\n/// ===========================================================================\n\n$pfe-expand_button--LineHeight: 1.5;\n$pfe-expand_button--padding: #{pfe-var(container-spacer)};\n$pfe-expand_button--padding--factor: .75;\n$pfe-expand_button--padding--wide: calc(#{$pfe-expand_button--padding} * 1.5);\n\n$pfe-expand_chevron--size: .4em;\n$pfe-expand_chevron--weight: .1em;\n$pfe-expand_chevron--padding: 3em;\n$pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe-expand_chevron--size / 2};\n\n@mixin pfe-accordion-header {\n display: block;\n > * {\n margin: 0;\n }\n}\n\n@mixin pfe-trigger-button($align: left) {\n -webkit-appearance: button;\n margin: 0;\n width: 100%;\n height: auto;\n font-family: inherit;\n font-weight: #{pfe-var(font-weight--bold)};\n text-align: left;\n cursor: pointer;\n z-index: 1;\n position: relative;\n\n font-size: calc(#{pfe-var(font-size)} * 1.1);\n line-height: #{pfe-var(line-height)};\n\n color: #{pfe-local(aux)};\n background-color: #{pfe-local(main)};\n border-left: #{pfe-local(BorderLeft)};\n border-right: #{pfe-local(BorderRight)};\n border-bottom: #{pfe-local(BorderBottom)};\n border-top: 0;\n\n &:hover {\n outline: none;\n border-left-color: #{pfe-local(BorderLeftColor--focus)};\n z-index: 2;\n }\n\n &:focus {\n outline: none;\n z-index: 2;\n text-decoration: underline;\n text-decoration-color: #{pfe-color(surface--border--darker)};\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n @if $align == right {\n padding: #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} 50px;\n } @else {\n padding: #{$pfe-expand_button--padding} 50px #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};\n }\n}\n\n@mixin pfe-trigger-button-last($theme: light) {\n border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n // @TODO Support differences based on theme\n}\n\n@mixin pfe-trigger-button-first($theme: light) {\n border-top: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n // @TODO Support differences based on theme\n}\n\n@mixin pfe-trigger-expanded {\n position: relative;\n display: block;\n border-bottom: 0;\n}\n\n@mixin pfe-trigger-color($component-name, $theme: light) {\n @if $theme == dark {\n --pfe-#{$component-name}--main: transparent;\n --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)};\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};\n }\n @else {\n --pfe-#{$component-name}--main: transparent;\n --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)};\n\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} transparent;\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n --pfe-#{$component-name}--BorderBottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest--link)};\n }\n}\n\n@mixin pfe-trigger-color-expanded($component-name, $theme: light) {\n @if $theme == dark {\n --pfe-#{$component-name}--main: #{pfe-color(surface--darker)};\n --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)};\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};\n\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};\n }\n @else {\n --pfe-#{$component-name}--main: #{pfe-color(surface--lightest)};\n --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)};\n --pfe-#{$component-name}--focus: #{pfe-color(surface--lightest--link)};\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--lightest--link)};\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n }\n}\n\n/// ===========================================================================\n/// Accordion chevrons\n/// ===========================================================================\n\n@mixin pfe-chevron-expanded($state: true, $position: after) {\n content: \"\";\n position: absolute;\n top: calc((#{pfe-var(container-spacer)} * #{$pfe-expand_button--padding--factor}) + #{$pfe-expand_chevron--placement} );\n display: block;\n border-style: #{pfe-var(surface--border-style)};\n height: #{$pfe-expand_chevron--size};\n width: #{$pfe-expand_chevron--size};\n text-align: center;\n transition: transform 0.15s;\n @if $state {\n border-width: #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0 0;\n border-bottom: 0;\n transform: rotate(-45deg);\n @if $position == before {\n left: #{$pfe-expand_button--padding--wide};\n }\n @else {\n right: #{$pfe-expand_button--padding--wide};\n }\n }\n @else {\n border-width: 0 #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0;\n transform: rotate(45deg);\n @if $position == before {\n left: #{$pfe-expand_button--padding--wide};\n }\n @else {\n right: #{$pfe-expand_button--padding--wide};\n }\n }\n}\n\n/// ===========================================================================\n/// Accordion panel\n/// ===========================================================================\n\n@mixin pfe-container {\n position: relative;\n display: block;\n width: 100%;\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@mixin pfe-accordion-panel {\n display: none;\n overflow: hidden;\n will-change: height;\n border-color: transparent;\n}\n\n@mixin pfe-accordion-panel-expanded {\n display: block;\n position: relative;\n}\n\n@mixin pfe-accordion-panel-expanded-style($theme: light) {\n border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n border-left: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} transparent;\n @if $theme == dark {\n box-shadow: none;\n background-color: #{pfe-color(surface--darker)};\n border-left-color: #{pfe-color(surface--darkest--text)};\n border-right-color: #{pfe-color(surface--darkest--text)};\n }\n @else {\n box-shadow: 0 5px #{pfe-var(surface--border-width--heavy)} rgba(140, 140, 140, 0.35);\n border-left-color: #{pfe-color(surface--lightest--link)};\n background-color: #{pfe-color(surface--lightest)};\n border-right-color: #{pfe-color(surface--border--lightest)};\n border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n }\n}\n\n@mixin pfe-accordion-panel-container-inset($align: left) {\n box-sizing: border-box;\n width: 100%;\n\n @if $align == left {\n padding: 0 #{$pfe-expand_chevron--padding} #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};\n }\n @else {\n padding: 0 #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} #{$pfe-expand_chevron--padding};\n }\n}\n"]} \ No newline at end of file diff --git a/elements/pfe-tabs/pfe-tab-panel.css.min.map b/elements/pfe-tabs/pfe-tab-panel.css.min.map new file mode 100644 index 0000000000..e69de29bb2 diff --git a/elements/pfe-tabs/pfe-tab-panel.min.css b/elements/pfe-tabs/pfe-tab-panel.min.css new file mode 100644 index 0000000000..6b9075bf1b --- /dev/null +++ b/elements/pfe-tabs/pfe-tab-panel.min.css @@ -0,0 +1 @@ +:host{display:block;color:var(--pfe-broadcasted--color--text)}:host [tabindex]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}:host([hidden]){display:none}:host([on=dark]){color:pfe-colors(text--on-dark);--pfe-broadcasted--color--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link--on-dark, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff)}:host([pfe-variant=wind]) .container{margin:0;width:100%;padding:1rem 0;padding:var(--pfe-theme--container-spacer,1rem) 0}:host([pfe-variant=earth]) .container{margin:0;width:100%;padding:1rem 0;padding:var(--pfe-theme--container-spacer,1rem) 0;padding:calc(1rem * 2);padding:calc(var(--pfe-theme--container-spacer,1rem) * 2);border:1px solid #dfdfdf;border:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#dfdfdf);border-top:none}@media screen and (min-width:768px){:host([pfe-variant=wind][vertical]) .container{margin:0;width:100%;padding:1rem 0;padding:var(--pfe-theme--container-spacer,1rem) 0;padding-left:calc(1rem * 2);padding-left:calc(var(--pfe-theme--container-spacer,1rem) * 2)}:host([pfe-variant=earth][vertical]) .container{margin:0;width:100%;padding:1rem 0;padding:var(--pfe-theme--container-spacer,1rem) 0;padding-left:calc(1rem * 2);padding-left:calc(var(--pfe-theme--container-spacer,1rem) * 2);padding:calc(1rem * 2);padding:calc(var(--pfe-theme--container-spacer,1rem) * 2);border:1px solid #dfdfdf;border:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#dfdfdf);border-left:none}} \ No newline at end of file diff --git a/elements/pfe-tabs/pfe-tab.css b/elements/pfe-tabs/pfe-tab.css new file mode 100644 index 0000000000..126caa1dae --- /dev/null +++ b/elements/pfe-tabs/pfe-tab.css @@ -0,0 +1,141 @@ +/* + * Copyright 2018 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. + */ +/* Palette of Border Colors */ +/* Palette of Feedback Colors */ +:host { + --pfe-tabs--main: transparent; + --pfe-tabs--aux: var(--pfe-theme--color--ui-disabled--text, #797979); + --pfe-tabs--link: var(--pfe-theme--color--surface--lightest--link, #06c); + --pfe-tabs--focus: var(--pfe-theme--color--surface--lightest--link--focus, #003366); + --pfe-tabs--highlight: var(--pfe-theme--color--ui-accent, #fe460d); + position: relative; + display: block; + margin: 0 0 -1px; + padding: calc(1rem * .666) calc(1rem * 1.5); + padding: calc(var(--pfe-theme--container-padding, 1rem) * .666) calc(var(--pfe-theme--container-padding, 1rem) * 1.5); + border: 1px solid transparent; + border: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) transparent; + border-bottom: 0; + background-color: var(--pfe-tabs--main); + color: var(--pfe-tabs--aux); + text-transform: none; + text-transform: var(--pfe-tabs__tab--TextTransform, none); + font-weight: 500; + font-weight: var(--pfe-theme--font-weight--normal, 500); + cursor: pointer; + text-align: center; +} + +:host(:focus), +:host(:focus-visible) { + outline: 1px solid #003366; + outline: 1px solid var(--pfe-tabs--focus); + outline: var(--pfe-theme--ui--focus-outline-width, 1px) var(--pfe-theme--ui--focus-outline-style, solid) var(--pfe-tabs--focus); +} + +:host([aria-selected="true"]) { + --pfe-tabs--aux: #131313; + border: transparent; + border-bottom: 3px solid var(--pfe-tabs--highlight); + border-bottom: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--surface--border-style, solid) var(--pfe-tabs--highlight); +} + +:host(:hover) { + --pfe-tabs--aux: var(--pfe-theme--color--text, #333); +} + +@media screen and (min-width: 768px) { + :host([vertical]) { + text-align: left; + margin: 0 -1px 0 0; + padding-left: calc(1rem * .75); + padding-left: calc(var(--pfe-theme--container-padding, 1rem) * .75); + border: 1px solid transparent; + border: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) transparent; + border-right: 0; + position: relative; + } + :host([vertical][aria-selected="true"]) { + border-color-top: transparent; + border-right: 3px solid var(--pfe-tabs--highlight); + border-right: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--surface--border-style, solid) var(--pfe-tabs--highlight); + } +} + +:host([pfe-variant="wind"][aria-selected="true"][on="dark"]), +:host([pfe-variant="wind"][on="dark"]:hover) { + --pfe-tabs--aux: var(--pfe-theme--color--text--on-dark, #fff); +} + +:host([pfe-variant="earth"][aria-selected="false"]) { + border-left: 1px solid #dfdfdf; + border-left: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #dfdfdf); + border-bottom: 1px solid #dfdfdf; + border-bottom: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #dfdfdf); + border-top: 3px solid #ececec; + border-top: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--lighter, #ececec); + --pfe-tabs--main: var(--pfe-theme--color--surface--lighter, #ececec); +} + +:host([pfe-variant="earth"][aria-selected="true"]) { + --pfe-tabs--main: var(--pfe-theme--color--surface--lightest, #fff); + border-top: 3px solid var(--pfe-tabs--highlight); + border-top: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--surface--border-style, solid) var(--pfe-tabs--highlight); + border-bottom: 0; + border-left: 1px solid #dfdfdf; + border-left: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #dfdfdf); +} + +:host([pfe-variant="earth"][aria-selected="true"]:last-of-type) { + border-right: 1px solid #dfdfdf; + border-right: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #dfdfdf); +} + +@media screen and (min-width: 768px) { + :host([vertical][pfe-variant="earth"]) { + border-top: 1px solid #dfdfdf; + border-top: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #dfdfdf); + } + :host([vertical][pfe-variant="earth"]:first-of-type) { + border-top: 0; + } + :host([vertical][pfe-variant="earth"][aria-selected="true"]) { + border-top: 1px solid #dfdfdf; + border-top: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #dfdfdf); + border-right: 0; + border-left: 3px solid var(--pfe-tabs--highlight); + border-left: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--surface--border-style, solid) var(--pfe-tabs--highlight); + } + :host([vertical][pfe-variant="earth"][aria-selected="false"]) { + border-right: 1px solid #dfdfdf; + border-right: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #dfdfdf); + border-bottom: 0; + border-left: 3px solid #ececec; + border-left: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--lighter, #ececec); + } + :host([vertical][pfe-variant="earth"][aria-selected="true"]:last-of-type) { + border-bottom: 1px solid #dfdfdf; + border-bottom: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #dfdfdf); + } +} + +/*# sourceMappingURL=pfe-tab.css.map */ diff --git a/elements/pfe-tabs/pfe-tab.css.map b/elements/pfe-tabs/pfe-tab.css.map new file mode 100644 index 0000000000..f79f0b4b67 --- /dev/null +++ b/elements/pfe-tabs/pfe-tab.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","pfe-tab.css","../../pfe-sass/variables/_colors.scss","pfe-tab.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;ECoBE;AC4GF,6BAAA;AAOA,+BAAA;AC/HA;EACE,qCAAiB;EACjB,6EAAgB;EAChB,gFAAiB;EACjB,0FAAkB;EAClB,qEAAsB;EAEtB,kBAAkB;EAClB,cAAc;EACd,gBAAgB;EAGhB,2CAA6F;EAA7F,qHAA6F;EAE7F,6BAA6E;EAA7E,qGAA6E;EAC7E,gBAAgB;EAEhB,uCAAuC;EACvC,2BAA2B;EAC3B,oBAAyD;EAAzD,yDAAyD;EACzD,gBAAa;EAAb,uDAAa;EAEb,eAAe;EACf,kBAAkB;AFUpB;;AELA;;EAEE,0BAAgD;EAChD,yCAAoG;EAApG,+HAAoG;AFQtG;;AELA;EACE,wBAAgB;EAEhB,mBAAmB;EACnB,mDAAiH;EAAjH,4IAAiH;AFOnH;;AEJA;EACE,oDAAgB;AFOlB;;AEAA;EACE;IACE,gBAAgB;IAChB,kBAAkB;IAClB,8BAAuD;IAAvD,mEAAuD;IACvD,6BAA6E;IAA7E,qGAA6E;IAC7E,eAAe;IACf,kBAAkB;EFGpB;EEAA;IACE,6BAA6B;IAC7B,kDAAgH;IAAhH,2IAAgH;EFElH;AACF;;AEKA;;EAEE,6DAAgB;AFFlB;;AESA;EACE,8BAAoG;EAApG,gJAAoG;EACpG,gCAAsG;EAAtG,kJAAsG;EACtG,6BAAgH;EAAhH,4JAAgH;EAChH,oEAAiB;AFNnB;;AESA;EACE,kEAAiB;EACjB,gDAA8G;EAA9G,yIAA8G;EAC9G,gBAAgB;EAChB,8BAAoG;EAApG,gJAAoG;AFNtG;;AESA;EACE,+BAAqG;EAArG,iJAAqG;AFNvG;;AEaA;EACE;IACE,6BAAmG;IAAnG,+IAAmG;EFVrG;EEaA;IACE,aAAa;EFXf;EEcA;IACE,6BAAmG;IAAnG,+IAAmG;IACnG,eAAe;IACf,iDAA+G;IAA/G,0IAA+G;EFZjH;EEeA;IACE,+BAAqG;IAArG,iJAAqG;IACrG,gBAAgB;IAChB,8BAAiH;IAAjH,6JAAiH;EFbnH;EEgBA;IACE,gCAAsG;IAAtG,kJAAsG;EFdxG;AACF","file":"pfe-tab.css","sourcesContent":["/*\n * Copyright 2018 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// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n","/*\n * Copyright 2018 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/* Palette of Border Colors */\n/* Palette of Feedback Colors */\n:host {\n --pfe-tabs--main: transparent;\n --pfe-tabs--aux: var(--pfe-theme--color--ui-disabled--text, #797979);\n --pfe-tabs--link: var(--pfe-theme--color--surface--lightest--link, #06c);\n --pfe-tabs--focus: var(--pfe-theme--color--surface--lightest--link--focus, #003366);\n --pfe-tabs--highlight: var(--pfe-theme--color--ui-accent, #fe460d);\n position: relative;\n display: block;\n margin: 0 0 -1px;\n padding: calc(var(--pfe-theme--container-padding, 1rem) * .666) calc(var(--pfe-theme--container-padding, 1rem) * 1.5);\n border: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) transparent;\n border-bottom: 0;\n background-color: var(--pfe-tabs--main);\n color: var(--pfe-tabs--aux);\n text-transform: var(--pfe-tabs__tab--TextTransform, none);\n font-weight: var(--pfe-theme--font-weight--normal, 500);\n cursor: pointer;\n text-align: center;\n}\n\n:host(:focus),\n:host(:focus-visible) {\n outline: 1px solid #003366;\n outline: var(--pfe-theme--ui--focus-outline-width, 1px) var(--pfe-theme--ui--focus-outline-style, solid) var(--pfe-tabs--focus);\n}\n\n:host([aria-selected=\"true\"]) {\n --pfe-tabs--aux: #131313;\n border: transparent;\n border-bottom: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--surface--border-style, solid) var(--pfe-tabs--highlight);\n}\n\n:host(:hover) {\n --pfe-tabs--aux: var(--pfe-theme--color--text, #333);\n}\n\n@media screen and (min-width: 768px) {\n :host([vertical]) {\n text-align: left;\n margin: 0 -1px 0 0;\n padding-left: calc(var(--pfe-theme--container-padding, 1rem) * .75);\n border: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) transparent;\n border-right: 0;\n position: relative;\n }\n :host([vertical][aria-selected=\"true\"]) {\n border-color-top: transparent;\n border-right: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--surface--border-style, solid) var(--pfe-tabs--highlight);\n }\n}\n\n:host([pfe-variant=\"wind\"][aria-selected=\"true\"][on=\"dark\"]),\n:host([pfe-variant=\"wind\"][on=\"dark\"]:hover) {\n --pfe-tabs--aux: var(--pfe-theme--color--text--on-dark, #fff);\n}\n\n:host([pfe-variant=\"earth\"][aria-selected=\"false\"]) {\n border-left: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #dfdfdf);\n border-bottom: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #dfdfdf);\n border-top: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--lighter, #ececec);\n --pfe-tabs--main: var(--pfe-theme--color--surface--lighter, #ececec);\n}\n\n:host([pfe-variant=\"earth\"][aria-selected=\"true\"]) {\n --pfe-tabs--main: var(--pfe-theme--color--surface--lightest, #fff);\n border-top: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--surface--border-style, solid) var(--pfe-tabs--highlight);\n border-bottom: 0;\n border-left: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #dfdfdf);\n}\n\n:host([pfe-variant=\"earth\"][aria-selected=\"true\"]:last-of-type) {\n border-right: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #dfdfdf);\n}\n\n@media screen and (min-width: 768px) {\n :host([vertical][pfe-variant=\"earth\"]) {\n border-top: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #dfdfdf);\n }\n :host([vertical][pfe-variant=\"earth\"]:first-of-type) {\n border-top: 0;\n }\n :host([vertical][pfe-variant=\"earth\"][aria-selected=\"true\"]) {\n border-top: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #dfdfdf);\n border-right: 0;\n border-left: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--surface--border-style, solid) var(--pfe-tabs--highlight);\n }\n :host([vertical][pfe-variant=\"earth\"][aria-selected=\"false\"]) {\n border-right: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #dfdfdf);\n border-bottom: 0;\n border-left: var(--pfe-theme--surface--border-width--heavy, 3px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--lighter, #ececec);\n }\n :host([vertical][pfe-variant=\"earth\"][aria-selected=\"true\"]:last-of-type) {\n border-bottom: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #dfdfdf);\n }\n}\n","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text: $pfelements--gray-dark !default;\n$pfe-color--text--on-dark: $pfe-color--white !default;\n$pfe-color--text--on-saturated: $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link: #06c !default;\n$pfe-color--ui-link--visited: $pfelements--purple !default; // Was #7551a6\n$pfe-color--ui-link--hover: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-dark--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-saturated--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base: $pfelements--blue !default;\n$pfe-color--ui-base--hover: darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement: $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover: $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent: $pfelements--orange !default;\n$pfe-color--ui-accent--hover: darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text: $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover: $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest: $pfe-color--white !default;\n$pfe-color--surface--lightest--text: $pfe-color--text !default;\n$pfe-color--surface--lightest--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus: $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text: $pfe-color--text !default;\n$pfe-color--surface--lighter--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus: $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base: $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text: $pfe-color--text !default;\n$pfe-color--surface--base--link: #00538c !default; // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited: #7551a6 !default;\n$pfe-color--surface--base--link--hover: #00305b !default;\n$pfe-color--surface--base--link--focus: #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker: $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest: $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement: $pfelements--blue;\n$pfe-color--surface--complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent: $pfelements--orange;\n$pfe-color--surface--accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc\n$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7\n$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical: $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important: $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest: $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest: $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate: $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest: $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest: $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success: #2e7d32 !default;\n$pfe-color--feedback--success--lightest: $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest: #1b5e20 !default;\n\n$pfe-color--feedback--info: #0277bd !default;\n$pfe-color--feedback--info--lightest: $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest: #01579b !default;\n\n$pfe-color--feedback--default: $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest: $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest: $pfe-color--gray-800 !default;\n","@import \"../../pfe-sass/pfe-sass\";\n\n$LOCAL: tabs;\n\n/// ===========================================================================\n/// HORIZONTAL TAB ORIENTATION\n/// ===========================================================================\n\n:host {\n --pfe-tabs--main: transparent;\n --pfe-tabs--aux: #{pfe-color(ui-disabled--text)}; \n --pfe-tabs--link: #{pfe-color(surface--lightest--link)};\n --pfe-tabs--focus: #{pfe-color(surface--lightest--link--focus)};\n --pfe-tabs--highlight: #{pfe-color(ui-accent)};\n\n position: relative;\n display: block;\n margin: 0 0 -1px;\n\n // Padding\n padding: calc(#{pfe-var(container-padding)} * .666) calc(#{pfe-var(container-padding)} * 1.5);\n // Border\n border: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} transparent;\n border-bottom: 0;\n // Inner style\n background-color: var(--pfe-tabs--main);\n color: var(--pfe-tabs--aux);\n text-transform: var(--pfe-tabs__tab--TextTransform, none); // exposing this for RH\n font-weight: #{pfe-var(font-weight--normal)};\n\n cursor: pointer;\n text-align: center;\n}\n\n// Active tab styles\n\n:host(:focus),\n:host(:focus-visible) {\n outline: 1px solid #{$pfe-color--ui-link--focus};\n outline: #{pfe-var(ui--focus-outline-width)} #{pfe-var(ui--focus-outline-style)} #{pfe-local(focus)};\n}\n\n:host([aria-selected=\"true\"]) {\n --pfe-tabs--aux: #{$pfe-color--black};\n // Border\n border: transparent;\n border-bottom: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} #{pfe-local(highlight)};\n}\n\n:host(:hover) {\n --pfe-tabs--aux: #{pfe-color(text)};\n}\n\n/// ===========================================================================\n/// VERTICAL TAB ORIENTATION\n/// ===========================================================================\n\n@media screen and (min-width: #{pfe-breakpoint(md)}) {\n :host([vertical]) {\n text-align: left;\n margin: 0 -1px 0 0;\n padding-left: calc(#{pfe-var(container-padding)} * .75);\n border: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} transparent;\n border-right: 0;\n position: relative;\n }\n\n :host([vertical][aria-selected=\"true\"]) {\n border-color-top: transparent;\n border-right: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} #{pfe-local(highlight)};\n }\n}\n\n/// ===========================================================================\n/// WIND TAB VARIANTS\n/// ===========================================================================\n\n:host([pfe-variant=\"wind\"][aria-selected=\"true\"][on=\"dark\"]),\n:host([pfe-variant=\"wind\"][on=\"dark\"]:hover) {\n --pfe-tabs--aux: #{pfe-color(text--on-dark)};\n}\n\n/// ===========================================================================\n/// EARTH TAB VARIANTS\n/// ===========================================================================\n\n:host([pfe-variant=\"earth\"][aria-selected=\"false\"]) {\n border-left: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};\n border-bottom: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};\n border-top: #{pfe-var(surface--border-width--heavy)} #{pfe-var(ui--border-style)} #{pfe-color(surface--lighter)};\n --pfe-tabs--main: #{pfe-color(surface--lighter)};\n}\n\n:host([pfe-variant=\"earth\"][aria-selected=\"true\"]) {\n --pfe-tabs--main: #{pfe-color(surface--lightest)};\n border-top: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} #{pfe-local(highlight)};\n border-bottom: 0;\n border-left: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};\n}\n\n:host([pfe-variant=\"earth\"][aria-selected=\"true\"]:last-of-type) {\n border-right: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};\n}\n\n/// ===========================================================================\n/// EARTH TAB VERTICAL ORIENTATION\n/// ===========================================================================\n\n@media screen and (min-width: #{pfe-breakpoint(md)}) {\n :host([vertical][pfe-variant=\"earth\"]) {\n border-top: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};\n }\n\n :host([vertical][pfe-variant=\"earth\"]:first-of-type) {\n border-top: 0;\n }\n\n :host([vertical][pfe-variant=\"earth\"][aria-selected=\"true\"]) {\n border-top: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};\n border-right: 0;\n border-left: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} #{pfe-local(highlight)};\n }\n\n :host([vertical][pfe-variant=\"earth\"][aria-selected=\"false\"]) {\n border-right: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};\n border-bottom: 0;\n border-left: #{pfe-var(surface--border-width--heavy)} #{pfe-var(ui--border-style)} #{pfe-color(surface--lighter)};\n }\n\n :host([vertical][pfe-variant=\"earth\"][aria-selected=\"true\"]:last-of-type) {\n border-bottom: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};\n }\n}"]} \ No newline at end of file diff --git a/elements/pfe-tabs/pfe-tab.css.min.map b/elements/pfe-tabs/pfe-tab.css.min.map new file mode 100644 index 0000000000..e69de29bb2 diff --git a/elements/pfe-tabs/pfe-tab.min.css b/elements/pfe-tabs/pfe-tab.min.css new file mode 100644 index 0000000000..ead1210bea --- /dev/null +++ b/elements/pfe-tabs/pfe-tab.min.css @@ -0,0 +1 @@ +:host{--pfe-tabs--main:transparent;--pfe-tabs--aux:var(--pfe-theme--color--ui-disabled--text, #797979);--pfe-tabs--link:var(--pfe-theme--color--surface--lightest--link, #06c);--pfe-tabs--focus:var(--pfe-theme--color--surface--lightest--link--focus, #003366);--pfe-tabs--highlight:var(--pfe-theme--color--ui-accent, #fe460d);position:relative;display:block;margin:0 0 -1px;padding:calc(1rem * .666) calc(1rem * 1.5);padding:calc(var(--pfe-theme--container-padding,1rem) * .666) calc(var(--pfe-theme--container-padding,1rem) * 1.5);border:1px solid transparent;border:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) transparent;border-bottom:0;background-color:var(--pfe-tabs--main);color:var(--pfe-tabs--aux);text-transform:none;text-transform:var(--pfe-tabs__tab--TextTransform,none);font-weight:500;font-weight:var(--pfe-theme--font-weight--normal,500);cursor:pointer;text-align:center}:host(:focus),:host(:focus-visible){outline:1px solid #036;outline:1px solid var(--pfe-tabs--focus);outline:var(--pfe-theme--ui--focus-outline-width,1px) var(--pfe-theme--ui--focus-outline-style,solid) var(--pfe-tabs--focus)}:host([aria-selected=true]){--pfe-tabs--aux:#131313;border:transparent;border-bottom:3px solid var(--pfe-tabs--highlight);border-bottom:var(--pfe-theme--surface--border-width--heavy,3px) var(--pfe-theme--surface--border-style,solid) var(--pfe-tabs--highlight)}:host(:hover){--pfe-tabs--aux:var(--pfe-theme--color--text, #333)}@media screen and (min-width:768px){:host([vertical]){text-align:left;margin:0 -1px 0 0;padding-left:calc(1rem * .75);padding-left:calc(var(--pfe-theme--container-padding,1rem) * .75);border:1px solid transparent;border:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) transparent;border-right:0;position:relative}:host([vertical][aria-selected=true]){border-color-top:transparent;border-right:3px solid var(--pfe-tabs--highlight);border-right:var(--pfe-theme--surface--border-width--heavy,3px) var(--pfe-theme--surface--border-style,solid) var(--pfe-tabs--highlight)}}:host([pfe-variant=wind][aria-selected=true][on=dark]),:host([pfe-variant=wind][on=dark]:hover){--pfe-tabs--aux:var(--pfe-theme--color--text--on-dark, #fff)}:host([pfe-variant=earth][aria-selected=false]){border-left:1px solid #dfdfdf;border-left:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#dfdfdf);border-bottom:1px solid #dfdfdf;border-bottom:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#dfdfdf);border-top:3px solid #ececec;border-top:var(--pfe-theme--surface--border-width--heavy,3px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--lighter,#ececec);--pfe-tabs--main:var(--pfe-theme--color--surface--lighter, #ececec)}:host([pfe-variant=earth][aria-selected=true]){--pfe-tabs--main:var(--pfe-theme--color--surface--lightest, #fff);border-top:3px solid var(--pfe-tabs--highlight);border-top:var(--pfe-theme--surface--border-width--heavy,3px) var(--pfe-theme--surface--border-style,solid) var(--pfe-tabs--highlight);border-bottom:0;border-left:1px solid #dfdfdf;border-left:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#dfdfdf)}:host([pfe-variant=earth][aria-selected=true]:last-of-type){border-right:1px solid #dfdfdf;border-right:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#dfdfdf)}@media screen and (min-width:768px){:host([vertical][pfe-variant=earth]){border-top:1px solid #dfdfdf;border-top:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#dfdfdf)}:host([vertical][pfe-variant=earth]:first-of-type){border-top:0}:host([vertical][pfe-variant=earth][aria-selected=true]){border-top:1px solid #dfdfdf;border-top:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#dfdfdf);border-right:0;border-left:3px solid var(--pfe-tabs--highlight);border-left:var(--pfe-theme--surface--border-width--heavy,3px) var(--pfe-theme--surface--border-style,solid) var(--pfe-tabs--highlight)}:host([vertical][pfe-variant=earth][aria-selected=false]){border-right:1px solid #dfdfdf;border-right:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#dfdfdf);border-bottom:0;border-left:3px solid #ececec;border-left:var(--pfe-theme--surface--border-width--heavy,3px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--lighter,#ececec)}:host([vertical][pfe-variant=earth][aria-selected=true]:last-of-type){border-bottom:1px solid #dfdfdf;border-bottom:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#dfdfdf)}} \ No newline at end of file diff --git a/elements/pfe-tabs/pfe-tabs.css b/elements/pfe-tabs/pfe-tabs.css new file mode 100644 index 0000000000..f41c72bbef --- /dev/null +++ b/elements/pfe-tabs/pfe-tabs.css @@ -0,0 +1,106 @@ +/* + * Copyright 2018 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. + */ +/* Palette of Border Colors */ +/* Palette of Feedback Colors */ +:host { + display: block; +} + +:host .panels { + padding: 0; +} + +.tabs { + --pfe-tabs--BorderColor: var(--pfe-theme--color--surface--border, #dfdfdf); + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + border: 0; + border-bottom: 1px solid var(--pfe-tabs--BorderColor); + border-bottom: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-tabs--BorderColor); +} + +@media screen and (min-width: 768px) { + :host([vertical]) { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + } + :host([vertical]) .tabs { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + width: 22.22%; + border: 0; + border-right: 1px solid var(--pfe-tabs--BorderColor); + border-right: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-tabs--BorderColor); + } + :host([vertical]) .panels { + padding: 0; + width: 77.78%; + padding-right: 1rem; + padding-right: var(--pfe-theme--container-padding, 1rem); + } +} + +@media screen and (min-width: 768px) { + :host([vertical][pfe-variant="earth"]) { + padding-top: 1rem; + padding-top: var(--pfe-theme--container-padding, 1rem); + } + :host([vertical][pfe-variant="earth"]) .tabs { + padding-left: 0; + padding-top: 1rem; + padding-top: var(--pfe-theme--container-padding, 1rem); + } +} + +:host([pfe-variant="earth"]) .tabs { + padding-left: 1rem; + padding-left: var(--pfe-theme--container-padding, 1rem); +} + +:host([pfe-variant="earth"]) .tabs ::slotted(pfe-tab[aria-selected="false"]:not([vertical]):first-of-type) { + border-left: 0; +} + +:host([on="dark"]) { + --pfe-broadcasted--color--text: var(--pfe-theme--color--text--on-dark, #fff); + --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--ui-link--on-dark, #99ccff); + --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9); + --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff); + --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff); +} + +:host([on="light"]) { + --pfe-broadcasted--color--text: var(--pfe-theme--color--text, #333); + --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--ui-link, #06c); + --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--ui-link--visited, rebeccapurple); + --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--ui-link--hover, #003366); + --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--ui-link--focus, #003366); +} + +/*# sourceMappingURL=pfe-tabs.css.map */ diff --git a/elements/pfe-tabs/pfe-tabs.css.map b/elements/pfe-tabs/pfe-tabs.css.map new file mode 100644 index 0000000000..2109e9d38b --- /dev/null +++ b/elements/pfe-tabs/pfe-tabs.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../pfe-sass/pfe-sass.scss","pfe-tabs.css","../../pfe-sass/variables/_colors.scss","pfe-tabs.scss","../../pfe-sass/mixins/_mixins.scss"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;ECoBE;AC4GF,6BAAA;AAOA,+BAAA;AC7HA;EACE,cAAc;AFchB;;AEfA;EAII,UAAU;AFed;;AEXA;EACE,0EAAwB;EACxB,oBAAa;EAAb,qBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,SAAS;EACT,qDAAkG;EAAlG,6HAAkG;AFcpG;;AENA;EACE;IACE,oBAAa;IAAb,qBAAa;IAAb,oBAAa;IAAb,aAAa;EFSf;EEVA;IAII,4BAAsB;IAAtB,6BAAsB;IAAtB,8BAAsB;QAAtB,0BAAsB;YAAtB,sBAAsB;IACtB,aAAa;IACb,SAAS;IACT,oDAAiG;IAAjG,4HAAiG;EFSrG;EEhBA;IAWI,UAAU;IACV,aAAa;IACb,mBAAe;IAAf,wDAAe;EFQnB;AACF;;AEAA;EACE;IACE,iBAAa;IAAb,sDAAa;EFGf;EEJA;IAII,eAAe;IACf,iBAAa;IAAb,sDAAa;EFGjB;AACF;;AECA;EAEI,kBAAc;EAAd,uDAAc;AFClB;;AEHA;EAKM,cAAc;AFEpB;;AEGA;EC9BI,0FAA+B;EAC/B,gGAAkC;EAClC,yGAA2C;EAC3C,uGAAyC;EACzC,uGAAyC;AH+B7C;;AEOA;ECnCI,iFAA+B;EAC/B,oFAAkC;EAClC,sGAA2C;EAC3C,8FAAyC;EACzC,8FAAyC;AHgC7C","file":"pfe-tabs.css","sourcesContent":["/*\n * Copyright 2018 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// PFElements SASS / Styles\n// This will no longer be \"RH\" for \"Red Hat\", but for \"PFElement\"\n//\n\n$repo: pfe !default;\n$pfe-global--font-size-root: 16 !default; // root for fonts and everything else\n\n@import \"_functions\";\n@import \"_variables\";\n@import \"_mixins\";\n","/*\n * Copyright 2018 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/* Palette of Border Colors */\n/* Palette of Feedback Colors */\n:host {\n display: block;\n}\n\n:host .panels {\n padding: 0;\n}\n\n.tabs {\n --pfe-tabs--BorderColor: var(--pfe-theme--color--surface--border, #dfdfdf);\n display: flex;\n border: 0;\n border-bottom: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-tabs--BorderColor);\n}\n\n@media screen and (min-width: 768px) {\n :host([vertical]) {\n display: flex;\n }\n :host([vertical]) .tabs {\n flex-direction: column;\n width: 22.22%;\n border: 0;\n border-right: var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-tabs--BorderColor);\n }\n :host([vertical]) .panels {\n padding: 0;\n width: 77.78%;\n padding-right: var(--pfe-theme--container-padding, 1rem);\n }\n}\n\n@media screen and (min-width: 768px) {\n :host([vertical][pfe-variant=\"earth\"]) {\n padding-top: var(--pfe-theme--container-padding, 1rem);\n }\n :host([vertical][pfe-variant=\"earth\"]) .tabs {\n padding-left: 0;\n padding-top: var(--pfe-theme--container-padding, 1rem);\n }\n}\n\n:host([pfe-variant=\"earth\"]) .tabs {\n padding-left: var(--pfe-theme--container-padding, 1rem);\n}\n\n:host([pfe-variant=\"earth\"]) .tabs ::slotted(pfe-tab[aria-selected=\"false\"]:not([vertical]):first-of-type) {\n border-left: 0;\n}\n\n:host([on=\"dark\"]) {\n --pfe-broadcasted--color--text: var(--pfe-theme--color--text--on-dark, #fff);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--ui-link--on-dark, #99ccff);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff);\n}\n\n:host([on=\"light\"]) {\n --pfe-broadcasted--color--text: var(--pfe-theme--color--text, #333);\n --pfe-broadcasted--color--ui-link: var(--pfe-theme--color--ui-link, #06c);\n --pfe-broadcasted--color--ui-link--visited: var(--pfe-theme--color--ui-link--visited, rebeccapurple);\n --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--ui-link--hover, #003366);\n --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--ui-link--focus, #003366);\n}\n","// TODO: Reconcile with _maps.scss so there's only one file and no middleman.\n\n// ========================================================================\n// COLORS for PFElements\n//\n// Context-based colors to be used in styling PFElements along with _maps.scss\n// @requires _crayola.scss\n//\n// ========================================================================\n\n\n// ========================================================================\n// Base Text Colors\n// ========================================================================\n\n$pfe-color--text: $pfelements--gray-dark !default;\n$pfe-color--text--on-dark: $pfe-color--white !default;\n$pfe-color--text--on-saturated: $pfe-color--white !default;\n\n\n// ========================================================================\n// Base UI Link Colors to be used below\n// ========================================================================\n\n$pfe-color--ui-link: #06c !default;\n$pfe-color--ui-link--visited: $pfelements--purple !default; // Was #7551a6\n$pfe-color--ui-link--hover: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n$pfe-color--ui-link--focus: darken($pfe-color--ui-link, 20%) !default; // Was #004080\n\n$pfe-color--ui-link--on-dark: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-dark--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-dark--hover: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-dark--focus: lighten($pfe-color--ui-link--on-dark, 10%) !default; // Was #c0ecff\n\n$pfe-color--ui-link--on-saturated: lighten($pfe-color--ui-link, 40%) !default; // Was #97daff\n$pfe-color--ui-link--on-saturated--visited: lighten($pfe-color--ui-link--visited, 30%) !default; // Was #d8c0ff\n$pfe-color--ui-link--on-saturated--hover: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n$pfe-color--ui-link--on-saturated--focus: lighten($pfe-color--ui-link--on-saturated, 10%) !default; // Was #c0ecff\n\n\n// ========================================================================\n// Base UI Colors for Buttons, CTAs, and actionable UI elements\n// ========================================================================\n\n$pfe-color--ui-base: $pfelements--blue !default;\n$pfe-color--ui-base--hover: darken($pfelements--blue, 20%) !default;\n$pfe-color--ui-base--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-base--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-complement: $pfe-color--gray-800 !default;\n$pfe-color--ui-complement--hover: $pfe-color--gray-1000 !default;\n$pfe-color--ui-complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-complement--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-accent: $pfelements--orange !default;\n$pfe-color--ui-accent--hover: darken($pfelements--orange, 20%) !default;\n$pfe-color--ui-accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--ui-accent--text--hover: $pfe-color--text--on-dark !default;\n\n$pfe-color--ui-disabled: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--hover: $pfelements--gray-light !default;\n$pfe-color--ui-disabled--text: $pfelements--gray !default;\n$pfe-color--ui-disabled--text--hover: $pfelements--gray !default;\n\n\n// ========================================================================\n// Base Surface Colors for Container elements\n// ========================================================================\n\n// Lightest group\n$pfe-color--surface--lightest: $pfe-color--white !default;\n$pfe-color--surface--lightest--text: $pfe-color--text !default;\n$pfe-color--surface--lightest--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lightest--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lightest--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lightest--link--focus: $pfe-color--ui-link--focus !default;\n\n// Lighter group\n$pfe-color--surface--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--lighter--text: $pfe-color--text !default;\n$pfe-color--surface--lighter--link: $pfe-color--ui-link !default;\n$pfe-color--surface--lighter--link--visited: $pfe-color--ui-link--visited !default;\n$pfe-color--surface--lighter--link--hover: $pfe-color--ui-link--hover !default;\n$pfe-color--surface--lighter--link--focus: $pfe-color--ui-link--focus !default;\n\n// Base group\n$pfe-color--surface--base: $pfe-color--gray-200 !default;\n$pfe-color--surface--base--text: $pfe-color--text !default;\n$pfe-color--surface--base--link: #00538c !default; // Contrast with $pfe-color--ui-link doesn't meet WCAG2 AA\n$pfe-color--surface--base--link--visited: #7551a6 !default;\n$pfe-color--surface--base--link--hover: #00305b !default;\n$pfe-color--surface--base--link--focus: #00305b !default;\n\n// Darker group\n$pfe-color--surface--darker: $pfe-color--gray-800 !default;\n$pfe-color--surface--darker--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darker--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darker--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darker--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darker--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Darkest group\n$pfe-color--surface--darkest: $pfe-color--gray-1000 !default;\n$pfe-color--surface--darkest--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--darkest--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--darkest--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--darkest--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--darkest--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n// Complement group\n$pfe-color--surface--complement: $pfelements--blue;\n$pfe-color--surface--complement--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--complement--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--complement--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--complement--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--complement--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n// Accent group\n$pfe-color--surface--accent: $pfelements--orange;\n$pfe-color--surface--accent--text: $pfe-color--text--on-dark !default;\n$pfe-color--surface--accent--link: $pfe-color--ui-link--on-dark !default;\n$pfe-color--surface--accent--link--visited: $pfe-color--ui-link--on-dark--visited !default;\n$pfe-color--surface--accent--link--hover: $pfe-color--ui-link--on-dark--hover !default;\n$pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--focus !default;\n\n\n\n/* Palette of Border Colors */\n$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc\n$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7\n$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;\n$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;\n$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;\n\n/* Palette of Feedback Colors */\n$pfe-color--feedback--critical: $pfe-color--red-600 !default;\n$pfe-color--feedback--critical--lightest: $pfe-color--red-50 !default;\n$pfe-color--feedback--critical--darkest: $pfe-color--red-800 !default;\n\n$pfe-color--feedback--important: $pfe-color--orange-500 !default;\n$pfe-color--feedback--important--lightest: $pfe-color--orange-50 !default;\n$pfe-color--feedback--important--darkest: $pfe-color--orange-700 !default;\n\n$pfe-color--feedback--moderate: $pfe-color--yellow-400 !default;\n$pfe-color--feedback--moderate--lightest: $pfe-color--yellow-50 !default;\n$pfe-color--feedback--moderate--darkest: $pfe-color--yellow-700 !default;\n\n$pfe-color--feedback--success: #2e7d32 !default;\n$pfe-color--feedback--success--lightest: $pfe-color--green-50 !default;\n$pfe-color--feedback--success--darkest: #1b5e20 !default;\n\n$pfe-color--feedback--info: #0277bd !default;\n$pfe-color--feedback--info--lightest: $pfe-color--blue-50 !default;\n$pfe-color--feedback--info--darkest: #01579b !default;\n\n$pfe-color--feedback--default: $pfe-color--gray-700 !default;\n$pfe-color--feedback--default--lightest: $pfe-color--gray-100 !default;\n$pfe-color--feedback--default--darkest: $pfe-color--gray-800 !default;\n","@import \"../../pfe-sass/pfe-sass\";\n\n$LOCAL: tabs;\n\n/// ===========================================================================\n/// Component Specific SASS Vars\n/// ===========================================================================\n\n$pfe-tabs__panel--PaddingLeft-factor: 2;\n\n:host {\n display: block;\n\n .panels {\n padding: 0;\n }\n}\n\n.tabs {\n --pfe-tabs--BorderColor: #{pfe-color(surface--border)};\n display: flex;\n border: 0;\n border-bottom: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-local(BorderColor)};\n}\n\n\n/// ===========================================================================\n/// VERTICAL ORIENTATION\n/// ===========================================================================\n\n@media screen and (min-width: #{pfe-breakpoint(md)}) {\n :host([vertical]) {\n display: flex; // Sets tabs to appear to the left of the panels.\n\n .tabs {\n flex-direction: column;\n width: 22.22%;\n border: 0;\n border-right: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-local(BorderColor)};\n }\n\n .panels {\n padding: 0;\n width: 77.78%;\n padding-right: #{pfe-var(container-padding)};\n }\n }\n}\n\n/// ===========================================================================\n/// TAB VARIANTS\n/// ===========================================================================\n\n@media screen and (min-width: #{pfe-breakpoint(md)}) {\n :host([vertical][pfe-variant=\"earth\"]) {\n padding-top: #{pfe-var(container-padding)};\n\n .tabs {\n padding-left: 0;\n padding-top: #{pfe-var(container-padding)};\n }\n }\n}\n\n:host([pfe-variant=\"earth\"]) {\n .tabs {\n padding-left: #{pfe-var(container-padding)};\n\n ::slotted(pfe-tab[aria-selected=\"false\"]:not([vertical]):first-of-type) {\n border-left: 0;\n }\n }\n}\n\n:host([on=\"dark\"]) {\n @include pfe-theme($theme: \"dark\");\n}\n// TODO: address tabs on darker and darkest themes.\n// :host([color=\"darker\"]) {\n// @include pfe-theme($theme: \"darker\");\n// }\n// :host([color=\"darkest\"]) {\n// @include pfe-theme($theme: \"darkest\");\n// }\n\n\n:host([on=\"light\"]) {\n @include pfe-theme($theme: \"light\");\n}\n// TODO: address tabs on lighter and lightest themes.\n// :host([on=\"lighter\"]) {\n// @include pfe-theme($theme: \"lighter\");\n// }\n// :host([on=\"lightest\"]) {\n// @include pfe-theme($theme: \"lightest\");\n// }\n\n","// $boxSize = any box-sizing property, default is border-box\n@mixin pfe-box-sizing($boxSize: border-box) {\n *, *::before, *::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-reset-list() {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n@mixin pfe-reset-box() {\n margin: 0;\n padding: 0;\n}\n\n@mixin pfe-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/// ===========================================================================\n/// Theme Color Vars - use with on=\"dark\" to affect light DOM\n/// ===========================================================================\n\n@mixin pfe-theme($theme) {\n // GENERAL CONTEXT-BASED UPDATES, ON=\"DARK\"\n @if $theme == dark {\n --pfe-broadcasted--color--text: #{pfe-color(text--on-dark)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(ui-link--on-dark)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--on-dark--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--on-dark--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--on-dark--focus)};\n }\n @else if $theme == light {\n --pfe-broadcasted--color--text: #{pfe-color(text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(ui-link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--focus)};\n }\n // MORE SPECIFIC COLOR BASED UPDATES, COLOR=\"DARKER\"\n @else if $theme == darker {\n --pfe-broadcasted--color--text: #{pfe-color(surface--darker--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darker--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darker--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darker--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darker--link--focus)};\n }\n @else if $theme == darkest {\n --pfe-broadcasted--color--text: #{pfe-color(surface--darkest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darkest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darkest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darkest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darkest--link--focus)};\n }\n @else if $theme == accent {\n --pfe-broadcasted--color--text: #{pfe-color(surface--accent--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--accent--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--accent--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--accent--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--accent--link--focus)};\n }\n @else if $theme == complement {\n --pfe-broadcasted--color--text: #{pfe-color(surface--complement--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--complement--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--complement--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--complement--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--complement--link--focus)};\n }\n\n @else if $theme == lighter {\n --pfe-broadcasted--color--text: #{pfe-color(surface--lighter--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lighter--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lighter--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lighter--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lighter--link--focus)};\n }\n @else if $theme == lightest {\n --pfe-broadcasted--color--text: #{pfe-color(surface--lightest--text)};\n --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lightest--link)};\n --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lightest--link--visited)};\n --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lightest--link--hover)};\n --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lightest--link--focus)};\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// scss-lint:disable ImportantRule\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// scss-lint:enable ImportantRule\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 for building slot selectors\n@mixin pfe-slot($slot-name, $selector: \"\") {\n // This logic makes it much easier to style default slots in a loop\n // with named slots\n @if $slot-name != default {\n ::slotted([slot=\"#{$slot-name}\"]#{$selector}) {\n @content;\n }\n }\n @else {\n ::slotted(*) {\n @content;\n }\n }\n}\n\n/// ===========================================================================\n/// Accordion Specific SASS Vars\n/// ===========================================================================\n\n$pfe-expand_button--LineHeight: 1.5;\n$pfe-expand_button--padding: #{pfe-var(container-spacer)};\n$pfe-expand_button--padding--factor: .75;\n$pfe-expand_button--padding--wide: calc(#{$pfe-expand_button--padding} * 1.5);\n\n$pfe-expand_chevron--size: .4em;\n$pfe-expand_chevron--weight: .1em;\n$pfe-expand_chevron--padding: 3em;\n$pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe-expand_chevron--size / 2};\n\n@mixin pfe-accordion-header {\n display: block;\n > * {\n margin: 0;\n }\n}\n\n@mixin pfe-trigger-button($align: left) {\n -webkit-appearance: button;\n margin: 0;\n width: 100%;\n height: auto;\n font-family: inherit;\n font-weight: #{pfe-var(font-weight--bold)};\n text-align: left;\n cursor: pointer;\n z-index: 1;\n position: relative;\n\n font-size: calc(#{pfe-var(font-size)} * 1.1);\n line-height: #{pfe-var(line-height)};\n\n color: #{pfe-local(aux)};\n background-color: #{pfe-local(main)};\n border-left: #{pfe-local(BorderLeft)};\n border-right: #{pfe-local(BorderRight)};\n border-bottom: #{pfe-local(BorderBottom)};\n border-top: 0;\n\n &:hover {\n outline: none;\n border-left-color: #{pfe-local(BorderLeftColor--focus)};\n z-index: 2;\n }\n\n &:focus {\n outline: none;\n z-index: 2;\n text-decoration: underline;\n text-decoration-color: #{pfe-color(surface--border--darker)};\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n @if $align == right {\n padding: #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} 50px;\n } @else {\n padding: #{$pfe-expand_button--padding} 50px #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};\n }\n}\n\n@mixin pfe-trigger-button-last($theme: light) {\n border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n // @TODO Support differences based on theme\n}\n\n@mixin pfe-trigger-button-first($theme: light) {\n border-top: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n // @TODO Support differences based on theme\n}\n\n@mixin pfe-trigger-expanded {\n position: relative;\n display: block;\n border-bottom: 0;\n}\n\n@mixin pfe-trigger-color($component-name, $theme: light) {\n @if $theme == dark {\n --pfe-#{$component-name}--main: transparent;\n --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)};\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};\n }\n @else {\n --pfe-#{$component-name}--main: transparent;\n --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)};\n\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} transparent;\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n --pfe-#{$component-name}--BorderBottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest--link)};\n }\n}\n\n@mixin pfe-trigger-color-expanded($component-name, $theme: light) {\n @if $theme == dark {\n --pfe-#{$component-name}--main: #{pfe-color(surface--darker)};\n --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)};\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)};\n\n --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)};\n }\n @else {\n --pfe-#{$component-name}--main: #{pfe-color(surface--lightest)};\n --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)};\n --pfe-#{$component-name}--focus: #{pfe-color(surface--lightest--link)};\n --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--lightest--link)};\n --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n }\n}\n\n/// ===========================================================================\n/// Accordion chevrons\n/// ===========================================================================\n\n@mixin pfe-chevron-expanded($state: true, $position: after) {\n content: \"\";\n position: absolute;\n top: calc((#{pfe-var(container-spacer)} * #{$pfe-expand_button--padding--factor}) + #{$pfe-expand_chevron--placement} );\n display: block;\n border-style: #{pfe-var(surface--border-style)};\n height: #{$pfe-expand_chevron--size};\n width: #{$pfe-expand_chevron--size};\n text-align: center;\n transition: transform 0.15s;\n @if $state {\n border-width: #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0 0;\n border-bottom: 0;\n transform: rotate(-45deg);\n @if $position == before {\n left: #{$pfe-expand_button--padding--wide};\n }\n @else {\n right: #{$pfe-expand_button--padding--wide};\n }\n }\n @else {\n border-width: 0 #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0;\n transform: rotate(45deg);\n @if $position == before {\n left: #{$pfe-expand_button--padding--wide};\n }\n @else {\n right: #{$pfe-expand_button--padding--wide};\n }\n }\n}\n\n/// ===========================================================================\n/// Accordion panel\n/// ===========================================================================\n\n@mixin pfe-container {\n position: relative;\n display: block;\n width: 100%;\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@mixin pfe-accordion-panel {\n display: none;\n overflow: hidden;\n will-change: height;\n border-color: transparent;\n}\n\n@mixin pfe-accordion-panel-expanded {\n display: block;\n position: relative;\n}\n\n@mixin pfe-accordion-panel-expanded-style($theme: light) {\n border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;\n border-left: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} transparent;\n @if $theme == dark {\n box-shadow: none;\n background-color: #{pfe-color(surface--darker)};\n border-left-color: #{pfe-color(surface--darkest--text)};\n border-right-color: #{pfe-color(surface--darkest--text)};\n }\n @else {\n box-shadow: 0 5px #{pfe-var(surface--border-width--heavy)} rgba(140, 140, 140, 0.35);\n border-left-color: #{pfe-color(surface--lightest--link)};\n background-color: #{pfe-color(surface--lightest)};\n border-right-color: #{pfe-color(surface--border--lightest)};\n border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};\n }\n}\n\n@mixin pfe-accordion-panel-container-inset($align: left) {\n box-sizing: border-box;\n width: 100%;\n\n @if $align == left {\n padding: 0 #{$pfe-expand_chevron--padding} #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide};\n }\n @else {\n padding: 0 #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} #{$pfe-expand_chevron--padding};\n }\n}\n"]} \ No newline at end of file diff --git a/elements/pfe-tabs/pfe-tabs.css.min.map b/elements/pfe-tabs/pfe-tabs.css.min.map new file mode 100644 index 0000000000..e69de29bb2 diff --git a/elements/pfe-tabs/pfe-tabs.js b/elements/pfe-tabs/pfe-tabs.js new file mode 100644 index 0000000000..cfe7b39bde --- /dev/null +++ b/elements/pfe-tabs/pfe-tabs.js @@ -0,0 +1,594 @@ +import PFElement from '../pfelement/pfelement.js'; + +/* + * @license + * Copyright 2019 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. + * +*/ + +// https://tc39.github.io/ecma262/#sec-array.prototype.find +if (!Array.prototype.find) { + Object.defineProperty(Array.prototype, "find", { + 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 kValue. + var kValue = o[k]; + if (predicate.call(thisArg, kValue, k, o)) { + return kValue; + } + // e. Increase k by 1. + k++; + } + + // 7. Return undefined. + return undefined; + }, + configurable: true, + writable: true + }); +} + +// 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; + }, + configurable: true, + writable: true + }); +} + +const KEYCODE = { + DOWN: 40, + LEFT: 37, + RIGHT: 39, + UP: 38, + HOME: 36, + END: 35 +}; + +function generateId() { + return Math.random() + .toString(36) + .substr(2, 9); +} + +class PfeTabs extends PFElement { + + get html() { + return `
    + +
    +
    + +
    `; + } + static get tag() { + return "pfe-tabs"; + } + + get styleUrl() { + return "pfe-tabs.scss"; + } + + get templateUrl() { + return "pfe-tabs.html"; + } + + static get observedAttributes() { + return ["vertical", "selected-index", "pfe-variant", "on"]; + } + + get selectedIndex() { + return this.getAttribute("selected-index"); + } + + set selectedIndex(value) { + this.setAttribute("selected-index", value); + } + + constructor() { + super(PfeTabs); + + this._linked = false; + + this._onSlotChange = this._onSlotChange.bind(this); + this._onClick = this._onClick.bind(this); + + this._tabSlot = this.shadowRoot.querySelector('slot[name="tab"]'); + this._panelSlot = this.shadowRoot.querySelector('slot[name="panel"]'); + + this._tabSlot.addEventListener("slotchange", this._onSlotChange); + this._panelSlot.addEventListener("slotchange", this._onSlotChange); + } + + connectedCallback() { + super.connectedCallback(); + + this.addEventListener("keydown", this._onKeyDown); + this.addEventListener("click", this._onClick); + + if (!this.hasAttribute("role")) { + this.setAttribute("role", "tablist"); + } + + if (!this.hasAttribute("selected-index")) { + this.selectedIndex = 0; + } + + Promise.all([ + customElements.whenDefined(PfeTab.tag), + customElements.whenDefined(PfeTabPanel.tag) + ]).then(() => this._linkPanels()); + } + + disconnectedCallback() { + this.removeEventListener("keydown", this._onKeyDown); + this._allTabs().forEach(tab => tab.removeEventListener("click", this._onClick)); + } + + attributeChangedCallback(attr, oldValue, newValue) { + switch (attr) { + case "pfe-variant": + if (this.getAttribute("pfe-variant") === "wind") { + this._allTabs().forEach(tab => + tab.setAttribute("pfe-variant", "wind") + ); + this._allPanels().forEach(panel => + panel.setAttribute("pfe-variant", "wind") + ); + } else if (this.getAttribute("pfe-variant") === "earth") { + this._allTabs().forEach(tab => + tab.setAttribute("pfe-variant", "earth") + ); + this._allPanels().forEach(panel => + panel.setAttribute("pfe-variant", "earth") + ); + } + break; + + case "vertical": + if (this.hasAttribute("vertical")) { + this.setAttribute("aria-orientation", "vertical"); + this._allPanels().forEach(panel => + panel.setAttribute("vertical", "") + ); + this._allTabs().forEach(tab => tab.setAttribute("vertical", "")); + } else { + this.removeAttribute("aria-orientation"); + this._allPanels().forEach(panel => panel.removeAttribute("vertical")); + this._allTabs().forEach(tab => tab.removeAttribute("vertical")); + } + break; + + case "on": + if (this.getAttribute("on") === "dark") { + this._allTabs().forEach(tab => + tab.setAttribute("on", "dark") + ); + this._allPanels().forEach(panel => + panel.setAttribute("on", "dark") + ); + } + break; + + case "selected-index": + Promise.all([ + customElements.whenDefined(PfeTab.tag), + customElements.whenDefined(PfeTabPanel.tag) + ]).then(() => { + this._linkPanels(); + this.selectIndex(newValue); + }); + } + } + + select(newTab) { + if (!newTab) { + return; + } + + if (newTab.tagName.toLowerCase() !== "pfe-tab") { + console.warn(`${PfeTabs.tag}: the tab must be a pfe-tab element`); + return; + } + + this.selectedIndex = this._getTabIndex(newTab); + } + + selectIndex(_index) { + if (_index === undefined) { + return; + } + + const index = parseInt(_index, 10); + const tabs = this._allTabs(); + const tab = tabs[index]; + + if (!tab) { + console.warn(`${PfeTabs.tag}: tab ${_index} does not exist`); + return; + } + + this._selectTab(tab); + } + + _onSlotChange() { + this._linked = false; + this._linkPanels(); + } + + _linkPanels() { + if (this._linked) { + return; + } + + const tabs = this._allTabs(); + + tabs.forEach(tab => { + const panel = tab.nextElementSibling; + if (panel.tagName.toLowerCase() !== "pfe-tab-panel") { + console.warn( + `${PfeTabs.tag}: tab #${tab.pfeId} is not a sibling of a ` + ); + return; + } + + tab.setAttribute("aria-controls", panel.pfeId); + panel.setAttribute("aria-labelledby", tab.pfeId); + + tab.addEventListener("click", this._onClick); + }); + + this._linked = true; + } + + _allPanels() { + return [...this.querySelectorAll("pfe-tab-panel")]; + } + + _allTabs() { + return [...this.querySelectorAll("pfe-tab")]; + } + + _panelForTab(tab) { + const panelId = tab.getAttribute("aria-controls"); + return this.querySelector(`[pfe-id="${panelId}"]`); + } + + _prevTab() { + const tabs = this._allTabs(); + let newIdx = tabs.findIndex(tab => tab.selected) - 1; + return tabs[(newIdx + tabs.length) % tabs.length]; + } + + _firstTab() { + const tabs = this._allTabs(); + return tabs[0]; + } + + _lastTab() { + const tabs = this._allTabs(); + return tabs[tabs.length - 1]; + } + + _nextTab() { + const tabs = this._allTabs(); + let newIdx = tabs.findIndex(tab => tab.selected) + 1; + return tabs[newIdx % tabs.length]; + } + + _getTabIndex(_tab) { + const tabs = this._allTabs(); + const index = tabs.findIndex(tab => tab.pfeId === _tab.pfeId); + return index; + } + + reset() { + const tabs = this._allTabs(); + const panels = this._allPanels(); + + tabs.forEach(tab => (tab.selected = false)); + panels.forEach(panel => (panel.hidden = true)); + } + + _selectTab(newTab) { + this.reset(); + + const newPanel = this._panelForTab(newTab); + let newTabSelected = false; + + if (!newPanel) { + throw new Error(`No panel with pfeId ${newPanel.pfeId}`); + } + + if (this.selected && this.selected !== newTab) { + newTabSelected = true; + + this.dispatchEvent( + new CustomEvent(`${PfeTabs.tag}:hidden-tab`, { + bubbles: true, + detail: { + tab: this.selected + } + }) + ); + } + + newTab.selected = true; + newPanel.hidden = false; + + if (this._setFocus) { + newTab.focus(); + this._setFocus = false; + } + + const tabs = this._allTabs(); + const newIdx = tabs.findIndex(tab => tab.selected); + + this.selected = newTab; + + if (newTabSelected) { + this.dispatchEvent( + new CustomEvent(`${PfeTabs.tag}:shown-tab`, { + bubbles: true, + detail: { + tab: this.selected + } + }) + ); + } + } + + _onKeyDown(event) { + if (event.target.getAttribute("role") !== "tab") { + return; + } + + if (event.altKey) { + return; + } + + let newTab; + + switch (event.keyCode) { + case KEYCODE.LEFT: + case KEYCODE.UP: + newTab = this._prevTab(); + break; + + case KEYCODE.RIGHT: + case KEYCODE.DOWN: + newTab = this._nextTab(); + break; + + case KEYCODE.HOME: + newTab = this._firstTab(); + break; + + case KEYCODE.END: + newTab = this._lastTab(); + break; + + default: + return; + } + + event.preventDefault(); + + this.selectedIndex = this._getTabIndex(newTab); + this._setFocus = true; + } + + _onClick(event) { + if (event.currentTarget.getAttribute("role") !== "tab") { + return; + } + + this.selectedIndex = this._getTabIndex(event.currentTarget); + } +} + +class PfeTab extends PFElement { + + get html() { + return ``; + } + static get tag() { + return "pfe-tab"; + } + + get styleUrl() { + return "pfe-tab.scss"; + } + + get templateUrl() { + return "pfe-tab.html"; + } + + static get observedAttributes() { + return ["aria-selected"]; + } + + constructor() { + super(PfeTab); + } + + get pfeId() { + return this.getAttribute("pfe-id"); + } + + set pfeId(id) { + if (!id) { + return; + } + + this.setAttribute("pfe-id", id); + } + + connectedCallback() { + super.connectedCallback(); + + if (!this.pfeId) { + this.pfeId = `${PfeTab.tag}-${generateId()}`; + } + + this.setAttribute("role", "tab"); + this.setAttribute("aria-selected", "false"); + this.setAttribute("tabindex", -1); + + if (this.parentNode.hasAttribute("vertical")) { + this.setAttribute("vertical", ""); + } + } + + attributeChangedCallback() { + const value = Boolean(this.selected); + this.setAttribute("tabindex", value ? 0 : -1); + } + + set selected(value) { + value = Boolean(value); + this.setAttribute("aria-selected", value); + } + + get selected() { + return this.getAttribute("aria-selected") === "true" ? true : false; + } +} + +class PfeTabPanel extends PFElement { + + get html() { + return `
    +
    + +
    +
    `; + } + static get tag() { + return "pfe-tab-panel"; + } + + get styleUrl() { + return "pfe-tab-panel.scss"; + } + + get templateUrl() { + return "pfe-tab-panel.html"; + } + + get pfeId() { + return this.getAttribute("pfe-id"); + } + + set pfeId(id) { + if (!id) { + return; + } + + this.setAttribute("pfe-id", id); + } + + constructor() { + super(PfeTabPanel); + } + + connectedCallback() { + super.connectedCallback(); + + if (!this.pfeId) { + this.pfeId = `${PfeTabPanel.tag}-${generateId()}`; + } + + this.setAttribute("role", "tabpanel"); + this.setAttribute("tabindex", 0); + } +} + +PFElement.create(PfeTab); +PFElement.create(PfeTabPanel); +PFElement.create(PfeTabs); + +export default PfeTabs; +//# sourceMappingURL=pfe-tabs.js.map diff --git a/elements/pfe-tabs/pfe-tabs.js.map b/elements/pfe-tabs/pfe-tabs.js.map new file mode 100644 index 0000000000..249e5d9ccb --- /dev/null +++ b/elements/pfe-tabs/pfe-tabs.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-tabs.js","sources":["pfe-tabs.js"],"sourcesContent":["/*\n * @license\n * Copyright 2019 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/pfelement.js\";\n\n// https://tc39.github.io/ecma262/#sec-array.prototype.find\nif (!Array.prototype.find) {\n Object.defineProperty(Array.prototype, \"find\", {\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 kValue.\n var kValue = o[k];\n if (predicate.call(thisArg, kValue, k, o)) {\n return kValue;\n }\n // e. Increase k by 1.\n k++;\n }\n\n // 7. Return undefined.\n return undefined;\n },\n configurable: true,\n writable: true\n });\n}\n\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 configurable: true,\n writable: true\n });\n}\n\nconst KEYCODE = {\n DOWN: 40,\n LEFT: 37,\n RIGHT: 39,\n UP: 38,\n HOME: 36,\n END: 35\n};\n\nfunction generateId() {\n return Math.random()\n .toString(36)\n .substr(2, 9);\n}\n\nclass PfeTabs extends PFElement {\n\n get html() {\n return `
    \n \n
    \n
    \n \n
    `;\n }\n static get tag() {\n return \"pfe-tabs\";\n }\n\n get styleUrl() {\n return \"pfe-tabs.scss\";\n }\n\n get templateUrl() {\n return \"pfe-tabs.html\";\n }\n\n static get observedAttributes() {\n return [\"vertical\", \"selected-index\", \"pfe-variant\", \"on\"];\n }\n\n get selectedIndex() {\n return this.getAttribute(\"selected-index\");\n }\n\n set selectedIndex(value) {\n this.setAttribute(\"selected-index\", value);\n }\n\n constructor() {\n super(PfeTabs);\n\n this._linked = false;\n\n this._onSlotChange = this._onSlotChange.bind(this);\n this._onClick = this._onClick.bind(this);\n\n this._tabSlot = this.shadowRoot.querySelector('slot[name=\"tab\"]');\n this._panelSlot = this.shadowRoot.querySelector('slot[name=\"panel\"]');\n\n this._tabSlot.addEventListener(\"slotchange\", this._onSlotChange);\n this._panelSlot.addEventListener(\"slotchange\", this._onSlotChange);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener(\"keydown\", this._onKeyDown);\n this.addEventListener(\"click\", this._onClick);\n\n if (!this.hasAttribute(\"role\")) {\n this.setAttribute(\"role\", \"tablist\");\n }\n\n if (!this.hasAttribute(\"selected-index\")) {\n this.selectedIndex = 0;\n }\n\n Promise.all([\n customElements.whenDefined(PfeTab.tag),\n customElements.whenDefined(PfeTabPanel.tag)\n ]).then(() => this._linkPanels());\n }\n\n disconnectedCallback() {\n this.removeEventListener(\"keydown\", this._onKeyDown);\n this._allTabs().forEach(tab => tab.removeEventListener(\"click\", this._onClick))\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n switch (attr) {\n case \"pfe-variant\":\n if (this.getAttribute(\"pfe-variant\") === \"wind\") {\n this._allTabs().forEach(tab =>\n tab.setAttribute(\"pfe-variant\", \"wind\")\n );\n this._allPanels().forEach(panel =>\n panel.setAttribute(\"pfe-variant\", \"wind\")\n );\n } else if (this.getAttribute(\"pfe-variant\") === \"earth\") {\n this._allTabs().forEach(tab =>\n tab.setAttribute(\"pfe-variant\", \"earth\")\n );\n this._allPanels().forEach(panel =>\n panel.setAttribute(\"pfe-variant\", \"earth\")\n );\n }\n break;\n\n case \"vertical\":\n if (this.hasAttribute(\"vertical\")) {\n this.setAttribute(\"aria-orientation\", \"vertical\");\n this._allPanels().forEach(panel =>\n panel.setAttribute(\"vertical\", \"\")\n );\n this._allTabs().forEach(tab => tab.setAttribute(\"vertical\", \"\"));\n } else {\n this.removeAttribute(\"aria-orientation\");\n this._allPanels().forEach(panel => panel.removeAttribute(\"vertical\"));\n this._allTabs().forEach(tab => tab.removeAttribute(\"vertical\"));\n }\n break;\n\n case \"on\":\n if (this.getAttribute(\"on\") === \"dark\") {\n this._allTabs().forEach(tab =>\n tab.setAttribute(\"on\", \"dark\")\n );\n this._allPanels().forEach(panel =>\n panel.setAttribute(\"on\", \"dark\")\n );\n }\n break;\n\n case \"selected-index\":\n Promise.all([\n customElements.whenDefined(PfeTab.tag),\n customElements.whenDefined(PfeTabPanel.tag)\n ]).then(() => {\n this._linkPanels();\n this.selectIndex(newValue);\n });\n }\n }\n\n select(newTab) {\n if (!newTab) {\n return;\n }\n\n if (newTab.tagName.toLowerCase() !== \"pfe-tab\") {\n console.warn(`${PfeTabs.tag}: the tab must be a pfe-tab element`);\n return;\n }\n\n this.selectedIndex = this._getTabIndex(newTab);\n }\n\n selectIndex(_index) {\n if (_index === undefined) {\n return;\n }\n\n const index = parseInt(_index, 10);\n const tabs = this._allTabs();\n const tab = tabs[index];\n\n if (!tab) {\n console.warn(`${PfeTabs.tag}: tab ${_index} does not exist`);\n return;\n }\n\n this._selectTab(tab);\n }\n\n _onSlotChange() {\n this._linked = false;\n this._linkPanels();\n }\n\n _linkPanels() {\n if (this._linked) {\n return;\n }\n\n const tabs = this._allTabs();\n\n tabs.forEach(tab => {\n const panel = tab.nextElementSibling;\n if (panel.tagName.toLowerCase() !== \"pfe-tab-panel\") {\n console.warn(\n `${PfeTabs.tag}: tab #${tab.pfeId} is not a sibling of a `\n );\n return;\n }\n\n tab.setAttribute(\"aria-controls\", panel.pfeId);\n panel.setAttribute(\"aria-labelledby\", tab.pfeId);\n\n tab.addEventListener(\"click\", this._onClick);\n });\n\n this._linked = true;\n }\n\n _allPanels() {\n return [...this.querySelectorAll(\"pfe-tab-panel\")];\n }\n\n _allTabs() {\n return [...this.querySelectorAll(\"pfe-tab\")];\n }\n\n _panelForTab(tab) {\n const panelId = tab.getAttribute(\"aria-controls\");\n return this.querySelector(`[pfe-id=\"${panelId}\"]`);\n }\n\n _prevTab() {\n const tabs = this._allTabs();\n let newIdx = tabs.findIndex(tab => tab.selected) - 1;\n return tabs[(newIdx + tabs.length) % tabs.length];\n }\n\n _firstTab() {\n const tabs = this._allTabs();\n return tabs[0];\n }\n\n _lastTab() {\n const tabs = this._allTabs();\n return tabs[tabs.length - 1];\n }\n\n _nextTab() {\n const tabs = this._allTabs();\n let newIdx = tabs.findIndex(tab => tab.selected) + 1;\n return tabs[newIdx % tabs.length];\n }\n\n _getTabIndex(_tab) {\n const tabs = this._allTabs();\n const index = tabs.findIndex(tab => tab.pfeId === _tab.pfeId);\n return index;\n }\n\n reset() {\n const tabs = this._allTabs();\n const panels = this._allPanels();\n\n tabs.forEach(tab => (tab.selected = false));\n panels.forEach(panel => (panel.hidden = true));\n }\n\n _selectTab(newTab) {\n this.reset();\n\n const newPanel = this._panelForTab(newTab);\n let newTabSelected = false;\n\n if (!newPanel) {\n throw new Error(`No panel with pfeId ${newPanel.pfeId}`);\n }\n\n if (this.selected && this.selected !== newTab) {\n newTabSelected = true;\n\n this.dispatchEvent(\n new CustomEvent(`${PfeTabs.tag}:hidden-tab`, {\n bubbles: true,\n detail: {\n tab: this.selected\n }\n })\n );\n }\n\n newTab.selected = true;\n newPanel.hidden = false;\n\n if (this._setFocus) {\n newTab.focus();\n this._setFocus = false;\n }\n\n const tabs = this._allTabs();\n const newIdx = tabs.findIndex(tab => tab.selected);\n\n this.selected = newTab;\n\n if (newTabSelected) {\n this.dispatchEvent(\n new CustomEvent(`${PfeTabs.tag}:shown-tab`, {\n bubbles: true,\n detail: {\n tab: this.selected\n }\n })\n );\n }\n }\n\n _onKeyDown(event) {\n if (event.target.getAttribute(\"role\") !== \"tab\") {\n return;\n }\n\n if (event.altKey) {\n return;\n }\n\n let newTab;\n\n switch (event.keyCode) {\n case KEYCODE.LEFT:\n case KEYCODE.UP:\n newTab = this._prevTab();\n break;\n\n case KEYCODE.RIGHT:\n case KEYCODE.DOWN:\n newTab = this._nextTab();\n break;\n\n case KEYCODE.HOME:\n newTab = this._firstTab();\n break;\n\n case KEYCODE.END:\n newTab = this._lastTab();\n break;\n\n default:\n return;\n }\n\n event.preventDefault();\n\n this.selectedIndex = this._getTabIndex(newTab);\n this._setFocus = true;\n }\n\n _onClick(event) {\n if (event.currentTarget.getAttribute(\"role\") !== \"tab\") {\n return;\n }\n\n this.selectedIndex = this._getTabIndex(event.currentTarget);\n }\n}\n\nclass PfeTab extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-tab\";\n }\n\n get styleUrl() {\n return \"pfe-tab.scss\";\n }\n\n get templateUrl() {\n return \"pfe-tab.html\";\n }\n\n static get observedAttributes() {\n return [\"aria-selected\"];\n }\n\n constructor() {\n super(PfeTab);\n }\n\n get pfeId() {\n return this.getAttribute(\"pfe-id\");\n }\n\n set pfeId(id) {\n if (!id) {\n return;\n }\n\n this.setAttribute(\"pfe-id\", id);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.pfeId) {\n this.pfeId = `${PfeTab.tag}-${generateId()}`;\n }\n\n this.setAttribute(\"role\", \"tab\");\n this.setAttribute(\"aria-selected\", \"false\");\n this.setAttribute(\"tabindex\", -1);\n\n if (this.parentNode.hasAttribute(\"vertical\")) {\n this.setAttribute(\"vertical\", \"\");\n }\n }\n\n attributeChangedCallback() {\n const value = Boolean(this.selected);\n this.setAttribute(\"tabindex\", value ? 0 : -1);\n }\n\n set selected(value) {\n value = Boolean(value);\n this.setAttribute(\"aria-selected\", value);\n }\n\n get selected() {\n return this.getAttribute(\"aria-selected\") === \"true\" ? true : false;\n }\n}\n\nclass PfeTabPanel extends PFElement {\n\n get html() {\n return `
    \n
    \n \n
    \n
    `;\n }\n static get tag() {\n return \"pfe-tab-panel\";\n }\n\n get styleUrl() {\n return \"pfe-tab-panel.scss\";\n }\n\n get templateUrl() {\n return \"pfe-tab-panel.html\";\n }\n\n get pfeId() {\n return this.getAttribute(\"pfe-id\");\n }\n\n set pfeId(id) {\n if (!id) {\n return;\n }\n\n this.setAttribute(\"pfe-id\", id);\n }\n\n constructor() {\n super(PfeTabPanel);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.pfeId) {\n this.pfeId = `${PfeTabPanel.tag}-${generateId()}`;\n }\n\n this.setAttribute(\"role\", \"tabpanel\");\n this.setAttribute(\"tabindex\", 0);\n }\n}\n\nPFElement.create(PfeTab);\nPFElement.create(PfeTabPanel);\nPFElement.create(PfeTabs);\n\nexport { PfeTabs as default };\n"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-tabs/pfe-tabs.min.css b/elements/pfe-tabs/pfe-tabs.min.css new file mode 100644 index 0000000000..8e42d269af --- /dev/null +++ b/elements/pfe-tabs/pfe-tabs.min.css @@ -0,0 +1 @@ +:host{display:block}:host .panels{padding:0}.tabs{--pfe-tabs--BorderColor:var(--pfe-theme--color--surface--border, #dfdfdf);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border:0;border-bottom:1px solid var(--pfe-tabs--BorderColor);border-bottom:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-tabs--BorderColor)}@media screen and (min-width:768px){:host([vertical]){display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}:host([vertical]) .tabs{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:22.22%;border:0;border-right:1px solid var(--pfe-tabs--BorderColor);border-right:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-tabs--BorderColor)}:host([vertical]) .panels{padding:0;width:77.78%;padding-right:1rem;padding-right:var(--pfe-theme--container-padding,1rem)}}@media screen and (min-width:768px){:host([vertical][pfe-variant=earth]){padding-top:1rem;padding-top:var(--pfe-theme--container-padding,1rem)}:host([vertical][pfe-variant=earth]) .tabs{padding-left:0;padding-top:1rem;padding-top:var(--pfe-theme--container-padding,1rem)}}:host([pfe-variant=earth]) .tabs{padding-left:1rem;padding-left:var(--pfe-theme--container-padding,1rem)}:host([pfe-variant=earth]) .tabs ::slotted(pfe-tab[aria-selected=false]:not([vertical]):first-of-type){border-left:0}:host([on=dark]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link--on-dark, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff)}:host([on=light]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--focus, #003366)} \ No newline at end of file diff --git a/elements/pfe-tabs/pfe-tabs.min.js b/elements/pfe-tabs/pfe-tabs.min.js new file mode 100644 index 0000000000..0e0b0b8760 --- /dev/null +++ b/elements/pfe-tabs/pfe-tabs.min.js @@ -0,0 +1,26 @@ +import e from"../pfelement/pfelement.min.js"; +/* + * @license + * Copyright 2019 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. + * +*/ +Array.prototype.find||Object.defineProperty(Array.prototype,"find",{value:function(e){if(null==this)throw new TypeError('"this" is null or not defined');var t=Object(this),r=t.length>>>0;if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var a=arguments[1],i=0;i>>0;if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var a=arguments[1],i=0;i:host{display:block}:host .panels{padding:0}.tabs{--pfe-tabs--BorderColor:var(--pfe-theme--color--surface--border, #dfdfdf);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border:0;border-bottom:1px solid var(--pfe-tabs--BorderColor);border-bottom:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-tabs--BorderColor)}@media screen and (min-width:768px){:host([vertical]){display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}:host([vertical]) .tabs{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:22.22%;border:0;border-right:1px solid var(--pfe-tabs--BorderColor);border-right:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-tabs--BorderColor)}:host([vertical]) .panels{padding:0;width:77.78%;padding-right:1rem;padding-right:var(--pfe-theme--container-padding,1rem)}}@media screen and (min-width:768px){:host([vertical][pfe-variant=earth]){padding-top:1rem;padding-top:var(--pfe-theme--container-padding,1rem)}:host([vertical][pfe-variant=earth]) .tabs{padding-left:0;padding-top:1rem;padding-top:var(--pfe-theme--container-padding,1rem)}}:host([pfe-variant=earth]) .tabs{padding-left:1rem;padding-left:var(--pfe-theme--container-padding,1rem)}:host([pfe-variant=earth]) .tabs ::slotted(pfe-tab[aria-selected=false]:not([vertical]):first-of-type){border-left:0}:host([on=dark]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link--on-dark, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff)}:host([on=light]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--focus, #003366)}
    \n \n
    \n
    \n \n
    '}static get tag(){return"pfe-tabs"}get styleUrl(){return"pfe-tabs.scss"}get templateUrl(){return"pfe-tabs.html"}static get observedAttributes(){return["vertical","selected-index","pfe-variant","on"]}get selectedIndex(){return this.getAttribute("selected-index")}set selectedIndex(e){this.setAttribute("selected-index",e)}constructor(){super(a),this._linked=!1,this._onSlotChange=this._onSlotChange.bind(this),this._onClick=this._onClick.bind(this),this._tabSlot=this.shadowRoot.querySelector('slot[name="tab"]'),this._panelSlot=this.shadowRoot.querySelector('slot[name="panel"]'),this._tabSlot.addEventListener("slotchange",this._onSlotChange),this._panelSlot.addEventListener("slotchange",this._onSlotChange)}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this._onKeyDown),this.addEventListener("click",this._onClick),this.hasAttribute("role")||this.setAttribute("role","tablist"),this.hasAttribute("selected-index")||(this.selectedIndex=0),Promise.all([customElements.whenDefined(i.tag),customElements.whenDefined(o.tag)]).then(()=>this._linkPanels())}disconnectedCallback(){this.removeEventListener("keydown",this._onKeyDown),this._allTabs().forEach(e=>e.removeEventListener("click",this._onClick))}attributeChangedCallback(e,t,r){switch(e){case"pfe-variant":"wind"===this.getAttribute("pfe-variant")?(this._allTabs().forEach(e=>e.setAttribute("pfe-variant","wind")),this._allPanels().forEach(e=>e.setAttribute("pfe-variant","wind"))):"earth"===this.getAttribute("pfe-variant")&&(this._allTabs().forEach(e=>e.setAttribute("pfe-variant","earth")),this._allPanels().forEach(e=>e.setAttribute("pfe-variant","earth")));break;case"vertical":this.hasAttribute("vertical")?(this.setAttribute("aria-orientation","vertical"),this._allPanels().forEach(e=>e.setAttribute("vertical","")),this._allTabs().forEach(e=>e.setAttribute("vertical",""))):(this.removeAttribute("aria-orientation"),this._allPanels().forEach(e=>e.removeAttribute("vertical")),this._allTabs().forEach(e=>e.removeAttribute("vertical")));break;case"on":"dark"===this.getAttribute("on")&&(this._allTabs().forEach(e=>e.setAttribute("on","dark")),this._allPanels().forEach(e=>e.setAttribute("on","dark")));break;case"selected-index":Promise.all([customElements.whenDefined(i.tag),customElements.whenDefined(o.tag)]).then(()=>{this._linkPanels(),this.selectIndex(r)})}}select(e){e&&("pfe-tab"===e.tagName.toLowerCase()?this.selectedIndex=this._getTabIndex(e):console.warn(`${a.tag}: the tab must be a pfe-tab element`))}selectIndex(e){if(void 0===e)return;const t=parseInt(e,10),r=this._allTabs()[t];r?this._selectTab(r):console.warn(`${a.tag}: tab ${e} does not exist`)}_onSlotChange(){this._linked=!1,this._linkPanels()}_linkPanels(){if(this._linked)return;this._allTabs().forEach(e=>{const t=e.nextElementSibling;"pfe-tab-panel"===t.tagName.toLowerCase()?(e.setAttribute("aria-controls",t.pfeId),t.setAttribute("aria-labelledby",e.pfeId),e.addEventListener("click",this._onClick)):console.warn(`${a.tag}: tab #${e.pfeId} is not a sibling of a `)}),this._linked=!0}_allPanels(){return[...this.querySelectorAll("pfe-tab-panel")]}_allTabs(){return[...this.querySelectorAll("pfe-tab")]}_panelForTab(e){const t=e.getAttribute("aria-controls");return this.querySelector(`[pfe-id="${t}"]`)}_prevTab(){const e=this._allTabs();let t=e.findIndex(e=>e.selected)-1;return e[(t+e.length)%e.length]}_firstTab(){return this._allTabs()[0]}_lastTab(){const e=this._allTabs();return e[e.length-1]}_nextTab(){const e=this._allTabs();let t=e.findIndex(e=>e.selected)+1;return e[t%e.length]}_getTabIndex(e){return this._allTabs().findIndex(t=>t.pfeId===e.pfeId)}reset(){const e=this._allTabs(),t=this._allPanels();e.forEach(e=>e.selected=!1),t.forEach(e=>e.hidden=!0)}_selectTab(e){this.reset();const t=this._panelForTab(e);let r=!1;if(!t)throw new Error(`No panel with pfeId ${t.pfeId}`);this.selected&&this.selected!==e&&(r=!0,this.dispatchEvent(new CustomEvent(`${a.tag}:hidden-tab`,{bubbles:!0,detail:{tab:this.selected}}))),e.selected=!0,t.hidden=!1,this._setFocus&&(e.focus(),this._setFocus=!1);this._allTabs().findIndex(e=>e.selected);this.selected=e,r&&this.dispatchEvent(new CustomEvent(`${a.tag}:shown-tab`,{bubbles:!0,detail:{tab:this.selected}}))}_onKeyDown(e){if("tab"!==e.target.getAttribute("role"))return;if(e.altKey)return;let r;switch(e.keyCode){case t.LEFT:case t.UP:r=this._prevTab();break;case t.RIGHT:case t.DOWN:r=this._nextTab();break;case t.HOME:r=this._firstTab();break;case t.END:r=this._lastTab();break;default:return}e.preventDefault(),this.selectedIndex=this._getTabIndex(r),this._setFocus=!0}_onClick(e){"tab"===e.currentTarget.getAttribute("role")&&(this.selectedIndex=this._getTabIndex(e.currentTarget))}}class i extends e{get html(){return""}static get tag(){return"pfe-tab"}get styleUrl(){return"pfe-tab.scss"}get templateUrl(){return"pfe-tab.html"}static get observedAttributes(){return["aria-selected"]}constructor(){super(i)}get pfeId(){return this.getAttribute("pfe-id")}set pfeId(e){e&&this.setAttribute("pfe-id",e)}connectedCallback(){super.connectedCallback(),this.pfeId||(this.pfeId=`${i.tag}-${r()}`),this.setAttribute("role","tab"),this.setAttribute("aria-selected","false"),this.setAttribute("tabindex",-1),this.parentNode.hasAttribute("vertical")&&this.setAttribute("vertical","")}attributeChangedCallback(){const e=Boolean(this.selected);this.setAttribute("tabindex",e?0:-1)}set selected(e){e=Boolean(e),this.setAttribute("aria-selected",e)}get selected(){return"true"===this.getAttribute("aria-selected")}}class o extends e{get html(){return'
    \n
    \n \n
    \n
    '}static get tag(){return"pfe-tab-panel"}get styleUrl(){return"pfe-tab-panel.scss"}get templateUrl(){return"pfe-tab-panel.html"}get pfeId(){return this.getAttribute("pfe-id")}set pfeId(e){e&&this.setAttribute("pfe-id",e)}constructor(){super(o)}connectedCallback(){super.connectedCallback(),this.pfeId||(this.pfeId=`${o.tag}-${r()}`),this.setAttribute("role","tabpanel"),this.setAttribute("tabindex",0)}}e.create(i),e.create(o),e.create(a);export default a; +//# sourceMappingURL=pfe-tabs.min.js.map diff --git a/elements/pfe-tabs/pfe-tabs.min.js.map b/elements/pfe-tabs/pfe-tabs.min.js.map new file mode 100644 index 0000000000..236246fc02 --- /dev/null +++ b/elements/pfe-tabs/pfe-tabs.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-tabs.min.js","sources":["pfe-tabs.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 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// https://tc39.github.io/ecma262/#sec-array.prototype.find\nif (!Array.prototype.find) {\n Object.defineProperty(Array.prototype, \"find\", {\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 kValue.\n var kValue = o[k];\n if (predicate.call(thisArg, kValue, k, o)) {\n return kValue;\n }\n // e. Increase k by 1.\n k++;\n }\n\n // 7. Return undefined.\n return undefined;\n },\n configurable: true,\n writable: true\n });\n}\n\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 configurable: true,\n writable: true\n });\n}\n\nconst KEYCODE = {\n DOWN: 40,\n LEFT: 37,\n RIGHT: 39,\n UP: 38,\n HOME: 36,\n END: 35\n};\n\nfunction generateId() {\n return Math.random()\n .toString(36)\n .substr(2, 9);\n}\n\nclass PfeTabs extends PFElement {\n\n get html() {\n return `
    \n \n
    \n
    \n \n
    `;\n }\n static get tag() {\n return \"pfe-tabs\";\n }\n\n get styleUrl() {\n return \"pfe-tabs.scss\";\n }\n\n get templateUrl() {\n return \"pfe-tabs.html\";\n }\n\n static get observedAttributes() {\n return [\"vertical\", \"selected-index\", \"pfe-variant\", \"on\"];\n }\n\n get selectedIndex() {\n return this.getAttribute(\"selected-index\");\n }\n\n set selectedIndex(value) {\n this.setAttribute(\"selected-index\", value);\n }\n\n constructor() {\n super(PfeTabs);\n\n this._linked = false;\n\n this._onSlotChange = this._onSlotChange.bind(this);\n this._onClick = this._onClick.bind(this);\n\n this._tabSlot = this.shadowRoot.querySelector('slot[name=\"tab\"]');\n this._panelSlot = this.shadowRoot.querySelector('slot[name=\"panel\"]');\n\n this._tabSlot.addEventListener(\"slotchange\", this._onSlotChange);\n this._panelSlot.addEventListener(\"slotchange\", this._onSlotChange);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener(\"keydown\", this._onKeyDown);\n this.addEventListener(\"click\", this._onClick);\n\n if (!this.hasAttribute(\"role\")) {\n this.setAttribute(\"role\", \"tablist\");\n }\n\n if (!this.hasAttribute(\"selected-index\")) {\n this.selectedIndex = 0;\n }\n\n Promise.all([\n customElements.whenDefined(PfeTab.tag),\n customElements.whenDefined(PfeTabPanel.tag)\n ]).then(() => this._linkPanels());\n }\n\n disconnectedCallback() {\n this.removeEventListener(\"keydown\", this._onKeyDown);\n this._allTabs().forEach(tab => tab.removeEventListener(\"click\", this._onClick));\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n switch (attr) {\n case \"pfe-variant\":\n if (this.getAttribute(\"pfe-variant\") === \"wind\") {\n this._allTabs().forEach(tab =>\n tab.setAttribute(\"pfe-variant\", \"wind\")\n );\n this._allPanels().forEach(panel =>\n panel.setAttribute(\"pfe-variant\", \"wind\")\n );\n } else if (this.getAttribute(\"pfe-variant\") === \"earth\") {\n this._allTabs().forEach(tab =>\n tab.setAttribute(\"pfe-variant\", \"earth\")\n );\n this._allPanels().forEach(panel =>\n panel.setAttribute(\"pfe-variant\", \"earth\")\n );\n }\n break;\n\n case \"vertical\":\n if (this.hasAttribute(\"vertical\")) {\n this.setAttribute(\"aria-orientation\", \"vertical\");\n this._allPanels().forEach(panel =>\n panel.setAttribute(\"vertical\", \"\")\n );\n this._allTabs().forEach(tab => tab.setAttribute(\"vertical\", \"\"));\n } else {\n this.removeAttribute(\"aria-orientation\");\n this._allPanels().forEach(panel => panel.removeAttribute(\"vertical\"));\n this._allTabs().forEach(tab => tab.removeAttribute(\"vertical\"));\n }\n break;\n\n case \"on\":\n if (this.getAttribute(\"on\") === \"dark\") {\n this._allTabs().forEach(tab =>\n tab.setAttribute(\"on\", \"dark\")\n );\n this._allPanels().forEach(panel =>\n panel.setAttribute(\"on\", \"dark\")\n );\n }\n break;\n\n case \"selected-index\":\n Promise.all([\n customElements.whenDefined(PfeTab.tag),\n customElements.whenDefined(PfeTabPanel.tag)\n ]).then(() => {\n this._linkPanels();\n this.selectIndex(newValue);\n });\n }\n }\n\n select(newTab) {\n if (!newTab) {\n return;\n }\n\n if (newTab.tagName.toLowerCase() !== \"pfe-tab\") {\n console.warn(`${PfeTabs.tag}: the tab must be a pfe-tab element`);\n return;\n }\n\n this.selectedIndex = this._getTabIndex(newTab);\n }\n\n selectIndex(_index) {\n if (_index === undefined) {\n return;\n }\n\n const index = parseInt(_index, 10);\n const tabs = this._allTabs();\n const tab = tabs[index];\n\n if (!tab) {\n console.warn(`${PfeTabs.tag}: tab ${_index} does not exist`);\n return;\n }\n\n this._selectTab(tab);\n }\n\n _onSlotChange() {\n this._linked = false;\n this._linkPanels();\n }\n\n _linkPanels() {\n if (this._linked) {\n return;\n }\n\n const tabs = this._allTabs();\n\n tabs.forEach(tab => {\n const panel = tab.nextElementSibling;\n if (panel.tagName.toLowerCase() !== \"pfe-tab-panel\") {\n console.warn(\n `${PfeTabs.tag}: tab #${tab.pfeId} is not a sibling of a `\n );\n return;\n }\n\n tab.setAttribute(\"aria-controls\", panel.pfeId);\n panel.setAttribute(\"aria-labelledby\", tab.pfeId);\n\n tab.addEventListener(\"click\", this._onClick);\n });\n\n this._linked = true;\n }\n\n _allPanels() {\n return [...this.querySelectorAll(\"pfe-tab-panel\")];\n }\n\n _allTabs() {\n return [...this.querySelectorAll(\"pfe-tab\")];\n }\n\n _panelForTab(tab) {\n const panelId = tab.getAttribute(\"aria-controls\");\n return this.querySelector(`[pfe-id=\"${panelId}\"]`);\n }\n\n _prevTab() {\n const tabs = this._allTabs();\n let newIdx = tabs.findIndex(tab => tab.selected) - 1;\n return tabs[(newIdx + tabs.length) % tabs.length];\n }\n\n _firstTab() {\n const tabs = this._allTabs();\n return tabs[0];\n }\n\n _lastTab() {\n const tabs = this._allTabs();\n return tabs[tabs.length - 1];\n }\n\n _nextTab() {\n const tabs = this._allTabs();\n let newIdx = tabs.findIndex(tab => tab.selected) + 1;\n return tabs[newIdx % tabs.length];\n }\n\n _getTabIndex(_tab) {\n const tabs = this._allTabs();\n const index = tabs.findIndex(tab => tab.pfeId === _tab.pfeId);\n return index;\n }\n\n reset() {\n const tabs = this._allTabs();\n const panels = this._allPanels();\n\n tabs.forEach(tab => (tab.selected = false));\n panels.forEach(panel => (panel.hidden = true));\n }\n\n _selectTab(newTab) {\n this.reset();\n\n const newPanel = this._panelForTab(newTab);\n let newTabSelected = false;\n\n if (!newPanel) {\n throw new Error(`No panel with pfeId ${newPanel.pfeId}`);\n }\n\n if (this.selected && this.selected !== newTab) {\n newTabSelected = true;\n\n this.dispatchEvent(\n new CustomEvent(`${PfeTabs.tag}:hidden-tab`, {\n bubbles: true,\n detail: {\n tab: this.selected\n }\n })\n );\n }\n\n newTab.selected = true;\n newPanel.hidden = false;\n\n if (this._setFocus) {\n newTab.focus();\n this._setFocus = false;\n }\n\n const tabs = this._allTabs();\n const newIdx = tabs.findIndex(tab => tab.selected);\n\n this.selected = newTab;\n\n if (newTabSelected) {\n this.dispatchEvent(\n new CustomEvent(`${PfeTabs.tag}:shown-tab`, {\n bubbles: true,\n detail: {\n tab: this.selected\n }\n })\n );\n }\n }\n\n _onKeyDown(event) {\n if (event.target.getAttribute(\"role\") !== \"tab\") {\n return;\n }\n\n if (event.altKey) {\n return;\n }\n\n let newTab;\n\n switch (event.keyCode) {\n case KEYCODE.LEFT:\n case KEYCODE.UP:\n newTab = this._prevTab();\n break;\n\n case KEYCODE.RIGHT:\n case KEYCODE.DOWN:\n newTab = this._nextTab();\n break;\n\n case KEYCODE.HOME:\n newTab = this._firstTab();\n break;\n\n case KEYCODE.END:\n newTab = this._lastTab();\n break;\n\n default:\n return;\n }\n\n event.preventDefault();\n\n this.selectedIndex = this._getTabIndex(newTab);\n this._setFocus = true;\n }\n\n _onClick(event) {\n if (event.currentTarget.getAttribute(\"role\") !== \"tab\") {\n return;\n }\n\n this.selectedIndex = this._getTabIndex(event.currentTarget);\n }\n}\n\nclass PfeTab extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-tab\";\n }\n\n get styleUrl() {\n return \"pfe-tab.scss\";\n }\n\n get templateUrl() {\n return \"pfe-tab.html\";\n }\n\n static get observedAttributes() {\n return [\"aria-selected\"];\n }\n\n constructor() {\n super(PfeTab);\n }\n\n get pfeId() {\n return this.getAttribute(\"pfe-id\");\n }\n\n set pfeId(id) {\n if (!id) {\n return;\n }\n\n this.setAttribute(\"pfe-id\", id);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.pfeId) {\n this.pfeId = `${PfeTab.tag}-${generateId()}`;\n }\n\n this.setAttribute(\"role\", \"tab\");\n this.setAttribute(\"aria-selected\", \"false\");\n this.setAttribute(\"tabindex\", -1);\n\n if (this.parentNode.hasAttribute(\"vertical\")) {\n this.setAttribute(\"vertical\", \"\");\n }\n }\n\n attributeChangedCallback() {\n const value = Boolean(this.selected);\n this.setAttribute(\"tabindex\", value ? 0 : -1);\n }\n\n set selected(value) {\n value = Boolean(value);\n this.setAttribute(\"aria-selected\", value);\n }\n\n get selected() {\n return this.getAttribute(\"aria-selected\") === \"true\" ? true : false;\n }\n}\n\nclass PfeTabPanel extends PFElement {\n\n get html() {\n return `
    \n
    \n \n
    \n
    `;\n }\n static get tag() {\n return \"pfe-tab-panel\";\n }\n\n get styleUrl() {\n return \"pfe-tab-panel.scss\";\n }\n\n get templateUrl() {\n return \"pfe-tab-panel.html\";\n }\n\n get pfeId() {\n return this.getAttribute(\"pfe-id\");\n }\n\n set pfeId(id) {\n if (!id) {\n return;\n }\n\n this.setAttribute(\"pfe-id\", id);\n }\n\n constructor() {\n super(PfeTabPanel);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.pfeId) {\n this.pfeId = `${PfeTabPanel.tag}-${generateId()}`;\n }\n\n this.setAttribute(\"role\", \"tabpanel\");\n this.setAttribute(\"tabindex\", 0);\n }\n}\n\nPFElement.create(PfeTab);\nPFElement.create(PfeTabPanel);\nPFElement.create(PfeTabs);\n\nexport default PfeTabs;\n//# sourceMappingURL=pfe-tabs.js.map\n"],"names":["Array","prototype","find","Object","defineProperty","value","predicate","this","TypeError","o","len","length","thisArg","arguments","k","kValue","call","configurable","writable","findIndex","KEYCODE","DOWN","LEFT","RIGHT","UP","HOME","END","generateId","Math","random","toString","substr","PfeTabs","PFElement","html","tag","styleUrl","templateUrl","observedAttributes","selectedIndex","getAttribute","setAttribute","[object Object]","super","_linked","_onSlotChange","bind","_onClick","_tabSlot","shadowRoot","querySelector","_panelSlot","addEventListener","connectedCallback","_onKeyDown","hasAttribute","Promise","all","customElements","whenDefined","PfeTab","PfeTabPanel","then","_linkPanels","removeEventListener","_allTabs","forEach","tab","attr","oldValue","newValue","_allPanels","panel","removeAttribute","selectIndex","newTab","tagName","toLowerCase","_getTabIndex","console","warn","_index","undefined","index","parseInt","_selectTab","nextElementSibling","pfeId","querySelectorAll","panelId","tabs","newIdx","selected","_tab","panels","hidden","reset","newPanel","_panelForTab","newTabSelected","Error","dispatchEvent","CustomEvent","bubbles","detail","_setFocus","focus","event","target","altKey","keyCode","_prevTab","_nextTab","_firstTab","_lastTab","preventDefault","currentTarget","id","parentNode","Boolean","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-tabs/pfe-tabs.umd.js b/elements/pfe-tabs/pfe-tabs.umd.js new file mode 100644 index 0000000000..9f944eb0f9 --- /dev/null +++ b/elements/pfe-tabs/pfe-tabs.umd.js @@ -0,0 +1,751 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('../pfelement/pfelement.umd')) : + typeof define === 'function' && define.amd ? define(['../pfelement/pfelement.umd'], factory) : + (global.PfeTabs = factory(global.PFElement)); +}(this, (function (PFElement) { 'use strict'; + + PFElement = PFElement && PFElement.hasOwnProperty('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; + }; + + 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); + } + }; + + /* + * @license + * Copyright 2019 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. + * + */ + + // https://tc39.github.io/ecma262/#sec-array.prototype.find + if (!Array.prototype.find) { + Object.defineProperty(Array.prototype, "find", { + 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 kValue. + var kValue = o[k]; + if (predicate.call(thisArg, kValue, k, o)) { + return kValue; + } + // e. Increase k by 1. + k++; + } + + // 7. Return undefined. + return undefined; + }, + configurable: true, + writable: true + }); + } + + // 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; + }, + configurable: true, + writable: true + }); + } + + var KEYCODE = { + DOWN: 40, + LEFT: 37, + RIGHT: 39, + UP: 38, + HOME: 36, + END: 35 + }; + + function generateId() { + return Math.random().toString(36).substr(2, 9); + } + + var PfeTabs = function (_PFElement) { + inherits(PfeTabs, _PFElement); + createClass(PfeTabs, [{ + key: 'html', + get: function get$$1() { + return '
    \n \n
    \n
    \n \n
    '; + } + }, { + key: 'styleUrl', + get: function get$$1() { + return "pfe-tabs.scss"; + } + }, { + key: 'templateUrl', + get: function get$$1() { + return "pfe-tabs.html"; + } + }, { + key: 'selectedIndex', + get: function get$$1() { + return this.getAttribute("selected-index"); + }, + set: function set$$1(value) { + this.setAttribute("selected-index", value); + } + }], [{ + key: 'tag', + get: function get$$1() { + return "pfe-tabs"; + } + }, { + key: 'observedAttributes', + get: function get$$1() { + return ["vertical", "selected-index", "pfe-variant", "on"]; + } + }]); + + function PfeTabs() { + classCallCheck(this, PfeTabs); + + var _this = possibleConstructorReturn(this, (PfeTabs.__proto__ || Object.getPrototypeOf(PfeTabs)).call(this, PfeTabs)); + + _this._linked = false; + + _this._onSlotChange = _this._onSlotChange.bind(_this); + _this._onClick = _this._onClick.bind(_this); + + _this._tabSlot = _this.shadowRoot.querySelector('slot[name="tab"]'); + _this._panelSlot = _this.shadowRoot.querySelector('slot[name="panel"]'); + + _this._tabSlot.addEventListener("slotchange", _this._onSlotChange); + _this._panelSlot.addEventListener("slotchange", _this._onSlotChange); + return _this; + } + + createClass(PfeTabs, [{ + key: 'connectedCallback', + value: function connectedCallback() { + var _this2 = this; + + get(PfeTabs.prototype.__proto__ || Object.getPrototypeOf(PfeTabs.prototype), 'connectedCallback', this).call(this); + + this.addEventListener("keydown", this._onKeyDown); + this.addEventListener("click", this._onClick); + + if (!this.hasAttribute("role")) { + this.setAttribute("role", "tablist"); + } + + if (!this.hasAttribute("selected-index")) { + this.selectedIndex = 0; + } + + Promise.all([customElements.whenDefined(PfeTab.tag), customElements.whenDefined(PfeTabPanel.tag)]).then(function () { + return _this2._linkPanels(); + }); + } + }, { + key: 'disconnectedCallback', + value: function disconnectedCallback() { + var _this3 = this; + + this.removeEventListener("keydown", this._onKeyDown); + this._allTabs().forEach(function (tab) { + return tab.removeEventListener("click", _this3._onClick); + }); + } + }, { + key: 'attributeChangedCallback', + value: function attributeChangedCallback(attr, oldValue, newValue) { + var _this4 = this; + + switch (attr) { + case "pfe-variant": + if (this.getAttribute("pfe-variant") === "wind") { + this._allTabs().forEach(function (tab) { + return tab.setAttribute("pfe-variant", "wind"); + }); + this._allPanels().forEach(function (panel) { + return panel.setAttribute("pfe-variant", "wind"); + }); + } else if (this.getAttribute("pfe-variant") === "earth") { + this._allTabs().forEach(function (tab) { + return tab.setAttribute("pfe-variant", "earth"); + }); + this._allPanels().forEach(function (panel) { + return panel.setAttribute("pfe-variant", "earth"); + }); + } + break; + + case "vertical": + if (this.hasAttribute("vertical")) { + this.setAttribute("aria-orientation", "vertical"); + this._allPanels().forEach(function (panel) { + return panel.setAttribute("vertical", ""); + }); + this._allTabs().forEach(function (tab) { + return tab.setAttribute("vertical", ""); + }); + } else { + this.removeAttribute("aria-orientation"); + this._allPanels().forEach(function (panel) { + return panel.removeAttribute("vertical"); + }); + this._allTabs().forEach(function (tab) { + return tab.removeAttribute("vertical"); + }); + } + break; + + case "on": + if (this.getAttribute("on") === "dark") { + this._allTabs().forEach(function (tab) { + return tab.setAttribute("on", "dark"); + }); + this._allPanels().forEach(function (panel) { + return panel.setAttribute("on", "dark"); + }); + } + break; + + case "selected-index": + Promise.all([customElements.whenDefined(PfeTab.tag), customElements.whenDefined(PfeTabPanel.tag)]).then(function () { + _this4._linkPanels(); + _this4.selectIndex(newValue); + }); + } + } + }, { + key: 'select', + value: function select(newTab) { + if (!newTab) { + return; + } + + if (newTab.tagName.toLowerCase() !== "pfe-tab") { + console.warn(PfeTabs.tag + ': the tab must be a pfe-tab element'); + return; + } + + this.selectedIndex = this._getTabIndex(newTab); + } + }, { + key: 'selectIndex', + value: function selectIndex(_index) { + if (_index === undefined) { + return; + } + + var index = parseInt(_index, 10); + var tabs = this._allTabs(); + var tab = tabs[index]; + + if (!tab) { + console.warn(PfeTabs.tag + ': tab ' + _index + ' does not exist'); + return; + } + + this._selectTab(tab); + } + }, { + key: '_onSlotChange', + value: function _onSlotChange() { + this._linked = false; + this._linkPanels(); + } + }, { + key: '_linkPanels', + value: function _linkPanels() { + var _this5 = this; + + if (this._linked) { + return; + } + + var tabs = this._allTabs(); + + tabs.forEach(function (tab) { + var panel = tab.nextElementSibling; + if (panel.tagName.toLowerCase() !== "pfe-tab-panel") { + console.warn(PfeTabs.tag + ': tab #' + tab.pfeId + ' is not a sibling of a '); + return; + } + + tab.setAttribute("aria-controls", panel.pfeId); + panel.setAttribute("aria-labelledby", tab.pfeId); + + tab.addEventListener("click", _this5._onClick); + }); + + this._linked = true; + } + }, { + key: '_allPanels', + value: function _allPanels() { + return [].concat(toConsumableArray(this.querySelectorAll("pfe-tab-panel"))); + } + }, { + key: '_allTabs', + value: function _allTabs() { + return [].concat(toConsumableArray(this.querySelectorAll("pfe-tab"))); + } + }, { + key: '_panelForTab', + value: function _panelForTab(tab) { + var panelId = tab.getAttribute("aria-controls"); + return this.querySelector('[pfe-id="' + panelId + '"]'); + } + }, { + key: '_prevTab', + value: function _prevTab() { + var tabs = this._allTabs(); + var newIdx = tabs.findIndex(function (tab) { + return tab.selected; + }) - 1; + return tabs[(newIdx + tabs.length) % tabs.length]; + } + }, { + key: '_firstTab', + value: function _firstTab() { + var tabs = this._allTabs(); + return tabs[0]; + } + }, { + key: '_lastTab', + value: function _lastTab() { + var tabs = this._allTabs(); + return tabs[tabs.length - 1]; + } + }, { + key: '_nextTab', + value: function _nextTab() { + var tabs = this._allTabs(); + var newIdx = tabs.findIndex(function (tab) { + return tab.selected; + }) + 1; + return tabs[newIdx % tabs.length]; + } + }, { + key: '_getTabIndex', + value: function _getTabIndex(_tab) { + var tabs = this._allTabs(); + var index = tabs.findIndex(function (tab) { + return tab.pfeId === _tab.pfeId; + }); + return index; + } + }, { + key: 'reset', + value: function reset() { + var tabs = this._allTabs(); + var panels = this._allPanels(); + + tabs.forEach(function (tab) { + return tab.selected = false; + }); + panels.forEach(function (panel) { + return panel.hidden = true; + }); + } + }, { + key: '_selectTab', + value: function _selectTab(newTab) { + this.reset(); + + var newPanel = this._panelForTab(newTab); + var newTabSelected = false; + + if (!newPanel) { + throw new Error('No panel with pfeId ' + newPanel.pfeId); + } + + if (this.selected && this.selected !== newTab) { + newTabSelected = true; + + this.dispatchEvent(new CustomEvent(PfeTabs.tag + ':hidden-tab', { + bubbles: true, + detail: { + tab: this.selected + } + })); + } + + newTab.selected = true; + newPanel.hidden = false; + + if (this._setFocus) { + newTab.focus(); + this._setFocus = false; + } + + var tabs = this._allTabs(); + var newIdx = tabs.findIndex(function (tab) { + return tab.selected; + }); + + this.selected = newTab; + + if (newTabSelected) { + this.dispatchEvent(new CustomEvent(PfeTabs.tag + ':shown-tab', { + bubbles: true, + detail: { + tab: this.selected + } + })); + } + } + }, { + key: '_onKeyDown', + value: function _onKeyDown(event) { + if (event.target.getAttribute("role") !== "tab") { + return; + } + + if (event.altKey) { + return; + } + + var newTab = void 0; + + switch (event.keyCode) { + case KEYCODE.LEFT: + case KEYCODE.UP: + newTab = this._prevTab(); + break; + + case KEYCODE.RIGHT: + case KEYCODE.DOWN: + newTab = this._nextTab(); + break; + + case KEYCODE.HOME: + newTab = this._firstTab(); + break; + + case KEYCODE.END: + newTab = this._lastTab(); + break; + + default: + return; + } + + event.preventDefault(); + + this.selectedIndex = this._getTabIndex(newTab); + this._setFocus = true; + } + }, { + key: '_onClick', + value: function _onClick(event) { + if (event.currentTarget.getAttribute("role") !== "tab") { + return; + } + + this.selectedIndex = this._getTabIndex(event.currentTarget); + } + }]); + return PfeTabs; + }(PFElement); + + var PfeTab = function (_PFElement2) { + inherits(PfeTab, _PFElement2); + createClass(PfeTab, [{ + key: 'html', + get: function get$$1() { + return ''; + } + }, { + key: 'styleUrl', + get: function get$$1() { + return "pfe-tab.scss"; + } + }, { + key: 'templateUrl', + get: function get$$1() { + return "pfe-tab.html"; + } + }], [{ + key: 'tag', + get: function get$$1() { + return "pfe-tab"; + } + }, { + key: 'observedAttributes', + get: function get$$1() { + return ["aria-selected"]; + } + }]); + + function PfeTab() { + classCallCheck(this, PfeTab); + return possibleConstructorReturn(this, (PfeTab.__proto__ || Object.getPrototypeOf(PfeTab)).call(this, PfeTab)); + } + + createClass(PfeTab, [{ + key: 'connectedCallback', + value: function connectedCallback() { + get(PfeTab.prototype.__proto__ || Object.getPrototypeOf(PfeTab.prototype), 'connectedCallback', this).call(this); + + if (!this.pfeId) { + this.pfeId = PfeTab.tag + '-' + generateId(); + } + + this.setAttribute("role", "tab"); + this.setAttribute("aria-selected", "false"); + this.setAttribute("tabindex", -1); + + if (this.parentNode.hasAttribute("vertical")) { + this.setAttribute("vertical", ""); + } + } + }, { + key: 'attributeChangedCallback', + value: function attributeChangedCallback() { + var value = Boolean(this.selected); + this.setAttribute("tabindex", value ? 0 : -1); + } + }, { + key: 'pfeId', + get: function get$$1() { + return this.getAttribute("pfe-id"); + }, + set: function set$$1(id) { + if (!id) { + return; + } + + this.setAttribute("pfe-id", id); + } + }, { + key: 'selected', + set: function set$$1(value) { + value = Boolean(value); + this.setAttribute("aria-selected", value); + }, + get: function get$$1() { + return this.getAttribute("aria-selected") === "true" ? true : false; + } + }]); + return PfeTab; + }(PFElement); + + var PfeTabPanel = function (_PFElement3) { + inherits(PfeTabPanel, _PFElement3); + createClass(PfeTabPanel, [{ + key: 'html', + get: function get$$1() { + return '
    \n
    \n \n
    \n
    '; + } + }, { + key: 'styleUrl', + get: function get$$1() { + return "pfe-tab-panel.scss"; + } + }, { + key: 'templateUrl', + get: function get$$1() { + return "pfe-tab-panel.html"; + } + }, { + key: 'pfeId', + get: function get$$1() { + return this.getAttribute("pfe-id"); + }, + set: function set$$1(id) { + if (!id) { + return; + } + + this.setAttribute("pfe-id", id); + } + }], [{ + key: 'tag', + get: function get$$1() { + return "pfe-tab-panel"; + } + }]); + + function PfeTabPanel() { + classCallCheck(this, PfeTabPanel); + return possibleConstructorReturn(this, (PfeTabPanel.__proto__ || Object.getPrototypeOf(PfeTabPanel)).call(this, PfeTabPanel)); + } + + createClass(PfeTabPanel, [{ + key: 'connectedCallback', + value: function connectedCallback() { + get(PfeTabPanel.prototype.__proto__ || Object.getPrototypeOf(PfeTabPanel.prototype), 'connectedCallback', this).call(this); + + if (!this.pfeId) { + this.pfeId = PfeTabPanel.tag + '-' + generateId(); + } + + this.setAttribute("role", "tabpanel"); + this.setAttribute("tabindex", 0); + } + }]); + return PfeTabPanel; + }(PFElement); + + PFElement.create(PfeTab); + PFElement.create(PfeTabPanel); + PFElement.create(PfeTabs); + + return PfeTabs; + +}))); +//# sourceMappingURL=pfe-tabs.umd.js.map diff --git a/elements/pfe-tabs/pfe-tabs.umd.js.map b/elements/pfe-tabs/pfe-tabs.umd.js.map new file mode 100644 index 0000000000..1d1caeafc8 --- /dev/null +++ b/elements/pfe-tabs/pfe-tabs.umd.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-tabs.umd.js","sources":["pfe-tabs.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 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// https://tc39.github.io/ecma262/#sec-array.prototype.find\nif (!Array.prototype.find) {\n Object.defineProperty(Array.prototype, \"find\", {\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 kValue.\n var kValue = o[k];\n if (predicate.call(thisArg, kValue, k, o)) {\n return kValue;\n }\n // e. Increase k by 1.\n k++;\n }\n\n // 7. Return undefined.\n return undefined;\n },\n configurable: true,\n writable: true\n });\n}\n\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 configurable: true,\n writable: true\n });\n}\n\nconst KEYCODE = {\n DOWN: 40,\n LEFT: 37,\n RIGHT: 39,\n UP: 38,\n HOME: 36,\n END: 35\n};\n\nfunction generateId() {\n return Math.random()\n .toString(36)\n .substr(2, 9);\n}\n\nclass PfeTabs extends PFElement {\n\n get html() {\n return `
    \n \n
    \n
    \n \n
    `;\n }\n static get tag() {\n return \"pfe-tabs\";\n }\n\n get styleUrl() {\n return \"pfe-tabs.scss\";\n }\n\n get templateUrl() {\n return \"pfe-tabs.html\";\n }\n\n static get observedAttributes() {\n return [\"vertical\", \"selected-index\", \"pfe-variant\", \"on\"];\n }\n\n get selectedIndex() {\n return this.getAttribute(\"selected-index\");\n }\n\n set selectedIndex(value) {\n this.setAttribute(\"selected-index\", value);\n }\n\n constructor() {\n super(PfeTabs);\n\n this._linked = false;\n\n this._onSlotChange = this._onSlotChange.bind(this);\n this._onClick = this._onClick.bind(this);\n\n this._tabSlot = this.shadowRoot.querySelector('slot[name=\"tab\"]');\n this._panelSlot = this.shadowRoot.querySelector('slot[name=\"panel\"]');\n\n this._tabSlot.addEventListener(\"slotchange\", this._onSlotChange);\n this._panelSlot.addEventListener(\"slotchange\", this._onSlotChange);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener(\"keydown\", this._onKeyDown);\n this.addEventListener(\"click\", this._onClick);\n\n if (!this.hasAttribute(\"role\")) {\n this.setAttribute(\"role\", \"tablist\");\n }\n\n if (!this.hasAttribute(\"selected-index\")) {\n this.selectedIndex = 0;\n }\n\n Promise.all([\n customElements.whenDefined(PfeTab.tag),\n customElements.whenDefined(PfeTabPanel.tag)\n ]).then(() => this._linkPanels());\n }\n\n disconnectedCallback() {\n this.removeEventListener(\"keydown\", this._onKeyDown);\n this._allTabs().forEach(tab => tab.removeEventListener(\"click\", this._onClick));\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n switch (attr) {\n case \"pfe-variant\":\n if (this.getAttribute(\"pfe-variant\") === \"wind\") {\n this._allTabs().forEach(tab =>\n tab.setAttribute(\"pfe-variant\", \"wind\")\n );\n this._allPanels().forEach(panel =>\n panel.setAttribute(\"pfe-variant\", \"wind\")\n );\n } else if (this.getAttribute(\"pfe-variant\") === \"earth\") {\n this._allTabs().forEach(tab =>\n tab.setAttribute(\"pfe-variant\", \"earth\")\n );\n this._allPanels().forEach(panel =>\n panel.setAttribute(\"pfe-variant\", \"earth\")\n );\n }\n break;\n\n case \"vertical\":\n if (this.hasAttribute(\"vertical\")) {\n this.setAttribute(\"aria-orientation\", \"vertical\");\n this._allPanels().forEach(panel =>\n panel.setAttribute(\"vertical\", \"\")\n );\n this._allTabs().forEach(tab => tab.setAttribute(\"vertical\", \"\"));\n } else {\n this.removeAttribute(\"aria-orientation\");\n this._allPanels().forEach(panel => panel.removeAttribute(\"vertical\"));\n this._allTabs().forEach(tab => tab.removeAttribute(\"vertical\"));\n }\n break;\n\n case \"on\":\n if (this.getAttribute(\"on\") === \"dark\") {\n this._allTabs().forEach(tab =>\n tab.setAttribute(\"on\", \"dark\")\n );\n this._allPanels().forEach(panel =>\n panel.setAttribute(\"on\", \"dark\")\n );\n }\n break;\n\n case \"selected-index\":\n Promise.all([\n customElements.whenDefined(PfeTab.tag),\n customElements.whenDefined(PfeTabPanel.tag)\n ]).then(() => {\n this._linkPanels();\n this.selectIndex(newValue);\n });\n }\n }\n\n select(newTab) {\n if (!newTab) {\n return;\n }\n\n if (newTab.tagName.toLowerCase() !== \"pfe-tab\") {\n console.warn(`${PfeTabs.tag}: the tab must be a pfe-tab element`);\n return;\n }\n\n this.selectedIndex = this._getTabIndex(newTab);\n }\n\n selectIndex(_index) {\n if (_index === undefined) {\n return;\n }\n\n const index = parseInt(_index, 10);\n const tabs = this._allTabs();\n const tab = tabs[index];\n\n if (!tab) {\n console.warn(`${PfeTabs.tag}: tab ${_index} does not exist`);\n return;\n }\n\n this._selectTab(tab);\n }\n\n _onSlotChange() {\n this._linked = false;\n this._linkPanels();\n }\n\n _linkPanels() {\n if (this._linked) {\n return;\n }\n\n const tabs = this._allTabs();\n\n tabs.forEach(tab => {\n const panel = tab.nextElementSibling;\n if (panel.tagName.toLowerCase() !== \"pfe-tab-panel\") {\n console.warn(\n `${PfeTabs.tag}: tab #${tab.pfeId} is not a sibling of a `\n );\n return;\n }\n\n tab.setAttribute(\"aria-controls\", panel.pfeId);\n panel.setAttribute(\"aria-labelledby\", tab.pfeId);\n\n tab.addEventListener(\"click\", this._onClick);\n });\n\n this._linked = true;\n }\n\n _allPanels() {\n return [...this.querySelectorAll(\"pfe-tab-panel\")];\n }\n\n _allTabs() {\n return [...this.querySelectorAll(\"pfe-tab\")];\n }\n\n _panelForTab(tab) {\n const panelId = tab.getAttribute(\"aria-controls\");\n return this.querySelector(`[pfe-id=\"${panelId}\"]`);\n }\n\n _prevTab() {\n const tabs = this._allTabs();\n let newIdx = tabs.findIndex(tab => tab.selected) - 1;\n return tabs[(newIdx + tabs.length) % tabs.length];\n }\n\n _firstTab() {\n const tabs = this._allTabs();\n return tabs[0];\n }\n\n _lastTab() {\n const tabs = this._allTabs();\n return tabs[tabs.length - 1];\n }\n\n _nextTab() {\n const tabs = this._allTabs();\n let newIdx = tabs.findIndex(tab => tab.selected) + 1;\n return tabs[newIdx % tabs.length];\n }\n\n _getTabIndex(_tab) {\n const tabs = this._allTabs();\n const index = tabs.findIndex(tab => tab.pfeId === _tab.pfeId);\n return index;\n }\n\n reset() {\n const tabs = this._allTabs();\n const panels = this._allPanels();\n\n tabs.forEach(tab => (tab.selected = false));\n panels.forEach(panel => (panel.hidden = true));\n }\n\n _selectTab(newTab) {\n this.reset();\n\n const newPanel = this._panelForTab(newTab);\n let newTabSelected = false;\n\n if (!newPanel) {\n throw new Error(`No panel with pfeId ${newPanel.pfeId}`);\n }\n\n if (this.selected && this.selected !== newTab) {\n newTabSelected = true;\n\n this.dispatchEvent(\n new CustomEvent(`${PfeTabs.tag}:hidden-tab`, {\n bubbles: true,\n detail: {\n tab: this.selected\n }\n })\n );\n }\n\n newTab.selected = true;\n newPanel.hidden = false;\n\n if (this._setFocus) {\n newTab.focus();\n this._setFocus = false;\n }\n\n const tabs = this._allTabs();\n const newIdx = tabs.findIndex(tab => tab.selected);\n\n this.selected = newTab;\n\n if (newTabSelected) {\n this.dispatchEvent(\n new CustomEvent(`${PfeTabs.tag}:shown-tab`, {\n bubbles: true,\n detail: {\n tab: this.selected\n }\n })\n );\n }\n }\n\n _onKeyDown(event) {\n if (event.target.getAttribute(\"role\") !== \"tab\") {\n return;\n }\n\n if (event.altKey) {\n return;\n }\n\n let newTab;\n\n switch (event.keyCode) {\n case KEYCODE.LEFT:\n case KEYCODE.UP:\n newTab = this._prevTab();\n break;\n\n case KEYCODE.RIGHT:\n case KEYCODE.DOWN:\n newTab = this._nextTab();\n break;\n\n case KEYCODE.HOME:\n newTab = this._firstTab();\n break;\n\n case KEYCODE.END:\n newTab = this._lastTab();\n break;\n\n default:\n return;\n }\n\n event.preventDefault();\n\n this.selectedIndex = this._getTabIndex(newTab);\n this._setFocus = true;\n }\n\n _onClick(event) {\n if (event.currentTarget.getAttribute(\"role\") !== \"tab\") {\n return;\n }\n\n this.selectedIndex = this._getTabIndex(event.currentTarget);\n }\n}\n\nclass PfeTab extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-tab\";\n }\n\n get styleUrl() {\n return \"pfe-tab.scss\";\n }\n\n get templateUrl() {\n return \"pfe-tab.html\";\n }\n\n static get observedAttributes() {\n return [\"aria-selected\"];\n }\n\n constructor() {\n super(PfeTab);\n }\n\n get pfeId() {\n return this.getAttribute(\"pfe-id\");\n }\n\n set pfeId(id) {\n if (!id) {\n return;\n }\n\n this.setAttribute(\"pfe-id\", id);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.pfeId) {\n this.pfeId = `${PfeTab.tag}-${generateId()}`;\n }\n\n this.setAttribute(\"role\", \"tab\");\n this.setAttribute(\"aria-selected\", \"false\");\n this.setAttribute(\"tabindex\", -1);\n\n if (this.parentNode.hasAttribute(\"vertical\")) {\n this.setAttribute(\"vertical\", \"\");\n }\n }\n\n attributeChangedCallback() {\n const value = Boolean(this.selected);\n this.setAttribute(\"tabindex\", value ? 0 : -1);\n }\n\n set selected(value) {\n value = Boolean(value);\n this.setAttribute(\"aria-selected\", value);\n }\n\n get selected() {\n return this.getAttribute(\"aria-selected\") === \"true\" ? true : false;\n }\n}\n\nclass PfeTabPanel extends PFElement {\n\n get html() {\n return `
    \n
    \n \n
    \n
    `;\n }\n static get tag() {\n return \"pfe-tab-panel\";\n }\n\n get styleUrl() {\n return \"pfe-tab-panel.scss\";\n }\n\n get templateUrl() {\n return \"pfe-tab-panel.html\";\n }\n\n get pfeId() {\n return this.getAttribute(\"pfe-id\");\n }\n\n set pfeId(id) {\n if (!id) {\n return;\n }\n\n this.setAttribute(\"pfe-id\", id);\n }\n\n constructor() {\n super(PfeTabPanel);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.pfeId) {\n this.pfeId = `${PfeTabPanel.tag}-${generateId()}`;\n }\n\n this.setAttribute(\"role\", \"tabpanel\");\n this.setAttribute(\"tabindex\", 0);\n }\n}\n\nPFElement.create(PfeTab);\nPFElement.create(PfeTabPanel);\nPFElement.create(PfeTabs);\n\nexport default PfeTabs;\n//# sourceMappingURL=pfe-tabs.js.map\n"],"names":["Array","prototype","find","Object","defineProperty","value","predicate","TypeError","o","len","length","thisArg","arguments","k","kValue","call","undefined","configurable","writable","findIndex","KEYCODE","DOWN","LEFT","RIGHT","UP","HOME","END","generateId","Math","random","toString","substr","PfeTabs","getAttribute","setAttribute","_linked","_onSlotChange","bind","_onClick","_tabSlot","shadowRoot","querySelector","_panelSlot","addEventListener","_onKeyDown","hasAttribute","selectedIndex","Promise","all","customElements","whenDefined","PfeTab","tag","PfeTabPanel","then","_linkPanels","removeEventListener","_allTabs","forEach","tab","attr","oldValue","newValue","_allPanels","panel","removeAttribute","selectIndex","newTab","tagName","toLowerCase","console","warn","_getTabIndex","_index","index","parseInt","tabs","_selectTab","nextElementSibling","pfeId","querySelectorAll","panelId","newIdx","selected","_tab","panels","hidden","reset","newPanel","_panelForTab","newTabSelected","Error","dispatchEvent","CustomEvent","bubbles","detail","_setFocus","focus","event","target","altKey","keyCode","_prevTab","_nextTab","_firstTab","_lastTab","preventDefault","currentTarget","PFElement","parentNode","Boolean","id","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfe-tabs/pfe-tabs.umd.min.js b/elements/pfe-tabs/pfe-tabs.umd.min.js new file mode 100644 index 0000000000..3664eb3768 --- /dev/null +++ b/elements/pfe-tabs/pfe-tabs.umd.min.js @@ -0,0 +1,2 @@ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("../pfelement/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min"],t):e.PfeTabs=t(e.PFElement)}(this,function(r){"use strict";r=r&&r.hasOwnProperty("default")?r.default:r;var o=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},i=function(){function a(e,t){for(var r=0;r>>0;if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var a=arguments[1],o=0;o>>0;if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var a=arguments[1],o=0;o:host{display:block}:host .panels{padding:0}.tabs{--pfe-tabs--BorderColor:var(--pfe-theme--color--surface--border, #dfdfdf);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border:0;border-bottom:1px solid var(--pfe-tabs--BorderColor);border-bottom:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-tabs--BorderColor)}@media screen and (min-width:768px){:host([vertical]){display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}:host([vertical]) .tabs{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:22.22%;border:0;border-right:1px solid var(--pfe-tabs--BorderColor);border-right:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-tabs--BorderColor)}:host([vertical]) .panels{padding:0;width:77.78%;padding-right:1rem;padding-right:var(--pfe-theme--container-padding,1rem)}}@media screen and (min-width:768px){:host([vertical][pfe-variant=earth]){padding-top:1rem;padding-top:var(--pfe-theme--container-padding,1rem)}:host([vertical][pfe-variant=earth]) .tabs{padding-left:0;padding-top:1rem;padding-top:var(--pfe-theme--container-padding,1rem)}}:host([pfe-variant=earth]) .tabs{padding-left:1rem;padding-left:var(--pfe-theme--container-padding,1rem)}:host([pfe-variant=earth]) .tabs ::slotted(pfe-tab[aria-selected=false]:not([vertical]):first-of-type){border-left:0}:host([on=dark]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link--on-dark, #99ccff);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--on-dark--visited, #b38cd9);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--on-dark--hover, #cce6ff);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--on-dark--focus, #cce6ff)}:host([on=light]){--pfe-broadcasted--color--text:var(--pfe-theme--color--text, #333);--pfe-broadcasted--color--ui-link:var(--pfe-theme--color--ui-link, #06c);--pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--visited, rebeccapurple);--pfe-broadcasted--color--ui-link--hover:var(--pfe-theme--color--ui-link--hover, #003366);--pfe-broadcasted--color--ui-link--focus:var(--pfe-theme--color--ui-link--focus, #003366)}
    \n \n
    \n
    \n \n
    '}},{key:"styleUrl",get:function(){return"pfe-tabs.scss"}},{key:"templateUrl",get:function(){return"pfe-tabs.html"}},{key:"selectedIndex",get:function(){return this.getAttribute("selected-index")},set:function(e){this.setAttribute("selected-index",e)}}],[{key:"tag",get:function(){return"pfe-tabs"}},{key:"observedAttributes",get:function(){return["vertical","selected-index","pfe-variant","on"]}}]),i(a,[{key:"connectedCallback",value:function(){var e=this;n(a.prototype.__proto__||Object.getPrototypeOf(a.prototype),"connectedCallback",this).call(this),this.addEventListener("keydown",this._onKeyDown),this.addEventListener("click",this._onClick),this.hasAttribute("role")||this.setAttribute("role","tablist"),this.hasAttribute("selected-index")||(this.selectedIndex=0),Promise.all([customElements.whenDefined(b.tag),customElements.whenDefined(v.tag)]).then(function(){return e._linkPanels()})}},{key:"disconnectedCallback",value:function(){var t=this;this.removeEventListener("keydown",this._onKeyDown),this._allTabs().forEach(function(e){return e.removeEventListener("click",t._onClick)})}},{key:"attributeChangedCallback",value:function(e,t,r){var a=this;switch(e){case"pfe-variant":"wind"===this.getAttribute("pfe-variant")?(this._allTabs().forEach(function(e){return e.setAttribute("pfe-variant","wind")}),this._allPanels().forEach(function(e){return e.setAttribute("pfe-variant","wind")})):"earth"===this.getAttribute("pfe-variant")&&(this._allTabs().forEach(function(e){return e.setAttribute("pfe-variant","earth")}),this._allPanels().forEach(function(e){return e.setAttribute("pfe-variant","earth")}));break;case"vertical":this.hasAttribute("vertical")?(this.setAttribute("aria-orientation","vertical"),this._allPanels().forEach(function(e){return e.setAttribute("vertical","")}),this._allTabs().forEach(function(e){return e.setAttribute("vertical","")})):(this.removeAttribute("aria-orientation"),this._allPanels().forEach(function(e){return e.removeAttribute("vertical")}),this._allTabs().forEach(function(e){return e.removeAttribute("vertical")}));break;case"on":"dark"===this.getAttribute("on")&&(this._allTabs().forEach(function(e){return e.setAttribute("on","dark")}),this._allPanels().forEach(function(e){return e.setAttribute("on","dark")}));break;case"selected-index":Promise.all([customElements.whenDefined(b.tag),customElements.whenDefined(v.tag)]).then(function(){a._linkPanels(),a.selectIndex(r)})}}},{key:"select",value:function(e){e&&("pfe-tab"===e.tagName.toLowerCase()?this.selectedIndex=this._getTabIndex(e):console.warn(a.tag+": the tab must be a pfe-tab element"))}},{key:"selectIndex",value:function(e){if(void 0!==e){var t=parseInt(e,10),r=this._allTabs()[t];r?this._selectTab(r):console.warn(a.tag+": tab "+e+" does not exist")}}},{key:"_onSlotChange",value:function(){this._linked=!1,this._linkPanels()}},{key:"_linkPanels",value:function(){var r=this;this._linked||(this._allTabs().forEach(function(e){var t=e.nextElementSibling;"pfe-tab-panel"===t.tagName.toLowerCase()?(e.setAttribute("aria-controls",t.pfeId),t.setAttribute("aria-labelledby",e.pfeId),e.addEventListener("click",r._onClick)):console.warn(a.tag+": tab #"+e.pfeId+" is not a sibling of a ")}),this._linked=!0)}},{key:"_allPanels",value:function(){return[].concat(t(this.querySelectorAll("pfe-tab-panel")))}},{key:"_allTabs",value:function(){return[].concat(t(this.querySelectorAll("pfe-tab")))}},{key:"_panelForTab",value:function(e){var t=e.getAttribute("aria-controls");return this.querySelector('[pfe-id="'+t+'"]')}},{key:"_prevTab",value:function(){var e=this._allTabs(),t=e.findIndex(function(e){return e.selected})-1;return e[(t+e.length)%e.length]}},{key:"_firstTab",value:function(){return this._allTabs()[0]}},{key:"_lastTab",value:function(){var e=this._allTabs();return e[e.length-1]}},{key:"_nextTab",value:function(){var e=this._allTabs(),t=e.findIndex(function(e){return e.selected})+1;return e[t%e.length]}},{key:"_getTabIndex",value:function(t){return this._allTabs().findIndex(function(e){return e.pfeId===t.pfeId})}},{key:"reset",value:function(){var e=this._allTabs(),t=this._allPanels();e.forEach(function(e){return e.selected=!1}),t.forEach(function(e){return e.hidden=!0})}},{key:"_selectTab",value:function(e){this.reset();var t=this._panelForTab(e),r=!1;if(!t)throw new Error("No panel with pfeId "+t.pfeId);this.selected&&this.selected!==e&&(r=!0,this.dispatchEvent(new CustomEvent(a.tag+":hidden-tab",{bubbles:!0,detail:{tab:this.selected}}))),e.selected=!0,t.hidden=!1,this._setFocus&&(e.focus(),this._setFocus=!1);this._allTabs().findIndex(function(e){return e.selected});this.selected=e,r&&this.dispatchEvent(new CustomEvent(a.tag+":shown-tab",{bubbles:!0,detail:{tab:this.selected}}))}},{key:"_onKeyDown",value:function(e){if("tab"===e.target.getAttribute("role")&&!e.altKey){var t=void 0;switch(e.keyCode){case f:case p:t=this._prevTab();break;case c:case d:t=this._nextTab();break;case h:t=this._firstTab();break;case u:t=this._lastTab();break;default:return}e.preventDefault(),this.selectedIndex=this._getTabIndex(t),this._setFocus=!0}}},{key:"_onClick",value:function(e){"tab"===e.currentTarget.getAttribute("role")&&(this.selectedIndex=this._getTabIndex(e.currentTarget))}}]),a}(),b=function(e){function t(){return o(this,t),s(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,t))}return l(t,r),i(t,[{key:"html",get:function(){return""}},{key:"styleUrl",get:function(){return"pfe-tab.scss"}},{key:"templateUrl",get:function(){return"pfe-tab.html"}}],[{key:"tag",get:function(){return"pfe-tab"}},{key:"observedAttributes",get:function(){return["aria-selected"]}}]),i(t,[{key:"connectedCallback",value:function(){n(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"connectedCallback",this).call(this),this.pfeId||(this.pfeId=t.tag+"-"+a()),this.setAttribute("role","tab"),this.setAttribute("aria-selected","false"),this.setAttribute("tabindex",-1),this.parentNode.hasAttribute("vertical")&&this.setAttribute("vertical","")}},{key:"attributeChangedCallback",value:function(){var e=Boolean(this.selected);this.setAttribute("tabindex",e?0:-1)}},{key:"pfeId",get:function(){return this.getAttribute("pfe-id")},set:function(e){e&&this.setAttribute("pfe-id",e)}},{key:"selected",set:function(e){e=Boolean(e),this.setAttribute("aria-selected",e)},get:function(){return"true"===this.getAttribute("aria-selected")}}]),t}(),v=function(e){function t(){return o(this,t),s(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,t))}return l(t,r),i(t,[{key:"html",get:function(){return'
    \n
    \n \n
    \n
    '}},{key:"styleUrl",get:function(){return"pfe-tab-panel.scss"}},{key:"templateUrl",get:function(){return"pfe-tab-panel.html"}},{key:"pfeId",get:function(){return this.getAttribute("pfe-id")},set:function(e){e&&this.setAttribute("pfe-id",e)}}],[{key:"tag",get:function(){return"pfe-tab-panel"}}]),i(t,[{key:"connectedCallback",value:function(){n(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"connectedCallback",this).call(this),this.pfeId||(this.pfeId=t.tag+"-"+a()),this.setAttribute("role","tabpanel"),this.setAttribute("tabindex",0)}}]),t}();return r.create(b),r.create(v),r.create(e),e}); +//# sourceMappingURL=pfe-tabs.umd.min.js.map diff --git a/elements/pfe-tabs/pfe-tabs.umd.min.js.map b/elements/pfe-tabs/pfe-tabs.umd.min.js.map new file mode 100644 index 0000000000..828f65b11b --- /dev/null +++ b/elements/pfe-tabs/pfe-tabs.umd.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfe-tabs.umd.min.js","sources":["pfe-tabs.js"],"sourcesContent":["import PFElement from '../pfelement/pfelement.js';\n\n/*\n * @license\n * Copyright 2019 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// https://tc39.github.io/ecma262/#sec-array.prototype.find\nif (!Array.prototype.find) {\n Object.defineProperty(Array.prototype, \"find\", {\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 kValue.\n var kValue = o[k];\n if (predicate.call(thisArg, kValue, k, o)) {\n return kValue;\n }\n // e. Increase k by 1.\n k++;\n }\n\n // 7. Return undefined.\n return undefined;\n },\n configurable: true,\n writable: true\n });\n}\n\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 configurable: true,\n writable: true\n });\n}\n\nconst KEYCODE = {\n DOWN: 40,\n LEFT: 37,\n RIGHT: 39,\n UP: 38,\n HOME: 36,\n END: 35\n};\n\nfunction generateId() {\n return Math.random()\n .toString(36)\n .substr(2, 9);\n}\n\nclass PfeTabs extends PFElement {\n\n get html() {\n return `
    \n \n
    \n
    \n \n
    `;\n }\n static get tag() {\n return \"pfe-tabs\";\n }\n\n get styleUrl() {\n return \"pfe-tabs.scss\";\n }\n\n get templateUrl() {\n return \"pfe-tabs.html\";\n }\n\n static get observedAttributes() {\n return [\"vertical\", \"selected-index\", \"pfe-variant\", \"on\"];\n }\n\n get selectedIndex() {\n return this.getAttribute(\"selected-index\");\n }\n\n set selectedIndex(value) {\n this.setAttribute(\"selected-index\", value);\n }\n\n constructor() {\n super(PfeTabs);\n\n this._linked = false;\n\n this._onSlotChange = this._onSlotChange.bind(this);\n this._onClick = this._onClick.bind(this);\n\n this._tabSlot = this.shadowRoot.querySelector('slot[name=\"tab\"]');\n this._panelSlot = this.shadowRoot.querySelector('slot[name=\"panel\"]');\n\n this._tabSlot.addEventListener(\"slotchange\", this._onSlotChange);\n this._panelSlot.addEventListener(\"slotchange\", this._onSlotChange);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener(\"keydown\", this._onKeyDown);\n this.addEventListener(\"click\", this._onClick);\n\n if (!this.hasAttribute(\"role\")) {\n this.setAttribute(\"role\", \"tablist\");\n }\n\n if (!this.hasAttribute(\"selected-index\")) {\n this.selectedIndex = 0;\n }\n\n Promise.all([\n customElements.whenDefined(PfeTab.tag),\n customElements.whenDefined(PfeTabPanel.tag)\n ]).then(() => this._linkPanels());\n }\n\n disconnectedCallback() {\n this.removeEventListener(\"keydown\", this._onKeyDown);\n this._allTabs().forEach(tab => tab.removeEventListener(\"click\", this._onClick));\n }\n\n attributeChangedCallback(attr, oldValue, newValue) {\n switch (attr) {\n case \"pfe-variant\":\n if (this.getAttribute(\"pfe-variant\") === \"wind\") {\n this._allTabs().forEach(tab =>\n tab.setAttribute(\"pfe-variant\", \"wind\")\n );\n this._allPanels().forEach(panel =>\n panel.setAttribute(\"pfe-variant\", \"wind\")\n );\n } else if (this.getAttribute(\"pfe-variant\") === \"earth\") {\n this._allTabs().forEach(tab =>\n tab.setAttribute(\"pfe-variant\", \"earth\")\n );\n this._allPanels().forEach(panel =>\n panel.setAttribute(\"pfe-variant\", \"earth\")\n );\n }\n break;\n\n case \"vertical\":\n if (this.hasAttribute(\"vertical\")) {\n this.setAttribute(\"aria-orientation\", \"vertical\");\n this._allPanels().forEach(panel =>\n panel.setAttribute(\"vertical\", \"\")\n );\n this._allTabs().forEach(tab => tab.setAttribute(\"vertical\", \"\"));\n } else {\n this.removeAttribute(\"aria-orientation\");\n this._allPanels().forEach(panel => panel.removeAttribute(\"vertical\"));\n this._allTabs().forEach(tab => tab.removeAttribute(\"vertical\"));\n }\n break;\n\n case \"on\":\n if (this.getAttribute(\"on\") === \"dark\") {\n this._allTabs().forEach(tab =>\n tab.setAttribute(\"on\", \"dark\")\n );\n this._allPanels().forEach(panel =>\n panel.setAttribute(\"on\", \"dark\")\n );\n }\n break;\n\n case \"selected-index\":\n Promise.all([\n customElements.whenDefined(PfeTab.tag),\n customElements.whenDefined(PfeTabPanel.tag)\n ]).then(() => {\n this._linkPanels();\n this.selectIndex(newValue);\n });\n }\n }\n\n select(newTab) {\n if (!newTab) {\n return;\n }\n\n if (newTab.tagName.toLowerCase() !== \"pfe-tab\") {\n console.warn(`${PfeTabs.tag}: the tab must be a pfe-tab element`);\n return;\n }\n\n this.selectedIndex = this._getTabIndex(newTab);\n }\n\n selectIndex(_index) {\n if (_index === undefined) {\n return;\n }\n\n const index = parseInt(_index, 10);\n const tabs = this._allTabs();\n const tab = tabs[index];\n\n if (!tab) {\n console.warn(`${PfeTabs.tag}: tab ${_index} does not exist`);\n return;\n }\n\n this._selectTab(tab);\n }\n\n _onSlotChange() {\n this._linked = false;\n this._linkPanels();\n }\n\n _linkPanels() {\n if (this._linked) {\n return;\n }\n\n const tabs = this._allTabs();\n\n tabs.forEach(tab => {\n const panel = tab.nextElementSibling;\n if (panel.tagName.toLowerCase() !== \"pfe-tab-panel\") {\n console.warn(\n `${PfeTabs.tag}: tab #${tab.pfeId} is not a sibling of a `\n );\n return;\n }\n\n tab.setAttribute(\"aria-controls\", panel.pfeId);\n panel.setAttribute(\"aria-labelledby\", tab.pfeId);\n\n tab.addEventListener(\"click\", this._onClick);\n });\n\n this._linked = true;\n }\n\n _allPanels() {\n return [...this.querySelectorAll(\"pfe-tab-panel\")];\n }\n\n _allTabs() {\n return [...this.querySelectorAll(\"pfe-tab\")];\n }\n\n _panelForTab(tab) {\n const panelId = tab.getAttribute(\"aria-controls\");\n return this.querySelector(`[pfe-id=\"${panelId}\"]`);\n }\n\n _prevTab() {\n const tabs = this._allTabs();\n let newIdx = tabs.findIndex(tab => tab.selected) - 1;\n return tabs[(newIdx + tabs.length) % tabs.length];\n }\n\n _firstTab() {\n const tabs = this._allTabs();\n return tabs[0];\n }\n\n _lastTab() {\n const tabs = this._allTabs();\n return tabs[tabs.length - 1];\n }\n\n _nextTab() {\n const tabs = this._allTabs();\n let newIdx = tabs.findIndex(tab => tab.selected) + 1;\n return tabs[newIdx % tabs.length];\n }\n\n _getTabIndex(_tab) {\n const tabs = this._allTabs();\n const index = tabs.findIndex(tab => tab.pfeId === _tab.pfeId);\n return index;\n }\n\n reset() {\n const tabs = this._allTabs();\n const panels = this._allPanels();\n\n tabs.forEach(tab => (tab.selected = false));\n panels.forEach(panel => (panel.hidden = true));\n }\n\n _selectTab(newTab) {\n this.reset();\n\n const newPanel = this._panelForTab(newTab);\n let newTabSelected = false;\n\n if (!newPanel) {\n throw new Error(`No panel with pfeId ${newPanel.pfeId}`);\n }\n\n if (this.selected && this.selected !== newTab) {\n newTabSelected = true;\n\n this.dispatchEvent(\n new CustomEvent(`${PfeTabs.tag}:hidden-tab`, {\n bubbles: true,\n detail: {\n tab: this.selected\n }\n })\n );\n }\n\n newTab.selected = true;\n newPanel.hidden = false;\n\n if (this._setFocus) {\n newTab.focus();\n this._setFocus = false;\n }\n\n const tabs = this._allTabs();\n const newIdx = tabs.findIndex(tab => tab.selected);\n\n this.selected = newTab;\n\n if (newTabSelected) {\n this.dispatchEvent(\n new CustomEvent(`${PfeTabs.tag}:shown-tab`, {\n bubbles: true,\n detail: {\n tab: this.selected\n }\n })\n );\n }\n }\n\n _onKeyDown(event) {\n if (event.target.getAttribute(\"role\") !== \"tab\") {\n return;\n }\n\n if (event.altKey) {\n return;\n }\n\n let newTab;\n\n switch (event.keyCode) {\n case KEYCODE.LEFT:\n case KEYCODE.UP:\n newTab = this._prevTab();\n break;\n\n case KEYCODE.RIGHT:\n case KEYCODE.DOWN:\n newTab = this._nextTab();\n break;\n\n case KEYCODE.HOME:\n newTab = this._firstTab();\n break;\n\n case KEYCODE.END:\n newTab = this._lastTab();\n break;\n\n default:\n return;\n }\n\n event.preventDefault();\n\n this.selectedIndex = this._getTabIndex(newTab);\n this._setFocus = true;\n }\n\n _onClick(event) {\n if (event.currentTarget.getAttribute(\"role\") !== \"tab\") {\n return;\n }\n\n this.selectedIndex = this._getTabIndex(event.currentTarget);\n }\n}\n\nclass PfeTab extends PFElement {\n\n get html() {\n return ``;\n }\n static get tag() {\n return \"pfe-tab\";\n }\n\n get styleUrl() {\n return \"pfe-tab.scss\";\n }\n\n get templateUrl() {\n return \"pfe-tab.html\";\n }\n\n static get observedAttributes() {\n return [\"aria-selected\"];\n }\n\n constructor() {\n super(PfeTab);\n }\n\n get pfeId() {\n return this.getAttribute(\"pfe-id\");\n }\n\n set pfeId(id) {\n if (!id) {\n return;\n }\n\n this.setAttribute(\"pfe-id\", id);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.pfeId) {\n this.pfeId = `${PfeTab.tag}-${generateId()}`;\n }\n\n this.setAttribute(\"role\", \"tab\");\n this.setAttribute(\"aria-selected\", \"false\");\n this.setAttribute(\"tabindex\", -1);\n\n if (this.parentNode.hasAttribute(\"vertical\")) {\n this.setAttribute(\"vertical\", \"\");\n }\n }\n\n attributeChangedCallback() {\n const value = Boolean(this.selected);\n this.setAttribute(\"tabindex\", value ? 0 : -1);\n }\n\n set selected(value) {\n value = Boolean(value);\n this.setAttribute(\"aria-selected\", value);\n }\n\n get selected() {\n return this.getAttribute(\"aria-selected\") === \"true\" ? true : false;\n }\n}\n\nclass PfeTabPanel extends PFElement {\n\n get html() {\n return `
    \n
    \n \n
    \n
    `;\n }\n static get tag() {\n return \"pfe-tab-panel\";\n }\n\n get styleUrl() {\n return \"pfe-tab-panel.scss\";\n }\n\n get templateUrl() {\n return \"pfe-tab-panel.html\";\n }\n\n get pfeId() {\n return this.getAttribute(\"pfe-id\");\n }\n\n set pfeId(id) {\n if (!id) {\n return;\n }\n\n this.setAttribute(\"pfe-id\", id);\n }\n\n constructor() {\n super(PfeTabPanel);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.pfeId) {\n this.pfeId = `${PfeTabPanel.tag}-${generateId()}`;\n }\n\n this.setAttribute(\"role\", \"tabpanel\");\n this.setAttribute(\"tabindex\", 0);\n }\n}\n\nPFElement.create(PfeTab);\nPFElement.create(PfeTabPanel);\nPFElement.create(PfeTabs);\n\nexport default PfeTabs;\n//# sourceMappingURL=pfe-tabs.js.map\n"],"names":["Array","prototype","find","defineProperty","predicate","this","TypeError","o","Object","len","length","thisArg","arguments","k","kValue","call","findIndex","KEYCODE","generateId","Math","random","toString","substr","PfeTabs","_linked","_onSlotChange","_this","bind","_onClick","_tabSlot","shadowRoot","querySelector","_panelSlot","addEventListener","PFElement","getAttribute","value","setAttribute","_onKeyDown","hasAttribute","selectedIndex","all","customElements","whenDefined","PfeTab","tag","PfeTabPanel","then","_this2","_linkPanels","removeEventListener","_allTabs","forEach","tab","_this3","attr","oldValue","newValue","_allPanels","panel","removeAttribute","selectIndex","newTab","tagName","toLowerCase","_getTabIndex","warn","_index","undefined","index","parseInt","_selectTab","nextElementSibling","pfeId","_this5","querySelectorAll","panelId","tabs","newIdx","selected","_tab","panels","hidden","reset","newPanel","_panelForTab","newTabSelected","Error","dispatchEvent","CustomEvent","_setFocus","focus","event","target","altKey","keyCode","_prevTab","_nextTab","_firstTab","_lastTab","preventDefault","currentTarget","parentNode","Boolean","id","create"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfelement/package.json b/elements/pfelement/package.json index 361536eeb9..4c24b97513 100644 --- a/elements/pfelement/package.json +++ b/elements/pfelement/package.json @@ -4,7 +4,7 @@ "className": "PFElement", "elementName": "pfelement" }, - "version": "1.0.0-prerelease.11", + "version": "1.0.0-prerelease.13", "publishConfig": { "access": "public" }, @@ -15,7 +15,7 @@ ], "repository": { "type": "git", - "url" : "github:patternfly/patternfly-elements", + "url": "github:patternfly/patternfly-elements", "directory": "elements/pfelement" }, "main": "pfelement.js", diff --git a/elements/pfelement/pfelement-noscript.css b/elements/pfelement/pfelement-noscript.css new file mode 100644 index 0000000000..1d1f01e1aa --- /dev/null +++ b/elements/pfelement/pfelement-noscript.css @@ -0,0 +1,27 @@ +/* + * Copyright 2019 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. + * +*/ + +/* secret weapon in the specificificificificity wars */ +body[unresolved][unresolved] { + opacity: 1; +} diff --git a/elements/pfelement/pfelement-noscript.min.css b/elements/pfelement/pfelement-noscript.min.css new file mode 100644 index 0000000000..8a4edc4fcb --- /dev/null +++ b/elements/pfelement/pfelement-noscript.min.css @@ -0,0 +1 @@ +body[unresolved][unresolved]{opacity:1} \ No newline at end of file diff --git a/elements/pfelement/pfelement.css b/elements/pfelement/pfelement.css new file mode 100644 index 0000000000..bec524ea56 --- /dev/null +++ b/elements/pfelement/pfelement.css @@ -0,0 +1,43 @@ +/* + * Copyright 2019 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. + * +*/ + +body { + --pfe-reveal-duration: 0.1618s; + --pfe-reveal-delay: 2s; + + transition: opacity var(--pfe-reveal-duration) ease-in-out; +} +body[unresolved] { + opacity: 0; + animation: reveal var(--pfe-reveal-duration) var(--pfe-reveal-delay) 1 + forwards; +} + +@keyframes reveal { + from { + opacity: 0; + } + to { + opacity: 1; + } +} diff --git a/elements/pfelement/pfelement.js b/elements/pfelement/pfelement.js new file mode 100644 index 0000000000..d6b5874ce1 --- /dev/null +++ b/elements/pfelement/pfelement.js @@ -0,0 +1,298 @@ +/* + * Copyright 2019 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. + * +*/ + +let logger = () => null; + +function reveal() { + logger(`[reveal] elements ready, revealing the body`); + window.document.body.removeAttribute("unresolved"); +} + +function autoReveal(logFunction) { + logger = logFunction; + // If Web Components are already ready, run the handler right away. If they + // are not yet ready, wait. + // + // see https://github.com/github/webcomponentsjs#webcomponents-loaderjs for + // info about web component readiness events + const polyfillPresent = window.WebComponents; + const polyfillReady = polyfillPresent && window.WebComponents.ready; + + if (!polyfillPresent || polyfillReady) { + handleWebComponentsReady(); + } else { + window.addEventListener("WebComponentsReady", handleWebComponentsReady); + } +} + +function handleWebComponentsReady() { + logger("[reveal] web components ready"); + reveal(); +} + +/* + * Copyright 2019 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 prefix = "pfe-"; + +class PFElement extends HTMLElement { + static create(pfe) { + window.customElements.define(pfe.tag, pfe); + } + + static debugLog(preference = null) { + if (preference !== null) { + PFElement._debugLog = !!preference; + } + return PFElement._debugLog; + } + + static log(...msgs) { + if (PFElement.debugLog()) { + console.log(...msgs); + } + } + + static get PfeTypes() { + return { + Container: "container", + Content: "content", + Combo: "combo" + }; + } + + get pfeType() { + return this.getAttribute(`${prefix}type`); + } + + set pfeType(value) { + this.setAttribute(`${prefix}type`, value); + } + + // Returns a single element assigned to that slot; if multiple, it returns the first + has_slot(name) { + return this.querySelector(`[slot='${name}']`); + } + + // Returns an array with all elements assigned to that slot + has_slots(name) { + return [...this.querySelectorAll(`[slot='${name}']`)]; + } + + constructor(pfeClass, { type = null, delayRender = false } = {}) { + super(); + + this.connected = false; + this._pfeClass = pfeClass; + this.tag = pfeClass.tag; + this.props = pfeClass.properties; + this._queue = []; + this.template = document.createElement("template"); + + this.attachShadow({ mode: "open" }); + + if (type) { + this._queueAction({ + type: "setProperty", + data: { + name: "pfeType", + value: type + } + }); + } + + if (!delayRender) { + this.render(); + } + } + + connectedCallback() { + this.connected = true; + + if (window.ShadyCSS) { + window.ShadyCSS.styleElement(this); + } + + this.classList.add("PFElement"); + + if (typeof this.props === "object") { + this._mapSchemaToProperties(this.tag, this.props); + } + + if (this._queue.length) { + this._processQueue(); + } + } + + disconnectedCallback() { + this.connected = false; + } + + attributeChangedCallback(attr, oldVal, newVal) { + if (!this._pfeClass.cascadingAttributes) { + return; + } + + const cascadeTo = this._pfeClass.cascadingAttributes[attr]; + if (cascadeTo) { + this._copyAttribute(attr, cascadeTo); + } + } + + _copyAttribute(name, to) { + const recipients = [ + ...this.querySelectorAll(to), + ...this.shadowRoot.querySelectorAll(to) + ]; + const value = this.getAttribute(name); + const fname = value == null ? "removeAttribute" : "setAttribute"; + for (const node of recipients) { + node[fname](name, value); + } + } + + // Map the imported properties json to real props on the element + // @notice static getter of properties is built via tooling + // to edit modify src/element.json + _mapSchemaToProperties(tag, properties) { + // Loop over the properties provided by the schema + Object.keys(properties).forEach(attr => { + let data = properties[attr]; + // Set the attribute's property equal to the schema input + this[attr] = data; + // Initialize the value to null + this[attr].value = null; + + // If the attribute exists on the host + if (this.hasAttribute(`${prefix}${attr}`)) { + // Set property value based on the existing attribute + this[attr].value = this.getAttribute(`${prefix}${attr}`); + } + // Otherwise, look for a default and use that instead + else if (data.default) { + const dependency_exists = this._hasDependency(tag, data.options); + const no_dependencies = + !data.options || (data.options && !data.options.dependencies.length); + // If the dependency exists or there are no dependencies, set the default + if (dependency_exists || no_dependencies) { + this.setAttribute(`${prefix}${attr}`, data.default); + this[attr].value = data.default; + } + } + }); + } + + // Test whether expected dependencies exist + _hasDependency(tag, opts) { + // Get any possible dependencies for this attribute to exist + let dependencies = opts ? opts.dependencies : []; + // Initialize the dependency return value + let hasDependency = false; + // Check that dependent item exists + // Loop through the dependencies defined + for (let i = 0; i < dependencies.length; i += 1) { + const slot_exists = + dependencies[i].type === "slot" && + this.has_slot(`${tag}--${dependencies[i].id}`); + const attribute_exists = + dependencies[i].type === "attribute" && + this.getAttribute(`${prefix}${dependencies[i].id}`); + // If the type is slot, check that it exists OR + // if the type is an attribute, check if the attribute is defined + if (slot_exists || attribute_exists) { + // If the slot does exist, add the attribute with the default value + hasDependency = true; + // Exit the loop + break; + } + } + // Return a boolean if the dependency exists + return hasDependency; + } + + _queueAction(action) { + this._queue.push(action); + } + + _processQueue() { + this._queue.forEach(action => { + this[`_${action.type}`](action.data); + }); + + this._queue = []; + } + + _setProperty({ name, value }) { + this[name] = value; + } + + static var(name, element = document.body) { + return window + .getComputedStyle(element) + .getPropertyValue(name) + .trim(); + } + + var(name) { + return PFElement.var(name, this); + } + + render() { + this.shadowRoot.innerHTML = ""; + this.template.innerHTML = this.html; + + if (window.ShadyCSS) { + window.ShadyCSS.prepareTemplate(this.template, this.tag); + } + + this.shadowRoot.appendChild(this.template.content.cloneNode(true)); + } + + log(...msgs) { + PFElement.log(`[${this.tag}]`, ...msgs); + } +} + +autoReveal(PFElement.log); + +export default PFElement; +//# sourceMappingURL=pfelement.js.map diff --git a/elements/pfelement/pfelement.js.map b/elements/pfelement/pfelement.js.map new file mode 100644 index 0000000000..8a88704226 --- /dev/null +++ b/elements/pfelement/pfelement.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfelement.js","sources":["reveal.js","pfelement.js"],"sourcesContent":["/*\n * Copyright 2019 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\nlet logger = () => null;\n\nexport function reveal() {\n logger(`[reveal] elements ready, revealing the body`);\n window.document.body.removeAttribute(\"unresolved\");\n}\n\nexport function autoReveal(logFunction) {\n logger = logFunction;\n // If Web Components are already ready, run the handler right away. If they\n // are not yet ready, wait.\n //\n // see https://github.com/github/webcomponentsjs#webcomponents-loaderjs for\n // info about web component readiness events\n const polyfillPresent = window.WebComponents;\n const polyfillReady = polyfillPresent && window.WebComponents.ready;\n\n if (!polyfillPresent || polyfillReady) {\n handleWebComponentsReady();\n } else {\n window.addEventListener(\"WebComponentsReady\", handleWebComponentsReady);\n }\n}\n\nfunction handleWebComponentsReady() {\n logger(\"[reveal] web components ready\");\n reveal();\n}\n","/*\n * Copyright 2019 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 { autoReveal } from \"./reveal.js\";\nconst prefix = \"pfe-\";\n\nclass PFElement extends HTMLElement {\n static create(pfe) {\n window.customElements.define(pfe.tag, pfe);\n }\n\n static debugLog(preference = null) {\n if (preference !== null) {\n PFElement._debugLog = !!preference;\n }\n return PFElement._debugLog;\n }\n\n static log(...msgs) {\n if (PFElement.debugLog()) {\n console.log(...msgs);\n }\n }\n\n static get PfeTypes() {\n return {\n Container: \"container\",\n Content: \"content\",\n Combo: \"combo\"\n };\n }\n\n get pfeType() {\n return this.getAttribute(`${prefix}type`);\n }\n\n set pfeType(value) {\n this.setAttribute(`${prefix}type`, value);\n }\n\n // Returns a single element assigned to that slot; if multiple, it returns the first\n has_slot(name) {\n return this.querySelector(`[slot='${name}']`);\n }\n\n // Returns an array with all elements assigned to that slot\n has_slots(name) {\n return [...this.querySelectorAll(`[slot='${name}']`)];\n }\n\n constructor(pfeClass, { type = null, delayRender = false } = {}) {\n super();\n\n this.connected = false;\n this._pfeClass = pfeClass;\n this.tag = pfeClass.tag;\n this.props = pfeClass.properties;\n this._queue = [];\n this.template = document.createElement(\"template\");\n\n this.attachShadow({ mode: \"open\" });\n\n if (type) {\n this._queueAction({\n type: \"setProperty\",\n data: {\n name: \"pfeType\",\n value: type\n }\n });\n }\n\n if (!delayRender) {\n this.render();\n }\n }\n\n connectedCallback() {\n this.connected = true;\n\n if (window.ShadyCSS) {\n window.ShadyCSS.styleElement(this);\n }\n\n this.classList.add(\"PFElement\");\n\n if (typeof this.props === \"object\") {\n this._mapSchemaToProperties(this.tag, this.props);\n }\n\n if (this._queue.length) {\n this._processQueue();\n }\n }\n\n disconnectedCallback() {\n this.connected = false;\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n if (!this._pfeClass.cascadingAttributes) {\n return;\n }\n\n const cascadeTo = this._pfeClass.cascadingAttributes[attr];\n if (cascadeTo) {\n this._copyAttribute(attr, cascadeTo);\n }\n }\n\n _copyAttribute(name, to) {\n const recipients = [\n ...this.querySelectorAll(to),\n ...this.shadowRoot.querySelectorAll(to)\n ];\n const value = this.getAttribute(name);\n const fname = value == null ? \"removeAttribute\" : \"setAttribute\";\n for (const node of recipients) {\n node[fname](name, value);\n }\n }\n\n // Map the imported properties json to real props on the element\n // @notice static getter of properties is built via tooling\n // to edit modify src/element.json\n _mapSchemaToProperties(tag, properties) {\n // Loop over the properties provided by the schema\n Object.keys(properties).forEach(attr => {\n let data = properties[attr];\n // Set the attribute's property equal to the schema input\n this[attr] = data;\n // Initialize the value to null\n this[attr].value = null;\n\n // If the attribute exists on the host\n if (this.hasAttribute(`${prefix}${attr}`)) {\n // Set property value based on the existing attribute\n this[attr].value = this.getAttribute(`${prefix}${attr}`);\n }\n // Otherwise, look for a default and use that instead\n else if (data.default) {\n const dependency_exists = this._hasDependency(tag, data.options);\n const no_dependencies =\n !data.options || (data.options && !data.options.dependencies.length);\n // If the dependency exists or there are no dependencies, set the default\n if (dependency_exists || no_dependencies) {\n this.setAttribute(`${prefix}${attr}`, data.default);\n this[attr].value = data.default;\n }\n }\n });\n }\n\n // Test whether expected dependencies exist\n _hasDependency(tag, opts) {\n // Get any possible dependencies for this attribute to exist\n let dependencies = opts ? opts.dependencies : [];\n // Initialize the dependency return value\n let hasDependency = false;\n // Check that dependent item exists\n // Loop through the dependencies defined\n for (let i = 0; i < dependencies.length; i += 1) {\n const slot_exists =\n dependencies[i].type === \"slot\" &&\n this.has_slot(`${tag}--${dependencies[i].id}`);\n const attribute_exists =\n dependencies[i].type === \"attribute\" &&\n this.getAttribute(`${prefix}${dependencies[i].id}`);\n // If the type is slot, check that it exists OR\n // if the type is an attribute, check if the attribute is defined\n if (slot_exists || attribute_exists) {\n // If the slot does exist, add the attribute with the default value\n hasDependency = true;\n // Exit the loop\n break;\n }\n }\n // Return a boolean if the dependency exists\n return hasDependency;\n }\n\n _queueAction(action) {\n this._queue.push(action);\n }\n\n _processQueue() {\n this._queue.forEach(action => {\n this[`_${action.type}`](action.data);\n });\n\n this._queue = [];\n }\n\n _setProperty({ name, value }) {\n this[name] = value;\n }\n\n static var(name, element = document.body) {\n return window\n .getComputedStyle(element)\n .getPropertyValue(name)\n .trim();\n }\n\n var(name) {\n return PFElement.var(name, this);\n }\n\n render() {\n this.shadowRoot.innerHTML = \"\";\n this.template.innerHTML = this.html;\n\n if (window.ShadyCSS) {\n window.ShadyCSS.prepareTemplate(this.template, this.tag);\n }\n\n this.shadowRoot.appendChild(this.template.content.cloneNode(true));\n }\n\n log(...msgs) {\n PFElement.log(`[${this.tag}]`, ...msgs);\n }\n}\n\nautoReveal(PFElement.log);\n\nexport default PFElement;\n//# sourceMappingURL=PFElement.js.map\n"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfelement/pfelement.min.css b/elements/pfelement/pfelement.min.css new file mode 100644 index 0000000000..a73a379f3a --- /dev/null +++ b/elements/pfelement/pfelement.min.css @@ -0,0 +1 @@ +body{--pfe-reveal-duration:0.1618s;--pfe-reveal-delay:2s;transition:opacity var(--pfe-reveal-duration) ease-in-out}body[unresolved]{opacity:0;animation:reveal var(--pfe-reveal-duration) var(--pfe-reveal-delay) 1 forwards}@keyframes reveal{from{opacity:0}to{opacity:1}} \ No newline at end of file diff --git a/elements/pfelement/pfelement.min.js b/elements/pfelement/pfelement.min.js new file mode 100644 index 0000000000..b8b78b8ef3 --- /dev/null +++ b/elements/pfelement/pfelement.min.js @@ -0,0 +1,2 @@ +let t=()=>null;function e(){t("[reveal] web components ready"),t("[reveal] elements ready, revealing the body"),window.document.body.removeAttribute("unresolved")}const s="pfe-";class o extends HTMLElement{static create(t){window.customElements.define(t.tag,t)}static debugLog(t=null){return null!==t&&(o._debugLog=!!t),o._debugLog}static log(...t){o.debugLog()&&console.log(...t)}static get PfeTypes(){return{Container:"container",Content:"content",Combo:"combo"}}get pfeType(){return this.getAttribute(`${s}type`)}set pfeType(t){this.setAttribute(`${s}type`,t)}has_slot(t){return this.querySelector(`[slot='${t}']`)}has_slots(t){return[...this.querySelectorAll(`[slot='${t}']`)]}constructor(t,{type:e=null,delayRender:s=!1}={}){super(),this.connected=!1,this._pfeClass=t,this.tag=t.tag,this.props=t.properties,this._queue=[],this.template=document.createElement("template"),this.attachShadow({mode:"open"}),e&&this._queueAction({type:"setProperty",data:{name:"pfeType",value:e}}),s||this.render()}connectedCallback(){this.connected=!0,window.ShadyCSS&&window.ShadyCSS.styleElement(this),this.classList.add("PFElement"),"object"==typeof this.props&&this._mapSchemaToProperties(this.tag,this.props),this._queue.length&&this._processQueue()}disconnectedCallback(){this.connected=!1}attributeChangedCallback(t,e,s){if(!this._pfeClass.cascadingAttributes)return;const o=this._pfeClass.cascadingAttributes[t];o&&this._copyAttribute(t,o)}_copyAttribute(t,e){const s=[...this.querySelectorAll(e),...this.shadowRoot.querySelectorAll(e)],o=this.getAttribute(t),i=null==o?"removeAttribute":"setAttribute";for(const e of s)e[i](t,o)}_mapSchemaToProperties(t,e){Object.keys(e).forEach(o=>{let i=e[o];if(this[o]=i,this[o].value=null,this.hasAttribute(`${s}${o}`))this[o].value=this.getAttribute(`${s}${o}`);else if(i.default){const e=this._hasDependency(t,i.options),n=!i.options||i.options&&!i.options.dependencies.length;(e||n)&&(this.setAttribute(`${s}${o}`,i.default),this[o].value=i.default)}})}_hasDependency(t,e){let o=e?e.dependencies:[],i=!1;for(let e=0;e{this[`_${t.type}`](t.data)}),this._queue=[]}_setProperty({name:t,value:e}){this[t]=e}static var(t,e=document.body){return window.getComputedStyle(e).getPropertyValue(t).trim()}var(t){return o.var(t,this)}render(){this.shadowRoot.innerHTML="",this.template.innerHTML=this.html,window.ShadyCSS&&window.ShadyCSS.prepareTemplate(this.template,this.tag),this.shadowRoot.appendChild(this.template.content.cloneNode(!0))}log(...t){o.log(`[${this.tag}]`,...t)}}!function(s){t=s;const o=window.WebComponents,i=o&&window.WebComponents.ready;!o||i?e():window.addEventListener("WebComponentsReady",e)}(o.log);export default o; +//# sourceMappingURL=pfelement.min.js.map diff --git a/elements/pfelement/pfelement.min.js.map b/elements/pfelement/pfelement.min.js.map new file mode 100644 index 0000000000..bebc02ad7c --- /dev/null +++ b/elements/pfelement/pfelement.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfelement.min.js","sources":["pfelement.js"],"sourcesContent":["/*\n * Copyright 2019 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\nlet logger = () => null;\n\nfunction reveal() {\n logger(`[reveal] elements ready, revealing the body`);\n window.document.body.removeAttribute(\"unresolved\");\n}\n\nfunction autoReveal(logFunction) {\n logger = logFunction;\n // If Web Components are already ready, run the handler right away. If they\n // are not yet ready, wait.\n //\n // see https://github.com/github/webcomponentsjs#webcomponents-loaderjs for\n // info about web component readiness events\n const polyfillPresent = window.WebComponents;\n const polyfillReady = polyfillPresent && window.WebComponents.ready;\n\n if (!polyfillPresent || polyfillReady) {\n handleWebComponentsReady();\n } else {\n window.addEventListener(\"WebComponentsReady\", handleWebComponentsReady);\n }\n}\n\nfunction handleWebComponentsReady() {\n logger(\"[reveal] web components ready\");\n reveal();\n}\n\n/*\n * Copyright 2019 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*/\nconst prefix = \"pfe-\";\n\nclass PFElement extends HTMLElement {\n static create(pfe) {\n window.customElements.define(pfe.tag, pfe);\n }\n\n static debugLog(preference = null) {\n if (preference !== null) {\n PFElement._debugLog = !!preference;\n }\n return PFElement._debugLog;\n }\n\n static log(...msgs) {\n if (PFElement.debugLog()) {\n console.log(...msgs);\n }\n }\n\n static get PfeTypes() {\n return {\n Container: \"container\",\n Content: \"content\",\n Combo: \"combo\"\n };\n }\n\n get pfeType() {\n return this.getAttribute(`${prefix}type`);\n }\n\n set pfeType(value) {\n this.setAttribute(`${prefix}type`, value);\n }\n\n // Returns a single element assigned to that slot; if multiple, it returns the first\n has_slot(name) {\n return this.querySelector(`[slot='${name}']`);\n }\n\n // Returns an array with all elements assigned to that slot\n has_slots(name) {\n return [...this.querySelectorAll(`[slot='${name}']`)];\n }\n\n constructor(pfeClass, { type = null, delayRender = false } = {}) {\n super();\n\n this.connected = false;\n this._pfeClass = pfeClass;\n this.tag = pfeClass.tag;\n this.props = pfeClass.properties;\n this._queue = [];\n this.template = document.createElement(\"template\");\n\n this.attachShadow({ mode: \"open\" });\n\n if (type) {\n this._queueAction({\n type: \"setProperty\",\n data: {\n name: \"pfeType\",\n value: type\n }\n });\n }\n\n if (!delayRender) {\n this.render();\n }\n }\n\n connectedCallback() {\n this.connected = true;\n\n if (window.ShadyCSS) {\n window.ShadyCSS.styleElement(this);\n }\n\n this.classList.add(\"PFElement\");\n\n if (typeof this.props === \"object\") {\n this._mapSchemaToProperties(this.tag, this.props);\n }\n\n if (this._queue.length) {\n this._processQueue();\n }\n }\n\n disconnectedCallback() {\n this.connected = false;\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n if (!this._pfeClass.cascadingAttributes) {\n return;\n }\n\n const cascadeTo = this._pfeClass.cascadingAttributes[attr];\n if (cascadeTo) {\n this._copyAttribute(attr, cascadeTo);\n }\n }\n\n _copyAttribute(name, to) {\n const recipients = [\n ...this.querySelectorAll(to),\n ...this.shadowRoot.querySelectorAll(to)\n ];\n const value = this.getAttribute(name);\n const fname = value == null ? \"removeAttribute\" : \"setAttribute\";\n for (const node of recipients) {\n node[fname](name, value);\n }\n }\n\n // Map the imported properties json to real props on the element\n // @notice static getter of properties is built via tooling\n // to edit modify src/element.json\n _mapSchemaToProperties(tag, properties) {\n // Loop over the properties provided by the schema\n Object.keys(properties).forEach(attr => {\n let data = properties[attr];\n // Set the attribute's property equal to the schema input\n this[attr] = data;\n // Initialize the value to null\n this[attr].value = null;\n\n // If the attribute exists on the host\n if (this.hasAttribute(`${prefix}${attr}`)) {\n // Set property value based on the existing attribute\n this[attr].value = this.getAttribute(`${prefix}${attr}`);\n }\n // Otherwise, look for a default and use that instead\n else if (data.default) {\n const dependency_exists = this._hasDependency(tag, data.options);\n const no_dependencies =\n !data.options || (data.options && !data.options.dependencies.length);\n // If the dependency exists or there are no dependencies, set the default\n if (dependency_exists || no_dependencies) {\n this.setAttribute(`${prefix}${attr}`, data.default);\n this[attr].value = data.default;\n }\n }\n });\n }\n\n // Test whether expected dependencies exist\n _hasDependency(tag, opts) {\n // Get any possible dependencies for this attribute to exist\n let dependencies = opts ? opts.dependencies : [];\n // Initialize the dependency return value\n let hasDependency = false;\n // Check that dependent item exists\n // Loop through the dependencies defined\n for (let i = 0; i < dependencies.length; i += 1) {\n const slot_exists =\n dependencies[i].type === \"slot\" &&\n this.has_slot(`${tag}--${dependencies[i].id}`);\n const attribute_exists =\n dependencies[i].type === \"attribute\" &&\n this.getAttribute(`${prefix}${dependencies[i].id}`);\n // If the type is slot, check that it exists OR\n // if the type is an attribute, check if the attribute is defined\n if (slot_exists || attribute_exists) {\n // If the slot does exist, add the attribute with the default value\n hasDependency = true;\n // Exit the loop\n break;\n }\n }\n // Return a boolean if the dependency exists\n return hasDependency;\n }\n\n _queueAction(action) {\n this._queue.push(action);\n }\n\n _processQueue() {\n this._queue.forEach(action => {\n this[`_${action.type}`](action.data);\n });\n\n this._queue = [];\n }\n\n _setProperty({ name, value }) {\n this[name] = value;\n }\n\n static var(name, element = document.body) {\n return window\n .getComputedStyle(element)\n .getPropertyValue(name)\n .trim();\n }\n\n var(name) {\n return PFElement.var(name, this);\n }\n\n render() {\n this.shadowRoot.innerHTML = \"\";\n this.template.innerHTML = this.html;\n\n if (window.ShadyCSS) {\n window.ShadyCSS.prepareTemplate(this.template, this.tag);\n }\n\n this.shadowRoot.appendChild(this.template.content.cloneNode(true));\n }\n\n log(...msgs) {\n PFElement.log(`[${this.tag}]`, ...msgs);\n }\n}\n\nautoReveal(PFElement.log);\n\nexport default PFElement;\n//# sourceMappingURL=pfelement.js.map\n"],"names":["logger","handleWebComponentsReady","window","document","body","removeAttribute","prefix","PFElement","HTMLElement","[object Object]","pfe","customElements","define","tag","preference","_debugLog","msgs","debugLog","console","log","PfeTypes","Container","Content","Combo","pfeType","this","getAttribute","value","setAttribute","name","querySelector","querySelectorAll","pfeClass","type","delayRender","super","connected","_pfeClass","props","properties","_queue","template","createElement","attachShadow","mode","_queueAction","data","render","ShadyCSS","styleElement","classList","add","_mapSchemaToProperties","length","_processQueue","attr","oldVal","newVal","cascadingAttributes","cascadeTo","_copyAttribute","to","recipients","shadowRoot","fname","node","Object","keys","forEach","hasAttribute","default","dependency_exists","_hasDependency","options","no_dependencies","dependencies","opts","hasDependency","i","slot_exists","has_slot","id","attribute_exists","action","push","element","getComputedStyle","getPropertyValue","trim","var","innerHTML","html","prepareTemplate","appendChild","content","cloneNode","logFunction","polyfillPresent","WebComponents","polyfillReady","ready","addEventListener","autoReveal"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfelement/pfelement.umd.js b/elements/pfelement/pfelement.umd.js new file mode 100644 index 0000000000..43aca19308 --- /dev/null +++ b/elements/pfelement/pfelement.umd.js @@ -0,0 +1,441 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : + typeof define === 'function' && define.amd ? define(factory) : + (global.PFElement = factory()); +}(this, (function () { 'use strict'; + + var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { + return typeof obj; + } : function (obj) { + return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }; + + 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; + }; + + 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); + } + }; + + /* + * Copyright 2019 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 logger = function logger() { + return null; + }; + + function reveal() { + logger("[reveal] elements ready, revealing the body"); + window.document.body.removeAttribute("unresolved"); + } + + function autoReveal(logFunction) { + logger = logFunction; + // If Web Components are already ready, run the handler right away. If they + // are not yet ready, wait. + // + // see https://github.com/github/webcomponentsjs#webcomponents-loaderjs for + // info about web component readiness events + var polyfillPresent = window.WebComponents; + var polyfillReady = polyfillPresent && window.WebComponents.ready; + + if (!polyfillPresent || polyfillReady) { + handleWebComponentsReady(); + } else { + window.addEventListener("WebComponentsReady", handleWebComponentsReady); + } + } + + function handleWebComponentsReady() { + logger("[reveal] web components ready"); + reveal(); + } + + /* + * Copyright 2019 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 prefix = "pfe-"; + + var PFElement = function (_HTMLElement) { + inherits(PFElement, _HTMLElement); + createClass(PFElement, [{ + key: "has_slot", + + + // Returns a single element assigned to that slot; if multiple, it returns the first + value: function has_slot(name) { + return this.querySelector("[slot='" + name + "']"); + } + + // Returns an array with all elements assigned to that slot + + }, { + key: "has_slots", + value: function has_slots(name) { + return [].concat(toConsumableArray(this.querySelectorAll("[slot='" + name + "']"))); + } + }, { + key: "pfeType", + get: function get$$1() { + return this.getAttribute(prefix + "type"); + }, + set: function set$$1(value) { + this.setAttribute(prefix + "type", value); + } + }], [{ + key: "create", + value: function create(pfe) { + window.customElements.define(pfe.tag, pfe); + } + }, { + key: "debugLog", + value: function debugLog() { + var preference = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; + + if (preference !== null) { + PFElement._debugLog = !!preference; + } + return PFElement._debugLog; + } + }, { + key: "log", + value: function log() { + if (PFElement.debugLog()) { + var _console; + + (_console = console).log.apply(_console, arguments); + } + } + }, { + key: "PfeTypes", + get: function get$$1() { + return { + Container: "container", + Content: "content", + Combo: "combo" + }; + } + }]); + + function PFElement(pfeClass) { + var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}, + _ref$type = _ref.type, + type = _ref$type === undefined ? null : _ref$type, + _ref$delayRender = _ref.delayRender, + delayRender = _ref$delayRender === undefined ? false : _ref$delayRender; + + classCallCheck(this, PFElement); + + var _this = possibleConstructorReturn(this, (PFElement.__proto__ || Object.getPrototypeOf(PFElement)).call(this)); + + _this.connected = false; + _this._pfeClass = pfeClass; + _this.tag = pfeClass.tag; + _this.props = pfeClass.properties; + _this._queue = []; + _this.template = document.createElement("template"); + + _this.attachShadow({ mode: "open" }); + + if (type) { + _this._queueAction({ + type: "setProperty", + data: { + name: "pfeType", + value: type + } + }); + } + + if (!delayRender) { + _this.render(); + } + return _this; + } + + createClass(PFElement, [{ + key: "connectedCallback", + value: function connectedCallback() { + this.connected = true; + + if (window.ShadyCSS) { + window.ShadyCSS.styleElement(this); + } + + this.classList.add("PFElement"); + + if (_typeof(this.props) === "object") { + this._mapSchemaToProperties(this.tag, this.props); + } + + if (this._queue.length) { + this._processQueue(); + } + } + }, { + key: "disconnectedCallback", + value: function disconnectedCallback() { + this.connected = false; + } + }, { + key: "attributeChangedCallback", + value: function attributeChangedCallback(attr, oldVal, newVal) { + if (!this._pfeClass.cascadingAttributes) { + return; + } + + var cascadeTo = this._pfeClass.cascadingAttributes[attr]; + if (cascadeTo) { + this._copyAttribute(attr, cascadeTo); + } + } + }, { + key: "_copyAttribute", + value: function _copyAttribute(name, to) { + var recipients = [].concat(toConsumableArray(this.querySelectorAll(to)), toConsumableArray(this.shadowRoot.querySelectorAll(to))); + var value = this.getAttribute(name); + var fname = value == null ? "removeAttribute" : "setAttribute"; + var _iteratorNormalCompletion = true; + var _didIteratorError = false; + var _iteratorError = undefined; + + try { + for (var _iterator = recipients[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { + var node = _step.value; + + node[fname](name, value); + } + } catch (err) { + _didIteratorError = true; + _iteratorError = err; + } finally { + try { + if (!_iteratorNormalCompletion && _iterator.return) { + _iterator.return(); + } + } finally { + if (_didIteratorError) { + throw _iteratorError; + } + } + } + } + + // Map the imported properties json to real props on the element + // @notice static getter of properties is built via tooling + // to edit modify src/element.json + + }, { + key: "_mapSchemaToProperties", + value: function _mapSchemaToProperties(tag, properties) { + var _this2 = this; + + // Loop over the properties provided by the schema + Object.keys(properties).forEach(function (attr) { + var data = properties[attr]; + // Set the attribute's property equal to the schema input + _this2[attr] = data; + // Initialize the value to null + _this2[attr].value = null; + + // If the attribute exists on the host + if (_this2.hasAttribute("" + prefix + attr)) { + // Set property value based on the existing attribute + _this2[attr].value = _this2.getAttribute("" + prefix + attr); + } + // Otherwise, look for a default and use that instead + else if (data.default) { + var dependency_exists = _this2._hasDependency(tag, data.options); + var no_dependencies = !data.options || data.options && !data.options.dependencies.length; + // If the dependency exists or there are no dependencies, set the default + if (dependency_exists || no_dependencies) { + _this2.setAttribute("" + prefix + attr, data.default); + _this2[attr].value = data.default; + } + } + }); + } + + // Test whether expected dependencies exist + + }, { + key: "_hasDependency", + value: function _hasDependency(tag, opts) { + // Get any possible dependencies for this attribute to exist + var dependencies = opts ? opts.dependencies : []; + // Initialize the dependency return value + var hasDependency = false; + // Check that dependent item exists + // Loop through the dependencies defined + for (var i = 0; i < dependencies.length; i += 1) { + var slot_exists = dependencies[i].type === "slot" && this.has_slot(tag + "--" + dependencies[i].id); + var attribute_exists = dependencies[i].type === "attribute" && this.getAttribute("" + prefix + dependencies[i].id); + // If the type is slot, check that it exists OR + // if the type is an attribute, check if the attribute is defined + if (slot_exists || attribute_exists) { + // If the slot does exist, add the attribute with the default value + hasDependency = true; + // Exit the loop + break; + } + } + // Return a boolean if the dependency exists + return hasDependency; + } + }, { + key: "_queueAction", + value: function _queueAction(action) { + this._queue.push(action); + } + }, { + key: "_processQueue", + value: function _processQueue() { + var _this3 = this; + + this._queue.forEach(function (action) { + _this3["_" + action.type](action.data); + }); + + this._queue = []; + } + }, { + key: "_setProperty", + value: function _setProperty(_ref2) { + var name = _ref2.name, + value = _ref2.value; + + this[name] = value; + } + }, { + key: "var", + value: function _var(name) { + return PFElement.var(name, this); + } + }, { + key: "render", + value: function render() { + this.shadowRoot.innerHTML = ""; + this.template.innerHTML = this.html; + + if (window.ShadyCSS) { + window.ShadyCSS.prepareTemplate(this.template, this.tag); + } + + this.shadowRoot.appendChild(this.template.content.cloneNode(true)); + } + }, { + key: "log", + value: function log() { + for (var _len = arguments.length, msgs = Array(_len), _key = 0; _key < _len; _key++) { + msgs[_key] = arguments[_key]; + } + + PFElement.log.apply(PFElement, ["[" + this.tag + "]"].concat(msgs)); + } + }], [{ + key: "var", + value: function _var(name) { + var element = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document.body; + + return window.getComputedStyle(element).getPropertyValue(name).trim(); + } + }]); + return PFElement; + }(HTMLElement); + + autoReveal(PFElement.log); + + return PFElement; + +}))); +//# sourceMappingURL=pfelement.umd.js.map diff --git a/elements/pfelement/pfelement.umd.js.map b/elements/pfelement/pfelement.umd.js.map new file mode 100644 index 0000000000..7a9087134f --- /dev/null +++ b/elements/pfelement/pfelement.umd.js.map @@ -0,0 +1 @@ +{"version":3,"file":"pfelement.umd.js","sources":["pfelement.js"],"sourcesContent":["/*\n * Copyright 2019 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\nlet logger = () => null;\n\nfunction reveal() {\n logger(`[reveal] elements ready, revealing the body`);\n window.document.body.removeAttribute(\"unresolved\");\n}\n\nfunction autoReveal(logFunction) {\n logger = logFunction;\n // If Web Components are already ready, run the handler right away. If they\n // are not yet ready, wait.\n //\n // see https://github.com/github/webcomponentsjs#webcomponents-loaderjs for\n // info about web component readiness events\n const polyfillPresent = window.WebComponents;\n const polyfillReady = polyfillPresent && window.WebComponents.ready;\n\n if (!polyfillPresent || polyfillReady) {\n handleWebComponentsReady();\n } else {\n window.addEventListener(\"WebComponentsReady\", handleWebComponentsReady);\n }\n}\n\nfunction handleWebComponentsReady() {\n logger(\"[reveal] web components ready\");\n reveal();\n}\n\n/*\n * Copyright 2019 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*/\nconst prefix = \"pfe-\";\n\nclass PFElement extends HTMLElement {\n static create(pfe) {\n window.customElements.define(pfe.tag, pfe);\n }\n\n static debugLog(preference = null) {\n if (preference !== null) {\n PFElement._debugLog = !!preference;\n }\n return PFElement._debugLog;\n }\n\n static log(...msgs) {\n if (PFElement.debugLog()) {\n console.log(...msgs);\n }\n }\n\n static get PfeTypes() {\n return {\n Container: \"container\",\n Content: \"content\",\n Combo: \"combo\"\n };\n }\n\n get pfeType() {\n return this.getAttribute(`${prefix}type`);\n }\n\n set pfeType(value) {\n this.setAttribute(`${prefix}type`, value);\n }\n\n // Returns a single element assigned to that slot; if multiple, it returns the first\n has_slot(name) {\n return this.querySelector(`[slot='${name}']`);\n }\n\n // Returns an array with all elements assigned to that slot\n has_slots(name) {\n return [...this.querySelectorAll(`[slot='${name}']`)];\n }\n\n constructor(pfeClass, { type = null, delayRender = false } = {}) {\n super();\n\n this.connected = false;\n this._pfeClass = pfeClass;\n this.tag = pfeClass.tag;\n this.props = pfeClass.properties;\n this._queue = [];\n this.template = document.createElement(\"template\");\n\n this.attachShadow({ mode: \"open\" });\n\n if (type) {\n this._queueAction({\n type: \"setProperty\",\n data: {\n name: \"pfeType\",\n value: type\n }\n });\n }\n\n if (!delayRender) {\n this.render();\n }\n }\n\n connectedCallback() {\n this.connected = true;\n\n if (window.ShadyCSS) {\n window.ShadyCSS.styleElement(this);\n }\n\n this.classList.add(\"PFElement\");\n\n if (typeof this.props === \"object\") {\n this._mapSchemaToProperties(this.tag, this.props);\n }\n\n if (this._queue.length) {\n this._processQueue();\n }\n }\n\n disconnectedCallback() {\n this.connected = false;\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n if (!this._pfeClass.cascadingAttributes) {\n return;\n }\n\n const cascadeTo = this._pfeClass.cascadingAttributes[attr];\n if (cascadeTo) {\n this._copyAttribute(attr, cascadeTo);\n }\n }\n\n _copyAttribute(name, to) {\n const recipients = [\n ...this.querySelectorAll(to),\n ...this.shadowRoot.querySelectorAll(to)\n ];\n const value = this.getAttribute(name);\n const fname = value == null ? \"removeAttribute\" : \"setAttribute\";\n for (const node of recipients) {\n node[fname](name, value);\n }\n }\n\n // Map the imported properties json to real props on the element\n // @notice static getter of properties is built via tooling\n // to edit modify src/element.json\n _mapSchemaToProperties(tag, properties) {\n // Loop over the properties provided by the schema\n Object.keys(properties).forEach(attr => {\n let data = properties[attr];\n // Set the attribute's property equal to the schema input\n this[attr] = data;\n // Initialize the value to null\n this[attr].value = null;\n\n // If the attribute exists on the host\n if (this.hasAttribute(`${prefix}${attr}`)) {\n // Set property value based on the existing attribute\n this[attr].value = this.getAttribute(`${prefix}${attr}`);\n }\n // Otherwise, look for a default and use that instead\n else if (data.default) {\n const dependency_exists = this._hasDependency(tag, data.options);\n const no_dependencies =\n !data.options || (data.options && !data.options.dependencies.length);\n // If the dependency exists or there are no dependencies, set the default\n if (dependency_exists || no_dependencies) {\n this.setAttribute(`${prefix}${attr}`, data.default);\n this[attr].value = data.default;\n }\n }\n });\n }\n\n // Test whether expected dependencies exist\n _hasDependency(tag, opts) {\n // Get any possible dependencies for this attribute to exist\n let dependencies = opts ? opts.dependencies : [];\n // Initialize the dependency return value\n let hasDependency = false;\n // Check that dependent item exists\n // Loop through the dependencies defined\n for (let i = 0; i < dependencies.length; i += 1) {\n const slot_exists =\n dependencies[i].type === \"slot\" &&\n this.has_slot(`${tag}--${dependencies[i].id}`);\n const attribute_exists =\n dependencies[i].type === \"attribute\" &&\n this.getAttribute(`${prefix}${dependencies[i].id}`);\n // If the type is slot, check that it exists OR\n // if the type is an attribute, check if the attribute is defined\n if (slot_exists || attribute_exists) {\n // If the slot does exist, add the attribute with the default value\n hasDependency = true;\n // Exit the loop\n break;\n }\n }\n // Return a boolean if the dependency exists\n return hasDependency;\n }\n\n _queueAction(action) {\n this._queue.push(action);\n }\n\n _processQueue() {\n this._queue.forEach(action => {\n this[`_${action.type}`](action.data);\n });\n\n this._queue = [];\n }\n\n _setProperty({ name, value }) {\n this[name] = value;\n }\n\n static var(name, element = document.body) {\n return window\n .getComputedStyle(element)\n .getPropertyValue(name)\n .trim();\n }\n\n var(name) {\n return PFElement.var(name, this);\n }\n\n render() {\n this.shadowRoot.innerHTML = \"\";\n this.template.innerHTML = this.html;\n\n if (window.ShadyCSS) {\n window.ShadyCSS.prepareTemplate(this.template, this.tag);\n }\n\n this.shadowRoot.appendChild(this.template.content.cloneNode(true));\n }\n\n log(...msgs) {\n PFElement.log(`[${this.tag}]`, ...msgs);\n }\n}\n\nautoReveal(PFElement.log);\n\nexport default PFElement;\n//# sourceMappingURL=pfelement.js.map\n"],"names":["logger","reveal","window","document","body","removeAttribute","autoReveal","logFunction","polyfillPresent","WebComponents","polyfillReady","ready","handleWebComponentsReady","addEventListener","prefix","PFElement","name","querySelector","querySelectorAll","getAttribute","value","setAttribute","pfe","customElements","define","tag","preference","_debugLog","debugLog","log","Container","Content","Combo","pfeClass","type","delayRender","connected","_pfeClass","props","properties","_queue","template","createElement","attachShadow","mode","_queueAction","data","render","ShadyCSS","styleElement","classList","add","babelHelpers.typeof","_mapSchemaToProperties","length","_processQueue","attr","oldVal","newVal","cascadingAttributes","cascadeTo","_copyAttribute","to","recipients","shadowRoot","fname","node","Object","keys","forEach","hasAttribute","default","dependency_exists","_hasDependency","options","no_dependencies","dependencies","opts","hasDependency","i","slot_exists","has_slot","id","attribute_exists","action","push","var","innerHTML","html","prepareTemplate","appendChild","content","cloneNode","msgs","element","getComputedStyle","getPropertyValue","trim","HTMLElement"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfelement/pfelement.umd.min.js b/elements/pfelement/pfelement.umd.min.js new file mode 100644 index 0000000000..e84c3d40ac --- /dev/null +++ b/elements/pfelement/pfelement.umd.min.js @@ -0,0 +1,2 @@ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.PFElement=t()}(this,function(){"use strict";var t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n=function(){function o(e,t){for(var n=0;n null;\n\nfunction reveal() {\n logger(`[reveal] elements ready, revealing the body`);\n window.document.body.removeAttribute(\"unresolved\");\n}\n\nfunction autoReveal(logFunction) {\n logger = logFunction;\n // If Web Components are already ready, run the handler right away. If they\n // are not yet ready, wait.\n //\n // see https://github.com/github/webcomponentsjs#webcomponents-loaderjs for\n // info about web component readiness events\n const polyfillPresent = window.WebComponents;\n const polyfillReady = polyfillPresent && window.WebComponents.ready;\n\n if (!polyfillPresent || polyfillReady) {\n handleWebComponentsReady();\n } else {\n window.addEventListener(\"WebComponentsReady\", handleWebComponentsReady);\n }\n}\n\nfunction handleWebComponentsReady() {\n logger(\"[reveal] web components ready\");\n reveal();\n}\n\n/*\n * Copyright 2019 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*/\nconst prefix = \"pfe-\";\n\nclass PFElement extends HTMLElement {\n static create(pfe) {\n window.customElements.define(pfe.tag, pfe);\n }\n\n static debugLog(preference = null) {\n if (preference !== null) {\n PFElement._debugLog = !!preference;\n }\n return PFElement._debugLog;\n }\n\n static log(...msgs) {\n if (PFElement.debugLog()) {\n console.log(...msgs);\n }\n }\n\n static get PfeTypes() {\n return {\n Container: \"container\",\n Content: \"content\",\n Combo: \"combo\"\n };\n }\n\n get pfeType() {\n return this.getAttribute(`${prefix}type`);\n }\n\n set pfeType(value) {\n this.setAttribute(`${prefix}type`, value);\n }\n\n // Returns a single element assigned to that slot; if multiple, it returns the first\n has_slot(name) {\n return this.querySelector(`[slot='${name}']`);\n }\n\n // Returns an array with all elements assigned to that slot\n has_slots(name) {\n return [...this.querySelectorAll(`[slot='${name}']`)];\n }\n\n constructor(pfeClass, { type = null, delayRender = false } = {}) {\n super();\n\n this.connected = false;\n this._pfeClass = pfeClass;\n this.tag = pfeClass.tag;\n this.props = pfeClass.properties;\n this._queue = [];\n this.template = document.createElement(\"template\");\n\n this.attachShadow({ mode: \"open\" });\n\n if (type) {\n this._queueAction({\n type: \"setProperty\",\n data: {\n name: \"pfeType\",\n value: type\n }\n });\n }\n\n if (!delayRender) {\n this.render();\n }\n }\n\n connectedCallback() {\n this.connected = true;\n\n if (window.ShadyCSS) {\n window.ShadyCSS.styleElement(this);\n }\n\n this.classList.add(\"PFElement\");\n\n if (typeof this.props === \"object\") {\n this._mapSchemaToProperties(this.tag, this.props);\n }\n\n if (this._queue.length) {\n this._processQueue();\n }\n }\n\n disconnectedCallback() {\n this.connected = false;\n }\n\n attributeChangedCallback(attr, oldVal, newVal) {\n if (!this._pfeClass.cascadingAttributes) {\n return;\n }\n\n const cascadeTo = this._pfeClass.cascadingAttributes[attr];\n if (cascadeTo) {\n this._copyAttribute(attr, cascadeTo);\n }\n }\n\n _copyAttribute(name, to) {\n const recipients = [\n ...this.querySelectorAll(to),\n ...this.shadowRoot.querySelectorAll(to)\n ];\n const value = this.getAttribute(name);\n const fname = value == null ? \"removeAttribute\" : \"setAttribute\";\n for (const node of recipients) {\n node[fname](name, value);\n }\n }\n\n // Map the imported properties json to real props on the element\n // @notice static getter of properties is built via tooling\n // to edit modify src/element.json\n _mapSchemaToProperties(tag, properties) {\n // Loop over the properties provided by the schema\n Object.keys(properties).forEach(attr => {\n let data = properties[attr];\n // Set the attribute's property equal to the schema input\n this[attr] = data;\n // Initialize the value to null\n this[attr].value = null;\n\n // If the attribute exists on the host\n if (this.hasAttribute(`${prefix}${attr}`)) {\n // Set property value based on the existing attribute\n this[attr].value = this.getAttribute(`${prefix}${attr}`);\n }\n // Otherwise, look for a default and use that instead\n else if (data.default) {\n const dependency_exists = this._hasDependency(tag, data.options);\n const no_dependencies =\n !data.options || (data.options && !data.options.dependencies.length);\n // If the dependency exists or there are no dependencies, set the default\n if (dependency_exists || no_dependencies) {\n this.setAttribute(`${prefix}${attr}`, data.default);\n this[attr].value = data.default;\n }\n }\n });\n }\n\n // Test whether expected dependencies exist\n _hasDependency(tag, opts) {\n // Get any possible dependencies for this attribute to exist\n let dependencies = opts ? opts.dependencies : [];\n // Initialize the dependency return value\n let hasDependency = false;\n // Check that dependent item exists\n // Loop through the dependencies defined\n for (let i = 0; i < dependencies.length; i += 1) {\n const slot_exists =\n dependencies[i].type === \"slot\" &&\n this.has_slot(`${tag}--${dependencies[i].id}`);\n const attribute_exists =\n dependencies[i].type === \"attribute\" &&\n this.getAttribute(`${prefix}${dependencies[i].id}`);\n // If the type is slot, check that it exists OR\n // if the type is an attribute, check if the attribute is defined\n if (slot_exists || attribute_exists) {\n // If the slot does exist, add the attribute with the default value\n hasDependency = true;\n // Exit the loop\n break;\n }\n }\n // Return a boolean if the dependency exists\n return hasDependency;\n }\n\n _queueAction(action) {\n this._queue.push(action);\n }\n\n _processQueue() {\n this._queue.forEach(action => {\n this[`_${action.type}`](action.data);\n });\n\n this._queue = [];\n }\n\n _setProperty({ name, value }) {\n this[name] = value;\n }\n\n static var(name, element = document.body) {\n return window\n .getComputedStyle(element)\n .getPropertyValue(name)\n .trim();\n }\n\n var(name) {\n return PFElement.var(name, this);\n }\n\n render() {\n this.shadowRoot.innerHTML = \"\";\n this.template.innerHTML = this.html;\n\n if (window.ShadyCSS) {\n window.ShadyCSS.prepareTemplate(this.template, this.tag);\n }\n\n this.shadowRoot.appendChild(this.template.content.cloneNode(true));\n }\n\n log(...msgs) {\n PFElement.log(`[${this.tag}]`, ...msgs);\n }\n}\n\nautoReveal(PFElement.log);\n\nexport default PFElement;\n//# sourceMappingURL=pfelement.js.map\n"],"names":["logger","handleWebComponentsReady","document","body","removeAttribute","prefix","PFElement","pfeClass","type","delayRender","connected","_pfeClass","tag","props","properties","_queue","template","createElement","attachShadow","mode","_queueAction","render","HTMLElement","name","this","querySelector","querySelectorAll","getAttribute","value","setAttribute","pfe","customElements","define","preference","_debugLog","debugLog","log","window","ShadyCSS","styleElement","classList","add","babelHelpers.typeof","_mapSchemaToProperties","length","_processQueue","attr","oldVal","newVal","cascadingAttributes","cascadeTo","_copyAttribute","to","recipients","shadowRoot","fname","keys","forEach","data","_this2","hasAttribute","default","dependency_exists","_hasDependency","options","no_dependencies","dependencies","opts","hasDependency","i","slot_exists","has_slot","id","attribute_exists","action","push","var","innerHTML","html","prepareTemplate","appendChild","content","cloneNode","msgs","element","getComputedStyle","getPropertyValue","trim","logFunction","polyfillPresent","WebComponents","polyfillReady","ready","addEventListener","autoReveal"],"mappings":"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"} \ No newline at end of file diff --git a/elements/pfelement/reveal.js b/elements/pfelement/reveal.js new file mode 100644 index 0000000000..ef97a75db2 --- /dev/null +++ b/elements/pfelement/reveal.js @@ -0,0 +1,51 @@ +/* + * Copyright 2019 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. + * +*/ + +let logger = () => null; + +export function reveal() { + logger(`[reveal] elements ready, revealing the body`); + window.document.body.removeAttribute("unresolved"); +} + +export function autoReveal(logFunction) { + logger = logFunction; + // If Web Components are already ready, run the handler right away. If they + // are not yet ready, wait. + // + // see https://github.com/github/webcomponentsjs#webcomponents-loaderjs for + // info about web component readiness events + const polyfillPresent = window.WebComponents; + const polyfillReady = polyfillPresent && window.WebComponents.ready; + + if (!polyfillPresent || polyfillReady) { + handleWebComponentsReady(); + } else { + window.addEventListener("WebComponentsReady", handleWebComponentsReady); + } +} + +function handleWebComponentsReady() { + logger("[reveal] web components ready"); + reveal(); +} diff --git a/elements/pfelement/reveal.umd.js b/elements/pfelement/reveal.umd.js new file mode 100644 index 0000000000..ef97a75db2 --- /dev/null +++ b/elements/pfelement/reveal.umd.js @@ -0,0 +1,51 @@ +/* + * Copyright 2019 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. + * +*/ + +let logger = () => null; + +export function reveal() { + logger(`[reveal] elements ready, revealing the body`); + window.document.body.removeAttribute("unresolved"); +} + +export function autoReveal(logFunction) { + logger = logFunction; + // If Web Components are already ready, run the handler right away. If they + // are not yet ready, wait. + // + // see https://github.com/github/webcomponentsjs#webcomponents-loaderjs for + // info about web component readiness events + const polyfillPresent = window.WebComponents; + const polyfillReady = polyfillPresent && window.WebComponents.ready; + + if (!polyfillPresent || polyfillReady) { + handleWebComponentsReady(); + } else { + window.addEventListener("WebComponentsReady", handleWebComponentsReady); + } +} + +function handleWebComponentsReady() { + logger("[reveal] web components ready"); + reveal(); +} diff --git a/lerna.json b/lerna.json index 5f46ef45d9..ef24ad226c 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ "elements/*", "themes/*" ], - "version": "1.0.0-prerelease.11" + "version": "1.0.0-prerelease.13" } diff --git a/package-lock.json b/package-lock.json index 8bb5773d79..480d433bd1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14693,169 +14693,6 @@ "css-in-js-utils": "^2.0.0" } }, - "inquirer": { - "version": "6.2.2", - "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.2.2.tgz", - "integrity": "sha512-Z2rREiXA6cHRR9KBOarR3WuLlFzlIfAEIiB45ll5SSadMg7WqOh1MKEjjndfuH5ewXdixWCxqnVfGOQzPeiztA==", - "dev": true, - "requires": { - "ansi-escapes": "^3.2.0", - "chalk": "^2.4.2", - "cli-cursor": "^2.1.0", - "cli-width": "^2.0.0", - "external-editor": "^3.0.3", - "figures": "^2.0.0", - "lodash": "^4.17.11", - "mute-stream": "0.0.7", - "run-async": "^2.2.0", - "rxjs": "^6.4.0", - "string-width": "^2.1.0", - "strip-ansi": "^5.0.0", - "through": "^2.3.6" - }, - "dependencies": { - "ansi-escapes": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz", - "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==", - "dev": true - }, - "ansi-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", - "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", - "dev": true - }, - "chardet": { - "version": "0.7.0", - "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz", - "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==", - "dev": true - }, - "cli-cursor": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz", - "integrity": "sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=", - "dev": true, - "requires": { - "restore-cursor": "^2.0.0" - } - }, - "cli-width": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz", - "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=", - "dev": true - }, - "external-editor": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.0.3.tgz", - "integrity": "sha512-bn71H9+qWoOQKyZDo25mOMVpSmXROAsTJVVVYzrrtol3d4y+AsKjf4Iwl2Q+IuT0kFSQ1qo166UuIwqYq7mGnA==", - "dev": true, - "requires": { - "chardet": "^0.7.0", - "iconv-lite": "^0.4.24", - "tmp": "^0.0.33" - } - }, - "figures": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz", - "integrity": "sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=", - "dev": true, - "requires": { - "escape-string-regexp": "^1.0.5" - } - }, - "is-fullwidth-code-point": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", - "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", - "dev": true - }, - "mute-stream": { - "version": "0.0.7", - "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz", - "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=", - "dev": true - }, - "onetime": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz", - "integrity": "sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=", - "dev": true, - "requires": { - "mimic-fn": "^1.0.0" - } - }, - "restore-cursor": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz", - "integrity": "sha1-n37ih/gv0ybU/RYpI9YhKe7g368=", - "dev": true, - "requires": { - "onetime": "^2.0.0", - "signal-exit": "^3.0.2" - } - }, - "run-async": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.3.0.tgz", - "integrity": "sha1-A3GrSuC91yDUFm19/aZP96RFpsA=", - "dev": true, - "requires": { - "is-promise": "^2.1.0" - } - }, - "rxjs": { - "version": "6.4.0", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.4.0.tgz", - "integrity": "sha512-Z9Yfa11F6B9Sg/BK9MnqnQ+aQYicPLtilXBp2yUtDt2JRCE0h26d33EnfO3ZxoNxG0T92OUucP3Ct7cpfkdFfw==", - "dev": true, - "requires": { - "tslib": "^1.9.0" - } - }, - "string-width": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", - "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", - "dev": true, - "requires": { - "is-fullwidth-code-point": "^2.0.0", - "strip-ansi": "^4.0.0" - }, - "dependencies": { - "strip-ansi": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", - "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", - "dev": true, - "requires": { - "ansi-regex": "^3.0.0" - } - } - } - }, - "strip-ansi": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", - "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", - "dev": true, - "requires": { - "ansi-regex": "^4.1.0" - }, - "dependencies": { - "ansi-regex": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", - "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", - "dev": true - } - } - } - } - }, "insert-css": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/insert-css/-/insert-css-2.0.0.tgz", @@ -18515,6 +18352,11 @@ "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", "dev": true }, + "numeral": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/numeral/-/numeral-2.0.6.tgz", + "integrity": "sha1-StCAk21EPCVhrtnyGX7//iX05QY=" + }, "oauth-sign": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",