@sebgroup/green-core 1.43.4 → 1.44.0

package/chunks/chunk.ZDUKYYZK.js

@@ -1,446 +0,0 @@
-import {
-  GdsSegment
-} from "./chunk.HMKVYFGV.js";
-import {
-  resizeObserver
-} from "./chunk.VHN4JEZC.js";
-import {
-  TransitionalStyles
-} from "./chunk.CWRLA7VT.js";
-import {
-  watch
-} from "./chunk.2WO4NHJ2.js";
-import {
-  tokens
-} from "./chunk.ISHFHZLM.js";
-import {
-  GdsElement
-} from "./chunk.VDIB4JW2.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?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;
-  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, _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, _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");
-    this.addEventListener("focusin", (e) => {
-      if (e.target instanceof GdsSegment) {
-        __privateSet(this, _focusedIndex, this.segments.indexOf(e.target));
-        __privateGet(this, _calcLayout).call(this, true);
-      }
-    });
-  }
-  render() {
-    return html`${when(
-      this._showPrevButton,
-      () => html`<button
-            id="btn-prev"
-            @click=${__privateGet(this, _scrollLeft)}
-            aria-label=${msg("Scroll right")}
-          >
-            <gds-icon-chevron-left />
-          </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-chevron-right />
-          </button>`
-    )}`;
-  }
-  _recalculateMinWidth() {
-    this.updateComplete.then(() => __privateGet(this, _calcLayout).call(this));
-  }
-};
-_value = 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({ 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([
-  query("#segments")
-], GdsSegmentedControl.prototype, "_elSegments", 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
-};