diff --git a/changelog.md b/changelog.md
index b181acc..f02120a 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,13 @@
# Changelog
+## 2025-12-29 - 3.6.0 - feat(dees-appui)
+add visibility toggles for main/secondary menus and ability to show/hide content tabs; expose corresponding setters and appconfig entries
+
+- ts_web/elements/00group-appui/dees-appui-base: added boolean properties mainmenuVisible, secondarymenuVisible, maincontentTabsVisible; render main and secondary menus conditionally; pass showTabs to dees-appui-maincontent; added setter methods: setMainMenuVisible, setSecondaryMenuCollapsed, setSecondaryMenuVisible, setContentTabsVisible.
+- ts_web/elements/00group-appui/dees-appui-maincontent: added showTabs property, support for a notabs attribute via styles, updated() and firstUpdated() to apply notabs state so tabs can be hidden/shown dynamically.
+- ts_web/elements/interfaces/appconfig.ts: expanded appconfig interface to include setMainMenuVisible, setSecondaryMenuCollapsed, setSecondaryMenuVisible, setContentTabsVisible so host app can control visibility programmatically.
+- No breaking changes: defaults preserve existing behavior (menus and tabs remain visible by default).
+
## 2025-12-29 - 3.5.1 - fix(dees-appui-view)
remove DeesAppuiView component, its demo, documentation snippet, and related exports
diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index e1a6baf..22ebdc5 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.5.1',
+ version: '3.6.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-appui/dees-appui-base/dees-appui-base.ts b/ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.ts
index 18a1f86..78e8507 100644
--- a/ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.ts
+++ b/ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.ts
@@ -110,6 +110,16 @@ export class DeesAppuiBase extends DeesElement {
@property({ type: Boolean })
accessor secondarymenuCollapsed: boolean = false;
+ // Visibility states
+ @property({ type: Boolean })
+ accessor mainmenuVisible: boolean = true;
+
+ @property({ type: Boolean })
+ accessor secondarymenuVisible: boolean = true;
+
+ @property({ type: Boolean })
+ accessor maincontentTabsVisible: boolean = true;
+
// Properties for maincontent
@property({ type: Array })
accessor maincontentTabs: interfaces.IMenuItem[] = [];
@@ -213,28 +223,33 @@ export class DeesAppuiBase extends DeesElement {
@profile-menu-select=${(e: CustomEvent) => this.handleAppbarProfileMenuSelect(e)}
>
-
this.handleMainmenuTabSelect(e)}
- @collapse-change=${(e: CustomEvent) => this.handleMainmenuCollapseChange(e)}
- >
-
this.handleSecondarymenuItemSelect(e)}
- @collapse-change=${(e: CustomEvent) => this.handleSecondarymenuCollapseChange(e)}
- >
+ ${this.mainmenuVisible ? html`
+
this.handleMainmenuTabSelect(e)}
+ @collapse-change=${(e: CustomEvent) => this.handleMainmenuCollapseChange(e)}
+ >
+ ` : ''}
+ ${this.secondarymenuVisible ? html`
+
this.handleSecondarymenuItemSelect(e)}
+ @collapse-change=${(e: CustomEvent) => this.handleSecondarymenuCollapseChange(e)}
+ >
+ ` : ''}
this.handleContentTabSelect(e)}
>
@@ -425,6 +440,34 @@ export class DeesAppuiBase extends DeesElement {
this.mainmenuCollapsed = collapsed;
}
+ /**
+ * Set main menu visibility
+ */
+ public setMainMenuVisible(visible: boolean): void {
+ this.mainmenuVisible = visible;
+ }
+
+ /**
+ * Set secondary menu collapsed state
+ */
+ public setSecondaryMenuCollapsed(collapsed: boolean): void {
+ this.secondarymenuCollapsed = collapsed;
+ }
+
+ /**
+ * Set secondary menu visibility
+ */
+ public setSecondaryMenuVisible(visible: boolean): void {
+ this.secondarymenuVisible = visible;
+ }
+
+ /**
+ * Set content tabs visibility
+ */
+ public setContentTabsVisible(visible: boolean): void {
+ this.maincontentTabsVisible = visible;
+ }
+
/**
* Set a badge on a main menu item
*/
diff --git a/ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts b/ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts
index a9d76a7..77a653a 100644
--- a/ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts
+++ b/ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts
@@ -43,6 +43,9 @@ export class DeesAppuiMaincontent extends DeesElement {
@property({ type: Object })
accessor selectedTab: interfaces.IMenuItem | null = null;
+ @property({ type: Boolean })
+ accessor showTabs: boolean = true;
+
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
@@ -78,6 +81,14 @@ export class DeesAppuiMaincontent extends DeesElement {
bottom: 0;
overflow: auto;
}
+
+ :host([notabs]) .topbar {
+ display: none;
+ }
+
+ :host([notabs]) .content-area {
+ top: 0;
+ }
`,
];
@@ -112,8 +123,23 @@ export class DeesAppuiMaincontent extends DeesElement {
}));
}
+ updated(changedProperties: Map) {
+ super.updated(changedProperties);
+ if (changedProperties.has('showTabs')) {
+ if (this.showTabs) {
+ this.removeAttribute('notabs');
+ } else {
+ this.setAttribute('notabs', '');
+ }
+ }
+ }
+
async firstUpdated(_changedProperties: Map) {
await super.firstUpdated(_changedProperties);
+ // Apply initial notabs state
+ if (!this.showTabs) {
+ this.setAttribute('notabs', '');
+ }
// Tab selection is now handled by the dees-appui-tabs component
// But we need to ensure the tabs component is ready
const tabsComponent = this.shadowRoot.querySelector('dees-appui-tabs') as DeesAppuiTabs;
diff --git a/ts_web/elements/interfaces/appconfig.ts b/ts_web/elements/interfaces/appconfig.ts
index de336f5..05bea79 100644
--- a/ts_web/elements/interfaces/appconfig.ts
+++ b/ts_web/elements/interfaces/appconfig.ts
@@ -18,6 +18,10 @@ export type TDeesAppuiBase = HTMLElement & {
removeMainMenuItem: (groupName: string, tabKey: string) => void;
setMainMenuSelection: (tabKey: string) => void;
setMainMenuCollapsed: (collapsed: boolean) => void;
+ setMainMenuVisible: (visible: boolean) => void;
+ setSecondaryMenuCollapsed: (collapsed: boolean) => void;
+ setSecondaryMenuVisible: (visible: boolean) => void;
+ setContentTabsVisible: (visible: boolean) => void;
setMainMenuBadge: (tabKey: string, badge: string | number) => void;
clearMainMenuBadge: (tabKey: string) => void;
setSecondaryMenu: (config: { heading?: string; groups: IMenuGroup[] }) => void;