@lion/ui 0.3.3 → 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,
     );
@@ -436,6 +433,7 @@ export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField))
               ];
             }
           });
+          // this._selectedFilesMetaData = [...this._selectedFilesMetaData];
         }
       });
     }
@@ -468,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/custom-elements.json

@@ -6220,6 +6220,11 @@
               ],
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "__getSelectableDateRange",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "__coreDayPreprocessor",
@@ -6257,11 +6262,6 @@
               ],
               "privacy": "private"
             },
-            {
-              "kind": "method",
-              "name": "__disableDatesChanged",
-              "privacy": "private"
-            },
             {
               "kind": "method",
               "name": "__dateSelectedByUser",
@@ -6277,18 +6277,62 @@
             },
             {
               "kind": "method",
-              "name": "__centralDateChanged",
+              "name": "__focusedDateChanged",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "__focusedDateChanged",
-              "privacy": "private"
+              "name": "findNextEnabledDate",
+              "parameters": [
+                {
+                  "name": "date",
+                  "optional": true,
+                  "type": {
+                    "text": "Date"
+                  }
+                }
+              ],
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
             },
             {
               "kind": "method",
-              "name": "__ensureValidCentralDate",
-              "privacy": "private"
+              "name": "findPreviousEnabledDate",
+              "parameters": [
+                {
+                  "name": "date",
+                  "optional": true,
+                  "type": {
+                    "text": "Date"
+                  }
+                }
+              ],
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "findNearestEnabledDate",
+              "parameters": [
+                {
+                  "name": "date",
+                  "optional": true,
+                  "type": {
+                    "text": "Date"
+                  }
+                }
+              ],
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
             },
             {
               "kind": "method",
@@ -6349,6 +6393,19 @@
               "name": "__blurDateDelegation",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "__dayButtonSelection",
+              "parameters": [
+                {
+                  "name": "el",
+                  "type": {
+                    "text": "HTMLElement & { date: Date }"
+                  }
+                }
+              ],
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "__keyboardNavigationEvent",
@@ -6373,12 +6430,12 @@
                   }
                 },
                 {
-                  "name": "{ dateType, type, mode }"
+                  "name": "{ dateType, type }"
                 },
                 {
                   "name": "opts",
                   "type": {
-                    "text": "@param {string} opts.dateType\n   * @param {string} opts.type\n   * @param {string} opts.mode\n   * "
+                    "text": "@param {string} opts.dateType\n   * @param {string} opts.type\n   * "
                   }
                 }
               ],
@@ -6578,7 +6635,7 @@
         {
           "kind": "variable",
           "name": "calendarStyle",
-          "default": "css`\n  :host {\n    display: block;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  .calendar {\n    display: block;\n  }\n\n  .calendar__navigation {\n    padding: 0 8px;\n  }\n\n  .calendar__navigation__month,\n  .calendar__navigation__year {\n    display: flex;\n  }\n\n  .calendar__navigation-heading {\n    margin: 0.5em 0;\n  }\n\n  .calendar__previous-button,\n  .calendar__next-button {\n    background-color: #fff;\n    border: 0;\n    padding: 0;\n    min-width: 40px;\n    min-height: 40px;\n  }\n\n  .calendar__grid {\n    width: 100%;\n    padding: 8px 8px;\n  }\n\n  .calendar__weekday-header {\n  }\n\n  .calendar__day-cell {\n    text-align: center;\n  }\n\n  .calendar__day-button {\n    background-color: #fff;\n    border: 0;\n    color: black;\n    padding: 0;\n    min-width: 40px;\n    min-height: 40px;\n  }\n\n  .calendar__day-button__text {\n    pointer-events: none;\n  }\n\n  .calendar__day-button[today] {\n    text-decoration: underline;\n  }\n\n  .calendar__day-button[selected] {\n    background: #ccc;\n  }\n\n  .calendar__day-button[previous-month],\n  .calendar__day-button[next-month] {\n    color: rgb(115, 115, 115);\n  }\n\n  .calendar__day-button:hover {\n    border: 1px solid green;\n  }\n\n  .calendar__day-button[disabled] {\n    background-color: #fff;\n    color: #eee;\n    outline: none;\n  }\n`"
+          "default": "css`\n  :host {\n    display: block;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  .calendar {\n    display: block;\n  }\n\n  .calendar__navigation {\n    padding: 0 8px;\n  }\n\n  .calendar__navigation__month,\n  .calendar__navigation__year {\n    display: flex;\n  }\n\n  .calendar__navigation-heading {\n    margin: 0.5em 0;\n  }\n\n  .calendar__previous-button,\n  .calendar__next-button {\n    background-color: #fff;\n    border: 0;\n    padding: 0;\n    min-width: 40px;\n    min-height: 40px;\n  }\n\n  .calendar__grid {\n    width: 100%;\n    padding: 8px 8px;\n  }\n\n  .calendar__weekday-header {\n  }\n\n  .calendar__day-cell {\n    text-align: center;\n  }\n\n  .calendar__day-button {\n    background-color: #fff;\n    border: 0;\n    color: black;\n    padding: 0;\n    min-width: 40px;\n    min-height: 40px;\n    /** give div[role=button][aria-disabled] same display type as native btn */\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    box-sizing: border-box;\n  }\n\n  .calendar__day-button:focus {\n    border: 1px solid blue;\n    outline: none;\n  }\n\n  .calendar__day-button__text {\n    pointer-events: none;\n  }\n\n  .calendar__day-button[today] {\n    text-decoration: underline;\n  }\n\n  .calendar__day-button[selected] {\n    background: #ccc;\n  }\n\n  .calendar__day-button[previous-month],\n  .calendar__day-button[next-month] {\n    color: rgb(115, 115, 115);\n  }\n\n  .calendar__day-button:hover {\n    border: 1px solid green;\n  }\n\n  .calendar__day-button[aria-disabled='true'] {\n    background-color: #fff;\n    color: #eee;\n    outline: none;\n  }\n\n  .u-sr-only {\n    position: absolute;\n    top: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip-path: inset(100%);\n    clip: rect(1px, 1px, 1px, 1px);\n    white-space: nowrap;\n    border: 0;\n    margin: 0;\n    padding: 0;\n  }\n`"
         }
       ],
       "exports": [
@@ -20780,6 +20837,22 @@
               "name": "scopedElements",
               "static": true
             },
+            {
+              "kind": "field",
+              "name": "_inputFormatter"
+            },
+            {
+              "kind": "method",
+              "name": "_formatDate",
+              "parameters": [
+                {
+                  "name": "date",
+                  "type": {
+                    "text": "Date"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "slots"
@@ -20872,7 +20945,8 @@
                     "text": "{ target: { selectedDate: Date }}"
                   }
                 }
-              ]
+              ],
+              "description": "Triggered when a user selects a date from the calendar overlay"
             },
             {
               "kind": "method",
@@ -22253,6 +22327,13 @@
               "name": "__duplicateFileNamesValidator",
               "privacy": "private",
               "default": "new DuplicateFileNames({ show: false })"
+            },
+            {
+              "kind": "field",
+              "name": "isDragging",
+              "privacy": "public",
+              "attribute": "is-dragging",
+              "reflects": true
             }
           ],
           "events": [
@@ -22294,6 +22375,10 @@
               "name": "upload-on-select",
               "fieldName": "uploadOnSelect"
             },
+            {
+              "name": "is-dragging",
+              "fieldName": "isDragging"
+            },
             {
               "name": "uploadResponse",
               "fieldName": "uploadResponse"
@@ -37727,7 +37812,7 @@
               }
             },
             {
-              "name": "{\n    weekOrder = 0,\n    central = false,\n    startOfWeek = false,\n    selected = false,\n    previousMonth = false,\n    currentMonth = false,\n    nextMonth = false,\n    past = false,\n    today = false,\n    future = false,\n    disabled = false,\n  }",
+              "name": "{\n    weekOrder = 0,\n    central = false,\n    startOfWeek = false,\n    selected = false,\n    previousMonth = false,\n    currentMonth = false,\n    nextMonth = false,\n    past = false,\n    today = false,\n    future = false,\n    disabled = false,\n    disabledInfo = '',\n  }",
               "default": "{}"
             }
           ],
@@ -37946,6 +38031,63 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/calendar/src/utils/getDayMonthYear.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "defaultMonthLabels",
+          "type": {
+            "text": "array"
+          },
+          "default": "[\n  'January',\n  'February',\n  'March',\n  'April',\n  'May',\n  'June',\n  'July',\n  'August',\n  'September',\n  'October',\n  'November',\n  'December',\n]"
+        },
+        {
+          "kind": "function",
+          "name": "getDayMonthYear",
+          "parameters": [
+            {
+              "name": "day",
+              "type": {
+                "text": "Day"
+              }
+            },
+            {
+              "name": "weekdays",
+              "type": {
+                "text": "string[]"
+              }
+            },
+            {
+              "name": "monthsLabels",
+              "default": "defaultMonthLabels",
+              "type": {
+                "text": "string[]"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "defaultMonthLabels",
+          "declaration": {
+            "name": "defaultMonthLabels",
+            "module": "components/calendar/src/utils/getDayMonthYear.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getDayMonthYear",
+          "declaration": {
+            "name": "getDayMonthYear",
+            "module": "components/calendar/src/utils/getDayMonthYear.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/calendar/src/utils/getFirstDayNextMonth.js",
@@ -52473,6 +52615,11 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "__getSelectableDateRange",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "__coreDayPreprocessor",
@@ -52506,11 +52653,6 @@
                 }
               ]
             },
-            {
-              "kind": "field",
-              "name": "__disableDatesChanged",
-              "privacy": "private"
-            },
             {
               "kind": "field",
               "name": "__dateSelectedByUser",
@@ -52533,18 +52675,62 @@
             },
             {
               "kind": "field",
-              "name": "__centralDateChanged",
+              "name": "__focusedDateChanged",
               "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "__focusedDateChanged",
-              "privacy": "private"
+              "kind": "method",
+              "name": "findNextEnabledDate",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "date",
+                  "optional": true,
+                  "type": {
+                    "text": "Date"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "__ensureValidCentralDate",
-              "privacy": "private"
+              "kind": "method",
+              "name": "findPreviousEnabledDate",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "date",
+                  "optional": true,
+                  "type": {
+                    "text": "Date"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "findNearestEnabledDate",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "date",
+                  "optional": true,
+                  "type": {
+                    "text": "Date"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
@@ -52601,6 +52787,19 @@
               "name": "__blurDateDelegation",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "__dayButtonSelection",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "el",
+                  "type": {
+                    "text": "HTMLElement & { date: Date }"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "__keyboardNavigationEvent",
@@ -52628,7 +52827,7 @@
                 {
                   "name": "opts",
                   "type": {
-                    "text": "@param {string} opts.dateType\n     * @param {string} opts.type\n     * @param {string} opts.mode\n     * "
+                    "text": "@param {string} opts.dateType\n     * @param {string} opts.type\n     * "
                   }
                 }
               ]
@@ -60158,6 +60357,30 @@
               ],
               "description": "The LionCalendar shouldn't know anything about the modelValue;\nit can't handle Unparseable dates, but does handle 'undefined'"
             },
+            {
+              "kind": "field",
+              "name": "_inputFormatter",
+              "type": {
+                "text": "(date?: number | Date | undefined) => Intl.DateTimeFormatPart[]"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_formatDate",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "date",
+                  "type": {
+                    "text": "Date"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "_invokerNode",
@@ -60249,7 +60472,8 @@
                     "text": "{ target: { selectedDate: Date }}"
                   }
                 }
-              ]
+              ],
+              "description": "Triggered when a user selects a date from the calendar overlay"
             },
             {
               "kind": "field",
@@ -61669,6 +61893,13 @@
               "name": "__setupDragDropEventListeners",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "isDragging",
+              "type": {
+                "text": "boolean | undefined"
+              }
+            },
             {
               "kind": "field",
               "name": "__computeNewAddedFiles",
@@ -85343,10 +85574,10 @@
               "description": ","
             },
             {
-              "name": "{ weekOrder, central, startOfWeek, selected, previousMonth, currentMonth, nextMonth, past, today, future, disabled, }",
+              "name": "{ weekOrder, central, startOfWeek, selected, previousMonth, currentMonth, nextMonth, past, today, future, disabled, disabledInfo, }",
               "optional": true,
               "type": {
-                "text": "{\n    weekOrder?: number | undefined;\n    central?: boolean | undefined;\n    startOfWeek?: boolean | undefined;\n    selected?: boolean | undefined;\n    previousMonth?: boolean | undefined;\n    currentMonth?: boolean | undefined;\n    nextMonth?: boolean | undefined;\n    past?: boolean | undefined;\n    today?: boolean | undefined;\n    future?: boolean | undefined;\n    disabled?: boolean | undefined;\n}"
+                "text": "{\n    weekOrder?: number | undefined;\n    central?: boolean | undefined;\n    startOfWeek?: boolean | undefined;\n    selected?: boolean | undefined;\n    previousMonth?: boolean | undefined;\n    currentMonth?: boolean | undefined;\n    nextMonth?: boolean | undefined;\n    past?: boolean | undefined;\n    today?: boolean | undefined;\n    future?: boolean | undefined;\n    disabled?: boolean | undefined;\n    disabledInfo?: string | undefined;\n}"
               }
             }
           ]
@@ -85585,6 +85816,67 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist-types/components/calendar/src/utils/getDayMonthYear.d.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "getDayMonthYear",
+          "return": {
+            "type": {
+              "text": "{\n    dayNumber: number;\n    monthName: string;\n    year: number;\n    weekdayName: string;\n}"
+            }
+          },
+          "parameters": [
+            {
+              "name": "day",
+              "type": {
+                "text": "Day"
+              }
+            },
+            {
+              "name": "weekdays",
+              "type": {
+                "text": "string[]"
+              }
+            },
+            {
+              "name": "monthsLabels",
+              "optional": true,
+              "type": {
+                "text": "string[]"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "variable",
+          "name": "defaultMonthLabels",
+          "type": {
+            "text": "string[]"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "getDayMonthYear",
+          "declaration": {
+            "name": "getDayMonthYear",
+            "module": "dist-types/components/calendar/src/utils/getDayMonthYear.d.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "defaultMonthLabels",
+          "declaration": {
+            "name": "defaultMonthLabels",
+            "module": "dist-types/components/calendar/src/utils/getDayMonthYear.d.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist-types/components/calendar/src/utils/getFirstDayNextMonth.d.ts",