@ember-eui/core 9.0.1 → 10.0.1

package/dist/components/eui-super-date-picker/date-popover/datetime-picker.js

@@ -1,6 +1,3 @@
-import { _ as _applyDecoratedDescriptor, a as _initializerDefineProperty, b as _defineProperty } from '../../../_rollupPluginBabelHelpers-9wjJaosZ.js';
-import { setComponentTemplate } from '@ember/component';
-import { precompileTemplate } from '@ember/template-compilation';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { helper } from '@ember/component/helper';
@@ -14,185 +11,54 @@ import EuiFlexItem from '../../eui-flex-item.js';
 import EuiFormControlLayout from '../../eui-form-control-layout.js';
 import EuiIcon from '../../eui-icon.js';
 import EuiSelect from '../../eui-select.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime';
 
-var _class, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7;
-const isSameDayHelper = helper(function ([year, month, day, selectedDate]) {
-  if (!selectedDate) {
+const isSameDayHelper = helper(function ([year1, month1, day1, selectedDate1]) {
+  if (!selectedDate1) {
     return false;
   }
-  return selectedDate.year() === year && selectedDate.month() === month && selectedDate.date() === day;
+  return selectedDate1.year() === year1 && selectedDate1.month() === month1 && selectedDate1.date() === day1;
 });
-let DatetimePicker = setComponentTemplate(precompileTemplate(`
-    <div class="euiDatePicker euiDatePicker--inline">
-      <EuiFormControlLayout>
-        <div class="react-datepicker">
-          <button
-            type="button"
-            class="react-datepicker__navigation react-datepicker__navigation--previous"
-            aria-label="Previous month"
-            {{on "click" this.decreaseMonth}}
-          >
-            <EuiIcon @iconClasses="euiButtonIcon__icon" @type="arrowLeft" />
-          </button>
-          <button
-            type="button"
-            class="react-datepicker__navigation react-datepicker__navigation--next"
-            aria-label="Next month"
-            {{on "click" this.increaseMonth}}
-          >
-            <EuiIcon
-              @iconClasses="euiButtonIcon__icon {{@iconClasses}}"
-              @type="arrowRight"
-            />
-          </button>
-          <div class="react-datepicker__month-container">
-            <div class="react-datepicker__header">
-              <div
-                class="react-datepicker__header__dropdown react-datepicker__header__dropdown--scroll"
-              >
-                <div
-                  class="react-datepicker__month-dropdown-container react-datepicker__month-dropdown-container--scroll"
-                >
-                  {{!template-lint-disable}}
-                  <div
-                    class="react-datepicker__month-read-view"
-                    style="padding: 0;"
-                  >
-                    <EuiFlexItem @grow={{1}}>
-                      <EuiSelect
-                        @compressed={{true}}
-                        @value={{this.month}}
-                        @options={{this.monthNames}}
-                        {{on "change" (pick "target.value" this.setMonth)}}
-                      />
-                    </EuiFlexItem>
-                  </div>
-                </div>
-                <div
-                  class="react-datepicker__year-dropdown-container react-datepicker__year-dropdown-container--scroll"
-                >
-                  {{!template-lint-disable}}
-                  <div
-                    class="react-datepicker__year-read-view"
-                    style="padding: 0;"
-                  >
-                    <EuiFlexItem @grow={{1}}>
-                      <EuiSelect
-                        @compressed={{true}}
-                        @value={{this.year}}
-                        @options={{this.years}}
-                        {{on "change" (pick "target.value" this.setYear)}}
-                      />
-                    </EuiFlexItem>
-                  </div>
-                </div>
-              </div>
-              <div class="react-datepicker__day-names">
-                <div class="react-datepicker__day-name">Su</div>
-                <div class="react-datepicker__day-name">Mo</div>
-                <div class="react-datepicker__day-name">Tu</div>
-                <div class="react-datepicker__day-name">We</div>
-                <div class="react-datepicker__day-name">Th</div>
-                <div class="react-datepicker__day-name">Fr</div>
-                <div class="react-datepicker__day-name">Sa</div>
-              </div>
-            </div>
-
-            <div
-              class="react-datepicker__month react-datepicker__month--accessible"
-            >
-              {{#each this.days as |days|}}
-                <div class="react-datepicker__week">
-                  {{#each days as |day|}}
-                    <div
-                      role="button"
-                      class={{concat
-                        "react-datepicker__day"
-                        (if
-                          (and
-                            (not day.isOutside)
-                            (isSameDayHelper
-                              this.year this.month day.day this.selectedDate
-                            )
-                          )
-                          " react-datepicker__day--selected"
-                        )
-                        (if
-                          (isSameDayHelper
-                            this.year this.month day.day this.today
-                          )
-                          " react-datepicker__day--today"
-                        )
-                        (if
-                          day.isOutside " react-datepicker__day--outside-month"
-                        )
-                      }}
-                      {{on "click" (fn this.selectDate day)}}
-                    >
-                      <div class="react-datepicker__day-text">{{day.day}}</div>
-                    </div>
-                  {{/each}}
-                </div>
-              {{/each}}
-            </div>
-          </div>
-
-          <div class="react-datepicker__time-container">
-            <div class="react-datepicker__time">
-              <div
-                class="react-datepicker__time-box react-datepicker__time-box--accessible"
-              >
-                <ul class="react-datepicker__time-list">
-                  {{#each this.times as |time|}}
-                    <li
-                      role="option"
-                      class={{concat
-                        "react-datepicker__time-list-item"
-                        (if
-                          (eq time this.selectedTime)
-                          " react-datepicker__time-list-item--selected"
-                        )
-                      }}
-                      {{on "click" (fn this.selectTime time)}}
-                    >
-                      {{time}}
-                    </li>
-                  {{/each}}
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-      </EuiFormControlLayout>
-    </div>
-  `, {
-  strictMode: true,
-  scope: () => ({
-    EuiFormControlLayout,
-    on,
-    EuiIcon,
-    EuiFlexItem,
-    EuiSelect,
-    pick,
-    concat,
-    and,
-    not,
-    isSameDayHelper,
-    fn,
-    eq
-  })
-}), (_class = class DatetimePicker extends Component {
-  constructor(owner, args) {
-    super(owner, args);
-    _initializerDefineProperty(this, "month", _descriptor, this);
-    _initializerDefineProperty(this, "year", _descriptor2, this);
-    _initializerDefineProperty(this, "monthMoment", _descriptor3, this);
-    // Used to style the days outside of the current month
-    _initializerDefineProperty(this, "offset", _descriptor4, this);
-    _initializerDefineProperty(this, "selectedDate", _descriptor5, this);
-    _initializerDefineProperty(this, "selectedTime", _descriptor6, this);
-    _initializerDefineProperty(this, "today", _descriptor7, this);
-    _defineProperty(this, "momentConfig", void 0);
+class DatetimePicker extends Component {
+  static {
+    g(this.prototype, "month", [tracked], function () {
+      return 0;
+    });
+  }
+  #month = (i(this, "month"), void 0);
+  static {
+    g(this.prototype, "year", [tracked], function () {
+      return 0;
+    });
+  }
+  #year = (i(this, "year"), void 0);
+  static {
+    g(this.prototype, "monthMoment", [tracked]);
+  }
+  #monthMoment = (i(this, "monthMoment"), void 0);
+  static {
+    g(this.prototype, "offset", [tracked], function () {
+      return 0;
+    });
+  }
+  #offset = (i(this, "offset"), void 0); // Used to style the days outside of the current month
+  static {
+    g(this.prototype, "selectedDate", [tracked]);
+  }
+  #selectedDate = (i(this, "selectedDate"), void 0);
+  static {
+    g(this.prototype, "selectedTime", [tracked]);
+  }
+  #selectedTime = (i(this, "selectedTime"), void 0);
+  static {
+    g(this.prototype, "today", [tracked]);
+  }
+  #today = (i(this, "today"), void 0);
+  momentConfig;
+  constructor(owner1, args1) {
+    super(owner1, args1);
     if (this.args.selected) {
       this.monthMoment = this.args.selected;
       this.selectedDate = this.args.selected;
@@ -210,173 +76,164 @@ let DatetimePicker = setComponentTemplate(precompileTemplate(`
     };
     this.month = this.momentConfig.month;
     this.year = this.momentConfig.year;
-    let hour = this.momentConfig.hour;
-    let minute = this.momentConfig.minute;
-    let hourStr = hour < 10 ? `0${hour}` : hour;
-    let minuteStr = minute < 10 ? `0${minute}` : minute;
-    this.selectedTime = `${hourStr}:${minuteStr}`;
+    let hour1 = this.momentConfig.hour;
+    let minute1 = this.momentConfig.minute;
+    let hourStr1 = hour1 < 10 ? `0${hour1}` : hour1;
+    let minuteStr1 = minute1 < 10 ? `0${minute1}` : minute1;
+    this.selectedTime = `${hourStr1}:${minuteStr1}`;
     this.offset = this.monthMoment.clone().startOf('month').day();
     this.today = moment();
   }
   get monthNames() {
-    return moment.months().map((month, i) => {
+    return moment.months().map((month1, i1) => {
       return {
-        text: month,
-        value: i
+        text: month1,
+        value: i1
       };
     });
   }
   get years() {
-    return Array.from(Array(15).keys()).map((_, i) => {
+    return Array.from(Array(15).keys()).map((_1, i1) => {
       // Create a list of years +/- 7 from the current year
-      let year = this.year - 7 + i;
+      let year1 = this.year - 7 + i1;
       return {
-        text: year,
-        value: year
+        text: year1,
+        value: year1
       };
     });
   }
   get times() {
-    const timesArray = [];
-
+    const timesArray1 = [];
     // Create entries every 30 minutes
-    for (let i = 0; i < 24; i++) {
-      let hour = i < 10 ? `0${i}` : i;
-      timesArray.push(`${hour}:00`, `${hour}:30`);
+    for (let i1 = 0; i1 < 24; i1++) {
+      let hour1 = i1 < 10 ? `0${i1}` : i1;
+      timesArray1.push(`${hour1}:00`, `${hour1}:30`);
     }
-    return timesArray;
+    return timesArray1;
   }
   get days() {
     // Used for showing days outside of the current month
     // const prevMonth = moment([this.year, this.month - 1]);
-    const prevMonth = this.monthMoment.clone().subtract(1, 'month');
-    const nextMonth = this.monthMoment.clone().add(1, 'month');
-    const offset = this.offset;
-    let daysInMonth = this.monthMoment.daysInMonth();
-    let daysInPrevMonth = prevMonth.daysInMonth();
-    const daysArray = [];
-    for (let i = 0; i < daysInMonth; i++) {
-      daysArray[i] = {
-        day: i + 1
+    const prevMonth1 = this.monthMoment.clone().subtract(1, 'month');
+    const nextMonth1 = this.monthMoment.clone().add(1, 'month');
+    const offset1 = this.offset;
+    let daysInMonth1 = this.monthMoment.daysInMonth();
+    let daysInPrevMonth1 = prevMonth1.daysInMonth();
+    const daysArray1 = [];
+    for (let i1 = 0; i1 < daysInMonth1; i1++) {
+      daysArray1[i1] = {
+        day: i1 + 1
       };
     }
-
     // Fill the previous and next month days
-    for (let i = 0, d = daysInPrevMonth; i < offset; i++, d--) {
-      daysArray.unshift({
-        day: d,
-        month: prevMonth.month(),
-        year: prevMonth.year(),
+    for (let i1 = 0, d1 = daysInPrevMonth1; i1 < offset1; i1++, d1--) {
+      daysArray1.unshift({
+        day: d1,
+        month: prevMonth1.month(),
+        year: prevMonth1.year(),
         isOutside: true
       });
     }
-
     // All months fit within 6 weeks (42 days)
-    for (let d = 1, i = daysInMonth + offset; i < 42; d++, i++) {
-      daysArray.push({
-        day: d,
-        month: nextMonth.month(),
-        year: nextMonth.year(),
+    for (let d1 = 1, i1 = daysInMonth1 + offset1; i1 < 42; d1++, i1++) {
+      daysArray1.push({
+        day: d1,
+        month: nextMonth1.month(),
+        year: nextMonth1.year(),
         isOutside: true
       });
     }
-
     // All months fit within 6 weeks (42 days)
     // but depending on the starting day, one week may not be needed
-    const daysMatrix = [];
-    const weeks = daysInMonth + offset > 35 ? 6 : 5;
-    for (let i = 0; i < weeks; i++) {
-      daysMatrix[i] = daysArray.slice(i * 7, i * 7 + 7);
+    const daysMatrix1 = [];
+    const weeks1 = daysInMonth1 + offset1 > 35 ? 6 : 5;
+    for (let i1 = 0; i1 < weeks1; i1++) {
+      daysMatrix1[i1] = daysArray1.slice(i1 * 7, i1 * 7 + 7);
     }
-    return daysMatrix;
+    return daysMatrix1;
   }
   updateDate() {
     this.year = this.monthMoment.year();
     this.month = this.monthMoment.month();
     this.offset = this.monthMoment.clone().startOf('month').day();
   }
-  selectTime(time, e) {
-    this.selectedTime = time;
-    const [hour, minute] = time.split(':');
-    this.momentConfig.hour = parseInt(hour);
-    this.momentConfig.minute = parseInt(minute);
+  selectTime(time1, e1) {
+    this.selectedTime = time1;
+    const [hour1, minute1] = time1.split(':');
+    this.momentConfig.hour = parseInt(hour1);
+    this.momentConfig.minute = parseInt(minute1);
     this.momentConfig.second = 0;
     this.momentConfig.millisecond = 0;
     this.selectedDate = moment(this.momentConfig);
-    this.args.onChange(this.selectedDate, e);
+    this.args.onChange(this.selectedDate, e1);
+  }
+  static {
+    n(this.prototype, "selectTime", [action]);
   }
-  selectDate(day, e) {
+  selectDate(day1, e1) {
     // Only outside days will have year/month
-    this.momentConfig.year = day.year || this.year;
-    this.momentConfig.month = day.month || this.month;
-    this.momentConfig.day = day.day;
+    this.momentConfig.year = day1.year || this.year;
+    this.momentConfig.month = day1.month || this.month;
+    this.momentConfig.day = day1.day;
     this.selectedDate = moment(this.momentConfig);
-    this.args.onChange(this.selectedDate, e);
-
+    this.args.onChange(this.selectedDate, e1);
     // Update the state to show the selected month properly
-    if (day.isOutside && day.month && day.year) {
-      this.monthMoment.month(day.month);
-      this.monthMoment.year(day.year);
+    if (day1.isOutside && day1.month && day1.year) {
+      this.monthMoment.month(day1.month);
+      this.monthMoment.year(day1.year);
       this.updateDate();
     }
   }
-  setYear(year) {
-    this.year = parseInt(year);
+  static {
+    n(this.prototype, "selectDate", [action]);
   }
-  setMonth(month) {
-    this.monthMoment.month(parseInt(month));
+  setYear(year1) {
+    this.year = parseInt(year1);
+  }
+  static {
+    n(this.prototype, "setYear", [action]);
+  }
+  setMonth(month1) {
+    this.monthMoment.month(parseInt(month1));
     this.updateDate();
   }
+  static {
+    n(this.prototype, "setMonth", [action]);
+  }
   increaseMonth() {
     this.monthMoment.add(1, 'month');
     this.updateDate();
   }
+  static {
+    n(this.prototype, "increaseMonth", [action]);
+  }
   decreaseMonth() {
     this.monthMoment.subtract(1, 'month');
     this.updateDate();
   }
-}, (_descriptor = _applyDecoratedDescriptor(_class.prototype, "month", [tracked], {
-  configurable: true,
-  enumerable: true,
-  writable: true,
-  initializer: function () {
-    return 0;
-  }
-}), _descriptor2 = _applyDecoratedDescriptor(_class.prototype, "year", [tracked], {
-  configurable: true,
-  enumerable: true,
-  writable: true,
-  initializer: function () {
-    return 0;
-  }
-}), _descriptor3 = _applyDecoratedDescriptor(_class.prototype, "monthMoment", [tracked], {
-  configurable: true,
-  enumerable: true,
-  writable: true,
-  initializer: null
-}), _descriptor4 = _applyDecoratedDescriptor(_class.prototype, "offset", [tracked], {
-  configurable: true,
-  enumerable: true,
-  writable: true,
-  initializer: function () {
-    return 0;
-  }
-}), _descriptor5 = _applyDecoratedDescriptor(_class.prototype, "selectedDate", [tracked], {
-  configurable: true,
-  enumerable: true,
-  writable: true,
-  initializer: null
-}), _descriptor6 = _applyDecoratedDescriptor(_class.prototype, "selectedTime", [tracked], {
-  configurable: true,
-  enumerable: true,
-  writable: true,
-  initializer: null
-}), _descriptor7 = _applyDecoratedDescriptor(_class.prototype, "today", [tracked], {
-  configurable: true,
-  enumerable: true,
-  writable: true,
-  initializer: null
-}), _applyDecoratedDescriptor(_class.prototype, "selectTime", [action], Object.getOwnPropertyDescriptor(_class.prototype, "selectTime"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "selectDate", [action], Object.getOwnPropertyDescriptor(_class.prototype, "selectDate"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "setYear", [action], Object.getOwnPropertyDescriptor(_class.prototype, "setYear"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "setMonth", [action], Object.getOwnPropertyDescriptor(_class.prototype, "setMonth"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "increaseMonth", [action], Object.getOwnPropertyDescriptor(_class.prototype, "increaseMonth"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "decreaseMonth", [action], Object.getOwnPropertyDescriptor(_class.prototype, "decreaseMonth"), _class.prototype)), _class));
+  static {
+    n(this.prototype, "decreaseMonth", [action]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("\n    <div class=\"euiDatePicker euiDatePicker--inline\">\n      <EuiFormControlLayout>\n        <div class=\"react-datepicker\">\n          <button type=\"button\" class=\"react-datepicker__navigation react-datepicker__navigation--previous\" aria-label=\"Previous month\" {{on \"click\" this.decreaseMonth}}>\n            <EuiIcon @iconClasses=\"euiButtonIcon__icon\" @type=\"arrowLeft\" />\n          </button>\n          <button type=\"button\" class=\"react-datepicker__navigation react-datepicker__navigation--next\" aria-label=\"Next month\" {{on \"click\" this.increaseMonth}}>\n            <EuiIcon @iconClasses=\"euiButtonIcon__icon {{@iconClasses}}\" @type=\"arrowRight\" />\n          </button>\n          <div class=\"react-datepicker__month-container\">\n            <div class=\"react-datepicker__header\">\n              <div class=\"react-datepicker__header__dropdown react-datepicker__header__dropdown--scroll\">\n                <div class=\"react-datepicker__month-dropdown-container react-datepicker__month-dropdown-container--scroll\">\n                  {{!--template-lint-disable--}}\n                  <div class=\"react-datepicker__month-read-view\" style=\"padding: 0;\">\n                    <EuiFlexItem @grow={{1}}>\n                      <EuiSelect @compressed={{true}} @value={{this.month}} @options={{this.monthNames}} {{on \"change\" (pick \"target.value\" this.setMonth)}} />\n                    </EuiFlexItem>\n                  </div>\n                </div>\n                <div class=\"react-datepicker__year-dropdown-container react-datepicker__year-dropdown-container--scroll\">\n                  {{!--template-lint-disable--}}\n                  <div class=\"react-datepicker__year-read-view\" style=\"padding: 0;\">\n                    <EuiFlexItem @grow={{1}}>\n                      <EuiSelect @compressed={{true}} @value={{this.year}} @options={{this.years}} {{on \"change\" (pick \"target.value\" this.setYear)}} />\n                    </EuiFlexItem>\n                  </div>\n                </div>\n              </div>\n              <div class=\"react-datepicker__day-names\">\n                <div class=\"react-datepicker__day-name\">Su</div>\n                <div class=\"react-datepicker__day-name\">Mo</div>\n                <div class=\"react-datepicker__day-name\">Tu</div>\n                <div class=\"react-datepicker__day-name\">We</div>\n                <div class=\"react-datepicker__day-name\">Th</div>\n                <div class=\"react-datepicker__day-name\">Fr</div>\n                <div class=\"react-datepicker__day-name\">Sa</div>\n              </div>\n            </div>\n\n            <div class=\"react-datepicker__month react-datepicker__month--accessible\">\n              {{#each this.days as |days|}}\n                <div class=\"react-datepicker__week\">\n                  {{#each days as |day|}}\n                    <div role=\"button\" class={{concat \"react-datepicker__day\" (if (and (not day.isOutside) (isSameDayHelper this.year this.month day.day this.selectedDate)) \" react-datepicker__day--selected\") (if (isSameDayHelper this.year this.month day.day this.today) \" react-datepicker__day--today\") (if day.isOutside \" react-datepicker__day--outside-month\")}} {{on \"click\" (fn this.selectDate day)}}>\n                      <div class=\"react-datepicker__day-text\">{{day.day}}</div>\n                    </div>\n                  {{/each}}\n                </div>\n              {{/each}}\n            </div>\n          </div>\n\n          <div class=\"react-datepicker__time-container\">\n            <div class=\"react-datepicker__time\">\n              <div class=\"react-datepicker__time-box react-datepicker__time-box--accessible\">\n                <ul class=\"react-datepicker__time-list\">\n                  {{#each this.times as |time|}}\n                    <li role=\"option\" class={{concat \"react-datepicker__time-list-item\" (if (eq time this.selectedTime) \" react-datepicker__time-list-item--selected\")}} {{on \"click\" (fn this.selectTime time)}}>\n                      {{time}}\n                    </li>\n                  {{/each}}\n                </ul>\n              </div>\n            </div>\n          </div>\n        </div>\n      </EuiFormControlLayout>\n    </div>\n  ", {
+      strictMode: true,
+      scope: () => ({
+        EuiFormControlLayout,
+        on,
+        EuiIcon,
+        EuiFlexItem,
+        EuiSelect,
+        pick,
+        concat,
+        and,
+        not,
+        isSameDayHelper,
+        fn,
+        eq
+      })
+    }), this);
+  }
+}
 
 export { DatetimePicker as default };
 //# sourceMappingURL=datetime-picker.js.map