@sbb-esta/lyne-elements 4.7.0 → 4.8.1

package/development/tab-label.component-C0qpk3p_.js

@@ -0,0 +1,420 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { css } from "lit";
+import { property } from "lit/decorators.js";
+import { SbbElement } from "./core/base-elements.js";
+import { forceType, omitEmptyConverter } from "./core/decorators.js";
+import { SbbDisabledMixin } from "./core/mixins.js";
+import { boxSizingStyles } from "./core/styles.js";
+import { html as html$1, unsafeStatic } from "lit/static-html.js";
+import { SbbPropertyWatcherController } from "./core/controllers.js";
+import { tabLabelCommonStyles } from "./tabs/common/styles.js";
+import { SbbIconNameMixin } from "./icon.pure.js";
+//#region src/elements/tabs/tab-label/tab-label.scss?lit&inline
+var tab_label_default = css`:host {
+  --sbb-tab-label-animation-duration: var(
+    --sbb-disable-animation-duration,
+    var(--sbb-animation-duration-2x)
+  );
+  --sbb-tab-label-outline-border-radius-internal: calc(
+    var(--sbb-tab-label-outline-border-radius) - var(--sbb-focus-outline-offset)
+  );
+}
+
+:host(:is(:is(:state(size-s),[state--size-s]), [size=s])) {
+  --sbb-tab-label-height: var(--sbb-size-element-xs);
+  --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xxxs);
+  --sbb-tab-label-font-size: var(--sbb-text-font-size-s);
+}
+
+:host(:is(:is(:state(size-l),[state--size-l]), [size=l])) {
+  --sbb-tab-label-height: var(--sbb-size-element-m);
+  --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);
+  --sbb-tab-label-font-size: var(--sbb-text-font-size-m);
+}
+
+:host(:is(:is(:state(size-xl),[state--size-xl]), [size=xl])) {
+  --sbb-tab-label-height: var(--sbb-size-element-m);
+  --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);
+  --sbb-tab-label-font-size: var(--sbb-text-font-size-xl);
+}
+
+:host(sbb-tab-label),
+:host(sbb-tab-nav-bar) ::slotted(a) {
+  pointer-events: var(--sbb-tab-label-pointer-events, unset);
+}
+@media (forced-colors: active) {
+  :host(sbb-tab-label),
+  :host(sbb-tab-nav-bar) ::slotted(a) {
+    --sbb-tab-label-color: ButtonText;
+    --sbb-tab-label-amount-color: ButtonText;
+  }
+}
+
+:host(sbb-tab-nav-bar) ::slotted(a),
+:host(sbb-tab-label) .sbb-tab-label {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--sbb-tab-label-gap);
+  color: var(--sbb-tab-label-color);
+  margin: 0;
+  padding-inline: var(--sbb-tab-label-inline-padding);
+  min-height: var(--sbb-tab-label-height);
+  transition: color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);
+  font-size: var(--sbb-tab-label-font-size);
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+  font-weight: var(--sbb-tab-label-font-weight);
+  text-decoration: var(--sbb-tab-label-text-decoration);
+}
+:host(sbb-tab-nav-bar) ::slotted(a)::after,
+:host(sbb-tab-label) .sbb-tab-label::after {
+  position: absolute;
+  content: "";
+  inset-inline: 0;
+  inset-block-end: 0;
+  height: var(--sbb-tab-label-marker-thickness);
+  background-color: var(--sbb-tab-label-color);
+  scale: var(--sbb-tab-label-marker-scale, 0);
+  transition-duration: var(--sbb-tab-label-animation-duration);
+  transition-timing-function: var(--sbb-tab-label-animation-easing);
+  transition-property: scale, background-color;
+}
+
+:host(sbb-tab-nav-bar) .sbb-tab-nav-bar > [data-has-divider],
+:host(sbb-tab-label:is(:state(has-divider),[state--has-divider])) {
+  position: relative;
+}
+:host(sbb-tab-nav-bar) .sbb-tab-nav-bar > [data-has-divider]::before,
+:host(sbb-tab-label:is(:state(has-divider),[state--has-divider]))::before {
+  content: "";
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-end: 0;
+  width: var(--sbb-tab-group-width);
+  height: var(--sbb-border-width-1x);
+  background-color: var(--sbb-tab-label-line-color);
+}
+
+:host(sbb-tab-nav-bar) ::slotted(a.sbb-disabled),
+:host(sbb-tab-label[disabled]) {
+  --sbb-tab-label-cursor: unset;
+  --sbb-tab-label-pointer-events: none;
+  --sbb-tab-label-text-decoration: line-through;
+}
+@media (forced-colors: active) {
+  :host(sbb-tab-nav-bar) ::slotted(a.sbb-disabled),
+  :host(sbb-tab-label[disabled]) {
+    --sbb-tab-label-color: GrayText;
+    --sbb-tab-label-amount-color: GrayText;
+  }
+}
+
+:host(sbb-tab-nav-bar) ::slotted(a.sbb-active:not(.sbb-disabled)),
+:host(sbb-tab-label[active]:not([disabled])) {
+  --sbb-tab-label-color: var(--sbb-color-3);
+  --sbb-tab-label-cursor: unset;
+  --sbb-tab-label-pointer-events: none;
+  --sbb-tab-label-marker-scale: 1;
+}
+@media (forced-colors: active) {
+  :host(sbb-tab-nav-bar) ::slotted(a.sbb-active:not(.sbb-disabled)),
+  :host(sbb-tab-label[active]:not([disabled])) {
+    --sbb-tab-label-color: ButtonText;
+    --sbb-tab-label-amount-color: ButtonText;
+  }
+}
+
+@media (any-hover: hover) {
+  :host(sbb-tab-nav-bar) ::slotted(a:hover:not(.sbb-disabled)),
+  :host(sbb-tab-label:hover:not([disabled])) {
+    --sbb-tab-label-marker-scale: 1;
+  }
+}
+
+:host(sbb-tab-nav-bar) ::slotted(a:active:not(.sbb-disabled)),
+:host(sbb-tab-label:active) {
+  --sbb-tab-label-color: var(--sbb-color-3);
+}
+@media (forced-colors: active) {
+  :host(sbb-tab-nav-bar) ::slotted(a:active:not(.sbb-disabled)),
+  :host(sbb-tab-label:active) {
+    --sbb-tab-label-color: ButtonText;
+    --sbb-tab-label-amount-color: ButtonText;
+  }
+}
+
+:host(sbb-tab-nav-bar) ::slotted(a:focus-visible),
+:host(sbb-tab-label:focus-visible) .sbb-tab-label {
+  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-tab-label-outline-border-radius-internal);
+}
+
+:host {
+  display: inline-block;
+  max-width: 100%;
+  outline: none !important;
+}
+
+.sbb-tab-label {
+  cursor: var(--sbb-tab-label-cursor);
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.sbb-tab-label__icon {
+  display: flex;
+  flex-shrink: 0;
+}
+:host(:not(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name]))) .sbb-tab-label__icon {
+  display: none;
+}
+
+.sbb-tab-label__text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-tab-label__text {
+  display: none;
+}
+
+.sbb-tab-label__amount {
+  margin: 0;
+  color: var(--sbb-tab-label-amount-color);
+  font-weight: normal;
+  text-decoration: var(--sbb-tab-label-text-decoration);
+}
+:host(:not(:is(:state(slotted-amount),[state--slotted-amount]), [amount])) .sbb-tab-label__amount {
+  display: none;
+}`;
+//#endregion
+//#region src/elements/tabs/tab-label/tab-label.component.ts
+/**
+* Combined with a `sbb-tab-group`, it displays a tab's title.
+*
+* @slot - Use the unnamed slot to add content to the tab title.
+* @slot icon - Use this slot to display an icon to the left of the title, by providing the `sbb-icon` component.
+* @slot amount - Provide a number to show an amount to the right of the title.
+*/
+var SbbTabLabelElement = (() => {
+	let _classSuper = SbbDisabledMixin(SbbIconNameMixin(SbbElement));
+	let _level_decorators;
+	let _level_initializers = [];
+	let _level_extraInitializers = [];
+	let _active_decorators;
+	let _active_initializers = [];
+	let _active_extraInitializers = [];
+	let _amount_decorators;
+	let _amount_initializers = [];
+	let _amount_extraInitializers = [];
+	return class SbbTabLabelElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_level_decorators = [property()];
+			_active_decorators = [forceType(), property({
+				reflect: true,
+				type: Boolean
+			})];
+			_amount_decorators = [forceType(), property({
+				reflect: true,
+				converter: omitEmptyConverter
+			})];
+			__esDecorate(this, null, _level_decorators, {
+				kind: "accessor",
+				name: "level",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "level" in obj,
+					get: (obj) => obj.level,
+					set: (obj, value) => {
+						obj.level = value;
+					}
+				},
+				metadata: _metadata
+			}, _level_initializers, _level_extraInitializers);
+			__esDecorate(this, null, _active_decorators, {
+				kind: "accessor",
+				name: "active",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "active" in obj,
+					get: (obj) => obj.active,
+					set: (obj, value) => {
+						obj.active = value;
+					}
+				},
+				metadata: _metadata
+			}, _active_initializers, _active_extraInitializers);
+			__esDecorate(this, null, _amount_decorators, {
+				kind: "accessor",
+				name: "amount",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "amount" in obj,
+					get: (obj) => obj.amount,
+					set: (obj, value) => {
+						obj.amount = value;
+					}
+				},
+				metadata: _metadata
+			}, _amount_initializers, _amount_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-tab-label";
+		}
+		static {
+			this.role = "tab";
+		}
+		static {
+			this.styles = [
+				boxSizingStyles,
+				tabLabelCommonStyles,
+				tab_label_default
+			];
+		}
+		#level_accessor_storage;
+		/**
+		* The level will correspond to the heading tag generated in the title.
+		* Use this property to generate the appropriate header tag, taking SEO into consideration.
+		*/
+		get level() {
+			return this.#level_accessor_storage;
+		}
+		set level(value) {
+			this.#level_accessor_storage = value;
+		}
+		#active_accessor_storage;
+		/** Active tab state. */
+		get active() {
+			return this.#active_accessor_storage;
+		}
+		set active(value) {
+			this.#active_accessor_storage = value;
+		}
+		#amount_accessor_storage;
+		/** Amount displayed inside the tab. */
+		get amount() {
+			return this.#amount_accessor_storage;
+		}
+		set amount(value) {
+			this.#amount_accessor_storage = value;
+		}
+		/** Get the `sbb-tab` related to the `sbb-tab-label`. */
+		get tab() {
+			return this.nextElementSibling?.localName === "sbb-tab" ? this.nextElementSibling : null;
+		}
+		/** Get the parent `sbb-tab-group`. */
+		get group() {
+			return this.closest("sbb-tab-group");
+		}
+		constructor() {
+			super();
+			/** Whether the tab is selected. */
+			this._selected = false;
+			this._previousSize = null;
+			this.#level_accessor_storage = __runInitializers(this, _level_initializers, "1");
+			this.#active_accessor_storage = (__runInitializers(this, _level_extraInitializers), __runInitializers(this, _active_initializers, false));
+			this.#amount_accessor_storage = (__runInitializers(this, _active_extraInitializers), __runInitializers(this, _amount_initializers, ""));
+			__runInitializers(this, _amount_extraInitializers);
+			this.addEventListener("click", () => this.activate());
+			this.addController(new SbbPropertyWatcherController(this, () => this.group, { size: (g) => {
+				if (this._previousSize) this.internals.states.delete(`size-${this._previousSize}`);
+				this._previousSize = g?.size || null;
+				if (this._previousSize) this.internals.states.add(`size-${this._previousSize}`);
+			} }));
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			this.slot = "tab-bar";
+			this.tabIndex = this.active ? 0 : -1;
+		}
+		willUpdate(changedProperties) {
+			super.willUpdate(changedProperties);
+			if (changedProperties.has("active")) {
+				this.internals.ariaSelected = `${this.active}`;
+				if (this.active && !this.disabled) this.activate();
+				else this.deactivate();
+			}
+			if (changedProperties.has("disabled") && this.disabled) {
+				this.tabIndex = -1;
+				if (this.active) {
+					this.deactivate();
+					this.group?.activateTab(0);
+				}
+			}
+		}
+		/** Deactivate the tab. */
+		deactivate() {
+			this.active = false;
+			this.tab?.["deactivate"]();
+			this._selected = false;
+			this.tabIndex = -1;
+		}
+		/** Select the tab, deactivating the current selected one, and dispatch the tabchange event. */
+		activate() {
+			if (this.disabled) return;
+			const tabLabels = this.group?.labels || [];
+			const prevActiveTabLabel = tabLabels.find((e) => e._selected);
+			if (prevActiveTabLabel !== this) {
+				prevActiveTabLabel?.deactivate();
+				this.active = true;
+				this.tab?.["activate"]();
+				this._selected = true;
+				this.tabIndex = 0;
+				this.tab?.dispatchEvent(new Event("active", {
+					bubbles: true,
+					composed: true
+				}));
+				this.group?.dispatchEvent(new CustomEvent("tabchange", {
+					bubbles: true,
+					composed: true,
+					detail: {
+						activeIndex: tabLabels.findIndex((e) => e === this),
+						activeTabLabel: this,
+						activeTab: this.tab,
+						previousIndex: tabLabels.findIndex((e) => e === prevActiveTabLabel),
+						previousTabLabel: prevActiveTabLabel,
+						previousTab: prevActiveTabLabel?.tab
+					}
+				}));
+			}
+		}
+		/**
+		* @internal
+		*/
+		linkToTab() {
+			if (!this.tab) return;
+			this.internals.ariaControlsElements = [this.tab];
+		}
+		render() {
+			const TAGNAME = `h${Number(this.level) < 7 ? this.level : "1"}`;
+			return html$1`
+        <${unsafeStatic(TAGNAME)} class="sbb-tab-label">
+          <span class="sbb-tab-label__icon">
+            ${this.renderIconSlot()}
+          </span>
+          <span class="sbb-tab-label__text">
+            <slot></slot>
+          </span>
+          <p class="sbb-tab-label__amount">
+            <slot name="amount">${this.amount}</slot>
+          </p>
+        </${unsafeStatic(TAGNAME)}>
+    `;
+		}
+	};
+})();
+//#endregion
+export { SbbTabLabelElement as t };
+
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLWxhYmVsLmNvbXBvbmVudC1DMHFwazNwXy5qcyIsIm5hbWVzIjpbXSwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvZWxlbWVudHMvdGFicy90YWItbGFiZWwvdGFiLWxhYmVsLnNjc3M/bGl0JmlubGluZSIsIi4uLy4uLy4uL3NyYy9lbGVtZW50cy90YWJzL3RhYi1sYWJlbC90YWItbGFiZWwuY29tcG9uZW50LnRzIl0sInNvdXJjZXNDb250ZW50IjpbIkB1c2UgJy4uLy4uL2NvcmUvc3R5bGVzJyBhcyBzYmI7XG5AdXNlICcuLi9jb21tb24vdGFiLWxhYmVsLWNvbW1vbicgYXMgdGFiLWxhYmVsLWNvbW1vbjtcblxuOmhvc3Qge1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIG1heC13aWR0aDogMTAwJTtcblxuICAvLyBVc2UgIWltcG9ydGFudCBoZXJlIHRvIG5vdCBpbnRlcmZlcmUgd2l0aCBGaXJlZm94IGZvY3VzIHJpbmcgZGVmaW5pdGlvblxuICAvLyB3aGljaCBhcHBlYXJzIGluIG5vcm1hbGl6ZSBDU1Mgb2Ygc2V2ZXJhbCBmcmFtZXdvcmtzLlxuICBvdXRsaW5lOiBub25lICFpbXBvcnRhbnQ7XG59XG5cbi5zYmItdGFiLWxhYmVsIHtcbiAgY3Vyc29yOiB2YXIoLS1zYmItdGFiLWxhYmVsLWN1cnNvcik7XG4gIHVzZXItc2VsZWN0OiBub25lO1xuICAtd2Via2l0LXRhcC1oaWdobGlnaHQtY29sb3I6IHRyYW5zcGFyZW50O1xufVxuXG4uc2JiLXRhYi1sYWJlbF9faWNvbiB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtc2hyaW5rOiAwO1xuXG4gIDpob3N0KDpub3QoOnN0YXRlKHNsb3R0ZWQtaWNvbiksIDpzdGF0ZShoYXMtaWNvbi1uYW1lKSkpICYge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gIH1cbn1cblxuLnNiYi10YWItbGFiZWxfX3RleHQge1xuICBAaW5jbHVkZSBzYmIuZWxsaXBzaXM7XG5cbiAgOmhvc3QoOm5vdCg6c3RhdGUoc2xvdHRlZCkpKSAmIHtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG59XG5cbi5zYmItdGFiLWxhYmVsX19hbW91bnQge1xuICBAaW5jbHVkZSB0YWItbGFiZWwtY29tbW9uLnRhYi1sYWJlbC1hbW91bnQ7XG5cbiAgOmhvc3QoOm5vdCg6c3RhdGUoc2xvdHRlZC1hbW91bnQpLCBbYW1vdW50XSkpICYge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gIH1cbn1cbiIsImltcG9ydCB0eXBlIHsgQ1NTUmVzdWx0R3JvdXAsIFByb3BlcnR5VmFsdWVzLCBUZW1wbGF0ZVJlc3VsdCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBwcm9wZXJ0eSB9IGZyb20gJ2xpdC9kZWNvcmF0b3JzLmpzJztcbmltcG9ydCB7IGh0bWwsIHVuc2FmZVN0YXRpYyB9IGZyb20gJ2xpdC9zdGF0aWMtaHRtbC5qcyc7XG5cbmltcG9ydCB7IFNiYkVsZW1lbnQgfSBmcm9tICcuLi8uLi9jb3JlL2Jhc2UtZWxlbWVudHMudHMnO1xuaW1wb3J0IHsgU2JiUHJvcGVydHlXYXRjaGVyQ29udHJvbGxlciB9IGZyb20gJy4uLy4uL2NvcmUvY29udHJvbGxlcnMudHMnO1xuaW1wb3J0IHsgZm9yY2VUeXBlLCBvbWl0RW1wdHlDb252ZXJ0ZXIgfSBmcm9tICcuLi8uLi9jb3JlL2RlY29yYXRvcnMudHMnO1xuaW1wb3J0IHsgU2JiRGlzYWJsZWRNaXhpbiB9IGZyb20gJy4uLy4uL2NvcmUvbWl4aW5zLnRzJztcbmltcG9ydCB7IGJveFNpemluZ1N0eWxlcyB9IGZyb20gJy4uLy4uL2NvcmUvc3R5bGVzLnRzJztcbmltcG9ydCB7IFNiYkljb25OYW1lTWl4aW4gfSBmcm9tICcuLi8uLi9pY29uLnB1cmUudHMnO1xuaW1wb3J0IHR5cGUgeyBTYmJUaXRsZUxldmVsIH0gZnJvbSAnLi4vLi4vdGl0bGUucHVyZS50cyc7XG5pbXBvcnQgeyB0YWJMYWJlbENvbW1vblN0eWxlcyB9IGZyb20gJy4uL2NvbW1vbi9zdHlsZXMudHMnO1xuaW1wb3J0IHR5cGUgeyBTYmJUYWJFbGVtZW50IH0gZnJvbSAnLi4vdGFiL3RhYi5jb21wb25lbnQudHMnO1xuaW1wb3J0IHR5cGUge1xuICBTYmJUYWJDaGFuZ2VkRXZlbnREZXRhaWxzLFxuICBTYmJUYWJHcm91cEVsZW1lbnQsXG59IGZyb20gJy4uL3RhYi1ncm91cC90YWItZ3JvdXAuY29tcG9uZW50LnRzJztcblxuaW1wb3J0IHN0eWxlIGZyb20gJy4vdGFiLWxhYmVsLnNjc3M/bGl0JmlubGluZSc7XG5cbi8qKlxuICogQ29tYmluZWQgd2l0aCBhIGBzYmItdGFiLWdyb3VwYCwgaXQgZGlzcGxheXMgYSB0YWIncyB0aXRsZS5cbiAqXG4gKiBAc2xvdCAtIFVzZSB0aGUgdW5uYW1lZCBzbG90IHRvIGFkZCBjb250ZW50IHRvIHRoZSB0YWIgdGl0bGUuXG4gKiBAc2xvdCBpY29uIC0gVXNlIHRoaXMgc2xvdCB0byBkaXNwbGF5IGFuIGljb24gdG8gdGhlIGxlZnQgb2YgdGhlIHRpdGxlLCBieSBwcm92aWRpbmcgdGhlIGBzYmItaWNvbmAgY29tcG9uZW50LlxuICogQHNsb3QgYW1vdW50IC0gUHJvdmlkZSBhIG51bWJlciB0byBzaG93IGFuIGFtb3VudCB0byB0aGUgcmlnaHQgb2YgdGhlIHRpdGxlLlxuICovXG5leHBvcnQgY2xhc3MgU2JiVGFiTGFiZWxFbGVtZW50IGV4dGVuZHMgU2JiRGlzYWJsZWRNaXhpbihTYmJJY29uTmFtZU1peGluKFNiYkVsZW1lbnQpKSB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgcmVhZG9ubHkgZWxlbWVudE5hbWU6IHN0cmluZyA9ICdzYmItdGFiLWxhYmVsJztcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSByb2xlID0gJ3RhYic7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IFtib3hTaXppbmdTdHlsZXMsIHRhYkxhYmVsQ29tbW9uU3R5bGVzLCBzdHlsZV07XG5cbiAgLyoqIFdoZXRoZXIgdGhlIHRhYiBpcyBzZWxlY3RlZC4gKi9cbiAgcHJpdmF0ZSBfc2VsZWN0ZWQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgcHJpdmF0ZSBfcHJldmlvdXNTaXplOiBTYmJUYWJHcm91cEVsZW1lbnRbJ3NpemUnXSB8IG51bGwgPSBudWxsO1xuXG4gIC8qKlxuICAgKiBUaGUgbGV2ZWwgd2lsbCBjb3JyZXNwb25kIHRvIHRoZSBoZWFkaW5nIHRhZyBnZW5lcmF0ZWQgaW4gdGhlIHRpdGxlLlxuICAgKiBVc2UgdGhpcyBwcm9wZXJ0eSB0byBnZW5lcmF0ZSB0aGUgYXBwcm9wcmlhdGUgaGVhZGVyIHRhZywgdGFraW5nIFNFTyBpbnRvIGNvbnNpZGVyYXRpb24uXG4gICAqL1xuICBAcHJvcGVydHkoKSBwdWJsaWMgYWNjZXNzb3IgbGV2ZWw6IFNiYlRpdGxlTGV2ZWwgPSAnMSc7XG5cbiAgLyoqIEFjdGl2ZSB0YWIgc3RhdGUuICovXG4gIEBmb3JjZVR5cGUoKVxuICBAcHJvcGVydHkoeyByZWZsZWN0OiB0cnVlLCB0eXBlOiBCb29sZWFuIH0pXG4gIHB1YmxpYyBhY2Nlc3NvciBhY3RpdmU6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAvKiogQW1vdW50IGRpc3BsYXllZCBpbnNpZGUgdGhlIHRhYi4gKi9cbiAgQGZvcmNlVHlwZSgpXG4gIEBwcm9wZXJ0eSh7IHJlZmxlY3Q6IHRydWUsIGNvbnZlcnRlcjogb21pdEVtcHR5Q29udmVydGVyIH0pXG4gIHB1YmxpYyBhY2Nlc3NvciBhbW91bnQ6IHN0cmluZyA9ICcnO1xuXG4gIC8qKiBHZXQgdGhlIGBzYmItdGFiYCByZWxhdGVkIHRvIHRoZSBgc2JiLXRhYi1sYWJlbGAuICovXG4gIHB1YmxpYyBnZXQgdGFiKCk6IFNiYlRhYkVsZW1lbnQgfCBudWxsIHtcbiAgICByZXR1cm4gdGhpcy5uZXh0RWxlbWVudFNpYmxpbmc/LmxvY2FsTmFtZSA9PT0gJ3NiYi10YWInXG4gICAgICA/ICh0aGlzLm5leHRFbGVtZW50U2libGluZyBhcyBTYmJUYWJFbGVtZW50KVxuICAgICAgOiBudWxsO1xuICB9XG5cbiAgLyoqIEdldCB0aGUgcGFyZW50IGBzYmItdGFiLWdyb3VwYC4gKi9cbiAgcHVibGljIGdldCBncm91cCgpOiBTYmJUYWJHcm91cEVsZW1lbnQgfCBudWxsIHtcbiAgICByZXR1cm4gdGhpcy5jbG9zZXN0KCdzYmItdGFiLWdyb3VwJyk7XG4gIH1cblxuICBwdWJsaWMgY29uc3RydWN0b3IoKSB7XG4gICAgc3VwZXIoKTtcblxuICAgIHRoaXMuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCAoKSA9PiB0aGlzLmFjdGl2YXRlKCkpO1xuICAgIHRoaXMuYWRkQ29udHJvbGxlcihcbiAgICAgIG5ldyBTYmJQcm9wZXJ0eVdhdGNoZXJDb250cm9sbGVyKHRoaXMsICgpID0+IHRoaXMuZ3JvdXAsIHtcbiAgICAgICAgc2l6ZTogKGcpID0+IHtcbiAgICAgICAgICBpZiAodGhpcy5fcHJldmlvdXNTaXplKSB7XG4gICAgICAgICAgICB0aGlzLmludGVybmFscy5zdGF0ZXMuZGVsZXRlKGBzaXplLSR7dGhpcy5fcHJldmlvdXNTaXplfWApO1xuICAgICAgICAgIH1cbiAgICAgICAgICB0aGlzLl9wcmV2aW91c1NpemUgPSBnPy5zaXplIHx8IG51bGw7XG4gICAgICAgICAgaWYgKHRoaXMuX3ByZXZpb3VzU2l6ZSkge1xuICAgICAgICAgICAgdGhpcy5pbnRlcm5hbHMuc3RhdGVzLmFkZChgc2l6ZS0ke3RoaXMuX3ByZXZpb3VzU2l6ZX1gKTtcbiAgICAgICAgICB9XG4gICAgICAgIH0sXG4gICAgICB9KSxcbiAgICApO1xuICB9XG5cbiAgcHVibGljIG92ZXJyaWRlIGNvbm5lY3RlZENhbGxiYWNrKCk6IHZvaWQge1xuICAgIHN1cGVyLmNvbm5lY3RlZENhbGxiYWNrKCk7XG4gICAgdGhpcy5zbG90ID0gJ3RhYi1iYXInO1xuICAgIHRoaXMudGFiSW5kZXggPSB0aGlzLmFjdGl2ZSA/IDAgOiAtMTtcbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSB3aWxsVXBkYXRlKGNoYW5nZWRQcm9wZXJ0aWVzOiBQcm9wZXJ0eVZhbHVlczx0aGlzPik6IHZvaWQge1xuICAgIHN1cGVyLndpbGxVcGRhdGUoY2hhbmdlZFByb3BlcnRpZXMpO1xuXG4gICAgaWYgKGNoYW5nZWRQcm9wZXJ0aWVzLmhhcygnYWN0aXZlJykpIHtcbiAgICAgIHRoaXMuaW50ZXJuYWxzLmFyaWFTZWxlY3RlZCA9IGAke3RoaXMuYWN0aXZlfWA7XG5cbiAgICAgIGlmICh0aGlzLmFjdGl2ZSAmJiAhdGhpcy5kaXNhYmxlZCkge1xuICAgICAgICB0aGlzLmFjdGl2YXRlKCk7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICB0aGlzLmRlYWN0aXZhdGUoKTtcbiAgICAgIH1cbiAgICB9XG5cbiAgICBpZiAoY2hhbmdlZFByb3BlcnRpZXMuaGFzKCdkaXNhYmxlZCcpICYmIHRoaXMuZGlzYWJsZWQpIHtcbiAgICAgIHRoaXMudGFiSW5kZXggPSAtMTtcbiAgICAgIGlmICh0aGlzLmFjdGl2ZSkge1xuICAgICAgICB0aGlzLmRlYWN0aXZhdGUoKTtcbiAgICAgICAgdGhpcy5ncm91cD8uYWN0aXZhdGVUYWIoMCk7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgLyoqIERlYWN0aXZhdGUgdGhlIHRhYi4gKi9cbiAgcHVibGljIGRlYWN0aXZhdGUoKTogdm9pZCB7XG4gICAgdGhpcy5hY3RpdmUgPSBmYWxzZTtcbiAgICB0aGlzLnRhYj8uWydkZWFjdGl2YXRlJ10oKTtcbiAgICB0aGlzLl9zZWxlY3RlZCA9IGZhbHNlO1xuICAgIHRoaXMudGFiSW5kZXggPSAtMTtcbiAgfVxuXG4gIC8qKiBTZWxlY3QgdGhlIHRhYiwgZGVhY3RpdmF0aW5nIHRoZSBjdXJyZW50IHNlbGVjdGVkIG9uZSwgYW5kIGRpc3BhdGNoIHRoZSB0YWJjaGFuZ2UgZXZlbnQuICovXG4gIHB1YmxpYyBhY3RpdmF0ZSgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5kaXNhYmxlZCkge1xuICAgICAgaWYgKGltcG9ydC5tZXRhLmVudi5ERVYpIHtcbiAgICAgICAgY29uc29sZS53YXJuKCdZb3UgY2Fubm90IGFjdGl2YXRlIGEgZGlzYWJsZWQgdGFiJyk7XG4gICAgICB9XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgY29uc3QgdGFiTGFiZWxzOiBTYmJUYWJMYWJlbEVsZW1lbnRbXSA9IHRoaXMuZ3JvdXA/LmxhYmVscyB8fCBbXTtcbiAgICBjb25zdCBwcmV2QWN0aXZlVGFiTGFiZWwgPSB0YWJMYWJlbHMuZmluZCgoZSkgPT4gZS5fc2VsZWN0ZWQpO1xuICAgIGlmIChwcmV2QWN0aXZlVGFiTGFiZWwgIT09IHRoaXMpIHtcbiAgICAgIHByZXZBY3RpdmVUYWJMYWJlbD8uZGVhY3RpdmF0ZSgpO1xuICAgICAgdGhpcy5hY3RpdmUgPSB0cnVlO1xuICAgICAgdGhpcy50YWI/LlsnYWN0aXZhdGUnXSgpO1xuICAgICAgdGhpcy5fc2VsZWN0ZWQgPSB0cnVlO1xuICAgICAgdGhpcy50YWJJbmRleCA9IDA7XG4gICAgICB0aGlzLnRhYj8uZGlzcGF0Y2hFdmVudChuZXcgRXZlbnQoJ2FjdGl2ZScsIHsgYnViYmxlczogdHJ1ZSwgY29tcG9zZWQ6IHRydWUgfSkpO1xuICAgICAgdGhpcy5ncm91cD8uZGlzcGF0Y2hFdmVudChcbiAgICAgICAgbmV3IEN1c3RvbUV2ZW50PFNiYlRhYkNoYW5nZWRFdmVudERldGFpbHM+KCd0YWJjaGFuZ2UnLCB7XG4gICAgICAgICAgYnViYmxlczogdHJ1ZSxcbiAgICAgICAgICBjb21wb3NlZDogdHJ1ZSxcbiAgICAgICAgICBkZXRhaWw6IHtcbiAgICAgICAgICAgIGFjdGl2ZUluZGV4OiB0YWJMYWJlbHMuZmluZEluZGV4KChlKSA9PiBlID09PSB0aGlzKSxcbiAgICAgICAgICAgIGFjdGl2ZVRhYkxhYmVsOiB0aGlzLFxuICAgICAgICAgICAgYWN0aXZlVGFiOiB0aGlzLnRhYiBhcyBTYmJUYWJFbGVtZW50LFxuICAgICAgICAgICAgcHJldmlvdXNJbmRleDogdGFiTGFiZWxzLmZpbmRJbmRleCgoZSkgPT4gZSA9PT0gcHJldkFjdGl2ZVRhYkxhYmVsKSxcbiAgICAgICAgICAgIHByZXZpb3VzVGFiTGFiZWw6IHByZXZBY3RpdmVUYWJMYWJlbCxcbiAgICAgICAgICAgIHByZXZpb3VzVGFiOiBwcmV2QWN0aXZlVGFiTGFiZWw/LnRhYiBhcyBTYmJUYWJFbGVtZW50LFxuICAgICAgICAgIH0sXG4gICAgICAgIH0pLFxuICAgICAgKTtcbiAgICB9XG4gIH1cblxuICAvKipcbiAgICogQGludGVybmFsXG4gICAqL1xuICBwcm90ZWN0ZWQgbGlua1RvVGFiKCk6IHZvaWQge1xuICAgIGlmICghdGhpcy50YWIpIHtcbiAgICAgIGlmIChpbXBvcnQubWV0YS5lbnYuREVWKSB7XG4gICAgICAgIGNvbnNvbGUud2FybihcbiAgICAgICAgICBgTWlzc2luZyBjb250ZW50OiB5b3Ugc2hvdWxkIHByb3ZpZGUgYSByZWxhdGVkIGNvbnRlbnQgZm9yIHRoZSB0YWIgJHt0aGlzLm91dGVySFRNTH0uYCxcbiAgICAgICAgKTtcbiAgICAgIH1cbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy5pbnRlcm5hbHMuYXJpYUNvbnRyb2xzRWxlbWVudHMgPSBbdGhpcy50YWJdO1xuICB9XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIHJlbmRlcigpOiBUZW1wbGF0ZVJlc3VsdCB7XG4gICAgY29uc3QgVEFHTkFNRSA9IGBoJHtOdW1iZXIodGhpcy5sZXZlbCkgPCA3ID8gdGhpcy5sZXZlbCA6ICcxJ31gO1xuXG4gICAgLyogZXNsaW50LWRpc2FibGUgbGl0L2JpbmRpbmctcG9zaXRpb25zICovXG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICAgIDwke3Vuc2FmZVN0YXRpYyhUQUdOQU1FKX0gY2xhc3M9XCJzYmItdGFiLWxhYmVsXCI+XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJzYmItdGFiLWxhYmVsX19pY29uXCI+XG4gICAgICAgICAgICAke3RoaXMucmVuZGVySWNvblNsb3QoKX1cbiAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJzYmItdGFiLWxhYmVsX190ZXh0XCI+XG4gICAgICAgICAgICA8c2xvdD48L3Nsb3Q+XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgIDxwIGNsYXNzPVwic2JiLXRhYi1sYWJlbF9fYW1vdW50XCI+XG4gICAgICAgICAgICA8c2xvdCBuYW1lPVwiYW1vdW50XCI+JHt0aGlzLmFtb3VudH08L3Nsb3Q+XG4gICAgICAgICAgPC9wPlxuICAgICAgICA8LyR7dW5zYWZlU3RhdGljKFRBR05BTUUpfT5cbiAgICBgO1xuICB9XG59XG5cbmRlY2xhcmUgZ2xvYmFsIHtcbiAgaW50ZXJmYWNlIEhUTUxFbGVtZW50VGFnTmFtZU1hcCB7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uYW1pbmctY29udmVudGlvblxuICAgICdzYmItdGFiLWxhYmVsJzogU2JiVGFiTGFiZWxFbGVtZW50O1xuICB9XG59XG4iXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7SUMyQmEsNEJBQWtCO21CQUFTLGlCQUFpQixpQkFBaUIsV0FBVyxDQUFDOzs7Ozs7Ozs7O2NBQXpFLDJCQUEyQixZQUE4Qzs7O3dCQWFuRixVQUFVLENBQUE7eUJBR1YsV0FBVyxFQUNYLFNBQVM7SUFBRSxTQUFTO0lBQU0sTUFBTTtJQUFTLENBQUMsQ0FBQTt5QkFJMUMsV0FBVyxFQUNYLFNBQVM7SUFBRSxTQUFTO0lBQU0sV0FBVztJQUFvQixDQUFDLENBQUE7QUFUL0MsZ0JBQUEsTUFBQSxNQUFBLG1CQUFBO0lBQUEsTUFBQTtJQUFBLE1BQUE7SUFBQSxRQUFBO0lBQUEs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

package/development/tab-nav-bar.component-CbZKhBxs.js

@@ -0,0 +1,123 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { css } from "lit";
+import { property } from "lit/decorators.js";
+import { SbbElement } from "./core/base-elements.js";
+import { SbbNamedSlotListMixin } from "./core/mixins.js";
+import { boxSizingStyles } from "./core/styles.js";
+import { ResizeController } from "@lit-labs/observers/resize-controller.js";
+import { isLean } from "./core/dom/lean-context.js";
+import { tabGroupCommonStyles, tabLabelCommonStyles } from "./tabs/common/styles.js";
+//#region src/elements/tabs/tab-nav-bar/tab-nav-bar.scss?lit&inline
+var tab_nav_bar_default = css`:host {
+  margin-block-end: var(--sbb-tab-group-content-gap);
+}
+
+.sbb-tab-nav-bar {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-size: inherit;
+}`;
+//#endregion
+//#region src/elements/tabs/tab-nav-bar/tab-nav-bar.component.ts
+/**
+* It displays one or more tab-label-like elements, each one is an anchor element.
+*
+* @slot - Use the unnamed slot to add anchors.
+*/
+var SbbTabNavBarElement = (() => {
+	let _classSuper = SbbNamedSlotListMixin(SbbElement);
+	let _size_decorators;
+	let _size_initializers = [];
+	let _size_extraInitializers = [];
+	return class SbbTabNavBarElement extends _classSuper {
+		constructor() {
+			super(...arguments);
+			this.listChildLocalNames = ["a"];
+			this.#size_accessor_storage = __runInitializers(this, _size_initializers, isLean() ? "s" : "l");
+			this._resizeController = (__runInitializers(this, _size_extraInitializers), new ResizeController(this, {
+				target: null,
+				callback: () => this._onTabGroupElementResize()
+			}));
+			this._listElement = null;
+		}
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_size_decorators = [property({ reflect: true })];
+			__esDecorate(this, 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);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-tab-nav-bar";
+		}
+		static {
+			this.styles = [
+				boxSizingStyles,
+				tabLabelCommonStyles,
+				tabGroupCommonStyles,
+				tab_nav_bar_default
+			];
+		}
+		static {
+			this.role = "navigation";
+		}
+		#size_accessor_storage;
+		/**
+		* Size variant, either s, l or xl.
+		* @default 'l' / 's' (lean)
+		*/
+		get size() {
+			return this.#size_accessor_storage;
+		}
+		set size(value) {
+			this.#size_accessor_storage = value;
+		}
+		_onTabGroupElementResize() {
+			this.listChildren.forEach((anchor) => {
+				anchor.assignedSlot?.parentElement?.toggleAttribute("data-has-divider", anchor === this.listChildren[0] || anchor.offsetLeft === this.listChildren[0].offsetLeft);
+			});
+			this.style.setProperty("--sbb-tab-group-width", `${this._listElement?.clientWidth}px`);
+		}
+		firstUpdated(changedProperties) {
+			super.firstUpdated(changedProperties);
+			this._updateWidthObserver();
+			this.shadowRoot?.addEventListener("slotchange", () => this._updateWidthObserver());
+		}
+		_updateWidthObserver() {
+			const target = this.shadowRoot?.querySelector(`.${this.localName}`);
+			if (target && this._listElement !== target) {
+				if (this._listElement) this._resizeController.unobserve(this._listElement);
+				this._listElement = target;
+				this._resizeController.observe(target);
+			} else if (!target && this._listElement) {
+				this._resizeController.unobserve(this._listElement);
+				this._listElement = null;
+			}
+		}
+		render() {
+			return this.renderList();
+		}
+	};
+})();
+//#endregion
+export { SbbTabNavBarElement as t };
+
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLW5hdi1iYXIuY29tcG9uZW50LUNiWktoQnhzLmpzIiwibmFtZXMiOltdLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9lbGVtZW50cy90YWJzL3RhYi1uYXYtYmFyL3RhYi1uYXYtYmFyLnNjc3M/bGl0JmlubGluZSIsIi4uLy4uLy4uL3NyYy9lbGVtZW50cy90YWJzL3RhYi1uYXYtYmFyL3RhYi1uYXYtYmFyLmNvbXBvbmVudC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJAdXNlICcuLi8uLi9jb3JlL3N0eWxlcycgYXMgc2JiO1xuXG46aG9zdCB7XG4gIG1hcmdpbi1ibG9jay1lbmQ6IHZhcigtLXNiYi10YWItZ3JvdXAtY29udGVudC1nYXApO1xufVxuXG4uc2JiLXRhYi1uYXYtYmFyIHtcbiAgQGluY2x1ZGUgc2JiLmxpc3QtcmVzZXQ7XG59XG4iLCJpbXBvcnQgeyBSZXNpemVDb250cm9sbGVyIH0gZnJvbSAnQGxpdC1sYWJzL29ic2VydmVycy9yZXNpemUtY29udHJvbGxlci5qcyc7XG5pbXBvcnQgdHlwZSB7IENTU1Jlc3VsdEdyb3VwLCBQcm9wZXJ0eVZhbHVlcywgVGVtcGxhdGVSZXN1bHQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgcHJvcGVydHkgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5cbmltcG9ydCB7IFNiYkVsZW1lbnQgfSBmcm9tICcuLi8uLi9jb3JlL2Jhc2UtZWxlbWVudHMudHMnO1xuaW1wb3J0IHsgaXNMZWFuIH0gZnJvbSAnLi4vLi4vY29yZS9kb20vbGVhbi1jb250ZXh0LnRzJztcbmltcG9ydCB7IFNiYk5hbWVkU2xvdExpc3RNaXhpbiB9IGZyb20gJy4uLy4uL2NvcmUvbWl4aW5zLnRzJztcbmltcG9ydCB7IGJveFNpemluZ1N0eWxlcyB9IGZyb20gJy4uLy4uL2NvcmUvc3R5bGVzLnRzJztcbmltcG9ydCB7IHRhYkdyb3VwQ29tbW9uU3R5bGVzLCB0YWJMYWJlbENvbW1vblN0eWxlcyB9IGZyb20gJy4uL2NvbW1vbi9zdHlsZXMudHMnO1xuXG5pbXBvcnQgc3R5bGUgZnJvbSAnLi90YWItbmF2LWJhci5zY3NzP2xpdCZpbmxpbmUnO1xuXG4vKipcbiAqIEl0IGRpc3BsYXlzIG9uZSBvciBtb3JlIHRhYi1sYWJlbC1saWtlIGVsZW1lbnRzLCBlYWNoIG9uZSBpcyBhbiBhbmNob3IgZWxlbWVudC5cbiAqXG4gKiBAc2xvdCAtIFVzZSB0aGUgdW5uYW1lZCBzbG90IHRvIGFkZCBhbmNob3JzLlxuICovXG5leHBvcnQgY2xhc3MgU2JiVGFiTmF2QmFyRWxlbWVudCBleHRlbmRzIFNiYk5hbWVkU2xvdExpc3RNaXhpbihTYmJFbGVtZW50KSB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgcmVhZG9ubHkgZWxlbWVudE5hbWU6IHN0cmluZyA9ICdzYmItdGFiLW5hdi1iYXInO1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBbXG4gICAgYm94U2l6aW5nU3R5bGVzLFxuICAgIHRhYkxhYmVsQ29tbW9uU3R5bGVzLFxuICAgIHRhYkdyb3VwQ29tbW9uU3R5bGVzLFxuICAgIHN0eWxlLFxuICBdO1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHJlYWRvbmx5IHJvbGUgPSAnbmF2aWdhdGlvbic7XG5cbiAgcHJvdGVjdGVkIG92ZXJyaWRlIGxpc3RDaGlsZExvY2FsTmFtZXMgPSBbJ2EnXTtcblxuICAvKipcbiAgICogU2l6ZSB2YXJpYW50LCBlaXRoZXIgcywgbCBvciB4bC5cbiAgICogQGRlZmF1bHQgJ2wnIC8gJ3MnIChsZWFuKVxuICAgKi9cbiAgQHByb3BlcnR5KHsgcmVmbGVjdDogdHJ1ZSB9KVxuICBwdWJsaWMgYWNjZXNzb3Igc2l6ZTogJ3MnIHwgJ2wnIHwgJ3hsJyA9IGlzTGVhbigpID8gJ3MnIDogJ2wnO1xuXG4gIHByaXZhdGUgX3Jlc2l6ZUNvbnRyb2xsZXIgPSBuZXcgUmVzaXplQ29udHJvbGxlcih0aGlzLCB7XG4gICAgdGFyZ2V0OiBudWxsLFxuICAgIGNhbGxiYWNrOiAoKSA9PiB0aGlzLl9vblRhYkdyb3VwRWxlbWVudFJlc2l6ZSgpLFxuICB9KTtcblxuICBwcml2YXRlIF9saXN0RWxlbWVudDogRWxlbWVudCB8IG51bGwgPSBudWxsO1xuXG4gIHByaXZhdGUgX29uVGFiR3JvdXBFbGVtZW50UmVzaXplKCk6IHZvaWQge1xuICAgIHRoaXMubGlzdENoaWxkcmVuLmZvckVhY2goKGFuY2hvcikgPT4ge1xuICAgICAgYW5jaG9yLmFzc2lnbmVkU2xvdD8ucGFyZW50RWxlbWVudD8udG9nZ2xlQXR0cmlidXRlKFxuICAgICAgICAnZGF0YS1oYXMtZGl2aWRlcicsXG4gICAgICAgIGFuY2hvciA9PT0gdGhpcy5saXN0Q2hpbGRyZW5bMF0gfHwgYW5jaG9yLm9mZnNldExlZnQgPT09IHRoaXMubGlzdENoaWxkcmVuWzBdLm9mZnNldExlZnQsXG4gICAgICApO1xuICAgIH0pO1xuXG4gICAgdGhpcy5zdHlsZS5zZXRQcm9wZXJ0eSgnLS1zYmItdGFiLWdyb3VwLXdpZHRoJywgYCR7dGhpcy5fbGlzdEVsZW1lbnQ/LmNsaWVudFdpZHRofXB4YCk7XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgZmlyc3RVcGRhdGVkKGNoYW5nZWRQcm9wZXJ0aWVzOiBQcm9wZXJ0eVZhbHVlczx0aGlzPik6IHZvaWQge1xuICAgIHN1cGVyLmZpcnN0VXBkYXRlZChjaGFuZ2VkUHJvcGVydGllcyk7XG5cbiAgICB0aGlzLl91cGRhdGVXaWR0aE9ic2VydmVyKCk7XG5cbiAgICAvLyBXaGVuZXZlciBzbG90dGVkIGVsZW1lbnQgY2hhbmdlLCB0aGUgdGFyZ2V0IHRvIG9ic2VydmUgbWlnaHQgY2hhbmdlIGFzIHdlbGxcbiAgICAvLyAoY2hhbmdlIGZyb20gc2luZ2xlIHRvIG11bHRpcGxlIGVsZW1lbnRzIG9yIHZpY2UgdmVyc2EpLlxuICAgIHRoaXMuc2hhZG93Um9vdD8uYWRkRXZlbnRMaXN0ZW5lcignc2xvdGNoYW5nZScsICgpID0+IHRoaXMuX3VwZGF0ZVdpZHRoT2JzZXJ2ZXIoKSk7XG4gIH1cblxuICBwcml2YXRlIF91cGRhdGVXaWR0aE9ic2VydmVyKCk6IHZvaWQge1xuICAgIGNvbnN0IHRhcmdldCA9IHRoaXMuc2hhZG93Um9vdD8ucXVlcnlTZWxlY3RvcihgLiR7dGhpcy5sb2NhbE5hbWV9YCk7XG5cbiAgICBpZiAodGFyZ2V0ICYmIHRoaXMuX2xpc3RFbGVtZW50ICE9PSB0YXJnZXQpIHtcbiAgICAgIGlmICh0aGlzLl9saXN0RWxlbWVudCkge1xuICAgICAgICB0aGlzLl9yZXNpemVDb250cm9sbGVyLnVub2JzZXJ2ZSh0aGlzLl9saXN0RWxlbWVudCk7XG4gICAgICB9XG4gICAgICB0aGlzLl9saXN0RWxlbWVudCA9IHRhcmdldDtcbiAgICAgIHRoaXMuX3Jlc2l6ZUNvbnRyb2xsZXIub2JzZXJ2ZSh0YXJnZXQpO1xuICAgIH0gZWxzZSBpZiAoIXRhcmdldCAmJiB0aGlzLl9saXN0RWxlbWVudCkge1xuICAgICAgdGhpcy5fcmVzaXplQ29udHJvbGxlci51bm9ic2VydmUodGhpcy5fbGlzdEVsZW1lbnQpO1xuICAgICAgdGhpcy5fbGlzdEVsZW1lbnQgPSBudWxsO1xuICAgIH1cbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSByZW5kZXIoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgIHJldHVybiB0aGlzLnJlbmRlckxpc3QoKTtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLXRhYi1uYXYtYmFyJzogU2JiVGFiTmF2QmFyRWxlbWVudDtcbiAgfVxufVxuIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7SUNpQmEsNkJBQW1CO21CQUFTLHNCQUFzQixXQUFXOzs7O2NBQTdELDRCQUE0QixZQUFpQzs7O0FBVXJELFFBQUEsc0JBQXNCLENBQUMsSUFBSTtBQU85QixTQUFBLHdCQUFBLGtCQUFBLE1BQUEsb0JBQXlCLFFBQVEsR0FBRyxNQUFNLElBQUc7QUFFckQsUUFBQSxxQkFBaUIsa0JBQUEsTUFBQSx3QkFBQSxFQUFHLElBQUksaUJBQWlCLE1BQU07SUFDckQsUUFBUTtJQUNSLGdCQUFnQixLQUFLLDBCQUFBO0lBQ3RCLENBQUM7QUFFTSxRQUFBLGVBQStCOzs7O3VCQVJ0QyxTQUFTLEVBQUUsU0FBUyxNQUFNLENBQUMsQ0FBQTtBQUM1QixnQkFBQSxNQUFBLE1BQUEsa0JBQUE7SUFBQSxNQUFBO0lBQUEsTUFBQTtJQUFBLFFBQUE7SUFBQSxTQUFBO0lBQUEsUUFBQTtLQUFBLE1BQUEsUUFBQSxVQUFBO0tBQUEsTUFBQSxRQUFBLElBQWdCO0tBQUksTUFBQSxLQUFBLFVBQUE7QUFBQSxVQUFKLE9BQUk7O0tBQUE7SUFBQSxVQUFBO0lBQUEsRUFBQSxvQkFBQSx3QkFBQTs7Ozs7Ozs7O0FBaEJZLFFBQUEsY0FBc0I7OztBQUMvQixRQUFBLFNBQXlCO0lBQzlDO0lBQ0E7SUFDQTtJQUNBO0lBQ0Q7OztBQUMrQixRQUFBLE9BQU87O0VBU3ZDOzs7OztFQUFBLElBQWdCLE9BQUk7QUFBQSxVQUFBLE1BQUE7O0VBQXBCLElBQWdCLEtBQUksT0FBQTtBQUFBLFNBQUEsd0JBQUE7O0VBU1osMkJBQXdCO0FBQzlCLFFBQUssYUFBYSxTQUFTLFdBQVU7QUFDbkMsV0FBTyxjQUFjLGVBQWUsZ0JBQ2xDLG9CQUNBLFdBQVcsS0FBSyxhQUFhLE1BQU0sT0FBTyxlQUFlLEtBQUssYUFBYSxHQUFHLFdBQy9FO0tBQ0Q7QUFFRixRQUFLLE1BQU0sWUFBWSx5QkFBeUIsR0FBRyxLQUFLLGNBQWMsWUFBVyxJQUFLOztFQUdyRSxhQUFhLG1CQUF1QztBQUNyRSxTQUFNLGFBQWEsa0JBQWtCO0FBRXJDLFFBQUssc0JBQXNCO0FBSTNCLFFBQUssWUFBWSxpQkFBaUIsb0JBQW9CLEtBQUssc0JBQXNCLENBQUM7O0VBRzVFLHVCQUFvQjtHQUMxQixNQUFNLFNBQVMsS0FBSyxZQUFZLGNBQWMsSUFBSSxLQUFLLFlBQVk7QUFFbkUsT0FBSSxVQUFVLEtBQUssaUJBQWlCLFFBQVE7QUFDMUMsUUFBSSxLQUFLLGFBQ1AsTUFBSyxrQkFBa0IsVUFBVSxLQUFLLGFBQWE7QUFFckQsU0FBSyxlQUFlO0FBQ3BCLFNBQUssa0JBQWtCLFFBQVEsT0FBTztjQUM3QixDQUFDLFVBQVUsS0FBSyxjQUFjO0FBQ3ZDLFNBQUssa0JBQWtCLFVBQVUsS0FBSyxhQUFhO0FBQ25ELFNBQUssZUFBZTs7O0VBSUwsU0FBTTtBQUN2QixVQUFPLEtBQUssWUFBWSJ9