@momentum-ui/web-components 2.16.18 → 2.17.0
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 +15 -10
- package/dist/chunks/md-56.js +1 -1
- package/dist/chunks/md-90.js +1 -1
- package/dist/index-entry.js +1 -1
- package/dist/index.js +1 -1
- package/dist/types/components/alert-banner/AlertBanner.d.ts +7 -0
- package/dist/types/components/grabber/Grabber.d.ts +2 -2
- package/package.json +5 -5
package/dist/chunks/md-53.js
CHANGED
|
@@ -1,29 +1,34 @@
|
|
|
1
|
-
(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[53],{112:function(e,t,
|
|
1
|
+
(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[53],{112:function(e,t,n){"use strict";n.r(t),n.d(t,"alertBannerAlignment",(function(){return m})),n.d(t,"AlertBanner",(function(){return b}));n(17),n(14);var r=n(5),a=n(28),o=n(6),l=n(0),i=n(2),s=n(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--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--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,n,r){var a,o=arguments.length,l=o<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,n,r);else for(var i=e.length-1;i>=0;i--)(a=e[i])&&(l=(o<3?a(l):o>3?a(t,n,l):a(t,n))||l);return o>3&&l&&Object.defineProperty(t,n,l),l};const m=["center","leading"];var b;!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}}render(){const e=this.closable?l.html`
|
|
2
2
|
<md-button
|
|
3
3
|
class="md-alert-banner__close"
|
|
4
4
|
hasRemoveStyle
|
|
5
|
+
circle
|
|
5
6
|
ariaLabel=${this.closeAriaLabel}
|
|
6
7
|
@click="${this.onHide}"
|
|
7
8
|
@keydown="${this.handleKeyDown}"
|
|
8
9
|
>
|
|
9
10
|
<md-icon name="cancel-bold" size="16" iconSet="momentumDesign"></md-icon>
|
|
10
11
|
</md-button>
|
|
11
|
-
`:null,
|
|
12
|
+
`:null,t=this.showBannerTypeIcon?l.html` <md-icon name="${this.getIconForType()}" iconSet="momentumDesign" size="16"> </md-icon> `:l.html`<slot name="left"></slot>`,n=this.showRefreshButton?l.html` <md-button
|
|
13
|
+
class="refresh-button"
|
|
12
14
|
@click="${()=>this.dispatchEvent(new CustomEvent("alertBanner-refresh-button-click"))}"
|
|
13
15
|
variant="ghostInheritTextColor"
|
|
14
16
|
circle
|
|
15
17
|
size="20"
|
|
16
18
|
>
|
|
17
|
-
<md-icon name="refresh-bold" iconSet="momentumDesign" size="16"
|
|
18
|
-
</md-button>`:i.nothing;return
|
|
19
|
-
${this.show?
|
|
20
|
-
<div class="${Object(
|
|
21
|
-
<div class="
|
|
22
|
-
${
|
|
19
|
+
<md-icon name="refresh-bold" iconSet="momentumDesign" size="16"></md-icon>
|
|
20
|
+
</md-button>`:i.nothing;return l.html`
|
|
21
|
+
${this.show?l.html`
|
|
22
|
+
<div class="${Object(s.classMap)(this.alertBannerClassMap)}" role="alert">
|
|
23
|
+
<div class="${Object(s.classMap)(this.alertBannerTextClassMap)}">
|
|
24
|
+
${t}
|
|
23
25
|
<slot><span>${this.message}</span></slot>
|
|
24
26
|
${n}
|
|
25
27
|
</div>
|
|
26
|
-
${
|
|
28
|
+
<div class="md-alert-banner__right ${Object(s.classMap)(this.alertBannerRightClassMap)}">
|
|
29
|
+
<slot name="right"></slot>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="close-div">${e}</div>
|
|
27
32
|
</div>
|
|
28
33
|
`:null}
|
|
29
|
-
`}};
|
|
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(r.a)("md-alert-banner")],t),e.ELEMENT=t}(b||(b={}))}}]);
|
package/dist/chunks/md-56.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[56],{115:function(e,r,t){"use strict";t.r(r),t.d(r,"Breadcrumb",(function(){return a}));var a,n=t(6),s=t(5),o=t(0),c=o.css`:host(:focus){box-shadow:none;outline:0!important}:host(md-breadcrumb) .md-breadcrumb ul{align-content:center;align-items:center;display:flex;flex-flow:row nowrap;justify-content:flex-start;margin:0;padding:.5625rem .875rem .5625rem;list-style:none}:host(md-breadcrumb) .md-breadcrumb li{display:flex;text-transform:capitalize;font-size:.875rem}:host(md-breadcrumb) .md-breadcrumb li:not(:first-child)::before{display:flex;margin:0 .75rem;color:var(--breadcrumb-color-slash
|
|
1
|
+
(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[56],{115:function(e,r,t){"use strict";t.r(r),t.d(r,"Breadcrumb",(function(){return a}));var a,n=t(6),s=t(5),o=t(0),c=o.css`:host(:focus){box-shadow:none;outline:0!important}:host(md-breadcrumb) .md-breadcrumb ul{align-content:center;align-items:center;display:flex;flex-flow:row nowrap;justify-content:flex-start;margin:0;padding:.5625rem .875rem .5625rem;list-style:none}:host(md-breadcrumb) .md-breadcrumb li{display:flex;text-transform:capitalize;font-size:.875rem}:host(md-breadcrumb) .md-breadcrumb li:not(:first-child)::before{display:flex;margin:0 .75rem;color:var(--breadcrumb-color-slash);content:"/"}:host(md-breadcrumb) .md-breadcrumb a{color:var(--breadcrumb-color)}:host(md-breadcrumb) .md-breadcrumb a[aria-current=page]{pointer-events:none;cursor:default;color:var(--breadcrumb-color-current)}`,i=t(13),l=t(3),b=function(e,r,t,a){var n,s=arguments.length,o=s<3?r:null===a?a=Object.getOwnPropertyDescriptor(r,t):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,r,t,a);else for(var c=e.length-1;c>=0;c--)(n=e[c])&&(o=(s<3?n(o):s>3?n(r,t,o):n(r,t))||o);return s>3&&o&&Object.defineProperty(r,t,o),o};!function(e){let r=class extends o.LitElement{constructor(){super(...arguments),this.label="Breadcrumb",this.navCrumbs=[]}static get styles(){return[n.a,c]}setLastAnchorCurrent(){this.anchors&&this.anchors.length&&this.anchors[this.anchors.length-1].setAttribute("aria-current","page")}firstUpdated(e){super.firstUpdated(e),this.setLastAnchorCurrent()}update(e){super.update(e),e.has("navCrumbs")&&this.setLastAnchorCurrent()}handleClick(e){const r=e.target;if(this.anchors&&this.anchors.length){const e=Array.from(this.anchors).indexOf(r);-1!==e&&(this.navCrumbs=[...this.navCrumbs.splice(0,e+1)])}}render(){return o.html`
|
|
2
2
|
<nav aria-label="${Object(l.ifDefined)(this.label?this.label:void 0)}" class="md-breadcrumb">
|
|
3
3
|
<ul @click=${e=>this.handleClick(e)}>
|
|
4
4
|
${Object(i.repeat)(this.navCrumbs,e=>e.link,e=>o.html`
|