@prioticket/design-system-web 1.0.0 → 1.0.1

package/dist/components/pd-segmented-stepper.es.js

@@ -1,14 +1,14 @@
-import { css as h, LitElement as m, html as c } from "lit";
-import { property as o, state as b, customElement as u } from "lit/decorators.js";
+import { css as h, LitElement as m, html as l } from "lit";
+import { property as a, state as u, customElement as b } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
-var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (e, t, s, l) => {
-  for (var p = l > 1 ? void 0 : l ? f(t, s) : t, n = e.length - 1, d; n >= 0; n--)
-    (d = e[n]) && (p = (l ? d(t, s, p) : d(p)) || p);
-  return l && p && v(t, s, p), p;
+var v = Object.defineProperty, S = Object.getOwnPropertyDescriptor, i = (e, t, s, c) => {
+  for (var r = c > 1 ? void 0 : c ? S(t, s) : t, n = e.length - 1, d; n >= 0; n--)
+    (d = e[n]) && (r = (c ? d(t, s, r) : d(r)) || r);
+  return c && r && v(t, s, r), r;
 };
-let a = class extends m {
+let o = class extends m {
   constructor() {
-    super(...arguments), this.activeStep = 0, this.completedSteps = [], this.size = "medium", this.disabled = !1, this.allowStepNavigation = !0, this._steps = [];
+    super(...arguments), this.activeStep = 0, this.completedSteps = [], this.size = "medium", this.disabled = !1, this.allowStepNavigation = !0, this.linear = !0, this._steps = [], this._completedStepsSet = /* @__PURE__ */ new Set();
   }
   connectedCallback() {
     super.connectedCallback(), this.addEventListener("stepper-item-click", this._handleStepClick);
@@ -20,41 +20,63 @@ let a = class extends m {
     this._updateSteps();
   }
   updated(e) {
-    super.updated(e), (e.has("activeStep") || e.has("completedSteps") || e.has("disabled") || e.has("allowStepNavigation")) && this._updateSteps();
+    super.updated(e), (e.has("activeStep") || e.has("completedSteps") || e.has("disabled") || e.has("allowStepNavigation") || e.has("linear")) && (this._updateSteps(), e.has("completedSteps") && (this._completedStepsSet = new Set(this.completedSteps)));
   }
   _updateSteps() {
     const e = this.querySelectorAll("pd-stepper-item");
     this._steps = Array.from(e), this._steps.forEach((t, s) => {
-      t.disabled = this.disabled || t.disabled, t.setAttribute("data-step-index", s.toString()), t.stepNumber = s + 1, this.completedSteps.includes(s) ? t.state = "completed" : s === this.activeStep ? t.state = "active" : t.state = "pending", t.clickable = this.allowStepNavigation && (t.state === "completed" || t.state === "active" && !this.disabled);
+      t.disabled = this.disabled, t.setAttribute("data-step-index", s.toString()), t.stepNumber = s + 1;
+      const c = this._completedStepsSet.has(s) || this.completedSteps.includes(s);
+      c ? t.state = "completed" : s === this.activeStep ? t.state = "active" : t.state = "pending";
+      const r = !this.linear || s <= this.activeStep || c;
+      t.clickable = this.allowStepNavigation && r && !this.disabled;
     });
   }
   _handleStepClick(e) {
     if (this.disabled) return;
     const t = e.target, s = parseInt(t.getAttribute("data-step-index") || "0");
-    this.allowStepNavigation && (this.completedSteps.includes(s) || s === this.activeStep) && this.goToStep(s);
+    t.clickable && this.allowStepNavigation && this.goToStep(s);
   }
   /** Navigate to a specific step. */
   goToStep(e) {
-    if (e >= 0 && e < this._steps.length) {
+    if (e >= 0 && e < this._steps.length && e !== this.activeStep) {
       const t = this.activeStep;
-      this.activeStep = e, this._updateSteps(), this.dispatchEvent(new CustomEvent("stepchange", {
-        detail: {
-          activeStep: this.activeStep,
-          previousStep: t,
-          totalSteps: this._steps.length
-        },
-        bubbles: !0,
-        composed: !0
-      }));
+      this.activeStep = e, this._completedStepsSet = new Set(this.completedSteps), this._updateSteps(), this._dispatchStepChange(t);
     }
   }
+  _dispatchStepChange(e) {
+    this.dispatchEvent(new CustomEvent("step-change", {
+      detail: {
+        currentStep: this.activeStep,
+        previousStep: e ?? this.activeStep
+      },
+      bubbles: !0,
+      composed: !0
+    })), this.dispatchEvent(new CustomEvent("stepchange", {
+      detail: {
+        activeStep: this.activeStep,
+        previousStep: e ?? this.activeStep,
+        totalSteps: this._steps.length
+      },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  /** Move to the next step (alias for nextStep). */
+  next() {
+    this.activeStep < this._steps.length - 1 && (this.completeStep(this.activeStep), this.goToStep(this.activeStep + 1));
+  }
+  /** Move to the previous step (alias for previousStep). */
+  back() {
+    this.activeStep > 0 && this.goToStep(this.activeStep - 1);
+  }
   /** Move to the next step. */
   nextStep() {
-    this.activeStep < this._steps.length - 1 && this.goToStep(this.activeStep + 1);
+    this.next();
   }
   /** Move to the previous step. */
   previousStep() {
-    this.activeStep > 0 && this.goToStep(this.activeStep - 1);
+    this.back();
   }
   /** Mark the current step as completed and move to the next step. */
   completeCurrentStep() {
@@ -62,7 +84,7 @@ let a = class extends m {
   }
   /** Mark a specific step as completed. */
   completeStep(e) {
-    this.completedSteps.includes(e) || (this.completedSteps = [...this.completedSteps, e].sort((t, s) => t - s), this._updateSteps(), this.dispatchEvent(new CustomEvent("stepcomplete", {
+    e >= 0 && e < this._steps.length && !this._completedStepsSet.has(e) && (this._completedStepsSet.add(e), this.completedSteps = Array.from(this._completedStepsSet).sort((t, s) => t - s), this._updateSteps(), this.dispatchEvent(new CustomEvent("stepcomplete", {
       detail: {
         completedStep: e,
         completedSteps: this.completedSteps,
@@ -70,21 +92,25 @@ let a = class extends m {
       },
       bubbles: !0,
       composed: !0
-    }))), e === this.activeStep && this.activeStep < this._steps.length - 1 && this.nextStep();
+    })));
+  }
+  /** Mark a step as incomplete. */
+  resetStep(e) {
+    e >= 0 && e < this._steps.length && this._completedStepsSet.has(e) && (this._completedStepsSet.delete(e), this.completedSteps = Array.from(this._completedStepsSet).sort((t, s) => t - s), this._updateSteps());
   }
   /** Reset all steps to pending state. */
   reset() {
-    this.activeStep = 0, this.completedSteps = [], this._updateSteps();
+    this.activeStep = 0, this.completedSteps = [], this._completedStepsSet.clear(), this._updateSteps();
   }
   render() {
-    return c`
+    return l`
       <div class="segmented-stepper" role="group" aria-label="Progress stepper">
         <slot @slotchange=${this._updateSteps}></slot>
       </div>
     `;
   }
 };
-a.styles = h`
+o.styles = h`
     :host {
       display: inline-flex;
       font-family: var(--md-sys-typescale-body-large-font, 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
@@ -129,27 +155,33 @@ a.styles = h`
     }
   `;
 i([
-  o({ type: Number, attribute: "active-step" })
-], a.prototype, "activeStep", 2);
+  a({ type: Number, attribute: "active-step" })
+], o.prototype, "activeStep", 2);
+i([
+  a({ type: Array, attribute: "completed-steps" })
+], o.prototype, "completedSteps", 2);
+i([
+  a({ type: String, reflect: !0 })
+], o.prototype, "size", 2);
 i([
-  o({ type: Array, attribute: "completed-steps" })
-], a.prototype, "completedSteps", 2);
+  a({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
 i([
-  o({ type: String, reflect: !0 })
-], a.prototype, "size", 2);
+  a({ type: Boolean, attribute: "allow-step-navigation" })
+], o.prototype, "allowStepNavigation", 2);
 i([
-  o({ type: Boolean, reflect: !0 })
-], a.prototype, "disabled", 2);
+  a({ type: Boolean })
+], o.prototype, "linear", 2);
 i([
-  o({ type: Boolean, attribute: "allow-step-navigation" })
-], a.prototype, "allowStepNavigation", 2);
+  u()
+], o.prototype, "_steps", 2);
 i([
-  b()
-], a.prototype, "_steps", 2);
-a = i([
-  u("pd-segmented-stepper")
-], a);
-let r = class extends m {
+  u()
+], o.prototype, "_completedStepsSet", 2);
+o = i([
+  b("pd-segmented-stepper")
+], o);
+let p = class extends m {
   constructor() {
     super(...arguments), this.stepNumber = 1, this.state = "pending", this.disabled = !1, this.clickable = !1, this.icon = "";
   }
@@ -162,7 +194,7 @@ let r = class extends m {
   }
   render() {
     const e = this.state === "completed" && !this.icon, t = this.state !== "completed" && !this.icon;
-    return c`
+    return l`
       <button
         class="step ${this.state} ${this.clickable ? "clickable" : ""}"
         ?disabled=${this.disabled}
@@ -171,16 +203,16 @@ let r = class extends m {
         aria-label="Step ${this.stepNumber}: ${this.state}"
       >
         <div class="step-indicator">
-          ${e ? c`<md-icon class="check-icon">check</md-icon>` : ""}
-          ${this.icon ? c`<md-icon class="step-icon">${this.icon}</md-icon>` : ""}
-          ${t ? c`<span class="step-number">${this.stepNumber}</span>` : ""}
+          ${e ? l`<md-icon class="check-icon">check</md-icon>` : ""}
+          ${this.icon ? l`<md-icon class="step-icon">${this.icon}</md-icon>` : ""}
+          ${t ? l`<span class="step-number">${this.stepNumber}</span>` : ""}
         </div>
         <span class="step-label"><slot></slot></span>
       </button>
     `;
   }
 };
-r.styles = h`
+p.styles = h`
     :host {
       display: inline-flex;
     }
@@ -310,24 +342,24 @@ r.styles = h`
     }
   `;
 i([
-  o({ type: Number, attribute: "step-number" })
-], r.prototype, "stepNumber", 2);
+  a({ type: Number, attribute: "step-number" })
+], p.prototype, "stepNumber", 2);
 i([
-  o({ type: String, reflect: !0 })
-], r.prototype, "state", 2);
+  a({ type: String, reflect: !0 })
+], p.prototype, "state", 2);
 i([
-  o({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled", 2);
+  a({ type: Boolean, reflect: !0 })
+], p.prototype, "disabled", 2);
 i([
-  o({ type: Boolean })
-], r.prototype, "clickable", 2);
+  a({ type: Boolean })
+], p.prototype, "clickable", 2);
 i([
-  o({ type: String })
-], r.prototype, "icon", 2);
-r = i([
-  u("pd-stepper-item")
-], r);
+  a({ type: String })
+], p.prototype, "icon", 2);
+p = i([
+  b("pd-stepper-item")
+], p);
 export {
-  a as PdSegmentedStepper,
-  r as PdStepperItem
+  o as PdSegmentedStepper,
+  p as PdStepperItem
 };

package/dist/types/components/pd-icon-button.d.ts

@@ -15,10 +15,11 @@ export declare class PdIconButton extends LitElement {
     target: string;
     ariaLabel: string;
     ariaLabelSelected: string;
+    private _internalSelected;
+    connectedCallback(): void;
+    private get isSelected();
     private getIconButtonTemplate;
     render(): import("lit-html").TemplateResult<1>;
     private _handleClick;
-    private _handleInput;
-    private _handleChange;
     static styles: import("lit").CSSResult;
 }

package/dist/types/components/pd-segmented-stepper.d.ts

@@ -6,7 +6,8 @@ import '@material/web/icon/icon.js';
  *
  * @slot - The default slot for pd-stepper-item elements.
  *
- * @fires stepchange - Fired when the active step changes.
+ * @fires step-change - Fired when the active step changes (consistent with pd-stepper).
+ * @fires stepchange - Fired when the active step changes (backwards compatibility).
  * @fires stepcomplete - Fired when a step is marked as completed.
  */
 export declare class PdSegmentedStepper extends LitElement {
@@ -20,7 +21,10 @@ export declare class PdSegmentedStepper extends LitElement {
     disabled: boolean;
     /** Whether users can click on completed steps to go back. */
     allowStepNavigation: boolean;
+    /** Whether the stepper is linear (steps must be completed in order). */
+    linear: boolean;
     private _steps;
+    private _completedStepsSet;
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;
@@ -29,6 +33,11 @@ export declare class PdSegmentedStepper extends LitElement {
     private _handleStepClick;
     /** Navigate to a specific step. */
     goToStep(stepIndex: number): void;
+    private _dispatchStepChange;
+    /** Move to the next step (alias for nextStep). */
+    next(): void;
+    /** Move to the previous step (alias for previousStep). */
+    back(): void;
     /** Move to the next step. */
     nextStep(): void;
     /** Move to the previous step. */
@@ -37,6 +46,8 @@ export declare class PdSegmentedStepper extends LitElement {
     completeCurrentStep(): void;
     /** Mark a specific step as completed. */
     completeStep(stepIndex: number): void;
+    /** Mark a step as incomplete. */
+    resetStep(stepIndex: number): void;
     /** Reset all steps to pending state. */
     reset(): void;
     render(): import("lit-html").TemplateResult<1>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prioticket/design-system-web",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "main": "./dist/prioticket-design-system-web.umd.js",
   "module": "./dist/prioticket-design-system-web.es.js",