@ui5/webcomponents 0.0.0-d9b978d1d → 0.0.0-da0d3eb88

package/src/TimeSelection.hbs

@@ -1,60 +0,0 @@
-<div
-		class="{{classes.root}}"
-		tabindex="-1"
-		@keydown={{_onkeydown}}
-		@focusin="{{_onfocusin}}"
-		@focusout="{{_onfocusout}}"
->
-	{{#if _hasHoursSlider}}
-		<ui5-wheelslider
-				label = "{{hoursSliderTitle}}"
-				._items="{{hoursArray}}"
-				data-sap-focus-ref
-				?expanded="{{_hoursSliderFocused}}"
-				value="{{_hours}}"
-				@ui5-select="{{onHoursChange}}"
-				@click="{{selectSlider}}"
-				@focusin="{{selectSlider}}"
-				data-sap-slider="hours"
-				cyclic
-		></ui5-wheelslider>
-	{{/if}}
-	{{#if _hasMinutesSlider}}
-		<ui5-wheelslider
-				label = "{{minutesSliderTitle}}"
-				._items="{{minutesArray}}"
-				?expanded="{{_minutesSliderFocused}}"
-				value="{{_minutes}}"
-				@ui5-select="{{onMinutesChange}}"
-				@click="{{selectSlider}}"
-				@focusin="{{selectSlider}}"
-				data-sap-slider="minutes"
-				cyclic
-		></ui5-wheelslider>
-	{{/if}}
-	{{#if _hasSecondsSlider}}
-		<ui5-wheelslider
-				label = "{{secondsSliderTitle}}"
-				._items="{{secondsArray}}"
-				?expanded="{{_secondsSliderFocused}}"
-				value="{{_seconds}}"
-				@ui5-select="{{onSecondsChange}}"
-				@click="{{selectSlider}}"
-				@focusin="{{selectSlider}}"
-				data-sap-slider="seconds"
-				cyclic
-		></ui5-wheelslider>
-	{{/if}}
-	{{#if _hasPeriodsSlider}}
-		<ui5-wheelslider
-				label = "{{periodSliderTitle}}"
-				._items="{{periodsArray}}"
-				?expanded="{{_periodSliderFocused}}"
-				value="{{_period}}"
-				@ui5-select="{{onPeriodChange}}"
-				@click="{{selectSlider}}"
-				@focusin="{{selectSlider}}"
-				data-sap-slider="periods"
-		></ui5-wheelslider>
-	{{/if}}
-</div>

package/src/WheelSlider.hbs

@@ -1,48 +0,0 @@
-<div
-	id="{{this._id}}"
-	?disabled= "{{disabled}}"
-	value = "{{value}}"
-	label = "{{label}}"
-	@click = {{_onclick}}
-	@keydown={{_onkeydown}}
-	class = "{{classes.root}}"
-	data-sap-focus-ref
-	tabindex="0"
-	@wheel="{{_handleWheel}}"
->
-	<div class="ui5-wheelslider-header-block">
-		<div id="{{this._id}}--label" class="ui5-wheelslider-label">{{label}}</div>
-		<div class="ui5-wheelslider-invisible-text"></div>
-		<ui5-button class="ui5-wheelslider-arrow" icon="navigation-up-arrow" @click={{_onArrowUp}} tabindex="-1"></ui5-button>
-	</div>
-	<div id="{{this._id}}--inner" class="ui5-wheelslider-inner">
-	<div id="{{this._id}}--selection-frame" class="ui5-wheelslider-selection-frame"></div>
-		<div id="{{this._id}}--wrapper" class="ui5-wheelslider-wrapper">
-			{{#if expanded}}
-				<ul id="{{this._id}}--items-list" role="listbox" aria-label="{{label}}">
-					{{#each _itemsToShow}}
-						<li class="ui5-wheelslider-item"
-							data-item-index="{{@index}}"
-							role="option"
-							aria-selected="{{this.selected}}"
-						>
-							{{this.value}}
-						</li>
-					{{/each}}
-				</ul>
-			{{else}}
-				<ul id="{{this._id}}--items-list" role="listbox" aria-label="{{label}}">
-					<li class="ui5-wheelslider-item"
-						role="option"
-						aria-selected="true"
-					>
-						{{value}}
-					</li>
-				</ul>
-			{{/if}}
-		</div>
-	</div>
-	<div class="ui5-wheelslider-footer-block">
-		<ui5-button class="ui5-wheelslider-arrow" icon="navigation-down-arrow" @click={{_onArrowDown}} tabindex="-1"></ui5-button>
-	</div>
-</div>

package/src/themes/Badge.css

@@ -1,139 +0,0 @@
-@import "./InvisibleTextStyles.css";
-
-:host(:not([hidden])) {
-	display: inline-block;
-	vertical-align: top;
-	height: var(--_ui5-badge-height);
-	min-width: 1.125em;
-	max-width: 100%;
-	padding-inline: var(--_ui5-badge-padding-inline);
-	border: var(--_ui5-badge-border);
-	border-color: var(--_ui5-badge-default-border-color);
-	background: var(--_ui5-badge-default-background);
-	color: var(--_ui5-badge-default-color);
-	border-radius: var(--_ui5-badge-border-radius);
-	box-sizing: border-box;
-	font-family: var(--_ui5-badge-font);
-	font-weight: var(--_ui5-badge-font-weight);
-	font-size: var(--_ui5-badge-font-size);
-	text-align: center;
-	letter-spacing: var(--_ui5-badge-letter-spacing);
-}
-
-.ui5-badge-root {
-	display: flex;
-	align-items: center;
-	width: 100%;
-	height: 100%;
-	box-sizing: border-box;
-	pointer-events: none;
-}
-
-.ui5-badge-text {
-	width: 100%;
-	overflow: hidden;
-	white-space: nowrap;
-	font-weight: inherit;
-	text-overflow: ellipsis;
-	text-transform: var(--_ui5-badge-text-transform);
-	letter-spacing: inherit;
-	font-size: inherit;
-}
-
-:host([_icon-only]) {
-	padding-inline: var(--_ui5-badge-padding-inline-icon-only);
-}
-
-::slotted([ui5-icon]) {
-	width: 0.75em;
-	height: 0.75em;
-	min-width: 0.75em;
-	min-height: 0.75em;
-	color: inherit;
-}
-
-:host([_has-icon]) .ui5-badge-text {
-	padding-inline-start: var(--_ui5-badge-icon-gap);
-}
-
-/* Scheme 1 */
-:host([color-scheme="1"]) {
-	background-color: var(--ui5-badge-color-scheme-1-background);
-	border-color: var(--ui5-badge-color-scheme-1-border);
-	color: var(--ui5-badge-color-scheme-1-color);
-}
-
-/* Scheme 2 */
-:host([color-scheme="2"]) {
-	background-color: var(--ui5-badge-color-scheme-2-background);
-	border-color: var(--ui5-badge-color-scheme-2-border);
-	color: var(--ui5-badge-color-scheme-2-color);
-}
-
-/* Scheme 3 */
-:host([color-scheme="3"]) {
-	background-color: var(--ui5-badge-color-scheme-3-background);
-	border-color: var(--ui5-badge-color-scheme-3-border);
-	color: var(--ui5-badge-color-scheme-3-color);
-}
-
-/* Scheme 4 */
-:host([color-scheme="4"]) {
-	background-color: var(--ui5-badge-color-scheme-4-background);
-	border-color: var(--ui5-badge-color-scheme-4-border);
-	color: var(--ui5-badge-color-scheme-4-color);
-}
-
-/* Scheme 5 */
-:host([color-scheme="5"]) {
-	background-color: var(--ui5-badge-color-scheme-5-background);
-	border-color: var(--ui5-badge-color-scheme-5-border);
-	color: var(--ui5-badge-color-scheme-5-color);
-}
-
-/* Scheme 6 */
-:host([color-scheme="6"]) {
-	background-color: var(--ui5-badge-color-scheme-6-background);
-	border-color: var(--ui5-badge-color-scheme-6-border);
-	color: var(--ui5-badge-color-scheme-6-color);
-}
-
-/* Scheme 7 */
-:host([color-scheme="7"]) {
-	background-color: var(--ui5-badge-color-scheme-7-background);
-	border-color: var(--ui5-badge-color-scheme-7-border);
-	color: var(--ui5-badge-color-scheme-7-color);
-}
-
-/* Scheme 8 */
-:host([color-scheme="8"]) {
-	background-color: var(--ui5-badge-color-scheme-8-background);
-	border-color: var(--ui5-badge-color-scheme-8-border);
-	color: var(--ui5-badge-color-scheme-8-color);
-}
-
-/* Scheme 9 */
-:host([color-scheme="9"]) {
-	background-color: var(--ui5-badge-color-scheme-9-background);
-	border-color: var(--ui5-badge-color-scheme-9-border);
-	color: var(--ui5-badge-color-scheme-9-color);
-}
-
-/* Scheme 10 */
-:host([color-scheme="10"]) {
-	background-color: var(--ui5-badge-color-scheme-10-background);
-	border-color: var(--ui5-badge-color-scheme-10-border);
-	color: var(--ui5-badge-color-scheme-10-color);
-}
-
-/* ---Slotted Badges--- */
-/* [ui5-avatar] - Badge icon styles */
-/* Make icon take full width minus padding.
- [ui5-avatar] is the only component using an icon for badge,
- therefore no additional scoping is needed. */
-:host([slot="badge"]) ::slotted([ui5-icon][slot="icon"]) {
-	width: 100%;
-	height: 100%;
-	min-width: 100%;
-	min-height: 100%;
-}

package/src/themes/PopupStaticAreaStyles.css

@@ -1,17 +0,0 @@
-.ui5-block-layer {
-	display: none;
-	position: fixed;
-	background-color: var(--sapBlockLayer_Background);
-	opacity: 0.6;
-	top: -500px;
-	left: -500px;
-	right: -500px;
-	bottom: -500px;
-	outline: none;
-	pointer-events: all;
-	z-index: -1;
-}
-
-.ui5-block-layer:not([hidden]) {
-	display: inline-block;
-}

package/src/themes/SelectMenu.css

@@ -1,16 +0,0 @@
-.ui5-select-menu::part(content),
-.ui5-select-menu::part(header) {
-	padding: 0;
-}
-
-.ui5-select-menu [ui5-li-custom] {
-	height: var(--_ui5_list_item_dropdown_base_height);
-}
-
-.ui5-select-menu [ui5-li-custom]::part(native-li) {
-	padding: 0;
-}
-
-.ui5-select-menu [ui5-icon] {
-	color: var(--sapList_TextColor);
-}

package/src/themes/Table.css

@@ -1,106 +0,0 @@
-@import "./GrowingButton.css";
-
-:host(:not([hidden])) {
-	display: inline-block;
-	width: 100%;
-}
-
-.ui5-table-root {
-	position: relative;
-	border-bottom: var(--ui5_table_bottom_border);
-}
-
-table {
-	width: 100%;
-	border-spacing: 0;
-	border-collapse: collapse;
-}
-
-.ui5-table-header-row-navigated {
-    width: 0.1875rem;
-    background: var(--sapList_HeaderBackground);
-    vertical-align: middle;
-}
-
-.ui5-table-header-row {
-	color: var(--sapList_HeaderTextColor);
-	height: var(--ui5_table_header_row_height);
-	font-family: "72override", var(--sapFontFamily);
-	font-size: var(--sapFontSize);
-	font-weight: var(--ui5_table_header_row_font_weight);
-	border-bottom: var(--ui5_table_header_row_border_width) solid var(--ui5_table_header_row_border_bottom_color);
-}
-
-.ui5-table-header-row:focus {
-	outline: var(--ui5_table_header_row_outline_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-	outline-offset: var(--ui5_table_focus_outline_offset);
-}
-
-tr {
-	height: 3rem;
-}
-
-.ui5-table-no-data-row {
-	display: flex;
-	align-items: center;
-	width: 100%;
-	height: auto;
-	justify-content: center;
-	text-align: center;
-	padding: 0.5rem 1rem;
-	font-family: "72override", var(--sapFontFamily);
-	font-size: 0.875rem;
-	box-sizing: border-box;
-	color: var(--sapTextColor);
-	min-height: 3rem;
-	background-color: var(--sapList_Background);
-}
-
-.ui5-table-end-row {
-	height: 0px;
-}
-
-:host([busy]) .ui5-table-busy-row {
-	position: absolute;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	top: 0;
-	outline: none;
-	z-index: 100;
-}
-
-:host([busy]) .ui5-table-busy-ind {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	z-index: 1;
-}
-
-:host([busy]) [growing-button] {
-	opacity: 0.72;
-}
-
-:host [growing-button] {
-	border-bottom: var(--_ui5_table_load_more_border-bottom);
-}
-
-.ui5-table-select-all-column {
-	width: var(--ui5_table_multiselect_column_width);
-	text-align: center;
-}
-
-:host([sticky-column-header]) .ui5-table-header-row {
-	position: sticky;
-	top: 0;
-	z-index: 99;
-}
-
-th {
-	background: var(--sapList_HeaderBackground);
-}
-
-.ui5-table-focusarea {
-	position: fixed;
-}

package/src/themes/TableCell.css

@@ -1,27 +0,0 @@
-:host {
-	display: table-cell;
-	font-family: "72override", var(--sapFontFamily);
-	font-size: 0.875rem;
-	height: var(--ui5_table_row_height);
-	box-sizing: border-box;
-	color: var(--sapList_TextColor);
-	word-break: break-word;
-	vertical-align: middle;
-}
-
-td {
-	display: contents;
-}
-
-:host([popined]) {
-	padding-left: 0;
-	padding-top: .25rem;
-}
-
-:host([_popined-inline]) {
-	padding-top: 0;
-}
-
-::slotted([ui5-label]) {
-	color: inherit;
-}

package/src/themes/TableColumn.css

@@ -1,25 +0,0 @@
-:host {
-	display: contents;
-}
-
-th {
-	background: var(--sapList_HeaderBackground);
-	width: inherit;
-	font-weight: var(--ui5_table_header_row_font_weight);
-	font-size: var(--sapFontMediumSize);
-	font-family: var(--ui5_table_header_row_font_family);
-	padding: 0.5rem;
-	box-sizing: border-box;
-	text-align: start;
-	vertical-align: middle;
-}
-
-:host([first]) th {
-	padding-inline-start: 1rem;
-}
-
-th ::slotted([ui5-label]) {
-	font-weight: var(--ui5_table_header_row_font_weight);
-	font-size: var(--sapFontMediumSize);
-	font-family: var(--ui5_table_header_row_font_family);
-}

package/src/themes/TableGroupRow.css

@@ -1,32 +0,0 @@
-:host {
-    display: contents;
-}
-
-:host([_busy]) .ui5-table-group-row-root {
-	opacity: 0.72;
-	pointer-events: none;
-}
-
-.ui5-table-group-row-root {
-	height: var(--ui5_table_group_row_height);
-	border-style: solid;
-	border-color: var(--sapList_TableGroupHeaderBorderColor);
-	border-width: var(--ui5_table_border_width);
-	background-color: var(--sapList_TableGroupHeaderBackground);
-	color: var(--sapList_TableGroupHeaderTextColor);
-	font-family: "72override", var(--sapFontFamily);
-	font-size: var(--sapFontSize);
-	font-weight: var(--ui5_table_group_row_font-weight);
-}
-
-.ui5-table-group-row-root:focus {
-	outline: var(--ui5_table_row_outline_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-	outline-offset: var(--ui5_table_focus_outline_offset);
-}
-
-td {
-	word-break: break-word;
-	vertical-align: middle;
-	padding: .5rem .25rem .5rem 1rem;
-	text-align: start;
-}

package/src/themes/TableRow.css

@@ -1,126 +0,0 @@
-:host {
-	display: contents;
-}
-
-:host([_busy]) .ui5-table-row-root {
-	opacity: 0.72;
-	pointer-events: none;
-}
-
-.ui5-table-row-root {
-	background-color: var(--sapList_Background);
-	color: var(--sapList_TextColor);
-	border-top: 1px solid var(--sapList_BorderColor);
-}
-
-.ui5-table-row-root:focus {
-	outline: var(--ui5_table_row_outline_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-	outline-offset: var(--ui5_table_focus_outline_offset);
-}
-
-.ui5-table-popin-row {
-	background-color: var(--sapList_Background);
-}
-
-.ui5-table-popin-row.all-columns-popped-in.popin-header {
-	border-top: 1px solid var(--sapList_BorderColor);
-}
-
-.ui5-table-popin-row td:not(.ui5-table-row-navigated) {
-	padding-top: .5rem;
-	padding-inline-start: 1rem;
-}
-
-:host([mode="MultiSelect"]) .ui5-table-popin-row td:not(.ui5-table-row-navigated) {
-	padding-inline-start: var(--ui5_table_multiselect_popin_row_padding);
-}
-
-.ui5-table-popin-row:last-child td {
-	padding-bottom: .5rem;
-}
-
-.ui5-table-row-popin-title {
-	color: var(--sapContent_LabelColor);
-	font-family: "72override", var(--sapFontFamily);
-	font-size: var(--sapFontSize);
-}
-
-.ui5-table-cell-display-inline {
-	margin-inline-start: 0.5rem;
-}
-
-.ui5-table-display-inline-container {
-	display: flex;
-	align-items: center;
-}
-
-.ui5-table-multi-select-cell {
-	padding: .25rem 0;
-	box-sizing: border-box;
-	text-align: center;
-	vertical-align: middle;
-}
-
-:host([mode="SingleSelect"]) .ui5-table-row-root {
-	cursor: pointer;
-}
-:host([mode="MultiSelect"]) .ui5-table-row-root .ui5-table-multi-select-cell {
-	cursor: pointer;
-}
-
-:host ::slotted([ui5-table-cell]:not([popined])) {
-	padding: .25rem .5rem;
-}
-
-:host(:not([mode="MultiSelect"])) ::slotted([ui5-table-cell]:not([popined]):first-child) {
-	padding-inline-start: 1rem;
-}
-
-/** Hover **/
-:host([type="Active"]) .ui5-table-row-root:hover,
-:host([mode="SingleSelect"]) .ui5-table-row-root:hover:not(:active) {
-	background-color: var(--sapList_Hover_Background);
-}
-
-/** Down/Active **/
-:host([type="Active"]) .ui5-table-row-root:active,
-:host([selected][type="Active"]) .ui5-table-row-root:active {
-	background-color: var(--sapList_Active_Background);
-}
-
-:host([type="Active"]) .ui5-table-row-root:active ::slotted([ui5-table-cell]) {
-	color: var(--sapList_Active_TextColor);
-}
-
-/** Selected **/
-:host([selected]) .ui5-table-row-root:not(:active) {
-	background-color: var(--sapList_SelectionBackgroundColor);
-	border-bottom: 1px solid var(--sapList_SelectionBorderColor);
-}
-
-/** Hover on Selected **/
-:host([selected][type="Active"]) .ui5-table-row-root:hover:not(:active),
-:host([selected][mode="SingleSelect"]) .ui5-table-row-root:hover:not(:active) {
-	background-color: var(--sapList_Hover_SelectionBackground);
-}
-
-/** Navigated **/
-:host([navigated]) .ui5-table-row-root:focus .ui5-table-div-navigated {
-    width: 0.09375rem;
-	top: 2px;
-	inset-inline-end: 2px;
-	bottom: 1px;
-}
-
-:host([navigated]) .ui5-table-row-navigated {
-    vertical-align: middle;
-    padding: 0;
-    position: relative;
-}
-
-:host([navigated]) .ui5-table-div-navigated {
-	width: 0.1875rem;
-    position: absolute;
-	inset: 0;
-    background-color: var(--sapList_SelectionBorderColor);
-}

package/src/themes/TimeSelection.css

@@ -1,27 +0,0 @@
-:host(:not([hidden])) {
-    display: inline-block;
-    min-width: 18rem;
-}
-
-.ui5-time-selection-root {
-    width: 100%;
-    height: 100%;
-	display: flex;
-	justify-content: center;
-	align-items: stretch;
-	direction: ltr;
-	box-sizing: border-box;
-}
-
-.ui5-time-selection-root.ui5-phone{
-	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;
-}