New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@ui5/webcomponents-fiori
Advanced tools
@ui5/webcomponents-fiori - npm Package Compare versions
Comparing version 0.0.0-63ca72189 to 0.0.0-aadaf0b2a
@@ -6,2 +6,3 @@ import { registerThemeProperties } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js"; | ||
| import belizeHcb from "../assets/themes/sap_belize_hcb/parameters-bundle.css.json"; | ||
| import belizeHcw from "../assets/themes/sap_belize_hcw/parameters-bundle.css.json"; | ||
@@ -19,1 +20,2 @@ const isInlined = obj => typeof (obj) === "object"; | ||
| registerThemeProperties("@ui5/webcomponents-fiori", "sap_belize_hcb", belizeHcb); | ||
| registerThemeProperties("@ui5/webcomponents-fiori", "sap_belize_hcw", belizeHcw); |
@@ -6,7 +6,7 @@ | ||
| const block0 = (context) => { return html`${ context.targetSrc ? block1(context) : block5(context) }`; }; | ||
| const block1 = (context) => { return html`<a class="ui5-product-switch-item-root" data-sap-focus-ref @focusout="${ifDefined(context._onfocusout)}" @focusin="${ifDefined(context._onfocusin)}" @mousedown="${ifDefined(context._onmousedown)}" @keydown="${ifDefined(context._onkeydown)}" @keyup="${ifDefined(context._onkeyup)}" tabindex=${ifDefined(context._tabIndex)} href="${ifDefined(context.targetSrc)}" target="${ifDefined(context.target)}"> ${ context.icon ? block2(context) : undefined }<span class="ui5-product-switch-item-text-content"> ${ context.heading ? block3(context) : undefined }${ context.subtitle ? block4(context) : undefined }</span></a>`; }; | ||
| const block1 = (context) => { return html`<a class="ui5-product-switch-item-root" data-sap-focus-ref @focusout="${context._onfocusout}" @focusin="${context._onfocusin}" @mousedown="${context._onmousedown}" @keydown="${context._onkeydown}" @keyup="${context._onkeyup}" tabindex=${ifDefined(context._tabIndex)} href="${ifDefined(context.targetSrc)}" target="${ifDefined(context.target)}"> ${ context.icon ? block2(context) : undefined }<span class="ui5-product-switch-item-text-content"> ${ context.heading ? block3(context) : undefined }${ context.subtitle ? block4(context) : undefined }</span></a>`; }; | ||
| const block2 = (context) => { return html`<ui5-icon class="ui5-product-switch-item-icon" name="${ifDefined(context.icon)}" ></ui5-icon> `; }; | ||
| const block3 = (context) => { return html`<span class="ui5-product-switch-item-heading">${ifDefined(context.heading)}</span> `; }; | ||
| const block4 = (context) => { return html`<span class="ui5-product-switch-item-subtitle">${ifDefined(context.subtitle)}</span> `; }; | ||
| const block5 = (context) => { return html`<div class="ui5-product-switch-item-root" data-sap-focus-ref @focusout="${ifDefined(context._onfocusout)}" @focusin="${ifDefined(context._onfocusin)}" @mousedown="${ifDefined(context._onmousedown)}" @keydown="${ifDefined(context._onkeydown)}" @keyup="${ifDefined(context._onkeyup)}" tabindex=${ifDefined(context._tabIndex)}> ${ context.icon ? block6(context) : undefined }<span class="ui5-product-switch-item-text-content"> ${ context.heading ? block7(context) : undefined }${ context.subtitle ? block8(context) : undefined }</span></div>`; }; | ||
| const block5 = (context) => { return html`<div class="ui5-product-switch-item-root" data-sap-focus-ref @focusout="${context._onfocusout}" @focusin="${context._onfocusin}" @mousedown="${context._onmousedown}" @keydown="${context._onkeydown}" @keyup="${context._onkeyup}" tabindex=${ifDefined(context._tabIndex)}> ${ context.icon ? block6(context) : undefined }<span class="ui5-product-switch-item-text-content"> ${ context.heading ? block7(context) : undefined }${ context.subtitle ? block8(context) : undefined }</span></div>`; }; | ||
| const block6 = (context) => { return html`<ui5-icon class="ui5-product-switch-item-icon" name="${ifDefined(context.icon)}" ></ui5-icon> `; }; | ||
@@ -13,0 +13,0 @@ const block7 = (context) => { return html`<span class="ui5-product-switch-item-heading">${ifDefined(context.heading)}</span> `; }; |
@@ -5,4 +5,4 @@ | ||
| import { html, svg, repeat, classMap, styleMap } from '@ui5/webcomponents-base/dist/renderer/LitRenderer.js'; | ||
| const block0 = (context) => { return html`<div class="ui5-product-switch-root" @focusin=${ifDefined(context._onfocusin)}><slot></slot></div>`; }; | ||
| const block0 = (context) => { return html`<div class="ui5-product-switch-root" @focusin=${context._onfocusin}><slot></slot></div>`; }; | ||
| export default block0; |
@@ -5,9 +5,9 @@ | ||
| import { html, svg, repeat, classMap, styleMap } from '@ui5/webcomponents-base/dist/renderer/LitRenderer.js'; | ||
| const block0 = (context) => { return html`<div class="${ifDefined(classMap(context.classes.wrapper))}" dir="${ifDefined(context.rtl)}" @keydown=${ifDefined(context._onkeydown)}><div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-left"> ${ context.startButton.length ? block1(context) : undefined }${ !context.interactiveLogo ? block2(context) : undefined }${ context.showArrowDown ? block3(context) : undefined }<h2 class="ui5-shellbar-secondary-title">${ifDefined(context.secondaryTitle)}</h2></div><div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-middle"> ${ context.showCoPilot ? block6(context) : block9(context) }</div><div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-right"><div class="ui5-shellbar-overflow-container-right-child"> ${ repeat(context._itemsInfo, undefined, (item, index) => block10(item, index, context)) }</div></div><div class="ui5-shellbar-block-layer"></div><div id="${ifDefined(context._id)}-searchfield-wrapper" class="ui5-shellbar-search-field" style="${ifDefined(styleMap(context.styles.searchField))}" @focusout=${ifDefined(context._searchField.focusout)} > ${ context.searchField.length ? block13(context) : undefined }</div></div>`; }; | ||
| const block0 = (context) => { return html`<div class="${classMap(context.classes.wrapper)}" dir="${ifDefined(context.rtl)}" @keydown=${context._onkeydown}><div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-left"> ${ context.startButton.length ? block1(context) : undefined }${ !context.interactiveLogo ? block2(context) : undefined }${ context.showArrowDown ? block3(context) : undefined }<h2 class="ui5-shellbar-secondary-title">${ifDefined(context.secondaryTitle)}</h2></div><div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-middle"> ${ context.showCoPilot ? block6(context) : block9(context) }</div><div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-right"><div class="ui5-shellbar-overflow-container-right-child"> ${ repeat(context._itemsInfo, undefined, (item, index) => block10(item, index, context)) }</div></div><div id="${ifDefined(context._id)}-searchfield-wrapper" class="ui5-shellbar-search-field" style="${styleMap(context.styles.searchField)}" > ${ context.searchField.length ? block13(context) : undefined }</div></div>`; }; | ||
| const block1 = (context) => { return html`<slot name="startButton"></slot> `; }; | ||
| const block2 = (context) => { return html`<img class="ui5-shellbar-logo" src="${ifDefined(context.logo)}" @click="${ifDefined(context._logoPress)}" /> `; }; | ||
| const block3 = (context) => { return html`<button tabindex="0" class="${ifDefined(classMap(context.classes.button))}" @click="${ifDefined(context._header.press)}"> ${ context.interactiveLogo ? block4(context) : undefined }${ context.primaryTitle ? block5(context) : undefined }<span class="ui5-shellbar-menu-button-arrow"></span></button> `; }; | ||
| const block4 = (context) => { return html`<img class="ui5-shellbar-logo" src="${ifDefined(context.logo)}" /> `; }; | ||
| const block5 = (context) => { return html`<h1 class="ui5-shellbar-menu-button-title"><bdi class="${ifDefined(classMap(context.classes.title))}">${ifDefined(context.primaryTitle)}</bdi></h1> `; }; | ||
| const block6 = (context) => { return html`<svg @click="${ifDefined(context._coPilotPress)}" width="44" height="44" viewBox="-150 -150 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="ui5-shellbar-coPilot">${blockSVG1(context)}</svg>`; }; | ||
| const block2 = (context) => { return html`<img class="ui5-shellbar-logo" src="${ifDefined(context.logo)}" @click="${context._logoPress}" /> `; }; | ||
| const block3 = (context) => { return html`<button tabindex="0" class="${classMap(context.classes.button)}" @click="${context._header.press}"> ${ context.interactiveLogo ? block4(context) : undefined }${ context.primaryTitle ? block5(context) : undefined }<span class="ui5-shellbar-menu-button-arrow"></span></button> `; }; | ||
| const block4 = (context) => { return html`<img class="ui5-shellbar-logo" src="${ifDefined(context.logo)}" @click="${context._logoPress}" /> `; }; | ||
| const block5 = (context) => { return html`<h1 class="ui5-shellbar-menu-button-title"><bdi class="${classMap(context.classes.title)}">${ifDefined(context.primaryTitle)}</bdi></h1> `; }; | ||
| const block6 = (context) => { return html`<svg @click="${context._coPilotPress}" width="44" height="44" viewBox="-150 -150 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="ui5-shellbar-coPilot">${blockSVG1(context)}</svg>`; }; | ||
| const block7 = (context) => { return svg`<animateTransform attributeName="transform" type="rotate" from="54" to="416" dur="15s" repeatCount="indefinite"/>`; }; | ||
@@ -17,4 +17,4 @@ const block8 = (context) => { return svg`<animateTransform attributeName="transform" type="rotate" from="90" to="450" dur="30s" repeatCount="indefinite"/>`; }; | ||
| const block10 = (item, index, context) => { return html`${ item.icon ? block11(item, index, context) : block12(item, index, context) }`; }; | ||
| const block11 = (item, index, context) => { return html`<ui5-icon tabindex="${ifDefined(item._tabIndex)}" data-ui5-notification-count="${ifDefined(context.notificationCount)}" data-ui5-external-action-item-id="${ifDefined(item.refItemid)}" class="${ifDefined(item.classes)}" name="${ifDefined(item.icon)}" id="${ifDefined(item.id)}" style="${ifDefined(item.style)}" @click=${ifDefined(item.press)}></ui5-icon> `; }; | ||
| const block12 = (item, index, context) => { return html`<div tabindex="${ifDefined(item._tabIndex)}" id="${ifDefined(item.id)}" style="${ifDefined(item.style)}" class="${ifDefined(item.classes)}" @click="${ifDefined(item.press)}" ><span style="${ifDefined(item.subStyles)}" class="${ifDefined(item.subclasses)}"></span></div> `; }; | ||
| const block11 = (item, index, context) => { return html`<ui5-icon tabindex="${ifDefined(item._tabIndex)}" data-count="${ifDefined(item.count)}" data-ui5-notification-count="${ifDefined(context.notificationCount)}" data-ui5-external-action-item-id="${ifDefined(item.refItemid)}" class="${ifDefined(item.classes)}" name="${ifDefined(item.icon)}" id="${ifDefined(item.id)}" style="${ifDefined(item.style)}" @click=${item.press}></ui5-icon> `; }; | ||
| const block12 = (item, index, context) => { return html`<slot name="profile" id="${ifDefined(item.id)}" style="${ifDefined(item.style)}" class="${ifDefined(item.classes)}" tabindex="${ifDefined(item._tabIndex)}" @click=${item.press} ></slot> `; }; | ||
| const block13 = (context) => { return html`<slot name="searchField"></slot> `; }; | ||
@@ -21,0 +21,0 @@ |
@@ -9,2 +9,2 @@ import "@ui5/webcomponents-theme-base/dist/DefaultTheme.js"; | ||
| export default ":host(:not([hidden])){display:inline-block;width:100%}.ui5-shellbar-root{position:relative;display:flex;justify-content:space-between;align-items:center;background:var(--sapShellColor);height:2.75rem;font-family:var(--sapFontFamily);font-size:var(--sapFontMediumSize);font-weight:400;box-sizing:border-box}.ui5-shellbar-button,.ui5-shellbar-image-button,.ui5-shellbar-menu-button,::slotted(ui5-button[slot=startButton]){height:2.25rem;padding:0;margin-left:.5rem;border:none;outline:none;background:transparent;color:var(--sapShell_TextColor);box-sizing:border-box;cursor:pointer;border-radius:.25rem;position:relative;font-size:.75rem;font-weight:700}.ui5-shellbar-button:hover,.ui5-shellbar-image-button:hover,.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover,::slotted(ui5-button[slot=startButton]:hover){background:var(--sapShell_Hover_Background)}.ui5-shellbar-button:active,.ui5-shellbar-image-button:active,.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active,::slotted(ui5-button[slot=startButton][active]){background:var(--sapShell_Active_Background);color:var(--sapShell_Active_TextColor)}.ui5-shellbar-button:focus:after,.ui5-shellbar-image-button:focus:after,.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:focus:after,::slotted(ui5-button[slot=startButton][focused]):after{content:\"\";position:absolute;width:calc(100% - .375rem);height:calc(100% - .375rem);border:1px dotted var(--sapContent_ContrastFocusColor);pointer-events:none;left:2px;top:2px;z-index:1}.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive::-moz-focus-inner{border:none}.ui5-shellbar-menu-button-title{display:inline-block;font-family:var(--sapFontFamily);margin:0;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:auto}:host(:not([primary-title])) .ui5-shellbar-menu-button{min-width:2.25rem;justify-content:center}:host(:not([primary-title])) .ui5-shellbar-menu-button span{margin-left:0}:host([breakpoint-size=S]) .ui5-shellbar-menu-button span{margin-left:.5rem}.ui5-shellbar-secondary-title{display:inline-block;margin:0 .5rem;font-size:var(--sapFontSmallSize);color:var(--sapShell_TextColor);line-height:1rem;font-weight:400;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ui5-shellbar-menu-button--interactive .ui5-shellbar-menu-button-arrow{display:inline-block;margin-left:.5rem;width:10px;height:10px;width:0;height:0;color:var(--sapShell_InteractiveTextColor);border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--sapShell_TextColor)}.ui5-shellbar-overflow-container{display:flex;justify-content:center;align-items:center;height:100%;overflow:hidden}.ui5-shellbar-overflow-container-middle{align-self:center;height:2.5rem;width:3rem;flex-shrink:0}@keyframes Behind_layer{0%{transform:rotate(1turn)}}@keyframes Top_layer{0%{transform:rotate(-1turn)}}:host([breakpoint-size=S]) .ui5-shellbar-root{padding:.25rem 1rem}:host([breakpoint-size=S]) ::slotted(ui5-button[slot=startButton]){margin-right:0}:host([breakpoint-size=S]) .ui5-shellbar-search-field{width:200px}:host([breakpoint-size=M]) .ui5-shellbar-root{padding:.25rem 2rem}:host([breakpoint-size=L]) .ui5-shellbar-root{padding:.25rem 2rem}:host([breakpoint-size=XL]) .ui5-shellbar-root{padding:.25rem 3rem}:host([breakpoint-size=XXL]) .ui5-shellbar-root{padding:.25rem 3rem}.ui5-shellbar-logo{cursor:pointer;height:1.675rem}.ui5-shellbar-logo:not([src]){display:none}.ui5-shellbar-button{min-width:2.25rem;font-size:1rem;padding:.625rem}.ui5-shellbar-image-buttonImage{border-radius:50%;width:1.75rem;height:1.75rem;display:flex;background-size:cover}.ui5-shellbar-image-button{display:flex;justify-content:center;align-items:center;min-width:2.25rem;height:2.25rem;display:inline-flex;padding:0}.ui5-shellbar-overflow-container-left{flex-basis:50%;max-width:calc(50% - 1.5rem);justify-content:flex-start;margin-right:.5rem}.ui5-shellbar-menu-button{white-space:nowrap;overflow:hidden;display:flex;align-items:center;padding:.25rem .5rem;cursor:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}:host(:not([logo])) .ui5-shellbar-menu-button{margin-left:0}.ui5-shellbar-overflow-container-right{display:block;overflow:hidden;box-sizing:border-box;white-space:nowrap;margin-left:8rem;flex:1}.ui5-shellbar-overflow-container-right .ui5-shellbar-overflow-container-right-child{display:flex;float:right}.ui5-shellbar-overflow-button{display:none}:host([breakpoint-size=M]) .ui5-shellbar-secondary-title{display:none}:host([breakpoint-size=S]) .ui5-shellbar-secondary-title{display:none}:host([breakpoint-size=S]) .ui5-shellbar-menu-button-title{display:none}:host([breakpoint-size=S]) .ui5-shellbar-overflow-container-right{margin-left:0}.ui5-shellbar-overflow-button-shown{display:inline-block}.ui5-shellbar-hidden-button,.ui5-shellbar-invisible-button{visibility:hidden}.ui5-shellbar-coPilot{background-color:transparent;cursor:pointer}:host(:not([show-block-layer])) .ui5-shellbar-search-field{display:none}:host([breakpoint-size=L]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-right{margin-left:1rem}:host([breakpoint-size=XL]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-right{margin-left:1rem}:host(:not([notification-count])) .ui5-shellbar-bell-button{position:relative}:host([notification-count]) .ui5-shellbar-bell-button:before{content:attr(data-ui5-notification-count);position:absolute;width:auto;height:1rem;min-width:1rem;background:var(--sapContent_BadgeBackground);color:var(--sapShell_TextColor);top:.125rem;left:1.5rem;padding:.25rem;border-radius:1rem;display:flex;justify-content:center;align-items:center;font-size:var(--sapFontSmallSize);font-family:var(--sapFontFamily);z-index:2;box-sizing:border-box}.ui5-shellbar-menu-button{margin-left:.5rem}.ui5-shellbar-block-layer{top:0;left:0;right:0;bottom:0;position:fixed;outline:0 none;z-index:100}:host(:not([show-block-layer])) .ui5-shellbar-block-layer{display:none}.ui5-shellbar-search-field{z-index:101;position:absolute;width:240px;top:.25rem;height:2.25rem}::slotted(ui5-input){background-color:var(--sapShellColor);border:1px solid var(--sapShell_BorderColor_Lighten30);color:var(--sapShell_TextColor);height:100%}::slotted(ui5-input:hover){background:var(--sapShell_Hover_Background);border:1px solid var(--sapShell_BorderColor_Lighten30)}::slotted(ui5-input[focused]){outline:1px dotted var(--sapContent_ContrastFocusColor)}:host([show-block-layer]) .ui5-shellbar-search-button{background:var(--sapHighlightColor);color:var(--sapShell_Active_TextColor);border-top-left-radius:0;border-bottom-left-radius:0}.ui5-shellbar-co-pilot-placeholder{width:2.75rem;height:2.75rem}.ui5-shellbar-co-pilot-circle{fill:var(--sapShellColor)}:host [dir=rtl] ::slotted(ui5-button[slot=startButton]){margin-left:.5rem;margin-right:0}:host [dir=rtl] .ui5-shellbar-menu-button{margin-right:.5rem;margin-left:0}[dir=rtl] .ui5-shellbar-menu-button--interactive .ui5-shellbar-menu-button-arrow{margin-right:.5rem;margin-left:0}[dir=rtl] .ui5-shellbar-overflow-container-right{margin-right:8rem;margin-left:0}[dir=rtl] .ui5-shellbar-overflow-container-right .ui5-shellbar-overflow-container-right-child{float:left}:host([breakpoint-size=S]) [dir=rtl] .ui5-shellbar-overflow-container-right{margin-right:0}::slotted(ui5-button[slot=startButton]){margin-right:.5rem;margin-left:0;justify-content:center;align-items:center}"; | ||
| export default ":host(:not([hidden])){display:inline-block;width:100%}.ui5-shellbar-root{position:relative;display:flex;justify-content:space-between;align-items:center;background:var(--sapShellColor);height:2.75rem;font-family:var(--sapFontFamily);font-size:var(--sapFontMediumSize);font-weight:400;box-sizing:border-box}.ui5-shellbar-button,.ui5-shellbar-image-button,.ui5-shellbar-menu-button,::slotted(ui5-button[slot=startButton]){height:2.25rem;padding:0;margin-left:.5rem;border:none;outline:none;background:transparent;color:var(--sapShell_TextColor);box-sizing:border-box;cursor:pointer;border-radius:.25rem;position:relative;font-size:.75rem;font-weight:700}.ui5-shellbar-button:hover,.ui5-shellbar-image-button:hover,.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover,::slotted(ui5-button[slot=startButton]:hover){background:var(--sapShell_Hover_Background)}.ui5-shellbar-button:active,.ui5-shellbar-image-button:active,.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active,::slotted(ui5-button[slot=startButton][active]){background:var(--sapShell_Active_Background);color:var(--sapShell_Active_TextColor)}.ui5-shellbar-button:focus:after,.ui5-shellbar-image-button:focus:after,.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:focus:after,::slotted(ui5-button[slot=startButton][focused]):after{content:\"\";position:absolute;width:calc(100% - .375rem);height:calc(100% - .375rem);border:1px dotted var(--sapContent_ContrastFocusColor);pointer-events:none;left:2px;top:2px;z-index:1}slot[name=profile]{min-width:0}::slotted(ui5-avatar){min-width:0;width:2.25rem;height:2.25rem;padding:.25rem;background-color:transparent}.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive::-moz-focus-inner{border:none}.ui5-shellbar-menu-button-title{display:inline-block;font-family:var(--sapFontFamily);margin:0;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:auto}:host(:not([primary-title])) .ui5-shellbar-menu-button{min-width:2.25rem;justify-content:center}:host(:not([primary-title])) .ui5-shellbar-menu-button span{margin-left:0}:host([breakpoint-size=S]) .ui5-shellbar-menu-button span{margin-left:.5rem}.ui5-shellbar-secondary-title{display:inline-block;margin:0 .5rem;font-size:var(--sapFontSmallSize);color:var(--sapShell_TextColor);line-height:1rem;font-weight:400;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ui5-shellbar-menu-button--interactive .ui5-shellbar-menu-button-arrow{display:inline-block;margin-left:.5rem;width:10px;height:10px;width:0;height:0;color:var(--sapShell_InteractiveTextColor);border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--sapShell_TextColor)}.ui5-shellbar-overflow-container{display:flex;justify-content:center;align-items:center;height:100%;overflow:hidden}.ui5-shellbar-overflow-container-middle{align-self:center;height:2.5rem;width:3rem;flex-shrink:0}@keyframes Behind_layer{0%{transform:rotate(1turn)}}@keyframes Top_layer{0%{transform:rotate(-1turn)}}:host([breakpoint-size=S]) .ui5-shellbar-root{padding:.25rem 1rem}:host([breakpoint-size=S]) ::slotted(ui5-button[slot=startButton]){margin-right:0}:host([breakpoint-size=S]) .ui5-shellbar-search-field{width:200px}:host([breakpoint-size=M]) .ui5-shellbar-root{padding:.25rem 2rem}:host([breakpoint-size=L]) .ui5-shellbar-root{padding:.25rem 2rem}:host([breakpoint-size=XL]) .ui5-shellbar-root{padding:.25rem 3rem}:host([breakpoint-size=XXL]) .ui5-shellbar-root{padding:.25rem 3rem}.ui5-shellbar-logo{cursor:pointer;height:1.675rem}.ui5-shellbar-logo:not([src]){display:none}.ui5-shellbar-button{min-width:2.25rem;font-size:1rem;padding:.625rem}.ui5-shellbar-image-buttonImage{border-radius:50%;width:1.75rem;height:1.75rem;display:flex;background-size:cover}.ui5-shellbar-image-button{display:flex;justify-content:center;align-items:center;min-width:2.25rem;height:2.25rem;display:inline-flex;padding:0}.ui5-shellbar-overflow-container-left{flex-basis:50%;max-width:calc(50% - 1.5rem);justify-content:flex-start;margin-right:.5rem}.ui5-shellbar-menu-button{white-space:nowrap;overflow:hidden;display:flex;align-items:center;padding:.25rem .5rem;cursor:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}:host(:not([logo])) .ui5-shellbar-menu-button{margin-left:0}.ui5-shellbar-overflow-container-right{display:block;overflow:hidden;box-sizing:border-box;white-space:nowrap;margin-left:8rem;flex:1}.ui5-shellbar-overflow-container-right .ui5-shellbar-overflow-container-right-child{display:flex;float:right}.ui5-shellbar-overflow-button{display:none}:host([breakpoint-size=M]) .ui5-shellbar-secondary-title{display:none}:host([breakpoint-size=S]) .ui5-shellbar-secondary-title{display:none}:host([breakpoint-size=S]) .ui5-shellbar-menu-button-title{display:none}:host([breakpoint-size=S]) .ui5-shellbar-overflow-container-right{margin-left:0}.ui5-shellbar-overflow-button-shown{display:inline-block}.ui5-shellbar-hidden-button,.ui5-shellbar-invisible-button{visibility:hidden}.ui5-shellbar-coPilot{background-color:transparent;cursor:pointer}:host(:not([show-search-field])) .ui5-shellbar-search-field{display:none}:host([breakpoint-size=L]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-right{margin-left:1rem}:host([breakpoint-size=XL]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-right{margin-left:1rem}:host(:not([notification-count])) .ui5-shellbar-bell-button{position:relative}:host([notification-count]) .ui5-shellbar-bell-button:before,ui5-icon[data-count]:before{position:absolute;width:auto;height:1rem;min-width:1rem;background:var(--sapContent_BadgeBackground);color:var(--sapShell_TextColor);top:.125rem;left:1.5rem;padding:.25rem;border-radius:1rem;display:flex;justify-content:center;align-items:center;font-size:var(--sapFontSmallSize);font-family:var(--sapFontFamily);z-index:2;box-sizing:border-box}:host([notification-count]) .ui5-shellbar-bell-button:before{content:attr(data-ui5-notification-count)}ui5-icon[data-count]:before{content:attr(data-count)}.ui5-shellbar-menu-button{margin-left:.5rem}.ui5-shellbar-search-field{z-index:101;position:absolute;width:240px;top:.25rem;height:2.25rem}::slotted(ui5-input){background-color:var(--sapShellColor);border:1px solid var(--sapShell_InteractiveBorderColor);color:var(--sapShell_TextColor);height:100%}::slotted(ui5-input:hover){background:var(--sapShell_Hover_Background)}::slotted(ui5-input[focused]){outline:1px dotted var(--sapContent_ContrastFocusColor)}.ui5-shellbar-co-pilot-placeholder{width:2.75rem;height:2.75rem}.ui5-shellbar-co-pilot-circle{fill:var(--sapShellColor)}:host [dir=rtl] ::slotted(ui5-button[slot=startButton]){margin-left:.5rem;margin-right:0}:host [dir=rtl] .ui5-shellbar-menu-button{margin-right:.5rem;margin-left:0}[dir=rtl] .ui5-shellbar-menu-button--interactive .ui5-shellbar-menu-button-arrow{margin-right:.5rem;margin-left:0}[dir=rtl] .ui5-shellbar-overflow-container-right{margin-right:8rem;margin-left:0}[dir=rtl] .ui5-shellbar-overflow-container-right .ui5-shellbar-overflow-container-right-child{float:left}:host([breakpoint-size=S]) [dir=rtl] .ui5-shellbar-overflow-container-right{margin-right:0}::slotted(ui5-button[slot=startButton]){margin-right:.5rem;margin-left:0;justify-content:center;align-items:center}"; |
@@ -25,2 +25,3 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; | ||
| }, | ||
| managedSlots: true, | ||
| slots: /** @lends sap.ui.webcomponents.fiori.ProductSwitch.prototype */ { | ||
@@ -27,0 +28,0 @@ /** |
| import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; | ||
| import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; | ||
| import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js"; | ||
| import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js"; | ||
| import ProductSwitchItemTemplate from "./generated/templates/ProductSwitchItemTemplate.lit.js"; | ||
@@ -5,0 +5,0 @@ |
@@ -8,3 +8,3 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; | ||
| import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js"; | ||
| import { isSpace, isEscape } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js"; | ||
| import { isSpace } from "@ui5/webcomponents-base/dist/Keys.js"; | ||
| import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js"; | ||
@@ -79,12 +79,2 @@ import StandardListItem from "@ui5/webcomponents/dist/StandardListItem.js"; | ||
| /** | ||
| * Defines the source URI of the profile action. | ||
| * If no source is set - profile will be excluded from actions. | ||
| * @type {string} | ||
| * @public | ||
| */ | ||
| profile: { | ||
| type: String, | ||
| }, | ||
| /** | ||
| * Defines, if the notification icon would be displayed. | ||
@@ -130,3 +120,3 @@ * @type {boolean} | ||
| */ | ||
| showBlockLayer: { | ||
| showSearchField: { | ||
| type: Boolean, | ||
@@ -156,3 +146,3 @@ }, | ||
| }, | ||
| managedSlots: true, | ||
| slots: /** @lends sap.ui.webcomponents.fiori.ShellBar.prototype */ { | ||
@@ -175,2 +165,14 @@ /** | ||
| /** | ||
| * You can pass <code>ui5-avatar</code> to set the profile image/icon. | ||
| * If no profile slot is set - profile will be excluded from actions. | ||
| * @type {HTMLElement} | ||
| * @slot | ||
| * @since 1.0.0-rc.6 | ||
| * @public | ||
| */ | ||
| profile: { | ||
| type: HTMLElement, | ||
| }, | ||
| /** | ||
| * Defines the items displayed in menu after a click on the primary title. | ||
@@ -231,3 +233,3 @@ * <br><br> | ||
| /** | ||
| * Fired, when the profile icon is activated. | ||
| * Fired, when the profile slot is present. | ||
| * | ||
@@ -306,3 +308,3 @@ * @event | ||
| * The <code>ui5-shellbar</code> is meant to serve as an application header | ||
| * and includes numerous built-in features, such as: logo, profile icon, title, search field, notifications and so on. | ||
| * and includes numerous built-in features, such as: logo, profile image/icon, title, search field, notifications and so on. | ||
| * <br><br> | ||
@@ -376,6 +378,4 @@ * <h3>ES6 Module Import</h3> | ||
| itemPress: event => { | ||
| const popover = this.getStaticAreaItemDomRef().querySelector(".ui5-shellbar-overflow-popover"); | ||
| if (!this._defaultItemPressPrevented) { | ||
| popover.close(); | ||
| this.overflowPopover.close(); | ||
| } | ||
@@ -389,4 +389,2 @@ | ||
| press: event => { | ||
| const menuPopover = this.getStaticAreaItemDomRef().querySelector(".ui5-shellbar-menu-popover"); | ||
| if (this.menuItems.length) { | ||
@@ -397,3 +395,4 @@ this._menuPopoverItems = []; | ||
| }); | ||
| menuPopover.openBy(this.shadowRoot.querySelector(".ui5-shellbar-menu-button")); | ||
| this.updateStaticAreaItemContentDensity(); | ||
| this.menuPopover.openBy(this.shadowRoot.querySelector(".ui5-shellbar-menu-button")); | ||
| } | ||
@@ -450,9 +449,7 @@ }, | ||
| left: 0, | ||
| focusout: event => { | ||
| this.showBlockLayer = false; | ||
| }, | ||
| }; | ||
| this._handleResize = event => { | ||
| this.getStaticAreaItemDomRef().querySelector(".ui5-shellbar-overflow-popover").close(); | ||
| this._handleResize = async event => { | ||
| await this._getResponsivePopover(); | ||
| this.overflowPopover.close(); | ||
| this._overflowActions(); | ||
@@ -508,6 +505,4 @@ }; | ||
| closeOverflow() { | ||
| const popover = this.getStaticAreaItemDomRef().querySelector(".ui5-shellbar-overflow-popover"); | ||
| if (popover) { | ||
| popover.close(); | ||
| if (this.overflowPopover) { | ||
| this.overflowPopover.close(); | ||
| } | ||
@@ -641,12 +636,8 @@ } | ||
| _toggleActionPopover() { | ||
| const popover = this.getStaticAreaItemDomRef().querySelector(".ui5-shellbar-overflow-popover"); | ||
| const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button"); | ||
| popover.openBy(overflowButton); | ||
| this.updateStaticAreaItemContentDensity(); | ||
| this.overflowPopover.openBy(overflowButton); | ||
| } | ||
| _onkeydown(event) { | ||
| if (isEscape(event)) { | ||
| return this._handleEscape(event); | ||
| } | ||
| if (isSpace(event)) { | ||
@@ -657,14 +648,2 @@ event.preventDefault(); | ||
| _handleEscape() { | ||
| const searchButton = this.shadowRoot.querySelector(".ui5-shellbar-search-button"); | ||
| if (this.showBlockLayer) { | ||
| this.showBlockLayer = false; | ||
| setTimeout(() => { | ||
| searchButton.focus(); | ||
| }, 0); | ||
| } | ||
| } | ||
| onEnterDOM() { | ||
@@ -679,2 +658,8 @@ ResizeHandler.register(this, this._handleResize); | ||
| _handleSearchIconPress(event) { | ||
| this.showSearchField = !this.showSearchField; | ||
| if (!this.showSearchField) { | ||
| return; | ||
| } | ||
| const searchField = this.shadowRoot.querySelector(`#${this._id}-searchfield-wrapper`); | ||
@@ -697,4 +682,2 @@ const triggeredByOverflow = event.target.tagName.toLowerCase() === "ui5-li"; | ||
| this.showBlockLayer = true; | ||
| setTimeout(() => { | ||
@@ -776,2 +759,3 @@ const inputSlot = searchField.children[0]; | ||
| id: item._id, | ||
| count: item.count || undefined, | ||
| refItemid: item._id, | ||
@@ -819,3 +803,3 @@ text: item.text, | ||
| style: `order: ${this.profile ? 5 : -10};`, | ||
| subStyles: `${this.profile ? `background-image: url(${this.profile})` : ""}`, | ||
| profile: true, | ||
| id: `${this._id}-item-${3}`, | ||
@@ -850,2 +834,8 @@ domOrder: this.profile ? (++domOrder) : -1, | ||
| async _getResponsivePopover() { | ||
| const staticAreaItem = await this.getStaticAreaItemDomRef(); | ||
| this.overflowPopover = staticAreaItem.querySelector(".ui5-shellbar-overflow-popover"); | ||
| this.menuPopover = staticAreaItem.querySelector(".ui5-shellbar-menu-popover"); | ||
| } | ||
| get classes() { | ||
@@ -889,3 +879,3 @@ return { | ||
| static async define(...params) { | ||
| static async onDefine() { | ||
| await Promise.all([ | ||
@@ -897,4 +887,2 @@ Icon.define(), | ||
| ]); | ||
| super.define(...params); | ||
| } | ||
@@ -901,0 +889,0 @@ } |
@@ -25,3 +25,3 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; | ||
| * @type {string} | ||
| * @defaultvalue: "" | ||
| * @defaulValue "" | ||
| * @public | ||
@@ -32,2 +32,13 @@ */ | ||
| }, | ||
| /** | ||
| * Defines the count displayed in the top-right corner. | ||
| * @type {string} | ||
| * @defaultValue "" | ||
| * @since 1.0.0-rc.6 | ||
| * @public | ||
| */ | ||
| count: { | ||
| type: String, | ||
| }, | ||
| }, | ||
@@ -34,0 +45,0 @@ |
| { | ||
| "name": "@ui5/webcomponents-fiori", | ||
| "version": "0.0.0-63ca72189", | ||
| "version": "0.0.0-aadaf0b2a", | ||
| "description": "UI5 Web Components: webcomponents.fiori", | ||
@@ -28,10 +28,10 @@ "author": "SAP SE (https://www.sap.com)", | ||
| "dependencies": { | ||
| "@ui5/webcomponents": "0.0.0-63ca72189", | ||
| "@ui5/webcomponents-icons": "0.0.0-63ca72189", | ||
| "@ui5/webcomponents-theme-base": "0.0.0-63ca72189", | ||
| "@ui5/webcomponents-base": "0.0.0-63ca72189" | ||
| "@ui5/webcomponents": "0.0.0-aadaf0b2a", | ||
| "@ui5/webcomponents-icons": "0.0.0-aadaf0b2a", | ||
| "@ui5/webcomponents-theme-base": "0.0.0-aadaf0b2a", | ||
| "@ui5/webcomponents-base": "0.0.0-aadaf0b2a" | ||
| }, | ||
| "devDependencies": { | ||
| "@ui5/webcomponents-tools": "0.0.0-63ca72189" | ||
| "@ui5/webcomponents-tools": "0.0.0-aadaf0b2a" | ||
| } | ||
| } |
New alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.33%
3017007
- Number of package files
- increased by6.38%
50
- Lines of code
- increased by0.15%
3445
Dependency changes
+ Added@ui5/webcomponents@0.0.0-aadaf0b2a(transitive)
+ Added@ui5/webcomponents-base@0.0.0-aadaf0b2a(transitive)
+ Added@ui5/webcomponents-icons@0.0.0-aadaf0b2a(transitive)
+ Added@ui5/webcomponents-localization@0.0.0-aadaf0b2a(transitive)
+ Added@ui5/webcomponents-theme-base@0.0.0-aadaf0b2a(transitive)
- Removed@ui5/webcomponents@0.0.0-63ca72189(transitive)
- Removed@ui5/webcomponents-base@0.0.0-63ca72189(transitive)
- Removed@ui5/webcomponents-icons@0.0.0-63ca72189(transitive)
- Removed@ui5/webcomponents-theme-base@0.0.0-63ca72189(transitive)
- Removed@ui5/webcomponents-utils@0.0.0-63ca72189(transitive)