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

feat(components): add large set of new UI components and demos, reorganize groups, and bump a few dependencies

Browse Source
This commit is contained in:
Jürgen Kunz
2026-01-27 10:57:42 +00:00
parent 8158b791c7
commit 162688cdb5
218 changed files with 5223 additions and 458 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.demo.ts
View File

@@ -1,6 +1,6 @@
import { html, css, cssManager } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import '../../dees-panel/dees-panel.js';
import '../../00group-layout/dees-panel/dees-panel.js';
import type { DeesInputCheckbox } from '../dees-input-checkbox/dees-input-checkbox.js';
import '../../00group-button/dees-button/dees-button.js';

2
ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.ts
View File

@@ -21,7 +21,7 @@ declare global {
export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
// STATIC
public static demo = demoFunc;
public static demoGroup = 'Input';
public static demoGroups = ['Input'];
// INSTANCE

8
ts_web/elements/00group-input/dees-input-code/dees-input-code.ts
View File

@@ -9,9 +9,9 @@ import {
state,
} from '@design.estate/dees-element';
import { themeDefaultStyles } from '../../00theme.js';
import { DeesModal } from '../../dees-modal/dees-modal.js';
import '../../dees-icon/dees-icon.js';
import '../../dees-label/dees-label.js';
import { DeesModal } from '../../00group-overlay/dees-modal/dees-modal.js';
import '../../00group-utility/dees-icon/dees-icon.js';
import '../../00group-layout/dees-label/dees-label.js';
import '../../00group-workspace/dees-workspace-monaco/dees-workspace-monaco.js';
import { DeesWorkspaceMonaco } from '../../00group-workspace/dees-workspace-monaco/dees-workspace-monaco.js';
@@ -54,7 +54,7 @@ export class DeesInputCode extends DeesInputBase<string> {
.value=${'const greeting: string = "Hello World";\nconsole.log(greeting);'}
></dees-input-code>
`;
public static demoGroup = 'Input';
public static demoGroups = ['Input', 'Workspace'];
// INSTANCE
@property({ type: String })

6
ts_web/elements/00group-input/dees-input-datepicker/component.ts
View File

@@ -9,8 +9,8 @@ import { demoFunc } from './demo.js';
import { datepickerStyles } from './styles.js';
import { renderDatepicker } from './template.js';
import type { IDateEvent } from './types.js';
import '../../dees-icon/dees-icon.js';
import '../../dees-label/dees-label.js';
import '../../00group-utility/dees-icon/dees-icon.js';
import '../../00group-layout/dees-label/dees-label.js';
declare global {
@@ -22,7 +22,7 @@ declare global {
@customElement('dees-input-datepicker')
export class DeesInputDatepicker extends DeesInputBase<DeesInputDatepicker> {
public static demo = demoFunc;
public static demoGroup = 'Input';
public static demoGroups = ['Input'];
@property({ type: String })
accessor value: string = '';

2
ts_web/elements/00group-input/dees-input-datepicker/demo.ts
View File

@@ -1,6 +1,6 @@
import { html, css } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import '../../dees-panel/dees-panel.js';
import '../../00group-layout/dees-panel/dees-panel.js';
import './component.js';
import type { DeesInputDatepicker } from './component.js';

2
ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts
View File

@@ -1,6 +1,6 @@
import { html, css } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import '../../dees-panel/dees-panel.js';
import '../../00group-layout/dees-panel/dees-panel.js';
import '../../00group-form/dees-form/dees-form.js';
import '../../00group-form/dees-form-submit/dees-form-submit.js';

2
ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.ts
View File

@@ -22,7 +22,7 @@ declare global {
@customElement('dees-input-dropdown')
export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
public static demo = demoFunc;
public static demoGroup = 'Input';
public static demoGroups = ['Input'];
// INSTANCE

6
ts_web/elements/00group-input/dees-input-fileupload/component.ts
View File

@@ -1,8 +1,8 @@
import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
import { demoFunc } from './demo.js';
import { fileuploadStyles } from './styles.js';
import '../../dees-icon/dees-icon.js';
import '../../dees-label/dees-label.js';
import '../../00group-utility/dees-icon/dees-icon.js';
import '../../00group-layout/dees-label/dees-label.js';
import {
customElement,
@@ -21,7 +21,7 @@ declare global {
@customElement('dees-input-fileupload')
export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
public static demo = demoFunc;
public static demoGroup = 'Input';
public static demoGroups = ['Input'];
@property({ attribute: false })
accessor value: File[] = [];

2
ts_web/elements/00group-input/dees-input-fileupload/demo.ts
View File

@@ -1,6 +1,6 @@
import { css, cssManager, html } from '@design.estate/dees-element';
import './component.js';
import '../../dees-panel/dees-panel.js';
import '../../00group-layout/dees-panel/dees-panel.js';
export const demoFunc = () => html`
<dees-demowrapper>

2
ts_web/elements/00group-input/dees-input-iban/dees-input-iban.ts
View File

@@ -17,7 +17,7 @@ import { themeDefaultStyles } from '../../00theme.js';
export class DeesInputIban extends DeesInputBase<DeesInputIban> {
// STATIC
public static demo = demoFunc;
public static demoGroup = 'Input';
public static demoGroups = ['Input'];
// INSTANCE
@state()

2
ts_web/elements/00group-input/dees-input-list/dees-input-list.demo.ts
View File

@@ -1,6 +1,6 @@
import { html, css } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import '../../dees-panel/dees-panel.js';
import '../../00group-layout/dees-panel/dees-panel.js';
import '../../00group-form/dees-form/dees-form.js';
import '../dees-input-text/dees-input-text.js';
import '../../00group-form/dees-form-submit/dees-form-submit.js';

4
ts_web/elements/00group-input/dees-input-list/dees-input-list.ts
View File

@@ -8,7 +8,7 @@ import {
type TemplateResult,
} from '@design.estate/dees-element';
import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
import '../../dees-icon/dees-icon.js';
import '../../00group-utility/dees-icon/dees-icon.js';
import '../../00group-button/dees-button/dees-button.js';
import { demoFunc } from './dees-input-list.demo.js';
import { themeDefaultStyles } from '../../00theme.js';
@@ -23,7 +23,7 @@ declare global {
export class DeesInputList extends DeesInputBase<DeesInputList> {
// STATIC
public static demo = demoFunc;
public static demoGroup = 'Input';
public static demoGroups = ['Input'];
// INSTANCE
@property({ type: Array })

2
ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.ts
View File

@@ -22,7 +22,7 @@ declare global {
@customElement('dees-input-multitoggle')
export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
public static demo = demoFunc;
public static demoGroup = 'Input';
public static demoGroups = ['Input'];
@property()

2
ts_web/elements/00group-input/dees-input-phone/dees-input-phone.ts
View File

@@ -22,7 +22,7 @@ declare global {
export class DeesInputPhone extends DeesInputBase<DeesInputPhone> {
// STATIC
public static demo = demoFunc;
public static demoGroup = 'Input';
public static demoGroups = ['Input'];
// INSTANCE
@state()

2
ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.ts
View File

@@ -1,5 +1,5 @@
import { html, css, cssManager } from '@design.estate/dees-element';
import '../../dees-shopping-productcard/dees-shopping-productcard.js';
import '../../00group-simple/dees-shopping-productcard/dees-shopping-productcard.js';
export const demoFunc = () => html`
<dees-demowrapper>

2
ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.ts
View File

@@ -13,7 +13,7 @@ declare global {
@customElement('dees-input-quantityselector')
export class DeesInputQuantitySelector extends DeesInputBase<DeesInputQuantitySelector> {
public static demo = demoFunc;
public static demoGroup = 'Input';
public static demoGroups = ['Input'];
// INSTANCE

2
ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.ts
View File

@@ -1,6 +1,6 @@
import { html, css } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import '../../dees-panel/dees-panel.js';
import '../../00group-layout/dees-panel/dees-panel.js';
export const demoFunc = () => html`
<dees-demowrapper>

2
ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.ts
View File

@@ -21,7 +21,7 @@ type RadioOption = string | { option: string; key: string; payload?: any };
@customElement('dees-input-radiogroup')
export class DeesInputRadiogroup extends DeesInputBase<string | object> {
public static demo = demoFunc;
public static demoGroup = 'Input';
public static demoGroups = ['Input'];
// INSTANCE

4
ts_web/elements/00group-input/dees-input-richtext/component.ts
View File

@@ -3,7 +3,7 @@ import { demoFunc } from './demo.js';
import { richtextStyles } from './styles.js';
import { renderRichtext } from './template.js';
import type { IToolbarButton } from './types.js';
import '../../dees-icon/dees-icon.js';
import '../../00group-utility/dees-icon/dees-icon.js';
import {
customElement,
@@ -28,7 +28,7 @@ declare global {
@customElement('dees-input-richtext')
export class DeesInputRichtext extends DeesInputBase<string> {
public static demo = demoFunc;
public static demoGroup = 'Input';
public static demoGroups = ['Input'];
// INSTANCE
@property({

2
ts_web/elements/00group-input/dees-input-richtext/demo.ts
View File

@@ -1,7 +1,7 @@
import { html, css } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import './component.js';
import '../../dees-panel/dees-panel.js';
import '../../00group-layout/dees-panel/dees-panel.js';
export const demoFunc = () => html`
<dees-demowrapper>

2
ts_web/elements/00group-input/dees-input-tags/dees-input-tags.demo.ts
View File

@@ -1,6 +1,6 @@
import { html, css } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import '../../dees-panel/dees-panel.js';
import '../../00group-layout/dees-panel/dees-panel.js';
export const demoFunc = () => html`
<dees-demowrapper>

4
ts_web/elements/00group-input/dees-input-tags/dees-input-tags.ts
View File

@@ -8,7 +8,7 @@ import {
type TemplateResult,
} from '@design.estate/dees-element';
import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
import '../../dees-icon/dees-icon.js';
import '../../00group-utility/dees-icon/dees-icon.js';
import { demoFunc } from './dees-input-tags.demo.js';
import { themeDefaultStyles } from '../../00theme.js';
@@ -22,7 +22,7 @@ declare global {
export class DeesInputTags extends DeesInputBase<DeesInputTags> {
// STATIC
public static demo = demoFunc;
public static demoGroup = 'Input';
public static demoGroups = ['Input'];
// INSTANCE
@property({ type: Array })

2
ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts
View File

@@ -1,6 +1,6 @@
import { html, css, cssManager } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import '../../dees-panel/dees-panel.js';
import '../../00group-layout/dees-panel/dees-panel.js';
import type { DeesInputText } from '../dees-input-text/dees-input-text.js';
export const demoFunc = () => html`

2
ts_web/elements/00group-input/dees-input-text/dees-input-text.ts
View File

@@ -22,7 +22,7 @@ declare global {
@customElement('dees-input-text')
export class DeesInputText extends DeesInputBase {
public static demo = demoFunc;
public static demoGroup = 'Input';
public static demoGroups = ['Input'];
// INSTANCE
@property({

2
ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts
View File

@@ -1,6 +1,6 @@
import { html, css, cssManager } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import '../../dees-panel/dees-panel.js';
import '../../00group-layout/dees-panel/dees-panel.js';
import type { DeesInputToggle } from './dees-input-toggle.js';
export const demoFunc = () => html`

2
ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.ts
View File

@@ -22,7 +22,7 @@ declare global {
export class DeesInputToggle extends DeesInputBase<DeesInputToggle> {
// STATIC
public static demo = demoFunc;
public static demoGroup = 'Input';
public static demoGroups = ['Input'];
// INSTANCE

2
ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.ts
View File

@@ -16,7 +16,7 @@ import { themeDefaultStyles } from '../../00theme.js';
@customElement('dees-input-typelist')
export class DeesInputTypelist extends DeesInputBase<DeesInputTypelist> {
public static demo = demoFunc;
public static demoGroup = 'Input';
public static demoGroups = ['Input'];
// INSTANCE

2
ts_web/elements/00group-input/dees-input-wysiwyg.demo.ts
View File

@@ -1,6 +1,6 @@
import { html, css, type TemplateResult } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import '../dees-panel/dees-panel.js';
import '../00group-layout/dees-panel/dees-panel.js';
import type { DeesInputWysiwyg } from './dees-input-wysiwyg/dees-input-wysiwyg.js';
import type { IBlock } from './dees-input-wysiwyg/wysiwyg.types.js';

4
ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.ts
View File

@@ -1,6 +1,6 @@
import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
import { demoFunc } from '../dees-input-wysiwyg.demo.js';
import { DeesModal } from '../../dees-modal/dees-modal.js';
import { DeesModal } from '../../00group-overlay/dees-modal/dees-modal.js';
import {
customElement,
@@ -39,7 +39,7 @@ declare global {
@customElement('dees-input-wysiwyg')
export class DeesInputWysiwyg extends DeesInputBase<string> {
public static demo = demoFunc;
public static demoGroup = 'Input';
public static demoGroups = ['Input', 'Workspace'];
@property({ type: String })
accessor value: string = '';

2
ts_web/elements/00group-input/dees-input-wysiwyg/dees-slash-menu.ts
View File

@@ -8,7 +8,7 @@ import {
state,
} from '@design.estate/dees-element';
import { zIndexRegistry } from '../../00zindex.js';
import '../../dees-icon/dees-icon.js';
import '../../00group-utility/dees-icon/dees-icon.js';
import { type ISlashMenuItem } from './wysiwyg.types.js';
import { WysiwygShortcuts } from './wysiwyg.shortcuts.js';

2
ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.ts
View File

@@ -14,7 +14,7 @@ import { WysiwygSelection } from './wysiwyg.selection.js';
import { BlockRegistry, type IBlockEventHandlers } from './blocks/index.js';
import './wysiwyg.blockregistration.js';
import { WysiwygShortcuts } from './wysiwyg.shortcuts.js';
import '../../dees-contextmenu/dees-contextmenu.js';
import '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
import { themeDefaultStyles } from '../../00theme.js';
declare global {

2
ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.modalmanager.ts
View File

@@ -1,5 +1,5 @@
import { html, type TemplateResult, cssManager } from '@design.estate/dees-element';
import { DeesModal } from '../../dees-modal/dees-modal.js';
import { DeesModal } from '../../00group-overlay/dees-modal/dees-modal.js';
import { type IBlock } from './wysiwyg.types.js';
import { WysiwygShortcuts } from './wysiwyg.shortcuts.js';
import { PROGRAMMING_LANGUAGES } from './wysiwyg.constants.js';

2
ts_web/elements/00group-input/profilepicture/dees-input-profilepicture.demo.ts
View File

@@ -1,6 +1,6 @@
import { html, css } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import '../../dees-panel/dees-panel.js';
import '../../00group-layout/dees-panel/dees-panel.js';
import './dees-input-profilepicture.js';
import type { DeesInputProfilePicture } from './dees-input-profilepicture.js';

6
ts_web/elements/00group-input/profilepicture/dees-input-profilepicture.ts
View File

@@ -8,8 +8,8 @@ import {
type TemplateResult,
} from '@design.estate/dees-element';
import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
import '../../dees-icon/dees-icon.js';
import '../../dees-label/dees-label.js';
import '../../00group-utility/dees-icon/dees-icon.js';
import '../../00group-layout/dees-label/dees-label.js';
import { ProfilePictureModal } from './profilepicture.modal.js';
import { demoFunc } from './dees-input-profilepicture.demo.js';
import { themeDefaultStyles } from '../../00theme.js';
@@ -25,7 +25,7 @@ export type ProfileShape = 'square' | 'round';
@customElement('dees-input-profilepicture')
export class DeesInputProfilePicture extends DeesInputBase<DeesInputProfilePicture> {
public static demo = demoFunc;
public static demoGroup = 'Input';
public static demoGroups = ['Input'];
@property({ type: String })
accessor value: string = ''; // Base64 encoded image or URL

6
ts_web/elements/00group-input/profilepicture/profilepicture.modal.ts
View File

@@ -11,10 +11,10 @@ import {
import * as colors from '../../00colors.js';
import { cssGeistFontFamily } from '../../00fonts.js';
import { zIndexRegistry } from '../../00zindex.js';
import '../../dees-icon/dees-icon.js';
import '../../00group-utility/dees-icon/dees-icon.js';
import '../../00group-button/dees-button/dees-button.js';
import '../../dees-windowlayer/dees-windowlayer.js';
import { DeesWindowLayer } from '../../dees-windowlayer/dees-windowlayer.js';
import '../../00group-overlay/dees-windowlayer/dees-windowlayer.js';
import { DeesWindowLayer } from '../../00group-overlay/dees-windowlayer/dees-windowlayer.js';
import { ImageCropper } from './profilepicture.cropper.js';
import type { ProfileShape } from './dees-input-profilepicture.js';
import { themeDefaultStyles } from '../../00theme.js';