jb-notification
Version:
notification web component
2 lines • 19.2 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).JBNotification={})}(this,(function(e){function t(e,t,n,i){if("a"===n&&!i)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!i:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?i:"a"===n?i.call(e):i?i.value:t.get(e)}function n(e,t,n,i,o){if("m"===i)throw new TypeError("Private method is not writable");if("a"===i&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===i?o.call(e,n):o?o.value=n:t.set(e,n),n}var i=class{lightness;chroma;hue;variableName;get value(){return`oklch(${this.lightness} ${this.chroma} ${this.hue})`}constructor(e,t){this.variableName=t,this.lightness=e.lightness,this.chroma=e.chroma,this.hue=e.hue}};function o(e){return new i({lightness:6*(3+1.3*e)*.01,chroma:.001*(14+.09*e),hue:258.36},`--jb-neutral-${e}`)}function s(e){return new i({lightness:e.lightness-.1,chroma:e.chroma-.05,hue:e.hue},`${e.variableName}-pressed`)}function r(e){const t=Math.min(e.lightness+.12*(1-e.lightness),.985),n=e.chroma*(1-.15*(t-e.lightness));return new i({lightness:t,chroma:Number(n.toFixed(3)),hue:e.hue},`${e.variableName}-l`)}function a(e){const t=Math.max(e.lightness-.12*e.lightness,.02),n=e.chroma*(1-.15*(t-e.lightness));return new i({lightness:t,chroma:n,hue:e.hue},`${e.variableName}-d`)}function c(e){const t=Math.min(e.lightness+.65*(1-e.lightness),.93),n=.55*e.chroma*(1-.08*(t-e.lightness)),o=e.hue>=70&&e.hue<=162?5:-3,s=e.hue+o;return new i({lightness:t,chroma:Number(n.toFixed(3)),hue:s},`${e.variableName}-subtle`)}function l(e){const t=Math.max(e.lightness-.35,.22),n=Math.min(1.6*e.chroma,.28);return new i({lightness:Number(t.toFixed(3)),chroma:Number(n.toFixed(3)),hue:e.hue},`${e.variableName}-contrast`)}function h(e){return{main:e,hover:(t=e,new i({lightness:t.lightness+.07,chroma:t.chroma+.07,hue:t.hue},`${t.variableName}-hover`)),pressed:s(e),light:r(e),dark:a(e),subtle:c(e),contrast:l(e)};var t}const m=new i({lightness:.6,chroma:.26,hue:256},"--jb-primary"),p=new i({lightness:.6,chroma:.26,hue:286},"--jb-secondary"),d=new i({lightness:.75,chroma:.18,hue:70},"--jb-yellow"),b=new i({lightness:.68,chroma:.1484,hue:162.1},"--jb-green"),f=new i({lightness:.6,chroma:.22,hue:23.21},"--jb-red"),u={single:{black:new i({lightness:.14,chroma:0,hue:0},"--jb-black"),white:new i({lightness:1,chroma:0,hue:0},"--jb-white"),highlight:new i({lightness:.93,chroma:.2302,hue:125.18},"--jb-highlight")},neutral:[o(0),o(1),o(2),o(3),o(4),o(5),o(6),o(7),o(8),o(9),o(10)],primary:h(m),secondary:h(p),yellow:h(d),green:h(b),red:h(f)};function w(e){try{const{value:t,...n}=e;window.CSS.registerProperty({...n}),function(e,t){try{t&&(document.documentElement.style.getPropertyValue(e)||document.documentElement.style.setProperty(e,t))}catch(e){}}(e.name,t)}catch(e){}}function y(e,t){w({name:t??e.variableName,syntax:"<color>",inherits:!0,initialValue:e.value})}function g(){var e;w({name:"--jb-radius",inherits:!0,value:"1rem",initialValue:"16px",syntax:"<length-percentage>"}),w({name:"--jb-radius-xs",inherits:!0,value:"0.5rem",initialValue:"8px",syntax:"<length-percentage>"}),w({name:"--jb-radius-sm",inherits:!0,value:"0.75rem",initialValue:"12px",syntax:"<length-percentage>"}),w({name:"--jb-radius-lg",inherits:!0,value:"1.25rem",initialValue:"20px",syntax:"<length-percentage>"}),w({name:"--jb-radius-xl",inherits:!0,value:"1.5rem",initialValue:"24px",syntax:"<length-percentage>"}),function(e){y(e.neutral[0],"--jb-neutral"),y(e.primary.main),y(e.secondary.main),y(e.single.black),y(e.single.white),y(e.single.highlight),y(e.yellow.main),y(e.green.main),y(e.red.main),y(e.red.main);for(let t=1;t<=10;t++)y(e.neutral[t])}(u),y((e=u).single.black,"--jb-text-primary"),y(e.neutral[7],"--jb-text-secondary"),y(e.single.white,"--jb-text-contrast")}var v,x,k,j,S,L,W,E,N,M,T,C,q,X,$,O,R,I,P,z,F,A;const D=["ERROR","INFO","SUCCESS","WARNING"];var V=class extends HTMLElement{get title(){return t(this,k,"f")}set title(e){n(this,k,e,"f"),this.elements.titleWrapper.innerText=e}get description(){return t(this,j,"f")}set description(e){n(this,j,e,"f"),this.elements.descWrapper.innerText=e||""}get type(){return t(this,L,"f")}set type(e){D.includes(e)?(n(this,L,e,"f"),this.updateUIBaseOnType(e)):console.error(`type ${e} is not a valid NotificationType`)}get state(){return t(this,x,"f")}constructor(){super(),v.add(this),x.set(this,"CLOSE"),k.set(this,""),j.set(this,null),S.set(this,3e3),L.set(this,"INFO"),W.set(this,null),$.set(this,{startX:null,startTime:null,distance:null,endTime:null}),this.initWebComponent(),this.type="INFO"}initWebComponent(){const e=this.attachShadow({mode:"open"});g();const t=document.createElement("template");t.innerHTML='<style>:host{--success-bg-color:var(--jb-notification-success-bg-color, var(--jb-green));--info-bg-color:var(--jb-notification-info-bg-color, var(--jb-primary));--warning-bg-color:var(--jb-yellow);--error-bg-color:var(--jb-notification-error-bg-color, var(--jb-red));--text-color: var(--jb-text-contrast);--info-text-color:var(--text-color);--success-text-color:var(--text-color);--warning-text-color:var(--text-color);--error-text-color:var(--text-color)}:host{width:fit-content;max-width:calc(100vw - 2rem)}.jb-notification-web-component{width:fit-content;display:none;pointer-events:all}.jb-notification-web-component.--show{display:block}.jb-notification-web-component.--info .notification-content{background-color:var(--info-bg-color)}.jb-notification-web-component.--info .message-texts-wrapper{color:var(--info-text-color)}.jb-notification-web-component.--warning .notification-content{background-color:var(--warning-bg-color)}.jb-notification-web-component.--warning .message-texts-wrapper{color:var(--warning-text-color)}.jb-notification-web-component.--success .notification-content{background-color:var(--success-bg-color)}.jb-notification-web-component.--success .message-texts-wrapper{color:var(--success-text-color)}.jb-notification-web-component.--error .notification-content{background-color:var(--error-bg-color)}.jb-notification-web-component.--error .message-texts-wrapper{color:var(--error-text-color)}.jb-notification-web-component .notification-content{border-radius:2rem;width:fit-content;padding:.5rem;box-sizing:border-box;display:grid;grid-template-columns:3rem auto;grid-template-rows:auto;grid-template-areas:"icon texts";gap:.25rem}.jb-notification-web-component .notification-content .icon-wrapper{grid-area:icon;width:100%;height:100%}.jb-notification-web-component .notification-content .icon-wrapper .notification-icon{width:100%;height:100%;stroke:none}.jb-notification-web-component .notification-content .icon-wrapper .notification-icon .icon-bg{stroke:none;stroke-width:0;fill:#fff}.jb-notification-web-component .notification-content .icon-wrapper .notification-icon .symbol.--hidden{display:none}.jb-notification-web-component .notification-content .icon-wrapper .notification-icon .symbol.info-symbol{--symbol-color:var(--info-bg-color)}.jb-notification-web-component .notification-content .icon-wrapper .notification-icon .symbol.info-symbol .i-dot{stroke:var(--symbol-color);stroke-width:3px;stroke-linecap:round}.jb-notification-web-component .notification-content .icon-wrapper .notification-icon .symbol.info-symbol .i-line{stroke:var(--symbol-color);stroke-width:3px;stroke-linecap:round;stroke-dasharray:5px 5px}.jb-notification-web-component .notification-content .icon-wrapper .notification-icon .symbol.warning-symbol{--symbol-color:var(--warning-bg-color)}.jb-notification-web-component .notification-content .icon-wrapper .notification-icon .symbol.warning-symbol .ri-dot{stroke:var(--symbol-color);stroke-width:3px;stroke-linecap:round}.jb-notification-web-component .notification-content .icon-wrapper .notification-icon .symbol.warning-symbol .ri-line{stroke:var(--symbol-color);stroke-width:3px;stroke-linecap:round;stroke-dasharray:7px 7px}.jb-notification-web-component .notification-content .icon-wrapper .notification-icon .symbol.error-symbol{--symbol-color:var(--error-bg-color)}.jb-notification-web-component .notification-content .icon-wrapper .notification-icon .symbol.error-symbol .line1{stroke:var(--symbol-color);stroke-width:3px;stroke-linecap:round;stroke-dasharray:12px 12px}.jb-notification-web-component .notification-content .icon-wrapper .notification-icon .symbol.error-symbol .line2{stroke:var(--symbol-color);stroke-width:3px;stroke-linecap:round;stroke-dasharray:12px 12px}.jb-notification-web-component .notification-content .icon-wrapper .notification-icon .symbol.success-symbol{--symbol-color:var(--success-bg-color)}.jb-notification-web-component .notification-content .icon-wrapper .notification-icon .symbol.success-symbol .tik{stroke:var(--symbol-color);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px 16px}.jb-notification-web-component .notification-content .message-texts-wrapper{grid-area:texts;display:flex;flex-direction:column;justify-content:center}.jb-notification-web-component .notification-content .message-texts-wrapper .title-wrapper{font-size:1.1rem;font-weight:700;text-align:start}.jb-notification-web-component .notification-content .message-texts-wrapper .desc-wrapper{font-size:.8rem;font-weight:100}.jb-notification-web-component .notification-content .message-texts-wrapper .desc-wrapper:empty{display:none}</style>\n\n <div class="jb-notification-web-component --info">\n <div class="notification-content">\n <div class="icon-wrapper">\n <svg class="notification-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n <defs>\n </defs>\n \n <g class="bg">\n <path class="icon-bg bg-star" d="M10.2,1.93a2.41,2.41,0,0,1,3.6,0l.85.94a2.37,2.37,0,0,0,1.93.8l1.27-.07A2.43,2.43,0,0,1,20.4,6.15l-.07,1.27a2.37,2.37,0,0,0,.8,1.93l.94.85a2.41,2.41,0,0,1,0,3.6l-.94.85a2.37,2.37,0,0,0-.8,1.93l.07,1.27a2.43,2.43,0,0,1-2.55,2.55l-1.27-.07a2.37,2.37,0,0,0-1.93.8l-.85.94a2.41,2.41,0,0,1-3.6,0l-.85-.94a2.37,2.37,0,0,0-1.93-.8l-1.27.07A2.43,2.43,0,0,1,3.6,17.85l.07-1.27a2.37,2.37,0,0,0-.8-1.93l-.94-.85a2.41,2.41,0,0,1,0-3.6l.94-.85a2.37,2.37,0,0,0,.8-1.93L3.6,6.15A2.43,2.43,0,0,1,6.15,3.6l1.27.07a2.37,2.37,0,0,0,1.93-.8Z"/>\n <circle class="icon-bg" cx="12" cy="12" r="11"></circle>\n </g>\n <g class="info-symbol symbol">\n <path class="i-dot" d="M12 6 L12 6"></path>\n <path class="i-line" d="M12 11 L12 16"></path>\n </g>\n <g class="error-symbol symbol --hidden">\n <path class="line1" d="M8 8 L16 16"></path>\n <path class="line2" d="M16 8 L8 16"></path>\n </g>\n <g class="success-symbol symbol --hidden">\n <path class="tik" d="M7 12 L9 16 L17 8"></path>\n </g>\n <g class="warning-symbol symbol --hidden">\n <path class="ri-dot" d="M12 17 L12 17"></path>\n <path class="ri-line" d="M12 13 L12 6"></path>\n </g>\n </svg>\n </div>\n <div class="message-texts-wrapper">\n <div class="title-wrapper">پیغام شما با موفقیت ثبت شد</div>\n <div class="desc-wrapper"></div>\n </div>\n </div>\n </div>\n ',e.appendChild(t.content.cloneNode(!0)),this.elements={componentWrapper:e.querySelector(".jb-notification-web-component"),titleWrapper:e.querySelector(".title-wrapper"),descWrapper:e.querySelector(".desc-wrapper"),icon:{infoSymbol:e.querySelector(".info-symbol"),errorSymbol:e.querySelector(".error-symbol"),successSymbol:e.querySelector(".success-symbol"),warningSymbol:e.querySelector(".warning-symbol")}},this.initSwipe()}static get observedAttributes(){return["title","description","type"]}attributeChangedCallback(e,t,n){this.onAttributeChange(e,n)}onAttributeChange(e,t){switch(e){case"title":this.title=t;break;case"description":this.description=t;break;case"type":this.type=t}}updateUIBaseOnType(e){switch(e){case"INFO":this.elements.icon.infoSymbol.classList.remove("--hidden"),this.elements.icon.errorSymbol.classList.add("--hidden"),this.elements.icon.warningSymbol.classList.add("--hidden"),this.elements.icon.successSymbol.classList.add("--hidden"),this.elements.componentWrapper.classList.add("--info"),this.elements.componentWrapper.classList.remove("--warning"),this.elements.componentWrapper.classList.remove("--success"),this.elements.componentWrapper.classList.remove("--error");break;case"ERROR":this.elements.icon.infoSymbol.classList.add("--hidden"),this.elements.icon.errorSymbol.classList.remove("--hidden"),this.elements.icon.warningSymbol.classList.add("--hidden"),this.elements.icon.successSymbol.classList.add("--hidden"),this.elements.componentWrapper.classList.remove("--info"),this.elements.componentWrapper.classList.remove("--warning"),this.elements.componentWrapper.classList.remove("--success"),this.elements.componentWrapper.classList.add("--error");break;case"SUCCESS":this.elements.icon.infoSymbol.classList.add("--hidden"),this.elements.icon.errorSymbol.classList.add("--hidden"),this.elements.icon.warningSymbol.classList.add("--hidden"),this.elements.icon.successSymbol.classList.remove("--hidden"),this.elements.componentWrapper.classList.remove("--info"),this.elements.componentWrapper.classList.remove("--warning"),this.elements.componentWrapper.classList.add("--success"),this.elements.componentWrapper.classList.remove("--error");break;case"WARNING":this.elements.icon.infoSymbol.classList.add("--hidden"),this.elements.icon.errorSymbol.classList.add("--hidden"),this.elements.icon.warningSymbol.classList.remove("--hidden"),this.elements.icon.successSymbol.classList.add("--hidden"),this.elements.componentWrapper.classList.remove("--info"),this.elements.componentWrapper.classList.add("--warning"),this.elements.componentWrapper.classList.remove("--success"),this.elements.componentWrapper.classList.remove("--error")}}show(){n(this,x,"OPEN","f"),this.elements.componentWrapper.classList.add("--show"),t(this,v,"m",E).call(this),n(this,W,setTimeout((()=>{this.hide()}),t(this,S,"f")),"f")}hide(){t(this,v,"m",q).call(this).then((()=>{this.elements.componentWrapper.classList.remove("--show"),this.onClose()}))}onClose(){n(this,x,"CLOSE","f"),t(this,W,"f")&&clearInterval(t(this,W,"f")),t(this,v,"m",X).call(this)}updateDom(){}onTimerFinished(){const e=new CustomEvent("finish",{});this.dispatchEvent(e)}initSwipe(){this.elements.componentWrapper.addEventListener("touchstart",t(this,v,"m",O).bind(this)),this.elements.componentWrapper.addEventListener("touchmove",t(this,v,"m",R).bind(this)),this.elements.componentWrapper.addEventListener("touchend",t(this,v,"m",I).bind(this))}};x=new WeakMap,k=new WeakMap,j=new WeakMap,S=new WeakMap,L=new WeakMap,W=new WeakMap,$=new WeakMap,v=new WeakSet,E=function(){"SUCCESS"==t(this,L,"f")&&t(this,v,"m",N).call(this),"INFO"==t(this,L,"f")&&t(this,v,"m",M).call(this),"WARNING"==t(this,L,"f")&&t(this,v,"m",T).call(this),"ERROR"==t(this,L,"f")&&t(this,v,"m",C).call(this)},N=function(){this.elements.icon.successSymbol.querySelector(".tik").animate([{strokeDashoffset:"16px"},{strokeDashoffset:"0px"}],{duration:600,delay:0,iterations:1,easing:"cubic-bezier(0.925, 0.055, 0.595, 0.895)",composite:"replace"})},M=function(){const e=[{d:'path("M12 12 L12 12")'},{d:'path("M12 6 L12 6")'}],t=this.elements.icon.infoSymbol.querySelector(".i-dot").animate(e,{duration:500,delay:0,iterations:1,easing:"cubic-bezier(0.175, 0.885, 0.320, 1.275)",composite:"replace"});t.pause();this.elements.icon.infoSymbol.querySelector(".i-line").animate([{strokeDashoffset:"5px"},{strokeDashoffset:"0px"}],{duration:500,delay:0,iterations:1,easing:"cubic-bezier(0.925, 0.055, 0.595, 0.895)",composite:"replace"}).addEventListener("finish",(()=>{t.play()}))},T=function(){const e=[{d:'path("M12 13 L12 13")'},{d:'path("M12 17 L12 17")'}],t=this.elements.icon.warningSymbol.querySelector(".ri-dot").animate(e,{duration:500,delay:0,iterations:1,easing:"cubic-bezier(0.175, 0.885, 0.320, 1.275)",composite:"replace"});t.pause();this.elements.icon.warningSymbol.querySelector(".ri-line").animate([{strokeDashoffset:"7px"},{strokeDashoffset:"0px"}],{duration:500,delay:0,iterations:1,easing:"cubic-bezier(0.925, 0.055, 0.595, 0.895)",composite:"replace"}).addEventListener("finish",(()=>{t.play()}))},C=function(){const e=[{strokeDashoffset:"12px"},{strokeDashoffset:"0px"}],t={duration:600,delay:0,iterations:1,easing:"cubic-bezier(0.860, 0.000, 0.070, 1.000)",composite:"replace"},n=this.elements.icon.errorSymbol.querySelector(".line2").animate(e,t);n.pause(),this.elements.icon.errorSymbol.querySelector(".line1").animate(e,t).addEventListener("finish",(()=>{n.play()}))},q=function(){return new Promise((e=>{this.elements.componentWrapper.animate([{transform:"scaleY(1.0)",opacity:"1"},{transform:"scaleY(0.0)",opacity:"0"}],{duration:800,delay:0,iterations:1,easing:"cubic-bezier(0.390, 0.575, 0.565, 1.000)",composite:"replace"}).onfinish=()=>{e(null)}}))},X=function(){const e=new CustomEvent("close",{});this.dispatchEvent(e)},O=function(e){e.touches[0]?.clientX&&(t(this,$,"f").startX=e.touches[0]?.clientX,t(this,$,"f").startTime=e.timeStamp)},R=function(e){if(t(this,$,"f").startX){const n=e.touches[0].clientX;this.elements.componentWrapper.style.transform=`translateX(${n-t(this,$,"f").startX}px)`}},I=function(e){let n=null;if(t(this,$,"f").startX){const i=e.changedTouches[0].clientX-t(this,$,"f").startX;t(this,$,"f").distance=i,t(this,$,"f").endTime=e.timeStamp,n=Math.abs(i)>100?t(this,v,"m",F).call(this):t(this,v,"m",z).call(this)}n?n.then((()=>{t(this,v,"m",P).call(this)})):t(this,v,"m",P).call(this)},P=function(){t(this,$,"f").startX=null,t(this,$,"f").distance=null,t(this,$,"f").startTime=null,t(this,$,"f").endTime=null},z=function(){return new Promise((e=>{const t=this.elements.componentWrapper;t.style.transition="transform 0.3s 0s ease",setTimeout((()=>{t.style.transition="",e(null)}),300),t.style.transform=""}))},F=function(){return new Promise((e=>{t(this,v,"m",A).call(this).then((()=>{this.elements.componentWrapper.classList.remove("--show"),this.onClose(),e(null)}))}))},A=function(){const e=t(this,$,"f").endTime-t(this,$,"f").startTime;return new Promise((n=>{const i=[{transform:`translateX(${t(this,$,"f").distance}px)`,opacity:"1"},{transform:`translateX(${2*t(this,$,"f").distance}px)`,opacity:"0"}],o={duration:e,delay:0,iterations:1,composite:"replace"};this.elements.componentWrapper.animate(i,o).onfinish=()=>{n(null)}}))};!customElements.get("jb-notification")&&window.customElements.define("jb-notification",V),e.JBNotificationWebComponent=V,e.notificationTypes=D}));
//# sourceMappingURL=jb-notification.umd.js.map