bromcom-ui 2.12.3-rc.2 → 2.12.3

package/dist/collection/components/third-parts/rc-picker/rc-picker.css

@@ -123,58 +123,73 @@
   margin-right: 8px;
 }
 
+:root {
+  --bcm-date-border-color: var(--bcm-ui-color-border-default);
+  --bcm-date-border-hover: #4293cf;
+  --bcm-date-text-color: var(--bcm-ui-color-text-default);
+  --bcm-date-placeholder-color: var(--bcm-ui-color-text-placeholder);
+  --bcm-date-disabled-color: var(--bcm-ui-color-text-disabled);
+  --bcm-date-error-color: #e53e3e;
+  --bcm-date-primary-color: var(--bcm-ui-color-background-primary-info-default);
+  --bcm-date-primary-hover: var(--bcm-ui-color-background-primary-info-hover);
+  --bcm-date-bg-hover: #e2e8f0;
+  --bcm-date-range-bg: var(--bcm-ui-color-background-palette-blue-default);
+  --bcm-date-range-hover-bg: var(--bcm-ui-color-background-palette-blue-hover);
+  --bcm-date-disabled-bg: #f8fafc;
+  --bcm-date-focused-bg: #f8fafc;
+  --bcm-date-border-radius: 4px;
+}
+
 .bcm-date {
   font-family: "Inter", sans-serif;
-  font-size: 14px;
-  line-height: 22px;
+  font-optical-sizing: auto;
+  font-style: normal;
   font-weight: 500;
   display: flex;
   align-items: stretch;
   flex-direction: row;
   background-color: #fff;
-  border: 1px solid #cbd5e1;
-  color: #334155;
-  border-radius: 4px;
+  border: 1px solid var(--bcm-date-border-color);
+  color: var(--bcm-date-text-color);
+  border-radius: var(--bcm-date-border-radius);
   box-sizing: border-box;
   cursor: text;
   padding: 0 0 0 4px;
   position: relative;
   width: 100%;
-  /* ===== Dropdown ===== */
+  transition: border-color 0.2s, box-shadow 0.2s;
+  /* ===== Dropdown Menu Styles ===== */
 }
 .bcm-date--large {
   height: 40px;
   font-size: 16px;
+  line-height: 24px;
 }
 .bcm-date--medium {
   height: 32px;
   font-size: 14px;
+  line-height: 22px;
 }
 .bcm-date--small {
   height: 24px;
   font-size: 12px;
+  line-height: 20px;
 }
 .bcm-date:hover {
-  /* bcm */
-  border: 1px solid #4293cf;
-}
-.bcm-date:hover.bcm-date--existed {
-  /* bcm */
+  border-color: var(--bcm-date-border-hover);
 }
 .bcm-date:hover.bcm-date--existed .bcm-date-clear {
   visibility: visible;
   opacity: 1;
 }
-.bcm-date:hover.bcm-date--existed .bcm-date-suffix {
-  opacity: 0;
-}
 .bcm-date-focused {
-  background-color: #f8fafc;
+  background-color: var(--bcm-date-focused-bg);
+  border-color: var(--bcm-date-border-hover);
+  box-shadow: 0 0 0 2px rgba(66, 147, 207, 0.2);
 }
 .bcm-date-suffix {
-  color: #334155;
-}
-.bcm-date-suffix:not(:empty) {
+  color: var(--bcm-date-text-color);
+  order: 2;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -189,10 +204,10 @@
   line-height: 1;
   font-family: "Font Awesome 6 Pro";
   font-weight: 400;
-  line-height: 1;
   box-sizing: border-box;
   padding: 0 4px;
   cursor: pointer;
+  transition: color 0.2s;
 }
 .bcm-date--datetime .bcm-date-suffix::before {
   content: "\e0d2";
@@ -208,10 +223,10 @@
   display: inline-flex;
   width: 100%;
   padding: 0 4px;
-  color: #334155;
+  color: var(--bcm-date-text-color);
 }
 .bcm-date-input-placeholder {
-  color: #94a3b8;
+  color: var(--bcm-date-placeholder-color);
 }
 .bcm-date-input > input {
   color: inherit;
@@ -220,7 +235,6 @@
   border: none;
   background: transparent;
   box-shadow: unset;
-  line-height: 22px;
   font-family: "Inter", sans-serif;
   cursor: inherit;
   -webkit-appearance: none;
@@ -233,7 +247,7 @@
 }
 .bcm-date-input > input::placeholder {
   font-family: "Inter", sans-serif;
-  color: #cbd5e1;
+  color: var(--bcm-date-placeholder-color);
   user-select: none;
 }
 .bcm-date-input > input::-webkit-search-decoration, .bcm-date-input > input::-webkit-search-cancel-button, .bcm-date-input > input::-webkit-search-results-button, .bcm-date-input > input::-webkit-search-results-decoration, .bcm-date-input > input::-webkit-calendar-picker-indicator, .bcm-date-input > input::-webkit-inner-spin-button, .bcm-date-input > input::-webkit-outer-spin-button {
@@ -246,7 +260,10 @@
   text-overflow: ellipsis;
 }
 .bcm-date-clear {
-  color: #334155;
+  display: none;
+}
+.bcm-date--clearable .bcm-date-clear {
+  color: var(--bcm-date-text-color);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -258,40 +275,41 @@
   cursor: pointer;
   font-weight: 400;
   visibility: hidden;
-  position: absolute;
-  right: 4px;
-  padding: 4px;
   opacity: 0;
-  transition: opacity 0.2s;
+  transition: opacity 0.2s, color 0.2s;
+  order: 1;
 }
-.bcm-date-clear-btn::after {
+.bcm-date--clearable .bcm-date-clear:hover {
+  color: var(--bcm-date-error-color);
+}
+.bcm-date--clearable .bcm-date-clear-btn::after {
   content: "×";
 }
 .bcm-date-disabled {
-  background-color: #f8fafc;
-  color: #a0aec0;
+  background-color: var(--bcm-date-disabled-bg);
+  color: var(--bcm-date-disabled-color);
   cursor: not-allowed;
 }
 .bcm-date-disabled input {
-  color: #a0aec0;
+  color: var(--bcm-date-disabled-color);
 }
 .bcm-date-disabled:hover {
-  border: 1px solid #cbd5e1;
+  border: 1px solid var(--bcm-date-border-color);
 }
 .bcm-date-disabled .bcm-date-input {
   cursor: not-allowed;
 }
-.bcm-date-disabled .bcm-date-suffix:before {
+.bcm-date-disabled .bcm-date-suffix::before {
   cursor: not-allowed;
 }
 .bcm-date-disabled .bcm-date-clear {
   cursor: not-allowed;
 }
 .bcm-date--error {
-  border: 1px solid #e53e3e;
+  border: 1px solid var(--bcm-date-error-color);
 }
 .bcm-date--error:hover {
-  border: 1px solid #e53e3e;
+  border: 1px solid var(--bcm-date-error-color);
 }
 .bcm-date-range {
   padding: 0 4px;
@@ -300,7 +318,7 @@
   flex: none;
 }
 .bcm-date-range-separator {
-  color: #94a3b8;
+  color: var(--bcm-date-placeholder-color);
   padding: 0 4px;
   display: flex;
   align-items: center;
@@ -311,23 +329,26 @@
   bottom: 0;
   left: 0;
   height: 2px;
-  background-color: #4293cf;
+  background-color: var(--bcm-date-border-hover);
   transition: all 0.3s;
 }
 .bcm-date-dropdown {
   position: absolute;
   z-index: 10800;
-  top: -9999;
-  left: -9999;
-  border-radius: 4px;
+  top: -9999px;
+  left: -9999px;
+  border-radius: var(--bcm-date-border-radius);
+  transition: animation 0.3s, opacity 0.3s;
 }
 .bcm-date-dropdown-placement-bottomLeft, .bcm-date-dropdown-placement-bottomRight {
   top: 0;
   display: block;
+  animation: bcmDateSlideUpIn 0.3s;
 }
 .bcm-date-dropdown-placement-topLeft, .bcm-date-dropdown-placement-topRight {
   bottom: 0;
   display: block;
+  animation: bcmDateSlideDownIn 0.3s;
 }
 .bcm-date-dropdown-hidden {
   display: none;
@@ -336,15 +357,60 @@
   font-family: "Inter", sans-serif;
   font-size: 14px;
   line-height: 22px;
-  font-weight: 400;
+  font-weight: 500;
   box-shadow: 0 4px 12px 0 rgba(17, 24, 39, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
   background-color: #fff;
+  display: inline-block;
+  border-radius: var(--bcm-date-border-radius);
+  overflow: hidden;
 }
 .bcm-date-dropdown .bcm-date-panels {
-  display: inline-flex;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: space-between;
+  width: 100%;
 }
 .bcm-date-dropdown .bcm-date-decade-panel, .bcm-date-dropdown .bcm-date-year-panel, .bcm-date-dropdown .bcm-date-month-panel, .bcm-date-dropdown .bcm-date-week-panel, .bcm-date-dropdown .bcm-date-date-panel {
-  width: 256px;
+  width: 310px;
+}
+.bcm-date-dropdown .bcm-date-week-panel-row-hover {
+  background: var(--bcm-date-range-hover-bg);
+}
+.bcm-date-dropdown .bcm-date-week-panel-row-hover .bcm-date-cell-in-view .bcm-date-cell-inner {
+  border-color: var(--bcm-date-range-hover-bg);
+  background: var(--bcm-date-range-hover-bg);
+}
+.bcm-date-dropdown .bcm-date-week-panel-row-hover .bcm-date-cell-in-view::before {
+  background: var(--bcm-date-range-hover-bg);
+}
+.bcm-date-dropdown .bcm-date-week-panel-row-hover > td:first-child {
+  border-radius: var(--bcm-date-border-radius) 0 0 var(--bcm-date-border-radius);
+}
+.bcm-date-dropdown .bcm-date-week-panel-row-hover > td:last-child {
+  border-radius: 0 var(--bcm-date-border-radius) var(--bcm-date-border-radius) 0;
+}
+.bcm-date-dropdown .bcm-date-week-panel-row-selected {
+  color: #fff;
+  background: var(--bcm-date-primary-color);
+}
+.bcm-date-dropdown .bcm-date-week-panel-row-selected .bcm-date-cell-week .bcm-date-cell-inner {
+  color: #fff;
+  background: var(--bcm-date-primary-color);
+}
+.bcm-date-dropdown .bcm-date-week-panel-row-selected .bcm-date-cell-in-view .bcm-date-cell-inner {
+  border-color: var(--bcm-date-primary-color);
+  color: #fff;
+  background: var(--bcm-date-primary-color);
+}
+.bcm-date-dropdown .bcm-date-week-panel-row-selected .bcm-date-cell-in-view::before {
+  background: var(--bcm-date-primary-color);
+}
+.bcm-date-dropdown .bcm-date-week-panel-row-selected > td:first-child {
+  border-radius: var(--bcm-date-border-radius) 0 0 var(--bcm-date-border-radius);
+}
+.bcm-date-dropdown .bcm-date-week-panel-row-selected > td:last-child {
+  border-radius: 0 var(--bcm-date-border-radius) var(--bcm-date-border-radius) 0;
 }
 .bcm-date-dropdown .bcm-date-time-panel {
   width: auto;
@@ -378,7 +444,7 @@
   border-inline-start: 1px solid rgba(5, 5, 5, 0.06);
 }
 .bcm-date-dropdown .bcm-date-time-panel-column-active {
-  background: rgba(0, 0, 255, 0.1);
+  background: rgba(59, 130, 246, 0.1);
 }
 .bcm-date-dropdown .bcm-date-time-panel-column:hover {
   overflow-y: auto;
@@ -401,21 +467,25 @@
   padding-block: 0;
   padding-inline-end: 0;
   padding-inline-start: 14px;
-  color: rgba(0, 0, 0, 0.88);
+  color: var(--bcm-date-text-color);
   line-height: 28px;
-  border-radius: 4px;
+  border-radius: var(--bcm-date-border-radius);
   cursor: pointer;
   transition: background 0.2s;
+  font-size: 14px;
+  font-weight: 500;
 }
 .bcm-date-dropdown .bcm-date-time-panel-column > li.bcm-date-time-panel-cell .bcm-date-time-panel-cell-inner:hover {
   background: rgba(0, 0, 0, 0.04);
 }
 .bcm-date-dropdown .bcm-date-time-panel-column > li.bcm-date-time-panel-cell-selected .bcm-date-time-panel-cell-inner {
   background: #e6f4ff;
+  color: var(--bcm-date-primary-color);
+  font-weight: 500;
 }
 .bcm-date-dropdown .bcm-date-time-panel-column > li.bcm-date-time-panel-cell-disabled .bcm-date-time-panel-cell-inner {
   pointer-events: none;
-  color: rgba(0, 0, 0, 0.25);
+  color: var(--bcm-date-disabled-color);
 }
 .bcm-date-dropdown .bcm-date-datetime-panel {
   display: flex;
@@ -424,14 +494,14 @@
 }
 .bcm-date-dropdown .bcm-date-datetime-panel .bcm-date-time-panel {
   padding-top: 8px;
+  border-left: 1px solid #f0f0f0;
 }
 .bcm-date-dropdown .bcm-date-datetime-panel .bcm-date-time-panel .bcm-date-header {
   display: none;
 }
 .bcm-date-dropdown .bcm-date-header {
-  padding: 0 8px;
-  color: rgba(0, 0, 0, 0.88);
-  border-bottom: 1px solid rgba(5, 5, 5, 0.06);
+  padding: 8px 16px 0;
+  color: var(--bcm-date-text-color);
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -455,24 +525,29 @@
   font-size: inherit;
 }
 .bcm-date-dropdown .bcm-date-header button:hover {
-  color: #3b82f6;
+  color: var(--bcm-date-primary-color);
 }
 .bcm-date-dropdown .bcm-date-header-view {
   flex: auto;
   text-align: center;
-  font-weight: 600;
-  line-height: 40px;
-  gap: 8px;
-  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+  gap: 4px;
+  font-size: 16px;
 }
 .bcm-date-dropdown .bcm-date-header-view button {
-  color: inherit;
-  font-weight: inherit;
+  color: var(--bcm-date-text-color);
+  font-weight: 500;
   vertical-align: top;
   padding: 0 4px;
+  transition: background 0.2s, color 0.2s;
+  border-radius: var(--bcm-date-border-radius);
+}
+.bcm-date-dropdown .bcm-date-header-view button:hover {
+  background: rgba(59, 130, 246, 0.1);
 }
 .bcm-date-dropdown .bcm-date-body {
-  padding: 8px 18px;
+  padding: 0 16px 8px;
 }
 .bcm-date-dropdown .bcm-date-content {
   text-align: center;
@@ -481,11 +556,11 @@
   border-collapse: collapse;
 }
 .bcm-date-dropdown .bcm-date-content thead tr th {
-  color: #334155;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 16px;
-  padding: 8px 0;
+  color: var(--bcm-date-text-color);
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  padding: 2px 0;
   text-align: center;
   text-transform: uppercase;
 }
@@ -498,7 +573,6 @@
   inset-inline-start: 0;
   inset-inline-end: 0;
   z-index: 1;
-  height: 24px;
   transform: translateY(-50%);
   transition: all 0.3s;
   content: "";
@@ -509,93 +583,88 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 4px;
+  border-radius: var(--bcm-date-border-radius);
   border: 1px solid transparent;
-  transition: background 0.2s, border 0.2s;
+  transition: background 0.2s, border 0.2s, color 0.2s;
   cursor: pointer;
-  color: #94a3b8;
+  color: var(--bcm-date-disabled-color);
 }
 .bcm-date-dropdown .bcm-date-cell-inner:hover {
-  background: #e2e8f0;
+  background: var(--bcm-date-bg-hover);
   color: #64748b;
 }
 .bcm-date-dropdown .bcm-date-cell-in-view .bcm-date-cell-inner {
-  color: #334155;
+  color: var(--bcm-date-text-color);
 }
 .bcm-date-dropdown .bcm-date-cell-today .bcm-date-cell-inner {
-  border: 1px solid #3b82f6;
-  color: #3b82f6;
+  border: 1px solid var(--bcm-date-primary-color);
+  color: var(--bcm-date-primary-color);
 }
 .bcm-date-dropdown .bcm-date-cell-today .bcm-date-cell-inner:hover {
-  background: #e2e8f0;
+  background: var(--bcm-date-bg-hover);
   color: #64748b;
 }
+.bcm-date-dropdown .bcm-date-cell-hover .bcm-date-cell-inner {
+  background: var(--bcm-date-range-hover-bg);
+  color: var(--bcm-date-text-color);
+}
 .bcm-date-dropdown .bcm-date-cell-selected .bcm-date-cell-inner {
   color: #fff;
-  background: #3b82f6;
+  background: var(--bcm-date-primary-color);
 }
 .bcm-date-dropdown .bcm-date-cell-selected .bcm-date-cell-inner:hover {
-  background: #2563eb;
+  background: var(--bcm-date-primary-hover);
   color: #fff;
 }
 .bcm-date-dropdown .bcm-date-cell-in-range .bcm-date-cell-inner {
-  background: #bfdbfe;
+  background: var(--bcm-date-range-bg);
 }
 .bcm-date-dropdown .bcm-date-cell-in-range::before {
-  background: #bfdbfe;
-}
-.bcm-date-dropdown .bcm-date-cell-range-hover .bcm-date-cell-inner {
-  background: #93c5fd;
-  color: #334155;
-}
-.bcm-date-dropdown .bcm-date-cell-range-hover::before {
-  background: #93c5fd;
+  background: var(--bcm-date-range-bg);
 }
 .bcm-date-dropdown .bcm-date-cell-range-start .bcm-date-cell-inner {
-  background-color: #3b82f6;
+  background-color: var(--bcm-date-primary-color);
   color: #fff;
-  border-radius: 4px 0 0 4px;
+  border-radius: var(--bcm-date-border-radius) 0 0 var(--bcm-date-border-radius);
 }
 .bcm-date-dropdown .bcm-date-cell-range-start .bcm-date-cell-inner:hover {
-  background: #3b82f6;
+  background: var(--bcm-date-primary-color);
   color: #fff;
-  border-radius: 4px 0 0 4px;
 }
 .bcm-date-dropdown .bcm-date-cell-range-start::before {
-  background: #bfdbfe;
+  background: var(--bcm-date-range-bg);
   inset-inline-start: 50%;
 }
 .bcm-date-dropdown .bcm-date-cell-range-end .bcm-date-cell-inner {
-  background-color: #3b82f6;
+  background-color: var(--bcm-date-primary-color);
   color: #fff;
-  border-radius: 0 4px 4px 0;
+  border-radius: 0 var(--bcm-date-border-radius) var(--bcm-date-border-radius) 0;
 }
 .bcm-date-dropdown .bcm-date-cell-range-end .bcm-date-cell-inner:hover {
-  background: #3b82f6;
+  background: var(--bcm-date-primary-color);
   color: #fff;
-  border-radius: 4px 0 0 4px;
 }
 .bcm-date-dropdown .bcm-date-cell-range-end::before {
-  background: #bfdbfe;
+  background: var(--bcm-date-range-bg);
   inset-inline-end: 50%;
 }
 .bcm-date-dropdown .bcm-date-cell-range-hover-start .bcm-date-cell-inner {
-  background-color: #93c5fd;
-  color: #334155;
+  background-color: var(--bcm-date-range-hover-bg);
+  color: var(--bcm-date-text-color);
 }
 .bcm-date-dropdown .bcm-date-cell-range-hover-start .bcm-date-cell-inner:hover {
-  background: #93c5fd;
-  color: #334155;
-  border-radius: 4px 0 0 4px;
+  background: var(--bcm-date-range-hover-bg);
+  color: var(--bcm-date-text-color);
+  border-radius: var(--bcm-date-border-radius) 0 0 var(--bcm-date-border-radius);
 }
 .bcm-date-dropdown .bcm-date-cell-range-hover-end .bcm-date-cell-inner:hover {
-  background: #93c5fd;
-  color: #334155;
-  border-radius: 0 4px 4px 0;
+  background: var(--bcm-date-range-hover-bg);
+  color: var(--bcm-date-text-color);
+  border-radius: 0 var(--bcm-date-border-radius) var(--bcm-date-border-radius) 0;
 }
 .bcm-date-dropdown .bcm-date-cell-disabled .bcm-date-cell-inner {
   pointer-events: none;
-  color: rgba(0, 0, 0, 0.25);
+  color: var(--bcm-date-disabled-color);
 }
 .bcm-date-dropdown .bcm-date-cell-disabled::before {
   background: rgba(0, 0, 0, 0.04);
@@ -608,19 +677,22 @@
   text-align: center;
 }
 .bcm-date-dropdown .bcm-date-footer .bcm-date-today-btn {
-  color: #3b82f6;
+  color: var(--bcm-date-primary-color);
   cursor: pointer;
   padding: 0 8px;
+  transition: color 0.2s;
 }
 .bcm-date-dropdown .bcm-date-footer .bcm-date-today-btn:hover {
-  color: #2563eb;
+  color: var(--bcm-date-primary-hover);
 }
 .bcm-date-dropdown .bcm-date-ranges {
   margin: 0;
   margin-bottom: 0;
-  padding: 4px 12px;
+  padding: 8px 16px;
   overflow: hidden;
-  line-height: 34px;
+  font-size: 14px;
+  line-height: 24px;
+  font-weight: 500;
   text-align: start;
   list-style: none;
   display: flex;
@@ -635,24 +707,24 @@
 .bcm-date-dropdown .bcm-date-ranges .bcm-date-ok > button {
   font-size: 14px;
   color: #fff;
-  background-color: #3b82f6;
+  background-color: var(--bcm-date-primary-color);
   box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
   height: 24px;
   padding: 0 7px;
-  border-radius: 4px;
+  border-radius: var(--bcm-date-border-radius);
   outline: none;
   border: none;
   cursor: pointer;
   transition: background-color 0.3s;
 }
 .bcm-date-dropdown .bcm-date-ranges .bcm-date-ok > button:hover {
-  background-color: #2563eb;
+  background-color: var(--bcm-date-primary-hover);
 }
 .bcm-date-dropdown .bcm-date-now {
   text-align: right;
 }
 .bcm-date-dropdown .bcm-date-now-btn {
-  color: #3b82f6;
+  color: var(--bcm-date-primary-color);
   text-decoration: none;
   background-color: transparent;
   outline: none;
@@ -661,9 +733,46 @@
   -webkit-text-decoration-skip: objects;
 }
 .bcm-date-dropdown .bcm-date-now-btn:hover {
-  color: #2563eb;
+  color: var(--bcm-date-primary-hover);
 }
 .bcm-date-dropdown .bcm-date-range-wrapper {
   display: flex;
   position: relative;
+}
+
+@keyframes bcmDateSlideUpIn {
+  0% {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes bcmDateSlideDownIn {
+  0% {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.bcm-date-time-panel-column::-webkit-scrollbar,
+.bcm-date-dropdown .bcm-date-panel-container::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+.bcm-date-time-panel-column::-webkit-scrollbar-thumb,
+.bcm-date-dropdown .bcm-date-panel-container::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+}
+
+.bcm-date-time-panel-column::-webkit-scrollbar-track,
+.bcm-date-dropdown .bcm-date-panel-container::-webkit-scrollbar-track {
+  background: transparent;
 }

package/dist/collection/components/third-parts/rc-picker/rc-picker.js

@@ -38,6 +38,7 @@ export class BcmRcPicker {
     this.error = false;
     this.disabled = false;
     this.clearable = false;
+    this.ariaLabel = undefined;
     this.type = "date";
     this.format = undefined;
     this.range = false;
@@ -87,13 +88,14 @@ export class BcmRcPicker {
       date: Object.assign({}, dateOptions),
       datetime: Object.assign(Object.assign(Object.assign({}, dateOptions), timeOptions), { showTime: Object.assign({ showSecond: this.showSecond }, timeOptions) }),
     };
-    const sharedProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ generateConfig: momentGenerateConfig, value: this.newValue, onChange: newValue => this.set(newValue) }, (this.format && { format: this.format })), (this.clearable && { allowClear: this.clearable })), (this.placeholder && { placeholder: this.placeholder })), (this.error && { error: this.error })), (this.disabled && { disabled: this.disabled })), {
+    const sharedProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ generateConfig: momentGenerateConfig, value: this.newValue, onChange: newValue => this.set(newValue) }, (this.format && { format: this.format })), (this.clearable && { allowClear: this.clearable })), (this.placeholder && { placeholder: this.placeholder })), (this.error && { error: this.error })), (this.disabled && { disabled: this.disabled })), (this.ariaLabel && { 'aria-label': this.ariaLabel })), {
       // picker: this.type,
       picker: this.type === "datetime" ? "date" : this.type
     }), options[this.type]), { prefixCls: "bcm-date", suffixIcon: " ", autofocus: true, locale: enUS, separator: " - ", changeOnBlur: true, className: cs(`bcm-date--${this.type}`, {
         [`bcm-date--${this.size}`]: this.size,
         "bcm-date--error": this.error,
         "bcm-date--existed": this.newValue,
+        "bcm-date--clearable": this.clearable,
       }) });
     if (this.range) {
       ReactDOM.render(React.createElement(RangePicker, Object.assign({}, sharedProps)), this.el);
@@ -209,6 +211,23 @@ export class BcmRcPicker {
         "reflect": false,
         "defaultValue": "false"
       },
+      "ariaLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "aria-label",
+        "reflect": false
+      },
       "type": {
         "type": "string",
         "mutable": false,