@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/danger-button/danger-button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"danger-button.styles.js","sourceRoot":"","sources":["../../../components/danger-button/danger-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAylChB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`@charset \"UTF-8\";\n.cre8-u-content-knockout-brand {\n  color: var(----cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n  display: none !important;\n  visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n  position: absolute !important;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n  .cre8-u-hide-sm {\n    display: none !important;\n  }\n}\n@media all and (min-width: 35rem) {\n  .cre8-u-hide-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (min-width: 48rem) {\n  .cre8-u-hide-md {\n    display: none !important;\n  }\n}\n@media all and (min-width: 60rem) {\n  .cre8-u-hide-lg {\n    display: none !important;\n  }\n}\n@media all and (min-width: 75rem) {\n  .cre8-u-hide-xl {\n    display: none !important;\n  }\n}\n@media all and (max-width: 23.4375rem) {\n  .cre8-u-show-sm {\n    display: none !important;\n  }\n}\n@media all and (max-width: 35rem) {\n  .cre8-u-show-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (max-width: 48rem) {\n  .cre8-u-show-md {\n    display: none !important;\n  }\n}\n@media all and (max-width: 60rem) {\n  .cre8-u-show-lg {\n    display: none !important;\n  }\n}\n@media all and (max-width: 75rem) {\n  .cre8-u-show-xl {\n    display: none !important;\n  }\n}\n.cre8-u-margin-none {\n  margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n  margin: size(1) !important;\n}\n\n.cre8-u-margin-md {\n  margin: size(2) !important;\n}\n\n.cre8-u-margin-lg {\n  margin: size(3) !important;\n}\n\n.cre8-u-margin-xl {\n  margin: size(4) !important;\n}\n\n.cre8-u-margin-xxl {\n  margin: size(8) !important;\n}\n\n.cre8-u-margin-top-none {\n  margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n  margin-top: size(1) !important;\n}\n\n.cre8-u-margin-top-md {\n  margin-top: size(2) !important;\n}\n\n.cre8-u-margin-top-lg {\n  margin-top: size(3) !important;\n}\n\n.cre8-u-margin-top-xl {\n  margin-top: size(4) !important;\n}\n\n.cre8-u-margin-top-xxl {\n  margin-top: size(8) !important;\n}\n\n.cre8-u-margin-right-none {\n  margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n  margin-right: size(1) !important;\n}\n\n.cre8-u-margin-right-md {\n  margin-right: size(2) !important;\n}\n\n.cre8-u-margin-right-lg {\n  margin-right: size(3) !important;\n}\n\n.cre8-u-margin-right-xl {\n  margin-right: size(4) !important;\n}\n\n.cre8-u-margin-right-xxl {\n  margin-right: size(8) !important;\n}\n\n.cre8-u-margin-bottom-none {\n  margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n  margin-bottom: size(1) !important;\n}\n\n.cre8-u-margin-bottom-md {\n  margin-bottom: size(2) !important;\n}\n\n.cre8-u-margin-bottom-lg {\n  margin-bottom: size(3) !important;\n}\n\n.cre8-u-margin-bottom-xl {\n  margin-bottom: size(4) !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n  margin-bottom: size(8) !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n  margin-bottom: size(4) !important;\n}\n\n@media all and (min-width: 768px) {\n  .cre8-u-margin-bottom-xl-xxl {\n    margin-bottom: size(8) !important;\n  }\n}\n.cre8-u-margin-left-none {\n  margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n  margin-left: size(1) !important;\n}\n\n.cre8-u-margin-left-md {\n  margin-left: size(2) !important;\n}\n\n.cre8-u-margin-left-lg {\n  margin-left: size(3) !important;\n}\n\n.cre8-u-margin-left-xl {\n  margin-left: size(4) !important;\n}\n\n.cre8-u-margin-left-xxl {\n  margin-left: size(8) !important;\n}\n\n.cre8-u-padding-none {\n  padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n  padding: size(1) !important;\n}\n\n.cre8-u-padding-md {\n  padding: size(2) !important;\n}\n\n.cre8-u-padding-lg {\n  padding: size(3) !important;\n}\n\n.cre8-u-padding-xl {\n  padding: size(4) !important;\n}\n\n.cre8-u-padding-xxl {\n  padding: size(8) !important;\n}\n\n.cre8-u-padding-top-none {\n  padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n  padding-top: size(1) !important;\n}\n\n.cre8-u-padding-top-md {\n  padding-top: size(2) !important;\n}\n\n.cre8-u-padding-top-lg {\n  padding-top: size(3) !important;\n}\n\n.cre8-u-padding-top-xl {\n  padding-top: size(4) !important;\n}\n\n.cre8-u-padding-top-xxl {\n  padding-top: size(8) !important;\n}\n\n.cre8-u-padding-right-none {\n  padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n  padding-right: size(1) !important;\n}\n\n.cre8-u-padding-right-md {\n  padding-right: size(2) !important;\n}\n\n.cre8-u-padding-right-lg {\n  padding-right: size(3) !important;\n}\n\n.cre8-u-padding-right-xl {\n  padding-right: size(4) !important;\n}\n\n.cre8-u-padding-right-xxl {\n  padding-right: size(8) !important;\n}\n\n.cre8-u-padding-bottom-none {\n  padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n  padding-bottom: size(1) !important;\n}\n\n.cre8-u-padding-bottom-md {\n  padding-bottom: size(2) !important;\n}\n\n.cre8-u-padding-bottom-lg {\n  padding-bottom: size(3) !important;\n}\n\n.cre8-u-padding-bottom-xl {\n  padding-bottom: size(4) !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n  padding-bottom: size(8) !important;\n}\n\n.cre8-u-padding-left-none {\n  padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n  padding-left: size(1) !important;\n}\n\n.cre8-u-padding-left-md {\n  padding-left: size(2) !important;\n}\n\n.cre8-u-padding-left-lg {\n  padding-left: size(3) !important;\n}\n\n.cre8-u-padding-left-xl {\n  padding-left: size(4) !important;\n}\n\n.cre8-u-padding-left-xxl {\n  padding-left: size(8) !important;\n}\n\n.cre8-u-display-flex {\n  display: flex !important;\n}\n\n.cre8-u-display-block {\n  display: block !important;\n}\n\nbody {\n  font-family: var(--cre8-typography-body-default-font-family);\n  font-size: var(--cre8-typography-body-default-font-size);\n  font-weight: var(--cre8-typography-body-default-font-weight);\n  line-height: var(--cre8-typography-body-default-line-height);\n  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-transform: var(--cre8-typography-body-default-text-transform);\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  margin: 0;\n  color: var(--cre8-color-content-default);\n  background: var(--background-default);\n}\n\n@media all and (min-width: 60rem) {\n  .page-container {\n    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n  }\n}\n.band__inner {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n  .band__inner {\n    margin-right: 0;\n  }\n}\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\n/**\n * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n */\n*,\n::slotted(*),\n*:before,\n*:after {\n  box-sizing: border-box;\n}\n\n:root {\n  --size-base-unit: 0.5rem;\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/*\n=======\nAnimations\n=======\n*/\n:host {\n  --cre8-z-index-1: 1;\n  --cre8-z-index-50: 50;\n  --cre8-z-index-100: 100;\n  --cre8-z-index-200: 200;\n  --cre8-z-index-1030: 1030;\n  --cre8-anim-fade-quick: 0.35s;\n  --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes slideIn {\n  100% {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInFwd {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideOutRight {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideUp {\n  100% {\n    transform: translateY(0);\n  }\n}\n@media (width >= 481px) {\n  @keyframes slideInFwd {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n}\n@media (width >= 48rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 330px;\n      height: 330px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 330px;\n      height: 330px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 60rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 460px;\n      height: 460px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 460px;\n      height: 460px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 75rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 592px;\n      height: 591px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 87.5rem) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 120px));\n    }\n  }\n}\n@media (width >= 2200px) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 592px));\n    }\n  }\n}\nspan.ripple {\n  position: absolute;\n  border-radius: 50%;\n  transform: scale(0);\n  animation: ripple 600ms linear;\n  background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n  to {\n    transform: scale(4);\n    opacity: 1;\n  }\n}\n:root {\n  --size-base-unit: 0.5rem;\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n:host {\n  display: inline-flex;\n}\n\n:host([fullWidth]) {\n  display: flex;\n}\n\n/**\n * 1) Danger Button or link that has functionality to it\n */\n/**\n * Primary button\n */\n.cre8-c-danger-button {\n  font-family: var(--cre8-typography-label-default-font-family);\n  font-size: var(--cre8-typography-label-default-font-size);\n  font-weight: var(--cre8-typography-label-default-font-weight);\n  line-height: var(--cre8-typography-label-default-line-height);\n  text-decoration: var(--cre8-typography-label-default-text-decoration);\n  text-transform: var(--cre8-typography-label-default-text-transform);\n  width: var(--cre8-button-width, auto);\n  height: var(--cre8-button-height, auto);\n  min-width: var(--cre8-button-min-width, auto);\n  min-height: var(--cre8-button-min-height, auto);\n  justify-content: center;\n  text-align: center;\n  margin-top: var(--cre8-button-margin-top, 0);\n  margin-bottom: var(--cre8-button-margin-bottom, 0);\n  margin-left: var(--cre8-button-margin-left, 0);\n  margin-right: var(--cre8-button-margin-right, 0);\n  display: inline-flex;\n  align-items: center;\n  border-width: var(--cre8-border-width-button-default);\n  box-shadow: var(--cre8-shadow-button);\n  padding-top: var(--cre8-button-padding-vertical-medium);\n  padding-right: var(--cre8-button-padding-horizontal-medium);\n  padding-bottom: var(--cre8-button-padding-vertical-medium);\n  padding-left: var(--cre8-button-padding-horizontal-medium);\n  margin: 0;\n  cursor: pointer;\n  border-style: var(--cre8-border-style-default);\n  transition: revert;\n  transform: revert;\n  white-space: nowrap;\n}\n.cre8-c-danger-button:hover, .cre8-c-danger-button:focus, .cre8-c-danger-button:active, .cre8-c-danger-button:focus-visible {\n  border-style: var(--cre8-border-style-default);\n  box-shadow: none;\n  transform: revert;\n  transition: revert;\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary {\n  background: var(--cre8-color-button-primary-danger-bg);\n  border-width: var(--cre8-border-width-button-default);\n  border-color: var(--cre8-color-button-primary-danger-border);\n  border-radius: var(--cre8-border-radius-button);\n  box-shadow: var(--cre8-shadow-button);\n  color: var(--cre8-color-button-primary-danger-content);\n  --cre8-icon-fill: var(--cre8-color-button-primary-danger-content);\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary:hover, .cre8-c-danger-button.cre8-c-danger-button--primary:focus {\n  box-shadow: none;\n  --cre8-icon-fill: var(--cre8-color-button-primary-danger-content-hover);\n  color: var(--cre8-color-button-primary-danger-content-hover);\n  border-color: var(--cre8-color-button-primary-danger-border-hover);\n  background: var(--cre8-color-button-primary-danger-bg-hover);\n  text-decoration: none;\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary:hover:focus, .cre8-c-danger-button.cre8-c-danger-button--primary:focus:focus {\n  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n  outline-offset: 0.125rem;\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary:active, .cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--loading {\n  box-shadow: none;\n  color: var(--cre8-color-button-primary-danger-content-active);\n  --cre8-icon-fill: var(--cre8-color-button-primary-danger-content-active);\n  border-color: var(--cre8-color-button-primary-danger-border-active);\n  background-color: var(--cre8-color-button-primary-danger-bg-active);\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary:focus-visible {\n  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n  outline-offset: 0.125rem;\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--loading {\n  cursor: not-allowed;\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary {\n  /**\n  * Disabled primary and secondary button\n  */\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary:disabled {\n  box-shadow: none;\n  background-color: var(--cre8-color-button-primary-danger-bg-disabled);\n  border-color: var(--cre8-color-button-primary-danger-border-disabled);\n  color: var(--cre8-color-button-primary-danger-content-disabled);\n  --cre8-icon-fill: var(--cre8-color-button-primary-danger-content-disabled);\n  cursor: not-allowed;\n  outline: none;\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary:disabled:hover, .cre8-c-danger-button.cre8-c-danger-button--primary:disabled:focus, .cre8-c-danger-button.cre8-c-danger-button--primary:disabled:active, .cre8-c-danger-button.cre8-c-danger-button--primary:disabled:focus-visible {\n  outline: none;\n  background-color: var(--cre8-color-button-primary-danger-bg-disabled);\n  border-color: var(--cre8-color-button-primary-danger-border-disabled);\n  color: var(--cre8-color-button-primary-danger-content-disabled);\n  --cre8-icon-fill: var(--cre8-color-button-primary-danger-content-disabled);\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted {\n  background-color: var(--cre8-color-button-primary-danger-inverse-bg);\n  border-color: var(--cre8-color-button-primary-danger-inverse-border);\n  color: var(--cre8-color-button-primary-danger-inverse-content);\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:hover, .cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:focus {\n  background-color: var(--cre8-color-button-primary-danger-inverse-bg-hover);\n  border-color: var(--cre8-color-button-primary-danger-inverse-border-hover);\n  color: var(--cre8-color-button-primary-danger-inverse-content-hover);\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:focus {\n  outline-color: var(--cre8-color-button-primary-danger-inverse-outline);\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:active {\n  background-color: var(--cre8-color-button-primary-danger-inverse-bg-active);\n  border-color: var(--cre8-color-button-primary-danger-inverse-border-active);\n  color: var(--cre8-color-button-primary-danger-inverse-content-active);\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:active.cre8-c-danger-button--loading {\n  --cre8-icon-fill: var(--cre8-color-button-primary-danger-content-active);\n}\n.cre8-c-danger-button.cre8-c-danger-button--primary.cre8-c-danger-button--inverted:disabled {\n  outline: none;\n  cursor: not-allowed;\n  background-color: var(--cre8-color-button-primary-danger-inverse-bg-disabled);\n  border-color: var(--cre8-color-button-primary-danger-inverse-border-disabled);\n  color: var(--cre8-color-button-primary-danger-inverse-content-disabled);\n}\n.cre8-c-danger-button {\n  /**\n  * Secondary button\n  * The icon button shares the styles of the standard secondary button\n  */\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary {\n  background-color: var(--cre8-color-button-secondary-danger-bg);\n  border-color: var(--cre8-color-button-secondary-danger-border);\n  color: var(--cre8-color-button-secondary-danger-content);\n  --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content);\n  border-radius: var(--cre8-border-radius-button);\n  border-width: var(--cre8-border-width-button-default);\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary:hover, .cre8-c-danger-button.cre8-c-danger-button--secondary:focus {\n  background-color: var(--cre8-color-button-secondary-danger-bg-hover);\n  border-color: var(--cre8-color-button-secondary-danger-border-hover);\n  color: var(--cre8-color-button-secondary-danger-content-hover);\n  --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-hover);\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary:hover:focus, .cre8-c-danger-button.cre8-c-danger-button--secondary:focus:focus {\n  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n  outline-offset: 0.125rem;\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary:active, .cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--loading {\n  transition: none;\n  transform: none;\n  background-color: var(--cre8-color-button-secondary-danger-bg-active);\n  border-color: var(--cre8-color-button-secondary-danger-border-active);\n  color: var(--cre8-color-button-secondary-danger-content-active);\n  --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active);\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary:focus-visible {\n  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n  outline-offset: 0.125rem;\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--loading {\n  cursor: not-allowed;\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary:disabled {\n  box-shadow: none;\n  background-color: var(--cre8-color-button-secondary-danger-bg-disabled);\n  border-color: var(--cre8-color-button-secondary-danger-border-disabled);\n  color: var(--cre8-color-button-secondary-danger-content-disabled);\n  --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-disabled);\n  outline: none;\n  border-radius: var(--cre8-border-radius-button);\n  border-width: var(--cre8-border-width-button-default);\n  cursor: not-allowed;\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary:disabled:hover, .cre8-c-danger-button.cre8-c-danger-button--secondary:disabled:focus, .cre8-c-danger-button.cre8-c-danger-button--secondary:disabled:active, .cre8-c-danger-button.cre8-c-danger-button--secondary:disabled:focus-visible {\n  outline: none;\n  background-color: var(--cre8-color-button-secondary-danger-bg-disabled);\n  border-color: var(--cre8-color-button-secondary-danger-border-disabled);\n  color: var(--cre8-color-button-secondary-danger-content-disabled);\n  --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-disabled);\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted {\n  background-color: var(--cre8-color-button-secondary-danger-inverse-bg);\n  border-color: var(--cre8-color-button-secondary-danger-inverse-border);\n  color: var(--cre8-color-button-secondary-danger-inverse-content);\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:hover, .cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:focus {\n  background-color: var(--cre8-color-button-secondary-danger-inverse-bg-hover);\n  border-color: var(--cre8-color-button-secondary-danger-inverse-border-hover);\n  color: var(--cre8-color-button-secondary-danger-inverse-content-hover);\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:focus {\n  outline-color: var(--cre8-color-button-secondary-danger-inverse-outline);\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:active {\n  background-color: var(--cre8-color-button-secondary-danger-inverse-bg-active);\n  border-color: var(--cre8-color-button-secondary-danger-inverse-border-active);\n  color: var(--cre8-color-button-secondary-danger-inverse-content-active);\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:active.cre8-c-danger-button--loading {\n  --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active);\n}\n.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--inverted:disabled {\n  outline: none;\n  cursor: not-allowed;\n  background-color: var(--cre8-color-button-secondary-danger-inverse-bg-disabled);\n  border-color: var(--cre8-color-button-secondary-danger-inverse-border-disabled);\n  color: var(--cre8-color-button-secondary-danger-inverse-content-disabled);\n}\n.cre8-c-danger-button {\n  /**\n  * Tertiary button\n  */\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary {\n  border-radius: var(--cre8-border-radius-button);\n  background-color: var(--cre8-color-button-tertiary-danger-bg);\n  border-width: var(--cre8-border-width-button-default);\n  border-color: var(--cre8-color-button-tertiary-danger-border);\n  color: var(--cre8-color-button-tertiary-danger-content);\n  --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content);\n  box-shadow: none;\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary:hover, .cre8-c-danger-button.cre8-c-danger-button--tertiary:focus {\n  border-radius: var(--cre8-border-radius-button);\n  background-color: var(--cre8-color-button-tertiary-danger-bg-hover);\n  border-width: var(--cre8-border-width-button-default, --cre8-border-width-none);\n  border-color: var(--cre8-color-button-tertiary-danger-border-hover);\n  color: var(--cre8-color-button-tertiary-danger-content-hover);\n  --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-hover);\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary:hover:focus, .cre8-c-danger-button.cre8-c-danger-button--tertiary:focus:focus {\n  outline: var(--cre8-border-width-focus) var(--cre8-border-style-button-tertiary-outline-focus) var(--cre8-color-border-active-outline);\n  outline-offset: 0.125rem;\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary:active, .cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--loading {\n  border-radius: var(--cre8-border-radius-button);\n  background-color: var(--cre8-color-button-tertiary-danger-bg-active);\n  border-color: var(--cre8-color-button-tertiary-danger-border-active);\n  border-width: var(--cre8-border-width-button-default);\n  color: var(--cre8-color-button-tertiary-danger-content-active);\n  --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-active);\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary:focus-visible {\n  outline: var(--cre8-border-width-focus) var(--cre8-border-style-button-tertiary-outline-focus) var(--cre8-color-border-active-outline);\n  outline-offset: 0.125rem;\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--loading {\n  cursor: not-allowed;\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled {\n  background-color: var(--cre8-color-button-tertiary-danger-bg-disabled);\n  border-color: transparent;\n  color: var(--cre8-color-button-tertiary-danger-content-disabled);\n  --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-disabled);\n  outline: none;\n  box-shadow: none;\n  cursor: not-allowed;\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled:hover, .cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled:focus {\n  outline: none;\n  box-shadow: none;\n  background-color: var(--cre8-color-button-tertiary-danger-bg-disabled);\n  color: var(--cre8-color-button-tertiary-danger-content-disabled);\n  --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-disabled);\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled:active, .cre8-c-danger-button.cre8-c-danger-button--tertiary:disabled:focus-visible {\n  outline: none;\n  box-shadow: none;\n  background-color: var(--cre8-color-button-tertiary-danger-bg-disabled);\n  color: var(--cre8-color-button-tertiary-danger-content-disabled);\n  --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-disabled);\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted {\n  background-color: var(--cre8-color-button-tertiary-danger-inverse-bg);\n  border-color: var(--cre8-color-button-tertiary-danger-inverse-border);\n  color: var(--cre8-color-button-tertiary-danger-inverse-content);\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:hover, .cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:focus {\n  background-color: var(--cre8-color-button-tertiary-danger-inverse-bg-hover);\n  border-color: var(--cre8-color-button-tertiary-danger-inverse-border-hover);\n  color: var(--cre8-color-button-tertiary-danger-inverse-content-hover);\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:focus {\n  outline-color: var(--cre8-color-button-tertiary-danger-inverse-outline);\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:active {\n  background-color: var(--cre8-color-button-tertiary-danger-inverse-bg-active);\n  border-color: var(--cre8-color-button-tertiary-danger-inverse-border-active);\n  color: var(--cre8-color-button-tertiary-danger-inverse-content-active);\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:active.cre8-c-danger-button--loading {\n  --cre8-icon-fill: var(--cre8-color-button-tertiary-danger-content-active);\n}\n.cre8-c-danger-button.cre8-c-danger-button--tertiary.cre8-c-danger-button--inverted:disabled {\n  outline: none;\n  cursor: not-allowed;\n  background-color: var(--cre8-color-button-tertiary-danger-inverse-bg-disabled);\n  border-color: var(--cre8-color-button-tertiary-danger-inverse-border-disabled);\n  color: var(--cre8-color-button-tertiary-danger-inverse-content-disabled);\n}\n.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text {\n  border-radius: var(--cre8-border-radius-button) var(--cre8-border-radius-none) var(--cre8-border-radius-none) var(--cre8-border-radius-button);\n  border-color: var(--cre8-color-button-secondary-danger-border);\n  border-width: var(--cre8-border-width-button-default);\n  color: var(--cre8-color-button-secondary-danger-content);\n}\n.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text:active, .cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text:focus-visible {\n  outline: none;\n}\n.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text.cre8-c-danger-button--lg {\n  padding: var(--cre8-button-padding-vertical-large) var(--cre8-button-padding-horizontal-large);\n}\n.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--secondary.cre8-c-danger-button--split-button-text.cre8-c-danger-button--sm {\n  padding: var(--cre8-button-padding-vertical-small) var(--cre8-button-padding-horizontal-small);\n}\n.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret {\n  padding: var(--cre8-button-padding-vertical-medium);\n  border-radius: var(--cre8-border-radius-none) var(--cre8-border-radius-button) var(--cre8-border-radius-button) var(--cre8-border-radius-none);\n  height: 100%;\n  border-left: none !important;\n  border-collapse: collapse;\n  background: var(--cre8-color-button-secondary-danger-bg);\n  border-color: var(--cre8-color-button-secondary-danger-border);\n  border-width: var(--cre8-border-width-button-default);\n  color: var(--cre8-color-button-secondary-danger-content);\n  --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content);\n}\n.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret:hover, .cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret:focus {\n  background: var(--cre8-color-button-secondary-danger-bg-hover);\n  border-color: var(--cre8-color-button-secondary-danger-border-hover);\n  --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-hover);\n  outline: none;\n  border-left: none;\n  border-collapse: collapse;\n}\n.cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret:active, .cre8-c-danger-button.cre8-c-danger-button.cre8-c-danger-button--icon-only.cre8-c-danger-button--split-button-caret:focus-visible {\n  background: var(--cre8-color-button-secondary-danger-bg-active);\n  border-color: var(--cre8-color-button-secondary-danger-border-active);\n  --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active);\n  outline: none;\n  border-left: none;\n  border-collapse: collapse;\n}\n\n.cre8-c-danger-button--lg {\n  padding: var(--cre8-button-padding-vertical-large);\n}\n\n.cre8-c-danger-button--sm {\n  padding: var(--cre8-button-padding-vertical-small);\n}\n\n.cre8-c-danger-button--icon-only {\n  padding: var(--cre8-button-padding-vertical-small);\n  color: var(--cre8-icon-fill, currentColor);\n}\n\n/**\n * Full-width button\n */\n.cre8-c-danger-button--full-width {\n  width: 100%;\n  display: flex;\n}\n\n/**\n * Small button\n */\n.cre8-c-danger-button--sm {\n  font-family: var(--cre8-typography-label-small-font-family);\n  font-size: var(--cre8-typography-label-small-font-size);\n  font-weight: var(--cre8-typography-label-small-font-weight);\n  line-height: var(--cre8-typography-label-small-line-height);\n  text-decoration: var(--cre8-typography-label-small-text-decoration);\n  text-transform: var(--cre8-typography-label-small-text-transform);\n  padding-top: var(--cre8-button-padding-vertical-small);\n  padding-right: var(--cre8-button-padding-horizontal-small);\n  padding-bottom: var(--cre8-button-padding-vertical-small);\n  padding-left: var(--cre8-button-padding-horizontal-small);\n}\n\n/**\n * Large button\n */\n.cre8-c-danger-button--lg {\n  font-family: var(--cre8-typography-label-large-font-family);\n  font-size: var(--cre8-typography-label-large-font-size);\n  font-weight: var(--cre8-typography-label-large-font-weight);\n  line-height: var(--cre8-typography-label-large-line-height);\n  text-decoration: var(--cre8-typography-label-large-text-decoration);\n  text-transform: var(--cre8-typography-label-large-text-transform);\n  padding-top: var(--cre8-button-padding-vertical-large);\n  padding-right: var(--cre8-button-padding-horizontal-large);\n  padding-bottom: var(--cre8-button-padding-vertical-large);\n  padding-left: var(--cre8-button-padding-horizontal-large);\n}\n\n/**\n  * Icon within small button\n  */\n.cre8-c-danger-button--sm cre8-icon {\n  --cre8-icon-height: var(--cre8-icon-size-small);\n  --cre8-icon-width: var(--cre8-icon-size-small);\n  /**\n       * Button text directly after button icon within small button\n       */\n}\n\n/**\n  * Icon within large button\n  */\n.cre8-c-danger-button--lg cre8-icon {\n  --cre8-icon-height: var(--cre8-icon-size-large);\n  --cre8-icon-width: var(--cre8-icon-size-large);\n}\n\n::slotted(*) {\n  margin-right: 0;\n}\n\n/**\n * Button icon directly before button text\n */\ncre8-icon + .cre8-c-danger-button__text:not(.cre8-u-is-vishidden) {\n  margin-left: 0.5rem;\n  display: inline-flex;\n}\n\n/**\n   * Button icon directly after button text\n   */\n.cre8-c-danger-button__text:not(.cre8-u-is-vishidden) + cre8-icon {\n  margin-left: 0.5rem;\n  display: inline-flex;\n}\n\n/**\n   * Button icon only\n   */\n.cre8-c-danger-button:has(.cre8-c-danger-button__text.cre8-u-is-vishidden) + cre8-icon {\n  border-radius: var(--cre8-border-radius-button);\n}\n\n.cre8-c-danger-button__text.cre8-u-is-vishidden + cre8-icon {\n  margin-left: 0px;\n  margin-right: 0px;\n  display: flex;\n}\n\n.cre8-c-danger-button__text.cre8-u-is-vishidden {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n.cre8-c-danger-button--primary.cre8-c-danger-button--loading {\n  --cre8-icon-fill: var(--cre8-color-content-knockout);\n}\n\n.cre8-c-danger-button--secondary.cre8-c-danger-button--loading,\n.cre8-c-danger-button--tertiary.cre8-c-danger-button--loading {\n  --cre8-icon-fill: var(--cre8-color-button-secondary-danger-content-active);\n}\n\n/**\n * Aria live span\n */\n.cre8-u-is-vishidden {\n  --cre8-icon-height: 0px;\n  --cre8-icon-width: 0px;\n  max-width: fit-content;\n  min-width: 0px;\n  width: auto;\n  height: auto;\n  max-height: fit-content;\n  min-width: 0px;\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\ncre8-icon.cre8-u-is-vishidden {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\ncre8-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\nspan.cre8-c-danger-button__icon {\n  margin-left: 0.5rem;\n  max-width: fit-content;\n  min-width: 0px;\n  width: auto;\n  height: auto;\n  max-height: fit-content;\n  min-width: 0px;\n}`;\nexport default styles;\n"]}

package/lib/components/date-picker/calendar/calendar.d.ts

@@ -0,0 +1,115 @@
+import { TemplateResult } from 'lit';
+import { Cre8Element } from '../../cre8-element';
+import '../../icon/icon';
+import '../calendar-month-modal/calendar-month-modal';
+import '../calendar-year-modal/calendar-year-modal';
+import '../calendar-navigation/calendar-navigation';
+import '../../button/button';
+export interface DateConfig {
+    locale: string;
+    today: Date;
+    weekInfo: {
+        firstDay: number;
+        weekend: Array<number>;
+    };
+}
+export interface DateFormatOptions {
+    weekday: string;
+    year: string;
+    month: string;
+    day: string;
+}
+export declare enum CalendarModal {
+    Month = "month",
+    Year = "year",
+    None = "none"
+}
+export declare class Cre8Calendar extends Cre8Element {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Query the navigation wrapper
+     */
+    _navWrapper: HTMLElement;
+    hasShortcuts?: boolean;
+    _activeModal?: CalendarModal;
+    get activeModal(): CalendarModal;
+    set activeModal(activeModal: CalendarModal);
+    _fieldDate?: string;
+    get fieldDate(): string;
+    set fieldDate(newFieldDate: string);
+    _currentDate?: Date;
+    get currentDate(): Date;
+    set currentDate(newDate: Date);
+    locale: string;
+    weekDays: Array<string>;
+    dateConfig: DateConfig;
+    dateFormatOptions: DateFormatOptions;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleOnClickOutside;
+    private emitSelectedDate;
+    private changeYear;
+    private changeMonth;
+    private activateModal;
+    static formatMonthOrDayIndex(val: number): string;
+    static formatDate(val: number): string;
+    private numberOfDaysinMonth;
+    private getMonth;
+    private getMonthName;
+    private getYear;
+    static dateToString(date: Date): string;
+    private updateFocusForKeydown;
+    private _handleCalendarKeyDown;
+    private changeMonthFromNav;
+    private changeYearFromNav;
+    private getDaysOfWeekAbbreviations;
+    /**
+     * Create array of Day Buttons to fill in excess calendar space at the beginning of the month.
+     *
+     * 1. Map from empty array of length equal to the amount of access calendar "slots" in the beginning of the month.
+     * (i.e. if the month starts on Wednesday (getDay = 3), there are 3 days prior that week from last month.)
+     *
+     * 2. Based on the indice of array, get the given day button's date, where the date is
+     * the last day of last month minus the max of the array plus the indice plus one -> x = lastday - (max - (i + 1))
+     * (Note: (max - (i + 1) equals the keys of the array in reverse order:
+     * [max - i + 1] -> [3-1, 3-2, 3-3] -> [2,1,0] for an array of [3])
+     * (i.e. if the calendar is starting on Wednesday June 1st, the access days on the calendar will be
+     * Sunday May 29th (31 - (2)), Monday May 30th (31 - (1)), Tuesday May 31st (31 - (0)))
+     *
+     * 3. Build out day button with necessary props
+     * */
+    private getPreviousMonthDayButtons;
+    /**
+     * Create array of Day Buttons to fill out current month
+     *
+     * 1. Map from empty array of length equal to the amount days in this month
+     *
+     * 2. Get the date of the current month based on indice of array (i.e. 0 -> 1st, 1 -> 2nd ...)
+     *
+     * 3. Build out day button with necessary props
+     * */
+    private getCurrentMonthDayButtons;
+    /**
+     * Create array of Day Buttons to fill in excess calendar space at the end of the month.
+     *
+     * 1. Map from empty array of length equal to the amount of access calendar "slots" at the end of the month.
+     * The array have an amount of slots equal to the number of days in a week minus how many days have already past
+     * and since getDay returns the index of the day of the week (Sunday = 0, Monday = 1 ...) our equations is
+     * x = 7 - (getDay() + 1)
+     * Note: (we need to add 1 because indexing starts at 0)
+     * so if the month ends on Monday (getDay() = 1), 5 = 7 - (1 + 1), there are 5 days that week from the new month
+     *
+     * 2. Get the date from the next month based on indice of array (i.e. 0 -> 1st, 1 -> 2nd ...)
+     *
+     * 3. Build out day button with necessary props
+     * */
+    private getNextMonthDayButtons;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-calendar': Cre8Calendar;
+    }
+}
+//# sourceMappingURL=calendar.d.ts.map

package/lib/components/date-picker/calendar/calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../../components/date-picker/calendar/calendar.ts"],"names":[],"mappings":"AAKA,OAAO,EACN,cAAc,EACd,MAAM,KAAK,CAAC;AAGb,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD,OAAO,iBAAiB,CAAC;AACzB,OAAO,8CAA8C,CAAC;AACtD,OAAO,4CAA4C,CAAC;AACpD,OAAO,4CAA4C,CAAC;AACpD,OAAO,qBAAqB,CAAC;AAE7B,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,EAAE;QACR,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;KACxB,CAAC;CACH;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb;AAED,oBAAY,aAAa;IACvB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,qBAAa,YAAa,SAAQ,WAAW;IAC3C,MAAM,CAAC,MAAM,4BAAY;IAGzB;;OAEG;IAEC,WAAW,EAAE,WAAW,CAAC;IAG7B,YAAY,CAAC,EAAE,OAAO,CAAC;IAEd,YAAY,CAAC,EAAE,aAAa,CAAsB;IAE3D,IACI,WAAW,IAIc,aAAa,CAFzC;IAED,IAAI,WAAW,CAAC,WAAW,EAAE,aAAa,EAEzC;IAEQ,UAAU,CAAC,EAAE,MAAM,CAAC;IAE7B,IACI,SAAS,IAIe,MAAM,CAFjC;IAED,IAAI,SAAS,CAAC,YAAY,EAAE,MAAM,EAUjC;IAEQ,YAAY,CAAC,EAAE,IAAI,CAAC;IAE7B,IACI,WAAW,IAIU,IAAI,CAF5B;IAED,IAAI,WAAW,CAAC,OAAO,EAAE,IAAI,EAI5B;IAEQ,MAAM,EAAE,MAAM,CAAC;IAEf,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAExB,UAAU,EAAE,UAAU,CAAC;IAEvB,iBAAiB,EAAE,iBAAiB,CAAC;;IAiC9C,iBAAiB;IAKjB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,qBAAqB;IAmB7B,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,aAAa;IAKrB,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;IAIjD,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;IAItC,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,OAAO;IAIf,MAAM,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM;YAMzB,qBAAqB;IAWnC,OAAO,CAAC,sBAAsB;YAmDhB,kBAAkB;YAgBlB,iBAAiB;IAiB/B,OAAO,CAAC,0BAA0B;IAQlC;;;;;;;;;;;;;;SAcK;IACL,OAAO,CAAC,0BAA0B;IAoDlC;;;;;;;;SAQK;IACL,OAAO,CAAC,yBAAyB;IAqCjC;;;;;;;;;;;;;SAaK;IACL,OAAO,CAAC,sBAAsB;IA2D9B,MAAM;CAkFP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/lib/components/date-picker/calendar/calendar.js

@@ -0,0 +1,465 @@
+/* eslint-disable max-statements */
+/* eslint-disable indent */
+/* eslint-disable lit/no-template-arrow */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/* TODO: remove eslint disable on no-template-arrow */
+import { html, nothing, } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import styles from './calendar.styles.js';
+import { Cre8Element } from '../../cre8-element';
+import '../../icon/icon';
+import '../calendar-month-modal/calendar-month-modal';
+import '../calendar-year-modal/calendar-year-modal';
+import '../calendar-navigation/calendar-navigation';
+import '../../button/button';
+export var CalendarModal;
+(function (CalendarModal) {
+    CalendarModal["Month"] = "month";
+    CalendarModal["Year"] = "year";
+    CalendarModal["None"] = "none";
+})(CalendarModal || (CalendarModal = {}));
+export class Cre8Calendar extends Cre8Element {
+    get activeModal() {
+        return this._activeModal;
+    }
+    set activeModal(activeModal) {
+        this._activeModal = activeModal;
+    }
+    get fieldDate() {
+        return this._fieldDate;
+    }
+    set fieldDate(newFieldDate) {
+        const oldDate = this._fieldDate;
+        this.requestUpdate('fieldDate', oldDate);
+        const isNewDateValid = !!(newFieldDate && new Date(`${newFieldDate}T00:00`).getTime());
+        this.currentDate = isNewDateValid
+            ? new Date(`${newFieldDate}T00:00`)
+            : new Date();
+        this._fieldDate = isNewDateValid ? newFieldDate : '';
+    }
+    get currentDate() {
+        return this._currentDate;
+    }
+    set currentDate(newDate) {
+        const oldDate = this._currentDate;
+        this._currentDate = newDate;
+        this.requestUpdate('currentDate', oldDate);
+    }
+    constructor() {
+        super();
+        this._activeModal = CalendarModal.None;
+        this._handleOnClickOutside = this._handleOnClickOutside.bind(this);
+        this.currentDate = (this.fieldDate && new Date(`${this.fieldDate}T00:00`)) ?? new Date();
+        this.locale = document.documentElement.getAttribute('lang') || 'en-US';
+        this.dateConfig = {
+            locale: this.locale,
+            today: new Date(),
+            weekInfo: {
+                firstDay: 7,
+                weekend: [6, 7],
+            },
+        };
+        this.weekDays = [
+            'Sunday',
+            'Monday',
+            'Tuesday',
+            'Wednesday',
+            'Thursday',
+            'Friday',
+            'Saturday',
+        ];
+        this.dateFormatOptions = {
+            weekday: 'long',
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('click', this._handleOnClickOutside, false);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('click', this._handleOnClickOutside, false);
+    }
+    /* Click Event Functions */
+    _handleOnClickOutside(event) {
+        if (!this.shadowRoot?.host) {
+            throw Error('Could not determine navigation context during click handler');
+        }
+        const didClickInside = event.composedPath().includes(this.shadowRoot.host);
+        if (!didClickInside) {
+            const outsideClickEvent = new CustomEvent('outsideClick', {
+                detail: {
+                    composedPath: event.composedPath(),
+                },
+            });
+            this.dispatchEvent(outsideClickEvent);
+        }
+    }
+    emitSelectedDate(date) {
+        const event = new CustomEvent('dateSelect', {
+            detail: {
+                date,
+            },
+        });
+        this.currentDate = new Date(`${date}T00:00`);
+        this.dispatchEvent(event);
+    }
+    changeYear(year) {
+        const oldDate = this.currentDate;
+        const newDate = new Date(oldDate.setFullYear(year));
+        this.currentDate = newDate;
+        this.activeModal = CalendarModal.None;
+    }
+    changeMonth(month) {
+        const oldDate = this.currentDate;
+        const newDate = new Date(oldDate.setMonth(month));
+        this.currentDate = newDate;
+        this.activeModal = CalendarModal.None;
+    }
+    activateModal(modal) {
+        this.activeModal = modal;
+    }
+    /* Helper/Get Functions */
+    static formatMonthOrDayIndex(val) {
+        return (val + 1).toString().padStart(2, '0');
+    }
+    static formatDate(val) {
+        return val.toString().padStart(2, '0');
+    }
+    numberOfDaysinMonth() {
+        return new Date(this.getYear(), this.getMonth() + 1, 0).getDate();
+    }
+    getMonth() {
+        return this.currentDate.getMonth();
+    }
+    getMonthName() {
+        const monthName = new Intl.DateTimeFormat(this.locale, {
+            month: 'long',
+        }).format(this.currentDate);
+        return monthName;
+    }
+    getYear() {
+        return this.currentDate.getFullYear();
+    }
+    static dateToString(date) {
+        return `${date.getFullYear()}-${Cre8Calendar.formatMonthOrDayIndex(date.getMonth())}-${Cre8Calendar.formatDate(date.getDate())}`;
+    }
+    async updateFocusForKeydown(newDate) {
+        this.currentDate = newDate;
+        await this.updateComplete;
+        const newFocus = this.shadowRoot?.querySelector(`button[datetime="${Cre8Calendar.dateToString(newDate)}"]`);
+        newFocus.setAttribute('tabindex', '0');
+        newFocus.focus();
+    }
+    _handleCalendarKeyDown(e) {
+        const oldFocus = this.shadowRoot?.querySelector(`button[datetime="${Cre8Calendar.dateToString(this.currentDate)}"]`);
+        if (e.key === 'ArrowUp') {
+            const newDate = new Date(this.getYear(), this.getMonth(), this.currentDate.getDate() - 7);
+            this.updateFocusForKeydown(newDate);
+            oldFocus.setAttribute('tabindex', '-1');
+        }
+        if (e.key === 'ArrowDown') {
+            const newDate = new Date(this.getYear(), this.getMonth(), this.currentDate.getDate() + 7);
+            this.updateFocusForKeydown(newDate);
+            oldFocus.setAttribute('tabindex', '-1');
+        }
+        if (e.key === 'ArrowLeft') {
+            const newDate = new Date(this.getYear(), this.getMonth(), this.currentDate.getDate() - 1);
+            this.updateFocusForKeydown(newDate);
+            oldFocus.setAttribute('tabindex', '-1');
+        }
+        if (e.key === 'ArrowRight') {
+            const newDate = new Date(this.getYear(), this.getMonth(), this.currentDate.getDate() + 1);
+            this.updateFocusForKeydown(newDate);
+            oldFocus.setAttribute('tabindex', '-1');
+        }
+        if (e.key === 'Tab' && !e.shiftKey) {
+            const outsideClickEvent = new CustomEvent('outsideClick', {
+                detail: {
+                    composedPath: [],
+                },
+            });
+            // This allows the tab off to happen before the calendar closes
+            setTimeout(() => { this.dispatchEvent(outsideClickEvent); }, 20);
+        }
+    }
+    async changeMonthFromNav(month) {
+        this.changeMonth(month);
+        await this.updateComplete;
+        const nav = this.shadowRoot?.querySelector('cre8-calendar-navigation');
+        const monthPickerButton = nav.shadowRoot?.querySelector('.cre8-c-calendar-navigation__month-modal-button');
+        await this.updateComplete;
+        const button = monthPickerButton.shadowRoot.querySelector('button');
+        button.focus();
+    }
+    async changeYearFromNav(year) {
+        this.changeYear(year);
+        await this.updateComplete;
+        const nav = this.shadowRoot?.querySelector('cre8-calendar-navigation');
+        const yearPickerButton = nav.shadowRoot?.querySelector('.cre8-c-calendar-navigation__year-modal-button');
+        await this.updateComplete;
+        const button = yearPickerButton.shadowRoot.querySelector('button');
+        button.focus();
+    }
+    /* Template Map Functions */
+    getDaysOfWeekAbbreviations() {
+        return this.weekDays.map((day) => html ` <td>
+        <span aria-label="${day}">${day[0]}</span>
+      </td>`);
+    }
+    /**
+     * Create array of Day Buttons to fill in excess calendar space at the beginning of the month.
+     *
+     * 1. Map from empty array of length equal to the amount of access calendar "slots" in the beginning of the month.
+     * (i.e. if the month starts on Wednesday (getDay = 3), there are 3 days prior that week from last month.)
+     *
+     * 2. Based on the indice of array, get the given day button's date, where the date is
+     * the last day of last month minus the max of the array plus the indice plus one -> x = lastday - (max - (i + 1))
+     * (Note: (max - (i + 1) equals the keys of the array in reverse order:
+     * [max - i + 1] -> [3-1, 3-2, 3-3] -> [2,1,0] for an array of [3])
+     * (i.e. if the calendar is starting on Wednesday June 1st, the access days on the calendar will be
+     * Sunday May 29th (31 - (2)), Monday May 30th (31 - (1)), Tuesday May 31st (31 - (0)))
+     *
+     * 3. Build out day button with necessary props
+     * */
+    getPreviousMonthDayButtons() {
+        /* 1 */
+        return [
+            ...Array(new Date(this.getYear(), this.getMonth(), 1).getDay()).keys(),
+        ].map((i) => {
+            const priorMonthArrayLength = new Date(this.getYear(), this.getMonth(), 1).getDay();
+            const finalDayLastMonth = new Date(this.getYear(), this.getMonth(), 0);
+            const numberOfDaysinLastMonth = finalDayLastMonth.getDate();
+            /* 2 */
+            const priorMonthDay = new Date(finalDayLastMonth.getFullYear(), finalDayLastMonth.getMonth(), numberOfDaysinLastMonth - priorMonthArrayLength + (i + 1));
+            const isToday = this.dateConfig.today.getDate() === priorMonthDay.getDate()
+                && this.dateConfig.today.getMonth() === priorMonthDay.getMonth()
+                && this.dateConfig.today.getFullYear() === priorMonthDay.getFullYear();
+            const isSelected = new Date(`${this.fieldDate}T00:00`).getTime()
+                === priorMonthDay.getTime();
+            /* 3 */
+            return html ` <td>
+        <button
+          class="cre8-c-calendar__day-button cre8-c-calendar__different-month"
+          datetime="${Cre8Calendar.dateToString(priorMonthDay)}"
+          ?data-today="${isToday}"
+          ?data-selected="${isSelected}"
+          tabindex="-1"
+          aria-label="${new Intl.DateTimeFormat(this.locale, {
+                weekday: 'long',
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+            }).format(new Date(`${Cre8Calendar.dateToString(priorMonthDay)}T00:00`))}"
+          @click="${() => this.emitSelectedDate(Cre8Calendar.dateToString(priorMonthDay))}"
+        >
+          ${new Intl.NumberFormat(this.locale).format(priorMonthDay.getDate())}
+        </button>
+      </td>`;
+        });
+    }
+    /**
+     * Create array of Day Buttons to fill out current month
+     *
+     * 1. Map from empty array of length equal to the amount days in this month
+     *
+     * 2. Get the date of the current month based on indice of array (i.e. 0 -> 1st, 1 -> 2nd ...)
+     *
+     * 3. Build out day button with necessary props
+     * */
+    getCurrentMonthDayButtons() {
+        /* 1 */
+        return [...Array(this.numberOfDaysinMonth()).keys()].map((i) => {
+            const dayOfTheMonth = i + 1;
+            /* 2 */
+            const current = new Date(this.getYear(), this.getMonth(), dayOfTheMonth);
+            const isToday = this.dateConfig.today.getDate() === dayOfTheMonth
+                && this.dateConfig.today.getMonth() === this.getMonth()
+                && this.dateConfig.today.getFullYear() === this.getYear();
+            const isSelected = new Date(`${this.fieldDate}T00:00`).getTime() === current.getTime();
+            /* 3 */
+            return html ` <td>
+        <button
+          class="cre8-c-calendar__day-button"
+          datetime="${Cre8Calendar.dateToString(current)}"
+          ?data-today="${isToday}"
+          ?data-selected="${isSelected}"
+          tabindex="${dayOfTheMonth === this.currentDate.getDate()
+                ? '0'
+                : '-1'}"
+          aria-label="${new Intl.DateTimeFormat(this.locale, {
+                weekday: 'long',
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+            }).format(new Date(`${Cre8Calendar.dateToString(current)}T00:00`))}"
+          @click="${() => this.emitSelectedDate(Cre8Calendar.dateToString(current))}"
+        >
+          ${new Intl.NumberFormat(this.locale).format(i + 1)}
+        </button>
+      </td>`;
+        });
+    }
+    /**
+     * Create array of Day Buttons to fill in excess calendar space at the end of the month.
+     *
+     * 1. Map from empty array of length equal to the amount of access calendar "slots" at the end of the month.
+     * The array have an amount of slots equal to the number of days in a week minus how many days have already past
+     * and since getDay returns the index of the day of the week (Sunday = 0, Monday = 1 ...) our equations is
+     * x = 7 - (getDay() + 1)
+     * Note: (we need to add 1 because indexing starts at 0)
+     * so if the month ends on Monday (getDay() = 1), 5 = 7 - (1 + 1), there are 5 days that week from the new month
+     *
+     * 2. Get the date from the next month based on indice of array (i.e. 0 -> 1st, 1 -> 2nd ...)
+     *
+     * 3. Build out day button with necessary props
+     * */
+    getNextMonthDayButtons() {
+        /* 1 */
+        return [
+            ...Array(6
+                - new Date(this.getYear(), this.getMonth(), this.numberOfDaysinMonth()).getDay()).keys(),
+        ].map((i) => {
+            const lastDayThisMonth = new Date(this.getYear(), this.getMonth(), this.numberOfDaysinMonth());
+            const firstDayNextMonth = new Date(lastDayThisMonth.setDate(lastDayThisMonth.getDate() + 1));
+            /* 2 */
+            const nextMonthDay = new Date(firstDayNextMonth.getFullYear(), firstDayNextMonth.getMonth(), i + 1);
+            const isToday = this.dateConfig.today.getDate() === nextMonthDay.getDate()
+                && this.dateConfig.today.getMonth() === nextMonthDay.getMonth()
+                && this.dateConfig.today.getFullYear() === nextMonthDay.getFullYear();
+            const isSelected = new Date(`${this.fieldDate}T00:00`).getTime()
+                === nextMonthDay.getTime();
+            /* 3 */
+            return html ` <td>
+        <button
+          class="cre8-c-calendar__day-button cre8-c-calendar__different-month"
+          datetime="${Cre8Calendar.dateToString(nextMonthDay)}"
+          ?data-today="${isToday}"
+          ?data-selected="${isSelected}"
+          tabindex="-1"
+          aria-label="${new Intl.DateTimeFormat(this.locale, {
+                weekday: 'long',
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+            }).format(new Date(`${Cre8Calendar.dateToString(nextMonthDay)}T00:00`))}"
+          @click="${() => this.emitSelectedDate(Cre8Calendar.dateToString(nextMonthDay))}"
+        >
+          ${new Intl.NumberFormat(this.locale).format(nextMonthDay.getDate())}
+        </button>
+      </td>`;
+        });
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-calendar', {});
+        return html ` <div class="${componentClassNames}">
+      ${this._activeModal === CalendarModal.Month
+            ? html `<cre8-calendar-month-modal
+            currentMonth="${this.getMonth()}"
+            @changeMonth="${(e) => this.changeMonthFromNav(e.detail.month)}"
+          ></cre8-calendar-month-modal>`
+            : nothing}
+      ${this._activeModal === CalendarModal.Year
+            ? html `<cre8-calendar-year-modal
+            currentYear="${this.getYear()}"
+            @changeYear="${(e) => this.changeYearFromNav(e.detail.year)}"
+          ></cre8-calendar-year-modal>`
+            : nothing}
+      ${this._activeModal === CalendarModal.None
+            ? html ` ${this.hasShortcuts
+                ? html `<div class="cre8-c-calendar__header-shortcuts">
+                    <cre8-button
+                      text="Today"
+                      variant="secondary"
+                      size="sm"
+                      @click="${() => this.emitSelectedDate(Cre8Calendar.dateToString(this.dateConfig.today))}"
+                    ></cre8-button>
+                    <cre8-button
+                      text="Tomorrow"
+                      variant="secondary"
+                      size="sm"
+                      @click="${() => this.emitSelectedDate(Cre8Calendar.dateToString(new Date(this.dateConfig.today.setDate(this.dateConfig.today.getDate() + 1))))}"
+                    ></cre8-button>
+                    <cre8-button
+                      text="In 2 days"
+                      variant="secondary"
+                      size="sm"
+                      @click="${() => this.emitSelectedDate(Cre8Calendar.dateToString(new Date(this.dateConfig.today.setDate(this.dateConfig.today.getDate() + 2))))}"
+                    ></cre8-button>
+                </div>`
+                : nothing}
+            <cre8-calendar-navigation
+              monthName="${this.getMonthName()}"
+              year="${this.getYear()}"
+              @activateModal="${(e) => this.activateModal(e.detail.modal)}"
+              @changeMonth="${(e) => this.changeMonth(this.getMonth() + e.detail.addend)}"
+              @changeYear="${(e) => this.changeYear(this.getYear() + e.detail.addend)}"
+            >
+            </cre8-calendar-navigation>
+            <table>
+              <thead>
+                <tr>
+                  ${this.getDaysOfWeekAbbreviations()}
+                </tr>
+              </thead>
+              <tbody>
+                <tr @keydown=${this._handleCalendarKeyDown}>
+                  ${this.getPreviousMonthDayButtons()}
+                  ${this.getCurrentMonthDayButtons()}
+                  ${this.getNextMonthDayButtons()}
+                </tr>
+              </tbody>
+            </table>`
+            : nothing}
+    </div>`;
+    }
+}
+Cre8Calendar.styles = [styles];
+__decorate([
+    query('.cre8-c-calendar__navigation-wrapper')
+], Cre8Calendar.prototype, "_navWrapper", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Calendar.prototype, "hasShortcuts", void 0);
+__decorate([
+    state()
+], Cre8Calendar.prototype, "_activeModal", void 0);
+__decorate([
+    property({ reflect: true, type: String })
+], Cre8Calendar.prototype, "activeModal", null);
+__decorate([
+    state()
+], Cre8Calendar.prototype, "_fieldDate", void 0);
+__decorate([
+    property({ reflect: true, type: Date })
+], Cre8Calendar.prototype, "fieldDate", null);
+__decorate([
+    state()
+], Cre8Calendar.prototype, "_currentDate", void 0);
+__decorate([
+    property({ reflect: true, type: Date })
+], Cre8Calendar.prototype, "currentDate", null);
+__decorate([
+    state()
+], Cre8Calendar.prototype, "locale", void 0);
+__decorate([
+    state()
+], Cre8Calendar.prototype, "weekDays", void 0);
+__decorate([
+    state()
+], Cre8Calendar.prototype, "dateConfig", void 0);
+__decorate([
+    state()
+], Cre8Calendar.prototype, "dateFormatOptions", void 0);
+if (customElements.get('cre8-calendar') === undefined) {
+    customElements.define('cre8-calendar', Cre8Calendar);
+}
+//# sourceMappingURL=calendar.js.map