@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/development/stepper/step.js

@@ -0,0 +1,233 @@
+import { css, LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { ref } from "lit/directives/ref.js";
+import { SbbConnectedAbortController } from "../core/controllers.js";
+import { hostAttributes } from "../core/decorators.js";
+import { EventEmitter } from "../core/eventing.js";
+import { AgnosticResizeObserver } from "../core/observers.js";
+const style = css`/**
+ * Better font rendering (on OS X)
+ * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx
+ *
+ * Usage:
+ *
+ * .var_dark_on_light {
+ * 	@include font-smoothing;
+ * }
+ * .var_light_on_dark {
+ * 	@include font-smoothing-reset;
+ * }
+ */
+/** This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element. */
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+:host {
+  --sbb-step-position: initial;
+  --sbb-step-inset-block-start: unset;
+  --sbb-step-opacity: 0;
+  --sbb-step-visibility: hidden;
+  --sbb-step-height: 0;
+  --sbb-step-animation-duration: var(
+    --sbb-disable-animation-zero-time,
+    var(--sbb-animation-duration-2x)
+  );
+  --sbb-step-animation-delay: 0;
+  --sbb-step-color: var(--sbb-color-iron);
+  display: contents;
+}
+
+:host([data-selected]) {
+  --sbb-step-opacity: 1;
+  --sbb-step-visibility: visible;
+  --sbb-step-height: fit-content;
+  --sbb-step-animation-duration: var(--sbb-animation-duration-4x);
+  --sbb-step-animation-delay: var(--sbb-step-animation-duration);
+}
+
+:host([data-orientation=horizontal]) {
+  --sbb-step-position: absolute;
+  --sbb-step-inset-block-start: 0;
+}
+
+:host([data-orientation=vertical]) .sbb-step--wrapper {
+  margin-inline-start: var(--sbb-spacing-fixed-4x);
+  opacity: 0;
+  height: 0;
+  transition: height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing), opacity var(--sbb-step-animation-duration) var(--sbb-animation-easing);
+}
+:host([data-selected][data-orientation=vertical]) .sbb-step--wrapper {
+  opacity: 1;
+  height: var(--sbb-stepper-content-height);
+  transition: height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing), opacity var(--sbb-step-animation-duration) var(--sbb-stepper-animation-duration) var(--sbb-animation-easing);
+}
+
+.sbb-step {
+  --sbb-text-font-size: var(--sbb-font-size-text-m);
+  font-family: var(--sbb-typo-font-family);
+  font-weight: normal;
+  line-height: var(--sbb-typo-line-height-body-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  font-size: var(--sbb-text-font-size);
+  position: var(--sbb-step-position);
+  width: 100%;
+  inset-block-start: var(--sbb-step-inset-block-start);
+  opacity: var(--sbb-step-opacity);
+  visibility: var(--sbb-step-visibility);
+  height: var(--sbb-step-height);
+  color: var(--sbb-step-color);
+  transition-property: opacity, visibility;
+  transition-duration: var(--sbb-step-animation-duration);
+  transition-delay: var(--sbb-step-animation-delay);
+  transition-timing-function: var(--sbb-animation-easing);
+}`;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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;
+};
+let nextId = 0;
+let SbbStepElement = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._validate = new EventEmitter(
+      this,
+      SbbStepElement.events.validate
+    );
+    this._loaded = false;
+    this._abort = new SbbConnectedAbortController(this);
+    this._stepper = null;
+    this._label = null;
+    this._stepResizeObserver = new AgnosticResizeObserver(
+      (entries) => this._onStepElementResize(entries)
+    );
+  }
+  /** The label of the step. */
+  get label() {
+    return this._label;
+  }
+  /**
+   * Selects and configures the step.
+   * @internal
+   */
+  select() {
+    if (!this._loaded || !this.label) {
+      return;
+    }
+    this.toggleAttribute("data-selected", true);
+    this.label.select();
+  }
+  /**
+   * Deselects and configures the step.
+   * @internal
+   */
+  deselect() {
+    if (!this.label) {
+      return;
+    }
+    this.toggleAttribute("data-selected", false);
+    this.label.deselect();
+  }
+  /**
+   * Emits a validate event whenever step switch is triggered.
+   * @internal
+   */
+  validate(eventData) {
+    return !!this._validate.emit(eventData);
+  }
+  /**
+   * Configures the step.
+   * @internal
+   */
+  configure(stepperLoaded) {
+    if (stepperLoaded) {
+      this._label = this._getStepLabel();
+    }
+    if (this.label) {
+      this.setAttribute("aria-labelledby", this.label.id);
+    }
+  }
+  /** Watches for clicked elements with `sbb-stepper-next` or `sbb-stepper-previous` attributes. */
+  _handleClick(event) {
+    var _a, _b;
+    const composedPathElements = event.composedPath().filter((el) => el instanceof window.HTMLElement);
+    if (composedPathElements.some((el) => this._isGoNextElement(el))) {
+      (_a = this._stepper) == null ? void 0 : _a.next();
+    } else if (composedPathElements.some((el) => this._isGoPreviousElement(el))) {
+      (_b = this._stepper) == null ? void 0 : _b.previous();
+    }
+  }
+  _isGoNextElement(element) {
+    return element.hasAttribute("sbb-stepper-next") && !element.hasAttribute("disabled");
+  }
+  _isGoPreviousElement(element) {
+    return element.hasAttribute("sbb-stepper-previous") && !element.hasAttribute("disabled");
+  }
+  _onStepElementResize(entries) {
+    var _a, _b;
+    if (!this.hasAttribute("data-selected")) {
+      return;
+    }
+    const contentHeight = Math.floor(entries[0].contentRect.height);
+    (_b = (_a = this._stepper) == null ? void 0 : _a.style) == null ? void 0 : _b.setProperty("--sbb-stepper-content-height", `${contentHeight}px`);
+  }
+  _getStepLabel() {
+    let previousSibling = this.previousElementSibling;
+    while (previousSibling && previousSibling.localName !== "sbb-step-label") {
+      previousSibling = previousSibling.previousElementSibling;
+    }
+    return previousSibling;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const signal = this._abort.signal;
+    this.id = this.id || `sbb-step-${nextId++}`;
+    this.addEventListener("click", (e) => this._handleClick(e), { signal });
+    this._stepper = this.closest("sbb-stepper");
+    this._label = this._getStepLabel();
+  }
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    this._loaded = true;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._stepResizeObserver.disconnect();
+  }
+  render() {
+    return html`
+      <div class="sbb-step--wrapper">
+        <div
+          class="sbb-step"
+          ${ref((step) => step && this._stepResizeObserver.observe(step))}
+        >
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+SbbStepElement.styles = style;
+SbbStepElement.events = {
+  validate: "validate"
+};
+SbbStepElement = __decorateClass([
+  customElement("sbb-step"),
+  hostAttributes({
+    slot: "step",
+    role: "tabpanel"
+  })
+], SbbStepElement);
+export {
+  SbbStepElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RlcC5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzL3N0ZXBwZXIvc3RlcC9zdGVwLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIHR5cGUgQ1NTUmVzdWx0R3JvdXAsXG4gIGh0bWwsXG4gIExpdEVsZW1lbnQsXG4gIHR5cGUgVGVtcGxhdGVSZXN1bHQsXG4gIHR5cGUgUHJvcGVydHlWYWx1ZXMsXG59IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBjdXN0b21FbGVtZW50IH0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuaW1wb3J0IHsgcmVmIH0gZnJvbSAnbGl0L2RpcmVjdGl2ZXMvcmVmLmpzJztcblxuaW1wb3J0IHsgU2JiQ29ubmVjdGVkQWJvcnRDb250cm9sbGVyIH0gZnJvbSAnLi4vLi4vY29yZS9jb250cm9sbGVycy5qcyc7XG5pbXBvcnQgeyBob3N0QXR0cmlidXRlcyB9IGZyb20gJy4uLy4uL2NvcmUvZGVjb3JhdG9ycy5qcyc7XG5pbXBvcnQgeyBFdmVudEVtaXR0ZXIgfSBmcm9tICcuLi8uLi9jb3JlL2V2ZW50aW5nLmpzJztcbmltcG9ydCB7IEFnbm9zdGljUmVzaXplT2JzZXJ2ZXIgfSBmcm9tICcuLi8uLi9jb3JlL29ic2VydmVycy5qcyc7XG5pbXBvcnQgdHlwZSB7IFNiYlN0ZXBMYWJlbEVsZW1lbnQgfSBmcm9tICcuLi9zdGVwLWxhYmVsLmpzJztcbmltcG9ydCB0eXBlIHsgU2JiU3RlcHBlckVsZW1lbnQgfSBmcm9tICcuLi9zdGVwcGVyLmpzJztcblxuaW1wb3J0IHN0eWxlIGZyb20gJy4vc3RlcC5zY3NzP2xpdCZpbmxpbmUnO1xuXG5sZXQgbmV4dElkID0gMDtcblxuZXhwb3J0IHR5cGUgU2JiU3RlcFZhbGlkYXRlRXZlbnREZXRhaWxzID0ge1xuICBjdXJyZW50SW5kZXg/OiBudW1iZXI7XG4gIGN1cnJlbnRTdGVwPzogU2JiU3RlcEVsZW1lbnQ7XG4gIG5leHRJbmRleD86IG51bWJlcjtcbiAgbmV4dFN0ZXA/OiBTYmJTdGVwRWxlbWVudDtcbn07XG5cbi8qKlxuICogQ29tYmluZWQgd2l0aCBhIGBzYmItc3RlcHBlcmAsIGl0IGRpc3BsYXlzIGEgc3RlcCdzIGNvbnRlbnQuXG4gKlxuICogQHNsb3QgLSBVc2UgdGhlIHVubmFtZWQgc2xvdCB0byBwcm92aWRlIGNvbnRlbnQuXG4gKiBAZXZlbnQge0N1c3RvbUV2ZW50PFNiYlN0ZXBWYWxpZGF0ZUV2ZW50RGV0YWlscz59IHZhbGlkYXRlIC0gRW1pdHMgd2hlbmV2ZXIgc3RlcCBzd2l0Y2ggaXMgdHJpZ2dlcmVkLiBDYW4gYmUgY2FuY2VsZWQuXG4gKi9cbkBjdXN0b21FbGVtZW50KCdzYmItc3RlcCcpXG5AaG9zdEF0dHJpYnV0ZXMoe1xuICBzbG90OiAnc3RlcCcsXG4gIHJvbGU6ICd0YWJwYW5lbCcsXG59KVxuZXhwb3J0IGNsYXNzIFNiYlN0ZXBFbGVtZW50IGV4dGVuZHMgTGl0RWxlbWVudCB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IHN0eWxlO1xuICBwdWJsaWMgc3RhdGljIHJlYWRvbmx5IGV2ZW50cyA9IHtcbiAgICB2YWxpZGF0ZTogJ3ZhbGlkYXRlJyxcbiAgfSBhcyBjb25zdDtcblxuICAvKiogRW1pdHMgd2hlbmV2ZXIgc3RlcCBzd2l0Y2ggaXMgdHJpZ2dlcmVkLiAqL1xuICBwcml2YXRlIF92YWxpZGF0ZTogRXZlbnRFbWl0dGVyPFNiYlN0ZXBWYWxpZGF0ZUV2ZW50RGV0YWlscz4gPSBuZXcgRXZlbnRFbWl0dGVyKFxuICAgIHRoaXMsXG4gICAgU2JiU3RlcEVsZW1lbnQuZXZlbnRzLnZhbGlkYXRlLFxuICApO1xuXG4gIHByaXZhdGUgX2xvYWRlZDogYm9vbGVhbiA9IGZhbHNlO1xuICBwcml2YXRlIF9hYm9ydCA9IG5ldyBTYmJDb25uZWN0ZWRBYm9ydENvbnRyb2xsZXIodGhpcyk7XG4gIHByaXZhdGUgX3N0ZXBwZXI6IFNiYlN0ZXBwZXJFbGVtZW50IHwgbnVsbCA9IG51bGw7XG4gIHByaXZhdGUgX2xhYmVsOiBTYmJTdGVwTGFiZWxFbGVtZW50IHwgbnVsbCA9IG51bGw7XG4gIHByaXZhdGUgX3N0ZXBSZXNpemVPYnNlcnZlciA9IG5ldyBBZ25vc3RpY1Jlc2l6ZU9ic2VydmVyKChlbnRyaWVzKSA9PlxuICAgIHRoaXMuX29uU3RlcEVsZW1lbnRSZXNpemUoZW50cmllcyksXG4gICk7XG5cbiAgLyoqIFRoZSBsYWJlbCBvZiB0aGUgc3RlcC4gKi9cbiAgcHVibGljIGdldCBsYWJlbCgpOiBTYmJTdGVwTGFiZWxFbGVtZW50IHwgbnVsbCB7XG4gICAgcmV0dXJuIHRoaXMuX2xhYmVsO1xuICB9XG5cbiAgLyoqXG4gICAqIFNlbGVjdHMgYW5kIGNvbmZpZ3VyZXMgdGhlIHN0ZXAuXG4gICAqIEBpbnRlcm5hbFxuICAgKi9cbiAgcHVibGljIHNlbGVjdCgpOiB2b2lkIHtcbiAgICBpZiAoIXRoaXMuX2xvYWRlZCB8fCAhdGhpcy5sYWJlbCkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICB0aGlzLnRvZ2dsZUF0dHJpYnV0ZSgnZGF0YS1zZWxlY3RlZCcsIHRydWUpO1xuICAgIHRoaXMubGFiZWwuc2VsZWN0KCk7XG4gIH1cblxuICAvKipcbiAgICogRGVzZWxlY3RzIGFuZCBjb25maWd1cmVzIHRoZSBzdGVwLlxuICAgKiBAaW50ZXJuYWxcbiAgICovXG4gIHB1YmxpYyBkZXNlbGVjdCgpOiB2b2lkIHtcbiAgICBpZiAoIXRoaXMubGFiZWwpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy50b2dnbGVBdHRyaWJ1dGUoJ2RhdGEtc2VsZWN0ZWQnLCBmYWxzZSk7XG4gICAgdGhpcy5sYWJlbC5kZXNlbGVjdCgpO1xuICB9XG5cbiAgLyoqXG4gICAqIEVtaXRzIGEgdmFsaWRhdGUgZXZlbnQgd2hlbmV2ZXIgc3RlcCBzd2l0Y2ggaXMgdHJpZ2dlcmVkLlxuICAgKiBAaW50ZXJuYWxcbiAgICovXG4gIHB1YmxpYyB2YWxpZGF0ZShldmVudERhdGE6IFNiYlN0ZXBWYWxpZGF0ZUV2ZW50RGV0YWlscyk6IGJvb2xlYW4ge1xuICAgIHJldHVybiAhIXRoaXMuX3ZhbGlkYXRlLmVtaXQoZXZlbnREYXRhKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBDb25maWd1cmVzIHRoZSBzdGVwLlxuICAgKiBAaW50ZXJuYWxcbiAgICovXG4gIHB1YmxpYyBjb25maWd1cmUoc3RlcHBlckxvYWRlZDogYm9vbGVhbik6IHZvaWQge1xuICAgIGlmIChzdGVwcGVyTG9hZGVkKSB7XG4gICAgICB0aGlzLl9sYWJlbCA9IHRoaXMuX2dldFN0ZXBMYWJlbCgpO1xuICAgIH1cbiAgICBpZiAodGhpcy5sYWJlbCkge1xuICAgICAgdGhpcy5zZXRBdHRyaWJ1dGUoJ2FyaWEtbGFiZWxsZWRieScsIHRoaXMubGFiZWwuaWQpO1xuICAgIH1cbiAgfVxuXG4gIC8qKiBXYXRjaGVzIGZvciBjbGlja2VkIGVsZW1lbnRzIHdpdGggYHNiYi1zdGVwcGVyLW5leHRgIG9yIGBzYmItc3RlcHBlci1wcmV2aW91c2AgYXR0cmlidXRlcy4gKi9cbiAgcHJpdmF0ZSBfaGFuZGxlQ2xpY2soZXZlbnQ6IEV2ZW50KTogdm9pZCB7XG4gICAgY29uc3QgY29tcG9zZWRQYXRoRWxlbWVudHMgPSBldmVudFxuICAgICAgLmNvbXBvc2VkUGF0aCgpXG4gICAgICAuZmlsdGVyKChlbCkgPT4gZWwgaW5zdGFuY2VvZiB3aW5kb3cuSFRNTEVsZW1lbnQpO1xuICAgIGlmIChjb21wb3NlZFBhdGhFbGVtZW50cy5zb21lKChlbCkgPT4gdGhpcy5faXNHb05leHRFbGVtZW50KGVsIGFzIEhUTUxFbGVtZW50KSkpIHtcbiAgICAgIHRoaXMuX3N0ZXBwZXI/Lm5leHQoKTtcbiAgICB9IGVsc2UgaWYgKGNvbXBvc2VkUGF0aEVsZW1lbnRzLnNvbWUoKGVsKSA9PiB0aGlzLl9pc0dvUHJldmlvdXNFbGVtZW50KGVsIGFzIEhUTUxFbGVtZW50KSkpIHtcbiAgICAgIHRoaXMuX3N0ZXBwZXI/LnByZXZpb3VzKCk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBfaXNHb05leHRFbGVtZW50KGVsZW1lbnQ6IEhUTUxFbGVtZW50KTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIGVsZW1lbnQuaGFzQXR0cmlidXRlKCdzYmItc3RlcHBlci1uZXh0JykgJiYgIWVsZW1lbnQuaGFzQXR0cmlidXRlKCdkaXNhYmxlZCcpO1xuICB9XG5cbiAgcHJpdmF0ZSBfaXNHb1ByZXZpb3VzRWxlbWVudChlbGVtZW50OiBIVE1MRWxlbWVudCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiBlbGVtZW50Lmhhc0F0dHJpYnV0ZSgnc2JiLXN0ZXBwZXItcHJldmlvdXMnKSAmJiAhZWxlbWVudC5oYXNBdHRyaWJ1dGUoJ2Rpc2FibGVkJyk7XG4gIH1cblxuICBwcml2YXRlIF9vblN0ZXBFbGVtZW50UmVzaXplKGVudHJpZXM6IFJlc2l6ZU9ic2VydmVyRW50cnlbXSk6IHZvaWQge1xuICAgIGlmICghdGhpcy5oYXNBdHRyaWJ1dGUoJ2RhdGEtc2VsZWN0ZWQnKSkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICBjb25zdCBjb250ZW50SGVpZ2h0ID0gTWF0aC5mbG9vcihlbnRyaWVzWzBdLmNvbnRlbnRSZWN0LmhlaWdodCk7XG4gICAgdGhpcy5fc3RlcHBlcj8uc3R5bGU/LnNldFByb3BlcnR5KCctLXNiYi1zdGVwcGVyLWNvbnRlbnQtaGVpZ2h0JywgYCR7Y29udGVudEhlaWdodH1weGApO1xuICB9XG5cbiAgcHJpdmF0ZSBfZ2V0U3RlcExhYmVsKCk6IFNiYlN0ZXBMYWJlbEVsZW1lbnQgfCBudWxsIHtcbiAgICBsZXQgcHJldmlvdXNTaWJsaW5nID0gdGhpcy5wcmV2aW91c0VsZW1lbnRTaWJsaW5nO1xuICAgIHdoaWxlIChwcmV2aW91c1NpYmxpbmcgJiYgcHJldmlvdXNTaWJsaW5nLmxvY2FsTmFtZSAhPT0gJ3NiYi1zdGVwLWxhYmVsJykge1xuICAgICAgcHJldmlvdXNTaWJsaW5nID0gcHJldmlvdXNTaWJsaW5nLnByZXZpb3VzRWxlbWVudFNpYmxpbmc7XG4gICAgfVxuICAgIHJldHVybiBwcmV2aW91c1NpYmxpbmcgYXMgU2JiU3RlcExhYmVsRWxlbWVudDtcbiAgfVxuXG4gIHB1YmxpYyBvdmVycmlkZSBjb25uZWN0ZWRDYWxsYmFjaygpOiB2b2lkIHtcbiAgICBzdXBlci5jb25uZWN0ZWRDYWxsYmFjaygpO1xuICAgIGNvbnN0IHNpZ25hbCA9IHRoaXMuX2Fib3J0LnNpZ25hbDtcbiAgICB0aGlzLmlkID0gdGhpcy5pZCB8fCBgc2JiLXN0ZXAtJHtuZXh0SWQrK31gO1xuICAgIHRoaXMuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCAoZSkgPT4gdGhpcy5faGFuZGxlQ2xpY2soZSksIHsgc2lnbmFsIH0pO1xuICAgIHRoaXMuX3N0ZXBwZXIgPSB0aGlzLmNsb3Nlc3QoJ3NiYi1zdGVwcGVyJyk7XG4gICAgdGhpcy5fbGFiZWwgPSB0aGlzLl9nZXRTdGVwTGFiZWwoKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSBmaXJzdFVwZGF0ZWQoY2hhbmdlZFByb3BlcnRpZXM6IFByb3BlcnR5VmFsdWVzPHRoaXM+KTogdm9pZCB7XG4gICAgc3VwZXIuZmlyc3RVcGRhdGVkKGNoYW5nZWRQcm9wZXJ0aWVzKTtcbiAgICB0aGlzLl9sb2FkZWQgPSB0cnVlO1xuICB9XG5cbiAgcHVibGljIG92ZXJyaWRlIGRpc2Nvbm5lY3RlZENhbGxiYWNrKCk6IHZvaWQge1xuICAgIHN1cGVyLmRpc2Nvbm5lY3RlZENhbGxiYWNrKCk7XG4gICAgdGhpcy5fc3RlcFJlc2l6ZU9ic2VydmVyLmRpc2Nvbm5lY3QoKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSByZW5kZXIoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgIHJldHVybiBodG1sYFxuICAgICAgPGRpdiBjbGFzcz1cInNiYi1zdGVwLS13cmFwcGVyXCI+XG4gICAgICAgIDxkaXZcbiAgICAgICAgICBjbGFzcz1cInNiYi1zdGVwXCJcbiAgICAgICAgICAke3JlZigoc3RlcCkgPT4gc3RlcCAmJiB0aGlzLl9zdGVwUmVzaXplT2JzZXJ2ZXIub2JzZXJ2ZShzdGVwIGFzIEhUTUxFbGVtZW50KSl9XG4gICAgICAgID5cbiAgICAgICAgICA8c2xvdD48L3Nsb3Q+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgYDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLXN0ZXAnOiBTYmJTdGVwRWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFtQkEsSUFBSSxTQUFTO0FBb0JBLElBQUEsaUJBQU4sY0FBNkIsV0FBVztBQUFBLEVBQXhDLGNBQUE7QUFBQSxVQUFBLEdBQUEsU0FBQTtBQU9MLFNBQVEsWUFBdUQsSUFBSTtBQUFBLE1BQ2pFO0FBQUEsTUFDQSxlQUFlLE9BQU87QUFBQSxJQUFBO0FBR3hCLFNBQVEsVUFBbUI7QUFDbkIsU0FBQSxTQUFTLElBQUksNEJBQTRCLElBQUk7QUFDckQsU0FBUSxXQUFxQztBQUM3QyxTQUFRLFNBQXFDO0FBQzdDLFNBQVEsc0JBQXNCLElBQUk7QUFBQSxNQUF1QixDQUFDLFlBQ3hELEtBQUsscUJBQXFCLE9BQU87QUFBQSxJQUFBO0FBQUEsRUFDbkM7QUFBQTtBQUFBLEVBR0EsSUFBVyxRQUFvQztBQUM3QyxXQUFPLEtBQUs7QUFBQSxFQUNkO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxFQU1PLFNBQWU7QUFDcEIsUUFBSSxDQUFDLEtBQUssV0FBVyxDQUFDLEtBQUssT0FBTztBQUNoQztBQUFBLElBQ0Y7QUFDSyxTQUFBLGdCQUFn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

package/development/stepper/stepper/stepper.d.ts

@@ -0,0 +1,59 @@
+import { CSSResultGroup, LitElement, TemplateResult, PropertyValues } from 'lit';
+import { SbbHorizontalFrom, SbbOrientation } from '../../core/interfaces.js';
+import { SbbStepElement } from '../step.js';
+
+/**
+ * Provides a structured, step-by-step workflow for user interactions.
+ * @slot - Provide a `sbb-expansion-panel-header` and a `sbb-expansion-panel-content` to the stepper.
+ * @slot step-label - Use this slot to provide an `sbb-step-label`.
+ * @slot step - Use this slot to provide an `sbb-step`.
+ */
+export declare class SbbStepperElement extends LitElement {
+    static styles: CSSResultGroup;
+    /** If set to true, only the current and previous labels can be clicked and selected. */
+    linear: boolean;
+    /** Overrides the behaviour of `orientation` property. */
+    get horizontalFrom(): SbbHorizontalFrom | undefined;
+    set horizontalFrom(value: SbbHorizontalFrom);
+    private _horizontalFrom?;
+    /** Steps orientation, either horizontal or vertical. */
+    orientation: SbbOrientation;
+    /** The currently selected step. */
+    set selected(step: SbbStepElement);
+    get selected(): SbbStepElement | undefined;
+    /** The currently selected step index. */
+    set selectedIndex(index: number);
+    get selectedIndex(): number | undefined;
+    /** The steps of the stepper. */
+    get steps(): SbbStepElement[];
+    private get _enabledSteps();
+    /** Selects the next step. */
+    next(): void;
+    /** Selects the previous step. */
+    previous(): void;
+    /** Resets the form in which the stepper is nested or every form of each step, if any. */
+    reset(): void;
+    private _loaded;
+    private _abort;
+    private _resizeObserverTimeout;
+    private _isValidStep;
+    private _select;
+    private _setMarkerSize;
+    private _calculateLabelOffsetTop;
+    private _configure;
+    private _updateLabels;
+    private _checkOrientation;
+    private _onStepperResize;
+    private _configureLinearMode;
+    connectedCallback(): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): Promise<void>;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    private _handleKeyDown;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-stepper': SbbStepperElement;
+    }
+}
+//# sourceMappingURL=stepper.d.ts.map

package/development/stepper/stepper/stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../../../src/elements/stepper/stepper/stepper.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAClF,OAAO,KAAK,EAAE,cAAc,EAA+B,MAAM,YAAY,CAAC;AAM9E;;;;;GAKG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,wFAAwF;IACpD,MAAM,UAAS;IAEnD,yDAAyD;IACzD,IACW,cAAc,IAAI,iBAAiB,GAAG,SAAS,CAEzD;IACD,IAAW,cAAc,CAAC,KAAK,EAAE,iBAAiB,EAKjD;IACD,OAAO,CAAC,eAAe,CAAC,CAAgC;IAExD,wDAAwD;IAEjD,WAAW,EAAE,cAAc,CAAgB;IAElD,mCAAmC;IACnC,IACW,QAAQ,CAAC,IAAI,EAAE,cAAc,EAIvC;IACD,IAAW,QAAQ,IAAI,cAAc,GAAG,SAAS,CAEhD;IAED,yCAAyC;IACzC,IACW,aAAa,CAAC,KAAK,EAAE,MAAM,EAIrC;IACD,IAAW,aAAa,IAAI,MAAM,GAAG,SAAS,CAE7C;IAED,gCAAgC;IAChC,IAAW,KAAK,IAAI,cAAc,EAAE,CAEnC;IAED,OAAO,KAAK,aAAa,GAExB;IAED,6BAA6B;IACtB,IAAI,IAAI,IAAI;IAMnB,iCAAiC;IAC1B,QAAQ,IAAI,IAAI;IAMvB,yFAAyF;IAClF,KAAK,IAAI,IAAI;IAcpB,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,sBAAsB,CAA8C;IAE5E,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,OAAO;IAwBf,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,wBAAwB;IAoBhC,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,oBAAoB;IAUZ,iBAAiB,IAAI,IAAI;cAWhB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;cAU1E,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAW5E,OAAO,CAAC,cAAc;cAmBH,MAAM,IAAI,cAAc;CAY5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}

package/development/stepper/stepper.d.ts

@@ -0,0 +1,2 @@
+export * from './stepper/stepper.js';
+//# sourceMappingURL=stepper.d.ts.map

package/development/stepper/stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../../src/elements/stepper/stepper.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}