@momentum-ui/web-components 2.17.1 → 2.17.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/chunks/md-53.js
CHANGED
|
@@ -1,15 +1,17 @@
|
|
|
1
|
-
(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[53],{112:function(e,t,
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[53],{112:function(e,t,r){"use strict";r.r(t),r.d(t,"alertBannerType",(function(){return m})),r.d(t,"alertBannerAlignment",(function(){return b})),r.d(t,"AlertBanner",(function(){return u}));r(17),r(14);var n=r(5),a=r(28),o=r(6),l=r(0),i=r(2),s=r(12),c=l.css`.md-alert-banner{display:flex;padding:.75rem;position:relative;text-align:center;border-radius:var(--alert-banner-border-radius);font-family:var(--brand-font-regular, "CiscoSansTT Regular", "Helvetica Neue", Helvetica, Arial, sans-serif);font-weight:var(--brand-font-weight-regular);line-height:1.25rem;gap:12px;align-items:center;justify-content:center}.md-alert-banner.closable{padding-right:calc(1.75rem + 12px)}.md-alert-banner.md-alert-banner--default{background-color:var(--alert-banner-default-bg-color);color:var(--alert-banner-default-text-color)}.md-alert-banner.md-alert-banner--default md-icon{color:var(--alert-banner-default-text-color)}.md-alert-banner.md-alert-banner--default-momentum{background-color:var(--alert-banner-default-momentum-bg-color);color:var(--alert-banner-default-momentum-text-color)}.md-alert-banner.md-alert-banner--default-momentum md-icon{color:var(--alert-banner-default-momentum-text-color)}.md-alert-banner.md-alert-banner--accent{background-color:var(--alert-banner-default-bg-color);color:var(--alert-banner-default-text-color)}.md-alert-banner.md-alert-banner--accent md-icon{color:var(--alert-banner-default-text-color)}.md-alert-banner.md-alert-banner--warning{background-color:var(--alert-banner-warning-bg-color);color:var(--alert-banner-warning-text-color)}.md-alert-banner.md-alert-banner--warning md-icon{color:var(--alert-banner-warning-text-color)}.md-alert-banner.md-alert-banner--error{background-color:var(--alert-banner-error-bg-color);color:var(--alert-banner-error-text-color)}.md-alert-banner.md-alert-banner--error md-icon{color:var(--alert-banner-error-text-color)}.md-alert-banner.md-alert-banner--success{background-color:var(--alert-banner-success-bg-color);color:var(--alert-banner-success-text-color)}.md-alert-banner.md-alert-banner--success md-icon{color:var(--alert-banner-success-text-color)}.md-alert-banner.md-alert-banner--promotional{background:var(--alert-banner-promotional-bg);color:var(--alert-banner-promotional-text-color)}.md-alert-banner.md-alert-banner--promotional md-icon{color:var(--alert-banner-promotional-text-color)}.md-alert-banner--leading{text-align:left;justify-content:space-between}.md-alert-banner__text{font-size:.875rem;display:inline-flex;justify-content:center;align-items:center;gap:12px}.md-alert-banner__text a{color:inherit;text-decoration:underline}.md-alert-banner__text .refresh-button{display:inline-flex}.md-alert-banner__text.leading{justify-content:flex-start}.md-alert-banner__right{display:inline-flex;align-items:center;justify-content:center}.md-alert-banner__right.trailing{justify-content:flex-end}.md-alert-banner .close-div{position:absolute;display:flex;align-items:center;right:.75rem;top:.75rem;bottom:.75rem;width:1rem}.md-alert-banner .close-div .md-alert-banner__close{cursor:pointer;display:inline-flex;align-items:center;justify-content:center}@media(forced-colors:active){.md-alert-banner{box-shadow:none;outline:2px solid CanvasText}}`,d=function(e,t,r,n){var a,o=arguments.length,l=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,r,n);else for(var i=e.length-1;i>=0;i--)(a=e[i])&&(l=(o<3?a(l):o>3?a(t,r,l):a(t,r))||l);return o>3&&l&&Object.defineProperty(t,r,l),l};const m=["default","accent","warning","error","success","default-momentum","promotional"],b=["center","leading"];var u;!function(e){let t=class extends l.LitElement{constructor(){super(...arguments),this.type="",this.message="",this.closable=!1,this.show=!1,this.closeAriaLabel="Close Banner",this.showBannerTypeIcon=!1,this.showRefreshButton=!1,this.alignment="center"}connectedCallback(){super.connectedCallback(),this.requestUpdate("show")}onHide(){this.show=!this.show,this.dispatchEvent(new CustomEvent("alertBanner-hide")),this.requestUpdate("show")}handleKeyDown(e){const{code:t}=e;Object(a.a)(t)&&this.onHide()}get isLeadingAlignment(){return"leading"===this.alignment}static get styles(){return[o.a,c]}getIconForType(){switch(this.type){case"error":return"error-legacy-badge-filled";case"warning":return"warning-filled";case"success":return"check-circle-badge-filled";default:return"info-badge-filled"}}get alertBannerClassMap(){return{"md-alert-banner":!0,["md-alert-banner--"+this.type]:this.type,["md-alert-banner--"+this.alignment]:this.isLeadingAlignment,closable:this.closable}}get alertBannerTextClassMap(){return{"md-alert-banner__text":!0,leading:this.isLeadingAlignment}}get alertBannerRightClassMap(){return{trailing:this.isLeadingAlignment}}get closeButtonTemplate(){return l.html`
|
|
2
|
+
<div class="close-div">
|
|
3
|
+
<md-button
|
|
4
|
+
class="md-alert-banner__close"
|
|
5
|
+
hasRemoveStyle
|
|
6
|
+
circle
|
|
7
|
+
ariaLabel=${this.closeAriaLabel}
|
|
8
|
+
@click="${this.onHide}"
|
|
9
|
+
@keydown="${this.handleKeyDown}"
|
|
10
|
+
>
|
|
11
|
+
<md-icon name="cancel-bold" size="16" iconSet="momentumDesign"></md-icon>
|
|
12
|
+
</md-button>
|
|
13
|
+
</div>
|
|
14
|
+
`}render(){const e=this.closable?l.html` ${this.closeButtonTemplate} `:null,t=this.showBannerTypeIcon?l.html` <md-icon name="${this.getIconForType()}" iconSet="momentumDesign" size="16"> </md-icon> `:l.html`<slot name="left"></slot>`,r=this.showRefreshButton?l.html` <md-button
|
|
13
15
|
class="refresh-button"
|
|
14
16
|
@click="${()=>this.dispatchEvent(new CustomEvent("alertBanner-refresh-button-click"))}"
|
|
15
17
|
variant="ghostInheritTextColor"
|
|
@@ -23,12 +25,12 @@
|
|
|
23
25
|
<div class="${Object(s.classMap)(this.alertBannerTextClassMap)}">
|
|
24
26
|
${t}
|
|
25
27
|
<slot><span>${this.message}</span></slot>
|
|
26
|
-
${
|
|
28
|
+
${r}
|
|
27
29
|
</div>
|
|
28
30
|
<div class="md-alert-banner__right ${Object(s.classMap)(this.alertBannerRightClassMap)}">
|
|
29
31
|
<slot name="right"></slot>
|
|
30
32
|
</div>
|
|
31
|
-
|
|
33
|
+
${e}
|
|
32
34
|
</div>
|
|
33
35
|
`:null}
|
|
34
|
-
`}};d([Object(l.property)({type:String})],t.prototype,"type",void 0),d([Object(l.property)({type:String})],t.prototype,"message",void 0),d([Object(l.property)({type:Boolean})],t.prototype,"closable",void 0),d([Object(l.property)({type:Boolean})],t.prototype,"show",void 0),d([Object(l.property)({type:String,attribute:"close-aria-label"})],t.prototype,"closeAriaLabel",void 0),d([Object(l.property)({type:Boolean})],t.prototype,"showBannerTypeIcon",void 0),d([Object(l.property)({type:Boolean})],t.prototype,"showRefreshButton",void 0),d([Object(l.property)({type:String})],t.prototype,"alignment",void 0),t=d([Object(
|
|
36
|
+
`}};d([Object(l.property)({type:String})],t.prototype,"type",void 0),d([Object(l.property)({type:String})],t.prototype,"message",void 0),d([Object(l.property)({type:Boolean})],t.prototype,"closable",void 0),d([Object(l.property)({type:Boolean})],t.prototype,"show",void 0),d([Object(l.property)({type:String,attribute:"close-aria-label"})],t.prototype,"closeAriaLabel",void 0),d([Object(l.property)({type:Boolean})],t.prototype,"showBannerTypeIcon",void 0),d([Object(l.property)({type:Boolean})],t.prototype,"showRefreshButton",void 0),d([Object(l.property)({type:String})],t.prototype,"alignment",void 0),t=d([Object(n.a)("md-alert-banner")],t),e.ELEMENT=t}(u||(u={}))}}]);
|