@sapudex/web-components 0.111.0 → 0.117.1

package/src/themes/Search.css

@@ -20,7 +20,20 @@
   --udex-input-padding-horizontal: var(--udexSpacer12, 12px);
   --udex-input-padding-vertical: var(--udexSpacer8, 8px);
 
-  --udex-button-icon-size: var(--sapGroup_Title_FontSize, var(--udexCoreSizeIconInput));
+  --udex-button-icon-size: var(--sapFontHeader5Size, 18px);
+
+  --udex-dropdown-border-width: auto;
+
+  --udex-search-container-padding-inline-end: 12px;
+  --udex-search-label-inset-inline-start: 12px;
+  --udex-search-icons-margin-inline-end: 12px;
+
+  --udex-search-label-width: calc(
+    100% -
+    var(--udex-search-label-inset-inline-start) -
+    var(--udex-input-padding-horizontal) -
+    var(--udex-search-container-padding-inline-end)
+  );
 
   display: block;
   width: 100%;
@@ -30,7 +43,8 @@
   display: none;
 }
 
-:host(:not([mode="Home Search"])) .udex-search__label.udex-search__label--active.udex-search__label--animation-enabled {
+:host(:not([mode="Home Search"])) .udex-search__label.udex-search__label--active.udex-search__label--animation-enabled,
+:host(:not([mode="Home Search"])) .udex-search-prefix .udex-search__label.udex-search__label--active.udex-search__label--animation-enabled {
   display: block;
   line-height: 18px;
   transform: translateY(-110%);
@@ -42,20 +56,36 @@
   background-color: #FFFFFF;
 }
 
-:host([mode="Home Search"]) .udex-search__root {
+:host([mode="Home Search"]) .udex-search__root,
+:host([mode="Home Search"]) .udex-search__root.udex-search-prefix {
   --udex-input-radius: var(--udexRadiusXXL, 24px);
   position: relative;
   z-index: 1;
 }
 
-:host([mode="Home Search"]) .udex-search__root.udex-search__root--show-popover::after {
+:host([mode="Home Search"]) .udex-search__root.udex-search-prefix {
+  display: flex;
+  width: 100%;
+  position: relative;
+  z-index: 1;
+}
+
+:host([mode="Home Search"]) .udex-search-prefix .udex-search__prefix + .udex-search__container {
+  border-start-start-radius: 0;
+  border-start-end-radius: var(--udexRadiusXXL, 24px);
+  border-end-start-radius: 0;
+  border-end-end-radius: var(--udexRadiusXXL, 24px);
+  flex-grow: 1;
+}
+
+:host([mode="Home Search"]) .udex-search__root.udex-search__root--show-popover::after,
+:host([mode="Home Search"]) .udex-search__root.udex-search-prefix.udex-search__root--show-popover::after {
   content: '';
   position: absolute;
   z-index: -1;
   height: 21px;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset-inline: 0;
+  inset-block-end: 0;
   background-color: var(--udexColorNeutralWhite, #fff);
   border-left: 1px solid var(--udexColorGrey6, #5B738B);
   border-right: 1px solid var(--udexColorGrey6, #5B738B);
@@ -63,17 +93,25 @@
   overflow-y: hidden;
 }
 
+:host([mode="Home Search"]) .udex-search__root.udex-search-prefix.udex-search__root--show-popover::after {
+  inset-inline-start: auto;
+  width: 50px;
+}
+
 :host([mode="Home Search"]) .udex-search__container:not(.udex-search__container--has-value),
-:host([mode="Home Search"]) .udex-search__container:not(.udex-search__container--has-value) .udex-search__field {
+:host([mode="Home Search"]) .udex-search__container:not(.udex-search__container--has-value) .udex-search__field,
+:host([mode="Home Search"]) .udex-search-prefix .udex-search__container:not(.udex-search__container--has-value),
+:host([mode="Home Search"]) .udex-search-prefix .udex-search__container:not(.udex-search__container--has-value) .udex-search__field {
   background-color: var(--udex-input-background-color);
 }
 
-:host([mode="Home Search"]) .udex-search__label.udex-search__label--active {
+:host([mode="Home Search"]) .udex-search__label.udex-search__label--active,
+:host([mode="Home Search"]) .udex-search-prefix .udex-search__label.udex-search__label--active {
   display: none;
 }
 
 .udex-search__container {
-  padding-inline-end: 12px;
+  padding-inline-end: var(--udex-search-container-padding-inline-end);
   display: flex;
   align-items: center;
   position: relative;
@@ -133,7 +171,7 @@ input[type="search"]::-webkit-search-results-decoration {
 .udex-search__label {
   position: absolute;
   inset-block-start: 9px;
-  inset-inline-start: 12px;
+  inset-inline-start: var(--udex-search-label-inset-inline-start);
   z-index: 2;
   color: var(--udex-input-color-label);
   font-family: var(--udex-input-font-family-label);
@@ -141,6 +179,22 @@ input[type="search"]::-webkit-search-results-decoration {
   font-weight: var(--udex-input-font-weight-label);
   line-height: var(--udex-input-line-height-label);
   transition: transform 150ms ease-out, font-size 150ms ease-out;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: var(--udex-search-label-width);
+}
+
+.udex-search__label-with-search-icon,
+.udex-search__label-with-voice-icon {
+  max-width: calc(var(--udex-search-label-width) - var(--udex-button-icon-size));
+}
+
+.udex-search__label-with-search-icon.udex-search__label-with-voice-icon {
+  max-width: calc(
+    var(--udex-search-label-width) -
+    var(--udex-button-icon-size) * 2 -
+    var(--udex-search-icons-margin-inline-end)
+  );
 }
 
 .udex-search__icons {
@@ -153,7 +207,7 @@ input[type="search"]::-webkit-search-results-decoration {
 }
 
 .udex-search__icons>* {
-  margin-inline-end: 12px;
+  margin-inline-end: var(--udex-search-icons-margin-inline-end);
 }
 
 .udex-search__icons>*:last-child {
@@ -181,16 +235,20 @@ input[type="search"]::-webkit-search-results-decoration {
 [ui5-button].udex-search__button:focus::before {
   content: '';
   position: absolute;
-  inset-block-start: -5px;
-  inset-inline-start: -5px;
-  width: 28px;
-  height: 28px;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  width: 18px;
+  height: 18px;
   border: 2px solid #0040B0;
   border-radius: 50%;
   box-sizing: border-box;
 }
 
-[ui5-button].udex-search__button::part(button),
+[ui5-button].udex-search__button::part(button) {
+  width: 18px;
+  height: 18px;
+}
+
 [ui5-button].udex-search__button::part(icon) {
   width: 18px;
   height: 18px;
@@ -220,10 +278,99 @@ input[type="search"]::-webkit-search-results-decoration {
   content: '';
   position: absolute;
   z-index: -1;
-  top: -5px;
-  left: -5px;
-  width: 28px;
-  height: 28px;
+  top: 0;
+  left: 0;
+  width: 18px;
+  height: 18px;
   background-color: #0070F2;
   border-radius: 50%;
 }
+
+.udex-search__prefix {
+  position: relative;
+  z-index: 1;
+}
+
+.udex-search__prefix--show-popover::after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  height: 50%;
+  width: 50px;
+  inset-inline-start: 0;
+  inset-block-end: 0;
+  background-color: var(--udexColorNeutralWhite, #fff);
+  border-left: 1px solid var(--udexColorGrey6, #5B738B);
+  border-right: 1px solid var(--udexColorGrey6, #5B738B);
+  box-shadow: var(--sapContent_Shadow1, 0px 2px 8px 0px rgba(34, 54, 73, 0.3));
+  overflow-y: hidden;
+}
+
+.udex-search__prefix-button {
+  padding-inline: var(--udexSpacer12) var(--udexSpacer8);
+  display: flex;
+  align-items: center;
+  max-width: 200px;
+  height: 100%;
+  border: 1px solid var(--udex-input-color-border);
+  border-inline-end: 0;
+  border-start-start-radius: var(--udexRadiusXXL, 24px);
+  border-end-start-radius: var(--udexRadiusXXL, 24px);
+  background-color: var(--sapShell_Navigation_Active_Background, var(--udexColorGrey1));
+  color: var(--sapContent_LabelColor, var(--udexColorGrey7));
+  font-family: var(--sapFontFamily, sans-serif);
+  font-size: var(--udexTypographyBodySFontSize, 16px);
+  font-weight: var(--udexTypographyFontWeightRegular, 400);
+  line-height: var(--udexTypographyBodyLineHeight, 1.5);
+  text-align: start;
+  white-space: nowrap;
+}
+
+.udex-search__prefix-button:hover {
+  cursor: pointer;
+  background-color: var(--udexCoreBase);
+  color: var(--udexColorBlue8)
+}
+
+.udex-search__prefix-button:focus,
+.udex-search__prefix-button:focus-visible {
+  outline: 2px solid var(--udexColorBlue10, #002A86);
+  outline-offset: -2px;
+}
+
+.udex-search__prefix-button--active {
+  background-color: var(--udexCoreBase);
+  color: var(--udexColorBlue10)
+}
+
+.udex-search__prefix-label {
+  margin-inline-end: var(--udexSpacer4, 4px);
+  max-width: calc(100% - 20px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.udex-search__prefix-icon {
+  width: 16px;
+  height: 16px;
+  color: inherit;
+  flex-shrink: 1;
+}
+
+.udex-search__prefix-popover {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border: 1px solid var(--udexCoreBorderDefault);
+  border-block-start: 0;
+  box-shadow: var(--sapContent_Shadow1, 0px 2px 8px 0px rgba(34,54,73,0.3));
+  background-color: var(--udexColorNeutralWhite, #fff);
+  clip-path: inset(0px -10px -10px -10px);
+}
+
+.udex-search__prefix-popover::part(content) {
+  padding: 0;
+}
+
+udex-dropdown {
+  --udex-dropdown-pane-max-width: 100%;
+}

package/src/themes/SearchSuggestions.css

@@ -62,7 +62,8 @@
     border-block-end: 0;
 }
 
-.udex-search-suggestions__heading {
+.udex-search-suggestions__heading,
+.udex-search-suggestions__message {
     margin-block-end: var(--udex-heading-margin-vertical);
     padding-inline: var(--udex-heading-padding-horizontal) var(--udex-heading-padding-horizontal);
     display: block;
@@ -74,6 +75,11 @@
     text-transform: uppercase;
 }
 
+.udex-search-suggestions__message {
+    margin-block: var(--udex-heading-margin-vertical);
+    text-align: center;
+}
+
 .udex-search-suggestions__list {
     margin: 0;
     padding: 0;