material 1.0.3 → 3.0.0-next.0

package/dist/components/top-app-bar/top-app-bar.js

@@ -0,0 +1,164 @@
+import { processClassNames } from "../../core/config/component.js";
+import { createBase, withElement, withEvents, withLifecycle, } from "../../core/compose/index.js";
+import { createConfig } from "./config.js";
+import { TOP_APP_BAR_DEFAULTS } from "./constants.js";
+export const createTopAppBar = (config = {}) => {
+    const componentConfig = createConfig(config);
+    const component = createBase(componentConfig);
+    const createContainers = () => {
+        const leadingContainer = document.createElement("div");
+        leadingContainer.className = `${component.getClass("top-app-bar")}__leading`;
+        const headlineElement = document.createElement("h1");
+        headlineElement.className = `${component.getClass("top-app-bar")}__headline`;
+        if (componentConfig.title) {
+            headlineElement.textContent = componentConfig.title;
+        }
+        const trailingContainer = document.createElement("div");
+        trailingContainer.className = `${component.getClass("top-app-bar")}__trailing`;
+        return { leadingContainer, headlineElement, trailingContainer };
+    };
+    const { leadingContainer, headlineElement, trailingContainer } = createContainers();
+    const getInitialClasses = () => {
+        const classes = [processClassNames(componentConfig.className || "")];
+        if (componentConfig.type !== "small") {
+            classes.push(`${component.getClass("top-app-bar")}--${componentConfig.type}`);
+        }
+        if (componentConfig.compressible &&
+            (componentConfig.type === "medium" || componentConfig.type === "large")) {
+            classes.push(`${component.getClass("top-app-bar")}--compressible`);
+        }
+        return classes.filter((name) => Boolean(name));
+    };
+    const enhancedComponent = withElement({
+        tag: componentConfig.tag,
+        componentName: "top-app-bar",
+        className: getInitialClasses(),
+        attributes: {
+            role: "banner",
+            "aria-label": "Top app bar",
+        },
+        interactive: true,
+    })(component);
+    const withEventsComponent = withEvents()(enhancedComponent);
+    const withLifecycleComponent = withLifecycle()(withEventsComponent);
+    const setupDomStructure = () => {
+        if (componentConfig.type === "medium" || componentConfig.type === "large") {
+            const topRow = document.createElement("div");
+            topRow.className = `${component.getClass("top-app-bar")}__row`;
+            topRow.appendChild(leadingContainer);
+            topRow.appendChild(trailingContainer);
+            const bottomRow = document.createElement("div");
+            bottomRow.className = `${component.getClass("top-app-bar")}__row`;
+            bottomRow.appendChild(headlineElement);
+            withLifecycleComponent.element.appendChild(topRow);
+            withLifecycleComponent.element.appendChild(bottomRow);
+        }
+        else {
+            withLifecycleComponent.element.appendChild(leadingContainer);
+            withLifecycleComponent.element.appendChild(headlineElement);
+            withLifecycleComponent.element.appendChild(trailingContainer);
+        }
+    };
+    setupDomStructure();
+    let isScrolled = false;
+    if (componentConfig.scrollable) {
+        const handleScroll = () => {
+            const shouldBeScrolled = window.scrollY > (componentConfig.scrollThreshold ?? TOP_APP_BAR_DEFAULTS.SCROLL_THRESHOLD);
+            if (isScrolled !== shouldBeScrolled) {
+                isScrolled = shouldBeScrolled;
+                if (isScrolled) {
+                    withLifecycleComponent.element.classList.add(`${component.getClass("top-app-bar")}--scrolled`);
+                }
+                else {
+                    withLifecycleComponent.element.classList.remove(`${component.getClass("top-app-bar")}--scrolled`);
+                }
+                componentConfig.onScroll?.(isScrolled);
+            }
+        };
+        window.addEventListener("scroll", handleScroll, { passive: true });
+        handleScroll();
+        const originalDestroy = withLifecycleComponent.lifecycle.destroy;
+        withLifecycleComponent.lifecycle.destroy = () => {
+            window.removeEventListener("scroll", handleScroll);
+            originalDestroy();
+        };
+    }
+    const reorganizeDom = (type) => {
+        while (withLifecycleComponent.element.firstChild) {
+            withLifecycleComponent.element.removeChild(withLifecycleComponent.element.firstChild);
+        }
+        ["small", "medium", "large", "center"].forEach((t) => {
+            withLifecycleComponent.element.classList.remove(`${component.getClass("top-app-bar")}--${t}`);
+        });
+        if (type !== "small") {
+            withLifecycleComponent.element.classList.add(`${component.getClass("top-app-bar")}--${type}`);
+        }
+        withLifecycleComponent.element.classList.toggle(`${component.getClass("top-app-bar")}--compressible`, componentConfig.compressible && (type === "medium" || type === "large"));
+        if (type === "medium" || type === "large") {
+            const topRow = document.createElement("div");
+            topRow.className = `${component.getClass("top-app-bar")}__row`;
+            topRow.appendChild(leadingContainer);
+            topRow.appendChild(trailingContainer);
+            const bottomRow = document.createElement("div");
+            bottomRow.className = `${component.getClass("top-app-bar")}__row`;
+            bottomRow.appendChild(headlineElement);
+            withLifecycleComponent.element.appendChild(topRow);
+            withLifecycleComponent.element.appendChild(bottomRow);
+        }
+        else {
+            withLifecycleComponent.element.appendChild(leadingContainer);
+            withLifecycleComponent.element.appendChild(headlineElement);
+            withLifecycleComponent.element.appendChild(trailingContainer);
+        }
+    };
+    const topAppBar = {
+        ...withLifecycleComponent,
+        addClass(...classes) {
+            withLifecycleComponent.addClass(...classes);
+            return this;
+        },
+        destroy() {
+            withLifecycleComponent.lifecycle.destroy();
+        },
+        setTitle(title) {
+            headlineElement.textContent = title;
+            return this;
+        },
+        getTitle() {
+            return headlineElement.textContent || "";
+        },
+        addLeadingElement(element) {
+            leadingContainer.appendChild(element);
+            return this;
+        },
+        addTrailingElement(element) {
+            trailingContainer.appendChild(element);
+            return this;
+        },
+        setType(type) {
+            componentConfig.type = type;
+            reorganizeDom(type);
+            return this;
+        },
+        setScrollState(scrolled) {
+            isScrolled = scrolled;
+            if (scrolled) {
+                this.element.classList.add(`${component.getClass("top-app-bar")}--scrolled`);
+            }
+            else {
+                this.element.classList.remove(`${component.getClass("top-app-bar")}--scrolled`);
+            }
+            return this;
+        },
+        getHeadlineElement() {
+            return headlineElement;
+        },
+        getLeadingContainer() {
+            return leadingContainer;
+        },
+        getTrailingContainer() {
+            return trailingContainer;
+        },
+    };
+    return topAppBar;
+};

package/dist/components/top-app-bar/types.d.ts

@@ -0,0 +1,119 @@
+/**
+ * @module components/top-app-bar
+ * @description Type definitions for Top App Bar component
+ */
+import { ElementComponent } from "../../core/compose/index.js";
+/**
+ * Top App Bar types
+ * @category Components
+ */
+export type TopAppBarType = 'small' | 'medium' | 'large' | 'center';
+/**
+ * Configuration options for Top App Bar component
+ * @category Components
+ */
+export interface TopAppBarConfig {
+    /**
+     * Element to use for the container
+     * @default 'header'
+     */
+    tag?: string;
+    /**
+     * Type of top app bar to display
+     * @default 'small'
+     */
+    type?: TopAppBarType;
+    /**
+     * Title text to display in the app bar
+     */
+    title?: string;
+    /**
+     * Whether to enable scrolling behavior
+     * @default true
+     */
+    scrollable?: boolean;
+    /**
+     * Whether to compress medium/large variants to small on scroll
+     * @default true
+     */
+    compressible?: boolean;
+    /**
+     * Scroll threshold in pixels to trigger the scrolled state
+     * @default 4
+     */
+    scrollThreshold?: number;
+    /**
+     * Additional CSS classes to apply
+     */
+    class?: string;
+    /**
+     * Called with the new scrolled state when scrolling changes the bar.
+     * There is no matching event, so this stays a callback rather than a listener.
+     */
+    onScroll?: (scrolled: boolean) => void;
+    /**
+     * Component prefix for class names
+     * @default 'mtrl'
+     */
+    prefix?: string;
+    /**
+     * Component name for class generation
+     */
+    componentName?: string;
+}
+/**
+ * Top App Bar component interface
+ * @category Components
+ */
+export interface TopAppBarComponent extends ElementComponent {
+    /**
+     * Sets the title of the top app bar
+     * @param {string} title - Title text
+     * @returns {TopAppBarComponent} TopAppBarComponent instance for chaining
+     */
+    setTitle(title: string): this;
+    /**
+     * Gets the current title
+     * @returns {string} Current title text
+     */
+    getTitle: () => string;
+    /**
+     * Adds a leading navigation icon or element
+     * @param {HTMLElement} element - Element to add to the leading section
+     * @returns {TopAppBarComponent} TopAppBarComponent instance for chaining
+     */
+    addLeadingElement(element: HTMLElement): this;
+    /**
+     * Adds a trailing action icon or element
+     * @param {HTMLElement} element - Element to add to the trailing section
+     * @returns {TopAppBarComponent} TopAppBarComponent instance for chaining
+     */
+    addTrailingElement(element: HTMLElement): this;
+    /**
+     * Changes the top app bar type
+     * @param {TopAppBarType} type - New app bar type
+     * @returns {TopAppBarComponent} TopAppBarComponent instance for chaining
+     */
+    setType(type: TopAppBarType): this;
+    /**
+     * Manually sets the scrolled state
+     * @param {boolean} scrolled - Whether to show the scrolled state
+     * @returns {TopAppBarComponent} TopAppBarComponent instance for chaining
+     */
+    setScrollState(scrolled: boolean): this;
+    /**
+     * Gets the headline element
+     * @returns {HTMLElement} Headline element
+     */
+    getHeadlineElement: () => HTMLElement;
+    /**
+     * Gets the leading container element
+     * @returns {HTMLElement} Leading container element
+     */
+    getLeadingContainer: () => HTMLElement;
+    /**
+     * Gets the trailing container element
+     * @returns {HTMLElement} Trailing container element
+     */
+    getTrailingContainer: () => HTMLElement;
+}

package/dist/components/top-app-bar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/core/canvas/animation.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Easing function for smooth animations (Material Design standard)
+ * Implements cubic-bezier(0.4, 0, 0.2, 1)
+ *
+ * @param t Progress value between 0 and 1
+ * @returns Eased progress value between 0 and 1
+ */
+export declare const easeOutCubic: (t: number) => number;
+/**
+ * Standard Material Design animation durations
+ */
+export declare const ANIMATION_DURATIONS: {
+    SHORT: number;
+    MEDIUM: number;
+    LONG: number;
+    EXTRA_LONG: number;
+};
+/**
+ * Common easing functions
+ */
+export declare const EASING_FUNCTIONS: {
+    linear: (t: number) => number;
+    easeIn: (t: number) => number;
+    easeOut: (t: number) => number;
+    easeInOut: (t: number) => number;
+    materialStandard: (t: number) => number;
+};

package/dist/core/canvas/animation.js

@@ -0,0 +1,36 @@
+export const easeOutCubic = (t) => {
+    const p1x = 0.4, p1y = 0;
+    const p2x = 0.2, p2y = 1;
+    let x = t;
+    for (let i = 0; i < 4; i++) {
+        const cx = 3 * p1x;
+        const bx = 3 * (p2x - p1x) - cx;
+        const ax = 1 - cx - bx;
+        const x2 = x * x;
+        const x3 = x2 * x;
+        const f = ax * x3 + bx * x2 + cx * x - t;
+        const df = 3 * ax * x2 + 2 * bx * x + cx;
+        if (Math.abs(f) < 0.00001)
+            break;
+        x = x - f / df;
+    }
+    const cy = 3 * p1y;
+    const by = 3 * (p2y - p1y) - cy;
+    const ay = 1 - cy - by;
+    const x2 = x * x;
+    const x3 = x2 * x;
+    return ay * x3 + by * x2 + cy * x;
+};
+export const ANIMATION_DURATIONS = {
+    SHORT: 100,
+    MEDIUM: 225,
+    LONG: 375,
+    EXTRA_LONG: 500
+};
+export const EASING_FUNCTIONS = {
+    linear: (t) => t,
+    easeIn: (t) => t * t,
+    easeOut: (t) => t * (2 - t),
+    easeInOut: (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
+    materialStandard: easeOutCubic
+};

package/dist/core/canvas/drawing.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Canvas drawing utilities
+ * Provides common drawing functions for canvas operations
+ */
+/**
+ * Creates a rounded rectangle path
+ * @param ctx - Canvas 2D rendering context
+ * @param x - X coordinate
+ * @param y - Y coordinate
+ * @param width - Rectangle width
+ * @param height - Rectangle height
+ * @param radius - Corner radius (can be a number or array of radii)
+ */
+export declare const createRoundedRectPath: (ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: number | [number, number, number, number]) => void;
+/**
+ * Draws a filled rounded rectangle
+ * @param ctx - Canvas 2D rendering context
+ * @param x - X coordinate
+ * @param y - Y coordinate
+ * @param width - Rectangle width
+ * @param height - Rectangle height
+ * @param radius - Corner radius
+ * @param fillStyle - Fill color/style
+ */
+export declare const fillRoundedRect: (ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: number | [number, number, number, number], fillStyle?: string | CanvasGradient | CanvasPattern) => void;
+/**
+ * Creates a clipping region with rounded corners
+ * @param ctx - Canvas 2D rendering context
+ * @param x - X coordinate
+ * @param y - Y coordinate
+ * @param width - Rectangle width
+ * @param height - Rectangle height
+ * @param radius - Corner radius
+ * @returns Function to restore the canvas state
+ */
+export declare const clipRoundedRect: (ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: number | [number, number, number, number]) => (() => void);
+/**
+ * Draws a rounded rectangle with different left and right radii
+ * Useful for track segments that connect to other elements
+ * @param ctx - Canvas 2D rendering context
+ * @param x - X coordinate
+ * @param y - Y coordinate
+ * @param width - Rectangle width
+ * @param height - Rectangle height
+ * @param leftRadius - Left side radius
+ * @param rightRadius - Right side radius
+ * @param fillStyle - Fill color/style
+ */
+export declare const fillRoundedRectLR: (ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, leftRadius: number, rightRadius: number, fillStyle?: string | CanvasGradient | CanvasPattern) => void;
+/**
+ * Clears a canvas with optional background color
+ * @param ctx - Canvas 2D rendering context
+ * @param width - Canvas width
+ * @param height - Canvas height
+ * @param backgroundColor - Optional background color
+ */
+export declare const clearCanvas: (ctx: CanvasRenderingContext2D, width: number, height: number, backgroundColor?: string) => void;

package/dist/core/canvas/drawing.js

@@ -0,0 +1,62 @@
+export const createRoundedRectPath = (ctx, x, y, width, height, radius) => {
+    if (width < 0 || height < 0)
+        return;
+    const radii = typeof radius === 'number'
+        ? [radius, radius, radius, radius]
+        : radius;
+    const [tl, tr, br, bl] = radii;
+    ctx.beginPath();
+    ctx.moveTo(x + tl, y);
+    ctx.lineTo(x + width - tr, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + tr);
+    ctx.lineTo(x + width, y + height - br);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - br, y + height);
+    ctx.lineTo(x + bl, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - bl);
+    ctx.lineTo(x, y + tl);
+    ctx.quadraticCurveTo(x, y, x + tl, y);
+    ctx.closePath();
+};
+export const fillRoundedRect = (ctx, x, y, width, height, radius, fillStyle) => {
+    ctx.save();
+    if (fillStyle)
+        ctx.fillStyle = fillStyle;
+    createRoundedRectPath(ctx, x, y, width, height, radius);
+    ctx.fill();
+    ctx.restore();
+};
+export const clipRoundedRect = (ctx, x, y, width, height, radius) => {
+    ctx.save();
+    createRoundedRectPath(ctx, x, y, width, height, radius);
+    ctx.clip();
+    return () => ctx.restore();
+};
+export const fillRoundedRectLR = (ctx, x, y, width, height, leftRadius, rightRadius, fillStyle) => {
+    if (width < 0 || height < 0)
+        return;
+    ctx.save();
+    if (fillStyle)
+        ctx.fillStyle = fillStyle;
+    ctx.beginPath();
+    ctx.moveTo(x + leftRadius, y);
+    ctx.lineTo(x + width - rightRadius, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + rightRadius);
+    ctx.lineTo(x + width, y + height - rightRadius);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - rightRadius, y + height);
+    ctx.lineTo(x + leftRadius, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - leftRadius);
+    ctx.lineTo(x, y + leftRadius);
+    ctx.quadraticCurveTo(x, y, x + leftRadius, y);
+    ctx.closePath();
+    ctx.fill();
+    ctx.restore();
+};
+export const clearCanvas = (ctx, width, height, backgroundColor) => {
+    if (backgroundColor) {
+        ctx.fillStyle = backgroundColor;
+        ctx.fillRect(0, 0, width, height);
+    }
+    else {
+        ctx.clearRect(0, 0, width, height);
+    }
+};

package/dist/core/canvas/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Canvas utilities for high-performance rendering
+ * Provides tools for drawing, animation, and resize handling
+ */
+export * from "./drawing.js";
+export * from "./resize.js";
+export * from "./animation.js";
+export * from "./utils.js";

package/dist/core/canvas/index.js

@@ -0,0 +1,4 @@
+export * from "./drawing.js";
+export * from "./resize.js";
+export * from "./animation.js";
+export * from "./utils.js";

package/dist/core/canvas/resize.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Canvas resize utilities
+ * Provides utilities for observing and handling canvas resize events
+ */
+/**
+ * Observes resize events on an element and triggers a callback
+ * Watches the specified element and debounces resize events
+ *
+ * @param element - The element to observe for size changes
+ * @param canvas - The canvas element (for context)
+ * @param onResize - Callback to execute when the element resizes
+ * @returns Cleanup function to stop observing
+ */
+export declare const observeCanvasResize: (element: HTMLElement, _canvas: HTMLCanvasElement, onResize: () => void) => (() => void);

package/dist/core/canvas/resize.js

@@ -0,0 +1,36 @@
+export const observeCanvasResize = (element, _canvas, onResize) => {
+    let timeoutId = null;
+    const debouncedResize = () => {
+        if (timeoutId)
+            clearTimeout(timeoutId);
+        timeoutId = window.setTimeout(() => {
+            onResize();
+        }, 100);
+    };
+    if (typeof ResizeObserver !== 'undefined') {
+        let seen = -1;
+        const observer = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const width = entry.contentRect.width;
+                if (Math.abs(width - seen) > 2) {
+                    seen = width;
+                    debouncedResize();
+                }
+            }
+        });
+        observer.observe(element);
+        return () => {
+            if (timeoutId)
+                clearTimeout(timeoutId);
+            observer.disconnect();
+        };
+    }
+    else {
+        window.addEventListener('resize', debouncedResize);
+        return () => {
+            if (timeoutId)
+                clearTimeout(timeoutId);
+            window.removeEventListener('resize', debouncedResize);
+        };
+    }
+};

package/dist/core/canvas/utils.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Common canvas context interface used by components
+ */
+export interface CanvasContext {
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    width: number;
+    height: number;
+    pixelRatio: number;
+}
+/**
+ * Creates and initializes a canvas context with proper pixel ratio handling
+ *
+ * @param canvas - The canvas element
+ * @param width - Canvas width
+ * @param height - Canvas height
+ * @returns Initialized canvas context
+ */
+export declare const createCanvasContext: (canvas: HTMLCanvasElement, width: number, height: number) => CanvasContext;
+/**
+ * Updates canvas dimensions while preserving pixel ratio
+ *
+ * @param context - The canvas context to update
+ * @param width - New width
+ * @param height - New height
+ */
+export declare const updateCanvasDimensions: (context: CanvasContext, width: number, height: number) => void;
+/**
+ * Tries to initialize a canvas with retry mechanism
+ *
+ * @param initFn - Function that performs initialization
+ * @param onSuccess - Optional callback on successful initialization
+ * @param signal - Optional signal to cancel pending initialization attempts
+ * @returns Whether initialization was immediately successful
+ */
+export declare const initializeCanvasWithRetry: (initFn: () => boolean, onSuccess?: () => void, signal?: AbortSignal) => boolean;
+/**
+ * Creates a theme observer that triggers a callback on theme changes
+ *
+ * @param _color - Colour name retained for compatibility; notifications cover all colours
+ * @param callback - Function to call when theme changes
+ * @returns Function that unsubscribes from theme changes
+ */
+export declare const createCanvasThemeObserver: (_color: string, callback: () => void) => (() => void);
+/**
+ * Standard animation frame manager for components
+ */
+export declare class AnimationFrameManager {
+    private animationId;
+    /**
+     * Starts an animation loop
+     * @param callback - Animation callback receiving timestamp
+     */
+    start(callback: (timestamp: number) => void): void;
+    /**
+     * Stops the animation loop
+     */
+    stop(): void;
+    /**
+     * Whether animation is currently running
+     */
+    get isRunning(): boolean;
+}
+/**
+ * Manages multiple cleanup functions for components
+ */
+export declare class CleanupManager {
+    private cleanupFunctions;
+    /**
+     * Adds a cleanup function
+     */
+    add(cleanup: (() => void) | null | undefined): void;
+    /**
+     * Runs all cleanup functions and clears the list
+     */
+    cleanup(): void;
+}
+/**
+ * Creates a standard canvas element with common styles
+ *
+ * @param className - CSS class name for the canvas
+ * @param additionalStyles - Additional styles to apply
+ * @returns Canvas element
+ */
+export declare const createStyledCanvas: (className: string, additionalStyles?: Partial<CSSStyleDeclaration>) => HTMLCanvasElement;