npm - @nanoporetech-digital/components - Versions diffs - 3.13.0 → 3.14.0 - Mend

@nanoporetech-digital/components 3.13.0 → 3.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (109) hide show

package/dist/components/nano-hero.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { d as defineCustomElement$4 } from './img.js';
 import { d as defineCustomElement$3 } from './resize-observe.js';
 import { d as defineCustomElement$2 } from './skeleton.js';
-const heroCss = ":host {\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n/**\nTODO - as soon as container queries hits everywhere, strip out reliance on nano-grid breakpoints\n**/\n:host {\n  /**\n   * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n   * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n   * @prop --theme-color: Text color. Default depends on theme;\n   * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #90c6e7;\n   * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n   * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n   * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n   * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n   * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;\n  */\n  display: block;\n  --nano-loader-base: #4a4a4a;\n  --nano-loader-tint: #7d7d7d;\n  --theme-color: #fff;\n  --theme-tint-color: #90c6e7;\n  --scrim-color: 0, 0, 0;\n  --scrim-direction: 90deg;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 0.7;\n  --padding: 0;\n  --quote-size: 1.3rem;\n  color: var(--theme-color);\n}\n\n:host(.is-xl) {\n  --quote-size: 3rem;\n}\n\n:host([theme=light]) {\n  --nano-loader-base: #fff;\n  --nano-loader-tint: white;\n  --theme-color: #4a4a4a;\n  --scrim-color: 255, 255, 255;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 1;\n  --scrim-direction: 270deg;\n  color: var(--theme-color);\n}\n:host([theme=light]) .hero__primary-content {\n  --color: #4a4a4a;\n}\n\n.hero {\n  position: relative;\n}\n.hero--rtl {\n  --scrim-direction: 270deg;\n}\n.hero--secondary:not(.hero--iconbox) {\n  --scrim-direction: 0deg;\n}\n.hero__bg-wrap {\n  overflow: hidden;\n}\n.hero__bg-slot {\n  position: absolute;\n  inset: 0;\n}\n.hero__ctas {\n  display: flex;\n  justify-content: flex-end;\n  padding-block: 32px 0;\n  padding-inline: 32px;\n  -webkit-margin-after: -64px;\n          margin-block-end: -64px;\n  position: relative;\n  z-index: 1;\n}\n@media (max-width: 52em) {\n  .hero__ctas {\n    display: none;\n  }\n}\n@media (max-width: 58em) {\n  .hero__ctas {\n    -webkit-margin-after: -48px;\n            margin-block-end: -48px;\n  }\n}\n.hero__ctas ::slotted(a.button[slot=secondary-ctas]) {\n  padding-block: 0.25rem !important;\n  padding-inline: 0.5rem !important;\n  font-size: 0.875rem !important;\n  margin-block: 0 !important;\n  margin-inline: 0.25rem !important;\n}\n.hero__img {\n  display: block;\n  container-type: inline-size;\n  --padding: inherit;\n}\n.hero__breadcrumbs {\n  display: none;\n  margin-block: 20px 0;\n  margin-inline: 14px;\n  line-height: 14px;\n}\n.hero--breadcrumb .hero__breadcrumbs {\n  display: block;\n}\n.is-xl .hero__breadcrumbs {\n  margin-block: 0;\n  margin-inline: 50px;\n  max-inline-size: 50%;\n}\n@container (min-width: 800px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 50px;\n    max-inline-size: 50%;\n  }\n}\n.is-xxl .hero__breadcrumbs {\n  margin-block: 0;\n  margin-inline: 83px;\n}\n@container (min-width: 900px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 83px;\n  }\n}\n.hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n  font-size: 0.85rem;\n  text-transform: uppercase;\n  letter-spacing: 1.5px;\n  font-weight: 600;\n  font-stretch: 125%;\n  display: inline-block;\n  -webkit-margin-after: 16px;\n          margin-block-end: 16px;\n  position: relative;\n  z-index: 2;\n}\n.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n  text-shadow: 1px 1px rgba(0, 0, 0, 0.15);\n}\n.hero__breadcrumbs ::slotted(a[slot=breadcrumb]) {\n  color: var(--theme-tint-color) !important;\n  cursor: pointer;\n}\n.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb]) {\n  color: var(--theme-color);\n  position: relative;\n  margin-block: 0;\n  margin-inline: 0.5rem;\n  display: inline-block;\n}\n.hero__scrim {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  background: linear-gradient(var(--scrim-direction), rgb(var(--scrim-color)/var(--scrim-opacity-from)) 0%, rgb(var(--scrim-color)/var(--scrim-opacity-to)) 100%);\n}\n.hero--scrim .hero__scrim {\n  background: none;\n}\n.hero__content {\n  max-inline-size: 1440px;\n  display: block;\n  --grid-row-gap: 0;\n  margin-block: 0;\n  margin-inline: auto;\n  position: relative;\n}\n.hero__content.is-xl {\n  -webkit-margin-before: 50px;\n          margin-block-start: 50px;\n  max-inline-size: 1540px;\n}\n@container (min-width: 800px) {\n  .hero__content {\n    margin-block: 50px 0 !important;\n    max-inline-size: 1540px !important;\n  }\n}\n.hero__content.is-xxl {\n  -webkit-margin-before: 83px;\n          margin-block-start: 83px;\n  max-inline-size: 1606px;\n}\n@container (min-width: 900px) {\n  .hero__content {\n    margin-block: 83px 0 !important;\n    max-inline-size: 1606px !important;\n  }\n}\n.hero__primary {\n  margin: 16px;\n}\n.hero--breadcrumb .hero__primary {\n  margin-block: 0;\n  margin-inline: 16px;\n}\n.hero--backbtn .hero__primary {\n  -webkit-margin-start: 0;\n          margin-inline-start: 0;\n}\n.hero__primary ::slotted(nano-icon-button[slot=back-btn]) {\n  font-size: 2rem;\n}\n.is-xl .hero__primary {\n  margin-block: 0 50px;\n  margin-inline: 50px 0;\n}\n.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn]) {\n  margin-block: 0;\n  margin-inline: -3rem 0;\n}\n@container (min-width: 800px) {\n  .hero__primary {\n    margin-block: 0 50px !important;\n    margin-inline: 50px 0 !important;\n  }\n  .hero__primary ::slotted(nano-icon-button[slot=back-btn]) {\n    margin-block: 0 !important;\n    margin-inline: -3rem 0 !important;\n  }\n}\n.is-xxl .hero__primary {\n  margin-block: 0 83px !important;\n  margin-inline: 83px 0 !important;\n}\n@container (min-width: 900px) {\n  .hero__primary {\n    margin-block: 0 83px !important;\n    margin-inline: 83px 0 !important;\n  }\n}\n.hero__primary-content {\n  max-inline-size: 45rem;\n  --color: #fff;\n  display: flex;\n}\n.hero--backbtn .hero__primary-content > div {\n  padding-block: 10px 0;\n  padding-inline: 0;\n}\n.hero__primary-content ::slotted(h1[slot=primary-content]) {\n  line-height: 26px !important;\n  margin-block: 0 18px !important;\n  font-size: 2rem !important;\n}\n.is-xl .hero__primary-content ::slotted(h1[slot=primary-content]) {\n  line-height: 31px !important;\n  -webkit-margin-after: 30px !important;\n          margin-block-end: 30px !important;\n}\n.is-xl .hero__primary-content ::slotted(.button[slot=primary-content]) {\n  -webkit-margin-before: 20px !important;\n          margin-block-start: 20px !important;\n}\n@container (min-width: 800px) {\n  .hero__primary-content ::slotted(h1[slot=primary-content]) {\n    line-height: 31px !important;\n    -webkit-margin-after: 30px !important;\n            margin-block-end: 30px !important;\n  }\n  .hero__primary-content ::slotted(.button[slot=primary-content]) {\n    -webkit-margin-before: 20px !important;\n            margin-block-start: 20px !important;\n  }\n}\n.hero__secondary {\n  display: none;\n  block-size: 100%;\n  padding-block: 0 20px;\n  padding-inline: 14px;\n}\n.hero--secondary .hero__secondary {\n  display: flex;\n  align-items: center;\n}\n.is-xl .hero__secondary {\n  padding-block: 0 50px;\n  padding-inline: 50px;\n  justify-content: flex-end;\n}\n@container (min-width: 800px) {\n  .hero__secondary {\n    padding-block: 0 50px;\n    padding-inline: 50px;\n    justify-content: flex-end;\n  }\n}\n.is-xxl .hero__secondary {\n  padding-block: 0 83px;\n  padding-inline: 83px;\n}\n@container (min-width: 900px) {\n  .hero__secondary {\n    padding-block: 0 83px;\n    padding-inline: 83px;\n  }\n}\n.hero__icon-box {\n  background: rgba(0, 0, 0, 0.7);\n  padding: 24px;\n  inline-size: 100%;\n  -webkit-margin-after: auto;\n          margin-block-end: auto;\n  display: flex;\n  flex-direction: column;\n  color: white;\n}\n.is-xl .hero__icon-box {\n  max-inline-size: 410px;\n  flex: 0 1 410px;\n}\n.hero__icon-box ::slotted([slot=icon-box-item]) {\n  --nano-color-base: var(--theme-tint-color);\n  --nano-icon-size: 32px;\n  --nano-icon-margin-end: 20px;\n  display: flex;\n  align-items: center;\n  font-size: 0.8125rem;\n  -webkit-margin-after: 20px;\n          margin-block-end: 20px;\n}\n.hero__icon-box ::slotted(.last[slot=icon-box-item]) {\n  -webkit-margin-after: 0;\n          margin-block-end: 0;\n}\n.hero__quote-content {\n  -webkit-margin-before: auto;\n          margin-block-start: auto;\n  text-align: center;\n  inline-size: 100%;\n}\n.is-xl .hero__quote-content {\n  max-inline-size: 500px;\n  flex: 0 1 500px;\n  text-align: initial;\n}\n@container (min-width: 800px) {\n  .hero__quote-content {\n    max-inline-size: 500px;\n    flex: 0 1 500px;\n    text-align: initial;\n  }\n}\n.hero__quote::before, .hero__quote::after {\n  content: '\"';\n  font-size: var(--quote-size);\n  font-weight: 700;\n  font-style: italic;\n  line-height: 0;\n  color: #abb6b8;\n  display: inline;\n  position: relative;\n}\n.hero__quote ::slotted([slot=quote]) {\n  font-size: var(--quote-size);\n  font-weight: 300;\n  font-style: italic;\n  display: inline;\n}\n.hero__quote-author {\n  text-align: end;\n  font-size: 1rem;\n  opacity: 0.8;\n}\n.hero--sub .hero__content.is-xl {\n  -webkit-margin-before: 40px;\n          margin-block-start: 40px;\n}\n.hero--sub .hero__content.is-xl .hero__primary {\n  margin-block: 0 40px;\n  margin-inline: 50px 0;\n}\n.hero--sub .hero__content.is-xl .hero__secondary {\n  padding-block: 0 50px;\n  padding-inline: 40px 50px;\n}\n.hero--sub .hero__content.is-xl ::slotted(.button[slot=primary-content]) {\n  -webkit-margin-before: 8px !important;\n          margin-block-start: 8px !important;\n}\n.hero--sub .hero__content.is-xl ::slotted(h1[slot=primary-content]) {\n  -webkit-margin-after: 18px !important;\n          margin-block-end: 18px !important;\n}\n.hero--sub .hero__content.is-xxl .hero__primary {\n  margin-block: 0 40px;\n  margin-inline: 83px 0;\n}\n.hero--sub .hero__content.is-xxl .hero__secondary {\n  padding-block: 0 83px;\n  padding-inline: 40px 83px;\n}";
+const heroCss = ":host {\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n/**\nTODO - as soon as container queries hits everywhere, strip out reliance on nano-grid breakpoints\n**/\n:host {\n  /**\n   * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n   * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n   * @prop --theme-color: Text color. Default depends on theme;\n   * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #90c6e7;\n   * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n   * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n   * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n   * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n   * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;\n  */\n  display: block;\n  --nano-loader-base: #4a4a4a;\n  --nano-loader-tint: #7d7d7d;\n  --theme-color: #fff;\n  --theme-tint-color: #90c6e7;\n  --scrim-color: 0 0 0;\n  --scrim-direction: 90deg;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 0.7;\n  --padding: 0;\n  --quote-size: 1.3rem;\n  color: var(--theme-color);\n}\n\n:host(.is-xl) {\n  --quote-size: 3rem;\n}\n\n:host([theme=light]) {\n  --nano-loader-base: #fff;\n  --nano-loader-tint: white;\n  --theme-color: #4a4a4a;\n  --scrim-color: 255 255 255;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 1;\n  --scrim-direction: 270deg;\n  color: var(--theme-color);\n}\n:host([theme=light]) .hero__primary-content {\n  --color: #4a4a4a;\n}\n\n.hero {\n  position: relative;\n}\n.hero--rtl {\n  --scrim-direction: 270deg;\n}\n.hero--secondary:not(.hero--iconbox) {\n  --scrim-direction: 0deg;\n}\n.hero__bg-wrap {\n  overflow: hidden;\n}\n.hero__bg-slot {\n  position: absolute;\n  inset: 0;\n}\n.hero__ctas {\n  display: flex;\n  justify-content: flex-end;\n  padding-block: 32px 0;\n  padding-inline: 32px;\n  -webkit-margin-after: -64px;\n          margin-block-end: -64px;\n  position: relative;\n  z-index: 1;\n}\n@media (max-width: 52em) {\n  .hero__ctas {\n    display: none;\n  }\n}\n@media (max-width: 58em) {\n  .hero__ctas {\n    -webkit-margin-after: -48px;\n            margin-block-end: -48px;\n  }\n}\n.hero__ctas ::slotted(a.button[slot=secondary-ctas]) {\n  padding-block: 0.25rem !important;\n  padding-inline: 0.5rem !important;\n  font-size: 0.875rem !important;\n  margin-block: 0 !important;\n  margin-inline: 0.25rem !important;\n}\n.hero__img {\n  display: block;\n  container-type: inline-size;\n  --padding: inherit;\n}\n.hero__breadcrumbs {\n  display: none;\n  margin-block: 20px 0;\n  margin-inline: 14px;\n  line-height: 14px;\n}\n.hero--breadcrumb .hero__breadcrumbs {\n  display: block;\n}\n.is-xl .hero__breadcrumbs {\n  margin-block: 0;\n  margin-inline: 50px;\n  max-inline-size: 50%;\n}\n@container (min-width: 800px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 50px;\n    max-inline-size: 50%;\n  }\n}\n.is-xxl .hero__breadcrumbs {\n  margin-block: 0;\n  margin-inline: 83px;\n}\n@container (min-width: 900px) {\n  .hero__breadcrumbs {\n    margin-block: 0;\n    margin-inline: 83px;\n  }\n}\n.hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n  font-size: 0.85rem;\n  text-transform: uppercase;\n  letter-spacing: 1.5px;\n  font-weight: 600;\n  font-stretch: 125%;\n  display: inline-block;\n  -webkit-margin-after: 16px;\n          margin-block-end: 16px;\n  position: relative;\n  z-index: 2;\n}\n.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb]) {\n  text-shadow: 1px 1px rgba(0, 0, 0, 0.15);\n}\n.hero__breadcrumbs ::slotted(a[slot=breadcrumb]) {\n  color: var(--theme-tint-color) !important;\n  cursor: pointer;\n}\n.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb]) {\n  color: var(--theme-color);\n  position: relative;\n  margin-block: 0;\n  margin-inline: 0.5rem;\n  display: inline-block;\n}\n.hero__scrim {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  background: linear-gradient(var(--scrim-direction), rgb(var(--scrim-color)/var(--scrim-opacity-from)) 0%, rgb(var(--scrim-color)/var(--scrim-opacity-to)) 100%);\n}\n.hero--scrim .hero__scrim {\n  background: none;\n}\n.hero__content {\n  max-inline-size: 1440px;\n  display: block;\n  --grid-row-gap: 0;\n  margin-block: 0;\n  margin-inline: auto;\n  position: relative;\n}\n.hero__content.is-xl {\n  -webkit-margin-before: 50px;\n          margin-block-start: 50px;\n  max-inline-size: 1540px;\n}\n@container (min-width: 800px) {\n  .hero__content {\n    margin-block: 50px 0 !important;\n    max-inline-size: 1540px !important;\n  }\n}\n.hero__content.is-xxl {\n  -webkit-margin-before: 83px;\n          margin-block-start: 83px;\n  max-inline-size: 1606px;\n}\n@container (min-width: 900px) {\n  .hero__content {\n    margin-block: 83px 0 !important;\n    max-inline-size: 1606px !important;\n  }\n}\n.hero__primary {\n  margin: 16px;\n}\n.hero--breadcrumb .hero__primary {\n  margin-block: 0;\n  margin-inline: 16px;\n}\n.hero--backbtn .hero__primary {\n  -webkit-margin-start: 0;\n          margin-inline-start: 0;\n}\n.hero__primary ::slotted(nano-icon-button[slot=back-btn]) {\n  font-size: 2rem;\n}\n.is-xl .hero__primary {\n  margin-block: 0 50px;\n  margin-inline: 50px 0;\n}\n.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn]) {\n  margin-block: 0;\n  margin-inline: -3rem 0;\n}\n@container (min-width: 800px) {\n  .hero__primary {\n    margin-block: 0 50px !important;\n    margin-inline: 50px 0 !important;\n  }\n  .hero__primary ::slotted(nano-icon-button[slot=back-btn]) {\n    margin-block: 0 !important;\n    margin-inline: -3rem 0 !important;\n  }\n}\n.is-xxl .hero__primary {\n  margin-block: 0 83px !important;\n  margin-inline: 83px 0 !important;\n}\n@container (min-width: 900px) {\n  .hero__primary {\n    margin-block: 0 83px !important;\n    margin-inline: 83px 0 !important;\n  }\n}\n.hero__primary-content {\n  max-inline-size: 45rem;\n  --color: #fff;\n  display: flex;\n}\n.hero--backbtn .hero__primary-content > div {\n  padding-block: 10px 0;\n  padding-inline: 0;\n}\n.hero__primary-content ::slotted(h1[slot=primary-content]) {\n  line-height: 26px !important;\n  margin-block: 0 18px !important;\n  font-size: 2rem !important;\n}\n.is-xl .hero__primary-content ::slotted(h1[slot=primary-content]) {\n  line-height: 31px !important;\n  -webkit-margin-after: 30px !important;\n          margin-block-end: 30px !important;\n}\n.is-xl .hero__primary-content ::slotted(.button[slot=primary-content]) {\n  -webkit-margin-before: 20px !important;\n          margin-block-start: 20px !important;\n}\n@container (min-width: 800px) {\n  .hero__primary-content ::slotted(h1[slot=primary-content]) {\n    line-height: 31px !important;\n    -webkit-margin-after: 30px !important;\n            margin-block-end: 30px !important;\n  }\n  .hero__primary-content ::slotted(.button[slot=primary-content]) {\n    -webkit-margin-before: 20px !important;\n            margin-block-start: 20px !important;\n  }\n}\n.hero__secondary {\n  display: none;\n  block-size: 100%;\n  padding-block: 0 20px;\n  padding-inline: 14px;\n}\n.hero--secondary .hero__secondary {\n  display: flex;\n  align-items: center;\n}\n.is-xl .hero__secondary {\n  padding-block: 0 50px;\n  padding-inline: 50px;\n  justify-content: flex-end;\n}\n@container (min-width: 800px) {\n  .hero__secondary {\n    padding-block: 0 50px;\n    padding-inline: 50px;\n    justify-content: flex-end;\n  }\n}\n.is-xxl .hero__secondary {\n  padding-block: 0 83px;\n  padding-inline: 83px;\n}\n@container (min-width: 900px) {\n  .hero__secondary {\n    padding-block: 0 83px;\n    padding-inline: 83px;\n  }\n}\n.hero__icon-box {\n  background: rgba(0, 0, 0, 0.7);\n  padding: 24px;\n  inline-size: 100%;\n  -webkit-margin-after: auto;\n          margin-block-end: auto;\n  display: flex;\n  flex-direction: column;\n  color: white;\n}\n.is-xl .hero__icon-box {\n  max-inline-size: 410px;\n  flex: 0 1 410px;\n}\n.hero__icon-box ::slotted([slot=icon-box-item]) {\n  --nano-color-base: var(--theme-tint-color);\n  --nano-icon-size: 32px;\n  --nano-icon-margin-end: 20px;\n  display: flex;\n  align-items: center;\n  font-size: 0.8125rem;\n  -webkit-margin-after: 20px;\n          margin-block-end: 20px;\n}\n.hero__icon-box ::slotted(.last[slot=icon-box-item]) {\n  -webkit-margin-after: 0;\n          margin-block-end: 0;\n}\n.hero__quote-content {\n  -webkit-margin-before: auto;\n          margin-block-start: auto;\n  text-align: center;\n  inline-size: 100%;\n}\n.is-xl .hero__quote-content {\n  max-inline-size: 500px;\n  flex: 0 1 500px;\n  text-align: initial;\n}\n@container (min-width: 800px) {\n  .hero__quote-content {\n    max-inline-size: 500px;\n    flex: 0 1 500px;\n    text-align: initial;\n  }\n}\n.hero__quote::before, .hero__quote::after {\n  content: '\"';\n  font-size: var(--quote-size);\n  font-weight: 700;\n  font-style: italic;\n  line-height: 0;\n  color: #abb6b8;\n  display: inline;\n  position: relative;\n}\n.hero__quote ::slotted([slot=quote]) {\n  font-size: var(--quote-size);\n  font-weight: 300;\n  font-style: italic;\n  display: inline;\n}\n.hero__quote-author {\n  text-align: end;\n  font-size: 1rem;\n  opacity: 0.8;\n}\n.hero--sub .hero__content.is-xl {\n  -webkit-margin-before: 40px;\n          margin-block-start: 40px;\n}\n.hero--sub .hero__content.is-xl .hero__primary {\n  margin-block: 0 40px;\n  margin-inline: 50px 0;\n}\n.hero--sub .hero__content.is-xl .hero__secondary {\n  padding-block: 0 50px;\n  padding-inline: 40px 50px;\n}\n.hero--sub .hero__content.is-xl ::slotted(.button[slot=primary-content]) {\n  -webkit-margin-before: 8px !important;\n          margin-block-start: 8px !important;\n}\n.hero--sub .hero__content.is-xl ::slotted(h1[slot=primary-content]) {\n  -webkit-margin-after: 18px !important;\n          margin-block-end: 18px !important;\n}\n.hero--sub .hero__content.is-xxl .hero__primary {\n  margin-block: 0 40px;\n  margin-inline: 83px 0;\n}\n.hero--sub .hero__content.is-xxl .hero__secondary {\n  padding-block: 0 83px;\n  padding-inline: 40px 83px;\n}";
 const Hero = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/nano-hero.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-hero.js","mappings":"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","names":[],"sources":["./src/components/hero/hero.scss?tag=nano-hero&encapsulation=shadow","./src/components/hero/hero.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n\n/\nTODO - as soon as container queries hits everywhere, strip out reliance on nano-grid breakpoints\n/\n\n:host {\n /*\n @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n * @prop --theme-color: Text color. Default depends on theme;\n * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #{map.get($colors, lightblue)};\n * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;\n /\n\n display: block;\n\n --nano-loader-base: #{map.get($colors, black)};\n --nano-loader-tint: #{lighten(map.get($colors, black), 20%)};\n --theme-color: #{map.get($colors, white)};\n --theme-tint-color: #{map.get($colors, lightblue)};\n --scrim-color: 0, 0, 0;\n --scrim-direction: 90deg;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 0.7;\n --padding: 0;\n --quote-size: 1.3rem;\n\n color: var(--theme-color);\n}\n\n:host(.is-xl) {\n --quote-size: 3rem;\n}\n\n:host([theme='light']) {\n --nano-loader-base: #{map.get($colors, white)};\n --nano-loader-tint: #{lighten(map.get($colors, white), 20%)};\n --theme-color: #{map.get($colors, black)};\n --scrim-color: 255, 255, 255;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 1;\n --scrim-direction: 270deg;\n\n color: var(--theme-color);\n\n .hero__primary-content {\n --color: #{map.get($colors, black)};\n }\n}\n\n.hero {\n position: relative;\n\n &--rtl {\n --scrim-direction: 270deg;\n }\n\n &--secondary:not(.hero--iconbox) {\n --scrim-direction: 0deg;\n }\n\n &__bg-wrap {\n overflow: hidden;\n }\n\n &__bg-slot {\n position: absolute;\n inset: 0;\n }\n\n &__ctas {\n @media (max-width: 52em) {\n display: none;\n }\n\n @media (max-width: 58em) {\n margin-block-end: -48px;\n }\n\n display: flex;\n justify-content: flex-end;\n padding-block: 32px 0;\n padding-inline: 32px;\n margin-block-end: -64px;\n position: relative;\n z-index: 1;\n\n ::slotted(a.button[slot='secondary-ctas']) {\n padding-block: 0.25rem !important;\n padding-inline: 0.5rem !important;\n font-size: 0.875rem !important;\n margin-block: 0 !important;\n margin-inline: 0.25rem !important;\n }\n }\n\n &__img {\n display: block;\n container-type: inline-size;\n\n --padding: inherit;\n }\n\n &__breadcrumbs {\n display: none;\n margin-block: 20px 0;\n margin-inline: 14px;\n line-height: 14px;\n\n .hero--breadcrumb & {\n display: block;\n }\n\n .is-xl & {\n margin-block: 0;\n margin-inline: 50px;\n max-inline-size: 50%;\n }\n\n @container (min-width: 800px) {\n margin-block: 0;\n margin-inline: 50px;\n max-inline-size: 50%;\n }\n\n .is-xxl & {\n margin-block: 0;\n margin-inline: 83px;\n }\n\n @container (min-width: 900px) {\n margin-block: 0;\n margin-inline: 83px;\n }\n\n ::slotted([slot='breadcrumb']) {\n font-size: 0.85rem;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n font-weight: 600;\n font-stretch: 125%;\n display: inline-block;\n margin-block-end: 16px;\n position: relative;\n z-index: 2;\n\n .hero--hasbg & {\n text-shadow: 1px 1px rgb(0 0 0 / 15%);\n }\n }\n\n ::slotted(a[slot='breadcrumb']) {\n color: var(--theme-tint-color) !important;\n cursor: pointer;\n }\n\n ::slotted(.slash[slot='breadcrumb']) {\n color: var(--theme-color);\n position: relative;\n margin-block: 0;\n margin-inline: 0.5rem;\n display: inline-block;\n }\n }\n\n &__scrim {\n position: absolute;\n inset: 0;\n z-index: 0;\n background:\n linear-gradient(\n var(--scrim-direction),\n rgb(var(--scrim-color) / var(--scrim-opacity-from)) 0%,\n rgb(var(--scrim-color) / var(--scrim-opacity-to)) 100%\n );\n\n .hero--scrim & {\n background: none;\n }\n }\n\n &__content {\n max-inline-size: 1440px;\n display: block;\n\n --grid-row-gap: 0;\n\n margin-block: 0;\n margin-inline: auto;\n position: relative;\n\n &.is-xl {\n margin-block-start: 50px;\n max-inline-size: 1540px;\n }\n\n @container (min-width: 800px) {\n margin-block: 50px 0 !important;\n max-inline-size: 1540px !important;\n }\n\n &.is-xxl {\n margin-block-start: 83px;\n max-inline-size: 1606px;\n }\n\n @container (min-width: 900px) {\n margin-block: 83px 0 !important;\n max-inline-size: 1606px !important;\n }\n }\n\n &__primary {\n margin: 16px;\n\n .hero--breadcrumb & {\n margin-block: 0;\n margin-inline: 16px;\n }\n\n .hero--backbtn & {\n margin-inline-start: 0;\n }\n\n ::slotted(nano-icon-button[slot='back-btn']) {\n font-size: 2rem;\n }\n\n .is-xl & {\n margin-block: 0 50px;\n margin-inline: 50px 0;\n\n ::slotted(nano-icon-button[slot='back-btn']) {\n margin-block: 0;\n margin-inline: -3rem 0;\n }\n }\n\n @container (min-width: 800px) {\n margin-block: 0 50px !important;\n margin-inline: 50px 0 !important;\n\n ::slotted(nano-icon-button[slot='back-btn']) {\n margin-block: 0 !important;\n margin-inline: -3rem 0 !important;\n }\n }\n\n .is-xxl & {\n margin-block: 0 83px !important;\n margin-inline: 83px 0 !important;\n }\n\n @container (min-width: 900px) {\n margin-block: 0 83px !important;\n margin-inline: 83px 0 !important;\n }\n }\n\n &__primary-content {\n max-inline-size: 45rem;\n\n --color: #fff;\n\n display: flex;\n\n .hero--backbtn & {\n > div {\n padding-block: 10px 0;\n padding-inline: 0;\n }\n }\n\n ::slotted(h1[slot='primary-content']) {\n line-height: 26px !important;\n margin-block: 0 18px !important;\n font-size: 2rem !important;\n }\n\n .is-xl & {\n ::slotted(h1[slot='primary-content']) {\n line-height: 31px !important;\n margin-block-end: 30px !important;\n }\n\n ::slotted(.button[slot='primary-content']) {\n margin-block-start: 20px !important;\n }\n }\n\n @container (min-width: 800px) {\n ::slotted(h1[slot='primary-content']) {\n line-height: 31px !important;\n margin-block-end: 30px !important;\n }\n\n ::slotted(.button[slot='primary-content']) {\n margin-block-start: 20px !important;\n }\n }\n }\n\n &__secondary {\n display: none;\n block-size: 100%;\n padding-block: 0 20px;\n padding-inline: 14px;\n\n .hero--secondary & {\n display: flex;\n align-items: center;\n }\n\n .is-xl & {\n padding-block: 0 50px;\n padding-inline: 50px;\n justify-content: flex-end;\n }\n\n @container (min-width: 800px) {\n padding-block: 0 50px;\n padding-inline: 50px;\n justify-content: flex-end;\n }\n\n .is-xxl & {\n padding-block: 0 83px;\n padding-inline: 83px;\n }\n\n @container (min-width: 900px) {\n padding-block: 0 83px;\n padding-inline: 83px;\n }\n }\n\n &__icon-box {\n background: rgb(0 0 0 / 70%);\n padding: 24px;\n inline-size: 100%;\n margin-block-end: auto;\n display: flex;\n flex-direction: column;\n color: white;\n\n .is-xl & {\n max-inline-size: 410px;\n flex: 0 1 410px;\n }\n\n ::slotted([slot='icon-box-item']) {\n --nano-color-base: var(--theme-tint-color);\n --nano-icon-size: 32px;\n --nano-icon-margin-end: 20px;\n\n display: flex;\n align-items: center;\n font-size: 0.8125rem;\n margin-block-end: 20px;\n }\n\n ::slotted(.last[slot='icon-box-item']) {\n margin-block-end: 0;\n }\n }\n\n &__quote-content {\n margin-block-start: auto;\n text-align: center;\n inline-size: 100%;\n\n .is-xl & {\n max-inline-size: 500px;\n flex: 0 1 500px;\n text-align: initial;\n }\n\n @container (min-width: 800px) {\n max-inline-size: 500px;\n flex: 0 1 500px;\n text-align: initial;\n }\n }\n\n &__quote {\n &::before,\n &::after {\n content: '\"';\n font-size: var(--quote-size);\n font-weight: 700;\n font-style: italic;\n line-height: 0;\n color: #abb6b8;\n display: inline;\n position: relative;\n }\n\n ::slotted([slot='quote']) {\n font-size: var(--quote-size);\n font-weight: 300;\n font-style: italic;\n display: inline;\n }\n }\n\n &__quote-author {\n text-align: end;\n font-size: 1rem;\n opacity: 0.8;\n }\n\n &--sub {\n .hero__content.is-xl {\n margin-block-start: 40px;\n\n .hero__primary {\n margin-block: 0 40px;\n margin-inline: 50px 0;\n }\n\n .hero__secondary {\n padding-block: 0 50px;\n padding-inline: 40px 50px;\n }\n\n ::slotted(.button[slot='primary-content']) {\n margin-block-start: 8px !important;\n }\n\n ::slotted(h1[slot='primary-content']) {\n margin-block-end: 18px !important;\n }\n }\n\n .hero__content.is-xxl {\n .hero__primary {\n margin-block: 0 40px;\n margin-inline: 83px 0;\n }\n\n .hero__secondary {\n padding-block: 0 83px;\n padding-inline: 40px 83px;\n }\n }\n }\n}\n","import {\n Component,\n Prop,\n h,\n ComponentInterface,\n VNode,\n State,\n Element,\n Watch,\n Host,\n} from '@stencil/core';\n/*\n Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.\n * @slot primary-content - title, leading paragraph and CTA\n * @slot breadcrumb - each individual bread crumb should be assigned seperately\n * @slot secondary-content - free form secondary content.\n * @slot icon-box - free form icon box container\n * @slot icon-box-item - seperate icon box items. Designed to contain 1 icon and 1 text element.\n * @slot secondary-ctas - CTAs. each individual button should be assigned seperately\n * @slot quote - quote content\n * @slot quote-author - quote author\n * @slot scrim - optional background overlay (e.g. faded colour or gradient)\n * @slot background - custom background. Only active when img-src is empty\n * @slot back-btn - a back button.\n /\n@Component({\n tag: 'nano-hero',\n styleUrl: 'hero.scss',\n shadow: true,\n})\nexport class Hero implements ComponentInterface {\n private mo?: MutationObserver;\n\n @Element() host: HTMLNanoHeroElement;\n\n @State() gridSizes: string[] = [];\n @State() hasIconBox: boolean;\n @State() hasScrim: boolean;\n @State() hasSecondaryContent: boolean;\n @State() hasQuote: boolean;\n @State() hasBg: boolean;\n @State() hasBackBtn: boolean;\n @State() hasCtas: boolean;\n @State() breadCrumbs: Element[];\n @Watch('breadCrumbs')\n breadCrumbChange() {\n // safari doesn't support ::slotted()::after ... so this :/\n this.breadCrumbs\n .filter(\n (crumb) =>\n crumb.tagName === 'A' &&\n !crumb.nextElementSibling.classList.contains('slash')\n )\n .forEach((crumb) => {\n crumb.insertAdjacentHTML(\n 'afterend',\n '<span slot=\"breadcrumb\" class=\"slash\">/</span>'\n );\n });\n }\n @State() iconBoxItems: Element[];\n @Watch('iconBoxItems')\n iconBoxItemChange() {\n this.iconBoxItems.forEach((item) => item.classList.remove('last'));\n if (\n this.iconBoxItems[this.iconBoxItems.length - 1] &&\n this.iconBoxItems[this.iconBoxItems.length - 1].classList\n )\n this.iconBoxItems[this.iconBoxItems.length - 1].classList.add('last');\n }\n\n /* src for backgronund image. For more control use the `background` slot instead. /\n @Prop() imgSrc?: string;\n\n /* Optional list string providing media sizes with corresponding image srcs.\n * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` /\n @Prop() imgSrcSet?: string = null;\n\n /* The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px) /\n @Prop() largeScreenBP: number = 900;\n\n /* Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text) /\n @Prop() theme: 'dark' \| 'light' = 'dark';\n\n /* Set the content structure level of the hero. Defaults to 'top' */\n @Prop() level: 'top' \| 'sub' = 'top';\n\n private slotChangeObserver() {\n if (!window['MutationObserver']) return;\n\n if (this.mo) this.mo.disconnect();\n const mo = (this.mo = new MutationObserver(() =>\n this.processSlottedContent()\n ));\n mo.observe(this.host, { childList: true });\n }\n\n // Event handlers\n\n private processSlottedContent() {\n this.hasCtas = !!this.host.querySelector('[slot=\"secondary-ctas\"]');\n this.iconBoxItems = Array.from(\n this.host.querySelectorAll('[slot=\"icon-box-item\"]')\n );\n this.hasIconBox =\n !!this.host.querySelector('[slot=\"icon-box\"]') \|\|\n !!this.iconBoxItems.length;\n this.hasScrim = !!this.host.querySelector('[slot=\"scrim\"]');\n this.breadCrumbs = Array.from(\n this.host.querySelectorAll('[slot=\"breadcrumb\"]')\n );\n this.hasSecondaryContent =\n !!this.host.querySelector('[slot=\"icon-box\"]') \|\|\n !!this.host.querySelector('[slot=\"quote\"]') \|\|\n !!this.host.querySelector('[slot=\"icon-box-item\"]') \|\|\n !!this.host.querySelector('[slot=\"secondary-content\"]');\n this.hasBg =\n !!this.host.querySelector('[slot=\"background\"]') \|\| !!this.imgSrc;\n this.hasBackBtn = !!this.host.querySelector('[slot=\"back-btn\"]');\n this.hasQuote = !!this.host.querySelector('[slot=\"quote\"]');\n }\n\n private handleGridChange = (e: CustomEvent & { detail: string[] }) => {\n this.gridSizes = e.detail;\n };\n\n // Component lifecycle\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n }\n\n componentDidLoad() {\n this.slotChangeObserver();\n }\n\n componentWillLoad() {\n this.processSlottedContent();\n }\n\n private HeroContent = (): VNode[] => {\n return [\n !this.hasIconBox && this.hasCtas ? (\n <div class=\"hero__ctas\">\n <slot name=\"secondary-ctas\" />\n </div>\n ) : (\n ''\n ),\n <div class=\"hero__scrim\">\n <slot name=\"scrim\" />\n </div>,\n <nano-grid\n onNanoBpChange={this.handleGridChange}\n class=\"hero__content\"\n xlCols={2}\n xlSize={this.largeScreenBP}\n >\n <nano-grid-item gridStates=\"xl-col-span-2\">\n <div class=\"hero__breadcrumbs\">\n <slot name=\"breadcrumb\" />\n </div>\n </nano-grid-item>\n <nano-grid-item\n gridStates={\n this.hasSecondaryContent\n ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'\n : 'xl-col-span-2 xl-col-start-1 xl-row-start-2'\n }\n >\n <div class=\"hero__primary\">\n <div class=\"hero__primary-content\">\n <slot name=\"back-btn\" />\n <div>\n <slot name=\"primary-content\" />\n </div>\n </div>\n </div>\n </nano-grid-item>\n {this.hasSecondaryContent && (\n <nano-grid-item gridStates=\"xl-col-span-1 xl-col-start-2 xl-row-start-2\">\n <div class=\"hero__secondary\">\n <slot name=\"secondary-content\" />\n {this.hasIconBox && (\n <div class=\"hero__icon-box\">\n <slot name=\"icon-box\" />\n <slot name=\"icon-box-item\" />\n </div>\n )}\n {this.hasQuote && (\n <div class=\"hero__quote-content\">\n <span class=\"hero__quote\">\n <slot name=\"quote\" />\n </span>\n <div class=\"hero__quote-author\">\n <slot name=\"quote-author\" />\n </div>\n </div>\n )}\n </div>\n </nano-grid-item>\n )}\n </nano-grid>,\n ];\n };\n\n render() {\n const rtl =\n this.host.dir === 'rtl' \|\|\n (this.host.ownerDocument as Document).dir === 'rtl';\n\n return (\n <Host\n class={{\n [this.gridSizes.join(' ')]: true,\n }}\n >\n <div\n class={{\n hero: true,\n 'hero--light': this.theme === 'light',\n 'hero--secondary': this.hasSecondaryContent,\n 'hero--iconbox': this.hasIconBox,\n 'hero--rtl': rtl,\n 'hero--scrim': this.hasScrim,\n 'hero--breadcrumb': !!this.breadCrumbs.length,\n 'hero--hasbg': this.hasBg,\n 'hero--backbtn': this.hasBackBtn,\n 'hero--sub': this.level === 'sub',\n }}\n >\n <div class=\"hero__bg-wrap\">\n {!!this.imgSrc && (\n <nano-img\n class=\"hero__img\"\n lazy={false}\n background\n srcSet={this.imgSrcSet}\n src={this.imgSrc}\n >\n <this.HeroContent />\n </nano-img>\n )}\n {!this.imgSrc && [\n <div class=\"hero__bg-slot\">\n <slot name=\"background\" />\n </div>,\n <this.HeroContent />,\n ]}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nano-hero.js","mappings":"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","names":[],"sources":["./src/components/hero/hero.scss?tag=nano-hero&encapsulation=shadow","./src/components/hero/hero.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n\n/\nTODO - as soon as container queries hits everywhere, strip out reliance on nano-grid breakpoints\n/\n\n:host {\n /*\n @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n * @prop --theme-color: Text color. Default depends on theme;\n * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #{map.get($colors, lightblue)};\n * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n * @prop --quote-size: Font size of the quote. Defaults to 1.3em and grows to 3rem on the xl breakpoint;\n /\n\n display: block;\n\n --nano-loader-base: #{map.get($colors, black)};\n --nano-loader-tint: #{lighten(map.get($colors, black), 20%)};\n --theme-color: #{map.get($colors, white)};\n --theme-tint-color: #{map.get($colors, lightblue)};\n --scrim-color: 0 0 0;\n --scrim-direction: 90deg;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 0.7;\n --padding: 0;\n --quote-size: 1.3rem;\n\n color: var(--theme-color);\n}\n\n:host(.is-xl) {\n --quote-size: 3rem;\n}\n\n:host([theme='light']) {\n --nano-loader-base: #{map.get($colors, white)};\n --nano-loader-tint: #{lighten(map.get($colors, white), 20%)};\n --theme-color: #{map.get($colors, black)};\n --scrim-color: 255 255 255;\n --scrim-opacity-from: 0.25;\n --scrim-opacity-to: 1;\n --scrim-direction: 270deg;\n\n color: var(--theme-color);\n\n .hero__primary-content {\n --color: #{map.get($colors, black)};\n }\n}\n\n.hero {\n position: relative;\n\n &--rtl {\n --scrim-direction: 270deg;\n }\n\n &--secondary:not(.hero--iconbox) {\n --scrim-direction: 0deg;\n }\n\n &__bg-wrap {\n overflow: hidden;\n }\n\n &__bg-slot {\n position: absolute;\n inset: 0;\n }\n\n &__ctas {\n @media (max-width: 52em) {\n display: none;\n }\n\n @media (max-width: 58em) {\n margin-block-end: -48px;\n }\n\n display: flex;\n justify-content: flex-end;\n padding-block: 32px 0;\n padding-inline: 32px;\n margin-block-end: -64px;\n position: relative;\n z-index: 1;\n\n ::slotted(a.button[slot='secondary-ctas']) {\n padding-block: 0.25rem !important;\n padding-inline: 0.5rem !important;\n font-size: 0.875rem !important;\n margin-block: 0 !important;\n margin-inline: 0.25rem !important;\n }\n }\n\n &__img {\n display: block;\n container-type: inline-size;\n\n --padding: inherit;\n }\n\n &__breadcrumbs {\n display: none;\n margin-block: 20px 0;\n margin-inline: 14px;\n line-height: 14px;\n\n .hero--breadcrumb & {\n display: block;\n }\n\n .is-xl & {\n margin-block: 0;\n margin-inline: 50px;\n max-inline-size: 50%;\n }\n\n @container (min-width: 800px) {\n margin-block: 0;\n margin-inline: 50px;\n max-inline-size: 50%;\n }\n\n .is-xxl & {\n margin-block: 0;\n margin-inline: 83px;\n }\n\n @container (min-width: 900px) {\n margin-block: 0;\n margin-inline: 83px;\n }\n\n ::slotted([slot='breadcrumb']) {\n font-size: 0.85rem;\n text-transform: uppercase;\n letter-spacing: 1.5px;\n font-weight: 600;\n font-stretch: 125%;\n display: inline-block;\n margin-block-end: 16px;\n position: relative;\n z-index: 2;\n\n .hero--hasbg & {\n text-shadow: 1px 1px rgb(0 0 0 / 15%);\n }\n }\n\n ::slotted(a[slot='breadcrumb']) {\n color: var(--theme-tint-color) !important;\n cursor: pointer;\n }\n\n ::slotted(.slash[slot='breadcrumb']) {\n color: var(--theme-color);\n position: relative;\n margin-block: 0;\n margin-inline: 0.5rem;\n display: inline-block;\n }\n }\n\n &__scrim {\n position: absolute;\n inset: 0;\n z-index: 0;\n background:\n linear-gradient(\n var(--scrim-direction),\n rgb(var(--scrim-color) / var(--scrim-opacity-from)) 0%,\n rgb(var(--scrim-color) / var(--scrim-opacity-to)) 100%\n );\n\n .hero--scrim & {\n background: none;\n }\n }\n\n &__content {\n max-inline-size: 1440px;\n display: block;\n\n --grid-row-gap: 0;\n\n margin-block: 0;\n margin-inline: auto;\n position: relative;\n\n &.is-xl {\n margin-block-start: 50px;\n max-inline-size: 1540px;\n }\n\n @container (min-width: 800px) {\n margin-block: 50px 0 !important;\n max-inline-size: 1540px !important;\n }\n\n &.is-xxl {\n margin-block-start: 83px;\n max-inline-size: 1606px;\n }\n\n @container (min-width: 900px) {\n margin-block: 83px 0 !important;\n max-inline-size: 1606px !important;\n }\n }\n\n &__primary {\n margin: 16px;\n\n .hero--breadcrumb & {\n margin-block: 0;\n margin-inline: 16px;\n }\n\n .hero--backbtn & {\n margin-inline-start: 0;\n }\n\n ::slotted(nano-icon-button[slot='back-btn']) {\n font-size: 2rem;\n }\n\n .is-xl & {\n margin-block: 0 50px;\n margin-inline: 50px 0;\n\n ::slotted(nano-icon-button[slot='back-btn']) {\n margin-block: 0;\n margin-inline: -3rem 0;\n }\n }\n\n @container (min-width: 800px) {\n margin-block: 0 50px !important;\n margin-inline: 50px 0 !important;\n\n ::slotted(nano-icon-button[slot='back-btn']) {\n margin-block: 0 !important;\n margin-inline: -3rem 0 !important;\n }\n }\n\n .is-xxl & {\n margin-block: 0 83px !important;\n margin-inline: 83px 0 !important;\n }\n\n @container (min-width: 900px) {\n margin-block: 0 83px !important;\n margin-inline: 83px 0 !important;\n }\n }\n\n &__primary-content {\n max-inline-size: 45rem;\n\n --color: #fff;\n\n display: flex;\n\n .hero--backbtn & {\n > div {\n padding-block: 10px 0;\n padding-inline: 0;\n }\n }\n\n ::slotted(h1[slot='primary-content']) {\n line-height: 26px !important;\n margin-block: 0 18px !important;\n font-size: 2rem !important;\n }\n\n .is-xl & {\n ::slotted(h1[slot='primary-content']) {\n line-height: 31px !important;\n margin-block-end: 30px !important;\n }\n\n ::slotted(.button[slot='primary-content']) {\n margin-block-start: 20px !important;\n }\n }\n\n @container (min-width: 800px) {\n ::slotted(h1[slot='primary-content']) {\n line-height: 31px !important;\n margin-block-end: 30px !important;\n }\n\n ::slotted(.button[slot='primary-content']) {\n margin-block-start: 20px !important;\n }\n }\n }\n\n &__secondary {\n display: none;\n block-size: 100%;\n padding-block: 0 20px;\n padding-inline: 14px;\n\n .hero--secondary & {\n display: flex;\n align-items: center;\n }\n\n .is-xl & {\n padding-block: 0 50px;\n padding-inline: 50px;\n justify-content: flex-end;\n }\n\n @container (min-width: 800px) {\n padding-block: 0 50px;\n padding-inline: 50px;\n justify-content: flex-end;\n }\n\n .is-xxl & {\n padding-block: 0 83px;\n padding-inline: 83px;\n }\n\n @container (min-width: 900px) {\n padding-block: 0 83px;\n padding-inline: 83px;\n }\n }\n\n &__icon-box {\n background: rgb(0 0 0 / 70%);\n padding: 24px;\n inline-size: 100%;\n margin-block-end: auto;\n display: flex;\n flex-direction: column;\n color: white;\n\n .is-xl & {\n max-inline-size: 410px;\n flex: 0 1 410px;\n }\n\n ::slotted([slot='icon-box-item']) {\n --nano-color-base: var(--theme-tint-color);\n --nano-icon-size: 32px;\n --nano-icon-margin-end: 20px;\n\n display: flex;\n align-items: center;\n font-size: 0.8125rem;\n margin-block-end: 20px;\n }\n\n ::slotted(.last[slot='icon-box-item']) {\n margin-block-end: 0;\n }\n }\n\n &__quote-content {\n margin-block-start: auto;\n text-align: center;\n inline-size: 100%;\n\n .is-xl & {\n max-inline-size: 500px;\n flex: 0 1 500px;\n text-align: initial;\n }\n\n @container (min-width: 800px) {\n max-inline-size: 500px;\n flex: 0 1 500px;\n text-align: initial;\n }\n }\n\n &__quote {\n &::before,\n &::after {\n content: '\"';\n font-size: var(--quote-size);\n font-weight: 700;\n font-style: italic;\n line-height: 0;\n color: #abb6b8;\n display: inline;\n position: relative;\n }\n\n ::slotted([slot='quote']) {\n font-size: var(--quote-size);\n font-weight: 300;\n font-style: italic;\n display: inline;\n }\n }\n\n &__quote-author {\n text-align: end;\n font-size: 1rem;\n opacity: 0.8;\n }\n\n &--sub {\n .hero__content.is-xl {\n margin-block-start: 40px;\n\n .hero__primary {\n margin-block: 0 40px;\n margin-inline: 50px 0;\n }\n\n .hero__secondary {\n padding-block: 0 50px;\n padding-inline: 40px 50px;\n }\n\n ::slotted(.button[slot='primary-content']) {\n margin-block-start: 8px !important;\n }\n\n ::slotted(h1[slot='primary-content']) {\n margin-block-end: 18px !important;\n }\n }\n\n .hero__content.is-xxl {\n .hero__primary {\n margin-block: 0 40px;\n margin-inline: 83px 0;\n }\n\n .hero__secondary {\n padding-block: 0 83px;\n padding-inline: 40px 83px;\n }\n }\n }\n}\n","import {\n Component,\n Prop,\n h,\n ComponentInterface,\n VNode,\n State,\n Element,\n Watch,\n Host,\n} from '@stencil/core';\n/*\n Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.\n * @slot primary-content - title, leading paragraph and CTA\n * @slot breadcrumb - each individual bread crumb should be assigned seperately\n * @slot secondary-content - free form secondary content.\n * @slot icon-box - free form icon box container\n * @slot icon-box-item - seperate icon box items. Designed to contain 1 icon and 1 text element.\n * @slot secondary-ctas - CTAs. each individual button should be assigned seperately\n * @slot quote - quote content\n * @slot quote-author - quote author\n * @slot scrim - optional background overlay (e.g. faded colour or gradient)\n * @slot background - custom background. Only active when img-src is empty\n * @slot back-btn - a back button.\n /\n@Component({\n tag: 'nano-hero',\n styleUrl: 'hero.scss',\n shadow: true,\n})\nexport class Hero implements ComponentInterface {\n private mo?: MutationObserver;\n\n @Element() host: HTMLNanoHeroElement;\n\n @State() gridSizes: string[] = [];\n @State() hasIconBox: boolean;\n @State() hasScrim: boolean;\n @State() hasSecondaryContent: boolean;\n @State() hasQuote: boolean;\n @State() hasBg: boolean;\n @State() hasBackBtn: boolean;\n @State() hasCtas: boolean;\n @State() breadCrumbs: Element[];\n @Watch('breadCrumbs')\n breadCrumbChange() {\n // safari doesn't support ::slotted()::after ... so this :/\n this.breadCrumbs\n .filter(\n (crumb) =>\n crumb.tagName === 'A' &&\n !crumb.nextElementSibling.classList.contains('slash')\n )\n .forEach((crumb) => {\n crumb.insertAdjacentHTML(\n 'afterend',\n '<span slot=\"breadcrumb\" class=\"slash\">/</span>'\n );\n });\n }\n @State() iconBoxItems: Element[];\n @Watch('iconBoxItems')\n iconBoxItemChange() {\n this.iconBoxItems.forEach((item) => item.classList.remove('last'));\n if (\n this.iconBoxItems[this.iconBoxItems.length - 1] &&\n this.iconBoxItems[this.iconBoxItems.length - 1].classList\n )\n this.iconBoxItems[this.iconBoxItems.length - 1].classList.add('last');\n }\n\n /* src for backgronund image. For more control use the `background` slot instead. /\n @Prop() imgSrc?: string;\n\n /* Optional list string providing media sizes with corresponding image srcs.\n * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` /\n @Prop() imgSrcSet?: string = null;\n\n /* The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px) /\n @Prop() largeScreenBP: number = 900;\n\n /* Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text) /\n @Prop() theme: 'dark' \| 'light' = 'dark';\n\n /* Set the content structure level of the hero. Defaults to 'top' */\n @Prop() level: 'top' \| 'sub' = 'top';\n\n private slotChangeObserver() {\n if (!window['MutationObserver']) return;\n\n if (this.mo) this.mo.disconnect();\n const mo = (this.mo = new MutationObserver(() =>\n this.processSlottedContent()\n ));\n mo.observe(this.host, { childList: true });\n }\n\n // Event handlers\n\n private processSlottedContent() {\n this.hasCtas = !!this.host.querySelector('[slot=\"secondary-ctas\"]');\n this.iconBoxItems = Array.from(\n this.host.querySelectorAll('[slot=\"icon-box-item\"]')\n );\n this.hasIconBox =\n !!this.host.querySelector('[slot=\"icon-box\"]') \|\|\n !!this.iconBoxItems.length;\n this.hasScrim = !!this.host.querySelector('[slot=\"scrim\"]');\n this.breadCrumbs = Array.from(\n this.host.querySelectorAll('[slot=\"breadcrumb\"]')\n );\n this.hasSecondaryContent =\n !!this.host.querySelector('[slot=\"icon-box\"]') \|\|\n !!this.host.querySelector('[slot=\"quote\"]') \|\|\n !!this.host.querySelector('[slot=\"icon-box-item\"]') \|\|\n !!this.host.querySelector('[slot=\"secondary-content\"]');\n this.hasBg =\n !!this.host.querySelector('[slot=\"background\"]') \|\| !!this.imgSrc;\n this.hasBackBtn = !!this.host.querySelector('[slot=\"back-btn\"]');\n this.hasQuote = !!this.host.querySelector('[slot=\"quote\"]');\n }\n\n private handleGridChange = (e: CustomEvent & { detail: string[] }) => {\n this.gridSizes = e.detail;\n };\n\n // Component lifecycle\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n }\n\n componentDidLoad() {\n this.slotChangeObserver();\n }\n\n componentWillLoad() {\n this.processSlottedContent();\n }\n\n private HeroContent = (): VNode[] => {\n return [\n !this.hasIconBox && this.hasCtas ? (\n <div class=\"hero__ctas\">\n <slot name=\"secondary-ctas\" />\n </div>\n ) : (\n ''\n ),\n <div class=\"hero__scrim\">\n <slot name=\"scrim\" />\n </div>,\n <nano-grid\n onNanoBpChange={this.handleGridChange}\n class=\"hero__content\"\n xlCols={2}\n xlSize={this.largeScreenBP}\n >\n <nano-grid-item gridStates=\"xl-col-span-2\">\n <div class=\"hero__breadcrumbs\">\n <slot name=\"breadcrumb\" />\n </div>\n </nano-grid-item>\n <nano-grid-item\n gridStates={\n this.hasSecondaryContent\n ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'\n : 'xl-col-span-2 xl-col-start-1 xl-row-start-2'\n }\n >\n <div class=\"hero__primary\">\n <div class=\"hero__primary-content\">\n <slot name=\"back-btn\" />\n <div>\n <slot name=\"primary-content\" />\n </div>\n </div>\n </div>\n </nano-grid-item>\n {this.hasSecondaryContent && (\n <nano-grid-item gridStates=\"xl-col-span-1 xl-col-start-2 xl-row-start-2\">\n <div class=\"hero__secondary\">\n <slot name=\"secondary-content\" />\n {this.hasIconBox && (\n <div class=\"hero__icon-box\">\n <slot name=\"icon-box\" />\n <slot name=\"icon-box-item\" />\n </div>\n )}\n {this.hasQuote && (\n <div class=\"hero__quote-content\">\n <span class=\"hero__quote\">\n <slot name=\"quote\" />\n </span>\n <div class=\"hero__quote-author\">\n <slot name=\"quote-author\" />\n </div>\n </div>\n )}\n </div>\n </nano-grid-item>\n )}\n </nano-grid>,\n ];\n };\n\n render() {\n const rtl =\n this.host.dir === 'rtl' \|\|\n (this.host.ownerDocument as Document).dir === 'rtl';\n\n return (\n <Host\n class={{\n [this.gridSizes.join(' ')]: true,\n }}\n >\n <div\n class={{\n hero: true,\n 'hero--light': this.theme === 'light',\n 'hero--secondary': this.hasSecondaryContent,\n 'hero--iconbox': this.hasIconBox,\n 'hero--rtl': rtl,\n 'hero--scrim': this.hasScrim,\n 'hero--breadcrumb': !!this.breadCrumbs.length,\n 'hero--hasbg': this.hasBg,\n 'hero--backbtn': this.hasBackBtn,\n 'hero--sub': this.level === 'sub',\n }}\n >\n <div class=\"hero__bg-wrap\">\n {!!this.imgSrc && (\n <nano-img\n class=\"hero__img\"\n lazy={false}\n background\n srcSet={this.imgSrcSet}\n src={this.imgSrc}\n >\n <this.HeroContent />\n </nano-img>\n )}\n {!this.imgSrc && [\n <div class=\"hero__bg-slot\">\n <slot name=\"background\" />\n </div>,\n <this.HeroContent />,\n ]}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nano-range.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-range.js","mappings":"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","names":[],"sources":["./src/utils/form.ts","./src/components/range/range.scss?tag=nano-range&encapsulation=scoped","./src/components/range/range.tsx"],"sourcesContent":["export const renderHiddenInput = (\n container: HTMLElement,\n name: string,\n value: string \| undefined \| null,\n disabled: boolean\n) => {\n let input = container.querySelector(\n 'input.aux-input'\n ) as HTMLInputElement \| null;\n if (!input) {\n input = container.ownerDocument!.createElement('input');\n input.type = 'hidden';\n input.classList.add('aux-input');\n container.appendChild(input);\n }\n input.disabled = disabled;\n input.name = name;\n input.value = value \|\| '';\n};\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n// Range\n// --------------------------------------------------\n\n:host {\n /*\n @prop --knob-handle-size: defaults to calc(var(--knob-size) * 2);\n * @prop --rgb-inactive: defaults to #{color-to-rgb-list(#a5a5a5)};\n * @prop --bar-background: Background of the range bar; Defaults to #e2e1e0;\n * @prop --bar-background-active: Background of the active range bar; Defaults to #a5a5a5;\n * @prop --bar-height: Height of the range bar; Defaults to 8px;\n * @prop --bar-border-radius: Border radius of the range bar; Defaults to 4px;\n * @prop --height: Height of the range. Defaults to 42px;\n * @prop --knob-background: Background of the range knob. Defaults to #{nano-color(primary, base)};\n * @prop --knob-border-radius: Border radius of the range knob. Defaults to 50%;\n * @prop --knob-box-shadow: Box shadow of the range knob; Defaults to 0 2px 4px 0 rgba(0, 0, 0, 0.3);\n * @prop --knob-size: Size of the range knob; Defaults to 30px;\n * @prop --pin-background: Background of the range pin; Defaults to #{nano-color(primary, base)};\n * @prop --pin-color: Color of the range pin; Defaults to #{nano-color(primary, contrast)};\n * @prop --focus-style: Focus shadow around knob; Defaults to 0 0 0 5px #{$control-focus-color};\n /\n --knob-handle-size: (var(--knob-size) 2);\n --rgb-inactive: #{color-to-rgb-list(#a5a5a5)};\n --knob-border-radius: 50%;\n --knob-background: #{nano-color(primary, base)};\n --knob-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 30%);\n --knob-size: 30px;\n --bar-height: 8px;\n --bar-background: #e2e1e0;\n --bar-background-active: #a5a5a5;\n --bar-border-radius: 4px;\n --height: 42px;\n --pin-background: #{nano-color(primary, base)};\n --pin-color: #{nano-color(primary, contrast)};\n --focus-style: 0 0 0 5px #{$control-focus-color};\n}\n\n.range-wrap {\n display: flex;\n position: relative;\n flex: 3;\n align-items: center;\n user-select: none;\n\n ::slotted(ion-icon[slot]) {\n font-size: 1.5em;\n }\n\n ::slotted([slot='start']) {\n margin-inline: 0 14px;\n margin-block: 0;\n font-size: 0.9em;\n }\n\n ::slotted([slot='end']) {\n margin-inline: 14px 0;\n margin-block: 0;\n font-size: 0.9em;\n }\n}\n\n.range-slider {\n position: relative;\n flex: 1;\n width: 100%;\n height: var(--height);\n contain: size layout style;\n cursor: grab;\n touch-action: pan-y;\n}\n\n:host(.range-pressed) .range-slider {\n cursor: grabbing;\n}\n\n// bar\n\n.range-bar {\n border-radius: var(--bar-border-radius);\n inset-block-start: calc((var(--height) - var(--bar-height)) / 2);\n inset-inline-start: 0;\n position: absolute;\n width: 100%;\n height: var(--bar-height);\n background: var(--bar-background);\n pointer-events: none;\n\n :host(.range-snaps) & {\n border-radius: var(--bar-border-radius) 0 0 var(--bar-border-radius);\n }\n}\n\n.range-bar-active {\n inset-block-end: 0;\n width: auto;\n background: var(--bar-background-active);\n\n :host(.range-pressed) {\n will-change: left, right;\n }\n}\n\n// knob\n\n.range-knob {\n border-radius: var(--knob-border-radius);\n inset-block-start: calc(50% - var(--knob-size) / 2);\n inset-inline-start: calc(50% - var(--knob-size) / 2);\n position: absolute;\n width: var(--knob-size);\n height: var(--knob-size);\n background: var(--knob-background);\n box-shadow: var(--knob-box-shadow);\n z-index: 2;\n pointer-events: none;\n transform: scale(0.67);\n transition-duration: 120ms;\n transition-property: transform, background-color, border;\n transition-timing-function: ease;\n\n :host(:not(.range-has-pin)) .range-knob-pressed & {\n transform: scale(1);\n }\n}\n\n.range-knob-handle {\n inset-block-start: calc((var(--height) - var(--knob-handle-size)) / 2);\n inset-inline-start: 0;\n margin-inline-start: calc(0px - var(--knob-handle-size) / 2);\n position: absolute;\n width: calc(var(--knob-handle-size));\n height: calc(var(--knob-handle-size));\n text-align: center;\n\n &:active,\n &:focus {\n outline: none;\n\n .range-knob {\n box-shadow: var(--knob-box-shadow), var(--focus-style);\n }\n }\n}\n\n// ticks\n\n.range-tick {\n position: absolute;\n inset-block-start: calc((var(--height) - var(--bar-height)) / 2);\n width: var(--bar-height);\n height: var(--bar-height);\n background: var(--bar-background-active);\n z-index: 1;\n pointer-events: none;\n\n &:first-of-type {\n border-radius: var(--bar-border-radius) 0 0 var(--bar-border-radius);\n }\n\n &:last-of-type {\n border-radius: 0 var(--bar-border-radius) var(--bar-border-radius) 0;\n }\n\n &-active {\n background: transparent;\n }\n}\n\n// pin\n\n.range-pin {\n transform: translate3d(0, 0, 0) scale(0.01);\n transform-origin: center top;\n padding: 0.66em 0;\n border-radius: 50%;\n text-align: center;\n box-sizing: border-box;\n display: inline-block;\n position: relative;\n min-width: 2.33em;\n height: 2.33em;\n transition: transform 120ms ease, background 120ms ease;\n background: var(--pin-background);\n color: var(--pin-color);\n font-size: 0.75em;\n\n &::before {\n inset-block-start: 0.25em;\n inset-inline-start: 50%;\n margin-inline-start: -1.08em;\n border-radius: 50% 50% 50% 0;\n position: absolute;\n width: 2.16em;\n height: 2.16em;\n transform: rotate(-45deg);\n transition: background 120ms ease;\n background: var(--pin-background);\n content: '';\n z-index: -1;\n }\n\n .range-knob-pressed & {\n transform: translate3d(0, -50%, 0) scale(1);\n transform: translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);\n }\n}\n\n// disabled\n\n:host(.range-disabled) {\n pointer-events: none;\n\n .range-bar-active,\n .range-bar,\n .range-tick {\n background-color: rgb(var(--rgb-inactive) / 50%);\n }\n\n .range-knob {\n transform: scale(0.55);\n outline: 5px solid #fff;\n background-color: rgb(var(--rgb-inactive) / 50%);\n }\n}\n\n// theme\n\n:host(.nano-color) {\n .range-bar-active,\n .range-knob,\n .range-pin,\n .range-pin::before,\n .range-tick {\n background: current-color(base);\n color: current-color(contrast);\n }\n\n .range-bar {\n background: current-color(base, 0.26);\n }\n\n .range-knob-handle {\n &:active,\n &:focus {\n .range-knob {\n box-shadow: var(--knob-box-shadow), 0 0 0 5px current-color(tint, 0.56);\n }\n }\n }\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport { renderHiddenInput } from '../../utils/form';\nimport { clamp } from '../../utils/math';\nimport { createColorClasses } from '../../utils/theme';\nimport { debounceEvent } from '../../utils/throttle';\nimport type {\n Color,\n Gesture,\n GestureDetail,\n KnobName,\n RangeChangeEventDetail,\n RangeValue,\n StyleEventDetail,\n} from '../../interface';\n\n/*\n The Range slider lets users select from a range of values by moving\n * the slider knob. It can accept dual knobs, but by default one knob controls the value of the range.\n \n Labels can be placed on either side of the range by adding the\n * `slot=\"start\"` or `slot=\"end\"` to the element.\n \n @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.\n * @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.\n /\n@Component({\n tag: 'nano-range',\n styleUrl: 'range.scss',\n scoped: true,\n})\nexport class Range implements ComponentInterface {\n private noUpdate = false;\n private rect!: ClientRect;\n private hasFocus = false;\n private rangeSlider?: HTMLElement;\n private gesture?: Gesture;\n\n @Element() el!: HTMLNanoRangeElement;\n\n @State() private ratioA = 0;\n @State() private ratioB = 0;\n @State() private pressedKnob: KnobName;\n\n /\n The color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`\n /\n @Prop() color?: Color;\n\n /\n How long, in milliseconds, to wait to trigger the\n * `nanoChange` event after each change in the range value.\n /\n @Prop() debounce = 0;\n\n @Watch('debounce')\n protected debounceChanged() {\n this.nanoChange = debounceEvent(this.nanoChange, this.debounce);\n }\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name = '';\n\n /\n Show two knobs.\n /\n @Prop() dualKnobs = false;\n\n /\n Minimum integer value of the range.\n /\n @Prop() min = 0;\n @Watch('min')\n protected minChanged() {\n if (!this.noUpdate) {\n this.updateRatio();\n }\n }\n\n /\n Maximum integer value of the range.\n /\n @Prop() max = 100;\n @Watch('max')\n protected maxChanged() {\n if (!this.noUpdate) {\n this.updateRatio();\n }\n }\n\n /\n If `true`, a pin with integer value is shown when the knob\n * is pressed.\n /\n @Prop() pin = false;\n\n /\n If `true`, the knob snaps to tick marks evenly spaced based\n * on the step property value.\n /\n @Prop() snaps = false;\n\n /\n Specifies the value granularity.\n /\n @Prop() step = 1;\n\n /\n If `true`, tick marks are displayed based on the step value.\n * Only applies when `snaps` is `true`.\n /\n @Prop() ticks = false;\n\n /\n If `true`, the user cannot interact with the range.\n /\n @Prop() disabled = false;\n @Watch('disabled')\n protected disabledChanged() {\n if (this.gesture) {\n this.gesture.enable(!this.disabled);\n }\n this.emitStyle();\n }\n\n /\n the value of the range.\n /\n @Prop({ mutable: true }) value: RangeValue = 0;\n @Watch('value')\n protected valueChanged(value: RangeValue) {\n if (!this.noUpdate) {\n this.updateRatio();\n }\n\n value = this.ensureValueInBounds(value);\n\n this.nanoChange.emit({ value });\n }\n\n private clampBounds = (value: any): number => {\n return clamp(this.min, value, this.max);\n };\n\n private ensureValueInBounds = (value: any) => {\n if (this.dualKnobs) {\n return {\n lower: this.clampBounds(value.lower),\n upper: this.clampBounds(value.upper),\n };\n } else {\n return this.clampBounds(value);\n }\n };\n\n /\n Emitted when the value property has changed.\n /\n @Event() nanoChange!: EventEmitter<RangeChangeEventDetail>;\n\n /\n Emitted when the styles change.\n * @internal\n /\n @Event() nanoStyle!: EventEmitter<StyleEventDetail>;\n\n /\n Emitted when the range has focus.\n /\n @Event() nanoFocus!: EventEmitter<void>;\n\n /\n Emitted when the range loses focus.\n /\n @Event() nanoBlur!: EventEmitter<void>;\n\n connectedCallback() {\n this.updateRatio();\n this.debounceChanged();\n this.disabledChanged();\n }\n\n disconnectedCallback() {\n if (this.gesture) {\n this.gesture.destroy();\n this.gesture = undefined;\n }\n }\n\n async componentDidLoad() {\n const rangeSlider = this.rangeSlider;\n if (rangeSlider) {\n this.gesture = (await import('../../utils/gesture/index')).createGesture({\n el: rangeSlider,\n gestureName: 'range',\n gesturePriority: 100,\n threshold: 0,\n onStart: (ev) => this.onStart(ev),\n onMove: (ev) => this.onMove(ev),\n onEnd: (ev) => this.onEnd(ev),\n });\n this.gesture.enable(!this.disabled);\n }\n }\n\n private handleKeyboard = (knob: KnobName, isIncrease: boolean) => {\n let step = this.step;\n step = step > 0 ? step : 1;\n step = step / (this.max - this.min);\n if (!isIncrease) {\n step = -1;\n }\n if (knob === 'A') {\n this.ratioA = clamp(0, this.ratioA + step, 1);\n } else {\n this.ratioB = clamp(0, this.ratioB + step, 1);\n }\n this.updateValue();\n };\n\n private getValue(): RangeValue {\n const value = this.value \|\| 0;\n if (this.dualKnobs) {\n if (typeof value === 'object') {\n return value;\n }\n return {\n lower: 0,\n upper: value,\n };\n } else {\n if (typeof value === 'object') {\n return value.upper;\n }\n return value;\n }\n }\n\n private emitStyle() {\n this.nanoStyle.emit({\n interactive: true,\n 'interactive-disabled': this.disabled,\n });\n }\n\n private onStart(detail: GestureDetail) {\n const rect = (this.rect = this.rangeSlider!.getBoundingClientRect() as any);\n const currentX = detail.currentX;\n\n // figure out which knob they started closer to\n let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n if (document.dir === 'rtl') {\n ratio = 1 - ratio;\n }\n\n this.pressedKnob =\n !this.dualKnobs \|\|\n Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio)\n ? 'A'\n : 'B';\n\n this.setFocus(this.pressedKnob);\n\n // update the active knob's position\n this.update(currentX);\n }\n\n private onMove(detail: GestureDetail) {\n this.update(detail.currentX);\n }\n\n private onEnd(detail: GestureDetail) {\n this.update(detail.currentX);\n this.pressedKnob = undefined;\n }\n\n private update(currentX: number) {\n // figure out where the pointer is currently at\n // update the knob being interacted with\n const rect = this.rect;\n let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n if (document.dir === 'rtl') {\n ratio = 1 - ratio;\n }\n\n if (this.snaps) {\n // snaps the ratio to the current value\n ratio = valueToRatio(\n ratioToValue(ratio, this.min, this.max, this.step),\n this.min,\n this.max\n );\n }\n\n // update which knob is pressed\n if (this.pressedKnob === 'A') {\n this.ratioA = ratio;\n } else {\n this.ratioB = ratio;\n }\n\n // Update input value\n this.updateValue();\n }\n\n private get valA() {\n return ratioToValue(this.ratioA, this.min, this.max, this.step);\n }\n\n private get valB() {\n return ratioToValue(this.ratioB, this.min, this.max, this.step);\n }\n\n private get ratioLower() {\n if (this.dualKnobs) {\n return Math.min(this.ratioA, this.ratioB);\n }\n return 0;\n }\n\n private get ratioUpper() {\n if (this.dualKnobs) {\n return Math.max(this.ratioA, this.ratioB);\n }\n return this.ratioA;\n }\n\n private updateRatio() {\n const value = this.getValue() as any;\n const { min, max } = this;\n if (this.dualKnobs) {\n this.ratioA = valueToRatio(value.lower, min, max);\n this.ratioB = valueToRatio(value.upper, min, max);\n } else {\n this.ratioA = valueToRatio(value, min, max);\n }\n }\n\n private updateValue() {\n this.noUpdate = true;\n\n const { valA, valB } = this;\n this.value = !this.dualKnobs\n ? valA\n : {\n lower: Math.min(valA, valB),\n upper: Math.max(valA, valB),\n };\n\n this.noUpdate = false;\n }\n\n private setFocus(knob: KnobName) {\n if (this.el.shadowRoot) {\n const knobEl = this.el.shadowRoot.querySelector(\n knob === 'A' ? '.range-knob-a' : '.range-knob-b'\n ) as HTMLElement \| undefined;\n if (knobEl) {\n knobEl.focus();\n }\n }\n }\n\n private onBlur = () => {\n if (this.hasFocus) {\n this.hasFocus = false;\n this.nanoBlur.emit();\n this.emitStyle();\n }\n };\n\n private onFocus = () => {\n if (!this.hasFocus) {\n this.hasFocus = true;\n this.nanoFocus.emit();\n this.emitStyle();\n }\n };\n\n render() {\n const {\n min,\n max,\n step,\n el,\n handleKeyboard,\n pressedKnob,\n disabled,\n pin,\n ratioLower,\n ratioUpper,\n } = this;\n\n const barStart = `${ratioLower * 100}%`;\n const barEnd = `${100 - ratioUpper * 100}%`;\n\n const doc = document;\n const isRTL = doc.dir === 'rtl';\n const start = isRTL ? 'right' : 'left';\n const end = isRTL ? 'left' : 'right';\n\n const tickStyle = (tick: any) => {\n return {\n [start]: tick[start],\n };\n };\n\n const barStyle = {\n [start]: barStart,\n [end]: barEnd,\n };\n\n const ticks = [];\n if (this.snaps && this.ticks) {\n for (let value = min; value <= max; value += step) {\n const ratio = valueToRatio(value, min, max);\n\n const tick: any = {\n ratio,\n active: ratio >= ratioLower && ratio <= ratioUpper,\n };\n\n tick[start] = `${ratio * 100}%`;\n\n ticks.push(tick);\n }\n }\n\n renderHiddenInput(el, this.name, JSON.stringify(this.getValue()), disabled);\n\n return (\n <Host\n onFocusin={this.onFocus}\n onFocusout={this.onBlur}\n class={createColorClasses(this.color, {\n 'range-disabled': disabled,\n 'range-pressed': pressedKnob !== undefined,\n 'range-has-pin': pin,\n 'range-snaps': this.snaps,\n })}\n >\n <div class=\"range-wrap\">\n <slot name=\"start\"></slot>\n <div\n class=\"range-slider\"\n ref={(rangeEl) => (this.rangeSlider = rangeEl)}\n >\n {ticks.map((tick) => (\n <span\n style={tickStyle(tick)}\n role=\"presentation\"\n class={{\n 'range-tick': true,\n 'range-tick-active': tick.active,\n }}\n part={tick.active ? 'tick-active' : 'tick'}\n />\n ))}\n\n <div class=\"range-bar\" role=\"presentation\" part=\"bar\" />\n <div\n class=\"range-bar range-bar-active\"\n role=\"presentation\"\n style={barStyle}\n part=\"bar-active\"\n />\n\n {renderKnob(isRTL, {\n knob: 'A',\n pressed: pressedKnob === 'A',\n value: this.valA,\n ratio: this.ratioA,\n pin,\n disabled,\n handleKeyboard,\n min,\n max,\n })}\n\n {this.dualKnobs &&\n renderKnob(isRTL, {\n knob: 'B',\n pressed: pressedKnob === 'B',\n value: this.valB,\n ratio: this.ratioB,\n pin,\n disabled,\n handleKeyboard,\n min,\n max,\n })}\n </div>\n <slot name=\"end\"></slot>\n </div>\n </Host>\n );\n }\n}\n\ninterface RangeKnob {\n knob: KnobName;\n value: number;\n ratio: number;\n min: number;\n max: number;\n disabled: boolean;\n pressed: boolean;\n pin: boolean;\n\n handleKeyboard: (name: KnobName, isIncrease: boolean) => void;\n}\n\nconst renderKnob = (\n isRTL: boolean,\n {\n knob,\n value,\n ratio,\n min,\n max,\n disabled,\n pressed,\n pin,\n handleKeyboard,\n }: RangeKnob\n) => {\n const start = isRTL ? 'right' : 'left';\n\n const knobStyle = () => {\n const style: any = {};\n style[start] = `${ratio * 100}%`;\n return style;\n };\n\n return (\n <div\n onKeyDown={(ev: KeyboardEvent) => {\n const key = ev.key;\n if (key === 'ArrowLeft' \|\| key === 'ArrowDown') {\n handleKeyboard(knob, false);\n ev.preventDefault();\n ev.stopPropagation();\n } else if (key === 'ArrowRight' \|\| key === 'ArrowUp') {\n handleKeyboard(knob, true);\n ev.preventDefault();\n ev.stopPropagation();\n }\n }}\n class={{\n 'range-knob-handle': true,\n 'range-knob-a': knob === 'A',\n 'range-knob-b': knob === 'B',\n 'range-knob-pressed': pressed,\n 'range-knob-min': value === min,\n 'range-knob-max': value === max,\n }}\n style={knobStyle()}\n role=\"slider\"\n tabindex={disabled ? -1 : 0}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-disabled={disabled ? 'true' : null}\n aria-valuenow={value}\n >\n {pin && (\n <div class=\"range-pin\" role=\"presentation\" part=\"pin\">\n {Math.round(value)}\n </div>\n )}\n <div class=\"range-knob\" role=\"presentation\" part=\"knob\" />\n </div>\n );\n};\n\nconst ratioToValue = (\n ratio: number,\n min: number,\n max: number,\n step: number\n): number => {\n let value = (max - min) * ratio;\n if (step > 0) {\n value = Math.round(value / step) * step + min;\n }\n return clamp(min, value, max);\n};\n\nconst valueToRatio = (value: number, min: number, max: number): number => {\n return clamp(0, (value - min) / (max - min), 1);\n};\n"],"version":3}
1	+ {"file":"nano-range.js","mappings":"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","names":[],"sources":["./src/utils/form.ts","./src/components/range/range.scss?tag=nano-range&encapsulation=scoped","./src/components/range/range.tsx"],"sourcesContent":["export const renderHiddenInput = (\n container: HTMLElement,\n name: string,\n value: string \| undefined \| null,\n disabled: boolean\n) => {\n let input = container.querySelector(\n 'input.aux-input'\n ) as HTMLInputElement \| null;\n if (!input) {\n input = container.ownerDocument!.createElement('input');\n input.type = 'hidden';\n input.classList.add('aux-input');\n container.appendChild(input);\n }\n input.disabled = disabled;\n input.name = name;\n input.value = value \|\| '';\n};\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n// Range\n// --------------------------------------------------\n\n:host {\n /*\n @prop --knob-handle-size: defaults to calc(var(--knob-size) * 2);\n * @prop --rgb-inactive: defaults to #{color-to-rgb-list(#a5a5a5)};\n * @prop --bar-background: Background of the range bar; Defaults to #e2e1e0;\n * @prop --bar-background-active: Background of the active range bar; Defaults to #a5a5a5;\n * @prop --bar-height: Height of the range bar; Defaults to 8px;\n * @prop --bar-border-radius: Border radius of the range bar; Defaults to 4px;\n * @prop --height: Height of the range. Defaults to 42px;\n * @prop --knob-background: Background of the range knob. Defaults to #{nano-color(primary, base)};\n * @prop --knob-border-radius: Border radius of the range knob. Defaults to 50%;\n * @prop --knob-box-shadow: Box shadow of the range knob; Defaults to 0 2px 4px 0 rgb(0 0 0 / 30%);\n * @prop --knob-size: Size of the range knob; Defaults to 30px;\n * @prop --pin-background: Background of the range pin; Defaults to #{nano-color(primary, base)};\n * @prop --pin-color: Color of the range pin; Defaults to #{nano-color(primary, contrast)};\n * @prop --focus-style: Focus shadow around knob; Defaults to 0 0 0 5px #{$control-focus-color};\n /\n --knob-handle-size: (var(--knob-size) 2);\n --rgb-inactive: #{color-to-rgb-list(#a5a5a5)};\n --knob-border-radius: 50%;\n --knob-background: #{nano-color(primary, base)};\n --knob-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 30%);\n --knob-size: 30px;\n --bar-height: 8px;\n --bar-background: #e2e1e0;\n --bar-background-active: #a5a5a5;\n --bar-border-radius: 4px;\n --height: 42px;\n --pin-background: #{nano-color(primary, base)};\n --pin-color: #{nano-color(primary, contrast)};\n --focus-style: 0 0 0 5px #{$control-focus-color};\n}\n\n.range-wrap {\n display: flex;\n position: relative;\n flex: 3;\n align-items: center;\n user-select: none;\n\n ::slotted(ion-icon[slot]) {\n font-size: 1.5em;\n }\n\n ::slotted([slot='start']) {\n margin-inline: 0 14px;\n margin-block: 0;\n font-size: 0.9em;\n }\n\n ::slotted([slot='end']) {\n margin-inline: 14px 0;\n margin-block: 0;\n font-size: 0.9em;\n }\n}\n\n.range-slider {\n position: relative;\n flex: 1;\n width: 100%;\n height: var(--height);\n contain: size layout style;\n cursor: grab;\n touch-action: pan-y;\n}\n\n:host(.range-pressed) .range-slider {\n cursor: grabbing;\n}\n\n// bar\n\n.range-bar {\n border-radius: var(--bar-border-radius);\n inset-block-start: calc((var(--height) - var(--bar-height)) / 2);\n inset-inline-start: 0;\n position: absolute;\n width: 100%;\n height: var(--bar-height);\n background: var(--bar-background);\n pointer-events: none;\n\n :host(.range-snaps) & {\n border-radius: var(--bar-border-radius) 0 0 var(--bar-border-radius);\n }\n}\n\n.range-bar-active {\n inset-block-end: 0;\n width: auto;\n background: var(--bar-background-active);\n\n :host(.range-pressed) {\n will-change: left, right;\n }\n}\n\n// knob\n\n.range-knob {\n border-radius: var(--knob-border-radius);\n inset-block-start: calc(50% - var(--knob-size) / 2);\n inset-inline-start: calc(50% - var(--knob-size) / 2);\n position: absolute;\n width: var(--knob-size);\n height: var(--knob-size);\n background: var(--knob-background);\n box-shadow: var(--knob-box-shadow);\n z-index: 2;\n pointer-events: none;\n transform: scale(0.67);\n transition-duration: 120ms;\n transition-property: transform, background-color, border;\n transition-timing-function: ease;\n\n :host(:not(.range-has-pin)) .range-knob-pressed & {\n transform: scale(1);\n }\n}\n\n.range-knob-handle {\n inset-block-start: calc((var(--height) - var(--knob-handle-size)) / 2);\n inset-inline-start: 0;\n margin-inline-start: calc(0px - var(--knob-handle-size) / 2);\n position: absolute;\n width: calc(var(--knob-handle-size));\n height: calc(var(--knob-handle-size));\n text-align: center;\n\n &:active,\n &:focus {\n outline: none;\n\n .range-knob {\n box-shadow: var(--knob-box-shadow), var(--focus-style);\n }\n }\n}\n\n// ticks\n\n.range-tick {\n position: absolute;\n inset-block-start: calc((var(--height) - var(--bar-height)) / 2);\n width: var(--bar-height);\n height: var(--bar-height);\n background: var(--bar-background-active);\n z-index: 1;\n pointer-events: none;\n\n &:first-of-type {\n border-radius: var(--bar-border-radius) 0 0 var(--bar-border-radius);\n }\n\n &:last-of-type {\n border-radius: 0 var(--bar-border-radius) var(--bar-border-radius) 0;\n }\n\n &-active {\n background: transparent;\n }\n}\n\n// pin\n\n.range-pin {\n transform: translate3d(0, 0, 0) scale(0.01);\n transform-origin: center top;\n padding: 0.66em 0;\n border-radius: 50%;\n text-align: center;\n box-sizing: border-box;\n display: inline-block;\n position: relative;\n min-width: 2.33em;\n height: 2.33em;\n transition: transform 120ms ease, background 120ms ease;\n background: var(--pin-background);\n color: var(--pin-color);\n font-size: 0.75em;\n\n &::before {\n inset-block-start: 0.25em;\n inset-inline-start: 50%;\n margin-inline-start: -1.08em;\n border-radius: 50% 50% 50% 0;\n position: absolute;\n width: 2.16em;\n height: 2.16em;\n transform: rotate(-45deg);\n transition: background 120ms ease;\n background: var(--pin-background);\n content: '';\n z-index: -1;\n }\n\n .range-knob-pressed & {\n transform: translate3d(0, -50%, 0) scale(1);\n transform: translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);\n }\n}\n\n// disabled\n\n:host(.range-disabled) {\n pointer-events: none;\n\n .range-bar-active,\n .range-bar,\n .range-tick {\n background-color: rgb(var(--rgb-inactive) / 50%);\n }\n\n .range-knob {\n transform: scale(0.55);\n outline: 5px solid #fff;\n background-color: rgb(var(--rgb-inactive) / 50%);\n }\n}\n\n// theme\n\n:host(.nano-color) {\n .range-bar-active,\n .range-knob,\n .range-pin,\n .range-pin::before,\n .range-tick {\n background: current-color(base);\n color: current-color(contrast);\n }\n\n .range-bar {\n background: current-color(base, 0.26);\n }\n\n .range-knob-handle {\n &:active,\n &:focus {\n .range-knob {\n box-shadow: var(--knob-box-shadow), 0 0 0 5px current-color(tint, 0.56);\n }\n }\n }\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport { renderHiddenInput } from '../../utils/form';\nimport { clamp } from '../../utils/math';\nimport { createColorClasses } from '../../utils/theme';\nimport { debounceEvent } from '../../utils/throttle';\nimport type {\n Color,\n Gesture,\n GestureDetail,\n KnobName,\n RangeChangeEventDetail,\n RangeValue,\n StyleEventDetail,\n} from '../../interface';\n\n/*\n The Range slider lets users select from a range of values by moving\n * the slider knob. It can accept dual knobs, but by default one knob controls the value of the range.\n \n Labels can be placed on either side of the range by adding the\n * `slot=\"start\"` or `slot=\"end\"` to the element.\n \n @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.\n * @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.\n /\n@Component({\n tag: 'nano-range',\n styleUrl: 'range.scss',\n scoped: true,\n})\nexport class Range implements ComponentInterface {\n private noUpdate = false;\n private rect!: ClientRect;\n private hasFocus = false;\n private rangeSlider?: HTMLElement;\n private gesture?: Gesture;\n\n @Element() el!: HTMLNanoRangeElement;\n\n @State() private ratioA = 0;\n @State() private ratioB = 0;\n @State() private pressedKnob: KnobName;\n\n /\n The color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`\n /\n @Prop() color?: Color;\n\n /\n How long, in milliseconds, to wait to trigger the\n * `nanoChange` event after each change in the range value.\n /\n @Prop() debounce = 0;\n\n @Watch('debounce')\n protected debounceChanged() {\n this.nanoChange = debounceEvent(this.nanoChange, this.debounce);\n }\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop() name = '';\n\n /\n Show two knobs.\n /\n @Prop() dualKnobs = false;\n\n /\n Minimum integer value of the range.\n /\n @Prop() min = 0;\n @Watch('min')\n protected minChanged() {\n if (!this.noUpdate) {\n this.updateRatio();\n }\n }\n\n /\n Maximum integer value of the range.\n /\n @Prop() max = 100;\n @Watch('max')\n protected maxChanged() {\n if (!this.noUpdate) {\n this.updateRatio();\n }\n }\n\n /\n If `true`, a pin with integer value is shown when the knob\n * is pressed.\n /\n @Prop() pin = false;\n\n /\n If `true`, the knob snaps to tick marks evenly spaced based\n * on the step property value.\n /\n @Prop() snaps = false;\n\n /\n Specifies the value granularity.\n /\n @Prop() step = 1;\n\n /\n If `true`, tick marks are displayed based on the step value.\n * Only applies when `snaps` is `true`.\n /\n @Prop() ticks = false;\n\n /\n If `true`, the user cannot interact with the range.\n /\n @Prop() disabled = false;\n @Watch('disabled')\n protected disabledChanged() {\n if (this.gesture) {\n this.gesture.enable(!this.disabled);\n }\n this.emitStyle();\n }\n\n /\n the value of the range.\n /\n @Prop({ mutable: true }) value: RangeValue = 0;\n @Watch('value')\n protected valueChanged(value: RangeValue) {\n if (!this.noUpdate) {\n this.updateRatio();\n }\n\n value = this.ensureValueInBounds(value);\n\n this.nanoChange.emit({ value });\n }\n\n private clampBounds = (value: any): number => {\n return clamp(this.min, value, this.max);\n };\n\n private ensureValueInBounds = (value: any) => {\n if (this.dualKnobs) {\n return {\n lower: this.clampBounds(value.lower),\n upper: this.clampBounds(value.upper),\n };\n } else {\n return this.clampBounds(value);\n }\n };\n\n /\n Emitted when the value property has changed.\n /\n @Event() nanoChange!: EventEmitter<RangeChangeEventDetail>;\n\n /\n Emitted when the styles change.\n * @internal\n /\n @Event() nanoStyle!: EventEmitter<StyleEventDetail>;\n\n /\n Emitted when the range has focus.\n /\n @Event() nanoFocus!: EventEmitter<void>;\n\n /\n Emitted when the range loses focus.\n /\n @Event() nanoBlur!: EventEmitter<void>;\n\n connectedCallback() {\n this.updateRatio();\n this.debounceChanged();\n this.disabledChanged();\n }\n\n disconnectedCallback() {\n if (this.gesture) {\n this.gesture.destroy();\n this.gesture = undefined;\n }\n }\n\n async componentDidLoad() {\n const rangeSlider = this.rangeSlider;\n if (rangeSlider) {\n this.gesture = (await import('../../utils/gesture/index')).createGesture({\n el: rangeSlider,\n gestureName: 'range',\n gesturePriority: 100,\n threshold: 0,\n onStart: (ev) => this.onStart(ev),\n onMove: (ev) => this.onMove(ev),\n onEnd: (ev) => this.onEnd(ev),\n });\n this.gesture.enable(!this.disabled);\n }\n }\n\n private handleKeyboard = (knob: KnobName, isIncrease: boolean) => {\n let step = this.step;\n step = step > 0 ? step : 1;\n step = step / (this.max - this.min);\n if (!isIncrease) {\n step = -1;\n }\n if (knob === 'A') {\n this.ratioA = clamp(0, this.ratioA + step, 1);\n } else {\n this.ratioB = clamp(0, this.ratioB + step, 1);\n }\n this.updateValue();\n };\n\n private getValue(): RangeValue {\n const value = this.value \|\| 0;\n if (this.dualKnobs) {\n if (typeof value === 'object') {\n return value;\n }\n return {\n lower: 0,\n upper: value,\n };\n } else {\n if (typeof value === 'object') {\n return value.upper;\n }\n return value;\n }\n }\n\n private emitStyle() {\n this.nanoStyle.emit({\n interactive: true,\n 'interactive-disabled': this.disabled,\n });\n }\n\n private onStart(detail: GestureDetail) {\n const rect = (this.rect = this.rangeSlider!.getBoundingClientRect() as any);\n const currentX = detail.currentX;\n\n // figure out which knob they started closer to\n let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n if (document.dir === 'rtl') {\n ratio = 1 - ratio;\n }\n\n this.pressedKnob =\n !this.dualKnobs \|\|\n Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio)\n ? 'A'\n : 'B';\n\n this.setFocus(this.pressedKnob);\n\n // update the active knob's position\n this.update(currentX);\n }\n\n private onMove(detail: GestureDetail) {\n this.update(detail.currentX);\n }\n\n private onEnd(detail: GestureDetail) {\n this.update(detail.currentX);\n this.pressedKnob = undefined;\n }\n\n private update(currentX: number) {\n // figure out where the pointer is currently at\n // update the knob being interacted with\n const rect = this.rect;\n let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n if (document.dir === 'rtl') {\n ratio = 1 - ratio;\n }\n\n if (this.snaps) {\n // snaps the ratio to the current value\n ratio = valueToRatio(\n ratioToValue(ratio, this.min, this.max, this.step),\n this.min,\n this.max\n );\n }\n\n // update which knob is pressed\n if (this.pressedKnob === 'A') {\n this.ratioA = ratio;\n } else {\n this.ratioB = ratio;\n }\n\n // Update input value\n this.updateValue();\n }\n\n private get valA() {\n return ratioToValue(this.ratioA, this.min, this.max, this.step);\n }\n\n private get valB() {\n return ratioToValue(this.ratioB, this.min, this.max, this.step);\n }\n\n private get ratioLower() {\n if (this.dualKnobs) {\n return Math.min(this.ratioA, this.ratioB);\n }\n return 0;\n }\n\n private get ratioUpper() {\n if (this.dualKnobs) {\n return Math.max(this.ratioA, this.ratioB);\n }\n return this.ratioA;\n }\n\n private updateRatio() {\n const value = this.getValue() as any;\n const { min, max } = this;\n if (this.dualKnobs) {\n this.ratioA = valueToRatio(value.lower, min, max);\n this.ratioB = valueToRatio(value.upper, min, max);\n } else {\n this.ratioA = valueToRatio(value, min, max);\n }\n }\n\n private updateValue() {\n this.noUpdate = true;\n\n const { valA, valB } = this;\n this.value = !this.dualKnobs\n ? valA\n : {\n lower: Math.min(valA, valB),\n upper: Math.max(valA, valB),\n };\n\n this.noUpdate = false;\n }\n\n private setFocus(knob: KnobName) {\n if (this.el.shadowRoot) {\n const knobEl = this.el.shadowRoot.querySelector(\n knob === 'A' ? '.range-knob-a' : '.range-knob-b'\n ) as HTMLElement \| undefined;\n if (knobEl) {\n knobEl.focus();\n }\n }\n }\n\n private onBlur = () => {\n if (this.hasFocus) {\n this.hasFocus = false;\n this.nanoBlur.emit();\n this.emitStyle();\n }\n };\n\n private onFocus = () => {\n if (!this.hasFocus) {\n this.hasFocus = true;\n this.nanoFocus.emit();\n this.emitStyle();\n }\n };\n\n render() {\n const {\n min,\n max,\n step,\n el,\n handleKeyboard,\n pressedKnob,\n disabled,\n pin,\n ratioLower,\n ratioUpper,\n } = this;\n\n const barStart = `${ratioLower * 100}%`;\n const barEnd = `${100 - ratioUpper * 100}%`;\n\n const doc = document;\n const isRTL = doc.dir === 'rtl';\n const start = isRTL ? 'right' : 'left';\n const end = isRTL ? 'left' : 'right';\n\n const tickStyle = (tick: any) => {\n return {\n [start]: tick[start],\n };\n };\n\n const barStyle = {\n [start]: barStart,\n [end]: barEnd,\n };\n\n const ticks = [];\n if (this.snaps && this.ticks) {\n for (let value = min; value <= max; value += step) {\n const ratio = valueToRatio(value, min, max);\n\n const tick: any = {\n ratio,\n active: ratio >= ratioLower && ratio <= ratioUpper,\n };\n\n tick[start] = `${ratio * 100}%`;\n\n ticks.push(tick);\n }\n }\n\n renderHiddenInput(el, this.name, JSON.stringify(this.getValue()), disabled);\n\n return (\n <Host\n onFocusin={this.onFocus}\n onFocusout={this.onBlur}\n class={createColorClasses(this.color, {\n 'range-disabled': disabled,\n 'range-pressed': pressedKnob !== undefined,\n 'range-has-pin': pin,\n 'range-snaps': this.snaps,\n })}\n >\n <div class=\"range-wrap\">\n <slot name=\"start\"></slot>\n <div\n class=\"range-slider\"\n ref={(rangeEl) => (this.rangeSlider = rangeEl)}\n >\n {ticks.map((tick) => (\n <span\n style={tickStyle(tick)}\n role=\"presentation\"\n class={{\n 'range-tick': true,\n 'range-tick-active': tick.active,\n }}\n part={tick.active ? 'tick-active' : 'tick'}\n />\n ))}\n\n <div class=\"range-bar\" role=\"presentation\" part=\"bar\" />\n <div\n class=\"range-bar range-bar-active\"\n role=\"presentation\"\n style={barStyle}\n part=\"bar-active\"\n />\n\n {renderKnob(isRTL, {\n knob: 'A',\n pressed: pressedKnob === 'A',\n value: this.valA,\n ratio: this.ratioA,\n pin,\n disabled,\n handleKeyboard,\n min,\n max,\n })}\n\n {this.dualKnobs &&\n renderKnob(isRTL, {\n knob: 'B',\n pressed: pressedKnob === 'B',\n value: this.valB,\n ratio: this.ratioB,\n pin,\n disabled,\n handleKeyboard,\n min,\n max,\n })}\n </div>\n <slot name=\"end\"></slot>\n </div>\n </Host>\n );\n }\n}\n\ninterface RangeKnob {\n knob: KnobName;\n value: number;\n ratio: number;\n min: number;\n max: number;\n disabled: boolean;\n pressed: boolean;\n pin: boolean;\n\n handleKeyboard: (name: KnobName, isIncrease: boolean) => void;\n}\n\nconst renderKnob = (\n isRTL: boolean,\n {\n knob,\n value,\n ratio,\n min,\n max,\n disabled,\n pressed,\n pin,\n handleKeyboard,\n }: RangeKnob\n) => {\n const start = isRTL ? 'right' : 'left';\n\n const knobStyle = () => {\n const style: any = {};\n style[start] = `${ratio * 100}%`;\n return style;\n };\n\n return (\n <div\n onKeyDown={(ev: KeyboardEvent) => {\n const key = ev.key;\n if (key === 'ArrowLeft' \|\| key === 'ArrowDown') {\n handleKeyboard(knob, false);\n ev.preventDefault();\n ev.stopPropagation();\n } else if (key === 'ArrowRight' \|\| key === 'ArrowUp') {\n handleKeyboard(knob, true);\n ev.preventDefault();\n ev.stopPropagation();\n }\n }}\n class={{\n 'range-knob-handle': true,\n 'range-knob-a': knob === 'A',\n 'range-knob-b': knob === 'B',\n 'range-knob-pressed': pressed,\n 'range-knob-min': value === min,\n 'range-knob-max': value === max,\n }}\n style={knobStyle()}\n role=\"slider\"\n tabindex={disabled ? -1 : 0}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-disabled={disabled ? 'true' : null}\n aria-valuenow={value}\n >\n {pin && (\n <div class=\"range-pin\" role=\"presentation\" part=\"pin\">\n {Math.round(value)}\n </div>\n )}\n <div class=\"range-knob\" role=\"presentation\" part=\"knob\" />\n </div>\n );\n};\n\nconst ratioToValue = (\n ratio: number,\n min: number,\n max: number,\n step: number\n): number => {\n let value = (max - min) * ratio;\n if (step > 0) {\n value = Math.round(value / step) * step + min;\n }\n return clamp(min, value, max);\n};\n\nconst valueToRatio = (value: number, min: number, max: number): number => {\n return clamp(0, (value - min) / (max - min), 1);\n};\n"],"version":3}

package/dist/components/nano-slides.js CHANGED Viewed

@@ -3820,7 +3820,7 @@ proto.shiftWrapCells = function () {
 const flickity = Flickity;
-const slidesCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--dot-color:#ccc;--dot-color-active:var(--nano-color-primary, #007495);--navbtns-icon-color:var(--dot-color-active);--navbtns-bg-color:white;--navbtns-icon-color-disabled:var(--dot-color-active);--navbtns-bg-color-disabled:white;--fsbtn-icon-color:var(--dot-color-active);--fsbtn-bg-color:white;display:block;-webkit-user-select:none;user-select:none;overflow:hidden;transition:opacity 0.2s;opacity:0;max-width:100vw}:host([ready]){opacity:1}.slideshow{max-height:100%;min-height:inherit;height:inherit;position:relative}.slideshow.not-ready{max-width:100vw}.flickity-container{opacity:0;transition:opacity 0.2s;display:flex}.not-ready .flickity-container{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.flickity-container.slides-ready{min-height:inherit;max-height:inherit;height:inherit;width:auto}[hidden]{display:none !important}.ui-extras{pointer-events:none;position:absolute;block-size:100%;inline-size:100%;inset-block-start:0;inset-inline-start:0}.ui-extras *{pointer-events:all}/*! Flickity v2.2.1\nhttps://flickity.metafizzy.co\n---------------------------------------------- */.flickity-enabled{position:relative;opacity:1}.flickity-enabled:focus{outline:none}.flickity-viewport{overflow:hidden;position:relative;min-block-size:100%;flex:1}.flickity-slider{position:absolute;inline-size:100%;block-size:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:grabbing}.flickity-button{position:absolute;background:var(--navbtns-bg-color);border:none;color:#333;opacity:0.75}.flickity-button:hover{opacity:1;cursor:pointer}.flickity-button:focus{outline:none;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:0.6}.flickity-button:disabled{opacity:0.3;cursor:auto;pointer-events:none;background:var(--navbtns-bg-color-disabled)}.flickity-button-icon{fill:var(--navbtns-icon-color)}.flickity-button:disabled .flickity-button-icon{fill:var(--navbtns-icon-color-disabled)}.flickity-prev-next-button{inset-block-start:50%;inline-size:44px;block-size:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{inset-inline-start:10px}.flickity-prev-next-button.next{inset-inline-end:10px}.flickity-rtl .flickity-prev-next-button.previous{inset-inline:auto 10px}.flickity-rtl .flickity-prev-next-button.next{inset-inline:10px auto}.flickity-prev-next-button .flickity-button-icon{position:absolute;inset-inline-start:20%;inset-block-start:20%;inline-size:60%;block-size:60%}.flickity-page-dots{position:absolute;inline-size:100%;inset-block-end:10px;padding:0;margin:0;list-style:none;text-align:center;line-height:1;z-index:4}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;inline-size:10px;block-size:10px;margin-block:0;margin-inline:8px;border-radius:50%;cursor:pointer;background:var(--dot-color)}.flickity-page-dots .dot.is-selected{opacity:1;background:var(--dot-color-active)}.flickity-enabled.is-fullscreen{position:fixed;inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;background:rgba(0, 0, 0, 0.9);-webkit-padding-after:35px;padding-block-end:35px;z-index:100}.flickity-enabled.is-fullscreen .flickity-page-dots{inset-block-end:45px}html.is-flickity-fullscreen{overflow:hidden}.flickity-fullscreen-button{display:block;inset-inline-end:10px;inset-block-start:10px;inline-size:24px;block-size:24px;border-radius:4px;background:var(--fsbtn-bg-color);fill:var(--fsbtn-icon-color)}.flickity-rtl .flickity-fullscreen-button{inset-inline:10px auto}.flickity-fullscreen-button-exit{display:none}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit{display:block}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view{display:none}.flickity-fullscreen-button .flickity-button-icon{position:absolute;inline-size:16px;block-size:16px;inset-inline-start:4px;inset-block-start:4px}.flickity-enabled.is-fade .flickity-slider>*{pointer-events:none;z-index:0}.flickity-enabled.is-fade .flickity-slider ::slotted(.is-selected){pointer-events:auto;z-index:1}";
+const slidesCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--dot-color:#ccc;--dot-color-active:var(--nano-color-primary, #007495);--navbtns-icon-color:var(--dot-color-active);--navbtns-bg-color:white;--navbtns-icon-color-disabled:var(--dot-color-active);--navbtns-bg-color-disabled:white;--fsbtn-icon-color:var(--dot-color-active);--fsbtn-bg-color:white;display:block;-webkit-user-select:none;user-select:none;overflow:hidden;transition:opacity 0.2s;opacity:0;max-width:100vw}:host([ready]){opacity:1}.slideshow{max-height:100%;min-height:inherit;height:inherit;position:relative}.slideshow.not-ready{max-width:98vw}.flickity-container{opacity:0;transition:opacity 0.2s;display:flex;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.not-ready .flickity-container{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}.flickity-container.slides-ready{min-height:inherit;max-height:inherit;height:inherit;width:auto}[hidden]{display:none !important}.ui-extras{pointer-events:none;position:absolute;block-size:100%;inline-size:100%;inset-block-start:0;inset-inline-start:0}.ui-extras *{pointer-events:all}/*! Flickity v2.2.1\nhttps://flickity.metafizzy.co\n---------------------------------------------- */.flickity-enabled{position:relative;opacity:1}.flickity-enabled:focus{outline:none}.flickity-viewport{overflow:hidden;position:relative;min-block-size:100%;flex:1}.flickity-slider{position:absolute;inline-size:100%;block-size:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:grabbing}.flickity-button{position:absolute;background:var(--navbtns-bg-color);border:none;color:#333;opacity:0.75}.flickity-button:hover{opacity:1;cursor:pointer}.flickity-button:focus{outline:none;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:0.6}.flickity-button:disabled{opacity:0.3;cursor:auto;pointer-events:none;background:var(--navbtns-bg-color-disabled)}.flickity-button-icon{fill:var(--navbtns-icon-color)}.flickity-button:disabled .flickity-button-icon{fill:var(--navbtns-icon-color-disabled)}.flickity-prev-next-button{inset-block-start:50%;inline-size:44px;block-size:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{inset-inline-start:10px}.flickity-prev-next-button.next{inset-inline-end:10px}.flickity-rtl .flickity-prev-next-button.previous{inset-inline:auto 10px}.flickity-rtl .flickity-prev-next-button.next{inset-inline:10px auto}.flickity-prev-next-button .flickity-button-icon{position:absolute;inset-inline-start:20%;inset-block-start:20%;inline-size:60%;block-size:60%}.flickity-page-dots{position:absolute;inline-size:100%;inset-block-end:10px;padding:0;margin:0;list-style:none;text-align:center;line-height:1;z-index:4}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;inline-size:10px;block-size:10px;margin-block:0;margin-inline:8px;border-radius:50%;cursor:pointer;background:var(--dot-color)}.flickity-page-dots .dot.is-selected{opacity:1;background:var(--dot-color-active)}.flickity-enabled.is-fullscreen{position:fixed;inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;background:rgba(0, 0, 0, 0.9);-webkit-padding-after:35px;padding-block-end:35px;z-index:100}.flickity-enabled.is-fullscreen .flickity-page-dots{inset-block-end:45px}html.is-flickity-fullscreen{overflow:hidden}.flickity-fullscreen-button{display:block;inset-inline-end:10px;inset-block-start:10px;inline-size:24px;block-size:24px;border-radius:4px;background:var(--fsbtn-bg-color);fill:var(--fsbtn-icon-color)}.flickity-rtl .flickity-fullscreen-button{inset-inline:10px auto}.flickity-fullscreen-button-exit{display:none}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit{display:block}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view{display:none}.flickity-fullscreen-button .flickity-button-icon{position:absolute;inline-size:16px;block-size:16px;inset-inline-start:4px;inset-block-start:4px}.flickity-enabled.is-fade .flickity-slider>*{pointer-events:none;z-index:0}.flickity-enabled.is-fade .flickity-slider ::slotted(.is-selected){pointer-events:auto;z-index:1}";
 const Slides = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
   constructor() {
@@ -4107,6 +4107,7 @@ const Slides = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
       this.flickityEl.classList.contains('flickity-enabled'))
       this.destroyflickity();
     setTimeout(() => {
+      this.flickityEl.style.height = '';
       const flick = new flickity(this.flickityEl, finalOptions);
       this.flickityReady = true;
       this.syncflickity = flick;
@@ -4117,18 +4118,14 @@ const Slides = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
       this.fullscreenBtnChanged();
       this.readyflickity(flick);
       this.ready = true;
-      this.flickityEl.style.height = '';
-      // the slideshow has been initialised without any dimensions - let's add a one shot
-      // resize observer to kick it off when it gets some dimensions
-      if (!this.host.getBoundingClientRect().height) {
-        if (!window['ResizeObserver'])
-          return;
-        const ro = (this.resizeO = new ResizeObserver(() => {
-          flick.resize();
-          this.resizeO.disconnect();
-        }));
-        ro.observe(this.host);
-      }
+      if (!window['ResizeObserver'])
+        return;
+      // just boots and brances to make sure it's the correct size oninit
+      const ro = (this.resizeO = new ResizeObserver(() => {
+        flick.resize();
+        this.resizeO.disconnect();
+      }));
+      ro.observe(this.host);
     }, 100);
   }
   normalizeOptions() {