@schukai/monster 3.51.4 → 3.52.0

package/source/components/datatable/embedded-pagination.mjs

@@ -0,0 +1,113 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { registerCustomElement } from "../../dom/customelement.mjs";
+import { EmbeddedPaginationStyleSheet } from "./stylesheet/embedded-pagination.mjs";
+import { instanceSymbol } from "../../constants.mjs";
+import "../form/select.mjs";
+import { Pagination } from "./pagination.mjs";
+
+import "./datasource/dom.mjs";
+import "./datasource/rest.mjs";
+
+export { EmbeddedPagination };
+
+/**
+ * The EmbeddedPagination component is used to show the current page and the total number of pages.
+ *
+ * <img src="./images/embedded-pagination.png">
+ *
+ * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
+ *
+ * You can create this control either by specifying the HTML tag <monster-datatable />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-datatable');` method.
+ *
+ * ```html
+ * <monster-pagination></monster-pagination>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import '@schukai/component-datatable/source/pagination.mjs';
+ * document.createElement('monster-pagination');
+ * ```
+ *
+ * @startuml embedded-pagination.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- Pagination
+ * @enduml
+ *
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Datatable
+ * @summary A datatable
+ */
+class EmbeddedPagination extends Pagination {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/embedded-pagination");
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-embedded-pagination";
+	}
+
+	/**
+	 *
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [EmbeddedPaginationStyleSheet];
+	}
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <template id="items">
+            <li><a data-monster-attributes="class path:items.class,
+                                            href path:items.href,
+                                            aria-label path:items.description,
+                                            disabled path:items.disabled:?disabled:undefined,
+                                            data-page-no path:items.pageNo,
+                                            aria-current path:items.current"
+                   data-monster-role="pagination-item"
+                   data-monster-replace="path:items.label"></a></li>
+        </template>
+
+        <div data-monster-role="control">
+            <nav data-monster-role="pagination" role="navigation" aria-label="pagination">
+                <ul class="pagination-list" data-monster-insert="items path:pagination.items">
+                    <li part="pagination-prev"><a data-monster-role="pagination-prev"
+                                                  data-monster-attributes="
+            class path:pagination.prevClass | prefix: previous,
+            data-page-no path:pagination.prevNo,
+            href path:pagination.prevHref | prefix: #"
+                                                  data-monster-replace="path:labels.previous">Previous</a></li>
+                    <li part="pagination-next"><a data-monster-role="pagination-next"
+                                                  data-monster-attributes="class path:pagination.nextClass | prefix: next,
+            data-page-no path:pagination.nextNo,
+        href path:pagination.nextHref | prefix: #"
+                                                  data-monster-replace="path:labels.next">Next</a></li>
+                </ul>
+            </nav>
+        </div>
+    `;
+}
+
+registerCustomElement(EmbeddedPagination);

package/source/components/datatable/filter/abstract-base.mjs

@@ -0,0 +1,31 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { CustomControl } from "../../../dom/customcontrol.mjs";
+
+export { AbstractBase };
+
+/**
+ * The base component is used to
+ *
+ * <img src="./images/abstract-base.png">
+ *
+ * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
+ *
+ * This class is abstract and should not be used directly.
+ *
+ * @startuml abstract-base.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- CustomControl
+ * CustomControl <|-- AbstractBase
+ * @enduml
+ *
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Datatable.Filter
+ * @summary A abstract base component
+ */
+class AbstractBase extends CustomControl {}