@sbb-esta/lyne-elements 5.0.2 → 5.2.0

package/development/toggle.pure.js

@@ -1,3 +1,406 @@
-import { t as SbbToggleOptionElement } from "./toggle-option.component-CZY7xnrX.js";
-import { t as SbbToggleElement } from "./toggle.component-D3IbJqAH.js";
-export { SbbToggleElement, SbbToggleOptionElement };
+import { __esDecorate, __runInitializers } from "tslib";
+import { ResizeController } from "@lit-labs/observers/resize-controller.js";
+import { html, isServer, unsafeCSS } from "lit";
+import { property } from "lit/decorators.js";
+import { SbbDisabledMixin, SbbElement, SbbFormAssociatedMixin, forceType, interactivityChecker } from "./core.js";
+import { SbbIconNameMixin } from "./icon.pure.js";
+
+//#region src/elements/toggle/toggle-option/toggle-option.scss?inline
+var toggle_option_default = ":host {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: var(--sbb-toggle-option-gap);\n  height: var(--sbb-toggle-height);\n  padding-inline: var(--sbb-toggle-padding-inline);\n  color: var(--sbb-toggle-option-color);\n  cursor: var(--sbb-toggle-option-cursor, var(--sbb-cursor-pointer));\n  overflow: hidden;\n  font-size: var(--sbb-toggle-option-font-size);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n  font-weight: bold;\n  outline: none !important;\n}\n\n:host([checked]) {\n  --sbb-toggle-option-color: var(--sbb-color-2);\n}\n\n:host([disabled]) {\n  --sbb-toggle-option-cursor: unset;\n  --sbb-toggle-option-color: var(--sbb-color-anthracite);\n  --sbb-toggle-option-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud));\n}\n\n.sbb-toggle-option__label {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\nsbb-icon,\n::slotted(sbb-icon) {\n  min-width: var(--sbb-toggle-option-icon-min-size);\n  min-height: var(--sbb-toggle-option-icon-min-size);\n}\n";
+
+//#endregion
+//#region src/elements/toggle/toggle-option/toggle-option.component.ts
+/**
+* It displays a toggle option within a `sbb-toggle`.
+*
+* @slot - Use the unnamed slot to add content to the label of the toggle option.
+* @slot icon - Slot used to render the `sbb-icon`.
+* @event {InputEvent} input - The input event fires when the value has been changed as a direct result of a user action.
+* @overrideType value - (T = string) | null
+*/
+let SbbToggleOptionElement = (() => {
+	let _classSuper = SbbDisabledMixin(SbbIconNameMixin(SbbElement));
+	let _checked_decorators;
+	let _checked_initializers = [];
+	let _checked_extraInitializers = [];
+	let _value_decorators;
+	let _value_initializers = [];
+	let _value_extraInitializers = [];
+	return class SbbToggleOptionElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_checked_decorators = [forceType(), property({
+				reflect: true,
+				type: Boolean
+			})];
+			_value_decorators = [property()];
+			__esDecorate(this, null, _checked_decorators, {
+				kind: "accessor",
+				name: "checked",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "checked" in obj,
+					get: (obj) => obj.checked,
+					set: (obj, value) => {
+						obj.checked = value;
+					}
+				},
+				metadata: _metadata
+			}, _checked_initializers, _checked_extraInitializers);
+			__esDecorate(this, null, _value_decorators, {
+				kind: "accessor",
+				name: "value",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "value" in obj,
+					get: (obj) => obj.value,
+					set: (obj, value) => {
+						obj.value = value;
+					}
+				},
+				metadata: _metadata
+			}, _value_initializers, _value_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-toggle-option";
+		}
+		static {
+			this.role = "radio";
+		}
+		static {
+			this.styles = [unsafeCSS(toggle_option_default)];
+		}
+		#checked_accessor_storage;
+		/** Whether the toggle-option is checked. */
+		get checked() {
+			return this.#checked_accessor_storage;
+		}
+		set checked(value) {
+			this.#checked_accessor_storage = value;
+		}
+		#value_accessor_storage;
+		/** Value of toggle-option. */
+		get value() {
+			return this.#value_accessor_storage;
+		}
+		set value(value) {
+			this.#value_accessor_storage = value;
+		}
+		constructor() {
+			super();
+			this.#checked_accessor_storage = __runInitializers(this, _checked_initializers, false);
+			this.#value_accessor_storage = (__runInitializers(this, _checked_extraInitializers), __runInitializers(this, _value_initializers, null));
+			this._toggle = (__runInitializers(this, _value_extraInitializers), null);
+			this.addEventListener?.("input", () => this._handleInput());
+			this.addEventListener?.("click", () => {
+				if (!this.disabled && !this.checked) this.dispatchEvent(new InputEvent("input", {
+					bubbles: true,
+					composed: true
+				}));
+			});
+			this.addController(new ResizeController(this, {
+				skipInitial: true,
+				callback: () => this._toggle?.updatePillPosition?.(true)
+			}));
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			this._toggle = this.closest?.("sbb-toggle") ?? null;
+			this._verifyTabindex();
+			this._toggle?.updatePillPosition?.(true);
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback();
+			this._toggle = null;
+		}
+		firstUpdated(changedProperties) {
+			super.firstUpdated(changedProperties);
+			this._toggle?.updatePillPosition?.(true);
+		}
+		willUpdate(changedProperties) {
+			super.willUpdate(changedProperties);
+			if (changedProperties.has("checked")) {
+				this.internals.ariaChecked = `${this.checked}`;
+				this._verifyTabindex();
+				if (this.checked) this._uncheckOtherOptions();
+			}
+			if (changedProperties.has("disabled")) this._handleDisabledChange();
+		}
+		_uncheckOtherOptions() {
+			this._toggle?.options.filter((o) => o !== this).forEach((o) => o.checked = false);
+			this._toggle?.statusChanged();
+		}
+		_handleDisabledChange() {
+			this.internals.ariaDisabled = this.disabled ? "true" : null;
+			this._verifyTabindex();
+		}
+		_handleInput() {
+			if (this.disabled) return;
+			this.checked = true;
+			this._uncheckOtherOptions();
+		}
+		_verifyTabindex() {
+			this.tabIndex = this.checked && !this.disabled ? 0 : -1;
+		}
+		render() {
+			return html`
+      ${this.renderIconSlot()}
+      <span class="sbb-toggle-option__label">
+        <slot></slot>
+      </span>
+    `;
+		}
+	};
+})();
+
+//#endregion
+//#region src/elements/toggle/toggle/toggle.scss?inline
+var toggle_default = ":host {\n  --_sbb-toggle-min-width: calc(\n    var(--sbb-toggle-padding-inline) * 4 + var(--sbb-size-icon-ui-small)\n  );\n  --sbb-toggle-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-6x)\n  );\n  display: grid;\n  grid-template-columns: var(--sbb-toggle-grid-template-columns);\n  grid-template-areas: \"start end\";\n  align-items: center;\n  height: var(--sbb-toggle-height);\n  width: var(--sbb-toggle-width, fit-content);\n  min-width: var(--_sbb-toggle-min-width);\n  max-width: 100%;\n  border-radius: var(--sbb-toggle-border-radius);\n  font-size: var(--sbb-toggle-font-size);\n  letter-spacing: var(--sbb-typo-letter-spacing-text);\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  line-height: var(--sbb-typo-line-height-text);\n}\n:host::before {\n  content: \"\";\n  display: block;\n  grid-area: start/start/end/end;\n  margin-inline: var(--sbb-toggle-option-left, 0) var(--sbb-toggle-option-right, 0);\n  background-color: var(--sbb-toggle-selected-option-background-color);\n  border-radius: var(--sbb-toggle-border-radius);\n  max-width: 100%;\n  height: 100%;\n  border: var(--sbb-toggle-selected-option-border-width) var(--sbb-toggle-selected-option-border-style) var(--sbb-toggle-selected-option-border-color);\n  transition-duration: var(--sbb-toggle-animation-duration);\n  transition-timing-function: ease;\n  transition-property: margin-inline-start, margin-inline-end;\n}\n:host::after {\n  content: \"\";\n  grid-area: start/start/end/end;\n  order: -1;\n  background: var(--sbb-toggle-background-color);\n  margin-inline: var(--sbb-toggle-background-inset);\n  height: calc(100% - 2 * var(--sbb-toggle-background-inset));\n  border-radius: var(--sbb-toggle-border-radius);\n}\n@media (forced-colors: active) {\n  :host::after {\n    border: var(--sbb-border-width-1x) solid CanvasText;\n  }\n}\n\n:host([even]) {\n  --sbb-toggle-width: 100%;\n  --sbb-toggle-grid-template-columns: 50% 50%;\n}\n\n:host(:disabled) {\n  --sbb-toggle-selected-option-border-color: var(--sbb-color-graphite);\n  --sbb-toggle-selected-option-border-color: light-dark(\n    var(--sbb-color-graphite),\n    var(--sbb-color-smoke)\n  );\n  --sbb-toggle-selected-option-border-style: dashed;\n}\n@media (forced-colors: active) {\n  :host(:disabled) {\n    --sbb-toggle-selected-option-border-style: solid;\n    --sbb-toggle-selected-option-border-color: GrayText;\n  }\n}\n\n:host([size=s]) {\n  --sbb-toggle-padding-inline: var(--sbb-toggle-padding-inline-s);\n  --sbb-toggle-height: var(--sbb-toggle-height-s);\n}\n\n:host([size=m]) {\n  --sbb-toggle-padding-inline: var(--sbb-toggle-padding-inline-m);\n  --sbb-toggle-height: var(--sbb-toggle-height-m);\n}\n\n:host(:is(:not(:is(:state(initialized),[state--initialized])), :is(:state(disable-animation-on-resizing),[state--disable-animation-on-resizing]))) {\n  --sbb-disable-animation-duration: 0s;\n}\n\n::slotted(sbb-toggle-option:first-of-type) {\n  grid-area: start;\n}\n\n::slotted(sbb-toggle-option:last-of-type) {\n  grid-area: end;\n}\n";
+
+//#endregion
+//#region src/elements/toggle/toggle/toggle.component.ts
+/**
+* It can be used as a container for two `sbb-toggle-option`, acting as a toggle button.
+*
+* @slot - Use the unnamed slot to add `<sbb-toggle-option>` elements to the toggle.
+* @overrideType value - (T = string) | null
+*/
+let SbbToggleElement = (() => {
+	let _classSuper = SbbDisabledMixin(SbbFormAssociatedMixin(SbbElement));
+	let _instanceExtraInitializers = [];
+	let _even_decorators;
+	let _even_initializers = [];
+	let _even_extraInitializers = [];
+	let _size_decorators;
+	let _size_initializers = [];
+	let _size_extraInitializers = [];
+	let _set_value_decorators;
+	return class SbbToggleElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_even_decorators = [forceType(), property({
+				reflect: true,
+				type: Boolean
+			})];
+			_size_decorators = [property({ reflect: true })];
+			_set_value_decorators = [property()];
+			__esDecorate(this, null, _even_decorators, {
+				kind: "accessor",
+				name: "even",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "even" in obj,
+					get: (obj) => obj.even,
+					set: (obj, value) => {
+						obj.even = value;
+					}
+				},
+				metadata: _metadata
+			}, _even_initializers, _even_extraInitializers);
+			__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);
+			__esDecorate(this, 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);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-toggle";
+		}
+		static {
+			this.role = "radiogroup";
+		}
+		static {
+			this.styles = [unsafeCSS(toggle_default)];
+		}
+		static {
+			this.events = { change: "change" };
+		}
+		#even_accessor_storage;
+		/**
+		* If true, set the width of the component fixed; if false,
+		* the width is dynamic based on the label of the sbb-toggle-option.
+		*/
+		get even() {
+			return this.#even_accessor_storage;
+		}
+		set even(value) {
+			this.#even_accessor_storage = value;
+		}
+		#size_accessor_storage;
+		/**
+		* Size variant, either s (lean theme default) or m (standard theme default).
+		*/
+		get size() {
+			return this.#size_accessor_storage;
+		}
+		set size(value) {
+			this.#size_accessor_storage = value;
+		}
+		/**
+		* The value of the toggle. It needs to be mutable since it is updated whenever
+		* a new option is selected (see the `onToggleOptionSelect()` method).
+		*/
+		set value(value) {
+			if (isServer || !this.hasUpdated) this._fallbackValue = value;
+			else this._valueChanged(value);
+		}
+		get value() {
+			return isServer ? this._fallbackValue ?? null : this.options.find((o) => o.checked)?.value ?? this.options[0]?.value ?? null;
+		}
+		/** The child instances of sbb-toggle-option as an array. */
+		get options() {
+			return Array.from(this.querySelectorAll?.("sbb-toggle-option") ?? []);
+		}
+		constructor() {
+			super();
+			this.#even_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _even_initializers, false));
+			this.#size_accessor_storage = (__runInitializers(this, _even_extraInitializers), __runInitializers(this, _size_initializers, null));
+			this._fallbackValue = (__runInitializers(this, _size_extraInitializers), null);
+			this.addEventListener?.("input", () => this._handleInput(), { passive: true });
+			this.addEventListener?.("keydown", (e) => this._handleKeyDown(e));
+		}
+		willUpdate(changedProperties) {
+			super.willUpdate(changedProperties);
+			if (changedProperties.has("disabled") || changedProperties.has("formDisabled")) this._updateDisabled();
+			if (!this.hasUpdated) this._valueChanged(this._fallbackValue);
+		}
+		/**
+		* Called whenever the value changes, both programmatically or by user interaction.
+		* @internal
+		*/
+		statusChanged() {
+			this.updateFormValue();
+			this.updatePillPosition();
+		}
+		/**
+		* Reset to the init value if present. Select the first option, otherwise.
+		* @internal
+		*/
+		formResetCallback() {
+			this.value = this.hasAttribute("value") ? this.getAttribute("value") : null;
+		}
+		/**
+		* @internal
+		*/
+		formStateRestoreCallback(state, _reason) {
+			if (typeof state === "string" || state == null) this.value = state ?? null;
+			else if (state instanceof FormData) this._readFormData(state).then((data) => {
+				this.value = data;
+			});
+		}
+		async _readFormData(formData) {
+			const data = formData.get(this.name);
+			return data instanceof Blob ? JSON.parse(await data.text()) : data;
+		}
+		/** @internal */
+		updatePillPosition(resizing = false) {
+			const options = this.options;
+			if (options.length < 2 || options.every((o) => !o.checked) || options.every((o) => !o.clientWidth)) return;
+			this.toggleState("disable-animation-on-resizing", resizing);
+			const firstOption = options[0];
+			const isFirstChecked = firstOption.checked;
+			const pillLeft = isFirstChecked ? "0px" : `${firstOption.clientWidth}px`;
+			const pillRight = isFirstChecked ? `${this.clientWidth - firstOption.clientWidth}px` : "0px";
+			if (pillRight === "0px" && pillLeft === "0px") return;
+			this.style?.setProperty("--sbb-toggle-option-left", pillLeft);
+			this.style?.setProperty("--sbb-toggle-option-right", pillRight);
+			this.offsetWidth;
+			this.internals.states.add("initialized");
+		}
+		_updateToggle() {
+			this._valueChanged(this.value);
+			this._updateDisabled();
+		}
+		_valueChanged(value) {
+			const options = this.options;
+			const selectedOption = options.find((o) => value === o.value) ?? options.find((o) => o.checked) ?? options[0];
+			if (!selectedOption) {
+				if (!isServer) console.warn(`sbb-toggle: No available options! (${this.id || "No id"})`);
+				return;
+			}
+			selectedOption.checked = true;
+			this.statusChanged();
+		}
+		_updateDisabled() {
+			for (const toggleOption of this.options) toggleOption.disabled = this.disabled || this.formDisabled;
+		}
+		/**
+		* Called on user interaction (click or keyboard)
+		*/
+		_handleInput() {
+			this.statusChanged();
+			/**
+			* The change event is fired when the user modifies the element's value.
+			* Unlike the input event, the change event is not necessarily fired
+			* for each alteration to an element's value.
+			*/
+			this.dispatchEvent(new Event("change", { bubbles: true }));
+		}
+		_handleKeyDown(evt) {
+			if (!this.options.filter((t) => !t.disabled && interactivityChecker.isVisible(t)) || evt.target !== this && evt.target.parentElement !== this) return;
+			const options = this.options;
+			const isRtl = this.matches(":dir(rtl)");
+			const currentIndex = options.findIndex((option) => option.checked) ?? options[0];
+			const availableOptions = options.slice(currentIndex + 1).concat(options.slice(0, currentIndex)).filter((o) => !o.disabled && interactivityChecker.isVisible(o));
+			if (!isRtl ? evt.key === " " || evt.key === "ArrowRight" : evt.key === "ArrowLeft") {
+				this._selectAndFocusOption(availableOptions[0]);
+				evt.preventDefault();
+			} else if (isRtl ? evt.key === " " || evt.key === "ArrowRight" : evt.key === "ArrowLeft") {
+				this._selectAndFocusOption(availableOptions.at(-1));
+				evt.preventDefault();
+			}
+		}
+		_selectAndFocusOption(option) {
+			if (!option || option.disabled || option.checked) return;
+			option.checked = true;
+			option.focus();
+			option.dispatchEvent(new InputEvent("input", {
+				bubbles: true,
+				composed: true
+			}));
+		}
+		render() {
+			return html` <slot @slotchange=${this._updateToggle}></slot> `;
+		}
+	};
+})();
+
+//#endregion
+export { SbbToggleElement, SbbToggleOptionElement };

package/development/tooltip/tooltip.component.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup, PropertyDeclaration, PropertyValues, TemplateResult } from 'lit';
+import { type CSSResultGroup, type PropertyDeclaration, type PropertyValues, type TemplateResult } from 'lit';
 import { SbbOpenCloseBaseElement } from '../core.ts';
 /**
  * Defines the default position for the tooltip if this element is used as a trigger.
@@ -6,7 +6,7 @@ import { SbbOpenCloseBaseElement } from '../core.ts';
 export interface SbbTooltipDefaultPositions {
     readonly tooltipPositions: string[];
 }
-declare const SbbTooltipElement_base: import('../core.ts').AbstractConstructor<import('../core.ts').SbbDisabledMixinType> & typeof SbbOpenCloseBaseElement;
+declare const SbbTooltipElement_base: import("../core.ts").AbstractConstructor<import("../core.ts").SbbDisabledMixinType> & typeof SbbOpenCloseBaseElement;
 /**
  * It displays text content within a tooltip.
  *
@@ -94,4 +94,3 @@ declare global {
     }
 }
 export {};
-//# sourceMappingURL=tooltip.component.d.ts.map

package/development/tooltip.d.ts

@@ -1,2 +1 @@
 export * from './tooltip.pure.ts';
-//# sourceMappingURL=tooltip.d.ts.map

package/development/tooltip.js

@@ -1,9 +1,9 @@
-import { t as SbbTooltipElement } from "./tooltip.component-BE8BlKzE.js";
-import "./tooltip.pure.js";
+import { SbbTooltipElement } from "./tooltip.pure.js";
+
+export * from "./tooltip.pure.js"
+
 //#region src/elements/tooltip.ts
 /** @entrypoint */
 SbbTooltipElement.define();
-//#endregion
-export { SbbTooltipElement };
 
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5qcyIsIm5hbWVzIjpbXSwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvZWxlbWVudHMvdG9vbHRpcC50cyJdLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGVudHJ5cG9pbnQgKi9cbmltcG9ydCB7IFNiYlRvb2x0aXBFbGVtZW50IH0gZnJvbSAnLi90b29sdGlwLnB1cmUudHMnO1xuXG5leHBvcnQgKiBmcm9tICcuL3Rvb2x0aXAucHVyZS50cyc7XG5cblNiYlRvb2x0aXBFbGVtZW50LmRlZmluZSgpO1xuIl0sIm1hcHBpbmdzIjoiOzs7O0FBS0Esa0JBQWtCLE9BQU0ifQ==
+//#endregion

package/development/tooltip.pure.d.ts

@@ -1,3 +1,2 @@
 /** @entrypoint */
 export * from './tooltip/tooltip.component.ts';
-//# sourceMappingURL=tooltip.pure.d.ts.map