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

feat(dees-statsgrid): add container-responsive behavior and responsive CSS to dees-statsgrid; bump @design.estate/dees-element dependency to ^2.2.1

Browse Source
This commit is contained in:
Jürgen Kunz
2026-03-11 08:49:14 +00:00
parent 4f05b5907b
commit fed130f291
5 changed files with 77 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
changelog.md
View File

@@ -1,5 +1,12 @@
# Changelog
## 2026-03-11 - 3.47.0 - feat(dees-statsgrid)
add container-responsive behavior and responsive CSS to dees-statsgrid; bump @design.estate/dees-element dependency to ^2.2.1
- Added @containerResponsive decorator and import to dees-statsgrid
- Added cssManager.cssForPhablet and cssManager.cssForPhone responsive style blocks to adjust layout, spacing and font sizes on smaller viewports
- Bumped dependency @design.estate/dees-element from ^2.1.6 to ^2.2.1
## 2026-03-10 - 3.46.1 - fix(dees-appui)
add min-height: 0 to mainmenu and secondarymenu to prevent unintended container height and fix layout stacking

2
package.json
View File

@@ -17,7 +17,7 @@
"license": "MIT",
"dependencies": {
"@design.estate/dees-domtools": "^2.3.9",
"@design.estate/dees-element": "^2.1.6",
"@design.estate/dees-element": "^2.2.1",
"@design.estate/dees-wcctools": "^3.8.0",
"@fortawesome/fontawesome-svg-core": "^7.2.0",
"@fortawesome/free-brands-svg-icons": "^7.2.0",

49
pnpm-lock.yaml generated
View File

@@ -12,8 +12,8 @@ importers:
specifier: ^2.3.9
version: 2.3.9
'@design.estate/dees-element':
specifier: ^2.1.6
version: 2.1.6
specifier: ^2.2.1
version: 2.2.1
'@design.estate/dees-wcctools':
specifier: ^3.8.0
version: 3.8.0
@@ -317,8 +317,11 @@ packages:
'@design.estate/dees-domtools@2.3.9':
resolution: {integrity: sha512-tixdBPUbbQEg46QkUQw9XVgGH/OxVe68FwPjspczKVPDM/0CbJL76JGQuTySZTPe8F49f2Q2Ft257qEGBEEtGA==}
'@design.estate/dees-element@2.1.6':
resolution: {integrity: sha512-7zyHkUjB8UEQgT9VbB2IJtc/yuPt9CI5JGel3b6BxA1kecY64ceIjFvof1uIkc0QP8q2fMLLY45r1c+9zDTjzg==}
'@design.estate/dees-domtools@2.5.1':
resolution: {integrity: sha512-ojzRSkOpQvxpd4drCNF1wadvPwthI6xIJpYjBbOwlgxkFCrlgxlOxHzRKEVnj5wWeUPqykKhddKp33LKW9mydw==}
'@design.estate/dees-element@2.2.1':
resolution: {integrity: sha512-rYtrCrYQNnEC75vgUUIwCwwLTgSdXBZSK5X1b9JyApl8VasvqEVowqiChuZpxNhW2TRZuk29lyY86Qb7/DuQQQ==}
'@design.estate/dees-wcctools@3.8.0':
resolution: {integrity: sha512-CC14iVKUrguzD9jIrdPBd9fZ4egVJEZMxl5y8iy0l7WLumeoYvGsoXj5INVkRPLRVLqziIdi4Je1hXqHt2NU+g==}
@@ -4565,7 +4568,7 @@ snapshots:
'@design.estate/dees-catalog@3.45.1(@tiptap/pm@2.27.2)':
dependencies:
'@design.estate/dees-domtools': 2.3.9
'@design.estate/dees-element': 2.1.6
'@design.estate/dees-element': 2.2.1
'@design.estate/dees-wcctools': 3.8.0
'@fortawesome/fontawesome-svg-core': 7.2.0
'@fortawesome/free-brands-svg-icons': 7.2.0
@@ -4630,9 +4633,35 @@ snapshots:
- supports-color
- vue
'@design.estate/dees-element@2.1.6':
'@design.estate/dees-domtools@2.5.1':
dependencies:
'@design.estate/dees-domtools': 2.3.9
'@api.global/typedrequest': 3.3.0
'@design.estate/dees-comms': 1.0.30
'@push.rocks/lik': 6.3.1
'@push.rocks/smartdelay': 3.0.5
'@push.rocks/smartjson': 6.0.0
'@push.rocks/smartmarkdown': 3.0.3
'@push.rocks/smartpromise': 4.2.3
'@push.rocks/smartrouter': 1.3.3
'@push.rocks/smartrx': 3.0.10
'@push.rocks/smartstate': 2.2.1
'@push.rocks/smartstring': 4.1.0
'@push.rocks/smarturl': 3.1.0
'@push.rocks/webrequest': 4.0.5
'@push.rocks/websetup': 3.0.19
'@push.rocks/webstore': 2.0.20
'@tempfix/lenis': 1.3.20
lit: 3.3.2
sweet-scroll: 4.0.0
transitivePeerDependencies:
- '@nuxt/kit'
- react
- supports-color
- vue
'@design.estate/dees-element@2.2.1':
dependencies:
'@design.estate/dees-domtools': 2.5.1
'@push.rocks/isounique': 1.0.5
'@push.rocks/smartrx': 3.0.10
lit: 3.3.2
@@ -4645,7 +4674,7 @@ snapshots:
'@design.estate/dees-wcctools@3.8.0':
dependencies:
'@design.estate/dees-domtools': 2.3.9
'@design.estate/dees-element': 2.1.6
'@design.estate/dees-element': 2.2.1
'@push.rocks/smartdelay': 3.0.5
lit: 3.3.2
transitivePeerDependencies:
@@ -6077,7 +6106,7 @@ snapshots:
'@push.rocks/smartntml@2.0.8':
dependencies:
'@design.estate/dees-element': 2.1.6
'@design.estate/dees-element': 2.2.1
'@happy-dom/global-registrator': 15.11.7
'@push.rocks/smartpromise': 4.2.3
fake-indexeddb: 6.2.5
@@ -6311,7 +6340,7 @@ snapshots:
'@push.rocks/taskbuffer@3.5.0':
dependencies:
'@design.estate/dees-element': 2.1.6
'@design.estate/dees-element': 2.2.1
'@push.rocks/lik': 6.3.1
'@push.rocks/smartdelay': 3.0.5
'@push.rocks/smartlog': 3.2.1

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@design.estate/dees-catalog',
version: '3.46.1',
version: '3.47.0',
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
}

29
ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.ts
View File

@@ -10,6 +10,7 @@ import {
css,
unsafeCSS,
cssManager,
containerResponsive,
} from '@design.estate/dees-element';
import type { TemplateResult } from '@design.estate/dees-element';
@@ -93,6 +94,7 @@ export interface IStatsTile {
actions?: plugins.tsclass.website.IMenuItem[];
}
@containerResponsive()
@customElement('dees-statsgrid')
export class DeesStatsGrid extends DeesElement {
public static demo = demoFunc;
@@ -801,6 +803,33 @@ export class DeesStatsGrid extends DeesElement {
z-index: 1000;
}
`,
// Container-responsive: when this statsgrid is narrow
cssManager.cssForPhablet(css`
:host {
--tile-padding: 12px;
--value-font-size: 22px;
--title-font-size: 12px;
--grid-gap: 8px;
}
.stats-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 8px;
}
.stats-tile {
grid-column: span 1 !important;
}
`, this),
cssManager.cssForPhone(css`
:host {
--tile-padding: 10px;
--value-font-size: 20px;
--header-spacing: 8px;
}
.stats-grid {
grid-template-columns: 1fr;
gap: 6px;
}
`, this),
];
constructor() {