@sapudex/web-components 0.226.2 → 0.227.0

package/src/themes/MastheadItem.css

@@ -23,7 +23,8 @@
   --udex-masthead-item-dropdown-mobile-min-width: 360px;
   --udex-masthead-item-dropdown-select-box-min-width: 397px;
   --udex-masthead-item-dropdown-position: absolute;
-  --udex-masthead-item-dropdown-height:  calc(100vh - 60px);
+  --udex-masthead-item-dropdown-mobile-height: var(--udex-masthead-shell-mobile-menu-height, 100%);
+  --udex-masthead-item-dropdown-box-shadow-mobile: none;
   --udex-masthead-item-dropdown-zindex: 100;
   --udex-masthead-item-button-icon-size: 32px;
 
@@ -224,12 +225,18 @@
   --udex-masthead-menu-grid-template-columns: repeat(4, calc(25% - var(--udex-masthead-menu-column_gap)*3/4));
 }
 
+:host([slot="countrySelector"]) ::slotted([slot="dropdown"]),
 :host([slot="profile"]) ::slotted([slot="dropdown"]) {
   width: 100%;
   display: flex;
   flex-direction: column;
 }
 
+:host([slot="countrySelector"][_is-mobile-mode]) ::slotted([slot="dropdown"]),
+:host([slot="profile"][_is-mobile-mode]) ::slotted([slot="dropdown"]) {
+  display: initial;
+}
+
 :host([_is-mobile-mode]) .udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown,
 :host([part="menu-open-btn"]) .udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown {
   min-width: var(--udex-masthead-item-dropdown-mobile-min-width);
@@ -238,7 +245,7 @@
 :host([_is-mobile-mode]) .udex-masthead-item__dropdown,
 :host([part="menu-open-btn"]) .udex-masthead-item__dropdown {
   position: var(--udex-masthead-item-dropdown-position);
-  height: var(--udex-masthead-item-dropdown-height);
+  height: var(--udex-masthead-item-dropdown-mobile-height);
   width: var(--udex-masthead-item-dropdown-mobile-min-width);
   top: 60px;
   right: 0;
@@ -278,6 +285,7 @@
     position: initial;
   }
 
+  :host([slot="countrySelector"]) ::slotted([slot="dropdown"]),
   :host([slot="profile"]) ::slotted([slot="dropdown"]) {
     display: initial;
   }
@@ -300,9 +308,9 @@
 
   .udex-masthead-item__dropdown {
     position: var(--udex-masthead-item-dropdown-position);
-    height: var(--udex-masthead-item-dropdown-height);
+    height: var(--udex-masthead-item-dropdown-mobile-height);
     width: var(--udex-masthead-item-dropdown-mobile-min-width);
-    box-shadow: none;
+    box-shadow: var(--udex-masthead-item-dropdown-box-shadow-mobile);
     top: 60px;
   }
 

package/src/themes/MastheadShell.css

@@ -1,4 +1,5 @@
 :host {
+  --udex-masthead-shell-height: 60px;
   --udex-masthead-shell-background: var(--udexColorGrey1, #F5F6F7);
   --udex-masthead-shell-dropdown-shadow:  var(--sapContent_Shadow2, 0 10px 30px 0 #22364940);
   --udex-masthead-shell-site-label-font-size: var(--udexTypographyNavigationRegularXLFontSize, 16px);
@@ -23,6 +24,7 @@
   --udex-masthead-mobile-menu-buttons-width: 360px;
   --udex-masthead-right-menu-padding: var(--udexSpacer64);
   --udex-masthead-shell-explore-margin: var(--udexSpacer12);
+  --udex-masthead-shell-mobile-menu-height: 100%;
 }
 
 :host {
@@ -74,7 +76,7 @@
   padding: 0 var(--udexSpacer84);
   max-width: var(--udex-masthead-shell-container-xl-max-width);
   margin: 0 auto;
-  height: 60px;
+  height: var(--udex-masthead-shell-height);
 }
 
 .udex-masthead-shell__logo {

package/src/themes/Modal.css

@@ -36,6 +36,10 @@
   scrollbar-gutter: auto;
 }
 
+:host ::slotted([slot="header"][ui5-bar]) {
+  height: 32px;
+}
+
 :host ::slotted([slot="footer"]) {
   height: auto;
 }

package/src/themes/Pagination.css

@@ -16,7 +16,6 @@
   --udex-pagination-short-separator-paddings: 0 4px;
   --udex-pagination-short-separator-margin: 0 4px;
   --udex-pagination-short-item-paddings: 0 4px;
-  --udex-pagination-button-opacity: 1;
 }
 
 .udex-pagination {
@@ -126,6 +125,21 @@
   padding: var(--udex-pagination-short-item-paddings);
 }
 
-.hidden {
-  display: none;
+[udex-button][aria-disabled="true"]:focus,
+[udex-button][aria-disabled="true"]:focus-visible,
+[udex-button][_aria-disabled]:focus,
+[udex-button][_aria-disabled]:focus-visible {
+  outline: 2px solid #002A86;
+  outline-offset: -4px;
 }
+
+.hidden {
+  position: absolute;
+  width: 0px;
+  height: 0px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  border: 0;
+  padding: 0;
+}

package/dist/generated/templates/ButtonTemplate.lit.d.ts

@@ -1,4 +0,0 @@
-import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type Button from "../../Button.js";
-declare function block0(this: Button, context: UI5Element, tags: string[], suffix: string | undefined): import("lit-html").TemplateResult<1 | 2>;
-export default block0;

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

@@ -1,7 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import { html, ifDefined, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-function block0(context, tags, suffix) { return html `<button type="button" class="ui5-button-root" ?disabled="${this.disabled}" aria-disabled="${ifDefined(this._ariaDisabled)}" data-sap-focus-ref  @focusout=${this._onfocusout} @focusin=${this._onfocusin} @click=${this._onclick} @mousedown=${this._onmousedown} @mouseup=${this._onmouseup} @keydown=${this._onkeydown} @keyup=${this._onkeyup} @touchstart="${this._ontouchstart}" @touchend="${this._ontouchend}" tabindex=${ifDefined(this.tabIndexValue)} aria-expanded="${ifDefined(this.accessibilityAttributes.expanded)}" aria-controls="${ifDefined(this.accessibilityAttributes.controls)}" aria-haspopup="${ifDefined(this._hasPopup)}" aria-label="${ifDefined(this.ariaLabelText)}" aria-describedby="${ifDefined(this.ariaDescribedbyText)}" title="${ifDefined(this.buttonTitle)}" part="button" role="${ifDefined(this.buttonAccessibleRole)}"><div class="udex-button-content">${this.icon ? block1.call(this, context, tags, suffix) : undefined}<span id="${ifDefined(this._id)}-content" class="ui5-button-text"><bdi><slot></slot></bdi></span>${this.hasButtonType ? block2.call(this, context, tags, suffix) : undefined}</div></button>`; }
-function block1(context, tags, suffix) { return suffix ? html `<${scopeTag("ui5-icon", tags, suffix)} class="ui5-button-icon" name="${ifDefined(this.icon)}" accessible-role="${ifDefined(this.iconRole)}" part="icon" ?show-tooltip=${this.showIconTooltip}></${scopeTag("ui5-icon", tags, suffix)}>` : html `<ui5-icon class="ui5-button-icon" name="${ifDefined(this.icon)}" accessible-role="${ifDefined(this.iconRole)}" part="icon" ?show-tooltip=${this.showIconTooltip}></ui5-icon>`; }
-function block2(context, tags, suffix) { return html `<span id="ui5-button-hiddenText-type" aria-hidden="true" class="ui5-hidden-text">${ifDefined(this.buttonTypeText)}</span>`; }
-export default block0;
-//# sourceMappingURL=ButtonTemplate.lit.js.map

package/dist/generated/templates/ButtonTemplate.lit.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonTemplate.lit.js","sourceRoot":"","sources":["../../../src/generated/templates/ButtonTemplate.lit.ts"],"names":[],"mappings":"AAAA,8BAA8B;AAC9B,OAAO,EAAE,IAAI,EAAmC,SAAS,EAAc,QAAQ,EAAE,MAAM,sDAAsD,CAAC;AAK9I,SAAS,MAAM,CAAgB,OAAmB,EAAE,IAAc,EAAE,MAA0B,IAAI,OAAO,IAAI,CAAA,4DAA4D,IAAI,CAAC,QAAQ,oBAAoB,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,mCAAmC,IAAI,CAAC,WAAW,aAAa,IAAI,CAAC,UAAU,WAAW,IAAI,CAAC,QAAQ,eAAe,IAAI,CAAC,YAAY,aAAa,IAAI,CAAC,UAAU,aAAa,IAAI,CAAC,UAAU,WAAW,IAAI,CAAC,QAAQ,iBAAiB,IAAI,CAAC,aAAa,gBAAgB,IAAI,CAAC,WAAW,cAAc,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,mBAAmB,SAAS,CAAC,IAAI,CAAC,uBAAuB,CAAC,QAAQ,CAAC,oBAAoB,SAAS,CAAC,IAAI,CAAC,uBAAuB,CAAC,QAAQ,CAAC,oBAAoB,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,iBAAiB,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,SAAS,CAAC,IAAI,CAAC,mBAAmB,CAAC,YAAY,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,yBAAyB,SAAS,CAAC,IAAI,CAAC,oBAAoB,CAAC,sCAAuC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,SAAU,aAAa,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,oEAAqE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,SAAU,iBAAiB,CAAC,CAAA,CAAC;AACttC,SAAS,MAAM,CAAgB,OAAmB,EAAE,IAAc,EAAE,MAA0B,IAAI,OAAO,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,IAAI,QAAQ,CAAC,UAAU,EAAE,IAAI,EAAE,MAAM,CAAC,kCAAkC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,sBAAsB,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,+BAA+B,IAAI,CAAC,eAAe,MAAM,QAAQ,CAAC,UAAU,EAAE,IAAI,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAA,2CAA2C,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,sBAAsB,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,+BAA+B,IAAI,CAAC,eAAe,cAAc,CAAC,CAAA,CAAC;AACrhB,SAAS,MAAM,CAAgB,OAAmB,EAAE,IAAc,EAAE,MAA0B,IAAI,OAAO,IAAI,CAAA,oFAAoF,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,CAAA,CAAC;AAG1O,eAAe,MAAM,CAAC","sourcesContent":["/* eslint no-unused-vars: 0 */\nimport { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport type UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\timport type Button from \"../../Button.js\";\n\timport type { ClassMapValue } from \"@ui5/webcomponents-base/dist/types.js\";\n\t\nfunction block0 (this: Button, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button type=\"button\" class=\"ui5-button-root\" ?disabled=\"${this.disabled}\" aria-disabled=\"${ifDefined(this._ariaDisabled)}\" data-sap-focus-ref  @focusout=${this._onfocusout} @focusin=${this._onfocusin} @click=${this._onclick} @mousedown=${this._onmousedown} @mouseup=${this._onmouseup} @keydown=${this._onkeydown} @keyup=${this._onkeyup} @touchstart=\"${this._ontouchstart}\" @touchend=\"${this._ontouchend}\" tabindex=${ifDefined(this.tabIndexValue)} aria-expanded=\"${ifDefined(this.accessibilityAttributes.expanded)}\" aria-controls=\"${ifDefined(this.accessibilityAttributes.controls)}\" aria-haspopup=\"${ifDefined(this._hasPopup)}\" aria-label=\"${ifDefined(this.ariaLabelText)}\" aria-describedby=\"${ifDefined(this.ariaDescribedbyText)}\" title=\"${ifDefined(this.buttonTitle)}\" part=\"button\" role=\"${ifDefined(this.buttonAccessibleRole)}\"><div class=\"udex-button-content\">${ this.icon ? block1.call(this, context, tags, suffix) : undefined }<span id=\"${ifDefined(this._id)}-content\" class=\"ui5-button-text\"><bdi><slot></slot></bdi></span>${ this.hasButtonType ? block2.call(this, context, tags, suffix) : undefined }</div></button>`;}\nfunction block1 (this: Button, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag(\"ui5-icon\", tags, suffix)} class=\"ui5-button-icon\" name=\"${ifDefined(this.icon)}\" accessible-role=\"${ifDefined(this.iconRole)}\" part=\"icon\" ?show-tooltip=${this.showIconTooltip}></${scopeTag(\"ui5-icon\", tags, suffix)}>` : html`<ui5-icon class=\"ui5-button-icon\" name=\"${ifDefined(this.icon)}\" accessible-role=\"${ifDefined(this.iconRole)}\" part=\"icon\" ?show-tooltip=${this.showIconTooltip}></ui5-icon>`;}\nfunction block2 (this: Button, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id=\"ui5-button-hiddenText-type\" aria-hidden=\"true\" class=\"ui5-hidden-text\">${ifDefined(this.buttonTypeText)}</span>`;}\n\n\nexport default block0;"]}

package/src/Button.hbs

@@ -1,50 +0,0 @@
-<button
-	type="button"
-	class="ui5-button-root"
-	?disabled="{{disabled}}"
-	aria-disabled="{{_ariaDisabled}}"
-	data-sap-focus-ref
-	{{> ariaPressed}}
-	@focusout={{_onfocusout}}
-	@focusin={{_onfocusin}}
-	@click={{_onclick}}
-	@mousedown={{_onmousedown}}
-	@mouseup={{_onmouseup}}
-	@keydown={{_onkeydown}}
-	@keyup={{_onkeyup}}
-	@touchstart="{{_ontouchstart}}"
-	@touchend="{{_ontouchend}}"
-	tabindex={{tabIndexValue}}
-	aria-expanded="{{accessibilityAttributes.expanded}}"
-	aria-controls="{{accessibilityAttributes.controls}}"
-	aria-haspopup="{{_hasPopup}}"
-	aria-label="{{ariaLabelText}}"
-	aria-describedby="{{ariaDescribedbyText}}"
-	title="{{buttonTitle}}"
-	part="button"
-	role="{{buttonAccessibleRole}}"
->
-<div class="udex-button-content">
-	{{#if icon}}
-		<ui5-icon
-			class="ui5-button-icon"
-			name="{{icon}}"
-			accessible-role="{{iconRole}}"
-			part="icon"
-			?show-tooltip={{showIconTooltip}}
-		></ui5-icon>
-	{{/if}}
-
-	<span id="{{_id}}-content" class="ui5-button-text">
-		<bdi>
-			<slot></slot>
-		</bdi>
-	</span>
-
-	{{#if hasButtonType}}
-		<span id="ui5-button-hiddenText-type" aria-hidden="true" class="ui5-hidden-text">{{buttonTypeText}}</span>
-	{{/if}}
-</div>
-</button>
-
-{{#*inline "ariaPressed"}}{{/inline}}

package/src/generated/templates/ButtonTemplate.lit.ts

@@ -1,12 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-	import type Button from "../../Button.js";
-	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
-	
-function block0 (this: Button, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button type="button" class="ui5-button-root" ?disabled="${this.disabled}" aria-disabled="${ifDefined(this._ariaDisabled)}" data-sap-focus-ref  @focusout=${this._onfocusout} @focusin=${this._onfocusin} @click=${this._onclick} @mousedown=${this._onmousedown} @mouseup=${this._onmouseup} @keydown=${this._onkeydown} @keyup=${this._onkeyup} @touchstart="${this._ontouchstart}" @touchend="${this._ontouchend}" tabindex=${ifDefined(this.tabIndexValue)} aria-expanded="${ifDefined(this.accessibilityAttributes.expanded)}" aria-controls="${ifDefined(this.accessibilityAttributes.controls)}" aria-haspopup="${ifDefined(this._hasPopup)}" aria-label="${ifDefined(this.ariaLabelText)}" aria-describedby="${ifDefined(this.ariaDescribedbyText)}" title="${ifDefined(this.buttonTitle)}" part="button" role="${ifDefined(this.buttonAccessibleRole)}"><div class="udex-button-content">${ this.icon ? block1.call(this, context, tags, suffix) : undefined }<span id="${ifDefined(this._id)}-content" class="ui5-button-text"><bdi><slot></slot></bdi></span>${ this.hasButtonType ? block2.call(this, context, tags, suffix) : undefined }</div></button>`;}
-function block1 (this: Button, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="ui5-button-icon" name="${ifDefined(this.icon)}" accessible-role="${ifDefined(this.iconRole)}" part="icon" ?show-tooltip=${this.showIconTooltip}></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="ui5-button-icon" name="${ifDefined(this.icon)}" accessible-role="${ifDefined(this.iconRole)}" part="icon" ?show-tooltip=${this.showIconTooltip}></ui5-icon>`;}
-function block2 (this: Button, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="ui5-button-hiddenText-type" aria-hidden="true" class="ui5-hidden-text">${ifDefined(this.buttonTypeText)}</span>`;}
-
-
-export default block0;