q2-tecton-elements 1.57.2 → 1.58.1

package/dist/cjs/q2-stepper.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-zMAVnBYO.js');
 var index$1 = require('./index-DRPUzMCR.js');
 
-const q2StepperCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;position:relative}ul{--comp-bullet-background:var(--tct-stepper-bullet-active-background, var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1))));--comp-bullet-font-color:var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));--comp-bullet-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-bullet-gap:var(--tct-stepper-btn-gap, var(--t-stepper-btn-gap, var(--app-scale-3x, 15px)));--comp-bullet-font-size:var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, 16px));--comp-step-width:var(--tct-stepper-step-width, var(--t-stepper-step-width, var(--t-stepper-step-width, 80px)));--comp-step-gap:var(--tct-stepper-step-gap, var(--t-stepper-step-gap, 5px));--comp-btn-icon-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-btn-label-font-size:var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, 16px));--comp-tween:var(--tct-stepper-tween, var(--t-stepper-tween, var(--app-tween-1, 0.2s ease)));overflow-x:auto;display:flex;justify-content:center;list-style:none;padding:0;padding:var(--tct-stepper-list-padding, var(--t-stepper-list-padding, 2px));margin:0;gap:var(--comp-step-gap);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}ul::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}ul::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}ul::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.has-scroll ul{justify-content:unset}li{min-height:var(--tct-stepper-min-height, var(--t-stepper-min-height, 50px));flex:0 0 auto;position:relative;width:var(--comp-step-width);text-align:center;max-width:150px;min-width:80px}.step-btn{position:relative;background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;height:calc(100% - 4px);width:100%;transition:var(--comp-tween);padding:0;transition-property:box-shadow;outline:none;margin-top:2px;--comp-active-color:var(--comp-bullet-background)}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00);--tct-stoplight-success:var(--comp-active-color)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #d20a0a);--tct-stoplight-warning:var(--comp-active-color)}.step-btn[aria-disabled]{cursor:not-allowed}.step-btn[aria-disabled],.step-btn[aria-disabled]+.step-divider{--comp-bullet-font-color:var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d)));--comp-bullet-background:var(--tct-stepper-bullet-inactive-background, var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray-12, #d9d9d9))))}.step-icon,.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0;margin:var(--comp-bullet-gap) auto;color:var(--comp-bullet-font-color);width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);min-height:var(--comp-btn-icon-size);font-size:var(--comp-bullet-font-size);transition:var(--comp-tween);transition-property:background, color;border-radius:50%;position:relative}.step-icon q2-icon,.step-bubble q2-icon{--tct-icon-fill:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:\"\";display:block;background:var(--comp-bullet-font-color);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}[aria-selected] .step-icon,[aria-selected] .step-bubble{box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);font-weight:var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600))}.step-bubble{background:var(--comp-bullet-background)}.step-divider{width:calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));top:calc(var(--comp-bullet-size) / 2 + var(--comp-bullet-gap));left:calc(var(--comp-step-width) * -0.5 + var(--comp-step-gap) + var(--comp-bullet-gap));border:0;border-top:1px solid var(--comp-bullet-background);height:0;position:absolute;margin:0;transition:border var(--comp-tween)}.step-container{position:relative}.step-label{color:var(--tct-stepper-label-color, var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d))));font-size:var(--tct-stepper-label-font-size, var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px))));line-height:var(--tct-stepper-label-line-height, 1.5em);text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, 2);-webkit-box-orient:vertical}[aria-selected] .step-label{font-weight:var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600))}[aria-describedby] .step-label{-webkit-line-clamp:var(--tct-stepper-label-line-count, 1)}.step-description{color:var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-description-line-count, 4);-webkit-box-orient:vertical;padding-bottom:0.2em}.step-description .ellipsize{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--comp-step-width);display:block}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:18px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-background:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}";
+const q2StepperCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;position:relative}ul{--comp-bullet-background:var(--tct-stepper-bullet-active-background, var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1))));--comp-bullet-font-color:var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));--comp-bullet-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-bullet-gap:var(--tct-stepper-btn-gap, var(--t-stepper-btn-gap, var(--app-scale-3x, 15px)));--comp-bullet-font-size:var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, 16px));--comp-step-width:var(--tct-stepper-step-width, var(--t-stepper-step-width, var(--t-stepper-step-width, 80px)));--comp-step-gap:var(--tct-stepper-step-gap, var(--t-stepper-step-gap, 5px));--comp-btn-icon-size:var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));--comp-btn-label-font-size:var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, 16px));--comp-tween:var(--tct-stepper-tween, var(--t-stepper-tween, var(--app-tween-1, 0.2s ease)));overflow-x:auto;display:flex;justify-content:center;list-style:none;padding:0;padding:var(--tct-stepper-list-padding, var(--t-stepper-list-padding, 2px));margin:0;gap:var(--comp-step-gap);--comp-scrollbar-size:var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));--comp-scrollbar-border-radius:var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));--comp-scrollbar-color:var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));scrollbar-width:thin;scrollbar-color:var(--comp-scrollbar-color) transparent}ul::-webkit-scrollbar{width:var(--comp-scrollbar-size);height:var(--comp-scrollbar-size);margin:5px}ul::-webkit-scrollbar-thumb{background:var(--comp-scrollbar-color);border-radius:var(--comp-scrollbar-border-radius)}ul::-webkit-scrollbar-track{background:transparent;border-radius:var(--comp-scrollbar-border-radius)}.has-scroll ul{justify-content:unset}li{min-height:var(--tct-stepper-min-height, var(--t-stepper-min-height, 50px));flex:0 0 auto;position:relative;width:var(--comp-step-width);text-align:center;max-width:150px;min-width:80px}.step-btn{position:relative;background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;height:calc(100% - 4px);width:100%;transition:var(--comp-tween);padding:0;transition-property:box-shadow;outline:none;margin-top:2px;--comp-active-color:var(--comp-bullet-background)}.step-btn.status-complete{--comp-active-color:var(--const-stoplight-success, #0e8a00);--tct-stoplight-success:var(--comp-active-color)}.step-btn.status-error{--comp-active-color:var(--const-stoplight-alert, #d20a0a);--tct-stoplight-warning:var(--comp-active-color)}.step-btn[aria-disabled=true]{cursor:not-allowed}.step-btn[aria-disabled=true],.step-btn[aria-disabled=true]+.step-divider{--comp-bullet-font-color:var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d)));--comp-bullet-background:var(--tct-stepper-bullet-inactive-background, var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray-12, #d9d9d9))))}.step-icon,.step-bubble{display:flex;justify-content:center;align-items:center;line-height:0;margin:var(--comp-bullet-gap) auto;color:var(--comp-bullet-font-color);width:var(--comp-btn-icon-size);height:var(--comp-btn-icon-size);min-height:var(--comp-btn-icon-size);font-size:var(--comp-bullet-font-size);transition:var(--comp-tween);transition-property:background, color;border-radius:50%;position:relative}.step-icon q2-icon,.step-bubble q2-icon{--tct-icon-fill:var(--comp-active-color)}.step-icon q2-icon:before,.step-bubble q2-icon:before{content:\"\";display:block;background:var(--comp-bullet-font-color);position:absolute;width:80%;height:80%;left:11%;top:11%;border-radius:50%}.status-complete .step-icon,.status-error .step-icon,.status-complete .step-bubble,.status-error .step-bubble{background:var(--comp-active-color)}[aria-selected=true] .step-icon,[aria-selected=true] .step-bubble{box-shadow:0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);font-weight:var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600))}.step-bubble{background:var(--comp-bullet-background)}.step-divider{width:calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));top:calc(var(--comp-bullet-size) / 2 + var(--comp-bullet-gap));left:calc(var(--comp-step-width) * -0.5 + var(--comp-step-gap) + var(--comp-bullet-gap));border:0;border-top:1px solid var(--comp-bullet-background);height:0;position:absolute;margin:0;transition:border var(--comp-tween)}.step-container{position:relative}.step-label{color:var(--tct-stepper-label-color, var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d))));font-size:var(--tct-stepper-label-font-size, var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px))));line-height:var(--tct-stepper-label-line-height, 1.5em);text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-label-line-count, 2);-webkit-box-orient:vertical}[aria-selected] .step-label{font-weight:var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600))}[aria-describedby] .step-label{-webkit-line-clamp:var(--tct-stepper-label-line-count, 1)}.step-description{color:var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));font-size:var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:var(--tct-stepper-description-line-count, 4);-webkit-box-orient:vertical;padding-bottom:0.2em}.step-description .ellipsize{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--comp-step-width);display:block}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:18px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-background:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}";
 
 const Q2Stepper = class {
     constructor(hostRef) {
@@ -16,10 +16,6 @@ const Q2Stepper = class {
         this.scrollEnabled = false;
         this.showScrollLeft = false;
         this.showScrollRight = false;
-        // #endregion
-        // #region Public Property API
-        /** The currently selected step. */
-        this.currentStep = 1;
         this.checkForPanes = () => {
             const { allPanes } = this;
             if (!allPanes.length)
@@ -92,13 +88,15 @@ const Q2Stepper = class {
         this.resizeObserver = null;
     }
     componentWillLoad() {
-        if (!this.lastEnabledStep)
-            this.lastEnabledStep = this.currentStep || 1;
-        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());
+        this.handleUndefinedStepProperties();
+        if ('ResizeObserver' in window) {
+            this.resizeObserver = new ResizeObserver(() => this.checkScrollState());
+        }
         this.checkForPanes();
     }
     componentDidLoad() {
-        this.resizeObserver.observe(this.listElement);
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.listElement);
         this.checkScrollState();
         index$1.overrideFocus(this.hostElement);
         setTimeout(() => this.showStep(this.currentStep || 1), 0);
@@ -168,6 +166,9 @@ const Q2Stepper = class {
     }
     // #endregion
     // #region Watchers
+    lastEnabledStepChanged() {
+        this.handleUndefinedStepProperties();
+    }
     currentStepChanged(stepNumber) {
         this.showStep(stepNumber);
     }
@@ -178,7 +179,10 @@ const Q2Stepper = class {
     }
     focusStep(stepNumber, scrollIntoView, forceFocus) {
         var _a;
-        const stepListItem = this.listElement.children[stepNumber - 1];
+        const { listElement } = this;
+        if (!listElement)
+            return;
+        const stepListItem = listElement.children[stepNumber - 1];
         const isActive = document.activeElement === this.hostElement;
         if (!stepListItem)
             return;
@@ -195,9 +199,24 @@ const Q2Stepper = class {
     }
     getPaneSlotOrProperty(pane, slotName) {
         var _a;
-        const slot = pane.querySelector(`:scope > [slot="${slotName}"]`);
+        const slot = Array.from(pane.children).find(child => child.getAttribute('slot') === slotName);
         return (_a = slot === null || slot === void 0 ? void 0 : slot.outerHTML) !== null && _a !== void 0 ? _a : index$1.loc(pane[slotName]);
     }
+    handleUndefinedStepProperties() {
+        const { currentStep, lastEnabledStep } = this;
+        if (currentStep && lastEnabledStep)
+            return;
+        if (!currentStep && lastEnabledStep) {
+            this.currentStep = lastEnabledStep;
+        }
+        else if (currentStep && !lastEnabledStep) {
+            this.lastEnabledStep = currentStep;
+        }
+        else if (!currentStep && !lastEnabledStep) {
+            this.currentStep = 1;
+            this.lastEnabledStep = 1;
+        }
+    }
     resizeIframe() {
         var _a, _b;
         return (_b = (_a = window === null || window === void 0 ? void 0 : window.TectonElements) === null || _a === void 0 ? void 0 : _a.resizeIframe) === null || _b === void 0 ? void 0 : _b.call(_a);
@@ -226,7 +245,7 @@ const Q2Stepper = class {
     // #region Render Methods
     renderStepBtn(stepIndex) {
         var _a;
-        const { allPanes, stepCount, currentStep, lastEnabledStep } = this;
+        const { allPanes, stepCount, lastEnabledStep, currentStep } = this;
         const pane = (_a = allPanes === null || allPanes === void 0 ? void 0 : allPanes[stepIndex]) !== null && _a !== void 0 ? _a : null;
         const { id, status } = pane;
         const label = this.getPaneSlotOrProperty(pane, 'label');
@@ -246,18 +265,19 @@ const Q2Stepper = class {
             stepClasses.push(`status-${status}`);
         const isLocked = status === 'locked';
         const disabled = isLocked || stepNumber > lastEnabledStep;
-        return (index.h("li", { role: "presentation" }, index.h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": isCurrentStep, "aria-disabled": disabled ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => this.onStepKeyDown(ev, stepNumber), onClick: ev => !isLocked && this.onStepClick(ev, stepNumber) }, index.h(index.Fragment, null, statusIcon ? (index.h("div", { class: "step-icon" }, index.h("q2-icon", { type: statusIcon }))) : (index.h("div", { class: "step-bubble" }, stepNumber)), labelId && (index.h("div", { class: "step-label", id: labelId, innerHTML: label })), labelId && descriptionId && (index.h("div", { class: "step-description", id: descriptionId, innerHTML: description })))), stepIndex ? index.h("div", { class: "step-divider" }) : ''));
+        return (index.h("li", { role: "presentation" }, index.h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-disabled": disabled ? 'true' : undefined, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => this.onStepKeyDown(ev, stepNumber), onClick: ev => !isLocked && this.onStepClick(ev, stepNumber) }, index.h(index.Fragment, null, statusIcon ? (index.h("div", { class: "step-icon" }, index.h("q2-icon", { type: statusIcon }))) : (index.h("div", { class: "step-bubble" }, stepNumber)), labelId && (index.h("div", { class: "step-label", id: labelId, innerHTML: label })), labelId && descriptionId && (index.h("div", { class: "step-description", id: descriptionId, innerHTML: description })))), stepIndex ? index.h("div", { class: "step-divider" }) : ''));
     }
     render() {
         const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;
         const containerClasses = ['step-container'];
         if (scrollEnabled)
             containerClasses.push('has-scroll');
-        return (index.h(index.Fragment, { key: 'd69bb5aa5a13aef557f0f06d2e6422dcafdd5e38' }, index.h("div", { key: 'b23272dd4b0b28da06de0d2eeece582b04629b2d', class: containerClasses.join(' ') }, scrollEnabled && (index.h(index.Fragment, { key: '7223eb3cab06667298dbf0492492c01ad2b94442' }, index.h("div", { key: '192743bceef627cd3ae387f5dd789abf85fc5522', class: "gradient-left", hidden: !showScrollLeft }), index.h("div", { key: '64057f36f27be33628bc895e3a5fec8a3d61a9aa', class: "gradient-right", hidden: !showScrollRight }), index.h("q2-btn", { key: '256bbeb821258249ed291b3e6017c88efeb23142', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: index$1.loc('tecton.element.stepper.scrollLeft'), onClick: () => this.onScrollBtnClick('left') }, index.h("q2-icon", { key: 'adfcb21fa9b06b1dd8a9a8ead2e8602f96de192b', type: "chevron-left" })), index.h("q2-btn", { key: '37564437d36fbd3768c97506886cf2bee5db5c73', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: index$1.loc('tecton.element.stepper.scrollRight'), onClick: () => this.onScrollBtnClick('right') }, index.h("q2-icon", { key: '61339e1714a3ff8490db08c5a6fda68f1a866163', type: "chevron-right" })))), index.h("ul", { key: '3cfd01161d197f5dfef7e76d591d70ec3b23daa3', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), index.h("div", { key: '664620a83a5d5e08bccfb9e52a1a7d8a9e78fd55', role: "list" }, index.h("slot", { key: 'ec106db320139b50ad35ba283f79db3b8bfcf928', onSlotchange: () => this.onSlotChange() }))));
+        return (index.h(index.Fragment, { key: '5419df95b8f6501a52fae65fe7473513ca81bc84' }, index.h("div", { key: 'b6d1b59979dba27d84a9c5632f5203ff7c935ba9', class: containerClasses.join(' ') }, scrollEnabled && (index.h(index.Fragment, { key: 'daba3f6608fa3a71e872dd6b02b73abde53c0973' }, index.h("div", { key: '3521716d2d23b250ca5b5f2b97820a5d4ce289f1', class: "gradient-left", hidden: !showScrollLeft }), index.h("div", { key: 'beb574a341d72d9c70800d722680c27fef9ebad1', class: "gradient-right", hidden: !showScrollRight }), index.h("q2-btn", { key: '7841ab895a979cf9f41fe3e4b5ae399253ef2d08', class: "btn-left", hideLabel: true, hidden: !this.showScrollLeft, label: index$1.loc('tecton.element.stepper.scrollLeft'), onClick: () => this.onScrollBtnClick('left') }, index.h("q2-icon", { key: 'f8aa5bdbf75089a8d296ddc286c0d58ad4081da0', type: "chevron-left" })), index.h("q2-btn", { key: '3145907a7dd4a2faaa834b1c9148df290a6bf5b3', class: "btn-right", hideLabel: true, hidden: !this.showScrollRight, label: index$1.loc('tecton.element.stepper.scrollRight'), onClick: () => this.onScrollBtnClick('right') }, index.h("q2-icon", { key: '34c21546af1346207d5328c1b3e0574a4075936e', type: "chevron-right" })))), index.h("ul", { key: '159c1e3aad8449e5c6cae383a1314f4e2e44ecae', onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))), index.h("div", { key: '1ac4aec1790a0145490d83defdb1b9466fefa689', role: "list" }, index.h("slot", { key: 'fec3540f019574052f87b2a96aed47dca5cae8fc', onSlotchange: () => this.onSlotChange() }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
-        "currentStep": ["currentStepChanged"]
+        "lastEnabledStep": ["lastEnabledStepChanged"],
+        "currentStep": ["lastEnabledStepChanged", "currentStepChanged"]
     }; }
 };
 Q2Stepper.style = q2StepperCss;

package/dist/cjs/q2-stepper.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"q2-stepper.entry.cjs.js","mappings":"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","names":["overrideFocus","isEventFromElement","loc","h","Fragment"],"sources":["src/components/q2-stepper/q2-stepper.scss?tag=q2-stepper&encapsulation=shadow","src/components/q2-stepper/q2-stepper.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nul {\n    --comp-bullet-background: #{var-list(\n            --tct-stepper-bullet-active-background,\n            var-prefixer(stepper-bullet-active-bg),\n            --t-primary,\n            #0079c1\n        )};\n    --comp-bullet-font-color: #{var-list(\n            var-prefixer(stepper-bullet-active-font-color),\n            --t-primary-font-color,\n            #ffffff\n        )};\n    --comp-bullet-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n    --comp-bullet-gap: #{var-list(var-prefixer(stepper-btn-gap), --app-scale-3x, 15px)};\n    --comp-bullet-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n\n    --comp-step-width: #{var-list(var-prefixer(stepper-step-width), --t-stepper-step-width, 80px)};\n    --comp-step-gap: #{var-list(var-prefixer(stepper-step-gap), 5px)};\n    --comp-btn-icon-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n    --comp-btn-label-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n    --comp-tween: #{var-list(var-prefixer(stepper-tween), --app-tween-1, unquote('0.2s ease'))};\n\n    overflow-x: auto;\n    display: flex;\n    justify-content: center;\n    list-style: none;\n    padding: 0;\n    padding: var-list(var-prefixer(stepper-list-padding), 2px);\n    margin: 0;\n    gap: var(--comp-step-gap);\n    @include tiny-scrollbar();\n\n    .has-scroll & {\n        justify-content: unset;\n    }\n}\n\nli {\n    min-height: var-list(var-prefixer(stepper-min-height), 50px);\n    flex: 0 0 auto;\n    position: relative;\n    width: var(--comp-step-width);\n    text-align: center;\n    max-width: 150px;\n    min-width: 80px;\n}\n\n.step-btn {\n    position: relative;\n    background: transparent;\n    border: 0;\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: calc(100% - 4px);\n    width: 100%;\n    transition: var(--comp-tween);\n    padding: 0;\n    transition-property: box-shadow;\n    outline: none;\n    margin-top: 2px;\n\n    --comp-active-color: var(--comp-bullet-background);\n    &.status-complete {\n        --comp-active-color: var(--const-stoplight-success, #0e8a00);\n        --tct-stoplight-success: var(--comp-active-color);\n    }\n    &.status-error {\n        --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n        --tct-stoplight-warning: var(--comp-active-color);\n    }\n\n    &[aria-disabled] {\n        cursor: not-allowed;\n\n        &,\n        & + .step-divider {\n            --comp-bullet-font-color: #{var-list(var-prefixer(stepper-bullet-inactive-font-color), --t-text, #4d4d4d)};\n            --comp-bullet-background: #{var-list(\n                    --tct-stepper-bullet-inactive-background,\n                    var-prefixer(stepper-bullet-inactive-bg),\n                    --t-gray-12,\n                    #d9d9d9\n                )};\n        }\n    }\n}\n.step-icon,\n.step-bubble {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    line-height: 0;\n    margin: var(--comp-bullet-gap) auto;\n    color: var(--comp-bullet-font-color);\n    width: var(--comp-btn-icon-size);\n    height: var(--comp-btn-icon-size);\n    min-height: var(--comp-btn-icon-size);\n    font-size: var(--comp-bullet-font-size);\n    transition: var(--comp-tween);\n    transition-property: background, color;\n    border-radius: 50%;\n    position: relative;\n\n    q2-icon {\n        --tct-icon-fill: var(--comp-active-color);\n        &:before {\n            content: '';\n            display: block;\n            background: var(--comp-bullet-font-color);\n            position: absolute;\n            width: 80%;\n            height: 80%;\n            left: 11%;\n            top: 11%;\n            border-radius: 50%;\n        }\n    }\n    .status-complete &,\n    .status-error & {\n        background: var(--comp-active-color);\n    }\n    [aria-selected] & {\n        box-shadow:\n            0 0 0 2px var(--t-base, #ffffff),\n            0 0 0 4px var(--comp-active-color);\n        font-weight: var-list(var-prefixer(stepper-bullet-active-font-weight), 600);\n    }\n}\n\n.step-bubble {\n    background: var(--comp-bullet-background);\n}\n\n.step-divider {\n    width: calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));\n    top: calc(calc(var(--comp-bullet-size) / 2) + var(--comp-bullet-gap));\n    left: calc(calc(var(--comp-step-width) * -0.5) + var(--comp-step-gap) + var(--comp-bullet-gap));\n    border: 0;\n    border-top: 1px solid var(--comp-bullet-background);\n    height: 0;\n    position: absolute;\n    margin: 0;\n    transition: border var(--comp-tween);\n}\n\n.step-container {\n    position: relative;\n}\n\n.step-label {\n    color: var-list(--tct-stepper-label-color, var-prefixer(stepper-title-color), --t-text, #4d4d4d);\n    font-size: var-list(\n        --tct-stepper-label-font-size,\n        var-prefixer(stepper-title-font-size),\n        --app-font-size-small,\n        12px\n    );\n    line-height: var-list(--tct-stepper-label-line-height, 1.5em);\n    @include line-clamp(var(--tct-stepper-label-line-count, 2));\n\n    [aria-selected] & {\n        font-weight: var-list(var-prefixer(stepper-active-font-weight), 600);\n    }\n\n    [aria-describedby] & {\n        -webkit-line-clamp: var(--tct-stepper-label-line-count, 1);\n    }\n}\n\n.step-description {\n    color: var-list(var-prefixer(stepper-description-color), --t-textA, rgba(77, 77, 77, 0.77));\n    font-size: var-list(var-prefixer(stepper-description-font-size), --app-font-size-small, 12px);\n    @include line-clamp(var(--tct-stepper-description-line-count, 4));\n\n    // Add padding for descenders\n    padding-bottom: 0.2em;\n\n    // For description slot on q2-stepper-pane\n    .ellipsize {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        max-width: var(--comp-step-width);\n        display: block;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 18px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(\n        to left,\n        var(--t-base-a0, rgba(255, 255, 255, 0)),\n        var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n        var(--t-base, #ffffff) 100%\n    );\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(\n        to right,\n        var(--t-base-a0, rgba(255, 255, 255, 0)),\n        var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n        var(--t-base, #ffffff) 100%\n    );\n    right: 0;\n}\n\n.btn-left,\n.btn-right {\n    --tct-icon-size: 18px;\n    --tct-btn-icon-hover-background: transparent;\n    --tct-btn-icon-width: 22px;\n    --tct-icon-stroke-primary: #{var-list(var-prefixer(stepper-scroll-arrow-color), --t-text, #4d4d4d)};\n\n    position: absolute;\n    top: calc(50% - 22px);\n    z-index: 2;\n    q2-icon {\n        --tct-icon-stroke-width: 3;\n    }\n}\n\n.btn-left {\n    left: 0;\n}\n\n.btn-right {\n    right: 0;\n}\n","import {\n    Component,\n    Prop,\n    h,\n    Element,\n    ComponentInterface,\n    State,\n    Watch,\n    Listen,\n    Method,\n    Event,\n    EventEmitter,\n    Fragment,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement } from 'src/utils';\n@Component({ tag: 'q2-stepper', shadow: true, styleUrl: 'q2-stepper.scss' })\nexport class Q2Stepper implements ComponentInterface {\n    // #region Own Properties\n\n    listElement: HTMLUListElement;\n    resizeObserver: ResizeObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    contentChangeTriggerCount: number = 0;\n\n    @State()\n    scrollEnabled: boolean = false;\n\n    @State()\n    showScrollLeft: boolean = false;\n\n    @State()\n    showScrollRight: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The currently selected step. */\n    @Prop({ reflect: true, mutable: true })\n    currentStep: number = 1;\n\n    /**\n     * The last step the user may navigate to.\n     * @info\n     * Will be managed automatically if not provided.\n     */\n    @Prop({ mutable: true })\n    lastEnabledStep: number;\n\n    /**\n     * Used to determine the number of steps in the stepper.\n     * @private\n     */\n    @Prop({ mutable: true })\n    stepCount: number;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the selected step changes.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n        this.resizeObserver = null;\n    }\n\n    componentWillLoad() {\n        if (!this.lastEnabledStep) this.lastEnabledStep = this.currentStep || 1;\n        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        this.checkForPanes();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        setTimeout(() => this.showStep(this.currentStep || 1), 0);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        const { hostElement } = this;\n        if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n            this.currentStep = event.detail.selectedStep || this.currentStep;\n        }\n    }\n\n    @Listen('contentChange')\n    contentChangeHandler() {\n        this.contentChangeTriggerCount += 1;\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusStep(this.currentStep, true, true);\n    }\n\n    @Listen('statusChange')\n    statusChangeHandler(event: CustomEvent) {\n        const index = Array.from(this.allPanes).findIndex(el => event.detail.id === el.id);\n        if (index > -1) {\n            this.allPanes[index].status = event.detail.status;\n            this.renderStepBtn(index);\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking a step in the stepper and emitting the change event.\n     *\n     * You may provide either the step number or the stepper pane id.\n     *\n     * If the value is invalid or the step is locked, the method will do nothing.\n     * @testOnly\n     */\n    @Method()\n    async selectStep(value: number | string) {\n        let stepListItem;\n        switch (typeof value) {\n            case 'number':\n                if (value > this.lastEnabledStep || value < 1) break;\n                stepListItem = this.listElement.children[value - 1];\n                if (!stepListItem) return;\n                (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n                break;\n            case 'string':\n                const pane = this.hostElement.querySelector<HTMLQ2StepperPaneElement>(`#${value}`);\n                if (!pane) break;\n                const stepIndex = this.allPanes.indexOf(pane);\n                if (stepIndex + 1 > this.lastEnabledStep || stepIndex < 0) break;\n                stepListItem = this.listElement.children[stepIndex];\n                if (!stepListItem) break;\n                (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n                break;\n            default:\n                break;\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('currentStep')\n    currentStepChanged(stepNumber: number) {\n        this.showStep(stepNumber);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get allPanes() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane'));\n    }\n\n    checkForPanes = () => {\n        const { allPanes } = this;\n        if (!allPanes.length) return;\n\n        this.stepCount = allPanes.length;\n    };\n\n    checkScrollState = () => {\n        if (!this.listElement) return;\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        this.scrollEnabled = scrollWidth > clientWidth;\n        this.showScrollLeft = !!scrollLeft;\n        this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;\n    };\n\n    focusStep(stepNumber: number, scrollIntoView?: boolean, forceFocus?: boolean) {\n        const stepListItem = this.listElement.children[stepNumber - 1] as HTMLLIElement;\n        const isActive = document.activeElement === this.hostElement;\n        if (!stepListItem) return;\n        if (isActive || forceFocus) {\n            (stepListItem.firstElementChild as HTMLButtonElement)?.focus();\n        }\n\n        if (scrollIntoView) {\n            const left = stepListItem.offsetLeft - this.listElement.clientWidth / 2;\n            this.listElement.scrollTo({\n                left,\n                behavior: 'smooth',\n            });\n        }\n    }\n\n    getPaneSlotOrProperty(pane: HTMLQ2StepperPaneElement, slotName: 'description' | 'label') {\n        const slot = pane.querySelector<HTMLElement>(`:scope > [slot=\"${slotName}\"]`);\n        return slot?.outerHTML ?? loc(pane[slotName]);\n    }\n\n    onScrollBtnClick = (direction: 'left' | 'right') => {\n        const scrollAmount = Math.floor(this.listElement.clientWidth / 2);\n\n        this.listElement.scrollBy({\n            left: direction === 'left' ? -scrollAmount : scrollAmount,\n            behavior: 'smooth',\n        });\n    };\n\n    onSlotChange = () => {\n        this.checkForPanes();\n        this.checkScrollState();\n    };\n\n    onStepClick = (event, selectedStep: number) => {\n        event.stopPropagation();\n        const { currentStep, stepCount, lastEnabledStep } = this;\n        if (selectedStep > lastEnabledStep || selectedStep === currentStep) return;\n\n        this.change.emit({\n            selectedStep,\n            lastEnabledStep,\n            currentStep,\n            stepCount,\n        });\n    };\n\n    onStepKeyDown = (event: KeyboardEvent, stepNumber: number) => {\n        const { lastEnabledStep, stepCount } = this;\n        const { key } = event;\n\n        let selectedStep;\n        switch (key) {\n            case 'ArrowLeft':\n                event.preventDefault();\n                selectedStep = Math.max(stepNumber - 1, 0);\n                break;\n\n            case 'ArrowRight':\n                event.preventDefault();\n                selectedStep = Math.min(stepNumber + 1, stepCount);\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                selectedStep = 1;\n                break;\n\n            case 'End':\n                event.preventDefault();\n                selectedStep = lastEnabledStep;\n                break;\n        }\n\n        if (!selectedStep) return;\n        this.focusStep(selectedStep, true);\n    };\n\n    resizeIframe() {\n        return window?.TectonElements?.resizeIframe?.();\n    }\n\n    showStep(stepNumber: number) {\n        if (stepNumber > this.lastEnabledStep) {\n            const { currentStep, stepCount } = this;\n            this.lastEnabledStep = stepNumber;\n            this.change.emit({\n                selectedStep: null,\n                lastEnabledStep: stepNumber,\n                currentStep,\n                stepCount,\n            });\n        }\n\n        this.scheduledAfterRender.push(this.resizeIframe);\n        this.showStepPane(stepNumber);\n        this.focusStep(stepNumber, this.scrollEnabled);\n    }\n\n    showStepPane(stepNumber: number) {\n        this.allPanes.forEach((pane, index) => {\n            pane.isActive = stepNumber === index + 1;\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderStepBtn(stepIndex: number) {\n        const { allPanes, stepCount, currentStep, lastEnabledStep } = this;\n        const pane = allPanes?.[stepIndex] ?? null;\n        const { id, status } = pane;\n        const label = this.getPaneSlotOrProperty(pane, 'label');\n        const description = this.getPaneSlotOrProperty(pane, 'description');\n\n        const stepNumber = stepIndex + 1;\n        const isCurrentStep = stepNumber === currentStep;\n        const labelId = !!label && `label-${id}`;\n        const descriptionId = !!label && !!description && `description-${id}`;\n        const btnLabel = !label && loc('tecton.element.stepper.number', [`${stepNumber}`, `${stepCount}`]);\n\n        let statusIcon;\n        if (status === 'complete') statusIcon = 'success-filled';\n        else if (status === 'error') statusIcon = 'warning-filled';\n\n        const stepClasses = ['step-btn'];\n        if (status) stepClasses.push(`status-${status}`);\n        const isLocked = status === 'locked';\n        const disabled = isLocked || stepNumber > lastEnabledStep;\n\n        return (\n            <li role=\"presentation\">\n                <button\n                    class={stepClasses.join(' ')}\n                    type=\"button\"\n                    aria-labelledby={labelId}\n                    aria-describedBy={descriptionId}\n                    aria-label={btnLabel}\n                    aria-selected={isCurrentStep}\n                    aria-disabled={disabled ? 'true' : null}\n                    role=\"tab\"\n                    tabIndex={isCurrentStep ? 0 : -1}\n                    onKeyDown={ev => this.onStepKeyDown(ev, stepNumber)}\n                    onClick={ev => !isLocked && this.onStepClick(ev, stepNumber)}\n                >\n                    <Fragment>\n                        {statusIcon ? (\n                            <div class=\"step-icon\">\n                                <q2-icon type={statusIcon}></q2-icon>\n                            </div>\n                        ) : (\n                            <div class=\"step-bubble\">{stepNumber}</div>\n                        )}\n                        {labelId && (\n                            <div\n                                class=\"step-label\"\n                                id={labelId}\n                                innerHTML={label}\n                            ></div>\n                        )}\n                        {labelId && descriptionId && (\n                            <div\n                                class=\"step-description\"\n                                id={descriptionId}\n                                innerHTML={description}\n                            ></div>\n                        )}\n                    </Fragment>\n                </button>\n                {stepIndex ? <div class=\"step-divider\"></div> : ''}\n            </li>\n        );\n    }\n\n    render() {\n        const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;\n        const containerClasses = ['step-container'];\n        if (scrollEnabled) containerClasses.push('has-scroll');\n\n        return (\n            <Fragment>\n                <div class={containerClasses.join(' ')}>\n                    {scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hideLabel={true}\n                                hidden={!this.showScrollLeft}\n                                label={loc('tecton.element.stepper.scrollLeft')}\n                                onClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon type=\"chevron-left\"></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hideLabel={true}\n                                hidden={!this.showScrollRight}\n                                label={loc('tecton.element.stepper.scrollRight')}\n                                onClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon type=\"chevron-right\"></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        role=\"tablist\"\n                    >\n                        {stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex))}\n                    </ul>\n                </div>\n                <div role=\"list\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}
+{"file":"q2-stepper.entry.cjs.js","mappings":"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","names":["overrideFocus","isEventFromElement","loc","h","Fragment"],"sources":["src/components/q2-stepper/q2-stepper.scss?tag=q2-stepper&encapsulation=shadow","src/components/q2-stepper/q2-stepper.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nul {\n    --comp-bullet-background: #{var-list(\n            --tct-stepper-bullet-active-background,\n            var-prefixer(stepper-bullet-active-bg),\n            --t-primary,\n            #0079c1\n        )};\n    --comp-bullet-font-color: #{var-list(\n            var-prefixer(stepper-bullet-active-font-color),\n            --t-primary-font-color,\n            #ffffff\n        )};\n    --comp-bullet-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n    --comp-bullet-gap: #{var-list(var-prefixer(stepper-btn-gap), --app-scale-3x, 15px)};\n    --comp-bullet-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n\n    --comp-step-width: #{var-list(var-prefixer(stepper-step-width), --t-stepper-step-width, 80px)};\n    --comp-step-gap: #{var-list(var-prefixer(stepper-step-gap), 5px)};\n    --comp-btn-icon-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n    --comp-btn-label-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n    --comp-tween: #{var-list(var-prefixer(stepper-tween), --app-tween-1, unquote('0.2s ease'))};\n\n    overflow-x: auto;\n    display: flex;\n    justify-content: center;\n    list-style: none;\n    padding: 0;\n    padding: var-list(var-prefixer(stepper-list-padding), 2px);\n    margin: 0;\n    gap: var(--comp-step-gap);\n    @include tiny-scrollbar();\n\n    .has-scroll & {\n        justify-content: unset;\n    }\n}\n\nli {\n    min-height: var-list(var-prefixer(stepper-min-height), 50px);\n    flex: 0 0 auto;\n    position: relative;\n    width: var(--comp-step-width);\n    text-align: center;\n    max-width: 150px;\n    min-width: 80px;\n}\n\n.step-btn {\n    position: relative;\n    background: transparent;\n    border: 0;\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: calc(100% - 4px);\n    width: 100%;\n    transition: var(--comp-tween);\n    padding: 0;\n    transition-property: box-shadow;\n    outline: none;\n    margin-top: 2px;\n\n    --comp-active-color: var(--comp-bullet-background);\n    &.status-complete {\n        --comp-active-color: var(--const-stoplight-success, #0e8a00);\n        --tct-stoplight-success: var(--comp-active-color);\n    }\n    &.status-error {\n        --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n        --tct-stoplight-warning: var(--comp-active-color);\n    }\n\n    &[aria-disabled='true'] {\n        cursor: not-allowed;\n\n        &,\n        & + .step-divider {\n            --comp-bullet-font-color: #{var-list(var-prefixer(stepper-bullet-inactive-font-color), --t-text, #4d4d4d)};\n            --comp-bullet-background: #{var-list(\n                    --tct-stepper-bullet-inactive-background,\n                    var-prefixer(stepper-bullet-inactive-bg),\n                    --t-gray-12,\n                    #d9d9d9\n                )};\n        }\n    }\n}\n.step-icon,\n.step-bubble {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    line-height: 0;\n    margin: var(--comp-bullet-gap) auto;\n    color: var(--comp-bullet-font-color);\n    width: var(--comp-btn-icon-size);\n    height: var(--comp-btn-icon-size);\n    min-height: var(--comp-btn-icon-size);\n    font-size: var(--comp-bullet-font-size);\n    transition: var(--comp-tween);\n    transition-property: background, color;\n    border-radius: 50%;\n    position: relative;\n\n    q2-icon {\n        --tct-icon-fill: var(--comp-active-color);\n        &:before {\n            content: '';\n            display: block;\n            background: var(--comp-bullet-font-color);\n            position: absolute;\n            width: 80%;\n            height: 80%;\n            left: 11%;\n            top: 11%;\n            border-radius: 50%;\n        }\n    }\n    .status-complete &,\n    .status-error & {\n        background: var(--comp-active-color);\n    }\n    [aria-selected='true'] & {\n        box-shadow:\n            0 0 0 2px var(--t-base, #ffffff),\n            0 0 0 4px var(--comp-active-color);\n        font-weight: var-list(var-prefixer(stepper-bullet-active-font-weight), 600);\n    }\n}\n\n.step-bubble {\n    background: var(--comp-bullet-background);\n}\n\n.step-divider {\n    width: calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));\n    top: calc(calc(var(--comp-bullet-size) / 2) + var(--comp-bullet-gap));\n    left: calc(calc(var(--comp-step-width) * -0.5) + var(--comp-step-gap) + var(--comp-bullet-gap));\n    border: 0;\n    border-top: 1px solid var(--comp-bullet-background);\n    height: 0;\n    position: absolute;\n    margin: 0;\n    transition: border var(--comp-tween);\n}\n\n.step-container {\n    position: relative;\n}\n\n.step-label {\n    color: var-list(--tct-stepper-label-color, var-prefixer(stepper-title-color), --t-text, #4d4d4d);\n    font-size: var-list(\n        --tct-stepper-label-font-size,\n        var-prefixer(stepper-title-font-size),\n        --app-font-size-small,\n        12px\n    );\n    line-height: var-list(--tct-stepper-label-line-height, 1.5em);\n    @include line-clamp(var(--tct-stepper-label-line-count, 2));\n\n    [aria-selected] & {\n        font-weight: var-list(var-prefixer(stepper-active-font-weight), 600);\n    }\n\n    [aria-describedby] & {\n        -webkit-line-clamp: var(--tct-stepper-label-line-count, 1);\n    }\n}\n\n.step-description {\n    color: var-list(var-prefixer(stepper-description-color), --t-textA, rgba(77, 77, 77, 0.77));\n    font-size: var-list(var-prefixer(stepper-description-font-size), --app-font-size-small, 12px);\n    @include line-clamp(var(--tct-stepper-description-line-count, 4));\n\n    // Add padding for descenders\n    padding-bottom: 0.2em;\n\n    // For description slot on q2-stepper-pane\n    .ellipsize {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        max-width: var(--comp-step-width);\n        display: block;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 18px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(\n        to left,\n        var(--t-base-a0, rgba(255, 255, 255, 0)),\n        var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n        var(--t-base, #ffffff) 100%\n    );\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(\n        to right,\n        var(--t-base-a0, rgba(255, 255, 255, 0)),\n        var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n        var(--t-base, #ffffff) 100%\n    );\n    right: 0;\n}\n\n.btn-left,\n.btn-right {\n    --tct-icon-size: 18px;\n    --tct-btn-icon-hover-background: transparent;\n    --tct-btn-icon-width: 22px;\n    --tct-icon-stroke-primary: #{var-list(var-prefixer(stepper-scroll-arrow-color), --t-text, #4d4d4d)};\n\n    position: absolute;\n    top: calc(50% - 22px);\n    z-index: 2;\n    q2-icon {\n        --tct-icon-stroke-width: 3;\n    }\n}\n\n.btn-left {\n    left: 0;\n}\n\n.btn-right {\n    right: 0;\n}\n","import {\n    Component,\n    Prop,\n    h,\n    Element,\n    ComponentInterface,\n    State,\n    Watch,\n    Listen,\n    Method,\n    Event,\n    EventEmitter,\n    Fragment,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement } from 'src/utils';\n@Component({ tag: 'q2-stepper', shadow: true, styleUrl: 'q2-stepper.scss' })\nexport class Q2Stepper implements ComponentInterface {\n    // #region Own Properties\n\n    listElement: HTMLUListElement;\n    resizeObserver: ResizeObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    contentChangeTriggerCount: number = 0;\n\n    @State()\n    scrollEnabled: boolean = false;\n\n    @State()\n    showScrollLeft: boolean = false;\n\n    @State()\n    showScrollRight: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The currently selected step. */\n    @Prop({ reflect: true, mutable: true })\n    currentStep: number;\n\n    /**\n     * The last step the user may navigate to.\n     * @info\n     * Will be managed automatically if not provided.\n     */\n    @Prop({ reflect: true, mutable: true })\n    lastEnabledStep: number;\n\n    /**\n     * Used to determine the number of steps in the stepper.\n     * @private\n     */\n    @Prop({ mutable: true })\n    stepCount: number;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the selected step changes.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n        this.resizeObserver = null;\n    }\n\n    componentWillLoad() {\n        this.handleUndefinedStepProperties();\n        if ('ResizeObserver' in window) {\n            this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        }\n        this.checkForPanes();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver?.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        setTimeout(() => this.showStep(this.currentStep || 1), 0);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        const { hostElement } = this;\n        if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n            this.currentStep = event.detail.selectedStep || this.currentStep;\n        }\n    }\n\n    @Listen('contentChange')\n    contentChangeHandler() {\n        this.contentChangeTriggerCount += 1;\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusStep(this.currentStep, true, true);\n    }\n\n    @Listen('statusChange')\n    statusChangeHandler(event: CustomEvent) {\n        const index = Array.from(this.allPanes).findIndex(el => event.detail.id === el.id);\n        if (index > -1) {\n            this.allPanes[index].status = event.detail.status;\n            this.renderStepBtn(index);\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking a step in the stepper and emitting the change event.\n     *\n     * You may provide either the step number or the stepper pane id.\n     *\n     * If the value is invalid or the step is locked, the method will do nothing.\n     * @testOnly\n     */\n    @Method()\n    async selectStep(value: number | string) {\n        let stepListItem;\n        switch (typeof value) {\n            case 'number':\n                if (value > this.lastEnabledStep || value < 1) break;\n                stepListItem = this.listElement.children[value - 1];\n                if (!stepListItem) return;\n                (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n                break;\n            case 'string':\n                const pane = this.hostElement.querySelector<HTMLQ2StepperPaneElement>(`#${value}`);\n                if (!pane) break;\n                const stepIndex = this.allPanes.indexOf(pane);\n                if (stepIndex + 1 > this.lastEnabledStep || stepIndex < 0) break;\n                stepListItem = this.listElement.children[stepIndex];\n                if (!stepListItem) break;\n                (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n                break;\n            default:\n                break;\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('lastEnabledStep')\n    @Watch('currentStep')\n    lastEnabledStepChanged() {\n        this.handleUndefinedStepProperties();\n    }\n\n    @Watch('currentStep')\n    currentStepChanged(stepNumber: number) {\n        this.showStep(stepNumber);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get allPanes() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane'));\n    }\n\n    checkForPanes = () => {\n        const { allPanes } = this;\n        if (!allPanes.length) return;\n\n        this.stepCount = allPanes.length;\n    };\n\n    checkScrollState = () => {\n        if (!this.listElement) return;\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        this.scrollEnabled = scrollWidth > clientWidth;\n        this.showScrollLeft = !!scrollLeft;\n        this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;\n    };\n\n    focusStep(stepNumber: number, scrollIntoView?: boolean, forceFocus?: boolean) {\n        const { listElement } = this;\n        if (!listElement) return;\n\n        const stepListItem = listElement.children[stepNumber - 1] as HTMLLIElement;\n        const isActive = document.activeElement === this.hostElement;\n        if (!stepListItem) return;\n        if (isActive || forceFocus) {\n            (stepListItem.firstElementChild as HTMLButtonElement)?.focus();\n        }\n\n        if (scrollIntoView) {\n            const left = stepListItem.offsetLeft - this.listElement.clientWidth / 2;\n            this.listElement.scrollTo({\n                left,\n                behavior: 'smooth',\n            });\n        }\n    }\n\n    getPaneSlotOrProperty(pane: HTMLQ2StepperPaneElement, slotName: 'description' | 'label') {\n        const slot = Array.from(pane.children).find(child => child.getAttribute('slot') === slotName);\n        return slot?.outerHTML ?? loc(pane[slotName]);\n    }\n\n    handleUndefinedStepProperties() {\n        const { currentStep, lastEnabledStep } = this;\n        if (currentStep && lastEnabledStep) return;\n        if (!currentStep && lastEnabledStep) {\n            this.currentStep = lastEnabledStep;\n        } else if (currentStep && !lastEnabledStep) {\n            this.lastEnabledStep = currentStep;\n        } else if (!currentStep && !lastEnabledStep) {\n            this.currentStep = 1;\n            this.lastEnabledStep = 1;\n        }\n    }\n\n    onScrollBtnClick = (direction: 'left' | 'right') => {\n        const scrollAmount = Math.floor(this.listElement.clientWidth / 2);\n\n        this.listElement.scrollBy({\n            left: direction === 'left' ? -scrollAmount : scrollAmount,\n            behavior: 'smooth',\n        });\n    };\n\n    onSlotChange = () => {\n        this.checkForPanes();\n        this.checkScrollState();\n    };\n\n    onStepClick = (event, selectedStep: number) => {\n        event.stopPropagation();\n        const { currentStep, stepCount, lastEnabledStep } = this;\n        if (selectedStep > lastEnabledStep || selectedStep === currentStep) return;\n\n        this.change.emit({\n            selectedStep,\n            lastEnabledStep,\n            currentStep,\n            stepCount,\n        });\n    };\n\n    onStepKeyDown = (event: KeyboardEvent, stepNumber: number) => {\n        const { lastEnabledStep, stepCount } = this;\n        const { key } = event;\n\n        let selectedStep;\n        switch (key) {\n            case 'ArrowLeft':\n                event.preventDefault();\n                selectedStep = Math.max(stepNumber - 1, 0);\n                break;\n\n            case 'ArrowRight':\n                event.preventDefault();\n                selectedStep = Math.min(stepNumber + 1, stepCount);\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                selectedStep = 1;\n                break;\n\n            case 'End':\n                event.preventDefault();\n                selectedStep = lastEnabledStep;\n                break;\n        }\n\n        if (!selectedStep) return;\n        this.focusStep(selectedStep, true);\n    };\n\n    resizeIframe() {\n        return window?.TectonElements?.resizeIframe?.();\n    }\n\n    showStep(stepNumber: number) {\n        if (stepNumber > this.lastEnabledStep) {\n            const { currentStep, stepCount } = this;\n            this.lastEnabledStep = stepNumber;\n            this.change.emit({\n                selectedStep: null,\n                lastEnabledStep: stepNumber,\n                currentStep,\n                stepCount,\n            });\n        }\n\n        this.scheduledAfterRender.push(this.resizeIframe);\n        this.showStepPane(stepNumber);\n        this.focusStep(stepNumber, this.scrollEnabled);\n    }\n\n    showStepPane(stepNumber: number) {\n        this.allPanes.forEach((pane, index) => {\n            pane.isActive = stepNumber === index + 1;\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderStepBtn(stepIndex: number) {\n        const { allPanes, stepCount, lastEnabledStep, currentStep } = this;\n        const pane = allPanes?.[stepIndex] ?? null;\n        const { id, status } = pane;\n        const label = this.getPaneSlotOrProperty(pane, 'label');\n        const description = this.getPaneSlotOrProperty(pane, 'description');\n\n        const stepNumber = stepIndex + 1;\n        const isCurrentStep = stepNumber === currentStep;\n        const labelId = !!label && `label-${id}`;\n        const descriptionId = !!label && !!description && `description-${id}`;\n        const btnLabel = !label && loc('tecton.element.stepper.number', [`${stepNumber}`, `${stepCount}`]);\n\n        let statusIcon;\n        if (status === 'complete') statusIcon = 'success-filled';\n        else if (status === 'error') statusIcon = 'warning-filled';\n\n        const stepClasses = ['step-btn'];\n        if (status) stepClasses.push(`status-${status}`);\n        const isLocked = status === 'locked';\n        const disabled = isLocked || stepNumber > lastEnabledStep;\n\n        return (\n            <li role=\"presentation\">\n                <button\n                    class={stepClasses.join(' ')}\n                    type=\"button\"\n                    aria-labelledby={labelId}\n                    aria-describedBy={descriptionId}\n                    aria-label={btnLabel}\n                    aria-selected={`${isCurrentStep}`}\n                    aria-disabled={disabled ? 'true' : undefined}\n                    role=\"tab\"\n                    tabIndex={isCurrentStep ? 0 : -1}\n                    onKeyDown={ev => this.onStepKeyDown(ev, stepNumber)}\n                    onClick={ev => !isLocked && this.onStepClick(ev, stepNumber)}\n                >\n                    <Fragment>\n                        {statusIcon ? (\n                            <div class=\"step-icon\">\n                                <q2-icon type={statusIcon}></q2-icon>\n                            </div>\n                        ) : (\n                            <div class=\"step-bubble\">{stepNumber}</div>\n                        )}\n                        {labelId && (\n                            <div\n                                class=\"step-label\"\n                                id={labelId}\n                                innerHTML={label}\n                            ></div>\n                        )}\n                        {labelId && descriptionId && (\n                            <div\n                                class=\"step-description\"\n                                id={descriptionId}\n                                innerHTML={description}\n                            ></div>\n                        )}\n                    </Fragment>\n                </button>\n                {stepIndex ? <div class=\"step-divider\"></div> : ''}\n            </li>\n        );\n    }\n\n    render() {\n        const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;\n        const containerClasses = ['step-container'];\n        if (scrollEnabled) containerClasses.push('has-scroll');\n\n        return (\n            <Fragment>\n                <div class={containerClasses.join(' ')}>\n                    {scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hideLabel={true}\n                                hidden={!this.showScrollLeft}\n                                label={loc('tecton.element.stepper.scrollLeft')}\n                                onClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon type=\"chevron-left\"></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hideLabel={true}\n                                hidden={!this.showScrollRight}\n                                label={loc('tecton.element.stepper.scrollRight')}\n                                onClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon type=\"chevron-right\"></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        role=\"tablist\"\n                    >\n                        {stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex))}\n                    </ul>\n                </div>\n                <div role=\"list\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"version":3}

package/dist/cjs/q2-stepper.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-stepper.entry.cjs.js","sources":["src/components/q2-stepper/q2-stepper.scss?tag=q2-stepper&encapsulation=shadow","src/components/q2-stepper/q2-stepper.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nul {\n    --comp-bullet-background: #{var-list(\n            --tct-stepper-bullet-active-background,\n            var-prefixer(stepper-bullet-active-bg),\n            --t-primary,\n            #0079c1\n        )};\n    --comp-bullet-font-color: #{var-list(\n            var-prefixer(stepper-bullet-active-font-color),\n            --t-primary-font-color,\n            #ffffff\n        )};\n    --comp-bullet-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n    --comp-bullet-gap: #{var-list(var-prefixer(stepper-btn-gap), --app-scale-3x, 15px)};\n    --comp-bullet-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n\n    --comp-step-width: #{var-list(var-prefixer(stepper-step-width), --t-stepper-step-width, 80px)};\n    --comp-step-gap: #{var-list(var-prefixer(stepper-step-gap), 5px)};\n    --comp-btn-icon-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n    --comp-btn-label-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n    --comp-tween: #{var-list(var-prefixer(stepper-tween), --app-tween-1, unquote('0.2s ease'))};\n\n    overflow-x: auto;\n    display: flex;\n    justify-content: center;\n    list-style: none;\n    padding: 0;\n    padding: var-list(var-prefixer(stepper-list-padding), 2px);\n    margin: 0;\n    gap: var(--comp-step-gap);\n    @include tiny-scrollbar();\n\n    .has-scroll & {\n        justify-content: unset;\n    }\n}\n\nli {\n    min-height: var-list(var-prefixer(stepper-min-height), 50px);\n    flex: 0 0 auto;\n    position: relative;\n    width: var(--comp-step-width);\n    text-align: center;\n    max-width: 150px;\n    min-width: 80px;\n}\n\n.step-btn {\n    position: relative;\n    background: transparent;\n    border: 0;\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: calc(100% - 4px);\n    width: 100%;\n    transition: var(--comp-tween);\n    padding: 0;\n    transition-property: box-shadow;\n    outline: none;\n    margin-top: 2px;\n\n    --comp-active-color: var(--comp-bullet-background);\n    &.status-complete {\n        --comp-active-color: var(--const-stoplight-success, #0e8a00);\n        --tct-stoplight-success: var(--comp-active-color);\n    }\n    &.status-error {\n        --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n        --tct-stoplight-warning: var(--comp-active-color);\n    }\n\n    &[aria-disabled] {\n        cursor: not-allowed;\n\n        &,\n        & + .step-divider {\n            --comp-bullet-font-color: #{var-list(var-prefixer(stepper-bullet-inactive-font-color), --t-text, #4d4d4d)};\n            --comp-bullet-background: #{var-list(\n                    --tct-stepper-bullet-inactive-background,\n                    var-prefixer(stepper-bullet-inactive-bg),\n                    --t-gray-12,\n                    #d9d9d9\n                )};\n        }\n    }\n}\n.step-icon,\n.step-bubble {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    line-height: 0;\n    margin: var(--comp-bullet-gap) auto;\n    color: var(--comp-bullet-font-color);\n    width: var(--comp-btn-icon-size);\n    height: var(--comp-btn-icon-size);\n    min-height: var(--comp-btn-icon-size);\n    font-size: var(--comp-bullet-font-size);\n    transition: var(--comp-tween);\n    transition-property: background, color;\n    border-radius: 50%;\n    position: relative;\n\n    q2-icon {\n        --tct-icon-fill: var(--comp-active-color);\n        &:before {\n            content: '';\n            display: block;\n            background: var(--comp-bullet-font-color);\n            position: absolute;\n            width: 80%;\n            height: 80%;\n            left: 11%;\n            top: 11%;\n            border-radius: 50%;\n        }\n    }\n    .status-complete &,\n    .status-error & {\n        background: var(--comp-active-color);\n    }\n    [aria-selected] & {\n        box-shadow:\n            0 0 0 2px var(--t-base, #ffffff),\n            0 0 0 4px var(--comp-active-color);\n        font-weight: var-list(var-prefixer(stepper-bullet-active-font-weight), 600);\n    }\n}\n\n.step-bubble {\n    background: var(--comp-bullet-background);\n}\n\n.step-divider {\n    width: calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));\n    top: calc(calc(var(--comp-bullet-size) / 2) + var(--comp-bullet-gap));\n    left: calc(calc(var(--comp-step-width) * -0.5) + var(--comp-step-gap) + var(--comp-bullet-gap));\n    border: 0;\n    border-top: 1px solid var(--comp-bullet-background);\n    height: 0;\n    position: absolute;\n    margin: 0;\n    transition: border var(--comp-tween);\n}\n\n.step-container {\n    position: relative;\n}\n\n.step-label {\n    color: var-list(--tct-stepper-label-color, var-prefixer(stepper-title-color), --t-text, #4d4d4d);\n    font-size: var-list(\n        --tct-stepper-label-font-size,\n        var-prefixer(stepper-title-font-size),\n        --app-font-size-small,\n        12px\n    );\n    line-height: var-list(--tct-stepper-label-line-height, 1.5em);\n    @include line-clamp(var(--tct-stepper-label-line-count, 2));\n\n    [aria-selected] & {\n        font-weight: var-list(var-prefixer(stepper-active-font-weight), 600);\n    }\n\n    [aria-describedby] & {\n        -webkit-line-clamp: var(--tct-stepper-label-line-count, 1);\n    }\n}\n\n.step-description {\n    color: var-list(var-prefixer(stepper-description-color), --t-textA, rgba(77, 77, 77, 0.77));\n    font-size: var-list(var-prefixer(stepper-description-font-size), --app-font-size-small, 12px);\n    @include line-clamp(var(--tct-stepper-description-line-count, 4));\n\n    // Add padding for descenders\n    padding-bottom: 0.2em;\n\n    // For description slot on q2-stepper-pane\n    .ellipsize {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        max-width: var(--comp-step-width);\n        display: block;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 18px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(\n        to left,\n        var(--t-base-a0, rgba(255, 255, 255, 0)),\n        var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n        var(--t-base, #ffffff) 100%\n    );\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(\n        to right,\n        var(--t-base-a0, rgba(255, 255, 255, 0)),\n        var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n        var(--t-base, #ffffff) 100%\n    );\n    right: 0;\n}\n\n.btn-left,\n.btn-right {\n    --tct-icon-size: 18px;\n    --tct-btn-icon-hover-background: transparent;\n    --tct-btn-icon-width: 22px;\n    --tct-icon-stroke-primary: #{var-list(var-prefixer(stepper-scroll-arrow-color), --t-text, #4d4d4d)};\n\n    position: absolute;\n    top: calc(50% - 22px);\n    z-index: 2;\n    q2-icon {\n        --tct-icon-stroke-width: 3;\n    }\n}\n\n.btn-left {\n    left: 0;\n}\n\n.btn-right {\n    right: 0;\n}\n","import {\n    Component,\n    Prop,\n    h,\n    Element,\n    ComponentInterface,\n    State,\n    Watch,\n    Listen,\n    Method,\n    Event,\n    EventEmitter,\n    Fragment,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement } from 'src/utils';\n@Component({ tag: 'q2-stepper', shadow: true, styleUrl: 'q2-stepper.scss' })\nexport class Q2Stepper implements ComponentInterface {\n    // #region Own Properties\n\n    listElement: HTMLUListElement;\n    resizeObserver: ResizeObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    contentChangeTriggerCount: number = 0;\n\n    @State()\n    scrollEnabled: boolean = false;\n\n    @State()\n    showScrollLeft: boolean = false;\n\n    @State()\n    showScrollRight: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The currently selected step. */\n    @Prop({ reflect: true, mutable: true })\n    currentStep: number = 1;\n\n    /**\n     * The last step the user may navigate to.\n     * @info\n     * Will be managed automatically if not provided.\n     */\n    @Prop({ mutable: true })\n    lastEnabledStep: number;\n\n    /**\n     * Used to determine the number of steps in the stepper.\n     * @private\n     */\n    @Prop({ mutable: true })\n    stepCount: number;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the selected step changes.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n        this.resizeObserver = null;\n    }\n\n    componentWillLoad() {\n        if (!this.lastEnabledStep) this.lastEnabledStep = this.currentStep || 1;\n        this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        this.checkForPanes();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        setTimeout(() => this.showStep(this.currentStep || 1), 0);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        const { hostElement } = this;\n        if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n            this.currentStep = event.detail.selectedStep || this.currentStep;\n        }\n    }\n\n    @Listen('contentChange')\n    contentChangeHandler() {\n        this.contentChangeTriggerCount += 1;\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusStep(this.currentStep, true, true);\n    }\n\n    @Listen('statusChange')\n    statusChangeHandler(event: CustomEvent) {\n        const index = Array.from(this.allPanes).findIndex(el => event.detail.id === el.id);\n        if (index > -1) {\n            this.allPanes[index].status = event.detail.status;\n            this.renderStepBtn(index);\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking a step in the stepper and emitting the change event.\n     *\n     * You may provide either the step number or the stepper pane id.\n     *\n     * If the value is invalid or the step is locked, the method will do nothing.\n     * @testOnly\n     */\n    @Method()\n    async selectStep(value: number | string) {\n        let stepListItem;\n        switch (typeof value) {\n            case 'number':\n                if (value > this.lastEnabledStep || value < 1) break;\n                stepListItem = this.listElement.children[value - 1];\n                if (!stepListItem) return;\n                (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n                break;\n            case 'string':\n                const pane = this.hostElement.querySelector<HTMLQ2StepperPaneElement>(`#${value}`);\n                if (!pane) break;\n                const stepIndex = this.allPanes.indexOf(pane);\n                if (stepIndex + 1 > this.lastEnabledStep || stepIndex < 0) break;\n                stepListItem = this.listElement.children[stepIndex];\n                if (!stepListItem) break;\n                (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n                break;\n            default:\n                break;\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('currentStep')\n    currentStepChanged(stepNumber: number) {\n        this.showStep(stepNumber);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get allPanes() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane'));\n    }\n\n    checkForPanes = () => {\n        const { allPanes } = this;\n        if (!allPanes.length) return;\n\n        this.stepCount = allPanes.length;\n    };\n\n    checkScrollState = () => {\n        if (!this.listElement) return;\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        this.scrollEnabled = scrollWidth > clientWidth;\n        this.showScrollLeft = !!scrollLeft;\n        this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;\n    };\n\n    focusStep(stepNumber: number, scrollIntoView?: boolean, forceFocus?: boolean) {\n        const stepListItem = this.listElement.children[stepNumber - 1] as HTMLLIElement;\n        const isActive = document.activeElement === this.hostElement;\n        if (!stepListItem) return;\n        if (isActive || forceFocus) {\n            (stepListItem.firstElementChild as HTMLButtonElement)?.focus();\n        }\n\n        if (scrollIntoView) {\n            const left = stepListItem.offsetLeft - this.listElement.clientWidth / 2;\n            this.listElement.scrollTo({\n                left,\n                behavior: 'smooth',\n            });\n        }\n    }\n\n    getPaneSlotOrProperty(pane: HTMLQ2StepperPaneElement, slotName: 'description' | 'label') {\n        const slot = pane.querySelector<HTMLElement>(`:scope > [slot=\"${slotName}\"]`);\n        return slot?.outerHTML ?? loc(pane[slotName]);\n    }\n\n    onScrollBtnClick = (direction: 'left' | 'right') => {\n        const scrollAmount = Math.floor(this.listElement.clientWidth / 2);\n\n        this.listElement.scrollBy({\n            left: direction === 'left' ? -scrollAmount : scrollAmount,\n            behavior: 'smooth',\n        });\n    };\n\n    onSlotChange = () => {\n        this.checkForPanes();\n        this.checkScrollState();\n    };\n\n    onStepClick = (event, selectedStep: number) => {\n        event.stopPropagation();\n        const { currentStep, stepCount, lastEnabledStep } = this;\n        if (selectedStep > lastEnabledStep || selectedStep === currentStep) return;\n\n        this.change.emit({\n            selectedStep,\n            lastEnabledStep,\n            currentStep,\n            stepCount,\n        });\n    };\n\n    onStepKeyDown = (event: KeyboardEvent, stepNumber: number) => {\n        const { lastEnabledStep, stepCount } = this;\n        const { key } = event;\n\n        let selectedStep;\n        switch (key) {\n            case 'ArrowLeft':\n                event.preventDefault();\n                selectedStep = Math.max(stepNumber - 1, 0);\n                break;\n\n            case 'ArrowRight':\n                event.preventDefault();\n                selectedStep = Math.min(stepNumber + 1, stepCount);\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                selectedStep = 1;\n                break;\n\n            case 'End':\n                event.preventDefault();\n                selectedStep = lastEnabledStep;\n                break;\n        }\n\n        if (!selectedStep) return;\n        this.focusStep(selectedStep, true);\n    };\n\n    resizeIframe() {\n        return window?.TectonElements?.resizeIframe?.();\n    }\n\n    showStep(stepNumber: number) {\n        if (stepNumber > this.lastEnabledStep) {\n            const { currentStep, stepCount } = this;\n            this.lastEnabledStep = stepNumber;\n            this.change.emit({\n                selectedStep: null,\n                lastEnabledStep: stepNumber,\n                currentStep,\n                stepCount,\n            });\n        }\n\n        this.scheduledAfterRender.push(this.resizeIframe);\n        this.showStepPane(stepNumber);\n        this.focusStep(stepNumber, this.scrollEnabled);\n    }\n\n    showStepPane(stepNumber: number) {\n        this.allPanes.forEach((pane, index) => {\n            pane.isActive = stepNumber === index + 1;\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderStepBtn(stepIndex: number) {\n        const { allPanes, stepCount, currentStep, lastEnabledStep } = this;\n        const pane = allPanes?.[stepIndex] ?? null;\n        const { id, status } = pane;\n        const label = this.getPaneSlotOrProperty(pane, 'label');\n        const description = this.getPaneSlotOrProperty(pane, 'description');\n\n        const stepNumber = stepIndex + 1;\n        const isCurrentStep = stepNumber === currentStep;\n        const labelId = !!label && `label-${id}`;\n        const descriptionId = !!label && !!description && `description-${id}`;\n        const btnLabel = !label && loc('tecton.element.stepper.number', [`${stepNumber}`, `${stepCount}`]);\n\n        let statusIcon;\n        if (status === 'complete') statusIcon = 'success-filled';\n        else if (status === 'error') statusIcon = 'warning-filled';\n\n        const stepClasses = ['step-btn'];\n        if (status) stepClasses.push(`status-${status}`);\n        const isLocked = status === 'locked';\n        const disabled = isLocked || stepNumber > lastEnabledStep;\n\n        return (\n            <li role=\"presentation\">\n                <button\n                    class={stepClasses.join(' ')}\n                    type=\"button\"\n                    aria-labelledby={labelId}\n                    aria-describedBy={descriptionId}\n                    aria-label={btnLabel}\n                    aria-selected={isCurrentStep}\n                    aria-disabled={disabled ? 'true' : null}\n                    role=\"tab\"\n                    tabIndex={isCurrentStep ? 0 : -1}\n                    onKeyDown={ev => this.onStepKeyDown(ev, stepNumber)}\n                    onClick={ev => !isLocked && this.onStepClick(ev, stepNumber)}\n                >\n                    <Fragment>\n                        {statusIcon ? (\n                            <div class=\"step-icon\">\n                                <q2-icon type={statusIcon}></q2-icon>\n                            </div>\n                        ) : (\n                            <div class=\"step-bubble\">{stepNumber}</div>\n                        )}\n                        {labelId && (\n                            <div\n                                class=\"step-label\"\n                                id={labelId}\n                                innerHTML={label}\n                            ></div>\n                        )}\n                        {labelId && descriptionId && (\n                            <div\n                                class=\"step-description\"\n                                id={descriptionId}\n                                innerHTML={description}\n                            ></div>\n                        )}\n                    </Fragment>\n                </button>\n                {stepIndex ? <div class=\"step-divider\"></div> : ''}\n            </li>\n        );\n    }\n\n    render() {\n        const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;\n        const containerClasses = ['step-container'];\n        if (scrollEnabled) containerClasses.push('has-scroll');\n\n        return (\n            <Fragment>\n                <div class={containerClasses.join(' ')}>\n                    {scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hideLabel={true}\n                                hidden={!this.showScrollLeft}\n                                label={loc('tecton.element.stepper.scrollLeft')}\n                                onClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon type=\"chevron-left\"></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hideLabel={true}\n                                hidden={!this.showScrollRight}\n                                label={loc('tecton.element.stepper.scrollRight')}\n                                onClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon type=\"chevron-right\"></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        role=\"tablist\"\n                    >\n                        {stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex))}\n                    </ul>\n                </div>\n                <div role=\"list\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"names":["overrideFocus","isEventFromElement","loc","h","Fragment"],"mappings":"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"}
+{"version":3,"file":"q2-stepper.entry.cjs.js","sources":["src/components/q2-stepper/q2-stepper.scss?tag=q2-stepper&encapsulation=shadow","src/components/q2-stepper/q2-stepper.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n\n:host {\n    display: block;\n    position: relative;\n}\n\nul {\n    --comp-bullet-background: #{var-list(\n            --tct-stepper-bullet-active-background,\n            var-prefixer(stepper-bullet-active-bg),\n            --t-primary,\n            #0079c1\n        )};\n    --comp-bullet-font-color: #{var-list(\n            var-prefixer(stepper-bullet-active-font-color),\n            --t-primary-font-color,\n            #ffffff\n        )};\n    --comp-bullet-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n    --comp-bullet-gap: #{var-list(var-prefixer(stepper-btn-gap), --app-scale-3x, 15px)};\n    --comp-bullet-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n\n    --comp-step-width: #{var-list(var-prefixer(stepper-step-width), --t-stepper-step-width, 80px)};\n    --comp-step-gap: #{var-list(var-prefixer(stepper-step-gap), 5px)};\n    --comp-btn-icon-size: #{var-list(var-prefixer(stepper-btn-icon-size), 24px)};\n    --comp-btn-label-font-size: #{var-list(var-prefixer(stepper-btn-label-font-size), 16px)};\n    --comp-tween: #{var-list(var-prefixer(stepper-tween), --app-tween-1, unquote('0.2s ease'))};\n\n    overflow-x: auto;\n    display: flex;\n    justify-content: center;\n    list-style: none;\n    padding: 0;\n    padding: var-list(var-prefixer(stepper-list-padding), 2px);\n    margin: 0;\n    gap: var(--comp-step-gap);\n    @include tiny-scrollbar();\n\n    .has-scroll & {\n        justify-content: unset;\n    }\n}\n\nli {\n    min-height: var-list(var-prefixer(stepper-min-height), 50px);\n    flex: 0 0 auto;\n    position: relative;\n    width: var(--comp-step-width);\n    text-align: center;\n    max-width: 150px;\n    min-width: 80px;\n}\n\n.step-btn {\n    position: relative;\n    background: transparent;\n    border: 0;\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    height: calc(100% - 4px);\n    width: 100%;\n    transition: var(--comp-tween);\n    padding: 0;\n    transition-property: box-shadow;\n    outline: none;\n    margin-top: 2px;\n\n    --comp-active-color: var(--comp-bullet-background);\n    &.status-complete {\n        --comp-active-color: var(--const-stoplight-success, #0e8a00);\n        --tct-stoplight-success: var(--comp-active-color);\n    }\n    &.status-error {\n        --comp-active-color: var(--const-stoplight-alert, #d20a0a);\n        --tct-stoplight-warning: var(--comp-active-color);\n    }\n\n    &[aria-disabled='true'] {\n        cursor: not-allowed;\n\n        &,\n        & + .step-divider {\n            --comp-bullet-font-color: #{var-list(var-prefixer(stepper-bullet-inactive-font-color), --t-text, #4d4d4d)};\n            --comp-bullet-background: #{var-list(\n                    --tct-stepper-bullet-inactive-background,\n                    var-prefixer(stepper-bullet-inactive-bg),\n                    --t-gray-12,\n                    #d9d9d9\n                )};\n        }\n    }\n}\n.step-icon,\n.step-bubble {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    line-height: 0;\n    margin: var(--comp-bullet-gap) auto;\n    color: var(--comp-bullet-font-color);\n    width: var(--comp-btn-icon-size);\n    height: var(--comp-btn-icon-size);\n    min-height: var(--comp-btn-icon-size);\n    font-size: var(--comp-bullet-font-size);\n    transition: var(--comp-tween);\n    transition-property: background, color;\n    border-radius: 50%;\n    position: relative;\n\n    q2-icon {\n        --tct-icon-fill: var(--comp-active-color);\n        &:before {\n            content: '';\n            display: block;\n            background: var(--comp-bullet-font-color);\n            position: absolute;\n            width: 80%;\n            height: 80%;\n            left: 11%;\n            top: 11%;\n            border-radius: 50%;\n        }\n    }\n    .status-complete &,\n    .status-error & {\n        background: var(--comp-active-color);\n    }\n    [aria-selected='true'] & {\n        box-shadow:\n            0 0 0 2px var(--t-base, #ffffff),\n            0 0 0 4px var(--comp-active-color);\n        font-weight: var-list(var-prefixer(stepper-bullet-active-font-weight), 600);\n    }\n}\n\n.step-bubble {\n    background: var(--comp-bullet-background);\n}\n\n.step-divider {\n    width: calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));\n    top: calc(calc(var(--comp-bullet-size) / 2) + var(--comp-bullet-gap));\n    left: calc(calc(var(--comp-step-width) * -0.5) + var(--comp-step-gap) + var(--comp-bullet-gap));\n    border: 0;\n    border-top: 1px solid var(--comp-bullet-background);\n    height: 0;\n    position: absolute;\n    margin: 0;\n    transition: border var(--comp-tween);\n}\n\n.step-container {\n    position: relative;\n}\n\n.step-label {\n    color: var-list(--tct-stepper-label-color, var-prefixer(stepper-title-color), --t-text, #4d4d4d);\n    font-size: var-list(\n        --tct-stepper-label-font-size,\n        var-prefixer(stepper-title-font-size),\n        --app-font-size-small,\n        12px\n    );\n    line-height: var-list(--tct-stepper-label-line-height, 1.5em);\n    @include line-clamp(var(--tct-stepper-label-line-count, 2));\n\n    [aria-selected] & {\n        font-weight: var-list(var-prefixer(stepper-active-font-weight), 600);\n    }\n\n    [aria-describedby] & {\n        -webkit-line-clamp: var(--tct-stepper-label-line-count, 1);\n    }\n}\n\n.step-description {\n    color: var-list(var-prefixer(stepper-description-color), --t-textA, rgba(77, 77, 77, 0.77));\n    font-size: var-list(var-prefixer(stepper-description-font-size), --app-font-size-small, 12px);\n    @include line-clamp(var(--tct-stepper-description-line-count, 4));\n\n    // Add padding for descenders\n    padding-bottom: 0.2em;\n\n    // For description slot on q2-stepper-pane\n    .ellipsize {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        max-width: var(--comp-step-width);\n        display: block;\n    }\n}\n\n.gradient-left,\n.gradient-right {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    height: 100%;\n    width: 18px;\n}\n\n.gradient-left {\n    background-image: linear-gradient(\n        to left,\n        var(--t-base-a0, rgba(255, 255, 255, 0)),\n        var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n        var(--t-base, #ffffff) 100%\n    );\n    left: 0;\n}\n\n.gradient-right {\n    background-image: linear-gradient(\n        to right,\n        var(--t-base-a0, rgba(255, 255, 255, 0)),\n        var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%,\n        var(--t-base, #ffffff) 100%\n    );\n    right: 0;\n}\n\n.btn-left,\n.btn-right {\n    --tct-icon-size: 18px;\n    --tct-btn-icon-hover-background: transparent;\n    --tct-btn-icon-width: 22px;\n    --tct-icon-stroke-primary: #{var-list(var-prefixer(stepper-scroll-arrow-color), --t-text, #4d4d4d)};\n\n    position: absolute;\n    top: calc(50% - 22px);\n    z-index: 2;\n    q2-icon {\n        --tct-icon-stroke-width: 3;\n    }\n}\n\n.btn-left {\n    left: 0;\n}\n\n.btn-right {\n    right: 0;\n}\n","import {\n    Component,\n    Prop,\n    h,\n    Element,\n    ComponentInterface,\n    State,\n    Watch,\n    Listen,\n    Method,\n    Event,\n    EventEmitter,\n    Fragment,\n} from '@stencil/core';\nimport { loc, overrideFocus, isEventFromElement } from 'src/utils';\n@Component({ tag: 'q2-stepper', shadow: true, styleUrl: 'q2-stepper.scss' })\nexport class Q2Stepper implements ComponentInterface {\n    // #region Own Properties\n\n    listElement: HTMLUListElement;\n    resizeObserver: ResizeObserver;\n    scheduledAfterRender: (() => void)[] = [];\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    contentChangeTriggerCount: number = 0;\n\n    @State()\n    scrollEnabled: boolean = false;\n\n    @State()\n    showScrollLeft: boolean = false;\n\n    @State()\n    showScrollRight: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** The currently selected step. */\n    @Prop({ reflect: true, mutable: true })\n    currentStep: number;\n\n    /**\n     * The last step the user may navigate to.\n     * @info\n     * Will be managed automatically if not provided.\n     */\n    @Prop({ reflect: true, mutable: true })\n    lastEnabledStep: number;\n\n    /**\n     * Used to determine the number of steps in the stepper.\n     * @private\n     */\n    @Prop({ mutable: true })\n    stepCount: number;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the selected step changes.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n        this.resizeObserver = null;\n    }\n\n    componentWillLoad() {\n        this.handleUndefinedStepProperties();\n        if ('ResizeObserver' in window) {\n            this.resizeObserver = new ResizeObserver(() => this.checkScrollState());\n        }\n        this.checkForPanes();\n    }\n\n    componentDidLoad() {\n        this.resizeObserver?.observe(this.listElement);\n        this.checkScrollState();\n        overrideFocus(this.hostElement);\n        setTimeout(() => this.showStep(this.currentStep || 1), 0);\n    }\n\n    componentDidRender() {\n        this.scheduledAfterRender.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        const { hostElement } = this;\n        if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {\n            this.currentStep = event.detail.selectedStep || this.currentStep;\n        }\n    }\n\n    @Listen('contentChange')\n    contentChangeHandler() {\n        this.contentChangeTriggerCount += 1;\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.focusStep(this.currentStep, true, true);\n    }\n\n    @Listen('statusChange')\n    statusChangeHandler(event: CustomEvent) {\n        const index = Array.from(this.allPanes).findIndex(el => event.detail.id === el.id);\n        if (index > -1) {\n            this.allPanes[index].status = event.detail.status;\n            this.renderStepBtn(index);\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Emulates clicking a step in the stepper and emitting the change event.\n     *\n     * You may provide either the step number or the stepper pane id.\n     *\n     * If the value is invalid or the step is locked, the method will do nothing.\n     * @testOnly\n     */\n    @Method()\n    async selectStep(value: number | string) {\n        let stepListItem;\n        switch (typeof value) {\n            case 'number':\n                if (value > this.lastEnabledStep || value < 1) break;\n                stepListItem = this.listElement.children[value - 1];\n                if (!stepListItem) return;\n                (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n                break;\n            case 'string':\n                const pane = this.hostElement.querySelector<HTMLQ2StepperPaneElement>(`#${value}`);\n                if (!pane) break;\n                const stepIndex = this.allPanes.indexOf(pane);\n                if (stepIndex + 1 > this.lastEnabledStep || stepIndex < 0) break;\n                stepListItem = this.listElement.children[stepIndex];\n                if (!stepListItem) break;\n                (stepListItem.firstElementChild as HTMLButtonElement)?.click();\n                break;\n            default:\n                break;\n        }\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('lastEnabledStep')\n    @Watch('currentStep')\n    lastEnabledStepChanged() {\n        this.handleUndefinedStepProperties();\n    }\n\n    @Watch('currentStep')\n    currentStepChanged(stepNumber: number) {\n        this.showStep(stepNumber);\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get allPanes() {\n        return Array.from(this.hostElement.querySelectorAll<HTMLQ2StepperPaneElement>('q2-stepper-pane'));\n    }\n\n    checkForPanes = () => {\n        const { allPanes } = this;\n        if (!allPanes.length) return;\n\n        this.stepCount = allPanes.length;\n    };\n\n    checkScrollState = () => {\n        if (!this.listElement) return;\n        const { scrollLeft, scrollWidth, clientWidth } = this.listElement;\n        this.scrollEnabled = scrollWidth > clientWidth;\n        this.showScrollLeft = !!scrollLeft;\n        this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;\n    };\n\n    focusStep(stepNumber: number, scrollIntoView?: boolean, forceFocus?: boolean) {\n        const { listElement } = this;\n        if (!listElement) return;\n\n        const stepListItem = listElement.children[stepNumber - 1] as HTMLLIElement;\n        const isActive = document.activeElement === this.hostElement;\n        if (!stepListItem) return;\n        if (isActive || forceFocus) {\n            (stepListItem.firstElementChild as HTMLButtonElement)?.focus();\n        }\n\n        if (scrollIntoView) {\n            const left = stepListItem.offsetLeft - this.listElement.clientWidth / 2;\n            this.listElement.scrollTo({\n                left,\n                behavior: 'smooth',\n            });\n        }\n    }\n\n    getPaneSlotOrProperty(pane: HTMLQ2StepperPaneElement, slotName: 'description' | 'label') {\n        const slot = Array.from(pane.children).find(child => child.getAttribute('slot') === slotName);\n        return slot?.outerHTML ?? loc(pane[slotName]);\n    }\n\n    handleUndefinedStepProperties() {\n        const { currentStep, lastEnabledStep } = this;\n        if (currentStep && lastEnabledStep) return;\n        if (!currentStep && lastEnabledStep) {\n            this.currentStep = lastEnabledStep;\n        } else if (currentStep && !lastEnabledStep) {\n            this.lastEnabledStep = currentStep;\n        } else if (!currentStep && !lastEnabledStep) {\n            this.currentStep = 1;\n            this.lastEnabledStep = 1;\n        }\n    }\n\n    onScrollBtnClick = (direction: 'left' | 'right') => {\n        const scrollAmount = Math.floor(this.listElement.clientWidth / 2);\n\n        this.listElement.scrollBy({\n            left: direction === 'left' ? -scrollAmount : scrollAmount,\n            behavior: 'smooth',\n        });\n    };\n\n    onSlotChange = () => {\n        this.checkForPanes();\n        this.checkScrollState();\n    };\n\n    onStepClick = (event, selectedStep: number) => {\n        event.stopPropagation();\n        const { currentStep, stepCount, lastEnabledStep } = this;\n        if (selectedStep > lastEnabledStep || selectedStep === currentStep) return;\n\n        this.change.emit({\n            selectedStep,\n            lastEnabledStep,\n            currentStep,\n            stepCount,\n        });\n    };\n\n    onStepKeyDown = (event: KeyboardEvent, stepNumber: number) => {\n        const { lastEnabledStep, stepCount } = this;\n        const { key } = event;\n\n        let selectedStep;\n        switch (key) {\n            case 'ArrowLeft':\n                event.preventDefault();\n                selectedStep = Math.max(stepNumber - 1, 0);\n                break;\n\n            case 'ArrowRight':\n                event.preventDefault();\n                selectedStep = Math.min(stepNumber + 1, stepCount);\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                selectedStep = 1;\n                break;\n\n            case 'End':\n                event.preventDefault();\n                selectedStep = lastEnabledStep;\n                break;\n        }\n\n        if (!selectedStep) return;\n        this.focusStep(selectedStep, true);\n    };\n\n    resizeIframe() {\n        return window?.TectonElements?.resizeIframe?.();\n    }\n\n    showStep(stepNumber: number) {\n        if (stepNumber > this.lastEnabledStep) {\n            const { currentStep, stepCount } = this;\n            this.lastEnabledStep = stepNumber;\n            this.change.emit({\n                selectedStep: null,\n                lastEnabledStep: stepNumber,\n                currentStep,\n                stepCount,\n            });\n        }\n\n        this.scheduledAfterRender.push(this.resizeIframe);\n        this.showStepPane(stepNumber);\n        this.focusStep(stepNumber, this.scrollEnabled);\n    }\n\n    showStepPane(stepNumber: number) {\n        this.allPanes.forEach((pane, index) => {\n            pane.isActive = stepNumber === index + 1;\n        });\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    renderStepBtn(stepIndex: number) {\n        const { allPanes, stepCount, lastEnabledStep, currentStep } = this;\n        const pane = allPanes?.[stepIndex] ?? null;\n        const { id, status } = pane;\n        const label = this.getPaneSlotOrProperty(pane, 'label');\n        const description = this.getPaneSlotOrProperty(pane, 'description');\n\n        const stepNumber = stepIndex + 1;\n        const isCurrentStep = stepNumber === currentStep;\n        const labelId = !!label && `label-${id}`;\n        const descriptionId = !!label && !!description && `description-${id}`;\n        const btnLabel = !label && loc('tecton.element.stepper.number', [`${stepNumber}`, `${stepCount}`]);\n\n        let statusIcon;\n        if (status === 'complete') statusIcon = 'success-filled';\n        else if (status === 'error') statusIcon = 'warning-filled';\n\n        const stepClasses = ['step-btn'];\n        if (status) stepClasses.push(`status-${status}`);\n        const isLocked = status === 'locked';\n        const disabled = isLocked || stepNumber > lastEnabledStep;\n\n        return (\n            <li role=\"presentation\">\n                <button\n                    class={stepClasses.join(' ')}\n                    type=\"button\"\n                    aria-labelledby={labelId}\n                    aria-describedBy={descriptionId}\n                    aria-label={btnLabel}\n                    aria-selected={`${isCurrentStep}`}\n                    aria-disabled={disabled ? 'true' : undefined}\n                    role=\"tab\"\n                    tabIndex={isCurrentStep ? 0 : -1}\n                    onKeyDown={ev => this.onStepKeyDown(ev, stepNumber)}\n                    onClick={ev => !isLocked && this.onStepClick(ev, stepNumber)}\n                >\n                    <Fragment>\n                        {statusIcon ? (\n                            <div class=\"step-icon\">\n                                <q2-icon type={statusIcon}></q2-icon>\n                            </div>\n                        ) : (\n                            <div class=\"step-bubble\">{stepNumber}</div>\n                        )}\n                        {labelId && (\n                            <div\n                                class=\"step-label\"\n                                id={labelId}\n                                innerHTML={label}\n                            ></div>\n                        )}\n                        {labelId && descriptionId && (\n                            <div\n                                class=\"step-description\"\n                                id={descriptionId}\n                                innerHTML={description}\n                            ></div>\n                        )}\n                    </Fragment>\n                </button>\n                {stepIndex ? <div class=\"step-divider\"></div> : ''}\n            </li>\n        );\n    }\n\n    render() {\n        const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;\n        const containerClasses = ['step-container'];\n        if (scrollEnabled) containerClasses.push('has-scroll');\n\n        return (\n            <Fragment>\n                <div class={containerClasses.join(' ')}>\n                    {scrollEnabled && (\n                        <Fragment>\n                            <div\n                                class=\"gradient-left\"\n                                hidden={!showScrollLeft}\n                            ></div>\n                            <div\n                                class=\"gradient-right\"\n                                hidden={!showScrollRight}\n                            ></div>\n\n                            <q2-btn\n                                class=\"btn-left\"\n                                hideLabel={true}\n                                hidden={!this.showScrollLeft}\n                                label={loc('tecton.element.stepper.scrollLeft')}\n                                onClick={() => this.onScrollBtnClick('left')}\n                            >\n                                <q2-icon type=\"chevron-left\"></q2-icon>\n                            </q2-btn>\n\n                            <q2-btn\n                                class=\"btn-right\"\n                                hideLabel={true}\n                                hidden={!this.showScrollRight}\n                                label={loc('tecton.element.stepper.scrollRight')}\n                                onClick={() => this.onScrollBtnClick('right')}\n                            >\n                                <q2-icon type=\"chevron-right\"></q2-icon>\n                            </q2-btn>\n                        </Fragment>\n                    )}\n\n                    <ul\n                        onScroll={this.checkScrollState}\n                        ref={el => (this.listElement = el)}\n                        role=\"tablist\"\n                    >\n                        {stepCount > 0 && [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex))}\n                    </ul>\n                </div>\n                <div role=\"list\">\n                    <slot onSlotchange={() => this.onSlotChange()} />\n                </div>\n            </Fragment>\n        );\n    }\n\n    // #endregion\n}\n"],"names":["overrideFocus","isEventFromElement","loc","h","Fragment"],"mappings":"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"}

package/dist/cjs/q2-tag.cjs.entry.js

@@ -197,7 +197,7 @@ const Q2Tag = class {
         if (this.optionCount)
             wrapperClassNames.push('has-options');
         const shouldShowOptions = this.optionCount > 0;
-        return (index.h(index.Host, { key: 'e62384026c7576cd4c38c094f3d57b7c9b4c48c9', role: shouldShowOptions ? 'list' : undefined }, index.h("click-elsewhere", { key: '4ecd2dcd742fd8948c55c5498862a8af7320ba8b', onChange: this.onClickElsewhere }, shouldShowOptions ? (index.h(index.Fragment, null, index.h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, index.h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description" }, index.h("div", { class: wrapperClassNames.join(' ') }, index$1.loc(this.label)), index.h("q2-icon", { type: "options" }))), this.renderHiddenElement())) : (index.h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, index.h("div", { class: wrapperClassNames.join(' ') }, index.h("slot", { name: "decorator" }), index$1.loc(this.label)))), shouldShowOptions && (index.h("q2-popover", { key: 'c153d2dea6a42a5ffcf0c339b01542e85ff2f247', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, index.h("q2-option-list", { key: 'cca854f1ec96e8473121dfd3438780f2995de9a3', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: index$1.loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, index.h("slot", { key: '8e2e96403bd9655a2201e27899832b02d8532d5c' })))))));
+        return (index.h(index.Host, { key: 'f493afbfd4156f8998a9a54323d605a66bacede4', role: shouldShowOptions ? 'list' : undefined }, index.h("click-elsewhere", { key: 'b71c3d5f05df3eb435ecd7e91a9bdf6885b0f9cc', onChange: this.onClickElsewhere }, shouldShowOptions ? (index.h(index.Fragment, null, index.h("div", { class: "btn-wrapper", onClick: this.handleWrapperClick }, index.h("button", { class: "tag-wrapper", ref: el => (this.dropdownBtn = el), "test-id": "btn-control", type: "button", role: "combobox", onClick: this.handleClick, onKeyDown: this.handleKeydown, onFocusout: this.handleButtonFocusout, "aria-controls": "option-list", "aria-expanded": open ? 'true' : 'false', "aria-describedby": "option-description" }, index.h("div", { class: wrapperClassNames.join(' ') }, index$1.loc(this.label)), index.h("q2-icon", { type: "options" }))), this.renderHiddenElement())) : (index.h("div", { class: "tag-wrapper", onClick: e => e.stopPropagation() }, index.h("div", { class: wrapperClassNames.join(' ') }, index.h("slot", { name: "decorator" }), index$1.loc(this.label)))), shouldShowOptions && (index.h("q2-popover", { key: '7004bdc0077435dca4075f82fc9e269ef233a05b', ref: el => (this.popoverElement = el), controlElement: this.dropdownBtn, open: this.open, maxHeight: this.popoverMaxHeight, minHeight: this.popoverMinHeight, direction: this.popoverDirection, align: this.popoverAlignment }, index.h("q2-option-list", { key: '6629d4ac91f64091bdaf04116cffdc1e00cefe43', id: "option-list", ref: el => (this.optionList = el), onChange: this.handleChange, type: "menu", align: "right", label: index$1.loc('tecton.element.optionList.label', [this.optionListLabel]), "no-select": true }, index.h("slot", { key: '31581faded364d3f1fcee59288eea05b313baaad' })))))));
     }
     get hostElement() { return index.getElement(this); }
 };