@govtechsg/sgds-web-component 3.10.0-rc.4 → 3.10.0

package/components/SystemBanner/index.umd.min.js

@@ -2131,7 +2131,7 @@ class ct{constructor(e,t,l,i){if(this.subscribe=!1,this.provided=!1,this.value=v
    * @license
    * Copyright 2022 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
-   */function pt({context:e,subscribe:t}){return(l,i)=>{"object"==typeof i?i.addInitializer(function(){new ct(this,{context:e,callback:e=>{l.set.call(this,e)},subscribe:t})}):l.constructor.addInitializer(l=>{new ct(l,{context:e,callback:e=>{l[i]=e},subscribe:t})})}}const ut="no-clamp-action-context",wt="system-banner-children-count-context";class ft extends Ee{constructor(){super(...arguments),this.show=!1,this.dismissible=!1,this.fluid=!1,this.noClampAction=!1,this._intervalId=null,this._intervalTime=5e3,this._currentIndex=0}close(){this.show=!1}firstUpdated(e){super.firstUpdated(e),this.childCount=this.bannerItem.length,this.show?(this.childCount>1&&this._startAutoCycle(),this.addEventListener("mouseenter",this._pauseAutoCycle.bind(this)),this.addEventListener("mouseleave",this._resumeAutoCycle.bind(this)),this.addEventListener("focus",this._pauseAutoCycle.bind(this)),this.addEventListener("blur",this._resumeAutoCycle.bind(this))):this.banner.classList.add("d-none"),this._updateActiveItem(),this.childCount>5&&console.warn("It is not recommended to have more than 5 <sgds-system-banner-item> elements.")}disconnectedCallback(){super.disconnectedCallback(),this._stopAutoCycle()}async _handleShowChange(){this.show?(this.childCount>1&&this._startAutoCycle(),this.emit("sgds-show"),this.banner.classList.remove("d-none")):(this._stopAutoCycle(),this.emit("sgds-hide"),this.banner.classList.add("d-none"))}_updateActiveItem(){this.bannerItem.forEach((e,t)=>{t===this._currentIndex?e.setAttribute("active",""):e.removeAttribute("active")})}_next(){const e=this.bannerItem;this._currentIndex=(this._currentIndex+1)%e.length,this._updateActiveItem(),this._animateItem(e[this._currentIndex],"next"),this._resetAutoCycle()}_prev(){const e=this.bannerItem;this._currentIndex=(this._currentIndex-1+e.length)%e.length,this._updateActiveItem(),this._animateItem(e[this._currentIndex],"prev"),this._resetAutoCycle()}async _animateItem(e,t){e.getAnimations().forEach(e=>e.cancel());const l=function(e,t){const l=Re.get(e);if(null==l?void 0:l[t])return l[t];return Ue.get(t)||{keyframes:[],options:{duration:0}}}(this,`banner.item.${t}`);var i,a,s;await(i=e,a=l.keyframes,s=l.options,new Promise(e=>{if((null==s?void 0:s.duration)===1/0)throw new Error("Promise-based animations must be finite.");const t=i.animate(a,Object.assign(Object.assign({},s),{duration:Oe()?0:null==s?void 0:s.duration}));t.addEventListener("cancel",e,{once:!0}),t.addEventListener("finish",e,{once:!0})}))}_startAutoCycle(){this._stopAutoCycle(),this._intervalId=setInterval(()=>this._next(),this._intervalTime)}_stopAutoCycle(){this._intervalId&&(clearInterval(this._intervalId),this._intervalId=null)}_resetAutoCycle(){this._stopAutoCycle(),this._startAutoCycle()}_pauseAutoCycle(){this._stopAutoCycle()}_resumeAutoCycle(){this.show&&this.childCount>1&&this._startAutoCycle()}render(){return Q`
+   */function pt({context:e,subscribe:t}){return(l,i)=>{"object"==typeof i?i.addInitializer(function(){new ct(this,{context:e,callback:e=>{l.set.call(this,e)},subscribe:t})}):l.constructor.addInitializer(l=>{new ct(l,{context:e,callback:e=>{l[i]=e},subscribe:t})})}}const ut="no-clamp-action-context",wt="system-banner-children-count-context";class ft extends Ee{constructor(){super(...arguments),this.show=!1,this.dismissible=!1,this.noClampAction=!1,this.fluid=!1,this._intervalId=null,this._intervalTime=5e3,this._currentIndex=0}close(){this.show=!1}firstUpdated(e){super.firstUpdated(e),this.childCount=this.bannerItem.length,this.show?(this.childCount>1&&this._startAutoCycle(),this.addEventListener("mouseenter",this._pauseAutoCycle.bind(this)),this.addEventListener("mouseleave",this._resumeAutoCycle.bind(this)),this.addEventListener("focus",this._pauseAutoCycle.bind(this)),this.addEventListener("blur",this._resumeAutoCycle.bind(this))):this.banner.classList.add("d-none"),this._updateActiveItem(),this.childCount>5&&console.warn("It is not recommended to have more than 5 <sgds-system-banner-item> elements.")}disconnectedCallback(){super.disconnectedCallback(),this._stopAutoCycle()}async _handleShowChange(){this.show?(this.childCount>1&&this._startAutoCycle(),this.emit("sgds-show"),this.banner.classList.remove("d-none")):(this._stopAutoCycle(),this.emit("sgds-hide"),this.banner.classList.add("d-none"))}_updateActiveItem(){this.bannerItem.forEach((e,t)=>{t===this._currentIndex?e.setAttribute("active",""):e.removeAttribute("active")})}_next(){const e=this.bannerItem;this._currentIndex=(this._currentIndex+1)%e.length,this._updateActiveItem(),this._animateItem(e[this._currentIndex],"next"),this._resetAutoCycle()}_prev(){const e=this.bannerItem;this._currentIndex=(this._currentIndex-1+e.length)%e.length,this._updateActiveItem(),this._animateItem(e[this._currentIndex],"prev"),this._resetAutoCycle()}async _animateItem(e,t){e.getAnimations().forEach(e=>e.cancel());const l=function(e,t){const l=Re.get(e);if(null==l?void 0:l[t])return l[t];return Ue.get(t)||{keyframes:[],options:{duration:0}}}(this,`banner.item.${t}`);var i,a,s;await(i=e,a=l.keyframes,s=l.options,new Promise(e=>{if((null==s?void 0:s.duration)===1/0)throw new Error("Promise-based animations must be finite.");const t=i.animate(a,Object.assign(Object.assign({},s),{duration:Oe()?0:null==s?void 0:s.duration}));t.addEventListener("cancel",e,{once:!0}),t.addEventListener("finish",e,{once:!0})}))}_startAutoCycle(){this._stopAutoCycle(),this._intervalId=setInterval(()=>this._next(),this._intervalTime)}_stopAutoCycle(){this._intervalId&&(clearInterval(this._intervalId),this._intervalId=null)}_resetAutoCycle(){this._stopAutoCycle(),this._startAutoCycle()}_pauseAutoCycle(){this._stopAutoCycle()}_resumeAutoCycle(){this.show&&this.childCount>1&&this._startAutoCycle()}render(){return Q`
       <div class="banner-wrapper">
         <div
           class="${Le({banner:!0})}"
@@ -2167,7 +2167,7 @@ class ct{constructor(e,t,l,i){if(this.subscribe=!1,this.provided=!1,this.value=v
               `:le}
         </div>
       </div>
-    `}}var mt;ft.styles=[...Ee.styles,rt],ft.dependencies={"sgds-close-button":Ie,"sgds-icon":je,"sgds-icon-button":ot},e([Ve({type:Boolean,reflect:!0})],ft.prototype,"show",void 0),e([Ve({type:Boolean,reflect:!0})],ft.prototype,"dismissible",void 0),e([Ve({type:Boolean,reflect:!0})],ft.prototype,"fluid",void 0),e([gt({context:ut}),Ve({type:Boolean})],ft.prototype,"noClampAction",void 0),e([(mt={flatten:!0},(e,t)=>{const{slot:l,selector:i}=mt??{},a="slot"+(l?`[name=${l}]`:":not([name])");return $e(e,t,{get(){const e=this.renderRoot?.querySelector(a),t=e?.assignedElements(mt)??[];return void 0===i?t:t.filter(e=>e.matches(i))}})})],ft.prototype,"bannerItem",void 0),e([Se(".banner")],ft.prototype,"banner",void 0),e([gt({context:wt}),He()],ft.prototype,"childCount",void 0),e([He()],ft.prototype,"_intervalId",void 0),e([He()],ft.prototype,"_currentIndex",void 0),e([function(e,t){const l=Object.assign({waitUntilFirstUpdate:!1},t);return(t,i)=>{const{update:a}=t;if(e in t){const s=e;t.update=function(e){if(e.has(s)){const t=e.get(s),a=this[s];t!==a&&(l.waitUntilFirstUpdate&&!this.hasUpdated||this[i](t,a))}a.call(this,e)}}}}("show",{waitUntilFirstUpdate:!0})],ft.prototype,"_handleShowChange",null),De("banner.item.next",{keyframes:[{opacity:0,transform:"translateY(-100%)"},{opacity:1,transform:"translateY(0)"}],options:{duration:500,easing:"cubic-bezier(0.45,0.05,0.55,0.95)"}}),De("banner.item.prev",{keyframes:[{opacity:0,transform:"translateY(100%)"},{opacity:1,transform:"translateY(0)"}],options:{duration:500,easing:"cubic-bezier(0.45,0.05,0.55,0.95)"}});var bt=o`:host{display:block;font-size:var(--sgds-font-size-14,14px);font-style:normal;font-weight:var(--sgds-font-weight-regular,400);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-20,20px);width:inherit}::slotted(:not(sgds-icon)){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;line-height:var(--sgds-line-height-20,20px)!important}.banner-item{color:var(--sgds-color-fixed-light);display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-2-xs) 0}.message{line-clamp:5;-webkit-line-clamp:5;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*5);overflow:hidden;word-break:break-word}.message.truncated:after{background-color:var(--sgds-surface-fixed-dark);bottom:0;content:"";height:var(--sgds-line-height-20,20px);position:absolute;right:0;text-align:right;width:10ch}.clamped-container{display:inline-block;margin-right:var(--sgds-margin-2-xl);max-width:var(--sgds-dimension-872);position:relative}.show-more{bottom:0;position:absolute;right:0;white-space:nowrap}.show-more__link{cursor:pointer;text-decoration:underline}.action{align-items:center;display:flex;gap:var(--sgds-gap-2-xs,4px);margin-top:6px;min-height:var(--sgds-line-height-20);white-space:nowrap}slot[name=action]::slotted(a){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;text-decoration:none!important}.banner-item__message_and__action{display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-xs)}@media (min-width:512px){.banner-item__message_and__action{flex-direction:row;gap:var(--sgds-gap-sm)}.action{margin-left:auto;margin-top:0}.message{line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*2)}}`;class xt{constructor(e,...t){this.slotNames=[],(this.host=e).addController(this),this.slotNames=t,this.handleSlotChange=this.handleSlotChange.bind(this)}hasDefaultSlot(){return[...this.host.childNodes].some(e=>{var t;if(e.nodeType===e.TEXT_NODE&&""!==(null===(t=e.textContent)||void 0===t?void 0:t.trim()))return!0;if(e.nodeType===e.ELEMENT_NODE){const t=e;if("sl-visually-hidden"===t.tagName.toLowerCase())return!1;if(!t.hasAttribute("slot"))return!0}return!1})}hasNamedSlot(e){return null!==this.host.querySelector(`:scope > [slot="${e}"]`)}test(e){return"[default]"===e?this.hasDefaultSlot():this.hasNamedSlot(e)}hostConnected(){var e;null===(e=this.host.shadowRoot)||void 0===e||e.addEventListener("slotchange",this.handleSlotChange)}hostDisconnected(){var e;null===(e=this.host.shadowRoot)||void 0===e||e.removeEventListener("slotchange",this.handleSlotChange)}handleSlotChange(e){const t=e.target;(this.slotNames.includes("[default]")&&!t.name||t.name&&this.slotNames.includes(t.name))&&this.host.requestUpdate()}}class Zt extends Ee{constructor(){super(...arguments),this.hasActionSlot=!1,this.noClampAction=!1,this.clamped=!1,this.siblingsCount=0,this.hasSlotController=new xt(this,"action")}async firstUpdated(e){super.firstUpdated(e),await this.updateComplete,this._clampCheck(),this._resizeObserver=new ResizeObserver(()=>this._clampCheck()),this._resizeObserver.observe(this.shadowRoot.querySelector(".message"))}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect()}updated(){this.hasActionSlot||(this.hasActionSlot=this.hasSlotController.test("action"))}_clampCheck(){const e=this.shadowRoot.querySelector(".message");requestAnimationFrame(()=>{this.clamped=e.scrollHeight>e.clientHeight})}_handleShowMoreClick(){this.emit("sgds-show-more")}render(){return Q`
+    `}}var mt;ft.styles=[...Ee.styles,rt],ft.dependencies={"sgds-close-button":Ie,"sgds-icon":je,"sgds-icon-button":ot},e([Ve({type:Boolean,reflect:!0})],ft.prototype,"show",void 0),e([Ve({type:Boolean,reflect:!0})],ft.prototype,"dismissible",void 0),e([gt({context:ut}),Ve({type:Boolean})],ft.prototype,"noClampAction",void 0),e([Ve({type:Boolean,reflect:!0})],ft.prototype,"fluid",void 0),e([(mt={flatten:!0},(e,t)=>{const{slot:l,selector:i}=mt??{},a="slot"+(l?`[name=${l}]`:":not([name])");return $e(e,t,{get(){const e=this.renderRoot?.querySelector(a),t=e?.assignedElements(mt)??[];return void 0===i?t:t.filter(e=>e.matches(i))}})})],ft.prototype,"bannerItem",void 0),e([Se(".banner")],ft.prototype,"banner",void 0),e([gt({context:wt}),He()],ft.prototype,"childCount",void 0),e([He()],ft.prototype,"_intervalId",void 0),e([He()],ft.prototype,"_currentIndex",void 0),e([function(e,t){const l=Object.assign({waitUntilFirstUpdate:!1},t);return(t,i)=>{const{update:a}=t;if(e in t){const s=e;t.update=function(e){if(e.has(s)){const t=e.get(s),a=this[s];t!==a&&(l.waitUntilFirstUpdate&&!this.hasUpdated||this[i](t,a))}a.call(this,e)}}}}("show",{waitUntilFirstUpdate:!0})],ft.prototype,"_handleShowChange",null),De("banner.item.next",{keyframes:[{opacity:0,transform:"translateY(-100%)"},{opacity:1,transform:"translateY(0)"}],options:{duration:500,easing:"cubic-bezier(0.45,0.05,0.55,0.95)"}}),De("banner.item.prev",{keyframes:[{opacity:0,transform:"translateY(100%)"},{opacity:1,transform:"translateY(0)"}],options:{duration:500,easing:"cubic-bezier(0.45,0.05,0.55,0.95)"}});var bt=o`:host{display:block;font-size:var(--sgds-font-size-14,14px);font-style:normal;font-weight:var(--sgds-font-weight-regular,400);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-20,20px);width:inherit}::slotted(:not(sgds-icon)){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;line-height:var(--sgds-line-height-20,20px)!important}.banner-item{color:var(--sgds-color-fixed-light);display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-2-xs) 0}.message{line-clamp:5;-webkit-line-clamp:5;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*5);overflow:hidden;word-break:break-word}.message.truncated:after{background-color:var(--sgds-surface-fixed-dark);bottom:0;content:"";height:var(--sgds-line-height-20,20px);position:absolute;right:0;text-align:right;width:10ch}.clamped-container{display:inline-block;margin-right:var(--sgds-margin-2-xl);max-width:var(--sgds-dimension-872);position:relative}.show-more{bottom:0;position:absolute;right:0;white-space:nowrap}.show-more__link{cursor:pointer;text-decoration:underline}.action{align-items:center;display:flex;gap:var(--sgds-gap-2-xs,4px);margin-top:6px;min-height:var(--sgds-line-height-20);white-space:nowrap}slot[name=action]::slotted(a){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-14,14px)!important;text-decoration:none!important}.banner-item__message_and__action{display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-xs)}@media (min-width:512px){.banner-item__message_and__action{flex-direction:row;gap:var(--sgds-gap-sm)}.action{margin-left:auto;margin-top:0}.message{line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*2)}}`;class xt{constructor(e,...t){this.slotNames=[],(this.host=e).addController(this),this.slotNames=t,this.handleSlotChange=this.handleSlotChange.bind(this)}hasDefaultSlot(){return[...this.host.childNodes].some(e=>{var t;if(e.nodeType===e.TEXT_NODE&&""!==(null===(t=e.textContent)||void 0===t?void 0:t.trim()))return!0;if(e.nodeType===e.ELEMENT_NODE){const t=e;if("sl-visually-hidden"===t.tagName.toLowerCase())return!1;if(!t.hasAttribute("slot"))return!0}return!1})}hasNamedSlot(e){return null!==this.host.querySelector(`:scope > [slot="${e}"]`)}test(e){return"[default]"===e?this.hasDefaultSlot():this.hasNamedSlot(e)}hostConnected(){var e;null===(e=this.host.shadowRoot)||void 0===e||e.addEventListener("slotchange",this.handleSlotChange)}hostDisconnected(){var e;null===(e=this.host.shadowRoot)||void 0===e||e.removeEventListener("slotchange",this.handleSlotChange)}handleSlotChange(e){const t=e.target;(this.slotNames.includes("[default]")&&!t.name||t.name&&this.slotNames.includes(t.name))&&this.host.requestUpdate()}}class Zt extends Ee{constructor(){super(...arguments),this.hasActionSlot=!1,this.noClampAction=!1,this.clamped=!1,this.siblingsCount=0,this.hasSlotController=new xt(this,"action")}async firstUpdated(e){super.firstUpdated(e),await this.updateComplete,this._clampCheck(),this._resizeObserver=new ResizeObserver(()=>this._clampCheck()),this._resizeObserver.observe(this.shadowRoot.querySelector(".message"))}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver&&this._resizeObserver.disconnect()}updated(){this.hasActionSlot||(this.hasActionSlot=this.hasSlotController.test("action"))}_clampCheck(){const e=this.shadowRoot.querySelector(".message");requestAnimationFrame(()=>{this.clamped=e.scrollHeight>e.clientHeight})}_handleShowMoreClick(){this.emit("sgds-show-more")}render(){return Q`
       <div class="banner-item">
         <slot name="icon"></slot>
         <div class="banner-item__message_and__action">