@sbb-esta/lyne-elements-dev 4.7.0-dev.1773349426 → 4.7.0-dev.1773388991

package/development/header-action-common-Dff8K0RB.js

@@ -0,0 +1,346 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { css } from "lit";
+import { property } from "lit/decorators.js";
+import { boxSizingStyles } from "./core/styles.js";
+import { html as html$1 } from "lit/static-html.js";
+import { SbbIconNameMixin } from "./icon.js";
+//#region src/elements/header/common/header-action.scss?lit&inline
+var header_action_default = css`:host {
+  --sbb-header-action-active-border-margin-inline: var(--sbb-header-action-padding-inline);
+  --sbb-header-action-min-width: var(--sbb-header-action-min-height);
+  --sbb-header-action-transition-duration: var(
+    --sbb-disable-animation-duration,
+    var(--sbb-animation-duration-2x)
+  );
+  --_sbb-header-first-item-padding-shift: calc(-1 * var(--sbb-header-action-padding-inline));
+  --sbb-header-first-item-margin-inline-start: calc(
+    var(--_sbb-header-first-item-padding-shift) - var(--sbb-header-first-item-icon-shift)
+  );
+  display: inline-block;
+  outline: none !important;
+}
+
+@media (any-hover: hover) {
+  :host(:hover:not(:active, :is(:state(active),[state--active]))) {
+    --sbb-header-action-background-color: var(--sbb-background-color-3);
+    --sbb-header-action-translate-y: -0.0625rem;
+    --sbb-header-action-background-inset: calc(var(--sbb-border-width-2x) * -1);
+  }
+}
+@media (any-hover: hover) and (forced-colors: active) {
+  :host(:hover:not(:active, :is(:state(active),[state--active]))) {
+    --sbb-header-action-border-color: Highlight;
+  }
+}
+:host(:is(:active, :is(:state(active),[state--active]))) {
+  --sbb-header-action-background-color: var(--sbb-background-color-4);
+}
+@media (forced-colors: active) {
+  :host(:is(:active, :is(:state(active),[state--active]))) {
+    --sbb-header-action-border-color: Highlight;
+  }
+}
+
+:host(.sbb-active) {
+  --sbb-header-action-active-border-scale: 1;
+}
+@media (forced-colors: active) {
+  :host(.sbb-active) {
+    --sbb-header-action-border-color: Highlight;
+  }
+}
+
+@media (forced-colors: active) {
+  :host(:is(:state(button),[state--button])) {
+    --sbb-header-action-color: ButtonText;
+  }
+}
+
+:host(:not(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name]))) {
+  --sbb-header-first-item-margin-inline-start: var(--_sbb-header-first-item-padding-shift);
+}
+
+.sbb-action-base {
+  font-family: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  font-size: inherit;
+  text-align: inherit;
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  color: var(--sbb-header-action-color);
+  text-decoration: none;
+  min-height: var(--sbb-header-action-min-height);
+  min-width: var(--sbb-header-action-min-width);
+  padding-inline: var(--sbb-header-action-padding-inline-zero, var(--sbb-header-action-padding-inline));
+  cursor: var(--sbb-cursor-pointer);
+  user-select: none;
+  outline: none;
+}
+.sbb-action-base::before {
+  position: absolute;
+  content: "";
+  inset: var(--sbb-header-action-background-inset, 0);
+  border-radius: var(--sbb-border-radius-infinity);
+  background-color: var(--sbb-header-action-background-color);
+  transition-duration: var(--sbb-header-action-transition-duration);
+  transition-timing-function: var(--sbb-header-action-transition-easing);
+  transition-property: inset, background-color;
+  border: var(--sbb-border-width-1x) solid var(--sbb-header-action-border-color);
+}
+@media (forced-colors: active) {
+  .sbb-action-base::before {
+    border-width: var(--sbb-border-width-2x);
+  }
+}
+:host(:focus-visible) .sbb-action-base::before, .sbb-action-base:focus-visible::before {
+  outline-offset: var(--sbb-focus-outline-offset);
+  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
+}
+.sbb-action-base::after {
+  content: "";
+  position: absolute;
+  border-block-end: var(--sbb-header-action-active-border-width) solid var(--sbb-header-action-active-border-color);
+  inset: auto 0 calc(-1 * var(--sbb-header-action-active-border-width));
+  margin-inline: var(--sbb-header-action-active-border-margin-inline);
+  scale: var(--sbb-header-action-active-border-scale, 0);
+  transition: scale var(--sbb-header-action-transition-easing) var(--sbb-header-action-transition-duration);
+}
+
+.sbb-header-action__wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--sbb-header-action-gap);
+  white-space: nowrap;
+  transform: translateY(var(--sbb-header-action-translate-y, 0));
+  transition: transform var(--sbb-header-action-transition-duration) var(--sbb-header-action-transition-easing);
+  will-change: transform;
+  max-width: 100%;
+}
+
+.sbb-header-action__icon {
+  --sbb-icon-svg-stroke-color: currentcolor;
+  --sbb-icon-svg-stroke-width: 1px;
+  min-width: var(--sbb-header-action-icon-dimension);
+  min-height: var(--sbb-header-action-icon-dimension);
+  line-height: 0;
+}
+:host(:not(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name]))) .sbb-header-action__icon {
+  display: none;
+}
+
+.sbb-header-action__text {
+  --sbb-text-font-size: var(--sbb-text-font-size-xs);
+  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);
+  font-weight: bold;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+}
+:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-header-action__text {
+  display: none;
+}
+
+:host(:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) {
+  --_sbb-header-first-item-padding-shift: calc(
+    -0.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension))
+  );
+  --sbb-header-action-padding-inline-zero: 0;
+  --sbb-header-action-active-border-margin-inline: calc(
+    0.5 * (100% - var(--sbb-size-icon-ui-small))
+  );
+}
+:host(:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) .sbb-header-action__text {
+  border: 0;
+  clip-path: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+  display: flex;
+}
+
+@media (max-width: calc(37.4375rem)) {
+  :host([expand-from=small]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) {
+    --_sbb-header-first-item-padding-shift: calc(
+      -0.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension))
+    );
+    --sbb-header-action-padding-inline-zero: 0;
+    --sbb-header-action-active-border-margin-inline: calc(
+      0.5 * (100% - var(--sbb-size-icon-ui-small))
+    );
+  }
+  :host([expand-from=small]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text {
+    border: 0;
+    clip-path: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+    display: flex;
+  }
+}
+
+@media (max-width: calc(63.9375rem)) {
+  :host([expand-from=large]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) {
+    --_sbb-header-first-item-padding-shift: calc(
+      -0.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension))
+    );
+    --sbb-header-action-padding-inline-zero: 0;
+    --sbb-header-action-active-border-margin-inline: calc(
+      0.5 * (100% - var(--sbb-size-icon-ui-small))
+    );
+  }
+  :host([expand-from=large]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text {
+    border: 0;
+    clip-path: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+    display: flex;
+  }
+}
+
+@media (max-width: calc(89.9375rem)) {
+  :host([expand-from=ultra]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) {
+    --_sbb-header-first-item-padding-shift: calc(
+      -0.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension))
+    );
+    --sbb-header-action-padding-inline-zero: 0;
+    --sbb-header-action-active-border-margin-inline: calc(
+      0.5 * (100% - var(--sbb-size-icon-ui-small))
+    );
+  }
+  :host([expand-from=ultra]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text {
+    border: 0;
+    clip-path: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+    display: flex;
+  }
+}
+
+@media (max-width: calc(98.9375rem)) {
+  :host([expand-from=ultra--max-content]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) {
+    --_sbb-header-first-item-padding-shift: calc(
+      -0.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension))
+    );
+    --sbb-header-action-padding-inline-zero: 0;
+    --sbb-header-action-active-border-margin-inline: calc(
+      0.5 * (100% - var(--sbb-size-icon-ui-small))
+    );
+  }
+  :host([expand-from=ultra--max-content]:is(:is(:state(slotted-icon),[state--slotted-icon]), :is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text {
+    border: 0;
+    clip-path: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+    display: flex;
+  }
+}
+
+::slotted([slot=icon]:is(sbb-image, img)) {
+  width: var(--sbb-header-action-icon-dimension);
+  height: var(--sbb-header-action-icon-dimension);
+  border-radius: var(--sbb-border-radius-infinity);
+}`;
+//#endregion
+//#region src/elements/header/common/header-action-common.ts
+var SbbHeaderActionCommonElementMixin = (superClass) => {
+	return (() => {
+		let _classSuper = SbbIconNameMixin(superClass);
+		let _expandFrom_decorators;
+		let _expandFrom_initializers = [];
+		let _expandFrom_extraInitializers = [];
+		return class SbbHeaderActionCommonElement extends _classSuper {
+			static {
+				const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+				_expandFrom_decorators = [property({
+					attribute: "expand-from",
+					reflect: true
+				})];
+				__esDecorate(this, null, _expandFrom_decorators, {
+					kind: "accessor",
+					name: "expandFrom",
+					static: false,
+					private: false,
+					access: {
+						has: (obj) => "expandFrom" in obj,
+						get: (obj) => obj.expandFrom,
+						set: (obj, value) => {
+							obj.expandFrom = value;
+						}
+					},
+					metadata: _metadata
+				}, _expandFrom_initializers, _expandFrom_extraInitializers);
+				if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+					enumerable: true,
+					configurable: true,
+					writable: true,
+					value: _metadata
+				});
+			}
+			static {
+				this.styles = [boxSizingStyles, header_action_default];
+			}
+			#expandFrom_accessor_storage = __runInitializers(this, _expandFrom_initializers, "large");
+			/**
+			* Used to set the minimum breakpoint from which the text is displayed.
+			* E.g. if set to 'large', the text will be visible for breakpoints large and ultra,
+			* and hidden for all the others. Ignored if no icon is set.
+			*/
+			get expandFrom() {
+				return this.#expandFrom_accessor_storage;
+			}
+			set expandFrom(value) {
+				this.#expandFrom_accessor_storage = value;
+			}
+			renderTemplate() {
+				return html$1`
+        <span class="sbb-header-action__wrapper">
+          <span class="sbb-header-action__icon"> ${super.renderIconSlot()} </span>
+          <span class="sbb-header-action__text">
+            <slot></slot>
+          </span>
+        </span>
+      `;
+			}
+			constructor() {
+				super(...arguments);
+				__runInitializers(this, _expandFrom_extraInitializers);
+			}
+		};
+	})();
+};
+//#endregion
+export { SbbHeaderActionCommonElementMixin as t };
+
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZGVyLWFjdGlvbi1jb21tb24tRGZmOEswUkIuanMiLCJuYW1lcyI6W10sInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2VsZW1lbnRzL2hlYWRlci9jb21tb24vaGVhZGVyLWFjdGlvbi5zY3NzP2xpdCZpbmxpbmUiLCIuLi8uLi8uLi9zcmMvZWxlbWVudHMvaGVhZGVyL2NvbW1vbi9oZWFkZXItYWN0aW9uLWNvbW1vbi50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJAdXNlICcuLi8uLi9jb3JlL3N0eWxlcycgYXMgc2JiO1xuXG5AbWl4aW4gaWNvbi1vbmx5IHtcbiAgLy8gVGhlIHZhcmlhYmxlIGlzIGFzc2lnbmVkIHRvIHRoZSBwcm9wZXJ0eSBpbiB0aGUgc2JiLWhlYWRlciBjb21wb25lbnQgaWYgaXQgaXNcbiAgLy8gdGhlIGZpcnN0IGVsZW1lbnQgaW4gdGhlIGhlYWRlciBhbmQgbmVlZHMgbGVmdCBvZmZzZXQgY29ycmVjdGlvbiAoc2VlIHNiYi1oZWFkZXIuc2NzcykuXG4gIC8vIFRvIGF2b2lkIGR1cGxpY2F0ZWQgQ1NTIGRlZmluaXRpb25zLCB0aGUgdmFsdWUgaXRzZWxmIGlzIGFzc2lnbmVkIGhlcmUgaW5cbiAgLy8gc2JiLWhlYWRlci1idXR0b24vc2JiLWhlYWRlci1saW5rIGluc3RlYWQgb2Ygc2JiLWhlYWRlci5cblxuICAvLyBNb3ZlIGl0IGxlZnQgYnkgcGFkZGluZyBvZiBoZWFkZXIgYWN0aW9uIHRvIHRoZSBpY29uIGl0c2VsZi5cbiAgLS1fc2JiLWhlYWRlci1maXJzdC1pdGVtLXBhZGRpbmctc2hpZnQ6IGNhbGMoXG4gICAgLTAuNSAqICh2YXIoLS1zYmItaGVhZGVyLWFjdGlvbi1taW4td2lkdGgpIC0gdmFyKC0tc2JiLWhlYWRlci1hY3Rpb24taWNvbi1kaW1lbnNpb24pKVxuICApO1xuICAtLXNiYi1oZWFkZXItYWN0aW9uLXBhZGRpbmctaW5saW5lLXplcm86IDA7XG4gIC0tc2JiLWhlYWRlci1hY3Rpb24tYWN0aXZlLWJvcmRlci1tYXJnaW4taW5saW5lOiBjYWxjKFxuICAgIDAuNSAqICgxMDAlIC0gdmFyKC0tc2JiLXNpemUtaWNvbi11aS1zbWFsbCkpXG4gICk7XG5cbiAgLnNiYi1oZWFkZXItYWN0aW9uX190ZXh0IHtcbiAgICBAaW5jbHVkZSBzYmIuc2NyZWVuLXJlYWRlci1vbmx5O1xuXG4gICAgLy8gVGhpcyBpcyBhIHdvcmthcm91bmQgdG8gZml4IHN0eWxpbmcgYWZ0ZXIgb3JpZW50YXRpb24gY2hhbmdlIG9uIGlPUy5cbiAgICAvLyBJZiB0aGUgZGlzcGxheSB2YWx1ZSBjaGFuZ2VzIGNvbXBhcmluZyB0byB0aGUgYmFzZSBzdGF0ZSAoZGlzcGxheTogZmxleCksXG4gICAgLy8gaXQgcmUtcmVuZGVycyBhbmQgZGlzcGxheXMgZXZlcnl0aGluZyBjb3JyZWN0bHkuXG4gICAgLy8gV2l0aG91dCB0aGlzIHdvcmthcm91bmQsIGVsZW1lbnRzIGFyZSBvdmVybGFwcGluZyBlYWNoIG90aGVyLlxuICAgIGRpc3BsYXk6IGZsZXg7XG4gIH1cbn1cblxuOmhvc3Qge1xuICAtLXNiYi1oZWFkZXItYWN0aW9uLWFjdGl2ZS1ib3JkZXItbWFyZ2luLWlubGluZTogdmFyKC0tc2JiLWhlYWRlci1hY3Rpb24tcGFkZGluZy1pbmxpbmUpO1xuICAtLXNiYi1oZWFkZXItYWN0aW9uLW1pbi13aWR0aDogdmFyKC0tc2JiLWhlYWRlci1hY3Rpb24tbWluLWhlaWdodCk7XG4gIC0tc2JiLWhlYWRlci1hY3Rpb24tdHJhbnNpdGlvbi1kdXJhdGlvbjogdmFyKFxuICAgIC0tc2JiLWRpc2FibGUtYW5pbWF0aW9uLWR1cmF0aW9uLFxuICAgIHZhcigtLXNiYi1hbmltYXRpb24tZHVyYXRpb24tMngpXG4gICk7XG5cbiAgLy8gSWYgZXhwYW5kZWQsIG1vdmUgaXQgbGVmdCBieSBsZWZ0IHBhZGRpbmcuXG4gIC8vIEFzIHJlc3VsdCwgdGhlIGljb24gc2hvdWxkIGJlIGFsaWduZWQgd2l0aCB0aGUgbGVmdCBzaWRlIG9mIHRoZSBwYWdlIHdyYXBwZXIuXG4gIC0tX3NiYi1oZWFkZXItZmlyc3QtaXRlbS1wYWRkaW5nLXNoaWZ0OiBjYWxjKC0xICogdmFyKC0tc2JiLWhlYWRlci1hY3Rpb24tcGFkZGluZy1pbmxpbmUpKTtcbiAgLS1zYmItaGVhZGVyLWZpcnN0LWl0ZW0tbWFyZ2luLWlubGluZS1zdGFydDogY2FsYyhcbiAgICB2YXIoLS1fc2JiLWhlYWRlci1maXJzdC1pdGVtLXBhZGRpbmctc2hpZnQpIC0gdmFyKC0tc2JiLWhlYWRlci1maXJzdC1pdGVtLWljb24tc2hpZnQpXG4gICk7XG5cbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXG4gIC8vIFVzZSAhaW1wb3J0YW50IGhlcmUgdG8gbm90IGludGVyZmVyZSB3aXRoIEZpcmVmb3ggZm9jdXMgcmluZyBkZWZpbml0aW9uXG4gIC8vIHdoaWNoIGFwcGVhcnMgaW4gbm9ybWFsaXplIENTUyBvZiBzZXZlcmFsIGZyYW1ld29ya3MuXG4gIG91dGxpbmU6IG5vbmUgIWltcG9ydGFudDtcbn1cblxuQGluY2x1ZGUgc2JiLmhvdmVyLW1xKCRob3ZlcjogdHJ1ZSkge1xuICA6aG9zdCg6aG92ZXI6bm90KDphY3RpdmUsIDpzdGF0ZShhY3RpdmUpKSkge1xuICAgIC0tc2JiLWhlYWRlci1hY3Rpb24tYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2JiLWJhY2tncm91bmQtY29sb3ItMyk7XG4gICAgLS1zYmItaGVhZGVyLWFjdGlvbi10cmFuc2xhdGUteTogI3tzYmIucHgtdG8tcmVtLWJ1aWxkKC0xKX07XG4gICAgLS1zYmItaGVhZGVyLWFjdGlvbi1iYWNrZ3JvdW5kLWluc2V0OiBjYWxjKHZhcigtLXNiYi1ib3JkZXItd2lkdGgtMngpICogLTEpO1xuXG4gICAgQGluY2x1ZGUgc2JiLmlmLWZvcmNlZC1jb2xvcnMge1xuICAgICAgLS1zYmItaGVhZGVyLWFjdGlvbi1ib3JkZXItY29sb3I6IEhpZ2hsaWdodDtcbiAgICB9XG4gIH1cbn1cblxuOmhvc3QoOmlzKDphY3RpdmUsIDpzdGF0ZShhY3RpdmUpKSkge1xuICAtLXNiYi1oZWFkZXItYWN0aW9uLWJhY2tncm91bmQtY29sb3I6IHZhcigtLXNiYi1iYWNrZ3JvdW5kLWNvbG9yLTQpO1xuXG4gIEBpbmNsdWRlIHNiYi5pZi1mb3JjZWQtY29sb3JzIHtcbiAgICAtLXNiYi1oZWFkZXItYWN0aW9uLWJvcmRlci1jb2xvcjogSGlnaGxpZ2h0O1xuICB9XG59XG5cbjpob3N0KC5zYmItYWN0aXZlKSB7XG4gIC0tc2JiLWhlYWRlci1hY3Rpb24tYWN0aXZlLWJvcmRlci1zY2FsZTogMTtcblxuICBAaW5jbHVkZSBzYmIuaWYtZm9yY2VkLWNvbG9ycyB7XG4gICAgLS1zYmItaGVhZGVyLWFjdGlvbi1ib3JkZXItY29sb3I6IEhpZ2hsaWdodDtcbiAgfVxufVxuXG46aG9zdCg6c3RhdGUoYnV0dG9uKSkge1xuICBAaW5jbHVkZSBzYmIuaWYtZm9yY2VkLWNvbG9ycyB7XG4gICAgLS1zYmItaGVhZGVyLWFjdGlvbi1jb2xvcjogQnV0dG9uVGV4dDtcbiAgfVxufVxuXG4vLyBJZiB0aGVyZSBpcyBubyBpY29uIGFuZCB0aGUgYWN0aW9uIGlzIHRoZSBmaXJzdCBpbiB0aGUgaGVhZGVyLCB0aGUgbGVmdCBvZmZzZXRcbi8vIG11c3QgYmUgY2hhbmdlZCAob3RoZXIgdmFsdWUgdGhhbiBmb3IgdGhlIGljb24gb25seSB2YXJpYW50KSB0byBhbGlnbiB0aGUgdGV4dCB3aXRoIHRoZSBjb250YWluZXIuXG4vLyBUaGUgdmFsdWUgY29ycmVzcG9uZHMgdG8gdGhlIHBhZGRpbmcgb2YgdGhlIGhlYWRlciBhY3Rpb24gaXRzZWxmLlxuOmhvc3QoOm5vdCg6c3RhdGUoc2xvdHRlZC1pY29uKSwgOnN0YXRlKGhhcy1pY29uLW5hbWUpKSkge1xuICAtLXNiYi1oZWFkZXItZmlyc3QtaXRlbS1tYXJnaW4taW5saW5lLXN0YXJ0OiB2YXIoLS1fc2JiLWhlYWRlci1maXJzdC1pdGVtLXBhZGRpbmctc2hpZnQpO1xufVxuXG4uc2JiLWFjdGlvbi1iYXNlIHtcbiAgQGluY2x1ZGUgc2JiLnRleHQtaW5oZXJpdDtcblxuICBkaXNwbGF5OiBmbGV4O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBjb2xvcjogdmFyKC0tc2JiLWhlYWRlci1hY3Rpb24tY29sb3IpO1xuICB0ZXh0LWRlY29yYXRpb246IG5vbmU7XG4gIG1pbi1oZWlnaHQ6IHZhcigtLXNiYi1oZWFkZXItYWN0aW9uLW1pbi1oZWlnaHQpO1xuICBtaW4td2lkdGg6IHZhcigtLXNiYi1oZWFkZXItYWN0aW9uLW1pbi13aWR0aCk7XG4gIHBhZGRpbmctaW5saW5lOiB2YXIoXG4gICAgLS1zYmItaGVhZGVyLWFjdGlvbi1wYWRkaW5nLWlubGluZS16ZXJvLFxuICAgIHZhcigtLXNiYi1oZWFkZXItYWN0aW9uLXBhZGRpbmctaW5saW5lKVxuICApO1xuICBjdXJzb3I6IHZhcigtLXNiYi1jdXJzb3ItcG9pbnRlcik7XG4gIHVzZXItc2VsZWN0OiBub25lO1xuICBvdXRsaW5lOiBub25lO1xuXG4gICY6OmJlZm9yZSB7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIGNvbnRlbnQ6ICcnO1xuICAgIGluc2V0OiB2YXIoLS1zYmItaGVhZGVyLWFjdGlvbi1iYWNrZ3JvdW5kLWluc2V0LCAwKTtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1zYmItYm9yZGVyLXJhZGl1cy1pbmZpbml0eSk7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2JiLWhlYWRlci1hY3Rpb24tYmFja2dyb3VuZC1jb2xvcik7XG4gICAgdHJhbnNpdGlvbi1kdXJhdGlvbjogdmFyKC0tc2JiLWhlYWRlci1hY3Rpb24tdHJhbnNpdGlvbi1kdXJhdGlvbik7XG4gICAgdHJhbnNpdGlvbi10aW1pbmctZnVuY3Rpb246IHZhcigtLXNiYi1oZWFkZXItYWN0aW9uLXRyYW5zaXRpb24tZWFzaW5nKTtcbiAgICB0cmFuc2l0aW9uLXByb3BlcnR5OiBpbnNldCwgYmFja2dyb3VuZC1jb2xvcjtcbiAgICBib3JkZXI6IHZhcigtLXNiYi1ib3JkZXItd2lkdGgtMXgpIHNvbGlkIHZhcigtLXNiYi1oZWFkZXItYWN0aW9uLWJvcmRlci1jb2xvcik7XG5cbiAgICBAaW5jbHVkZSBzYmIuaWYtZm9yY2VkLWNvbG9ycyB7XG4gICAgICBib3JkZXItd2lkdGg6IHZhcigtLXNiYi1ib3JkZXItd2lkdGgtMngpO1xuICAgIH1cbiAgfVxuXG4gIC8vIEhhbmRsZSBmb2N1cyBvbiB0aGUgaG9zdCAoYnV0dG9uIHZhcmlhbnQpXG4gIDpob3N0KDpmb2N1cy12aXNpYmxlKSAmLFxuICAvLyBIYW5kbGUgZm9jdXMgb24gdGhlIGFjdGlvbiAobGluayB2YXJpYW50KVxuICAmOmZvY3VzLXZpc2libGUge1xuICAgICY6OmJlZm9yZSB7XG4gICAgICBAaW5jbHVkZSBzYmIuZm9jdXMtb3V0bGluZTtcbiAgICB9XG4gIH1cblxuICAvLyBBY3RpdmUgc3RhdGUgYm9yZGVyXG4gICY6OmFmdGVyIHtcbiAgICBjb250ZW50OiAnJztcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgYm9yZGVyLWJsb2NrLWVuZDogdmFyKC0tc2JiLWhlYWRlci1hY3Rpb24tYWN0aXZlLWJvcmRlci13aWR0aCkgc29saWRcbiAgICAgIHZhcigtLXNiYi1oZWFkZXItYWN0aW9uLWFjdGl2ZS1ib3JkZXItY29sb3IpO1xuICAgIGluc2V0OiBhdXRvIDAgY2FsYygtMSAqIHZhcigtLXNiYi1oZWFkZXItYWN0aW9uLWFjdGl2ZS1ib3JkZXItd2lkdGgpKTtcbiAgICBtYXJnaW4taW5saW5lOiB2YXIoLS1zYmItaGVhZGVyLWFjdGlvbi1hY3RpdmUtYm9yZGVyLW1hcmdpbi1pbmxpbmUpO1xuICAgIHNjYWxlOiB2YXIoLS1zYmItaGVhZGVyLWFjdGlvbi1hY3RpdmUtYm9yZGVyLXNjYWxlLCAwKTtcbiAgICB0cmFuc2l0aW9uOiBzY2FsZSB2YXIoLS1zYmItaGVhZGVyLWFjdGlvbi10cmFuc2l0aW9uLWVhc2luZylcbiAgICAgIHZhcigtLXNiYi1oZWFkZXItYWN0aW9uLXRyYW5zaXRpb24tZHVyYXRpb24pO1xuICB9XG59XG5cbi5zYmItaGVhZGVyLWFjdGlvbl9fd3JhcHBlciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGdhcDogdmFyKC0tc2JiLWhlYWRlci1hY3Rpb24tZ2FwKTtcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKHZhcigtLXNiYi1oZWFkZXItYWN0aW9uLXRyYW5zbGF0ZS15LCAwKSk7XG4gIHRyYW5zaXRpb246IHRyYW5zZm9ybSB2YXIoLS1zYmItaGVhZGVyLWFjdGlvbi10cmFuc2l0aW9uLWR1cmF0aW9uKVxuICAgIHZhcigtLXNiYi1oZWFkZXItYWN0aW9uLXRyYW5zaXRpb24tZWFzaW5nKTtcbiAgd2lsbC1jaGFuZ2U6IHRyYW5zZm9ybTtcbiAgbWF4LXdpZHRoOiAxMDAlO1xufVxuXG4uc2JiLWhlYWRlci1hY3Rpb25fX2ljb24ge1xuICAvLyBTZXQgc3Ryb2tlIG9uIGhlYWRlciBpY29uc1xuICAtLXNiYi1pY29uLXN2Zy1zdHJva2UtY29sb3I6IGN1cnJlbnRjb2xvcjtcbiAgLS1zYmItaWNvbi1zdmctc3Ryb2tlLXdpZHRoOiAxcHg7XG5cbiAgbWluLXdpZHRoOiB2YXIoLS1zYmItaGVhZGVyLWFjdGlvbi1pY29uLWRpbWVuc2lvbik7XG4gIG1pbi1oZWlnaHQ6IHZhcigtLXNiYi1oZWFkZXItYWN0aW9uLWljb24tZGltZW5zaW9uKTtcbiAgbGluZS1oZWlnaHQ6IDA7XG5cbiAgOmhvc3QoOm5vdCg6c3RhdGUoc2xvdHRlZC1pY29uKSwgOnN0YXRlKGhhcy1pY29uLW5hbWUpKSkgJiB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxufVxuXG4uc2JiLWhlYWRlci1hY3Rpb25fX3RleHQge1xuICBAaW5jbHVkZSBzYmIudGV4dC14cy0tYm9sZDtcbiAgQGluY2x1ZGUgc2JiLmVsbGlwc2lzO1xuXG4gIGRpc3BsYXk6IGJsb2NrO1xuXG4gIDpob3N0KDpub3QoOnN0YXRlKHNsb3R0ZWQpKSkgJiB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxufVxuXG4vLyBJZiB0aGVyZSBpcyBubyBzbG90dGVkIHRleHQsIHJlZ2FyZGxlc3Mgb2YgZXhwYW5kZWQtZnJvbSBzdGF0ZSwgdGhlIGljb24gb25seSB2YXJpYW50IHNob3VsZCBiZSBzZXQuXG46aG9zdCg6aXMoOnN0YXRlKHNsb3R0ZWQtaWNvbiksIDpzdGF0ZShoYXMtaWNvbi1uYW1lKSk6bm90KDpzdGF0ZShzbG90dGVkKSkpIHtcbiAgQGluY2x1ZGUgaWNvbi1vbmx5O1xufVxuXG4vLyBUT0RPOiByZWV2YWx1YXRlIHRoaXMgb25jZSAnQ1NTIGNvbnRhaW5lciBxdWVyaWVzJyBpcyBzdXBwb3J0ZWRcbi8vIGh0dHBzOi8vY2FuaXVzZS5jb20vY3NzLWNvbnRhaW5lci1xdWVyaWVzLXN0eWxlXG5AZWFjaCAkYnJlYWtwb2ludCwgJHZhbHVlIGluIHNiYi4kbXEtYnJlYWtwb2ludHMge1xuICAvLyBXZSBza2lwIHplcm8gYnJlYWtwb2ludCBhcyBpdCB3b3VsZCByZXNvbHZlIGludG8gKHRvOiAwKS5cbiAgLy8gVGhlIHJ1bGVzIGFyZSBzZXQgdG8gZm9yY2UgdGhlIGljb24gb25seSB2YXJpYW50IGlmIHRoZXJlIGlzIHNsb3R0ZWQgdGV4dCwgYnV0IG5vdCB5ZXQgZXhwYW5kZWQuXG4gIEBpZiAkYnJlYWtwb2ludCAhPSAnemVybycge1xuICAgIDpob3N0KFxuICAgICAgW2V4cGFuZC1mcm9tPScjeyRicmVha3BvaW50fSddOmlzKDpzdGF0ZShzbG90dGVkLWljb24pLCA6c3RhdGUoaGFzLWljb24tbmFtZSkpOnN0YXRlKHNsb3R0ZWQpXG4gICAgKSB7XG4gICAgICBAaW5jbHVkZSBzYmIubXEoJHRvOiAjeyRicmVha3BvaW50fSkge1xuICAgICAgICBAaW5jbHVkZSBpY29uLW9ubHk7XG4gICAgICB9XG4gICAgfVxuICB9XG59XG5cbjo6c2xvdHRlZChbc2xvdD0naWNvbiddOmlzKHNiYi1pbWFnZSwgaW1nKSkge1xuICB3aWR0aDogdmFyKC0tc2JiLWhlYWRlci1hY3Rpb24taWNvbi1kaW1lbnNpb24pO1xuICBoZWlnaHQ6IHZhcigtLXNiYi1oZWFkZXItYWN0aW9uLWljb24tZGltZW5zaW9uKTtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tc2JiLWJvcmRlci1yYWRpdXMtaW5maW5pdHkpO1xufVxuIiwiaW1wb3J0IHR5cGUgeyBDU1NSZXN1bHRHcm91cCwgVGVtcGxhdGVSZXN1bHQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgcHJvcGVydHkgfSBmcm9tICdsaXQvZGVjb3JhdG9ycy5qcyc7XG5pbXBvcnQgeyBodG1sIH0gZnJvbSAnbGl0L3N0YXRpYy1odG1sLmpzJztcblxuaW1wb3J0IHR5cGUgeyBTYmJBY3Rpb25CYXNlRWxlbWVudCB9IGZyb20gJy4uLy4uL2NvcmUvYmFzZS1lbGVtZW50cy50cyc7XG5pbXBvcnQgdHlwZSB7IFNiYkhvcml6b250YWxGcm9tIH0gZnJvbSAnLi4vLi4vY29yZS9pbnRlcmZhY2VzLnRzJztcbmltcG9ydCB0eXBlIHsgQWJzdHJhY3RDb25zdHJ1Y3RvciB9IGZyb20gJy4uLy4uL2NvcmUvbWl4aW5zLnRzJztcbmltcG9ydCB7IGJveFNpemluZ1N0eWxlcyB9IGZyb20gJy4uLy4uL2NvcmUvc3R5bGVzLnRzJztcbmltcG9ydCB7IFNiYkljb25OYW1lTWl4aW4gfSBmcm9tICcuLi8uLi9pY29uLnRzJztcblxuaW1wb3J0IHN0eWxlIGZyb20gJy4vaGVhZGVyLWFjdGlvbi5zY3NzP2xpdCZpbmxpbmUnO1xuXG5leHBvcnQgZGVjbGFyZSBjbGFzcyBTYmJIZWFkZXJBY3Rpb25Db21tb25FbGVtZW50TWl4aW5UeXBlIGV4dGVuZHMgU2JiSWNvbk5hbWVNaXhpbihcbiAgU2JiQWN0aW9uQmFzZUVsZW1lbnQsXG4pIHtcbiAgcHVibGljIGFjY2Vzc29yIGV4cGFuZEZyb206IFNiYkhvcml6b250YWxGcm9tO1xufVxuXG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25hbWluZy1jb252ZW50aW9uXG5leHBvcnQgY29uc3QgU2JiSGVhZGVyQWN0aW9uQ29tbW9uRWxlbWVudE1peGluID0gPFxuICBUIGV4dGVuZHMgQWJzdHJhY3RDb25zdHJ1Y3RvcjxTYmJBY3Rpb25CYXNlRWxlbWVudD4sXG4+KFxuICBzdXBlckNsYXNzOiBULFxuKTogQWJzdHJhY3RDb25zdHJ1Y3RvcjxTYmJIZWFkZXJBY3Rpb25Db21tb25FbGVtZW50TWl4aW5UeXBlPiAmIFQgPT4ge1xuICBhYnN0cmFjdCBjbGFzcyBTYmJIZWFkZXJBY3Rpb25Db21tb25FbGVtZW50XG4gICAgZXh0ZW5kcyBTYmJJY29uTmFtZU1peGluKHN1cGVyQ2xhc3MpXG4gICAgaW1wbGVtZW50cyBQYXJ0aWFsPFNiYkhlYWRlckFjdGlvbkNvbW1vbkVsZW1lbnRNaXhpblR5cGU+XG4gIHtcbiAgICBwdWJsaWMgc3RhdGljIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBbYm94U2l6aW5nU3R5bGVzLCBzdHlsZV07XG5cbiAgICAvKipcbiAgICAgKiBVc2VkIHRvIHNldCB0aGUgbWluaW11bSBicmVha3BvaW50IGZyb20gd2hpY2ggdGhlIHRleHQgaXMgZGlzcGxheWVkLlxuICAgICAqIEUuZy4gaWYgc2V0IHRvICdsYXJnZScsIHRoZSB0ZXh0IHdpbGwgYmUgdmlzaWJsZSBmb3IgYnJlYWtwb2ludHMgbGFyZ2UgYW5kIHVsdHJhLFxuICAgICAqIGFuZCBoaWRkZW4gZm9yIGFsbCB0aGUgb3RoZXJzLiBJZ25vcmVkIGlmIG5vIGljb24gaXMgc2V0LlxuICAgICAqL1xuICAgIEBwcm9wZXJ0eSh7IGF0dHJpYnV0ZTogJ2V4cGFuZC1mcm9tJywgcmVmbGVjdDogdHJ1ZSB9KVxuICAgIHB1YmxpYyBhY2Nlc3NvciBleHBhbmRGcm9tOiBTYmJIb3Jpem9udGFsRnJvbSA9ICdsYXJnZSc7XG5cbiAgICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyVGVtcGxhdGUoKTogVGVtcGxhdGVSZXN1bHQge1xuICAgICAgcmV0dXJuIGh0bWxgXG4gICAgICAgIDxzcGFuIGNsYXNzPVwic2JiLWhlYWRlci1hY3Rpb25fX3dyYXBwZXJcIj5cbiAgICAgICAgICA8c3BhbiBjbGFzcz1cInNiYi1oZWFkZXItYWN0aW9uX19pY29uXCI+ICR7c3VwZXIucmVuZGVySWNvblNsb3QoKX0gPC9zcGFuPlxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwic2JiLWhlYWRlci1hY3Rpb25fX3RleHRcIj5cbiAgICAgICAgICAgIDxzbG90Pjwvc2xvdD5cbiAgICAgICAgICA8L3NwYW4+XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIGA7XG4gICAgfVxuICB9XG4gIHJldHVybiBTYmJIZWFkZXJBY3Rpb25Db21tb25FbGVtZW50IGFzIHVua25vd24gYXMgQWJzdHJhY3RDb25zdHJ1Y3RvcjxTYmJIZWFkZXJBY3Rpb25Db21tb25FbGVtZW50TWl4aW5UeXBlPiAmXG4gICAgVDtcbn07XG4iXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQ21CQSxJQUFhLHFDQUdYLGVBQ2tFO0FBMEJsRSxlQXpCMkM7b0JBQ2pDLGlCQUFpQixXQUFXOzs7O2VBRHZCLHFDQUNMLFlBQTRCOzs7OEJBVW5DLFNBQVM7S0FBRSxXQUFXO0tBQWUsU0FBUztLQUFNLENBQUMsQ0FBQTtBQUN0RCxpQkFBQSxNQUFBLE1BQUEsd0JBQUE7S0FBQSxNQUFBO0tBQUEsTUFBQTtLQUFBLFFBQUE7S0FBQSxTQUFBO0tBQUEsUUFBQTtNQUFBLE1BQUEsUUFBQSxnQkFBQTtNQUFBLE1BQUEsUUFBQSxJQUFnQjtNQUFVLE1BQUEsS0FBQSxVQUFBO0FBQUEsV0FBVixhQUFVOztNQUFBO0tBQUEsVUFBQTtLQUFBLEVBQUEsMEJBQUEsOEJBQUE7Ozs7Ozs7OztBQVJaLFNBQUEsU0FBeUIsQ0FBQyxpQkFBaUIsc0JBQU07O0dBUS9ELCtCQUFBLGtCQUFBLE1BQUEsMEJBQWdELFFBQU87Ozs7OztHQUF2RCxJQUFnQixhQUFVO0FBQUEsV0FBQSxNQUFBOztHQUExQixJQUFnQixXQUFVLE9BQUE7QUFBQSxVQUFBLDhCQUFBOztHQUVQLGlCQUFjO0FBQy9CLFdBQU8sTUFBSTs7bURBRWtDLE1BQU0sZ0JBQWdCLENBQUEifQ==

package/development/header-environment.component-DYnJkxCZ.js

@@ -0,0 +1,101 @@
+import { css, html } from "lit";
+import { SbbElement } from "./core/base-elements.js";
+import { boxSizingStyles } from "./core/styles.js";
+import { MutationController } from "@lit-labs/observers/mutation-controller.js";
+//#region src/elements/header/header-environment/header-environment.scss?lit&inline
+var header_environment_default = css`:host {
+  position: absolute;
+  inset-inline-end: 0;
+  inset-block-start: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--sbb-text-font-size-xxs);
+  font-weight: bold;
+  letter-spacing: var(--sbb-typo-letter-spacing-text);
+}
+
+:host(:dir(rtl)) {
+  --sbb-header-environment-rotate: -45deg;
+}
+
+:host(:is(:state(env-dev),[state--env-dev])) {
+  --sbb-header-environment-background-color: var(--sbb-color-orange);
+}
+
+:host(:is(:state(env-edu),[state--env-edu])) {
+  --sbb-header-environment-background-color: var(--sbb-color-green);
+}
+
+:host(:is(:state(env-int),[state--env-int])),
+:host(:is(:state(env-inte),[state--env-inte])) {
+  --sbb-header-environment-background-color: var(--sbb-color-granite);
+}
+
+:host(:is(:state(env-loc),[state--env-loc])) {
+  --sbb-header-environment-background-color: var(--sbb-color-pink);
+}
+
+:host(:is(:state(env-test),[state--env-test])) {
+  --sbb-header-environment-background-color: var(--sbb-color-sky);
+}
+
+:host::before {
+  content: "";
+  border-block-start: var(--sbb-header-environment-size) solid var(--sbb-header-environment-background-color);
+  border-inline-start: var(--sbb-header-environment-size) solid transparent;
+}
+
+.sbb-header-environment__text {
+  position: absolute;
+  color: var(--sbb-header-environment-color);
+  rotate: var(--sbb-header-environment-rotate);
+  padding-block-end: var(--sbb-spacing-fixed-4x);
+}`;
+//#endregion
+//#region src/elements/header/header-environment/header-environment.component.ts
+/**
+* It displays a ribbon inside the header to indicate the current environment.
+*
+* @slot - Use the unnamed slot to add the environment.
+*
+* @cssprop [--sbb-header-environment-background-color=var(sbb-color-granite)] - Can be used change the ribbon color.
+* @cssprop [--sbb-header-environment-color=var(sbb-color-white)] - Can be used change the text color.
+*/
+var SbbHeaderEnvironmentElement = class extends SbbElement {
+	static {
+		this.elementName = "sbb-header-environment";
+	}
+	static {
+		this.styles = [boxSizingStyles, header_environment_default];
+	}
+	constructor() {
+		super();
+		this._env = null;
+		this.addController(new MutationController(this, {
+			config: {
+				characterData: true,
+				subtree: true
+			},
+			callback: () => {
+				this._slottedTextChange();
+			}
+		}));
+	}
+	_slottedTextChange() {
+		if (this._env) this.internals.states.delete(`env-${this._env}`);
+		this._env = this.textContent?.trim() ?? "";
+		if (this._env) this.internals.states.add(`env-${this._env}`);
+	}
+	render() {
+		return html`
+      <span class="sbb-header-environment__text">
+        <slot></slot>
+      </span>
+    `;
+	}
+};
+//#endregion
+export { SbbHeaderEnvironmentElement as t };
+
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZGVyLWVudmlyb25tZW50LmNvbXBvbmVudC1EWW5Ka3hDWi5qcyIsIm5hbWVzIjpbXSwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvZWxlbWVudHMvaGVhZGVyL2hlYWRlci1lbnZpcm9ubWVudC9oZWFkZXItZW52aXJvbm1lbnQuc2Nzcz9saXQmaW5saW5lIiwiLi4vLi4vLi4vc3JjL2VsZW1lbnRzL2hlYWRlci9oZWFkZXItZW52aXJvbm1lbnQvaGVhZGVyLWVudmlyb25tZW50LmNvbXBvbmVudC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJAdXNlICcuLi8uLi9jb3JlL3N0eWxlcycgYXMgc2JiO1xuXG46aG9zdCB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgaW5zZXQtaW5saW5lLWVuZDogMDtcbiAgaW5zZXQtYmxvY2stc3RhcnQ6IDA7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBmb250LXNpemU6IHZhcigtLXNiYi10ZXh0LWZvbnQtc2l6ZS14eHMpO1xuICBmb250LXdlaWdodDogYm9sZDtcbiAgbGV0dGVyLXNwYWNpbmc6IHZhcigtLXNiYi10eXBvLWxldHRlci1zcGFjaW5nLXRleHQpO1xufVxuXG46aG9zdCg6ZGlyKHJ0bCkpIHtcbiAgLS1zYmItaGVhZGVyLWVudmlyb25tZW50LXJvdGF0ZTogLTQ1ZGVnO1xufVxuXG46aG9zdCg6c3RhdGUoZW52LWRldikpIHtcbiAgLS1zYmItaGVhZGVyLWVudmlyb25tZW50LWJhY2tncm91bmQtY29sb3I6IHZhcigtLXNiYi1jb2xvci1vcmFuZ2UpO1xufVxuXG46aG9zdCg6c3RhdGUoZW52LWVkdSkpIHtcbiAgLS1zYmItaGVhZGVyLWVudmlyb25tZW50LWJhY2tncm91bmQtY29sb3I6IHZhcigtLXNiYi1jb2xvci1ncmVlbik7XG59XG5cbjpob3N0KDpzdGF0ZShlbnYtaW50KSksXG46aG9zdCg6c3RhdGUoZW52LWludGUpKSB7XG4gIC0tc2JiLWhlYWRlci1lbnZpcm9ubWVudC1iYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zYmItY29sb3ItZ3Jhbml0ZSk7XG59XG5cbjpob3N0KDpzdGF0ZShlbnYtbG9jKSkge1xuICAtLXNiYi1oZWFkZXItZW52aXJvbm1lbnQtYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2JiLWNvbG9yLXBpbmspO1xufVxuXG46aG9zdCg6c3RhdGUoZW52LXRlc3QpKSB7XG4gIC0tc2JiLWhlYWRlci1lbnZpcm9ubWVudC1iYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zYmItY29sb3Itc2t5KTtcbn1cblxuLy8gUmliYm9uXG46aG9zdDo6YmVmb3JlIHtcbiAgY29udGVudDogJyc7XG4gIGJvcmRlci1ibG9jay1zdGFydDogdmFyKC0tc2JiLWhlYWRlci1lbnZpcm9ubWVudC1zaXplKSBzb2xpZFxuICAgIHZhcigtLXNiYi1oZWFkZXItZW52aXJvbm1lbnQtYmFja2dyb3VuZC1jb2xvcik7XG4gIGJvcmRlci1pbmxpbmUtc3RhcnQ6IHZhcigtLXNiYi1oZWFkZXItZW52aXJvbm1lbnQtc2l6ZSkgc29saWQgdHJhbnNwYXJlbnQ7XG59XG5cbi5zYmItaGVhZGVyLWVudmlyb25tZW50X190ZXh0IHtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBjb2xvcjogdmFyKC0tc2JiLWhlYWRlci1lbnZpcm9ubWVudC1jb2xvcik7XG4gIHJvdGF0ZTogdmFyKC0tc2JiLWhlYWRlci1lbnZpcm9ubWVudC1yb3RhdGUpO1xuICBwYWRkaW5nLWJsb2NrLWVuZDogdmFyKC0tc2JiLXNwYWNpbmctZml4ZWQtNHgpO1xufVxuIiwiaW1wb3J0IHsgTXV0YXRpb25Db250cm9sbGVyIH0gZnJvbSAnQGxpdC1sYWJzL29ic2VydmVycy9tdXRhdGlvbi1jb250cm9sbGVyLmpzJztcbmltcG9ydCB7IHR5cGUgQ1NTUmVzdWx0R3JvdXAsIGh0bWwsIHR5cGUgVGVtcGxhdGVSZXN1bHQgfSBmcm9tICdsaXQnO1xuXG5pbXBvcnQgeyBTYmJFbGVtZW50IH0gZnJvbSAnLi4vLi4vY29yZS9iYXNlLWVsZW1lbnRzLnRzJztcbmltcG9ydCB7IGJveFNpemluZ1N0eWxlcyB9IGZyb20gJy4uLy4uL2NvcmUvc3R5bGVzLnRzJztcblxuaW1wb3J0IHN0eWxlIGZyb20gJy4vaGVhZGVyLWVudmlyb25tZW50LnNjc3M/bGl0JmlubGluZSc7XG5cbi8qKlxuICogSXQgZGlzcGxheXMgYSByaWJib24gaW5zaWRlIHRoZSBoZWFkZXIgdG8gaW5kaWNhdGUgdGhlIGN1cnJlbnQgZW52aXJvbm1lbnQuXG4gKlxuICogQHNsb3QgLSBVc2UgdGhlIHVubmFtZWQgc2xvdCB0byBhZGQgdGhlIGVudmlyb25tZW50LlxuICpcbiAqIEBjc3Nwcm9wIFstLXNiYi1oZWFkZXItZW52aXJvbm1lbnQtYmFja2dyb3VuZC1jb2xvcj12YXIoc2JiLWNvbG9yLWdyYW5pdGUpXSAtIENhbiBiZSB1c2VkIGNoYW5nZSB0aGUgcmliYm9uIGNvbG9yLlxuICogQGNzc3Byb3AgWy0tc2JiLWhlYWRlci1lbnZpcm9ubWVudC1jb2xvcj12YXIoc2JiLWNvbG9yLXdoaXRlKV0gLSBDYW4gYmUgdXNlZCBjaGFuZ2UgdGhlIHRleHQgY29sb3IuXG4gKi9cbmV4cG9ydCBjbGFzcyBTYmJIZWFkZXJFbnZpcm9ubWVudEVsZW1lbnQgZXh0ZW5kcyBTYmJFbGVtZW50IHtcbiAgcHVibGljIHN0YXRpYyBvdmVycmlkZSByZWFkb25seSBlbGVtZW50TmFtZTogc3RyaW5nID0gJ3NiYi1oZWFkZXItZW52aXJvbm1lbnQnO1xuICBwdWJsaWMgc3RhdGljIG92ZXJyaWRlIHN0eWxlczogQ1NTUmVzdWx0R3JvdXAgPSBbYm94U2l6aW5nU3R5bGVzLCBzdHlsZV07XG5cbiAgcHJpdmF0ZSBfZW52OiBzdHJpbmcgfCBudWxsID0gbnVsbDtcblxuICBwdWJsaWMgY29uc3RydWN0b3IoKSB7XG4gICAgc3VwZXIoKTtcbiAgICB0aGlzLmFkZENvbnRyb2xsZXIoXG4gICAgICBuZXcgTXV0YXRpb25Db250cm9sbGVyKHRoaXMsIHtcbiAgICAgICAgY29uZmlnOiB7IGNoYXJhY3RlckRhdGE6IHRydWUsIHN1YnRyZWU6IHRydWUgfSxcbiAgICAgICAgY2FsbGJhY2s6ICgpID0+IHtcbiAgICAgICAgICB0aGlzLl9zbG90dGVkVGV4dENoYW5nZSgpO1xuICAgICAgICB9LFxuICAgICAgfSksXG4gICAgKTtcbiAgfVxuXG4gIHByaXZhdGUgX3Nsb3R0ZWRUZXh0Q2hhbmdlKCk6IHZvaWQge1xuICAgIGlmICh0aGlzLl9lbnYpIHtcbiAgICAgIHRoaXMuaW50ZXJuYWxzLnN0YXRlcy5kZWxldGUoYGVudi0ke3RoaXMuX2Vudn1gKTtcbiAgICB9XG4gICAgdGhpcy5fZW52ID0gdGhpcy50ZXh0Q29udGVudD8udHJpbSgpID8/ICcnO1xuICAgIGlmICh0aGlzLl9lbnYpIHtcbiAgICAgIHRoaXMuaW50ZXJuYWxzLnN0YXRlcy5hZGQoYGVudi0ke3RoaXMuX2Vudn1gKTtcbiAgICB9XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyKCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxzcGFuIGNsYXNzPVwic2JiLWhlYWRlci1lbnZpcm9ubWVudF9fdGV4dFwiPlxuICAgICAgICA8c2xvdD48L3Nsb3Q+XG4gICAgICA8L3NwYW4+XG4gICAgYDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLWhlYWRlci1lbnZpcm9ubWVudCc6IFNiYkhlYWRlckVudmlyb25tZW50RWxlbWVudDtcbiAgfVxufVxuIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FDZ0JBLElBQWEsOEJBQWIsY0FBaUQsV0FBVTs7QUFDekIsT0FBQSxjQUFzQjs7O0FBQy9CLE9BQUEsU0FBeUIsQ0FBQyxpQkFBaUIsMkJBQU07O0NBSXhFLGNBQUE7QUFDRSxTQUFPO0FBSEQsT0FBQSxPQUFzQjtBQUk1QixPQUFLLGNBQ0gsSUFBSSxtQkFBbUIsTUFBTTtHQUMzQixRQUFRO0lBQUUsZUFBZTtJQUFNLFNBQVM7SUFBTTtHQUM5QyxnQkFBZTtBQUNiLFNBQUssb0JBQW9COztHQUU1QixDQUFDLENBQ0g7O0NBR0sscUJBQWtCO0FBQ3hCLE1BQUksS0FBSyxLQUNQLE1BQUssVUFBVSxPQUFPLE9BQU8sT0FBTyxLQUFLLE9BQU87QUFFbEQsT0FBSyxPQUFPLEtBQUssYUFBYSxNQUFNLElBQUk7QUFDeEMsTUFBSSxLQUFLLEtBQ1AsTUFBSyxVQUFVLE9BQU8sSUFBSSxPQUFPLEtBQUssT0FBTzs7Q0FJOUIsU0FBTTtBQUN2QixTQUFPLElBQUkifQ==