From fed130f29192e3789280414fd975f1b9bf4f509f Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Wed, 11 Mar 2026 08:49:14 +0000 Subject: [PATCH] feat(dees-statsgrid): add container-responsive behavior and responsive CSS to dees-statsgrid; bump @design.estate/dees-element dependency to ^2.2.1 --- changelog.md | 7 +++ package.json | 2 +- pnpm-lock.yaml | 49 +++++++++++++++---- ts_web/00_commitinfo_data.ts | 2 +- .../dees-statsgrid/dees-statsgrid.ts | 29 +++++++++++ 5 files changed, 77 insertions(+), 12 deletions(-) diff --git a/changelog.md b/changelog.md index 4f3b783..3cacf68 100644 --- a/changelog.md +++ b/changelog.md @@ -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 diff --git a/package.json b/package.json index 9cbbe3a..e9bd9bb 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 99a548a..cecbc11 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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 diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 9701400..f6f3aa1 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -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.' } diff --git a/ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.ts b/ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.ts index 091ef64..ed94a34 100644 --- a/ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.ts +++ b/ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.ts @@ -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() {