@ui5/webcomponents 1.0.2 → 1.1.0

package/src/themes/TextArea.css

@@ -133,25 +133,29 @@
 
 .ui5-textarea-inner::-webkit-input-placeholder {
 	/* Chrome/Opera/Safari */
+	font-weight: normal;
 	font-style: var(--_ui5_textarea_placeholder_font_style);
 	color: var(--sapField_PlaceholderTextColor);
 }
 
 .ui5-textarea-inner::-moz-placeholder {
 	/* Firefox 19+ */
+	font-weight: normal;
 	font-style: var(--_ui5_textarea_placeholder_font_style);
 	color: var(--sapField_PlaceholderTextColor);
 }
 
 .ui5-textarea-inner:-ms-input-placeholder {
 	/* IE 10+ */
+	font-weight: normal;
 	font-style: var(--_ui5_textarea_placeholder_font_style);
 	color: var(--sapField_PlaceholderTextColor);
 }
 
 .ui5-textarea-inner:-moz-placeholder {
 	/* Firefox 18- */
-	font-style: italic;
+	font-weight: normal;
+	font-style: var(--_ui5_textarea_placeholder_font_style);
 	color: var(--sapField_PlaceholderTextColor);
 }
 
@@ -173,6 +177,10 @@
 	font-style: var(--_ui5_input_error_warning_font_style);
 }
 
+:host([value-state="Warning"]) .ui5-textarea-inner {
+	font-weight: var(--_ui5_input_warning_font_weight);
+}
+
 :host([value-state="Warning"]:not([readonly])) .ui5-textarea-inner,
 :host([exceeding]) .ui5-textarea-inner {
 	background-image: var(--_ui5_textarea_warning_background_image);

package/src/themes/TimeSelection.css

@@ -17,6 +17,10 @@
 	height: 90vh;
 }
 
+:host(.ui5-dt-time.ui5-dt-cal--hidden) .ui5-time-selection-root.ui5-phone {
+	height: 80vh;
+}
+
 [ui5-wheelslider] {
 	padding-left: 0.25rem;
 	padding-right: 0.25rem;

package/src/themes/Token.css

@@ -13,7 +13,7 @@
 }
 
 :host([overflows]) {
-	visibility: hidden;
+	display: none;
 }
 
 :host(:not([readonly]):hover) {
@@ -36,6 +36,7 @@
 }
 
 :host([readonly]) {
+	background: var(--_ui5_token_readonly_background);
 	color: var(--sapContent_ForegroundTextColor);
 }
 

package/src/themes/Tokenizer.css

@@ -73,7 +73,7 @@
 
 /* RTL */
 
-[dir="rtl"] .ui5-tokenizer-more-text  {
+[dir="rtl"] .ui5-tokenizer-more-text {
 	margin-right: .25rem;
 	margin-left: 0;
 }

package/src/themes/ValueStateMessage.css

@@ -14,7 +14,7 @@
 	left: 0.5rem;
 }
 
-ui5-responsive-popover .ui5-valuestatemessage-header .ui5-input-value-state-message-icon {
+[ui5-responsive-popover] .ui5-valuestatemessage-header .ui5-input-value-state-message-icon {
 	left: 1rem;
 }
 
@@ -48,7 +48,7 @@ ui5-responsive-popover .ui5-valuestatemessage-header .ui5-input-value-state-mess
 	border: var(--_ui5_value_state_message_border);
 }
 
-ui5-responsive-popover .ui5-valuestatemessage-header {
+[ui5-responsive-popover] .ui5-valuestatemessage-header {
 	min-height: 2rem;
 	padding: var(--_ui5_value_state_header_padding);
 }
@@ -73,4 +73,4 @@ ui5-responsive-popover .ui5-valuestatemessage-header {
 	outline-offset: -0.125rem;
 	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	border-radius: var(--_ui5_value_state_message_focus_border_radius);
-} 
+}

package/src/themes/base/BrowserScrollbar-parameters.css

@@ -0,0 +1,4 @@
+:root {
+	--browser_scrollbar_border_radius: var(--sapElement_BorderCornerRadius);
+	--browser_scrollbar_border: none;
+}

package/src/themes/base/Card-parameters.css

@@ -2,7 +2,7 @@
 	--_ui5_card_box_shadow: var(--sapContent_Shadow0);
 	--_ui5_card_hover_box_shadow: var(--_ui5_card_box_shadow);
 	--_ui5_card_border_color: var(--sapTile_BorderColor);
-	--_ui5_card_border-radius: .25rem;
+	--_ui5_card_border-radius: var(--sapElement_BorderCornerRadius);
 	--_ui5_card_content_padding: 1rem;
 	--_ui5_card_header_hover_bg: var(--sapList_Hover_Background);
 	--_ui5_card_header_active_bg: var(--_ui5_card_header_hover_bg);

package/src/themes/base/Input-parameters.css

@@ -18,9 +18,14 @@
 	--_ui5_input_state_border_width: 0.125rem;
 	--_ui5-input-information_border_width: 0.125rem;
 	--_ui5_input_error_font_weight: normal;
+	--_ui5_input_warning_font_weight: normal;
+	--_ui5_input_information_font_weight: normal;
 	--_ui5_input_focus_border_width: 1px;
 	--_ui5_input_error_warning_border_style: solid;
 	--_ui5_input_error_warning_font_style: inherit;
+	--_ui5_input_error_warning_text_indent: 0;
+	--_ui5_input_information_text_indent: 0;
+	--_ui5_input_information_font_style: inherit;
 	--_ui5_input_disabled_color: var(--sapContent_DisabledTextColor);
 	--_ui5_input_disabled_font_weight: normal;
 	--_ui5_input_disabled_border_color: var(--sapField_ReadOnly_BorderColor);

package/src/themes/base/TabContainer-parameters.css

@@ -69,7 +69,7 @@
 	--_ui5_tc_headerItemIcon_neutral_selected_background: var(--sapNeutralColor);
 	--_ui5_tc_headerItemIcon_semantic_selected_color: var(--sapGroup_ContentBackground);
 
-	--_ui5_tc_overflowItem_default_color: var(--sapHighlightColor);
+	--_ui5_tc_overflowItem_default_color: var(--sapNeutralTextColor);
 	--_ui5_tc_overflowItem_current_color: CurrentColor;
 	--_ui5_tc_content_border_bottom: 0.125rem solid var(--sapObjectHeader_BorderColor);
 

package/src/themes/base/TextArea-parameters.css

@@ -18,4 +18,5 @@
 	--_ui5_textarea_value_state_focus_outline: var(--_ui5_input_focus_border_width) dotted var(--sapContent_FocusColor);
 	--_ui5_textarea_after_element_display: none;
 	--_ui5_textarea_placeholder_font_style: italic;
+	--_ui5_input_warning_font_weight: normal;
 }

package/src/themes/base/Token-parameters.css

@@ -1,5 +1,6 @@
 :root {
 	--_ui5_token_background: var(--sapButton_Background);
+	--_ui5_token_readonly_background: var(--sapButton_Background);
 	--_ui5_token_border_radius: 0.125rem;
 	--_ui5_token_focus_outline_width: 0.0625rem;
 	--_ui5_token_text_color: var(--sapButton_TextColor);

package/src/themes/base/sizes-parameters.css

@@ -10,7 +10,6 @@
 	--_ui5_checkbox_root_side_padding: .6875rem;
 	--_ui5_checkbox_icon_size: 1rem;
 	--_ui5_checkbox_partially_icon_size: .75rem;
-	--_ui5_custom_list_item_height: 3rem;
 	--_ui5_custom_list_item_rb_min_width: 2.75rem;
 	--_ui5_day_picker_item_width: 2.25rem;
 	--_ui5_day_picker_item_height: 2.875rem;
@@ -103,6 +102,7 @@
 	--_ui5_load_more_text_height: 2.75rem;
 	--_ui5_load_more_text_font_size: var(--sapFontMediumSize);
 	--_ui5_load_more_desc_padding:  0.375rem 2rem 0.875rem 2rem;
+	--ui5_table_header_row_height: 2.75rem;
 
 	/* Tree */
 	--_ui5-tree-indent-step: 1.5rem;
@@ -160,7 +160,6 @@
 	--_ui5_color-palette-button-height: 2rem;
 
 	/* Custom List Item */
-	--_ui5_custom_list_item_height: 2rem;
 	--_ui5_custom_list_item_rb_min_width: 2rem;
 
 	/* DayPicker */
@@ -287,6 +286,7 @@
 	--_ui5_load_more_text_height: 2.625rem;
 	--_ui5_load_more_text_font_size: var(--sapFontSize);
 	--_ui5_load_more_desc_padding: 0 2rem 0.875rem 2rem;
+	--ui5_table_header_row_height: 2rem;
 
 	/* Tree */
 	--_ui5-tree-indent-step: 0.5rem;

package/src/themes/sap_belize/BrowserScrollbar-parameters.css

@@ -0,0 +1,4 @@
+:root {
+	--browser_scrollbar_border_radius: 0;
+	--browser_scrollbar_border: none;
+}

package/src/themes/sap_belize/Table-parameters.css

@@ -1,4 +1,7 @@
+@import "../base/Table-parameters.css";
+
 :root {
 	--ui5_table_header_row_outline_width: 1px;
 	--ui5_table_multiselect_column_width: 3rem;
+	--ui5_table_header_row_height: 3rem;
 }

package/src/themes/sap_belize/parameters-bundle.css

@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/Avatar-parameters.css";
 @import "../base/Badge-parameters.css";
+@import "./BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";
 @import "../base/Button-parameters.css";
 @import "../base/DatePicker-parameters.css";

package/src/themes/sap_belize_hcb/BrowserScrollbar-parameters.css

@@ -0,0 +1,4 @@
+:root {
+	--browser_scrollbar_border_radius: 0px;
+	--browser_scrollbar_border: 0.0625rem solid #999;
+}

package/src/themes/sap_belize_hcb/Input-parameters.css

@@ -6,6 +6,7 @@
 	--_ui5-input-border: 1px solid var(--sapField_BorderColor);
 	--_ui5_input_error_warning_border_style: dashed;
 	--_ui5_input_error_warning_font_style: italic;
+	--_ui5_input_error_warning_text_indent: 0.125rem;
 	--_ui5_input_error_font_weight: bold;
 	--_ui5_input_disabled_color: var(--sapContent_DisabledTextColor);
 	--_ui5_input_disabled_font_weight: normal;

package/src/themes/sap_belize_hcb/Table-parameters.css

@@ -3,4 +3,5 @@
 :root {
 	--ui5_table_header_row_outline_width: 0.125rem;
 	--ui5_table_multiselect_column_width: 3rem;
+	--ui5_table_header_row_height: 3rem;
 }

package/src/themes/sap_belize_hcb/Token-parameters.css

@@ -2,4 +2,5 @@
 
 :root {
 	--_ui5_token_border_radius: 0.125rem;
+	--_ui5_token_readonly_background: var(--sapField_ReadOnly_Background);
 }

package/src/themes/sap_belize_hcb/parameters-bundle.css

@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "./Avatar-parameters.css";
 @import "./Badge-parameters.css";
+@import "./BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "./CalendarHeader-parameters.css";

package/src/themes/sap_belize_hcw/BrowserScrollbar-parameters.css

@@ -0,0 +1,4 @@
+:root {
+	--browser_scrollbar_border_radius: 0;
+	--browser_scrollbar_border: 0.0625rem solid #585858;
+}

package/src/themes/sap_belize_hcw/Input-parameters.css

@@ -6,6 +6,7 @@
 	--_ui5-input-border: 1px solid var(--sapField_BorderColor);
 	--_ui5_input_error_warning_border_style: dashed;
 	--_ui5_input_error_warning_font_style: italic;
+	--_ui5_input_error_warning_text_indent: 0.125rem;
 	--_ui5_input_error_font_weight: bold;
 	--_ui5_input_disabled_color: var(--sapContent_DisabledTextColor);
 	--_ui5_input_disabled_font_weight: normal;

package/src/themes/sap_belize_hcw/Table-parameters.css

@@ -3,4 +3,5 @@
 :root {
 	--ui5_table_header_row_outline_width: 0.125rem;
 	--ui5_table_multiselect_column_width: 3rem;
+	--ui5_table_header_row_height: 3rem;
 }

package/src/themes/sap_belize_hcw/Token-parameters.css

@@ -2,4 +2,5 @@
 
 :root {
 	--_ui5_token_border_radius: 0.125rem;
+	--_ui5_token__readonly_background: var(--sapField_ReadOnly_Background);
 }

package/src/themes/sap_belize_hcw/parameters-bundle.css

@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "./Avatar-parameters.css";
 @import "./Badge-parameters.css";
+@import "./BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "./CalendarHeader-parameters.css";

package/src/themes/sap_fiori_3/TabContainer-parameters.css

@@ -6,7 +6,7 @@
 	/* Header Item */
 	--_ui5_tc_headerItemContent_border_bottom: 0.1875rem solid var(--sapSelectedColor);
 
-	--_ui5_tc_overflowItem_default_color: var(--sapHighlightColor);
+	--_ui5_tc_overflowItem_default_color: var(--sapNeutralTextColor);
 	--_ui5_tc_overflowItem_current_color: CurrentColor;
 	--_ui5_tc_content_border_bottom: 0.0625rem solid var(--sapObjectHeader_BorderColor);
 }

package/src/themes/sap_fiori_3/parameters-bundle.css

@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "./Avatar-parameters.css";
 @import "../base/Badge-parameters.css";
+@import "../base/BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/Card-parameters.css";

package/src/themes/sap_fiori_3_dark/parameters-bundle.css

@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "./Avatar-parameters.css";
 @import "../base/Badge-parameters.css";
+@import "../base/BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/Card-parameters.css";

package/src/themes/sap_fiori_3_hcb/Input-parameters.css

@@ -7,8 +7,15 @@
 	--_ui5-input-information_border_width: var(--sapField_BorderWidth);
 	--_ui5_input_error_warning_border_style: dashed;
 	--_ui5_input_error_warning_font_style: italic;
+	--_ui5_input_error_warning_text_indent: 0.125rem;
+	--_ui5_input_information_font_style: italic;
+	--_ui5_input_information_text_indent: 0.125rem;
 	--_ui5_input_error_font_weight: bold;
+	--_ui5_input_warning_font_weight: bold;
+	--_ui5_input_information_font_weight: bold;
 	--_ui5_input_disabled_color: var(--sapContent_DisabledTextColor);
 	--_ui5_input_disabled_font_weight: normal;
 	--_ui5_input_icon_padding: 0.65rem 0.75rem;
+	--_ui5-input-placeholder-style: normal;
+	--_ui5-input-placeholder-color: var(--sapField_TextColor);
 }

package/src/themes/sap_fiori_3_hcb/TextArea-parameters.css

@@ -5,4 +5,6 @@
 	--_ui5_textarea_warning_border_style: dashed;
 	--_ui5_textarea_error_warning_border_width: 2 * var(--sapField_BorderWidth);
 	--_ui5_textarea_information_border_width: 0.0625rem;
+	--_ui5_textarea_placeholder_font_style: normal;
+	--_ui5_input_warning_font_weight: bold;
 }

package/src/themes/sap_fiori_3_hcb/Token-parameters.css

@@ -1,6 +1,7 @@
 @import "../base/Token-parameters.css";
 
 :root {
-	--_ui5_token_border_radius: 0.125rem;
+	--_ui5_token_border_radius: 0.25rem;
 	--_ui5_token_focus_outline_width: 0.125rem;
+	--_ui5_token_readonly_background: var(--sapField_ReadOnly_Background);
 }

package/src/themes/sap_fiori_3_hcb/parameters-bundle.css

@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "./Avatar-parameters.css";
 @import "./Badge-parameters.css";
+@import "../base/BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "./CalendarHeader-parameters.css";

package/src/themes/sap_fiori_3_hcw/Input-parameters.css

@@ -7,8 +7,15 @@
 	--_ui5-input-information_border_width: var(--sapField_BorderWidth);
 	--_ui5_input_error_warning_border_style: dashed;
 	--_ui5_input_error_warning_font_style: italic;
+	--_ui5_input_error_warning_text_indent: 0.125rem;
+	--_ui5_input_information_font_style: italic;
+	--_ui5_input_information_text_indent: 0.125rem;
 	--_ui5_input_error_font_weight: bold;
+	--_ui5_input_warning_font_weight: bold;
+	--_ui5_input_information_font_weight: bold;
 	--_ui5_input_disabled_color: var(--sapContent_DisabledTextColor);
 	--_ui5_input_disabled_font_weight: normal;
 	--_ui5_input_icon_padding: 0.65rem 0.75rem;
+	--_ui5-input-placeholder-style: normal;
+	--_ui5-input-placeholder-color: var(--sapField_TextColor);
 }

package/src/themes/sap_fiori_3_hcw/TextArea-parameters.css

@@ -5,4 +5,6 @@
 	--_ui5_textarea_warning_border_style: dashed;
 	--_ui5_textarea_error_warning_border_width: 2 * var(--sapField_BorderWidth);
 	--_ui5_textarea_information_border_width: 0.0625rem;
+	--_ui5_textarea_placeholder_font_style: normal;
+	--_ui5_input_warning_font_weight: bold;
 }

package/src/themes/sap_fiori_3_hcw/Token-parameters.css

@@ -1,6 +1,7 @@
 @import "../base/Token-parameters.css";
 
 :root {
-	--_ui5_token_border_radius: 0.125rem;
+	--_ui5_token_border_radius: 0.25rem;
 	--_ui5_token_focus_outline_width: 0.125rem;
+	--_ui5_token_readonly_background: var(--sapField_ReadOnly_Background);
 }

package/src/themes/sap_fiori_3_hcw/parameters-bundle.css

@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "./Avatar-parameters.css";
 @import "./Badge-parameters.css";
+@import "../base/BrowserScrollbar-parameters.css";
 @import "../base/BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "./CalendarHeader-parameters.css";

package/src/themes/sap_horizon/Card-parameters.css

@@ -2,7 +2,6 @@
 
 :root {
 	--_ui5_card_hover_box_shadow: var(--sapContent_Shadow1);
-	--_ui5_card_border-radius: 1rem;
 	--_ui5_card_header_focus_offset: 0px;
 	--_ui5_card_header_focus_radius: var(--_ui5_card_border-radius);
 	--_ui5_card_header_title_font_family: var(--sapFontHeaderFamily);

package/src/themes/sap_horizon/Table-parameters.css

@@ -4,4 +4,5 @@
 	--ui5_table_bottom_border: none;
 	--ui5_table_header_row_outline_width: var(--sapContent_FocusWidth);
 	--ui5_table_header_row_font_weight: bold;
+	--ui5_table_header_row_height: 2.75rem;
 }

package/src/themes/sap_horizon/parameters-bundle.css

@@ -1,6 +1,7 @@
 @import "./sizes-parameters.css";
 @import "./Avatar-parameters.css";
 @import "../base/Badge-parameters.css";
+@import "../base/BrowserScrollbar-parameters.css";
 @import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/Card-parameters.css";

package/src/themes/sap_horizon_exp/parameters-bundle.css

@@ -1,6 +1,7 @@
 @import "../base/sizes-parameters.css";
 @import "../base/Avatar-parameters.css";
 @import "../base/Badge-parameters.css";
+@import "../base/BrowserScrollbar-parameters.css";
 @import "./Button-parameters.css";
 @import "./Badge-parameters.css";
 @import "../base/Card-parameters.css";

package/src/types/HasPopup.js

@@ -0,0 +1,62 @@
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * Different types of HasPopup.
+ * @lends sap.ui.webcomponents.main.types.HasPopup.prototype
+ * @public
+ */
+const PopupTypes = {
+	/**
+	 * Dialog popup type.
+	 * @public
+	 * @type {Dialog}
+	 */
+	Dialog: "Dialog",
+
+	/**
+	 * Grid popup type.
+	 * @public
+	 * @type {Grid}
+	 */
+	Grid: "Grid",
+
+	/**
+	 * ListBox popup type.
+	 * @public
+	 * @type {ListBox}
+	 */
+	ListBox: "ListBox",
+
+	 /**
+	  * Menu popup type.
+	  * @public
+	  * @type {Menu}
+	  */
+	Menu: "Menu",
+
+	 /**
+	  * Tree popup type.
+	  * @public
+	  * @type {Tree}
+	  */
+	Tree: "Tree",
+};
+
+/**
+ * @class
+ * Different types of HasPopup.
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.types.HasPopup
+ * @public
+ * @enum {string}
+ */
+class HasPopup extends DataType {
+	static isValid(value) {
+		return !!PopupTypes[value];
+	}
+}
+
+HasPopup.generateTypeAccessors(PopupTypes);
+
+export default HasPopup;

package/src/types/TabsOverflowMode.js

@@ -0,0 +1,40 @@
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * @lends sap.ui.webcomponents.main.types.TabsOverflowMode.prototype
+ * @public
+ */
+const TabsOverflowModes = {
+	/**
+	 * End type is used if there should be only one overflow with hidden the tabs at the end of the tab container.
+	 * @public
+	 * @type {End}
+	 */
+	End: "End",
+
+	/**
+	 * StartAndEnd type is used if there should be two overflows on both ends of the tab container.
+	 * @public
+	 * @type {StartAndEnd}
+	 */
+	StartAndEnd: "StartAndEnd",
+};
+
+/**
+ * @class
+ * Different types of overflow modes.
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.types.TabsOverflowMode
+ * @public
+ * @enum {string}
+ */
+class TabsOverflowMode extends DataType {
+	static isValid(value) {
+		return !!TabsOverflowModes[value];
+	}
+}
+
+TabsOverflowMode.generateTypeAccessors(TabsOverflowModes);
+
+export default TabsOverflowMode;

package/csp.js

@@ -1,7 +0,0 @@
-import { setPackageCSSRoot, setUseLinks } from "@ui5/webcomponents-base/dist/CSP.js";
-
-setUseLinks(false); // !document.adoptedStyleSheets
-setPackageCSSRoot("@ui5/webcomponents-base", "/resources/css/base/");
-setPackageCSSRoot("@ui5/webcomponents-theming", "/resources/css/theming/");
-setPackageCSSRoot("@ui5/webcomponents", "/resources/css/main/");
-setPackageCSSRoot("@ui5/webcomponents-fiori", "/css/");

package/dist/generated/templates/TabSeparatorTemplate.lit.js

@@ -1,7 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-
-const block0 = (context, tags, suffix) => html`<li id="${ifDefined(context._id)}" role="separator"></li>`;
-
-
-export default block0;

package/src/TabSeparator.hbs

@@ -1 +0,0 @@
-<li id="{{_id}}" role="separator"></li>