@lion/ui 0.3.2 → 0.3.4

package/components/calendar/test-helpers/DayObject.js

@@ -34,7 +34,7 @@ export class DayObject {
    */
 
   get isDisabled() {
-    return this.buttonEl.hasAttribute('disabled');
+    return this.buttonEl.getAttribute('aria-disabled') === 'true';
   }
 
   get isSelected() {
@@ -54,7 +54,7 @@ export class DayObject {
   }
 
   get monthday() {
-    return Number(this.buttonEl.textContent);
+    return Number(this.buttonEl.children[0].textContent);
   }
 
   /**

package/components/calendar/types/day.ts

@@ -14,6 +14,7 @@ export declare interface Day {
   tabindex?: string;
   ariaPressed?: string;
   ariaCurrent?: string | undefined;
+  disabledInfo?: string | undefined;
 }
 
 export declare interface Week {

package/components/input-datepicker/src/LionInputDatepicker.js

@@ -96,10 +96,28 @@ export class LionInputDatepicker extends ScopedElementsMixin(
 
       __calendarDisableDates: {
         attribute: false,
+        type: Array,
       },
     };
   }
 
+  _inputFormatter = new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  }).formatToParts;
+
+  /**
+   * @param {Date} date
+   */
+  // eslint-disable-next-line class-methods-use-this
+  _formatDate(date) {
+    const day = String(date.getDate()).padStart(2, '0');
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const year = String(date.getFullYear());
+    return `${day}/${month}/${year}`;
+  }
+
   get slots() {
     return {
       ...super.slots,
@@ -346,6 +364,7 @@ export class LionInputDatepicker extends ScopedElementsMixin(
   }
 
   /**
+   * Triggered when a user selects a date from the calendar overlay
    * @param {{ target: { selectedDate: Date }}} opts
    */
   _onCalendarUserSelectedChanged({ target: { selectedDate } }) {
@@ -355,8 +374,21 @@ export class LionInputDatepicker extends ScopedElementsMixin(
     if (this._syncOnUserSelect) {
       // Synchronize new selectedDate value to input
       this._isHandlingUserInput = true;
-      this._isHandlingCalendarUserInput = true;
-      this.modelValue = selectedDate;
+
+      if (
+        Array.isArray(this.__calendarDisableDates) &&
+        this.__calendarDisableDates.includes(selectedDate)
+      ) {
+        // If the selected date is disabled, reset the values
+        this.value = '';
+        this.formattedValue = '';
+        this.modelValue = undefined;
+      } else {
+        this.formattedValue = this._formatDate(selectedDate);
+        this.value = this.formattedValue;
+        this.modelValue = selectedDate;
+      }
+
       this._isHandlingUserInput = false;
       this._isHandlingCalendarUserInput = false;
     }

package/components/input-file/src/LionInputFile.js

@@ -47,6 +47,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
       maxFileSize: { type: Number, attribute: 'max-file-size' },
       enableDropZone: { type: Boolean, attribute: 'enable-drop-zone' },
       uploadOnSelect: { type: Boolean, attribute: 'upload-on-select' },
+      isDragging: { type: Boolean, attribute: 'is-dragging', reflect: true },
       uploadResponse: { type: Array, state: false },
       _selectedFilesMetaData: { type: Array, state: true },
     };
@@ -300,11 +301,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
         (/** @type {Event} */ ev) => {
           ev.preventDefault();
           ev.stopPropagation();
-          if (eventName !== 'dragleave') {
-            this.setAttribute('is-dragging', '');
-          } else {
-            this.removeAttribute('is-dragging');
-          }
+          this.isDragging = eventName !== 'dragleave';
         },
         false,
       );
@@ -316,7 +313,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
         if (ev.target === this._inputNode) {
           ev.preventDefault();
         }
-        this.removeAttribute('is-dragging');
+        this.isDragging = false;
       },
       false,
     );
@@ -427,8 +424,11 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
               // eslint-disable-next-line no-param-reassign
               file.validationFeedback = [
                 {
-                  type: response.errorMessage?.length > 0 ? 'error' : 'success',
-                  message: response.errorMessage,
+                  type:
+                    typeof response.errorMessage === 'string' && response.errorMessage?.length > 0
+                      ? 'error'
+                      : 'success',
+                  message: response.errorMessage ?? '',
                 },
               ];
             }
@@ -466,7 +466,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
    */
   _processDroppedFiles(ev) {
     ev.preventDefault();
-    this.removeAttribute('is-dragging');
+    this.isDragging = false;
 
     const isDraggingMultipleWhileNotSupported =
       ev.dataTransfer && ev.dataTransfer.items.length > 1 && !this.multiple;

package/components/input-file/test/lion-input-file.test.js

@@ -927,12 +927,14 @@ describe('lion-input-file', () => {
     it('should set "is-dragging" on dragenter', async () => {
       const dropzone = el.shadowRoot?.querySelector('.input-file__drop-zone');
       dropzone?.dispatchEvent(new Event('dragenter', { bubbles: true }));
+      await el.updateComplete;
       expect(el.hasAttribute('is-dragging')).to.equal(true);
     });
 
     it('should set "is-dragging" on dragover', async () => {
       const dropzone = el.shadowRoot?.querySelector('.input-file__drop-zone');
       dropzone?.dispatchEvent(new Event('dragover', { bubbles: true }));
+      await el.updateComplete;
       expect(el.hasAttribute('is-dragging')).to.equal(true);
     });
 
@@ -942,6 +944,7 @@ describe('lion-input-file', () => {
       await el.updateComplete;
 
       dropzone?.dispatchEvent(new Event('dragleave', { bubbles: true }));
+      await el.updateComplete;
       expect(el.hasAttribute('is-dragging')).to.equal(false);
     });
 
@@ -951,6 +954,7 @@ describe('lion-input-file', () => {
       await el.updateComplete;
 
       window.dispatchEvent(new Event('drop', { bubbles: true }));
+      await el.updateComplete;
       expect(el.hasAttribute('is-dragging')).to.equal(false);
     });
 

package/components/input-file/types/{input-file.d.ts → input-file.ts}

@@ -1,6 +1,6 @@
 import { FeedbackMessage } from "../../form-core/types/validate/ValidateMixinTypes.js";
 
-type FileBasics = {
+export type FileBasics = {
   name: string;
   /** size in bytes */
   size: number;
@@ -10,7 +10,7 @@ type FileBasics = {
 
 export type InputFile = {
   downloadUrl?: string;
-  errorMessage?: FeedbackMessage.message;
+  errorMessage?: FeedbackMessage["message"];
   failedProp?: Array<string|number>;
   response?: UploadResponse;
   systemFile: Partial<SystemFile>;
@@ -19,7 +19,7 @@ export type InputFile = {
 
 export type SystemFile = {
   downloadUrl?: string;
-  errorMessage?: FeedbackMessage.message;
+  errorMessage?: FeedbackMessage["message"];
   failedProp?: Array<string|number>;
   response?: UploadResponse;
 } & FileBasics & Partial<File>;
@@ -27,6 +27,6 @@ export type SystemFile = {
 
 export type UploadResponse = {
   downloadUrl?: string;
-  errorMessage?: FeedbackMessage.message;
+  errorMessage?: FeedbackMessage["message"];
   id?: string;
 } & Partial<FileBasics>;