@ui5/webcomponents 2.23.0-rc.0 → 2.23.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/.tsbuildinfo +1 -1
- package/dist/Form.d.ts +9 -25
- package/dist/Form.js +42 -207
- package/dist/Form.js.map +1 -1
- package/dist/FormGroup.d.ts +11 -0
- package/dist/FormGroup.js +3 -0
- package/dist/FormGroup.js.map +1 -1
- package/dist/FormItem.d.ts +2 -0
- package/dist/FormItem.js.map +1 -1
- package/dist/FormTemplate.js +26 -15
- package/dist/FormTemplate.js.map +1 -1
- package/dist/ListItem.d.ts +2 -0
- package/dist/ListItem.js +4 -0
- package/dist/ListItem.js.map +1 -1
- package/dist/ListItemTemplate.js +1 -1
- package/dist/ListItemTemplate.js.map +1 -1
- package/dist/MenuItem.d.ts +1 -0
- package/dist/TreeItemBase.d.ts +1 -0
- package/dist/css/themes/Form.css +1 -1
- package/dist/css/themes/FormItem.css +1 -1
- package/dist/css/themes/FormItemSpan.css +1 -1
- package/dist/css/themes/FormLayout.css +1 -1
- package/dist/custom-elements-internal.json +32 -5
- package/dist/custom-elements.json +32 -5
- package/dist/form-utils/FormUtils.d.ts +9 -0
- package/dist/form-utils/FormUtils.js +47 -0
- package/dist/form-utils/FormUtils.js.map +1 -0
- package/dist/generated/assets/i18n/messagebundle_en.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_en_US_sappsd.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_en_US_saprigi.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_en_US_saptrc.json +1 -1
- package/dist/generated/themes/Form.css.d.ts +1 -1
- package/dist/generated/themes/Form.css.js +1 -1
- package/dist/generated/themes/Form.css.js.map +1 -1
- package/dist/generated/themes/FormItem.css.d.ts +1 -1
- package/dist/generated/themes/FormItem.css.js +1 -1
- package/dist/generated/themes/FormItem.css.js.map +1 -1
- package/dist/generated/themes/FormItemSpan.css.d.ts +1 -1
- package/dist/generated/themes/FormItemSpan.css.js +1 -1
- package/dist/generated/themes/FormItemSpan.css.js.map +1 -1
- package/dist/generated/themes/FormLayout.css.d.ts +1 -1
- package/dist/generated/themes/FormLayout.css.js +1 -1
- package/dist/generated/themes/FormLayout.css.js.map +1 -1
- package/dist/vscode.html-custom-data.json +7 -2
- package/dist/web-types.json +15 -5
- package/package.json +9 -9
- package/src/FormTemplate.tsx +41 -23
- package/src/ListItemTemplate.tsx +1 -1
- package/src/i18n/messagebundle_en.properties +341 -0
- package/src/i18n/messagebundle_en_US_sappsd.properties +1 -0
- package/src/i18n/messagebundle_en_US_saprigi.properties +1 -0
- package/src/i18n/messagebundle_en_US_saptrc.properties +1 -0
- package/src/themes/Form.css +4 -2
- package/src/themes/FormItem.css +5 -51
- package/src/themes/FormItemSpan.css +9 -9
- package/src/themes/FormLayout.css +30 -113
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.css.js","sourceRoot":"","sources":["../../../src/generated/themes/Form.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAC1L,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"u\" + \"i\" + \"5\" + \"/\" + \"w\" + \"e\" + \"b\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\", \"sap_horizon\", async () => defaultTheme, \"host\");\nexport default `@container (max-width: 599px){.ui5-form-layout{grid-template-columns:1fr}::slotted(*){justify-self:start}::slotted(:nth-child(2n)){margin-bottom:.5rem}
|
|
1
|
+
{"version":3,"file":"Form.css.js","sourceRoot":"","sources":["../../../src/generated/themes/Form.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAC1L,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"u\" + \"i\" + \"5\" + \"/\" + \"w\" + \"e\" + \"b\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\", \"sap_horizon\", async () => defaultTheme, \"host\");\nexport default `@container (max-width: 599px){.ui5-form-layout{grid-template-columns:repeat(var(--ui5-form-columns-s),1fr)}::slotted(*){justify-self:start}::slotted(:nth-child(2n)){margin-bottom:.5rem}.ui5-form-column{grid-column:span var(--ui5-form-column-span-s, 1)}.ui5-form-group-layout{column-count:var(--ui5-form-column-span-s, 1)}}@container (min-width: 600px) and (max-width: 1023px){.ui5-form-layout{grid-template-columns:repeat(var(--ui5-form-columns-m),1fr)}.ui5-form-column{grid-column:span var(--ui5-form-column-span-m, 1)}.ui5-form-group-layout{column-count:var(--ui5-form-column-span-m, 1)}}@container (min-width: 1024px) and (max-width: 1439px){.ui5-form-layout{grid-template-columns:repeat(var(--ui5-form-columns-l),1fr)}.ui5-form-column{grid-column:span var(--ui5-form-column-span-l, 1)}.ui5-form-group-layout{column-count:var(--ui5-form-column-span-l, 1)}}@container (min-width: 1440px){.ui5-form-layout{grid-template-columns:repeat(var(--ui5-form-columns-xl),1fr)}.ui5-form-column{grid-column:span var(--ui5-form-column-span-xl, 1)}.ui5-form-group-layout{column-count:var(--ui5-form-column-span-xl, 1)}}:host{--ui5-form-item-label-justify-internal: start;--ui5-form-item-label-padding-internal: .625rem .25rem 0 .25rem}@container (max-width: 599px){.ui5-form-item,.ui5-form-group{--ui5-form-item-layout: var(--ui5-form-item-layout-S)}:host(:is([label-span~=\"S12\"],:not([label-span*=\"S\"]))) .ui5-form-item,:host(:is([label-span~=\"S12\"],:not([label-span*=\"S\"]))) .ui5-form-group{--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal)}}@container (min-width: 600px) and (max-width: 1023px){.ui5-form-item,.ui5-form-group{--ui5-form-item-layout: var(--ui5-form-item-layout-M)}:host([label-span~=\"M12\"]) .ui5-form-item,:host([label-span~=\"M12\"]) .ui5-form-group{--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal)}}@container (min-width: 1024px) and (max-width: 1439px){.ui5-form-item,.ui5-form-group{--ui5-form-item-layout: var(--ui5-form-item-layout-L)}:host([label-span~=\"L12\"]) .ui5-form-item,:host([label-span~=\"L12\"]) .ui5-form-group{--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal)}}@container (min-width: 1440px){.ui5-form-item,.ui5-form-group{--ui5-form-item-layout: var(--ui5-form-item-layout-XL)}:host([label-span~=\"XL12\"]) .ui5-form-item,:host([label-span~=\"XL12\"]) .ui5-form-group{--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal)}}:host{display:block;container-type:inline-size}.ui5-form-root{display:flex;flex-direction:column;background-color:var(--sapGroup_ContentBackground);border-radius:.75rem}.ui5-form-header{display:flex;min-height:2.75rem;align-items:center;border-bottom:1px solid var(--sapGroup_TitleBorderColor);padding:.875rem 1rem;box-sizing:border-box}.ui5-form-layout{display:grid;column-gap:1rem;row-gap:.125rem;padding:1rem .75rem}.ui5-form-group-layout{display:block;column-gap:1rem}.ui5-form-group-heading{height:var(--_ui5-form-group-heading-height);line-height:var(--_ui5-form-group-heading-height);padding-inline-start:.25rem}.ui5-form-column{padding-top:.5rem;padding-bottom:1rem;box-sizing:border-box}::slotted([ui5-form-group]){display:contents}dl{padding:0;margin:0;border:0 transparent}\n`"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _default: ":host(:not([hidden])){display:block;width:100%}:host
|
|
1
|
+
declare const _default: ":host(:not([hidden])){display:block;width:100%}:host{break-inside:avoid}.ui5-form-item-root{background-color:inherit;color:inherit}.ui5-form-item-layout{display:grid;grid-template-columns:var(--ui5-form-item-layout, 4fr 8fr 0fr);align-items:center}.ui5-form-item-label{padding:var(--ui5-form-item-label-padding, .125rem 0);padding-inline-end:.85rem;justify-self:var(--ui5-form-item-label-justify, end)}.ui5-form-item-content{overflow:hidden;width:100%;display:flex;padding:0 .25rem}.ui5-form-item-content-child{padding-inline-end:.5rem;box-sizing:border-box;width:100%}:host([item-spacing=\"Large\"]) .ui5-form-item-layout{min-height:var(--_ui5_form_item_min_height);padding-top:var(--_ui5_form_item_padding);padding-bottom:var(--_ui5_form_item_padding);box-sizing:border-box}::slotted(*){width:100%}dd{padding:0;margin:0;border:0 transparent}\n";
|
|
2
2
|
export default _default;
|
|
@@ -3,6 +3,6 @@ import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/s
|
|
|
3
3
|
import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
4
4
|
registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
5
5
|
registerThemePropertiesLoader("@" + "u" + "i" + "5" + "/" + "w" + "e" + "b" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme, "host");
|
|
6
|
-
export default `:host(:not([hidden])){display:block;width:100%}:host
|
|
6
|
+
export default `:host(:not([hidden])){display:block;width:100%}:host{break-inside:avoid}.ui5-form-item-root{background-color:inherit;color:inherit}.ui5-form-item-layout{display:grid;grid-template-columns:var(--ui5-form-item-layout, 4fr 8fr 0fr);align-items:center}.ui5-form-item-label{padding:var(--ui5-form-item-label-padding, .125rem 0);padding-inline-end:.85rem;justify-self:var(--ui5-form-item-label-justify, end)}.ui5-form-item-content{overflow:hidden;width:100%;display:flex;padding:0 .25rem}.ui5-form-item-content-child{padding-inline-end:.5rem;box-sizing:border-box;width:100%}:host([item-spacing="Large"]) .ui5-form-item-layout{min-height:var(--_ui5_form_item_min_height);padding-top:var(--_ui5_form_item_padding);padding-bottom:var(--_ui5_form_item_padding);box-sizing:border-box}::slotted(*){width:100%}dd{padding:0;margin:0;border:0 transparent}
|
|
7
7
|
`;
|
|
8
8
|
//# sourceMappingURL=FormItem.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormItem.css.js","sourceRoot":"","sources":["../../../src/generated/themes/FormItem.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAC1L,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"u\" + \"i\" + \"5\" + \"/\" + \"w\" + \"e\" + \"b\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\", \"sap_horizon\", async () => defaultTheme, \"host\");\nexport default `:host(:not([hidden])){display:block;width:100%}:host
|
|
1
|
+
{"version":3,"file":"FormItem.css.js","sourceRoot":"","sources":["../../../src/generated/themes/FormItem.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAC1L,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"u\" + \"i\" + \"5\" + \"/\" + \"w\" + \"e\" + \"b\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\", \"sap_horizon\", async () => defaultTheme, \"host\");\nexport default `:host(:not([hidden])){display:block;width:100%}:host{break-inside:avoid}.ui5-form-item-root{background-color:inherit;color:inherit}.ui5-form-item-layout{display:grid;grid-template-columns:var(--ui5-form-item-layout, 4fr 8fr 0fr);align-items:center}.ui5-form-item-label{padding:var(--ui5-form-item-label-padding, .125rem 0);padding-inline-end:.85rem;justify-self:var(--ui5-form-item-label-justify, end)}.ui5-form-item-content{overflow:hidden;width:100%;display:flex;padding:0 .25rem}.ui5-form-item-content-child{padding-inline-end:.5rem;box-sizing:border-box;width:100%}:host([item-spacing=\"Large\"]) .ui5-form-item-layout{min-height:var(--_ui5_form_item_min_height);padding-top:var(--_ui5_form_item_padding);padding-bottom:var(--_ui5_form_item_padding);box-sizing:border-box}::slotted(*){width:100%}dd{padding:0;margin:0;border:0 transparent}\n`"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _default: ":host{--ui5-form-item-label-justify-internal: start;--ui5-form-item-label-padding-internal: .625rem .25rem 0 .25rem}@container (max-width: 599px){.ui5-form-item,.ui5-form-group{--ui5-form-item-layout: var(--ui5-form-item-layout-S)}:host([label-span-
|
|
1
|
+
declare const _default: ":host{--ui5-form-item-label-justify-internal: start;--ui5-form-item-label-padding-internal: .625rem .25rem 0 .25rem}@container (max-width: 599px){.ui5-form-item,.ui5-form-group{--ui5-form-item-layout: var(--ui5-form-item-layout-S)}:host(:is([label-span~=\"S12\"],:not([label-span*=\"S\"]))) .ui5-form-item,:host(:is([label-span~=\"S12\"],:not([label-span*=\"S\"]))) .ui5-form-group{--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal)}}@container (min-width: 600px) and (max-width: 1023px){.ui5-form-item,.ui5-form-group{--ui5-form-item-layout: var(--ui5-form-item-layout-M)}:host([label-span~=\"M12\"]) .ui5-form-item,:host([label-span~=\"M12\"]) .ui5-form-group{--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal)}}@container (min-width: 1024px) and (max-width: 1439px){.ui5-form-item,.ui5-form-group{--ui5-form-item-layout: var(--ui5-form-item-layout-L)}:host([label-span~=\"L12\"]) .ui5-form-item,:host([label-span~=\"L12\"]) .ui5-form-group{--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal)}}@container (min-width: 1440px){.ui5-form-item,.ui5-form-group{--ui5-form-item-layout: var(--ui5-form-item-layout-XL)}:host([label-span~=\"XL12\"]) .ui5-form-item,:host([label-span~=\"XL12\"]) .ui5-form-group{--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal)}}\n";
|
|
2
2
|
export default _default;
|
|
@@ -3,6 +3,6 @@ import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/s
|
|
|
3
3
|
import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
4
4
|
registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
5
5
|
registerThemePropertiesLoader("@" + "u" + "i" + "5" + "/" + "w" + "e" + "b" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme, "host");
|
|
6
|
-
export default `:host{--ui5-form-item-label-justify-internal: start;--ui5-form-item-label-padding-internal: .625rem .25rem 0 .25rem}@container (max-width: 599px){.ui5-form-item,.ui5-form-group{--ui5-form-item-layout: var(--ui5-form-item-layout-S)}:host([label-span-
|
|
6
|
+
export default `:host{--ui5-form-item-label-justify-internal: start;--ui5-form-item-label-padding-internal: .625rem .25rem 0 .25rem}@container (max-width: 599px){.ui5-form-item,.ui5-form-group{--ui5-form-item-layout: var(--ui5-form-item-layout-S)}:host(:is([label-span~="S12"],:not([label-span*="S"]))) .ui5-form-item,:host(:is([label-span~="S12"],:not([label-span*="S"]))) .ui5-form-group{--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal)}}@container (min-width: 600px) and (max-width: 1023px){.ui5-form-item,.ui5-form-group{--ui5-form-item-layout: var(--ui5-form-item-layout-M)}:host([label-span~="M12"]) .ui5-form-item,:host([label-span~="M12"]) .ui5-form-group{--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal)}}@container (min-width: 1024px) and (max-width: 1439px){.ui5-form-item,.ui5-form-group{--ui5-form-item-layout: var(--ui5-form-item-layout-L)}:host([label-span~="L12"]) .ui5-form-item,:host([label-span~="L12"]) .ui5-form-group{--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal)}}@container (min-width: 1440px){.ui5-form-item,.ui5-form-group{--ui5-form-item-layout: var(--ui5-form-item-layout-XL)}:host([label-span~="XL12"]) .ui5-form-item,:host([label-span~="XL12"]) .ui5-form-group{--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal)}}
|
|
7
7
|
`;
|
|
8
8
|
//# sourceMappingURL=FormItemSpan.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormItemSpan.css.js","sourceRoot":"","sources":["../../../src/generated/themes/FormItemSpan.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAC1L,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"u\" + \"i\" + \"5\" + \"/\" + \"w\" + \"e\" + \"b\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\", \"sap_horizon\", async () => defaultTheme, \"host\");\nexport default `:host{--ui5-form-item-label-justify-internal: start;--ui5-form-item-label-padding-internal: .625rem .25rem 0 .25rem}@container (max-width: 599px){.ui5-form-item,.ui5-form-group{--ui5-form-item-layout: var(--ui5-form-item-layout-S)}:host([label-span-
|
|
1
|
+
{"version":3,"file":"FormItemSpan.css.js","sourceRoot":"","sources":["../../../src/generated/themes/FormItemSpan.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAC1L,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"u\" + \"i\" + \"5\" + \"/\" + \"w\" + \"e\" + \"b\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\", \"sap_horizon\", async () => defaultTheme, \"host\");\nexport default `:host{--ui5-form-item-label-justify-internal: start;--ui5-form-item-label-padding-internal: .625rem .25rem 0 .25rem}@container (max-width: 599px){.ui5-form-item,.ui5-form-group{--ui5-form-item-layout: var(--ui5-form-item-layout-S)}:host(:is([label-span~=\"S12\"],:not([label-span*=\"S\"]))) .ui5-form-item,:host(:is([label-span~=\"S12\"],:not([label-span*=\"S\"]))) .ui5-form-group{--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal)}}@container (min-width: 600px) and (max-width: 1023px){.ui5-form-item,.ui5-form-group{--ui5-form-item-layout: var(--ui5-form-item-layout-M)}:host([label-span~=\"M12\"]) .ui5-form-item,:host([label-span~=\"M12\"]) .ui5-form-group{--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal)}}@container (min-width: 1024px) and (max-width: 1439px){.ui5-form-item,.ui5-form-group{--ui5-form-item-layout: var(--ui5-form-item-layout-L)}:host([label-span~=\"L12\"]) .ui5-form-item,:host([label-span~=\"L12\"]) .ui5-form-group{--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal)}}@container (min-width: 1440px){.ui5-form-item,.ui5-form-group{--ui5-form-item-layout: var(--ui5-form-item-layout-XL)}:host([label-span~=\"XL12\"]) .ui5-form-item,:host([label-span~=\"XL12\"]) .ui5-form-group{--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-internal);--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-internal)}}\n`"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _default: "@container (max-width: 599px){.ui5-form-layout{grid-template-columns:1fr}::slotted(*){justify-self:start}::slotted(:nth-child(2n)){margin-bottom:.5rem}
|
|
1
|
+
declare const _default: "@container (max-width: 599px){.ui5-form-layout{grid-template-columns:repeat(var(--ui5-form-columns-s),1fr)}::slotted(*){justify-self:start}::slotted(:nth-child(2n)){margin-bottom:.5rem}.ui5-form-column{grid-column:span var(--ui5-form-column-span-s, 1)}.ui5-form-group-layout{column-count:var(--ui5-form-column-span-s, 1)}}@container (min-width: 600px) and (max-width: 1023px){.ui5-form-layout{grid-template-columns:repeat(var(--ui5-form-columns-m),1fr)}.ui5-form-column{grid-column:span var(--ui5-form-column-span-m, 1)}.ui5-form-group-layout{column-count:var(--ui5-form-column-span-m, 1)}}@container (min-width: 1024px) and (max-width: 1439px){.ui5-form-layout{grid-template-columns:repeat(var(--ui5-form-columns-l),1fr)}.ui5-form-column{grid-column:span var(--ui5-form-column-span-l, 1)}.ui5-form-group-layout{column-count:var(--ui5-form-column-span-l, 1)}}@container (min-width: 1440px){.ui5-form-layout{grid-template-columns:repeat(var(--ui5-form-columns-xl),1fr)}.ui5-form-column{grid-column:span var(--ui5-form-column-span-xl, 1)}.ui5-form-group-layout{column-count:var(--ui5-form-column-span-xl, 1)}}\n";
|
|
2
2
|
export default _default;
|
|
@@ -3,6 +3,6 @@ import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/s
|
|
|
3
3
|
import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
4
4
|
registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
5
5
|
registerThemePropertiesLoader("@" + "u" + "i" + "5" + "/" + "w" + "e" + "b" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme, "host");
|
|
6
|
-
export default `@container (max-width: 599px){.ui5-form-layout{grid-template-columns:1fr}::slotted(*){justify-self:start}::slotted(:nth-child(2n)){margin-bottom:.5rem}
|
|
6
|
+
export default `@container (max-width: 599px){.ui5-form-layout{grid-template-columns:repeat(var(--ui5-form-columns-s),1fr)}::slotted(*){justify-self:start}::slotted(:nth-child(2n)){margin-bottom:.5rem}.ui5-form-column{grid-column:span var(--ui5-form-column-span-s, 1)}.ui5-form-group-layout{column-count:var(--ui5-form-column-span-s, 1)}}@container (min-width: 600px) and (max-width: 1023px){.ui5-form-layout{grid-template-columns:repeat(var(--ui5-form-columns-m),1fr)}.ui5-form-column{grid-column:span var(--ui5-form-column-span-m, 1)}.ui5-form-group-layout{column-count:var(--ui5-form-column-span-m, 1)}}@container (min-width: 1024px) and (max-width: 1439px){.ui5-form-layout{grid-template-columns:repeat(var(--ui5-form-columns-l),1fr)}.ui5-form-column{grid-column:span var(--ui5-form-column-span-l, 1)}.ui5-form-group-layout{column-count:var(--ui5-form-column-span-l, 1)}}@container (min-width: 1440px){.ui5-form-layout{grid-template-columns:repeat(var(--ui5-form-columns-xl),1fr)}.ui5-form-column{grid-column:span var(--ui5-form-column-span-xl, 1)}.ui5-form-group-layout{column-count:var(--ui5-form-column-span-xl, 1)}}
|
|
7
7
|
`;
|
|
8
8
|
//# sourceMappingURL=FormLayout.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormLayout.css.js","sourceRoot":"","sources":["../../../src/generated/themes/FormLayout.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAC1L,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"u\" + \"i\" + \"5\" + \"/\" + \"w\" + \"e\" + \"b\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\", \"sap_horizon\", async () => defaultTheme, \"host\");\nexport default `@container (max-width: 599px){.ui5-form-layout{grid-template-columns:1fr}::slotted(*){justify-self:start}::slotted(:nth-child(2n)){margin-bottom:.5rem}
|
|
1
|
+
{"version":3,"file":"FormLayout.css.js","sourceRoot":"","sources":["../../../src/generated/themes/FormLayout.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAC1L,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"u\" + \"i\" + \"5\" + \"/\" + \"w\" + \"e\" + \"b\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\", \"sap_horizon\", async () => defaultTheme, \"host\");\nexport default `@container (max-width: 599px){.ui5-form-layout{grid-template-columns:repeat(var(--ui5-form-columns-s),1fr)}::slotted(*){justify-self:start}::slotted(:nth-child(2n)){margin-bottom:.5rem}.ui5-form-column{grid-column:span var(--ui5-form-column-span-s, 1)}.ui5-form-group-layout{column-count:var(--ui5-form-column-span-s, 1)}}@container (min-width: 600px) and (max-width: 1023px){.ui5-form-layout{grid-template-columns:repeat(var(--ui5-form-columns-m),1fr)}.ui5-form-column{grid-column:span var(--ui5-form-column-span-m, 1)}.ui5-form-group-layout{column-count:var(--ui5-form-column-span-m, 1)}}@container (min-width: 1024px) and (max-width: 1439px){.ui5-form-layout{grid-template-columns:repeat(var(--ui5-form-columns-l),1fr)}.ui5-form-column{grid-column:span var(--ui5-form-column-span-l, 1)}.ui5-form-group-layout{column-count:var(--ui5-form-column-span-l, 1)}}@container (min-width: 1440px){.ui5-form-layout{grid-template-columns:repeat(var(--ui5-form-columns-xl),1fr)}.ui5-form-column{grid-column:span var(--ui5-form-column-span-xl, 1)}.ui5-form-group-layout{column-count:var(--ui5-form-column-span-xl, 1)}}\n`"]}
|
|
@@ -2053,7 +2053,7 @@
|
|
|
2053
2053
|
},
|
|
2054
2054
|
{
|
|
2055
2055
|
"name": "ui5-form",
|
|
2056
|
-
"description": "### Overview\n\nThe Form is a layout component that arranges labels and form fields (like input fields) pairs\ninto a specific number of columns.\n\n**Note:** The Form web component is a layout component, it isn't a replacement for the native `form` HTML element.\nThe Form web component does not provide any APIs for form submission.\n\n### Structure\n\n- **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness.\n- **FormGroup** (`ui5-form-group`) enables the grouping of the Form content.\n- **FormItem** (`ui5-form-item`) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup.\n\nThe simplest Form (`ui5-form`) consists of a header area on top,\ndisplaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item),\nrepresenting the pairs of label and form fields.\n\nAnd, there is also \"grouping\" available to assist the implementation of richer UIs.\nThis is enabled by the FormGroup (`ui5-form-group`) component.\nIn this case, the Form is structured into FormGroups and each FormGroup consists of FormItems.\n\n### Responsiveness\n\nThe Form component reacts and changes its layout on predefined breakpoints.\nDepending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:\n- **S** (0 - 599px) – 1 column is recommended (default: 1)\n- **M** (600px - 1023px) – up to 2 columns are recommended (default: 1)\n- **L** (1024px - 1439px) - up to 3 columns are recommended (default: 2)\n- **XL** (>= 1440px) – up to 6 columns are recommended (default: 3)\n\nTo change the layout, use the `layout` property - f.e. layout=\"S1 M2 L3 XL6\".\n\n### Groups\n\nTo make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy.\n\n- **Example #1** (perfect match):\n4 columns and 4 groups: each group will use 1 column.\n\n- **Example #2** (balanced distribution):\n4 columns and 2 groups: each group will use 2 columns.\n6 columns and 2 groups: each group will use 3 columns.\n\n- **Example #3** (unbalanced distribution):\n3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.\n5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column.\n\n**Note:** The size of a group element is determined by the number of FormItems assigned to it.\nIn the case of equality, the first in the DOM will use more columns, and the last - fewer columns.\n\n- **Example #4** (more groups than columns):\n3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.\n\n### Groups Column Span\n\nTo influence the built-in group distribution, described in the previous section,\nyou can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to.\n\n### Items Column Span\n\nFormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form.\n\n### Items Label Span\n\nThe placement of the labels depends on the size of the used column.\nIf there is enough space, the labels are next to their associated fields, otherwise - above the fields.\nBy default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.\nYou can control what space the labels should take via the `labelSpan` property.\n\n**For example:** To always place the labels on top set: `labelSpan=\"S12 M12 L12 XL12\"` property.\n\n### Items Empty Span\n\nBy default, a form item spans 12 cells, fully divided between its label and field, with no empty space at the end:\n- **Label:** occupies 4 cells.\n- **Field:** occupies 8 cells.\n\nThe `emptySpan` property provides additional layout flexibility by defining empty space at the form item’s end.\n\n**For example:** Setting \"S0 M0 L3 XL3\" (or just \"L3 XL3\") adjusts the layout as follows:\n- **Label:** remains 4 cells.\n- **Field:** is reduced to 5 cells.\n- **Empty space:** 3 cells are added at the end.\n\nGreater values increase the empty space at the end of the form item, reducing the space available for the label and its field.\nHowever, setting `emptySpan` to 1 cell is recommended and typically sufficient to achieve a balanced layout.\n\n### Navigation flow\n\
|
|
2056
|
+
"description": "### Overview\n\nThe Form is a layout component that arranges labels and form fields (like input fields) pairs\ninto a specific number of columns.\n\n**Note:** The Form web component is a layout component, it isn't a replacement for the native `form` HTML element.\nThe Form web component does not provide any APIs for form submission.\n\n### Structure\n\n- **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness.\n- **FormGroup** (`ui5-form-group`) enables the grouping of the Form content.\n- **FormItem** (`ui5-form-item`) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup.\n\nThe simplest Form (`ui5-form`) consists of a header area on top,\ndisplaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item),\nrepresenting the pairs of label and form fields.\n\nAnd, there is also \"grouping\" available to assist the implementation of richer UIs.\nThis is enabled by the FormGroup (`ui5-form-group`) component.\nIn this case, the Form is structured into FormGroups and each FormGroup consists of FormItems.\n\n### Responsiveness\n\nThe Form component reacts and changes its layout on predefined breakpoints.\nDepending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:\n- **S** (0 - 599px) – 1 column is recommended (default: 1)\n- **M** (600px - 1023px) – up to 2 columns are recommended (default: 1)\n- **L** (1024px - 1439px) - up to 3 columns are recommended (default: 2)\n- **XL** (>= 1440px) – up to 6 columns are recommended (default: 3)\n\nTo change the layout, use the `layout` property - f.e. layout=\"S1 M2 L3 XL6\".\n\n### Groups\n\nTo make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy.\n\n- **Example #1** (perfect match):\n4 columns and 4 groups: each group will use 1 column.\n\n- **Example #2** (balanced distribution):\n4 columns and 2 groups: each group will use 2 columns.\n6 columns and 2 groups: each group will use 3 columns.\n\n- **Example #3** (unbalanced distribution):\n3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.\n5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column.\n\n**Note:** The size of a group element is determined by the number of FormItems assigned to it.\nIn the case of equality, the first in the DOM will use more columns, and the last - fewer columns.\n\n- **Example #4** (more groups than columns):\n3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.\n\n### Groups Column Span\n\nTo influence the built-in group distribution, described in the previous section,\nyou can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to.\n\n### Items Column Span\n\nFormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form.\n\n### Items Label Span\n\nThe placement of the labels depends on the size of the used column.\nIf there is enough space, the labels are next to their associated fields, otherwise - above the fields.\nBy default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.\nYou can control what space the labels should take via the `labelSpan` property.\n\n**For example:** To always place the labels on top set: `labelSpan=\"S12 M12 L12 XL12\"` property.\n\n### Items Empty Span\n\nBy default, a form item spans 12 cells, fully divided between its label and field, with no empty space at the end:\n- **Label:** occupies 4 cells.\n- **Field:** occupies 8 cells.\n\nThe `emptySpan` property provides additional layout flexibility by defining empty space at the form item’s end.\n\n**For example:** Setting \"S0 M0 L3 XL3\" (or just \"L3 XL3\") adjusts the layout as follows:\n- **Label:** remains 4 cells.\n- **Field:** is reduced to 5 cells.\n- **Empty space:** 3 cells are added at the end.\n\nGreater values increase the empty space at the end of the form item, reducing the space available for the label and its field.\nHowever, setting `emptySpan` to 1 cell is recommended and typically sufficient to achieve a balanced layout.\n\n### Navigation flow\n\nItems are grouped into `ui5-form-group` elements, allowing the following navigation:\n\n- **Single-Column Group**: Focus moves vertically down from one item to the next.\n ```\n | 1 |\n | 2 |\n | 3 |\n ```\n\n- **Multi-Column Group**: Focus moves horizontally within each row, advancing to the next row after completing the current one.\n ```\n | 1 | 4 |\n | 2 | 5 |\n | 3 | 6 |\n ```\n\n### Keyboard Handling\n\n- [Tab] - Moves the focus to the next interactive element within the Form/FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [Tab] - Moves the focus to the previous interactive element within the Form/FormGroup (if available) or to the previous element in the tab chain outside the Form\n- [F6] - Moves the focus to the first interactive element of the next FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [F6] - Moves the focus to the first interactive element of the previous FormGroup (if available) or to the previous element in the tab chain outside the Form\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/Form.js\";\n- import @ui5/webcomponents/dist/FormGroup.js\";\n- import @ui5/webcomponents/dist/FormItem.js\";\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the component content - FormGroups or FormItems.\n\n**Note:** Mixing FormGroups and standalone FormItems (not belonging to a group) is not supported.\nEither use FormGroups and make sure all FormItems are part of a FormGroup, or use just FormItems without any FormGroups.\n\n**Note:** As of version 2.23.0 the support for standalone FormItems (not belonging to a group) is deprecated.\nWe recommend using FormGroups, as they provide better accessibility and layout options.\n- **header** - Defines the component header area.\n\n**Note:** When a `header` is provided, the `headerText` property is ignored.\n\n### **CSS Parts:**\n - **column** - Used to style a single column of the form column layout.\n- **header** - Used to style the wrapper of the header.\n- **layout** - Used to style the element defining the form column layout.",
|
|
2057
2057
|
"attributes": [
|
|
2058
2058
|
{
|
|
2059
2059
|
"name": "accessible-mode",
|
|
@@ -2124,9 +2124,14 @@
|
|
|
2124
2124
|
"description": "Defines id (or many ids) of the element (or elements) that label the component.",
|
|
2125
2125
|
"values": []
|
|
2126
2126
|
},
|
|
2127
|
+
{
|
|
2128
|
+
"name": "col-span",
|
|
2129
|
+
"description": "Defines the number of columns to distribute the form content by breakpoint (S1 M2 L3 XL4 for example).\n\n**Note:** This property is ignored if `columnSpan` is set, as it is expected that the column span is defined.",
|
|
2130
|
+
"values": []
|
|
2131
|
+
},
|
|
2127
2132
|
{
|
|
2128
2133
|
"name": "column-span",
|
|
2129
|
-
"description": "Defines column span of the component,\ne.g how many columns the group should span to.",
|
|
2134
|
+
"description": "Defines column span of the component,\ne.g how many columns the group should span to.\n\n**Note:** If this property is set, it has higher priority than `colSpan` and `colSpan` will be ignored.",
|
|
2130
2135
|
"values": []
|
|
2131
2136
|
},
|
|
2132
2137
|
{
|
package/dist/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@ui5/webcomponents",
|
|
4
|
-
"version": "2.23.0-rc.
|
|
4
|
+
"version": "2.23.0-rc.1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -4225,7 +4225,7 @@
|
|
|
4225
4225
|
},
|
|
4226
4226
|
{
|
|
4227
4227
|
"name": "ui5-form",
|
|
4228
|
-
"description": "### Overview\n\nThe Form is a layout component that arranges labels and form fields (like input fields) pairs\ninto a specific number of columns.\n\n**Note:** The Form web component is a layout component, it isn't a replacement for the native `form` HTML element.\nThe Form web component does not provide any APIs for form submission.\n\n### Structure\n\n- **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness.\n- **FormGroup** (`ui5-form-group`) enables the grouping of the Form content.\n- **FormItem** (`ui5-form-item`) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup.\n\nThe simplest Form (`ui5-form`) consists of a header area on top,\ndisplaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item),\nrepresenting the pairs of label and form fields.\n\nAnd, there is also \"grouping\" available to assist the implementation of richer UIs.\nThis is enabled by the FormGroup (`ui5-form-group`) component.\nIn this case, the Form is structured into FormGroups and each FormGroup consists of FormItems.\n\n### Responsiveness\n\nThe Form component reacts and changes its layout on predefined breakpoints.\nDepending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:\n- **S** (0 - 599px) – 1 column is recommended (default: 1)\n- **M** (600px - 1023px) – up to 2 columns are recommended (default: 1)\n- **L** (1024px - 1439px) - up to 3 columns are recommended (default: 2)\n- **XL** (>= 1440px) – up to 6 columns are recommended (default: 3)\n\nTo change the layout, use the `layout` property - f.e. layout=\"S1 M2 L3 XL6\".\n\n### Groups\n\nTo make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy.\n\n- **Example #1** (perfect match):\n4 columns and 4 groups: each group will use 1 column.\n\n- **Example #2** (balanced distribution):\n4 columns and 2 groups: each group will use 2 columns.\n6 columns and 2 groups: each group will use 3 columns.\n\n- **Example #3** (unbalanced distribution):\n3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.\n5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column.\n\n**Note:** The size of a group element is determined by the number of FormItems assigned to it.\nIn the case of equality, the first in the DOM will use more columns, and the last - fewer columns.\n\n- **Example #4** (more groups than columns):\n3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.\n\n### Groups Column Span\n\nTo influence the built-in group distribution, described in the previous section,\nyou can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to.\n\n### Items Column Span\n\nFormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form.\n\n### Items Label Span\n\nThe placement of the labels depends on the size of the used column.\nIf there is enough space, the labels are next to their associated fields, otherwise - above the fields.\nBy default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.\nYou can control what space the labels should take via the `labelSpan` property.\n\n**For example:** To always place the labels on top set: `labelSpan=\"S12 M12 L12 XL12\"` property.\n\n### Items Empty Span\n\nBy default, a form item spans 12 cells, fully divided between its label and field, with no empty space at the end:\n- **Label:** occupies 4 cells.\n- **Field:** occupies 8 cells.\n\nThe `emptySpan` property provides additional layout flexibility by defining empty space at the form item’s end.\n\n**For example:** Setting \"S0 M0 L3 XL3\" (or just \"L3 XL3\") adjusts the layout as follows:\n- **Label:** remains 4 cells.\n- **Field:** is reduced to 5 cells.\n- **Empty space:** 3 cells are added at the end.\n\nGreater values increase the empty space at the end of the form item, reducing the space available for the label and its field.\nHowever, setting `emptySpan` to 1 cell is recommended and typically sufficient to achieve a balanced layout.\n\n### Navigation flow\n\
|
|
4228
|
+
"description": "### Overview\n\nThe Form is a layout component that arranges labels and form fields (like input fields) pairs\ninto a specific number of columns.\n\n**Note:** The Form web component is a layout component, it isn't a replacement for the native `form` HTML element.\nThe Form web component does not provide any APIs for form submission.\n\n### Structure\n\n- **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness.\n- **FormGroup** (`ui5-form-group`) enables the grouping of the Form content.\n- **FormItem** (`ui5-form-item`) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup.\n\nThe simplest Form (`ui5-form`) consists of a header area on top,\ndisplaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item),\nrepresenting the pairs of label and form fields.\n\nAnd, there is also \"grouping\" available to assist the implementation of richer UIs.\nThis is enabled by the FormGroup (`ui5-form-group`) component.\nIn this case, the Form is structured into FormGroups and each FormGroup consists of FormItems.\n\n### Responsiveness\n\nThe Form component reacts and changes its layout on predefined breakpoints.\nDepending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:\n- **S** (0 - 599px) – 1 column is recommended (default: 1)\n- **M** (600px - 1023px) – up to 2 columns are recommended (default: 1)\n- **L** (1024px - 1439px) - up to 3 columns are recommended (default: 2)\n- **XL** (>= 1440px) – up to 6 columns are recommended (default: 3)\n\nTo change the layout, use the `layout` property - f.e. layout=\"S1 M2 L3 XL6\".\n\n### Groups\n\nTo make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy.\n\n- **Example #1** (perfect match):\n4 columns and 4 groups: each group will use 1 column.\n\n- **Example #2** (balanced distribution):\n4 columns and 2 groups: each group will use 2 columns.\n6 columns and 2 groups: each group will use 3 columns.\n\n- **Example #3** (unbalanced distribution):\n3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.\n5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column.\n\n**Note:** The size of a group element is determined by the number of FormItems assigned to it.\nIn the case of equality, the first in the DOM will use more columns, and the last - fewer columns.\n\n- **Example #4** (more groups than columns):\n3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.\n\n### Groups Column Span\n\nTo influence the built-in group distribution, described in the previous section,\nyou can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to.\n\n### Items Column Span\n\nFormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form.\n\n### Items Label Span\n\nThe placement of the labels depends on the size of the used column.\nIf there is enough space, the labels are next to their associated fields, otherwise - above the fields.\nBy default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.\nYou can control what space the labels should take via the `labelSpan` property.\n\n**For example:** To always place the labels on top set: `labelSpan=\"S12 M12 L12 XL12\"` property.\n\n### Items Empty Span\n\nBy default, a form item spans 12 cells, fully divided between its label and field, with no empty space at the end:\n- **Label:** occupies 4 cells.\n- **Field:** occupies 8 cells.\n\nThe `emptySpan` property provides additional layout flexibility by defining empty space at the form item’s end.\n\n**For example:** Setting \"S0 M0 L3 XL3\" (or just \"L3 XL3\") adjusts the layout as follows:\n- **Label:** remains 4 cells.\n- **Field:** is reduced to 5 cells.\n- **Empty space:** 3 cells are added at the end.\n\nGreater values increase the empty space at the end of the form item, reducing the space available for the label and its field.\nHowever, setting `emptySpan` to 1 cell is recommended and typically sufficient to achieve a balanced layout.\n\n### Navigation flow\n\nItems are grouped into `ui5-form-group` elements, allowing the following navigation:\n\n- **Single-Column Group**: Focus moves vertically down from one item to the next.\n ```\n | 1 |\n | 2 |\n | 3 |\n ```\n\n- **Multi-Column Group**: Focus moves horizontally within each row, advancing to the next row after completing the current one.\n ```\n | 1 | 4 |\n | 2 | 5 |\n | 3 | 6 |\n ```\n\n### Keyboard Handling\n\n- [Tab] - Moves the focus to the next interactive element within the Form/FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [Tab] - Moves the focus to the previous interactive element within the Form/FormGroup (if available) or to the previous element in the tab chain outside the Form\n- [F6] - Moves the focus to the first interactive element of the next FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [F6] - Moves the focus to the first interactive element of the previous FormGroup (if available) or to the previous element in the tab chain outside the Form\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/Form.js\";\n- import @ui5/webcomponents/dist/FormGroup.js\";\n- import @ui5/webcomponents/dist/FormItem.js\";\n---\n\n\n### **Slots:**\n - **default** - Defines the component content - FormGroups or FormItems.\n\n**Note:** Mixing FormGroups and standalone FormItems (not belonging to a group) is not supported.\nEither use FormGroups and make sure all FormItems are part of a FormGroup, or use just FormItems without any FormGroups.\n\n**Note:** As of version 2.23.0 the support for standalone FormItems (not belonging to a group) is deprecated.\nWe recommend using FormGroups, as they provide better accessibility and layout options.\n- **header** - Defines the component header area.\n\n**Note:** When a `header` is provided, the `headerText` property is ignored.\n\n### **CSS Parts:**\n - **column** - Used to style a single column of the form column layout.\n- **header** - Used to style the wrapper of the header.\n- **layout** - Used to style the element defining the form column layout.",
|
|
4229
4229
|
"doc-url": "",
|
|
4230
4230
|
"attributes": [
|
|
4231
4231
|
{
|
|
@@ -4286,7 +4286,7 @@
|
|
|
4286
4286
|
"slots": [
|
|
4287
4287
|
{
|
|
4288
4288
|
"name": "default",
|
|
4289
|
-
"description": "Defines the component content - FormGroups or FormItems.\n\n**Note:** Mixing FormGroups and standalone FormItems (not belonging to a group) is not supported.\nEither use FormGroups and make sure all FormItems are part of a FormGroup, or use just FormItems without any FormGroups."
|
|
4289
|
+
"description": "Defines the component content - FormGroups or FormItems.\n\n**Note:** Mixing FormGroups and standalone FormItems (not belonging to a group) is not supported.\nEither use FormGroups and make sure all FormItems are part of a FormGroup, or use just FormItems without any FormGroups.\n\n**Note:** As of version 2.23.0 the support for standalone FormItems (not belonging to a group) is deprecated.\nWe recommend using FormGroups, as they provide better accessibility and layout options."
|
|
4290
4290
|
},
|
|
4291
4291
|
{
|
|
4292
4292
|
"name": "header",
|
|
@@ -4362,9 +4362,14 @@
|
|
|
4362
4362
|
"description": "Defines id (or many ids) of the element (or elements) that label the component.",
|
|
4363
4363
|
"value": { "type": "string | undefined", "default": "undefined" }
|
|
4364
4364
|
},
|
|
4365
|
+
{
|
|
4366
|
+
"name": "col-span",
|
|
4367
|
+
"description": "Defines the number of columns to distribute the form content by breakpoint (S1 M2 L3 XL4 for example).\n\n**Note:** This property is ignored if `columnSpan` is set, as it is expected that the column span is defined.",
|
|
4368
|
+
"value": { "type": "string | undefined", "default": "undefined" }
|
|
4369
|
+
},
|
|
4365
4370
|
{
|
|
4366
4371
|
"name": "column-span",
|
|
4367
|
-
"description": "Defines column span of the component,\ne.g how many columns the group should span to.",
|
|
4372
|
+
"description": "Defines column span of the component,\ne.g how many columns the group should span to.\n\n**Note:** If this property is set, it has higher priority than `colSpan` and `colSpan` will be ignored.",
|
|
4368
4373
|
"value": { "type": "number | undefined", "default": "undefined" }
|
|
4369
4374
|
},
|
|
4370
4375
|
{
|
|
@@ -4400,9 +4405,14 @@
|
|
|
4400
4405
|
"description": "Defines id (or many ids) of the element (or elements) that label the component.",
|
|
4401
4406
|
"value": { "type": "string | undefined" }
|
|
4402
4407
|
},
|
|
4408
|
+
{
|
|
4409
|
+
"name": "col-span",
|
|
4410
|
+
"description": "Defines the number of columns to distribute the form content by breakpoint (S1 M2 L3 XL4 for example).\n\n**Note:** This property is ignored if `columnSpan` is set, as it is expected that the column span is defined.",
|
|
4411
|
+
"value": { "type": "string | undefined" }
|
|
4412
|
+
},
|
|
4403
4413
|
{
|
|
4404
4414
|
"name": "column-span",
|
|
4405
|
-
"description": "Defines column span of the component,\ne.g how many columns the group should span to.",
|
|
4415
|
+
"description": "Defines column span of the component,\ne.g how many columns the group should span to.\n\n**Note:** If this property is set, it has higher priority than `colSpan` and `colSpan` will be ignored.",
|
|
4406
4416
|
"value": { "type": "number | undefined" }
|
|
4407
4417
|
},
|
|
4408
4418
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ui5/webcomponents",
|
|
3
|
-
"version": "2.23.0-rc.
|
|
3
|
+
"version": "2.23.0-rc.1",
|
|
4
4
|
"description": "UI5 Web Components: webcomponents.main",
|
|
5
5
|
"ui5": {
|
|
6
6
|
"webComponentsPackage": true
|
|
@@ -54,22 +54,22 @@
|
|
|
54
54
|
"directory": "packages/main"
|
|
55
55
|
},
|
|
56
56
|
"dependencies": {
|
|
57
|
-
"@ui5/webcomponents-base": "2.23.0-rc.
|
|
58
|
-
"@ui5/webcomponents-icons": "2.23.0-rc.
|
|
59
|
-
"@ui5/webcomponents-icons-business-suite": "2.23.0-rc.
|
|
60
|
-
"@ui5/webcomponents-icons-tnt": "2.23.0-rc.
|
|
61
|
-
"@ui5/webcomponents-localization": "2.23.0-rc.
|
|
62
|
-
"@ui5/webcomponents-theming": "2.23.0-rc.
|
|
57
|
+
"@ui5/webcomponents-base": "2.23.0-rc.1",
|
|
58
|
+
"@ui5/webcomponents-icons": "2.23.0-rc.1",
|
|
59
|
+
"@ui5/webcomponents-icons-business-suite": "2.23.0-rc.1",
|
|
60
|
+
"@ui5/webcomponents-icons-tnt": "2.23.0-rc.1",
|
|
61
|
+
"@ui5/webcomponents-localization": "2.23.0-rc.1",
|
|
62
|
+
"@ui5/webcomponents-theming": "2.23.0-rc.1"
|
|
63
63
|
},
|
|
64
64
|
"devDependencies": {
|
|
65
65
|
"@custom-elements-manifest/analyzer": "^0.10.10",
|
|
66
66
|
"@ui5/cypress-internal": "0.1.0",
|
|
67
|
-
"@ui5/webcomponents-tools": "2.23.0-rc.
|
|
67
|
+
"@ui5/webcomponents-tools": "2.23.0-rc.1",
|
|
68
68
|
"cypress": "15.9.0",
|
|
69
69
|
"jsdom": "^26.0.0",
|
|
70
70
|
"lit": "^2.0.0",
|
|
71
71
|
"vite": "5.4.21",
|
|
72
72
|
"vitest": "^3.0.2"
|
|
73
73
|
},
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "ab89a5f83b5dbd4bca2ba6e6b145f54c548c5dd0"
|
|
75
75
|
}
|
package/src/FormTemplate.tsx
CHANGED
|
@@ -8,6 +8,16 @@ export default function FormTemplate(this: Form) {
|
|
|
8
8
|
role={this.effectiveAccessibleRole}
|
|
9
9
|
aria-label={this.effectiveAccessibleName}
|
|
10
10
|
aria-labelledby={this.effectiveАccessibleNameRef}
|
|
11
|
+
style={{
|
|
12
|
+
"--ui5-form-columns-s": this.columnsS,
|
|
13
|
+
"--ui5-form-columns-m": this.columnsM,
|
|
14
|
+
"--ui5-form-columns-l": this.columnsL,
|
|
15
|
+
"--ui5-form-columns-xl": this.columnsXl,
|
|
16
|
+
"--ui5-form-item-layout-S": this.getFormItemLayout("S"),
|
|
17
|
+
"--ui5-form-item-layout-M": this.getFormItemLayout("M"),
|
|
18
|
+
"--ui5-form-item-layout-L": this.getFormItemLayout("L"),
|
|
19
|
+
"--ui5-form-item-layout-XL": this.getFormItemLayout("XL"),
|
|
20
|
+
}}
|
|
11
21
|
>
|
|
12
22
|
{this.hasHeader &&
|
|
13
23
|
<div class="ui5-form-header" part="header">
|
|
@@ -19,22 +29,22 @@ export default function FormTemplate(this: Form) {
|
|
|
19
29
|
</div>
|
|
20
30
|
}
|
|
21
31
|
|
|
22
|
-
{
|
|
32
|
+
{this.hasGroupItems ? groupedItemsLayout.call(this) : standaloneItemsLayout.call(this)}
|
|
23
33
|
</div>
|
|
24
34
|
);
|
|
25
35
|
}
|
|
26
36
|
|
|
27
37
|
function groupedItemsLayout(this: Form) {
|
|
28
38
|
return <div class="ui5-form-layout" part="layout">
|
|
29
|
-
{
|
|
39
|
+
{this.groupItemsInfo.map(groupItemInfo => {
|
|
30
40
|
const groupItem = groupItemInfo.groupItem;
|
|
31
41
|
return <div
|
|
32
|
-
class=
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
42
|
+
class="ui5-form-column"
|
|
43
|
+
style={{
|
|
44
|
+
"--ui5-form-column-span-s": groupItem.colsS,
|
|
45
|
+
"--ui5-form-column-span-m": groupItem.colsM,
|
|
46
|
+
"--ui5-form-column-span-l": groupItem.colsL,
|
|
47
|
+
"--ui5-form-column-span-xl": groupItem.colsXl,
|
|
38
48
|
}}
|
|
39
49
|
part="column"
|
|
40
50
|
>
|
|
@@ -43,12 +53,12 @@ function groupedItemsLayout(this: Form) {
|
|
|
43
53
|
aria-labelledby={groupItemInfo.accessibleNameRef}
|
|
44
54
|
aria-label={groupItemInfo.accessibleName}
|
|
45
55
|
>
|
|
46
|
-
{
|
|
56
|
+
{groupItem.headerText &&
|
|
47
57
|
<div class="ui5-form-group-heading">
|
|
48
58
|
<Title id={`${groupItem._id}-group-header-text`} level={groupItem.headerLevel} size="H6">{groupItem.headerText}</Title>
|
|
49
59
|
</div>
|
|
50
60
|
}
|
|
51
|
-
{
|
|
61
|
+
{this.accessibleMode === "Edit" ?
|
|
52
62
|
<div class="ui5-form-group-layout">
|
|
53
63
|
<slot name={groupItem._individualSlot}></slot>
|
|
54
64
|
</div>
|
|
@@ -64,29 +74,37 @@ function groupedItemsLayout(this: Form) {
|
|
|
64
74
|
}
|
|
65
75
|
|
|
66
76
|
function standaloneItemsLayout(this: Form) {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
77
|
+
const column = <div
|
|
78
|
+
class="ui5-form-column"
|
|
79
|
+
style={{
|
|
80
|
+
"--ui5-form-column-span-s": this.columnsS,
|
|
81
|
+
"--ui5-form-column-span-m": this.columnsM,
|
|
82
|
+
"--ui5-form-column-span-l": this.columnsL,
|
|
83
|
+
"--ui5-form-column-span-xl": this.columnsXl,
|
|
84
|
+
}}
|
|
85
|
+
part="column"
|
|
86
|
+
>
|
|
87
|
+
{this.accessibleMode === "Edit" ?
|
|
88
|
+
<div class="ui5-form-group-layout">
|
|
89
|
+
{standaloneItemsLayoutContent.call(this)}
|
|
71
90
|
</div>
|
|
72
91
|
:
|
|
73
|
-
<dl class="ui5-form-layout"
|
|
74
|
-
{
|
|
92
|
+
<dl class="ui5-form-group-layout">
|
|
93
|
+
{standaloneItemsLayoutContent.call(this)}
|
|
75
94
|
</dl>
|
|
76
|
-
|
|
95
|
+
}
|
|
96
|
+
</div>;
|
|
97
|
+
|
|
98
|
+
return <div class="ui5-form-layout" part="layout">{column}</div>;
|
|
77
99
|
}
|
|
78
100
|
|
|
79
101
|
function standaloneItemsLayoutContent(this: Form) {
|
|
80
102
|
return this.itemsInfo.map(itemInfo => {
|
|
81
103
|
const item = itemInfo.item;
|
|
82
104
|
return (
|
|
83
|
-
<div class=
|
|
84
|
-
"ui5-form-item": true,
|
|
85
|
-
[`ui5-form-item-span-${item.columnSpan}`]: item.columnSpan !== undefined,
|
|
86
|
-
}}
|
|
87
|
-
>
|
|
105
|
+
<div class="ui5-form-item">
|
|
88
106
|
<slot name={item._individualSlot}></slot>
|
|
89
|
-
</div>
|
|
107
|
+
</div >
|
|
90
108
|
);
|
|
91
109
|
});
|
|
92
110
|
}
|
package/src/ListItemTemplate.tsx
CHANGED
|
@@ -53,7 +53,7 @@ export default function ListItemTemplate(this: ListItem, hooks?: Partial<ListIte
|
|
|
53
53
|
aria-haspopup={this._accInfo.ariaHaspopup}
|
|
54
54
|
aria-posinset={this._accInfo.posinset}
|
|
55
55
|
aria-setsize={this._accInfo.setsize}
|
|
56
|
-
aria-describedby={
|
|
56
|
+
aria-describedby={this._accInfo.ariaDescribedBy}
|
|
57
57
|
aria-labelledby={this._accessibleNameRef}
|
|
58
58
|
aria-disabled={this._ariaDisabled}
|
|
59
59
|
aria-selected={this._accInfo.ariaSelected}
|