@patternfly/pfe-toast - npm Package Compare versions

Comparing version 2.0.0-next.1 to 2.0.0-next.2

package.json

 {
   "name": "@patternfly/pfe-toast",
   "license": "MIT",
-  "version": "2.0.0-next.1",
+  "version": "2.0.0-next.2",
   "description": "Toast element for PatternFly Elements",
@@ -68,5 +68,5 @@ "customElements": "custom-elements.json",
   "dependencies": {
-    "@patternfly/pfe-core": "^2.0.0-next.3",
+    "@patternfly/pfe-core": "^2.0.0-next.4",
     "lit": "^2.1.2"
   }
 }

pfe-toast.js

@@ -1,2 +0,2 @@
-var b=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var i=(r,e,t,o)=>{for(var a=o>1?void 0:o?g(e,t):e,l=r.length-1,c;l>=0;l--)(c=r[l])&&(a=(o?c(e,t,a):c(a))||a);return o&&a&&b(e,t,a),a};import{LitElement as w,html as y}from"lit";import{customElement as k,property as d,state as h,query as A}from"lit/decorators.js";import{ifDefined as E}from"lit/directives/if-defined.js";import{ComposedEvent as m}from"@patternfly/pfe-core";import{bound as n,observed as C,pfelement as D}from"@patternfly/pfe-core/decorators.js";import{deprecatedCustomEvent as f}from"@patternfly/pfe-core/functions/deprecatedCustomEvent.js";import{css as _}from"lit";var x=_`@charset "UTF-8";:host{align-items:stretch;display:flex;flex-flow:row wrap;justify-content:flex-start;position:absolute;right:var(--pfe-toast--Right,calc(-1 * (var(--pfe-toast--MaxWidth,500px) + var(--pfe-toast--Right--offset,50px))));top:var(--pfe-toast--Top,50px);transition:right var(--pfe-theme--animation-speed, .3s) var(--pfe-theme--animation-timing, cubic-bezier(.465, .183, .153, .946));will-change:right;max-width:var(--pfe-toast--MaxWidth,500px);min-width:var(--pfe-toast--MinWidth,250px)}@media only screen and (max-width:575px){:host{max-width:calc(var(--pfe-toast--MaxWidth,500px)/ 2);min-width:calc(var(--pfe-toast--MinWidth,250px)/ 2)}}:host([hidden]){display:none}:host(.open){--pfe-toast--Right:50px}:host(:not(.open)){--pfe-toast--Right:calc(-1 * var(--pfe-toast--MaxWidth, 500px) + var(--pfe-toast--Right--offset, 50px))}::slotted(:first-child){margin-top:0}::slotted(button){background:0 0;border-radius:0;display:inline-block;margin-bottom:0;margin-right:1rem;padding:(.5rem .75rem);text-align:center}.pfe-toast__container{align-self:flex-start;flex:1 1 auto;align-items:flex-start;display:flex;flex-flow:row nowrap;justify-content:flex-start;background-color:var(--pfe-toast__container--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));box-shadow:var(--pfe-toast__container--BoxShadow,var(--pfe-theme--box-shadow--lg,0 .1875rem .4375rem .1875rem rgba(3,3,3,.13),0 .6875rem 1.5rem 1rem rgba(3,3,3,.12)));color:var(--pfe-toast__container--Color,var(--pfe-theme--color--text,#151515));padding:var(--pfe-toast__container--Padding,var(--pfe-theme--container-padding,1rem))}.pfe-toast__content{flex:1 1 auto}.pfe-toast__close{flex:0 0 auto;background-color:transparent;border:none;cursor:pointer;margin:0;padding:var(--pfe-toast__close--Padding,var(--pfe-toast__close--PaddingTop,0) var(--pfe-toast__close--PaddingRight,0) var(--pfe-toast__close--PaddingBottom,0) var(--pfe-toast__close--PaddingLeft,0))}.pfe-toast__close>svg{fill:var(--pfe-toast__close--svg--Fill,var(--pfe-theme--color--feedback--default--darkest,#3c3f42));height:var(--pfe-toast__close--svg--Height,12px);width:var(--pfe-toast__close--svg--Width,12px)}.pfe-toast__close:hover>svg{fill:var(--pfe-toast__close--svg--Fill--hover,#333)}`,p=x;var u=class extends m{constructor(){super("open")}},v=class extends m{constructor(){super("close")}},s=class extends w{constructor(){super(...arguments);this.closeLabel="Close";this.doesAutoDismiss=!!this.autoDismiss;this.isOpen=!1}static async toast(e){let t=document.createElement("pfe-toast");return t.append(e),t.addEventListener("close",()=>t.remove(),{once:!0}),document.body.append(t),t.open(),await t.updateComplete,t}connectedCallback(){super.connectedCallback(),this.hidden=!0,this._setAccessibility(),this.addEventListener("keydown",this._keydownHandler)}render(){return y`<div class="pfe-toast__container" part="container"><div class="pfe-toast__content" part="content"><slot></slot></div><button part="close-button" class="pfe-toast__close" aria-label="${E(this.closeLabel)}" @click="${this.close}"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-11 11 22 23"><path d="M30 16.669v-1.331c0-0.363-0.131-0.675-0.394-0.938s-0.575-0.394-0.938-0.394h-10.669v-10.65c0-0.362-0.131-0.675-0.394-0.938s-0.575-0.394-0.938-0.394h-1.331c-0.363 0-0.675 0.131-0.938 0.394s-0.394 0.575-0.394 0.938v10.644h-10.675c-0.362 0-0.675 0.131-0.938 0.394s-0.394 0.575-0.394 0.938v1.331c0 0.363 0.131 0.675 0.394 0.938s0.575 0.394 0.938 0.394h10.669v10.644c0 0.363 0.131 0.675 0.394 0.938 0.262 0.262 0.575 0.394 0.938 0.394h1.331c0.363 0 0.675-0.131 0.938-0.394s0.394-0.575 0.394-0.938v-10.637h10.669c0.363 0 0.675-0.131 0.938-0.394 0.269-0.262 0.4-0.575 0.4-0.938z" transform="rotate(45)"/></svg></button></div>`}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this._keydownHandler)}_setAccessibility(){this.doesAutoDismiss=!!this.autoDismiss,this.doesAutoDismiss?(this.removeAttribute("aria-label"),this.removeAttribute("aria-describedby"),this.setAttribute("role","alert"),this.setAttribute("aria-live","polite"),this.setAttribute("aria-atomic","true")):(this.removeAttribute("aria-live"),this.removeAttribute("aria-atomic"),this.setAttribute("role","alertdialog"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Alert dialog"),this.setAttribute("aria-describedby","pfe-toast__content"))}_toMilliseconds(e=""){let t=e.match(/\d+/)||[8e3];return(e.match(/\D+/)||"")[0]==="s"?Number(t[0])*1e3:Number(t[0])}_keydownHandler(e){let{target:t}=e,{key:o}=e;switch(o){case"Escape":case"Esc":e.preventDefault(),this.close();break;case"Enter":t===this._toastCloseButton&&e.preventDefault(),this.close();break;default:break}}open(){return this.isOpen=!0,this.hidden=!1,setTimeout(()=>this.classList.add("open"),500),this.dispatchEvent(new u),this.dispatchEvent(f("pfe-toast:open")),this.doesAutoDismiss&&setTimeout(this.close,this._toMilliseconds(this.autoDismiss)),this}close(){return this.isOpen=!1,setTimeout(()=>{this.classList.remove("open"),this.hidden=!0},500),this.dispatchEvent(new v),this.dispatchEvent(f("pfe-toast:close")),this}toggle(){return this.isOpen?this.close():this.open(),this}};s.version="{{version}}",s.styles=[p],i([C("_setAccessibility"),d({attribute:"auto-dismiss",reflect:!0})],s.prototype,"autoDismiss",2),i([d({attribute:"close-label",reflect:!0})],s.prototype,"closeLabel",2),i([h()],s.prototype,"doesAutoDismiss",2),i([h()],s.prototype,"isOpen",2),i([A(".pfe-toast__close")],s.prototype,"_toastCloseButton",2),i([n],s.prototype,"_keydownHandler",1),i([n],s.prototype,"open",1),i([n],s.prototype,"close",1),i([n],s.prototype,"toggle",1),s=i([k("pfe-toast"),D()],s);export{s as PfeToast,v as ToastCloseEvent,u as ToastOpenEvent};
+var b=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var i=(a,r,s,t)=>{for(var o=t>1?void 0:t?g(r,s):r,l=a.length-1,c;l>=0;l--)(c=a[l])&&(o=(t?c(r,s,o):c(o))||o);return t&&o&&b(r,s,o),o};import{LitElement as w,html as y}from"lit";import{customElement as k,property as m,state as f,query as A}from"lit/decorators.js";import{ifDefined as E}from"lit/directives/if-defined.js";import{ComposedEvent as v}from"@patternfly/pfe-core";import{bound as n,observed as D,pfelement as M}from"@patternfly/pfe-core/decorators.js";import{deprecatedCustomEvent as u}from"@patternfly/pfe-core/functions/deprecatedCustomEvent.js";import{css as _}from"lit";var x=_`@charset "UTF-8";:host{align-items:stretch;display:flex;flex-flow:row wrap;justify-content:flex-start;position:absolute;right:var(--pfe-toast--Right,calc(-1 * (var(--pfe-toast--MaxWidth,500px) + var(--pfe-toast--Right--offset,50px))));top:var(--pfe-toast--Top,50px);transition:right var(--pfe-theme--animation-speed, .3s) var(--pfe-theme--animation-timing, cubic-bezier(.465, .183, .153, .946));will-change:right;max-width:var(--pfe-toast--MaxWidth,500px);min-width:var(--pfe-toast--MinWidth,250px)}@media only screen and (max-width:575px){:host{max-width:calc(var(--pfe-toast--MaxWidth,500px)/ 2);min-width:calc(var(--pfe-toast--MinWidth,250px)/ 2)}}:host([hidden]){display:none}:host(.open){--pfe-toast--Right:50px}:host(:not(.open)){--pfe-toast--Right:calc(-1 * var(--pfe-toast--MaxWidth, 500px) + var(--pfe-toast--Right--offset, 50px))}::slotted(:first-child){margin-top:0}::slotted(button){background:0 0;border-radius:0;display:inline-block;margin-bottom:0;margin-right:1rem;padding:(.5rem .75rem);text-align:center}.pfe-toast__container{align-self:flex-start;flex:1 1 auto;align-items:flex-start;display:flex;flex-flow:row nowrap;justify-content:flex-start;background-color:var(--pfe-toast__container--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));box-shadow:var(--pfe-toast__container--BoxShadow,var(--pfe-theme--box-shadow--lg,0 .1875rem .4375rem .1875rem rgba(3,3,3,.13),0 .6875rem 1.5rem 1rem rgba(3,3,3,.12)));color:var(--pfe-toast__container--Color,var(--pfe-theme--color--text,#151515));padding:var(--pfe-toast__container--Padding,var(--pfe-theme--container-padding,1rem))}.pfe-toast__content{flex:1 1 auto}.pfe-toast__close{flex:0 0 auto;background-color:transparent;border:none;cursor:pointer;margin:0;padding:var(--pfe-toast__close--Padding,var(--pfe-toast__close--PaddingTop,0) var(--pfe-toast__close--PaddingRight,0) var(--pfe-toast__close--PaddingBottom,0) var(--pfe-toast__close--PaddingLeft,0))}.pfe-toast__close>svg{fill:var(--pfe-toast__close--svg--Fill,var(--pfe-theme--color--feedback--default--darkest,#3c3f42));height:var(--pfe-toast__close--svg--Height,12px);width:var(--pfe-toast__close--svg--Width,12px)}.pfe-toast__close:hover>svg{fill:var(--pfe-toast__close--svg--Fill--hover,#333)}`,h=x;var p=class extends v{constructor(){super("open")}},d=class extends v{constructor(){super("close")}},e=class extends w{constructor(){super(...arguments);this.closeLabel="Close";this.doesAutoDismiss=!!this.autoDismiss;this.isOpen=!1}static async toast(s){let t=document.createElement("pfe-toast");return t.append(s),t.addEventListener("close",()=>t.remove(),{once:!0}),document.body.append(t),t.open(),await t.updateComplete,t}connectedCallback(){super.connectedCallback(),this.hidden=!0,this._setAccessibility(),this.addEventListener("keydown",this._keydownHandler)}render(){return y`<div class="pfe-toast__container" part="container"><div class="pfe-toast__content" part="content"><slot></slot></div><button part="close-button" class="pfe-toast__close" aria-label="${E(this.closeLabel)}" @click="${this.close}"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="-11 11 22 23"><path d="M30 16.669v-1.331c0-0.363-0.131-0.675-0.394-0.938s-0.575-0.394-0.938-0.394h-10.669v-10.65c0-0.362-0.131-0.675-0.394-0.938s-0.575-0.394-0.938-0.394h-1.331c-0.363 0-0.675 0.131-0.938 0.394s-0.394 0.575-0.394 0.938v10.644h-10.675c-0.362 0-0.675 0.131-0.938 0.394s-0.394 0.575-0.394 0.938v1.331c0 0.363 0.131 0.675 0.394 0.938s0.575 0.394 0.938 0.394h10.669v10.644c0 0.363 0.131 0.675 0.394 0.938 0.262 0.262 0.575 0.394 0.938 0.394h1.331c0.363 0 0.675-0.131 0.938-0.394s0.394-0.575 0.394-0.938v-10.637h10.669c0.363 0 0.675-0.131 0.938-0.394 0.269-0.262 0.4-0.575 0.4-0.938z" transform="rotate(45)"/></svg></button></div>`}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this._keydownHandler)}_setAccessibility(){this.doesAutoDismiss=!!this.autoDismiss,this.doesAutoDismiss?(this.removeAttribute("aria-label"),this.removeAttribute("aria-describedby"),this.setAttribute("role","alert"),this.setAttribute("aria-live","polite"),this.setAttribute("aria-atomic","true")):(this.removeAttribute("aria-live"),this.removeAttribute("aria-atomic"),this.setAttribute("role","alertdialog"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Alert dialog"),this.setAttribute("aria-describedby","pfe-toast__content"))}_toMilliseconds(s=""){let t=s.match(/\d+/)||[8e3];return(s.match(/\D+/)||"")[0]==="s"?Number(t[0])*1e3:Number(t[0])}_keydownHandler(s){let{target:t}=s,{key:o}=s;switch(o){case"Escape":case"Esc":s.preventDefault(),this.close();break;case"Enter":t===this._toastCloseButton&&s.preventDefault(),this.close();break;default:break}}open(){return this.isOpen=!0,this.hidden=!1,setTimeout(()=>this.classList.add("open"),500),this.dispatchEvent(new p),this.dispatchEvent(u("pfe-toast:open")),this.doesAutoDismiss&&setTimeout(this.close,this._toMilliseconds(this.autoDismiss)),this}close(){return this.isOpen=!1,setTimeout(()=>{this.classList.remove("open"),this.hidden=!0},500),this.dispatchEvent(new d),this.dispatchEvent(u("pfe-toast:close")),this}toggle(){return this.isOpen?this.close():this.open(),this}};e.version="{{version}}",e.styles=[h],i([D("_setAccessibility"),m({attribute:"auto-dismiss",reflect:!0})],e.prototype,"autoDismiss",2),i([m({attribute:"close-label",reflect:!0})],e.prototype,"closeLabel",2),i([f()],e.prototype,"doesAutoDismiss",2),i([f()],e.prototype,"isOpen",2),i([A(".pfe-toast__close")],e.prototype,"_toastCloseButton",2),i([n],e.prototype,"_keydownHandler",1),i([n],e.prototype,"open",1),i([n],e.prototype,"close",1),i([n],e.prototype,"toggle",1),e=i([k("pfe-toast"),M()],e);export{e as PfeToast,d as ToastCloseEvent,p as ToastOpenEvent};
 //# sourceMappingURL=pfe-toast.js.map

No alert changes

No metric changes

Dependency changes

• Updated@patternfly/pfe-core@^2.0.0-next.4