@sebgroup/green-core 1.43.3 → 1.44.0

package/chunks/chunk.VWGN42IH.js

@@ -0,0 +1,353 @@
+import {
+  resizeObserver
+} from "./chunk.VHN4JEZC.js";
+import {
+  TransitionalStyles
+} from "./chunk.JYYUHYTN.js";
+import {
+  watch
+} from "./chunk.TYGMNHNO.js";
+import {
+  tokens
+} from "./chunk.6CJQHXBU.js";
+import {
+  GdsElement
+} from "./chunk.WIZDAKJ5.js";
+import {
+  gdsCustomElement,
+  html
+} from "./chunk.PBRH3UPJ.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "./chunk.SEHSDSX2.js";
+
+// libs/core/src/components/segmented-control/segmented-control.ts
+import { unsafeCSS } from "lit";
+import { query, state, property } from "lit/decorators.js";
+import { msg } from "@lit/localize";
+
+// libs/core/src/components/segmented-control/segmented-control.style.css?inline
+var segmented_control_style_default = `:host {
+  background-color: var(--gds-sys-color-container-container-dim1);
+  border: 0.25rem solid var(--gds-sys-color-container-container-dim1);
+  border-radius: calc(infinity * 1px);
+  box-sizing: border-box;
+  contain: layout;
+  display: inline-flex;
+  height: 3rem;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+:host([size='small']) {
+  height: 2.5rem;
+}
+
+#track {
+  box-sizing: border-box;
+  display: flex;
+  flex-grow: 1;
+  scroll-snap-type: inline mandatory;
+  overscroll-behavior-x: contain;
+  scroll-behavior: smooth;
+  overflow-x: scroll;
+  gap: 0.25rem;
+  position: relative;
+  scrollbar-width: none;
+}
+
+#track::-webkit-scrollbar {
+  display: none;
+}
+
+#btn-prev,
+#btn-next {
+  box-sizing: border-box;
+  align-items: center;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  aspect-ratio: 1;
+  background-color: var(--gds-sys-color-container-container-dim1);
+  border-radius: calc(infinity * 1px);
+  border-width: 0;
+  color: var(--gds-sys-color-content-content);
+  cursor: pointer;
+  display: flex;
+  font-size: 1rem;
+  height: 100%;
+  justify-content: center;
+  width: 2.5rem;
+  transition: 0.2s;
+  z-index: 2;
+  position: absolute;
+
+  @media (pointer: fine) {
+    &:hover {
+      background-color: color-mix(
+        in srgb,
+        var(--gds-sys-color-state-layers-state-black-dim1),
+        var(--gds-sys-color-container-container-dim1)
+      );
+    }
+  }
+}
+#btn-prev {
+  margin: 0 0.25rem 0 0;
+}
+#btn-next {
+  margin: 0 0 0 0.25rem;
+  right: 0;
+}
+
+#btn-prev[aria-hidden='true'],
+#btn-next[aria-hidden='true'] {
+  opacity: 0;
+  width: 0;
+  margin: 0;
+  padding: 0;
+}
+
+:host([size='small']) #btn-prev,
+:host([size='small']) #btn-next {
+  width: 2rem;
+}
+
+::slotted(*) {
+  flex-grow: 1;
+  flex-shrink: 0;
+  z-index: 1;
+  scroll-margin: 0 2.75rem;
+  scroll-snap-align: start;
+}
+
+#indicator {
+  background-color: var(--gds-sys-color-container-container-bright);
+  border-radius: calc(infinity * 1px);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  z-index: 0;
+  transition:
+    transform 0.2s,
+    width 0.2s;
+  z-index: 0;
+}
+`;
+
+// libs/core/src/components/segmented-control/segmented-control.ts
+var debounce = (fn, delay) => {
+  let timeoutId;
+  return () => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(fn, delay);
+  };
+};
+var _value, _handleSlotChange, handleSlotChange_fn, _scrollLeft, _scrollRight, _updateScrollBtnState, _updateScrollBtnStateDebounced, _updateIndicator, _handleSegmentClick, _updateSelectedFromValue;
+var GdsSegmentedControl = class extends GdsElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _handleSlotChange);
+    this.size = "medium";
+    __privateAdd(this, _value, void 0);
+    this._showPrevButton = false;
+    this._showNextButton = false;
+    this.intersectionObserver = null;
+    __privateAdd(this, _scrollLeft, () => {
+      const nextLeftOutOfView = this.segments.filter(
+        (s, i, arr) => {
+          var _a;
+          return ((_a = arr[i + 2]) == null ? void 0 : _a.isVisible) && !s.isVisible;
+        }
+      )[0];
+      nextLeftOutOfView.scrollIntoView();
+    });
+    __privateAdd(this, _scrollRight, () => {
+      const nextRightOutOfView = this.segments.filter((s, i, arr) => {
+        var _a;
+        return ((_a = arr[i - 2]) == null ? void 0 : _a.isVisible) && !s.isVisible;
+      }).reverse()[0];
+      nextRightOutOfView.scrollIntoView();
+    });
+    // Updates the visibility of the scroll buttons
+    __privateAdd(this, _updateScrollBtnState, () => {
+      if (this.segments.every((s) => !s.isVisible))
+        return;
+      this._showPrevButton = !this.segments[0].isVisible;
+      this._showNextButton = !this.segments[this.segments.length - 1].isVisible;
+    });
+    __privateAdd(this, _updateScrollBtnStateDebounced, debounce(__privateGet(this, _updateScrollBtnState), 50));
+    // Updates the selection indicator position
+    __privateAdd(this, _updateIndicator, () => {
+      const segment = this.segments.find((s) => s.selected);
+      if (segment) {
+        const segmentWidth = segment.offsetWidth;
+        const segmentLeft = segment.offsetLeft;
+        this._elIndicator.style.transform = `translateX(${segmentLeft}px)`;
+        this._elIndicator.style.width = `${segmentWidth}px`;
+      } else {
+        this._elIndicator.style.transform = `translateX(-100%)`;
+        this._elIndicator.style.width = `0px`;
+      }
+    });
+    __privateAdd(this, _handleSegmentClick, (event) => {
+      const selectedSegment = this.segments.find(
+        (s) => s === event.target || s.contains(event.target)
+      );
+      if (selectedSegment) {
+        this.segments.forEach((s) => s.selected = false);
+        selectedSegment.selected = true;
+        __privateSet(this, _value, selectedSegment.value);
+        __privateGet(this, _updateIndicator).call(this);
+        this.dispatchEvent(
+          new CustomEvent("change", {
+            detail: { segment: selectedSegment },
+            bubbles: true,
+            composed: true
+          })
+        );
+      }
+    });
+    __privateAdd(this, _updateSelectedFromValue, () => {
+      if (!__privateGet(this, _value))
+        return;
+      this.updateComplete.then(() => {
+        const selectedSegment = this.segments.find((s) => s.value === __privateGet(this, _value));
+        if (selectedSegment) {
+          this.segments.forEach((s) => s.selected = false);
+          selectedSegment.selected = true;
+          selectedSegment.scrollIntoView();
+        }
+      });
+    });
+  }
+  get value() {
+    return __privateGet(this, _value);
+  }
+  set value(val) {
+    __privateSet(this, _value, val);
+    __privateGet(this, _updateSelectedFromValue).call(this);
+  }
+  /**
+   * Returns the segments in the control
+   * @readonly
+   */
+  get segments() {
+    return this._elSlot ? this._elSlot.assignedElements() : [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    TransitionalStyles.instance.apply(this, "gds-segmented-control");
+    this.updateComplete.then(() => {
+      this._elTrack.addEventListener("scroll", () => {
+        __privateGet(this, _updateScrollBtnStateDebounced).call(this);
+      });
+    });
+  }
+  render() {
+    return html`<button
+        aria-hidden=${!this._showPrevButton}
+        ?inert=${!this._showPrevButton}
+        id="btn-prev"
+        @click=${__privateGet(this, _scrollLeft)}
+        aria-label=${msg("Scroll right")}
+      >
+        <gds-icon-chevron-left />
+      </button>
+      <div id="track" role="list">
+        <slot
+          gds-allow="gds-segment"
+          @click=${__privateGet(this, _handleSegmentClick)}
+          @slotchange=${__privateMethod(this, _handleSlotChange, handleSlotChange_fn)}
+          role="none"
+        ></slot>
+        <div id="indicator" role="none"></div>
+      </div>
+      <button
+        aria-hidden=${!this._showNextButton}
+        ?inert=${!this._showNextButton}
+        id="btn-next"
+        @click=${__privateGet(this, _scrollRight)}
+        aria-label=${msg("Scroll right")}
+      >
+        <gds-icon-chevron-right />
+      </button>`;
+  }
+  _recalculateMinWidth() {
+    this.updateComplete.then(() => {
+      __privateGet(this, _updateScrollBtnStateDebounced).call(this);
+      __privateGet(this, _updateIndicator).call(this);
+    });
+  }
+};
+_value = new WeakMap();
+_handleSlotChange = new WeakSet();
+handleSlotChange_fn = function() {
+  var _a, _b;
+  const selSegmentValue = (_a = this.segments.find((s) => s.selected)) == null ? void 0 : _a.value;
+  if (selSegmentValue) {
+    __privateSet(this, _value, selSegmentValue);
+  }
+  (_b = this.intersectionObserver) == null ? void 0 : _b.disconnect();
+  this.intersectionObserver = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        const segment = entry.target;
+        segment._isVisible = entry.intersectionRatio > 0.99;
+      });
+    },
+    {
+      root: this._elTrack,
+      threshold: [0, 0.01, 0.5, 0.99, 1]
+    }
+  );
+  this.segments.forEach((s) => {
+    var _a2;
+    (_a2 = this.intersectionObserver) == null ? void 0 : _a2.observe(s);
+  });
+};
+_scrollLeft = new WeakMap();
+_scrollRight = new WeakMap();
+_updateScrollBtnState = new WeakMap();
+_updateScrollBtnStateDebounced = new WeakMap();
+_updateIndicator = new WeakMap();
+_handleSegmentClick = new WeakMap();
+_updateSelectedFromValue = new WeakMap();
+GdsSegmentedControl.styles = [tokens, unsafeCSS(segmented_control_style_default)];
+__decorateClass([
+  property({ reflect: true })
+], GdsSegmentedControl.prototype, "size", 2);
+__decorateClass([
+  property()
+], GdsSegmentedControl.prototype, "value", 1);
+__decorateClass([
+  query("slot")
+], GdsSegmentedControl.prototype, "_elSlot", 2);
+__decorateClass([
+  query("#indicator")
+], GdsSegmentedControl.prototype, "_elIndicator", 2);
+__decorateClass([
+  query("#track")
+], GdsSegmentedControl.prototype, "_elTrack", 2);
+__decorateClass([
+  state()
+], GdsSegmentedControl.prototype, "_showPrevButton", 2);
+__decorateClass([
+  state()
+], GdsSegmentedControl.prototype, "_showNextButton", 2);
+__decorateClass([
+  resizeObserver(),
+  watch("segMinWidth")
+], GdsSegmentedControl.prototype, "_recalculateMinWidth", 1);
+GdsSegmentedControl = __decorateClass([
+  gdsCustomElement("gds-segmented-control")
+], GdsSegmentedControl);
+
+export {
+  GdsSegmentedControl
+};

package/chunks/{chunk.G5RHE73D.js → chunk.VXF3YSRJ.js}

@@ -1,12 +1,12 @@
 import {
   GdsIcon
-} from "./chunk.ZTLGMP5F.js";
+} from "./chunk.ZZGUHY3S.js";
 import {
   gdsCustomElement
-} from "./chunk.VOYMQ322.js";
+} from "./chunk.PBRH3UPJ.js";
 import {
   __decorateClass
-} from "./chunk.5VURDMKE.js";
+} from "./chunk.SEHSDSX2.js";
 
 // libs/core/src/components/icon/icons/bookmark-delete.ts
 var IconBookmarkDelete = class extends GdsIcon {

package/chunks/{chunk.PGIYE4BH.js → chunk.W3CSLCFV.js}

@@ -1,12 +1,12 @@
 import {
   GdsIcon
-} from "./chunk.ZTLGMP5F.js";
+} from "./chunk.ZZGUHY3S.js";
 import {
   gdsCustomElement
-} from "./chunk.VOYMQ322.js";
+} from "./chunk.PBRH3UPJ.js";
 import {
   __decorateClass
-} from "./chunk.5VURDMKE.js";
+} from "./chunk.SEHSDSX2.js";
 
 // libs/core/src/components/icon/icons/qr-code.ts
 var IconQrCode = class extends GdsIcon {

package/chunks/{chunk.X2752375.js → chunk.W6RVBQ5K.js}

@@ -1,12 +1,12 @@
 import {
   GdsIcon
-} from "./chunk.ZTLGMP5F.js";
+} from "./chunk.ZZGUHY3S.js";
 import {
   gdsCustomElement
-} from "./chunk.VOYMQ322.js";
+} from "./chunk.PBRH3UPJ.js";
 import {
   __decorateClass
-} from "./chunk.5VURDMKE.js";
+} from "./chunk.SEHSDSX2.js";
 
 // libs/core/src/components/icon/icons/scissors.ts
 var IconScissors = class extends GdsIcon {

package/chunks/{chunk.BW4EKA7P.js → chunk.WAJYB5UW.js}

@@ -1,12 +1,12 @@
 import {
   GdsIcon
-} from "./chunk.ZTLGMP5F.js";
+} from "./chunk.ZZGUHY3S.js";
 import {
   gdsCustomElement
-} from "./chunk.VOYMQ322.js";
+} from "./chunk.PBRH3UPJ.js";
 import {
   __decorateClass
-} from "./chunk.5VURDMKE.js";
+} from "./chunk.SEHSDSX2.js";
 
 // libs/core/src/components/icon/icons/todos.ts
 var IconTodos = class extends GdsIcon {

package/chunks/{chunk.XFGFRJTF.js → chunk.WGM6OBWS.js}

@@ -1,18 +1,18 @@
 import {
   tokens
-} from "./chunk.MM4R6TVG.js";
+} from "./chunk.6CJQHXBU.js";
 import {
   GdsElement
-} from "./chunk.VDIB4JW2.js";
+} from "./chunk.WIZDAKJ5.js";
 import {
   gdsCustomElement,
   html
-} from "./chunk.VOYMQ322.js";
+} from "./chunk.PBRH3UPJ.js";
 import {
   __decorateClass,
   __privateAdd,
   __privateMethod
-} from "./chunk.5VURDMKE.js";
+} from "./chunk.SEHSDSX2.js";
 
 // libs/core/src/components/badge/badge.ts
 import { property, state } from "lit/decorators.js";

package/chunks/{chunk.4Y6UKRGK.js → chunk.WGR2CM4G.js}

@@ -1,12 +1,12 @@
 import {
   GdsIcon
-} from "./chunk.ZTLGMP5F.js";
+} from "./chunk.ZZGUHY3S.js";
 import {
   gdsCustomElement
-} from "./chunk.VOYMQ322.js";
+} from "./chunk.PBRH3UPJ.js";
 import {
   __decorateClass
-} from "./chunk.5VURDMKE.js";
+} from "./chunk.SEHSDSX2.js";
 
 // libs/core/src/components/icon/icons/chevron-double-up.ts
 var IconChevronDoubleUp = class extends GdsIcon {

package/chunks/chunk.WIZDAKJ5.js

@@ -0,0 +1,30 @@
+import {
+  DynamicStylesController
+} from "./chunk.JY3EKAVI.js";
+import {
+  __decorateClass
+} from "./chunk.SEHSDSX2.js";
+
+// libs/core/src/gds-element.ts
+import { state } from "lit/decorators.js";
+import { LitElement } from "lit";
+import "reflect-metadata";
+var GdsElement = class extends LitElement {
+  constructor() {
+    super();
+    this._isUsingTransitionalStyles = false;
+    this._dynamicStylesController = new DynamicStylesController(this);
+  }
+  connectedCallback() {
+    var _a;
+    super.connectedCallback();
+    this.setAttribute("gds-element", ((_a = this.gdsElementName) == null ? void 0 : _a.toString()) || "");
+  }
+};
+__decorateClass([
+  state()
+], GdsElement.prototype, "_isUsingTransitionalStyles", 2);
+
+export {
+  GdsElement
+};

package/chunks/{chunk.AFV7OQQ7.js → chunk.WLHWP3TA.js}

@@ -1,12 +1,12 @@
 import {
   GdsIcon
-} from "./chunk.ZTLGMP5F.js";
+} from "./chunk.ZZGUHY3S.js";
 import {
   gdsCustomElement
-} from "./chunk.VOYMQ322.js";
+} from "./chunk.PBRH3UPJ.js";
 import {
   __decorateClass
-} from "./chunk.5VURDMKE.js";
+} from "./chunk.SEHSDSX2.js";
 
 // libs/core/src/components/icon/icons/brand-x.ts
 var IconBrandX = class extends GdsIcon {

package/chunks/{chunk.5M4S5P74.js → chunk.WPR7OXD2.js}

@@ -1,12 +1,12 @@
 import {
   GdsIcon
-} from "./chunk.ZTLGMP5F.js";
+} from "./chunk.ZZGUHY3S.js";
 import {
   gdsCustomElement
-} from "./chunk.VOYMQ322.js";
+} from "./chunk.PBRH3UPJ.js";
 import {
   __decorateClass
-} from "./chunk.5VURDMKE.js";
+} from "./chunk.SEHSDSX2.js";
 
 // libs/core/src/components/icon/icons/map-pin.ts
 var IconMapPin = class extends GdsIcon {

package/chunks/{chunk.IZCY56TH.js → chunk.WTJ3JXMT.js}

@@ -1,25 +1,25 @@
 import {
   GdsFormControlElement
-} from "./chunk.JIIVJ7QV.js";
+} from "./chunk.X7GD7UEM.js";
 import {
   constrainSlots
 } from "./chunk.KBYQYDL3.js";
 import {
   TransitionalStyles
-} from "./chunk.CWRLA7VT.js";
+} from "./chunk.JYYUHYTN.js";
 import {
   tokens
-} from "./chunk.MM4R6TVG.js";
+} from "./chunk.6CJQHXBU.js";
 import {
   gdsCustomElement,
   html
-} from "./chunk.VOYMQ322.js";
+} from "./chunk.PBRH3UPJ.js";
 import {
   __decorateClass,
   __privateAdd,
   __privateGet,
   __privateSet
-} from "./chunk.5VURDMKE.js";
+} from "./chunk.SEHSDSX2.js";
 
 // libs/core/src/components/button/button.ts
 import { nothing as nothing2, unsafeCSS } from "lit";
@@ -71,6 +71,7 @@ var button_style_default = `@layer tokens, core, a11y, ranks, sizes, variants, d
 @layer core {
   :host {
     display: inline-block;
+    max-width: 100%;
   }
 
   .button {
@@ -100,6 +101,7 @@ var button_style_default = `@layer tokens, core, a11y, ranks, sizes, variants, d
     text-decoration: none;
     transition-property: color, border-color;
     transition: all 0.4s;
+    max-width: 100%;
 
     &:focus {
       outline-color: color-mix(in srgb, currentcolor, #000 100%);
@@ -130,7 +132,6 @@ var button_style_default = `@layer tokens, core, a11y, ranks, sizes, variants, d
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      max-width: 20ch;
     }
   }
 }

package/chunks/{chunk.3TGS5VGW.js → chunk.WUAEF6N7.js}

@@ -1,12 +1,12 @@
 import {
   GdsIcon
-} from "./chunk.ZTLGMP5F.js";
+} from "./chunk.ZZGUHY3S.js";
 import {
   gdsCustomElement
-} from "./chunk.VOYMQ322.js";
+} from "./chunk.PBRH3UPJ.js";
 import {
   __decorateClass
-} from "./chunk.5VURDMKE.js";
+} from "./chunk.SEHSDSX2.js";
 
 // libs/core/src/components/icon/icons/bookmark-check.ts
 var IconBookmarkCheck = class extends GdsIcon {

package/chunks/{chunk.2JTLHQTZ.js → chunk.WZCSTAXY.js}

@@ -1,12 +1,12 @@
 import {
   GdsIcon
-} from "./chunk.ZTLGMP5F.js";
+} from "./chunk.ZZGUHY3S.js";
 import {
   gdsCustomElement
-} from "./chunk.VOYMQ322.js";
+} from "./chunk.PBRH3UPJ.js";
 import {
   __decorateClass
-} from "./chunk.5VURDMKE.js";
+} from "./chunk.SEHSDSX2.js";
 
 // libs/core/src/components/icon/icons/brand-bankid.ts
 var IconBrandBankid = class extends GdsIcon {

package/chunks/{chunk.ENXW2BUX.js → chunk.X2V4ZRX7.js}

@@ -1,12 +1,12 @@
 import {
   GdsIcon
-} from "./chunk.ZTLGMP5F.js";
+} from "./chunk.ZZGUHY3S.js";
 import {
   gdsCustomElement
-} from "./chunk.VOYMQ322.js";
+} from "./chunk.PBRH3UPJ.js";
 import {
   __decorateClass
-} from "./chunk.5VURDMKE.js";
+} from "./chunk.SEHSDSX2.js";
 
 // libs/core/src/components/icon/icons/arrow-wall-up.ts
 var IconArrowWallUp = class extends GdsIcon {

package/chunks/{chunk.JIIVJ7QV.js → chunk.X7GD7UEM.js}

@@ -1,9 +1,9 @@
 import {
   watch
-} from "./chunk.2WO4NHJ2.js";
+} from "./chunk.TYGMNHNO.js";
 import {
   GdsElement
-} from "./chunk.VDIB4JW2.js";
+} from "./chunk.WIZDAKJ5.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -11,7 +11,7 @@ import {
   __privateSet,
   __spreadProps,
   __spreadValues
-} from "./chunk.5VURDMKE.js";
+} from "./chunk.SEHSDSX2.js";
 
 // libs/core/src/components/form/form-control.ts
 import { property } from "lit/decorators.js";

package/chunks/{chunk.5GR5UWQH.js → chunk.X7UDZKNI.js}

@@ -1,12 +1,12 @@
 import {
   GdsIcon
-} from "./chunk.ZTLGMP5F.js";
+} from "./chunk.ZZGUHY3S.js";
 import {
   gdsCustomElement
-} from "./chunk.VOYMQ322.js";
+} from "./chunk.PBRH3UPJ.js";
 import {
   __decorateClass
-} from "./chunk.5VURDMKE.js";
+} from "./chunk.SEHSDSX2.js";
 
 // libs/core/src/components/icon/icons/thumbs-down.ts
 var IconThumbsDown = class extends GdsIcon {

package/chunks/{chunk.YFTSZ7YP.js → chunk.XJOAQ4QI.js}

@@ -1,12 +1,12 @@
 import {
   GdsIcon
-} from "./chunk.ZTLGMP5F.js";
+} from "./chunk.ZZGUHY3S.js";
 import {
   gdsCustomElement
-} from "./chunk.VOYMQ322.js";
+} from "./chunk.PBRH3UPJ.js";
 import {
   __decorateClass
-} from "./chunk.5VURDMKE.js";
+} from "./chunk.SEHSDSX2.js";
 
 // libs/core/src/components/icon/icons/flag.ts
 var IconFlag = class extends GdsIcon {