@ui5/webcomponents 0.0.0-d0bcf47c7 → 0.0.0-d160e83dd

package/dist/FormGroup.d.ts

@@ -0,0 +1,64 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type FormItem from "./FormItem.js";
+import type { IFormItem } from "./Form.js";
+import type FormItemSpacing from "./types/FormItemSpacing.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The FormGroup (ui5-form-group) represents a group inside the Form (ui5-form) component
+ * and it consists of FormItem (ui5-form-item) components.
+ *
+ * The layout of the FormGroup is mostly defined and controlled by the overarching Form (ui5-form) component.
+ * Still, one can influence the layout via the FormGroup's `columnSpan` property,
+ * that defines how many columns the group should expand to.
+ *
+ * ### Usage
+ *
+ * Тhe FormGroup (ui5-form-group) allows to split a Form into groups,
+ * e.g to group FormItems that logically belong together.
+ *
+ * ### ES6 Module Import
+ *
+ * - import @ui5/webcomponents/dist/FormGroup.js";
+ *
+ * @public
+ * @implements {IFormItem}
+ * @since 2.0.0
+ * @extends UI5Element
+ */
+declare class FormGroup extends UI5Element implements IFormItem {
+    /**
+     * Defines header text of the component.
+     *
+     * @default undefined
+     * @public
+     */
+    headerText?: string;
+    /**
+     * Defines column span of the component,
+     * e.g how many columns the group should span to.
+     *
+     * @default undefined
+     * @public
+     */
+    columnSpan?: number;
+    /**
+     * Defines the items of the component.
+     * @public
+     */
+    items: Array<FormItem>;
+    /**
+     * @private
+     */
+    colsS: number;
+    colsM: number;
+    colsL: number;
+    colsXl: number;
+    itemSpacing: `${FormItemSpacing}`;
+    onBeforeRendering(): void;
+    processFormItems(): void;
+    get isGroup(): boolean;
+}
+export default FormGroup;

package/dist/FormGroup.js

@@ -0,0 +1,96 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The FormGroup (ui5-form-group) represents a group inside the Form (ui5-form) component
+ * and it consists of FormItem (ui5-form-item) components.
+ *
+ * The layout of the FormGroup is mostly defined and controlled by the overarching Form (ui5-form) component.
+ * Still, one can influence the layout via the FormGroup's `columnSpan` property,
+ * that defines how many columns the group should expand to.
+ *
+ * ### Usage
+ *
+ * Тhe FormGroup (ui5-form-group) allows to split a Form into groups,
+ * e.g to group FormItems that logically belong together.
+ *
+ * ### ES6 Module Import
+ *
+ * - import @ui5/webcomponents/dist/FormGroup.js";
+ *
+ * @public
+ * @implements {IFormItem}
+ * @since 2.0.0
+ * @extends UI5Element
+ */
+let FormGroup = class FormGroup extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * @private
+         */
+        this.colsS = 1;
+        this.colsM = 1;
+        this.colsL = 1;
+        this.colsXl = 1;
+        this.itemSpacing = "Normal";
+    }
+    onBeforeRendering() {
+        this.processFormItems();
+    }
+    processFormItems() {
+        this.items.forEach((item) => {
+            item.itemSpacing = this.itemSpacing;
+        });
+    }
+    get isGroup() {
+        return true;
+    }
+};
+__decorate([
+    property()
+], FormGroup.prototype, "headerText", void 0);
+__decorate([
+    property({ type: Number })
+], FormGroup.prototype, "columnSpan", void 0);
+__decorate([
+    slot({
+        type: HTMLElement,
+        "default": true,
+    })
+], FormGroup.prototype, "items", void 0);
+__decorate([
+    property({ type: Number })
+], FormGroup.prototype, "colsS", void 0);
+__decorate([
+    property({ type: Number })
+], FormGroup.prototype, "colsM", void 0);
+__decorate([
+    property({ type: Number })
+], FormGroup.prototype, "colsL", void 0);
+__decorate([
+    property({ type: Number })
+], FormGroup.prototype, "colsXl", void 0);
+__decorate([
+    property()
+], FormGroup.prototype, "itemSpacing", void 0);
+FormGroup = __decorate([
+    customElement({
+        tag: "ui5-form-group",
+        fastNavigation: true,
+    })
+], FormGroup);
+FormGroup.define();
+export default FormGroup;
+//# sourceMappingURL=FormGroup.js.map

package/dist/FormGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormGroup.js","sourceRoot":"","sources":["../src/FormGroup.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAMnE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAKH,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QA8BC;;WAEG;QAEH,UAAK,GAAG,CAAC,CAAC;QAGV,UAAK,GAAG,CAAC,CAAC;QAGV,UAAK,GAAG,CAAC,CAAC;QAGV,WAAM,GAAG,CAAC,CAAC;QAGX,gBAAW,GAAyB,QAAQ,CAAC;IAe9C,CAAC;IAbA,iBAAiB;QAChB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACzB,CAAC;IAED,gBAAgB;QACf,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAc,EAAE,EAAE;YACrC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACrC,CAAC,CAAC,CAAC;IACJ,CAAC;IAED,IAAI,OAAO;QACV,OAAO,IAAI,CAAC;IACb,CAAC;CACD,CAAA;AArDA;IADC,QAAQ,EAAE;6CACS;AAUpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACP;AAUpB;IAJC,IAAI,CAAC;QACL,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,IAAI;KACf,CAAC;wCACsB;AAMxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAChB;AAGX;IADC,QAAQ,EAAE;8CACkC;AA9CxC,SAAS;IAJd,aAAa,CAAC;QACd,GAAG,EAAE,gBAAgB;QACrB,cAAc,EAAE,IAAI;KACpB,CAAC;GACI,SAAS,CA6Dd;AAED,SAAS,CAAC,MAAM,EAAE,CAAC;AAEnB,eAAe,SAAS,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\n\nimport type FormItem from \"./FormItem.js\";\nimport type { IFormItem } from \"./Form.js\";\nimport type FormItemSpacing from \"./types/FormItemSpacing.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The FormGroup (ui5-form-group) represents a group inside the Form (ui5-form) component\n * and it consists of FormItem (ui5-form-item) components.\n *\n * The layout of the FormGroup is mostly defined and controlled by the overarching Form (ui5-form) component.\n * Still, one can influence the layout via the FormGroup's `columnSpan` property,\n * that defines how many columns the group should expand to.\n *\n * ### Usage\n *\n * Тhe FormGroup (ui5-form-group) allows to split a Form into groups,\n * e.g to group FormItems that logically belong together.\n *\n * ### ES6 Module Import\n *\n * - import @ui5/webcomponents/dist/FormGroup.js\";\n *\n * @public\n * @implements {IFormItem}\n * @since 2.0.0\n * @extends UI5Element\n */\n@customElement({\n\ttag: \"ui5-form-group\",\n\tfastNavigation: true,\n})\nclass FormGroup extends UI5Element implements IFormItem {\n\t/**\n\t * Defines header text of the component.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\theaderText?: string;\n\n\t/**\n\t * Defines column span of the component,\n\t * e.g how many columns the group should span to.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property({ type: Number })\n\tcolumnSpan?: number;\n\n\t/**\n\t * Defines the items of the component.\n\t * @public\n\t */\n\t@slot({\n\t\ttype: HTMLElement,\n\t\t\"default\": true,\n\t})\n\titems!: Array<FormItem>;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Number })\n\tcolsS = 1;\n\n\t@property({ type: Number })\n\tcolsM = 1;\n\n\t@property({ type: Number })\n\tcolsL = 1;\n\n\t@property({ type: Number })\n\tcolsXl = 1;\n\n\t@property()\n\titemSpacing: `${FormItemSpacing}` = \"Normal\";\n\n\tonBeforeRendering() {\n\t\tthis.processFormItems();\n\t}\n\n\tprocessFormItems() {\n\t\tthis.items.forEach((item: FormItem) => {\n\t\t\titem.itemSpacing = this.itemSpacing;\n\t\t});\n\t}\n\n\tget isGroup() {\n\t\treturn true;\n\t}\n}\n\nFormGroup.define();\n\nexport default FormGroup;\n"]}

package/dist/FormItem.d.ts

@@ -0,0 +1,60 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { IFormItem } from "./Form.js";
+import type FormItemSpacing from "./types/FormItemSpacing.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The FormItem (ui5-form-item) represents pair of a label and
+ * one or more components (text or text fields), associated to it.
+ *
+ * ### Usage
+ *
+ * The FormItem is being used in FormGroup (ui5-form-group) or directly in Form (ui5-form).
+ *
+ * ### ES6 Module Import
+ *
+ * - import @ui5/webcomponents/dist/FormItem.js";
+ *
+ * @csspart layout - Used to style the parent element of the label and content parts.
+ * @csspart label - Used to style the label part of the form item.
+ * @csspart content - Used to style the content part of the form item.
+ *
+ * @constructor
+ * @implements {IFormItem}
+ * @public
+ * @since 2.0.0
+ * @extends UI5Element
+ */
+declare class FormItem extends UI5Element implements IFormItem {
+    /**
+     * Defines the column span of the component,
+     * e.g how many columns the component should span to.
+     *
+     * **Note:** The column span should be a number between 1 and the available columns of the FormGroup (when items are placed in a group)
+     * or the Form. The available columns can be affected by the FormGroup#columnSpan and/or the Form#layout.
+     * A number bigger than the available columns won't take effect.
+     *
+     * @default undefined
+     * @public
+     */
+    columnSpan?: number;
+    /**
+     * Defines the label of the component.
+     * @public
+     */
+    labelContent: Array<HTMLElement>;
+    /**
+     * Defines the content of the component,
+     * associated to `labelContent`.
+     * @public
+     */
+    content: Array<HTMLElement>;
+    /**
+     * @private
+     */
+    itemSpacing: `${FormItemSpacing}`;
+    get isGroup(): boolean;
+}
+export default FormItem;

package/dist/FormItem.js

@@ -0,0 +1,80 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+// Template
+import FormItemTemplate from "./FormItemTemplate.js";
+// Styles
+import FormItemCss from "./generated/themes/FormItem.css.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The FormItem (ui5-form-item) represents pair of a label and
+ * one or more components (text or text fields), associated to it.
+ *
+ * ### Usage
+ *
+ * The FormItem is being used in FormGroup (ui5-form-group) or directly in Form (ui5-form).
+ *
+ * ### ES6 Module Import
+ *
+ * - import @ui5/webcomponents/dist/FormItem.js";
+ *
+ * @csspart layout - Used to style the parent element of the label and content parts.
+ * @csspart label - Used to style the label part of the form item.
+ * @csspart content - Used to style the content part of the form item.
+ *
+ * @constructor
+ * @implements {IFormItem}
+ * @public
+ * @since 2.0.0
+ * @extends UI5Element
+ */
+let FormItem = class FormItem extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * @private
+         */
+        this.itemSpacing = "Normal";
+    }
+    get isGroup() {
+        return false;
+    }
+};
+__decorate([
+    property({ type: Number })
+], FormItem.prototype, "columnSpan", void 0);
+__decorate([
+    slot()
+], FormItem.prototype, "labelContent", void 0);
+__decorate([
+    slot({
+        type: HTMLElement,
+        "default": true,
+        individualSlots: true,
+    })
+], FormItem.prototype, "content", void 0);
+__decorate([
+    property()
+], FormItem.prototype, "itemSpacing", void 0);
+FormItem = __decorate([
+    customElement({
+        tag: "ui5-form-item",
+        renderer: jsxRenderer,
+        styles: FormItemCss,
+        template: FormItemTemplate,
+    })
+], FormItem);
+FormItem.define();
+export default FormItem;
+//# sourceMappingURL=FormItem.js.map

package/dist/FormItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormItem.js","sourceRoot":"","sources":["../src/FormItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,WAAW;AACX,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AAErD,SAAS;AACT,OAAO,WAAW,MAAM,oCAAoC,CAAC;AAK7D;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAOH,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAkCC;;WAEG;QAEH,gBAAW,GAAyB,QAAQ,CAAA;IAK7C,CAAC;IAHA,IAAI,OAAO;QACV,OAAO,KAAK,CAAC;IACd,CAAC;CACD,CAAA;AA9BA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACP;AAOpB;IADC,IAAI,EAAE;8CAC2B;AAYlC;IALC,IAAI,CAAC;QACL,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,IAAI;QACf,eAAe,EAAE,IAAI;KACrB,CAAC;yCAC2B;AAM7B;IADC,QAAQ,EAAE;6CACiC;AAtCvC,QAAQ;IANb,aAAa,CAAC;QACd,GAAG,EAAE,eAAe;QACpB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,WAAW;QACnB,QAAQ,EAAE,gBAAgB;KAC1B,CAAC;GACI,QAAQ,CA2Cb;AAED,QAAQ,CAAC,MAAM,EAAE,CAAC;AAElB,eAAe,QAAQ,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\n\n// Template\nimport FormItemTemplate from \"./FormItemTemplate.js\";\n\n// Styles\nimport FormItemCss from \"./generated/themes/FormItem.css.js\";\n\nimport type { IFormItem } from \"./Form.js\";\nimport type FormItemSpacing from \"./types/FormItemSpacing.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The FormItem (ui5-form-item) represents pair of a label and\n * one or more components (text or text fields), associated to it.\n *\n * ### Usage\n *\n * The FormItem is being used in FormGroup (ui5-form-group) or directly in Form (ui5-form).\n *\n * ### ES6 Module Import\n *\n * - import @ui5/webcomponents/dist/FormItem.js\";\n *\n * @csspart layout - Used to style the parent element of the label and content parts.\n * @csspart label - Used to style the label part of the form item.\n * @csspart content - Used to style the content part of the form item.\n *\n * @constructor\n * @implements {IFormItem}\n * @public\n * @since 2.0.0\n * @extends UI5Element\n */\n@customElement({\n\ttag: \"ui5-form-item\",\n\trenderer: jsxRenderer,\n\tstyles: FormItemCss,\n\ttemplate: FormItemTemplate,\n})\nclass FormItem extends UI5Element implements IFormItem {\n\t/**\n\t * Defines the column span of the component,\n\t * e.g how many columns the component should span to.\n\t *\n\t * **Note:** The column span should be a number between 1 and the available columns of the FormGroup (when items are placed in a group)\n\t * or the Form. The available columns can be affected by the FormGroup#columnSpan and/or the Form#layout.\n\t * A number bigger than the available columns won't take effect.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property({ type: Number })\n\tcolumnSpan?: number;\n\n\t/**\n\t * Defines the label of the component.\n\t * @public\n\t */\n\t@slot()\n\tlabelContent!: Array<HTMLElement>;\n\n\t/**\n\t * Defines the content of the component,\n\t * associated to `labelContent`.\n\t * @public\n\t */\n\t@slot({\n\t\ttype: HTMLElement,\n\t\t\"default\": true,\n\t\tindividualSlots: true,\n\t})\n\tcontent!: Array<HTMLElement>;\n\n\t/**\n\t * @private\n\t */\n\t@property()\n\titemSpacing: `${FormItemSpacing}` = \"Normal\"\n\n\tget isGroup() {\n\t\treturn false;\n\t}\n}\n\nFormItem.define();\n\nexport default FormItem;\n"]}

package/dist/FormItemTemplate.d.ts

@@ -0,0 +1,2 @@
+import type FormItem from "./FormItem.js";
+export default function FormItemTemplate(this: FormItem): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/FormItemTemplate.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+export default function FormItemTemplate() {
+    return (_jsx("div", { class: "ui5-form-item-root", children: _jsxs("div", { class: "ui5-form-item-layout", part: "layout", children: [_jsx("div", { class: "ui5-form-item-label", part: "label", children: _jsx("slot", { name: "labelContent" }) }), _jsx("div", { class: "ui5-form-item-content", part: "content", children: this.content.map(item => _jsx("div", { class: "ui5-form-item-content-child", children: _jsx("slot", { name: item._individualSlot }) })) })] }) }));
+}
+//# sourceMappingURL=FormItemTemplate.js.map

package/dist/FormItemTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormItemTemplate.js","sourceRoot":"","sources":["../src/FormItemTemplate.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACvC,OAAO,CACN,cAAK,KAAK,EAAC,oBAAoB,YAC9B,eAAK,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,QAAQ,aAC9C,cAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,OAAO,YAC5C,eAAM,IAAI,EAAC,cAAc,GAAQ,GAC5B,EACN,cAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,SAAS,YAC/C,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACxB,cAAK,KAAK,EAAC,6BAA6B,YACvC,eAAM,IAAI,EAAG,IAAqB,CAAC,eAAe,GAAS,GACtD,CACN,GACI,IACD,GACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import type FormItem from \"./FormItem.js\";\nimport type SlottedChild from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\nexport default function FormItemTemplate(this: FormItem) {\n\treturn (\n\t\t<div class=\"ui5-form-item-root\">\n\t\t\t<div class=\"ui5-form-item-layout\" part=\"layout\">\n\t\t\t\t<div class=\"ui5-form-item-label\" part=\"label\">\n\t\t\t\t\t<slot name=\"labelContent\"></slot>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"ui5-form-item-content\" part=\"content\">\n\t\t\t\t\t{this.content.map(item =>\n\t\t\t\t\t\t<div class=\"ui5-form-item-content-child\">\n\t\t\t\t\t\t\t<slot name={(item as SlottedChild)._individualSlot}></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

package/dist/FormTemplate.d.ts

@@ -0,0 +1,2 @@
+import type Form from "./Form.js";
+export default function FormTemplate(this: Form): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/FormTemplate.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import Title from "./Title.js";
+export default function FormTemplate() {
+    return (_jsxs("div", { class: "ui5-form-root", role: this.effectiveAccessibleRole, "aria-labelledby": this.effectiveАccessibleNameRef, children: [this.hasHeader &&
+                _jsx("div", { class: "ui5-form-header", part: "header", children: this.hasCustomHeader ?
+                        _jsx("slot", { name: "header" })
+                        :
+                            _jsx(Title, { id: `${this._id}-header-text`, level: "H4", children: this.headerText }) }), _jsx("div", { class: "ui5-form-layout", part: "layout", children: this.hasGroupItems ?
+                    _jsx(_Fragment, { children: this.groupItemsInfo.map(groupItemInfo => {
+                            const groupItem = groupItemInfo.groupItem;
+                            return (_jsx("div", { class: {
+                                    "ui5-form-column": true,
+                                    [`ui5-form-column-spanL-${groupItem.colsL}`]: true,
+                                    [`ui5-form-column-spanXL-${groupItem.colsXl}`]: true,
+                                    [`ui5-form-column-spanM-${groupItem.colsM}`]: true,
+                                    [`ui5-form-column-spanS-${groupItem.colsS}`]: true,
+                                }, part: "column", children: _jsxs("div", { class: "ui5-form-group", role: "form", "aria-labelledby": groupItemInfo.accessibleNameRef, children: [groupItem.headerText &&
+                                            _jsx("div", { class: "ui5-form-group-heading", children: _jsx(Title, { id: `${groupItem._id}-group-header-text`, level: "H6", children: groupItem.headerText }) }), _jsx("div", { class: "ui5-form-group-layout", children: _jsx("slot", { name: groupItem._individualSlot }) })] }) }));
+                        }) })
+                    :
+                        _jsx(_Fragment, { children: this.itemsInfo.map(itemInfo => {
+                                const item = itemInfo.item;
+                                return (_jsx("div", { class: {
+                                        "ui5-form-item": true,
+                                        [`ui5-form-item-span-${item.columnSpan}`]: item.columnSpan !== undefined,
+                                    }, children: _jsx("slot", { name: item._individualSlot }) }));
+                            }) }) })] }));
+}
+//# sourceMappingURL=FormTemplate.js.map

package/dist/FormTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormTemplate.js","sourceRoot":"","sources":["../src/FormTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,YAAY,CAAC;AAE/B,MAAM,CAAC,OAAO,UAAU,YAAY;IACnC,OAAO,CACN,eACC,KAAK,EAAC,eAAe,EACrB,IAAI,EAAE,IAAI,CAAC,uBAAuB,qBACjB,IAAI,CAAC,0BAA0B,aAE/C,IAAI,CAAC,SAAS;gBACd,cAAK,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ,YACxC,IAAI,CAAC,eAAe,CAAC,CAAC;wBACtB,eAAM,IAAI,EAAC,QAAQ,GAAQ;wBAC3B,CAAC;4BACD,KAAC,KAAK,IAAC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,cAAc,EAAE,KAAK,EAAC,IAAI,YAAE,IAAI,CAAC,UAAU,GAAS,GAEtE,EAGP,cAAK,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ,YAExC,IAAI,CAAC,aAAa,CAAC,CAAC;oBACnB,4BAEE,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE;4BACvC,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS,CAAC;4BAC1C,OAAO,CACN,cAAK,KAAK,EAAE;oCACX,iBAAiB,EAAE,IAAI;oCACvB,CAAC,yBAAyB,SAAS,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;oCAClD,CAAC,0BAA0B,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI;oCACpD,CAAC,yBAAyB,SAAS,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;oCAClD,CAAC,yBAAyB,SAAS,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;iCAClD,EACD,IAAI,EAAC,QAAQ,YAEZ,eAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,MAAM,qBAAkB,aAAa,CAAC,iBAAiB,aACtF,SAAS,CAAC,UAAU;4CACrB,cAAK,KAAK,EAAC,wBAAwB,YAClC,KAAC,KAAK,IAAC,EAAE,EAAE,GAAG,SAAS,CAAC,GAAG,oBAAoB,EAAE,KAAK,EAAC,IAAI,YAAE,SAAS,CAAC,UAAU,GAAS,GACrF,EAGN,cAAK,KAAK,EAAC,uBAAuB,YACjC,eAAM,IAAI,EAAE,SAAS,CAAC,eAAe,GAAS,GACzC,IACD,GACD,CACN,CAAC;wBACH,CAAC,CACA,GACA;oBACH,CAAC;wBACD,4BAEE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;gCAC7B,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;gCAC3B,OAAO,CACN,cAAK,KAAK,EAAE;wCACX,eAAe,EAAE,IAAI;wCACrB,CAAC,sBAAsB,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI,CAAC,UAAU,KAAK,SAAS;qCACxE,YAEA,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAS,GACpC,CACN,CAAC;4BACH,CAAC,CAAC,GAED,GAEA,IACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import type Form from \"./Form.js\";\nimport Title from \"./Title.js\";\n\nexport default function FormTemplate(this: Form) {\n\treturn (\n\t\t<div\n\t\t\tclass=\"ui5-form-root\"\n\t\t\trole={this.effectiveAccessibleRole}\n\t\t\taria-labelledby={this.effectiveАccessibleNameRef}\n\t\t>\n\t\t\t{this.hasHeader &&\n\t\t\t\t<div class=\"ui5-form-header\" part=\"header\">\n\t\t\t\t\t{this.hasCustomHeader ?\n\t\t\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t\t\t:\n\t\t\t\t\t\t<Title id={`${this._id}-header-text`} level=\"H4\">{this.headerText}</Title>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t<div class=\"ui5-form-layout\" part=\"layout\">\n\t\t\t\t{\n\t\t\t\t\tthis.hasGroupItems ?\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tthis.groupItemsInfo.map(groupItemInfo => {\n\t\t\t\t\t\t\t\t\tconst groupItem = groupItemInfo.groupItem;\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<div class={{\n\t\t\t\t\t\t\t\t\t\t\t\"ui5-form-column\": true,\n\t\t\t\t\t\t\t\t\t\t\t[`ui5-form-column-spanL-${groupItem.colsL}`]: true,\n\t\t\t\t\t\t\t\t\t\t\t[`ui5-form-column-spanXL-${groupItem.colsXl}`]: true,\n\t\t\t\t\t\t\t\t\t\t\t[`ui5-form-column-spanM-${groupItem.colsM}`]: true,\n\t\t\t\t\t\t\t\t\t\t\t[`ui5-form-column-spanS-${groupItem.colsS}`]: true,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tpart=\"column\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"ui5-form-group\" role=\"form\" aria-labelledby={groupItemInfo.accessibleNameRef}>\n\t\t\t\t\t\t\t\t\t\t\t\t{groupItem.headerText &&\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"ui5-form-group-heading\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Title id={`${groupItem._id}-group-header-text`} level=\"H6\">{groupItem.headerText}</Title>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"ui5-form-group-layout\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<slot name={groupItem._individualSlot}></slot>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>\n\t\t\t\t\t\t:\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tthis.itemsInfo.map(itemInfo => {\n\t\t\t\t\t\t\t\t\tconst item = itemInfo.item;\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<div class={{\n\t\t\t\t\t\t\t\t\t\t\t\"ui5-form-item\": true,\n\t\t\t\t\t\t\t\t\t\t\t[`ui5-form-item-span-${item.columnSpan}`]: item.columnSpan !== undefined,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<slot name={item._individualSlot}></slot>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

package/dist/GridWalker.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The GridWalker object represents the elements of a two-dimensional grid system and a position within them.
+ *
+ * @class
+ * @private
+ */
+declare class GridWalker {
+    grid: unknown[][];
+    rowPos: number;
+    colPos: number;
+    pageSize: number;
+    firstRowPos: number;
+    lastRowPos: number;
+    constructor(grid?: unknown[][]);
+    left(): void;
+    right(): void;
+    up(): void;
+    down(): void;
+    pageup(): void;
+    pagedown(): void;
+    home(): void;
+    end(): void;
+    setGrid(grid: unknown[][]): void;
+    getCurrent(): unknown;
+    setCurrent(current: unknown): void;
+    setRowPos(rowPos: number): void;
+    getRowPos(): number;
+    setColPos(colPos: number): void;
+    getColPos(): number;
+    setFirstRowPos(firstRowPos: number): void;
+    getFirstRowPos(): number;
+    setLastRowPos(lastRowPos: number): void;
+    getLastRowPos(): number;
+}
+export default GridWalker;

package/dist/GridWalker.js

@@ -0,0 +1,103 @@
+/**
+ * The GridWalker object represents the elements of a two-dimensional grid system and a position within them.
+ *
+ * @class
+ * @private
+ */
+class GridWalker {
+    constructor(grid = [[]]) {
+        this.rowPos = 0;
+        this.colPos = 0;
+        this.pageSize = 20;
+        this.firstRowPos = 0;
+        this.lastRowPos = 0;
+        this.grid = grid;
+    }
+    left() {
+        this.colPos = Math.max(this.getColPos() - 1, 0);
+    }
+    right() {
+        this.colPos = Math.min(this.getColPos() + 1, this.grid[this.getRowPos()].length - 1);
+    }
+    up() {
+        this.rowPos = Math.max(this.getRowPos() - 1, 0);
+    }
+    down() {
+        this.rowPos = Math.min(this.getRowPos() + 1, this.grid.length - 1);
+    }
+    pageup() {
+        this.colPos = this.getColPos();
+        const rowPos = this.getRowPos();
+        this.rowPos = Math.max(rowPos > this.firstRowPos ? this.firstRowPos : 0, rowPos - this.pageSize);
+    }
+    pagedown() {
+        this.colPos = this.getColPos();
+        const rowPos = this.getRowPos();
+        const endRowPos = this.grid.length - 1;
+        const lastRowPos = endRowPos + this.lastRowPos;
+        this.rowPos = Math.min(rowPos < lastRowPos ? lastRowPos : endRowPos, rowPos + this.pageSize);
+    }
+    home() {
+        this.colPos = this.getColPos();
+        if (this.colPos === 0) {
+            this.rowPos = (this.rowPos > this.firstRowPos) ? this.firstRowPos : 0;
+        }
+        else {
+            this.colPos = (this.colPos > 1) ? 1 : 0;
+        }
+    }
+    end() {
+        this.colPos = this.getColPos();
+        if (this.colPos === 0) {
+            const endRowPos = this.grid.length - 1;
+            const lastRowPos = endRowPos + this.lastRowPos;
+            this.rowPos = (this.rowPos < lastRowPos) ? lastRowPos : endRowPos;
+        }
+        else {
+            const lastColPos = this.grid[this.rowPos].length - 1;
+            this.colPos = (this.colPos < lastColPos) ? lastColPos : 0;
+        }
+    }
+    setGrid(grid) {
+        this.grid = grid;
+    }
+    getCurrent() {
+        return this.grid[this.getRowPos()][this.getColPos()];
+    }
+    setCurrent(current) {
+        this.grid.forEach((row, rowIndex) => {
+            row.forEach((cell, colIndex) => {
+                if (cell === current) {
+                    this.rowPos = rowIndex;
+                    this.colPos = colIndex;
+                }
+            });
+        });
+    }
+    setRowPos(rowPos) {
+        this.rowPos = rowPos;
+    }
+    getRowPos() {
+        return Math.min(this.rowPos, this.grid.length - 1);
+    }
+    setColPos(colPos) {
+        this.colPos = colPos;
+    }
+    getColPos() {
+        return Math.min(this.colPos, this.grid[this.getRowPos()].length - 1);
+    }
+    setFirstRowPos(firstRowPos) {
+        this.firstRowPos = firstRowPos;
+    }
+    getFirstRowPos() {
+        return this.firstRowPos;
+    }
+    setLastRowPos(lastRowPos) {
+        this.lastRowPos = lastRowPos;
+    }
+    getLastRowPos() {
+        return this.lastRowPos;
+    }
+}
+export default GridWalker;
+//# sourceMappingURL=GridWalker.js.map

package/dist/GridWalker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridWalker.js","sourceRoot":"","sources":["../src/GridWalker.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * The GridWalker object represents the elements of a two-dimensional grid system and a position within them.\n *\n * @class\n * @private\n */\nclass GridWalker {\n\tgrid: unknown[][];\n\trowPos: number = 0;\n\tcolPos: number = 0;\n\tpageSize: number = 20;\n\tfirstRowPos: number = 0;\n\tlastRowPos: number = 0;\n\n\tconstructor(grid: unknown[][] = [[]]) {\n\t\tthis.grid = grid;\n\t}\n\n\tleft() {\n\t\tthis.colPos = Math.max(this.getColPos() - 1, 0);\n\t}\n\n\tright() {\n\t\tthis.colPos = Math.min(this.getColPos() + 1, this.grid[this.getRowPos()].length - 1);\n\t}\n\n\tup() {\n\t\tthis.rowPos = Math.max(this.getRowPos() - 1, 0);\n\t}\n\n\tdown() {\n\t\tthis.rowPos = Math.min(this.getRowPos() + 1, this.grid.length - 1);\n\t}\n\n\tpageup() {\n\t\tthis.colPos = this.getColPos();\n\t\tconst rowPos = this.getRowPos();\n\t\tthis.rowPos = Math.max(rowPos > this.firstRowPos ? this.firstRowPos : 0, rowPos - this.pageSize);\n\t}\n\n\tpagedown() {\n\t\tthis.colPos = this.getColPos();\n\t\tconst rowPos = this.getRowPos();\n\t\tconst endRowPos = this.grid.length - 1;\n\t\tconst lastRowPos = endRowPos + this.lastRowPos;\n\t\tthis.rowPos = Math.min(rowPos < lastRowPos ? lastRowPos : endRowPos, rowPos + this.pageSize);\n\t}\n\n\thome() {\n\t\tthis.colPos = this.getColPos();\n\t\tif (this.colPos === 0) {\n\t\t\tthis.rowPos = (this.rowPos > this.firstRowPos) ? this.firstRowPos : 0;\n\t\t} else {\n\t\t\tthis.colPos = (this.colPos > 1) ? 1 : 0;\n\t\t}\n\t}\n\n\tend() {\n\t\tthis.colPos = this.getColPos();\n\t\tif (this.colPos === 0) {\n\t\t\tconst endRowPos = this.grid.length - 1;\n\t\t\tconst lastRowPos = endRowPos + this.lastRowPos;\n\t\t\tthis.rowPos = (this.rowPos < lastRowPos) ? lastRowPos : endRowPos;\n\t\t} else {\n\t\t\tconst lastColPos = this.grid[this.rowPos].length - 1;\n\t\t\tthis.colPos = (this.colPos < lastColPos) ? lastColPos : 0;\n\t\t}\n\t}\n\n\tsetGrid(grid: unknown[][]) {\n\t\tthis.grid = grid;\n\t}\n\n\tgetCurrent() {\n\t\treturn this.grid[this.getRowPos()][this.getColPos()];\n\t}\n\n\tsetCurrent(current: unknown) {\n\t\tthis.grid.forEach((row, rowIndex) => {\n\t\t\trow.forEach((cell, colIndex) => {\n\t\t\t\tif (cell === current) {\n\t\t\t\t\tthis.rowPos = rowIndex;\n\t\t\t\t\tthis.colPos = colIndex;\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t}\n\n\tsetRowPos(rowPos: number) {\n\t\tthis.rowPos = rowPos;\n\t}\n\n\tgetRowPos() {\n\t\treturn Math.min(this.rowPos, this.grid.length - 1);\n\t}\n\n\tsetColPos(colPos: number) {\n\t\tthis.colPos = colPos;\n\t}\n\n\tgetColPos() {\n\t\treturn Math.min(this.colPos, this.grid[this.getRowPos()].length - 1);\n\t}\n\n\tsetFirstRowPos(firstRowPos: number) {\n\t\tthis.firstRowPos = firstRowPos;\n\t}\n\n\tgetFirstRowPos() {\n\t\treturn this.firstRowPos;\n\t}\n\n\tsetLastRowPos(lastRowPos: number) {\n\t\tthis.lastRowPos = lastRowPos;\n\t}\n\n\tgetLastRowPos() {\n\t\treturn this.lastRowPos;\n\t}\n}\n\nexport default GridWalker;\n"]}