@govtechsg/sgds-web-component 3.17.1-rc.0 → 3.18.1-rc.0

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

@@ -2254,7 +2254,7 @@ const Ve=1;class Be{constructor(e){}get _$isConnected(){return this._$parent._$i
       clip-rule="evenodd"
     />
   </svg>
-`};var Xe,Ge=r`:host{color:inherit;display:inline-flex;vertical-align:bottom}:host(.icon-left){margin-right:.25rem}:host(.icon-right){margin-left:.25rem}:host([size=xs]) svg{height:var(--sgds-icon-size-xs);width:var(--sgds-icon-size-xs)}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;class Qe extends Ae{constructor(){super(...arguments),this.size="lg"}_getIconByName(e){if(!e)return;const t=Ye[e];if(t)return t;console.warn(`Icon not found: ${e}`)}render(){const e=this._getIconByName(this.name);return e||le}}Qe.styles=[...Ae.styles,Ge],e([He({type:String,reflect:!0})],Qe.prototype,"name",void 0),e([He({type:String,reflect:!0})],Qe.prototype,"size",void 0);class et extends Ae{constructor(){super(...arguments),this.steps=[],this.activeStep=0,this.orientation="horizontal",this.clickable=!1,this.linear=!1,this.defaultActiveStep=0,this._totalSteps=0,this._boundHandleItemClick=this._handleStepClick.bind(this)}connectedCallback(){super.connectedCallback(),this._totalSteps=this.steps.length,this.addEventListener("i-sgds-click",this._boundHandleItemClick)}_handleSlotChange(){this._items=this._slotNodes,this._totalSteps=this._items.length,this._updateStepItems()}_updateStepItems(){this._items&&this._items.length>0&&this._items.forEach((e,t)=>{e.stepIndex=t,e.active=this.activeStep===t,e._isCompleted=e.completed||this.activeStep>t,e.isClickable=this.linear?!e.disabled&&this.clickable&&(this.activeStep-1==t||this.activeStep+1==t):!e.disabled&&this.clickable,e.orientation=this.orientation,this._items.length>1&&(e.isFirstOfType=0===t,e.classList.toggle("last",t===this._items.length-1))})}getComponent(e=this.activeStep){var t,l;const a=this._slotNodes.length>1?this._items:this.steps;return a&&a.length>0?null===(t=a[e])||void 0===t?void 0:t.component:null===(l=this.steps[e])||void 0===l?void 0:l.component}nextStep(){this.emit("sgds-next-step"),this.activeStep<this._totalSteps-1&&this.activeStep++}previousStep(){this.emit("sgds-previous-step"),this.activeStep>0&&this.activeStep--}lastStep(){this.emit("sgds-last-step"),this.activeStep!==this._totalSteps-1&&(this.activeStep=this._totalSteps-1)}firstStep(){this.emit("sgds-first-step"),this.activeStep>0&&(this.activeStep=0)}reset(){this.emit("sgds-reset"),this.activeStep=this.defaultActiveStep}_onStepperItemClick(e){this.activeStep=e}_handleActiveStepChange(){this._updateStepItems(),this.emit("sgds-arrived")}_handleClickableChange(){this._updateStepItems()}_handleOrientationChange(){this._updateStepItems()}_handleKeyDown(e,t){"Enter"===e.key&&this._onStepperItemClick(t)}_handleStepClick(e){var t;const l=e;e.stopPropagation();const a=null===(t=l.detail)||void 0===t?void 0:t.stepIndex;this._onStepperItemClick(a)}render(){return Q`
+`};var Xe,Ge=r`:host{color:inherit;display:inline-flex;vertical-align:bottom}:host(.icon-left){margin-right:.25rem}:host(.icon-right){margin-left:.25rem}:host([size=xs]) svg{height:var(--sgds-icon-size-xs);width:var(--sgds-icon-size-xs)}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;class Qe extends Ae{constructor(){super(...arguments),this.size="lg"}_getIconByName(e){if(!e)return;const t=Ye[e];if(t)return t;console.warn(`Icon not found: ${e}`)}render(){const e=this._getIconByName(this.name);return e||le}}Qe.styles=[...Ae.styles,Ge],e([He({type:String,reflect:!0})],Qe.prototype,"name",void 0),e([He({type:String,reflect:!0})],Qe.prototype,"size",void 0);class et extends Ae{constructor(){super(...arguments),this.steps=[],this.activeStep=0,this.orientation="horizontal",this.clickable=!1,this.linear=!1,this.defaultActiveStep=0,this._totalSteps=0,this._boundHandleItemClick=this._handleStepClick.bind(this)}connectedCallback(){super.connectedCallback(),this._totalSteps=this.steps.length,this.addEventListener("i-sgds-click",this._boundHandleItemClick)}_handleSlotChange(){this._items=this._slotNodes,this._totalSteps=this._items.length,this._updateStepItems()}_updateStepItems(){this._items&&this._items.length>0&&this._items.forEach((e,t)=>{e.stepIndex=t,e.active=this.activeStep===t,e._isCompleted=e.completed||this.activeStep>t,e.isClickable=this.linear?!e.disabled&&this.clickable&&(this.activeStep-1==t||this.activeStep+1==t):!e.disabled&&this.clickable,e.orientation=this.orientation,this._items.length>1&&(e.isFirstOfType=0===t,e.classList.toggle("last",t===this._items.length-1))})}getComponent(e=this.activeStep){var t,l;const a=this._slotNodes.length>1?this._items:this.steps;return a&&a.length>0?null===(t=a[e])||void 0===t?void 0:t.component:null===(l=this.steps[e])||void 0===l?void 0:l.component}nextStep(){var e;this.emit("sgds-next-step"),this.activeStep<this._totalSteps-1&&((null===(e=this._slotNodes[this.activeStep+1])||void 0===e?void 0:e.disabled)||this.activeStep++)}previousStep(){var e;this.emit("sgds-previous-step"),this.activeStep>0&&((null===(e=this._slotNodes[this.activeStep-1])||void 0===e?void 0:e.disabled)||this.activeStep--)}lastStep(){this.emit("sgds-last-step"),this.activeStep!==this._totalSteps-1&&(this.activeStep=this._totalSteps-1)}firstStep(){this.emit("sgds-first-step"),this.activeStep>0&&(this.activeStep=0)}reset(){this.emit("sgds-reset"),this.activeStep=this.defaultActiveStep}_onStepperItemClick(e){this.activeStep=e}_handleActiveStepChange(){this._updateStepItems(),this.emit("sgds-arrived")}_handleClickableChange(){this._updateStepItems()}_handleOrientationChange(){this._updateStepItems()}_handleKeyDown(e,t){"Enter"===e.key&&this._onStepperItemClick(t)}_handleStepClick(e){var t;const l=e;e.stopPropagation();const a=null===(t=l.detail)||void 0===t?void 0:t.stepIndex;this._onStepperItemClick(a)}render(){return Q`
       <div
         class="stepper ${Se({[`${this.orientation}`]:this.orientation,clickable:this.clickable})}"
       >
@@ -2278,7 +2278,7 @@ const Ve=1;class Be{constructor(e){}get _$isConnected(){return this._$parent._$i
             </div>
           `)}
       </div>
-    `}}et.styles=[...Ae.styles,Pe],et.dependencies={"sgds-icon":Qe},e([He({type:Array})],et.prototype,"steps",void 0),e([He({type:Number,reflect:!0})],et.prototype,"activeStep",void 0),e([He({type:String,reflect:!0})],et.prototype,"orientation",void 0),e([He({type:Boolean,reflect:!0})],et.prototype,"clickable",void 0),e([He({type:Boolean,reflect:!0})],et.prototype,"linear",void 0),e([((e="value")=>(t,l)=>{const a=t.constructor,i=a.prototype.attributeChangedCallback;a.prototype.attributeChangedCallback=function(t,c,r){var o;const s=a.getPropertyOptions(e);if(t===("string"==typeof s.attribute?s.attribute:e).toLowerCase()){const t=s.converter||x,a=("function"==typeof t?t:null!==(o=null==t?void 0:t.fromAttribute)&&void 0!==o?o:x.fromAttribute)(r,s.type);this[e]!==a&&(this[l]=a)}i.call(this,t,c,r)}})("activeStep")],et.prototype,"defaultActiveStep",void 0),e([(e,t)=>{const{slot:l,selector:a}=Xe??{},i="slot"+(l?`[name=${l}]`:":not([name])");return((e,t,l)=>(l.configurable=!0,l.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,l),l))(e,t,{get(){const e=this.renderRoot?.querySelector(i),t=e?.assignedElements(Xe)??[];return void 0===a?t:t.filter(e=>e.matches(a))}})}],et.prototype,"_slotNodes",void 0),e([Le("activeStep",{waitUntilFirstUpdate:!0})],et.prototype,"_handleActiveStepChange",null),e([Le("clickable",{waitUntilFirstUpdate:!0})],et.prototype,"_handleClickableChange",null),e([Le("orientation",{waitUntilFirstUpdate:!0})],et.prototype,"_handleOrientationChange",null);var tt=r`:host{display:contents}.stepper-item-container{flex-basis:1em;flex-grow:1;flex-shrink:1;position:relative;width:fit-content}.stepper-item,.stepper-item-container{align-items:center;display:flex;flex-direction:column}.stepper-item{gap:var(--sgds-gap-sm)}.stepper-item.vertical{align-items:flex-start;flex-direction:row;margin-bottom:var(--sgds-padding-xl)}.stepper-item.clickable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.stepper-item:not(.first):not(.vertical):before{background:var(--sgds-border-color-translucent);content:" ";height:var(--sgds-dimension-2);left:calc(-50% + 16px);position:absolute;top:15px;width:calc(100% - var(--sgds-dimension-32))}:host(:not(.last)) .stepper-item-container .stepper-item.vertical:after{background:var(--sgds-bg-translucent);content:" ";height:calc(100% - var(--sgds-dimension-32));left:15px;position:absolute;top:32px;width:var(--sgds-dimension-2)}.stepper-item-container .stepper-item.active:not(.first):before,.stepper-item-container .stepper-item.completed:not(.first):before,:host(:not(.last)) .stepper-item-container .stepper-item.completed:after{background:var(--sgds-primary-border-color-default)}.stepper-item.clickable{cursor:pointer}.stepper-marker{align-items:center;background:var(--sgds-bg-translucent);border:var(--sgds-border-width-2) solid var(--sgds-border-color-transparent);border-radius:50%;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-32);justify-content:center;width:var(--sgds-dimension-32);z-index:1}.stepper-detail{max-width:var(--sgds-dimension-128);text-align:center}.stepper-item.vertical .stepper-detail{padding:var(--sgds-padding-2-xs) 0 0;text-align:left}.stepper-item:not(.active):not(.completed) .stepper-detail{color:var(--sgds-color-subtle)}.stepper-item.clickable:focus .stepper-marker,.stepper-item.clickable:focus-visible .stepper-marker,.stepper-item.clickable:hover .stepper-marker{background-color:var(--sgds-primary-surface-emphasis);border-color:var(--sgds-border-color-transparent);color:var(--sgds-color-fixed-light)}.stepper-item.clickable:focus .stepper-detail,.stepper-item.clickable:focus-visible .stepper-detail,.stepper-item.clickable:hover .stepper-detail{color:var(--sgds-primary-color-emphasis)}.stepper-item.clickable .stepper-detail{color:var(--sgds-primary-color-default)}.stepper-item.completed .stepper-marker{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.stepper-item.active .stepper-marker{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}.stepper-slot *{font-size:var(--sgds-font-size-body-sm)}.stepper-item.disabled{opacity:var(--sgds-opacity-40)}`;class lt extends Ae{constructor(){super(...arguments),this.stepHeader="",this.stepIndex=0,this.active=!1,this.disabled=!1,this.completed=!1,this.isClickable=!1,this.orientation="horizontal",this.isFirstOfType=!1,this._isCompleted=!1}render(){const e=!this.disabled&&this.isClickable;return Q`
+    `}}et.styles=[...Ae.styles,Pe],et.dependencies={"sgds-icon":Qe},e([He({type:Array})],et.prototype,"steps",void 0),e([He({type:Number,reflect:!0})],et.prototype,"activeStep",void 0),e([He({type:String,reflect:!0})],et.prototype,"orientation",void 0),e([He({type:Boolean,reflect:!0})],et.prototype,"clickable",void 0),e([He({type:Boolean,reflect:!0})],et.prototype,"linear",void 0),e([((e="value")=>(t,l)=>{const a=t.constructor,i=a.prototype.attributeChangedCallback;a.prototype.attributeChangedCallback=function(t,c,r){var o;const s=a.getPropertyOptions(e);if(t===("string"==typeof s.attribute?s.attribute:e).toLowerCase()){const t=s.converter||x,a=("function"==typeof t?t:null!==(o=null==t?void 0:t.fromAttribute)&&void 0!==o?o:x.fromAttribute)(r,s.type);this[e]!==a&&(this[l]=a)}i.call(this,t,c,r)}})("activeStep")],et.prototype,"defaultActiveStep",void 0),e([(e,t)=>{const{slot:l,selector:a}=Xe??{},i="slot"+(l?`[name=${l}]`:":not([name])");return((e,t,l)=>(l.configurable=!0,l.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,l),l))(e,t,{get(){const e=this.renderRoot?.querySelector(i),t=e?.assignedElements(Xe)??[];return void 0===a?t:t.filter(e=>e.matches(a))}})}],et.prototype,"_slotNodes",void 0),e([Le("activeStep",{waitUntilFirstUpdate:!0})],et.prototype,"_handleActiveStepChange",null),e([Le("clickable",{waitUntilFirstUpdate:!0})],et.prototype,"_handleClickableChange",null),e([Le("orientation",{waitUntilFirstUpdate:!0})],et.prototype,"_handleOrientationChange",null);var tt=r`:host{display:contents}.stepper-item-container{flex-basis:1em;flex-grow:1;flex-shrink:1;position:relative;width:fit-content}.stepper-item,.stepper-item-container{align-items:center;display:flex;flex-direction:column}.stepper-item{gap:var(--sgds-gap-sm)}.stepper-item.vertical{align-items:flex-start;flex-direction:row;margin-bottom:var(--sgds-padding-xl)}.stepper-item.clickable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.stepper-item:not(.first):not(.vertical):before{background:var(--sgds-border-color-translucent);content:" ";height:var(--sgds-dimension-2);left:calc(-50% + 16px);position:absolute;top:15px;width:calc(100% - var(--sgds-dimension-32))}:host(:not(.last)) .stepper-item-container .stepper-item.vertical:after{background:var(--sgds-bg-translucent);content:" ";height:calc(100% - var(--sgds-dimension-32));left:15px;position:absolute;top:32px;width:var(--sgds-dimension-2)}.stepper-item-container .stepper-item.active:not(.first):before,.stepper-item-container .stepper-item.completed:not(.first):before,:host(:not(.last)) .stepper-item-container .stepper-item.completed:after{background:var(--sgds-primary-border-color-default)}.stepper-item.clickable{cursor:pointer}.stepper-marker{align-items:center;background:var(--sgds-bg-translucent);border:var(--sgds-border-width-2) solid var(--sgds-border-color-transparent);border-radius:50%;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-32);justify-content:center;width:var(--sgds-dimension-32);z-index:1}.stepper-detail{display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs);max-width:var(--sgds-dimension-128);text-align:center}.stepper-item.vertical .stepper-detail{padding:var(--sgds-padding-2-xs) 0 0;text-align:left}.stepper-item:not(.active):not(.completed) .stepper-label{color:var(--sgds-color-subtle)}.stepper-item.clickable:focus .stepper-marker,.stepper-item.clickable:focus-visible .stepper-marker,.stepper-item.clickable:hover .stepper-marker{background-color:var(--sgds-primary-surface-emphasis);border-color:var(--sgds-border-color-transparent);color:var(--sgds-color-fixed-light)}.stepper-item.clickable:focus .stepper-label,.stepper-item.clickable:focus-visible .stepper-label,.stepper-item.clickable:hover .stepper-label{color:var(--sgds-primary-color-emphasis)}.stepper-item.clickable .stepper-label{color:var(--sgds-primary-color-default)}.stepper-item.completed .stepper-marker{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.stepper-item.active .stepper-marker{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}.stepper-slot{color:var(--sgds-color-subtle);display:flex;flex-direction:column;font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-regular);gap:var(--sgds-gap-xs);letter-spacing:var(--sgds-letter-spacing-normal);line-height:var(--sgds-line-height-2-xs)}.stepper-item.disabled{opacity:var(--sgds-opacity-40)}`;class lt extends Ae{constructor(){super(...arguments),this.stepHeader="",this.stepIndex=0,this.active=!1,this.disabled=!1,this.completed=!1,this.isClickable=!1,this.orientation="horizontal",this.isFirstOfType=!1,this._isCompleted=!1}render(){const e=!this.disabled&&this.isClickable;return Q`
       <div class="stepper-item-container">
         <div
           class="stepper-item ${Se({first:this.isFirstOfType,active:this.active,completed:this._isCompleted,clickable:this.isClickable,vertical:"vertical"===this.orientation,disabled:this.disabled})}"
@@ -2293,10 +2293,9 @@ const Ve=1;class Be{constructor(e){}get _$isConnected(){return this._$parent._$i
           </div>
 
           <div class="stepper-detail">
-            <div class="sgds:text-body-md">${this.stepHeader}</div>
-            <div class="stepper-slot">
-              <slot></slot>
-            </div>
+            <div class="stepper-label">${this.stepHeader}</div>
+
+            <slot class="stepper-slot"></slot>
           </div>
         </div>
       </div>