@sebgroup/green-core 1.15.0 → 1.16.0

package/chunks/chunk.2OOTOCUG.js

@@ -0,0 +1,420 @@
+import {
+  GdsFormControlElement
+} from "./chunk.YIQIH4RW.js";
+import {
+  TransitionalStyles
+} from "./chunk.QONSFT2N.js";
+import {
+  observeLightDOM
+} from "./chunk.WM7HBMMV.js";
+import {
+  constrainSlots
+} from "./chunk.6NM7ENKA.js";
+import {
+  watch
+} from "./chunk.2WO4NHJ2.js";
+import {
+  gdsCustomElement,
+  getScopedTagName,
+  html
+} from "./chunk.VOYMQ322.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/components/dropdown/dropdown.ts
+import { property, query, queryAsync, state } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { when } from "lit/directives/when.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { classMap } from "lit/directives/class-map.js";
+import { msg, str, updateWhenLocaleChanges } from "@lit/localize";
+import "reflect-metadata";
+
+// libs/core/src/components/dropdown/dropdown.styles.ts
+import { css } from "lit";
+var style = css`
+  @layer base, reset, transitional-styles;
+
+  @layer base {
+    button {
+      appearance: none;
+      display: block;
+      background-color: black;
+      border-radius: 2rem;
+      border: none;
+      color: white;
+      padding: 0.7rem 2rem;
+      margin: 0.5rem 0;
+      box-sizing: border-box;
+    }
+  }
+`;
+var dropdown_styles_default = style;
+
+// libs/core/src/components/dropdown/dropdown.ts
+var _optionElements, _handleSearchFieldKeyUp, _handleSearchFieldKeyDown, _handleListboxKeyDown, _handleOptionFocusChange, _handleSelectionChange, handleSelectionChange_fn, _registerAutoCloseListener, registerAutoCloseListener_fn, _unregisterAutoCloseListener, unregisterAutoCloseListener_fn, _blurCloseListener, _tabCloseListener;
+var GdsDropdown = class extends GdsFormControlElement {
+  constructor() {
+    super();
+    /**
+     * Selects an option in the dropdown.
+     *
+     * @fires change
+     */
+    __privateAdd(this, _handleSelectionChange);
+    __privateAdd(this, _registerAutoCloseListener);
+    __privateAdd(this, _unregisterAutoCloseListener);
+    this.label = "";
+    this.open = false;
+    this.searchable = false;
+    this.multiple = false;
+    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);
+    /**
+     * Event handler for filtering the options in the dropdown.
+     *
+     * @param e The keyboard event.
+     */
+    __privateAdd(this, _handleSearchFieldKeyUp, (e) => {
+      const input = this._elSearchInput;
+      const options = Array.from(__privateGet(this, _optionElements));
+      options.forEach((o) => o.hidden = false);
+      if (!input.value)
+        return;
+      const filteredOptions = options.filter(
+        (o) => !this.searchFilter(input.value, o)
+      );
+      filteredOptions.forEach((o) => o.hidden = true);
+    });
+    /**
+     * Check for ArrowDown or Tab in the search field.
+     * If found, focus should be moved to the listbox.
+     */
+    __privateAdd(this, _handleSearchFieldKeyDown, (e) => {
+      var _a;
+      (_a = this._elListbox) == null ? void 0 : _a.then((listbox) => {
+        if (e.key === "ArrowDown" || e.key === "Tab") {
+          e.preventDefault();
+          listbox.focus();
+          return;
+        }
+      });
+    });
+    /**
+     * Check for Tab in the listbox.
+     * If found, focus should be moved to the search field.
+     */
+    __privateAdd(this, _handleListboxKeyDown, (e) => {
+      var _a;
+      if (e.key === "Tab" && this.searchable) {
+        e.preventDefault();
+        (_a = this._elSearchInput) == null ? void 0 : _a.focus();
+        return;
+      }
+    });
+    __privateAdd(this, _handleOptionFocusChange, (e) => {
+      const triggerButton = this._elTriggerBtn;
+      if (triggerButton)
+        triggerButton.ariaActiveDescendantElement = e.target;
+    });
+    /**
+     * A listener to close the dropdown when any other element is focused.
+     */
+    __privateAdd(this, _blurCloseListener, (e) => {
+      const isFocusOutside = e instanceof FocusEvent && e.relatedTarget && !this.contains(e.relatedTarget);
+      if (isFocusOutside)
+        this.open = false;
+    });
+    __privateAdd(this, _tabCloseListener, (e) => {
+      var _a;
+      if (e.key === "Tab" && !this.searchable) {
+        e.preventDefault();
+        this.open = false;
+        (_a = this._elTriggerBtn) == null ? void 0 : _a.focus();
+      }
+    });
+    constrainSlots(this);
+    updateWhenLocaleChanges(this);
+    __privateSet(this, _optionElements, this.getElementsByTagName(
+      getScopedTagName("gds-option")
+    ));
+  }
+  get type() {
+    return "gds-dropdown";
+  }
+  /**
+   * Get the options of the dropdown.
+   */
+  get options() {
+    return Array.from(__privateGet(this, _optionElements)).filter(
+      (o) => !o.hasAttribute("isplaceholder")
+    );
+  }
+  /**
+   * Return the first option with a isPlaceholder attribute.
+   * If no placeholder is found, this will be undefined.
+   */
+  get placeholder() {
+    return Array.from(__privateGet(this, _optionElements)).find(
+      (o) => o.hasAttribute("isplaceholder")
+    );
+  }
+  /**
+   * Returns the display value as a string.
+   * If the dropdown is in multiple mode, this will be a comma separated list of the selected values.
+   */
+  get displayValue() {
+    var _a, _b;
+    let displayValue;
+    if (Array.isArray(this.value)) {
+      this.value.length > 2 ? displayValue = msg(str`${this.value.length} selected`) : displayValue = this.value.reduce(
+        (acc, cur) => {
+          var _a2;
+          return acc + ((_a2 = this.options.find((v) => v.value === cur)) == null ? void 0 : _a2.innerHTML) + ", ";
+        },
+        ""
+      ).slice(0, -2);
+    } else {
+      displayValue = (_a = this.options.find((v) => v.selected)) == null ? void 0 : _a.innerHTML;
+    }
+    return displayValue || ((_b = this.placeholder) == null ? void 0 : _b.innerHTML) || "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    TransitionalStyles.instance.apply(this, "gds-dropdown");
+    this.updateComplete.then(() => {
+      this._handleLightDOMChange();
+      this._handleValueChange();
+    });
+  }
+  render() {
+    return html`
+      ${this._tStyles}
+      ${when(
+      this.label && !this.hideLabel,
+      () => html`<label for="trigger">${this.label}</label>`
+    )}
+
+      <span class="form-info"><slot name="sub-label"></slot></span>
+
+      <button
+        id="trigger"
+        @click="${() => this.open = !this.open}"
+        aria-haspopup="listbox"
+        role="combobox"
+        aria-owns="listbox"
+        aria-controls="listbox"
+        aria-expanded="${this.open}"
+        aria-label="${this.label}"
+        class=${classMap({ small: this.size === "small" })}
+      >
+        <slot name="trigger">
+          <span>${unsafeHTML(this.displayValue)}</span>
+        </slot>
+      </button>
+
+      <span class="form-info"><slot name="message"></slot></span>
+
+      <gds-popover
+        .label=${this.label}
+        .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}
+      >
+        ${when(
+      this.searchable,
+      () => html`<input
+              id="searchinput"
+              type="text"
+              aria-label="${msg("Filter available options")}"
+              placeholder="${msg("Search")}"
+              @keydown=${__privateGet(this, _handleSearchFieldKeyDown)}
+              @keyup=${__privateGet(this, _handleSearchFieldKeyUp)}
+            />`
+    )}
+
+        <gds-listbox
+          id="listbox"
+          .multiple="${ifDefined(this.multiple)}"
+          .compareWith="${this.compareWith}"
+          @change="${__privateMethod(this, _handleSelectionChange, handleSelectionChange_fn)}"
+          @gds-focus="${__privateGet(this, _handleOptionFocusChange)}"
+          @keydown=${__privateGet(this, _handleListboxKeyDown)}
+        >
+          <slot gds-allow="gds-option gds-menu-heading"></slot>
+        </gds-listbox>
+      </gds-popover>
+    `;
+  }
+  _handleLightDOMChange() {
+    var _a, _b;
+    this.requestUpdate();
+    if (this.multiple) {
+      this._handleValueChange();
+      return;
+    }
+    if (this.value === void 0) {
+      if (this.placeholder)
+        this.value = this.placeholder.value;
+      else
+        this.value = (_a = this.options[0]) == null ? void 0 : _a.value;
+    } else if (!this.placeholder && this.options.find(
+      (o) => this.compareWith(o.value, this.value)
+    ) === void 0) {
+      this.options[0] && (this.options[0].selected = true);
+      this.value = (_b = this.options[0]) == null ? void 0 : _b.value;
+    }
+  }
+  _handleValueChange() {
+    this._elListbox.then((listbox) => {
+      if (listbox) {
+        if (Array.isArray(this.value))
+          listbox.selection = this.value;
+        else
+          listbox.selection = [this.value];
+      }
+    });
+  }
+  _onOpenChange() {
+    const open = this.open;
+    Array.from(__privateGet(this, _optionElements)).forEach((o) => o.hidden = !open);
+    if (open)
+      __privateMethod(this, _registerAutoCloseListener, registerAutoCloseListener_fn).call(this);
+    else {
+      __privateMethod(this, _unregisterAutoCloseListener, unregisterAutoCloseListener_fn).call(this);
+      this._elSearchInput && (this._elSearchInput.value = "");
+    }
+    this.dispatchEvent(
+      new CustomEvent("gds-ui-state", {
+        detail: { open },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+};
+_optionElements = new WeakMap();
+_handleSearchFieldKeyUp = new WeakMap();
+_handleSearchFieldKeyDown = new WeakMap();
+_handleListboxKeyDown = new WeakMap();
+_handleOptionFocusChange = new WeakMap();
+_handleSelectionChange = new WeakSet();
+handleSelectionChange_fn = function() {
+  this._elListbox.then((listbox) => {
+    var _a;
+    if (this.multiple)
+      this.value = listbox.selection.map((s) => s.value);
+    else {
+      this.value = (_a = listbox.selection[0]) == null ? void 0 : _a.value;
+      this.open = false;
+      setTimeout(() => {
+        var _a2;
+        return (_a2 = this._elTriggerBtn) == null ? void 0 : _a2.focus();
+      }, 0);
+    }
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  });
+};
+_registerAutoCloseListener = new WeakSet();
+registerAutoCloseListener_fn = function() {
+  this.addEventListener("blur", __privateGet(this, _blurCloseListener));
+  this.addEventListener("gds-blur", __privateGet(this, _blurCloseListener));
+  this.addEventListener("keydown", __privateGet(this, _tabCloseListener));
+};
+_unregisterAutoCloseListener = new WeakSet();
+unregisterAutoCloseListener_fn = function() {
+  this.removeEventListener("blur", __privateGet(this, _blurCloseListener));
+  this.removeEventListener("gds-blur", __privateGet(this, _blurCloseListener));
+  this.removeEventListener("keydown", __privateGet(this, _tabCloseListener));
+};
+_blurCloseListener = new WeakMap();
+_tabCloseListener = new WeakMap();
+GdsDropdown.styles = dropdown_styles_default;
+GdsDropdown.shadowRootOptions = {
+  mode: "open",
+  delegatesFocus: true
+};
+__decorateClass([
+  property()
+], GdsDropdown.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsDropdown.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsDropdown.prototype, "searchable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsDropdown.prototype, "multiple", 2);
+__decorateClass([
+  property()
+], GdsDropdown.prototype, "compareWith", 2);
+__decorateClass([
+  property()
+], GdsDropdown.prototype, "searchFilter", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "sync-popover-width" })
+], GdsDropdown.prototype, "syncPopoverWidth", 2);
+__decorateClass([
+  property({ type: Number, attribute: "max-height" })
+], GdsDropdown.prototype, "maxHeight", 2);
+__decorateClass([
+  property()
+], GdsDropdown.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "hide-label" })
+], GdsDropdown.prototype, "hideLabel", 2);
+__decorateClass([
+  state()
+], GdsDropdown.prototype, "_tStyles", 2);
+__decorateClass([
+  query("#trigger")
+], GdsDropdown.prototype, "_elTriggerBtn", 2);
+__decorateClass([
+  queryAsync("#trigger")
+], GdsDropdown.prototype, "_elTriggerBtnAsync", 2);
+__decorateClass([
+  queryAsync("#listbox")
+], GdsDropdown.prototype, "_elListbox", 2);
+__decorateClass([
+  query("#searchinput")
+], GdsDropdown.prototype, "_elSearchInput", 2);
+__decorateClass([
+  observeLightDOM({
+    attributes: true,
+    childList: true,
+    subtree: true,
+    characterData: true
+  })
+], GdsDropdown.prototype, "_handleLightDOMChange", 1);
+__decorateClass([
+  watch("value")
+], GdsDropdown.prototype, "_handleValueChange", 1);
+__decorateClass([
+  watch("open")
+], GdsDropdown.prototype, "_onOpenChange", 1);
+GdsDropdown = __decorateClass([
+  gdsCustomElement("gds-dropdown")
+], GdsDropdown);
+
+export {
+  GdsDropdown
+};

package/chunks/chunk.2WO4NHJ2.js

@@ -0,0 +1,34 @@
+import {
+  __spreadValues
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/utils/decorators/watch.ts
+function watch(propertyName, options) {
+  const resolvedOptions = __spreadValues({
+    waitUntilFirstUpdate: false
+  }, options);
+  return (proto, propertyKey, descriptor) => {
+    const { update } = proto;
+    const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
+    proto.update = function(changedProps) {
+      watchedProperties.forEach((property) => {
+        var _a;
+        const key = property;
+        if (changedProps.has(key)) {
+          const oldValue = changedProps.get(key);
+          const newValue = this[key];
+          if (oldValue !== newValue) {
+            if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
+              (_a = descriptor.value) == null ? void 0 : _a.call(this, oldValue, newValue);
+            }
+          }
+        }
+      });
+      update.call(this, changedProps);
+    };
+  };
+}
+
+export {
+  watch
+};

package/chunks/chunk.2Y3BHFKO.js

@@ -0,0 +1,154 @@
+import {
+  GdsElement
+} from "./chunk.2LQSDOD4.js";
+import {
+  gdsCustomElement,
+  html
+} from "./chunk.VOYMQ322.js";
+import {
+  __decorateClass
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/components/icon/icon.ts
+import { unsafeCSS } from "lit";
+
+// libs/core/src/components/icon/stem.styles.scss
+var stem_styles_default = `svg:not([display=none]) {
+  contain: layout style;
+  display: flex;
+  height: 1lh;
+  isolation: isolate;
+  overflow: hidden;
+  width: auto;
+}
+
+symbol {
+  fill: none;
+  height: 24px;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2px;
+  width: 24px;
+}`;
+
+// libs/core/src/components/icon/icon.ts
+var GdsIcon = class extends GdsElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.name = "";
+  }
+  static get styles() {
+    return unsafeCSS(stem_styles_default);
+  }
+  render() {
+    const { name } = this;
+    return html`
+      <svg display="none">
+        <symbol id="plus">
+          <line x1="12" y1="5" x2="12" y2="19" />
+          <line x1="5" y1="12" x2="19" y2="12" />
+        </symbol>
+        <symbol id="x">
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </symbol>
+        <symbol id="chevron-right">
+          <polyline points="9 18 15 12 9 6" />
+        </symbol>
+        <symbol id="chevron-left">
+          <polyline points="15 18 9 12 15 6" />
+        </symbol>
+        <symbol id="chevron-down">
+          <polyline points="6 9 12 15 18 9" />
+        </symbol>
+        <symbol id="arrow">
+          <line x1="5" y1="12" x2="19" y2="12" />
+          <polyline points="12 5 19 12 12 19" />
+        </symbol>
+        <symbol id="bell">
+          <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
+          <path d="M13.73 21a2 2 0 0 1-3.46 0" />
+        </symbol>
+        <symbol id="calendar">
+          <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+          <line x1="16" y1="2" x2="16" y2="6" />
+          <line x1="8" y1="2" x2="8" y2="6" />
+          <line x1="3" y1="10" x2="21" y2="10" />
+        </symbol>
+        <symbol id="lock">
+          <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+          <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+        </symbol>
+        <symbol id="eye">
+          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+          <circle cx="12" cy="12" r="3" />
+        </symbol>
+        <symbol id="hash">
+          <line x1="4" y1="9" x2="20" y2="9" />
+          <line x1="4" y1="15" x2="20" y2="15" />
+          <line x1="10" y1="3" x2="8" y2="21" />
+          <line x1="16" y1="3" x2="14" y2="21" />
+        </symbol>
+        <symbol id="mail">
+          <path
+            d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
+          />
+          <polyline points="22,6 12,13 2,6" />
+        </symbol>
+        <symbol id="send">
+          <line x1="22" y1="2" x2="11" y2="13" />
+          <polygon points="22 2 15 22 11 13 2 9 22 2" />
+        </symbol>
+        <symbol id="info">
+          <circle cx="12" cy="12" r="10" />
+          <line x1="12" y1="16" x2="12" y2="12" />
+          <line x1="12" y1="8" x2="12.01" y2="8" />
+        </symbol>
+        <symbol id="tel">
+          <path
+            d="M15.05 5A5 5 0 0 1 19 8.95M15.05 1A9 9 0 0 1 23 8.94m-1 7.98v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"
+          />
+        </symbol>
+        <symbol id="search">
+          <circle cx="11" cy="11" r="8" />
+          <line x1="21" y1="21" x2="16.65" y2="16.65" />
+        </symbol>
+        <symbol id="user">
+          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+          <circle cx="12" cy="7" r="4" />
+        </symbol>
+        <symbol id="arrow-up">
+          <line x1="12" y1="19" x2="12" y2="5" />
+          <polyline points="5 12 12 5 19 12" />
+        </symbol>
+        <symbol id="arrow-down">
+          <line x1="12" y1="5" x2="12" y2="19" />
+          <polyline points="19 12 12 19 5 12" />
+        </symbol>
+        <symbol id="warning">
+          <path
+            d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+          />
+          <line x1="12" y1="9" x2="12" y2="13" />
+          <path x1="12" y1="17" x2="12.01" y2="17" />
+        </symbol>
+      </svg>
+      <svg viewBox="0 0 24 24">
+        <use href="#${name}"></use>
+      </svg>
+    `;
+  }
+};
+GdsIcon.properties = {
+  open: { type: String, reflect: true },
+  name: { type: String }
+};
+GdsIcon = __decorateClass([
+  gdsCustomElement("gds-icon")
+], GdsIcon);
+
+export {
+  GdsIcon
+};

package/chunks/chunk.375BWME4.js

@@ -0,0 +1,29 @@
+// libs/core/src/primitives/calendar/functions.ts
+import {
+  startOfMonth,
+  endOfMonth,
+  addDays,
+  eachWeekOfInterval,
+  eachDayOfInterval
+} from "date-fns";
+import { html } from "lit-html";
+function renderMonthGridView(date, template) {
+  const monthStart = startOfMonth(date);
+  const monthEnd = endOfMonth(date);
+  const weeks = eachWeekOfInterval(
+    { start: monthStart, end: monthEnd },
+    { weekStartsOn: 1 }
+  );
+  return html`${template(
+    weeks.map((weekStartDay) => ({
+      days: eachDayOfInterval({
+        start: weekStartDay,
+        end: addDays(weekStartDay, 6)
+      })
+    }))
+  )}`;
+}
+
+export {
+  renderMonthGridView
+};