@syncfusion/ej2-angular-calendars 21.1.37-ngcc → 21.1.37

package/styles/datepicker/icons/_bootstrap4.scss

@@ -0,0 +1,56 @@
+@include export-module('datepicker-bootstrap4-icons') {
+
+  /*! component icons */
+
+  .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-icon-font-size;
+    margin: $datepicker-icon-normal-margin;
+    min-height: $datepicker-icon-container-min-height;
+    min-width: $datepicker-icon-container-min-width;
+    outline: none;
+
+    #{if(&, '&', '*')}::before {
+      content: '\e7be';
+      font-family: 'e-icons';
+    }
+
+    #{if(&, '&', '*')}:focus {
+      background: $datepicker-icon-hover-color;
+      border-radius: $datepicker-icon-border-radius;
+    }
+  }
+
+  .e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-bigger-icon-font-size;
+    margin: $datepicker-icon-bigger-margin;
+    min-height: $datepicker-bigger-icon-container-min-height;
+    min-width: $datepicker-bigger-icon-container-min-width;
+
+    #{if(&, '&', '*')}::before {
+      content: '\e7be';
+      font-family: 'e-icons';
+    }
+
+    #{if(&, '&', '*')}:focus {
+      background: $datepicker-icon-hover-color;
+      border-radius: $datepicker-icon-border-radius;
+    }
+  }
+
+  // mouse small icon
+  .e-small .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-small-icon-font-size;
+  }
+
+  // Touch small icon
+  .e-small.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-bigger-small-icon-font-size;
+  }
+}

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

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

package/styles/datepicker/icons/_bootstrap5.scss

@@ -0,0 +1,56 @@
+@include export-module('datepicker-bootstrap5-icons') {
+
+  /*! component icons */
+
+  .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-icon-font-size;
+    margin: $datepicker-icon-normal-margin;
+    min-height: $datepicker-icon-container-min-height;
+    min-width: $datepicker-icon-container-min-width;
+    outline: none;
+
+    #{if(&, '&', '*')}::before {
+      content: '\e75e';
+      font-family: 'e-icons';
+    }
+
+    #{if(&, '&', '*')}:focus {
+      background: $datepicker-icon-hover-color;
+      border-radius: $datepicker-icon-border-radius;
+    }
+  }
+
+  .e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-bigger-icon-font-size;
+    margin: $datepicker-icon-bigger-margin;
+    min-height: $datepicker-bigger-icon-container-min-height;
+    min-width: $datepicker-bigger-icon-container-min-width;
+
+    #{if(&, '&', '*')}::before {
+      content: '\e75e';
+      font-family: 'e-icons';
+    }
+
+    #{if(&, '&', '*')}:focus {
+      background: $datepicker-icon-hover-color;
+      border-radius: $datepicker-icon-border-radius;
+    }
+  }
+
+  // mouse small icon
+  .e-small .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-small-icon-font-size;
+  }
+
+  // Touch small icon
+  .e-small.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-bigger-small-icon-font-size;
+  }
+}

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

@@ -0,0 +1,52 @@
+@include export-module('datepicker-fabric-icons') {
+
+  /*! component icons */
+
+  .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-icon-font-size;
+    margin: $datepicker-icon-normal-margin;
+    outline: none;
+
+    #{if(&, '&', '*')}::before {
+      content: '\e93a';
+      font-family: 'e-icons';
+    }
+
+    #{if(&, '&', '*')}:focus {
+      background: $datepicker-icon-hover-color;
+      border-radius: $datepicker-icon-border-radius;
+    }
+  }
+
+  .e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-bigger-icon-font-size;
+    margin: $datepicker-icon-bigger-margin;
+
+    #{if(&, '&', '*')}::before {
+      content: '\e93a';
+      font-family: 'e-icons';
+    }
+
+    #{if(&, '&', '*')}:focus {
+      background: $datepicker-icon-hover-color;
+      border-radius: $datepicker-icon-border-radius;
+    }
+  }
+
+  // mouse small icon
+  .e-small .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-small-icon-font-size;
+  }
+
+  // Touch small icon
+  .e-small.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-bigger-small-icon-font-size;
+  }
+}

package/styles/datepicker/icons/_fabric.scss

@@ -0,0 +1,52 @@
+@include export-module('datepicker-fabric-icons') {
+
+  /*! component icons */
+
+  .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-icon-font-size;
+    margin: $datepicker-icon-normal-margin;
+    outline: none;
+
+    #{if(&, '&', '*')}::before {
+      content: '\e93a';
+      font-family: 'e-icons';
+    }
+
+    #{if(&, '&', '*')}:focus {
+      background: $datepicker-icon-hover-color;
+      border-radius: $datepicker-icon-border-radius;
+    }
+  }
+
+  .e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-bigger-icon-font-size;
+    margin: $datepicker-icon-bigger-margin;
+
+    #{if(&, '&', '*')}::before {
+      content: '\e93a';
+      font-family: 'e-icons';
+    }
+
+    #{if(&, '&', '*')}:focus {
+      background: $datepicker-icon-hover-color;
+      border-radius: $datepicker-icon-border-radius;
+    }
+  }
+
+  // mouse small icon
+  .e-small .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-small-icon-font-size;
+  }
+
+  // Touch small icon
+  .e-small.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-bigger-small-icon-font-size;
+  }
+}

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

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

package/styles/datepicker/icons/_fluent.scss

@@ -0,0 +1,56 @@
+@include export-module('datepicker-fluent-icons') {
+
+  /*! component icons */
+
+  .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-icon-font-size;
+    margin: $datepicker-icon-normal-margin;
+    min-height: $datepicker-icon-container-min-height;
+    min-width: $datepicker-icon-container-min-width;
+    outline: none;
+
+    #{if(&, '&', '*')}::before {
+      content: '\e75e';
+      font-family: 'e-icons';
+    }
+
+    #{if(&, '&', '*')}:focus {
+      background: $datepicker-icon-hover-color;
+      border-radius: $datepicker-icon-border-radius;
+    }
+  }
+
+  .e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-bigger-icon-font-size;
+    margin: $datepicker-icon-bigger-margin;
+    min-height: $datepicker-bigger-icon-container-min-height;
+    min-width: $datepicker-bigger-icon-container-min-width;
+
+    #{if(&, '&', '*')}::before {
+      content: '\e75e';
+      font-family: 'e-icons';
+    }
+
+    #{if(&, '&', '*')}:focus {
+      background: $datepicker-icon-hover-color;
+      border-radius: $datepicker-icon-border-radius;
+    }
+  }
+
+  // mouse small icon
+  .e-small .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-small-icon-font-size;
+  }
+
+  // Touch small icon
+  .e-small.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-bigger-small-icon-font-size;
+  }
+}

package/styles/datepicker/icons/_fusionnew.scss

@@ -0,0 +1,56 @@
+@include export-module('datepicker-fusionnew-icons') {
+
+  /*! component icons */
+
+  .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-icon-font-size;
+    margin: $datepicker-icon-normal-margin;
+    min-height: $datepicker-icon-container-min-height;
+    min-width: $datepicker-icon-container-min-width;
+    outline: none;
+
+    #{if(&, '&', '*')}::before {
+      content: '\e75e';
+      font-family: 'e-icons';
+    }
+
+    #{if(&, '&', '*')}:focus {
+      background: $datepicker-icon-hover-color;
+      border-radius: $datepicker-icon-border-radius;
+    }
+  }
+
+  .e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-bigger-icon-font-size;
+    margin: $datepicker-icon-bigger-margin;
+    min-height: $datepicker-bigger-icon-container-min-height;
+    min-width: $datepicker-bigger-icon-container-min-width;
+
+    #{if(&, '&', '*')}::before {
+      content: '\e75e';
+      font-family: 'e-icons';
+    }
+
+    #{if(&, '&', '*')}:focus {
+      background: $datepicker-icon-hover-color;
+      border-radius: $datepicker-icon-border-radius;
+    }
+  }
+
+  // mouse small icon
+  .e-small .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-small-icon-font-size;
+  }
+
+  // Touch small icon
+  .e-small.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-bigger-small-icon-font-size;
+  }
+}

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

@@ -0,0 +1,52 @@
+@include export-module('datepicker-highcontrast-icons') {
+
+  /*! component icons */
+
+  .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-icon-font-size;
+    margin: $datepicker-icon-normal-margin;
+    outline: none;
+
+    #{if(&, '&', '*')}::before {
+      content: '\e93a';
+      font-family: 'e-icons';
+    }
+
+    #{if(&, '&', '*')}:focus {
+      background: $datepicker-icon-hover-color;
+      border-radius: $datepicker-icon-border-radius;
+    }
+  }
+
+  .e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-bigger-icon-font-size;
+    margin: $datepicker-icon-bigger-margin;
+
+    #{if(&, '&', '*')}::before {
+      content: '\e93a';
+      font-family: 'e-icons';
+    }
+
+    #{if(&, '&', '*')}:focus {
+      background: $datepicker-icon-hover-color;
+      border-radius: $datepicker-icon-border-radius;
+    }
+  }
+
+  // mouse small icon
+  .e-small .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-small-icon-font-size;
+  }
+
+  // Touch small icon
+  .e-small.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-bigger-small-icon-font-size;
+  }
+}

package/styles/datepicker/icons/_highcontrast.scss

@@ -0,0 +1,52 @@
+@include export-module('datepicker-highcontrast-icons') {
+
+  /*! component icons */
+
+  .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-icon-font-size;
+    margin: $datepicker-icon-normal-margin;
+    outline: none;
+
+    #{if(&, '&', '*')}::before {
+      content: '\e93a';
+      font-family: 'e-icons';
+    }
+
+    #{if(&, '&', '*')}:focus {
+      background: $datepicker-icon-hover-color;
+      border-radius: $datepicker-icon-border-radius;
+    }
+  }
+
+  .e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-bigger-icon-font-size;
+    margin: $datepicker-icon-bigger-margin;
+
+    #{if(&, '&', '*')}::before {
+      content: '\e93a';
+      font-family: 'e-icons';
+    }
+
+    #{if(&, '&', '*')}:focus {
+      background: $datepicker-icon-hover-color;
+      border-radius: $datepicker-icon-border-radius;
+    }
+  }
+
+  // mouse small icon
+  .e-small .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-small-icon-font-size;
+  }
+
+  // Touch small icon
+  .e-small.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-bigger-small-icon-font-size;
+  }
+}

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

@@ -0,0 +1,86 @@
+@include export-module('datepicker-material-icons') {
+
+  /*! component icons */
+
+  .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-icon-font-size;
+    margin: $datepicker-icon-normal-margin;
+    min-height: $datepicker-icon-container-min-height;
+    min-width: $datepicker-icon-container-min-width;
+    outline: none;
+
+    #{if(&, '&', '*')}::before {
+      content: '\e901';
+      font-family: 'e-icons';
+    }
+
+    #{if(&, '&', '*')}:focus {
+      background: $datepicker-icon-hover-color;
+      border-radius: $datepicker-icon-border-radius;
+    }
+  }
+
+  .e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-bigger-icon-font-size;
+    margin: $datepicker-icon-bigger-margin;
+    min-height: $datepicker-bigger-icon-container-min-height;
+    min-width: $datepicker-bigger-icon-container-min-width;
+
+    #{if(&, '&', '*')}::before {
+      content: '\e901';
+      font-family: 'e-icons';
+    }
+
+    #{if(&, '&', '*')}:focus {
+      background: $datepicker-icon-hover-color;
+      border-radius: $datepicker-icon-border-radius;
+    }
+  }
+
+  // mouse small icon
+  .e-small .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-small-icon-font-size;
+  }
+
+  // Touch small icon
+  .e-small.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-bigger-small-icon-font-size;
+  }
+
+  // Outline textbox icon configuration
+
+  .e-date-wrapper.e-outline .e-input-group-icon.e-date-icon,
+  .e-date-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-date-icon {
+    min-height: $zero-value;
+    min-width: 20px;
+  }
+
+  .e-bigger .e-date-wrapper.e-outline .e-input-group-icon.e-date-icon,
+  .e-date-wrapper.e-control-wrapper.e-bigger.e-outline .e-input-group-icon.e-date-icon,
+  .e-bigger .e-date-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-date-icon {
+    min-height: $zero-value;
+    min-width: 24px;
+  }
+
+  .e-small .e-date-wrapper.e-outline .e-input-group-icon.e-date-icon,
+  .e-date-wrapper.e-control-wrapper.e-small.e-outline .e-input-group-icon.e-date-icon,
+  .e-small .e-date-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-date-icon {
+    min-height: $zero-value;
+    min-width: 18px;
+  }
+
+  .e-bigger.e-small .e-outline.e-date-wrapper .e-input-group-icon.e-date-icon,
+  .e-bigger.e-small.e-outline.e-date-wrapper .e-input-group-icon.e-date-icon,
+  .e-date-wrapper.e-control-wrapper.e-bigger.e-small.e-outline .e-input-group-icon.e-date-icon,
+  .e-bigger.e-small .e-date-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-date-icon {
+    min-height: $zero-value;
+    min-width: 20px;
+  }
+}

package/styles/datepicker/icons/_material.scss

@@ -0,0 +1,86 @@
+@include export-module('datepicker-material-icons') {
+
+  /*! component icons */
+
+  .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-icon-font-size;
+    margin: $datepicker-icon-normal-margin;
+    min-height: $datepicker-icon-container-min-height;
+    min-width: $datepicker-icon-container-min-width;
+    outline: none;
+
+    #{if(&, '&', '*')}::before {
+      content: '\e901';
+      font-family: 'e-icons';
+    }
+
+    #{if(&, '&', '*')}:focus {
+      background: $datepicker-icon-hover-color;
+      border-radius: $datepicker-icon-border-radius;
+    }
+  }
+
+  .e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-bigger-icon-font-size;
+    margin: $datepicker-icon-bigger-margin;
+    min-height: $datepicker-bigger-icon-container-min-height;
+    min-width: $datepicker-bigger-icon-container-min-width;
+
+    #{if(&, '&', '*')}::before {
+      content: '\e901';
+      font-family: 'e-icons';
+    }
+
+    #{if(&, '&', '*')}:focus {
+      background: $datepicker-icon-hover-color;
+      border-radius: $datepicker-icon-border-radius;
+    }
+  }
+
+  // mouse small icon
+  .e-small .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-small-icon-font-size;
+  }
+
+  // Touch small icon
+  .e-small.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-bigger-small-icon-font-size;
+  }
+
+  // Outline textbox icon configuration
+
+  .e-date-wrapper.e-outline .e-input-group-icon.e-date-icon,
+  .e-date-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-date-icon {
+    min-height: $zero-value;
+    min-width: 20px;
+  }
+
+  .e-bigger .e-date-wrapper.e-outline .e-input-group-icon.e-date-icon,
+  .e-date-wrapper.e-control-wrapper.e-bigger.e-outline .e-input-group-icon.e-date-icon,
+  .e-bigger .e-date-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-date-icon {
+    min-height: $zero-value;
+    min-width: 24px;
+  }
+
+  .e-small .e-date-wrapper.e-outline .e-input-group-icon.e-date-icon,
+  .e-date-wrapper.e-control-wrapper.e-small.e-outline .e-input-group-icon.e-date-icon,
+  .e-small .e-date-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-date-icon {
+    min-height: $zero-value;
+    min-width: 18px;
+  }
+
+  .e-bigger.e-small .e-outline.e-date-wrapper .e-input-group-icon.e-date-icon,
+  .e-bigger.e-small.e-outline.e-date-wrapper .e-input-group-icon.e-date-icon,
+  .e-date-wrapper.e-control-wrapper.e-bigger.e-small.e-outline .e-input-group-icon.e-date-icon,
+  .e-bigger.e-small .e-date-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-date-icon {
+    min-height: $zero-value;
+    min-width: 20px;
+  }
+}

package/styles/datepicker/icons/_material3.scss

@@ -0,0 +1,56 @@
+@include export-module('datepicker-Material3-icons') {
+
+  /*! component icons */
+
+  .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-icon-font-size;
+    margin: $datepicker-icon-normal-margin;
+    min-height: $datepicker-icon-container-min-height;
+    min-width: $datepicker-icon-container-min-width;
+    outline: none;
+
+    #{if(&, '&', '*')}::before {
+      content: '\e778';
+      font-family: 'e-icons';
+    }
+
+    #{if(&, '&', '*')}:focus {
+      background: $datepicker-icon-hover-color;
+      border-radius: $datepicker-icon-border-radius;
+    }
+  }
+
+  .e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-bigger-icon-font-size;
+    margin: $datepicker-icon-bigger-margin;
+    min-height: $datepicker-bigger-icon-container-min-height;
+    min-width: $datepicker-bigger-icon-container-min-width;
+
+    #{if(&, '&', '*')}::before {
+      content: '\e778';
+      font-family: 'e-icons';
+    }
+
+    #{if(&, '&', '*')}:focus {
+      background: $datepicker-icon-hover-color;
+      border-radius: $datepicker-icon-border-radius;
+    }
+  }
+
+  // mouse small icon
+  .e-small .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-small-icon-font-size;
+  }
+
+  // Touch small icon
+  .e-small.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-date-icon,
+  #{if(&, '&', '*')}.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
+    font-size: $datepicker-bigger-small-icon-font-size;
+  }
+}

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

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