@sebgroup/green-core 1.31.0 → 1.33.0

package/chunks/{chunk.MZSK66DN.js → chunk.2BMJPIND.js}

@@ -1,32 +1,28 @@
-import {
-  GdsElement
-} from "./chunk.ZQ4D5K7J.js";
 import {
   watch
 } from "./chunk.2WO4NHJ2.js";
+import {
+  GdsElement
+} from "./chunk.ZQ4D5K7J.js";
 import {
   __decorateClass,
   __privateAdd,
   __privateGet,
-  __privateSet
+  __privateSet,
+  __spreadProps,
+  __spreadValues
 } from "./chunk.5VURDMKE.js";
 
-// libs/core/src/components/form-control.ts
+// libs/core/src/components/form/form-control.ts
 import { property } from "lit/decorators.js";
+import { msg } from "@lit/localize";
 var _internals;
 var GdsFormControlElement = class extends GdsElement {
   constructor() {
     super();
     __privateAdd(this, _internals, void 0);
-    this.invalid = false;
+    this.required = false;
     this.name = "";
-    /**
-     * Event handler for the form reset event.
-     * Can be overridden by subclasses to rcustomize the reset value.
-     */
-    this._handleFormReset = () => {
-      this.value = void 0;
-    };
     try {
       __privateSet(this, _internals, this.attachInternals());
     } catch (e) {
@@ -58,6 +54,23 @@ var GdsFormControlElement = class extends GdsElement {
       });
     }
   }
+  set invalid(value) {
+    const oldValue = this.invalid;
+    __privateGet(this, _internals).setValidity(
+      __spreadProps(__spreadValues({}, __privateGet(this, _internals).validity), {
+        customError: value,
+        valid: !value
+      }),
+      this.validationMessage || msg(`Validation error`),
+      // @ts-expect-error - setValidity actually takes an element as the third argument, but the type definition is wrong.
+      this._getValidityAnchor() || void 0
+    );
+    this.requestUpdate("invalid", oldValue);
+    __privateGet(this, _internals).checkValidity();
+  }
+  get invalid() {
+    return !__privateGet(this, _internals).validity.valid;
+  }
   /**
    * The form element that the form control is associated with.
    */
@@ -74,45 +87,50 @@ var GdsFormControlElement = class extends GdsElement {
     return __privateGet(this, _internals).willValidate;
   }
   checkValidity() {
+    const anchor = this._getValidityAnchor();
+    if (!anchor || !this.validator)
+      return true;
+    const oldValue = this.invalid;
+    const validity = this.validator.validate(this) || [
+      __spreadProps(__spreadValues({}, this.validity), { valid: true }),
+      ""
+    ];
+    __privateGet(this, _internals).setValidity(
+      validity[0],
+      validity[1],
+      // @ts-expect-error - setValidity actually takes an element as the third argument, but the type definition is wrong.
+      this._getValidityAnchor()
+    );
+    this.requestUpdate("invalid", oldValue);
     return __privateGet(this, _internals).checkValidity();
   }
   reportValidity() {
     return __privateGet(this, _internals).reportValidity();
   }
-  connectedCallback() {
-    var _a;
-    super.connectedCallback();
-    (_a = __privateGet(this, _internals).form) == null ? void 0 : _a.addEventListener("reset", this._handleFormReset);
+  __handleValueChange() {
+    __privateGet(this, _internals).setFormValue(this.value);
+    this.checkValidity();
   }
-  disconnectedCallback() {
-    var _a;
-    super.disconnectedCallback();
-    (_a = __privateGet(this, _internals).form) == null ? void 0 : _a.removeEventListener("reset", this._handleFormReset);
+  formResetCallback() {
+    this.value = void 0;
   }
-  __handleValidityChange() {
-    __privateGet(this, _internals).setValidity(
-      {
-        badInput: false,
-        customError: this.invalid,
-        patternMismatch: false,
-        rangeOverflow: false,
-        rangeUnderflow: false,
-        stepMismatch: false,
-        tooLong: false,
-        tooShort: false,
-        typeMismatch: false,
-        valueMissing: false,
-        valid: !this.invalid
-      },
-      this.validationMessage || "Error message"
-    );
+  formAssociatedCallback(form) {
+    form.addEventListener("submit", this._handleFormSubmit.bind(this));
   }
-  __handleValueChange() {
-    __privateGet(this, _internals).setFormValue(this.value);
+  _handleFormSubmit(e) {
+    this.checkValidity();
+    if (!this.validity.valid)
+      e.preventDefault();
   }
 };
 _internals = new WeakMap();
 GdsFormControlElement.formAssociated = true;
+__decorateClass([
+  property({ attribute: false })
+], GdsFormControlElement.prototype, "validator", 2);
+__decorateClass([
+  property({ type: Boolean })
+], GdsFormControlElement.prototype, "required", 2);
 __decorateClass([
   property({
     type: Boolean,
@@ -123,16 +141,16 @@ __decorateClass([
       toAttribute: (value) => value == null ? void 0 : value.toString()
     }
   })
-], GdsFormControlElement.prototype, "invalid", 2);
+], GdsFormControlElement.prototype, "invalid", 1);
+__decorateClass([
+  property()
+], GdsFormControlElement.prototype, "label", 2);
 __decorateClass([
   property()
 ], GdsFormControlElement.prototype, "value", 2);
 __decorateClass([
   property({ reflect: true })
 ], GdsFormControlElement.prototype, "name", 2);
-__decorateClass([
-  watch("invalid")
-], GdsFormControlElement.prototype, "__handleValidityChange", 1);
 __decorateClass([
   watch("value")
 ], GdsFormControlElement.prototype, "__handleValueChange", 1);

package/chunks/{chunk.C3DZ5TYR.js → chunk.6GPKW7CQ.js}

@@ -1,15 +1,15 @@
-import {
-  GdsContainer
-} from "./chunk.GA7DIQNG.js";
 import {
   card_style_css_default
 } from "./chunk.3ULLOORV.js";
+import {
+  GdsContainer
+} from "./chunk.EONTEKQO.js";
 import {
   styleExpressionProperty
 } from "./chunk.ADPMTWTS.js";
 import {
   tokens
-} from "./chunk.EHAQQKN7.js";
+} from "./chunk.PMHM3R2E.js";
 import {
   gdsCustomElement,
   html

package/chunks/{chunk.QVB7U5PX.js → chunk.B4PJKZ3W.js}

@@ -1,9 +1,12 @@
+import {
+  divider_style_css_default
+} from "./chunk.VS5JKIZQ.js";
 import {
   styleExpressionProperty
 } from "./chunk.ADPMTWTS.js";
 import {
   tokens
-} from "./chunk.EHAQQKN7.js";
+} from "./chunk.PMHM3R2E.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";
@@ -11,9 +14,6 @@ import {
   gdsCustomElement,
   html
 } from "./chunk.VOYMQ322.js";
-import {
-  divider_style_css_default
-} from "./chunk.VS5JKIZQ.js";
 import {
   __decorateClass
 } from "./chunk.5VURDMKE.js";

package/chunks/{chunk.WIA7QHCX.js → chunk.DD3PZZQL.js}

@@ -1,6 +1,6 @@
 import {
   GdsFormControlElement
-} from "./chunk.MZSK66DN.js";
+} from "./chunk.2BMJPIND.js";
 import {
   observeLightDOM
 } from "./chunk.WM7HBMMV.js";
@@ -253,9 +253,14 @@ var GdsDropdown = class extends GdsFormControlElement {
         </gds-listbox>
       </gds-popover>
 
-      <span class="form-info"><slot name="message"></slot></span>
+      <span class="form-info"
+        ><slot name="message">${this.validationMessage}</slot></span
+      >
     `;
   }
+  _getValidityAnchor() {
+    return this._elTriggerBtn;
+  }
   _handleLightDOMChange() {
     var _a, _b;
     this.requestUpdate();

package/chunks/chunk.EN4BB5CC.js

@@ -0,0 +1,336 @@
+import {
+  GdsElement
+} from "./chunk.ZQ4D5K7J.js";
+import {
+  gdsCustomElement,
+  html
+} from "./chunk.VOYMQ322.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/components/coachmark/coachmark.ts
+import { property, state } from "lit/decorators.js";
+import {
+  computePosition,
+  detectOverflow,
+  arrow,
+  shift,
+  offset,
+  hide,
+  flip,
+  autoUpdate
+} from "@floating-ui/dom";
+import { ref, createRef } from "lit/directives/ref.js";
+
+// libs/core/src/components/coachmark/coachmark.styles.ts
+import { css } from "lit";
+var style = css`
+  .gds-coachmark {
+    visibility: hidden;
+    position: absolute;
+    z-index: 1060;
+    box-sizing: border-box;
+    padding: 1rem;
+    width: 20rem;
+    border-radius: 0.25rem;
+    background-color: #222;
+    color: #fff;
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+
+  #gds-arrow {
+    box-sizing: border-box;
+    z-index: -1;
+    position: absolute;
+    height: 1rem;
+    width: 1rem;
+    background-color: #222;
+    transform: rotate(45deg);
+  }
+
+  .arrow-top,
+  .arrow-top-start,
+  .arrow-top-end {
+    bottom: -0.5rem;
+  }
+
+  .arrow-bottom,
+  .arrow-bottom-start,
+  .arrow-bottom-end {
+    top: -0.5rem;
+  }
+
+  .arrow-left,
+  .arrow-left-start,
+  .arrow-left-end {
+    right: -0.5rem;
+  }
+
+  .arrow-right,
+  .arrow-right-start,
+  .arrow-right-end {
+    left: -0.5rem;
+  }
+`;
+var coachmark_styles_default = style;
+
+// libs/core/src/components/coachmark/coachmark.ts
+import { when } from "lit/directives/when.js";
+var _cardRef, _arrowRef, _targetedElement, _autoUpdateCleanupFn, _closeCoachMark, closeCoachMark_fn, _findTarget, findTarget_fn, _checkBoundingRect, checkBoundingRect_fn, _checkOverlap, checkOverlap_fn, _isElementOutsideView, isElementOutsideView_fn, _computeTooltipPosition, computeTooltipPosition_fn, _shouldTooltipBeVisible, shouldTooltipBeVisible_fn, _updateCoachmarks, updateCoachmarks_fn;
+var GdsCoachmark = class extends GdsElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _closeCoachMark);
+    __privateAdd(this, _findTarget);
+    __privateAdd(this, _checkBoundingRect);
+    __privateAdd(this, _checkOverlap);
+    __privateAdd(this, _isElementOutsideView);
+    __privateAdd(this, _computeTooltipPosition);
+    __privateAdd(this, _shouldTooltipBeVisible);
+    __privateAdd(this, _updateCoachmarks);
+    __privateAdd(this, _cardRef, createRef());
+    __privateAdd(this, _arrowRef, createRef());
+    __privateAdd(this, _targetedElement, void 0);
+    __privateAdd(this, _autoUpdateCleanupFn, void 0);
+    this._isVisible = false;
+    this._preventClose = false;
+    this.placement = "bottom";
+    this.overlappedBy = [];
+    this.target = [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("click", () => {
+      setTimeout(() => {
+        __privateMethod(this, _updateCoachmarks, updateCoachmarks_fn).call(this);
+        __privateMethod(this, _closeCoachMark, closeCoachMark_fn).call(this);
+      }, 400);
+    });
+    document.addEventListener("keydown", (event) => {
+      if (event.key === "Escape" && this._isVisible) {
+        __privateMethod(this, _closeCoachMark, closeCoachMark_fn).call(this);
+      }
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", __privateMethod(this, _closeCoachMark, closeCoachMark_fn));
+    document.removeEventListener("keydown", (event) => {
+      if (event.key === "Escape" && this._isVisible) {
+        __privateMethod(this, _closeCoachMark, closeCoachMark_fn).call(this);
+      }
+    });
+  }
+  firstUpdated() {
+    if (this.target.length > 0) {
+      __privateSet(this, _targetedElement, __privateMethod(this, _findTarget, findTarget_fn).call(this, this.target));
+      __privateMethod(this, _updateCoachmarks, updateCoachmarks_fn).call(this);
+    }
+  }
+  setPreventClose(preventClose) {
+    this._preventClose = preventClose;
+  }
+  render() {
+    return html`${when(
+      this.target.length > 0,
+      () => html`
+        <div
+          role="dialog"
+          class="gds-coachmark"
+          aria-label="Coachmark"
+          ${ref(__privateGet(this, _cardRef))}
+        >
+          <slot></slot>
+          <div id="gds-arrow" ${ref(__privateGet(this, _arrowRef))}></div>
+        </div>
+      `,
+      () => html``
+    )}`;
+  }
+};
+_cardRef = new WeakMap();
+_arrowRef = new WeakMap();
+_targetedElement = new WeakMap();
+_autoUpdateCleanupFn = new WeakMap();
+_closeCoachMark = new WeakSet();
+closeCoachMark_fn = function() {
+  var _a, _b;
+  if (!this._isVisible)
+    return;
+  this._isVisible = false;
+  (_a = __privateGet(this, _cardRef).value) == null ? void 0 : _a.remove();
+  (_b = __privateGet(this, _autoUpdateCleanupFn)) == null ? void 0 : _b.call(this);
+  window.dispatchEvent(new CustomEvent("tooltipClosed"));
+};
+_findTarget = new WeakSet();
+findTarget_fn = function(selectors) {
+  let shadow = false;
+  let el = void 0;
+  for (const selector of selectors) {
+    if (selector === "shadowRoot") {
+      shadow = true;
+      continue;
+    }
+    if (!el) {
+      el = document.querySelector(selector);
+    } else if (shadow && el.shadowRoot) {
+      el = el.shadowRoot.querySelector(selector);
+      shadow = false;
+    } else {
+      el = el.querySelector(selector);
+    }
+  }
+  return el;
+};
+_checkBoundingRect = new WeakSet();
+checkBoundingRect_fn = function(element, overlappedElement) {
+  if (element == overlappedElement)
+    return;
+  const elementRect = element.getBoundingClientRect();
+  const overlappedElementRect = overlappedElement.getBoundingClientRect();
+  return elementRect.top < overlappedElementRect.bottom && elementRect.bottom > overlappedElementRect.top && elementRect.left < overlappedElementRect.right && elementRect.right > overlappedElementRect.left;
+};
+_checkOverlap = new WeakSet();
+checkOverlap_fn = function(selectors) {
+  if (!selectors)
+    return false;
+  for (const selector of selectors) {
+    const el = document.querySelector(selector);
+    if (!el || getComputedStyle(el).visibility === "hidden")
+      continue;
+    if (__privateMethod(this, _checkBoundingRect, checkBoundingRect_fn).call(this, __privateGet(this, _targetedElement), el)) {
+      return true;
+    }
+  }
+  return false;
+};
+_isElementOutsideView = new WeakSet();
+isElementOutsideView_fn = function(element) {
+  const elementRect = element.getBoundingClientRect();
+  const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+  const windowWidth = window.innerWidth || document.documentElement.clientWidth;
+  return elementRect.top + elementRect.height < 0 || elementRect.top > windowHeight || elementRect.left + elementRect.width < 0 || elementRect.left > windowWidth;
+};
+_computeTooltipPosition = new WeakSet();
+computeTooltipPosition_fn = async function(targetedEl, componentEl, arrowEl) {
+  return computePosition(targetedEl, componentEl, {
+    placement: this.placement,
+    middleware: [
+      offset(() => ({
+        mainAxis: 16,
+        alignmentAxis: 16
+      })),
+      {
+        name: "detectOverflow",
+        async fn(positionState) {
+          const overflow = await detectOverflow(positionState, {
+            boundary: document.querySelector("main"),
+            rootBoundary: "document",
+            altBoundary: true,
+            padding: {
+              top: 167,
+              left: 20
+            }
+          });
+          return {
+            data: overflow
+          };
+        }
+      },
+      shift({ padding: 16 }),
+      flip(),
+      hide(),
+      arrow({
+        padding: 16,
+        element: arrowEl
+      })
+    ]
+  });
+};
+_shouldTooltipBeVisible = new WeakSet();
+shouldTooltipBeVisible_fn = function() {
+  if (!__privateGet(this, _targetedElement))
+    return false;
+  const isOutOfBound = __privateMethod(this, _isElementOutsideView, isElementOutsideView_fn).call(this, __privateGet(this, _targetedElement));
+  const isVisible = __privateGet(this, _targetedElement).checkVisibility();
+  const isOverlapping = this.overlappedBy.length === 0 ? false : __privateMethod(this, _checkOverlap, checkOverlap_fn).call(this, this.overlappedBy);
+  return !isOverlapping && !isOutOfBound && isVisible && window.innerWidth > 580;
+};
+_updateCoachmarks = new WeakSet();
+updateCoachmarks_fn = async function() {
+  const targetEl = __privateGet(this, _targetedElement);
+  const componentEl = __privateGet(this, _cardRef).value;
+  const arrowEl = __privateGet(this, _arrowRef).value;
+  if (!targetEl || !componentEl || !arrowEl)
+    return;
+  try {
+    __privateSet(this, _autoUpdateCleanupFn, autoUpdate(targetEl, componentEl, () => {
+      __privateMethod(this, _computeTooltipPosition, computeTooltipPosition_fn).call(this, targetEl, componentEl, arrowEl).then(
+        ({ x, y, middlewareData, placement }) => {
+          if (__privateMethod(this, _shouldTooltipBeVisible, shouldTooltipBeVisible_fn).call(this)) {
+            this._isVisible = true;
+            Object.assign(componentEl.style, {
+              visibility: "visible",
+              opacity: 1,
+              left: `${x}px`,
+              top: `${y}px`
+            });
+            if (middlewareData.arrow) {
+              const { x: x2, y: y2 } = middlewareData.arrow;
+              arrowEl.removeAttribute("class");
+              arrowEl.classList.add("arrow-" + placement);
+              Object.assign(arrowEl.style, {
+                left: x2 != null ? `${x2}px` : "",
+                top: y2 != null ? `${y2}px` : ""
+              });
+            }
+          } else {
+            this._isVisible = false;
+            Object.assign(componentEl.style, {
+              visibility: "hidden",
+              opacity: 0
+            });
+          }
+        }
+      );
+    }));
+  } catch (error) {
+    console.warn("failed to render tooltips");
+  }
+};
+GdsCoachmark.styles = coachmark_styles_default;
+/**
+ * @internal
+ */
+GdsCoachmark.shadowRootOptions = {
+  mode: "open",
+  delegatesFocus: true
+};
+__decorateClass([
+  state()
+], GdsCoachmark.prototype, "_isVisible", 2);
+__decorateClass([
+  state()
+], GdsCoachmark.prototype, "_preventClose", 2);
+__decorateClass([
+  property()
+], GdsCoachmark.prototype, "placement", 2);
+__decorateClass([
+  property({ attribute: false })
+], GdsCoachmark.prototype, "overlappedBy", 2);
+__decorateClass([
+  property({ attribute: false })
+], GdsCoachmark.prototype, "target", 2);
+GdsCoachmark = __decorateClass([
+  gdsCustomElement("gds-coachmark")
+], GdsCoachmark);
+
+export {
+  GdsCoachmark
+};

package/chunks/{chunk.GA7DIQNG.js → chunk.EONTEKQO.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.ADPMTWTS.js";
 import {
   tokens
-} from "./chunk.EHAQQKN7.js";
+} from "./chunk.PMHM3R2E.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";

package/chunks/{chunk.6VYOPBWL.js → chunk.FOBESBRV.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.KBYQYDL3.js";
 import {
   tokens
-} from "./chunk.EHAQQKN7.js";
+} from "./chunk.PMHM3R2E.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";

package/chunks/{chunk.H2DROYO6.js → chunk.G47WF6H3.js}

@@ -1,6 +1,6 @@
 import {
   tokens
-} from "./chunk.EHAQQKN7.js";
+} from "./chunk.PMHM3R2E.js";
 import {
   gdsCustomElement
 } from "./chunk.VOYMQ322.js";

package/chunks/{chunk.I2ZBV4TU.js → chunk.LIKF5UOW.js}

@@ -1,15 +1,15 @@
 import {
   GdsFormControlElement
-} from "./chunk.MZSK66DN.js";
+} from "./chunk.2BMJPIND.js";
 import {
   constrainSlots
 } from "./chunk.KBYQYDL3.js";
+import {
+  tokens
+} from "./chunk.PMHM3R2E.js";
 import {
   TransitionalStyles
 } from "./chunk.UZLOEUQK.js";
-import {
-  tokens
-} from "./chunk.EHAQQKN7.js";
 import {
   gdsCustomElement,
   html
@@ -470,6 +470,9 @@ var GdsButton = class extends GdsFormControlElement {
       </${tag}>
     `;
   }
+  _getValidityAnchor() {
+    return this._button;
+  }
 };
 _isIconButton = new WeakMap();
 _isLink = new WeakSet();
@@ -523,6 +526,9 @@ __decorateClass([
 __decorateClass([
   query("slot:not([name])")
 ], GdsButton.prototype, "_mainSlot", 2);
+__decorateClass([
+  query(".button")
+], GdsButton.prototype, "_button", 2);
 GdsButton = __decorateClass([
   gdsCustomElement("gds-button")
 ], GdsButton);

package/chunks/{chunk.P4WYUSGN.js → chunk.NF5O27GG.js}

@@ -1,21 +1,21 @@
 import {
   GdsSegment
-} from "./chunk.NPXN7ELA.js";
+} from "./chunk.TAUCOID4.js";
 import {
   resizeObserver
 } from "./chunk.VHN4JEZC.js";
+import {
+  tokens
+} from "./chunk.PMHM3R2E.js";
 import {
   TransitionalStyles
 } from "./chunk.UZLOEUQK.js";
 import {
-  tokens
-} from "./chunk.EHAQQKN7.js";
+  watch
+} from "./chunk.2WO4NHJ2.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";
-import {
-  watch
-} from "./chunk.2WO4NHJ2.js";
 import {
   gdsCustomElement,
   html

package/chunks/{chunk.ZBJOM5ED.js → chunk.NIRW5HCW.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.ADPMTWTS.js";
 import {
   tokens
-} from "./chunk.EHAQQKN7.js";
+} from "./chunk.PMHM3R2E.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";