@sbb-esta/lyne-elements 5.0.2 → 5.2.0

package/development/table/table-wrapper/table-wrapper.component.d.ts

@@ -1,6 +1,6 @@
-import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
 import { SbbElement } from '../../core.ts';
-declare const SbbTableWrapperElement_base: import('../../core.ts').AbstractConstructor<import('../../core.ts').SbbNegativeMixinType> & typeof SbbElement;
+declare const SbbTableWrapperElement_base: import("../../core.ts").AbstractConstructor<import("../../core.ts").SbbNegativeMixinType> & typeof SbbElement;
 /**
  * Wraps a table to enhance its functionality.
  *
@@ -30,4 +30,3 @@ declare global {
     }
 }
 export {};
-//# sourceMappingURL=table-wrapper.component.d.ts.map

package/development/table.d.ts

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

package/development/table.js

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

package/development/table.pure.d.ts

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

package/development/table.pure.js

@@ -1,2 +1,120 @@
-import { t as SbbTableWrapperElement } from "./table-wrapper.component-Cqc9PHZl.js";
-export { SbbTableWrapperElement };
+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 { SbbElement, SbbNegativeMixin, forceType, hostScrollbarStyles } from "./core.js";
+
+//#region src/elements/table/table-wrapper/table-wrapper.scss?inline
+var table_wrapper_default = ":host {\n  display: block;\n  overflow: auto;\n  --sbb-scrollbar-thumb-width: 0.5rem;\n  --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);\n  --sbb-scrollbar-width-firefox: auto;\n  --sbb-scrollbar-track-color: var(--sbb-background-color-4);\n}\n\n:host(:focus-visible) {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n}\n\n::slotted(.sbb-table) {\n  width: 100%;\n}\n\n:host([negative]) {\n  --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);\n}\n";
+
+//#endregion
+//#region src/elements/table/table-wrapper/table-wrapper.component.ts
+/**
+* Wraps a table to enhance its functionality.
+*
+* @slot - Use the unnamed slot to add the table.
+*/
+let SbbTableWrapperElement = (() => {
+	let _classSuper = SbbNegativeMixin(SbbElement);
+	let _focusable_decorators;
+	let _focusable_initializers = [];
+	let _focusable_extraInitializers = [];
+	return class SbbTableWrapperElement extends _classSuper {
+		static {
+			const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+			_focusable_decorators = [forceType(), property({
+				reflect: true,
+				type: Boolean
+			})];
+			__esDecorate(this, null, _focusable_decorators, {
+				kind: "accessor",
+				name: "focusable",
+				static: false,
+				private: false,
+				access: {
+					has: (obj) => "focusable" in obj,
+					get: (obj) => obj.focusable,
+					set: (obj, value) => {
+						obj.focusable = value;
+					}
+				},
+				metadata: _metadata
+			}, _focusable_initializers, _focusable_extraInitializers);
+			if (_metadata) Object.defineProperty(this, Symbol.metadata, {
+				enumerable: true,
+				configurable: true,
+				writable: true,
+				value: _metadata
+			});
+		}
+		static {
+			this.elementName = "sbb-table-wrapper";
+		}
+		static {
+			this.role = "section";
+		}
+		static {
+			this.styles = [hostScrollbarStyles, unsafeCSS(table_wrapper_default)];
+		}
+		#focusable_accessor_storage = __runInitializers(this, _focusable_initializers, false);
+		/** Whether the table wrapper is focusable. */
+		get focusable() {
+			return this.#focusable_accessor_storage;
+		}
+		set focusable(value) {
+			this.#focusable_accessor_storage = value;
+		}
+		constructor() {
+			super();
+			__runInitializers(this, _focusable_extraInitializers);
+			this.addController(new ResizeController(this, {
+				skipInitial: true,
+				callback: () => this._checkHorizontalScrollbarOffset()
+			}));
+			this.addEventListener?.("scroll", () => this._checkHorizontalScrollbarOffset(), { passive: true });
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			this._updateScrollbarClass();
+		}
+		willUpdate(changedProperties) {
+			super.willUpdate(changedProperties);
+			if (changedProperties.has("focusable")) if (this.focusable) {
+				if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "0");
+			} else this.removeAttribute("tabindex");
+			if (changedProperties.has("negative")) this._updateScrollbarClass();
+		}
+		_updateScrollbarClass() {
+			if (isServer) return;
+			if (this.negative) {
+				this.classList.remove("sbb-scrollbar-thick-track-visible");
+				this.classList.add("sbb-scrollbar-thick-negative-track-visible");
+			} else {
+				this.classList.remove("sbb-scrollbar-thick-negative-track-visible");
+				this.classList.add("sbb-scrollbar-thick-track-visible");
+			}
+		}
+		/**
+		*  Calculates whether the table is horizontally scrolled and adds the
+		*  corresponding class `sbb-table-wrapper-offset-${none | left | right | both}`
+		*/
+		_checkHorizontalScrollbarOffset() {
+			const state = this._calculateScrollOffset();
+			this.classList.remove(`sbb-table-wrapper-offset-none`, `sbb-table-wrapper-offset-left`, `sbb-table-wrapper-offset-right`, `sbb-table-wrapper-offset-both`);
+			this.classList.add(`sbb-table-wrapper-offset-${state}`);
+		}
+		_calculateScrollOffset() {
+			if (this.scrollWidth === this.offsetWidth) return "none";
+			const isAtStart = this.scrollLeft === 0;
+			const isAtEnd = this.scrollWidth - this.scrollLeft - this.offsetWidth <= 1;
+			if (isAtStart) return isAtEnd ? "none" : "right";
+			return isAtEnd ? "left" : "both";
+		}
+		render() {
+			return html`<slot></slot>`;
+		}
+	};
+})();
+
+//#endregion
+export { SbbTableWrapperElement };

package/development/tabs/common/styles.d.ts

@@ -1,3 +1,2 @@
-export declare const tabGroupCommonStyles: import('lit').CSSResult;
-export declare const tabLabelCommonStyles: import('lit').CSSResult;
-//# sourceMappingURL=styles.d.ts.map
+export declare const tabGroupCommonStyles: import("lit").CSSResult;
+export declare const tabLabelCommonStyles: import("lit").CSSResult;

package/development/tabs/tab/tab.component.d.ts

@@ -1,7 +1,7 @@
-import { CSSResultGroup, TemplateResult } from 'lit';
+import { type CSSResultGroup, type TemplateResult } from 'lit';
 import { SbbElement } from '../../core.ts';
-import { SbbTabGroupElement } from '../tab-group/tab-group.component.ts';
-import { SbbTabLabelElement } from '../tab-label/tab-label.component.ts';
+import type { SbbTabGroupElement } from '../tab-group/tab-group.component.ts';
+import type { SbbTabLabelElement } from '../tab-label/tab-label.component.ts';
 /**
  * Combined with a `sbb-tab-group` and `sbb-tab-label`, it displays a tab's content.
  *
@@ -33,4 +33,3 @@ declare global {
         'sbb-tab': SbbTabElement;
     }
 }
-//# sourceMappingURL=tab.component.d.ts.map

package/development/tabs/tab-group/tab-group.component.d.ts

@@ -1,7 +1,7 @@
-import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
 import { SbbElement } from '../../core.ts';
-import { SbbTabElement } from '../tab/tab.component.ts';
-import { SbbTabLabelElement } from '../tab-label/tab-label.component.ts';
+import type { SbbTabElement } from '../tab/tab.component.ts';
+import type { SbbTabLabelElement } from '../tab-label/tab-label.component.ts';
 export declare class SbbTabChangeEvent extends Event {
     private readonly _activeIndex;
     private readonly _activeTabLabel;
@@ -86,4 +86,3 @@ declare global {
         'sbb-tab-group': SbbTabGroupElement;
     }
 }
-//# sourceMappingURL=tab-group.component.d.ts.map

package/development/tabs/tab-label/tab-label.component.d.ts

@@ -1,8 +1,8 @@
-import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
-import { SbbElement, SbbHeadingLevel } from '../../core.ts';
-import { SbbTabElement } from '../tab/tab.component.ts';
-import { SbbTabGroupElement } from '../tab-group/tab-group.component.ts';
-declare const SbbTabLabelElement_base: import('../../core.ts').AbstractConstructor<import('../../core.ts').SbbDisabledMixinType> & import('../../core.ts').AbstractConstructor<import('../../icon.pure.ts').SbbIconNameMixinType> & typeof SbbElement;
+import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
+import { SbbElement, type SbbHeadingLevel } from '../../core.ts';
+import type { SbbTabElement } from '../tab/tab.component.ts';
+import { type SbbTabGroupElement } from '../tab-group/tab-group.component.ts';
+declare const SbbTabLabelElement_base: import("../../core.ts").AbstractConstructor<import("../../core.ts").SbbDisabledMixinType> & import("../../core.ts").AbstractConstructor<import("../../icon.pure.ts").SbbIconNameMixinType> & typeof SbbElement;
 /**
  * Combined with a `sbb-tab-group`, it displays a tab's title.
  *
@@ -49,4 +49,3 @@ declare global {
     }
 }
 export {};
-//# sourceMappingURL=tab-label.component.d.ts.map

package/development/tabs/tab-nav-bar/tab-nav-bar.component.d.ts

@@ -1,6 +1,6 @@
-import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
 import { SbbElement } from '../../core.ts';
-declare const SbbTabNavBarElement_base: import('../../core.ts').AbstractConstructor<import('../../core.ts').SbbNamedSlotListMixinType<HTMLElement>> & typeof SbbElement;
+declare const SbbTabNavBarElement_base: import("../../core.ts").AbstractConstructor<import("../../core.ts").SbbNamedSlotListMixinType<HTMLElement>> & typeof SbbElement;
 /**
  * It displays one or more tab-label-like elements, each one is an anchor element.
  *
@@ -28,4 +28,3 @@ declare global {
     }
 }
 export {};
-//# sourceMappingURL=tab-nav-bar.component.d.ts.map

package/development/tabs.d.ts

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

package/development/tabs.js

@@ -1,16 +1,12 @@
-import { n as SbbTabGroupElement, t as SbbTabChangeEvent } from "./tab-group.component-DBg6I8W7.js";
-import { t as SbbTabLabelElement } from "./tab-label.component-BbQu5sA-.js";
-import { t as SbbTabNavBarElement } from "./tab-nav-bar.component-DC4Ba7w2.js";
-import { t as SbbTabElement } from "./tab.component-Bsdzs7P2.js";
-import { n as tabLabelCommonStyles, t as tabGroupCommonStyles } from "./styles-BTV2MyrZ.js";
-import "./tabs.pure.js";
+import { SbbTabElement, SbbTabGroupElement, SbbTabLabelElement, SbbTabNavBarElement } from "./tabs.pure.js";
+
+export * from "./tabs.pure.js"
+
 //#region src/elements/tabs.ts
 /** @entrypoint */
 SbbTabElement.define();
 SbbTabGroupElement.define();
 SbbTabLabelElement.define();
 SbbTabNavBarElement.define();
-//#endregion
-export { SbbTabChangeEvent, SbbTabElement, SbbTabGroupElement, SbbTabLabelElement, SbbTabNavBarElement, tabGroupCommonStyles, tabLabelCommonStyles };
 
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFicy5qcyIsIm5hbWVzIjpbXSwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvZWxlbWVudHMvdGFicy50cyJdLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGVudHJ5cG9pbnQgKi9cbmltcG9ydCB7XG4gIFNiYlRhYkVsZW1lbnQsXG4gIFNiYlRhYkdyb3VwRWxlbWVudCxcbiAgU2JiVGFiTGFiZWxFbGVtZW50LFxuICBTYmJUYWJOYXZCYXJFbGVtZW50LFxufSBmcm9tICcuL3RhYnMucHVyZS50cyc7XG5cbmV4cG9ydCAqIGZyb20gJy4vdGFicy5wdXJlLnRzJztcblxuU2JiVGFiRWxlbWVudC5kZWZpbmUoKTtcblNiYlRhYkdyb3VwRWxlbWVudC5kZWZpbmUoKTtcblNiYlRhYkxhYmVsRWxlbWVudC5kZWZpbmUoKTtcblNiYlRhYk5hdkJhckVsZW1lbnQuZGVmaW5lKCk7XG4iXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBVUEsY0FBYyxPQUFNO0FBQ3BCLG1CQUFtQixPQUFNO0FBQ3pCLG1CQUFtQixPQUFNO0FBQ3pCLG9CQUFvQixPQUFNIn0=
+//#endregion

package/development/tabs.pure.d.ts

@@ -4,4 +4,3 @@ export * from './tabs/tab-label/tab-label.component.ts';
 export * from './tabs/tab-nav-bar/tab-nav-bar.component.ts';
 export * from './tabs/tab/tab.component.ts';
 export * from './tabs/common/styles.ts';
-//# sourceMappingURL=tabs.pure.d.ts.map