mtrl 0.8.0-next.8 → 0.8.0

package/dist/components/card/api.js

@@ -0,0 +1,74 @@
+export const withAPI = ({ lifecycle }) => (component) => ({
+    ...component,
+    element: component.element,
+    addContent(contentElement) {
+        if (contentElement && contentElement.classList.contains(`${component.getClass('card')}-content`)) {
+            component.element.appendChild(contentElement);
+        }
+        return this;
+    },
+    setHeader(headerElement) {
+        if (headerElement && headerElement.classList.contains(`${component.getClass('card')}-header`)) {
+            const existingHeader = component.element.querySelector(`.${component.getClass('card')}-header`);
+            if (existingHeader) {
+                existingHeader.remove();
+            }
+            const mediaElement = component.element.querySelector(`.${component.getClass('card')}-media`);
+            if (mediaElement) {
+                const mediaElements = component.element.querySelectorAll(`.${component.getClass('card')}-media`);
+                const lastMedia = mediaElements[mediaElements.length - 1];
+                if (lastMedia.nextSibling) {
+                    component.element.insertBefore(headerElement, lastMedia.nextSibling);
+                }
+                else {
+                    component.element.appendChild(headerElement);
+                }
+            }
+            else {
+                component.element.insertBefore(headerElement, component.element.firstChild);
+            }
+        }
+        return this;
+    },
+    addMedia(mediaElement, position = 'top') {
+        if (mediaElement && mediaElement.classList.contains(`${component.getClass('card')}-media`)) {
+            if (position === 'top') {
+                component.element.insertBefore(mediaElement, component.element.firstChild);
+            }
+            else {
+                component.element.appendChild(mediaElement);
+            }
+        }
+        return this;
+    },
+    setActions(actionsElement) {
+        if (actionsElement && actionsElement.classList.contains(`${component.getClass('card')}-actions`)) {
+            const existingActions = component.element.querySelector(`.${component.getClass('card')}-actions`);
+            if (existingActions) {
+                existingActions.remove();
+            }
+            component.element.appendChild(actionsElement);
+        }
+        return this;
+    },
+    makeDraggable(dragStartCallback) {
+        component.element.setAttribute('draggable', 'true');
+        component.element.setAttribute('aria-grabbed', 'false');
+        component.element.addEventListener('dragstart', (e) => {
+            component.element.setAttribute('aria-grabbed', 'true');
+            if (typeof dragStartCallback === 'function')
+                dragStartCallback(e);
+        });
+        component.element.addEventListener('dragend', () => {
+            component.element.setAttribute('aria-grabbed', 'false');
+        });
+        return this;
+    },
+    focus() {
+        component.element.focus();
+        return this;
+    },
+    destroy() {
+        lifecycle.destroy();
+    }
+});

package/dist/components/card/card.d.ts

@@ -1,4 +1,4 @@
-import { CardComponent, CardSchema } from './types';
+import { CardComponent, CardSchema } from "./types.js";
 /**
  * Creates a new Card component following Material Design 3 principles.
  *

package/dist/components/card/card.js

@@ -0,0 +1,20 @@
+import { pipe } from "../../core/compose/index.js";
+import { createBase, withElement } from "../../core/compose/component.js";
+import { withEvents, withVariant, withRipple, withLifecycle } from "../../core/compose/features/index.js";
+import { withAPI } from "./api.js";
+import { createBaseConfig, getElementConfig, getApiConfig, withInteractiveBehavior, processInlineConfig, applyInlineConfiguration } from "./config.js";
+import { withElevation } from "./features.js";
+const createCard = (config = {}) => {
+    const processedConfig = processInlineConfig(config);
+    const baseConfig = createBaseConfig(processedConfig);
+    try {
+        const card = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withVariant(baseConfig), baseConfig.clickable ? withRipple(baseConfig) : (c) => c, withLifecycle(), withInteractiveBehavior, withElevation, comp => withAPI(getApiConfig(comp))(comp))(baseConfig);
+        applyInlineConfiguration(card, processedConfig);
+        return card;
+    }
+    catch (error) {
+        console.error('Card creation error:', error instanceof Error ? error.message : String(error));
+        throw new Error(`Failed to create card: ${error instanceof Error ? error.message : String(error)}`);
+    }
+};
+export default createCard;

package/dist/components/card/config.d.ts

@@ -1,4 +1,4 @@
-import { CardComponent, CardSchema, BaseComponent } from "./types";
+import { CardComponent, CardSchema, BaseComponent } from "./types.js";
 /**
  * Default configuration for the Card component.
  * These values are used when no configuration is provided.

package/dist/components/card/config.js

@@ -0,0 +1,161 @@
+import { createComponentConfig, createElementConfig, } from "../../core/config/component.js";
+import { createCardHeader, createCardContent, createCardMedia, createCardActions, } from "./content.js";
+import { CARD_VARIANTS, CARD_ELEVATIONS } from "./constants.js";
+export const defaultConfig = {
+    variant: CARD_VARIANTS.ELEVATED,
+    interactive: false,
+    fullWidth: false,
+    clickable: false,
+    draggable: false,
+};
+export const processInlineConfig = (config) => {
+    const processedConfig = { ...config };
+    if (config.header) {
+        processedConfig.headerConfig = config.header;
+    }
+    if (config.content) {
+        processedConfig.contentConfig = config.content;
+    }
+    if (config.media) {
+        processedConfig.mediaConfig = config.media;
+    }
+    if (config.actions) {
+        processedConfig.actionsConfig = config.actions;
+    }
+    return processedConfig;
+};
+export const applyInlineConfiguration = (card, config) => {
+    if (config.mediaConfig &&
+        (!config.mediaConfig.position || config.mediaConfig.position === "top")) {
+        const mediaElement = createCardMedia({
+            ...config.mediaConfig,
+            position: undefined,
+        });
+        card.addMedia(mediaElement, "top");
+    }
+    if (config.headerConfig) {
+        const headerElement = createCardHeader(config.headerConfig);
+        card.setHeader(headerElement);
+    }
+    if (config.contentConfig) {
+        const contentElement = createCardContent(config.contentConfig);
+        card.addContent(contentElement);
+    }
+    if (config.mediaConfig && config.mediaConfig.position === "bottom") {
+        const mediaElement = createCardMedia({
+            ...config.mediaConfig,
+            position: undefined,
+        });
+        card.addMedia(mediaElement, "bottom");
+    }
+    if (config.actionsConfig) {
+        const actionsElement = createCardActions(config.actionsConfig);
+        card.setActions(actionsElement);
+    }
+    if (Array.isArray(config.buttons) && config.buttons.length > 0) {
+        import("../button/index.js")
+            .then(({ default: createButton }) => {
+            const actionButtons = config.buttons.map((buttonConfig) => createButton(buttonConfig).element);
+            const actionsElement = createCardActions({
+                actions: actionButtons,
+                align: config.actionsConfig?.align || "end",
+            });
+            card.setActions(actionsElement);
+        })
+            .catch((error) => {
+            console.error("Error processing buttons:", error);
+        });
+    }
+};
+export const createBaseConfig = (config = {}) => createComponentConfig(defaultConfig, config, "card");
+export const getElementConfig = (config) => {
+    const isInteractive = config.interactive || config.clickable;
+    const defaultRole = isInteractive ? "button" : "region";
+    const ariaAttributes = {};
+    if (config.aria) {
+        Object.entries(config.aria).forEach(([key, value]) => {
+            if (value !== undefined) {
+                const attrName = key.startsWith("aria-") ? key : `aria-${key}`;
+                ariaAttributes[attrName] = value;
+            }
+        });
+    }
+    if (!ariaAttributes["role"] && !config.aria?.role) {
+        ariaAttributes["role"] = defaultRole;
+    }
+    if (isInteractive && !ariaAttributes["tabindex"]) {
+        ariaAttributes["tabindex"] = "0";
+    }
+    return createElementConfig(config, {
+        tag: "div",
+        className: [
+            config.class,
+            config.fullWidth ? `${config.prefix}-card--full-width` : null,
+            isInteractive ? `${config.prefix}-card--interactive` : null,
+        ],
+        attributes: ariaAttributes,
+        forwardEvents: {
+            click: () => !!config.clickable,
+            mouseenter: () => !!isInteractive,
+            mouseleave: () => !!isInteractive,
+            keydown: () => !!isInteractive,
+            focus: () => !!isInteractive,
+            blur: () => !!isInteractive,
+        },
+        interactive: isInteractive,
+    });
+};
+export const getApiConfig = (comp) => ({
+    lifecycle: {
+        destroy: () => comp.lifecycle?.destroy?.(),
+    },
+});
+export const CARD_ELEVATION_LEVELS = CARD_ELEVATIONS;
+export const withInteractiveBehavior = (comp) => {
+    const config = comp.config;
+    const isInteractive = config.interactive || config.clickable;
+    if (isInteractive) {
+        comp.element.addEventListener("mouseenter", () => {
+            if (config.variant === CARD_VARIANTS.ELEVATED) {
+                comp.element.style.setProperty(`--${config.prefix}-card-elevation`, String(CARD_ELEVATION_LEVELS.LEVEL2));
+            }
+        });
+        comp.element.addEventListener("mouseleave", () => {
+            if (config.variant === CARD_VARIANTS.ELEVATED) {
+                comp.element.style.setProperty(`--${config.prefix}-card-elevation`, String(CARD_ELEVATION_LEVELS.LEVEL1));
+            }
+        });
+        comp.element.addEventListener("keydown", (e) => {
+            if ((e.key === "Enter" || e.key === " ") && config.clickable) {
+                e.preventDefault();
+                comp.element.click();
+            }
+        });
+        comp.element.addEventListener("focus", () => {
+            comp.element.classList.add(`${comp.getClass("card")}--focused`);
+        });
+        comp.element.addEventListener("blur", () => {
+            comp.element.classList.remove(`${comp.getClass("card")}--focused`);
+        });
+    }
+    if (config.draggable) {
+        comp.element.setAttribute("draggable", "true");
+        comp.element.addEventListener("dragstart", (e) => {
+            comp.element.style.setProperty(`--${config.prefix}-card-elevation`, String(CARD_ELEVATION_LEVELS.LEVEL4));
+            comp.element.classList.add(`${comp.getClass("card")}--dragging`);
+            comp.emit?.("dragstart", { event: e });
+            if (e.dataTransfer) {
+                const cardTitle = comp.element.querySelector(`.${comp.getClass("card")}-header-title`)
+                    ?.textContent || "Card";
+                e.dataTransfer.setData("text/plain", cardTitle);
+            }
+        });
+        comp.element.addEventListener("dragend", (e) => {
+            comp.element.style.setProperty(`--${config.prefix}-card-elevation`, String(CARD_ELEVATION_LEVELS.LEVEL1));
+            comp.element.classList.remove(`${comp.getClass("card")}--dragging`);
+            comp.emit?.("dragend", { event: e });
+        });
+    }
+    return comp;
+};
+export default defaultConfig;

package/dist/components/card/constants.js

@@ -0,0 +1,55 @@
+export const CARD_VARIANTS = {
+    ELEVATED: 'elevated',
+    FILLED: 'filled',
+    OUTLINED: 'outlined'
+};
+export const CARD_ELEVATIONS = {
+    LEVEL0: 0,
+    LEVEL1: 1,
+    LEVEL2: 2,
+    LEVEL4: 4
+};
+export const CARD_WIDTHS = {
+    SMALL: '344px',
+    MEDIUM: '480px',
+    LARGE: '624px',
+    FULL: '100%'
+};
+export const CARD_CORNER_RADIUS = {
+    SMALL: '8px',
+    MEDIUM: '12px',
+    LARGE: '16px'
+};
+export const CARD_ASPECT_RATIOS = {
+    SQUARE: '1:1',
+    STANDARD: '4:3',
+    WIDESCREEN: '16:9'
+};
+export const CARD_ACTION_ALIGNMENT = {
+    START: 'start',
+    CENTER: 'center',
+    END: 'end',
+    SPACE_BETWEEN: 'space-between'
+};
+export const CARD_MEDIA_POSITION = {
+    TOP: 'top',
+    BOTTOM: 'bottom'
+};
+export const CARD_CLASSES = {
+    ROOT: 'card',
+    HEADER: 'card-header',
+    TITLE: 'card-title',
+    SUBTITLE: 'card-subtitle',
+    AVATAR: 'card-avatar',
+    HEADER_ACTION: 'card-header-action',
+    CONTENT: 'card-content',
+    MEDIA: 'card-media',
+    ACTIONS: 'card-actions',
+    DRAGGABLE: 'card-draggable',
+    INTERACTIVE: 'card-interactive',
+    FULL_WIDTH: 'card-full-width',
+    CLICKABLE: 'card-clickable',
+    LOADING: 'card-loading',
+    EXPANDED: 'card-expanded',
+    ELEVATION_PREFIX: 'card-elevation-'
+};

package/dist/components/card/content.d.ts

@@ -1,4 +1,4 @@
-import { CardContentConfig, CardHeaderConfig, CardMediaConfig, CardActionsConfig } from './types';
+import { CardContentConfig, CardHeaderConfig, CardMediaConfig, CardActionsConfig } from "./types.js";
 export declare const CARD_CONTENT_PADDING = true;
 /**
  * Creates a card content component

package/dist/components/card/content.js

@@ -0,0 +1,195 @@
+import { PREFIX } from "../../core/config.js";
+import { pipe } from "../../core/compose/index.js";
+import { createBase, withElement } from "../../core/compose/component.js";
+import { createElement } from "../../core/dom/create.js";
+export const CARD_CONTENT_PADDING = true;
+export const createCardContent = (config = {}) => {
+    const baseConfig = {
+        ...config,
+        componentName: 'card-content',
+        prefix: PREFIX
+    };
+    try {
+        const content = pipe(createBase, withElement({
+            tag: 'div',
+            componentName: 'card-content',
+            className: [
+                config.class,
+                config.padding === false ? `${PREFIX}-card-content--no-padding` : null
+            ],
+            attributes: {
+                'role': 'region',
+                'style': 'display: block; color: inherit;'
+            }
+        }))(baseConfig);
+        if (config.html) {
+            content.element.innerHTML = config.html;
+        }
+        else if (config.text) {
+            content.element.innerHTML = `<p>${config.text}</p>`;
+        }
+        if (Array.isArray(config.children)) {
+            config.children.forEach(child => {
+                if (child instanceof HTMLElement) {
+                    content.element.appendChild(child);
+                }
+            });
+        }
+        return content.element;
+    }
+    catch (error) {
+        console.error('Card content creation error:', error instanceof Error ? error.message : String(error));
+        throw new Error(`Failed to create card content: ${error instanceof Error ? error.message : String(error)}`);
+    }
+};
+export const createCardHeader = (config = {}) => {
+    const baseConfig = {
+        ...config,
+        componentName: 'card-header',
+        prefix: PREFIX
+    };
+    try {
+        const header = pipe(createBase, withElement({
+            tag: 'div',
+            componentName: 'card-header',
+            className: config.class,
+            attributes: {
+                'role': 'heading',
+                'aria-level': '3'
+            }
+        }))(baseConfig);
+        const textContainer = createElement({
+            tag: 'div',
+            className: `${PREFIX}-card-header-text`,
+            container: header.element
+        });
+        if (config.title) {
+            createElement({
+                tag: 'h3',
+                className: `${PREFIX}-card-header-title`,
+                text: config.title,
+                container: textContainer,
+                attributes: {
+                    id: `${header.element.id || 'card-header'}-title`
+                }
+            });
+            const parentCard = header.element.closest(`.${PREFIX}-card`);
+            if (parentCard && !parentCard.hasAttribute('aria-labelledby')) {
+                parentCard.setAttribute('aria-labelledby', `${header.element.id || 'card-header'}-title`);
+            }
+        }
+        if (config.subtitle) {
+            createElement({
+                tag: 'h4',
+                className: `${PREFIX}-card-header-subtitle`,
+                text: config.subtitle,
+                container: textContainer
+            });
+        }
+        if (config.avatar) {
+            const avatarElement = typeof config.avatar === 'string'
+                ? createElement({
+                    tag: 'div',
+                    className: `${PREFIX}-card-header-avatar`,
+                    html: config.avatar
+                })
+                : config.avatar;
+            const avatarImg = avatarElement.querySelector('img');
+            if (avatarImg && !avatarImg.hasAttribute('alt')) {
+                avatarImg.setAttribute('alt', '');
+                avatarImg.setAttribute('aria-hidden', 'true');
+            }
+            header.element.insertBefore(avatarElement, header.element.firstChild);
+        }
+        if (config.action) {
+            const actionElement = typeof config.action === 'string'
+                ? createElement({
+                    tag: 'div',
+                    className: `${PREFIX}-card-header-action`,
+                    html: config.action
+                })
+                : config.action;
+            header.element.appendChild(actionElement);
+        }
+        return header.element;
+    }
+    catch (error) {
+        console.error('Card header creation error:', error instanceof Error ? error.message : String(error));
+        throw new Error(`Failed to create card header: ${error instanceof Error ? error.message : String(error)}`);
+    }
+};
+export const createCardActions = (config = {}) => {
+    const baseConfig = {
+        ...config,
+        componentName: 'card-actions',
+        prefix: PREFIX
+    };
+    try {
+        const actions = pipe(createBase, withElement({
+            tag: 'div',
+            componentName: 'card-actions',
+            className: [
+                config.class,
+                config.fullBleed ? `${PREFIX}-card-actions--full-bleed` : null,
+                config.vertical ? `${PREFIX}-card-actions--vertical` : null,
+                config.align ? `${PREFIX}-card-actions--${config.align}` : null
+            ],
+            attributes: {
+                'role': 'group'
+            }
+        }))(baseConfig);
+        if (Array.isArray(config.actions)) {
+            config.actions.forEach((action, index) => {
+                if (action instanceof HTMLElement) {
+                    if (!action.hasAttribute('aria-label') &&
+                        !action.hasAttribute('aria-labelledby') &&
+                        action.textContent?.trim() === '') {
+                        action.setAttribute('aria-label', `Action ${index + 1}`);
+                    }
+                    actions.element.appendChild(action);
+                }
+            });
+        }
+        return actions.element;
+    }
+    catch (error) {
+        console.error('Card actions creation error:', error instanceof Error ? error.message : String(error));
+        throw new Error(`Failed to create card actions: ${error instanceof Error ? error.message : String(error)}`);
+    }
+};
+export const createCardMedia = (config = {}) => {
+    const baseConfig = {
+        ...config,
+        componentName: 'card-media',
+        prefix: PREFIX
+    };
+    try {
+        const media = pipe(createBase, withElement({
+            tag: 'div',
+            componentName: 'card-media',
+            className: [
+                config.class,
+                config.aspectRatio ? `${PREFIX}-card-media--${config.aspectRatio.replace(':', '-')}` : null,
+                config.contain ? `${PREFIX}-card-media--contain` : null
+            ]
+        }))(baseConfig);
+        if (config.element instanceof HTMLElement) {
+            media.element.appendChild(config.element);
+        }
+        else if (config.src) {
+            const img = document.createElement('img');
+            img.src = config.src;
+            img.className = `${PREFIX}-card-media-img`;
+            img.alt = config.alt || '';
+            if (!config.alt) {
+                img.setAttribute('aria-hidden', 'true');
+            }
+            media.element.appendChild(img);
+        }
+        return media.element;
+    }
+    catch (error) {
+        console.error('Card media creation error:', error instanceof Error ? error.message : String(error));
+        throw new Error(`Failed to create card media: ${error instanceof Error ? error.message : String(error)}`);
+    }
+};

package/dist/components/card/features.d.ts

@@ -1,4 +1,4 @@
-import { BaseComponent, CardComponent, LoadingFeature, ExpandableFeature, SwipeableFeature } from "./types";
+import { BaseComponent, CardComponent, LoadingFeature, ExpandableFeature, SwipeableFeature } from "./types.js";
 interface LoadingConfig {
     initialState?: boolean;
 }