@aurodesignsystem/auro-formkit 2.0.0-beta.2 → 2.0.0-beta.20

package/components/datepicker/dist/inputVersion.d.ts

@@ -0,0 +1,3 @@
+declare const _default: "4.2.0";
+export default _default;
+//# sourceMappingURL=inputVersion.d.ts.map

package/components/datepicker/dist/inputVersion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputVersion.d.ts","sourceRoot":"","sources":["../src/inputVersion.js"],"names":[],"mappings":"wBAAe,OAAO"}

package/components/datepicker/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@auro-formkit/auro-datepicker",
+  "name": "@aurodesignsystem/auro-datepicker",
   "version": "3.2.0",
   "description": "auro-datepicker HTML custom element",
   "type": "module",
@@ -13,8 +13,8 @@
   },
   "dependencies": {
     "@alaskaairux/icons": "^4.44.1",
-    "@auro-formkit/auro-dropdown": "*",
-    "@auro-formkit/auro-input": "*",
+    "@aurodesignsystem/auro-dropdown": "*",
+    "@aurodesignsystem/auro-input": "*",
     "@auro-formkit/form-validation": "*",
     "@aurodesignsystem/auro-popover": "^4.1.2",
     "@material/mwc-icon-button": "^0.27.0",

package/components/datepicker/src/auro-datepicker.js

@@ -25,33 +25,14 @@ import tokensCss from "./styles/tokens-css.js";
 
 import './auro-calendar.js';
 
-import { AuroDropdown } from '@auro-formkit/auro-dropdown';
+import { AuroDropdown } from '@aurodesignsystem/auro-dropdown';
 import dropdownVersion from './formkit/auro-dropdownVersion.js';
 
-import { AuroInput } from '@auro-formkit/auro-input';
+import { AuroInput } from '@aurodesignsystem/auro-input';
 import inputVersion from './formkit/auro-inputVersion.js';
 
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
- * @prop {String} value - Value selected for the date picker.
- * @prop {String} valueEnd - Value selected for the second date picker when using date range.
- * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
- * @attr {String} validity - Specifies the `validityState` this element is in.
- * @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates.
- * @attr {String} setCustomValidityRangeUnderflow - Custom help text message to display when validity = `rangeUnderflow`.
- * @attr {String} setCustomValidityRangeOverflow - Custom help text message to display when validity = `rangeOverflow`.
- * @attr {String} setCustomValidityValueMissing - Help text message to display when validity = `valueMissing`.
- * @attr {String} calendarStartDate - The first date that may be displayed in the calendar.
- * @attr {String} calendarEndDate - The last date that may be displayed in the calendar
- * @attr {String} calendarFocusDate - The date that will first be visually rendered to the user in the calendar.
- * @attr {Boolean} disabled - If set, disables the datepicker.
- * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
- * @attr {Boolean} required - Populates the `required` attribute on the input. Used for client-side validation.
- * @attr {Boolean} range - If set, turns on date range functionality in auro-calendar.
- * @attr {String} centralDate - The date that determines the currently visible month.
- * @attr {String} maxDate - Maximum date. All dates after will be disabled.
- * @attr {String} minDate - Minimum date. All dates before will be disabled.
- * @attr {Array} monthNames = Names of all 12 months to render in the calendar, used for localization of date string in mobile layout.
  * @slot helpText - Defines the content of the helpText.
  * @slot mobileDateLabel - Defines the content to display above selected dates in the mobile layout.
  * @slot toLabel - Defines the label content for the second input when the `range` attribute is used.
@@ -148,7 +129,15 @@ export class AuroDatePicker extends LitElement {
      * Generate unique names for dependency components.
      */
     const versioning = new AuroDependencyVersioning();
+
+    /**
+     * @private
+     */
     this.dropdownTag = versioning.generateTag('auro-dropdown', dropdownVersion, AuroDropdown);
+
+    /**
+     * @private
+     */
     this.inputTag = versioning.generateTag('auro-input', inputVersion, AuroInput);
   }
 
@@ -158,101 +147,155 @@ export class AuroDatePicker extends LitElement {
   static get properties() {
     return {
       // ...super.properties,
-      error: {
-        type: String,
-        reflect: true
-      },
-      noValidate: {
-        type: Boolean
-      },
-      setCustomValidity: {
-        type: String,
-        reflect: true
-      },
-      setCustomValidityRangeUnderflow: {
-        type: String,
-        reflect: true
-      },
-      setCustomValidityRangeOverflow: {
+      /**
+       * The last date that may be displayed in the calendar.
+       */
+      calendarEndDate: {
         type: String,
         reflect: true
       },
-      setCustomValidityValueMissing: {
+
+      /**
+       * The date that will first be visually rendered to the user in the calendar.
+       */
+      calendarFocusDate: {
         type: String,
         reflect: true
       },
-      validity: {
+
+      /**
+       * The first date that may be displayed in the calendar.
+       */
+      calendarStartDate: {
         type: String,
         reflect: true
       },
-      range: {
-        type: Boolean,
-        reflect: true
+
+      /**
+       * The date that determines the currently visible month.
+       */
+      centralDate: {
+        type: String
       },
+
+      /**
+       * If set, disables the datepicker.
+       */
       disabled: {
         type: Boolean,
         reflect: true
       },
-      required: {
-        type: Boolean,
-        reflect: true
-      },
-      type: {
+
+      /**
+       * When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
+       */
+      error: {
         type: String,
         reflect: true
       },
-      value: {
-        type: String
-      },
-      valueEnd: {
-        type: String
-      },
-      centralDate: {
-        type: String
-      },
+
+      /**
+       * Maximum date. All dates after will be disabled.
+       */
       maxDate: {
         type: String,
         reflect: true
       },
+
+      /**
+       * Minimum date. All dates before will be disabled.
+       */
       minDate: {
         type: String,
         reflect: true
       },
+
+      /**
+       * Names of all 12 months to render in the calendar, used for localization of date string in mobile layout.
+       */
       monthNames: {
         type: Array
       },
-      calendarStartDate: {
-        type: String,
-        reflect: true
+
+      /**
+       * If set, disables auto-validation on blur.
+       */
+      noValidate: {
+        type: Boolean
       },
-      calendarEndDate: {
-        type: String,
+
+      /**
+       * If set, turns on date range functionality in auro-calendar.
+       */
+      range: {
+        type: Boolean,
         reflect: true
       },
-      calendarFocusDate: {
-        type: String,
+
+      /**
+       * Populates the `required` attribute on the input. Used for client-side validation.
+       */
+      required: {
+        type: Boolean,
         reflect: true
       },
 
       /**
-       * @private
+       * Sets a custom help text message to display for all validityStates.
+       */
+      setCustomValidity: {
+        type: String
+      },
+
+      /**
+       * Custom help text message to display when validity = `customError`.
+       */
+      setCustomValidityCustomError: {
+        type: String
+      },
+
+      /**
+       * Custom help text message to display when validity = `rangeOverflow`.
+       */
+      setCustomValidityRangeOverflow: {
+        type: String
+      },
+
+      /**
+       * Custom help text message to display when validity = `rangeUnderflow`.
+       */
+      setCustomValidityRangeUnderflow: {
+        type: String
+      },
+
+      /**
+       * Custom help text message to display when validity = `valueMissing`.
        */
-      dropdownElementName: { type: String },
+      setCustomValidityValueMissing: {
+        type: String
+      },
 
       /**
-       * @private
+       * Specifies the `validityState` this element is in.
        */
-      dropdownTag: { type: Object },
+      validity: {
+        type: String,
+        reflect: true
+      },
 
       /**
-       * @private
+       * Value selected for the datepicker.
        */
-      inputElementName: { type: String },
+      value: {
+        type: String
+      },
 
       /**
-       * @private
+       * Value selected for the second datepicker when using date range.
        */
-      inputTag: { type: Object }
+      valueEnd: {
+        type: String
+      }
     };
   }
 
@@ -374,30 +417,6 @@ export class AuroDatePicker extends LitElement {
     return dateStr;
   }
 
-  /**
-   * Return appropriate error message.
-   * @param {Object} evt - Event passed in from auro-input when the event triggered this function.
-   * @private
-   */
-  getErrorMessage(evt) {
-    if (evt) {
-      const inputClass = evt.target.getAttribute('class');
-      if (inputClass === 'dateFrom') {
-        if (this.inputList[0].validity && this.inputList[0].validity !== 'valid') {
-          this.errorMessage = evt.target.errorMessage;
-        } else {
-          this.errorMessage = undefined;
-        }
-      }
-
-      if (inputClass === 'dateTo') {
-        if (!this.errorMessage && this.inputList[1].validity && this.inputList[1].validity !== 'valid') {
-          this.errorMessage = evt.target.errorMessage;
-        }
-      }
-    }
-  }
-
   /**
    * Changes the calendar's visibility to reflect the value of the central date attribute.
    * @private
@@ -506,13 +525,13 @@ export class AuroDatePicker extends LitElement {
       input.addEventListener('auroFormElement-validated', (evt) => {
         if (evt.detail.validity === 'customError') {
           this.validity = evt.detail.validity;
-          this.setCustomValidity = evt.detail.message;
+          this.errorMessage = evt.detail.message;
         } else if (evt.target === this.inputList[0]) {
           this.validity = evt.detail.validity;
-          this.setCustomValidity = evt.detail.message;
+          this.errorMessage = evt.detail.message;
         } else if (this.inputList.length > 1 && evt.target === this.inputList[1] && (this.inputList[0].validity === 'valid' || this.inputList[0].validity === undefined)) {
           this.validity = evt.detail.validity;
-          this.setCustomValidity = evt.detail.message;
+          this.errorMessage = evt.detail.message;
         }
       });
     });
@@ -663,10 +682,11 @@ export class AuroDatePicker extends LitElement {
         if (!this.value || !this.util.validDateStr(this.value)) {
           this.value = newDate;
         } else if (!this.valueEnd || !this.util.validDateStr(this.valueEnd)) {
-
           // verify the date is after this.value to insure we are setting a proper range
           if (new Date(newDate) >= new Date(this.value)) {
             this.valueEnd = newDate;
+          } else {
+            this.value = newDate;
           }
         } else {
           this.value = newDate;
@@ -699,6 +719,14 @@ export class AuroDatePicker extends LitElement {
     this.validation.reset(this);
   }
 
+  /**
+   * Validates value.
+   * @param {boolean} [force=false] - Whether to force validation.
+   */
+  validate(force = false) {
+    this.validation.validate(this, force);
+  }
+
   updated(changedProperties) {
     if (changedProperties.has('calendarFocusDate')) {
       this.handleFocusDateChange();
@@ -764,7 +792,7 @@ export class AuroDatePicker extends LitElement {
         }
       }
 
-      this.validation.validate(this);
+      this.validate();
     }
 
     if (changedProperties.has('valueEnd') && this.inputList[1]) {
@@ -794,7 +822,7 @@ export class AuroDatePicker extends LitElement {
         }
       }
 
-      this.validation.validate(this);
+      this.validate();
     }
 
     if (changedProperties.has('error')) {
@@ -802,7 +830,7 @@ export class AuroDatePicker extends LitElement {
       // This is done to prevent error icon from displaying on both inputs in range support
       const lastInput = this.inputList[this.inputList.length - 1];
 
-      if (this.error) {
+      if (this.hasAttribute('error')) {
         // Set the error attribute on the last input
         lastInput.setAttribute('error', this.getAttribute('error'));
       } else {
@@ -824,11 +852,14 @@ export class AuroDatePicker extends LitElement {
     // a later date than the current value date
     if (changedProperties.has('minDate')) {
       if (this.minDate) {
-        const minDateMonth = Number(this.minDate.charAt(1));
+        const minDateMonth = Number(this.minDate.split('/')[0]);
+        const minDateYear = Number(this.minDate.split('/')[2]);
 
         // This sets the visible month of the calendar to the minDate when the minDate is later
         // than the current visible date
-        if (minDateMonth > this.calendar.month) {
+        if (minDateYear > this.calendar.year) {
+          this.calendarRenderUtil.updateCentralDate(this, this.minDate);
+        } else if (minDateYear === this.calendar.year && minDateMonth > this.calendar.month) {
           this.calendarRenderUtil.updateCentralDate(this, this.minDate);
         }
 
@@ -849,6 +880,17 @@ export class AuroDatePicker extends LitElement {
     // This resets the datepicker when the maxDate is set to a new value that is
     // an earlier date than the current value date
     if (changedProperties.has('maxDate')) {
+      const maxDateMonth = Number(this.maxDate.split('/')[0]);
+      const maxDateYear = Number(this.maxDate.split('/')[2]);
+
+      // This sets the visible month of the calendar to the maxDate when the maxDate is earlier
+      // than the current visible date
+      if (maxDateYear < this.calendar.year) {
+        this.calendarRenderUtil.updateCentralDate(this, this.maxDate);
+      } else if (maxDateYear === this.calendar.year && maxDateMonth < this.calendar.month) {
+        this.calendarRenderUtil.updateCentralDate(this, this.maxDate);
+      }
+
       if (this.maxDate) {
         if (this.value) {
           if (new Date(this.maxDate).getTime() < new Date(this.value).getTime()) {
@@ -920,6 +962,8 @@ export class AuroDatePicker extends LitElement {
               noValidate
               .max="${this.maxDate}"
               .min="${this.minDate}"
+              setCustomValidity="${this.setCustomValidity}"
+              setCustomValidityCustomError="${this.setCustomValidityCustomError}"
               setCustomValidityValueMissing="${this.setCustomValidityValueMissing}"
               setCustomValidityRangeOverflow="${this.setCustomValidityRangeOverflow}"
               setCustomValidityRangeUnderflow="${this.setCustomValidityRangeUnderflow}"
@@ -937,6 +981,8 @@ export class AuroDatePicker extends LitElement {
                 noValidate
                 .max="${this.maxDate}"
                 .min="${this.minDate}"
+                setCustomValidity="${this.setCustomValidity}"
+                setCustomValidityCustomError="${this.setCustomValidityCustomError}"
                 setCustomValidityValueMissing="${this.setCustomValidityValueMissing}"
                 setCustomValidityRangeOverflow="${this.setCustomValidityRangeOverflow}"
                 setCustomValidityRangeUnderflow="${this.setCustomValidityRangeUnderflow}"
@@ -967,8 +1013,8 @@ export class AuroDatePicker extends LitElement {
               ? html`
                 <slot name="helpText"></slot>
               ` : html`
-                <p class="datepickerElement-helpText" id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
-                  ${this.setCustomValidity}
+                <p class="datepickerElement-helpText" role="alert" aria-live="assertive" part="helpText">
+                  ${this.errorMessage}
                 </p>`
             }
           </span>

package/components/datepicker/src/dropdownVersion.js

@@ -0,0 +1 @@
+export default '3.0.0';

package/components/datepicker/src/inputVersion.js

@@ -0,0 +1 @@
+export default '4.2.0';

package/components/datepicker/src/styles/color-cell-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`:host ::slotted([slot^=date_]){color:var(--ds-auro-calendar-cell-price-text-color)}:host ::slotted([slot^=date_][highlight]){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-success-default, #0b6f4d)}.day{border-color:var(--ds-auro-calendar-cell-border-color);background-color:var(--ds-auro-calendar-cell-container-color);color:var(--ds-auro-calendar-cell-text-color)}.day.selected{--ds-auro-calendar-border-color: var(--ds-color-border-ui-active-default, #225296);--ds-auro-calendar-cell-container-color: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-inverse, #ffffff);box-shadow:var(--ds-auro-calendar-boxshadow-color)}.day.selected:hover{--ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-calendar-cell-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:unset}.day.selected:not(:hover){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-primary-inverse, #ffffff)}.day:hover{--ds-auro-calendar-cell-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #2a2a2a)}.day.disabled{--ds-auro-calendar-cell-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #ffffff)}.day.inRange:before,.day.rangeDepartDate:before,.day.rangeReturnDate:before,.day.lastHoveredDate:before{background-color:var(--ds-auro-calendar-cell-in-range-color)}.day.sameDateTrip:before{--ds-auro-calendar-cell-in-range-color: transparent}:host([disabled]){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`;
+export default css`:host ::slotted([slot^=date_]){color:var(--ds-auro-calendar-cell-price-text-color)}:host ::slotted([slot^=date_][highlight]){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-success-default, #0b6f4d)}.day{border-color:var(--ds-auro-calendar-cell-border-color);background-color:var(--ds-auro-calendar-cell-container-color);color:var(--ds-auro-calendar-cell-text-color)}.day.selected{--ds-auro-calendar-border-color: var(--ds-color-border-ui-active-default, #225296);--ds-auro-calendar-cell-container-color: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-inverse, #ffffff);box-shadow:var(--ds-auro-calendar-boxshadow-color)}.day.selected:hover{--ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-calendar-cell-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:unset}.day.selected:not(:hover){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-primary-inverse, #ffffff)}.day:hover{--ds-auro-calendar-cell-container-color: var(--ds-color-brand-neutral-200, #e4e8ec);--ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #2a2a2a)}.day.disabled{--ds-auro-calendar-cell-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #ffffff)}.day.inRange:before,.day.rangeDepartDate:before,.day.rangeReturnDate:before,.day.lastHoveredDate:before{background-color:var(--ds-auro-calendar-cell-in-range-color)}.day.sameDateTrip:before{--ds-auro-calendar-cell-in-range-color: transparent}:host([disabled]){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`;

package/components/datepicker/src/styles/color-cell.css

@@ -26,7 +26,7 @@
   --ds-auro-calendar-cell-price-text-color: var(--ds-color-text-primary-inverse, #ffffff);
 }
 .day:hover {
-  --ds-auro-calendar-cell-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));
+  --ds-auro-calendar-cell-container-color: var(--ds-color-brand-neutral-200, #e4e8ec);
   --ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #2a2a2a);
 }
 .day.disabled {

package/components/datepicker/src/styles/color-cell.scss

@@ -43,7 +43,7 @@
   }
 
   &:hover {
-    --ds-auro-calendar-cell-container-color: var(--ds-color-container-ui-secondary-hover-default, #{$ds-color-container-ui-secondary-hover-default});
+    --ds-auro-calendar-cell-container-color: var(--ds-color-brand-neutral-200, #{$ds-color-brand-neutral-200});
     --ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
   }
 

package/components/dropdown/.turbo/turbo-build$colon$sass.log

@@ -1,8 +1,8 @@
 
-> @auro-formkit/auro-dropdown@3.0.0 build:sass
+> @aurodesignsystem/auro-dropdown@3.0.0 build:sass
 > sass --no-source-map --load-path=../../node_modules "./src/styles/:./src/styles/"
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -12,7 +12,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/bibColors.scss 10:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -22,7 +22,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/bibStyles.scss 10:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -32,7 +32,7 @@ More info and automated migrator: https://sass-lang.com/d/import
   ╵
     src/styles/color.scss 6:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -42,7 +42,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/style.scss 10:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -52,7 +52,7 @@ More info and automated migrator: https://sass-lang.com/d/import
    ╵
     src/styles/style.scss 11:9  root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 
@@ -63,7 +63,7 @@ More info and automated migrator: https://sass-lang.com/d/import
     @aurodesignsystem/webcorestylesheets/src/_breakpoints.scss 6:9  @import
     src/styles/style.scss 11:9                                      root stylesheet
 
-DEPRECATION WARNING: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
+DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
 
 More info and automated migrator: https://sass-lang.com/d/import
 

package/components/dropdown/.turbo/turbo-build$colon$version.log

@@ -1,5 +1,5 @@
 
-> @auro-formkit/auro-dropdown@3.0.0 build:version
+> @aurodesignsystem/auro-dropdown@3.0.0 build:version
 > node ./src/scripts/version.mjs
 
 Found package.json at: /home/runner/work/auro-formkit/auro-formkit/node_modules/@aurodesignsystem/auro-icon/package.json