@albi_scando/as-design-system-threejs-lib 1.1.5 → 1.1.7

package/dist/types/web-components/language-picker/component.d.ts

@@ -1,22 +1,33 @@
 import { Locales } from '@albi_scando/as-const-languages-lib';
-export declare const OBSERVED_ATTRIBUTES: {
-    LANGUAGES: string;
-    SELECTED: string;
-};
 export declare class LanguagePickerComponent extends HTMLElement {
+    /**
+     * @see TextureLoader
+     */
     private static readonly textureLoader;
+    /**
+     * @see ShadowRoot
+     */
     readonly shadowRoot: ShadowRoot;
+    /**
+     * Observed attributes for the component.
+     */
     static get observedAttributes(): string[];
+    private options;
+    private flags;
+    /**
+     * Single source of truth for which language is currently selected.
+     * Everything else (rotation, BarMenu) is derived from this.
+     */
+    private selected;
+    private selectedTmp;
     private _renderer;
     private _scene;
     private _camera;
     private _root;
     private _canvas;
-    private _controls;
     private _resizeObserver;
     private _clock;
     private _lastTime;
-    private _lights;
     private _spotlight;
     private _flagsGroup;
     private _wind;
@@ -33,40 +44,53 @@ export declare class LanguagePickerComponent extends HTMLElement {
     private _introCameraHoldDuration;
     private _isIntroCameraAnimating;
     private _isIntroCameraHolding;
-    private options;
-    private flags;
-    /**
-     * Single source of truth for which language is currently selected.
-     * Everything else (rotation, BarMenu) is derived from this.
-     */
-    private selected;
-    private selectedTmp;
     private _menuContainer;
     private _menuIntroStartScale;
     private _barMenu;
-    private _languageButtons;
     private _confirmationDialog;
     private _isInitialized;
     private _isInitializing;
     private _barMenuVisibleIndex;
+    private _floorGeometry;
+    private _floorMaterial;
     private _programmaticScrollTimer;
+    /**
+     * @constructor
+     */
     constructor();
+    /**
+     * Called when observed attributes change.
+     * @param name Name of the changed attribute.
+     * @param oldValue Previous value of the attribute, or null if it was not set.
+     * @param newValue New value of the attribute, or null if it was removed.
+     * @returns {void}
+     */
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /**
+     * Called when the component is added to the DOM.
+     */
     connectedCallback(): void;
+    /**
+     * Called when the component is removed from the DOM.
+     */
     disconnectedCallback(): void;
     /**
-     * Initialize the component with a set of languages.
-     * @param languages Set of locale keys representing the languages to display.
+     * Initialize the component with a set of options.
+     * @param options Set of keys representing the options to display.
      */
-    private _initializeComponent;
+    private init;
     /**
      * Cache references to important HTML elements.
      */
     private setupHtmlElements;
     /**
-     * Set up Three.js elemnents.
+     * Set up Three.js elements.
      */
     private setupScene;
+    /**
+     * Cache references to UI elements like the BarMenu and menu container, and set initial styles.
+     */
+    private setupUI;
     /**
      * Create flag meshes, position them in a circle, and set up their wind parameters.
      */
@@ -76,21 +100,13 @@ export declare class LanguagePickerComponent extends HTMLElement {
      */
     private resizeHandler;
     private listenToBarMenuNavigation;
-    /**
-     * Cache references to UI elements like the BarMenu and menu container, and set initial styles.
-     */
-    private setupUI;
     private _computeIntroCameraEndPosition;
     /**
-     * Programmatically select a language by its locale key.
-     * Rotates the flags ring and syncs the BarMenu to show the correct autonym.
-     * Safe to call before init — queued and applied once the component is ready.
+     * Public method to select a language. Updates the selected language and rotates the flags and BarMenu accordingly.
+     * @param language Locale key of the language to select.
+     * @returns {void}
      */
-    selectLanguage(language: Locales): void;
-    addLanguage(_language: string): void;
-    addLocales(_languages: string[]): void;
-    removeLanguage(_language: string): void;
-    removeLocales(_languages: string[]): void;
+    select(language: Locales): void;
     /**
      * Rotate the flags group so that the flag at `index` faces the camera.
      * @param id Locale key of the language to rotate to.
@@ -104,9 +120,18 @@ export declare class LanguagePickerComponent extends HTMLElement {
     private _syncBarMenuToId;
     private setupConfirmationDialog;
     private barMenuButtonClickHandler;
+    /**
+     * Handler for when the user confirms their language selection in the confirmation dialog.
+     * Dispatches a custom event with the new selected language.
+     * @returns {void}
+     */
     private _handleConfirmation;
     private _animate;
     private _updateGroupRotation;
     private _updateIntroCamera;
     private _setMenuIntroScale;
+    addLanguage(_language: string): void;
+    addLocales(_languages: string[]): void;
+    removeLanguage(_language: string): void;
+    removeLocales(_languages: string[]): void;
 }

package/dist/types/web-components/language-picker/main.d.ts

@@ -1,4 +1,4 @@
 export { LanguagePickerComponent } from './component';
-export { OBSERVED_ATTRIBUTES } from './component';
 export { selector } from './selector';
 export { COMPONENT_CUSTOM_MESSAGES } from './custom-messages.const';
+export { OBSERVED_ATTRIBUTES } from './observed-attributes.const';

package/dist/types/web-components/language-picker/observed-attributes.const.d.ts

@@ -0,0 +1,7 @@
+/**
+ * observed attributes for the language picker web component
+ */
+export declare const OBSERVED_ATTRIBUTES: {
+    OPTIONS: string;
+    SELECTED: string;
+};

package/dist/types/web-components/theme-picker/component.d.ts

@@ -1,34 +1,35 @@
-export interface ThemeCubeComponentOptions {
-    options: Set<string>;
-    selected?: string | undefined;
-}
-export declare class ThemeCubeComponent extends HTMLElement {
-    private static readonly FACE_VISUALS;
-    private static readonly CUBE_SIDE_LENGTH;
+import { Themes } from '@albi_scando/as-const-themes-lib';
+export declare class ThemePickerComponent extends HTMLElement {
     private static readonly textureLoader;
     readonly shadowRoot: ShadowRoot;
-    private static readonly themesAttribute;
-    private static readonly selectedAttribute;
+    static get observedAttributes(): string[];
+    private static readonly CUBE_SIDE_LENGTH;
+    private options;
+    /**
+     * Single source of truth for the selected theme.
+     * UI preview and confirmation derive from this value.
+     */
+    private selected;
+    private selectedTmp;
+    private _renderer;
+    private _scene;
+    private _camera;
     private _root;
     private _canvas;
-    private _hintTop;
+    private _resizeObserver;
+    private _clock;
+    private _lastTime;
+    private _cube;
+    private _cubeGeometry;
+    private _cubeMaterials;
+    private _animationFrameId;
+    private previewDialog;
     private _previewTitle;
     private _previewSub;
     private _applyBtn;
     private _confirmationDialog;
     private _isConfirmationDialogOpen;
-    private _renderer;
-    private _scene;
-    private _camera;
-    private _cube;
-    private _cubeGeometry;
-    private _cubeMaterials;
-    private readonly _clock;
-    private _animFrameId;
-    private _resizeObserver;
-    private _themes;
     private _themeTextures;
-    private _selected;
     private _currentFaceThemeId;
     private _isDragging;
     private _lastPointerX;
@@ -36,6 +37,7 @@ export declare class ThemeCubeComponent extends HTMLElement {
     private _dragPointerId;
     private _rotX;
     private _rotY;
+    private _rotZ;
     private _idleSeconds;
     private _autoSpinEnabled;
     private _autoVelX;
@@ -44,18 +46,50 @@ export declare class ThemeCubeComponent extends HTMLElement {
     private _isInitializing;
     private readonly _tmpCamDir;
     private readonly _tmpWorldNormal;
-    static get observedAttributes(): string[];
-    constructor(input?: ThemeCubeComponentOptions);
+    constructor();
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /**
+     * Called when the component is added to the DOM.
+     */
     connectedCallback(): void;
+    /**
+     * Called when the component is removed from the DOM.
+     */
     disconnectedCallback(): void;
-    private initializeComponent;
+    /**
+     * Initialize the component with a set of options.
+     * @param options Set of keys representing the options to display.
+     */
+    private init;
+    /**
+     * Cache references to important HTML elements.
+     */
     private setupHtmlElements;
-    private _sanitizeThemes;
-    private _setupDOM;
-    private _setupScene;
-    private _setupCube;
-    private _setupApplyButton;
+    /**
+     * Set up Three.js elements.
+     */
+    private setupScene;
+    /**
+     * Cache references to important UI elements and set up initial states.
+     */
+    private setupUI;
+    /**
+     * Set up the cube mesh with one face per theme option, applying textures or fallback visuals as needed.
+     */
+    private setupCube;
+    /**
+     * Set up a ResizeObserver to handle canvas resizing and update the camera aspect ratio.
+     */
+    private resizeHandler;
+    private setupApplyButton;
+    private setupConfirmationDialog;
+    /**
+     * Public method to select a theme. Updates the selected theme and rotates the cube accordingly.
+     * @param theme Theme key of the theme to select.
+     * @returns {void}
+     */
+    select(theme: Themes): void;
+    private _syncRotationToSelected;
     private _handleApplyClick;
     private _applyTheme;
     private _updatePreviewDialog;
@@ -67,16 +101,25 @@ export declare class ThemeCubeComponent extends HTMLElement {
     private _setMaterialTexture;
     private _createFallbackFaceTexture;
     private _getThemeIdForFace;
-    private _formatThemeName;
-    private _restoreThemePreview;
     private _stopAutoSpinFromInteraction;
     private _onPointerDown;
     private _onPointerMove;
     private _onPointerUp;
+    /**
+     * Bind event listeners. Separated from setupUI for clarity and
+     * to ensure all HTML elements are available before binding.
+     */
     private _bindEvents;
+    /**
+     * Unbind all event listeners to prevent memory leaks and
+     * unintended behavior when the component is removed from the DOM.
+     */
     private _unbindEvents;
-    private _parseThemesAttribute;
-    private _setupConfirmationDialog;
+    /**
+     * Handler for when the user confirms their theme selection in the confirmation dialog.
+     * Dispatches a custom event with the new selection.
+     * @returns {void}
+     */
     private _handleConfirmation;
     private _handleConfirmationCancel;
     private _resolveThemeFaceVisual;

package/dist/types/web-components/theme-picker/default-values.const.d.ts

@@ -0,0 +1,5 @@
+import { Themes } from '@albi_scando/as-const-themes-lib';
+export declare const DEFAULT_VALUES: {
+    readonly selected: "dark-purple";
+    readonly options: Set<Themes>;
+};

package/dist/types/web-components/theme-picker/main.d.ts

@@ -1,4 +1,4 @@
-export { ThemeCubeComponent } from './component';
-export type { ThemeCubeComponentOptions } from './component';
+export { ThemePickerComponent } from './component';
 export { selector } from './selector';
 export { COMPONENT_CUSTOM_MESSAGES } from './custom-messages.const';
+export { OBSERVED_ATTRIBUTES } from './observed-attributes.const';

package/dist/types/web-components/theme-picker/observed-attributes.const.d.ts

@@ -0,0 +1,7 @@
+/**
+ * observed attributes for the language picker web component
+ */
+export declare const OBSERVED_ATTRIBUTES: {
+    OPTIONS: string;
+    SELECTED: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@albi_scando/as-design-system-threejs-lib",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "description": "A library of reusable, strongly typed threejs Web Components built with TypeScript, designed for creating consistent and maintainable user interfaces.",
   "type": "module",
   "files": [
@@ -46,10 +46,6 @@
     "storybook-build": "storybook build"
   },
   "devDependencies": {
-    "@albi_scando/as-const-languages-lib": "^1.1.1",
-    "@albi_scando/as-const-lib": "^1.11.0",
-    "@albi_scando/as-design-system-lib": "^1.7.2",
-    "@albi_scando/as-threejs-flags-lib": "^2.3.2",
     "@commitlint/cli": "^20.4.1",
     "@commitlint/config-conventional": "^20.4.1",
     "@eslint/js": "^9.39.2",
@@ -93,7 +89,8 @@
   "peerDependencies": {
     "@albi_scando/as-const-languages-lib": "^1.1.0",
     "@albi_scando/as-const-lib": "^1.9.0",
-    "@albi_scando/as-design-system-lib": "^1.6.0",
+    "@albi_scando/as-const-themes-lib": "^1.0.0",
+    "@albi_scando/as-design-system-lib": "^1.7.2",
     "@albi_scando/as-threejs-flags-lib": "^2.3.2",
     "@fontsource/material-symbols-outlined": "^5.0.0",
     "@types/three": "^0.179.0",