@ui5/webcomponents 0.0.0-47cc17a26 → 0.0.0-49bade48d

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

@@ -1,6 +1,6 @@
 @import "../base/TextArea-parameters.css";
 
-:root {
+:host {
 	--_ui5_textarea_line_height: 1.5;
 	--_ui5_textarea_error_warning_border_style: dashed;
 	--_ui5_textarea_error_warning_font_weight: bold;
@@ -26,18 +26,18 @@
 	--_ui5_textarea_inner_width: 100%;
 }
 
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	--_ui5_textarea_padding_top: 0.0625rem;
-	--_ui5_textarea_padding_bottom: 0rem;
-	--_ui5_textarea_padding_top_readonly: 0.0625rem;
-	--_ui5_textarea_padding_bottom_readonly: 0rem;
-	--_ui5_textarea_padding_top_error_warning: 0.0625rem;
-	--_ui5_textarea_padding_bottom_error_warning: 0rem;
-	--_ui5_textarea_padding_top_information: 0.125rem;
-	--_ui5_textarea_padding_bottom_information: 0.0625rem;
-	--_ui5_textarea_padding_right_and_left: 0.375rem;
-	--_ui5_textarea_padding_right_and_left_information: 0.4375rem;
-	--_ui5_textarea_padding_right_and_left_readonly: 0.375rem;
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_textarea_padding_top: 0.0625rem;
+		--_ui5_textarea_padding_bottom: 0rem;
+		--_ui5_textarea_padding_top_readonly: 0.0625rem;
+		--_ui5_textarea_padding_bottom_readonly: 0rem;
+		--_ui5_textarea_padding_top_error_warning: 0.0625rem;
+		--_ui5_textarea_padding_bottom_error_warning: 0rem;
+		--_ui5_textarea_padding_top_information: 0.125rem;
+		--_ui5_textarea_padding_bottom_information: 0.0625rem;
+		--_ui5_textarea_padding_right_and_left: 0.375rem;
+		--_ui5_textarea_padding_right_and_left_information: 0.4375rem;
+		--_ui5_textarea_padding_right_and_left_readonly: 0.375rem;
+	}
 }

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

@@ -1,6 +1,6 @@
 @import "../base/Token-parameters.css";
 
-:root {
+:host {
 	--_ui5_token_border_radius: 0.25rem;
 	--_ui5_token_focus_outline_width: 0.125rem;
 	--_ui5_token_readonly_background: var(--sapField_ReadOnly_Background);
@@ -10,8 +10,8 @@
 	--_ui5_token_readonly_padding: 0.25rem 0.3125rem;
 }
 
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	--_ui5_token_focus_offset: 0;
+@container style(--ui5_content_density: compact) {
+	:host {
+		--_ui5_token_focus_offset: 0;
+	}
 }

package/src/themes/sap_horizon_hcw/ValueStateMessage-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/ValueStateMessage-parameters.css";
 
-:root {
+:host {
 	--_ui5_value_state_message_border: var(--sapField_BorderWidth) solid var(--sapField_BorderColor);
 	--_ui5_input_value_state_icon_display: inline-block;
 	--_ui5_value_state_message_icon_width: 1rem;

package/src/themes/sap_horizon_hcw/YearPicker-parameters.css

@@ -1,5 +1,5 @@
 @import "../base/YearPicker-parameters.css";
 
-:root {
+:host {
 	--_ui5_yearpicker_item_border_radius: 0.5rem;
 }

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

@@ -2,6 +2,7 @@
 @import "../base/AvatarGroup-parameters.css";
 @import "./Tag-parameters.css";
 @import "../base/Bar-parameters.css";
+@import "./Breadcrumbs-parameters.css";
 @import "./BusyIndicator-parameters.css";
 @import "./Button-parameters.css";
 @import "../base/ButtonBadge-parameters.css";
@@ -41,6 +42,8 @@
 @import "./SplitButton-parameters.css";
 @import "./Switch-parameters.css";
 @import "./TabContainer-parameters.css";
+@import "../base/Table-parameters.css";
+@import "../base/Toolbar-parameters.css";
 @import "./GrowingButton-parameters.css";
 @import "../base/Text-parameters.css";
 @import "./TextArea-parameters.css";
@@ -52,6 +55,8 @@
 @import "../base/Tokenizer-parameters.css";
 @import "./ValueStateMessage-parameters.css";
 @import "./SliderBase-parameters.css";
+@import "./SliderHandle-parameters.css";
+@import "./SliderScale-parameters.css";
 @import "../base/StepInput-parameters.css";
 @import "./sizes-parameters.css";
-@import "../base/rtl-parameters.css";
+@import "./rtl-parameters.css";

package/src/themes/sap_horizon_hcw/rtl-parameters.css

@@ -0,0 +1 @@
+@import "../sap_horizon/rtl-parameters.css";

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

@@ -1,19 +1,19 @@
 @import "../base/sizes-parameters.css";
 
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	/* ColorPicker */
-	--_ui5_color_picker_slider_handle_container_margin_top: 0.0625rem;
+@container style(--ui5_content_density: compact) {
+	:host {
+		/* ColorPicker */
+		--_ui5_color_picker_slider_handle_container_margin_top: 0.0625rem;
 
-	/* CheckBox */
-	--_ui5_checkbox_focus_position: 0.125rem;
-	--_ui5_checkbox_wrapped_focus_inset_block: 0.125rem;
+		/* CheckBox */
+		--_ui5_checkbox_focus_position: 0.125rem;
+		--_ui5_checkbox_wrapped_focus_inset_block: 0.125rem;
 
-	/* DayPicker */
-	--_ui5_daypicker_selected_item_now_special_day_top: 1.5625rem;
-	--_ui5_daypicker_specialday_focused_top: 1.3125rem;
-	--_ui5_daypicker_selected_item_now_special_day_border_bottom_radius_alternate: 0.5rem;
-	--_ui5_daypicker_specialday_focused_border_bottom: 0.25rem;
-	--_ui5_daypicker_item_now_specialday_top: 1.4375rem;
+		/* DayPicker */
+		--_ui5_daypicker_selected_item_now_special_day_top: 1.5625rem;
+		--_ui5_daypicker_specialday_focused_top: 1.3125rem;
+		--_ui5_daypicker_selected_item_now_special_day_border_bottom_radius_alternate: 0.5rem;
+		--_ui5_daypicker_specialday_focused_border_bottom: 0.25rem;
+		--_ui5_daypicker_item_now_specialday_top: 1.4375rem;
+	}
 }

package/dist/SliderBaseTemplate.d.ts

@@ -1,10 +0,0 @@
-import type { JsxTemplate } from "@ui5/webcomponents-base";
-import type SliderBase from "./SliderBase.js";
-export default function SliderBaseTemplate(this: SliderBase, hooks?: {
-    handlesAriaText?: JsxTemplate;
-    progressBar?: JsxTemplate;
-    handles?: JsxTemplate;
-}): import("@ui5/webcomponents-base").JSX.Element;
-export declare function handlesAriaText(this: SliderBase): void;
-export declare function progressBar(this: SliderBase): void;
-export declare function handles(this: SliderBase): void;

package/dist/SliderBaseTemplate.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
-import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
-export default function SliderBaseTemplate(hooks) {
-    return (_jsxs("div", { class: {
-            "ui5-slider-root": true,
-            "ui5-slider-root-phone": isPhone(),
-        }, onMouseDown: this._onmousedown, onTouchStart: this._onmousedown, onMouseOver: this._onmouseover, onMouseOut: this._onmouseout, onKeyDown: this._onkeydown, onKeyUp: this._onKeyupBase, part: "root-container", children: [(hooks?.handlesAriaText || handlesAriaText).call(this), _jsxs("div", { class: "ui5-slider-inner", children: [!!this.step && this.showTickmarks && _jsxs(_Fragment, { children: [_jsx("ul", { class: "ui5-slider-tickmarks", children: this.tickmarksObject.map(tm => _jsx(_Fragment, { children: tm ?
-                                        _jsx("li", { class: "ui5-slider-tickmark ui5-slider-tickmark-in-range" })
-                                        :
-                                            _jsx("li", { class: "ui5-slider-tickmark" }) })) }), !!this.labelInterval &&
-                                _jsx("ul", { class: {
-                                        "ui5-slider-labels": true,
-                                        "ui5-slider-hidden-labels": this._labelsOverlapping,
-                                    }, children: this._labels.map(l => _jsx("li", { "data-counter": l })) })] }), (hooks?.progressBar || progressBar).call(this), (hooks?.handles || handles).call(this)] }), this.editableTooltip && _jsx(_Fragment, { children: _jsx("span", { id: "ui5-slider-InputDesc", class: "ui5-hidden-text", children: this._ariaDescribedByInputText }) })] }));
-}
-export function handlesAriaText() { }
-export function progressBar() { }
-export function handles() { }
-//# sourceMappingURL=SliderBaseTemplate.js.map

package/dist/SliderBaseTemplate.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SliderBaseTemplate.js","sourceRoot":"","sources":["../src/SliderBaseTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wCAAwC,CAAC;AAIjE,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAmB,KAI5D;IACA,OAAO,CACN,eACC,KAAK,EAAE;YACN,iBAAiB,EAAE,IAAI;YACvB,uBAAuB,EAAE,OAAO,EAAE;SAClC,EACD,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,IAAI,EAAC,gBAAgB,aAEpB,CAAC,KAAK,EAAE,eAAe,IAAI,eAAe,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAEvD,eAAK,KAAK,EAAC,kBAAkB,aAC3B,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,IAAI,8BACrC,aAAI,KAAK,EAAC,sBAAsB,YAC9B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,4BAC9B,EAAE,CAAC,CAAC;wCACJ,aAAI,KAAK,EAAC,kDAAkD,GAAM;wCAClE,CAAC;4CACD,aAAI,KAAK,EAAC,qBAAqB,GAAM,GAEpC,CAAC,GACA,EACJ,CAAC,CAAC,IAAI,CAAC,aAAa;gCACpB,aAAI,KAAK,EAAE;wCACV,mBAAmB,EAAE,IAAI;wCACzB,0BAA0B,EAAE,IAAI,CAAC,kBAAkB;qCACnD,YAEC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CACrB,6BAAkB,CAAC,GAAO,CAC1B,GACG,IAEJ,EAEF,CAAC,KAAK,EAAE,WAAW,IAAI,WAAW,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAE9C,CAAC,KAAK,EAAE,OAAO,IAAI,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAClC,EACL,IAAI,CAAC,eAAe,IAAI,4BACxB,eAAM,EAAE,EAAC,sBAAsB,EAAC,KAAK,EAAC,iBAAiB,YAAE,IAAI,CAAC,yBAAyB,GAAQ,GAC7F,IAEE,CAEN,CAAC;AACH,CAAC;AAED,MAAM,UAAU,eAAe,KAAqB,CAAC;AACrD,MAAM,UAAU,WAAW,KAAqB,CAAC;AACjD,MAAM,UAAU,OAAO,KAAqB,CAAC","sourcesContent":["import { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport type { JsxTemplate } from \"@ui5/webcomponents-base\";\nimport type SliderBase from \"./SliderBase.js\";\n\nexport default function SliderBaseTemplate(this: SliderBase, hooks?: {\n\thandlesAriaText?: JsxTemplate\n\tprogressBar?: JsxTemplate\n\thandles?: JsxTemplate\n}) {\n\treturn (\n\t\t<div\n\t\t\tclass={{\n\t\t\t\t\"ui5-slider-root\": true,\n\t\t\t\t\"ui5-slider-root-phone\": isPhone(),\n\t\t\t}}\n\t\t\tonMouseDown={this._onmousedown}\n\t\t\tonTouchStart={this._onmousedown}\n\t\t\tonMouseOver={this._onmouseover}\n\t\t\tonMouseOut={this._onmouseout}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\tonKeyUp={this._onKeyupBase}\n\t\t\tpart=\"root-container\"\n\t\t>\n\t\t\t{(hooks?.handlesAriaText || handlesAriaText).call(this)}\n\n\t\t\t<div class=\"ui5-slider-inner\">\n\t\t\t\t{!!this.step && this.showTickmarks && <>\n\t\t\t\t\t<ul class=\"ui5-slider-tickmarks\">\n\t\t\t\t\t\t{this.tickmarksObject.map(tm => <>\n\t\t\t\t\t\t\t{tm ?\n\t\t\t\t\t\t\t\t<li class=\"ui5-slider-tickmark ui5-slider-tickmark-in-range\"></li>\n\t\t\t\t\t\t\t\t:\n\t\t\t\t\t\t\t\t<li class=\"ui5-slider-tickmark\"></li>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</>)}\n\t\t\t\t\t</ul>\n\t\t\t\t\t{!!this.labelInterval &&\n\t\t\t\t\t\t<ul class={{\n\t\t\t\t\t\t\t\"ui5-slider-labels\": true,\n\t\t\t\t\t\t\t\"ui5-slider-hidden-labels\": this._labelsOverlapping,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this._labels.map(l =>\n\t\t\t\t\t\t\t\t<li data-counter={l}></li>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t}\n\t\t\t\t</>}\n\n\t\t\t\t{(hooks?.progressBar || progressBar).call(this)}\n\n\t\t\t\t{(hooks?.handles || handles).call(this)}\n\t\t\t</div>\n\t\t\t{this.editableTooltip && <>\n\t\t\t\t<span id=\"ui5-slider-InputDesc\" class=\"ui5-hidden-text\">{this._ariaDescribedByInputText}</span>\n\t\t\t</>}\n\n\t\t</div>\n\n\t);\n}\n\nexport function handlesAriaText(this: SliderBase) { }\nexport function progressBar(this: SliderBase) { }\nexport function handles(this: SliderBase) { }\n"]}

package/src/SliderBaseTemplate.tsx

@@ -1,65 +0,0 @@
-import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
-import type { JsxTemplate } from "@ui5/webcomponents-base";
-import type SliderBase from "./SliderBase.js";
-
-export default function SliderBaseTemplate(this: SliderBase, hooks?: {
-	handlesAriaText?: JsxTemplate
-	progressBar?: JsxTemplate
-	handles?: JsxTemplate
-}) {
-	return (
-		<div
-			class={{
-				"ui5-slider-root": true,
-				"ui5-slider-root-phone": isPhone(),
-			}}
-			onMouseDown={this._onmousedown}
-			onTouchStart={this._onmousedown}
-			onMouseOver={this._onmouseover}
-			onMouseOut={this._onmouseout}
-			onKeyDown={this._onkeydown}
-			onKeyUp={this._onKeyupBase}
-			part="root-container"
-		>
-			{(hooks?.handlesAriaText || handlesAriaText).call(this)}
-
-			<div class="ui5-slider-inner">
-				{!!this.step && this.showTickmarks && <>
-					<ul class="ui5-slider-tickmarks">
-						{this.tickmarksObject.map(tm => <>
-							{tm ?
-								<li class="ui5-slider-tickmark ui5-slider-tickmark-in-range"></li>
-								:
-								<li class="ui5-slider-tickmark"></li>
-							}
-						</>)}
-					</ul>
-					{!!this.labelInterval &&
-						<ul class={{
-							"ui5-slider-labels": true,
-							"ui5-slider-hidden-labels": this._labelsOverlapping,
-						}}
-						>
-							{this._labels.map(l =>
-								<li data-counter={l}></li>
-							)}
-						</ul>
-					}
-				</>}
-
-				{(hooks?.progressBar || progressBar).call(this)}
-
-				{(hooks?.handles || handles).call(this)}
-			</div>
-			{this.editableTooltip && <>
-				<span id="ui5-slider-InputDesc" class="ui5-hidden-text">{this._ariaDescribedByInputText}</span>
-			</>}
-
-		</div>
-
-	);
-}
-
-export function handlesAriaText(this: SliderBase) { }
-export function progressBar(this: SliderBase) { }
-export function handles(this: SliderBase) { }