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

2
ts/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@design.estate/dees-element',
version: '2.2.0',
version: '2.2.1',
description: 'A library for creating custom elements extending the lit element class with additional functionalities.'
}

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 {

36
ts/classes.dees-element.ts
View File

@@ -2,45 +2,15 @@ import * as plugins from './plugins.js';
import { type CSSResult } from 'lit';
export class DeesElement extends plugins.lit.LitElement {
// STATIC — component-level responsive helpers (use in `static styles = [...]`)
// STATIC — component-level constraint helper (use in `static styles = [...]`)
private static getContainerName(): string {
return (this as any).is || this.name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
}
static cssForDesktop(cssArg: CSSResult) {
return plugins.domtools.breakpoints.cssForContainer(
cssArg, `(min-width: ${plugins.domtools.breakpoints.desktop}px)`, this.getContainerName(),
);
}
static cssForNotebook(cssArg: CSSResult) {
return plugins.domtools.breakpoints.cssForContainer(
cssArg, `(max-width: ${plugins.domtools.breakpoints.notebook}px)`, this.getContainerName(),
);
}
static cssForTablet(cssArg: CSSResult) {
return plugins.domtools.breakpoints.cssForContainer(
cssArg, `(max-width: ${plugins.domtools.breakpoints.tablet}px)`, this.getContainerName(),
);
}
static cssForPhablet(cssArg: CSSResult) {
return plugins.domtools.breakpoints.cssForContainer(
cssArg, `(max-width: ${plugins.domtools.breakpoints.phablet}px)`, this.getContainerName(),
);
}
static cssForPhone(cssArg: CSSResult) {
return plugins.domtools.breakpoints.cssForContainer(
cssArg, `(max-width: ${plugins.domtools.breakpoints.phone}px)`, this.getContainerName(),
);
}
static cssForCustom(constraints: { maxWidth?: number; minWidth?: number }) {
static cssForConstraint(constraints: { maxWidth?: number; minWidth?: number }) {
return (cssArg: CSSResult) =>
plugins.domtools.breakpoints.cssForCustomContainer(constraints, this.getContainerName())(cssArg);
plugins.domtools.breakpoints.cssForConstraintContainer(constraints, this.getContainerName())(cssArg);
}
// INSTANCE