@govtechsg/sgds-web-component 3.15.0 → 3.15.1-rc.1

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

@@ -52,7 +52,7 @@ const Ae=1;class Le{constructor(e){}get _$isConnected(){return this._$parent._$i
    * @license
    * Copyright 2018 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
-   */const Re=(We=class extends Le{constructor(e){if(super(e),e.type!==Ae||"class"!==e.name||e.strings?.length>2)throw new Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(e){return" "+Object.keys(e).filter(t=>e[t]).join(" ")+" "}update(e,[t]){if(void 0===this._previousClasses){this._previousClasses=new Set,void 0!==e.strings&&(this._staticClasses=new Set(e.strings.join(" ").split(/\s/).filter(e=>""!==e)));for(const e in t)t[e]&&!this._staticClasses?.has(e)&&this._previousClasses.add(e);return this.render(t)}const s=e.element.classList;for(const e of this._previousClasses)e in t||(s.remove(e),this._previousClasses.delete(e));for(const e in t){const i=!!t[e];i===this._previousClasses.has(e)||this._staticClasses?.has(e)||(i?(s.add(e),this._previousClasses.add(e)):(s.remove(e),this._previousClasses.delete(e)))}return te}},(...e)=>({_$litDirective$:We,values:e}));var We;function De(e,t,s){return new Promise(i=>{if((null==s?void 0:s.duration)===1/0)throw new Error("Promise-based animations must be finite.");const n=e.animate(t,Object.assign(Object.assign({},s),{duration:Ie()?0:null==s?void 0:s.duration}));n.addEventListener("cancel",i,{once:!0}),n.addEventListener("finish",i,{once:!0})})}function Ie(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}function je(e,t){return e.map(e=>Object.assign(Object.assign({},e),{height:"auto"===e.height?`${t}px`:e.height}))}function qe(e){return Promise.all(e.getAnimations().map(e=>new Promise(t=>{const s=requestAnimationFrame(t);e.addEventListener("cancel",()=>s,{once:!0}),e.addEventListener("finish",()=>s,{once:!0}),e.cancel()})))}const He=new Map,Fe=new WeakMap;function Be(e,t){const s=Fe.get(e);if(null==s?void 0:s[t])return s[t];const i=He.get(t);return i||{keyframes:[],options:{duration:0}}}function Ze(e,t){He.set(e,function(e){return null!=e?e:{keyframes:[],options:{duration:0}}}(t))}function Je(e,t){return new Promise(s=>{e.addEventListener(t,function i(n){n.target===e&&(e.removeEventListener(t,i),s())})})}var Ke=r`:host([variant=border][last-of-type]) .accordion-item{border-bottom:none}:host([density=compact]) .accordion-btn{font-size:var(--sgds-font-size-16);line-height:var(--sgds-line-height-20);padding:var(--sgds-padding-sm) var(--sgds-padding-sm)}:host([density=compact]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-sm) var(--sgds-padding-sm)}.accordion-item{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.accordion-btn{align-items:center;background-color:var(--sgds-bg-transparent);border:0;color:var(--sgds-color-default);display:flex;font-size:var(--sgds-font-size-20);gap:var(--sgds-gap-sm);line-height:var(--sgds-line-height-24);overflow-anchor:none;padding:var(--sgds-padding-lg) var(--sgds-padding-lg);text-align:left;width:100%}@media (prefers-reduced-motion:reduce){.accordion-btn,.accordion-btn:after{transition:none}}.accordion-btn:not(.collapsed){font-weight:var(--sgds-font-weight-semibold)}.accordion-btn:not(.disabled):hover,.accordion-btn:not(:disabled):hover{background-color:var(--sgds-bg-translucent-subtle);z-index:2}.accordion-btn:not(.disabled):focus,.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus,.accordion-btn:not(:disabled):focus-visible{background-color:var(--sgds-bg-translucent-subtle);z-index:3}.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.accordion-btn.disabled,.accordion-btn:disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}slot[name=caret] sgds-icon,slot[name=caret]::slotted(*){color:var(--sgds-color-subtle);margin-left:auto;transition:transform .2s ease-in-out}.accordion-btn:not(.collapsed) slot[name=caret] sgds-icon,.accordion-btn:not(.collapsed) slot[name=caret]::slotted(*){transform:rotate(-180deg)}.accordion-body{overflow:hidden;padding:0}.content{display:block;padding:var(--sgds-padding-xs) var(--sgds-padding-lg) var(--sgds-padding-lg)}.hidden{display:none}`;class Ye extends Ue{constructor(){super(...arguments),this.open=!1,this.disabled=!1}handleSummaryClick(){this.open?this.hide():this.show(),this.header.focus()}handleSummaryKeyDown(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.open?this.hide():this.show()),"ArrowUp"!==e.key&&"ArrowLeft"!==e.key||(e.preventDefault(),this.hide()),"ArrowDown"!==e.key&&"ArrowRight"!==e.key||(e.preventDefault(),this.show())}async handleOpenChange(){if(this.open){if(this.emit("sgds-show",{cancelable:!0}).defaultPrevented)return void(this.open=!1);await qe(this.body),this.body.classList.remove("hidden");const{keyframes:e,options:t}=Be(this,"accordion.show");await De(this.body,je(e,this.body.scrollHeight),t),this.emit("sgds-after-show")}else{if(this.emit("sgds-hide",{cancelable:!0}).defaultPrevented)return void(this.open=!0);await qe(this.body);const{keyframes:e,options:t}=Be(this,"accordion.hide"),s=t.duration;setTimeout(()=>{this.body.classList.add("hidden")},s-20),await De(this.body,je(e,this.body.scrollHeight),t),this.emit("sgds-after-hide")}}async show(){if(!this.open)return this.open=!0,Je(this,"sgds-after-show")}async hide(){if(this.open)return this.open=!1,Je(this,"sgds-after-hide")}render(){const e=this.hasUpdated;return Q`
+   */const Re=(We=class extends Le{constructor(e){if(super(e),e.type!==Ae||"class"!==e.name||e.strings?.length>2)throw new Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(e){return" "+Object.keys(e).filter(t=>e[t]).join(" ")+" "}update(e,[t]){if(void 0===this._previousClasses){this._previousClasses=new Set,void 0!==e.strings&&(this._staticClasses=new Set(e.strings.join(" ").split(/\s/).filter(e=>""!==e)));for(const e in t)t[e]&&!this._staticClasses?.has(e)&&this._previousClasses.add(e);return this.render(t)}const s=e.element.classList;for(const e of this._previousClasses)e in t||(s.remove(e),this._previousClasses.delete(e));for(const e in t){const i=!!t[e];i===this._previousClasses.has(e)||this._staticClasses?.has(e)||(i?(s.add(e),this._previousClasses.add(e)):(s.remove(e),this._previousClasses.delete(e)))}return te}},(...e)=>({_$litDirective$:We,values:e}));var We;function De(e,t,s){return new Promise(i=>{if((null==s?void 0:s.duration)===1/0)throw new Error("Promise-based animations must be finite.");const n=e.animate(t,Object.assign(Object.assign({},s),{duration:Ie()?0:null==s?void 0:s.duration}));n.addEventListener("cancel",i,{once:!0}),n.addEventListener("finish",i,{once:!0})})}function Ie(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}function je(e,t){return e.map(e=>Object.assign(Object.assign({},e),{height:"auto"===e.height?`${t}px`:e.height}))}function qe(e){return Promise.all(e.getAnimations().map(e=>new Promise(t=>{const s=requestAnimationFrame(t);e.addEventListener("cancel",()=>s,{once:!0}),e.addEventListener("finish",()=>s,{once:!0}),e.cancel()})))}const He=new Map,Fe=new WeakMap;function Be(e,t){const s=Fe.get(e);if(null==s?void 0:s[t])return s[t];const i=He.get(t);return i||{keyframes:[],options:{duration:0}}}function Ze(e,t){He.set(e,function(e){return null!=e?e:{keyframes:[],options:{duration:0}}}(t))}function Je(e,t){return new Promise(s=>{e.addEventListener(t,function i(n){n.target===e&&(e.removeEventListener(t,i),s())})})}var Ke=r`:host([variant=border][last-of-type]) .accordion-item{border-bottom:none}:host([density=compact]) .accordion-btn{font-size:var(--sgds-font-size-16);line-height:var(--sgds-line-height-20);padding:var(--sgds-padding-sm) var(--sgds-padding-sm)}:host([density=compact]) .content{padding:var(--sgds-padding-xs) var(--sgds-padding-sm) var(--sgds-padding-sm)}.accordion-item{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.accordion-btn{align-items:center;background-color:var(--sgds-bg-transparent);border:0;color:var(--sgds-color-default);display:flex;font-size:var(--sgds-font-size-20);gap:var(--sgds-gap-sm);line-height:var(--sgds-line-height-24);overflow-anchor:none;padding:var(--sgds-padding-lg) var(--sgds-padding-lg);text-align:left;width:100%}@media (prefers-reduced-motion:reduce){.accordion-btn,.accordion-btn:after{transition:none}}.accordion-btn:not(.collapsed){font-weight:var(--sgds-font-weight-semibold)}.accordion-btn:not(.disabled):hover,.accordion-btn:not(:disabled):hover{background-color:var(--sgds-bg-translucent-subtle);z-index:2}.accordion-btn:not(.disabled):focus,.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus,.accordion-btn:not(:disabled):focus-visible{background-color:var(--sgds-bg-translucent-subtle);z-index:3}.accordion-btn:not(.disabled):focus-visible,.accordion-btn:not(:disabled):focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.accordion-btn.disabled,.accordion-btn:disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}slot[name=caret] sgds-icon,slot[name=caret]::slotted(*){color:var(--sgds-color-subtle);margin-left:auto;transition:transform .2s ease-in-out}.accordion-btn:not(.collapsed) slot[name=caret] sgds-icon,.accordion-btn:not(.collapsed) slot[name=caret]::slotted(*){transform:rotate(-180deg)}.accordion-body{overflow:hidden;padding:0}.content{display:block;padding:var(--sgds-padding-xs) var(--sgds-padding-lg) var(--sgds-padding-lg)}.hidden{display:none}`;class Ye extends Ue{constructor(){super(...arguments),this.open=!1,this.disabled=!1,this.density="default"}handleSummaryClick(){this.open?this.hide():this.show(),this.header.focus()}handleSummaryKeyDown(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.open?this.hide():this.show()),"ArrowUp"!==e.key&&"ArrowLeft"!==e.key||(e.preventDefault(),this.hide()),"ArrowDown"!==e.key&&"ArrowRight"!==e.key||(e.preventDefault(),this.show())}async handleOpenChange(){if(this.open){if(this.emit("sgds-show",{cancelable:!0}).defaultPrevented)return void(this.open=!1);await qe(this.body),this.body.classList.remove("hidden");const{keyframes:e,options:t}=Be(this,"accordion.show");await De(this.body,je(e,this.body.scrollHeight),t),this.emit("sgds-after-show")}else{if(this.emit("sgds-hide",{cancelable:!0}).defaultPrevented)return void(this.open=!0);await qe(this.body);const{keyframes:e,options:t}=Be(this,"accordion.hide"),s=t.duration;setTimeout(()=>{this.body.classList.add("hidden")},s-20),await De(this.body,je(e,this.body.scrollHeight),t),this.emit("sgds-after-hide")}}async show(){if(!this.open)return this.open=!0,Je(this,"sgds-after-show")}async hide(){if(this.open)return this.open=!1,Je(this,"sgds-after-hide")}render(){const e=this.hasUpdated;return Q`
       <div class="accordion-item">
         <button
           class=${Re({"accordion-btn":!0,disabled:this.disabled,collapsed:!this.open})}
@@ -67,7 +67,7 @@ const Ae=1;class Le{constructor(e){}get _$isConnected(){return this._$parent._$i
         >
           <slot name="header"></slot>
           <slot name="caret">
-            <sgds-icon name="chevron-down" size=${"compact"===this.getAttribute("density")?"md":"lg"}></sgds-icon>
+            <sgds-icon name="chevron-down" size=${"compact"===this.density?"md":"lg"}></sgds-icon>
           </slot>
         </button>
         <div
@@ -76,5 +76,5 @@ const Ae=1;class Le{constructor(e){}get _$isConnected(){return this._$parent._$i
           <slot id="content" name="content" class="content" role="region" aria-labelledby="header"></slot>
         </div>
       </div>
-    `}}function Xe(e,t){customElements.get(e)||customElements.define(e,t)}Ye.styles=[...Ue.styles,Ke],e([Te(".accordion-item")],Ye.prototype,"accordion",void 0),e([Te(".accordion-btn")],Ye.prototype,"header",void 0),e([Te(".accordion-body")],Ye.prototype,"body",void 0),e([Ce({type:Boolean,reflect:!0})],Ye.prototype,"open",void 0),e([Ce({type:Boolean,reflect:!0})],Ye.prototype,"disabled",void 0),e([function(e,t){const s=Object.assign({waitUntilFirstUpdate:!1},t);return(t,i)=>{const{update:n}=t;if(e in t){const o=e;t.update=function(e){if(e.has(o)){const t=e.get(o),n=this[o];t!==n&&(s.waitUntilFirstUpdate&&!this.hasUpdated||this[i](t,n))}n.call(this,e)}}}}("open",{waitUntilFirstUpdate:!0})],Ye.prototype,"handleOpenChange",null),Ze("accordion.show",{keyframes:[{height:"0",opacity:"0"},{height:"auto",opacity:"1"}],options:{duration:350,easing:"ease-in-out"}}),Ze("accordion.hide",{keyframes:[{height:"auto",opacity:"1"},{height:"0",opacity:"0"}],options:{duration:350,easing:"ease-in-out"}}),Xe("sgds-accordion",Ve),Xe("sgds-accordion-item",Ye)});
+    `}}function Xe(e,t){customElements.get(e)||customElements.define(e,t)}Ye.styles=[...Ue.styles,Ke],e([Te(".accordion-item")],Ye.prototype,"accordion",void 0),e([Te(".accordion-btn")],Ye.prototype,"header",void 0),e([Te(".accordion-body")],Ye.prototype,"body",void 0),e([Ce({type:Boolean,reflect:!0})],Ye.prototype,"open",void 0),e([Ce({type:Boolean,reflect:!0})],Ye.prototype,"disabled",void 0),e([Ce({type:String,reflect:!0})],Ye.prototype,"density",void 0),e([function(e,t){const s=Object.assign({waitUntilFirstUpdate:!1},t);return(t,i)=>{const{update:n}=t;if(e in t){const o=e;t.update=function(e){if(e.has(o)){const t=e.get(o),n=this[o];t!==n&&(s.waitUntilFirstUpdate&&!this.hasUpdated||this[i](t,n))}n.call(this,e)}}}}("open",{waitUntilFirstUpdate:!0})],Ye.prototype,"handleOpenChange",null),Ze("accordion.show",{keyframes:[{height:"0",opacity:"0"},{height:"auto",opacity:"1"}],options:{duration:350,easing:"ease-in-out"}}),Ze("accordion.hide",{keyframes:[{height:"auto",opacity:"1"},{height:"0",opacity:"0"}],options:{duration:350,easing:"ease-in-out"}}),Xe("sgds-accordion",Ve),Xe("sgds-accordion-item",Ye)});
 //# sourceMappingURL=index.umd.min.js.map