@sebgroup/green-core 1.8.0 → 1.9.1

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 = "-260c87";
 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,13 +1754,17 @@ 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() {
     return this.focusedDate.getMonth();
   }
   set focusedMonth(month) {
-    this.focusedDate = new Date(this.focusedDate.setMonth(month));
+    const newDate = new Date(this.focusedDate);
+    newDate.setMonth(month);
+    newDate.setHours(0, 0, 0, 0);
+    this.focusedDate = newDate;
   }
   get focusedYear() {
     return this.focusedDate.getFullYear();
@@ -1798,11 +1817,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 +1931,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 +2154,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 +2189,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");
@@ -2242,6 +2278,10 @@ var GdsDatepicker = class extends GdsFormControlElement {
       this.open = e.detail.open;
       if (e.detail.reason === "close") {
         this.value = (await this._elCalendar).value;
+        if (this.value) {
+          this._focusedMonth = this.value.getMonth();
+          this._focusedYear = this.value.getFullYear();
+        }
         __privateMethod(this, _dispatchChangeEvent2, dispatchChangeEvent_fn2).call(this);
       }
       if (e.detail.reason === "cancel") {
@@ -2404,6 +2444,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 +2466,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 +2495,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 +2699,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.1",
   "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

@@ -89,25 +89,25 @@ var option_trans_styles_default = `/**
             user-select: none;
   }
   :host:hover, :host:focus-visible {
-    background-color: var(--gds-ref-pallet-base200);
+    background-color: var(--grey-400);
   }
   :host:active {
-    background-color: var(--gds-ref-pallet-base300);
+    background-color: var(--grey-400);
   }
   :host:focus {
     outline-color: #000;
     outline-offset: -0.25rem;
   }
   :host.active.sg-highlighted, :host[aria-selected=true] {
-    background: var(--gds-ref-pallet-base800);
+    background: var(--grey-1000);
     color: #fff;
   }
   :host(:hover),
   :host(:focus-visible) {
-    background-color: var(--gds-ref-pallet-base200);
+    background-color: var(--grey-400);
   }
   :host(:active) {
-    background-color: var(--gds-ref-pallet-base300);
+    background-color: var(--grey-500);
   }
   :host(:focus) {
     outline-color: #000;
@@ -117,7 +117,7 @@ var option_trans_styles_default = `/**
     display: none;
   }
   :host([highlighted]) {
-    background: var(--gds-ref-pallet-base800);
+    background: var(--grey-1000);
     color: #fff;
   }
   .checkbox {
@@ -2086,6 +2086,7 @@ a.button.tertiary.danger:focus-visible {
     overflow: hidden;
     padding: 0;
     right: 0;
+    color: var(--text-primary-color);
   }
   @media (max-width: 35.98em) {
     dialog {
@@ -2104,8 +2105,8 @@ a.button.tertiary.danger:focus-visible {
     dialog {
       padding-bottom: 0;
       border: solid var(--sg-border-width) var(--sg-border-color);
-      --border-color: var(--gds-ref-pallet-base800);
-      --sg-border-color: var(--gds-ref-pallet-base800);
+      --border-color: var(--text-primary-color);
+      --sg-border-color: var(--text-primary-color);
       border-radius: var(--sg-border-radius);
       max-height: 500px;
       box-shadow: var(--sg-popover-box-shadow);
@@ -2503,8 +2504,8 @@ var dropdown_trans_styles_default = `/**
     padding-top: 0.75rem;
     border-radius: var(--sg-border-radius);
     border: solid var(--sg-border-width) var(--sg-border-color);
-    --border-color: var(--gds-ref-pallet-base600);
-    --sg-border-color: var(--gds-ref-pallet-base600);
+    --border-color: var(--grey-800);
+    --sg-border-color: var(--grey-800);
     background: var(--sg-form-control-bg);
     color: var(--text-primary-color);
     min-height: 2.75rem;
@@ -2598,11 +2599,11 @@ var dropdown_trans_styles_default = `/**
     }
   }
   button:not(:disabled, .disabled, [aria-disabled]):hover {
-    --background: var(--gds-ref-pallet-base200);
-    --color: var(--gds-ref-pallet-base800);
-    background-color: var(--gds-ref-pallet-base200);
-    color: var(--gds-ref-pallet-base800);
-    border-color: var(--gds-ref-pallet-base800);
+    --background: var(--grey-400);
+    --color: var(--grey-1000);
+    background-color: var(--grey-400);
+    color: var(--grey-1000);
+    border-color: var(--grey-1000);
   }
   button > span {
     white-space: nowrap;
@@ -2612,8 +2613,8 @@ var dropdown_trans_styles_default = `/**
   button::after {
     margin-left: 0.5rem;
     margin-right: 0.5rem;
-    border-bottom: solid 2px var(--gds-ref-pallet-base800);
-    border-left: solid 2px var(--gds-ref-pallet-base800);
+    border-bottom: solid 2px var(--text-primary-color);
+    border-left: solid 2px var(--text-primary-color);
     content: "";
     display: block;
     height: 0.5rem;
@@ -2634,7 +2635,7 @@ var dropdown_trans_styles_default = `/**
     font-size: 0.875rem;
   }
   button:hover {
-    background: var(--gds-ref-pallet-base300);
+    background: var(--grey-400);
   }
   label {
     display: block;
@@ -2913,11 +2914,11 @@ var calendar_trans_styles_default = `/* stylelint-disable max-nesting-depth */
     :host table tbody tr td.today {
       background: transparent;
       border-radius: 4px;
-      color: var(--gds-ref-pallet-base800);
-      box-shadow: inset 0 0 0 2px var(--gds-ref-pallet-base800);
+      color: var(--grey-1000);
+      box-shadow: inset 0 0 0 2px var(--grey-1000);
     }
     :host table tbody tr td:hover:not(.disabled) {
-      background: var(--gds-ref-pallet-base300);
+      background: var(--grey-500);
       border: solid 1px var(--sg-bg-level-2);
       border-radius: 4px;
       color: var(--gds-sys-color-font);
@@ -2941,7 +2942,7 @@ var calendar_trans_styles_default = `/* stylelint-disable max-nesting-depth */
       z-index: 0;
     }
     :host table tbody tr td[aria-selected=true] {
-      background: var(--gds-ref-pallet-base800);
+      background: var(--grey-1000);
       border: solid 1px var(--sg-bg-level-2);
       border-radius: 4px;
       color: hsl(var(--sg-hsl-white));
@@ -2950,7 +2951,7 @@ var calendar_trans_styles_default = `/* stylelint-disable max-nesting-depth */
       border-radius: 4px;
     }
     :host table tbody tr td:hover:active:not(.disabled) {
-      background: var(--gds-ref-pallet-base800);
+      background: var(--grey-1000);
       border: solid 1px var(--sg-bg-level-2);
       border-radius: 4px;
       color: hsl(var(--sg-hsl-white));
@@ -3098,7 +3099,7 @@ i.sg-icon.sg-icon-ellipsis::before {
     cursor: text;
   }
   .field:hover {
-    background-color: var(--gds-ref-pallet-base100);
+    background-color: var(--grey-200);
   }
   .field .input {
     padding-left: 1rem;
@@ -3154,6 +3155,7 @@ i.sg-icon.sg-icon-ellipsis::before {
     cursor: pointer;
     width: 2.75rem;
     background: transparent;
+    color: var(--text-primary-color);
   }
   .field button:focus:not(:focus-visible) {
     box-shadow: none;
@@ -3166,7 +3168,7 @@ i.sg-icon.sg-icon-ellipsis::before {
     outline-offset: 0.125rem;
   }
   .field button:hover {
-    background: var(--gds-ref-pallet-base300);
+    background: var(--grey-500);
   }
   .field button svg {
     width: 1rem;
@@ -3248,15 +3250,15 @@ i.sg-icon.sg-icon-ellipsis::before {
     outline-offset: 0.125rem;
   }
   .header button:hover {
-    background: var(--gds-ref-pallet-base300);
+    background: var(--grey-400);
   }
   .header button:focus-visible {
     outline-offset: 0;
   }
   .header button .icon::before {
     background: none;
-    border-bottom: 2px solid;
-    border-left: 2px solid;
+    border-bottom: 2px solid var(--grey-1000);
+    border-left: 2px solid var(--grey-1000);
     content: "";
     display: block;
     height: 8px;
@@ -3353,7 +3355,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 = "-260c87";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var templateCache = /* @__PURE__ */ new WeakMap();
 function applyElementScoping(strings, ...values) {