@sebgroup/green-core 1.15.1 → 1.17.0

package/chunks/chunk.WJDR7FTS.js

@@ -0,0 +1,193 @@
+import {
+  watch
+} from "./chunk.2WO4NHJ2.js";
+import {
+  gdsCustomElement,
+  html
+} from "./chunk.VOYMQ322.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/components/datepicker/date-part-spinner.ts
+import { LitElement } from "lit";
+import { property, state } from "lit/decorators.js";
+var _inputBuffer, _increment, _decrement, _handleClick, _handleFocus, _handleBlur, _handleWheel, _handleKeyDown, _focusNextSpinner, focusNextSpinner_fn, _dispatchChangeEvent, dispatchChangeEvent_fn, _formatNumber, formatNumber_fn, _clamp, clamp_fn, _clearInputBuffer, clearInputBuffer_fn;
+var GdsDatePartSpinner = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _focusNextSpinner);
+    __privateAdd(this, _dispatchChangeEvent);
+    __privateAdd(this, _formatNumber);
+    __privateAdd(this, _clamp);
+    __privateAdd(this, _clearInputBuffer);
+    this.value = 0;
+    this.length = 2;
+    this.min = 0;
+    this.max = Number.MAX_SAFE_INTEGER;
+    this.displayValue = __privateMethod(this, _formatNumber, formatNumber_fn).call(this, this.value, this.length);
+    __privateAdd(this, _inputBuffer, "");
+    __privateAdd(this, _increment, () => {
+      let current = parseInt(this.value.toString());
+      if (Number.isNaN(current))
+        current = this.length === 2 ? this.min : (/* @__PURE__ */ new Date()).getFullYear() - 1;
+      this.value = __privateMethod(this, _clamp, clamp_fn).call(this, current + 1);
+      __privateMethod(this, _dispatchChangeEvent, dispatchChangeEvent_fn).call(this);
+    });
+    __privateAdd(this, _decrement, () => {
+      let current = parseInt(this.value.toString());
+      if (Number.isNaN(current))
+        current = this.length === 2 ? this.max : (/* @__PURE__ */ new Date()).getFullYear() + 1;
+      this.value = __privateMethod(this, _clamp, clamp_fn).call(this, current - 1);
+      __privateMethod(this, _dispatchChangeEvent, dispatchChangeEvent_fn).call(this);
+    });
+    __privateAdd(this, _handleClick, (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      this.focus();
+    });
+    __privateAdd(this, _handleFocus, () => {
+      __privateMethod(this, _clearInputBuffer, clearInputBuffer_fn).call(this);
+    });
+    __privateAdd(this, _handleBlur, () => {
+      if (__privateGet(this, _inputBuffer) === "")
+        return;
+      __privateMethod(this, _clearInputBuffer, clearInputBuffer_fn).call(this);
+      this.value = __privateMethod(this, _clamp, clamp_fn).call(this, parseInt(this.value.toString()));
+      __privateMethod(this, _dispatchChangeEvent, dispatchChangeEvent_fn).call(this);
+    });
+    __privateAdd(this, _handleWheel, (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (e.deltaY > 0) {
+        __privateGet(this, _decrement).call(this);
+      } else {
+        __privateGet(this, _increment).call(this);
+      }
+    });
+    __privateAdd(this, _handleKeyDown, (e) => {
+      let handled = false;
+      if (e.key === "ArrowUp") {
+        __privateGet(this, _increment).call(this);
+        handled = true;
+      } else if (e.key === "ArrowDown") {
+        __privateGet(this, _decrement).call(this);
+        handled = true;
+      } else {
+        const key = parseInt(e.key);
+        if (!isNaN(key)) {
+          if (__privateGet(this, _inputBuffer).length < this.length) {
+            __privateSet(this, _inputBuffer, __privateGet(this, _inputBuffer) + key.toString());
+            this.value = parseInt(__privateGet(this, _inputBuffer));
+          }
+          if (__privateGet(this, _inputBuffer).length === this.length) {
+            this.value = __privateMethod(this, _clamp, clamp_fn).call(this, this.value);
+            __privateMethod(this, _clearInputBuffer, clearInputBuffer_fn).call(this);
+            __privateMethod(this, _focusNextSpinner, focusNextSpinner_fn).call(this);
+            __privateMethod(this, _dispatchChangeEvent, dispatchChangeEvent_fn).call(this);
+          }
+          handled = true;
+        }
+      }
+      if (handled) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    });
+  }
+  // No need for a shadow root here
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "spinbutton");
+    this.setAttribute("tabindex", "0");
+    this.addEventListener("wheel", __privateGet(this, _handleWheel));
+    this.addEventListener("keydown", __privateGet(this, _handleKeyDown));
+    this.addEventListener("blur", __privateGet(this, _handleBlur));
+    this.addEventListener("focus", __privateGet(this, _handleFocus));
+    this.addEventListener("click", __privateGet(this, _handleClick));
+    this.addEventListener("mousedown", __privateGet(this, _handleClick));
+  }
+  focus(options) {
+    super.focus(options);
+    __privateGet(this, _handleFocus).call(this);
+  }
+  render() {
+    return html`${this.displayValue}`;
+  }
+  _refreshDisplayValue() {
+    this.displayValue = __privateMethod(this, _formatNumber, formatNumber_fn).call(this, this.value, this.length);
+    this.setAttribute("aria-valuetext", this.value.toString());
+  }
+};
+_inputBuffer = new WeakMap();
+_increment = new WeakMap();
+_decrement = new WeakMap();
+_handleClick = new WeakMap();
+_handleFocus = new WeakMap();
+_handleBlur = new WeakMap();
+_handleWheel = new WeakMap();
+_handleKeyDown = new WeakMap();
+_focusNextSpinner = new WeakSet();
+focusNextSpinner_fn = function() {
+  let nextSpinner = this.nextElementSibling;
+  while (nextSpinner) {
+    if (nextSpinner instanceof GdsDatePartSpinner) {
+      nextSpinner.focus();
+      break;
+    }
+    nextSpinner = nextSpinner.nextElementSibling;
+  }
+};
+_dispatchChangeEvent = new WeakSet();
+dispatchChangeEvent_fn = function() {
+  this.dispatchEvent(
+    new CustomEvent("change", {
+      detail: { value: this.value.toString() }
+    })
+  );
+};
+_formatNumber = new WeakSet();
+formatNumber_fn = function(num, padZeros) {
+  return String(num).padStart(padZeros, "0");
+};
+_clamp = new WeakSet();
+clamp_fn = function(value) {
+  return Math.max(this.min, Math.min(this.max, value));
+};
+_clearInputBuffer = new WeakSet();
+clearInputBuffer_fn = function() {
+  __privateSet(this, _inputBuffer, "");
+};
+GdsDatePartSpinner.formAssociated = true;
+__decorateClass([
+  property({ type: Number })
+], GdsDatePartSpinner.prototype, "value", 2);
+__decorateClass([
+  property({ type: Number })
+], GdsDatePartSpinner.prototype, "length", 2);
+__decorateClass([
+  property({ type: Number, attribute: "aria-valuemin" })
+], GdsDatePartSpinner.prototype, "min", 2);
+__decorateClass([
+  property({ type: Number, attribute: "aria-valuemax" })
+], GdsDatePartSpinner.prototype, "max", 2);
+__decorateClass([
+  state()
+], GdsDatePartSpinner.prototype, "displayValue", 2);
+__decorateClass([
+  watch("value")
+], GdsDatePartSpinner.prototype, "_refreshDisplayValue", 1);
+GdsDatePartSpinner = __decorateClass([
+  gdsCustomElement("gds-date-part-spinner")
+], GdsDatePartSpinner);
+
+export {
+  GdsDatePartSpinner
+};

package/chunks/chunk.WM7HBMMV.js

@@ -0,0 +1,54 @@
+// libs/core/src/utils/decorators/observe-light-dom.ts
+function observeLightDOM(observerConfig = {
+  attributes: true,
+  childList: true,
+  subtree: false,
+  characterData: true
+}) {
+  return (proto, _propertyKey, descriptor) => {
+    let observer;
+    const connectedCallback = proto.connectedCallback;
+    const disconnectedCallback = proto.disconnectedCallback;
+    proto.connectedCallback = function() {
+      connectedCallback == null ? void 0 : connectedCallback.call(this);
+      const callback = (_mutationList, _observer) => {
+        var _a;
+        (_a = descriptor.value) == null ? void 0 : _a.call(this);
+      };
+      observer = new MutationObserver(callback);
+      observer.observe(this, observerConfig);
+    };
+    proto.disconnectedCallback = function() {
+      disconnectedCallback == null ? void 0 : disconnectedCallback.call(this);
+      observer.disconnect();
+    };
+  };
+}
+
+// libs/core/src/utils/decorators/watch-media-query.ts
+function watchMediaQuery(q) {
+  return (proto, _propertyKey, descriptor) => {
+    const mediaQuery = window.matchMedia(q);
+    const connectedCallback = proto.connectedCallback;
+    const disconnectedCallback = proto.disconnectedCallback;
+    proto.connectedCallback = function() {
+      var _a;
+      connectedCallback == null ? void 0 : connectedCallback.call(this);
+      const listener = (e) => {
+        var _a2;
+        (_a2 = descriptor.value) == null ? void 0 : _a2.call(this, e.matches);
+      };
+      mediaQuery.addEventListener("change", listener);
+      this.disconnectedCallback = function() {
+        disconnectedCallback == null ? void 0 : disconnectedCallback.call(this);
+        mediaQuery.removeEventListener("change", listener);
+      };
+      (_a = descriptor.value) == null ? void 0 : _a.call(this, mediaQuery.matches);
+    };
+  };
+}
+
+export {
+  observeLightDOM,
+  watchMediaQuery
+};

package/chunks/chunk.XD5R3ZU3.js

@@ -0,0 +1,460 @@
+import {
+  GdsSegment
+} from "./chunk.U4DPJ4QU.js";
+import {
+  tokens
+} from "./chunk.EUQ5DOQM.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,
+  __privateMethod,
+  __privateSet,
+  __privateWrapper
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/components/segmented-control/segmented-control.ts
+import { unsafeCSS } from "lit";
+import { query, state, property } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+import { msg } from "@lit/localize";
+
+// libs/core/src/components/segmented-control/segmented-control.style.css
+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;
+  gap: 0.25rem;
+  height: 3rem;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+:host([size='small']) {
+  height: 2.5rem;
+}
+
+#track {
+  box-sizing: border-box;
+  display: flex;
+  flex-grow: 0;
+  flex-shrink: 1;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+
+#segments {
+  box-sizing: border-box;
+  display: inline-flex;
+  gap: 0.25rem;
+  position: relative;
+  transition: 0.2s;
+  z-index: 1;
+}
+
+#btn-prev,
+#btn-next {
+  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;
+
+  @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)
+      );
+    }
+  }
+}
+
+:host([size='small']) #btn-prev,
+:host([size='small']) #btn-next {
+  width: 2rem;
+}
+
+::slotted(*) {
+  flex-grow: 1;
+  flex-shrink: 0;
+  z-index: 1;
+}
+
+#indicator {
+  background-color: var(--gds-sys-color-container-container-bright);
+  border-radius: calc(infinity * 1px);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  transition:
+    transform 0.2s,
+    width 0.2s;
+  z-index: 0;
+}
+`;
+
+// libs/core/src/components/segmented-control/segmented-control.ts
+var BTN_SIZE = {
+  small: 36,
+  medium: 44
+};
+var getSegmentGap = (transitionalStyles) => transitionalStyles ? 0 : 4;
+var _value, _tid, _resizeObserver, _firstVisibleIndex, _calculatedSegmentWidth, _segmentWidth, _segmentsContainerLeft, _focusedIndex, _dragStartX, _dragStartLeft, _isDragging, _startDrag, _drag, _endDrag, _calcVisibleAfterDrag, _calcLayout, _applySegmentsTransform, _handleSlotChange, handleSlotChange_fn, _scrollLeft, _scrollRight, _updateScrollBtnState, _updateIndicator, _handleSegmentClick, _updateSelectedFromValue;
+var GdsSegmentedControl = class extends GdsElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _handleSlotChange);
+    this.segMinWidth = 100;
+    this.size = "medium";
+    __privateAdd(this, _value, void 0);
+    this._showPrevButton = false;
+    this._showNextButton = false;
+    __privateAdd(this, _tid, void 0);
+    __privateAdd(this, _resizeObserver, new ResizeObserver(() => {
+      __privateGet(this, _tid) && clearTimeout(__privateGet(this, _tid));
+      __privateSet(this, _tid, setTimeout(() => {
+        __privateGet(this, _calcLayout).call(this);
+      }, 20));
+    }));
+    __privateAdd(this, _firstVisibleIndex, 0);
+    __privateAdd(this, _calculatedSegmentWidth, 0);
+    __privateAdd(this, _segmentWidth, 0);
+    __privateAdd(this, _segmentsContainerLeft, 0);
+    __privateAdd(this, _focusedIndex, 0);
+    __privateAdd(this, _dragStartX, 0);
+    __privateAdd(this, _dragStartLeft, 0);
+    __privateAdd(this, _isDragging, false);
+    __privateAdd(this, _startDrag, (event) => {
+      __privateSet(this, _dragStartX, event.clientX);
+      __privateSet(this, _dragStartLeft, __privateGet(this, _segmentsContainerLeft));
+      __privateSet(this, _isDragging, true);
+    });
+    __privateAdd(this, _drag, (event) => {
+      if (!__privateGet(this, _isDragging))
+        return;
+      event.preventDefault();
+      const delta = event.clientX - __privateGet(this, _dragStartX);
+      if (Math.abs(delta) < 5)
+        return;
+      try {
+        if (!this._elSegments.hasPointerCapture(event.pointerId))
+          this._elSegments.setPointerCapture(event.pointerId);
+        __privateSet(this, _segmentsContainerLeft, __privateGet(this, _dragStartLeft) + delta);
+        __privateGet(this, _applySegmentsTransform).call(this);
+      } catch (e) {
+      }
+    });
+    __privateAdd(this, _endDrag, (event) => {
+      if (!__privateGet(this, _isDragging))
+        return;
+      __privateSet(this, _isDragging, false);
+      try {
+        this._elSegments.releasePointerCapture(event.pointerId);
+        __privateGet(this, _calcVisibleAfterDrag).call(this);
+      } catch (e) {
+      }
+    });
+    __privateAdd(this, _calcVisibleAfterDrag, () => {
+      __privateSet(this, _firstVisibleIndex, Math.round(
+        -__privateGet(this, _segmentsContainerLeft) / __privateGet(this, _calculatedSegmentWidth)
+      ));
+      __privateGet(this, _calcLayout).call(this);
+    });
+    // Calculates the layout based on the configured min width
+    // and the available space in the track
+    __privateAdd(this, _calcLayout, (followFocus = false) => {
+      const calcNumVisibleSegments = () => {
+        const numSegments = this.segments.length;
+        const availableWidth = this._elTrack.offsetWidth;
+        if (availableWidth / numSegments > this.segMinWidth) {
+          return {
+            count: numSegments,
+            segmentWidth: (availableWidth - getSegmentGap(this._isUsingTransitionalStyles) * (numSegments - 1)) / numSegments
+          };
+        }
+        const availableWidthIncBtns = this.offsetWidth - BTN_SIZE[this.size] * 2;
+        const maxVisibleSegments = Math.floor(
+          availableWidthIncBtns / this.segMinWidth
+        );
+        const segmentWidth = (availableWidth - getSegmentGap(this._isUsingTransitionalStyles) * (maxVisibleSegments - 1)) / maxVisibleSegments;
+        return {
+          count: maxVisibleSegments,
+          segmentWidth
+        };
+      };
+      const { count } = calcNumVisibleSegments();
+      if (followFocus) {
+        if (__privateGet(this, _focusedIndex) >= __privateGet(this, _firstVisibleIndex) + count) {
+          __privateSet(this, _firstVisibleIndex, __privateGet(this, _focusedIndex) - count + 1);
+        }
+        if (__privateGet(this, _focusedIndex) < __privateGet(this, _firstVisibleIndex)) {
+          __privateSet(this, _firstVisibleIndex, __privateGet(this, _focusedIndex));
+        }
+      }
+      const endFirstIndex = this.segments.length - count;
+      const hasReachedEnd = __privateGet(this, _firstVisibleIndex) >= endFirstIndex;
+      const isAtStart = __privateGet(this, _firstVisibleIndex) <= 0;
+      if (hasReachedEnd) {
+        __privateSet(this, _firstVisibleIndex, endFirstIndex);
+      }
+      if (isAtStart) {
+        __privateSet(this, _firstVisibleIndex, 0);
+      }
+      __privateGet(this, _updateScrollBtnState).call(this, count);
+      this.updateComplete.then(() => {
+        const { segmentWidth, count: count2 } = calcNumVisibleSegments();
+        this.segments.forEach((segment) => {
+          segment.style.width = segmentWidth + "px";
+        });
+        __privateSet(this, _segmentsContainerLeft, -__privateGet(this, _firstVisibleIndex) * segmentWidth - getSegmentGap(this._isUsingTransitionalStyles) * __privateGet(this, _firstVisibleIndex));
+        __privateGet(this, _applySegmentsTransform).call(this);
+        __privateSet(this, _calculatedSegmentWidth, segmentWidth);
+        __privateSet(this, _segmentWidth, segmentWidth);
+        __privateGet(this, _updateIndicator).call(this);
+      });
+    });
+    __privateAdd(this, _applySegmentsTransform, () => {
+      window.requestAnimationFrame(() => {
+        this._elSegments.style.transform = `translateX(${__privateGet(this, _segmentsContainerLeft)}px)`;
+      });
+    });
+    __privateAdd(this, _scrollLeft, () => {
+      __privateWrapper(this, _firstVisibleIndex)._--;
+      __privateGet(this, _calcLayout).call(this);
+    });
+    __privateAdd(this, _scrollRight, () => {
+      __privateWrapper(this, _firstVisibleIndex)._++;
+      __privateGet(this, _calcLayout).call(this);
+    });
+    // Updates the visibility of the scroll buttons
+    __privateAdd(this, _updateScrollBtnState, (numVisibleSegments) => {
+      this._showPrevButton = __privateGet(this, _firstVisibleIndex) > 0;
+      this._showNextButton = __privateGet(this, _firstVisibleIndex) < this.segments.length - numVisibleSegments;
+    });
+    // Updates the selection indicator position
+    __privateAdd(this, _updateIndicator, () => {
+      const segment = this.segments.find((s) => s.selected);
+      if (segment) {
+        const selectedSegmentIndex = this.segments.indexOf(segment);
+        const offset = selectedSegmentIndex * __privateGet(this, _segmentWidth) + getSegmentGap(this._isUsingTransitionalStyles) * selectedSegmentIndex;
+        this._elIndicator.style.transform = `translateX(${offset}px)`;
+        this._elIndicator.style.width = `${__privateGet(this, _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;
+          __privateSet(this, _focusedIndex, this.segments.indexOf(selectedSegment));
+          __privateGet(this, _calcLayout).call(this, true);
+        }
+      });
+    });
+  }
+  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");
+    __privateGet(this, _resizeObserver).observe(this);
+    this.addEventListener("focusin", (e) => {
+      if (e.target instanceof GdsSegment) {
+        __privateSet(this, _focusedIndex, this.segments.indexOf(e.target));
+        __privateGet(this, _calcLayout).call(this, true);
+      }
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __privateGet(this, _resizeObserver).unobserve(this);
+  }
+  render() {
+    return html`${this._tStyles}
+      ${when(
+      this._showPrevButton,
+      () => html`<button
+            id="btn-prev"
+            @click=${__privateGet(this, _scrollLeft)}
+            aria-label=${msg("Scroll right")}
+          >
+            <gds-icon name="chevron-left"></gds-icon>
+          </button>`
+    )}
+      <div
+        id="track"
+        @scroll=${() => {
+      this._elTrack.scrollLeft = 0;
+    }}
+      >
+        <div
+          id="segments"
+          @pointerdown=${__privateGet(this, _startDrag)}
+          @pointermove=${__privateGet(this, _drag)}
+          @touchmove=${__privateGet(this, _drag)}
+          @pointerup=${__privateGet(this, _endDrag)}
+          @pointercancel=${__privateGet(this, _endDrag)}
+          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>
+      </div>
+      ${when(
+      this._showNextButton,
+      () => html`<button
+            id="btn-next"
+            @click=${__privateGet(this, _scrollRight)}
+            aria-label=${msg("Scroll right")}
+          >
+            <gds-icon name="chevron-right"></gds-icon>
+          </button>`
+    )}`;
+  }
+  _recalculateMinWidth() {
+    this.updateComplete.then(() => __privateGet(this, _calcLayout).call(this));
+  }
+};
+_value = new WeakMap();
+_tid = new WeakMap();
+_resizeObserver = new WeakMap();
+_firstVisibleIndex = new WeakMap();
+_calculatedSegmentWidth = new WeakMap();
+_segmentWidth = new WeakMap();
+_segmentsContainerLeft = new WeakMap();
+_focusedIndex = new WeakMap();
+_dragStartX = new WeakMap();
+_dragStartLeft = new WeakMap();
+_isDragging = new WeakMap();
+_startDrag = new WeakMap();
+_drag = new WeakMap();
+_endDrag = new WeakMap();
+_calcVisibleAfterDrag = new WeakMap();
+_calcLayout = new WeakMap();
+_applySegmentsTransform = new WeakMap();
+_handleSlotChange = new WeakSet();
+handleSlotChange_fn = function() {
+  var _a;
+  const selSegmentValue = (_a = this.segments.find((s) => s.selected)) == null ? void 0 : _a.value;
+  if (selSegmentValue) {
+    __privateSet(this, _value, selSegmentValue);
+  }
+  __privateGet(this, _calcLayout).call(this);
+};
+_scrollLeft = new WeakMap();
+_scrollRight = new WeakMap();
+_updateScrollBtnState = new WeakMap();
+_updateIndicator = new WeakMap();
+_handleSegmentClick = new WeakMap();
+_updateSelectedFromValue = new WeakMap();
+GdsSegmentedControl.styles = [tokens, unsafeCSS(segmented_control_style_default)];
+__decorateClass([
+  property({ type: Number, attribute: "seg-min-width" })
+], GdsSegmentedControl.prototype, "segMinWidth", 2);
+__decorateClass([
+  property()
+], GdsSegmentedControl.prototype, "size", 2);
+__decorateClass([
+  property()
+], GdsSegmentedControl.prototype, "value", 1);
+__decorateClass([
+  state()
+], GdsSegmentedControl.prototype, "_tStyles", 2);
+__decorateClass([
+  query("slot")
+], GdsSegmentedControl.prototype, "_elSlot", 2);
+__decorateClass([
+  query("#indicator")
+], GdsSegmentedControl.prototype, "_elIndicator", 2);
+__decorateClass([
+  query("#track")
+], GdsSegmentedControl.prototype, "_elTrack", 2);
+__decorateClass([
+  query("#segments")
+], GdsSegmentedControl.prototype, "_elSegments", 2);
+__decorateClass([
+  state()
+], GdsSegmentedControl.prototype, "_showPrevButton", 2);
+__decorateClass([
+  state()
+], GdsSegmentedControl.prototype, "_showNextButton", 2);
+__decorateClass([
+  watch("segMinWidth")
+], GdsSegmentedControl.prototype, "_recalculateMinWidth", 1);
+GdsSegmentedControl = __decorateClass([
+  gdsCustomElement("gds-segmented-control")
+], GdsSegmentedControl);
+
+export {
+  GdsSegmentedControl
+};