- itemModel.type === "actionable"
- ? renderMapping.actionable(
- itemModel as any, // THIS IS A WA
- actionListRenderState,
- disabled,
- nested,
- nestedExpandable
- )
- : renderMapping[itemModel.type](
- itemModel as any, // THIS IS A WA
- actionListRenderState
- );
+ nested?: boolean
+) => {
+ if (itemModel.type === "separator") {
+ return renderMapping.separator(itemModel as any, actionListRenderState);
+ }
+
+ return renderMapping.actionable(
+ itemModel as any, // THIS IS A WA
+ actionListRenderState,
+ disabled,
+ nested
+ );
+};
const FIRST_ITEM_GREATER_THAN_SECOND = -1;
const SECOND_ITEM_GREATER_THAN_FIRST = 0;
@@ -713,7 +702,7 @@ export class ChActionListRender {
const itemInfo = this.#getItemOrGroupInfo(actionListItemOrGroup.id);
this.#checkIfMustExpandCollapseGroup(itemInfo);
- if (itemInfo.type === "group" && !itemInfo.expandable) {
+ if (!itemInfo.expandable) {
return;
}
this.itemClick.emit(this.#flattenedModel.get(itemInfo.id));
@@ -723,11 +712,7 @@ export class ChActionListRender {
itemInfo: ActionListItemActionable | ActionListItemGroup
) => {
// Toggle the expanded/collapsed in the group on click
- if (
- itemInfo.type === "group" &&
- itemInfo.expandable &&
- !itemInfo.disabled
- ) {
+ if (itemInfo.expandable && !itemInfo.disabled) {
itemInfo.expanded = !itemInfo.expanded;
forceUpdate(this);
}
diff --git a/src/components/action-list/internal/action-list-group/action-list-group.scss b/src/components/action-list/internal/action-list-group/action-list-group.scss
deleted file mode 100644
index b17944de..00000000
--- a/src/components/action-list/internal/action-list-group/action-list-group.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-@import "../../../../common/base";
-@import "../../../../common/icons";
-
-@include button-reset();
-@include box-sizing();
-
-:host,
-.group {
- display: grid;
- grid-template-rows: min-content;
-}
-
-.action {
- &::before {
- content: "";
- inline-size: var(--ch-action-list-group__expandable-button-size);
- block-size: var(--ch-action-list-group__expandable-button-size);
- background-color: currentColor;
- -webkit-mask: no-repeat center /
- var(--ch-action-list-group__expandable-button-image-size) $expandable-icon;
- }
-
- &--collapsed::before {
- transform: rotate(-90deg); // TODO: Add RTL support
- }
-}
-
-// - - - - - - - - - - - - - - - -
-// Expandable content
-// - - - - - - - - - - - - - - - -
-.expandable {
- display: grid;
- grid-auto-rows: min-content;
- position: relative;
- padding: 0;
- margin: 0;
-
- &--lazy-loaded {
- content-visibility: auto;
- contain-intrinsic-size: auto 100px;
- }
-}
-
-.expandable--collapsed {
- display: none;
- overflow: hidden;
-}
diff --git a/src/components/action-list/internal/action-list-group/action-list-group.tsx b/src/components/action-list/internal/action-list-group/action-list-group.tsx
deleted file mode 100644
index 977deec4..00000000
--- a/src/components/action-list/internal/action-list-group/action-list-group.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-import {
- Component,
- Element,
- Event,
- EventEmitter,
- Host,
- Method,
- Prop,
- h
-} from "@stencil/core";
-import { tokenMap } from "../../../../common/utils";
-import {
- ACTION_LIST_GROUP_EXPORT_PARTS,
- ACTION_LIST_GROUP_PARTS_DICTIONARY,
- ACTION_LIST_PARTS_DICTIONARY
-} from "../../../../common/reserved-names";
-
-const EXPANDABLE_ID = "expandable";
-
-@Component({
- tag: "ch-action-list-group",
- styleUrl: "action-list-group.scss",
- shadow: { delegatesFocus: true }
-})
-export class ChActionListGroup {
- #buttonRef: HTMLButtonElement;
-
- @Element() el: HTMLChActionListGroupElement;
-
- /**
- * This attributes specifies the caption of the control
- */
- @Prop() readonly caption: string;
-
- /**
- * This attribute lets you specify if the element is disabled.
- * If disabled, it will not fire any user interaction related event
- * (for example, click event).
- */
- @Prop({ reflect: true }) readonly disabled: boolean = false;
-
- /**
- * This attribute lets you specify when items are being lazy loaded in the
- * control.
- */
- @Prop({ mutable: true }) downloading = false;
-
- /**
- * If the item has a sub-tree, this attribute determines if the subtree is
- * displayed.
- */
- @Prop() readonly expandable?: boolean;
-
- /**
- * If the item has a sub-tree, this attribute determines if the subtree is
- * displayed.
- */
- @Prop() readonly expanded?: boolean;
- // @Watch("expanded")
- // expandedChanged(isExpanded: boolean) {
- // // Wait until all properties are updated before lazy loading. Otherwise, the
- // // lazyLoad property could be updated just after the executing of the function
- // setTimeout(() => {
- // this.#lazyLoadItems(isExpanded);
- // });
- // }
-
- /**
- * Determine if the items are lazy loaded when opening the first time the
- * control.
- */
- @Prop({ mutable: true }) lazyLoad = false;
-
- /**
- * This attribute represents additional info for the control that is included
- * when dragging the item.
- */
- @Prop() readonly metadata: string;
-
- /**
- * Specifies a set of parts to use in every DOM element of the control.
- */
- @Prop() readonly parts?: string;
- // @Watch("parts")
- // partsChanged(newParts: string) {
- // this.#setExportParts(newParts);
- // }
-
- /**
- * This attribute lets you specify if the item is selected
- */
- @Prop() readonly selected: boolean = false;
-
- /**
- * `true` to show the downloading spinner when lazy loading the sub items of
- * the control.
- */
- @Prop() readonly showDownloadingSpinner: boolean = true;
-
- // /**
- // * Fired when the item is being dragged.
- // */
- // @Event() itemDragStart: EventEmitter
;
-
- /**
- * Fired when the lazy control is expanded an its content must be loaded.
- */
- @Event() loadLazyContent: EventEmitter;
-
- /**
- * Set the focus in the control if `expandable === true`.
- */
- @Method()
- async setFocus() {
- if (this.expandable && this.#buttonRef) {
- this.#buttonRef.focus();
- }
- }
-
- #getExpandedValue = (): boolean =>
- this.expandable ? this.expanded ?? false : true;
-
- connectedCallback() {
- this.el.setAttribute("role", "listitem");
- this.el.setAttribute("part", ACTION_LIST_PARTS_DICTIONARY.GROUP);
- this.el.setAttribute("exportparts", ACTION_LIST_GROUP_EXPORT_PARTS);
- }
-
- render() {
- const hasContent = !this.lazyLoad;
- const expanded = hasContent && this.#getExpandedValue();
-
- return (
-
- {this.expandable ? (
-
- ) : (
-
- {this.caption}
-
- )}
-
- {hasContent && (
-
- )}
-
- );
- }
-}
diff --git a/src/components/action-list/internal/action-list-group/readme.md b/src/components/action-list/internal/action-list-group/readme.md
deleted file mode 100644
index 31dcb2ae..00000000
--- a/src/components/action-list/internal/action-list-group/readme.md
+++ /dev/null
@@ -1,59 +0,0 @@
-# ch-action-list-group
-
-
-
-
-
-
-## Properties
-
-| Property | Attribute | Description | Type | Default |
-| ------------------------ | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
-| `caption` | `caption` | This attributes specifies the caption of the control | `string` | `undefined` |
-| `disabled` | `disabled` | This attribute lets you specify if the element is disabled. If disabled, it will not fire any user interaction related event (for example, click event). | `boolean` | `false` |
-| `downloading` | `downloading` | This attribute lets you specify when items are being lazy loaded in the control. | `boolean` | `false` |
-| `expandable` | `expandable` | If the item has a sub-tree, this attribute determines if the subtree is displayed. | `boolean` | `undefined` |
-| `expanded` | `expanded` | If the item has a sub-tree, this attribute determines if the subtree is displayed. | `boolean` | `undefined` |
-| `lazyLoad` | `lazy-load` | Determine if the items are lazy loaded when opening the first time the control. | `boolean` | `false` |
-| `metadata` | `metadata` | This attribute represents additional info for the control that is included when dragging the item. | `string` | `undefined` |
-| `parts` | `parts` | Specifies a set of parts to use in every DOM element of the control. | `string` | `undefined` |
-| `selected` | `selected` | This attribute lets you specify if the item is selected | `boolean` | `false` |
-| `showDownloadingSpinner` | `show-downloading-spinner` | `true` to show the downloading spinner when lazy loading the sub items of the control. | `boolean` | `true` |
-
-
-## Events
-
-| Event | Description | Type |
-| ----------------- | ---------------------------------------------------------------------- | --------------------- |
-| `loadLazyContent` | Fired when the lazy control is expanded an its content must be loaded. | `CustomEvent` |
-
-
-## Methods
-
-### `setFocus() => Promise`
-
-Set the focus in the control if `expandable === true`.
-
-#### Returns
-
-Type: `Promise`
-
-
-
-
-## Dependencies
-
-### Used by
-
- - [ch-action-list-render](../..)
-
-### Graph
-```mermaid
-graph TD;
- ch-action-list-render --> ch-action-list-group
- style ch-action-list-group fill:#f9f,stroke:#333,stroke-width:4px
-```
-
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/action-list/internal/action-list-item/action-list-item.scss b/src/components/action-list/internal/action-list-item/action-list-item.scss
index 701b6dca..2806f98e 100644
--- a/src/components/action-list/internal/action-list-item/action-list-item.scss
+++ b/src/components/action-list/internal/action-list-item/action-list-item.scss
@@ -17,6 +17,14 @@
"stretch-start block-end stretch-end" max-content / max-content 1fr max-content;
}
+.action-with-children {
+ display: grid;
+ grid-template:
+ "expandable-start stretch-start block-start stretch-end expandable-end" max-content
+ "expandable-start stretch-start inline-caption stretch-end expandable-end" max-content
+ "expandable-start stretch-start block-end stretch-end expandable-end" max-content / min-content max-content 1fr max-content min-content;
+}
+
// TODO: Fix "inline-caption: start" items support
.align-container {
display: grid;
@@ -181,3 +189,63 @@
--ch-start-start: var(--ch-start-img--disabled);
}
}
+
+// - - - - - - - - - - - - - - - -
+// Expandable button
+// - - - - - - - - - - - - - - - -
+.expandable-button {
+ grid-area: expandable-start;
+ overflow: hidden;
+ text-indent: -9999px;
+ white-space: nowrap;
+
+ &::before {
+ content: "";
+ inline-size: var(--ch-action-list-group__expandable-button-size);
+ block-size: var(--ch-action-list-group__expandable-button-size);
+ background-color: currentColor;
+ -webkit-mask: no-repeat center /
+ var(--ch-action-list-group__expandable-button-image-size) $expandable-icon;
+ }
+
+ &--collapsed::before {
+ transform: rotate(-90deg); // TODO: Add RTL support
+ }
+}
+
+.expandable-button--start {
+ grid-area: expandable-start;
+}
+
+.expandable-button--end {
+ grid-area: expandable-end;
+
+ &::before {
+ transform: rotate(90deg);
+ }
+
+ &--collapsed::before {
+ transform: rotate(-90deg); // TODO: Add RTL support
+ }
+}
+
+// - - - - - - - - - - - - - - - -
+// Expandable content
+// - - - - - - - - - - - - - - - -
+.expandable {
+ display: grid;
+ grid-auto-rows: min-content;
+ position: relative;
+ padding: 0;
+ margin: 0;
+
+ &--lazy-loaded {
+ content-visibility: auto;
+ contain-intrinsic-size: auto 100px;
+ }
+}
+
+.expandable--collapsed {
+ display: none;
+ overflow: hidden;
+}
diff --git a/src/components/action-list/internal/action-list-item/action-list-item.tsx b/src/components/action-list/internal/action-list-item/action-list-item.tsx
index c082632b..e5cd58c8 100644
--- a/src/components/action-list/internal/action-list-item/action-list-item.tsx
+++ b/src/components/action-list/internal/action-list-item/action-list-item.tsx
@@ -3,24 +3,20 @@ import {
Element,
Event,
EventEmitter,
+ h,
Host,
+ Method,
Prop,
- Watch,
- h
+ Watch
} from "@stencil/core";
import {
- ActionListImagePathCallback,
- ActionListItemAdditionalAction,
- ActionListItemAdditionalBase,
- ActionListItemAdditionalCustom,
- ActionListItemAdditionalInformation,
- ActionListItemAdditionalInformationSection,
- ActionListItemAdditionalItem,
- ActionListItemAdditionalItemActionType,
- ActionListItemAdditionalModel
-} from "../../types";
+ DEFAULT_GET_IMAGE_PATH_CALLBACK,
+ getControlRegisterProperty
+} from "../../../../common/registry-properties";
import { renderImg } from "../../../../common/renders";
import {
+ ACTION_LIST_GROUP_EXPORT_PARTS,
+ ACTION_LIST_GROUP_PARTS_DICTIONARY,
ACTION_LIST_ITEM_EXPORT_PARTS,
ACTION_LIST_ITEM_PARTS_DICTIONARY,
ACTION_LIST_PARTS_DICTIONARY,
@@ -29,25 +25,33 @@ import {
startPseudoImageTypeDictionary
} from "../../../../common/reserved-names";
import {
- ActionListCaptionChangeEventDetail,
- ActionListFixedChangeEventDetail,
- ActionListItemActionTypeBlockInfo
-} from "./types";
+ GxImageMultiState,
+ GxImageMultiStateStart
+} from "../../../../common/types";
import {
tokenMap,
updateDirectionInImageCustomVar
} from "../../../../common/utils";
-import { computeExportParts } from "./compute-exportparts";
-import { computeActionTypeBlocks } from "./compute-editing-sections";
import { ActionListTranslations } from "../../translations";
import {
- GxImageMultiState,
- GxImageMultiStateStart
-} from "../../../../common/types";
+ ActionListImagePathCallback,
+ ActionListItemAdditionalAction,
+ ActionListItemAdditionalBase,
+ ActionListItemAdditionalCustom,
+ ActionListItemAdditionalInformation,
+ ActionListItemAdditionalInformationSection,
+ ActionListItemAdditionalItem,
+ ActionListItemAdditionalItemActionType,
+ ActionListItemAdditionalMenu,
+ ActionListItemAdditionalModel
+} from "../../types";
+import { computeActionTypeBlocks } from "./compute-editing-sections";
+import { computeExportParts } from "./compute-exportparts";
import {
- DEFAULT_GET_IMAGE_PATH_CALLBACK,
- getControlRegisterProperty
-} from "../../../../common/registry-properties";
+ ActionListCaptionChangeEventDetail,
+ ActionListFixedChangeEventDetail,
+ ActionListItemActionTypeBlockInfo
+} from "./types";
const ACTION_TYPE_PARTS = {
fix: ACTION_LIST_ITEM_PARTS_DICTIONARY.ACTION_FIX,
@@ -56,12 +60,16 @@ const ACTION_TYPE_PARTS = {
custom: ACTION_LIST_ITEM_PARTS_DICTIONARY.ACTION_CUSTOM
} as const;
+const EXPANDABLE_ID = "expandable";
+
@Component({
tag: "ch-action-list-item",
styleUrl: "action-list-item.scss",
shadow: { delegatesFocus: true }
})
export class ChActionListItem {
+ #buttonRef: HTMLButtonElement;
+
#additionalItemListenerDictionary = {
fix: () =>
this.fixedChange.emit({ itemId: this.el.id, value: !this.fixed }),
@@ -172,6 +180,24 @@ export class ChActionListItem {
*/
@Prop({ mutable: true }) editing = false;
+ /**
+ * If the item has a sub-tree, this attribute determines if the subtree is
+ * displayed.
+ */
+ @Prop() readonly expandable?: boolean;
+
+ /**
+ * If the item has a sub-tree, this attribute determines if the subtree is
+ * displayed.
+ */
+ @Prop() readonly expanded?: boolean;
+ @Watch("expanded")
+ expandedChanged(isExpanded: boolean) {
+ this.#getDirectActionListItems().map(item => {
+ item.nestedExpandable = isExpanded;
+ });
+ }
+
/**
*
*/
@@ -190,6 +216,12 @@ export class ChActionListItem {
*/
@Prop({ mutable: true }) indeterminate = false;
+ /**
+ * Determine if the items are lazy loaded when opening the first time the
+ * control.
+ */
+ @Prop({ mutable: true }) lazyLoad = false;
+
/**
* This attribute represents additional info for the control that is included
* when dragging the item.
@@ -270,6 +302,16 @@ export class ChActionListItem {
*/
@Event() itemDragEnd: EventEmitter;
+ /**
+ * Set the focus in the control if `expandable === true`.
+ */
+ @Method()
+ async setFocus() {
+ if (this.expandable && this.#buttonRef) {
+ this.#buttonRef.focus();
+ }
+ }
+
#removeEditMode =
(shouldFocusHeader: boolean, commitEdition = false) =>
() => {
@@ -311,16 +353,51 @@ export class ChActionListItem {
this.#removeEditMode(true, commitEdition)();
};
+ #getDirectActionListItems = (): HTMLChActionListItemElement[] =>
+ Array.from(
+ this.el.querySelectorAll(":scope > ch-action-list-item")
+ ) as HTMLChActionListItemElement[];
+
#renderAdditionalItems = (additionalItems: ActionListItemAdditionalItem[]) =>
- additionalItems.map(item =>
- (item as ActionListItemAdditionalCustom).jsx
- ? (item as ActionListItemAdditionalCustom).jsx()
- : this.#renderAdditionalItem(
- item as
- | ActionListItemAdditionalBase
- | ActionListItemAdditionalAction
- )
- );
+ additionalItems.map(item => {
+ if ((item as ActionListItemAdditionalCustom).jsx) {
+ return (item as ActionListItemAdditionalCustom).jsx();
+ }
+
+ if ((item as ActionListItemAdditionalMenu)?.menu) {
+ return (
+
+ Menu
+
+ );
+ }
+
+ return this.#renderAdditionalItem(
+ item as ActionListItemAdditionalBase | ActionListItemAdditionalAction
+ );
+ });
+
+ #renderExpandableButton = (hasContent, expanded) => (
+
+ );
#renderAdditionalItem = (
item: ActionListItemAdditionalBase | ActionListItemAdditionalAction
@@ -503,7 +580,7 @@ export class ChActionListItem {
// Additional parts
if (parts.size > 0) {
- exportParts = `${ACTION_LIST_ITEM_EXPORT_PARTS},${Array.from(
+ exportParts = `${ACTION_LIST_ITEM_EXPORT_PARTS},${ACTION_LIST_GROUP_EXPORT_PARTS},${Array.from(
parts
).join(",")}`;
}
@@ -511,7 +588,8 @@ export class ChActionListItem {
this.el.setAttribute(
"exportparts",
- exportParts ?? ACTION_LIST_ITEM_EXPORT_PARTS
+ exportParts ??
+ `${ACTION_LIST_ITEM_EXPORT_PARTS},${ACTION_LIST_GROUP_EXPORT_PARTS}`
);
};
@@ -706,11 +784,15 @@ export class ChActionListItem {
: null;
};
+ #getExpandedValue = (): boolean =>
+ this.expandable ? this.expanded ?? false : true;
+
connectedCallback() {
this.el.setAttribute("role", "listitem");
this.el.setAttribute("part", ACTION_LIST_PARTS_DICTIONARY.ITEM);
this.#setExportParts();
this.#setActionTypeBlocks();
+ this.expandedChanged(this.expandable);
}
render() {
@@ -723,30 +805,51 @@ export class ChActionListItem {
const blockEnd = hasAdditionalInfo && additionalInfo["block-end"];
const stretchEnd = hasAdditionalInfo && additionalInfo["stretch-end"];
+ const hasChildren = this.el.hasChildNodes();
+ const hasContent = !this.lazyLoad;
+ const expanded = hasContent && this.#getExpandedValue();
const hasParts = !!this.parts;
return (
+
+ {hasChildren && (
+
+ )}
);
}
diff --git a/src/components/action-list/types.ts b/src/components/action-list/types.ts
index 519f3908..11211da5 100644
--- a/src/components/action-list/types.ts
+++ b/src/components/action-list/types.ts
@@ -1,4 +1,5 @@
import { GxImageMultiState, ImageRender } from "../../common/types";
+import { ActionMenuModel } from "../action-menu/types";
// import { ChActionListRender } from "./action-list-render";
export type ActionListModel = ActionListItemModel[];
@@ -8,7 +9,6 @@ export type ActionListModel = ActionListItemModel[];
// - - - - - - - - - - - - - - - - - - - -
export type ActionListItemType =
| ActionListItemTypeActionable
- | ActionListItemTypeGroup
| ActionListItemTypeSeparator;
export type ActionListItemTypeActionable = "actionable";
@@ -43,7 +43,7 @@ export interface ActionListItemModelMap {
// - - - - - - - - - - - - - - - - - - - -
// List Item Actionable
// - - - - - - - - - - - - - - - - - - - -
-export type ActionListItemActionable = {
+export type ActionListItem = {
id: string;
additionalInformation?: ActionListItemAdditionalInformation;
@@ -65,7 +65,13 @@ export type ActionListItemActionable = {
selected?: boolean;
- // TODO: Add support to avoid setting this property
+ expandable?: boolean;
+ expanded?: boolean;
+
+ items?: ActionListItemActionable[];
+};
+
+export type ActionListItemActionable = ActionListItem & {
type: ActionListItemTypeActionable;
};
@@ -94,7 +100,8 @@ export type ActionListItemAdditionalItem =
| ActionListItemAdditionalBase
| ActionListItemAdditionalAction
| ActionListItemAdditionalCustom
- | ActionListItemAdditionalSlot;
+ | ActionListItemAdditionalSlot
+ | ActionListItemAdditionalMenu;
export type ActionListItemAdditionalBase = {
id?: string;
@@ -117,6 +124,10 @@ export type ActionListItemAdditionalCustom = {
part?: string;
};
+export type ActionListItemAdditionalMenu = {
+ menu: ActionMenuModel;
+};
+
export type ActionListItemAdditionalAction = ActionListItemAdditionalBase & {
id: string;
accessibleName: string;
@@ -142,22 +153,7 @@ export type ActionListItemAdditionalItemActionType =
// - - - - - - - - - - - - - - - - - - - -
// List Item Heading
// - - - - - - - - - - - - - - - - - - - -
-export type ActionListItemGroup = {
- id: string;
- caption: string;
- disabled?: boolean;
- expandable?: boolean;
- expanded?: boolean;
-
- items: ActionListItemActionable[];
-
- /**
- * Establish the order at which the item will be placed in its parent.
- * Multiple items can have the same `order` value.
- */
- order?: number;
- part?: string;
- selected?: boolean; // TODO: This property does not make much sense if expandable: false
+export type ActionListItemGroup = ActionListItem & {
type: ActionListItemTypeGroup;
};
diff --git a/src/components/action-list/utils.ts b/src/components/action-list/utils.ts
index 13116111..16a2fc44 100644
--- a/src/components/action-list/utils.ts
+++ b/src/components/action-list/utils.ts
@@ -9,7 +9,7 @@ import {
// Tags
export const ACTION_LIST_ITEM_TAG = "ch-action-list-item";
-export const ACTION_LIST_GROUP_TAG = "ch-action-list-group";
+export const ACTION_LIST_GROUP_TAG = "ch-action-list-item"; // TODO: Deprecate "ch-action-list-group"
// Selectors
export const ACTION_LIST_ITEM_SELECTOR = (id: string) =>
diff --git a/src/showcase/assets/components/action-list/action-list.showcase.tsx b/src/showcase/assets/components/action-list/action-list.showcase.tsx
index dd2308a5..e7652119 100644
--- a/src/showcase/assets/components/action-list/action-list.showcase.tsx
+++ b/src/showcase/assets/components/action-list/action-list.showcase.tsx
@@ -1,6 +1,7 @@
import { h } from "@stencil/core";
import { ShowcaseRenderProperties, ShowcaseStory } from "../types";
import {
+ CustomActions,
GitHubChangesModel,
GitHubHistoryModel,
GxEAINotifications,
@@ -48,7 +49,8 @@ const showcaseRenderProperties: ShowcaseRenderProperties (