@aurodesignsystem/auro-formkit 1.6.0-beta.4

package/components/datepicker/src/vendor/wc-range-datepicker/range-datepicker-cell.js

@@ -0,0 +1,211 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { property } from 'lit/decorators.js';
+import { format, getTime, startOfDay } from 'date-fns';
+import { enUS } from 'date-fns/locale';
+
+/* eslint-disable prefer-rest-params, no-void, no-magic-numbers, no-underscore-dangle, init-declarations, no-extra-parens, max-params */
+
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+class RangeDatepickerCell extends LitElement {
+  constructor() {
+    super(...arguments);
+    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;
+
+  }
+
+  get locale() {
+    return this._locale ? this._locale : enUS;
+  }
+
+  set locale(value) {
+    const oldValue = this._locale;
+    this._locale = value;
+    this.requestUpdate('locale', oldValue);
+  }
+
+  render() {
+    let _a, _b;
+    return html`
+    <button
+      @click="${this.handleTap}"
+      @mouseover="${this.handleHover}"
+      @focus="${this.handleHover}"
+      class="day ${this.isCurrentDate ? 'currentDate' : ''} ${this.isSelected(this.selected)} ${this.isHovered(this.hovered)} ${this.isEnabled(this.day, this.min, this.max, this.disabledDays)}"
+      ?disabled="${this.disabled}"
+      title="${this.getTitle((_a = this.day) === null || _a === void 0 ? void 0 : _a.date)}">
+      <div class="currentDayMarker">${(_b = this.day) === null || _b === void 0 ? void 0 : _b.title}</div>
+    </button>
+  `;
+  }
+
+  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);
+    }
+  }
+
+  dateChanged(dateFrom, dateTo, hoveredDate, day) {
+    this.selected = false;
+    this.hovered = false;
+    const parsedDateFrom = parseInt(dateFrom, 10);
+    const parsedDateTo = parseInt(dateTo, 10);
+    if (day) {
+      if (getTime(startOfDay(parsedDateTo * 1000)) / 1000 === day.date ||
+        getTime(startOfDay(parsedDateFrom * 1000)) / 1000 === day.date) {
+        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;
+      }
+    }
+  }
+
+  handleTap() {
+    let _a;
+    if (!this.disabled) {
+      this.dispatchEvent(new CustomEvent('date-is-selected', {
+        detail: { date: (_a = this.day) === null || _a === void 0 ? void 0 : _a.date },
+      }));
+    }
+  }
+
+  handleHover() {
+    let _a;
+    this.dispatchEvent(new CustomEvent('date-is-hovered', {
+      detail: { date: (_a = this.day) === null || _a === void 0 ? void 0 : _a.date },
+    }));
+  }
+
+  isSelected(selected) {
+    return selected ? 'selected' : '';
+  }
+
+  isHovered(hovered) {
+    return hovered ? 'hovered' : '';
+  }
+
+  isEnabled(day, min, max, disabledDays) {
+    this.disabled = false;
+    if (disabledDays && day && day.date) {
+      if (day.date < min ||
+        day.date > max ||
+        disabledDays.findIndex((disabledDay) => parseInt(disabledDay, 10) === day.date) !== -1) {
+        this.disabled = true;
+        return 'disabled';
+      }
+    }
+    return '';
+  }
+
+  getTitle(date) {
+    if (date === undefined) {
+      return '';
+    }
+    return format(date * 1000, 'PPPP', {
+      locale: this.locale,
+    });
+  }
+}
+RangeDatepickerCell.styles = css`
+  :host {
+    display: block;
+  }
+
+  .day {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    height: 38px;
+    width: 38px;
+    margin: 0;
+    padding: 0;
+    color: var(--wc-datepicker-cell-text);
+
+    border: none;
+    outline: none;
+    background-color: transparent;
+  }
+
+  .day:focus {
+    outline: 1px solid
+    var(--wc-datepicker-cell-hovered, rgba(0, 150, 136, 0.5));
+  }
+
+  .day:not(.disabled):hover {
+    background: var(--wc-datepicker-cell-hover, #e4e7e7);
+    cursor: pointer;
+  }
+
+  .day.hovered {
+    background: var(
+    --wc-datepicker-cell-hovered,
+    rgba(0, 150, 136, 0.5)
+    ) !important;
+    color: var(--wc-datepicker-cell-hovered-text, white);
+  }
+
+  .day.selected {
+    background: var(
+    --wc-datepicker-cell-selected,
+    rgb(0, 150, 136)
+    ) !important;
+    color: var(--wc-datepicker-cell-selected-text, white);
+  }
+
+  .day.currentDate .currentDayMarker {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+
+    width: 80%;
+    height: 80%;
+    font-weight: var(--wc-current-day-font-weight, bold);
+    border-radius: 50%;
+    background-color: var(--wc-current-day-color);
+    color: var(--wc-current-day-color-text);
+  }
+
+  .day.disabled {
+    opacity: 0.4;
+  }
+  `;
+__decorate([property({ type: Object })], RangeDatepickerCell.prototype, "day", void 0);
+__decorate([property({ type: Boolean })], RangeDatepickerCell.prototype, "selected", void 0);
+__decorate([property({ type: Boolean })], RangeDatepickerCell.prototype, "hovered", void 0);
+__decorate([property({ type: String })], RangeDatepickerCell.prototype, "dateTo", void 0);
+__decorate([property({ type: String })], RangeDatepickerCell.prototype, "dateFrom", void 0);
+__decorate([property({ type: String })], RangeDatepickerCell.prototype, "month", void 0);
+__decorate([property({ type: Number })], RangeDatepickerCell.prototype, "min", void 0);
+__decorate([property({ type: Number })], RangeDatepickerCell.prototype, "max", void 0);
+__decorate([property({ type: Boolean })], RangeDatepickerCell.prototype, "disabled", void 0);
+__decorate([property({ type: Array })], RangeDatepickerCell.prototype, "disabledDays", void 0);
+__decorate([property({ type: String })], RangeDatepickerCell.prototype, "hoveredDate", void 0);
+__decorate([property({ type: Boolean })], RangeDatepickerCell.prototype, "isCurrentDate", void 0);
+__decorate([property({ type: Object })], RangeDatepickerCell.prototype, "locale", null);
+AuroLibraryRuntimeUtils.prototype.registerComponent('wc-range-datepicker-cell', RangeDatepickerCell);

package/components/datepicker/src/vendor/wc-range-datepicker/range-datepicker.js

@@ -0,0 +1,254 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { getMonth, getYear } from 'date-fns';
+import './range-datepicker-calendar.js';
+
+/* eslint-disable no-underscore-dangle, no-magic-numbers, no-underscore-dangle, no-void, init-declarations, no-extra-parens, no-unused-expressions */
+
+export class RangeDatepicker extends LitElement {
+  constructor() {
+    super();
+
+    /**
+     * Array of disabled days. Format is Unix timestamp.
+     */
+    this.disabledDays = [];
+
+    /**
+     * Display a select year control.
+     */
+    this.enableYearChange = false;
+
+    /**
+     * Force display of only one month.
+     */
+    this.forceNarrow = false;
+
+    /**
+     * Set locale of the calendar.
+     */
+    this.locale = null;
+
+    /**
+     * Max date. Format is Unix timestamp.
+     */
+    this.max = '8640000000000';
+
+    /**
+     * Minimal date. Format is Unix timestamp.
+     */
+    this.min = '-8640000000000';
+
+    /**
+     * If true only one date can be selected.
+     */
+    this.noRange = false;
+    this.dateFrom = null;
+    this.dateTo = null;
+    this.hoveredDate = null;
+    this.monthPlus = null;
+    this.yearPlus = null;
+    this.narrow = false;
+    const now = new Date();
+    this.month = getMonth(now) + 1;
+    this.year = getYear(now);
+    this.monthChanged(this.month, this.year);
+  }
+
+  render() {
+    return this.isNarrow(this.forceNarrow, this.narrow)
+      ? this.renderNarrow()
+      : this.renderNormal();
+  }
+
+  renderNormal() {
+    return html`
+    <div id="container">
+    <wc-range-datepicker-calendar
+      id="firstDatePicker"
+      .disabledDays="${this.disabledDays}"
+      min="${this.min}"
+      max="${this.max}"
+      ?enableYearChange="${this.enableYearChange}"
+      ?prev="${true}"
+      ?noRange="${this.noRange}"
+      .hoveredDate="${this.hoveredDate}"
+      .dateTo="${this.dateTo}"
+      .dateFrom="${this.dateFrom}"
+      .locale="${this.locale}"
+      month="${this.month}"
+      year="${this.year}"
+      @prev-month="${this.handlePrevMonth}"
+      @hovered-date-changed="${this.hoveredDateChanged}"
+      @date-from-changed="${this.dateFromChanged}"
+      @date-to-changed="${this.dateToChanged}"
+    >
+    </wc-range-datepicker-calendar>
+    <wc-range-datepicker-calendar
+      .disabledDays="${this.disabledDays}"
+      min="${this.min}"
+      max="${this.max}"
+      ?enableYearChange="${this.enableYearChange}"
+      ?next="${true}"
+      ?noRange="${this.noRange}"
+      .hoveredDate="${this.hoveredDate}"
+      .dateTo="${this.dateTo}"
+      .dateFrom="${this.dateFrom}"
+      .locale="${this.locale}"
+      month="${this.monthPlus}"
+      year="${this.yearPlus}"
+      @next-month="${this.handleNextMonth}"
+      @hovered-date-changed="${this.hoveredDateChanged}"
+      @date-from-changed="${this.dateFromChanged}"
+      @date-to-changed="${this.dateToChanged}"
+    >
+    </wc-range-datepicker-calendar>
+    </div>
+  `;
+  }
+
+  renderNarrow() {
+    return html`
+    <wc-range-datepicker-calendar
+    .disabledDays="${this.disabledDays}"
+    min="${this.min}"
+    max="${this.max}"
+    ?enableYearChange="${this.enableYearChange}"
+    ?noRange="${this.noRange}"
+    ?narrow="${this.isNarrow(this.forceNarrow, this.narrow)}"
+    .hoveredDate="${this.hoveredDate}"
+    .dateTo="${this.dateTo}"
+    .dateFrom="${this.dateFrom}"
+    .locale="${this.locale}"
+    ?prev="${true}"
+    ?next="${true}"
+    month="${this.monthPlus}"
+    year="${this.yearPlus}"
+    @hovered-date-changed="${this.hoveredDateChanged}"
+    @date-from-changed="${this.dateFromChanged}"
+    @date-to-changed="${this.dateToChanged}"
+    >
+    </wc-range-datepicker-calendar>
+  `;
+  }
+
+  firstUpdated() {
+    const mql = window.matchMedia('(max-width: 650px)');
+    mql.addListener((mqlEvent) => this.queryMatchesChanged(mqlEvent));
+    this.queryMatchesChanged(mql);
+  }
+
+  updated(properties) {
+    if (properties.has('month') || properties.has('year')) {
+      this.monthChanged(this.month, this.year);
+    }
+    if (properties.has('noRange')) {
+      this.noRangeChanged(this.noRange, properties.get('noRange'));
+    }
+    if (properties.has('narrow')) {
+      this.dispatchEvent(new CustomEvent('narrow-changed', { detail: { value: this.narrow } }));
+    }
+    if (properties.has('locale')) {
+      this.localeChanged();
+    }
+  }
+
+  isNarrow(forceNarrow, narrow) {
+    return forceNarrow || narrow;
+  }
+
+  queryMatchesChanged(mql) {
+    this.narrow = mql.matches;
+    this.requestUpdate();
+  }
+
+  handlePrevMonth() {
+    let _a;
+    if (!this.enableYearChange) {
+      const calendar = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('wc-range-datepicker-calendar[next]');
+      calendar === null || calendar === void 0 ? void 0 : calendar.handlePrevMonth();
+    }
+  }
+
+  handleNextMonth() {
+    let _a;
+    if (!this.enableYearChange) {
+      const calendar = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('wc-range-datepicker-calendar[prev]');
+      calendar === null || calendar === void 0 ? void 0 : calendar.handleNextMonth();
+    }
+  }
+
+  hoveredDateChanged(event) {
+    this.hoveredDate = event.detail.value;
+  }
+
+  monthChanged(month, year) {
+    if (year && month) {
+      this.monthPlus = (month % 12) + 1;
+      if (this.monthPlus === 1) {
+        this.yearPlus = year + 1;
+      } else {
+        this.yearPlus = year;
+      }
+    }
+  }
+
+  noRangeChanged(isNoRange, wasNoRange) {
+    if (!wasNoRange && isNoRange) {
+      this.dateTo = null;
+      this.hoveredDate = null;
+    }
+  }
+
+  localeChanged() {
+    if (!this.month) {
+      this.month = getMonth(new Date());
+    }
+    if (!this.year) {
+      this.year = getYear(new Date());
+    }
+  }
+
+  dateToChanged(event) {
+    this.dateTo = event.detail.value;
+    this.dispatchEvent(new CustomEvent('date-to-changed', { detail: { value: event.detail.value } }));
+  }
+
+  dateFromChanged(event) {
+    this.dateFrom = event.detail.value;
+    this.dispatchEvent(new CustomEvent('date-from-changed', {
+      detail: { value: event.detail.value },
+    }));
+  }
+}
+RangeDatepicker.styles = css`
+  :host {
+    display: block;
+    position: relative;
+  }
+
+  #container {
+    display: flex;
+    flex-direction: row;
+  }
+
+  #firstDatePicker {
+    margin-right: 16px;
+  }
+  `;
+__decorate([property({ type: Array })], RangeDatepicker.prototype, "disabledDays", void 0);
+__decorate([property({ type: Boolean })], RangeDatepicker.prototype, "enableYearChange", void 0);
+__decorate([property({ type: Boolean })], RangeDatepicker.prototype, "forceNarrow", void 0);
+__decorate([property({ type: Object })], RangeDatepicker.prototype, "locale", void 0);
+__decorate([property({ type: String })], RangeDatepicker.prototype, "max", void 0);
+__decorate([property({ type: String })], RangeDatepicker.prototype, "min", void 0);
+__decorate([property({ type: Number })], RangeDatepicker.prototype, "month", void 0);
+__decorate([property({ type: Boolean })], RangeDatepicker.prototype, "noRange", void 0);
+__decorate([property({ type: Number })], RangeDatepicker.prototype, "year", void 0);
+__decorate([property({ type: String })], RangeDatepicker.prototype, "dateFrom", void 0);
+__decorate([property({ type: String })], RangeDatepicker.prototype, "dateTo", void 0);
+__decorate([property({ type: String })], RangeDatepicker.prototype, "hoveredDate", void 0);
+__decorate([property({ type: Number })], RangeDatepicker.prototype, "monthPlus", void 0);
+__decorate([property({ type: Number })], RangeDatepicker.prototype, "yearPlus", void 0);
+__decorate([property({ type: Boolean })], RangeDatepicker.prototype, "narrow", void 0);

package/components/dropdown/.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@auro-formkit/config/stylelint"
+}

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

@@ -0,0 +1,75 @@
+
+> @auro-formkit/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.
+
+More info and automated migrator: https://sass-lang.com/d/import
+
+   ╷
+10 │ @import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   ╵
+    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.
+
+More info and automated migrator: https://sass-lang.com/d/import
+
+   ╷
+10 │ @import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   ╵
+    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.
+
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+6 │ @import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  ╵
+    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.
+
+More info and automated migrator: https://sass-lang.com/d/import
+
+   ╷
+10 │ @import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
+   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   ╵
+    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.
+
+More info and automated migrator: https://sass-lang.com/d/import
+
+   ╷
+11 │ @import '@aurodesignsystem/webcorestylesheets/src/breakpoints';
+   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   ╵
+    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.
+
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+6 │ @import './libSupport/deprecated';
+  │         ^^^^^^^^^^^^^^^^^^^^^^^^^
+  ╵
+    @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.
+
+More info and automated migrator: https://sass-lang.com/d/import
+
+  ╷
+1 │ @import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  ╵
+    src/styles/tokens.scss 1:9  root stylesheet
+

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

@@ -0,0 +1,7 @@
+
+> @auro-formkit/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
+Writing version file to: ./src/iconVersion.js
+Successfully wrote version file for @aurodesignsystem/auro-icon