@dile/utils 2.6.1 → 2.7.0

package/components/datepicker/datetimepicker.js

@@ -0,0 +1,4 @@
+import './calendar.js';
+import { DileDatetimepicker } from "./src/DileDatetimepicker.js";
+
+window.customElements.define("dile-datetimepicker", DileDatetimepicker);

package/components/datepicker/src/DileDatepicker.js

@@ -93,13 +93,9 @@ export class DileDatepicker extends DileInput {
             ? html`<dile-icon class="trigger-disabled" .icon="${calendarIcon}"></dile-icon>`
             : html`
               <dile-menu-overlay moveTop="${this.moveTop}" moveLeft="${this.moveLeft}" verticalAlign="${this.verticalAlign}" horizontalAlign="${this.horizontalAlign}" id="menu">
-                <dile-icon .icon="${calendarIcon}" slot="trigger"></dile-icon>
+                ${this.iconTemplate}
                 <div slot="content" class="calendar">
-                  <dile-calendar 
-                    class="demo-calendar"
-                    .firstDayOfWeek="${this.firstDayOfWeek}"
-                    @user-selected-date-changed=${this.showDate} 
-                  ></dile-calendar> 
+                  ${this.contentTemplate}
                 </div>
               </dile-menu-overlay>
             `
@@ -114,4 +110,18 @@ export class DileDatepicker extends DileInput {
     this.value = date;
     this.shadowRoot.getElementById('menu').close();
   }  
+
+  get iconTemplate() {
+    return html`<dile-icon .icon="${calendarIcon}" slot="trigger"></dile-icon>`
+  }
+
+  get contentTemplate() {
+    return html`
+      <dile-calendar 
+        class="demo-calendar"
+        .firstDayOfWeek="${this.firstDayOfWeek}"
+        @user-selected-date-changed=${this.showDate} 
+      ></dile-calendar>
+    `
+  }
 }

package/components/datepicker/src/DileDatetimepicker.js

@@ -0,0 +1,94 @@
+import { LitElement, html, css } from 'lit';
+import { DileDatepicker } from './DileDatepicker';
+import { dateTimeIcon } from '@dile/icons';
+import '@dile/ui/components/time-picker/time-picker.js';
+import { doneIcon } from '@dile/icons';
+
+function formatToIsoOnlyDate(date) {
+    const pad = n => String(n).padStart(2, '0');
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+
+export class DileDatetimepicker extends DileDatepicker {
+
+  static get styles() {
+    return [
+      ...super.styles,
+      css`
+        .overlay-view {
+          display: flex;
+          flex-direction: column;
+          gap: 0.5rem;
+          align-items: center;
+        }
+        .time-area {
+          display: flex;
+          flex-direction: row;
+          gap: 1rem;
+          justify-content: center;
+          align-items: center;
+          margin-bottom: 0.5rem;
+        }
+        .time-area span {
+          display: flex;
+          align-items: center;
+        }
+        .time-area dile-icon {
+          --dile-icon-size: var(--dile-datetimepicker-accept-icon-size, 24px);
+          --dile-icon-color: var(--dile-datetimepicker-accept-icon-color, var(--dile-on-primary-color, #888));
+          --dile-icon-rounded-background-color: var(--dile-datetimepicker-accept-icon-background-color, var(--dile-primary-color, #f4f4f4));
+          cursor: pointer;
+        }
+        dile-time-picker {
+          margin-bottom: 0;
+        }
+    `];
+  }
+  get iconTemplate() {
+    return html`<dile-icon .icon="${dateTimeIcon}" slot="trigger"></dile-icon>`
+  }
+
+  get contentTemplate() {
+    return html`
+      <div class="overlay-view">
+        <dile-calendar 
+          class="demo-calendar"
+          .firstDayOfWeek="${this.firstDayOfWeek}"
+          @user-selected-date-changed=${this.showDateHandler} 
+        ></dile-calendar>
+        <div class="time-area">
+          <span>
+            <dile-time-picker></dile-time-picker>
+          </span>
+          <dile-icon rounded .icon=${doneIcon} @click=${this.acceptTime}></dile-icon>
+        </div>
+      </div>
+    `
+  }
+
+  get eltime() {
+    return this.shadowRoot.querySelector('dile-time-picker');
+  }
+
+  get elmenu() {
+    return this.shadowRoot.getElementById('menu');
+  }
+
+  showDateHandler(e) {
+    this.showDate(e.detail.selectedDate)
+  }
+
+  showDate(selectedDate) {
+    let date = formatToIsoOnlyDate(selectedDate);
+    let time = this.eltime.value;
+    this.value = `${date} ${time}`;
+    this.elmenu.close();
+  }
+  acceptTime() {
+    let date = this.shadowRoot.querySelector('dile-calendar').selectedDate;
+    if(!date) {
+      date = new Date();
+    }
+    this.showDate(date);
+  }  
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/utils",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "description": "Utility Components of Diverse Uses Based on the Lit Library and Web Components Standard.",
   "main": "index.js",
   "scripts": {
@@ -20,7 +20,7 @@
   },
   "homepage": "https://dile-components.com/",
   "dependencies": {
-    "@dile/ui": "^2.7.1",
+    "@dile/ui": "^2.8.0",
     "@lion/ui": "^0.11.2",
     "linkify-string": "^4.1.3",
     "linkifyjs": "^4.1.3",
@@ -29,5 +29,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "260fc2605a66bdb10796e07242fa396081659c2c"
+  "gitHead": "23cccd2c6346a026fe4dae9374520e604c620085"
 }