@sapudex/web-components 0.111.0

package/src/themes/TextField.css

@@ -0,0 +1,290 @@
+:host {
+  --udex-input-color-standard-default-border: var(--sapField_BorderColor, var(--udexColorGrey6));
+  --udex-input-color-standard-default-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));
+  --udex-input-color-standard-default-supporting-text: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));
+  --udex-input-color-standard-default-typed-text: var(--sapField_TextColor, var(--udexCoreTextDark));
+  --udex-input-color-standard-default-background-light: var(--sapField_Background, var(--udexColorNeutralWhite));
+  --udex-input-color-standard-hover-border: var(--sapField_Hover_BorderColor, var(--udexColorBlue6));
+  --udex-input-color-standard-active-border: var(--sapField_Active_BorderColor, var(--udexColorBlue9));
+
+  --udex-input-color-error-default-border: var(--udexCoreSemanticError6, #EE3939);
+  --udex-input-color-error-hover-border: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));
+  --udex-input-color-error-active-border: var(--udexCoreSemanticError9, #840606);
+  --udex-input-color-error-default-supporting-text: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));
+
+  --udex-input-color-warning-default-border: var(--udexCoreSemanticWarning6, #E76500);
+  --udex-input-color-warning-hover-border: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));
+  --udex-input-color-warning-active-border: var(--udexCoreSemanticWarning9, #8D2A00);
+  --udex-input-color-warning-default-supporting-text: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));
+
+  --udex-input-color-success-default-border: var(--udexCoreSemanticSuccess6, #36A41D);
+  --udex-input-color-success-hover-border: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));
+  --udex-input-color-success-active-border: var(--udexCoreSemanticSuccess9, #1E592F);
+  --udex-input-color-success-default-supporting-text: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));
+
+  --udex-input-color-disabled-border: var(--udexColorGrey6, #5B738B);
+  --udex-input-color-disabled-label: var(--sapField_PlaceholderTextColor, var(--udexColorGrey7));
+
+  --udex-input-color-read-only-default-border: var(--sapField_ReadOnly_BorderColor, var(--udexColorGrey6));
+  --udex-input-color-read-only-default-background: var(--sapField_ReadOnly_Background, var(--udexColorGrey2));
+
+  --udex-input-padding: 9px var(--udexSpacer12, 12px);
+}
+
+.udex-text-field__container {
+  width: 100%;
+  position: relative;
+  font-family: var(--sapFontFamily, sans-serif);
+}
+
+:host([disabled]) .udex-text-field__container {
+  opacity: var(--sapContent_DisabledOpacity);
+}
+
+/* Input styles */
+
+.udex-text-field__input {
+  width: 100%;
+  height: 42px;
+  font-size: var(--sapProgress_FontSize, 16px);
+  font-family: inherit;
+  line-height: 24px;
+  color: var(--udex-input-color-standard-default-typed-text);
+  padding: var(--udex-input-padding);
+  border-radius: var(--udexRadiusXS, 4px);
+  box-sizing: border-box;
+  border: 1px solid var(--udex-input-color-standard-default-border);
+  font-weight: var(--udexTypographyFontWeightRegular, 400);
+}
+
+.udex-text-field__container:hover .udex-text-field__input {
+  border: 1px solid var(--udex-input-color-standard-hover-border);
+}
+
+.udex-text-field__input[open],
+:host([active]) .udex-text-field__input, .udex-text-field__input:focus {
+  border: 1px solid var(--udex-input-color-standard-active-border);
+  outline: 0;
+}
+
+.udex-text-field__input[open]:hover {
+  border-color: var(--udex-input-color-standard-active-border);
+}
+
+/* additional #input selector to add weight */
+
+:host([disabled]) .udex-text-field__input {
+  border: 1px solid var(--udex-input-color-disabled-border);
+  background-color: var(--udex-input-color-standard-default-background-light);
+}
+
+:host([readonly]) .udex-text-field__input {
+  border: 1px solid var(--udex-input-color-read-only-default-border);
+  background-color: var(--udex-input-color-read-only-default-background);
+}
+
+:host([displayonly]) .udex-text-field__container .udex-text-field__input {
+  border: 0;
+  background-color: transparent;
+  font-family: inherit;
+}
+
+:host([displayonly]) .udex-text-field__container .udex-text-field__input[open],
+:host([displayonly]) .udex-text-field__container .udex-text-field__input:focus {
+  outline: 0;
+  border: 0;
+}
+
+:host([displayonly][value-state="Success"]) .udex-text-field__input:hover,
+:host([displayonly][value-state="Warning"]) .udex-text-field__input:hover,
+:host([displayonly][value-state="Error"]) .udex-text-field__input:hover {
+  border: none;
+}
+
+:host([value-state="Error"]) .udex-text-field__input {
+  border: 1px solid var(--udex-input-color-error-default-border);
+}
+
+:host([value-state="Error"]) .udex-text-field__input:hover {
+  border: 1px solid var(--udex-input-color-error-hover-border);
+}
+
+:host([value-state="Error"]) .udex-text-field__input[open],
+:host([value-state="Error"]) .udex-text-field__input:focus {
+  border: 1px solid var(--udex-input-color-error-active-border);
+  outline: 0;
+}
+
+:host([value-state="Warning"]) .udex-text-field__input {
+  border: 1px solid var(--udex-input-color-warning-default-border);
+}
+
+:host([value-state="Warning"]) .udex-text-field__input:hover {
+  border: 1px solid var(--udex-input-color-warning-hover-border);
+}
+
+:host([value-state="Warning"]) .udex-text-field__input[open],
+:host([value-state="Warning"]) .udex-text-field__input:focus {
+  border: 1px solid var(--udex-input-color-warning-active-border);
+  outline: 0;
+}
+
+:host([value-state="Success"]) .udex-text-field__input {
+  border: 1px solid var(--udex-input-color-success-default-border);
+}
+
+:host([value-state="Success"]) .udex-text-field__input:hover {
+  border: 1px solid var(--udex-input-color-success-hover-border);
+}
+
+:host([value-state="Success"]) .udex-text-field__input[open],
+:host([value-state="Success"]) .udex-text-field__input:focus {
+  border: 1px solid var(--udex-input-color-success-active-border);
+  outline: 0;
+}
+
+/* Label styles */
+
+.udex-text-field__label {
+  position: absolute;
+  z-index: 2;
+  color: var(--udex-input-color-standard-default-label);
+  transition: transform 150ms ease-out, font-size 150ms ease-out;
+  line-height: 24px;
+  font-weight: var(--udexTypographyFontWeightRegular, 400);
+}
+
+.udex-text-field__container:dir(rtl) .udex-text-field_icon-container {
+  left: 1px;
+  right: auto;
+}
+
+.udex-text-field__container:dir(ltr) .udex-text-field__label,
+.udex-text-field__container:dir(rtl) .udex-text-field__label {
+  top: 9px;
+}
+
+.udex-text-field__container:dir(ltr) .udex-text-field__label {
+  left: 12px;
+}
+
+.udex-text-field__container:dir(rtl) .udex-text-field__label {
+  right: 12px;
+}
+
+:host([displayonly]:dir(ltr)) .udex-text-field__label,
+:host([displayonly]:dir(rtl)) .udex-text-field__label {
+  padding: 0;
+}
+
+.udex-text-field__label.udex-text-field__label_active {
+  line-height: 18px;
+  transform: translateY(-110%);
+  padding: 0 4px;
+  font-size: 12px;
+  background: linear-gradient(transparent 55%, var(--udex-input-color-standard-default-background-light) 45%);
+}
+
+:host([readonly]) .udex-text-field__label.udex-text-field__label_active {
+  background: linear-gradient(transparent 55%, var(--udex-input-color-read-only-default-background) 45%);
+}
+
+:host([displayonly][readonly]) .udex-text-field__label.udex-text-field__label_active,
+:host([displayonly]) .udex-text-field__label.udex-text-field__label_active {
+  background-color: transparent;
+  background: none;
+}
+
+:host([disabled])  .udex-text-field__label {
+  color: var(--udex-input-color-disabled-label);
+}
+
+/* Control button styles */
+.udex-text-field_icon-container {
+  --sapContent_DisabledOpacity: 1;
+  --sapButton_BorderWidth: 0 0 0 1px;
+  --udex-control-button-large-height: 40px;
+  --udex-control-button-large-width: 40px;
+}
+
+.udex-text-field_icon-container {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  right: 1px;
+  top: 1px;
+}
+
+:host(:not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container:hover .udex-text-field_icon-container {
+  --udex-control-button-border-color: var(--udexColorGrey4, #A9B4BE);
+}
+
+:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container:hover .udex-text-field_icon-container {
+  --udex-control-button-border-color: var(--udexColorGrey4, #A9B4BE);
+  --sapButton_BorderWidth: 0 1px 0 0;
+}
+
+:host(:dir(rtl):not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container .udex-text-field_icon-container {
+  --sapButton_BorderWidth: 0 1px 0 0;
+}
+
+:host([value-state="Success"]:not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container:hover .udex-text-field_icon-container ,
+:host([value-state="Error"]:not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container:hover .udex-text-field_icon-container ,
+:host([value-state="Warning"]:not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container:hover .udex-text-field_icon-container {
+  --udex-control-button-border-color: var(--udexColorGrey4, #A9B4BE);
+  --udex-control-button-success-border-color: var(--udexColorGrey4, #A9B4BE);
+  --udex-control-button-error-border-color: var(--udexColorGrey4, #A9B4BE);
+  --udex-control-button-warning-border-color: var(--udexColorGrey4, #A9B4BE);
+}
+
+/* Supporting text styles */
+
+.udex-text-field__supporting-text {
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--udex-input-color-standard-default-supporting-text);
+  padding: 4px 12px 4px 12px;
+  display: block;
+  position: relative;
+}
+
+:host([value-state="Error"]) .udex-text-field__supporting-text {
+  color: var(--udex-input-color-error-default-supporting-text);
+}
+
+:host([value-state="Warning"]) .udex-text-field__supporting-text {
+  color: var(--udex-input-color-warning-default-supporting-text);
+}
+
+:host([value-state="Success"]) .udex-text-field__supporting-text {
+  color: var(--udex-input-color-success-default-supporting-text);
+}
+
+:host .udex-text-field__icon {
+  color: inherit;
+  vertical-align: top;
+  margin-inline-end: var(--udexSpacer4, 4px);
+}
+
+:host .udex-text-field__supporting-text-icon {
+  color: inherit;
+  vertical-align: top;
+  margin-inline-end: var(--udexSpacer4, 4px);
+  width: var(--sapContent_IconHeight, 16px);
+  height: var(--sapContent_IconHeight, 16px);
+}
+
+:host .udex-text-field__input[type="number"] {
+  appearance: textfield;
+}
+
+:host .udex-text-field__input[type="number"]::-webkit-outer-spin-button,
+:host .udex-text-field__input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.hidden-text {
+  display: none;
+}

package/src/themes/Tile.css

@@ -0,0 +1,64 @@
+:host {
+  --udex-tile-color-clickable-default-background: var(--sapTile_Background, #fff);
+  --udex-tile-color-clickable-hover-background: var(--sapTile_Hover_Background, #fff);
+  --udex-tile-color-clickable-focus-background: var(--sapTile_Active_Background, #fff);
+  --udex-tile-color-clickable-default-border: var(--sapTile_BorderColor, #EAECEE);
+  --udex-tile-color-clickable-hover-border: var(--sapTile_Interactive_BorderColor, #1B90FF);
+  --udex-tile-color-clickable-focus-border: var(--udexColorBlue7, #0070f2);
+
+  --udex-tile-color-generic-default-background: var(--sapTile_Background, #fff);
+  --udex-tile-color-generic-hover-background: var(--sapTile_Hover_Background, #fff);
+  --udex-tile-color-generic-focus-background: var(--sapTile_Active_Background, #fff);
+
+  --udex-tile-box-shadow-generic-default: var(--sapContent_Shadow0, "0 2px 4px 0 rgba(34, 54, 73, 0.20)");
+  --udex-tile-box-shadow-generic-hover: var(--sapContent_Shadow1, "0 2px 8px 0 rgba(34, 54, 73, 0.30)");
+
+  --udex-tile-content-padding-vertical: var(--udexSpacer24, 24px);
+  --udex-tile-content-padding-horizontal: var(--udexSpacer20, 20px);
+
+  --udex-tile-radius: var(--udexRadiusL, 12px);
+}
+
+.udex-tile {
+  border-radius: var(--udex-tile-radius);
+  background: var(--udex-tile-color-generic-default-background);
+  padding: var(--udex-tile-content-padding-vertical) var(--udex-tile-content-padding-horizontal);
+  box-shadow: var(--udex-tile-box-shadow-generic-default);
+}
+
+:host([interactive]) .udex-tile {
+  display: block;
+  color: inherit;
+  text-decoration: inherit;
+  outline: 1px solid var(--udex-tile-color-clickable-default-border);
+  background: var(--udex-tile-color-clickable-default-background);
+}
+
+.udex-tile:hover {
+  box-shadow: var(--udex-tile-box-shadow-generic-hover);
+  background: var(--udex-tile-color-generic-hover-background);
+}
+
+:host([interactive]) .udex-tile:hover {
+  outline: 1px solid var(--udex-tile-color-clickable-hover-border);
+  background: var(--udex-tile-color-clickable-hover-background);
+}
+
+:host([desktop]) .udex-tile:focus,
+.udex-tile:focus-visible,
+:host .udex-tile:active {
+  background: var(--udex-tile-color-generic-focus-background);
+}
+
+
+:host([interactive][desktop]) .udex-tile:focus,
+:host([interactive]) .udex-tile:focus-visible,
+:host([interactive]) .udex-tile:active {
+  outline: 2px solid var(--udex-tile-color-clickable-focus-border);
+  box-shadow: var(--udex-tile-box-shadow-generic-default);
+  background: var(--udex-tile-color-clickable-focus-background);
+}
+
+:host([hide-shadow]) .udex-tile {
+  box-shadow: none;
+}

package/src/themes/Toast.css

@@ -0,0 +1,49 @@
+:host {
+  --udex-toast-font-size: var(--udexTypographyBodyXSFontSize, 14px);
+  --udex-toast-color: var(--udexColorGrey9, #223548);
+  --udex-toast-text-line-height: 1.313rem;
+  --udex-toast-border-width: 1px;
+  --udex-toast-border-color: var(--udexColorGrey3, #D5DADD);
+  --udex-toast-close-icon-color: var(--udexColorGrey7, #475E75);
+  --udex-toast-status-icon-size: var(--udexCoreSizeIconInput, 18px);
+
+  border: var(--udex-toast-border-width) solid var(--udex-toast-border-color);
+  padding: 0;
+}
+
+:host([desktop]) .udex-toast:focus,
+.udex-toast:focus-visible {
+  outline: var(--udexSpacer2, 2px) solid var(--udexColorBlue9, #0040B0);
+  outline-offset: -2px;
+}
+
+.udex-toast {
+  display: flex;
+  align-items: center;
+  padding: var(--udexSpacer16);
+  border-radius: inherit;
+  line-height: var(--udex-toast-text-line-height);
+  font-size: var(--udexTypographyBodyXSFontSize, 14px);
+  --sapFontSize: var(--udex-toast-font-size);
+}
+
+.udex-toast .udex-toast__icon:dir(ltr) {
+  margin-right: var(--udexSpacer16);
+}
+
+.udex-toast .udex-toast__icon:dir(rtl) {
+  margin-left: var(--udexSpacer16);
+}
+
+.udex-toast .udex-toast__button {
+  height: var(--udex-toast-text-line-height);
+  --udex-button-color-tertiary-standard-default-text-and-icon: var(--udex-toast-close-icon-color);
+}
+
+.udex-toast .udex-toast__button:dir(ltr) {
+  margin: 0 0 0 9px;
+}
+
+.udex-toast .udex-toast__button:dir(rtl) {
+  margin: 0 9px 0px 0px;
+}

package/src/themes/Tooltip.css

@@ -0,0 +1,24 @@
+:host {
+  font-family: var(--sapFontFamily, sans-serif);
+  font-size: var(--sapFontSize, 16px);
+  color: var(--udexColorGrey9, #223548);
+  --udex-tooltip-background-color: var(--udexColorNeutralWhite, #fff);
+  --udex-tooltip-border-color: var(--udexColorGrey4,
+      var(--udexColorGrey4));
+  --udex-tooltip-box-shadow: var(--sapContent_Shadow0,
+      0px 2px 4px 0px rgba(34, 54, 73, 0.2));
+}
+
+.udex-tooltip__pane {
+  border: var(--sapElement_BorderWidth, 1px) solid var(--udex-tooltip-border-color);
+  box-shadow: var(--udex-tooltip-box-shadow);
+  border-radius: var(--sapPopover_BorderCornerRadius, 8px);
+  background: var(--udex-tooltip-background-color);
+  max-width: 360px;
+}
+
+.udex-tooltip-title {
+  font-size: var(--udexTypographyHeadingMediumXXXSFontSize, 18px);
+  font-weight: var(--udexTypographyFontWeightMedium, 500);
+  padding-bottom: var(--udexSpacer8, 8px);
+}

package/src/themes/TruncatedText.css

@@ -0,0 +1,26 @@
+:host {
+  --udex-truncated-text-font-size: var(--udexTypographyBodySFontSize, 16px);
+  --udex-truncated-text-line-height: var(--udexTypographyBodyLineHeight, 24px);
+}
+
+.udex-truncated-text {
+  font-family: var(--sapFontFamily);
+  font-size: var(--udex-truncated-text-font-size);
+  line-height: var(--udex-truncated-text-line-height);
+  font-weight:  var(--udexTypographyFontWeightRegular);
+}
+
+.udex-truncated-text__visible-text{
+  vertical-align: middle;
+}
+
+.udex-truncated-text__toggle-button {
+  --udex-button-color-tertiary-standard-hover-background: transparent;
+  --udex-button-color-tertiary-standard-hover-border: transparent;
+  --udex-button-color-tertiary-standard-default-text-and-icon: var(--udexColorBlue7);
+  --udex-button-color-tertiary-standard-active-border: transparent;
+  --udex-button-color-tertiary-standard-default-border: transparent;
+  --udex-button-padding-small: 0 3px;
+  --udexTypographyFontWeightMedium: 400;
+  display: inline-block;
+}

package/src/themes/Wizard.css

@@ -0,0 +1,45 @@
+:host {
+    --udex-wizard-background-color: var(--sapBackgroundColor, #FFFFFF);
+    --udex-wizard-nav-shadow: var(--sapContent_HeaderShadow, none);
+}
+
+:host .ui5-wiz-nav {
+    box-shadow: var(--udex-wizard-nav-shadow);
+    position: relative;
+    z-index: 1;
+}
+
+:host([_breakpoint="S"])::part(navigator),
+:host([_breakpoint="M"])::part(navigator),
+:host([_breakpoint="L"])::part(navigator),
+:host([_breakpoint="XL"])::part(navigator),
+:host([_breakpoint="S"])::part(step-content),
+:host([_breakpoint="M"])::part(step-content),
+:host([_breakpoint="L"])::part(step-content),
+:host([_breakpoint="XL"])::part(step-content) {
+  padding-left: .375rem;
+  padding-right: .375rem;
+}
+
+:host .ui5-wiz-nav-list {
+    display: flex;
+}
+
+:host .ui5-wiz-content {
+    background: var(--udex-wizard-background-color);
+}
+
+[udex-wizard-tab] {
+    display: block;
+    flex-grow: 1;
+    position: relative;
+}
+
+:host(:not([indeterminate])) [udex-wizard-tab]:last-child {
+  flex-grow: 0;
+}
+
+[udex-wizard-tab][data-ui5-wizard-expanded-tab-prev="true"] {
+    width: 2rem;
+    padding-right: .75rem;
+}

package/src/themes/WizardTab.css

@@ -0,0 +1,74 @@
+:host {
+    --udex-wizard-title-color: var(--udexColorGrey9, #223548);
+    --udex-wizard-disabled-number-color: var(--udexColorGrey6, #5B738B);
+    --udex-wizard-disabled-border-color: var(--udexColorGrey4, #A9B4BE);
+    --udex-wizard-completed-number-color: var(--udexColorBlue9, #0040B0);
+    --udex-wizard-completed-border-color: var(--udexColorBlue9, #0040B0);
+}
+
+:host .ui5-wiz-step-title-text {
+    font-size: var(--udexTypographyNavigationMediumMFontSize);
+    font-weight: var(--udexTypographyFontWeightMedium);
+}
+
+:host .ui5-wiz-step-icon-circle {
+    margin: 0px 6px;
+}
+
+:host .ui5-wiz-step-texts {
+    padding-left: 2px;
+}
+
+:host .ui5-wiz-step-hr {
+  margin-left: .25rem;
+  margin-right: .25rem;
+}
+
+:host([selected]:not([disabled])) .ui5-wiz-step-title-text,
+:host([disabled]) .ui5-wiz-step-title-text {
+    color: var(--udex-wizard-title-color);
+}
+
+/* selected state */
+:host([selected]:not([disabled])) .ui5-wiz-step-icon-circle::after {
+    border-bottom: .188rem solid var(--udexColorBlue7);
+}
+
+/* disabled state */
+:host([disabled]) .ui5-wiz-step-number,
+:host([disabled]) .ui5-wiz-step-icon {
+    color: var(--udex-wizard-disabled-number-color);
+}
+
+:host([disabled]) .ui5-wiz-step-icon-circle {
+    border-color: var(--udex-wizard-disabled-border-color);
+}
+
+:host(:last-child) .ui5-wiz-step-hr {
+    border: none;
+    background-image: linear-gradient(to right, var(--udexColorGrey6) 50%, transparent 0%);
+    background-size: 4px 2px;
+}
+
+/* completed state */
+:host([completed]:not([selected])) .ui5-wiz-step-number,
+:host([completed]:not([selected])) .ui5-wiz-step-icon {
+    color: var(--udex-wizard-completed-number-color);
+}
+
+:host([completed]:not([selected])) .ui5-wiz-step-icon-circle {
+    border-color: var(--udex-wizard-completed-border-color);
+}
+
+/* hide title & subtitle for small screens */
+:host([breakpoint="S"]) .ui5-wiz-step-texts {
+    display: none;
+}
+
+:host([ breakpoint="S"]) .ui5-wiz-step-texts {
+    padding-left: 4px;
+}
+
+:host([ breakpoint="S"]) .ui5-wiz-step-icon-circle {
+    margin: 0px 2px;
+}