@design.estate/dees-domtools 2.3.8 → 2.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist_ts/00_commitinfo_data.js +1 -1
- package/dist_ts/domtools.css.breakpoints.d.ts +9 -0
- package/dist_ts/domtools.css.breakpoints.js +47 -34
- package/dist_ts/domtools.plugins.d.ts +3 -3
- package/dist_ts/domtools.plugins.js +4 -4
- package/npmextra.json +11 -0
- package/package.json +11 -11
- package/readme.md +1 -5
- package/ts/00_commitinfo_data.ts +1 -1
- package/ts/domtools.css.breakpoints.ts +66 -33
- package/ts/domtools.plugins.ts +3 -3
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export const commitinfo = {
|
|
5
5
|
name: '@design.estate/dees-domtools',
|
|
6
|
-
version: '2.
|
|
6
|
+
version: '2.4.0',
|
|
7
7
|
description: 'A package providing tools to simplify complex CSS structures and web development tasks, featuring TypeScript support and integration with various web technologies.'
|
|
8
8
|
};
|
|
9
9
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHMvMDBfY29tbWl0aW5mb19kYXRhLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBQ0gsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFHO0lBQ3hCLElBQUksRUFBRSw4QkFBOEI7SUFDcEMsT0FBTyxFQUFFLE9BQU87SUFDaEIsV0FBVyxFQUFFLHFLQUFxSztDQUNuTCxDQUFBIn0=
|
|
@@ -5,6 +5,15 @@ export declare const tablet = 1024;
|
|
|
5
5
|
export declare const phablet = 600;
|
|
6
6
|
export declare const phone = 400;
|
|
7
7
|
export type TViewport = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
|
|
8
|
+
export interface ICssForConstraints {
|
|
9
|
+
maxWidth?: number;
|
|
10
|
+
minWidth?: number;
|
|
11
|
+
}
|
|
12
|
+
export declare const cssForViewport: (cssArg: CSSResult, condition: string) => CSSResult;
|
|
13
|
+
export declare const cssForContainer: (cssArg: CSSResult, condition: string, containerName: string) => CSSResult;
|
|
14
|
+
export declare const cssForCustom: (constraints: ICssForConstraints) => (cssArg: CSSResult) => CSSResult;
|
|
15
|
+
export declare const cssForCustomContainer: (constraints: ICssForConstraints, containerName: string) => (cssArg: CSSResult) => CSSResult;
|
|
16
|
+
export declare const containerContextStyles: (containerName: string) => CSSResult;
|
|
8
17
|
export declare const cssForDesktop: (cssArg: CSSResult) => CSSResult;
|
|
9
18
|
export declare const cssForNotebook: (cssArg: CSSResult) => CSSResult;
|
|
10
19
|
export declare const cssForTablet: (cssArg: CSSResult) => CSSResult;
|
|
@@ -1,58 +1,71 @@
|
|
|
1
1
|
import { DomTools } from './domtools.classes.domtools.js';
|
|
2
|
-
import { CSSResult, unsafeCSS } from 'lit';
|
|
2
|
+
import { css, CSSResult, unsafeCSS } from 'lit';
|
|
3
3
|
export const desktop = 1600;
|
|
4
4
|
export const notebook = 1240;
|
|
5
5
|
export const tablet = 1024;
|
|
6
6
|
export const phablet = 600;
|
|
7
7
|
export const phone = 400;
|
|
8
|
-
|
|
8
|
+
const buildCondition = (constraints) => {
|
|
9
|
+
const parts = [];
|
|
10
|
+
if (constraints.minWidth)
|
|
11
|
+
parts.push(`(min-width: ${constraints.minWidth}px)`);
|
|
12
|
+
if (constraints.maxWidth)
|
|
13
|
+
parts.push(`(max-width: ${constraints.maxWidth}px)`);
|
|
14
|
+
return parts.join(' and ');
|
|
15
|
+
};
|
|
16
|
+
// ---------------------------------------------------------------------------
|
|
17
|
+
// Viewport-level: @container wccToolsViewport + @media
|
|
18
|
+
// ---------------------------------------------------------------------------
|
|
19
|
+
export const cssForViewport = (cssArg, condition) => {
|
|
9
20
|
return unsafeCSS(`
|
|
10
|
-
@container wccToolsViewport
|
|
21
|
+
@container wccToolsViewport ${condition} {
|
|
11
22
|
${cssArg.cssText}
|
|
12
23
|
}
|
|
13
|
-
@media
|
|
24
|
+
@media ${condition} {
|
|
14
25
|
${cssArg.cssText}
|
|
15
26
|
}
|
|
16
27
|
`);
|
|
17
28
|
};
|
|
18
|
-
|
|
29
|
+
// ---------------------------------------------------------------------------
|
|
30
|
+
// Component-level: @container <name> only
|
|
31
|
+
// ---------------------------------------------------------------------------
|
|
32
|
+
export const cssForContainer = (cssArg, condition, containerName) => {
|
|
19
33
|
return unsafeCSS(`
|
|
20
|
-
@container
|
|
21
|
-
${cssArg.cssText}
|
|
22
|
-
}
|
|
23
|
-
@media (max-width: ${notebook}px) {
|
|
34
|
+
@container ${containerName} ${condition} {
|
|
24
35
|
${cssArg.cssText}
|
|
25
36
|
}
|
|
26
37
|
`);
|
|
27
38
|
};
|
|
39
|
+
// ---------------------------------------------------------------------------
|
|
40
|
+
// Custom constraints (curried)
|
|
41
|
+
// ---------------------------------------------------------------------------
|
|
42
|
+
export const cssForCustom = (constraints) => (cssArg) => cssForViewport(cssArg, buildCondition(constraints));
|
|
43
|
+
export const cssForCustomContainer = (constraints, containerName) => (cssArg) => cssForContainer(cssArg, buildCondition(constraints), containerName);
|
|
44
|
+
// ---------------------------------------------------------------------------
|
|
45
|
+
// Container context style factory — used by @containerResponsive()
|
|
46
|
+
// ---------------------------------------------------------------------------
|
|
47
|
+
export const containerContextStyles = (containerName) => css `
|
|
48
|
+
:host {
|
|
49
|
+
container-type: inline-size;
|
|
50
|
+
container-name: ${unsafeCSS(containerName)};
|
|
51
|
+
}
|
|
52
|
+
`;
|
|
53
|
+
// ---------------------------------------------------------------------------
|
|
54
|
+
// Preset viewport breakpoint helpers (existing API, unchanged behaviour)
|
|
55
|
+
// ---------------------------------------------------------------------------
|
|
56
|
+
export const cssForDesktop = (cssArg) => {
|
|
57
|
+
return cssForViewport(cssArg, `(min-width: ${desktop}px)`);
|
|
58
|
+
};
|
|
59
|
+
export const cssForNotebook = (cssArg) => {
|
|
60
|
+
return cssForViewport(cssArg, `(max-width: ${notebook}px)`);
|
|
61
|
+
};
|
|
28
62
|
export const cssForTablet = (cssArg) => {
|
|
29
|
-
return
|
|
30
|
-
@container wccToolsViewport (max-width: ${tablet}px) {
|
|
31
|
-
${cssArg.cssText}
|
|
32
|
-
}
|
|
33
|
-
@media (max-width: ${tablet}px) {
|
|
34
|
-
${cssArg.cssText}
|
|
35
|
-
}
|
|
36
|
-
`);
|
|
63
|
+
return cssForViewport(cssArg, `(max-width: ${tablet}px)`);
|
|
37
64
|
};
|
|
38
65
|
export const cssForPhablet = (cssArg) => {
|
|
39
|
-
return
|
|
40
|
-
@container wccToolsViewport (max-width: ${phablet}px) {
|
|
41
|
-
${cssArg.cssText}
|
|
42
|
-
}
|
|
43
|
-
@media (max-width: ${phablet}px) {
|
|
44
|
-
${cssArg.cssText}
|
|
45
|
-
}
|
|
46
|
-
`);
|
|
66
|
+
return cssForViewport(cssArg, `(max-width: ${phablet}px)`);
|
|
47
67
|
};
|
|
48
68
|
export const cssForPhone = (cssArg) => {
|
|
49
|
-
return
|
|
50
|
-
@container wccToolsViewport (max-width: ${phone}px) {
|
|
51
|
-
${cssArg.cssText}
|
|
52
|
-
}
|
|
53
|
-
@media (max-width: ${phone}px) {
|
|
54
|
-
${cssArg.cssText}
|
|
55
|
-
}
|
|
56
|
-
`);
|
|
69
|
+
return cssForViewport(cssArg, `(max-width: ${phone}px)`);
|
|
57
70
|
};
|
|
58
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
71
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZG9tdG9vbHMuY3NzLmJyZWFrcG9pbnRzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHMvZG9tdG9vbHMuY3NzLmJyZWFrcG9pbnRzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUUxRCxPQUFPLEVBQUUsR0FBRyxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsTUFBTSxLQUFLLENBQUM7QUFFaEQsTUFBTSxDQUFDLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQztBQUM1QixNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDO0FBQzdCLE1BQU0sQ0FBQyxNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUM7QUFDM0IsTUFBTSxDQUFDLE1BQU0sT0FBTyxHQUFHLEdBQUcsQ0FBQztBQUMzQixNQUFNLENBQUMsTUFBTSxLQUFLLEdBQUcsR0FBRyxDQUFDO0FBYXpCLE1BQU0sY0FBYyxHQUFHLENBQUMsV0FBK0IsRUFBVSxFQUFFO0lBQ2pFLE1BQU0sS0FBSyxHQUFhLEVBQUUsQ0FBQztJQUMzQixJQUFJLFdBQVcsQ0FBQyxRQUFRO1FBQUUsS0FBSyxDQUFDLElBQUksQ0FBQyxlQUFlLFdBQVcsQ0FBQyxRQUFRLEtBQUssQ0FBQyxDQUFDO0lBQy9FLElBQUksV0FBVyxDQUFDLFFBQVE7UUFBRSxLQUFLLENBQUMsSUFBSSxDQUFDLGVBQWUsV0FBVyxDQUFDLFFBQVEsS0FBSyxDQUFDLENBQUM7SUFDL0UsT0FBTyxLQUFLLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0FBQzdCLENBQUMsQ0FBQztBQUVGLDhFQUE4RTtBQUM5RSx1REFBdUQ7QUFDdkQsOEVBQThFO0FBRTlFLE1BQU0sQ0FBQyxNQUFNLGNBQWMsR0FBRyxDQUFDLE1BQWlCLEVBQUUsU0FBaUIsRUFBRSxFQUFFO0lBQ3JFLE9BQU8sU0FBUyxDQUFDO2tDQUNlLFNBQVM7UUFDbkMsTUFBTSxDQUFDLE9BQU87O2FBRVQsU0FBUztRQUNkLE1BQU0sQ0FBQyxPQUFPOztHQUVuQixDQUFDLENBQUM7QUFDTCxDQUFDLENBQUM7QUFFRiw4RUFBOEU7QUFDOUUsMENBQTBDO0FBQzFDLDhFQUE4RTtBQUU5RSxNQUFNLENBQUMsTUFBTSxlQUFlLEdBQUcsQ0FBQyxNQUFpQixFQUFFLFNBQWlCLEVBQUUsYUFBcUIsRUFBRSxFQUFFO0lBQzdGLE9BQU8sU0FBUyxDQUFDO2lCQUNGLGFBQWEsSUFBSSxTQUFTO1FBQ25DLE1BQU0sQ0FBQyxPQUFPOztHQUVuQixDQUFDLENBQUM7QUFDTCxDQUFDLENBQUM7QUFFRiw4RUFBOEU7QUFDOUUsK0JBQStCO0FBQy9CLDhFQUE4RTtBQUU5RSxNQUFNLENBQUMsTUFBTSxZQUFZLEdBQUcsQ0FBQyxXQUErQixFQUFFLEVBQUUsQ0FDOUQsQ0FBQyxNQUFpQixFQUFFLEVBQUUsQ0FBQyxjQUFjLENBQUMsTUFBTSxFQUFFLGNBQWMsQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDO0FBRTdFLE1BQU0sQ0FBQyxNQUFNLHFCQUFxQixHQUFHLENBQUMsV0FBK0IsRUFBRSxhQUFxQixFQUFFLEVBQUUsQ0FDOUYsQ0FBQyxNQUFpQixFQUFFLEVBQUUsQ0FBQyxlQUFlLENBQUMsTUFBTSxFQUFFLGNBQWMsQ0FBQyxXQUFXLENBQUMsRUFBRSxhQUFhLENBQUMsQ0FBQztBQUU3Riw4RUFBOEU7QUFDOUUsbUVBQW1FO0FBQ25FLDhFQUE4RTtBQUU5RSxNQUFNLENBQUMsTUFBTSxzQkFBc0IsR0FBRyxDQUFDLGFBQXFCLEVBQUUsRUFBRSxDQUFDLEdBQUcsQ0FBQTs7O3NCQUc5QyxTQUFTLENBQUMsYUFBYSxDQUFDOztDQUU3QyxDQUFDO0FBRUYsOEVBQThFO0FBQzlFLHlFQUF5RTtBQUN6RSw4RUFBOEU7QUFFOUUsTUFBTSxDQUFDLE1BQU0sYUFBYSxHQUFHLENBQUMsTUFBaUIsRUFBRSxFQUFFO0lBQ2pELE9BQU8sY0FBYyxDQUFDLE1BQU0sRUFBRSxlQUFlLE9BQU8sS0FBSyxDQUFDLENBQUM7QUFDN0QsQ0FBQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sY0FBYyxHQUFHLENBQUMsTUFBaUIsRUFBRSxFQUFFO0lBQ2xELE9BQU8sY0FBYyxDQUFDLE1BQU0sRUFBRSxlQUFlLFFBQVEsS0FBSyxDQUFDLENBQUM7QUFDOUQsQ0FBQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sWUFBWSxHQUFHLENBQUMsTUFBaUIsRUFBRSxFQUFFO0lBQ2hELE9BQU8sY0FBYyxDQUFDLE1BQU0sRUFBRSxlQUFlLE1BQU0sS0FBSyxDQUFDLENBQUM7QUFDNUQsQ0FBQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sYUFBYSxHQUFHLENBQUMsTUFBaUIsRUFBRSxFQUFFO0lBQ2pELE9BQU8sY0FBYyxDQUFDLE1BQU0sRUFBRSxlQUFlLE9BQU8sS0FBSyxDQUFDLENBQUM7QUFDN0QsQ0FBQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sV0FBVyxHQUFHLENBQUMsTUFBaUIsRUFBRSxFQUFFO0lBQy9DLE9BQU8sY0FBYyxDQUFDLE1BQU0sRUFBRSxlQUFlLEtBQUssS0FBSyxDQUFDLENBQUM7QUFDM0QsQ0FBQyxDQUFDIn0=
|
|
@@ -14,9 +14,9 @@ import * as smarturl from '@push.rocks/smarturl';
|
|
|
14
14
|
import * as webrequest from '@push.rocks/webrequest';
|
|
15
15
|
import * as websetup from '@push.rocks/websetup';
|
|
16
16
|
import * as webstore from '@push.rocks/webstore';
|
|
17
|
-
import { ObjectMap } from '@push.rocks/lik/dist_ts/
|
|
18
|
-
import { Stringmap } from '@push.rocks/lik/dist_ts/
|
|
19
|
-
import { FastMap } from '@push.rocks/lik/dist_ts/
|
|
17
|
+
import { ObjectMap } from '@push.rocks/lik/dist_ts/classes.objectmap.js';
|
|
18
|
+
import { Stringmap } from '@push.rocks/lik/dist_ts/classes.stringmap.js';
|
|
19
|
+
import { FastMap } from '@push.rocks/lik/dist_ts/classes.fastmap.js';
|
|
20
20
|
declare const lik: {
|
|
21
21
|
ObjectMap: typeof ObjectMap;
|
|
22
22
|
Stringmap: typeof Stringmap;
|
|
@@ -18,9 +18,9 @@ import * as webrequest from '@push.rocks/webrequest';
|
|
|
18
18
|
import * as websetup from '@push.rocks/websetup';
|
|
19
19
|
import * as webstore from '@push.rocks/webstore';
|
|
20
20
|
// subscope lik
|
|
21
|
-
import { ObjectMap } from '@push.rocks/lik/dist_ts/
|
|
22
|
-
import { Stringmap } from '@push.rocks/lik/dist_ts/
|
|
23
|
-
import { FastMap } from '@push.rocks/lik/dist_ts/
|
|
21
|
+
import { ObjectMap } from '@push.rocks/lik/dist_ts/classes.objectmap.js';
|
|
22
|
+
import { Stringmap } from '@push.rocks/lik/dist_ts/classes.stringmap.js';
|
|
23
|
+
import { FastMap } from '@push.rocks/lik/dist_ts/classes.fastmap.js';
|
|
24
24
|
const lik = {
|
|
25
25
|
ObjectMap,
|
|
26
26
|
Stringmap,
|
|
@@ -31,4 +31,4 @@ export { lik, smartdelay, smartjson, smartmarkdown, smartpromise, smartrouter, s
|
|
|
31
31
|
import Lenis from '@tempfix/lenis';
|
|
32
32
|
import SweetScroll from 'sweet-scroll';
|
|
33
33
|
export { Lenis, SweetScroll };
|
|
34
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
34
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZG9tdG9vbHMucGx1Z2lucy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3RzL2RvbXRvb2xzLnBsdWdpbnMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEscUJBQXFCO0FBQ3JCLE9BQU8sS0FBSyxTQUFTLE1BQU0sMkJBQTJCLENBQUM7QUFFdkQsT0FBTyxFQUFFLFNBQVMsRUFBRSxDQUFDO0FBRXJCLGtCQUFrQjtBQUNsQixPQUFPLEtBQUssWUFBWSxNQUFNLDBCQUEwQixDQUFDO0FBRXpELE9BQU8sRUFBRSxZQUFZLEVBQUUsQ0FBQztBQUV4QixrQkFBa0I7QUFDbEIsT0FBTyxLQUFLLFVBQVUsTUFBTSx3QkFBd0IsQ0FBQztBQUNyRCxPQUFPLEtBQUssU0FBUyxNQUFNLHVCQUF1QixDQUFDO0FBQ25ELE9BQU8sS0FBSyxhQUFhLE1BQU0sMkJBQTJCLENBQUM7QUFDM0QsT0FBTyxLQUFLLFlBQVksTUFBTSwwQkFBMEIsQ0FBQztBQUN6RCxPQUFPLEtBQUssV0FBVyxNQUFNLHlCQUF5QixDQUFDO0FBQ3ZELE9BQU8sS0FBSyxPQUFPLE1BQU0scUJBQXFCLENBQUM7QUFDL0MsT0FBTyxLQUFLLFVBQVUsTUFBTSx3QkFBd0IsQ0FBQztBQUNyRCxPQUFPLEtBQUssV0FBVyxNQUFNLHlCQUF5QixDQUFDO0FBQ3ZELE9BQU8sS0FBSyxRQUFRLE1BQU0sc0JBQXNCLENBQUM7QUFDakQsT0FBTyxLQUFLLFVBQVUsTUFBTSx3QkFBd0IsQ0FBQztBQUNyRCxPQUFPLEtBQUssUUFBUSxNQUFNLHNCQUFzQixDQUFDO0FBQ2pELE9BQU8sS0FBSyxRQUFRLE1BQU0sc0JBQXNCLENBQUM7QUFFakQsZUFBZTtBQUNmLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4Q0FBOEMsQ0FBQztBQUN6RSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOENBQThDLENBQUM7QUFDekUsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLDRDQUE0QyxDQUFDO0FBQ3JFLE1BQU0sR0FBRyxHQUFHO0lBQ1YsU0FBUztJQUNULFNBQVM7SUFDVCxPQUFPO0NBQ1IsQ0FBQztBQUVGLE9BQU8sRUFDTCxHQUFHLEVBQ0gsVUFBVSxFQUNWLFNBQVMsRUFDVCxhQUFhLEVBQ2IsWUFBWSxFQUNaLFdBQVcsRUFDWCxPQUFPLEVBQ1AsUUFBUSxFQUNSLFVBQVUsRUFDVixXQUFXLEVBQ1gsVUFBVSxFQUNWLFFBQVEsRUFDUixRQUFRLEdBQ1QsQ0FBQztBQUVGLG9CQUFvQjtBQUNwQixPQUFPLEtBQUssTUFBTSxnQkFBZ0IsQ0FBQTtBQUNsQyxPQUFPLFdBQVcsTUFBTSxjQUFjLENBQUM7QUFFdkMsT0FBTyxFQUFFLEtBQUssRUFBRSxXQUFXLEVBQUUsQ0FBQyJ9
|
package/npmextra.json
CHANGED
|
@@ -37,6 +37,17 @@
|
|
|
37
37
|
"@git.zone/tsdoc": {
|
|
38
38
|
"legal": "\n## License and Legal Information\n\nThis repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](license) file within this repository. \n\n**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.\n\n### Trademarks\n\nThis project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.\n\n### Company Information\n\nTask Venture Capital GmbH \nRegistered at District court Bremen HRB 35230 HB, Germany\n\nFor any legal inquiries or if you require further information, please contact us via email at hello@task.vc.\n\nBy using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.\n"
|
|
39
39
|
},
|
|
40
|
+
"@git.zone/tsbundle": {
|
|
41
|
+
"bundles": [
|
|
42
|
+
{
|
|
43
|
+
"from": "./ts/index.ts",
|
|
44
|
+
"to": "./dist_bundle/bundle.js",
|
|
45
|
+
"outputMode": "bundle",
|
|
46
|
+
"bundler": "esbuild",
|
|
47
|
+
"production": true
|
|
48
|
+
}
|
|
49
|
+
]
|
|
50
|
+
},
|
|
40
51
|
"@ship.zone/szci": {
|
|
41
52
|
"npmGlobalTools": []
|
|
42
53
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@design.estate/dees-domtools",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.4.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "A package providing tools to simplify complex CSS structures and web development tasks, featuring TypeScript support and integration with various web technologies.",
|
|
6
6
|
"main": "dist_ts/index.js",
|
|
@@ -15,29 +15,29 @@
|
|
|
15
15
|
"buildDocs": "tsdoc"
|
|
16
16
|
},
|
|
17
17
|
"devDependencies": {
|
|
18
|
-
"@git.zone/tsbuild": "^4.
|
|
19
|
-
"@git.zone/tsbundle": "^2.
|
|
20
|
-
"@git.zone/tstest": "^3.
|
|
18
|
+
"@git.zone/tsbuild": "^4.1.3",
|
|
19
|
+
"@git.zone/tsbundle": "^2.9.0",
|
|
20
|
+
"@git.zone/tstest": "^3.2.0",
|
|
21
21
|
"@push.rocks/tapbundle": "^6.0.3",
|
|
22
|
-
"@types/node": "^25.
|
|
22
|
+
"@types/node": "^25.3.3"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@api.global/typedrequest": "^3.
|
|
25
|
+
"@api.global/typedrequest": "^3.3.0",
|
|
26
26
|
"@design.estate/dees-comms": "^1.0.30",
|
|
27
|
-
"@push.rocks/lik": "^6.
|
|
27
|
+
"@push.rocks/lik": "^6.3.1",
|
|
28
28
|
"@push.rocks/smartdelay": "^3.0.5",
|
|
29
|
-
"@push.rocks/smartjson": "^
|
|
29
|
+
"@push.rocks/smartjson": "^6.0.0",
|
|
30
30
|
"@push.rocks/smartmarkdown": "^3.0.3",
|
|
31
31
|
"@push.rocks/smartpromise": "^4.2.3",
|
|
32
32
|
"@push.rocks/smartrouter": "^1.3.3",
|
|
33
33
|
"@push.rocks/smartrx": "^3.0.10",
|
|
34
|
-
"@push.rocks/smartstate": "^2.
|
|
34
|
+
"@push.rocks/smartstate": "^2.2.1",
|
|
35
35
|
"@push.rocks/smartstring": "^4.1.0",
|
|
36
36
|
"@push.rocks/smarturl": "^3.1.0",
|
|
37
|
-
"@push.rocks/webrequest": "^
|
|
37
|
+
"@push.rocks/webrequest": "^4.0.5",
|
|
38
38
|
"@push.rocks/websetup": "^3.0.19",
|
|
39
39
|
"@push.rocks/webstore": "^2.0.20",
|
|
40
|
-
"@tempfix/lenis": "^1.3.
|
|
40
|
+
"@tempfix/lenis": "^1.3.20",
|
|
41
41
|
"lit": "^3.3.2",
|
|
42
42
|
"sweet-scroll": "^4.0.0"
|
|
43
43
|
},
|
package/readme.md
CHANGED
package/ts/00_commitinfo_data.ts
CHANGED
|
@@ -3,6 +3,6 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export const commitinfo = {
|
|
5
5
|
name: '@design.estate/dees-domtools',
|
|
6
|
-
version: '2.
|
|
6
|
+
version: '2.4.0',
|
|
7
7
|
description: 'A package providing tools to simplify complex CSS structures and web development tasks, featuring TypeScript support and integration with various web technologies.'
|
|
8
8
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { DomTools } from './domtools.classes.domtools.js';
|
|
2
2
|
|
|
3
|
-
import { CSSResult, unsafeCSS } from 'lit';
|
|
3
|
+
import { css, CSSResult, unsafeCSS } from 'lit';
|
|
4
4
|
|
|
5
5
|
export const desktop = 1600;
|
|
6
6
|
export const notebook = 1240;
|
|
@@ -10,57 +10,90 @@ export const phone = 400;
|
|
|
10
10
|
|
|
11
11
|
export type TViewport = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
// ---------------------------------------------------------------------------
|
|
14
|
+
// Constraint-based helpers
|
|
15
|
+
// ---------------------------------------------------------------------------
|
|
16
|
+
|
|
17
|
+
export interface ICssForConstraints {
|
|
18
|
+
maxWidth?: number;
|
|
19
|
+
minWidth?: number;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
const buildCondition = (constraints: ICssForConstraints): string => {
|
|
23
|
+
const parts: string[] = [];
|
|
24
|
+
if (constraints.minWidth) parts.push(`(min-width: ${constraints.minWidth}px)`);
|
|
25
|
+
if (constraints.maxWidth) parts.push(`(max-width: ${constraints.maxWidth}px)`);
|
|
26
|
+
return parts.join(' and ');
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
// ---------------------------------------------------------------------------
|
|
30
|
+
// Viewport-level: @container wccToolsViewport + @media
|
|
31
|
+
// ---------------------------------------------------------------------------
|
|
32
|
+
|
|
33
|
+
export const cssForViewport = (cssArg: CSSResult, condition: string) => {
|
|
14
34
|
return unsafeCSS(`
|
|
15
|
-
@container wccToolsViewport
|
|
35
|
+
@container wccToolsViewport ${condition} {
|
|
16
36
|
${cssArg.cssText}
|
|
17
37
|
}
|
|
18
|
-
@media
|
|
38
|
+
@media ${condition} {
|
|
19
39
|
${cssArg.cssText}
|
|
20
40
|
}
|
|
21
41
|
`);
|
|
22
42
|
};
|
|
23
43
|
|
|
24
|
-
|
|
44
|
+
// ---------------------------------------------------------------------------
|
|
45
|
+
// Component-level: @container <name> only
|
|
46
|
+
// ---------------------------------------------------------------------------
|
|
47
|
+
|
|
48
|
+
export const cssForContainer = (cssArg: CSSResult, condition: string, containerName: string) => {
|
|
25
49
|
return unsafeCSS(`
|
|
26
|
-
@container
|
|
27
|
-
${cssArg.cssText}
|
|
28
|
-
}
|
|
29
|
-
@media (max-width: ${notebook}px) {
|
|
50
|
+
@container ${containerName} ${condition} {
|
|
30
51
|
${cssArg.cssText}
|
|
31
52
|
}
|
|
32
53
|
`);
|
|
33
54
|
};
|
|
34
55
|
|
|
56
|
+
// ---------------------------------------------------------------------------
|
|
57
|
+
// Custom constraints (curried)
|
|
58
|
+
// ---------------------------------------------------------------------------
|
|
59
|
+
|
|
60
|
+
export const cssForCustom = (constraints: ICssForConstraints) =>
|
|
61
|
+
(cssArg: CSSResult) => cssForViewport(cssArg, buildCondition(constraints));
|
|
62
|
+
|
|
63
|
+
export const cssForCustomContainer = (constraints: ICssForConstraints, containerName: string) =>
|
|
64
|
+
(cssArg: CSSResult) => cssForContainer(cssArg, buildCondition(constraints), containerName);
|
|
65
|
+
|
|
66
|
+
// ---------------------------------------------------------------------------
|
|
67
|
+
// Container context style factory — used by @containerResponsive()
|
|
68
|
+
// ---------------------------------------------------------------------------
|
|
69
|
+
|
|
70
|
+
export const containerContextStyles = (containerName: string) => css`
|
|
71
|
+
:host {
|
|
72
|
+
container-type: inline-size;
|
|
73
|
+
container-name: ${unsafeCSS(containerName)};
|
|
74
|
+
}
|
|
75
|
+
`;
|
|
76
|
+
|
|
77
|
+
// ---------------------------------------------------------------------------
|
|
78
|
+
// Preset viewport breakpoint helpers (existing API, unchanged behaviour)
|
|
79
|
+
// ---------------------------------------------------------------------------
|
|
80
|
+
|
|
81
|
+
export const cssForDesktop = (cssArg: CSSResult) => {
|
|
82
|
+
return cssForViewport(cssArg, `(min-width: ${desktop}px)`);
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
export const cssForNotebook = (cssArg: CSSResult) => {
|
|
86
|
+
return cssForViewport(cssArg, `(max-width: ${notebook}px)`);
|
|
87
|
+
};
|
|
88
|
+
|
|
35
89
|
export const cssForTablet = (cssArg: CSSResult) => {
|
|
36
|
-
return
|
|
37
|
-
@container wccToolsViewport (max-width: ${tablet}px) {
|
|
38
|
-
${cssArg.cssText}
|
|
39
|
-
}
|
|
40
|
-
@media (max-width: ${tablet}px) {
|
|
41
|
-
${cssArg.cssText}
|
|
42
|
-
}
|
|
43
|
-
`);
|
|
90
|
+
return cssForViewport(cssArg, `(max-width: ${tablet}px)`);
|
|
44
91
|
};
|
|
45
92
|
|
|
46
93
|
export const cssForPhablet = (cssArg: CSSResult) => {
|
|
47
|
-
return
|
|
48
|
-
@container wccToolsViewport (max-width: ${phablet}px) {
|
|
49
|
-
${cssArg.cssText}
|
|
50
|
-
}
|
|
51
|
-
@media (max-width: ${phablet}px) {
|
|
52
|
-
${cssArg.cssText}
|
|
53
|
-
}
|
|
54
|
-
`);
|
|
94
|
+
return cssForViewport(cssArg, `(max-width: ${phablet}px)`);
|
|
55
95
|
};
|
|
56
96
|
|
|
57
97
|
export const cssForPhone = (cssArg: CSSResult) => {
|
|
58
|
-
return
|
|
59
|
-
@container wccToolsViewport (max-width: ${phone}px) {
|
|
60
|
-
${cssArg.cssText}
|
|
61
|
-
}
|
|
62
|
-
@media (max-width: ${phone}px) {
|
|
63
|
-
${cssArg.cssText}
|
|
64
|
-
}
|
|
65
|
-
`);
|
|
98
|
+
return cssForViewport(cssArg, `(max-width: ${phone}px)`);
|
|
66
99
|
};
|
package/ts/domtools.plugins.ts
CHANGED
|
@@ -23,9 +23,9 @@ import * as websetup from '@push.rocks/websetup';
|
|
|
23
23
|
import * as webstore from '@push.rocks/webstore';
|
|
24
24
|
|
|
25
25
|
// subscope lik
|
|
26
|
-
import { ObjectMap } from '@push.rocks/lik/dist_ts/
|
|
27
|
-
import { Stringmap } from '@push.rocks/lik/dist_ts/
|
|
28
|
-
import { FastMap } from '@push.rocks/lik/dist_ts/
|
|
26
|
+
import { ObjectMap } from '@push.rocks/lik/dist_ts/classes.objectmap.js';
|
|
27
|
+
import { Stringmap } from '@push.rocks/lik/dist_ts/classes.stringmap.js';
|
|
28
|
+
import { FastMap } from '@push.rocks/lik/dist_ts/classes.fastmap.js';
|
|
29
29
|
const lik = {
|
|
30
30
|
ObjectMap,
|
|
31
31
|
Stringmap,
|