@design.estate/dees-catalog 3.91.0 → 3.92.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_bundle/bundle.js +10381 -4788
- package/dist_ts_web/00_commitinfo_data.js +1 -1
- package/dist_ts_web/elements/00group-appui/dees-appui/dees-appui.js +5 -4
- package/dist_ts_web/elements/00group-appui/dees-appui-profiledropdown/dees-appui-profiledropdown.js +6 -7
- package/dist_ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.js +4 -6
- package/dist_ts_web/elements/00group-button/dees-button/dees-button.d.ts +6 -0
- package/dist_ts_web/elements/00group-button/dees-button/dees-button.demo.js +14 -1
- package/dist_ts_web/elements/00group-button/dees-button/dees-button.js +49 -24
- package/dist_ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.js +1 -1
- package/dist_ts_web/elements/00group-dataview/dees-dataview-codebox/codebox.diff.d.ts +69 -0
- package/dist_ts_web/elements/00group-dataview/dees-dataview-codebox/codebox.diff.js +342 -0
- package/dist_ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.d.ts +48 -3
- package/dist_ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.demo.js +128 -39
- package/dist_ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.js +663 -190
- package/dist_ts_web/elements/00group-dataview/dees-dataview-codebox/index.d.ts +1 -0
- package/dist_ts_web/elements/00group-dataview/dees-dataview-codebox/index.js +2 -1
- package/dist_ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.d.ts +3 -0
- package/dist_ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.js +48 -30
- package/dist_ts_web/elements/00group-dataview/dees-grouped-list/dees-grouped-list.js +1 -1
- package/dist_ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.js +1 -2
- package/dist_ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-keys.js +1 -1
- package/dist_ts_web/elements/00group-dataview/dees-table/styles.js +1 -1
- package/dist_ts_web/elements/00group-feedback/dees-progressbar/dees-progressbar.js +9 -9
- package/dist_ts_web/elements/00group-harness/dees-harness-chat/dees-harness-chat.d.ts +55 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-chat/dees-harness-chat.demo.d.ts +1 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-chat/dees-harness-chat.demo.js +183 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-chat/dees-harness-chat.js +412 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-chat/index.d.ts +1 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-chat/index.js +2 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-composer/dees-harness-composer.d.ts +65 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-composer/dees-harness-composer.demo.d.ts +1 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-composer/dees-harness-composer.demo.js +55 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-composer/dees-harness-composer.js +589 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-composer/index.d.ts +1 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-composer/index.js +2 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-content-blocks/dees-harness-content-blocks.d.ts +21 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-content-blocks/dees-harness-content-blocks.demo.d.ts +1 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-content-blocks/dees-harness-content-blocks.demo.js +41 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-content-blocks/dees-harness-content-blocks.js +215 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-content-blocks/index.d.ts +1 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-content-blocks/index.js +2 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-message/dees-harness-message.d.ts +58 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-message/dees-harness-message.demo.d.ts +1 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-message/dees-harness-message.demo.js +126 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-message/dees-harness-message.js +551 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-message/index.d.ts +1 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-message/index.js +2 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-message-list/dees-harness-message-list.d.ts +50 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-message-list/dees-harness-message-list.demo.d.ts +1 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-message-list/dees-harness-message-list.demo.js +101 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-message-list/dees-harness-message-list.js +424 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-message-list/index.d.ts +1 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-message-list/index.js +2 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-permission-card/dees-harness-permission-card.d.ts +27 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-permission-card/dees-harness-permission-card.demo.d.ts +1 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-permission-card/dees-harness-permission-card.demo.js +46 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-permission-card/dees-harness-permission-card.js +282 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-permission-card/index.d.ts +1 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-permission-card/index.js +2 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-reasoning/dees-harness-reasoning.d.ts +24 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-reasoning/dees-harness-reasoning.demo.d.ts +1 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-reasoning/dees-harness-reasoning.demo.js +32 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-reasoning/dees-harness-reasoning.js +241 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-reasoning/index.d.ts +1 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-reasoning/index.js +2 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-session-list/dees-harness-session-list.d.ts +28 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-session-list/dees-harness-session-list.demo.d.ts +1 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-session-list/dees-harness-session-list.demo.js +56 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-session-list/dees-harness-session-list.js +279 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-session-list/index.d.ts +1 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-session-list/index.js +2 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-status/dees-harness-status.d.ts +30 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-status/dees-harness-status.demo.d.ts +1 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-status/dees-harness-status.demo.js +35 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-status/dees-harness-status.js +235 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-status/index.d.ts +1 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-status/index.js +2 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-todos/dees-harness-todos.d.ts +27 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-todos/dees-harness-todos.demo.d.ts +1 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-todos/dees-harness-todos.demo.js +41 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-todos/dees-harness-todos.js +258 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-todos/index.d.ts +1 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-todos/index.js +2 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-tool-card/dees-harness-tool-card.d.ts +35 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-tool-card/dees-harness-tool-card.demo.d.ts +1 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-tool-card/dees-harness-tool-card.demo.js +162 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-tool-card/dees-harness-tool-card.js +368 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-tool-card/index.d.ts +2 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-tool-card/index.js +3 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-tool-card/renderers.d.ts +5 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-tool-card/renderers.js +183 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-usage/dees-harness-usage.d.ts +19 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-usage/dees-harness-usage.demo.d.ts +1 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-usage/dees-harness-usage.demo.js +25 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-usage/dees-harness-usage.js +148 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-usage/index.d.ts +1 -0
- package/dist_ts_web/elements/00group-harness/dees-harness-usage/index.js +2 -0
- package/dist_ts_web/elements/00group-harness/harness.demodata.d.ts +22 -0
- package/dist_ts_web/elements/00group-harness/harness.demodata.js +94 -0
- package/dist_ts_web/elements/00group-harness/harness.helpers.d.ts +37 -0
- package/dist_ts_web/elements/00group-harness/harness.helpers.js +221 -0
- package/dist_ts_web/elements/00group-harness/harness.markdown.d.ts +25 -0
- package/dist_ts_web/elements/00group-harness/harness.markdown.js +147 -0
- package/dist_ts_web/elements/00group-harness/harness.styles.d.ts +9 -0
- package/dist_ts_web/elements/00group-harness/harness.styles.js +94 -0
- package/dist_ts_web/elements/00group-harness/index.d.ts +18 -0
- package/dist_ts_web/elements/00group-harness/index.js +22 -0
- package/dist_ts_web/elements/00group-harness/interfaces.d.ts +210 -0
- package/dist_ts_web/elements/00group-harness/interfaces.js +11 -0
- package/dist_ts_web/elements/00group-harness/toolregistry.d.ts +76 -0
- package/dist_ts_web/elements/00group-harness/toolregistry.js +210 -0
- package/dist_ts_web/elements/00group-input/dees-input-code/dees-input-code.js +30 -18
- package/dist_ts_web/elements/00group-input/dees-input-datepicker/datepicker-popup.js +73 -46
- package/dist_ts_web/elements/00group-input/dees-input-datepicker/styles.js +15 -16
- package/dist_ts_web/elements/00group-input/dees-input-list/dees-input-list.js +2 -4
- package/dist_ts_web/elements/00group-input/dees-input-tags/dees-input-tags.js +36 -15
- package/dist_ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.js +5 -4
- package/dist_ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/code.block.js +10 -89
- package/dist_ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js +12 -8
- package/dist_ts_web/elements/00group-layout/dees-chips/dees-chips.js +1 -1
- package/dist_ts_web/elements/00group-layout/dees-pagination/dees-pagination.js +27 -12
- package/dist_ts_web/elements/00group-layout/dees-settings/dees-settings.js +1 -1
- package/dist_ts_web/elements/00group-layout/dees-stepper/dees-stepper.js +14 -18
- package/dist_ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.js +6 -7
- package/dist_ts_web/elements/00group-overlay/dees-modal/dees-modal.js +6 -21
- package/dist_ts_web/elements/00group-overlay/dees-windowlayer/dees-windowlayer.d.ts +2 -1
- package/dist_ts_web/elements/00group-overlay/dees-windowlayer/dees-windowlayer.js +10 -4
- package/dist_ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.js +1 -1
- package/dist_ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.js +9 -8
- package/dist_ts_web/elements/00group-workspace/dees-workspace/dees-workspace.js +1 -1
- package/dist_ts_web/elements/00group-workspace/dees-workspace-filetree/dees-workspace-filetree.js +3 -4
- package/dist_ts_web/elements/00group-workspace/dees-workspace-markdownoutlet/dees-workspace-markdownoutlet.js +8 -78
- package/dist_ts_web/elements/00syntax.d.ts +28 -0
- package/dist_ts_web/elements/00syntax.js +98 -0
- package/dist_ts_web/elements/00theme.js +26 -14
- package/dist_ts_web/elements/index.d.ts +1 -0
- package/dist_ts_web/elements/index.js +2 -1
- package/dist_watch/bundle.js +233948 -0
- package/dist_watch/bundle.js.map +7 -0
- package/dist_watch/index.html +28 -0
- package/package.json +1 -1
- package/readme.hints.md +7 -1
- package/readme.md +110 -0
- package/readme.playbook.md +10 -0
- package/ts_web/00_commitinfo_data.ts +1 -1
- package/ts_web/elements/00group-appui/dees-appui/dees-appui.ts +4 -3
- package/ts_web/elements/00group-appui/dees-appui-profiledropdown/dees-appui-profiledropdown.ts +5 -6
- package/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts +3 -5
- package/ts_web/elements/00group-button/dees-button/dees-button.demo.ts +13 -0
- package/ts_web/elements/00group-button/dees-button/dees-button.ts +42 -22
- package/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts +1 -1
- package/ts_web/elements/00group-dataview/dees-dataview-codebox/codebox.diff.ts +401 -0
- package/ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.demo.ts +132 -38
- package/ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts +649 -187
- package/ts_web/elements/00group-dataview/dees-dataview-codebox/index.ts +1 -0
- package/ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.ts +45 -30
- package/ts_web/elements/00group-dataview/dees-grouped-list/dees-grouped-list.ts +1 -1
- package/ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.ts +0 -1
- package/ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-keys.ts +1 -1
- package/ts_web/elements/00group-dataview/dees-table/styles.ts +1 -1
- package/ts_web/elements/00group-feedback/dees-progressbar/dees-progressbar.ts +9 -9
- package/ts_web/elements/00group-harness/dees-harness-chat/dees-harness-chat.demo.ts +193 -0
- package/ts_web/elements/00group-harness/dees-harness-chat/dees-harness-chat.ts +301 -0
- package/ts_web/elements/00group-harness/dees-harness-chat/index.ts +1 -0
- package/ts_web/elements/00group-harness/dees-harness-composer/dees-harness-composer.demo.ts +56 -0
- package/ts_web/elements/00group-harness/dees-harness-composer/dees-harness-composer.ts +514 -0
- package/ts_web/elements/00group-harness/dees-harness-composer/index.ts +1 -0
- package/ts_web/elements/00group-harness/dees-harness-content-blocks/dees-harness-content-blocks.demo.ts +44 -0
- package/ts_web/elements/00group-harness/dees-harness-content-blocks/dees-harness-content-blocks.ts +172 -0
- package/ts_web/elements/00group-harness/dees-harness-content-blocks/index.ts +1 -0
- package/ts_web/elements/00group-harness/dees-harness-message/dees-harness-message.demo.ts +129 -0
- package/ts_web/elements/00group-harness/dees-harness-message/dees-harness-message.ts +498 -0
- package/ts_web/elements/00group-harness/dees-harness-message/index.ts +1 -0
- package/ts_web/elements/00group-harness/dees-harness-message-list/dees-harness-message-list.demo.ts +105 -0
- package/ts_web/elements/00group-harness/dees-harness-message-list/dees-harness-message-list.ts +342 -0
- package/ts_web/elements/00group-harness/dees-harness-message-list/index.ts +1 -0
- package/ts_web/elements/00group-harness/dees-harness-permission-card/dees-harness-permission-card.demo.ts +47 -0
- package/ts_web/elements/00group-harness/dees-harness-permission-card/dees-harness-permission-card.ts +225 -0
- package/ts_web/elements/00group-harness/dees-harness-permission-card/index.ts +1 -0
- package/ts_web/elements/00group-harness/dees-harness-reasoning/dees-harness-reasoning.demo.ts +32 -0
- package/ts_web/elements/00group-harness/dees-harness-reasoning/dees-harness-reasoning.ts +195 -0
- package/ts_web/elements/00group-harness/dees-harness-reasoning/index.ts +1 -0
- package/ts_web/elements/00group-harness/dees-harness-session-list/dees-harness-session-list.demo.ts +59 -0
- package/ts_web/elements/00group-harness/dees-harness-session-list/dees-harness-session-list.ts +222 -0
- package/ts_web/elements/00group-harness/dees-harness-session-list/index.ts +1 -0
- package/ts_web/elements/00group-harness/dees-harness-status/dees-harness-status.demo.ts +35 -0
- package/ts_web/elements/00group-harness/dees-harness-status/dees-harness-status.ts +187 -0
- package/ts_web/elements/00group-harness/dees-harness-status/index.ts +1 -0
- package/ts_web/elements/00group-harness/dees-harness-todos/dees-harness-todos.demo.ts +43 -0
- package/ts_web/elements/00group-harness/dees-harness-todos/dees-harness-todos.ts +206 -0
- package/ts_web/elements/00group-harness/dees-harness-todos/index.ts +1 -0
- package/ts_web/elements/00group-harness/dees-harness-tool-card/dees-harness-tool-card.demo.ts +166 -0
- package/ts_web/elements/00group-harness/dees-harness-tool-card/dees-harness-tool-card.ts +315 -0
- package/ts_web/elements/00group-harness/dees-harness-tool-card/index.ts +2 -0
- package/ts_web/elements/00group-harness/dees-harness-tool-card/renderers.ts +205 -0
- package/ts_web/elements/00group-harness/dees-harness-usage/dees-harness-usage.demo.ts +25 -0
- package/ts_web/elements/00group-harness/dees-harness-usage/dees-harness-usage.ts +96 -0
- package/ts_web/elements/00group-harness/dees-harness-usage/index.ts +1 -0
- package/ts_web/elements/00group-harness/harness.demodata.ts +113 -0
- package/ts_web/elements/00group-harness/harness.helpers.ts +227 -0
- package/ts_web/elements/00group-harness/harness.markdown.ts +151 -0
- package/ts_web/elements/00group-harness/harness.styles.ts +96 -0
- package/ts_web/elements/00group-harness/index.ts +22 -0
- package/ts_web/elements/00group-harness/interfaces.ts +203 -0
- package/ts_web/elements/00group-harness/toolregistry.ts +264 -0
- package/ts_web/elements/00group-input/dees-input-code/dees-input-code.ts +29 -17
- package/ts_web/elements/00group-input/dees-input-datepicker/datepicker-popup.ts +72 -45
- package/ts_web/elements/00group-input/dees-input-datepicker/styles.ts +14 -15
- package/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts +1 -3
- package/ts_web/elements/00group-input/dees-input-tags/dees-input-tags.ts +35 -14
- package/ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.ts +4 -3
- package/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/code.block.ts +9 -88
- package/ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.ts +11 -7
- package/ts_web/elements/00group-layout/dees-chips/dees-chips.ts +1 -1
- package/ts_web/elements/00group-layout/dees-pagination/dees-pagination.ts +26 -11
- package/ts_web/elements/00group-layout/dees-settings/dees-settings.ts +1 -1
- package/ts_web/elements/00group-layout/dees-stepper/dees-stepper.ts +13 -17
- package/ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.ts +5 -6
- package/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts +5 -20
- package/ts_web/elements/00group-overlay/dees-windowlayer/dees-windowlayer.ts +10 -3
- package/ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.ts +1 -1
- package/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts +8 -7
- package/ts_web/elements/00group-workspace/dees-workspace/dees-workspace.ts +1 -1
- package/ts_web/elements/00group-workspace/dees-workspace-filetree/dees-workspace-filetree.ts +2 -3
- package/ts_web/elements/00group-workspace/dees-workspace-markdownoutlet/dees-workspace-markdownoutlet.ts +7 -77
- package/ts_web/elements/00syntax.ts +124 -0
- package/ts_web/elements/00theme.ts +25 -13
- package/ts_web/elements/index.ts +1 -0
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
<!--gitzone element-->
|
|
2
|
+
<!-- made by Task Venture Capital GmbH -->
|
|
3
|
+
<!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
|
|
4
|
+
<html lang="en">
|
|
5
|
+
<head>
|
|
6
|
+
<!--Lets set some basic meta tags-->
|
|
7
|
+
<meta
|
|
8
|
+
name="viewport"
|
|
9
|
+
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"
|
|
10
|
+
/>
|
|
11
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
12
|
+
|
|
13
|
+
<!--Lets load standard fonts-->
|
|
14
|
+
<link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
|
|
15
|
+
<link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
|
|
16
|
+
|
|
17
|
+
<style>
|
|
18
|
+
body {
|
|
19
|
+
margin: 0px;
|
|
20
|
+
background: #222222;
|
|
21
|
+
}
|
|
22
|
+
</style>
|
|
23
|
+
|
|
24
|
+
<script type="module" src="/bundle.js"></script>
|
|
25
|
+
</head>
|
|
26
|
+
<body>
|
|
27
|
+
</body>
|
|
28
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@design.estate/dees-catalog",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.92.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
|
|
6
6
|
"main": "dist_ts_web/index.js",
|
package/readme.hints.md
CHANGED
|
@@ -1107,4 +1107,10 @@ Some components appear in multiple groups via `demoGroups = ['Primary', 'Seconda
|
|
|
1107
1107
|
- The old `demoGroup` property (singular, string) is fully removed
|
|
1108
1108
|
- All 79 components with demos use `demoGroups` (plural, string[])
|
|
1109
1109
|
- `00group-pdf` no longer exists; PDF components are in `00group-media`
|
|
1110
|
-
- `dees-search` and `dees-tooltip` remain standalone (no demos)
|
|
1110
|
+
- `dees-search` and `dees-tooltip` remain standalone (no demos)
|
|
1111
|
+
## Harness group decisions (2026-07)
|
|
1112
|
+
|
|
1113
|
+
- Markdown in `00group-harness` uses `domtools.plugins.smartmarkdown` (GFM, sanitized remark pipeline) — zero new dependencies, same path as dees-speechbubble and dees-workspace-markdown. `HarnessMarkdown` singleton adds an LRU cache (200 entries) and rewrites links to `target="_blank" rel="noopener noreferrer"`. Fenced code gets lazy highlight.js via `DeesServiceLibLoader` after the final (non-streaming) parse only.
|
|
1114
|
+
- Tool cards resolve their kind through `DeesHarnessToolRegistry.default` (open set + `kind` override), so consumers register custom tools without forking components; `server__tool` names auto-classify as MCP with annotation badges.
|
|
1115
|
+
- The syntax palette moved to the shared `ts_web/elements/00syntax.ts` (`syntaxPaletteStyles` + `syntaxScopeStyles`); codebox and harness markdown consume it — don't re-declare `--syntax-*`/hljs scope colors per component.
|
|
1116
|
+
- `dees-dataview-codebox` diff mode: set `codeBefore` (against `codeToDisplay`) or a pre-computed `unifiedDiff` patch; `diffView` = `'inline' | 'split'`. Engine lives dependency-free in `codebox.diff.ts` (LCS + intraline segments + context folding + `toUnifiedDiff`). Tool cards use it for file-write bodies via the `diffBlock` render helper.
|
package/readme.md
CHANGED
|
@@ -64,6 +64,7 @@ For developers working on this library, please refer to the [UI Components Playb
|
|
|
64
64
|
| **Dialogs & Overlays** | [`DeesModal`](#deesmodal), [`DeesContextmenu`](#deescontextmenu), [`DeesSpeechbubble`](#deesspeechbubble), [`DeesWindowlayer`](#deeswindowlayer) |
|
|
65
65
|
| **Navigation** | [`DeesStepper`](#deesstepper), [`DeesProgressbar`](#deesprogressbar) |
|
|
66
66
|
| **Workspace / IDE** | [`DeesWorkspace`](#deesworkspace), [`DeesWorkspaceMonaco`](#deesworkspacemonaco), [`DeesWorkspaceDiffEditor`](#deesworkspacediffeditor), [`DeesWorkspaceFiletree`](#deesworkspacefiletree), [`DeesWorkspaceTerminal`](#deesworkspaceterminal), [`DeesWorkspaceTerminalPreview`](#deesworkspaceterminalpreview), [`DeesWorkspaceMarkdown`](#deesworkspacemarkdown), [`DeesWorkspaceMarkdownoutlet`](#deesworkspacemarkdownoutlet), [`DeesWorkspaceBottombar`](#deesworkspacebottombar) |
|
|
67
|
+
| **Agentic Chat** | [`DeesHarnessChat`](#deesharnesschat), [`DeesHarnessMessageList`](#deesharnessmessagelist), [`DeesHarnessMessage`](#deesharnessmessage), [`DeesHarnessReasoning`](#deesharnessreasoning), [`DeesHarnessToolCard`](#deesharnesstoolcard), [`DeesHarnessContentBlocks`](#deesharnesscontentblocks), [`DeesHarnessPermissionCard`](#deesharnesspermissioncard), [`DeesHarnessComposer`](#deesharnesscomposer), [`DeesHarnessStatus`](#deesharnessstatus), [`DeesHarnessTodos`](#deesharnesstodos), [`DeesHarnessUsage`](#deesharnessusage), [`DeesHarnessSessionList`](#deesharnesssessionlist) |
|
|
67
68
|
| **Theming** | [`DeesTheme`](#deestheme), [`DeesUpdater`](#deesupdater) |
|
|
68
69
|
| **Pre-built Templates** | [`DeesSimpleAppdash`](#deessimpleappdash), [`DeesSimpleLogin`](#deessimplelogin) |
|
|
69
70
|
| **Shopping** | [`DeesShoppingProductcard`](#deesshoppingproductcard) |
|
|
@@ -85,6 +86,8 @@ button.text = 'Click me';
|
|
|
85
86
|
// With options
|
|
86
87
|
<dees-button
|
|
87
88
|
type="accent" // Options: default, accent, destructive, outline, secondary, ghost, link (legacy: normal, highlighted, discreet, big)
|
|
89
|
+
size="sm" // Options: default, sm, lg, icon (square)
|
|
90
|
+
shape="pill" // Options: squircle (default rounded rect), pill (capsule for standalone actions)
|
|
88
91
|
status="pending" // Options: normal, pending, success, error
|
|
89
92
|
disabled={false} // Optional: disables the button
|
|
90
93
|
@click=${handleClick}
|
|
@@ -1126,6 +1129,20 @@ Code display component with syntax highlighting and line numbers.
|
|
|
1126
1129
|
></dees-dataview-codebox>
|
|
1127
1130
|
```
|
|
1128
1131
|
|
|
1132
|
+
**Diff mode** — set `codeBefore` (compared against `codeToDisplay` as the after state) or a pre-computed `unifiedDiff` patch; `diffView` selects `'inline'` or `'split'` (side-by-side) and can force diff mode on its own:
|
|
1133
|
+
|
|
1134
|
+
```typescript
|
|
1135
|
+
<dees-dataview-codebox
|
|
1136
|
+
progLang="typescript"
|
|
1137
|
+
filename="config.ts"
|
|
1138
|
+
diffView="split"
|
|
1139
|
+
.codeBefore=${previousSource}
|
|
1140
|
+
.codeToDisplay=${newSource}
|
|
1141
|
+
></dees-dataview-codebox>
|
|
1142
|
+
```
|
|
1143
|
+
|
|
1144
|
+
Diff rendering includes word-level intraline change highlighting, unchanged-context folding with expandable "N unchanged lines" rows, `+added −removed` stats in the footer, and a "Copy Unified Diff" context-menu action. The copy button yields the after-state text. The dependency-free engine (`computeLineDiff`, `parseUnifiedDiff`, `foldContextRows`, `buildSplitRows`, `diffStats`, `toUnifiedDiff`) is exported for programmatic use.
|
|
1145
|
+
|
|
1129
1146
|
#### `DeesDataviewStatusobject`
|
|
1130
1147
|
Status display component for complex objects with nested status indicators.
|
|
1131
1148
|
|
|
@@ -1676,6 +1693,99 @@ IDE-style bottom status bar for the workspace.
|
|
|
1676
1693
|
|
|
1677
1694
|
---
|
|
1678
1695
|
|
|
1696
|
+
### Agentic Chat Components 🤖
|
|
1697
|
+
|
|
1698
|
+
The `00group-harness` family renders what an agent harness produces — streaming messages, reasoning, tool calls, MCP content, permission prompts — behind one normalized data contract (`IHarnessMessage`, `IHarnessToolCall`, `IHarnessPermissionRequest`, `IHarnessSessionMeta`, `IHarnessStatus`). Consumers adapt their wire format to these interfaces and feed the components; all events are `harness-*` CustomEvents (bubbles + composed).
|
|
1699
|
+
|
|
1700
|
+
#### `DeesHarnessChat`
|
|
1701
|
+
|
|
1702
|
+
The assembled chat: optional toolbar (heading, usage chip, history/new-session buttons), streaming message list, pinned permission queue, status line, and composer.
|
|
1703
|
+
|
|
1704
|
+
```typescript
|
|
1705
|
+
const chat = document.querySelector('dees-harness-chat');
|
|
1706
|
+
chat.messages = adaptedMessages; // IHarnessMessage[]
|
|
1707
|
+
chat.permissions = pendingPermissions; // IHarnessPermissionRequest[]
|
|
1708
|
+
chat.status = { type: 'busy', message: 'Responding…' };
|
|
1709
|
+
chat.modelOptions = ['gpt-5.5', 'o4-mini'];
|
|
1710
|
+
chat.effortOptions = ['high', 'medium', 'low'];
|
|
1711
|
+
|
|
1712
|
+
chat.addEventListener('harness-send', (event) => {
|
|
1713
|
+
const { text, attachments, model, reasoningEffort } = event.detail;
|
|
1714
|
+
});
|
|
1715
|
+
chat.addEventListener('harness-permission-response', (event) => {
|
|
1716
|
+
const { requestId, response, remember } = event.detail; // 'once' | 'always' | 'reject'
|
|
1717
|
+
});
|
|
1718
|
+
|
|
1719
|
+
// streaming fast path — mutates the same message object, re-renders only that element
|
|
1720
|
+
chat.applyDelta({ type: 'text', messageId: 'm1', delta: 'chunk' });
|
|
1721
|
+
chat.applyDelta({ type: 'message-end', messageId: 'm1', usage: { totalTokens: 1200 } });
|
|
1722
|
+
```
|
|
1723
|
+
|
|
1724
|
+
Key props: `messages`, `permissions`, `status`, `usage`, `heading`, `subheading`, `showToolbar`, `busy`, `queuedCount`, `disabled`, `model`/`modelOptions`, `reasoningEffort`/`effortOptions`, `toolRegistry`. Methods: `applyDelta()`, `focusComposer()`, `clearComposer()`, `scrollToBottom()`. Events (also from children, all composed): `harness-send`, `harness-steer`, `harness-abort`, `harness-input`, `harness-attachments-change`, `harness-attachment-error`, `harness-model-change`, `harness-permission-response`, `harness-new-session`, `harness-open-sessions`.
|
|
1725
|
+
|
|
1726
|
+
#### `DeesHarnessMessageList`
|
|
1727
|
+
|
|
1728
|
+
Scrollable streaming-safe log. Keyed repeat by `message.id` keeps DOM identity stable; `applyDelta()` routes updates to the affected message element only. Auto-follows the bottom while pinned; otherwise raises a "Jump to latest" chip instead of yanking the scroll. Props: `messages`, `status`, `autoFollow`, `showRoles`, `showTimestamps`, `emptyTitle`/`emptyText` (+ `slot="empty"`).
|
|
1729
|
+
|
|
1730
|
+
#### `DeesHarnessMessage`
|
|
1731
|
+
|
|
1732
|
+
One message: role accent, markdown (assistant default, `message.markdown` overrides), attachments grid, reasoning parts, streaming cursor, usage/error footer. Markdown renders through `domtools.plugins.smartmarkdown` (GFM, sanitized), throttled to ≥150 ms re-parses while streaming; fenced code is highlighted lazily after the final parse. Streaming methods: `appendTextDelta()`, `appendReasoningDelta()`, `endReasoning()`, `endStream(usage?, error?)`.
|
|
1733
|
+
|
|
1734
|
+
#### `DeesHarnessReasoning`
|
|
1735
|
+
|
|
1736
|
+
"Thinking" disclosure for one `IHarnessReasoningPart`. Auto-opens while streaming (no `endedAt`); the user's expand/collapse choice wins afterwards. Shows duration once finished.
|
|
1737
|
+
|
|
1738
|
+
#### `DeesHarnessToolCard`
|
|
1739
|
+
|
|
1740
|
+
Tool-call card: shared chrome (icon, label, subtitle, status pill, duration, MCP badges) with a per-kind body. Kind resolution goes through `DeesHarnessToolRegistry` (see below); bodies for the seeded kinds — terminal, file-read, file-write (renders a before/after diff via `dees-dataview-codebox` when the input carries previous content), file-delete, dir-list, browser (inline screenshots), http, json, search, subtask, todo, mcp, unknown — live in `renderers.ts`. Long outputs truncate at 6,000 chars with a "Show all" expander. Terminal and error cards open by default.
|
|
1741
|
+
|
|
1742
|
+
```typescript
|
|
1743
|
+
import { DeesHarnessToolRegistry } from '@design.estate/dees-catalog';
|
|
1744
|
+
|
|
1745
|
+
DeesHarnessToolRegistry.default.register({
|
|
1746
|
+
kind: 'deploy',
|
|
1747
|
+
names: ['deploy_service'],
|
|
1748
|
+
label: 'Deploy',
|
|
1749
|
+
icon: 'lucide:Rocket',
|
|
1750
|
+
subtitle: (call) => String((call.input as any)?.service ?? ''),
|
|
1751
|
+
renderBody: (call, helpers) => helpers.keyValues([['service', String((call.input as any)?.service)]]),
|
|
1752
|
+
});
|
|
1753
|
+
```
|
|
1754
|
+
|
|
1755
|
+
`server__tool` names resolve automatically to the MCP kind with server + annotation badges (`readOnlyHint` → success, `destructiveHint` → error, `openWorldHint` → warning). Per-element isolation: assign a forked registry to `.toolRegistry`.
|
|
1756
|
+
|
|
1757
|
+
#### `DeesHarnessContentBlocks`
|
|
1758
|
+
|
|
1759
|
+
Renders MCP `CallToolResult` content structurally: text, base64 images, audio with controls, embedded text resources, downloadable blob resources, and `resource_link` cards.
|
|
1760
|
+
|
|
1761
|
+
#### `DeesHarnessPermissionCard`
|
|
1762
|
+
|
|
1763
|
+
Permission prompt: title, type badge (shell/delete → error tone, write/browser → warning), metadata key/values, Allow Once / Always Allow / Reject, and a "remember" checkbox (`always` implies remember). Emits `harness-permission-response`; disables itself once answered or while `busy`.
|
|
1764
|
+
|
|
1765
|
+
#### `DeesHarnessComposer`
|
|
1766
|
+
|
|
1767
|
+
Prompt input: autogrow textarea, attachment picker/paste/drag-drop with per-file (10 MB) and total (30 MB) limits and MIME allowlist, optional model + reasoning-effort dropdowns, Cmd/Ctrl+Enter to send. Controlled component — the host owns `value` and `attachments`.
|
|
1768
|
+
|
|
1769
|
+
While `busy`, Stop renders as an additional button and Send stays available so hosts can queue messages. With an empty prompt and `queuedCount > 0`, the primary action becomes **Steer now** (`harness-steer` event) to force the agent to continue with the queued messages immediately.
|
|
1770
|
+
|
|
1771
|
+
#### `DeesHarnessTodos`
|
|
1772
|
+
|
|
1773
|
+
Agent task list for `IHarnessTodoItem[]` — completed items dim with a check and strikethrough, the in-progress item leads with a pulsing accent marker, and an optional heading shows `completed/total` progress. Used automatically as the todo tool-card body (`harnessParseTodos` normalizes tool input shapes) and standalone for a "current tasks" sidebar panel fed from the latest `todowrite` call.
|
|
1774
|
+
|
|
1775
|
+
#### `DeesHarnessStatus`
|
|
1776
|
+
|
|
1777
|
+
Idle/busy/error line with animated dots and `aria-live="polite"`. Renders nothing when idle unless `showIdle`.
|
|
1778
|
+
|
|
1779
|
+
#### `DeesHarnessUsage`
|
|
1780
|
+
|
|
1781
|
+
Token usage chip (`in · out · total`, `compact` shows the total only); cache read/write detail in the tooltip.
|
|
1782
|
+
|
|
1783
|
+
#### `DeesHarnessSessionList`
|
|
1784
|
+
|
|
1785
|
+
Searchable conversation list for sidebars or a `DeesModal` (`harness-session-select` on click, `harness-session-open` on double-click/Enter). Sorts by recency; filters over title, preview, and id.
|
|
1786
|
+
|
|
1787
|
+
---
|
|
1788
|
+
|
|
1679
1789
|
### Pre-built Templates
|
|
1680
1790
|
|
|
1681
1791
|
#### `DeesSimpleAppdash`
|
package/readme.playbook.md
CHANGED
|
@@ -432,6 +432,16 @@ private updateBlockContent(blockId: string, content: string) {
|
|
|
432
432
|
}
|
|
433
433
|
```
|
|
434
434
|
|
|
435
|
+
## Streaming Components (harness pattern)
|
|
436
|
+
|
|
437
|
+
Components that render continuously arriving data (agent chat, logs) follow the harness pattern from `00group-harness`:
|
|
438
|
+
|
|
439
|
+
- **Props are the source of truth; deltas are the fast path.** The host owns the array (e.g. `.messages`). Incremental updates go through `applyDelta()`, which mutates the same object instance held in the array and calls `requestUpdate()` on the one affected child element. A later wholesale re-assignment of the array is therefore idempotent — no divergence between streamed and re-set state.
|
|
440
|
+
- **Keyed `repeat` for identity.** List children render via `directives.repeat` keyed by a stable id so streaming never recreates sibling DOM (which would drop scroll position, expansion state, and selection).
|
|
441
|
+
- **Cheap while streaming, rich when done.** While `streaming` is set, text renders as pre-wrap with a cursor; expensive work (markdown parse) is throttled (≥150 ms, token-guarded like the codebox highlight pattern) and syntax highlighting waits for the final parse.
|
|
442
|
+
- **Scroll follow with user override.** Auto-scroll only when the user is already pinned to the bottom (`scrollHeight - scrollTop - clientHeight < threshold`); otherwise show a "jump to latest" chip. Schedule follow-scrolls through a single pending `requestAnimationFrame`, cancelled in `disconnectedCallback`.
|
|
443
|
+
- **Interaction state lives on the child.** Expand/collapse (reasoning, tool cards) is element-local state seeded from data (`expanded ?? isStreaming`), so parent re-renders can't reset what the user opened.
|
|
444
|
+
|
|
435
445
|
## Performance Optimization
|
|
436
446
|
|
|
437
447
|
### DO: Debounce Expensive Operations
|
|
@@ -3,6 +3,6 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export const commitinfo = {
|
|
5
5
|
name: '@design.estate/dees-catalog',
|
|
6
|
-
version: '3.
|
|
6
|
+
version: '3.92.0',
|
|
7
7
|
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
|
|
8
8
|
}
|
|
@@ -193,8 +193,9 @@ export class DeesAppui extends DeesElement {
|
|
|
193
193
|
}
|
|
194
194
|
.maingrid {
|
|
195
195
|
position: absolute;
|
|
196
|
-
top:
|
|
197
|
-
|
|
196
|
+
top: var(--dees-control-height-lg);
|
|
197
|
+
/* appbar (control-height-lg) above, 24px bottombar below */
|
|
198
|
+
height: calc(100% - var(--dees-control-height-lg) - 24px);
|
|
198
199
|
width: 100%;
|
|
199
200
|
display: grid;
|
|
200
201
|
/* grid-template-columns set dynamically in template */
|
|
@@ -204,7 +205,7 @@ export class DeesAppui extends DeesElement {
|
|
|
204
205
|
}
|
|
205
206
|
|
|
206
207
|
:host([bottombar-hidden]) .maingrid {
|
|
207
|
-
height: calc(100% -
|
|
208
|
+
height: calc(100% - var(--dees-control-height-lg));
|
|
208
209
|
}
|
|
209
210
|
|
|
210
211
|
/* Appbar sits above the content grid so its dropdown menus overlay the
|
package/ts_web/elements/00group-appui/dees-appui-profiledropdown/dees-appui-profiledropdown.ts
CHANGED
|
@@ -289,7 +289,7 @@ export class DeesAppuiProfileDropdown extends DeesElement {
|
|
|
289
289
|
|
|
290
290
|
.user-email {
|
|
291
291
|
font-size: 11px;
|
|
292
|
-
color: var(--dees-color-text-
|
|
292
|
+
color: var(--dees-color-text-secondary);
|
|
293
293
|
margin-top: 2px;
|
|
294
294
|
white-space: nowrap;
|
|
295
295
|
overflow: hidden;
|
|
@@ -308,8 +308,8 @@ export class DeesAppuiProfileDropdown extends DeesElement {
|
|
|
308
308
|
padding: 8px 12px;
|
|
309
309
|
cursor: default;
|
|
310
310
|
transition: background var(--dees-transition-fast) var(--dees-ease-standard);
|
|
311
|
-
color: var(--dees-color-text-
|
|
312
|
-
font-size: var(--dees-font-
|
|
311
|
+
color: var(--dees-color-text-primary);
|
|
312
|
+
font-size: var(--dees-font-control-size-sm);
|
|
313
313
|
line-height: 1;
|
|
314
314
|
user-select: none;
|
|
315
315
|
}
|
|
@@ -324,7 +324,7 @@ export class DeesAppuiProfileDropdown extends DeesElement {
|
|
|
324
324
|
|
|
325
325
|
.menu-item dees-icon {
|
|
326
326
|
font-size: 14px;
|
|
327
|
-
|
|
327
|
+
color: var(--dees-color-text-secondary);
|
|
328
328
|
}
|
|
329
329
|
|
|
330
330
|
.menu-item-text {
|
|
@@ -333,9 +333,8 @@ export class DeesAppuiProfileDropdown extends DeesElement {
|
|
|
333
333
|
|
|
334
334
|
.menu-shortcut {
|
|
335
335
|
font-size: 11px;
|
|
336
|
-
color: var(--dees-color-text-
|
|
336
|
+
color: var(--dees-color-text-secondary);
|
|
337
337
|
margin-left: auto;
|
|
338
|
-
opacity: 0.7;
|
|
339
338
|
}
|
|
340
339
|
|
|
341
340
|
.menu-divider {
|
|
@@ -241,7 +241,7 @@ export class DeesAppuiTabs extends DeesElement {
|
|
|
241
241
|
}
|
|
242
242
|
|
|
243
243
|
.tab {
|
|
244
|
-
color: var(--dees-color-text-
|
|
244
|
+
color: var(--dees-color-text-secondary);
|
|
245
245
|
white-space: nowrap;
|
|
246
246
|
cursor: pointer;
|
|
247
247
|
transition: color 0.15s ease;
|
|
@@ -363,17 +363,15 @@ export class DeesAppuiTabs extends DeesElement {
|
|
|
363
363
|
height: 16px;
|
|
364
364
|
border-radius: 4px;
|
|
365
365
|
margin-left: 8px;
|
|
366
|
-
|
|
367
|
-
transition: opacity 0.15s, background 0.15s;
|
|
366
|
+
transition: color 0.15s, background 0.15s;
|
|
368
367
|
color: var(--dees-color-text-muted);
|
|
369
368
|
}
|
|
370
369
|
|
|
371
370
|
.tab:hover .tab-close {
|
|
372
|
-
|
|
371
|
+
color: var(--dees-color-text-secondary);
|
|
373
372
|
}
|
|
374
373
|
|
|
375
374
|
.tab-close:hover {
|
|
376
|
-
opacity: 1;
|
|
377
375
|
background: var(--dees-color-pressed);
|
|
378
376
|
color: var(--dees-color-accent-error);
|
|
379
377
|
}
|
|
@@ -140,6 +140,19 @@ export const demoFunc = () => html`
|
|
|
140
140
|
});
|
|
141
141
|
});
|
|
142
142
|
}}>
|
|
143
|
+
<dees-panel .title=${'2b. Button Shapes'} .subtitle=${'Squircle rect (default) aligns with fields; pill is the capsule for standalone actions'}>
|
|
144
|
+
<div class="button-group">
|
|
145
|
+
<dees-button>Squircle (default)</dees-button>
|
|
146
|
+
<dees-button shape="pill">Pill</dees-button>
|
|
147
|
+
<dees-button shape="pill" type="accent">Pill Accent</dees-button>
|
|
148
|
+
<dees-button shape="pill" size="sm">Pill Small</dees-button>
|
|
149
|
+
<dees-button shape="pill" size="sm" type="ghost">
|
|
150
|
+
<dees-icon icon="lucide:Plus"></dees-icon>
|
|
151
|
+
Pill With Icon
|
|
152
|
+
</dees-button>
|
|
153
|
+
</div>
|
|
154
|
+
</dees-panel>
|
|
155
|
+
|
|
143
156
|
<dees-panel .title=${'3. Buttons with Icons'} .subtitle=${'Combining icons with text for enhanced visual communication'}>
|
|
144
157
|
<div class="icon-row">
|
|
145
158
|
<dees-button>
|
|
@@ -31,7 +31,7 @@ export class DeesButton extends DeesElement {
|
|
|
31
31
|
return true;
|
|
32
32
|
}
|
|
33
33
|
})
|
|
34
|
-
accessor text
|
|
34
|
+
accessor text: string = '';
|
|
35
35
|
|
|
36
36
|
@property()
|
|
37
37
|
accessor eventDetailData!: string;
|
|
@@ -62,6 +62,16 @@ export class DeesButton extends DeesElement {
|
|
|
62
62
|
})
|
|
63
63
|
accessor status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
|
|
64
64
|
|
|
65
|
+
/**
|
|
66
|
+
* Corner treatment. 'squircle' (default) is the standard rounded rect for
|
|
67
|
+
* controls that align with fields and other rectangular siblings; 'pill'
|
|
68
|
+
* is the capsule for standalone/floating actions (chips, toolbar pills).
|
|
69
|
+
*/
|
|
70
|
+
@property({
|
|
71
|
+
type: String
|
|
72
|
+
})
|
|
73
|
+
accessor shape: 'squircle' | 'pill' = 'squircle';
|
|
74
|
+
|
|
65
75
|
@property({
|
|
66
76
|
type: Boolean,
|
|
67
77
|
reflect: true
|
|
@@ -95,20 +105,20 @@ export class DeesButton extends DeesElement {
|
|
|
95
105
|
box-sizing: border-box;
|
|
96
106
|
font-family: inherit;
|
|
97
107
|
/* status faces: solid in bright mode, tinted in dark (gobright overrides below) */
|
|
98
|
-
--button-pending-bg:
|
|
99
|
-
--button-pending-fg:
|
|
100
|
-
--button-success-bg:
|
|
101
|
-
--button-success-fg:
|
|
102
|
-
--button-error-bg:
|
|
103
|
-
--button-error-fg:
|
|
108
|
+
--button-pending-bg: color-mix(in srgb, var(--dees-color-accent-primary) 20%, transparent);
|
|
109
|
+
--button-pending-fg: var(--dees-color-accent-primary);
|
|
110
|
+
--button-success-bg: color-mix(in srgb, var(--dees-color-accent-success) 20%, transparent);
|
|
111
|
+
--button-success-fg: var(--dees-color-accent-success);
|
|
112
|
+
--button-error-bg: color-mix(in srgb, var(--dees-color-accent-error) 20%, transparent);
|
|
113
|
+
--button-error-fg: var(--dees-color-accent-error);
|
|
104
114
|
}
|
|
105
115
|
:host([gobright]) {
|
|
106
|
-
--button-pending-bg:
|
|
107
|
-
--button-pending-fg:
|
|
108
|
-
--button-success-bg:
|
|
109
|
-
--button-success-fg:
|
|
110
|
-
--button-error-bg:
|
|
111
|
-
--button-error-fg:
|
|
116
|
+
--button-pending-bg: var(--dees-color-accent-primary);
|
|
117
|
+
--button-pending-fg: var(--dees-color-on-accent);
|
|
118
|
+
--button-success-bg: var(--dees-color-accent-success);
|
|
119
|
+
--button-success-fg: var(--dees-color-on-accent);
|
|
120
|
+
--button-error-bg: var(--dees-color-accent-error);
|
|
121
|
+
--button-error-fg: var(--dees-color-on-accent);
|
|
112
122
|
}
|
|
113
123
|
:host([hidden]) {
|
|
114
124
|
display: none;
|
|
@@ -151,12 +161,21 @@ export class DeesButton extends DeesElement {
|
|
|
151
161
|
gap: var(--dees-spacing-sm);
|
|
152
162
|
}
|
|
153
163
|
|
|
164
|
+
/* Shape variants. The default squircle rect aligns with fields and other
|
|
165
|
+
rectangular siblings; pill is the capsule for standalone/floating
|
|
166
|
+
actions. Capsules keep corner-shape round — superellipse smoothing
|
|
167
|
+
would distort the semicircular end caps. */
|
|
168
|
+
.button.shape-pill {
|
|
169
|
+
border-radius: var(--dees-radius-full);
|
|
170
|
+
corner-shape: round;
|
|
171
|
+
}
|
|
172
|
+
|
|
154
173
|
/* Size variants.
|
|
155
|
-
The default sits at the standard control height (lg
|
|
156
|
-
lines up with text fields, dropdowns and the segmented control
|
|
157
|
-
placed alongside them (inline controls share the same height).
|
|
158
|
-
sm (
|
|
159
|
-
CTA. */
|
|
174
|
+
The default sits at the standard control height (control-height-lg) so
|
|
175
|
+
a button lines up with text fields, dropdowns and the segmented control
|
|
176
|
+
when placed alongside them (inline controls share the same height).
|
|
177
|
+
sm (control-height-sm) is the compact toolbar/table size; lg
|
|
178
|
+
(control-height-xl) is the prominent CTA. */
|
|
160
179
|
.button.size-default {
|
|
161
180
|
height: var(--dees-control-height-lg);
|
|
162
181
|
padding: 0 var(--dees-spacing-lg);
|
|
@@ -460,12 +479,13 @@ export class DeesButton extends DeesElement {
|
|
|
460
479
|
? html`<dees-icon .icon=${this.icon}></dees-icon>`
|
|
461
480
|
: '';
|
|
462
481
|
|
|
463
|
-
//
|
|
464
|
-
|
|
482
|
+
// No placeholder label: a button without text renders icon-only.
|
|
483
|
+
// size-icon additionally suppresses text to keep its square geometry.
|
|
484
|
+
const showText = Boolean(this.text) && !(actualSize === 'icon' && this.icon);
|
|
465
485
|
|
|
466
486
|
return html`
|
|
467
487
|
<div
|
|
468
|
-
class="button ${this.isHidden ? 'hidden' : ''} ${actualType} size-${actualSize} ${this.status} ${this.disabled
|
|
488
|
+
class="button ${this.isHidden ? 'hidden' : ''} ${actualType} size-${actualSize} shape-${this.shape} ${this.status} ${this.disabled
|
|
469
489
|
? 'disabled'
|
|
470
490
|
: ''}"
|
|
471
491
|
@click="${this.dispatchClick}"
|
|
@@ -478,7 +498,7 @@ export class DeesButton extends DeesElement {
|
|
|
478
498
|
></dees-spinner>
|
|
479
499
|
`}
|
|
480
500
|
${leftIcon}
|
|
481
|
-
${
|
|
501
|
+
${showText ? html`<div class="textbox">${this.text}</div>` : ''}
|
|
482
502
|
${rightIcon}
|
|
483
503
|
</div>
|
|
484
504
|
`;
|