@sebgroup/green-core 1.15.1 → 1.17.0

package/chunks/chunk.KC32OWZE.js

@@ -0,0 +1,274 @@
+import {
+  renderMonthGridView
+} from "./chunk.375BWME4.js";
+import {
+  TransitionalStyles
+} from "./chunk.QONSFT2N.js";
+import {
+  GdsElement
+} from "./chunk.2LQSDOD4.js";
+import {
+  watch
+} from "./chunk.2WO4NHJ2.js";
+import {
+  gdsCustomElement
+} from "./chunk.VOYMQ322.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateMethod
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/primitives/calendar/calendar.ts
+import { html } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { when } from "lit/directives/when.js";
+import { property, query, state } from "lit/decorators.js";
+import { msg } from "@lit/localize";
+import {
+  addDays,
+  isSameDay,
+  isSameMonth,
+  getWeek,
+  subMonths,
+  addMonths
+} from "date-fns";
+
+// libs/core/src/primitives/calendar/calendar.styles.ts
+import { css } from "lit";
+var style = css`
+  @layer base, reset, transitional-styles;
+  @layer base {
+    td.disabled {
+      color: #999;
+      cursor: default;
+    }
+    td.today {
+      background-color: #eee;
+    }
+  }
+`;
+var calendar_styles_default = style;
+
+// libs/core/src/primitives/calendar/calendar.ts
+var _setSelectedDate, setSelectedDate_fn, _handleKeyDown, handleKeyDown_fn;
+var GdsCalendar = class extends GdsElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _setSelectedDate);
+    __privateAdd(this, _handleKeyDown);
+    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) {
+    const newDate = new Date(this.focusedDate);
+    newDate.setMonth(month);
+    newDate.setHours(0, 0, 0, 0);
+    this.focusedDate = newDate;
+  }
+  get focusedYear() {
+    return this.focusedDate.getFullYear();
+  }
+  set focusedYear(year) {
+    this.focusedDate = new Date(this.focusedDate.setFullYear(year));
+  }
+  /**
+   * Returns the date cell element for the given day number.
+   */
+  getDateCell(dayNumber) {
+    var _a;
+    return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(`#dateCell-${dayNumber}`);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    TransitionalStyles.instance.apply(this, "gds-calendar");
+    this.addEventListener("keydown", __privateMethod(this, _handleKeyDown, handleKeyDown_fn));
+  }
+  focus() {
+    var _a;
+    super.focus();
+    (_a = this._elFocusedCell) == null ? void 0 : _a.focus();
+  }
+  render() {
+    const currentDate = /* @__PURE__ */ new Date();
+    return html`${this._tStyles}
+      <table>
+        <thead>
+          <tr>
+            ${when(this.showWeekNumbers, () => html`<th></th>`)}
+            <th>${msg("Mon")}</th>
+            <th>${msg("Tue")}</th>
+            <th>${msg("Wed")}</th>
+            <th>${msg("Thu")}</th>
+            <th>${msg("Fri")}</th>
+            <th>${msg("Sat")}</th>
+            <th>${msg("Sun")}</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${renderMonthGridView(
+      this.focusedDate,
+      (weeks) => html`
+              ${weeks.map(
+        (week) => html`
+                  <tr>
+                    ${when(
+          this.showWeekNumbers,
+          () => html`<td class="week-number">
+                          ${getWeek(week.days[0])}
+                        </td>`
+        )}
+                    ${week.days.map((day) => {
+          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 html`
+                        <td
+                          class="${classMap({
+            disabled: Boolean(isDisabled),
+            today: isSameDay(currentDate, day)
+          })}"
+                          ?disabled=${isDisabled}
+                          tabindex="${isSameDay(this.focusedDate, day) ? 0 : -1}"
+                          aria-selected="${this.value && isSameDay(this.value, day)}"
+                          aria-label="${day.toDateString()}"
+                          @click=${() => isDisabled ? null : __privateMethod(this, _setSelectedDate, setSelectedDate_fn).call(this, day)}
+                          id="dateCell-${day.getDate()}"
+                        >
+                          ${day.getDate()}
+                        </td>
+                      `;
+        })}
+                  </tr>
+                `
+      )}
+            `
+    )}
+        </tbody>
+      </table>`;
+  }
+  _valueChanged() {
+    if (!this.value)
+      return;
+    this.focusedDate = this.value;
+  }
+};
+_setSelectedDate = new WeakSet();
+setSelectedDate_fn = function(date) {
+  this.value = date;
+  this.dispatchEvent(
+    new CustomEvent("change", {
+      detail: date,
+      bubbles: false,
+      composed: false
+    })
+  );
+};
+_handleKeyDown = new WeakSet();
+handleKeyDown_fn = function(e) {
+  var _a;
+  let handled = false;
+  let newFocusedDate = new Date(this.focusedDate);
+  if (e.key === "ArrowLeft") {
+    newFocusedDate = addDays(this.focusedDate, -1);
+    handled = true;
+  } else if (e.key === "ArrowRight") {
+    newFocusedDate = addDays(this.focusedDate, 1);
+    handled = true;
+  } else if (e.key === "ArrowUp") {
+    newFocusedDate = addDays(this.focusedDate, -7);
+    handled = true;
+  } else if (e.key === "ArrowDown") {
+    newFocusedDate = addDays(this.focusedDate, 7);
+    handled = true;
+  } else if (e.key === "Enter" || e.key === " ") {
+    if (!((_a = this._elFocusedCell) == null ? void 0 : _a.hasAttribute("disabled"))) {
+      __privateMethod(this, _setSelectedDate, setSelectedDate_fn).call(this, this.focusedDate);
+    }
+    handled = true;
+  } else if (e.key === "Home") {
+    newFocusedDate = new Date(this.focusedYear, this.focusedMonth, 1);
+    handled = true;
+  } else if (e.key === "End") {
+    newFocusedDate = new Date(this.focusedYear, this.focusedMonth + 1, 0);
+    handled = true;
+  } else if (e.key === "PageUp") {
+    newFocusedDate = subMonths(this.focusedDate, 1);
+    handled = true;
+  } else if (e.key === "PageDown") {
+    newFocusedDate = addMonths(this.focusedDate, 1);
+    handled = true;
+  }
+  if (newFocusedDate.getFullYear() >= this.min.getFullYear() && newFocusedDate.getFullYear() <= this.max.getFullYear()) {
+    this.focusedDate = newFocusedDate;
+  }
+  if (handled) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.updateComplete.then(() => {
+      var _a2;
+      (_a2 = this._elFocusedCell) == null ? void 0 : _a2.focus();
+      this.dispatchEvent(
+        new CustomEvent("gds-date-focused", {
+          detail: this.focusedDate,
+          bubbles: false,
+          composed: false
+        })
+      );
+    });
+  }
+};
+GdsCalendar.styles = [calendar_styles_default];
+GdsCalendar.shadowRootOptions = {
+  mode: "open",
+  delegatesFocus: true
+};
+__decorateClass([
+  property()
+], GdsCalendar.prototype, "value", 2);
+__decorateClass([
+  property({ type: Date })
+], GdsCalendar.prototype, "min", 2);
+__decorateClass([
+  property({ type: Date })
+], GdsCalendar.prototype, "max", 2);
+__decorateClass([
+  property()
+], GdsCalendar.prototype, "focusedDate", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "disabled-weekends" })
+], GdsCalendar.prototype, "disabledWeekends", 2);
+__decorateClass([
+  property({ type: Array, attribute: "disabled-dates" })
+], GdsCalendar.prototype, "disabledDates", 2);
+__decorateClass([
+  property({ type: Number })
+], GdsCalendar.prototype, "focusedMonth", 1);
+__decorateClass([
+  property({ type: Number })
+], GdsCalendar.prototype, "focusedYear", 1);
+__decorateClass([
+  property({ type: Boolean })
+], GdsCalendar.prototype, "showWeekNumbers", 2);
+__decorateClass([
+  query('td[tabindex="0"]')
+], GdsCalendar.prototype, "_elFocusedCell", 2);
+__decorateClass([
+  state()
+], GdsCalendar.prototype, "_tStyles", 2);
+__decorateClass([
+  watch("value")
+], GdsCalendar.prototype, "_valueChanged", 1);
+GdsCalendar = __decorateClass([
+  gdsCustomElement("gds-calendar")
+], GdsCalendar);
+
+export {
+  GdsCalendar
+};

package/chunks/chunk.LUHCF4BJ.js

@@ -0,0 +1,64 @@
+import {
+  ListboxKbNavController,
+  unwrap
+} from "./chunk.DFYMYEGD.js";
+import {
+  TransitionalStyles
+} from "./chunk.QONSFT2N.js";
+import {
+  GdsElement
+} from "./chunk.2LQSDOD4.js";
+import {
+  gdsCustomElement,
+  html
+} from "./chunk.VOYMQ322.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/primitives/menu/menu.ts
+import { createRef, ref } from "lit/directives/ref.js";
+import { state } from "lit/decorators.js";
+var _slotRef;
+var GdsMenu = class extends GdsElement {
+  constructor() {
+    super();
+    __privateAdd(this, _slotRef, createRef());
+    new ListboxKbNavController(this);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "menu");
+    TransitionalStyles.instance.apply(this, "gds-listbox");
+  }
+  get navigableItems() {
+    if (!__privateGet(this, _slotRef).value)
+      return [];
+    return unwrap(__privateGet(this, _slotRef).value).assignedElements().filter(
+      (o) => !o.hasAttribute("isplaceholder") && o.gdsElementName === "gds-menu-item"
+    ) || [];
+  }
+  /**
+   * Focuses the first item in the menu.
+   */
+  focus() {
+    var _a;
+    (_a = this.navigableItems[0]) == null ? void 0 : _a.focus();
+  }
+  render() {
+    return html`${this._tStyles}<slot ${ref(__privateGet(this, _slotRef))}></slot>`;
+  }
+};
+_slotRef = new WeakMap();
+__decorateClass([
+  state()
+], GdsMenu.prototype, "_tStyles", 2);
+GdsMenu = __decorateClass([
+  gdsCustomElement("gds-menu")
+], GdsMenu);
+
+export {
+  GdsMenu
+};

package/chunks/chunk.MAD5DQMN.js

@@ -0,0 +1,161 @@
+import {
+  ListboxKbNavController,
+  unwrap
+} from "./chunk.DFYMYEGD.js";
+import {
+  TransitionalStyles
+} from "./chunk.QONSFT2N.js";
+import {
+  GdsElement
+} from "./chunk.2LQSDOD4.js";
+import {
+  watch
+} from "./chunk.2WO4NHJ2.js";
+import {
+  gdsCustomElement,
+  html
+} from "./chunk.VOYMQ322.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/primitives/listbox/listbox.ts
+import { property, state } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import "reflect-metadata";
+
+// libs/core/src/primitives/listbox/listbox.styles.ts
+import { css } from "lit";
+var style = css`
+  @layer base, reset, transitional-styles;
+  @layer base {
+    :host {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+`;
+var listbox_styles_default = style;
+
+// libs/core/src/primitives/listbox/listbox.ts
+var _slotRef, _handleSelect;
+var GdsListbox = class extends GdsElement {
+  constructor() {
+    super();
+    this.multiple = false;
+    this.compareWith = (a, b) => a === b;
+    __privateAdd(this, _slotRef, createRef());
+    __privateAdd(this, _handleSelect, (e) => {
+      const option = e.target;
+      if (this.multiple)
+        option.selected = !option.selected;
+      else {
+        option.selected = true;
+        Array.from(this.options).forEach((el) => {
+          if (el !== option)
+            el.selected = false;
+        });
+      }
+      ;
+      this.ariaActiveDescendantElement = option;
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          bubbles: false,
+          composed: false
+        })
+      );
+    });
+    new ListboxKbNavController(this);
+  }
+  get navigableItems() {
+    return this.visibleOptionElements;
+  }
+  /**
+   * Returns a list of all `gds-option` elements in the listbox.
+   */
+  get options() {
+    if (!__privateGet(this, _slotRef).value)
+      return [];
+    return unwrap(__privateGet(this, _slotRef).value).assignedElements().filter(
+      (o) => !o.hasAttribute("isplaceholder") && o.gdsElementName === "gds-option"
+    ) || [];
+  }
+  /**
+   * Returns a list of all visible `gds-option` elements in the listbox.
+   */
+  get visibleOptionElements() {
+    return this.options.filter((el) => !el.hidden);
+  }
+  /**
+   * Returns a list of all visible `gds-option` elements in the listbox.
+   */
+  get visibleSelectedOptionElements() {
+    return this.options.filter((el) => el.selected && !el.hidden);
+  }
+  /**
+   * Returns a list of all selected `gds-option` elements in the listbox.
+   */
+  get selection() {
+    return this.options.filter((el) => el.selected);
+  }
+  set selection(values) {
+    this.options.forEach((el) => {
+      el.selected = values.some((v) => this.compareWith(v, el.value));
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "listbox");
+    TransitionalStyles.instance.apply(this, "gds-listbox");
+    this.addEventListener("gds-select", __privateGet(this, _handleSelect));
+  }
+  /**
+   * Focuses the first selected option in the listbox.
+   * If no option is selected, the first visible option is focused.
+   */
+  focus() {
+    var _a;
+    ;
+    (_a = this.visibleSelectedOptionElements[0] || this.visibleOptionElements[0]) == null ? void 0 : _a.focus();
+  }
+  render() {
+    return html`${this._tStyles}<slot ${ref(__privateGet(this, _slotRef))}></slot>`;
+  }
+  _rerenderOptions() {
+    this.options.forEach((el) => {
+      el.requestUpdate();
+    });
+  }
+};
+_slotRef = new WeakMap();
+_handleSelect = new WeakMap();
+GdsListbox.styles = listbox_styles_default;
+__decorateClass([
+  property({
+    type: Boolean,
+    reflect: true,
+    attribute: "aria-multiselectable",
+    converter: {
+      fromAttribute: Boolean,
+      toAttribute: (value) => value.toString()
+    }
+  })
+], GdsListbox.prototype, "multiple", 2);
+__decorateClass([
+  property()
+], GdsListbox.prototype, "compareWith", 2);
+__decorateClass([
+  state()
+], GdsListbox.prototype, "_tStyles", 2);
+__decorateClass([
+  watch("multiple")
+], GdsListbox.prototype, "_rerenderOptions", 1);
+GdsListbox = __decorateClass([
+  gdsCustomElement("gds-listbox")
+], GdsListbox);
+
+export {
+  GdsListbox
+};