@haiilo/catalyst 6.2.3 → 6.3.0

package/dist/collection/scss/vendor/_flatpickr.scss

@@ -11,7 +11,7 @@
   background: cat-token('color.ui.background.surface');
   padding: 1rem;
 
-  &.animate {
+  &:not(.inline).animate {
     transform: translateY(-1rem);
     opacity: 0;
     transition: transform cat-token('time.transition.s') cubic-bezier(0.3, 0, 0.8, 0.15),
@@ -23,9 +23,21 @@
     display: none;
   }
 
+  &.inline,
   &.open {
-    z-index: cat-z-index('dropdown');
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
     width: auto !important;
+  }
+
+  &.inline {
+    border: unset;
+    padding: 0;
+  }
+
+  &.open {
+    z-index: cat-z-index('dropdown');
     margin-top: 0.75rem;
     margin-left: -0.75rem;
 
@@ -97,6 +109,10 @@
 
 .flatpickr-weekdays {
   height: 2rem;
+  .flatpickr-weekday {
+    color: cat-token('color.ui.font.muted');
+    @include cat-body(xs, $weight: 700);
+  }
 }
 
 .flatpickr-weekwrapper {
@@ -107,14 +123,17 @@
   .flatpickr-weeks {
     box-shadow: none;
     width: 2rem;
-    padding: 0 0.5rem 0 0;
+    padding: 0;
+    margin-right: 0.5rem;
+    background: cat-token('color.ui.background.muted');
+    border-radius: cat-token('size.border.radius.m');
   }
 
   span.flatpickr-day,
   span.flatpickr-day:hover {
     @include cat-body(xs, $weight: 700);
     color: cat-token('color.ui.font.muted');
-    text-align: right;
+    text-align: center;
     line-height: 2.25rem;
   }
 }
@@ -133,7 +152,6 @@
   color: cat-token('color.ui.font.body');
   height: 2.25rem;
   line-height: 2.25rem;
-  // max-width: unset;
   border: 0;
   border-radius: cat-border-radius('m');
 
@@ -142,6 +160,11 @@
     font-weight: 700;
   }
 
+  &.flatpickr-disabled,
+  &.flatpickr-disabled:hover {
+    color: cat-token('color.ui.font.muted');
+  }
+
   &.today {
     color: cat-token('color.theme.primary.text');
     box-shadow: inset 0 0 0 2px cat-token('color.theme.primary.text');
@@ -153,6 +176,16 @@
     }
   }
 
+  &.flatpickr-disabled,
+  &.flatpickr-disabled:hover,
+  &.prevMonthDay,
+  &.nextMonthDay,
+  &.notAllowed,
+  &.notAllowed.prevMonthDay,
+  &.notAllowed.nextMonthDay {
+    color: cat-token('color.ui.font.muted', 0.5);
+  }
+
   &.selected,
   &.startRange,
   &.endRange {
@@ -241,22 +274,33 @@
   }
 }
 
-.flatpickr-time .numInputWrapper {
-  height: 2.25rem;
-}
-
 .flatpickr-calendar.hasTime .flatpickr-time {
-  height: 2.25rem;
-  line-height: 2.25rem;
-  max-height: 2.25rem;
-  border-top: none;
+  border: 1px solid cat-token('color.ui.border.default');
+  border-radius: cat-token('size.border.radius.m');
   min-width: 12rem;
+  height: auto;
+
+  .numInputWrapper {
+    height: 2rem;
+    padding: 0;
+    margin: 0.25rem;
+    display: flex;
+  }
+}
+
+.flatpickr-calendar.hasTime.noCalendar {
+  padding: 0;
+
+  .flatpickr-time {
+    border: none;
+  }
 }
 
 .flatpickr-time .flatpickr-time-separator,
 .flatpickr-time .flatpickr-am-pm {
   margin: 0 0.25rem;
   @include cat-head(4, 400);
+  color: cat-token('color.ui.font.body');
   line-height: 2.25rem;
 }
 
@@ -272,10 +316,14 @@
 }
 
 .flatpickr-time {
+  max-height: unset;
+
   input {
     background: transparent !important;
-    @include cat-head(4, 400);
+    color: cat-token('color.ui.font.body');
+    font-size: cat-token('size.font.body.m');
     line-height: 2.25rem;
+    font-family: inherit;
 
     &.flatpickr-hour {
       font-weight: inherit;

package/dist/components/cat-button-group.js.map

@@ -1 +1 @@
-{"file":"cat-button-group.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,qRAAqR;;MCOlSA,gBAAc;;;;;IACjB,iBAAY,GAA2B,EAAE,CAAC;;;EAUlD,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,SAAS,IAC3C,YAAM,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACpD,EACP;GACH;EAEO,YAAY;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC;IAEhF,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK;MACvC,OAAO,CAAC,mBAAmB,GAAG,KAAK,KAAK,CAAC,GAAG,OAAO,GAAG,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,GAAG,MAAM,GAAG,QAAQ,CAAC;KAClH,CAAC,CAAC;GACJ;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatButtonGroup"],"sources":["src/components/cat-button-group/cat-button-group.scss?tag=cat-button-group&encapsulation=shadow","src/components/cat-button-group/cat-button-group.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n::slotted(cat-button[variant='outlined']),\n::slotted(cat-button:not([variant])) {\n  margin-right: -1px;\n}\n\n::slotted(cat-button[variant='outlined']:last-child),\n::slotted(cat-button:not([variant]):last-child) {\n  margin-right: 0;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'cat-button-group',\n  styleUrl: 'cat-button-group.scss',\n  shadow: true\n})\nexport class CatButtonGroup {\n  private formElements: HTMLCatButtonElement[] = [];\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * Adds an accessible label for the button group that\n   * it is only shown in assistive technologies, like screen readers.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  render() {\n    return (\n      <Host role=\"group\" aria-label={this.a11yLabel}>\n        <slot onSlotchange={this.onSlotChange.bind(this)}></slot>\n      </Host>\n    );\n  }\n\n  private onSlotChange(): void {\n    this.formElements = Array.from(this.hostElement.querySelectorAll('cat-button'));\n\n    this.formElements.forEach((element, index) => {\n      element.buttonGroupPosition = index === 0 ? 'first' : index === this.formElements.length - 1 ? 'last' : 'middle';\n    });\n  }\n}\n"],"version":3}
+{"file":"cat-button-group.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,qRAAqR;;MCWlSA,gBAAc;;;;;IACjB,iBAAY,GAA2B,EAAE,CAAC;;;EAUlD,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,SAAS,IAC3C,YAAM,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACpD,EACP;GACH;EAEO,YAAY;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC;IAEhF,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK;MACvC,OAAO,CAAC,mBAAmB,GAAG,KAAK,KAAK,CAAC,GAAG,OAAO,GAAG,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,GAAG,MAAM,GAAG,QAAQ,CAAC;KAClH,CAAC,CAAC;GACJ;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatButtonGroup"],"sources":["src/components/cat-button-group/cat-button-group.scss?tag=cat-button-group&encapsulation=shadow","src/components/cat-button-group/cat-button-group.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n::slotted(cat-button[variant='outlined']),\n::slotted(cat-button:not([variant])) {\n  margin-right: -1px;\n}\n\n::slotted(cat-button[variant='outlined']:last-child),\n::slotted(cat-button:not([variant]):last-child) {\n  margin-right: 0;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n/**\n * Button groups are designed to bring together button controls that are of a\n * similar nature. For example text formatting controls.\n */\n@Component({\n  tag: 'cat-button-group',\n  styleUrl: 'cat-button-group.scss',\n  shadow: true\n})\nexport class CatButtonGroup {\n  private formElements: HTMLCatButtonElement[] = [];\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * Adds an accessible label for the button group that\n   * it is only shown in assistive technologies, like screen readers.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  render() {\n    return (\n      <Host role=\"group\" aria-label={this.a11yLabel}>\n        <slot onSlotchange={this.onSlotChange.bind(this)}></slot>\n      </Host>\n    );\n  }\n\n  private onSlotChange(): void {\n    this.formElements = Array.from(this.hostElement.querySelectorAll('cat-button'));\n\n    this.formElements.forEach((element, index) => {\n      element.buttonGroupPosition = index === 0 ? 'first' : index === this.formElements.length - 1 ? 'last' : 'middle';\n    });\n  }\n}\n"],"version":3}

package/dist/components/cat-datepicker-inline.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CatDatepickerInline extends Components.CatDatepickerInline, HTMLElement {}
+export const CatDatepickerInline: {
+  prototype: CatDatepickerInline;
+  new (): CatDatepickerInline;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/cat-datepicker-inline.js

@@ -0,0 +1,100 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { f as flatpickr, g as getConfig, a as getLocale, b as getFormat } from './cat-datepicker.locale.js';
+import { c as catI18nRegistry } from './cat-i18n-registry.js';
+
+const catDatepickerInlineCss = "@charset \"UTF-8\";.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);animation:fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{left:0;}.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{right:0;}.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill 0.1s;transition:fill 0.1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:\"\";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0px, 0px, 0px);transform:translate3d(0px, 0px, 0px)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:0.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 0.5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 0.5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0px, 0px, 0px);transform:translate3d(0px, 0px, 0px);opacity:1}.dayContainer+.dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7, 5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7, 5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:\"\";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0, -20px, 0);transform:translate3d(0, -20px, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0, -20px, 0);transform:translate3d(0, -20px, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}.flatpickr-calendar{font-size:0.875rem;line-height:1.125rem;font-weight:var(--cat-font-weight-body, 400);box-shadow:0 4px 6px -2px rgba(27, 31, 38, 0.03), 0 12px 16px -4px rgba(27, 31, 38, 0.08);border-radius:var(--cat-border-radius-m, 0.25rem);border:1px solid rgb(var(--cat-border-color, 235, 236, 240));background:white;padding:1rem}.flatpickr-calendar:not(.inline).animate{transform:translateY(-1rem);opacity:0;transition:transform 125ms cubic-bezier(0.3, 0, 0.8, 0.15), opacity 125ms cubic-bezier(0.3, 0, 0.8, 0.15)}.flatpickr-calendar::before,.flatpickr-calendar::after{display:none}.flatpickr-calendar.inline,.flatpickr-calendar.open{display:flex;flex-direction:column;gap:1rem;width:auto !important}.flatpickr-calendar.inline{border:unset;padding:0}.flatpickr-calendar.open{z-index:calc(var(--cat-z-index, 1000) + 100);margin-top:0.75rem;margin-left:-0.75rem}.flatpickr-calendar.open.animate{opacity:1;transform:translateY(0);transition:transform 500ms cubic-bezier(0.05, 0.7, 0.1, 1), opacity 500ms cubic-bezier(0.05, 0.7, 0.1, 1)}.flatpickr-months{gap:0.25rem}.flatpickr-months .flatpickr-month{height:auto}.flatpickr-current-month{font-family:var(--cat-font-family-head, \"Lato\"), system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, var(--cat-font-family-emoji, \"\"), \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";font-size:1.125rem;line-height:1.5rem;color:rgb(var(--cat-font-color-head, 0, 0, 0));font-weight:var(--cat-font-weight-head, 600);font-feature-settings:\"pnum\";height:100%;padding:0;display:flex;position:static;width:auto;gap:0.25rem}.flatpickr-current-month .flatpickr-monthDropdown-months{padding:0 0.25rem;flex:1;margin:unset;font-weight:inherit;border-radius:var(--cat-border-radius-m, 0.25rem)}.flatpickr-current-month .flatpickr-monthDropdown-months:hover,.flatpickr-current-month .flatpickr-monthDropdown-months:focus-within{background-color:rgba(var(--cat-primary-bg, 0, 129, 148), 0.05)}.flatpickr-current-month input.cur-year{padding:0;font-weight:inherit;line-height:2.25rem}.flatpickr-current-month .numInputWrapper{width:7ch}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{position:static;width:2.25rem;height:2.25rem;padding:0;align-items:center;display:flex;justify-content:center;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:rgb(var(--cat-font-color-body, 0, 0, 0))}.flatpickr-weekdays{height:2rem}.flatpickr-weekdays .flatpickr-weekday{color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-size:0.75rem;line-height:1rem;font-weight:700}.flatpickr-weekwrapper .flatpickr-weekday{height:2rem}.flatpickr-weekwrapper .flatpickr-weeks{box-shadow:none;width:2rem;padding:0;margin-right:0.5rem;background:#f2f4f7;border-radius:var(--cat-border-radius-m, 0.25rem)}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{font-size:0.75rem;line-height:1rem;font-weight:700;color:rgb(var(--cat-font-color-muted, 81, 92, 108));text-align:center;line-height:2.25rem}.flatpickr-days{width:15.75rem !important}.dayContainer{width:15.75rem;min-width:15.75rem;max-width:15.75rem}.flatpickr-day{color:rgb(var(--cat-font-color-body, 0, 0, 0));height:2.25rem;line-height:2.25rem;border:0;border-radius:var(--cat-border-radius-m, 0.25rem)}.flatpickr-day:hover{background-color:#f2f4f7;font-weight:700}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.flatpickr-day.today{color:rgb(var(--cat-primary-text, 0, 129, 148));box-shadow:inset 0 0 0 2px rgb(var(--cat-primary-text, 0, 129, 148))}.flatpickr-day.today:hover,.flatpickr-day.today:focus{background-color:#f2f4f7;color:rgb(var(--cat-primary-text, 0, 129, 148))}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(var(--cat-font-color-muted, 81, 92, 108), 0.5)}.flatpickr-day.selected,.flatpickr-day.selected:hover,.flatpickr-day.selected:focus,.flatpickr-day.selected.inRange,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange,.flatpickr-day.startRange:hover,.flatpickr-day.startRange:focus,.flatpickr-day.startRange.inRange,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange,.flatpickr-day.endRange:hover,.flatpickr-day.endRange:focus,.flatpickr-day.endRange.inRange,.flatpickr-day.endRange.nextMonthDay,.flatpickr-day.endRange.prevMonthDay{font-weight:700;background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{background-color:rgba(var(--cat-primary-bg, 0, 129, 148), 0.1)}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-top-left-radius:var(--cat-border-radius-m, 0.25rem);border-bottom-left-radius:var(--cat-border-radius-m, 0.25rem)}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-top-right-radius:var(--cat-border-radius-m, 0.25rem);border-bottom-right-radius:var(--cat-border-radius-m, 0.25rem)}.numInputWrapper{padding:0 1rem 0 0.5rem;border-radius:var(--cat-border-radius-m, 0.25rem)}.numInputWrapper:hover,.numInputWrapper:focus-within{background-color:rgba(var(--cat-primary-bg, 0, 129, 148), 0.05)}.numInputWrapper span{border:none;background:transparent;width:1rem;padding:0;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.numInputWrapper span.arrowUp::after{content:\"↑\";align-items:flex-end}.numInputWrapper span.arrowDown::after{content:\"↓\";align-items:flex-start}.numInputWrapper span::after{font-size:0.75rem;line-height:1rem;font-weight:700;position:static;border:0 !important;font-size:10px;display:flex;height:100%;justify-content:center}.numInputWrapper span:hover{color:rgb(var(--cat-font-color-body, 0, 0, 0));background:transparent}.flatpickr-calendar.hasTime .flatpickr-time{border:1px solid rgb(var(--cat-border-color, 235, 236, 240));border-radius:var(--cat-border-radius-m, 0.25rem);min-width:12rem;height:auto}.flatpickr-calendar.hasTime .flatpickr-time .numInputWrapper{height:2rem;padding:0;margin:0.25rem;display:flex}.flatpickr-calendar.hasTime.noCalendar{padding:0}.flatpickr-calendar.hasTime.noCalendar .flatpickr-time{border:none}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{margin:0 0.25rem;font-family:var(--cat-font-family-head, \"Lato\"), system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, var(--cat-font-family-emoji, \"\"), \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";font-size:1.125rem;line-height:1.5rem;color:rgb(var(--cat-font-color-head, 0, 0, 0));font-weight:400;font-feature-settings:\"pnum\";color:rgb(var(--cat-font-color-body, 0, 0, 0));line-height:2.25rem}.flatpickr-time .flatpickr-am-pm{width:25%;padding:0 0.5rem}.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time .flatpickr-am-pm:focus{border-radius:var(--cat-border-radius-m, 0.25rem);background-color:rgba(var(--cat-primary-bg, 0, 129, 148), 0.05)}.flatpickr-time{max-height:unset}.flatpickr-time input{background:transparent !important;color:rgb(var(--cat-font-color-body, 0, 0, 0));font-size:0.9375rem;line-height:2.25rem;font-family:inherit}.flatpickr-time input.flatpickr-hour{font-weight:inherit}.flatpickr-day.inRange:not(.today),.flatpickr-day.week.selected{box-shadow:none}.flatpickr-day.inRange:nth-child(7n+1),.flatpickr-day.week.selected:nth-child(7n+1){border-top-left-radius:var(--cat-border-radius-m, 0.25rem);border-bottom-left-radius:var(--cat-border-radius-m, 0.25rem)}.flatpickr-day.inRange:nth-child(7n+7),.flatpickr-day.week.selected:nth-child(7n+7){border-top-right-radius:var(--cat-border-radius-m, 0.25rem);border-bottom-right-radius:var(--cat-border-radius-m, 0.25rem)}.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)){box-shadow:none}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:var(--cat-border-radius-m, 0.25rem)}:host{display:inline-flex;margin-bottom:1rem}:host>div{display:flex}:host([hidden]){display:none}.datepicker-disabled .flatpickr-days,.datepicker-disabled .flatpickr-time,.datepicker-readonly .flatpickr-days,.datepicker-readonly .flatpickr-time{pointer-events:none}.datepicker-disabled .flatpickr-days{opacity:0.75}.datepicker-disabled .flatpickr-time input,.datepicker-disabled .flatpickr-time .flatpickr-time-separator,.datepicker-disabled .flatpickr-time .flatpickr-am-pm{color:rgb(var(--cat-font-color-muted, 81, 92, 108));opacity:0.75}input{display:none}.flatpickr-calendar{box-shadow:unset;background:unset}";
+
+const CatDatepickerInline$1 = /*@__PURE__*/ proxyCustomElement(class CatDatepickerInline extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.catChange = createEvent(this, "catChange", 7);
+    this.disabled = false;
+    this.max = undefined;
+    this.min = undefined;
+    this.mode = 'date';
+    this.readonly = false;
+    this.step = 5;
+    this.value = undefined;
+  }
+  onValueChanged(value) {
+    if (value) {
+      this.pickr?.setDate(value, false);
+      this.catChange.emit(value);
+    }
+    else {
+      this.pickr?.clear(false);
+      this.catChange.emit(undefined);
+    }
+  }
+  onDisabledChanged(value) {
+    // Dynamically unsetting 'enabled' value to undefined is not working due to
+    // a bug in the library. We thus need to fully recreate the date picker.
+    this.pickr?.destroy();
+    if (this.input) {
+      this.pickr = this.initDatepicker(this.input, value);
+    }
+  }
+  componentDidLoad() {
+    if (this.input) {
+      this.pickr = this.initDatepicker(this.input, this.disabled);
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { tabIndex: this.disabled || this.readonly ? -1 : undefined, class: {
+        'datepicker-wrapper': true,
+        'datepicker-disabled': this.disabled,
+        'datepicker-readonly': this.readonly
+      } }, h("input", { ref: el => (this.input = el), value: this.value, disabled: this.disabled, readonly: this.readonly }))));
+  }
+  initDatepicker(input, disabled) {
+    return flatpickr(input, getConfig({
+      locale: getLocale(catI18nRegistry.getLocale()),
+      format: getFormat(catI18nRegistry.getLocale(), this.mode),
+      mode: this.mode,
+      min: this.min,
+      max: this.max,
+      step: this.step,
+      disabled,
+      readonly: this.readonly,
+      applyChange: value => (this.value = value)
+    }, {
+      ...(disabled ? { enable: [] } : {}),
+      inline: true
+    }));
+  }
+  static get watchers() { return {
+    "value": ["onValueChanged"],
+    "disabled": ["onDisabledChanged"]
+  }; }
+  static get style() { return catDatepickerInlineCss; }
+}, [1, "cat-datepicker-inline", {
+    "disabled": [4],
+    "max": [1],
+    "min": [1],
+    "mode": [1],
+    "readonly": [4],
+    "step": [2],
+    "value": [1025]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["cat-datepicker-inline"];
+  components.forEach(tagName => { switch (tagName) {
+    case "cat-datepicker-inline":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CatDatepickerInline$1);
+      }
+      break;
+  } });
+}
+
+const CatDatepickerInline = CatDatepickerInline$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CatDatepickerInline, defineCustomElement };
+
+//# sourceMappingURL=cat-datepicker-inline.js.map

package/dist/components/cat-datepicker-inline.js.map

@@ -0,0 +1 @@
+{"file":"cat-datepicker-inline.js","mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,2hyBAA2hyB;;MCa7iyBA,qBAAmB;;;;;;oBAOX,KAAK;;;gBAeU,MAAM;oBAKrB,KAAK;gBAKT,CAAC;;;EAahB,cAAc,CAAC,KAAa;IAC1B,IAAI,KAAK,EAAE;MACT,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;MAClC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC5B;SAAM;MACL,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;MACzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KAChC;GACF;EAGD,iBAAiB,CAAC,KAAc;;;IAG9B,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC;IACtB,IAAI,IAAI,CAAC,KAAK,EAAE;MACd,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;KACrD;GACF;EAED,gBAAgB;IACd,IAAI,IAAI,CAAC,KAAK,EAAE;MACd,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC7D;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,SAAS,EACzD,KAAK,EAAE;QACL,oBAAoB,EAAE,IAAI;QAC1B,qBAAqB,EAAE,IAAI,CAAC,QAAQ;QACpC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;OACrC,IAED,aACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAChB,CACL,CACD,EACP;GACH;EAEO,cAAc,CAAC,KAAuB,EAAE,QAAiB;IAC/D,OAAO,SAAS,CACd,KAAK,EACL,SAAS,CACP;MACE,MAAM,EAAE,SAAS,CAACC,eAAI,CAAC,SAAS,EAAE,CAAC;MACnC,MAAM,EAAE,SAAS,CAACA,eAAI,CAAC,SAAS,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC;MAC9C,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,GAAG,EAAE,IAAI,CAAC,GAAG;MACb,GAAG,EAAE,IAAI,CAAC,GAAG;MACb,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,QAAQ;MACR,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,WAAW,EAAE,KAAK,KAAK,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3C,EACD;MACE,IAAI,QAAQ,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC;MACnC,MAAM,EAAE,IAAI;KACb,CACF,CACF,CAAC;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatDatepickerInline","i18n"],"sources":["src/components/cat-datepicker-inline/cat-datepicker-inline.scss?tag=cat-datepicker-inline&encapsulation=shadow","src/components/cat-datepicker-inline/cat-datepicker-inline.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n@import '~flatpickr/dist/flatpickr.css';\n@import '../styles/vendor/flatpickr';\n\n:host {\n  display: inline-flex;\n  margin-bottom: $cat-body-margin-bottom;\n\n  > div {\n    display: flex;\n  }\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.datepicker-disabled,\n.datepicker-readonly {\n  .flatpickr-days,\n  .flatpickr-time {\n    pointer-events: none;\n  }\n}\n\n.datepicker-disabled {\n  .flatpickr-days {\n    opacity: 0.75;\n  }\n  .flatpickr-time {\n    input,\n    .flatpickr-time-separator,\n    .flatpickr-am-pm {\n      color: cat-token('color.ui.font.muted');\n      opacity: 0.75;\n    }\n  }\n}\n\ninput {\n  display: none;\n}\n\n.flatpickr-calendar {\n  box-shadow: unset;\n  background: unset;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport flatpickr from 'flatpickr';\nimport { getConfig } from '../cat-datepicker/cat-datepicker.config';\nimport { getFormat } from '../cat-datepicker/cat-datepicker.format';\nimport { getLocale } from '../cat-datepicker/cat-datepicker.locale';\nimport { CatDatepickerMode } from '../cat-datepicker/cat-datepicker.mode';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n@Component({\n  tag: 'cat-datepicker-inline',\n  styleUrl: 'cat-datepicker-inline.scss',\n  shadow: true\n})\nexport class CatDatepickerInline {\n  private pickr?: flatpickr.Instance;\n  private input?: HTMLInputElement;\n\n  /**\n   * Whether the input is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A maximum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n   */\n  @Prop() max?: string;\n\n  /**\n   * A minimum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n   */\n  @Prop() min?: string;\n\n  /**\n   * The mode of the datepicker, to select a date, time, both, a date range or a week number.\n   */\n  @Prop() mode: CatDatepickerMode = 'date';\n\n  /**\n   * The value is not editable.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * The step size to use when changing the time.\n   */\n  @Prop() step = 5;\n\n  /**\n   * The value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z or as a week number string.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter<string>;\n\n  @Watch('value')\n  onValueChanged(value: string) {\n    if (value) {\n      this.pickr?.setDate(value, false);\n      this.catChange.emit(value);\n    } else {\n      this.pickr?.clear(false);\n      this.catChange.emit(undefined);\n    }\n  }\n\n  @Watch('disabled')\n  onDisabledChanged(value: boolean) {\n    // Dynamically unsetting 'enabled' value to undefined is not working due to\n    // a bug in the library. We thus need to fully recreate the date picker.\n    this.pickr?.destroy();\n    if (this.input) {\n      this.pickr = this.initDatepicker(this.input, value);\n    }\n  }\n\n  componentDidLoad() {\n    if (this.input) {\n      this.pickr = this.initDatepicker(this.input, this.disabled);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          tabIndex={this.disabled || this.readonly ? -1 : undefined}\n          class={{\n            'datepicker-wrapper': true,\n            'datepicker-disabled': this.disabled,\n            'datepicker-readonly': this.readonly\n          }}\n        >\n          <input\n            ref={el => (this.input = el)}\n            value={this.value}\n            disabled={this.disabled}\n            readonly={this.readonly}\n          ></input>\n        </div>\n      </Host>\n    );\n  }\n\n  private initDatepicker(input: HTMLInputElement, disabled: boolean): flatpickr.Instance {\n    return flatpickr(\n      input,\n      getConfig(\n        {\n          locale: getLocale(i18n.getLocale()),\n          format: getFormat(i18n.getLocale(), this.mode),\n          mode: this.mode,\n          min: this.min,\n          max: this.max,\n          step: this.step,\n          disabled,\n          readonly: this.readonly,\n          applyChange: value => (this.value = value)\n        },\n        {\n          ...(disabled ? { enable: [] } : {}),\n          inline: true\n        }\n      )\n    );\n  }\n}\n"],"version":3}