jupiter-dynamic-forms 1.17.0 → 1.17.1

package/dist/index.mjs

@@ -3535,31 +3535,49 @@ let JupiterFormField = class extends LitElement {
       return html`
         <div class="period-controls">
           <label>Date:</label>
-          <input
-            type="date"
-            .value="${this.periodInstantDate || this.field.periodInstantDate || ""}"
-            @change="${(e2) => this._handlePeriodChange(e2, "instant")}"
-            ?disabled="${this.disabled}"
-          />
+          <div class="date-wrapper">
+            <input
+              type="date"
+              .value="${this.periodInstantDate || this.field.periodInstantDate || ""}"
+              @change="${(e2) => this._handlePeriodChange(e2, "instant")}"
+              ?disabled="${this.disabled}"
+            />
+            <svg class="calendar-icon-svg" viewBox="0 0 24 24">
+              <path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5
+                    a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14
+                    a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
+          </div>
         </div>
       `;
     } else if (this.field.periodType === "duration") {
       return html`
         <div class="period-controls">
           <label>From:</label>
-          <input
-            type="date"
-            .value="${this.periodStartDate || this.field.periodStartDate || ""}"
-            @change="${(e2) => this._handlePeriodChange(e2, "start")}"
-            ?disabled="${this.disabled}"
-          />
+            <div class="date-wrapper">
+              <input
+                type="date"
+                .value="${this.periodStartDate || this.field.periodStartDate || ""}"
+                @change="${(e2) => this._handlePeriodChange(e2, "start")}"
+                ?disabled="${this.disabled}"
+              />
+              <svg class="calendar-icon-svg" viewBox="0 0 24 24">
+              <path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5
+                    a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14
+                    a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
+            </div>
           <label>To:</label>
-          <input
-            type="date"
-            .value="${this.periodEndDate || this.field.periodEndDate || ""}"
-            @change="${(e2) => this._handlePeriodChange(e2, "end")}"
-            ?disabled="${this.disabled}"
-          />
+          <div class="date-wrapper">
+            <input
+              type="date"
+              .value="${this.periodEndDate || this.field.periodEndDate || ""}"
+              @change="${(e2) => this._handlePeriodChange(e2, "end")}"
+              ?disabled="${this.disabled}"
+            />
+            <svg class="calendar-icon-svg" viewBox="0 0 24 24">
+              <path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5
+                    a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14
+                    a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
+          </div>
         </div>
       `;
     }
@@ -3580,31 +3598,51 @@ let JupiterFormField = class extends LitElement {
             ${this.field.periodType === "instant" ? html`
               <div class="period-controls">
                 <label>Date:</label>
-                <input
-                  type="date"
-                  .value="${this.periodInstantDate || this.field.periodInstantDate || ""}"
-                  @change="${(e2) => this._handlePeriodChange(e2, "instant")}"
-                  ?disabled="${this.disabled}"
-                />
+                <div class="date-wrapper">
+                  <input
+                    type="date"
+                    .value="${this.periodInstantDate || this.field.periodInstantDate || ""}"
+                    @change="${(e2) => this._handlePeriodChange(e2, "instant")}"
+                    ?disabled="${this.disabled}"
+                  />
+                  <svg class="calendar-icon-svg" viewBox="0 0 24 24">
+                    <path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5
+                          a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14
+                          a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
+                </div>
               </div>
             ` : html`
               <div class="period-controls">
                 <label>From:</label>
-                <input
-                  type="date"
-                  .value="${this.periodStartDate || this.field.periodStartDate || ""}"
-                  @change="${(e2) => this._handlePeriodChange(e2, "start")}"
-                  ?disabled="${this.disabled}"
-                />
+                <div class="date-wrapper">
+                  <input
+                    type="date"
+                    .value="${this.periodStartDate || this.field.periodStartDate || ""}"
+                    @change="${(e2) => this._handlePeriodChange(e2, "start")}"
+                    ?disabled="${this.disabled}"
+                  />
+                    <svg class="calendar-icon-svg" viewBox="0 0 24 24">
+                    <path
+                      fill="currentColor"
+                      d="M19 4h-1V2h-2v2H8V2H6v2H5
+                        a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14
+                        a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
+                </div>
               </div>
               <div class="period-controls">
                 <label>To:</label>
-                <input
-                  type="date"
-                  .value="${this.periodEndDate || this.field.periodEndDate || ""}"
-                  @change="${(e2) => this._handlePeriodChange(e2, "end")}"
-                  ?disabled="${this.disabled}"
-                />
+                <div class="date-wrapper">
+                  <input
+                    type="date"
+                    .value="${this.periodEndDate || this.field.periodEndDate || ""}"
+                    @change="${(e2) => this._handlePeriodChange(e2, "end")}"
+                    ?disabled="${this.disabled}"
+                  />
+                  <svg class="calendar-icon-svg" viewBox="0 0 24 24">
+                    <path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5
+                          a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14
+                          a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
+                </div>
               </div>
             `}
             
@@ -3825,7 +3863,7 @@ JupiterFormField.styles = css`
     }
 
     .period-popup {
-      background: white;
+      background: var(--bg-color-2, var(--jupiter-card-background, #fff));
       border-radius: 8px;
       padding: 24px;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
@@ -3843,10 +3881,11 @@ JupiterFormField.styles = css`
     .period-popup-title {
       font-size: 18px;
       font-weight: 600;
-      color: var(--jupiter-text-primary, #333);
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
     }
 
     .period-popup-close {
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
       background: transparent;
       border: none;
       font-size: 24px;
@@ -3862,7 +3901,7 @@ JupiterFormField.styles = css`
     }
 
     .period-popup-close:hover {
-      background-color: rgba(0, 0, 0, 0.05);
+      opacity: 0.9;
     }
 
     .period-popup-content {
@@ -3882,17 +3921,45 @@ JupiterFormField.styles = css`
     .period-popup-content .period-controls label {
       font-size: 14px;
       font-weight: 500;
-      color: var(--jupiter-text-primary, #333);
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
       text-align: right;
       white-space: normal;
       word-break: break-word;
     }
 
+    .date-wrapper {
+    position: relative;
+    width: min-content;
+    }
+
+       /* hide native icon */
+    input[type="date"]::-webkit-calendar-picker-indicator {
+      opacity: 0;
+      position: absolute;
+      right: 10px;
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+    }
+
+       .calendar-icon-svg {
+      position: absolute;
+    right: 3px;
+    top: 18px;
+      transform: translateY(-50%);
+      width: 20px;
+      height: 20px;
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
+      pointer-events: none;
+    }
+
     .period-popup-content .period-controls input[type="date"] {
       padding: 8px 10px;
       font-size: 14px;
-      border: 1px solid var(--jupiter-border-color, #ddd);
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
+      border: 1px solid var(--primaryTextColor, var(--jupiter-border-color, #ddd));
       border-radius: 4px;
+      background: var(--bg-color-2, var(--jupiter-card-background, #fff));
     }
 
     .period-popup-content .period-controls input[type="date"]:focus {
@@ -3904,16 +3971,15 @@ JupiterFormField.styles = css`
     .period-popup-content .period-controls .unit-select {
       padding: 8px 10px;
       font-size: 14px;
-      border: 1px solid var(--jupiter-border-color, #ddd);
+      border: 1px solid  var(--primaryTextColor, var(--jupiter-border-color, #ddd));
       border-radius: 4px;
-      background: var(--jupiter-input-background, #fff);
-      color: var(--jupiter-text-primary, #333);
+      background: var(--bg-color-2, var(--jupiter-input-background, #fff));
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
       cursor: pointer;
     }
 
     .period-popup-content .period-controls .unit-select:focus {
       outline: none;
-      border-color: var(--jupiter-primary-color, #1976d2);
       box-shadow: 0 0 0 2px var(--jupiter-primary-color-light, rgba(25, 118, 210, 0.2));
     }
 
@@ -4049,6 +4115,10 @@ JupiterFormField.styles = css`
       width: auto;
     }
 
+ 
+
+ 
+
     .period-controls {
       margin-top: 4px;
       display: flex;
@@ -4722,35 +4792,53 @@ let JupiterAddColumnDialog = class extends LitElement {
           ${this.periodType === "instant" ? html`
             <div class="form-group">
               <label class="form-label required">${I18n.t("column.instantDate")}</label>
-              <input 
-                type="date" 
-                class="form-input"
-                .value="${this._instantDate}"
-                @change="${this._handleInstantDateChange}"
-                required
-              />
-            </div>
-          ` : html`
-            <div class="form-group date-row">
-              <div class="date-field">
-                <label class="form-label required">${I18n.t("column.startPeriodDate")}</label>
+              <div class="date-wrapper">
                 <input 
                   type="date" 
                   class="form-input"
-                  .value="${this._startDate}"
-                  @change="${this._handleStartDateChange}"
+                  .value="${this._instantDate}"
+                  @change="${this._handleInstantDateChange}"
                   required
                 />
+                <svg class="calendar-icon-svg" viewBox="0 0 24 24">
+                  <path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5
+                        a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14
+                        a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
+              </div>
+            </div>
+          ` : html`
+            <div class="form-group date-row">
+              <div class="date-field">
+                <label class="form-label required">${I18n.t("column.startPeriodDate")}</label>
+                <div class="date-wrapper">
+                  <input 
+                    type="date" 
+                    class="form-input"
+                    .value="${this._startDate}"
+                    @change="${this._handleStartDateChange}"
+                    required
+                  />
+                  <svg class="calendar-icon-svg" viewBox="0 0 24 24">
+                    <path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5
+                          a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14
+                          a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
+                </div>
               </div>
               <div class="date-field">
                 <label class="form-label required">${I18n.t("column.endPeriodDate")}</label>
-                <input 
-                  type="date" 
-                  class="form-input"
-                  .value="${this._endDate}"
-                  @change="${this._handleEndDateChange}"
-                  required
-                />
+                <div class="date-wrapper">
+                  <input 
+                    type="date" 
+                    class="form-input"
+                    .value="${this._endDate}"
+                    @change="${this._handleEndDateChange}"
+                    required
+                  />
+                  <svg class="calendar-icon-svg" viewBox="0 0 24 24">
+                    <path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5
+                          a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14
+                          a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
+                </div>
               </div>
             </div>
           `}
@@ -4910,6 +4998,32 @@ JupiterAddColumnDialog.styles = css`
       max-height: calc(90vh - 160px);
     }
 
+      .date-wrapper {
+    position: relative;
+    width: min-content;
+    }
+
+       /* hide native icon */
+    input[type="date"]::-webkit-calendar-picker-indicator {
+      opacity: 0;
+      position: absolute;
+      right: 10px;
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+    }
+      
+       .calendar-icon-svg {
+      position: absolute;
+    right: 3px;
+    top: 18px;
+      transform: translateY(-50%);
+      width: 20px;
+      height: 20px;
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
+      pointer-events: none;
+    }
+
     .form-group {
       margin-bottom: 16px;
     }
@@ -4986,18 +5100,18 @@ JupiterAddColumnDialog.styles = css`
       background: transparent;
     }
 
-    // .btn-cancel:hover {
-    //   background: var(--jupiter-neutral-background-hover, #e0e0e0);
-    // }
+    .btn-cancel:hover {
+      opacity: 0.9;
+    }
 
     .btn-primary {
       background: var(--buttonBgColor, var(--jupiter-primary-color, #1976d2));
       color: var(--buttonTextColor, white);
     }
 
-    // .btn-primary:hover {
-    //   background: var(--jupiter-primary-color-dark, #5a6fd8);
-    // }
+    .btn-primary:hover {
+      opacity: 0.9;
+    }
 
     // .btn-primary:disabled {
     //   background: var(--jupiter-disabled-background, #ccc);
@@ -5927,10 +6041,10 @@ JupiterFormSection.styles = css`
       position: absolute;
       top: 32px;
       right: 4px;
-      background: white;
-      border: 1px solid var(--jupiter-border-color, #ddd);
+      background: var(--bg-color-2, var(--jupiter-card-background, #fff));
+      border: 1px solid var(--primaryTextColor, var(--jupiter-border-color, #ddd));
       border-radius: 4px;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
       z-index: 1000;
       min-width: 150px;
       padding: 4px 0;
@@ -5940,7 +6054,7 @@ JupiterFormSection.styles = css`
       padding: 8px 16px;
       cursor: pointer;
       font-size: 14px;
-      color: var(--jupiter-text-primary, #333);
+      color: var(--primaryTextColor, var(--jupiter-text-primary, #333));
       transition: background 0.2s ease;
       border: none;
       background: transparent;
@@ -5950,7 +6064,7 @@ JupiterFormSection.styles = css`
     }
 
     .column-context-menu-item:hover {
-      background: var(--jupiter-background-light, #f5f5f5);
+      opacity: 0.9;
     }
 
     .column-context-menu-item.remove {
@@ -7384,9 +7498,9 @@ JupiterFilterRolesDialog.styles = css`
       transition: background-color 0.2s ease;
     }
 
-    // .close-button:hover {
-    //   background: var(--jupiter-hover-background, #f5f5f5);
-    // }
+    .close-button:hover {
+      opacity: 0.9;
+    }
 
     .dialog-content {
       background: var(--bg-color-2, var(--jupiter-form-content-background, #fff));
@@ -7500,10 +7614,9 @@ JupiterFilterRolesDialog.styles = css`
       transition: all 0.2s ease;
     }
 
-    // .selection-control:hover {
-    //   background: var(--menuBgColorLighter, var(--jupiter-primary-color, #1976d2));
-    //   color: white;
-    // }
+    .selection-control:hover {
+      opacity: 0.9;
+    }
 
     .roles-list {
       display: flex;
@@ -7724,9 +7837,9 @@ JupiterFilterRolesDialog.styles = css`
       color: var(--buttonTextColor, white);
     }
 
-    // .btn-primary:hover:not(:disabled) {
-    //   background: var(--jupiter-primary-color-dark, #1565c0);
-    // }
+    .btn-primary:hover:not(:disabled) {
+      opacity: 0.9;
+    }
 
     .btn-secondary {
       color: var(--buttonBgColor, var(--jupiter-primary-color, #1976d2));
@@ -7734,9 +7847,9 @@ JupiterFilterRolesDialog.styles = css`
       background: transparent;
     }
 
-    // .btn-secondary:hover:not(:disabled) {
-    //   background: var(--jupiter-hover-background, #f5f5f5);
-    // }
+    .btn-secondary:hover:not(:disabled) {
+      opacity: 0.9;
+    }
 
     button:disabled {
       opacity: 0.6;
@@ -11811,9 +11924,9 @@ JupiterDynamicForm.styles = css`
       background: transparent;
     }
 
-    // .btn-secondary:hover:not(:disabled) {
-    //   background: var(--jupiter-secondary-color-dark, #616161);
-    // }
+    .btn-secondary:hover:not(:disabled) {
+      opacity: 0.9;
+    }
 
     .btn-outline {
       background: transparent;
@@ -11892,10 +12005,9 @@ JupiterDynamicForm.styles = css`
       margin-right: auto;
     }
 
-    // .filter-roles-button:hover:not(:disabled) {
-    //   background: var(--jupiter-primary-color, #1976d2);
-    //   color: white;
-    // }
+    .filter-roles-button:hover:not(:disabled) {
+      opacity: 0.9;
+    }
 
     .filter-roles-button .filter-icon {
       width: 16px;
@@ -12089,9 +12201,9 @@ JupiterDynamicForm.styles = css`
       line-height: 1.4;
     }
 
-    // .side-panel-role-item:hover {
-    //   background: var(--jupiter-hover-background, #e8e8e8);
-    // }
+    .side-panel-role-item:hover {
+      opacity: 0.9;
+    }
 
     .side-panel-role-item.active {
       background: var(--light-color-1, var(--jupiter-primary-color, #1976d2));