@sebgroup/green-core 1.8.0 → 1.9.0

package/README.md

@@ -17,7 +17,7 @@ If you are new to Green, checkout [@sebgroup/green-core](https://github.com/sebg
 We also provide components for the following technologies:
 
 - [React](https://github.com/sebgroup/green/tree/main/libs/react)
-- [Angular](https://github.com/sebgroup/green/tree/main/libs/react)
+- [Angular](https://github.com/sebgroup/green/tree/main/libs/angular)
 
 If you're trying to find something specific, here's a full list of packages that we support!
 

package/components/datepicker/datepicker.d.ts

@@ -61,6 +61,14 @@ export declare class GdsDatepicker extends GdsFormControlElement<Date> {
      */
     get dateformat(): string;
     set dateformat(dateformat: string);
+    /**
+     * Whether to disable weekends in the calendar.
+     */
+    disabledWeekends: boolean;
+    /**
+     * An array of dates that should be disabled in the calendar.
+     */
+    disabledDates?: Date[];
     /**
      * Get the currently focused date in the calendar popover. If no date is focused, or the calendar popover
      * is closed, the value will be undefined.

package/components/dropdown/dropdown.d.ts

@@ -76,6 +76,10 @@ export declare class GdsDropdown<ValueT = any> extends GdsFormControlElement<Val
      * are still readable and apply appropriate custom layout or truncation if neccecary.
      */
     syncPopoverWidth: boolean;
+    /**
+     * Maximum height of the dropdown list.
+     */
+    maxHeight: number;
     /**
      * Size of the dropdown. Supports `medium` and `small`. There is no `large` size for dropdowns.
      * `medium` is the default size.

package/index.js

@@ -144,7 +144,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 = "-3d880b";
+var VER_SUFFIX = "-af766e";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
@@ -715,6 +715,8 @@ var GdsPopover = class extends GdsElement {
     this.placement = "bottom-start";
     this.calcMinWidth = (referenceEl) => `${referenceEl.offsetWidth}px`;
     this.calcMaxWidth = (_referenceEl) => `auto`;
+    this.calcMinHeight = (referenceEl) => `auto`;
+    this.calcMaxHeight = (_referenceEl) => `500px`;
     this._trigger = void 0;
     this._isVirtKbVisible = false;
     // A reference to the dialog element used to make the popover modal
@@ -910,7 +912,9 @@ registerAutoPositioning_fn = function() {
         left: `${x}px`,
         top: `${y}px`,
         minWidth: this.calcMinWidth(referenceEl),
-        maxWidth: this.calcMaxWidth(referenceEl)
+        maxWidth: this.calcMaxWidth(referenceEl),
+        minHeight: this.calcMinHeight(referenceEl),
+        maxHeight: this.calcMaxHeight(referenceEl)
       })
     );
   }));
@@ -937,6 +941,12 @@ __decorateClass([
 __decorateClass([
   property3()
 ], GdsPopover.prototype, "calcMaxWidth", 2);
+__decorateClass([
+  property3()
+], GdsPopover.prototype, "calcMinHeight", 2);
+__decorateClass([
+  property3()
+], GdsPopover.prototype, "calcMaxHeight", 2);
 __decorateClass([
   state3()
 ], GdsPopover.prototype, "_trigger", 2);
@@ -1127,6 +1137,7 @@ var GdsDropdown = class extends GdsFormControlElement {
     this.compareWith = (a, b) => a === b;
     this.searchFilter = (q, o) => o.innerHTML.toLowerCase().includes(q.toLowerCase());
     this.syncPopoverWidth = false;
+    this.maxHeight = 500;
     this.size = "medium";
     this.hideLabel = false;
     __privateAdd(this, _optionElements, void 0);
@@ -1270,6 +1281,7 @@ var GdsDropdown = class extends GdsFormControlElement {
         .open=${this.open}
         .triggerRef=${this._elTriggerBtnAsync}
         .calcMaxWidth=${(trigger) => this.syncPopoverWidth ? `${trigger.offsetWidth}px` : `auto`}
+        .calcMaxHeight=${(_trigger) => `${this.maxHeight}px`}
         @gds-ui-state=${(e) => this.open = e.detail.open}
       >
         ${when2(
@@ -1407,6 +1419,9 @@ __decorateClass([
 __decorateClass([
   property5({ type: Boolean, attribute: "sync-popover-width" })
 ], GdsDropdown.prototype, "syncPopoverWidth", 2);
+__decorateClass([
+  property5({ type: Number, attribute: "max-height" })
+], GdsDropdown.prototype, "maxHeight", 2);
 __decorateClass([
   property5()
 ], GdsDropdown.prototype, "size", 2);
@@ -1739,6 +1754,7 @@ var GdsCalendar = class extends GdsElement {
     this.min = new Date((/* @__PURE__ */ new Date()).getFullYear() - 10, 0, 1);
     this.max = new Date((/* @__PURE__ */ new Date()).getFullYear() + 10, 0, 1);
     this.focusedDate = /* @__PURE__ */ new Date();
+    this.disabledWeekends = false;
     this.showWeekNumbers = false;
   }
   get focusedMonth() {
@@ -1798,11 +1814,13 @@ var GdsCalendar = class extends GdsElement {
                         </td>`
         )}
                     ${week.days.map((day) => {
-          const isDisabled = !isSameMonth(this.focusedDate, day) || day < this.min || day > this.max;
+          const isOutsideCurrentMonth = !isSameMonth(this.focusedDate, day) || day < this.min || day > this.max;
+          const isWeekend = day.getDay() === 0 || day.getDay() === 6;
+          const isDisabled = isOutsideCurrentMonth || this.disabledWeekends && isWeekend || this.disabledDates && this.disabledDates.some((d) => isSameDay(d, day));
           return html7`
                         <td
                           class="${classMap5({
-            disabled: isDisabled,
+            disabled: Boolean(isDisabled),
             today: isSameDay(currentDate, day)
           })}"
                           ?disabled=${isDisabled}
@@ -1910,6 +1928,12 @@ __decorateClass([
 __decorateClass([
   property7()
 ], GdsCalendar.prototype, "focusedDate", 2);
+__decorateClass([
+  property7({ type: Boolean, attribute: "disabled-weekends" })
+], GdsCalendar.prototype, "disabledWeekends", 2);
+__decorateClass([
+  property7({ type: Array, attribute: "disabled-dates" })
+], GdsCalendar.prototype, "disabledDates", 2);
 __decorateClass([
   property7({ type: Number })
 ], GdsCalendar.prototype, "focusedMonth", 1);
@@ -2127,6 +2151,14 @@ var dateConverter = {
     return value.toISOString();
   }
 };
+var dateArrayConverter = {
+  fromAttribute(value) {
+    return value.split(",").map((d) => new Date(d.trim()));
+  },
+  toAttribute(value) {
+    return JSON.stringify(value.map((d) => d.toISOString()));
+  }
+};
 var _valueOnOpen, _renderBackToValidRangeButton, renderBackToValidRangeButton_fn, _focusDate, focusDate_fn, _getSpinnerLabel, getSpinnerLabel_fn, _getMinSpinnerValue, getMinSpinnerValue_fn, _getMaxSpinnerValue, getMaxSpinnerValue_fn, _dispatchChangeEvent2, dispatchChangeEvent_fn2, _dispatchInputEvent, dispatchInputEvent_fn, _handleFieldFocusOut, _handleSpinnerFocus, _handleClipboardCopy, _handleClipboardPaste, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleCalendarFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, _parseDateFormat, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, _years, years_get, _isValueOutsideRange, isValueOutsideRange_get;
 var GdsDatepicker = class extends GdsFormControlElement {
   constructor() {
@@ -2154,6 +2186,7 @@ var GdsDatepicker = class extends GdsFormControlElement {
     this.showWeekNumbers = false;
     this.size = "medium";
     this.hideLabel = false;
+    this.disabledWeekends = false;
     this._focusedMonth = (/* @__PURE__ */ new Date()).getMonth();
     this._focusedYear = (/* @__PURE__ */ new Date()).getFullYear();
     this._dateFormatLayout = __privateMethod(this, _parseDateFormat, parseDateFormat_fn).call(this, "y-m-d");
@@ -2404,6 +2437,7 @@ var GdsDatepicker = class extends GdsFormControlElement {
           <gds-dropdown
             .value=${this._focusedMonth.toString()}
             @change=${__privateGet(this, _handleMonthChange)}
+            .maxHeight=${300}
             label="${msg5("Month")}"
             style="width:120px"
             size="small"
@@ -2425,6 +2459,7 @@ var GdsDatepicker = class extends GdsFormControlElement {
           <gds-dropdown
             .value=${this._focusedYear.toString()}
             @change=${__privateGet(this, _handleYearChange)}
+            .maxHeight=${300}
             label="${msg5("Year")}"
             size="small"
             hide-label
@@ -2453,6 +2488,8 @@ var GdsDatepicker = class extends GdsFormControlElement {
           .min=${this.min}
           .max=${this.max}
           .showWeekNumbers=${this.showWeekNumbers}
+          .disabledWeekends=${this.disabledWeekends}
+          .disabledDates=${this.disabledDates}
         ></gds-calendar>
 
         <div class="footer">
@@ -2655,6 +2692,12 @@ __decorateClass([
 __decorateClass([
   property9()
 ], GdsDatepicker.prototype, "dateformat", 1);
+__decorateClass([
+  property9({ type: Boolean, attribute: "disabled-weekends" })
+], GdsDatepicker.prototype, "disabledWeekends", 2);
+__decorateClass([
+  property9({ converter: dateArrayConverter, attribute: "disabled-dates" })
+], GdsDatepicker.prototype, "disabledDates", 2);
 __decorateClass([
   queryAsync3("#calendar-button")
 ], GdsDatepicker.prototype, "test_calendarButton", 2);

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.8.0",
+  "version": "1.9.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/primitives/calendar/calendar.d.ts

@@ -28,6 +28,14 @@ export declare class GdsCalendar extends GdsElement {
      * The date that is currently focused.
      */
     focusedDate: Date;
+    /**
+     * Whether to disable weekends or not.
+     */
+    disabledWeekends: boolean;
+    /**
+     * An array of dates that should be disabled in the calendar.
+     */
+    disabledDates?: Date[];
     /**
      * The month that is currently focused.
      */

package/primitives/popover/popover.d.ts

@@ -43,6 +43,16 @@ export declare class GdsPopover extends GdsElement {
      * By default, the popover maxWidth will be set to `auto` and will grow as needed.
      */
     calcMaxWidth: (_referenceEl: HTMLElement) => string;
+    /**
+     * A callback that returns the minimum height of the popover.
+     * By default, the popover minHeight will be set to `auto`
+     */
+    calcMinHeight: (referenceEl: HTMLElement) => string;
+    /**
+     * A callback that returns the maximum height of the popover.
+     * By default, the popover maxHeight will be set to a hard coded pixel value (check source).
+     */
+    calcMaxHeight: (_referenceEl: HTMLElement) => string;
     private _trigger;
     private _isVirtKbVisible;
     private _handleTriggerRefChanged;

package/transitional-styles.js

@@ -3353,7 +3353,7 @@ function register7() {
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-3d880b";
+var VER_SUFFIX = "-af766e";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var templateCache = /* @__PURE__ */ new WeakMap();
 function applyElementScoping(strings, ...values) {