@sbb-esta/lyne-elements-dev 0.0.0 → 4.5.1-dev.1771859294

package/development/tag/tag-group/tag-group.component.js

@@ -0,0 +1,185 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __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), value);
+import { __runInitializers, __esDecorate } from "tslib";
+import { css, LitElement, isServer, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { forceType } from "../../core/decorators.js";
+import { isLean, setOrRemoveAttribute } from "../../core/dom.js";
+import { SbbDisabledMixin, SbbNamedSlotListMixin } from "../../core/mixins.js";
+import { boxSizingStyles } from "../../core/styles.js";
+const style = css`:host {
+  display: block;
+}
+
+.sbb-tag-group__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-size: inherit;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sbb-spacing-fixed-3x);
+}
+
+.sbb-tag-group__list > :is(li, span) {
+  display: flex;
+  max-width: 100%;
+}`;
+let SbbTagGroupElement = (() => {
+  var _listAccessibilityLabel_accessor_storage, _multiple_accessor_storage, _size_accessor_storage, _a;
+  let _classDecorators = [customElement("sbb-tag-group")];
+  let _classDescriptor;
+  let _classExtraInitializers = [];
+  let _classThis;
+  let _classSuper = SbbDisabledMixin(SbbNamedSlotListMixin(LitElement));
+  let _instanceExtraInitializers = [];
+  let _listAccessibilityLabel_decorators;
+  let _listAccessibilityLabel_initializers = [];
+  let _listAccessibilityLabel_extraInitializers = [];
+  let _multiple_decorators;
+  let _multiple_initializers = [];
+  let _multiple_extraInitializers = [];
+  let _size_decorators;
+  let _size_initializers = [];
+  let _size_extraInitializers = [];
+  let _set_value_decorators;
+  _a = class extends _classSuper {
+    constructor() {
+      super(...arguments);
+      __privateAdd(this, _listAccessibilityLabel_accessor_storage);
+      __privateAdd(this, _multiple_accessor_storage);
+      __privateAdd(this, _size_accessor_storage);
+      this.listChildLocalNames = (__runInitializers(this, _instanceExtraInitializers), ["sbb-tag", "div"]);
+      __privateSet(this, _listAccessibilityLabel_accessor_storage, __runInitializers(this, _listAccessibilityLabel_initializers, ""));
+      __privateSet(this, _multiple_accessor_storage, (__runInitializers(this, _listAccessibilityLabel_extraInitializers), __runInitializers(this, _multiple_initializers, false)));
+      __privateSet(this, _size_accessor_storage, (__runInitializers(this, _multiple_extraInitializers), __runInitializers(this, _size_initializers, isLean() ? "s" : "m")));
+      this._value = (__runInitializers(this, _size_extraInitializers), null);
+    }
+    /**
+     * This will be forwarded as aria-label to the inner list.
+     */
+    get listAccessibilityLabel() {
+      return __privateGet(this, _listAccessibilityLabel_accessor_storage);
+    }
+    set listAccessibilityLabel(value) {
+      __privateSet(this, _listAccessibilityLabel_accessor_storage, value);
+    }
+    /**
+     * If set multiple to false, the selection is exclusive and the value is a string (or null).
+     * If set multiple to true, the selection can have multiple values and therefore value is an array.
+     *
+     * Changing multiple during run time is not supported.
+     */
+    get multiple() {
+      return __privateGet(this, _multiple_accessor_storage);
+    }
+    set multiple(value) {
+      __privateSet(this, _multiple_accessor_storage, value);
+    }
+    /**
+     * Tag group size, either s or m.
+     * @default 'm' / 's' (lean)
+     */
+    get size() {
+      return __privateGet(this, _size_accessor_storage);
+    }
+    set size(value) {
+      __privateSet(this, _size_accessor_storage, value);
+    }
+    /**
+     * Value of the sbb-tag-group.
+     * If set multiple to false, the value is a string (or null).
+     * If set multiple to true, the value is an array.
+     */
+    set value(value) {
+      if (isServer || !this.hasUpdated) {
+        this._value = value;
+        return;
+      }
+      this._applyValueToTags(value);
+    }
+    get value() {
+      return isServer || !this.hasUpdated ? this._value : this.multiple ? this.tags.filter((t) => t.checked).map((t) => t.value) : this.tags.find((t) => t.checked)?.value ?? null;
+    }
+    /** The child instances of sbb-tag as an array. */
+    get tags() {
+      return Array.from(this.querySelectorAll?.("sbb-tag") ?? []);
+    }
+    willUpdate(changedProperties) {
+      super.willUpdate(changedProperties);
+      if (changedProperties.has("value") && !this.hasUpdated && this._value) {
+        this._applyValueToTags(this.value);
+      }
+      if (changedProperties.has("size")) {
+        this.tags.forEach((t) => t.requestUpdate?.("size"));
+      }
+      if (changedProperties.has("disabled")) {
+        this.tags.forEach((r) => r.requestUpdate?.("disabled"));
+      }
+      if ((changedProperties.has("listChildren") || changedProperties.has("multiple")) && !this.multiple) {
+        this.tags.filter((tag) => tag.checked).slice(1).forEach((tag) => tag.checked = false);
+      }
+      setOrRemoveAttribute(this, "role", changedProperties.has("listAccessibilityLabel") && this.listAccessibilityLabel ? null : "group");
+    }
+    _applyValueToTags(value) {
+      const tags = this.tags;
+      if (value === null) {
+        tags.forEach((t) => t.checked = false);
+      } else if (this.multiple) {
+        if (!Array.isArray(value) && tags.every((t) => t.value !== value)) {
+          try {
+            value = JSON.parse(value);
+          } catch {
+          }
+        }
+        const valueAsArray = Array.isArray(value) ? value : [value];
+        tags.forEach((t) => t.checked = valueAsArray.includes(t.value));
+      } else {
+        if (!Array.isArray(value)) {
+          tags.forEach((t) => t.checked = t.value === value);
+        }
+      }
+    }
+    render() {
+      return html`
+      <div class="sbb-tag-group">
+        ${this.renderList({
+        class: "sbb-tag-group__list",
+        ariaLabel: this.listAccessibilityLabel
+      })}
+      </div>
+    `;
+    }
+  }, _listAccessibilityLabel_accessor_storage = new WeakMap(), _multiple_accessor_storage = new WeakMap(), _size_accessor_storage = new WeakMap(), _classThis = _a, (() => {
+    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+    _listAccessibilityLabel_decorators = [forceType(), property({ attribute: "list-accessibility-label" })];
+    _multiple_decorators = [forceType(), property({ type: Boolean })];
+    _size_decorators = [property({ reflect: true })];
+    _set_value_decorators = [property()];
+    __esDecorate(_a, null, _listAccessibilityLabel_decorators, { kind: "accessor", name: "listAccessibilityLabel", static: false, private: false, access: { has: (obj) => "listAccessibilityLabel" in obj, get: (obj) => obj.listAccessibilityLabel, set: (obj, value) => {
+      obj.listAccessibilityLabel = value;
+    } }, metadata: _metadata }, _listAccessibilityLabel_initializers, _listAccessibilityLabel_extraInitializers);
+    __esDecorate(_a, null, _multiple_decorators, { kind: "accessor", name: "multiple", static: false, private: false, access: { has: (obj) => "multiple" in obj, get: (obj) => obj.multiple, set: (obj, value) => {
+      obj.multiple = value;
+    } }, metadata: _metadata }, _multiple_initializers, _multiple_extraInitializers);
+    __esDecorate(_a, null, _size_decorators, { kind: "accessor", name: "size", static: false, private: false, access: { has: (obj) => "size" in obj, get: (obj) => obj.size, set: (obj, value) => {
+      obj.size = value;
+    } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
+    __esDecorate(_a, null, _set_value_decorators, { kind: "setter", name: "value", static: false, private: false, access: { has: (obj) => "value" in obj, set: (obj, value) => {
+      obj.value = value;
+    } }, metadata: _metadata }, null, _instanceExtraInitializers);
+    __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+    _classThis = _classDescriptor.value;
+    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+  })(), _a.styles = [boxSizingStyles, style], __runInitializers(_classThis, _classExtraInitializers), _a;
+  return _classThis;
+})();
+export {
+  SbbTagGroupElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFnLWdyb3VwLmNvbXBvbmVudC5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzL3RhZy90YWctZ3JvdXAvdGFnLWdyb3VwLmNvbXBvbmVudC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICB0eXBlIENTU1Jlc3VsdEdyb3VwLFxuICBodG1sLFxuICBpc1NlcnZlcixcbiAgTGl0RWxlbWVudCxcbiAgdHlwZSBQcm9wZXJ0eVZhbHVlcyxcbiAgdHlwZSBUZW1wbGF0ZVJlc3VsdCxcbn0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGN1c3RvbUVsZW1lbnQsIHByb3BlcnR5IH0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuXG5pbXBvcnQgeyBmb3JjZVR5cGUgfSBmcm9tICcuLi8uLi9jb3JlL2RlY29yYXRvcnMudHMnO1xuaW1wb3J0IHsgaXNMZWFuLCBzZXRPclJlbW92ZUF0dHJpYnV0ZSB9IGZyb20gJy4uLy4uL2NvcmUvZG9tLnRzJztcbmltcG9ydCB7XG4gIFNiYkRpc2FibGVkTWl4aW4sXG4gIFNiYk5hbWVkU2xvdExpc3RNaXhpbixcbiAgdHlwZSBXaXRoTGlzdENoaWxkcmVuLFxufSBmcm9tICcuLi8uLi9jb3JlL21peGlucy50cyc7XG5pbXBvcnQgeyBib3hTaXppbmdTdHlsZXMgfSBmcm9tICcuLi8uLi9jb3JlL3N0eWxlcy50cyc7XG5pbXBvcnQgdHlwZSB7IFNiYlRhZ0VsZW1lbnQsIFNiYlRhZ1NpemUgfSBmcm9tICcuLi90YWcudHMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi90YWctZ3JvdXAuc2Nzcz9saXQmaW5saW5lJztcblxuLyoqXG4gKiBJdCBjYW4gYmUgdXNlZCBhcyBhIGNvbnRhaW5lciBmb3Igb25lIG9yIG1vcmUgYHNiYi10YWdgLlxuICpcbiAqIEBzbG90IC0gVXNlIHRoZSB1bm5hbWVkIHNsb3QgdG8gYWRkIG9uZSBvciBtb3JlICdzYmItdGFnJyBlbGVtZW50cyB0byB0aGUgYHNiYi10YWctZ3JvdXBgLlxuICogQG92ZXJyaWRlVHlwZSB2YWx1ZSAtIChUID0gc3RyaW5nIHwgKHN0cmluZyB8IG51bGwpW10pIHwgbnVsbFxuICovXG5leHBvcnRcbkBjdXN0b21FbGVtZW50KCdzYmItdGFnLWdyb3VwJylcbmNsYXNzIFNiYlRhZ0dyb3VwRWxlbWVudDxUID0gc3RyaW5nPiBleHRlbmRzIFNiYkRpc2FibGVkTWl4aW4oXG4gIFNiYk5hbWVkU2xvdExpc3RNaXhpbjxTYmJUYWdFbGVtZW50LCB0eXBlb2YgTGl0RWxlbWVudD4oTGl0RWxlbWVudCksXG4pIHtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSBzdHlsZXM6IENTU1Jlc3VsdEdyb3VwID0gW2JveFNpemluZ1N0eWxlcywgc3R5bGVdO1xuICAvLyBESVYgaXMgYWRkZWQgaGVyZSBkdWUgdG8gc3BlY2lhbCByZXF1aXJlbWVudHMgZnJvbSBzYmIuY2guXG4gIHByb3RlY3RlZCBvdmVycmlkZSByZWFkb25seSBsaXN0Q2hpbGRMb2NhbE5hbWVzID0gWydzYmItdGFnJywgJ2RpdiddO1xuXG4gIC8qKlxuICAgKiBUaGlzIHdpbGwgYmUgZm9yd2FyZGVkIGFzIGFyaWEtbGFiZWwgdG8gdGhlIGlubmVyIGxpc3QuXG4gICAqL1xuICBAZm9yY2VUeXBlKClcbiAgQHByb3BlcnR5KHsgYXR0cmlidXRlOiAnbGlzdC1hY2Nlc3NpYmlsaXR5LWxhYmVsJyB9KVxuICBwdWJsaWMgYWNjZXNzb3IgbGlzdEFjY2Vzc2liaWxpdHlMYWJlbDogc3RyaW5nID0gJyc7XG5cbiAgLyoqXG4gICAqIElmIHNldCBtdWx0aXBsZSB0byBmYWxzZSwgdGhlIHNlbGVjdGlvbiBpcyBleGNsdXNpdmUgYW5kIHRoZSB2YWx1ZSBpcyBhIHN0cmluZyAob3IgbnVsbCkuXG4gICAqIElmIHNldCBtdWx0aXBsZSB0byB0cnVlLCB0aGUgc2VsZWN0aW9uIGNhbiBoYXZlIG11bHRpcGxlIHZhbHVlcyBhbmQgdGhlcmVmb3JlIHZhbHVlIGlzIGFuIGFycmF5LlxuICAgKlxuICAgKiBDaGFuZ2luZyBtdWx0aXBsZSBkdXJpbmcgcnVuIHRpbWUgaXMgbm90IHN1cHBvcnRlZC5cbiAgICovXG4gIEBmb3JjZVR5cGUoKVxuICBAcHJvcGVydHkoeyB0eXBlOiBCb29sZWFuIH0pXG4gIHB1YmxpYyBhY2Nlc3NvciBtdWx0aXBsZTogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBUYWcgZ3JvdXAgc2l6ZSwgZWl0aGVyIHMgb3IgbS5cbiAgICogQGRlZmF1bHQgJ20nIC8gJ3MnIChsZWFuKVxuICAgKi9cbiAgQHByb3BlcnR5KHsgcmVmbGVjdDogdHJ1ZSB9KSBwdWJsaWMgYWNjZXNzb3Igc2l6ZTogU2JiVGFnU2l6ZSA9IGlzTGVhbigpID8gJ3MnIDogJ20nO1xuXG4gIC8qKlxuICAgKiBWYWx1ZSBvZiB0aGUgc2JiLXRhZy1ncm91cC5cbiAgICogSWYgc2V0IG11bHRpcGxlIHRvIGZhbHNlLCB0aGUgdmFsdWUgaXMgYSBzdHJpbmcgKG9yIG51bGwpLlxuICAgKiBJZiBzZXQgbXVsdGlwbGUgdG8gdHJ1ZSwgdGhlIHZhbHVlIGlzIGFuIGFycmF5LlxuICAgKi9cbiAgQHByb3BlcnR5KClcbiAgcHVibGljIHNldCB2YWx1ZSh2YWx1ZTogVCB8IChUIHwgbnVsbClbXSB8IG51bGwpIHtcbiAgICBpZiAoaXNTZXJ2ZXIgfHwgIXRoaXMuaGFzVXBkYXRlZCkge1xuICAgICAgdGhpcy5fdmFsdWUgPSB2YWx1ZTtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy5fYXBwbHlWYWx1ZVRvVGFncyh2YWx1ZSk7XG4gIH1cbiAgcHVibGljIGdldCB2YWx1ZSgpOiBUIHwgKFQgfCBudWxsKVtdIHwgbnVsbCB7XG4gICAgcmV0dXJuIGlzU2VydmVyIHx8ICF0aGlzLmhhc1VwZGF0ZWRcbiAgICAgID8gdGhpcy5fdmFsdWVcbiAgICAgIDogdGhpcy5tdWx0aXBsZVxuICAgICAgICA/IHRoaXMudGFncy5maWx0ZXIoKHQpID0+IHQuY2hlY2tlZCkubWFwKCh0KSA9PiB0LnZhbHVlKVxuICAgICAgICA6ICh0aGlzLnRhZ3MuZmluZCgodCkgPT4gdC5jaGVja2VkKT8udmFsdWUgPz8gbnVsbCk7XG4gIH1cbiAgcHJpdmF0ZSBfdmFsdWU6IFQgfCAoVCB8IG51bGwpW10gfCBudWxsID0gbnVsbDtcblxuICAvKiogVGhlIGNoaWxkIGluc3RhbmNlcyBvZiBzYmItdGFnIGFzIGFuIGFycmF5LiAqL1xuICBwdWJsaWMgZ2V0IHRhZ3MoKTogU2JiVGFnRWxlbWVudDxUPltdIHtcbiAgICByZXR1cm4gQXJyYXkuZnJvbSh0aGlzLnF1ZXJ5U2VsZWN0b3JBbGw/LjxTYmJUYWdFbGVtZW50PFQ+Pignc2JiLXRhZycpID8/IFtdKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSB3aWxsVXBkYXRlKGNoYW5nZWRQcm9wZXJ0aWVzOiBQcm9wZXJ0eVZhbHVlczxXaXRoTGlzdENoaWxkcmVuPHRoaXM+Pik6IHZvaWQge1xuICAgIHN1cGVyLndpbGxVcGRhdGUoY2hhbmdlZFByb3BlcnRpZXMpO1xuXG4gICAgaWYgKGNoYW5nZWRQcm9wZXJ0aWVzLmhhcygndmFsdWUnKSAmJiAhdGhpcy5oYXNVcGRhdGVkICYmIHRoaXMuX3ZhbHVlKSB7XG4gICAgICB0aGlzLl9hcHBseVZhbHVlVG9UYWdzKHRoaXMudmFsdWUpO1xuICAgIH1cblxuICAgIGlmIChjaGFuZ2VkUHJvcGVydGllcy5oYXMoJ3NpemUnKSkge1xuICAgICAgdGhpcy50YWdzLmZvckVhY2goKHQpID0+IHQucmVxdWVzdFVwZGF0ZT8uKCdzaXplJykpO1xuICAgIH1cblxuICAgIGlmIChjaGFuZ2VkUHJvcGVydGllcy5oYXMoJ2Rpc2FibGVkJykpIHtcbiAgICAgIHRoaXMudGFncy5mb3JFYWNoKChyKSA9PiByLnJlcXVlc3RVcGRhdGU/LignZGlzYWJsZWQnKSk7XG4gICAgfVxuXG4gICAgaWYgKFxuICAgICAgKGNoYW5nZWRQcm9wZXJ0aWVzLmhhcygnbGlzdENoaWxkcmVuJykgfHwgY2hhbmdlZFByb3BlcnRpZXMuaGFzKCdtdWx0aXBsZScpKSAmJlxuICAgICAgIXRoaXMubXVsdGlwbGVcbiAgICApIHtcbiAgICAgIC8vIEVuc3VyZSBvbmx5IG9uZSB0YWcgY2hlY2tlZFxuICAgICAgdGhpcy50YWdzXG4gICAgICAgIC5maWx0ZXIoKHRhZykgPT4gdGFnLmNoZWNrZWQpXG4gICAgICAgIC5zbGljZSgxKVxuICAgICAgICAuZm9yRWFjaCgodGFnKSA9PiAodGFnLmNoZWNrZWQgPSBmYWxzZSkpO1xuICAgIH1cbiAgICBzZXRPclJlbW92ZUF0dHJpYnV0ZShcbiAgICAgIHRoaXMsXG4gICAgICAncm9sZScsXG4gICAgICBjaGFuZ2VkUHJvcGVydGllcy5oYXMoJ2xpc3RBY2Nlc3NpYmlsaXR5TGFiZWwnKSAmJiB0aGlzLmxpc3RBY2Nlc3NpYmlsaXR5TGFiZWxcbiAgICAgICAgPyBudWxsXG4gICAgICAgIDogJ2dyb3VwJyxcbiAgICApO1xuICB9XG5cbiAgcHJpdmF0ZSBfYXBwbHlWYWx1ZVRvVGFncyh2YWx1ZTogYW55KTogdm9pZCB7XG4gICAgY29uc3QgdGFncyA9IHRoaXMudGFncztcblxuICAgIGlmICh2YWx1ZSA9PT0gbnVsbCkge1xuICAgICAgdGFncy5mb3JFYWNoKCh0KSA9PiAodC5jaGVja2VkID0gZmFsc2UpKTtcbiAgICB9IGVsc2UgaWYgKHRoaXMubXVsdGlwbGUpIHtcbiAgICAgIGlmICghQXJyYXkuaXNBcnJheSh2YWx1ZSkgJiYgdGFncy5ldmVyeSgodCkgPT4gdC52YWx1ZSAhPT0gdmFsdWUpKSB7XG4gICAgICAgIHRyeSB7XG4gICAgICAgICAgLy8gSWYgaXQgaXMgbXVsdGlwbGUgbW9kZSBhbmQgbm8gdGFnIG1hdGNoZXMgdGhlIHZhbHVlLCB3ZSB0cnkgdG8gcGFyc2UgdGhlIHZhbHVlIGFzIEpTT04uXG4gICAgICAgICAgLy8gVGhpcyBhbGxvd3Mgc2VydmVyIHNpZGUgcmVuZGVyaW5nIHRvIHVzZSBhcnJheSB2YWx1ZXMgdG8gYmUgcGFzc2VkIHRvIHRoZSBjbGllbnQgc2lkZS5cbiAgICAgICAgICB2YWx1ZSA9IEpTT04ucGFyc2UodmFsdWUgYXMgc3RyaW5nKTtcbiAgICAgICAgfSBjYXRjaCB7XG4gICAgICAgICAgLyogZW1wdHkgKi9cbiAgICAgICAgfVxuICAgICAgfVxuICAgICAgY29uc3QgdmFsdWVBc0FycmF5ID0gQXJyYXkuaXNBcnJheSh2YWx1ZSkgPyB2YWx1ZSA6IFt2YWx1ZV07XG4gICAgICB0YWdzLmZvckVhY2goKHQpID0+ICh0LmNoZWNrZWQgPSB2YWx1ZUFzQXJyYXkuaW5jbHVkZXModC52YWx1ZSkpKTtcbiAgICB9IGVsc2Uge1xuICAgICAgaWYgKCFBcnJheS5pc0FycmF5KHZhbHVlKSkge1xuICAgICAgICB0YWdzLmZvckVhY2goKHQpID0+ICh0LmNoZWNrZWQgPSB0LnZhbHVlID09PSB2YWx1ZSkpO1xuICAgICAgfSBlbHNlIGlmIChpbXBvcnQubWV0YS5lbnYuREVWKSB7XG4gICAgICAgIGNvbnNvbGUud2FybigndmFsdWUgbXVzdCBub3QgYmUgc2V0IGFzIGFuIGFycmF5IGluIHNpbmd1bGFyIG1vZGUuJywgdmFsdWUpO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSByZW5kZXIoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgIHJldHVybiBodG1sYFxuICAgICAgPGRpdiBjbGFzcz1cInNiYi10YWctZ3JvdXBcIj5cbiAgICAgICAgJHt0aGlzLnJlbmRlckxpc3Qoe1xuICAgICAgICAgIGNsYXNzOiAnc2JiLXRhZy1ncm91cF9fbGlzdCcsXG4gICAgICAgICAgYXJpYUxhYmVsOiB0aGlzLmxpc3RBY2Nlc3NpYmlsaXR5TGFiZWwsXG4gICAgICAgIH0pfVxuICAgICAgPC9kaXY+XG4gICAgYDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLXRhZy1ncm91cCc6IFNiYlRhZ0dyb3VwRWxlbWVudDtcbiAgfVxufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0lBOEJNLHNCQUFrQixNQUFBOzswQkFEdkIsY0FBYyxlQUFlLENBQUM7Ozs7QUFDYyxNQUFBLGNBQUEsaUJBQzNDLHNCQUF3RCxVQUFVLENBQUM7Ozs7Ozs7Ozs7OztBQURoQyxFQUFBLG1CQUFRLFlBRTVDO0FBQUE7O0FBVUM7QUFVQTtBQU02QjtBQXZCRCxXQUFBLHVCQUx4QixxREFLOEMsQ0FBQyxXQUFXLEtBQUs7QUFPbkQseUJBQUEsMENBQUEsa0JBQUEsTUFBQSxzQ0FBaUMsRUFBRTtBQVVuQyx5QkFBQSw2QkFBQSxrQkFBQSxNQUFBLHlDQUFBLEdBQUEsa0JBQUEsTUFBQSx3QkFBb0IsS0FBSztBQU1JLHlCQUFBLHlCQUFBLGtCQUFBLE1BQUEsMkJBQUEsR0FBQSxrQkFBQSxNQUFBLG9CQUFtQixPQUFBLElBQVcsTUFBTSxHQUFHO0FBc0I1RSxXQUFBLFVBQU0sa0JBQUEsTUFBQSx1QkFBQSxHQUE0QjtBQUFBLElBNkU1QztBQUFBO0FBQUE7QUFBQTtBQUFBLElBbkhFLElBQWdCLHlCQUFzQjtBQUFBLGFBQUEsbUJBQUE7QUFBQSxJQUFBO0FBQUEsSUFBdEMsSUFBZ0IsdUJBQXNCLE9BQUE7QUFBQSx5QkFBQSwwQ0FBQTtBQUFBLElBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxJQVV0QyxJQUFnQixXQUFRO0FBQUEsYUFBQSxtQkFBQTtBQUFBLElBQUE7QUFBQSxJQUF4QixJQUFnQixTQUFRLE9BQUE7QUFBQSx5QkFBQSw0QkFBQTtBQUFBLElBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLElBTUssSUFBZ0IsT0FBSTtBQUFBLGFBQUEsbUJBQUE7QUFBQSxJQUFBO0FBQUEsSUFBcEIsSUFBZ0IsS0FBSSxPQUFBO0FBQUEseUJBQUEsd0JBQUE7QUFBQSxJQUFBO0FBQUE7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

package/development/tag/tag-group.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @entrypoint
+ */
+export * from './tag-group/tag-group.component.ts';
+//# sourceMappingURL=tag-group.d.ts.map

package/development/tag/tag-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/tag/tag-group.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,oCAAoC,CAAC"}

package/development/tag/tag-group.js

@@ -0,0 +1,5 @@
+import { SbbTagGroupElement } from "./tag-group/tag-group.component.js";
+export {
+  SbbTagGroupElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFnLWdyb3VwLmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjsifQ==

package/development/tag/tag.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @entrypoint
+ */
+export * from './tag/tag.component.ts';
+//# sourceMappingURL=tag.d.ts.map

package/development/tag/tag.d.ts.map

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

package/development/tag/tag.js

@@ -0,0 +1,5 @@
+import { SbbTagElement } from "./tag/tag.component.js";
+export {
+  SbbTagElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFnLmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjsifQ==

package/development/tag.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @entrypoint
+ */
+export * from './tag/tag.ts';
+export * from './tag/tag-group.ts';
+//# sourceMappingURL=tag.d.ts.map

package/development/tag.d.ts.map

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

package/development/tag.js

@@ -0,0 +1,7 @@
+import { SbbTagElement } from "./tag/tag/tag.component.js";
+import { SbbTagGroupElement } from "./tag/tag-group/tag-group.component.js";
+export {
+  SbbTagElement,
+  SbbTagGroupElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFnLmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7In0=

package/development/teaser/teaser.component.d.ts

@@ -0,0 +1,26 @@
+import { CSSResultGroup, TemplateResult } from 'lit';
+import { SbbLinkBaseElement } from '../core/base-elements.ts';
+/**
+ * It displays an interactive image with caption.
+ *
+ * @slot image - Slot used to render the image.
+ * @slot chip - Slot for the `sbb-chip-label` element. The slot on the `sbb-chip-label` element is automatically assigned when slotted in the unnamed slot.
+ * @slot title - Slot for the title. For the standard `sbb-title` element, the slot is automatically assigned when slotted in the unnamed slot.
+ * @slot - Use the unnamed slot to render the description, the sbb-title and the sbb-chip-label.
+ */
+export declare class SbbTeaserElement extends SbbLinkBaseElement {
+    static styles: CSSResultGroup;
+    /** Teaser variant - define the position and the alignment of the text block. */
+    accessor alignment: 'after-centered' | 'after' | 'below';
+    private _handleSlotchange;
+    private _configureChip;
+    private _configureTitle;
+    protected render(): TemplateResult;
+    protected renderContent(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-teaser': SbbTeaserElement;
+    }
+}
+//# sourceMappingURL=teaser.component.d.ts.map

package/development/teaser/teaser.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"teaser.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/teaser/teaser.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAM9D,OAAO,0BAA0B,CAAC;AAElC;;;;;;;GAOG;AACH,qBAEM,gBAAiB,SAAQ,kBAAkB;IAC/C,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,gFAAgF;IAChF,SAA6C,SAAS,EAAE,gBAAgB,GAAG,OAAO,GAAG,OAAO,CACzE;IAEnB,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,eAAe;cAWJ,MAAM,IAAI,cAAc;IAa3C,SAAS,CAAC,aAAa,IAAI,cAAc;CAgB1C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}

package/development/teaser/teaser.component.js

@@ -0,0 +1,231 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __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), value);
+import { __esDecorate, __runInitializers } from "tslib";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit/static-html.js";
+import { SbbLinkBaseElement } from "../core/base-elements.js";
+import { boxSizingStyles } from "../core/styles.js";
+import { css } from "lit";
+import "../screen-reader-only.js";
+const style = css`@charset "UTF-8";
+:host {
+  display: inline-block;
+  outline: none !important;
+  --sbb-teaser-scale-hover: 1.02;
+  --sbb-teaser-description-color: var(--sbb-color-granite);
+  --sbb-teaser-description-color: light-dark(var(--sbb-color-granite), var(--sbb-color-silver));
+  --sbb-teaser-flex-direction: row;
+  --sbb-teaser-align-items: center;
+  --sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
+  --sbb-teaser-border-radius: var(--sbb-border-radius-4x);
+}
+@media (forced-colors: active) {
+  :host {
+    --sbb-teaser-description-color: LinkText;
+    --sbb-title-text-color-normal-override: LinkText !important;
+  }
+}
+
+:host([alignment=after]) {
+  --sbb-teaser-align-items: start;
+}
+
+:host([alignment=below]) {
+  --sbb-teaser-flex-direction: column;
+  --sbb-teaser-align-items: baseline;
+  --sbb-teaser-gap: var(--sbb-spacing-fixed-3x);
+}
+
+@media (any-hover: hover) {
+  :host(:hover) {
+    --sbb-teaser-scale: var(--sbb-teaser-scale-hover);
+  }
+}
+.sbb-teaser__wrapper {
+  display: flex;
+  position: relative;
+  cursor: var(--sbb-cursor-pointer);
+}
+.sbb-teaser__wrapper::before {
+  content: "​";
+  user-select: none;
+  width: 0;
+  height: 0;
+}
+
+.sbb-teaser {
+  text-decoration: none;
+  position: absolute;
+  inset: 0;
+}
+.sbb-teaser:focus-visible {
+  outline-offset: var(--sbb-focus-outline-offset);
+  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
+  border-radius: var(--sbb-teaser-border-radius);
+}
+@media (forced-colors: active) {
+  .sbb-teaser:focus-visible {
+    outline-offset: calc(2 * var(--sbb-focus-outline-offset));
+  }
+}
+@media (forced-colors: active) {
+  .sbb-teaser::before {
+    content: "";
+    position: absolute;
+    inset: calc(-1 * var(--sbb-focus-outline-offset));
+    pointer-events: none;
+    border-radius: calc(var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset));
+    border: var(--sbb-border-width-1x) solid CanvasText;
+  }
+}
+
+.sbb-teaser__container {
+  display: flex;
+  flex-flow: var(--sbb-teaser-flex-direction) nowrap;
+  align-items: var(--sbb-teaser-align-items);
+  gap: var(--sbb-teaser-gap);
+  max-width: 100%;
+  width: 100%;
+  pointer-events: none;
+}
+
+.sbb-teaser__text {
+  --sbb-text-font-size: var(--sbb-text-font-size-s);
+  font-family: var(--sbb-typo-font-family);
+  font-weight: normal;
+  line-height: var(--sbb-typo-line-height-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  font-size: var(--sbb-text-font-size);
+  color: var(--sbb-teaser-description-color);
+  overflow: hidden;
+  max-width: 100%;
+}
+
+::slotted([slot=image]) {
+  width: 18.75rem;
+  display: block;
+}
+
+.sbb-teaser__image-wrapper {
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: var(--sbb-teaser-border-radius);
+  transition: box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing);
+}
+@media (any-hover: hover) {
+  :host(:hover) .sbb-teaser__image-wrapper {
+    box-shadow: var(--sbb-box-shadow-level-9-hard);
+  }
+}
+
+.sbb-teaser__description {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+}
+
+::slotted(sbb-chip-label) {
+  display: block;
+  max-width: fit-content;
+  margin-block-end: var(--sbb-spacing-fixed-1x);
+}
+
+::slotted(sbb-title) {
+  margin-block: 0;
+}`;
+let SbbTeaserElement = (() => {
+  var _alignment_accessor_storage, _a;
+  let _classDecorators = [customElement("sbb-teaser")];
+  let _classDescriptor;
+  let _classExtraInitializers = [];
+  let _classThis;
+  let _classSuper = SbbLinkBaseElement;
+  let _alignment_decorators;
+  let _alignment_initializers = [];
+  let _alignment_extraInitializers = [];
+  _a = class extends _classSuper {
+    constructor() {
+      super(...arguments);
+      __privateAdd(this, _alignment_accessor_storage, __runInitializers(this, _alignment_initializers, "after-centered"));
+      __runInitializers(this, _alignment_extraInitializers);
+    }
+    /** Teaser variant - define the position and the alignment of the text block. */
+    get alignment() {
+      return __privateGet(this, _alignment_accessor_storage);
+    }
+    set alignment(value) {
+      __privateSet(this, _alignment_accessor_storage, value);
+    }
+    _handleSlotchange() {
+      const chip = Array.from(this.children).find((el) => el.localName === "sbb-chip-label");
+      if (chip) {
+        chip.slot = "chip";
+      }
+      const title = Array.from(this.children).find((el) => el.localName === "sbb-title");
+      if (title) {
+        title.slot = "title";
+      }
+    }
+    _configureChip(event) {
+      const chipLabel = event.target.assignedElements().find((e) => e.localName === "sbb-chip-label");
+      if (chipLabel) {
+        customElements.upgrade(chipLabel);
+        chipLabel.color = "charcoal";
+        chipLabel.size = "xxs";
+      }
+    }
+    _configureTitle(event) {
+      const title = event.target.assignedElements().find((e) => e.localName === "sbb-title");
+      if (title) {
+        customElements.upgrade(title);
+        title.visualLevel = "5";
+      }
+    }
+    render() {
+      return html`
+      <div class="sbb-teaser__wrapper">
+        ${this.renderLink(
+        // For SEO, we add the accessibility hidden as hidden content of the link
+        html`<sbb-screen-reader-only>${this.accessibilityLabel}</sbb-screen-reader-only>`
+      )}
+        ${this.renderContent()}
+      </div>
+    `;
+    }
+    renderContent() {
+      return html`
+      <span class="sbb-teaser__container">
+        <span class="sbb-teaser__image-wrapper">
+          <slot name="image"></slot>
+        </span>
+        <span class="sbb-teaser__text">
+          <slot name="chip" @slotchange=${this._configureChip}></slot>
+          <slot name="title" @slotchange=${this._configureTitle}></slot>
+          <p class="sbb-teaser__description">
+            <slot @slotchange=${this._handleSlotchange}></slot>
+          </p>
+        </span>
+      </span>
+    `;
+    }
+  }, _alignment_accessor_storage = new WeakMap(), _classThis = _a, (() => {
+    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+    _alignment_decorators = [property({ reflect: true })];
+    __esDecorate(_a, null, _alignment_decorators, { kind: "accessor", name: "alignment", static: false, private: false, access: { has: (obj) => "alignment" in obj, get: (obj) => obj.alignment, set: (obj, value) => {
+      obj.alignment = value;
+    } }, metadata: _metadata }, _alignment_initializers, _alignment_extraInitializers);
+    __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+    _classThis = _classDescriptor.value;
+    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+  })(), _a.styles = [boxSizingStyles, style], __runInitializers(_classThis, _classExtraInitializers), _a;
+  return _classThis;
+})();
+export {
+  SbbTeaserElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVhc2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2VsZW1lbnRzL3RlYXNlci90ZWFzZXIuY29tcG9uZW50LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQ1NTUmVzdWx0R3JvdXAsIFRlbXBsYXRlUmVzdWx0IH0gZnJvbSAnbGl0JztcbmltcG9ydCB7IGN1c3RvbUVsZW1lbnQsIHByb3BlcnR5IH0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuaW1wb3J0IHsgaHRtbCB9IGZyb20gJ2xpdC9zdGF0aWMtaHRtbC5qcyc7XG5cbmltcG9ydCB0eXBlIHsgU2JiQ2hpcExhYmVsRWxlbWVudCB9IGZyb20gJy4uL2NoaXAtbGFiZWwudHMnO1xuaW1wb3J0IHsgU2JiTGlua0Jhc2VFbGVtZW50IH0gZnJvbSAnLi4vY29yZS9iYXNlLWVsZW1lbnRzLnRzJztcbmltcG9ydCB7IGJveFNpemluZ1N0eWxlcyB9IGZyb20gJy4uL2NvcmUvc3R5bGVzLnRzJztcbmltcG9ydCB0eXBlIHsgU2JiVGl0bGVFbGVtZW50IH0gZnJvbSAnLi4vdGl0bGUudHMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi90ZWFzZXIuc2Nzcz9saXQmaW5saW5lJztcblxuaW1wb3J0ICcuLi9zY3JlZW4tcmVhZGVyLW9ubHkudHMnO1xuXG4vKipcbiAqIEl0IGRpc3BsYXlzIGFuIGludGVyYWN0aXZlIGltYWdlIHdpdGggY2FwdGlvbi5cbiAqXG4gKiBAc2xvdCBpbWFnZSAtIFNsb3QgdXNlZCB0byByZW5kZXIgdGhlIGltYWdlLlxuICogQHNsb3QgY2hpcCAtIFNsb3QgZm9yIHRoZSBgc2JiLWNoaXAtbGFiZWxgIGVsZW1lbnQuIFRoZSBzbG90IG9uIHRoZSBgc2JiLWNoaXAtbGFiZWxgIGVsZW1lbnQgaXMgYXV0b21hdGljYWxseSBhc3NpZ25lZCB3aGVuIHNsb3R0ZWQgaW4gdGhlIHVubmFtZWQgc2xvdC5cbiAqIEBzbG90IHRpdGxlIC0gU2xvdCBmb3IgdGhlIHRpdGxlLiBGb3IgdGhlIHN0YW5kYXJkIGBzYmItdGl0bGVgIGVsZW1lbnQsIHRoZSBzbG90IGlzIGF1dG9tYXRpY2FsbHkgYXNzaWduZWQgd2hlbiBzbG90dGVkIGluIHRoZSB1bm5hbWVkIHNsb3QuXG4gKiBAc2xvdCAtIFVzZSB0aGUgdW5uYW1lZCBzbG90IHRvIHJlbmRlciB0aGUgZGVzY3JpcHRpb24sIHRoZSBzYmItdGl0bGUgYW5kIHRoZSBzYmItY2hpcC1sYWJlbC5cbiAqL1xuZXhwb3J0XG5AY3VzdG9tRWxlbWVudCgnc2JiLXRlYXNlcicpXG5jbGFzcyBTYmJUZWFzZXJFbGVtZW50IGV4dGVuZHMgU2JiTGlua0Jhc2VFbGVtZW50IHtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSBzdHlsZXM6IENTU1Jlc3VsdEdyb3VwID0gW2JveFNpemluZ1N0eWxlcywgc3R5bGVdO1xuXG4gIC8qKiBUZWFzZXIgdmFyaWFudCAtIGRlZmluZSB0aGUgcG9zaXRpb24gYW5kIHRoZSBhbGlnbm1lbnQgb2YgdGhlIHRleHQgYmxvY2suICovXG4gIEBwcm9wZXJ0eSh7IHJlZmxlY3Q6IHRydWUgfSkgcHVibGljIGFjY2Vzc29yIGFsaWdubWVudDogJ2FmdGVyLWNlbnRlcmVkJyB8ICdhZnRlcicgfCAnYmVsb3cnID1cbiAgICAnYWZ0ZXItY2VudGVyZWQnO1xuXG4gIHByaXZhdGUgX2hhbmRsZVNsb3RjaGFuZ2UoKTogdm9pZCB7XG4gICAgY29uc3QgY2hpcCA9IEFycmF5LmZyb20odGhpcy5jaGlsZHJlbikuZmluZCgoZWwpID0+IGVsLmxvY2FsTmFtZSA9PT0gJ3NiYi1jaGlwLWxhYmVsJyk7XG4gICAgaWYgKGNoaXApIHtcbiAgICAgIGNoaXAuc2xvdCA9ICdjaGlwJztcbiAgICB9XG5cbiAgICBjb25zdCB0aXRsZSA9IEFycmF5LmZyb20odGhpcy5jaGlsZHJlbikuZmluZCgoZWwpID0+IGVsLmxvY2FsTmFtZSA9PT0gJ3NiYi10aXRsZScpO1xuICAgIGlmICh0aXRsZSkge1xuICAgICAgdGl0bGUuc2xvdCA9ICd0aXRsZSc7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBfY29uZmlndXJlQ2hpcChldmVudDogRXZlbnQpOiB2b2lkIHtcbiAgICAvLyBXZSBuZWVkIHRvIGNoZWNrIGFzc2lnbmVkIGVsZW1lbnRzIGJlY2F1c2UgaW4gdGhlIGltYWdlIHNsb3QgaXQgY2FuIGhhdmUgbGFiZWxzIGFzIHdlbGwuXG4gICAgY29uc3QgY2hpcExhYmVsID0gKGV2ZW50LnRhcmdldCBhcyBIVE1MU2xvdEVsZW1lbnQpXG4gICAgICAuYXNzaWduZWRFbGVtZW50cygpXG4gICAgICAuZmluZCgoZSk6IGUgaXMgU2JiQ2hpcExhYmVsRWxlbWVudCA9PiBlLmxvY2FsTmFtZSA9PT0gJ3NiYi1jaGlwLWxhYmVsJyk7XG5cbiAgICBpZiAoY2hpcExhYmVsKSB7XG4gICAgICBjdXN0b21FbGVtZW50cy51cGdyYWRlKGNoaXBMYWJlbCk7XG4gICAgICBjaGlwTGFiZWwuY29sb3IgPSAnY2hhcmNvYWwnO1xuICAgICAgY2hpcExhYmVsLnNpemUgPSAneHhzJztcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIF9jb25maWd1cmVUaXRsZShldmVudDogRXZlbnQpOiB2b2lkIHtcbiAgICBjb25zdCB0aXRsZSA9IChldmVudC50YXJnZXQgYXMgSFRNTFNsb3RFbGVtZW50KVxuICAgICAgLmFzc2lnbmVkRWxlbWVudHMoKVxuICAgICAgLmZpbmQoKGUpOiBlIGlzIFNiYlRpdGxlRWxlbWVudCA9PiBlLmxvY2FsTmFtZSA9PT0gJ3NiYi10aXRsZScpO1xuXG4gICAgaWYgKHRpdGxlKSB7XG4gICAgICBjdXN0b21FbGVtZW50cy51cGdyYWRlKHRpdGxlKTtcbiAgICAgIHRpdGxlLnZpc3VhbExldmVsID0gJzUnO1xuICAgIH1cbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSByZW5kZXIoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgIC8vIFdlIHJlbmRlciB0aGUgY29udGVudCBvdXRzaWRlIHRoZSBhbmNob3IgdGFnIHRvIGFsbG93IHNjcmVlbiByZWFkZXJzIHRvIG5hdmlnYXRlIHRocm91Z2ggaXRcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxkaXYgY2xhc3M9XCJzYmItdGVhc2VyX193cmFwcGVyXCI+XG4gICAgICAgICR7dGhpcy5yZW5kZXJMaW5rKFxuICAgICAgICAgIC8vIEZvciBTRU8sIHdlIGFkZCB0aGUgYWNjZXNzaWJpbGl0eSBoaWRkZW4gYXMgaGlkZGVuIGNvbnRlbnQgb2YgdGhlIGxpbmtcbiAgICAgICAgICBodG1sYDxzYmItc2NyZWVuLXJlYWRlci1vbmx5PiR7dGhpcy5hY2Nlc3NpYmlsaXR5TGFiZWx9PC9zYmItc2NyZWVuLXJlYWRlci1vbmx5PmAsXG4gICAgICAgICl9XG4gICAgICAgICR7dGhpcy5yZW5kZXJDb250ZW50KCl9XG4gICAgICA8L2Rpdj5cbiAgICBgO1xuICB9XG5cbiAgcHJvdGVjdGVkIHJlbmRlckNvbnRlbnQoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgIHJldHVybiBodG1sYFxuICAgICAgPHNwYW4gY2xhc3M9XCJzYmItdGVhc2VyX19jb250YWluZXJcIj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJzYmItdGVhc2VyX19pbWFnZS13cmFwcGVyXCI+XG4gICAgICAgICAgPHNsb3QgbmFtZT1cImltYWdlXCI+PC9zbG90PlxuICAgICAgICA8L3NwYW4+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwic2JiLXRlYXNlcl9fdGV4dFwiPlxuICAgICAgICAgIDxzbG90IG5hbWU9XCJjaGlwXCIgQHNsb3RjaGFuZ2U9JHt0aGlzLl9jb25maWd1cmVDaGlwfT48L3Nsb3Q+XG4gICAgICAgICAgPHNsb3QgbmFtZT1cInRpdGxlXCIgQHNsb3RjaGFuZ2U9JHt0aGlzLl9jb25maWd1cmVUaXRsZX0+PC9zbG90PlxuICAgICAgICAgIDxwIGNsYXNzPVwic2JiLXRlYXNlcl9fZGVzY3JpcHRpb25cIj5cbiAgICAgICAgICAgIDxzbG90IEBzbG90Y2hhbmdlPSR7dGhpcy5faGFuZGxlU2xvdGNoYW5nZX0+PC9zbG90PlxuICAgICAgICAgIDwvcD5cbiAgICAgICAgPC9zcGFuPlxuICAgICAgPC9zcGFuPlxuICAgIGA7XG4gIH1cbn1cblxuZGVjbGFyZSBnbG9iYWwge1xuICBpbnRlcmZhY2UgSFRNTEVsZW1lbnRUYWdOYW1lTWFwIHtcbiAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25hbWluZy1jb252ZW50aW9uXG4gICAgJ3NiYi10ZWFzZXInOiBTYmJUZWFzZXJFbGVtZW50O1xuICB9XG59XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7SUF1Qk0sb0JBQWdCLE1BQUE7OzBCQURyQixjQUFjLFlBQVksQ0FBQzs7OztvQkFDRzs7OztBQUFSLEVBQUEsbUJBQVEsWUFBa0I7QUFBQTs7QUFJbEIsc0RBQUEsa0JBQUEsTUFBQSx5QkFDM0IsZ0JBQWdCOzs7O0lBRFcsSUFBZ0IsWUFBUztBQUFBLGFBQUEsbUJBQUE7QUFBQSxJQUFBO0FBQUEsSUFBekIsSUFBZ0IsVUFBUyxPQUFBO0FBQUEseUJBQUEsNkJBQUE7QUFBQSxJQUFBO0FBQUEsSUFHOUMsb0JBQWlCO0FBQ3ZCLFlBQU0sT0FBTyxNQUFNLEtBQUssS0FBSyxRQUFRLEVBQUUsS0FBSyxDQUFDLE9BQU8sR0FBRyxjQUFjLGdCQUFnQjtBQUNyRixVQUFJLE1BQU07QUFDUixhQUFLLE9BQU87QUFBQSxNQUNkO0FBRUEsWUFBTSxRQUFRLE1BQU0sS0FBSyxLQUFLLFFBQVEsRUFBRSxLQUFLLENBQUMsT0FBTyxHQUFHLGNBQWMsV0FBVztBQUNqRixVQUFJLE9BQU87QUFDVCxjQUFNLE9BQU87QUFBQSxNQUNmO0FBQUEsSUFDRjtBQUFBLElBRVEsZUFBZSxPQUFZO0FBRWpDLFlBQU0sWUFBYSxNQUFNLE9BQ3RCLGlCQUFBLEVBQ0EsS0FBSyxDQUFDLE1BQWdDLEVBQUUsY0FBYyxnQkFBZ0I7QUFFekUsVUFBSSxXQUFXO0FBQ2IsdUJBQWUsUUFBUSxTQUFTO0FBQ2hDLGtCQUFVLFFBQVE7QUFDbEIsa0JBQVUsT0FBTztBQUFBLE1BQ25CO0FBQUEsSUFDRjtBQUFBLElBRVEsZ0JBQWdCLE9BQVk7QUFDbEMsWUFBTSxRQUFTLE1BQU0sT0FDbEIsaUJBQUEsRUFDQSxLQUFLLENBQUMsTUFBNEIsRUFBRSxjQUFjLFdBQVc7QUFFaEUsVUFBSSxPQUFPO0FBQ1QsdUJBQWUsUUFBUSxLQUFLO0FBQzVCLGNBQU0sY0FBYztBQUFBLE1BQ3RCO0FBQUEsSUFDRjtBQUFBLElBRW1CLFNBQU07QUFFdkIsYUFBTztBQUFBO0FBQUEsVUFFRCxLQUFLO0FBQUE7QUFBQSxRQUVMLCtCQUErQixLQUFLLGtCQUFrQjtBQUFBLE1BQUEsQ0FDdkQ7QUFBQSxVQUNDLEtBQUssZUFBZTtBQUFBO0FBQUE7QUFBQSxJQUc1QjtBQUFBLElBRVUsZ0JBQWE7QUFDckIsYUFBTztBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSwwQ0FNK0IsS0FBSyxjQUFjO0FBQUEsMkNBQ2xCLEtBQUssZUFBZTtBQUFBO0FBQUEsZ0NBRS9CLEtBQUssaUJBQWlCO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxJQUtwRDtBQUFBLEtBbkU2Qjs7QUFBNUIsNEJBQUEsQ0FBQSxTQUFTLEVBQUUsU0FBUyxLQUFBLENBQU0sQ0FBQztBQUFDLGlCQUFBLElBQUEsTUFBQSx1QkFBQSxFQUFBLE1BQUEsWUFBQSxNQUFBLGFBQUEsUUFBQSxPQUFBLFNBQUEsT0FBQSxRQUFBLEVBQUEsS0FBQSxDQUFBLFFBQUEsZUFBQSxLQUFBLEtBQUEsQ0FBQSxRQUFBLElBQWdCLFdBQVMsS0FBQSxDQUFBLEtBQUEsVUFBQTtBQUFBLFVBQVQsWUFBUztBQUFBLElBQUEsS0FBQSxVQUFBLFVBQUEsR0FBQSx5QkFBQSw0QkFBQTtBQUp4RCxpQkFBQSxNQUFBLG1CQUFBLEVBQUEsT0FBQSxXQUFBLEdBQUEsa0JBQUEsRUFBQSxNQUFBLFNBQUEsTUFBQSxXQUFBLE1BQUEsVUFBQSxVQUFBLEdBQUEsTUFBQSx1QkFBQTs7O1FBQ3lCLEdBQUEsU0FBeUIsQ0FBQyxpQkFBaUIsS0FBSyxHQURuRSxrQkFBQSxZQUFBLHVCQUFBLEdBQWlCOzs7In0=

package/development/teaser-hero/teaser-hero.component.d.ts

@@ -0,0 +1,23 @@
+import { CSSResultGroup, TemplateResult } from 'lit';
+import { SbbLinkBaseElement } from '../core/base-elements.ts';
+/**
+ * It displays an image and an action call within a panel.
+ *
+ * @slot - Use the unnamed slot to add text content to the panel
+ * @slot link-content - Link content of the panel
+ * @slot image - The background image that can be a `sbb-image`
+ * @slot chip - The `sbb-chip-label` component that will be displayed on top-left corner
+ */
+export declare class SbbTeaserHeroElement extends SbbLinkBaseElement {
+    static styles: CSSResultGroup;
+    /** Panel link text. */
+    accessor linkContent: string;
+    private _imageSlotChanged;
+    protected renderTemplate(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-teaser-hero': SbbTeaserHeroElement;
+    }
+}
+//# sourceMappingURL=teaser-hero.component.d.ts.map

package/development/teaser-hero/teaser-hero.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"teaser-hero.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/teaser-hero/teaser-hero.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAM9D,OAAO,8BAA8B,CAAC;AAEtC;;;;;;;GAOG;AACH,qBAEM,oBAAqB,SAAQ,kBAAkB;IACnD,OAAuB,MAAM,EAAE,cAAc,CAA4B;IAEzE,uBAAuB;IACvB,SAEgB,WAAW,EAAE,MAAM,CAAM;IAEzC,OAAO,CAAC,iBAAiB;cAIN,cAAc,IAAI,cAAc;CAmBpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}