@furystack/shades-common-components/esm/components/app-bar-link.js

Common UI components for FuryStack Shades

import { createComponent, LocationService, NestedRouteLink, Shade } from '@furystack/shades';
import { match } from 'path-to-regexp';
import { cssVariableTheme } from '../services/css-variable-theme.js';
export const AppBarLink = Shade({
    customElementName: 'shade-app-bar-link',
    css: {
        display: 'flex',
        height: '100%',
        textDecoration: 'none',
        alignItems: 'center',
        fontFamily: cssVariableTheme.typography.fontFamily,
        padding: `0 ${cssVariableTheme.spacing.sm}`,
        transition: `color ${cssVariableTheme.transitions.duration.normal} ${cssVariableTheme.transitions.easing.easeInOut}, transform ${cssVariableTheme.transitions.duration.normal} ${cssVariableTheme.transitions.easing.easeInOut}`,
        cursor: 'pointer',
        color: cssVariableTheme.text.secondary,
        opacity: '0.8',
        transform: 'scale(0.9)',
        '&[data-active]': {
            color: cssVariableTheme.text.primary,
            opacity: '1',
            transform: 'scale(1)',
        },
    },
    render: ({ children, props, useObservable, injector, useHostProps }) => {
        const [currentUrl] = useObservable('locationChange', injector.get(LocationService).onLocationPathChanged);
        const isActive = !!match(props.path, props.routingOptions)(currentUrl);
        if (isActive) {
            useHostProps({ 'data-active': '' });
        }
        return createComponent(NestedRouteLink, { ...props }, children);
    },
});
/**
 * Creates a type-safe wrapper around AppBarLink constrained to a specific route tree.
 * The returned component has the same runtime behavior but narrows `path` to only accept
 * valid route paths, and requires `params` when the route has parameters.
 *
 * @typeParam TRoutes - The route tree type (use `typeof yourRoutes`)
 * @returns A type-safe AppBarLink component constrained to a specific route tree.
 */
export const createAppBarLink = () => {
    return AppBarLink;
};
//# sourceMappingURL=app-bar-link.js.map