@sebgroup/green-core 1.15.0 → 1.16.0

package/chunks/chunk.3SEVAGLE.js

@@ -0,0 +1,96 @@
+import {
+  tokens
+} from "./chunk.7P5N6NZL.js";
+import {
+  TransitionalStyles
+} from "./chunk.QONSFT2N.js";
+import {
+  GdsElement
+} from "./chunk.2LQSDOD4.js";
+import {
+  gdsCustomElement,
+  html
+} from "./chunk.VOYMQ322.js";
+import {
+  __decorateClass
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/components/segmented-control/segment/segment.ts
+import { property } from "lit/decorators.js";
+import { unsafeCSS } from "lit";
+
+// libs/core/src/components/segmented-control/segment/segment.style.css
+var segment_style_default = `:host {
+  display: flex;
+  transition: 0.2s;
+  z-index: 1;
+}
+
+button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: transparent;
+  border-radius: calc(infinity * 1px);
+  border-width: 0;
+  color: var(--gds-sys-color-content-content);
+  cursor: pointer;
+  flex-grow: 1;
+  flex-shrink: 0;
+  font-family: inherit;
+  font-size: inherit;
+  overflow: hidden;
+  padding: 0 1rem;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+}
+
+@media (pointer: fine) {
+  button:hover {
+    background-color: color-mix(
+      in srgb,
+      var(--gds-sys-color-state-layers-state-black-dim1),
+      transparent
+    );
+  }
+}
+
+button:focus-visible {
+  outline: 2px solid #000;
+  outline-offset: -2px;
+}
+`;
+
+// libs/core/src/components/segmented-control/segment/segment.ts
+var GdsSegment = class extends GdsElement {
+  constructor() {
+    super(...arguments);
+    this.selected = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    TransitionalStyles.instance.apply(this, "gds-segmented");
+    this.setAttribute("role", "listitem");
+  }
+  render() {
+    return html`<button aria-current=${String(this.selected)}>
+      <slot></slot>
+    </button>`;
+  }
+};
+GdsSegment.styles = [...tokens, unsafeCSS(segment_style_default)];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsSegment.prototype, "selected", 2);
+__decorateClass([
+  property()
+], GdsSegment.prototype, "value", 2);
+GdsSegment = __decorateClass([
+  gdsCustomElement("gds-segment")
+], GdsSegment);
+
+export {
+  GdsSegment
+};

package/chunks/chunk.522C22QY.js

@@ -0,0 +1,460 @@
+import {
+  GdsSegment
+} from "./chunk.3SEVAGLE.js";
+import {
+  tokens
+} from "./chunk.7P5N6NZL.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
+};

package/chunks/chunk.5VURDMKE.js

@@ -0,0 +1,75 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var __privateWrapper = (obj, member, setter, getter) => ({
+  set _(value) {
+    __privateSet(obj, member, value, setter);
+  },
+  get _() {
+    return __privateGet(obj, member, getter);
+  }
+});
+var __privateMethod = (obj, member, method) => {
+  __accessCheck(obj, member, "access private method");
+  return method;
+};
+
+export {
+  __spreadValues,
+  __spreadProps,
+  __export,
+  __decorateClass,
+  __privateGet,
+  __privateAdd,
+  __privateSet,
+  __privateWrapper,
+  __privateMethod
+};

package/chunks/chunk.6NM7ENKA.js

@@ -0,0 +1,31 @@
+// libs/core/src/utils/helpers/constrain-slots.ts
+function constrainSlots(self) {
+  self.updateComplete.then(() => {
+    var _a, _b, _c;
+    const slots = (_a = self.shadowRoot) == null ? void 0 : _a.querySelectorAll("slot[gds-allow]");
+    if (!slots)
+      return;
+    for (const node of Array.from(self.childNodes)) {
+      if (node.nodeType === Node.TEXT_NODE && ((_b = node.textContent) == null ? void 0 : _b.trim()) === "") {
+        (_c = node.parentNode) == null ? void 0 : _c.removeChild(node);
+      }
+    }
+    const constrain = (slot) => {
+      var _a2, _b2;
+      const allowed = ((_a2 = slot.getAttribute("gds-allow")) == null ? void 0 : _a2.split(" ")) || [];
+      for (const node of Array.from(slot.assignedNodes())) {
+        if (!allowed.includes(node.nodeName.toLowerCase())) {
+          (_b2 = node.parentNode) == null ? void 0 : _b2.removeChild(node);
+        }
+      }
+    };
+    slots.forEach((slot) => {
+      constrain(slot);
+      slot.addEventListener("slotchange", () => constrain(slot));
+    });
+  });
+}
+
+export {
+  constrainSlots
+};