design.estate/dees-element
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dees-element): rename cssForCustom to cssForConstraint, remove DeesElement static cssFor* helpers, and add optional elementClass parameter to cssManager breakpoint helpers

Browse Source
This commit is contained in:
Jürgen Kunz
2026-03-11 08:30:00 +00:00
parent 8c46bbd2e9
commit ce78188072
7 changed files with 73 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
ts/classes.cssmanager.ts
View File

@@ -47,29 +47,58 @@ export class CssManager {
return domtools.elementBasic.staticStyles;
}
public cssForDesktop(contentArg: CSSResult) {
private getContainerNameFromClass(elementClass: { is?: string; name: string }): string {
return elementClass.is || elementClass.name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
}
public cssForDesktop(contentArg: CSSResult, elementClass?: { is?: string; name: string }) {
if (elementClass) {
return unsafeCSS(domtools.breakpoints.cssForContainer(
contentArg, `(min-width: ${domtools.breakpoints.desktop}px)`, this.getContainerNameFromClass(elementClass),
));
}
return unsafeCSS(domtools.breakpoints.cssForDesktop(contentArg));
}
public cssForNotebook(contentArg: CSSResult) {
public cssForNotebook(contentArg: CSSResult, elementClass?: { is?: string; name: string }) {
if (elementClass) {
return unsafeCSS(domtools.breakpoints.cssForContainer(
contentArg, `(max-width: ${domtools.breakpoints.notebook}px)`, this.getContainerNameFromClass(elementClass),
));
}
return unsafeCSS(domtools.breakpoints.cssForNotebook(contentArg));
}
public cssForTablet(contentArg: CSSResult) {
public cssForTablet(contentArg: CSSResult, elementClass?: { is?: string; name: string }) {
if (elementClass) {
return unsafeCSS(domtools.breakpoints.cssForContainer(
contentArg, `(max-width: ${domtools.breakpoints.tablet}px)`, this.getContainerNameFromClass(elementClass),
));
}
return unsafeCSS(domtools.breakpoints.cssForTablet(contentArg));
}
public cssForPhablet(contentArg: CSSResult) {
public cssForPhablet(contentArg: CSSResult, elementClass?: { is?: string; name: string }) {
if (elementClass) {
return unsafeCSS(domtools.breakpoints.cssForContainer(
contentArg, `(max-width: ${domtools.breakpoints.phablet}px)`, this.getContainerNameFromClass(elementClass),
));
}
return unsafeCSS(domtools.breakpoints.cssForPhablet(contentArg));
}
public cssForPhone(contentArg: CSSResult) {
public cssForPhone(contentArg: CSSResult, elementClass?: { is?: string; name: string }) {
if (elementClass) {
return unsafeCSS(domtools.breakpoints.cssForContainer(
contentArg, `(max-width: ${domtools.breakpoints.phone}px)`, this.getContainerNameFromClass(elementClass),
));
}
return unsafeCSS(domtools.breakpoints.cssForPhone(contentArg));
}
public cssForCustom(constraints: { maxWidth?: number; minWidth?: number }) {
public cssForConstraint(constraints: { maxWidth?: number; minWidth?: number }) {
return (contentArg: CSSResult) =>
unsafeCSS(domtools.breakpoints.cssForCustom(constraints)(contentArg));
unsafeCSS(domtools.breakpoints.cssForConstraint(constraints)(contentArg));
}
public bdTheme(brightValueArg: string, darkValueArg: string): CSSResult {