load more button component and styling (#19622)

* localization

* tree-load-more-button component

* implement

* ability to hide block actions

* Revert "ability to hide block actions"

This reverts commit bf8222f.

Author: nielslyngsoe

src/Umbraco.Web.UI.Client/src/assets/lang/da.ts

@@ -65,6 +65,7 @@ export default {
 		editContent: 'Rediger indhold',
 		chooseWhereToImport: 'Vælg hvor du vil importere',
 		viewActionsFor: (name) => (name ? `Se handlinger for '${name}'` : 'Se handlinger'),
+		loadMore: 'Indlæs flere',
 	},
 	actionCategories: {
 		content: 'Indhold',

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -73,6 +73,7 @@ export default {
 		wasDeleted: 'was deleted',
 		wasMovedTo: 'was moved to',
 		viewActionsFor: (name) => (name ? `View actions for '${name}'` : 'View actions'),
+		loadMore: 'Load more',
 	},
 	actionCategories: {
 		content: 'Content',

src/Umbraco.Web.UI.Client/src/packages/core/tree/components/index.ts

@@ -0,0 +1 @@
+export * from './tree-load-more-button.element.js';

src/Umbraco.Web.UI.Client/src/packages/core/tree/components/tree-load-more-button.element.ts

@@ -0,0 +1,35 @@
+import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+
+@customElement('umb-tree-load-more-button')
+export class UmbTreeLoadMoreButtonElement extends UmbLitElement {
+	override render() {
+		return html`<uui-button
+			data-mark="tree:load-more"
+			id="load-more"
+			look="secondary"
+			.label=${this.localize.term('actions_loadMore')}></uui-button>`;
+	}
+
+	static override readonly styles = css`
+		:host {
+			position: relative;
+			display: block;
+			padding-left: var(--uui-size-space-3);
+			margin-right: var(--uui-size-space-2);
+			margin-bottom: var(--uui-size-layout-2);
+			margin-left: calc(var(--uui-menu-item-indent, 0) * var(--uui-size-4));
+		}
+		uui-button {
+			width: 100%;
+			height: var(--uui-size---uui-size-layout-3);
+			--uui-box-border-radius: calc(var(--uui-border-radius) * 2);
+		}
+	`;
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-tree-load-more-button': UmbTreeLoadMoreButtonElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/tree/default/default-tree.element.ts

@@ -170,7 +170,7 @@ export class UmbDefaultTreeElement extends UmbLitElement {
 			return nothing;
 		}
 
-		return html` <uui-button id="load-more" @click=${this.#onLoadMoreClick} label="Load more"></uui-button> `;
+		return html` <umb-tree-load-more-button @click=${this.#onLoadMoreClick}></umb-tree-load-more-button> `;
 	}
 
 	static override styles = css`

src/Umbraco.Web.UI.Client/src/packages/core/tree/index.ts

@@ -1,3 +1,4 @@
+export * from './components/index.js';
 export * from './constants.js';
 export * from './data/index.js';
 export * from './default/index.js';

src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item-base/tree-item-element-base.ts

@@ -220,6 +220,6 @@ export abstract class UmbTreeItemElementBase<
 			return nothing;
 		}
 
-		return html` <uui-button @click=${this.#onLoadMoreClick} label="Load more"></uui-button> `;
+		return html` <umb-tree-load-more-button @click=${this.#onLoadMoreClick}></umb-tree-load-more-button> `;
 	}
 }