@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/development/option/optgroup.js

@@ -0,0 +1,230 @@
+import { css, LitElement, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { hostAttributes } from "../core/decorators.js";
+import { setOrRemoveAttribute, isSafari } from "../core/dom.js";
+import { SbbDisabledMixin, SbbHydrationMixin } from "../core/mixins.js";
+import { AgnosticMutationObserver } from "../core/observers.js";
+import "../divider.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-optgroup-divider-display: block;
+  --sbb-optgroup-divider-spacing: 0;
+  --sbb-optgroup-label-padding-start: var(--sbb-spacing-fixed-4x);
+  --sbb-optgroup-label-padding-inline: var(--sbb-spacing-fixed-4x);
+  --sbb-optgroup-label-font-size: var(--sbb-typo-scale-0-75x);
+  --sbb-optgroup-label-color: var(--sbb-color-metal);
+  display: block;
+}
+
+:host(:first-child) {
+  --sbb-optgroup-divider-display: none;
+  --sbb-optgroup-label-padding-start: var(--sbb-spacing-fixed-2x);
+}
+
+:host([data-variant=select]) {
+  --sbb-optgroup-divider-spacing: var(--sbb-spacing-fixed-4x);
+  --sbb-optgroup-label-padding-inline: var(--sbb-spacing-responsive-xxxs);
+  --sbb-optgroup-label-padding-start: 0;
+  --sbb-optgroup-label-font-size: inherit;
+}
+
+:host([data-variant=select]:first-child) {
+  --sbb-optgroup-label-padding-start: var(--sbb-spacing-fixed-4x);
+}
+
+:host([data-negative]) {
+  --sbb-optgroup-label-color: var(--sbb-color-smoke);
+}
+
+.sbb-optgroup {
+  margin-block: var(--sbb-spacing-fixed-4x);
+  margin-inline: var(--sbb-spacing-fixed-4x);
+}
+
+.sbb-optgroup__label {
+  --sbb-text-font-size: var(--sbb-font-size-text-xxs);
+  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);
+  display: flex;
+  column-gap: var(--sbb-spacing-responsive-xxxs);
+  color: var(--sbb-optgroup-label-color);
+  -webkit-text-fill-color: var(--sbb-optgroup-label-color);
+  padding-inline: var(--sbb-optgroup-label-padding-inline);
+  padding-block: var(--sbb-optgroup-label-padding-start) var(--sbb-spacing-fixed-2x);
+}
+:host([data-variant=select][data-multiple]) .sbb-optgroup__label {
+  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  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);
+  padding-inline-start: calc(var(--sbb-spacing-responsive-xxxs) + var(--sbb-spacing-fixed-8x));
+}
+
+.sbb-optgroup__divider {
+  display: var(--sbb-optgroup-divider-display);
+  padding-block: var(--sbb-optgroup-divider-spacing);
+}
+
+.sbb-optgroup__icon-space {
+  display: var(--sbb-option-icon-container-display, none);
+  min-width: var(--sbb-size-icon-ui-small);
+}`;
+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;
+};
+const inertAriaGroups = isSafari;
+let SbbOptGroupElement = class extends SbbDisabledMixin(SbbHydrationMixin(LitElement)) {
+  constructor() {
+    super(...arguments);
+    this._negative = false;
+    this._negativeObserver = new AgnosticMutationObserver(() => this._onNegativeChange());
+  }
+  get _options() {
+    var _a;
+    return Array.from(((_a = this.querySelectorAll) == null ? void 0 : _a.call(this, "sbb-option")) ?? []);
+  }
+  connectedCallback() {
+    var _a, _b;
+    super.connectedCallback();
+    (_a = this._negativeObserver) == null ? void 0 : _a.disconnect();
+    this._negative = !!((_b = this.closest) == null ? void 0 : _b.call(
+      this,
+      `:is(sbb-autocomplete, sbb-select, sbb-form-field)[negative]`
+    ));
+    this.toggleAttribute("data-negative", this._negative);
+    this._negativeObserver.observe(this, {
+      attributes: true,
+      attributeFilter: ["data-negative"]
+    });
+    this._setVariantByContext();
+    this._proxyGroupLabelToOptions();
+    this.toggleAttribute("data-multiple", !!this.closest("sbb-select[multiple]"));
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("disabled")) {
+      if (!inertAriaGroups) {
+        this.setAttribute("aria-disabled", this.disabled.toString());
+      }
+      this._proxyDisabledToOptions();
+    }
+    if (changedProperties.has("label")) {
+      this._proxyGroupLabelToOptions();
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = this._negativeObserver) == null ? void 0 : _a.disconnect();
+  }
+  _setVariantByContext() {
+    var _a, _b;
+    if ((_a = this.closest) == null ? void 0 : _a.call(this, "sbb-autocomplete")) {
+      this.setAttribute("data-variant", "autocomplete");
+    } else if ((_b = this.closest) == null ? void 0 : _b.call(this, "sbb-select")) {
+      this.setAttribute("data-variant", "select");
+    }
+  }
+  _handleSlotchange() {
+    this._proxyDisabledToOptions();
+    this._proxyGroupLabelToOptions();
+    this._highlightOptions();
+  }
+  _proxyGroupLabelToOptions() {
+    var _a, _b;
+    if (!inertAriaGroups) {
+      setOrRemoveAttribute(this, "aria-label", this.label);
+      return;
+    } else if (this.label) {
+      this.removeAttribute("aria-label");
+      for (const option of this._options) {
+        option.setAttribute("data-group-label", this.label);
+        (_a = option.requestUpdate) == null ? void 0 : _a.call(option);
+      }
+    } else {
+      for (const option of this._options) {
+        option.removeAttribute("data-group-label");
+        (_b = option.requestUpdate) == null ? void 0 : _b.call(option);
+      }
+    }
+  }
+  _proxyDisabledToOptions() {
+    for (const option of this._options) {
+      option.toggleAttribute("data-group-disabled", this.disabled);
+    }
+  }
+  _highlightOptions() {
+    var _a;
+    const autocomplete = this.closest("sbb-autocomplete");
+    if (!autocomplete) {
+      return;
+    }
+    const value = (_a = autocomplete.triggerElement) == null ? void 0 : _a.value;
+    if (!value) {
+      return;
+    }
+    this._options.forEach((opt) => opt.highlight(value));
+  }
+  _onNegativeChange() {
+    this._negative = this.hasAttribute("data-negative");
+  }
+  render() {
+    return html`
+      <div class="sbb-optgroup__divider">
+        <sbb-divider ?negative=${this._negative}></sbb-divider>
+      </div>
+      <div class="sbb-optgroup__label" aria-hidden="true">
+        <div class="sbb-optgroup__icon-space"></div>
+        <span>${this.label}</span>
+      </div>
+      <slot @slotchange=${this._handleSlotchange}></slot>
+    `;
+  }
+};
+SbbOptGroupElement.styles = style;
+__decorateClass([
+  property()
+], SbbOptGroupElement.prototype, "label", 2);
+__decorateClass([
+  state()
+], SbbOptGroupElement.prototype, "_negative", 2);
+SbbOptGroupElement = __decorateClass([
+  customElement("sbb-optgroup"),
+  hostAttributes({ role: !inertAriaGroups ? "group" : null })
+], SbbOptGroupElement);
+export {
+  SbbOptGroupElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3B0Z3JvdXAuanMiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9lbGVtZW50cy9vcHRpb24vb3B0Z3JvdXAvb3B0Z3JvdXAudHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBDU1NSZXN1bHRHcm91cCwgUHJvcGVydHlWYWx1ZXMsIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGh0bWwsIExpdEVsZW1lbnQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgY3VzdG9tRWxlbWVudCwgcHJvcGVydHksIHN0YXRlIH0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuXG5pbXBvcnQgeyBob3N0QXR0cmlidXRlcyB9IGZyb20gJy4uLy4uL2NvcmUvZGVjb3JhdG9ycy5qcyc7XG5pbXBvcnQgeyBpc1NhZmFyaSwgc2V0T3JSZW1vdmVBdHRyaWJ1dGUgfSBmcm9tICcuLi8uLi9jb3JlL2RvbS5qcyc7XG5pbXBvcnQgeyBTYmJEaXNhYmxlZE1peGluLCBTYmJIeWRyYXRpb25NaXhpbiB9IGZyb20gJy4uLy4uL2NvcmUvbWl4aW5zLmpzJztcbmltcG9ydCB7IEFnbm9zdGljTXV0YXRpb25PYnNlcnZlciB9IGZyb20gJy4uLy4uL2NvcmUvb2JzZXJ2ZXJzLmpzJztcbmltcG9ydCB0eXBlIHsgU2JiT3B0aW9uRWxlbWVudCB9IGZyb20gJy4uL29wdGlvbi5qcyc7XG5cbmltcG9ydCBzdHlsZSBmcm9tICcuL29wdGdyb3VwLnNjc3M/bGl0JmlubGluZSc7XG5cbmltcG9ydCAnLi4vLi4vZGl2aWRlci5qcyc7XG5cbi8qKlxuICogT24gU2FmYXJpLCB0aGUgZ3JvdXBzIGxhYmVscyBhcmUgbm90IHJlYWQgYnkgVm9pY2VPdmVyLlxuICogVG8gc29sdmUgdGhlIHByb2JsZW0sIHdlIHJlbW92ZSB0aGUgcm9sZT1cImdyb3VwXCIgYW5kIGFkZCBhIGhpZGRlbiBzcGFuIGNvbnRhaW5pbmcgdGhlIGdyb3VwIG5hbWVcbiAqIFRPRE86IFdlIHNob3VsZCBwZXJpb2RpY2FsbHkgY2hlY2sgaWYgaXQgaGFzIGJlZW4gc29sdmVkIGFuZCwgaWYgc28sIHJlbW92ZSB0aGUgcHJvcGVydHkuXG4gKi9cbmNvbnN0IGluZXJ0QXJpYUdyb3VwcyA9IGlzU2FmYXJpO1xuXG4vKipcbiAqIEl0IGNhbiBiZSB1c2VkIGFzIGEgY29udGFpbmVyIGZvciBvbmUgb3IgbW9yZSBgc2JiLW9wdGlvbmAuXG4gKlxuICogQHNsb3QgLSBVc2UgdGhlIHVubmFtZWQgc2xvdCB0byBhZGQgYHNiYi1vcHRpb25gIGVsZW1lbnRzIHRvIHRoZSBgc2JiLW9wdGdyb3VwYC5cbiAqL1xuQGN1c3RvbUVsZW1lbnQoJ3NiYi1vcHRncm91cCcpXG5AaG9zdEF0dHJpYnV0ZXMoeyByb2xlOiAhaW5lcnRBcmlhR3JvdXBzID8gJ2dyb3VwJyA6IG51bGwgfSlcbmV4cG9ydCBjbGFzcyBTYmJPcHRHcm91cEVsZW1lbnQgZXh0ZW5kcyBTYmJEaXNhYmxlZE1peGluKFNiYkh5ZHJhdGlvbk1peGluKExpdEVsZW1lbnQpKSB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IHN0eWxlO1xuXG4gIC8qKiBPcHRpb24gZ3JvdXAgbGFiZWwuICovXG4gIEBwcm9wZXJ0eSgpIHB1YmxpYyBsYWJlbCE6IHN0cmluZztcblxuICBAc3RhdGUoKSBwcml2YXRlIF9uZWdhdGl2ZSA9IGZhbHNlO1xuXG4gIHByaXZhdGUgX25lZ2F0aXZlT2JzZXJ2ZXIgPSBuZXcgQWdub3N0aWNNdXRhdGlvbk9ic2VydmVyKCgpID0+IHRoaXMuX29uTmVnYXRpdmVDaGFuZ2UoKSk7XG5cbiAgcHJpdmF0ZSBnZXQgX29wdGlvbnMoKTogU2JiT3B0aW9uRWxlbWVudFtdIHtcbiAgICByZXR1cm4gQXJyYXkuZnJvbSh0aGlzLnF1ZXJ5U2VsZWN0b3JBbGw/Lignc2JiLW9wdGlvbicpID8/IFtdKSBhcyBTYmJPcHRpb25FbGVtZW50W107XG4gIH1cblxuICBwdWJsaWMgb3ZlcnJpZGUgY29ubmVjdGVkQ2FsbGJhY2soKTogdm9pZCB7XG4gICAgc3VwZXIuY29ubmVjdGVkQ2FsbGJhY2soKTtcbiAgICB0aGlzLl9uZWdhdGl2ZU9ic2VydmVyPy5kaXNjb25uZWN0KCk7XG4gICAgdGhpcy5fbmVnYXRpdmUgPSAhIXRoaXMuY2xvc2VzdD8uKFxuICAgICAgYDppcyhzYmItYXV0b2NvbXBsZXRlLCBzYmItc2VsZWN0LCBzYmItZm9ybS1maWVsZClbbmVnYXRpdmVdYCxcbiAgICApO1xuICAgIHRoaXMudG9nZ2xlQXR0cmlidXRlKCdkYXRhLW5lZ2F0aXZlJywgdGhpcy5fbmVnYXRpdmUpO1xuXG4gICAgdGhpcy5fbmVnYXRpdmVPYnNlcnZlci5vYnNlcnZlKHRoaXMsIHtcbiAgICAgIGF0dHJpYnV0ZXM6IHRydWUsXG4gICAgICBhdHRyaWJ1dGVGaWx0ZXI6IFsnZGF0YS1uZWdhdGl2ZSddLFxuICAgIH0pO1xuXG4gICAgdGhpcy5fc2V0VmFyaWFudEJ5Q29udGV4dCgpO1xuICAgIHRoaXMuX3Byb3h5R3JvdXBMYWJlbFRvT3B0aW9ucygpO1xuXG4gICAgdGhpcy50b2dnbGVBdHRyaWJ1dGUoJ2RhdGEtbXVsdGlwbGUnLCAhIXRoaXMuY2xvc2VzdCgnc2JiLXNlbGVjdFttdWx0aXBsZV0nKSk7XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgd2lsbFVwZGF0ZShjaGFuZ2VkUHJvcGVydGllczogUHJvcGVydHlWYWx1ZXM8dGhpcz4pOiB2b2lkIHtcbiAgICBzdXBlci53aWxsVXBkYXRlKGNoYW5nZWRQcm9wZXJ0aWVzKTtcblxuICAgIGlmIChjaGFuZ2VkUHJvcGVydGllcy5oYXMoJ2Rpc2FibGVkJykpIHtcbiAgICAgIGlmICghaW5lcnRBcmlhR3JvdXBzKSB7XG4gICAgICAgIHRoaXMuc2V0QXR0cmlidXRlKCdhcmlhLWRpc2FibGVkJywgdGhpcy5kaXNhYmxlZC50b1N0cmluZygpKTtcbiAgICAgIH1cblxuICAgICAgdGhpcy5fcHJveHlEaXNhYmxlZFRvT3B0aW9ucygpO1xuICAgIH1cbiAgICBpZiAoY2hhbmdlZFByb3BlcnRpZXMuaGFzKCdsYWJlbCcpKSB7XG4gICAgICB0aGlzLl9wcm94eUdyb3VwTGFiZWxUb09wdGlvbnMoKTtcbiAgICB9XG4gIH1cblxuICBwdWJsaWMgb3ZlcnJpZGUgZGlzY29ubmVjdGVkQ2FsbGJhY2soKTogdm9pZCB7XG4gICAgc3VwZXIuZGlzY29ubmVjdGVkQ2FsbGJhY2soKTtcbiAgICB0aGlzLl9uZWdhdGl2ZU9ic2VydmVyPy5kaXNjb25uZWN0KCk7XG4gIH1cblxuICBwcml2YXRlIF9zZXRWYXJpYW50QnlDb250ZXh0KCk6IHZvaWQge1xuICAgIGlmICh0aGlzLmNsb3Nlc3Q/Lignc2JiLWF1dG9jb21wbGV0ZScpKSB7XG4gICAgICB0aGlzLnNldEF0dHJpYnV0ZSgnZGF0YS12YXJpYW50JywgJ2F1dG9jb21wbGV0ZScpO1xuICAgIH0gZWxzZSBpZiAodGhpcy5jbG9zZXN0Py4oJ3NiYi1zZWxlY3QnKSkge1xuICAgICAgdGhpcy5zZXRBdHRyaWJ1dGUoJ2RhdGEtdmFyaWFudCcsICdzZWxlY3QnKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIF9oYW5kbGVTbG90Y2hhbmdlKCk6IHZvaWQge1xuICAgIHRoaXMuX3Byb3h5RGlzYWJsZWRUb09wdGlvbnMoKTtcbiAgICB0aGlzLl9wcm94eUdyb3VwTGFiZWxUb09wdGlvbnMoKTtcbiAgICB0aGlzLl9oaWdobGlnaHRPcHRpb25zKCk7XG4gIH1cblxuICBwcml2YXRlIF9wcm94eUdyb3VwTGFiZWxUb09wdGlvbnMoKTogdm9pZCB7XG4gICAgaWYgKCFpbmVydEFyaWFHcm91cHMpIHtcbiAgICAgIHNldE9yUmVtb3ZlQXR0cmlidXRlKHRoaXMsICdhcmlhLWxhYmVsJywgdGhpcy5sYWJlbCk7XG4gICAgICByZXR1cm47XG4gICAgfSBlbHNlIGlmICh0aGlzLmxhYmVsKSB7XG4gICAgICB0aGlzLnJlbW92ZUF0dHJpYnV0ZSgnYXJpYS1sYWJlbCcpO1xuICAgICAgZm9yIChjb25zdCBvcHRpb24gb2YgdGhpcy5fb3B0aW9ucykge1xuICAgICAgICBvcHRpb24uc2V0QXR0cmlidXRlKCdkYXRhLWdyb3VwLWxhYmVsJywgdGhpcy5sYWJlbCk7XG4gICAgICAgIG9wdGlvbi5yZXF1ZXN0VXBkYXRlPy4oKTtcbiAgICAgIH1cbiAgICB9IGVsc2Uge1xuICAgICAgZm9yIChjb25zdCBvcHRpb24gb2YgdGhpcy5fb3B0aW9ucykge1xuICAgICAgICBvcHRpb24ucmVtb3ZlQXR0cmlidXRlKCdkYXRhLWdyb3VwLWxhYmVsJyk7XG4gICAgICAgIG9wdGlvbi5yZXF1ZXN0VXBkYXRlPy4oKTtcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICBwcml2YXRlIF9wcm94eURpc2FibGVkVG9PcHRpb25zKCk6IHZvaWQge1xuICAgIGZvciAoY29uc3Qgb3B0aW9uIG9mIHRoaXMuX29wdGlvbnMpIHtcbiAgICAgIG9wdGlvbi50b2dnbGVBdHRyaWJ1dGUoJ2RhdGEtZ3JvdXAtZGlzYWJsZWQnLCB0aGlzLmRpc2FibGVkKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIF9oaWdobGlnaHRPcHRpb25zKCk6IHZvaWQge1xuICAgIGNvbnN0IGF1dG9jb21wbGV0ZSA9IHRoaXMuY2xvc2VzdCgnc2JiLWF1dG9jb21wbGV0ZScpO1xuICAgIGlmICghYXV0b2NvbXBsZXRlKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIGNvbnN0IHZhbHVlID0gYXV0b2NvbXBsZXRlLnRyaWdnZXJFbGVtZW50Py52YWx1ZTtcbiAgICBpZiAoIXZhbHVlKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHRoaXMuX29wdGlvbnMuZm9yRWFjaCgob3B0KSA9PiBvcHQuaGlnaGxpZ2h0KHZhbHVlKSk7XG4gIH1cblxuICBwcml2YXRlIF9vbk5lZ2F0aXZlQ2hhbmdlKCk6IHZvaWQge1xuICAgIHRoaXMuX25lZ2F0aXZlID0gdGhpcy5oYXNBdHRyaWJ1dGUoJ2RhdGEtbmVnYXRpdmUnKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSByZW5kZXIoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgIHJldHVybiBodG1sYFxuICAgICAgPGRpdiBjbGFzcz1cInNiYi1vcHRncm91cF9fZGl2aWRlclwiPlxuICAgICAgICA8c2JiLWRpdmlkZXIgP25lZ2F0aXZlPSR7dGhpcy5fbmVnYXRpdmV9Pjwvc2JiLWRpdmlkZXI+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJzYmItb3B0Z3JvdXBfX2xhYmVsXCIgYXJpYS1oaWRkZW49XCJ0cnVlXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJzYmItb3B0Z3JvdXBfX2ljb24tc3BhY2VcIj48L2Rpdj5cbiAgICAgICAgPHNwYW4+JHt0aGlzLmxhYmVsfTwvc3Bhbj5cbiAgICAgIDwvZGl2PlxuICAgICAgPHNsb3QgQHNsb3RjaGFuZ2U9JHt0aGlzLl9oYW5kbGVTbG90Y2hhbmdlfT48L3Nsb3Q+XG4gICAgYDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLW9wdGdyb3VwJzogU2JiT3B0R3JvdXBFbGVtZW50O1xuICB9XG59XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQW1CQSxNQUFNLGtCQUFrQjtBQVNqQixJQUFNLHFCQUFOLGNBQWlDLGlCQUFpQixrQkFBa0IsVUFBVSxDQUFDLEVBQUU7QUFBQSxFQUFqRixjQUFBO0FBQUEsVUFBQSxHQUFBLFNBQUE7QUFNSSxTQUFRLFlBQVk7QUFFN0IsU0FBUSxvQkFBb0IsSUFBSSx5QkFBeUIsTUFBTSxLQUFLLG1CQUFtQjtBQUFB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

package/development/option/option/option.d.ts

@@ -0,0 +1,91 @@
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+
+export type SbbOptionVariant = 'autocomplete' | 'select';
+declare const SbbOptionElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../icon.js').SbbIconNameMixinType> & typeof LitElement;
+/**
+ * It displays on option item which can be used in `sbb-select` or `sbb-autocomplete`.
+ *
+ * @slot - Use the unnamed slot to add content to the option label.
+ * @slot icon - Use this slot to provide an icon. If `icon-name` is set, a sbb-icon will be used.
+ * @event {CustomEvent<void>} optionSelectionChange - Emits when the option selection status changes.
+ * @event {CustomEvent<void>} optionSelected - Emits when an option was selected by user.
+ * @cssprop [--sbb-option-icon-container-display=none] - Can be used to reserve space even
+ * when preserve-icon-space on autocomplete is not set or iconName is not set.
+ */
+export declare class SbbOptionElement extends SbbOptionElement_base {
+    static styles: CSSResultGroup;
+    static readonly events: {
+        readonly selectionChange: "optionSelectionChange";
+        readonly optionSelected: "optionSelected";
+    };
+    /**
+     * Value of the option.
+     *
+     * @description Developer note: In this case updating the attribute must be synchronous.
+     * Due to this it is implemented as a getter/setter and the attributeChangedCallback() handles the diff check.
+     */
+    set value(value: string);
+    get value(): string;
+    /** Whether the option is currently active. */
+    active?: boolean;
+    /** Whether the option is selected. */
+    set selected(value: boolean);
+    get selected(): boolean;
+    /** Emits when the option selection status changes. */
+    private _selectionChange;
+    /** Emits when an option was selected by user. */
+    private _optionSelected;
+    /** Whether to apply the negative styling */
+    private _negative;
+    /** Whether the component must be set disabled due disabled attribute on sbb-checkbox-group. */
+    private _disabledFromGroup;
+    private _label?;
+    /** The portion of the highlighted label. */
+    private _highlightString;
+    /** Disable the highlight of the label. */
+    private _disableLabelHighlight;
+    private set _variant(value);
+    private get _variant();
+    private _abort;
+    /** MutationObserver on data attributes. */
+    private _optionAttributeObserver;
+    private get _isAutocomplete();
+    private get _isSelect();
+    private get _isMultiple();
+    constructor();
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+    /**
+     * Highlight the label of the option
+     * @param value the highlighted portion of the label
+     * @internal
+     */
+    highlight(value: string): void;
+    /**
+     * @internal
+     */
+    setSelectedViaUserInteraction(selected: boolean): void;
+    private _updateDisableHighlight;
+    private _selectByClick;
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    private _updateAriaDisabled;
+    private _updateAriaSelected;
+    disconnectedCallback(): void;
+    private _setVariantByContext;
+    /** Observe changes on data attributes and set the appropriate values. */
+    private _onOptionAttributesChange;
+    private _handleHighlightState;
+    private _getHighlightedLabel;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-option': SbbOptionElement;
+    }
+    interface GlobalEventHandlersEventMap {
+        optionSelectionChange: CustomEvent<void>;
+    }
+}
+export {};
+//# sourceMappingURL=option.d.ts.map

package/development/option/option/option.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"option.d.ts","sourceRoot":"","sources":["../../../../../src/elements/option/option/option.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAab,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAgBlC,MAAM,MAAM,gBAAgB,GAAG,cAAc,GAAG,QAAQ,CAAC;;AAEzD;;;;;;;;;GASG;AACH,qBAIa,gBAAiB,SAAQ,qBAA8C;IAClF,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX;;;;;OAKG;IACH,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAE7B;IACD,IAAW,KAAK,IAAI,MAAM,CAEzB;IAED,8CAA8C;IACK,MAAM,CAAC,EAAE,OAAO,CAAC;IAEpE,sCAAsC;IACtC,IACW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAGjC;IACD,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,sDAAsD;IACtD,OAAO,CAAC,gBAAgB,CAGtB;IAEF,iDAAiD;IACjD,OAAO,CAAC,eAAe,CAGrB;IAEF,4CAA4C;IACnC,OAAO,CAAC,SAAS,CAAS;IAEnC,+FAA+F;IACtF,OAAO,CAAC,kBAAkB,CAAS;IAEnC,OAAO,CAAC,MAAM,CAAC,CAAS;IAEjC,4CAA4C;IACnC,OAAO,CAAC,gBAAgB,CAAuB;IAExD,0CAA0C;IACjC,OAAO,CAAC,sBAAsB,CAAkB;IAEzD,OAAO,KAAK,QAAQ,QAEnB;IACD,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,MAAM,CAAyC;IAEvD,2CAA2C;IAC3C,OAAO,CAAC,wBAAwB,CAE9B;IAEF,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,KAAK,WAAW,GAEtB;;IAOe,wBAAwB,CACtC,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,GAAG,IAAI,EAClB,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,IAAI;IAMP;;;;OAIG;IACI,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIrC;;OAEG;IACI,6BAA6B,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAQ7D,OAAO,CAAC,uBAAuB;IAK/B,OAAO,CAAC,cAAc;IAcN,iBAAiB,IAAI,IAAI;cAiCtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cASzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9E,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,mBAAmB;IAIX,oBAAoB,IAAI,IAAI;IAK5C,OAAO,CAAC,oBAAoB;IAQ5B,yEAAyE;IACzE,OAAO,CAAC,yBAAyB;IAWjC,OAAO,CAAC,qBAAqB;IA4B7B,OAAO,CAAC,oBAAoB;cAwBT,MAAM,IAAI,cAAc;CA2C5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;IAED,UAAU,2BAA2B;QACnC,qBAAqB,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;KAC1C;CACF"}

package/development/option/option.d.ts

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

package/development/option/option.d.ts.map

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