@sebgroup/green-core 1.4.2 → 1.4.4

package/components/datepicker/datepicker.d.ts

@@ -78,4 +78,5 @@ export declare class GdsDatepicker extends GdsFormControlElement<Date> {
     connectedCallback(): void;
     render(): any;
     private _handleValueChange;
+    private _handleOpenChange;
 }

package/index.js

@@ -139,7 +139,7 @@ function watchMediaQuery(q) {
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-3bff35";
+var VER_SUFFIX = "-6cf221";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
@@ -193,12 +193,20 @@ import { createRef, ref } from "lit/directives/ref.js";
 // libs/core/src/utils/helpers/transitional-styles.ts
 import { html as html2 } from "lit";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+function supportsConstructedStylesheets() {
+  try {
+    new CSSStyleSheet();
+    return true;
+  } catch {
+    return false;
+  }
+}
 var TransitionalStyles = class {
   constructor() {
     this.sheets = /* @__PURE__ */ new Map();
     this.elements = /* @__PURE__ */ new Map();
     this.sheetsLegacy = /* @__PURE__ */ new Map();
-    this.useLegacyStylesheets = true;
+    this.useLegacyStylesheets = !supportsConstructedStylesheets();
   }
   static get instance() {
     if (!globalThis.__gdsTransitionalStyles?.[VER_SUFFIX])
@@ -208,7 +216,6 @@ var TransitionalStyles = class {
       };
     return globalThis.__gdsTransitionalStyles[VER_SUFFIX];
   }
-  //!supportsConstructedStylesheets()
   apply(element, styleKey) {
     if (!element.shadowRoot)
       return;
@@ -1746,7 +1753,6 @@ import { map } from "lit/directives/map.js";
 import { repeat } from "lit/directives/repeat.js";
 import { nothing } from "lit";
 import { msg as msg5 } from "@lit/localize";
-import { eachYearOfInterval } from "date-fns";
 
 // libs/core/src/primitives/calendar/calendar.ts
 import { html as html6 } from "lit";
@@ -1901,6 +1907,9 @@ var GdsCalendar = class extends GdsElement {
         </tbody>
       </table>`;
   }
+  _valueChanged() {
+    this.focusedDate = this.value;
+  }
 };
 _setSelectedDate = new WeakSet();
 setSelectedDate_fn = function(date) {
@@ -1997,6 +2006,9 @@ __decorateClass([
 __decorateClass([
   state8()
 ], GdsCalendar.prototype, "_tStyles", 2);
+__decorateClass([
+  watch("value")
+], GdsCalendar.prototype, "_valueChanged", 1);
 GdsCalendar = __decorateClass([
   gdsCustomElement("gds-calendar")
 ], GdsCalendar);
@@ -2069,9 +2081,13 @@ var GdsDatePartSpinner = class extends LitElement6 {
       } else {
         const key = parseInt(e.key);
         if (!isNaN(key)) {
-          __privateSet(this, _inputBuffer, __privateGet(this, _inputBuffer) + key.toString());
-          this.value = parseInt(__privateGet(this, _inputBuffer));
-          if (__privateGet(this, _inputBuffer).length == this.length) {
+          if (__privateGet(this, _inputBuffer).length < this.length) {
+            __privateSet(this, _inputBuffer, __privateGet(this, _inputBuffer) + key.toString());
+            this.value = parseInt(__privateGet(this, _inputBuffer));
+          }
+          if (__privateGet(this, _inputBuffer).length === this.length) {
+            this.value = __privateMethod(this, _clamp, clamp_fn).call(this, this.value);
+            __privateMethod(this, _clearInputBuffer, clearInputBuffer_fn).call(this);
             __privateMethod(this, _focusNextSpinner, focusNextSpinner_fn).call(this);
             __privateMethod(this, _dispatchChangeEvent, dispatchChangeEvent_fn).call(this);
           }
@@ -2193,7 +2209,7 @@ var dateConverter = {
     return value.toISOString();
   }
 };
-var _renderBackToValidRangeButton, renderBackToValidRangeButton_fn, _focusDate, focusDate_fn, _getSpinnerLabel, getSpinnerLabel_fn, _getMinSpinnerValue, getMinSpinnerValue_fn, _getMaxSpinnerValue, getMaxSpinnerValue_fn, _dispatchChangeEvent2, dispatchChangeEvent_fn2, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, _parseDateFormat, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, _years, years_get;
+var _renderBackToValidRangeButton, renderBackToValidRangeButton_fn, _focusDate, focusDate_fn, _getSpinnerLabel, getSpinnerLabel_fn, _getMinSpinnerValue, getMinSpinnerValue_fn, _getMaxSpinnerValue, getMaxSpinnerValue_fn, _dispatchChangeEvent2, dispatchChangeEvent_fn2, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, _parseDateFormat, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, _years, years_get, _isValueOutsideRange, isValueOutsideRange_get;
 var GdsDatepicker = class extends GdsFormControlElement {
   constructor() {
     super(...arguments);
@@ -2208,10 +2224,10 @@ var GdsDatepicker = class extends GdsFormControlElement {
      */
     __privateAdd(this, _parseDateFormat);
     /**
-     * Returns an array of years between the min and max dates for use in the year dropdown.
-     * If the value is set to a year outside the range, it will be added to the array until the value is changed.
+     * Returns a year iterator between the min and max dates for use in the year dropdown.
      */
     __privateAdd(this, _years);
+    __privateAdd(this, _isValueOutsideRange);
     this.min = new Date((/* @__PURE__ */ new Date()).getFullYear() - 10, 0, 1);
     this.max = new Date((/* @__PURE__ */ new Date()).getFullYear() + 10, 0, 1);
     this.open = false;
@@ -2220,6 +2236,9 @@ var GdsDatepicker = class extends GdsFormControlElement {
     this._focusedMonth = (/* @__PURE__ */ new Date()).getMonth();
     this._focusedYear = (/* @__PURE__ */ new Date()).getFullYear();
     this._dateFormatLayout = __privateMethod(this, _parseDateFormat, parseDateFormat_fn).call(this, "y-m-d");
+    __privateAdd(this, _handleFieldClick, (e) => {
+      this._elSpinners[0].focus();
+    });
     __privateAdd(this, _handleCalendarChange, (e) => {
       e.stopPropagation();
       this.value = e.detail;
@@ -2326,7 +2345,7 @@ var GdsDatepicker = class extends GdsFormControlElement {
 
       <div class="form-info"><slot name="sub-label"></slot></div>
 
-      <div class="field" id="trigger">
+      <div class="field" id="trigger" @click=${__privateGet(this, _handleFieldClick)}>
         <div class="input">
           ${join(
       map(
@@ -2473,6 +2492,10 @@ var GdsDatepicker = class extends GdsFormControlElement {
     const day = date.getDate().toString().padStart(2, "0");
     __privateSet(this, _spinnerState, { year, month, day });
   }
+  _handleOpenChange() {
+    if (this.open)
+      this._elCalendar.then((el) => el.focus());
+  }
 };
 _renderBackToValidRangeButton = new WeakSet();
 renderBackToValidRangeButton_fn = async function() {
@@ -2511,7 +2534,7 @@ getSpinnerLabel_fn = function(name) {
 _getMinSpinnerValue = new WeakSet();
 getMinSpinnerValue_fn = function(name) {
   const min = {
-    year: this.min.getFullYear(),
+    year: 1900,
     month: 1,
     day: 1
   };
@@ -2520,7 +2543,7 @@ getMinSpinnerValue_fn = function(name) {
 _getMaxSpinnerValue = new WeakSet();
 getMaxSpinnerValue_fn = function(name) {
   const max = {
-    year: this.max.getFullYear(),
+    year: 9999,
     month: 12,
     day: 31
   };
@@ -2534,6 +2557,7 @@ dispatchChangeEvent_fn2 = function() {
     })
   );
 };
+_handleFieldClick = new WeakMap();
 _handleCalendarChange = new WeakMap();
 _handleMonthChange = new WeakMap();
 _handleYearChange = new WeakMap();
@@ -2562,19 +2586,24 @@ _handleSpinnerChange = new WeakMap();
 _spinnerState = new WeakMap();
 _years = new WeakSet();
 years_get = function() {
-  const years = eachYearOfInterval({
-    start: this.min,
-    end: this.max
-  }).map((date) => date.getFullYear());
+  const minYear = this.min.getFullYear();
+  const maxYear = this.max.getFullYear();
+  const isOutsideRange = __privateGet(this, _isValueOutsideRange, isValueOutsideRange_get);
+  const valueYear = this.value?.getFullYear();
+  return {
+    *[Symbol.iterator]() {
+      if (isOutsideRange)
+        yield valueYear;
+      for (let i = minYear; i <= maxYear; i++)
+        yield i;
+    }
+  };
+};
+_isValueOutsideRange = new WeakSet();
+isValueOutsideRange_get = function() {
   if (!this.value)
-    return years;
-  const selectedYear = this.value.getFullYear();
-  const valueIsInrage = years[0] <= selectedYear && years[years.length - 1] >= selectedYear;
-  if (!valueIsInrage) {
-    years.push(selectedYear);
-    years.sort((a, b) => a - b);
-  }
-  return years;
+    return false;
+  return this.value.getFullYear() < this.min.getFullYear() || this.value.getFullYear() > this.max.getFullYear();
 };
 GdsDatepicker.styles = [styles];
 GdsDatepicker.shadowRootOptions = {
@@ -2629,6 +2658,9 @@ __decorateClass([
 __decorateClass([
   watch("value")
 ], GdsDatepicker.prototype, "_handleValueChange", 1);
+__decorateClass([
+  watch("open")
+], GdsDatepicker.prototype, "_handleOpenChange", 1);
 GdsDatepicker = __decorateClass([
   gdsCustomElement("gds-datepicker")
 ], GdsDatepicker);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sebgroup/green-core",
   "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/primitives/calendar/calendar.d.ts

@@ -51,4 +51,5 @@ export declare class GdsCalendar extends GdsElement {
     connectedCallback(): void;
     focus(): void;
     render(): import("lit").TemplateResult<1>;
+    private _valueChanged;
 }

package/transitional-styles.js

@@ -2871,8 +2871,8 @@ var calendar_trans_styles_default = `/* stylelint-disable max-nesting-depth */
     :host table tbody tr td.today {
       background: transparent;
       border-radius: 4px;
-      box-shadow: inset 0 0 0 2px hsl(var(--sg-hsl-blue-2));
       color: hsl(var(--sg-hsl-blue-2));
+      text-decoration: underline;
     }
     :host table tbody tr td:hover:not(.disabled) {
       background: hsl(var(--sg-hsl-blue-0));
@@ -2882,10 +2882,8 @@ var calendar_trans_styles_default = `/* stylelint-disable max-nesting-depth */
       cursor: pointer;
     }
     :host table tbody tr td:focus-visible:not(.disabled) {
-      background: hsl(var(--sg-hsl-blue-0));
       border: solid 1px var(--sg-bg-level-2);
       border-radius: 4px;
-      color: hsl(var(--sg-hsl-white));
       cursor: pointer;
       position: relative;
       z-index: 0;
@@ -2907,10 +2905,8 @@ var calendar_trans_styles_default = `/* stylelint-disable max-nesting-depth */
       color: hsl(var(--sg-hsl-white));
     }
     :host table tbody tr td[tabindex="0"] {
-      background: hsl(var(--sg-hsl-blue-2));
-      border: solid 1px var(--sg-bg-level-2);
       border-radius: 4px;
-      color: hsl(var(--sg-hsl-white));
+      box-shadow: inset 0 0 0 2px hsl(var(--sg-hsl-blue-2));
     }
     :host table tbody tr td:hover:active:not(.disabled) {
       background: hsl(var(--sg-hsl-blue-2));
@@ -3216,7 +3212,7 @@ function register6() {
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-3bff35";
+var VER_SUFFIX = "-6cf221";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var templateCache = /* @__PURE__ */ new WeakMap();
 function applyElementScoping(strings, ...values) {
@@ -3254,12 +3250,20 @@ var registerTransitionalStyles = () => {
   register5();
   register6();
 };
+function supportsConstructedStylesheets() {
+  try {
+    new CSSStyleSheet();
+    return true;
+  } catch {
+    return false;
+  }
+}
 var TransitionalStyles = class {
   constructor() {
     this.sheets = /* @__PURE__ */ new Map();
     this.elements = /* @__PURE__ */ new Map();
     this.sheetsLegacy = /* @__PURE__ */ new Map();
-    this.useLegacyStylesheets = true;
+    this.useLegacyStylesheets = !supportsConstructedStylesheets();
   }
   static get instance() {
     if (!globalThis.__gdsTransitionalStyles?.[VER_SUFFIX])
@@ -3269,7 +3273,6 @@ var TransitionalStyles = class {
       };
     return globalThis.__gdsTransitionalStyles[VER_SUFFIX];
   }
-  //!supportsConstructedStylesheets()
   apply(element, styleKey) {
     if (!element.shadowRoot)
       return;