jb-notification
Version:
notification web component
2 lines • 19 kB
JavaScript
function e(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 t(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 n=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 i(e){return new n({lightness:6*(3+1.3*e)*.01,chroma:.001*(14+.09*e),hue:258.36},`--jb-neutral-${e}`)}function o(e){return new n({lightness:e.lightness-.1,chroma:e.chroma-.05,hue:e.hue},`${e.variableName}-pressed`)}function s(e){const t=Math.min(e.lightness+.12*(1-e.lightness),.985),i=e.chroma*(1-.15*(t-e.lightness));return new n({lightness:t,chroma:Number(i.toFixed(3)),hue:e.hue},`${e.variableName}-l`)}function r(e){const t=Math.max(e.lightness-.12*e.lightness,.02),i=e.chroma*(1-.15*(t-e.lightness));return new n({lightness:t,chroma:i,hue:e.hue},`${e.variableName}-d`)}function a(e){const t=Math.min(e.lightness+.65*(1-e.lightness),.93),i=.55*e.chroma*(1-.08*(t-e.lightness)),o=e.hue>=70&&e.hue<=162?5:-3,s=e.hue+o;return new n({lightness:t,chroma:Number(i.toFixed(3)),hue:s},`${e.variableName}-subtle`)}function c(e){const t=Math.max(e.lightness-.35,.22),i=Math.min(1.6*e.chroma,.28);return new n({lightness:Number(t.toFixed(3)),chroma:Number(i.toFixed(3)),hue:e.hue},`${e.variableName}-contrast`)}function l(e){return{main:e,hover:(t=e,new n({lightness:t.lightness+.07,chroma:t.chroma+.07,hue:t.hue},`${t.variableName}-hover`)),pressed:o(e),light:s(e),dark:r(e),subtle:a(e),contrast:c(e)};var t}const h=new n({lightness:.6,chroma:.26,hue:256},"--jb-primary"),m=new n({lightness:.6,chroma:.26,hue:286},"--jb-secondary"),p=new n({lightness:.75,chroma:.18,hue:70},"--jb-yellow"),d=new n({lightness:.68,chroma:.1484,hue:162.1},"--jb-green"),b=new n({lightness:.6,chroma:.22,hue:23.21},"--jb-red"),f={single:{black:new n({lightness:.14,chroma:0,hue:0},"--jb-black"),white:new n({lightness:1,chroma:0,hue:0},"--jb-white"),highlight:new n({lightness:.93,chroma:.2302,hue:125.18},"--jb-highlight")},neutral:[i(0),i(1),i(2),i(3),i(4),i(5),i(6),i(7),i(8),i(9),i(10)],primary:l(h),secondary:l(m),yellow:l(p),green:l(d),red:l(b)};function u(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 w(e,t){u({name:t??e.variableName,syntax:"<color>",inherits:!0,initialValue:e.value})}function y(){var e;u({name:"--jb-radius",inherits:!0,value:"1rem",initialValue:"16px",syntax:"<length-percentage>"}),u({name:"--jb-radius-xs",inherits:!0,value:"0.5rem",initialValue:"8px",syntax:"<length-percentage>"}),u({name:"--jb-radius-sm",inherits:!0,value:"0.75rem",initialValue:"12px",syntax:"<length-percentage>"}),u({name:"--jb-radius-lg",inherits:!0,value:"1.25rem",initialValue:"20px",syntax:"<length-percentage>"}),u({name:"--jb-radius-xl",inherits:!0,value:"1.5rem",initialValue:"24px",syntax:"<length-percentage>"}),function(e){w(e.neutral[0],"--jb-neutral"),w(e.primary.main),w(e.secondary.main),w(e.single.black),w(e.single.white),w(e.single.highlight),w(e.yellow.main),w(e.green.main),w(e.red.main),w(e.red.main);for(let t=1;t<=10;t++)w(e.neutral[t])}(f),w((e=f).single.black,"--jb-text-primary"),w(e.neutral[7],"--jb-text-secondary"),w(e.single.white,"--jb-text-contrast")}var g,v,x,k,j,S,L,W,E,N,M,T,C,q,X,$,O,R,I,P,z,F;const A=["ERROR","INFO","SUCCESS","WARNING"];var D=class extends HTMLElement{get title(){return e(this,x,"f")}set title(e){t(this,x,e,"f"),this.elements.titleWrapper.innerText=e}get description(){return e(this,k,"f")}set description(e){t(this,k,e,"f"),this.elements.descWrapper.innerText=e||""}get type(){return e(this,S,"f")}set type(e){A.includes(e)?(t(this,S,e,"f"),this.updateUIBaseOnType(e)):console.error(`type ${e} is not a valid NotificationType`)}get state(){return e(this,v,"f")}constructor(){super(),g.add(this),v.set(this,"CLOSE"),x.set(this,""),k.set(this,null),j.set(this,3e3),S.set(this,"INFO"),L.set(this,null),X.set(this,{startX:null,startTime:null,distance:null,endTime:null}),this.initWebComponent(),this.type="INFO"}initWebComponent(){const e=this.attachShadow({mode:"open"});y();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(){t(this,v,"OPEN","f"),this.elements.componentWrapper.classList.add("--show"),e(this,g,"m",W).call(this),t(this,L,setTimeout((()=>{this.hide()}),e(this,j,"f")),"f")}hide(){e(this,g,"m",C).call(this).then((()=>{this.elements.componentWrapper.classList.remove("--show"),this.onClose()}))}onClose(){t(this,v,"CLOSE","f"),e(this,L,"f")&&clearInterval(e(this,L,"f")),e(this,g,"m",q).call(this)}updateDom(){}onTimerFinished(){const e=new CustomEvent("finish",{});this.dispatchEvent(e)}initSwipe(){this.elements.componentWrapper.addEventListener("touchstart",e(this,g,"m",$).bind(this)),this.elements.componentWrapper.addEventListener("touchmove",e(this,g,"m",O).bind(this)),this.elements.componentWrapper.addEventListener("touchend",e(this,g,"m",R).bind(this))}};v=new WeakMap,x=new WeakMap,k=new WeakMap,j=new WeakMap,S=new WeakMap,L=new WeakMap,X=new WeakMap,g=new WeakSet,W=function(){"SUCCESS"==e(this,S,"f")&&e(this,g,"m",E).call(this),"INFO"==e(this,S,"f")&&e(this,g,"m",N).call(this),"WARNING"==e(this,S,"f")&&e(this,g,"m",M).call(this),"ERROR"==e(this,S,"f")&&e(this,g,"m",T).call(this)},E=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"})},N=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()}))},M=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()}))},T=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()}))},C=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)}}))},q=function(){const e=new CustomEvent("close",{});this.dispatchEvent(e)},$=function(t){t.touches[0]?.clientX&&(e(this,X,"f").startX=t.touches[0]?.clientX,e(this,X,"f").startTime=t.timeStamp)},O=function(t){if(e(this,X,"f").startX){const n=t.touches[0].clientX;this.elements.componentWrapper.style.transform=`translateX(${n-e(this,X,"f").startX}px)`}},R=function(t){let n=null;if(e(this,X,"f").startX){const i=t.changedTouches[0].clientX-e(this,X,"f").startX;e(this,X,"f").distance=i,e(this,X,"f").endTime=t.timeStamp,n=Math.abs(i)>100?e(this,g,"m",z).call(this):e(this,g,"m",P).call(this)}n?n.then((()=>{e(this,g,"m",I).call(this)})):e(this,g,"m",I).call(this)},I=function(){e(this,X,"f").startX=null,e(this,X,"f").distance=null,e(this,X,"f").startTime=null,e(this,X,"f").endTime=null},P=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=""}))},z=function(){return new Promise((t=>{e(this,g,"m",F).call(this).then((()=>{this.elements.componentWrapper.classList.remove("--show"),this.onClose(),t(null)}))}))},F=function(){const t=e(this,X,"f").endTime-e(this,X,"f").startTime;return new Promise((n=>{const i=[{transform:`translateX(${e(this,X,"f").distance}px)`,opacity:"1"},{transform:`translateX(${2*e(this,X,"f").distance}px)`,opacity:"0"}],o={duration:t,delay:0,iterations:1,composite:"replace"};this.elements.componentWrapper.animate(i,o).onfinish=()=>{n(null)}}))};!customElements.get("jb-notification")&&window.customElements.define("jb-notification",D),exports.JBNotificationWebComponent=D,exports.notificationTypes=A;
//# sourceMappingURL=jb-notification.cjs.js.map