@syncfusion/ej2-angular-calendars 20.1.55 → 20.1.58-alpha

package/styles/calendar/tailwind.scss

@@ -1 +1,5 @@
-@import 'ej2-calendars/styles/calendar/tailwind.scss';
+@import 'ej2-base/styles/tailwind-definition.scss';
+@import 'ej2-buttons/styles/button/tailwind-definition.scss';
+@import 'tailwind-definition.scss';
+@import 'icons/tailwind.scss';
+@import 'all.scss';

package/styles/datepicker/_all.scss

@@ -0,0 +1,2 @@
+@import 'layout.scss';
+@import 'theme.scss';

package/styles/datepicker/_bootstrap-dark-definition.scss

@@ -0,0 +1,34 @@
+//default 
+$datepicker-icon-color: none !default;
+$datepicker-active-icon-color: $datepicker-icon-color !default;
+$datepicker-popup-box-shadow: 0 6px 12px rgba($base-font, .5) !default;
+$datepicker-input-border-style: none !default;
+$datepicker-popup-border-radius: 4px !default;
+$datepicker-calendar-border-style: none !default;
+$datepicker-icon: '\e960' !default;
+$datepicker-popup-border: 1px solid $grey-44 !default;
+$datepicker-icon-font-size: 16px !default;
+$datepicker-bigger-icon-font-size: 20px !default;
+$datepicker-overlay: rgba($grey-base, .6) !default;
+$datepicker-icon-normal-margin: 0 !default;
+$datepicker-icon-bigger-margin: 0 !default;
+$datepicker-icon-hover-color: $grey-e6 !default;
+$datepicker-popup-bg-color: $grey-dark !default;
+$datepicker-icon-border-radius: 0 !default;
+$datepicker-box-sizing: border-box !default;
+$datepicker-othermonth-row: table-row !default;
+$datepicker-modal-header-bg: transparent !default;
+$datepicker-modal-header-color: transparent !default;
+$datepicker-modal-header-display: none !default;
+$datepicker-calendar-tbody-landscape-height: 150px !default;
+// mouse small icon
+$datepicker-small-icon-font-size: 14px !default;
+// Touch small icon
+$datepicker-bigger-small-icon-font-size: 18px !default;
+$model-year-font-size: 14px !default;
+$model-year-font-weight: 500 !default;
+$model-year-line-height: 32px !default;
+$model-month-font-size: 20px !default;
+$model-month-font-weight: 500 !default;
+$model-month-line-height: 32px !default;
+//enddefault

package/styles/datepicker/_bootstrap-definition.scss

@@ -0,0 +1,32 @@
+$datepicker-icon-color: none !default;
+$datepicker-active-icon-color: $datepicker-icon-color !default;
+$datepicker-popup-box-shadow: 0 6px 12px rgba($grey-base, .175) !default;
+$datepicker-input-border-style: none !default;
+$datepicker-popup-bg-color: $grey-white !default;
+$datepicker-popup-border-radius: 4px !default;
+$datepicker-calendar-border-style: none !default;
+$datepicker-icon: '\e960' !default;
+$datepicker-popup-border: 1px solid $grey-cc !default;
+$datepicker-icon-font-size: 16px !default;
+$datepicker-bigger-icon-font-size: 20px !default;
+$datepicker-overlay: rgba($grey-base, .6) !default;
+$datepicker-icon-normal-margin: 0 !default;
+$datepicker-icon-bigger-margin: 0 !default;
+$datepicker-icon-hover-color: $grey-e6 !default;
+$datepicker-icon-border-radius: 0 !default;
+$datepicker-box-sizing: border-box !default;
+$datepicker-othermonth-row: table-row !default;
+$datepicker-modal-header-bg: transparent !default;
+$datepicker-modal-header-color: transparent !default;
+$datepicker-modal-header-display: none !default;
+$datepicker-calendar-tbody-landscape-height: 150px !default;
+// mouse small icon
+$datepicker-small-icon-font-size: 14px !default;
+// Touch small icon
+$datepicker-bigger-small-icon-font-size: 18px !default;
+$model-year-font-size: 14px !default;
+$model-year-font-weight: 500 !default;
+$model-year-line-height: 32px !default;
+$model-month-font-size: 20px !default;
+$model-month-font-weight: 500 !default;
+$model-month-line-height: 32px !default;

package/styles/datepicker/_bootstrap4-definition.scss

@@ -0,0 +1,38 @@
+$datepicker-icon-color: $white !default;
+$datepicker-active-icon-color: $white !default;
+$datepicker-popup-box-shadow: none !default;
+$datepicker-input-border-style: none !default;
+$datepicker-popup-bg-color: $content-bg !default;
+$datepicker-popup-border-radius: 4px !default;
+$datepicker-calendar-border-style: none !default;
+$datepicker-icon: '\e960' !default;
+$datepicker-popup-border: 1px solid rgba($black, .15) !default;
+$datepicker-icon-font-size: 14px !default;
+$datepicker-icon-container-min-height: 29px !default;
+$datepicker-icon-container-min-width: 24px !default;
+$datepicker-bigger-icon-container-min-height: 36px !default;
+$datepicker-bigger-icon-container-min-width: 34px !default;
+$datepicker-bigger-icon-font-size: 16px !default;
+$datepicker-overlay: rgba($black, .5) !default;
+$datepicker-icon-normal-margin: 0 !default;
+$datepicker-icon-bigger-margin: 0 !default;
+$datepicker-icon-hover-color: $gray-900 !default;
+$datepicker-icon-active-bg-color: darken($gray-600, 10%) !default;
+$datepicker-active-border-color: darken($gray-600, 10%) !default;
+$datepicker-icon-border-radius: 0 !default;
+$datepicker-box-sizing: border-box !default;
+$datepicker-othermonth-row: table-row !default;
+$datepicker-modal-header-bg: transparent !default;
+$datepicker-modal-header-color: transparent !default;
+$datepicker-modal-header-display: none !default;
+$datepicker-calendar-tbody-landscape-height: 150px !default;
+// mouse small icon
+$datepicker-small-icon-font-size: 12px !default;
+// Touch small icon
+$datepicker-bigger-small-icon-font-size: 15px !default;
+$model-year-font-size: 14px !default;
+$model-year-font-weight: 500 !default;
+$model-year-line-height: 32px !default;
+$model-month-font-size: 20px !default;
+$model-month-font-weight: 500 !default;
+$model-month-line-height: 32px !default;

package/styles/datepicker/_bootstrap5-dark-definition.scss

@@ -0,0 +1 @@
+@import './bootstrap5-definition.scss';

package/styles/datepicker/_bootstrap5-definition.scss

@@ -0,0 +1,42 @@
+//default 
+$datepicker-icon: '\e901' !default;
+$datepicker-icon-font-size: 18px !default;
+$datepicker-icon-container-min-height: 18px !default;
+$datepicker-icon-container-min-width: 30px !default;
+$datepicker-bigger-icon-container-min-height: 18px !default;
+$datepicker-bigger-icon-container-min-width: 36px !default;
+$datepicker-bigger-icon-font-size: 22px !default;
+$datepicker-icon-normal-margin: 0 !default;
+$datepicker-icon-bigger-margin: 0 !default;
+$datepicker-icon-border-radius: 50% !default;
+$datepicker-popup-border-radius: 6px !default;
+$datepicker-box-sizing: border-box !default;
+$datepicker-modal-header-display: block !default;
+$datepicker-calendar-tbody-landscape-height: 130px !default;
+$datepicker-popup-bigger-margin-top: 8px !default;
+// mouse small icon
+$datepicker-small-icon-font-size: 16px !default;
+// Touch small icon
+$datepicker-bigger-small-icon-font-size: 20px !default;
+// color variables
+$datepicker-popup-border: 1px solid $border-light !default;
+$datepicker-input-border-style: none !default;
+$datepicker-calendar-border-style: none !default;
+$datepicker-icon-color: $secondary-text-color !default;
+$datepicker-active-icon-color: $datepicker-icon-color !default;
+$datepicker-icon-active-bg-color: $secondary-bg-color-pressed !default;
+$datepicker-active-border-color: $border !default;
+$datepicker-popup-box-shadow: $shadow-lg !default;
+$datepicker-overlay: rgba($black, .5) !default;
+$datepicker-icon-hover-color: $secondary-text-color-hover !default;
+$datepicker-popup-bg-color: $flyout-bg-color !default;
+$datepicker-othermonth-row: none !default;
+$datepicker-modal-header-bg: $icon-color !default;
+$datepicker-modal-header-color: $content-bg-color-alt2 !default;
+$model-year-font-size: 14px !default;
+$model-year-font-weight: 500 !default;
+$model-year-line-height: 32px !default;
+$model-month-font-size: 20px !default;
+$model-month-font-weight: 500 !default;
+$model-month-line-height: 32px !default;
+//enddefault

package/styles/datepicker/_fabric-dark-definition.scss

@@ -0,0 +1,34 @@
+//default
+$datepicker-icon-color: none !default;
+$datepicker-active-icon-color: $datepicker-icon-color !default;
+$datepicker-popup-box-shadow: none !default;
+$datepicker-input-border-style: 1px solid $theme-primary !default;
+$datepicker-calendar-border-style: none !default;
+$datepicker-icon: '\e93a' !default;
+$datepicker-popup-border: 1px solid $neutral-light !default;
+$datepicker-icon-font-size: 16px !default;
+$datepicker-bigger-icon-font-size: 20px !default;
+$datepicker-overlay: rgba($neutral-black, .6) !default;
+$datepicker-icon-normal-margin: 0 !default;
+$datepicker-icon-bigger-margin: 0 !default;
+$datepicker-popup-bg-color: $neutral-lighter-alt !default;
+$datepicker-icon-hover-color: $hover-bg-color !default;
+$datepicker-icon-border-radius: 0 !default;
+$datepicker-popup-border-radius: 0 !default;
+$datepicker-box-sizing: border-box !default;
+$datepicker-othermonth-row: table-row !default;
+$datepicker-modal-header-bg: $theme-primary !default;
+$datepicker-modal-header-color: $neutral-white !default;
+$datepicker-modal-header-display: none !default;
+$datepicker-calendar-tbody-landscape-height: 150px !default;
+// mouse small icon
+$datepicker-small-icon-font-size: 14px !default;
+// Touch small icon
+$datepicker-bigger-small-icon-font-size: 18px !default;
+$model-year-font-size: 14px !default;
+$model-year-font-weight: 500 !default;
+$model-year-line-height: 32px !default;
+$model-month-font-size: 20px !default;
+$model-month-font-weight: 500 !default;
+$model-month-line-height: 32px !default;
+//enddefault

package/styles/datepicker/_fabric-definition.scss

@@ -0,0 +1,32 @@
+$datepicker-icon-color: none !default;
+$datepicker-active-icon-color: $datepicker-icon-color !default;
+$datepicker-popup-box-shadow: 0 0 5px 0 rgba($neutral-black, .4) !default;
+$datepicker-input-border-style: 1px solid $theme-primary !default;
+$datepicker-calendar-border-style: none !default;
+$datepicker-icon: '\e93a' !default;
+$datepicker-popup-border: 1px solid $neutral-light !default;
+$datepicker-popup-bg-color: $content-bg-color !default;
+$datepicker-icon-font-size: 16px !default;
+$datepicker-bigger-icon-font-size: 20px !default;
+$datepicker-overlay: rgba($neutral-black, .6) !default;
+$datepicker-icon-normal-margin: 0 !default;
+$datepicker-icon-bigger-margin: 0 !default;
+$datepicker-icon-hover-color: $hover-bg-color !default;
+$datepicker-icon-border-radius: 0 !default;
+$datepicker-popup-border-radius: 0 !default;
+$datepicker-box-sizing: border-box !default;
+$datepicker-othermonth-row: table-row !default;
+$datepicker-modal-header-bg: $theme-primary !default;
+$datepicker-modal-header-color: $neutral-white !default;
+$datepicker-modal-header-display: none !default;
+$datepicker-calendar-tbody-landscape-height: 150px !default;
+// mouse small icon
+$datepicker-small-icon-font-size: 14px !default;
+// Touch small icon
+$datepicker-bigger-small-icon-font-size: 18px !default;
+$model-year-font-size: 14px !default;
+$model-year-font-weight: 500 !default;
+$model-year-line-height: 32px !default;
+$model-month-font-size: 20px !default;
+$model-month-font-weight: 500 !default;
+$model-month-line-height: 32px !default;

package/styles/datepicker/_fluent-dark-definition.scss

@@ -0,0 +1 @@
+@import './fluent-definition.scss';

package/styles/datepicker/_fluent-definition.scss

@@ -0,0 +1,43 @@
+//default 
+$datepicker-icon: '\e901' !default;
+$datepicker-icon-font-size: 18px !default;
+$datepicker-icon-container-min-height: 18px !default;
+$datepicker-icon-container-min-width: 30px !default;
+$datepicker-bigger-icon-container-min-height: 18px !default;
+$datepicker-bigger-icon-container-min-width: 36px !default;
+$datepicker-bigger-icon-font-size: 22px !default;
+$datepicker-icon-normal-margin: 0 !default;
+$datepicker-icon-bigger-margin: 0 !default;
+$datepicker-icon-border-radius: 50% !default;
+$datepicker-popup-border-radius: 6px !default;
+$datepicker-box-sizing: border-box !default;
+$datepicker-modal-header-display: block !default;
+$datepicker-calendar-tbody-landscape-height: 130px !default;
+$datepicker-popup-bigger-margin-top: 8px !default;
+// mouse small icon
+$datepicker-small-icon-font-size: 16px !default;
+// Touch small icon
+$datepicker-bigger-small-icon-font-size: 20px !default;
+// color variables
+$datepicker-popup-border: 0 solid $border-light !default;
+$datepicker-input-border-style: none !default;
+$datepicker-calendar-border-style: none !default;
+$datepicker-icon-color: $icon-color !default;
+$datepicker-active-icon-color: $datepicker-icon-color !default;
+$datepicker-icon-active-bg-color: $content-bg-color-alt4 !default;
+$datepicker-active-border-color: $border !default;
+$datepicker-popup-box-shadow: $shadow-md !default;
+$datepicker-overlay: $overlay-bg-color !default;
+$datepicker-icon-hover-color: $icon-color-hover !default;
+$datepicker-popup-bg-color: $flyout-bg-color !default;
+$datepicker-othermonth-row: none !default;
+$datepicker-modal-header-bg: $secondary-border-color-focus !default;
+$datepicker-modal-header-color: $primary-text-color !default;
+$model-year-font-size: 14px !default;
+$model-year-font-weight: 600 !default;
+$model-year-line-height: 22px !default;
+$model-month-font-size: 18px !default;
+$model-month-font-weight: 600 !default;
+$model-month-line-height: 28px !default;
+
+//enddefault

package/styles/datepicker/_fusionnew-definition.scss

@@ -0,0 +1,42 @@
+//default 
+$datepicker-icon: '\e901' !default;
+$datepicker-icon-font-size: 18px !default;
+$datepicker-icon-container-min-height: 18px !default;
+$datepicker-icon-container-min-width: 30px !default;
+$datepicker-bigger-icon-container-min-height: 18px !default;
+$datepicker-bigger-icon-container-min-width: 36px !default;
+$datepicker-bigger-icon-font-size: 22px !default;
+$datepicker-icon-normal-margin: 0 !default;
+$datepicker-icon-bigger-margin: 0 !default;
+$datepicker-icon-border-radius: 50% !default;
+$datepicker-popup-border-radius: 6px !default;
+$datepicker-box-sizing: border-box !default;
+$datepicker-modal-header-display: block !default;
+$datepicker-calendar-tbody-landscape-height: 130px !default;
+$datepicker-popup-bigger-margin-top: 8px !default;
+// mouse small icon
+$datepicker-small-icon-font-size: 16px !default;
+// Touch small icon
+$datepicker-bigger-small-icon-font-size: 20px !default;
+// color variables
+$datepicker-popup-border: 1px solid $border-light !default;
+$datepicker-input-border-style: none !default;
+$datepicker-calendar-border-style: none !default;
+$datepicker-icon-color: $secondary-text-color !default;
+$datepicker-active-icon-color: $datepicker-icon-color !default;
+$datepicker-icon-active-bg-color: $secondary-bg-color-pressed !default;
+$datepicker-active-border-color: $border !default;
+$datepicker-popup-box-shadow: $shadow-lg !default;
+$datepicker-overlay: rgba($black, .5) !default;
+$datepicker-icon-hover-color: $secondary-text-color-hover !default;
+$datepicker-popup-bg-color: $flyout-bg-color !default;
+$datepicker-othermonth-row: none !default;
+$datepicker-modal-header-bg: $icon-color !default;
+$datepicker-modal-header-color: $content-bg-color-alt2 !default;
+$model-year-font-size: 14px !default;
+$model-year-font-weight: 500 !default;
+$model-year-line-height: 32px !default;
+$model-month-font-size: 20px !default;
+$model-month-font-weight: 500 !default;
+$model-month-line-height: 32px !default;
+//enddefault

package/styles/datepicker/_highcontrast-definition.scss

@@ -0,0 +1,33 @@
+$datepicker-icon-color: $content-font !default;
+$datepicker-active-icon-color: $content-font !default;
+$datepicker-popup-box-shadow: none !default;
+$datepicker-input-border-style: 2px solid $border-fg !default;
+$datepicker-calendar-border-style: none !default;
+$datepicker-icon: '\e93a' !default;
+$datepicker-popup-bg-color: $bg-base-0 !default;
+$datepicker-popup-border: 1px solid $border-default !default;
+$datepicker-icon-font-size: 16px !default;
+$datepicker-bigger-icon-font-size: 20px !default;
+$datepicker-overlay: rgba($bg-base-0, .6) !default;
+$datepicker-icon-normal-margin: 0 !default;
+$datepicker-icon-bigger-margin: 0 !default;
+$datepicker-icon-margin: 0 !default;
+$datepicker-icon-hover-color: $hover-bg !default;
+$datepicker-icon-border-radius: 0 !default;
+$datepicker-popup-border-radius: 0 !default;
+$datepicker-box-sizing: border-box !default;
+$datepicker-othermonth-row: table-row !default;
+$datepicker-modal-header-bg: $header-font !default;
+$datepicker-modal-header-color: $header-font-alt !default;
+$datepicker-modal-header-display: none !default;
+$datepicker-calendar-tbody-landscape-height: 150px !default;
+// mouse small icon
+$datepicker-small-icon-font-size: 14px !default;
+// Touch small icon
+$datepicker-bigger-small-icon-font-size: 18px !default;
+$model-year-font-size: 14px !default;
+$model-year-font-weight: 500 !default;
+$model-year-line-height: 32px !default;
+$model-month-font-size: 20px !default;
+$model-month-font-weight: 500 !default;
+$model-month-line-height: 32px !default;

package/styles/datepicker/_highcontrast-light-definition.scss

@@ -0,0 +1,35 @@
+//default 
+$datepicker-icon-color: $content-font !default;
+$datepicker-active-icon-color: $content-font !default;
+$datepicker-popup-box-shadow: none !default;
+$datepicker-input-border-style: 2px solid $border-fg !default;
+$datepicker-calendar-border-style: none !default;
+$datepicker-icon: '\e93a' !default;
+$datepicker-popup-border: 1px solid $border-default !default;
+$datepicker-icon-font-size: 16px !default;
+$datepicker-bigger-icon-font-size: 20px !default;
+$datepicker-overlay: rgba($bg-base-0, .6) !default;
+$datepicker-icon-normal-margin: 0 !default;
+$datepicker-icon-bigger-margin: 0 !default;
+$datepicker-popup-bg-color: $bg-base-0 !default;
+$datepicker-icon-margin: 0 !default;
+$datepicker-icon-hover-color: $hover-bg !default;
+$datepicker-icon-border-radius: 0 !default;
+$datepicker-popup-border-radius: 0 !default;
+$datepicker-box-sizing: border-box !default;
+$datepicker-othermonth-row: table-row !default;
+$datepicker-modal-header-bg: $header-font !default;
+$datepicker-modal-header-color: $header-font-alt !default;
+$datepicker-modal-header-display: none !default;
+$datepicker-calendar-tbody-landscape-height: 150px !default;
+// mouse small icon
+$datepicker-small-icon-font-size: 14px !default;
+// Touch small icon
+$datepicker-bigger-small-icon-font-size: 18px !default;
+$model-year-font-size: 14px !default;
+$model-year-font-weight: 500 !default;
+$model-year-line-height: 32px !default;
+$model-month-font-size: 20px !default;
+$model-month-font-weight: 500 !default;
+$model-month-line-height: 32px !default;
+//enddefault

package/styles/datepicker/_layout.scss

@@ -0,0 +1,123 @@
+@include export-module('datepicker-layout') {
+
+  .e-input-group.e-control-wrapper.e-date-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
+  .e-float-input.e-control-wrapper.e-input-group.e-date-wrapper.e-non-edit.e-input-focus input:focus ~ .e-clear-icon {
+    display: flex;
+  }
+
+  .e-date-wrapper:not(.e-filled) {
+    #{if(&, '&', '*')} .e-date-icon.e-icons {
+      @if $skin-name == 'material' or $skin-name == 'material-dark' {
+        box-sizing: $datepicker-box-sizing;
+      }
+    }
+  }
+
+  #{&}.e-datepicker.e-bigger,
+  .e-bigger #{&}.e-datepicker {
+    #{if(&, '&', '*')}.e-popup-wrapper {
+      @if $skin-name == 'tailwind' {
+        margin-top: $datepicker-popup-bigger-margin-top;
+      }
+    }
+  }
+
+  #{&}.e-datepicker {
+    #{if(&, '&', '*')} .e-calendar {
+
+      #{if(&, '&', '*')} .e-content table tbody tr.e-month-hide:last-child {
+        display: $datepicker-othermonth-row;
+	}
+    }
+
+    #{if(&, '&', '*')}.e-popup-wrapper {
+      border-radius: $datepicker-popup-border-radius;
+      overflow-y: hidden;
+      pointer-events: auto;
+    }
+
+    #{if(&, '&', '*')}.e-date-modal {
+      background-color: $datepicker-overlay;
+      height: 100%;
+      left: 0;
+      opacity: .5;
+      pointer-events: auto;
+      position: fixed;
+      top: 0;
+      width: 100%;
+      z-index: 999;
+	}
+
+    #{if(&, '&', '*')} .e-model-header {
+      background-color: $datepicker-modal-header-bg;
+      color: $datepicker-modal-header-color;
+      cursor: default;
+      display: $datepicker-modal-header-display;
+      padding: 10px 10px 10px 15px;
+
+      #{if(&, '&', '*')} .e-model-year {
+        font-size: $model-year-font-size;
+        font-weight: $model-year-font-weight;
+        line-height: $model-year-line-height;
+        margin: 0;
+    }
+}
+
+    #{if(&, '&', '*')} .e-model-month,
+    #{if(&, '&', '*')} .e-model-day {
+      font-size: $model-month-font-size;
+      font-weight: $model-month-font-weight;
+      line-height: $model-month-line-height;
+      margin: 0;
+    }
+}
+}
+
+// sass-lint:disable-all
+.e-date-overflow {
+  overflow: hidden !important;
+}
+
+.e-datepick-mob-popup-wrap {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  left: 0;
+  max-height: 100%;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1002;
+
+  .e-datepicker.e-popup-wrapper.e-lib.e-popup.e-control.e-popup-open {
+    position: relative;
+    top:0 !important;
+    left: 0 !important;
+  }
+}
+
+.e-content-placeholder.e-datepicker.e-placeholder-datepicker {
+  background-size: 250px 33px;
+  min-height: 33px;
+}
+
+.e-bigger .e-content-placeholder.e-datepicker.e-placeholder-datepicker,
+.e-bigger.e-content-placeholder.e-datepicker.e-placeholder-datepicker {
+  background-size: 250px 40px;
+  min-height: 40px;
+}
+
+// sass-lint:enable-all
+
+
+@media screen and (orientation: landscape) and (max-height: 360px) {
+
+  .e-datepicker .e-calendar.e-device .e-month table tbody {
+    display: inline-block;
+    height: $datepicker-calendar-tbody-landscape-height;
+    overflow: auto;
+  }
+}
+

package/styles/datepicker/_material-dark-definition.scss

@@ -0,0 +1,39 @@
+//default 
+$datepicker-icon-color: $accent !default;
+$datepicker-active-icon-color: $datepicker-icon-color !default;
+$datepicker-popup-box-shadow: 0 5px 5px -3px rgba($grey-light-font, .2), 0 8px 10px 1px rgba($grey-light-font, .14), 0 3px 14px 2px rgba($grey-light-font, .12) !default;
+$datepicker-input-border-style: none !default;
+$datepicker-calendar-border-style: none !default;
+$datepicker-icon: '\e901' !default;
+$datepicker-popup-border: none !default;
+$datepicker-icon-font-size: 16px !default;
+$datepicker-icon-container-min-height: 24px !default;
+$datepicker-icon-container-min-width: 24px !default;
+$datepicker-bigger-icon-container-min-height: 26px !default;
+$datepicker-bigger-icon-container-min-width: 26px !default;
+$datepicker-bigger-icon-font-size: 20px !default;
+$datepicker-overlay: rgba($grey-black, .6) !default;
+$datepicker-icon-normal-margin: 0 0 4px 0 !default;
+$datepicker-icon-bigger-margin: 5px 0 6px 0 !default;
+$datepicker-icon-hover-color: $hover-bg-color !default;
+$datepicker-icon-border-radius: 50% !default;
+$datepicker-popup-border-radius: 0 !default;
+$datepicker-box-sizing: border-box !default;
+$datepicker-popup-bg-color: $grey-800 !default;
+$datepicker-othermonth-row: none !default;
+$datepicker-modal-header-bg: $accent !default;
+$datepicker-modal-header-color: $grey-white !default;
+$datepicker-modal-header-display: block !default;
+$datepicker-calendar-tbody-landscape-height: 130px !default;
+// mouse small icon
+$datepicker-small-icon-font-size: 14px !default;
+// Touch small icon
+$datepicker-bigger-small-icon-font-size: 18px !default;
+$zero-value: 0 !default;
+$model-year-font-size: 14px !default;
+$model-year-font-weight: 500 !default;
+$model-year-line-height: 32px !default;
+$model-month-font-size: 20px !default;
+$model-month-font-weight: 500 !default;
+$model-month-line-height: 32px !default;
+//enddefault

package/styles/datepicker/_material-definition.scss

@@ -0,0 +1,37 @@
+$datepicker-icon-color: $accent !default;
+$datepicker-active-icon-color: $datepicker-icon-color !default;
+$datepicker-popup-box-shadow: 0 5px 5px -3px rgba($grey-light-font, .2), 0 8px 10px 1px rgba($grey-light-font, .14), 0 3px 14px 2px rgba($grey-light-font, .12) !default;
+$datepicker-input-border-style: none !default;
+$datepicker-calendar-border-style: none !default;
+$datepicker-icon: '\e901' !default;
+$datepicker-popup-bg-color: $grey-white !default;
+$datepicker-popup-border: none !default;
+$datepicker-icon-font-size: 16px !default;
+$datepicker-icon-container-min-height: 24px !default;
+$datepicker-icon-container-min-width: 24px !default;
+$datepicker-bigger-icon-container-min-height: 26px !default;
+$datepicker-bigger-icon-container-min-width: 26px !default;
+$datepicker-bigger-icon-font-size: 20px !default;
+$datepicker-overlay: rgba($grey-black, .6) !default;
+$datepicker-icon-normal-margin: 0 0 4px 0 !default;
+$datepicker-icon-bigger-margin: 5px 0 6px 0 !default;
+$datepicker-icon-hover-color: $hover-bg-color !default;
+$datepicker-icon-border-radius: 50% !default;
+$datepicker-popup-border-radius: 0 !default;
+$datepicker-box-sizing: border-box !default;
+$datepicker-othermonth-row: none !default;
+$datepicker-modal-header-bg: $accent !default;
+$datepicker-modal-header-color: $grey-white !default;
+$datepicker-modal-header-display: block !default;
+$datepicker-calendar-tbody-landscape-height: 130px !default;
+// mouse small icon
+$datepicker-small-icon-font-size: 14px !default;
+// Touch small icon
+$datepicker-bigger-small-icon-font-size: 18px !default;
+$zero-value: 0 !default;
+$model-year-font-size: 14px !default;
+$model-year-font-weight: 500 !default;
+$model-year-line-height: 32px !default;
+$model-month-font-size: 20px !default;
+$model-month-font-weight: 500 !default;
+$model-month-line-height: 32px !default;

package/styles/datepicker/_material3-definition.scss

@@ -0,0 +1,42 @@
+//default 
+$datepicker-icon: '\e901' !default;
+$datepicker-icon-font-size: 18px !default;
+$datepicker-icon-container-min-height: 18px !default;
+$datepicker-icon-container-min-width: 30px !default;
+$datepicker-bigger-icon-container-min-height: 18px !default;
+$datepicker-bigger-icon-container-min-width: 36px !default;
+$datepicker-bigger-icon-font-size: 22px !default;
+$datepicker-icon-normal-margin: 0 !default;
+$datepicker-icon-bigger-margin: 0 !default;
+$datepicker-icon-border-radius: 50% !default;
+$datepicker-popup-border-radius: 6px !default;
+$datepicker-box-sizing: border-box !default;
+$datepicker-modal-header-display: block !default;
+$datepicker-calendar-tbody-landscape-height: 130px !default;
+$datepicker-popup-bigger-margin-top: 8px !default;
+// mouse small icon
+$datepicker-small-icon-font-size: 16px !default;
+// Touch small icon
+$datepicker-bigger-small-icon-font-size: 20px !default;
+// color variables
+$datepicker-popup-border: 1px solid $border-light !default;
+$datepicker-input-border-style: none !default;
+$datepicker-calendar-border-style: none !default;
+$datepicker-icon-color: $secondary-text-color !default;
+$datepicker-active-icon-color: $datepicker-icon-color !default;
+$datepicker-icon-active-bg-color: $secondary-bg-color-pressed !default;
+$datepicker-active-border-color: $border !default;
+$datepicker-popup-box-shadow: $shadow-lg !default;
+$datepicker-overlay: rgba($black, .5) !default;
+$datepicker-icon-hover-color: $secondary-text-color-hover !default;
+$datepicker-popup-bg-color: $flyout-bg-color !default;
+$datepicker-othermonth-row: none !default;
+$datepicker-modal-header-bg: $icon-color !default;
+$datepicker-modal-header-color: $content-bg-color-alt2 !default;
+$model-year-font-size: 14px !default;
+$model-year-font-weight: 500 !default;
+$model-year-line-height: 32px !default;
+$model-month-font-size: 20px !default;
+$model-month-font-weight: 500 !default;
+$model-month-line-height: 32px !default;
+//enddefault

package/styles/datepicker/_tailwind-dark-definition.scss

@@ -0,0 +1 @@
+@import './tailwind-definition.scss';