100 lines
3.4 KiB
TypeScript
100 lines
3.4 KiB
TypeScript
import { DomTools } from './domtools.classes.domtools.js';
|
|
|
|
import { css, CSSResult, unsafeCSS } from 'lit';
|
|
|
|
export const desktop = 1600;
|
|
export const notebook = 1240;
|
|
export const tablet = 1024;
|
|
export const phablet = 600;
|
|
export const phone = 400;
|
|
|
|
export type TViewport = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Constraint-based helpers
|
|
// ---------------------------------------------------------------------------
|
|
|
|
export interface ICssForConstraints {
|
|
maxWidth?: number;
|
|
minWidth?: number;
|
|
}
|
|
|
|
const buildCondition = (constraints: ICssForConstraints): string => {
|
|
const parts: string[] = [];
|
|
if (constraints.minWidth) parts.push(`(min-width: ${constraints.minWidth}px)`);
|
|
if (constraints.maxWidth) parts.push(`(max-width: ${constraints.maxWidth}px)`);
|
|
return parts.join(' and ');
|
|
};
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Viewport-level: @container wccToolsViewport + @media
|
|
// ---------------------------------------------------------------------------
|
|
|
|
export const cssForViewport = (cssArg: CSSResult, condition: string) => {
|
|
return unsafeCSS(`
|
|
@container wccToolsViewport ${condition} {
|
|
${cssArg.cssText}
|
|
}
|
|
@media ${condition} {
|
|
${cssArg.cssText}
|
|
}
|
|
`);
|
|
};
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Component-level: @container <name> only
|
|
// ---------------------------------------------------------------------------
|
|
|
|
export const cssForContainer = (cssArg: CSSResult, condition: string, containerName: string) => {
|
|
return unsafeCSS(`
|
|
@container ${containerName} ${condition} {
|
|
${cssArg.cssText}
|
|
}
|
|
`);
|
|
};
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Constraint-based (curried)
|
|
// ---------------------------------------------------------------------------
|
|
|
|
export const cssForConstraint = (constraints: ICssForConstraints) =>
|
|
(cssArg: CSSResult) => cssForViewport(cssArg, buildCondition(constraints));
|
|
|
|
export const cssForConstraintContainer = (constraints: ICssForConstraints, containerName: string) =>
|
|
(cssArg: CSSResult) => cssForContainer(cssArg, buildCondition(constraints), containerName);
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Container context style factory — used by @containerResponsive()
|
|
// ---------------------------------------------------------------------------
|
|
|
|
export const containerContextStyles = (containerName: string) => css`
|
|
:host {
|
|
container-type: inline-size;
|
|
container-name: ${unsafeCSS(containerName)};
|
|
}
|
|
`;
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Preset viewport breakpoint helpers (existing API, unchanged behaviour)
|
|
// ---------------------------------------------------------------------------
|
|
|
|
export const cssForDesktop = (cssArg: CSSResult) => {
|
|
return cssForViewport(cssArg, `(min-width: ${desktop}px)`);
|
|
};
|
|
|
|
export const cssForNotebook = (cssArg: CSSResult) => {
|
|
return cssForViewport(cssArg, `(max-width: ${notebook}px)`);
|
|
};
|
|
|
|
export const cssForTablet = (cssArg: CSSResult) => {
|
|
return cssForViewport(cssArg, `(max-width: ${tablet}px)`);
|
|
};
|
|
|
|
export const cssForPhablet = (cssArg: CSSResult) => {
|
|
return cssForViewport(cssArg, `(max-width: ${phablet}px)`);
|
|
};
|
|
|
|
export const cssForPhone = (cssArg: CSSResult) => {
|
|
return cssForViewport(cssArg, `(max-width: ${phone}px)`);
|
|
};
|