@aurodesignsystem/auro-formkit 2.0.0-beta.5 → 2.0.0-beta.51

package/components/datepicker/node_modules/rollup-plugin-serve/index.d.ts

@@ -1,75 +0,0 @@
-import { Plugin } from 'rollup'
-import { IncomingHttpHeaders, OutgoingHttpHeaders, Server } from 'http'
-import { ServerOptions } from 'https'
-import { TypeMap } from 'mime'
-
-export interface RollupServeOptions {
-  /**
-   * Launch the browser after the first bundle is generated (default: `false`)
-   */
-  open?: boolean
-
-  /**
-   * Change the page that is opened when the browser is launched.
-   * Will not do anything if `open = false`.
-   * Remember to start with a slash, e.g. `'/different/page'`
-   */
-  openPage?: string
-
-  /**
-   * Show server address in console (default: `true`)
-   */
-  verbose?: boolean
-
-  /**
-   * Serve static files from the specified folder(s).
-   */
-  contentBase?: string | string[]
-
-  /**
-   * Set to `true` to return index.html (200) instead of error page (404)
-   * or path to fallback page
-   */
-  historyApiFallback?: boolean | string
-
-  /**
-   * Change the host of the server (default: `'localhost'`)
-   */
-  host?: string
-
-  /**
-   * Change the port that the server will listen on (default: `10001`)
-   */
-  port?: number | string
-
-  /**
-   * By default server will be served over HTTP (https: `false`). It can optionally be served over HTTPS.
-   */
-  https?: ServerOptions
-
-  /**
-   * Set custom response headers
-   */
-  headers?:
-    | IncomingHttpHeaders
-    | OutgoingHttpHeaders
-    | {
-        // i.e. Parameters<OutgoingMessage["setHeader"]>
-        [name: string]: number | string | ReadonlyArray<string>
-      }
-
-  /**
-   * Set custom mime types, usage https://github.com/broofa/mime#mimedefinetypemap-force--false
-   */
-  mimeTypes?: TypeMap
-
-  /**
-   * Execute function after server has begun listening
-   */
-  onListening?: (server: Server) => void
-}
-
-/**
- * Serve your rolled up bundle like webpack-dev-server
- */
-export default function serve(options?: RollupServeOptions | string): Plugin

package/components/datepicker/node_modules/rollup-plugin-serve/package.json

@@ -1,51 +0,0 @@
-{
-  "name": "rollup-plugin-serve",
-  "version": "3.0.0",
-  "description": "Serve your rolled up bundle",
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
-  "types": "index.d.ts",
-  "exports": {
-    "import": "./dist/index.mjs",
-    "default": "./dist/index.cjs"
-  },
-  "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -cw",
-    "lint": "standard --fix rollup.config.js src/**",
-    "prepare": "yarn lint && yarn build",
-    "test": "cd test && rollup -cw || cd .."
-  },
-  "keywords": [
-    "rollup",
-    "rollup-plugin",
-    "serve",
-    "dev-server",
-    "static"
-  ],
-  "license": "MIT",
-  "author": "Thomas Ghysels <info@thomasg.be>",
-  "homepage": "https://github.com/thgh/rollup-plugin-serve",
-  "bugs": {
-    "url": "https://github.com/thgh/rollup-plugin-serve/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/thgh/rollup-plugin-serve"
-  },
-  "files": [
-    "dist",
-    "index.d.ts"
-  ],
-  "type": "module",
-  "dependencies": {
-    "mime": "^4",
-    "opener": "1"
-  },
-  "devDependencies": {
-    "@rollup/plugin-buble": "^1.0.0",
-    "@types/node": "^20.10.1",
-    "rollup": "4",
-    "standard": "17"
-  }
-}

package/components/datepicker/package.json

@@ -1,79 +0,0 @@
-{
-  "name": "@auro-formkit/auro-datepicker",
-  "version": "3.2.0",
-  "description": "auro-datepicker HTML custom element",
-  "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "license": "Apache-2.0",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/AlaskaAirlines/auro-datepicker"
-  },
-  "dependencies": {
-    "@alaskaairux/icons": "^4.44.1",
-    "@auro-formkit/auro-dropdown": "*",
-    "@auro-formkit/auro-input": "*",
-    "@auro-formkit/form-validation": "*",
-    "@aurodesignsystem/auro-popover": "^4.1.2",
-    "@material/mwc-icon-button": "^0.27.0",
-    "@material/mwc-list": "^0.27.0",
-    "@material/mwc-menu": "^0.27.0",
-    "chalk": "^5.3.0",
-    "date-fns": "^4.1.0",
-    "lit": "^3.2.1",
-    "wc-range-datepicker": "^1.3.0"
-  },
-  "peerDependencies": {
-    "@aurodesignsystem/design-tokens": "^4.12.1",
-    "@aurodesignsystem/webcorestylesheets": "^5.1.2"
-  },
-  "devDependencies": {
-    "@auro-formkit/build-tools": "*",
-    "@auro-formkit/config": "*",
-    "@auro-formkit/typescript": "*",
-    "@aurodesignsystem/design-tokens": "^4.12.1",
-    "@aurodesignsystem/webcorestylesheets": "^5.1.2",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "compression": "^1.7.4",
-    "copyfiles": "^2.4.1",
-    "rollup": "^4.24.3",
-    "rollup-plugin-serve": "^3.0.0",
-    "wc-sass-render": "^1.4.0",
-    "web-component-analyzer": "^2.0.0"
-  },
-  "overrides": {
-    "wc-sass-render": {
-      "sass": "$sass"
-    }
-  },
-  "nodemonConfig": {
-    "ignore": [
-      "*-css.js",
-      "*.css"
-    ]
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "build": "run-s build:version build:sass bundler build:docs types",
-    "build:version": "node ./src/scripts/version.mjs",
-    "build:sass": "sass --no-source-map --load-path=../../node_modules \"./src/styles/:./src/styles/\"",
-    "build:watch": "nodemon -e scss,js --watch src --ignore \"*.css\" --ignore \"*-css.js\" --exec \"npm run build\"",
-    "bundler": "rollup -c node:@auro-formkit/config/rollup",
-    "build:docs": "wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component datepicker",
-    "clean": "rm -rf dist build",
-    "dev": "web-dev-server",
-    "postCss:component": "node ../../node_modules/@aurodesignsystem/auro-library/scripts/build/postCss.mjs",
-    "sass:render": "sass-render --load-path=../../node_modules 'src/**/*.css' -t ../../node_modules/@aurodesignsystem/auro-library/scripts/build/staticStyles-template.js",
-    "serve": "web-dev-server",
-    "test": "wtr --config \"../../packages/config/src/web-test-runner.config.mjs\" --coverage",
-    "test:watch": "wtr --config \"../../packages/config/src/web-test-runner.config.mjs\"  --watch",
-    "types": "tsc --project tsconfig.json",
-    "lint": "npm-run-all scssLint esLint",
-    "scssLint": "stylelint \"./src/**/*.scss\"",
-    "esLint": "eslint \"./src/**/*.js\""
-  }
-}

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

@@ -1,381 +0,0 @@
-import { LitElement } from "lit";
-import { html } from 'lit/static-html.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { format, startOfDay } from 'date-fns';
-import { enUS } from 'date-fns/locale';
-
-import styleCss from './styles/style-auro-calendar-cell-css.js';
-import colorCss from './styles/color-cell-css.js';
-import tokensCss from './styles/tokens-css.js';
-
-import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
-
-import { AuroPopover } from '@aurodesignsystem/auro-popover/src/auro-popover.js';
-import popoverVersion from './popoverVersion.js';
-
-import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
-
-/* eslint-disable max-lines, no-underscore-dangle, no-magic-numbers, no-underscore-dangle, max-params, no-void, init-declarations, no-extra-parens, arrow-parens, max-lines, line-comment-position, no-inline-comments, lit/binding-positions, lit/no-invalid-html */
-
-export class AuroCalendarCell extends LitElement {
-  constructor() {
-    super();
-
-    this.day = null;
-    this.selected = false;
-    this.hovered = false;
-    this.dateTo = null;
-    this.dateFrom = null;
-    this.month = null;
-    this.min = null;
-    this.max = null;
-    this.disabled = false;
-    this.disabledDays = [];
-    this.hoveredDate = null;
-    this.isCurrentDate = false;
-    this._locale = null;
-    this.dateStr = null;
-    this.renderForDateSlot = false; // When false, the numerical date will render vertically centered. When true, the date will render off-center to the top and leave room below for the slot content.
-
-    this.runtimeUtils = new AuroLibraryRuntimeUtils();
-
-    /**
-     * Generate unique names for dependency components.
-     */
-    const versioning = new AuroDependencyVersioning();
-    this.popoverTag = versioning.generateTag('auro-popover', popoverVersion, AuroPopover);
-  }
-
-  // This function is to define props used within the scope of this component
-  // Be sure to review  https://lit-element.polymer-project.org/guide/properties#reflected-attributes
-  // to understand how to use reflected attributes with your property settings.
-  static get properties() {
-    return {
-      // ...super.properties,
-      day:           { type: Object },
-      selected:      { type: Boolean },
-      hovered:       { type: Boolean },
-      dateTo:        { type: String },
-      dateFrom:      { type: String },
-      month:         { type: String },
-      min:           { type: Number },
-      max:           { type: Number },
-      disabled:      { type: Boolean },
-      disabledDays:  { type: Array },
-      hoveredDate:   { type: String },
-      isCurrentDate: { type: Boolean },
-      locale:        { type: Object },
-      dateStr:       { type: String },
-      renderForDateSlot: { type: Boolean }
-    };
-  }
-
-  get locale() {
-    return this._locale ? this._locale : enUS;
-  }
-
-  set locale(value) {
-    const oldValue = this._locale;
-    this._locale = value;
-    this.requestUpdate('locale', oldValue);
-  }
-
-  static get styles() {
-    return [
-      // ...super.styles,
-      styleCss,
-      colorCss,
-      tokensCss
-    ];
-  }
-
-  /**
-   * Handles selected and hovered states of the calendar cell when the date changes.
-   * @private
-   * @param {Number} dateFrom - Depart date.
-   * @param {Number} dateTo - Return date.
-   * @param {Number} hoveredDate - Hovered date.
-   * @param {Object} day - An object containing the dateFrom and day of month values.
-   * @returns {void}
-   */
-  dateChanged(dateFrom, dateTo, hoveredDate, day) {
-    this.selected = false;
-    this.hovered = false;
-
-    const parsedDateFrom = parseInt(dateFrom, 10);
-    const parsedDateTo = parseInt(dateTo, 10);
-
-    if (day) {
-      const departTimestamp = startOfDay(parsedDateFrom * 1000) / 1000;
-      const returnTimestamp = startOfDay(parsedDateTo * 1000) / 1000;
-
-      if (day.date === departTimestamp || day.date === returnTimestamp) {
-        this.selected = true;
-      }
-
-      if (((hoveredDate === day.date || day.date < hoveredDate) && day.date > parsedDateFrom && !parsedDateTo && !Number.isNaN(parsedDateFrom) && parsedDateFrom !== undefined && !this.selected) || (day.date > parsedDateFrom && day.date < parsedDateTo)) {
-        this.hovered = true;
-      }
-    }
-  }
-
-  /**
-   * Handles user click events and calls datepicker to update the value(s).
-   * @private
-   * @returns {void}
-   */
-  handleTap() {
-    if (!this.disabled) {
-      this.datepicker.handleCellClick(this.day.date);
-    }
-  }
-
-  /**
-   * Handles user hover events and dispatches a custom event.
-   * @private
-   * @returns {void}
-   */
-  handleHover() {
-    this.hovered = true;
-
-    let _a;
-    this.dispatchEvent(new CustomEvent('date-is-hovered', {
-      detail: { date: (_a = this.day) === null || _a === void 0 ? void 0 : _a.date },
-    }));
-  }
-
-  /**
-   * Checks if the current date is a valid date depending on the min and max values.
-   * @private
-   * @param {Object} day - An object containing the dateFrom and day of month values.
-   * @param {Number} min - The minimum date value.
-   * @param {Number} max - The maximum date value.
-   * @param {Array} disabledDays - An array of disabled dates.
-   * @returns {Boolean} - True if the date is disabled.
-   */
-  isEnabled(day, min, max, disabledDays) {
-    this.removeAttribute('disabled');
-
-    if (disabledDays && day && day.date) {
-      if (day.date < min || day.date > max || disabledDays.findIndex(disabledDay => parseInt(disabledDay, 10) === day.date) !== -1) {
-        this.setAttribute('disabled', true);
-        return true;
-      }
-    }
-    return false;
-  }
-
-  /**
-   * Checks if the current date is the depart date.
-   * @private
-   * @param {Object} day - An object containing the dateFrom and day of month values.
-   * @param {Number} dateFrom - Depart date.
-   * @returns {Boolean} True if the date is the depart date.
-   */
-  isDepartDate(day, dateFrom) {
-    const parsedDateFrom = parseInt(dateFrom, 10);
-    const departTimestamp = startOfDay(parsedDateFrom * 1000) / 1000;
-
-    return this.selected && day.date === departTimestamp;
-  }
-
-  /**
-   * Checks if the current date is the return date.
-   * @private
-   * @param {Object} day - An object containing the dateFrom and day of month values.
-   * @param {Number} dateFrom - Depart date.
-   * @param {Number} dateTo - Return date.
-   * @returns {Boolean} True if the date is the return date.
-   */
-  isReturnDate(day, dateFrom, dateTo) {
-    const parsedDateTo = parseInt(dateTo, 10);
-    const returnTimestamp = startOfDay(parsedDateTo * 1000) / 1000;
-
-    return this.selected && day.date === returnTimestamp && dateFrom;
-  }
-
-  /**
-   * Checks if the current date is between dateFrom and dateTo.
-   * @private
-   * @param {Object} day - An object containing the dateFrom and day of month values.
-   * @param {Number} dateFrom - Depart date.
-   * @param {Number} dateTo - Return date.
-   * @returns {Boolean} True if the current date is between dateFrom and dateTo.
-   */
-  isInRange(day, dateFrom, dateTo) {
-
-    /**
-     * Cell is in not range if any of the following are true:
-     * - Datepicker does not support range selection.
-     * - First date has not been selected.
-     * - Cell date is before or equal first date.
-     * - Both range dates selected and current cell is after the second date.
-     */
-    if (!this.datepicker.hasAttribute('range') || (!dateFrom || day.date <= dateFrom) || (dateTo && day.date >= dateTo)) {
-      return false;
-    }
-
-    return true;
-  }
-
-  /**
-   * Determines the hovered date appearing latest in the calendar.
-   * @private
-   * @param {Object} day - An object containing the dateFrom and day of month values.
-   * @param {Number} dateFrom - Depart date.
-   * @param {Number} dateTo - Return date.
-   * @param {Number} hoveredDate - Hovered date.
-   * @returns {Boolean} True if the hovered date is the latest hovered date in the calendar.
-   */
-  isLastHoveredDate(day, dateFrom, dateTo, hoveredDate) {
-    return dateFrom && hoveredDate > dateFrom && day.date === hoveredDate && !dateTo;
-  }
-
-  /**
-   * Determines the title of the auro-calendar-cell.
-   * @private
-   * @param {Number} date - The date of the auro-calendar-cell.
-   * @returns {String} The title of the auro-calendar-cell in the user's locale.
-   */
-  getTitle(date) {
-    if (date === undefined) {
-      return '';
-    }
-    return format(date * 1000, 'PPPP', {
-      locale: this.locale,
-    });
-  }
-
-  /**
-   * Gets the name of the date slot.
-   * @private
-   * @returns {void}
-   */
-  setDateSlotName() {
-    const date = new Date(this.day.date * 1000);
-
-    let month = date.getMonth() + 1;
-    let day = date.getDate();
-
-    if (month.toString().length === 1) {
-      month = `0${month}`;
-    }
-
-    if (day.toString().length === 1) {
-      day = `0${day}`;
-    }
-
-    const year = date.getFullYear();
-
-    this.dateStr = `${month}_${day}_${year}`;
-  }
-
-  /**
-   * Remove existing cell slot content and clone any current slot content from the root `auro-datepicker` which matches this cells date.
-   * @private
-   * @returns {void}
-   */
-  handleSlotContent() {
-    try {
-      // Get the slot names for this cell
-      const dateSlotName = `date_${this.dateStr}`;
-      const popoverSlotName = `popover_${this.dateStr}`;
-
-      // Remove any existing slot content from this cell
-      const existingSlotContent = this.querySelectorAll(`[slot]`);
-
-      existingSlotContent.forEach((slot) => {
-        slot.remove();
-      });
-
-      // // Get any slots for this cell from the datepicker
-      const dateSlotContent = this.datepicker.querySelector(`[slot="${dateSlotName}"]`);
-      const popoverSlotContent = this.datepicker.querySelector(`[slot="${popoverSlotName}"]`);
-
-      // Insert any fetched slot content into this cell
-      if (dateSlotContent) {
-        this.appendChild(dateSlotContent.cloneNode(true));
-        this.setAttribute('renderForDateSlot', true);
-      } else {
-        this.removeAttribute('renderForDateSlot');
-      }
-
-      if (popoverSlotContent) {
-        this.appendChild(popoverSlotContent.cloneNode(true));
-        this.auroPopover.removeAttribute('disabled');
-      } else {
-        this.auroPopover.setAttribute('disabled', true);
-      }
-    } catch (err) { // eslint-disable-line no-unused-vars
-      // Error handling goes here
-    }
-  }
-
-  firstUpdated() {
-    const calendarMonth = this.runtimeUtils.closestElement('auro-calendar-month', this);
-    const calendar = this.runtimeUtils.closestElement('auro-calendar', calendarMonth);
-
-    if (!calendar) {
-      setTimeout(() => this.firstUpdated(), 0);
-      return;
-    }
-    this.datepicker = calendar.datepicker;
-    this.datepicker.addEventListener('auroDatePicker-newSlotContent', () => {
-      this.handleSlotContent();
-    });
-
-    this.auroPopover = this.shadowRoot.querySelector(this.popoverTag._$litStatic$);
-
-    this.auroPopover.boundary = calendarMonth;
-  }
-
-  updated(properties) {
-    if (properties.has('dateFrom') || properties.has('dateTo') || properties.has('hoveredDate') || properties.has('day')) {
-      this.dateChanged(this.dateFrom, this.dateTo, this.hoveredDate, this.day);
-    }
-
-    this.setDateSlotName();
-    this.handleSlotContent();
-  }
-
-  render() {
-    const buttonClasses = {
-      'day': true,
-      'currentDate': this.currentDate,
-      'selected': this.selected,
-      'inRange': this.hovered && this.isInRange(this.day, this.dateFrom, this.dateTo),
-      'lastHoveredDate': this.isLastHoveredDate(this.day, this.dateFrom, this.dateTo, this.hoveredDate) && this.datepicker && this.datepicker.hasAttribute('range'),
-      'disabled': this.isEnabled(this.day, this.min, this.max, this.disabledDays),
-      'rangeDepartDate': this.isDepartDate(this.day, this.dateFrom) && (this.hoveredDate > this.dateFrom || this.dateTo),
-      'rangeReturnDate': this.isReturnDate(this.day, this.dateFrom, this.dateTo),
-      'sameDateTrip': this.dateFrom === this.dateTo
-    };
-
-    let _a, _b;
-    return html`
-      <${this.popoverTag}>
-        <slot name="popover_${this.dateStr}"></slot>
-        <button
-          slot="trigger"
-          @click="${this.handleTap}"
-          @mouseover="${this.handleHover}"
-          @focus="${this.handleHover}"
-          class="${classMap(buttonClasses)}"
-          ?disabled="${this.disabled}"
-          title="${this.getTitle((_a = this.day) === null || _a === void 0 ? void 0 : _a.date)}"
-          tabindex="-1">
-          <div class="buttonWrapper">
-            <div class="currentDayMarker">${(_b = this.day) === null || _b === void 0 ? void 0 : _b.title}</div>
-            <div class="dateSlot" part="dateSlot">
-              <slot name="date_${this.dateStr}"></slot>
-            </div>
-          </div>
-        </button>
-      </${this.popoverTag}>
-    `;
-  }
-}
-
-if (!customElements.get('auro-calendar-cell')) {
-  customElements.define('auro-calendar-cell', AuroCalendarCell);
-}